diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png
index b0b41c6da83..3839417cd61 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png
index 212fc2772e6..901dcfdcaf7 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png
index 5768c3caae2..26a250f526c 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-import-csv-file-twice-3-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png
index f44ea97dd8b..e7a013dbc19 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png
index 696614b2d6f..38b7a93c49a 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png
index 39de13be31c..f12ba262c8e 100644
Binary files a/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png and b/packages/desktop-client/e2e/accounts.test.js-snapshots/Accounts-Import-Transactions-imports-transactions-from-a-CSV-file-3-chromium-linux.png differ
diff --git a/packages/desktop-client/globals.d.ts b/packages/desktop-client/globals.d.ts
index ce1ae7b7547..d05b3b39970 100644
--- a/packages/desktop-client/globals.d.ts
+++ b/packages/desktop-client/globals.d.ts
@@ -1,2 +1,9 @@
+import { type CSSObject } from '@emotion/css/dist/declarations/src/create-instance';
+
 // Allow images to be imported
 declare module '*.png';
+
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-empty-object-type
+  interface CSSProperties extends CSSObject {}
+}
diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
index 0c487c4c95c..bc81bc77bad 100644
--- a/packages/desktop-client/package.json
+++ b/packages/desktop-client/package.json
@@ -6,6 +6,7 @@
     "build"
   ],
   "devDependencies": {
+    "@emotion/css": "^11.13.4",
     "@fontsource/redacted-script": "^5.0.21",
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.41.1",
@@ -36,7 +37,6 @@
     "debounce": "^1.2.1",
     "downshift": "7.6.2",
     "focus-visible": "^4.1.5",
-    "glamor": "^2.20.40",
     "i18next": "^23.11.5",
     "i18next-parser": "^9.0.0",
     "i18next-resources-to-backend": "^1.2.1",
diff --git a/packages/desktop-client/src/components/AnimatedRefresh.tsx b/packages/desktop-client/src/components/AnimatedRefresh.tsx
index e94e3a319b1..b9273bf9556 100644
--- a/packages/desktop-client/src/components/AnimatedRefresh.tsx
+++ b/packages/desktop-client/src/components/AnimatedRefresh.tsx
@@ -1,10 +1,9 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { keyframes } from 'glamor';
+import { keyframes } from '@emotion/css';
 
 import { SvgRefresh } from '../icons/v1';
-import { type CSSProperties } from '../style';
 
 import { View } from './common/View';
 
diff --git a/packages/desktop-client/src/components/AppBackground.tsx b/packages/desktop-client/src/components/AppBackground.tsx
index 0a1bfc0ac3a..9d57bafdde8 100644
--- a/packages/desktop-client/src/components/AppBackground.tsx
+++ b/packages/desktop-client/src/components/AppBackground.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { theme } from '../style';
@@ -33,7 +33,7 @@ export function AppBackground({ isLoading }: AppBackgroundProps) {
         transitions((style, item) => (
           <animated.div key={item} style={style}>
             <View
-              className={`${css({
+              className={css({
                 position: 'absolute',
                 top: 0,
                 left: 0,
@@ -42,7 +42,7 @@ export function AppBackground({ isLoading }: AppBackgroundProps) {
                 paddingTop: 200,
                 color: theme.pageText,
                 alignItems: 'center',
-              })}`}
+              })}
             >
               <Block style={{ marginBottom: 20, fontSize: 18 }}>
                 {loadingText}
diff --git a/packages/desktop-client/src/components/FixedSizeList.tsx b/packages/desktop-client/src/components/FixedSizeList.tsx
index b2257a0a099..0baf528d125 100644
--- a/packages/desktop-client/src/components/FixedSizeList.tsx
+++ b/packages/desktop-client/src/components/FixedSizeList.tsx
@@ -6,12 +6,11 @@ import {
   type Ref,
   type MutableRefObject,
   type UIEvent,
+  type CSSProperties,
 } from 'react';
 
 import memoizeOne from 'memoize-one';
 
-import { type CSSProperties } from '../style';
-
 import { View } from './common/View';
 
 const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
index 0bc04078e6d..ec7df311bbf 100644
--- a/packages/desktop-client/src/components/LoggedInUser.tsx
+++ b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { type State } from 'loot-core/src/client/state-types';
 
 import { useActions } from '../hooks/useActions';
-import { theme, styles, type CSSProperties } from '../style';
+import { theme, styles } from '../style';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';
diff --git a/packages/desktop-client/src/components/ManageRules.tsx b/packages/desktop-client/src/components/ManageRules.tsx
index e561fa700fe..f3eb583005a 100644
--- a/packages/desktop-client/src/components/ManageRules.tsx
+++ b/packages/desktop-client/src/components/ManageRules.tsx
@@ -117,17 +117,14 @@ export function ManageRules({
   const { list: categories } = useCategories();
   const payees = usePayees();
   const accounts = useAccounts();
-  const state = {
-    payees,
-    accounts,
-    schedules,
-  };
   const filterData = useMemo(
     () => ({
-      ...state,
+      payees,
+      accounts,
+      schedules,
       categories,
     }),
-    [state, categories],
+    [payees, accounts, schedules, categories],
   );
 
   const filteredRules = useMemo(
diff --git a/packages/desktop-client/src/components/Notes.tsx b/packages/desktop-client/src/components/Notes.tsx
index 06dd4c5ff31..332b2c68064 100644
--- a/packages/desktop-client/src/components/Notes.tsx
+++ b/packages/desktop-client/src/components/Notes.tsx
@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, type CSSProperties } from 'react';
 import ReactMarkdown from 'react-markdown';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import remarkGfm from 'remark-gfm';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { type CSSProperties, theme } from '../style';
+import { theme } from '../style';
 import { remarkBreaks, sequentialNewlinesPlugin } from '../util/markdown';
 
 import { Text } from './common/Text';
@@ -110,7 +110,7 @@ export function Notes({
   return editable ? (
     <textarea
       ref={textAreaRef}
-      className={`${css({
+      className={css({
         border: '1px solid ' + theme.buttonNormalBorder,
         padding: 7,
         ...(!isNarrowWidth && { minWidth: 350, minHeight: 120 }),
@@ -118,14 +118,14 @@ export function Notes({
         backgroundColor: theme.tableBackground,
         color: theme.tableText,
         ...getStyle?.(editable),
-      })}`}
+      })}
       value={notes || ''}
       onChange={e => onChange?.(e.target.value)}
       onBlur={e => onBlur?.(e.target.value)}
       placeholder="Notes (markdown supported)"
     />
   ) : (
-    <Text {...markdownStyles} style={{ ...getStyle?.(editable) }}>
+    <Text className={css([markdownStyles, getStyle?.(editable)])}>
       <ReactMarkdown remarkPlugins={remarkPlugins} linkTarget="_blank">
         {notes}
       </ReactMarkdown>
diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index de5c928d7ac..966fe0395f3 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -1,10 +1,16 @@
-import React, { useEffect, useRef, useState, type ComponentProps } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+} from 'react';
 
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import { useNotes } from '../hooks/useNotes';
 import { SvgCustomNotesPaper } from '../icons/v2';
-import { type CSSProperties, theme } from '../style';
+import { theme } from '../style';
 
 import { Button } from './common/Button2';
 import { Popover } from './common/Popover';
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index 6e65af40eca..12d6e0afb23 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -4,10 +4,11 @@ import React, {
   useEffect,
   useMemo,
   type SetStateAction,
+  type CSSProperties,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { removeNotification } from 'loot-core/client/actions';
 import { type State } from 'loot-core/src/client/state-types';
@@ -16,7 +17,7 @@ import type { NotificationWithId } from 'loot-core/src/client/state-types/notifi
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete } from '../icons/v0';
 import { useResponsive } from '../ResponsiveProvider';
-import { styles, theme, type CSSProperties } from '../style';
+import { styles, theme } from '../style';
 
 import { Button, ButtonWithLoading } from './common/Button2';
 import { Link } from './common/Link';
@@ -202,29 +203,27 @@ function Notification({
                 onRemove();
                 setLoading(false);
               }}
-              className={String(
-                css({
-                  backgroundColor: 'transparent',
-                  border: `1px solid ${
-                    positive
-                      ? theme.noticeBorder
-                      : error
-                        ? theme.errorBorder
-                        : theme.warningBorder
-                  }`,
-                  color: 'currentColor',
-                  ...styles.mediumText,
-                  flexShrink: 0,
-                  '&[data-hovered], &[data-pressed]': {
-                    backgroundColor: positive
-                      ? theme.noticeBackground
-                      : error
-                        ? theme.errorBackground
-                        : theme.warningBackground,
-                  },
-                  ...narrowStyle,
-                }),
-              )}
+              className={css({
+                backgroundColor: 'transparent',
+                border: `1px solid ${
+                  positive
+                    ? theme.noticeBorder
+                    : error
+                      ? theme.errorBorder
+                      : theme.warningBorder
+                }`,
+                color: 'currentColor',
+                ...styles.mediumText,
+                flexShrink: 0,
+                '&[data-hovered], &[data-pressed]': {
+                  backgroundColor: positive
+                    ? theme.noticeBackground
+                    : error
+                      ? theme.errorBackground
+                      : theme.warningBackground,
+                },
+                ...narrowStyle,
+              })}
             >
               {button.title}
             </ButtonWithLoading>
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
index d3c287ded0f..469221d065c 100644
--- a/packages/desktop-client/src/components/Page.tsx
+++ b/packages/desktop-client/src/components/Page.tsx
@@ -1,7 +1,7 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
 import { useResponsive } from '../ResponsiveProvider';
-import { theme, styles, type CSSProperties } from '../style';
+import { theme, styles } from '../style';
 
 import { Text } from './common/Text';
 import { View } from './common/View';
diff --git a/packages/desktop-client/src/components/PrivacyFilter.tsx b/packages/desktop-client/src/components/PrivacyFilter.tsx
index f8d83249145..6cae00556fe 100644
--- a/packages/desktop-client/src/components/PrivacyFilter.tsx
+++ b/packages/desktop-client/src/components/PrivacyFilter.tsx
@@ -5,7 +5,7 @@ import React, {
   type ReactNode,
 } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { usePrivacyMode } from '../hooks/usePrivacyMode';
 import { useResponsive } from '../ResponsiveProvider';
@@ -73,7 +73,7 @@ function PrivacyOverlay({ children, ...props }) {
 
   return (
     <View
-      className={`${css(
+      className={css(
         [
           {
             display: 'inline-flex',
@@ -96,23 +96,23 @@ function PrivacyOverlay({ children, ...props }) {
           },
         ],
         style,
-      )}`}
+      )}
       {...restProps}
     >
       <div
-        className={`${css([
+        className={css([
           {
             display: 'flex',
             flexGrow: 1,
           },
-        ])}`}
+        ])}
       >
         {children}
       </div>
 
       <div
         aria-hidden="true"
-        className={`${css({
+        className={css({
           flexDirection: 'column',
           fontFamily: 'Redacted Script',
           height: '100%',
@@ -121,7 +121,7 @@ function PrivacyOverlay({ children, ...props }) {
           pointerEvents: 'none',
           position: 'absolute',
           width: '100%',
-        })}`}
+        })}
       >
         {children}
       </div>
diff --git a/packages/desktop-client/src/components/ThemeSelector.tsx b/packages/desktop-client/src/components/ThemeSelector.tsx
index db8c6f2bbf3..91914230927 100644
--- a/packages/desktop-client/src/components/ThemeSelector.tsx
+++ b/packages/desktop-client/src/components/ThemeSelector.tsx
@@ -1,10 +1,10 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type CSSProperties } from 'react';
 
 import type { Theme } from 'loot-core/src/types/prefs';
 
 import { SvgMoonStars, SvgSun, SvgSystem } from '../icons/v2';
 import { useResponsive } from '../ResponsiveProvider';
-import { type CSSProperties, themeOptions, useTheme } from '../style';
+import { themeOptions, useTheme } from '../style';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index 4aff726f9df..51018f45420 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, type CSSProperties } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as Platform from 'loot-core/src/client/platform';
 import * as queries from 'loot-core/src/client/queries';
@@ -22,7 +22,7 @@ import {
   SvgViewShow,
 } from '../icons/v2';
 import { useResponsive } from '../ResponsiveProvider';
-import { theme, type CSSProperties, styles } from '../style';
+import { theme, styles } from '../style';
 
 import { AccountSyncCheck } from './accounts/AccountSyncCheck';
 import { AnimatedRefresh } from './AnimatedRefresh';
@@ -204,23 +204,21 @@ function SyncButton({ style, isMobile = false }: SyncButtonProps) {
     <Button
       variant="bare"
       aria-label="Sync"
-      className={String(
-        css({
-          ...(isMobile
-            ? {
-                ...style,
-                WebkitAppRegion: 'none',
-                ...mobileIconStyle,
-              }
-            : {
-                ...style,
-                WebkitAppRegion: 'none',
-                color: desktopColor,
-              }),
-          '&[data-hovered]': hoveredStyle,
-          '&[data-pressed]': activeStyle,
-        }),
-      )}
+      className={css({
+        ...(isMobile
+          ? {
+              ...style,
+              WebkitAppRegion: 'none',
+              ...mobileIconStyle,
+            }
+          : {
+              ...style,
+              WebkitAppRegion: 'none',
+              color: desktopColor,
+            }),
+        '&[data-hovered]': hoveredStyle,
+        '&[data-pressed]': activeStyle,
+      })}
       onPress={sync}
     >
       {isMobile ? (
diff --git a/packages/desktop-client/src/components/alerts.tsx b/packages/desktop-client/src/components/alerts.tsx
index 7cb177b8f78..ee04560d1ff 100644
--- a/packages/desktop-client/src/components/alerts.tsx
+++ b/packages/desktop-client/src/components/alerts.tsx
@@ -1,8 +1,12 @@
 // @ts-strict-ignore
-import React, { type ComponentType, type ReactNode } from 'react';
+import React, {
+  type ComponentType,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
 
 import { SvgExclamationOutline, SvgInformationOutline } from '../icons/v1';
-import { styles, theme, type CSSProperties } from '../style';
+import { styles, theme } from '../style';
 
 import { Text } from './common/Text';
 import { View } from './common/View';
diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
index 29fafa3f478..5d7b5a4e318 100644
--- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.tsx
@@ -4,16 +4,17 @@ import React, {
   type ComponentProps,
   type ComponentPropsWithoutRef,
   type ReactElement,
+  type CSSProperties,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css, cx } from '@emotion/css';
 
 import { type AccountEntity } from 'loot-core/src/types/models';
 
 import { useAccounts } from '../../hooks/useAccounts';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { TextOneLine } from '../common/TextOneLine';
 import { View } from '../common/View';
 
@@ -208,8 +209,9 @@ function AccountItem({
       // * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebCore/page/ios/ContentChangeObserver.cpp
       // * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L783
       role="button"
-      className={`${className} ${css([
-        {
+      className={cx(
+        className,
+        css({
           backgroundColor: highlighted
             ? theme.menuAutoCompleteBackgroundHover
             : 'transparent',
@@ -220,8 +222,8 @@ function AccountItem({
           paddingLeft: 20,
           borderRadius: embedded ? 4 : 0,
           ...narrowStyle,
-        },
-      ])}`}
+        }),
+      )}
       data-testid={`${item.name}-account-item`}
       data-highlighted={highlighted || undefined}
       {...props}
diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
index eeca5b07bcd..a39751c19eb 100644
--- a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -11,8 +11,8 @@ import React, {
   type ChangeEvent,
 } from 'react';
 
+import { css, cx } from '@emotion/css';
 import Downshift, { type StateChangeTypes } from 'downshift';
-import { css } from 'glamor';
 
 import { getNormalisedString } from 'loot-core/src/shared/normalisation';
 
@@ -178,14 +178,14 @@ function defaultRenderItems<T extends Item>(
             // * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L783
             role="button"
             key={name}
-            className={`${css({
+            className={css({
               padding: 5,
               cursor: 'default',
               backgroundColor:
                 highlightedIndex === index
                   ? theme.menuAutoCompleteBackgroundHover
-                  : null,
-            })}`}
+                  : undefined,
+            })}
           >
             {name}
           </div>
