diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
index 0b4561d4d..382f2cc0c 100644
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -33,7 +33,6 @@
     "import/no-cycle": "off",
     "no-plusplus": "off",
     "no-useless-escape": "off",
-    "react-hooks/exhaustive-deps": "off",
     "no-restricted-exports": "off"
   }
 }
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index ebe458b4a..2fe1606ea 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -15,7 +15,7 @@ RUN npm ci
 FROM node:16-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
-COPY ./frontend .
+COPY ./frontend/ .
 
 ARG NEXT_PUBLIC_ENABLE_AZURE
 ENV NEXT_PUBLIC_ENABLE_AZURE=${NEXT_PUBLIC_ENABLE_AZURE}
diff --git a/frontend/api/authService.tsx b/frontend/api/authService.tsx
index 02f791bcd..3abf38b14 100644
--- a/frontend/api/authService.tsx
+++ b/frontend/api/authService.tsx
@@ -11,10 +11,6 @@ export const login = (credentials: LoginUser): Promise<User> => {
   return fetchData("/auth/login", { method: "POST", data: credentials, serverSide: true });
 };
 
-export const refreshAccessToken = (refreshToken: string): Promise<Token> => {
-  return fetchData("/auth/refresh", { refreshToken, serverSide: true });
-};
-
 export const createOrLoginUserAzure = (azureAccessToken: string): Promise<CreateOrLogin> => {
   return fetchData(`/auth/signAzure`, {
     method: "POST",
@@ -22,3 +18,7 @@ export const createOrLoginUserAzure = (azureAccessToken: string): Promise<Create
     serverSide: true,
   });
 };
+
+export const refreshAccessToken = (token: string): Promise<Token> => {
+  return fetchData("/auth/refresh", { refreshToken: token, serverSide: true });
+};
diff --git a/frontend/api/boardService.tsx b/frontend/api/boardService.tsx
index 91c6575e8..3cd3411a0 100644
--- a/frontend/api/boardService.tsx
+++ b/frontend/api/boardService.tsx
@@ -9,7 +9,10 @@ import UpdateCardDto from "../types/card/updateCard.dto";
 import AddCommentDto from "../types/comment/addComment.dto";
 import DeleteCommentDto from "../types/comment/deleteComment.dto";
 import UpdateCommentDto from "../types/comment/updateComment.dto";
