diff --git a/package.json b/package.json
index fdd982af7..f855bdcf8 100644
--- a/package.json
+++ b/package.json
@@ -30,29 +30,35 @@
 		"@dnd-kit/core": "^6.0.5",
 		"@dnd-kit/sortable": "^7.0.1",
 		"@dnd-kit/utilities": "^3.2.0",
-		"@mantine/core": "^4.2.12",
-		"@mantine/dates": "^4.2.12",
-		"@mantine/dropzone": "^4.2.12",
-		"@mantine/form": "^4.2.12",
-		"@mantine/hooks": "^4.2.12",
-		"@mantine/next": "^4.2.12",
-		"@mantine/notifications": "^4.2.12",
-		"@mantine/prism": "^4.2.12",
+		"@emotion/react": "^11.10.0",
+		"@emotion/server": "^11.10.0",
+		"@mantine/carousel": "^5.0.0",
+		"@mantine/core": "^5.0.2",
+		"@mantine/dates": "^5.0.2",
+		"@mantine/dropzone": "^5.0.2",
+		"@mantine/form": "^5.0.2",
+		"@mantine/hooks": "^5.0.2",
+		"@mantine/next": "^5.0.2",
+		"@mantine/notifications": "^5.0.2",
+		"@mantine/prism": "^5.0.0",
 		"@nivo/core": "^0.79.0",
 		"@nivo/line": "^0.79.1",
 		"@tabler/icons": "^1.78.0",
+		"add": "^2.0.6",
 		"axios": "^0.27.2",
 		"cookies-next": "^2.1.1",
 		"dayjs": "^1.11.4",
 		"dockerode": "^3.3.2",
+		"embla-carousel-react": "^7.0.0-rc05",
 		"framer-motion": "^6.5.1",
 		"js-file-download": "^0.4.12",
 		"next": "12.1.6",
 		"prism-react-renderer": "^1.3.5",
