diff --git a/frontend/jest.config.js b/frontend/jest.config.js
index 36a48b155..bd2eba7a4 100644
--- a/frontend/jest.config.js
+++ b/frontend/jest.config.js
@@ -17,7 +17,11 @@ const customJestConfig = {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
   collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.stories.tsx',
+    '!src/{schema,store,stories,styles,types}/**/*.*',
+  ],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
diff --git a/frontend/package.json b/frontend/package.json
index b0992fa20..913b3dece 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,7 @@
     "pre-commit": "lint-staged",
     "cy:run": "cypress run",
     "cy:ci": "start-server-and-test dev http-get://localhost:3000 cy:run",
-    "jest": "jest",
+    "jest": "jest --coverage",
     "test:watch": "jest --watchAll",
     "test:ci": "jest --ci",
     "storybook": "start-storybook -p 6006",
diff --git a/frontend/src/components/Board/AddCardOrComment.tsx b/frontend/src/components/Board/AddCardOrComment.tsx
index c7dd94d10..da1809bc5 100644
--- a/frontend/src/components/Board/AddCardOrComment.tsx
+++ b/frontend/src/components/Board/AddCardOrComment.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { joiResolver } from '@hookform/resolvers/joi';
-import Button from '@/components/Primitives/Button';
-import Checkbox from '@/components/Primitives/Checkbox';
-import Flex from '@/components/Primitives/Flex';
-import TextArea from '@/components/Primitives/TextArea';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Checkbox from '@/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox';
+import Flex from '@/components/Primitives/Layout/Flex';
+import TextArea from '@/components/Primitives/Inputs/TextArea/TextArea';
 import useCards from '@/hooks/useCards';
 import useComments from '@/hooks/useComments';
 import { SchemaAddCommentForm } from '@/schema/schemaAddCommentForm';
@@ -15,7 +15,7 @@ import AddCommentDto from '@/types/comment/addComment.dto';
 import UpdateCommentDto from '@/types/comment/updateComment.dto';
 import { styled } from '@/styles/stitches/stitches.config';
 import { CARD_TEXT_DEFAULT } from '@/utils/constants';
-import Icon from '../Primitives/Icon';
+import Icon from '../Primitives/Icons/Icon/Icon';
 
 const StyledForm = styled('form', Flex, { width: '100%' });
 
diff --git a/frontend/src/components/Board/Card/CardBoard.tsx b/frontend/src/components/Board/Card/CardBoard.tsx
index 82e7f0e44..35f193647 100644
--- a/frontend/src/components/Board/Card/CardBoard.tsx
+++ b/frontend/src/components/Board/Card/CardBoard.tsx
@@ -3,9 +3,9 @@ import { Draggable } from '@hello-pangea/dnd';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { cardBlur } from '@/helper/board/blurFilter';
 import { getCommentsFromCardGroup } from '@/helper/board/comments';
 import { BoardUser } from '@/types/board/board.user';
diff --git a/frontend/src/components/Board/Card/CardFooter.tsx b/frontend/src/components/Board/Card/CardFooter.tsx
index 0e64f4008..59447efd4 100644
--- a/frontend/src/components/Board/Card/CardFooter.tsx
+++ b/frontend/src/components/Board/Card/CardFooter.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import Icon from '@/components/Primitives/Icon';
-import Avatar from '@/components/Primitives/Avatar/Avatar';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Avatar from '@/components/Primitives/Avatars/Avatar/Avatar';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { getCardVotes } from '@/helper/board/votes';
 import useVotes from '@/hooks/useVotes';
 import { BoardUser } from '@/types/board/board.user';
diff --git a/frontend/src/components/Board/Card/CardItem/CardItem.tsx b/frontend/src/components/Board/Card/CardItem/CardItem.tsx
index af951c762..8f177150b 100644
--- a/frontend/src/components/Board/Card/CardItem/CardItem.tsx
+++ b/frontend/src/components/Board/Card/CardItem/CardItem.tsx
@@ -3,8 +3,8 @@ import React, { useState } from 'react';
 import { styled } from '@/styles/stitches/stitches.config';
 
 import AddCardOrComment from '@/components/Board/AddCardOrComment';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { CardItemType } from '@/types/card/cardItem';
 import useCards from '@/hooks/useCards';
 import CardFooter from '../CardFooter';
diff --git a/frontend/src/components/Board/Card/CardItem/CardItemList.tsx b/frontend/src/components/Board/Card/CardItem/CardItemList.tsx
index 2f9e7db53..b6d4c0a77 100644
--- a/frontend/src/components/Board/Card/CardItem/CardItemList.tsx
+++ b/frontend/src/components/Board/Card/CardItem/CardItemList.tsx
@@ -1,6 +1,6 @@
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
 import { CardItemType } from '@/types/card/cardItem';
 import CardItem from './CardItem';
 
diff --git a/frontend/src/components/Board/Card/PopoverSettings.tsx b/frontend/src/components/Board/Card/PopoverSettings.tsx
index 3942cb362..7550029ac 100644
--- a/frontend/src/components/Board/Card/PopoverSettings.tsx
+++ b/frontend/src/components/Board/Card/PopoverSettings.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import {
   Popover,
   PopoverContent,
   PopoverItem,
   PopoverTrigger,
-} from '@/components/Primitives/Popover';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Popovers/Popover/Popover';
+import Text from '@/components/Primitives/Text/Text';
 import useCards from '@/hooks/useCards';
 import { CardItemType } from '@/types/card/cardItem';
-import ConfirmationDialog from '@/components/Primitives/ConfirmationDialog';
+import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
 
 interface PopoverSettingsContentProps {
   isItem: boolean;
diff --git a/frontend/src/components/Board/Column/Column.tsx b/frontend/src/components/Board/Column/Column.tsx
index c2d4e186a..defffcbca 100644
--- a/frontend/src/components/Board/Column/Column.tsx
+++ b/frontend/src/components/Board/Column/Column.tsx
@@ -1,15 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Draggable, Droppable } from '@hello-pangea/dnd';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import { getCardVotes } from '@/helper/board/votes';
 import { ColumnBoardType } from '@/types/column';
 import { useSetRecoilState } from 'recoil';
 import { filteredColumnsState } from '@/store/board/atoms/filterColumns';
 import { countColumnCards } from '@/helper/board/countCards';
-import Icon from '@/components/Primitives/Icon';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import { useResizeDetector } from 'react-resize-detector';
 import AddCardOrComment from '../AddCardOrComment';
 import CardsList from './CardsList';
diff --git a/frontend/src/components/Board/Column/partials/ColorSquare/index.tsx b/frontend/src/components/Board/Column/partials/ColorSquare/index.tsx
index 60b174ae1..53849b727 100644
--- a/frontend/src/components/Board/Column/partials/ColorSquare/index.tsx
+++ b/frontend/src/components/Board/Column/partials/ColorSquare/index.tsx
@@ -1,4 +1,4 @@
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { PopoverItemSquareStyled } from '../OptionsMenu/styles';
 
 type ColorSquareProps = {
diff --git a/frontend/src/components/Board/Column/partials/OptionsMenu/index.tsx b/frontend/src/components/Board/Column/partials/OptionsMenu/index.tsx
index fa8f1f7eb..3fc10864e 100644
--- a/frontend/src/components/Board/Column/partials/OptionsMenu/index.tsx
+++ b/frontend/src/components/Board/Column/partials/OptionsMenu/index.tsx
@@ -1,17 +1,17 @@
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
   PopoverItem,
-} from '@/components/Primitives/Popover';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Popovers/Popover/Popover';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import useColumn from '@/hooks/useColumn';
 import CardType from '@/types/card/card';
 import { useState } from 'react';
-import ConfirmationDialog from '@/components/Primitives/ConfirmationDialog';
+import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
 import useBoard from '@/hooks/useBoard';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import { useRecoilValue } from 'recoil';