-import VoteDto from "../types/board/vote/vote.dto";
+import VoteDto from "../types/vote/vote.dto";
+import MergeCardsDto from "../types/board/mergeCard.dto";
+import RemoveFromCardGroupDto from "../types/card/removeFromCardGroup.dto";
+
 // #region BOARD
 
 export const createBoardRequest = (newBoard: BoardToAdd): Promise<BoardType> => {
@@ -27,8 +30,21 @@ export const getBoardRequest = (
   return fetchData<BoardType>(`/boards/${id}`, { context, serverSide: !!context });
 };
 
-export const getBoardsRequest = (context?: GetServerSidePropsContext): Promise<BoardType[]> => {
-  return fetchData<BoardType[]>(`/boards`, { context, serverSide: !!context });
+export const getDashboardBoardsRequest = (
+  pageParam: number,
+  context?: GetServerSidePropsContext
+): Promise<{ boards: BoardType[]; hasNextPage: boolean; page: number }> => {
+  return fetchData(`/boards/dashboard?page=${pageParam ?? 0}&size=10`, {
+    context,
+    serverSide: !!context,
+  });
+};
+
+export const getBoardsRequest = (
+  pageParam: number,
+  context?: GetServerSidePropsContext
+): Promise<{ boards: BoardType[]; hasNextPage: boolean; page: number }> => {
+  return fetchData(`/boards?page=${pageParam ?? 0}&size=10`, { context, serverSide: !!context });
 };
 
 export const deleteBoardRequest = async (id: string): Promise<BoardType> => {
@@ -73,7 +89,26 @@ export const deleteCardRequest = (deleteCardDto: DeleteCardDto): Promise<BoardTy
 
 // #endregion
 
-// #region COMMENTS
+// #region MERGE_CARDS
+export const mergeCardsRequest = (mergeCard: MergeCardsDto): Promise<BoardType> => {
+  return fetchData<BoardType>(
+    `/boards/${mergeCard.boardId}/card/${mergeCard.cardId}/merge/${mergeCard.cardGroupId}`,
+    { method: "PUT", data: mergeCard }
+  );
+};
+
+export const removeFromMergeRequest = (
+  removeFromMerge: RemoveFromCardGroupDto
+): Promise<BoardType> => {
+  return fetchData<BoardType>(
+    `/boards/${removeFromMerge.boardId}/card/${removeFromMerge.cardGroupId}/cardItem/${removeFromMerge.cardId}/removeFromCardGroup`,
+    { method: "PUT", data: removeFromMerge }
+  );
+};
+
+// #endregion
+
+// #region COMMENT
 export const addCommentRequest = (addCommentDto: AddCommentDto): Promise<BoardType> => {
   return fetchData<BoardType>(
     addCommentDto.isCardGroup
diff --git a/frontend/components/Board/BoardAlertDialog.tsx b/frontend/components/Board/BoardAlertDialog.tsx
deleted file mode 100644
index 832a3bc92..000000000
--- a/frontend/components/Board/BoardAlertDialog.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Cross1Icon } from "@modulz/radix-icons";
-import { styled } from "../../stitches.config";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTrigger,
-} from "../Primitives/AlertDialog";
-import Button from "../Primitives/Button";
-import Text from "../Primitives/Text";
-import Flex from "../Primitives/Flex";
-import ClickEvent from "../../types/events/clickEvent";
-
-const CloseButton = styled(AlertDialogCancel, Button, {
-  position: "relative",
-  top: "0",
-  left: "0",
-});
-
-const ActionButton = styled(AlertDialogAction, Button, {
-  position: "relative",
-  top: "0",
-  left: "0",
-});
-
-const StyledCrossIcon = styled(Cross1Icon, { size: "$15" });
-
-interface BoardAlertDialogProps {
-  text: string;
-  defaultOpen: boolean;
-  handleConfirm: (event: ClickEvent<HTMLButtonElement, MouseEvent>) => void;
-  handleClose: (event: ClickEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-const BoardAlertDialog: React.FC<BoardAlertDialogProps> = ({
-  text,
-  handleConfirm,
-  handleClose,
-  defaultOpen,
-}) => {
-  const handleStopPropagation = <T,>(event: ClickEvent<T, MouseEvent>) => {
-    event.stopPropagation();
-  };
-
-  return (
-    <AlertDialog defaultOpen={defaultOpen}>
-      {!defaultOpen && (
-        <AlertDialogTrigger align="center" asChild>
-          <Button
-            id="delete-item"
-            onClick={handleStopPropagation}
-            css={{ cursor: "pointer", border: "none" }}
-          >
-            <StyledCrossIcon />
-          </Button>
-        </AlertDialogTrigger>
-      )}
-      <AlertDialogPortal>
-        <AlertDialogOverlay />
-        <AlertDialogContent
-          direction="column"
-          onClick={handleStopPropagation}
-          css={{ width: "$400" }}
-        >
-          <Text>{text}</Text>
-          <Flex justify="end" css={{ mt: "$16" }} gap="16">
-            <ActionButton color="red" css={{ width: "10%" }} onClick={handleConfirm}>
-              Yes
-            </ActionButton>
-            <CloseButton
-              color="blue"
-              css={{ position: "relative", width: "10%" }}
-              onClick={handleClose}
-            >
-              No
-            </CloseButton>
-          </Flex>
-        </AlertDialogContent>
-      </AlertDialogPortal>
-    </AlertDialog>
-  );
-};
-
-export default BoardAlertDialog;
diff --git a/frontend/components/Board/Card/AddCard.tsx b/frontend/components/Board/Card/AddCard.tsx
index 1aff3c12d..2d812e399 100644
--- a/frontend/components/Board/Card/AddCard.tsx
+++ b/frontend/components/Board/Card/AddCard.tsx
@@ -3,13 +3,12 @@ import React, { useState } from "react";
 import { styled } from "../../../stitches.config";
 import { CardToAdd } from "../../../types/card/card";
 import ToastMessage from "../../../utils/toast";
-import useBoard from "../../../hooks/useBoard";
 import AddCardDto from "../../../types/card/addCard.dto";
 import BlurEvent from "../../../types/events/blurEvent";
 import Button from "../../Primitives/Button";
 import Flex from "../../Primitives/Flex";
-import ResizableTextArea from "../../Primitives/ResizableTextArea";
 import isEmpty from "../../../utils/isEmpty";
+import useCards from "../../../hooks/useCards";
 
 const ActionButton = styled(Button, { borderRadius: "$round" });
 
@@ -23,7 +22,7 @@ interface AddCardProps {
 }
 
 const AddCard = React.memo<AddCardProps>(({ colId, boardId, socketId }) => {
-  const { addCardInColumn } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+  const { addCardInColumn } = useCards();
 
   const [text, setText] = useState<string>("");
   const [isClicked, setIsClicked] = useState(false);
@@ -82,7 +81,7 @@ const AddCard = React.memo<AddCardProps>(({ colId, boardId, socketId }) => {
       onBlur={handleBlur}
       onFocus={handleFocus}
     >
-      <ResizableTextArea value={text} editText={setText} border={false} edit={false} />
+      {/* <TextArea  /> */}
       {isClicked && (
         <Flex justify="end" gap="4" css={{ width: "100%" }}>
           <ActionButton color="red" onClick={handleDisableEdit}>
diff --git a/frontend/components/Board/Card/CardBoard.tsx b/frontend/components/Board/Card/CardBoard.tsx
index 8213019dd..e6eb28dd1 100644
--- a/frontend/components/Board/Card/CardBoard.tsx
+++ b/frontend/components/Board/Card/CardBoard.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Draggable } from "react-beautiful-dnd";
-import useBoard from "../../../hooks/useBoard";
+import { Draggable } from "@react-forked/dnd";
+import useCards from "../../../hooks/useCards";
 import { styled } from "../../../stitches.config";
 import CardType from "../../../types/card/card";
 import ToastMessage from "../../../utils/toast";
@@ -43,8 +43,7 @@ const CardBoard: React.FC<CardBoardProps> = ({
   userId,
 }) => {
   const isCardGroup = card.items.length > 1;
-  const { updateCard } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
-
+  const { updateCard } = useCards();
   const [editText, setEditText] = useState(false);
   const [newText, setNewText] = useState(card.text);
 
diff --git a/frontend/components/Board/Card/CardFooter.tsx b/frontend/components/Board/Card/CardFooter.tsx
index 536b0a7dd..b05f95b8e 100644
--- a/frontend/components/Board/Card/CardFooter.tsx
+++ b/frontend/components/Board/Card/CardFooter.tsx
@@ -11,12 +11,10 @@ import { styled } from "../../../stitches.config";
 import CardType from "../../../types/card/card";
 import { getCommentsFromCardGroup } from "../../../helper/board/comments";
 import Button from "../../Primitives/Button";
-import useBoard from "../../../hooks/useBoard";
-import { useAppSelector } from "../../../store/hooks";
 import { getCardVotes } from "../../../helper/board/votes";
-import { maxBoardVotes } from "../../../store/store";
 import ToastMessage from "../../../utils/toast";
 import isEmpty from "../../../utils/isEmpty";
+import useVotes from "../../../hooks/useVotes";
 
 const StyledChatBubbleIcon = styled(ChatBubbleIcon, { size: "100%" });
 const StyledPlusIcon = styled(PlusCircledIcon, { size: "100%" });
@@ -31,9 +29,9 @@ interface FooterProps {
 }
 
 const CardFooter = React.memo<FooterProps>(({ boardId, userId, socketId, card }) => {
-  const { addVote, deleteVote } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+  const { addVote, deleteVote } = useVotes();
 
-  const actualBoardVotes = useAppSelector((state) => state.board.votes);
+  const actualBoardVotes = 0;
 
   const cardItemId = card.items.length === 1 ? card.items[0]._id : undefined;
 
@@ -44,7 +42,7 @@ const CardFooter = React.memo<FooterProps>(({ boardId, userId, socketId, card })
   const comments =
     card.items.length === 1 ? card.items[0].comments : getCommentsFromCardGroup(card);
 
-  const maxVotes = maxBoardVotes();
+  const maxVotes = 6;
 
   const handleDeleteVote = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     event.stopPropagation();
@@ -98,7 +96,7 @@ const CardFooter = React.memo<FooterProps>(({ boardId, userId, socketId, card })
       <Button
         css={{ size: "$20" }}
         onClick={handleAddVote}
-        disabled={actualBoardVotes === maxVotes}
+        // disabled={actualBoardVotes === maxVotes}
       >
         <StyledPlusIcon />
       </Button>
diff --git a/frontend/components/Board/Card/SideBar.tsx b/frontend/components/Board/Card/SideBar.tsx
index 9715a1760..b9099672d 100644
--- a/frontend/components/Board/Card/SideBar.tsx
+++ b/frontend/components/Board/Card/SideBar.tsx
@@ -1,17 +1,16 @@
 import { CheckIcon } from "@modulz/radix-icons";
-import React, { Dispatch, SetStateAction, useState, useRef } from "react";
+import React, { Dispatch, SetStateAction, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { styled } from "../../../stitches.config";
 import Comment from "../Comment/Comment";
 import ToastMessage from "../../../utils/toast";
 import Flex from "../../Primitives/Flex";
-import useBoard from "../../../hooks/useBoard";
 import AddCommentDto from "../../../types/comment/addComment.dto";
 import useOnClickOutside from "../../../hooks/useOnClickOutside";
-import ResizableTextArea from "../../Primitives/ResizableTextArea";
 import CardType from "../../../types/card/card";
 import { getCommentsFromCardGroup } from "../../../helper/board/comments";
 import Button from "../../Primitives/Button";
+import useComments from "../../../hooks/useComments";
 
 const SideBarContent = styled("div", {
   position: "sticky",
@@ -37,12 +36,13 @@ interface SideBarProps {
 
 const SideBard = React.memo<SideBarProps>(
   ({ show, setShow, card, color, userId, boardId, socketId }) => {
-    const { addCommentInCard } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+    const { addCommentInCard } = useComments();
 
     const cardItemId = card.items && card.items.length === 1 ? card.items[0]._id : undefined;
     const comments = cardItemId ? card.items[0].comments : getCommentsFromCardGroup(card);
 
-    const [text, setText] = useState("");
+    // setText is missing
+    const [text] = useState("");
     const ref = useRef<HTMLDivElement>(null);
     useOnClickOutside(ref, () => setShow(false));
 
@@ -71,7 +71,7 @@ const SideBard = React.memo<SideBarProps>(
     return createPortal(
       <SideBarContent ref={ref}>
         <Flex direction="column">
-          <ResizableTextArea value={text} editText={setText} border={false} edit={false} />
+          {/* <ResizableTextArea value={text} editText={setText} border={false} edit={false} /> */}
           <Button css={{ borderTop: "1px solid black" }} color="green" onClick={handleAddComment}>
             <StyledCheckIcon />
           </Button>
diff --git a/frontend/components/Board/Column/Column.tsx b/frontend/components/Board/Column/Column.tsx
index ff831f3ee..acf843e66 100644
--- a/frontend/components/Board/Column/Column.tsx
+++ b/frontend/components/Board/Column/Column.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Droppable } from "react-beautiful-dnd";
+import { Droppable } from "@react-forked/dnd";
 import { styled } from "../../../stitches.config";
 import { ColumnBoardType } from "../../../types/column";
 import Flex from "../../Primitives/Flex";
diff --git a/frontend/components/Board/Comment/Comment.tsx b/frontend/components/Board/Comment/Comment.tsx
index 1c7d67e96..3f7e0553c 100644
--- a/frontend/components/Board/Comment/Comment.tsx
+++ b/frontend/components/Board/Comment/Comment.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import useBoard from "../../../hooks/useBoard";
+import useComments from "../../../hooks/useComments";
 import { styled } from "../../../stitches.config";
 import CardComment from "../../../types/comment/comment";
 import ToastMessage from "../../../utils/toast";
@@ -41,7 +41,7 @@ const Comment: React.FC<CommentProps> = ({
   const [editText, setEditText] = useState(false);
   const [newText, setNewText] = useState(comment.text);
 
-  const { updateComment } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+  const { updateComment } = useComments();
 
   const handleUpdateCommentText = () => {
     if (newText?.length > 0 && boardId) {
diff --git a/frontend/components/Board/Item/DeleteItem.tsx b/frontend/components/Board/Item/DeleteItem.tsx
index 0938a023a..2896faeb8 100644
--- a/frontend/components/Board/Item/DeleteItem.tsx
+++ b/frontend/components/Board/Item/DeleteItem.tsx
@@ -1,7 +1,3 @@
-import useBoard from "../../../hooks/useBoard";
-import ClickEvent from "../../../types/events/clickEvent";
-import BoardAlertDialog from "../BoardAlertDialog";
-
 interface DeleteProps {
   type: string;
   itemId: string;
@@ -11,46 +7,41 @@ interface DeleteProps {
   socketId: string | undefined;
 }
 
-const DeleteItem: React.FC<DeleteProps> = ({
-  type,
-  itemId,
-  socketId,
-  boardId,
-  cardId,
-  cardItemId,
-}) => {
-  const { deleteComment, deleteCard } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+const DeleteItem: React.FC<DeleteProps> = () => {
+  // const { deleteCard } = useCards();
+  // const { deleteComment } = useComments();
 
-  const handleDelete = (event: ClickEvent<HTMLButtonElement, MouseEvent>) => {
-    event.stopPropagation();
-    if (type === "CARD") {
-      deleteCard.mutate({
-        cardId: itemId,
-        boardId,
-        socketId,
-      });
-    }
+  // const handleDelete = (event: ClickEvent<HTMLButtonElement, MouseEvent>) => {
+  //   event.stopPropagation();
+  //   if (type === "CARD") {
+  //     deleteCard.mutate({
+  //       cardId: itemId,
+  //       boardId,
+  //       socketId,
+  //     });
+  //   }
 
-    if (type === "COMMENT") {
-      deleteComment.mutate({
-        cardId,
-        cardItemId,
-        boardId,
-        socketId,
-        commentId: itemId,
-        isCardGroup: cardItemId === undefined,
-      });
-    }
-  };
+  //   if (type === "COMMENT") {
+  //     deleteComment.mutate({
+  //       cardId,
+  //       cardItemId,
+  //       boardId,
+  //       socketId,
+  //       commentId: itemId,
+  //       isCardGroup: cardItemId === undefined,
+  //     });
+  //   }
+  // };
 
-  return (
-    <BoardAlertDialog
-      defaultOpen={false}
-      text={`Are you sure you want to delete this ${type.toLowerCase()}?`}
-      handleClose={(e) => e.stopPropagation()}
-      handleConfirm={handleDelete}
-    />
-  );
+  // return (
+  //   <BoardAlertDialog
+  //     defaultOpen={false}
+  //     text={`Are you sure you want to delete this ${type.toLowerCase()}?`}
+  //     handleClose={(e) => e.stopPropagation()}
+  //     handleConfirm={handleDelete}
+  //   />
+  // );
+  return null;
 };
 
 export default DeleteItem;
diff --git a/frontend/components/Board/Item/TextItem.tsx b/frontend/components/Board/Item/TextItem.tsx
index dd538a92c..388ad8b1c 100644
--- a/frontend/components/Board/Item/TextItem.tsx
+++ b/frontend/components/Board/Item/TextItem.tsx
@@ -1,6 +1,5 @@
 import { Dispatch, SetStateAction } from "react";
 import Text from "../../Primitives/Text";
-import ResizableTextArea from "../../Primitives/ResizableTextArea";
 
 interface TextItemProps {
   editText: boolean;
@@ -9,9 +8,10 @@ interface TextItemProps {
   text: string;
 }
 
-const TextItem: React.FC<TextItemProps> = ({ editText, newText, setNewText, text }) => {
+const TextItem: React.FC<TextItemProps> = ({ editText, text }) => {
   if (!editText) return <Text css={{ wordBreak: "break-word" }}>{text}</Text>;
-  return <ResizableTextArea value={newText} editText={setNewText} border={false} edit />;
+  // return <ResizableTextArea value={newText} editText={setNewText} border={false} edit />;
+  return null;
 };
 
 export default TextItem;
diff --git a/frontend/components/Dashboard/BoardList/CardBody.tsx b/frontend/components/Dashboard/BoardList/CardBody.tsx
index ae863eca2..55f666552 100644
--- a/frontend/components/Dashboard/BoardList/CardBody.tsx
+++ b/frontend/components/Dashboard/BoardList/CardBody.tsx
@@ -14,7 +14,7 @@ import CardHeader from "./CardHeader";
 import { styled } from "../../../stitches.config";
 import Shape from "../../Primitives/Shape";
 import Text from "../../Primitives/Text";
-import InputTitle from "../../Title/InputTitle";
+// import InputTitle from "../../Title/InputTitle";
 
 const Circle = styled(Shape, {
   size: "$32",
@@ -65,9 +65,8 @@ const CardBody: React.FC<CardBodyProps> = ({ board }) => {
         interactive="clickable"
       >
         <CardHeader board={board} isEditing={showEditTitle} onClickEdit={setShowEditTitle} />
-        {showEditTitle ? (
-          <InputTitle board={board} onClickEdit={setShowEditTitle} isBoardPage={false} />
-        ) : (
+        {showEditTitle ? null : (
+          // <InputTitle board={board} onClickEdit={setShowEditTitle} isBoardPage={false} />
           <Text>{board.title}</Text>
         )}
         <Text>{board.creationDate?.slice(0, 10)}</Text>
diff --git a/frontend/components/Dashboard/BoardList/DeleteBoardButton.tsx b/frontend/components/Dashboard/BoardList/DeleteBoardButton.tsx
index 0c799fbe6..54036569b 100644
--- a/frontend/components/Dashboard/BoardList/DeleteBoardButton.tsx
+++ b/frontend/components/Dashboard/BoardList/DeleteBoardButton.tsx
@@ -1,34 +1,32 @@
-import useBoard from "../../../hooks/useBoard";
 import { EditBoardTitle } from "../../../types/board/editTitle";
-import ClickEvent from "../../../types/events/clickEvent";
-import BoardAlertDialog from "../../Board/BoardAlertDialog";
 
 interface EditTitleWithBoardId extends EditBoardTitle {
   boardId: string;
 }
 
-const DeleteBoardButton: React.FC<EditTitleWithBoardId> = ({ boardId, isEditing, onClickEdit }) => {
-  const { deleteBoard } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+const DeleteBoardButton: React.FC<EditTitleWithBoardId> = () => {
+  // const { deleteBoard } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
 
-  const handleRemoveBoard = (event: ClickEvent<HTMLButtonElement, MouseEvent>) => {
-    event.stopPropagation();
-    if (isEditing) onClickEdit(!isEditing);
-    deleteBoard.mutate(boardId);
-  };
+  // const handleRemoveBoard = (event: ClickEvent<HTMLButtonElement, MouseEvent>) => {
+  //   event.stopPropagation();
+  //   if (isEditing) onClickEdit(!isEditing);
+  //   deleteBoard.mutate(boardId);
+  // };
 
-  const handleCloseDialog = (event: ClickEvent<HTMLButtonElement, MouseEvent>) => {
-    event.stopPropagation();
-    if (isEditing) onClickEdit(!isEditing);
-  };
+  // const handleCloseDialog = (event: ClickEvent<HTMLButtonElement, MouseEvent>) => {
+  //   event.stopPropagation();
+  //   if (isEditing) onClickEdit(!isEditing);
+  // };
 
-  return (
-    <BoardAlertDialog
-      defaultOpen={false}
-      text="Are you sure you want to delete this board?"
-      handleClose={handleCloseDialog}
-      handleConfirm={handleRemoveBoard}
-    />
-  );
+  // return (
+  //   <BoardAlertDialog
+  //     defaultOpen={false}
+  //     text="Are you sure you want to delete this board?"
+  //     handleClose={handleCloseDialog}
+  //     handleConfirm={handleRemoveBoard}
+  //   />
+  // );
+  return null;
 };
 
 export default DeleteBoardButton;
diff --git a/frontend/components/Dashboard/CreateBoardModal.tsx b/frontend/components/Dashboard/CreateBoardModal.tsx
index d8cec3704..56964070c 100644
--- a/frontend/components/Dashboard/CreateBoardModal.tsx
+++ b/frontend/components/Dashboard/CreateBoardModal.tsx
@@ -33,7 +33,7 @@ interface CreateBoardModalProps {
 }
 
 const CreateBoardModal: React.FC<CreateBoardModalProps> = ({ setFetchLoading }) => {
-  const { createBoard } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
+  const { createBoard } = useBoard({ autoFetchBoard: false });
   const { isLoading, isError } = createBoard;
   const {
     handleSubmit,
diff --git a/frontend/components/Layout/DashboardLayout.tsx b/frontend/components/Layout/DashboardLayout.tsx
new file mode 100644
index 000000000..ae2cce6e4
--- /dev/null
+++ b/frontend/components/Layout/DashboardLayout.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { useSetRecoilState } from "recoil";
+import PlusIcon from "../icons/PlusIcon";
+import { styled } from "../../stitches.config";
+import Button from "../Primitives/Button";
+import Flex from "../Primitives/Flex";
+import Text from "../Primitives/Text";
+import { createBoardState } from "../../store/createBoard/atoms/create-board.atom";
+
+const AddNewBoardButton = styled(Button, {
+  width: "fit-content",
+  display: "flex",
+  position: "relative",
+  height: "$48",
+});
+
+const Main = styled("main", Flex, { width: "100%", height: "100%", ml: "48px" });
+
+type DashboardLayoutProps = {
+  children: React.ReactNode;
+  firstName: string;
+  isDashboard: boolean;
+  isBoards: boolean;
+};
+
+const DashboardLayout = (props: DashboardLayoutProps) => {
+  const { children, firstName, isDashboard, isBoards } = props;
+  const setShowCreateBoard = useSetRecoilState(createBoardState);
+
+  const handleOnClickNewBoard = () => {
+    setShowCreateBoard(true);
+  };
+
+  return (
+    <Main justify="between" gap="36" css={{ mr: isBoards ? "$56" : "0" }}>
+      <Flex direction="column" css={{ mt: "$64", flexGrow: 1 }}>
+        <Flex justify="between">
+          {isDashboard && <Text heading="1">Welcome, {firstName}</Text>}
+          {isBoards && <Text heading="1">Boards</Text>}
+          <AddNewBoardButton
+            onClick={handleOnClickNewBoard}
+            css={{
+              top: isBoards ? "46px" : "none",
+            }}
+          >
+            <PlusIcon css={{ color: "white", mr: "$8" }} />
+            Add new board
+          </AddNewBoardButton>
+        </Flex>
+        {children}
+      </Flex>
+    </Main>
+  );
+};
+
+export default DashboardLayout;
diff --git a/frontend/components/Layout/Layout.tsx b/frontend/components/Layout/Layout.tsx
index 95164d1b4..f186372f5 100644
--- a/frontend/components/Layout/Layout.tsx
+++ b/frontend/components/Layout/Layout.tsx
@@ -1,27 +1,56 @@
-import { useEffect } from "react";
-import { ToastContainer } from "react-toastify";
+import React, { ReactNode, useMemo } from "react";
 import { useSession, signOut } from "next-auth/react";
-import { styled } from "../../stitches.config";
+import { TailSpin } from "react-loader-spinner";
+import { useRouter } from "next/router";
 import Flex from "../Primitives/Flex";
 import { REFRESH_TOKEN_ERROR } from "../../utils/constants";
-import "react-toastify/dist/ReactToastify.css";
+import SideBar from "../Sidebar/Sidebar";
+import SpinnerPage from "../Loading/SpinnerPage";
+import { BOARDS_ROUTE, DASHBOARD_ROUTE } from "../../utils/routes";
+import DashboardLayout from "./DashboardLayout";
 
-const Main = styled("main", Flex, { px: "3vw", py: "$50", height: "100%" });
+const Layout: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const { data: session } = useSession({ required: true });
+  const router = useRouter();
 
-const Layout: React.FC = ({ children }) => {
-  const { data: session, status } = useSession({ required: false });
+  const isDashboard = router.pathname === DASHBOARD_ROUTE;
+  const isBoards = router.pathname === BOARDS_ROUTE;
 
-  useEffect(() => {
-    if (session?.error === REFRESH_TOKEN_ERROR) {
-      signOut({ callbackUrl: "/" });
-    }
-  }, [session, status]);
+  if (session?.error === REFRESH_TOKEN_ERROR) {
+    signOut({ callbackUrl: "/" });
+  }
 
+  const renderMain = useMemo(() => {
+    if (!session) return null;
+    return (
+      <DashboardLayout
+        firstName={session.user.firstName}
+        isDashboard={isDashboard}
+        isBoards={isBoards}
+      >
+        {children}
+      </DashboardLayout>
+    );
+  }, [children, isBoards, isDashboard, session]);
+
+  if (!session) return <SpinnerPage />;
   return (
-    <div>
-      <Main direction="column">{children}</Main>
-      <ToastContainer limit={3} />
-    </div>
+    <Flex css={{ height: "100vh", width: "100vw" }}>
+      <SideBar
+        firstName={session.user.firstName}
+        lastName={session.user.lastName}
+        email={session.user.email}
+        strategy={session.strategy}
+      />
+      {renderMain}
+      {!session && (
+        <Flex css={{ height: "100vh", width: "100vw" }}>
+          <Flex css={{ position: "absolute", top: "40%", left: "55%" }}>
+            <TailSpin height={150} width={150} />
+          </Flex>
+        </Flex>
+      )}
+    </Flex>
   );
 };
 
diff --git a/frontend/components/Loading/SpinnerPage.tsx b/frontend/components/Loading/SpinnerPage.tsx
new file mode 100644
index 000000000..964f53fd7
--- /dev/null
+++ b/frontend/components/Loading/SpinnerPage.tsx
@@ -0,0 +1,14 @@
+import { TailSpin } from "react-loader-spinner";
+import Flex from "../Primitives/Flex";
+
+const SpinnerPage = () => {
+  return (
+    <Flex>
+      <Flex css={{ filter: "blur(1.5rem)" }} />
+      <Flex css={{ position: "absolute", top: "40vh", left: "45%" }}>
+        <TailSpin height={150} width={150} />
+      </Flex>
+    </Flex>
+  );
+};
+export default SpinnerPage;
diff --git a/frontend/components/Primitives/AlertBox.tsx b/frontend/components/Primitives/AlertBox.tsx
index c9505a75c..a1e6577dd 100644
--- a/frontend/components/Primitives/AlertBox.tsx
+++ b/frontend/components/Primitives/AlertBox.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import Text from "./Text";
-import AlertIcon from "../icons/toast/alert";
-import InfoAlertIcon from "../icons/toast/infoAlert";
+import AlertIcon from "../icons/toast/ErrorAlert";
+import InfoAlertIcon from "../icons/toast/InfoAlert";
 import Flex from "./Flex";
 import { styled } from "../../stitches.config";
 
diff --git a/frontend/components/Primitives/AlertDialog.tsx b/frontend/components/Primitives/AlertDialog.tsx
index 792d87278..7ad7487de 100644
--- a/frontend/components/Primitives/AlertDialog.tsx
+++ b/frontend/components/Primitives/AlertDialog.tsx
@@ -1,41 +1,48 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { contentShow, overlayShow } from "../../animations/DialogShow";
+import { overlayShow } from "../../animations/DialogShow";
 import { styled } from "../../stitches.config";
-import centerScreen from "../../styles/centerScreen";
-import Card from "./Card";
 import Flex from "./Flex";
+import Box from "./Box";
+import Button from "./Button";
 
 const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
+  backdropFilter: "blur(3px)",
+  backgroundColor: "rgba(80, 80, 89, 0.2)",
   position: "fixed",
   inset: 0,
   "@media (prefers-reduced-motion: no-preference)": {
     animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
   },
+  zIndex: "100",
 });
 
-interface AlertDialogRootProps {
-  defaultOpen: boolean;
-}
-
-const Root: React.FC<AlertDialogRootProps> = ({ children, ...props }) => {
-  return <AlertDialogPrimitive.Root {...props}>{children}</AlertDialogPrimitive.Root>;
-};
-
-const StyledContent = styled(AlertDialogPrimitive.Content, Flex, centerScreen, {
-  "@media (prefers-reduced-motion: no-preference)": {
-    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
-  },
+const StyledContent = styled(AlertDialogPrimitive.Content, Flex, Box, {
+  flexDirection: "column !important",
+  backgroundColor: "white !important",
+  borderRadius: "$12 !important",
+  position: "fixed",
+  top: "19.5%",
+  left: "41.53%",
+  maxWidth: "500px",
+  width: "90vw",
+  zIndex: "100",
+  boxShadow: "0px 4px 16px -4px rgba(18, 25, 34, 0.2)",
   "&:focus": { outline: "none" },
 });
 
-export const AlertDialogTrigger = styled(AlertDialogPrimitive.Trigger, Card, Flex, {
-  size: "$160",
-  alignSelf: "center",
-});
+export const AlertDialogTrigger = styled(AlertDialogPrimitive.Trigger, {});
+export const AlertDialogCancel = styled(AlertDialogPrimitive.Cancel, Button, {});
+export const AlertDialogAction = styled(AlertDialogPrimitive.Action, Button, {});
+
+const Content: React.FC = ({ children, ...props }) => {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <StyledOverlay />
+      <StyledContent {...props}>{children}</StyledContent>
+    </AlertDialogPrimitive.Portal>
+  );
+};
 
-export const AlertDialog = Root;
-export const AlertDialogContent = StyledContent;
-export const AlertDialogAction = AlertDialogPrimitive.Action;
-export const AlertDialogCancel = AlertDialogPrimitive.Cancel;
-export const AlertDialogPortal = AlertDialogPrimitive.Portal;
-export const AlertDialogOverlay = StyledOverlay;
+export const AlertDialog = AlertDialogPrimitive.Root;
+export const AlertDialogContent = Content;
+export const AlertDialogTitle = AlertDialogPrimitive.Title;
diff --git a/frontend/components/Primitives/Avatar.tsx b/frontend/components/Primitives/Avatar.tsx
index e891aa2c0..2d964800e 100644
--- a/frontend/components/Primitives/Avatar.tsx
+++ b/frontend/components/Primitives/Avatar.tsx
@@ -2,7 +2,17 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { styled } from "../../stitches.config";
 import Flex from "./Flex";
 
-const AvatarRoot = styled(AvatarPrimitive.Root, Flex);
+const AvatarRoot = styled(AvatarPrimitive.Root, Flex, {
+  border: "1px solid $colors$white",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  verticalAlign: "middle",
+  overflow: "hidden",
+  userSelect: "none",
+  borderRadius: "100%",
+  textAlign: "center",
+});
 
 const AvatarImage = styled(AvatarPrimitive.Image, {
   size: "100%",
@@ -10,18 +20,41 @@ const AvatarImage = styled(AvatarPrimitive.Image, {
   borderRadius: "inherit",
 });
 
-const AvatarFallback = styled(AvatarPrimitive.Fallback, {});
+const AvatarFallback = styled(AvatarPrimitive.Fallback, {
+  textAlign: "center",
+});
 
 type AvatarType = {
-  src: string;
-  size: number;
+  colors: { bg: string; fontColor: any };
+  fallbackText: string;
+  src?: string;
+  size?: number;
 };
 
-const Avatar: React.FC<AvatarType> = ({ src, size }) => {
+type AvatarProps = AvatarType & React.ComponentProps<typeof AvatarRoot>;
+
+const Avatar: React.FC<AvatarProps> = ({ src, size, colors, fallbackText, css }) => {
   return (
-    <AvatarRoot css={{ size }}>
+    <AvatarRoot
+      css={{
+        size,
+        backgroundColor: colors.bg,
+        ...css,
+        filter: "drop-shadow(0px 1px 4px rgba(18, 25, 34, 0.05))",
+      }}
+    >
       <AvatarImage src={src} />
-      <AvatarFallback delayMs={600} />
+      <AvatarFallback
+        css={{
+          fontSize: "$12",
+          fontWeight: "$medium",
+          fontFamily: "DM Sans",
+          color: colors.fontColor,
+          "& span": "",
+        }}
+      >
+        {fallbackText}
+      </AvatarFallback>
     </AvatarRoot>
   );
 };
diff --git a/frontend/components/Primitives/Box.tsx b/frontend/components/Primitives/Box.tsx
new file mode 100644
index 000000000..32480abb5
--- /dev/null
+++ b/frontend/components/Primitives/Box.tsx
@@ -0,0 +1,35 @@
+import { styled } from "../../stitches.config";
+
+const Box = styled("div", {
+  background: "$background",
+  borderRadius: "$8",
+  variants: {
+    elevation: {
+      0: {
+        boxShadow: "0px 1px 2px rgba(18, 25, 34, 0.05)",
+      },
+      1: {
+        boxShadow: "0px 1px 4px rgba(18, 25, 34, 0.05)",
+      },
+      2: {
+        boxShadow: "0px 2px 8px rgba(18, 25, 34, 0.05)",
+      },
+      3: {
+        boxShadow: "0px 4px 16px rgba(18, 25, 34, 0.05)",
+      },
+      4: {
+        boxShadow: "0px 8px 24px rgba(18, 25, 34, 0.05)",
+      },
+    },
+    variant: {
+      bordered: {
+        boxShadow: "0 0 0 1px #CBD2D9",
+      },
+      dropdown: {
+        boxShadow: "0px 4px 16px -4px rgba(18, 25, 34, 0.2)",
+      },
+    },
+  },
+});
+
+export default Box;
diff --git a/frontend/components/Primitives/Button.tsx b/frontend/components/Primitives/Button.tsx
index 7ff61f672..4e8171db7 100644
--- a/frontend/components/Primitives/Button.tsx
+++ b/frontend/components/Primitives/Button.tsx
@@ -1,7 +1,6 @@
-import React from "react";
 import { styled } from "../../stitches.config";
 
-const StyledButton = styled("button", {
+const Button = styled("button", {
   fontFamily: "$body",
   borderRadius: "$12",
   height: "$56",
@@ -81,11 +80,13 @@ const StyledButton = styled("button", {
       },
       lightOutline: {
         backgroundColor: "transparent",
+        color: "$primary300",
         border: "2px solid $primary200",
         boxSizing: "border-box",
         "@hover": {
           "&:hover": {
             backgroundColor: "$primary200",
+            color: "$primary800",
           },
         },
         "&:active": {
@@ -140,7 +141,23 @@ const StyledButton = styled("button", {
       },
     },
     isIcon: {
-      true: {},
+      true: {
+        padding: "0",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            backgroundColor: "$transparent",
+          },
+        },
+        "&:active": {
+          backgroundColor: "$transparent",
+          boxShadow: "none",
+        },
+
+        "&:disabled": {
+          backgroundColor: "$transparent",
+        },
+      },
     },
     textSize: {
       lg: {
@@ -236,10 +253,4 @@ const StyledButton = styled("button", {
   },
 });
 
-type ButtonProps = React.ComponentProps<typeof StyledButton>;
-
-const Button: React.FC<ButtonProps> = ({ ...props }) => {
-  return <StyledButton role="button" {...props} />;
-};
-
 export default Button;
diff --git a/frontend/components/Primitives/Checkbox.tsx b/frontend/components/Primitives/Checkbox.tsx
new file mode 100644
index 000000000..9e8dff5f7
--- /dev/null
+++ b/frontend/components/Primitives/Checkbox.tsx
@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { styled } from "@stitches/react";
+import CheckIcon from "../icons/Check";
+import Text from "./Text";
+import Flex from "./Flex";
+import IndeterminateIcon from "../icons/Indeterminate";
+
+const StyledCheckbox = styled(CheckboxPrimitive.Root, {
+  all: "unset",
+  backgroundColor: "white",
+  boxSizing: "box-sizing",
+  borderRadius: "$2",
+  border: "1px solid $primaryBase",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  variants: {
+    variant: {
+      default: {
+        borderColor: "$primaryBase",
+        backgroundColor: "transparent",
+        '&[data-state="checked"]': {
+          backgroundColor: "$primaryBase",
+        },
+        "&:disabled": {
+          borderColor: "$primary100",
+          '&[data-state="checked"]': {
+            backgroundColor: "$primary100",
+          },
+        },
+      },
+      error: {
+        borderColor: "$dangerBase",
+        '&[data-state="checked"]': {
+          backgroundColor: "$dangerBase",
+        },
+        "&:disabled": {
+          borderColor: "$primary100",
+          '&[data-state="checked"]': {
+            backgroundColor: "$primary100",
+          },
+        },
+      },
+    },
+  },
+  '&[data-state="indeterminate"]': {
+    borderColor: "$primaryBase",
+    backgroundColor: "$primaryBase",
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const StyledIndicator = styled(CheckboxPrimitive.Indicator, {
+  color: "$white",
+});
+
+// Exports
+export const CheckboxIndicator = StyledIndicator;
+
+const getIndeterminateSize = (boxSize: "12" | "14" | "16") => {
+  if (boxSize === "12") return "8";
+  return "10";
+};
+
+const Checkbox: React.FC<{
+  label: string;
+  id: string;
+  variant?: "default" | "error";
+  checked?: boolean | "indeterminate";
+  disabled?: boolean;
+  size: "12" | "14" | "16";
+  handleChange?: (value: string) => void;
+}> = ({ id, label, variant, size, checked, disabled, handleChange }) => {
+  Checkbox.defaultProps = {
+    variant: "default",
+    checked: false,
+    disabled: false,
+    handleChange: () => {},
+  };
+
+  const [currentCheckValue, setCurrentCheckValue] = useState<boolean | undefined | "indeterminate">(
+    checked
+  );
+
+  const handleCheckedChange = (isChecked: boolean | "indeterminate") => {
+    if (handleChange) handleChange(id);
+    setCurrentCheckValue(isChecked);
+  };
+
+  return (
+    <Flex css={{ alignItems: "center", height: "$36", width: "100%", boxSizing: "border-box" }}>
+      <Flex>
+        <StyledCheckbox
+          variant={variant ?? "default"}
+          name={id}
+          id={id}
+          checked={currentCheckValue}
+          disabled={disabled}
+          onCheckedChange={handleCheckedChange}
+          css={{ width: `$${size} !important`, height: `$${size} !important` }}
+        >
+          <CheckboxIndicator
+            css={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              // width: `$${size} !important`,
+              // height: `$${size} !important`,
+              "& svg": {
+                width:
+                  currentCheckValue === "indeterminate"
+                    ? `$${getIndeterminateSize(size)} !important`
+                    : `$${size} !important`,
+                height: `$${size} !important`,
+              },
+            }}
+          >
+            {currentCheckValue === true && <CheckIcon />}
+            {currentCheckValue === "indeterminate" && <IndeterminateIcon />}
+          </CheckboxIndicator>
+        </StyledCheckbox>
+      </Flex>
+      <Text as="label" size="sm" css={{ paddingLeft: "$8", width: "100%" }} htmlFor={id}>
+        {label}
+      </Text>
+    </Flex>
+  );
+};
+
+export default Checkbox;
diff --git a/frontend/components/Primitives/Fieldset.tsx b/frontend/components/Primitives/Fieldset.tsx
index 48c57c53f..bec178893 100644
--- a/frontend/components/Primitives/Fieldset.tsx
+++ b/frontend/components/Primitives/Fieldset.tsx
@@ -2,9 +2,7 @@ import { styled } from "../../stitches.config";
 import Flex from "./Flex";
 
 const Fieldset = styled("fieldset", Flex, {
-  all: "unset",
-  width: "100%",
-  flexDirection: "column",
+  width: "fit-content",
   justifyContent: "flex-start",
 });
 
diff --git a/frontend/components/Primitives/Flex.tsx b/frontend/components/Primitives/Flex.tsx
index 4058b331a..ef5a2f01b 100644
--- a/frontend/components/Primitives/Flex.tsx
+++ b/frontend/components/Primitives/Flex.tsx
@@ -78,18 +78,27 @@ const Flex = styled("div", {
       8: {
         gap: "$8",
       },
+      12: {
+        gap: "$12",
+      },
       16: {
         gap: "$16",
       },
       20: {
         gap: "$20",
       },
+      24: {
+        gap: "$24",
+      },
       26: {
         gap: "$26",
       },
       32: {
         gap: "$32",
       },
+      36: {
+        gap: "$36",
+      },
       40: {
         gap: "$40",
       },
@@ -103,6 +112,15 @@ const Flex = styled("div", {
         },
       },
     },
+    pointer: {
+      true: {
+        "@hover": {
+          "&:hover": {
+            cursor: "pointer",
+          },
+        },
+      },
+    },
     media: {
       sm: {
         "@sm": { flexDirection: "column" },
diff --git a/frontend/components/Primitives/Image.tsx b/frontend/components/Primitives/Image.tsx
new file mode 100644
index 000000000..00daccbef
--- /dev/null
+++ b/frontend/components/Primitives/Image.tsx
@@ -0,0 +1,5 @@
+import { styled } from "../../stitches.config";
+
+const StyledImage = styled("img", {});
+
+export default StyledImage;
diff --git a/frontend/components/Primitives/Input.tsx b/frontend/components/Primitives/Input.tsx
index 28de680e7..728ed7e5d 100644
--- a/frontend/components/Primitives/Input.tsx
+++ b/frontend/components/Primitives/Input.tsx
@@ -1,11 +1,11 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import Text from "./Text";
 import { styled } from "../../stitches.config";
 import Flex from "./Flex";
 import isEmpty from "../../utils/isEmpty";
-import InfoIcon from "../icons/info";
-import EyeIcon from "../icons/eye";
+import EyeIcon from "../icons/Eye";
+import InfoIcon from "../icons/Info";
 
 const PlaceholderText = styled(Text, {
   color: "$primary300",
@@ -42,7 +42,6 @@ const IconWrapper = styled(Flex, {
 });
 
 const HelperTextWrapper = styled(Flex, {
-  mt: "$8",
   "& svg": {
     height: "$16 !important",
     width: "$16 !important",
@@ -145,10 +144,13 @@ const StyledInput = styled("input", {
     color: "$primary300",
   },
   "&:not(:placeholder-shown) ~ label": {
-    transform: `scale(0.875) translateX(0.1rem) translateY(-0.5rem)`,
+    transform: `scale(0.875) translateX(0.2rem) translateY(-0.5rem)`,
+  },
+  "&:-internal-autofill-selected ~ label": {
+    transform: `scale(0.875) translateX(0.2rem) translateY(-0.5rem)`,
   },
   "&:focus ~ label": {
-    transform: `scale(0.875) translateX(0.1rem) translateY(-0.5rem)`,
+    transform: `scale(0.875) translateX(0.2rem) translateY(-0.5rem)`,
   },
 
   "&[data-iconposition='left']": {
@@ -176,8 +178,11 @@ interface InputProps extends StyledInpupProps {
   icon?: "eye";
   helperText?: string;
   iconPosition?: "left" | "right";
+  forceState?: boolean;
   disabled?: boolean;
   clearErrorCode?: () => void;
+  currentValue?: string;
+  maxChars?: string;
 }
 
 const Input: React.FC<InputProps> = ({
@@ -190,7 +195,10 @@ const Input: React.FC<InputProps> = ({
   type,
   disabled,
   css,
+  forceState,
   clearErrorCode,
+  currentValue,
+  maxChars,
 }) => {
   Input.defaultProps = {
     state: undefined,
@@ -199,6 +207,9 @@ const Input: React.FC<InputProps> = ({
     helperText: "",
     disabled: false,
     clearErrorCode: undefined,
+    currentValue: undefined,
+    maxChars: undefined,
+    forceState: false,
   };
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [currentType, setType] = useState(type);
@@ -212,9 +223,10 @@ const Input: React.FC<InputProps> = ({
   const { ref, ...rest } = register(id);
 
   const message = errors[id]?.message;
-  const isValueEmpty = isEmpty(getValues()[id]);
+  const value = getValues()[id];
+  const isValueEmpty = isEmpty(value);
 
-  const getState = useCallback(() => {
+  const autoState = useMemo(() => {
     if (message) {
       return "error";
     }
@@ -224,8 +236,10 @@ const Input: React.FC<InputProps> = ({
     return "valid";
   }, [message, isValueEmpty]);
 
-  const autoState = getState();
-  const currentState = state ?? autoState;
+  const currentState = useMemo(() => {
+    if (state && forceState) return state;
+    return autoState;
+  }, [autoState, forceState, state]);
 
   const isHelperEmpty = isEmpty(helperText) && isEmpty(message);
 
@@ -234,13 +248,6 @@ const Input: React.FC<InputProps> = ({
     setType(currentType === "password" ? "text" : "password");
   };
 
-  useEffect(() => {
-    if (id === "password") inputRef.current?.focus();
-    setTimeout(() => {
-      if (id === "email") inputRef.current?.focus();
-    }, 80);
-  }, []);
-
   return (
     <Flex
       direction="column"
@@ -277,20 +284,32 @@ const Input: React.FC<InputProps> = ({
           {placeholder}
         </PlaceholderText>
       </Flex>
-
-      {!isHelperEmpty && (
-        <HelperTextWrapper gap="4" align="center">
-          {currentState === "error" && <InfoIcon />}
+      <Flex justify={!isHelperEmpty ? "between" : "end"}>
+        {!isHelperEmpty && (
+          <HelperTextWrapper gap="4" align="center" css={{ mt: "$8" }}>
+            {currentState === "error" && <InfoIcon />}
+            <Text
+              css={{
+                color: currentState === "error" ? "$dangerBase" : "$primary300",
+              }}
+              hint
+            >
+              {!isEmpty(helperText) ? helperText : message}
+            </Text>
+          </HelperTextWrapper>
+        )}
+        {!!currentValue && (
           <Text
             css={{
               color: currentState === "error" ? "$dangerBase" : "$primary300",
+              mt: "$8",
             }}
             hint
           >
-            {!isEmpty(helperText) ? helperText : message}
+            {currentValue.length}/{maxChars}
           </Text>
-        </HelperTextWrapper>
-      )}
+        )}
+      </Flex>
     </Flex>
   );
 };
diff --git a/frontend/components/Primitives/ResizableTextArea.tsx b/frontend/components/Primitives/ResizableTextArea.tsx
deleted file mode 100644
index 4c2c5513e..000000000
--- a/frontend/components/Primitives/ResizableTextArea.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Dispatch, useEffect, useRef } from "react";
-import { styled } from "../../stitches.config";
-import ChangeEvent from "../../types/events/onChange";
-import TextArea from "./TextArea";
-
-const StyledTextArea = styled(TextArea, {
-  width: "stretch",
-  outline: "none",
-  pl: "$8",
-  pt: "$8",
-});
-
-interface ResizableTextAreaProps {
-  value: string;
-  editText: Dispatch<React.SetStateAction<string>>;
-  border: boolean;
-  edit: boolean;
-}
-
-const ResizableTextArea: React.FC<ResizableTextAreaProps> = ({ value, editText, border, edit }) => {
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
-
-  const textAreaChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    editText(event.target.value);
-  };
-
-  useEffect(() => {
-    if (textareaRef && textareaRef.current) {
-      textareaRef.current.value = value;
-      textareaRef.current.style.height = "0px";
-      const { scrollHeight } = textareaRef.current;
-      textareaRef.current.style.height = `${scrollHeight === 42 ? 0 : scrollHeight}px`;
-    }
-  }, [value]);
-  return (
-    <StyledTextArea
-      placeholder="Add item"
-      ref={textareaRef}
-      onChange={textAreaChange}
-      css={{
-        border: border ? "1px solid black" : "none",
-        borderRadius: "$4",
-        boxShadow: !edit ? "1px 2px 10px rgba(0, 0, 0, 0.2)" : "none",
-      }}
-    />
-  );
-};
-export default ResizableTextArea;
diff --git a/frontend/components/Primitives/Separator.tsx b/frontend/components/Primitives/Separator.tsx
new file mode 100644
index 000000000..f0712e97e
--- /dev/null
+++ b/frontend/components/Primitives/Separator.tsx
@@ -0,0 +1,12 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { styled } from "../../stitches.config";
+
+const StyledSeparator = styled(SeparatorPrimitive.Root, {
+  backgroundColor: "$primary100",
+  "&[data-orientation=horizontal]": { height: 1, width: "100%" },
+  "&[data-orientation=vertical]": { height: "100%", width: 1 },
+});
+
+const Separator = StyledSeparator;
+
+export default Separator;
diff --git a/frontend/components/Primitives/Tab.tsx b/frontend/components/Primitives/Tab.tsx
index efb93bbce..540d4a579 100644
--- a/frontend/components/Primitives/Tab.tsx
+++ b/frontend/components/Primitives/Tab.tsx
@@ -18,7 +18,7 @@ const StyledList = styled(TabsPrimitive.List, {
 
 const StyledTrigger = styled(TabsPrimitive.Trigger, {
   all: "unset",
-  fontFamily: "inherit",
+  fontFamily: "DM Sans",
   backgroundColor: "white",
   boxSizing: "border-box",
   flex: 1,
@@ -27,6 +27,9 @@ const StyledTrigger = styled(TabsPrimitive.Trigger, {
   alignItems: "center",
   justifyContent: "center",
   userSelect: "none",
+  "&:hover": {
+    cursor: "pointer",
+  },
   "&:first-child": { borderTopLeftRadius: "$12" },
   "&:last-child": { borderTopRightRadius: "$12" },
   borderBottom: "1px solid var(--colors-primary100)",
diff --git a/frontend/components/Primitives/Text.tsx b/frontend/components/Primitives/Text.tsx
index 83e32ad5d..edc992c15 100644
--- a/frontend/components/Primitives/Text.tsx
+++ b/frontend/components/Primitives/Text.tsx
@@ -6,6 +6,7 @@ const Text = styled("span", {
   fontFamily: "$body",
   fontSize: "$16",
   lineHeight: "$24",
+  height: "fit-content",
   variants: {
     display: {
       1: {
@@ -43,7 +44,7 @@ const Text = styled("span", {
       3: {
         fontWeight: "$bold",
         fontSize: "$24",
-        letterSpacing: "$-0.3",
+        letterSpacing: "$0-3",
         lineHeight: "$28",
       },
       4: {
@@ -55,19 +56,19 @@ const Text = styled("span", {
       5: {
         fontWeight: "$bold",
         fontSize: "$16",
-        letterSpacing: "$-0.2",
+        letterSpacing: "$0-2",
         lineHeight: "$20",
       },
       6: {
         fontWeight: "$bold",
         fontSize: "$14",
-        letterSpacing: "$-0.17",
+        letterSpacing: "$0-17",
         lineHeight: "$18",
       },
       7: {
         fontWeight: "$bold",
         fontSize: "$12",
-        letterSpacing: "$-0.15",
+        letterSpacing: "$0-15",
         lineHeight: "$16",
       },
     },
@@ -85,6 +86,11 @@ const Text = styled("span", {
         lineHeight: "$14",
       },
     },
+    weight: {
+      medium: {
+        fontWeight: "$medium",
+      },
+    },
     size: {
       xl: {
         fontSize: "$24",
@@ -131,6 +137,20 @@ const Text = styled("span", {
         color: "$primary300",
       },
     },
+    color: {
+      white: {
+        color: "$white",
+      },
+      primary300: {
+        color: "$primary300",
+      },
+      primary400: {
+        color: "$primary400",
+      },
+      primary800: {
+        color: "$primary800",
+      },
+    },
   },
 });
 
diff --git a/frontend/components/Primitives/TextArea.tsx b/frontend/components/Primitives/TextArea.tsx
index 7f1c34e47..14f376906 100644
--- a/frontend/components/Primitives/TextArea.tsx
+++ b/frontend/components/Primitives/TextArea.tsx
@@ -1,12 +1,187 @@
+import { useEffect, useMemo, useRef } from "react";
+import { useFormContext } from "react-hook-form";
 import { styled } from "../../stitches.config";
+import isEmpty from "../../utils/isEmpty";
+import Flex from "./Flex";
+import Text from "./Text";
+import InfoIcon from "../icons/Info";
 
-const TextArea = styled("textarea", {
-  overflow: "hidden",
-  overflowWrap: "break-word",
+const StyledTextArea = styled("textarea", {
+  // Reset
+  appearance: "none",
+  borderWidth: "0",
+  boxSizing: "border-box",
+  margin: "0",
+  outlineOffset: "0",
+  padding: "0",
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  "&::before": {
+    boxSizing: "border-box",
+  },
+  "&::after": {
+    boxSizing: "border-box",
+  },
+
+  // Custom
+
+  fontSize: "$16",
+  lineHeight: "$20",
   resize: "none",
   height: "auto",
-  minHeight: "$32",
-  width: "$220",
+  px: "$16",
+  py: "$16",
+  boxShadow: "0",
+  border: "1px solid $primary200",
+  borderRadius: "$4",
+  outline: "none",
+  fontWeight: "normal",
+  width: "100%",
+  "&:disabled": {
+    backgroundColor: "$primary50",
+  },
+  color: "$primaryBase",
+  "&::-webkit-input-placeholder": {
+    color: "$primary300",
+  },
+  fontFamily: "DM Sans",
+  overflowWrap: "break-word",
+  overflow: "hidden",
+  pt: "$28",
+  pb: "$8",
+  pl: "$16",
+  pr: "$16",
+  variants: {
+    variant: {
+      default: {
+        "&:focus": {
+          borderColor: "$primary400",
+          boxShadow: "0px 0px 0px 2px var(--colors-primaryLightest)",
+        },
+      },
+      valid: {
+        borderColor: "$success700",
+        boxShadow: "0px 0px 0px 2px var(--colors-successLightest)",
+      },
+      error: {
+        borderColor: "$danger700",
+        boxShadow: "0px 0px 0px 2px var(--colors-dangerLightest)",
+      },
+    },
+  },
 });
 
+interface ResizableTextAreaProps {
+  id: string;
+  placeholder: string;
+  helperText?: string;
+  disabled?: boolean;
+}
+
+const TextArea: React.FC<ResizableTextAreaProps> = ({ id, placeholder, helperText, disabled }) => {
+  TextArea.defaultProps = {
+    helperText: undefined,
+    disabled: false,
+  };
+
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const flexRef = useRef<HTMLDivElement | null>(null);
+
+  const values = useFormContext();
+  const { ref, ...rest } = values.register(id);
+  const {
+    formState: { errors },
+  } = values;
+  const value = values?.getValues()[id];
+
+  useEffect(() => {
+    if (textareaRef && textareaRef.current) {
+      textareaRef.current.value = value;
+      textareaRef.current.style.height = "0px";
+      const { scrollHeight } = textareaRef.current;
+      textareaRef.current.style.height = `${scrollHeight === 42 ? 0 : scrollHeight}px`;
+    }
+  }, [value]);
+
+  const isValueEmpty = isEmpty(value);
+
+  const state = useMemo(() => {
+    if (errors[id]) {
+      return "error";
+    }
+    if (isValueEmpty) {
+      return "default";
+    }
+    return "valid";
+  }, [errors, id, isValueEmpty]);
+
+  return (
+    <Flex
+      ref={flexRef}
+      direction="column"
+      css={{ position: "relative", width: "100%", height: "auto", mb: "$20" }}
+    >
+      <Flex>
+        <StyledTextArea
+          {...rest}
+          id={id}
+          placeholder=" "
+          disabled={disabled}
+          variant={state}
+          ref={(e) => {
+            if (ref) ref(e);
+            textareaRef.current = e;
+          }}
+          css={{
+            "&:focus ~ label": {
+              transform: `scale(0.875) translateX(0.115rem) translateY(-0.5rem)`,
+            },
+            "&:not(:placeholder-shown) ~ label": {
+              transform: `scale(0.875) translateX(0.115rem) translateY(-0.5rem)`,
+            },
+          }}
+        />
+        <Text
+          as="label"
+          htmlFor={id}
+          css={{
+            fontSize: "$16",
+            top: "0",
+            p: "$16",
+            pl: "$17",
+            lineHeight: "24px",
+            color: "$primary300",
+            position: "absolute",
+            pointerEvents: "none",
+            transformOrigin: "0 0",
+            transition: "all .2s ease-in-out",
+          }}
+        >
+          {placeholder}
+        </Text>
+      </Flex>
+      <Flex
+        gap="4"
+        align="center"
+        css={{
+          mt: "$8",
+          "& svg": {
+            height: "$16 !important",
+            width: "$16 !important",
+            color: "$dangerBase",
+          },
+        }}
+      >
+        {state === "error" && <InfoIcon />}
+        <Text
+          css={{
+            color: state === "error" ? "$dangerBase" : "$primary300",
+          }}
+          hint
+        >
+          {!isEmpty(helperText) ? helperText : errors[`${id}`]?.message}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};
 export default TextArea;
diff --git a/frontend/components/Primitives/Toast.tsx b/frontend/components/Primitives/Toast.tsx
index 26daeb010..a0acfec70 100644
--- a/frontend/components/Primitives/Toast.tsx
+++ b/frontend/components/Primitives/Toast.tsx
@@ -1,36 +1,29 @@
-import { Dispatch, SetStateAction } from "react";
+import { useRecoilState } from "recoil";
 import * as React from "react";
-import { slate } from "@radix-ui/colors";
 import * as ToastPrimitive from "@radix-ui/react-toast";
+import { useRouter } from "next/router";
 import { styled, keyframes } from "../../stitches.config";
-import AlertIcon from "../icons/toast/alert";
+import ErrorAlertIcon from "../icons/toast/ErrorAlert";
 import Text from "./Text";
 import { ToastStateEnum } from "../../utils/enums/toast-types";
-
-const VIEWPORT_PADDING = 162;
+import { toastState } from "../../store/toast/atom/toast.atom";
+import InfoAlertIcon from "../icons/toast/InfoAlert";
+import SuccessAlertIcon from "../icons/toast/SuccessAlert";
+import WarningAlertIcon from "../icons/toast/WarningAlert";
+import { ROUTES } from "../../utils/routes";
 
 const hide = keyframes({
   "0%": { opacity: 1 },
   "100%": { opacity: 0 },
 });
 
-const slideIn = keyframes({
-  from: { transform: `translateX(calc(100% + ${VIEWPORT_PADDING}px))` },
-  to: { transform: "translateX(0)" },
-});
-
-const swipeOut = keyframes({
-  from: { transform: "translateX(var(--radix-toast-swipe-end-x))" },
-  to: { transform: `translateX(calc(100% + ${VIEWPORT_PADDING}px))` },
-});
-
 const StyledViewport = styled(ToastPrimitive.Viewport, {
   position: "fixed",
   top: 0,
   right: 0,
   display: "flex",
   flexDirection: "column",
-  paddingRight: VIEWPORT_PADDING,
+  paddingRight: "$162",
   paddingTop: "$106",
   width: "fit-content",
   maxWidth: "100vw",
@@ -51,32 +44,13 @@ const StyledToast = styled(ToastPrimitive.Root, {
   justifyContent: "space-between",
   alignItems: "center",
   direction: "raw",
-
-  "@media (prefers-reduced-motion: no-preference)": {
-    '&[data-state="open"]': {
-      animation: `${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
-    },
-    '&[data-state="closed"]': {
-      animation: `${hide} 100ms ease-in forwards`,
-    },
-    '&[data-swipe="move"]': {
-      transform: "translateX(var(--radix-toast-swipe-move-x))",
-    },
-    '&[data-swipe="cancel"]': {
-      transform: "translateX(0)",
-      transition: "transform 200ms ease-out",
-    },
-    '&[data-swipe="end"]': {
-      animation: `${swipeOut} 100ms ease-out forwards`,
-    },
-  },
 });
 
 const StyledTitle = styled(ToastPrimitive.Title, {
   gridArea: "title",
   marginBottom: 5,
   fontWeight: 500,
-  color: slate.slate12,
+  color: "$primary800",
   fontSize: 15,
 });
 
@@ -111,38 +85,68 @@ export const ToastDescription = StyledDescription;
 export const ToastAction = StyledAction;
 export const ToastClose = StyledClose;
 
-const Toast: React.FC<{
-  type: ToastStateEnum;
-  content: string;
-  open?: boolean;
-  onOpenChange?: Dispatch<SetStateAction<boolean>>;
-}> = ({ type, content, children, open, onOpenChange, ...props }) => {
-  Toast.defaultProps = {
-    open: undefined,
-    onOpenChange: undefined,
-  };
+const Toast: React.FC = () => {
+  const [currentToastState, setToastState] = useRecoilState(toastState);
+  const { open, type, content } = currentToastState;
   const duration = [ToastStateEnum.SUCCESS, ToastStateEnum.INFO].includes(type) ? 20000 : undefined;
+
+  const router = useRouter();
+  const VIEWPORT_PADDING = router.asPath === ROUTES.START_PAGE_ROUTE ? 162 : 56;
+
+  const slideIn = keyframes({
+    from: { transform: `translateX(calc(100% + ${VIEWPORT_PADDING}px))` },
+    to: { transform: "translateX(0)" },
+  });
+
+  const swipeOut = keyframes({
+    from: { transform: "translateX(var(--radix-toast-swipe-end-x))" },
+    to: { transform: `translateX(calc(100% + ${VIEWPORT_PADDING}px))` },
+  });
+
   return (
     <ToastRoot
       open={open}
-      onOpenChange={onOpenChange}
+      onOpenChange={(e) => setToastState({ open: e, type, content })}
       duration={duration}
       type="foreground"
-      {...props}
+      css={{
+        "@media (prefers-reduced-motion: no-preference)": {
+          '&[data-state="open"]': {
+            animation: `${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+          },
+          '&[data-state="closed"]': {
+            animation: `${hide} 100ms ease-in forwards`,
+          },
+          '&[data-swipe="move"]': {
+            transform: "translateX(var(--radix-toast-swipe-move-x))",
+          },
+          '&[data-swipe="cancel"]': {
+            transform: "translateX(0)",
+            transition: "transform 200ms ease-out",
+          },
+          '&[data-swipe="end"]': {
+            animation: `${swipeOut} 100ms ease-out forwards`,
+          },
+        },
+      }}
     >
       <ToastDescription>
-        {type === ToastStateEnum.ERROR && <AlertIcon />}
-        {type === ToastStateEnum.SUCCESS && <AlertIcon />}
-        {type === ToastStateEnum.WARNING && <AlertIcon />}
-        {type === ToastStateEnum.INFO && <AlertIcon />}
+        {type === ToastStateEnum.ERROR && <ErrorAlertIcon />}
+        {type === ToastStateEnum.SUCCESS && <SuccessAlertIcon />}
+        {type === ToastStateEnum.WARNING && <WarningAlertIcon />}
+        {type === ToastStateEnum.INFO && <InfoAlertIcon />}
         <Text size="sm">{content}</Text>
       </ToastDescription>
-      {children && (
-        <ToastAction altText={content} asChild>
-          {children}
-        </ToastAction>
-      )}
-      <ToastClose aria-label="Close">X</ToastClose>
+      <ToastClose
+        aria-label="Close"
+        css={{
+          "&:hover": {
+            cursor: "pointer",
+          },
+        }}
+      >
+        X
+      </ToastClose>
     </ToastRoot>
   );
 };
diff --git a/frontend/components/Primitives/Tooltip.tsx b/frontend/components/Primitives/Tooltip.tsx
new file mode 100644
index 000000000..7f66baf3d
--- /dev/null
+++ b/frontend/components/Primitives/Tooltip.tsx
@@ -0,0 +1,32 @@
+import React, { ReactNode } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { styled } from "../../stitches.config";
+
+const StyledContent = styled(TooltipPrimitive.Content, {
+  backgroundColor: "$primary800",
+  p: "$8",
+  borderRadius: "$12",
+  maxWidth: "239px",
+  fontSize: "$12",
+  lineHeight: "$16",
+  textAlign: "center",
+  color: "$white",
+  border: "none",
+  minWidth: "141px",
+});
+
+const StyledArrow = styled(TooltipPrimitive.Arrow, { fill: "$primary800" });
+
+const Tooltip: React.FC<{ content: string; children: ReactNode }> = ({ children, content }) => {
+  return (
+    <TooltipPrimitive.Root>
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <StyledContent side="top" align="center">
+        {content}
+        <StyledArrow width={16} height={5} />
+      </StyledContent>
+    </TooltipPrimitive.Root>
+  );
+};
+
+export default Tooltip;
diff --git a/frontend/components/Sidebar/Content.tsx b/frontend/components/Sidebar/Content.tsx
new file mode 100644
index 000000000..aed37e16c
--- /dev/null
+++ b/frontend/components/Sidebar/Content.tsx
@@ -0,0 +1,128 @@
+import { SidebarContent } from "react-pro-sidebar";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import { signOut } from "next-auth/react";
+import DashboardIcon from "../icons/sidebar/Dashboard";
+import BoardsIcon from "../icons/sidebar/Boards";
+import UsersIcon from "../icons/sidebar/Users";
+import TeamsIcon from "../icons/sidebar/Teams";
+import LogoutIcon from "../icons/sidebar/Logout";
+import AccountIcon from "../icons/sidebar/Account";
+import SettingsIcon from "../icons/sidebar/Settings";
+import { styled } from "../../stitches.config";
+import Text from "../Primitives/Text";
+import Flex from "../Primitives/Flex";
+import {
+  ACCOUNT_ROUTE,
+  BOARDS_ROUTE,
+  DASHBOARD_ROUTE,
+  SETTINGS_ROUTE,
+  START_PAGE_ROUTE,
+  TEAMS_ROUTE,
+  USERS_ROUTE,
+} from "../../utils/routes";
+import Separator from "./Separator";
+
+const StyledMenuItem = styled(Flex, {
+  pl: "$22",
+  py: "$12",
+  height: "$48",
+  gap: "$14",
+  alignItems: "center",
+  "& svg": { color: "$primary300" },
+  "&[data-active='true']": {
+    "& svg": { color: "$white" },
+    "& span": { color: "$white", fontWeight: "$medium" },
+    backgroundColor: "$primary600",
+  },
+  "&:hover": {
+    cursor: "pointer",
+  },
+});
+
+const StyledText = styled(Text, {
+  fontSize: "$14",
+  color: "$primary300",
+  lineHeight: "$20",
+});
+
+const StyledSeparator = styled(Separator, { marginTop: "$16", marginBottom: "$16" });
+
+interface SidebarContentProps {
+  strategy: string;
+}
+
+const SideBarContent: React.FC<SidebarContentProps> = ({ strategy }) => {
+  const router = useRouter();
+  const [active, setActive] = useState(router.asPath);
+  const isStrategyLocal = strategy === "local";
+
+  const handleSignOut = async () => {
+    const result = await signOut({
+      callbackUrl: isStrategyLocal ? START_PAGE_ROUTE : "/logoutAzure",
+      redirect: !isStrategyLocal,
+    });
+    if (result && isStrategyLocal) {
+      router.push(result.url);
+    }
+  };
+
+  useEffect(() => {
+    setActive(router.asPath);
+  }, [router.asPath]);
+
+  return (
+    <SidebarContent>
+      <Link href={DASHBOARD_ROUTE}>
+        <StyledMenuItem data-active={active === DASHBOARD_ROUTE} align="center">
+          <DashboardIcon />
+          <StyledText>Dashboard</StyledText>
+        </StyledMenuItem>
+      </Link>
+      <Link href={BOARDS_ROUTE}>
+        <StyledMenuItem data-active={active === BOARDS_ROUTE} align="center">
+          <BoardsIcon />
+          <StyledText>Boards</StyledText>
+        </StyledMenuItem>
+      </Link>
+      <Link href={USERS_ROUTE}>
+        <StyledMenuItem data-active={active === USERS_ROUTE} align="center">
+          <UsersIcon />
+          <StyledText>Users</StyledText>
+        </StyledMenuItem>
+      </Link>
+      <Link href={TEAMS_ROUTE}>
+        <StyledMenuItem data-active={active === TEAMS_ROUTE} align="center">
+          <TeamsIcon />
+          <StyledText>Teams</StyledText>
+        </StyledMenuItem>
+      </Link>
+      <StyledSeparator />
+      <Link href={ACCOUNT_ROUTE}>
+        <StyledMenuItem data-active={active === ACCOUNT_ROUTE} align="center">
+          <AccountIcon />
+          <StyledText>Account</StyledText>
+        </StyledMenuItem>
+      </Link>
+      <Link href={SETTINGS_ROUTE}>
+        <StyledMenuItem css={{ mb: "$16" }} data-active={active === SETTINGS_ROUTE} align="center">
+          <SettingsIcon />
+          <StyledText>Settings</StyledText>
+        </StyledMenuItem>
+      </Link>
+      <StyledSeparator />
+      <StyledMenuItem
+        css={{ mt: "$16" }}
+        data-active={active === TEAMS_ROUTE}
+        align="center"
+        onClick={handleSignOut}
+      >
+        <LogoutIcon />
+        <StyledText>Log out</StyledText>
+      </StyledMenuItem>
+    </SidebarContent>
+  );
+};
+
+export default SideBarContent;
diff --git a/frontend/components/Sidebar/Header.tsx b/frontend/components/Sidebar/Header.tsx
new file mode 100644
index 000000000..1da19bb10
--- /dev/null
+++ b/frontend/components/Sidebar/Header.tsx
@@ -0,0 +1,57 @@
+import { FC } from "react";
+import { SidebarHeader } from "react-pro-sidebar";
+import Flex from "../Primitives/Flex";
+import HeaderBannerIcon from "../icons/HeaderBanner";
+import Text from "../Primitives/Text";
+import Separator from "./Separator";
+import { styled } from "../../stitches.config";
+
+const StyledHeader = styled(SidebarHeader, Flex);
+
+const Header: FC<{ firstName: string; lastName: string; email: string }> = ({
+  firstName,
+  lastName,
+  email,
+}) => {
+  const initialLetters = firstName.charAt(0) + lastName.charAt(0);
+
+  return (
+    <StyledHeader direction="column">
+      <Flex css={{ p: "$40" }}>
+        <HeaderBannerIcon />
+      </Flex>
+      <Separator />
+      <Flex
+        align="center"
+        gap="12"
+        css={{
+          p: "$24",
+          color: "$white",
+          backgroundColor: "$primary700",
+        }}
+      >
+        <Flex
+          align="center"
+          justify="center"
+          css={{
+            size: "$58",
+            backgroundImage: "url(/icons/userIcon.svg)",
+          }}
+        >
+          <Text heading="5">{initialLetters}</Text>
+        </Flex>
+        <Flex direction="column">
+          <Text css={{ color: "$white" }} weight="medium" size="sm">
+            {`${firstName} ${lastName}`}
+          </Text>
+          <Text css={{ color: "$primary200" }} weight="medium" size="xs">
+            {email}
+          </Text>
+        </Flex>
+      </Flex>
+      <Separator />
+    </StyledHeader>
+  );
+};
+
+export default Header;
diff --git a/frontend/components/Sidebar/Separator.tsx b/frontend/components/Sidebar/Separator.tsx
new file mode 100644
index 000000000..95668e021
--- /dev/null
+++ b/frontend/components/Sidebar/Separator.tsx
@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+import { styled } from "../../stitches.config";
+
+const StyledSeparator = styled("div", { height: "1px", backgroundColor: "$primary600" });
+
+type SeparatorProps = ComponentProps<typeof StyledSeparator>;
+
+const Separator: React.FC<SeparatorProps> = (props) => {
+  return <StyledSeparator {...props} />;
+};
+export default Separator;
diff --git a/frontend/components/Sidebar/Sidebar.tsx b/frontend/components/Sidebar/Sidebar.tsx
new file mode 100644
index 000000000..5ca017b2c
--- /dev/null
+++ b/frontend/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,29 @@
+import { ProSidebar } from "react-pro-sidebar";
+import Header from "./Header";
+import { styled } from "../../stitches.config";
+import Flex from "../Primitives/Flex";
+import SideBarContent from "./Content";
+
+const StyledSideBar = styled(ProSidebar, Flex, {
+  backgroundColor: "$primary800",
+});
+
+type SideBarProps = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  collapsed?: boolean;
+  strategy: string;
+};
+
+const SideBar: React.FC<SideBarProps> = ({ firstName, lastName, email, strategy, collapsed }) => {
+  SideBar.defaultProps = { collapsed: false };
+  return (
+    <StyledSideBar collapsed={collapsed} collapsedWidth="128px">
+      <Header firstName={firstName} lastName={lastName} email={email} />
+      <SideBarContent strategy={strategy} />
+    </StyledSideBar>
+  );
+};
+
+export default SideBar;
diff --git a/frontend/components/Title/InputTitle.tsx b/frontend/components/Title/InputTitle.tsx
deleted file mode 100644
index caae15c7a..000000000
--- a/frontend/components/Title/InputTitle.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Dispatch, SetStateAction, useState } from "react";
-import { CheckIcon, Cross2Icon } from "@modulz/radix-icons";
-import { styled } from "../../stitches.config";
-import Input from "../Primitives/Input";
-import Button from "../Primitives/Button";
-import useBoard from "../../hooks/useBoard";
-import BoardType from "../../types/board/board";
-import Flex from "../Primitives/Flex";
-import ToastMessage from "../../utils/toast";
-import ClickEvent from "../../types/events/clickEvent";
-import isEmpty from "../../utils/isEmpty";
-
-const ActionButton = styled(Button, {});
-
-const Container = styled(Flex, { width: "100%", border: "1px solid black" });
-
-interface InputTitleBoard {
-  board: BoardType;
-  onClickEdit: Dispatch<SetStateAction<boolean>>;
-  isBoardPage: boolean;
-}
-
-const InputTitle: React.FC<InputTitleBoard> = ({ board, onClickEdit, isBoardPage }) => {
-  const [title, setTitle] = useState("");
-  const { updateBoard } = useBoard({ autoFetchBoard: false, autoFetchBoards: false });
-
-  const handleUpdateTitle = (event: ClickEvent<HTMLButtonElement, MouseEvent>) => {
-    event.stopPropagation();
-    onClickEdit(false);
-    if (isEmpty(title)) {
-      ToastMessage("Title cannot be empty", "error");
-      return;
-    }
-    if (title !== board.title && board._id) {
-      updateBoard.mutate({
-        board: { ...board, title },
-        boardPage: isBoardPage,
-      });
-    }
-  };
-
-  const handleStopPropagationOnTextField = (event: ClickEvent<HTMLInputElement, MouseEvent>) => {
-    event.stopPropagation();
-  };
-
-  const handleCancelEdit = (event: ClickEvent<HTMLButtonElement, MouseEvent>) => {
-    event.stopPropagation();
-    onClickEdit(false);
-  };
-
-  return (
-    <Container
-      wrap="noWrap"
-      onBlur={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      <Input
-        css={{
-          pointerEvents: "all",
-          width: "100%",
-          border: "none",
-          outline: "none",
-          "&:focus": { outline: "none", border: "none", boxShadow: "none" },
-        }}
-        id="title"
-        type="text"
-        placeholder={board.title}
-        autoFocus
-        value={title}
-        onChange={(e) => setTitle(e.target.value)}
-        onClick={handleStopPropagationOnTextField}
-        onKeyPress={(e) => e.stopPropagation()}
-      />
-      <Flex wrap="noWrap">
-        <ActionButton
-          color="green"
-          css={{
-            width: "$20",
-            borderLeft: "1px solid black",
-            color: "black",
-            pointerEvents: "visible",
-          }}
-          onClick={handleUpdateTitle}
-        >
-          <CheckIcon />
-        </ActionButton>
-        <ActionButton
-          color="red"
-          css={{
-            width: "$20",
-            borderLeft: "1px solid black",
-            color: "black",
-            pointerEvents: "all",
-          }}
-          onClick={handleCancelEdit}
-        >
-          <Cross2Icon />
-        </ActionButton>
-      </Flex>
-    </Container>
-  );
-};
-export default InputTitle;
diff --git a/frontend/components/auth/LoginForm.tsx b/frontend/components/auth/LoginForm.tsx
index c64edf9c3..659dbff48 100644
--- a/frontend/components/auth/LoginForm.tsx
+++ b/frontend/components/auth/LoginForm.tsx
@@ -1,8 +1,9 @@
 import { Dispatch, SetStateAction, useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { signIn } from "next-auth/react";
 import router from "next/router";
+import { useSetRecoilState } from "recoil";
 import { FormProvider, useForm } from "react-hook-form";
-import { signIn } from "next-auth/react";
 import { RedirectableProviderType } from "next-auth/providers";
 import { ThreeDots } from "react-loader-spinner";
 import { styled } from "../../stitches.config";
@@ -12,10 +13,10 @@ import { TabsContent } from "../Primitives/Tab";
 import Text from "../Primitives/Text";
 import SchemaLoginForm from "../../schema/schemaLoginForm";
 import { DASHBOARD_ROUTE } from "../../utils/routes";
-import LogoIcon from "../icons/logo";
 import Input from "../Primitives/Input";
 import Button from "../Primitives/Button";
-import OrSeparator from "../Primitives/OrSeparator";
+import OrSeparator from "../icons/OrSeparator";
+import LogoIcon from "../icons/Logo";
 import {
   AUTH_SSO,
   NEXT_PUBLIC_ENABLE_AZURE,
@@ -23,12 +24,12 @@ import {
   NEXT_PUBLIC_ENABLE_GOOGLE,
 } from "../../utils/constants";
 import useUser from "../../hooks/useUser";
-import MicrosoftIcon from "../icons/microsoft";
-import GitHubIcon from "../icons/github";
+import MicrosoftIcon from "../icons/Microsoft";
+import GitHubIcon from "../icons/Github";
 import { transformLoginErrorCodes } from "../../utils/errorCodes";
-import Toast from "../Primitives/Toast";
 import { ToastStateEnum } from "../../utils/enums/toast-types";
 import { getAuthError } from "../../errors/auth-messages";
+import { toastState } from "../../store/toast/atom/toast.atom";
 
 const StyledForm = styled("form", Flex, { width: "100%" });
 
@@ -57,12 +58,12 @@ interface LoginFormProps {
 
 const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
   const [loading, setLoading] = useState({ credentials: false, sso: false });
-  const [toastOpened, setToastOpened] = useState<boolean>(false);
+  const setToastState = useSetRecoilState(toastState);
   const [loginErrorCode, setLoginErrorCode] = useState(-1);
   const { loginAzure } = useUser(setLoginErrorCode);
   const methods = useForm<LoginUser>({
-    mode: "onChange",
-    reValidateMode: "onChange",
+    mode: "onBlur",
+    reValidateMode: "onBlur",
     defaultValues: {
       email: "",
       password: "",
@@ -71,7 +72,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
   });
 
   const clearErrors = () => {
-    setToastOpened(false);
+    setToastState((prev) => ({ ...prev, open: false }));
     setLoading({ credentials: false, sso: false });
     setLoginErrorCode(-1);
   };
@@ -90,10 +91,15 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
       redirect: false,
     });
     if (!result?.error) {
+      setToastState((prev) => ({ ...prev, open: false }));
       router.push(DASHBOARD_ROUTE);
       return;
     }
-    setToastOpened(true);
+    setToastState({
+      open: true,
+      type: ToastStateEnum.ERROR,
+      content: getAuthError(loginErrorCode),
+    });
     setLoading((prevState) => ({ ...prevState, credentials: false }));
     setLoginErrorCode(transformLoginErrorCodes(result.error));
   };
@@ -103,7 +109,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
   };
 
   return (
-    <TabsContent value="login">
+    <TabsContent value="login" css={{ justifyContent: "center" }}>
       <FormProvider {...methods}>
         <StyledForm
           autoComplete="off"
@@ -127,6 +133,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
             id="email"
             type="text"
             placeholder="Email address"
+            forceState={loginErrorCode > 0}
           />
           <Input
             clearErrorCode={clearErrors}
@@ -136,6 +143,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
             placeholder="Password"
             icon="eye"
             iconPosition="right"
+            forceState={loginErrorCode > 0}
           />
 
           <LoginButton type="submit" disabled={loading.credentials} size="lg">
@@ -187,12 +195,6 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
           )}
         </StyledForm>
       </FormProvider>
-      <Toast
-        open={toastOpened}
-        onOpenChange={setToastOpened}
-        type={ToastStateEnum.ERROR}
-        content={getAuthError(loginErrorCode)}
-      />
     </TabsContent>
   );
 };
diff --git a/frontend/components/auth/TroubleLogin.tsx b/frontend/components/auth/TroubleLogin.tsx
index 5ccc9538b..64d651cf8 100644
--- a/frontend/components/auth/TroubleLogin.tsx
+++ b/frontend/components/auth/TroubleLogin.tsx
@@ -5,10 +5,10 @@ import SchemaEmail from "../../schema/schemaEmail";
 import { styled } from "../../stitches.config";
 import Button from "../Primitives/Button";
 import Flex from "../Primitives/Flex";
-import LogoIcon from "../icons/logo";
+import LogoIcon from "../icons/Logo";
 import Input from "../Primitives/Input";
 import Text from "../Primitives/Text";
-import LeftArrowIcon from "../icons/leftArrow";
+import LeftArrowIcon from "../icons/LeftArrow";
 import { EmailUser } from "../../types/user/user";
 
 const MainContainer = styled("form", Flex, {
diff --git a/frontend/components/Primitives/Banner.tsx b/frontend/components/icons/Banner.tsx
similarity index 91%
rename from frontend/components/Primitives/Banner.tsx
rename to frontend/components/icons/Banner.tsx
index e2788bad8..1733fc041 100644
--- a/frontend/components/Primitives/Banner.tsx
+++ b/frontend/components/icons/Banner.tsx
@@ -4,32 +4,32 @@ const Banner: React.FC = () => {
       width="417"
       height="75"
       viewBox="0 0 417 75"
-      fill="white"
+      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <g clipPath="url(#clip0_169_19411)">
         <path
-          d="M23.5957 38.4066C23.2568 38.0438 23.1141 37.8805 22.9536 37.7172C20.5637 35.3769 19.2974 32.5467 19.1191 29.1542C19.0656 28.0112 18.9051 26.832 18.584 25.7435C16.6935 19.4119 8.66777 16.8176 3.37078 21.5889C0.267493 24.3828 -0.624257 28.5918 0.802543 32.3472C2.08666 35.7216 5.65366 38.5699 9.89839 38.4248C13.3762 38.2978 16.8719 38.4066 20.3675 38.4066C21.3485 38.4066 22.3472 38.4066 23.5957 38.4066Z"
+          d="M23.5957 0.0553009C23.2568 0.418142 23.1141 0.581421 22.9536 0.744699C20.5637 3.08502 19.2974 5.91518 19.1191 9.30775C19.0656 10.4507 18.9051 11.6299 18.584 12.7185C16.6935 19.05 8.66777 21.6443 3.37078 16.873C0.267494 14.0791 -0.624255 9.87015 0.802545 6.11474C2.08666 2.74032 5.65366 -0.107982 9.89839 0.0371554C13.3762 0.16415 16.8719 0.0552998 20.3675 0.0553004C21.3485 0.0553005 22.3472 0.0553007 23.5957 0.0553009Z"
           fill="white"
         />
         <path
-          d="M23.5957 38.4066C22.3472 38.4066 21.3485 38.4066 20.3675 38.4066C16.8719 38.4066 13.4297 38.4429 9.89839 38.4429C5.65366 38.588 2.08666 35.7216 0.802543 32.3472C-0.624257 28.5918 0.267493 24.3647 3.37078 21.5889C8.66777 16.8176 16.6935 19.4119 18.584 25.7435C18.9051 26.832 19.0656 28.0112 19.1191 29.1542C19.2974 32.5286 20.5637 35.3769 22.9536 37.7172C23.1141 37.8805 23.2568 38.0619 23.5957 38.4066Z"
+          d="M23.5957 0.0552962C22.3472 0.055296 21.3485 0.0552958 20.3675 0.0552956C16.8719 0.055295 13.4297 0.0190108 9.89839 0.0190102C5.65366 -0.126127 2.08666 2.74032 0.802545 6.11474C-0.624255 9.87014 0.267494 14.0972 3.37078 16.873C8.66777 21.6443 16.6935 19.05 18.584 12.7185C18.9051 11.6299 19.0656 10.4507 19.1191 9.30774C19.2974 5.93332 20.5637 3.08502 22.9536 0.744695C23.1141 0.581416 23.2568 0.399995 23.5957 0.0552962Z"
           fill="white"
         />
         <path
-          d="M31.978 11.5928C31.8531 12.0645 31.7818 12.2822 31.7283 12.4999C30.9792 15.7836 29.2135 18.3416 26.4491 20.2284C25.5039 20.8634 24.5943 21.589 23.8274 22.4417C19.44 27.3219 21.3305 35.6854 28.0543 37.8806C31.9958 39.1687 36.0087 37.808 38.4699 34.6513C40.6636 31.803 41.27 27.2312 38.9871 23.5847C37.1144 20.5912 35.4201 17.4889 33.6366 14.4411C33.1194 13.5703 32.62 12.6994 31.978 11.5928Z"
+          d="M31.978 26.8691C31.8531 26.3974 31.7818 26.1797 31.7283 25.962C30.9792 22.6783 29.2135 20.1203 26.4491 18.2335C25.5039 17.5985 24.5943 16.8729 23.8274 16.0202C19.44 11.14 21.3305 2.77649 28.0543 0.581301C31.9958 -0.706785 36.0087 0.65387 38.4699 3.81059C40.6636 6.65889 41.27 11.2307 38.9871 14.8772C37.1144 17.8707 35.4201 20.973 33.6366 24.0208C33.1194 24.8917 32.62 25.7625 31.978 26.8691Z"
           fill="white"
         />
         <path
-          d="M31.9782 11.5928C32.6203 12.6813 33.1197 13.5521 33.619 14.4229C35.4025 17.4708 37.1325 20.4824 38.9695 23.5665C41.2524 27.2131 40.6639 31.7849 38.4523 34.6332C36.0089 37.8081 31.9782 39.1687 28.0367 37.8625C21.3129 35.6492 19.4224 27.3038 23.8098 22.4236C24.5767 21.5709 25.4863 20.8452 26.4315 20.2103C29.196 18.3235 30.9616 15.7836 31.7107 12.4817C31.782 12.2822 31.8534 12.0645 31.9782 11.5928Z"
+          d="M31.9782 26.8691C32.6203 25.7806 33.1197 24.9098 33.619 24.039C35.4025 20.9911 37.1325 17.9795 38.9695 14.8954C41.2524 11.2488 40.6639 6.67702 38.4523 3.82872C36.0089 0.653858 31.9782 -0.706797 28.0367 0.599431C21.3129 2.81276 19.4224 11.1581 23.8098 16.0383C24.5767 16.891 25.4863 17.6167 26.4315 18.2517C29.196 20.1384 30.9616 22.6783 31.7107 25.9802C31.782 26.1797 31.8534 26.3974 31.9782 26.8691Z"
           fill="white"
         />
         <path
-          d="M5.06506 17.2344C5.52877 17.1255 5.76063 17.0711 5.97465 17.0167C9.16711 16.0915 12.2169 16.3999 15.1775 17.9419C16.1763 18.4681 17.2642 18.9216 18.3521 19.1756C24.6835 20.6814 30.9258 14.9304 29.5347 7.89124C28.7143 3.77299 25.5931 0.852122 21.6694 0.235292C18.1559 -0.327112 13.9291 1.37824 11.9315 5.18807C10.2907 8.30851 8.45371 11.3382 6.68805 14.4042C6.18867 15.2569 5.68929 16.1277 5.06506 17.2344Z"
+          d="M5.06507 21.2275C5.52878 21.3364 5.76063 21.3908 5.97465 21.4452C9.16711 22.3705 12.2169 22.062 15.1775 20.52C16.1763 19.9939 17.2642 19.5403 18.3521 19.2863C24.6836 17.7805 30.9258 23.5316 29.5347 30.5707C28.7143 34.6889 25.5931 37.6098 21.6694 38.2266C18.1559 38.789 13.9291 37.0837 11.9315 33.2738C10.2907 30.1534 8.45371 27.1237 6.68805 24.0577C6.18867 23.205 5.68929 22.3342 5.06507 21.2275Z"
           fill="white"
         />
         <path
-          d="M5.06506 17.235C5.68929 16.1283 6.18867 15.2575 6.68805 14.3867C8.43588 11.3207 10.1837 8.25464 11.9315 5.17049C13.9469 1.36066 18.1559 -0.34469 21.6694 0.217713C25.5931 0.852685 28.7143 3.75541 29.5347 7.87366C30.9258 14.9309 24.6835 20.682 18.3521 19.158C17.2642 18.904 16.1763 18.4323 15.1775 17.9244C12.2169 16.3823 9.16711 16.0739 5.97465 16.9991C5.74279 17.0717 5.52877 17.1261 5.06506 17.235Z"
+          d="M5.06507 21.227C5.68929 22.3336 6.18867 23.2044 6.68805 24.0753C8.43588 27.1413 10.1837 30.2073 11.9315 33.2914C13.9469 37.1013 18.1559 38.8066 21.6694 38.2442C25.5931 37.6092 28.7143 34.7065 29.5347 30.5883C30.9258 23.531 24.6835 17.78 18.3521 19.3039C17.2642 19.5579 16.1763 20.0296 15.1775 20.5376C12.2169 22.0796 9.16711 22.388 5.97465 21.4628C5.7428 21.3902 5.52878 21.3358 5.06507 21.227Z"
           fill="white"
         />
       </g>
@@ -95,7 +95,12 @@ const Banner: React.FC = () => {
       />
       <defs>
         <clipPath id="clip0_169_19411">
-          <rect width="40.4854" height="38.4612" fill="white" />
+          <rect
+            width="40.4854"
+            height="38.4612"
+            fill="white"
+            transform="matrix(1 1.74846e-07 1.74846e-07 -1 0 38.4619)"
+          />
         </clipPath>
       </defs>
     </svg>
diff --git a/frontend/components/icons/Check.tsx b/frontend/components/icons/Check.tsx
new file mode 100644
index 000000000..0549572c4
--- /dev/null
+++ b/frontend/components/icons/Check.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+const CheckIcon = () => {
+  return (
+    <svg
+      preserveAspectRatio="xMidYMin meet"
+      width="6px"
+      height="6px"
+      viewBox="0 0 6px 6px"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="3" cy="3" r="3" fill="#A235FF" />
+    </svg>
+  );
+};
+
+export default CheckIcon;
diff --git a/frontend/components/icons/eye.tsx b/frontend/components/icons/Eye.tsx
similarity index 96%
rename from frontend/components/icons/eye.tsx
rename to frontend/components/icons/Eye.tsx
index 7cd9158a9..c16ad5d97 100644
--- a/frontend/components/icons/eye.tsx
+++ b/frontend/components/icons/Eye.tsx
@@ -1,6 +1,4 @@
-import React from "react";
-
-const EyeIcon = () => {
+const EyeIcon: React.FC = () => {
   return (
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
diff --git a/frontend/components/icons/github.tsx b/frontend/components/icons/Github.tsx
similarity index 100%
rename from frontend/components/icons/github.tsx
rename to frontend/components/icons/Github.tsx
diff --git a/frontend/components/icons/HeaderBanner.tsx b/frontend/components/icons/HeaderBanner.tsx
new file mode 100644
index 000000000..c503c3f29
--- /dev/null
+++ b/frontend/components/icons/HeaderBanner.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+
+const HeaderBannerIcon = () => {
+  return (
+    <svg
+      width="176"
+      height="18"
+      viewBox="0 0 176 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_813_7630)">
+        <path
+          d="M9.95883 0.0233515C9.81581 0.176338 9.75559 0.245182 9.68784 0.314027C8.67916 1.30079 8.14471 2.49409 8.06944 3.92452C8.04685 4.40643 7.97911 4.90364 7.84361 5.3626C7.0457 8.03222 3.65833 9.12608 1.42267 7.1143C0.112892 5.9363 -0.263482 4.16165 0.338717 2.57823C0.880695 1.15545 2.38619 -0.0454946 4.17773 0.0157001C5.64559 0.0692463 7.12097 0.023351 8.59636 0.0233513C9.01037 0.0233513 9.43191 0.0233514 9.95883 0.0233515Z"
+          fill="white"
+        />
+        <path
+          d="M9.95883 0.0233496C9.43191 0.0233495 9.01037 0.0233494 8.59636 0.0233493C7.12097 0.0233491 5.66817 0.00804999 4.17773 0.00804973C2.38619 -0.053145 0.880695 1.15545 0.338717 2.57823C-0.263482 4.16165 0.112892 5.94395 1.42267 7.1143C3.65833 9.12608 7.0457 8.03222 7.84361 5.3626C7.97911 4.90364 8.04685 4.40643 8.06944 3.92452C8.14471 2.50174 8.67916 1.30079 9.68784 0.314025C9.75559 0.245181 9.81581 0.168687 9.95883 0.0233496Z"
+          fill="white"
+        />
+        <path
+          d="M13.4967 11.3291C13.444 11.1302 13.4139 11.0384 13.3913 10.9466C13.0751 9.56207 12.3299 8.48351 11.1631 7.68798C10.7642 7.42025 10.3803 7.11428 10.0566 6.75476C8.20485 4.69708 9.00276 1.17073 11.8406 0.245162C13.5042 -0.297942 15.1979 0.275759 16.2367 1.60675C17.1625 2.80769 17.4185 4.73533 16.455 6.27285C15.6646 7.53499 14.9495 8.84303 14.1967 10.1281C13.9784 10.4953 13.7677 10.8625 13.4967 11.3291Z"
+          fill="white"
+        />
+        <path
+          d="M13.4968 11.3291C13.7678 10.8701 13.9786 10.5029 14.1893 10.1358C14.9421 8.85068 15.6722 7.58089 16.4476 6.2805C17.4111 4.74298 17.1627 2.81534 16.2293 1.61439C15.198 0.275754 13.4968 -0.297947 11.8332 0.252806C8.99538 1.18603 8.19746 4.70473 10.0492 6.76241C10.3729 7.12193 10.7568 7.4279 11.1558 7.69563C12.3225 8.49116 13.0677 9.56207 13.3839 10.9543C13.414 11.0384 13.4441 11.1302 13.4968 11.3291Z"
+          fill="white"
+        />
+        <path
+          d="M2.13776 8.95028C2.33347 8.99617 2.43133 9.01912 2.52166 9.04207C3.86908 9.43218 5.15628 9.30215 6.40584 8.65195C6.82738 8.43012 7.28655 8.23889 7.74573 8.1318C10.418 7.4969 13.0526 9.92175 12.4655 12.8897C12.1192 14.6261 10.8019 15.8576 9.14584 16.1177C7.66292 16.3548 5.87891 15.6358 5.03584 14.0294C4.34331 12.7138 3.56798 11.4363 2.82276 10.1436C2.61199 9.78406 2.40122 9.41689 2.13776 8.95028Z"
+          fill="white"
+        />
+        <path
+          d="M2.13776 8.95014C2.40122 9.41675 2.61199 9.78391 2.82276 10.1511C3.56045 11.4438 4.29814 12.7366 5.03583 14.037C5.88644 15.6433 7.66292 16.3624 9.14584 16.1252C10.8019 15.8575 12.1192 14.6336 12.4655 12.8972C13.0526 9.9216 10.418 7.49676 7.74573 8.13931C7.28655 8.2464 6.82737 8.44528 6.40584 8.65946C5.15627 9.30966 3.86908 9.43969 2.52166 9.04958C2.4238 9.01898 2.33347 8.99603 2.13776 8.95014Z"
+          fill="white"
+        />
+      </g>
+      <path
+        d="M27.4468 1.72975H22.2136V14.8341H27.4468C31.054 14.8341 33.8015 11.9886 33.8015 8.28192C33.8015 4.57526 31.054 1.72975 27.4468 1.72975ZM27.4468 11.9511H25.204V4.6127H27.4468C29.5027 4.6127 30.9232 6.03546 30.9232 8.28192C30.9232 10.5284 29.5027 11.9511 27.4468 11.9511Z"
+        fill="white"
+      />
+      <path
+        d="M37.7257 4.65014C38.6415 4.65014 39.4078 3.8826 39.4078 2.9653C39.4078 2.048 38.6415 1.28046 37.7257 1.28046C36.8098 1.28046 36.0435 2.048 36.0435 2.9653C36.0435 3.8826 36.8098 4.65014 37.7257 4.65014ZM36.3239 14.8341H39.1274V5.47385H36.3239V14.8341Z"
+        fill="white"
+      />
+      <path
+        d="M48.0756 5.47385L46.1318 11.4082L44.1881 5.47385H41.0855L44.5432 14.8341H47.7205L51.1782 5.47385H48.0756Z"
+        fill="white"
+      />
+      <path
+        d="M54.5431 4.65014C55.459 4.65014 56.2253 3.8826 56.2253 2.9653C56.2253 2.048 55.459 1.28046 54.5431 1.28046C53.6273 1.28046 52.861 2.048 52.861 2.9653C52.861 3.8826 53.6273 4.65014 54.5431 4.65014ZM53.1414 14.8341H55.9449V5.47385H53.1414V14.8341Z"
+        fill="white"
+      />
+      <path
+        d="M65.7155 1.72975V6.35371C65.0987 5.64233 64.1829 5.21176 62.9306 5.21176C60.4822 5.21176 58.4637 7.36462 58.4637 10.154C58.4637 12.9433 60.4822 15.0962 62.9306 15.0962C64.1829 15.0962 65.0987 14.6656 65.7155 13.9542V14.8341H68.519V1.72975H65.7155ZM63.4913 12.4379C62.2017 12.4379 61.2672 11.558 61.2672 10.154C61.2672 8.74993 62.2017 7.87007 63.4913 7.87007C64.781 7.87007 65.7155 8.74993 65.7155 10.154C65.7155 11.558 64.781 12.4379 63.4913 12.4379Z"
+        fill="white"
+      />
+      <path
+        d="M74.0148 11.2772H80.6498C80.7245 10.9215 80.7619 10.5471 80.7619 10.154C80.7619 7.32717 78.7434 5.21176 76.0146 5.21176C73.0616 5.21176 71.043 7.36462 71.043 10.154C71.043 12.9433 73.0242 15.0962 76.2202 15.0962C77.9958 15.0962 79.3788 14.441 80.2947 13.168L78.0518 11.8763C77.678 12.2881 77.0239 12.5876 76.2576 12.5876C75.2296 12.5876 74.3699 12.2507 74.0148 11.2772ZM73.9587 9.1805C74.2204 8.22576 74.9306 7.70159 75.9959 7.70159C76.837 7.70159 77.678 8.09471 77.9771 9.1805H73.9587Z"
+        fill="white"
+      />
+      <path
+        d="M94.5567 13.9729L92.912 12.1383C93.4727 11.2772 93.8652 10.3037 94.1082 9.38643L91.6037 7.96367C91.4542 8.73121 91.2486 9.42387 90.9869 10.0229L88.5759 7.3459C87.9965 6.7094 87.5479 6.22267 87.5479 5.49257C87.5479 4.85607 88.0525 4.38806 88.8001 4.38806C89.6412 4.38806 90.1645 4.93095 90.501 5.81082L93.0615 4.3319C92.2578 2.40369 90.6505 1.46766 88.7628 1.46766C86.2583 1.46766 84.5575 3.09634 84.5575 5.30536C84.5575 6.14778 84.7631 6.803 85.0995 7.38334C83.7538 8.24448 83.0062 9.64852 83.0062 11.1462C83.0062 13.6173 84.9874 15.0962 87.6787 15.0962C89.0244 15.0962 90.1458 14.703 91.0617 14.0666L92.2205 15.3208L94.5567 13.9729ZM87.9217 12.363C86.5947 12.363 86.034 11.7078 86.034 10.8279C86.034 10.3037 86.2396 9.76084 86.7255 9.36771L86.8377 9.48003L89.23 12.0635C88.8375 12.2694 88.4077 12.363 87.9217 12.363Z"
+        fill="white"
+      />
+      <path
+        d="M102.476 15.0962C104.868 15.0962 106.961 13.9168 108.083 12.0635L105.503 10.5658C104.943 11.5767 103.803 12.1758 102.476 12.1758C100.158 12.1758 98.6629 10.622 98.6629 8.28192C98.6629 5.94186 100.158 4.38806 102.476 4.38806C103.803 4.38806 104.924 4.98711 105.503 5.99802L108.083 4.50038C106.943 2.64705 104.849 1.46766 102.476 1.46766C98.532 1.46766 95.6724 4.4255 95.6724 8.28192C95.6724 12.1383 98.532 15.0962 102.476 15.0962Z"
+        fill="white"
+      />
+      <path
+        d="M114.902 15.0962C117.65 15.0962 119.855 12.9433 119.855 10.154C119.855 7.36462 117.65 5.21176 114.902 5.21176C112.155 5.21176 109.949 7.36462 109.949 10.154C109.949 12.9433 112.155 15.0962 114.902 15.0962ZM114.902 12.363C113.687 12.363 112.753 11.4831 112.753 10.154C112.753 8.82481 113.687 7.94495 114.902 7.94495C116.117 7.94495 117.051 8.82481 117.051 10.154C117.051 11.4831 116.117 12.363 114.902 12.363Z"
+        fill="white"
+      />
+      <path
+        d="M127.851 5.21176C126.618 5.21176 125.683 5.66105 125.179 6.35371V5.47385H122.375V14.8341H125.179V9.7234C125.179 8.39424 125.889 7.79519 126.917 7.79519C127.814 7.79519 128.543 8.33808 128.543 9.49875V14.8341H131.347V9.0869C131.347 6.55964 129.739 5.21176 127.851 5.21176Z"
+        fill="white"
+      />
+      <path
+        d="M140.991 5.47385V6.35371C140.374 5.64233 139.458 5.21176 138.206 5.21176C135.758 5.21176 133.739 7.36462 133.739 10.154C133.739 12.9433 135.758 15.0962 138.206 15.0962C139.458 15.0962 140.374 14.6656 140.991 13.9542V17.4971H143.794V5.47385H140.991ZM138.767 12.4379C137.477 12.4379 136.543 11.558 136.543 10.154C136.543 8.74993 137.477 7.87007 138.767 7.87007C140.056 7.87007 140.991 8.74993 140.991 10.154C140.991 11.558 140.056 12.4379 138.767 12.4379Z"
+        fill="white"
+      />
+      <path
+        d="M152.823 5.47385V10.5845C152.823 11.9137 152.112 12.5128 151.084 12.5128C150.187 12.5128 149.458 11.9699 149.458 10.8092V5.47385H146.655V11.221C146.655 13.7483 148.262 15.0962 150.15 15.0962C151.383 15.0962 152.318 14.6469 152.823 13.9542V14.8341H155.626V5.47385H152.823Z"
+        fill="white"
+      />
+      <path
+        d="M161.121 11.2772H167.756C167.831 10.9215 167.868 10.5471 167.868 10.154C167.868 7.32717 165.85 5.21176 163.121 5.21176C160.168 5.21176 158.149 7.36462 158.149 10.154C158.149 12.9433 160.131 15.0962 163.327 15.0962C165.102 15.0962 166.485 14.441 167.401 13.168L165.158 11.8763C164.784 12.2881 164.13 12.5876 163.364 12.5876C162.336 12.5876 161.476 12.2507 161.121 11.2772ZM161.065 9.1805C161.327 8.22576 162.037 7.70159 163.102 7.70159C163.943 7.70159 164.784 8.09471 165.083 9.1805H161.065Z"
+        fill="white"
+      />
+      <path
+        d="M173.196 7.13997V5.47385H170.393V14.8341H173.196V10.6033C173.196 8.74993 174.841 8.28192 176 8.46913V5.28664C174.822 5.28664 173.57 5.8857 173.196 7.13997Z"
+        fill="white"
+      />
+      <defs>
+        <clipPath id="clip0_813_7630">
+          <rect
+            width="17.0874"
+            height="16.2166"
+            fill="white"
+            transform="matrix(1 1.74669e-07 1.75022e-07 -1 0 16.217)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default HeaderBannerIcon;
diff --git a/frontend/components/icons/Indeterminate.tsx b/frontend/components/icons/Indeterminate.tsx
new file mode 100644
index 000000000..1e743b87c
--- /dev/null
+++ b/frontend/components/icons/Indeterminate.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+const IndeterminateIcon = () => {
+  return (
+    <svg
+      preserveAspectRatio="xMidYMin meet"
+      width="6px"
+      height="6px"
+      viewBox="0 0 6px 6px"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="3" cy="3" r="3" fill="#A235FF" />
+    </svg>
+  );
+};
+
+export default IndeterminateIcon;
diff --git a/frontend/components/icons/info.tsx b/frontend/components/icons/Info.tsx
similarity index 100%
rename from frontend/components/icons/info.tsx
rename to frontend/components/icons/Info.tsx
diff --git a/frontend/components/icons/leftArrow.tsx b/frontend/components/icons/LeftArrow.tsx
similarity index 100%
rename from frontend/components/icons/leftArrow.tsx
rename to frontend/components/icons/LeftArrow.tsx
diff --git a/frontend/components/icons/logo.tsx b/frontend/components/icons/Logo.tsx
similarity index 100%
rename from frontend/components/icons/logo.tsx
rename to frontend/components/icons/Logo.tsx
diff --git a/frontend/components/icons/microsoft.tsx b/frontend/components/icons/Microsoft.tsx
similarity index 100%
rename from frontend/components/icons/microsoft.tsx
rename to frontend/components/icons/Microsoft.tsx
diff --git a/frontend/components/Primitives/OrSeparator.tsx b/frontend/components/icons/OrSeparator.tsx
similarity index 97%
rename from frontend/components/Primitives/OrSeparator.tsx
rename to frontend/components/icons/OrSeparator.tsx
index 3dce3ed1c..c460020f4 100644
--- a/frontend/components/Primitives/OrSeparator.tsx
+++ b/frontend/components/icons/OrSeparator.tsx
@@ -1,4 +1,6 @@
-const OrSeparator: React.FC = () => {
+import React from "react";
+
+const OrSeparator = () => {
   return (
     <svg
       width="436"
diff --git a/frontend/components/icons/PlusIcon.tsx b/frontend/components/icons/PlusIcon.tsx
new file mode 100644
index 000000000..5d5375c21
--- /dev/null
+++ b/frontend/components/icons/PlusIcon.tsx
@@ -0,0 +1,47 @@
+import type * as Stitches from "@stitches/react";
+import { config } from "../../stitches.config";
+import Svg from "../Primitives/Svg";
+
+type CSSProps = { css?: Stitches.CSS<typeof config> };
+
+type PlusIconProps = { size?: string } & CSSProps;
+
+const PlusIcon: React.FC<PlusIconProps> = ({ size, ...rest }) => {
+  if (size === "16")
+    return (
+      <Svg
+        {...rest}
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/Svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.75 2.75C8.75 2.33579 8.41421 2 8 2C7.58579 2 7.25 2.33579 7.25 2.75V7.25H2.75C2.33579 7.25 2 7.58579 2 8C2 8.41421 2.33579 8.75 2.75 8.75H7.25V13.25C7.25 13.6642 7.58579 14 8 14C8.41421 14 8.75 13.6642 8.75 13.25V8.75H13.25C13.6642 8.75 14 8.41421 14 8C14 7.58579 13.6642 7.25 13.25 7.25H8.75V2.75Z"
+          fill="#060D16"
+        />
+      </Svg>
+    );
+  return (
+    <Svg
+      {...rest}
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.9375 3.4375C10.9375 2.91973 10.5178 2.5 10 2.5C9.48223 2.5 9.0625 2.91973 9.0625 3.4375V9.0625H3.4375C2.91973 9.0625 2.5 9.48223 2.5 10C2.5 10.5178 2.91973 10.9375 3.4375 10.9375H9.0625V16.5625C9.0625 17.0803 9.48223 17.5 10 17.5C10.5178 17.5 10.9375 17.0803 10.9375 16.5625V10.9375H16.5625C17.0803 10.9375 17.5 10.5178 17.5 10C17.5 9.48223 17.0803 9.0625 16.5625 9.0625H10.9375V3.4375Z"
+        fill="currentColor"
+      />
+    </Svg>
+  );
+};
+
+export default PlusIcon;
diff --git a/frontend/components/icons/sidebar/Account.tsx b/frontend/components/icons/sidebar/Account.tsx
new file mode 100644
index 000000000..bad2e0b2c
--- /dev/null
+++ b/frontend/components/icons/sidebar/Account.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+const AccountIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12.5 5.67742C10.4698 5.67742 8.82258 7.3246 8.82258 9.35484C8.82258 11.3851 10.4698 13.0323 12.5 13.0323C14.5302 13.0323 16.1774 11.3851 16.1774 9.35484C16.1774 7.3246 14.5302 5.67742 12.5 5.67742ZM12.5 11.1935C11.4849 11.1935 10.6613 10.37 10.6613 9.35484C10.6613 8.33972 11.4849 7.51613 12.5 7.51613C13.5151 7.51613 14.3387 8.33972 14.3387 9.35484C14.3387 10.37 13.5151 11.1935 12.5 11.1935ZM12.5 2C7.25202 2 3 6.25202 3 11.5C3 16.748 7.25202 21 12.5 21C17.748 21 22 16.748 22 11.5C22 6.25202 17.748 2 12.5 2ZM12.5 19.1613C10.5962 19.1613 8.85706 18.4603 7.51633 17.3073C8.0871 16.4262 9.06391 15.8286 10.1825 15.7942C10.9792 16.0393 11.7377 16.1619 12.5 16.1619C13.2623 16.1619 14.0208 16.0431 14.8175 15.7942C15.9361 15.8325 16.9129 16.4262 17.4837 17.3073C16.1429 18.4603 14.4038 19.1613 12.5 19.1613ZM18.7325 15.9397C17.7978 14.7369 16.3536 13.9516 14.7065 13.9516C14.3157 13.9516 13.7105 14.3194 12.5 14.3194C11.2933 14.3194 10.6843 13.9516 10.2935 13.9516C8.6502 13.9516 7.20605 14.7369 6.26754 15.9397C5.37117 14.6871 4.83871 13.1548 4.83871 11.5C4.83871 7.2748 8.2748 3.83871 12.5 3.83871C16.7252 3.83871 20.1613 7.2748 20.1613 11.5C20.1613 13.1548 19.6288 14.6871 18.7325 15.9397Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default AccountIcon;
diff --git a/frontend/components/icons/sidebar/Boards.tsx b/frontend/components/icons/sidebar/Boards.tsx
new file mode 100644
index 000000000..8924b1edd
--- /dev/null
+++ b/frontend/components/icons/sidebar/Boards.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+const BoardsIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20.8158 20.9999C22 20.9999 22 20.0999 22 19.1999L22 4.79991C22 3.89991 22 2.99991 20.8158 2.99991L18.1842 2.99991C17 2.99991 17 3.89991 17 4.79991L17 19.1999C17 20.0999 17 20.9999 18.1842 20.9999L20.8158 20.9999ZM18.3274 4.45031L20.5 4.45031L20.5 19.6499L18.5 19.6499L18.5 6.34875L18.3274 4.45031Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.81579 20.9999C8 20.9999 8 20.0999 8 19.1999L8 4.79991C8 3.89991 8 2.99991 6.81579 2.99991L4.18421 2.99991C3 2.99991 3 3.89991 3 4.79991L3 19.1999C3 20.0999 3 20.9999 4.18421 20.9999L6.81579 20.9999ZM4.32744 4.45031L6.57813 4.45031L6.57812 19.6499L4.5 19.6499L4.5 6.34875L4.32744 4.45031Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.8158 20.9999C15 20.9999 15 20.0999 15 19.1999L15 4.79991C15 3.89991 15 2.99991 13.8158 2.99991L11.1842 2.99991C10 2.99991 10 3.89991 10 4.79991L10 19.1999C10 20.0999 10 20.9999 11.1842 20.9999L13.8158 20.9999ZM11.3274 4.45031L13.5 4.45031L13.5 19.6499L11.5 19.6499L11.5 6.34875L11.3274 4.45031Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default BoardsIcon;
diff --git a/frontend/components/icons/sidebar/Dashboard.tsx b/frontend/components/icons/sidebar/Dashboard.tsx
new file mode 100644
index 000000000..2bb91999a
--- /dev/null
+++ b/frontend/components/icons/sidebar/Dashboard.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+const DashboardIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20.8105 4.89493C20.8105 3.94756 20.0526 3.2844 19.1052 3.18967H14.3683C13.421 3.18967 12.7578 3.94756 12.6631 4.89493V11.5265C12.6631 12.4739 13.421 13.137 14.3683 13.2318H19.1052C20.0526 13.2318 20.7157 12.4739 20.8105 11.5265V4.89493ZM14.1789 11.716V4.70546H19.3894V11.8107H14.1789V11.716Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.3368 13.4212C11.3368 12.4739 10.5789 11.8107 9.63156 11.716H4.89472C3.94735 11.716 3.28419 12.4739 3.18945 13.4212V19.1054C3.18945 20.0528 3.94735 20.716 4.89472 20.8107H9.63156C10.5789 20.8107 11.2421 20.0528 11.3368 19.1054V13.4212ZM4.70524 19.2949V13.137H9.91577V19.2949H4.70524Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.8105 16.2633C20.8105 15.316 20.0526 14.6528 19.1052 14.5581H14.3683C13.421 14.5581 12.7578 15.316 12.6631 16.2633V19.1054C12.6631 20.0528 13.421 20.716 14.3683 20.8107H19.1052C20.0526 20.8107 20.7157 20.0528 20.8105 19.1054V16.2633ZM14.1789 19.2949V15.9791H19.3894V19.2949H14.1789Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.3368 4.89475C11.2421 3.94738 10.5789 3.28422 9.63156 3.18948H4.89472C3.94735 3.28422 3.28419 3.94738 3.18945 4.89475V8.68422C3.28419 9.63159 3.94735 10.2947 4.89472 10.3895H9.63156C10.5789 10.2947 11.2421 9.63159 11.3368 8.68422V4.89475ZM4.70524 8.87369V4.70527H9.91577V8.96843H4.70524V8.87369Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default DashboardIcon;
diff --git a/frontend/components/icons/sidebar/Logout.tsx b/frontend/components/icons/sidebar/Logout.tsx
new file mode 100644
index 000000000..1cd9ac8fa
--- /dev/null
+++ b/frontend/components/icons/sidebar/Logout.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+const LogoutIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M18 11.6H19.2357L18.3477 10.7407L15.2808 7.77275C15.2128 7.66958 15.175 7.53901 15.175 7.4125C15.175 7.29524 15.2061 7.21755 15.2355 7.17552C15.3373 7.11081 15.4643 7.075 15.5875 7.075C15.7296 7.075 15.8136 7.12071 15.8464 7.15355L20.4464 11.7535C20.4823 11.7894 20.5301 11.8808 20.5383 12.0277C20.545 12.1481 20.5213 12.2426 20.4991 12.2938L15.9756 16.8172C15.872 16.8865 15.7402 16.925 15.6125 16.925C15.4952 16.925 15.4176 16.8939 15.3755 16.8645C15.3108 16.7627 15.275 16.6357 15.275 16.5125C15.275 16.3704 15.3207 16.2864 15.3536 16.2536L18.3536 13.2535L19.2071 12.4H18H9.9C9.67614 12.4 9.5 12.2239 9.5 12C9.5 11.7761 9.67614 11.6 9.9 11.6H18Z"
+        fill="currentColor"
+        stroke="#768291"
+      />
+      <path
+        d="M6.40001 4.7H8.70001C8.77889 4.7 8.87892 4.74094 8.97112 4.84022C9.06812 4.94469 9.10001 5.05326 9.10001 5.1C9.10001 5.32385 8.92387 5.5 8.70001 5.5H6.40001C5.8874 5.5 5.41663 5.75127 5.08396 6.08394C4.75129 6.41662 4.50001 6.88738 4.50001 7.4V16.6C4.50001 17.1115 4.75046 17.5861 5.09268 17.9121C5.42698 18.2304 5.90771 18.4607 6.43187 18.4H8.70001C8.92387 18.4 9.10001 18.5761 9.10001 18.8C9.10001 19.0239 8.92387 19.2 8.70001 19.2H6.40001C4.87615 19.2 3.70001 18.0239 3.70001 16.5V7.4C3.70001 5.87614 4.87615 4.7 6.40001 4.7Z"
+        fill="currentColor"
+        stroke="#768291"
+      />
+    </svg>
+  );
+};
+
+export default LogoutIcon;
diff --git a/frontend/components/icons/sidebar/Settings.tsx b/frontend/components/icons/sidebar/Settings.tsx
new file mode 100644
index 000000000..163e5c469
--- /dev/null
+++ b/frontend/components/icons/sidebar/Settings.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+const SettingsIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20.913 9.82222L19.6581 9.64444C19.5685 9.2 19.3892 8.84444 19.2099 8.48889L19.927 7.42222C20.2856 6.88889 20.2856 6.08889 19.7478 5.64444L18.4929 4.4C18.0447 3.95556 17.238 3.86667 16.7002 4.22222L15.6245 4.93333C15.266 4.75556 14.8178 4.57778 14.3696 4.4L14.1904 3.15556C14.1007 2.44444 13.4733 2 12.8459 2H11.1428C10.4257 2 9.88789 2.44444 9.79826 3.15556L9.52935 4.48889C9.17081 4.66667 8.72263 4.84444 8.36409 5.02222L7.28847 4.31111C6.75066 3.95556 5.94395 3.95556 5.49577 4.48889L4.33051 5.64444C3.88234 6.08889 3.7927 6.88889 4.15124 7.42222L4.86832 8.48889C4.68905 8.84444 4.50978 9.2 4.42015 9.64444L3.16526 9.82222C2.44818 9.91111 2 10.5333 2 11.1556V12.9333C2 13.6444 2.44818 14.1778 3.16526 14.2667L4.42015 14.4444C4.50978 14.8 4.68905 15.2444 4.86832 15.6L4.15124 16.6667C3.7927 17.2 3.7927 18 4.33051 18.4444L5.58541 19.6889C6.03358 20.1333 6.8403 20.2222 7.37811 19.8667L8.45373 19.1556C8.81227 19.3333 9.17081 19.5111 9.61899 19.6L9.79826 20.8444C9.88789 21.5556 10.5153 22 11.1428 22H12.9355C13.6526 22 14.1904 21.5556 14.28 20.8444L14.4593 19.6C14.9075 19.5111 15.266 19.3333 15.6245 19.1556L16.7002 19.8667C17.238 20.2222 18.0447 20.2222 18.4929 19.6889L19.7478 18.4444C20.1959 18 20.2856 17.2 19.927 16.6667L19.1203 15.6C19.2996 15.2444 19.4789 14.8 19.5685 14.4444L20.8234 14.2667C21.5405 14.1778 21.9886 13.5556 21.9886 12.9333V11.1556C22.0783 10.5333 21.6301 9.91111 20.913 9.82222ZM18.3136 13.6444C18.1343 14.2667 17.9551 14.8 17.5965 15.3333C17.4172 15.6 17.5069 15.8667 17.5965 16.1333L18.5825 17.4667L17.4172 18.6222L16.0727 17.6444C15.8038 17.4667 15.5349 17.4667 15.266 17.6444C14.7282 17.9111 14.1904 18.1778 13.5629 18.3556C13.294 18.4444 13.0251 18.6222 13.0251 18.9778L12.7562 20.6667H11.1428L10.8739 18.9778C10.7842 18.7111 10.605 18.4444 10.3361 18.3556C9.79826 18.1778 9.17081 18 8.72264 17.6444C8.45373 17.4667 8.18482 17.5556 7.91592 17.6444L6.57139 18.6222L5.40614 17.4667L6.39212 16.1333C6.57139 15.8667 6.57139 15.6 6.39212 15.3333C6.03358 14.8 5.85431 14.2667 5.67504 13.6444C5.58541 13.3778 5.40613 13.2 5.04759 13.1111L3.34453 12.8444V11.2444L5.04759 10.9778C5.3165 10.8889 5.58541 10.7111 5.67504 10.4444C5.85431 9.82222 6.03358 9.28889 6.39212 8.75556C6.57139 8.48889 6.48176 8.22222 6.39212 7.95556L5.40614 6.62222L6.57139 5.46667L7.91592 6.44444C8.18482 6.62222 8.45373 6.62222 8.72264 6.44444C9.26045 6.17778 9.79826 5.91111 10.3361 5.82222C10.605 5.73333 10.7842 5.55556 10.8739 5.2L11.1428 3.51111H12.7562L13.0251 5.2C13.1148 5.46667 13.294 5.73333 13.5629 5.82222C14.1904 6 14.7282 6.17778 15.266 6.53333C15.5349 6.71111 15.8038 6.62222 16.0727 6.53333L17.4172 5.55556L18.5825 6.71111L17.5965 8.04444C17.4172 8.31111 17.4172 8.57778 17.5965 8.84444C17.8654 9.37778 18.1343 9.91111 18.3136 10.5333C18.4032 10.8 18.5825 11.0667 18.941 11.0667L20.6441 11.3333V12.9333L18.941 13.2C18.6721 13.2 18.4032 13.3778 18.3136 13.6444Z"
+        fill="currentColor"
+        stroke="#768291"
+        strokeWidth="0.2"
+      />
+      <path
+        d="M12.0392 7.77753C9.61903 7.77753 7.73669 9.73309 7.73669 12.0442C7.73669 14.4442 9.70867 16.3109 12.0392 16.3109C14.3697 16.3109 16.3417 14.3553 16.3417 12.0442C16.3417 9.6442 14.4593 7.77753 12.0392 7.77753ZM12.0392 15.0664C10.3361 15.0664 8.99159 13.7331 8.99159 12.0442C8.99159 10.3553 10.3361 9.02197 12.0392 9.02197C13.7422 9.02197 15.0868 10.3553 15.0868 12.0442C15.0868 13.7331 13.7422 15.0664 12.0392 15.0664Z"
+        fill="currentColor"
+        stroke="#768291"
+        strokeWidth="0.4"
+      />
+    </svg>
+  );
+};
+
+export default SettingsIcon;
diff --git a/frontend/components/icons/sidebar/Teams.tsx b/frontend/components/icons/sidebar/Teams.tsx
new file mode 100644
index 000000000..7a360adae
--- /dev/null
+++ b/frontend/components/icons/sidebar/Teams.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const TeamsIcon = () => {
+  return (
+    <svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.42863 4.28571C9.42863 2.86555 10.5799 1.71428 12.0001 1.71428C13.4202 1.71428 14.5715 2.86555 14.5715 4.28571C14.5715 5.70587 13.4202 6.85714 12.0001 6.85714C10.5799 6.85714 9.42863 5.70587 9.42863 4.28571ZM12.0001 0C9.63313 0 7.71435 1.91878 7.71435 4.28571C7.71435 6.65264 9.63313 8.57142 12.0001 8.57142C14.367 8.57142 16.2858 6.65264 16.2858 4.28571C16.2858 1.91878 14.367 0 12.0001 0ZM6.64463 0.138554C7.10322 0.021136 7.57017 0.297713 7.68759 0.756306C7.80501 1.2149 7.52843 1.68185 7.06984 1.79927C6.51672 1.94089 6.02646 2.26257 5.67636 2.71361C5.32626 3.16464 5.13623 3.71937 5.13623 4.29034C5.13623 4.8613 5.32626 5.41603 5.67636 5.86706C6.02646 6.3181 6.51672 6.63978 7.06984 6.7814C7.52843 6.89882 7.80501 7.36577 7.68759 7.82437C7.57017 8.28296 7.10322 8.55954 6.64463 8.44212C5.72276 8.20608 4.90566 7.66994 4.32216 6.91821C3.73866 6.16649 3.42195 5.24195 3.42195 4.29034C3.42195 3.33873 3.73866 2.41418 4.32216 1.66246C4.90566 0.910733 5.72276 0.374591 6.64463 0.138554ZM3.21428 10.4248C3.67264 10.3064 4.14014 10.582 4.25849 11.0404C4.37684 11.4987 4.10121 11.9663 3.64285 12.0846C3.0912 12.227 2.60247 12.5487 2.2534 12.9989C1.90439 13.4492 1.71477 14.0028 1.71428 14.5725L1.71428 16.2861C1.71428 16.7595 1.33053 17.1432 0.857142 17.1432C0.383755 17.1432 0 16.7595 0 16.2861L4.76837e-07 14.5712C0.00070858 13.6216 0.316761 12.6992 0.898536 11.9487C1.48031 11.1982 2.29486 10.6622 3.21428 10.4248ZM5.54094 11.5406C6.34466 10.7368 7.43475 10.2853 8.57139 10.2853H15.4285C16.5652 10.2853 17.6553 10.7368 18.459 11.5406C19.2627 12.3443 19.7142 13.4344 19.7142 14.571V16.2853C19.7142 16.7587 19.3305 17.1424 18.8571 17.1424C18.3837 17.1424 18 16.7587 18 16.2853V14.571C18 13.889 17.729 13.235 17.2468 12.7527C16.7646 12.2705 16.1105 11.9996 15.4285 11.9996H8.57139C7.88941 11.9996 7.23536 12.2705 6.75312 12.7527C6.27088 13.235 5.99997 13.889 5.99997 14.571V16.2853C5.99997 16.7587 5.61621 17.1424 5.14282 17.1424C4.66944 17.1424 4.28568 16.7587 4.28568 16.2853V14.571C4.28568 13.4344 4.73721 12.3443 5.54094 11.5406ZM19.7415 11.0404C19.8599 10.582 20.3274 10.3064 20.7857 10.4248C21.7052 10.6622 22.5197 11.1982 23.1015 11.9487C23.6833 12.6992 23.9993 13.6216 24 14.5712L24 16.2861C24 16.7595 23.6163 17.1432 23.1429 17.1432C22.6695 17.1432 22.2857 16.7595 22.2857 16.2861V14.5725C22.2853 14.0028 22.0956 13.4492 21.7466 12.9989C21.3975 12.5487 20.9088 12.227 20.3572 12.0846C19.8988 11.9663 19.6232 11.4987 19.7415 11.0404ZM17.3554 0.138554C16.8968 0.021136 16.4298 0.297713 16.3124 0.756306C16.195 1.2149 16.4716 1.68185 16.9302 1.79927C17.4833 1.94089 17.9736 2.26257 18.3237 2.71361C18.6738 3.16464 18.8638 3.71937 18.8638 4.29034C18.8638 4.8613 18.6738 5.41603 18.3237 5.86706C17.9736 6.3181 17.4833 6.63978 16.9302 6.7814C16.4716 6.89882 16.195 7.36577 16.3124 7.82437C16.4298 8.28296 16.8968 8.55954 17.3554 8.44212C18.2773 8.20608 19.0944 7.66994 19.6779 6.91821C20.2614 6.16649 20.5781 5.24195 20.5781 4.29034C20.5781 3.33873 20.2614 2.41418 19.6779 1.66246C19.0944 0.910733 18.2773 0.374591 17.3554 0.138554Z"
+        fill="#768291"
+      />
+    </svg>
+  );
+};
+
+export default TeamsIcon;
diff --git a/frontend/components/icons/sidebar/Users.tsx b/frontend/components/icons/sidebar/Users.tsx
new file mode 100644
index 000000000..acfb196cc
--- /dev/null
+++ b/frontend/components/icons/sidebar/Users.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const UsersIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 7C9 5.34315 10.3431 4 12 4C13.6569 4 15 5.34315 15 7C15 8.65685 13.6569 10 12 10C10.3431 10 9 8.65685 9 7ZM12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2ZM8 14C6.67392 14 5.40215 14.5268 4.46447 15.4645C3.52678 16.4021 3 17.6739 3 19V21C3 21.5523 3.44772 22 4 22C4.55228 22 5 21.5523 5 21V19C5 18.2043 5.31607 17.4413 5.87868 16.8787C6.44129 16.3161 7.20435 16 8 16H16C16.7956 16 17.5587 16.3161 18.1213 16.8787C18.6839 17.4413 19 18.2044 19 19V21C19 21.5523 19.4477 22 20 22C20.5523 22 21 21.5523 21 21V19C21 17.6739 20.4732 16.4021 19.5355 15.4645C18.5979 14.5268 17.3261 14 16 14H8Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default UsersIcon;
diff --git a/frontend/components/icons/toast/alert.tsx b/frontend/components/icons/toast/ErrorAlert.tsx
similarity index 100%
rename from frontend/components/icons/toast/alert.tsx
rename to frontend/components/icons/toast/ErrorAlert.tsx
diff --git a/frontend/components/icons/toast/SuccessAlert.tsx b/frontend/components/icons/toast/SuccessAlert.tsx
new file mode 100644
index 000000000..3df0fb226
--- /dev/null
+++ b/frontend/components/icons/toast/SuccessAlert.tsx
@@ -0,0 +1,18 @@
+const SuccessAlertIcon: React.FC = () => {
+  return (
+    <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.36621 30.2746C14.1157 34.7636 25.2683 29.9783 28.9954 21.8554C32.7226 13.7325 30.8344 7.60134 23.0849 3.11237C15.3354 -1.37661 6.20395 -1.62868 2.47678 6.4942C-1.25039 14.6171 -1.3833 25.7857 6.36621 30.2746Z"
+        fill="#3EC796"
+      />
+      <path
+        d="M15.0518 9.05322C10.9096 9.05322 7.55176 12.4111 7.55176 16.5532C7.55176 20.6954 10.9096 24.0532 15.0518 24.0532C19.1939 24.0532 22.5518 20.6954 22.5518 16.5532C22.5518 12.4111 19.1939 9.05322 15.0518 9.05322ZM15.0518 10.5048C18.3945 10.5048 21.1001 13.21 21.1001 16.5532C21.1001 19.8959 18.395 22.6016 15.0518 22.6016C11.7091 22.6016 9.00337 19.8964 9.00337 16.5532C9.00337 13.2105 11.7085 10.5048 15.0518 10.5048ZM19.2918 14.4444L18.6103 13.7573C18.4691 13.615 18.2393 13.6141 18.0971 13.7553L13.8223 17.9957L12.0141 16.1728C11.8729 16.0305 11.6432 16.0296 11.5009 16.1707L10.8138 16.8522C10.6715 16.9934 10.6706 17.2231 10.8117 17.3655L13.5571 20.1331C13.6983 20.2754 13.9281 20.2763 14.0703 20.1351L19.2898 14.9576C19.432 14.8164 19.4329 14.5866 19.2918 14.4444Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default SuccessAlertIcon;
diff --git a/frontend/components/icons/toast/WarningAlert.tsx b/frontend/components/icons/toast/WarningAlert.tsx
new file mode 100644
index 000000000..fe9718839
--- /dev/null
+++ b/frontend/components/icons/toast/WarningAlert.tsx
@@ -0,0 +1,20 @@
+const WarningAlertIcon: React.FC = () => {
+  return (
+    <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.36621 30.2746C14.1157 34.7636 25.2683 29.9783 28.9954 21.8554C32.7226 13.7325 30.8344 7.60134 23.0849 3.11237C15.3354 -1.37661 6.20395 -1.62868 2.47678 6.4942C-1.25039 14.6171 -1.3833 25.7857 6.36621 30.2746Z"
+        fill="#FF6543"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.0428 24.0532C13.1064 24.0532 11.2044 23.8857 9.34823 23.5626L9.55587 23.5926C9.21091 23.5288 8.90243 23.3912 8.63176 23.1936L8.64105 23.2004C7.98495 22.7638 7.55176 21.9689 7.55176 21.0589C7.55176 20.8147 7.58294 20.578 7.64132 20.3549L7.63734 20.3722C9.03444 16.2576 10.9934 12.7238 13.44 9.70618L13.4208 9.73023L13.4274 9.72271C13.6265 9.50781 13.8666 9.3395 14.1326 9.23431L14.1466 9.2298C14.4073 9.11784 14.7085 9.05322 15.0236 9.05322C15.6405 9.05322 16.2057 9.30118 16.6462 9.71445L16.6422 9.71069C19.0855 12.7178 21.0545 16.2703 22.3859 20.1813L22.4536 20.4075C22.5159 20.5968 22.5518 20.8147 22.5518 21.0424C22.5518 21.1461 22.5445 21.2475 22.5299 21.346L22.5312 21.3354C22.3587 22.5039 21.55 23.4115 20.5284 23.5919L20.5151 23.5941C18.8706 23.8864 16.9746 24.0532 15.0435 24.0532C15.0435 24.0532 15.0435 24.0532 15.0428 24.0532ZM14.3509 10.801C12.0728 13.6307 10.2272 16.9616 8.96412 20.6231L8.89845 20.8395C8.88982 20.8711 8.8812 20.8966 8.87191 20.9214L8.87324 20.9169C8.86992 20.9485 8.86859 20.9853 8.86859 21.0229C8.86859 21.4113 9.05965 21.7495 9.34093 21.9238L9.34557 21.9268C9.46233 22.0132 9.59965 22.0763 9.74759 22.1056L9.75423 22.1064C11.3424 22.3889 13.1747 22.5504 15.0395 22.5504C16.9063 22.5504 18.7399 22.3889 20.5297 22.0771L20.3301 22.1056C20.7666 22.017 21.1095 21.6465 21.2117 21.1701L21.213 21.1619C21.219 21.1303 21.223 21.0942 21.223 21.0567C21.223 21.0041 21.2157 20.953 21.2024 20.9049L21.2031 20.9087C19.8736 17.0022 18.0188 13.6465 15.7055 10.7724L15.7254 10.7972C15.5297 10.6462 15.2883 10.556 15.0282 10.556C14.8643 10.556 14.7078 10.5921 14.5638 10.6574L14.5725 10.6544C14.4869 10.6882 14.4126 10.7386 14.3502 10.8032L14.3509 10.8025V10.801ZM15.8143 17.3087V14.3032C15.8143 13.8884 15.5171 13.5518 15.1509 13.5518C14.7847 13.5518 14.4875 13.8884 14.4875 14.3032V17.3087C14.4875 17.7235 14.7847 18.0601 15.1509 18.0601C15.5171 18.0601 15.8143 17.7235 15.8143 17.3087ZM15.5112 20.2166C15.5695 20.1498 15.6166 20.0694 15.6491 19.9814L15.6505 19.9762C15.683 19.892 15.7022 19.7943 15.7035 19.6914V19.6907C15.7016 19.5847 15.6823 19.484 15.6485 19.3924L15.6505 19.3976C15.6166 19.3044 15.5695 19.224 15.5112 19.1572C15.3891 19.0219 15.2213 18.9385 15.0368 18.9385C14.9473 18.9385 14.8617 18.958 14.7834 18.9941L14.7881 18.9926C14.7031 19.0339 14.6308 19.0895 14.5691 19.1579C14.5108 19.2248 14.4637 19.3052 14.4312 19.3931L14.4298 19.3984C14.398 19.4848 14.3787 19.5855 14.3768 19.6907V19.6914C14.3768 19.6922 14.3768 19.6929 14.3768 19.6937C14.3768 19.8988 14.4504 20.0836 14.5691 20.2174C14.6288 20.288 14.7025 20.3444 14.7841 20.3812L14.7881 20.3827C14.8637 20.421 14.9519 20.4428 15.0448 20.4428C15.2279 20.4428 15.3937 20.3564 15.5112 20.2174V20.2166Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default WarningAlertIcon;
diff --git a/frontend/hooks/useBoard.tsx b/frontend/hooks/useBoard.tsx
index 2c7359f18..c654caad8 100644
--- a/frontend/hooks/useBoard.tsx
+++ b/frontend/hooks/useBoard.tsx
@@ -1,53 +1,33 @@
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useSetRecoilState } from "recoil";
 import { useMutation, useQuery } from "react-query";
-import ToastMessage from "../utils/toast";
 import BoardType from "../types/board/board";
 import {
   deleteBoardRequest,
   getBoardRequest,
-  getBoardsRequest,
   createBoardRequest,
-  updateCardPositionRequest,
   updateBoardRequest,
-  addCardRequest,
-  deleteCardRequest,
-  updateCardRequest,
-  addCommentRequest,
-  deleteCommentRequest,
-  updateCommentRequest,
-  addVoteRequest,
-  deleteVoteRequest,
 } from "../api/boardService";
 import UseBoardType from "../types/board/useBoard";
-import { decrementVote, incrementVote, setChangesBoard } from "../store/slicer/boardSlicer";
-import { useAppDispatch } from "../store/hooks";
+import { boardState } from "../store/board/atoms/board.atom";
+import { ToastStateEnum } from "../utils/enums/toast-types";
+import useBoardUtils from "./useBoardUtils";
 
 interface AutoFetchProps {
   autoFetchBoard: boolean;
-  autoFetchBoards: boolean;
 }
 
-const useBoard = ({
-  autoFetchBoard = false,
-  autoFetchBoards = false,
-}: AutoFetchProps): UseBoardType => {
-  const router = useRouter();
-  const { data: session } = useSession({ required: false });
-  const userId = session?.user.id;
-  const boardId = String(router.query.boardId);
-  const dispatch = useAppDispatch();
+const useBoard = ({ autoFetchBoard }: AutoFetchProps): UseBoardType => {
+  const { boardId, queryClient, setToastState, router } = useBoardUtils();
 
+  const setBoard = useSetRecoilState(boardState);
   // #region BOARD
 
   const fetchBoard = useQuery(["board", { id: boardId }], () => getBoardRequest(boardId), {
     enabled: autoFetchBoard,
     refetchOnWindowFocus: false,
-  });
-
-  const fetchBoards = useQuery("boards", () => getBoardsRequest(), {
-    enabled: autoFetchBoards,
-    refetchOnWindowFocus: autoFetchBoards,
+    onError: () => {
+      setToastState({ open: true, content: "Error getting the board", type: ToastStateEnum.ERROR });
+    },
   });
 
   const createBoard = useMutation(createBoardRequest, {
@@ -55,155 +35,50 @@ const useBoard = ({
       router.push(`/boards/${data._id}`);
     },
     onError: () => {
-      ToastMessage("Board not created!", "error");
+      setToastState({
+        open: true,
+        content: "Error creating the board",
+        type: ToastStateEnum.ERROR,
+      });
     },
   });
 
   const deleteBoard = useMutation(deleteBoardRequest, {
     onSuccess: () => {
-      ToastMessage("Board deleted!", "success");
-      fetchBoards.refetch();
+      queryClient.invalidateQueries("boards");
+      setToastState({
+        open: true,
+        content: "The board was successfully deleted.",
+        type: ToastStateEnum.SUCCESS,
+      });
     },
     onError: () => {
-      ToastMessage("Board not deleted!", "error");
+      setToastState({
+        open: true,
+        content: "Error deleting the board",
+        type: ToastStateEnum.ERROR,
+      });
     },
   });
 
   const updateBoard = useMutation(updateBoardRequest, {
-    onSuccess: (board: BoardType, variables) => {
-      ToastMessage("Board updated!", "success");
-      if (!variables.boardPage) {
-        fetchBoards.refetch();
-      }
-    },
-    onError: () => {
-      ToastMessage("Board not updated!", "error");
-    },
-  });
-
-  // #endregion
-
-  // #region CARD
-
-  const addCardInColumn = useMutation(addCardRequest, {
-    onSuccess: (board: BoardType) => {
-      dispatch(setChangesBoard({ board, userId }));
-    },
-    onError: () => {
-      fetchBoard.refetch();
-      ToastMessage("Card not inserted!", "error");
-    },
-  });
-
-  const updateCardPosition = useMutation(updateCardPositionRequest, {
-    onSuccess: (board: BoardType) => {
-      dispatch(setChangesBoard({ board, userId }));
-    },
-    onError: () => {
-      fetchBoard.refetch();
-      ToastMessage("Board not updated!", "error");
-    },
-  });
-
-  const updateCard = useMutation(updateCardRequest, {
-    onSuccess: (board: BoardType) => {
-      dispatch(setChangesBoard({ board, userId }));
-    },
-    onError: () => {
-      fetchBoard.refetch();
-      ToastMessage("Card not updated!", "error");
-    },
-  });
-
-  const deleteCard = useMutation(deleteCardRequest, {
-    onSuccess: (board: BoardType) => {
-      dispatch(setChangesBoard({ board, userId }));
-    },
-    onError: () => {
-      fetchBoard.refetch();
-      ToastMessage("Card not deleted!", "error");
-    },
-  });
-
-  // #endregion
-
-  // #region COMMENT
-
-  const addCommentInCard = useMutation(addCommentRequest, {
-    onSuccess: (board: BoardType) => {
-      dispatch(setChangesBoard({ board, userId }));
-    },
-    onError: () => {
-      fetchBoard.refetch();
-      ToastMessage("Comment not inserted!", "error");
-    },
-  });
-
-  const deleteComment = useMutation(deleteCommentRequest, {
-    onSuccess: (board: BoardType) => {
-      dispatch(setChangesBoard({ board, userId }));
-    },
-    onError: () => {
-      fetchBoard.refetch();
-      ToastMessage("Comment not deleted!", "error");
-    },
-  });
-
-  const updateComment = useMutation(updateCommentRequest, {
-    onSuccess: (board: BoardType) => {
-      dispatch(setChangesBoard({ board, userId }));
-    },
-    onError: () => {
-      fetchBoard.refetch();
-      ToastMessage("Comment not updated!", "error");
-    },
-  });
-
-  // #endregion
-
-  // #region VOTE
-  // #region VOTES
-
-  const addVote = useMutation(addVoteRequest, {
-    onSuccess: (board: BoardType) => {
-      dispatch(incrementVote());
-      dispatch(setChangesBoard({ board, userId }));
-    },
-    onError: () => {
-      fetchBoard.refetch();
-      ToastMessage("Vote not inserted!", "error");
-    },
-  });
-
-  const deleteVote = useMutation(deleteVoteRequest, {
     onSuccess: (board: BoardType) => {
-      dispatch(decrementVote());
-      dispatch(setChangesBoard({ board, userId }));
+      setBoard(board);
     },
     onError: () => {
-      fetchBoard.refetch();
-      ToastMessage("Vote not deleted!", "error");
+      setToastState({
+        open: true,
+        content: "Error updating the board",
+        type: ToastStateEnum.ERROR,
+      });
     },
   });
 
-  // #endregion
-
-  // #endregion
   return {
     fetchBoard,
-    fetchBoards,
     createBoard,
     deleteBoard,
     updateBoard,
-    addCardInColumn,
-    updateCard,
-    deleteCard,
-    updateCardPosition,
-    addCommentInCard,
-    deleteComment,
-    updateComment,
-    addVote,
-    deleteVote,
   };
 };
 
diff --git a/frontend/hooks/useBoardUtils.tsx b/frontend/hooks/useBoardUtils.tsx
new file mode 100644
index 000000000..af4746a1e
--- /dev/null
+++ b/frontend/hooks/useBoardUtils.tsx
@@ -0,0 +1,28 @@
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useQueryClient } from "react-query";
+import { useSetRecoilState } from "recoil";
+import { toastState } from "../store/toast/atom/toast.atom";
+
+const useBoardUtils = () => {
+  const router = useRouter();
+  const { data: session } = useSession({ required: false });
+
+  const queryClient = useQueryClient();
+
+  const userId = session?.user.id;
+
+  const setToastState = useSetRecoilState(toastState);
+
+  const boardId = String(router.query.boardId);
+
+  return {
+    userId,
+    boardId,
+    queryClient,
+    setToastState,
+    router,
+  };
+};
+
+export default useBoardUtils;
diff --git a/frontend/hooks/useCards.tsx b/frontend/hooks/useCards.tsx
new file mode 100644
index 000000000..a087708df
--- /dev/null
+++ b/frontend/hooks/useCards.tsx
@@ -0,0 +1,56 @@
+import { useMutation } from "react-query";
+import {
+  addCardRequest,
+  updateCardPositionRequest,
+  updateCardRequest,
+  deleteCardRequest,
+  mergeCardsRequest,
+  removeFromMergeRequest,
+} from "../api/boardService";
+
+const useCards = () => {
+  const addCardInColumn = useMutation(addCardRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  const updateCardPosition = useMutation(updateCardPositionRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  const updateCard = useMutation(updateCardRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  const deleteCard = useMutation(deleteCardRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  // #region MERGE_CARDS
+
+  const mergeCards = useMutation(mergeCardsRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  const removeFromMergeCard = useMutation(removeFromMergeRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  // #endregion
+
+  return {
+    addCardInColumn,
+    updateCardPosition,
+    updateCard,
+    deleteCard,
+    mergeCards,
+    removeFromMergeCard,
+  };
+};
+
+export default useCards;
diff --git a/frontend/hooks/useComments.tsx b/frontend/hooks/useComments.tsx
new file mode 100644
index 000000000..5fec3ed66
--- /dev/null
+++ b/frontend/hooks/useComments.tsx
@@ -0,0 +1,27 @@
+import { useMutation } from "react-query";
+import { addCommentRequest, deleteCommentRequest, updateCommentRequest } from "../api/boardService";
+
+const useComments = () => {
+  const addCommentInCard = useMutation(addCommentRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  const deleteComment = useMutation(deleteCommentRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  const updateComment = useMutation(updateCommentRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  return {
+    addCommentInCard,
+    deleteComment,
+    updateComment,
+  };
+};
+
+export default useComments;
diff --git a/frontend/hooks/useVotes.tsx b/frontend/hooks/useVotes.tsx
new file mode 100644
index 000000000..6ba58564d
--- /dev/null
+++ b/frontend/hooks/useVotes.tsx
@@ -0,0 +1,21 @@
+import { useMutation } from "react-query";
+import { addVoteRequest, deleteVoteRequest } from "../api/boardService";
+
+const useVotes = () => {
+  const addVote = useMutation(addVoteRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  const deleteVote = useMutation(deleteVoteRequest, {
+    onSuccess: () => {},
+    onError: () => {},
+  });
+
+  return {
+    addVote,
+    deleteVote,
+  };
+};
+
+export default useVotes;
diff --git a/frontend/package.json b/frontend/package.json
index e3562bf1f..147a9dcd8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,49 +18,49 @@
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-alert-dialog": "^0.1.7",
     "@radix-ui/react-avatar": "^0.1.4",
+    "@radix-ui/react-checkbox": "^0.1.5",
     "@radix-ui/react-dialog": "^0.1.7",
     "@radix-ui/react-dropdown-menu": "^0.1.6",
     "@radix-ui/react-hover-card": "^0.1.5",
     "@radix-ui/react-label": "^0.1.5",
+    "@radix-ui/react-separator": "^0.1.4",
     "@radix-ui/react-tabs": "^0.1.5",
     "@radix-ui/react-toast": "^0.1.1",
-    "@reduxjs/toolkit": "^1.8.1",
+    "@radix-ui/react-tooltip": "^0.1.7",
+    "@react-forked/dnd": "^14.0.2",
     "@stitches/react": "^1.2.7",
     "axios": "^0.26.1",
-    "cypress": "^9.5.3",
+    "cypress": "^9.5.4",
     "dotenv": "^16.0.0",
     "fast-json-patch": "^3.1.1",
-    "formik": "^2.2.9",
     "next": "^12.1.4",
     "next-auth": "4.3.1",
     "npm": "^8.6.0",
     "react": "^18.0.0",
-    "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.29.0",
     "react-loader-spinner": "^6.0.0-0",
+    "react-pro-sidebar": "^0.7.1",
     "react-query": "^3.34.19",
     "react-redux": "^7.2.8",
     "react-toastify": "^8.2.0",
     "recoil": "^0.7.0",
     "socket.io-client": "^4.4.1",
-    "uuid": "^8.3.2",
     "webpack": "^5.71.0",
-    "yup": "^0.32.11",
     "zod": "^3.14.4"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.9",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^13.0.1",
     "@types/jest": "^27.4.1",
-    "@types/react": "17.0.43",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/react-dom": "^17.0.14",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.18.0",
-    "@typescript-eslint/parser": "^5.18.0",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@typescript-eslint/parser": "^5.19.0",
     "babel-jest": "^27.5.1",
-    "eslint": "^8.12.0",
+    "babel-loader": "^8.2.4",
+    "eslint": "^8.13.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-airbnb-typescript-prettier": "^5.0.0",
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
index 8a3793a52..93fab2db2 100644
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@@ -1,18 +1,38 @@
-import type { AppProps } from "next/app";
-import { useState } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { AppProps } from "next/app";
+import { ReactElement, ReactNode } from "react";
+import { ReactQueryDevtools } from "react-query/devtools";
+import { Hydrate, QueryClient, QueryClientProvider } from "react-query";
 import { SessionProvider } from "next-auth/react";
-import { Hydrate } from "react-query/hydration";
-import { Provider } from "react-redux";
 import Head from "next/head";
+import { NextPage } from "next";
+import { RecoilRoot } from "recoil";
+import { useRouter } from "next/router";
 import globalStyles from "../styles/globals";
-import store from "../store/store";
 import { JWT_EXPIRATION_TIME } from "../utils/constants";
-import { ToastProvider, ToastViewport } from "../components/Primitives/Toast";
+import Toast, { ToastProvider, ToastViewport } from "../components/Primitives/Toast";
+import { ROUTES } from "../utils/routes";
 
-function App({ Component, pageProps: { session, ...pageProps } }: AppProps): JSX.Element {
-  const [queryClient] = useState(() => new QueryClient());
+type NextPageWithLayout = NextPage & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
 
+type AppPropsWithLayout = AppProps & {
+  Component: NextPageWithLayout;
+};
+
+function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout): JSX.Element {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: 1,
+        suspense: true,
+      },
+    },
+  });
+
+  const getLayout = Component.getLayout ?? ((page) => page);
+
+  const router = useRouter();
   globalStyles();
   return (
     <>
@@ -23,13 +43,17 @@ function App({ Component, pageProps: { session, ...pageProps } }: AppProps): JSX
       <SessionProvider session={session} refetchInterval={JWT_EXPIRATION_TIME - 5}>
         <QueryClientProvider client={queryClient}>
           <Hydrate state={pageProps.dehydratedState}>
-            <Provider store={store}>
-              <ToastProvider duration={100000}>
-                <Component {...pageProps} />
-                <ToastViewport />
-              </ToastProvider>
-            </Provider>
+            <ToastProvider duration={100000}>
+              <RecoilRoot>
+                {getLayout(<Component {...pageProps} />)}
+                <Toast />
+              </RecoilRoot>
+              <ToastViewport
+                css={{ paddingRight: router.asPath === ROUTES.START_PAGE_ROUTE ? 162 : 56 }}
+              />
+            </ToastProvider>
           </Hydrate>
+          <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
       </SessionProvider>
     </>
diff --git a/frontend/pages/_document.tsx b/frontend/pages/_document.tsx
index 64592b1a0..2aa298f4e 100644
--- a/frontend/pages/_document.tsx
+++ b/frontend/pages/_document.tsx
@@ -1,24 +1,22 @@
-import NextDocument, { Html, Head, Main, NextScript } from "next/document";
+import { Html, Head, Main, NextScript } from "next/document";
 import { getCssText } from "../stitches.config";
 
-export default class Document extends NextDocument {
-  render(): JSX.Element {
-    return (
-      <Html>
-        <Head>
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
-          <link
-            href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"
-            rel="stylesheet"
-          />
-          <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"
+          rel="stylesheet"
+        />
+        <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
 }
diff --git a/frontend/pages/api/auth/[...nextauth].tsx b/frontend/pages/api/auth/[...nextauth].tsx
index cfe51499d..e976d2dfa 100644
--- a/frontend/pages/api/auth/[...nextauth].tsx
+++ b/frontend/pages/api/auth/[...nextauth].tsx
@@ -3,10 +3,10 @@ import CredentialsProvider from "next-auth/providers/credentials";
 import AzureADProvider from "next-auth/providers/azure-ad";
 import { JWT } from "next-auth/jwt";
 import {
-  CLIENTID,
-  CLIENTSECRET,
+  CLIENT_ID,
+  CLIENT_SECRET,
   SECRET,
-  TENANTID,
+  TENANT_ID,
   UNDEFINED,
   NEXT_PUBLIC_NEXTAUTH_URL,
   REFRESH_TOKEN_ERROR,
@@ -33,9 +33,9 @@ async function getNewAccessToken(prevToken: JWT) {
 export default NextAuth({
   providers: [
     AzureADProvider({
-      clientId: CLIENTID ?? UNDEFINED,
-      clientSecret: CLIENTSECRET ?? UNDEFINED,
-      tenantId: TENANTID,
+      clientId: CLIENT_ID ?? UNDEFINED,
+      clientSecret: CLIENT_SECRET ?? UNDEFINED,
+      tenantId: TENANT_ID,
     }),
     CredentialsProvider({
       name: "Credentials",
@@ -51,11 +51,13 @@ export default NextAuth({
         const data: User = await login(loginUser);
         if (data) {
           const token = {
-            name: data.name,
+            firstName: data.firstName,
+            lastName: data.lastName,
             email: data.email,
             id: data.id,
             accessToken: data.accessToken?.token,
             refreshToken: data.refreshToken?.token,
+            isSAdmin: data.isSAdmin,
           };
           return token;
         }
@@ -74,17 +76,21 @@ export default NextAuth({
   callbacks: {
     async signIn({ account, user }) {
       if (account.provider === "azure-ad") {
-        const { access_token: accessToken } = account;
-        const data = await createOrLoginUserAzure(accessToken ?? "");
+        const { access_token: azureAccessToken } = account;
+        const data = await createOrLoginUserAzure(azureAccessToken ?? "");
         if (!data) return false;
-        user.name = data.name;
-        user.accessToken = data.accessToken.token;
-        user.accessTokenExpiresIn = data.accessToken.expiresIn;
-        user.refreshToken = data.refreshToken.token;
-        user.email = data.email;
+        const { firstName, lastName, accessToken, refreshToken, email, id, isSAdmin } = data;
+        user.firstName = firstName;
+        user.lastName = lastName;
+        user.accessToken = accessToken.token;
+        user.accessTokenExpiresIn = accessToken.expiresIn;
+        user.refreshToken = refreshToken.token;
+        user.email = email;
         user.strategy = "azure";
-        user.id = data.id;
+        user.id = id;
+        user.isSAdmin = isSAdmin;
       }
+
       return true;
     },
     async jwt({ token, user, account }) {
@@ -94,10 +100,12 @@ export default NextAuth({
           accessTokenExpires: Date.now() + +user.accessTokenExpiresIn * 1000,
           refreshToken: user.refreshToken,
           id: user.id,
-          name: token?.name,
-          email: token?.email,
-          strategy: user.strategy,
+          firstName: user.firstName,
+          lastName: user.lastName,
+          email: token.email,
+          strategy: user.strategy ?? "local",
           error: "",
+          isSAdmin: user.isSAdmin,
         };
       }
       if (Date.now() < token.accessTokenExpires - 5000) {
@@ -108,7 +116,8 @@ export default NextAuth({
     async session({ session, token }) {
       const newSession: Session = { ...session };
       if (token) {
-        newSession.user.name = token.name;
+        newSession.user.firstName = token.firstName;
+        newSession.user.lastName = token.lastName;
         newSession.accessToken = token.accessToken;
         newSession.refreshToken = token.refreshToken;
         newSession.user.email = token.email;
@@ -116,6 +125,7 @@ export default NextAuth({
         newSession.error = token.error;
         newSession.expires = token.accessTokenExpires;
         newSession.strategy = token.strategy;
+        newSession.isSAdmin = token.isSAdmin;
       }
       return newSession;
     },
diff --git a/frontend/pages/boards/[boardId].tsx b/frontend/pages/boards/[boardId].tsx
index 7b8bc460e..8f2e9be52 100644
--- a/frontend/pages/boards/[boardId].tsx
+++ b/frontend/pages/boards/[boardId].tsx
@@ -4,7 +4,7 @@ import { QueryClient, dehydrate } from "react-query";
 import { useRouter } from "next/router";
 import { io, Socket } from "socket.io-client";
 import { useSession } from "next-auth/react";
-import { DragDropContext, DropResult, ResponderProvided } from "react-beautiful-dnd";
+import { DragDropContext, DropResult, ResponderProvided } from "@react-forked/dnd";
 import Flex from "../../components/Primitives/Flex";
 import Text from "../../components/Primitives/Text";
 import { styled } from "../../stitches.config";
@@ -12,17 +12,10 @@ import { ERROR_LOADING_DATA, NEXT_PUBLIC_BACKEND_URL } from "../../utils/constan
 import ColumnType from "../../types/column";
 import Column from "../../components/Board/Column/Column";
 import useBoard from "../../hooks/useBoard";
-import { useAppDispatch, useAppSelector } from "../../store/hooks";
-import {
-  clearBoard,
-  setBoard,
-  setChangesBoard,
-  setNewCardPosition,
-} from "../../store/slicer/boardSlicer";
-import BoardType from "../../types/board/board";
 import UpdateCardPositionDto from "../../types/card/updateCardPosition.dto";
 import { getBoardRequest } from "../../api/boardService";
 import requireAuthentication from "../../components/HOC/requireAuthentication";
+import useCards from "../../hooks/useCards";
 
 const Container = styled(Flex, {
   alignItems: "flex-start",
@@ -86,19 +79,21 @@ const Board: React.FC = () => {
   const userId = session?.user?.id;
   const socketClient = useRef<Socket>();
   const socketId = socketClient.current?.id ?? undefined;
-  const { updateCardPosition, fetchBoard } = useBoard({
+
+  const { updateCardPosition } = useCards();
+
+  const { fetchBoard } = useBoard({
     autoFetchBoard: true,
-    autoFetchBoards: false,
   });
-  const { data, status } = fetchBoard;
-  const board = useAppSelector((state) => state.board.value);
-  const dispatch = useAppDispatch();
+  const { status } = fetchBoard;
+  const board = {};
+  // const dispatch = useAppDispatch();
 
-  useEffect(() => {
-    if (data && !board) {
-      dispatch(setBoard({ board: data, userId }));
-    }
-  }, [board, data, dispatch, userId]);
+  // useEffect(() => {
+  //   if (data && !board) {
+  //     dispatch(setBoard({ board: data, userId }));
+  //   }
+  // }, [board, data, dispatch, userId]);
 
   useEffect(() => {
     const newSocket: Socket = io(NEXT_PUBLIC_BACKEND_URL ?? "http://127.0.0.1:3200", {
@@ -109,19 +104,19 @@ const Board: React.FC = () => {
       newSocket.emit("join", { boardId });
     });
 
-    newSocket.on("updateAllBoard", (payload: BoardType) => {
-      dispatch(setChangesBoard({ board: payload }));
-    });
+    // newSocket.on("updateAllBoard", (payload: BoardType) => {
+    //   dispatch(setChangesBoard({ board: payload }));
+    // });
     socketClient.current = newSocket;
-  }, [boardId, dispatch]);
+  }, [boardId]);
 
   useEffect(
     () => () => {
       if (socketClient.current) socketClient.current?.close();
       socketClient.current = undefined;
-      dispatch(clearBoard());
+      // dispatch(clearBoard());
     },
-    [dispatch]
+    []
   );
 
   const onDragEnd = (result: DropResult, provided: ResponderProvided) => {
@@ -133,7 +128,7 @@ const Board: React.FC = () => {
 
     provided.announce(message);
 
-    if (!board?._id || !socketId || !result) return;
+    // if (!board?._id || !socketId || !result) return;
     const { destination, source, combine, draggableId } = result;
 
     if (!source) return;
@@ -161,28 +156,23 @@ const Board: React.FC = () => {
         newPosition: destinationIndex,
         cardPosition: sourceIndex,
         cardId: draggableId,
-        boardId: board._id,
-        socketId,
+        boardId: "1", // board._id
+        socketId: "aaa",
       };
-      dispatch(setNewCardPosition(changes));
+      // dispatch(setNewCardPosition(changes));
       updateCardPosition.mutate(changes);
     }
   };
 
   if (status === "loading") return <Text>Loading ...</Text>;
   if (board && userId) {
-    if (!board.isPublic) {
-      return <Text>Locked</Text>;
-    }
+    // if (!board.isPublic) {
+    //   return <Text>Locked</Text>;
+    // }
     return (
       <Container>
         <DragDropContext onDragEnd={onDragEnd}>
-          <ColumnList
-            columns={board.columns}
-            boardId={boardId}
-            userId={userId}
-            socketId={socketId ?? ""}
-          />
+          <ColumnList columns={[]} boardId={boardId} userId={userId} socketId={socketId ?? ""} />
         </DragDropContext>
         <ContainerSideBar
           id="sidebar"
diff --git a/frontend/pages/dashboard/index.tsx b/frontend/pages/dashboard/index.tsx
index c3a0784a8..fb1da6eb3 100644
--- a/frontend/pages/dashboard/index.tsx
+++ b/frontend/pages/dashboard/index.tsx
@@ -1,49 +1,21 @@
-import { GetServerSideProps, GetServerSidePropsContext } from "next";
-import { dehydrate, QueryClient } from "react-query";
-import { useState } from "react";
-import CreateBoard from "../../components/Dashboard/CreateBoardModal";
+import React, { ReactElement } from "react";
+import { GetServerSideProps } from "next";
 import { styled } from "../../stitches.config";
 import Flex from "../../components/Primitives/Flex";
-import BoardsList from "../../components/Dashboard/BoardList/BoardsList";
-import Text from "../../components/Primitives/Text";
-import { ERROR_LOADING_DATA } from "../../utils/constants";
-import useBoard from "../../hooks/useBoard";
-import { getBoardsRequest } from "../../api/boardService";
 import requireAuthentication from "../../components/HOC/requireAuthentication";
+import Layout from "../../components/Layout/Layout";
 
-const Container = styled("div", Flex);
-
-export const getServerSideProps: GetServerSideProps = requireAuthentication(
-  async (context: GetServerSidePropsContext) => {
-    const queryClient = new QueryClient();
-    await queryClient.prefetchQuery("boards", () => getBoardsRequest(context));
-    return {
-      props: {
-        dehydratedState: dehydrate(queryClient),
-      },
-    };
-  }
-);
-
-const Dashboard: React.FC = () => {
-  const { fetchBoards } = useBoard({ autoFetchBoard: false, autoFetchBoards: true });
-  const { data } = fetchBoards;
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleLoading = (state: boolean) => {
-    setIsLoading(state);
+export const getServerSideProps: GetServerSideProps = requireAuthentication(async () => {
+  return {
+    props: {},
   };
+});
 
-  const BoardsListContent = data ? <BoardsList boards={data} /> : <div>{ERROR_LOADING_DATA}</div>;
+const InnerContainer = styled(Flex, { mt: "$40", overflow: "scroll" });
 
-  if (isLoading) return <div>Loading....</div>;
-  return (
-    <Container direction="column" gap="40">
-      <CreateBoard setFetchLoading={handleLoading} />
-      <Text>All boards</Text>
-      {BoardsListContent}
-    </Container>
-  );
+const Dashboard = () => {
+  return <InnerContainer direction="column">Dashboard</InnerContainer>;
 };
 export default Dashboard;
+
+Dashboard.getLayout = (page: ReactElement) => <Layout>{page}</Layout>;
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index f05144a89..4e1f0603a 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -1,9 +1,9 @@
-import type { GetServerSideProps, NextPage } from "next";
+import { GetServerSideProps, NextPage } from "next";
 import { getSession } from "next-auth/react";
 import { useState } from "react";
 import LoginForm from "../components/auth/LoginForm";
 import TroubleLogin from "../components/auth/TroubleLogin";
-import Banner from "../components/Primitives/Banner";
+import Banner from "../components/icons/Banner";
 import Flex from "../components/Primitives/Flex";
 import { TabsRoot, TabsList, TabsTrigger } from "../components/Primitives/Tab";
 import Text from "../components/Primitives/Text";
diff --git a/frontend/public/icons/userIcon.svg b/frontend/public/icons/userIcon.svg
new file mode 100644
index 000000000..90d61d4ba
--- /dev/null
+++ b/frontend/public/icons/userIcon.svg
@@ -0,0 +1,12 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M16.2894 50.4975C27.4777 56.9785 43.5792 50.0697 48.9603 38.3422C54.3414 26.6148 51.6153 17.763 40.4269 11.282C29.2386 4.80101 16.0551 4.43708 10.674 16.1645C5.2929 27.8919 5.10101 44.0166 16.2894 50.4975Z"
+    fill="#F3FD58"
+  />
+  <path
+    d="M43.7343 42.62C39.5044 47.2775 33.1122 50.0308 26.697 50.4335C20.2829 50.8361 13.9122 48.8867 9.68225 44.2293C5.46258 39.5831 4.54963 33.5357 5.78027 27.4261C7.01216 21.3103 10.3871 15.1799 14.665 10.4696C18.8677 5.84206 23.9626 4.60018 29.0842 5.66652C34.235 6.73895 39.4386 10.1559 43.7473 14.9001C48.0511 19.639 50.1339 24.2389 50.1243 28.7811C50.1147 33.3238 48.0122 37.9098 43.7343 42.62Z"
+    stroke="white"
+  />
+</svg>
diff --git a/frontend/stitches.config.ts b/frontend/stitches.config.ts
index b9bac4fa6..894a086f1 100644
--- a/frontend/stitches.config.ts
+++ b/frontend/stitches.config.ts
@@ -66,8 +66,8 @@ export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme
         "0-35": "-0.021875rem",
         "0-4": "-0.025rem",
         "-1": "-0.0625rem",
-        "2": "-0.125rem",
-        "3": "-0.1875rem",
+        "-2": "-0.125rem",
+        "-3": "-0.1875rem",
         "1": "0.0625rem",
       },
       space: {
@@ -76,27 +76,39 @@ export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme
         6: "0.375rem",
         8: "0.5rem",
         10: "0.625rem",
+        11: "0.6875rem",
         12: "0.750rem",
         14: "0.875rem",
         16: "1rem",
         17: "1.0625rem",
         18: "1.125rem",
         20: "1.25rem",
+        22: "1.375rem",
         24: "1.5rem",
         26: "1.625rem",
         28: "1.75rem",
         32: "2rem",
+        36: "2.25rem",
+        37: "2.3125rem",
         40: "2.5rem",
+        44: "2.75rem",
         48: "3rem",
         50: "3.125rem",
         54: "3.375rem",
         56: "3.5rem",
         57: "3.5625rem",
         62: "3.875rem",
+        64: "4rem",
+        73: "4.5625rem",
         74: "4.625rem",
+        76: "4.75rem",
+        92: "5.75rem",
+        100: "6.25rem",
         106: "6.625rem",
+        152: "9.5rem",
         162: "10.125rem",
         202: "12.625rem",
+        384: "24rem",
       },
       sizes: {
         2: "0.125rem",
@@ -107,20 +119,29 @@ export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme
         12: "0.75rem",
         14: "0.875rem",
         16: "1rem",
+        18: "1.125rem",
+        19: "1.11875rem",
         20: "1.25rem",
         24: "1.50rem",
         32: "2rem",
         36: "2.25rem",
+        37: "2.3125rem",
         40: "2.5rem",
         48: "3rem",
         56: "3.5rem",
+        58: "3.625rem",
         60: "3.75rem",
         64: "4rem",
         74: "4.625rem",
-        130: "5rem",
+        76: "4.75rem",
+        92: "5.75rem",
+        100: "6.25rem",
+        130: "8.125rem",
         160: "10rem",
         220: "13.75rem",
+        226: "14.125rem",
         353: "22.063rem",
+        384: "24rem",
         400: "25rem",
         455: "28.4375rem",
         500: "31.25rem",
diff --git a/frontend/store/board/atoms/board.atom.tsx b/frontend/store/board/atoms/board.atom.tsx
new file mode 100644
index 000000000..317a7dc62
--- /dev/null
+++ b/frontend/store/board/atoms/board.atom.tsx
@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const boardState = atom({
+  key: "board",
+  default: {},
+});
diff --git a/frontend/store/board/selectors/get-board.selector.tsx b/frontend/store/board/selectors/get-board.selector.tsx
new file mode 100644
index 000000000..cd489cdf8
--- /dev/null
+++ b/frontend/store/board/selectors/get-board.selector.tsx
@@ -0,0 +1,9 @@
+import { selector } from "recoil";
+import { boardState } from "../atoms/board.atom";
+
+export const getBoardSelector = selector({
+  key: "getBoard", // unique ID (with respect to other atoms/selectors)
+  get: ({ get }) => {
+    return get(boardState);
+  },
+});
diff --git a/frontend/store/createBoard/atoms/create-board.atom.tsx b/frontend/store/createBoard/atoms/create-board.atom.tsx
new file mode 100644
index 000000000..5619c2ee5
--- /dev/null
+++ b/frontend/store/createBoard/atoms/create-board.atom.tsx
@@ -0,0 +1,6 @@
+import { atom } from "recoil";
+
+export const createBoardState = atom({
+  key: "showCreateBoard",
+  default: false,
+});
diff --git a/frontend/store/hooks.ts b/frontend/store/hooks.ts
deleted file mode 100644
index f151d5363..000000000
--- a/frontend/store/hooks.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
-import type { RootState, AppDispatch } from "./store";
-
-export const useAppDispatch = () => useDispatch<AppDispatch>();
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/frontend/store/slicer/boardSlicer.tsx b/frontend/store/slicer/boardSlicer.tsx
deleted file mode 100644
index cf96d5b0b..000000000
--- a/frontend/store/slicer/boardSlicer.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as jsonPatch from "fast-json-patch";
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { RootState } from "../store";
-import BoardType from "../../types/board/board";
-import { Nullable } from "../../types/common";
-import BoardChanges from "../../types/board/boardChanges";
-import UpdateCardPositionDto from "../../types/card/updateCardPosition.dto";
-import { handleUpdateCardPosition } from "../../helper/board/transformBoard";
-import countVotes from "../../helper/board/votes";
-
-interface BoardState {
-  value: Nullable<BoardType>;
-  votes: number;
-}
-
-interface BoardAction {
-  board: BoardType;
-  userId?: string;
-}
-
-const initialState: BoardState = {
-  value: undefined,
-  votes: 0,
-};
-
-export const boardSlice = createSlice({
-  name: "board",
-  initialState,
-  reducers: {
-    setBoard: (state, action: PayloadAction<BoardAction>) => {
-      const { board, userId } = action.payload;
-      state.value = board;
-      if (userId) state.votes = countVotes(board, userId);
-    },
-    setChangesBoard: (state, action: PayloadAction<BoardAction>) => {
-      const { board, userId } = action.payload;
-      if (state.value) {
-        const operation = jsonPatch.compare(state.value, board);
-        if (operation.length > 0)
-          state.value = jsonPatch.applyPatch(state.value, operation).newDocument;
-        if (userId) state.votes = countVotes(board, userId);
-      }
-    },
-    clearBoard: (state) => {
-      state.value = undefined;
-    },
-    setNewCardPosition: (state, action: PayloadAction<BoardChanges>) => {
-      if (state.value) {
-        const newBoard = handleUpdateCardPosition(
-          state.value,
-          action.payload as unknown as UpdateCardPositionDto
-        );
-        state.value = newBoard;
-      }
-    },
-    setVotes: (state, action: PayloadAction<number>) => {
-      state.votes = action.payload;
-    },
-    incrementVote: (state) => {
-      state.votes += 1;
-    },
-    decrementVote: (state) => {
-      state.votes -= 1;
-    },
-  },
-});
-
-export const {
-  setBoard,
-  setNewCardPosition,
-  setChangesBoard,
-  clearBoard,
-  incrementVote,
-  decrementVote,
-} = boardSlice.actions;
-
-export const selectBoard = (state: RootState): BoardState => state.board;
-
-export default boardSlice.reducer;
diff --git a/frontend/store/store.tsx b/frontend/store/store.tsx
deleted file mode 100644
index 6ec3f7b38..000000000
--- a/frontend/store/store.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { configureStore } from "@reduxjs/toolkit";
-import boardSlicer from "./slicer/boardSlicer";
-
-const store = configureStore({
-  reducer: {
-    board: boardSlicer,
-  },
-});
-
-export default store;
-
-export const actualVotes = () => store.getState().board.votes;
-export const maxBoardVotes = () => store.getState().board.value?.maxVotes ?? 0;
-export const selectBoard = (state: RootState) => state.board;
-
-export type RootState = ReturnType<typeof store.getState>;
-export type AppDispatch = typeof store.dispatch;
diff --git a/frontend/store/toast/atom/toast.atom.tsx b/frontend/store/toast/atom/toast.atom.tsx
new file mode 100644
index 000000000..75142adda
--- /dev/null
+++ b/frontend/store/toast/atom/toast.atom.tsx
@@ -0,0 +1,11 @@
+import { atom } from "recoil";
+import { ToastStateEnum } from "../../../utils/enums/toast-types";
+
+export const toastState = atom({
+  key: "toast",
+  default: {
+    open: false,
+    type: ToastStateEnum.SUCCESS,
+    content: "",
+  },
+});
diff --git a/frontend/store/user/atoms/user.atom.tsx b/frontend/store/user/atoms/user.atom.tsx
new file mode 100644
index 000000000..229863d60
--- /dev/null
+++ b/frontend/store/user/atoms/user.atom.tsx
@@ -0,0 +1,12 @@
+import { atom } from "recoil";
+
+export const userState = atom({
+  key: "user",
+  default: {
+    firstName: "",
+    lastName: "",
+    email: "",
+    id: "",
+    strategy: "",
+  },
+});
diff --git a/frontend/store/user/selectors/get-user.selector.tsx b/frontend/store/user/selectors/get-user.selector.tsx
new file mode 100644
index 000000000..c131ad4d3
--- /dev/null
+++ b/frontend/store/user/selectors/get-user.selector.tsx
@@ -0,0 +1,9 @@
+import { selector } from "recoil";
+import { userState } from "../atoms/user.atom";
+
+export const getUserSelector = selector({
+  key: "getUser", // unique ID (with respect to other atoms/selectors)
+  get: ({ get }) => {
+    return get(userState);
+  },
+});
diff --git a/frontend/styles/colors/box-shadow.colors.ts b/frontend/styles/colors/box-shadow.colors.ts
new file mode 100644
index 000000000..38308de2f
--- /dev/null
+++ b/frontend/styles/colors/box-shadow.colors.ts
@@ -0,0 +1,13 @@
+export const boxShadow = {
+  default: "0",
+  disabled: "0",
+  valid: "0px 0px 0px 2px var(--colors-successLightest)",
+  error: "0px 0px 0px 2px var(--colors-dangerLightest)",
+};
+
+export const boxShadowFocus = {
+  default: "0px 0px 0px 2px var(--colors-primaryLightest)",
+  disabled: "0",
+  valid: "0px 0px 0px 2px var(--colors-successLightest)",
+  error: "0px 0px 0px 2px var(--colors-dangerLightest)",
+};
diff --git a/frontend/styles/colors/bubble.colors.ts b/frontend/styles/colors/bubble.colors.ts
new file mode 100644
index 000000000..5223b309e
--- /dev/null
+++ b/frontend/styles/colors/bubble.colors.ts
@@ -0,0 +1,11 @@
+export const bubbleColors: { [key: string]: string } = {
+  highlight1Base: "successDark",
+  highlight1Lighter: "successBase",
+  highlight2Base: "highlight2Dark",
+  highlight2Lighter: "highlight2Darkest",
+  highlight3Base: "highlight3Darkest",
+  highlight3Lighter: "highlight3Darker",
+  highlight4Lighter: "highlight4Base",
+  secondaryBase: "secondaryDarkest",
+  secondaryLighter: "secondaryDarker",
+};
diff --git a/frontend/styles/colors/highlight2.colors.ts b/frontend/styles/colors/highlight2.colors.ts
index 234fd3c5e..c27e646f2 100644
--- a/frontend/styles/colors/highlight2.colors.ts
+++ b/frontend/styles/colors/highlight2.colors.ts
@@ -1,6 +1,7 @@
 const highlight2Colors = {
   highlight2Base: "#CF97FF",
   highlight2Dark: "#A235FF",
+  highlight2Darkest: "#8000ED",
   highlight2Light: "#DEB7FF",
   highlight2Lighter: "#ECD5FF",
   highlight2Lightest: "#F8EFFF",
diff --git a/frontend/styles/colors/highlight3.colors.ts b/frontend/styles/colors/highlight3.colors.ts
index 372d41234..a10a08479 100644
--- a/frontend/styles/colors/highlight3.colors.ts
+++ b/frontend/styles/colors/highlight3.colors.ts
@@ -4,6 +4,8 @@ const highlight3Colors = {
   highlight3Light: "#9BFDFA",
   highlight3Lighter: "#CDFFFE",
   highlight3Lightest: "#F2FFFF",
+  highlight3Darker: "#089490",
+  highlight3Darkest: "#00807C",
 };
 
 export default highlight3Colors;
diff --git a/frontend/styles/colors/outline.colors.ts b/frontend/styles/colors/outline.colors.ts
new file mode 100644
index 000000000..0393314e6
--- /dev/null
+++ b/frontend/styles/colors/outline.colors.ts
@@ -0,0 +1,12 @@
+export const outlineColor = {
+  default: "$primary200",
+  disabled: "$primary100",
+  valid: "$success700",
+  error: "$danger700",
+};
+export const outlineFocus = {
+  default: "1px solid $primary400",
+  disabled: "1px solid $primary100",
+  valid: "1px solid $succe ss700",
+  error: "1px solid $danger700",
+};
diff --git a/frontend/styles/colors/primary.colors.ts b/frontend/styles/colors/primary.colors.ts
index c9995daab..6431cb376 100644
--- a/frontend/styles/colors/primary.colors.ts
+++ b/frontend/styles/colors/primary.colors.ts
@@ -11,6 +11,8 @@ const primaryColors = {
   primary400: "#434D5A",
   primary500: "#2F3742",
   primary600: "#212832",
+  primary700: "#141A22",
+  primary800: "#060D16",
 };
 
 export default primaryColors;
diff --git a/frontend/styles/colors/secondary.colors.ts b/frontend/styles/colors/secondary.colors.ts
index 3f38ad21e..d47d4e6cd 100644
--- a/frontend/styles/colors/secondary.colors.ts
+++ b/frontend/styles/colors/secondary.colors.ts
@@ -4,6 +4,8 @@ const secondaryColors = {
   secondaryLight: "#F6FF67",
   secondaryLighter: "#FBFFB9",
   secondaryLightest: "#FEFFEC",
+  secondaryDarkest: "#857F00",
+  secondaryDarker: "#88830F",
 };
 
 export default secondaryColors;
diff --git a/frontend/types/board/mergeCard.dto.ts b/frontend/types/board/mergeCard.dto.ts
new file mode 100644
index 000000000..a104a22cb
--- /dev/null
+++ b/frontend/types/board/mergeCard.dto.ts
@@ -0,0 +1,17 @@
+export default interface MergeCardsDto {
+  colIdOfCardGroup: string;
+
+  columnIdOfCard: string;
+
+  cardId: string;
+
+  boardId: string;
+
+  cardGroupId: string;
+
+  socketId: string;
+
+  userId: string;
+
+  cardPosition: number;
+}
diff --git a/frontend/types/board/useBoard.ts b/frontend/types/board/useBoard.ts
index b6517797d..a880b8703 100644
--- a/frontend/types/board/useBoard.ts
+++ b/frontend/types/board/useBoard.ts
@@ -1,28 +1,10 @@
 import { UseMutationResult, UseQueryResult } from "react-query";
 import BoardType, { BoardToAdd } from "./board";
 import UpdateBoardDto from "./updateBoard";
-import UpdateCardPositionDto from "../card/updateCardPosition.dto";
-import AddCardDto from "../card/addCard.dto";
-import UpdateCardDto from "../card/updateCard.dto";
-import DeleteCardDto from "../card/deleteCard.dto";
-import AddCommentDto from "../comment/addComment.dto";
-import DeleteCommentDto from "../comment/deleteComment.dto";
-import UpdateCommentDto from "../comment/updateComment.dto";
-import VoteDto from "./vote/vote.dto";
 
 export default interface UseBoardType {
   createBoard: UseMutationResult<BoardType, unknown, BoardToAdd, unknown>;
   updateBoard: UseMutationResult<BoardType, unknown, UpdateBoardDto, unknown>;
   deleteBoard: UseMutationResult<BoardType, unknown, string, unknown>;
-  fetchBoards: UseQueryResult<BoardType[], unknown>;
   fetchBoard: UseQueryResult<BoardType | null, unknown>;
-  addCardInColumn: UseMutationResult<BoardType, unknown, AddCardDto, unknown>;
-  updateCard: UseMutationResult<BoardType, unknown, UpdateCardDto, unknown>;
-  deleteCard: UseMutationResult<BoardType, unknown, DeleteCardDto, unknown>;
-  updateCardPosition: UseMutationResult<BoardType, unknown, UpdateCardPositionDto, unknown>;
-  addCommentInCard: UseMutationResult<BoardType, unknown, AddCommentDto, unknown>;
-  updateComment: UseMutationResult<BoardType, unknown, UpdateCommentDto, unknown>;
-  deleteComment: UseMutationResult<BoardType, unknown, DeleteCommentDto, unknown>;
-  addVote: UseMutationResult<BoardType, unknown, VoteDto, unknown>;
-  deleteVote: UseMutationResult<BoardType, unknown, VoteDto, unknown>;
 }
diff --git a/frontend/types/card/removeFromCardGroup.dto.ts b/frontend/types/card/removeFromCardGroup.dto.ts
new file mode 100644
index 000000000..b7a2026ce
--- /dev/null
+++ b/frontend/types/card/removeFromCardGroup.dto.ts
@@ -0,0 +1,13 @@
+export default interface RemoveFromCardGroupDto {
+  columnId: string;
+
+  cardId: string;
+
+  boardId: string;
+
+  cardGroupId: string;
+
+  socketId: string;
+
+  newPosition: number;
+}
diff --git a/frontend/types/next-auth.d.ts b/frontend/types/next-auth.d.ts
index 3e9aaccf1..4843ff6e1 100644
--- a/frontend/types/next-auth.d.ts
+++ b/frontend/types/next-auth.d.ts
@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import NextAuth from "next-auth";
 import { JWT } from "next-auth/jwt";
 
 declare module "next-auth" {
   interface Session {
     user: {
-      name: string;
+      firstName: string;
+      lastName: string;
       email: string;
       id: string;
     };
@@ -13,6 +13,7 @@ declare module "next-auth" {
     refreshToken?: string;
     expires: number;
     strategy: string;
+    isSAdmin: boolean;
   }
 
   interface User {
@@ -22,6 +23,9 @@ declare module "next-auth" {
     refreshTokenExpiresIn: string;
     strategy: string;
     id: string;
+    firstName: string;
+    lastName: string;
+    isSAdmin: boolean;
   }
 }
 
@@ -29,11 +33,13 @@ declare module "next-auth/jwt" {
   interface JWT {
     accessToken: string;
     refreshToken: string;
-    name: string;
+    firstName: string;
+    lastName: string;
     email: string;
     id: string;
     error: string;
     accessTokenExpires: number;
     strategy: string;
+    isSAdmin: boolean;
   }
 }
diff --git a/frontend/types/user/create-login.user.ts b/frontend/types/user/create-login.user.ts
index 38744ccbd..0bc465e09 100644
--- a/frontend/types/user/create-login.user.ts
+++ b/frontend/types/user/create-login.user.ts
@@ -6,5 +6,7 @@ export interface CreateOrLogin {
   id: string;
   accessToken: Token;
   refreshToken: Token;
-  name: string;
+  firstName: string;
+  lastName: string;
+  isSAdmin: boolean;
 }
diff --git a/frontend/types/user/user.ts b/frontend/types/user/user.ts
index ed39557ce..c14bc4668 100644
--- a/frontend/types/user/user.ts
+++ b/frontend/types/user/user.ts
@@ -6,12 +6,15 @@ import { AccessToken, RefreshToken } from "../token";
 
 export interface User {
   id?: string;
-  name: string;
+  _id: string;
+  firstName: string;
+  lastName: string;
   email: string;
   password?: string;
   passwordConf?: string;
   accessToken?: AccessToken;
   refreshToken?: RefreshToken;
+  isSAdmin: boolean;
 }
 
 export interface UseUserType {
diff --git a/frontend/types/board/vote/vote.dto.ts b/frontend/types/vote/vote.dto.ts
similarity index 97%
rename from frontend/types/board/vote/vote.dto.ts
rename to frontend/types/vote/vote.dto.ts
index 729c80a7f..ca2133a9e 100644
--- a/frontend/types/board/vote/vote.dto.ts
+++ b/frontend/types/vote/vote.dto.ts
@@ -1,7 +1,11 @@
 export default interface VoteDto {
   cardId: string;
+
   cardItemId?: string;
+
   boardId: string;
+
   socketId?: string;
+
   isCardGroup: boolean;
 }
diff --git a/frontend/utils/constants.ts b/frontend/utils/constants.ts
index 8e1426167..f83d484e8 100644
--- a/frontend/utils/constants.ts
+++ b/frontend/utils/constants.ts
@@ -9,9 +9,9 @@ export const BACKEND_URL = process.env.BACKEND_URL;
 export const SECRET = process.env.SECRET;
 export const NEXT_PUBLIC_NEXTAUTH_URL = process.env.NEXT_PUBLIC_NEXTAUTH_URL;
 
-export const CLIENTID = process.env.AZURE_CLIENT_ID;
-export const CLIENTSECRET = process.env.AZURE_CLIENT_SECRET;
-export const TENANTID = process.env.AZURE_TENANT_ID;
+export const CLIENT_ID = process.env.AZURE_CLIENT_ID;
+export const CLIENT_SECRET = process.env.AZURE_CLIENT_SECRET;
+export const TENANT_ID = process.env.AZURE_TENANT_ID;
 export const NEXT_PUBLIC_ENABLE_AZURE = process.env.NEXT_PUBLIC_ENABLE_AZURE === "true";
 export const NEXT_PUBLIC_ENABLE_GIT = process.env.NEXT_PUBLIC_ENABLE_GIT === "true";
 export const NEXT_PUBLIC_ENABLE_GOOGLE = process.env.NEXT_PUBLIC_ENABLE_GOOGLE === "true";
diff --git a/frontend/utils/routes.ts b/frontend/utils/routes.ts
index 2260518cd..3dade7aed 100644
--- a/frontend/utils/routes.ts
+++ b/frontend/utils/routes.ts
@@ -1,15 +1,19 @@
-import { UNDEFINED } from "./constants";
-
 export const DASHBOARD_ROUTE = "/dashboard";
 export const START_PAGE_ROUTE = "/";
+export const BOARDS_ROUTE = "/boards";
+export const USERS_ROUTE = "/users";
+export const TEAMS_ROUTE = "/teams";
+export const ACCOUNT_ROUTE = "/account";
+export const SETTINGS_ROUTE = "/settings";
 export const ERROR_500_PAGE = "/500";
 
 export const ROUTES = {
   START_PAGE_ROUTE,
   Dashboard: DASHBOARD_ROUTE,
+  Boards: BOARDS_ROUTE,
   BoardPage: (boardId: string): string => `/boards/${boardId}`,
 };
 
-export const GetPageTitleByUrl = (url: string): string => {
-  return Object.keys(ROUTES).find((key) => ROUTES[key as keyof typeof ROUTES] === url) ?? UNDEFINED;
+export const GetPageTitleByUrl = (url: string): string | undefined => {
+  return Object.keys(ROUTES).find((key) => ROUTES[key as keyof typeof ROUTES] === url);
 };
diff --git a/package-lock.json b/package-lock.json
index a17a3cb3c..8a434a842 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
         "frontend",
         "backend"
       ],
+      "dependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
       "devDependencies": {
         "@commitlint/cli": "^16.2.3",
         "@commitlint/config-conventional": "^16.2.1",
@@ -88,49 +92,49 @@
         "@radix-ui/colors": "^0.1.8",
         "@radix-ui/react-alert-dialog": "^0.1.7",
         "@radix-ui/react-avatar": "^0.1.4",
+        "@radix-ui/react-checkbox": "^0.1.5",
         "@radix-ui/react-dialog": "^0.1.7",
         "@radix-ui/react-dropdown-menu": "^0.1.6",
         "@radix-ui/react-hover-card": "^0.1.5",
         "@radix-ui/react-label": "^0.1.5",
+        "@radix-ui/react-separator": "^0.1.4",
         "@radix-ui/react-tabs": "^0.1.5",
         "@radix-ui/react-toast": "^0.1.1",
-        "@reduxjs/toolkit": "^1.8.1",
+        "@radix-ui/react-tooltip": "^0.1.7",
+        "@react-forked/dnd": "^14.0.2",
         "@stitches/react": "^1.2.7",
         "axios": "^0.26.1",
-        "cypress": "^9.5.3",
+        "cypress": "^9.5.4",
         "dotenv": "^16.0.0",
         "fast-json-patch": "^3.1.1",
-        "formik": "^2.2.9",
         "next": "^12.1.4",
         "next-auth": "4.3.1",
         "npm": "^8.6.0",
         "react": "^18.0.0",
-        "react-beautiful-dnd": "^13.1.0",
         "react-dom": "^18.0.0",
         "react-hook-form": "^7.29.0",
         "react-loader-spinner": "^6.0.0-0",
+        "react-pro-sidebar": "^0.7.1",
         "react-query": "^3.34.19",
         "react-redux": "^7.2.8",
         "react-toastify": "^8.2.0",
         "recoil": "^0.7.0",
         "socket.io-client": "^4.4.1",
-        "uuid": "^8.3.2",
         "webpack": "^5.71.0",
-        "yup": "^0.32.11",
         "zod": "^3.14.4"
       },
       "devDependencies": {
+        "@babel/core": "^7.17.9",
         "@testing-library/jest-dom": "^5.16.4",
-        "@testing-library/react": "^13.0.0",
+        "@testing-library/react": "^13.0.1",
         "@types/jest": "^27.4.1",
-        "@types/react": "17.0.43",
-        "@types/react-beautiful-dnd": "^13.1.2",
-        "@types/react-dom": "^17.0.14",
-        "@types/uuid": "^8.3.4",
-        "@typescript-eslint/eslint-plugin": "^5.18.0",
-        "@typescript-eslint/parser": "^5.18.0",
+        "@types/react": "17.0.44",
+        "@types/react-dom": "^18.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.19.0",
+        "@typescript-eslint/parser": "^5.19.0",
         "babel-jest": "^27.5.1",
-        "eslint": "^8.12.0",
+        "babel-loader": "^8.2.4",
+        "eslint": "^8.13.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-airbnb-typescript-prettier": "^5.0.0",
@@ -222,6 +226,15 @@
         "npm": ">=2.0.0"
       }
     },
+    "node_modules/@angular-devkit/core/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@angular-devkit/core/node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@@ -383,14 +396,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/generator/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/@babel/helper-annotate-as-pure": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
@@ -1760,6 +1765,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/@nestjs/cli/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/@nestjs/cli/node_modules/typescript": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
@@ -1773,6 +1796,53 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/@nestjs/cli/node_modules/webpack": {
+      "version": "5.71.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.71.0.tgz",
+      "integrity": "sha512-g4dFT7CFG8LY0iU5G8nBL6VlkT21Z7dcYDpJAEJV5Q1WLb9UwnFbrem1k7K52ILqEmomN7pnzWFxxE6SlDY56A==",
+      "dev": true,
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^0.0.51",
+        "@webassemblyjs/ast": "1.11.1",
+        "@webassemblyjs/wasm-edit": "1.11.1",
+        "@webassemblyjs/wasm-parser": "1.11.1",
+        "acorn": "^8.4.1",
+        "acorn-import-assertions": "^1.7.6",
+        "browserslist": "^4.14.5",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.9.2",
+        "es-module-lexer": "^0.9.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-better-errors": "^1.0.2",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.1.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.1.3",
+        "watchpack": "^2.3.1",
+        "webpack-sources": "^3.2.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nestjs/common": {
       "version": "8.4.4",
       "resolved": "https://registry.npmjs.org/@nestjs/common/-/common-8.4.4.tgz",
@@ -1913,121 +1983,6 @@
         "@nestjs/core": "^8.0.0"
       }
     },
-    "node_modules/@nestjs/platform-express/node_modules/body-parser": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
-      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.10.3",
-        "raw-body": "2.5.1",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/@nestjs/platform-express/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/@nestjs/platform-express/node_modules/depd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/@nestjs/platform-express/node_modules/destroy": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/@nestjs/platform-express/node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/@nestjs/platform-express/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-    },
-    "node_modules/@nestjs/platform-express/node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/@nestjs/platform-express/node_modules/qs": {
-      "version": "6.10.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/@nestjs/platform-express/node_modules/raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/@nestjs/platform-express/node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/@nestjs/platform-socket.io": {
       "version": "8.4.4",
       "resolved": "https://registry.npmjs.org/@nestjs/platform-socket.io/-/platform-socket.io-8.4.4.tgz",
@@ -2377,6 +2332,15 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@radix-ui/colors": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-0.1.8.tgz",
@@ -2444,6 +2408,26 @@
         "react": "^16.8 || ^17.0"
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-0.1.5.tgz",
+      "integrity": "sha512-M8Y4dSXsKSbF+FryG5VvZKr/1MukMVG7swq9p5s7wYb8Rvn0UM0rQ5w8BWmSWSV4BL/gbJdhwVCznwXXlgZRZg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-context": "0.1.1",
+        "@radix-ui/react-label": "0.1.5",
+        "@radix-ui/react-presence": "0.1.2",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-use-controllable-state": "0.1.0",
+        "@radix-ui/react-use-previous": "0.1.1",
+        "@radix-ui/react-use-size": "0.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-0.1.4.tgz",
@@ -2722,6 +2706,18 @@
         "react": "^16.8 || ^17.0"
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-0.1.4.tgz",
+      "integrity": "sha512-ct2qE072ydvMyFiPwgO8xGE4iLGR9BsSk2tIan23TYSiNTeQ89anzkuax5vNGjey0el2vnwUcReFS0Gy7Lk2VQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "0.1.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-0.1.2.tgz",
@@ -2774,6 +2770,32 @@
         "react-dom": "^16.8 || ^17.0"
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz",
+      "integrity": "sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-context": "0.1.1",
+        "@radix-ui/react-id": "0.1.5",
+        "@radix-ui/react-popper": "0.1.4",
+        "@radix-ui/react-portal": "0.1.4",
+        "@radix-ui/react-presence": "0.1.2",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-slot": "0.1.2",
+        "@radix-ui/react-use-controllable-state": "0.1.0",
+        "@radix-ui/react-use-escape-keydown": "0.1.0",
+        "@radix-ui/react-use-previous": "0.1.1",
+        "@radix-ui/react-use-rect": "0.1.1",
+        "@radix-ui/react-visually-hidden": "0.1.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0",
+        "react-dom": "^16.8 || ^17.0"
+      }
+    },
     "node_modules/@radix-ui/react-use-body-pointer-events": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz",
@@ -2843,6 +2865,17 @@
         "react": "^16.8 || ^17.0"
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz",
+      "integrity": "sha512-O/ZgrDBr11dR8rhO59ED8s5zIXBRFi8MiS+CmFGfi7MJYdLbfqVOmQU90Ghf87aifEgWe6380LA69KBneaShAg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz",
@@ -2886,27 +2919,22 @@
         "@babel/runtime": "^7.13.10"
       }
     },
-    "node_modules/@reduxjs/toolkit": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.1.tgz",
-      "integrity": "sha512-Q6mzbTpO9nOYRnkwpDlFOAbQnd3g7zj7CtHAZWz5SzE5lcV97Tf8f3SzOO8BoPOMYBFgfZaqTUZqgGu+a0+Fng==",
+    "node_modules/@react-forked/dnd": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/@react-forked/dnd/-/dnd-14.0.2.tgz",
+      "integrity": "sha512-5+w0c/jTRSbjBPii/gfQ5hzvaNr8mTuYSbVxxR6Uh0DJOjvKQWGmKHafKOm/ci4r8dCK3+RxEKnUe5dOGhVnUw==",
       "dependencies": {
-        "immer": "^9.0.7",
+        "@babel/runtime": "^7.17.9",
+        "css-box-model": "^1.2.1",
+        "memoize-one": "^6.0.0",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^7.2.8",
         "redux": "^4.1.2",
-        "redux-thunk": "^2.4.1",
-        "reselect": "^4.1.5"
+        "use-memo-one": "^1.1.2"
       },
       "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18",
-        "react-redux": "^7.2.1 || ^8.0.0-beta"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-redux": {
-          "optional": true
-        }
+        "react": "^16.8.5 || ^17.0.0",
+        "react-dom": "^16.8.5 || ^17.0.0"
       }
     },
     "node_modules/@rushstack/eslint-patch": {
@@ -3027,14 +3055,14 @@
       }
     },
     "node_modules/@testing-library/react": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.0.0.tgz",
-      "integrity": "sha512-p0lYA1M7uoEmk2LnCbZLGmHJHyH59sAaZVXChTXlyhV/PRW9LoIh4mdf7tiXsO8BoNG+vN8UnFJff1hbZeXv+w==",
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.0.1.tgz",
+      "integrity": "sha512-zeHx3PohYYp+4bTJwrixQY8zSBZjWUGwYc7OhD1EpWTHS92RleApLoP72NdwaWxOrM1P1Uezt3XvGf6t2XSWPQ==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@testing-library/dom": "^8.5.0",
-        "@types/react-dom": "*"
+        "@types/react-dom": "^18.0.0"
       },
       "engines": {
         "node": ">=12"
@@ -3284,11 +3312,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/lodash": {
-      "version": "4.14.181",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.181.tgz",
-      "integrity": "sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag=="
-    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -3365,15 +3388,15 @@
       }
     },
     "node_modules/@types/prettier": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.4.tgz",
-      "integrity": "sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz",
+      "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==",
       "dev": true
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.4",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "node_modules/@types/qs": {
       "version": "6.9.7",
@@ -3386,28 +3409,19 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "17.0.43",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
-      "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==",
+      "version": "17.0.44",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz",
+      "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-beautiful-dnd": {
-      "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz",
-      "integrity": "sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-dom": {
-      "version": "17.0.14",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.14.tgz",
-      "integrity": "sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz",
+      "integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -3491,12 +3505,6 @@
         "@types/jest": "*"
       }
     },
-    "node_modules/@types/uuid": {
-      "version": "8.3.4",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
-      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
-      "dev": true
-    },
     "node_modules/@types/webidl-conversions": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-6.1.1.tgz",
@@ -3527,22 +3535,22 @@
       "dev": true
     },
     "node_modules/@types/yauzl": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.2.tgz",
-      "integrity": "sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==",
       "optional": true,
       "dependencies": {
         "@types/node": "*"
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.18.0.tgz",
-      "integrity": "sha512-tzrmdGMJI/uii9/V6lurMo4/o+dMTKDH82LkNjhJ3adCW22YQydoRs5MwTiqxGF9CSYxPxQ7EYb4jLNlIs+E+A==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.19.0.tgz",
+      "integrity": "sha512-w59GpFqDYGnWFim9p6TGJz7a3qWeENJuAKCqjGSx+Hq/bwq3RZwXYqy98KIfN85yDqz9mq6QXiY5h0FjGQLyEg==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.18.0",
-        "@typescript-eslint/type-utils": "5.18.0",
-        "@typescript-eslint/utils": "5.18.0",
+        "@typescript-eslint/scope-manager": "5.19.0",
+        "@typescript-eslint/type-utils": "5.19.0",
+        "@typescript-eslint/utils": "5.19.0",
         "debug": "^4.3.2",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.1.8",
@@ -3568,13 +3576,13 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.18.0.tgz",
-      "integrity": "sha512-+08nYfurBzSSPndngnHvFw/fniWYJ5ymOrn/63oMIbgomVQOvIDhBoJmYZ9lwQOCnQV9xHGvf88ze3jFGUYooQ==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.19.0.tgz",
+      "integrity": "sha512-yhktJjMCJX8BSBczh1F/uY8wGRYrBeyn84kH6oyqdIJwTGKmzX5Qiq49LRQ0Jh0LXnWijEziSo6BRqny8nqLVQ==",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.18.0",
-        "@typescript-eslint/types": "5.18.0",
-        "@typescript-eslint/typescript-estree": "5.18.0",
+        "@typescript-eslint/scope-manager": "5.19.0",
+        "@typescript-eslint/types": "5.19.0",
+        "@typescript-eslint/typescript-estree": "5.19.0",
         "debug": "^4.3.2"
       },
       "engines": {
@@ -3594,12 +3602,12 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.18.0.tgz",
-      "integrity": "sha512-C0CZML6NyRDj+ZbMqh9FnPscg2PrzSaVQg3IpTmpe0NURMVBXlghGZgMYqBw07YW73i0MCqSDqv2SbywnCS8jQ==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.19.0.tgz",
+      "integrity": "sha512-Fz+VrjLmwq5fbQn5W7cIJZ066HxLMKvDEmf4eu1tZ8O956aoX45jAuBB76miAECMTODyUxH61AQM7q4/GOMQ5g==",
       "dependencies": {
-        "@typescript-eslint/types": "5.18.0",
-        "@typescript-eslint/visitor-keys": "5.18.0"
+        "@typescript-eslint/types": "5.19.0",
+        "@typescript-eslint/visitor-keys": "5.19.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -3610,11 +3618,11 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.18.0.tgz",
-      "integrity": "sha512-vcn9/6J5D6jtHxpEJrgK8FhaM8r6J1/ZiNu70ZUJN554Y3D9t3iovi6u7JF8l/e7FcBIxeuTEidZDR70UuCIfA==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.19.0.tgz",
+      "integrity": "sha512-O6XQ4RI4rQcBGshTQAYBUIGsKqrKeuIOz9v8bckXZnSeXjn/1+BDZndHLe10UplQeJLXDNbaZYrAytKNQO2T4Q==",
       "dependencies": {
-        "@typescript-eslint/utils": "5.18.0",
+        "@typescript-eslint/utils": "5.19.0",
         "debug": "^4.3.2",
         "tsutils": "^3.21.0"
       },
@@ -3635,9 +3643,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.18.0.tgz",
-      "integrity": "sha512-bhV1+XjM+9bHMTmXi46p1Led5NP6iqQcsOxgx7fvk6gGiV48c6IynY0apQb7693twJDsXiVzNXTflhplmaiJaw==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.19.0.tgz",
+      "integrity": "sha512-zR1ithF4Iyq1wLwkDcT+qFnhs8L5VUtjgac212ftiOP/ZZUOCuuF2DeGiZZGQXGoHA50OreZqLH5NjDcDqn34w==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -3647,12 +3655,12 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.18.0.tgz",
-      "integrity": "sha512-wa+2VAhOPpZs1bVij9e5gyVu60ReMi/KuOx4LKjGx2Y3XTNUDJgQ+5f77D49pHtqef/klglf+mibuHs9TrPxdQ==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.19.0.tgz",
+      "integrity": "sha512-dRPuD4ocXdaE1BM/dNR21elSEUPKaWgowCA0bqJ6YbYkvtrPVEvZ+zqcX5a8ECYn3q5iBSSUcBBD42ubaOp0Hw==",
       "dependencies": {
-        "@typescript-eslint/types": "5.18.0",
-        "@typescript-eslint/visitor-keys": "5.18.0",
+        "@typescript-eslint/types": "5.19.0",
+        "@typescript-eslint/visitor-keys": "5.19.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -3673,14 +3681,14 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.18.0.tgz",
-      "integrity": "sha512-+hFGWUMMri7OFY26TsOlGa+zgjEy1ssEipxpLjtl4wSll8zy85x0GrUSju/FHdKfVorZPYJLkF3I4XPtnCTewA==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.19.0.tgz",
+      "integrity": "sha512-ZuEckdupXpXamKvFz/Ql8YnePh2ZWcwz7APICzJL985Rp5C2AYcHO62oJzIqNhAMtMK6XvrlBTZeNG8n7gS3lQ==",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.18.0",
-        "@typescript-eslint/types": "5.18.0",
-        "@typescript-eslint/typescript-estree": "5.18.0",
+        "@typescript-eslint/scope-manager": "5.19.0",
+        "@typescript-eslint/types": "5.19.0",
+        "@typescript-eslint/typescript-estree": "5.19.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       },
@@ -3696,11 +3704,11 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.18.0.tgz",
-      "integrity": "sha512-Hf+t+dJsjAKpKSkg3EHvbtEpFFb/1CiOHnvI8bjHgOD4/wAw3gKrA0i94LrbekypiZVanJu3McWJg7rWDMzRTg==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.19.0.tgz",
+      "integrity": "sha512-Ym7zZoMDZcAKWsULi2s7UMLREdVQdScPQ/fKWMYefarCztWlHPFVJo8racf8R0Gc8FAEJ2eD4of8As1oFtnQlQ==",
       "dependencies": {
-        "@typescript-eslint/types": "5.18.0",
+        "@typescript-eslint/types": "5.19.0",
         "eslint-visitor-keys": "^3.0.0"
       },
       "engines": {
@@ -4214,13 +4222,14 @@
       }
     },
     "node_modules/array.prototype.flat": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz",
-      "integrity": "sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0"
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4230,13 +4239,14 @@
       }
     },
     "node_modules/array.prototype.flatmap": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz",
-      "integrity": "sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
       "dependencies": {
-        "call-bind": "^1.0.0",
+        "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0"
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4375,6 +4385,25 @@
         "@babel/core": "^7.8.0"
       }
     },
+    "node_modules/babel-loader": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.4.tgz",
+      "integrity": "sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==",
+      "dev": true,
+      "dependencies": {
+        "find-cache-dir": "^3.3.1",
+        "loader-utils": "^2.0.0",
+        "make-dir": "^3.1.0",
+        "schema-utils": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 8.9"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "webpack": ">=2"
+      }
+    },
     "node_modules/babel-plugin-istanbul": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
@@ -4407,9 +4436,9 @@
       }
     },
     "node_modules/babel-plugin-styled-components": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.6.tgz",
-      "integrity": "sha512-Sk+7o/oa2HfHv3Eh8sxoz75/fFvEdHsXV4grdeHufX0nauCmymlnN0rGhIvfpMQSJMvGutJ85gvCGea4iqmDpg==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
+      "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.16.0",
         "@babel/helper-module-imports": "^7.16.0",
@@ -4535,6 +4564,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -4566,23 +4604,26 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
     },
     "node_modules/body-parser": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
-      "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
+      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
       "dependencies": {
         "bytes": "3.1.2",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.8.1",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.9.7",
-        "raw-body": "2.4.3",
-        "type-is": "~1.6.18"
+        "on-finished": "2.4.1",
+        "qs": "6.10.3",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
       }
     },
     "node_modules/body-parser/node_modules/debug": {
@@ -4836,9 +4877,9 @@
       "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001325",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001325.tgz",
-      "integrity": "sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ==",
+      "version": "1.0.30001328",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001328.tgz",
+      "integrity": "sha512-Ue55jHkR/s4r00FLNiX+hGMMuwml/QGqqzVeMQ5thUewznU2EdULFvI3JR7JJid6OrjJNfFvHY2G2dIjmRaDDQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -4961,6 +5002,11 @@
         "validator": "^13.7.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -5186,6 +5232,12 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
+      "dev": true
+    },
     "node_modules/compare-func": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
@@ -5538,9 +5590,9 @@
       "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
     },
     "node_modules/cypress": {
-      "version": "9.5.3",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.5.3.tgz",
-      "integrity": "sha512-ItelIVmqMTnKYbo1JrErhsGgQGjWOxCpHT1TfMvwnIXKXN/OSlPjEK7rbCLYDZhejQL99PmUqul7XORI24Ik0A==",
+      "version": "9.5.4",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.5.4.tgz",
+      "integrity": "sha512-6AyJAD8phe7IMvOL4oBsI9puRNOWxZjl8z1lgixJMcgJ85JJmyKeP6uqNA0dI1z14lmJ7Qklf2MOgP/xdAqJ/Q==",
       "hasInstallScript": true,
       "dependencies": {
         "@cypress/request": "^2.88.10",
@@ -5846,17 +5898,21 @@
       }
     },
     "node_modules/depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.8"
       }
     },
     "node_modules/destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
     },
     "node_modules/detect-libc": {
       "version": "2.0.1",
@@ -6052,9 +6108,9 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.106",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.106.tgz",
-      "integrity": "sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg=="
+      "version": "1.4.107",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.107.tgz",
+      "integrity": "sha512-Huen6taaVrUrSy8o7mGStByba8PfOWWluHNxSHGBrCgEdFVLtvdQDBr9LBCF9Uci8SYxh28QNNMO0oC17wbGAg=="
     },
     "node_modules/emittery": {
       "version": "0.8.1",
@@ -6073,6 +6129,15 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -6209,9 +6274,9 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.2.tgz",
-      "integrity": "sha512-gfSBJoZdlL2xRiOCy0g8gLMryhoe1TlimjzU99L/31Z8QEGIhVQI+EWwt5lT+AuU9SnorVupXFqqOGqGfsyO6w==",
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.4.tgz",
+      "integrity": "sha512-flV8e5g9/xulChMG48Fygk1ptpo4lQRJ0eJYtxJFgi7pklLx7EFcOJ34jnvr8pbWlaFN/AT1cZpe0hiFel9Hqg==",
       "dependencies": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
@@ -6224,7 +6289,7 @@
         "is-callable": "^1.2.4",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.1",
+        "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
         "is-weakref": "^1.0.2",
         "object-inspect": "^1.12.0",
@@ -6246,6 +6311,14 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
     },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dependencies": {
+        "has": "^1.0.3"
+      }
+    },
     "node_modules/es-to-primitive": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
@@ -6367,9 +6440,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.12.0.tgz",
-      "integrity": "sha512-it1oBL9alZg1S8UycLm5YDMAkIhtH6FtAzuZs6YvoGVldWjbS08BkAdb/ymP9LlAyq8koANu32U7Ib/w+UNh8Q==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.13.0.tgz",
+      "integrity": "sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==",
       "dependencies": {
         "@eslint/eslintrc": "^1.2.1",
         "@humanwhocodes/config-array": "^0.9.2",
@@ -7474,6 +7547,26 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/express/node_modules/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.8.1",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.9.7",
+        "raw-body": "2.4.3",
+        "type-is": "~1.6.18"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/express/node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -7482,16 +7575,75 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/express/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/express/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "node_modules/express/node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/express/node_modules/path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
     },
+    "node_modules/express/node_modules/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/express/node_modules/raw-body": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
+      "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "1.8.1",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -7701,6 +7853,34 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "node_modules/finalhandler/node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "dependencies": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -7794,6 +7974,24 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@@ -7834,42 +8032,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/formik": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
-      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://opencollective.com/formik"
-        }
-      ],
-      "dependencies": {
-        "deepmerge": "^2.1.1",
-        "hoist-non-react-statics": "^3.3.0",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "react-fast-compare": "^2.0.1",
-        "tiny-warning": "^1.0.2",
-        "tslib": "^1.10.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/formik/node_modules/deepmerge": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/formik/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -8271,6 +8433,11 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -8302,18 +8469,26 @@
       "dev": true
     },
     "node_modules/http-errors": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
-      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
       "dependencies": {
-        "depd": "~1.1.2",
+        "depd": "2.0.0",
         "inherits": "2.0.4",
         "setprototypeof": "1.2.0",
-        "statuses": ">= 1.5.0 < 2",
+        "statuses": "2.0.1",
         "toidentifier": "1.0.1"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-errors/node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
       }
     },
     "node_modules/http-proxy-agent": {
@@ -8428,15 +8603,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/immer": {
-      "version": "9.0.12",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz",
-      "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/immer"
-      }
-    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -9691,9 +9857,9 @@
       }
     },
     "node_modules/jose": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-4.6.0.tgz",
-      "integrity": "sha512-0hNAkhMBNi4soKSAX4zYOFV+aqJlEz/4j4fregvasJzEVtjDChvWqRjPvHwLqr5hx28Ayr6bsOs1Kuj87V0O8w==",
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.6.1.tgz",
+      "integrity": "sha512-EFnufEivlIB6j7+JwaenYQzdUDs/McajDr9WnhT6EI0WxbexnfuZimpWX1GnobF6OnQsUFmWFXUXdWyZHWdQow==",
       "funding": {
         "url": "https://github.com/sponsors/panva"
       }
@@ -10050,9 +10216,9 @@
       }
     },
     "node_modules/libphonenumber-js": {
-      "version": "1.9.50",
-      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.9.50.tgz",
-      "integrity": "sha512-cCzQPChw2XbordcO2LKiw5Htx5leHVfFk/EXkxNHqJfFo7Fndcb1kF5wPJpc316vCJhhikedYnVysMh3Sc7Ocw=="
+      "version": "1.9.51",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.9.51.tgz",
+      "integrity": "sha512-MGidRDs7s2nUybwrB/UjZT4nPXZPYQZQTu/sF3/O2v/DocmD8N6G+a9kwDt2qm7DaOo35XRt7hAIbYL+ml942Q=="
     },
     "node_modules/lilconfig": {
       "version": "2.0.4",
@@ -10226,13 +10392,27 @@
       }
     },
     "node_modules/loader-runner": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
-      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
       "engines": {
         "node": ">=6.11.5"
       }
     },
+    "node_modules/loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -10253,11 +10433,6 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -10502,9 +10677,9 @@
       }
     },
     "node_modules/memoize-one": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
     "node_modules/memory-pager": {
       "version": "1.5.0",
@@ -10893,11 +11068,6 @@
         "big-integer": "^1.6.16"
       }
     },
-    "node_modules/nanoclone": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
-      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
-    },
     "node_modules/nanoid": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
@@ -11064,9 +11234,9 @@
       "dev": true
     },
     "node_modules/node-releases": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz",
-      "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg=="
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.3.tgz",
+      "integrity": "sha512-maHFz6OLqYxz+VQyCAtA3PTX4UP/53pa05fyDNc9CwjvJ0yEh6+xBwKsgCxMNhS8taUKBFYxfuiaD9U/55iFaw=="
     },
     "node_modules/nopt": {
       "version": "5.0.0",
@@ -13441,9 +13611,9 @@
       }
     },
     "node_modules/on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "dependencies": {
         "ee-first": "1.1.1"
       },
@@ -13939,9 +14109,9 @@
       }
     },
     "node_modules/preact-render-to-string": {
-      "version": "5.1.20",
-      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.1.20.tgz",
-      "integrity": "sha512-ivh2oOGzth0o7XqbatWUQ81WQGoJwSqDKP5z917SoqTWYCAr7dlBzMv3SAMTAu3Gr5g47BJwrvyO44H2Y10ubg==",
+      "version": "5.1.21",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.1.21.tgz",
+      "integrity": "sha512-wbMtNU4JpfvbE04iCe7BZ1yLYN8i6NRrq+NhR0fUINjPXGu3ZIc4GM5ScOiwdIP1sPXv9SVETuud/tmQGMvdNQ==",
       "dependencies": {
         "pretty-format": "^3.8.0"
       },
@@ -14026,12 +14196,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/pretty-format/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
-    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -14060,10 +14224,10 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/property-expr": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
-      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
@@ -14130,9 +14294,12 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.9.7",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
-      "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
       "engines": {
         "node": ">=0.6"
       },
@@ -14190,12 +14357,12 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
-      "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
       "dependencies": {
         "bytes": "3.1.2",
-        "http-errors": "1.8.1",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
       },
@@ -14214,24 +14381,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-beautiful-dnd": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
-      "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
-      "dependencies": {
-        "@babel/runtime": "^7.9.2",
-        "css-box-model": "^1.2.0",
-        "memoize-one": "^5.1.1",
-        "raf-schd": "^4.0.2",
-        "react-redux": "^7.2.0",
-        "redux": "^4.0.4",
-        "use-memo-one": "^1.1.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.5 || ^17.0.0",
-        "react-dom": "^16.8.5 || ^17.0.0"
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.0.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
@@ -14244,11 +14393,6 @@
         "react": "^18.0.0"
       }
     },
-    "node_modules/react-fast-compare": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
-    },
     "node_modules/react-hook-form": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
@@ -14265,9 +14409,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/react-loader-spinner": {
       "version": "6.0.0-0",
@@ -14289,6 +14433,21 @@
         "react-dom": "^17.0.2"
       }
     },
+    "node_modules/react-pro-sidebar": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/react-pro-sidebar/-/react-pro-sidebar-0.7.1.tgz",
+      "integrity": "sha512-Iy1X8ce4t5Vqz4CsyzjwokGUE3/IObgmYzS0ins7/2eWKle0SMUPaWdgMKFIVjtVrMr5vmjPbRicq8FxnVaf8A==",
+      "dependencies": {
+        "@popperjs/core": "^2.4.0",
+        "classnames": "^2.2.6",
+        "react-slidedown": "^2.4.5",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-query": {
       "version": "3.34.19",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.34.19.tgz",
@@ -14338,11 +14497,6 @@
         }
       }
     },
-    "node_modules/react-redux/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-    },
     "node_modules/react-remove-scroll": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.4.tgz",
@@ -14411,6 +14565,18 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-slidedown": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/react-slidedown/-/react-slidedown-2.4.7.tgz",
+      "integrity": "sha512-HGDfrqo70r1WVE0DwrySPdCT27/2wcZaJYh5kOnmuPSCtjDDJrNkDdn4Ep/cma2VVfwupeAGhbc2pbrGThU6VQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || 17",
+        "react-dom": "^16.3.0 || 17"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
@@ -14676,14 +14842,6 @@
         "@babel/runtime": "^7.9.2"
       }
     },
-    "node_modules/redux-thunk": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
-      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
-      "peerDependencies": {
-        "redux": "^4"
-      }
-    },
     "node_modules/reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@@ -14751,10 +14909,10 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/reselect": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
-      "integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "node_modules/resolve": {
       "version": "1.22.0",
@@ -14950,16 +15108,17 @@
       }
     },
     "node_modules/schema-utils": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+      "dev": true,
       "dependencies": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
         "ajv-keywords": "^3.5.2"
       },
       "engines": {
-        "node": ">= 10.13.0"
+        "node": ">= 8.9.0"
       },
       "funding": {
         "type": "opencollective",
@@ -15016,11 +15175,50 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "node_modules/send/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/send/node_modules/destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "node_modules/send/node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/send/node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
+    "node_modules/send/node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/serialize-javascript": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
@@ -15253,11 +15451,11 @@
       }
     },
     "node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
       "engines": {
-        "node": ">= 8"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/source-map-js": {
@@ -15737,21 +15935,6 @@
         "node": ">=4.0.0"
       }
     },
-    "node_modules/superagent/node_modules/qs": {
-      "version": "6.10.3",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
-      "dev": true,
-      "dependencies": {
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/supertest": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/supertest/-/supertest-6.2.2.tgz",
@@ -15916,6 +16099,23 @@
         }
       }
     },
+    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/terser-webpack-plugin/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -15929,6 +16129,14 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
+    "node_modules/terser/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@@ -15987,11 +16195,6 @@
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
       "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
     },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -16036,11 +16239,6 @@
         "node": ">=0.6"
       }
     },
-    "node_modules/toposort": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
-      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
-    },
     "node_modules/tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -16485,6 +16683,15 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/v8-to-istanbul/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -16613,9 +16820,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.71.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.71.0.tgz",
-      "integrity": "sha512-g4dFT7CFG8LY0iU5G8nBL6VlkT21Z7dcYDpJAEJV5Q1WLb9UwnFbrem1k7K52ILqEmomN7pnzWFxxE6SlDY56A==",
+      "version": "5.72.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.72.0.tgz",
+      "integrity": "sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -16675,6 +16882,23 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/webpack/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/whatwg-encoding": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
@@ -16916,9 +17140,9 @@
       }
     },
     "node_modules/yargs": {
-      "version": "17.4.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.4.0.tgz",
-      "integrity": "sha512-WJudfrk81yWFSOkZYpAZx4Nt7V4xp7S/uJkX0CnxovMCt1wCE8LNftPpNuF9X/u9gN5nsD7ycYtRcDf2pL3UiA==",
+      "version": "17.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.4.1.tgz",
+      "integrity": "sha512-WSZD9jgobAg3ZKuCQZSa3g9QOJeCCqLoLAykiWgmXnDo9EPnn4RPf5qVTtzgOx66o6/oqhcA5tHtJXpG8pMt3g==",
       "dev": true,
       "dependencies": {
         "cliui": "^7.0.2",
@@ -16986,23 +17210,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/yup": {
-      "version": "0.32.11",
-      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
-      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
-      "dependencies": {
-        "@babel/runtime": "^7.15.4",
-        "@types/lodash": "^4.14.175",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "nanoclone": "^0.2.1",
-        "property-expr": "^2.0.4",
-        "toposort": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/zod": {
       "version": "3.14.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.14.4.tgz",
@@ -17063,6 +17270,12 @@
             "tslib": "^1.9.0"
           }
         },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        },
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@@ -17192,13 +17405,6 @@
         "@babel/types": "^7.17.0",
         "jsesc": "^2.5.1",
         "source-map": "^0.5.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-        }
       }
     },
     "@babel/helper-annotate-as-pure": {
@@ -18272,11 +18478,54 @@
             "supports-color": "^7.1.0"
           }
         },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
         "typescript": {
           "version": "4.6.2",
           "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
           "integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==",
           "dev": true
+        },
+        "webpack": {
+          "version": "5.71.0",
+          "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.71.0.tgz",
+          "integrity": "sha512-g4dFT7CFG8LY0iU5G8nBL6VlkT21Z7dcYDpJAEJV5Q1WLb9UwnFbrem1k7K52ILqEmomN7pnzWFxxE6SlDY56A==",
+          "dev": true,
+          "requires": {
+            "@types/eslint-scope": "^3.7.3",
+            "@types/estree": "^0.0.51",
+            "@webassemblyjs/ast": "1.11.1",
+            "@webassemblyjs/wasm-edit": "1.11.1",
+            "@webassemblyjs/wasm-parser": "1.11.1",
+            "acorn": "^8.4.1",
+            "acorn-import-assertions": "^1.7.6",
+            "browserslist": "^4.14.5",
+            "chrome-trace-event": "^1.0.2",
+            "enhanced-resolve": "^5.9.2",
+            "es-module-lexer": "^0.9.0",
+            "eslint-scope": "5.1.1",
+            "events": "^3.2.0",
+            "glob-to-regexp": "^0.4.1",
+            "graceful-fs": "^4.2.9",
+            "json-parse-better-errors": "^1.0.2",
+            "loader-runner": "^4.2.0",
+            "mime-types": "^2.1.27",
+            "neo-async": "^2.6.2",
+            "schema-utils": "^3.1.0",
+            "tapable": "^2.1.1",
+            "terser-webpack-plugin": "^5.1.3",
+            "watchpack": "^2.3.1",
+            "webpack-sources": "^3.2.3"
+          }
         }
       }
     },
@@ -18347,94 +18596,6 @@
         "express": "4.17.3",
         "multer": "1.4.4",
         "tslib": "2.3.1"
-      },
-      "dependencies": {
-        "body-parser": {
-          "version": "1.20.0",
-          "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
-          "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
-          "requires": {
-            "bytes": "3.1.2",
-            "content-type": "~1.0.4",
-            "debug": "2.6.9",
-            "depd": "2.0.0",
-            "destroy": "1.2.0",
-            "http-errors": "2.0.0",
-            "iconv-lite": "0.4.24",
-            "on-finished": "2.4.1",
-            "qs": "6.10.3",
-            "raw-body": "2.5.1",
-            "type-is": "~1.6.18",
-            "unpipe": "1.0.0"
-          }
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "depd": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
-        },
-        "destroy": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-          "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
-        },
-        "http-errors": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-          "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-          "requires": {
-            "depd": "2.0.0",
-            "inherits": "2.0.4",
-            "setprototypeof": "1.2.0",
-            "statuses": "2.0.1",
-            "toidentifier": "1.0.1"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        },
-        "on-finished": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-          "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-          "requires": {
-            "ee-first": "1.1.1"
-          }
-        },
-        "qs": {
-          "version": "6.10.3",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-          "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
-          "requires": {
-            "side-channel": "^1.0.4"
-          }
-        },
-        "raw-body": {
-          "version": "2.5.1",
-          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-          "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
-          "requires": {
-            "bytes": "3.1.2",
-            "http-errors": "2.0.0",
-            "iconv-lite": "0.4.24",
-            "unpipe": "1.0.0"
-          }
-        },
-        "statuses": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-          "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
-        }
       }
     },
     "@nestjs/platform-socket.io": {
@@ -18612,6 +18773,11 @@
       "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.0.1.tgz",
       "integrity": "sha512-mMyQ9vjpuFqePkfe5bZVIf/H3Dmk6wA8Kjxff9RcO4kqzJo+Ek9pGKwZHpeMr7Eku0QhLXMCd7fNCSnEnRMubg=="
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
     "@radix-ui/colors": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-0.1.8.tgz",
@@ -18669,6 +18835,23 @@
         "@radix-ui/react-use-layout-effect": "0.1.0"
       }
     },
+    "@radix-ui/react-checkbox": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-0.1.5.tgz",
+      "integrity": "sha512-M8Y4dSXsKSbF+FryG5VvZKr/1MukMVG7swq9p5s7wYb8Rvn0UM0rQ5w8BWmSWSV4BL/gbJdhwVCznwXXlgZRZg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-context": "0.1.1",
+        "@radix-ui/react-label": "0.1.5",
+        "@radix-ui/react-presence": "0.1.2",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-use-controllable-state": "0.1.0",
+        "@radix-ui/react-use-previous": "0.1.1",
+        "@radix-ui/react-use-size": "0.1.1"
+      }
+    },
     "@radix-ui/react-collection": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-0.1.4.tgz",
@@ -18891,6 +19074,15 @@
         "@radix-ui/react-use-controllable-state": "0.1.0"
       }
     },
+    "@radix-ui/react-separator": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-0.1.4.tgz",
+      "integrity": "sha512-ct2qE072ydvMyFiPwgO8xGE4iLGR9BsSk2tIan23TYSiNTeQ89anzkuax5vNGjey0el2vnwUcReFS0Gy7Lk2VQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "0.1.4"
+      }
+    },
     "@radix-ui/react-slot": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-0.1.2.tgz",
@@ -18933,6 +19125,28 @@
         "@radix-ui/react-visually-hidden": "0.1.4"
       }
     },
+    "@radix-ui/react-tooltip": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz",
+      "integrity": "sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-context": "0.1.1",
+        "@radix-ui/react-id": "0.1.5",
+        "@radix-ui/react-popper": "0.1.4",
+        "@radix-ui/react-portal": "0.1.4",
+        "@radix-ui/react-presence": "0.1.2",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-slot": "0.1.2",
+        "@radix-ui/react-use-controllable-state": "0.1.0",
+        "@radix-ui/react-use-escape-keydown": "0.1.0",
+        "@radix-ui/react-use-previous": "0.1.1",
+        "@radix-ui/react-use-rect": "0.1.1",
+        "@radix-ui/react-visually-hidden": "0.1.4"
+      }
+    },
     "@radix-ui/react-use-body-pointer-events": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz",
@@ -18984,6 +19198,14 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "@radix-ui/react-use-previous": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz",
+      "integrity": "sha512-O/ZgrDBr11dR8rhO59ED8s5zIXBRFi8MiS+CmFGfi7MJYdLbfqVOmQU90Ghf87aifEgWe6380LA69KBneaShAg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "@radix-ui/react-use-rect": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz",
@@ -19018,15 +19240,18 @@
         "@babel/runtime": "^7.13.10"
       }
     },
-    "@reduxjs/toolkit": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.1.tgz",
-      "integrity": "sha512-Q6mzbTpO9nOYRnkwpDlFOAbQnd3g7zj7CtHAZWz5SzE5lcV97Tf8f3SzOO8BoPOMYBFgfZaqTUZqgGu+a0+Fng==",
+    "@react-forked/dnd": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/@react-forked/dnd/-/dnd-14.0.2.tgz",
+      "integrity": "sha512-5+w0c/jTRSbjBPii/gfQ5hzvaNr8mTuYSbVxxR6Uh0DJOjvKQWGmKHafKOm/ci4r8dCK3+RxEKnUe5dOGhVnUw==",
       "requires": {
-        "immer": "^9.0.7",
+        "@babel/runtime": "^7.17.9",
+        "css-box-model": "^1.2.1",
+        "memoize-one": "^6.0.0",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^7.2.8",
         "redux": "^4.1.2",
-        "redux-thunk": "^2.4.1",
-        "reselect": "^4.1.5"
+        "use-memo-one": "^1.1.2"
       }
     },
     "@rushstack/eslint-patch": {
@@ -19133,14 +19358,14 @@
       }
     },
     "@testing-library/react": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.0.0.tgz",
-      "integrity": "sha512-p0lYA1M7uoEmk2LnCbZLGmHJHyH59sAaZVXChTXlyhV/PRW9LoIh4mdf7tiXsO8BoNG+vN8UnFJff1hbZeXv+w==",
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.0.1.tgz",
+      "integrity": "sha512-zeHx3PohYYp+4bTJwrixQY8zSBZjWUGwYc7OhD1EpWTHS92RleApLoP72NdwaWxOrM1P1Uezt3XvGf6t2XSWPQ==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.5",
         "@testing-library/dom": "^8.5.0",
-        "@types/react-dom": "*"
+        "@types/react-dom": "^18.0.0"
       }
     },
     "@tootallnate/once": {
@@ -19380,11 +19605,6 @@
         "@types/node": "*"
       }
     },
-    "@types/lodash": {
-      "version": "4.14.181",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.181.tgz",
-      "integrity": "sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag=="
-    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -19460,15 +19680,15 @@
       }
     },
     "@types/prettier": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.4.tgz",
-      "integrity": "sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz",
+      "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==",
       "dev": true
     },
     "@types/prop-types": {
-      "version": "15.7.4",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
     "@types/qs": {
       "version": "6.9.7",
@@ -19481,28 +19701,19 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "@types/react": {
-      "version": "17.0.43",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
-      "integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==",
+      "version": "17.0.44",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz",
+      "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
-    "@types/react-beautiful-dnd": {
-      "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz",
-      "integrity": "sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg==",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/react-dom": {
-      "version": "17.0.14",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.14.tgz",
-      "integrity": "sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz",
+      "integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==",
       "dev": true,
       "requires": {
         "@types/react": "*"
@@ -19585,12 +19796,6 @@
         "@types/jest": "*"
       }
     },
-    "@types/uuid": {
-      "version": "8.3.4",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
-      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
-      "dev": true
-    },
     "@types/webidl-conversions": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-6.1.1.tgz",
@@ -19621,22 +19826,22 @@
       "dev": true
     },
     "@types/yauzl": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.2.tgz",
-      "integrity": "sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==",
       "optional": true,
       "requires": {
         "@types/node": "*"
       }
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.18.0.tgz",
-      "integrity": "sha512-tzrmdGMJI/uii9/V6lurMo4/o+dMTKDH82LkNjhJ3adCW22YQydoRs5MwTiqxGF9CSYxPxQ7EYb4jLNlIs+E+A==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.19.0.tgz",
+      "integrity": "sha512-w59GpFqDYGnWFim9p6TGJz7a3qWeENJuAKCqjGSx+Hq/bwq3RZwXYqy98KIfN85yDqz9mq6QXiY5h0FjGQLyEg==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.18.0",
-        "@typescript-eslint/type-utils": "5.18.0",
-        "@typescript-eslint/utils": "5.18.0",
+        "@typescript-eslint/scope-manager": "5.19.0",
+        "@typescript-eslint/type-utils": "5.19.0",
+        "@typescript-eslint/utils": "5.19.0",
         "debug": "^4.3.2",
         "functional-red-black-tree": "^1.0.1",
         "ignore": "^5.1.8",
@@ -19646,47 +19851,47 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.18.0.tgz",
-      "integrity": "sha512-+08nYfurBzSSPndngnHvFw/fniWYJ5ymOrn/63oMIbgomVQOvIDhBoJmYZ9lwQOCnQV9xHGvf88ze3jFGUYooQ==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.19.0.tgz",
+      "integrity": "sha512-yhktJjMCJX8BSBczh1F/uY8wGRYrBeyn84kH6oyqdIJwTGKmzX5Qiq49LRQ0Jh0LXnWijEziSo6BRqny8nqLVQ==",
       "requires": {
-        "@typescript-eslint/scope-manager": "5.18.0",
-        "@typescript-eslint/types": "5.18.0",
-        "@typescript-eslint/typescript-estree": "5.18.0",
+        "@typescript-eslint/scope-manager": "5.19.0",
+        "@typescript-eslint/types": "5.19.0",
+        "@typescript-eslint/typescript-estree": "5.19.0",
         "debug": "^4.3.2"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.18.0.tgz",
-      "integrity": "sha512-C0CZML6NyRDj+ZbMqh9FnPscg2PrzSaVQg3IpTmpe0NURMVBXlghGZgMYqBw07YW73i0MCqSDqv2SbywnCS8jQ==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.19.0.tgz",
+      "integrity": "sha512-Fz+VrjLmwq5fbQn5W7cIJZ066HxLMKvDEmf4eu1tZ8O956aoX45jAuBB76miAECMTODyUxH61AQM7q4/GOMQ5g==",
       "requires": {
-        "@typescript-eslint/types": "5.18.0",
-        "@typescript-eslint/visitor-keys": "5.18.0"
+        "@typescript-eslint/types": "5.19.0",
+        "@typescript-eslint/visitor-keys": "5.19.0"
       }
     },
     "@typescript-eslint/type-utils": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.18.0.tgz",
-      "integrity": "sha512-vcn9/6J5D6jtHxpEJrgK8FhaM8r6J1/ZiNu70ZUJN554Y3D9t3iovi6u7JF8l/e7FcBIxeuTEidZDR70UuCIfA==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.19.0.tgz",
+      "integrity": "sha512-O6XQ4RI4rQcBGshTQAYBUIGsKqrKeuIOz9v8bckXZnSeXjn/1+BDZndHLe10UplQeJLXDNbaZYrAytKNQO2T4Q==",
       "requires": {
-        "@typescript-eslint/utils": "5.18.0",
+        "@typescript-eslint/utils": "5.19.0",
         "debug": "^4.3.2",
         "tsutils": "^3.21.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.18.0.tgz",
-      "integrity": "sha512-bhV1+XjM+9bHMTmXi46p1Led5NP6iqQcsOxgx7fvk6gGiV48c6IynY0apQb7693twJDsXiVzNXTflhplmaiJaw=="
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.19.0.tgz",
+      "integrity": "sha512-zR1ithF4Iyq1wLwkDcT+qFnhs8L5VUtjgac212ftiOP/ZZUOCuuF2DeGiZZGQXGoHA50OreZqLH5NjDcDqn34w=="
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.18.0.tgz",
-      "integrity": "sha512-wa+2VAhOPpZs1bVij9e5gyVu60ReMi/KuOx4LKjGx2Y3XTNUDJgQ+5f77D49pHtqef/klglf+mibuHs9TrPxdQ==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.19.0.tgz",
+      "integrity": "sha512-dRPuD4ocXdaE1BM/dNR21elSEUPKaWgowCA0bqJ6YbYkvtrPVEvZ+zqcX5a8ECYn3q5iBSSUcBBD42ubaOp0Hw==",
       "requires": {
-        "@typescript-eslint/types": "5.18.0",
-        "@typescript-eslint/visitor-keys": "5.18.0",
+        "@typescript-eslint/types": "5.19.0",
+        "@typescript-eslint/visitor-keys": "5.19.0",
         "debug": "^4.3.2",
         "globby": "^11.0.4",
         "is-glob": "^4.0.3",
@@ -19695,24 +19900,24 @@
       }
     },
     "@typescript-eslint/utils": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.18.0.tgz",
-      "integrity": "sha512-+hFGWUMMri7OFY26TsOlGa+zgjEy1ssEipxpLjtl4wSll8zy85x0GrUSju/FHdKfVorZPYJLkF3I4XPtnCTewA==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.19.0.tgz",
+      "integrity": "sha512-ZuEckdupXpXamKvFz/Ql8YnePh2ZWcwz7APICzJL985Rp5C2AYcHO62oJzIqNhAMtMK6XvrlBTZeNG8n7gS3lQ==",
       "requires": {
         "@types/json-schema": "^7.0.9",
-        "@typescript-eslint/scope-manager": "5.18.0",
-        "@typescript-eslint/types": "5.18.0",
-        "@typescript-eslint/typescript-estree": "5.18.0",
+        "@typescript-eslint/scope-manager": "5.19.0",
+        "@typescript-eslint/types": "5.19.0",
+        "@typescript-eslint/typescript-estree": "5.19.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "5.18.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.18.0.tgz",
-      "integrity": "sha512-Hf+t+dJsjAKpKSkg3EHvbtEpFFb/1CiOHnvI8bjHgOD4/wAw3gKrA0i94LrbekypiZVanJu3McWJg7rWDMzRTg==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.19.0.tgz",
+      "integrity": "sha512-Ym7zZoMDZcAKWsULi2s7UMLREdVQdScPQ/fKWMYefarCztWlHPFVJo8racf8R0Gc8FAEJ2eD4of8As1oFtnQlQ==",
       "requires": {
-        "@typescript-eslint/types": "5.18.0",
+        "@typescript-eslint/types": "5.19.0",
         "eslint-visitor-keys": "^3.0.0"
       }
     },
@@ -20119,23 +20324,25 @@
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
     },
     "array.prototype.flat": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz",
-      "integrity": "sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0"
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
       }
     },
     "array.prototype.flatmap": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz",
-      "integrity": "sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
       "requires": {
-        "call-bind": "^1.0.0",
+        "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0"
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
       }
     },
     "arrify": {
@@ -20238,6 +20445,18 @@
         "slash": "^3.0.0"
       }
     },
+    "babel-loader": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.4.tgz",
+      "integrity": "sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==",
+      "dev": true,
+      "requires": {
+        "find-cache-dir": "^3.3.1",
+        "loader-utils": "^2.0.0",
+        "make-dir": "^3.1.0",
+        "schema-utils": "^2.6.5"
+      }
+    },
     "babel-plugin-istanbul": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
@@ -20264,9 +20483,9 @@
       }
     },
     "babel-plugin-styled-components": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.6.tgz",
-      "integrity": "sha512-Sk+7o/oa2HfHv3Eh8sxoz75/fFvEdHsXV4grdeHufX0nauCmymlnN0rGhIvfpMQSJMvGutJ85gvCGea4iqmDpg==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz",
+      "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==",
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.16.0",
         "@babel/helper-module-imports": "^7.16.0",
@@ -20415,6 +20634,12 @@
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
       "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg=="
     },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -20443,20 +20668,22 @@
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
     },
     "body-parser": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
-      "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
+      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
       "requires": {
         "bytes": "3.1.2",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.8.1",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.9.7",
-        "raw-body": "2.4.3",
-        "type-is": "~1.6.18"
+        "on-finished": "2.4.1",
+        "qs": "6.10.3",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
       },
       "dependencies": {
         "debug": {
@@ -20648,9 +20875,9 @@
       "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
     },
     "caniuse-lite": {
-      "version": "1.0.30001325",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001325.tgz",
-      "integrity": "sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ=="
+      "version": "1.0.30001328",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001328.tgz",
+      "integrity": "sha512-Ue55jHkR/s4r00FLNiX+hGMMuwml/QGqqzVeMQ5thUewznU2EdULFvI3JR7JJid6OrjJNfFvHY2G2dIjmRaDDQ=="
     },
     "caseless": {
       "version": "0.12.0",
@@ -20734,6 +20961,11 @@
         "validator": "^13.7.0"
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -20889,6 +21121,12 @@
       "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
       "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA=="
     },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
+      "dev": true
+    },
     "compare-func": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
@@ -21193,9 +21431,9 @@
       "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
     },
     "cypress": {
-      "version": "9.5.3",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.5.3.tgz",
-      "integrity": "sha512-ItelIVmqMTnKYbo1JrErhsGgQGjWOxCpHT1TfMvwnIXKXN/OSlPjEK7rbCLYDZhejQL99PmUqul7XORI24Ik0A==",
+      "version": "9.5.4",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.5.4.tgz",
+      "integrity": "sha512-6AyJAD8phe7IMvOL4oBsI9puRNOWxZjl8z1lgixJMcgJ85JJmyKeP6uqNA0dI1z14lmJ7Qklf2MOgP/xdAqJ/Q==",
       "requires": {
         "@cypress/request": "^2.88.10",
         "@cypress/xvfb": "^1.2.4",
@@ -21430,14 +21668,14 @@
       "integrity": "sha512-tfiWc6BQLXNLpNiR5iGd0Ocu3P3VpxfzFiqubLgMfhfOw9WyvgJBd46CClNn9k3qfbjvT//0cf7AlYRX/OslMQ=="
     },
     "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
     "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
     },
     "detect-libc": {
       "version": "2.0.1",
@@ -21601,9 +21839,9 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "electron-to-chromium": {
-      "version": "1.4.106",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.106.tgz",
-      "integrity": "sha512-ZYfpVLULm67K7CaaGP7DmjyeMY4naxsbTy+syVVxT6QHI1Ww8XbJjmr9fDckrhq44WzCrcC5kH3zGpdusxwwqg=="
+      "version": "1.4.107",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.107.tgz",
+      "integrity": "sha512-Huen6taaVrUrSy8o7mGStByba8PfOWWluHNxSHGBrCgEdFVLtvdQDBr9LBCF9Uci8SYxh28QNNMO0oC17wbGAg=="
     },
     "emittery": {
       "version": "0.8.1",
@@ -21616,6 +21854,12 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -21713,9 +21957,9 @@
       }
     },
     "es-abstract": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.2.tgz",
-      "integrity": "sha512-gfSBJoZdlL2xRiOCy0g8gLMryhoe1TlimjzU99L/31Z8QEGIhVQI+EWwt5lT+AuU9SnorVupXFqqOGqGfsyO6w==",
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.4.tgz",
+      "integrity": "sha512-flV8e5g9/xulChMG48Fygk1ptpo4lQRJ0eJYtxJFgi7pklLx7EFcOJ34jnvr8pbWlaFN/AT1cZpe0hiFel9Hqg==",
       "requires": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
@@ -21728,7 +21972,7 @@
         "is-callable": "^1.2.4",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.1",
+        "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
         "is-weakref": "^1.0.2",
         "object-inspect": "^1.12.0",
@@ -21744,6 +21988,14 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
     },
+    "es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
     "es-to-primitive": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
@@ -21831,9 +22083,9 @@
       }
     },
     "eslint": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.12.0.tgz",
-      "integrity": "sha512-it1oBL9alZg1S8UycLm5YDMAkIhtH6FtAzuZs6YvoGVldWjbS08BkAdb/ymP9LlAyq8koANu32U7Ib/w+UNh8Q==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.13.0.tgz",
+      "integrity": "sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==",
       "requires": {
         "@eslint/eslintrc": "^1.2.1",
         "@humanwhocodes/config-array": "^0.9.2",
@@ -22646,6 +22898,23 @@
         "vary": "~1.1.2"
       },
       "dependencies": {
+        "body-parser": {
+          "version": "1.19.2",
+          "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.2.tgz",
+          "integrity": "sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==",
+          "requires": {
+            "bytes": "3.1.2",
+            "content-type": "~1.0.4",
+            "debug": "2.6.9",
+            "depd": "~1.1.2",
+            "http-errors": "1.8.1",
+            "iconv-lite": "0.4.24",
+            "on-finished": "~2.3.0",
+            "qs": "6.9.7",
+            "raw-body": "2.4.3",
+            "type-is": "~1.6.18"
+          }
+        },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -22654,15 +22923,56 @@
             "ms": "2.0.0"
           }
         },
+        "depd": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+          "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+        },
+        "http-errors": {
+          "version": "1.8.1",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+          "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.4",
+            "setprototypeof": "1.2.0",
+            "statuses": ">= 1.5.0 < 2",
+            "toidentifier": "1.0.1"
+          }
+        },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         },
+        "on-finished": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+          "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+          "requires": {
+            "ee-first": "1.1.1"
+          }
+        },
         "path-to-regexp": {
           "version": "0.1.7",
           "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
           "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+        },
+        "qs": {
+          "version": "6.9.7",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
+          "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw=="
+        },
+        "raw-body": {
+          "version": "2.4.3",
+          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
+          "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
+          "requires": {
+            "bytes": "3.1.2",
+            "http-errors": "1.8.1",
+            "iconv-lite": "0.4.24",
+            "unpipe": "1.0.0"
+          }
         }
       }
     },
@@ -22837,9 +23147,28 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "on-finished": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+          "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+          "requires": {
+            "ee-first": "1.1.1"
+          }
         }
       }
     },
+    "find-cache-dir": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
+      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
+      "dev": true,
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^3.0.2",
+        "pkg-dir": "^4.1.0"
+      }
+    },
     "find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -22891,6 +23220,19 @@
         "schema-utils": "^3.1.1",
         "semver": "^7.3.5",
         "tapable": "^2.2.1"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
       }
     },
     "form-data": {
@@ -22923,32 +23265,6 @@
         }
       }
     },
-    "formik": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
-      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
-      "requires": {
-        "deepmerge": "^2.1.1",
-        "hoist-non-react-statics": "^3.3.0",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "react-fast-compare": "^2.0.1",
-        "tiny-warning": "^1.0.2",
-        "tslib": "^1.10.0"
-      },
-      "dependencies": {
-        "deepmerge": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
-        },
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -22968,33 +23284,36 @@
     "frontend": {
       "version": "file:frontend",
       "requires": {
+        "@babel/core": "^7.17.9",
         "@hookform/resolvers": "^2.8.8",
         "@modulz/radix-icons": "^4.0.0",
         "@radix-ui/colors": "^0.1.8",
         "@radix-ui/react-alert-dialog": "^0.1.7",
         "@radix-ui/react-avatar": "^0.1.4",
+        "@radix-ui/react-checkbox": "^0.1.5",
         "@radix-ui/react-dialog": "^0.1.7",
         "@radix-ui/react-dropdown-menu": "^0.1.6",
         "@radix-ui/react-hover-card": "^0.1.5",
         "@radix-ui/react-label": "^0.1.5",
+        "@radix-ui/react-separator": "^0.1.4",
         "@radix-ui/react-tabs": "^0.1.5",
         "@radix-ui/react-toast": "^0.1.1",
-        "@reduxjs/toolkit": "^1.8.1",
+        "@radix-ui/react-tooltip": "^0.1.7",
+        "@react-forked/dnd": "^14.0.2",
         "@stitches/react": "^1.2.7",
         "@testing-library/jest-dom": "^5.16.4",
-        "@testing-library/react": "^13.0.0",
+        "@testing-library/react": "^13.0.1",
         "@types/jest": "^27.4.1",
-        "@types/react": "17.0.43",
-        "@types/react-beautiful-dnd": "^13.1.2",
-        "@types/react-dom": "^17.0.14",
-        "@types/uuid": "^8.3.4",
-        "@typescript-eslint/eslint-plugin": "^5.18.0",
-        "@typescript-eslint/parser": "^5.18.0",
+        "@types/react": "17.0.44",
+        "@types/react-dom": "^18.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.19.0",
+        "@typescript-eslint/parser": "^5.19.0",
         "axios": "^0.26.1",
         "babel-jest": "^27.5.1",
-        "cypress": "^9.5.3",
+        "babel-loader": "^8.2.4",
+        "cypress": "^9.5.4",
         "dotenv": "^16.0.0",
-        "eslint": "^8.12.0",
+        "eslint": "^8.13.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-airbnb-typescript-prettier": "^5.0.0",
@@ -23005,7 +23324,6 @@
         "eslint-plugin-react": "^7.29.4",
         "eslint-plugin-react-hooks": "^4.4.0",
         "fast-json-patch": "^3.1.1",
-        "formik": "^2.2.9",
         "identity-obj-proxy": "^3.0.0",
         "lint-staged": "^12.3.7",
         "next": "^12.1.4",
@@ -23013,10 +23331,10 @@
         "npm": "^8.6.0",
         "prettier": "^2.6.2",
         "react": "^18.0.0",
-        "react-beautiful-dnd": "^13.1.0",
         "react-dom": "^18.0.0",
         "react-hook-form": "^7.29.0",
         "react-loader-spinner": "^6.0.0-0",
+        "react-pro-sidebar": "^0.7.1",
         "react-query": "^3.34.19",
         "react-redux": "^7.2.8",
         "react-test-renderer": "^18.0.0",
@@ -23026,9 +23344,7 @@
         "start-server-and-test": "^1.14.0",
         "ts-jest": "^27.1.4",
         "typescript": "^4.6.3",
-        "uuid": "^8.3.2",
         "webpack": "^5.71.0",
-        "yup": "^0.32.11",
         "zod": "^3.14.4"
       }
     },
@@ -23305,6 +23621,13 @@
       "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
       "requires": {
         "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
       }
     },
     "hosted-git-info": {
@@ -23332,15 +23655,22 @@
       "dev": true
     },
     "http-errors": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
-      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
       "requires": {
-        "depd": "~1.1.2",
+        "depd": "2.0.0",
         "inherits": "2.0.4",
         "setprototypeof": "1.2.0",
-        "statuses": ">= 1.5.0 < 2",
+        "statuses": "2.0.1",
         "toidentifier": "1.0.1"
+      },
+      "dependencies": {
+        "statuses": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+          "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
+        }
       }
     },
     "http-proxy-agent": {
@@ -23411,11 +23741,6 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ=="
     },
-    "immer": {
-      "version": "9.0.12",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz",
-      "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA=="
-    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -24359,9 +24684,9 @@
       }
     },
     "jose": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-4.6.0.tgz",
-      "integrity": "sha512-0hNAkhMBNi4soKSAX4zYOFV+aqJlEz/4j4fregvasJzEVtjDChvWqRjPvHwLqr5hx28Ayr6bsOs1Kuj87V0O8w=="
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.6.1.tgz",
+      "integrity": "sha512-EFnufEivlIB6j7+JwaenYQzdUDs/McajDr9WnhT6EI0WxbexnfuZimpWX1GnobF6OnQsUFmWFXUXdWyZHWdQow=="
     },
     "js-sha3": {
       "version": "0.8.0",
@@ -24645,9 +24970,9 @@
       }
     },
     "libphonenumber-js": {
-      "version": "1.9.50",
-      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.9.50.tgz",
-      "integrity": "sha512-cCzQPChw2XbordcO2LKiw5Htx5leHVfFk/EXkxNHqJfFo7Fndcb1kF5wPJpc316vCJhhikedYnVysMh3Sc7Ocw=="
+      "version": "1.9.51",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.9.51.tgz",
+      "integrity": "sha512-MGidRDs7s2nUybwrB/UjZT4nPXZPYQZQTu/sF3/O2v/DocmD8N6G+a9kwDt2qm7DaOo35XRt7hAIbYL+ml942Q=="
     },
     "lilconfig": {
       "version": "2.0.4",
@@ -24766,9 +25091,20 @@
       }
     },
     "loader-runner": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
-      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw=="
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg=="
+    },
+    "loader-utils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+      "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+      "dev": true,
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      }
     },
     "locate-path": {
       "version": "6.0.0",
@@ -24784,11 +25120,6 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
     "lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -24980,9 +25311,9 @@
       }
     },
     "memoize-one": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
     "memory-pager": {
       "version": "1.5.0",
@@ -25279,11 +25610,6 @@
         "big-integer": "^1.6.16"
       }
     },
-    "nanoclone": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
-      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
-    },
     "nanoid": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.2.tgz",