-		"react": "^17.0.1",
-		"react-dom": "^17.0.1",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"systeminformation": "^5.12.1",
-		"uuid": "^8.3.2"
+		"uuid": "^8.3.2",
+		"yarn": "^1.22.19"
 	},
 	"devDependencies": {
 		"@next/bundle-analyzer": "^12.1.4",
diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
index f319138da..e603e1ad1 100644
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -10,6 +10,7 @@ import {
   MultiSelect,
   PasswordInput,
   Select,
+  Stack,
   Switch,
   Tabs,
   TextInput,
@@ -18,7 +19,7 @@ import {
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
-import { IconApps as Apps } from '@tabler/icons';
+import { IconApps } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
@@ -38,18 +39,18 @@ export function AddItemShelfButton(props: any) {
       >
         <AddAppShelfItemForm setOpened={setOpened} />
       </Modal>
-      <ActionIcon
-        variant="default"
-        radius="md"
-        size="xl"
-        color="blue"
-        style={props.style}
-        onClick={() => setOpened(true)}
-      >
-        <Tooltip label="Add a service">
-          <Apps />
-        </Tooltip>
-      </ActionIcon>
+      <Tooltip withinPortal label="Add a service">
+        <ActionIcon
+          variant="default"
+          radius="md"
+          size="xl"
+          color="blue"
+          style={props.style}
+          onClick={() => setOpened(true)}
+        >
+          <IconApps />
+        </ActionIcon>
+      </Tooltip>
     </>
   );
 }
@@ -85,25 +86,26 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
   const [isLoading, setLoading] = useState(false);
 
   // Extract all the categories from the services in config
-  const categoryList = config.services.reduce((acc, cur) => {
+  const InitialCategories = config.services.reduce((acc, cur) => {
     if (cur.category && !acc.includes(cur.category)) {
       acc.push(cur.category);
     }
     return acc;
   }, [] as string[]);
+  const [categories, setCategories] = useState<string[]>(InitialCategories);
 
   const form = useForm({
     initialValues: {
       id: props.id ?? uuidv4(),
       type: props.type ?? 'Other',
-      category: props.category ?? undefined,
+      category: props.category ?? null,
       name: props.name ?? '',
       icon: props.icon ?? DEFAULT_ICON,
       url: props.url ?? '',
-      apiKey: props.apiKey ?? (undefined as unknown as string),
-      username: props.username ?? (undefined as unknown as string),
-      password: props.password ?? (undefined as unknown as string),
-      openedUrl: props.openedUrl ?? (undefined as unknown as string),
+      apiKey: props.apiKey ?? undefined,
+      username: props.username ?? undefined,
+      password: props.password ?? undefined,
+      openedUrl: props.openedUrl ?? undefined,
       status: props.status ?? ['200'],
       newTab: props.newTab ?? true,
     },
@@ -162,21 +164,21 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       </Center>
       <form
         onSubmit={form.onSubmit(() => {
-          if (JSON.stringify(form.values.status) === JSON.stringify(['200'])) {
-            form.values.status = undefined;
-          }
-          if (form.values.newTab === true) {
-            form.values.newTab = undefined;
+          const newForm = { ...form.values };
+          if (newForm.newTab === true) newForm.newTab = undefined;
+          if (newForm.category === null) newForm.category = undefined;
+          if (newForm.status.length === 1 && newForm.status[0] === '200') {
+            delete newForm.status;
           }
           // If service already exists, update it.
-          if (config.services && config.services.find((s) => s.id === form.values.id)) {
+          if (config.services && config.services.find((s) => s.id === newForm.id)) {
             setConfig({
               ...config,
               // replace the found item by matching ID
               services: config.services.map((s) => {
-                if (s.id === form.values.id) {
+                if (s.id === newForm.id) {
                   return {
-                    ...form.values,
+                    ...newForm,
                   };
                 }
                 return s;
@@ -185,23 +187,26 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
           } else {
             setConfig({
               ...config,
-              services: [...config.services, form.values],
+              services: [...config.services, newForm],
             });
           }
           setOpened(false);
           form.reset();
         })}
       >
-        <Tabs grow>
-          <Tabs.Tab label="Options">
-            <Group direction="column" grow>
+        <Tabs defaultValue="Options">
+          <Tabs.List grow>
+            <Tabs.Tab value="Options">Options</Tabs.Tab>
+            <Tabs.Tab value="Advanced Options">Advanced options</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel value="Options">
+            <Stack>
               <TextInput
                 required
                 label="Service name"
                 placeholder="Plex"
                 {...form.getInputProps('name')}
               />
-
               <TextInput
                 required
                 label="Icon URL"
@@ -230,17 +235,18 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               />
               <Select
                 label="Category"
-                data={categoryList}
+                data={categories}
                 placeholder="Select a category or create a new one"
                 nothingFound="Nothing found"
                 searchable
                 clearable
                 creatable
-                onClick={(e) => {
-                  e.preventDefault();
+                onCreate={(query) => {
+                  const item = { value: query, label: query };
+                  setCategories([...InitialCategories, query]);
+                  return item;
                 }}
                 getCreateLabel={(query) => `+ Create "${query}"`}
-                onCreate={(query) => {}}
                 {...form.getInputProps('category')}
               />
               <LoadingOverlay visible={isLoading} />
@@ -331,10 +337,10 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                   />
                 </>
               )}
-            </Group>
-          </Tabs.Tab>
-          <Tabs.Tab label="Advanced Options">
-            <Group direction="column" grow>
+            </Stack>
+          </Tabs.Panel>
+          <Tabs.Panel value="Advanced Options">
+            <Stack>
               <MultiSelect
                 required
                 label="HTTP Status Codes"
@@ -352,8 +358,8 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                 defaultChecked={form.values.newTab}
                 {...form.getInputProps('newTab')}
               />
-            </Group>
-          </Tabs.Tab>
+            </Stack>
+          </Tabs.Panel>
         </Tabs>
         <Group grow position="center" mt="xl">
           <Button type="submit">{props.message ?? 'Add service'}</Button>
diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index 2d461663f..b557ba9af 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion, createStyles, Grid, Group, Paper, useMantineColorScheme } from '@mantine/core';
+import { Accordion, Grid, Paper, Stack, useMantineColorScheme } from '@mantine/core';
 import {
   closestCenter,
   DndContext,
@@ -18,44 +18,22 @@ import { ModuleMenu, ModuleWrapper } from '../../modules/moduleWrapper';
 import { DownloadsModule } from '../../modules';
 import DownloadComponent from '../../modules/downloads/DownloadsModule';
 
-const useStyles = createStyles((theme, _params) => ({
-  item: {
-    overflow: 'hidden',
-    borderLeft: '3px solid transparent',
-    borderRight: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    borderRadius: '20px',
-    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-    marginTop: theme.spacing.md,
-  },
-
-  control: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-    borderRadius: theme.spacing.md,
-
-    '&:hover': {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-    },
-  },
-
-  content: {
-    margin: theme.spacing.md,
-  },
-
-  label: {
-    overflow: 'visible',
-  },
-}));
-
 const AppShelf = (props: any) => {
-  const { classes, cx } = useStyles(props);
-  const [toggledCategories, settoggledCategories] = useLocalStorage({
+  const { config, setConfig } = useConfig();
+  // Extract all the categories from the services in config
+  const categoryList = config.services.reduce((acc, cur) => {
+    if (cur.category && !acc.includes(cur.category)) {
+      acc.push(cur.category);
+    }
+    return acc;
+  }, [] as string[]);
+
+  const [toggledCategories, setToggledCategories] = useLocalStorage({
     key: 'app-shelf-toggled',
-    // This is a bit of a hack to get the 5 first categories to be toggled on by default
-    defaultValue: { 0: true, 1: true, 2: true, 3: true, 4: true } as Record<string, boolean>,
+    // This is a bit of a hack to toggle the categories on the first load, return a string[] of the categories
+    defaultValue: categoryList,
   });
   const [activeId, setActiveId] = useState(null);
-  const { config, setConfig } = useConfig();
   const { colorScheme } = useMantineColorScheme();
 
   const sensors = useSensors(
@@ -93,15 +71,8 @@ const AppShelf = (props: any) => {
 
     setActiveId(null);
   }
-  // Extract all the categories from the services in config
-  const categoryList = config.services.reduce((acc, cur) => {
-    if (cur.category && !acc.includes(cur.category)) {
-      acc.push(cur.category);
-    }
-    return acc;
-  }, [] as string[]);
 
-  const item = (filter?: string) => {
+  const getItems = (filter?: string) => {
     // If filter is not set, return all the services without a category or a null category
     let filtered = config.services;
     if (!filter) {
@@ -155,54 +126,62 @@ const AppShelf = (props: any) => {
     const downloadEnabled = config.modules?.[DownloadsModule.title]?.enabled ?? false;
     // Create an item with 0: true, 1: true, 2: true... For each category
     return (
-      // Return one item for each category
-      <Group grow direction="column">
+      // TODO: Style accordion so that the bar is transparent to the user settings
+      <Stack>
         <Accordion
-          disableIconRotation
-          classNames={classes}
+          variant="separated"
+          radius="lg"
           order={2}
-          iconPosition="right"
           multiple
-          initialState={toggledCategories}
-          onChange={(idx) => settoggledCategories(idx)}
+          value={toggledCategories}
+          onChange={(state) => {
+            setToggledCategories(state);
+          }}
         >
           {categoryList.map((category, idx) => (
-            <Accordion.Item key={category} label={category}>
-              {item(category)}
+            <Accordion.Item key={category} value={idx.toString()}>
+              <Accordion.Control>{category}</Accordion.Control>
+              <Accordion.Panel>{getItems(category)}</Accordion.Panel>
             </Accordion.Item>
           ))}
           {/* Return the item for all services without category */}
           {noCategory && noCategory.length > 0 ? (
-            <Accordion.Item key="Other" label="Other">
-              {item()}
+            <Accordion.Item key="Other" value="Other">
+              <Accordion.Control>Other</Accordion.Control>
+              <Accordion.Panel>{getItems()}</Accordion.Panel>
             </Accordion.Item>
           ) : null}
           {downloadEnabled ? (
-            <Accordion.Item key="Downloads" label="Your downloads">
-              <Paper
-                p="lg"
-                radius="lg"
-                style={{
-                  background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+            <Accordion.Item key="Downloads" value="Your downloads">
+              <Accordion.Control>Your downloads</Accordion.Control>
+              <Accordion.Panel>
+                <Paper
+                  p="lg"
+                  radius="lg"
+                  style={{
+                    background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
                 ${(config.settings.appOpacity || 100) / 100}`,
-                  borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+                    borderColor: `rgba(${
+                      colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'
+                    } \
                 ${(config.settings.appOpacity || 100) / 100}`,
-                }}
-              >
-                <ModuleMenu module={DownloadsModule} />
-                <DownloadComponent />
-              </Paper>
+                  }}
+                >
+                  <ModuleMenu module={DownloadsModule} />
+                  <DownloadComponent />
+                </Paper>
+              </Accordion.Panel>
             </Accordion.Item>
           ) : null}
         </Accordion>
-      </Group>
+      </Stack>
     );
   }
   return (
-    <Group grow direction="column">
-      {item()}
+    <Stack>
+      {getItems()}
       <ModuleWrapper mt="xl" module={DownloadsModule} />
-    </Group>
+    </Stack>
   );
 };
 
diff --git a/src/components/AppShelf/AppShelfMenu.tsx b/src/components/AppShelf/AppShelfMenu.tsx
index 78f9b10ad..ced81000d 100644
--- a/src/components/AppShelf/AppShelfMenu.tsx
+++ b/src/components/AppShelf/AppShelfMenu.tsx
@@ -1,7 +1,7 @@
-import { Menu, Modal, Text, useMantineTheme } from '@mantine/core';
+import { ActionIcon, Menu, Modal, Text, useMantineTheme } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
-import { IconCheck as Check, IconEdit as Edit, IconTrash as Trash } from '@tabler/icons';
+import { IconCheck as Check, IconEdit as Edit, IconMenu, IconTrash as Trash } from '@tabler/icons';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import { AddAppShelfItemForm } from './AddAppShelfItem';
@@ -23,49 +23,59 @@ export default function AppShelfMenu(props: any) {
         <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
       </Modal>
       <Menu
-        position="right"
-        radius="md"
+        withinPortal
+        width={150}
         shadow="xl"
+        withArrow
+        radius="md"
+        position="right"
         styles={{
-          body: {
+          dropdown: {
             // Add shadow and elevation to the body
             boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
           },
         }}
       >
-        <Menu.Label>Settings</Menu.Label>
-        <Menu.Item
-          color="primary"
-          icon={<Edit />}
-          // TODO: #2 Add the ability to edit the service.
-          onClick={() => setOpened(true)}
-        >
-          Edit
-        </Menu.Item>
-        <Menu.Label>Danger zone</Menu.Label>
-        <Menu.Item
-          color="red"
-          onClick={(e: any) => {
-            setConfig({
-              ...config,
-              services: config.services.filter((s) => s.id !== service.id),
-            });
-            showNotification({
-              autoClose: 5000,
-              title: (
-                <Text>
-                  Service <b>{service.name}</b> removed successfully!
-                </Text>
-              ),
-              color: 'green',
-              icon: <Check />,
-              message: undefined,
-            });
-          }}
-          icon={<Trash />}
-        >
-          Delete
-        </Menu.Item>
+        <Menu.Target>
+          <ActionIcon style={{}}>
+            <IconMenu />
+          </ActionIcon>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Label>Settings</Menu.Label>
+          <Menu.Item
+            color="primary"
+            icon={<Edit />}
+            // TODO: #2 Add the ability to edit the service.
+            onClick={() => setOpened(true)}
+          >
+            Edit
+          </Menu.Item>
+          <Menu.Label>Danger zone</Menu.Label>
+          <Menu.Item
+            color="red"
+            onClick={(e: any) => {
+              setConfig({
+                ...config,
+                services: config.services.filter((s) => s.id !== service.id),
+              });
+              showNotification({
+                autoClose: 5000,
+                title: (
+                  <Text>
+                    Service <b>{service.name}</b> removed successfully!
+                  </Text>
+                ),
+                color: 'green',
+                icon: <Check />,
+                message: undefined,
+              });
+            }}
+            icon={<Trash />}
+          >
+            Delete
+          </Menu.Item>
+        </Menu.Dropdown>
       </Menu>
     </>
   );
diff --git a/src/components/Config/ConfigChanger.tsx b/src/components/Config/ConfigChanger.tsx
index 14e8cf5e5..b2c5a3898 100644
--- a/src/components/Config/ConfigChanger.tsx
+++ b/src/components/Config/ConfigChanger.tsx
@@ -5,25 +5,27 @@ import { useConfig } from '../../tools/state';
 
 export default function ConfigChanger() {
   const { config, loadConfig, setConfig, getConfigs } = useConfig();
-  const [configList, setConfigList] = useState([] as string[]);
+  const [configList, setConfigList] = useState<string[]>([]);
+  const [value, setValue] = useState(config.name);
   useEffect(() => {
     getConfigs().then((configs) => setConfigList(configs));
-    // setConfig(initialConfig);
   }, [config]);
   // If configlist is empty, return a loading indicator
   if (configList.length === 0) {
     return (
-      <Center>
-        <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+      <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+        <Center>
           <Loader />
-        </Tooltip>
-      </Center>
+        </Center>
+      </Tooltip>
     );
   }
+  // return <Select data={[{ value: '1', label: '1' },]} onChange={(e) => console.log(e)} value="1" />;
   return (
     <Select
-      defaultValue={config.name}
       label="Config loader"
+      value={value}
+      defaultValue={config.name}
       onChange={(e) => {
         loadConfig(e ?? 'default');
         setCookie('config-name', e ?? 'default', {
diff --git a/src/components/Config/LoadConfig.tsx b/src/components/Config/LoadConfig.tsx
index 6935c1f72..75d6972fa 100644
--- a/src/components/Config/LoadConfig.tsx
+++ b/src/components/Config/LoadConfig.tsx
@@ -1,68 +1,18 @@
-import { Group, Text, useMantineTheme, MantineTheme } from '@mantine/core';
-import {
-  IconUpload as Upload,
-  IconPhoto as Photo,
-  IconX as X,
-  IconCheck as Check,
-  TablerIcon,
-} from '@tabler/icons';
-import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
+import { Group, Text, useMantineTheme } from '@mantine/core';
+import { IconX as X, IconCheck as Check, IconX, IconPhoto, IconUpload } from '@tabler/icons';
 import { showNotification } from '@mantine/notifications';
-import { useRef } from 'react';
-import { useRouter } from 'next/router';
 import { setCookie } from 'cookies-next';
+import { Dropzone } from '@mantine/dropzone';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 import { migrateToIdConfig } from '../../tools/migrate';
 
-function getIconColor(status: DropzoneStatus, theme: MantineTheme) {
-  return status.accepted
-    ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
-    : status.rejected
-    ? theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]
-    : theme.colorScheme === 'dark'
-    ? theme.colors.dark[0]
-    : theme.colors.gray[7];
-}
-
-function ImageUploadIcon({
-  status,
-  ...props
-}: React.ComponentProps<TablerIcon> & { status: DropzoneStatus }) {
-  if (status.accepted) {
-    return <Upload {...props} />;
-  }
-
-  if (status.rejected) {
-    return <X {...props} />;
-  }
-
-  return <Photo {...props} />;
-}
-
-export const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) => (
-  <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
-    <ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} />
-
-    <div>
-      <Text size="xl" inline>
-        Drag images here or click to select files
-      </Text>
-      <Text size="sm" color="dimmed" inline mt={7}>
-        Attach as many files as you like, each file should not exceed 5mb
-      </Text>
-    </div>
-  </Group>
-);
-
 export default function LoadConfigComponent(props: any) {
   const { setConfig } = useConfig();
   const theme = useMantineTheme();
-  const router = useRouter();
-  const openRef = useRef<() => void>();
 
   return (
-    <FullScreenDropzone
+    <Dropzone.FullScreen
       onDrop={(files) => {
         files[0].text().then((e) => {
           try {
@@ -100,7 +50,31 @@ export default function LoadConfigComponent(props: any) {
       }}
       accept={['application/json']}
     >
-      {(status) => dropzoneChildren(status, theme)}
-    </FullScreenDropzone>
+      <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
+        <Dropzone.Accept>
+          <Text size="xl" inline>
+            <IconUpload
+              size={50}
+              stroke={1.5}
+              color={theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]}
+            />
+            Drag files here to upload a config. Support for JSON only.
+          </Text>
+        </Dropzone.Accept>
+        <Dropzone.Reject>
+          <Text size="xl" inline>
+            <IconX
+              size={50}
+              stroke={1.5}
+              color={theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]}
+            />
+            This file format is not supported. Please only upload JSON.
+          </Text>
+        </Dropzone.Reject>
+        <Dropzone.Idle>
+          <IconPhoto size={50} stroke={1.5} />
+        </Dropzone.Idle>
+      </Group>
+    </Dropzone.FullScreen>
   );
 }
diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
index 4c7d6a50e..536675c78 100644
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -1,4 +1,4 @@
-import { TextInput, Group, Button } from '@mantine/core';
+import { TextInput, Button, Stack } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useConfig } from '../../tools/state';
 import { ColorSelector } from './ColorSelector';
@@ -37,9 +37,9 @@ export default function TitleChanger() {
   };
 
   return (
-    <Group direction="column" grow mb="lg">
+    <Stack mb="md" mr="sm" mt="xs">
       <form onSubmit={form.onSubmit((values) => saveChanges(values))}>
-        <Group grow direction="column">
+        <Stack>
           <TextInput label="Page title" placeholder="Homarr 🦞" {...form.getInputProps('title')} />
           <TextInput label="Logo" placeholder="/img/logo.png" {...form.getInputProps('logo')} />
           <TextInput
@@ -53,13 +53,13 @@ export default function TitleChanger() {
             {...form.getInputProps('background')}
           />
           <Button type="submit">Save</Button>
-        </Group>
+        </Stack>
       </form>
       <ColorSelector type="primary" />
       <ColorSelector type="secondary" />
       <ShadeSelector />
       <OpacitySelector />
       <AppCardWidthSelector />
-    </Group>
+    </Stack>
   );
 }
diff --git a/src/components/Settings/AppCardWidthSelector.tsx b/src/components/Settings/AppCardWidthSelector.tsx
index 945778e67..26b453cd3 100644
--- a/src/components/Settings/AppCardWidthSelector.tsx
+++ b/src/components/Settings/AppCardWidthSelector.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Group, Text, Slider } from '@mantine/core';
+import { Text, Slider, Stack } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 
 export function AppCardWidthSelector() {
@@ -16,7 +16,7 @@ export function AppCardWidthSelector() {
   };
 
   return (
-    <Group direction="column" spacing="xs" grow>
+    <Stack spacing="xs">
       <Text>App Width</Text>
       <Slider
         label={null}
@@ -27,6 +27,6 @@ export function AppCardWidthSelector() {
         styles={{ markLabel: { fontSize: 'xx-small' } }}
         onChange={(value) => setappCardWidth(value)}
       />
-    </Group>
+    </Stack>
   );
 }
diff --git a/src/components/Settings/ColorSelector.tsx b/src/components/Settings/ColorSelector.tsx
index e7f175b3d..68a762989 100644
--- a/src/components/Settings/ColorSelector.tsx
+++ b/src/components/Settings/ColorSelector.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ColorSwatch, Group, Popover, Text, useMantineTheme } from '@mantine/core';
+import { ColorSwatch, Grid, Group, Popover, Text, useMantineTheme } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { useColorTheme } from '../../tools/color';
 
@@ -44,51 +44,43 @@ export function ColorSelector({ type }: ColorControlProps) {
   };
 
   const swatches = colors.map(({ color, swatch }) => (
-    <ColorSwatch
-      component="button"
-      type="button"
-      onClick={() => setConfigColor(color)}
-      key={color}
-      color={swatch}
-      size={22}
-      style={{ color: theme.white, cursor: 'pointer' }}
-    />
+    <Grid.Col span={2} key={color}>
+      <ColorSwatch
+        component="button"
+        type="button"
+        onClick={() => setConfigColor(color)}
+        color={swatch}
+        size={22}
+        style={{ cursor: 'pointer' }}
+      />
+    </Grid.Col>
   ));
 
   return (
-    <Group direction="row" spacing={3}>
+    <Group>
       <Popover
+        width={250}
+        withinPortal
         opened={opened}
         onClose={() => setOpened(false)}
-        transitionDuration={0}
-        target={
+        position="left"
+        withArrow
+      >
+        <Popover.Target>
           <ColorSwatch
             component="button"
             type="button"
             color={theme.colors[configColor][6]}
             onClick={() => setOpened((o) => !o)}
             size={22}
-            style={{ display: 'block', cursor: 'pointer' }}
+            style={{ cursor: 'pointer' }}
           />
-        }
-        styles={{
-          root: {
-            marginRight: theme.spacing.xs,
-          },
-          body: {
-            width: 152,
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-          arrow: {
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-        }}
-        position="bottom"
-        placement="end"
-        withArrow
-        arrowSize={3}
-      >
-        <Group spacing="xs">{swatches}</Group>
+        </Popover.Target>
+        <Popover.Dropdown>
+          <Grid gutter="lg" columns={14}>
+            {swatches}
+          </Grid>
+        </Popover.Dropdown>
       </Popover>
       <Text>{type[0].toUpperCase() + type.slice(1)} color</Text>
     </Group>
diff --git a/src/components/Settings/CommonSettings.tsx b/src/components/Settings/CommonSettings.tsx
index 4d55eee18..739f65869 100644
--- a/src/components/Settings/CommonSettings.tsx
+++ b/src/components/Settings/CommonSettings.tsx
@@ -1,4 +1,4 @@
-import { Group, Text, SegmentedControl, TextInput } from '@mantine/core';
+import { Text, SegmentedControl, TextInput, Stack } from '@mantine/core';
 import { useState } from 'react';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
@@ -24,8 +24,8 @@ export default function CommonSettings(args: any) {
   );
 
   return (
-    <Group direction="column" grow mb="lg">
-      <Group grow direction="column" spacing={0}>
+    <Stack mb="md" mr="sm">
+      <Stack spacing={0} mt="xs">
         <Text>Search engine</Text>
         <Tip>
           Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube or
@@ -74,13 +74,13 @@ export default function CommonSettings(args: any) {
             />
           </>
         )}
-      </Group>
+      </Stack>
       <ColorSchemeSwitch />
       <WidgetsPositionSwitch />
       <ModuleEnabler />
       <ConfigChanger />
       <SaveConfigComponent />
       <Tip>Upload your config file by dragging and dropping it onto the page!</Tip>
-    </Group>
+    </Stack>
   );
 }
diff --git a/src/components/Settings/Credits.tsx b/src/components/Settings/Credits.tsx
index 1d6271479..73778b0d5 100644
--- a/src/components/Settings/Credits.tsx
+++ b/src/components/Settings/Credits.tsx
@@ -4,7 +4,7 @@ import { CURRENT_VERSION } from '../../../data/constants';
 
 export default function Credits(props: any) {
   return (
-    <Group position="center" direction="row" mr="xs">
+    <Group position="center" mt="xs">
       <Group spacing={0}>
         <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
           <IconBrandGithub size={18} />
diff --git a/src/components/Settings/ModuleEnabler.tsx b/src/components/Settings/ModuleEnabler.tsx
index 4e11e6065..61cfbac07 100644
--- a/src/components/Settings/ModuleEnabler.tsx
+++ b/src/components/Settings/ModuleEnabler.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, Group, SimpleGrid, Title } from '@mantine/core';
+import { Checkbox, SimpleGrid, Stack, Title } from '@mantine/core';
 import * as Modules from '../../modules';
 import { useConfig } from '../../tools/state';
 
@@ -6,13 +6,13 @@ export default function ModuleEnabler(props: any) {
   const { config, setConfig } = useConfig();
   const modules = Object.values(Modules).map((module) => module);
   return (
-    <Group direction="column">
+    <Stack>
       <Title order={4}>Module enabler</Title>
-      <SimpleGrid cols={2} spacing="md">
+      <SimpleGrid cols={3} spacing="xs">
         {modules.map((module) => (
           <Checkbox
             key={module.title}
-            size="md"
+            size="lg"
             checked={config.modules?.[module.title]?.enabled ?? false}
             label={`${module.title}`}
             onChange={(e) => {
@@ -30,6 +30,6 @@ export default function ModuleEnabler(props: any) {
           />
         ))}
       </SimpleGrid>
-    </Group>
+    </Stack>
   );
 }
diff --git a/src/components/Settings/OpacitySelector.tsx b/src/components/Settings/OpacitySelector.tsx
index f94225cd8..9e6ca1594 100644
--- a/src/components/Settings/OpacitySelector.tsx
+++ b/src/components/Settings/OpacitySelector.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Group, Text, Slider } from '@mantine/core';
+import { Text, Slider, Stack } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 
 export function OpacitySelector() {
@@ -29,7 +29,7 @@ export function OpacitySelector() {
   };
 
   return (
-    <Group direction="column" spacing="xs" grow>
+    <Stack spacing="xs">
       <Text>App Opacity</Text>
       <Slider
         defaultValue={config.settings.appOpacity || 100}
@@ -39,6 +39,6 @@ export function OpacitySelector() {
         styles={{ markLabel: { fontSize: 'xx-small' } }}
         onChange={(value) => setConfigOpacity(value)}
       />
-    </Group>
+    </Stack>
   );
 }
diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx
index fcd6d1b91..3d66ad73c 100644
--- a/src/components/Settings/SettingsMenu.tsx
+++ b/src/components/Settings/SettingsMenu.tsx
@@ -8,17 +8,21 @@ import Credits from './Credits';
 
 function SettingsMenu(props: any) {
   return (
-    <Tabs grow>
-      <Tabs.Tab data-autofocus label="Common">
+    <Tabs defaultValue="Common">
+      <Tabs.List grow>
+        <Tabs.Tab value="Common">Common</Tabs.Tab>
+        <Tabs.Tab value="Customizations">Customizations</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel data-autofocus value="Common">
         <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
           <CommonSettings />
         </ScrollArea>
-      </Tabs.Tab>
-      <Tabs.Tab label="Customizations">
+      </Tabs.Panel>
+      <Tabs.Panel value="Customizations">
         <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
           <AdvancedSettings />
         </ScrollArea>
-      </Tabs.Tab>
+      </Tabs.Panel>
     </Tabs>
   );
 }
@@ -40,18 +44,18 @@ export function SettingsMenuButton(props: any) {
         <SettingsMenu />
         <Credits />
       </Drawer>
-      <ActionIcon
-        variant="default"
-        radius="md"
-        size="xl"
-        color="blue"
-        style={props.style}
-        onClick={() => setOpened(true)}
-      >
-        <Tooltip label="Settings">
+      <Tooltip label="Settings">
+        <ActionIcon
+          variant="default"
+          radius="md"
+          size="xl"
+          color="blue"
+          style={props.style}
+          onClick={() => setOpened(true)}
+        >
           <IconSettings />
-        </Tooltip>
-      </ActionIcon>
+        </ActionIcon>
+      </Tooltip>
     </>
   );
 }
diff --git a/src/components/Settings/ShadeSelector.tsx b/src/components/Settings/ShadeSelector.tsx
index ebd55e84d..addbf0906 100644
--- a/src/components/Settings/ShadeSelector.tsx
+++ b/src/components/Settings/ShadeSelector.tsx
@@ -1,5 +1,14 @@
 import React, { useState } from 'react';
-import { ColorSwatch, Group, Popover, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import {
+  ColorSwatch,
+  Group,
+  Popover,
+  Text,
+  useMantineTheme,
+  MantineTheme,
+  Stack,
+  Grid,
+} from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { useColorTheme } from '../../tools/color';
 
@@ -31,36 +40,42 @@ export function ShadeSelector() {
   };
 
   const primarySwatches = primaryShades.map(({ swatch, shade }) => (
-    <ColorSwatch
-      component="button"
-      type="button"
-      onClick={() => setConfigShade(shade)}
-      key={Number(shade)}
-      color={swatch}
-      size={22}
-      style={{ color: theme.white, cursor: 'pointer' }}
-    />
+    <Grid.Col span={1} key={Number(shade)}>
+      <ColorSwatch
+        component="button"
+        type="button"
+        onClick={() => setConfigShade(shade)}
+        color={swatch}
+        size={22}
+        style={{ cursor: 'pointer' }}
+      />
+    </Grid.Col>
   ));
 
   const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
-    <ColorSwatch
-      component="button"
-      type="button"
-      onClick={() => setConfigShade(shade)}
-      key={Number(shade)}
-      color={swatch}
-      size={22}
-      style={{ color: theme.white, cursor: 'pointer' }}
-    />
+    <Grid.Col span={1} key={Number(shade)}>
+      <ColorSwatch
+        component="button"
+        type="button"
+        onClick={() => setConfigShade(shade)}
+        color={swatch}
+        size={22}
+        style={{ cursor: 'pointer' }}
+      />
+    </Grid.Col>
   ));
 
   return (
-    <Group direction="row" spacing={3}>
+    <Group>
       <Popover
+        width={350}
+        withinPortal
         opened={opened}
         onClose={() => setOpened(false)}
-        transitionDuration={0}
-        target={
+        position="left"
+        withArrow
+      >
+        <Popover.Target>
           <ColorSwatch
             component="button"
             type="button"
@@ -69,27 +84,15 @@ export function ShadeSelector() {
             size={22}
             style={{ display: 'block', cursor: 'pointer' }}
           />
-        }
-        styles={{
-          root: {
-            marginRight: theme.spacing.xs,
-          },
-          body: {
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-          arrow: {
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
-          },
-        }}
-        position="bottom"
-        placement="end"
-        withArrow
-        arrowSize={3}
-      >
-        <Group direction="column" spacing="xs">
-          <Group spacing="xs">{primarySwatches}</Group>
-          <Group spacing="xs">{secondarySwatches}</Group>
-        </Group>
+        </Popover.Target>
+        <Popover.Dropdown>
+          <Stack spacing="xs">
+            <Grid gutter="lg" columns={10}>
+              {primarySwatches}
+              {secondarySwatches}
+            </Grid>
+          </Stack>
+        </Popover.Dropdown>
       </Popover>
       <Text>Shade</Text>
     </Group>
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index be3120a8d..7d675f5a8 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,5 +1,4 @@
 import { Box, createStyles, Group, Header as Head } from '@mantine/core';
-import { useBooleanToggle } from '@mantine/hooks';
 import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
 
 import DockerMenuButton from '../../modules/docker/DockerModule';
@@ -23,9 +22,7 @@ const useStyles = createStyles((theme) => ({
 }));
 
 export function Header(props: any) {
-  const [opened, toggleOpened] = useBooleanToggle(false);
   const { classes, cx } = useStyles();
-  const [hidden, toggleHidden] = useBooleanToggle(true);
 
   return (
     <Head height="auto">
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 0df7c4374..d91a3122d 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -18,6 +18,7 @@ export default function Layout({ children, style }: any) {
 
   return (
     <AppShell
+      fixed={false}
       header={<Header />}
       navbar={widgetPosition ? <Navbar /> : undefined}
       aside={widgetPosition ? undefined : <Aside />}
diff --git a/src/components/layout/Widgets.tsx b/src/components/layout/Widgets.tsx
index 37223fac7..307671011 100644
--- a/src/components/layout/Widgets.tsx
+++ b/src/components/layout/Widgets.tsx
@@ -1,16 +1,16 @@
-import { Group } from '@mantine/core';
+import { Stack } from '@mantine/core';
 import { CalendarModule, DateModule, TotalDownloadsModule, WeatherModule } from '../../modules';
 import { DashdotModule } from '../../modules/dashdot';
 import { ModuleWrapper } from '../../modules/moduleWrapper';
 
 export default function Widgets(props: any) {
   return (
-    <Group my="sm" grow direction="column" style={{ width: 300 }}>
+    <Stack my="sm" style={{ width: 300 }}>
       <ModuleWrapper module={CalendarModule} />
       <ModuleWrapper module={TotalDownloadsModule} />
       <ModuleWrapper module={WeatherModule} />
       <ModuleWrapper module={DateModule} />
       <ModuleWrapper module={DashdotModule} />
-    </Group>
+    </Stack>
   );
 }
diff --git a/src/modules/calendar/CalendarModule.tsx b/src/modules/calendar/CalendarModule.tsx
index 3f7586562..cc9a03cc1 100644
--- a/src/modules/calendar/CalendarModule.tsx
+++ b/src/modules/calendar/CalendarModule.tsx
@@ -260,54 +260,59 @@ function DayComponent(props: any) {
       )}
       <Popover
         position="bottom"
+        withinPortal
         radius="lg"
         shadow="xl"
         transition="pop"
         styles={{
-          body: {
+          dropdown: {
             boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.1), 0 14px 11px rgba(0, 0, 0, 0.1)',
           },
         }}
         width="auto"
         onClose={() => setOpened(false)}
         opened={opened}
-        target={day}
       >
-        <ScrollArea style={{ height: 400 }}>
-          {sonarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <SonarrMediaDisplay media={media} />
-              {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {radarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <RadarrMediaDisplay media={media} />
-              {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {lidarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <LidarrMediaDisplay media={media} />
-              {index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-          {lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
-            <Divider variant="dashed" my="xl" />
-          )}
-          {readarrFiltered.map((media: any, index: number) => (
-            <React.Fragment key={index}>
-              <ReadarrMediaDisplay media={media} />
-              {index < readarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-            </React.Fragment>
-          ))}
-        </ScrollArea>
+        <Popover.Target>
+          <div>{day}</div>
+        </Popover.Target>
+        <Popover.Dropdown>
+          <ScrollArea style={{ height: 400 }}>
+            {sonarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <SonarrMediaDisplay media={media} />
+                {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+            {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
+              <Divider variant="dashed" my="xl" />
+            )}
+            {radarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <RadarrMediaDisplay media={media} />
+                {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+            {sonarrFiltered.length > 0 && lidarrFiltered.length > 0 && (
+              <Divider variant="dashed" my="xl" />
+            )}
+            {lidarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <LidarrMediaDisplay media={media} />
+                {index < lidarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+            {lidarrFiltered.length > 0 && readarrFiltered.length > 0 && (
+              <Divider variant="dashed" my="xl" />
+            )}
+            {readarrFiltered.map((media: any, index: number) => (
+              <React.Fragment key={index}>
+                <ReadarrMediaDisplay media={media} />
+                {index < readarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            ))}
+          </ScrollArea>
+        </Popover.Dropdown>
       </Popover>
     </Box>
   );
diff --git a/src/modules/common/MediaDisplay.tsx b/src/modules/common/MediaDisplay.tsx
index 0ec7b4320..02764c5e1 100644
--- a/src/modules/common/MediaDisplay.tsx
+++ b/src/modules/common/MediaDisplay.tsx
@@ -8,6 +8,7 @@ import {
   Anchor,
   ScrollArea,
   createStyles,
+  Stack,
 } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconLink as Link } from '@tabler/icons';
@@ -53,7 +54,7 @@ export function MediaDisplay(props: { media: IMedia }) {
             alt={media.title}
           />
         )}
-        <Group direction="column" style={{ minWidth: phone ? 450 : '65vw' }}>
+        <Stack style={{ minWidth: phone ? 450 : '65vw' }}>
           <Group noWrap mr="sm" className={classes.overview}>
             <Title order={3}>{media.title}</Title>
             {media.imdbId && (
@@ -84,8 +85,8 @@ export function MediaDisplay(props: { media: IMedia }) {
               Season {media.seasonNumber} episode {media.episodeNumber}
             </Text>
           )}
-        </Group>
-        <Group direction="column" position="apart">
+        </Stack>
+        <Stack>
           <ScrollArea style={{ height: 280, maxWidth: 700 }}>{media.overview}</ScrollArea>
           <Group align="center" position="center" spacing="xs">
             {media.genres.slice(-5).map((genre: string, i: number) => (
@@ -94,7 +95,7 @@ export function MediaDisplay(props: { media: IMedia }) {
               </Badge>
             ))}
           </Group>
-        </Group>
+        </Stack>
       </Text>
     </Group>
   );
diff --git a/src/modules/date/DateModule.tsx b/src/modules/date/DateModule.tsx
index 54651b19e..72a83fba8 100644
--- a/src/modules/date/DateModule.tsx
+++ b/src/modules/date/DateModule.tsx
@@ -34,9 +34,9 @@ export default function DateComponent(props: any) {
   }, []);
 
   return (
-    <Group p="sm" spacing="xs" direction="column">
+    <Group p="sm" spacing="xs">
       <Title>{dayjs(date).format(formatString)}</Title>
-      <Text size="xl">{dayjs(date).format('dddd, MMMM D')}</Text>
+      <Text size="lg">{dayjs(date).format('dddd, MMMM D')}</Text>
     </Group>
   );
 }
diff --git a/src/modules/docker/ContainerActionBar.tsx b/src/modules/docker/ContainerActionBar.tsx
index a88d970e6..0ae7e2ed1 100644
--- a/src/modules/docker/ContainerActionBar.tsx
+++ b/src/modules/docker/ContainerActionBar.tsx
@@ -1,5 +1,4 @@
 import { Button, Group, Modal, Title } from '@mantine/core';
-import { useBooleanToggle } from '@mantine/hooks';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
   IconCheck,
@@ -14,6 +13,7 @@ import axios from 'axios';
 import Dockerode from 'dockerode';
 import { tryMatchService } from '../../tools/addToHomarr';
 import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
+import { useState } from 'react';
 
 function sendDockerCommand(
   action: string,
@@ -60,7 +60,7 @@ export interface ContainerActionBarProps {
 }
 
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
-  const [opened, setOpened] = useBooleanToggle(false);
+  const [opened, setOpened] = useState<boolean>(false);
   return (
     <Group>
       <Modal
diff --git a/src/modules/docker/DockerModule.tsx b/src/modules/docker/DockerModule.tsx
index 617af61fd..caca75306 100644
--- a/src/modules/docker/DockerModule.tsx
+++ b/src/modules/docker/DockerModule.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Drawer, Group, LoadingOverlay, Text } from '@mantine/core';
+import { ActionIcon, Drawer, Group, LoadingOverlay, Text, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import Docker from 'dockerode';
@@ -20,7 +20,6 @@ export default function DockerMenuButton(props: any) {
   const [opened, setOpened] = useState(false);
   const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
   const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
-  const [visible, setVisible] = useState(false);
   const { config } = useConfig();
   const moduleEnabled = config.modules?.[DockerModule.title]?.enabled ?? false;
 
@@ -32,14 +31,12 @@ export default function DockerMenuButton(props: any) {
     if (!moduleEnabled) {
       return;
     }
-    setVisible(true);
     setTimeout(() => {
       axios
         .get('/api/docker/containers')
         .then((res) => {
           setContainers(res.data);
           setSelection([]);
-          setVisible(false);
         })
         .catch(() =>
           // Send an Error notification
@@ -61,14 +58,16 @@ export default function DockerMenuButton(props: any) {
   if (containers.length < 1) return null;
   return (
     <>
-      <Drawer opened={opened} onClose={() => setOpened(false)} padding="xl" size="full">
-        <ContainerActionBar selected={selection} reload={reload} />
-        <div style={{ position: 'relative' }}>
-          <LoadingOverlay transitionDuration={500} visible={visible} />
-          <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
-        </div>
+      <Drawer
+        opened={opened}
+        onClose={() => setOpened(false)}
+        padding="xl"
+        size="full"
+        title={<ContainerActionBar selected={selection} reload={reload} />}
+      >
+        <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
       </Drawer>
-      <Group position="center">
+      <Tooltip label="Docker">
         <ActionIcon
           variant="default"
           radius="md"
@@ -78,7 +77,7 @@ export default function DockerMenuButton(props: any) {
         >
           <IconBrandDocker />
         </ActionIcon>
-      </Group>
+      </Tooltip>
     </>
   );
 }
diff --git a/src/modules/docker/DockerTable.tsx b/src/modules/docker/DockerTable.tsx
index c8cf76f22..1a6915089 100644
--- a/src/modules/docker/DockerTable.tsx
+++ b/src/modules/docker/DockerTable.tsx
@@ -101,7 +101,6 @@ export default function DockerTable({
         onChange={handleSearchChange}
       />
       <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
-        <caption>your docker containers</caption>
         <thead>
           <tr>
             <th style={{ width: 40 }}>
diff --git a/src/modules/downloads/DownloadsModule.tsx b/src/modules/downloads/DownloadsModule.tsx
index dbb5b6473..e27f28195 100644
--- a/src/modules/downloads/DownloadsModule.tsx
+++ b/src/modules/downloads/DownloadsModule.tsx
@@ -9,6 +9,7 @@ import {
   ScrollArea,
   Center,
   Image,
+  Stack,
 } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
@@ -82,10 +83,10 @@ export default function DownloadComponent() {
 
   if (downloadServices.length === 0) {
     return (
-      <Group direction="column">
+      <Group>
         <Title order={3}>No supported download clients found!</Title>
         <Group>
-          <Text>Add a download service to view your current downloads...</Text>
+          <Text>Add a download service to view your current downloads</Text>
           <AddItemShelfButton />
         </Group>
       </Group>
@@ -187,13 +188,8 @@ export default function DownloadComponent() {
       );
     });
 
-  const easteregg = (
-    <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <Image fit="cover" height={300} src="https://danjohnvelasco.github.io/images/empty.png" />
-    </Center>
-  );
   return (
-    <Group noWrap grow direction="column" mt="xl">
+    <Stack mt="xl">
       <ScrollArea sx={{ height: 300 }}>
         {rows.length > 0 ? (
           <Table highlightOnHover>
@@ -201,9 +197,15 @@ export default function DownloadComponent() {
             <tbody>{rows}</tbody>
           </Table>
         ) : (
-          easteregg
+          <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Image
+              fit="cover"
+              height={300}
+              src="https://danjohnvelasco.github.io/images/empty.png"
+            />
+          </Center>
         )}
       </ScrollArea>
-    </Group>
+    </Stack>
   );
 }
diff --git a/src/modules/downloads/TotalDownloadsModule.tsx b/src/modules/downloads/TotalDownloadsModule.tsx
index f6de8aebe..ccf7de7b3 100644
--- a/src/modules/downloads/TotalDownloadsModule.tsx
+++ b/src/modules/downloads/TotalDownloadsModule.tsx
@@ -1,4 +1,4 @@
-import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch } from '@mantine/core';
+import { Text, Title, Group, useMantineTheme, Box, Card, ColorSwatch, Stack } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
@@ -43,6 +43,7 @@ export default function TotalDownloadsComponent() {
   const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
   const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
   useEffect(() => {
+    if (downloadServices.length === 0) return;
     const interval = setSafeInterval(() => {
       // Send one request with each download service inside
       axios
@@ -78,12 +79,16 @@ export default function TotalDownloadsComponent() {
 
   if (downloadServices.length === 0) {
     return (
-      <Group direction="column">
+      <Group>
         <Title order={4}>No supported download clients found!</Title>
-        <Group noWrap>
-          <Text>Add a download service to view your current downloads...</Text>
-          <AddItemShelfButton />
-        </Group>
+        <div>
+          <AddItemShelfButton
+            style={{
+              float: 'inline-end',
+            }}
+          />
+          Add a download service to view your current downloads
+        </div>
       </Group>
     );
   }
@@ -101,9 +106,9 @@ export default function TotalDownloadsComponent() {
   })) as Datum[];
 
   return (
-    <Group noWrap direction="column" grow>
+    <Stack>
       <Title order={4}>Current download speed</Title>
-      <Group direction="column">
+      <Stack>
         <Group>
           <ColorSwatch size={12} color={theme.colors.green[5]} />
           <Text>Download: {humanFileSize(totalDownloadSpeed)}/s</Text>
@@ -112,7 +117,7 @@ export default function TotalDownloadsComponent() {
           <ColorSwatch size={12} color={theme.colors.blue[5]} />
           <Text>Upload: {humanFileSize(totalUploadSpeed)}/s</Text>
         </Group>
-      </Group>
+      </Stack>
       <Box
         style={{
           height: 200,
@@ -133,7 +138,7 @@ export default function TotalDownloadsComponent() {
               <Card p="sm" radius="md" withBorder>
                 <Text size="md">{roundedSeconds} seconds ago</Text>
                 <Card.Section p="sm">
-                  <Group direction="column">
+                  <Stack>
                     <Group>
                       <ColorSwatch size={10} color={theme.colors.green[5]} />
                       <Text size="md">Download: {humanFileSize(Download)}</Text>
@@ -142,7 +147,7 @@ export default function TotalDownloadsComponent() {
                       <ColorSwatch size={10} color={theme.colors.blue[5]} />
                       <Text size="md">Upload: {humanFileSize(Upload)}</Text>
                     </Group>
-                  </Group>
+                  </Stack>
                 </Card.Section>
               </Card>
             );
@@ -181,6 +186,6 @@ export default function TotalDownloadsComponent() {
           ]}
         />
       </Box>
-    </Group>
+    </Stack>
   );
 }
diff --git a/src/modules/moduleWrapper.tsx b/src/modules/moduleWrapper.tsx
index cb92ded40..3ae65a0b2 100644
--- a/src/modules/moduleWrapper.tsx
+++ b/src/modules/moduleWrapper.tsx
@@ -1,4 +1,6 @@
 import {
+  ActionIcon,
+  Box,
   Button,
   Card,
   Group,
@@ -8,6 +10,9 @@ import {
   TextInput,
   useMantineColorScheme,
 } from '@mantine/core';
+import { useHover } from '@mantine/hooks';
+import { IconAdjustments } from '@tabler/icons';
+import { motion } from 'framer-motion';
 import { useConfig } from '../tools/state';
 import { IModule } from './ModuleTypes';
 
@@ -142,6 +147,8 @@ export function ModuleWrapper(props: any) {
   const enabledModules = config.modules ?? {};
   // Remove 'Module' from enabled modules titles
   const isShown = enabledModules[module.title]?.enabled ?? false;
+  //TODO: fix the hover problem
+  const { hovered, ref } = useHover();
 
   if (!isShown) {
     return null;
@@ -150,6 +157,8 @@ export function ModuleWrapper(props: any) {
   return (
     <Card
       {...props}
+      key={module.title}
+      ref={ref}
       hidden={!isShown}
       withBorder
       radius="lg"
@@ -161,47 +170,56 @@ export function ModuleWrapper(props: any) {
           ${(config.settings.appOpacity || 100) / 100}`,
       }}
     >
-      <ModuleMenu
-        module={module}
-        styles={{
-          root: {
-            position: 'absolute',
-            top: 12,
-            right: 12,
-          },
-        }}
-      />
-      <module.component />
+      <Group position="apart">
+        <ModuleMenu module={module} hovered={hovered} />
+        <module.component />
+      </Group>
     </Card>
   );
 }
 
 export function ModuleMenu(props: any) {
-  const { module, styles } = props;
+  const { module, styles, hovered } = props;
   const items: JSX.Element[] = getItems(module);
   return (
     <>
       {module.options && (
         <Menu
-          size="lg"
+          withinPortal
+          width="lg"
           shadow="xl"
+          withArrow
           closeOnItemClick={false}
           radius="md"
           position="left"
           styles={{
-            root: {
-              ...props?.styles?.root,
-            },
-            body: {
+            dropdown: {
               // Add shadow and elevation to the body
               boxShadow: '0 0 14px 14px rgba(0, 0, 0, 0.05)',
             },
           }}
         >
-          <Menu.Label>Settings</Menu.Label>
-          {items.map((item) => (
-            <Menu.Item key={item.key}>{item}</Menu.Item>
-          ))}
+          <Menu.Target>
+            <Box
+              style={{
+                position: 'absolute',
+                top: 12,
+                right: 12,
+              }}
+            >
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: hovered ? 1 : 0 }}>
+                <ActionIcon>
+                  <IconAdjustments />
+                </ActionIcon>
+              </motion.div>
+            </Box>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Label>Settings</Menu.Label>
+            {items.map((item) => (
+              <Menu.Item key={item.key}>{item}</Menu.Item>
+            ))}
+          </Menu.Dropdown>
         </Menu>
       )}
     </>
diff --git a/src/modules/ping/PingModule.tsx b/src/modules/ping/PingModule.tsx
index cea074dd7..871b894d7 100644
--- a/src/modules/ping/PingModule.tsx
+++ b/src/modules/ping/PingModule.tsx
@@ -56,22 +56,23 @@ export default function PingComponent(props: any) {
     return null;
   }
   return (
-    <Tooltip
-      radius="lg"
+    <motion.div
       style={{ position: 'absolute', bottom: 20, right: 20 }}
-      label={
-        isOnline === 'loading'
-          ? 'Loading...'
-          : isOnline === 'online'
-          ? `Online - ${response}`
-          : `Offline - ${response}`
-      }
+      animate={{
+        scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
+      }}
+      transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
     >
-      <motion.div
-        animate={{
-          scale: isOnline === 'online' ? [1, 0.8, 1] : 1,
-        }}
-        transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
+      <Tooltip
+        withinPortal
+        radius="lg"
+        label={
+          isOnline === 'loading'
+            ? 'Loading...'
+            : isOnline === 'online'
+            ? `Online - ${response}`
+            : `Offline - ${response}`
+        }
       >
         <Indicator
           size={13}
@@ -79,7 +80,7 @@ export default function PingComponent(props: any) {
         >
           {null}
         </Indicator>
-      </motion.div>
-    </Tooltip>
+      </Tooltip>
+    </motion.div>
   );
 }
diff --git a/src/modules/search/SearchModule.tsx b/src/modules/search/SearchModule.tsx
index c2c180ce2..3e16c0c07 100644
--- a/src/modules/search/SearchModule.tsx
+++ b/src/modules/search/SearchModule.tsx
@@ -1,5 +1,6 @@
 import { Kbd, createStyles, Autocomplete } from '@mantine/core';
-import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
+import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
+import { useForm } from '@mantine/form';
 import { useEffect, useRef, useState } from 'react';
 import {
   IconSearch as Search,
diff --git a/src/modules/weather/WeatherModule.tsx b/src/modules/weather/WeatherModule.tsx
index eb0cbdb94..947ed479d 100644
--- a/src/modules/weather/WeatherModule.tsx
+++ b/src/modules/weather/WeatherModule.tsx
@@ -1,4 +1,4 @@
-import { Group, Space, Title, Tooltip, Skeleton } from '@mantine/core';
+import { Group, Space, Title, Tooltip, Skeleton, Stack, Box } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import {
@@ -124,8 +124,10 @@ export function WeatherIcon(props: any) {
     }
   }
   return (
-    <Tooltip label={data.name}>
-      <data.icon size={50} />
+    <Tooltip withinPortal withArrow label={data.name}>
+      <Box>
+        <data.icon size={50} />
+      </Box>
     </Tooltip>
   );
 }
@@ -160,7 +162,7 @@ export default function WeatherComponent(props: any) {
     return (
       <>
         <Skeleton height={40} width={100} mb="xl" />
-        <Group noWrap direction="row">
+        <Group noWrap>
           <Skeleton height={50} circle />
           <Group>
             <Skeleton height={25} width={70} mr="lg" />
@@ -174,7 +176,7 @@ export default function WeatherComponent(props: any) {
     return isFahrenheit ? `${(value * (9 / 5) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
   }
   return (
-    <Group p="sm" spacing="xs" direction="column">
+    <Stack p="sm" spacing="xs">
       <Title>{usePerferedUnit(weather.current_weather.temperature)}</Title>
       <Group spacing={0}>
         <WeatherIcon code={weather.current_weather.weathercode} />
@@ -185,6 +187,6 @@ export default function WeatherComponent(props: any) {
         <span>{usePerferedUnit(weather.daily.temperature_2m_min[0])}</span>
         <ArrowDownRight size={16} />
       </Group>
-    </Group>
+    </Stack>
   );
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index d22a65538..5fab2f2bc 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -8,7 +8,6 @@ import { NotificationsProvider } from '@mantine/notifications';
 import { useHotkeys } from '@mantine/hooks';
 import { ConfigProvider } from '../tools/state';
 import { theme } from '../tools/theme';
-import { styles } from '../tools/styles';
 import { ColorTheme } from '../tools/color';
 
 export default function App(this: any, props: AppProps & { colorScheme: ColorScheme }) {
@@ -49,9 +48,6 @@ export default function App(this: any, props: AppProps & { colorScheme: ColorSch
               primaryShade,
               colorScheme,
             }}
-            styles={{
-              ...styles,
-            }}
             withGlobalStyles
             withNormalizeCSS
           >
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index abe7984ca..6c633fbf8 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,21 +1,20 @@
-import Document, { DocumentContext } from 'next/document';
-import { ServerStyles, createStylesServer } from '@mantine/next';
+import { createGetInitialProps } from '@mantine/next';
+import Document, { Head, Html, Main, NextScript } from 'next/document';
 
-const stylesServer = createStylesServer();
+const getInitialProps = createGetInitialProps();
 
 export default class _Document extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
-    const initialProps = await Document.getInitialProps(ctx);
-    // Add your app specific logic here
+  static getInitialProps = getInitialProps;
 
-    return {
-      ...initialProps,
-      styles: (
-        <>
-          {initialProps.styles}
-          <ServerStyles html={initialProps.html} server={stylesServer} />
-        </>
-      ),
-    };
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
   }
 }
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 04bb33c6c..d6df4d33c 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { PasswordInput, Anchor, Paper, Title, Text, Container, Group, Button } from '@mantine/core';
 import { setCookie } from 'cookies-next';
-import { useForm } from '@mantine/hooks';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import axios from 'axios';
 import { IconCheck, IconX } from '@tabler/icons';
 import { useRouter } from 'next/router';
+import { useForm } from '@mantine/form';
 
 // TODO: Add links to the wiki articles about the login process.
 export default function AuthenticationTitle() {
diff --git a/src/tools/styles.ts b/src/tools/styles.ts
index 905d6903c..089a92727 100644
--- a/src/tools/styles.ts
+++ b/src/tools/styles.ts
@@ -1,12 +1,13 @@
 import { MantineProviderProps } from '@mantine/core';
 
-export const styles: MantineProviderProps['styles'] = {
-  Checkbox: {
-    input: { cursor: 'pointer' },
-    label: { cursor: 'pointer' },
-  },
-  Switch: {
-    input: { cursor: 'pointer' },
-    label: { cursor: 'pointer' },
-  },
-};
+//TODO: Migarate this to v5.0
+// export const styles: MantineProviderProps['styles'] = {
+//   Checkbox: {
+//     input: { cursor: 'pointer' },
+//     label: { cursor: 'pointer' },
+//   },
+//   Switch: {
+//     input: { cursor: 'pointer' },
+//     label: { cursor: 'pointer' },
+//   },
+// };
diff --git a/src/tools/types.ts b/src/tools/types.ts
index 663263c6e..f745c3524 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -84,7 +84,10 @@ export type ServiceType =
   | 'Sonarr'
   | 'Transmission';
 
-export function tryMatchPort(name: string, form?: any) {
+export function tryMatchPort(name: string | undefined, form?: any) {
+  if (!name) {
+    return undefined;
+  }
   // Match name with portmap key
   const port = portmap.find((p) => p.name === name.toLowerCase());
   if (form && port) {
diff --git a/yarn.lock b/yarn.lock
index 4e9549474..dbb8259a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -105,7 +105,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.18.6":
+"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/helper-module-imports@npm:7.18.6"
   dependencies:
@@ -255,6 +255,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-jsx@npm:^7.17.12":
+  version: 7.18.6
+  resolution: "@babel/plugin-syntax-jsx@npm:7.18.6"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.18.6
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 6d37ea972970195f1ffe1a54745ce2ae456e0ac6145fae9aa1480f297248b262ea6ebb93010eddb86ebfacb94f57c05a1fc5d232b9a67325b09060299d515c67
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4"
@@ -353,7 +364,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
   version: 7.18.9
   resolution: "@babel/runtime@npm:7.18.9"
   dependencies:
@@ -539,36 +550,45 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/cache@npm:11.7.1":
-  version: 11.7.1
-  resolution: "@emotion/cache@npm:11.7.1"
+"@emotion/babel-plugin@npm:^11.10.0":
+  version: 11.10.0
+  resolution: "@emotion/babel-plugin@npm:11.10.0"
   dependencies:
-    "@emotion/memoize": ^0.7.4
-    "@emotion/sheet": ^1.1.0
-    "@emotion/utils": ^1.0.0
-    "@emotion/weak-memoize": ^0.2.5
+    "@babel/helper-module-imports": ^7.16.7
+    "@babel/plugin-syntax-jsx": ^7.17.12
+    "@babel/runtime": ^7.18.3
+    "@emotion/hash": ^0.9.0
+    "@emotion/memoize": ^0.8.0
+    "@emotion/serialize": ^1.1.0
+    babel-plugin-macros: ^3.1.0
+    convert-source-map: ^1.5.0
+    escape-string-regexp: ^4.0.0
+    find-root: ^1.1.0
+    source-map: ^0.5.7
     stylis: 4.0.13
-  checksum: cf7aa8fe3bacfdedcda94b53e76a7635e122043439715fcfbf7f1a81340cfe6099a59134481a03ec3e0437466566d18528577d1e6ea92f5b98c372b8b38a8f35
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 7f1c615e5e559fd037eab8d08b842cd6c089543f9c8829d22d097f69c5436298ff4fa9e1a2117892ce26a60abc1f57641dd9ccb011096b2e34c5588bf994addc
   languageName: node
   linkType: hard
 
-"@emotion/cache@npm:^11.7.1":
-  version: 11.9.3
-  resolution: "@emotion/cache@npm:11.9.3"
+"@emotion/cache@npm:^11.10.0":
+  version: 11.10.0
+  resolution: "@emotion/cache@npm:11.10.0"
   dependencies:
-    "@emotion/memoize": ^0.7.4
-    "@emotion/sheet": ^1.1.1
-    "@emotion/utils": ^1.0.0
-    "@emotion/weak-memoize": ^0.2.5
+    "@emotion/memoize": ^0.8.0
+    "@emotion/sheet": ^1.2.0
+    "@emotion/utils": ^1.2.0
+    "@emotion/weak-memoize": ^0.3.0
     stylis: 4.0.13
-  checksum: 6e0aab2fa5b9b6b0b9bf66b5328ed44265c23ced16b46c13d2602c3497fabd95299f6cf2c87cbc02b630452aa3cff599c194c538125d744aa135824129698ccc
+  checksum: 60786e3108c35d3f79bd434119f1b6e34120fccc92f4a129bb67596944b703c3396efa51ed373f0ee3d71de780d78f4d767c264f7d76b073d06d435a2d3c1edf
   languageName: node
   linkType: hard
 
-"@emotion/hash@npm:^0.8.0":
-  version: 0.8.0
-  resolution: "@emotion/hash@npm:0.8.0"
-  checksum: 4b35d88a97e67275c1d990c96d3b0450451d089d1508619488fc0acb882cb1ac91e93246d471346ebd1b5402215941ef4162efe5b51534859b39d8b3a0e3ffaa
+"@emotion/hash@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@emotion/hash@npm:0.9.0"
+  checksum: b63428f7c8186607acdca5d003700cecf0ded519d0b5c5cc3b3154eafcad6ff433f8361bd2bac8882715b557e6f06945694aeb6ba8b25c6095d7a88570e2e0bb
   languageName: node
   linkType: hard
 
@@ -588,23 +608,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/memoize@npm:^0.7.4":
-  version: 0.7.5
-  resolution: "@emotion/memoize@npm:0.7.5"
-  checksum: 83da8d4a7649a92c72f960817692bc6be13cc13e107b9f7e878d63766525ed4402881bfeb3cda61145c050281e7e260f114a0a2870515527346f2ef896b915b3
+"@emotion/memoize@npm:^0.8.0":
+  version: 0.8.0
+  resolution: "@emotion/memoize@npm:0.8.0"
+  checksum: c87bb110b829edd8e1c13b90a6bc37cebc39af29c7599a1e66a48e06f9bec43e8e53495ba86278cc52e7589549492c8dfdc81d19f4fdec0cee6ba13d2ad2c928
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:11.7.1":
-  version: 11.7.1
-  resolution: "@emotion/react@npm:11.7.1"
+"@emotion/react@npm:^11.10.0":
+  version: 11.10.0
+  resolution: "@emotion/react@npm:11.10.0"
   dependencies:
-    "@babel/runtime": ^7.13.10
-    "@emotion/cache": ^11.7.1
-    "@emotion/serialize": ^1.0.2
-    "@emotion/sheet": ^1.1.0
-    "@emotion/utils": ^1.0.0
-    "@emotion/weak-memoize": ^0.2.5
+    "@babel/runtime": ^7.18.3
+    "@emotion/babel-plugin": ^11.10.0
+    "@emotion/cache": ^11.10.0
+    "@emotion/serialize": ^1.1.0
+    "@emotion/utils": ^1.2.0
+    "@emotion/weak-memoize": ^0.3.0
     hoist-non-react-statics: ^3.3.1
   peerDependencies:
     "@babel/core": ^7.0.0
@@ -614,41 +634,28 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 3392aa71f9c68c16022947959f7f842174e6b075b3baf58e185462411cd9b5a87557109a9225b1abaa2d7200a08b7cb9d7f21aa035f0d36b2c89e19b2a124e02
+  checksum: 6d692e43ff53fd3b87d4a000a9aec2ef080d66a0ebb7d0b9529c46d1e6bc1ac8a27c7dd74c27a8274ec1df1e3c960b78c035fca5d8a901a48eda445c6163b33b
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@emotion/serialize@npm:1.0.2"
+"@emotion/serialize@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@emotion/serialize@npm:1.1.0"
   dependencies:
-    "@emotion/hash": ^0.8.0
-    "@emotion/memoize": ^0.7.4
-    "@emotion/unitless": ^0.7.5
-    "@emotion/utils": ^1.0.0
+    "@emotion/hash": ^0.9.0
+    "@emotion/memoize": ^0.8.0
+    "@emotion/unitless": ^0.8.0
+    "@emotion/utils": ^1.2.0
     csstype: ^3.0.2
-  checksum: ff84fbe09ec06e7ad3deaef5c5b5ea6af6a522e8efe49c2b398b875d06872626284a83b6b18b7f777750c94264a61e7924157d869d9bca2f675731bbb91a6055
+  checksum: 8f22f83194ad76cb3bbee481daa57fdc65ca3078a5db9e219c04151341ef93af80c7057aea17b64446682d275918f7ecc0c20e977c1af153c79a1485503fe717
   languageName: node
   linkType: hard
 
-"@emotion/serialize@npm:^1.0.2":
-  version: 1.0.4
-  resolution: "@emotion/serialize@npm:1.0.4"
+"@emotion/server@npm:^11.10.0":
+  version: 11.10.0
+  resolution: "@emotion/server@npm:11.10.0"
   dependencies:
-    "@emotion/hash": ^0.8.0
-    "@emotion/memoize": ^0.7.4
-    "@emotion/unitless": ^0.7.5
-    "@emotion/utils": ^1.0.0
-    csstype: ^3.0.2
-  checksum: e8cc342056734e176ea837fe44035126dea174962db40852a7ced499d258c0056b0fd3c298743c446f9ba0f2647cb42dfb623b8e5783c265deb9eb20138d68e7
-  languageName: node
-  linkType: hard
-
-"@emotion/server@npm:11.4.0":
-  version: 11.4.0
-  resolution: "@emotion/server@npm:11.4.0"
-  dependencies:
-    "@emotion/utils": ^1.0.0
+    "@emotion/utils": ^1.2.0
     html-tokenize: ^2.0.0
     multipipe: ^1.0.2
     through: ^2.3.8
@@ -657,42 +664,35 @@ __metadata:
   peerDependenciesMeta:
     "@emotion/css":
       optional: true
-  checksum: 41ed2472c3b16e5f28126fed755098d1cc2f189096fa830b98583558d93d153e5b0ced8bd1a7514803f1c29ad218a5cd75dc6a348efcd44167a4cdd11887b2f2
+  checksum: 15b7135a578630e36f551b8856d658a50876fb62fe042819ad57895adaf45b79e2d21b3464f1874319f48b5f6209ce09dd387ce1df6aea6f98a20c43a78221b2
   languageName: node
   linkType: hard
 
-"@emotion/sheet@npm:^1.1.0, @emotion/sheet@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "@emotion/sheet@npm:1.1.1"
-  checksum: b916ac665735ef6dfda26b09f2d3493789d432d649733db9da18c4db0115e7fdadeb8d45f6490320248916bb13d978bba74c914b711ac96f659b76a5e52d5cd2
+"@emotion/sheet@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@emotion/sheet@npm:1.2.0"
+  checksum: b3771e47963d36c179f9a1119055d7e5d18e2718e73ebe2b4b1c56f4bbf4ea6b12c50bbc52cd502f03f7981beb2fbb3fee2638b6f5ef6c5f223b06f8bf88ec7b
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.7.5":
-  version: 0.7.5
-  resolution: "@emotion/unitless@npm:0.7.5"
-  checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
+"@emotion/unitless@npm:^0.8.0":
+  version: 0.8.0
+  resolution: "@emotion/unitless@npm:0.8.0"
+  checksum: 176141117ed23c0eb6e53a054a69c63e17ae532ec4210907a20b2208f91771821835f1c63dd2ec63e30e22fcc984026d7f933773ee6526dd038e0850919fae7a
   languageName: node
   linkType: hard
 
-"@emotion/utils@npm:1.0.0":
-  version: 1.0.0
-  resolution: "@emotion/utils@npm:1.0.0"
-  checksum: 3ce8048441a915447d9ef51eb6d1d4cbcce8c8d1647bc7a23333ce2fb2249e74cf9471670d6f49a716e93ff633c9e7a6633517698e17391aebfc40c9d0cabcc0
+"@emotion/utils@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@emotion/utils@npm:1.2.0"
+  checksum: 55457a49ddd4db6a014ea0454dc09eaa23eedfb837095c8ff90470cb26a303f7ceb5fcc1e2190ef64683e64cfd33d3ba3ca3109cd87d12bc9e379e4195c9a4dd
   languageName: node
   linkType: hard
 
-"@emotion/utils@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "@emotion/utils@npm:1.1.0"
-  checksum: d3b681ca3a23b07033ac6c6937e71010a5549ac8ccec325eb6c91a7e48d9a73db83fa5dadc58be981bb125d7c00fedca868ea4362b1da9e02866615f96be4df1
-  languageName: node
-  linkType: hard
-
-"@emotion/weak-memoize@npm:^0.2.5":
-  version: 0.2.5
-  resolution: "@emotion/weak-memoize@npm:0.2.5"
-  checksum: 27d402b0c683b94658220b6d47840346ee582329ca2a15ec9c233492e0f1a27687ccb233b76eedc922f2e185e444cc89f7b97a81a1d3e5ae9f075bab08e965ea
+"@emotion/weak-memoize@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@emotion/weak-memoize@npm:0.3.0"
+  checksum: f43ef4c8b7de70d9fa5eb3105921724651e4188e895beb71f0c5919dc899a7b8743e1fdd99d38b9092dd5722c7be2312ebb47fbdad0c4e38bea58f6df5885cc0
   languageName: node
   linkType: hard
 
@@ -713,6 +713,49 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^0.7.3":
+  version: 0.7.3
+  resolution: "@floating-ui/core@npm:0.7.3"
+  checksum: f48f9fb0d19dcbe7a68c38e8de7fabb11f0c0e6e0ef215ae60b5004900bacb1386e7b89cb377d91a90ff7d147ea1f06c2905136ecf34dea162d9696d8f448d5f
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^0.5.3":
+  version: 0.5.4
+  resolution: "@floating-ui/dom@npm:0.5.4"
+  dependencies:
+    "@floating-ui/core": ^0.7.3
+  checksum: 9f9d8a51a828c6be5f187204aa6d293c6c9ef70d51dcc5891a4d85683745fceebf79ff8826d0f75ae41b45c3b138367d339756f27f41be87a8770742ebc0de42
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom-interactions@npm:0.6.6":
+  version: 0.6.6
+  resolution: "@floating-ui/react-dom-interactions@npm:0.6.6"
+  dependencies:
+    "@floating-ui/react-dom": ^0.7.2
+    aria-hidden: ^1.1.3
+    use-isomorphic-layout-effect: ^1.1.1
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 3c6cf848c0d9cee6a4f68817a2b32a9addf6f3057f9f120e4d537efe1d2935cdf8a368d9b599b49b97c8cbcf9f25c8da1683f41c563754dd5eca47b622a74cc5
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^0.7.2":
+  version: 0.7.2
+  resolution: "@floating-ui/react-dom@npm:0.7.2"
+  dependencies:
+    "@floating-ui/dom": ^0.5.3
+    use-isomorphic-layout-effect: ^1.1.1
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: bc3f2b5557f87f6f4bbccfe3e8d097abafad61a41083d3b79f3499f27590e273bcb3dc7136c2444841ee7a8c0d2a70cc1385458c16103fa8b70eade80c24af52
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -1041,141 +1084,174 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mantine/core@npm:^4.2.12":
-  version: 4.2.12
-  resolution: "@mantine/core@npm:4.2.12"
+"@mantine/carousel@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@mantine/carousel@npm:5.0.0"
   dependencies:
-    "@mantine/styles": 4.2.12
-    "@popperjs/core": ^2.9.3
-    "@radix-ui/react-scroll-area": ^0.1.1
-    react-popper: ^2.2.5
-    react-textarea-autosize: ^8.3.2
+    "@mantine/utils": 5.0.0
   peerDependencies:
-    "@mantine/hooks": 4.2.12
+    "@mantine/core": 5.0.0
+    "@mantine/hooks": 5.0.0
+    embla-carousel-react: 6.2.0
+    react: ">=16.8.0"
+  checksum: 67930f5c4db077c250d40d1ecc641a0cd92e8223db3cb41a061fa3505d67fc8fdc7040bb74b4093512e053f4807d314e301d7d4c7039bad8b71a0dea771866d6
+  languageName: node
+  linkType: hard
+
+"@mantine/core@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@mantine/core@npm:5.0.2"
+  dependencies:
+    "@floating-ui/react-dom-interactions": 0.6.6
+    "@mantine/styles": 5.0.2
+    "@mantine/utils": 5.0.2
+    "@radix-ui/react-scroll-area": 1.0.0
+    react-textarea-autosize: 8.3.4
+  peerDependencies:
+    "@mantine/hooks": 5.0.2
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: c7656b1249edbd71a27e46dc8921a9e012ea11e4696cc1b8784fca74eca683d3b3817463168f908f221643a1b7ab3d47bbd6292acd1694d23a0f8e23c735fc51
+  checksum: 3677995cb6b31481b29ee56096ba9366d68062fb9e636e271685a2e0ec7df852231edbe111aded6b02e7ddf2c6abc20f6c6aead42a30d130d8687540406dcedd
   languageName: node
   linkType: hard
 
-"@mantine/dates@npm:^4.2.12":
-  version: 4.2.12
-  resolution: "@mantine/dates@npm:4.2.12"
-  peerDependencies:
-    "@mantine/core": 4.2.12
-    "@mantine/hooks": 4.2.12
-    dayjs: ^1.10.5
-    react: ">=16.8.0"
-  checksum: 7257dd9a44aba907f8cf03951791549e50ac32f44cc0b528f0e90702c7a230f2975e48c395b8da4bc8c8912a2fcf176ce8331926578fcf73a2a92cdaba7b47b0
-  languageName: node
-  linkType: hard
-
-"@mantine/dropzone@npm:^4.2.12":
-  version: 4.2.12
-  resolution: "@mantine/dropzone@npm:4.2.12"
+"@mantine/dates@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@mantine/dates@npm:5.0.2"
   dependencies:
-    react-dropzone: ^11.4.2
+    "@mantine/utils": 5.0.2
   peerDependencies:
-    "@mantine/core": 4.2.12
-    "@mantine/hooks": 4.2.12
+    "@mantine/core": 5.0.2
+    "@mantine/hooks": 5.0.2
+    dayjs: ">=1.0.0"
+    react: ">=16.8.0"
+  checksum: 818fce70324347c870dd04354c9e4b29f7d4241f56b3d7fbac668de3b25efa29a265e2ba817a42bf7151548e89f17825b63047fb2694215ccad1c993a3b2a772
+  languageName: node
+  linkType: hard
+
+"@mantine/dropzone@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@mantine/dropzone@npm:5.0.2"
+  dependencies:
+    "@mantine/utils": 5.0.2
+    react-dropzone: 14.2.1
+  peerDependencies:
+    "@mantine/core": 5.0.2
+    "@mantine/hooks": 5.0.2
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: f0b48f9dc9f61db34741cee05e1234a7319ce2ee174d88bf30468daedee3b6f629ac1469fecd2bd798b28ac825a4d30ebd79b47f59f0b7bd4972f7e0b2b46a4a
+  checksum: 3837d3f4763a33407c197cf7ca3510b2d0051be5419bd48e421a0fc748545c409f49200ee18942932403bd770d76c6ac78770d1067b67dfcbe7837d6606b100a
   languageName: node
   linkType: hard
 
-"@mantine/form@npm:^4.2.12":
-  version: 4.2.12
-  resolution: "@mantine/form@npm:4.2.12"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 851576d75d6a9db737e1a985db60c6eaeb0fcd019fba3eb27e6bce1dfe915fd6dc138d7954c56228e9c6a6f80e4678e507159476f46436537cca9ea2388c1de7
-  languageName: node
-  linkType: hard
-
-"@mantine/hooks@npm:^4.2.12":
-  version: 4.2.12
-  resolution: "@mantine/hooks@npm:4.2.12"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 09dbbbf1d90c8a0b0ea02394454af0de9fcc975668a80ff5460161493509d55603f2e39feac2bb46019db673a576617f2ffb111f0373699ad5462e7c2da9bea6
-  languageName: node
-  linkType: hard
-
-"@mantine/next@npm:^4.2.12":
-  version: 4.2.12
-  resolution: "@mantine/next@npm:4.2.12"
+"@mantine/form@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@mantine/form@npm:5.0.2"
   dependencies:
-    "@mantine/ssr": 4.2.12
+    klona: ^2.0.5
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: db08b33a0e95a20fb4dffc22d58be7f5ece6bbd824b40fa1bccee310587b932f73492bdef1de8d8023777a8bf6d1c7fe76594dba319055b8865543b53f3c60e0
+  languageName: node
+  linkType: hard
+
+"@mantine/hooks@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@mantine/hooks@npm:5.0.2"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 792b2ce59bc5a3bfb14e3f12762eaeb1e9b7edf080d03e2515c68ddd6b54fb6923e9c6461e5bd1030c043801f241f09be15bae5d6236b58a4206203a4d0166c6
+  languageName: node
+  linkType: hard
+
+"@mantine/next@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@mantine/next@npm:5.0.2"
+  dependencies:
+    "@mantine/ssr": 5.0.2
+    "@mantine/styles": 5.0.2
   peerDependencies:
     next: "*"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 154c8046ff012cf6738721c37843caf2307b985f0f4766f666b0762dbc811f71bb2db0824b34e2fd35a0dde448be2dd00345c3e01282009d4964f967cbf4a6af
+  checksum: f03257fe69a36fc54e6d8eda2d4a791277eecc1642fe6ffccae6d252e728288ee30cd89acb16a35c58ac1b064f2e8ba7950b4f98a0f2b003d34ae6024c107159
   languageName: node
   linkType: hard
 
-"@mantine/notifications@npm:^4.2.12":
-  version: 4.2.12
-  resolution: "@mantine/notifications@npm:4.2.12"
+"@mantine/notifications@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@mantine/notifications@npm:5.0.2"
   dependencies:
-    react-transition-group: ^4.4.2
+    "@mantine/utils": 5.0.2
+    react-transition-group: 4.4.2
   peerDependencies:
-    "@mantine/core": 4.2.12
-    "@mantine/hooks": 4.2.12
+    "@mantine/core": 5.0.2
+    "@mantine/hooks": 5.0.2
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 72be0b01c09e6d51c565fa9227d9e11342fc5d8e650ba420caca69d066ec425d26c0758e0b2aecee512606fd4eb00d49920fece0341dab239fb271936d0d3a59
+  checksum: 6284e9e26fa64a20417eaf9593a935083bc95095a84d8ae98c32c22becec202419523d7bb71ecfb08e307d05d11565a8403da68da42252c867a351fa08435a63
   languageName: node
   linkType: hard
 
-"@mantine/prism@npm:^4.2.12":
-  version: 4.2.12
-  resolution: "@mantine/prism@npm:4.2.12"
+"@mantine/prism@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@mantine/prism@npm:5.0.0"
   dependencies:
+    "@mantine/utils": 5.0.0
     prism-react-renderer: ^1.2.1
   peerDependencies:
-    "@mantine/core": 4.2.12
-    "@mantine/hooks": 4.2.12
+    "@mantine/core": 5.0.0
+    "@mantine/hooks": 5.0.0
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 0904ccf586b3a18fd4c224067ea270c89f4e65dd4fe0b959211c9d72838c3d7bac55296f5065405062a165bcdbab56b9a57d0be56a5dfb5cbb20c2cf4bab273e
+  checksum: 2d0420424b0f0b32bb299cb15a856e97edb941fdc0bfba93508e9ce71e99a50a37a5d24951f48d04d0d10754bd4834d1247345456c2f34876f4fe3e106b773c1
   languageName: node
   linkType: hard
 
-"@mantine/ssr@npm:4.2.12":
-  version: 4.2.12
-  resolution: "@mantine/ssr@npm:4.2.12"
+"@mantine/ssr@npm:5.0.2":
+  version: 5.0.2
+  resolution: "@mantine/ssr@npm:5.0.2"
   dependencies:
-    "@emotion/cache": 11.7.1
-    "@emotion/react": 11.7.1
-    "@emotion/serialize": 1.0.2
-    "@emotion/server": 11.4.0
-    "@emotion/utils": 1.0.0
-    "@mantine/styles": 4.2.12
-    csstype: 3.0.9
-    html-react-parser: 1.3.0
+    "@mantine/styles": 5.0.2
+    html-react-parser: 1.4.12
   peerDependencies:
+    "@emotion/react": ">=11.9.0"
+    "@emotion/server": ">=11.4.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: cb182e5695d6bd2f003509b947d8087c7cacbf2b94e73e017450f1fe50ef29f9a117ba9c35b71e17e3f9efada92a9dc9cee8d590e1448b40ceb3f8b11bdb95fd
+  checksum: 396f3da4cdd15dde1a6707350b428862127a66d204c5b625cab70b92729d709d42a4ffeeb8dfa267035648373f3f3e016d78e15ed9758b00266013475008e663
   languageName: node
   linkType: hard
 
-"@mantine/styles@npm:4.2.12":
-  version: 4.2.12
-  resolution: "@mantine/styles@npm:4.2.12"
+"@mantine/styles@npm:5.0.2":
+  version: 5.0.2
+  resolution: "@mantine/styles@npm:5.0.2"
   dependencies:
-    "@emotion/cache": 11.7.1
-    "@emotion/react": 11.7.1
-    "@emotion/serialize": 1.0.2
-    "@emotion/utils": 1.0.0
-    clsx: ^1.1.1
+    clsx: 1.1.1
     csstype: 3.0.9
   peerDependencies:
+    "@emotion/react": ">=11.9.0"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 8e99c7109e61ca1e3119cec39cac22a7b137964f61822e95c85c6c4e028852b42ace16ad82c94bcd1f3ba52106ae5e3c9b47bd33100eaa99a9e885fec1b1e58e
+  checksum: a602c1453007d52c2d779e3ff107b26f6072158c3d9ffda4be42276bdccfff4b7695cb48f41ead0aacd42af97d40d61b61b022c530200c60f8cf3db711721bee
+  languageName: node
+  linkType: hard
+
+"@mantine/utils@npm:5.0.0":
+  version: 5.0.0
+  resolution: "@mantine/utils@npm:5.0.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 7d167dd40e02e6f2cb830ede1aad091af7bf9eb42fa1b47a08451286e98d3fa1a88f49a3e179d7969be450f70fc3d02f9851b8655d310499fa6bc431978ed232
+  languageName: node
+  linkType: hard
+
+"@mantine/utils@npm:5.0.2":
+  version: 5.0.2
+  resolution: "@mantine/utils@npm:5.0.2"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: fe618eb37c8f900ea2ed7ba25a95c01d55a9cc6d3e82ee46d36446258e52a8828098a5d8bd0c53ca269bb876cffd4c8162110715da7e912f552a99b1f2f5ba22
   languageName: node
   linkType: hard
 
@@ -1554,140 +1630,136 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@popperjs/core@npm:^2.9.3":
-  version: 2.11.5
-  resolution: "@popperjs/core@npm:2.11.5"
-  checksum: fd7f9dca3fb716d7426332b6ee283f88d2724c0ab342fb678865a640bad403dfb9eeebd8204a406986162f7e2b33394f104320008b74d0e9066d7322f70ea35d
-  languageName: node
-  linkType: hard
-
-"@radix-ui/number@npm:0.1.0":
-  version: 0.1.0
-  resolution: "@radix-ui/number@npm:0.1.0"
+"@radix-ui/number@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/number@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
-  checksum: 6d4efbf9158c1b1d18861da9c232e27a67ed496e46ab621521cc076952f1b93e6c56121e9b597e2e245b77dea294f0b1f79cd2ea1467d8361ba51334b00ffb1f
+  checksum: 517ac0790e05cceb41401154d1bc55d4738accd51095e2a918ef9bcedac6a455cd7179201e88e76121bedec19cd93a37b2c20288b084fb224b69c74e67935457
   languageName: node
   linkType: hard
 
-"@radix-ui/primitive@npm:0.1.0":
-  version: 0.1.0
-  resolution: "@radix-ui/primitive@npm:0.1.0"
+"@radix-ui/primitive@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/primitive@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
-  checksum: 5f721bcfebb2482fc2d034d2782219f4b1035977d3a1bd854719ff07c82fb545083ff1247a987ea0218109c5801375724f60910b0c71f7bb78ea0ab21b2bcb26
+  checksum: 72996afaf346ec4f4c73422f14f6cb2d0de994801ba7cbb9a4a67b0050e0cd74625182c349ef8017ccae1406579d4b74a34a225ef2efe61e8e5337decf235deb
   languageName: node
   linkType: hard
 
-"@radix-ui/react-compose-refs@npm:0.1.0":
-  version: 0.1.0
-  resolution: "@radix-ui/react-compose-refs@npm:0.1.0"
+"@radix-ui/react-compose-refs@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-compose-refs@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
   peerDependencies:
-    react: ^16.8 || ^17.0
-  checksum: d1455577b2afee141998e847890e8f5ba5cb17aa58ba699f9abe21c7948e2435bbda28f7f7efe825ca200c66bcaf095ff4b93553778d599cba3f611c97cd222e
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: fb98be2e275a1a758ccac647780ff5b04be8dcf25dcea1592db3b691fecf719c4c0700126da605b2f512dd89caa111352b9fad59528d736b4e0e9a0e134a74a1
   languageName: node
   linkType: hard
 
-"@radix-ui/react-context@npm:0.1.1":
-  version: 0.1.1
-  resolution: "@radix-ui/react-context@npm:0.1.1"
+"@radix-ui/react-context@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-context@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
   peerDependencies:
-    react: ^16.8 || ^17.0
-  checksum: 85ed35b6e386706bc3a8d21ff7e2a55d0f452fd8ab89f6c9a6c2e271e390c8788800517589d5606a3bfbcca08741fbcb4b6c695c466a284ae35957d92620c467
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 43c6b6f2183398161fe6b109e83fff240a6b7babbb27092b815932342a89d5ca42aa9806bfae5927970eed5ff90feed04c67aa29c6721f84ae826f17fcf34ce0
   languageName: node
   linkType: hard
 
-"@radix-ui/react-presence@npm:0.1.2":
-  version: 0.1.2
-  resolution: "@radix-ui/react-presence@npm:0.1.2"
+"@radix-ui/react-direction@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-direction@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
-    "@radix-ui/react-compose-refs": 0.1.0
-    "@radix-ui/react-use-layout-effect": 0.1.0
   peerDependencies:
-    react: ">=16.8"
-  checksum: 7a189e24a353b30f0b6ee87d0577bdb183dde79a2be8105638e73d28e7538f4f6dd64d205634bdd6100bcfdabab713870e8cdb0f01ae9cd9a44f6650eb9e7ce6
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 92a40de4087b161a56957872daf204a7735bd21f2fccbd42deff322d759977d085ad3dcdae05af437b7e64e628e939e0d67e5bc468a3027e1b02e0a7dc90c485
   languageName: node
   linkType: hard
 
-"@radix-ui/react-primitive@npm:0.1.4":
-  version: 0.1.4
-  resolution: "@radix-ui/react-primitive@npm:0.1.4"
+"@radix-ui/react-presence@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-presence@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
-    "@radix-ui/react-slot": 0.1.2
+    "@radix-ui/react-compose-refs": 1.0.0
+    "@radix-ui/react-use-layout-effect": 1.0.0
   peerDependencies:
-    react: ^16.8 || ^17.0
-  checksum: e7b83dc51565a7a54dfd16296e2aa1639dafe32655e3a3974d29d28497f0e9ec9cdf0ee59bc54a88b2a51eeb307781f01f6fcacb4d6dc84a8e10631ddb6142e5
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: a607d67795aa265e88f1765dcc7c18bebf6d88d116cb7f529ebe5a3fbbe751a42763aff0c1c89cdd8ce7f7664355936c4070fd3d4685774aff1a80fa95f4665b
   languageName: node
   linkType: hard
 
-"@radix-ui/react-scroll-area@npm:^0.1.1":
-  version: 0.1.4
-  resolution: "@radix-ui/react-scroll-area@npm:0.1.4"
+"@radix-ui/react-primitive@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-primitive@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
-    "@radix-ui/number": 0.1.0
-    "@radix-ui/primitive": 0.1.0
-    "@radix-ui/react-compose-refs": 0.1.0
-    "@radix-ui/react-context": 0.1.1
-    "@radix-ui/react-presence": 0.1.2
-    "@radix-ui/react-primitive": 0.1.4
-    "@radix-ui/react-use-callback-ref": 0.1.0
-    "@radix-ui/react-use-direction": 0.1.0
-    "@radix-ui/react-use-layout-effect": 0.1.0
+    "@radix-ui/react-slot": 1.0.0
   peerDependencies:
-    react: ^16.8 || ^17.0
-  checksum: b926e3087f8da8771a5fc1cf6fabaf12c2295d3bc6721625cf27ecfbf08ea1f2e6b056ef6319db026220eca17a85d1e770956efaca6d37e8c6a25006420016d0
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: fb3fe8c8c5a57995716cce4d7e9039e474c09ba5d714994419ad4940bc954da670f1188813cc931f189b23d9bd5a67adf7087bf44fe1d4272b4a334a3514d38b
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:0.1.2":
-  version: 0.1.2
-  resolution: "@radix-ui/react-slot@npm:0.1.2"
+"@radix-ui/react-scroll-area@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-scroll-area@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
-    "@radix-ui/react-compose-refs": 0.1.0
+    "@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.0
+    "@radix-ui/react-use-callback-ref": 1.0.0
+    "@radix-ui/react-use-layout-effect": 1.0.0
   peerDependencies:
-    react: ^16.8 || ^17.0
-  checksum: 216927b9b1dae28328d630f6b2c91f1a424c0b00fb4efcebb7a109fdfc5bceda5cf878dfac5baa8aa441150d4c5263f5a914f2962bbce8375972ae076e4d3b65
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  checksum: 0b7756f1df19ac13c570941461794668d0fb15fd576f37a698a6d0a39f48b728db751455f8de202e5ccb8750c3d9f31a02ada7b79d9f064347aa96e780d8f104
   languageName: node
   linkType: hard
 
-"@radix-ui/react-use-callback-ref@npm:0.1.0":
-  version: 0.1.0
-  resolution: "@radix-ui/react-use-callback-ref@npm:0.1.0"
+"@radix-ui/react-slot@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-slot@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
+    "@radix-ui/react-compose-refs": 1.0.0
   peerDependencies:
-    react: ^16.8 || ^17.0
-  checksum: 5356971123d7bbc66a208eca4709483190d0927a6817089f885d4538cd701a174d76830ba36cfaa6336b340415aaefaddc606a575246b0cbcb4b1f2897075203
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: 60c0190ebdca21785b4f8b58a0c52717600c98953fc49da9580870519c60f52d5cf873dffa05446f4bb539066326ccec0827f4ca252b02ec4ff1a4ae203f59d7
   languageName: node
   linkType: hard
 
-"@radix-ui/react-use-direction@npm:0.1.0":
-  version: 0.1.0
-  resolution: "@radix-ui/react-use-direction@npm:0.1.0"
+"@radix-ui/react-use-callback-ref@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
   peerDependencies:
-    react: ^16.8 || ^17.0
-  checksum: 1553c056656a11a758c5f602b5c50708adaf9b98eb636000d4c5425e3ae539cb6e07ae92471a6f400e7c86549da26780fe413420c7f50a6da9fbf1b21cc044a4
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: a8dda76ba0a26e23dc6ab5003831ad7439f59ba9d696a517643b9ee6a7fb06b18ae7a8f5a3c00c530d5c8104745a466a077b7475b99b4c0f5c15f5fc29474471
   languageName: node
   linkType: hard
 
-"@radix-ui/react-use-layout-effect@npm:0.1.0":
-  version: 0.1.0
-  resolution: "@radix-ui/react-use-layout-effect@npm:0.1.0"
+"@radix-ui/react-use-layout-effect@npm:1.0.0":
+  version: 1.0.0
+  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.0"
   dependencies:
     "@babel/runtime": ^7.13.10
   peerDependencies:
-    react: ^16.8 || ^17.0
-  checksum: d8be1f97706dec2dcdf98284ad04a115898338dd34f68d61cf9bfda87d88c694019576313a235202b05be3a56ab6453fcee44d651f6b8a502a0cd2dbde153f49
+    react: ^16.8 || ^17.0 || ^18.0
+  checksum: fcdc8cfa79bd45766ebe3de11039c58abe3fed968cb39c12b2efce5d88013c76fe096ea4cee464d42576d02fe7697779b682b4268459bca3c4e48644f5b4ac5e
   languageName: node
   linkType: hard
 
@@ -1992,6 +2064,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/parse-json@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@types/parse-json@npm:4.0.0"
+  checksum: fd6bce2b674b6efc3db4c7c3d336bd70c90838e8439de639b909ce22f3720d21344f52427f1d9e57b265fcb7f6c018699b99e5e0c208a1a4823014269a6bf35b
+  languageName: node
+  linkType: hard
+
 "@types/prettier@npm:^2.1.5":
   version: 2.6.3
   resolution: "@types/prettier@npm:2.6.3"
@@ -2213,6 +2292,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"add@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "add@npm:2.0.6"
+  checksum: e2d23d40494565dfed4acd65e478570c444db5ac6c053551ed429c39ea0f2c99d83df63e7befec936df601827d2254d06a2fb6f7dcfd2022e810b25eab818b8c
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:6, agent-base@npm:^6.0.2":
   version: 6.0.2
   resolution: "agent-base@npm:6.0.2"
@@ -2339,6 +2425,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-hidden@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "aria-hidden@npm:1.1.3"
+  dependencies:
+    tslib: ^1.0.0
+  checksum: 2d40a328246baac7ae0b243ebe0cbef53c836c5f78c9212e9c1ff93f3aee185bd9aa51773e161e0025722d691c9d5f125070f6175a7074c4a57778ddc30d9e74
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:^4.2.2":
   version: 4.2.2
   resolution: "aria-query@npm:4.2.2"
@@ -2489,6 +2584,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-macros@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "babel-plugin-macros@npm:3.1.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+    cosmiconfig: ^7.0.0
+    resolve: ^1.19.0
+  checksum: 765de4abebd3e4688ebdfbff8571ddc8cd8061f839bb6c3e550b0344a4027b04c60491f843296ce3f3379fb356cc873d57a9ee6694262547eb822c14a25be9a6
+  languageName: node
+  linkType: hard
+
 "babel-preset-current-node-syntax@npm:^1.0.0":
   version: 1.0.1
   resolution: "babel-preset-current-node-syntax@npm:1.0.1"
@@ -2808,10 +2914,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^1.1.1":
-  version: 1.2.1
-  resolution: "clsx@npm:1.2.1"
-  checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
+"clsx@npm:1.1.1":
+  version: 1.1.1
+  resolution: "clsx@npm:1.1.1"
+  checksum: ff052650329773b9b245177305fc4c4dc3129f7b2be84af4f58dc5defa99538c61d4207be7419405a5f8f3d92007c954f4daba5a7b74e563d5de71c28c830063
   languageName: node
   linkType: hard
 
@@ -2917,7 +3023,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
+"convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
   version: 1.8.0
   resolution: "convert-source-map@npm:1.8.0"
   dependencies:
@@ -2958,6 +3064,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cosmiconfig@npm:^7.0.0":
+  version: 7.0.1
+  resolution: "cosmiconfig@npm:7.0.1"
+  dependencies:
+    "@types/parse-json": ^4.0.0
+    import-fresh: ^3.2.1
+    parse-json: ^5.0.0
+    path-type: ^4.0.0
+    yaml: ^1.10.0
+  checksum: 4be63e7117955fd88333d7460e4c466a90f556df6ef34efd59034d2463484e339666c41f02b523d574a797ec61f4a91918c5b89a316db2ea2f834e0d2d09465b
+  languageName: node
+  linkType: hard
+
 "cpu-features@npm:~0.0.4":
   version: 0.0.4
   resolution: "cpu-features@npm:0.0.4"
@@ -3323,16 +3442,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domhandler@npm:4.2.2":
-  version: 4.2.2
-  resolution: "domhandler@npm:4.2.2"
-  dependencies:
-    domelementtype: ^2.2.0
-  checksum: ad782fef984eca5a6fdd4ce70b90c38aff335ae4d6a51223ac82bd371b6674614efdcfff2dbb1126a7395634357906781f179e4ec028c7c578bb7f2beef8a4a5
-  languageName: node
-  linkType: hard
-
-"domhandler@npm:^4.0.0, domhandler@npm:^4.2.0":
+"domhandler@npm:4.3.1, domhandler@npm:^4.2.0, domhandler@npm:^4.2.2":
   version: 4.3.1
   resolution: "domhandler@npm:4.3.1"
   dependencies:
@@ -3341,7 +3451,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domutils@npm:^2.5.2":
+"domutils@npm:^2.8.0":
   version: 2.8.0
   resolution: "domutils@npm:2.8.0"
   dependencies:
@@ -3375,6 +3485,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"embla-carousel-react@npm:^7.0.0-rc05":
+  version: 7.0.0-rc05
+  resolution: "embla-carousel-react@npm:7.0.0-rc05"
+  dependencies:
+    embla-carousel: 7.0.0-rc05
+  peerDependencies:
+    react: ^18.1.0
+  checksum: d6d579b047e7ba106653c052e30b198f74288e7cfb501d3212e6516afa5417b9539415a546e38e21ba1fe97069db4c809be3317eaee2bd963bf530a6b73eef5c
+  languageName: node
+  linkType: hard
+
+"embla-carousel@npm:7.0.0-rc05":
+  version: 7.0.0-rc05
+  resolution: "embla-carousel@npm:7.0.0-rc05"
+  checksum: 7cfe080ab3bdfc013a7d4304a3deb6f2aeef34f1c8f613f5d5760995dcb91512787edac534830d5c22aaa803e6377b3964cf4d2a41eb519f1d6cd297d9a2cbee
+  languageName: node
+  linkType: hard
+
 "emittery@npm:^0.10.2":
   version: 0.10.2
   resolution: "emittery@npm:0.10.2"
@@ -3421,6 +3549,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "entities@npm:3.0.1"
+  checksum: aaf7f12033f0939be91f5161593f853f2da55866db55ccbf72f45430b8977e2b79dbd58c53d0fdd2d00bd7d313b75b0968d09f038df88e308aa97e39f9456572
+  languageName: node
+  linkType: hard
+
 "env-paths@npm:^2.2.0":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
@@ -3983,12 +4118,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-selector@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "file-selector@npm:0.4.0"
+"file-selector@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "file-selector@npm:0.6.0"
   dependencies:
-    tslib: ^2.0.3
-  checksum: 1c9986e94bd033442cb4299d10d73d98fbc0b5f1af5b47d7a27b39f1e6bbd8d677f66c2628167da387166c652ad3c2429875042b453ba62f14945d903adf88d5
+    tslib: ^2.4.0
+  checksum: 7d051b6e5d793f3c6e2ab287ba5e7c2c6a0971bccc9d56e044c8047ba483e18f60fc0b5771c951dc707c0d15f4f36ccb4f1f1aaf385d21ec8f7700dadf8325ba
   languageName: node
   linkType: hard
 
@@ -4001,6 +4136,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-root@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "find-root@npm:1.1.0"
+  checksum: b2a59fe4b6c932eef36c45a048ae8f93c85640212ebe8363164814990ee20f154197505965f3f4f102efc33bfb1cbc26fd17c4a2fc739ebc51b886b137cbefaf
+  languageName: node
+  linkType: hard
+
 "find-up@npm:^2.1.0":
   version: 2.1.0
   resolution: "find-up@npm:2.1.0"
@@ -4469,14 +4611,17 @@ __metadata:
     "@dnd-kit/core": ^6.0.5
     "@dnd-kit/sortable": ^7.0.1
     "@dnd-kit/utilities": ^3.2.0
-    "@mantine/core": ^4.2.12
-    "@mantine/dates": ^4.2.12
-    "@mantine/dropzone": ^4.2.12
-    "@mantine/form": ^4.2.12
-    "@mantine/hooks": ^4.2.12
-    "@mantine/next": ^4.2.12
-    "@mantine/notifications": ^4.2.12
-    "@mantine/prism": ^4.2.12
+    "@emotion/react": ^11.10.0
+    "@emotion/server": ^11.10.0
+    "@mantine/carousel": ^5.0.0
+    "@mantine/core": ^5.0.2
+    "@mantine/dates": ^5.0.2
+    "@mantine/dropzone": ^5.0.2
+    "@mantine/form": ^5.0.2
+    "@mantine/hooks": ^5.0.2
+    "@mantine/next": ^5.0.2
+    "@mantine/notifications": ^5.0.2
+    "@mantine/prism": ^5.0.0
     "@next/bundle-analyzer": ^12.1.4
     "@next/eslint-plugin-next": ^12.1.4
     "@nivo/core": ^0.79.0
@@ -4488,10 +4633,12 @@ __metadata:
     "@types/uuid": ^8.3.4
     "@typescript-eslint/eslint-plugin": ^5.30.7
     "@typescript-eslint/parser": ^5.30.7
+    add: ^2.0.6
     axios: ^0.27.2
     cookies-next: ^2.1.1
     dayjs: ^1.11.4
     dockerode: ^3.3.2
+    embla-carousel-react: ^7.0.0-rc05
     eslint: ^8.20.0
     eslint-config-airbnb: ^19.0.4
     eslint-config-airbnb-typescript: ^17.0.0
@@ -4509,21 +4656,22 @@ __metadata:
     next: 12.1.6
     prettier: ^2.7.1
     prism-react-renderer: ^1.3.5
-    react: ^17.0.1
-    react-dom: ^17.0.1
+    react: ^18.2.0
+    react-dom: ^18.2.0
     systeminformation: ^5.12.1
     typescript: ^4.7.4
     uuid: ^8.3.2
+    yarn: ^1.22.19
   languageName: unknown
   linkType: soft
 
-"html-dom-parser@npm:1.0.2":
-  version: 1.0.2
-  resolution: "html-dom-parser@npm:1.0.2"
+"html-dom-parser@npm:1.2.0":
+  version: 1.2.0
+  resolution: "html-dom-parser@npm:1.2.0"
   dependencies:
-    domhandler: 4.2.2
-    htmlparser2: 6.1.0
-  checksum: e820edb9eef84379ad57866ba43abb43429c7c07fe61d153a4bc2295fd72e4a93dd19f1c24408d9a0ca5bd048f6ef6c59ef5b23b1f5204788524b22848631be2
+    domhandler: 4.3.1
+    htmlparser2: 7.2.0
+  checksum: d5e72baba7e1a9da334f023f3b3669247c5cebaf51b23011764202c11b3850339aa0fef9f26e00c2b0510e75fe6183453fcba33304a006f9fcde3d037bf60f3d
   languageName: node
   linkType: hard
 
@@ -4534,17 +4682,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-react-parser@npm:1.3.0":
-  version: 1.3.0
-  resolution: "html-react-parser@npm:1.3.0"
+"html-react-parser@npm:1.4.12":
+  version: 1.4.12
+  resolution: "html-react-parser@npm:1.4.12"
   dependencies:
-    domhandler: 4.2.2
-    html-dom-parser: 1.0.2
+    domhandler: 4.3.1
+    html-dom-parser: 1.2.0
     react-property: 2.0.0
     style-to-js: 1.1.0
   peerDependencies:
-    react: 0.14 || 15 || 16 || 17
-  checksum: 80ac304b0d2c97d1662fb29a17a9c144682577de8c451dc2f8175f6711b841f959669ac7d991752b969ad250e9268f328512ef0804354bf6e9687ff9048b9c8d
+    react: 0.14 || 15 || 16 || 17 || 18
+  checksum: ddc62b2f8d0f8836ca7aa18e51ddd3e329b51d77810547cd6bcb194aa36c61533ed64a8356283b64d57e1b4b96eb7c2fbf6e657e1b4c6d0fad8577132efa6f30
   languageName: node
   linkType: hard
 
@@ -4563,15 +4711,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"htmlparser2@npm:6.1.0":
-  version: 6.1.0
-  resolution: "htmlparser2@npm:6.1.0"
+"htmlparser2@npm:7.2.0":
+  version: 7.2.0
+  resolution: "htmlparser2@npm:7.2.0"
   dependencies:
     domelementtype: ^2.0.1
-    domhandler: ^4.0.0
-    domutils: ^2.5.2
-    entities: ^2.0.0
-  checksum: 81a7b3d9c3bb9acb568a02fc9b1b81ffbfa55eae7f1c41ae0bf840006d1dbf54cb3aa245b2553e2c94db674840a9f0fdad7027c9a9d01a062065314039058c4e
+    domhandler: ^4.2.2
+    domutils: ^2.8.0
+    entities: ^3.0.1
+  checksum: 96563d9965729cfcb3f5f19c26d013c6831b4cb38d79d8c185e9cd669ea6a9ffe8fb9ccc74d29a068c9078aa0e2767053ed6b19aa32723c41550340d0094bea0
   languageName: node
   linkType: hard
 
@@ -5541,6 +5689,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"klona@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "klona@npm:2.0.5"
+  checksum: 8c976126ea252b766e648a4866e1bccff9d3b08432474ad80c559f6c7265cf7caede2498d463754d8c88c4759895edd8210c85c0d3155e6aae4968362889466f
+  languageName: node
+  linkType: hard
+
 "language-subtag-registry@npm:~0.3.2":
   version: 0.3.22
   resolution: "language-subtag-registry@npm:0.3.22"
@@ -5614,7 +5769,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -6298,7 +6453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-json@npm:^5.2.0":
+"parse-json@npm:^5.0.0, parse-json@npm:^5.2.0":
   version: 5.2.0
   resolution: "parse-json@npm:5.2.0"
   dependencies:
@@ -6525,36 +6680,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.23.0
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.2.0
+  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
   languageName: node
   linkType: hard
 
-"react-dropzone@npm:^11.4.2":
-  version: 11.7.1
-  resolution: "react-dropzone@npm:11.7.1"
+"react-dropzone@npm:14.2.1":
+  version: 14.2.1
+  resolution: "react-dropzone@npm:14.2.1"
   dependencies:
     attr-accept: ^2.2.2
-    file-selector: ^0.4.0
+    file-selector: ^0.6.0
     prop-types: ^15.8.1
   peerDependencies:
-    react: ">= 16.8"
-  checksum: 7549bb67da5222dfbb7b79d9df84a4f2bd417e53396df8b0772a95fd7621ec967b87a17ff7f1e54eb5597d73c51c2a0d16328c792b11e751c73e18e2f7160207
-  languageName: node
-  linkType: hard
-
-"react-fast-compare@npm:^3.0.1":
-  version: 3.2.0
-  resolution: "react-fast-compare@npm:3.2.0"
-  checksum: 8ef272c825ae329f61633ce4ce7f15aa5b84e5214d88bc0823880236e03e985a13195befa2c7a4eda7db3b017dc7985729152d88445823f652403cf36c2b86aa
+    react: ">= 16.8 || 18.0.0"
+  checksum: 8556d997d66bad79fe165a30d6dc8f917c67d8c7d23069c417eb2a0da6df824ba71b84b532707711e184da105122f6a6e81104341dc5b8c0f96e318267fdda91
   languageName: node
   linkType: hard
 
@@ -6579,20 +6726,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-popper@npm:^2.2.5":
-  version: 2.3.0
-  resolution: "react-popper@npm:2.3.0"
-  dependencies:
-    react-fast-compare: ^3.0.1
-    warning: ^4.0.2
-  peerDependencies:
-    "@popperjs/core": ^2.0.0
-    react: ^16.8.0 || ^17 || ^18
-    react-dom: ^16.8.0 || ^17 || ^18
-  checksum: 837111c98738011c69b3069a464ea5bdcbf487105b6148e8faf90cb7337e134edb1b98b8824322941c378756cca30a15c18c25f558e53b85ed5762fa0dc8e6b2
-  languageName: node
-  linkType: hard
-
 "react-property@npm:2.0.0":
   version: 2.0.0
   resolution: "react-property@npm:2.0.0"
@@ -6600,7 +6733,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-textarea-autosize@npm:^8.3.2":
+"react-textarea-autosize@npm:8.3.4":
   version: 8.3.4
   resolution: "react-textarea-autosize@npm:8.3.4"
   dependencies:
@@ -6613,7 +6746,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-transition-group@npm:^4.4.2":
+"react-transition-group@npm:4.4.2":
   version: 4.4.2
   resolution: "react-transition-group@npm:4.4.2"
   dependencies:
@@ -6628,13 +6761,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
   languageName: node
   linkType: hard
 
@@ -6745,7 +6877,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.20.0, resolve@npm:^1.22.0":
+"resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0":
   version: 1.22.1
   resolution: "resolve@npm:1.22.1"
   dependencies:
@@ -6771,7 +6903,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>":
+"resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>":
   version: 1.22.1
   resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=07638b"
   dependencies:
@@ -6861,13 +6993,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
+"scheduler@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "scheduler@npm:0.23.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
+  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
   languageName: node
   linkType: hard
 
@@ -7002,6 +7133,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "source-map@npm:0.5.7"
+  checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d
+  languageName: node
+  linkType: hard
+
 "source-map@npm:^0.6.0, source-map@npm:^0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -7419,14 +7557,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^1.8.1":
+"tslib@npm:^1.0.0, tslib@npm:^1.8.1":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
   checksum: dbe628ef87f66691d5d2959b3e41b9ca0045c3ee3c7c7b906cc1e328b39f199bb1ad9e671c39025bd56122ac57dfbf7385a94843b1cc07c60a4db74795829acd
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.1":
+"tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0":
   version: 2.4.0
   resolution: "tslib@npm:2.4.0"
   checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113
@@ -7639,15 +7777,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.2":
-  version: 4.0.3
-  resolution: "warning@npm:4.0.3"
-  dependencies:
-    loose-envify: ^1.0.0
-  checksum: 4f2cb6a9575e4faf71ddad9ad1ae7a00d0a75d24521c193fa464f30e6b04027bd97aa5d9546b0e13d3a150ab402eda216d59c1d0f2d6ca60124d96cd40dfa35c
-  languageName: node
-  linkType: hard
-
 "web-streams-polyfill@npm:4.0.0-beta.1":
   version: 4.0.0-beta.1
   resolution: "web-streams-polyfill@npm:4.0.0-beta.1"
@@ -7780,6 +7909,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^1.10.0":
+  version: 1.10.2
+  resolution: "yaml@npm:1.10.2"
+  checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f
+  languageName: node
+  linkType: hard
+
 "yargs-parser@npm:^21.0.0":
   version: 21.0.1
   resolution: "yargs-parser@npm:21.0.1"
@@ -7802,6 +7938,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yarn@npm:^1.22.19":
+  version: 1.22.19
+  resolution: "yarn@npm:1.22.19"
+  bin:
+    yarn: bin/yarn.js
+    yarnpkg: bin/yarn.js
+  checksum: b43d2cc5fee7e933beb12a8aee7dfceca9e9ef2dd17c5d04d15a12ab7bec5f5744ea34a07b86e013da7f291a18c4e1ad8f70e150f5ed2f4666e6723c7f0a8452
+  languageName: node
+  linkType: hard
+
 "yocto-queue@npm:^0.1.0":
   version: 0.1.0
   resolution: "yocto-queue@npm:0.1.0"