diff --git a/next.config.mjs b/next.config.mjs
index b23c212339..89ff2ae2f5 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -77,6 +77,7 @@ const nextConfig = {
       ...config.resolve.alias,
       'bn.js': path.resolve('./node_modules/bn.js/lib/bn.js'),
       'mainnet.json': path.resolve('./node_modules/@ethereumjs/common/dist.browser/genesisStates/mainnet.json'),
+      '@mui/material$': path.resolve('./src/components/common/Mui'),
     }
 
     if (dev) {
diff --git a/src/components/address-book/AddressBookTable/index.tsx b/src/components/address-book/AddressBookTable/index.tsx
index 6d0263e5ab..f1ee73aeec 100644
--- a/src/components/address-book/AddressBookTable/index.tsx
+++ b/src/components/address-book/AddressBookTable/index.tsx
@@ -145,16 +145,12 @@ function AddressBookTable({ chain, setTxFlow }: AddressBookTableProps) {
         searchQuery={searchQuery}
         onSearchQueryChange={setSearchQuery}
       />
+
       <main>
         {filteredEntries.length > 0 ? (
           <EnhancedTable rows={rows} headCells={headCells} mobileVariant />
         ) : (
-          <Box
-            sx={{
-              bgcolor: 'background.paper',
-              borderRadius: 1,
-            }}
-          >
+          <Box bgcolor="background.paper" borderRadius={1}>
             <PagePlaceholder
               img={<NoEntriesIcon />}
               text={`No entries found${chain ? ` on ${chain.chainName}` : ''}`}
@@ -162,8 +158,11 @@ function AddressBookTable({ chain, setTxFlow }: AddressBookTableProps) {
           </Box>
         )}
       </main>
+
       {open[ModalType.EXPORT] && <ExportDialog handleClose={handleClose} />}
+
       {open[ModalType.IMPORT] && <ImportDialog handleClose={handleClose} />}
+
       {open[ModalType.ENTRY] && (
         <EntryDialog
           handleClose={handleClose}
@@ -171,6 +170,7 @@ function AddressBookTable({ chain, setTxFlow }: AddressBookTableProps) {
           disableAddressInput={Boolean(defaultValues?.name)}
         />
       )}
+
       {open[ModalType.REMOVE] && <RemoveDialog handleClose={handleClose} address={defaultValues?.address || ''} />}
     </>
   )
diff --git a/src/components/address-book/EntryDialog/index.tsx b/src/components/address-book/EntryDialog/index.tsx
index e22428fd54..0d3ceb9852 100644
--- a/src/components/address-book/EntryDialog/index.tsx
+++ b/src/components/address-book/EntryDialog/index.tsx
@@ -61,11 +61,7 @@ function EntryDialog({
       <FormProvider {...methods}>
         <form onSubmit={onSubmit}>
           <DialogContent>
-            <Box
-              sx={{
-                mb: 2,
-              }}
-            >
+            <Box mb={2}>
               <NameInput data-testid="name-input" label="Name" autoFocus name="name" required />
             </Box>
 
diff --git a/src/components/address-book/ExportDialog/index.tsx b/src/components/address-book/ExportDialog/index.tsx
index 9f089812de..15256feaae 100644
--- a/src/components/address-book/ExportDialog/index.tsx
+++ b/src/components/address-book/ExportDialog/index.tsx
@@ -71,11 +71,7 @@ function ExportDialog({
           .
         </Typography>
 
-        <Typography
-          sx={{
-            mt: 1,
-          }}
-        >
+        <Typography mt={1}>
           <ExternalLink
             href={HelpCenterArticle.ADDRESS_BOOK_DATA}
             title="Learn about the address book import and export"
@@ -84,6 +80,7 @@ function ExportDialog({
           </ExternalLink>
         </Typography>
       </DialogContent>
+
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
         <CSVDownloader filename={filename} bom config={{ delimiter: ',' }} data={csvData} style={{ order: 2 }}>
diff --git a/src/components/balances/AssetsTable/index.tsx b/src/components/balances/AssetsTable/index.tsx
index 7b1a06f41b..077bfed573 100644
--- a/src/components/balances/AssetsTable/index.tsx
+++ b/src/components/balances/AssetsTable/index.tsx
@@ -157,11 +157,7 @@ const AssetsTable = ({
               rawValue: rawFiatValue,
               collapsed: item.tokenInfo.address === hidingAsset,
               content: (
-                <Typography
-                  sx={{
-                    textAlign: 'right',
-                  }}
-                >
+                <Typography textAlign="right">
                   <FiatValue value={item.fiatBalance} />
 
                   {rawFiatValue === 0 && (
@@ -189,14 +185,7 @@ const AssetsTable = ({
               sticky: true,
               collapsed: item.tokenInfo.address === hidingAsset,
               content: (
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    gap: 1,
-                    alignItems: 'center',
-                  }}
-                >
+                <Box display="flex" flexDirection="row" gap={1} alignItems="center">
                   <>
                     <SendButton tokenInfo={item.tokenInfo} />
 
diff --git a/src/components/balances/HiddenTokenButton/index.tsx b/src/components/balances/HiddenTokenButton/index.tsx
index e9a4ec09f8..df9593c361 100644
--- a/src/components/balances/HiddenTokenButton/index.tsx
+++ b/src/components/balances/HiddenTokenButton/index.tsx
@@ -39,11 +39,7 @@ const HiddenTokenButton = ({
         >
           <>
             <VisibilityOutlined fontSize="small" />
-            <Typography
-              sx={{
-                fontSize: 'medium',
-              }}
-            >
+            <Typography fontSize="medium">
               {hiddenAssetCount === 0
                 ? 'Hide tokens'
                 : `${hiddenAssetCount} hidden token${maybePlural(hiddenAssetCount)}`}{' '}
diff --git a/src/components/balances/TokenListSelect/index.tsx b/src/components/balances/TokenListSelect/index.tsx
index beb7111e54..e300bc4e16 100644
--- a/src/components/balances/TokenListSelect/index.tsx
+++ b/src/components/balances/TokenListSelect/index.tsx
@@ -35,6 +35,7 @@ const TokenListSelect = () => {
   return (
     <FormControl size="small">
       <InputLabel id="tokenlist-select-label">Token list</InputLabel>
+
       <OnboardingTooltip
         widgetLocalStorageId={LS_TOKENLIST_ONBOARDING}
         text={
@@ -57,15 +58,7 @@ const TokenListSelect = () => {
         >
           <MenuItem value={TOKEN_LISTS.TRUSTED}>
             <Track {...ASSETS_EVENTS.SHOW_DEFAULT_TOKENS}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  gap: '4px',
-                  alignItems: 'center',
-                  minWidth: 155,
-                }}
-              >
+              <Box display="flex" flexDirection="row" gap="4px" alignItems="center" minWidth={155}>
                 {TokenListLabel.TRUSTED}
                 <Tooltip
                   arrow
diff --git a/src/components/balances/TokenMenu/index.tsx b/src/components/balances/TokenMenu/index.tsx
index 3ba13911cd..10be9fbfd4 100644
--- a/src/components/balances/TokenMenu/index.tsx
+++ b/src/components/balances/TokenMenu/index.tsx
@@ -27,22 +27,11 @@ const TokenMenu = ({
       <Box className={css.wrapper}>
         <Box className={css.hideTokensHeader}>
           <VisibilityOffOutlined />
-          <Typography
-            variant="body2"
-            sx={{
-              lineHeight: 'inherit',
-            }}
-          >
+          <Typography variant="body2" lineHeight="inherit">
             {selectedAssetCount} {selectedAssetCount === 1 ? 'token' : 'tokens'} selected
           </Typography>
         </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 1,
-          }}
-        >
+        <Box display="flex" flexDirection="row" gap={1}>
           <Track {...ASSETS_EVENTS.CANCEL_HIDE_DIALOG}>
             <Button onClick={cancel} className={css.cancelButton} size="small" variant="outlined">
               Cancel
diff --git a/src/components/batch/BatchIndicator/BatchTooltip.tsx b/src/components/batch/BatchIndicator/BatchTooltip.tsx
index 042345192e..9f9718886f 100644
--- a/src/components/batch/BatchIndicator/BatchTooltip.tsx
+++ b/src/components/batch/BatchIndicator/BatchTooltip.tsx
@@ -25,20 +25,8 @@ const BatchTooltip = ({ children }: { children: ReactElement }) => {
       open={showTooltip}
       onClose={() => setShowTooltip(false)}
       title={
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            p: 2,
-            gap: 2,
-          }}
-        >
-          <Box
-            sx={{
-              fontSize: '53px',
-            }}
-          >
+        <Box display="flex" flexDirection="column" alignItems="center" p={2} gap={2}>
+          <Box fontSize="53px">
             <SvgIcon component={SuccessIcon} inheritViewBox fontSize="inherit" />
           </Box>
           Transaction is added to batch
diff --git a/src/components/batch/BatchSidebar/BatchTxItem.tsx b/src/components/batch/BatchSidebar/BatchTxItem.tsx
index 88bd965d56..2b6700feff 100644
--- a/src/components/batch/BatchSidebar/BatchTxItem.tsx
+++ b/src/components/batch/BatchSidebar/BatchTxItem.tsx
@@ -63,11 +63,7 @@ const BatchTxItem = ({ id, count, timestamp, txDetails, onDelete }: BatchTxItemP
           >
             <TxType tx={txSummary} />
 
-            <Box
-              sx={{
-                flex: 1,
-              }}
-            >
+            <Box flex={1}>
               <TxInfo info={txDetails.txInfo} />
             </Box>
 
@@ -79,12 +75,7 @@ const BatchTxItem = ({ id, count, timestamp, txDetails, onDelete }: BatchTxItemP
                   <SvgIcon component={DeleteIcon} inheritViewBox fontSize="small" />
                 </ButtonBase>
 
-                <Box
-                  className={css.separator}
-                  sx={{
-                    mr: 2,
-                  }}
-                />
+                <Box className={css.separator} mr={2} />
               </>
             )}
           </Box>
diff --git a/src/components/batch/BatchSidebar/EmptyBatch.tsx b/src/components/batch/BatchSidebar/EmptyBatch.tsx
index 0eac097902..ae65fcf4dd 100644
--- a/src/components/batch/BatchSidebar/EmptyBatch.tsx
+++ b/src/components/batch/BatchSidebar/EmptyBatch.tsx
@@ -7,66 +7,28 @@ import SettingsIcon from '@/public/images/sidebar/settings.svg'
 import { Box, SvgIcon, Typography } from '@mui/material'
 
 const EmptyBatch = ({ children }: { children: ReactNode }) => (
-  <Box
-    sx={{
-      display: 'flex',
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      textAlign: 'center',
-      mt: 3,
-      px: 4,
-    }}
-  >
+  <Box display="flex" flexWrap="wrap" justifyContent="center" textAlign="center" mt={3} px={4}>
     <SvgIcon component={EmptyBatchIcon} inheritViewBox sx={{ fontSize: 110 }} />
 
-    <Typography
-      variant="h4"
-      sx={{
-        fontWeight: 700,
-      }}
-    >
+    <Typography variant="h4" fontWeight={700}>
       Add an initial transaction to the batch
     </Typography>
 
-    <Typography
-      variant="body2"
-      sx={{
-        mt: 2,
-        mb: 4,
-        px: 8,
-        textWrap: 'balance',
-      }}
-    >
+    <Typography variant="body2" mt={2} mb={4} px={8} sx={{ textWrap: 'balance' }}>
       Save gas and signatures by adding multiple Safe transactions to a single batch transaction. You can reorder and
       delete individual transactions in a batch.
     </Typography>
 
     {children}
 
-    <Typography
-      variant="body2"
-      sx={{
-        color: 'border.main',
-        mt: 8,
-      }}
-    >
-      <Box
-        sx={{
-          mb: 1,
-        }}
-      >
+    <Typography variant="body2" color="border.main" mt={8}>
+      <Box mb={1}>
         <SvgIcon component={InfoIcon} inheritViewBox />
       </Box>
 
       <b>What type of transactions can you add to the batch?</b>
 
-      <Box
-        sx={{
-          display: 'flex',
-          mt: 3,
-          gap: 6,
-        }}
-      >
+      <Box display="flex" mt={3} gap={6}>
         <div>
           <SvgIcon component={AssetsIcon} inheritViewBox />
           <div>Token and NFT transfers</div>
diff --git a/src/components/batch/BatchSidebar/index.tsx b/src/components/batch/BatchSidebar/index.tsx
index a1b6a11e02..d1f89ac6d2 100644
--- a/src/components/batch/BatchSidebar/index.tsx
+++ b/src/components/batch/BatchSidebar/index.tsx
@@ -62,13 +62,7 @@ const BatchSidebar = ({ isOpen, onToggle }: { isOpen: boolean; onToggle: (open:
   return (
     <Drawer variant="temporary" anchor="right" open={isOpen} onClose={closeSidebar} transitionDuration={100}>
       <aside className={css.aside}>
-        <Typography
-          variant="h4"
-          sx={{
-            fontWeight: 700,
-            mb: 1,
-          }}
-        >
+        <Typography variant="h4" fontWeight={700} mb={1}>
           Batched transactions
         </Typography>
 
diff --git a/src/components/common/AddressInput/index.tsx b/src/components/common/AddressInput/index.tsx
index ca74bf8d18..ebb1fa56a9 100644
--- a/src/components/common/AddressInput/index.tsx
+++ b/src/components/common/AddressInput/index.tsx
@@ -140,6 +140,7 @@ const AddressInput = ({
               ) : (
                 <Skeleton variant="circular" width={32} height={32} animation={false} />
               )}
+
               {!rawValueRef.current.startsWith(`${currentShortName}:`) && <>{currentShortName}:</>}
             </InputAdornment>
           ),
diff --git a/src/components/common/AddressInputReadOnly/index.tsx b/src/components/common/AddressInputReadOnly/index.tsx
index f2505d236c..65f5fa192d 100644
--- a/src/components/common/AddressInputReadOnly/index.tsx
+++ b/src/components/common/AddressInputReadOnly/index.tsx
@@ -7,13 +7,7 @@ const AddressInputReadOnly = ({ address }: { address: string }): ReactElement =>
   return (
     <div className={css.input} data-testid="address-book-recipient">
       <InputAdornment position="start">
-        <Typography
-          variant="body2"
-          component="div"
-          sx={{
-            width: 1,
-          }}
-        >
+        <Typography variant="body2" component="div" width={1}>
           <EthHashInfo address={address} shortAddress={false} copyAddress={false} />
         </Typography>
       </InputAdornment>
diff --git a/src/components/common/BuyCryptoButton/index.tsx b/src/components/common/BuyCryptoButton/index.tsx
index 664ef7341c..2694e78a14 100644
--- a/src/components/common/BuyCryptoButton/index.tsx
+++ b/src/components/common/BuyCryptoButton/index.tsx
@@ -37,15 +37,7 @@ const buttonStyles = {
 const BuyCryptoOption = ({ name, children }: { name: string; children: ReactNode }) => {
   return (
     <ButtonBase className={css.button}>
-      <Typography
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          fontWeight: 'bold',
-          fontSize: '18px',
-          gap: 1,
-        }}
-      >
+      <Typography display="flex" alignItems="center" fontWeight="bold" fontSize="18px" gap={1}>
         {children}
         {name}
       </Typography>
@@ -57,11 +49,7 @@ const BuyCryptoOption = ({ name, children }: { name: string; children: ReactNode
 const _BuyCryptoOptions = ({ rampLink }: { rampLink?: LinkProps['href'] }) => {
   if (rampLink) {
     return (
-      <Box
-        sx={{
-          position: 'relative',
-        }}
-      >
+      <Box position="relative">
         <Track {...OVERVIEW_EVENTS.BUY_CRYPTO_BUTTON} label="onboarding">
           <Link href={rampLink} passHref>
             <BuyCryptoOption name="Ramp">
diff --git a/src/components/common/ChainIndicator/index.tsx b/src/components/common/ChainIndicator/index.tsx
index 4178a3f15f..57c9fa0a94 100644
--- a/src/components/common/ChainIndicator/index.tsx
+++ b/src/components/common/ChainIndicator/index.tsx
@@ -84,13 +84,7 @@ const ChainIndicator = ({
         <Stack>
           <span className={css.name}>{chainConfig.chainName}</span>
           {fiatValue && (
-            <Typography
-              sx={{
-                fontWeight: 700,
-                textAlign: 'left',
-                fontSize: '14px',
-              }}
-            >
+            <Typography fontWeight={700} textAlign="left" fontSize="14px">
               <FiatValue value={fiatValue} />
             </Typography>
           )}
diff --git a/src/components/common/Chip/index.tsx b/src/components/common/Chip/index.tsx
index 07fbb82006..f87237f242 100644
--- a/src/components/common/Chip/index.tsx
+++ b/src/components/common/Chip/index.tsx
@@ -17,14 +17,12 @@ export function Chip({ sx, label = 'New' }: Props) {
       label={
         <Typography
           variant="caption"
+          fontWeight="bold"
+          display="flex"
+          alignItems="center"
+          gap={1}
+          letterSpacing="1px"
           component="span"
-          sx={{
-            fontWeight: 'bold',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
-            letterSpacing: '1px',
-          }}
         >
           {label}
         </Typography>
diff --git a/src/components/common/ConnectWallet/AccountCenter.tsx b/src/components/common/ConnectWallet/AccountCenter.tsx
index 985de7d111..b625c5c5c1 100644
--- a/src/components/common/ConnectWallet/AccountCenter.tsx
+++ b/src/components/common/ConnectWallet/AccountCenter.tsx
@@ -35,18 +35,12 @@ export const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         <Box className={css.buttonContainer}>
           <WalletOverview wallet={wallet} balance={balance} showBalance />
 
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-              marginLeft: 'auto',
-            }}
-          >
+          <Box display="flex" alignItems="center" justifyContent="flex-end" ml="auto">
             {open ? <ExpandLessIcon color="border" /> : <ExpandMoreIcon color="border" />}
           </Box>
         </Box>
       </ButtonBase>
+
       <Popover
         id={id}
         open={open}
diff --git a/src/components/common/CopyAddressButton/index.tsx b/src/components/common/CopyAddressButton/index.tsx
index 0b6f8e3efe..83a378fa73 100644
--- a/src/components/common/CopyAddressButton/index.tsx
+++ b/src/components/common/CopyAddressButton/index.tsx
@@ -22,13 +22,7 @@ const CopyAddressButton = ({
   const checksummedAddress = checksumAddress(address)
 
   const dialogContent = trusted ? undefined : (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 2,
-      }}
-    >
+    <Box display="flex" flexDirection="column" gap={2}>
       <EthHashInfo
         address={checksummedAddress}
         shortAddress={false}
diff --git a/src/components/common/CopyTooltip/ConfirmCopyModal.tsx b/src/components/common/CopyTooltip/ConfirmCopyModal.tsx
index dd21436a0c..d659346f01 100644
--- a/src/components/common/CopyTooltip/ConfirmCopyModal.tsx
+++ b/src/components/common/CopyTooltip/ConfirmCopyModal.tsx
@@ -35,22 +35,9 @@ const ConfirmCopyModal = ({ open, onClose, onCopy, children }: ConfirmCopyModalP
   return (
     <Dialog open={open} onClose={onClose}>
       <DialogTitle>
-        <Box
-          data-testid="untrusted-token-warning"
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 1,
-          }}
-        >
+        <Box data-testid="untrusted-token-warning" display="flex" flexDirection="row" alignItems="center" gap={1}>
           <SvgIcon component={WarningIcon} inheritViewBox color="warning" sx={{ mb: -0.4 }} />
-          <Typography
-            variant="h6"
-            sx={{
-              fontWeight: 700,
-            }}
-          >
+          <Typography variant="h6" fontWeight={700}>
             Before you copy
           </Typography>
           <IconButton aria-label="close" onClick={onClose} sx={{ marginLeft: 'auto' }}>
@@ -62,12 +49,7 @@ const ConfirmCopyModal = ({ open, onClose, onCopy, children }: ConfirmCopyModalP
       <DialogContent>{children}</DialogContent>
       <Divider />
       <DialogActions sx={{ padding: 3 }}>
-        <Box
-          className={css.dialogActions}
-          sx={{
-            gap: 1,
-          }}
-        >
+        <Box className={css.dialogActions} gap={1}>
           <Track {...TX_LIST_EVENTS.COPY_WARNING_PROCEED}>
             <Button size="small" variant="text" color="primary" onClick={onCopy} fullWidth>
               Proceed and copy
diff --git a/src/components/common/Countdown/index.tsx b/src/components/common/Countdown/index.tsx
index 67bd8f21cb..de4b9a37ca 100644
--- a/src/components/common/Countdown/index.tsx
+++ b/src/components/common/Countdown/index.tsx
@@ -22,12 +22,7 @@ export function Countdown({ seconds }: { seconds: number }): ReactElement | null
 
   if (seconds <= 60) {
     return (
-      <Typography
-        component="span"
-        sx={{
-          fontWeight: 700,
-        }}
-      >
+      <Typography fontWeight={700} component="span">
         {'< 1 min'}
       </Typography>
     )
@@ -36,12 +31,7 @@ export function Countdown({ seconds }: { seconds: number }): ReactElement | null
   const { days, hours, minutes } = _getCountdown(seconds)
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        gap: 1,
-      }}
-    >
+    <Box display="flex" gap={1}>
       <TimeLeft value={days} unit="day" />
       <TimeLeft value={hours} unit="hr" />
       <TimeLeft value={minutes} unit="min" />
@@ -56,20 +46,10 @@ function TimeLeft({ value, unit }: { value: number; unit: string }): ReactElemen
 
   return (
     <div>
-      <Typography
-        component="span"
-        sx={{
-          fontWeight: 700,
-        }}
-      >
+      <Typography fontWeight={700} component="span">
         {value}
       </Typography>{' '}
-      <Typography
-        component="span"
-        sx={{
-          color: 'primary.light',
-        }}
-      >
+      <Typography color="primary.light" component="span">
         {value === 1 ? unit : `${unit}s`}
       </Typography>
     </div>
diff --git a/src/components/common/EnhancedTable/index.tsx b/src/components/common/EnhancedTable/index.tsx
index 72086bed01..1be2541188 100644
--- a/src/components/common/EnhancedTable/index.tsx
+++ b/src/components/common/EnhancedTable/index.tsx
@@ -177,6 +177,7 @@ function EnhancedTable({ rows, headCells, mobileVariant }: EnhancedTableProps) {
           </TableBody>
         </Table>
       </TableContainer>
+
       {rows.length > pagedRows.length && (
         <TablePagination
           rowsPerPageOptions={pageSizes}
diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
index bd1d15b8c7..39cb29ae58 100644
--- a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
+++ b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
@@ -81,28 +81,11 @@ const SrcEthHashInfo = ({
           )}
         </div>
       )}
-      <Box
-        className={onlyName ? css.inline : undefined}
-        sx={{
-          overflow: 'hidden',
-          gap: 0.5,
-        }}
-      >
+
+      <Box overflow="hidden" className={onlyName ? css.inline : undefined} gap={0.5}>
         {name && (
-          <Box
-            title={name}
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 0.5,
-            }}
-          >
-            <Box
-              sx={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }}
-            >
+          <Box title={name} display="flex" alignItems="center" gap={0.5}>
+            <Box overflow="hidden" textOverflow="ellipsis">
               {name}
             </Box>
 
@@ -118,14 +101,7 @@ const SrcEthHashInfo = ({
 
         <div className={classnames(css.addressContainer, { [css.inline]: onlyName })}>
           {(!onlyName || !name) && (
-            <Box
-              sx={{
-                fontWeight: 'inherit',
-                fontSize: 'inherit',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }}
-            >
+            <Box fontWeight="inherit" fontSize="inherit" overflow="hidden" textOverflow="ellipsis">
               {copyAddress ? (
                 <CopyAddressButton prefix={prefix} address={address} copyPrefix={shouldCopyPrefix} trusted={trusted}>
                   {addressElement}
@@ -141,11 +117,7 @@ const SrcEthHashInfo = ({
           )}
 
           {hasExplorer && ExplorerButtonProps && (
-            <Box
-              sx={{
-                color: 'border.main',
-              }}
-            >
+            <Box color="border.main">
               <ExplorerButton {...ExplorerButtonProps} onClick={stopPropagation} />
             </Box>
           )}
diff --git a/src/components/common/ExplorerButton/index.tsx b/src/components/common/ExplorerButton/index.tsx
index d14c7e7df1..4bc6db7373 100644
--- a/src/components/common/ExplorerButton/index.tsx
+++ b/src/components/common/ExplorerButton/index.tsx
@@ -44,20 +44,8 @@ const ExplorerButton = ({
       href={href}
       onClick={onClick}
     >
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <Typography
-          noWrap
-          sx={{
-            fontWeight: 700,
-            fontSize: 'small',
-            mr: 'var(--space-1)',
-          }}
-        >
+      <Box display="flex" alignItems="center">
+        <Typography fontWeight={700} fontSize="small" mr="var(--space-1)" noWrap>
           View on explorer
         </Typography>
 
diff --git a/src/components/common/FiatValue/index.tsx b/src/components/common/FiatValue/index.tsx
index e7fb2daf3b..d934a7b284 100644
--- a/src/components/common/FiatValue/index.tsx
+++ b/src/components/common/FiatValue/index.tsx
@@ -38,14 +38,7 @@ const FiatValue = ({
           <>
             {whole}
             {decimals && (
-              <Typography
-                component="span"
-                sx={{
-                  color: 'text.secondary',
-                  fontSize: 'inherit',
-                  fontWeight: 'inherit',
-                }}
-              >
+              <Typography component="span" color="text.secondary" fontSize="inherit" fontWeight="inherit">
                 {decimals}
               </Typography>
             )}
diff --git a/src/components/common/LegalDisclaimerContent/index.tsx b/src/components/common/LegalDisclaimerContent/index.tsx
index 1eb9b8c7cc..0fed913898 100644
--- a/src/components/common/LegalDisclaimerContent/index.tsx
+++ b/src/components/common/LegalDisclaimerContent/index.tsx
@@ -13,32 +13,18 @@ const LegalDisclaimerContent = ({
 }): ReactElement => (
   <div className={css.disclaimerContainer}>
     {withTitle && (
-      <Typography
-        variant="h3"
-        sx={{
-          fontWeight: 700,
-          my: 3,
-        }}
-      >
+      <Typography variant="h3" fontWeight={700} my={3}>
         Disclaimer
       </Typography>
     )}
     <div className={css.disclaimerInner}>
-      <Typography
-        sx={{
-          mb: 4,
-        }}
-      >
+      <Typography mb={4}>
         You are now accessing {isSafeApps ? 'third-party apps' : 'a third-party app'}, which we do not own, control,
         maintain or audit. We are not liable for any loss you may suffer in connection with interacting with the{' '}
         {isSafeApps ? 'apps' : 'app'}, which is at your own risk.
       </Typography>
 
-      <Typography
-        sx={{
-          mb: 4,
-        }}
-      >
+      <Typography mb={4}>
         You must read our Terms, which contain more detailed provisions binding on you relating to the{' '}
         {isSafeApps ? 'apps' : 'app'}.
       </Typography>
diff --git a/src/components/common/Mui/index.test.tsx b/src/components/common/Mui/index.test.tsx
new file mode 100644
index 0000000000..aaa6f4030f
--- /dev/null
+++ b/src/components/common/Mui/index.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { render } from '@/tests/test-utils'
+import { Box } from './index'
+
+jest.mock('@mui/material/index.js', () => ({}))
+
+describe('Box Component', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<Box />)
+    expect(container).toBeInTheDocument()
+  })
+
+  it('applies margin and padding props correctly', () => {
+    const { getByTestId } = render(<Box m={2} p={3} data-testid="box" />)
+    const box = getByTestId('box')
+    expect(box).toHaveStyle('margin: 16px')
+    expect(box).toHaveStyle('padding: 24px')
+  })
+
+  it('applies flex props correctly', () => {
+    const { getByTestId } = render(<Box display="flex" flexDirection="column" data-testid="box" />)
+    const box = getByTestId('box')
+    expect(box).toHaveStyle('display: flex')
+    expect(box).toHaveStyle('flex-direction: column')
+  })
+
+  it('applies text alignment props correctly', () => {
+    const { getByTestId } = render(<Box color="primary.main" textAlign="center" data-testid="box" />)
+    const box = getByTestId('box')
+    expect(box).toHaveStyle('text-align: center')
+  })
+})
diff --git a/src/components/common/Mui/index.tsx b/src/components/common/Mui/index.tsx
new file mode 100644
index 0000000000..1c1189f084
--- /dev/null
+++ b/src/components/common/Mui/index.tsx
@@ -0,0 +1,182 @@
+import { default as MuiBox, type BoxProps } from '@mui/material/Box'
+import { default as MuiTypograpahy, type TypographyProps } from '@mui/material/Typography'
+
+export * from '@mui/material/index'
+
+export const Box = ({
+  m,
+  mt,
+  mr,
+  mb,
+  ml,
+  mx,
+  my,
+  p,
+  pt,
+  pr,
+  pb,
+  pl,
+  px,
+  py,
+  width,
+  height,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  display,
+  flex,
+  flexWrap,
+  flexGrow,
+  flexShrink,
+  flexDirection,
+  alignItems,
+  justifyItems,
+  alignContent,
+  justifyContent,
+  gap,
+  color,
+  textAlign,
+  position,
+  overflow,
+  textOverflow,
+  border,
+  borderColor,
+  borderRadius,
+  borderBottom,
+  bgcolor,
+  gridArea,
+  lineHeight,
+  ...props
+}: BoxProps['sx'] & BoxProps) => {
+  return (
+    <MuiBox
+      sx={{
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py,
+        width,
+        height,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+        display,
+        flex,
+        flexWrap,
+        flexGrow,
+        flexShrink,
+        flexDirection,
+        alignItems,
+        justifyItems,
+        alignContent,
+        justifyContent,
+        gap,
+        color,
+        textAlign,
+        position,
+        overflow,
+        textOverflow,
+        border,
+        borderColor,
+        borderRadius,
+        borderBottom,
+        bgcolor,
+        gridArea,
+        lineHeight,
+      }}
+      {...props}
+    />
+  )
+}
+
+export const Typography = ({
+  m,
+  mt,
+  mr,
+  mb,
+  ml,
+  mx,
+  my,
+  p,
+  pt,
+  pr,
+  pb,
+  pl,
+  px,
+  py,
+  display,
+  flex,
+  flexWrap,
+  flexGrow,
+  flexShrink,
+  flexDirection,
+  alignItems,
+  justifyItems,
+  alignContent,
+  justifyContent,
+  gap,
+  color,
+  textAlign,
+  fontSize,
+  fontWeight,
+  fontStyle,
+  lineHeight,
+  letterSpacing,
+  whiteSpace,
+  width,
+  ...props
+}: TypographyProps['sx'] & TypographyProps) => {
+  return (
+    <MuiTypograpahy
+      sx={{
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py,
+        display,
+        flex,
+        flexWrap,
+        flexGrow,
+        flexShrink,
+        flexDirection,
+        alignItems,
+        justifyItems,
+        alignContent,
+        justifyContent,
+        gap,
+        color,
+        textAlign,
+        fontSize,
+        fontWeight,
+        fontStyle,
+        lineHeight,
+        letterSpacing,
+        whiteSpace,
+        width,
+      }}
+      {...props}
+    />
+  )
+}
diff --git a/src/components/common/Notifications/index.tsx b/src/components/common/Notifications/index.tsx
index 6c90f8691f..6cf42948f4 100644
--- a/src/components/common/Notifications/index.tsx
+++ b/src/components/common/Notifications/index.tsx
@@ -75,12 +75,7 @@ const Toast = ({
     <Snackbar open onClose={handleClose} sx={toastStyle} autoHideDuration={autoHideDuration}>
       <Alert severity={variant} onClose={handleClose} elevation={3} sx={{ width: '340px' }}>
         {title && (
-          <Typography
-            variant="body2"
-            sx={{
-              fontWeight: '700',
-            }}
-          >
+          <Typography variant="body2" fontWeight="700">
             {title}
           </Typography>
         )}
diff --git a/src/components/common/OnboardingTooltip/index.tsx b/src/components/common/OnboardingTooltip/index.tsx
index 3d2bdf88c9..459ff786a9 100644
--- a/src/components/common/OnboardingTooltip/index.tsx
+++ b/src/components/common/OnboardingTooltip/index.tsx
@@ -39,14 +39,7 @@ export const OnboardingTooltip = ({
       placement={placement}
       arrow
       title={
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
-            padding: 1,
-          }}
-        >
+        <Box display="flex" alignItems="center" gap={1} p={1}>
           <SvgIcon component={InfoIcon} inheritViewBox fontSize="small" />
           <div style={{ minWidth: '150px' }}>{text}</div>
           <Button
diff --git a/src/components/common/PagePlaceholder/index.tsx b/src/components/common/PagePlaceholder/index.tsx
index 2ab9fb124e..94491bda59 100644
--- a/src/components/common/PagePlaceholder/index.tsx
+++ b/src/components/common/PagePlaceholder/index.tsx
@@ -12,19 +12,15 @@ const PagePlaceholder = ({ img, text, children }: PagePlaceholderProps): ReactEl
   return (
     <div className={css.container}>
       {img}
+
       {typeof text === 'string' ? (
-        <Typography
-          variant="body1"
-          sx={{
-            color: 'primary.light',
-            mt: 2,
-          }}
-        >
+        <Typography variant="body1" color="primary.light" mt={2}>
           {text}
         </Typography>
       ) : (
         text
       )}
+
       {children}
     </div>
   )
diff --git a/src/components/common/PaginatedTxns/index.tsx b/src/components/common/PaginatedTxns/index.tsx
index d5ba3f0b98..9ecf0284e9 100644
--- a/src/components/common/PaginatedTxns/index.tsx
+++ b/src/components/common/PaginatedTxns/index.tsx
@@ -45,30 +45,22 @@ const TxPage = ({
   return (
     <>
       {isFirstPage && filter && page && (
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-            pt: [2, 0],
-            pb: 3,
-          }}
-        >
+        <Box display="flex" flexDirection="column" alignItems="flex-end" pt={[2, 0]} pb={3}>
           {getFilterResultCount(filter, page)}
         </Box>
       )}
+
       {page && page.results.length > 0 && <TxList items={page.results} />}
+
       {isQueue && page?.results.length === 0 && recoveryQueue.length === 0 && !hasPending && <NoQueuedTxns />}
+
       {error && <ErrorMessage>Error loading transactions</ErrorMessage>}
+
       {/* No skeletons for pending as they are shown above the queue which has them */}
       {loading && !hasPending && <SkeletonTxList />}
+
       {page?.next && onNextPage && (
-        <Box
-          sx={{
-            my: 4,
-            textAlign: 'center',
-          }}
-        >
+        <Box my={4} textAlign="center">
           <InfiniteScroll onLoadMore={() => onNextPage(page.next!)} />
         </Box>
       )}
@@ -92,11 +84,7 @@ const PaginatedTxns = ({ useTxns }: { useTxns: typeof useTxHistory | typeof useT
   }
 
   return (
-    <Box
-      sx={{
-        position: 'relative',
-      }}
-    >
+    <Box position="relative">
       {pages.map((pageUrl, index) => (
         <TxPage
           key={pageUrl}
diff --git a/src/components/common/SafeTokenWidget/index.tsx b/src/components/common/SafeTokenWidget/index.tsx
index 9733893d91..0fddc5e9d0 100644
--- a/src/components/common/SafeTokenWidget/index.tsx
+++ b/src/components/common/SafeTokenWidget/index.tsx
@@ -123,11 +123,9 @@ const SafeTokenWidget = () => {
                 <Typography
                   component="div"
                   variant="body2"
+                  lineHeight="20px"
                   // Badge does not accept className so must be here
                   className={css.allocationBadge}
-                  sx={{
-                    lineHeight: '20px',
-                  }}
                 >
                   {ownGlobalRankLoading ? (
                     <Skeleton width="16px" animation="wave" />
diff --git a/src/components/common/SpendingLimitLabel/index.tsx b/src/components/common/SpendingLimitLabel/index.tsx
index 9a1448a589..eecaba68b7 100644
--- a/src/components/common/SpendingLimitLabel/index.tsx
+++ b/src/components/common/SpendingLimitLabel/index.tsx
@@ -9,17 +9,7 @@ const SpendingLimitLabel = ({
   ...rest
 }: { label: string | ReactElement; isOneTime?: boolean } & BoxProps) => {
   return (
-    <Box
-      {...rest}
-      sx={[
-        {
-          display: 'flex',
-          alignItems: 'center',
-          gap: '4px',
-        },
-        ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx]),
-      ]}
-    >
+    <Box display="flex" alignItems="center" gap="4px" {...rest}>
       {!isOneTime && <SvgIcon component={SpeedIcon} inheritViewBox color="border" fontSize="medium" />}
       {typeof label === 'string' ? <Typography>{label}</Typography> : label}
     </Box>
diff --git a/src/components/common/TokenExplorerLink/index.tsx b/src/components/common/TokenExplorerLink/index.tsx
index b76c48ec27..b22951d81c 100644
--- a/src/components/common/TokenExplorerLink/index.tsx
+++ b/src/components/common/TokenExplorerLink/index.tsx
@@ -11,12 +11,7 @@ const ExplorerLink = ({ address }: { address: string }): ReactElement | null =>
   if (!link) return null
 
   return (
-    <Typography
-      component="span"
-      sx={{
-        color: 'border.main',
-      }}
-    >
+    <Typography component="span" color="border.main">
       <ExplorerButton href={link.href} title={link.title} />
     </Typography>
   )
diff --git a/src/components/common/WalletInfo/index.tsx b/src/components/common/WalletInfo/index.tsx
index eeea34448e..23c1af8cbd 100644
--- a/src/components/common/WalletInfo/index.tsx
+++ b/src/components/common/WalletInfo/index.tsx
@@ -42,12 +42,7 @@ export const WalletInfo = ({ wallet, balance, currentChainId, onboard, addressBo
 
   return (
     <>
-      <Box
-        sx={{
-          display: 'flex',
-          gap: '12px',
-        }}
-      >
+      <Box display="flex" gap="12px">
         <WalletIdenticon wallet={wallet} size={36} />
 
         <Typography variant="body2" className={css.address} component="div">
@@ -62,44 +57,25 @@ export const WalletInfo = ({ wallet, balance, currentChainId, onboard, addressBo
           />
         </Typography>
       </Box>
+
       <Box className={css.rowContainer}>
         <Box className={css.row}>
-          <Typography
-            variant="body2"
-            sx={{
-              color: 'primary.light',
-            }}
-          >
+          <Typography variant="body2" color="primary.light">
             Wallet
           </Typography>
           <Typography variant="body2">{wallet.label}</Typography>
         </Box>
 
         <Box className={css.row}>
-          <Typography
-            variant="body2"
-            sx={{
-              color: 'primary.light',
-            }}
-          >
+          <Typography variant="body2" color="primary.light">
             Balance
           </Typography>
-          <Typography
-            variant="body2"
-            sx={{
-              textAlign: 'right',
-            }}
-          >
+          <Typography variant="body2" textAlign="right">
             <WalletBalance balance={balance} />
 
             {currentChainId !== chainInfo?.chainId && (
               <>
-                <Typography
-                  variant="body2"
-                  sx={{
-                    color: 'primary.light',
-                  }}
-                >
+                <Typography variant="body2" color="primary.light">
                   ({chainInfo?.chainName || 'Unknown chain'})
                 </Typography>
               </>
@@ -107,14 +83,8 @@ export const WalletInfo = ({ wallet, balance, currentChainId, onboard, addressBo
           </Typography>
         </Box>
       </Box>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 2,
-          width: 1,
-        }}
-      >
+
+      <Box display="flex" flexDirection="column" gap={2} width={1}>
         <ChainSwitcher fullWidth />
 
         <Button variant="contained" size="small" onClick={handleSwitchWallet} fullWidth>
diff --git a/src/components/common/WalletOverview/index.tsx b/src/components/common/WalletOverview/index.tsx
index 7a6a8887f2..f60bfc830c 100644
--- a/src/components/common/WalletOverview/index.tsx
+++ b/src/components/common/WalletOverview/index.tsx
@@ -40,6 +40,7 @@ const WalletOverview = ({
   return (
     <Box className={css.container}>
       <WalletIdenticon wallet={wallet} />
+
       <Box className={css.walletDetails}>
         <Typography variant="body2" component="div">
           {wallet.ens ? (
@@ -57,14 +58,7 @@ const WalletOverview = ({
         </Typography>
 
         {showBalance && (
-          <Typography
-            variant="caption"
-            component="div"
-            sx={{
-              fontWeight: 'bold',
-              display: { xs: 'none', sm: 'block' },
-            }}
-          >
+          <Typography variant="caption" component="div" fontWeight="bold" display={{ xs: 'none', sm: 'block' }}>
             <WalletBalance balance={balance} />
           </Typography>
         )}
diff --git a/src/components/common/WidgetDisclaimer/index.tsx b/src/components/common/WidgetDisclaimer/index.tsx
index a7cf99e66a..3c5969d784 100644
--- a/src/components/common/WidgetDisclaimer/index.tsx
+++ b/src/components/common/WidgetDisclaimer/index.tsx
@@ -11,30 +11,17 @@ const linkSx = {
 const WidgetDisclaimer = ({ widgetName }: { widgetName: string }) => (
   <div className={css.disclaimerContainer}>
     <div className={css.disclaimerInner}>
-      <Typography
-        sx={{
-          mb: 4,
-          mt: 4,
-        }}
-      >
+      <Typography mb={4} mt={4}>
         You are now accessing a third party widget.
       </Typography>
 
-      <Typography
-        sx={{
-          mb: 4,
-        }}
-      >
+      <Typography mb={4}>
         Please note that we do not own, control, maintain or audit the {widgetName}. Use of the widget is subject to
         third party terms & conditions. We are not liable for any loss you may suffer in connection with interacting
         with the widget, which is at your own risk.
       </Typography>
 
-      <Typography
-        sx={{
-          mb: 4,
-        }}
-      >
+      <Typography mb={4}>
         Our{' '}
         <ExternalLink href={AppRoutes.terms} sx={linkSx}>
           terms
diff --git a/src/components/common/icons/CircularIcon/index.tsx b/src/components/common/icons/CircularIcon/index.tsx
index d6f67337d5..527f103401 100644
--- a/src/components/common/icons/CircularIcon/index.tsx
+++ b/src/components/common/icons/CircularIcon/index.tsx
@@ -24,13 +24,7 @@ const CircularIcon = ({
       }}
       className={css.badge}
     >
-      <Box
-        className={css.circle}
-        sx={{
-          width: size,
-          height: size,
-        }}
-      >
+      <Box className={css.circle} width={size} height={size}>
         <SvgIcon
           component={icon}
           inheritViewBox
diff --git a/src/components/dashboard/Assets/index.tsx b/src/components/dashboard/Assets/index.tsx
index 012765ff6e..12aca61614 100644
--- a/src/components/dashboard/Assets/index.tsx
+++ b/src/components/dashboard/Assets/index.tsx
@@ -29,13 +29,7 @@ const AssetsDummy = () => (
 
 const NoAssets = () => (
   <Paper elevation={0} sx={{ p: 5 }}>
-    <Typography
-      variant="h3"
-      sx={{
-        fontWeight: 'bold',
-        mb: 1,
-      }}
-    >
+    <Typography variant="h3" fontWeight="bold" mb={1}>
       Add funds to get started
     </Typography>
 
@@ -43,12 +37,7 @@ const NoAssets = () => (
       Add funds directly from your bank account or copy your address to send tokens from a different account.
     </Typography>
 
-    <Box
-      sx={{
-        display: 'flex',
-        mt: 2,
-      }}
-    >
+    <Box display="flex" mt={2}>
       <BuyCryptoButton />
     </Box>
   </Paper>
@@ -56,11 +45,7 @@ const NoAssets = () => (
 
 const AssetRow = ({ item, showSwap }: { item: SafeBalanceResponse['items'][number]; showSwap?: boolean }) => (
   <Box className={css.container} key={item.tokenInfo.address}>
-    <Box
-      sx={{
-        flex: 1,
-      }}
-    >
+    <Box flex={1}>
       <TokenAmount
         value={item.balance}
         decimals={item.tokenInfo.decimals}
@@ -69,22 +54,11 @@ const AssetRow = ({ item, showSwap }: { item: SafeBalanceResponse['items'][numbe
       />
     </Box>
 
-    <Box
-      sx={{
-        flex: 1,
-        display: ['none', 'block'],
-        textAlign: 'right',
-        pr: 4,
-      }}
-    >
+    <Box flex={1} display={['none', 'block']} textAlign="right" pr={4}>
       <FiatValue value={item.fiatBalance} />
     </Box>
 
-    <Box
-      sx={{
-        my: -0.7,
-      }}
-    >
+    <Box my={-0.7}>
       {showSwap ? (
         <SwapButton tokenInfo={item.tokenInfo} amount="0" trackingLabel={SWAP_LABELS.dashboard_assets} />
       ) : (
@@ -98,13 +72,7 @@ const AssetList = ({ items }: { items: SafeBalanceResponse['items'] }) => {
   const isSwapFeatureEnabled = useIsSwapFeatureEnabled()
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1,
-      }}
-    >
+    <Box display="flex" flexDirection="column" gap={1}>
       {items.map((item) => (
         <AssetRow item={item} key={item.tokenInfo.address} showSwap={isSwapFeatureEnabled} />
       ))}
@@ -135,19 +103,13 @@ const AssetsWidget = () => {
   return (
     <WidgetContainer data-testid="assets-widget">
       <div className={css.title}>
-        <Typography
-          component="h2"
-          variant="subtitle1"
-          sx={{
-            fontWeight: 700,
-            mb: 2,
-          }}
-        >
+        <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
           Top assets
         </Typography>
 
         {items.length > 0 && <ViewAllLink url={viewAllUrl} text={`View all (${visibleAssets.length})`} />}
       </div>
+
       <WidgetBody>
         {loading ? <AssetsDummy /> : items.length > 0 ? <AssetList items={items} /> : <NoAssets />}
       </WidgetBody>
diff --git a/src/components/dashboard/PendingTxs/PendingRecoveryListItem.tsx b/src/components/dashboard/PendingTxs/PendingRecoveryListItem.tsx
index b33556ee3e..f1214d107a 100644
--- a/src/components/dashboard/PendingTxs/PendingRecoveryListItem.tsx
+++ b/src/components/dashboard/PendingTxs/PendingRecoveryListItem.tsx
@@ -27,17 +27,8 @@ function PendingRecoveryListItem({ transaction }: { transaction: RecoveryQueueIt
 
   return (
     <Link href={url} passHref>
-      <Box
-        className={css.container}
-        sx={{
-          minHeight: 50,
-        }}
-      >
-        <Box
-          sx={{
-            flex: 1,
-          }}
-        >
+      <Box className={css.container} sx={{ minHeight: 50 }}>
+        <Box flex={1}>
           <RecoveryType isMalicious={isMalicious} />
         </Box>
 
diff --git a/src/components/dashboard/PendingTxs/PendingTxListItem.tsx b/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
index 0089a3b049..c3e098ed3e 100644
--- a/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
+++ b/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
@@ -35,41 +35,20 @@ const PendingTx = ({ transaction }: PendingTxType): ReactElement => {
     <NextLink data-testid="tx-pending-item" href={url} passHref>
       <Box className={css.container}>
         <Box className={css.innerContainer}>
-          <Box
-            sx={{
-              minWidth: 30,
-            }}
-          >
+          <Box sx={{ minWidth: 30 }}>
             {isMultisigExecutionInfo(transaction.executionInfo) && transaction.executionInfo.nonce}
           </Box>
 
-          <Box
-            sx={{
-              minWidth: 62,
-            }}
-          >
+          <Box sx={{ minWidth: 62 }}>
             <TxType tx={transaction} />
           </Box>
 
-          <Box
-            sx={{
-              minWidth: 0,
-              flexGrow: 1,
-            }}
-          >
+          <Box sx={{ minWidth: 0, flexGrow: 1 }}>
             <TxInfo info={transaction.txInfo} />
           </Box>
         </Box>
 
-        <Box
-          sx={{
-            alignSelf: 'flex-start',
-            display: 'flex',
-            flexWrap: 'nowrap',
-            alignItems: 'center',
-            gap: 1.5,
-          }}
-        >
+        <Box alignSelf="flex-start" display="flex" flexWrap="nowrap" alignItems="center" gap={1.5}>
           {isMultisigExecutionInfo(transaction.executionInfo) && (
             <TxConfirmations
               submittedConfirmations={transaction.executionInfo.confirmationsSubmitted}
diff --git a/src/components/dashboard/PendingTxs/PendingTxsList.tsx b/src/components/dashboard/PendingTxs/PendingTxsList.tsx
index 23cff330cf..ce6e96bc1a 100644
--- a/src/components/dashboard/PendingTxs/PendingTxsList.tsx
+++ b/src/components/dashboard/PendingTxs/PendingTxsList.tsx
@@ -24,25 +24,10 @@ const MAX_TXS = 4
 const EmptyState = () => {
   return (
     <Card>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100%',
-          gap: 2,
-        }}
-      >
+      <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" height="100%" gap={2}>
         <NoTransactionsIcon data-testid="no-tx-icon" />
 
-        <Typography
-          data-testid="no-tx-text"
-          variant="body1"
-          sx={{
-            color: 'primary.light',
-          }}
-        >
+        <Typography data-testid="no-tx-text" variant="body1" color="primary.light">
           This Safe Account has no queued transactions
         </Typography>
       </Box>
@@ -120,19 +105,13 @@ const PendingTxsList = (): ReactElement | null => {
   return (
     <WidgetContainer data-testid="pending-tx-widget">
       <div className={css.title}>
-        <Typography
-          component="h2"
-          variant="subtitle1"
-          sx={{
-            fontWeight: 700,
-            mb: 2,
-          }}
-        >
+        <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
           Pending transactions
         </Typography>
 
         {totalTxs > 0 && <ViewAllLink url={queueUrl} />}
       </div>
+
       <WidgetBody>
         {loading ? (
           <LoadingState />
diff --git a/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx b/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx
index a8cd748020..ce0236022f 100644
--- a/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx
+++ b/src/components/dashboard/SafeAppsDashboardSection/SafeAppsDashboardSection.tsx
@@ -20,16 +20,10 @@ const SafeAppsDashboardSection = () => {
 
   return (
     <WidgetContainer>
-      <Typography
-        component="h2"
-        variant="subtitle1"
-        sx={{
-          fontWeight: 700,
-          mb: 2,
-        }}
-      >
+      <Typography component="h2" variant="subtitle1" fontWeight={700} mb={2}>
         Safe Apps
       </Typography>
+
       <Grid container spacing={3}>
         {rankedSafeApps.map((rankedSafeApp) => (
           <Grid key={rankedSafeApp.id} item xs={12} sm={6} md={4} xl={4}>
@@ -51,6 +45,7 @@ const SafeAppsDashboardSection = () => {
           <ExploreSafeAppsCard />
         </Grid>
       </Grid>
+
       <SafeAppPreviewDrawer
         isOpen={isPreviewDrawerOpen}
         safeApp={previewDrawerApp}
diff --git a/src/components/new-safe/CardStepper/index.tsx b/src/components/new-safe/CardStepper/index.tsx
index 59dca1bc14..c58a781c00 100644
--- a/src/components/new-safe/CardStepper/index.tsx
+++ b/src/components/new-safe/CardStepper/index.tsx
@@ -15,12 +15,7 @@ export function CardStepper<StepperData>(props: TxStepperProps<StepperData>) {
 
   return (
     <Card className={css.card}>
-      <Box
-        className={css.progress}
-        sx={{
-          color: progressColor,
-        }}
-      >
+      <Box className={css.progress} color={progressColor}>
         <LinearProgress color="inherit" variant="determinate" value={Math.min(progress, 100)} />
       </Box>
       {currentStep.title && (
diff --git a/src/components/new-safe/create/OverviewWidget/index.tsx b/src/components/new-safe/create/OverviewWidget/index.tsx
index c3f6223c90..a6119321e9 100644
--- a/src/components/new-safe/create/OverviewWidget/index.tsx
+++ b/src/components/new-safe/create/OverviewWidget/index.tsx
@@ -41,20 +41,8 @@ const OverviewWidget = ({ safeName, networks }: { safeName: string; networks: Ch
             </div>
           ))
         ) : (
-          <Box
-            sx={{
-              p: 2,
-            }}
-          >
-            <Typography
-              variant="body2"
-              sx={{
-                color: 'border.main',
-                textAlign: 'center',
-                width: 1,
-                mb: 1,
-              }}
-            >
+          <Box p={2}>
+            <Typography variant="body2" color="border.main" textAlign="center" width={1} mb={1}>
               Connect your wallet to continue
             </Typography>
             <ConnectWalletButton />
diff --git a/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx b/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx
index 829b386199..9c8dbc35b6 100644
--- a/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx
+++ b/src/components/new-safe/create/steps/AdvancedOptionsStep/index.tsx
@@ -115,12 +115,7 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
                 </span>
               </Tooltip>
             </Typography>
-            <Typography
-              variant="body2"
-              sx={{
-                mb: 2,
-              }}
-            >
+            <Typography variant="body2" mb={2}>
               Changes the used master copy and fallback handler of the Safe.
             </Typography>
             <Controller
@@ -156,12 +151,7 @@ const AdvancedOptionsStep = ({ onSubmit, onBack, data, setStep }: StepRenderProp
                 </span>
               </Tooltip>
             </Typography>
-            <Typography
-              variant="body2"
-              sx={{
-                mb: 2,
-              }}
-            >
+            <Typography variant="body2" mb={2}>
               Impacts the derived Safe address
             </Typography>
             <NumberField
diff --git a/src/components/new-safe/create/steps/SetNameStep/index.tsx b/src/components/new-safe/create/steps/SetNameStep/index.tsx
index 0611369a43..88df9c58c7 100644
--- a/src/components/new-safe/create/steps/SetNameStep/index.tsx
+++ b/src/components/new-safe/create/steps/SetNameStep/index.tsx
@@ -130,35 +130,16 @@ function SetNameStep({
             </Grid>
 
             <Grid xs={12} item>
-              <Typography
-                variant="h5"
-                sx={{
-                  fontWeight: 700,
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: 1,
-                  mt: 2,
-                }}
-              >
+              <Typography variant="h5" fontWeight={700} display="inline-flex" alignItems="center" gap={1} mt={2}>
                 Select Networks
               </Typography>
-              <Typography
-                variant="body2"
-                sx={{
-                  mb: 2,
-                }}
-              >
+              <Typography variant="body2" mb={2}>
                 Choose which networks you want your account to be active on. You can add more networks later.{' '}
               </Typography>
               <NetworkMultiSelector isAdvancedFlow={isAdvancedFlow} name={SetNameStepFields.networks} />
             </Grid>
           </Grid>
-          <Typography
-            variant="body2"
-            sx={{
-              mt: 2,
-            }}
-          >
+          <Typography variant="body2" mt={2}>
             By continuing, you agree to our{' '}
             <Link href={AppRoutes.terms} passHref legacyBehavior>
               <MUILink>terms of use</MUILink>
@@ -174,14 +155,7 @@ function SetNameStep({
         </Box>
         <Divider />
         <Box className={layoutCss.row}>
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              gap: 3,
-            }}
-          >
+          <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
             <Button data-testid="cancel-btn" variant="outlined" onClick={onCancel} size="small">
               Cancel
             </Button>
diff --git a/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx b/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx
index ee8d0eea2c..bf681f515d 100644
--- a/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx
+++ b/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx
@@ -63,46 +63,17 @@ const StatusMessage = ({
 
   return (
     <>
-      <Box
-        data-testid="safe-status-info"
-        sx={{
-          paddingX: 3,
-          mt: 3,
-        }}
-      >
-        <Box
-          sx={{
-            width: '160px',
-            height: '160px',
-            display: 'flex',
-            margin: 'auto',
-          }}
-        >
+      <Box data-testid="safe-status-info" px={3} mt={3}>
+        <Box width="160px" height="160px" display="flex" m="auto">
           {isError ? <FailedIcon /> : <LoadingSpinner status={spinnerStatus} />}
         </Box>
-        <Typography
-          variant="h3"
-          sx={{
-            marginTop: 2,
-            fontWeight: 700,
-          }}
-        >
+        <Typography variant="h3" mt={2} fontWeight={700}>
           {stepInfo.description}
         </Typography>
       </Box>
-      <Box
-        sx={{
-          maxWidth: 390,
-          margin: 'auto',
-        }}
-      >
+      <Box sx={{ maxWidth: 390, m: 'auto' }}>
         {stepInfo.instruction && (
-          <Typography
-            variant="body2"
-            sx={{
-              my: 2,
-            }}
-          >
+          <Typography variant="body2" my={2}>
             {stepInfo.instruction}
           </Typography>
         )}
diff --git a/src/components/new-safe/create/steps/StatusStep/StatusStep.tsx b/src/components/new-safe/create/steps/StatusStep/StatusStep.tsx
index c05b4ca778..56c2df1994 100644
--- a/src/components/new-safe/create/steps/StatusStep/StatusStep.tsx
+++ b/src/components/new-safe/create/steps/StatusStep/StatusStep.tsx
@@ -23,18 +23,13 @@ const StatusStep = ({
       icon={<SvgIcon component={Icon} className={css.icon} color={color} fontSize="small" />}
     >
       <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 2,
-          color: ({ palette }) => (isLoading ? palette.border.main : palette.text.primary),
-        }}
+        display="flex"
+        alignItems="center"
+        gap={2}
+        color={color}
+        sx={{ color: ({ palette }) => (isLoading ? palette.border.main : palette.text.primary) }}
       >
-        <Box
-          sx={{
-            flexShrink: 0,
-          }}
-        >
+        <Box flexShrink={0}>
           {safeAddress && !isLoading ? (
             <Identicon address={safeAddress} size={32} />
           ) : (
diff --git a/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx b/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx
index a030ba42c2..c59bcbb332 100644
--- a/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx
+++ b/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx
@@ -74,14 +74,7 @@ const SafeOwnerStep = ({ data, onSubmit, onBack }: StepRenderProps<LoadSafeFormD
         </Box>
         <Divider />
         <Box className={layoutCss.row}>
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              gap: 3,
-            }}
-          >
+          <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
             <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
               Back
             </Button>
diff --git a/src/components/new-safe/load/steps/SafeReviewStep/index.tsx b/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
index d613360304..cd44eb6d41 100644
--- a/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
+++ b/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
@@ -127,14 +127,7 @@ const SafeReviewStep = ({ data, onBack }: StepRenderProps<LoadSafeFormData>) =>
       </Box>
       <Divider />
       <Box className={layoutCss.row}>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            gap: 3,
-          }}
-        >
+        <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
           <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
             Back
           </Button>
diff --git a/src/components/nfts/NftCollections/index.tsx b/src/components/nfts/NftCollections/index.tsx
index 02875bcf1a..262691e0f7 100644
--- a/src/components/nfts/NftCollections/index.tsx
+++ b/src/components/nfts/NftCollections/index.tsx
@@ -70,6 +70,7 @@ const NftCollections = (): ReactElement => {
         <form onSubmit={onSendSubmit}>
           {/* Batch send form */}
           <NftSendForm selectedNfts={selectedNfts} />
+
           {/* NFTs table */}
           <NftGrid
             nfts={allNfts}
@@ -83,6 +84,7 @@ const NftCollections = (): ReactElement => {
           </NftGrid>
         </form>
       )}
+
       {/* NFT preview */}
       <NftPreviewModal onClose={() => setPreviewNft(undefined)} nft={previewNft} />
     </>
diff --git a/src/components/nfts/NftGrid/index.tsx b/src/components/nfts/NftGrid/index.tsx
index c44fc71bab..e35662b966 100644
--- a/src/components/nfts/NftGrid/index.tsx
+++ b/src/components/nfts/NftGrid/index.tsx
@@ -152,14 +152,7 @@ const NftGrid = ({
                   }}
                 >
                   {headCell.id === 'collection' ? (
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        alignContent: 'center',
-                        gap: 1,
-                      }}
-                    >
+                    <Box display="flex" alignItems="center" alignContent="center" gap={1}>
                       <TextField
                         placeholder="Collection"
                         hiddenLabel
@@ -209,25 +202,13 @@ const NftGrid = ({
                 <TableRow data-testid={`nfts-table-row-${index + 1}`} tabIndex={-1} key={`${item.address}-${item.id}`}>
                   {/* Collection name */}
                   <TableCell onClick={onClick} sx={sx}>
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 2,
-                      }}
-                    >
+                    <Box display="flex" alignItems="center" gap={2}>
                       {item.imageUri ? activeNftIcon : inactiveNftIcon}
 
                       <div>
                         <Typography>{item.tokenName || item.tokenSymbol}</Typography>
 
-                        <Typography
-                          component="div"
-                          sx={{
-                            fontSize: 'small',
-                            color: 'text.secondary',
-                          }}
-                        >
+                        <Typography fontSize="small" color="text.secondary" component="div">
                           <EthHashInfo
                             address={item.address}
                             showAvatar={false}
@@ -239,22 +220,17 @@ const NftGrid = ({
                       </div>
                     </Box>
                   </TableCell>
+
                   {/* Token ID */}
                   <TableCell onClick={onClick} sx={sx}>
                     <Typography sx={item.name ? undefined : { wordBreak: 'break-all' }}>
                       {item.name || `${item.tokenSymbol} #${item.id.slice(0, 20)}`}
                     </Typography>
                   </TableCell>
+
                   {/* Links */}
                   <TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }}>
-                    <Box
-                      sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        alignContent: 'center',
-                        gap: 2.5,
-                      }}
-                    >
+                    <Box display="flex" alignItems="center" alignContent="center" gap={2.5}>
                       {linkTemplates?.map(({ title, logo, getUrl }) => (
                         <ExternalLink href={getUrl(item)} key={title} onClick={stopPropagation} noIcon>
                           <img src={logo} width={24} height={24} alt={title} />
@@ -262,6 +238,7 @@ const NftGrid = ({
                       ))}
                     </Box>
                   </TableCell>
+
                   {/* Checkbox */}
                   <TableCell align="right">
                     <Checkbox
@@ -286,12 +263,7 @@ const NftGrid = ({
                       key={headCell.id}
                       sx={headCell.xsHidden ? { display: { xs: 'none', sm: 'table-cell' } } : undefined}
                     >
-                      <Box
-                        sx={{
-                          height: '42px',
-                          width: '42px',
-                        }}
-                      />
+                      <Box height="42px" width="42px" />
                     </TableCell>
                   ))}
                 </TableRow>
diff --git a/src/components/notification-center/NotificationCenter/index.tsx b/src/components/notification-center/NotificationCenter/index.tsx
index dd28e56d9c..bd7c47371e 100644
--- a/src/components/notification-center/NotificationCenter/index.tsx
+++ b/src/components/notification-center/NotificationCenter/index.tsx
@@ -108,6 +108,7 @@ const NotificationCenter = (): ReactElement => {
           <SvgIcon component={BellIcon} inheritViewBox fontSize="medium" />
         </UnreadBadge>
       </ButtonBase>
+
       <Popover
         // Clicking the "view transaction" link doesn't remove the popover even though
         // handleClose is called which results in the UI not being clickable anymore
@@ -134,13 +135,7 @@ const NotificationCenter = (): ReactElement => {
         <Paper className={css.popoverContainer}>
           <div className={css.popoverHeader}>
             <div>
-              <Typography
-                variant="h4"
-                component="span"
-                sx={{
-                  fontWeight: 700,
-                }}
-              >
+              <Typography variant="h4" component="span" fontWeight={700}>
                 Notifications
               </Typography>
               {hasUnread && (
diff --git a/src/components/safe-apps/AddCustomAppModal/CustomApp.tsx b/src/components/safe-apps/AddCustomAppModal/CustomApp.tsx
index fddf7cb567..6247f0f3b7 100644
--- a/src/components/safe-apps/AddCustomAppModal/CustomApp.tsx
+++ b/src/components/safe-apps/AddCustomAppModal/CustomApp.tsx
@@ -22,25 +22,15 @@ const CustomApp = ({ safeApp, shareUrl }: CustomAppProps) => {
   return (
     <div className={css.customAppContainer}>
       <SafeAppIconCard src={safeApp.iconUrl} alt={safeApp.name} width={48} height={48} />
-      <Typography
-        component="h2"
-        sx={{
-          mt: 2,
-          color: 'text.primary',
-          fontWeight: 700,
-        }}
-      >
+
+      <Typography component="h2" mt={2} color="text.primary" fontWeight={700}>
         {safeApp.name}
       </Typography>
-      <Typography
-        variant="body2"
-        sx={{
-          mt: 1,
-          color: 'text.secondary',
-        }}
-      >
+
+      <Typography variant="body2" mt={1} color="text.secondary">
         {safeApp.description}
       </Typography>
+
       {shareUrl ? (
         <CopyButton
           className={css.customAppCheckIcon}
diff --git a/src/components/safe-apps/AddCustomSafeAppCard/index.tsx b/src/components/safe-apps/AddCustomSafeAppCard/index.tsx
index 77455963f5..181b99dbab 100644
--- a/src/components/safe-apps/AddCustomSafeAppCard/index.tsx
+++ b/src/components/safe-apps/AddCustomSafeAppCard/index.tsx
@@ -15,14 +15,7 @@ const AddCustomSafeAppCard = ({ onSave, safeAppList }: Props) => {
   return (
     <>
       <Card>
-        <Box
-          sx={{
-            padding: '48px 12px',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-          }}
-        >
+        <Box p="48px 12px" display="flex" flexDirection="column" alignItems="center">
           {/* Add Custom Safe App Icon */}
           <AddCustomAppIcon alt="Add Custom Safe App card" />
 
@@ -39,6 +32,7 @@ const AddCustomSafeAppCard = ({ onSave, safeAppList }: Props) => {
           </Button>
         </Box>
       </Card>
+
       {/*  Add Custom Safe App Modal */}
       <AddCustomAppModal
         open={addCustomAppModalOpen}
diff --git a/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx b/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx
index 579be937a3..25e1b3bc57 100644
--- a/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx
+++ b/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx
@@ -61,14 +61,7 @@ const TransactionQueueBar = ({
             <AccordionSummary
               sx={{ '.MuiAccordionSummary-content': { alignItems: 'center' }, height: TRANSACTION_BAR_HEIGHT }}
             >
-              <Typography
-                variant="body1"
-                sx={{
-                  color: 'primary.main',
-                  fontWeight: 700,
-                  mr: 'auto',
-                }}
-              >
+              <Typography variant="body1" color="primary.main" fontWeight={700} sx={{ mr: 'auto' }}>
                 {barTitle}
               </Typography>
 
@@ -88,13 +81,7 @@ const TransactionQueueBar = ({
             </AccordionSummary>
             <AccordionDetails>
               <BatchExecuteHoverProvider>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'flex-end',
-                  }}
-                >
+                <Box display="flex" flexDirection="column" alignItems="flex-end">
                   <BatchExecuteButton />
                 </Box>
                 <PaginatedTxns useTxns={useTxQueue} />
diff --git a/src/components/safe-apps/AppFrame/index.tsx b/src/components/safe-apps/AppFrame/index.tsx
index 7e10c614cf..bfdd84f0a8 100644
--- a/src/components/safe-apps/AppFrame/index.tsx
+++ b/src/components/safe-apps/AppFrame/index.tsx
@@ -117,11 +117,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList, safeAppFromManifest, isNativeEm
         <Head>
           <title>{`Safe Apps - Viewer - ${remoteApp ? remoteApp.name : UNKNOWN_APP_NAME}`}</title>
         </Head>
-        <Box
-          sx={{
-            p: 2,
-          }}
-        >
+        <Box p={2}>
           <BlockedAddress address={sanctionedAddress} featureTitle="Safe{Pass} Safe app" />
         </Box>
       </>
diff --git a/src/components/safe-apps/PermissionsPrompt.tsx b/src/components/safe-apps/PermissionsPrompt.tsx
index 468e2bfe23..117476d8de 100644
--- a/src/components/safe-apps/PermissionsPrompt.tsx
+++ b/src/components/safe-apps/PermissionsPrompt.tsx
@@ -25,12 +25,7 @@ const PermissionsPrompt = ({
   return (
     <Dialog open={isOpen}>
       <ModalDialogTitle onClose={() => onReject()}>
-        <Typography
-          variant="body1"
-          sx={{
-            fontWeight: 700,
-          }}
-        >
+        <Typography variant="body1" fontWeight={700}>
           Permissions Request
         </Typography>
       </ModalDialogTitle>
diff --git a/src/components/safe-apps/RemoveCustomAppModal.tsx b/src/components/safe-apps/RemoveCustomAppModal.tsx
index 35c87d5f43..74c8356396 100644
--- a/src/components/safe-apps/RemoveCustomAppModal.tsx
+++ b/src/components/safe-apps/RemoveCustomAppModal.tsx
@@ -13,12 +13,7 @@ type Props = {
 const RemoveCustomAppModal = ({ open, onClose, onConfirm, app }: Props) => (
   <ModalDialog open={open} onClose={onClose} dialogTitle="Confirm Safe App removal">
     <DialogContent>
-      <Typography
-        variant="h6"
-        sx={{
-          pt: 3,
-        }}
-      >
+      <Typography variant="h6" pt={3}>
         Are you sure you want to remove the <b>{app.name}</b> app?
       </Typography>
     </DialogContent>
diff --git a/src/components/safe-apps/SafeAppActionButtons/index.tsx b/src/components/safe-apps/SafeAppActionButtons/index.tsx
index 190105f42b..40fd557ec5 100644
--- a/src/components/safe-apps/SafeAppActionButtons/index.tsx
+++ b/src/components/safe-apps/SafeAppActionButtons/index.tsx
@@ -37,13 +37,7 @@ const SafeAppActionButtons = ({
   }
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        gap: 1,
-        alignItems: 'center',
-      }}
-    >
+    <Box display="flex" gap={1} alignItems="center">
       {/* Open the preview drawer */}
       {openPreviewDrawer && (
         <IconButton
@@ -57,6 +51,7 @@ const SafeAppActionButtons = ({
           <SvgIcon component={InfoIcon} inheritViewBox color="border" fontSize="small" />
         </IconButton>
       )}
+
       {/* Copy share Safe App url button */}
       <CopyButton
         initialToolTipText={`Copy share URL for ${safeApp.name}`}
@@ -67,6 +62,7 @@ const SafeAppActionButtons = ({
           <SvgIcon component={ShareIcon} inheritViewBox color="border" fontSize="small" />
         </IconButton>
       </CopyButton>
+
       {/* Bookmark Safe App button */}
       {onBookmarkSafeApp && (
         <Tooltip title={`${isBookmarked ? 'Unpin' : 'Pin'} ${safeApp.name}`} placement="top">
@@ -87,6 +83,7 @@ const SafeAppActionButtons = ({
           </IconButton>
         </Tooltip>
       )}
+
       {/* Remove Custom Safe App button */}
       {removeCustomApp && (
         <Tooltip title={`Delete ${safeApp.name}`} placement="top">
diff --git a/src/components/safe-apps/SafeAppCard/index.tsx b/src/components/safe-apps/SafeAppCard/index.tsx
index 65419d9e3a..35876a469c 100644
--- a/src/components/safe-apps/SafeAppCard/index.tsx
+++ b/src/components/safe-apps/SafeAppCard/index.tsx
@@ -112,6 +112,7 @@ const SafeAppCardGridView = ({
           </>
         }
       />
+
       <CardContent className={css.safeAppContent}>
         {/* Safe App Title */}
         <Typography className={css.safeAppTitle} gutterBottom variant="h5">
@@ -119,13 +120,7 @@ const SafeAppCardGridView = ({
         </Typography>
 
         {/* Safe App Description */}
-        <Typography
-          className={css.safeAppDescription}
-          variant="body2"
-          sx={{
-            color: 'text.secondary',
-          }}
-        >
+        <Typography className={css.safeAppDescription} variant="body2" color="text.secondary">
           {safeApp.description}
         </Typography>
 
diff --git a/src/components/safe-apps/SafeAppLandingPage/SafeAppDetails.tsx b/src/components/safe-apps/SafeAppLandingPage/SafeAppDetails.tsx
index 3e4b8320f9..225c4563d6 100644
--- a/src/components/safe-apps/SafeAppLandingPage/SafeAppDetails.tsx
+++ b/src/components/safe-apps/SafeAppLandingPage/SafeAppDetails.tsx
@@ -18,20 +18,10 @@ const SafeAppDetails = ({ app, showDefaultListWarning }: DetailsProps) => (
       <SafeAppIconCard src={app.iconUrl} alt={app.name} width={90} height={90} />
 
       <Box sx={{ ml: 8 }}>
-        <Typography
-          variant="h3"
-          sx={{
-            fontWeight: 700,
-          }}
-        >
+        <Typography variant="h3" fontWeight={700}>
           {app.name}
         </Typography>
-        <Typography
-          variant="body2"
-          sx={{
-            mt: 1,
-          }}
-        >
+        <Typography variant="body2" mt={1}>
           {app.description}
         </Typography>
       </Box>
@@ -41,18 +31,14 @@ const SafeAppDetails = ({ app, showDefaultListWarning }: DetailsProps) => (
       <Typography variant="body1">Safe App URL</Typography>
       <Typography
         variant="body2"
-        sx={[
-          {
-            fontWeight: 700,
-          },
-          ({ palette, shape }) => ({
-            mt: 1,
-            p: 1,
-            backgroundColor: palette.primary.background,
-            display: 'inline-block',
-            borderRadius: shape.borderRadius,
-          }),
-        ]}
+        sx={({ palette, shape }) => ({
+          mt: 1,
+          p: 1,
+          backgroundColor: palette.primary.background,
+          display: 'inline-block',
+          borderRadius: shape.borderRadius,
+          fontWeight: 700,
+        })}
       >
         {app.url}
       </Typography>
@@ -77,23 +63,10 @@ const SafeAppDetails = ({ app, showDefaultListWarning }: DetailsProps) => (
               Warning
             </Typography>
           </Box>
-          <Typography
-            variant="body1"
-            sx={[
-              {
-                mt: 1,
-              },
-              ({ palette }) => ({ color: palette.warning.dark }),
-            ]}
-          >
+          <Typography variant="body1" mt={1} sx={({ palette }) => ({ color: palette.warning.dark })}>
             The application is not in the default Safe App list
           </Typography>
-          <Typography
-            variant="body2"
-            sx={{
-              mt: 2,
-            }}
-          >
+          <Typography variant="body2" mt={2}>
             Check the app link and ensure it comes from a trusted source
           </Typography>
         </Box>
diff --git a/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx b/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx
index 755aee5552..3266a4237c 100644
--- a/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx
+++ b/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx
@@ -10,21 +10,8 @@ type Props = {
 }
 
 const TryDemo = ({ demoUrl, onClick }: Props) => (
-  <Box
-    sx={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      height: CTA_HEIGHT,
-    }}
-  >
-    <Typography
-      variant="h5"
-      sx={{
-        fontWeight: 700,
-      }}
-    >
+  <Box display="flex" flexDirection="column" alignItems="center" justifyContent="space-between" height={CTA_HEIGHT}>
+    <Typography variant="h5" fontWeight={700}>
       Try the Safe App before using it
     </Typography>
     <DemoAppSVG alt="An icon of a internet browser" />
diff --git a/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx b/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
index a8526a902b..442d239e16 100644
--- a/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
+++ b/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
@@ -46,12 +46,7 @@ const SafeAppPreviewDrawer = ({ isOpen, safeApp, isBookmarked, onClose, onBookma
         {/* Toolbar */}
 
         {safeApp && (
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'right',
-            }}
-          >
+          <Box display="flex" justifyContent="right">
             <SafeAppActionButtons safeApp={safeApp} isBookmarked={isBookmarked} onBookmarkSafeApp={onBookmark} />
             <Tooltip title={`Close ${safeApp.name} preview`} placement="top">
               <IconButton
@@ -73,23 +68,11 @@ const SafeAppPreviewDrawer = ({ isOpen, safeApp, isBookmarked, onClose, onBookma
           <SafeAppIconCard src={safeApp?.iconUrl || ''} alt={`${safeApp?.name} logo`} width={90} height={90} />
         </Box>
 
-        <Typography
-          variant="h4"
-          sx={{
-            fontWeight: 700,
-            mt: 2,
-          }}
-        >
+        <Typography variant="h4" fontWeight={700} sx={{ mt: 2 }}>
           {safeApp?.name}
         </Typography>
 
-        <Typography
-          variant="body2"
-          sx={{
-            color: 'primary.light',
-            mt: 2,
-          }}
-        >
+        <Typography variant="body2" color="primary.light" sx={{ mt: 2 }}>
           {safeApp?.description}
         </Typography>
 
@@ -97,13 +80,7 @@ const SafeAppPreviewDrawer = ({ isOpen, safeApp, isBookmarked, onClose, onBookma
         <SafeAppTags tags={safeApp?.tags || []} />
 
         {/* Networks */}
-        <Typography
-          variant="body2"
-          sx={{
-            color: 'text.secondary',
-            mt: 2,
-          }}
-        >
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
           Available networks
         </Typography>
 
diff --git a/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx b/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx
index 63aaf89e9c..36dea9290d 100644
--- a/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx
+++ b/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx
@@ -33,64 +33,30 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
 
   return (
     <Card className={css.container}>
-      <Box
-        component="a"
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1,
-        }}
-      >
+      <Box display="flex" alignItems="center" gap={1} component="a">
         {/* Team Link section */}
         <div className={css.questionMarkIcon}>
           <HelpOutlineRoundedIcon color="info" />
         </div>
         <div>
-          <Typography
-            variant="subtitle1"
-            sx={{
-              fontWeight: 'bold',
-            }}
-          >
+          <Typography fontWeight="bold" variant="subtitle1">
             Something wrong with the Safe App?
           </Typography>
-          <Typography
-            variant="body2"
-            sx={{
-              color: 'primary.light',
-            }}
-          >
+          <Typography color="primary.light" variant="body2">
             Get in touch with the team
           </Typography>
         </div>
       </Box>
-      <Box
-        className={css.socialLinksSectionContainer}
-        sx={{
-          display: 'flex',
-          gap: 4,
-        }}
-      >
+
+      <Box className={css.socialLinksSectionContainer} display="flex" gap={4}>
         {/* Social links section */}
         {hasSocialLinks && (
           <div>
-            <Typography
-              variant="body2"
-              sx={{
-                color: 'border.main',
-                paddingLeft: 1,
-              }}
-            >
+            <Typography color="border.main" variant="body2" pl={1}>
               Social Media
             </Typography>
 
-            <Box
-              sx={{
-                display: 'flex',
-                mt: 0.2,
-                minHeight: '40px',
-              }}
-            >
+            <Box display="flex" mt={0.2} minHeight="40px">
               {discordSocialLink && (
                 <IconButton aria-label="Discord link" component="a" target="_blank" href={discordSocialLink.url}>
                   <DiscordIcon />
@@ -124,18 +90,8 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
 
         {/* Developer website section */}
         {developerWebsite && (
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <Typography
-              variant="body2"
-              sx={{
-                color: 'border.main',
-              }}
-            >
+          <Box display="flex" flexDirection="column">
+            <Typography color="border.main" variant="body2">
               Website
             </Typography>
 
diff --git a/src/components/safe-apps/SafeAppsFilters/index.tsx b/src/components/safe-apps/SafeAppsFilters/index.tsx
index 57fdf4e379..eec8c8b492 100644
--- a/src/components/safe-apps/SafeAppsFilters/index.tsx
+++ b/src/components/safe-apps/SafeAppsFilters/index.tsx
@@ -73,6 +73,7 @@ const SafeAppsFilters = ({
           }}
         />
       </Grid>
+
       {/* Select Category */}
       <Grid item xs={12} sm={6} md={3} lg={3}>
         <FormControl fullWidth>
@@ -142,6 +143,7 @@ const SafeAppsFilters = ({
           )}
         </FormControl>
       </Grid>
+
       {/* Optimized with Batch Transaction */}
       <Grid item xs={12} sm={6} md={3} lg={3}>
         <Tooltip
@@ -159,13 +161,7 @@ const SafeAppsFilters = ({
                 onChangeOptimizedWithBatch(value)
               }}
               label={
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                  }}
-                >
+                <Box display="flex" alignItems="center" gap={1}>
                   <span>Batch transactions</span> <BatchIcon />
                 </Box>
               }
diff --git a/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx b/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx
index 15f8eaa5a9..5896697320 100644
--- a/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx
+++ b/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx
@@ -19,33 +19,22 @@ const AllowedFeaturesList: React.FC<SafeAppsInfoAllowedFeaturesProps> = ({
   return (
     <>
       <SvgIcon component={ShieldIcon} inheritViewBox color="primary" />
+
       <Typography
         variant="body2"
+        color="text.secondary"
         sx={{
-          color: 'text.secondary',
           textAlign: 'center',
           margin: '0 75px',
         }}
       >
         Manage the features Safe Apps can use
       </Typography>
-      <Box
-        sx={{
-          mx: 1,
-          my: 3,
-          textAlign: 'left',
-        }}
-      >
+
+      <Box mx={1} my={3} textAlign="left">
         <Typography>This Safe App is requesting permission to use:</Typography>
 
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            ml: 2,
-            mt: 1,
-          }}
-        >
+        <Box display="flex" flexDirection="column" ml={2} mt={1}>
           {features
             .filter(({ feature }) => isBrowserFeature(feature))
             .map(({ feature, checked }, index) => (
diff --git a/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx b/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx
index baa7284092..d94d9b818f 100644
--- a/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx
+++ b/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx
@@ -68,13 +68,7 @@ const Slider: React.FC<SliderProps> = ({ onSlideChange, children, initialStep })
           ))}
         </div>
       </div>
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'center',
-          width: '100%',
-        }}
-      >
+      <Box display="flex" justifyContent="center" width="100%">
         <Button color="primary" variant="outlined" size="small" fullWidth onClick={prevSlide}>
           {isFirstStep ? 'Cancel' : 'Back'}
         </Button>
diff --git a/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx b/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
index 43d453ba8b..bd3b411c78 100644
--- a/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
+++ b/src/components/safe-apps/SafeAppsZeroResultsPlaceholder/index.tsx
@@ -7,14 +7,7 @@ const SafeAppsZeroResultsPlaceholder = ({ searchQuery }: { searchQuery: string }
     <PagePlaceholder
       img={<AddCustomAppIcon />}
       text={
-        <Typography
-          variant="body1"
-          sx={{
-            color: 'primary.light',
-            m: 2,
-            maxWidth: '600px',
-          }}
-        >
+        <Typography variant="body1" color="primary.light" m={2} maxWidth="600px">
           No Safe Apps found matching <strong>{searchQuery}</strong>. Connect to dApps that haven&apos;t yet been
           integrated with the {'Safe{Wallet}'} using WalletConnect.
         </Typography>
diff --git a/src/components/safe-messages/DecodedMsg/index.tsx b/src/components/safe-messages/DecodedMsg/index.tsx
index 3c42e14edd..dbb4303ac5 100644
--- a/src/components/safe-messages/DecodedMsg/index.tsx
+++ b/src/components/safe-messages/DecodedMsg/index.tsx
@@ -20,17 +20,14 @@ const DecodedTypedObject = ({ displayedType, eip712Msg }: { displayedType: strin
   return (
     <Box>
       <Typography
+        textTransform="uppercase"
+        fontWeight={700}
         variant="caption"
-        sx={[
-          {
-            textTransform: 'uppercase',
-            fontWeight: 700,
-          },
-          ({ palette }) => ({ color: `${palette.border.main}` }),
-        ]}
+        sx={({ palette }) => ({ color: `${palette.border.main}` })}
       >
         {displayedType}
       </Typography>
+
       {Object.entries(displayedType === EIP712_DOMAIN_TYPE ? domain : msg).map((param, index) => {
         const [paramName, paramValue] = param
         const type = findType(paramName) || 'string'
diff --git a/src/components/safe-messages/InfoBox/index.tsx b/src/components/safe-messages/InfoBox/index.tsx
index 4360710192..34bdff369f 100644
--- a/src/components/safe-messages/InfoBox/index.tsx
+++ b/src/components/safe-messages/InfoBox/index.tsx
@@ -20,12 +20,7 @@ const InfoBox = ({
       <div className={css.message}>
         <SvgIcon component={icon} color="info" inheritViewBox fontSize="medium" />
         <div>
-          <Typography
-            variant="subtitle1"
-            sx={{
-              fontWeight: 'bold',
-            }}
-          >
+          <Typography variant="subtitle1" fontWeight="bold">
             {title}
           </Typography>
           <Typography variant="body2">{message}</Typography>
diff --git a/src/components/safe-messages/MsgDetails/index.tsx b/src/components/safe-messages/MsgDetails/index.tsx
index b98b56f157..db757ba5b9 100644
--- a/src/components/safe-messages/MsgDetails/index.tsx
+++ b/src/components/safe-messages/MsgDetails/index.tsx
@@ -125,15 +125,7 @@ const MsgDetails = ({ msg }: { msg: SafeMessage }): ReactElement => {
       <div className={txDetailsCss.txSigners}>
         <MsgSigners msg={msg} />
         {wallet && !isConfirmed && (
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: 1,
-              mt: 2,
-            }}
-          >
+          <Box display="flex" alignItems="center" justifyContent="center" gap={1} mt={2}>
             <SignMsgButton msg={msg} />
           </Box>
         )}
diff --git a/src/components/settings/ContractVersion/index.tsx b/src/components/settings/ContractVersion/index.tsx
index 935192a9bd..151548f3dc 100644
--- a/src/components/settings/ContractVersion/index.tsx
+++ b/src/components/settings/ContractVersion/index.tsx
@@ -33,23 +33,11 @@ export const ContractVersion = () => {
 
   return (
     <>
-      <Typography
-        variant="h4"
-        sx={{
-          fontWeight: 700,
-          marginBottom: 1,
-        }}
-      >
+      <Typography variant="h4" fontWeight={700} marginBottom={1}>
         Contract version
       </Typography>
-      <Typography
-        variant="body1"
-        sx={{
-          fontWeight: 400,
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
+
+      <Typography variant="body1" fontWeight={400} display="flex" alignItems="center">
         {safeLoaded ? (
           <>
             {safe.version ?? 'Unsupported contract'}
@@ -63,6 +51,7 @@ export const ContractVersion = () => {
           <Skeleton width="60px" />
         )}
       </Typography>
+
       {safeLoaded && safe.version && showUpdateDialog && (
         <Alert
           sx={{ mt: 2, borderRadius: '2px', borderColor: '#B0FFC9' }}
@@ -70,11 +59,7 @@ export const ContractVersion = () => {
         >
           <AlertTitle sx={{ fontWeight: 700 }}>New version is available: {latestSafeVersion}</AlertTitle>
 
-          <Typography
-            sx={{
-              mb: 3,
-            }}
-          >
+          <Typography mb={3}>
             Update now to take advantage of new features and the highest security standards available. You will need to
             confirm this update just like any other transaction.{' '}
             <ExternalLink href={safeMasterCopy?.deployerRepoUrl}>GitHub</ExternalLink>
diff --git a/src/components/settings/DataManagement/ImportDialog.tsx b/src/components/settings/DataManagement/ImportDialog.tsx
index 5b4f0ed385..b6668e5c71 100644
--- a/src/components/settings/DataManagement/ImportDialog.tsx
+++ b/src/components/settings/DataManagement/ImportDialog.tsx
@@ -88,11 +88,7 @@ export const ImportDialog = ({
     <ModalDialog open onClose={handleClose} dialogTitle="Data import" hideChainIndicator>
       <DialogContent>
         {!jsonData || !fileName ? (
-          <Box
-            sx={{
-              mt: 2,
-            }}
-          >
+          <Box mt={2}>
             <ImportFileUpload setFileName={setFileName} setJsonData={setJsonData} />
           </Box>
         ) : (
diff --git a/src/components/settings/DataManagement/index.tsx b/src/components/settings/DataManagement/index.tsx
index a5c8b2bd1e..f753c119b2 100644
--- a/src/components/settings/DataManagement/index.tsx
+++ b/src/components/settings/DataManagement/index.tsx
@@ -74,12 +74,7 @@ const DataManagement = () => {
       <Paper sx={{ p: 4, mb: 2 }}>
         <Grid container spacing={3}>
           <Grid item sm={4} xs={12}>
-            <Typography
-              variant="h4"
-              sx={{
-                fontWeight: 700,
-              }}
-            >
+            <Typography variant="h4" fontWeight={700}>
               Data export
             </Typography>
           </Grid>
@@ -110,15 +105,11 @@ const DataManagement = () => {
           </Grid>
         </Grid>
       </Paper>
+
       <Paper sx={{ p: 4 }}>
         <Grid container spacing={3}>
           <Grid item sm={4} xs={12}>
-            <Typography
-              variant="h4"
-              sx={{
-                fontWeight: 700,
-              }}
-            >
+            <Typography variant="h4" fontWeight={700}>
               Data import
             </Typography>
           </Grid>
diff --git a/src/components/settings/SafeAppsSigningMethod/index.tsx b/src/components/settings/SafeAppsSigningMethod/index.tsx
index 21e21f880b..4d900a6f6e 100644
--- a/src/components/settings/SafeAppsSigningMethod/index.tsx
+++ b/src/components/settings/SafeAppsSigningMethod/index.tsx
@@ -19,23 +19,13 @@ export const SafeAppsSigningMethod = () => {
     <Paper sx={{ padding: 4, mt: 2 }}>
       <Grid container spacing={3}>
         <Grid item lg={4} xs={12}>
-          <Typography
-            variant="h4"
-            sx={{
-              fontWeight: 'bold',
-              mb: 1,
-            }}
-          >
+          <Typography variant="h4" fontWeight="bold" mb={1}>
             Signing method
           </Typography>
         </Grid>
 
         <Grid item xs>
-          <Typography
-            sx={{
-              mb: 2,
-            }}
-          >
+          <Typography mb={2}>
             This setting determines how the {'Safe{Wallet}'} will sign message requests from Safe Apps. Gasless,
             off-chain signing is used by default. Learn more about message signing{' '}
             <ExternalLink href={HelpCenterArticle.SIGNED_MESSAGES}>here</ExternalLink>.
diff --git a/src/components/settings/SecurityLogin/index.tsx b/src/components/settings/SecurityLogin/index.tsx
index 1ba2421e76..d2ba01e986 100644
--- a/src/components/settings/SecurityLogin/index.tsx
+++ b/src/components/settings/SecurityLogin/index.tsx
@@ -11,14 +11,9 @@ const SecurityLogin = () => {
   const router = useRouter()
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 2,
-      }}
-    >
+    <Box display="flex" flexDirection="column" gap={2}>
       {isRecoverySupported && router.query.safe ? <RecoverySettings /> : null}
+
       <SecuritySettings />
     </Box>
   )
diff --git a/src/components/settings/SecuritySettings/index.tsx b/src/components/settings/SecuritySettings/index.tsx
index 244dc212a2..44759ba3f4 100644
--- a/src/components/settings/SecuritySettings/index.tsx
+++ b/src/components/settings/SecuritySettings/index.tsx
@@ -10,23 +10,13 @@ const SecuritySettings = () => {
     <Paper sx={{ padding: 4 }}>
       <Grid container spacing={3}>
         <Grid item lg={4} xs={12}>
-          <Typography
-            variant="h4"
-            sx={{
-              fontWeight: 'bold',
-              mb: 1,
-            }}
-          >
+          <Typography variant="h4" fontWeight="bold" mb={1}>
             Security
           </Typography>
         </Grid>
 
         <Grid item xs>
-          <Typography
-            sx={{
-              mb: 2,
-            }}
-          >
+          <Typography mb={2}>
             Enabling this setting allows the signing of unreadable signature requests. Signing these messages can lead
             to unpredictable consequences, including the potential loss of funds or control over your account.
           </Typography>
diff --git a/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx b/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx
index 8d2d0307b6..d9f18a3b47 100644
--- a/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx
+++ b/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx
@@ -20,14 +20,7 @@ const SKELETON_ROWS = new Array(3).fill('').map(() => {
       beneficiary: {
         rawValue: '0x',
         content: (
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              gap: 1,
-              alignItems: 'center',
-            }}
-          >
+          <Box display="flex" flexDirection="row" gap={1} alignItems="center">
             <Skeleton variant="circular" width={26} height={26} />
             <div>
               <Typography>
@@ -43,14 +36,7 @@ const SKELETON_ROWS = new Array(3).fill('').map(() => {
       spent: {
         rawValue: '0',
         content: (
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              gap: 1,
-              alignItems: 'center',
-            }}
-          >
+          <Box display="flex" flexDirection="row" gap={1} alignItems="center">
             <Skeleton variant="circular" width={26} height={26} />
             <Typography>
               <Skeleton width={100} />
@@ -111,14 +97,7 @@ export const SpendingLimitsTable = ({
                 spent: {
                   rawValue: spendingLimit.spent,
                   content: (
-                    <Box
-                      data-testid="spent-amount"
-                      sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 1,
-                      }}
-                    >
+                    <Box data-testid="spent-amount" display="flex" alignItems="center" gap={1}>
                       <TokenIcon logoUri={spendingLimit.token.logoUri} tokenSymbol={spendingLimit.token.symbol} />
                       {`${formattedSpent} of ${formattedAmount} ${spendingLimit.token.symbol}`}
                     </Box>
diff --git a/src/components/settings/owner/EditOwnerDialog/index.tsx b/src/components/settings/owner/EditOwnerDialog/index.tsx
index 9a31183dff..b12aab771d 100644
--- a/src/components/settings/owner/EditOwnerDialog/index.tsx
+++ b/src/components/settings/owner/EditOwnerDialog/index.tsx
@@ -58,23 +58,16 @@ export const EditOwnerDialog = ({ chainId, address, name }: { chainId: string; a
           </span>
         </Tooltip>
       </Track>
+
       <ModalDialog open={open} onClose={handleClose} dialogTitle="Edit signer name">
         <FormProvider {...formMethods}>
           <form onSubmit={handleSubmit(onSubmit)}>
             <DialogContent>
-              <Box
-                sx={{
-                  py: 2,
-                }}
-              >
+              <Box py={2}>
                 <NameInput label="Signer name" name="name" required />
               </Box>
 
-              <Box
-                sx={{
-                  py: 2,
-                }}
-              >
+              <Box py={2}>
                 <EthHashInfo address={address} showCopyButton shortAddress={false} />
               </Box>
             </DialogContent>
diff --git a/src/components/sidebar/DebugToggle/index.tsx b/src/components/sidebar/DebugToggle/index.tsx
index 9bb058b8c1..eb12300296 100644
--- a/src/components/sidebar/DebugToggle/index.tsx
+++ b/src/components/sidebar/DebugToggle/index.tsx
@@ -25,12 +25,7 @@ const DebugToggle = (): ReactElement => {
   }
 
   return (
-    <Box
-      sx={{
-        py: 2,
-        ml: 2,
-      }}
-    >
+    <Box py={2} ml={2}>
       <FormControlLabel
         control={<Switch checked={isDarkMode} onChange={(_, checked) => dispatch(setDarkMode(checked))} />}
         label="Dark mode"
diff --git a/src/components/sidebar/QrCodeButton/QrModal.tsx b/src/components/sidebar/QrCodeButton/QrModal.tsx
index b7357fe073..04ec8df5ba 100644
--- a/src/components/sidebar/QrCodeButton/QrModal.tsx
+++ b/src/components/sidebar/QrCodeButton/QrModal.tsx
@@ -21,47 +21,17 @@ const QrModal = ({ onClose }: { onClose: () => void }): ReactElement => {
   return (
     <ModalDialog open dialogTitle="Receive assets" onClose={onClose} hideChainIndicator>
       <DialogContent>
-        <Box
-          sx={{
-            bgcolor: chain?.theme.backgroundColor,
-            color: chain?.theme.textColor,
-            px: 3,
-            py: 2,
-            mx: -3,
-          }}
-        >
+        <Box bgcolor={chain?.theme.backgroundColor} color={chain?.theme.textColor} px={3} py={2} mx={-3}>
           {chainName} network &mdash; only send {chainName} assets to this Safe Account.
         </Box>
 
-        <Typography
-          sx={{
-            my: 2,
-          }}
-        >
+        <Typography my={2}>
           This is the address of your Safe Account. Deposit funds by scanning the QR code or copying the address below.
           Only send {nativeToken} and tokens (e.g. ERC20, ERC721) to this address.
         </Typography>
 
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            flexWrap: 'wrap',
-            justifyContent: 'center',
-            alignItems: 'center',
-            my: 2,
-          }}
-        >
-          <Box
-            sx={{
-              mt: 1,
-              mb: 1,
-              p: 1,
-              border: '1px solid',
-              borderColor: 'border.main',
-              borderRadius: 1,
-            }}
-          >
+        <Box display="flex" flexDirection="column" flexWrap="wrap" justifyContent="center" alignItems="center" my={2}>
+          <Box mt={1} mb={1} p={1} border="1px solid" borderColor="border.main" borderRadius={1}>
             <QRCode value={qrCode} size={164} />
           </Box>
 
@@ -76,11 +46,7 @@ const QrModal = ({ onClose }: { onClose: () => void }): ReactElement => {
             }
           />
 
-          <Box
-            sx={{
-              mt: 2,
-            }}
-          >
+          <Box mt={2}>
             <EthHashInfo
               address={safeAddress}
               shortAddress={false}
diff --git a/src/components/sidebar/SidebarHeader/index.tsx b/src/components/sidebar/SidebarHeader/index.tsx
index 11407a4c98..869733670e 100644
--- a/src/components/sidebar/SidebarHeader/index.tsx
+++ b/src/components/sidebar/SidebarHeader/index.tsx
@@ -67,13 +67,7 @@ const SafeHeader = (): ReactElement => {
               </Typography>
             )}
 
-            <Typography
-              data-testid="currency-section"
-              variant="body2"
-              sx={{
-                fontWeight: 700,
-              }}
-            >
+            <Typography data-testid="currency-section" variant="body2" fontWeight={700}>
               {safe.deployed ? (
                 balances.fiatTotal ? (
                   <FiatValue value={balances.fiatTotal} />
@@ -119,6 +113,7 @@ const SafeHeader = (): ReactElement => {
           <EnvHintButton />
         </div>
       </div>
+
       <NewTxButton />
     </div>
   )
diff --git a/src/components/transactions/BulkTxListGroup/index.tsx b/src/components/transactions/BulkTxListGroup/index.tsx
index f20be867e2..935c2254c2 100644
--- a/src/components/transactions/BulkTxListGroup/index.tsx
+++ b/src/components/transactions/BulkTxListGroup/index.tsx
@@ -39,39 +39,22 @@ const GroupedTxListItems = ({
   }
   return (
     <Paper data-testid="grouped-items" className={css.container}>
-      <Box
-        sx={{
-          gridArea: 'icon',
-        }}
-      >
+      <Box gridArea="icon">
         <SvgIcon className={css.icon} component={BatchIcon} inheritViewBox fontSize="medium" />
       </Box>
-      <Box
-        sx={{
-          gridArea: 'info',
-        }}
-      >
+      <Box gridArea="info">
         <Typography noWrap>{title}</Typography>
       </Box>
       <Box className={css.action}>{groupedListItems.length} transactions</Box>
       <Box className={css.hash}>
         <ExplorerButton href={explorerLink} isCompact={false} />
       </Box>
-      <Box
-        className={css.txItems}
-        sx={{
-          gridArea: 'items',
-        }}
-      >
+
+      <Box gridArea="items" className={css.txItems}>
         {groupedListItems.map((tx) => {
           const nonce = isMultisigExecutionInfo(tx.transaction.executionInfo) ? tx.transaction.executionInfo.nonce : ''
           return (
-            <Box
-              key={tx.transaction.id}
-              sx={{
-                position: 'relative',
-              }}
-            >
+            <Box position="relative" key={tx.transaction.id}>
               <Box className={css.nonce}>
                 <Typography className={css.nonce}>{nonce}</Typography>
               </Box>
diff --git a/src/components/transactions/MaliciousTxWarning/index.tsx b/src/components/transactions/MaliciousTxWarning/index.tsx
index b714e5b44b..a77b14d725 100644
--- a/src/components/transactions/MaliciousTxWarning/index.tsx
+++ b/src/components/transactions/MaliciousTxWarning/index.tsx
@@ -4,20 +4,12 @@ import WarningIcon from '@/public/images/notifications/warning.svg'
 const MaliciousTxWarning = ({ withTooltip = true }: { withTooltip?: boolean }) => {
   return withTooltip ? (
     <Tooltip title="This token isn’t verified on major token lists and may pose risks when interacting with it or involved addresses">
-      <Box
-        sx={{
-          lineHeight: '16px',
-        }}
-      >
+      <Box lineHeight="16px">
         <SvgIcon component={WarningIcon} fontSize="small" inheritViewBox color="warning" />
       </Box>
     </Tooltip>
   ) : (
-    <Box
-      sx={{
-        lineHeight: '16px',
-      }}
-    >
+    <Box lineHeight="16px">
       <SvgIcon component={WarningIcon} fontSize="small" inheritViewBox color="warning" />
     </Box>
   )
diff --git a/src/components/transactions/SignedMessagesHelpLink/index.tsx b/src/components/transactions/SignedMessagesHelpLink/index.tsx
index 3f0d7f94b8..6c3cfafe14 100644
--- a/src/components/transactions/SignedMessagesHelpLink/index.tsx
+++ b/src/components/transactions/SignedMessagesHelpLink/index.tsx
@@ -14,21 +14,10 @@ const SignedMessagesHelpLink = () => {
   }
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 1,
-      }}
-    >
+    <Box display="flex" alignItems="center" gap={1}>
       <SvgIcon component={InfoIcon} inheritViewBox color="border" fontSize="small" />
       <ExternalLink noIcon href={HelpCenterArticle.SIGNED_MESSAGES}>
-        <Typography
-          variant="body2"
-          sx={{
-            fontWeight: 700,
-          }}
-        >
+        <Typography variant="body2" fontWeight={700}>
           What are signed messages?
         </Typography>
       </ExternalLink>
diff --git a/src/components/transactions/TxConfirmations/index.tsx b/src/components/transactions/TxConfirmations/index.tsx
index 7eb7825276..e8a843f14e 100644
--- a/src/components/transactions/TxConfirmations/index.tsx
+++ b/src/components/transactions/TxConfirmations/index.tsx
@@ -17,12 +17,8 @@ const TxConfirmations = ({
   return (
     <TxStatusChip color={color}>
       <SvgIcon component={isConfirmed ? CheckIcon : OwnersIcon} inheritViewBox fontSize="small" />
-      <Typography
-        variant="caption"
-        sx={{
-          fontWeight: 'bold',
-        }}
-      >
+
+      <Typography variant="caption" fontWeight="bold">
         {submittedConfirmations} out of {requiredConfirmations}
       </Typography>
     </TxStatusChip>
diff --git a/src/components/transactions/TxDetails/Summary/index.tsx b/src/components/transactions/TxDetails/Summary/index.tsx
index 980b750cdf..03e839ce37 100644
--- a/src/components/transactions/TxDetails/Summary/index.tsx
+++ b/src/components/transactions/TxDetails/Summary/index.tsx
@@ -67,11 +67,13 @@ const Summary = ({ txDetails, defaultExpanded = false, hideDecodedData = false }
       <TxDataRow datatestid="tx-created-at" title="Created:">
         {submittedAt ? dateString(submittedAt) : null}
       </TxDataRow>
+
       {executedAt && (
         <TxDataRow datatestid="tx-executed-at" title="Executed:">
           {dateString(executedAt)}
         </TxDataRow>
       )}
+
       {/* Advanced TxData */}
       {txData && (
         <>
@@ -88,22 +90,9 @@ const Summary = ({ txDetails, defaultExpanded = false, hideDecodedData = false }
           )}
 
           {expanded && (
-            <Box
-              sx={{
-                mt: 1,
-              }}
-            >
+            <Box mt={1}>
               {!isCustom && !hideDecodedData && (
-                <Box
-                  sx={{
-                    borderBottom: '1px solid',
-                    borderColor: 'border.light',
-                    p: 2,
-                    mt: 1,
-                    mb: 2,
-                    mx: -2,
-                  }}
-                >
+                <Box borderBottom="1px solid" borderColor="border.light" p={2} mt={1} mb={2} mx={-2}>
                   <DecodedData txData={txDetails.txData} toInfo={txDetails.txData?.to} />
                 </Box>
               )}
diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/MethodCall.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/MethodCall.tsx
index 0ff9af87ac..7d78a51b9b 100644
--- a/src/components/transactions/TxDetails/TxData/DecodedData/MethodCall.tsx
+++ b/src/components/transactions/TxDetails/TxData/DecodedData/MethodCall.tsx
@@ -16,14 +16,12 @@ const MethodCall = ({
   return (
     <>
       <Typography
+        fontWeight="bold"
+        display="flex"
+        flexWrap={['wrap', 'wrap', 'nowrap']}
+        alignItems="center"
+        gap=".5em"
         component="div"
-        sx={{
-          fontWeight: 'bold',
-          display: 'flex',
-          flexWrap: ['wrap', 'wrap', 'nowrap'],
-          alignItems: 'center',
-          gap: '.5em',
-        }}
       >
         Call
         <Typography
@@ -52,6 +50,7 @@ const MethodCall = ({
           avatarSize={24}
         />
       </Typography>
+
       <Divider />
     </>
   )
diff --git a/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx b/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
index c09a20cf70..dfe3114835 100644
--- a/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/DecodedData/SingleTxDecoded/index.tsx
@@ -47,16 +47,13 @@ export const SingleTxDecoded = ({ tx, txData, actionTitle, variant, expanded, on
         <div className={css.summary}>
           <CodeIcon color="border" fontSize="small" />
           <Typography>{actionTitle}</Typography>
-          <Typography
-            sx={{
-              ml: '8px',
-            }}
-          >
+          <Typography ml="8px">
             {name ? name + ': ' : ''}
             <b>{method}</b>
           </Typography>
         </div>
       </AccordionSummary>
+
       <AccordionDetails>
         <Stack spacing={1}>
           <DecodedData txData={singleTxData} toInfo={{ value: tx.to }} />
diff --git a/src/components/transactions/TxDetails/TxData/Rejection/index.tsx b/src/components/transactions/TxDetails/TxData/Rejection/index.tsx
index 748996e993..f1c8f66036 100644
--- a/src/components/transactions/TxDetails/TxData/Rejection/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/Rejection/index.tsx
@@ -22,21 +22,11 @@ const RejectionTxInfo = ({ nonce, isTxExecuted }: Props) => {
 
   return (
     <>
-      <Typography
-        data-testid="onchain-rejection"
-        sx={{
-          mr: 2,
-        }}
-      >
+      <Typography data-testid="onchain-rejection" mr={2}>
         {message}
       </Typography>
       {!isTxExecuted && (
-        <Box
-          sx={{
-            mt: 2,
-            width: 'fit-content',
-          }}
-        >
+        <Box mt={2} sx={{ width: 'fit-content' }}>
           <ExternalLink href={HelpCenterArticle.CANCELLING_TRANSACTIONS} title={title}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
               <Typography sx={{ textDecoration: 'underline' }}>{title}</Typography>
diff --git a/src/components/transactions/TxDetails/TxData/Transfer/index.tsx b/src/components/transactions/TxDetails/TxData/Transfer/index.tsx
index 34d6a98664..9971388af1 100644
--- a/src/components/transactions/TxDetails/TxData/Transfer/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/Transfer/index.tsx
@@ -21,14 +21,7 @@ const TransferTxInfoMain = ({ txInfo, txStatus, trusted, imitation }: TransferTx
   const { direction } = txInfo
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 1,
-      }}
-    >
+    <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
       <Typography>
         {direction === TransferDirection.INCOMING ? 'Received' : isTxQueued(txStatus) ? 'Send' : 'Sent'}{' '}
         <b>
@@ -45,21 +38,10 @@ const TransferTxInfo = ({ txInfo, txStatus, trusted, imitation }: TransferTxInfo
   const address = txInfo.direction.toUpperCase() === TransferDirection.INCOMING ? txInfo.sender : txInfo.recipient
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1,
-      }}
-    >
+    <Box display="flex" flexDirection="column" gap={1}>
       <TransferTxInfoMain txInfo={txInfo} txStatus={txStatus} trusted={trusted} imitation={imitation} />
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          width: '100%',
-        }}
-      >
+
+      <Box display="flex" alignItems="center" width="100%">
         <EthHashInfo
           address={address.value}
           name={address.name}
diff --git a/src/components/transactions/TxDetails/index.tsx b/src/components/transactions/TxDetails/index.tsx
index eb7d2bb9ba..412df2815d 100644
--- a/src/components/transactions/TxDetails/index.tsx
+++ b/src/components/transactions/TxDetails/index.tsx
@@ -139,12 +139,7 @@ const TxDetailsBlock = ({ txSummary, txDetails }: TxDetailsProps): ReactElement
           )}
 
           {isQueue && expiredSwap && (
-            <Typography
-              sx={{
-                color: 'text.secondary',
-                mt: 2,
-              }}
-            >
+            <Typography color="text.secondary" mt={2}>
               This order has expired. Reject this transaction and try again.
             </Typography>
           )}
diff --git a/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx b/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx
index 04e40ecd67..f94fb2b358 100644
--- a/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx
+++ b/src/components/transactions/TxListItem/ExpandableTransactionItem.tsx
@@ -74,12 +74,7 @@ export const ExpandableTransactionItem = ({
 
 export const TransactionSkeleton = () => (
   <>
-    <Box
-      sx={{
-        pt: '20px',
-        pb: '4px',
-      }}
-    >
+    <Box pt="20px" pb="4px">
       <Skeleton variant="text" width="35px" />
     </Box>
 
diff --git a/src/components/transactions/TxStatusChip/index.tsx b/src/components/transactions/TxStatusChip/index.tsx
index 2bffe6019a..339236fb75 100644
--- a/src/components/transactions/TxStatusChip/index.tsx
+++ b/src/components/transactions/TxStatusChip/index.tsx
@@ -17,13 +17,11 @@ const TxStatusChip = ({ children, color }: TxStatusChipProps): ReactElement => {
       label={
         <Typography
           variant="caption"
-          sx={{
-            fontWeight: 'bold',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 0.7,
-          }}
+          fontWeight="bold"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          gap={0.7}
         >
           {children}
         </Typography>
diff --git a/src/components/transactions/TxSummary/QueueActions.tsx b/src/components/transactions/TxSummary/QueueActions.tsx
index c0726ad3b4..df6075a6c0 100644
--- a/src/components/transactions/TxSummary/QueueActions.tsx
+++ b/src/components/transactions/TxSummary/QueueActions.tsx
@@ -20,14 +20,7 @@ const QueueActions = ({ tx }: { tx: TransactionSummary }) => {
   }
 
   return (
-    <Box
-      data-testid="tx-actions"
-      sx={{
-        mr: 2,
-        display: 'flex',
-        justifyContent: 'center',
-      }}
-    >
+    <Box data-testid="tx-actions" mr={2} display="flex" justifyContent="center">
       {ExecutionComponent}
       {pendingTx && pendingTx.status === PendingStatus.PROCESSING && (
         <SpeedUpMonitor txId={tx.id} pendingTx={pendingTx} modalTrigger="alertButton" />
diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index 154e5f3a73..5d3f243e39 100644
--- a/src/components/tx-flow/common/TxNonce/index.tsx
+++ b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -42,13 +42,7 @@ const CustomPopper = function ({
 const NonceFormHeader = memo(function NonceFormSubheader({ children, ...props }: ListSubheaderProps) {
   return (
     <ListSubheader {...props} disableSticky>
-      <Typography
-        variant="caption"
-        sx={{
-          fontWeight: 700,
-          color: 'text.secondary',
-        }}
-      >
+      <Typography variant="caption" fontWeight={700} color="text.secondary">
         {children}
       </Typography>
     </ListSubheader>
@@ -185,13 +179,7 @@ const TxNonceForm = ({ nonce, recommendedNonce }: { nonce: string; recommendedNo
       render={({ field, fieldState }) => {
         if (readOnly) {
           return (
-            <Typography
-              variant="body2"
-              sx={{
-                fontWeight: 700,
-                ml: -1,
-              }}
-            >
+            <Typography variant="body2" fontWeight={700} ml={-1}>
               {nonce}
             </Typography>
           )
@@ -289,21 +277,9 @@ const TxNonce = () => {
   const { nonce, recommendedNonce } = useContext(SafeTxContext)
 
   return (
-    <Box
-      data-testid="nonce-fld"
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 1,
-      }}
-    >
+    <Box data-testid="nonce-fld" display="flex" alignItems="center" gap={1}>
       Nonce{' '}
-      <Typography
-        component="span"
-        sx={{
-          fontWeight: 700,
-        }}
-      >
+      <Typography component="span" fontWeight={700}>
         #
       </Typography>
       {nonce === undefined || recommendedNonce === undefined ? (
diff --git a/src/components/tx-flow/common/TxStatusWidget/index.tsx b/src/components/tx-flow/common/TxStatusWidget/index.tsx
index ce16000d6e..11847b6ee9 100644
--- a/src/components/tx-flow/common/TxStatusWidget/index.tsx
+++ b/src/components/tx-flow/common/TxStatusWidget/index.tsx
@@ -47,14 +47,7 @@ const TxStatusWidget = ({
   return (
     <Paper>
       <div className={css.header}>
-        <Typography
-          sx={{
-            fontWeight: '700',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
-          }}
-        >
+        <Typography fontWeight="700" display="flex" alignItems="center" gap={1}>
           <SafeLogo width={16} height={16} className={css.logo} />
           {isMessage ? 'Message' : 'Transaction'} status
         </Typography>
@@ -63,7 +56,9 @@ const TxStatusWidget = ({
           <CloseIcon />
         </IconButton>
       </div>
+
       <Divider />
+
       <div className={css.content}>
         <List className={css.status}>
           <ListItem>
diff --git a/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryFlowReview.tsx b/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryFlowReview.tsx
index 44cfabd742..578f308e37 100644
--- a/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryFlowReview.tsx
+++ b/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryFlowReview.tsx
@@ -31,14 +31,11 @@ export function CancelRecoveryFlowReview({ recovery }: { recovery: RecoveryQueue
 
   return (
     <SignOrExecuteForm onSubmit={onSubmit} isBatchable={false}>
-      <Typography
-        sx={{
-          mb: 1,
-        }}
-      >
+      <Typography mb={1}>
         All actions initiated by the Recoverer will be cancelled. The current signers will remain the signers of the
         Safe Account.
       </Typography>
+
       <ErrorMessage level="info">
         This transaction will initiate the cancellation of the{' '}
         {recovery.isMalicious ? 'malicious transaction' : 'recovery proposal'}. It requires other signer signatures in
diff --git a/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx b/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx
index 3c882e5558..8e128c2871 100644
--- a/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx
+++ b/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx
@@ -20,48 +20,20 @@ export function CancelRecoveryOverview({ onSubmit }: { onSubmit: () => void }):
 
   return (
     <TxCard>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          p: { md: 5 },
-        }}
-      >
+      <Box display="flex" flexDirection="column" alignItems="center" p={{ md: 5 }}>
         {/* TODO: Replace with correct icon when provided */}
         <ReplaceTxIcon />
 
-        <Typography
-          variant="h4"
-          sx={{
-            mb: 1,
-            mt: 5,
-            fontWeight: 700,
-            textAlign: 'center',
-          }}
-        >
+        <Typography mb={1} variant="h4" mt={5} fontWeight={700} textAlign="center">
           Do you want to cancel the Account recovery?
         </Typography>
 
-        <Typography
-          variant="body2"
-          sx={{
-            mb: 3,
-            textAlign: 'center',
-          }}
-        >
+        <Typography variant="body2" mb={3} textAlign="center">
           If it is an unwanted recovery proposal or you&apos;ve noticed something suspicious, you can cancel it at any
           time.
         </Typography>
 
-        <Box
-          sx={{
-            display: 'flex',
-            columnGap: 3,
-            rowGap: 1,
-            flexWrap: 'wrap',
-          }}
-        >
+        <Box display="flex" columnGap={3} rowGap={1} flexWrap="wrap">
           <Button variant="outlined" onClick={onClose} className={css.button} size="small">
             Go back
           </Button>
diff --git a/src/components/tx-flow/flows/NewSpendingLimit/CreateSpendingLimit.tsx b/src/components/tx-flow/flows/NewSpendingLimit/CreateSpendingLimit.tsx
index 0646c6197c..4d99ecfa03 100644
--- a/src/components/tx-flow/flows/NewSpendingLimit/CreateSpendingLimit.tsx
+++ b/src/components/tx-flow/flows/NewSpendingLimit/CreateSpendingLimit.tsx
@@ -74,13 +74,7 @@ export const CreateSpendingLimit = ({
 
           <TokenAmountInput balances={balances.items} selectedToken={selectedToken} validate={validateSpendingLimit} />
 
-          <Typography
-            variant="h4"
-            sx={{
-              fontWeight: 700,
-              mt: 3,
-            }}
-          >
+          <Typography variant="h4" fontWeight={700} mt={3}>
             Reset Timer
           </Typography>
           <Typography>
diff --git a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx
index 2da5365824..71db742fce 100644
--- a/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx
+++ b/src/components/tx-flow/flows/RecoverAccount/RecoverAccountFlowReview.tsx
@@ -111,11 +111,7 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
   return (
     <>
       <TxCard>
-        <Typography
-          sx={{
-            mb: 1,
-          }}
-        >
+        <Typography mb={1}>
           This transaction will reset the Account setup, changing the signers
           {newThreshold !== safe.threshold ? ' and threshold' : ''}.
         </Typography>
@@ -124,18 +120,8 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
 
         <Divider className={commonCss.nestedDivider} sx={{ mt: 'var(--space-2) !important' }} />
 
-        <Box
-          sx={{
-            my: 1,
-          }}
-        >
-          <Typography
-            variant="body2"
-            gutterBottom
-            sx={{
-              color: 'text.secondary',
-            }}
-          >
+        <Box my={1}>
+          <Typography variant="body2" color="text.secondary" gutterBottom>
             After recovery, Safe Account transactions will require:
           </Typography>
           <Typography>
@@ -149,7 +135,9 @@ export function RecoverAccountFlowReview({ params }: { params: RecoverAccountFlo
 
         <BlockaidBalanceChanges />
       </TxCard>
+
       <TxChecks executionOwner={safe.owners[0].value} />
+
       <TxCard>
         <>
           <ConfirmationTitle variant={ConfirmationTitleTypes.execute} />
diff --git a/src/components/tx-flow/flows/RejectTx/RejectTx.tsx b/src/components/tx-flow/flows/RejectTx/RejectTx.tsx
index 1bbd9eb96e..5e47cc5b50 100644
--- a/src/components/tx-flow/flows/RejectTx/RejectTx.tsx
+++ b/src/components/tx-flow/flows/RejectTx/RejectTx.tsx
@@ -20,25 +20,15 @@ const RejectTx = ({ txNonce }: RejectTxProps): ReactElement => {
 
   return (
     <SignOrExecuteForm isBatchable={false} isRejection>
-      <Typography
-        sx={{
-          mb: 2,
-        }}
-      >
+      <Typography mb={2}>
         To reject the transaction, a separate rejection transaction will be created to replace the original one.
       </Typography>
-      <Typography
-        sx={{
-          mb: 2,
-        }}
-      >
+
+      <Typography mb={2}>
         Transaction nonce: <b>{txNonce}</b>
       </Typography>
-      <Typography
-        sx={{
-          mb: 2,
-        }}
-      >
+
+      <Typography mb={2}>
         You will need to confirm the rejection transaction with your currently connected wallet.
       </Typography>
     </SignOrExecuteForm>
diff --git a/src/components/tx-flow/flows/RemoveGuard/ReviewRemoveGuard.tsx b/src/components/tx-flow/flows/RemoveGuard/ReviewRemoveGuard.tsx
index 04b89061b4..2b61d25a07 100644
--- a/src/components/tx-flow/flows/RemoveGuard/ReviewRemoveGuard.tsx
+++ b/src/components/tx-flow/flows/RemoveGuard/ReviewRemoveGuard.tsx
@@ -28,12 +28,10 @@ export const ReviewRemoveGuard = ({ params }: { params: RemoveGuardFlowProps })
   return (
     <SignOrExecuteForm onSubmit={onFormSubmit}>
       <Typography sx={({ palette }) => ({ color: palette.primary.light })}>Transaction guard</Typography>
+
       <EthHashInfo address={params.address} showCopyButton hasExplorer shortAddress={false} />
-      <Typography
-        sx={{
-          my: 2,
-        }}
-      >
+
+      <Typography my={2}>
         Once the transaction guard has been removed, checks by the transaction guard will not be conducted before or
         after any subsequent transactions.
       </Typography>
diff --git a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx b/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
index 2e13a1fa2e..4b15885928 100644
--- a/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
+++ b/src/components/tx-flow/flows/RemoveOwner/ReviewRemoveOwner.tsx
@@ -35,14 +35,7 @@ export const ReviewRemoveOwner = ({ params }: { params: RemoveOwnerFlowProps }):
   return (
     <SignOrExecuteForm onSubmit={onFormSubmit}>
       <Paper sx={{ backgroundColor: ({ palette }) => palette.warning.background, p: 2 }}>
-        <Typography
-          sx={{
-            color: 'text.secondary',
-            mb: 2,
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
+        <Typography color="text.secondary" mb={2} display="flex" alignItems="center">
           <SvgIcon component={MinusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
           Selected signer
         </Typography>
@@ -55,19 +48,10 @@ export const ReviewRemoveOwner = ({ params }: { params: RemoveOwnerFlowProps }):
         />
       </Paper>
       <ChangeSignerSetupWarning />
+
       <Divider className={commonCss.nestedDivider} />
-      <Box
-        sx={{
-          m: 1,
-        }}
-      >
-        <Typography
-          variant="body2"
-          sx={{
-            color: 'text.secondary',
-            mb: 0.5,
-          }}
-        >
+      <Box m={1}>
+        <Typography variant="body2" color="text.secondary" mb={0.5}>
           Any transaction requires the confirmation of:
         </Typography>
         <Typography>
diff --git a/src/components/tx-flow/flows/RemoveRecovery/RemoveRecoveryFlowOverview.tsx b/src/components/tx-flow/flows/RemoveRecovery/RemoveRecoveryFlowOverview.tsx
index 5fc67f9028..94dd3951b4 100644
--- a/src/components/tx-flow/flows/RemoveRecovery/RemoveRecoveryFlowOverview.tsx
+++ b/src/components/tx-flow/flows/RemoveRecovery/RemoveRecoveryFlowOverview.tsx
@@ -17,17 +17,13 @@ export function RemoveRecoveryFlowOverview({
         This transaction will remove the recovery module from your Safe Account. You will no longer be able to recover
         your Safe Account.
       </Typography>
+
       <Typography variant="body2">
         This Recoverer will not be able to initiate the recovery process once this transaction is executed.
       </Typography>
+
       <div data-testid="remove-recoverer-section">
-        <Typography
-          variant="body2"
-          sx={{
-            color: 'text.secondary',
-            mb: 1,
-          }}
-        >
+        <Typography variant="body2" color="text.secondary" mb={1}>
           Removing Recoverer
         </Typography>
 
@@ -42,7 +38,9 @@ export function RemoveRecoveryFlowOverview({
           />
         ))}
       </div>
+
       <Divider className={commonCss.nestedDivider} />
+
       <CardActions sx={{ mt: '0 !important' }}>
         <Button data-testid="next-btn" variant="contained" onClick={onSubmit}>
           Next
diff --git a/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx b/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
index 5c35127192..9bca66b02a 100644
--- a/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
+++ b/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
@@ -90,31 +90,13 @@ const InternalDeleteTxModal = ({
   return (
     <Dialog open onClose={onClose}>
       <DialogTitle>
-        <Box
-          data-testid="untrusted-token-warning"
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
-          <Typography
-            variant="h6"
-            sx={{
-              fontWeight: 700,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
-            }}
-          >
+        <Box data-testid="untrusted-token-warning" display="flex" alignItems="center">
+          <Typography variant="h6" fontWeight={700} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <SvgIcon component={InfoIcon} inheritViewBox color="error" />
             Delete this transaction?
           </Typography>
 
-          <Box
-            sx={{
-              flexGrow: 1,
-            }}
-          />
+          <Box flexGrow={1} />
 
           <ChainIndicator chainId={chainId} />
 
@@ -123,18 +105,16 @@ const InternalDeleteTxModal = ({
           </IconButton>
         </Box>
       </DialogTitle>
+
       <Divider />
+
       <DialogContent>
         <Box>
           Are you sure you want to delete this transaction? This will permanently remove it from the queue but the
           already given signatures will remain valid.
         </Box>
 
-        <Box
-          sx={{
-            mt: 2,
-          }}
-        >
+        <Box mt={2}>
           Make sure that you are aware of the{' '}
           <ExternalLink href="https://help.safe.global/en/articles/40836-why-do-i-need-to-pay-for-cancelling-a-transaction">
             potential risks
@@ -143,16 +123,14 @@ const InternalDeleteTxModal = ({
         </Box>
 
         {error && (
-          <Box
-            sx={{
-              mt: 2,
-            }}
-          >
+          <Box mt={2}>
             <ErrorMessage error={error}>Error deleting transaction</ErrorMessage>
           </Box>
         )}
       </DialogContent>
+
       <Divider />
+
       <DialogActions sx={{ padding: 3, justifyContent: 'space-between' }}>
         <Button size="small" variant="text" onClick={onCancel}>
           Keep it
diff --git a/src/components/tx-flow/flows/ReplaceTx/index.tsx b/src/components/tx-flow/flows/ReplaceTx/index.tsx
index 8f3978cda0..469dc6304b 100644
--- a/src/components/tx-flow/flows/ReplaceTx/index.tsx
+++ b/src/components/tx-flow/flows/ReplaceTx/index.tsx
@@ -71,14 +71,11 @@ const DeleteTxButton = ({
       <Typography variant="overline" className={css.or}>
         or
       </Typography>
-      <Typography
-        variant="body2"
-        sx={{
-          mb: 0.5,
-        }}
-      >
+
+      <Typography variant="body2" mb={0.5}>
         Don’t want to have this transaction anymore? Remove it permanently from the queue.
       </Typography>
+
       <Tooltip
         arrow
         placement="top"
@@ -97,6 +94,7 @@ const DeleteTxButton = ({
           </Track>
         </span>
       </Tooltip>
+
       {safeTxHash && isDeleting && (
         <DeleteTxModal onSuccess={onDeleteSuccess} onClose={onDeleteClose} safeTxHash={safeTxHash} />
       )}
@@ -126,22 +124,11 @@ const ReplaceTxMenu = ({
   return (
     <TxLayout title={`Reject transaction #${txNonce}`} step={0} hideNonce isReplacement>
       <TxCard>
-        <Box
-          sx={{
-            mt: 2,
-            textAlign: 'center',
-          }}
-        >
+        <Box mt={2} textAlign="center">
           <ReplaceTxIcon />
         </Box>
 
-        <Typography
-          variant="body2"
-          sx={{
-            mt: -1,
-            mb: 1,
-          }}
-        >
+        <Typography variant="body2" mt={-1} mb={1}>
           You can replace or reject this transaction on-chain. It requires gas fees and your signature.{' '}
           <Track {...REJECT_TX_EVENTS.READ_MORE}>
             <ExternalLink href="https://help.safe.global/en/articles/40836-why-do-i-need-to-pay-for-cancelling-a-transaction">
@@ -150,13 +137,7 @@ const ReplaceTxMenu = ({
           </Track>
         </Typography>
 
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-          }}
-        >
+        <Box display="flex" flexDirection="column" gap={2}>
           <Track {...REJECT_TX_EVENTS.REPLACE_TX_BUTTON} as="div">
             <ChoiceButton
               icon={CachedIcon}
diff --git a/src/components/tx-flow/flows/SignMessage/index.tsx b/src/components/tx-flow/flows/SignMessage/index.tsx
index b30c6d2063..6c608ba339 100644
--- a/src/components/tx-flow/flows/SignMessage/index.tsx
+++ b/src/components/tx-flow/flows/SignMessage/index.tsx
@@ -38,20 +38,9 @@ export const AppTitle = ({
   }
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    >
+    <Box display="flex" alignItems="center">
       <SafeAppIconCard src={appLogo} alt={name || 'The icon of the application'} width={32} height={32} />
-      <Typography
-        variant="h4"
-        sx={{
-          pl: 2,
-          fontWeight: 'bold',
-        }}
-      >
+      <Typography variant="h4" pl={2} fontWeight="bold">
         {title}
       </Typography>
     </Box>
diff --git a/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx b/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx
index 4ec58b07a3..1cc055aa17 100644
--- a/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx
+++ b/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx
@@ -120,51 +120,35 @@ const ReviewSignMessageOnChain = ({ message, method, requestId }: SignMessageOnC
   return (
     <SignOrExecuteForm onSubmit={handleSubmit}>
       <SendFromBlock />
+
       <InfoDetails title="Interact with SignMessageLib">
         <EthHashInfo address={signMessageAddress} shortAddress={false} showCopyButton hasExplorer />
       </InfoDetails>
+
       {isEIP712TypedData(decodedMessage) && (
         <ErrorBoundary fallback={<div>Error parsing data</div>}>
           <ApprovalEditor safeMessage={decodedMessage} />
         </ErrorBoundary>
       )}
+
       {safeTx && (
-        <Box
-          sx={{
-            pb: 1,
-          }}
-        >
+        <Box pb={1}>
           <HexEncodedData title="Data (hex-encoded)" hexData={safeTx.data.data} />
         </Box>
       )}
-      <Typography
-        sx={{
-          my: 1,
-        }}
-      >
+
+      <Typography my={1}>
         <b>Signing method:</b> <code>{method}</code>
       </Typography>
-      <Typography
-        sx={{
-          my: 2,
-        }}
-      >
+
+      <Typography my={2}>
         <b>Signing message:</b> {readableMessage && <CopyButton text={readableMessage} />}
       </Typography>
       <DecodedMsg message={decodedMessage} isInModal />
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          my: 2,
-        }}
-      >
+
+      <Box display="flex" alignItems="center" my={2}>
         <SvgIcon component={WarningIcon} inheritViewBox color="warning" />
-        <Typography
-          sx={{
-            ml: 1,
-          }}
-        >
+        <Typography ml={1}>
           Signing a message with your Safe Account requires a transaction on the blockchain
         </Typography>
       </Box>
diff --git a/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx b/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx
index c3c8f9c5bd..456e43d336 100644
--- a/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/StatusMessage.tsx
@@ -37,21 +37,9 @@ const StatusMessage = ({ status, error }: { status: PendingStatus; error?: Error
 
   return (
     <>
-      <Box
-        sx={{
-          paddingX: 3,
-          mt: 3,
-        }}
-      >
+      <Box px={3} mt={3}>
         <LoadingSpinner status={spinnerStatus} />
-        <Typography
-          data-testid="transaction-status"
-          variant="h6"
-          sx={{
-            marginTop: 2,
-            fontWeight: 700,
-          }}
-        >
+        <Typography data-testid="transaction-status" variant="h6" mt={2} fontWeight={700}>
           {stepInfo.description}
         </Typography>
       </Box>
diff --git a/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx b/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx
index f6196b7962..6952955195 100644
--- a/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/StatusStepper.tsx
@@ -17,12 +17,7 @@ const StatusStepper = ({ status, txHash }: { status?: PendingStatus; txHash?: st
       <Step>
         <StatusStep isLoading={!isProcessing} safeAddress={safeAddress}>
           <Box>
-            <Typography
-              variant="body2"
-              sx={{
-                fontWeight: '700',
-              }}
-            >
+            <Typography variant="body2" fontWeight="700">
               Your transaction
             </Typography>
             {txHash && (
@@ -41,12 +36,7 @@ const StatusStepper = ({ status, txHash }: { status?: PendingStatus; txHash?: st
       <Step>
         <StatusStep isLoading={!isProcessed} safeAddress={safeAddress}>
           <Box>
-            <Typography
-              variant="body2"
-              sx={{
-                fontWeight: '700',
-              }}
-            >
+            <Typography variant="body2" fontWeight="700">
               {isProcessed ? 'Processed' : 'Processing'}
             </Typography>
           </Box>
@@ -54,24 +44,14 @@ const StatusStepper = ({ status, txHash }: { status?: PendingStatus; txHash?: st
       </Step>
       <Step>
         <StatusStep isLoading={!isSuccess} safeAddress={safeAddress}>
-          <Typography
-            variant="body2"
-            sx={{
-              fontWeight: '700',
-            }}
-          >
+          <Typography variant="body2" fontWeight="700">
             {isSuccess ? 'Indexed' : 'Indexing'}
           </Typography>
         </StatusStep>
       </Step>
       <Step>
         <StatusStep isLoading={!isSuccess} safeAddress={safeAddress}>
-          <Typography
-            variant="body2"
-            sx={{
-              fontWeight: '700',
-            }}
-          >
+          <Typography variant="body2" fontWeight="700">
             Transaction is executed
           </Typography>
         </StatusStep>
diff --git a/src/components/tx-flow/flows/SuccessScreen/statuses/DefaultStatus.tsx b/src/components/tx-flow/flows/SuccessScreen/statuses/DefaultStatus.tsx
index f0c47c9fd3..3166e284a6 100644
--- a/src/components/tx-flow/flows/SuccessScreen/statuses/DefaultStatus.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/statuses/DefaultStatus.tsx
@@ -10,20 +10,8 @@ type Props = {
   error: undefined | Error
 }
 export const DefaultStatus = ({ error }: Props) => (
-  <Box
-    sx={{
-      paddingX: 3,
-      mt: 3,
-    }}
-  >
-    <Typography
-      data-testid="transaction-status"
-      variant="h6"
-      sx={{
-        marginTop: 2,
-        fontWeight: 700,
-      }}
-    >
+  <Box px={3} mt={3}>
+    <Typography data-testid="transaction-status" variant="h6" mt={2} fontWeight={700}>
       {error ? TRANSACTION_FAILED : TRANSACTION_SUCCESSFUL}
     </Typography>
     {error && (
diff --git a/src/components/tx-flow/flows/SuccessScreen/statuses/IndexingStatus.tsx b/src/components/tx-flow/flows/SuccessScreen/statuses/IndexingStatus.tsx
index 36e195a0de..7b98f3da14 100644
--- a/src/components/tx-flow/flows/SuccessScreen/statuses/IndexingStatus.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/statuses/IndexingStatus.tsx
@@ -3,20 +3,8 @@ import classNames from 'classnames'
 import css from '@/components/tx-flow/flows/SuccessScreen/styles.module.css'
 
 export const IndexingStatus = () => (
-  <Box
-    sx={{
-      paddingX: 3,
-      mt: 3,
-    }}
-  >
-    <Typography
-      data-testid="transaction-status"
-      variant="h6"
-      sx={{
-        marginTop: 2,
-        fontWeight: 700,
-      }}
-    >
+  <Box px={3} mt={3}>
+    <Typography data-testid="transaction-status" variant="h6" mt={2} fontWeight={700}>
       Transaction was processed
     </Typography>
     <Box className={classNames(css.instructions, css.infoBg)}>
diff --git a/src/components/tx-flow/flows/SuccessScreen/statuses/ProcessingStatus.tsx b/src/components/tx-flow/flows/SuccessScreen/statuses/ProcessingStatus.tsx
index 86c97c8918..58a97a052f 100644
--- a/src/components/tx-flow/flows/SuccessScreen/statuses/ProcessingStatus.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/statuses/ProcessingStatus.tsx
@@ -8,28 +8,11 @@ type Props = {
   pendingTx: PendingTx
 }
 export const ProcessingStatus = ({ txId, pendingTx }: Props) => (
-  <Box
-    sx={{
-      paddingX: 3,
-      mt: 3,
-    }}
-  >
-    <Typography
-      data-testid="transaction-status"
-      variant="h6"
-      sx={{
-        marginTop: 2,
-        fontWeight: 700,
-      }}
-    >
+  <Box px={3} mt={3}>
+    <Typography data-testid="transaction-status" variant="h6" mt={2} fontWeight={700}>
       Transaction is now processing
     </Typography>
-    <Typography
-      variant="body2"
-      sx={{
-        mb: 3,
-      }}
-    >
+    <Typography variant="body2" mb={3}>
       The transaction was confirmed and is now being processed.
     </Typography>
     <Box>
diff --git a/src/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx.tsx b/src/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx.tsx
index 7551b40aa7..80f51861f4 100644
--- a/src/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx.tsx
+++ b/src/components/tx-flow/flows/TokenTransfer/ReviewSpendingLimitTx.tsx
@@ -147,13 +147,7 @@ const ReviewSpendingLimitTx = ({
 
         {isRejectedByUser && <WalletRejectionError />}
 
-        <Typography
-          variant="body2"
-          sx={{
-            color: 'primary.light',
-            textAlign: 'center',
-          }}
-        >
+        <Typography variant="body2" color="primary.light" textAlign="center">
           You&apos;re about to create a transaction and will need to confirm it with your currently connected wallet.
         </Typography>
 
diff --git a/src/components/tx-flow/flows/UpdateSafe/UpdateSafeReview.tsx b/src/components/tx-flow/flows/UpdateSafe/UpdateSafeReview.tsx
index fa383af145..4fe31a6fda 100644
--- a/src/components/tx-flow/flows/UpdateSafe/UpdateSafeReview.tsx
+++ b/src/components/tx-flow/flows/UpdateSafe/UpdateSafeReview.tsx
@@ -29,36 +29,23 @@ export const UpdateSafeReview = () => {
 
   return (
     <SignOrExecuteForm>
-      <Typography
-        sx={{
-          mb: 2,
-        }}
-      >
+      <Typography mb={2}>
         Update now to take advantage of new features and the highest security standards available.
       </Typography>
-      <Typography
-        sx={{
-          mb: 2,
-        }}
-      >
+
+      <Typography mb={2}>
         To check details about updates added by this smart contract version please visit{' '}
         <ExternalLink href={`https://github.com/safe-global/safe-contracts/releases/tag/v${latestSafeVersion}`}>
           latest Safe Account contracts changelog
         </ExternalLink>
       </Typography>
-      <Typography
-        sx={{
-          mb: 2,
-        }}
-      >
+
+      <Typography mb={2}>
         You will need to confirm this update just like any other transaction. This means other signers will have to
         confirm the update in case more than one confirmation is required for this Safe Account.
       </Typography>
-      <Typography
-        sx={{
-          mb: 2,
-        }}
-      >
+
+      <Typography mb={2}>
         <b>Warning:</b> this upgrade will invalidate all unexecuted transactions. This means you will be unable to
         access or execute them after the upgrade. Please make sure to execute any remaining transactions before
         upgrading.
diff --git a/src/components/tx/AdvancedParams/AdvancedParamsForm.tsx b/src/components/tx/AdvancedParams/AdvancedParamsForm.tsx
index 1f341649a7..516bdae5e2 100644
--- a/src/components/tx/AdvancedParams/AdvancedParamsForm.tsx
+++ b/src/components/tx/AdvancedParams/AdvancedParamsForm.tsx
@@ -73,12 +73,7 @@ const AdvancedParamsForm = ({ params, ...props }: AdvancedParamsFormProps) => {
           <DialogContent>
             <Grid container spacing={2}>
               <Grid item xs={12}>
-                <Typography
-                  variant="body1"
-                  sx={{
-                    fontWeight: 700,
-                  }}
-                >
+                <Typography variant="body1" fontWeight={700}>
                   Execution parameters
                 </Typography>
               </Grid>
@@ -133,11 +128,7 @@ const AdvancedParamsForm = ({ params, ...props }: AdvancedParamsFormProps) => {
             </Grid>
 
             {/* Help link */}
-            <Typography
-              sx={{
-                mt: 2,
-              }}
-            >
+            <Typography mt={2}>
               <ExternalLink href={HelpCenterArticle.ADVANCED_PARAMS}>
                 How can I configure these parameters manually?
               </ExternalLink>
diff --git a/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx b/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
index 6e63db2848..a263aed275 100644
--- a/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
+++ b/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
@@ -43,24 +43,17 @@ const EditableApprovalItem = ({
   return (
     <Stack
       direction="row"
+      alignItems="center"
+      gap={2}
       className={css.approvalField}
       onClick={readOnly ? handleEditMode : undefined}
-      sx={{
-        alignItems: 'center',
-        gap: 2,
-      }}
     >
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: '4px',
-        }}
-      >
+      <Box display="flex" flexDirection="row" alignItems="center" gap="4px">
         <TokenIcon size={32} logoUri={approval.tokenInfo?.logoUri} tokenSymbol={approval.tokenInfo?.symbol} />
       </Box>
+
       <ApprovalValueField name={name} tx={approval} readOnly={readOnly} />
+
       <Track {...MODALS_EVENTS.EDIT_APPROVALS} label={readOnly ? 'edit' : 'save'}>
         {readOnly ? (
           <IconButton color="border" onClick={handleEditMode} title="Edit">
diff --git a/src/components/tx/BalanceInfo/index.tsx b/src/components/tx/BalanceInfo/index.tsx
index cb7e4a2212..5b600d56d8 100644
--- a/src/components/tx/BalanceInfo/index.tsx
+++ b/src/components/tx/BalanceInfo/index.tsx
@@ -9,12 +9,7 @@ const BalanceInfo = () => {
 
   return (
     <div className={css.container}>
-      <Typography
-        variant="body2"
-        sx={{
-          color: 'primary.light',
-        }}
-      >
+      <Typography variant="body2" color="primary.light">
         <b>Wallet balance:</b> <WalletBalance balance={balance} />
       </Typography>
     </div>
diff --git a/src/components/tx/ConfirmationOrder/ConfirmationOrderHeader.tsx b/src/components/tx/ConfirmationOrder/ConfirmationOrderHeader.tsx
index 9b003220fe..80603fe38d 100644
--- a/src/components/tx/ConfirmationOrder/ConfirmationOrderHeader.tsx
+++ b/src/components/tx/ConfirmationOrder/ConfirmationOrderHeader.tsx
@@ -32,37 +32,17 @@ const ConfirmationOrderHeader = ({ blocks, showArrow }: { blocks: [InfoBlock, In
           }}
         >
           {block.tokenInfo && (
-            <Box
-              sx={{
-                width: 40,
-                mr: 2,
-              }}
-            >
+            <Box width={40} mr={2}>
               <TokenIcon size={40} logoUri={block.tokenInfo.logoUri || ''} tokenSymbol={block.tokenInfo.symbol} />
             </Box>
           )}
 
-          <Box
-            sx={{
-              flex: 1,
-            }}
-          >
-            <Typography
-              variant="body2"
-              sx={{
-                color: 'primary.light',
-              }}
-            >
+          <Box flex={1}>
+            <Typography variant="body2" color="primary.light">
               {block.label}
             </Typography>
 
-            <Typography
-              variant="h4"
-              component="div"
-              sx={{
-                fontWeight: 'bold',
-              }}
-            >
+            <Typography variant="h4" fontWeight="bold" component="div">
               {block.tokenInfo ? (
                 <TokenAmount
                   tokenSymbol={block.tokenInfo.symbol}
@@ -77,15 +57,15 @@ const ConfirmationOrderHeader = ({ blocks, showArrow }: { blocks: [InfoBlock, In
 
           {showArrow && index === 0 && (
             <Box
+              width={40}
+              height={40}
+              p={1}
+              borderRadius="100%"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
               sx={{
                 bgcolor: 'background.paper',
-                width: 40,
-                height: 40,
-                p: 1,
-                borderRadius: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
                 position: 'absolute',
                 right: -20,
                 top: '50%',
diff --git a/src/components/tx/DecodedTx/index.tsx b/src/components/tx/DecodedTx/index.tsx
index 39a04fcbf3..d4e68fbec5 100644
--- a/src/components/tx/DecodedTx/index.tsx
+++ b/src/components/tx/DecodedTx/index.tsx
@@ -30,12 +30,10 @@ type DecodedTxProps = {
 
 export const Divider = () => (
   <Box
-    sx={{
-      borderBottom: '1px solid var(--color-border-light)',
-      width: 'calc(100% + 32px)',
-      my: 2,
-      ml: '-16px !important',
-    }}
+    borderBottom="1px solid var(--color-border-light)"
+    width="calc(100% + 32px)"
+    my={2}
+    sx={{ ml: '-16px !important' }}
   />
 )
 
diff --git a/src/components/tx/ExecutionMethodSelector/index.tsx b/src/components/tx/ExecutionMethodSelector/index.tsx
index c10c180c98..3e78e6fd0e 100644
--- a/src/components/tx/ExecutionMethodSelector/index.tsx
+++ b/src/components/tx/ExecutionMethodSelector/index.tsx
@@ -57,12 +57,7 @@ const _ExecutionMethodSelector = ({
               sx={{ flex: 1 }}
               value={ExecutionMethod.RELAY}
               label={
-                <Typography
-                  className={css.radioLabel}
-                  sx={{
-                    whiteSpace: 'nowrap',
-                  }}
-                >
+                <Typography className={css.radioLabel} whiteSpace="nowrap">
                   Sponsored by
                   <SponsoredBy chainId={chain?.chainId ?? ''} />
                 </Typography>
@@ -85,6 +80,7 @@ const _ExecutionMethodSelector = ({
           </RadioGroup>
         </FormControl>
       </div>
+
       {shouldRelay && relays ? <RemainingRelays relays={relays} tooltip={tooltip} /> : wallet ? <BalanceInfo /> : null}
     </Box>
   )
diff --git a/src/components/tx/RemainingRelays/index.tsx b/src/components/tx/RemainingRelays/index.tsx
index 3a84ccaea7..8bd3051463 100644
--- a/src/components/tx/RemainingRelays/index.tsx
+++ b/src/components/tx/RemainingRelays/index.tsx
@@ -13,15 +13,7 @@ const RemainingRelays = ({ relays, tooltip }: { relays?: RelayCountResponse; too
 
   return (
     <div className={css.container}>
-      <Typography
-        variant="body2"
-        sx={{
-          color: 'primary.light',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 0.5,
-        }}
-      >
+      <Typography variant="body2" color="primary.light" display="flex" alignItems="center" gap={0.5}>
         <b>{relays?.remaining ?? MAX_DAY_RELAYS}</b> free transactions left today
         <Tooltip title={tooltip} placement="top" arrow>
           <span style={{ lineHeight: 0 }}>
diff --git a/src/components/tx/SendFromBlock/index.tsx b/src/components/tx/SendFromBlock/index.tsx
index 300da34b4b..5c1dc7f57b 100644
--- a/src/components/tx/SendFromBlock/index.tsx
+++ b/src/components/tx/SendFromBlock/index.tsx
@@ -10,24 +10,15 @@ const SendFromBlock = ({ title }: { title?: string }): ReactElement => {
   const address = useSafeAddress()
 
   return (
-    <Box
-      className={css.container}
-      sx={{
-        pb: 2,
-        mb: 2,
-      }}
-    >
-      <Typography
-        sx={{
-          color: 'text.secondary',
-          pb: 1,
-        }}
-      >
+    <Box className={css.container} pb={2} mb={2}>
+      <Typography color="text.secondary" pb={1}>
         {title || 'Sending from'}
       </Typography>
+
       <Typography variant="body2" component="div">
         <EthHashInfo address={address} shortAddress={false} hasExplorer showCopyButton />
       </Typography>
+
       <SouthIcon className={css.arrow} />
     </Box>
   )
diff --git a/src/components/tx/SignOrExecuteForm/BatchButton.tsx b/src/components/tx/SignOrExecuteForm/BatchButton.tsx
index 2baeb91613..a85893827e 100644
--- a/src/components/tx/SignOrExecuteForm/BatchButton.tsx
+++ b/src/components/tx/SignOrExecuteForm/BatchButton.tsx
@@ -29,14 +29,7 @@ const BatchButton = ({
         </Track>
       </span>
     </Tooltip>
-    <Box
-      sx={{
-        display: ['none', 'flex'],
-        flexDirection: 'column',
-        justifyContent: 'center',
-        color: 'border.main',
-      }}
-    >
+    <Box display={['none', 'flex']} flexDirection="column" justifyContent="center" color="border.main">
       {' '}
       <Divider
         sx={{
diff --git a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
index daaa6f09b4..81d85341e8 100644
--- a/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/ExecuteForm.tsx
@@ -176,21 +176,13 @@ export const ExecuteForm = ({
         )}
 
         {submitError && (
-          <Box
-            sx={{
-              mt: 1,
-            }}
-          >
+          <Box mt={1}>
             <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
           </Box>
         )}
 
         {isRejectedByUser && (
-          <Box
-            sx={{
-              mt: 1,
-            }}
-          >
+          <Box mt={1}>
             <WalletRejectionError />
           </Box>
         )}
diff --git a/src/components/tx/SignOrExecuteForm/ExecuteThroughRoleForm/index.tsx b/src/components/tx/SignOrExecuteForm/ExecuteThroughRoleForm/index.tsx
index 091c86c7e5..b8fcc7a600 100644
--- a/src/components/tx/SignOrExecuteForm/ExecuteThroughRoleForm/index.tsx
+++ b/src/components/tx/SignOrExecuteForm/ExecuteThroughRoleForm/index.tsx
@@ -143,6 +143,7 @@ export const ExecuteThroughRoleForm = ({
   return (
     <>
       <Divider className={commonCss.nestedDivider} sx={{ pt: 1 }} />
+
       <form onSubmit={handleSubmit}>
         {!permissionsError && (
           <>
@@ -164,11 +165,7 @@ export const ExecuteThroughRoleForm = ({
         )}
 
         {permissionsError && (
-          <Box
-            sx={{
-              mb: 2,
-            }}
-          >
+          <Box mb={2}>
             <Typography sx={{ mb: 2 }}>
               You are a member of the <Role>{role.roleKey}</Role> role but it does not allow this transaction.
             </Typography>
@@ -177,26 +174,14 @@ export const ExecuteThroughRoleForm = ({
           </Box>
         )}
 
-        <Typography
-          variant="caption"
-          sx={{
-            display: 'flex',
-            gap: '2px',
-            color: 'text.secondary',
-            mb: 2,
-          }}
-        >
+        <Typography variant="caption" display="flex" gap="2px" color="text.secondary" sx={{ mb: 2 }}>
           Powered by
           <img src="/images/transactions/zodiac-roles.svg" width={16} height={16} alt="Zodiac Roles" />
           <span className={css.zodiac}>Zodiac</span>
         </Typography>
 
         {multiSendImpossible && (
-          <Box
-            sx={{
-              mt: 1,
-            }}
-          >
+          <Box mt={1}>
             <ErrorMessage>
               The current configuration of the Zodiac Roles module does not allow executing multiple transactions in
               batch.
@@ -205,22 +190,14 @@ export const ExecuteThroughRoleForm = ({
         )}
 
         {!walletCanPay ? (
-          <Box
-            sx={{
-              mt: 1,
-            }}
-          >
+          <Box mt={1}>
             <ErrorMessage level="info">
               Your connected wallet doesn&apos;t have enough funds to execute this transaction.
             </ErrorMessage>
           </Box>
         ) : (
           gasLimitError && (
-            <Box
-              sx={{
-                mt: 1,
-              }}
-            >
+            <Box mt={1}>
               <ErrorMessage error={gasLimitError}>
                 This transaction will most likely fail. To save gas costs, avoid creating this transaction.
               </ErrorMessage>
@@ -229,30 +206,18 @@ export const ExecuteThroughRoleForm = ({
         )}
 
         {submitError && (
-          <Box
-            sx={{
-              mt: 1,
-            }}
-          >
+          <Box mt={1}>
             <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
           </Box>
         )}
 
         {isRejectedByUser && (
-          <Box
-            sx={{
-              mt: 1,
-            }}
-          >
+          <Box mt={1}>
             <WalletRejectionError />
           </Box>
         )}
 
-        <Box
-          sx={{
-            mt: 3,
-          }}
-        >
+        <Box mt={3}>
           <Divider className={commonCss.nestedDivider} />
         </Box>
 
diff --git a/src/components/tx/SignOrExecuteForm/MigrateToL2Information.tsx b/src/components/tx/SignOrExecuteForm/MigrateToL2Information.tsx
index a6ff0617c2..6240d7b4de 100644
--- a/src/components/tx/SignOrExecuteForm/MigrateToL2Information.tsx
+++ b/src/components/tx/SignOrExecuteForm/MigrateToL2Information.tsx
@@ -13,12 +13,7 @@ export const MigrateToL2Information = ({
     <Box>
       <Alert severity="info" icon={<SvgIcon component={InfoOutlinedIcon} color="info" />}>
         <AlertTitle>
-          <Typography
-            variant="h5"
-            sx={{
-              fontWeight: 700,
-            }}
-          >
+          <Typography variant="h5" fontWeight={700}>
             Migration to compatible base contract
           </Typography>
         </AlertTitle>
@@ -29,18 +24,8 @@ export const MigrateToL2Information = ({
         </Typography>
 
         {newMasterCopy && (
-          <Box
-            sx={{
-              mt: 2,
-            }}
-          >
-            <Typography
-              variant="overline"
-              sx={{
-                color: 'text.secondary',
-                fontWeight: 700,
-              }}
-            >
+          <Box mt={2}>
+            <Typography variant="overline" color="text.secondary" fontWeight={700}>
               New contract
             </Typography>
             <NamedAddressInfo address={newMasterCopy} shortAddress={false} showCopyButton hasExplorer />
diff --git a/src/components/tx/SignOrExecuteForm/SignForm.tsx b/src/components/tx/SignOrExecuteForm/SignForm.tsx
index 8673d781cc..2185171e00 100644
--- a/src/components/tx/SignOrExecuteForm/SignForm.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignForm.tsx
@@ -104,6 +104,7 @@ export const SignForm = ({
   return (
     <form onSubmit={handleSubmit}>
       {hasSigned && <ErrorMessage level="warning">You have already signed this transaction.</ErrorMessage>}
+
       {cannotPropose ? (
         <NonOwnerError />
       ) : (
@@ -111,16 +112,15 @@ export const SignForm = ({
           <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
         )
       )}
+
       {isRejectedByUser && (
-        <Box
-          sx={{
-            mt: 1,
-          }}
-        >
+        <Box mt={1}>
           <WalletRejectionError />
         </Box>
       )}
+
       <Divider className={commonCss.nestedDivider} sx={{ pt: 3 }} />
+
       <CardActions>
         <Stack
           sx={{
diff --git a/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx b/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx
index 7514315a86..d6c6c20f71 100644
--- a/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx
@@ -4,15 +4,7 @@ import { Box } from '@mui/material'
 
 const SignOrExecuteSkeleton = () => (
   <TxCard>
-    <Box
-      sx={{
-        minHeight: '38svh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        mb: 5,
-      }}
-    >
+    <Box minHeight="38svh" display="flex" alignItems="center" justifyContent="center" mb={5}>
       <LoadingSpinner status={SpinnerStatus.PROCESSING} />
     </Box>
   </TxCard>
diff --git a/src/components/tx/SuccessMessage/index.tsx b/src/components/tx/SuccessMessage/index.tsx
index e7df90bba0..9f3ce22916 100644
--- a/src/components/tx/SuccessMessage/index.tsx
+++ b/src/components/tx/SuccessMessage/index.tsx
@@ -10,12 +10,7 @@ const SuccessMessage = ({ children, className }: { children: ReactNode; classNam
       <div className={css.message}>
         <SvgIcon component={CheckIcon} color="success" inheritViewBox fontSize="small" />
 
-        <Typography
-          variant="body2"
-          sx={{
-            width: '100%',
-          }}
-        >
+        <Typography variant="body2" width="100%">
           {children}
         </Typography>
       </div>
diff --git a/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap b/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap
index 86ded94068..43b9d23997 100644
--- a/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap
+++ b/src/components/tx/confirmation-views/ChangeThreshold/__snapshots__/ChangeThreshold.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ChangeThreshold should display the ChangeThreshold component with the n
 <div>
   <div>
     <p
-      class="MuiTypography-root MuiTypography-body2 css-ugmpf3-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body2 css-1q9800n-MuiTypography-root"
     >
       Any transaction will require the confirmation of:
     </p>
diff --git a/src/components/tx/confirmation-views/ChangeThreshold/index.tsx b/src/components/tx/confirmation-views/ChangeThreshold/index.tsx
index 0841eefdc7..ba7faedd75 100644
--- a/src/components/tx/confirmation-views/ChangeThreshold/index.tsx
+++ b/src/components/tx/confirmation-views/ChangeThreshold/index.tsx
@@ -21,14 +21,9 @@ function ChangeThreshold({ txDetails }: ChangeThresholdProps) {
   return (
     <>
       <ChangeSignerSetupWarning />
+
       <div>
-        <Typography
-          variant="body2"
-          sx={{
-            color: 'text.secondary',
-            mb: 0.5,
-          }}
-        >
+        <Typography variant="body2" color="text.secondary" mb={0.5}>
           Any transaction will require the confirmation of:
         </Typography>
 
diff --git a/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap b/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap
index f83c827e1f..68b2eb3519 100644
--- a/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap
+++ b/src/components/tx/confirmation-views/SettingsChange/__snapshots__/SettingsChange.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
     style="--Paper-shadow: none;"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-k1tjez-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-qzqzle-MuiTypography-root"
     >
       <mock-icon
         aria-hidden=""
diff --git a/src/components/tx/confirmation-views/SettingsChange/index.tsx b/src/components/tx/confirmation-views/SettingsChange/index.tsx
index 8037c7654d..425d27a8d8 100644
--- a/src/components/tx/confirmation-views/SettingsChange/index.tsx
+++ b/src/components/tx/confirmation-views/SettingsChange/index.tsx
@@ -27,14 +27,7 @@ const SettingsChange: React.FC<SettingsChangeProps> = ({ txInfo: { settingsInfo
     <>
       {'oldOwner' in settingsInfo && (
         <Paper sx={{ backgroundColor: ({ palette }) => palette.warning.background, p: 2 }}>
-          <Typography
-            sx={{
-              color: 'text.secondary',
-              mb: 2,
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
+          <Typography color="text.secondary" mb={2} display="flex" alignItems="center">
             <SvgIcon component={MinusIcon} inheritViewBox fontSize="small" sx={{ mr: 1 }} />
             Previous signer
           </Typography>
@@ -47,9 +40,12 @@ const SettingsChange: React.FC<SettingsChangeProps> = ({ txInfo: { settingsInfo
           />
         </Paper>
       )}
+
       {'owner' in settingsInfo && !hasNewOwner && <OwnerList owners={[settingsInfo.owner]} />}
       {hasNewOwner && <OwnerList owners={[{ name: params.newOwner.name, value: params.newOwner.address }]} />}
+
       {shouldShowChangeSigner && <ChangeSignerSetupWarning />}
+
       {'threshold' in settingsInfo && (
         <>
           <Divider className={commonCss.nestedDivider} />
diff --git a/src/components/tx/security/blockaid/BlockaidBalanceChange.tsx b/src/components/tx/security/blockaid/BlockaidBalanceChange.tsx
index 20433ffd18..4b5d60f37b 100644
--- a/src/components/tx/security/blockaid/BlockaidBalanceChange.tsx
+++ b/src/components/tx/security/blockaid/BlockaidBalanceChange.tsx
@@ -41,23 +41,11 @@ const FungibleBalanceChange = ({ change, asset }: { asset: AssetDiff['asset']; c
 
   return (
     <>
-      <Typography
-        variant="body2"
-        sx={{
-          mx: 1,
-        }}
-      >
+      <Typography variant="body2" mx={1}>
         {change.value ? formatAmount(change.value) : 'unknown'}
       </Typography>
       <TokenIcon size={16} logoUri={logoUri} tokenSymbol={asset.symbol} />
-      <Typography
-        variant="body2"
-        sx={{
-          fontWeight: 700,
-          display: 'inline',
-          ml: 0.5,
-        }}
-      >
+      <Typography variant="body2" fontWeight={700} display="inline" ml={0.5}>
         {asset.symbol}
       </Typography>
       <span style={{ margin: 'auto' }} />
@@ -78,23 +66,11 @@ const NFTBalanceChange = ({
   return (
     <>
       {asset.symbol ? (
-        <Typography
-          variant="body2"
-          sx={{
-            fontWeight: 700,
-            display: 'inline',
-            ml: 1,
-          }}
-        >
+        <Typography variant="body2" fontWeight={700} display="inline" ml={1}>
           {asset.symbol}
         </Typography>
       ) : (
-        <Typography
-          variant="body2"
-          sx={{
-            ml: 1,
-          }}
-        >
+        <Typography variant="body2" ml={1}>
           <EthHashInfo
             address={asset.address}
             chainId={chainId}
@@ -108,13 +84,7 @@ const NFTBalanceChange = ({
           />
         </Typography>
       )}
-      <Typography
-        variant="subtitle2"
-        className={css.nftId}
-        sx={{
-          ml: 1,
-        }}
-      >
+      <Typography variant="subtitle2" className={css.nftId} ml={1}>
         #{Number(change.token_id)}
       </Typography>
       <span style={{ margin: 'auto' }} />
@@ -162,12 +132,7 @@ const BalanceChanges = () => {
             color: ({ palette }) => palette.text.secondary,
           }}
         />
-        <Typography
-          variant="body2"
-          sx={{
-            color: 'text.secondary',
-          }}
-        >
+        <Typography variant="body2" color="text.secondary">
           Calculating...
         </Typography>
       </div>
@@ -175,26 +140,14 @@ const BalanceChanges = () => {
   }
   if (error) {
     return (
-      <Typography
-        variant="body2"
-        sx={{
-          color: 'text.secondary',
-          justifySelf: 'flex-end',
-        }}
-      >
+      <Typography variant="body2" color="text.secondary" sx={{ justifySelf: 'flex-end' }}>
         Could not calculate balance changes.
       </Typography>
     )
   }
   if (totalBalanceChanges === 0) {
     return (
-      <Typography
-        variant="body2"
-        sx={{
-          color: 'text.secondary',
-          justifySelf: 'flex-end',
-        }}
-      >
+      <Typography variant="body2" color="text.secondary" sx={{ justifySelf: 'flex-end' }}>
         No balance change detected
       </Typography>
     )
@@ -227,13 +180,7 @@ export const BlockaidBalanceChanges = () => {
 
   return (
     <div className={css.box}>
-      <Typography
-        variant="subtitle2"
-        sx={{
-          fontWeight: 700,
-          flexShrink: 0,
-        }}
-      >
+      <Typography variant="subtitle2" fontWeight={700} flexShrink={0}>
         Balance change
         <Tooltip
           title={
diff --git a/src/components/tx/security/tenderly/index.tsx b/src/components/tx/security/tenderly/index.tsx
index 9ad2f4c504..b6641be266 100644
--- a/src/components/tx/security/tenderly/index.tsx
+++ b/src/components/tx/security/tenderly/index.tsx
@@ -65,12 +65,7 @@ const TxSimulationBlock = ({ transactions, disabled, gasLimit, executionOwner }:
   return (
     <Paper variant="outlined" className={sharedCss.wrapper}>
       <div className={css.wrapper}>
-        <Typography
-          variant="body2"
-          sx={{
-            fontWeight: 700,
-          }}
-        >
+        <Typography variant="body2" fontWeight={700}>
           Run a simulation
           <Tooltip
             title="This transaction can be simulated before execution to ensure that it will be succeed, generating a detailed report of the transaction execution."
@@ -101,6 +96,7 @@ const TxSimulationBlock = ({ transactions, disabled, gasLimit, executionOwner }:
           />
         </Typography>
       </div>
+
       <div className={sharedCss.result}>
         {isLoading ? (
           <CircularProgress
@@ -177,12 +173,7 @@ export const TxSimulationMessage = () => {
   if (!isSuccess || isError || isCallTraceError) {
     return (
       <Alert severity="error" sx={{ border: 'unset' }}>
-        <Typography
-          variant="body2"
-          sx={{
-            fontWeight: 700,
-          }}
-        >
+        <Typography variant="body2" fontWeight={700}>
           Simulation failed
         </Typography>
         {requestError ? (
@@ -209,12 +200,7 @@ export const TxSimulationMessage = () => {
 
   return (
     <Alert severity="info" sx={{ border: 'unset' }}>
-      <Typography
-        variant="body2"
-        sx={{
-          fontWeight: 700,
-        }}
-      >
+      <Typography variant="body2" fontWeight={700}>
         Simulation successful
       </Typography>
       Full simulation report is available <ExternalLink href={simulationLink}>on Tenderly</ExternalLink>.
diff --git a/src/components/welcome/WelcomeLogin/WalletLogin.tsx b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
index a2d137faf8..9486b34edf 100644
--- a/src/components/welcome/WelcomeLogin/WalletLogin.tsx
+++ b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
@@ -18,28 +18,15 @@ const WalletLogin = ({ onLogin, onContinue }: { onLogin: () => void; onContinue:
       <Box sx={{ width: '100%' }}>
         <Button variant="contained" sx={{ padding: '8px 16px' }} fullWidth onClick={onContinue}>
           <Box
-            sx={{
-              width: '100%',
-              justifyContent: 'space-between',
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 1,
-            }}
+            width="100%"
+            justifyContent="space-between"
+            display="flex"
+            flexDirection="row"
+            alignItems="center"
+            gap={1}
           >
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-              }}
-            >
-              <Typography
-                variant="subtitle2"
-                sx={{
-                  fontWeight: 700,
-                }}
-              >
+            <Box display="flex" flexDirection="column" alignItems="flex-start">
+              <Typography variant="subtitle2" fontWeight={700}>
                 Continue with {wallet.label}
               </Typography>
               {wallet.address && (
diff --git a/src/components/welcome/WelcomeLogin/index.tsx b/src/components/welcome/WelcomeLogin/index.tsx
index 00d493ab08..6f1b507faf 100644
--- a/src/components/welcome/WelcomeLogin/index.tsx
+++ b/src/components/welcome/WelcomeLogin/index.tsx
@@ -42,22 +42,11 @@ const WelcomeLogin = () => {
       <Box className={css.loginContent}>
         <SvgIcon component={SafeLogo} inheritViewBox sx={{ height: '24px', width: '80px', ml: '-8px' }} />
 
-        <Typography
-          variant="h6"
-          sx={{
-            mt: 6,
-            fontWeight: 700,
-          }}
-        >
+        <Typography variant="h6" mt={6} fontWeight={700}>
           Get started
         </Typography>
 
-        <Typography
-          sx={{
-            mb: 2,
-            textAlign: 'center',
-          }}
-        >
+        <Typography mb={2} textAlign="center">
           {wallet
             ? 'Open your existing Safe Accounts or create a new one'
             : 'Connect your wallet to create a new Safe Account or open an existing one'}
@@ -70,13 +59,7 @@ const WelcomeLogin = () => {
         {!wallet && (
           <>
             <Divider sx={{ mt: 2, mb: 2, width: '100%' }}>
-              <Typography
-                variant="overline"
-                sx={{
-                  color: 'text.secondary',
-                  fontWeight: 700,
-                }}
-              >
+              <Typography color="text.secondary" fontWeight={700} variant="overline">
                 or
               </Typography>
             </Divider>
diff --git a/src/features/counterfactual/ActivateAccountButton.tsx b/src/features/counterfactual/ActivateAccountButton.tsx
index a67719c663..c6cd0e3b7e 100644
--- a/src/features/counterfactual/ActivateAccountButton.tsx
+++ b/src/features/counterfactual/ActivateAccountButton.tsx
@@ -38,13 +38,7 @@ const ActivateAccountButton = () => {
             >
               {isProcessing ? (
                 <>
-                  <Typography
-                    variant="body2"
-                    component="span"
-                    sx={{
-                      mr: 1,
-                    }}
-                  >
+                  <Typography variant="body2" component="span" mr={1}>
                     Processing
                   </Typography>
                   <CircularProgress size={16} />
diff --git a/src/features/counterfactual/ActivateAccountFlow.tsx b/src/features/counterfactual/ActivateAccountFlow.tsx
index f81fe272fe..bf9cf65f67 100644
--- a/src/features/counterfactual/ActivateAccountFlow.tsx
+++ b/src/features/counterfactual/ActivateAccountFlow.tsx
@@ -163,13 +163,7 @@ const ActivateAccountFlow = () => {
         />
 
         <Divider sx={{ mx: -3, mt: 2, mb: 1 }} />
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 3,
-          }}
-        >
+        <Box display="flex" flexDirection="column" gap={3}>
           {canRelay && (
             <Grid container spacing={3}>
               <ReviewRow
@@ -193,13 +187,7 @@ const ActivateAccountFlow = () => {
                   <NetworkFee totalFee={totalFee} isWaived={willRelay || isWrongChain} chain={chain} />
 
                   {!willRelay && (
-                    <Typography
-                      variant="body2"
-                      sx={{
-                        color: 'text.secondary',
-                        mt: 1,
-                      }}
-                    >
+                    <Typography variant="body2" color="text.secondary" mt={1}>
                       {isWrongChain
                         ? `Switch your connected wallet to ${chain?.chainName} to see the correct estimated network fee`
                         : 'You will have to confirm a transaction with your connected wallet.'}
@@ -211,11 +199,7 @@ const ActivateAccountFlow = () => {
           </Grid>
 
           {submitError && (
-            <Box
-              sx={{
-                mt: 1,
-              }}
-            >
+            <Box mt={1}>
               <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
             </Box>
           )}
@@ -229,14 +213,7 @@ const ActivateAccountFlow = () => {
 
         <Divider sx={{ mx: -3, mt: 2, mb: 1 }} />
 
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'flex-end',
-            gap: 3,
-          }}
-        >
+        <Box display="flex" flexDirection="row" justifyContent="flex-end" gap={3}>
           <CheckWallet checkNetwork={!submitDisabled} allowNonOwner allowUndeployedSafe>
             {(isOk) => (
               <Button
diff --git a/src/features/counterfactual/CheckBalance.tsx b/src/features/counterfactual/CheckBalance.tsx
index 214ffc4c4e..6424ea57ee 100644
--- a/src/features/counterfactual/CheckBalance.tsx
+++ b/src/features/counterfactual/CheckBalance.tsx
@@ -22,20 +22,10 @@ const CheckBalance = () => {
       severity="info"
       sx={{ display: 'flex', maxWidth: '600px', mt: 3, px: 3, py: 2, mx: 'auto' }}
     >
-      <Typography
-        sx={{
-          fontWeight: 'bold',
-          mb: 1,
-        }}
-      >
+      <Typography fontWeight="bold" mb={1}>
         Don&apos;t see your tokens?
       </Typography>
-      <Typography
-        variant="body2"
-        sx={{
-          mb: 2,
-        }}
-      >
+      <Typography variant="body2" mb={2}>
         Your Safe Account is not activated yet so we can only display your native balance. Non-native tokens may not
         show up immediately after the Safe is deployed. Finish the onboarding to deploy your account onchain and unlock
         all features.{' '}
@@ -48,6 +38,7 @@ const CheckBalance = () => {
           </>
         )}
       </Typography>
+
       <ActivateAccountButton />
     </Alert>
   )
diff --git a/src/features/counterfactual/CounterfactualForm.tsx b/src/features/counterfactual/CounterfactualForm.tsx
index baa3937183..e91a6199cf 100644
--- a/src/features/counterfactual/CounterfactualForm.tsx
+++ b/src/features/counterfactual/CounterfactualForm.tsx
@@ -164,11 +164,7 @@ export const CounterfactualForm = ({
         )}
 
         {submitError && (
-          <Box
-            sx={{
-              mt: 1,
-            }}
-          >
+          <Box mt={1}>
             <ErrorMessage error={submitError}>Error submitting the transaction. Please try again.</ErrorMessage>
           </Box>
         )}
diff --git a/src/features/counterfactual/PayNowPayLater.tsx b/src/features/counterfactual/PayNowPayLater.tsx
index 138f00d215..4232427dc9 100644
--- a/src/features/counterfactual/PayNowPayLater.tsx
+++ b/src/features/counterfactual/PayNowPayLater.tsx
@@ -42,12 +42,7 @@ const PayNowPayLater = ({
 
   return (
     <>
-      <Typography
-        variant="h4"
-        sx={{
-          fontWeight: 'bold',
-        }}
-      >
+      <Typography variant="h4" fontWeight="bold">
         Before we continue...
       </Typography>
       {isMultiChain && (
@@ -101,13 +96,7 @@ const PayNowPayLater = ({
               label={
                 <>
                   <Typography className={css.radioTitle}>Pay now</Typography>
-                  <Typography
-                    className={css.radioSubtitle}
-                    variant="body2"
-                    sx={{
-                      color: 'text.secondary',
-                    }}
-                  >
+                  <Typography className={css.radioSubtitle} variant="body2" color="text.secondary">
                     {canRelay ? (
                       'Sponsored free transaction'
                     ) : (
@@ -129,13 +118,7 @@ const PayNowPayLater = ({
               label={
                 <>
                   <Typography className={css.radioTitle}>Pay later</Typography>
-                  <Typography
-                    className={css.radioSubtitle}
-                    variant="body2"
-                    sx={{
-                      color: 'text.secondary',
-                    }}
-                  >
+                  <Typography className={css.radioSubtitle} variant="body2" color="text.secondary">
                     with the first transaction
                   </Typography>
                 </>
diff --git a/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx b/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx
index 60537e047b..b1d01a0caf 100644
--- a/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx
+++ b/src/features/multichain/components/SignerSetupWarning/InconsistentSignerSetupWarning.tsx
@@ -19,23 +19,9 @@ const ChainIndicatorList = ({ chainIds }: { chainIds: string[] }) => {
       {chainIds.map((chainId, index) => {
         const chain = configs.find((chain) => chain.chainId === chainId)
         return (
-          <Box
-            key={chainId}
-            sx={{
-              display: 'inline-flex',
-              flexWrap: 'wrap',
-              position: 'relative',
-              top: 5,
-            }}
-          >
+          <Box key={chainId} display="inline-flex" flexWrap="wrap" position="relative" sx={{ top: 5 }}>
             <ChainIndicator key={chainId} chainId={chainId} showUnknown={false} onlyLogo={true} />
-            <Typography
-              sx={{
-                position: 'relative',
-                top: 2,
-                mx: 0.5,
-              }}
-            >
+            <Typography position="relative" mx={0.5} sx={{ top: 2 }}>
               {chain && chain.chainName}
               {index === chainIds.length - 1 ? '.' : ','}
             </Typography>
@@ -75,20 +61,11 @@ export const InconsistentSignerSetupWarning = () => {
 
   return (
     <ErrorMessage level="warning" title="Signers are not consistent">
-      <Typography
-        sx={{
-          display: 'inline',
-          mr: 1,
-        }}
-      >
+      <Typography display="inline" mr={1}>
         Signers are different on these networks of this account:
       </Typography>
       <ChainIndicatorList chainIds={deviatingChainIds} />
-      <Typography
-        sx={{
-          display: 'inline',
-        }}
-      >
+      <Typography display="inline">
         To manage your account easier and to prevent lose of funds, we recommend keeping the same signers.
       </Typography>
     </ErrorMessage>
diff --git a/src/features/recovery/components/GroupedRecoveryListItems/index.tsx b/src/features/recovery/components/GroupedRecoveryListItems/index.tsx
index 2159b7cdb9..7cccaad24f 100644
--- a/src/features/recovery/components/GroupedRecoveryListItems/index.tsx
+++ b/src/features/recovery/components/GroupedRecoveryListItems/index.tsx
@@ -22,12 +22,7 @@ function Disclaimer({ isMalicious }: { isMalicious: boolean }): ReactElement {
       sx={{ bgcolor: ({ palette }) => `${palette.warning.background} !important` }}
     >
       <Typography>
-        <Typography
-          component="span"
-          sx={{
-            fontWeight: 700,
-          }}
-        >
+        <Typography component="span" fontWeight={700}>
           Cancelling {isMalicious ? 'malicious transaction' : 'Account recovery'}.
         </Typography>{' '}
         You will need to execute the cancellation.{' '}
@@ -49,26 +44,13 @@ export function GroupedRecoveryListItems({ items }: { items: Array<Transaction |
 
   return (
     <Paper className={[css.container, customCss.recoveryGroupContainer].join(' ')}>
-      <Box
-        className={css.disclaimerContainer}
-        sx={{
-          gridArea: 'warning',
-        }}
-      >
+      <Box gridArea="warning" className={css.disclaimerContainer}>
         <Disclaimer isMalicious={isMalicious} />
       </Box>
-      <Box
-        className={css.line}
-        sx={{
-          gridArea: 'line',
-        }}
-      />
-      <Box
-        className={css.txItems}
-        sx={{
-          gridArea: 'items',
-        }}
-      >
+
+      <Box gridArea="line" className={css.line} />
+
+      <Box gridArea="items" className={css.txItems}>
         {cancellations.map((tx) => (
           <div key={tx.transaction.id}>
             <ExpandableTransactionItem item={tx} />
diff --git a/src/features/recovery/components/RecoveryDescription/index.tsx b/src/features/recovery/components/RecoveryDescription/index.tsx
index d30df5324a..707e7964db 100644
--- a/src/features/recovery/components/RecoveryDescription/index.tsx
+++ b/src/features/recovery/components/RecoveryDescription/index.tsx
@@ -51,13 +51,9 @@ export function RecoveryDescription({ item }: { item: RecoveryQueueItem }): Reac
       {newSetup.owners.map((owner) => (
         <EthHashInfo key={owner.value} address={owner.value} shortAddress={false} showCopyButton hasExplorer />
       ))}
+
       <div>
-        <Typography
-          gutterBottom
-          sx={{
-            fontWeight: 700,
-          }}
-        >
+        <Typography fontWeight={700} gutterBottom>
           Required confirmations for new transactions:
         </Typography>
         <Typography>
diff --git a/src/features/recovery/components/RecoverySettings/index.tsx b/src/features/recovery/components/RecoverySettings/index.tsx
index c6d5af78f9..0aa340ddec 100644
--- a/src/features/recovery/components/RecoverySettings/index.tsx
+++ b/src/features/recovery/components/RecoverySettings/index.tsx
@@ -113,31 +113,15 @@ function RecoverySettings(): ReactElement {
     <Paper sx={{ p: 4 }}>
       <Grid container spacing={3}>
         <Grid item lg={4} xs={12}>
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
-              mb: 1,
-            }}
-          >
-            <Typography
-              variant="h4"
-              sx={{
-                fontWeight: 'bold',
-              }}
-            >
+          <Box display="flex" alignItems="center" gap={1} mb={1}>
+            <Typography variant="h4" fontWeight="bold">
               Account recovery
             </Typography>
           </Box>
         </Grid>
 
         <Grid item xs>
-          <Typography
-            sx={{
-              mb: 2,
-            }}
-          >
+          <Typography mb={2}>
             {isRecoveryEnabled
               ? 'The trusted Recoverer will be able to recover your Safe Account if you ever lose access. You can change Recoverers or alter your recovery setup at any time.'
               : 'Choose a trusted Recoverer to recover your Safe Account if you ever lose access. Enabling the Account recovery module will require a transaction.'}{' '}
diff --git a/src/features/recovery/components/RecoverySummary/index.tsx b/src/features/recovery/components/RecoverySummary/index.tsx
index 23f1b26292..e3fdd022c4 100644
--- a/src/features/recovery/components/RecoverySummary/index.tsx
+++ b/src/features/recovery/components/RecoverySummary/index.tsx
@@ -18,46 +18,24 @@ export function RecoverySummary({ item }: { item: RecoveryQueueItem }): ReactEle
 
   return (
     <Box className={css.gridContainer}>
-      <Box
-        sx={{
-          gridArea: 'type',
-        }}
-      >
+      <Box gridArea="type">
         <RecoveryType isMalicious={isMalicious} />
       </Box>
-      <Box
-        sx={{
-          gridArea: 'info',
-        }}
-      >
+
+      <Box gridArea="info">
         <RecoveryInfo isMalicious={isMalicious} />
       </Box>
-      <Box
-        data-testid="tx-date"
-        className={css.date}
-        sx={{
-          gridArea: 'date',
-        }}
-      >
+
+      <Box gridArea="date" data-testid="tx-date" className={css.date}>
         <DateTime value={Number(item.timestamp)} />
       </Box>
+
       {!isExecutable || isPending ? (
-        <Box
-          sx={{
-            gridArea: 'status',
-          }}
-        >
+        <Box gridArea="status">
           <RecoveryStatus recovery={item} />
         </Box>
       ) : (
-        <Box
-          sx={{
-            gridArea: 'actions',
-            mr: 2,
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
+        <Box gridArea="actions" mr={2} display="flex" justifyContent="center">
           {!isMalicious && wallet && <ExecuteRecoveryButton recovery={item} compact />}
         </Box>
       )}
diff --git a/src/features/siweAccounts/components/EnableAccountBanner/index.tsx b/src/features/siweAccounts/components/EnableAccountBanner/index.tsx
index 513ef68ee6..126c3d750b 100644
--- a/src/features/siweAccounts/components/EnableAccountBanner/index.tsx
+++ b/src/features/siweAccounts/components/EnableAccountBanner/index.tsx
@@ -42,12 +42,7 @@ const SignInBanner = ({ provider }: { provider: BrowserProvider | undefined }) =
         action={
           <>
             <Button onClick={signIn} endIcon={<ChevronRightIcon />} sx={{ padding: '2px', minWidth: '130px' }}>
-              <Typography
-                noWrap
-                sx={{
-                  fontWeight: 700,
-                }}
-              >
+              <Typography noWrap fontWeight={700}>
                 Enable now
               </Typography>
             </Button>
@@ -64,19 +59,8 @@ const SignInBanner = ({ provider }: { provider: BrowserProvider | undefined }) =
           </>
         }
       >
-        <Box
-          sx={{
-            display: 'flex',
-            alignContent: 'center',
-            alignItems: 'center',
-            width: '100%',
-          }}
-        >
-          <Typography
-            sx={{
-              flex: '1',
-            }}
-          >
+        <Box display="flex" alignContent="center" alignItems="center" width="100%">
+          <Typography flex="1">
             <b>Access your accounts on any device!</b> Enable cloud storage to switch devices effortlessly and keep your
             data secure.
           </Typography>
diff --git a/src/features/speedup/components/SpeedUpModal.tsx b/src/features/speedup/components/SpeedUpModal.tsx
index 30f46e9861..767e8932d7 100644
--- a/src/features/speedup/components/SpeedUpModal.tsx
+++ b/src/features/speedup/components/SpeedUpModal.tsx
@@ -167,35 +167,19 @@ export const SpeedUpModal = ({
     return (
       <ModalDialog open={open} onClose={onCancel} dialogTitle="Speed up transaction">
         <DialogContent sx={{ p: '24px !important' }}>
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              mb: 2,
-            }}
-          >
+          <Box display="flex" justifyContent="center" alignItems="center" mb={2}>
             <SvgIcon inheritViewBox component={RocketSpeedup} sx={{ width: 90, height: 90 }} />
           </Box>
 
           <Typography data-testid="speedup-summary">
             This will speed up the pending transaction by{' '}
-            <Typography
-              component="span"
-              sx={{
-                fontWeight: 700,
-              }}
-            >
+            <Typography component="span" fontWeight={700}>
               replacing
             </Typography>{' '}
             the original gas parameters with new ones.
           </Typography>
 
-          <Box
-            sx={{
-              mt: 2,
-            }}
-          >
+          <Box mt={2}>
             {speedUpFee && signerNonce && (
               <GasParams
                 params={{
@@ -215,6 +199,7 @@ export const SpeedUpModal = ({
             <NetworkWarning />
           </Box>
         </DialogContent>
+
         <DialogActions>
           <Button onClick={onCancel}>Cancel</Button>
 
@@ -241,14 +226,7 @@ export const SpeedUpModal = ({
   return (
     <ModalDialog open={open} onClose={handleClose} dialogTitle="Speed up transaction">
       <DialogContent sx={{ p: '24px !important' }}>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            mb: 2,
-          }}
-        >
+        <Box display="flex" justifyContent="center" alignItems="center" mb={2}>
           <SvgIcon inheritViewBox component={RocketSpeedup} sx={{ width: 90, height: 90 }} />
         </Box>
 
diff --git a/src/features/stake/components/StakingTxExitDetails/index.tsx b/src/features/stake/components/StakingTxExitDetails/index.tsx
index 30ffa0896a..d4cdb80722 100644
--- a/src/features/stake/components/StakingTxExitDetails/index.tsx
+++ b/src/features/stake/components/StakingTxExitDetails/index.tsx
@@ -14,14 +14,7 @@ const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo }) => {
   ])
 
   return (
-    <Box
-      sx={{
-        pr: 5,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1,
-      }}
-    >
+    <Box pr={5} display="flex" flexDirection="column" gap={1}>
       <FieldsGrid title="Exit">
         {info.validators.map((validator: string, index: number) => {
           return (
@@ -33,6 +26,7 @@ const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo }) => {
         })}
       </FieldsGrid>
       {info.status !== NativeStakingStatus.EXITED && <FieldsGrid title="Est. exit time">Up to {withdrawIn}</FieldsGrid>}
+
       <FieldsGrid title="Validator status">
         <StakingStatus status={info.status} />
       </FieldsGrid>
diff --git a/src/features/stake/components/StakingTxWithdrawDetails/index.tsx b/src/features/stake/components/StakingTxWithdrawDetails/index.tsx
index 1a20e647fc..78681f19d0 100644
--- a/src/features/stake/components/StakingTxWithdrawDetails/index.tsx
+++ b/src/features/stake/components/StakingTxWithdrawDetails/index.tsx
@@ -4,15 +4,7 @@ import StakingConfirmationTxWithdraw from '@/features/stake/components/StakingCo
 
 const StakingTxWithdrawDetails = ({ info }: { info: StakingTxWithdrawInfo }) => {
   return (
-    <Box
-      sx={{
-        pl: 1,
-        pr: 5,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1,
-      }}
-    >
+    <Box pl={1} pr={5} display="flex" flexDirection="column" gap={1}>
       <StakingConfirmationTxWithdraw order={info} />
     </Box>
   )
diff --git a/src/features/swap/components/OrderId/index.tsx b/src/features/swap/components/OrderId/index.tsx
index 8179d25ea7..e128adb8eb 100644
--- a/src/features/swap/components/OrderId/index.tsx
+++ b/src/features/swap/components/OrderId/index.tsx
@@ -21,11 +21,7 @@ const OrderId = ({
     <Stack direction="row">
       <span>{truncatedOrderId}</span>
       {showCopyButton && <CopyButton text={orderId} />}
-      <Box
-        sx={{
-          color: 'border.main',
-        }}
-      >
+      <Box color="border.main">
         <ExplorerButton href={href} />
       </Box>
     </Stack>
diff --git a/src/features/swap/components/SwapOrder/rows/PartBuyAmount.tsx b/src/features/swap/components/SwapOrder/rows/PartBuyAmount.tsx
index 7911af2b7b..5076242c14 100644
--- a/src/features/swap/components/SwapOrder/rows/PartBuyAmount.tsx
+++ b/src/features/swap/components/SwapOrder/rows/PartBuyAmount.tsx
@@ -15,20 +15,10 @@ export const PartBuyAmount = ({
   return (
     <DataRow title="Buy amount" key="buy_amount_part">
       <Box>
-        <Typography
-          component="span"
-          sx={{
-            fontWeight: 'bold',
-          }}
-        >
+        <Typography component="span" fontWeight="bold">
           {formatVisualAmount(minPartLimit, buyToken.decimals)} {buyToken.symbol}
         </Typography>
-        <Typography
-          component="span"
-          sx={{
-            color: 'var(--color-primary-light)',
-          }}
-        >
+        <Typography component="span" color="var(--color-primary-light)">
           {` ${addonText}`}
         </Typography>
       </Box>
diff --git a/src/features/swap/components/SwapOrder/rows/PartSellAmount.tsx b/src/features/swap/components/SwapOrder/rows/PartSellAmount.tsx
index 2346dc5b2d..ac8fcf13b6 100644
--- a/src/features/swap/components/SwapOrder/rows/PartSellAmount.tsx
+++ b/src/features/swap/components/SwapOrder/rows/PartSellAmount.tsx
@@ -15,20 +15,10 @@ export const PartSellAmount = ({
   return (
     <DataRow title="Sell amount" key="sell_amount_part">
       <Box>
-        <Typography
-          component="span"
-          sx={{
-            fontWeight: 'bold',
-          }}
-        >
+        <Typography component="span" fontWeight="bold">
           {formatVisualAmount(partSellAmount, sellToken.decimals)} {sellToken.symbol}
         </Typography>
-        <Typography
-          component="span"
-          sx={{
-            color: 'var(--color-primary-light)',
-          }}
-        >
+        <Typography component="span" color="var(--color-primary-light)">
           {` ${addonText}`}
         </Typography>
       </Box>
diff --git a/src/features/swap/components/SwapOrderConfirmationView/index.tsx b/src/features/swap/components/SwapOrderConfirmationView/index.tsx
index a1feae9bbb..13392a847d 100644
--- a/src/features/swap/components/SwapOrderConfirmationView/index.tsx
+++ b/src/features/swap/components/SwapOrderConfirmationView/index.tsx
@@ -44,6 +44,7 @@ export const SwapOrderConfirmation = ({ order, decodedData, settlementContract }
   return (
     <>
       {isChangingFallbackHandler && <TwapFallbackHandlerWarning />}
+
       <DataTable
         header="Order details"
         rows={[
@@ -69,12 +70,7 @@ export const SwapOrderConfirmation = ({ order, decodedData, settlementContract }
           compareAsc(now, expires) !== 1 ? (
             <DataRow datatestid="expiry" key="Expiry" title="Expiry">
               <Typography>
-                <Typography
-                  component="span"
-                  sx={{
-                    fontWeight: 700,
-                  }}
-                >
+                <Typography fontWeight={700} component="span">
                   {formatTimeInWords(validUntil * 1000)}
                 </Typography>{' '}
                 ({formatDateTime(validUntil * 1000)})
@@ -124,6 +120,7 @@ export const SwapOrderConfirmation = ({ order, decodedData, settlementContract }
           ),
         ]}
       />
+
       {isTwapOrder && (
         <div className={css.partsBlock}>
           <DataTable
diff --git a/src/features/swap/components/SwapTxInfo/SwapTx.tsx b/src/features/swap/components/SwapTxInfo/SwapTx.tsx
index cb0746e401..c06651486e 100644
--- a/src/features/swap/components/SwapTxInfo/SwapTx.tsx
+++ b/src/features/swap/components/SwapTxInfo/SwapTx.tsx
@@ -14,15 +14,7 @@ const Amount = ({ value, token }: { value: string; token: OrderToken }) => (
 )
 
 const OnlyToken = ({ token }: { token: OrderToken }) => (
-  <Typography
-    component="span"
-    sx={{
-      fontWeight: 'bold',
-      display: 'flex',
-      alignItems: 'center',
-      gap: 1,
-    }}
-  >
+  <Typography fontWeight="bold" component="span" display="flex" alignItems="center" gap={1}>
     <TokenIcon tokenSymbol={token.symbol} logoUri={token.logoUri ?? undefined} />
     {token.symbol}
   </Typography>
@@ -43,22 +35,15 @@ export const SwapTx = ({ info }: { info: Order }): ReactElement => {
   return (
     <Typography
       component="div"
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        fontWeight: 'bold',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-      }}
+      display="flex"
+      alignItems="center"
+      fontWeight="bold"
+      whiteSpace="nowrap"
+      overflow="hidden"
+      textOverflow="ellipsis"
     >
       {from}
-      <Typography
-        component="span"
-        sx={{
-          mx: 0.5,
-        }}
-      >
+      <Typography component="span" mx={0.5}>
         &nbsp;to&nbsp;
       </Typography>
       {to}
diff --git a/src/features/walletconnect/components/WcConnectionState/index.tsx b/src/features/walletconnect/components/WcConnectionState/index.tsx
index e48d608677..d3f4284e72 100644
--- a/src/features/walletconnect/components/WcConnectionState/index.tsx
+++ b/src/features/walletconnect/components/WcConnectionState/index.tsx
@@ -24,12 +24,8 @@ const WcConnectionState = ({ metadata, isDelete }: { metadata?: CoreTypes.Metada
 
         <SafeAppIconCard src={icon} width={28} height={28} alt={`${name} logo`} />
       </div>
-      <Typography
-        variant="h5"
-        sx={{
-          mt: 3,
-        }}
-      >
+
+      <Typography variant="h5" mt={3}>
         {isDelete ? `${name} disconnected` : `${name} successfully connected!`}
       </Typography>
     </div>
diff --git a/src/features/walletconnect/components/WcErrorMessage/index.tsx b/src/features/walletconnect/components/WcErrorMessage/index.tsx
index e14144925b..05454ab393 100644
--- a/src/features/walletconnect/components/WcErrorMessage/index.tsx
+++ b/src/features/walletconnect/components/WcErrorMessage/index.tsx
@@ -10,16 +10,13 @@ const WcErrorMessage = ({ error, onClose }: { error: Error; onClose: () => void
   return (
     <div className={css.errorContainer}>
       <WcLogoHeader errorMessage={summary} />
+
       {details && (
-        <Typography
-          className={css.details}
-          sx={{
-            mt: 1,
-          }}
-        >
+        <Typography mt={1} className={css.details}>
           {details}
         </Typography>
       )}
+
       <Button variant="contained" onClick={onClose} className={css.button}>
         OK
       </Button>
diff --git a/src/features/walletconnect/components/WcHints/index.tsx b/src/features/walletconnect/components/WcHints/index.tsx
index defb6b04df..8123a20c2b 100644
--- a/src/features/walletconnect/components/WcHints/index.tsx
+++ b/src/features/walletconnect/components/WcHints/index.tsx
@@ -85,13 +85,7 @@ const WcHints = (): ReactElement => {
   }
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 1,
-      }}
-    >
+    <Box display="flex" flexDirection="column" gap={1}>
       <HintAccordion
         title={ConnectionTitle}
         items={ConnectionSteps}
diff --git a/src/features/walletconnect/components/WcLogoHeader/index.tsx b/src/features/walletconnect/components/WcLogoHeader/index.tsx
index fa128879f5..d879fb642d 100644
--- a/src/features/walletconnect/components/WcLogoHeader/index.tsx
+++ b/src/features/walletconnect/components/WcLogoHeader/index.tsx
@@ -11,14 +11,8 @@ const WcLogoHeader = ({ errorMessage }: { errorMessage?: string }): ReactElement
         <SvgIcon component={WalletConnect} inheritViewBox className={css.icon} />
         {errorMessage && <SvgIcon component={Alert} inheritViewBox className={css.errorBadge} fontSize="small" />}
       </div>
-      <Typography
-        variant="h5"
-        className={css.title}
-        sx={{
-          mt: 2,
-          mb: 0.5,
-        }}
-      >
+
+      <Typography variant="h5" mt={2} mb={0.5} className={css.title}>
         {errorMessage || 'Connect dApps to Safe{Wallet}'}
       </Typography>
     </>
diff --git a/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx b/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx
index cb6c4384ea..68f748f504 100644
--- a/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx
+++ b/src/features/walletconnect/components/WcProposalForm/CompatibilityWarning.tsx
@@ -32,14 +32,10 @@ export const CompatibilityWarning = ({
       <Alert severity={severity} className={css.alert}>
         {message}
       </Alert>
+
       {isUnsupportedChain && (
         <>
-          <Typography
-            sx={{
-              mt: 3,
-              mb: 1,
-            }}
-          >
+          <Typography mt={3} mb={1}>
             Supported networks
           </Typography>
 
@@ -49,12 +45,7 @@ export const CompatibilityWarning = ({
             ))}
           </div>
 
-          <Typography
-            component="div"
-            sx={{
-              mt: 3,
-            }}
-          >
+          <Typography mt={3} component="div">
             Switch network
             <NetworkSelector onChainSelect={onChainChange} />
           </Typography>
diff --git a/src/features/walletconnect/components/WcProposalForm/index.tsx b/src/features/walletconnect/components/WcProposalForm/index.tsx
index 7b8bb5f798..41e73e0faf 100644
--- a/src/features/walletconnect/components/WcProposalForm/index.tsx
+++ b/src/features/walletconnect/components/WcProposalForm/index.tsx
@@ -114,39 +114,30 @@ const WcProposalForm = ({ proposal, setProposal, onApprove }: ProposalFormProps)
 
   return (
     <div className={css.container}>
-      <Typography
-        variant="body2"
-        sx={{
-          color: 'text.secondary',
-        }}
-      >
+      <Typography variant="body2" color="text.secondary">
         WalletConnect
       </Typography>
+
       {proposer.metadata.icons[0] && (
         <div className={css.icon}>
           <SafeAppIconCard src={proposer.metadata.icons[0]} width={32} height={32} alt={`${name || 'dApp'} logo`} />
         </div>
       )}
-      <Typography
-        sx={{
-          mb: 1,
-        }}
-      >
+
+      <Typography mb={1}>
         <b>{name}</b> wants to connect
       </Typography>
-      <Typography
-        className={css.origin}
-        sx={{
-          mb: 3,
-        }}
-      >
+
+      <Typography className={css.origin} mb={3}>
         {proposal.verifyContext.verified.origin}
       </Typography>
+
       <div className={css.info}>
         <ProposalVerification proposal={proposal} />
 
         <CompatibilityWarning proposal={proposal} chainIds={chainIds} />
       </div>
+
       {!isBlocked && isHighRisk && (
         <FormControlLabel
           className={css.checkbox}
@@ -154,10 +145,13 @@ const WcProposalForm = ({ proposal, setProposal, onApprove }: ProposalFormProps)
           label="I understand the risks associated with interacting with this dApp and would like to continue."
         />
       )}
+
       {isSafePass && sanctionedAddress && (
         <BlockedAddress address={sanctionedAddress} featureTitle="Safe{Pass}" onClose={onReject} />
       )}
+
       <Divider flexItem className={css.divider} />
+
       <div className={css.buttons}>
         <Button variant="danger" onClick={onReject} className={css.button} disabled={!!isLoading}>
           {isLoading === WCLoadingState.REJECT ? <CircularProgress size={20} /> : 'Reject'}
diff --git a/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx b/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx
index ef8c46b68c..21d7ce34fa 100644
--- a/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx
+++ b/src/features/walletconnect/components/WcSessionList/WcNoSessions.tsx
@@ -21,13 +21,11 @@ const WcSampleDapps = ({ onUnload }: { onUnload: () => void }) => {
   return (
     <Typography
       variant="body2"
+      display="flex"
+      justifyContent="space-between"
+      alignItems="center"
+      mt={3}
       component="div"
-      sx={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        mt: 3,
-      }}
     >
       {SAMPLE_DAPPS.map((item) => (
         <Typography variant="body2" key={item.url}>
@@ -53,15 +51,10 @@ const WcNoSessions = () => {
 
   return (
     <>
-      <Typography
-        variant="body2"
-        sx={{
-          textAlign: 'center',
-          color: 'text.secondary',
-        }}
-      >
+      <Typography variant="body2" textAlign="center" color="text.secondary">
         No dApps are connected yet.{sampleDapps ? ' Try one of these:' : ''}
       </Typography>
+
       {sampleDapps}
     </>
   )
diff --git a/src/pages/_offline.tsx b/src/pages/_offline.tsx
index 4ff520c244..a36fda8e98 100644
--- a/src/pages/_offline.tsx
+++ b/src/pages/_offline.tsx
@@ -9,61 +9,30 @@ const Offline: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Offline'}</title>
       </Head>
+
       <main>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
+        <Box display="flex" justifyContent="center">
           <Paper sx={{ p: 4, mb: 2, maxWidth: 900 }}>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                mb: 2,
-                fontSize: 100,
-              }}
-            >
+            <Box display="flex" justifyContent="center" mb={2} fontSize={100}>
               <WifiOffIcon fontSize="inherit" />
             </Box>
 
-            <Typography
-              variant="h1"
-              sx={{
-                textAlign: 'center',
-              }}
-            >
+            <Typography variant="h1" textAlign="center">
               Oops, it looks like you&apos;re offline!
             </Typography>
 
-            <Typography
-              variant="body1"
-              sx={{
-                mt: 3,
-              }}
-            >
+            <Typography variant="body1" mt={3}>
               We apologize, but it looks like you are currently unable to access our app due to an offline connection.
             </Typography>
 
-            <Typography
-              variant="body1"
-              sx={{
-                mt: 2,
-              }}
-            >
+            <Typography variant="body1" mt={2}>
               While you wait for your internet to come back online, we encourage you to take a moment to step outside
               and enjoy the nature. If you have the opportunity, try touching the grass with your bare feet -
               there&apos;s something about the sensation of grass on our skin that can be really grounding and
               refreshing.
             </Typography>
 
-            <Typography
-              variant="body1"
-              sx={{
-                mt: 2,
-              }}
-            >
+            <Typography variant="body1" mt={2}>
               We hope to see you back online soon. Thank you for your patience.
             </Typography>
           </Paper>
diff --git a/src/pages/apps/open.tsx b/src/pages/apps/open.tsx
index 5e7402d173..938e690dcb 100644
--- a/src/pages/apps/open.tsx
+++ b/src/pages/apps/open.tsx
@@ -82,14 +82,7 @@ const SafeApps: NextPage = () => {
 
   if (isLoading) {
     return (
-      <Box
-        sx={{
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: '100%',
-        }}
-      >
+      <Box display="flex" justifyContent="center" alignItems="center" height="100%">
         <CircularProgress />
       </Box>
     )
diff --git a/src/pages/balances/index.tsx b/src/pages/balances/index.tsx
index a1ee8db0ee..6a69b95670 100644
--- a/src/pages/balances/index.tsx
+++ b/src/pages/balances/index.tsx
@@ -26,18 +26,16 @@ const Balances: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Assets'}</title>
       </Head>
+
       <AssetsHeader>
         <HiddenTokenButton showHiddenAssets={showHiddenAssets} toggleShowHiddenAssets={toggleShowHiddenAssets} />
         <TokenListSelect />
         <CurrencySelect />
       </AssetsHeader>
+
       <main>
         {isStakingBannerEnabled && (
-          <Box
-            sx={{
-              mb: 2,
-            }}
-          >
+          <Box mb={2}>
             <StakingBanner />
           </Box>
         )}
diff --git a/src/pages/imprint.tsx b/src/pages/imprint.tsx
index fe3ac20373..2a9725ba59 100644
--- a/src/pages/imprint.tsx
+++ b/src/pages/imprint.tsx
@@ -7,38 +7,20 @@ import MUILink from '@mui/material/Link'
 
 const SafeImprint = () => (
   <div>
-    <Typography
-      variant="h1"
-      sx={{
-        mb: 2,
-      }}
-    >
+    <Typography variant="h1" mb={2}>
       Imprint & Disclaimer
     </Typography>
-    <Typography
-      variant="h3"
-      sx={{
-        mb: 2,
-      }}
-    >
+    <Typography variant="h3" mb={2}>
       Information in accordance with section 5 of the Telemedia Act (TMG, Germany):
     </Typography>
-    <Typography
-      sx={{
-        mb: 2,
-      }}
-    >
+    <Typography mb={2}>
       Core Contributors GmbH
       <br />
       Gontardstraße 11
       <br />
       10178 Berlin, Germany
     </Typography>
-    <Typography
-      sx={{
-        mb: 4,
-      }}
-    >
+    <Typography mb={4}>
       Managing director: Richard Meißner
       <br />
       Contact:{' '}
@@ -50,26 +32,13 @@ const SafeImprint = () => (
       <br />
       Register Number: HRB 240421 B
     </Typography>
-    <Typography
-      variant="h3"
-      sx={{
-        mb: 2,
-      }}
-    >
+    <Typography variant="h3" mb={2}>
       Disclaimer
     </Typography>
-    <Typography
-      sx={{
-        mb: 1,
-      }}
-    >
+    <Typography mb={1}>
       <strong>Accountability for content</strong>
     </Typography>
-    <Typography
-      sx={{
-        mb: 2,
-      }}
-    >
+    <Typography mb={2}>
       The contents of our pages have been created with the utmost care. However, we cannot guarantee the contents’
       accuracy, completeness or topicality. According to statutory provisions, we are furthermore responsible for our
       own content on these web pages. In this context, please note that we are accordingly not obliged to monitor merely
@@ -77,27 +46,15 @@ const SafeImprint = () => (
       Our obligations to remove or block the use of information under generally applicable laws remain unaffected by
       this as per §§ 8 to 10 of the Telemedia Act (TMG).
     </Typography>
-    <Typography
-      sx={{
-        mb: 1,
-      }}
-    >
+    <Typography mb={1}>
       <strong>Accountability for links</strong>
     </Typography>
-    <Typography
-      sx={{
-        mb: 2,
-      }}
-    >
+    <Typography mb={2}>
       Responsibility for the content of external links (to web pages of third parties) lies solely with the operators of
       the linked pages. No violations were evident to us at the time of linking. Should any legal infringement become
       known to us, we will remove the respective link immediately.
     </Typography>
-    <Typography
-      sx={{
-        mb: 1,
-      }}
-    >
+    <Typography mb={1}>
       <strong>Copyright</strong>
     </Typography>
     <Typography>
diff --git a/src/pages/licenses.tsx b/src/pages/licenses.tsx
index 7f29e2bb29..7d271c8981 100644
--- a/src/pages/licenses.tsx
+++ b/src/pages/licenses.tsx
@@ -7,41 +7,18 @@ import Paper from '@mui/material/Paper'
 
 const SafeLicenses = () => (
   <>
-    <Typography
-      variant="h1"
-      sx={{
-        mb: 2,
-      }}
-    >
+    <Typography variant="h1" mb={2}>
       Licenses
     </Typography>
-    <Typography
-      variant="h3"
-      sx={{
-        mb: 2,
-      }}
-    >
+    <Typography variant="h3" mb={2}>
       Libraries we use
     </Typography>
-    <Box
-      sx={{
-        mb: 4,
-      }}
-    >
-      <Typography
-        sx={{
-          mb: 3,
-        }}
-      >
+    <Box mb={4}>
+      <Typography mb={3}>
         This page contains a list of attribution notices for third party software that may be contained in portions of
         the {'Safe{Wallet}'}. We thank the open source community for all of their contributions.
       </Typography>
-      <Typography
-        variant="h2"
-        sx={{
-          mb: 2,
-        }}
-      >
+      <Typography variant="h2" mb={2}>
         Android
       </Typography>
       <TableContainer component={Paper}>
@@ -238,17 +215,8 @@ const SafeLicenses = () => (
         </Table>
       </TableContainer>
     </Box>
-    <Box
-      sx={{
-        mb: 4,
-      }}
-    >
-      <Typography
-        variant="h2"
-        sx={{
-          mb: 2,
-        }}
-      >
+    <Box mb={4}>
+      <Typography variant="h2" mb={2}>
         iOS
       </Typography>
       <TableContainer component={Paper}>
@@ -374,12 +342,7 @@ const SafeLicenses = () => (
       </TableContainer>
     </Box>
     <Box>
-      <Typography
-        variant="h2"
-        sx={{
-          mb: 2,
-        }}
-      >
+      <Typography variant="h2" mb={2}>
         Web
       </Typography>
       <TableContainer component={Paper}>
diff --git a/src/pages/settings/cookies.tsx b/src/pages/settings/cookies.tsx
index 301a969e55..4fb0c830ae 100644
--- a/src/pages/settings/cookies.tsx
+++ b/src/pages/settings/cookies.tsx
@@ -10,17 +10,14 @@ const Cookies: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Settings – Cookies'}</title>
       </Head>
+
       <SettingsHeader />
+
       <main>
         <Paper sx={{ p: 4, mb: 2 }}>
           <Grid container spacing={3}>
             <Grid item sm={4} xs={12}>
-              <Typography
-                variant="h4"
-                sx={{
-                  fontWeight: 700,
-                }}
-              >
+              <Typography variant="h4" fontWeight={700}>
                 Cookie preferences
               </Typography>
             </Grid>
diff --git a/src/pages/settings/setup.tsx b/src/pages/settings/setup.tsx
index 60338a6c79..1dad75fee9 100644
--- a/src/pages/settings/setup.tsx
+++ b/src/pages/settings/setup.tsx
@@ -21,17 +21,14 @@ const Setup: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Settings – Setup'}</title>
       </Head>
+
       <SettingsHeader />
+
       <main>
         <Paper data-testid="setup-section" sx={{ p: 4, mb: 2 }}>
           <Grid container spacing={3}>
             <Grid item lg={4} xs={12}>
-              <Typography
-                variant="h4"
-                sx={{
-                  fontWeight: 700,
-                }}
-              >
+              <Typography variant="h4" fontWeight={700}>
                 <Tooltip
                   placement="top"
                   title="For security reasons, transactions made with a Safe Account need to be executed in order. The nonce shows you which transaction will be executed next. You can find the nonce for a transaction in the transaction details."
@@ -49,11 +46,7 @@ const Setup: NextPage = () => {
                 </Tooltip>
               </Typography>
 
-              <Typography
-                sx={{
-                  pt: 1,
-                }}
-              >
+              <Typography pt={1}>
                 Current nonce:{' '}
                 {safeLoaded ? <b>{nonce}</b> : <Skeleton width="30px" sx={{ display: 'inline-block' }} />}
               </Typography>
diff --git a/src/pages/share/safe-app.tsx b/src/pages/share/safe-app.tsx
index 3cfe2f7d1f..1940e462a5 100644
--- a/src/pages/share/safe-app.tsx
+++ b/src/pages/share/safe-app.tsx
@@ -13,16 +13,12 @@ const ShareSafeApp = () => {
       <Head>
         <title>{`Safe{Wallet} – Safe Apps`}</title>
       </Head>
+
       <main>
         {appUrl && chain ? (
           <SafeAppLanding appUrl={appUrl} chain={chain} />
         ) : (
-          <Box
-            sx={{
-              py: 4,
-              textAlign: 'center',
-            }}
-          >
+          <Box py={4} textAlign="center">
             <CircularProgress size={40} />
           </Box>
         )}
diff --git a/src/pages/stake.tsx b/src/pages/stake.tsx
index 9e563bf8d0..2b629a2676 100644
--- a/src/pages/stake.tsx
+++ b/src/pages/stake.tsx
@@ -15,16 +15,12 @@ const StakePage: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Stake'}</title>
       </Head>
+
       {isFeatureEnabled === true ? (
         <LazyStakePage />
       ) : isFeatureEnabled === false ? (
         <main>
-          <Typography
-            sx={{
-              textAlign: 'center',
-              my: 3,
-            }}
-          >
+          <Typography textAlign="center" my={3}>
             Staking is not available on this network.
           </Typography>
         </main>
diff --git a/src/pages/swap.tsx b/src/pages/swap.tsx
index d374e81f1f..0a18c061b8 100644
--- a/src/pages/swap.tsx
+++ b/src/pages/swap.tsx
@@ -35,16 +35,12 @@ const SwapPage: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Swap'}</title>
       </Head>
+
       <main style={{ height: 'calc(100vh - 52px)' }}>
         {isFeatureEnabled === true ? (
           <SwapWidgetNoSSR sell={sell} />
         ) : isFeatureEnabled === false ? (
-          <Typography
-            sx={{
-              textAlign: 'center',
-              my: 3,
-            }}
-          >
+          <Typography textAlign="center" my={3}>
             Swaps are not supported on this network.
           </Typography>
         ) : null}
diff --git a/src/pages/transactions/history.tsx b/src/pages/transactions/history.tsx
index b014bbe90f..d1d9f280e4 100644
--- a/src/pages/transactions/history.tsx
+++ b/src/pages/transactions/history.tsx
@@ -27,6 +27,7 @@ const History: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Transaction history'}</title>
       </Head>
+
       <TxHeader>
         <TrustedToggle />
 
@@ -34,14 +35,11 @@ const History: NextPage = () => {
           {filter?.type ?? 'Filter'}
         </Button>
       </TxHeader>
+
       <main>
         {showFilter && <TxFilterForm toggleFilter={toggleFilter} />}
 
-        <Box
-          sx={{
-            mb: 4,
-          }}
-        >
+        <Box mb={4}>
           <PaginatedTxns useTxns={useTxHistory} />
         </Box>
       </main>
diff --git a/src/pages/transactions/msg.tsx b/src/pages/transactions/msg.tsx
index 82cd4e62e4..2db44e1e61 100644
--- a/src/pages/transactions/msg.tsx
+++ b/src/pages/transactions/msg.tsx
@@ -10,16 +10,9 @@ const SingleTransaction: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Message details'}</title>
       </Head>
+
       <main>
-        <Typography
-          data-testid="tx-details"
-          variant="h3"
-          sx={{
-            fontWeight: 700,
-            pt: 1,
-            mb: 3,
-          }}
-        >
+        <Typography data-testid="tx-details" variant="h3" fontWeight={700} pt={1} mb={3}>
           Message details
         </Typography>
 
diff --git a/src/pages/transactions/queue.tsx b/src/pages/transactions/queue.tsx
index cc44deaf1b..f68919550e 100644
--- a/src/pages/transactions/queue.tsx
+++ b/src/pages/transactions/queue.tsx
@@ -17,17 +17,14 @@ const Queue: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Transaction queue'}</title>
       </Head>
+
       <BatchExecuteHoverProvider>
         <TxHeader>
           <BatchExecuteButton />
         </TxHeader>
 
         <main>
-          <Box
-            sx={{
-              mb: 4,
-            }}
-          >
+          <Box mb={4}>
             <RecoveryList />
 
             {/* Pending unsigned transactions */}
diff --git a/src/pages/transactions/tx.tsx b/src/pages/transactions/tx.tsx
index 61d4207550..e60e093ebe 100644
--- a/src/pages/transactions/tx.tsx
+++ b/src/pages/transactions/tx.tsx
@@ -10,16 +10,9 @@ const SingleTransaction: NextPage = () => {
       <Head>
         <title>{'Safe{Wallet} – Transaction details'}</title>
       </Head>
+
       <main>
-        <Typography
-          data-testid="tx-details"
-          variant="h3"
-          sx={{
-            fontWeight: 700,
-            pt: 1,
-            mb: 3,
-          }}
-        >
+        <Typography data-testid="tx-details" variant="h3" fontWeight={700} pt={1} mb={3}>
           Transaction details
         </Typography>
 
diff --git a/src/services/private-key-module/PkModulePopup.tsx b/src/services/private-key-module/PkModulePopup.tsx
index 47c899ee52..5bdbbb2452 100644
--- a/src/services/private-key-module/PkModulePopup.tsx
+++ b/src/services/private-key-module/PkModulePopup.tsx
@@ -23,18 +23,8 @@ const PkModulePopup = () => {
 
   return (
     <ModalDialog dialogTitle="Connect with Private Key" onClose={onClose} open={isOpen} sx={{ zIndex: 1400 }}>
-      <Box
-        sx={{
-          p: 2,
-        }}
-      >
-        <Typography
-          variant="body1"
-          gutterBottom
-          sx={{
-            mb: 3,
-          }}
-        >
+      <Box p={2}>
+        <Typography variant="body1" gutterBottom mb={3}>
           Enter your signer private key. The key will be saved for the duration of this browser session.
         </Typography>
 
diff --git a/src/services/safe-wallet-provider/index.test.ts b/src/services/safe-wallet-provider/index.test.ts
index 1e33ddc80c..d59cd5c741 100644
--- a/src/services/safe-wallet-provider/index.test.ts
+++ b/src/services/safe-wallet-provider/index.test.ts
@@ -622,10 +622,10 @@ describe('SafeWalletProvider', () => {
       it('should return a confirmed transaction if blockNumber/gasUsed are hex', async () => {
         const receipt: Pick<TransactionReceipt, 'logs' | 'blockHash' | 'blockNumber' | 'gasUsed'> = {
           logs: [],
-          blockHash: faker.string.hexadecimal(),
+          blockHash: numberToHex(Number(faker.string.hexadecimal())),
           // Typed as number/bigint; is hex
-          blockNumber: faker.string.hexadecimal() as unknown as number,
-          gasUsed: faker.string.hexadecimal() as unknown as bigint,
+          blockNumber: numberToHex(Number(faker.string.hexadecimal())) as unknown as number,
+          gasUsed: numberToHex(Number(faker.string.hexadecimal())) as unknown as bigint,
         }
         const sdk = {
           getBySafeTxHash: jest.fn().mockResolvedValue({
@@ -658,10 +658,10 @@ describe('SafeWalletProvider', () => {
           result: {
             receipts: [
               {
-                blockHash: numberToHex(Number(receipt.blockHash)),
-                blockNumber: numberToHex(Number(receipt.blockNumber)),
+                blockHash: receipt.blockHash,
+                blockNumber: receipt.blockNumber,
                 chainId: '0x1',
-                gasUsed: numberToHex(Number(receipt.gasUsed)),
+                gasUsed: receipt.gasUsed,
                 logs: receipt.logs,
                 status: '0x1',
                 transactionHash: '0x123',
@@ -675,7 +675,7 @@ describe('SafeWalletProvider', () => {
       it('should return a confirmed transaction if blockNumber/gasUsed are number/bigint', async () => {
         const receipt: Pick<TransactionReceipt, 'logs' | 'blockHash' | 'blockNumber' | 'gasUsed'> = {
           logs: [],
-          blockHash: faker.string.hexadecimal(),
+          blockHash: numberToHex(Number(faker.string.hexadecimal())),
           blockNumber: faker.number.int(),
           gasUsed: faker.number.bigInt(),
         }
@@ -710,8 +710,8 @@ describe('SafeWalletProvider', () => {
           result: {
             receipts: [
               {
-                blockHash: receipt.blockHash,
-                blockNumber: numberToHex(receipt.blockNumber),
+                blockHash: numberToHex(Number(receipt.blockHash)),
+                blockNumber: numberToHex(Number(receipt.blockNumber)),
                 chainId: '0x1',
                 gasUsed: numberToHex(receipt.gasUsed),
                 logs: receipt.logs,