@@ -25393,9 +25719,9 @@
       "dev": true
     },
     "node-releases": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz",
-      "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg=="
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.3.tgz",
+      "integrity": "sha512-maHFz6OLqYxz+VQyCAtA3PTX4UP/53pa05fyDNc9CwjvJ0yEh6+xBwKsgCxMNhS8taUKBFYxfuiaD9U/55iFaw=="
     },
     "nopt": {
       "version": "5.0.0",
@@ -27009,9 +27335,9 @@
       "integrity": "sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ=="
     },
     "on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "requires": {
         "ee-first": "1.1.1"
       }
@@ -27367,9 +27693,9 @@
       "integrity": "sha512-MufnRFz39aIhs9AMFisonjzTud1PK1bY+jcJLo6m2T9Uh8AqjD77w11eAAawmjUogoGOnipECq7e/1RClIKsxg=="
     },
     "preact-render-to-string": {
-      "version": "5.1.20",
-      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.1.20.tgz",
-      "integrity": "sha512-ivh2oOGzth0o7XqbatWUQ81WQGoJwSqDKP5z917SoqTWYCAr7dlBzMv3SAMTAu3Gr5g47BJwrvyO44H2Y10ubg==",
+      "version": "5.1.21",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.1.21.tgz",
+      "integrity": "sha512-wbMtNU4JpfvbE04iCe7BZ1yLYN8i6NRrq+NhR0fUINjPXGu3ZIc4GM5ScOiwdIP1sPXv9SVETuud/tmQGMvdNQ==",
       "requires": {
         "pretty-format": "^3.8.0"
       },
@@ -27422,12 +27748,6 @@
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
           "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
           "dev": true
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
         }
       }
     },
