diff --git a/package.json b/package.json
index 45d02d0a7..9fb8e443d 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "@atlaskit/badge": "18.3.3",
     "@atlaskit/button": "23.9.4",
     "@atlaskit/checkbox": "17.3.1",
+    "@atlaskit/css": "^0.19.1",
     "@atlaskit/css-reset": "7.3.11",
     "@atlaskit/form": "15.3.1",
     "@atlaskit/heading": "5.2.19",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fbd4be8c1..b60ed4e9f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,6 +51,9 @@ importers:
       '@atlaskit/checkbox':
         specifier: 17.3.1
         version: 17.3.1(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@atlaskit/css':
+        specifier: ^0.19.1
+        version: 0.19.1(@types/react@19.2.8)(react@19.2.3)
       '@atlaskit/css-reset':
         specifier: 7.3.11
         version: 7.3.11(@types/react@19.2.8)(react@19.2.3)
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index d6f8005f8..f573c3dda 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/src/renderer/components/Sidebar.tsx
@@ -9,7 +9,7 @@ import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
 import NotificationIcon from '@atlaskit/icon/core/notification';
 import RefreshIcon from '@atlaskit/icon/core/refresh';
 import SettingsIcon from '@atlaskit/icon/core/settings';
-import { Box, Stack } from '@atlaskit/primitives';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import Toggle from '@atlaskit/toggle';
 import { token, useThemeObserver } from '@atlaskit/tokens';
diff --git a/src/renderer/components/filters/FilterSection.tsx b/src/renderer/components/filters/FilterSection.tsx
index 8299dea4e..29ce336e2 100644
--- a/src/renderer/components/filters/FilterSection.tsx
+++ b/src/renderer/components/filters/FilterSection.tsx
@@ -4,7 +4,7 @@ import Badge from '@atlaskit/badge';
 import Checkbox from '@atlaskit/checkbox';
 import Heading from '@atlaskit/heading';
 import { IconTile } from '@atlaskit/icon';
-import { Box, Inline, Stack } from '@atlaskit/primitives';
+import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
 
 import { AppContext } from '../../context/App';
 
diff --git a/src/renderer/components/layout/EmojiSplash.tsx b/src/renderer/components/layout/EmojiSplash.tsx
index aa632f829..c9cee0a0b 100644
--- a/src/renderer/components/layout/EmojiSplash.tsx
+++ b/src/renderer/components/layout/EmojiSplash.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import { Box, Stack } from '@atlaskit/primitives';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
 
 import { EmojiText } from '../primitives/EmojiText';
 
diff --git a/src/renderer/components/notifications/AccountNotifications.tsx b/src/renderer/components/notifications/AccountNotifications.tsx
index fff8534e4..1473c71e6 100644
--- a/src/renderer/components/notifications/AccountNotifications.tsx
+++ b/src/renderer/components/notifications/AccountNotifications.tsx
@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
 import Avatar, { AvatarItem } from '@atlaskit/avatar';
 import Badge from '@atlaskit/badge';
 import Button, { IconButton } from '@atlaskit/button/new';
+import { cssMap, cx } from '@atlaskit/css';
 import CrossIcon from '@atlaskit/icon/core/cross';
 import StrokeWeightLargeIcon from '@atlaskit/icon/core/stroke-weight-large';
 import { BitbucketIcon } from '@atlaskit/logo';
@@ -22,7 +23,8 @@ import Modal, {
   ModalTitle,
   ModalTransition,
 } from '@atlaskit/modal-dialog';
-import { Box, Flex, Grid, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Flex, Grid, Inline, Stack } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
 import { Constants } from '../../constants';
@@ -64,17 +66,18 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
   const [isOpen, setIsOpen] = useState(false);
   const openModal = useCallback(() => setIsOpen(true), []);
   const closeModal = useCallback(() => setIsOpen(false), []);
-  const gridStyles = xcss({
-    width: '100%',
-  });
 
-  const closeContainerStyles = xcss({
-    gridArea: 'close',
-  });
+  // const gridStyles = xcss({
+  //   width: '100%',
+  // });
 
-  const titleContainerStyles = xcss({
-    gridArea: 'title',
-  });
+  // const closeContainerStyles = xcss({
+  //   gridArea: 'close',
+  // });
+
+  // const titleContainerStyles = xcss({
+  //   gridArea: 'title',
+  // });
 
   const sortedNotifications = useMemo(
     () => [...notifications].sort((a, b) => a.order - b.order),
@@ -109,19 +112,21 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
   );
   const ChevronIcon = Chevron.icon;
 
-  const boxStyles = xcss({
-    transitionDuration: '200ms',
+  const styles = cssMap({
+    box: {
+      transitionDuration: '200ms',
 
-    backgroundColor: props.error
-      ? 'color.background.accent.red.subtler'
-      : isLightMode()
-        ? 'color.background.accent.blue.subtler'
-        : 'color.background.accent.gray.subtler',
+      backgroundColor: props.error
+        ? token('color.background.accent.red.subtler')
+        : isLightMode()
+          ? token('color.background.accent.blue.subtler')
+          : token('color.background.accent.gray.subtler'),
 
-    ':hover': {
-      backgroundColor: isLightMode()
-        ? 'color.background.accent.blue.subtler.hovered'
-        : 'color.background.accent.gray.subtler.hovered',
+      '&:hover': {
+        backgroundColor: isLightMode()
+          ? token('color.background.accent.blue.subtler.hovered')
+          : token('color.background.accent.gray.subtler.hovered'),
+      },
     },
   });
 
@@ -132,7 +137,7 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
         onClick={toggleAccountNotifications}
         paddingBlock="space.050"
         paddingInline="space.100"
-        xcss={boxStyles}
+        xcss={cx(styles.box)}
       >
         <Flex alignItems="center" justifyContent="space-between">
           <Inline alignBlock="center" space="space.100">
@@ -252,10 +257,11 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
             <ModalHeader>
               <Grid
                 gap="space.200"
-                templateAreas={['title close']}
-                xcss={gridStyles}
+                // templateAreas={['title close']}
+                // xcss={gridStyles}
               >
-                <Flex justifyContent="end" xcss={closeContainerStyles}>
+                <Flex justifyContent="end">
+                  {/* <Flex justifyContent="end" xcss={closeContainerStyles}> */}
                   <IconButton
                     appearance="subtle"
                     icon={CrossIcon}
@@ -264,7 +270,8 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
                     testId="account-mark-as-read-close"
                   />
                 </Flex>
-                <Flex justifyContent="start" xcss={titleContainerStyles}>
+                <Flex justifyContent="start">
+                  {/* <Flex justifyContent="start" xcss={titleContainerStyles}> */}
                   <ModalTitle appearance="warning">
                     {t('common.are_you_sure')}
                   </ModalTitle>
diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx
index 1c270e797..da435fae4 100644
--- a/src/renderer/components/notifications/NotificationRow.tsx
+++ b/src/renderer/components/notifications/NotificationRow.tsx
@@ -5,7 +5,7 @@ import Avatar, { type AppearanceType } from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
 import { IconButton } from '@atlaskit/button/new';
 import StrokeWeightLargeIcon from '@atlaskit/icon/core/stroke-weight-large';
-import { Box, Inline, Stack, Text } from '@atlaskit/primitives';
+import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
diff --git a/src/renderer/components/notifications/ProductNotifications.tsx b/src/renderer/components/notifications/ProductNotifications.tsx
index e2199a00a..f8e379540 100644
--- a/src/renderer/components/notifications/ProductNotifications.tsx
+++ b/src/renderer/components/notifications/ProductNotifications.tsx
@@ -3,8 +3,10 @@ import { useTranslation } from 'react-i18next';
 
 import Badge from '@atlaskit/badge';
 import Button, { IconButton } from '@atlaskit/button/new';
+import { cssMap, cx } from '@atlaskit/css';
 import StrokeWeightLargeIcon from '@atlaskit/icon/core/stroke-weight-large';
-import { Box, Flex, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Flex, Inline, Stack } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
 import { AppContext } from '../../context/App';
@@ -40,17 +42,19 @@ export const ProductNotifications: FC<ProductNotificationsProps> = ({
   const Chevron = getChevronDetails(true, showProductNotifications, 'product');
   const ChevronIcon = Chevron.icon;
 
-  const boxStyles = xcss({
-    transitionDuration: '200ms',
+  const styles = cssMap({
+    box: {
+      transitionDuration: '200ms',
 
-    backgroundColor: isLightMode()
-      ? 'color.background.accent.blue.subtlest'
-      : 'color.background.accent.gray.subtlest',
-
-    ':hover': {
       backgroundColor: isLightMode()
-        ? 'color.background.accent.blue.subtlest.hovered'
-        : 'color.background.accent.gray.subtlest.hovered',
+        ? token('color.background.accent.blue.subtlest')
+        : token('color.background.accent.gray.subtlest'),
+
+      '&:hover': {
+        backgroundColor: isLightMode()
+          ? token('color.background.accent.blue.subtlest.hovered')
+          : token('color.background.accent.gray.subtlest.hovered'),
+      },
     },
   });
 
@@ -62,7 +66,7 @@ export const ProductNotifications: FC<ProductNotificationsProps> = ({
         paddingBlock="space.050"
         paddingInlineEnd="space.100"
         paddingInlineStart="space.050"
-        xcss={boxStyles}
+        xcss={cx(styles.box)}
       >
         <Flex alignItems="center" justifyContent="space-between">
           <Tooltip
diff --git a/src/renderer/components/primitives/Footer.tsx b/src/renderer/components/primitives/Footer.tsx
index 8209f3665..5d023ce25 100644
--- a/src/renderer/components/primitives/Footer.tsx
+++ b/src/renderer/components/primitives/Footer.tsx
@@ -1,6 +1,8 @@
 import type { FC, ReactNode } from 'react';
 
-import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { cssMap, cx } from '@atlaskit/css';
+import { Box, Flex } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 
 interface FooterProps {
   children: ReactNode;
@@ -8,15 +10,17 @@ interface FooterProps {
 }
 
 export const Footer: FC<FooterProps> = (props: FooterProps) => {
-  const footerBoxStyles = xcss({
-    backgroundColor: 'color.background.accent.gray.subtlest',
+  const styles = cssMap({
+    footerBox: {
+      backgroundColor: token('color.background.accent.gray.subtlest'),
+    },
   });
 
   return (
     <Box
       paddingBlock="space.050"
       paddingInline="space.200"
-      xcss={footerBoxStyles}
+      xcss={cx(styles.footerBox)}
     >
       <Flex justifyContent={props.justify}>{props.children}</Flex>
     </Box>
diff --git a/src/renderer/components/primitives/Header.tsx b/src/renderer/components/primitives/Header.tsx
index f72f91369..291208c8f 100644
--- a/src/renderer/components/primitives/Header.tsx
+++ b/src/renderer/components/primitives/Header.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import ArrowLeftIcon from '@atlaskit/icon/core/arrow-left';
-import { Box, Inline } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 
 import { AppContext } from '../../context/App';
diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index fe1ec6ca2..d92b38078 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -2,15 +2,16 @@ import { type FC, useCallback, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { IconButton, SplitButton } from '@atlaskit/button/new';
+import { cssMap, cx } from '@atlaskit/css';
 import Heading from '@atlaskit/heading';
 import RetryIcon from '@atlaskit/icon/core/retry';
 import ZoomInIcon from '@atlaskit/icon/core/zoom-in';
 import ZoomOutIcon from '@atlaskit/icon/core/zoom-out';
-import { Box, Inline, Stack, Text, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { RadioGroup } from '@atlaskit/radio';
 import type { OptionsPropType } from '@atlaskit/radio/dist/types/types';
 import Select from '@atlaskit/select';
-import { setGlobalTheme } from '@atlaskit/tokens';
+import { setGlobalTheme, token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
 import { Theme } from '../../../shared/theme';
@@ -38,8 +39,10 @@ export const AppearanceSettings: FC = () => {
 
   const { t } = useTranslation();
 
-  const zoomBoxStyles = xcss({
-    backgroundColor: 'color.background.accent.gray.subtlest',
+  const styles = cssMap({
+    zoomBox: {
+      backgroundColor: token('color.background.accent.gray.subtlest'),
+    },
   });
 
   useEffect(() => {
@@ -124,7 +127,7 @@ export const AppearanceSettings: FC = () => {
           <Text id="zoom-label" weight="medium">
             {t('settings.appearance.zoom')}:
           </Text>
-          <Inline xcss={zoomBoxStyles}>
+          <Inline xcss={cx(styles.zoomBox)}>
             <SplitButton spacing="compact">
               <Inline alignBlock="center">
                 <Box paddingInline="space.150">
diff --git a/src/renderer/components/settings/NotificationSettings.tsx b/src/renderer/components/settings/NotificationSettings.tsx
index ed3cd40d8..6e0c5c36b 100644
--- a/src/renderer/components/settings/NotificationSettings.tsx
+++ b/src/renderer/components/settings/NotificationSettings.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Checkbox } from '@atlaskit/checkbox';
 import Heading from '@atlaskit/heading';
 import InlineMessage from '@atlaskit/inline-message';
-import { Inline, Stack } from '@atlaskit/primitives';
+import { Inline, Stack } from '@atlaskit/primitives/compiled';
 
 import { APPLICATION } from '../../../shared/constants';
 
diff --git a/src/renderer/components/settings/SettingsFooter.tsx b/src/renderer/components/settings/SettingsFooter.tsx
index e654227bd..bb20cbe2b 100644
--- a/src/renderer/components/settings/SettingsFooter.tsx
+++ b/src/renderer/components/settings/SettingsFooter.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import Button, { IconButton } from '@atlaskit/button/new';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import PeopleGroupIcon from '@atlaskit/icon/core/people-group';
-import { Inline } from '@atlaskit/primitives';
+import { Inline } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
diff --git a/src/renderer/components/settings/SettingsReset.tsx b/src/renderer/components/settings/SettingsReset.tsx
index b8bcf19b7..b97e43b92 100644
--- a/src/renderer/components/settings/SettingsReset.tsx
+++ b/src/renderer/components/settings/SettingsReset.tsx
@@ -10,24 +10,12 @@ import Modal, {
   ModalTitle,
   ModalTransition,
 } from '@atlaskit/modal-dialog';
-import { Flex, Grid, Inline, xcss } from '@atlaskit/primitives';
+import { Flex, Grid, Inline } from '@atlaskit/primitives/compiled';
 
 import { APPLICATION } from '../../../shared/constants';
 
 import { AppContext } from '../../context/App';
 
-const gridStyles = xcss({
-  width: '100%',
-});
-
-const closeContainerStyles = xcss({
-  gridArea: 'close',
-});
-
-const titleContainerStyles = xcss({
-  gridArea: 'title',
-});
-
 export const SettingsReset: FC = () => {
   const { t } = useTranslation();
   const { resetSettings } = useContext(AppContext);
@@ -35,6 +23,18 @@ export const SettingsReset: FC = () => {
   const openModal = useCallback(() => setIsOpen(true), []);
   const closeModal = useCallback(() => setIsOpen(false), []);
 
+  // const gridStyles = xcss({
+  //   width: '100%',
+  // });
+
+  // const closeContainerStyles = xcss({
+  //   gridArea: 'close',
+  // });
+
+  // const titleContainerStyles = xcss({
+  //   gridArea: 'title',
+  // });
+
   return (
     <Inline alignInline="center">
       <Button
@@ -52,10 +52,11 @@ export const SettingsReset: FC = () => {
             <ModalHeader>
               <Grid
                 gap="space.200"
-                templateAreas={['title close']}
-                xcss={gridStyles}
+                // templateAreas={['title close']}
+                // xcss={gridStyles}
               >
-                <Flex justifyContent="end" xcss={closeContainerStyles}>
+                <Flex justifyContent="end">
+                  {/* <Flex justifyContent="end" xcss={closeContainerStyles}> */}
                   <IconButton
                     appearance="subtle"
                     icon={CrossIcon}
@@ -64,7 +65,8 @@ export const SettingsReset: FC = () => {
                     testId="settings-reset-close"
                   />
                 </Flex>
-                <Flex justifyContent="start" xcss={titleContainerStyles}>
+                <Flex justifyContent="start">
+                  {/* <Flex justifyContent="start" xcss={titleContainerStyles}> */}
                   <ModalTitle appearance="danger">
                     {t('settings.reset.title')}
                   </ModalTitle>
diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx
index e0359ecdd..24adbb879 100644
--- a/src/renderer/components/settings/SystemSettings.tsx
+++ b/src/renderer/components/settings/SystemSettings.tsx
@@ -3,14 +3,16 @@ import { useTranslation } from 'react-i18next';
 
 import { IconButton, SplitButton } from '@atlaskit/button/new';
 import { Checkbox } from '@atlaskit/checkbox';
+import { cssMap, cx } from '@atlaskit/css';
 import Heading from '@atlaskit/heading';
 import RetryIcon from '@atlaskit/icon/core/retry';
 import VolumeHighIcon from '@atlaskit/icon/core/volume-high';
 import VolumeLowIcon from '@atlaskit/icon/core/volume-low';
 import InlineMessage from '@atlaskit/inline-message';
-import { Box, Inline, Stack, Text, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { RadioGroup } from '@atlaskit/radio';
 import type { OptionsPropType } from '@atlaskit/radio/types';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
 import { APPLICATION } from '../../../shared/constants';
@@ -44,10 +46,12 @@ export const SystemSettings: FC = () => {
     },
   ];
 
-  const volumeBoxStyles = xcss({
-    backgroundColor: 'color.background.accent.gray.subtlest',
+  const styles = cssMap({
+    volumeBox: {
+      backgroundColor: token('color.background.accent.gray.subtlest'),
 
-    visibility: settings.playSoundNewNotifications ? 'visible' : 'hidden',
+      visibility: settings.playSoundNewNotifications ? 'visible' : 'hidden',
+    },
   });
 
   return (
@@ -124,7 +128,7 @@ export const SystemSettings: FC = () => {
             )
           }
         />
-        <Inline testId="settings-volume-group" xcss={volumeBoxStyles}>
+        <Inline testId="settings-volume-group" xcss={cx(styles.volumeBox)}>
           <SplitButton spacing="compact">
             <Inline alignBlock="center">
               <Box paddingInline="space.150">
diff --git a/src/renderer/components/settings/TraySettings.tsx b/src/renderer/components/settings/TraySettings.tsx
index e99ff05f1..6ac212005 100644
--- a/src/renderer/components/settings/TraySettings.tsx
+++ b/src/renderer/components/settings/TraySettings.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Checkbox } from '@atlaskit/checkbox';
 import Heading from '@atlaskit/heading';
 import InlineMessage from '@atlaskit/inline-message';
-import { Inline, Stack } from '@atlaskit/primitives';
+import { Inline, Stack } from '@atlaskit/primitives/compiled';
 
 import { APPLICATION } from '../../../shared/constants';
 
diff --git a/src/renderer/routes/Accounts.tsx b/src/renderer/routes/Accounts.tsx
index 38b4524a0..c48bccf8a 100644
--- a/src/renderer/routes/Accounts.tsx
+++ b/src/renderer/routes/Accounts.tsx
@@ -4,10 +4,12 @@ import { useNavigate } from 'react-router-dom';
 
 import Avatar, { AvatarItem } from '@atlaskit/avatar';
 import { IconButton } from '@atlaskit/button/new';
+import { cssMap, cx } from '@atlaskit/css';
 import LogOutIcon from '@atlaskit/icon/core/log-out';
 import PersonAddIcon from '@atlaskit/icon/core/person-add';
 import RefreshIcon from '@atlaskit/icon/core/refresh';
-import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
 import { AppContext } from '../context/App';
@@ -40,14 +42,11 @@ export const AccountsRoute: FC = () => {
     return navigate('/login', { replace: true });
   }, []);
 
-  const boxStyles = xcss({
-    backgroundColor: isLightMode()
-      ? 'color.background.accent.blue.subtlest'
-      : 'color.background.accent.gray.subtlest',
-
-    borderRadius: 'radius.large',
-
-    marginInline: 'space.250',
+  const styles = cssMap({
+    box: {
+      borderRadius: token('radius.large'),
+      marginInline: token('space.250'),
+    },
   });
 
   return (
@@ -57,7 +56,16 @@ export const AccountsRoute: FC = () => {
       <Contents>
         {auth.accounts.map((account) => {
           return (
-            <Box key={account.id} padding="space.150" xcss={boxStyles}>
+            <Box
+              backgroundColor={
+                isLightMode()
+                  ? 'color.background.accent.blue.subtlest'
+                  : 'color.background.accent.gray.subtlest'
+              }
+              key={account.id}
+              padding="space.150"
+              xcss={cx(styles.box)}
+            >
               <Inline alignBlock="center" grow="fill" spread="space-between">
                 <Tooltip content={t('accounts.open_profile')} position="bottom">
                   <AvatarItem
diff --git a/src/renderer/routes/Filters.tsx b/src/renderer/routes/Filters.tsx
index 2a8cfb2eb..d934fdf63 100644
--- a/src/renderer/routes/Filters.tsx
+++ b/src/renderer/routes/Filters.tsx
@@ -2,7 +2,7 @@ import { type FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '@atlaskit/button/new';
-import { Box, Inline, Stack } from '@atlaskit/primitives';
+import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
 
 import { AppContext } from '../context/App';
 
diff --git a/src/renderer/routes/Landing.tsx b/src/renderer/routes/Landing.tsx
index 0663b53d4..7eee9b131 100644
--- a/src/renderer/routes/Landing.tsx
+++ b/src/renderer/routes/Landing.tsx
@@ -16,7 +16,7 @@ import {
   type LogoProps,
   TeamsIcon,
 } from '@atlaskit/logo';
-import { Inline, Stack, Text } from '@atlaskit/primitives';
+import { Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 
 import { AppContext } from '../context/App';
diff --git a/src/renderer/routes/Login.tsx b/src/renderer/routes/Login.tsx
index 55ef38bdb..2a2acb10b 100644
--- a/src/renderer/routes/Login.tsx
+++ b/src/renderer/routes/Login.tsx
@@ -20,7 +20,7 @@ import Form, {
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import LogInIcon from '@atlaskit/icon/core/log-in';
-import { Box, Inline } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import TextField from '@atlaskit/textfield';
 import Tooltip from '@atlaskit/tooltip';
 
diff --git a/src/renderer/routes/Settings.tsx b/src/renderer/routes/Settings.tsx
index 0da1bcae4..7ce330efb 100644
--- a/src/renderer/routes/Settings.tsx
+++ b/src/renderer/routes/Settings.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, Stack } from '@atlaskit/primitives';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
 
 import { Contents } from '../components/layout/Contents';
 import { Page } from '../components/layout/Page';