@@ -443,7 +443,10 @@ function SingleAutocomplete<T extends Item>({
         // Super annoying but it works best to return a div so we
         // can't use a View here, but we can fake it be using the
         // className
-        <div className={`view ${css({ display: 'flex' })}`} {...containerProps}>
+        <div
+          className={cx('view', css({ display: 'flex' }))}
+          {...containerProps}
+        >
           <View ref={triggerRef} style={{ flexShrink: 0 }}>
             {renderInput(
               getInputProps({
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
index ea5dc0d57b7..f223b6335ac 100644
--- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -7,11 +7,12 @@ import React, {
   type ComponentType,
   type ComponentPropsWithoutRef,
   type ReactElement,
+  type CSSProperties,
   useCallback,
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css, cx } from '@emotion/css';
 
 import { trackingBudget, envelopeBudget } from 'loot-core/client/queries';
 import { integerToCurrency } from 'loot-core/shared/util';
@@ -25,7 +26,7 @@ import { useCategories } from '../../hooks/useCategories';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
 import { SvgSplit } from '../../icons/v0';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { useEnvelopeSheetValue } from '../budget/envelope/EnvelopeBudgetComponents';
 import { makeAmountFullStyle } from '../budget/util';
 import { Text } from '../common/Text';
@@ -398,8 +399,9 @@ function CategoryItem({
       style={style}
       // See comment above.
       role="button"
-      className={`${className} ${css([
-        {
+      className={cx(
+        className,
+        css({
           backgroundColor: highlighted
             ? theme.menuAutoCompleteBackgroundHover
             : 'transparent',
@@ -410,8 +412,8 @@ function CategoryItem({
           paddingLeft: 20,
           borderRadius: embedded ? 4 : 0,
           ...narrowStyle,
-        },
-      ])}`}
+        }),
+      )}
       data-testid={`${item.name}-category-item`}
       data-highlighted={highlighted || undefined}
       {...props}
diff --git a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
index 2b0004faa5c..163772c100a 100644
--- a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
+++ b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
 import { useResponsive } from '../../ResponsiveProvider';
 import { styles, theme } from '../../style';
-import { type CSSProperties } from '../../style/types';
 
 type ItemHeaderProps = {
   title: string;
diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
index e567804f658..4490f083f9a 100644
--- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.tsx
@@ -9,11 +9,12 @@ import React, {
   type SVGProps,
   type ComponentPropsWithoutRef,
   type ReactElement,
+  type CSSProperties,
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
-import { css } from 'glamor';
+import { css, cx } from '@emotion/css';
 
 import { createPayee } from 'loot-core/src/client/actions/queries';
 import { getActivePayees } from 'loot-core/src/client/reducers/queries';
@@ -27,7 +28,7 @@ import { useAccounts } from '../../hooks/useAccounts';
 import { useCommonPayees, usePayees } from '../../hooks/usePayees';
 import { SvgAdd, SvgBookmark } from '../../icons/v1';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { Button } from '../common/Button';
 import { TextOneLine } from '../common/TextOneLine';
 import { View } from '../common/View';
@@ -605,8 +606,9 @@ function PayeeItem({
       // * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebCore/page/ios/ContentChangeObserver.cpp
       // * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L783
       role="button"
-      className={`${className} ${css([
-        {
+      className={cx(
+        className,
+        css({
           backgroundColor: highlighted
             ? theme.menuAutoCompleteBackgroundHover
             : 'transparent',
@@ -617,8 +619,8 @@ function PayeeItem({
           padding: 4,
           paddingLeft: paddingLeftOverFromIcon,
           ...narrowStyle,
-        },
-      ])}`}
+        }),
+      )}
       data-testid={`${item.name}-payee-item`}
       data-highlighted={highlighted || undefined}
       {...props}
diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
index b82be3ba842..9f04c1f1691 100644
--- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
+++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -2,16 +2,17 @@
 import React, {
   type ComponentType,
   type ComponentPropsWithoutRef,
+  type CSSProperties,
   useCallback,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgArrowThinRight } from '../../icons/v1';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { Tooltip } from '../common/Tooltip';
 import { View } from '../common/View';
 import { type Binding } from '../spreadsheet';
@@ -124,18 +125,16 @@ export function BalanceWithCarryover({
 
   const getDefaultClassName = useCallback(
     (balanceValue: number) =>
-      String(
-        css({
-          ...getBalanceAmountStyle(balanceValue),
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          textAlign: 'right',
-          ...(!isDisabled && {
-            cursor: 'pointer',
-          }),
-          ':hover': { textDecoration: 'underline' },
+      css({
+        ...getBalanceAmountStyle(balanceValue),
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        textAlign: 'right',
+        ...(!isDisabled && {
+          cursor: 'pointer',
         }),
-      ),
+        ':hover': { textDecoration: 'underline' },
+      }),
     [getBalanceAmountStyle, isDisabled],
   );
 
diff --git a/packages/desktop-client/src/components/budget/BudgetSummaries.tsx b/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
index 3315ab33655..a6b2e46570f 100644
--- a/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
+++ b/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { useSpring, animated } from 'react-spring';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { addMonths, subMonths } from 'loot-core/src/shared/months';
 
@@ -67,13 +67,13 @@ export function BudgetSummaries({ SummaryComponent }: BudgetSummariesProps) {
 
   return (
     <div
-      className={`${css([
+      className={css([
         { flex: 1, overflow: 'hidden' },
         months.length === 1 && {
           marginLeft: -4,
           marginRight: -4,
         },
-      ])}`}
+      ])}
       ref={containerRef}
     >
       <animated.div
diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
index 86f005dc5ba..b51f4f51993 100644
--- a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -1,7 +1,13 @@
-import React, { type ComponentProps, memo, useRef, useState } from 'react';
+import React, {
+  type ComponentProps,
+  type CSSProperties,
+  memo,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
@@ -10,7 +16,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
-import { styles, theme, type CSSProperties } from '../../../style';
+import { styles, theme } from '../../../style';
 import { Button } from '../../common/Button2';
 import { Popover } from '../../common/Popover';
 import { Text } from '../../common/Text';
@@ -366,13 +372,11 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             {props => (
               <CellValueText
                 {...props}
-                className={String(
-                  css({
-                    cursor: 'pointer',
-                    ':hover': { textDecoration: 'underline' },
-                    ...makeAmountGrey(props.value),
-                  }),
-                )}
+                className={css({
+                  cursor: 'pointer',
+                  ':hover': { textDecoration: 'underline' },
+                  ...makeAmountGrey(props.value),
+                })}
               />
             )}
           </EnvelopeCellValue>
@@ -476,12 +480,10 @@ export function IncomeCategoryMonth({
             {props => (
               <CellValueText
                 {...props}
-                className={String(
-                  css({
-                    cursor: 'pointer',
-                    ':hover': { textDecoration: 'underline' },
-                  }),
-                )}
+                className={css({
+                  cursor: 'pointer',
+                  ':hover': { textDecoration: 'underline' },
+                })}
               />
             )}
           </EnvelopeCellValue>
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx
index 71d118844b5..390542bcf41 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/BudgetSummary.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -103,7 +103,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
           </View>
 
           <div
-            className={`${css([
+            className={css([
               {
                 textAlign: 'center',
                 marginTop: 3,
@@ -112,7 +112,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
                 textDecorationSkip: 'ink',
               },
               currentMonth === month && { fontWeight: 'bold' },
-            ])}`}
+            ])}
           >
             {monthUtils.format(month, 'MMMM')}
           </div>
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
index bc4fa2000ae..e9a6ad3be96 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
@@ -1,8 +1,7 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type CSSProperties } from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
-import { type CSSProperties } from '../../../../style';
 import { Popover } from '../../../common/Popover';
 import { View } from '../../../common/View';
 import { CoverMenu } from '../CoverMenu';
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
index 04dafd37e45..37929d8c444 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
-import { theme, styles, type CSSProperties } from '../../../../style';
+import { theme, styles } from '../../../../style';
 import { Block } from '../../../common/Block';
 import { Tooltip } from '../../../common/Tooltip';
 import { View } from '../../../common/View';
@@ -72,7 +72,7 @@ export function ToBudgetAmount({
             <Block
               onClick={onClick}
               data-cellname={sheetName}
-              className={`${css([
+              className={css([
                 styles.veryLargeText,
                 {
                   fontWeight: 400,
@@ -88,7 +88,7 @@ export function ToBudgetAmount({
                   },
                 },
                 amountStyle,
-              ])}`}
+              ])}
             >
               {format(num, 'financial')}
             </Block>
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/TotalsList.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/TotalsList.tsx
index a72c7f3b124..357ef3200b5 100644
--- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/TotalsList.tsx
+++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/TotalsList.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
-import { styles, type CSSProperties } from '../../../../style';
+import { styles } from '../../../../style';
 import { AlignedText } from '../../../common/AlignedText';
 import { Block } from '../../../common/Block';
 import { Tooltip } from '../../../common/Tooltip';
diff --git a/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx b/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
index b9bb66eda33..d1381fcdc4d 100644
--- a/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/TrackingBudgetComponents.tsx
@@ -1,8 +1,14 @@
 // @ts-strict-ignore
-import React, { type ComponentProps, memo, useRef, useState } from 'react';
+import React, {
+  type ComponentProps,
+  type CSSProperties,
+  memo,
+  useRef,
+  useState,
+} from 'react';
 import { Trans } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { trackingBudget } from 'loot-core/src/client/queries';
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
@@ -11,7 +17,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
-import { styles, theme, type CSSProperties } from '../../../style';
+import { styles, theme } from '../../../style';
 import { Button } from '../../common/Button2';
 import { Popover } from '../../common/Popover';
 import { Text } from '../../common/Text';
@@ -367,15 +373,13 @@ export const CategoryMonth = memo(function CategoryMonth({
             {props => (
               <CellValueText
                 {...props}
-                className={String(
-                  css({
-                    cursor: 'pointer',
-                    ':hover': {
-                      textDecoration: 'underline',
-                    },
-                    ...makeAmountGrey(props.value),
-                  }),
-                )}
+                className={css({
+                  cursor: 'pointer',
+                  ':hover': {
+                    textDecoration: 'underline',
+                  },
+                  ...makeAmountGrey(props.value),
+                })}
               />
             )}
           </TrackingCellValue>
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx
index 54dea1fb215..64acf378f2c 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/BudgetSummary.tsx
@@ -2,7 +2,7 @@
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -108,15 +108,13 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
           </View>
 
           <div
-            className={`${css([
-              {
-                textAlign: 'center',
-                marginTop: 3,
-                fontSize: 18,
-                fontWeight: 500,
-                textDecorationSkip: 'ink',
-              },
-            ])}`}
+            className={css({
+              textAlign: 'center',
+              marginTop: 3,
+              fontSize: 18,
+              fontWeight: 500,
+              textDecorationSkip: 'ink',
+            })}
           >
             {monthUtils.format(month, 'MMMM')}
           </div>
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseTotal.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseTotal.tsx
index 9961e94ddb6..b891b987650 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseTotal.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/ExpenseTotal.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { trackingBudget } from 'loot-core/src/client/queries';
 
-import { type CSSProperties } from '../../../../style';
-
 import { BudgetTotal } from './BudgetTotal';
 import { ExpenseProgress } from './ExpenseProgress';
 
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeTotal.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeTotal.tsx
index 8aabbff2dd1..1cb82ab8752 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeTotal.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/IncomeTotal.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { trackingBudget } from 'loot-core/src/client/queries';
 
-import { type CSSProperties } from '../../../../style';
-
 import { BudgetTotal } from './BudgetTotal';
 import { IncomeProgress } from './IncomeProgress';
 
diff --git a/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx b/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx
index dfadfa9436a..3cb5ab658f6 100644
--- a/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx
+++ b/packages/desktop-client/src/components/budget/tracking/budgetsummary/Saved.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { trackingBudget } from 'loot-core/src/client/queries';
 
-import { theme, type CSSProperties, styles } from '../../../../style';
+import { theme, styles } from '../../../../style';
 import { AlignedText } from '../../../common/AlignedText';
 import { Text } from '../../../common/Text';
 import { Tooltip } from '../../../common/Tooltip';
@@ -74,16 +74,14 @@ export function Saved({ projected, style }: SavedProps) {
         }}
       >
         <View
-          className={`${css([
-            {
-              fontSize: 25,
-              color: projected
-                ? theme.warningText
-                : isNegative
-                  ? theme.errorTextDark
-                  : theme.upcomingText,
-            },
-          ])}`}
+          className={css({
+            fontSize: 25,
+            color: projected
+              ? theme.warningText
+              : isNegative
+                ? theme.errorTextDark
+                : theme.upcomingText,
+          })}
         >
           <PrivacyFilter>{format(saved, 'financial')}</PrivacyFilter>
         </View>
diff --git a/packages/desktop-client/src/components/budget/util.ts b/packages/desktop-client/src/components/budget/util.ts
index acea75fd39c..97a51a08ba2 100644
--- a/packages/desktop-client/src/components/budget/util.ts
+++ b/packages/desktop-client/src/components/budget/util.ts
@@ -1,4 +1,6 @@
 // @ts-strict-ignore
+import { type CSSProperties } from 'react';
+
 import { t } from 'i18next';
 
 import { type useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
@@ -11,7 +13,7 @@ import {
 } from 'loot-core/src/types/models';
 import { type SyncedPrefs } from 'loot-core/src/types/prefs';
 
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { type DropPosition } from '../sort';
 
 import { getValidMonthBounds } from './MonthsContext';
diff --git a/packages/desktop-client/src/components/common/AlignedText.tsx b/packages/desktop-client/src/components/common/AlignedText.tsx
index 79b055265d8..81952064155 100644
--- a/packages/desktop-client/src/components/common/AlignedText.tsx
+++ b/packages/desktop-client/src/components/common/AlignedText.tsx
@@ -1,6 +1,4 @@
-import { type ComponentProps, type ReactNode } from 'react';
-
-import { type CSSProperties } from '../../style';
+import { type ComponentProps, type ReactNode, type CSSProperties } from 'react';
 
 import { Block } from './Block';
 import { View } from './View';
diff --git a/packages/desktop-client/src/components/common/Block.tsx b/packages/desktop-client/src/components/common/Block.tsx
index 7be0dd3590b..021f4cad201 100644
--- a/packages/desktop-client/src/components/common/Block.tsx
+++ b/packages/desktop-client/src/components/common/Block.tsx
@@ -1,8 +1,6 @@
-import { type HTMLProps, type Ref } from 'react';
+import { type HTMLProps, type Ref, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
-
-import { type CSSProperties } from '../../style';
+import { css, cx } from '@emotion/css';
 
 type BlockProps = HTMLProps<HTMLDivElement> & {
   innerRef?: Ref<HTMLDivElement>;
@@ -12,10 +10,6 @@ type BlockProps = HTMLProps<HTMLDivElement> & {
 export function Block(props: BlockProps) {
   const { className = '', style, innerRef, ...restProps } = props;
   return (
-    <div
-      {...restProps}
-      ref={innerRef}
-      className={`${className} ${css(style)}`}
-    />
+    <div {...restProps} ref={innerRef} className={cx(className, css(style))} />
   );
 }
diff --git a/packages/desktop-client/src/components/common/Button.tsx b/packages/desktop-client/src/components/common/Button.tsx
index 0cb88a7a638..d0662efe6b4 100644
--- a/packages/desktop-client/src/components/common/Button.tsx
+++ b/packages/desktop-client/src/components/common/Button.tsx
@@ -1,9 +1,14 @@
-import React, { forwardRef, type ElementType, type HTMLProps } from 'react';
+import React, {
+  forwardRef,
+  type ElementType,
+  type HTMLProps,
+  type CSSProperties,
+} from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 
 import { View } from './View';
 
@@ -153,7 +158,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     };
 
     const Component = as;
-    const buttonStyle = {
+    const buttonStyle: CSSProperties = {
       alignItems: 'center',
       justifyContent: 'center',
       flexShrink: 0,
@@ -168,8 +173,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       transition: 'box-shadow .25s',
       WebkitAppRegion: 'no-drag',
       ...styles.smallText,
-      ':hover': !disabled && hoveredStyle,
-      ':active': !disabled && activeStyle,
+      ':hover': !disabled ? hoveredStyle : {},
+      ':active': !disabled ? activeStyle : {},
       ...(hover && hoveredStyle),
       ...(pressed && activeStyle),
       ...style,
@@ -179,8 +184,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <Component
         ref={ref}
         {...(typeof as === 'string'
-          ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (css(buttonStyle) as any)
+          ? { className: css(buttonStyle) }
           : { style: buttonStyle })}
         disabled={disabled}
         type={isSubmit ? 'submit' : 'button'}
diff --git a/packages/desktop-client/src/components/common/Button2.tsx b/packages/desktop-client/src/components/common/Button2.tsx
index 694429d573c..7fda685aec2 100644
--- a/packages/desktop-client/src/components/common/Button2.tsx
+++ b/packages/desktop-client/src/components/common/Button2.tsx
@@ -3,16 +3,14 @@ import React, {
   useMemo,
   type ComponentPropsWithoutRef,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
-import {
-  type ButtonRenderProps as ReactAriaButtonRenderProps,
-  Button as ReactAriaButton,
-} from 'react-aria-components';
+import { Button as ReactAriaButton } from 'react-aria-components';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 
 import { View } from './View';
 
diff --git a/packages/desktop-client/src/components/common/FormError.tsx b/packages/desktop-client/src/components/common/FormError.tsx
index 5828b503959..4b953cf7c9c 100644
--- a/packages/desktop-client/src/components/common/FormError.tsx
+++ b/packages/desktop-client/src/components/common/FormError.tsx
@@ -1,6 +1,4 @@
-import { type ReactNode } from 'react';
-
-import { type CSSProperties } from '../../style';
+import { type ReactNode, type CSSProperties } from 'react';
 
 import { View } from './View';
 
diff --git a/packages/desktop-client/src/components/common/InlineField.tsx b/packages/desktop-client/src/components/common/InlineField.tsx
index 9328f674fdf..b5a8b165fa2 100644
--- a/packages/desktop-client/src/components/common/InlineField.tsx
+++ b/packages/desktop-client/src/components/common/InlineField.tsx
@@ -1,8 +1,6 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
-
-import { type CSSProperties } from '../../style';
+import { css } from '@emotion/css';
 
 type InlineFieldProps = {
   label: ReactNode;
@@ -21,7 +19,7 @@ export function InlineField({
 }: InlineFieldProps) {
   return (
     <label
-      className={`${css(
+      className={css([
         {
           display: 'flex',
           flexDirection: 'row',
@@ -30,7 +28,7 @@ export function InlineField({
           width,
         },
         style,
-      )}`}
+      ])}
     >
       <div
         style={{
diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx
index 161b91d1e8b..12a611513c5 100644
--- a/packages/desktop-client/src/components/common/Input.tsx
+++ b/packages/desktop-client/src/components/common/Input.tsx
@@ -2,14 +2,15 @@ import React, {
   type InputHTMLAttributes,
   type KeyboardEvent,
   type Ref,
+  type CSSProperties,
   useRef,
 } from 'react';
 
-import { css } from 'glamor';
+import { css, cx } from '@emotion/css';
 
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { useProperFocus } from '../../hooks/useProperFocus';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 
 export const defaultInputStyle = {
   outline: 0,
@@ -50,21 +51,24 @@ export function Input({
   return (
     <input
       ref={mergedRef}
-      className={`${css(
-        defaultInputStyle,
-        {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          flexShrink: 0,
-          ':focus': {
-            border: '1px solid ' + theme.formInputBorderSelected,
-            boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
+      className={cx(
+        css(
+          defaultInputStyle,
+          {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            flexShrink: 0,
+            ':focus': {
+              border: '1px solid ' + theme.formInputBorderSelected,
+              boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
+            },
+            '::placeholder': { color: theme.formInputTextPlaceholder },
           },
-          '::placeholder': { color: theme.formInputTextPlaceholder },
-        },
-        styles.smallText,
-        style,
-      )} ${className}`}
+          styles.smallText,
+          style,
+        ),
+        className,
+      )}
       {...nativeProps}
       onKeyDown={e => {
         nativeProps.onKeyDown?.(e);
diff --git a/packages/desktop-client/src/components/common/InputWithContent.tsx b/packages/desktop-client/src/components/common/InputWithContent.tsx
index d7cb8b93a96..94b9bc87f3d 100644
--- a/packages/desktop-client/src/components/common/InputWithContent.tsx
+++ b/packages/desktop-client/src/components/common/InputWithContent.tsx
@@ -1,6 +1,11 @@
-import { useState, type ComponentProps, type ReactNode } from 'react';
+import {
+  useState,
+  type ComponentProps,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 
 import { Input, defaultInputStyle } from './Input';
 import { View } from './View';
diff --git a/packages/desktop-client/src/components/common/Label.tsx b/packages/desktop-client/src/components/common/Label.tsx
index eed751274ef..aa39da93972 100644
--- a/packages/desktop-client/src/components/common/Label.tsx
+++ b/packages/desktop-client/src/components/common/Label.tsx
@@ -1,6 +1,6 @@
-import { forwardRef, type ReactNode } from 'react';
+import { forwardRef, type ReactNode, type CSSProperties } from 'react';
 
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 
 import { Text } from './Text';
 
diff --git a/packages/desktop-client/src/components/common/Link.tsx b/packages/desktop-client/src/components/common/Link.tsx
index fe92ea84470..5ecd098cb75 100644
--- a/packages/desktop-client/src/components/common/Link.tsx
+++ b/packages/desktop-client/src/components/common/Link.tsx
@@ -2,15 +2,16 @@ import React, {
   type MouseEventHandler,
   type ComponentProps,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
 import { NavLink, useMatch } from 'react-router-dom';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { type CustomReportEntity } from 'loot-core/types/models/reports';
 
 import { useNavigate } from '../../hooks/useNavigate';
-import { type CSSProperties, styles } from '../../style';
+import { styles } from '../../style';
 import { theme } from '../../style/theme';
 
 import { Button } from './Button2';
@@ -128,11 +129,7 @@ const InternalLink = ({
     <NavLink
       to={path}
       state={report ? { report } : {}}
-      className={`${css([
-        styles.smallText,
-        style,
-        match ? activeStyle : null,
-      ])}`}
+      className={css([styles.smallText, style, match ? activeStyle : null])}
     >
       {children}
     </NavLink>
diff --git a/packages/desktop-client/src/components/common/Menu.tsx b/packages/desktop-client/src/components/common/Menu.tsx
index d6fe0d8315b..85d511191a4 100644
--- a/packages/desktop-client/src/components/common/Menu.tsx
+++ b/packages/desktop-client/src/components/common/Menu.tsx
@@ -5,9 +5,10 @@ import {
   useState,
   type ComponentType,
   type SVGProps,
+  type CSSProperties,
 } from 'react';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 
 import { Text } from './Text';
 import { Toggle } from './Toggle';
diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
index 02f90e8e08c..5ca2b8c4c70 100644
--- a/packages/desktop-client/src/components/common/Modal.tsx
+++ b/packages/desktop-client/src/components/common/Modal.tsx
@@ -6,6 +6,7 @@ import React, {
   type ReactNode,
   type ComponentPropsWithoutRef,
   type ComponentPropsWithRef,
+  type CSSProperties,
 } from 'react';
 import {
   ModalOverlay as ReactAriaModalOverlay,
@@ -14,14 +15,14 @@ import {
 } from 'react-aria-components';
 import { useHotkeysContext } from 'react-hotkeys-hook';
 
+import { css } from '@emotion/css';
 import { AutoTextSize } from 'auto-text-size';
-import { css } from 'glamor';
 
 import { useModalState } from '../../hooks/useModalState';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
 import { SvgLogo } from '../../icons/logo';
 import { SvgDelete } from '../../icons/v0';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { tokens } from '../../tokens';
 
 import { Button } from './Button2';
@@ -90,7 +91,7 @@ export const Modal = ({
         {modalProps => (
           <Dialog
             aria-label="Modal dialog"
-            className={`${css(styles.lightScrollbar)}`}
+            className={css(styles.lightScrollbar)}
             style={{
               outline: 'none', // remove focus outline
             }}
diff --git a/packages/desktop-client/src/components/common/Paragraph.tsx b/packages/desktop-client/src/components/common/Paragraph.tsx
index 256982e8041..ad736f8bd62 100644
--- a/packages/desktop-client/src/components/common/Paragraph.tsx
+++ b/packages/desktop-client/src/components/common/Paragraph.tsx
@@ -1,8 +1,6 @@
-import { type HTMLProps } from 'react';
+import { type HTMLProps, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
-
-import { type CSSProperties } from '../../style';
+import { css } from '@emotion/css';
 
 type ParagraphProps = HTMLProps<HTMLDivElement> & {
   style?: CSSProperties;
@@ -18,9 +16,13 @@ export function Paragraph({
   return (
     <div
       {...props}
-      className={`${css(!isLast && { marginBottom: 15 }, style, {
-        lineHeight: '1.5em',
-      })}`}
+      className={css([
+        !isLast && { marginBottom: 15 },
+        style,
+        {
+          lineHeight: '1.5em',
+        },
+      ])}
     >
       {children}
     </div>
diff --git a/packages/desktop-client/src/components/common/Popover.tsx b/packages/desktop-client/src/components/common/Popover.tsx
index 6ac4382ee1e..dd2c61522bb 100644
--- a/packages/desktop-client/src/components/common/Popover.tsx
+++ b/packages/desktop-client/src/components/common/Popover.tsx
@@ -1,7 +1,7 @@
 import { type ComponentProps } from 'react';
 import { Popover as ReactAriaPopover } from 'react-aria-components';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { styles } from '../../style';
 
@@ -16,12 +16,12 @@ export const Popover = ({
     <ReactAriaPopover
       placement="bottom end"
       offset={1}
-      className={`${css({
+      className={css({
         ...styles.tooltip,
         ...styles.lightScrollbar,
         padding: 0,
         ...style,
-      })}`}
+      })}
       shouldCloseOnInteractOutside={element => {
         if (shouldCloseOnInteractOutside) {
           return shouldCloseOnInteractOutside(element);
diff --git a/packages/desktop-client/src/components/common/Search.tsx b/packages/desktop-client/src/components/common/Search.tsx
index 38b99c20e31..dd154c80bd8 100644
--- a/packages/desktop-client/src/components/common/Search.tsx
+++ b/packages/desktop-client/src/components/common/Search.tsx
@@ -74,7 +74,7 @@ export function Search({
           transition: 'color .25s',
         },
         ':focus': isInModal
-          ? null
+          ? {}
           : {
               '::placeholder': {
                 color: theme.formInputTextPlaceholderSelected,
diff --git a/packages/desktop-client/src/components/common/Select.tsx b/packages/desktop-client/src/components/common/Select.tsx
index 0ecfde802e1..f30dd3b3199 100644
--- a/packages/desktop-client/src/components/common/Select.tsx
+++ b/packages/desktop-client/src/components/common/Select.tsx
@@ -1,9 +1,6 @@
-import { useRef, useState } from 'react';
-
-import { css } from 'glamor';
+import { useRef, useState, type CSSProperties } from 'react';
 
 import { SvgExpandArrow } from '../../icons/v0';
-import { type CSSProperties } from '../../style';
 
 import { Button } from './Button2';
 import { Menu } from './Menu';
@@ -29,6 +26,7 @@ type SelectProps<Value> = {
   disabledKeys?: Value[];
   style?: CSSProperties;
   popoverStyle?: CSSProperties;
+  className?: string;
 };
 
 /**
@@ -55,6 +53,7 @@ export function Select<const Value = string>({
   disabledKeys = [],
   style = {},
   popoverStyle = {},
+  className,
 }: SelectProps<Value>) {
   const targetOption = options
     .filter(isValueOption)
@@ -73,7 +72,8 @@ export function Select<const Value = string>({
         onPress={() => {
           setIsOpen(true);
         }}
-        className={String(css(style))}
+        style={style}
+        className={className}
       >
         <View
           style={{
diff --git a/packages/desktop-client/src/components/common/SpaceBetween.tsx b/packages/desktop-client/src/components/common/SpaceBetween.tsx
index 25e330082a1..582a4745d00 100644
--- a/packages/desktop-client/src/components/common/SpaceBetween.tsx
+++ b/packages/desktop-client/src/components/common/SpaceBetween.tsx
@@ -1,6 +1,4 @@
-import React, { type ReactNode } from 'react';
-
-import { type CSSProperties } from '../../style';
+import React, { type CSSProperties, type ReactNode } from 'react';
 
 import { View } from './View';
 
diff --git a/packages/desktop-client/src/components/common/Stack.tsx b/packages/desktop-client/src/components/common/Stack.tsx
index 17f348bc487..739216aaf04 100644
--- a/packages/desktop-client/src/components/common/Stack.tsx
+++ b/packages/desktop-client/src/components/common/Stack.tsx
@@ -6,10 +6,9 @@ import React, {
   cloneElement,
   forwardRef,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
 
-import { type CSSProperties } from '../../style';
-
 import { Text } from './Text';
 import { View } from './View';
 
diff --git a/packages/desktop-client/src/components/common/Text.tsx b/packages/desktop-client/src/components/common/Text.tsx
index 71d5be4c00e..82f487a88b6 100644
--- a/packages/desktop-client/src/components/common/Text.tsx
+++ b/packages/desktop-client/src/components/common/Text.tsx
@@ -3,11 +3,10 @@ import React, {
   type Ref,
   type ReactNode,
   forwardRef,
+  type CSSProperties,
 } from 'react';
 
-import { css } from 'glamor';
-
-import { type CSSProperties } from '../../style';
+import { css, cx } from '@emotion/css';
 
 type TextProps = HTMLProps<HTMLSpanElement> & {
   innerRef?: Ref<HTMLSpanElement>;
@@ -22,7 +21,7 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>((props, ref) => {
     <span
       {...restProps}
       ref={innerRef ?? ref}
-      className={`${className} ${css(style)}`}
+      className={cx(className, css(style))}
     />
   );
 });
diff --git a/packages/desktop-client/src/components/common/Toggle.tsx b/packages/desktop-client/src/components/common/Toggle.tsx
index 594c8d9086b..70a5dbdc56b 100644
--- a/packages/desktop-client/src/components/common/Toggle.tsx
+++ b/packages/desktop-client/src/components/common/Toggle.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 
 import { View } from './View';
 
@@ -30,11 +30,11 @@ export const Toggle = ({
         checked={isOn}
         disabled={isDisabled}
         onChange={e => onToggle?.(e.target.checked)}
-        className={`${css({
+        className={css({
           height: 0,
           width: 0,
           visibility: 'hidden',
-        })}`}
+        })}
         type="checkbox"
       />
       <label
@@ -61,27 +61,26 @@ export const Toggle = ({
         <span
           data-toggle
           data-on={isOn}
-          className={String(
-            css(
-              {
-                content: ' ',
-                position: 'absolute',
-                top: '2px',
-                left: '2px',
-                width: '12px',
-                height: '12px',
-                borderRadius: '100px',
-                transition: '0.2s',
-                boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)',
-                backgroundColor: isDisabled
-                  ? theme.checkboxToggleDisabled
-                  : '#fff',
-              },
-              isOn && {
-                left: 'calc(100% - 2px)',
-                transform: 'translateX(-100%)',
-              },
-            ),
+          className={css(
+            {
+              // eslint-disable-next-line rulesdir/typography
+              content: '" "',
+              position: 'absolute',
+              top: '2px',
+              left: '2px',
+              width: '12px',
+              height: '12px',
+              borderRadius: '100px',
+              transition: '0.2s',
+              boxShadow: '0 0 2px 0 rgba(10, 10, 10, 0.29)',
+              backgroundColor: isDisabled
+                ? theme.checkboxToggleDisabled
+                : '#fff',
+            },
+            isOn && {
+              left: 'calc(100% - 2px)',
+              transform: 'translateX(-100%)',
+            },
           )}
         />
       </label>
diff --git a/packages/desktop-client/src/components/common/View.tsx b/packages/desktop-client/src/components/common/View.tsx
index 9a35e53350a..b940ea26803 100644
--- a/packages/desktop-client/src/components/common/View.tsx
+++ b/packages/desktop-client/src/components/common/View.tsx
@@ -2,17 +2,15 @@ import React, {
   forwardRef,
   type HTMLProps,
   type Ref,
-  type StyleHTMLAttributes,
+  type CSSProperties,
 } from 'react';
 
-import { css } from 'glamor';
-
-import { type CSSProperties } from '../../style';
+import { css, cx } from '@emotion/css';
 
 type ViewProps = HTMLProps<HTMLDivElement> & {
   className?: string;
   style?: CSSProperties;
-  nativeStyle?: StyleHTMLAttributes<HTMLDivElement>;
+  nativeStyle?: CSSProperties;
   innerRef?: Ref<HTMLDivElement>;
 };
 
@@ -28,7 +26,7 @@ export const View = forwardRef<HTMLDivElement, ViewProps>((props, ref) => {
       {...restProps}
       ref={innerRef ?? ref}
       style={nativeStyle}
-      className={`view ${className} ${css(style)}`}
+      className={cx('view', className, css(style))}
     />
   );
 });
diff --git a/packages/desktop-client/src/components/filters/FilterExpression.tsx b/packages/desktop-client/src/components/filters/FilterExpression.tsx
index 4272d0679dc..19704668997 100644
--- a/packages/desktop-client/src/components/filters/FilterExpression.tsx
+++ b/packages/desktop-client/src/components/filters/FilterExpression.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
@@ -6,7 +6,7 @@ import { integerToCurrency } from 'loot-core/src/shared/util';
 import { type RuleConditionEntity } from 'loot-core/src/types/models';
 
 import { SvgDelete } from '../../icons/v0';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Popover } from '../common/Popover';
 import { Text } from '../common/Text';
diff --git a/packages/desktop-client/src/components/filters/OpButton.tsx b/packages/desktop-client/src/components/filters/OpButton.tsx
index 606149badc4..a1f3017e8ba 100644
--- a/packages/desktop-client/src/components/filters/OpButton.tsx
+++ b/packages/desktop-client/src/components/filters/OpButton.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { friendlyOp } from 'loot-core/src/shared/rules';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button2';
 
 type OpButtonProps = {
@@ -19,19 +19,17 @@ export function OpButton({ op, isSelected, style, onPress }: OpButtonProps) {
     <Button
       variant="bare"
       style={style}
-      className={String(
-        css({
-          backgroundColor: theme.pillBackground,
-          marginBottom: 5,
-          ...(isSelected && {
+      className={css({
+        backgroundColor: theme.pillBackground,
+        marginBottom: 5,
+        ...(isSelected && {
+          color: theme.buttonNormalSelectedText,
+          '&,:hover,:active': {
+            backgroundColor: theme.buttonNormalSelectedBackground,
             color: theme.buttonNormalSelectedText,
-            '&,:hover,:active': {
-              backgroundColor: theme.buttonNormalSelectedBackground,
-              color: theme.buttonNormalSelectedText,
-            },
-          }),
+          },
         }),
-      )}
+      })}
       onPress={onPress}
     >
       {friendlyOp(op)}
diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx
index 96a11633b7a..cebbd89a4a9 100644
--- a/packages/desktop-client/src/components/forms.tsx
+++ b/packages/desktop-client/src/components/forms.tsx
@@ -1,8 +1,12 @@
-import React, { type ReactNode, type ComponentProps } from 'react';
+import React, {
+  type ReactNode,
+  type ComponentProps,
+  type CSSProperties,
+} from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
-import { type CSSProperties, theme } from '../style';
+import { theme } from '../style';
 
 import { Text } from './common/Text';
 import { View } from './common/View';
@@ -73,65 +77,65 @@ export const Checkbox = (props: CheckboxProps) => {
     <input
       type="checkbox"
       {...props}
-      className={`${css(
-        [
-          {
-            position: 'relative',
-            margin: 0,
-            flexShrink: 0,
-            marginRight: 6,
-            width: 15,
-            height: 15,
-            appearance: 'none',
-            outline: 0,
-            border: '1px solid ' + theme.formInputBorder,
-            borderRadius: 4,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: theme.checkboxText,
-            backgroundColor: theme.tableBackground,
-            ':checked': {
-              border: '1px solid ' + theme.checkboxBorderSelected,
-              backgroundColor: theme.checkboxBackgroundSelected,
-              '::after': {
-                display: 'block',
-                background:
-                  theme.checkboxBackgroundSelected +
-                  // eslint-disable-next-line rulesdir/typography
-                  ' url(\'data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>\') 9px 9px',
-                width: 9,
-                height: 9,
-                content: ' ',
-              },
+      className={css([
+        {
+          position: 'relative',
+          margin: 0,
+          flexShrink: 0,
+          marginRight: 6,
+          width: 15,
+          height: 15,
+          appearance: 'none',
+          outline: 0,
+          border: '1px solid ' + theme.formInputBorder,
+          borderRadius: 4,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: theme.checkboxText,
+          backgroundColor: theme.tableBackground,
+          ':checked': {
+            border: '1px solid ' + theme.checkboxBorderSelected,
+            backgroundColor: theme.checkboxBackgroundSelected,
+            '::after': {
+              display: 'block',
+              background:
+                theme.checkboxBackgroundSelected +
+                // eslint-disable-next-line rulesdir/typography
+                ' url(\'data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>\') 9px 9px',
+              width: 9,
+              height: 9,
+              // eslint-disable-next-line rulesdir/typography
+              content: '" "',
             },
-            ':disabled': {
-              border: '1px solid ' + theme.buttonNormalDisabledBorder,
-              backgroundColor: theme.buttonNormalDisabledBorder,
-            },
-            ':checked:disabled': {
-              border: '1px solid ' + theme.buttonNormalDisabledBorder,
+          },
+          ':disabled': {
+            border: '1px solid ' + theme.buttonNormalDisabledBorder,
+            backgroundColor: theme.buttonNormalDisabledBorder,
+          },
+          ':checked:disabled': {
+            border: '1px solid ' + theme.buttonNormalDisabledBorder,
+            backgroundColor: theme.buttonNormalDisabledBorder,
+            '::after': {
               backgroundColor: theme.buttonNormalDisabledBorder,
-              '::after': {
-                backgroundColor: theme.buttonNormalDisabledBorder,
-              },
             },
-            '&.focus-visible:focus': {
-              '::before': {
-                position: 'absolute',
-                top: -5,
-                bottom: -5,
-                left: -5,
-                right: -5,
-                border: '2px solid ' + theme.checkboxBorderSelected,
-                borderRadius: 6,
-                content: ' ',
-              },
+          },
+          '&.focus-visible:focus': {
+            '::before': {
+              position: 'absolute',
+              top: -5,
+              bottom: -5,
+              left: -5,
+              right: -5,
+              border: '2px solid ' + theme.checkboxBorderSelected,
+              borderRadius: 6,
+              // eslint-disable-next-line rulesdir/typography
+              content: '" "',
             },
           },
-        ],
+        },
         props.style,
-      )}`}
+      ])}
     />
   );
 };
diff --git a/packages/desktop-client/src/components/mobile/FloatingActionBar.tsx b/packages/desktop-client/src/components/mobile/FloatingActionBar.tsx
index 0f2cf928bb2..dbee0a6cb85 100644
--- a/packages/desktop-client/src/components/mobile/FloatingActionBar.tsx
+++ b/packages/desktop-client/src/components/mobile/FloatingActionBar.tsx
@@ -1,6 +1,6 @@
-import { type PropsWithChildren } from 'react';
+import { type PropsWithChildren, type CSSProperties } from 'react';
 
-import { theme, type CSSProperties } from '../../style';
+import { theme } from '../../style';
 import { View } from '../common/View';
 
 type FloatingActionBarProps = PropsWithChildren & {
diff --git a/packages/desktop-client/src/components/mobile/MobileForms.tsx b/packages/desktop-client/src/components/mobile/MobileForms.tsx
index 7307ebae558..6f3035a4c0a 100644
--- a/packages/desktop-client/src/components/mobile/MobileForms.tsx
+++ b/packages/desktop-client/src/components/mobile/MobileForms.tsx
@@ -3,11 +3,12 @@ import React, {
   type ComponentPropsWithRef,
   forwardRef,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
-import { theme, styles, type CSSProperties } from '../../style';
+import { theme, styles } from '../../style';
 import { Button } from '../common/Button';
 import { Input } from '../common/Input';
 import { Text } from '../common/Text';
diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
index 98a91445a06..01829cc3445 100644
--- a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
+++ b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
@@ -1,5 +1,9 @@
 // @ts-strict-ignore
-import React, { type ComponentType, useEffect } from 'react';
+import React, {
+  type ComponentType,
+  useEffect,
+  type CSSProperties,
+} from 'react';
 import { NavLink } from 'react-router-dom';
 import { useSpring, animated, config } from 'react-spring';
 
@@ -17,7 +21,7 @@ import {
 import { SvgReports } from '../../icons/v1/Reports';
 import { SvgCalendar } from '../../icons/v2';
 import { useResponsive } from '../../ResponsiveProvider';
-import { theme, styles, type CSSProperties } from '../../style';
+import { theme, styles } from '../../style';
 import { View } from '../common/View';
 import { useScroll } from '../ScrollProvider';
 
diff --git a/packages/desktop-client/src/components/mobile/PullToRefresh.tsx b/packages/desktop-client/src/components/mobile/PullToRefresh.tsx
index 7838d190c02..01ccd3d1ccc 100644
--- a/packages/desktop-client/src/components/mobile/PullToRefresh.tsx
+++ b/packages/desktop-client/src/components/mobile/PullToRefresh.tsx
@@ -1,7 +1,7 @@
 import React, { type ComponentProps } from 'react';
 import BasePullToRefresh from 'react-simple-pull-to-refresh';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 type PullToRefreshProps = ComponentProps<typeof BasePullToRefresh>;
 
@@ -11,16 +11,14 @@ export function PullToRefresh(props: PullToRefreshProps) {
       <BasePullToRefresh
         pullDownThreshold={80}
         resistance={2}
-        className={String(
-          css({
-            '& .ptr__pull-down': {
-              textAlign: 'center',
-            },
-            '& .ptr__children': {
-              overflow: 'hidden auto',
-            },
-          }),
-        )}
+        className={css({
+          '& .ptr__pull-down': {
+            textAlign: 'center',
+          },
+          '& .ptr__children': {
+            overflow: 'hidden auto',
+          },
+        })}
         {...props}
         // Force async because the library errors out when a sync onRefresh method is provided.
         onRefresh={async () => {
diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
index d57ca280309..577e6d5c23e 100644
--- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -1,8 +1,8 @@
 import React, { memo, useCallback, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { css } from '@emotion/css';
 import { AutoTextSize } from 'auto-text-size';
-import { css } from 'glamor';
 import memoizeOne from 'memoize-one';
 
 import { collapseModals, pushModal } from 'loot-core/client/actions';
@@ -801,15 +801,13 @@ const ExpenseGroupHeader = memo(function ExpenseGroupHeader({
       >
         <Button
           variant="bare"
-          className={String(
-            css({
-              flexShrink: 0,
-              color: theme.pageTextSubdued,
-              '&[data-pressed]': {
-                backgroundColor: 'transparent',
-              },
-            }),
-          )}
+          className={css({
+            flexShrink: 0,
+            color: theme.pageTextSubdued,
+            '&[data-pressed]': {
+              backgroundColor: 'transparent',
+            },
+          })}
           onPress={() => onToggleCollapse?.(group.id)}
         >
           <SvgExpandArrow
@@ -996,15 +994,13 @@ const IncomeGroupHeader = memo(function IncomeGroupHeader({
       >
         <Button
           variant="bare"
-          className={String(
-            css({
-              flexShrink: 0,
-              color: theme.pageTextSubdued,
-              '&[data-pressed]': {
-                backgroundColor: 'transparent',
-              },
-            }),
-          )}
+          className={css({
+            flexShrink: 0,
+            color: theme.pageTextSubdued,
+            '&[data-pressed]': {
+              backgroundColor: 'transparent',
+            },
+          })}
           onPress={() => onToggleCollapse?.(group.id)}
         >
           <SvgExpandArrow
diff --git a/packages/desktop-client/src/components/mobile/budget/ListItem.tsx b/packages/desktop-client/src/components/mobile/budget/ListItem.tsx
index 99c577dd2a2..f8c7c753335 100644
--- a/packages/desktop-client/src/components/mobile/budget/ListItem.tsx
+++ b/packages/desktop-client/src/components/mobile/budget/ListItem.tsx
@@ -1,6 +1,10 @@
-import React, { type ComponentProps, type ReactNode } from 'react';
+import React, {
+  type ComponentProps,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties, theme } from '../../../style';
+import { theme } from '../../../style';
 import { View } from '../../common/View';
 
 const ROW_HEIGHT = 50;
diff --git a/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx b/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
index d00d43b097e..d7c2564b8f2 100644
--- a/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
+++ b/packages/desktop-client/src/components/mobile/transactions/FocusableAmountInput.tsx
@@ -6,9 +6,10 @@ import React, {
   useEffect,
   useRef,
   useState,
+  type CSSProperties,
 } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import {
   amountToCurrency,
@@ -18,7 +19,7 @@ import {
 
 import { useMergedRefs } from '../../../hooks/useMergedRefs';
 import { useSyncedPref } from '../../../hooks/useSyncedPref';
-import { type CSSProperties, theme } from '../../../style';
+import { theme } from '../../../style';
 import { makeAmountFullStyle } from '../../budget/util';
 import { Button } from '../../common/Button2';
 import { Text } from '../../common/Text';
@@ -252,15 +253,13 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
           // Defines how far touch can start away from the button
           // hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }}
           {...buttonProps}
-          className={String(
-            css({
-              ...(buttonProps && buttonProps.style),
-              ...(focused && { display: 'none' }),
-              '&[data-pressed]': {
-                backgroundColor: 'transparent',
-              },
-            }),
-          )}
+          className={css({
+            ...(buttonProps && buttonProps.style),
+            ...(focused && { display: 'none' }),
+            '&[data-pressed]': {
+              backgroundColor: 'transparent',
+            },
+          })}
           variant="bare"
         >
           <View
diff --git a/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx b/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx
index 8822acbb935..adf1b617218 100644
--- a/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx
+++ b/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useListBoxSection } from 'react-aria';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { styles, theme } from '../../../style';
 
@@ -22,20 +22,23 @@ export function ListBoxSection({ section, state }) {
       {section.rendered && (
         <div
           {...headingProps}
-          className={`${css(styles.smallText, {
-            backgroundColor: theme.pageBackground,
-            borderBottom: `1px solid ${theme.tableBorder}`,
-            borderTop: `1px solid ${theme.tableBorder}`,
-            color: theme.tableHeaderText,
-            display: 'flex',
-            justifyContent: 'center',
-            paddingBottom: 4,
-            paddingTop: 4,
-            position: 'sticky',
-            top: '0',
-            width: '100%',
-            zIndex: zIndices.SECTION_HEADING,
-          })}`}
+          className={css([
+            styles.smallText,
+            {
+              backgroundColor: theme.pageBackground,
+              borderBottom: `1px solid ${theme.tableBorder}`,
+              borderTop: `1px solid ${theme.tableBorder}`,
+              color: theme.tableHeaderText,
+              display: 'flex',
+              justifyContent: 'center',
+              paddingBottom: 4,
+              paddingTop: 4,
+              position: 'sticky',
+              top: '0',
+              width: '100%',
+              zIndex: zIndices.SECTION_HEADING,
+            },
+          ])}
         >
           {section.rendered}
         </div>
diff --git a/packages/desktop-client/src/components/modals/AccountMenuModal.tsx b/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
index c65fea01f3b..b64d9637aee 100644
--- a/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/AccountMenuModal.tsx
@@ -1,4 +1,10 @@
-import { type ComponentProps, Fragment, useRef, useState } from 'react';
+import {
+  type ComponentProps,
+  type CSSProperties,
+  Fragment,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { type AccountEntity } from 'loot-core/types/models';
@@ -8,7 +14,7 @@ import { useAccounts } from '../../hooks/useAccounts';
 import { useNotes } from '../../hooks/useNotes';
 import { SvgClose, SvgDotsHorizontalTriple, SvgLockOpen } from '../../icons/v1';
 import { SvgNotesPaper } from '../../icons/v2';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import {
diff --git a/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx b/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
index 7deb37c988d..ad01f64d19f 100644
--- a/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/BudgetPageMenuModal.tsx
@@ -1,7 +1,10 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 
 import { useLocalPref } from '../../hooks/useLocalPref';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { Menu } from '../common/Menu';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
 
diff --git a/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
index abdcba1fd94..2b64dbe1c7f 100644
--- a/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/CategoryGroupMenuModal.tsx
@@ -1,5 +1,10 @@
 // @ts-strict-ignore
-import React, { type ComponentProps, useRef, useState } from 'react';
+import React, {
+  type ComponentProps,
+  useRef,
+  useState,
+  type CSSProperties,
+} from 'react';
 
 import { type CategoryGroupEntity } from 'loot-core/src/types/models';
 
@@ -7,7 +12,7 @@ import { useCategories } from '../../hooks/useCategories';
 import { useNotes } from '../../hooks/useNotes';
 import { SvgDotsHorizontalTriple, SvgAdd, SvgTrash } from '../../icons/v1';
 import { SvgNotesPaper, SvgViewHide, SvgViewShow } from '../../icons/v2';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import {
diff --git a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
index 721759fcade..10955013da3 100644
--- a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, type CSSProperties } from 'react';
 
 import { type CategoryEntity } from 'loot-core/src/types/models';
 
@@ -8,7 +8,7 @@ import { useCategoryGroup } from '../../hooks/useCategoryGroup';
 import { useNotes } from '../../hooks/useNotes';
 import { SvgDotsHorizontalTriple, SvgTrash } from '../../icons/v1';
 import { SvgNotesPaper, SvgViewHide, SvgViewShow } from '../../icons/v2';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import {
diff --git a/packages/desktop-client/src/components/modals/CloseAccountModal.tsx b/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
index 0a9966d59d7..49ed47a3344 100644
--- a/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
+++ b/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { type FormEvent, useState } from 'react';
+import React, { type FormEvent, useState, type CSSProperties } from 'react';
 import { Form } from 'react-aria-components';
 import { useDispatch } from 'react-redux';
 
@@ -14,7 +14,7 @@ import { type AccountEntity } from 'loot-core/src/types/models';
 import { useAccounts } from '../../hooks/useAccounts';
 import { useCategories } from '../../hooks/useCategories';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete';
 import { CategoryAutocomplete } from '../autocomplete/CategoryAutocomplete';
 import { Button } from '../common/Button2';
diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx b/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
index 3a353c51c92..67814dafc6d 100644
--- a/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
+++ b/packages/desktop-client/src/components/modals/CreateEncryptionKeyModal.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Form } from 'react-aria-components';
 import { useDispatch } from 'react-redux';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { loadAllFiles, loadGlobalPrefs, sync } from 'loot-core/client/actions';
 import { send } from 'loot-core/src/platform/client/fetch';
@@ -98,10 +98,10 @@ export function CreateEncryptionKeyModal({
                 </Paragraph>
                 <Paragraph>
                   <ul
-                    className={`${css({
+                    className={css({
                       marginTop: 0,
                       '& li': { marginBottom: 8 },
-                    })}`}
+                    })}
                   >
                     <li>
                       <strong>Important:</strong> if you forget this password{' '}
diff --git a/packages/desktop-client/src/components/modals/EditRuleModal.jsx b/packages/desktop-client/src/components/modals/EditRuleModal.jsx
index 5e4442ba957..abd673d1304 100644
--- a/packages/desktop-client/src/components/modals/EditRuleModal.jsx
+++ b/packages/desktop-client/src/components/modals/EditRuleModal.jsx
@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { css } from '@emotion/css';
 import { v4 as uuid } from 'uuid';
 
 import {
@@ -97,10 +98,10 @@ export function FieldSelect({ fields, style, value, onChange }) {
         options={fields}
         value={value}
         onChange={onChange}
-        style={{
+        className={css({
           color: theme.pageTextPositive,
           '&[data-hovered]': { color: theme.pageTextPositive },
-        }}
+        })}
       />
     </View>
   );
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
index b0ac9c706d8..f81005d0a08 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx
@@ -1,9 +1,12 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 
 import { envelopeBudget } from 'loot-core/client/queries';
 
 import { useCategory } from '../../hooks/useCategory';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import {
   BalanceWithCarryover,
   CarryoverIndicator,
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
index 0b7e73bf8f2..0a3775f3fbc 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx
@@ -2,13 +2,14 @@ import React, {
   useState,
   type ComponentPropsWithoutRef,
   useEffect,
+  type CSSProperties,
 } from 'react';
 
 import { envelopeBudget } from 'loot-core/client/queries';
 import { amountToInteger, integerToAmount } from 'loot-core/shared/util';
 
 import { useCategory } from '../../hooks/useCategory';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { BudgetMenu } from '../budget/envelope/BudgetMenu';
 import { useEnvelopeSheetValue } from '../budget/envelope/EnvelopeBudgetComponents';
 import {
diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx
index 6f5774025a2..b68531b3862 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeBudgetMonthMenuModal.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -9,7 +9,7 @@ import { useNotes } from '../../hooks/useNotes';
 import { useUndo } from '../../hooks/useUndo';
 import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
 import { SvgNotesPaper } from '../../icons/v2';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { BudgetMonthMenu } from '../budget/envelope/budgetsummary/BudgetMonthMenu';
 import { Button } from '../common/Button2';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
@@ -119,15 +119,15 @@ export function EnvelopeBudgetMonthMenuModal({
               <View>
                 <Button
                   variant="bare"
-                  className={String(
-                    css({
-                      ...buttonStyle,
+                  className={css([
+                    buttonStyle,
+                    {
                       '&[data-pressed], &[data-hovered]': {
                         backgroundColor: 'transparent',
                         color: buttonStyle.color,
                       },
-                    }),
-                  )}
+                    },
+                  ])}
                   onPress={onShowMore}
                 >
                   {!showMore ? (
diff --git a/packages/desktop-client/src/components/modals/EnvelopeToBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeToBudgetMenuModal.tsx
index d56ab003a1b..3466db52d69 100644
--- a/packages/desktop-client/src/components/modals/EnvelopeToBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/EnvelopeToBudgetMenuModal.tsx
@@ -1,6 +1,9 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { ToBudgetMenu } from '../budget/envelope/budgetsummary/ToBudgetMenu';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
 
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/CheckboxOption.tsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/CheckboxOption.tsx
index b7c74901a2f..5af399a4396 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactionsModal/CheckboxOption.tsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal/CheckboxOption.tsx
@@ -1,6 +1,10 @@
-import React, { type ComponentProps, type ReactNode } from 'react';
+import React, {
+  type CSSProperties,
+  type ComponentProps,
+  type ReactNode,
+} from 'react';
 
-import { type CSSProperties, theme } from '../../../style';
+import { theme } from '../../../style';
 import { View } from '../../common/View';
 import { Checkbox } from '../../forms';
 
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.tsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.tsx
index 5e28d2a0871..6de27e5b767 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.tsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal/SelectField.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { type CSSProperties } from '../../../style';
 import { Select } from '../../common/Select';
 
 type SelectFieldProps = {
diff --git a/packages/desktop-client/src/components/modals/ImportTransactionsModal/Transaction.tsx b/packages/desktop-client/src/components/modals/ImportTransactionsModal/Transaction.tsx
index 14e456fc1a3..6808cf18ed2 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactionsModal/Transaction.tsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactionsModal/Transaction.tsx
@@ -145,7 +145,8 @@ export function Transaction({
                               ' url(\'data:image/svg+xml; utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" className="path" d="M23,11.5 L23,11.5 L23,11.5 C23,12.3284271 22.3284271,13 21.5,13 L1.5,13 L1.5,13 C0.671572875,13 1.01453063e-16,12.3284271 0,11.5 L0,11.5 L0,11.5 C-1.01453063e-16,10.6715729 0.671572875,10 1.5,10 L21.5,10 L21.5,10 C22.3284271,10 23,10.6715729 23,11.5 Z" /></svg>\') 9px 9px',
                             width: 9,
                             height: 9,
-                            content: ' ',
+                            // eslint-disable-next-line rulesdir/typography
+                            content: '" "',
                           },
                         },
                         ':checked': {
diff --git a/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx b/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx
index 4c51d495fdb..a7607bf93cc 100644
--- a/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx
+++ b/packages/desktop-client/src/components/modals/KeyboardShortcutModal.tsx
@@ -1,8 +1,8 @@
+import { type CSSProperties } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import * as Platform from 'loot-core/src/client/platform';
 
-import { type CSSProperties } from '../../style';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
diff --git a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
index 59f9dbefc45..b815c846124 100644
--- a/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ScheduledTransactionMenuModal.tsx
@@ -1,10 +1,14 @@
-import React, { useCallback, type ComponentPropsWithoutRef } from 'react';
+import React, {
+  useCallback,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 
 import { useSchedules } from 'loot-core/client/data-hooks/schedules';
 import { format } from 'loot-core/shared/months';
 import { type Query } from 'loot-core/shared/query';
 
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { Menu } from '../common/Menu';
 import {
   Modal,
diff --git a/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
index 3581c7900c9..7138384a2f3 100644
--- a/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/TrackingBalanceMenuModal.tsx
@@ -1,9 +1,12 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 
 import { trackingBudget } from 'loot-core/client/queries';
 
 import { useCategory } from '../../hooks/useCategory';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import {
   BalanceWithCarryover,
   CarryoverIndicator,
diff --git a/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx
index 7e51bf6fbe7..e7288e7597e 100644
--- a/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx
@@ -2,13 +2,14 @@ import React, {
   useState,
   type ComponentPropsWithoutRef,
   useEffect,
+  type CSSProperties,
 } from 'react';
 
 import { trackingBudget } from 'loot-core/client/queries';
 import { amountToInteger, integerToAmount } from 'loot-core/shared/util';
 
 import { useCategory } from '../../hooks/useCategory';
-import { type CSSProperties, theme, styles } from '../../style';
+import { theme, styles } from '../../style';
 import { BudgetMenu } from '../budget/tracking/BudgetMenu';
 import { useTrackingSheetValue } from '../budget/tracking/TrackingBudgetComponents';
 import {
diff --git a/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx
index a3025428edc..d86d6af90ca 100644
--- a/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/TrackingBudgetMonthMenuModal.tsx
@@ -1,7 +1,7 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -9,7 +9,7 @@ import { useNotes } from '../../hooks/useNotes';
 import { useUndo } from '../../hooks/useUndo';
 import { SvgCheveronDown, SvgCheveronUp } from '../../icons/v1';
 import { SvgNotesPaper } from '../../icons/v2';
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { BudgetMonthMenu } from '../budget/tracking/budgetsummary/BudgetMonthMenu';
 import { Button } from '../common/Button2';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
@@ -119,15 +119,15 @@ export function TrackingBudgetMonthMenuModal({
               <View>
                 <Button
                   variant="bare"
-                  className={String(
-                    css({
-                      ...buttonStyle,
+                  className={css([
+                    buttonStyle,
+                    {
                       '&[data-pressed], &[data-hovered]': {
                         backgroundColor: 'transparent',
                         color: buttonStyle.color,
                       },
-                    }),
-                  )}
+                    },
+                  ])}
                   onPress={onShowMore}
                 >
                   {!showMore ? (
diff --git a/packages/desktop-client/src/components/payees/PayeeTableRow.tsx b/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
index b716d04bc9d..4bdd60b1758 100644
--- a/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
+++ b/packages/desktop-client/src/components/payees/PayeeTableRow.tsx
@@ -1,12 +1,12 @@
 // @ts-strict-ignore
-import { memo } from 'react';
+import { memo, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { type PayeeEntity } from 'loot-core/src/types/models';
 
 import { useSelectedDispatch } from '../../hooks/useSelected';
 import { SvgArrowThinRight, SvgBookmark } from '../../icons/v1';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Text } from '../common/Text';
 import {
   Cell,
diff --git a/packages/desktop-client/src/components/reports/Change.tsx b/packages/desktop-client/src/components/reports/Change.tsx
index 8c4c429e7fd..90b6d3a7892 100644
--- a/packages/desktop-client/src/components/reports/Change.tsx
+++ b/packages/desktop-client/src/components/reports/Change.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
 import { integerToCurrency } from 'loot-core/src/shared/util';
 
 import { styles } from '../../style/styles';
 import { theme } from '../../style/theme';
-import { type CSSProperties } from '../../style/types';
 import { Block } from '../common/Block';
 
 export function Change({
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
index 527ed45acb4..e477e6e3491 100644
--- a/packages/desktop-client/src/components/reports/ChooseGraph.tsx
+++ b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -1,9 +1,8 @@
-import React, { type UIEvent, useRef } from 'react';
+import React, { type UIEvent, useRef, type CSSProperties } from 'react';
 
 import { type DataEntity } from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
-import { type CSSProperties } from '../../style';
 import { styles } from '../../style/styles';
 
 import { AreaGraph } from './graphs/AreaGraph';
diff --git a/packages/desktop-client/src/components/reports/Container.tsx b/packages/desktop-client/src/components/reports/Container.tsx
index e169cc28b22..3aa5fdfafc1 100644
--- a/packages/desktop-client/src/components/reports/Container.tsx
+++ b/packages/desktop-client/src/components/reports/Container.tsx
@@ -1,7 +1,6 @@
-import React, { useRef, type ReactNode } from 'react';
+import React, { useRef, type ReactNode, type CSSProperties } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { type CSSProperties } from '../../style';
 import { View } from '../common/View';
 
 type ContainerProps = {
diff --git a/packages/desktop-client/src/components/reports/GraphButton.tsx b/packages/desktop-client/src/components/reports/GraphButton.tsx
index 5b0120f63b6..dcb95e4d736 100644
--- a/packages/desktop-client/src/components/reports/GraphButton.tsx
+++ b/packages/desktop-client/src/components/reports/GraphButton.tsx
@@ -1,6 +1,6 @@
-import React, { type HTMLProps } from 'react';
+import React, { type HTMLProps, type CSSProperties } from 'react';
 
-import { type CSSProperties, styles, theme } from '../../style';
+import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Text } from '../common/Text';
 import { Tooltip } from '../common/Tooltip';
diff --git a/packages/desktop-client/src/components/reports/LegendItem.tsx b/packages/desktop-client/src/components/reports/LegendItem.tsx
index 8d17d9dfc64..534c1ae9bdf 100644
--- a/packages/desktop-client/src/components/reports/LegendItem.tsx
+++ b/packages/desktop-client/src/components/reports/LegendItem.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { type CSSProperties } from '../../style/types';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/reports/ModeButton.tsx b/packages/desktop-client/src/components/reports/ModeButton.tsx
index fc50a14a034..879ea780ee3 100644
--- a/packages/desktop-client/src/components/reports/ModeButton.tsx
+++ b/packages/desktop-client/src/components/reports/ModeButton.tsx
@@ -1,8 +1,8 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button2';
 
 type ModeButtonProps = {
@@ -21,22 +21,20 @@ export function ModeButton({
   return (
     <Button
       variant="bare"
-      className={String(
-        css({
-          padding: '5px 10px',
-          backgroundColor: theme.menuBackground,
-          fontSize: 'inherit',
-          ...style,
-          ...(selected && {
-            backgroundColor: theme.buttonPrimaryBackground,
-            color: theme.buttonPrimaryText,
-            ':hover': {
-              backgroundColor: theme.buttonPrimaryBackgroundHover,
-              color: theme.buttonPrimaryTextHover,
-            },
-          }),
+      className={css({
+        padding: '5px 10px',
+        backgroundColor: theme.menuBackground,
+        fontSize: 'inherit',
+        ...style,
+        ...(selected && {
+          backgroundColor: theme.buttonPrimaryBackground,
+          color: theme.buttonPrimaryText,
+          ':hover': {
+            backgroundColor: theme.buttonPrimaryBackgroundHover,
+            color: theme.buttonPrimaryTextHover,
+          },
         }),
-      )}
+      })}
       onPress={onSelect}
     >
       {children}
diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx
index 44f32746460..9954c118327 100644
--- a/packages/desktop-client/src/components/reports/ReportCard.tsx
+++ b/packages/desktop-client/src/components/reports/ReportCard.tsx
@@ -3,6 +3,7 @@ import React, {
   useState,
   type ComponentProps,
   type ReactNode,
+  type CSSProperties,
 } from 'react';
 
 import { type CustomReportEntity } from 'loot-core/src/types/models';
@@ -10,7 +11,7 @@ import { type CustomReportEntity } from 'loot-core/src/types/models';
 import { useIsInViewport } from '../../hooks/useIsInViewport';
 import { useNavigate } from '../../hooks/useNavigate';
 import { useResponsive } from '../../ResponsiveProvider';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Menu } from '../common/Menu';
 import { MenuButton } from '../common/MenuButton';
 import { Popover } from '../common/Popover';
diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
index b3f4bbcccdb..f97b9edaf30 100644
--- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   AreaChart,
   Area,
@@ -23,7 +23,7 @@ import {
 } from 'loot-core/src/types/models/reports';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 
@@ -57,7 +57,7 @@ const CustomTooltip = ({
   if (active && payload && payload.length) {
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -65,7 +65,7 @@ const CustomTooltip = ({
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
index 03519f0d0c8..5513dc44cbd 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   BarChart,
   Bar,
@@ -30,7 +30,7 @@ import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { type CSSProperties, theme } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { getCustomTick } from '../getCustomTick';
@@ -79,7 +79,7 @@ const CustomTooltip = ({
   if (active && payload && payload.length) {
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -87,7 +87,7 @@ const CustomTooltip = ({
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
index 7317272ad43..9984c2d80c3 100644
--- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   ComposedChart,
   Line,
@@ -16,7 +16,7 @@ import {
 
 import { amountToCurrencyNoDecimal } from 'loot-core/shared/util';
 
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { PrivacyFilter } from '../../PrivacyFilter';
 import { Container } from '../Container';
@@ -43,7 +43,7 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
   if (active && payload && payload.length) {
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -51,7 +51,7 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
index 188e4b054bf..fb569a64d0d 100644
--- a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { css } from '@emotion/css';
 import * as d from 'date-fns';
-import { css } from 'glamor';
 import {
   Bar,
   CartesianGrid,
@@ -22,7 +22,7 @@ import {
 } from 'loot-core/src/shared/util';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { type CSSProperties, theme } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { chartTheme } from '../chart-theme';
 import { Container } from '../Container';
@@ -45,14 +45,14 @@ function CustomTooltip({ active, payload, isConcise }: CustomTooltipProps) {
 
   return (
     <div
-      className={`${css({
+      className={css({
         pointerEvents: 'none',
         borderRadius: 2,
         boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
         backgroundColor: theme.menuBackground,
         color: theme.menuItemText,
         padding: 10,
-      })}`}
+      })}
     >
       <div>
         <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
index ebde9faf2b4..42d3dcb22bf 100644
--- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 
 import { PieChart, Pie, Cell, Sector, ResponsiveContainer } from 'recharts';
 
@@ -13,7 +13,7 @@ import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { PrivacyFilter } from '../../PrivacyFilter';
 import { Container } from '../Container';
 
diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
index 6a180611a1a..90e90617101 100644
--- a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   LineChart,
   Line,
@@ -27,7 +27,7 @@ import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { getCustomTick } from '../getCustomTick';
@@ -63,7 +63,7 @@ const CustomTooltip = ({
     let sumTotals = 0;
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -71,7 +71,7 @@ const CustomTooltip = ({
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
index 109a5f2d65d..d5a2507eb15 100644
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   AreaChart,
   Area,
@@ -16,7 +16,7 @@ import {
 import { amountToCurrencyNoDecimal } from 'loot-core/shared/util';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { numberFormatterTooltip } from '../numberFormatter';
@@ -94,7 +94,7 @@ export function NetWorthGraph({
     if (active && payload && payload.length) {
       return (
         <div
-          className={`${css(
+          className={css([
             {
               zIndex: 1000,
               pointerEvents: 'none',
@@ -105,7 +105,7 @@ export function NetWorthGraph({
               padding: 10,
             },
             style,
-          )}`}
+          ])}
         >
           <div>
             <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
index d648e7ee968..abe16c44488 100644
--- a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React, { type ComponentProps } from 'react';
+import React, { type ComponentProps, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   AreaChart,
   Area,
@@ -20,7 +20,7 @@ import {
 import { type SpendingEntity } from 'loot-core/src/types/models/reports';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { numberFormatterTooltip } from '../numberFormatter';
@@ -65,7 +65,7 @@ const CustomTooltip = ({
       : payload[0].payload.months[selection]?.cumulative * -1;
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -73,7 +73,7 @@ const CustomTooltip = ({
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
index 172d9280bf7..b69f66e1279 100644
--- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -1,8 +1,8 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 import {
   BarChart,
   Bar,
@@ -28,7 +28,7 @@ import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
-import { theme, type CSSProperties } from '../../../style';
+import { theme } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
 import { Container } from '../Container';
 import { getCustomTick } from '../getCustomTick';
@@ -67,7 +67,7 @@ const CustomTooltip = ({
     let sumTotals = 0;
     return (
       <div
-        className={`${css({
+        className={css({
           zIndex: 1000,
           pointerEvents: 'none',
           borderRadius: 2,
@@ -75,7 +75,7 @@ const CustomTooltip = ({
           backgroundColor: theme.menuBackground,
           color: theme.menuItemText,
           padding: 10,
-        })}`}
+        })}
       >
         <div>
           <div style={{ marginBottom: 10 }}>
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx
index 3b1b92c5c5f..94a5fd95a13 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/RenderTableRow.tsx
@@ -1,8 +1,7 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
 import { type GroupedEntity } from 'loot-core/src/types/models/reports';
 
-import { type CSSProperties } from '../../../../style';
 import { View } from '../../../common/View';
 
 import { type renderRowProps } from './ReportTable';
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
index 6db7986aa30..18be7311f1e 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx
@@ -4,6 +4,7 @@ import React, {
   useLayoutEffect,
   useRef,
   type UIEventHandler,
+  type CSSProperties,
 } from 'react';
 
 import {
@@ -13,7 +14,6 @@ import {
 } from 'loot-core/src/types/models/reports';
 import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 
-import { type CSSProperties } from '../../../../style';
 import { Block } from '../../../common/Block';
 import { View } from '../../../common/View';
 
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
index dd20f9f1151..0b7eb0790f2 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx
@@ -1,4 +1,8 @@
-import React, { type RefObject, type UIEventHandler } from 'react';
+import React, {
+  type RefObject,
+  type UIEventHandler,
+  type CSSProperties,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -7,7 +11,6 @@ import {
 } from 'loot-core/src/types/models/reports';
 
 import { theme } from '../../../../style';
-import { type CSSProperties } from '../../../../style/types';
 import { View } from '../../../common/View';
 import { Row, Cell } from '../../../table';
 import { ReportOptions } from '../../ReportOptions';
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
index e26b51367d5..8bf0974f591 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableList.tsx
@@ -1,11 +1,11 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactNode, type CSSProperties } from 'react';
 
 import {
   type GroupedEntity,
   type DataEntity,
 } from 'loot-core/src/types/models/reports';
 
-import { type CSSProperties, theme } from '../../../../style';
+import { theme } from '../../../../style';
 import { View } from '../../../common/View';
 import { Row } from '../../../table';
 
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
index 11a8dea359e..d4dc36ebe39 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx
@@ -1,4 +1,9 @@
-import React, { memo, type RefObject, type UIEventHandler } from 'react';
+import React, {
+  memo,
+  type RefObject,
+  type UIEventHandler,
+  type CSSProperties,
+} from 'react';
 
 import {
   amountToCurrency,
@@ -15,7 +20,7 @@ import { useAccounts } from '../../../../hooks/useAccounts';
 import { useCategories } from '../../../../hooks/useCategories';
 import { useNavigate } from '../../../../hooks/useNavigate';
 import { useResponsive } from '../../../../ResponsiveProvider';
-import { type CSSProperties, theme } from '../../../../style';
+import { theme } from '../../../../style';
 import { Text } from '../../../common/Text';
 import { View } from '../../../common/View';
 import { Row, Cell } from '../../../table';
diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
index 5db57ad5b87..0deb72b5933 100644
--- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx
@@ -3,6 +3,7 @@ import React, {
   useLayoutEffect,
   useState,
   type RefObject,
+  type CSSProperties,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -13,7 +14,6 @@ import {
 
 import { theme } from '../../../../style';
 import { styles } from '../../../../style/styles';
-import { type CSSProperties } from '../../../../style/types';
 import { View } from '../../../common/View';
 
 import { type renderTotalsProps } from './ReportTable';
diff --git a/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx b/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx
index 1ec90260e82..23bfbc73a94 100644
--- a/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx
+++ b/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx
@@ -3,7 +3,7 @@ import { TextArea } from 'react-aria-components';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 
-import { css } from 'glamor';
+import { css } from '@emotion/css';
 
 import { type MarkdownWidget } from 'loot-core/src/types/models';
 
@@ -131,7 +131,7 @@ export function MarkdownCard({
             }}
           />
         ) : (
-          <Text {...markdownStyles}>
+          <Text className={markdownStyles}>
             <ReactMarkdown linkTarget="_blank">{meta.content}</ReactMarkdown>
           </Text>
         )}
diff --git a/packages/desktop-client/src/components/rules/ActionExpression.tsx b/packages/desktop-client/src/components/rules/ActionExpression.tsx
index 07e8c76ee9e..6a3cd111005 100644
--- a/packages/desktop-client/src/components/rules/ActionExpression.tsx
+++ b/packages/desktop-client/src/components/rules/ActionExpression.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
 import {
   mapField,
@@ -14,7 +14,7 @@ import {
   type PrependNoteRuleActionEntity,
 } from 'loot-core/src/types/models';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/rules/ConditionExpression.tsx b/packages/desktop-client/src/components/rules/ConditionExpression.tsx
index 69b8eb22140..229868a338f 100644
--- a/packages/desktop-client/src/components/rules/ConditionExpression.tsx
+++ b/packages/desktop-client/src/components/rules/ConditionExpression.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
 import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/rules/SimpleTable.tsx b/packages/desktop-client/src/components/rules/SimpleTable.tsx
index d0889955337..1642d37aa94 100644
--- a/packages/desktop-client/src/components/rules/SimpleTable.tsx
+++ b/packages/desktop-client/src/components/rules/SimpleTable.tsx
@@ -1,7 +1,11 @@
 // @ts-strict-ignore
-import React, { type ReactNode, type UIEvent, useRef } from 'react';
+import React, {
+  type ReactNode,
+  type UIEvent,
+  useRef,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties } from '../../style';
 import { View } from '../common/View';
 
 type SimpleTableProps = {
diff --git a/packages/desktop-client/src/components/rules/Value.tsx b/packages/desktop-client/src/components/rules/Value.tsx
index 9e10fa10148..b60a87c6e85 100644
--- a/packages/desktop-client/src/components/rules/Value.tsx
+++ b/packages/desktop-client/src/components/rules/Value.tsx
@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { useState, type CSSProperties } from 'react';
 
 import { format as formatDate, parseISO } from 'date-fns';
 
@@ -11,7 +11,7 @@ import { useAccounts } from '../../hooks/useAccounts';
 import { useCategories } from '../../hooks/useCategories';
 import { useDateFormat } from '../../hooks/useDateFormat';
 import { usePayees } from '../../hooks/usePayees';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Link } from '../common/Link';
 import { Text } from '../common/Text';
 
diff --git a/packages/desktop-client/src/components/select/DateSelect.tsx b/packages/desktop-client/src/components/select/DateSelect.tsx
index 8a144625a27..5b3bebc727e 100644
--- a/packages/desktop-client/src/components/select/DateSelect.tsx
+++ b/packages/desktop-client/src/components/select/DateSelect.tsx
@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import React, {
+  type CSSProperties,
   forwardRef,
   useEffect,
   useImperativeHandle,
@@ -12,6 +13,7 @@ import React, {
   type MutableRefObject,
 } from 'react';
 
+import { css } from '@emotion/css';
 import { parse, parseISO, format, subDays, addDays, isValid } from 'date-fns';
 import Pikaday from 'pikaday';
 
@@ -34,7 +36,7 @@ import { View } from '../common/View';
 import DateSelectLeft from './DateSelect.left.png';
 import DateSelectRight from './DateSelect.right.png';
 
-const pickerStyles = {
+const pickerStyles: CSSProperties = {
   '& .pika-single.actual-date-picker': {
     color: theme.calendarText,
     background: theme.calendarBackground,
@@ -160,7 +162,12 @@ const DatePicker = forwardRef<DatePickerForwardedRef, DatePickerProps>(
       }
     }, [value, dateFormat]);
 
-    return <View style={{ ...pickerStyles, flex: 1 }} innerRef={mountPoint} />;
+    return (
+      <View
+        className={css([pickerStyles, { flex: 1 }])}
+        innerRef={mountPoint}
+      />
+    );
   },
 );
 
diff --git a/packages/desktop-client/src/components/settings/Format.tsx b/packages/desktop-client/src/components/settings/Format.tsx
index dda0ca35092..0ebe7f4cb7d 100644
--- a/packages/desktop-client/src/components/settings/Format.tsx
+++ b/packages/desktop-client/src/components/settings/Format.tsx
@@ -1,12 +1,14 @@
 // @ts-strict-ignore
 import React, { type ReactNode } from 'react';
 
+import { css } from '@emotion/css';
+
 import { numberFormats } from 'loot-core/src/shared/util';
 import { type SyncedPrefs } from 'loot-core/src/types/prefs';
 
 import { useDateFormat } from '../../hooks/useDateFormat';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { tokens } from '../../tokens';
 import { Select } from '../common/Select';
 import { Text } from '../common/Text';
@@ -64,11 +66,11 @@ export function FormatSettings() {
   const numberFormat = _numberFormat || 'comma-dot';
   const [hideFraction, setHideFractionPref] = useSyncedPref('hideFraction');
 
-  const selectButtonStyle: CSSProperties = {
-    ':hover': {
+  const selectButtonClassName = css({
+    '&[data-hovered]': {
       backgroundColor: theme.buttonNormalBackgroundHover,
     },
-  };
+  });
 
   return (
     <Setting
@@ -96,7 +98,7 @@ export function FormatSettings() {
                 f.value,
                 String(hideFraction) === 'true' ? f.labelNoFraction : f.label,
               ])}
-              style={selectButtonStyle}
+              className={selectButtonClassName}
             />
 
             <Text style={{ display: 'flex' }}>
@@ -116,7 +118,7 @@ export function FormatSettings() {
               value={dateFormat}
               onChange={format => setDateFormatPref(format)}
               options={dateFormats.map(f => [f.value, f.label])}
-              style={selectButtonStyle}
+              className={selectButtonClassName}
             />
           </Column>
 
@@ -125,7 +127,7 @@ export function FormatSettings() {
               value={firstDayOfWeekIdx}
               onChange={idx => setFirstDayOfWeekIdxPref(idx)}
               options={daysOfWeek.map(f => [f.value, f.label])}
-              style={selectButtonStyle}
+              className={selectButtonClassName}
             />
           </Column>
         </View>
diff --git a/packages/desktop-client/src/components/settings/Themes.tsx b/packages/desktop-client/src/components/settings/Themes.tsx
index 3eeebfb5380..84c80a67cae 100644
--- a/packages/desktop-client/src/components/settings/Themes.tsx
+++ b/packages/desktop-client/src/components/settings/Themes.tsx
@@ -1,5 +1,7 @@
 import React, { type ReactNode } from 'react';
 
+import { css } from '@emotion/css';
+
 import { type DarkTheme, type Theme } from 'loot-core/types/prefs';
 
 import {
@@ -62,11 +64,11 @@ export function ThemeSettings() {
               }}
               value={theme}
               options={themeOptions}
-              style={{
+              className={css({
                 '&[data-hovered]': {
                   backgroundColor: themeStyle.buttonNormalBackgroundHover,
                 },
-              }}
+              })}
             />
           </Column>
           {theme === 'auto' && (
@@ -77,11 +79,11 @@ export function ThemeSettings() {
                 }}
                 value={darkTheme}
                 options={darkThemeOptions}
-                style={{
+                className={css({
                   '&[data-hovered]': {
                     backgroundColor: themeStyle.buttonNormalBackgroundHover,
                   },
-                }}
+                })}
               />
             </Column>
           )}
diff --git a/packages/desktop-client/src/components/settings/UI.tsx b/packages/desktop-client/src/components/settings/UI.tsx
index ad835e43c43..95701598fb6 100644
--- a/packages/desktop-client/src/components/settings/UI.tsx
+++ b/packages/desktop-client/src/components/settings/UI.tsx
@@ -1,9 +1,9 @@
-import React, { useState, type ReactNode } from 'react';
+import React, { useState, type ReactNode, type CSSProperties } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { css, media } from 'glamor';
+import { css } from '@emotion/css';
 
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { tokens } from '../../tokens';
 import { Link } from '../common/Link';
 import { View } from '../common/View';
@@ -17,7 +17,7 @@ type SettingProps = {
 export const Setting = ({ primaryAction, style, children }: SettingProps) => {
   return (
     <View
-      className={`${css([
+      className={css([
         {
           backgroundColor: theme.pillBackground,
           alignSelf: 'flex-start',
@@ -28,7 +28,7 @@ export const Setting = ({ primaryAction, style, children }: SettingProps) => {
           width: '100%',
         },
         style,
-      ])}`}
+      ])}
     >
       <View
         style={{
@@ -61,9 +61,11 @@ export const AdvancedToggle = ({ children }: AdvancedToggleProps) => {
         marginBottom: 25,
         width: '100%',
       }}
-      className={`${media(`(min-width: ${tokens.breakpoint_small})`, {
-        width: 'auto',
-      })}`}
+      className={css({
+        [`@media (min-width: ${tokens.breakpoint_small})`]: {
+          width: 'auto',
+        },
+      })}
       innerRef={el => {
         if (el && location.hash === '#advanced') {
           el.scrollIntoView(true);
diff --git a/packages/desktop-client/src/components/settings/Upcoming.tsx b/packages/desktop-client/src/components/settings/Upcoming.tsx
index 17efc400ba6..9da78491351 100644
--- a/packages/desktop-client/src/components/settings/Upcoming.tsx
+++ b/packages/desktop-client/src/components/settings/Upcoming.tsx
@@ -2,13 +2,10 @@ import React, { useState } from 'react';
 import { Trans } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
-import { Column } from 'glamor/jsxstyle';
-
 import { type SyncedPrefs } from 'loot-core/types/prefs';
 
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
-import { type CSSProperties, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { InfoBubble } from '../common/InfoBubble';
 import { Select } from '../common/Select';
@@ -33,12 +30,6 @@ export function UpcomingLengthSettings() {
   );
   const upcomingLength = _upcomingLength || '7';
 
-  const selectButtonStyle: CSSProperties = {
-    ':hover': {
-      backgroundColor: theme.buttonNormalBackgroundHover,
-    },
-  };
-
   const enabled = useFeatureFlag('upcomingLengthAdjustment');
 
   const location = useLocation();
@@ -50,21 +41,16 @@ export function UpcomingLengthSettings() {
     <Setting
       primaryAction={
         <View style={{ flexDirection: 'row', gap: '1em' }}>
-          <Column>
-            <View
-              style={{ flexDirection: 'row', alignItems: 'center', gap: 20 }}
-            >
-              <View title="Upcoming Length">
-                <Select
-                  options={options.map(x => [x.value || '7', x.label])}
-                  value={upcomingLength}
-                  onChange={newValue => setUpcomingLength(newValue)}
-                  style={selectButtonStyle}
-                />
-              </View>
-              <InfoBubble label="Only the first instance of a recurring transaction will be shown." />
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 20 }}>
+            <View title="Upcoming Length">
+              <Select
+                options={options.map(x => [x.value || '7', x.label])}
+                value={upcomingLength}
+                onChange={newValue => setUpcomingLength(newValue)}
+              />
             </View>
-          </Column>
+            <InfoBubble label="Only the first instance of a recurring transaction will be shown." />
+          </View>
         </View>
       }
     >
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index 30a3baf9a2f..a2853315421 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/packages/desktop-client/src/components/settings/index.tsx
@@ -1,6 +1,6 @@
 import React, { type ReactNode, useEffect } from 'react';
 
-import { media } from 'glamor';
+import { css } from '@emotion/css';
 
 import { isElectron } from 'loot-core/shared/environment';
 import { listen } from 'loot-core/src/platform/client/fetch';
@@ -50,13 +50,15 @@ function About() {
           flexDirection: 'column',
           gap: 10,
         }}
-        className={`${media(`(min-width: ${tokens.breakpoint_small})`, {
-          display: 'grid',
-          gridTemplateRows: '1fr 1fr',
-          gridTemplateColumns: '50% 50%',
-          columnGap: '2em',
-          gridAutoFlow: 'column',
-        })}`}
+        className={css({
+          [`@media (min-width: ${tokens.breakpoint_small})`]: {
+            display: 'grid',
+            gridTemplateRows: '1fr 1fr',
+            gridTemplateColumns: '50% 50%',
+            columnGap: '2em',
+            gridAutoFlow: 'column',
+          },
+        })}
         data-vrt-mask
       >
         <Text>Client version: v{window.Actual?.ACTUAL_VERSION}</Text>
diff --git a/packages/desktop-client/src/components/sidebar/Account.tsx b/packages/desktop-client/src/components/sidebar/Account.tsx
index 96437fef47b..62985660a4f 100644
--- a/packages/desktop-client/src/components/sidebar/Account.tsx
+++ b/packages/desktop-client/src/components/sidebar/Account.tsx
@@ -1,13 +1,13 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { css, cx } from '@emotion/css';
 
 import * as Platform from 'loot-core/client/platform';
 import { type AccountEntity } from 'loot-core/src/types/models';
 
 import { useNotes } from '../../hooks/useNotes';
-import { styles, theme, type CSSProperties } from '../../style';
+import { styles, theme } from '../../style';
 import { AlignedText } from '../common/AlignedText';
 import { Link } from '../common/Link';
 import { Text } from '../common/Text';
@@ -131,20 +131,23 @@ export function Account<FieldName extends SheetFields<'account'>>({
               }}
             >
               <div
-                className={`dot ${css({
-                  marginRight: 3,
-                  width: 5,
-                  height: 5,
-                  borderRadius: 5,
-                  backgroundColor: pending
-                    ? theme.sidebarItemBackgroundPending
-                    : failed
-                      ? theme.sidebarItemBackgroundFailed
-                      : theme.sidebarItemBackgroundPositive,
-                  marginLeft: 2,
-                  transition: 'transform .3s',
-                  opacity: connected ? 1 : 0,
-                })}`}
+                className={cx(
+                  'dot',
+                  css({
+                    marginRight: 3,
+                    width: 5,
+                    height: 5,
+                    borderRadius: 5,
+                    backgroundColor: pending
+                      ? theme.sidebarItemBackgroundPending
+                      : failed
+                        ? theme.sidebarItemBackgroundFailed
+                        : theme.sidebarItemBackgroundPositive,
+                    marginLeft: 2,
+                    transition: 'transform .3s',
+                    opacity: connected ? 1 : 0,
+                  }),
+                )}
               />
             </View>
 
diff --git a/packages/desktop-client/src/components/sidebar/Item.tsx b/packages/desktop-client/src/components/sidebar/Item.tsx
index e75c3fa3595..85b2d11fb32 100644
--- a/packages/desktop-client/src/components/sidebar/Item.tsx
+++ b/packages/desktop-client/src/components/sidebar/Item.tsx
@@ -4,9 +4,10 @@ import React, {
   type MouseEventHandler,
   type ReactNode,
   type SVGProps,
+  type CSSProperties,
 } from 'react';
 
-import { styles, theme, type CSSProperties } from '../../style';
+import { styles, theme } from '../../style';
 import { Block } from '../common/Block';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/sidebar/ItemContent.tsx b/packages/desktop-client/src/components/sidebar/ItemContent.tsx
index 73ca838f5bb..c9cbd1fcc66 100644
--- a/packages/desktop-client/src/components/sidebar/ItemContent.tsx
+++ b/packages/desktop-client/src/components/sidebar/ItemContent.tsx
@@ -1,6 +1,9 @@
-import React, { type MouseEventHandler, type ReactNode } from 'react';
+import React, {
+  type MouseEventHandler,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties } from '../../style';
 import { Link } from '../common/Link';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx b/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx
index b83dcb3a96a..d7700372139 100644
--- a/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx
+++ b/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx
@@ -3,9 +3,10 @@ import React, {
   type ComponentType,
   type MouseEventHandler,
   type SVGProps,
+  type CSSProperties,
 } from 'react';
 
-import { theme, type CSSProperties } from '../../style';
+import { theme } from '../../style';
 import { Block } from '../common/Block';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/sidebar/Sidebar.tsx b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
index 0096ffe7c8b..a70840622d0 100644
--- a/packages/desktop-client/src/components/sidebar/Sidebar.tsx
+++ b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
@@ -1,7 +1,8 @@
-import React, { useRef, useState } from 'react';
+import React, { type CSSProperties, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
+import { css } from '@emotion/css';
 import { Resizable } from 're-resizable';
 
 import { closeBudget, replaceModal } from 'loot-core/src/client/actions';
@@ -94,7 +95,7 @@ export function Sidebar() {
     >
       <View
         innerRef={containerRef}
-        style={{
+        className={css({
           color: theme.sidebarItemText,
           height: '100%',
           backgroundColor: theme.sidebarBackground,
@@ -102,14 +103,14 @@ export function Sidebar() {
             opacity: isFloating ? 1 : 0,
             transition: 'opacity .25s, width .25s',
             width: hasWindowButtons || isFloating ? null : 0,
-          },
+          } as CSSProperties,
           '&:hover .float': {
             opacity: 1,
             width: hasWindowButtons ? null : 'auto',
-          },
+          } as CSSProperties,
           flex: 1,
           ...styles.darkScrollbar,
-        }}
+        })}
       >
         <View
           style={{
diff --git a/packages/desktop-client/src/components/sidebar/ToggleButton.tsx b/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
index e7fddb15913..53928b62b7c 100644
--- a/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
+++ b/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
@@ -1,9 +1,12 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { SvgPin } from '../../icons/v1';
 import { SvgArrowButtonLeft1 } from '../../icons/v2';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button2';
 import { View } from '../common/View';
 
diff --git a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
index 6274c89bb95..2171d99406c 100644
--- a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
+++ b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
@@ -1,7 +1,11 @@
 // @ts-strict-ignore
-import React, { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
 
-import { type CSSProperties, styles } from '../../style';
+import { styles } from '../../style';
 import { Text } from '../common/Text';
 import { PrivacyFilter } from '../PrivacyFilter';
 
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index b2ee1bb96e9..68ba75b353e 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -15,6 +15,7 @@ import React, {
   type ReactElement,
   type Ref,
   type MutableRefObject,
+  type CSSProperties,
 } from 'react';
 import { useStore } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -27,7 +28,7 @@ import { useSelectedItems } from '../hooks/useSelected';
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete, SvgExpandArrow } from '../icons/v0';
 import { SvgCheckmark } from '../icons/v1';
-import { type CSSProperties, styles, theme } from '../style';
+import { styles, theme } from '../style';
 
 import { Button } from './common/Button2';
 import { Input } from './common/Input';
@@ -1074,7 +1075,6 @@ export const Table = forwardRef(
             zIndex: editing || selected ? 101 : 'auto',
             transform: 'translateY(var(--pos))',
           }}
-          // @ts-expect-error not a recognised style attribute
           nativeStyle={{ '--pos': `${style.top - 1}px` }}
           data-focus-key={item.id}
         >
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
index 5dd3c6cbc8e..d9a7dd7099b 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx
@@ -13,12 +13,12 @@ import React, {
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useDispatch } from 'react-redux';
 
+import { css } from '@emotion/css';
 import {
   format as formatDate,
   parseISO,
   isValid as isDateValid,
 } from 'date-fns';
-import { css } from 'glamor';
 
 import { pushModal } from 'loot-core/client/actions';
 import { useCachedSchedules } from 'loot-core/src/client/data-hooks/schedules';
@@ -2538,20 +2538,18 @@ function notesTagFormatter(notes, onNotesTagClick) {
                 <Button
                   variant="bare"
                   key={i}
-                  className={String(
-                    css({
-                      display: 'inline-flex',
-                      padding: '3px 7px',
-                      borderRadius: 16,
-                      userSelect: 'none',
-                      backgroundColor: theme.noteTagBackground,
-                      color: theme.noteTagText,
-                      cursor: 'pointer',
-                      '&[data-hovered]': {
-                        backgroundColor: theme.noteTagBackgroundHover,
-                      },
-                    }),
-                  )}
+                  className={css({
+                    display: 'inline-flex',
+                    padding: '3px 7px',
+                    borderRadius: 16,
+                    userSelect: 'none',
+                    backgroundColor: theme.noteTagBackground,
+                    color: theme.noteTagText,
+                    cursor: 'pointer',
+                    '&[data-hovered]': {
+                      backgroundColor: theme.noteTagBackgroundHover,
+                    },
+                  })}
                   onPress={() => {
                     onNotesTagClick?.(validTag);
                   }}
diff --git a/packages/desktop-client/src/components/util/AmountInput.tsx b/packages/desktop-client/src/components/util/AmountInput.tsx
index 147b0066cb6..671be17d9bc 100644
--- a/packages/desktop-client/src/components/util/AmountInput.tsx
+++ b/packages/desktop-client/src/components/util/AmountInput.tsx
@@ -6,6 +6,7 @@ import React, {
   useEffect,
   type FocusEventHandler,
   type KeyboardEventHandler,
+  type CSSProperties,
 } from 'react';
 
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
@@ -14,7 +15,7 @@ import { amountToInteger, appendDecimals } from 'loot-core/src/shared/util';
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
 import { SvgAdd, SvgSubtract } from '../../icons/v1';
-import { type CSSProperties, theme } from '../../style';
+import { theme } from '../../style';
 import { Button } from '../common/Button2';
 import { InputWithContent } from '../common/InputWithContent';
 import { View } from '../common/View';
diff --git a/packages/desktop-client/src/components/util/PercentInput.tsx b/packages/desktop-client/src/components/util/PercentInput.tsx
index 88161884365..68368124e88 100644
--- a/packages/desktop-client/src/components/util/PercentInput.tsx
+++ b/packages/desktop-client/src/components/util/PercentInput.tsx
@@ -5,12 +5,12 @@ import React, {
   useEffect,
   type FocusEventHandler,
   type FocusEvent,
+  type CSSProperties,
 } from 'react';
 
 import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
 
 import { useMergedRefs } from '../../hooks/useMergedRefs';
-import { type CSSProperties } from '../../style';
 import { Input } from '../common/Input';
 import { useFormat } from '../spreadsheet/useFormat';
 
diff --git a/packages/desktop-client/src/icons/AnimatedLoading.tsx b/packages/desktop-client/src/icons/AnimatedLoading.tsx
index 82476f66ce6..e6272195cec 100644
--- a/packages/desktop-client/src/icons/AnimatedLoading.tsx
+++ b/packages/desktop-client/src/icons/AnimatedLoading.tsx
@@ -1,6 +1,6 @@
 import React, { type SVGProps } from 'react';
 
-import { css, keyframes } from 'glamor';
+import { css, keyframes } from '@emotion/css';
 
 import { SvgLoading } from './Loading';
 
@@ -12,13 +12,13 @@ const rotation = keyframes({
 export function AnimatedLoading(props: SVGProps<SVGSVGElement>) {
   return (
     <span
-      className={`${css({
+      className={css({
         animationName: rotation,
         animationDuration: '1.6s',
         animationTimingFunction: 'cubic-bezier(0.17, 0.67, 0.83, 0.67)',
         animationIterationCount: 'infinite',
         lineHeight: 0,
-      })}`}
+      })}
     >
       <SvgLoading {...props} />
     </span>
diff --git a/packages/desktop-client/src/style/index.ts b/packages/desktop-client/src/style/index.ts
index 92a78c4f1a5..fb5f2ea25bb 100644
--- a/packages/desktop-client/src/style/index.ts
+++ b/packages/desktop-client/src/style/index.ts
@@ -1,4 +1,3 @@
 export * as colors from './colors';
 export * from './styles';
 export * from './theme';
-export * from './types';
diff --git a/packages/desktop-client/src/style/styles.ts b/packages/desktop-client/src/style/styles.ts
index d90ae062f7f..ea137a344c5 100644
--- a/packages/desktop-client/src/style/styles.ts
+++ b/packages/desktop-client/src/style/styles.ts
@@ -1,12 +1,13 @@
 // @ts-strict-ignore
-import { keyframes } from 'glamor';
+import { type CSSProperties } from 'react';
+
+import { keyframes } from '@emotion/css';
 
 import * as Platform from 'loot-core/src/client/platform';
 
 import { tokens } from '../tokens';
 
 import { theme } from './theme';
-import { type CSSProperties } from './types';
 
 const MOBILE_MIN_HEIGHT = 40;
 
diff --git a/packages/desktop-client/src/style/types.ts b/packages/desktop-client/src/style/types.ts
deleted file mode 100644
index d1ae529d52f..00000000000
--- a/packages/desktop-client/src/style/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { type CSSProperties as ReactCSSProperties } from 'react';
-
-export type CSSProperties = ReactCSSProperties & {
-  [propertyName: string]: unknown;
-};
diff --git a/upcoming-release-notes/3471.md b/upcoming-release-notes/3471.md
new file mode 100644
index 00000000000..9446c98cf9d
--- /dev/null
+++ b/upcoming-release-notes/3471.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Replace glamor CSS-in-JS library with @emotion/css.
diff --git a/yarn.lock b/yarn.lock
index ece1f5423e5..215b01b80d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -59,6 +59,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@actual-app/web@workspace:packages/desktop-client"
   dependencies:
+    "@emotion/css": "npm:^11.13.4"
     "@fontsource/redacted-script": "npm:^5.0.21"
     "@juggle/resize-observer": "npm:^3.4.0"
     "@playwright/test": "npm:1.41.1"
@@ -89,7 +90,6 @@ __metadata:
     debounce: "npm:^1.2.1"
     downshift: "npm:7.6.2"
     focus-visible: "npm:^4.1.5"
-    glamor: "npm:^2.20.40"
     i18next: "npm:^23.11.5"
     i18next-parser: "npm:^9.0.0"
     i18next-resources-to-backend: "npm:^1.2.1"
@@ -162,13 +162,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2":
-  version: 7.24.2
-  resolution: "@babel/code-frame@npm:7.24.2"
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.24.2, @babel/code-frame@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/code-frame@npm:7.24.7"
   dependencies:
-    "@babel/highlight": "npm:^7.24.2"
+    "@babel/highlight": "npm:^7.24.7"
     picocolors: "npm:^1.0.0"
-  checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590
+  checksum: 10/4812e94885ba7e3213d49583a155fdffb05292330f0a9b2c41b49288da70cf3c746a3fda0bf1074041a6d741c33f8d7be24be5e96f41ef77395eeddc5c9ff624
   languageName: node
   linkType: hard
 
@@ -202,15 +202,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.24.5, @babel/generator@npm:^7.7.2":
-  version: 7.24.5
-  resolution: "@babel/generator@npm:7.24.5"
+"@babel/generator@npm:^7.24.5, @babel/generator@npm:^7.25.6, @babel/generator@npm:^7.7.2":
+  version: 7.25.6
+  resolution: "@babel/generator@npm:7.25.6"
   dependencies:
-    "@babel/types": "npm:^7.24.5"
+    "@babel/types": "npm:^7.25.6"
     "@jridgewell/gen-mapping": "npm:^0.3.5"
     "@jridgewell/trace-mapping": "npm:^0.3.25"
     jsesc: "npm:^2.5.1"
-  checksum: 10/7a3782f1d2f824025a538444a0fce44f5b30a7b013984279561bcb3450eec91a41526533fd0b25b1a6fde627bebd0e645c0ea2aa907cc15c7f3da2d9eb71f069
+  checksum: 10/541e4fbb6ea7806f44232d70f25bf09dee9a57fe43d559e375536870ca5261ebb4647fec3af40dcbb3325ea2a49aff040e12a4e6f88609eaa88f10c4e27e31f8
   languageName: node
   linkType: hard
 
@@ -327,12 +327,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.3":
-  version: 7.24.3
-  resolution: "@babel/helper-module-imports@npm:7.24.3"
+"@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.3":
+  version: 7.24.7
+  resolution: "@babel/helper-module-imports@npm:7.24.7"
   dependencies:
-    "@babel/types": "npm:^7.24.0"
-  checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499
+    "@babel/traverse": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/df8bfb2bb18413aa151ecd63b7d5deb0eec102f924f9de6bc08022ced7ed8ca7fed914562d2f6fa5b59b74a5d6e255dc35612b2bc3b8abf361e13f61b3704770
   languageName: node
   linkType: hard
 
@@ -420,17 +421,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-string-parser@npm:^7.24.1":
-  version: 7.24.1
-  resolution: "@babel/helper-string-parser@npm:7.24.1"
-  checksum: 10/04c0ede77b908b43e6124753b48bc485528112a9335f0a21a226bff1ace75bb6e64fab24c85cb4b1610ef3494dacd1cb807caeb6b79a7b36c43d48c289b35949
+"@babel/helper-string-parser@npm:^7.24.8":
+  version: 7.24.8
+  resolution: "@babel/helper-string-parser@npm:7.24.8"
+  checksum: 10/6d1bf8f27dd725ce02bdc6dffca3c95fb9ab8a06adc2edbd9c1c9d68500274230d1a609025833ed81981eff560045b6b38f7b4c6fb1ab19fc90e5004e3932535
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.22.20, @babel/helper-validator-identifier@npm:^7.24.5":
-  version: 7.24.5
-  resolution: "@babel/helper-validator-identifier@npm:7.24.5"
-  checksum: 10/38aaf6a64a0ea2e84766165b461deda3c24fd2173dff18419a2cc9e1ea1d3e709039aee94db29433a07011492717c80900a5eb564cdca7d137757c3c69e26898
+"@babel/helper-validator-identifier@npm:^7.22.20, @babel/helper-validator-identifier@npm:^7.24.5, @babel/helper-validator-identifier@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-validator-identifier@npm:7.24.7"
+  checksum: 10/86875063f57361471b531dbc2ea10bbf5406e12b06d249b03827d361db4cad2388c6f00936bcd9dc86479f7e2c69ea21412c2228d4b3672588b754b70a449d4b
   languageName: node
   linkType: hard
 
@@ -463,24 +464,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/highlight@npm:^7.24.2":
-  version: 7.24.5
-  resolution: "@babel/highlight@npm:7.24.5"
+"@babel/highlight@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/highlight@npm:7.24.7"
   dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.24.5"
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
     chalk: "npm:^2.4.2"
     js-tokens: "npm:^4.0.0"
     picocolors: "npm:^1.0.0"
-  checksum: 10/afde0403154ad69ecd58a98903058e776760444bf4d0363fb740a8596bc6278b72c5226637c4f6b3674d70acb1665207fe2fcecfe93a74f2f4ab033e89fd7e8c
+  checksum: 10/69b73f38cdd4f881b09b939a711e76646da34f4834f4ce141d7a49a6bb1926eab1c594148970a8aa9360398dff800f63aade4e81fafdd7c8d8a8489ea93bfec1
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.5":
-  version: 7.24.5
-  resolution: "@babel/parser@npm:7.24.5"
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.24.5, @babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.6":
+  version: 7.25.6
+  resolution: "@babel/parser@npm:7.25.6"
+  dependencies:
+    "@babel/types": "npm:^7.25.6"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10/f5ed1c5fd4b0045a364fb906f54fd30e2fff93a45069068b6d80d3ab2b64f5569c90fb41d39aff80fb7e925ca4d44917965a76776a3ca11924ec1fae3be5d1ea
+  checksum: 10/830aab72116aa14eb8d61bfa8f9d69fc8f3a43d909ce993cb4350ae14d3af1a2f740a54410a22d821c48a253263643dfecbc094f9608e6a70ce9ff3c0bbfe91a
   languageName: node
   linkType: hard
 
@@ -1451,52 +1454,49 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
-  version: 7.25.0
-  resolution: "@babel/runtime@npm:7.25.0"
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+  version: 7.25.6
+  resolution: "@babel/runtime@npm:7.25.6"
   dependencies:
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10/6870e9e0e9125075b3aeba49a266f442b10820bfc693019eb6c1785c5a0edbe927e98b8238662cdcdba17842107c040386c3b69f39a0a3b217f9d00ffe685b27
+  checksum: 10/0c4134734deb20e1005ffb9165bf342e1074576621b246d8e5e41cc7cb315a885b7d98950fbf5c63619a2990a56ae82f444d35fe8c4691a0b70c2fe5673667dc
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0, @babel/template@npm:^7.3.3":
-  version: 7.24.0
-  resolution: "@babel/template@npm:7.24.0"
+"@babel/template@npm:^7.22.15, @babel/template@npm:^7.24.0, @babel/template@npm:^7.25.0, @babel/template@npm:^7.3.3":
+  version: 7.25.0
+  resolution: "@babel/template@npm:7.25.0"
   dependencies:
-    "@babel/code-frame": "npm:^7.23.5"
-    "@babel/parser": "npm:^7.24.0"
-    "@babel/types": "npm:^7.24.0"
-  checksum: 10/8c538338c7de8fac8ada691a5a812bdcbd60bd4a4eb5adae2cc9ee19773e8fb1a724312a00af9e1ce49056ffd3c3475e7287b5668cf6360bfb3f8ac827a06ffe
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/parser": "npm:^7.25.0"
+    "@babel/types": "npm:^7.25.0"
+  checksum: 10/07ebecf6db8b28244b7397628e09c99e7a317b959b926d90455c7253c88df3677a5a32d1501d9749fe292a263ff51a4b6b5385bcabd5dadd3a48036f4d4949e0
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.24.5, @babel/traverse@npm:^7.7.2":
-  version: 7.24.5
-  resolution: "@babel/traverse@npm:7.24.5"
+"@babel/traverse@npm:^7.24.5, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.7.2":
+  version: 7.25.6
+  resolution: "@babel/traverse@npm:7.25.6"
   dependencies:
-    "@babel/code-frame": "npm:^7.24.2"
-    "@babel/generator": "npm:^7.24.5"
-    "@babel/helper-environment-visitor": "npm:^7.22.20"
-    "@babel/helper-function-name": "npm:^7.23.0"
-    "@babel/helper-hoist-variables": "npm:^7.22.5"
-    "@babel/helper-split-export-declaration": "npm:^7.24.5"
-    "@babel/parser": "npm:^7.24.5"
-    "@babel/types": "npm:^7.24.5"
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/generator": "npm:^7.25.6"
+    "@babel/parser": "npm:^7.25.6"
+    "@babel/template": "npm:^7.25.0"
+    "@babel/types": "npm:^7.25.6"
     debug: "npm:^4.3.1"
     globals: "npm:^11.1.0"
-  checksum: 10/e237de56e0c30795293fdb6f2cb09a75e6230836e3dc67dc4fa21781eb4d5842996bf3af95bc57ac5c7e6e97d06446f14732d0952eb57d5d9643de7c4f95bee6
+  checksum: 10/de75a918299bc27a44ec973e3f2fa8c7902bbd67bd5d39a0be656f3c1127f33ebc79c12696fbc8170a0b0e1072a966d4a2126578d7ea2e241b0aeb5d16edc738
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
-  version: 7.24.5
-  resolution: "@babel/types@npm:7.24.5"
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.24.7, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.6, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
+  version: 7.25.6
+  resolution: "@babel/types@npm:7.25.6"
   dependencies:
-    "@babel/helper-string-parser": "npm:^7.24.1"
-    "@babel/helper-validator-identifier": "npm:^7.24.5"
+    "@babel/helper-string-parser": "npm:^7.24.8"
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
     to-fast-properties: "npm:^2.0.0"
-  checksum: 10/259e7512476ae64830e73f2addf143159232bcbf0eba6a6a27cab25a960cd353a11c826eb54185fdf7d8d9865922cbcd6522149e9ec55b967131193f9c9111a1
+  checksum: 10/7b54665e1b51f525fe0f451efdd9fe7a4a6dfba3fd4956c3530bc77336b66ffe3d78c093796ed044119b5d213176af7cf326f317a2057c538d575c6cefcb3562
   languageName: node
   linkType: hard
 
@@ -1644,6 +1644,106 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/babel-plugin@npm:^11.12.0":
+  version: 11.12.0
+  resolution: "@emotion/babel-plugin@npm:11.12.0"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.16.7"
+    "@babel/runtime": "npm:^7.18.3"
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/serialize": "npm:^1.2.0"
+    babel-plugin-macros: "npm:^3.1.0"
+    convert-source-map: "npm:^1.5.0"
+    escape-string-regexp: "npm:^4.0.0"
+    find-root: "npm:^1.1.0"
+    source-map: "npm:^0.5.7"
+    stylis: "npm:4.2.0"
+  checksum: 10/fe6f4522ea2b61ef4214dd0b0f3778aad9c18434b47e50ae5091af226526bf305455c313065826a090682520c9462c151d4df62ec128f14671d3125afc05b148
+  languageName: node
+  linkType: hard
+
+"@emotion/cache@npm:^11.13.0":
+  version: 11.13.1
+  resolution: "@emotion/cache@npm:11.13.1"
+  dependencies:
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/sheet": "npm:^1.4.0"
+    "@emotion/utils": "npm:^1.4.0"
+    "@emotion/weak-memoize": "npm:^0.4.0"
+    stylis: "npm:4.2.0"
+  checksum: 10/090c8ad2e5b23f1b3a95e94f1f0554a40ed1dcd844c9d31629a68ff824eff40f32d1362f67aefa440ee0aabd5a8cabcc76870fd6d77144d3ff251bdcdf1420b9
+  languageName: node
+  linkType: hard
+
+"@emotion/css@npm:^11.13.4":
+  version: 11.13.4
+  resolution: "@emotion/css@npm:11.13.4"
+  dependencies:
+    "@emotion/babel-plugin": "npm:^11.12.0"
+    "@emotion/cache": "npm:^11.13.0"
+    "@emotion/serialize": "npm:^1.3.0"
+    "@emotion/sheet": "npm:^1.4.0"
+    "@emotion/utils": "npm:^1.4.0"
+  checksum: 10/57565a8bd9b712b0ade1c8b972bf2f84d2026e4372b3b035fb9d93a85a8f36ca7f2fbe67ecf32cc3fd03956587ece56ab89dd5bd43a76d3aed542a76841c76e5
+  languageName: node
+  linkType: hard
+
+"@emotion/hash@npm:^0.9.2":
+  version: 0.9.2
+  resolution: "@emotion/hash@npm:0.9.2"
+  checksum: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387
+  languageName: node
+  linkType: hard
+
+"@emotion/memoize@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@emotion/memoize@npm:0.9.0"
+  checksum: 10/038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1
+  languageName: node
+  linkType: hard
+
+"@emotion/serialize@npm:^1.2.0, @emotion/serialize@npm:^1.3.0":
+  version: 1.3.1
+  resolution: "@emotion/serialize@npm:1.3.1"
+  dependencies:
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/unitless": "npm:^0.10.0"
+    "@emotion/utils": "npm:^1.4.0"
+    csstype: "npm:^3.0.2"
+  checksum: 10/4bbb9b417f88a7bb55c4ffba101e3e53059029c0258969683bb11216906e08cbd687b5674ec787ec41e5340399fb08af8881d6cf913caf8a5fdf84c4f4890f33
+  languageName: node
+  linkType: hard
+
+"@emotion/sheet@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/sheet@npm:1.4.0"
+  checksum: 10/8ac6e9bf6b373a648f26ae7f1c24041038524f4c72f436f4f8c4761c665e58880c3229d8d89b1f7a4815dd8e5b49634d03e60187cb6f93097d7f7c1859e869d5
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@emotion/unitless@npm:0.10.0"
+  checksum: 10/6851c16edce01c494305f43b2cad7a26b939a821131b7c354e49b8e3b012c8810024755b0f4a03ef51117750309e55339825a97bd10411fb3687e68904769106
+  languageName: node
+  linkType: hard
+
+"@emotion/utils@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/utils@npm:1.4.0"
+  checksum: 10/e4cdb51819db01fec21c3e35a1391900c9e7f3ac1e7ecb419c8e408464830cd7ef6e1a116381cbfe3fb1039406fb7ed35f16a1575d502c92bc9f81bc13a3ee5a
+  languageName: node
+  linkType: hard
+
+"@emotion/weak-memoize@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "@emotion/weak-memoize@npm:0.4.0"
+  checksum: 10/db5da0e89bd752c78b6bd65a1e56231f0abebe2f71c0bd8fc47dff96408f7065b02e214080f99924f6a3bfe7ee15afc48dad999d76df86b39b16e513f7a94f52
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.20.2":
   version: 0.20.2
   resolution: "@esbuild/aix-ppc64@npm:0.20.2"
@@ -5456,6 +5556,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/parse-json@npm:^4.0.0":
+  version: 4.0.2
+  resolution: "@types/parse-json@npm:4.0.2"
+  checksum: 10/5bf62eec37c332ad10059252fc0dab7e7da730764869c980b0714777ad3d065e490627be9f40fc52f238ffa3ac4199b19de4127196910576c2fe34dd47c7a470
+  languageName: node
+  linkType: hard
+
 "@types/pegjs@npm:^0.10.3":
   version: 0.10.3
   resolution: "@types/pegjs@npm:0.10.3"
@@ -6571,13 +6678,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"asap@npm:~2.0.3":
-  version: 2.0.6
-  resolution: "asap@npm:2.0.6"
-  checksum: 10/b244c0458c571945e4b3be0b14eb001bea5596f9868cc50cc711dc03d58a7e953517d3f0dad81ccde3ff37d1f074701fa76a6f07d41aaa992d7204a37b915dda
-  languageName: node
-  linkType: hard
-
 "assert-plus@npm:^1.0.0":
   version: 1.0.0
   resolution: "assert-plus@npm:1.0.0"
@@ -6731,6 +6831,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": "npm:^7.12.5"
+    cosmiconfig: "npm:^7.0.0"
+    resolve: "npm:^1.19.0"
+  checksum: 10/30be6ca45e9a124c58ca00af9a0753e5410ec0b79a737714fc4722bbbeb693e55d9258f05c437145ef4a867c2d1603e06a1c292d66c243ce1227458c8ea2ca8c
+  languageName: node
+  linkType: hard
+
 "babel-plugin-polyfill-corejs2@npm:^0.4.8":
   version: 0.4.8
   resolution: "babel-plugin-polyfill-corejs2@npm:0.4.8"
@@ -6938,13 +7049,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bowser@npm:^1.7.3":
-  version: 1.9.4
-  resolution: "bowser@npm:1.9.4"
-  checksum: 10/98b90d686d92e85471a5880c27dc18c892be2c84d7768d378d015bae6e8896eff2d47b0621e4a492063c15d9401c17ef1b318b98eb0ac0f0cfadfb7375fbe564
-  languageName: node
-  linkType: hard
-
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -7814,7 +7918,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.4.0, convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0":
   version: 1.9.0
   resolution: "convert-source-map@npm:1.9.0"
   checksum: 10/dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
@@ -7855,13 +7959,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^1.0.0":
-  version: 1.2.7
-  resolution: "core-js@npm:1.2.7"
-  checksum: 10/834f3398eb587af52e0731d44ae3ead0d331a10fb253c8358c801cac9c1788d96faba8d83c4e8e53270b560969f512596dfdeca875ae626e8af2c901598706fc
-  languageName: node
-  linkType: hard
-
 "core-js@npm:^3.4":
   version: 3.35.1
   resolution: "core-js@npm:3.35.1"
@@ -7883,6 +7980,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cosmiconfig@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "cosmiconfig@npm:7.1.0"
+  dependencies:
+    "@types/parse-json": "npm:^4.0.0"
+    import-fresh: "npm:^3.2.1"
+    parse-json: "npm:^5.0.0"
+    path-type: "npm:^4.0.0"
+    yaml: "npm:^1.10.0"
+  checksum: 10/03600bb3870c80ed151b7b706b99a1f6d78df8f4bdad9c95485072ea13358ef294b13dd99f9e7bf4cc0b43bcd3599d40df7e648750d21c2f6817ca2cd687e071
+  languageName: node
+  linkType: hard
+
 "cosmiconfig@npm:^8.1.3":
   version: 8.2.0
   resolution: "cosmiconfig@npm:8.2.0"
@@ -7972,16 +8082,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-in-js-utils@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "css-in-js-utils@npm:2.0.1"
-  dependencies:
-    hyphenate-style-name: "npm:^1.0.2"
-    isobject: "npm:^3.0.1"
-  checksum: 10/ebd76577ac87d0881a7adcb1b1fadad1153c41b61d67e5b9b725fc4c861b90405a4472c26fdea140145d634412a54373f9a9f2c7714a84faa6b2178bcde77239
-  languageName: node
-  linkType: hard
-
 "css-select@npm:^5.1.0":
   version: 5.1.0
   resolution: "css-select@npm:5.1.0"
@@ -8926,7 +9026,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"encoding@npm:^0.1.11, encoding@npm:^0.1.13":
+"encoding@npm:^0.1.13":
   version: 0.1.13
   resolution: "encoding@npm:0.1.13"
   dependencies:
@@ -8944,17 +9044,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enhanced-resolve@npm:^5.12.0":
-  version: 5.15.0
-  resolution: "enhanced-resolve@npm:5.15.0"
-  dependencies:
-    graceful-fs: "npm:^4.2.4"
-    tapable: "npm:^2.2.0"
-  checksum: 10/180c3f2706f9117bf4dc7982e1df811dad83a8db075723f299245ef4488e0cad7e96859c5f0e410682d28a4ecd4da021ec7d06265f7e4eb6eed30c69ca5f7d3e
-  languageName: node
-  linkType: hard
-
-"enhanced-resolve@npm:^5.17.1":
+"enhanced-resolve@npm:^5.12.0, enhanced-resolve@npm:^5.17.1":
   version: 5.17.1
   resolution: "enhanced-resolve@npm:5.17.1"
   dependencies:
@@ -10111,21 +10201,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fbjs@npm:^0.8.12":
-  version: 0.8.18
-  resolution: "fbjs@npm:0.8.18"
-  dependencies:
-    core-js: "npm:^1.0.0"
-    isomorphic-fetch: "npm:^2.1.1"
-    loose-envify: "npm:^1.0.0"
-    object-assign: "npm:^4.1.0"
-    promise: "npm:^7.1.1"
-    setimmediate: "npm:^1.0.5"
-    ua-parser-js: "npm:^0.7.30"
-  checksum: 10/80e855a89b956071676681c9481f399f2356435dc1745d47bd609ce9bd1dda1c487b18c8ffc58423f96452dab6932811ef70758ec8a875dac9ff319c0a5f9adc
-  languageName: node
-  linkType: hard
-
 "fd-slicer@npm:~1.1.0":
   version: 1.1.0
   resolution: "fd-slicer@npm:1.1.0"
@@ -10218,6 +10293,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-root@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "find-root@npm:1.1.0"
+  checksum: 10/caa799c976a14925ba7f31ca1a226fe73d3aa270f4f1b623fcfeb1c6e263111db4beb807d8acd31bd4d48d44c343b93688a9288dfbccca27463c36a0301b0bb9
+  languageName: node
+  linkType: hard
+
 "find-up@npm:^4.0.0, find-up@npm:^4.1.0":
   version: 4.1.0
   resolution: "find-up@npm:4.1.0"
@@ -10643,19 +10725,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glamor@npm:^2.20.40":
-  version: 2.20.40
-  resolution: "glamor@npm:2.20.40"
-  dependencies:
-    fbjs: "npm:^0.8.12"
-    inline-style-prefixer: "npm:^3.0.6"
-    object-assign: "npm:^4.1.1"
-    prop-types: "npm:^15.5.10"
-    through: "npm:^2.3.8"
-  checksum: 10/ac000b9f2133570c5460dfc7c1778b1aa82f511af0fbf33d1aaecdf4866172011be3a14fcc796b5298e7a345c772bb25e81636f139357b028a47d85795fd2f9c
-  languageName: node
-  linkType: hard
-
 "glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
@@ -11167,13 +11236,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hyphenate-style-name@npm:^1.0.2":
-  version: 1.0.4
-  resolution: "hyphenate-style-name@npm:1.0.4"
-  checksum: 10/d37883e6b7e1be62e1ddae29cac83fa59fb93c068bc8eb1561585439adbad91dcf7e264ee2a82c4378fc58049f7bd853544a4a81bf00d4aff717f641052323e7
-  languageName: node
-  linkType: hard
-
 "i18next-parser@npm:^9.0.0":
   version: 9.0.1
   resolution: "i18next-parser@npm:9.0.1"
@@ -11349,16 +11411,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inline-style-prefixer@npm:^3.0.6":
-  version: 3.0.8
-  resolution: "inline-style-prefixer@npm:3.0.8"
-  dependencies:
-    bowser: "npm:^1.7.3"
-    css-in-js-utils: "npm:^2.0.0"
-  checksum: 10/1d47cdbfb70ee5590be521e0b3760665aee1b5fb764bb2ef15cc85e4dd70625c332d9219db4f9c38b6a16384e58fcbc5a27a3a8b63f557c369a530b4d0c3d30e
-  languageName: node
-  linkType: hard
-
 "inter-ui@npm:^3.19.3":
   version: 3.19.3
   resolution: "inter-ui@npm:3.19.3"
@@ -11813,7 +11865,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-stream@npm:^1.0.0, is-stream@npm:^1.0.1, is-stream@npm:^1.1.0":
+"is-stream@npm:^1.0.0, is-stream@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-stream@npm:1.1.0"
   checksum: 10/351aa77c543323c4e111204482808cfad68d2e940515949e31ccd0b010fc13d5fba4b9c230e4887fd24284713040f43e542332fbf172f6b9944b7d62e389c0ec
@@ -11975,16 +12027,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isomorphic-fetch@npm:^2.1.1":
-  version: 2.2.1
-  resolution: "isomorphic-fetch@npm:2.2.1"
-  dependencies:
-    node-fetch: "npm:^1.0.1"
-    whatwg-fetch: "npm:>=0.10.0"
-  checksum: 10/bb5daa7c3785d6742f4379a81e55b549a469503f7c9bf9411b48592e86632cf5e8fe8ea878dba185c0f33eb7c510c23abdeb55aebfdf5d3c70f031ced68c5424
-  languageName: node
-  linkType: hard
-
 "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0":
   version: 3.2.0
   resolution: "istanbul-lib-coverage@npm:3.2.0"
@@ -14500,16 +14542,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:^1.0.1":
-  version: 1.7.3
-  resolution: "node-fetch@npm:1.7.3"
-  dependencies:
-    encoding: "npm:^0.1.11"
-    is-stream: "npm:^1.0.1"
-  checksum: 10/17be1a182eec37ba43c1b02673329ab1fa1c2e3ddbdf9b5f62d5157aa118c253dcd42f338eb1b6fe84fb0689c4dd8eb5aaebf46a9b5a066fae88c74e36522688
-  languageName: node
-  linkType: hard
-
 "node-fetch@npm:^2.7.0":
   version: 2.7.0
   resolution: "node-fetch@npm:2.7.0"
@@ -15230,14 +15262,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "picocolors@npm:1.0.0"
-  checksum: 10/a2e8092dd86c8396bdba9f2b5481032848525b3dc295ce9b57896f931e63fc16f79805144321f72976383fc249584672a75cc18d6777c6b757603f372f745981
-  languageName: node
-  linkType: hard
-
-"picocolors@npm:^1.1.0":
+"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0":
   version: 1.1.0
   resolution: "picocolors@npm:1.1.0"
   checksum: 10/a2ad60d94d185c30f2a140b19c512547713fb89b920d32cc6cf658fa786d63a37ba7b8451872c3d9fc34883971fb6e5878e07a20b60506e0bb2554dce9169ccb
@@ -15546,15 +15571,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"promise@npm:^7.1.1":
-  version: 7.3.1
-  resolution: "promise@npm:7.3.1"
-  dependencies:
-    asap: "npm:~2.0.3"
-  checksum: 10/37dbe58ca7b0716cc881f0618128f1fd6ff9c46cdc529a269fd70004e567126a449a94e9428e2d19b53d06182d11b45d0c399828f103e06b2bb87643319bd2e7
-  languageName: node
-  linkType: hard
-
 "prompts@npm:^2.0.1":
   version: 2.4.2
   resolution: "prompts@npm:2.4.2"
@@ -15565,7 +15581,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:15.x, prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:15.x, prop-types@npm:^15.0.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -16536,7 +16552,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.14.2, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4":
+"resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -16562,7 +16578,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -16985,13 +17001,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"setimmediate@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "setimmediate@npm:1.0.5"
-  checksum: 10/76e3f5d7f4b581b6100ff819761f04a984fa3f3990e72a6554b57188ded53efce2d3d6c0932c10f810b7c59414f85e2ab3c11521877d1dea1ce0b56dc906f485
-  languageName: node
-  linkType: hard
-
 "shallow-clone@npm:^3.0.0":
   version: 3.0.1
   resolution: "shallow-clone@npm:3.0.1"
@@ -17255,14 +17264,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1":
-  version: 1.2.0
-  resolution: "source-map-js@npm:1.2.0"
-  checksum: 10/74f331cfd2d121c50790c8dd6d3c9de6be21926de80583b23b37029b0f37aefc3e019fa91f9a10a5e120c08135297e1ecf312d561459c45908cb1e0e365f49e5
-  languageName: node
-  linkType: hard
-
-"source-map-js@npm:^1.2.1":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"
   checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3
@@ -17279,6 +17281,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "source-map@npm:0.5.7"
+  checksum: 10/9b4ac749ec5b5831cad1f8cc4c19c4298ebc7474b24a0acf293e2f040f03f8eeccb3d01f12aa0f90cf46d555c887e03912b83a042c627f419bda5152d89c5269
+  languageName: node
+  linkType: hard
+
 "source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -17746,6 +17755,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "stylis@npm:4.2.0"
+  checksum: 10/58359185275ef1f39c339ae94e598168aa6bb789f6cf0d52e726c1e7087a94e9c17f0385a28d34483dec1ffc2c75670ec714dc5603d99c3124ec83bc2b0a0f42
+  languageName: node
+  linkType: hard
+
 "sumchecker@npm:^3.0.1":
   version: 3.0.1
   resolution: "sumchecker@npm:3.0.1"
@@ -18583,13 +18599,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ua-parser-js@npm:^0.7.30":
-  version: 0.7.35
-  resolution: "ua-parser-js@npm:0.7.35"
-  checksum: 10/b6e99dc17599b04f2cd03c4de13593d8b300181402b65c95deeca6a507b96aef519e1d63fb8269af1532182ef41e61f0aca3dbae0f4add44521b5b836ccccc74
-  languageName: node
-  linkType: hard
-
 "ufo@npm:^1.3.0":
   version: 1.3.2
   resolution: "ufo@npm:1.3.2"
@@ -19493,13 +19502,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whatwg-fetch@npm:>=0.10.0":
-  version: 3.6.18
-  resolution: "whatwg-fetch@npm:3.6.18"
-  checksum: 10/05442d53fe108021e702f05cddb523d731c36d48058b2b2fe6b89d21f2484c05d469ed4a8906be4c3ea610ad094c340452ff29079317b3ad5ac89a7b65305add
-  languageName: node
-  linkType: hard
-
 "whatwg-mimetype@npm:^2.3.0":
   version: 2.3.0
   resolution: "whatwg-mimetype@npm:2.3.0"
@@ -20001,6 +20003,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^1.10.0":
+  version: 1.10.2
+  resolution: "yaml@npm:1.10.2"
+  checksum: 10/e088b37b4d4885b70b50c9fa1b7e54bd2e27f5c87205f9deaffd1fb293ab263d9c964feadb9817a7b129a5bf30a06582cb08750f810568ecc14f3cdbabb79cb3
+  languageName: node
+  linkType: hard
+
 "yaml@npm:~2.5.0":
   version: 2.5.0
   resolution: "yaml@npm:2.5.0"