@@ -27454,13 +27774,15 @@
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
         "react-is": "^16.13.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
       }
     },
-    "property-expr": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.5.tgz",
-      "integrity": "sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA=="
-    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -27510,9 +27832,12 @@
       "dev": true
     },
     "qs": {
-      "version": "6.9.7",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
-      "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw=="
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
     },
     "queue-microtask": {
       "version": "1.2.3",
@@ -27544,12 +27869,12 @@
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
     },
     "raw-body": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.3.tgz",
-      "integrity": "sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
       "requires": {
         "bytes": "3.1.2",
-        "http-errors": "1.8.1",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
       }
@@ -27562,20 +27887,6 @@
         "loose-envify": "^1.1.0"
       }
     },
-    "react-beautiful-dnd": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
-      "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
-      "requires": {
-        "@babel/runtime": "^7.9.2",
-        "css-box-model": "^1.2.0",
-        "memoize-one": "^5.1.1",
-        "raf-schd": "^4.0.2",
-        "react-redux": "^7.2.0",
-        "redux": "^4.0.4",
-        "use-memo-one": "^1.1.1"
-      }
-    },
     "react-dom": {
       "version": "18.0.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
@@ -27585,11 +27896,6 @@
         "scheduler": "^0.21.0"
       }
     },
-    "react-fast-compare": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
-    },
     "react-hook-form": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
