diff --git a/src/frontend/src/components/buttons/CopyButton.tsx b/src/frontend/src/components/buttons/CopyButton.tsx
index d1ebb8dacb..bf51eebd0b 100644
--- a/src/frontend/src/components/buttons/CopyButton.tsx
+++ b/src/frontend/src/components/buttons/CopyButton.tsx
@@ -17,7 +17,7 @@ export function CopyButton({
           onClick={copy}
           title={t`Copy to clipboard`}
           variant="subtle"
-          compact
+          size="compact-md"
         >
           <IconCopy size={10} />
           {label && <div>&nbsp;</div>}
diff --git a/src/frontend/src/components/buttons/SSOButton.tsx b/src/frontend/src/components/buttons/SSOButton.tsx
index 503f5dafd5..08f9fd44da 100644
--- a/src/frontend/src/components/buttons/SSOButton.tsx
+++ b/src/frontend/src/components/buttons/SSOButton.tsx
@@ -50,7 +50,7 @@ export function SsoButton({ provider }: { provider: Provider }) {
 
   return (
     <Button
-      leftIcon={getBrandIcon(provider)}
+      leftSection={getBrandIcon(provider)}
       radius="xl"
       component="a"
       onClick={login}
diff --git a/src/frontend/src/components/buttons/SplitButton.tsx b/src/frontend/src/components/buttons/SplitButton.tsx
index ced5a4224b..dc9700e94f 100644
--- a/src/frontend/src/components/buttons/SplitButton.tsx
+++ b/src/frontend/src/components/buttons/SplitButton.tsx
@@ -89,7 +89,7 @@ export function SplitButton({
                 option.onClick();
               }}
               disabled={option.disabled}
-              icon={<option.icon />}
+              leftSection={<option.icon />}
             >
               <Tooltip label={option.tooltip} position="right">
                 <Text>{option.name}</Text>
diff --git a/src/frontend/src/components/details/DetailsImage.tsx b/src/frontend/src/components/details/DetailsImage.tsx
index ae3ba2373d..61b48ce20b 100644
--- a/src/frontend/src/components/details/DetailsImage.tsx
+++ b/src/frontend/src/components/details/DetailsImage.tsx
@@ -7,11 +7,10 @@ import {
   Overlay,
   Paper,
   Text,
-  rem,
-  useMantineTheme
+  rem
 } from '@mantine/core';
 import { Dropzone, FileWithPath, IMAGE_MIME_TYPE } from '@mantine/dropzone';
-import { useHover } from '@mantine/hooks';
+import { useColorScheme, useHover } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { useMemo, useState } from 'react';
 
@@ -21,6 +20,7 @@ import { cancelEvent } from '../../functions/events';
 import { InvenTreeIcon } from '../../functions/icons';
 import { useUserState } from '../../states/UserState';
 import { PartThumbTable } from '../../tables/part/PartThumbTable';
+import { vars } from '../../theme';
 import { ActionButton } from '../buttons/ActionButton';
 import { ApiImage } from '../images/ApiImage';
 import { StylishText } from '../items/StylishText';
@@ -87,8 +87,6 @@ function UploadModal({
   const [file1, setFile] = useState<FileWithPath | null>(null);
   let uploading = false;
 
-  const theme = useMantineTheme();
-
   // Components to show in the Dropzone when no file is selected
   const noFileIdle = (
     <Group>
@@ -160,9 +158,11 @@ function UploadModal({
     }
   };
 
+  const preferredColorScheme = useColorScheme();
+
   const primaryColor =
-    theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6];
-  const redColor = theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6];
+    vars.colors.primaryColors[preferredColorScheme === 'dark' ? 4 : 6];
+  const redColor = vars.colors.red[preferredColorScheme === 'dark' ? 4 : 6];
 
   return (
     <Paper sx={{ height: '220px' }}>
@@ -173,7 +173,7 @@ function UploadModal({
         loading={uploading}
       >
         <Group
-          position="center"
+          justify="center"
           gap="xl"
           style={{ minHeight: rem(140), pointerEvents: 'none' }}
         >
diff --git a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx b/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
index ddabc2eed3..ad8a10c6ef 100644
--- a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
+++ b/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
@@ -223,7 +223,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
       <Split style={{ gap: '10px' }}>
         <Tabs
           value={editorValue}
-          onTabChange={async (v) => {
+          onChange={async (v) => {
             codeRef.current = await getCodeFromEditor();
             setEditorValue(v);
           }}
@@ -240,7 +240,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
               <Tabs.Tab
                 key={Editor.key}
                 value={Editor.key}
-                icon={<Editor.icon size="0.8rem" />}
+                leftSection={<Editor.icon size="0.8rem" />}
               >
                 {Editor.name}
               </Tabs.Tab>
@@ -289,7 +289,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
 
         <Tabs
           value={previewValue}
-          onTabChange={setPreviewValue}
+          onChange={setPreviewValue}
           style={{
             minWidth: '200px',
             display: 'flex',
@@ -301,7 +301,7 @@ export function TemplateEditor(props: TemplateEditorProps) {
               <Tabs.Tab
                 key={PreviewArea.key}
                 value={PreviewArea.key}
-                icon={<PreviewArea.icon size="0.8rem" />}
+                leftSection={<PreviewArea.icon size="0.8rem" />}
               >
                 {PreviewArea.name}
               </Tabs.Tab>
diff --git a/src/frontend/src/components/forms/HostOptionsForm.tsx b/src/frontend/src/components/forms/HostOptionsForm.tsx
index c8ee15bc7a..16f082feb8 100644
--- a/src/frontend/src/components/forms/HostOptionsForm.tsx
+++ b/src/frontend/src/components/forms/HostOptionsForm.tsx
@@ -70,7 +70,7 @@ export function HostOptionsForm({
             </Text>
           </Group>
         ) : (
-          <Text color="dimmed" align="center">
+          <Text c="dimmed" align="center">
             <Trans>No one here...</Trans>
           </Text>
         )}
diff --git a/src/frontend/src/components/forms/fields/ApiFormField.tsx b/src/frontend/src/components/forms/fields/ApiFormField.tsx
index 3e3dff7c9c..26aa9b71c6 100644
--- a/src/frontend/src/components/forms/fields/ApiFormField.tsx
+++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx
@@ -240,7 +240,7 @@ export function ApiFormField({
               return `${1 * v.toFixed()}`;
             }}
             precision={definition.field_type == 'integer' ? 0 : 10}
-            onChange={(value: number) => onChange(value)}
+            onChange={(value) => onChange(value)}
           />
         );
       case 'choice':
diff --git a/src/frontend/src/components/forms/fields/ChoiceField.tsx b/src/frontend/src/components/forms/fields/ChoiceField.tsx
index d0137d9d3b..c345e52b1e 100644
--- a/src/frontend/src/components/forms/fields/ChoiceField.tsx
+++ b/src/frontend/src/components/forms/fields/ChoiceField.tsx
@@ -63,7 +63,7 @@ export function ChoiceField({
       placeholder={definition.placeholder}
       required={definition.required}
       disabled={definition.disabled}
-      icon={definition.icon}
+      leftSection={definition.icon}
       withinPortal={true}
     />
   );
diff --git a/src/frontend/src/components/forms/fields/DateField.tsx b/src/frontend/src/components/forms/fields/DateField.tsx
index 923131c32d..60475fa165 100644
--- a/src/frontend/src/components/forms/fields/DateField.tsx
+++ b/src/frontend/src/components/forms/fields/DateField.tsx
@@ -61,7 +61,7 @@ export default function DateField({
       label={definition.label}
       description={definition.description}
       placeholder={definition.placeholder}
-      icon={definition.icon}
+      leftSection={definition.icon}
     />
   );
 }
diff --git a/src/frontend/src/components/items/ActionDropdown.tsx b/src/frontend/src/components/items/ActionDropdown.tsx
index e3c2f951f1..60eb4be71f 100644
--- a/src/frontend/src/components/items/ActionDropdown.tsx
+++ b/src/frontend/src/components/items/ActionDropdown.tsx
@@ -77,7 +77,7 @@ export function ActionDropdown({
             >
               <Tooltip label={action.tooltip}>
                 <Menu.Item
-                  icon={action.icon}
+                  leftSection={action.icon}
                   onClick={() => {
                     if (action.onClick != undefined) {
                       action.onClick();
diff --git a/src/frontend/src/components/items/Placeholder.tsx b/src/frontend/src/components/items/Placeholder.tsx
index e1da638c39..7777478b04 100644
--- a/src/frontend/src/components/items/Placeholder.tsx
+++ b/src/frontend/src/components/items/Placeholder.tsx
@@ -31,7 +31,7 @@ export function PlaceholderPanel() {
         title={t`This panel is a placeholder.`}
         icon={<IconInfoCircle />}
       >
-        <Text color="gray">This panel has not yet been implemented</Text>
+        <Text c="gray">This panel has not yet been implemented</Text>
       </Alert>
     </Stack>
   );
diff --git a/src/frontend/src/components/modals/QrCodeModal.tsx b/src/frontend/src/components/modals/QrCodeModal.tsx
index c5d04bc76c..2f9ba11199 100644
--- a/src/frontend/src/components/modals/QrCodeModal.tsx
+++ b/src/frontend/src/components/modals/QrCodeModal.tsx
@@ -177,7 +177,7 @@ export function QrCodeModal({
             </Button>
           </Group>
           {values.length == 0 ? (
-            <Text color={'grey'}>
+            <Text c={'grey'}>
               <Trans>No scans yet!</Trans>
             </Text>
           ) : (
diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx
index 5b4638aa85..5e43603f4b 100644
--- a/src/frontend/src/components/nav/Header.tsx
+++ b/src/frontend/src/components/nav/Header.tsx
@@ -128,11 +128,11 @@ function NavTabs() {
       defaultValue="home"
       classNames={{
         root: classes.tabs,
-        tabsList: classes.tabsList,
+        list: classes.tabsList,
         tab: classes.tab
       }}
       value={tabValue}
-      onTabChange={(value) =>
+      onChange={(value) =>
         value == '/' ? navigate('/') : navigate(`/${value}`)
       }
     >
diff --git a/src/frontend/src/components/nav/MainMenu.tsx b/src/frontend/src/components/nav/MainMenu.tsx
index aab8ba002b..f4e3e30b8b 100644
--- a/src/frontend/src/components/nav/MainMenu.tsx
+++ b/src/frontend/src/components/nav/MainMenu.tsx
@@ -38,12 +38,16 @@ export function MainMenu() {
         <Menu.Label>
           <Trans>Settings</Trans>
         </Menu.Label>
-        <Menu.Item icon={<IconUserCog />} component={Link} to="/settings/user">
+        <Menu.Item
+          leftSection={<IconUserCog />}
+          component={Link}
+          to="/settings/user"
+        >
           <Trans>Account settings</Trans>
         </Menu.Item>
         {userState.user?.is_staff && (
           <Menu.Item
-            icon={<IconSettings />}
+            leftSection={<IconSettings />}
             component={Link}
             to="/settings/system"
           >
@@ -53,7 +57,7 @@ export function MainMenu() {
         {userState.user?.is_staff && <Menu.Divider />}
         {userState.user?.is_staff && (
           <Menu.Item
-            icon={<IconUserBolt />}
+            leftSection={<IconUserBolt />}
             component={Link}
             to="/settings/admin"
           >
@@ -62,7 +66,7 @@ export function MainMenu() {
         )}
         <Menu.Divider />
         <Menu.Item
-          icon={<IconLogout />}
+          leftSection={<IconLogout />}
           onClick={() => {
             doLogout(navigate);
           }}
diff --git a/src/frontend/src/components/nav/PanelGroup.tsx b/src/frontend/src/components/nav/PanelGroup.tsx
index de38a77423..95b6ad7904 100644
--- a/src/frontend/src/components/nav/PanelGroup.tsx
+++ b/src/frontend/src/components/nav/PanelGroup.tsx
@@ -108,7 +108,7 @@ function BasePanelGroup({
       <Tabs
         value={panel}
         orientation="vertical"
-        onTabChange={handlePanelChange}
+        onChange={handlePanelChange}
         keepMounted={false}
       >
         <Tabs.List position="left">
@@ -124,7 +124,7 @@ function BasePanelGroup({
                     p="xs"
                     value={panel.name}
                     //                    icon={(<InvenTreeIcon icon={panel.name}/>)}  // Enable when implementing Icon manager everywhere
-                    icon={panel.icon}
+                    leftSection={panel.icon}
                     hidden={panel.hidden}
                     disabled={panel.disabled}
                     style={{ cursor: panel.disabled ? 'unset' : 'pointer' }}
diff --git a/src/frontend/src/components/nav/PartCategoryTree.tsx b/src/frontend/src/components/nav/PartCategoryTree.tsx
index 04d99496a4..d10966e6ff 100644
--- a/src/frontend/src/components/nav/PartCategoryTree.tsx
+++ b/src/frontend/src/components/nav/PartCategoryTree.tsx
@@ -59,7 +59,7 @@ export function PartCategoryTree({
   function renderNode({ node }: { node: any }) {
     return (
       <Group
-        position="apart"
+        justify="apart"
         key={node.id}
         wrap="nowrap"
         onClick={() => {
diff --git a/src/frontend/src/components/nav/SearchDrawer.tsx b/src/frontend/src/components/nav/SearchDrawer.tsx
index c05f6b0eb5..13dd185fcf 100644
--- a/src/frontend/src/components/nav/SearchDrawer.tsx
+++ b/src/frontend/src/components/nav/SearchDrawer.tsx
@@ -337,7 +337,7 @@ export function SearchDrawer({
             radius="xs"
             value={value}
             onChange={(event) => setValue(event.currentTarget.value)}
-            icon={<IconSearch size="0.8rem" />}
+            leftSection={<IconSearch size="0.8rem" />}
             rightSection={
               value && (
                 <IconBackspace color="red" onClick={() => setValue('')} />
diff --git a/src/frontend/src/components/widgets/WidgetLayout.tsx b/src/frontend/src/components/widgets/WidgetLayout.tsx
index 7cfa6aedcd..ff79377399 100644
--- a/src/frontend/src/components/widgets/WidgetLayout.tsx
+++ b/src/frontend/src/components/widgets/WidgetLayout.tsx
@@ -160,13 +160,13 @@ function WidgetControlBar({
             <Trans>Layout</Trans>
           </Menu.Label>
           <Menu.Item
-            icon={<IconArrowBackUpDouble size={14} />}
+            leftSection={<IconArrowBackUpDouble size={14} />}
             onClick={resetLayout}
           >
             <Trans>Reset Layout</Trans>
           </Menu.Item>
           <Menu.Item
-            icon={
+            leftSection={
               <IconLayout2 size={14} color={editable ? 'red' : undefined} />
             }
             onClick={editFnc}
@@ -185,7 +185,7 @@ function WidgetControlBar({
             <Trans>Appearance</Trans>
           </Menu.Label>
           <Menu.Item
-            icon={
+            leftSection={
               boxShown ? (
                 <IconSquareCheck size={14} />
               ) : (
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
index 2a0ac3d85f..1c91a6b640 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
@@ -11,7 +11,6 @@ import {
   Table,
   Title
 } from '@mantine/core';
-import { LoaderType } from '@mantine/styles/lib/theme/types/MantineTheme';
 import { useState } from 'react';
 
 import { SizeMarks } from '../../../../defaults/defaults';
@@ -67,8 +66,8 @@ export function UserTheme({ height }: { height: number }) {
     { value: 'oval', label: t`oval` },
     { value: 'dots', label: t`dots` }
   ];
-  const [loader, setLoader] = useState<LoaderType>(theme.loader);
-  function changeLoader(value: LoaderType) {
+  const [loader, setLoader] = useState<string>(theme.loader);
+  function changeLoader(value: string) {
     setLoader(value);
     useLocalState.setState({ loader: value });
   }
diff --git a/src/frontend/src/tables/RowActions.tsx b/src/frontend/src/tables/RowActions.tsx
index 1b35741fe4..87b2d39368 100644
--- a/src/frontend/src/tables/RowActions.tsx
+++ b/src/frontend/src/tables/RowActions.tsx
@@ -114,7 +114,7 @@ export function RowActions({
       >
         <Menu.Item
           color={action.color}
-          icon={action.icon}
+          leftSection={action.icon}
           onClick={(event) => {
             // Prevent clicking on the action from selecting the row itself
             cancelEvent(event);
diff --git a/src/frontend/src/tables/bom/BomTable.tsx b/src/frontend/src/tables/bom/BomTable.tsx
index d58b09d3c1..f430bcd37c 100644
--- a/src/frontend/src/tables/bom/BomTable.tsx
+++ b/src/frontend/src/tables/bom/BomTable.tsx
@@ -217,7 +217,7 @@ export function BomTable({
           can_build = Math.trunc(can_build);
 
           return (
-            <Text color={can_build <= 0 ? 'red' : undefined}>{can_build}</Text>
+            <Text c={can_build <= 0 ? 'red' : undefined}>{can_build}</Text>
           );
         }
       },
diff --git a/src/frontend/src/tables/build/BuildLineTable.tsx b/src/frontend/src/tables/build/BuildLineTable.tsx
index 550563c757..985562c291 100644
--- a/src/frontend/src/tables/build/BuildLineTable.tsx
+++ b/src/frontend/src/tables/build/BuildLineTable.tsx
@@ -109,7 +109,7 @@ export default function BuildLineTable({ params = {} }: { params?: any }) {
           available > 0 ? (
             available
           ) : (
-            <Text color="red" italic>{t`No stock available`}</Text>
+            <Text c="red" italic>{t`No stock available`}</Text>
           )
         }
         title={t`Available Stock`}
diff --git a/src/frontend/src/tables/machine/MachineListTable.tsx b/src/frontend/src/tables/machine/MachineListTable.tsx
index 6c0dd920a7..86c2693160 100644
--- a/src/frontend/src/tables/machine/MachineListTable.tsx
+++ b/src/frontend/src/tables/machine/MachineListTable.tsx
@@ -287,7 +287,10 @@ function MachineDrawer({
             </ActionIcon>
           </Group>
           <Stack pos="relative" gap="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
             <InfoItem name={t`Machine Type`}>
               <Group gap="xs">
                 {machineType ? (
diff --git a/src/frontend/src/tables/machine/MachineTypeTable.tsx b/src/frontend/src/tables/machine/MachineTypeTable.tsx
index 90b68d2b91..91151c115b 100644
--- a/src/frontend/src/tables/machine/MachineTypeTable.tsx
+++ b/src/frontend/src/tables/machine/MachineTypeTable.tsx
@@ -102,7 +102,10 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
           </Group>
 
           <Stack pos="relative" gap="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
             <InfoItem name={t`Name`} value={machineType?.name} type="text" />
             <InfoItem name={t`Slug`} value={machineType?.slug} type="text" />
             <InfoItem
@@ -206,7 +209,10 @@ function MachineDriverDrawer({
           </Group>
 
           <Stack pos="relative" gap="xs">
-            <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+            <LoadingOverlay
+              visible={isFetching}
+              overlayProps={{ opacity: 0 }}
+            />
             <InfoItem name={t`Name`} value={machineDriver?.name} type="text" />
             <InfoItem name={t`Slug`} value={machineDriver?.slug} type="text" />
             <InfoItem
diff --git a/src/frontend/src/tables/part/PartTable.tsx b/src/frontend/src/tables/part/PartTable.tsx
index 9a26d15d30..7c43414dff 100644
--- a/src/frontend/src/tables/part/PartTable.tsx
+++ b/src/frontend/src/tables/part/PartTable.tsx
@@ -141,7 +141,7 @@ function partTableColumns(): TableColumn[] {
           <TableHoverCard
             value={
               <Group gap="xs" justify="left" wrap="nowrap">
-                <Text color={color}>{text}</Text>
+                <Text c={color}>{text}</Text>
                 {record.units && (
                   <Text size="xs" color={color}>
                     [{record.units}]
diff --git a/src/frontend/src/tables/plugin/PluginListTable.tsx b/src/frontend/src/tables/plugin/PluginListTable.tsx
index cfac22fdb4..449f57281e 100644
--- a/src/frontend/src/tables/plugin/PluginListTable.tsx
+++ b/src/frontend/src/tables/plugin/PluginListTable.tsx
@@ -158,7 +158,7 @@ export function PluginDrawer({
         />
       </Group>
 
-      <LoadingOverlay visible={isFetching} overlayOpacity={0} />
+      <LoadingOverlay visible={isFetching} overlayProps={{ opacity: 0 }} />
 
       <Card withBorder>
         <Stack gap="md">
diff --git a/src/frontend/src/tables/stock/StockItemTable.tsx b/src/frontend/src/tables/stock/StockItemTable.tsx
index 0bf71cc8ed..2c6307befb 100644
--- a/src/frontend/src/tables/stock/StockItemTable.tsx
+++ b/src/frontend/src/tables/stock/StockItemTable.tsx
@@ -179,7 +179,7 @@ function stockItemTableColumns(): TableColumn[] {
           <TableHoverCard
             value={
               <Group gap="xs" justify="left" wrap="nowrap">
-                <Text color={color}>{text}</Text>
+                <Text c={color}>{text}</Text>
                 {part.units && (
                   <Text size="xs" color={color}>
                     [{part.units}]