diff --git a/electron/providers/jira-cloud-provider/JiraCloudProvider.ts b/electron/providers/jira-cloud-provider/JiraCloudProvider.ts
index 6f0fb559..9e376432 100644
--- a/electron/providers/jira-cloud-provider/JiraCloudProvider.ts
+++ b/electron/providers/jira-cloud-provider/JiraCloudProvider.ts
@@ -769,7 +769,7 @@ export class JiraCloudProvider implements IProvider {
               ...(summary && {
                 summary,
               }),
-              ...(epic && epic.issueKey && {
+              ...(epic && epic.issueKey !== undefined && {
                 parent: { key: epic.issueKey },
               }),
               ...(type && {
diff --git a/electron/providers/jira-server-provider/JiraServerProvider.ts b/electron/providers/jira-server-provider/JiraServerProvider.ts
index 29a71261..46c7a56a 100644
--- a/electron/providers/jira-server-provider/JiraServerProvider.ts
+++ b/electron/providers/jira-server-provider/JiraServerProvider.ts
@@ -875,7 +875,7 @@ export class JiraServerProvider implements IProvider {
               ...(summary && {
                 summary,
               }),
-              ...(epic && epic.issueKey && {
+              ...(epic && epic.issueKey !== undefined && {
                 parent: { key: epic.issueKey },
               }),
               ...(type && {
diff --git a/jest.config.json b/jest.config.json
index 51ae1592..77617320 100644
--- a/jest.config.json
+++ b/jest.config.json
@@ -3,6 +3,9 @@
   "transform": {
     "^.+\\.tsx?$": "ts-jest"
   },
-  "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"],
+  "setupFilesAfterEnv": [
+    "@testing-library/jest-dom/extend-expect",
+    "./src/test/setup-undefined-jsdom-properties.ts"
+  ],
   "modulePathIgnorePatterns": ["/e2e"]
 }
diff --git a/package.json b/package.json
index 732c34e0..a9756243 100644
--- a/package.json
+++ b/package.json
@@ -26,16 +26,16 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@fastify/env": "^4.2.0",
-    "@mantine/core": "^5.10.0",
-    "@mantine/dates": "^5.10.0",
-    "@mantine/form": "^5.10.0",
-    "@mantine/hooks": "^5.10.0",
-    "@mantine/notifications": "^5.10.0",
+    "@hello-pangea/dnd": "^16.5.0",
+    "@mantine/core": "^7.0.0",
+    "@mantine/dates": "^7.0.0",
+    "@mantine/form": "^7.0.0",
+    "@mantine/hooks": "^7.0.0",
+    "@mantine/notifications": "^7.0.0",
     "@tabler/icons": "^1.116.1",
     "@tanstack/react-query": "^4.23.0",
     "@tanstack/react-query-devtools": "^4.23.0",
     "@types/file-saver": "^2.0.5",
-    "@types/react-beautiful-dnd": "^13.1.3",
     "axios": "^1.6.1",
     "cross-fetch": "^3.1.5",
     "dayjs": "^1.11.7",
@@ -47,7 +47,6 @@
     "i18next": "21.10.0",
     "immer": "^9.0.19",
     "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-i18next": "11.18.6",
     "react-router-dom": "^6.4.5",
@@ -55,13 +54,13 @@
     "zustand": "^4.3.1"
   },
   "devDependencies": {
-    "@electron-forge/cli": "^6.1.1",
-    "@electron-forge/maker-deb": "^6.1.1",
-    "@electron-forge/maker-rpm": "^6.1.1",
-    "@electron-forge/maker-squirrel": "^6.1.1",
-    "@electron-forge/maker-zip": "^6.1.1",
-    "@electron-forge/plugin-vite": "6.1.1",
-    "@electron-forge/publisher-github": "^6.1.1",
+    "@electron-forge/cli": "^6.4.2",
+    "@electron-forge/maker-deb": "^6.4.2",
+    "@electron-forge/maker-rpm": "^6.4.2",
+    "@electron-forge/maker-squirrel": "^6.4.2",
+    "@electron-forge/maker-zip": "^6.4.2",
+    "@electron-forge/plugin-vite": "6.4.2",
+    "@electron-forge/publisher-github": "^6.4.2",
     "@playwright/test": "^1.32.3",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -70,9 +69,11 @@
     "@types/jest": "^29.4.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^5.44.0",
     "@typescript-eslint/parser": "^5.44.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "electron": "^24.1.2",
+    "electron-playwright-helpers": "^1.5.4",
     "eslint": "^8.28.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -85,15 +86,16 @@
     "eslint-plugin-testing-library": "^5.10.2",
     "husky": "^8.0.0",
     "jest": "^29.5.0",
-    "lint-staged": "^13.0.3",
-    "typescript": "^4.9.3",
-    "electron": "^24.1.2",
-    "electron-playwright-helpers": "^1.5.4",
     "jest-environment-jsdom": "^29.4.3",
+    "lint-staged": "^13.0.3",
+    "postcss": "^8.4.32",
+    "postcss-preset-mantine": "^1.12.0",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "2.7.1",
     "sass": "^1.55.0",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
+    "typescript": "^4.9.3",
     "vite": "^4.3.2",
     "vite-plugin-electron-renderer": "^0.14.1"
   },
diff --git a/postcss.config.ts b/postcss.config.ts
new file mode 100644
index 00000000..888f20b1
--- /dev/null
+++ b/postcss.config.ts
@@ -0,0 +1,15 @@
+module.exports = {
+    plugins: {
+        'postcss-nested': {},
+        'postcss-preset-mantine': {},
+        'postcss-simple-vars': {
+            variables: {
+                'mantine-breakpoint-xs': '36em',
+                'mantine-breakpoint-sm': '48em',
+                'mantine-breakpoint-md': '62em',
+                'mantine-breakpoint-lg': '75em',
+                'mantine-breakpoint-xl': '88em',
+            },
+        },
+    },
+};
diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index aa0f8c66..1bdf864f 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -1,31 +1,16 @@
-import {
-  ColorScheme,
-  ColorSchemeProvider,
-  MantineProvider,
-} from "@mantine/core"
-import { NotificationsProvider } from "@mantine/notifications"
-import { ReactElement, useState } from "react"
+import { MantineProvider } from "@mantine/core"
+import { Notifications } from "@mantine/notifications"
+import { ReactElement } from "react"
 import { theme } from "../theme"
 
 export function ThemeProvider({ children }: { children: ReactElement }) {
-  const [colorScheme, setColorScheme] = useState<ColorScheme>("light")
-  const toggleColorScheme = (value?: ColorScheme) =>
-    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"))
+  // withGlobalStyles
+  // withNormalizeCSS
 
   return (
-    <NotificationsProvider>
-      <ColorSchemeProvider
-        colorScheme={colorScheme}
-        toggleColorScheme={toggleColorScheme}
-      >
-        <MantineProvider
-          theme={{ ...theme, colorScheme }}
-          withGlobalStyles
-          withNormalizeCSS
-        >
-          {children}
-        </MantineProvider>
-      </ColorSchemeProvider>
-    </NotificationsProvider>
+    <MantineProvider theme={theme}>
+      <Notifications />
+      {children}
+    </MantineProvider>
   )
 }
diff --git a/src/common/color-scheme.ts b/src/common/color-scheme.ts
new file mode 100644
index 00000000..846429b4
--- /dev/null
+++ b/src/common/color-scheme.ts
@@ -0,0 +1,5 @@
+import { useComputedColorScheme } from "@mantine/core";
+
+export function useColorScheme(): "light" | "dark" {
+  return useComputedColorScheme('light', { getInitialValueInEffect: true })
+}
\ No newline at end of file
diff --git a/src/common/query-functions.ts b/src/common/query-functions.ts
new file mode 100644
index 00000000..fcf89cbb
--- /dev/null
+++ b/src/common/query-functions.ts
@@ -0,0 +1,4 @@
+import { User } from "../../types";
+
+export const getAssignableUsersByProject = (projectIdOrKey: string): Promise<User[]> =>
+  window.provider.getAssignableUsersByProject(projectIdOrKey)
\ No newline at end of file
diff --git a/src/common/status-color.ts b/src/common/status-color.ts
index c2d2281e..46e006a7 100644
--- a/src/common/status-color.ts
+++ b/src/common/status-color.ts
@@ -1,4 +1,4 @@
-import { MantineColor } from "@mantine/styles";
+import { MantineColor } from "@mantine/core";
 import { StatusType } from "../../types/status";
 
 export const getStatusTypeColor = (statusType: StatusType): MantineColor => {
diff --git a/src/components/BacklogView/BacklogView.tsx b/src/components/BacklogView/BacklogView.tsx
index e394b2f6..22fcdf5c 100644
--- a/src/components/BacklogView/BacklogView.tsx
+++ b/src/components/BacklogView/BacklogView.tsx
@@ -14,8 +14,8 @@ import {
 } from "@mantine/core"
 import { IconSearch } from "@tabler/icons"
 import { useQueries, useQuery } from "@tanstack/react-query"
-import { useEffect, useState } from "react"
-import { DragDropContext } from "react-beautiful-dnd"
+import { ChangeEvent, useEffect, useState } from "react"
+import { DragDropContext } from "@hello-pangea/dnd"
 import { useNavigate } from "react-router-dom"
 import { Issue, Sprint } from "types"
 import { useCanvasStore } from "../../lib/Store"
@@ -32,8 +32,10 @@ import { resizeDivider } from "./helpers/resizeDivider"
 import { DraggableIssuesWrapper } from "./IssuesWrapper/DraggableIssuesWrapper"
 import { SprintsPanel } from "./IssuesWrapper/SprintsPanel"
 import { ReloadButton } from "./ReloadButton"
+import { useColorScheme } from "../../common/color-scheme";
 
 export function BacklogView() {
+  const colorScheme = useColorScheme()
   const navigate = useNavigate()
   const [createIssueModalOpened, setCreateIssueModalOpened] = useState(false)
   const projectName = useCanvasStore((state) => state.selectedProject?.name)
@@ -64,7 +66,7 @@ export function BacklogView() {
 
   const sprintsIssuesResults = useQueries({
     queries:
-      !isErrorSprints && sprints && sprints instanceof Array
+      !isErrorSprints && sprints
         ? sprints?.map((sprint) => ({
             queryKey: ["issues", "sprints", projectKey, sprints, sprint.id],
             queryFn: () => getIssuesBySprint(sprint.id),
@@ -140,7 +142,7 @@ export function BacklogView() {
       </Center>
     )
 
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
     const currentSearch = event.currentTarget.value
     setSearch(currentSearch)
     searchIssuesFilter(
@@ -168,13 +170,13 @@ export function BacklogView() {
       </Center>
     )
   return (
-    <Stack sx={{ minHeight: "100%" }}>
-      <Stack align="left" spacing={0}>
+    <Stack style={{ minHeight: "100%" }}>
+      <Stack align="left" gap={0}>
         <Group>
-          <Group spacing="xs" c="dimmed">
+          <Group gap="xs" c="dimmed">
             <Text
               onClick={() => navigate("/projectsview")}
-              sx={{
+              style={{
                 ":hover": {
                   textDecoration: "underline",
                   cursor: "pointer",
@@ -191,13 +193,13 @@ export function BacklogView() {
         <Title mb="sm">Backlog</Title>
         <TextInput
           placeholder="Search by issue summary, key, epic, labels, creator or assignee.."
-          icon={<IconSearch size={14} stroke={1.5} />}
+          leftSection={<IconSearch size={14} stroke={1.5} />}
           value={search}
           onChange={handleSearchChange}
         />
       </Stack>
 
-      <Flex sx={{ flexGrow: 1 }}>
+      <Flex style={{ flexGrow: 1 }}>
         <DragDropContext
           onDragEnd={(dropResult) =>
             onDragEnd({
@@ -209,10 +211,10 @@ export function BacklogView() {
         >
           <ScrollArea.Autosize
             className="left-panel"
-            maxHeight="calc(100vh - 230px)"
             w="50%"
             p="sm"
-            sx={{
+            style={{
+              maxHeight: "calc(100vh - 230px)",
               minWidth: "260px",
             }}
           >
@@ -234,13 +236,10 @@ export function BacklogView() {
                 display="flex"
                 fullWidth
                 onClick={() => setCreateIssueModalOpened(true)}
-                sx={(theme) => ({
+                style={(theme) => ({
                   justifyContent: "left",
                   ":hover": {
-                    background:
-                      theme.colorScheme === "dark"
-                        ? theme.colors.dark[4]
-                        : theme.colors.gray[4],
+                    background: colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4],
                   },
                 })}
               >
@@ -257,16 +256,18 @@ export function BacklogView() {
             size="xl"
             className="resize-handle"
             orientation="vertical"
-            sx={{
+            style={{
               cursor: "col-resize",
             }}
           />
           <ScrollArea.Autosize
             className="right-panel"
-            maxHeight="calc(100vh - 230px)"
             w="50%"
             p="xs"
-            sx={{ minWidth: "260px" }}
+            style={{
+              maxHeight: "calc(100vh - 230px)",
+              minWidth: "260px"
+            }}
           >
             <SprintsPanel
               sprintsWithIssues={
diff --git a/src/components/BacklogView/CreateSprint/CreateSprint.tsx b/src/components/BacklogView/CreateSprint/CreateSprint.tsx
index 93b60696..0899e0e1 100644
--- a/src/components/BacklogView/CreateSprint/CreateSprint.tsx
+++ b/src/components/BacklogView/CreateSprint/CreateSprint.tsx
@@ -1,9 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { Box, Button, Group, Loader, TextInput } from "@mantine/core"
+import { Box, Button } from "@mantine/core"
 import { useState } from "react"
 import { CreateSprintModal } from "./CreateSprintModal"
+import { useColorScheme } from "../../../common/color-scheme";
 
 export function CreateSprint() {
+  const colorScheme = useColorScheme()
   const [createSprintModalOpened, setCreateSprintModalOpened] = useState(false)
 
   return (
@@ -17,13 +18,10 @@ export function CreateSprint() {
         display="flex"
         fullWidth
         onClick={() => setCreateSprintModalOpened(true)}
-        sx={(theme) => ({
+        style={(theme) => ({
           justifyContent: "left",
           ":hover": {
-            background:
-              theme.colorScheme === "dark"
-                ? theme.colors.dark[4]
-                : theme.colors.gray[4],
+            background: colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4],
           },
         })}
       >
diff --git a/src/components/BacklogView/CreateSprint/CreateSprintModal.tsx b/src/components/BacklogView/CreateSprint/CreateSprintModal.tsx
index ad19d40e..6727ffb2 100644
--- a/src/components/BacklogView/CreateSprint/CreateSprintModal.tsx
+++ b/src/components/BacklogView/CreateSprint/CreateSprintModal.tsx
@@ -18,6 +18,7 @@ import { GoalInput } from "./GoalInput"
 import { SprintEndDatePicker } from "./SprintEndDatePicker"
 import { SprintStartDatePicker } from "./SprintStartDatePicker"
 import { ColorSchemeToggle } from "../../common/ColorSchemeToggle"
+import { useColorScheme } from "../../../common/color-scheme";
 
 export function CreateSprintModal({
   opened,
@@ -28,6 +29,7 @@ export function CreateSprintModal({
 }) {
   const queryClient = useQueryClient()
   const theme = useMantineTheme()
+  const colorScheme = useColorScheme()
   const selectedBoard = useCanvasStore(
     (state) => state.selectedProjectBoardIds[0]
   )
@@ -68,36 +70,35 @@ export function CreateSprintModal({
       onClose={() => setOpened(false)}
       title="Create Sprint"
       size="70vw"
-      overflow="outside"
-      overlayColor={
-        theme.colorScheme === "dark"
+      overlayProps={{
+        color: colorScheme === "dark"
           ? theme.colors.dark[9]
-          : theme.colors.gray[2]
-      }
-      overlayOpacity={0.55}
-      overlayBlur={3}
+          : theme.colors.gray[2],
+        opacity: 0.55,
+        blur: 3,
+      }}
     >
       <ColorSchemeToggle
         size="34px"
-        sx={{
+        style={{
           position: "absolute",
           top: 19,
           right: 50,
         }}
       />
-      <ScrollArea.Autosize maxHeight="70vh">
+      <ScrollArea.Autosize style={{ maxHeight: "70vh" }}>
         <form
           onSubmit={form.onSubmit((sprint, event) => {
-            event.preventDefault()
+            event?.preventDefault()
             mutation.mutate(sprint)
           })}
         >
-          <Stack spacing="md" mr="sm">
+          <Stack gap="md" mr="sm">
             <NameInput form={form} />
             <GoalInput form={form} />
             <SprintStartDatePicker form={form} />
             <SprintEndDatePicker form={form} />
-            <Group position="right">
+            <Group justify="right">
               <Button
                 variant="light"
                 color="gray"
diff --git a/src/components/BacklogView/CreateSprint/SprintEndDatePicker.tsx b/src/components/BacklogView/CreateSprint/SprintEndDatePicker.tsx
index 77bcd452..ee579f23 100644
--- a/src/components/BacklogView/CreateSprint/SprintEndDatePicker.tsx
+++ b/src/components/BacklogView/CreateSprint/SprintEndDatePicker.tsx
@@ -1,4 +1,4 @@
-import { DatePicker } from "@mantine/dates"
+import { DatePickerInput } from "@mantine/dates"
 import { UseFormReturnType } from "@mantine/form"
 import { SprintCreate } from "types"
 
@@ -8,10 +8,9 @@ export function SprintEndDatePicker({
   form: UseFormReturnType<SprintCreate>
 }) {
   return (
-    <DatePicker
+    <DatePickerInput
       label="End Date"
       placeholder="Pick end date"
-      withinPortal
       clearable
       {...form.getInputProps("endDate")}
       onChange={(value) => {
diff --git a/src/components/BacklogView/CreateSprint/SprintStartDatePicker.tsx b/src/components/BacklogView/CreateSprint/SprintStartDatePicker.tsx
index 1742dcdd..3745ce44 100644
--- a/src/components/BacklogView/CreateSprint/SprintStartDatePicker.tsx
+++ b/src/components/BacklogView/CreateSprint/SprintStartDatePicker.tsx
@@ -1,4 +1,4 @@
-import { DatePicker } from "@mantine/dates"
+import { DatePickerInput } from "@mantine/dates"
 import { UseFormReturnType } from "@mantine/form"
 import { SprintCreate } from "types"
 
@@ -8,10 +8,9 @@ export function SprintStartDatePicker({
   form: UseFormReturnType<SprintCreate>
 }) {
   return (
-    <DatePicker
+    <DatePickerInput
       label="Start Date"
       placeholder="Pick start date"
-      withinPortal
       clearable
       {...form.getInputProps("startDate")}
       onChange={(value) => {
diff --git a/src/components/BacklogView/Issue/DeleteButton.tsx b/src/components/BacklogView/Issue/DeleteButton.tsx
index a1d2e2e9..25793850 100644
--- a/src/components/BacklogView/Issue/DeleteButton.tsx
+++ b/src/components/BacklogView/Issue/DeleteButton.tsx
@@ -3,6 +3,7 @@ import { IconTrash } from "@tabler/icons"
 import { useEffect, useState } from "react"
 import { useHover } from "@mantine/hooks";
 import { DeleteIssueAlert } from "../../DetailView/Components/DeleteIssue/DeleteIssueAlert"
+import { useColorScheme } from "../../../common/color-scheme";
 
 export function DeleteButton({
   mounted,
@@ -11,6 +12,7 @@ export function DeleteButton({
   mounted: boolean
   issueKey: string
 }) {
+  const colorScheme = useColorScheme()
   const [issuePopoverOpened, setIssuePopoverOpened] = useState(false)
   const { ref, hovered } = useHover()
 
@@ -21,9 +23,9 @@ export function DeleteButton({
   }, [mounted, hovered])
 
   return (
-    <Box ref={ref} sx={{ position: "absolute", bottom: 5, right: 11 }}>
+    <Box style={{ position: "absolute", bottom: 0, right: 11 }}>
       <Transition
-        mounted={mounted}
+        mounted={mounted || hovered}
         transition="fade"
         duration={200}
         timingFunction="ease"
@@ -35,6 +37,7 @@ export function DeleteButton({
             withArrow
             shadow="md"
             opened={issuePopoverOpened}
+            withinPortal={false}
             onChange={setIssuePopoverOpened}
           >
             <Popover.Target>
@@ -52,20 +55,19 @@ export function DeleteButton({
               </ActionIcon>
             </Popover.Target>
             <Popover.Dropdown
-              sx={(theme) => ({
-                background:
-                  theme.colorScheme === "dark"
-                    ? theme.colors.dark[7]
-                    : theme.white,
+              style={(theme) => ({
+                background: colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
               })}
             >
-              <div style={{
-                height: "20px",
-                position: "absolute",
-                width: "inherit",
-                left: "0px",
-                top: "-10px",
-              }} />
+              <Box
+                ref={ref}
+                h="20px"
+                w="inherit"
+                left="0px"
+                top="-10px"
+                pos="absolute"
+                onClick={(e) => e.stopPropagation()}
+              />
               <DeleteIssueAlert
                 issueKey={issueKey}
                 cancelAlert={() => setIssuePopoverOpened(false)}
diff --git a/src/components/BacklogView/Issue/IssueCard.tsx b/src/components/BacklogView/Issue/IssueCard.tsx
index 4082407e..05441cc9 100644
--- a/src/components/BacklogView/Issue/IssueCard.tsx
+++ b/src/components/BacklogView/Issue/IssueCard.tsx
@@ -1,6 +1,5 @@
 import {
   Avatar,
-  Badge,
   Center,
   Box,
   Group,
@@ -12,16 +11,17 @@ import {
   useMantineTheme,
   Grid,
 } from "@mantine/core"
-import { useHover, useMergedRef } from "@mantine/hooks"
 import { useQueryClient } from "@tanstack/react-query"
 import { Issue } from "types"
 import { useState } from "react"
-import { Draggable } from "react-beautiful-dnd"
+import { Draggable } from "@hello-pangea/dnd"
 import { DetailView } from "../../DetailView/DetailView"
 import { IssueIcon } from "./IssueIcon"
-import { DeleteButton } from "./DeleteButton"
 import { StatusType } from "../../../../types/status";
 import { StoryPointsBadge } from "../../common/StoryPoints/StoryPointsBadge";
+import { useColorScheme } from "../../../common/color-scheme";
+import { IssueLabelBadge } from "../../common/IssueLabelBadge";
+import { IssueEpicBadge } from "../../common/IssueEpicBadge";
 
 export function IssueCard({
   issueKey,
@@ -38,11 +38,11 @@ export function IssueCard({
 }: Issue & { index: number }) {
   const [opened, setOpened] = useState(false)
   const queryClient = useQueryClient()
-  const { ref, hovered } = useHover()
   const theme = useMantineTheme()
+  const colorScheme = useColorScheme()
 
   const hoverStyles =
-    theme.colorScheme === "dark"
+    colorScheme === "dark"
       ? {
           backgroundColor: theme.colors.dark[8],
           transition: "background-color .1s ease-in",
@@ -57,17 +57,16 @@ export function IssueCard({
       <Draggable key={issueKey} draggableId={issueKey} index={index}>
         {(provided) => (
           <Paper
-            ref={useMergedRef(provided.innerRef, ref)}
+            ref={provided.innerRef}
             {...provided.draggableProps}
             {...provided.dragHandleProps}
             onClick={() => setOpened(true)}
-            sx={{ position: "relative" }}
           >
-            <DeleteButton mounted={hovered} issueKey={issueKey} />
+            {/* <DeleteButton mounted={hovered} issueKey={issueKey} /> */}
             <Grid
               columns={100}
-              p={3}
-              sx={{
+              p={10}
+              style={{
                 borderRadius: theme.radius.sm,
                 margin: 0,
                 boxShadow: theme.shadows.xs,
@@ -77,7 +76,7 @@ export function IssueCard({
             >
               <Grid.Col
                 span={8}
-                sx={{
+                style={{
                   display: "flex",
                   flexDirection: "column",
                   justifyContent: "center",
@@ -88,14 +87,14 @@ export function IssueCard({
                 </Center>
               </Grid.Col>
               <Grid.Col span={74}>
-                <Stack spacing={0}>
-                  <Group spacing={2}>
+                <Stack gap={0}>
+                  <Group gap={2}>
                     <Text
                       size="sm"
                       mr={5}
-                      color="blue"
+                      c="blue"
                       td={status === StatusType.DONE ? "line-through" : "none"}
-                      sx={{
+                      style={{
                         ":hover": {
                           textDecoration: "underline",
                           cursor: "pointer",
@@ -104,24 +103,11 @@ export function IssueCard({
                     >
                       {issueKey}
                     </Text>
-                    {epic.issueKey && (
-                      <Badge mr={5} color="violet">
-                        {epic.summary}
-                      </Badge>
-                    )}
-                    {labels?.length !== 0 &&
-                      labels.map((label) => (
-                        <Badge
-                          mr={2}
-                          key={`${issueKey}-${label}`}
-                          color="yellow"
-                        >
-                          {label}
-                        </Badge>
-                      ))}
+                    {epic.issueKey && (<IssueEpicBadge issueKey={issueKey} epic={epic} />)}
+                    {labels && labels.map((label) => (<IssueLabelBadge key={`${issueKey}-${label}`} label={label} />))}
                   </Group>
                   <Text size="lg">{summary}</Text>
-                  <Group align="center" spacing="sm">
+                  <Group align="center" gap="sm">
                     <Text size="sm">{type}</Text>
                     <Text size="sm">•</Text>
                     <Text size="sm">{status}</Text>
@@ -130,7 +116,7 @@ export function IssueCard({
               </Grid.Col>
               <Grid.Col
                 span={8}
-                sx={{
+                style={{
                   display: "flex",
                   flexDirection: "column",
                   justifyContent: "center",
@@ -163,7 +149,7 @@ export function IssueCard({
                 </Tooltip>
               </Grid.Col>
               <Grid.Col span={3}>
-                <Box sx={{ alignSelf: "flex-start" }}>
+                <Box style={{ alignSelf: "flex-start" }}>
                   {storyPointsEstimate &&
                     <StoryPointsBadge statusType={status as StatusType} storyPointsEstimate={storyPointsEstimate} />}
                 </Box>
@@ -179,9 +165,10 @@ export function IssueCard({
           queryClient.invalidateQueries({ queryKey: ["issues"] })
         }}
         size="90vw"
-        overflow="outside"
-        overlayOpacity={0.55}
-        overlayBlur={3}
+        overlayProps={{
+          opacity: 0.55,
+          blur: 3,
+        }}
         withCloseButton={false}
       >
         <DetailView
diff --git a/src/components/BacklogView/Issue/IssueIcon.tsx b/src/components/BacklogView/Issue/IssueIcon.tsx
index 9440937f..169665e3 100644
--- a/src/components/BacklogView/Issue/IssueIcon.tsx
+++ b/src/components/BacklogView/Issue/IssueIcon.tsx
@@ -6,6 +6,7 @@ import {
   IconBolt,
   IconEdit,
 } from "@tabler/icons"
+import { ReactElement } from "react";
 
 export function IssueIcon({ type }: { type: string }) {
   const stringToColor = (value: string) => {
@@ -17,7 +18,7 @@ export function IssueIcon({ type }: { type: string }) {
     return `hsl(${hash % 360}, 85%, 35%)`
   }
 
-  let icon: JSX.Element
+  let icon: ReactElement
   let iconGradient1: string
   let iconGradient2: string
   switch (type) {
diff --git a/src/components/BacklogView/IssuesWrapper/DraggableIssuesWrapper.tsx b/src/components/BacklogView/IssuesWrapper/DraggableIssuesWrapper.tsx
index 083b50bf..0e209e05 100644
--- a/src/components/BacklogView/IssuesWrapper/DraggableIssuesWrapper.tsx
+++ b/src/components/BacklogView/IssuesWrapper/DraggableIssuesWrapper.tsx
@@ -17,7 +17,7 @@ export function DraggableIssuesWrapper({
           <Stack
             {...provided.droppableProps}
             ref={provided.innerRef}
-            spacing="sm"
+            gap="sm"
           >
             {issues.map((issue: Issue, index) => (
               <IssueCard {...issue} key={issue.issueKey} index={index} />
@@ -27,7 +27,7 @@ export function DraggableIssuesWrapper({
           </Stack>
         ) : (
           <Center
-            sx={(theme) => ({
+            style={(theme) => ({
               borderStyle: "dotted",
               borderColor: "lightgray",
               height: "6em",
@@ -36,7 +36,7 @@ export function DraggableIssuesWrapper({
             {...provided.droppableProps}
             ref={provided.innerRef}
           >
-            <Text align="center">Drop Here</Text>
+            <Text style={{ align: "center" }}>Drop Here</Text>
             {/* TODO: {provided.placeholder} has been removed so not to make the text move on hover
             but react beautiful dnd doesn't like that, we should find a better solution */}
           </Center>
diff --git a/src/components/BacklogView/IssuesWrapper/SprintsPanel.tsx b/src/components/BacklogView/IssuesWrapper/SprintsPanel.tsx
index 83f34a65..d0b9cdd5 100644
--- a/src/components/BacklogView/IssuesWrapper/SprintsPanel.tsx
+++ b/src/components/BacklogView/IssuesWrapper/SprintsPanel.tsx
@@ -9,12 +9,15 @@ import {
 import { DraggableIssuesWrapper } from "./DraggableIssuesWrapper"
 import {StatusType} from "../../../../types/status";
 import {StoryPointsBadge} from "../../common/StoryPoints/StoryPointsBadge";
+import {useColorScheme} from "../../../common/color-scheme";
 
 export function SprintsPanel({
   sprintsWithIssues,
 }: {
   sprintsWithIssues: { issues: Issue[]; sprint: Sprint }[]
 }) {
+  const colorScheme = useColorScheme()
+
   return (
     <Accordion
       variant="separated"
@@ -22,9 +25,9 @@ export function SprintsPanel({
       chevron={<IconChevronRight />}
       chevronPosition="left"
       multiple
-      styles={(theme) => ({
+      style={(theme) => ({
         chevron: {
-          "&[data-rotate]": {
+          "&[dataRotate]": {
             transform: "rotate(90deg)",
           },
         },
@@ -34,8 +37,7 @@ export function SprintsPanel({
         item: {
           border: "solid 1px lightgray",
           "&:hover": {
-            background:
-              theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white,
+            background: colorScheme === "dark" ? theme.colors.dark[8] : theme.white,
           },
         },
       })}
@@ -72,7 +74,7 @@ function SprintAccordionControl({
     <Accordion.Control>
       <Group>
         <Title size="h5">{sprint.name}</Title>
-        <Text color="dimmed">{pluralize(issues.length, "issue")}</Text>
+        <Text c="dimmed">{pluralize(issues.length, "issue")}</Text>
         {sprint.state === "active" && (
           <Badge px="6px" color="green" variant="filled" size="sm">
             active
@@ -93,7 +95,7 @@ function SprintAccordionControl({
           />
         </Flex>
       </Group>
-      <Text size="sm" color="gray.7">
+      <Text size="sm" c="gray.7">
         {sprint.startDate.toString() === "Invalid Date"
           ? "Dates not defined"
           : sprint.startDate.toString()}
diff --git a/src/components/BacklogView/helpers/draggingHelpers.ts b/src/components/BacklogView/helpers/draggingHelpers.ts
index e303751e..f63d6262 100644
--- a/src/components/BacklogView/helpers/draggingHelpers.ts
+++ b/src/components/BacklogView/helpers/draggingHelpers.ts
@@ -1,4 +1,4 @@
-import { DropResult } from "react-beautiful-dnd"
+import { DropResult } from "@hello-pangea/dnd"
 import { Issue, Sprint } from "types"
 
 export const onDragEnd = ({
diff --git a/src/components/CreateIssue/CreateIssueModal.tsx b/src/components/CreateIssue/CreateIssueModal.tsx
index 204748ab..696d68db 100644
--- a/src/components/CreateIssue/CreateIssueModal.tsx
+++ b/src/components/CreateIssue/CreateIssueModal.tsx
@@ -23,7 +23,7 @@ import {
   IssueTypeSelect,
   StatusSelect,
   SummaryInput,
-  DiscriptionInput,
+  DescriptionInput,
   AssigneeSelect,
   PrioritySelect,
   SprintSelect,
@@ -33,7 +33,7 @@ import {
   StartDatePicker,
   DueDatePicker,
   LabelsSelect,
-  AttachementFileInput,
+  AttachmentFileInput,
 } from "./Fields"
 
 import {
@@ -43,6 +43,7 @@ import {
   getIssueTypes,
   getIssueTypesWithFieldsMap,
 } from "./queryFunctions"
+import { useColorScheme } from "../../common/color-scheme";
 
 export function CreateIssueModal({
   opened,
@@ -53,6 +54,7 @@ export function CreateIssueModal({
 }) {
   const queryClient = useQueryClient()
   const theme = useMantineTheme()
+  const colorScheme = useColorScheme()
   const projects = useCanvasStore((state) => state.projects)
   const selectedProject = useCanvasStore((state) => state.selectedProject)
 
@@ -129,32 +131,29 @@ export function CreateIssueModal({
       opened={opened}
       onClose={() => setOpened(false)}
       title="Create Issue"
-      overflow="outside"
       size="70vw"
-      overlayColor={
-        theme.colorScheme === "dark"
-          ? theme.colors.dark[9]
-          : theme.colors.gray[2]
-      }
-      overlayOpacity={0.55}
-      overlayBlur={3}
+      overlayProps={{
+        color: colorScheme === "dark" ? theme.colors.dark[9] : theme.colors.gray[2],
+        opacity: 0.55,
+        blur: 5,
+      }}
     >
       <ColorSchemeToggle
         size="34px"
-        sx={{
+        style={{
           position: "absolute",
           top: 19,
           right: 50,
         }}
       />
-      <ScrollArea.Autosize maxHeight="70vh">
+      <ScrollArea.Autosize style={{ maxHeight: "70vh" }}>
         <form
           onSubmit={form.onSubmit((issue, event) => {
-            event.preventDefault()
+            event?.preventDefault()
             mutation.mutate(issue)
           })}
         >
-          <Stack spacing="md" mr="sm">
+          <Stack gap="md" mr="sm">
             <ProjectSelect
               form={form}
               projects={projects}
@@ -172,7 +171,7 @@ export function CreateIssueModal({
               isLoading={isLoading}
             />
             <SummaryInput form={form} />
-            <DiscriptionInput form={form} />
+            <DescriptionInput form={form} />
             <AssigneeSelect
               form={form}
               assignableUsers={assignableUsers}
@@ -216,8 +215,8 @@ export function CreateIssueModal({
               issueTypesWithFieldsMap={issueTypesWithFieldsMap}
             />
             <LabelsSelect form={form} />
-            <AttachementFileInput form={form} />
-            <Group position="right">
+            <AttachmentFileInput form={form} />
+            <Group justify="right">
               <Button
                 variant="light"
                 color="gray"
diff --git a/src/components/CreateIssue/CustomDatePicker.tsx b/src/components/CreateIssue/CustomDatePicker.tsx
deleted file mode 100644
index 47b6d1d5..00000000
--- a/src/components/CreateIssue/CustomDatePicker.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { DatePicker } from "@mantine/dates"
-import { useState } from "react"
-
-export function CustomDatePicker() {
-  const [pickedDate, setPickedDate] = useState(new Date())
-
-  const handleChange = (newValue: Date | null) => {
-    setPickedDate(newValue || pickedDate)
-  }
-
-  return <DatePicker value={pickedDate} onChange={handleChange} />
-}
diff --git a/src/components/CreateIssue/Fields/AssigneeSelect.tsx b/src/components/CreateIssue/Fields/AssigneeSelect.tsx
index 2a12b6f7..615f6096 100644
--- a/src/components/CreateIssue/Fields/AssigneeSelect.tsx
+++ b/src/components/CreateIssue/Fields/AssigneeSelect.tsx
@@ -1,7 +1,7 @@
-import { Select } from "@mantine/core"
 import { UseFormReturnType } from "@mantine/form"
 import { Issue, User } from "types"
 import { SelectItem } from "../SelectItem"
+import { CustomItemSelect } from "../../common/CustomItemSelect";
 
 export function AssigneeSelect({
   form,
@@ -13,23 +13,22 @@ export function AssigneeSelect({
   isLoading: boolean
 }) {
   return (
-    <Select
+    <CustomItemSelect
       label="Assignee"
       placeholder="Choose assignee"
-      nothingFound="Please select a project first"
-      itemComponent={SelectItem}
-      data={
+      nothingFoundMessage="Please select a project first"
+      clearable
+      searchable
+      options={
         !isLoading && assignableUsers
           ? assignableUsers.map((assignableUser) => ({
-              image: assignableUser.avatarUrls["24x24"],
-              value: assignableUser.id,
-              label: assignableUser.displayName,
-            }))
+            image: assignableUser.avatarUrls["24x24"],
+            value: assignableUser.id,
+            label: assignableUser.displayName,
+          }))
           : []
       }
-      clearable
-      searchable
-      withinPortal
+      ItemComponent={SelectItem}
       {...form.getInputProps("assignee")}
       value={ form.getInputProps("assignee").value?.id }
       onChange={(value) => {
diff --git a/src/components/CreateIssue/Fields/AttachementFileInput.tsx b/src/components/CreateIssue/Fields/AttachmentFileInput.tsx
similarity index 89%
rename from src/components/CreateIssue/Fields/AttachementFileInput.tsx
rename to src/components/CreateIssue/Fields/AttachmentFileInput.tsx
index 89518701..c7972233 100644
--- a/src/components/CreateIssue/Fields/AttachementFileInput.tsx
+++ b/src/components/CreateIssue/Fields/AttachmentFileInput.tsx
@@ -3,7 +3,7 @@ import { UseFormReturnType } from "@mantine/form"
 import { IconFileUpload } from "@tabler/icons"
 import { Issue } from "types"
 
-export function AttachementFileInput({
+export function AttachmentFileInput({
   form,
 }: {
   form: UseFormReturnType<Issue>
@@ -17,7 +17,7 @@ export function AttachementFileInput({
     <FileInput
       label={<Text>{label}</Text>}
       placeholder="Upload Files"
-      icon={<IconFileUpload />}
+      leftSection={<IconFileUpload />}
       multiple
       clearable
       {...form.getInputProps("attachment")}
diff --git a/src/components/CreateIssue/Fields/DescriptionInput.tsx b/src/components/CreateIssue/Fields/DescriptionInput.tsx
index 461ee643..f5969404 100644
--- a/src/components/CreateIssue/Fields/DescriptionInput.tsx
+++ b/src/components/CreateIssue/Fields/DescriptionInput.tsx
@@ -2,7 +2,7 @@ import { Textarea } from "@mantine/core"
 import { UseFormReturnType } from "@mantine/form"
 import { Issue } from "types"
 
-export function DiscriptionInput({ form }: { form: UseFormReturnType<Issue> }) {
+export function DescriptionInput({ form }: { form: UseFormReturnType<Issue> }) {
   return (
     <Textarea
       label="Description"
diff --git a/src/components/CreateIssue/Fields/DueDatePicker.tsx b/src/components/CreateIssue/Fields/DueDatePicker.tsx
index bccac2ec..0fe5c8f6 100644
--- a/src/components/CreateIssue/Fields/DueDatePicker.tsx
+++ b/src/components/CreateIssue/Fields/DueDatePicker.tsx
@@ -1,5 +1,5 @@
 import { Tooltip, Box } from "@mantine/core"
-import { DatePicker } from "@mantine/dates"
+import { DatePickerInput } from "@mantine/dates"
 import { UseFormReturnType } from "@mantine/form"
 import { Issue } from "types"
 
@@ -25,17 +25,16 @@ export function DueDatePicker({
       }
       position="top-start"
       events={{
-        hover: true && !!isDisabled,
-        focus: false && !!isDisabled,
-        touch: false && !!isDisabled,
+        hover: isDisabled ?? false,
+        focus: false,
+        touch: false,
       }}
     >
       <Box>
-        <DatePicker
+        <DatePickerInput
           label="Due Date"
           placeholder="Pick due date"
           minDate={form.getInputProps("startDate").value}
-          withinPortal
           clearable
           disabled={isDisabled}
           {...form.getInputProps("dueDate")}
diff --git a/src/components/CreateIssue/Fields/EpicSelect.tsx b/src/components/CreateIssue/Fields/EpicSelect.tsx
index 196149e3..370a183c 100644
--- a/src/components/CreateIssue/Fields/EpicSelect.tsx
+++ b/src/components/CreateIssue/Fields/EpicSelect.tsx
@@ -42,23 +42,23 @@ export function EpicSelect({
       }
       position="top-start"
       events={{
-        hover: true && !!isDisabled,
-        focus: false && !!isDisabled,
-        touch: false && !!isDisabled,
+        hover: isDisabled ?? false,
+        focus: false,
+        touch: false,
       }}
     >
       <Box>
         <Select
           label="Epic"
           placeholder="Choose epic"
-          nothingFound={
+          nothingFoundMessage={
             epics && epics.length > 0
               ? "Please select an issue type first"
               : "No epics found"
           }
           disabled={isDisabled}
           data={
-            !isLoading && epics && epics instanceof Array
+            !isLoading && epics
               ? epics.map((epic) => ({
                   value: epic.issueKey,
                   label: epic.summary,
@@ -67,7 +67,6 @@ export function EpicSelect({
           }
           searchable
           clearable
-          withinPortal
           {...form.getInputProps("epic.issueKey")}
         />
       </Box>
diff --git a/src/components/CreateIssue/Fields/IssueTypeSelect.tsx b/src/components/CreateIssue/Fields/IssueTypeSelect.tsx
index 190a78fa..dd28ff68 100644
--- a/src/components/CreateIssue/Fields/IssueTypeSelect.tsx
+++ b/src/components/CreateIssue/Fields/IssueTypeSelect.tsx
@@ -15,18 +15,17 @@ export function IssueTypeSelect({
     <Select
       label="Issue Type"
       placeholder="Choose issue type"
-      nothingFound="Please select a project first"
+      nothingFoundMessage="Please select a project first"
       data={
-        !isLoading && issueTypes && issueTypes instanceof Array
+        !isLoading && issueTypes
           ? issueTypes
               .filter((issueType) => issueType.name !== "Subtask")
               .map((issueType) => ({
                 value: issueType.id,
-                label: issueType.name,
+                label: issueType.name ?? '*unknown*',
               }))
           : []
       }
-      withinPortal
       searchable
       required
       {...form.getInputProps("type")}
diff --git a/src/components/CreateIssue/Fields/LabelsSelect.tsx b/src/components/CreateIssue/Fields/LabelsSelect.tsx
index cc88052e..58324c5a 100644
--- a/src/components/CreateIssue/Fields/LabelsSelect.tsx
+++ b/src/components/CreateIssue/Fields/LabelsSelect.tsx
@@ -14,11 +14,10 @@ export function LabelsSelect({ form }: { form: UseFormReturnType<Issue> }) {
     <MultiSelect
       label="Labels"
       placeholder="Choose labels"
-      nothingFound="No Options"
+      nothingFoundMessage="No Options"
       data={labels ?? []}
       searchable
       clearable
-      withinPortal
       {...form.getInputProps("labels")}
     />
   )
diff --git a/src/components/CreateIssue/Fields/PrioritySelect.tsx b/src/components/CreateIssue/Fields/PrioritySelect.tsx
index ce288a83..17549c48 100644
--- a/src/components/CreateIssue/Fields/PrioritySelect.tsx
+++ b/src/components/CreateIssue/Fields/PrioritySelect.tsx
@@ -1,9 +1,10 @@
-import { Box, Select, Tooltip } from "@mantine/core"
+import { Box, Tooltip } from "@mantine/core"
 import { UseFormReturnType } from "@mantine/form"
 import { useQuery } from "@tanstack/react-query"
 import { Issue } from "types"
 import { getPriorities } from "../queryFunctions"
 import { SelectItem } from "../SelectItem"
+import { CustomItemSelect } from "../../common/CustomItemSelect";
 
 export function PrioritySelect({
   form,
@@ -35,30 +36,29 @@ export function PrioritySelect({
       }
       position="top-start"
       events={{
-        hover: true && !!isDisabled,
-        focus: false && !!isDisabled,
-        touch: false && !!isDisabled,
+        hover: isDisabled ?? false,
+        focus: false,
+        touch: false,
       }}
     >
       <Box>
-        <Select
+        <CustomItemSelect
           label="Priority"
           placeholder="Choose priority"
-          nothingFound="Please select an issue type first"
-          itemComponent={SelectItem}
-          disabled={isDisabled}
-          data={
-            !isLoading && priorities && priorities instanceof Array
+          nothingFoundMessage="Please select an issue type first"
+          clearable
+          searchable
+          options={
+            !isLoading && priorities
               ? priorities.map((priority) => ({
-                  image: priority.iconUrl,
-                  value: priority.id,
-                  label: priority.name,
-                }))
+                image: priority.iconUrl,
+                value: priority.id,
+                label: priority.name,
+              }))
               : []
           }
-          searchable
-          withinPortal
-          clearable
+          ItemComponent={SelectItem}
+          inputBaseProps={{ disabled: isDisabled }}
           {...form.getInputProps("priority.id")}
         />
       </Box>
diff --git a/src/components/CreateIssue/Fields/ProjectSelect.tsx b/src/components/CreateIssue/Fields/ProjectSelect.tsx
index b9e7328a..e964979d 100644
--- a/src/components/CreateIssue/Fields/ProjectSelect.tsx
+++ b/src/components/CreateIssue/Fields/ProjectSelect.tsx
@@ -15,13 +15,12 @@ export function ProjectSelect({
     <Select
       label="Project"
       placeholder="Choose project"
-      nothingFound="No Options"
+      nothingFoundMessage="No Options"
       data={projects.map((project) => ({
         value: project.id?.toString() || "",
         label: `${project.name} (${project.key})`,
       }))}
       searchable
-      withinPortal
       required
       {...form.getInputProps("projectId")}
       onChange={(value) => {
diff --git a/src/components/CreateIssue/Fields/ReporterSelect.tsx b/src/components/CreateIssue/Fields/ReporterSelect.tsx
index 443f70f0..71693651 100644
--- a/src/components/CreateIssue/Fields/ReporterSelect.tsx
+++ b/src/components/CreateIssue/Fields/ReporterSelect.tsx
@@ -1,7 +1,7 @@
-import { Select } from "@mantine/core"
 import { UseFormReturnType } from "@mantine/form"
 import { Issue, User } from "types"
 import { SelectItem } from "../SelectItem"
+import { CustomItemSelect } from "../../common/CustomItemSelect";
 
 export function ReporterSelect({
   form,
@@ -13,23 +13,22 @@ export function ReporterSelect({
   isLoading: boolean
 }) {
   return (
-    <Select
+    <CustomItemSelect
       label="Reporter"
       placeholder="Choose reporter"
-      nothingFound="Please select a project first"
-      itemComponent={SelectItem}
-      data={
+      nothingFoundMessage="Please select a project first"
+      searchable
+      options={
         !isLoading && assignableUsers
           ? assignableUsers.map((assignableUser) => ({
-              image: assignableUser.avatarUrls["24x24"],
-              value: assignableUser.id,
-              label: assignableUser.displayName,
-            }))
+            image: assignableUser.avatarUrls["24x24"],
+            value: assignableUser.id,
+            label: assignableUser.displayName,
+          }))
           : []
       }
-      required
-      searchable
-      withinPortal
+      ItemComponent={SelectItem}
+      inputBaseProps={{ required: true }}
       {...form.getInputProps("reporter")}
       value={ form.getInputProps("reporter").value?.id }
       onChange={(value) => {
diff --git a/src/components/CreateIssue/Fields/SprintSelect.tsx b/src/components/CreateIssue/Fields/SprintSelect.tsx
index 2fdfbe2d..d1e4bc92 100644
--- a/src/components/CreateIssue/Fields/SprintSelect.tsx
+++ b/src/components/CreateIssue/Fields/SprintSelect.tsx
@@ -47,19 +47,19 @@ export function SprintSelect({
       }
       position="top-start"
       events={{
-        hover: true && !!isDisabled,
-        focus: false && !!isDisabled,
-        touch: false && !!isDisabled,
+        hover: isDisabled ?? false,
+        focus: false,
+        touch: false,
       }}
     >
       <Box>
         <Select
           label="Sprint"
           placeholder="Choose sprint"
-          nothingFound="Please select an issue type first"
+          nothingFoundMessage="Please select an issue type first"
           disabled={isDisabled}
           data={
-            !isLoading && sprints && sprints instanceof Array
+            !isLoading && sprints
               ? sprints.map((sprint) => ({
                   value: sprint.id.toString(),
                   label: sprint.name,
@@ -68,7 +68,6 @@ export function SprintSelect({
           }
           searchable
           clearable
-          withinPortal
           {...form.getInputProps("sprint.id")}
         />
       </Box>
diff --git a/src/components/CreateIssue/Fields/StartDatePicker.tsx b/src/components/CreateIssue/Fields/StartDatePicker.tsx
index e510e85e..ef64d0d7 100644
--- a/src/components/CreateIssue/Fields/StartDatePicker.tsx
+++ b/src/components/CreateIssue/Fields/StartDatePicker.tsx
@@ -1,5 +1,5 @@
 import { Box, Tooltip } from "@mantine/core"
-import { DatePicker } from "@mantine/dates"
+import { DatePickerInput } from "@mantine/dates"
 import { UseFormReturnType } from "@mantine/form"
 import { Issue } from "types"
 
@@ -26,16 +26,15 @@ export function StartDatePicker({
       }
       position="top-start"
       events={{
-        hover: true && !!isDisabled,
-        focus: false && !!isDisabled,
-        touch: false && !!isDisabled,
+        hover: isDisabled ?? false,
+        focus: false,
+        touch: false,
       }}
     >
       <Box>
-        <DatePicker
+        <DatePickerInput
           label="Start Date"
           placeholder="Pick start date"
-          withinPortal
           clearable
           disabled={isDisabled}
           {...form.getInputProps("startDate")}
diff --git a/src/components/CreateIssue/Fields/StatusSelect.tsx b/src/components/CreateIssue/Fields/StatusSelect.tsx
index 01b3a9db..b8f3284d 100644
--- a/src/components/CreateIssue/Fields/StatusSelect.tsx
+++ b/src/components/CreateIssue/Fields/StatusSelect.tsx
@@ -15,15 +15,14 @@ export function StatusSelect({
     <Select
       label="Status"
       placeholder="Choose status"
-      withinPortal
       searchable
-      nothingFound={
+      nothingFoundMessage={
         form.getInputProps("type").value === ""
           ? "Please select an issue type first"
           : "No Options"
       }
       data={
-        !isLoading && issueTypes && issueTypes instanceof Array
+        !isLoading && issueTypes
           ? issueTypes
               .find(
                 (issueType) => issueType.id === form.getInputProps("type").value
diff --git a/src/components/CreateIssue/Fields/StoryPointsEstimateInput.tsx b/src/components/CreateIssue/Fields/StoryPointsEstimateInput.tsx
index b35aa0fe..a70a6c86 100644
--- a/src/components/CreateIssue/Fields/StoryPointsEstimateInput.tsx
+++ b/src/components/CreateIssue/Fields/StoryPointsEstimateInput.tsx
@@ -29,9 +29,9 @@ export function StoryPointsEstimateInput({
       }
       position="top-start"
       events={{
-        hover: true && !!isDisabled,
-        focus: false && !!isDisabled,
-        touch: false && !!isDisabled,
+        hover: isDisabled ?? false,
+        focus: false,
+        touch: false,
       }}
     >
       <Box>
diff --git a/src/components/CreateIssue/Fields/index.ts b/src/components/CreateIssue/Fields/index.ts
index 352b98b4..5f8872b6 100644
--- a/src/components/CreateIssue/Fields/index.ts
+++ b/src/components/CreateIssue/Fields/index.ts
@@ -1,5 +1,5 @@
 export * from "./AssigneeSelect"
-export * from "./AttachementFileInput"
+export * from "./AttachmentFileInput"
 export * from "./DescriptionInput"
 export * from "./DueDatePicker"
 export * from "./EpicSelect"
diff --git a/src/components/CreateIssue/RichText.tsx b/src/components/CreateIssue/RichText.tsx
deleted file mode 100644
index 4de3f787..00000000
--- a/src/components/CreateIssue/RichText.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Textarea } from "@mantine/core"
-
-export function RichText() {
-  return <Textarea label="Description" />
-}
diff --git a/src/components/CreateIssue/SelectItem.tsx b/src/components/CreateIssue/SelectItem.tsx
index 95bd67fe..54c1f745 100644
--- a/src/components/CreateIssue/SelectItem.tsx
+++ b/src/components/CreateIssue/SelectItem.tsx
@@ -1,7 +1,7 @@
 import { Avatar, Container, Group, Text } from "@mantine/core"
-import { forwardRef } from "react"
+import { forwardRef, ComponentPropsWithoutRef } from "react"
 
-interface ItemProps extends React.ComponentPropsWithoutRef<"div"> {
+interface ItemProps extends ComponentPropsWithoutRef<"div"> {
   image: string
   label: string
   value: string
@@ -10,7 +10,7 @@ interface ItemProps extends React.ComponentPropsWithoutRef<"div"> {
 export const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
   ({ image, label, value, ...others }: ItemProps, ref) => (
     <Container ref={ref} {...others}>
-      <Group noWrap>
+      <Group wrap="nowrap">
         <Avatar src={image} size="sm" radius="xl" ml={4} mr={4} />
         <Text size="sm">{label}</Text>
       </Group>
diff --git a/src/components/DetailView/Components/AddSubtask/AddSubtask.tsx b/src/components/DetailView/Components/AddSubtask/AddSubtask.tsx
index 2b216759..2dcf351f 100644
--- a/src/components/DetailView/Components/AddSubtask/AddSubtask.tsx
+++ b/src/components/DetailView/Components/AddSubtask/AddSubtask.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { Box, Button, Group, Loader, TextInput } from "@mantine/core"
 import { showNotification } from "@mantine/notifications"
 import { IconPlus } from "@tabler/icons"
@@ -26,7 +25,7 @@ export function AddSubtask({
     (issueType) => issueType?.subtask === true
   )
 
-  const createSubstask = createSubtaskMutation(
+  const createSubtask = createSubtaskMutation(
     issueKey,
     summary,
     projectId,
@@ -41,7 +40,7 @@ export function AddSubtask({
         w="100%"
         mr="sm"
         placeholder="Add Subtask"
-        sx={{ flex: 10 }}
+        style={{ flex: 10 }}
         onChange={(e) => setSummary(e.target.value)}
         value={summary}
       />
@@ -54,12 +53,12 @@ export function AddSubtask({
                   message: `The summary of an issue cannot be empty!`,
                   color: "red",
                 })
-              else createSubstask.mutate()
+              else createSubtask.mutate()
             }}
           />
         </Button>
       </Box>
-      {createSubstask.isLoading && <Loader size="sm" />}
+      {createSubtask.isLoading && <Loader size="sm" />}
     </Group>
   )
 }
diff --git a/src/components/DetailView/Components/AssigneeMenu/AssigneeMenu.tsx b/src/components/DetailView/Components/AssigneeMenu/AssigneeMenu.tsx
index 7ed0ee51..7c54f93e 100644
--- a/src/components/DetailView/Components/AssigneeMenu/AssigneeMenu.tsx
+++ b/src/components/DetailView/Components/AssigneeMenu/AssigneeMenu.tsx
@@ -1,53 +1,11 @@
 import {
-  Avatar,
-  createStyles,
   Group,
-  Menu,
-  ScrollArea,
   Text,
-  UnstyledButton,
 } from "@mantine/core"
-import { IconChevronDown } from "@tabler/icons"
-import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { useQueryClient } from "@tanstack/react-query"
 import { Issue } from "types"
-import { useState } from "react"
-import { useCanvasStore } from "../../../../lib/Store"
 import { editIssueMutation } from "./queries"
-import { getAssignableUsersByProject } from "./queryFunctions"
-
-const useStyles = createStyles(
-  (theme, { isOpened }: { isOpened: boolean }) => ({
-    control: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      borderRadius: theme.radius.md,
-      padding: "3px",
-      border: `1px solid ${
-        theme.colorScheme === "dark"
-          ? theme.colors.dark[6]
-          : theme.colors.gray[2]
-      }`,
-      transition: "background-color 150ms ease",
-      backgroundColor:
-        theme.colorScheme === "dark"
-          ? theme.colors.dark[isOpened ? 5 : 6]
-          : theme.white[isOpened ? 5 : 6],
-
-      "&:hover": {
-        backgroundColor:
-          theme.colorScheme === "dark"
-            ? theme.colors.dark[5]
-            : theme.colors.gray[0],
-      },
-    },
-
-    icon: {
-      transition: "transform 150ms ease",
-      transform: isOpened ? "rotate(180deg)" : "rotate(0deg)",
-    },
-  })
-)
+import { UserSelectMenu } from "../../../common/UserSelect/UserSelectMenu";
 
 export function AssigneeMenu({
   assignee,
@@ -56,83 +14,19 @@ export function AssigneeMenu({
   assignee: Issue["assignee"]
   issueKey: string
 }) {
-  const selectedProject = useCanvasStore((state) => state.selectedProject)
   const queryClient = useQueryClient()
-  const [opened, setOpened] = useState(false)
-  const { classes } = useStyles({ isOpened: opened })
-
-  const { data: assignableUsers } = useQuery({
-    queryKey: ["assignableUsers", selectedProject?.key],
-    queryFn: () => getAssignableUsersByProject(selectedProject?.key!),
-    enabled: !!assignee && !!selectedProject && !!selectedProject.key,
-  })
-
   const editIssue = editIssueMutation(queryClient, issueKey)
 
-  const displayedAssignees = assignableUsers ? (
-    assignableUsers.map((user) => (
-      <Menu.Item
-        icon={<Avatar src={user.avatarUrls["24x24"]} size="sm" radius="xl" />}
-        onClick={() =>
-          editIssue.mutate({ assignee: user } as Issue)
-        }
-        key={user.id}
-      >
-        {user.displayName}
-      </Menu.Item>
-    ))
-  ) : (
-    <Menu.Item>
-      <Text color="dimmed">None</Text>
-    </Menu.Item>
-  )
   return (
     <Group grow>
-      <Text fz="sm" color="dimmed">
+      <Text fz="sm" c="dimmed">
         Assignee
       </Text>
-      {displayedAssignees && assignableUsers ? (
-        <Menu onOpen={() => setOpened(true)} onClose={() => setOpened(false)}>
-          <Menu.Target>
-            <UnstyledButton className={classes.control}>
-              {assignee && assignee.displayName && assignee.avatarUrls ? (
-                <Group spacing="xs" position="apart">
-                  <Avatar
-                    src={assignee.avatarUrls["24x24"]}
-                    size="sm"
-                    radius="xl"
-                  />
-                  <Text size="sm">{assignee.displayName}</Text>
-                  <IconChevronDown
-                    size={18}
-                    stroke={1.5}
-                    className={classes.icon}
-                  />
-                </Group>
-              ) : (
-                <Group spacing="xs" position="apart">
-                  <Avatar size="sm" variant="outline" radius="xl" />
-                  <Text size="sm" color="dimmed">
-                    Unassigned
-                  </Text>
-                  <IconChevronDown
-                    size={18}
-                    stroke={1.5}
-                    className={classes.icon}
-                  />
-                </Group>
-              )}
-            </UnstyledButton>
-          </Menu.Target>
-          <Menu.Dropdown>
-            <ScrollArea style={{ height: 200 }} type="auto">
-              {displayedAssignees}
-            </ScrollArea>
-          </Menu.Dropdown>
-        </Menu>
-      ) : (
-        <Text color="dimmed">None</Text>
-      )}
+      <UserSelectMenu
+        value={assignee}
+        onChange={(selectedUser) => editIssue.mutate({ assignee: selectedUser } as Issue)}
+        placeholder="Unassigned"
+      />
     </Group>
   )
 }
diff --git a/src/components/DetailView/Components/Attachments/Attachments.tsx b/src/components/DetailView/Components/Attachments/Attachments.tsx
index 57455d14..07b8662a 100644
--- a/src/components/DetailView/Components/Attachments/Attachments.tsx
+++ b/src/components/DetailView/Components/Attachments/Attachments.tsx
@@ -64,9 +64,13 @@ export function Attachments(props: {
       deleteAttachmentMutationLocal.mutate({ attachmentId, resource })
   }
 
-  const performUpload = async (f: File): Promise<void> => {
+  const performUpload = async (file: File | null): Promise<void> => {
+    if (!file) {
+      return
+    }
+
     const form = new FormData()
-    form.append("file", f, f.name)
+    form.append("file", file, file.name)
     const issueIdOrKey = props.issueKey
     if (resource)
       addAttachmentMutationLocal.mutate({ issueIdOrKey, resource, form })
@@ -79,11 +83,11 @@ export function Attachments(props: {
 
   return (
     <>
-      <Group position="left" align="flex-start" spacing="xs">
-        <Text color="dimmed" mb="sm">
+      <Group justify="left" align="flex-start" gap="xs">
+        <Text c="dimmed" mb="sm">
           {label}
         </Text>
-        <Group position="center">
+        <Group justify="center">
           <FileButton onChange={performUpload} accept="*/*">
             {(properties) => (
               <Button
@@ -91,8 +95,7 @@ export function Attachments(props: {
                 variant="subtle"
                 color="dark"
                 radius="xs"
-                size="xs"
-                compact
+                size="compact-xs"
               >
                 <IconPlus />
               </Button>
@@ -104,7 +107,6 @@ export function Attachments(props: {
         {resource && (
           <Group>
             {props.attachments &&
-              props.attachments instanceof Array &&
               props.attachments.map((attachment: Attachment) => {
                 const fetchFile: Promise<Blob> = downloadAttachment(
                   attachment.id,
@@ -150,9 +152,11 @@ export function Attachments(props: {
                               <Card.Section>
                                 <Center>
                                   <LoadingOverlay
-                                    overlayOpacity={0.3}
-                                    overlayColor="#c5c5c5"
-                                    exitTransitionDuration={5000}
+                                    overlayProps={{
+                                      opacity: 0.3,
+                                      color: "#c5c5c5",
+                                    }}
+                                    transitionProps={{ exitDuration: 5000 }}
                                     visible={thumbnailsLoading}
                                   />
 
@@ -173,19 +177,19 @@ export function Attachments(props: {
                                         : null
                                     }
                                     alt={`${attachment.filename}`}
-                                    withPlaceholder
+                                    fallbackSrc="https://placehold.co/600x400?text=Placeholder"
                                   />
                                 </Center>
                               </Card.Section>
                               <Card.Section p="xs">
                                 <Box>
-                                  <Text size="xs" color="dimmed" truncate>
+                                  <Text size="xs" c="dimmed" truncate>
                                     {attachment.filename}
                                   </Text>
                                   <Text
                                     size="xs"
                                     fw={600}
-                                    color="dimmed"
+                                    c="dimmed"
                                     truncate
                                   >
                                     {new Intl.DateTimeFormat("en-GB", {
@@ -198,7 +202,7 @@ export function Attachments(props: {
                             </Flex>
                           </HoverCard.Target>
                           <HoverCard.Dropdown p={0}>
-                            <Group spacing={0}>
+                            <Group gap={0}>
                               <ActionIcon
                                 color="dark"
                                 size="lg"
diff --git a/src/components/DetailView/Components/Attachments/helpFunctions.ts b/src/components/DetailView/Components/Attachments/helpFunctions.ts
index 7ac6edcb..59944126 100644
--- a/src/components/DetailView/Components/Attachments/helpFunctions.ts
+++ b/src/components/DetailView/Components/Attachments/helpFunctions.ts
@@ -1,21 +1,21 @@
 import { Resource } from "types"
 
 export function getThumbnailUrl(
-  attachemntId: string,
+  attachmentId: string,
   resource: Resource
 ): string {
-  return `${resource.baseUrl}/attachment/thumbnail/${attachemntId}`
+  return `${resource.baseUrl}/attachment/thumbnail/${attachmentId}`
 }
 
 export const getDownloadUrl = (
-  attachemntId: string,
+  attachmentId: string,
   resource: Resource
-): string => `${resource.baseUrl}/attachment/content/${attachemntId}`
+): string => `${resource.baseUrl}/attachment/content/${attachmentId}`
 
 export const getDeleteUrl = (
-  attachemntId: string,
+  attachmentId: string,
   resource: Resource
-): string => `${resource.baseUrl}/attachment/${attachemntId}`
+): string => `${resource.baseUrl}/attachment/${attachmentId}`
 
 export const getUploadUrl = (
   issueIdOrKey: string,
diff --git a/src/components/DetailView/Components/Attachments/queryFunctions.ts b/src/components/DetailView/Components/Attachments/queryFunctions.ts
index 335cdb6f..98b11558 100644
--- a/src/components/DetailView/Components/Attachments/queryFunctions.ts
+++ b/src/components/DetailView/Components/Attachments/queryFunctions.ts
@@ -34,10 +34,10 @@ export const deleteAttachment = (
   }).then(() => {})
 
 export const downloadAttachment = (
-  attachemntId: string,
+  attachmentId: string,
   resource: Resource
 ): Promise<Blob> =>
-  fetch(getDownloadUrl(attachemntId, resource), {
+  fetch(getDownloadUrl(attachmentId, resource), {
     method: "GET",
     headers: {
       Accept: "application/json",
diff --git a/src/components/DetailView/Components/CommentSection/CommentSection.tsx b/src/components/DetailView/Components/CommentSection/CommentSection.tsx
index 2f7794a7..307edb7a 100644
--- a/src/components/DetailView/Components/CommentSection/CommentSection.tsx
+++ b/src/components/DetailView/Components/CommentSection/CommentSection.tsx
@@ -63,20 +63,20 @@ export function CommentSection({
   return (
     <Stack>
       <Group>
-        <Text color="dimmed">Comments</Text>
+        <Text c="dimmed">Comments</Text>
         {showLoader && <Loader size="xs" />}
       </Group>
       {!showEditableInputAdd ? (
         <Button
           variant="subtle"
           color="gray"
-          compact
+          size="compact-sm"
           radius="xs"
           display="flex"
           onClick={() => {
             setShowEditableInputAdd(true)
           }}
-          sx={{
+          style={{
             justifyContent: "left",
           }}
         >
@@ -120,15 +120,15 @@ export function CommentSection({
               <Avatar
                 src={commentBody.author.avatarUrls["24x24"]}
                 size="sm"
-                sx={{ flex: 1 }}
+                style={{ flex: 1 }}
               />
             </Box>
-            <Stack spacing={0} sx={{ flex: 15 }}>
+            <Stack gap={0} style={{ flex: 15 }}>
               <Group>
-                <Text fw={500} color="dimmed" fz="sm">
+                <Text fw={500} c="dimmed" fz="sm">
                   {commentBody.author.displayName}
                 </Text>
-                <Text color="dimmed" fz="xs">
+                <Text c="dimmed" fz="xs">
                   {new Intl.DateTimeFormat("en-GB", {
                     dateStyle: "medium",
                     timeStyle: "short",
@@ -139,10 +139,10 @@ export function CommentSection({
               editableComments[commentBody.id] === false ? (
                 <Box>
                   <Text fz="xs"> {commentBody.body}</Text>
-                  <Group position="left">
+                  <Group justify="left">
                     <Anchor
                       td="underline"
-                      color="dimmed"
+                      c="dimmed"
                       fz="xs"
                       onClick={() => {
                         setEditCommentInputText({
@@ -159,7 +159,7 @@ export function CommentSection({
                     </Anchor>
                     <Anchor
                       td="underline"
-                      color="dimmed"
+                      c="dimmed"
                       fz="xs"
                       onClick={() => {
                         deleteCommentMutationLocal.mutate({
diff --git a/src/components/DetailView/Components/DeleteIssue/DeleteIssue.tsx b/src/components/DetailView/Components/DeleteIssue/DeleteIssue.tsx
index 896afec7..1410d99a 100644
--- a/src/components/DetailView/Components/DeleteIssue/DeleteIssue.tsx
+++ b/src/components/DetailView/Components/DeleteIssue/DeleteIssue.tsx
@@ -1,7 +1,8 @@
 import { Button, Popover } from "@mantine/core"
 import { IconTrash } from "@tabler/icons"
-import {useState} from "react";
+import { useState } from "react";
 import { DeleteIssueAlert } from "./DeleteIssueAlert"
+import { useColorScheme } from "../../../../common/color-scheme";
 
 export function DeleteIssue({
   issueKey,
@@ -10,6 +11,7 @@ export function DeleteIssue({
   issueKey: string
   closeModal: () => void
 }) {
+  const colorScheme = useColorScheme()
   const [issuePopoverOpened, setIssuePopoverOpened] = useState(false)
 
   return (
@@ -22,7 +24,7 @@ export function DeleteIssue({
       opened={issuePopoverOpened}
     >
       <Popover.Target>
-        <Button color="red" rightIcon={<IconTrash size={16} />} onClick={(e) => {
+        <Button color="red" rightSection={<IconTrash size={16} />} onClick={(e) => {
           e.stopPropagation()
           setIssuePopoverOpened(!issuePopoverOpened)
         }}>
@@ -30,9 +32,8 @@ export function DeleteIssue({
         </Button>
       </Popover.Target>
       <Popover.Dropdown
-        sx={(theme) => ({
-          background:
-            theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
+        style={(theme) => ({
+          background: colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
         })}
       >
         <DeleteIssueAlert
diff --git a/src/components/DetailView/Components/Description.tsx b/src/components/DetailView/Components/Description.tsx
index 89380128..6a08de80 100644
--- a/src/components/DetailView/Components/Description.tsx
+++ b/src/components/DetailView/Components/Description.tsx
@@ -6,15 +6,15 @@ import { useState } from "react"
 import { editIssue } from "../helpers/queryFunctions"
 
 export function Description(props: { issueKey: string; description: string }) {
-  const [defaultdescription, setdefaultdescription] = useState(
+  const [defaultDescription, setDefaultDescription] = useState(
     props.description
   )
-  const [showDescriptionInput, setshowDescriptionInput] = useState(false)
+  const [showDescriptionInput, setShowDescriptionInput] = useState(false)
   const mutationDescription = useMutation({
     mutationFn: (issue: Issue) => editIssue(issue, props.issueKey),
     onError: () => {
       showNotification({
-        message: `An error occured while modifing the Description 😢`,
+        message: `An error occurred while modifing the Description 😢`,
         color: "red",
       })
     },
@@ -29,12 +29,12 @@ export function Description(props: { issueKey: string; description: string }) {
     <span>
       {showDescriptionInput ? (
         <Textarea
-          value={defaultdescription}
-          onChange={(e) => setdefaultdescription(e.target.value)}
+          value={defaultDescription}
+          onChange={(e) => setDefaultDescription(e.target.value)}
           onBlur={() => {
-            setshowDescriptionInput(false)
+            setShowDescriptionInput(false)
             mutationDescription.mutate({
-              description: defaultdescription,
+              description: defaultDescription,
             } as Issue)
           }}
           autosize
@@ -42,9 +42,9 @@ export function Description(props: { issueKey: string; description: string }) {
           mb="xl"
         />
       ) : (
-        <Text onClick={() => setshowDescriptionInput(true)} mb="xl">
-          {defaultdescription !== null && defaultdescription !== ""
-            ? defaultdescription
+        <Text onClick={() => setShowDescriptionInput(true)} mb="xl">
+          {defaultDescription !== null && defaultDescription !== ""
+            ? defaultDescription
             : "Add Description"}
         </Text>
       )}
diff --git a/src/components/DetailView/Components/EditableEpic/EditableEpic.tsx b/src/components/DetailView/Components/EditableEpic/EditableEpic.tsx
index a688605b..1a8f507d 100644
--- a/src/components/DetailView/Components/EditableEpic/EditableEpic.tsx
+++ b/src/components/DetailView/Components/EditableEpic/EditableEpic.tsx
@@ -1,4 +1,4 @@
-import { Group, Loader, Select, Text } from "@mantine/core"
+import { Box, Group, Loader, Text } from "@mantine/core"
 import { showNotification } from "@mantine/notifications"
 import { useMutation, useQuery } from "@tanstack/react-query"
 import { Issue } from "types"
@@ -7,6 +7,7 @@ import { editIssue } from "../../helpers/queryFunctions"
 import { IssueIcon } from "../../../BacklogView/Issue/IssueIcon"
 import { getEpicsByProject } from "./queryFunctions"
 import { SelectItem } from "./SelectItem"
+import { CustomItemSelect } from "../../../common/CustomItemSelect";
 
 export function EditableEpic({
   projectId,
@@ -27,7 +28,7 @@ export function EditableEpic({
   })
   const [selectedEpic, setSelectedEpic] = useState(epic.issueKey)
   const mutationEpic = useMutation({
-    mutationFn: (epicKey: string) => editIssue({ epic: { issueKey: epicKey } } as Issue, issueKey),
+    mutationFn: (epicKey: string | null) => editIssue({ epic: { issueKey: epicKey } } as Issue, issueKey),
     onError: () => {
       showNotification({
         message: `An error occurred while modifing the Epic 😢`,
@@ -47,37 +48,38 @@ export function EditableEpic({
       <IssueIcon type="Epic" />
       {mutationEpic.isLoading && <Loader size="sm" />}
       {showEpicInput ? (
-        <Select
-          placeholder=""
-          nothingFound="No Options"
-          data={
-            epics
-              ? epics.map((epicItem) => ({
+        <Box w="300px">
+          <CustomItemSelect
+            nothingFoundMessage="No Options"
+            options={
+              epics
+                ? epics.map((epicItem) => ({
                   value: epicItem.issueKey,
                   label: epicItem.summary,
                 }))
-              : []
-          }
-          searchable
-          clearable
-          itemComponent={SelectItem}
-          value={selectedEpic}
-          onChange={(value) => {
-            setSelectedEpic(value!)
-            mutationEpic.mutate(value!)
-            setShowEpicInput(false)
-          }}
-          w="300px"
-        />
+                : []
+            }
+            searchable
+            clearable
+            ItemComponent={SelectItem}
+            value={selectedEpic}
+            onChange={(value) => {
+              setSelectedEpic(value)
+              mutationEpic.mutate(value ?? null)
+              setShowEpicInput(false)
+            }}
+          />
+        </Box>
       ) : (
         <Group>
           <Text
             onClick={() => setShowEpicInput(true)}
-            sx={{
+            style={{
               ":hover": { textDecoration: "underline", cursor: "pointer" },
             }}
+            {...(!selectedEpic && { c: "dimmed" })}
           >
-            {selectedEpic || <Text color="dimmed">Add Epic</Text>}
+            {selectedEpic || "Add Epic"}
           </Text>
         </Group>
       )}
diff --git a/src/components/DetailView/Components/EditableEpic/SelectItem.tsx b/src/components/DetailView/Components/EditableEpic/SelectItem.tsx
index af7859cb..5969aaa4 100644
--- a/src/components/DetailView/Components/EditableEpic/SelectItem.tsx
+++ b/src/components/DetailView/Components/EditableEpic/SelectItem.tsx
@@ -1,25 +1,20 @@
-import { Group, Badge, Text } from "@mantine/core"
-import { forwardRef } from "react"
+import { Group, Badge } from "@mantine/core"
+import { forwardRef, ComponentPropsWithoutRef } from "react"
 import { IssueIcon } from "../../../BacklogView/Issue/IssueIcon"
 
-interface ItemProps extends React.ComponentPropsWithoutRef<"div"> {
-  image: string
+interface ItemProps extends ComponentPropsWithoutRef<"div"> {
   label: string
-  description: string
 }
 
 export const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
-  ({ label, description, ...others }: ItemProps, ref) => (
+  ({ label, ...others }: ItemProps, ref) => (
     <div ref={ref} {...others}>
-      <Group noWrap>
+      <Group wrap="nowrap">
         <IssueIcon type="Epic" />
         <div>
           <Badge size="sm" color="violet">
             {label}
           </Badge>
-          <Text size="xs" opacity={0.65}>
-            {description}
-          </Text>
         </div>
       </Group>
     </div>
diff --git a/src/components/DetailView/Components/IssueSprint.tsx b/src/components/DetailView/Components/IssueSprint.tsx
index eecdebed..5e5b4e1e 100644
--- a/src/components/DetailView/Components/IssueSprint.tsx
+++ b/src/components/DetailView/Components/IssueSprint.tsx
@@ -15,8 +15,8 @@ export function IssueSprint(props: {
   issueKey: string
 }) {
   const theme = useMantineTheme()
-  const [defaultsprint, setdefaultsprint] = useState(props.sprint || undefined)
-  const [showSprintInput, setshowSprintInput] = useState(false)
+  const [defaultSprint, setDefaultSprint] = useState(props.sprint || undefined)
+  const [showSprintInput, setShowSprintInput] = useState(false)
 
   const boardIds = useCanvasStore((state) => state.selectedProjectBoardIds)
   const currentBoardId = boardIds[0]
@@ -30,7 +30,7 @@ export function IssueSprint(props: {
     mutationFn: (issue: Issue) => editIssue(issue, props.issueKey),
     onError: () => {
       showNotification({
-        message: `An error occured while modifing the sprint 😢`,
+        message: `An error occurred while modifing the sprint 😢`,
         color: "red",
       })
     },
@@ -45,7 +45,7 @@ export function IssueSprint(props: {
     mutationFn: () => moveIssueToBacklog(props.issueKey),
     onError: () => {
       showNotification({
-        message: `An error occured while modifing the sprint 😢`,
+        message: `An error occurred while modifing the sprint 😢`,
         color: "red",
       })
     },
@@ -61,31 +61,31 @@ export function IssueSprint(props: {
     <span>
       {showSprintInput ? (
         <Select
-          nothingFound="No Options"
+          nothingFoundMessage="No Options"
           searchable
           clearable
           defaultValue={props.sprint ? props.sprint.name : ""}
           data={sprintNames}
           onBlur={() => {
-            setshowSprintInput(false)
-            if (defaultsprint)
+            setShowSprintInput(false)
+            if (defaultSprint)
               mutationSprint.mutate({
-                sprint: defaultsprint,
+                sprint: defaultSprint,
               } as Issue)
             else mutationBacklog.mutate()
           }}
           onChange={(value) => {
-            if (value === "") setdefaultsprint(undefined)
+            if (value === "") setDefaultSprint(undefined)
             else
-              setdefaultsprint(
+              setDefaultSprint(
                 sprints?.find((sprint) => sprint.name === value)!
               )
           }}
         />
       ) : (
         <Box
-          onClick={() => setshowSprintInput(true)}
-          sx={{
+          onClick={() => setShowSprintInput(true)}
+          style={{
             ":hover": {
               cursor: "pointer",
               boxShadow: theme.shadows.xs,
@@ -94,10 +94,10 @@ export function IssueSprint(props: {
             },
           }}
         >
-          {defaultsprint ? (
-            <Text>{defaultsprint.name}</Text>
+          {defaultSprint ? (
+            <Text>{defaultSprint.name}</Text>
           ) : (
-            <Text color="dimmed">None</Text>
+            <Text c="dimmed">None</Text>
           )}
         </Box>
       )}
diff --git a/src/components/DetailView/Components/IssueStatusMenu.module.css b/src/components/DetailView/Components/IssueStatusMenu.module.css
new file mode 100644
index 00000000..ceccb4b2
--- /dev/null
+++ b/src/components/DetailView/Components/IssueStatusMenu.module.css
@@ -0,0 +1,12 @@
+.root {
+    .icon {
+        transition: transform 150ms ease;
+        transform: rotate(0deg);
+    }
+
+    &[data-opened] {
+        .icon {
+            transform: rotate(180deg);
+        }
+    }
+}
diff --git a/src/components/DetailView/Components/IssueStatusMenu.tsx b/src/components/DetailView/Components/IssueStatusMenu.tsx
new file mode 100644
index 00000000..4f5f94cf
--- /dev/null
+++ b/src/components/DetailView/Components/IssueStatusMenu.tsx
@@ -0,0 +1,68 @@
+import { Box, Button, Menu } from "@mantine/core"
+import { useState } from "react"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { IconCaretDown } from "@tabler/icons";
+import { getIssueTypes, setStatus } from "../../CreateIssue/queryFunctions";
+import classes from "./IssueStatusMenu.module.css";
+
+export function IssueStatusMenu({
+  projectId,
+  type,
+  status,
+  issueKey,
+}: {
+  projectId: string
+  type: string
+  status: string
+  issueKey: string
+}) {
+  const [opened, setOpened] = useState(false)
+
+  const { data: issueTypes } = useQuery({
+    queryKey: ["issueTypes", projectId],
+    queryFn: () => getIssueTypes(projectId),
+    enabled: !!projectId,
+  })
+
+  const queryClient = useQueryClient()
+  const [defaultStatus, setDefaultStatus] = useState(status)
+  const statusMutation = useMutation({
+    mutationFn: (targetStatus: string) => setStatus(issueKey, targetStatus),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["issues"] })
+    },
+  })
+
+  return (
+    <Box className={classes.root} mod={{ opened }}>
+      <Menu
+        shadow="md"
+        onOpen={() => setOpened(true)}
+        onClose={() => setOpened(false)}
+      >
+        <Menu.Target>
+          <Button rightSection={<IconCaretDown className={classes.icon} />}>
+            {defaultStatus}
+          </Button>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          {issueTypes &&
+            issueTypes
+              .find((issueType) => issueType.name === type)
+              ?.statuses?.map((issueStatus) => (
+                <Menu.Item
+                  key={issueStatus.id}
+                  onClick={() => {
+                    statusMutation.mutate(issueStatus.name)
+                    setDefaultStatus(issueStatus.name)
+                  }}
+                >
+                  {issueStatus.name}
+                </Menu.Item>
+              ))}
+        </Menu.Dropdown>
+      </Menu>
+    </Box>
+  )
+}
diff --git a/src/components/DetailView/Components/IssueSummary.tsx b/src/components/DetailView/Components/IssueSummary.tsx
index 82f249b3..aea9272a 100644
--- a/src/components/DetailView/Components/IssueSummary.tsx
+++ b/src/components/DetailView/Components/IssueSummary.tsx
@@ -12,14 +12,14 @@ export function IssueSummary({
   summary: string
   issueKey: string
 }) {
-  const [defaultSummary, setdefaultSummary] = useState(summary)
-  const [showSummaryInput, setshowSummaryInput] = useState(false)
+  const [defaultSummary, setDefaultSummary] = useState(summary)
+  const [showSummaryInput, setShowSummaryInput] = useState(false)
 
   const mutationSummary = useMutation({
     mutationFn: (issue: Issue) => editIssue(issue, issueKey),
     onError: () => {
       showNotification({
-        message: `An error occured while modifing the summary 😢`,
+        message: `An error occurred while modifing the summary 😢`,
         color: "red",
       })
     },
@@ -31,38 +31,38 @@ export function IssueSummary({
         })
     },
   })
+
+  if (!showSummaryInput)
+    return (
+      <Text lineClamp={1} onClick={() => setShowSummaryInput(true)}>
+        {defaultSummary}
+      </Text>
+    )
+
   return (
-    <Text>
-      {showSummaryInput ? (
-        <Textarea
-          value={defaultSummary}
-          onChange={(e) => setdefaultSummary(e.target.value)}
-          onBlur={() => {
-            if (defaultSummary === "")
-              showNotification({
-                message: `The summary of an issue cannot be empty`,
-                color: "red",
-              })
-            else {
-              setshowSummaryInput(false)
-              mutationSummary.mutate({
-                summary: defaultSummary,
-              } as Issue)
-            }
-          }}
-          autosize
-          sx={{
-            textarea: {
-              fontSize: "inherit",
-              fontWeight: "inherit",
-            },
-          }}
-        />
-      ) : (
-        <Text lineClamp={1} onClick={() => setshowSummaryInput(true)}>
-          {defaultSummary}
-        </Text>
-      )}
-    </Text>
+    <Textarea
+      value={defaultSummary}
+      onChange={(e) => setDefaultSummary(e.target.value)}
+      onBlur={() => {
+        if (defaultSummary === "")
+          showNotification({
+            message: `The summary of an issue cannot be empty`,
+            color: "red",
+          })
+        else {
+          setShowSummaryInput(false)
+          mutationSummary.mutate({
+            summary: defaultSummary,
+          } as Issue)
+        }
+      }}
+      autosize
+      style={{
+        textarea: {
+          fontSize: "inherit",
+          fontWeight: "inherit",
+        },
+      }}
+    />
   )
 }
diff --git a/src/components/DetailView/Components/Labels.tsx b/src/components/DetailView/Components/Labels.tsx
index 59210046..c7150e50 100644
--- a/src/components/DetailView/Components/Labels.tsx
+++ b/src/components/DetailView/Components/Labels.tsx
@@ -2,7 +2,6 @@ import {
   MultiSelect,
   Text,
   Group,
-  Badge,
   Box,
   useMantineTheme,
 } from "@mantine/core"
@@ -12,6 +11,7 @@ import { Issue } from "types"
 import { useState } from "react"
 import { getLabels } from "../../CreateIssue/queryFunctions"
 import { editIssue } from "../helpers/queryFunctions"
+import { IssueLabelBadge } from "../../common/IssueLabelBadge";
 
 export function Labels({
   labels,
@@ -33,7 +33,7 @@ export function Labels({
     mutationFn: (issue: Issue) => editIssue(issue, issueKey),
     onError: () => {
       showNotification({
-        message: `An error occured while modifing the Labels 😢`,
+        message: `An error occurred while modifing the Labels 😢`,
         color: "red",
       })
     },
@@ -47,7 +47,7 @@ export function Labels({
   })
   return (
     <Box
-      sx={{
+      style={{
         ":hover": {
           cursor: "pointer",
           boxShadow: theme.shadows.xs,
@@ -59,7 +59,7 @@ export function Labels({
       {showLabelsInput ? (
         <MultiSelect
           placeholder="Choose labels"
-          nothingFound="No Options"
+          nothingFoundMessage="No Options"
           searchable
           clearable
           defaultValue={defaultLabels}
@@ -75,15 +75,11 @@ export function Labels({
       ) : (
         <Box onClick={() => setShowLabelsInput(true)}>
           {defaultLabels.length !== 0 ? (
-            <Group spacing={3}>
-              {defaultLabels.map((label) => (
-                <Badge key={label} color="yellow">
-                  {label}
-                </Badge>
-              ))}
+            <Group gap={3}>
+              {defaultLabels.map((label) => (<IssueLabelBadge key={`${issueKey}-${label}`} label={label} />))}
             </Group>
           ) : (
-            <Text color="dimmed">None</Text>
+            <Text c="dimmed">None</Text>
           )}
         </Box>
       )}
diff --git a/src/components/DetailView/Components/ReporterMenu.tsx b/src/components/DetailView/Components/ReporterMenu.tsx
index 962b068f..68f014dc 100644
--- a/src/components/DetailView/Components/ReporterMenu.tsx
+++ b/src/components/DetailView/Components/ReporterMenu.tsx
@@ -1,74 +1,20 @@
-import {
-  Text,
-  Group,
-  Menu,
-  Avatar,
-  UnstyledButton,
-  ScrollArea,
-  createStyles,
-} from "@mantine/core"
+import { Text, Group } from "@mantine/core"
 import { showNotification } from "@mantine/notifications"
-import { IconChevronDown } from "@tabler/icons"
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import { Issue } from "types"
-import { useState } from "react"
-import { useCanvasStore } from "../../../lib/Store"
-import {
-  getAssignableUsersByProject,
-  getIssueReporter,
-} from "../../CreateIssue/queryFunctions"
+import { getIssueReporter } from "../../CreateIssue/queryFunctions"
 import { editIssue } from "../helpers/queryFunctions"
 
-const useStyles = createStyles(
-  (theme, { isOpened }: { isOpened: boolean }) => ({
-    control: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      borderRadius: theme.radius.md,
-      padding: "3px",
-      border: `1px solid ${
-        theme.colorScheme === "dark"
-          ? theme.colors.dark[6]
-          : theme.colors.gray[2]
-      }`,
-      transition: "background-color 150ms ease",
-      backgroundColor:
-        theme.colorScheme === "dark"
-          ? theme.colors.dark[isOpened ? 5 : 6]
-          : theme.white[isOpened ? 5 : 6],
-
-      "&:hover": {
-        backgroundColor:
-          theme.colorScheme === "dark"
-            ? theme.colors.dark[5]
-            : theme.colors.gray[0],
-      },
-    },
-
-    icon: {
-      transition: "transform 150ms ease",
-      transform: isOpened ? "rotate(180deg)" : "rotate(0deg)",
-    },
-  })
-)
+import { UserSelectMenu } from "../../common/UserSelect/UserSelectMenu";
 
 export function ReporterMenu({ issueKey }: { issueKey: string }) {
-  const selectedProject = useCanvasStore((state) => state.selectedProject)
   const queryClient = useQueryClient()
-  const [opened, setOpened] = useState(false)
-  const { classes } = useStyles({ isOpened: opened })
 
   const { data: issueReporter } = useQuery({
     queryKey: ["issueReporter", issueKey],
     queryFn: () => getIssueReporter(issueKey),
     enabled: !!issueKey,
   })
-  const { data: assignableUsers } = useQuery({
-    queryKey: ["assignableUsers", selectedProject?.key],
-    queryFn: () => getAssignableUsersByProject(selectedProject?.key!),
-    enabled: !!issueReporter && !!selectedProject && !!selectedProject.key,
-  })
 
   const mutation = useMutation({
     mutationFn: (issue: Issue) => editIssue(issue, issueKey),
@@ -87,51 +33,14 @@ export function ReporterMenu({ issueKey }: { issueKey: string }) {
     },
   })
 
-  const displayedReporters = assignableUsers ? (
-    assignableUsers.map((user) => (
-      <Menu.Item
-        icon={<Avatar src={user.avatarUrls["24x24"]} size="sm" radius="xl" />}
-        onClick={() => mutation.mutate({ reporter: user } as Issue)}
-        key={user.id}
-      >
-        {user.displayName}
-      </Menu.Item>
-    ))
-  ) : (
-    <Menu.Item>
-      <Text color="dimmed">None</Text>
-    </Menu.Item>
-  )
   return (
     <Group grow>
-      <Text fz="sm" color="dimmed">
-        Reporter
-      </Text>
+      <Text fz="sm" c="dimmed">Reporter</Text>
       {issueReporter && issueReporter.displayName && issueReporter.avatarUrls && (
-        <Menu onOpen={() => setOpened(true)} onClose={() => setOpened(false)}>
-          <Menu.Target>
-            <UnstyledButton className={classes.control}>
-              <Group spacing="xs" position="apart">
-                <Avatar
-                  src={issueReporter.avatarUrls["24x24"]}
-                  size="sm"
-                  radius="xl"
-                />
-                <Text size="sm">{issueReporter.displayName}</Text>
-                <IconChevronDown
-                  size={18}
-                  stroke={1.5}
-                  className={classes.icon}
-                />
-              </Group>
-            </UnstyledButton>
-          </Menu.Target>
-          <Menu.Dropdown>
-            <ScrollArea style={{ height: 200 }} type="auto">
-              {displayedReporters}
-            </ScrollArea>
-          </Menu.Dropdown>
-        </Menu>
+        <UserSelectMenu
+          value={issueReporter}
+          onChange={(selectedUser) => mutation.mutate({ reporter: selectedUser } as Issue)}
+        />
       )}
     </Group>
   )
diff --git a/src/components/DetailView/Components/StoryPointsEstimateMenu.tsx b/src/components/DetailView/Components/StoryPointsEstimateMenu.tsx
index 2baa89d7..03da7881 100644
--- a/src/components/DetailView/Components/StoryPointsEstimateMenu.tsx
+++ b/src/components/DetailView/Components/StoryPointsEstimateMenu.tsx
@@ -25,7 +25,7 @@ export function StoryPointsEstimateMenu({
   const theme = useMantineTheme()
   const timeoutRef = useRef<number | null>(null)
   const [localStoryPtsEstimate, setLocalStoryPtsEstimate] =
-    useState(storyPointsEstimate)
+    useState<number | undefined>(storyPointsEstimate)
   const [showEditableInput, setShowEditableInput] = useState(false)
   const [showLoader, setShowLoader] = useState(false)
 
@@ -64,13 +64,23 @@ export function StoryPointsEstimateMenu({
 
     timeoutRef.current = window.setTimeout(() => {
       setShowEditableInput(false)
-      mutation.mutate({ storyPointsEstimate: currentValue } as Issue)
+      mutation.mutate({ storyPointsEstimate: currentValue ?? null } as Issue)
     }, 2000)
   }
 
+  function numberInputToOptNumber(val: number | string): number | undefined {
+    if (val === '')
+      return undefined
+
+    if (typeof val === "number")
+      return val
+
+    throw new Error(`Unexpected number input value of type ${typeof val}: ${val}`)
+  }
+
   return editableFields && editableFields.includes("Story point estimate") ? (
     <Group grow>
-      <Text color="dimmed" fz="sm">
+      <Text c="dimmed" fz="sm">
         Story Points Estimate
       </Text>
       {!showEditableInput &&
@@ -84,10 +94,10 @@ export function StoryPointsEstimateMenu({
               </Chip>
             ) : (
               <Text
-                color="dimmed"
+                c="dimmed"
                 onClick={() => setShowEditableInput(true)}
                 w="100%"
-                sx={{
+                style={{
                   ":hover": {
                     cursor: "pointer",
                     boxShadow: theme.shadows.xs,
@@ -107,13 +117,13 @@ export function StoryPointsEstimateMenu({
         editableFields &&
         editableFields.includes("Story point estimate") && (
           <Group>
-            <Box w={60}>
+            <Box w={150}>
               <NumberInput
                 min={0}
-                defaultValue={localStoryPtsEstimate}
+                value={localStoryPtsEstimate}
                 onChange={(val) => {
-                  setLocalStoryPtsEstimate(val!)
-                  handleStoryPointsEstimateChange(val)
+                  setLocalStoryPtsEstimate(numberInputToOptNumber(val))
+                  handleStoryPointsEstimateChange(numberInputToOptNumber(val))
                   setShowLoader(true)
                 }}
                 onBlur={() => setShowEditableInput(false)}
@@ -131,14 +141,14 @@ export function StoryPointsEstimateMenu({
         storyPointsEstimate === undefined &&
         editableFields &&
         editableFields.includes("Story point estimate") && (
-          <Group position="right">
+          <Group justify="right">
             <Box w={70}>
               <NumberInput
                 min={0}
                 defaultValue={0}
                 onChange={(val) => {
-                  setLocalStoryPtsEstimate(val!)
-                  handleStoryPointsEstimateChange(val)
+                  setLocalStoryPtsEstimate(numberInputToOptNumber(val))
+                  handleStoryPointsEstimateChange(numberInputToOptNumber(val))
                   setShowLoader(true)
                 }}
                 onBlur={() => setShowEditableInput(false)}
diff --git a/src/components/DetailView/Components/SubTask/Subtask.tsx b/src/components/DetailView/Components/SubTask/Subtask.tsx
index f192a444..9e582739 100644
--- a/src/components/DetailView/Components/SubTask/Subtask.tsx
+++ b/src/components/DetailView/Components/SubTask/Subtask.tsx
@@ -21,7 +21,7 @@ export function Subtask({
     <Group
       align="center"
       key={id}
-      sx={(theme) => ({
+      style={(theme) => ({
         borderRadius: theme.radius.sm,
         transition: "background-color .8s ease-out",
         boxShadow: theme.shadows.xs,
@@ -32,13 +32,13 @@ export function Subtask({
       })}
       p="sm"
     >
-      <ThemeIcon size="sm" sx={{ flex: 2 }}>
+      <ThemeIcon size="sm" style={{ flex: 2 }}>
         <IconBinaryTree2 />
       </ThemeIcon>
-      <Text size="sm" color="blue" span sx={{ flex: 15 }} lineClamp={1}>
+      <Text size="sm" c="blue" span style={{ flex: 15 }} lineClamp={1}>
         {subtaskKey}
       </Text>
-      <Box sx={{ flex: 50 }}>
+      <Box style={{ flex: 50 }}>
         <IssueSummary summary={fields.summary} issueKey={subtaskKey} />
       </Box>
       {deleteSubtask.isLoading && <Loader size="sm" />}
@@ -47,7 +47,7 @@ export function Subtask({
         size="sm"
         color="gray"
         ml="auto"
-        sx={{
+        style={{
           flex: 2,
           ":hover": { color: "red", borderColor: "red", cursor: "pointer" },
         }}
diff --git a/src/components/DetailView/DetailView.tsx b/src/components/DetailView/DetailView.tsx
index 3fd7e3fe..f46547cf 100644
--- a/src/components/DetailView/DetailView.tsx
+++ b/src/components/DetailView/DetailView.tsx
@@ -2,21 +2,14 @@ import {
   Accordion,
   Box,
   Breadcrumbs,
-  Button,
-  createStyles,
   Group,
-  Menu,
   Paper,
   ScrollArea,
   Stack,
   Text,
   Title,
 } from "@mantine/core"
-import { IconCaretDown } from "@tabler/icons"
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { Issue } from "types"
-import { useState } from "react"
-import { getIssueTypes, setStatus } from "../CreateIssue/queryFunctions"
 import { AddSubtask } from "./Components/AddSubtask"
 import { AssigneeMenu } from "./Components/AssigneeMenu"
 import { EditableEpic } from "./Components/EditableEpic"
@@ -27,11 +20,12 @@ import { IssueSummary } from "./Components/IssueSummary"
 import { Labels } from "./Components/Labels"
 import { ReporterMenu } from "./Components/ReporterMenu"
 import { StoryPointsEstimateMenu } from "./Components/StoryPointsEstimateMenu"
-import { Subtask } from "./Components/SubTask/Subtask"
+import { Subtask } from "./Components/SubTask"
 import { DeleteIssue } from "./Components/DeleteIssue"
 import { Attachments } from "./Components/Attachments/Attachments"
 import { ColorSchemeToggle } from "../common/ColorSchemeToggle"
 import { IssueIcon } from "../BacklogView/Issue/IssueIcon"
+import { IssueStatusMenu } from "./Components/IssueStatusMenu";
 
 export function DetailView({
   issueKey,
@@ -52,31 +46,6 @@ export function DetailView({
   attachments,
   closeModal,
 }: Issue & { closeModal: () => void }) {
-  const useStyles = createStyles(
-    (theme, { isOpened }: { isOpened: boolean }) => ({
-      icon: {
-        transition: "transform 150ms ease",
-        transform: isOpened ? "rotate(180deg)" : "rotate(0deg)",
-      },
-    })
-  )
-  const [opened, setOpened] = useState(false)
-  const { classes } = useStyles({ isOpened: opened })
-
-  const { data: issueTypes } = useQuery({
-    queryKey: ["issueTypes", projectId],
-    queryFn: () => getIssueTypes(projectId),
-    enabled: !!projectId,
-  })
-
-  const queryClient = useQueryClient()
-  const [defaultStatus, setDefaultStatus] = useState(status)
-  const statusMutation = useMutation({
-    mutationFn: (targetStatus: string) => setStatus(issueKey, targetStatus),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["issues"] })
-    },
-  })
 
   return (
     <Paper p="xs">
@@ -89,31 +58,30 @@ export function DetailView({
       </Breadcrumbs>
       <ColorSchemeToggle
         size="34px"
-        sx={{
+        style={{
           position: "absolute",
           top: 19,
           right: 50,
         }}
       />
       <Group>
-        <Stack sx={{ flex: 13 }}>
+        <Stack style={{ flex: 13 }}>
           <Title order={1}>
             <IssueSummary summary={summary} issueKey={issueKey} />
           </Title>
           <ScrollArea.Autosize
-            maxHeight="70vh"
             mr="xs"
-            sx={{ minWidth: "260px" }}
+            style={{ minWidth: "260px", maxHeight: "70vh" }}
           >
-            <Text color="dimmed" mb="sm">
+            <Text c="dimmed" mb="sm">
               Description
             </Text>
             <Description issueKey={issueKey} description={description} />
-            <Text color="dimmed" mb="sm">
+            <Text c="dimmed" mb="sm">
               Child Issues
             </Text>
             <Paper mb="lg" mr="sm">
-              <Stack spacing="xs">
+              <Stack gap="xs">
                 {subtasks.map((subtask) => (
                   <Subtask
                     key={subtask.key}
@@ -129,63 +97,28 @@ export function DetailView({
             <CommentSection issueKey={issueKey} comment={comment} />
           </ScrollArea.Autosize>
         </Stack>
-        <ScrollArea.Autosize
-          maxHeight="70vh"
-          sx={{ minWidth: "260px", flex: 10 }}
-        >
+        <ScrollArea.Autosize style={{ minWidth: "260px", maxHeight: "70vh", flex: 10 }}>
           <Box>
-            <Group position="apart" mb="sm">
-              <Menu
-                shadow="md"
-                onOpen={() => setOpened(true)}
-                onClose={() => setOpened(false)}
-              >
-                <Menu.Target>
-                  <Button
-                    rightIcon={<IconCaretDown className={classes.icon} />}
-                  >
-                    {defaultStatus}
-                  </Button>
-                </Menu.Target>
-
-                <Menu.Dropdown>
-                  {issueTypes &&
-                    issueTypes
-                      .find((issueType) => issueType.name === type)
-                      ?.statuses?.map((issueStatus) => (
-                        <Menu.Item
-                          key={issueStatus.id}
-                          onClick={() => {
-                            statusMutation.mutate(issueStatus.name)
-                            setDefaultStatus(issueStatus.name)
-                          }}
-                        >
-                          {issueStatus.name}
-                        </Menu.Item>
-                      ))}
-                </Menu.Dropdown>
-              </Menu>
+            <Group justify="space-between" mb="sm">
+              <IssueStatusMenu projectId={projectId} issueKey={issueKey} type={type} status={status} />
               <DeleteIssue issueKey={issueKey} closeModal={closeModal} />
             </Group>
             <Accordion variant="contained" defaultValue="Details" mb={20}>
               <Accordion.Item value="Details">
-                <Accordion.Control sx={{ textAlign: "left" }}>
+                <Accordion.Control style={{ textAlign: "left" }}>
                   Details
                 </Accordion.Control>
                 <Accordion.Panel>
                   <Stack>
-                    <AssigneeMenu
-                      assignee={assignee as Issue["assignee"]}
-                      issueKey={issueKey}
-                    />
+                    <AssigneeMenu assignee={assignee as Issue["assignee"]} issueKey={issueKey} />
                     <Group grow>
-                      <Text fz="sm" color="dimmed">
+                      <Text fz="sm" c="dimmed">
                         Labels
                       </Text>
                       <Labels labels={labels} issueKey={issueKey} />
                     </Group>
                     <Group grow>
-                      <Text fz="sm" color="dimmed">
+                      <Text fz="sm" c="dimmed">
                         Sprint
                       </Text>
                       <IssueSprint sprint={sprint} issueKey={issueKey} />
@@ -199,14 +132,14 @@ export function DetailView({
                 </Accordion.Panel>
               </Accordion.Item>
             </Accordion>
-            <Text size="xs" color="dimmed">
+            <Text size="xs" c="dimmed">
               Created{" "}
               {new Intl.DateTimeFormat("en-GB", {
                 dateStyle: "full",
                 timeStyle: "short",
               }).format(new Date(created))}
             </Text>
-            <Text size="xs" color="dimmed">
+            <Text size="xs" c="dimmed">
               Updated{" "}
               {new Intl.DateTimeFormat("en-GB", {
                 dateStyle: "full",
diff --git a/src/components/EpicDetailView/Components/ChildIssue/ChildIssueCard.tsx b/src/components/EpicDetailView/Components/ChildIssue/ChildIssueCard.tsx
index 63114a2e..17227e66 100644
--- a/src/components/EpicDetailView/Components/ChildIssue/ChildIssueCard.tsx
+++ b/src/components/EpicDetailView/Components/ChildIssue/ChildIssueCard.tsx
@@ -1,6 +1,5 @@
 import {
   Avatar,
-  Badge,
   Center,
   Box,
   Group,
@@ -21,6 +20,9 @@ import { IssueIcon } from "../../../BacklogView/Issue/IssueIcon"
 import { DeleteButton } from "../../../BacklogView/Issue/DeleteButton"
 import { StatusType } from "../../../../../types/status";
 import { StoryPointsBadge } from "../../../common/StoryPoints/StoryPointsBadge";
+import { useColorScheme } from "../../../../common/color-scheme";
+import { IssueEpicBadge } from "../../../common/IssueEpicBadge";
+import { IssueLabelBadge } from "../../../common/IssueLabelBadge";
 
 export function ChildIssueCard({
   issueKey,
@@ -39,9 +41,10 @@ export function ChildIssueCard({
   const queryClient = useQueryClient()
   const { hovered } = useHover()
   const theme = useMantineTheme()
+  const colorScheme = useColorScheme()
 
   const hoverStyles =
-    theme.colorScheme === "dark"
+    colorScheme === "dark"
       ? {
           backgroundColor: theme.colors.dark[8],
           transition: "background-color .1s ease-in",
@@ -53,12 +56,12 @@ export function ChildIssueCard({
 
   return (
     <>
-      <Paper onClick={() => setOpened(true)} sx={{ position: "relative" }}>
+      <Paper onClick={() => setOpened(true)} style={{ position: "relative" }}>
         <DeleteButton mounted={hovered} issueKey={issueKey} />
         <Grid
           columns={100}
           p={3}
-          sx={{
+          style={{
             borderRadius: theme.radius.sm,
             margin: 0,
             boxShadow: theme.shadows.xs,
@@ -68,7 +71,7 @@ export function ChildIssueCard({
         >
           <Grid.Col
             span={8}
-            sx={{
+            style={{
               display: "flex",
               flexDirection: "column",
               justifyContent: "center",
@@ -79,14 +82,14 @@ export function ChildIssueCard({
             </Center>
           </Grid.Col>
           <Grid.Col span={65}>
-            <Stack spacing={0}>
-              <Group spacing={2}>
+            <Stack gap={0}>
+              <Group gap={2}>
                 <Text
                   size="sm"
                   mr={5}
-                  color="blue"
+                  c="blue"
                   td={status === StatusType.DONE ? "line-through" : "none"}
-                  sx={{
+                  style={{
                     ":hover": {
                       textDecoration: "underline",
                       cursor: "pointer",
@@ -95,20 +98,11 @@ export function ChildIssueCard({
                 >
                   {issueKey}
                 </Text>
-                {epic.issueKey && (
-                  <Badge mr={5} color="violet">
-                    {epic.summary}
-                  </Badge>
-                )}
-                {labels?.length !== 0 &&
-                  labels.map((label) => (
-                    <Badge mr={2} key={`${issueKey}-${label}`} color="yellow">
-                      {label}
-                    </Badge>
-                  ))}
+                {epic.issueKey && (<IssueEpicBadge issueKey={issueKey} epic={epic} />)}
+                {labels && labels.map((label) => (<IssueLabelBadge key={`${issueKey}-${label}`} label={label} />))}
               </Group>
               <Text size="lg">{summary}</Text>
-              <Group align="center" spacing="sm">
+              <Group align="center" gap="sm">
                 <Text size="sm">{type}</Text>
                 <Text size="sm">•</Text>
                 <Text size="sm">{status}</Text>
@@ -117,20 +111,20 @@ export function ChildIssueCard({
           </Grid.Col>
           <Grid.Col
             span={10}
-            sx={{
+            style={{
               display: "flex",
               flexDirection: "column",
               justifyContent: "center",
             }}
           >
-            <Box sx={{ alignSelf: "flex-start" }}>
+            <Box style={{ alignSelf: "flex-start" }}>
               {storyPointsEstimate &&
                 <StoryPointsBadge statusType={status as StatusType} storyPointsEstimate={storyPointsEstimate} />}
             </Box>
           </Grid.Col>
           <Grid.Col
             span={8}
-            sx={{
+            style={{
               display: "flex",
               flexDirection: "column",
               justifyContent: "center",
@@ -165,9 +159,10 @@ export function ChildIssueCard({
           queryClient.invalidateQueries({ queryKey: ["issues"] })
         }}
         size="90vw"
-        overflow="outside"
-        overlayOpacity={0.55}
-        overlayBlur={3}
+        overlayProps={{
+          opacity: 0.55,
+          blur: 3,
+        }}
         withCloseButton={false}
       >
         <DetailView
diff --git a/src/components/EpicDetailView/Components/ChildIssue/ChildIssueWrapper.tsx b/src/components/EpicDetailView/Components/ChildIssue/ChildIssueWrapper.tsx
index 38234a30..18d8ae37 100644
--- a/src/components/EpicDetailView/Components/ChildIssue/ChildIssueWrapper.tsx
+++ b/src/components/EpicDetailView/Components/ChildIssue/ChildIssueWrapper.tsx
@@ -4,7 +4,7 @@ import { ChildIssueCard } from "./ChildIssueCard"
 
 export function ChildIssueWrapper({ issues }: { issues: Issue[] }) {
   return (
-    <Stack spacing="sm">
+    <Stack gap="sm">
       {issues.map((issue: Issue, index) => (
         <ChildIssueCard {...issue} key={issue.issueKey} index={index} />
       ))}
diff --git a/src/components/EpicDetailView/Components/ChildIssue/ChildIssues.tsx b/src/components/EpicDetailView/Components/ChildIssue/ChildIssues.tsx
index 25c5bfb8..1a52976c 100644
--- a/src/components/EpicDetailView/Components/ChildIssue/ChildIssues.tsx
+++ b/src/components/EpicDetailView/Components/ChildIssue/ChildIssues.tsx
@@ -3,13 +3,15 @@ import { useState } from "react"
 import { Issue } from "../../../../../types"
 import { CreateIssueModal } from "../../../CreateIssue/CreateIssueModal"
 import { ChildIssueWrapper } from "./ChildIssueWrapper"
+import { useColorScheme } from "../../../../common/color-scheme";
 
 export function ChildIssues({ issues }: { issues: Issue[] }) {
+  const colorScheme = useColorScheme()
   const [createIssueModalOpened, setCreateIssueModalOpened] = useState(false)
 
   return (
     <Stack
-      sx={{
+      style={{
         minHeight: "100%",
         alignItems: "center",
       }}
@@ -17,7 +19,7 @@ export function ChildIssues({ issues }: { issues: Issue[] }) {
       <ScrollArea
         className="left-panel"
         p="sm"
-        sx={{
+        style={{
           minWidth: "260px",
           width: "100%",
           height: "50vh",
@@ -36,11 +38,11 @@ export function ChildIssues({ issues }: { issues: Issue[] }) {
             display="flex"
             fullWidth
             onClick={() => setCreateIssueModalOpened(true)}
-            sx={(theme) => ({
+            style={(theme) => ({
               justifyContent: "left",
               ":hover": {
                 background:
-                  theme.colorScheme === "dark"
+                  colorScheme === "dark"
                     ? theme.colors.dark[4]
                     : theme.colors.gray[4],
               },
@@ -57,7 +59,7 @@ export function ChildIssues({ issues }: { issues: Issue[] }) {
       <Divider
         mr="xs"
         size="xl"
-        sx={{
+        style={{
           cursor: "col-resize",
         }}
       />
diff --git a/src/components/EpicDetailView/Components/IssueSprint.tsx b/src/components/EpicDetailView/Components/IssueSprint.tsx
deleted file mode 100644
index eecdebed..00000000
--- a/src/components/EpicDetailView/Components/IssueSprint.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Text, Box, Select, useMantineTheme } from "@mantine/core"
-import { showNotification } from "@mantine/notifications"
-import { useMutation, useQuery } from "@tanstack/react-query"
-import { Issue, Sprint } from "types"
-import { useState } from "react"
-import { useCanvasStore } from "../../../lib/Store"
-import {
-  getSprints,
-  moveIssueToBacklog,
-} from "../../CreateIssue/queryFunctions"
-import { editIssue } from "../helpers/queryFunctions"
-
-export function IssueSprint(props: {
-  sprint: Sprint | undefined
-  issueKey: string
-}) {
-  const theme = useMantineTheme()
-  const [defaultsprint, setdefaultsprint] = useState(props.sprint || undefined)
-  const [showSprintInput, setshowSprintInput] = useState(false)
-
-  const boardIds = useCanvasStore((state) => state.selectedProjectBoardIds)
-  const currentBoardId = boardIds[0]
-  const { data: sprints } = useQuery({
-    queryKey: ["sprints"],
-    queryFn: () => getSprints(currentBoardId),
-    enabled: !!currentBoardId,
-  })
-
-  const mutationSprint = useMutation({
-    mutationFn: (issue: Issue) => editIssue(issue, props.issueKey),
-    onError: () => {
-      showNotification({
-        message: `An error occured while modifing the sprint 😢`,
-        color: "red",
-      })
-    },
-    onSuccess: () => {
-      showNotification({
-        message: `The sprint for issue ${props.issueKey} has been modified!`,
-        color: "green",
-      })
-    },
-  })
-  const mutationBacklog = useMutation({
-    mutationFn: () => moveIssueToBacklog(props.issueKey),
-    onError: () => {
-      showNotification({
-        message: `An error occured while modifing the sprint 😢`,
-        color: "red",
-      })
-    },
-    onSuccess: () => {
-      showNotification({
-        message: `The sprint for issue ${props.issueKey} has been modified!`,
-        color: "green",
-      })
-    },
-  })
-  const sprintNames = sprints ? sprints?.map((sprint) => sprint.name) : []
-  return (
-    <span>
-      {showSprintInput ? (
-        <Select
-          nothingFound="No Options"
-          searchable
-          clearable
-          defaultValue={props.sprint ? props.sprint.name : ""}
-          data={sprintNames}
-          onBlur={() => {
-            setshowSprintInput(false)
-            if (defaultsprint)
-              mutationSprint.mutate({
-                sprint: defaultsprint,
-              } as Issue)
-            else mutationBacklog.mutate()
-          }}
-          onChange={(value) => {
-            if (value === "") setdefaultsprint(undefined)
-            else
-              setdefaultsprint(
-                sprints?.find((sprint) => sprint.name === value)!
-              )
-          }}
-        />
-      ) : (
-        <Box
-          onClick={() => setshowSprintInput(true)}
-          sx={{
-            ":hover": {
-              cursor: "pointer",
-              boxShadow: theme.shadows.xs,
-              borderRadius: theme.radius.xs,
-              transition: "background-color .8s ease-out",
-            },
-          }}
-        >
-          {defaultsprint ? (
-            <Text>{defaultsprint.name}</Text>
-          ) : (
-            <Text color="dimmed">None</Text>
-          )}
-        </Box>
-      )}
-    </span>
-  )
-}
diff --git a/src/components/EpicDetailView/Components/IssueSummary.tsx b/src/components/EpicDetailView/Components/IssueSummary.tsx
index 4285b646..dda929dc 100644
--- a/src/components/EpicDetailView/Components/IssueSummary.tsx
+++ b/src/components/EpicDetailView/Components/IssueSummary.tsx
@@ -35,38 +35,38 @@ export function IssueSummary({
       }
     },
   })
+
+  if (!showSummaryInput)
+    return (
+      <Text lineClamp={1} onClick={() => setShowSummaryInput(true)}>
+        {defaultSummary}
+      </Text>
+    )
+
   return (
-    <Text>
-      {showSummaryInput ? (
-        <Textarea
-          value={defaultSummary}
-          onChange={(e) => setDefaultSummary(e.target.value)}
-          onBlur={() => {
-            if (defaultSummary === "")
-              showNotification({
-                message: `The summary of an issue cannot be empty`,
-                color: "red",
-              })
-            else {
-              setShowSummaryInput(false)
-              mutationSummary.mutate({
-                summary: defaultSummary,
-              } as Issue)
-            }
-          }}
-          autosize
-          sx={{
-            textarea: {
-              fontSize: "inherit",
-              fontWeight: "inherit",
-            },
-          }}
-        />
-      ) : (
-        <Text lineClamp={1} onClick={() => setShowSummaryInput(true)}>
-          {defaultSummary}
-        </Text>
-      )}
-    </Text>
+    <Textarea
+      value={defaultSummary}
+      onChange={(e) => setDefaultSummary(e.target.value)}
+      onBlur={() => {
+        if (defaultSummary === "")
+          showNotification({
+            message: `The summary of an issue cannot be empty`,
+            color: "red",
+          })
+        else {
+          setShowSummaryInput(false)
+          mutationSummary.mutate({
+            summary: defaultSummary,
+          } as Issue)
+        }
+      }}
+      autosize
+      style={{
+        textarea: {
+          fontSize: "inherit",
+          fontWeight: "inherit",
+        },
+      }}
+    />
   )
 }
diff --git a/src/components/EpicDetailView/Components/SubTask/Subtask.tsx b/src/components/EpicDetailView/Components/SubTask/Subtask.tsx
index f192a444..9e582739 100644
--- a/src/components/EpicDetailView/Components/SubTask/Subtask.tsx
+++ b/src/components/EpicDetailView/Components/SubTask/Subtask.tsx
@@ -21,7 +21,7 @@ export function Subtask({
     <Group
       align="center"
       key={id}
-      sx={(theme) => ({
+      style={(theme) => ({
         borderRadius: theme.radius.sm,
         transition: "background-color .8s ease-out",
         boxShadow: theme.shadows.xs,
@@ -32,13 +32,13 @@ export function Subtask({
       })}
       p="sm"
     >
-      <ThemeIcon size="sm" sx={{ flex: 2 }}>
+      <ThemeIcon size="sm" style={{ flex: 2 }}>
         <IconBinaryTree2 />
       </ThemeIcon>
-      <Text size="sm" color="blue" span sx={{ flex: 15 }} lineClamp={1}>
+      <Text size="sm" c="blue" span style={{ flex: 15 }} lineClamp={1}>
         {subtaskKey}
       </Text>
-      <Box sx={{ flex: 50 }}>
+      <Box style={{ flex: 50 }}>
         <IssueSummary summary={fields.summary} issueKey={subtaskKey} />
       </Box>
       {deleteSubtask.isLoading && <Loader size="sm" />}
@@ -47,7 +47,7 @@ export function Subtask({
         size="sm"
         color="gray"
         ml="auto"
-        sx={{
+        style={{
           flex: 2,
           ":hover": { color: "red", borderColor: "red", cursor: "pointer" },
         }}
diff --git a/src/components/EpicDetailView/EpicDetailView.tsx b/src/components/EpicDetailView/EpicDetailView.tsx
index f3232fd2..c64a5244 100644
--- a/src/components/EpicDetailView/EpicDetailView.tsx
+++ b/src/components/EpicDetailView/EpicDetailView.tsx
@@ -11,13 +11,10 @@ import {
   Stack,
   Text,
   Title,
-  Menu,
-  Button,
-  createStyles,
+  Tooltip,
 } from "@mantine/core"
-import { IconCaretDown } from "@tabler/icons"
 import { Attachment, Issue, User } from "types"
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { useEffect, useState } from "react"
 import { AssigneeMenu } from "../DetailView/Components/AssigneeMenu"
 import { Description } from "../DetailView/Components/Description"
@@ -38,10 +35,10 @@ import {
 } from "./helpers/storyPointsHelper"
 import { StoryPointsHoverCard } from "../common/StoryPoints/StoryPointsHoverCard";
 import { CommentSection } from "../DetailView/Components/CommentSection";
-import { getIssueTypes, setStatus } from "../CreateIssue/queryFunctions";
 import { StatusType } from "../../../types/status";
 import { getStatusTypeColor } from "../../common/status-color"
 import { Attachments } from "../DetailView/Components/Attachments/Attachments";
+import { IssueStatusMenu } from "../DetailView/Components/IssueStatusMenu";
 
 export function EpicDetailView({
   issueKey,
@@ -88,29 +85,6 @@ export function EpicDetailView({
     queryClient.invalidateQueries({ queryKey: ["epics"] })
   };
 
-  const [defaultStatus, setDefaultStatus] = useState(status)
-  const statusMutation = useMutation({
-    mutationFn: (targetStatus: string) => setStatus(issueKey, targetStatus),
-    onSuccess: reloadEpics,
-  })
-
-  const { data: issueTypes } = useQuery({
-    queryKey: ["issueTypes", projectId],
-    queryFn: () => getIssueTypes(projectId),
-    enabled: !!projectId,
-  })
-
-  const useStyles = createStyles(
-    (theme, { isOpened }: { isOpened: boolean }) => ({
-      icon: {
-        transition: "transform 150ms ease",
-        transform: isOpened ? "rotate(180deg)" : "rotate(0deg)",
-      },
-    })
-  )
-  const [opened, setOpened] = useState(false)
-  const { classes } = useStyles({ isOpened: opened })
-
   const dateFormat = new Intl.DateTimeFormat("en-GB", {
     dateStyle: "full",
     timeStyle: "short",
@@ -161,26 +135,26 @@ export function EpicDetailView({
       </Breadcrumbs>
       <ColorSchemeToggle
         size="34px"
-        sx={{
+        style={{
           position: "absolute",
           top: 19,
           right: 50,
         }}
       />
       <Group align="flex-start">
-        <Stack sx={{ flex: 13 }} justify="flex-start">
-          <Title size="h1" sx={{ marginBottom: "-10px" }}>
+        <Stack style={{ flex: 13 }} justify="flex-start">
+          <Title size="h1" style={{ marginBottom: "-10px" }}>
             <IssueSummary
               summary={summary}
               issueKey={issueKey}
               onMutate={reloadEpics}
             />
           </Title>
-          <Text color="dimmed" mb="sm" size="md" sx={{ marginLeft: "7px" }}>
+          <Text c="dimmed" mb="sm" size="md" style={{ marginLeft: "7px" }}>
             Description
           </Text>
           <Group
-            sx={{
+            style={{
               marginLeft: "10px",
               marginTop: "-7px",
             }}
@@ -188,43 +162,38 @@ export function EpicDetailView({
             <Description issueKey={issueKey} description={description} />
           </Group>
           <Group align="center" p="sm">
-            <Progress
+            <Progress.Root
               radius="md"
               size={20}
-              label="hello"
-              sx={{
+              style={{
                 width: "400px",
                 marginRight: "5px",
                 marginBottom: "20px",
                 flexGrow: 1
               }}
-              sections={[
-                {
-                  value: (tasksDone / totalTaskCount) * 100,
-                  color: getStatusTypeColor(StatusType.DONE),
-                  label: `${tasksDone}`,
-                  tooltip: `${tasksDone} Done`,
-                },
-                {
-                  value: (tasksInProgress / totalTaskCount) * 100,
-                  color: getStatusTypeColor(StatusType.IN_PROGRESS),
-                  label: `${tasksInProgress}`,
-                  tooltip: `${tasksInProgress} In progress`,
-                },
-                {
-                  value: (tasksTodo / totalTaskCount) * 100,
-                  color: getStatusTypeColor(StatusType.TODO),
-                  label: `${tasksTodo}`,
-                  tooltip: `${tasksTodo} ToDo`,
-                },
-                {
-                  value: 100,
-                  color: getStatusTypeColor(StatusType.TODO),
-                  label: `0`,
-                  tooltip: "Currently no child issues",
-                },
-              ]}
-            />
+            >
+              <Tooltip label={`${tasksDone} Done`}>
+                <Progress.Section value={(tasksDone / totalTaskCount) * 100} color={getStatusTypeColor(StatusType.DONE)}>
+                  <Progress.Label>{tasksDone}</Progress.Label>
+                </Progress.Section>
+              </Tooltip>
+              <Tooltip label={`${tasksInProgress} In progress`}>
+                <Progress.Section value={(tasksInProgress / totalTaskCount) * 100} color={getStatusTypeColor(StatusType.IN_PROGRESS)}>
+                  <Progress.Label>{tasksInProgress}</Progress.Label>
+                </Progress.Section>
+              </Tooltip>
+              <Tooltip label={`${tasksTodo} To do`}>
+                <Progress.Section value={(tasksTodo / totalTaskCount) * 100} color={getStatusTypeColor(StatusType.TODO)}>
+                  <Progress.Label>{tasksTodo}</Progress.Label>
+                </Progress.Section>
+              </Tooltip>
+              {totalTaskCount === 0 &&
+                <Tooltip label="Currently no child issues">
+                    <Progress.Section value={100} color={getStatusTypeColor(StatusType.TODO)}>
+                        <Progress.Label>0</Progress.Label>
+                    </Progress.Section>
+                </Tooltip>}
+            </Progress.Root>
             <StoryPointsHoverCard
               statusType={StatusType.TODO}
               count={storyPointsAccumulator(childIssues, StatusType.TODO)}
@@ -239,52 +208,19 @@ export function EpicDetailView({
             />
           </Group>
 
-          <Group sx={{ marginLeft: "-10px" }} grow>
+          <Group style={{ marginLeft: "-10px" }} grow>
             <ChildIssues issues={childIssues} />
           </Group>
         </Stack>
-        <ScrollArea.Autosize
-          maxHeight="70vh"
-          sx={{ minWidth: "260px", flex: 10 }}
-        >
+        <ScrollArea.Autosize style={{ minWidth: "260px", maxHeight: "70vh", flex: 10 }}>
           <Box>
-            <Group position="apart" mb="sm">
-                <Menu
-                  shadow="md"
-                  onOpen={() => setOpened(true)}
-                  onClose={() => setOpened(false)}
-                >
-                  <Menu.Target>
-                    <Button
-                      rightIcon={<IconCaretDown className={classes.icon} />}
-                    >
-                      {defaultStatus}
-                    </Button>
-                  </Menu.Target>
-
-                  <Menu.Dropdown>
-                    <Menu.Label>Status</Menu.Label>
-                    {issueTypes &&
-                      issueTypes
-                        .find((issueType) => issueType.name === type)
-                        ?.statuses?.map((issueStatus) => (
-                        <Menu.Item
-                          key={issueStatus.id}
-                          onClick={() => {
-                            statusMutation.mutate(issueStatus.name)
-                            setDefaultStatus(issueStatus.name)
-                          }}
-                        >
-                          {issueStatus.name}
-                        </Menu.Item>
-                      ))}
-                  </Menu.Dropdown>
-                </Menu>
+            <Group justify="space-between" mb="sm">
+              <IssueStatusMenu projectId={projectId} issueKey={issueKey} type={type} status={status} />
               <DeleteIssue issueKey={issueKey} closeModal={closeModal} />
             </Group>
             <Accordion variant="contained" defaultValue="Details" mb={20}>
               <Accordion.Item value="Details">
-                <Accordion.Control sx={{ textAlign: "left" }}>
+                <Accordion.Control style={{ textAlign: "left" }}>
                   Details
                 </Accordion.Control>
                 <Accordion.Panel>
@@ -294,7 +230,7 @@ export function EpicDetailView({
                       issueKey={issueKey}
                     />
                     <Group grow>
-                      <Text fz="sm" color="dimmed">
+                      <Text fz="sm" c="dimmed">
                         Labels
                       </Text>
                       <Labels
@@ -310,7 +246,7 @@ export function EpicDetailView({
             </Accordion>
             <Accordion variant="contained" mb={20}>
               <Accordion.Item value="Comments">
-                <Accordion.Control sx={{ textAlign: "left" }}>
+                <Accordion.Control style={{ textAlign: "left" }}>
                   Comments
                 </Accordion.Control>
                 <Accordion.Panel>
@@ -320,7 +256,7 @@ export function EpicDetailView({
             </Accordion>
             <Accordion variant="contained" mb={20}>
               <Accordion.Item value="Attachments">
-                <Accordion.Control sx={{ textAlign: "left" }}>
+                <Accordion.Control style={{ textAlign: "left" }}>
                   Attachments
                 </Accordion.Control>
                 <Accordion.Panel>
@@ -328,10 +264,10 @@ export function EpicDetailView({
                 </Accordion.Panel>
               </Accordion.Item>
             </Accordion>
-            <Text size="xs" color="dimmed">
+            <Text size="xs" c="dimmed">
               Created {dateFormat.format(new Date(created))}
             </Text>
-            <Text size="xs" color="dimmed">
+            <Text size="xs" c="dimmed">
               Updated {dateFormat.format(new Date(updated))}
             </Text>
           </Box>
diff --git a/src/components/EpicView/EpicCard.tsx b/src/components/EpicView/EpicCard.tsx
index 79ae77e8..71c54389 100644
--- a/src/components/EpicView/EpicCard.tsx
+++ b/src/components/EpicView/EpicCard.tsx
@@ -1,7 +1,6 @@
 import {Issue} from "types";
 import {
     Avatar,
-    Badge,
     Box,
     Paper,
     Center,
@@ -21,6 +20,8 @@ import {DeleteButton} from "../BacklogView/Issue/DeleteButton";
 import {EpicDetailView} from "../EpicDetailView/EpicDetailView";
 import {StatusType} from "../../../types/status";
 import {StoryPointsBadge} from "../common/StoryPoints/StoryPointsBadge";
+import {useColorScheme} from "../../common/color-scheme";
+import {IssueLabelBadge} from "../common/IssueLabelBadge";
 
 export function EpicCard ({
     issueKey,
@@ -38,8 +39,9 @@ export function EpicCard ({
     const queryClient = useQueryClient()
     const {hovered} = useHover()
     const theme = useMantineTheme()
+    const colorScheme = useColorScheme()
     const hoverStyles =
-        theme.colorScheme === "dark"
+        colorScheme === "dark"
             ? {
                 backgroundColor: theme.colors.dark[8],
                 transition: "background-color .1s ease-in",
@@ -58,7 +60,7 @@ export function EpicCard ({
             <Grid
                 columns={100}
                 p={3}
-                sx={{
+                style={{
                     borderRadius: theme.radius.sm,
                     margin: 0,
                     boxShadow: theme.shadows.xs,
@@ -69,7 +71,7 @@ export function EpicCard ({
             >
                 <Grid.Col
                     span={8}
-                    sx={{
+                    style={{
                         display: "flex",
                         flexDirection: "column",
                         justifyContent: "center",
@@ -86,14 +88,14 @@ export function EpicCard ({
                     </Center>
                 </Grid.Col>
                 <Grid.Col span={74}>
-                    <Stack spacing={0}>
-                        <Group spacing={2}>
+                    <Stack gap={0}>
+                        <Group gap={2}>
                             <Text
                                 size="sm"
                                 mr={5}
-                                color="blue"
+                                c="blue"
                                 td={status === StatusType.DONE ? "line-through" : "none"}
-                                sx={{
+                                style={{
                                     ":hover": {
                                         textDecoration: "underline",
                                         cursor: "pointer",
@@ -102,23 +104,15 @@ export function EpicCard ({
                             >
                                 {issueKey}
                             </Text>
-                            {labels?.length !== 0 &&
-                                labels.map((label) => (
-                                    <Badge
-                                        mr={2}
-                                        key={`${issueKey}-${label}`}
-                                        color="yellow"
-                                    >
-                                        {label}
-                                    </Badge>
-                                ))}
+                            {labels &&
+                                 labels.map((label) => (<IssueLabelBadge key={`${issueKey}-${label}`} label={label} />))}
                         </Group>
                         <Text size="lg">{summary}</Text>
                     </Stack>
                 </Grid.Col>
                 <Grid.Col
                     span={8}
-                    sx={{
+                    style={{
                         display: "flex",
                         flexDirection: "column",
                         justifyContent: "center",
@@ -151,7 +145,7 @@ export function EpicCard ({
                     </Tooltip>
                 </Grid.Col>
                 <Grid.Col span={3}>
-                    <Box sx={{ alignSelf: "flex-start" }}>
+                    <Box style={{ alignSelf: "flex-start" }}>
                         {storyPointsEstimate &&
                             <StoryPointsBadge
                                 statusType={status as StatusType}
@@ -168,9 +162,10 @@ export function EpicCard ({
                     queryClient.invalidateQueries({ queryKey: ["issues"] })
                 }}
                 size="90vw"
-                overflow="outside"
-                overlayOpacity={0.55}
-                overlayBlur={3}
+                overlayProps={{
+                  opacity: 0.55,
+                  blur: 3,
+                }}
                 withCloseButton={false}
             >
                 <EpicDetailView
diff --git a/src/components/EpicView/EpicView.tsx b/src/components/EpicView/EpicView.tsx
index 440ba7e5..dfeb609b 100644
--- a/src/components/EpicView/EpicView.tsx
+++ b/src/components/EpicView/EpicView.tsx
@@ -7,10 +7,12 @@ import {CreateIssueModal} from "../CreateIssue/CreateIssueModal";
 import {Issue} from "../../../types";
 import {EpicWrapper} from "./EpicWrapper";
 import {getEpics} from "./helpers/queryFetchers";
+import {useColorScheme} from "../../common/color-scheme";
 
 
 
 export function EpicView() {
+  const colorScheme = useColorScheme()
   const navigate = useNavigate()
   const projectName = useCanvasStore((state) => state.selectedProject?.name)
   const [createIssueModalOpened, setCreateIssueModalOpened] = useState(false)
@@ -55,13 +57,13 @@ export function EpicView() {
       </Center>
   )
     return (
-    <Stack sx={{ minHeight: "100%"}}>
-      <Stack align="left" spacing={0}>
+    <Stack style={{ minHeight: "100%"}}>
+      <Stack align="left" gap={0}>
         <Group>
-          <Group spacing="xs" c="dimmed">
+          <Group gap="xs" c="dimmed">
             <Text
               onClick={() => navigate("/projectsview")}
-              sx={{
+              style={{
                 ":hover": {
                   textDecoration: "underline",
                   cursor: "pointer",
@@ -78,11 +80,11 @@ export function EpicView() {
       </Stack>
       <ScrollArea.Autosize
           className="main-panel"
-          maxHeight="calc(100vh - 230px)"
           w="100%"
           p="sm"
-          sx={{
+          style={{
             minWidth: "260px",
+            maxHeight: "calc(100vh - 230px)"
           }}
       >
           {EpicWrappers.get("EpicView") &&(
@@ -100,13 +102,10 @@ export function EpicView() {
               display="flex"
               fullWidth
               onClick={() => setCreateIssueModalOpened(true)}
-              sx={(theme) => ({
+              style={(theme) => ({
                 justifyContent: "left",
                 ":hover": {
-                  background:
-                      theme.colorScheme === "dark"
-                          ? theme.colors.dark[4]
-                          : theme.colors.gray[4],
+                  background: colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4],
                 },
               })}
           >
diff --git a/src/components/EpicView/EpicWrapper.tsx b/src/components/EpicView/EpicWrapper.tsx
index 24f8a482..82041118 100644
--- a/src/components/EpicView/EpicWrapper.tsx
+++ b/src/components/EpicView/EpicWrapper.tsx
@@ -9,7 +9,7 @@ export function EpicWrapper({
     epics: Issue[]
 }){
     return (
-        <Stack spacing="sm">
+        <Stack gap="sm">
             {epics.map((epic: Issue) => (
                   <EpicCard {...epic} key={epic.issueKey} />
             ))}
diff --git a/src/components/Login/Login.test.tsx b/src/components/Login/Login.test.tsx
index 855f5b85..e63d0466 100644
--- a/src/components/Login/Login.test.tsx
+++ b/src/components/Login/Login.test.tsx
@@ -1,6 +1,6 @@
-import { ColorSchemeProvider } from "@mantine/core"
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { MantineProvider } from "@mantine/core";
 import { Login } from "./Login"
 
 jest.mock("../../get-meta-env.ts", () => ({
@@ -42,14 +42,10 @@ jest.mock("react-i18next", () => ({
 
 describe("<Login />", () => {
   it("should set providerLogin to JiraCloud after clicking on the Jira Cloud Button", async () => {
-    const toggleColorScheme = () => {}
     const { container, getByTestId } = render(
-      <ColorSchemeProvider
-        colorScheme="light"
-        toggleColorScheme={toggleColorScheme}
-      >
+      <MantineProvider>
         <Login />
-      </ColorSchemeProvider>
+      </MantineProvider>
     )
 
     await userEvent.click(screen.getByRole("button", { name: "Jira Cloud" }))
@@ -63,14 +59,10 @@ describe("<Login />", () => {
   })
 
   it("should set providerLogin to JiraServer after clicking on the Jira Server Button", async () => {
-    const toggleColorScheme = () => {}
     const { container, getByTestId } = render(
-      <ColorSchemeProvider
-        colorScheme="light"
-        toggleColorScheme={toggleColorScheme}
-      >
+      <MantineProvider>
         <Login />
-      </ColorSchemeProvider>
+      </MantineProvider>
     )
 
     await userEvent.click(screen.getByRole("button", { name: "Jira Server" }))
diff --git a/src/components/Login/Login.tsx b/src/components/Login/Login.tsx
index d5170ab6..24f77945 100644
--- a/src/components/Login/Login.tsx
+++ b/src/components/Login/Login.tsx
@@ -1,4 +1,4 @@
-import { Button, Container, Divider, Group, Image, Paper } from "@mantine/core"
+import {Button, Container, Divider, Group, Image, Paper, rgba} from "@mantine/core"
 import { IconCloud, IconServer } from "@tabler/icons"
 import { ipcRenderer } from "electron"
 import { useState } from "react"
@@ -8,6 +8,7 @@ import { LanguageSelector } from "../common/LanguageSelector"
 import { ColorSchemeToggle } from "../common/ColorSchemeToggle"
 import { JiraCloudLogin } from "./jira-cloud/JiraCloudLogin"
 import { JiraServerLogin } from "./jira-server/JiraServerLogin"
+import { useColorScheme } from "../../common/color-scheme";
 
 export function Login() {
   const [providerLogin, setProviderLogin] = useState("")
@@ -15,10 +16,11 @@ export function Login() {
   const onSuccess = () => navigateTo("/projectsview")
   const goBack = () => setProviderLogin("")
   const { t } = useTranslation("login")
+  const colorScheme = useColorScheme()
 
   return (
     <Container
-      sx={{
+      style={{
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
@@ -28,7 +30,7 @@ export function Login() {
       <Paper
         p="lg"
         withBorder
-        sx={(theme) => ({
+        style={(theme) => ({
           width: "30vw",
           display: "flex",
           flexDirection: "column",
@@ -37,18 +39,18 @@ export function Login() {
           borderRadius: theme.radius.lg,
         })}
       >
-        <Group spacing="xs">
+        <Group gap="xs">
           <ColorSchemeToggle ml="auto" />
           <LanguageSelector />
         </Group>
         <Image
           mx="auto"
           src="./project_canvas_logo.svg"
-          sx={(theme) => ({
+          style={() => ({
             maxWidth: "220px",
             backgroundColor:
-              theme.colorScheme === "dark"
-                ? theme.fn.rgba("#fff", 0.3)
+              colorScheme === "dark"
+                ? rgba("#fff", 0.3)
                 : "transparent",
             borderRadius: "20px",
             padding: "20px",
@@ -70,7 +72,7 @@ export function Login() {
                 to: "primaryGreen.8",
                 deg: 60,
               }}
-              leftIcon={<IconServer size={32} strokeWidth={1.8} />}
+              leftSection={<IconServer size={32} strokeWidth={1.8} />}
               onClick={() => {
                 setProviderLogin("JiraServer")
               }}
@@ -85,7 +87,7 @@ export function Login() {
                 to: "primaryBlue.6",
                 deg: 60,
               }}
-              leftIcon={<IconCloud size={32} strokeWidth={1.8} />}
+              leftSection={<IconCloud size={32} strokeWidth={1.8} />}
               onClick={() => {
                 setProviderLogin("JiraCloud")
                 ipcRenderer.send("start-oauth2")
diff --git a/src/components/Login/jira-cloud/JiraCloudLogin.test.tsx b/src/components/Login/jira-cloud/JiraCloudLogin.test.tsx
index 8a73e449..1a98c230 100644
--- a/src/components/Login/jira-cloud/JiraCloudLogin.test.tsx
+++ b/src/components/Login/jira-cloud/JiraCloudLogin.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { MantineProvider } from "@mantine/core";
 import { JiraCloudLogin } from "./JiraCloudLogin"
 
 export {}
@@ -29,7 +30,11 @@ describe("<JiraCloudLogin />", () => {
   it("should call goBack when GO BACK button clicked", async () => {
     const goBack = jest.fn()
     const onSuccess = jest.fn()
-    render(<JiraCloudLogin goBack={goBack} onSuccess={onSuccess} />)
+    render(
+      <MantineProvider>
+        <JiraCloudLogin goBack={goBack} onSuccess={onSuccess} />
+      </MantineProvider>
+    )
 
     await userEvent.click(screen.getByRole("button"))
 
diff --git a/src/components/Login/jira-cloud/JiraCloudLogin.tsx b/src/components/Login/jira-cloud/JiraCloudLogin.tsx
index 725a7a14..16023ebb 100644
--- a/src/components/Login/jira-cloud/JiraCloudLogin.tsx
+++ b/src/components/Login/jira-cloud/JiraCloudLogin.tsx
@@ -27,7 +27,7 @@ export function JiraCloudLogin({
 
   return (
     <>
-      <Center sx={{ height: "200px" }} data-testid="JiraCloudLogin">
+      <Center style={{ height: "200px" }} data-testid="JiraCloudLogin">
         <Loader size="xl" />
       </Center>
       <Button variant="outline" fullWidth color="dark" onClick={goBack}>
diff --git a/src/components/Login/jira-server/LoginForm.tsx b/src/components/Login/jira-server/LoginForm.tsx
index a3aa6ae6..1240c399 100644
--- a/src/components/Login/jira-server/LoginForm.tsx
+++ b/src/components/Login/jira-server/LoginForm.tsx
@@ -48,7 +48,7 @@ export function LoginForm({
         />
       </Stack>
 
-      <Group position="center" mt="xl">
+      <Group justify="center" mt="xl">
         <Button
           type="submit"
           variant="gradient"
diff --git a/src/components/ProjectsView/Table/ProjectsTable.module.css b/src/components/ProjectsView/Table/ProjectsTable.module.css
new file mode 100644
index 00000000..3151f512
--- /dev/null
+++ b/src/components/ProjectsView/Table/ProjectsTable.module.css
@@ -0,0 +1,17 @@
+.headerControl {
+    width: 100%;
+    padding: var(--mantine-spacing-xs) px var(--mantine-spacing-md) px;
+
+    &:hover {
+        background-color: light-dark(
+            var(--mantine-color-gray-0)
+            var(--mantine-color-dark-6)
+        );
+    }
+}
+
+.headerSortIcon {
+    width: 21px;
+    height: 21px;
+    border-radius: 21px;
+}
diff --git a/src/components/ProjectsView/Table/ProjectsTable.tsx b/src/components/ProjectsView/Table/ProjectsTable.tsx
index 44922b2c..eb6b4438 100644
--- a/src/components/ProjectsView/Table/ProjectsTable.tsx
+++ b/src/components/ProjectsView/Table/ProjectsTable.tsx
@@ -1,18 +1,19 @@
-import { ScrollArea, Table, Text, TextInput } from "@mantine/core"
-import { IconSearch } from "@tabler/icons"
+import { ScrollArea, Table, Text, TextInput, Center, Group, UnstyledButton } from "@mantine/core"
+import { IconChevronDown, IconChevronUp, IconSearch, IconSelector, TablerIcon } from "@tabler/icons"
 import { Project } from "types"
-import { useEffect, useState } from "react"
+import { useEffect, useState, ChangeEvent } from "react"
 import { useNavigate } from "react-router-dom"
 import { useCanvasStore } from "../../../lib/Store"
-import { TableHeader } from "./TableHeader"
 import { sortData } from "./TableHelper"
 
+import classes from "./ProjectsTable.module.css";
+
 export function ProjectsTable({ data }: { data: Project[] }) {
   const [search, setSearch] = useState("")
   const [sortedData, setSortedData] = useState(data)
   const [sortBy, setSortBy] = useState<keyof Project | null>(null)
   const [reverseSortDirection, setReverseSortDirection] = useState(false)
-  const { setSelectedProject, setselectedProjectBoardIds } = useCanvasStore()
+  const { setSelectedProject, setSelectedProjectBoardIds } = useCanvasStore()
   const navigate = useNavigate()
 
   useEffect(() => {
@@ -30,7 +31,7 @@ export function ProjectsTable({ data }: { data: Project[] }) {
     setSortedData(sortData(data, { sortBy: field, reversed, search }))
   }
 
-  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.currentTarget
     setSearch(value)
     setSortedData(
@@ -40,20 +41,43 @@ export function ProjectsTable({ data }: { data: Project[] }) {
 
   const onClickRow = async (row: Project) => {
     setSelectedProject(row)
-    setselectedProjectBoardIds(await window.provider.getBoardIds(row.key))
+    setSelectedProjectBoardIds(await window.provider.getBoardIds(row.key))
     navigate("/backlogview")
   }
 
+  const header = data && data.length > 0 && Object.keys(data[0]).map((key) => {
+    let Icon: TablerIcon
+    if (sortBy === key) {
+      if (reverseSortDirection) Icon = IconChevronUp
+      else Icon = IconChevronDown
+    } else Icon = IconSelector
+
+    return (
+        <Table.Th key={key}>
+          <UnstyledButton onClick={() => setSorting(key as keyof Project)} className={classes.headerControl}>
+            <Group justify="space-between">
+              <Text size="sm" style={{ fontWeight: 500 }}>
+                {key.toLocaleUpperCase()}
+              </Text>
+              <Center className={classes.headerSortIcon}>
+                <Icon size={14} stroke={1.5} />
+              </Center>
+            </Group>
+          </UnstyledButton>
+        </Table.Th>
+    )
+  })
+
   const rows = sortedData.map((row) => (
-    <tr
+    <Table.Tr
       style={{ cursor: "pointer" }}
       key={row.key}
       onClick={() => onClickRow(row)}
     >
       {Object.keys(row).map((key) => (
-        <td key={key}> {row[key as keyof Project]}</td>
+        <Table.Td key={key}> {row[key as keyof Project]}</Table.Td>
       ))}
-    </tr>
+    </Table.Tr>
   ))
 
   return (
@@ -61,7 +85,7 @@ export function ProjectsTable({ data }: { data: Project[] }) {
       <TextInput
         placeholder="Search by any field"
         mb="md"
-        icon={<IconSearch size={14} stroke={1.5} />}
+        leftSection={<IconSearch size={14} stroke={1.5} />}
         value={search}
         onChange={handleSearchChange}
       />
@@ -69,38 +93,26 @@ export function ProjectsTable({ data }: { data: Project[] }) {
         highlightOnHover
         horizontalSpacing="md"
         verticalSpacing="xs"
-        sx={{ tableLayout: "fixed", minWidth: 700 }}
+        style={{ tableLayout: "fixed", minWidth: 700 }}
       >
-        <thead>
-          <tr>
-            {data &&
-              data != null &&
-              data.length > 0 &&
-              Object.keys(data[0]).map((key) => (
-                <TableHeader
-                  key={key}
-                  sorted={sortBy === key}
-                  reversed={reverseSortDirection}
-                  onSort={() => setSorting(key as keyof Project)}
-                >
-                  {key.toLocaleUpperCase()}
-                </TableHeader>
-              ))}
-          </tr>
-        </thead>
-        <tbody>
+        <Table.Thead>
+          <Table.Tr>
+            {header}
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
           {rows.length > 0 ? (
             rows
           ) : (
-            <tr>
-              <td colSpan={Object.keys(data).length}>
-                <Text weight={500} align="center">
+            <Table.Tr>
+              <Table.Td colSpan={Object.keys(data).length}>
+                <Text style={{ fontWeight: 500, align: "center" }}>
                   Nothing found
                 </Text>
-              </td>
-            </tr>
+              </Table.Td>
+            </Table.Tr>
           )}
-        </tbody>
+        </Table.Tbody>
       </Table>
     </ScrollArea>
   )
diff --git a/src/components/ProjectsView/Table/TableHeader.tsx b/src/components/ProjectsView/Table/TableHeader.tsx
deleted file mode 100644
index 76f2ca26..00000000
--- a/src/components/ProjectsView/Table/TableHeader.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
-  createStyles,
-  UnstyledButton,
-  Group,
-  Center,
-  Text,
-} from "@mantine/core"
-import {
-  TablerIcon,
-  IconChevronUp,
-  IconChevronDown,
-  IconSelector,
-} from "@tabler/icons"
-
-const useStyles = createStyles((theme) => ({
-  tableheader: {
-    padding: "0 !important",
-  },
-
-  control: {
-    width: "100%",
-    padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
-
-    "&:hover": {
-      backgroundColor:
-        theme.colorScheme === "dark"
-          ? theme.colors.dark[6]
-          : theme.colors.gray[0],
-    },
-  },
-
-  icon: {
-    width: 21,
-    height: 21,
-    borderRadius: 21,
-  },
-}))
-
-export function TableHeader({
-  children,
-  reversed,
-  sorted,
-  onSort,
-}: {
-  children: React.ReactNode
-  reversed: boolean
-  sorted: boolean
-  onSort(): void
-}) {
-  const { classes } = useStyles()
-  let Icon: TablerIcon
-  if (sorted) {
-    if (reversed) Icon = IconChevronUp
-    else Icon = IconChevronDown
-  } else Icon = IconSelector
-  return (
-    <th className={classes.tableheader}>
-      <UnstyledButton onClick={onSort} className={classes.control}>
-        <Group position="apart">
-          <Text weight={500} size="sm">
-            {children}
-          </Text>
-          <Center className={classes.icon}>
-            <Icon size={14} stroke={1.5} />
-          </Center>
-        </Group>
-      </UnstyledButton>
-    </th>
-  )
-}
diff --git a/src/components/ProjectsView/Table/TableHelper.ts b/src/components/ProjectsView/Table/TableHelper.ts
index 5ea22ab3..c21ee87a 100644
--- a/src/components/ProjectsView/Table/TableHelper.ts
+++ b/src/components/ProjectsView/Table/TableHelper.ts
@@ -1,5 +1,5 @@
 import { Project } from "types"
-import { keys } from "@mantine/utils"
+import { keys } from "@mantine/core"
 
 export function filterData(data: Project[], search: string) {
   const query = search.toLowerCase().trim()
diff --git a/src/components/StoryMapView/Cards/ActionCard.tsx b/src/components/StoryMapView/Cards/ActionCard.tsx
index 5c76382a..f3b1ac7e 100644
--- a/src/components/StoryMapView/Cards/ActionCard.tsx
+++ b/src/components/StoryMapView/Cards/ActionCard.tsx
@@ -31,7 +31,6 @@ export function ActionCard({
       index={index}
       m="sm"
       bg="primaryGreen.0"
-      pos="relative"
       ref={ref}
       {...props}
     >
diff --git a/src/components/StoryMapView/Cards/Add/AddCard.tsx b/src/components/StoryMapView/Cards/Add/AddCard.tsx
index 2f1c0d77..3ced1194 100644
--- a/src/components/StoryMapView/Cards/Add/AddCard.tsx
+++ b/src/components/StoryMapView/Cards/Add/AddCard.tsx
@@ -1,7 +1,7 @@
 import { PaperProps } from "@mantine/core"
 import { IconPlus } from "@tabler/icons"
 import { MouseEventHandler } from "react"
-import { Draggable } from "react-beautiful-dnd"
+import { Draggable } from "@hello-pangea/dnd"
 import { BaseCard } from "../Base/BaseCard"
 
 export function AddCard({
@@ -18,7 +18,7 @@ export function AddCard({
     <Draggable draggableId={id} index={index} isDragDisabled>
       {(provided) => (
         <BaseCard
-          sx={{
+          style={{
             background: "transparent",
             border: "2px dashed lightgray",
             color: "gray",
diff --git a/src/components/StoryMapView/Cards/Add/AddCase.tsx b/src/components/StoryMapView/Cards/Add/AddCase.tsx
index a4711630..dbcf051e 100644
--- a/src/components/StoryMapView/Cards/Add/AddCase.tsx
+++ b/src/components/StoryMapView/Cards/Add/AddCase.tsx
@@ -9,7 +9,7 @@ export function AddCase({
 }) {
   return (
     <BaseCard
-      sx={{
+      style={{
         background: "transparent",
         border: "2px dashed lightgray",
         color: "gray",
diff --git a/src/components/StoryMapView/Cards/Base/BaseCard.tsx b/src/components/StoryMapView/Cards/Base/BaseCard.tsx
index 933cbce1..64a9a3f2 100644
--- a/src/components/StoryMapView/Cards/Base/BaseCard.tsx
+++ b/src/components/StoryMapView/Cards/Base/BaseCard.tsx
@@ -1,4 +1,4 @@
-import { packSx, Paper, PaperProps } from "@mantine/core"
+import { Paper, PaperProps } from "@mantine/core"
 import { forwardRef, MouseEventHandler, ReactNode } from "react"
 
 export const BaseCard = forwardRef<
@@ -7,9 +7,16 @@ export const BaseCard = forwardRef<
     children?: ReactNode
     onClick?: MouseEventHandler<HTMLDivElement>
   } & PaperProps
->(({ sx, onClick, children, ...props }, ref) => (
+>(({ onClick, children, ...props }, ref) => (
   <Paper
-    sx={[
+    radius="sm"
+    shadow="sm"
+    p="md"
+    m="sm"
+    ref={ref}
+    onClick={onClick}
+    {...props}
+    style={[
       {
         height: "5.5em",
         aspectRatio: "16/8",
@@ -19,15 +26,8 @@ export const BaseCard = forwardRef<
         justifyContent: "center",
         color: "black",
       },
-      ...packSx(sx),
+      props.style,
     ]}
-    radius="sm"
-    shadow="sm"
-    p="md"
-    m="sm"
-    ref={ref}
-    onClick={onClick}
-    {...props}
   >
     {children}
   </Paper>
diff --git a/src/components/StoryMapView/Cards/Base/DraggableBaseCard.tsx b/src/components/StoryMapView/Cards/Base/DraggableBaseCard.tsx
index 7c2aff7f..ec19ef35 100644
--- a/src/components/StoryMapView/Cards/Base/DraggableBaseCard.tsx
+++ b/src/components/StoryMapView/Cards/Base/DraggableBaseCard.tsx
@@ -1,7 +1,7 @@
 import { PaperProps } from "@mantine/core"
 import { useMergedRef } from "@mantine/hooks"
 import { forwardRef, ReactNode } from "react"
-import { Draggable } from "react-beautiful-dnd"
+import { Draggable } from "@hello-pangea/dnd"
 import { BaseCard } from "./BaseCard"
 
 export const DraggableBaseCard = forwardRef<
diff --git a/src/components/StoryMapView/Cards/CaseTitleCard.tsx b/src/components/StoryMapView/Cards/CaseTitleCard.tsx
index 6c694409..0741d14e 100644
--- a/src/components/StoryMapView/Cards/CaseTitleCard.tsx
+++ b/src/components/StoryMapView/Cards/CaseTitleCard.tsx
@@ -23,7 +23,6 @@ export function CaseTitleCard({
     <BaseCard
       w="100%"
       bg="primaryBlue.0"
-      pos="relative"
       radius="sm"
       m={undefined}
       shadow={undefined}
diff --git a/src/components/StoryMapView/Cards/SubActionCard.tsx b/src/components/StoryMapView/Cards/SubActionCard.tsx
index 48759609..d9154f54 100644
--- a/src/components/StoryMapView/Cards/SubActionCard.tsx
+++ b/src/components/StoryMapView/Cards/SubActionCard.tsx
@@ -31,7 +31,6 @@ export function SubActionCard({
       index={index}
       m="sm"
       bg="white"
-      pos="relative"
       ref={ref}
       {...props}
     >
diff --git a/src/components/StoryMapView/Case/CaseColumn.tsx b/src/components/StoryMapView/Case/CaseColumn.tsx
index e4dfb44e..8b30e2df 100644
--- a/src/components/StoryMapView/Case/CaseColumn.tsx
+++ b/src/components/StoryMapView/Case/CaseColumn.tsx
@@ -41,8 +41,8 @@ export function CaseColumn({
       >
         {(provided) => (
           <Group
-            spacing={0}
-            noWrap
+            gap={0}
+            wrap="nowrap"
             ref={provided.innerRef}
             {...provided.droppableProps}
           >
diff --git a/src/components/StoryMapView/Case/CaseColumns.tsx b/src/components/StoryMapView/Case/CaseColumns.tsx
index 4f48117a..9476264a 100644
--- a/src/components/StoryMapView/Case/CaseColumns.tsx
+++ b/src/components/StoryMapView/Case/CaseColumns.tsx
@@ -16,7 +16,7 @@ export function CaseColumns({
 }) {
   const addCase = useStoryMapStore((state) => state.addCase)
   return (
-    <Group align="start" noWrap>
+    <Group align="start" wrap="nowrap">
       {cases.map((caseColumn) => (
         <CaseColumn
           key={caseColumn.title}
diff --git a/src/components/StoryMapView/Components/Zoom.tsx b/src/components/StoryMapView/Components/Zoom.tsx
index d50cc1ed..d13d5554 100644
--- a/src/components/StoryMapView/Components/Zoom.tsx
+++ b/src/components/StoryMapView/Components/Zoom.tsx
@@ -19,7 +19,7 @@ export function Zoom({
         >
           <IconMinus />
         </ActionIcon>
-        <Text w={36} align="center">
+        <Text w={36} style={{ align: "center" }}>
           {(zoomValue * 100).toFixed()}%
         </Text>
         <ActionIcon
diff --git a/src/components/StoryMapView/Level/AddLevel.tsx b/src/components/StoryMapView/Level/AddLevel.tsx
index 5c982856..e2be3c13 100644
--- a/src/components/StoryMapView/Level/AddLevel.tsx
+++ b/src/components/StoryMapView/Level/AddLevel.tsx
@@ -10,7 +10,7 @@ export function AddLevel({ storyMapId }: { storyMapId: string }) {
   )
   return (
     <Button
-      leftIcon={<IconPlus />}
+      leftSection={<IconPlus />}
       onClick={() => {
         const levelId = `${LEVEL_PREFIX}-${getRndInteger()}`
         addLevel(storyMapId, { id: levelId, title: "New Level" })
diff --git a/src/components/StoryMapView/Level/CaseSubActionLevel.tsx b/src/components/StoryMapView/Level/CaseSubActionLevel.tsx
index 1d65aee8..c8346cb3 100644
--- a/src/components/StoryMapView/Level/CaseSubActionLevel.tsx
+++ b/src/components/StoryMapView/Level/CaseSubActionLevel.tsx
@@ -13,13 +13,13 @@ export function CaseSubActionLevel({
   levelId: string
 }) {
   return (
-    <Group align="start" noWrap>
+    <Group align="start" wrap="nowrap">
       {filteredCases.map((caseColumn) => (
         <Group
           key={`${caseColumn.id}-${levelId}`}
           align="start"
-          noWrap
-          spacing={0}
+          wrap="nowrap"
+          gap={0}
         >
           {caseColumn.actions
             .map((_action) => _action.subActionGroups)
@@ -33,7 +33,7 @@ export function CaseSubActionLevel({
               />
             ))}
           <BaseCard
-            sx={{ cursor: "default", background: "transparent" }}
+            style={{ cursor: "default", background: "transparent" }}
             shadow={undefined}
           />
         </Group>
diff --git a/src/components/StoryMapView/Level/LevelControl.tsx b/src/components/StoryMapView/Level/LevelControl.tsx
index badd54fe..c3f12b68 100644
--- a/src/components/StoryMapView/Level/LevelControl.tsx
+++ b/src/components/StoryMapView/Level/LevelControl.tsx
@@ -1,4 +1,4 @@
-import { Accordion, ActionIcon, Group, TextInput } from "@mantine/core"
+import {Accordion, AccordionControlProps, ActionIcon, Center, TextInput} from "@mantine/core"
 import { IconTrash } from "@tabler/icons"
 import { useState } from "react"
 import { useStoryMapStore } from "../StoryMapStore"
@@ -7,16 +7,17 @@ import { SubActionLevel } from "../Types"
 export function LevelControl({
   level,
   storyMapId,
+  ...props
 }: {
   level: SubActionLevel
   storyMapId: string
-}) {
+} & AccordionControlProps) {
   const [edit, toggleEdit] = useState(true)
   const updateLevel = useStoryMapStore((state) => state.updateLevel)
   const deleteLevel = useStoryMapStore((state) => state.deleteLevel)
   return (
-    <Accordion.Control>
-      <Group>
+    <Center>
+      <Accordion.Control {...props}>
         <TextInput
           placeholder="Title"
           {...(edit ? { readOnly: false } : { readOnly: true })}
@@ -37,16 +38,16 @@ export function LevelControl({
           autoFocus
           size="lg"
         />
-        <ActionIcon
-          color="red"
-          size="sm"
-          onClick={() => {
-            deleteLevel(storyMapId, level.id)
-          }}
-        >
-          <IconTrash />
-        </ActionIcon>
-      </Group>
-    </Accordion.Control>
+      </Accordion.Control>
+      <ActionIcon
+        color="red"
+        size="sm"
+        onClick={() => {
+          deleteLevel(storyMapId, level.id)
+        }}
+      >
+        <IconTrash />
+      </ActionIcon>
+    </Center>
   )
 }
diff --git a/src/components/StoryMapView/Level/SubActionGroup.tsx b/src/components/StoryMapView/Level/SubActionGroup.tsx
index 6e5fa1cc..0c9ec614 100644
--- a/src/components/StoryMapView/Level/SubActionGroup.tsx
+++ b/src/components/StoryMapView/Level/SubActionGroup.tsx
@@ -22,7 +22,7 @@ export function SubActionGroup({
   return (
     <StrictModeDroppable droppableId={subActionGroupId} type="subAction">
       {(provided) => (
-        <Stack spacing={0} ref={provided.innerRef} {...provided.droppableProps}>
+        <Stack gap={0} ref={provided.innerRef} {...provided.droppableProps}>
           {subActions.map((subAction, index) => (
             <SubActionCard
               key={subAction.id}
diff --git a/src/components/StoryMapView/StoryMap/AddStoryMapCard.tsx b/src/components/StoryMapView/StoryMap/AddStoryMapCard.tsx
index 387ce7b4..214499b2 100644
--- a/src/components/StoryMapView/StoryMap/AddStoryMapCard.tsx
+++ b/src/components/StoryMapView/StoryMap/AddStoryMapCard.tsx
@@ -7,7 +7,7 @@ export function AddStoryMapCard() {
   const addStoryMap = useStoryMapStore((state) => state.addStoryMap)
   return (
     <BaseCard
-      sx={{
+      style={{
         height: "16em",
         aspectRatio: "9/10",
         background: "transparent",
diff --git a/src/components/StoryMapView/StoryMap/StoryMapCard.tsx b/src/components/StoryMapView/StoryMap/StoryMapCard.tsx
index c0b76b98..3bd06b17 100644
--- a/src/components/StoryMapView/StoryMap/StoryMapCard.tsx
+++ b/src/components/StoryMapView/StoryMap/StoryMapCard.tsx
@@ -15,7 +15,7 @@ export function StoryMapCard({ name, id }: StoryMap) {
   const [edit, setEdit] = useState(false)
   return (
     <BaseCard
-      sx={{
+      style={{
         height: "16em",
         aspectRatio: "9/10",
         position: "relative",
diff --git a/src/components/StoryMapView/StoryMapDashboard.tsx b/src/components/StoryMapView/StoryMapDashboard.tsx
index c21e6742..5ad164e7 100644
--- a/src/components/StoryMapView/StoryMapDashboard.tsx
+++ b/src/components/StoryMapView/StoryMapDashboard.tsx
@@ -8,12 +8,12 @@ export function StoryMapDashboard() {
 
   return (
     <Center h="100%">
-      <Stack align="center" spacing="xl">
+      <Stack align="center" gap="xl">
         <Stack align="center">
           <Title>Story Map</Title>
           <Text>Please select a story map or add a new one.</Text>
         </Stack>
-        <Group maw="70vw" position="center">
+        <Group maw="70vw" justify="center">
           {storyMaps.map((storyMap) => (
             <StoryMapCard key={storyMap.id} {...storyMap} />
           ))}
diff --git a/src/components/StoryMapView/StoryMapView.tsx b/src/components/StoryMapView/StoryMapView.tsx
index 82a868ba..ee85d7c7 100644
--- a/src/components/StoryMapView/StoryMapView.tsx
+++ b/src/components/StoryMapView/StoryMapView.tsx
@@ -1,6 +1,6 @@
 import { Box, Stack, Title } from "@mantine/core"
 import { useState } from "react"
-import { DragDropContext } from "react-beautiful-dnd"
+import { DragDropContext } from "@hello-pangea/dnd"
 import { useParams } from "react-router-dom"
 import { CaseColumns } from "./Case/CaseColumns"
 import { Zoom } from "./Components/Zoom"
@@ -38,9 +38,9 @@ export function StoryMapView() {
       }}
     >
       {storyMapId && storyMap && (
-        <Stack spacing="xl">
+        <Stack gap="xl">
           <Title>{storyMap.name}</Title>
-          <Box sx={{ zoom: zoomValue }}>
+          <Box style={{ zoom: zoomValue }}>
             <CaseColumns
               storyMapId={storyMapId}
               cases={storyMap.cases}
diff --git a/src/components/StoryMapView/helpers/draggingHelpers.ts b/src/components/StoryMapView/helpers/draggingHelpers.ts
index 6a0ea283..007c3479 100644
--- a/src/components/StoryMapView/helpers/draggingHelpers.ts
+++ b/src/components/StoryMapView/helpers/draggingHelpers.ts
@@ -1,4 +1,4 @@
-import { DropResult } from "react-beautiful-dnd"
+import { DropResult } from "@hello-pangea/dnd"
 import { Case, SubActionGroup } from "../Types"
 import {
   CASE_PREFIX,
diff --git a/src/components/common/CustomItemSelect.tsx b/src/components/common/CustomItemSelect.tsx
new file mode 100644
index 00000000..f6d8d284
--- /dev/null
+++ b/src/components/common/CustomItemSelect.tsx
@@ -0,0 +1,106 @@
+import { Combobox, ComboboxProps, InputBase, useCombobox, CloseButton, InputBaseProps } from "@mantine/core"
+import { ForwardRefExoticComponent, RefAttributes, useState } from "react";
+
+export function CustomItemSelect<OptionType extends { value: string, label: string }, RefType>({
+    value,
+    onChange,
+    options,
+    ItemComponent,
+    clearable,
+    searchable,
+    label,
+    placeholder,
+    nothingFoundMessage,
+    comboboxProps = {},
+    inputBaseProps = {},
+}: {
+    value: string | undefined,
+    onChange: (updatedValue: string | undefined) => void,
+    options: OptionType[],
+    ItemComponent: ForwardRefExoticComponent<OptionType & RefAttributes<RefType>>,
+    clearable?: boolean,
+    searchable?: boolean,
+    label?: string,
+    placeholder?: string,
+    nothingFoundMessage?: string,
+    comboboxProps?: ComboboxProps,
+    inputBaseProps?: Omit<InputBaseProps, "value">
+}){
+    const combobox = useCombobox({
+        onDropdownClose: () => combobox.resetSelectedOption(),
+    });
+
+    const [currentValue, setCurrentValue] = useState<string | null>(value ?? null);
+    const selectedOption = options.find((item) => item.value === currentValue);
+    const [search, setSearch] = useState(selectedOption ? selectedOption.label : '');
+
+    const activeSearch = searchable && options.every((item) => item.label !== search)
+    const filteredOptions = activeSearch ? options.filter((item) =>
+        item.value.toLowerCase().includes(search.toLowerCase().trim()) ||
+            item.label.toLowerCase().includes(search.toLowerCase().trim())
+    ) : options;
+
+    const items = filteredOptions.length > 0 ? filteredOptions.map((item) => (
+        <Combobox.Option value={item.value} key={item.value}>
+            <ItemComponent {...item} />
+        </Combobox.Option>
+    )) : (
+        <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>
+    );
+
+    return (
+        <Combobox
+            store={combobox}
+            onOptionSubmit={(val) => {
+                setCurrentValue(val);
+                const newSelectedOption = options.find((item) => item.value === val);
+                setSearch(newSelectedOption ? newSelectedOption.label : '');
+                combobox.closeDropdown();
+                onChange(val);
+            }}
+            {...comboboxProps}
+        >
+            <Combobox.Target>
+                <InputBase
+                    label={label}
+                    value={search}
+                    placeholder={placeholder}
+                    pointer
+                    rightSection={
+                        clearable && value !== null ? (
+                            <CloseButton
+                                size="sm"
+                                onMouseDown={(event) => event.preventDefault()}
+                                onClick={() => {
+                                    setCurrentValue(null);
+                                    setSearch('');
+                                    combobox.closeDropdown();
+                                    onChange(undefined);
+                                }}
+                                aria-label="Clear value"
+                            />
+                        ) : (
+                            <Combobox.Chevron />
+                        )
+                    }
+                    onChange={(event) => {
+                        combobox.openDropdown()
+                        setSearch(event.currentTarget.value);
+                    }}
+                    onClick={() => combobox.openDropdown()}
+                    onFocus={() => combobox.openDropdown()}
+                    onBlur={() => {
+                        combobox.closeDropdown();
+                        setSearch(selectedOption ? selectedOption.label : '');
+                    }}
+                    rightSectionPointerEvents={value === null ? 'none' : 'all'}
+                    {...inputBaseProps}
+                />
+            </Combobox.Target>
+
+            <Combobox.Dropdown>
+                <Combobox.Options>{items}</Combobox.Options>
+            </Combobox.Dropdown>
+        </Combobox>
+    )
+}
diff --git a/src/components/common/IssueEpicBadge.tsx b/src/components/common/IssueEpicBadge.tsx
new file mode 100644
index 00000000..b884f124
--- /dev/null
+++ b/src/components/common/IssueEpicBadge.tsx
@@ -0,0 +1,14 @@
+import { Badge } from "@mantine/core"
+
+export function IssueEpicBadge({ issueKey, epic }: { issueKey: string, epic: { summary?: string } }) {
+  return (
+    <Badge
+      mr={5}
+      key={`${issueKey}-epic`}
+      variant="light"
+      color="violet"
+    >
+      {epic.summary}
+    </Badge>
+  )
+}
diff --git a/src/components/common/IssueLabelBadge.tsx b/src/components/common/IssueLabelBadge.tsx
new file mode 100644
index 00000000..b7db69b1
--- /dev/null
+++ b/src/components/common/IssueLabelBadge.tsx
@@ -0,0 +1,13 @@
+import { Badge } from "@mantine/core"
+
+export function IssueLabelBadge({ label }: { label: string }) {
+  return (
+    <Badge
+      mr={2}
+      variant="light"
+      color="yellow"
+    >
+      {label}
+    </Badge>
+  )
+}
diff --git a/src/components/common/LanguageSelector.tsx b/src/components/common/LanguageSelector.tsx
index abfc3f7c..a16e9efd 100644
--- a/src/components/common/LanguageSelector.tsx
+++ b/src/components/common/LanguageSelector.tsx
@@ -4,21 +4,21 @@ import { useTranslation } from "react-i18next"
 export function LanguageSelector() {
   const { i18n } = useTranslation()
 
-  const handleLanguageChange = (language: string) => {
-    i18n.changeLanguage(language)
+  const handleLanguageChange = (language: string | null) => {
+    i18n.changeLanguage(language || undefined)
   }
 
   return (
     <Select
       size="xs"
-      sx={{ width: "48px" }}
       onChange={handleLanguageChange}
       data={[
         { value: "en", label: "EN" },
         { value: "de", label: "DE" },
       ]}
       defaultValue="en"
-      styles={{
+      style={{
+        width: "48px",
         input: { padding: "10px" },
         rightSection: { padding: "0px" },
       }}
diff --git a/src/components/common/StoryPoints/StoryPointsBadge.tsx b/src/components/common/StoryPoints/StoryPointsBadge.tsx
index b2c59520..cf2f49af 100644
--- a/src/components/common/StoryPoints/StoryPointsBadge.tsx
+++ b/src/components/common/StoryPoints/StoryPointsBadge.tsx
@@ -10,7 +10,7 @@ export function StoryPointsBadge({
   storyPointsEstimate: number
 }) {
   return (
-    <Box sx={{ lineHeight: 1 }}>
+    <Box style={{ lineHeight: 1 }}>
       <Badge
         px="7px"
         color={getStatusTypeColor(statusType)}
diff --git a/src/components/common/StoryPoints/StoryPointsHoverCard.tsx b/src/components/common/StoryPoints/StoryPointsHoverCard.tsx
index 3b6db690..777d2795 100644
--- a/src/components/common/StoryPoints/StoryPointsHoverCard.tsx
+++ b/src/components/common/StoryPoints/StoryPointsHoverCard.tsx
@@ -12,14 +12,14 @@ export function StoryPointsHoverCard({
   return (
     <HoverCard width="relative" shadow="md" radius="md">
       <HoverCard.Target>
-        <Box sx={{ marginBottom: "20px" }}>
+        <Box style={{ marginBottom: "20px" }}>
           <StoryPointsBadge statusType={statusType} storyPointsEstimate={count} />
         </Box>
       </HoverCard.Target>
       <HoverCard.Dropdown>
         <Text
           size="sm"
-          sx={{ marginLeft: "-5px" }}
+          style={{ marginLeft: "-5px" }}
         >
           Total story points for <b>{statusType}</b> issues: <b>{count}</b>
         </Text>
diff --git a/src/components/common/StrictModeDroppable.tsx b/src/components/common/StrictModeDroppable.tsx
index a4a8cf20..2c965a5c 100644
--- a/src/components/common/StrictModeDroppable.tsx
+++ b/src/components/common/StrictModeDroppable.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { Droppable, DroppableProps } from "react-beautiful-dnd"
+import { Droppable, DroppableProps } from "@hello-pangea/dnd"
 
 export function StrictModeDroppable({ children, ...props }: DroppableProps) {
   const [enabled, setEnabled] = useState(false)
diff --git a/src/components/common/UserSelect/UserSelectMenu.module.css b/src/components/common/UserSelect/UserSelectMenu.module.css
new file mode 100644
index 00000000..34cf4cff
--- /dev/null
+++ b/src/components/common/UserSelect/UserSelectMenu.module.css
@@ -0,0 +1,39 @@
+.control {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: var(--mantine-radius-md);
+    padding: 3px;
+    border: 1px solid light-dark(
+        var(--mantine-color-gray-2),
+        var(--mantine-color-dark-6),
+    );
+    transition: background-color 150ms ease;
+    background-color: light-dark(
+        var(--mantine-color-gray-2), /* TODO theme.white[isOpened ? 5 : 6] */
+        var(--mantine-color-dark-6),
+    );
+
+    .icon {
+        transition: transform 150ms ease;
+        transform: rotate(0deg);
+    }
+
+    &[data-opened] {
+        background-color: light-dark(
+            var(--mantine-color-gray-2), /* TODO theme.white[isOpened ? 5 : 6] */
+            var(--mantine-color-dark-5),
+        );
+
+        .icon {
+            transform: rotate(180deg);
+        }
+    };
+
+    &:hover {
+        background-color: light-dark(
+            var(--mantine-color-gray-0),
+            var(--mantine-color-dark-5),
+        );
+    }
+}
diff --git a/src/components/common/UserSelect/UserSelectMenu.tsx b/src/components/common/UserSelect/UserSelectMenu.tsx
new file mode 100644
index 00000000..d7bd5da7
--- /dev/null
+++ b/src/components/common/UserSelect/UserSelectMenu.tsx
@@ -0,0 +1,74 @@
+import {
+  Text,
+  Group,
+  Menu,
+  Avatar,
+  UnstyledButton,
+  ScrollArea,
+} from "@mantine/core"
+import { IconChevronDown } from "@tabler/icons"
+import { useQuery } from "@tanstack/react-query"
+import { useState } from "react"
+import { User } from "../../../../types"
+import { useCanvasStore } from "../../../lib/Store"
+import { getAssignableUsersByProject } from "../../../common/query-functions";
+
+import classes from './UserSelectMenu.module.css'
+
+export function UserSelectMenu({
+  value,
+  onChange,
+  placeholder = ""
+}: {
+  value: User | undefined,
+  onChange: (user: User) => void,
+  placeholder?: string
+}) {
+  const selectedProject = useCanvasStore((state) => state.selectedProject)
+  const [opened, setOpened] = useState(false)
+
+  const { data: assignableUsers } = useQuery({
+    queryKey: ["assignableUsers", selectedProject?.key],
+    queryFn: () => getAssignableUsersByProject(selectedProject?.key!),
+    enabled: !!selectedProject && !!selectedProject.key,
+  })
+
+  const displayedUsers = assignableUsers ? (
+    assignableUsers.map((assignableUser) => (
+      <Menu.Item
+        leftSection={<Avatar src={assignableUser.avatarUrls["24x24"]} size="sm" radius="xl" />}
+        onClick={() => onChange(assignableUser)}
+        key={assignableUser.id}
+      >
+        {assignableUser.displayName}
+      </Menu.Item>
+    ))
+  ) : (
+    <Menu.Item>
+      <Text c="dimmed">None</Text>
+    </Menu.Item>
+  )
+
+  return (
+    <Menu onOpen={() => setOpened(true)} onClose={() => setOpened(false)}>
+      <Menu.Target>
+        <UnstyledButton className={classes.control} mod={{ opened }}>
+          <Group gap="xs" justify="apart">
+            {value?.avatarUrls
+              ? (<Avatar src={value.avatarUrls["24x24"]} size="sm" radius="xl" />)
+              : (<Avatar size="sm" variant="outline" radius="xl" />)}
+            {value?.displayName
+              ? (<Text size="sm">{value.displayName}</Text>)
+              : (<Text size="sm" c="dimmed">{placeholder}</Text>)}
+            <IconChevronDown size={18} stroke={1.5} className={classes.icon}/>
+          </Group>
+        </UnstyledButton>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <ScrollArea style={{ height: 200 }} type="auto">
+          {displayedUsers}
+        </ScrollArea>
+      </Menu.Dropdown>
+    </Menu>
+  )
+}
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index a5f2591d..827c85ee 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,22 +1,30 @@
 import { AppShell } from "@mantine/core"
 import { Outlet } from "react-router-dom"
 import { LayoutHeader } from "./LayoutHeader"
+import { useColorScheme } from "../../common/color-scheme";
 
 export function Layout() {
+  const colorScheme = useColorScheme();
+
   return (
     <AppShell
       padding="md"
-      header={<LayoutHeader />}
+      header={{ height: 60 }}
       styles={(theme) => ({
         main: {
           backgroundColor:
-            theme.colorScheme === "dark"
+            colorScheme === "dark"
               ? theme.colors.dark[8]
               : theme.colors.gray[0],
         },
       })}
     >
-      <Outlet />
+      <AppShell.Header>
+        <LayoutHeader />
+      </AppShell.Header>
+      <AppShell.Main>
+        <Outlet />
+      </AppShell.Main>
     </AppShell>
   )
 }
diff --git a/src/components/layout/LayoutHeader.module.css b/src/components/layout/LayoutHeader.module.css
new file mode 100644
index 00000000..1491aae1
--- /dev/null
+++ b/src/components/layout/LayoutHeader.module.css
@@ -0,0 +1,6 @@
+.root {
+    border-bottom: 1px solid light-dark(
+        var(--mantine-color-gray-2)
+        var(--mantine-color-dark-4)
+    );
+}
diff --git a/src/components/layout/LayoutHeader.tsx b/src/components/layout/LayoutHeader.tsx
index bea190d5..4ff95480 100644
--- a/src/components/layout/LayoutHeader.tsx
+++ b/src/components/layout/LayoutHeader.tsx
@@ -1,4 +1,4 @@
-import { Anchor, Box, Button, Group, Header, Image } from "@mantine/core"
+import { Anchor, AppShell, Box, Button, Group, Image } from "@mantine/core"
 import { useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { ColorSchemeToggle } from "../common/ColorSchemeToggle"
@@ -7,29 +7,21 @@ import { CreateIssueModal } from "../CreateIssue/CreateIssueModal"
 import { LogoutButton } from "./LogoutButton"
 import { StoryMapMenu } from "./StoryMapMenu"
 
+import classes from "./LayoutHeader.module.css"
+
 export function LayoutHeader() {
   const navigate = useNavigate()
   const [createIssueModalOpened, setCreateIssueModalOpened] = useState(false)
 
   return (
-    <Header
-      height="60"
-      p="sm"
-      sx={(theme) => ({
-        borderBottom: `1px solid ${
-          theme.colorScheme === "dark"
-            ? theme.colors.dark[4]
-            : theme.colors.gray[2]
-        }`,
-      })}
-    >
+    <AppShell.Header p="sm" className={classes.root} >
       <Box
-        sx={(theme) => ({
+        style={(theme) => ({
           paddingLeft: theme.spacing.xs,
           paddingRight: theme.spacing.xs,
         })}
       >
-        <Group spacing="xl">
+        <Group gap="xl">
           <Image
             src="./project_canvas_logo_sm.svg"
             height={36}
@@ -64,11 +56,10 @@ export function LayoutHeader() {
             opened={createIssueModalOpened}
             setOpened={setCreateIssueModalOpened}
           />
-
           <ColorSchemeToggle size="34px" ml="auto" />
           <LogoutButton />
         </Group>
       </Box>
-    </Header>
+    </AppShell.Header>
   )
 }
diff --git a/src/components/layout/StoryMapMenu.tsx b/src/components/layout/StoryMapMenu.tsx
index 5328cf21..011b3631 100644
--- a/src/components/layout/StoryMapMenu.tsx
+++ b/src/components/layout/StoryMapMenu.tsx
@@ -21,7 +21,7 @@ export function StoryMapMenu() {
           component="button"
           type="button"
           onClick={() => navigate("/storymapview")}
-          sx={{
+          style={{
             display: "flex",
           }}
         >
@@ -32,7 +32,7 @@ export function StoryMapMenu() {
       <Menu.Dropdown>
         {storyMaps?.slice(0, 3).map((storyMap) => (
           <Menu.Item
-            icon={<IconMap size={14} />}
+            leftSection={<IconMap size={14} />}
             key={`layout-header-story-map-${storyMap.id}`}
             onClick={() => navigate(`/storymapview/${storyMap.id}`)}
           >
@@ -42,14 +42,14 @@ export function StoryMapMenu() {
 
         {storyMaps?.length > 0 && <Menu.Divider />}
         <Menu.Item
-          icon={<IconLayoutDashboard size={14} />}
+          leftSection={<IconLayoutDashboard size={14} />}
           onClick={() => navigate("/storymapview")}
         >
           View All Story Maps
         </Menu.Item>
         <Menu.Item
           color="red"
-          icon={<IconTrash size={14} />}
+          leftSection={<IconTrash size={14} />}
           onClick={deleteAllStoryMaps}
         >
           Delete All Story Maps
diff --git a/src/lib/Store.ts b/src/lib/Store.ts
index 276ab004..81e26c86 100644
--- a/src/lib/Store.ts
+++ b/src/lib/Store.ts
@@ -8,7 +8,7 @@ export interface CanvasStore {
   issueTypes: IssueType[]
   setProjects: (projects: Project[]) => void
   setSelectedProject: (project: Project) => void
-  setselectedProjectBoardIds: (boards: number[]) => void
+  setSelectedProjectBoardIds: (boards: number[]) => void
   setIssueTypes: (types: IssueType[]) => void
 }
 
@@ -18,7 +18,7 @@ export const useCanvasStore = create<CanvasStore>()((set) => ({
   selectedProjectBoardIds: [],
   issueTypes: [],
   setProjects: (projects: Project[]) => set(() => ({ projects })),
-  setselectedProjectBoardIds: (boards: number[]) =>
+  setSelectedProjectBoardIds: (boards: number[]) =>
     set(() => ({ selectedProjectBoardIds: boards })),
   setSelectedProject: (row: Project | undefined) =>
     set(() => ({ selectedProject: row })),
diff --git a/src/main.tsx b/src/main.tsx
index 67d795d3..e0117108 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,6 +7,10 @@ import { App } from "./App"
 import { ThemeProvider } from "./ThemeProvider"
 import "./i18n/i18n"
 
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/notifications/styles.css';
+
 const queryClient = new QueryClient()
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
diff --git a/src/test/setup-undefined-jsdom-properties.ts b/src/test/setup-undefined-jsdom-properties.ts
new file mode 100644
index 00000000..4e068547
--- /dev/null
+++ b/src/test/setup-undefined-jsdom-properties.ts
@@ -0,0 +1,19 @@
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // deprecated
+        removeListener: jest.fn(), // deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}))
diff --git a/theme.ts b/theme.ts
index fdabf496..1bc2e6cb 100644
--- a/theme.ts
+++ b/theme.ts
@@ -1,6 +1,6 @@
 import type {
   MantineThemeOverride,
-  Tuple,
+  MantineColorsTuple,
   DefaultMantineColor,
 } from "@mantine/core"
 
@@ -16,6 +16,7 @@ export const theme: MantineThemeOverride = {
       "#D0116B",
       "#BB0F60",
       "#A80E56",
+      "#900A48",
     ],
     primaryBlue: [
       "#85E9FF",
@@ -27,6 +28,7 @@ export const theme: MantineThemeOverride = {
       "#00B0D7",
       "#009EC2",
       "#008EAF",
+      "#00718C",
     ],
     primaryGreen: [
       "#C8FECE",
@@ -38,6 +40,7 @@ export const theme: MantineThemeOverride = {
       "#07F520",
       "#06DD1D",
       "#05C71A",
+      "#03B717",
     ],
     secondary: [
       "#2A236E",
@@ -49,12 +52,12 @@ export const theme: MantineThemeOverride = {
       "#17143D",
       "#151237",
       "#131032",
+      "#0C0A1f",
     ],
   },
   primaryColor: "primaryBlue",
   defaultRadius: "sm",
   black: "#131032",
-  colorScheme: "light",
   defaultGradient: { deg: 90, from: "secondary.1", to: "primaryBlue.3" },
   fontFamily: "Poppins",
   headings: { fontFamily: "Poppins", fontWeight: "bold" },
@@ -69,6 +72,6 @@ type ExtendedCustomColors =
 
 declare module "@mantine/core" {
   export interface MantineThemeColorsOverride {
-    colors: Record<ExtendedCustomColors, Tuple<string, 10>>
+    colors: Record<ExtendedCustomColors, MantineColorsTuple>
   }
 }
diff --git a/yarn.lock b/yarn.lock
index ec1f7d2f..8ce2556a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -282,7 +282,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.20.13", "@babel/runtime@^7.23.2":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
+  integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
@@ -335,7 +342,7 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@electron-forge/cli@^6.1.1":
+"@electron-forge/cli@^6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@electron-forge/cli/-/cli-6.4.2.tgz#a4d8dc5d3ed6f5ca358f7b92e756e14390d04b0f"
   integrity sha512-bM6YVTV0uUEpIL1jkpARlSm4Li26XZn+avC/lyTdpPqnd65T/oXZNkrAD+2Jb0RlgplOaM21qWm7ybtvKDGDyA==
@@ -350,22 +357,6 @@
     listr2 "^5.0.3"
     semver "^7.2.1"
 
-"@electron-forge/core-utils@6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@electron-forge/core-utils/-/core-utils-6.1.1.tgz#4eaa3b3d5f4d0b888c3500e3b6f4f0b975100c2c"
-  integrity sha512-7Kt0o85UEzpYjWU2WQ3pVuSOnRIDfuFimCQ1bh9qym5NLrkDcIQx9sIsCFIFkWYkUY7oIuMIMOhrGA4tyWGl2w==
-  dependencies:
-    "@electron-forge/shared-types" "6.1.1"
-    "@electron/rebuild" "^3.2.10"
-    "@malept/cross-spawn-promise" "^2.0.0"
-    chalk "^4.0.0"
-    debug "^4.3.1"
-    find-up "^5.0.0"
-    fs-extra "^10.0.0"
-    log-symbols "^4.0.0"
-    semver "^7.2.1"
-    yarn-or-npm "^3.0.1"
-
 "@electron-forge/core-utils@6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@electron-forge/core-utils/-/core-utils-6.4.2.tgz#99c2b459e07ec504b3e0ee0af090e180e78aefa1"
@@ -431,7 +422,7 @@
     fs-extra "^10.0.0"
     which "^2.0.2"
 
-"@electron-forge/maker-deb@^6.1.1":
+"@electron-forge/maker-deb@^6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@electron-forge/maker-deb/-/maker-deb-6.4.2.tgz#8b2c1a85641d8c7f46a22d5c747ed1da393c51b5"
   integrity sha512-tlV8ffivgBP94vtYXgAeXgzeKCaRyLuWH9LT8PQW1QrYbAFpCMmuwk/zFaJkyMklImCWmDFTPYMEqdEJGd7Npg==
@@ -441,7 +432,7 @@
   optionalDependencies:
     electron-installer-debian "^3.2.0"
 
-"@electron-forge/maker-rpm@^6.1.1":
+"@electron-forge/maker-rpm@^6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@electron-forge/maker-rpm/-/maker-rpm-6.4.2.tgz#a687b07382a1b4dec76e2f19588bc599648a3d69"
   integrity sha512-+hfbY5pYbAer0y07OtOzVgVBHoTRmemqqZ//T0mKJpyK2ThHKGTvyW8FFlr5jlQs5LoDCM2WHKE8oGtRhivsMg==
@@ -451,7 +442,7 @@
   optionalDependencies:
     electron-installer-redhat "^3.2.0"
 
-"@electron-forge/maker-squirrel@^6.1.1":
+"@electron-forge/maker-squirrel@^6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@electron-forge/maker-squirrel/-/maker-squirrel-6.4.2.tgz#92d44fc6cadf6ff23c65dc901c8044d7c8b53f95"
   integrity sha512-ukK3RcFaBrQXUzR52PsHxfwDq5XKSnj6A1kkXiyHWqgj+HIU97prBScBb5JRtasPvYN+nDdQO2vlInsLaqcx9Q==
@@ -462,7 +453,7 @@
   optionalDependencies:
     electron-winstaller "^5.0.0"
 
-"@electron-forge/maker-zip@^6.1.1":
+"@electron-forge/maker-zip@^6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@electron-forge/maker-zip/-/maker-zip-6.4.2.tgz#f8a064bde04bfc73756716ed4d7d62bdd455de28"
   integrity sha512-k2nfhhnxcYbUS7rCKCisuqEalxtH9l73+lrtfL0aQZiE/BLbDXyNckDIDOPvX0tBEg62nVzUdJonZwOhZVvAMw==
@@ -473,13 +464,6 @@
     fs-extra "^10.0.0"
     got "^11.8.5"
 
-"@electron-forge/plugin-base@6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@electron-forge/plugin-base/-/plugin-base-6.1.1.tgz#73f4688654cd29591af533be53c2a3a656405331"
-  integrity sha512-xZWZxvD2fQYnkFREK+46FS59vMEsPFINwydtD24QGTBoRMOKXkfXv16yN4eexVi+02Hj6mihYY8zhxJi56OmxA==
-  dependencies:
-    "@electron-forge/shared-types" "6.1.1"
-
 "@electron-forge/plugin-base@6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@electron-forge/plugin-base/-/plugin-base-6.4.2.tgz#65054f841728688cc31edeb94479e6bd4bc07782"
@@ -487,15 +471,15 @@
   dependencies:
     "@electron-forge/shared-types" "6.4.2"
 
-"@electron-forge/plugin-vite@6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@electron-forge/plugin-vite/-/plugin-vite-6.1.1.tgz#d66f88912f98f1e9cc2da499b79dcb08188b1e95"
-  integrity sha512-YvzUu6lzAl6BQ3rY4CMlLYymkfx3ywBRXKaL8ewvmQFQL8Ex8k2d1rTxg2AHWhG+2n8A4lpQkmb7GaS51jSTLA==
+"@electron-forge/plugin-vite@6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@electron-forge/plugin-vite/-/plugin-vite-6.4.2.tgz#e75f70d0b997a252d2448a014dbfbf01b3ac4b48"
+  integrity sha512-xm1/LeTEVcJgBCWuZLsx68+rdpxu7iJFSKiqKCHORXlPaJAhTHxhuWeYO234qQ2OZ6g+ppg0oLzzzo8PdzcIYA==
   dependencies:
-    "@electron-forge/core-utils" "6.1.1"
-    "@electron-forge/plugin-base" "6.1.1"
-    "@electron-forge/shared-types" "6.1.1"
-    "@electron-forge/web-multi-logger" "6.1.1"
+    "@electron-forge/core-utils" "6.4.2"
+    "@electron-forge/plugin-base" "6.4.2"
+    "@electron-forge/shared-types" "6.4.2"
+    "@electron-forge/web-multi-logger" "6.4.2"
     chalk "^4.0.0"
     debug "^4.3.1"
     vite "^4.1.1"
@@ -507,7 +491,7 @@
   dependencies:
     "@electron-forge/shared-types" "6.4.2"
 
-"@electron-forge/publisher-github@^6.1.1":
+"@electron-forge/publisher-github@^6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@electron-forge/publisher-github/-/publisher-github-6.4.2.tgz#34ead6fea30a39be83a22aff0cb77dc83c481503"
   integrity sha512-SUb2JxU8hHx8vbc1UA97lcs3ChyDeiTzx8Q5/DtooC/2sSqD85bct5ewLaANRXK/58cBVpyHMgo4uiq7mlyQWg==
@@ -522,15 +506,6 @@
     fs-extra "^10.0.0"
     mime-types "^2.1.25"
 
-"@electron-forge/shared-types@6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@electron-forge/shared-types/-/shared-types-6.1.1.tgz#f08cf783bf0a086331784b9f13110b4fade84846"
-  integrity sha512-sFQQ2ldMq5mlNv4m7lZOZLf9aOn6MLNc8QVeTzOBQ+psxI3mVTDjb+/Lhs/jU8dm2igVfEqAmlj57Gi+C4u4Vw==
-  dependencies:
-    "@electron/rebuild" "^3.2.10"
-    electron-packager "^17.1.1"
-    listr2 "^5.0.3"
-
 "@electron-forge/shared-types@6.4.2":
   version "6.4.2"
   resolved "https://registry.yarnpkg.com/@electron-forge/shared-types/-/shared-types-6.4.2.tgz#ffc25a21d1bc7e6cb8fcf8dc1e1767c6a8c52d02"
@@ -587,10 +562,10 @@
     "@electron-forge/template-base" "6.4.2"
     fs-extra "^10.0.0"
 
-"@electron-forge/web-multi-logger@6.1.1":
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/@electron-forge/web-multi-logger/-/web-multi-logger-6.1.1.tgz#56325455aa37a3c677602753084d9317ff8d9fb9"
-  integrity sha512-/hXxjH99UT7er8obZtKfCOBuRNMHUBiUXVbwq5HnzGk8f1x05tZJeZmkbdxEqDS3MFZCtY7gf1DO1c8Cayl0bg==
+"@electron-forge/web-multi-logger@6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@electron-forge/web-multi-logger/-/web-multi-logger-6.4.2.tgz#d5504a7545dc5d1cf9defd27175277d932c56f85"
+  integrity sha512-acZwr5+4l5G6baaqUwU9tuJ/njhJLUu9LgTvjedknIipg22EwLqwhjdXuTpWb9gidXDjdAjSRFzEEyVZCCooFA==
   dependencies:
     express "^4.17.1"
     express-ws "^5.0.2"
@@ -945,7 +920,7 @@
   dependencies:
     "@floating-ui/utils" "^0.1.3"
 
-"@floating-ui/dom@^1.2.1":
+"@floating-ui/dom@^1.5.1":
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
   integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
@@ -953,20 +928,20 @@
     "@floating-ui/core" "^1.4.2"
     "@floating-ui/utils" "^0.1.3"
 
-"@floating-ui/react-dom@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.3.0.tgz#4d35d416eb19811c2b0e9271100a6aa18c1579b3"
-  integrity sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==
+"@floating-ui/react-dom@^2.0.1":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.4.tgz#b076fafbdfeb881e1d86ae748b7ff95150e9f3ec"
+  integrity sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==
   dependencies:
-    "@floating-ui/dom" "^1.2.1"
+    "@floating-ui/dom" "^1.5.1"
 
-"@floating-ui/react@^0.19.1":
-  version "0.19.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.19.2.tgz#c6e4d2097ed0dca665a7c042ddf9cdecc95e9412"
-  integrity sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==
+"@floating-ui/react@^0.24.8":
+  version "0.24.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.24.8.tgz#e079e2836990be3fce9665ab509360a5447251a1"
+  integrity sha512-AuYeDoaR8jtUlUXtZ1IJ/6jtBkGnSpJXbGNzokBL87VDJ8opMq1Bgrc0szhK482ReQY6KZsMoZCVSb4xwalkBA==
   dependencies:
-    "@floating-ui/react-dom" "^1.3.0"
-    aria-hidden "^1.1.3"
+    "@floating-ui/react-dom" "^2.0.1"
+    aria-hidden "^1.2.3"
     tabbable "^6.0.1"
 
 "@floating-ui/utils@^0.1.3":
@@ -974,6 +949,19 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
   integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
+"@hello-pangea/dnd@^16.5.0":
+  version "16.5.0"
+  resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.5.0.tgz#f323ff9f813204818bc67648a383e8715f47c59c"
+  integrity sha512-n+am6O32jo/CFXciCysz83lPM3I3F58FJw4uS44TceieymcyxQSfzK5OhzPAKrVBZktmuOI6Zim9WABTMtXv4A==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    css-box-model "^1.2.1"
+    memoize-one "^6.0.0"
+    raf-schd "^4.0.3"
+    react-redux "^8.1.3"
+    redux "^4.2.1"
+    use-memo-one "^1.1.3"
+
 "@humanwhocodes/config-array@^0.11.11":
   version "0.11.12"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.12.tgz#549afec9bfce5232ac6325db12765f407e70e3a0"
@@ -1267,57 +1255,50 @@
   dependencies:
     cross-spawn "^7.0.1"
 
-"@mantine/core@^5.10.0":
-  version "5.10.5"
-  resolved "https://registry.yarnpkg.com/@mantine/core/-/core-5.10.5.tgz#071e14dcf8b94a36d0243f1f4b30305ac0074afd"
-  integrity sha512-F4tqHSEVM9D6/iSqHfPda+Xl5XgSEPHAAkT01Zwzj4Jnbd10qGrlqr/SFUop2CIcuKYnmra9XltUahUPXBC2BQ==
+"@mantine/core@^7.0.0":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@mantine/core/-/core-7.3.2.tgz#70a87c272d727c772f2e884f13e5e63989363fbd"
+  integrity sha512-CwAuQogVLcLR7O9e1eOgi3gtk4XX6cnaqevAxzJJpIOIyCnHiQ3cEGINVXyUUjUUipBlvK3sqz3NPGJ2ekLFDQ==
   dependencies:
-    "@floating-ui/react" "^0.19.1"
-    "@mantine/styles" "5.10.5"
-    "@mantine/utils" "5.10.5"
-    "@radix-ui/react-scroll-area" "1.0.2"
-    react-textarea-autosize "8.3.4"
+    "@floating-ui/react" "^0.24.8"
+    clsx "2.0.0"
+    react-number-format "^5.3.1"
+    react-remove-scroll "^2.5.7"
+    react-textarea-autosize "8.5.3"
+    type-fest "^3.13.1"
 
-"@mantine/dates@^5.10.0":
-  version "5.10.5"
-  resolved "https://registry.yarnpkg.com/@mantine/dates/-/dates-5.10.5.tgz#53b93d6f3f9aca1f3c1391e3b01c8d8342dea8c1"
-  integrity sha512-l7lSgDKEV+phTgUAHIkc/22Qgq+WBg0P7JS2WpeZeERX8eyD4BGlsY3ZWqHigYxhBq/Ycd2tHZFmwl2p+694Zw==
+"@mantine/dates@^7.0.0":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@mantine/dates/-/dates-7.3.2.tgz#a1d4131aad2a82b7b41b7f87242ec459ed3a2ac3"
+  integrity sha512-mmP0PYpM9GYTXRhEL4Ulb+170vgW8fpGwRdVNuCCE/cyzIKHPJzaI2pEGR/i+sboH+RC1InCy/JaiDkPY6Fzlg==
   dependencies:
-    "@mantine/utils" "5.10.5"
+    clsx "2.0.0"
 
-"@mantine/form@^5.10.0":
-  version "5.10.5"
-  resolved "https://registry.yarnpkg.com/@mantine/form/-/form-5.10.5.tgz#44216eb03de4bb39c1a53e9468d76d2b069dd659"
-  integrity sha512-0ENh7W/mwbOnIjJlRUoUTZjOtEi7/qoF86k67CVjKqagsA+Wy6cuBF1spPcllMzujepprtqKACb3rVLR+Pxj7Q==
+"@mantine/form@^7.0.0":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@mantine/form/-/form-7.3.2.tgz#af9e536a0e93362fe47f93a5fdfd552bf5a70794"
+  integrity sha512-/qa1KQKVC46XWgIU190r3XM3Xld8Lsvz4L/an//TO67RnAGEdC5OCvr2JCb+fprZZi3YdxaKOkVNvP20W23qkg==
   dependencies:
     fast-deep-equal "^3.1.3"
-    klona "^2.0.5"
-
-"@mantine/hooks@^5.10.0":
-  version "5.10.5"
-  resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-5.10.5.tgz#568586a0fa649be46f057ddc920bf98761017ffb"
-  integrity sha512-hFQp71QZDfivPzfIUOQZfMKLiOL/Cn2EnzacRlbUr55myteTfzYN8YMt+nzniE/6c4IRopFHEAdbKEtfyQc6kg==
+    klona "^2.0.6"
 
-"@mantine/notifications@^5.10.0":
-  version "5.10.5"
-  resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-5.10.5.tgz#2f3f2d013ce4637e64e935aa5dd8c1df1a7acec0"
-  integrity sha512-IzTAXA7Zb9DcI94Mv5O2OinhLmI7fvs/VutDw9uCpp6OHtLuF/XN1d262jrsGhMZT0c4nuUsotSLFZF3GWZwXg==
-  dependencies:
-    "@mantine/utils" "5.10.5"
-    react-transition-group "4.4.2"
+"@mantine/hooks@^7.0.0":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.3.2.tgz#664651fce6207640a5f1dba3e55806b489ec7b12"
+  integrity sha512-xgumuuI3PBWXff5N02HCI7PEy25mDEdyXDQklUYK93J6FKwpcosyZnGVitoUrV1gLtYYa9ZudeAWdhHuh/CpOg==
 
-"@mantine/styles@5.10.5":
-  version "5.10.5"
-  resolved "https://registry.yarnpkg.com/@mantine/styles/-/styles-5.10.5.tgz#ace82a71b4fe3d14ee14638f1735d5680d93d36d"
-  integrity sha512-0NXk8c/XGzuTUkZc6KceF2NaTCMEu5mHR4ru0x+ttb9DGnLpHuGWduTHjSfr4hl6eAJgedD0zauO+VAhDzO9zA==
+"@mantine/notifications@^7.0.0":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-7.3.2.tgz#267b61c4c6af23387bf191c27cc04fc041eadd44"
+  integrity sha512-XOzgm4pm4XszavVN0QUjN+IP0xiG2IochxJSz/FduTI0r3u1WxdpvDYlOvEJpHhtWvyqI8W8rx6cPJaD2HdAwQ==
   dependencies:
-    clsx "1.1.1"
-    csstype "3.0.9"
+    "@mantine/store" "7.3.2"
+    react-transition-group "4.4.5"
 
-"@mantine/utils@5.10.5":
-  version "5.10.5"
-  resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-5.10.5.tgz#ad620d714e545c6efb7f69d94ce46e3fd2fe01fb"
-  integrity sha512-FGMq4dGs5HhDAtI0z46uzxzKKPmZ3h5uKUyKg1ZHoFR1mBtcUMbB6FylFmHqKFRWlJ5IXqX9dwmiVrLYUOfTmA==
+"@mantine/store@7.3.2":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@mantine/store/-/store-7.3.2.tgz#401d26095ed251673dd87ceab18e632e1f186a37"
+  integrity sha512-M1eWHzTRCeCFvrpFhXKIM9zblrlIT5/XrMue/fP2HrkA43dpkgq+ArnZkN3LhG9lWR/EKbRwQWDhDIvdLtfD7w==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -1468,96 +1449,6 @@
   dependencies:
     playwright "1.39.0"
 
-"@radix-ui/number@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
-  integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/primitive@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
-  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-compose-refs@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
-  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-context@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
-  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-direction@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
-  integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-presence@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
-  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-
-"@radix-ui/react-primitive@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a"
-  integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-slot" "1.0.1"
-
-"@radix-ui/react-scroll-area@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.2.tgz#26c906d351b56835c0301126b24574c9e9c7b93b"
-  integrity sha512-k8VseTxI26kcKJaX0HPwkvlNBPTs56JRdYzcZ/vzrNUkDlvXBy8sMc7WvCpYzZkHgb+hd72VW9MqkqecGtuNgg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/number" "1.0.0"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-direction" "1.0.0"
-    "@radix-ui/react-presence" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.1"
-    "@radix-ui/react-use-callback-ref" "1.0.0"
-    "@radix-ui/react-use-layout-effect" "1.0.0"
-
-"@radix-ui/react-slot@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
-  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-compose-refs" "1.0.0"
-
-"@radix-ui/react-use-callback-ref@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
-  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
-"@radix-ui/react-use-layout-effect@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
-  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-
 "@remix-run/router@1.10.0":
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.10.0.tgz#e2170dc2049b06e65bbe883adad0e8ddf8291278"
@@ -1771,10 +1662,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@^3.3.0":
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.4.tgz#cc477ce0283bb9d19ea0cbfa2941fe2c8493a1be"
-  integrity sha512-ZchYkbieA+7tnxwX/SCBySx9WwvWR8TaP5tb2jRAzwvLb/rWchGw3v0w3pqUbUvj0GCwW2Xz/AVPSk6kUGctXQ==
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
+  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
   dependencies:
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
@@ -1864,13 +1755,6 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.9.tgz#b6f785caa7ea1fe4414d9df42ee0ab67f23d8a6d"
   integrity sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==
 
-"@types/react-beautiful-dnd@^13.1.3":
-  version "13.1.6"
-  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.6.tgz#a616443903bfc370fee298b0144dbce7234d5561"
-  integrity sha512-FXAuaa52ux7HWQDumi3MFSAAsW8OKfDImy1pSZPKe85nV9mZ1f4spVzW0a2boYvkIhphjbWUi5EwUiRG8Rq/Qg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-dom@^18.0.0", "@types/react-dom@^18.0.6":
   version "18.2.13"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.13.tgz#89cd7f9ec8b28c8b6f0392b9591671fb4a9e96b7"
@@ -1878,16 +1762,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-redux@^7.1.20":
-  version "7.1.28"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.28.tgz#30a44303c7daceb6ede9cfb4aaf72e64f1dde4de"
-  integrity sha512-EQr7cChVzVUuqbA+J8ArWK1H0hLAHKOs21SIMrskKZ3nHNeE+LFYA+IsoZGhVOT8Ktjn3M20v4rnZKN3fLbypw==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.0"
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-    redux "^4.0.0"
-
 "@types/react@*", "@types/react@^18.0.21":
   version "18.2.29"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.29.tgz#88b48a287e00f6fdcd6f95662878fb701ae18b27"
@@ -1931,6 +1805,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.3.tgz#3d06b6769518450871fbc40770b7586334bdfd90"
   integrity sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/yargs-parser@*":
   version "21.0.1"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.1.tgz#07773d7160494d56aa882d7531aac7319ea67c3b"
@@ -2243,7 +2122,7 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-hidden@^1.1.3:
+aria-hidden@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
   integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
@@ -2694,6 +2573,11 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
 camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@@ -2849,10 +2733,10 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
-  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+clsx@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
 co@^4.6.0:
   version "4.6.0"
@@ -3049,7 +2933,7 @@ cross-zip@^4.0.0:
   resolved "https://registry.yarnpkg.com/cross-zip/-/cross-zip-4.0.0.tgz#c29bfb2c001659a6d480ae9596f3bee83b48a230"
   integrity sha512-MEzGfZo0rqE10O/B+AEcCSJLZsrWuRUvmqJTqHNqBtALhaJc3E3ixLGLJNTRzEA2K34wbmOHC4fwYs9sVsdcCA==
 
-css-box-model@^1.2.0:
+css-box-model@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
   integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
@@ -3061,6 +2945,11 @@ css.escape@^1.5.1:
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
   integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
 
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
@@ -3078,11 +2967,6 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@3.0.9:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
-  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
-
 csstype@^3.0.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
@@ -3249,6 +3133,11 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-node@^2.0.4:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@@ -3384,7 +3273,7 @@ electron-installer-redhat@^3.2.0:
     word-wrap "^1.2.3"
     yargs "^16.0.2"
 
-electron-packager@^17.1.1, electron-packager@^17.1.2:
+electron-packager@^17.1.2:
   version "17.1.2"
   resolved "https://registry.yarnpkg.com/electron-packager/-/electron-packager-17.1.2.tgz#18030b28024d242b706d0a8a67ed4cd1a57311aa"
   integrity sha512-XofXdikjYI7MVBcnXeoOvRR+yFFFHOLs3J7PF5KYQweigtgLshcH4W660PsvHr4lYZ03JBpLyEcUB8DzHZ+BNw==
@@ -4081,6 +3970,17 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-glob@^3.2.11:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-glob@^3.2.7, fast-glob@^3.2.9:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
@@ -4481,6 +4381,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@
     has-proto "^1.0.1"
     has-symbols "^1.0.3"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-package-info@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/get-package-info/-/get-package-info-1.0.0.tgz#6432796563e28113cd9474dbbd00052985a4999c"
@@ -4906,6 +4811,13 @@ interpret@^3.1.1:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
   integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.0.tgz#4cf4ab182fee2314c75ede1276f8c80b479936da"
@@ -5779,7 +5691,7 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
-klona@^2.0.5:
+klona@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
   integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
@@ -5971,7 +5883,7 @@ log-update@^5.0.1:
     strip-ansi "^7.0.1"
     wrap-ansi "^8.0.1"
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6080,10 +5992,10 @@ mem@^4.3.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
-memoize-one@^5.1.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
 
 merge-descriptors@1.0.1:
   version "1.0.1"
@@ -6821,7 +6733,52 @@ plist@^3.0.0, plist@^3.0.4, plist@^3.0.5:
     base64-js "^1.5.1"
     xmlbuilder "^15.1.1"
 
-postcss@^8.4.27:
+postcss-js@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-mixins@^9.0.4:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-mixins/-/postcss-mixins-9.0.4.tgz#75cd3cdb619a7e08c4c51ebb094db5f6d65b3831"
+  integrity sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==
+  dependencies:
+    fast-glob "^3.2.11"
+    postcss-js "^4.0.0"
+    postcss-simple-vars "^7.0.0"
+    sugarss "^4.0.1"
+
+postcss-nested@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
+  integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
+  dependencies:
+    postcss-selector-parser "^6.0.11"
+
+postcss-preset-mantine@^1.12.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/postcss-preset-mantine/-/postcss-preset-mantine-1.12.0.tgz#af4993dca6c99b3b8b4af98f8866da5a13c97703"
+  integrity sha512-WLsejZoNtsrpOEi/CItn98e+4NpgT/Av28XWfY0CqiWgd2NDOOxtEUNdPGtB33pGLwaV8FrhTpIhAIO8palTOw==
+  dependencies:
+    postcss-mixins "^9.0.4"
+    postcss-nested "^6.0.1"
+
+postcss-selector-parser@^6.0.11:
+  version "6.0.13"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
+  integrity sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-simple-vars@^7.0.0, postcss-simple-vars@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz#836b3097a54dcd13dbd3c36a5dbdd512fad2954c"
+  integrity sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==
+
+postcss@^8.4.27, postcss@^8.4.32:
   version "8.4.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9"
   integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==
@@ -6961,7 +6918,7 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-raf-schd@^4.0.2:
+raf-schd@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
@@ -6988,19 +6945,6 @@ rcedit@^3.0.1:
   dependencies:
     cross-spawn-windows-exe "^1.1.0"
 
-react-beautiful-dnd@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2"
-  integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    css-box-model "^1.2.0"
-    memoize-one "^5.1.1"
-    raf-schd "^4.0.2"
-    react-redux "^7.2.0"
-    redux "^4.0.4"
-    use-memo-one "^1.1.1"
-
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -7022,7 +6966,7 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1, react-is@^17.0.2:
+react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -7032,23 +6976,49 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-redux@^7.2.0:
-  version "7.2.9"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
-  integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==
+react-number-format@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-5.3.1.tgz#840c257da9cb4b248990d8db46e4d23e8bac67ff"
+  integrity sha512-qpYcQLauIeEhCZUZY9jXZnnroOtdy3jYaS1zQ3M1Sr6r/KMOBEIGNIb7eKT19g2N1wbYgFgvDzs19hw5TrB8XQ==
   dependencies:
-    "@babel/runtime" "^7.15.4"
-    "@types/react-redux" "^7.1.20"
-    hoist-non-react-statics "^3.3.2"
-    loose-envify "^1.4.0"
     prop-types "^15.7.2"
-    react-is "^17.0.2"
+
+react-redux@^8.1.3:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.3.tgz#4fdc0462d0acb59af29a13c27ffef6f49ab4df46"
+  integrity sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
 
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
+react-remove-scroll-bar@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@^2.5.7:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb"
+  integrity sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==
+  dependencies:
+    react-remove-scroll-bar "^2.3.4"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-router-dom@^6.4.5:
   version "6.17.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.17.0.tgz#ea73f89186546c1cf72b10fcb7356d874321b2ad"
@@ -7064,19 +7034,28 @@ react-router@6.17.0:
   dependencies:
     "@remix-run/router" "1.10.0"
 
-react-textarea-autosize@8.3.4:
-  version "8.3.4"
-  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz#270a343de7ad350534141b02c9cb78903e553524"
-  integrity sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==
+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
   dependencies:
-    "@babel/runtime" "^7.10.2"
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
+react-textarea-autosize@8.5.3:
+  version "8.5.3"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz#d1e9fe760178413891484847d3378706052dd409"
+  integrity sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
     use-composed-ref "^1.3.0"
     use-latest "^1.2.1"
 
-react-transition-group@4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+react-transition-group@4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
     "@babel/runtime" "^7.5.5"
     dom-helpers "^5.0.1"
@@ -7154,7 +7133,7 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux@^4.0.0, redux@^4.0.4:
+redux@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
@@ -7862,6 +7841,11 @@ sudo-prompt@^9.1.1:
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd"
   integrity sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==
 
+sugarss@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-4.0.1.tgz#128a783ed71ee0fc3b489ce1f7d5a89bc1e24383"
+  integrity sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==
+
 sumchecker@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
@@ -8130,6 +8114,11 @@ type-fest@^1.0.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
   integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
 
+type-fest@^3.13.1:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
+  integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -8259,6 +8248,13 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
 use-composed-ref@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
@@ -8281,12 +8277,20 @@ use-latest@^1.2.1:
   dependencies:
     use-isomorphic-layout-effect "^1.1.1"
 
-use-memo-one@^1.1.1:
+use-memo-one@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
   integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
 
-use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
+use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
@@ -8299,7 +8303,7 @@ username@^5.1.0:
     execa "^1.0.0"
     mem "^4.3.0"
 
-util-deprecate@^1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==