@@ -27597,9 +27903,9 @@
       "requires": {}
     },
     "react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "react-loader-spinner": {
       "version": "6.0.0-0",
@@ -27613,6 +27919,17 @@
         "tslib": "^2.3.0"
       }
     },
+    "react-pro-sidebar": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/react-pro-sidebar/-/react-pro-sidebar-0.7.1.tgz",
+      "integrity": "sha512-Iy1X8ce4t5Vqz4CsyzjwokGUE3/IObgmYzS0ins7/2eWKle0SMUPaWdgMKFIVjtVrMr5vmjPbRicq8FxnVaf8A==",
+      "requires": {
+        "@popperjs/core": "^2.4.0",
+        "classnames": "^2.2.6",
+        "react-slidedown": "^2.4.5",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
     "react-query": {
       "version": "3.34.19",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.34.19.tgz",
@@ -27634,13 +27951,6 @@
         "loose-envify": "^1.4.0",
         "prop-types": "^15.7.2",
         "react-is": "^17.0.2"
-      },
-      "dependencies": {
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
-        }
       }
     },
     "react-remove-scroll": {
@@ -27688,6 +27998,14 @@
         "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "react-slidedown": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/react-slidedown/-/react-slidedown-2.4.7.tgz",
+      "integrity": "sha512-HGDfrqo70r1WVE0DwrySPdCT27/2wcZaJYh5kOnmuPSCtjDDJrNkDdn4Ep/cma2VVfwupeAGhbc2pbrGThU6VQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "react-style-singleton": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
@@ -27886,12 +28204,6 @@
         "@babel/runtime": "^7.9.2"
       }
     },