diff --git a/frontend/src/components/Board/Column/partials/OptionsMenu/styles.tsx b/frontend/src/components/Board/Column/partials/OptionsMenu/styles.tsx
index 5057f217e..38e5a9e02 100644
--- a/frontend/src/components/Board/Column/partials/OptionsMenu/styles.tsx
+++ b/frontend/src/components/Board/Column/partials/OptionsMenu/styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import { PopoverItem } from '@/components/Primitives/Popover';
+import { PopoverItem } from '@/components/Primitives/Popovers/Popover/Popover';
 
 const PopoverItemSquareStyled = styled(PopoverItem, {
   alignItems: 'center',
diff --git a/frontend/src/components/Board/Column/partials/SortMenu.tsx b/frontend/src/components/Board/Column/partials/SortMenu.tsx
index b3ff2fb35..8578811fb 100644
--- a/frontend/src/components/Board/Column/partials/SortMenu.tsx
+++ b/frontend/src/components/Board/Column/partials/SortMenu.tsx
@@ -1,12 +1,12 @@
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
   PopoverItem,
   PopoverClose,
-} from '@/components/Primitives/Popover';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Popovers/Popover/Popover';
+import Text from '@/components/Primitives/Text/Text';
 
 type Props = {
   setFilter: (value: 'desc' | 'asc' | undefined) => void;
diff --git a/frontend/src/components/Board/Column/partials/SwitchDefaultText/index.tsx b/frontend/src/components/Board/Column/partials/SwitchDefaultText/index.tsx
index cd681979c..dd660f8e1 100644
--- a/frontend/src/components/Board/Column/partials/SwitchDefaultText/index.tsx
+++ b/frontend/src/components/Board/Column/partials/SwitchDefaultText/index.tsx
@@ -1,5 +1,5 @@
-import Flex from '@/components/Primitives/Flex';
-import Switch from '@/components/Primitives/Switch';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Switch from '@/components/Primitives/Inputs/Switches/Switch/Switch';
 
 type SwitchDefaultTextProps = {
   isChecked: boolean;
diff --git a/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx b/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
index 0c5063e9b..18c76c773 100644
--- a/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
+++ b/frontend/src/components/Board/Column/partials/UpdateColumnDialog/index.tsx
@@ -4,9 +4,9 @@ import {
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
-} from '@/components/Primitives/AlertDialog';
-import Flex from '@/components/Primitives/Flex';
-import Input from '@/components/Primitives/Input';
+} from '@/components/Primitives/Alerts/AlertDialog/AlertDialog';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
 import { SchemaChangeColumnName } from '@/schema/schemaChangeColumnName';
 import { useRef } from 'react';
 import { joiResolver } from '@hookform/resolvers/joi';
@@ -14,8 +14,8 @@ import { FormProvider, useForm, useWatch } from 'react-hook-form';
 import { styled } from '@/styles/stitches/stitches.config';
 import useColumn from '@/hooks/useColumn';
 import CardType from '@/types/card/card';
-import Text from '@/components/Primitives/Text';
-import TextArea from '@/components/Primitives/TextArea';
+import Text from '@/components/Primitives/Text/Text';
+import TextArea from '@/components/Primitives/Inputs/TextArea/TextArea';
 
 type UpdateColumnNameProps = {
   boardId: string;
diff --git a/frontend/src/components/Board/Column/styles.tsx b/frontend/src/components/Board/Column/styles.tsx
index ddf2fe910..4333a166b 100644
--- a/frontend/src/components/Board/Column/styles.tsx
+++ b/frontend/src/components/Board/Column/styles.tsx
@@ -1,8 +1,8 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 
 const CardsContainer = styled(Flex, {
   mt: '$20',
diff --git a/frontend/src/components/Board/Comment/Comment.tsx b/frontend/src/components/Board/Comment/Comment.tsx
index 2c486938d..568e74c96 100644
--- a/frontend/src/components/Board/Comment/Comment.tsx
+++ b/frontend/src/components/Board/Comment/Comment.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import useComments from '@/hooks/useComments';
 import CommentType from '@/types/comment/comment';
 import DeleteCommentDto from '@/types/comment/deleteComment.dto';
diff --git a/frontend/src/components/Board/Comment/Comments.tsx b/frontend/src/components/Board/Comment/Comments.tsx
index 57de25244..218b73a70 100644
--- a/frontend/src/components/Board/Comment/Comments.tsx
+++ b/frontend/src/components/Board/Comment/Comments.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import { CardItemType } from '@/types/card/cardItem';
 import CommentType from '@/types/comment/comment';
 import { BoardPhases } from '@/utils/enums/board.phases';
diff --git a/frontend/src/components/Board/Comment/PopoverSettings.tsx b/frontend/src/components/Board/Comment/PopoverSettings.tsx
index 87c15d0ff..dad56a17a 100644
--- a/frontend/src/components/Board/Comment/PopoverSettings.tsx
+++ b/frontend/src/components/Board/Comment/PopoverSettings.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import {
   Popover,
   PopoverContent,
   PopoverItem,
   PopoverTrigger,
-} from '@/components/Primitives/Popover';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Popovers/Popover/Popover';
+import Text from '@/components/Primitives/Text/Text';
 
 interface PopoverSettingsContentProps {
   setEditCard: () => void;
diff --git a/frontend/src/components/Board/DragDropArea/index.tsx b/frontend/src/components/Board/DragDropArea/index.tsx
index dbefdef96..4c9e2beb4 100644
--- a/frontend/src/components/Board/DragDropArea/index.tsx
+++ b/frontend/src/components/Board/DragDropArea/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { DragDropContext, DropResult, BeforeCapture, Droppable } from '@hello-pangea/dnd';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { countBoardCards } from '@/helper/board/countCards';
 import useCards from '@/hooks/useCards';
 import { toastState } from '@/store/toast/atom/toast.atom';
diff --git a/frontend/src/components/Board/RegularBoard/ParticipantsList/ParticipantCard.tsx/index.tsx b/frontend/src/components/Board/RegularBoard/ParticipantsList/ParticipantCard.tsx/index.tsx
index f00cd7650..eaa26d1e1 100644
--- a/frontend/src/components/Board/RegularBoard/ParticipantsList/ParticipantCard.tsx/index.tsx
+++ b/frontend/src/components/Board/RegularBoard/ParticipantsList/ParticipantCard.tsx/index.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Icon from '@/components/Primitives/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import { InnerContainer } from '@/components/Teams/styles';
 import { BoardUser, UpdateBoardUser } from '@/types/board/board.user';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import { useRouter } from 'next/router';
-import ConfigurationSwitch from '@/components/Primitives/ConfigurationSwitch';
+import ConfigurationSwitch from '@/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import useParticipants from '@/hooks/useParticipants';
-import Button from '@/components/Primitives/Button';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 type CardBodyProps = {
   member: BoardUser;
diff --git a/frontend/src/components/Board/RegularBoard/ParticipantsList/ParticipantsLayout.tsx b/frontend/src/components/Board/RegularBoard/ParticipantsList/ParticipantsLayout.tsx
index e6792a14e..c2e567203 100644
--- a/frontend/src/components/Board/RegularBoard/ParticipantsList/ParticipantsLayout.tsx
+++ b/frontend/src/components/Board/RegularBoard/ParticipantsList/ParticipantsLayout.tsx
@@ -1,9 +1,9 @@
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import { ContentSection } from '@/components/layouts/Layout/styles';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import ListMembersDialog from '@/components/Teams/Team/ListMembers/ListMembersDialog';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import UserListDialog from '@/components/Primitives/Dialogs/UserListDialog/UserListDialog';
 import useParticipants from '@/hooks/useParticipants';
 import { boardParticipantsState } from '@/store/board/atoms/board.atom';
 import { usersListState } from '@/store/team/atom/team.atom';
@@ -89,13 +89,13 @@ const ParticipantsLayout = ({ children, hasPermissionsToEdit }: Props) => {
         </Flex>
         {children}
       </Flex>
-      <ListMembersDialog
+      <UserListDialog
         usersList={usersList}
         isOpen={isOpen}
         setIsOpen={setIsOpen}
-        saveUsers={saveParticipants}
+        confirmationHandler={saveParticipants}
         title="Board Participants"
-        btnTitle="Add/remove participants"
+        confirmationLabel="Add/remove participants"
       />
     </ContentSection>
   );
diff --git a/frontend/src/components/Board/RegularBoard/ParticipantsList/index.tsx b/frontend/src/components/Board/RegularBoard/ParticipantsList/index.tsx
index 3ededdaea..4befad0f6 100644
--- a/frontend/src/components/Board/RegularBoard/ParticipantsList/index.tsx
+++ b/frontend/src/components/Board/RegularBoard/ParticipantsList/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { ScrollableContent } from '@/components/Boards/MyBoards/styles';
 import { boardParticipantsState } from '@/store/board/atoms/board.atom';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
diff --git a/frontend/src/components/Board/RegularBoard/ReagularHeader/HeaderParticipants.tsx b/frontend/src/components/Board/RegularBoard/ReagularHeader/HeaderParticipants.tsx
index 97edfd491..d1f074315 100644
--- a/frontend/src/components/Board/RegularBoard/ReagularHeader/HeaderParticipants.tsx
+++ b/frontend/src/components/Board/RegularBoard/ReagularHeader/HeaderParticipants.tsx
@@ -1,12 +1,12 @@
 import { useSession } from 'next-auth/react';
 import { useRecoilValue } from 'recoil';
 
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import { boardInfoState } from '@/store/board/atoms/board.atom';
 import { StyledBoardTitle } from '@/components/CardBoard/CardBody/CardTitle/partials/Title/styles';
-import AvatarGroup from '@/components/Primitives/Avatar/AvatarGroup';
+import AvatarGroup from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
 
 interface Props {
   isParticipantsPage?: boolean;
@@ -31,13 +31,7 @@ const HeaderParticipants = ({ isParticipantsPage }: Props) => {
             <Text size="sm">Participants</Text>
           </StyledBoardTitle>
         )}
-        <AvatarGroup
-          responsible={false}
-          listUsers={users}
-          teamAdmins={false}
-          userId={session?.user.id}
-          isClickable
-        />
+        <AvatarGroup listUsers={users} userId={session?.user.id} isClickable />
       </Flex>
       <Flex align="center">
         <Separator orientation="vertical" size="lg" />
@@ -46,13 +40,7 @@ const HeaderParticipants = ({ isParticipantsPage }: Props) => {
         <Text color="primary300" size="sm">
           Responsibles
         </Text>
-        <AvatarGroup
-          responsible
-          listUsers={users}
-          teamAdmins={false}
-          userId={session?.user.id}
-          isClickable
-        />
+        <AvatarGroup responsible listUsers={users} userId={session?.user.id} isClickable />
       </Flex>
     </Flex>
   );
diff --git a/frontend/src/components/Board/RegularBoard/ReagularHeader/index.tsx b/frontend/src/components/Board/RegularBoard/ReagularHeader/index.tsx
index 70bae4ffe..a8d25adb7 100644
--- a/frontend/src/components/Board/RegularBoard/ReagularHeader/index.tsx
+++ b/frontend/src/components/Board/RegularBoard/ReagularHeader/index.tsx
@@ -1,11 +1,11 @@
 import { useRecoilValue } from 'recoil';
 
-import Breadcrumb from '@/components/Primitives/Breadcrumb';
-import Icon from '@/components/Primitives/Icon';
+import Breadcrumb from '@/components/Primitives/Breadcrumb/Breadcrumb';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import LogoIcon from '@/components/icons/Logo';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import { boardInfoState } from '@/store/board/atoms/board.atom';
 import { BreadcrumbType } from '@/types/board/Breadcrumb';
 import Link from 'next/link';
diff --git a/frontend/src/components/Board/RegularBoard/index.tsx b/frontend/src/components/Board/RegularBoard/index.tsx
index 6439b7a97..c52da4775 100644
--- a/frontend/src/components/Board/RegularBoard/index.tsx
+++ b/frontend/src/components/Board/RegularBoard/index.tsx
@@ -4,10 +4,10 @@ import { Container } from '@/styles/pages/boards/board.styles';
 import DragDropArea from '@/components/Board/DragDropArea';
 import { BoardSettings } from '@/components/Board/Settings';
 import Timer from '@/components/Board/Timer';
-import Icon from '@/components/Primitives/Icon';
-import LoadingPage from '@/components/Primitives/Loading/Page';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { boardInfoState } from '@/store/board/atoms/board.atom';
 import EmitEvent from '@/types/events/emit-event.type';
 import ListenEvent from '@/types/events/listen-event.type';
diff --git a/frontend/src/components/Board/Settings/index.tsx b/frontend/src/components/Board/Settings/index.tsx
index a1770c9f5..d44b72d54 100644
--- a/frontend/src/components/Board/Settings/index.tsx
+++ b/frontend/src/components/Board/Settings/index.tsx
@@ -5,12 +5,12 @@ import { joiResolver } from '@hookform/resolvers/joi';
 import { Accordion } from '@radix-ui/react-accordion';
 import { deepClone } from 'fast-json-patch';
 
-import Icon from '@/components/Primitives/Icon';
-import Avatar from '@/components/Primitives/Avatar/Avatar';
-import Flex from '@/components/Primitives/Flex';
-import Input from '@/components/Primitives/Input';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Avatar from '@/components/Primitives/Avatars/Avatar/Avatar';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import useBoard from '@/hooks/useBoard';
 import SchemaUpdateBoard from '@/schema/schemaUpdateBoardForm';
 import { boardInfoState, deletedColumnsState } from '@/store/board/atoms/board.atom';
@@ -19,12 +19,12 @@ import { BoardUserToAdd } from '@/types/board/board.user';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import { getInitials } from '@/utils/getInitials';
 import isEmpty from '@/utils/isEmpty';
-import Dialog from '@/components/Primitives/Dialog';
+import Dialog from '@/components/Primitives/Dialogs/Dialog/Dialog';
 import { styled } from '@/styles/stitches/stitches.config';
 import { ScrollableContent } from '@/components/Boards/MyBoards/ListBoardMembers/styles';
-import Button from '@/components/Primitives/Button';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 import ColumnType, { CreateColumn } from '@/types/column';
-import ConfigurationSwitch from '../../Primitives/ConfigurationSwitch';
+import ConfigurationSwitch from '../../Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch';
 import { ConfigurationSettings } from './partials/ConfigurationSettings';
 import { TeamResponsibleSettings } from './partials/TeamResponsible';
 import { ColumnBoxAndDelete } from './partials/Columns/ColumnBoxAndDelete';
diff --git a/frontend/src/components/Board/Settings/partials/Columns/ColumnBoxAndDelete.tsx b/frontend/src/components/Board/Settings/partials/Columns/ColumnBoxAndDelete.tsx
index 7c6a23394..6de062c58 100644
--- a/frontend/src/components/Board/Settings/partials/Columns/ColumnBoxAndDelete.tsx
+++ b/frontend/src/components/Board/Settings/partials/Columns/ColumnBoxAndDelete.tsx
@@ -1,8 +1,8 @@
-import Button from '@/components/Primitives/Button';
-import ConfirmationDialog from '@/components/Primitives/ConfirmationDialog';
-import Flex from '@/components/Primitives/Flex';
-import Icon from '@/components/Primitives/Icon';
-import Input from '@/components/Primitives/Input';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Input from '@/components/Primitives/Inputs/Input/Input';
 import { deletedColumnsState } from '@/store/board/atoms/board.atom';
 import { useFormContext } from 'react-hook-form';
 import { useRecoilState } from 'recoil';
diff --git a/frontend/src/components/Board/Settings/partials/Columns/DisabledDeleteButton.tsx b/frontend/src/components/Board/Settings/partials/Columns/DisabledDeleteButton.tsx
index 52aa19eef..2622b6d36 100644
--- a/frontend/src/components/Board/Settings/partials/Columns/DisabledDeleteButton.tsx
+++ b/frontend/src/components/Board/Settings/partials/Columns/DisabledDeleteButton.tsx
@@ -1,6 +1,6 @@
-import Flex from '@/components/Primitives/Flex';
-import Tooltip from '@/components/Primitives/Tooltip';
-import Icon from '@/components/Primitives/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 
 const DisabledDeleteColumnButton = () => (
   <Tooltip content="Your board must have at least one column.">
diff --git a/frontend/src/components/Board/Settings/partials/Columns/index.tsx b/frontend/src/components/Board/Settings/partials/Columns/index.tsx
index 3c41f4654..c23feb562 100644
--- a/frontend/src/components/Board/Settings/partials/Columns/index.tsx
+++ b/frontend/src/components/Board/Settings/partials/Columns/index.tsx
@@ -1,5 +1,5 @@
-import Text from '@/components/Primitives/Text';
-import Flex from '@/components/Primitives/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
 import {
   StyledAccordionItem,
   StyledAccordionHeader,
diff --git a/frontend/src/components/Board/Settings/partials/ConfigurationSettings/index.tsx b/frontend/src/components/Board/Settings/partials/ConfigurationSettings/index.tsx
index 387e55293..ee6cbd91e 100644
--- a/frontend/src/components/Board/Settings/partials/ConfigurationSettings/index.tsx
+++ b/frontend/src/components/Board/Settings/partials/ConfigurationSettings/index.tsx
@@ -1,5 +1,5 @@
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import {
   StyledAccordionItem,
   StyledAccordionHeader,
diff --git a/frontend/src/components/Board/Settings/partials/TeamResponsible/index.tsx b/frontend/src/components/Board/Settings/partials/TeamResponsible/index.tsx
index 20cc5050d..8d3784664 100644
--- a/frontend/src/components/Board/Settings/partials/TeamResponsible/index.tsx
+++ b/frontend/src/components/Board/Settings/partials/TeamResponsible/index.tsx
@@ -1,5 +1,5 @@
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import {
   StyledAccordionItem,
   StyledAccordionHeader,
diff --git a/frontend/src/components/Board/Settings/styles.tsx b/frontend/src/components/Board/Settings/styles.tsx
index aacd598f3..efe7bbff0 100644
--- a/frontend/src/components/Board/Settings/styles.tsx
+++ b/frontend/src/components/Board/Settings/styles.tsx
@@ -2,7 +2,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 
 import { keyframes, styled } from '@/styles/stitches/stitches.config';
 
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 
 /**
  * Accordion Animations
diff --git a/frontend/src/components/Board/SplitBoard/AlertGoToMainBoard/index.tsx b/frontend/src/components/Board/SplitBoard/AlertGoToMainBoard/index.tsx
index e96b9e88f..a85f0b45e 100644
--- a/frontend/src/components/Board/SplitBoard/AlertGoToMainBoard/index.tsx
+++ b/frontend/src/components/Board/SplitBoard/AlertGoToMainBoard/index.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
-import AlertBox from '@/components/Primitives/AlertBox';
-import Button from '@/components/Primitives/Button';
+import AlertBox from '@/components/Primitives/Alerts/AlertBox/AlertBox';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 type Props = {
   submitedAt: string | Date;
diff --git a/frontend/src/components/Board/SplitBoard/Header/index.tsx b/frontend/src/components/Board/SplitBoard/Header/index.tsx
index 18732e9a7..3cfbab20b 100644
--- a/frontend/src/components/Board/SplitBoard/Header/index.tsx
+++ b/frontend/src/components/Board/SplitBoard/Header/index.tsx
@@ -3,13 +3,13 @@ import { useSession } from 'next-auth/react';
 import { useRecoilValue } from 'recoil';
 import { Popover, PopoverPortal, PopoverTrigger } from '@radix-ui/react-popover';
 
-import Breadcrumb from '@/components/Primitives/Breadcrumb';
-import Icon from '@/components/Primitives/Icon';
+import Breadcrumb from '@/components/Primitives/Breadcrumb/Breadcrumb';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import LogoIcon from '@/components/icons/Logo';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import { boardInfoState } from '@/store/board/atoms/board.atom';
 import BoardType from '@/types/board/board';
 import { BoardUserNoPopulated } from '@/types/board/board.user';
@@ -21,7 +21,7 @@ import { StyledBoardTitle } from '@/components/CardBoard/CardBody/CardTitle/part
 import { ListBoardMembers } from '@/components/Boards/MyBoards/ListBoardMembers';
 import { useMemo, useState } from 'react';
 import { User } from '@/types/user/user';
-import AvatarGroup from '@/components/Primitives/Avatar/AvatarGroup';
+import AvatarGroup from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
 import { BoardPhases } from '@/utils/enums/board.phases';
 import {
   BoardCounter,
@@ -174,13 +174,7 @@ const BoardHeader = () => {
                   {`Sub-team ${boardNumber}`}
                 </Text>
               </StyledBoardTitle>
-              <AvatarGroup
-                listUsers={users}
-                responsible={false}
-                teamAdmins={false}
-                userId={session!.user.id}
-                hasDrawer
-              />
+              <AvatarGroup listUsers={users} userId={session!.user.id} hasDrawer />
             </Flex>
 
             <Separator orientation="vertical" size="lg" />
@@ -188,13 +182,7 @@ const BoardHeader = () => {
               <Text color="primary300" size="sm">
                 Responsible
               </Text>
-              <AvatarGroup
-                responsible
-                listUsers={users}
-                teamAdmins={false}
-                userId={session!.user.id}
-                hasDrawer
-              />
+              <AvatarGroup responsible listUsers={users} userId={session!.user.id} hasDrawer />
             </Flex>
             <ListBoardMembers
               boardMembers={boardMembers}
@@ -221,13 +209,7 @@ const BoardHeader = () => {
                     {team.name}
                   </Text>
                 </StyledBoardTitle>
-                <AvatarGroup
-                  listUsers={teamUsers}
-                  responsible={false}
-                  teamAdmins={false}
-                  userId={session!.user.id}
-                  isClickable
-                />
+                <AvatarGroup listUsers={teamUsers} userId={session!.user.id} isClickable />
               </Flex>
               {!isEmpty(
                 teamUsers.filter((user: TeamUser) => user.role === TeamUserRoles.ADMIN),
@@ -241,7 +223,6 @@ const BoardHeader = () => {
                     <AvatarGroup
                       teamAdmins
                       listUsers={teamUsers}
-                      responsible={false}
                       userId={session!.user.id}
                       isClickable
                     />
@@ -262,8 +243,6 @@ const BoardHeader = () => {
                     <AvatarGroup
                       stakeholders
                       listUsers={teamUsers}
-                      responsible={false}
-                      teamAdmins={false}
                       userId={session!.user.id}
                       isClickable
                     />
diff --git a/frontend/src/components/Board/Timer/index.tsx b/frontend/src/components/Board/Timer/index.tsx
index 24fd9e4c4..2b4c13c34 100644
--- a/frontend/src/components/Board/Timer/index.tsx
+++ b/frontend/src/components/Board/Timer/index.tsx
@@ -6,8 +6,8 @@ import {
   TimePanelText,
   TimerContainer,
 } from '@/components/Board/Timer/styles';
-import Button from '@/components/Primitives/Button';
-import Icon from '@/components/Primitives/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import useTimer from '@/hooks/useTimer';
 import EmitEvent from '@/types/events/emit-event.type';
 import ListenEvent from '@/types/events/listen-event.type';
diff --git a/frontend/src/components/Boards/Filters/FilterBoards.tsx b/frontend/src/components/Boards/Filters/FilterBoards.tsx
index f31698d8e..b29a5e1c7 100644
--- a/frontend/src/components/Boards/Filters/FilterBoards.tsx
+++ b/frontend/src/components/Boards/Filters/FilterBoards.tsx
@@ -1,7 +1,7 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { filterTeamBoardsState } from '@/store/board/atoms/board.atom';
 import { useRecoilState } from 'recoil';
 import FilterSelect from './FilterSelect';
diff --git a/frontend/src/components/Boards/Filters/FilterSelect.tsx b/frontend/src/components/Boards/Filters/FilterSelect.tsx
index 52c665522..05198bc2b 100644
--- a/frontend/src/components/Boards/Filters/FilterSelect.tsx
+++ b/frontend/src/components/Boards/Filters/FilterSelect.tsx
@@ -1,8 +1,8 @@
 import Select, { ControlProps, components } from 'react-select';
 
 import { styled } from '@/styles/stitches/stitches.config';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { filterTeamBoardsState } from '@/store/board/atoms/board.atom';
 import { useRecoilState } from 'recoil';
 import { filterByTeamSelectStyles } from './styles';
diff --git a/frontend/src/components/Boards/MyBoards/ListBoardMembers/FilterBoardMembers/index.tsx b/frontend/src/components/Boards/MyBoards/ListBoardMembers/FilterBoardMembers/index.tsx
index 253ce4025..8d3944c0a 100644
--- a/frontend/src/components/Boards/MyBoards/ListBoardMembers/FilterBoardMembers/index.tsx
+++ b/frontend/src/components/Boards/MyBoards/ListBoardMembers/FilterBoardMembers/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Avatar from '@/components/Primitives/Avatar/Avatar';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Avatar from '@/components/Primitives/Avatars/Avatar/Avatar';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { User } from '@/types/user/user';
 import { getInitials } from '@/utils/getInitials';
 
diff --git a/frontend/src/components/Boards/MyBoards/ListBoardMembers/index.tsx b/frontend/src/components/Boards/MyBoards/ListBoardMembers/index.tsx
index 7b9fd2395..bbeb07d1e 100644
--- a/frontend/src/components/Boards/MyBoards/ListBoardMembers/index.tsx
+++ b/frontend/src/components/Boards/MyBoards/ListBoardMembers/index.tsx
@@ -4,7 +4,7 @@ import { User } from '@/types/user/user';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
 import isEmpty from '@/utils/isEmpty';
-import Dialog from '@/components/Primitives/Dialog';
+import Dialog from '@/components/Primitives/Dialogs/Dialog/Dialog';
 import { FilterBoardMembers } from './FilterBoardMembers';
 import { ScrollableContent } from './styles';
 
diff --git a/frontend/src/components/Boards/MyBoards/ListBoardMembers/styles.tsx b/frontend/src/components/Boards/MyBoards/ListBoardMembers/styles.tsx
index 1745e551a..c3bbd3cd1 100644
--- a/frontend/src/components/Boards/MyBoards/ListBoardMembers/styles.tsx
+++ b/frontend/src/components/Boards/MyBoards/ListBoardMembers/styles.tsx
@@ -1,5 +1,5 @@
 import { styled } from '../../../../styles/stitches/stitches.config';
-import Flex from '../../../Primitives/Flex';
+import Flex from '../../../Primitives/Layout/Flex';
 
 const ScrollableContent = styled(Flex, {
   py: '$24',
diff --git a/frontend/src/components/Boards/MyBoards/ListBoards/index.tsx b/frontend/src/components/Boards/MyBoards/ListBoards/index.tsx
index 72d98de83..c50ef5881 100644
--- a/frontend/src/components/Boards/MyBoards/ListBoards/index.tsx
+++ b/frontend/src/components/Boards/MyBoards/ListBoards/index.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import BoardType from '@/types/board/board';
-import LoadingPage from '@/components/Primitives/Loading/Page';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
 import CardBody from '@/components/CardBoard/CardBody/CardBody';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Icon from '@/components/Primitives/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import { teamsListState } from '@/store/team/atom/team.atom';
 import { Team } from '@/types/team/team';
 import Link from 'next/link';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
-import Button from '@/components/Primitives/Button';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 import { ScrollableContent } from '../styles';
 import TeamHeader from '../../TeamHeader';
 
diff --git a/frontend/src/components/Boards/MyBoards/ListBoardsByTeam/index.tsx b/frontend/src/components/Boards/MyBoards/ListBoardsByTeam/index.tsx
index af78579a8..6891048f2 100644
--- a/frontend/src/components/Boards/MyBoards/ListBoardsByTeam/index.tsx
+++ b/frontend/src/components/Boards/MyBoards/ListBoardsByTeam/index.tsx
@@ -7,7 +7,7 @@ import { useSetRecoilState } from 'recoil';
 import { toastState } from '@/store/toast/atom/toast.atom';
 import BoardType from '@/types/board/board';
 import { Team } from '@/types/team/team';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { ScrollableContent } from '../styles';
 import TeamHeader from '../../TeamHeader';
 import EmptyTeamBoards from './EmptyTeamBoards';
diff --git a/frontend/src/components/Boards/MyBoards/ListPersonalBoards/index.tsx b/frontend/src/components/Boards/MyBoards/ListPersonalBoards/index.tsx
index 2529d5137..85f1aae0a 100644
--- a/frontend/src/components/Boards/MyBoards/ListPersonalBoards/index.tsx
+++ b/frontend/src/components/Boards/MyBoards/ListPersonalBoards/index.tsx
@@ -7,7 +7,7 @@ import { useSetRecoilState } from 'recoil';
 import { toastState } from '@/store/toast/atom/toast.atom';
 import BoardType from '@/types/board/board';
 import { Team } from '@/types/team/team';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import ListBoards from '../ListBoards';
 import EmptyPersonalBoards from './EmptyPersonalBoards.tsx';
 
diff --git a/frontend/src/components/Boards/MyBoards/styles.tsx b/frontend/src/components/Boards/MyBoards/styles.tsx
index 4d3e050e4..461dd19ab 100644
--- a/frontend/src/components/Boards/MyBoards/styles.tsx
+++ b/frontend/src/components/Boards/MyBoards/styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const ScrollableContent = styled(Flex, {
   mt: '$24',
diff --git a/frontend/src/components/Boards/TeamHeader.tsx b/frontend/src/components/Boards/TeamHeader.tsx
index 09d888f92..09c652d8d 100644
--- a/frontend/src/components/Boards/TeamHeader.tsx
+++ b/frontend/src/components/Boards/TeamHeader.tsx
@@ -1,10 +1,10 @@
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import { BoardUser } from '@/types/board/board.user';
 import { Team } from '@/types/team/team';
 import { TeamUser } from '@/types/team/team.user';
-import AvatarGroup from '@/components/Primitives/Avatar/AvatarGroup';
+import AvatarGroup from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
 
 interface TeamHeaderProps {
   team?: Team;
@@ -34,35 +34,18 @@ const TeamHeader: React.FC<TeamHeaderProps> = ({ team, userId, users }) => {
               <Text color="primary300" size="sm">
                 Members
               </Text>
-              <AvatarGroup
-                listUsers={team.users}
-                responsible={false}
-                teamAdmins={false}
-                userId={userId}
-              />
+              <AvatarGroup listUsers={team.users} userId={userId} />
             </Flex>
             <Separator css={{ backgroundColor: '$primary300' }} orientation="vertical" size="md" />
             <Text color="primary300" size="sm">
               Team admin
             </Text>
-            <AvatarGroup
-              teamAdmins
-              stakeholders
-              listUsers={team.users}
-              responsible={false}
-              userId={userId}
-            />
+            <AvatarGroup teamAdmins stakeholders listUsers={team.users} userId={userId} />
           </Flex>
         )}
         {!hasTeam && users && (
           <Flex css={{ ml: '$12' }}>
-            <AvatarGroup
-              myBoards
-              listUsers={users}
-              responsible={false}
-              teamAdmins={false}
-              userId={userId}
-            />
+            <AvatarGroup myBoards listUsers={users} userId={userId} />
           </Flex>
         )}
       </Flex>
diff --git a/frontend/src/components/CardBoard/CardBody/CardBody.tsx b/frontend/src/components/CardBoard/CardBody/CardBody.tsx
index a58f689ea..49315306e 100644
--- a/frontend/src/components/CardBoard/CardBody/CardBody.tsx
+++ b/frontend/src/components/CardBoard/CardBody/CardBody.tsx
@@ -3,15 +3,15 @@ import { useRecoilValue } from 'recoil';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Icon from '@/components/Primitives/Icon';
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import { newBoardState } from '@/store/board/atoms/board.atom';
 import BoardType from '@/types/board/board';
 import ClickEvent from '@/types/events/clickEvent';
-import AvatarGroup from '@/components/Primitives/Avatar/AvatarGroup';
+import AvatarGroup from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
 import { Team } from '@/types/team/team';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import CardIcon from '../CardIcon';
@@ -250,12 +250,7 @@ const CardBody = React.memo<CardBodyProps>(
                   )}
 
                   {!isDashboard && isSubBoard && (
-                    <AvatarGroup
-                      listUsers={isSubBoard ? users : team.users}
-                      responsible={false}
-                      teamAdmins={false}
-                      userId={userId}
-                    />
+                    <AvatarGroup listUsers={isSubBoard ? users : team.users} userId={userId} />
                   )}
                   {!isDashboard && !isSubBoard && countDividedBoards > 0 && (
                     <CenterMainBoard
diff --git a/frontend/src/components/CardBoard/CardBody/CardEnd.tsx b/frontend/src/components/CardBoard/CardBody/CardEnd.tsx
index d0f9caa86..787d27465 100644
--- a/frontend/src/components/CardBoard/CardBody/CardEnd.tsx
+++ b/frontend/src/components/CardBoard/CardBody/CardEnd.tsx
@@ -1,14 +1,14 @@
 import React, { useMemo } from 'react';
 
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import BoardType from '@/types/board/board';
-import AvatarGroup from '@/components/Primitives/Avatar/AvatarGroup';
-import ConfirmationDialog from '@/components/Primitives/ConfirmationDialog';
+import AvatarGroup from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
+import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
 import useBoard from '@/hooks/useBoard';
-import Button from '@/components/Primitives/Button';
-import Icon from '@/components/Primitives/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import CountCards from './CountCards';
 
 type CardEndProps = {
@@ -85,12 +85,7 @@ const CardEnd: React.FC<CardEndProps> = React.memo(
           <Text color="primary800" css={{ mx: '$8' }} size="sm" fontWeight="medium">
             {boardOwnerName}
           </Text>
-          <AvatarGroup
-            listUsers={!team || isSubBoard ? users : team.users}
-            responsible={false}
-            teamAdmins={false}
-            userId={userId}
-          />
+          <AvatarGroup listUsers={!team || isSubBoard ? users : team.users} userId={userId} />
         </Flex>
       );
     }
@@ -103,7 +98,7 @@ const CardEnd: React.FC<CardEndProps> = React.memo(
               <Text color="primary300" size="sm">
                 Responsible
               </Text>
-              <AvatarGroup responsible listUsers={users} teamAdmins={false} userId={userId} />
+              <AvatarGroup responsible listUsers={users} userId={userId} />
             </Flex>
           )}
           <CountCards columns={columns} />
diff --git a/frontend/src/components/CardBoard/CardBody/CardTitle.tsx b/frontend/src/components/CardBoard/CardBody/CardTitle.tsx
index b7642656e..d21109f0c 100644
--- a/frontend/src/components/CardBoard/CardBody/CardTitle.tsx
+++ b/frontend/src/components/CardBoard/CardBody/CardTitle.tsx
@@ -3,8 +3,8 @@ import Link from 'next/link';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Text from '@/components/Primitives/Text';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Text from '@/components/Primitives/Text/Text';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 
 type CardTitleProps = {
   userIsParticipating: boolean;
diff --git a/frontend/src/components/CardBoard/CardBody/CardTitle/index.tsx b/frontend/src/components/CardBoard/CardBody/CardTitle/index.tsx
index f70e52b80..1fcbb4ccc 100644
--- a/frontend/src/components/CardBoard/CardBody/CardTitle/index.tsx
+++ b/frontend/src/components/CardBoard/CardBody/CardTitle/index.tsx
@@ -1,4 +1,4 @@
-import Tooltip from '../../../Primitives/Tooltip';
+import Tooltip from '../../../Primitives/Tooltips/Tooltip/Tooltip';
 import { Title } from './partials/Title';
 
 type CardTitleProps = {
diff --git a/frontend/src/components/CardBoard/CardBody/CardTitle/partials/Title/styles.tsx b/frontend/src/components/CardBoard/CardBody/CardTitle/partials/Title/styles.tsx
index 7d5d1c21a..45e860809 100644
--- a/frontend/src/components/CardBoard/CardBody/CardTitle/partials/Title/styles.tsx
+++ b/frontend/src/components/CardBoard/CardBody/CardTitle/partials/Title/styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@stitches/react';
 
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 
 const StyledBoardTitle = styled(Text, {
   fontWeight: '$bold',
diff --git a/frontend/src/components/CardBoard/CardBody/CenterMainBoard.tsx b/frontend/src/components/CardBoard/CardBody/CenterMainBoard.tsx
index b4b74f71e..57e34e88f 100644
--- a/frontend/src/components/CardBoard/CardBody/CenterMainBoard.tsx
+++ b/frontend/src/components/CardBoard/CardBody/CenterMainBoard.tsx
@@ -1,7 +1,7 @@
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 
 type CenterMainBoardProps = {
   countDividedBoards: number;
diff --git a/frontend/src/components/CardBoard/CardBody/CountCards.tsx b/frontend/src/components/CardBoard/CardBody/CountCards.tsx
index bb4a693bb..18738208f 100644
--- a/frontend/src/components/CardBoard/CardBody/CountCards.tsx
+++ b/frontend/src/components/CardBoard/CardBody/CountCards.tsx
@@ -1,4 +1,4 @@
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 import { countBoardCards } from '@/helper/board/countCards';
 import ColumnType from '@/types/column';
 
diff --git a/frontend/src/components/CardBoard/CardBody/LeftArrow.tsx b/frontend/src/components/CardBoard/CardBody/LeftArrow.tsx
index e2eaa2c31..81455e982 100644
--- a/frontend/src/components/CardBoard/CardBody/LeftArrow.tsx
+++ b/frontend/src/components/CardBoard/CardBody/LeftArrow.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 type LeftArrowProps = {
   isDashboard: boolean;
diff --git a/frontend/src/components/CardBoard/CardBody/SubBoards.tsx b/frontend/src/components/CardBoard/CardBody/SubBoards.tsx
index a2e5d672a..1bd983627 100644
--- a/frontend/src/components/CardBoard/CardBody/SubBoards.tsx
+++ b/frontend/src/components/CardBoard/CardBody/SubBoards.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import BoardType from '@/types/board/board';
 
 type SubBoardsProps = {
diff --git a/frontend/src/components/CardBoard/CardIcon.tsx b/frontend/src/components/CardBoard/CardIcon.tsx
index 082f27be4..dce5a76e3 100644
--- a/frontend/src/components/CardBoard/CardIcon.tsx
+++ b/frontend/src/components/CardBoard/CardIcon.tsx
@@ -1,5 +1,5 @@
-import Icon from '@/components/Primitives/Icon';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import BoardType from '@/types/board/board';
 import isEmpty from '@/utils/isEmpty';
 
diff --git a/frontend/src/components/CreateBoard/BoardName.tsx b/frontend/src/components/CreateBoard/BoardName.tsx
index 59e1d21a5..32ae1a234 100644
--- a/frontend/src/components/CreateBoard/BoardName.tsx
+++ b/frontend/src/components/CreateBoard/BoardName.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 
-import Input from '@/components/Primitives/Input';
-import Text from '@/components/Primitives/Text';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Text from '@/components/Primitives/Text/Text';
 import { createBoardError } from '@/store/createBoard/atoms/create-board.atom';
 
 type BoardNameProps = {
diff --git a/frontend/src/components/CreateBoard/Configurations/BoardConfigurations.tsx b/frontend/src/components/CreateBoard/Configurations/BoardConfigurations.tsx
index acdf90045..370acc489 100644
--- a/frontend/src/components/CreateBoard/Configurations/BoardConfigurations.tsx
+++ b/frontend/src/components/CreateBoard/Configurations/BoardConfigurations.tsx
@@ -1,10 +1,10 @@
 import { useFormContext } from 'react-hook-form';
 import { useRecoilState } from 'recoil';
 
-import Flex from '@/components/Primitives/Flex';
-import Input from '@/components/Primitives/Input';
-import Switch from '@/components/Primitives/Switch';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Switch from '@/components/Primitives/Inputs/Switches/Switch/Switch';
+import Text from '@/components/Primitives/Text/Text';
 import { createBoardDataState } from '@/store/createBoard/atoms/create-board.atom';
 
 const DEFAULT_MAX_VOTES = 6;
diff --git a/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/ListParticipants/index.tsx b/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/ListParticipants/index.tsx
index f682efebc..d48916c88 100644
--- a/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/ListParticipants/index.tsx
+++ b/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/ListParticipants/index.tsx
@@ -3,7 +3,7 @@ import { useRecoilState, useSetRecoilState } from 'recoil';
 import { usersListState } from '@/store/team/atom/team.atom';
 import { toastState } from '@/store/toast/atom/toast.atom';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
-import ListMembersDialog from '@/components/Teams/Team/ListMembers/ListMembersDialog';
+import UserListDialog from '@/components/Primitives/Dialogs/UserListDialog/UserListDialog';
 import { createBoardDataState } from '@/store/createBoard/atoms/create-board.atom';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import { useSession } from 'next-auth/react';
@@ -56,13 +56,13 @@ const ListParticipants = ({ isOpen, setIsOpen }: ListParticipantsProps) => {
   };
 
   return (
-    <ListMembersDialog
+    <UserListDialog
       usersList={usersList}
       isOpen={isOpen}
       setIsOpen={setIsOpen}
-      saveUsers={saveParticipants}
+      confirmationHandler={saveParticipants}
       title="Board Participants"
-      btnTitle="Add/remove participants"
+      confirmationLabel="Add/remove participants"
     />
   );
 };
diff --git a/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/RadioGroupParticipants/index.tsx b/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/RadioGroupParticipants/index.tsx
index 02b7ef688..258f16f75 100644
--- a/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/RadioGroupParticipants/index.tsx
+++ b/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/RadioGroupParticipants/index.tsx
@@ -1,11 +1,11 @@
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import {
   RadioGroupIndicator,
   RadioGroupItem,
   RadioGroup,
   Label,
-} from '@/components/Primitives/RadioGroup';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Inputs/RadioGroup/RadioGroup';
+import Text from '@/components/Primitives/Text/Text';
 import { createBoardTeam } from '@/store/createBoard/atoms/create-board.atom';
 import { useSetRecoilState } from 'recoil';
 import { FormStyled } from './styles';
diff --git a/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/SelectParticipants/index.tsx b/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/SelectParticipants/index.tsx
index d57523911..ee3332adf 100644
--- a/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/SelectParticipants/index.tsx
+++ b/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/SelectParticipants/index.tsx
@@ -1,4 +1,4 @@
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { MouseEvent, useEffect, useMemo, useState } from 'react';
 import UsersBox from '@/components/CreateBoard/SplitBoard/SubTeamsTab/UsersBox';
 import { useRecoilState } from 'recoil';
@@ -6,8 +6,8 @@ import { createBoardDataState } from '@/store/createBoard/atoms/create-board.ato
 import { usersListState } from '@/store/team/atom/team.atom';
 import { useSession } from 'next-auth/react';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
-import Icon from '@/components/Primitives/Icon';
-import Button from '@/components/Primitives/Button';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 import ListParticipants from '../ListParticipants';
 
 const SelectParticipants = () => {
diff --git a/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/index.tsx b/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/index.tsx
index 1e8c75d9d..ae8fa8316 100644
--- a/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/index.tsx
+++ b/frontend/src/components/CreateBoard/RegularBoard/ParticipantsTab/index.tsx
@@ -1,4 +1,4 @@
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { Dispatch, SetStateAction } from 'react';
 import SelectTeam from '@/components/CreateBoard/RegularBoard/SelectTeam';
 import SelectParticipants from './SelectParticipants';
diff --git a/frontend/src/components/CreateBoard/RegularBoard/SelectTeam/index.tsx b/frontend/src/components/CreateBoard/RegularBoard/SelectTeam/index.tsx
index ec5f9711b..9d3939a44 100644
--- a/frontend/src/components/CreateBoard/RegularBoard/SelectTeam/index.tsx
+++ b/frontend/src/components/CreateBoard/RegularBoard/SelectTeam/index.tsx
@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
-import Icon from '@/components/Primitives/Icon';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Text from '@/components/Primitives/Text/Text';
 import { teamsOfUser } from '@/store/team/atom/team.atom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { createBoardTeam } from '@/store/createBoard/atoms/create-board.atom';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import useCreateBoard from '@/hooks/useCreateBoard';
 import { useRouter } from 'next/router';
@@ -16,7 +16,7 @@ import {
   SelectValue,
   SelectIcon,
   SelectContent,
-} from '@/components/Primitives/Select';
+} from '@/components/Primitives/Inputs/Select/Select';
 import { HelperTextWrapper } from '../../SplitBoard/SubTeamsTab/SelectTeam/styles';
 
 const SelectTeam = () => {
diff --git a/frontend/src/components/CreateBoard/RegularBoard/SettingsTabs/index.tsx b/frontend/src/components/CreateBoard/RegularBoard/SettingsTabs/index.tsx
index ffe9d5524..41190206d 100644
--- a/frontend/src/components/CreateBoard/RegularBoard/SettingsTabs/index.tsx
+++ b/frontend/src/components/CreateBoard/RegularBoard/SettingsTabs/index.tsx
@@ -4,8 +4,8 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { toastState } from '@/store/toast/atom/toast.atom';
-import Text from '@/components/Primitives/Text';
-import Tab, { TabList } from '@/components/Primitives/Tab';
+import Text from '@/components/Primitives/Text/Text';
+import Tab, { TabList } from '@/components/Primitives/Tab/Tab';
 import { createBoardError } from '@/store/createBoard/atoms/create-board.atom';
 import ParticipantsTab from '../ParticipantsTab';
 import BoardConfigurations from '../../Configurations/BoardConfigurations';
diff --git a/frontend/src/components/CreateBoard/SelectBoardType/BoxColumnContainer/index.tsx b/frontend/src/components/CreateBoard/SelectBoardType/BoxColumnContainer/index.tsx
index 1c26b7e9c..34a17ad21 100644
--- a/frontend/src/components/CreateBoard/SelectBoardType/BoxColumnContainer/index.tsx
+++ b/frontend/src/components/CreateBoard/SelectBoardType/BoxColumnContainer/index.tsx
@@ -1,6 +1,6 @@
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { styled } from '@/styles/stitches/stitches.config';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
diff --git a/frontend/src/components/CreateBoard/SelectBoardType/BoxColumnContainer/styles.tsx b/frontend/src/components/CreateBoard/SelectBoardType/BoxColumnContainer/styles.tsx
index b248098a0..b90f60075 100644
--- a/frontend/src/components/CreateBoard/SelectBoardType/BoxColumnContainer/styles.tsx
+++ b/frontend/src/components/CreateBoard/SelectBoardType/BoxColumnContainer/styles.tsx
@@ -1,6 +1,6 @@
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { styled } from '@/styles/stitches/stitches.config';
 
 const StyledBox = styled(Flex, Box, {
diff --git a/frontend/src/components/CreateBoard/SelectBoardType/BoxRowContainer/index.tsx b/frontend/src/components/CreateBoard/SelectBoardType/BoxRowContainer/index.tsx
index 936308e98..81330e6ab 100644
--- a/frontend/src/components/CreateBoard/SelectBoardType/BoxRowContainer/index.tsx
+++ b/frontend/src/components/CreateBoard/SelectBoardType/BoxRowContainer/index.tsx
@@ -1,6 +1,6 @@
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { DisabledStylesBox, StyledBox } from './styles';
 
 type BoxRowContainerProps = {
diff --git a/frontend/src/components/CreateBoard/SelectBoardType/BoxRowContainer/styles.tsx b/frontend/src/components/CreateBoard/SelectBoardType/BoxRowContainer/styles.tsx
index 96b0e6239..41e814419 100644
--- a/frontend/src/components/CreateBoard/SelectBoardType/BoxRowContainer/styles.tsx
+++ b/frontend/src/components/CreateBoard/SelectBoardType/BoxRowContainer/styles.tsx
@@ -1,6 +1,6 @@
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { styled } from '@/styles/stitches/stitches.config';
 
 const StyledBox = styled(Flex, Box, {
diff --git a/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/CardAvatars/index.tsx b/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/CardAvatars/index.tsx
index 23d5ad99b..077694c8e 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/CardAvatars/index.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/CardAvatars/index.tsx
@@ -2,8 +2,8 @@ import { useCallback, useMemo } from 'react';
 
 import { bubbleColors } from '@/styles/stitches/partials/colors/bubble.colors';
 
-import Avatar from '@/components/Primitives/Avatar/Avatar';
-import Flex from '@/components/Primitives/Flex';
+import Avatar from '@/components/Primitives/Avatars/Avatar/Avatar';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const FakeCardAvatars = () => {
   const getRandomColor = useCallback(() => {
diff --git a/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/MainBoardCard/index.tsx b/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/MainBoardCard/index.tsx
index 578251c17..2010947a2 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/MainBoardCard/index.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/MainBoardCard/index.tsx
@@ -3,13 +3,13 @@ import React from 'react';
 import { highlight2Colors } from '@/styles/stitches/partials/colors/highlight2.colors';
 
 import LeftArrow from '@/components/CardBoard/CardBody/LeftArrow';
-import Icon from '@/components/Primitives/Icon';
-import Avatar from '@/components/Primitives/Avatar/Avatar';
-import Checkbox from '@/components/Primitives/Checkbox';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Avatar from '@/components/Primitives/Avatars/Avatar/Avatar';
+import Checkbox from '@/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import FakeCardAvatars from '../CardAvatars';
 import { Container, MainContainer } from './styles';
 
diff --git a/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/MainBoardCard/styles.tsx b/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/MainBoardCard/styles.tsx
index a07d2aae0..25e653b91 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/MainBoardCard/styles.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/FakeSettingsTabs/partials/MainBoardCard/styles.tsx
@@ -1,7 +1,7 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const MainContainer = styled(Flex, Box, {
   backgroundColor: 'white',
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SettingsTabs.tsx b/frontend/src/components/CreateBoard/SplitBoard/SettingsTabs.tsx
index cd8f4dbdc..e1f640730 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SettingsTabs.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SettingsTabs.tsx
@@ -4,8 +4,8 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { toastState } from '@/store/toast/atom/toast.atom';
-import Text from '@/components/Primitives/Text';
-import Tab, { TabList } from '@/components/Primitives/Tab';
+import Text from '@/components/Primitives/Text/Text';
+import Tab, { TabList } from '@/components/Primitives/Tab/Tab';
 import { usePrevious } from '@/utils/previousState';
 import { createBoardError, createBoardTeam } from '@/store/createBoard/atoms/create-board.atom';
 import TeamSubTeamsConfigurations from './SubTeamsTab/TeamSubTeamsConfigurations';
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/BoxContainer/styles.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/BoxContainer/styles.tsx
index e805a5255..d4187b12e 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/BoxContainer/styles.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/BoxContainer/styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const StyledBox = styled(Flex, Box, {
   width: '100%',
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/DropdownUsers/index.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/DropdownUsers/index.tsx
index d53651a40..a19deb771 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/DropdownUsers/index.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/DropdownUsers/index.tsx
@@ -1,4 +1,4 @@
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 import { ReactNode } from 'react';
 import { User } from '@/types/user/user';
 import { Dropdown, DropdownBtn, DropdownContent, DropdownItem } from './styles';
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/DropdownUsers/styles.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/DropdownUsers/styles.tsx
index 51eb4f881..c186799a8 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/DropdownUsers/styles.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/DropdownUsers/styles.tsx
@@ -1,4 +1,4 @@
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { styled } from '@/styles/stitches/stitches.config';
 
 const DropdownContent = styled('div', {
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/MainBoardCard.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/MainBoardCard.tsx
index 7f7b0ac53..63276e1b0 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/MainBoardCard.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/MainBoardCard.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import { SetterOrUpdater, useRecoilValue } from 'recoil';
 import { styled } from '@/styles/stitches/stitches.config';
-import Icon from '@/components/Primitives/Icon';
-import Box from '@/components/Primitives/Box';
-import Checkbox from '@/components/Primitives/Checkbox';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Box from '@/components/Primitives/Layout/Box';
+import Checkbox from '@/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import useCreateBoard from '@/hooks/useCreateBoard';
 import { CreateBoardData, createBoardError } from '@/store/createBoard/atoms/create-board.atom';
 import { BoardToAdd } from '@/types/board/board';
 import { Team } from '@/types/team/team';
-import Flex from '@/components/Primitives/Flex';
-import AvatarGroup from '@/components/Primitives/Avatar/AvatarGroup';
+import Flex from '@/components/Primitives/Layout/Flex';
+import AvatarGroup from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
 import { useFormContext, useWatch } from 'react-hook-form';
 import SubCardBoard from './SubCardBoard';
 
@@ -147,13 +147,7 @@ const MainBoardCard = React.memo(({ team }: MainBoardCardInterface) => {
           <Text size="sm" fontWeight="medium">
             {team.name}
           </Text>
-          <AvatarGroup
-            haveError={haveError}
-            listUsers={team.users}
-            responsible={false}
-            teamAdmins={false}
-            userId="1"
-          />
+          <AvatarGroup haveError={haveError} listUsers={team.users} userId="1" />
         </Flex>
       </MainContainer>
       <SubBoardList dividedBoards={board.dividedBoards} setBoard={setCreateBoardData} />
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx
index 5a944ac34..9e32ce4e5 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/QuickEditSubTeams.tsx
@@ -2,20 +2,20 @@ import { ChangeEvent, useEffect, useState } from 'react';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogTrigger,
-} from '@/components/Primitives/AlertDialog';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Alerts/AlertDialog/AlertDialog';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import useCreateBoard from '@/hooks/useCreateBoard';
 import { Team } from '@/types/team/team';
 import isEmpty from '@/utils/isEmpty';
-import Button from '@/components/Primitives/Button';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 interface QuickEditSubTeamsProps {
   team: Team;
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SelectTeam/index.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SelectTeam/index.tsx
index 0f4836edd..f1d592cb5 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SelectTeam/index.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SelectTeam/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
-import Icon from '@/components/Primitives/Icon';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Text from '@/components/Primitives/Text/Text';
 import { teamsOfUser } from '@/store/team/atom/team.atom';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { createBoardError, createBoardTeam } from '@/store/createBoard/atoms/create-board.atom';
@@ -9,7 +9,7 @@ import { MIN_MEMBERS } from '@/utils/constants';
 import { useSession } from 'next-auth/react';
 import { useFormContext } from 'react-hook-form';
 import isEmpty from '@/utils/isEmpty';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import useCreateBoard from '@/hooks/useCreateBoard';
 import { useRouter } from 'next/router';
@@ -19,7 +19,7 @@ import {
   SelectValue,
   SelectIcon,
   SelectContent,
-} from '@/components/Primitives/Select';
+} from '@/components/Primitives/Inputs/Select/Select';
 import { Team } from '@/types/team/team';
 import { HelperTextWrapper } from './styles';
 
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SelectTeam/styles.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SelectTeam/styles.tsx
index ac7d2947c..e34c207d6 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SelectTeam/styles.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SelectTeam/styles.tsx
@@ -1,4 +1,4 @@
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { styled } from '@/styles/stitches/stitches.config';
 
 const HelperTextWrapper = styled(Flex, {
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SubCardBoard.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SubCardBoard.tsx
index 3553dee30..1994c6cca 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SubCardBoard.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/SubCardBoard.tsx
@@ -6,18 +6,18 @@ import { highlight2Colors } from '@/styles/stitches/partials/colors/highlight2.c
 import { styled } from '@/styles/stitches/stitches.config';
 
 import LeftArrow from '@/components/CardBoard/CardBody/LeftArrow';
-import Icon from '@/components/Primitives/Icon';
-import Avatar from '@/components/Primitives/Avatar/Avatar';
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Avatar from '@/components/Primitives/Avatars/Avatar/Avatar';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import { CreateBoardData } from '@/store/createBoard/atoms/create-board.atom';
 import { BoardToAdd } from '@/types/board/board';
 import { BoardUserToAdd } from '@/types/board/board.user';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import { getInitials } from '@/utils/getInitials';
-import AvatarGroup from '@/components/Primitives/Avatar/AvatarGroup';
+import AvatarGroup from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
 
 interface SubCardBoardProps {
   index: number;
@@ -181,13 +181,7 @@ const SubCardBoard: React.FC<SubCardBoardProps> = ({ board, index, setBoard }) =
 
         <Flex align="center" gap="8" justify="center">
           <Text size="sm">Sub team {index + 1}</Text>
-          <AvatarGroup
-            listUsers={board.users}
-            responsible={false}
-            teamAdmins={false}
-            userId="1"
-            hasDrawer
-          />
+          <AvatarGroup listUsers={board.users} userId="1" hasDrawer />
         </Flex>
       </Container>
     </Flex>
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/TeamSubTeamsConfigurations.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/TeamSubTeamsConfigurations.tsx
index 7e8782939..174e384e9 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/TeamSubTeamsConfigurations.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/TeamSubTeamsConfigurations.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { createBoardError, createBoardTeam } from '@/store/createBoard/atoms/create-board.atom';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
 import useTeam from '@/hooks/useTeam';
diff --git a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/UsersBox/index.tsx b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/UsersBox/index.tsx
index a6421ae0f..59c7e9aa9 100644
--- a/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/UsersBox/index.tsx
+++ b/frontend/src/components/CreateBoard/SplitBoard/SubTeamsTab/UsersBox/index.tsx
@@ -1,5 +1,5 @@
 import { User } from '@/types/user/user';
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 import BoxContainer from '../BoxContainer';
 import DropdownStakeholders from '../DropdownUsers';
 
diff --git a/frontend/src/components/CreateBoard/TipBar.tsx b/frontend/src/components/CreateBoard/TipBar.tsx
index deb3c2f00..bfd3d2f21 100644
--- a/frontend/src/components/CreateBoard/TipBar.tsx
+++ b/frontend/src/components/CreateBoard/TipBar.tsx
@@ -1,8 +1,8 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 
 const LiWhite = styled('li', Text, { color: '$primary100', fontSize: '$14', lineHeight: '$20' });
 const UnorderedList = styled('ul', { paddingInlineStart: '$26' });
diff --git a/frontend/src/components/Dashboard/Calendar/Calendar.tsx b/frontend/src/components/Dashboard/Calendar/Calendar.tsx
index 9e0b70165..f34cb2521 100644
--- a/frontend/src/components/Dashboard/Calendar/Calendar.tsx
+++ b/frontend/src/components/Dashboard/Calendar/Calendar.tsx
@@ -4,10 +4,10 @@ import { CalendarTileProperties } from 'react-calendar';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import NoMeetingsImage from '@/components/images/NoMeetings';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import StyledCalendar from './StyledCalendar';
 
 const StyledContainer = styled(Flex, {
diff --git a/frontend/src/components/Dashboard/RecentRetros/partials/EmptyBoards/styles.tsx b/frontend/src/components/Dashboard/RecentRetros/partials/EmptyBoards/styles.tsx
index 223525399..e1f570149 100644
--- a/frontend/src/components/Dashboard/RecentRetros/partials/EmptyBoards/styles.tsx
+++ b/frontend/src/components/Dashboard/RecentRetros/partials/EmptyBoards/styles.tsx
@@ -1,9 +1,9 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
 import EmptyBoardsImage from '@/components/images/EmptyBoards';
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 
 const StyledImage = styled(EmptyBoardsImage, Flex, Box, { '& svg': { zIndex: '-1' } });
 
diff --git a/frontend/src/components/Dashboard/RecentRetros/partials/ListOfCards/index.tsx b/frontend/src/components/Dashboard/RecentRetros/partials/ListOfCards/index.tsx
index 70783f6a1..8e7e08c53 100644
--- a/frontend/src/components/Dashboard/RecentRetros/partials/ListOfCards/index.tsx
+++ b/frontend/src/components/Dashboard/RecentRetros/partials/ListOfCards/index.tsx
@@ -2,8 +2,8 @@ import React, { useMemo, useRef } from 'react';
 import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
 
 import CardBody from '@/components/CardBoard/CardBody/CardBody';
-import Dots from '@/components/Primitives/Loading/Dots';
-import Flex from '@/components/Primitives/Flex';
+import Dots from '@/components/Primitives/Loading/Dots/Dots';
+import Flex from '@/components/Primitives/Layout/Flex';
 import BoardType from '@/types/board/board';
 import { LastUpdatedText } from './styles';
 
diff --git a/frontend/src/components/Dashboard/RecentRetros/partials/ListOfCards/styles.tsx b/frontend/src/components/Dashboard/RecentRetros/partials/ListOfCards/styles.tsx
index 7cae40ecd..ccfc7ddf2 100644
--- a/frontend/src/components/Dashboard/RecentRetros/partials/ListOfCards/styles.tsx
+++ b/frontend/src/components/Dashboard/RecentRetros/partials/ListOfCards/styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 
 const LastUpdatedText = styled(Text, {
   position: 'sticky',
diff --git a/frontend/src/stories/Dashboard/Tile.stories.tsx b/frontend/src/components/Dashboard/Tiles/Tile/Tile.stories.tsx
similarity index 90%
rename from frontend/src/stories/Dashboard/Tile.stories.tsx
rename to frontend/src/components/Dashboard/Tiles/Tile/Tile.stories.tsx
index b4e665f09..03b2d1faa 100644
--- a/frontend/src/stories/Dashboard/Tile.stories.tsx
+++ b/frontend/src/components/Dashboard/Tiles/Tile/Tile.stories.tsx
@@ -10,7 +10,7 @@ export default {
       description: {
         component: dedent`
         **File Path:**
-        \`@/components/Dashboard/Tiles/Tile/Tile.tsx\`
+        \`@/components/Dashboard/Tiles/Tile/Tile.tsx\` and \`@/components/Dashboard/Tiles/styles.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Dashboard/Tiles/Tile/Tile.tsx b/frontend/src/components/Dashboard/Tiles/Tile/Tile.tsx
index 0cac3ec6d..619967ce7 100644
--- a/frontend/src/components/Dashboard/Tiles/Tile/Tile.tsx
+++ b/frontend/src/components/Dashboard/Tiles/Tile/Tile.tsx
@@ -1,7 +1,7 @@
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import Link from 'next/link';
-import { StyledTile, TileArrow, TileBlob } from '../styles';
+import { StyledTile, TileArrow, TileBlob } from './styles';
 
 export type TileProps = {
   link: string;
diff --git a/frontend/src/components/Dashboard/Tiles/Tile/styles.tsx b/frontend/src/components/Dashboard/Tiles/Tile/styles.tsx
new file mode 100644
index 000000000..56807348e
--- /dev/null
+++ b/frontend/src/components/Dashboard/Tiles/Tile/styles.tsx
@@ -0,0 +1,34 @@
+import { styled } from '@/styles/stitches/stitches.config';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+
+const StyledTile = styled('div', {
+  position: 'relative',
+  borderRadius: '$12',
+  color: '$primary50',
+  backgroundColor: '$primary800',
+  h3: {
+    margin: 0,
+    color: 'white',
+    fontSize: '$32',
+    lineHeight: '$36',
+    fontWeight: '$bold',
+  },
+  '@hover': {
+    cursor: 'pointer',
+  },
+});
+
+const TileArrow = styled(Icon, {
+  position: 'absolute',
+  right: '$20',
+  top: '50%',
+  bottom: '$-1',
+  color: '$black',
+});
+
+const TileBlob = styled(Icon, {
+  position: 'absolute',
+  right: '$-1',
+});
+
+export { StyledTile, TileArrow, TileBlob };
diff --git a/frontend/src/components/Dashboard/Tiles/Tiles.spec.tsx b/frontend/src/components/Dashboard/Tiles/Tiles.spec.tsx
index b485baa2c..1983598c1 100644
--- a/frontend/src/components/Dashboard/Tiles/Tiles.spec.tsx
+++ b/frontend/src/components/Dashboard/Tiles/Tiles.spec.tsx
@@ -1,5 +1,5 @@
 import { render as rtlRender } from '@testing-library/react';
-import Tiles, { TilesProps } from './index';
+import Tiles, { TilesProps } from './Tiles';
 
 const DEFAULT_PROPS: TilesProps = {
   data: {
diff --git a/frontend/src/stories/Dashboard/Tiles/Tiles.stories.tsx b/frontend/src/components/Dashboard/Tiles/Tiles.stories.tsx
similarity index 84%
rename from frontend/src/stories/Dashboard/Tiles/Tiles.stories.tsx
rename to frontend/src/components/Dashboard/Tiles/Tiles.stories.tsx
index 6da3874a4..6d01f4540 100644
--- a/frontend/src/stories/Dashboard/Tiles/Tiles.stories.tsx
+++ b/frontend/src/components/Dashboard/Tiles/Tiles.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentStory } from '@storybook/react';
 import dedent from 'ts-dedent';
-import Tiles from '@/components/Dashboard/Tiles';
+import Tiles from '@/components/Dashboard/Tiles/Tiles';
 
 export default {
   title: 'Dashboard/Tiles/Tiles',
@@ -10,7 +10,7 @@ export default {
       description: {
         component: dedent`
         **File Path:**
-        \`@/components/Dashboard/Tiles/index.tsx\`
+        \`@/components/Dashboard/Tiles/Tiles.tsx\` and \`@/components/Dashboard/Tiles/styles.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Dashboard/Tiles/index.tsx b/frontend/src/components/Dashboard/Tiles/Tiles.tsx
similarity index 100%
rename from frontend/src/components/Dashboard/Tiles/index.tsx
rename to frontend/src/components/Dashboard/Tiles/Tiles.tsx
diff --git a/frontend/src/components/Dashboard/Tiles/styles.tsx b/frontend/src/components/Dashboard/Tiles/styles.tsx
index 27c0f3eae..7d7cd57b0 100644
--- a/frontend/src/components/Dashboard/Tiles/styles.tsx
+++ b/frontend/src/components/Dashboard/Tiles/styles.tsx
@@ -1,5 +1,4 @@
 import { styled } from '@/styles/stitches/stitches.config';
-import Icon from '@/components/Primitives/Icon';
 
 const TileContainer = styled('section', {
   display: 'grid',
@@ -7,34 +6,4 @@ const TileContainer = styled('section', {
   gridTemplateColumns: 'repeat(3, 1fr)',
 });
 
-const StyledTile = styled('div', {
-  position: 'relative',
-  borderRadius: '$12',
-  color: '$primary50',
-  backgroundColor: '$primary800',
-  h3: {
-    margin: 0,
-    color: 'white',
-    fontSize: '$32',
-    lineHeight: '$36',
-    fontWeight: '$bold',
-  },
-  '@hover': {
-    cursor: 'pointer',
-  },
-});
-
-const TileArrow = styled(Icon, {
-  position: 'absolute',
-  right: '20px',
-  top: '50%',
-  bottom: '-1px',
-  color: '$black',
-});
-
-const TileBlob = styled(Icon, {
-  position: 'absolute',
-  right: '-1px',
-});
-
-export { TileContainer, StyledTile, TileArrow, TileBlob };
+export { TileContainer };
diff --git a/frontend/src/components/Errors/QueryError.tsx b/frontend/src/components/Errors/QueryError.tsx
index 680130ac4..732247ab7 100644
--- a/frontend/src/components/Errors/QueryError.tsx
+++ b/frontend/src/components/Errors/QueryError.tsx
@@ -2,9 +2,9 @@
 import { ErrorBoundary } from 'react-error-boundary';
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 
 const QueryError: React.FC = ({ children }) => (
   <QueryErrorResetBoundary>
diff --git a/frontend/src/components/Primitives/AlertBox.spec.tsx b/frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.spec.tsx
similarity index 88%
rename from frontend/src/components/Primitives/AlertBox.spec.tsx
rename to frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.spec.tsx
index a23d2311a..b574672d5 100644
--- a/frontend/src/components/Primitives/AlertBox.spec.tsx
+++ b/frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.spec.tsx
@@ -1,11 +1,11 @@
 import { renderWithProviders } from '@/utils/testing/renderWithProviders';
-import AlertBox, { AlertBoxProps } from './AlertBox';
-import Button from './Button';
+import AlertBox, { AlertBoxProps } from '@/components/Primitives/Alerts/AlertBox/AlertBox';
+import Button from '../../Inputs/Button/Button';
 
 const render = (props: AlertBoxProps, children?: React.ReactNode) =>
   renderWithProviders(<AlertBox {...props}>{children}</AlertBox>);
 
-describe('Components/Primitives/AlertBox', () => {
+describe('Components/Primitives/Alerts/AlertBox', () => {
   it('should render correctly', () => {
     // Arrange
     const alertBoxProps: AlertBoxProps = { type: 'info' };
diff --git a/frontend/src/stories/Primitives/AlertBox.stories.tsx b/frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.stories.tsx
similarity index 83%
rename from frontend/src/stories/Primitives/AlertBox.stories.tsx
rename to frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.stories.tsx
index 23880c113..f099cf23a 100644
--- a/frontend/src/stories/Primitives/AlertBox.stories.tsx
+++ b/frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.stories.tsx
@@ -3,11 +3,11 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import AlertBox from '@/components/Primitives/AlertBox';
-import Button from '@/components/Primitives/Button';
+import AlertBox from '@/components/Primitives/Alerts/AlertBox/AlertBox';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 export default {
-  title: 'Primitives/AlertBox',
+  title: 'Primitives/Alerts/AlertBox',
   component: AlertBox,
   parameters: {
     layout: 'padded',
@@ -17,7 +17,8 @@ export default {
         An alert box that is displayed on the screen to inform or warn the user of something.
 
         **File Path:**
-        \`@/components/Primitives/AlertBox/index.tsx\` and \`@/components/Primitives/AlertBox/styles.tsx\`
+        \`@/components/Primitives/Alerts/AlertBox/AlertBox.tsx\`
+        ${JSON.stringify(import.meta)}
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/AlertBox.tsx b/frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.tsx
similarity index 85%
rename from frontend/src/components/Primitives/AlertBox.tsx
rename to frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.tsx
index 43e726fab..cb6ea59af 100644
--- a/frontend/src/components/Primitives/AlertBox.tsx
+++ b/frontend/src/components/Primitives/Alerts/AlertBox/AlertBox.tsx
@@ -1,10 +1,10 @@
 import { CSSProps } from '@/styles/stitches/stitches.config';
 import { styled } from '@stitches/react';
 
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Box from '@/components/Primitives/Box';
-import Icon from '@/components/Primitives/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Box from '@/components/Primitives/Layout/Box';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 
 const AlertStyle = styled(Flex, Box, {
   padding: '$16 $40',
diff --git a/frontend/src/components/Primitives/AlertDialog.spec.tsx b/frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.spec.tsx
similarity index 91%
rename from frontend/src/components/Primitives/AlertDialog.spec.tsx
rename to frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.spec.tsx
index 63d0493f6..1317a4324 100644
--- a/frontend/src/components/Primitives/AlertDialog.spec.tsx
+++ b/frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.spec.tsx
@@ -7,9 +7,9 @@ import {
   AlertDialogContent,
   AlertDialogProps,
   AlertDialogTrigger,
-} from './AlertDialog';
-import Button from './Button';
-import Flex from './Flex';
+} from '@/components/Primitives/Alerts/AlertDialog/AlertDialog';
+import Button from '../../Inputs/Button/Button';
+import Flex from '../../Layout/Flex';
 
 const render = ({ children, ...props }: AlertDialogProps) =>
   renderWithProviders(
@@ -30,7 +30,7 @@ const render = ({ children, ...props }: AlertDialogProps) =>
     </AlertDialog>,
   );
 
-describe('Components/Primitives/AlertDialog', () => {
+describe('Components/Primitives/Alerts/AlertDialog', () => {
   it('should render the trigger correctly', () => {
     // Act
     const { getByTestId } = render({});
diff --git a/frontend/src/stories/Primitives/AlertDialog.stories.tsx b/frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.stories.tsx
similarity index 85%
rename from frontend/src/stories/Primitives/AlertDialog.stories.tsx
rename to frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.stories.tsx
index f0040ccfd..6d0bc1758 100644
--- a/frontend/src/stories/Primitives/AlertDialog.stories.tsx
+++ b/frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.stories.tsx
@@ -9,12 +9,12 @@ import {
   AlertDialogContent,
   AlertDialogAction,
   AlertDialogCancel,
-} from '@/components/Primitives/AlertDialog';
-import Flex from '@/components/Primitives/Flex';
-import Button from '@/components/Primitives/Button';
+} from '@/components/Primitives/Alerts/AlertDialog/AlertDialog';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 export default {
-  title: 'Primitives/AlertDialog',
+  title: 'Primitives/Alerts/AlertDialog',
   component: AlertDialog,
   parameters: {
     docs: {
@@ -23,7 +23,7 @@ export default {
         A modal dialog that interrupts the user with important content and expects a response.
 
         **File Path:**
-        \`@/components/Primitives/AlertDialog.tsx\`
+        \`@/components/Primitives/Alerts/AlertDialog/AlertDialog.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/AlertDialog.tsx b/frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.tsx
similarity index 84%
rename from frontend/src/components/Primitives/AlertDialog.tsx
rename to frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.tsx
index a85634d89..e55a1e826 100644
--- a/frontend/src/components/Primitives/AlertDialog.tsx
+++ b/frontend/src/components/Primitives/Alerts/AlertDialog/AlertDialog.tsx
@@ -4,11 +4,11 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { CSS, styled } from '@/styles/stitches/stitches.config';
 import { overlayShow } from '@/animations/DialogShow';
 
-import Button from './Button';
-import Flex from './Flex';
-import Text from './Text';
-import Icon from './Icon';
-import Separator from './Separator';
+import Button from '../../Inputs/Button/Button';
+import Flex from '../../Layout/Flex';
+import Text from '../../Text/Text';
+import Icon from '../../Icons/Icon/Icon';
+import Separator from '../../Separator/Separator';
 
 const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
   backdropFilter: 'blur(3px)',
@@ -43,9 +43,14 @@ export const AlertDialogTrigger = styled(AlertDialogPrimitive.Trigger, {
 export const AlertDialogAction = styled(AlertDialogPrimitive.Action, Button, {});
 export const AlertDialogCancel = styled(AlertDialogPrimitive.Cancel, Button, {});
 
-type ContentProps = { children?: ReactNode; css?: CSS; handleClose?: () => void; title?: string };
+export type AlertDialogProps = {
+  children?: ReactNode;
+  css?: CSS;
+  handleClose?: () => void;
+  title?: string;
+};
 
-const Content = ({ children, css, handleClose, title, ...props }: ContentProps) => (
+const Content = ({ children, css, handleClose, title, ...props }: AlertDialogProps) => (
   <AlertDialogPrimitive.Portal>
     <StyledOverlay />
     <StyledContent css={css} onCloseAutoFocus={handleClose} {...props}>
diff --git a/frontend/src/components/Primitives/ConfirmationDialog.spec.tsx b/frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.spec.tsx
similarity index 89%
rename from frontend/src/components/Primitives/ConfirmationDialog.spec.tsx
rename to frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.spec.tsx
index 52c9944e5..bea31d96e 100644
--- a/frontend/src/components/Primitives/ConfirmationDialog.spec.tsx
+++ b/frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.spec.tsx
@@ -2,8 +2,10 @@ import { renderWithProviders } from '@/utils/testing/renderWithProviders';
 import { fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import ConfirmationDialog, { ConfirmationDialogProps } from './ConfirmationDialog';
-import Button from './Button';
+import ConfirmationDialog, {
+  ConfirmationDialogProps,
+} from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
+import Button from '../../Inputs/Button/Button';
 
 const render = (props: Partial<ConfirmationDialogProps> = {}) =>
   renderWithProviders(
@@ -18,7 +20,7 @@ const render = (props: Partial<ConfirmationDialogProps> = {}) =>
     </ConfirmationDialog>,
   );
 
-describe('Components/Primitives/ConfirmationDialog', () => {
+describe('Components/Primitives/Alerts/ConfirmationDialog', () => {
   it('should render trigger correctly', () => {
     // Act
     const { getByRole } = render();
diff --git a/frontend/src/stories/Primitives/ConfirmationDialog.stories.tsx b/frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.stories.tsx
similarity index 83%
rename from frontend/src/stories/Primitives/ConfirmationDialog.stories.tsx
rename to frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.stories.tsx
index 487f86a31..99c7ae85c 100644
--- a/frontend/src/stories/Primitives/ConfirmationDialog.stories.tsx
+++ b/frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.stories.tsx
@@ -3,12 +3,12 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import ConfirmationDialog from '@/components/Primitives/ConfirmationDialog';
-import Icon from '@/components/Primitives/Icon';
-import Button from '@/components/Primitives/Button';
+import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 export default {
-  title: 'Primitives/ConfirmationDialog',
+  title: 'Primitives/Alerts/ConfirmationDialog',
   component: ConfirmationDialog,
   parameters: {
     docs: {
@@ -17,7 +17,7 @@ export default {
         A modal dialog that interrupts the user requesting some type of confirmation.
 
         **File Path:**
-        \`@/components/Primitives/ConfirmationDialog.tsx\`
+        \`@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/ConfirmationDialog.tsx b/frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.tsx
similarity index 92%
rename from frontend/src/components/Primitives/ConfirmationDialog.tsx
rename to frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.tsx
index 24aef5f75..ac242ade3 100644
--- a/frontend/src/components/Primitives/ConfirmationDialog.tsx
+++ b/frontend/src/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog.tsx
@@ -5,9 +5,9 @@ import {
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogTrigger,
-} from './AlertDialog';
-import Flex from './Flex';
-import Tooltip from './Tooltip';
+} from '../AlertDialog/AlertDialog';
+import Flex from '../../Layout/Flex';
+import Tooltip from '../../Tooltips/Tooltip/Tooltip';
 
 export type ConfirmationDialogProps = {
   description: string | React.ReactNode;
diff --git a/frontend/src/stories/Primitives/Avatar/Avatar.stories.tsx b/frontend/src/components/Primitives/Avatars/Avatar/Avatar.stories.tsx
similarity index 90%
rename from frontend/src/stories/Primitives/Avatar/Avatar.stories.tsx
rename to frontend/src/components/Primitives/Avatars/Avatar/Avatar.stories.tsx
index f07b435e8..14ed11838 100644
--- a/frontend/src/stories/Primitives/Avatar/Avatar.stories.tsx
+++ b/frontend/src/components/Primitives/Avatars/Avatar/Avatar.stories.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
 import dedent from 'ts-dedent';
-import Avatar from '@/components/Primitives/Avatar/Avatar';
+import Avatar from '@/components/Primitives/Avatars/Avatar/Avatar';
 
 export default {
-  title: 'Primitives/Avatar/Avatar',
+  title: 'Primitives/Avatars/Avatar',
   component: Avatar,
   parameters: {
     docs: {
@@ -13,7 +13,7 @@ export default {
         An image element with a fallback for representing the user.
 
         **File Path:**
-        \`@/components/Primitives/Avatar/Avatar.tsx\`
+        \`@/components/Primitives/Avatars/Avatar/Avatar.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Avatar/Avatar.tsx b/frontend/src/components/Primitives/Avatars/Avatar/Avatar.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Avatar/Avatar.tsx
rename to frontend/src/components/Primitives/Avatars/Avatar/Avatar.tsx
diff --git a/frontend/src/components/Primitives/Avatars/AvatarGroup/AvatarGroup.spec.tsx b/frontend/src/components/Primitives/Avatars/AvatarGroup/AvatarGroup.spec.tsx
new file mode 100644
index 000000000..4f0277632
--- /dev/null
+++ b/frontend/src/components/Primitives/Avatars/AvatarGroup/AvatarGroup.spec.tsx
@@ -0,0 +1,147 @@
+import { createMockRouter } from '@/utils/testing/mocks';
+import { renderWithProviders } from '@/utils/testing/renderWithProviders';
+import { AvatarGroupUsersFactory } from '@/utils/factories/user';
+import { getInitials } from '@/utils/getInitials';
+import { User } from '@/types/user/user';
+import { TeamUserRoles } from '@/utils/enums/team.user.roles';
+import { BoardUserRoles } from '@/utils/enums/board.user.roles';
+import AvatarGroup, { AvatarGroupProps } from './AvatarGroup';
+
+const router = createMockRouter({});
+
+const render = (props: AvatarGroupProps) =>
+  renderWithProviders(<AvatarGroup {...props} />, { routerOptions: router });
+
+describe('Components/Primitives/Avatars/AvatarGroup', () => {
+  it('should render correctly', () => {
+    // Arrange
+    const testProps = {
+      listUsers: AvatarGroupUsersFactory.createMany(5),
+      userId: undefined,
+    };
+
+    // Act
+    const { getByText } = render(testProps);
+
+    // Assert
+    for (let i = 0; i < 2; i++) {
+      expect(
+        getByText(
+          getInitials(
+            (testProps.listUsers[i].user as User).firstName,
+            (testProps.listUsers[i].user as User).lastName,
+          ),
+        ),
+      );
+    }
+
+    expect(getByText(`+${testProps.listUsers.length - 2}`));
+  });
+
+  it('should render stakeholders', () => {
+    // Arrange
+    const testProps = {
+      listUsers: AvatarGroupUsersFactory.createMany(5, [
+        { role: TeamUserRoles.STAKEHOLDER },
+        { role: TeamUserRoles.STAKEHOLDER },
+        { role: TeamUserRoles.STAKEHOLDER },
+        { role: TeamUserRoles.MEMBER },
+        { role: TeamUserRoles.MEMBER },
+      ]),
+      userId: undefined,
+      stakeholders: true,
+    };
+
+    // Act
+    const { getByText } = render(testProps);
+
+    // Assert
+    for (let i = 0; i < 3; i++) {
+      expect(
+        getByText(
+          getInitials(
+            (testProps.listUsers[i].user as User).firstName,
+            (testProps.listUsers[i].user as User).lastName,
+          ),
+        ),
+      );
+    }
+  });
+
+  it('should render admins', () => {
+    // Arrange
+    const testProps = {
+      listUsers: AvatarGroupUsersFactory.createMany(5, [
+        { role: TeamUserRoles.ADMIN },
+        { role: TeamUserRoles.ADMIN },
+        { role: TeamUserRoles.ADMIN },
+        { role: TeamUserRoles.MEMBER },
+        { role: TeamUserRoles.MEMBER },
+      ]),
+      userId: undefined,
+      teamAdmins: true,
+    };
+
+    // Act
+    const { getByText } = render(testProps);
+
+    // Assert
+    for (let i = 0; i < 3; i++) {
+      expect(
+        getByText(
+          getInitials(
+            (testProps.listUsers[i].user as User).firstName,
+            (testProps.listUsers[i].user as User).lastName,
+          ),
+        ),
+      );
+    }
+  });
+
+  it('should render responsibles', () => {
+    // Arrange
+    const testProps = {
+      listUsers: AvatarGroupUsersFactory.createMany(5, [
+        { role: BoardUserRoles.RESPONSIBLE },
+        { role: BoardUserRoles.RESPONSIBLE },
+        { role: BoardUserRoles.RESPONSIBLE },
+        { role: TeamUserRoles.MEMBER },
+        { role: TeamUserRoles.MEMBER },
+      ]),
+      userId: undefined,
+      responsible: true,
+    };
+
+    // Act
+    const { getByText } = render(testProps);
+
+    // Assert
+    for (let i = 0; i < 3; i++) {
+      expect(
+        getByText(
+          getInitials(
+            (testProps.listUsers[i].user as User).firstName,
+            (testProps.listUsers[i].user as User).lastName,
+          ),
+        ),
+      );
+    }
+  });
+
+  it('should render error state', () => {
+    // Arrange
+    const testProps = {
+      listUsers: AvatarGroupUsersFactory.createMany(3),
+      userId: undefined,
+      haveError: true,
+    };
+
+    // Act
+    const { getAllByText } = render(testProps);
+
+    // Assert
+    for (let i = 0; i < 3; i++) {
+      expect(getAllByText('-')).toHaveLength(3);
+    }
+  });
+});
diff --git a/frontend/src/stories/Primitives/Avatar/AvatarGroup.stories.tsx b/frontend/src/components/Primitives/Avatars/AvatarGroup/AvatarGroup.stories.tsx
similarity index 94%
rename from frontend/src/stories/Primitives/Avatar/AvatarGroup.stories.tsx
rename to frontend/src/components/Primitives/Avatars/AvatarGroup/AvatarGroup.stories.tsx
index af41c5767..6d53a4256 100644
--- a/frontend/src/stories/Primitives/Avatar/AvatarGroup.stories.tsx
+++ b/frontend/src/components/Primitives/Avatars/AvatarGroup/AvatarGroup.stories.tsx
@@ -3,11 +3,11 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import AvatarGroup from '@/components/Primitives/Avatar/AvatarGroup';
+import AvatarGroup from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
 import { AvatarGroupUsersFactory } from '@/utils/factories/user';
 
 export default {
-  title: 'Primitives/Avatar/AvatarGroup',
+  title: 'Primitives/Avatars/AvatarGroup',
   component: AvatarGroup,
   parameters: {
     docs: {
@@ -16,7 +16,7 @@ export default {
         Used to display a group of Avatars.
 
         **File Path:**
-        \`@/components/Primitives/Avatar/AvatarGroup.tsx\`
+        \`@/components/Primitives/Avatars/AvatarGroup/AvatarGroup.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Avatar/AvatarGroup.tsx b/frontend/src/components/Primitives/Avatars/AvatarGroup/AvatarGroup.tsx
similarity index 94%
rename from frontend/src/components/Primitives/Avatar/AvatarGroup.tsx
rename to frontend/src/components/Primitives/Avatars/AvatarGroup/AvatarGroup.tsx
index a5c0c2351..ea7a7952e 100644
--- a/frontend/src/components/Primitives/Avatar/AvatarGroup.tsx
+++ b/frontend/src/components/Primitives/Avatars/AvatarGroup/AvatarGroup.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
-import Avatar, { AvatarButton } from '@/components/Primitives/Avatar/Avatar';
-import Flex from '@/components/Primitives/Flex';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Avatar, { AvatarButton } from '@/components/Primitives/Avatars/Avatar/Avatar';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import { User } from '@/types/user/user';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
@@ -16,10 +16,10 @@ export type ListUsersType = {
   _id?: string;
 };
 
-type AvatarGroupProps = {
+export type AvatarGroupProps = {
   listUsers: ListUsersType[];
-  responsible: boolean;
-  teamAdmins: boolean;
+  responsible?: boolean;
+  teamAdmins?: boolean;
   stakeholders?: boolean;
   userId: string | undefined;
   myBoards?: boolean;
@@ -33,11 +33,11 @@ const AVATAR_AMOUNT = 3;
 
 const AvatarGroup = ({
   listUsers,
-  teamAdmins,
-  stakeholders,
+  teamAdmins = false,
+  stakeholders = false,
   userId,
   haveError,
-  responsible,
+  responsible = false,
   myBoards,
   isClickable = false,
   hasDrawer = false,
diff --git a/frontend/src/components/Primitives/Breadcrumb/Breadcrumb.spec.tsx b/frontend/src/components/Primitives/Breadcrumb/Breadcrumb.spec.tsx
new file mode 100644
index 000000000..27d41c2e6
--- /dev/null
+++ b/frontend/src/components/Primitives/Breadcrumb/Breadcrumb.spec.tsx
@@ -0,0 +1,49 @@
+import { renderWithProviders } from '@/utils/testing/renderWithProviders';
+import Breadcrumb, { BreadcrumbProps } from '@/components/Primitives/Breadcrumb/Breadcrumb';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { libraryMocks } from '@/utils/testing/mocks';
+import { ROUTES } from '@/utils/routes';
+
+const DEFAULT_PROPS: BreadcrumbProps = {
+  items: [
+    { title: 'Teams', link: ROUTES.Teams },
+    { title: 'Current Team', isActive: true },
+  ],
+};
+
+const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' });
+
+const render = (props: BreadcrumbProps) =>
+  renderWithProviders(<Breadcrumb {...props} />, { routerOptions: mockRouter });
+
+describe('Components/Primitives/Breadcrumb', () => {
+  it('should render correctly', () => {
+    // Arrange
+    const breadcrumbProps: BreadcrumbProps = { ...DEFAULT_PROPS };
+
+    // Act
+    const { getByTestId } = render(breadcrumbProps);
+
+    // Assert
+    expect(getByTestId('breadcrumb')).toBeInTheDocument();
+    expect(getByTestId('breadcrumb').querySelectorAll('li')).toHaveLength(
+      breadcrumbProps.items.length,
+    );
+  });
+
+  it('should navigate to the link', async () => {
+    // Arrange
+    const breadcrumbProps: BreadcrumbProps = { ...DEFAULT_PROPS };
+
+    // Act
+    const { getByTestId, getByText } = render(breadcrumbProps);
+
+    // Assert
+    expect(getByTestId('breadcrumb')).toBeInTheDocument();
+    fireEvent.click(getByText('Teams'));
+
+    await waitFor(() => {
+      expect(mockRouter.push).toBeCalledWith(ROUTES.Teams, ROUTES.Teams, expect.anything());
+    });
+  });
+});
diff --git a/frontend/src/stories/Primitives/Breadcrumb.stories.tsx b/frontend/src/components/Primitives/Breadcrumb/Breadcrumb.stories.tsx
similarity index 85%
rename from frontend/src/stories/Primitives/Breadcrumb.stories.tsx
rename to frontend/src/components/Primitives/Breadcrumb/Breadcrumb.stories.tsx
index 19a8139b5..ad27a20d9 100644
--- a/frontend/src/stories/Primitives/Breadcrumb.stories.tsx
+++ b/frontend/src/components/Primitives/Breadcrumb/Breadcrumb.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
 
-import Breadcrumb from '@/components/Primitives/Breadcrumb';
+import Breadcrumb from '@/components/Primitives/Breadcrumb/Breadcrumb';
 import dedent from 'ts-dedent';
 
 export default {
@@ -14,7 +14,7 @@ export default {
         Breadcrumbs allow users to navigate back to previous linked pages.
 
         **File Path:**
-        \`@/components/Primitives/Breadcrumb/index.tsx\` and \`@/components/Primitives/Breadcrumb/styles.tsx\`
+        \`@/components/Primitives/Breadcrumb/Breadcrumb.tsx\` and \`@/components/Primitives/Breadcrumb/styles.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Breadcrumb/index.tsx b/frontend/src/components/Primitives/Breadcrumb/Breadcrumb.tsx
similarity index 88%
rename from frontend/src/components/Primitives/Breadcrumb/index.tsx
rename to frontend/src/components/Primitives/Breadcrumb/Breadcrumb.tsx
index 5b90f06d0..1ca844fac 100644
--- a/frontend/src/components/Primitives/Breadcrumb/index.tsx
+++ b/frontend/src/components/Primitives/Breadcrumb/Breadcrumb.tsx
@@ -1,11 +1,11 @@
 import Link from 'next/link';
 import React, { Fragment } from 'react';
 
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import { BreadcrumbItemType, BreadcrumbType } from '@/types/board/Breadcrumb';
 import { StyledList, StyledBreadcrumbItem } from './styles';
 
-type BreadcrumbProps = {
+export type BreadcrumbProps = {
   items: BreadcrumbType;
 };
 
@@ -20,7 +20,7 @@ const BreadcrumbItem = ({ item: { link, title, isActive } }: BreadcrumbItemProps
 };
 
 const Breadcrumb = ({ items }: BreadcrumbProps) => (
-  <StyledList>
+  <StyledList data-testid="breadcrumb">
     {items.map((item: BreadcrumbItemType, index) => (
       <Fragment key={item.title.toLowerCase().split(' ').join('-')}>
         {
diff --git a/frontend/src/components/Primitives/Dialogs/Dialog/Dialog.spec.tsx b/frontend/src/components/Primitives/Dialogs/Dialog/Dialog.spec.tsx
new file mode 100644
index 000000000..fbdca903b
--- /dev/null
+++ b/frontend/src/components/Primitives/Dialogs/Dialog/Dialog.spec.tsx
@@ -0,0 +1,83 @@
+import { createMockRouter } from '@/utils/testing/mocks';
+import { renderWithProviders } from '@/utils/testing/renderWithProviders';
+import { fireEvent, waitFor } from '@testing-library/dom';
+import Dialog, { DialogProps } from './Dialog';
+import { HeaderProps } from './DialogHeader';
+import { FooterProps } from './DialogFooter';
+import Flex from '../../Layout/Flex';
+
+const DEFAULT_PROPS = {
+  isOpen: true,
+  setIsOpen: jest.fn(),
+  children: 'Modal Content',
+  title: 'Modal Title',
+  affirmativeLabel: 'Confirm',
+  handleAffirmative: jest.fn(),
+  handleClose: jest.fn(),
+};
+
+const router = createMockRouter({});
+
+const render = (props: DialogProps & HeaderProps & FooterProps) =>
+  renderWithProviders(
+    <Dialog isOpen={props.isOpen} setIsOpen={props.setIsOpen}>
+      <Dialog.Header title={props.title} />
+      <Flex
+        align="center"
+        justify="center"
+        direction="column"
+        css={{ height: '100%', overflow: 'auto' }}
+      >
+        {props.children}
+      </Flex>
+      <Dialog.Footer
+        handleClose={props.handleClose}
+        handleAffirmative={props.handleAffirmative}
+        affirmativeLabel={props.affirmativeLabel}
+      />
+    </Dialog>,
+    { routerOptions: router },
+  );
+
+describe('Components/Primitives/Dialogs/Dialog', () => {
+  it('should render correctly', () => {
+    // Arrange
+    const testProps = { ...DEFAULT_PROPS };
+
+    // Act
+    const { getByText } = render(testProps);
+
+    // Assert
+    expect(getByText(testProps.children)).toBeInTheDocument();
+    expect(getByText(testProps.title)).toBeInTheDocument();
+    expect(getByText(testProps.affirmativeLabel)).toBeInTheDocument();
+  });
+
+  it('should call handleAffirmative', async () => {
+    // Arrange
+    const testProps = { ...DEFAULT_PROPS };
+
+    // Act
+    const { getByText } = render(testProps);
+    fireEvent.click(getByText(testProps.affirmativeLabel));
+
+    // Assert
+    await waitFor(() => {
+      expect(testProps.handleAffirmative).toHaveBeenCalled();
+    });
+  });
+
+  it('should call handleClose', async () => {
+    // Arrange
+    const testProps = { ...DEFAULT_PROPS };
+
+    // Act
+    const { getByText } = render(testProps);
+    fireEvent.click(getByText('Cancel'));
+
+    // Assert
+    await waitFor(() => {
+      expect(testProps.handleClose).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/frontend/src/stories/Primitives/Dialog.stories.tsx b/frontend/src/components/Primitives/Dialogs/Dialog/Dialog.stories.tsx
similarity index 86%
rename from frontend/src/stories/Primitives/Dialog.stories.tsx
rename to frontend/src/components/Primitives/Dialogs/Dialog/Dialog.stories.tsx
index 4b9693e6f..c0d991ca5 100644
--- a/frontend/src/stories/Primitives/Dialog.stories.tsx
+++ b/frontend/src/components/Primitives/Dialogs/Dialog/Dialog.stories.tsx
@@ -3,12 +3,12 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import Dialog from '@/components/Primitives/Dialog';
-import Flex from '@/components/Primitives/Flex';
-import Button from '@/components/Primitives/Button';
+import Dialog from '@/components/Primitives/Dialogs/Dialog/Dialog';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 export default {
-  title: 'Primitives/Dialog',
+  title: 'Primitives/Dialogs/Dialog',
   component: Dialog,
   parameters: {
     docs: {
@@ -20,10 +20,10 @@ export default {
         a handler in case of confirmation, the content of the confirm button, the ref of the confirm button and whether or not to show the top separator.
 
         **File Path:**
-        \`@/components/Primitives/Dialog/index.tsx\`,
-        \`@/components/Primitives/Dialog/DialogHeader.tsx\`,
-        \`@/components/Primitives/Dialog/DialogFooter.tsx\` and
-        \`@/components/Primitives/Dialog/styles.tsx\`
+        \`@/components/Primitives/Dialogs/Dialog/Dialog.tsx\`,
+        \`@/components/Primitives/Dialogs/Dialog/DialogHeader.tsx\`,
+        \`@/components/Primitives/Dialogs/Dialog/DialogFooter.tsx\` and
+        \`@/components/Primitives/Dialogs/Dialog/styles.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Dialog/index.tsx b/frontend/src/components/Primitives/Dialogs/Dialog/Dialog.tsx
similarity index 85%
rename from frontend/src/components/Primitives/Dialog/index.tsx
rename to frontend/src/components/Primitives/Dialogs/Dialog/Dialog.tsx
index 0bdd779c5..6dcc1c8e7 100644
--- a/frontend/src/components/Primitives/Dialog/index.tsx
+++ b/frontend/src/components/Primitives/Dialogs/Dialog/Dialog.tsx
@@ -3,15 +3,15 @@ import { Dialog as RadixDialog, Portal } from '@radix-ui/react-dialog';
 import { StyledDialogContent, StyledDialogOverlay } from './styles';
 import DialogFooter from './DialogFooter';
 import DialogHeader from './DialogHeader';
-import Flex from '../Flex';
+import Flex from '../../Layout/Flex';
 
-type Props = {
+export type DialogProps = {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
   children?: React.ReactNode;
 };
 
-const Dialog = ({ isOpen, setIsOpen, children }: Props) => (
+const Dialog = ({ isOpen, setIsOpen, children }: DialogProps) => (
   <RadixDialog open={isOpen} onOpenChange={setIsOpen}>
     <Portal>
       <StyledDialogOverlay />
diff --git a/frontend/src/components/Primitives/Dialog/DialogFooter.tsx b/frontend/src/components/Primitives/Dialogs/Dialog/DialogFooter.tsx
similarity index 75%
rename from frontend/src/components/Primitives/Dialog/DialogFooter.tsx
rename to frontend/src/components/Primitives/Dialogs/Dialog/DialogFooter.tsx
index 9384da2d6..9381d9df0 100644
--- a/frontend/src/components/Primitives/Dialog/DialogFooter.tsx
+++ b/frontend/src/components/Primitives/Dialogs/Dialog/DialogFooter.tsx
@@ -1,7 +1,7 @@
-import Button from '../Button';
-import Flex from '../Flex';
+import Button from '../../Inputs/Button/Button';
+import Flex from '../../Layout/Flex';
 
-type FooterProps = {
+export type FooterProps = {
   affirmativeLabel?: string;
   handleAffirmative?: () => void;
   handleClose: () => void;
@@ -31,8 +31,8 @@ const Footer = (props: FooterProps) => {
       <Button variant="primaryOutline" onClick={handleClose} type="button">
         Cancel
       </Button>
-      {(handleAffirmative || affirmativeLabel) && (
-        <Button onClick={handleAffirmative} ref={buttonRef}>
+      {handleAffirmative && affirmativeLabel && (
+        <Button onClick={handleAffirmative} ref={buttonRef} data-testid="dialogFooterSubmit">
           {affirmativeLabel}
         </Button>
       )}
diff --git a/frontend/src/components/Primitives/Dialog/DialogHeader.tsx b/frontend/src/components/Primitives/Dialogs/Dialog/DialogHeader.tsx
similarity index 69%
rename from frontend/src/components/Primitives/Dialog/DialogHeader.tsx
rename to frontend/src/components/Primitives/Dialogs/Dialog/DialogHeader.tsx
index b07294345..50a2c7a85 100644
--- a/frontend/src/components/Primitives/Dialog/DialogHeader.tsx
+++ b/frontend/src/components/Primitives/Dialogs/Dialog/DialogHeader.tsx
@@ -1,11 +1,11 @@
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import { DialogClose } from '@radix-ui/react-dialog';
 import { StyledDialogTitle } from './styles';
-import Button from '../Button';
-import Flex from '../Flex';
-import Text from '../Text';
+import Button from '../../Inputs/Button/Button';
+import Flex from '../../Layout/Flex';
+import Text from '../../Text/Text';
 
-type HeaderProps = {
+export type HeaderProps = {
   title: string;
 };
 
diff --git a/frontend/src/components/Primitives/Dialog/styles.tsx b/frontend/src/components/Primitives/Dialogs/Dialog/styles.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Dialog/styles.tsx
rename to frontend/src/components/Primitives/Dialogs/Dialog/styles.tsx
diff --git a/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.spec.tsx b/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.spec.tsx
new file mode 100644
index 000000000..f47835735
--- /dev/null
+++ b/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.spec.tsx
@@ -0,0 +1,49 @@
+import { createMockRouter } from '@/utils/testing/mocks';
+import { renderWithProviders } from '@/utils/testing/renderWithProviders';
+import { UserListFactory } from '@/utils/factories/user';
+import { fireEvent, waitFor } from '@testing-library/react';
+import UserListDialog, { UserListDialogProps } from './UserListDialog';
+
+const DEFAULT_PROPS = {
+  usersList: UserListFactory.createMany(3),
+  setIsOpen: jest.fn(),
+  isOpen: true,
+  title: 'Team Members',
+  confirmationLabel: 'Save',
+  confirmationHandler: jest.fn(),
+};
+
+const router = createMockRouter({});
+
+const render = (props: UserListDialogProps = DEFAULT_PROPS) =>
+  renderWithProviders(<UserListDialog {...props} />, { routerOptions: router });
+
+describe('Components/Primitives/Dialogs/UserListDialog', () => {
+  it('should render correctly', () => {
+    // Arrange
+    const testProps = { ...DEFAULT_PROPS };
+
+    // Act
+    const { getByText, getAllByTestId, getByTestId } = render(testProps);
+
+    // Assert
+    expect(getAllByTestId('checkboxUserItem')).toHaveLength(testProps.usersList.length);
+    expect(getByText(testProps.confirmationLabel)).toBeInTheDocument();
+    expect(getByTestId('searchInput')).toBeInTheDocument();
+  });
+
+  it('should call confirmationHandler function', async () => {
+    // Arrange
+    const testProps = { ...DEFAULT_PROPS };
+
+    // Act
+    const { getByTestId } = render(testProps);
+
+    // Assert
+    fireEvent.click(getByTestId('dialogFooterSubmit'));
+
+    await waitFor(() => {
+      expect(testProps.confirmationHandler).toBeCalled();
+    });
+  });
+});
diff --git a/frontend/src/components/Teams/Team/ListMembers/ListMembersDialog/index.tsx b/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.tsx
similarity index 50%
rename from frontend/src/components/Teams/Team/ListMembers/ListMembersDialog/index.tsx
rename to frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.tsx
index dc7594c3b..dc1828a25 100644
--- a/frontend/src/components/Teams/Team/ListMembers/ListMembersDialog/index.tsx
+++ b/frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.tsx
@@ -1,33 +1,44 @@
-import React, { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { useSession } from 'next-auth/react';
-import Dialog from '@/components/Primitives/Dialog';
-import Text from '@/components/Primitives/Text';
-import Flex from '@/components/Primitives/Flex';
-import Checkbox from '@/components/Primitives/Checkbox';
+import Dialog from '@/components/Primitives/Dialogs/Dialog/Dialog';
+import Text from '@/components/Primitives/Text/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Checkbox from '@/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox';
 import { UserList } from '@/types/team/userList';
-import SearchInput from '@/components/Teams/Team/ListMembers/ListMembersDialog/SearchInput';
+import Separator from '@/components/Primitives/Separator/Separator';
+import SearchInput from '../../Inputs/SearchInput/SearchInput';
+import CheckboxUserItem from '../../Inputs/Checkboxes/UserCheckbox/UserCheckbox';
 
-type ListMembersDialogProps = {
+export type UserListDialogProps = {
   usersList: UserList[];
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   isOpen: boolean;
-  isTeamPage?: boolean;
-  saveUsers: (checkedUserList: UserList[]) => void;
   title: string;
-  btnTitle: string;
+  confirmationLabel: string;
+  confirmationHandler: (usersList: UserList[]) => void;
 };
 
-const ListMembersDialog = React.memo<ListMembersDialogProps>(
-  ({ usersList, isOpen, setIsOpen, saveUsers, title, btnTitle }) => {
+const UserListDialog = React.memo<UserListDialogProps>(
+  ({ usersList, setIsOpen, isOpen, title, confirmationLabel, confirmationHandler }) => {
     const { data: session } = useSession({ required: false });
-    const [searchMember, setSearchMember] = useState<string>('');
 
-    const [usersChecked, setUsersChecked] = useState(usersList);
+    const [searchMember, setSearchMember] = useState<string>('');
 
+    const [localUsersList, setLocalUsersList] = useState(usersList);
     const [isCheckAll, setIsCheckAll] = useState<boolean>(false);
 
-    // References
-    const scrollRef = useRef<HTMLDivElement>(null);
+    const filteredList = useMemo(() => {
+      const searchString = searchMember.toLowerCase().trim();
+
+      return localUsersList.filter((user) => {
+        const fullName = `${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`;
+        const email = user.email.toLowerCase();
+
+        return (
+          email.includes(searchString) || fullName.includes(searchString) || searchMember === ''
+        );
+      });
+    }, [searchMember, localUsersList]);
 
     const sortUserList = () => {
       const listToBeSorted = [...usersList];
@@ -50,128 +61,101 @@ const ListMembersDialog = React.memo<ListMembersDialogProps>(
       return listToBeSorted;
     };
 
-    // Method to close dialog
     const handleClose = () => {
       setSearchMember('');
-      setUsersChecked(sortUserList());
+      setLocalUsersList(sortUserList);
       setIsOpen(false);
     };
 
-    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setSearchMember(event.target.value);
-    };
-
-    const handleClearSearch = () => {
-      setSearchMember('');
-    };
-
     const handleChecked = (id: string) => {
-      const updateCheckedUsers = usersChecked.map((user) =>
+      const updateCheckedUsers = localUsersList.map((user) =>
         user._id === id ? { ...user, isChecked: !user.isChecked } : user,
       );
 
-      setUsersChecked(updateCheckedUsers);
+      setLocalUsersList(updateCheckedUsers);
     };
 
     const handleSelectAll = () => {
-      const updateCheckedUsers = usersChecked.map((user) =>
+      const updateCheckedUsers = localUsersList.map((user) =>
         user._id !== session?.user.id ? { ...user, isChecked: !isCheckAll } : user,
       );
 
       setIsCheckAll(!isCheckAll);
-      setUsersChecked(updateCheckedUsers);
+      setLocalUsersList(updateCheckedUsers);
     };
 
     const handleUpdateUsers = () => {
       setSearchMember('');
-      saveUsers(usersChecked);
+      confirmationHandler(localUsersList);
     };
 
-    const filteredList = useMemo(() => {
-      const searchString = searchMember.toLowerCase().trim();
-
-      return usersChecked.filter((user) => {
-        const fullName = `${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`;
-        const email = user.email.toLowerCase();
-        return (
-          email.includes(searchString) || fullName.includes(searchString) || searchMember === ''
-        );
-      });
-    }, [searchMember, usersChecked]);
-
-    // Sets User List from State
     useEffect(() => {
       if (usersList.length <= 0) return;
-
-      setUsersChecked(sortUserList());
+      setLocalUsersList(sortUserList());
     }, [usersList]);
 
-    // Update selectAll button when list is all checked
     useEffect(() => {
-      setIsCheckAll(!usersChecked.map((user) => user.isChecked).includes(false));
-    }, [setIsCheckAll, usersChecked]);
+      setIsCheckAll(!localUsersList.map((user) => user.isChecked).includes(false));
+    }, [localUsersList]);
 
     return (
       <Dialog isOpen={isOpen} setIsOpen={setIsOpen}>
-        <Dialog.Header title={btnTitle} />
+        <Dialog.Header title={confirmationLabel} />
         <Flex css={{ p: '$32' }} direction="column">
           <SearchInput
             currentValue={searchMember}
-            handleChange={handleSearchChange}
-            handleClear={handleClearSearch}
-            icon="search"
-            iconPosition="both"
-            id="search"
+            handleChange={(e) => {
+              setSearchMember(e.target.value);
+            }}
+            handleClear={() => {
+              setSearchMember('');
+            }}
             placeholder="Search member"
           />
         </Flex>
-        <Text css={{ display: 'block', px: '$32', py: '$10' }} heading="4">
+        <Text css={{ display: 'block', px: '$32', pb: '$24' }} heading="4">
           {title}
         </Text>
+        <Flex direction="column" gap={8}>
+          <Flex align="center" css={{ px: '$32' }}>
+            <Flex css={{ flex: 1 }}>
+              <Flex align="center" gap={8}>
+                <Checkbox
+                  id="selectAll"
+                  checked={isCheckAll}
+                  handleChange={handleSelectAll}
+                  size="md"
+                />
+                <Text heading={5}>Name</Text>
+              </Flex>
+            </Flex>
+            <Flex css={{ flex: 1 }}>
+              <Text heading={5}>Email</Text>
+            </Flex>
+          </Flex>
+          <Separator orientation="horizontal" />
+        </Flex>
         <Flex
           direction="column"
           justify="start"
           css={{ height: '100%', overflowY: 'auto', py: '$16' }}
-          ref={scrollRef}
         >
-          <Flex css={{ px: '$32' }} direction="column" gap={16}>
+          <Flex css={{ px: '$32' }} direction="column" gap={20}>
             {filteredList?.map((user) => (
-              <Flex key={user._id} align="center">
-                <Flex css={{ flex: 1 }}>
-                  <Checkbox
-                    id={user._id}
-                    checked={user.isChecked}
-                    handleChange={() => {
-                      handleChecked(user._id);
-                    }}
-                    disabled={user._id === session?.user.id && !session?.user.isSAdmin}
-                    label={`${user.firstName} ${user.lastName}`}
-                    size="md"
-                  />
-                </Flex>
-                <Flex css={{ flex: 1 }}>
-                  <Text color="primary300" size="sm">
-                    {user.email}
-                  </Text>
-                </Flex>
-              </Flex>
+              <CheckboxUserItem
+                key={user._id}
+                user={user}
+                disabled={user._id === session?.user.id && !session?.user.isSAdmin}
+                handleChecked={handleChecked}
+              />
             ))}
           </Flex>
         </Flex>
         <Flex
-          justify="between"
+          justify="end"
           align="center"
           css={{ padding: '$32', borderTop: '1px solid $colors$primary100' }}
         >
-          {searchMember.length <= 0 && (
-            <Checkbox
-              id="selectAll"
-              checked={isCheckAll}
-              handleChange={handleSelectAll}
-              label="Select all"
-              size="md"
-            />
-          )}
           <Dialog.Footer
             handleAffirmative={handleUpdateUsers}
             handleClose={handleClose}
@@ -184,4 +168,4 @@ const ListMembersDialog = React.memo<ListMembersDialogProps>(
   },
 );
 
-export default ListMembersDialog;
+export default UserListDialog;
diff --git a/frontend/src/components/Teams/Team/ListMembers/ListMembersDialog/styles.tsx b/frontend/src/components/Primitives/Dialogs/UserListDialog/styles.tsx
similarity index 72%
rename from frontend/src/components/Teams/Team/ListMembers/ListMembersDialog/styles.tsx
rename to frontend/src/components/Primitives/Dialogs/UserListDialog/styles.tsx
index 123eea58f..653adf500 100644
--- a/frontend/src/components/Teams/Team/ListMembers/ListMembersDialog/styles.tsx
+++ b/frontend/src/components/Primitives/Dialogs/UserListDialog/styles.tsx
@@ -1,6 +1,51 @@
 import { styled } from '@/styles/stitches/stitches.config';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+
+const StyledInputWrapper = styled(Flex, {
+  px: '$16',
+  boxShadow: '0',
+  border: '1px solid $primary200',
+  outline: 'none',
+  borderRadius: '$4',
+  backgroundColor: '$white',
+  alignItems: 'center',
+  variants: {
+    variant: {
+      default: {
+        '&:focus': {
+          borderColor: '$primary400',
+          boxShadow: '0px 0px 0px 2px $colors$primaryLightest',
+        },
+        '&:-webkit-autofill': {
+          '-webkit-box-shadow':
+            '0 0 0px 1000px white inset, 0px 0px 0px 2px $colors$primaryLightest',
+        },
+      },
+      valid: {
+        borderColor: '$success700',
+        boxShadow: '0px 0px 0px 2px $colors$successLightest',
+        '&:-webkit-autofill': {
+          '-webkit-box-shadow':
+            '0 0 0px 1000px white inset, 0px 0px 0px 2px $colors$successLightest',
+        },
+      },
+      error: {
+        borderColor: '$danger700',
+        boxShadow: '0px 0px 0px 2px $colors$dangerLightest',
+        '&:-webkit-autofill': {
+          '-webkit-box-shadow':
+            '0 0 0px 1000px white inset, 0px 0px 0px 2px $colors$dangerLightest',
+        },
+      },
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$primary50',
+      },
+    },
+  },
+});
 
 const PlaceholderText = styled(Text, {
   color: '$primary300',
@@ -8,33 +53,13 @@ const PlaceholderText = styled(Text, {
   pointerEvents: 'none',
   transformOrigin: '0 0',
   transition: 'all .2s ease-in-out',
-  p: '$16',
-  '&[data-iconposition="left"]': {
-    pl: '$57',
-  },
-  '&[data-iconposition="right"]': {
-    pl: '$17',
-  },
-  '&[data-iconposition="both"]': {
-    pl: '$57',
-  },
+  py: '$16',
 });
 
 const IconWrapper = styled(Flex, {
-  position: 'absolute',
-  top: '$16',
-  left: 'none',
-  right: 'none',
+  alignItems: 'center',
   cursor: 'default',
-  '&[data-iconposition="left"]': {
-    left: '$16',
-  },
-  '&[data-iconposition="right"]': {
-    right: '$16',
-  },
-  '&[data-iconposition="both"]': {
-    left: '$16',
-  },
+  p: '$2',
   '&[data-type="password"]': {
     '&:hover': {
       cursor: 'pointer',
@@ -46,13 +71,14 @@ const StyledInput = styled('input', {
   // Reset
   appearance: 'none',
   borderWidth: '0',
+  boxShadow: '0',
   boxSizing: 'border-box',
   margin: '0',
   outlineOffset: '0',
   padding: '0',
   fontFamily: '$body',
   WebkitTapHighlightColor: 'rgba(0,0,0,0)',
-  backgroundColor: '$white',
+  backgroundColor: '$transparent',
   '&::before': {
     boxSizing: 'border-box',
   },
@@ -60,7 +86,7 @@ const StyledInput = styled('input', {
     boxSizing: 'border-box',
   },
   '&:-internal-autofill-selected': {
-    backgroundColor: '$white',
+    backgroundColor: '$transparent',
   },
 
   '&:-webkit-autofill,&:-webkit-autofill:active,&:-webkit-autofill:focus': {
@@ -79,56 +105,16 @@ const StyledInput = styled('input', {
   },
 
   // Custom
-
-  display: 'flex',
   fontSize: '$16',
-  px: '$16',
-  boxShadow: '0',
-  border: '1px solid $primary200',
+  lineHeight: '$20',
   outline: 'none',
   width: '100%',
-  borderRadius: '$4',
-  lineHeight: '$20',
   height: '$56',
   pt: '$28',
   pb: '$8',
   '&::-webkit-input-placeholder': {
-    fontSize: '22px !important',
     color: '$primary300',
   },
-  '&:disabled': {
-    backgroundColor: '$primary50',
-  },
-  variants: {
-    variant: {
-      default: {
-        '&:focus': {
-          borderColor: '$primary400',
-          boxShadow: '0px 0px 0px 2px $colors$primaryLightest',
-        },
-        '&:-webkit-autofill': {
-          '-webkit-box-shadow':
-            '0 0 0px 1000px white inset, 0px 0px 0px 2px $colors$primaryLightest',
-        },
-      },
-      valid: {
-        borderColor: '$success700',
-        boxShadow: '0px 0px 0px 2px $colors$successLightest',
-        '&:-webkit-autofill': {
-          '-webkit-box-shadow':
-            '0 0 0px 1000px white inset, 0px 0px 0px 2px $colors$successLightest',
-        },
-      },
-      error: {
-        borderColor: '$danger700',
-        boxShadow: '0px 0px 0px 2px $colors$dangerLightest',
-        '&:-webkit-autofill': {
-          '-webkit-box-shadow':
-            '0 0 0px 1000px white inset, 0px 0px 0px 2px $colors$dangerLightest',
-        },
-      },
-    },
-  },
   color: '$primaryBase',
   '&::placeholder': {
     '&:disabled': {
@@ -145,24 +131,6 @@ const StyledInput = styled('input', {
   '&:focus ~ label': {
     transform: `scale(0.875) translateX(0.2rem) translateY(-0.5rem)`,
   },
-
-  '&[data-iconposition="left"]': {
-    pl: '$56',
-    '&:not(:placeholder-shown) ~ label': {
-      transform: `scale(0.875) translateX(0.5rem) translateY(-0.5rem)`,
-    },
-    '&:focus ~ label': {
-      transform: `scale(0.875) translateX(0.5rem) translateY(-0.5rem)`,
-    },
-  },
-
-  '&[data-iconposition="right"]': {
-    pr: '$56',
-  },
-
-  '&[data-iconposition="both"]': {
-    px: '$56',
-  },
 });
 
-export { IconWrapper, PlaceholderText, StyledInput };
+export { IconWrapper, PlaceholderText, StyledInputWrapper, StyledInput };
diff --git a/frontend/src/components/Primitives/Icon.tsx b/frontend/src/components/Primitives/Icons/Icon/Icon.tsx
similarity index 86%
rename from frontend/src/components/Primitives/Icon.tsx
rename to frontend/src/components/Primitives/Icons/Icon/Icon.tsx
index 2e3cfc8b7..133250f3d 100644
--- a/frontend/src/components/Primitives/Icon.tsx
+++ b/frontend/src/components/Primitives/Icons/Icon/Icon.tsx
@@ -1,6 +1,6 @@
 import { CSSProps } from '@/styles/stitches/stitches.config';
 
-import Svg from '@/components/Primitives/Svg';
+import Svg from '@/components/Primitives/Icons/Svg/Svg';
 
 type Props = CSSProps & {
   name: string;
diff --git a/frontend/src/stories/Misc/Icons.stories.tsx b/frontend/src/components/Primitives/Icons/Icon/Icons.stories.tsx
similarity index 86%
rename from frontend/src/stories/Misc/Icons.stories.tsx
rename to frontend/src/components/Primitives/Icons/Icon/Icons.stories.tsx
index 422dc3186..355d4aef8 100644
--- a/frontend/src/stories/Misc/Icons.stories.tsx
+++ b/frontend/src/components/Primitives/Icons/Icon/Icons.stories.tsx
@@ -3,15 +3,15 @@ import { ComponentStory } from '@storybook/react';
 
 import Sprite from '@/components/icons/Sprite';
 import dedent from 'ts-dedent';
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Input from '@/components/Primitives/Input';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Input from '@/components/Primitives/Inputs/Input/Input';
 import { FormProvider, useForm } from 'react-hook-form';
-import Card from '../components/Card';
+import Card from '../../../../stories/components/Card';
 
 export default {
-  title: 'Misc/Icons',
+  title: 'Primitives/Icons',
   component: Sprite,
   parameters: {
     layout: 'start',
diff --git a/frontend/src/stories/Primitives/Svg.stories.tsx b/frontend/src/components/Primitives/Icons/Svg/Svg.stories.tsx
similarity index 75%
rename from frontend/src/stories/Primitives/Svg.stories.tsx
rename to frontend/src/components/Primitives/Icons/Svg/Svg.stories.tsx
index 5778b2a57..028cb83ec 100644
--- a/frontend/src/stories/Primitives/Svg.stories.tsx
+++ b/frontend/src/components/Primitives/Icons/Svg/Svg.stories.tsx
@@ -3,21 +3,21 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import Svg from '@/components/Primitives/Svg';
-import Flex from '@/components/Primitives/Flex';
-import { SvgSizeType } from '../types/PrimitiveTypes';
+import Svg from '@/components/Primitives/Icons/Svg/Svg';
+import Flex from '@/components/Primitives/Layout/Flex';
+import { SvgSizeType } from '../../../../stories/types/PrimitiveTypes';
 
 const SIZE_OPTIONS: SvgSizeType[] = [12, 16, 18, 20, 24, 32, 48, 100];
 
 export default {
-  title: 'Primitives/Svg',
+  title: 'Primitives/Icons/Svg',
   component: Svg,
   parameters: {
     docs: {
       description: {
         component: dedent`
         **File Path:**
-        \`@/components/Primitives/Svg.tsx\`
+        \`@/components/Primitives/Icons/Svg/Svg.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Svg.tsx b/frontend/src/components/Primitives/Icons/Svg/Svg.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Svg.tsx
rename to frontend/src/components/Primitives/Icons/Svg/Svg.tsx
diff --git a/frontend/src/stories/Primitives/Button.stories.tsx b/frontend/src/components/Primitives/Inputs/Button/Button.stories.tsx
similarity index 91%
rename from frontend/src/stories/Primitives/Button.stories.tsx
rename to frontend/src/components/Primitives/Inputs/Button/Button.stories.tsx
index c1de30d81..ad97751b5 100644
--- a/frontend/src/stories/Primitives/Button.stories.tsx
+++ b/frontend/src/components/Primitives/Inputs/Button/Button.stories.tsx
@@ -3,22 +3,22 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import Button from '@/components/Primitives/Button';
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import {
   ButtonVariantType,
   ButtonSizeType,
   ButtonVariant,
   ButtonSize,
-} from '../types/PrimitiveTypes';
+} from '../../../../stories/types/PrimitiveTypes';
 
 const VARIANT_OPTIONS: ButtonVariantType[] = [...ButtonVariant];
 const SIZE_OPTIONS: ButtonSizeType[] = [...ButtonSize];
 
 export default {
-  title: 'Primitives/Button',
+  title: 'Primitives/Inputs/Button',
   component: Button,
   parameters: {
     docs: {
@@ -27,7 +27,7 @@ export default {
         Interactive element activated by a user. Once activated, it then performs an action.
 
         **File Path:**
-        \`@/components/Primitives/Button.tsx\`
+        \`@/components/Primitives/Inputs/Button/Button.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Button.tsx b/frontend/src/components/Primitives/Inputs/Button/Button.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Button.tsx
rename to frontend/src/components/Primitives/Inputs/Button/Button.tsx
diff --git a/frontend/src/components/Primitives/Checkbox.spec.tsx b/frontend/src/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox.spec.tsx
similarity index 92%
rename from frontend/src/components/Primitives/Checkbox.spec.tsx
rename to frontend/src/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox.spec.tsx
index edd6dac1a..24fbaef4e 100644
--- a/frontend/src/components/Primitives/Checkbox.spec.tsx
+++ b/frontend/src/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox.spec.tsx
@@ -4,7 +4,7 @@ import Checkbox, { CheckboxProps } from './Checkbox';
 
 const render = (props: CheckboxProps) => renderWithProviders(<Checkbox {...props} />);
 
-describe('Components/Primitives/Checkbox', () => {
+describe('Components/Primitives/Checkboxes/Checkbox', () => {
   it('should render correctly', () => {
     // Arrange
     const checkboxProps: CheckboxProps = { id: 'checkbox', label: 'Label', size: 'sm' };
@@ -14,7 +14,7 @@ describe('Components/Primitives/Checkbox', () => {
 
     // Assert
     expect(getByTestId('checkBox')).toBeInTheDocument();
-    expect(getByText(checkboxProps.label)).toBeInTheDocument();
+    expect(getByText(checkboxProps.label!)).toBeInTheDocument();
   });
 
   it('should render checked state', () => {
diff --git a/frontend/src/stories/Primitives/Checkbox.stories.tsx b/frontend/src/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox.stories.tsx
similarity index 85%
rename from frontend/src/stories/Primitives/Checkbox.stories.tsx
rename to frontend/src/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox.stories.tsx
index 4e8f3de19..e6540b3f9 100644
--- a/frontend/src/stories/Primitives/Checkbox.stories.tsx
+++ b/frontend/src/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox.stories.tsx
@@ -3,15 +3,15 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import Checkbox from '@/components/Primitives/Checkbox';
-import Flex from '@/components/Primitives/Flex';
-import { CheckboxSizeType, CheckboxVariantType } from '../types/PrimitiveTypes';
+import Checkbox from '@/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox';
+import Flex from '@/components/Primitives/Layout/Flex';
+import { CheckboxSizeType, CheckboxVariantType } from '../../../../../stories/types/PrimitiveTypes';
 
 const SIZE_OPTIONS: CheckboxSizeType[] = ['sm', 'md'];
 const VARIANT_OPTIONS: CheckboxVariantType[] = ['default', 'error'];
 
 export default {
-  title: 'Primitives/Checkbox',
+  title: 'Primitives/Inputs/Checkbox',
   component: Checkbox,
   parameters: {
     docs: {
@@ -20,7 +20,7 @@ export default {
         A control that allows the user to toggle between checked and not checked.
 
         **File Path:**
-        \`@/components/Primitives/Checkbox.tsx\`
+        \`@/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Checkbox.tsx b/frontend/src/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox.tsx
similarity index 83%
rename from frontend/src/components/Primitives/Checkbox.tsx
rename to frontend/src/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox.tsx
index aa484ff50..0e6f19bf5 100644
--- a/frontend/src/components/Primitives/Checkbox.tsx
+++ b/frontend/src/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox.tsx
@@ -3,17 +3,17 @@ import React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Flex from './Flex';
-import Text from './Text';
-import Icon from './Icon';
+import Flex from '../../../Layout/Flex';
+import Text from '../../../Text/Text';
+import Icon from '../../../Icons/Icon/Icon';
 
 const StyledCheckbox = styled(CheckboxPrimitive.Root, {
   all: 'unset',
   backgroundColor: 'white',
   cursor: 'pointer',
   boxSizing: 'border-box',
-  borderRadius: '$2',
-  border: '1px solid',
+  borderRadius: '$3',
+  border: '$sizes$1 solid',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -82,7 +82,7 @@ const StyledIndicator = styled(CheckboxPrimitive.Indicator, {
 
 export type CheckboxProps = {
   id: string;
-  label: string;
+  label?: string;
   variant?: 'default' | 'error';
   size: 'sm' | 'md';
   checked?: boolean;
@@ -113,18 +113,20 @@ const Checkbox = ({
         <Icon name="check" />
       </StyledIndicator>
     </StyledCheckbox>
-    <Text
-      as="label"
-      color={disabled ? 'primary200' : 'primary800'}
-      css={{
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-      }}
-      htmlFor={id}
-      size="sm"
-    >
-      {label}
-    </Text>
+    {label && (
+      <Text
+        as="label"
+        color={disabled ? 'primary200' : 'primary800'}
+        css={{
+          cursor: 'pointer',
+          wordBreak: 'break-word',
+        }}
+        htmlFor={id}
+        size="sm"
+      >
+        {label}
+      </Text>
+    )}
   </Flex>
 );
 export default Checkbox;
diff --git a/frontend/src/components/Primitives/Inputs/Checkboxes/UserCheckbox/UserCheckbox.spec.tsx b/frontend/src/components/Primitives/Inputs/Checkboxes/UserCheckbox/UserCheckbox.spec.tsx
new file mode 100644
index 000000000..a69da81ec
--- /dev/null
+++ b/frontend/src/components/Primitives/Inputs/Checkboxes/UserCheckbox/UserCheckbox.spec.tsx
@@ -0,0 +1,31 @@
+import { createMockRouter } from '@/utils/testing/mocks';
+import { renderWithProviders } from '@/utils/testing/renderWithProviders';
+import { UserListFactory } from '@/utils/factories/user';
+import UserCheckbox, { UserCheckboxProps } from './UserCheckbox';
+
+const DEFAULT_PROPS = {
+  user: UserListFactory.create({ isChecked: true }),
+  disabled: false,
+  handleChecked: jest.fn(),
+};
+
+const router = createMockRouter({});
+
+const render = (props: UserCheckboxProps = DEFAULT_PROPS) =>
+  renderWithProviders(<UserCheckbox {...props} />, { routerOptions: router });
+
+describe('Components/Primitives/Checkboxes/UserCheckbox', () => {
+  it('should render correctly', () => {
+    // Arrange
+    const testProps = { ...DEFAULT_PROPS };
+
+    // Act
+    const { getByText, getByTestId, getByRole } = render(testProps);
+
+    // Assert
+    expect(getByText(`${testProps.user.firstName} ${testProps.user.lastName}`)).toBeInTheDocument();
+    expect(getByText(testProps.user.email)).toBeInTheDocument();
+    expect(getByTestId('checkBox')).toBeInTheDocument();
+    expect(getByRole('checkbox')).toBeChecked();
+  });
+});
diff --git a/frontend/src/components/Primitives/Inputs/Checkboxes/UserCheckbox/UserCheckbox.tsx b/frontend/src/components/Primitives/Inputs/Checkboxes/UserCheckbox/UserCheckbox.tsx
new file mode 100644
index 000000000..0068e5fda
--- /dev/null
+++ b/frontend/src/components/Primitives/Inputs/Checkboxes/UserCheckbox/UserCheckbox.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { UserList } from '@/types/team/userList';
+import Checkbox from '@/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+
+export type UserCheckboxProps = {
+  user: UserList;
+  disabled: boolean;
+  handleChecked: (id: string) => void;
+};
+
+const UserCheckbox = ({ user, disabled, handleChecked }: UserCheckboxProps) => (
+  <Flex key={user._id} align="center" data-testid="checkboxUserItem">
+    <Flex css={{ flex: 1 }}>
+      <Checkbox
+        id={user._id}
+        checked={user.isChecked}
+        handleChange={() => {
+          handleChecked(user._id);
+        }}
+        disabled={disabled}
+        label={`${user.firstName} ${user.lastName}`}
+        size="md"
+      />
+    </Flex>
+    <Flex css={{ flex: 1 }}>
+      <Text color="primary300" size="sm">
+        {user.email}
+      </Text>
+    </Flex>
+  </Flex>
+);
+
+export default UserCheckbox;
diff --git a/frontend/src/stories/Primitives/Input.stories.tsx b/frontend/src/components/Primitives/Inputs/Input/Input.stories.tsx
similarity index 91%
rename from frontend/src/stories/Primitives/Input.stories.tsx
rename to frontend/src/components/Primitives/Inputs/Input/Input.stories.tsx
index 50c77c98d..e4f549473 100644
--- a/frontend/src/stories/Primitives/Input.stories.tsx
+++ b/frontend/src/components/Primitives/Inputs/Input/Input.stories.tsx
@@ -4,10 +4,10 @@ import { ComponentStory } from '@storybook/react';
 import dedent from 'ts-dedent';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import Input from '@/components/Primitives/Input';
+import Input from '@/components/Primitives/Inputs/Input/Input';
 
 export default {
-  title: 'Primitives/Input',
+  title: 'Primitives/Inputs/Input',
   component: Input,
   parameters: {
     docs: {
@@ -18,7 +18,7 @@ export default {
         The border color and below text are controlled by the validation of the form the input is in. As well as whether the helper text or an error message appears.
 
         **File Path:**
-        \`@/components/Primitives/Input/index.tsx\` and \`@/components/Primitives/Input/styles.tsx\` 
+        \`@/components/Primitives/Inputs/Input/Input.tsx\` and \`@/components/Primitives/Input/styles.tsx\` 
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Input/index.tsx b/frontend/src/components/Primitives/Inputs/Input/Input.tsx
similarity index 97%
rename from frontend/src/components/Primitives/Input/index.tsx
rename to frontend/src/components/Primitives/Inputs/Input/Input.tsx
index 1f1be4a01..58e40853d 100644
--- a/frontend/src/components/Primitives/Input/index.tsx
+++ b/frontend/src/components/Primitives/Inputs/Input/Input.tsx
@@ -1,10 +1,10 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import isEmpty from '@/utils/isEmpty';
-import Flex from '../Flex';
-import Text from '../Text';
+import Flex from '../../Layout/Flex';
+import Text from '../../Text/Text';
 import {
   HelperTextWrapper,
   IconWrapper,
diff --git a/frontend/src/components/Primitives/Input/styles.tsx b/frontend/src/components/Primitives/Inputs/Input/styles.tsx
similarity index 98%
rename from frontend/src/components/Primitives/Input/styles.tsx
rename to frontend/src/components/Primitives/Inputs/Input/styles.tsx
index 442e76b6e..3123f6c83 100644
--- a/frontend/src/components/Primitives/Input/styles.tsx
+++ b/frontend/src/components/Primitives/Inputs/Input/styles.tsx
@@ -1,7 +1,7 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Flex from '../Flex';
-import Text from '../Text';
+import Flex from '../../Layout/Flex';
+import Text from '../../Text/Text';
 
 const StyledInputWrapper = styled(Flex, {
   px: '$16',
diff --git a/frontend/src/stories/Primitives/RadioGroup.stories.tsx b/frontend/src/components/Primitives/Inputs/RadioGroup/RadioGroup.stories.tsx
similarity index 92%
rename from frontend/src/stories/Primitives/RadioGroup.stories.tsx
rename to frontend/src/components/Primitives/Inputs/RadioGroup/RadioGroup.stories.tsx
index deda979de..5839bd4b4 100644
--- a/frontend/src/stories/Primitives/RadioGroup.stories.tsx
+++ b/frontend/src/components/Primitives/Inputs/RadioGroup/RadioGroup.stories.tsx
@@ -8,15 +8,15 @@ import {
   RadioGroupItem,
   RadioGroupIndicator,
   Label,
-} from '@/components/Primitives/RadioGroup';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+} from '@/components/Primitives/Inputs/RadioGroup/RadioGroup';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 
 import {
   RadioGroupDirectionType,
   RadioGroupSizeType,
   RadioGroupFontWeightType,
-} from '../types/PrimitiveTypes';
+} from '../../../../stories/types/PrimitiveTypes';
 
 const DIRECTION_OPTIONS: RadioGroupDirectionType[] = ['row', 'column'];
 
@@ -25,7 +25,7 @@ const SIZE_OPTIONS: RadioGroupSizeType[] = ['sm', 'md', 'lg'];
 const FONT_WEIGHT_OPTIONS: RadioGroupFontWeightType[] = ['regular', 'medium', 'bold'];
 
 export default {
-  title: 'Primitives/RadioGroup',
+  title: 'Primitives/Inputs/RadioGroup',
   component: RadioGroup,
   parameters: {
     docs: {
@@ -34,7 +34,7 @@ export default {
         A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
 
         **File Path:**
-        \`@/components/Primitives/RadioGroup.tsx\`
+        \`@/components/Primitives/Inputs/RadioGroup/RadioGroup.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/RadioGroup.tsx b/frontend/src/components/Primitives/Inputs/RadioGroup/RadioGroup.tsx
similarity index 100%
rename from frontend/src/components/Primitives/RadioGroup.tsx
rename to frontend/src/components/Primitives/Inputs/RadioGroup/RadioGroup.tsx
diff --git a/frontend/src/components/Primitives/Inputs/SearchInput/SearchInput.tsx b/frontend/src/components/Primitives/Inputs/SearchInput/SearchInput.tsx
new file mode 100644
index 000000000..be65a4dd7
--- /dev/null
+++ b/frontend/src/components/Primitives/Inputs/SearchInput/SearchInput.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import { IconWrapper, PlaceholderText, StyledInput, StyledInputWrapper } from '../Input/styles';
+
+interface InputProps {
+  placeholder: string;
+  disabled?: boolean;
+  currentValue?: string;
+  handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleClear?: () => void;
+}
+
+const SearchInput: React.FC<InputProps> = ({
+  placeholder,
+  disabled = false,
+  currentValue,
+  handleChange,
+  handleClear,
+}) => (
+  <Flex
+    css={{ position: 'relative', width: '100%', mb: '$16', height: 'auto' }}
+    direction="column"
+    data-testid="searchInput"
+  >
+    <StyledInputWrapper gap="8" disabled={disabled}>
+      <IconWrapper>
+        <Icon
+          name="search"
+          css={{
+            color: '$primary300',
+          }}
+        />
+      </IconWrapper>
+      <Flex css={{ flexGrow: '1' }}>
+        <StyledInput
+          disabled={disabled}
+          placeholder=" "
+          value={currentValue}
+          onChange={handleChange}
+        />
+        <PlaceholderText as="label">{placeholder}</PlaceholderText>
+      </Flex>
+      <IconWrapper
+        justify="center"
+        css={{
+          width: '$24',
+          height: '$24',
+          borderRadius: '100%',
+        }}
+        onClick={handleClear}
+      >
+        <Icon
+          name="close"
+          size={16}
+          css={{
+            color: '$white',
+            backgroundColor: '$primary100',
+            borderRadius: '100%',
+            padding: '$2',
+          }}
+        />
+      </IconWrapper>
+    </StyledInputWrapper>
+  </Flex>
+);
+
+export default SearchInput;
diff --git a/frontend/src/components/Primitives/Select.spec.tsx b/frontend/src/components/Primitives/Inputs/Select/Select.spec.tsx
similarity index 93%
rename from frontend/src/components/Primitives/Select.spec.tsx
rename to frontend/src/components/Primitives/Inputs/Select/Select.spec.tsx
index fce3154cd..fd9ea09bf 100644
--- a/frontend/src/components/Primitives/Select.spec.tsx
+++ b/frontend/src/components/Primitives/Inputs/Select/Select.spec.tsx
@@ -1,9 +1,9 @@
 // TODO: Test Select Options
 
 import { renderWithProviders } from '@/utils/testing/renderWithProviders';
-import Flex from './Flex';
-import Text from './Text';
-import Icon from './Icon';
+import Flex from '../../Layout/Flex';
+import Text from '../../Text/Text';
+import Icon from '../../Icons/Icon/Icon';
 import { Select, SelectContent, SelectIcon, SelectTrigger, SelectValue } from './Select';
 
 const DUMMY_OPTIONS = [
diff --git a/frontend/src/stories/Primitives/Select.stories.tsx b/frontend/src/components/Primitives/Inputs/Select/Select.stories.tsx
similarity index 92%
rename from frontend/src/stories/Primitives/Select.stories.tsx
rename to frontend/src/components/Primitives/Inputs/Select/Select.stories.tsx
index c2b4490dc..0d463bcc3 100644
--- a/frontend/src/stories/Primitives/Select.stories.tsx
+++ b/frontend/src/components/Primitives/Inputs/Select/Select.stories.tsx
@@ -9,10 +9,10 @@ import {
   SelectValue,
   SelectIcon,
   SelectContent,
-} from '@/components/Primitives/Select';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Icon from '@/components/Primitives/Icon';
+} from '@/components/Primitives/Inputs/Select/Select';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 
 const DUMMY_OPTIONS = [
   {
@@ -38,7 +38,7 @@ const DUMMY_OPTIONS = [
 ];
 
 export default {
-  title: 'Primitives/Select',
+  title: 'Primitives/Inputs/Select',
   component: Select,
   parameters: {
     docs: {
@@ -47,7 +47,7 @@ export default {
         Displays a list of options for the user to pick from.
 
         **File Path:**
-        \`@/components/Primitives/Select.tsx\`
+        \`@/components/Primitives/Inputs/Select/Select.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Select.tsx b/frontend/src/components/Primitives/Inputs/Select/Select.tsx
similarity index 98%
rename from frontend/src/components/Primitives/Select.tsx
rename to frontend/src/components/Primitives/Inputs/Select/Select.tsx
index 465c363ad..fb9643120 100644
--- a/frontend/src/components/Primitives/Select.tsx
+++ b/frontend/src/components/Primitives/Inputs/Select/Select.tsx
@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { styled, CSS } from '@/styles/stitches/stitches.config';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
-import Box from './Box';
-import Flex from './Flex';
+import Box from '../../Layout/Box';
+import Flex from '../../Layout/Flex';
 
 export const SelectTrigger = styled(SelectPrimitive.SelectTrigger, {
   all: 'unset',
diff --git a/frontend/src/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch.spec.tsx b/frontend/src/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch.spec.tsx
new file mode 100644
index 000000000..0769d3bbe
--- /dev/null
+++ b/frontend/src/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch.spec.tsx
@@ -0,0 +1,65 @@
+import { renderWithProviders } from '@/utils/testing/renderWithProviders';
+import { fireEvent, waitFor } from '@testing-library/dom';
+import ConfigurationSwitch, { ConfigurationSwitchProps } from './ConfigurationSwitch';
+
+const render = (props: ConfigurationSwitchProps) =>
+  renderWithProviders(<ConfigurationSwitch {...props} />);
+
+describe('Components/Primitives/Switches/ConfigurationSwitch', () => {
+  it('should render correctly', () => {
+    // Arrange
+    const mockHandleFn = jest.fn();
+    const configurationSwitchProps: ConfigurationSwitchProps = {
+      title: 'Title',
+      isChecked: false,
+      handleCheckedChange: mockHandleFn,
+    };
+
+    // Act
+    const { getByTestId, getByText } = render(configurationSwitchProps);
+
+    // Assert
+    expect(getByTestId('switch')).toBeInTheDocument();
+    expect(getByText(configurationSwitchProps.title)).toBeInTheDocument();
+  });
+
+  it('should render checked state', () => {
+    // Arrange
+    const mockHandleFn = jest.fn();
+    const configurationSwitchProps: ConfigurationSwitchProps = {
+      title: 'Title',
+      isChecked: true,
+      handleCheckedChange: mockHandleFn,
+    };
+
+    // Act
+    const { getByTestId, getByRole } = render(configurationSwitchProps);
+
+    // Assert
+    expect(getByTestId('switch')).toBeInTheDocument();
+    expect(getByRole('switch')).toBeChecked();
+  });
+
+  it('should handle checkedChange function', async () => {
+    // Arrange
+    const mockHandleFn = jest.fn();
+    const configurationSwitchProps: ConfigurationSwitchProps = {
+      title: 'Title',
+      isChecked: false,
+      handleCheckedChange: mockHandleFn,
+    };
+
+    // Act
+    const { getByTestId, getByRole } = render(configurationSwitchProps);
+
+    // Assert
+    expect(getByTestId('switch')).toBeInTheDocument();
+    expect(getByRole('switch')).not.toBeChecked();
+
+    fireEvent.click(getByRole('switch'));
+
+    await waitFor(() => {
+      expect(mockHandleFn).toBeCalled();
+    });
+  });
+});
diff --git a/frontend/src/components/Primitives/ConfigurationSwitch.tsx b/frontend/src/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch.tsx
similarity index 79%
rename from frontend/src/components/Primitives/ConfigurationSwitch.tsx
rename to frontend/src/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch.tsx
index 943396afa..021065a17 100644
--- a/frontend/src/components/Primitives/ConfigurationSwitch.tsx
+++ b/frontend/src/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch.tsx
@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 
-import Flex from '@/components/Primitives/Flex';
-import Switch from '@/components/Primitives/Switch';
-import Text from '@/components/Primitives/Text';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Switch from '@/components/Primitives/Inputs/Switches/Switch/Switch';
+import Text from '@/components/Primitives/Text/Text';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 
-type ConfigurationSwitchProps = {
+export type ConfigurationSwitchProps = {
   title: string;
   text?: string;
   isChecked: boolean;
diff --git a/frontend/src/components/Primitives/Switch.spec.tsx b/frontend/src/components/Primitives/Inputs/Switches/Switch/Switch.spec.tsx
similarity index 95%
rename from frontend/src/components/Primitives/Switch.spec.tsx
rename to frontend/src/components/Primitives/Inputs/Switches/Switch/Switch.spec.tsx
index 82862660c..7f8761251 100644
--- a/frontend/src/components/Primitives/Switch.spec.tsx
+++ b/frontend/src/components/Primitives/Inputs/Switches/Switch/Switch.spec.tsx
@@ -4,7 +4,7 @@ import Switch, { SwitchProps } from './Switch';
 
 const render = (props: SwitchProps) => renderWithProviders(<Switch {...props} />);
 
-describe('Components/Primitives/Switch', () => {
+describe('Components/Primitives/Switches/Switch', () => {
   it('should render correctly', () => {
     // Arrange
     const switchProps: SwitchProps = { checked: false };
diff --git a/frontend/src/stories/Primitives/Switch.stories.tsx b/frontend/src/components/Primitives/Inputs/Switches/Switch/Switch.stories.tsx
similarity index 86%
rename from frontend/src/stories/Primitives/Switch.stories.tsx
rename to frontend/src/components/Primitives/Inputs/Switches/Switch/Switch.stories.tsx
index 9cf7b8b20..a77b5cbde 100644
--- a/frontend/src/stories/Primitives/Switch.stories.tsx
+++ b/frontend/src/components/Primitives/Inputs/Switches/Switch/Switch.stories.tsx
@@ -3,13 +3,13 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import Switch from '@/components/Primitives/Switch';
-import { SwitchSizeType } from '../types/PrimitiveTypes';
+import Switch from '@/components/Primitives/Inputs/Switches/Switch/Switch';
+import { SwitchSizeType } from '../../../../../stories/types/PrimitiveTypes';
 
 const SIZE_OPTIONS: SwitchSizeType[] = ['xs', 'sm', 'md'];
 
 export default {
-  title: 'Primitives/Switch',
+  title: 'Primitives/Inputs/Switch',
   component: Switch,
   parameters: {
     controls: {
@@ -21,7 +21,7 @@ export default {
         A control that allows the user to toggle between checked and not checked.
 
         **File Path:**
-        \`@/components/Primitives/Switch.tsx\`
+        \`@/components/Primitives/Inputs/Switches/Switch/Switch.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Switch.tsx b/frontend/src/components/Primitives/Inputs/Switches/Switch/Switch.tsx
similarity index 96%
rename from frontend/src/components/Primitives/Switch.tsx
rename to frontend/src/components/Primitives/Inputs/Switches/Switch/Switch.tsx
index 177ea9d3f..6ef9b505c 100644
--- a/frontend/src/components/Primitives/Switch.tsx
+++ b/frontend/src/components/Primitives/Inputs/Switches/Switch/Switch.tsx
@@ -2,8 +2,8 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Flex from './Flex';
-import Icon from './Icon';
+import Flex from '../../../Layout/Flex';
+import Icon from '../../../Icons/Icon/Icon';
 
 const StyledThumb = styled(SwitchPrimitive.Thumb, Flex, {
   justifyContent: 'center',
diff --git a/frontend/src/stories/Primitives/TextArea.stories.tsx b/frontend/src/components/Primitives/Inputs/TextArea/TextArea.stories.tsx
similarity index 90%
rename from frontend/src/stories/Primitives/TextArea.stories.tsx
rename to frontend/src/components/Primitives/Inputs/TextArea/TextArea.stories.tsx
index 7ef6e6f3d..f9336f379 100644
--- a/frontend/src/stories/Primitives/TextArea.stories.tsx
+++ b/frontend/src/components/Primitives/Inputs/TextArea/TextArea.stories.tsx
@@ -4,10 +4,10 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 import dedent from 'ts-dedent';
 
-import TextArea from '@/components/Primitives/TextArea';
+import TextArea from '@/components/Primitives/Inputs/TextArea/TextArea';
 
 export default {
-  title: 'Primitives/TextArea',
+  title: 'Primitives/Inputs/TextArea',
   component: TextArea,
   parameters: {
     docs: {
@@ -18,7 +18,7 @@ export default {
         The border color of the TextArea component is controlled by the react hook form validator that is used.
 
         **File Path:**
-        \`@/components/Primitives/TextArea.tsx\`
+        \`@/components/Primitives/Inputs/TextArea/TextArea.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/TextArea.tsx b/frontend/src/components/Primitives/Inputs/TextArea/TextArea.tsx
similarity index 100%
rename from frontend/src/components/Primitives/TextArea.tsx
rename to frontend/src/components/Primitives/Inputs/TextArea/TextArea.tsx
diff --git a/frontend/src/stories/Primitives/Box.stories.tsx b/frontend/src/components/Primitives/Layout/Box.stories.tsx
similarity index 86%
rename from frontend/src/stories/Primitives/Box.stories.tsx
rename to frontend/src/components/Primitives/Layout/Box.stories.tsx
index 5dc49e226..f590c1479 100644
--- a/frontend/src/stories/Primitives/Box.stories.tsx
+++ b/frontend/src/components/Primitives/Layout/Box.stories.tsx
@@ -3,11 +3,11 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import { ElevationType, BoxVariantType } from '../types/PrimitiveTypes';
-import { capitalize } from '../utils';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import { ElevationType, BoxVariantType } from '@/stories/types/PrimitiveTypes';
+import { capitalize } from '@/stories/utils';
 
 const ELEVATION_OPTIONS: ElevationType[] = [0, 1, 2, 3, 4];
 const VARIANT_OPTIONS: BoxVariantType[] = ['bordered', 'dropdown'];
@@ -22,14 +22,14 @@ const DISABLE_ARG_TYPES = {
 };
 
 export default {
-  title: 'Primitives/Box',
+  title: 'Primitives/Layout/Box',
   component: Box,
   parameters: {
     docs: {
       description: {
         component: dedent`
         **File Path:**
-        \`@/components/Primitives/Box.tsx\`
+        \`@/components/Primitives/Layout/Box.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Box.tsx b/frontend/src/components/Primitives/Layout/Box.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Box.tsx
rename to frontend/src/components/Primitives/Layout/Box.tsx
diff --git a/frontend/src/stories/Primitives/Flex.stories.tsx b/frontend/src/components/Primitives/Layout/Flex.stories.tsx
similarity index 89%
rename from frontend/src/stories/Primitives/Flex.stories.tsx
rename to frontend/src/components/Primitives/Layout/Flex.stories.tsx
index fd8689cd9..00a23a762 100644
--- a/frontend/src/stories/Primitives/Flex.stories.tsx
+++ b/frontend/src/components/Primitives/Layout/Flex.stories.tsx
@@ -1,10 +1,16 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
 
-import Flex from '@/components/Primitives/Flex';
-import Button from '@/components/Primitives/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 import dedent from 'ts-dedent';
-import { DirectionType, AlignType, JustifyType, WrapType, GapType } from '../types/PrimitiveTypes';
+import {
+  DirectionType,
+  AlignType,
+  JustifyType,
+  WrapType,
+  GapType,
+} from '../../../stories/types/PrimitiveTypes';
 
 const DIRECTION_OPTIONS: DirectionType[] = ['row', 'column', 'rowReverse', 'columnReverse'];
 
@@ -17,7 +23,7 @@ const WRAP_OPTIONS: WrapType[] = ['noWrap', 'wrap', 'wrapReverse'];
 const GAP_OPTIONS: GapType[] = [2, 4, 6, 8, 10, 12, 16, 20, 22, 24, 26, 32, 36, 40];
 
 export default {
-  title: 'Primitives/Flex',
+  title: 'Primitives/Layout/Flex',
   component: Flex,
   parameters: {
     docs: {
@@ -26,7 +32,7 @@ export default {
         Flex element, allows you to control how the elements are displayed in the page.
 
         **File Path:**
-        \`@/components/Primitives/Flex.tsx\`
+        \`@/components/Primitives/Layout/Flex.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Flex.tsx b/frontend/src/components/Primitives/Layout/Flex.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Flex.tsx
rename to frontend/src/components/Primitives/Layout/Flex.tsx
diff --git a/frontend/src/stories/Primitives/Loading/Dots.stories.tsx b/frontend/src/components/Primitives/Loading/Dots/Dots.stories.tsx
similarity index 82%
rename from frontend/src/stories/Primitives/Loading/Dots.stories.tsx
rename to frontend/src/components/Primitives/Loading/Dots/Dots.stories.tsx
index 5b0639897..09ad14a2b 100644
--- a/frontend/src/stories/Primitives/Loading/Dots.stories.tsx
+++ b/frontend/src/components/Primitives/Loading/Dots/Dots.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
 
-import Dots from '@/components/Primitives/Loading/Dots';
+import Dots from '@/components/Primitives/Loading/Dots/Dots';
 import dedent from 'ts-dedent';
-import { DotsColorType, DotsSizeType } from '../../types/PrimitiveTypes';
+import { DotsColorType, DotsSizeType } from '../../../../stories/types/PrimitiveTypes';
 
 const COLOR_OPTIONS: DotsColorType[] = ['primary800', 'primary200', 'white'];
 const SIZE_OPTIONS: DotsSizeType[] = [8, 4, 10, 15, 50, 80, 100];
@@ -18,7 +18,7 @@ export default {
         Dots element, it's used for Loading.
 
         **File Path:**
-        \`@/components/Primitives/Loading/Dots/index.tsx\` and \`@/components/Primitives/Loading/Dots/styles.tsx\`
+        \`@/components/Primitives/Loading/Dots/Dots.tsx\` and \`@/components/Primitives/Loading/Dots/styles.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Loading/Dots/index.tsx b/frontend/src/components/Primitives/Loading/Dots/Dots.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Loading/Dots/index.tsx
rename to frontend/src/components/Primitives/Loading/Dots/Dots.tsx
diff --git a/frontend/src/stories/Primitives/Loading/Page.stories.tsx b/frontend/src/components/Primitives/Loading/Page/Page.stories.tsx
similarity index 81%
rename from frontend/src/stories/Primitives/Loading/Page.stories.tsx
rename to frontend/src/components/Primitives/Loading/Page/Page.stories.tsx
index dc5086cb0..e7e2bcfda 100644
--- a/frontend/src/stories/Primitives/Loading/Page.stories.tsx
+++ b/frontend/src/components/Primitives/Loading/Page/Page.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
 
-import LoadingPage from '@/components/Primitives/Loading/Page';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
 import dedent from 'ts-dedent';
-import { SpinnerSizeType } from '../../types/PrimitiveTypes';
+import { SpinnerSizeType } from '../../../../stories/types/PrimitiveTypes';
 
 const SIZE_OPTIONS: SpinnerSizeType[] = [50, 80, 100, 150, 200];
 
@@ -17,7 +17,7 @@ export default {
         Loading Page, used when a page is loading.
 
         **File Path:**
-        \`@/components/Primitives/Loading/Page.tsx\`
+        \`@/components/Primitives/Loading/Page/Page.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Loading/Page.tsx b/frontend/src/components/Primitives/Loading/Page/Page.tsx
similarity index 82%
rename from frontend/src/components/Primitives/Loading/Page.tsx
rename to frontend/src/components/Primitives/Loading/Page/Page.tsx
index d0cd7614a..fbead1973 100644
--- a/frontend/src/components/Primitives/Loading/Page.tsx
+++ b/frontend/src/components/Primitives/Loading/Page/Page.tsx
@@ -1,7 +1,7 @@
 import { styled, CSSProps } from '@/styles/stitches/stitches.config';
 
-import Flex from '@/components/Primitives/Flex';
-import Spinner from '@/components/Primitives/Loading/Spinner';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Spinner from '@/components/Primitives/Loading/Spinner/Spinner';
 
 const Overlay = styled('div', Flex, {
   position: 'absolute',
diff --git a/frontend/src/stories/Primitives/Loading/Spinner.stories.tsx b/frontend/src/components/Primitives/Loading/Spinner/Spinner.stories.tsx
similarity index 84%
rename from frontend/src/stories/Primitives/Loading/Spinner.stories.tsx
rename to frontend/src/components/Primitives/Loading/Spinner/Spinner.stories.tsx
index 8397af4c2..3ae0d1b23 100644
--- a/frontend/src/stories/Primitives/Loading/Spinner.stories.tsx
+++ b/frontend/src/components/Primitives/Loading/Spinner/Spinner.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
 
-import Spinner from '@/components/Primitives/Loading/Spinner';
+import Spinner from '@/components/Primitives/Loading/Spinner/Spinner';
 import dedent from 'ts-dedent';
-import { SpinnerColorType, SpinnerSizeType } from '../../types/PrimitiveTypes';
+import { SpinnerColorType, SpinnerSizeType } from '../../../../stories/types/PrimitiveTypes';
 
 const COLOR_OPTIONS: SpinnerColorType[] = ['light', 'dark'];
 const SIZE_OPTIONS: SpinnerSizeType[] = [50, 80, 100, 150, 200];
@@ -18,7 +18,7 @@ export default {
         Spinner element, it spins forever.
 
         **File Path:**
-        \`@/components/Primitives/Loading/Spinner.tsx\`
+        \`@/components/Primitives/Loading/Spinner/Spinner.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Loading/Spinner.tsx b/frontend/src/components/Primitives/Loading/Spinner/Spinner.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Loading/Spinner.tsx
rename to frontend/src/components/Primitives/Loading/Spinner/Spinner.tsx
diff --git a/frontend/src/stories/Primitives/Popover.stories.tsx b/frontend/src/components/Primitives/Popovers/Popover/Popover.stories.tsx
similarity index 89%
rename from frontend/src/stories/Primitives/Popover.stories.tsx
rename to frontend/src/components/Primitives/Popovers/Popover/Popover.stories.tsx
index cc485e40e..5e43107ad 100644
--- a/frontend/src/stories/Primitives/Popover.stories.tsx
+++ b/frontend/src/components/Primitives/Popovers/Popover/Popover.stories.tsx
@@ -9,17 +9,17 @@ import {
   PopoverTrigger,
   PopoverItem,
   PopoverClose,
-} from '@/components/Primitives/Popover';
-import Icon from '@/components/Primitives/Icon';
-import Text from '@/components/Primitives/Text';
-import { PopoverVariantType, PopoverSizeType } from '../types/PrimitiveTypes';
+} from '@/components/Primitives/Popovers/Popover/Popover';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Text from '@/components/Primitives/Text/Text';
+import { PopoverVariantType, PopoverSizeType } from '../../../../stories/types/PrimitiveTypes';
 
 const VARIANT_OPTIONS: PopoverVariantType[] = ['dark', 'light'];
 
 const SIZE_OPTIONS: PopoverSizeType[] = ['sm', 'md'];
 
 export default {
-  title: 'Primitives/Popover',
+  title: 'Primitives/Popovers/Popover',
   component: Popover,
   parameters: {
     docs: {
@@ -28,7 +28,7 @@ export default {
         Displays rich content in a portal, triggered by a button.
 
         **File Path:**
-        \`@/components/Primitives/Popover.tsx\`
+        \`@/components/Primitives/Popovers/Popover/Popover.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Popover.tsx b/frontend/src/components/Primitives/Popovers/Popover/Popover.tsx
similarity index 98%
rename from frontend/src/components/Primitives/Popover.tsx
rename to frontend/src/components/Primitives/Popovers/Popover/Popover.tsx
index 30e9cf19d..2bcfc2ea5 100644
--- a/frontend/src/components/Primitives/Popover.tsx
+++ b/frontend/src/components/Primitives/Popovers/Popover/Popover.tsx
@@ -8,7 +8,7 @@ import {
   slideRightAndFade,
   slideUpAndFade,
 } from '@/animations/Slide';
-import Flex from './Flex';
+import Flex from '../../Layout/Flex';
 
 const StyledContent = styled(PopoverPrimitive.Content, {
   mt: '5px',
diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/partials/PopoverRoleSettings.spec.tsx b/frontend/src/components/Primitives/Popovers/TeamRolePopover/TeamRolePopover.spec.tsx
similarity index 63%
rename from frontend/src/components/Teams/Team/TeamMemberItem/partials/PopoverRoleSettings.spec.tsx
rename to frontend/src/components/Primitives/Popovers/TeamRolePopover/TeamRolePopover.spec.tsx
index 2799b15f7..95f30dbe1 100644
--- a/frontend/src/components/Teams/Team/TeamMemberItem/partials/PopoverRoleSettings.spec.tsx
+++ b/frontend/src/components/Primitives/Popovers/TeamRolePopover/TeamRolePopover.spec.tsx
@@ -3,26 +3,26 @@ import { libraryMocks } from '@/utils/testing/mocks';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { TeamFactory } from '@/utils/factories/team';
 import { renderWithProviders } from '@/utils/testing/renderWithProviders';
-import PopoverRoleSettings, { PopoverRoleSettingsProps } from './PopoverRoleSettings';
+import TeamRolePopover, { TeamRolePopoverProps } from './TeamRolePopover';
 
 const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' });
 
-const render = (props: PopoverRoleSettingsProps) =>
-  renderWithProviders(<PopoverRoleSettings {...props} />, { routerOptions: mockRouter });
+const render = (props: TeamRolePopoverProps) =>
+  renderWithProviders(<TeamRolePopover {...props} />, { routerOptions: mockRouter });
 
-describe('Components/Teams/Team/TeamMemberItem/PopoverRoleSettings', () => {
+describe('Components/Primitives/Popovers/TeamRolePopover', () => {
   it('should render correctly', async () => {
     // Arrange
     const team = TeamFactory.create();
-    const popoverRoleSettingsProps = {
+    const teamRolePopoverProps = {
       userId: team.users[0]._id,
       teamId: team.id,
       isTeamPage: true,
     };
 
     // Act
-    const { getByTestId, getByText } = render(popoverRoleSettingsProps);
-    const trigger = getByTestId('popoverRoleSettingsTrigger');
+    const { getByTestId, getByText } = render(teamRolePopoverProps);
+    const trigger = getByTestId('teamRolePopoverTrigger');
     if (trigger) fireEvent.click(trigger);
 
     // Assert
diff --git a/frontend/src/components/Primitives/Popovers/TeamRolePopover/TeamRolePopover.tsx b/frontend/src/components/Primitives/Popovers/TeamRolePopover/TeamRolePopover.tsx
new file mode 100644
index 000000000..6cc3bc648
--- /dev/null
+++ b/frontend/src/components/Primitives/Popovers/TeamRolePopover/TeamRolePopover.tsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverItem,
+  PopoverClose,
+} from '@/components/Primitives/Popovers/Popover/Popover';
+import Text from '@/components/Primitives/Text/Text';
+
+import { membersListState, userTeamsListState } from '@/store/team/atom/team.atom';
+import { TeamUser, TeamUserUpdate } from '@/types/team/team.user';
+import { TeamUserRoles } from '@/utils/enums/team.user.roles';
+
+import useTeam from '@/hooks/useTeam';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import { useRouter } from 'next/router';
+
+export type TeamRolePopoverProps = {
+  userId: string | undefined;
+  teamId?: string | undefined;
+  isTeamPage?: boolean;
+};
+
+const TeamRolePopover = React.memo(({ userId, teamId, isTeamPage }: TeamRolePopoverProps) => {
+  const membersList = useRecoilValue(membersListState);
+  const setMembersList = useSetRecoilState(membersListState);
+  const userTeamsList = useRecoilValue(userTeamsListState);
+
+  const router = useRouter();
+
+  const {
+    updateTeamUser: { mutate },
+  } = useTeam();
+
+  const selectRole = (value: TeamUserRoles) => {
+    const members = membersList.map((member) =>
+      member.user._id === userId ? { ...member, role: value } : member,
+    );
+
+    setMembersList(members);
+  };
+
+  const updateUser = (value: TeamUserRoles, teamUser?: TeamUser) => {
+    if (teamUser && teamUser.team) {
+      const updateTeamUserRole: TeamUserUpdate = {
+        team: teamUser.team,
+        user: userId,
+        role: value,
+        isNewJoiner: teamUser.isNewJoiner,
+      };
+
+      mutate(updateTeamUserRole);
+    }
+  };
+
+  const updateUserRole = (value: TeamUserRoles) => {
+    let userFound: TeamUser | undefined;
+
+    if (router.pathname.includes('users')) {
+      const teamUsers = userTeamsList.flatMap((team) => team.users);
+      userFound = teamUsers.find((teamUser) => teamUser.team === teamId);
+    } else {
+      userFound = membersList.find((member) => member.user._id === userId);
+    }
+
+    updateUser(value, userFound);
+  };
+
+  const handleSelectFunction = (role: TeamUserRoles) =>
+    isTeamPage ? updateUserRole(role) : selectRole(role);
+
+  return (
+    <Popover>
+      <PopoverTrigger variant="dark" size="sm" data-testid="teamRolePopoverTrigger">
+        <Icon name="arrow-down" />
+      </PopoverTrigger>
+      <PopoverContent
+        css={{ width: '$360', height: '$316' }}
+        collisionPadding={32}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <PopoverClose>
+          <PopoverItem
+            align="end"
+            direction="column"
+            css={{ pr: '$16', height: '$100' }}
+            onClick={() => {
+              handleSelectFunction(TeamUserRoles.MEMBER);
+            }}
+          >
+            <Text css={{ textAlign: 'end' }} size="sm" fontWeight="medium">
+              Team Member
+            </Text>
+
+            <Text css={{ textAlign: 'end' }} size="sm">
+              The team member can create boards and can create teams.
+            </Text>
+          </PopoverItem>
+        </PopoverClose>
+        <PopoverClose>
+          <PopoverItem
+            align="end"
+            direction="column"
+            css={{ pr: '$16', height: '$100' }}
+            onClick={() => {
+              handleSelectFunction(TeamUserRoles.ADMIN);
+            }}
+          >
+            <Text css={{ textAlign: 'end' }} size="sm" fontWeight="medium">
+              Team Admin
+            </Text>
+            <Text css={{ textAlign: 'end' }} size="sm">
+              The team admin can nominate team admins / stakeholder and can create/delete/edit team
+              boards.
+            </Text>
+          </PopoverItem>
+        </PopoverClose>
+        <PopoverClose>
+          <PopoverItem
+            align="end"
+            direction="column"
+            css={{ pr: '$16', height: '$100' }}
+            onClick={() => {
+              handleSelectFunction(TeamUserRoles.STAKEHOLDER);
+            }}
+          >
+            <Text css={{ textAlign: 'end' }} size="sm" fontWeight="medium">
+              Stakeholder
+            </Text>
+            <Text css={{ textAlign: 'end' }} size="sm">
+              Stakeholders will not be included in sub-team SPLIT retrospectives.
+            </Text>
+          </PopoverItem>
+        </PopoverClose>
+      </PopoverContent>
+    </Popover>
+  );
+});
+
+export default TeamRolePopover;
diff --git a/frontend/src/stories/Primitives/Separator.stories.tsx b/frontend/src/components/Primitives/Separator/Separator.stories.tsx
similarity index 86%
rename from frontend/src/stories/Primitives/Separator.stories.tsx
rename to frontend/src/components/Primitives/Separator/Separator.stories.tsx
index 9762d3c0b..cb1a853fb 100644
--- a/frontend/src/stories/Primitives/Separator.stories.tsx
+++ b/frontend/src/components/Primitives/Separator/Separator.stories.tsx
@@ -3,9 +3,9 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import Separator from '@/components/Primitives/Separator';
-import Flex from '@/components/Primitives/Flex';
-import { SeparatorOrientationType, SeparatorSizeType } from '../types/PrimitiveTypes';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Flex from '@/components/Primitives/Layout/Flex';
+import { SeparatorOrientationType, SeparatorSizeType } from '../../../stories/types/PrimitiveTypes';
 
 const ORIENTATION_OPTIONS: SeparatorOrientationType[] = ['horizontal', 'vertical'];
 
@@ -21,7 +21,7 @@ export default {
         Visually or semantically separates content.
 
         **File Path:**
-        \`@/components/Primitives/Separator.tsx\`
+        \`@/components/Primitives/Separator/Separator.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Separator.tsx b/frontend/src/components/Primitives/Separator/Separator.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Separator.tsx
rename to frontend/src/components/Primitives/Separator/Separator.tsx
diff --git a/frontend/src/components/Primitives/Tab.spec.tsx b/frontend/src/components/Primitives/Tab/Tab.spec.tsx
similarity index 91%
rename from frontend/src/components/Primitives/Tab.spec.tsx
rename to frontend/src/components/Primitives/Tab/Tab.spec.tsx
index 107870cbd..8062dabdc 100644
--- a/frontend/src/components/Primitives/Tab.spec.tsx
+++ b/frontend/src/components/Primitives/Tab/Tab.spec.tsx
@@ -1,12 +1,12 @@
 // TODO: Test Tab Change
 
 import { renderWithProviders } from '@/utils/testing/renderWithProviders';
-import Flex from './Flex';
+import Flex from '../Layout/Flex';
 import Tab, { TabProps } from './Tab';
 
 const render = (props: TabProps) => renderWithProviders(<Tab {...props} />);
 
-describe('Components/Primitives/Switch', () => {
+describe('Components/Primitives/Tab', () => {
   it('should render correctly', () => {
     // Arrange
     const tabProps: TabProps = {
diff --git a/frontend/src/stories/Primitives/Tab.stories.tsx b/frontend/src/components/Primitives/Tab/Tab.stories.tsx
similarity index 90%
rename from frontend/src/stories/Primitives/Tab.stories.tsx
rename to frontend/src/components/Primitives/Tab/Tab.stories.tsx
index 975f6247f..a501d053f 100644
--- a/frontend/src/stories/Primitives/Tab.stories.tsx
+++ b/frontend/src/components/Primitives/Tab/Tab.stories.tsx
@@ -3,8 +3,8 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import Tab from '@/components/Primitives/Tab';
-import Flex from '@/components/Primitives/Flex';
+import Tab from '@/components/Primitives/Tab/Tab';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 export default {
   title: 'Primitives/Tab',
@@ -16,7 +16,7 @@ export default {
         A set of layered sections of content, also known as tab panels, that are displayed one at a time.
 
         **File Path:**
-        \`@/components/Primitives/Tab.tsx\`
+        \`@/components/Primitives/Tab/Tab.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Tab.tsx b/frontend/src/components/Primitives/Tab/Tab.tsx
similarity index 96%
rename from frontend/src/components/Primitives/Tab.tsx
rename to frontend/src/components/Primitives/Tab/Tab.tsx
index 6b0b8f999..c70987952 100644
--- a/frontend/src/components/Primitives/Tab.tsx
+++ b/frontend/src/components/Primitives/Tab/Tab.tsx
@@ -3,8 +3,8 @@ import * as Tabs from '@radix-ui/react-tabs';
 import { styled } from '@/styles/stitches/stitches.config';
 
 import { ReactNode } from 'react';
-import Flex from './Flex';
-import Text from './Text';
+import Flex from '../Layout/Flex';
+import Text from '../Text/Text';
 
 const StyledTabsRoot = styled(Tabs.Root, Flex, {});
 
diff --git a/frontend/src/stories/Primitives/Text.stories.tsx b/frontend/src/components/Primitives/Text/Text.stories.tsx
similarity index 96%
rename from frontend/src/stories/Primitives/Text.stories.tsx
rename to frontend/src/components/Primitives/Text/Text.stories.tsx
index a764480e0..e39f6b7ab 100644
--- a/frontend/src/stories/Primitives/Text.stories.tsx
+++ b/frontend/src/components/Primitives/Text/Text.stories.tsx
@@ -3,8 +3,8 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 
-import Text from '@/components/Primitives/Text';
-import Flex from '@/components/Primitives/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
 import {
   ColorType,
   DisplayType,
@@ -12,7 +12,7 @@ import {
   HeadingType,
   Overline,
   TextSizeType,
-} from '../types/PrimitiveTypes';
+} from '../../../stories/types/PrimitiveTypes';
 
 const FONT_WEIGHT_OPTIONS: FontWeightType[] = ['regular', 'medium', 'bold'];
 
@@ -70,7 +70,7 @@ export default {
       description: {
         component: dedent`
         **File Path:**
-        \`@/components/Primitives/Text.tsx\`
+        \`@/components/Primitives/Text/Text.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Text.tsx b/frontend/src/components/Primitives/Text/Text.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Text.tsx
rename to frontend/src/components/Primitives/Text/Text.tsx
diff --git a/frontend/src/stories/Primitives/Toast.stories.tsx b/frontend/src/components/Primitives/Toast/Toast.stories.tsx
similarity index 93%
rename from frontend/src/stories/Primitives/Toast.stories.tsx
rename to frontend/src/components/Primitives/Toast/Toast.stories.tsx
index ef971173e..7dae10a42 100644
--- a/frontend/src/stories/Primitives/Toast.stories.tsx
+++ b/frontend/src/components/Primitives/Toast/Toast.stories.tsx
@@ -3,8 +3,8 @@ import { ComponentStory } from '@storybook/react';
 import { useSetRecoilState } from 'recoil';
 import dedent from 'ts-dedent';
 
-import Toast, { ToastProvider, ToastViewport } from '@/components/Primitives/Toast';
-import Button from '@/components/Primitives/Button';
+import Toast, { ToastProvider, ToastViewport } from '@/components/Primitives/Toast/Toast';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 import { toastState } from '@/store/toast/atom/toast.atom';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 
@@ -28,7 +28,7 @@ export default {
         A succinct message that is displayed temporarily.
 
         **File Path:**
-        \`@/components/Primitives/Toast.tsx\`
+        \`@/components/Primitives/Toast/Toast.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Toast.tsx b/frontend/src/components/Primitives/Toast/Toast.tsx
similarity index 96%
rename from frontend/src/components/Primitives/Toast.tsx
rename to frontend/src/components/Primitives/Toast/Toast.tsx
index 62f92a9f8..030e5ab48 100644
--- a/frontend/src/components/Primitives/Toast.tsx
+++ b/frontend/src/components/Primitives/Toast/Toast.tsx
@@ -3,13 +3,13 @@ import { useRouter } from 'next/router';
 import { useRecoilState } from 'recoil';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import { keyframes, styled } from '@/styles/stitches/stitches.config';
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import { toastState } from '@/store/toast/atom/toast.atom';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { ROUTES } from '@/utils/routes';
 import { useEffect } from 'react';
-import Text from './Text';
-import Button from './Button';
+import Text from '../Text/Text';
+import Button from '../Inputs/Button/Button';
 
 const hide = keyframes({
   '0%': { opacity: 1 },
diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/partials/NewJoinerTooltip.tsx b/frontend/src/components/Primitives/Tooltips/NewJoinerTooltip/NewJoinerTooltip.tsx
similarity index 57%
rename from frontend/src/components/Teams/Team/TeamMemberItem/partials/NewJoinerTooltip.tsx
rename to frontend/src/components/Primitives/Tooltips/NewJoinerTooltip/NewJoinerTooltip.tsx
index d10b89bbb..bd2cae0a2 100644
--- a/frontend/src/components/Teams/Team/TeamMemberItem/partials/NewJoinerTooltip.tsx
+++ b/frontend/src/components/Primitives/Tooltips/NewJoinerTooltip/NewJoinerTooltip.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import Text from '@/components/Primitives/Text';
-import Tooltip from '@/components/Primitives/Tooltip';
-import Button from '@/components/Primitives/Button';
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const NewJoinerTooltip = () => (
   <Flex align="center" gap={8} data-testid="newJoinerTooltip">
diff --git a/frontend/src/stories/Primitives/Tooltip.stories.tsx b/frontend/src/components/Primitives/Tooltips/Tooltip/Tooltip.stories.tsx
similarity index 77%
rename from frontend/src/stories/Primitives/Tooltip.stories.tsx
rename to frontend/src/components/Primitives/Tooltips/Tooltip/Tooltip.stories.tsx
index 05dfc3f9e..f626fe3e5 100644
--- a/frontend/src/stories/Primitives/Tooltip.stories.tsx
+++ b/frontend/src/components/Primitives/Tooltips/Tooltip/Tooltip.stories.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
 import dedent from 'ts-dedent';
-import Tooltip from '@/components/Primitives/Tooltip';
-import Button from '@/components/Primitives/Button';
-import Icon from '@/components/Primitives/Icon';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 
 export default {
-  title: 'Primitives/Tooltip',
+  title: 'Primitives/Tooltips/Tooltip',
   component: Tooltip,
   parameters: {
     docs: {
@@ -15,7 +15,7 @@ export default {
         A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
 
         **File Path:**
-        \`@/components/Primitives/Tooltip/index.jsx\` and \`@/components/Primitives/Tooltip/styles.jsx\`
+        \`@/components/Primitives/Tooltips/Tooltip/Tooltip.jsx\` and \`@/components/Primitives/Tooltips/Tooltip/styles.jsx\`
         `,
       },
     },
diff --git a/frontend/src/components/Primitives/Tooltip/index.tsx b/frontend/src/components/Primitives/Tooltips/Tooltip/Tooltip.tsx
similarity index 100%
rename from frontend/src/components/Primitives/Tooltip/index.tsx
rename to frontend/src/components/Primitives/Tooltips/Tooltip/Tooltip.tsx
diff --git a/frontend/src/components/Primitives/Tooltip/styles.tsx b/frontend/src/components/Primitives/Tooltips/Tooltip/styles.tsx
similarity index 98%
rename from frontend/src/components/Primitives/Tooltip/styles.tsx
rename to frontend/src/components/Primitives/Tooltips/Tooltip/styles.tsx
index ec1feec07..020ab8c75 100644
--- a/frontend/src/components/Primitives/Tooltip/styles.tsx
+++ b/frontend/src/components/Primitives/Tooltips/Tooltip/styles.tsx
@@ -7,7 +7,7 @@ import {
   slideLeftAndFade,
   slideRightAndFade,
   slideUpAndFade,
-} from '../../../animations/Slide';
+} from '../../../../animations/Slide';
 
 const StyledContent = styled(TooltipPrimitive.Content, {
   p: '$8',
diff --git a/frontend/src/components/RecoilDevTools/RecoilDevTools.tsx b/frontend/src/components/RecoilDevTools/RecoilDevTools.tsx
index fc9c05319..0670325fa 100644
--- a/frontend/src/components/RecoilDevTools/RecoilDevTools.tsx
+++ b/frontend/src/components/RecoilDevTools/RecoilDevTools.tsx
@@ -1,6 +1,6 @@
 import { useRecoilCallback } from 'recoil';
-import Icon from '../Primitives/Icon';
-import Button from '../Primitives/Button';
+import Icon from '../Primitives/Icons/Icon/Icon';
+import Button from '../Primitives/Inputs/Button/Button';
 
 const RecoilDevTools = () => {
   const getAtomValues = async (snapshot: any) => {
diff --git a/frontend/src/components/Sidebar/partials/Banner.tsx b/frontend/src/components/Sidebar/Banner/Banner.tsx
similarity index 100%
rename from frontend/src/components/Sidebar/partials/Banner.tsx
rename to frontend/src/components/Sidebar/Banner/Banner.tsx
diff --git a/frontend/src/components/Sidebar/partials/Content/Content.spec.tsx b/frontend/src/components/Sidebar/Content/Content.spec.tsx
similarity index 100%
rename from frontend/src/components/Sidebar/partials/Content/Content.spec.tsx
rename to frontend/src/components/Sidebar/Content/Content.spec.tsx
diff --git a/frontend/src/components/Sidebar/partials/Content/Content.tsx b/frontend/src/components/Sidebar/Content/Content.tsx
similarity index 94%
rename from frontend/src/components/Sidebar/partials/Content/Content.tsx
rename to frontend/src/components/Sidebar/Content/Content.tsx
index 3de4fcda3..b8d6e386f 100644
--- a/frontend/src/components/Sidebar/partials/Content/Content.tsx
+++ b/frontend/src/components/Sidebar/Content/Content.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { signOut } from 'next-auth/react';
 
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
 import {
   ACCOUNT_ROUTE,
   BOARDS_ROUTE,
diff --git a/frontend/src/components/Sidebar/partials/Header/Header.spec.tsx b/frontend/src/components/Sidebar/Header/Header.spec.tsx
similarity index 100%
rename from frontend/src/components/Sidebar/partials/Header/Header.spec.tsx
rename to frontend/src/components/Sidebar/Header/Header.spec.tsx
diff --git a/frontend/src/components/Sidebar/partials/Header/Header.tsx b/frontend/src/components/Sidebar/Header/Header.tsx
similarity index 88%
rename from frontend/src/components/Sidebar/partials/Header/Header.tsx
rename to frontend/src/components/Sidebar/Header/Header.tsx
index f26ebdc0b..2429a8b62 100644
--- a/frontend/src/components/Sidebar/partials/Header/Header.tsx
+++ b/frontend/src/components/Sidebar/Header/Header.tsx
@@ -1,8 +1,8 @@
-import BannerIcon from '@/components/Sidebar/partials/Banner';
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Separator from '@/components/Primitives/Separator';
+import BannerIcon from '@/components/Sidebar/Banner/Banner';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Separator from '@/components/Primitives/Separator/Separator';
 import Link from 'next/link';
 import { DASHBOARD_ROUTE } from '@/utils/routes';
 
diff --git a/frontend/src/components/Sidebar/partials/Item/Item.spec.tsx b/frontend/src/components/Sidebar/Item/Item.spec.tsx
similarity index 100%
rename from frontend/src/components/Sidebar/partials/Item/Item.spec.tsx
rename to frontend/src/components/Sidebar/Item/Item.spec.tsx
diff --git a/frontend/src/components/Sidebar/partials/Item/Item.tsx b/frontend/src/components/Sidebar/Item/Item.tsx
similarity index 81%
rename from frontend/src/components/Sidebar/partials/Item/Item.tsx
rename to frontend/src/components/Sidebar/Item/Item.tsx
index 4b4c3659c..a0d4658c3 100644
--- a/frontend/src/components/Sidebar/partials/Item/Item.tsx
+++ b/frontend/src/components/Sidebar/Item/Item.tsx
@@ -1,10 +1,10 @@
 import Link from 'next/link';
 
-import Icon from '@/components/Primitives/Icon';
-import Text from '@/components/Primitives/Text';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Text from '@/components/Primitives/Text/Text';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 
-import { StyledMenuItem } from '../../styles';
+import { StyledMenuItem } from '../styles';
 
 export type SidebarItemProps = {
   link?: string;
diff --git a/frontend/src/components/Sidebar/Sidebar.spec.tsx b/frontend/src/components/Sidebar/Sidebar.spec.tsx
index 62ada8f45..08085f0de 100644
--- a/frontend/src/components/Sidebar/Sidebar.spec.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.spec.tsx
@@ -1,6 +1,6 @@
 import { libraryMocks } from '@/utils/testing/mocks';
 import { renderWithProviders } from '@/utils/testing/renderWithProviders';
-import Sidebar, { SidebarProps } from './index';
+import Sidebar, { SidebarProps } from './Sidebar';
 
 const DEFAULT_PROPS = {
   firstName: 'First',
diff --git a/frontend/src/stories/Navigation/Sidebar.stories.tsx b/frontend/src/components/Sidebar/Sidebar.stories.tsx
similarity index 91%
rename from frontend/src/stories/Navigation/Sidebar.stories.tsx
rename to frontend/src/components/Sidebar/Sidebar.stories.tsx
index 599c90d6d..737430ae6 100644
--- a/frontend/src/stories/Navigation/Sidebar.stories.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.stories.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory } from '@storybook/react';
-import Sidebar from '@/components/Sidebar';
-import SidebarHeader from '@/components/Sidebar/partials/Header/Header';
-import SidebarContent from '@/components/Sidebar/partials/Content/Content';
-import Flex from '@/components/Primitives/Flex';
-import SidebarItem from '@/components/Sidebar/partials/Item/Item';
+import Sidebar from '@/components/Sidebar/Sidebar';
+import SidebarHeader from '@/components/Sidebar/Header/Header';
+import SidebarContent from '@/components/Sidebar/Content/Content';
+import Flex from '@/components/Primitives/Layout/Flex';
+import SidebarItem from '@/components/Sidebar/Item/Item';
 import { UserFactory } from '@/utils/factories/user';
 
 const user = UserFactory.create();
diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/Sidebar.tsx
similarity index 80%
rename from frontend/src/components/Sidebar/index.tsx
rename to frontend/src/components/Sidebar/Sidebar.tsx
index 1d65236de..2c56227d0 100644
--- a/frontend/src/components/Sidebar/index.tsx
+++ b/frontend/src/components/Sidebar/Sidebar.tsx
@@ -1,5 +1,5 @@
-import SidebarContent from './partials/Content/Content';
-import Header from './partials/Header/Header';
+import SidebarContent from './Content/Content';
+import Header from './Header/Header';
 import { StyledSidebar } from './styles';
 
 export type SidebarProps = {
diff --git a/frontend/src/components/Sidebar/styles.tsx b/frontend/src/components/Sidebar/styles.tsx
index 4da635dec..0e3580f21 100644
--- a/frontend/src/components/Sidebar/styles.tsx
+++ b/frontend/src/components/Sidebar/styles.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@/styles/stitches/stitches.config';
-import Flex from '../Primitives/Flex';
+import Flex from '../Primitives/Layout/Flex';
 
 const StyledSidebar = styled('aside', {
   width: '256px',
diff --git a/frontend/src/components/Teams/CreateTeam/index.tsx b/frontend/src/components/Teams/CreateTeam/CreateTeam.tsx
similarity index 85%
rename from frontend/src/components/Teams/CreateTeam/index.tsx
rename to frontend/src/components/Teams/CreateTeam/CreateTeam.tsx
index ca8c836fd..ad93cd904 100644
--- a/frontend/src/components/Teams/CreateTeam/index.tsx
+++ b/frontend/src/components/Teams/CreateTeam/CreateTeam.tsx
@@ -7,16 +7,16 @@ import { membersListState, usersListState } from '@/store/team/atom/team.atom';
 import { CreateTeamUser } from '@/types/team/team.user';
 import useTeam from '@/hooks/useTeam';
 import SchemaCreateTeam from '@/schema/schemaCreateTeamForm';
-import Button from '@/components/Primitives/Button';
-import Text from '@/components/Primitives/Text';
-import Icon from '@/components/Primitives/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Text from '@/components/Primitives/Text/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import { StyledForm } from '@/styles/pages/boards/newSplitBoard.styles';
 import { useSession } from 'next-auth/react';
-import TeamMembersList from '@/components/Teams/Team';
-import Flex from '@/components/Primitives/Flex';
+import TeamMembersList from '@/components/Teams/Team/TeamMembersList';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
 import TipBar from './partials/TipBar';
-import TeamName from './partials/TeamName';
-import { ListMembers } from '../Team/ListMembers';
+import ListMembers from '../Team/ListMembers/ListMembers';
 import CreateTeamHeader from './partials/CreateTeamHeader';
 import CreateTeamFooter from './partials/CreateTeamFooter';
 
@@ -101,7 +101,10 @@ const CreateTeam = () => {
             })}
           >
             <FormProvider {...methods}>
-              <TeamName />
+              <Text css={{ mb: '$12' }} heading="3">
+                Team Name
+              </Text>
+              <Input showCount id="text" maxChars="40" placeholder="Team name" type="text" />
               <Flex css={{ my: '$20' }} direction="column">
                 <Flex>
                   <Text css={{ flex: 1 }} heading="3">
diff --git a/frontend/src/components/Teams/CreateTeam/partials/CreateTeamFooter.tsx b/frontend/src/components/Teams/CreateTeam/partials/CreateTeamFooter.tsx
index 9efeecbec..44fb75e8a 100644
--- a/frontend/src/components/Teams/CreateTeam/partials/CreateTeamFooter.tsx
+++ b/frontend/src/components/Teams/CreateTeam/partials/CreateTeamFooter.tsx
@@ -1,7 +1,7 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Flex from '@/components/Primitives/Flex';
-import Button from '@/components/Primitives/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 const Footer = styled(Flex, {
   borderTop: '1px solid $primary200',
diff --git a/frontend/src/components/Teams/CreateTeam/partials/CreateTeamHeader.tsx b/frontend/src/components/Teams/CreateTeam/partials/CreateTeamHeader.tsx
index 270923e4c..290ac1b5b 100644
--- a/frontend/src/components/Teams/CreateTeam/partials/CreateTeamHeader.tsx
+++ b/frontend/src/components/Teams/CreateTeam/partials/CreateTeamHeader.tsx
@@ -1,9 +1,9 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Icon from '@/components/Primitives/Icon';
-import Text from '@/components/Primitives/Text';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Text from '@/components/Primitives/Text/Text';
 
 const Header = styled('header', Flex, {
   borderBottom: '1px solid $primary200',
diff --git a/frontend/src/components/Teams/CreateTeam/partials/TeamName.tsx b/frontend/src/components/Teams/CreateTeam/partials/TeamName.tsx
deleted file mode 100644
index 1053668ab..000000000
--- a/frontend/src/components/Teams/CreateTeam/partials/TeamName.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import Input from '@/components/Primitives/Input';
-import Text from '@/components/Primitives/Text';
-
-const TeamName = () => (
-  <>
-    <Text css={{ mb: '$12' }} heading="3">
-      Team Name
-    </Text>
-
-    <Input showCount id="text" maxChars="40" placeholder="Team name" type="text" />
-  </>
-);
-
-export default TeamName;
diff --git a/frontend/src/components/Teams/CreateTeam/partials/TipBar.tsx b/frontend/src/components/Teams/CreateTeam/partials/TipBar.tsx
index 2bcdd31ab..061cb59f0 100644
--- a/frontend/src/components/Teams/CreateTeam/partials/TipBar.tsx
+++ b/frontend/src/components/Teams/CreateTeam/partials/TipBar.tsx
@@ -1,6 +1,6 @@
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 
 const CreateTeamTipBar = () => (
   <Flex
diff --git a/frontend/src/components/Teams/Team/partials/Header.spec.tsx b/frontend/src/components/Teams/Team/Header/Header.spec.tsx
similarity index 97%
rename from frontend/src/components/Teams/Team/partials/Header.spec.tsx
rename to frontend/src/components/Teams/Team/Header/Header.spec.tsx
index dbaec18ea..9da54bf6d 100644
--- a/frontend/src/components/Teams/Team/partials/Header.spec.tsx
+++ b/frontend/src/components/Teams/Team/Header/Header.spec.tsx
@@ -10,7 +10,7 @@ const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' });
 const render = (props: TeamHeaderProps) =>
   renderWithProviders(<TeamHeader {...props} />, { routerOptions: mockRouter });
 
-describe('Components/Teams/Team/TeamHeader', () => {
+describe('Components/Teams/Team/Header', () => {
   let defaultProps: TeamHeaderProps;
   beforeEach(() => {
     const team = TeamFactory.create();
diff --git a/frontend/src/components/Teams/Team/partials/Header.tsx b/frontend/src/components/Teams/Team/Header/Header.tsx
similarity index 77%
rename from frontend/src/components/Teams/Team/partials/Header.tsx
rename to frontend/src/components/Teams/Team/Header/Header.tsx
index 02e627810..04f06858a 100644
--- a/frontend/src/components/Teams/Team/partials/Header.tsx
+++ b/frontend/src/components/Teams/Team/Header/Header.tsx
@@ -1,12 +1,12 @@
-import Breadcrumb from '@/components/Primitives/Breadcrumb';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Icon from '@/components/Primitives/Icon';
-import Text from '@/components/Primitives/Text';
+import Breadcrumb from '@/components/Primitives/Breadcrumb/Breadcrumb';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Text from '@/components/Primitives/Text/Text';
 import { BreadcrumbType } from '@/types/board/Breadcrumb';
 import { ROUTES } from '@/utils/routes';
 import { useState } from 'react';
-import { ListMembers } from '../ListMembers';
+import ListMembers from '../ListMembers/ListMembers';
 
 export type TeamHeaderProps = {
   title: string;
diff --git a/frontend/src/components/Teams/Team/ListMembers/index.tsx b/frontend/src/components/Teams/Team/ListMembers/ListMembers.tsx
similarity index 94%
rename from frontend/src/components/Teams/Team/ListMembers/index.tsx
rename to frontend/src/components/Teams/Team/ListMembers/ListMembers.tsx
index d19a789f1..3e027d97a 100644
--- a/frontend/src/components/Teams/Team/ListMembers/index.tsx
+++ b/frontend/src/components/Teams/Team/ListMembers/ListMembers.tsx
@@ -10,7 +10,7 @@ import { useRouter } from 'next/router';
 import { verifyIfIsNewJoiner } from '@/utils/verifyIfIsNewJoiner';
 import useTeam from '@/hooks/useTeam';
 import { UserList } from '@/types/team/userList';
-import ListMembersDialog from './ListMembersDialog';
+import UserListDialog from '../../../Primitives/Dialogs/UserListDialog/UserListDialog';
 
 type Props = {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
@@ -108,15 +108,15 @@ const ListMembers = ({ isOpen, setIsOpen, isTeamPage }: Props) => {
   };
 
   return (
-    <ListMembersDialog
+    <UserListDialog
       usersList={usersList}
       isOpen={isOpen}
       setIsOpen={setIsOpen}
-      saveUsers={saveMembers}
+      confirmationHandler={saveMembers}
       title="Team Members"
-      btnTitle="Add/remove members"
+      confirmationLabel="Add/remove members"
     />
   );
 };
 
-export { ListMembers };
+export default ListMembers;
diff --git a/frontend/src/components/Teams/Team/ListMembers/ListMembersDialog/SearchInput.tsx b/frontend/src/components/Teams/Team/ListMembers/ListMembersDialog/SearchInput.tsx
deleted file mode 100644
index 20550380a..000000000
--- a/frontend/src/components/Teams/Team/ListMembers/ListMembersDialog/SearchInput.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from 'react';
-
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import { IconWrapper, PlaceholderText, StyledInput } from './styles';
-
-interface InputProps {
-  id: string;
-  placeholder: string;
-  icon?: 'search';
-  iconPosition?: 'left' | 'right' | 'both';
-  disabled?: boolean;
-  currentValue?: string;
-  handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  handleClear?: () => void;
-}
-
-const SearchInput: React.FC<InputProps> = ({
-  id,
-  placeholder,
-  icon,
-  iconPosition,
-  disabled,
-  currentValue,
-  handleChange,
-  handleClear,
-}) => {
-  SearchInput.defaultProps = {
-    iconPosition: undefined,
-    icon: undefined,
-    disabled: false,
-    currentValue: undefined,
-    handleChange: undefined,
-  };
-
-  return (
-    <Flex
-      css={{ position: 'relative', width: '100%', mb: '$16', height: 'auto' }}
-      direction="column"
-    >
-      {!!icon && (
-        <IconWrapper data-iconposition={iconPosition === 'both' ? 'left' : iconPosition}>
-          {icon === 'search' && (
-            <Icon
-              name="search"
-              css={{
-                width: '$24',
-                height: '$24',
-                color: '$primary300',
-              }}
-            />
-          )}
-        </IconWrapper>
-      )}
-      <Flex>
-        <StyledInput
-          autoComplete="off"
-          data-iconposition={iconPosition}
-          disabled={disabled}
-          id={id}
-          placeholder=" "
-          value={currentValue}
-          variant="default"
-          onChange={handleChange}
-        />
-        <PlaceholderText as="label" data-iconposition={iconPosition} htmlFor={id}>
-          {placeholder}
-        </PlaceholderText>
-      </Flex>
-      <IconWrapper
-        data-iconposition={iconPosition === 'both' ? 'right' : iconPosition}
-        css={{
-          width: '$24',
-          height: '$24',
-          alignItems: 'center',
-          justifyContent: 'center',
-          cursor: 'pointer',
-          borderRadius: '100%',
-        }}
-        onClick={handleClear}
-      >
-        <Icon
-          name="close"
-          size={16}
-          css={{
-            color: '$white',
-            backgroundColor: '$primary100',
-            borderRadius: '100%',
-            padding: '2px',
-          }}
-        />
-      </IconWrapper>
-    </Flex>
-  );
-};
-
-export default SearchInput;
diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/partials/RoleSelector.spec.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.spec.tsx
similarity index 100%
rename from frontend/src/components/Teams/Team/TeamMemberItem/partials/RoleSelector.spec.tsx
rename to frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.spec.tsx
diff --git a/frontend/src/stories/Teams/RoleSelector.stories.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.stories.tsx
similarity index 97%
rename from frontend/src/stories/Teams/RoleSelector.stories.tsx
rename to frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.stories.tsx
index 269289c82..a0ab26802 100644
--- a/frontend/src/stories/Teams/RoleSelector.stories.tsx
+++ b/frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentStory } from '@storybook/react';
 
-import RoleSelector from '@/components/Teams/Team/TeamMemberItem/partials/RoleSelector';
+import RoleSelector from '@/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
 import { UserFactory } from '@/utils/factories/user';
 import { TeamFactory } from '@/utils/factories/team';
diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/partials/RoleSelector.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.tsx
similarity index 67%
rename from frontend/src/components/Teams/Team/TeamMemberItem/partials/RoleSelector.tsx
rename to frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.tsx
index c3c10f586..e9f1910eb 100644
--- a/frontend/src/components/Teams/Team/TeamMemberItem/partials/RoleSelector.tsx
+++ b/frontend/src/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { getFormattedTeamUserRole } from '@/utils/getFormattedTeamUserRole';
-import Separator from '@/components/Primitives/Separator';
-import PopoverRoleSettings from './PopoverRoleSettings';
+import Separator from '@/components/Primitives/Separator/Separator';
+import TeamRolePopover from '@/components/Primitives/Popovers/TeamRolePopover/TeamRolePopover';
 
 export type RoleSelectorProps = {
   role: TeamUserRoles;
@@ -30,9 +30,7 @@ const RoleSelector = ({
     <Text color="primary800" size="sm" fontWeight="medium">
       {getFormattedTeamUserRole(role)}
     </Text>
-    {canChangeRole && (
-      <PopoverRoleSettings userId={userId} isTeamPage={isTeamPage} teamId={teamId} />
-    )}
+    {canChangeRole && <TeamRolePopover userId={userId} isTeamPage={isTeamPage} teamId={teamId} />}
   </Flex>
 );
 
diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.spec.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.spec.tsx
index 66a12638b..2764e41d6 100644
--- a/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.spec.tsx
+++ b/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.spec.tsx
@@ -3,7 +3,7 @@ import { renderWithProviders } from '@/utils/testing/renderWithProviders';
 import { TeamUserFactory } from '@/utils/factories/user';
 import { getFormattedUsername } from '@/utils/getFormattedUsername';
 import { libraryMocks } from '@/utils/testing/mocks';
-import TeamMemberItem, { TeamMemberItemProps } from '.';
+import TeamMemberItem, { TeamMemberItemProps } from './TeamMemberItem';
 
 const DEFAULT_PROPS = {
   member: TeamUserFactory.create(),
diff --git a/frontend/src/stories/Teams/TeamMemberItem.stories.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.stories.tsx
similarity index 98%
rename from frontend/src/stories/Teams/TeamMemberItem.stories.tsx
rename to frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.stories.tsx
index 484f681e0..303318780 100644
--- a/frontend/src/stories/Teams/TeamMemberItem.stories.tsx
+++ b/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentStory } from '@storybook/react';
 
-import TeamMemberItem from '@/components/Teams/Team/TeamMemberItem';
+import TeamMemberItem from '@/components/Teams/Team/TeamMemberItem/TeamMemberItem';
 import { TeamUserFactory } from '@/utils/factories/user';
 
 export default {
diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/index.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.tsx
similarity index 87%
rename from frontend/src/components/Teams/Team/TeamMemberItem/index.tsx
rename to frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.tsx
index faf5312f5..e169b0bdb 100644
--- a/frontend/src/components/Teams/Team/TeamMemberItem/index.tsx
+++ b/frontend/src/components/Teams/Team/TeamMemberItem/TeamMemberItem.tsx
@@ -3,17 +3,17 @@ import React from 'react';
 import { useRecoilState } from 'recoil';
 import { useSession } from 'next-auth/react';
 
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
-import Icon from '@/components/Primitives/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 import { membersListState } from '@/store/team/atom/team.atom';
 
-import ConfigurationSwitch from '@/components/Primitives/ConfigurationSwitch';
+import ConfigurationSwitch from '@/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch';
 
 import useTeam from '@/hooks/useTeam';
-import RoleSelector from '@/components/Teams/Team/TeamMemberItem/partials/RoleSelector';
+import RoleSelector from '@/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector';
 import { InnerContainer } from '../../styles';
-import NewJoinerTooltip from './partials/NewJoinerTooltip';
+import NewJoinerTooltip from '../../../Primitives/Tooltips/NewJoinerTooltip/NewJoinerTooltip';
 
 export type TeamMemberItemProps = {
   member: TeamUser;
diff --git a/frontend/src/components/Teams/Team/TeamMemberItem/partials/PopoverRoleSettings.tsx b/frontend/src/components/Teams/Team/TeamMemberItem/partials/PopoverRoleSettings.tsx
deleted file mode 100644
index 89f12f592..000000000
--- a/frontend/src/components/Teams/Team/TeamMemberItem/partials/PopoverRoleSettings.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  PopoverItem,
-  PopoverClose,
-} from '@/components/Primitives/Popover';
-import Text from '@/components/Primitives/Text';
-
-import { membersListState, userTeamsListState } from '@/store/team/atom/team.atom';
-import { TeamUser, TeamUserUpdate } from '@/types/team/team.user';
-import { TeamUserRoles } from '@/utils/enums/team.user.roles';
-
-import useTeam from '@/hooks/useTeam';
-import Icon from '@/components/Primitives/Icon';
-import { useRouter } from 'next/router';
-
-export type PopoverRoleSettingsProps = {
-  userId: string | undefined;
-  teamId?: string | undefined;
-  isTeamPage?: boolean;
-};
-
-const PopoverRoleSettings: React.FC<PopoverRoleSettingsProps> = React.memo(
-  ({ userId, teamId, isTeamPage }) => {
-    const membersList = useRecoilValue(membersListState);
-    const setMembersList = useSetRecoilState(membersListState);
-    const userTeamsList = useRecoilValue(userTeamsListState);
-
-    const router = useRouter();
-
-    const {
-      updateTeamUser: { mutate },
-    } = useTeam();
-
-    const selectRole = (value: TeamUserRoles) => {
-      const members = membersList.map((member) =>
-        member.user._id === userId ? { ...member, role: value } : member,
-      );
-
-      setMembersList(members);
-    };
-
-    const updateUser = (value: TeamUserRoles, teamUser?: TeamUser) => {
-      if (teamUser && teamUser.team) {
-        const updateTeamUserRole: TeamUserUpdate = {
-          team: teamUser.team,
-          user: userId,
-          role: value,
-          isNewJoiner: teamUser.isNewJoiner,
-        };
-
-        mutate(updateTeamUserRole);
-      }
-    };
-
-    let updateUserRole = (value: TeamUserRoles) => {
-      const userFound = membersList.find((member) => member.user._id === userId);
-      updateUser(value, userFound);
-    };
-
-    if (router.pathname.includes('users')) {
-      updateUserRole = (value: TeamUserRoles) => {
-        const teamUsers = userTeamsList.flatMap((team) => team.users);
-        const teamFound = teamUsers.find((teamUser) => teamUser.team === teamId);
-
-        updateUser(value, teamFound);
-      };
-    }
-
-    const handleSelectFunction = (role: TeamUserRoles) =>
-      isTeamPage ? updateUserRole(role) : selectRole(role);
-
-    return (
-      <Popover>
-        <PopoverTrigger variant="dark" size="sm" data-testid="popoverRoleSettingsTrigger">
-          <Icon name="arrow-down" />
-        </PopoverTrigger>
-        <PopoverContent
-          css={{ width: '$360', height: '$316' }}
-          collisionPadding={32}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-        >
-          <PopoverClose>
-            <PopoverItem
-              align="end"
-              direction="column"
-              css={{ pr: '$16', height: '$100' }}
-              onClick={() => {
-                handleSelectFunction(TeamUserRoles.MEMBER);
-              }}
-            >
-              <Text css={{ textAlign: 'end' }} size="sm" fontWeight="medium">
-                Team Member
-              </Text>
-
-              <Text css={{ textAlign: 'end' }} size="sm">
-                The team member can create boards and can create teams.
-              </Text>
-            </PopoverItem>
-          </PopoverClose>
-          <PopoverClose>
-            <PopoverItem
-              align="end"
-              direction="column"
-              css={{ pr: '$16', height: '$100' }}
-              onClick={() => {
-                handleSelectFunction(TeamUserRoles.ADMIN);
-              }}
-            >
-              <Text css={{ textAlign: 'end' }} size="sm" fontWeight="medium">
-                Team Admin
-              </Text>
-              <Text css={{ textAlign: 'end' }} size="sm">
-                The team admin can nominate team admins / stakeholder and can create/delete/edit
-                team boards.
-              </Text>
-            </PopoverItem>
-          </PopoverClose>
-          <PopoverClose>
-            <PopoverItem
-              align="end"
-              direction="column"
-              css={{ pr: '$16', height: '$100' }}
-              onClick={() => {
-                handleSelectFunction(TeamUserRoles.STAKEHOLDER);
-              }}
-            >
-              <Text css={{ textAlign: 'end' }} size="sm" fontWeight="medium">
-                Stakeholder
-              </Text>
-              <Text css={{ textAlign: 'end' }} size="sm">
-                Stakeholders will not be included in sub-team SPLIT retrospectives.
-              </Text>
-            </PopoverItem>
-          </PopoverClose>
-        </PopoverContent>
-      </Popover>
-    );
-  },
-);
-
-export default PopoverRoleSettings;
diff --git a/frontend/src/components/Teams/Team/TeamMembersList.spec.tsx b/frontend/src/components/Teams/Team/TeamMembersList.spec.tsx
index 850ca9849..38693d52b 100644
--- a/frontend/src/components/Teams/Team/TeamMembersList.spec.tsx
+++ b/frontend/src/components/Teams/Team/TeamMembersList.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { libraryMocks } from '@/utils/testing/mocks';
 import { renderWithProviders } from '@/utils/testing/renderWithProviders';
 import { TeamFactory } from '@/utils/factories/team';
-import TeamMembersList, { TeamMembersListProps } from '.';
+import TeamMembersList, { TeamMembersListProps } from './TeamMembersList';
 
 const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' });
 
diff --git a/frontend/src/components/Teams/Team/index.tsx b/frontend/src/components/Teams/Team/TeamMembersList.tsx
similarity index 89%
rename from frontend/src/components/Teams/Team/index.tsx
rename to frontend/src/components/Teams/Team/TeamMembersList.tsx
index fd5eba2b3..9a2791f00 100644
--- a/frontend/src/components/Teams/Team/index.tsx
+++ b/frontend/src/components/Teams/Team/TeamMembersList.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import { TeamUser } from '@/types/team/team.user';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
-import TeamMemberItem from '@/components/Teams/Team/TeamMemberItem';
+import TeamMemberItem from '@/components/Teams/Team/TeamMemberItem/TeamMemberItem';
 
 export type TeamMembersListProps = {
   teamUsers: TeamUser[];
diff --git a/frontend/src/components/Teams/TeamsList/partials/EmptyTeams.tsx b/frontend/src/components/Teams/TeamsList/EmptyTeams/EmptyTeams.tsx
similarity index 81%
rename from frontend/src/components/Teams/TeamsList/partials/EmptyTeams.tsx
rename to frontend/src/components/Teams/TeamsList/EmptyTeams/EmptyTeams.tsx
index 811fd0eea..0c70b9d43 100644
--- a/frontend/src/components/Teams/TeamsList/partials/EmptyTeams.tsx
+++ b/frontend/src/components/Teams/TeamsList/EmptyTeams/EmptyTeams.tsx
@@ -1,9 +1,9 @@
 import { styled } from '@/styles/stitches/stitches.config';
 import Link from 'next/link';
 
-import Text from '@/components/Primitives/Text';
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
+import Text from '@/components/Primitives/Text/Text';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 import EmptyTeamsImage from '@/components/images/EmptyTeams';
 
diff --git a/frontend/src/components/Teams/TeamsList/TeamItem/partials/TeamBoards.spec.tsx b/frontend/src/components/Teams/TeamsList/TeamItem/TeamBoards/TeamBoards.spec.tsx
similarity index 100%
rename from frontend/src/components/Teams/TeamsList/TeamItem/partials/TeamBoards.spec.tsx
rename to frontend/src/components/Teams/TeamsList/TeamItem/TeamBoards/TeamBoards.spec.tsx
diff --git a/frontend/src/components/Teams/TeamsList/TeamItem/partials/TeamBoards.tsx b/frontend/src/components/Teams/TeamsList/TeamItem/TeamBoards/TeamBoards.tsx
similarity index 89%
rename from frontend/src/components/Teams/TeamsList/TeamItem/partials/TeamBoards.tsx
rename to frontend/src/components/Teams/TeamsList/TeamItem/TeamBoards/TeamBoards.tsx
index 397c2bc92..4663a2dfd 100644
--- a/frontend/src/components/Teams/TeamsList/TeamItem/partials/TeamBoards.tsx
+++ b/frontend/src/components/Teams/TeamsList/TeamItem/TeamBoards/TeamBoards.tsx
@@ -1,6 +1,6 @@
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { Team } from '@/types/team/team';
 import Link from 'next/link';
 
diff --git a/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.spec.tsx b/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.spec.tsx
index b0920d2db..c8cc7737d 100644
--- a/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.spec.tsx
+++ b/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.spec.tsx
@@ -5,7 +5,7 @@ import { TeamFactory } from '@/utils/factories/team';
 import { TeamUserFactory } from '@/utils/factories/user';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
 import { libraryMocks } from '@/utils/testing/mocks';
-import TeamItem, { TeamItemProps } from './index';
+import TeamItem, { TeamItemProps } from './TeamItem';
 
 const DEFAULT_PROPS = {
   team: TeamFactory.create(),
diff --git a/frontend/src/stories/Teams/TeamItem.stories.tsx b/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.stories.tsx
similarity index 88%
rename from frontend/src/stories/Teams/TeamItem.stories.tsx
rename to frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.stories.tsx
index 6559cd88f..562e0c712 100644
--- a/frontend/src/stories/Teams/TeamItem.stories.tsx
+++ b/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.stories.tsx
@@ -1,9 +1,9 @@
 import { ComponentStory } from '@storybook/react';
 
-import TeamItem from '@/components/Teams/TeamsList/TeamItem';
+import TeamItem from '@/components/Teams/TeamsList/TeamItem/TeamItem';
 import { TeamFactory } from '@/utils/factories/team';
 import { useSession } from 'next-auth/react';
-import { createTeamUser } from '../utils/createTeamUser';
+import { createTeamUser } from '../../../../stories/utils/createTeamUser';
 
 export default {
   title: 'Teams/TeamItem',
diff --git a/frontend/src/components/Teams/TeamsList/TeamItem/index.tsx b/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.tsx
similarity index 82%
rename from frontend/src/components/Teams/TeamsList/TeamItem/index.tsx
rename to frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.tsx
index 200df3b88..8794af0cd 100644
--- a/frontend/src/components/Teams/TeamsList/TeamItem/index.tsx
+++ b/frontend/src/components/Teams/TeamsList/TeamItem/TeamItem.tsx
@@ -1,22 +1,22 @@
 import React, { useMemo } from 'react';
 import { useSession } from 'next-auth/react';
 
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import { Team } from '@/types/team/team';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
 import { useRouter } from 'next/router';
-import AvatarGroup from '@/components/Primitives/Avatar/AvatarGroup';
+import AvatarGroup from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
 import { InnerContainer } from '@/components/Teams/styles';
 
-import RoleSelector from '@/components/Teams/Team/TeamMemberItem/partials/RoleSelector';
-import ConfirmationDialog from '@/components/Primitives/ConfirmationDialog';
-import Button from '@/components/Primitives/Button';
+import RoleSelector from '@/components/Teams/Team/TeamMemberItem/RoleSelector/RoleSelector';
+import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 import useTeam from '@/hooks/useTeam';
-import TeamTitle from './partials/TeamTitle';
-import TeamBoards from './partials/TeamBoards';
+import TeamTitle from './TeamTitle/TeamTitle';
+import TeamBoards from './TeamBoards/TeamBoards';
 
 export type TeamItemProps = {
   team: Team;
@@ -81,13 +81,7 @@ const TeamItem = React.memo<TeamItemProps>(({ team, isTeamPage }) => {
               Members
             </Text>
 
-            <AvatarGroup
-              listUsers={users}
-              responsible={false}
-              teamAdmins={false}
-              userId={userId}
-              css={{ minWidth: '$88' }}
-            />
+            <AvatarGroup listUsers={users} userId={userId} css={{ minWidth: '$88' }} />
           </Flex>
 
           <Separator orientation="vertical" size="lg" />
@@ -101,7 +95,6 @@ const TeamItem = React.memo<TeamItemProps>(({ team, isTeamPage }) => {
               stakeholders
               teamAdmins
               listUsers={users}
-              responsible={false}
               userId={userId}
               css={{ minWidth: '$88' }}
             />
diff --git a/frontend/src/components/Teams/TeamsList/TeamItem/partials/TeamTitle.spec.tsx b/frontend/src/components/Teams/TeamsList/TeamItem/TeamTitle/TeamTitle.spec.tsx
similarity index 100%
rename from frontend/src/components/Teams/TeamsList/TeamItem/partials/TeamTitle.spec.tsx
rename to frontend/src/components/Teams/TeamsList/TeamItem/TeamTitle/TeamTitle.spec.tsx
diff --git a/frontend/src/components/Teams/TeamsList/TeamItem/partials/TeamTitle.tsx b/frontend/src/components/Teams/TeamsList/TeamItem/TeamTitle/TeamTitle.tsx
similarity index 91%
rename from frontend/src/components/Teams/TeamsList/TeamItem/partials/TeamTitle.tsx
rename to frontend/src/components/Teams/TeamsList/TeamItem/TeamTitle/TeamTitle.tsx
index 766570e0a..c289049ae 100644
--- a/frontend/src/components/Teams/TeamsList/TeamItem/partials/TeamTitle.tsx
+++ b/frontend/src/components/Teams/TeamsList/TeamItem/TeamTitle/TeamTitle.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 import { ROUTES } from '@/utils/routes';
 
 export type TeamTitleProps = {
diff --git a/frontend/src/components/Teams/TeamsList/index.tsx b/frontend/src/components/Teams/TeamsList/TeamList.tsx
similarity index 73%
rename from frontend/src/components/Teams/TeamsList/index.tsx
rename to frontend/src/components/Teams/TeamsList/TeamList.tsx
index 0cf7c2eef..b40922e73 100644
--- a/frontend/src/components/Teams/TeamsList/index.tsx
+++ b/frontend/src/components/Teams/TeamsList/TeamList.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { Team } from '@/types/team/team';
-import Flex from '@/components/Primitives/Flex';
-import EmptyTeams from './partials/EmptyTeams';
+import Flex from '@/components/Primitives/Layout/Flex';
+import EmptyTeams from './EmptyTeams/EmptyTeams';
 
-import TeamItem from './TeamItem';
+import TeamItem from './TeamItem/TeamItem';
 
 export type TeamsListProps = {
   teams: Team[];
diff --git a/frontend/src/components/Teams/TeamsList/TeamsList.spec.tsx b/frontend/src/components/Teams/TeamsList/TeamsList.spec.tsx
index ddf347c01..290833def 100644
--- a/frontend/src/components/Teams/TeamsList/TeamsList.spec.tsx
+++ b/frontend/src/components/Teams/TeamsList/TeamsList.spec.tsx
@@ -3,7 +3,7 @@ import { renderWithProviders } from '@/utils/testing/renderWithProviders';
 import { TeamFactory } from '@/utils/factories/team';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { ROUTES } from '@/utils/routes';
-import TeamsList, { TeamsListProps } from '.';
+import TeamsList, { TeamsListProps } from './TeamList';
 
 const DEFAULT_PROPS = {
   teams: TeamFactory.createMany(3),
diff --git a/frontend/src/components/Teams/styles.tsx b/frontend/src/components/Teams/styles.tsx
index 213fdda72..d4d7b5fae 100644
--- a/frontend/src/components/Teams/styles.tsx
+++ b/frontend/src/components/Teams/styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
-import Flex from '@/components/Primitives/Flex';
-import Box from '@/components/Primitives/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Box from '@/components/Primitives/Layout/Box';
 
 const InnerContainer = styled(Flex, Box, {
   px: '$32',
diff --git a/frontend/src/components/Users/UserEdit/partials/ListOfCards/index.tsx b/frontend/src/components/Users/UserEdit/partials/ListOfCards/index.tsx
index 57e697873..a50fe9ed6 100644
--- a/frontend/src/components/Users/UserEdit/partials/ListOfCards/index.tsx
+++ b/frontend/src/components/Users/UserEdit/partials/ListOfCards/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 import { ScrollableContent } from '@/components/Boards/MyBoards/styles';
-import TeamItem from '@/components/Teams/TeamsList/TeamItem';
+import TeamItem from '@/components/Teams/TeamsList/TeamItem/TeamItem';
 import { Team } from '@/types/team/team';
-import Dots from '@/components/Primitives/Loading/Dots';
+import Dots from '@/components/Primitives/Loading/Dots/Dots';
 import { useRecoilValue } from 'recoil';
 import { userTeamsListState } from '@/store/team/atom/team.atom';
 
diff --git a/frontend/src/components/Users/UserEdit/partials/TeamsDialog/SearchInput.tsx b/frontend/src/components/Users/UserEdit/partials/TeamsDialog/SearchInput.tsx
deleted file mode 100644
index 2f68abe34..000000000
--- a/frontend/src/components/Users/UserEdit/partials/TeamsDialog/SearchInput.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
-import { IconWrapper, PlaceholderText, StyledInput } from './styles';
-
-interface InputProps {
-  id: string;
-  placeholder: string;
-  icon?: 'search';
-  iconPosition?: 'left' | 'right';
-  disabled?: boolean;
-  currentValue?: string;
-  handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-const SearchInput: React.FC<InputProps> = ({
-  id,
-  placeholder,
-  icon,
-  iconPosition,
-  disabled,
-  currentValue,
-  handleChange,
-}) => {
-  SearchInput.defaultProps = {
-    iconPosition: undefined,
-    icon: undefined,
-    disabled: false,
-    currentValue: undefined,
-    handleChange: undefined,
-  };
-
-  return (
-    <Flex
-      css={{ position: 'relative', width: '100%', mb: '$16', height: 'auto' }}
-      direction="column"
-    >
-      {!!icon && (
-        <IconWrapper data-iconposition={iconPosition}>
-          {icon === 'search' && (
-            <Icon
-              name="search"
-              css={{
-                width: '$24',
-                height: '$24',
-              }}
-            />
-          )}
-        </IconWrapper>
-      )}
-      <Flex>
-        <StyledInput
-          autoComplete="off"
-          data-iconposition={iconPosition}
-          disabled={disabled}
-          id={id}
-          placeholder=" "
-          value={currentValue}
-          variant="default"
-          onChange={handleChange}
-        />
-        <PlaceholderText as="label" data-iconposition={iconPosition} htmlFor={id}>
-          {placeholder}
-        </PlaceholderText>
-      </Flex>
-    </Flex>
-  );
-};
-
-export default SearchInput;
diff --git a/frontend/src/components/Users/UserEdit/partials/TeamsDialog/index.tsx b/frontend/src/components/Users/UserEdit/partials/TeamsDialog/index.tsx
index 48b6bcbab..8c419a29a 100644
--- a/frontend/src/components/Users/UserEdit/partials/TeamsDialog/index.tsx
+++ b/frontend/src/components/Users/UserEdit/partials/TeamsDialog/index.tsx
@@ -1,17 +1,17 @@
 import React, { Dispatch, SetStateAction, useState, useMemo, useEffect } from 'react';
 
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
-import Flex from '@/components/Primitives/Flex';
-import Checkbox from '@/components/Primitives/Checkbox';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Checkbox from '@/components/Primitives/Inputs/Checkboxes/Checkbox/Checkbox';
 import { useRouter } from 'next/router';
 
 import { verifyIfIsNewJoiner } from '@/utils/verifyIfIsNewJoiner';
 import useTeam from '@/hooks/useTeam';
 import { TeamChecked } from '@/types/team/team';
 import isEmpty from '@/utils/isEmpty';
-import Dialog from '@/components/Primitives/Dialog';
-import SearchInput from '@/components/Teams/Team/ListMembers/ListMembersDialog/SearchInput';
+import Dialog from '@/components/Primitives/Dialogs/Dialog/Dialog';
+import SearchInput from '@/components/Primitives/Inputs/SearchInput/SearchInput';
 import { ScrollableContent } from './styles';
 
 type Props = {
@@ -93,9 +93,6 @@ const ListTeams = ({ isOpen, setIsOpen, providerAccountCreatedAt, joinedAt, team
           currentValue={searchTeam}
           handleChange={handleSearchChange}
           handleClear={handleClearSearch}
-          icon="search"
-          iconPosition="both"
-          id="search"
           placeholder="Search team"
         />
       </Flex>
diff --git a/frontend/src/components/Users/UserEdit/partials/TeamsDialog/styles.tsx b/frontend/src/components/Users/UserEdit/partials/TeamsDialog/styles.tsx
index 799fe86bd..e6de73d3e 100644
--- a/frontend/src/components/Users/UserEdit/partials/TeamsDialog/styles.tsx
+++ b/frontend/src/components/Users/UserEdit/partials/TeamsDialog/styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 
 const ScrollableContent = styled(Flex, {
   mt: '$24',
diff --git a/frontend/src/components/Users/UserEdit/partials/UserHeader/index.tsx b/frontend/src/components/Users/UserEdit/partials/UserHeader/index.tsx
index c78e35502..f11a92b75 100644
--- a/frontend/src/components/Users/UserEdit/partials/UserHeader/index.tsx
+++ b/frontend/src/components/Users/UserEdit/partials/UserHeader/index.tsx
@@ -1,10 +1,10 @@
-import Breadcrumb from '@/components/Primitives/Breadcrumb';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Breadcrumb from '@/components/Primitives/Breadcrumb/Breadcrumb';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { BreadcrumbType } from '@/types/board/Breadcrumb';
 import { useState } from 'react';
-import Icon from '@/components/Primitives/Icon';
-import Button from '@/components/Primitives/Button';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 import { TeamChecked } from '@/types/team/team';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
diff --git a/frontend/src/components/Users/UsersList/partials/CardUser/CardBody.tsx b/frontend/src/components/Users/UsersList/partials/CardUser/CardBody.tsx
index a18d4b3e3..649282be6 100644
--- a/frontend/src/components/Users/UsersList/partials/CardUser/CardBody.tsx
+++ b/frontend/src/components/Users/UsersList/partials/CardUser/CardBody.tsx
@@ -3,12 +3,12 @@ import { useSession } from 'next-auth/react';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Icon from '@/components/Primitives/Icon';
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { UserWithTeams } from '@/types/user/user';
-import Tooltip from '@/components/Primitives/Tooltip';
+import Tooltip from '@/components/Primitives/Tooltips/Tooltip/Tooltip';
 import Link from 'next/link';
 import { ROUTES } from '@/utils/routes';
 import SuperAdmin from './SuperAdmin';
diff --git a/frontend/src/components/Users/UsersList/partials/CardUser/CardEnd.tsx b/frontend/src/components/Users/UsersList/partials/CardUser/CardEnd.tsx
index c5df5210f..2c46dd6fa 100644
--- a/frontend/src/components/Users/UsersList/partials/CardUser/CardEnd.tsx
+++ b/frontend/src/components/Users/UsersList/partials/CardUser/CardEnd.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
 import { User } from '@/types/user/user';
-import ConfirmationDialog from '@/components/Primitives/ConfirmationDialog';
-import Button from '@/components/Primitives/Button';
-import Icon from '@/components/Primitives/Icon';
-import Text from '@/components/Primitives/Text';
+import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Text from '@/components/Primitives/Text/Text';
 import { useSession } from 'next-auth/react';
 import useUser from '@/hooks/useUser';
 import EditUser from './EditUser';
diff --git a/frontend/src/components/Users/UsersList/partials/CardUser/CardTitle.tsx b/frontend/src/components/Users/UsersList/partials/CardUser/CardTitle.tsx
index cb60efffc..a1e0a0993 100644
--- a/frontend/src/components/Users/UsersList/partials/CardUser/CardTitle.tsx
+++ b/frontend/src/components/Users/UsersList/partials/CardUser/CardTitle.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 
 type CardTitleProps = {
   firstName: string;
diff --git a/frontend/src/components/Users/UsersList/partials/CardUser/EditUser.tsx b/frontend/src/components/Users/UsersList/partials/CardUser/EditUser.tsx
index b7f0479cb..b3adf585a 100644
--- a/frontend/src/components/Users/UsersList/partials/CardUser/EditUser.tsx
+++ b/frontend/src/components/Users/UsersList/partials/CardUser/EditUser.tsx
@@ -1,5 +1,5 @@
-import Icon from '@/components/Primitives/Icon';
-import Flex from '@/components/Primitives/Flex';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { User } from '@/types/user/user';
 import { ROUTES } from '@/utils/routes';
 import Link from 'next/link';
diff --git a/frontend/src/components/Users/UsersList/partials/CardUser/SuperAdmin.tsx b/frontend/src/components/Users/UsersList/partials/CardUser/SuperAdmin.tsx
index 7f4fc25c9..22bbc4a0c 100644
--- a/frontend/src/components/Users/UsersList/partials/CardUser/SuperAdmin.tsx
+++ b/frontend/src/components/Users/UsersList/partials/CardUser/SuperAdmin.tsx
@@ -1,10 +1,10 @@
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { useState } from 'react';
 
 import useUser from '@/hooks/useUser';
 import { UpdateUserIsAdmin } from '@/types/user/user';
-import ConfigurationSwitch from '@/components/Primitives/ConfigurationSwitch';
+import ConfigurationSwitch from '@/components/Primitives/Inputs/Switches/ConfigurationSwitch/ConfigurationSwitch';
 
 type SuperAdminProps = {
   userSAdmin: boolean;
diff --git a/frontend/src/components/Users/UsersList/partials/ListOfCards/index.tsx b/frontend/src/components/Users/UsersList/partials/ListOfCards/index.tsx
index 461676ef9..7ecb9ef3a 100644
--- a/frontend/src/components/Users/UsersList/partials/ListOfCards/index.tsx
+++ b/frontend/src/components/Users/UsersList/partials/ListOfCards/index.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { UserWithTeams } from '@/types/user/user';
-import Text from '@/components/Primitives/Text';
-import SearchInput from '@/components/Teams/Team/ListMembers/ListMembersDialog/SearchInput';
+import Text from '@/components/Primitives/Text/Text';
+import SearchInput from '@/components/Primitives/Inputs/SearchInput/SearchInput';
 import { useSetRecoilState } from 'recoil';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { getAllUsersWithTeams } from '@/api/userService';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { toastState } from '@/store/toast/atom/toast.atom';
-import LoadingPage from '@/components/Primitives/Loading/Page';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
 import { ScrollableContent } from '../../../../Boards/MyBoards/styles';
 import CardBody from '../CardUser/CardBody';
 
@@ -90,9 +90,6 @@ const ListOfCards = React.memo(() => {
         </Text>
         <Flex css={{ width: '460px' }}>
           <SearchInput
-            icon="search"
-            iconPosition="both"
-            id="search"
             placeholder="Search user"
             currentValue={search}
             handleChange={handleSearchUser}
diff --git a/frontend/src/components/auth/ForgotPassword/EmailSent.tsx b/frontend/src/components/auth/ForgotPassword/EmailSent.tsx
index db9ba5813..05611fecb 100644
--- a/frontend/src/components/auth/ForgotPassword/EmailSent.tsx
+++ b/frontend/src/components/auth/ForgotPassword/EmailSent.tsx
@@ -3,11 +3,11 @@ import { useSetRecoilState } from 'recoil';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Icon from '@/components/Primitives/Icon';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Separator from '@/components/Primitives/Separator';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Separator from '@/components/Primitives/Separator/Separator';
+import Text from '@/components/Primitives/Text/Text';
 import useUser from '@/hooks/useUser';
 import { toastState } from '@/store/toast/atom/toast.atom';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
diff --git a/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx b/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
index f46d519bf..a272dc11d 100644
--- a/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
+++ b/frontend/src/components/auth/ForgotPassword/ResetPassword.tsx
@@ -6,10 +6,10 @@ import { joiResolver } from '@hookform/resolvers/joi';
 import { styled } from '@/styles/stitches/stitches.config';
 
 import LogoIcon from '@/components/icons/Logo';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Input from '@/components/Primitives/Input';
-import Text from '@/components/Primitives/Text';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Text from '@/components/Primitives/Text/Text';
 import useUser from '@/hooks/useUser';
 import SchemaResetPasswordForm from '@/schema/schemaResetPasswordForm';
 import { toastState } from '@/store/toast/atom/toast.atom';
diff --git a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
index 18270e61a..01506b4bd 100644
--- a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
+++ b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
@@ -5,11 +5,11 @@ import { joiResolver } from '@hookform/resolvers/joi';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Icon from '@/components/Primitives/Icon';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Input from '@/components/Primitives/Input';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Text from '@/components/Primitives/Text/Text';
 import useUser from '@/hooks/useUser';
 import SchemaEmail from '@/schema/schemaEmail';
 import { toastState } from '@/store/toast/atom/toast.atom';
diff --git a/frontend/src/components/auth/GuestUserForm/index.tsx b/frontend/src/components/auth/GuestUserForm/index.tsx
index 5655142dd..f64cacb02 100644
--- a/frontend/src/components/auth/GuestUserForm/index.tsx
+++ b/frontend/src/components/auth/GuestUserForm/index.tsx
@@ -1,12 +1,12 @@
 import { FormProvider, useForm } from 'react-hook-form';
 import { useRouter } from 'next/router';
 import { joiResolver } from '@hookform/resolvers/joi';
-import Input from '@/components/Primitives/Input';
-import Text from '@/components/Primitives/Text';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Text from '@/components/Primitives/Text/Text';
 import { LoginGuestUser } from '@/types/user/user';
 import { START_PAGE_ROUTE } from '@/utils/routes';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
 import SchemaLoginGuestForm from '@/schema/schemaLoginGuestForm';
 import useUser from '@/hooks/useUser';
 import { getUsername } from '@/utils/getUsername';
diff --git a/frontend/src/components/auth/LoginForm/LoginSSO.tsx b/frontend/src/components/auth/LoginForm/LoginSSO.tsx
index 5d4b6ca0e..17bcf83c1 100644
--- a/frontend/src/components/auth/LoginForm/LoginSSO.tsx
+++ b/frontend/src/components/auth/LoginForm/LoginSSO.tsx
@@ -1,9 +1,9 @@
-import Button from '@/components/Primitives/Button';
-import Text from '@/components/Primitives/Text';
-import Flex from '@/components/Primitives/Flex';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Text from '@/components/Primitives/Text/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { styled } from '@/styles/stitches/stitches.config';
 import { NEXT_PUBLIC_ENABLE_AZURE } from '@/utils/constants';
-import Icon from '@/components/Primitives/Icon';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 
 const StyledFlex = styled(Flex, { width: '100%' });
 
diff --git a/frontend/src/components/auth/LoginForm/index.tsx b/frontend/src/components/auth/LoginForm/index.tsx
index d3bfefff6..10bbbd638 100644
--- a/frontend/src/components/auth/LoginForm/index.tsx
+++ b/frontend/src/components/auth/LoginForm/index.tsx
@@ -6,11 +6,11 @@ import { signIn } from 'next-auth/react';
 import { useSetRecoilState } from 'recoil';
 import { joiResolver } from '@hookform/resolvers/joi';
 
-import Icon from '@/components/Primitives/Icon';
-import Dots from '@/components/Primitives/Loading/Dots';
-import Flex from '@/components/Primitives/Flex';
-import Input from '@/components/Primitives/Input';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Dots from '@/components/Primitives/Loading/Dots/Dots';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Text from '@/components/Primitives/Text/Text';
 import useUser from '@/hooks/useUser';
 import SchemaLoginForm from '@/schema/schemaLoginForm';
 import { toastState } from '@/store/toast/atom/toast.atom';
@@ -25,7 +25,7 @@ import {
 } from '@/utils/constants';
 import { ToastStateEnum } from '@/utils/enums/toast-types';
 import { DASHBOARD_ROUTE } from '@/utils/routes';
-import Button from '@/components/Primitives/Button';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 import { getCookie, deleteCookie } from 'cookies-next';
 import { OrSeparator, StyledForm, StyledHoverIconFlex } from './styles';
 import LoginSSO from './LoginSSO';
diff --git a/frontend/src/components/auth/LoginForm/styles.tsx b/frontend/src/components/auth/LoginForm/styles.tsx
index 1d6f0472c..66f065077 100644
--- a/frontend/src/components/auth/LoginForm/styles.tsx
+++ b/frontend/src/components/auth/LoginForm/styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const StyledForm = styled('form', Flex, { width: '100%' });
 
diff --git a/frontend/src/components/auth/SignUp/RegisterForm.tsx b/frontend/src/components/auth/SignUp/RegisterForm.tsx
index c1fac1aa3..6af137550 100644
--- a/frontend/src/components/auth/SignUp/RegisterForm.tsx
+++ b/frontend/src/components/auth/SignUp/RegisterForm.tsx
@@ -10,11 +10,11 @@ import { joiResolver } from '@hookform/resolvers/joi';
 import { styled } from '@/styles/stitches/stitches.config';
 
 import { registerNewUser } from '@/api/authService';
-import Icon from '@/components/Primitives/Icon';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Input from '@/components/Primitives/Input';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Text from '@/components/Primitives/Text/Text';
 import SchemaRegisterForm from '@/schema/schemaRegisterForm';
 import { toastState } from '@/store/toast/atom/toast.atom';
 import { RegisterUser } from '@/types/user/user';
diff --git a/frontend/src/components/auth/SignUp/SignUpForm.tsx b/frontend/src/components/auth/SignUp/SignUpForm.tsx
index f22ebb751..5843d1fe8 100644
--- a/frontend/src/components/auth/SignUp/SignUpForm.tsx
+++ b/frontend/src/components/auth/SignUp/SignUpForm.tsx
@@ -7,10 +7,10 @@ import { joiResolver } from '@hookform/resolvers/joi';
 import { styled } from '@/styles/stitches/stitches.config';
 
 import { checkUserExists, checkUserExistsAD } from '@/api/authService';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Input from '@/components/Primitives/Input';
-import Text from '@/components/Primitives/Text';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Input from '@/components/Primitives/Inputs/Input/Input';
+import Text from '@/components/Primitives/Text/Text';
 import SchemaEmail from '@/schema/schemaEmail';
 import { toastState } from '@/store/toast/atom/toast.atom';
 import { EmailUser } from '@/types/user/user';
diff --git a/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx b/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx
index f9376a01b..df1c9c0c7 100644
--- a/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx
+++ b/frontend/src/components/auth/SignUp/SignUpOptionsForm.tsx
@@ -2,9 +2,9 @@ import React, { Dispatch } from 'react';
 
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import useUser from '@/hooks/useUser';
 import { SignUpEnum } from '@/utils/signUp.enum';
 import { OrSeparator } from '../LoginForm/styles';
diff --git a/frontend/src/components/layouts/Layout/index.tsx b/frontend/src/components/layouts/Layout/Layout.tsx
similarity index 87%
rename from frontend/src/components/layouts/Layout/index.tsx
rename to frontend/src/components/layouts/Layout/Layout.tsx
index d57998136..981c3b77a 100644
--- a/frontend/src/components/layouts/Layout/index.tsx
+++ b/frontend/src/components/layouts/Layout/Layout.tsx
@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react';
 import { signOut, useSession } from 'next-auth/react';
 
-import LoadingPage from '@/components/Primitives/Loading/Page';
-import Sidebar from '@/components/Sidebar';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
+import Sidebar from '@/components/Sidebar/Sidebar';
 import { REFRESH_TOKEN_ERROR } from '@/utils/constants';
 import { Container, ContentSection } from './styles';
 
diff --git a/frontend/src/components/layouts/Layout/partials/MainPageHeader.spec.tsx b/frontend/src/components/layouts/Layout/MainPageHeader/MainPageHeader.spec.tsx
similarity index 96%
rename from frontend/src/components/layouts/Layout/partials/MainPageHeader.spec.tsx
rename to frontend/src/components/layouts/Layout/MainPageHeader/MainPageHeader.spec.tsx
index d0a64ee94..b89b2dcc9 100644
--- a/frontend/src/components/layouts/Layout/partials/MainPageHeader.spec.tsx
+++ b/frontend/src/components/layouts/Layout/MainPageHeader/MainPageHeader.spec.tsx
@@ -11,7 +11,7 @@ const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/' });
 const render = (props = DEFAULT_PROPS) =>
   renderWithProviders(<MainPageHeader {...props} />, { routerOptions: mockRouter });
 
-describe('Components/Dashboard/Tiles/Tile', () => {
+describe('Components/Layouts/Layout/MainPageHeader', () => {
   it('should render correctly', () => {
     // Arrange
     const headerProps = { ...DEFAULT_PROPS };
diff --git a/frontend/src/stories/Layouts/MainPageHeader.stories.tsx b/frontend/src/components/layouts/Layout/MainPageHeader/MainPageHeader.stories.tsx
similarity index 85%
rename from frontend/src/stories/Layouts/MainPageHeader.stories.tsx
rename to frontend/src/components/layouts/Layout/MainPageHeader/MainPageHeader.stories.tsx
index 4065a2123..07ce0a8f5 100644
--- a/frontend/src/stories/Layouts/MainPageHeader.stories.tsx
+++ b/frontend/src/components/layouts/Layout/MainPageHeader/MainPageHeader.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentStory } from '@storybook/react';
 import dedent from 'ts-dedent';
-import MainPageHeader from '@/components/layouts/Layout/partials/MainPageHeader';
+import MainPageHeader from '@/components/layouts/Layout/MainPageHeader/MainPageHeader';
 
 export default {
   title: 'Layouts/MainPageHeader',
@@ -10,7 +10,7 @@ export default {
       description: {
         component: dedent`
         **File Path:**
-        \`@/components/layouts/Layout/partials/MainPageHeader.tsx\`
+        \`@/components/layouts/Layout/MainPageHeader/MainPageHeader.tsx\`
         `,
       },
     },
diff --git a/frontend/src/components/layouts/Layout/partials/MainPageHeader.tsx b/frontend/src/components/layouts/Layout/MainPageHeader/MainPageHeader.tsx
similarity index 68%
rename from frontend/src/components/layouts/Layout/partials/MainPageHeader.tsx
rename to frontend/src/components/layouts/Layout/MainPageHeader/MainPageHeader.tsx
index a307f5741..b56e2dc5c 100644
--- a/frontend/src/components/layouts/Layout/partials/MainPageHeader.tsx
+++ b/frontend/src/components/layouts/Layout/MainPageHeader/MainPageHeader.tsx
@@ -1,8 +1,8 @@
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import Link from 'next/link';
-import Button from '@/components/Primitives/Button';
-import Icon from '@/components/Primitives/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
 
 export type MainPagerHeaderProps = {
   title: string;
diff --git a/frontend/src/components/layouts/Layout/styles.tsx b/frontend/src/components/layouts/Layout/styles.tsx
index 0fef616e5..288d54f89 100644
--- a/frontend/src/components/layouts/Layout/styles.tsx
+++ b/frontend/src/components/layouts/Layout/styles.tsx
@@ -1,4 +1,4 @@
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { styled } from '@/styles/stitches/stitches.config';
 
 const Container = styled('main', {
diff --git a/frontend/src/pages/404.tsx b/frontend/src/pages/404.tsx
index 54101d3b5..dd9350423 100644
--- a/frontend/src/pages/404.tsx
+++ b/frontend/src/pages/404.tsx
@@ -3,9 +3,9 @@ import Link from 'next/link';
 import { BannerContainer, ContainerSection, ImageBackground } from '@/styles/pages/error.styles';
 
 import LogoIcon from '@/components/icons/Logo';
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 import SecondaryBanner from '@/components/icons/SecondaryBanner';
-import Button from '@/components/Primitives/Button';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 export default function Custom404() {
   return (
diff --git a/frontend/src/pages/500.tsx b/frontend/src/pages/500.tsx
index ca11b5087..9092f5dad 100644
--- a/frontend/src/pages/500.tsx
+++ b/frontend/src/pages/500.tsx
@@ -3,9 +3,9 @@ import Link from 'next/link';
 import { BannerContainer, ContainerSection, ImageBackground } from '@/styles/pages/error.styles';
 
 import LogoIcon from '@/components/icons/Logo';
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 import SecondaryBanner from '@/components/icons/SecondaryBanner';
-import Button from '@/components/Primitives/Button';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 const Custom500 = () => (
   <ImageBackground>
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 9520cfea9..d6b7f4dcc 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -11,7 +11,7 @@ import { RecoilRoot } from 'recoil';
 import globalStyles from '@/styles/globals';
 
 import Sprite from '@/components/icons/Sprite';
-import Toast, { ToastProvider, ToastViewport } from '@/components/Primitives/Toast';
+import Toast, { ToastProvider, ToastViewport } from '@/components/Primitives/Toast/Toast';
 import { JWT_EXPIRATION_TIME, RECOIL_DEV_TOOLS } from '@/utils/constants';
 import { ROUTES } from '@/utils/routes';
 import { Session } from 'next-auth';
diff --git a/frontend/src/pages/board-deleted.tsx b/frontend/src/pages/board-deleted.tsx
index 6185a26a5..960a55825 100644
--- a/frontend/src/pages/board-deleted.tsx
+++ b/frontend/src/pages/board-deleted.tsx
@@ -4,8 +4,8 @@ import { BannerContainer, ContainerSection, ImageBackground } from '@/styles/pag
 
 import Banner from '@/components/icons/Banner';
 import LogoIcon from '@/components/icons/Logo';
-import Text from '@/components/Primitives/Text';
-import Button from '@/components/Primitives/Button';
+import Text from '@/components/Primitives/Text/Text';
+import Button from '@/components/Primitives/Inputs/Button/Button';
 
 export default function Custom404() {
   return (
diff --git a/frontend/src/pages/boards/[boardId].tsx b/frontend/src/pages/boards/[boardId].tsx
index 4faa09727..d10f418df 100644
--- a/frontend/src/pages/boards/[boardId].tsx
+++ b/frontend/src/pages/boards/[boardId].tsx
@@ -12,11 +12,11 @@ import { BoardSettings } from '@/components/Board/Settings';
 import AlertGoToMainBoard from '@/components/Board/SplitBoard/AlertGoToMainBoard';
 import BoardHeader from '@/components/Board/SplitBoard/Header';
 import Timer from '@/components/Board/Timer';
-import Icon from '@/components/Primitives/Icon';
-import LoadingPage from '@/components/Primitives/Loading/Page';
-import AlertBox from '@/components/Primitives/AlertBox';
-import Button from '@/components/Primitives/Button';
-import Flex from '@/components/Primitives/Flex';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
+import AlertBox from '@/components/Primitives/Alerts/AlertBox/AlertBox';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Flex from '@/components/Primitives/Layout/Flex';
 import useBoard from '@/hooks/useBoard';
 import { useSocketIO } from '@/hooks/useSocketIO';
 import {
@@ -33,7 +33,7 @@ import { GuestUser } from '@/types/user/user';
 import { DASHBOARD_ROUTE } from '@/utils/routes';
 import { getGuestUserCookies } from '@/utils/getGuestUserCookies';
 import { BoardPhases } from '@/utils/enums/board.phases';
-import ConfirmationDialog from '@/components/Primitives/ConfirmationDialog';
+import ConfirmationDialog from '@/components/Primitives/Alerts/ConfirmationDialog/ConfirmationDialog';
 import useCards from '@/hooks/useCards';
 import { UpdateBoardPhaseType } from '@/types/board/board';
 import { sortParticipantsList } from './[boardId]/participants';
diff --git a/frontend/src/pages/boards/[boardId]/participants.tsx b/frontend/src/pages/boards/[boardId]/participants.tsx
index 05fae917c..1f2c57884 100644
--- a/frontend/src/pages/boards/[boardId]/participants.tsx
+++ b/frontend/src/pages/boards/[boardId]/participants.tsx
@@ -3,9 +3,9 @@ import { getAllUsers } from '@/api/userService';
 import ParticipantsList from '@/components/Board/RegularBoard/ParticipantsList';
 import RegularBoardHeader from '@/components/Board/RegularBoard/ReagularHeader';
 import QueryError from '@/components/Errors/QueryError';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { ContentSection } from '@/components/layouts/Layout/styles';
-import LoadingPage from '@/components/Primitives/Loading/Page';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
 import useBoard from '@/hooks/useBoard';
 import { boardInfoState, boardParticipantsState } from '@/store/board/atoms/board.atom';
 import { usersListState } from '@/store/team/atom/team.atom';
diff --git a/frontend/src/pages/boards/index.tsx b/frontend/src/pages/boards/index.tsx
index 3de75eb14..ebf1a6e06 100644
--- a/frontend/src/pages/boards/index.tsx
+++ b/frontend/src/pages/boards/index.tsx
@@ -4,15 +4,15 @@ import { getSession, useSession } from 'next-auth/react';
 import MyBoards from '@/components/Boards/MyBoards';
 import QueryError from '@/components/Errors/QueryError';
 import requireAuthentication from '@/components/HOC/requireAuthentication';
-import Layout from '@/components/layouts/Layout';
-import LoadingPage from '@/components/Primitives/Loading/Page';
-import Flex from '@/components/Primitives/Flex';
+import Layout from '@/components/layouts/Layout/Layout';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
+import Flex from '@/components/Primitives/Layout/Flex';
 import useTeam from '@/hooks/useTeam';
 import { teamsListState } from '@/store/team/atom/team.atom';
 import { useSetRecoilState } from 'recoil';
 import { dehydrate, QueryClient } from '@tanstack/react-query';
 import { getAllTeams, getTeamsOfUser } from '@/api/teamService';
-import MainPageHeader from '@/components/layouts/Layout/partials/MainPageHeader';
+import MainPageHeader from '@/components/layouts/Layout/MainPageHeader/MainPageHeader';
 import { ROUTES } from '@/utils/routes';
 
 const Boards = () => {
diff --git a/frontend/src/pages/boards/new.tsx b/frontend/src/pages/boards/new.tsx
index 8bce63c34..f56c2970a 100644
--- a/frontend/src/pages/boards/new.tsx
+++ b/frontend/src/pages/boards/new.tsx
@@ -3,13 +3,13 @@ import { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
 import { Container, ContentContainer, PageHeader } from '@/styles/pages/boards/new.styles';
-import Icon from '@/components/Primitives/Icon';
-import Button from '@/components/Primitives/Button';
-import Text from '@/components/Primitives/Text';
-import Flex from '@/components/Primitives/Flex';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Text from '@/components/Primitives/Text/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { BoxColumnContainer } from '@/components/CreateBoard/SelectBoardType/BoxColumnContainer';
 import useBoard from '@/hooks/useBoard';
-import LoadingPage from '@/components/Primitives/Loading/Page';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
 import { NEXT_PUBLIC_REGULAR_BOARD } from '@/utils/constants';
 
 const NewBoard: NextPage = () => {
diff --git a/frontend/src/pages/boards/newRegularBoard.tsx b/frontend/src/pages/boards/newRegularBoard.tsx
index 0142acf1f..702320efa 100644
--- a/frontend/src/pages/boards/newRegularBoard.tsx
+++ b/frontend/src/pages/boards/newRegularBoard.tsx
@@ -1,12 +1,12 @@
 import { Suspense, useCallback, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { getSession, useSession } from 'next-auth/react';
-import Icon from '@/components/Primitives/Icon';
-import Button from '@/components/Primitives/Button';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Text from '@/components/Primitives/Text/Text';
 import useTeam from '@/hooks/useTeam';
 import QueryError from '@/components/Errors/QueryError';
-import LoadingPage from '@/components/Primitives/Loading/Page';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
 import { GetServerSideProps, GetServerSidePropsContext, NextPage } from 'next';
 import {
   PageHeader,
@@ -17,7 +17,7 @@ import requireAuthentication from '@/components/HOC/requireAuthentication';
 import { getAllTeams, getTeamsOfUser } from '@/api/teamService';
 import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query';
 import { BoxRowContainer } from '@/components/CreateBoard/SelectBoardType/BoxRowContainer';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { ContentSelectContainer } from '@/styles/pages/boards/newRegularBoard.styles';
 import BoardName from '@/components/CreateBoard/BoardName';
 import { FormProvider, useForm } from 'react-hook-form';
diff --git a/frontend/src/pages/boards/newSplitBoard.tsx b/frontend/src/pages/boards/newSplitBoard.tsx
index 422f6801a..11b229bad 100644
--- a/frontend/src/pages/boards/newSplitBoard.tsx
+++ b/frontend/src/pages/boards/newSplitBoard.tsx
@@ -7,10 +7,10 @@ import { joiResolver } from '@hookform/resolvers/joi';
 import BoardName from '@/components/CreateBoard/BoardName';
 import SettingsTabs from '@/components/CreateBoard/SplitBoard/SettingsTabs';
 import TipBar from '@/components/CreateBoard/TipBar';
-import Icon from '@/components/Primitives/Icon';
-import AlertBox from '@/components/Primitives/AlertBox';
-import Button from '@/components/Primitives/Button';
-import Text from '@/components/Primitives/Text';
+import Icon from '@/components/Primitives/Icons/Icon/Icon';
+import AlertBox from '@/components/Primitives/Alerts/AlertBox/AlertBox';
+import Button from '@/components/Primitives/Inputs/Button/Button';
+import Text from '@/components/Primitives/Text/Text';
 import useBoard from '@/hooks/useBoard';
 import SchemaCreateBoard from '@/schema/schemaCreateBoardForm';
 import {
@@ -24,7 +24,7 @@ import { ToastStateEnum } from '@/utils/enums/toast-types';
 import useTeam from '@/hooks/useTeam';
 import { teamsOfUser } from '@/store/team/atom/team.atom';
 import QueryError from '@/components/Errors/QueryError';
-import LoadingPage from '@/components/Primitives/Loading/Page';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
 import { GetServerSideProps, GetServerSidePropsContext, NextPage } from 'next';
 import {
   PageHeader,
@@ -41,7 +41,7 @@ import isEmpty from '@/utils/isEmpty';
 import Link from 'next/link';
 import { defaultSplitColumns } from '@/helper/board/defaultColumns';
 import { BoardPhases } from '@/utils/enums/board.phases';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const defaultBoard = {
   users: [],
diff --git a/frontend/src/pages/dashboard/index.tsx b/frontend/src/pages/dashboard/index.tsx
index 1e7f7ad62..42c073e4e 100644
--- a/frontend/src/pages/dashboard/index.tsx
+++ b/frontend/src/pages/dashboard/index.tsx
@@ -5,14 +5,14 @@ import { useSession } from 'next-auth/react';
 import { getDashboardHeaderInfo } from '@/api/authService';
 import QueryError from '@/components/Errors/QueryError';
 import requireAuthentication from '@/components/HOC/requireAuthentication';
-import Layout from '@/components/layouts/Layout';
-import LoadingPage from '@/components/Primitives/Loading/Page';
-import Text from '@/components/Primitives/Text';
-import Tiles from '@/components/Dashboard/Tiles';
+import Layout from '@/components/layouts/Layout/Layout';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
+import Text from '@/components/Primitives/Text/Text';
+import Tiles from '@/components/Dashboard/Tiles/Tiles';
 import RecentRetros from '@/components/Dashboard/RecentRetros';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { ROUTES } from '@/utils/routes';
-import MainPageHeader from '@/components/layouts/Layout/partials/MainPageHeader';
+import MainPageHeader from '@/components/layouts/Layout/MainPageHeader/MainPageHeader';
 
 export const getServerSideProps: GetServerSideProps = requireAuthentication(async () => ({
   props: {},
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 43d53a4c7..5a7305de8 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -8,9 +8,9 @@ import TroubleLogin from '@/components/auth/ForgotPassword/TroubleLogin';
 import LoginForm from '@/components/auth/LoginForm';
 import SignUpTabContent from '@/components/auth/SignUp/SignUpTabContent';
 import Banner from '@/components/icons/Banner';
-import Text from '@/components/Primitives/Text';
+import Text from '@/components/Primitives/Text/Text';
 import { DASHBOARD_ROUTE } from '@/utils/routes';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { NEXT_PUBLIC_LOGIN_SSO_ONLY } from '@/utils/constants';
 import { styled } from '@/styles/stitches/stitches.config';
 
diff --git a/frontend/src/pages/login-guest-user/[boardId].tsx b/frontend/src/pages/login-guest-user/[boardId].tsx
index 1d19a33c2..31bd8fb43 100644
--- a/frontend/src/pages/login-guest-user/[boardId].tsx
+++ b/frontend/src/pages/login-guest-user/[boardId].tsx
@@ -1,7 +1,7 @@
 import { NextPage } from 'next';
 
 import Banner from '@/components/icons/Banner';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 import { BannerContainer, ImageBackground } from '@/styles/pages/auth.styles';
 import GuestUserForm from '@/components/auth/GuestUserForm';
 
diff --git a/frontend/src/pages/reset-password/[tokenId].tsx b/frontend/src/pages/reset-password/[tokenId].tsx
index f3bb1e3c2..fcbf328a0 100644
--- a/frontend/src/pages/reset-password/[tokenId].tsx
+++ b/frontend/src/pages/reset-password/[tokenId].tsx
@@ -4,7 +4,7 @@ import { styled } from '@/styles/stitches/stitches.config';
 
 import ResetPassword from '@/components/auth/ForgotPassword/ResetPassword';
 import Banner from '@/components/icons/Banner';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const CenteredContainer = styled(Flex, {
   position: 'absolute',
diff --git a/frontend/src/pages/teams/[teamId].tsx b/frontend/src/pages/teams/[teamId].tsx
index 07aaa66ea..a41668ff5 100644
--- a/frontend/src/pages/teams/[teamId].tsx
+++ b/frontend/src/pages/teams/[teamId].tsx
@@ -7,14 +7,14 @@ import { useRecoilState, useSetRecoilState } from 'recoil';
 import { getTeamRequest } from '@/api/teamService';
 import { getAllUsers } from '@/api/userService';
 import QueryError from '@/components/Errors/QueryError';
-import LoadingPage from '@/components/Primitives/Loading/Page';
-import Flex from '@/components/Primitives/Flex';
-import TeamMembersList from '@/components/Teams/Team';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
+import Flex from '@/components/Primitives/Layout/Flex';
+import TeamMembersList from '@/components/Teams/Team/TeamMembersList';
 import { membersListState, usersListState } from '@/store/team/atom/team.atom';
 import useTeam from '@/hooks/useTeam';
-import Layout from '@/components/layouts/Layout';
-import Dots from '@/components/Primitives/Loading/Dots';
-import TeamHeader from '@/components/Teams/Team/partials/Header';
+import Layout from '@/components/layouts/Layout/Layout';
+import Dots from '@/components/Primitives/Loading/Dots/Dots';
+import TeamHeader from '@/components/Teams/Team/Header/Header';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
 import useUser from '@/hooks/useUser';
 
diff --git a/frontend/src/pages/teams/index.tsx b/frontend/src/pages/teams/index.tsx
index 055c1c860..1748da241 100644
--- a/frontend/src/pages/teams/index.tsx
+++ b/frontend/src/pages/teams/index.tsx
@@ -6,16 +6,16 @@ import { getSession, useSession } from 'next-auth/react';
 import { getDashboardHeaderInfo } from '@/api/authService';
 import { getAllTeams, getTeamsOfUser } from '@/api/teamService';
 import QueryError from '@/components/Errors/QueryError';
-import Layout from '@/components/layouts/Layout';
-import LoadingPage from '@/components/Primitives/Loading/Page';
-import Flex from '@/components/Primitives/Flex';
+import Layout from '@/components/layouts/Layout/Layout';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
+import Flex from '@/components/Primitives/Layout/Flex';
 import useTeam from '@/hooks/useTeam';
 import requireAuthentication from '@/components/HOC/requireAuthentication';
 import { useRecoilState } from 'recoil';
 import { teamsListState } from '@/store/team/atom/team.atom';
-import TeamsList from '@/components/Teams/TeamsList';
-import Dots from '@/components/Primitives/Loading/Dots';
-import MainPageHeader from '@/components/layouts/Layout/partials/MainPageHeader';
+import TeamsList from '@/components/Teams/TeamsList/TeamList';
+import Dots from '@/components/Primitives/Loading/Dots/Dots';
+import MainPageHeader from '@/components/layouts/Layout/MainPageHeader/MainPageHeader';
 import { ROUTES } from '@/utils/routes';
 
 const Teams = () => {
diff --git a/frontend/src/pages/teams/new.tsx b/frontend/src/pages/teams/new.tsx
index 123b8a339..05ad401c3 100644
--- a/frontend/src/pages/teams/new.tsx
+++ b/frontend/src/pages/teams/new.tsx
@@ -4,16 +4,16 @@ import { useSession } from 'next-auth/react';
 import { useSetRecoilState } from 'recoil';
 import { getAllUsers } from '@/api/userService';
 import requireAuthentication from '@/components/HOC/requireAuthentication';
-import CreateTeam from '@/components/Teams/CreateTeam';
+import CreateTeam from '@/components/Teams/CreateTeam/CreateTeam';
 import { membersListState, usersListState } from '@/store/team/atom/team.atom';
 import { TeamUser } from '@/types/team/team.user';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
 import QueryError from '@/components/Errors/QueryError';
-import LoadingPage from '@/components/Primitives/Loading/Page';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
 import { Suspense, useEffect } from 'react';
 import useUser from '@/hooks/useUser';
-import Flex from '@/components/Primitives/Flex';
-import Dots from '@/components/Primitives/Loading/Dots';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Dots from '@/components/Primitives/Loading/Dots/Dots';
 
 const NewTeam: NextPage = () => {
   const { data: session } = useSession({ required: true });
diff --git a/frontend/src/pages/users/[userId].tsx b/frontend/src/pages/users/[userId].tsx
index 53bb0db37..63e73d70f 100644
--- a/frontend/src/pages/users/[userId].tsx
+++ b/frontend/src/pages/users/[userId].tsx
@@ -2,9 +2,9 @@ import { ReactElement, Suspense, useEffect } from 'react';
 import { useSession } from 'next-auth/react';
 
 import QueryError from '@/components/Errors/QueryError';
-import Layout from '@/components/layouts/Layout';
-import LoadingPage from '@/components/Primitives/Loading/Page';
-import Flex from '@/components/Primitives/Flex';
+import Layout from '@/components/layouts/Layout/Layout';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
+import Flex from '@/components/Primitives/Layout/Flex';
 import UsersEdit from '@/components/Users/UserEdit';
 import { ContentSection } from '@/components/layouts/Layout/styles';
 import UserHeader from '@/components/Users/UserEdit/partials/UserHeader';
@@ -17,7 +17,7 @@ import { useSetRecoilState } from 'recoil';
 import { userTeamsListState } from '@/store/team/atom/team.atom';
 import useTeam from '@/hooks/useTeam';
 import useUser from '@/hooks/useUser';
-import MainPageHeader from '@/components/layouts/Layout/partials/MainPageHeader';
+import MainPageHeader from '@/components/layouts/Layout/MainPageHeader/MainPageHeader';
 
 const UserDetails = () => {
   const { data: session } = useSession({ required: true });
diff --git a/frontend/src/pages/users/index.tsx b/frontend/src/pages/users/index.tsx
index 2e009b22f..21f7e3a41 100644
--- a/frontend/src/pages/users/index.tsx
+++ b/frontend/src/pages/users/index.tsx
@@ -2,13 +2,13 @@ import { ReactElement, Suspense } from 'react';
 import { useSession } from 'next-auth/react';
 
 import QueryError from '@/components/Errors/QueryError';
-import Layout from '@/components/layouts/Layout';
-import LoadingPage from '@/components/Primitives/Loading/Page';
-import Flex from '@/components/Primitives/Flex';
+import Layout from '@/components/layouts/Layout/Layout';
+import LoadingPage from '@/components/Primitives/Loading/Page/Page';
+import Flex from '@/components/Primitives/Layout/Flex';
 import UsersList from '@/components/Users/UsersList';
 import requireAuthentication from '@/components/HOC/requireAuthentication';
 import { GetServerSideProps } from 'next';
-import MainPageHeader from '@/components/layouts/Layout/partials/MainPageHeader';
+import MainPageHeader from '@/components/layouts/Layout/MainPageHeader/MainPageHeader';
 
 export const getServerSideProps: GetServerSideProps = requireAuthentication(async () => ({
   props: {},
diff --git a/frontend/src/stories/Misc/Colors.stories.tsx b/frontend/src/stories/Misc/Colors.stories.tsx
index b0dc3e974..49b5b1ddd 100644
--- a/frontend/src/stories/Misc/Colors.stories.tsx
+++ b/frontend/src/stories/Misc/Colors.stories.tsx
@@ -3,8 +3,8 @@ import { ComponentStory } from '@storybook/react';
 
 import dedent from 'ts-dedent';
 import Sprite from '@/components/icons/Sprite';
-import Flex from '@/components/Primitives/Flex';
-import Text from '@/components/Primitives/Text';
+import Flex from '@/components/Primitives/Layout/Flex';
+import Text from '@/components/Primitives/Text/Text';
 import { colors } from '@/styles/stitches/partials/colors';
 import Card from '../components/Card';
 import { capitalize } from '../utils';
diff --git a/frontend/src/stories/components/Card.tsx b/frontend/src/stories/components/Card.tsx
index 97299d8a7..37c1cae21 100644
--- a/frontend/src/stories/components/Card.tsx
+++ b/frontend/src/stories/components/Card.tsx
@@ -1,5 +1,5 @@
-import Box from '@/components/Primitives/Box';
-import Flex from '@/components/Primitives/Flex';
+import Box from '@/components/Primitives/Layout/Box';
+import Flex from '@/components/Primitives/Layout/Flex';
 import React from 'react';
 
 const Card = ({ display, backgroundColor, children }: any) => (
diff --git a/frontend/src/styles/pages/auth.styles.tsx b/frontend/src/styles/pages/auth.styles.tsx
index de8b47ace..21abf234b 100644
--- a/frontend/src/styles/pages/auth.styles.tsx
+++ b/frontend/src/styles/pages/auth.styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const CenteredContainer = styled('div', {
   position: 'absolute',
diff --git a/frontend/src/styles/pages/boards/board.styles.tsx b/frontend/src/styles/pages/boards/board.styles.tsx
index 7c9f55c17..fbe754fcb 100644
--- a/frontend/src/styles/pages/boards/board.styles.tsx
+++ b/frontend/src/styles/pages/boards/board.styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const Container = styled(Flex, {
   overflow: 'hidden',
diff --git a/frontend/src/styles/pages/boards/newSplitBoard.styles.tsx b/frontend/src/styles/pages/boards/newSplitBoard.styles.tsx
index 2b8326b94..774e79959 100644
--- a/frontend/src/styles/pages/boards/newSplitBoard.styles.tsx
+++ b/frontend/src/styles/pages/boards/newSplitBoard.styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const Container = styled('main', {
   width: '100%',
diff --git a/frontend/src/styles/pages/error.styles.tsx b/frontend/src/styles/pages/error.styles.tsx
index ab1aff423..f2474b69d 100644
--- a/frontend/src/styles/pages/error.styles.tsx
+++ b/frontend/src/styles/pages/error.styles.tsx
@@ -1,6 +1,6 @@
 import { styled } from '@/styles/stitches/stitches.config';
 
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 export const ContainerSection = styled('div', {
   position: 'absolute',
diff --git a/frontend/src/styles/pages/login-guest-user.styles.tsx b/frontend/src/styles/pages/login-guest-user.styles.tsx
index 7688b86f2..0dcc79501 100644
--- a/frontend/src/styles/pages/login-guest-user.styles.tsx
+++ b/frontend/src/styles/pages/login-guest-user.styles.tsx
@@ -1,5 +1,5 @@
 import { styled } from '@/styles/stitches/stitches.config';
-import Flex from '@/components/Primitives/Flex';
+import Flex from '@/components/Primitives/Layout/Flex';
 
 const ImageBackground = styled(Flex, {
   background: 'url(/images/background.svg) no-repeat center center fixed',
diff --git a/frontend/src/styles/stitches/partials/borderRadius.ts b/frontend/src/styles/stitches/partials/borderRadius.ts
index 97cc2645b..41ce43e8d 100644
--- a/frontend/src/styles/stitches/partials/borderRadius.ts
+++ b/frontend/src/styles/stitches/partials/borderRadius.ts
@@ -1,5 +1,7 @@
 const borderRadius = {
+  1: '0.0625rem',
   2: '0.125rem',
+  3: '0.1875rem',
   4: '0.25rem',
   6: '0.375rem',
   8: '0.5rem',
diff --git a/frontend/src/styles/stitches/partials/sizes.ts b/frontend/src/styles/stitches/partials/sizes.ts
index 604066217..9b153f5d8 100644
--- a/frontend/src/styles/stitches/partials/sizes.ts
+++ b/frontend/src/styles/stitches/partials/sizes.ts
@@ -1,5 +1,7 @@
 const sizes = {
+  1: '0.0625rem',
   2: '0.125rem',
+  3: '0.1875rem',
   4: '0.25rem',
   5: '0.313rem',
   6: '0.375rem',
diff --git a/frontend/src/styles/stitches/partials/spaces.ts b/frontend/src/styles/stitches/partials/spaces.ts
index 294df410f..5b3fa12f3 100644
--- a/frontend/src/styles/stitches/partials/spaces.ts
+++ b/frontend/src/styles/stitches/partials/spaces.ts
@@ -1,4 +1,5 @@
 const spaces = {
+  '-1': '-0.0625rem',
   '-22': '-1.375rem',
   2: '0.125rem',
   3: '0.1875rem',
diff --git a/frontend/src/utils/factories/user.ts b/frontend/src/utils/factories/user.ts
index 450f31975..b73bbfbea 100644
--- a/frontend/src/utils/factories/user.ts
+++ b/frontend/src/utils/factories/user.ts
@@ -1,3 +1,4 @@
+import { UserList } from '@/types/team/userList';
 import { User } from '@/types/user/user';
 import { faker } from '@faker-js/faker';
 import { buildTestFactory } from '@/utils/testing';
@@ -5,7 +6,7 @@ import { buildTestFactory } from '@/utils/testing';
 import { BoardUser } from '@/types/board/board.user';
 import { BoardUserRoles } from '@/utils/enums/board.user.roles';
 import { TeamUserRoles } from '@/utils/enums/team.user.roles';
-import { ListUsersType } from '@/components/Primitives/Avatar/AvatarGroup';
+import { ListUsersType } from '@/components/Primitives/Avatars/AvatarGroup/AvatarGroup';
 import { TeamUser } from '@/types/team/team.user';
 
 export const UserFactory = buildTestFactory<User>(() => {
@@ -107,3 +108,23 @@ export const TeamUserFactory = buildTestFactory<TeamUser>(() => {
     isNewJoiner,
   };
 });
+
+export const UserListFactory = buildTestFactory<UserList>(() => {
+  const _id = faker.database.mongodbObjectId();
+  const firstName = faker.name.firstName();
+  const lastName = faker.name.lastName();
+  const email = faker.internet.email(firstName, lastName);
+  const isSAdmin = faker.datatype.boolean();
+  const joinedAt = faker.datatype.datetime().toString();
+  const isChecked = faker.datatype.boolean();
+
+  return {
+    _id,
+    firstName,
+    lastName,
+    email,
+    isSAdmin,
+    joinedAt,
+    isChecked,
+  };
+});