-    "redux-thunk": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
-      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
-      "requires": {}
-    },
     "reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@@ -27941,10 +28253,10 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true
     },
-    "reselect": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
-      "integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "resolve": {
       "version": "1.22.0",
@@ -28072,12 +28384,13 @@
       }
     },
     "schema-utils": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
-      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+      "dev": true,
       "requires": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
         "ajv-keywords": "^3.5.2"
       }
     },
@@ -28124,10 +28437,40 @@
             }
           }
         },
+        "depd": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+          "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+        },
+        "destroy": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+          "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+        },
+        "http-errors": {
+          "version": "1.8.1",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+          "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.4",
+            "setprototypeof": "1.2.0",
+            "statuses": ">= 1.5.0 < 2",
+            "toidentifier": "1.0.1"
+          }
+        },
         "ms": {
           "version": "2.1.3",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
           "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        },
+        "on-finished": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+          "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+          "requires": {
+            "ee-first": "1.1.1"
+          }
         }
       }
     },
@@ -28308,9 +28651,9 @@
       }
     },
     "source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
     "source-map-js": {
       "version": "1.0.2",
@@ -28669,15 +29012,6 @@
           "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
           "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
           "dev": true
-        },
-        "qs": {
-          "version": "6.10.3",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
-          "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
-          "dev": true,
-          "requires": {
-            "side-channel": "^1.0.4"
-          }
         }
       }
     },
@@ -28776,6 +29110,11 @@
           "version": "2.20.3",
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
           "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
         }
       }
     },
@@ -28791,6 +29130,16 @@
         "terser": "^5.7.2"
       },
       "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -28850,11 +29199,6 @@
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
       "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
     },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -28887,11 +29231,6 @@
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
     },
-    "toposort": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
-      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
-    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -29195,6 +29534,14 @@
         "@types/istanbul-lib-coverage": "^2.0.1",
         "convert-source-map": "^1.6.0",
         "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        }
       }
     },
     "validate-npm-package-license": {
@@ -29303,9 +29650,9 @@
       "dev": true
     },
     "webpack": {
-      "version": "5.71.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.71.0.tgz",
-      "integrity": "sha512-g4dFT7CFG8LY0iU5G8nBL6VlkT21Z7dcYDpJAEJV5Q1WLb9UwnFbrem1k7K52ILqEmomN7pnzWFxxE6SlDY56A==",
+      "version": "5.72.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.72.0.tgz",
+      "integrity": "sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==",
       "requires": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -29331,6 +29678,18 @@
         "terser-webpack-plugin": "^5.1.3",
         "watchpack": "^2.3.1",
         "webpack-sources": "^3.2.3"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
       }
     },
     "webpack-node-externals": {
@@ -29519,9 +29878,9 @@
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
     },
     "yargs": {
-      "version": "17.4.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.4.0.tgz",
-      "integrity": "sha512-WJudfrk81yWFSOkZYpAZx4Nt7V4xp7S/uJkX0CnxovMCt1wCE8LNftPpNuF9X/u9gN5nsD7ycYtRcDf2pL3UiA==",
+      "version": "17.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.4.1.tgz",
+      "integrity": "sha512-WSZD9jgobAg3ZKuCQZSa3g9QOJeCCqLoLAykiWgmXnDo9EPnn4RPf5qVTtzgOx66o6/oqhcA5tHtJXpG8pMt3g==",
       "dev": true,
       "requires": {
         "cliui": "^7.0.2",
@@ -29573,20 +29932,6 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
     },
-    "yup": {
-      "version": "0.32.11",
-      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.11.tgz",
-      "integrity": "sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==",
-      "requires": {
-        "@babel/runtime": "^7.15.4",
-        "@types/lodash": "^4.14.175",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "nanoclone": "^0.2.1",
-        "property-expr": "^2.0.4",
-        "toposort": "^2.0.2"
-      }
-    },
     "zod": {
       "version": "3.14.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.14.4.tgz",
diff --git a/package.json b/package.json
index 07bc3a7ef..43a5ae2c4 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,12 @@
     "backend"
   ],
   "devDependencies": {
-    "husky": "^7.0.4",
     "@commitlint/cli": "^16.2.3",
-    "@commitlint/config-conventional": "^16.2.1"
+    "@commitlint/config-conventional": "^16.2.1",
+    "husky": "^7.0.4"
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }