diff --git a/src/components/balances/AssetsTable/index.tsx b/src/components/balances/AssetsTable/index.tsx
index 077bfed573..7bf2a85c36 100644
--- a/src/components/balances/AssetsTable/index.tsx
+++ b/src/components/balances/AssetsTable/index.tsx
@@ -1,6 +1,6 @@
 import CheckBalance from '@/features/counterfactual/CheckBalance'
 import { type ReactElement } from 'react'
-import { Box, IconButton, Checkbox, Skeleton, SvgIcon, Tooltip, Typography } from '@mui/material'
+import { Stack, IconButton, Checkbox, Skeleton, SvgIcon, Tooltip, Typography } from '@mui/material'
 import type { TokenInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { TokenType } from '@safe-global/safe-gateway-typescript-sdk'
 import css from './styles.module.css'
@@ -185,7 +185,7 @@ const AssetsTable = ({
               sticky: true,
               collapsed: item.tokenInfo.address === hidingAsset,
               content: (
-                <Box display="flex" flexDirection="row" gap={1} alignItems="center">
+                <Stack direction="row" spacing={1} alignItems="center">
                   <>
                     <SendButton tokenInfo={item.tokenInfo} />
 
@@ -209,7 +209,7 @@ const AssetsTable = ({
                       </Track>
                     )}
                   </>
-                </Box>
+                </Stack>
               ),
             },
           },
diff --git a/src/components/balances/TokenListSelect/index.tsx b/src/components/balances/TokenListSelect/index.tsx
index e300bc4e16..83edc97a84 100644
--- a/src/components/balances/TokenListSelect/index.tsx
+++ b/src/components/balances/TokenListSelect/index.tsx
@@ -2,7 +2,7 @@ import { useAppDispatch, useAppSelector } from '@/store'
 import { selectSettings, setTokenList, TOKEN_LISTS } from '@/store/settingsSlice'
 import { FEATURES } from '@/utils/chains'
 import type { SelectChangeEvent } from '@mui/material'
-import { Box, SvgIcon, Tooltip, Typography, FormControl, InputLabel, Select, MenuItem } from '@mui/material'
+import { Stack, SvgIcon, Tooltip, Typography, FormControl, InputLabel, Select, MenuItem } from '@mui/material'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import ExternalLink from '@/components/common/ExternalLink'
 import { OnboardingTooltip } from '@/components/common/OnboardingTooltip'
@@ -58,7 +58,7 @@ const TokenListSelect = () => {
         >
           <MenuItem value={TOKEN_LISTS.TRUSTED}>
             <Track {...ASSETS_EVENTS.SHOW_DEFAULT_TOKENS}>
-              <Box display="flex" flexDirection="row" gap="4px" alignItems="center" minWidth={155}>
+              <Stack direction="row" spacing="4px" alignItems="center" minWidth={155}>
                 {TokenListLabel.TRUSTED}
                 <Tooltip
                   arrow
@@ -72,7 +72,7 @@ const TokenListSelect = () => {
                     <SvgIcon sx={{ display: 'block' }} color="border" fontSize="small" component={InfoIcon} />
                   </span>
                 </Tooltip>
-              </Box>
+              </Stack>
             </Track>
           </MenuItem>
 
diff --git a/src/components/balances/TokenMenu/index.tsx b/src/components/balances/TokenMenu/index.tsx
index 10be9fbfd4..dde76fb2da 100644
--- a/src/components/balances/TokenMenu/index.tsx
+++ b/src/components/balances/TokenMenu/index.tsx
@@ -2,7 +2,7 @@ import { Sticky } from '@/components/common/Sticky'
 import Track from '@/components/common/Track'
 import { ASSETS_EVENTS } from '@/services/analytics'
 import { VisibilityOffOutlined } from '@mui/icons-material'
-import { Box, Typography, Button } from '@mui/material'
+import { Stack, Typography, Button, Box } from '@mui/material'
 
 import css from './styles.module.css'
 
@@ -31,7 +31,7 @@ const TokenMenu = ({
             {selectedAssetCount} {selectedAssetCount === 1 ? 'token' : 'tokens'} selected
           </Typography>
         </Box>
-        <Box display="flex" flexDirection="row" gap={1}>
+        <Stack direction="row" spacing={1}>
           <Track {...ASSETS_EVENTS.CANCEL_HIDE_DIALOG}>
             <Button onClick={cancel} className={css.cancelButton} size="small" variant="outlined">
               Cancel
@@ -47,7 +47,7 @@ const TokenMenu = ({
               Save
             </Button>
           </Track>
-        </Box>
+        </Stack>
       </Box>
     </Sticky>
   )
diff --git a/src/components/batch/BatchIndicator/BatchTooltip.tsx b/src/components/batch/BatchIndicator/BatchTooltip.tsx
index 9f9718886f..7b499536dd 100644
--- a/src/components/batch/BatchIndicator/BatchTooltip.tsx
+++ b/src/components/batch/BatchIndicator/BatchTooltip.tsx
@@ -1,5 +1,5 @@
 import { type ReactElement, useEffect, useState } from 'react'
-import { Box, SvgIcon } from '@mui/material'
+import { Box, Stack, SvgIcon } from '@mui/material'
 
 import SuccessIcon from '@/public/images/common/success.svg'
 import { TxEvent, txSubscribe } from '@/services/tx/txEvents'
@@ -25,12 +25,12 @@ const BatchTooltip = ({ children }: { children: ReactElement }) => {
       open={showTooltip}
       onClose={() => setShowTooltip(false)}
       title={
-        <Box display="flex" flexDirection="column" alignItems="center" p={2} gap={2}>
+        <Stack alignItems="center" p={2} spacing={2}>
           <Box fontSize="53px">
             <SvgIcon component={SuccessIcon} inheritViewBox fontSize="inherit" />
           </Box>
           Transaction is added to batch
-        </Box>
+        </Stack>
       }
     >
       <div>{children}</div>
diff --git a/src/components/batch/BatchSidebar/EmptyBatch.tsx b/src/components/batch/BatchSidebar/EmptyBatch.tsx
index ae65fcf4dd..2473fa6255 100644
--- a/src/components/batch/BatchSidebar/EmptyBatch.tsx
+++ b/src/components/batch/BatchSidebar/EmptyBatch.tsx
@@ -4,10 +4,10 @@ import InfoIcon from '@/public/images/notifications/info.svg'
 import AssetsIcon from '@/public/images/sidebar/assets.svg'
 import AppsIcon from '@/public/images/apps/apps-icon.svg'
 import SettingsIcon from '@/public/images/sidebar/settings.svg'
-import { Box, SvgIcon, Typography } from '@mui/material'
+import { Box, Stack, SvgIcon, Typography } from '@mui/material'
 
 const EmptyBatch = ({ children }: { children: ReactNode }) => (
-  <Box display="flex" flexWrap="wrap" justifyContent="center" textAlign="center" mt={3} px={4}>
+  <Stack flexWrap="wrap" justifyContent="center" textAlign="center" mt={3} px={4}>
     <SvgIcon component={EmptyBatchIcon} inheritViewBox sx={{ fontSize: 110 }} />
 
     <Typography variant="h4" fontWeight={700}>
@@ -28,7 +28,7 @@ const EmptyBatch = ({ children }: { children: ReactNode }) => (
 
       <b>What type of transactions can you add to the batch?</b>
 
-      <Box display="flex" mt={3} gap={6}>
+      <Stack mt={3} spacing={6}>
         <div>
           <SvgIcon component={AssetsIcon} inheritViewBox />
           <div>Token and NFT transfers</div>
@@ -43,9 +43,9 @@ const EmptyBatch = ({ children }: { children: ReactNode }) => (
           <SvgIcon component={SettingsIcon} inheritViewBox />
           <div>Safe Account settings</div>
         </div>
-      </Box>
+      </Stack>
     </Typography>
-  </Box>
+  </Stack>
 )
 
 export default EmptyBatch
diff --git a/src/components/common/ConnectWallet/AccountCenter.tsx b/src/components/common/ConnectWallet/AccountCenter.tsx
index b625c5c5c1..05d15bbc11 100644
--- a/src/components/common/ConnectWallet/AccountCenter.tsx
+++ b/src/components/common/ConnectWallet/AccountCenter.tsx
@@ -1,6 +1,6 @@
 import type { MouseEvent } from 'react'
 import { useState } from 'react'
-import { Box, ButtonBase, Paper, Popover } from '@mui/material'
+import { Stack, ButtonBase, Paper, Popover, Box } from '@mui/material'
 import css from '@/components/common/ConnectWallet/styles.module.css'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
@@ -35,9 +35,9 @@ export const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         <Box className={css.buttonContainer}>
           <WalletOverview wallet={wallet} balance={balance} showBalance />
 
-          <Box display="flex" alignItems="center" justifyContent="flex-end" ml="auto">
+          <Stack alignItems="center" justifyContent="flex-end" ml="auto">
             {open ? <ExpandLessIcon color="border" /> : <ExpandMoreIcon color="border" />}
-          </Box>
+          </Stack>
         </Box>
       </ButtonBase>
 
diff --git a/src/components/common/CopyAddressButton/index.tsx b/src/components/common/CopyAddressButton/index.tsx
index 83a378fa73..36945a9e2c 100644
--- a/src/components/common/CopyAddressButton/index.tsx
+++ b/src/components/common/CopyAddressButton/index.tsx
@@ -1,5 +1,5 @@
 import { checksumAddress } from '@/utils/addresses'
-import { Box, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import type { ReactNode, ReactElement } from 'react'
 import CopyButton from '../CopyButton'
 import EthHashInfo from '../EthHashInfo'
@@ -22,7 +22,7 @@ const CopyAddressButton = ({
   const checksummedAddress = checksumAddress(address)
 
   const dialogContent = trusted ? undefined : (
-    <Box display="flex" flexDirection="column" gap={2}>
+    <Stack spacing={2}>
       <EthHashInfo
         address={checksummedAddress}
         shortAddress={false}
@@ -34,7 +34,7 @@ const CopyAddressButton = ({
         The copied address is linked to a transaction with an untrusted token. Make sure you are interacting with the
         right address.
       </Typography>
-    </Box>
+    </Stack>
   )
 
   return (
diff --git a/src/components/common/CopyTooltip/ConfirmCopyModal.tsx b/src/components/common/CopyTooltip/ConfirmCopyModal.tsx
index d659346f01..37e8e9c626 100644
--- a/src/components/common/CopyTooltip/ConfirmCopyModal.tsx
+++ b/src/components/common/CopyTooltip/ConfirmCopyModal.tsx
@@ -9,7 +9,7 @@ import {
   DialogContent,
   DialogActions,
   Button,
-  Box,
+  Stack,
 } from '@mui/material'
 import WarningIcon from '@/public/images/notifications/warning.svg'
 import { type ReactElement, useEffect, type SyntheticEvent } from 'react'
@@ -35,7 +35,7 @@ const ConfirmCopyModal = ({ open, onClose, onCopy, children }: ConfirmCopyModalP
   return (
     <Dialog open={open} onClose={onClose}>
       <DialogTitle>
-        <Box data-testid="untrusted-token-warning" display="flex" flexDirection="row" alignItems="center" gap={1}>
+        <Stack data-testid="untrusted-token-warning" direction="row" alignItems="center" spacing={1}>
           <SvgIcon component={WarningIcon} inheritViewBox color="warning" sx={{ mb: -0.4 }} />
           <Typography variant="h6" fontWeight={700}>
             Before you copy
@@ -43,13 +43,13 @@ const ConfirmCopyModal = ({ open, onClose, onCopy, children }: ConfirmCopyModalP
           <IconButton aria-label="close" onClick={onClose} sx={{ marginLeft: 'auto' }}>
             <Close />
           </IconButton>
-        </Box>
+        </Stack>
       </DialogTitle>
       <Divider />
       <DialogContent>{children}</DialogContent>
       <Divider />
       <DialogActions sx={{ padding: 3 }}>
-        <Box className={css.dialogActions} gap={1}>
+        <Stack className={css.dialogActions} spacing={1}>
           <Track {...TX_LIST_EVENTS.COPY_WARNING_PROCEED}>
             <Button size="small" variant="text" color="primary" onClick={onCopy} fullWidth>
               Proceed and copy
@@ -60,7 +60,7 @@ const ConfirmCopyModal = ({ open, onClose, onCopy, children }: ConfirmCopyModalP
               Do not copy
             </Button>
           </Track>
-        </Box>
+        </Stack>
       </DialogActions>
     </Dialog>
   )
diff --git a/src/components/common/Countdown/index.tsx b/src/components/common/Countdown/index.tsx
index de4b9a37ca..ca81a87181 100644
--- a/src/components/common/Countdown/index.tsx
+++ b/src/components/common/Countdown/index.tsx
@@ -1,4 +1,4 @@
-import { Typography, Box } from '@mui/material'
+import { Typography, Stack } from '@mui/material'
 import type { ReactElement } from 'react'
 
 export function _getCountdown(seconds: number): { days: number; hours: number; minutes: number } {
@@ -31,11 +31,11 @@ export function Countdown({ seconds }: { seconds: number }): ReactElement | null
   const { days, hours, minutes } = _getCountdown(seconds)
 
   return (
-    <Box display="flex" gap={1}>
+    <Stack spacing={1}>
       <TimeLeft value={days} unit="day" />
       <TimeLeft value={hours} unit="hr" />
       <TimeLeft value={minutes} unit="min" />
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
index 39cb29ae58..f380bb08e4 100644
--- a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
+++ b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
@@ -2,7 +2,7 @@ import classnames from 'classnames'
 import type { ReactNode, ReactElement, SyntheticEvent } from 'react'
 import { isAddress } from 'ethers'
 import { useTheme } from '@mui/material/styles'
-import { Box, SvgIcon, Tooltip } from '@mui/material'
+import { Box, Stack, SvgIcon, Tooltip } from '@mui/material'
 import AddressBookIcon from '@/public/images/sidebar/address-book.svg'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import Identicon from '../../Identicon'
@@ -84,7 +84,7 @@ const SrcEthHashInfo = ({
 
       <Box overflow="hidden" className={onlyName ? css.inline : undefined} gap={0.5}>
         {name && (
-          <Box title={name} display="flex" alignItems="center" gap={0.5}>
+          <Stack title={name} alignItems="center" spacing={0.5}>
             <Box overflow="hidden" textOverflow="ellipsis">
               {name}
             </Box>
@@ -96,7 +96,7 @@ const SrcEthHashInfo = ({
                 </span>
               </Tooltip>
             )}
-          </Box>
+          </Stack>
         )}
 
         <div className={classnames(css.addressContainer, { [css.inline]: onlyName })}>
diff --git a/src/components/common/ExplorerButton/index.tsx b/src/components/common/ExplorerButton/index.tsx
index 4bc6db7373..94d2fe0896 100644
--- a/src/components/common/ExplorerButton/index.tsx
+++ b/src/components/common/ExplorerButton/index.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement, ComponentType, SyntheticEvent } from 'react'
-import { Box, IconButton, SvgIcon, Tooltip, Typography } from '@mui/material'
+import { Stack, IconButton, SvgIcon, Tooltip, Typography } from '@mui/material'
 import LinkIcon from '@/public/images/common/link.svg'
 import Link from 'next/link'
 
@@ -44,13 +44,13 @@ const ExplorerButton = ({
       href={href}
       onClick={onClick}
     >
-      <Box display="flex" alignItems="center">
+      <Stack alignItems="center">
         <Typography fontWeight={700} fontSize="small" mr="var(--space-1)" noWrap>
           View on explorer
         </Typography>
 
         <SvgIcon component={icon} inheritViewBox fontSize="small" />
-      </Box>
+      </Stack>
     </Link>
   )
 }
diff --git a/src/components/common/Mui/index.tsx b/src/components/common/Mui/index.tsx
index 1c1189f084..6eae6f3f5f 100644
--- a/src/components/common/Mui/index.tsx
+++ b/src/components/common/Mui/index.tsx
@@ -1,9 +1,12 @@
+import { memo } from 'react'
 import { default as MuiBox, type BoxProps } from '@mui/material/Box'
+import { type StackProps } from '@mui/material/Stack'
+
 import { default as MuiTypograpahy, type TypographyProps } from '@mui/material/Typography'
 
 export * from '@mui/material/index'
 
-export const Box = ({
+export const Box = memo(function Box({
   m,
   mt,
   mr,
@@ -48,7 +51,7 @@ export const Box = ({
   gridArea,
   lineHeight,
   ...props
-}: BoxProps['sx'] & BoxProps) => {
+}: BoxProps['sx'] & BoxProps) {
   return (
     <MuiBox
       sx={{
@@ -99,9 +102,103 @@ export const Box = ({
       {...props}
     />
   )
-}
+})
+
+export const Stack = memo(function Stack({
+  m,
+  mt,
+  mr,
+  mb,
+  ml,
+  mx,
+  my,
+  p,
+  pt,
+  pr,
+  pb,
+  pl,
+  px,
+  py,
+  width,
+  height,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  flex,
+  flexWrap,
+  flexGrow,
+  flexShrink,
+  alignItems,
+  justifyItems,
+  alignContent,
+  justifyContent,
+  columnGap,
+  color,
+  textAlign,
+  position,
+  overflow,
+  textOverflow,
+  border,
+  borderColor,
+  borderRadius,
+  borderBottom,
+  bgcolor,
+  gridArea,
+  lineHeight,
+  ...props
+}: StackProps['sx'] & StackProps) {
+  return (
+    <MuiBox
+      sx={{
+        m,
+        mt,
+        mr,
+        mb,
+        ml,
+        mx,
+        my,
+        p,
+        pt,
+        pr,
+        pb,
+        pl,
+        px,
+        py,
+        width,
+        height,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+        flex,
+        flexWrap,
+        flexGrow,
+        flexShrink,
+        alignItems,
+        justifyItems,
+        alignContent,
+        justifyContent,
+        columnGap,
+        color,
+        textAlign,
+        position,
+        overflow,
+        textOverflow,
+        border,
+        borderColor,
+        borderRadius,
+        borderBottom,
+        bgcolor,
+        gridArea,
+        lineHeight,
+      }}
+      {...props}
+    />
+  )
+})
 
-export const Typography = ({
+export const Typography = memo(function Typography({
   m,
   mt,
   mr,
@@ -137,7 +234,7 @@ export const Typography = ({
   whiteSpace,
   width,
   ...props
-}: TypographyProps['sx'] & TypographyProps) => {
+}: TypographyProps['sx'] & TypographyProps) {
   return (
     <MuiTypograpahy
       sx={{
@@ -179,4 +276,4 @@ export const Typography = ({
       {...props}
     />
   )
-}
+})
diff --git a/src/components/common/OnboardingTooltip/index.tsx b/src/components/common/OnboardingTooltip/index.tsx
index 459ff786a9..3ecd193f94 100644
--- a/src/components/common/OnboardingTooltip/index.tsx
+++ b/src/components/common/OnboardingTooltip/index.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import useLocalStorage from '@/services/local-storage/useLocalStorage'
 import type { TooltipProps } from '@mui/material'
-import { Box, Button, SvgIcon, Tooltip } from '@mui/material'
+import { Stack, Button, SvgIcon, Tooltip } from '@mui/material'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import { useDarkMode } from '@/hooks/useDarkMode'
 
@@ -39,7 +39,7 @@ export const OnboardingTooltip = ({
       placement={placement}
       arrow
       title={
-        <Box display="flex" alignItems="center" gap={1} p={1}>
+        <Stack alignItems="center" spacing={1} p={1}>
           <SvgIcon component={InfoIcon} inheritViewBox fontSize="small" />
           <div style={{ minWidth: '150px' }}>{text}</div>
           <Button
@@ -51,7 +51,7 @@ export const OnboardingTooltip = ({
           >
             Got it!
           </Button>
-        </Box>
+        </Stack>
       }
     >
       {children}
diff --git a/src/components/common/PaginatedTxns/index.tsx b/src/components/common/PaginatedTxns/index.tsx
index 9ecf0284e9..af11e3374d 100644
--- a/src/components/common/PaginatedTxns/index.tsx
+++ b/src/components/common/PaginatedTxns/index.tsx
@@ -1,5 +1,5 @@
 import { type ReactElement, useEffect, useState } from 'react'
-import { Box } from '@mui/material'
+import { Box, Stack } from '@mui/material'
 import TxList from '@/components/transactions/TxList'
 import { type TransactionListPage } from '@safe-global/safe-gateway-typescript-sdk'
 import ErrorMessage from '@/components/tx/ErrorMessage'
@@ -45,9 +45,9 @@ const TxPage = ({
   return (
     <>
       {isFirstPage && filter && page && (
-        <Box display="flex" flexDirection="column" alignItems="flex-end" pt={[2, 0]} pb={3}>
+        <Stack alignItems="flex-end" pt={[2, 0]} pb={3}>
           {getFilterResultCount(filter, page)}
-        </Box>
+        </Stack>
       )}
 
       {page && page.results.length > 0 && <TxList items={page.results} />}
diff --git a/src/components/common/SpendingLimitLabel/index.tsx b/src/components/common/SpendingLimitLabel/index.tsx
index eecaba68b7..e7671327d1 100644
--- a/src/components/common/SpendingLimitLabel/index.tsx
+++ b/src/components/common/SpendingLimitLabel/index.tsx
@@ -1,18 +1,18 @@
 import React, { type ReactElement } from 'react'
-import { Box, SvgIcon, Typography } from '@mui/material'
+import { Stack, SvgIcon, Typography } from '@mui/material'
+import type { StackProps } from '@mui/material/Stack'
 import SpeedIcon from '@/public/images/settings/spending-limit/speed.svg'
-import type { BoxProps } from '@mui/system'
 
 const SpendingLimitLabel = ({
   label,
   isOneTime = false,
   ...rest
-}: { label: string | ReactElement; isOneTime?: boolean } & BoxProps) => {
+}: { label: string | ReactElement; isOneTime?: boolean } & StackProps) => {
   return (
-    <Box display="flex" alignItems="center" gap="4px" {...rest}>
+    <Stack alignItems="center" spacing="4px" {...rest}>
       {!isOneTime && <SvgIcon component={SpeedIcon} inheritViewBox color="border" fontSize="medium" />}
       {typeof label === 'string' ? <Typography>{label}</Typography> : label}
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/common/WalletInfo/index.tsx b/src/components/common/WalletInfo/index.tsx
index 23c1af8cbd..803082bc4f 100644
--- a/src/components/common/WalletInfo/index.tsx
+++ b/src/components/common/WalletInfo/index.tsx
@@ -1,6 +1,6 @@
 import WalletBalance from '@/components/common/WalletBalance'
 import { WalletIdenticon } from '@/components/common/WalletOverview'
-import { Box, Button, Typography } from '@mui/material'
+import { Stack, Button, Typography, Box } from '@mui/material'
 import css from './styles.module.css'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import ChainSwitcher from '@/components/common/ChainSwitcher'
@@ -42,7 +42,7 @@ export const WalletInfo = ({ wallet, balance, currentChainId, onboard, addressBo
 
   return (
     <>
-      <Box display="flex" gap="12px">
+      <Stack spacing="12px">
         <WalletIdenticon wallet={wallet} size={36} />
 
         <Typography variant="body2" className={css.address} component="div">
@@ -56,7 +56,7 @@ export const WalletInfo = ({ wallet, balance, currentChainId, onboard, addressBo
             prefix={prefix}
           />
         </Typography>
-      </Box>
+      </Stack>
 
       <Box className={css.rowContainer}>
         <Box className={css.row}>
@@ -84,7 +84,7 @@ export const WalletInfo = ({ wallet, balance, currentChainId, onboard, addressBo
         </Box>
       </Box>
 
-      <Box display="flex" flexDirection="column" gap={2} width={1}>
+      <Stack spacing={2} width={1}>
         <ChainSwitcher fullWidth />
 
         <Button variant="contained" size="small" onClick={handleSwitchWallet} fullWidth>
@@ -101,7 +101,7 @@ export const WalletInfo = ({ wallet, balance, currentChainId, onboard, addressBo
         >
           Disconnect
         </Button>
-      </Box>
+      </Stack>
     </>
   )
 }
diff --git a/src/components/dashboard/Assets/index.tsx b/src/components/dashboard/Assets/index.tsx
index 12aca61614..533844181c 100644
--- a/src/components/dashboard/Assets/index.tsx
+++ b/src/components/dashboard/Assets/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { Box, Skeleton, Typography, Paper } from '@mui/material'
+import { Stack, Skeleton, Typography, Paper, Box } from '@mui/material'
 import type { SafeBalanceResponse } from '@safe-global/safe-gateway-typescript-sdk'
 import useBalances from '@/hooks/useBalances'
 import FiatValue from '@/components/common/FiatValue'
@@ -37,9 +37,9 @@ const NoAssets = () => (
       Add funds directly from your bank account or copy your address to send tokens from a different account.
     </Typography>
 
-    <Box display="flex" mt={2}>
+    <Stack mt={2}>
       <BuyCryptoButton />
-    </Box>
+    </Stack>
   </Paper>
 )
 
@@ -72,11 +72,11 @@ const AssetList = ({ items }: { items: SafeBalanceResponse['items'] }) => {
   const isSwapFeatureEnabled = useIsSwapFeatureEnabled()
 
   return (
-    <Box display="flex" flexDirection="column" gap={1}>
+    <Stack spacing={1}>
       {items.map((item) => (
         <AssetRow item={item} key={item.tokenInfo.address} showSwap={isSwapFeatureEnabled} />
       ))}
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/dashboard/PendingTxs/PendingTxListItem.tsx b/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
index c3e098ed3e..85a99a0c75 100644
--- a/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
+++ b/src/components/dashboard/PendingTxs/PendingTxListItem.tsx
@@ -4,7 +4,7 @@ import type { ReactElement } from 'react'
 import { useMemo } from 'react'
 import ChevronRight from '@mui/icons-material/ChevronRight'
 import type { TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
-import { Box } from '@mui/material'
+import { Box, Stack } from '@mui/material'
 import { isMultisigExecutionInfo } from '@/utils/transaction-guards'
 import TxInfo from '@/components/transactions/TxInfo'
 import TxType from '@/components/transactions/TxType'
@@ -48,7 +48,7 @@ const PendingTx = ({ transaction }: PendingTxType): ReactElement => {
           </Box>
         </Box>
 
-        <Box alignSelf="flex-start" display="flex" flexWrap="nowrap" alignItems="center" gap={1.5}>
+        <Stack alignSelf="flex-start" flexWrap="nowrap" alignItems="center" spacing={1.5}>
           {isMultisigExecutionInfo(transaction.executionInfo) && (
             <TxConfirmations
               submittedConfirmations={transaction.executionInfo.confirmationsSubmitted}
@@ -57,7 +57,7 @@ const PendingTx = ({ transaction }: PendingTxType): ReactElement => {
           )}
 
           <ChevronRight color="border" />
-        </Box>
+        </Stack>
       </Box>
     </NextLink>
   )
diff --git a/src/components/dashboard/PendingTxs/PendingTxsList.tsx b/src/components/dashboard/PendingTxs/PendingTxsList.tsx
index ce6e96bc1a..5b9ab71d62 100644
--- a/src/components/dashboard/PendingTxs/PendingTxsList.tsx
+++ b/src/components/dashboard/PendingTxs/PendingTxsList.tsx
@@ -3,7 +3,7 @@ import { useMemo } from 'react'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 import { getLatestTransactions } from '@/utils/tx-list'
-import { Box, Skeleton, Typography } from '@mui/material'
+import { Stack, Skeleton, Typography } from '@mui/material'
 import { Card, ViewAllLink, WidgetBody, WidgetContainer } from '../styled'
 import PendingTxListItem from './PendingTxListItem'
 import useTxQueue from '@/hooks/useTxQueue'
@@ -24,13 +24,13 @@ const MAX_TXS = 4
 const EmptyState = () => {
   return (
     <Card>
-      <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" height="100%" gap={2}>
+      <Stack alignItems="center" justifyContent="center" height="100%" spacing={2}>
         <NoTransactionsIcon data-testid="no-tx-icon" />
 
         <Typography data-testid="no-tx-text" variant="body1" color="primary.light">
           This Safe Account has no queued transactions
         </Typography>
-      </Box>
+      </Stack>
     </Card>
   )
 }
diff --git a/src/components/new-safe/create/steps/SetNameStep/index.tsx b/src/components/new-safe/create/steps/SetNameStep/index.tsx
index 88df9c58c7..0012094f64 100644
--- a/src/components/new-safe/create/steps/SetNameStep/index.tsx
+++ b/src/components/new-safe/create/steps/SetNameStep/index.tsx
@@ -1,4 +1,4 @@
-import { InputAdornment, Tooltip, SvgIcon, Typography, Box, Divider, Button, Grid } from '@mui/material'
+import { InputAdornment, Tooltip, SvgIcon, Typography, Stack, Divider, Button, Grid, Box } from '@mui/material'
 import { FormProvider, useForm, useWatch } from 'react-hook-form'
 import { useMnemonicSafeName } from '@/hooks/useMnemonicName'
 import InfoIcon from '@/public/images/notifications/info.svg'
@@ -155,14 +155,14 @@ function SetNameStep({
         </Box>
         <Divider />
         <Box className={layoutCss.row}>
-          <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+          <Stack direction="row" justifyContent="space-between" spacing={3}>
             <Button data-testid="cancel-btn" variant="outlined" onClick={onCancel} size="small">
               Cancel
             </Button>
             <Button data-testid="next-btn" type="submit" variant="contained" size="stretched" disabled={isDisabled}>
               Next
             </Button>
-          </Box>
+          </Stack>
         </Box>
       </form>
     </FormProvider>
diff --git a/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx b/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx
index bf681f515d..0a8714a3ba 100644
--- a/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx
+++ b/src/components/new-safe/create/steps/StatusStep/StatusMessage.tsx
@@ -4,7 +4,7 @@ import { SafeCreationEvent } from '@/features/counterfactual/services/safeCreati
 import type { UndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
 import { useCurrentChain } from '@/hooks/useChains'
 import { getBlockExplorerLink } from '@/utils/chains'
-import { Box, Typography } from '@mui/material'
+import { Box, Stack, Typography } from '@mui/material'
 import FailedIcon from '@/public/images/common/tx-failed.svg'
 
 const getStep = (status: SafeCreationEvent) => {
@@ -64,9 +64,9 @@ const StatusMessage = ({
   return (
     <>
       <Box data-testid="safe-status-info" px={3} mt={3}>
-        <Box width="160px" height="160px" display="flex" m="auto">
+        <Stack width="160px" height="160px" m="auto">
           {isError ? <FailedIcon /> : <LoadingSpinner status={spinnerStatus} />}
-        </Box>
+        </Stack>
         <Typography variant="h3" mt={2} fontWeight={700}>
           {stepInfo.description}
         </Typography>
diff --git a/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx b/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx
index c59bcbb332..5c7a5ef2eb 100644
--- a/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx
+++ b/src/components/new-safe/load/steps/SafeOwnerStep/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { getSafeInfo, type SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { FormProvider, useFieldArray, useForm } from 'react-hook-form'
-import { Box, Button, Divider } from '@mui/material'
+import { Stack, Button, Divider, Box } from '@mui/material'
 
 import type { StepRenderProps } from '@/components/new-safe/CardStepper/useCardStepper'
 import type { LoadSafeFormData } from '@/components/new-safe/load'
@@ -74,14 +74,14 @@ const SafeOwnerStep = ({ data, onSubmit, onBack }: StepRenderProps<LoadSafeFormD
         </Box>
         <Divider />
         <Box className={layoutCss.row}>
-          <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+          <Stack direction="row" justifyContent="space-between" spacing={3}>
             <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
               Back
             </Button>
             <Button type="submit" variant="contained" size="stretched" disabled={!isValid}>
               Next
             </Button>
-          </Box>
+          </Stack>
         </Box>
       </form>
     </FormProvider>
diff --git a/src/components/new-safe/load/steps/SafeReviewStep/index.tsx b/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
index cd44eb6d41..2823e02e10 100644
--- a/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
+++ b/src/components/new-safe/load/steps/SafeReviewStep/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Button, Divider, Grid, Typography } from '@mui/material'
+import { Stack, Button, Divider, Grid, Typography, Box } from '@mui/material'
 
 import type { StepRenderProps } from '@/components/new-safe/CardStepper/useCardStepper'
 import type { LoadSafeFormData } from '@/components/new-safe/load'
@@ -127,14 +127,14 @@ const SafeReviewStep = ({ data, onBack }: StepRenderProps<LoadSafeFormData>) =>
       </Box>
       <Divider />
       <Box className={layoutCss.row}>
-        <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
+        <Stack direction="row" justifyContent="space-between" spacing={3}>
           <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>
             Back
           </Button>
           <Button onClick={addSafe} variant="contained" size="stretched">
             Add
           </Button>
-        </Box>
+        </Stack>
       </Box>
     </>
   )
diff --git a/src/components/nfts/NftGrid/index.tsx b/src/components/nfts/NftGrid/index.tsx
index e35662b966..6795576941 100644
--- a/src/components/nfts/NftGrid/index.tsx
+++ b/src/components/nfts/NftGrid/index.tsx
@@ -19,6 +19,7 @@ import {
   TextField,
   Typography,
   Tooltip,
+  Stack,
 } from '@mui/material'
 import FilterAltIcon from '@mui/icons-material/FilterAlt'
 import NftIcon from '@/public/images/common/nft.svg'
@@ -152,7 +153,7 @@ const NftGrid = ({
                   }}
                 >
                   {headCell.id === 'collection' ? (
-                    <Box display="flex" alignItems="center" alignContent="center" gap={1}>
+                    <Stack alignItems="center" alignContent="center" spacing={1}>
                       <TextField
                         placeholder="Collection"
                         hiddenLabel
@@ -174,7 +175,7 @@ const NftGrid = ({
                           disableUnderline: true,
                         }}
                       />
-                    </Box>
+                    </Stack>
                   ) : headCell.id === 'links' ? (
                     linkTemplates ? (
                       <>Links</>
@@ -202,7 +203,7 @@ 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 display="flex" alignItems="center" gap={2}>
+                    <Stack alignItems="center" spacing={2}>
                       {item.imageUri ? activeNftIcon : inactiveNftIcon}
 
                       <div>
@@ -218,7 +219,7 @@ const NftGrid = ({
                           />
                         </Typography>
                       </div>
-                    </Box>
+                    </Stack>
                   </TableCell>
 
                   {/* Token ID */}
@@ -230,13 +231,13 @@ const NftGrid = ({
 
                   {/* Links */}
                   <TableCell sx={{ display: { xs: 'none', sm: 'table-cell' } }}>
-                    <Box display="flex" alignItems="center" alignContent="center" gap={2.5}>
+                    <Stack alignItems="center" alignContent="center" spacing={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} />
                         </ExternalLink>
                       ))}
-                    </Box>
+                    </Stack>
                   </TableCell>
 
                   {/* Checkbox */}
diff --git a/src/components/safe-apps/AddCustomSafeAppCard/index.tsx b/src/components/safe-apps/AddCustomSafeAppCard/index.tsx
index 181b99dbab..93a18545bf 100644
--- a/src/components/safe-apps/AddCustomSafeAppCard/index.tsx
+++ b/src/components/safe-apps/AddCustomSafeAppCard/index.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import Card from '@mui/material/Card'
-import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 
 import AddCustomAppIcon from '@/public/images/apps/add-custom-app.svg'
 import { AddCustomAppModal } from '@/components/safe-apps/AddCustomAppModal'
+import Stack from '@mui/material/Stack'
 
 type Props = { onSave: (data: SafeAppData) => void; safeAppList: SafeAppData[] }
 
@@ -15,7 +15,7 @@ const AddCustomSafeAppCard = ({ onSave, safeAppList }: Props) => {
   return (
     <>
       <Card>
-        <Box p="48px 12px" display="flex" flexDirection="column" alignItems="center">
+        <Stack p="48px 12px" alignItems="center">
           {/* Add Custom Safe App Icon */}
           <AddCustomAppIcon alt="Add Custom Safe App card" />
 
@@ -30,7 +30,7 @@ const AddCustomSafeAppCard = ({ onSave, safeAppList }: Props) => {
           >
             Add custom Safe App
           </Button>
-        </Box>
+        </Stack>
       </Card>
 
       {/*  Add Custom Safe App Modal */}
diff --git a/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx b/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx
index 25e1b3bc57..2ee0575746 100644
--- a/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx
+++ b/src/components/safe-apps/AppFrame/TransactionQueueBar/index.tsx
@@ -1,5 +1,14 @@
 import type { Dispatch, ReactElement, SetStateAction } from 'react'
-import { Backdrop, Typography, Box, IconButton, Accordion, AccordionDetails, AccordionSummary } from '@mui/material'
+import {
+  Backdrop,
+  Typography,
+  Stack,
+  IconButton,
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+} from '@mui/material'
 import { ClickAwayListener } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
@@ -81,9 +90,9 @@ const TransactionQueueBar = ({
             </AccordionSummary>
             <AccordionDetails>
               <BatchExecuteHoverProvider>
-                <Box display="flex" flexDirection="column" alignItems="flex-end">
+                <Stack alignItems="flex-end">
                   <BatchExecuteButton />
-                </Box>
+                </Stack>
                 <PaginatedTxns useTxns={useTxQueue} />
               </BatchExecuteHoverProvider>
             </AccordionDetails>
diff --git a/src/components/safe-apps/SafeAppActionButtons/index.tsx b/src/components/safe-apps/SafeAppActionButtons/index.tsx
index 40fd557ec5..b1d0e63e43 100644
--- a/src/components/safe-apps/SafeAppActionButtons/index.tsx
+++ b/src/components/safe-apps/SafeAppActionButtons/index.tsx
@@ -1,8 +1,5 @@
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
-import Box from '@mui/material/Box'
-import IconButton from '@mui/material/IconButton'
-import Tooltip from '@mui/material/Tooltip'
-import SvgIcon from '@mui/material/SvgIcon'
+import { Stack, IconButton, Tooltip, SvgIcon } from '@mui/material'
 
 import { useShareSafeAppUrl } from '@/components/safe-apps/hooks/useShareSafeAppUrl'
 import { SAFE_APPS_EVENTS, trackSafeAppEvent } from '@/services/analytics'
@@ -37,7 +34,7 @@ const SafeAppActionButtons = ({
   }
 
   return (
-    <Box display="flex" gap={1} alignItems="center">
+    <Stack spacing={1} alignItems="center">
       {/* Open the preview drawer */}
       {openPreviewDrawer && (
         <IconButton
@@ -99,7 +96,7 @@ const SafeAppActionButtons = ({
           </IconButton>
         </Tooltip>
       )}
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx b/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx
index 3266a4237c..5f837c0a31 100644
--- a/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx
+++ b/src/components/safe-apps/SafeAppLandingPage/TryDemo.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Typography } from '@mui/material'
+import { Stack, Button, Typography } from '@mui/material'
 import { CTA_HEIGHT, CTA_BUTTON_WIDTH } from '@/components/safe-apps/SafeAppLandingPage/constants'
 import Link from 'next/link'
 import type { LinkProps } from 'next/link'
@@ -10,7 +10,7 @@ type Props = {
 }
 
 const TryDemo = ({ demoUrl, onClick }: Props) => (
-  <Box display="flex" flexDirection="column" alignItems="center" justifyContent="space-between" height={CTA_HEIGHT}>
+  <Stack alignItems="center" justifyContent="space-between" height={CTA_HEIGHT}>
     <Typography variant="h5" fontWeight={700}>
       Try the Safe App before using it
     </Typography>
@@ -20,7 +20,7 @@ const TryDemo = ({ demoUrl, onClick }: Props) => (
         Try demo
       </Button>
     </Link>
-  </Box>
+  </Stack>
 )
 
 export { TryDemo }
diff --git a/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx b/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
index 442d239e16..365fa48637 100644
--- a/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
+++ b/src/components/safe-apps/SafeAppPreviewDrawer/index.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import Drawer from '@mui/material/Drawer'
-import Box from '@mui/material/Box'
+import Box from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import Button from '@mui/material/Button'
 import SvgIcon from '@mui/material/SvgIcon'
@@ -19,6 +19,7 @@ import CloseIcon from '@/public/images/common/close.svg'
 import { useOpenedSafeApps } from '@/hooks/safe-apps/useOpenedSafeApps'
 import css from './styles.module.css'
 import { SAFE_APPS_EVENTS, SAFE_APPS_LABELS, trackSafeAppEvent } from '@/services/analytics'
+import Stack from '@mui/material/Stack'
 
 type SafeAppPreviewDrawerProps = {
   safeApp?: SafeAppData
@@ -46,7 +47,7 @@ const SafeAppPreviewDrawer = ({ isOpen, safeApp, isBookmarked, onClose, onBookma
         {/* Toolbar */}
 
         {safeApp && (
-          <Box display="flex" justifyContent="right">
+          <Stack justifyContent="right">
             <SafeAppActionButtons safeApp={safeApp} isBookmarked={isBookmarked} onBookmarkSafeApp={onBookmark} />
             <Tooltip title={`Close ${safeApp.name} preview`} placement="top">
               <IconButton
@@ -60,7 +61,7 @@ const SafeAppPreviewDrawer = ({ isOpen, safeApp, isBookmarked, onClose, onBookma
                 <SvgIcon component={CloseIcon} inheritViewBox color="border" fontSize="small" />
               </IconButton>
             </Tooltip>
-          </Box>
+          </Stack>
         )}
 
         {/* Safe App Info */}
diff --git a/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx b/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx
index 36dea9290d..799c4b1f27 100644
--- a/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx
+++ b/src/components/safe-apps/SafeAppSocialLinksCard/index.tsx
@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import Card from '@mui/material/Card'
-import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import IconButton from '@mui/material/IconButton'
 import Divider from '@mui/material/Divider'
@@ -13,6 +12,7 @@ import type { SafeAppData, SafeAppSocialProfile } from '@safe-global/safe-gatewa
 
 import DiscordIcon from '@/public/images/common/discord-icon.svg'
 import css from './styles.module.css'
+import Stack from '@mui/material/Stack'
 
 type SafeAppSocialLinksCardProps = {
   safeApp: SafeAppData
@@ -33,7 +33,7 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
 
   return (
     <Card className={css.container}>
-      <Box display="flex" alignItems="center" gap={1} component="a">
+      <Stack alignItems="center" spacing={1} component="a">
         {/* Team Link section */}
         <div className={css.questionMarkIcon}>
           <HelpOutlineRoundedIcon color="info" />
@@ -46,9 +46,9 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
             Get in touch with the team
           </Typography>
         </div>
-      </Box>
+      </Stack>
 
-      <Box className={css.socialLinksSectionContainer} display="flex" gap={4}>
+      <Stack className={css.socialLinksSectionContainer} spacing={4}>
         {/* Social links section */}
         {hasSocialLinks && (
           <div>
@@ -56,7 +56,7 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
               Social Media
             </Typography>
 
-            <Box display="flex" mt={0.2} minHeight="40px">
+            <Stack mt={0.2} minHeight="40px">
               {discordSocialLink && (
                 <IconButton aria-label="Discord link" component="a" target="_blank" href={discordSocialLink.url}>
                   <DiscordIcon />
@@ -80,7 +80,7 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
                   <GitHubIcon color="border" />
                 </IconButton>
               )}
-            </Box>
+            </Stack>
           </div>
         )}
 
@@ -90,7 +90,7 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
 
         {/* Developer website section */}
         {developerWebsite && (
-          <Box display="flex" flexDirection="column">
+          <Stack>
             <Typography color="border.main" variant="body2">
               Website
             </Typography>
@@ -107,9 +107,9 @@ const SafeAppSocialLinksCard = ({ safeApp }: SafeAppSocialLinksCardProps) => {
                 {developerWebsite}
               </MuiLink>
             </Link>
-          </Box>
+          </Stack>
         )}
-      </Box>
+      </Stack>
     </Card>
   )
 }
diff --git a/src/components/safe-apps/SafeAppsFilters/index.tsx b/src/components/safe-apps/SafeAppsFilters/index.tsx
index eec8c8b492..2798d8a7a3 100644
--- a/src/components/safe-apps/SafeAppsFilters/index.tsx
+++ b/src/components/safe-apps/SafeAppsFilters/index.tsx
@@ -8,7 +8,6 @@ import OutlinedInput from '@mui/material/OutlinedInput'
 import ListItemText from '@mui/material/ListItemText'
 import Select from '@mui/material/Select'
 import IconButton from '@mui/material/IconButton'
-import Box from '@mui/material/Box'
 import Checkbox from '@mui/material/Checkbox'
 import FormLabel from '@mui/material/FormLabel'
 import FormControl from '@mui/material/FormControl'
@@ -22,6 +21,7 @@ import { getUniqueTags } from '@/components/safe-apps/utils'
 import SearchIcon from '@/public/images/common/search.svg'
 import BatchIcon from '@/public/images/apps/batch-icon.svg'
 import css from './styles.module.css'
+import Stack from '@mui/material/Stack'
 
 export type safeAppCatogoryOptionType = {
   label: string
@@ -161,9 +161,9 @@ const SafeAppsFilters = ({
                 onChangeOptimizedWithBatch(value)
               }}
               label={
-                <Box display="flex" alignItems="center" gap={1}>
+                <Stack alignItems="center" spacing={1}>
                   <span>Batch transactions</span> <BatchIcon />
-                </Box>
+                </Stack>
               }
             />
           </FormControl>
diff --git a/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx b/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx
index 5896697320..6ede236108 100644
--- a/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx
+++ b/src/components/safe-apps/SafeAppsInfoModal/AllowedFeaturesList.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, SvgIcon } from '@mui/material'
+import { Stack, Typography, SvgIcon, Box } from '@mui/material'
 import ShieldIcon from '@/public/images/settings/permissions/shield.svg'
 
 import { getBrowserPermissionDisplayValues } from '@/hooks/safe-apps/permissions'
@@ -34,7 +34,7 @@ const AllowedFeaturesList: React.FC<SafeAppsInfoAllowedFeaturesProps> = ({
       <Box mx={1} my={3} textAlign="left">
         <Typography>This Safe App is requesting permission to use:</Typography>
 
-        <Box display="flex" flexDirection="column" ml={2} mt={1}>
+        <Stack ml={2} mt={1}>
           {features
             .filter(({ feature }) => isBrowserFeature(feature))
             .map(({ feature, checked }, index) => (
@@ -46,7 +46,7 @@ const AllowedFeaturesList: React.FC<SafeAppsInfoAllowedFeaturesProps> = ({
                 label={getBrowserPermissionDisplayValues(feature).displayName}
               />
             ))}
-        </Box>
+        </Stack>
       </Box>
     </>
   )
diff --git a/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx b/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx
index d94d9b818f..174f0a5eb5 100644
--- a/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx
+++ b/src/components/safe-apps/SafeAppsInfoModal/Slider.tsx
@@ -1,4 +1,4 @@
-import { Box, Button } from '@mui/material'
+import { Stack, Button } from '@mui/material'
 import React, { useState, useEffect, useMemo } from 'react'
 import css from './styles.module.css'
 
@@ -68,7 +68,7 @@ const Slider: React.FC<SliderProps> = ({ onSlideChange, children, initialStep })
           ))}
         </div>
       </div>
-      <Box display="flex" justifyContent="center" width="100%">
+      <Stack justifyContent="center" width="100%">
         <Button color="primary" variant="outlined" size="small" fullWidth onClick={prevSlide}>
           {isFirstStep ? 'Cancel' : 'Back'}
         </Button>
@@ -85,7 +85,7 @@ const Slider: React.FC<SliderProps> = ({ onSlideChange, children, initialStep })
         >
           Continue
         </Button>
-      </Box>
+      </Stack>
     </>
   )
 }
diff --git a/src/components/safe-apps/SafeAppsInfoModal/UnknownAppWarning.tsx b/src/components/safe-apps/SafeAppsInfoModal/UnknownAppWarning.tsx
index 837f8b3445..49c50aa870 100644
--- a/src/components/safe-apps/SafeAppsInfoModal/UnknownAppWarning.tsx
+++ b/src/components/safe-apps/SafeAppsInfoModal/UnknownAppWarning.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material'
+import { Stack, Checkbox, FormControlLabel, Typography, Box } from '@mui/material'
 import WarningAmberOutlinedIcon from '@mui/icons-material/WarningAmberOutlined'
 import lightPalette from '@/components/theme/lightPalette'
 import Domain from './Domain'
@@ -18,7 +18,7 @@ const UnknownAppWarning = ({ url, onHideWarning }: UnknownAppWarningProps): Reac
   }
 
   return (
-    <Box display="flex" flexDirection="column" height="100%" alignItems="center">
+    <Stack height="100%" alignItems="center">
       <Box display="block" alignItems="center" mt={6}>
         <WarningAmberOutlinedIcon fontSize="large" color="warning" />
         <Typography variant="h3" fontWeight={700} mt={2} color={lightPalette.warning.main}>
@@ -49,7 +49,7 @@ const UnknownAppWarning = ({ url, onHideWarning }: UnknownAppWarningProps): Reac
           />
         </Box>
       )}
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/safe-messages/MsgDetails/index.tsx b/src/components/safe-messages/MsgDetails/index.tsx
index db757ba5b9..bf83b0f901 100644
--- a/src/components/safe-messages/MsgDetails/index.tsx
+++ b/src/components/safe-messages/MsgDetails/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo, type ReactElement } from 'react'
-import { Accordion, AccordionSummary, Typography, AccordionDetails, Box } from '@mui/material'
+import { Accordion, AccordionSummary, Typography, AccordionDetails, Stack } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import CodeIcon from '@mui/icons-material/Code'
 import classNames from 'classnames'
@@ -125,9 +125,9 @@ const MsgDetails = ({ msg }: { msg: SafeMessage }): ReactElement => {
       <div className={txDetailsCss.txSigners}>
         <MsgSigners msg={msg} />
         {wallet && !isConfirmed && (
-          <Box display="flex" alignItems="center" justifyContent="center" gap={1} mt={2}>
+          <Stack alignItems="center" justifyContent="center" spacing={1} mt={2}>
             <SignMsgButton msg={msg} />
-          </Box>
+          </Stack>
         )}
       </div>
     </div>
diff --git a/src/components/settings/ProposersList/index.tsx b/src/components/settings/ProposersList/index.tsx
index d35ccc76fa..8ab9b2b528 100644
--- a/src/components/settings/ProposersList/index.tsx
+++ b/src/components/settings/ProposersList/index.tsx
@@ -11,7 +11,7 @@ import useProposers from '@/hooks/useProposers'
 import AddIcon from '@/public/images/common/add.svg'
 import { SETTINGS_EVENTS } from '@/services/analytics'
 import { FEATURES } from '@/utils/chains'
-import { Box, Button, Grid, Paper, SvgIcon, Typography } from '@mui/material'
+import { Stack, Button, Grid, Paper, SvgIcon, Typography, Box } from '@mui/material'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import ExternalLink from '@/components/common/ExternalLink'
 import { HelpCenterArticle } from '@/config/constants'
@@ -83,7 +83,7 @@ const ProposersList = () => {
 
   return (
     <Paper sx={{ mt: 2 }}>
-      <Box data-testid="proposer-section" display="flex" flexDirection="column" gap={2}>
+      <Stack data-testid="proposer-section" spacing={2}>
         <Grid container spacing={3}>
           <Grid item lg={4} xs={12}>
             <Typography variant="h4" fontWeight={700}></Typography>
@@ -126,7 +126,7 @@ const ProposersList = () => {
             <UpsertProposer onClose={() => setIsAddDialogOpen(false)} onSuccess={() => setIsAddDialogOpen(false)} />
           )}
         </Grid>
-      </Box>
+      </Stack>
     </Paper>
   )
 }
diff --git a/src/components/settings/PushNotifications/GlobalPushNotifications.tsx b/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
index eb44de9c74..2aa83d61e2 100644
--- a/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
+++ b/src/components/settings/PushNotifications/GlobalPushNotifications.tsx
@@ -1,6 +1,5 @@
 import { selectUndeployedSafes, type UndeployedSafesState } from '@/features/counterfactual/store/undeployedSafesSlice'
 import {
-  Box,
   Grid,
   Paper,
   Typography,
@@ -13,6 +12,7 @@ import {
   ListItemIcon,
   ListItemText,
   CircularProgress,
+  Stack,
 } from '@mui/material'
 import mapValues from 'lodash/mapValues'
 import difference from 'lodash/difference'
@@ -388,7 +388,7 @@ export const GlobalPushNotifications = (): ReactElement | null => {
           My Safes Accounts ({totalNotifiableSafes})
         </Typography>
 
-        <Box display="flex" alignItems="center">
+        <Stack alignItems="center">
           {totalSignaturesRequired > 0 && (
             <Typography display="inline" mr={2} textAlign="right">
               We&apos;ll ask you to verify ownership of each Safe Account with your signature per chain{' '}
@@ -403,7 +403,7 @@ export const GlobalPushNotifications = (): ReactElement | null => {
               </Button>
             )}
           </CheckWallet>
-        </Box>
+        </Stack>
       </Grid>
 
       <Grid item xs={12}>
diff --git a/src/components/settings/SecurityLogin/index.tsx b/src/components/settings/SecurityLogin/index.tsx
index d2ba01e986..0d66c2b13f 100644
--- a/src/components/settings/SecurityLogin/index.tsx
+++ b/src/components/settings/SecurityLogin/index.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import { Stack } from '@mui/material'
 import dynamic from 'next/dynamic'
 import { useIsRecoverySupported } from '@/features/recovery/hooks/useIsRecoverySupported'
 import SecuritySettings from '../SecuritySettings'
@@ -11,11 +11,11 @@ const SecurityLogin = () => {
   const router = useRouter()
 
   return (
-    <Box display="flex" flexDirection="column" gap={2}>
+    <Stack spacing={2}>
       {isRecoverySupported && router.query.safe ? <RecoverySettings /> : null}
 
       <SecuritySettings />
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx b/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx
index d9f18a3b47..74488d8474 100644
--- a/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx
+++ b/src/components/settings/SpendingLimits/SpendingLimitsTable.tsx
@@ -1,7 +1,7 @@
 import EnhancedTable from '@/components/common/EnhancedTable'
 import DeleteIcon from '@/public/images/common/delete.svg'
 import { safeFormatUnits } from '@/utils/formatters'
-import { Box, IconButton, Skeleton, SvgIcon, Typography } from '@mui/material'
+import { Stack, IconButton, Skeleton, SvgIcon, Typography } from '@mui/material'
 import { relativeTime } from '@/utils/date'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import { useContext, useMemo } from 'react'
@@ -20,7 +20,7 @@ const SKELETON_ROWS = new Array(3).fill('').map(() => {
       beneficiary: {
         rawValue: '0x',
         content: (
-          <Box display="flex" flexDirection="row" gap={1} alignItems="center">
+          <Stack direction="row" spacing={1} alignItems="center">
             <Skeleton variant="circular" width={26} height={26} />
             <div>
               <Typography>
@@ -30,18 +30,18 @@ const SKELETON_ROWS = new Array(3).fill('').map(() => {
                 <Skeleton width={300} />
               </Typography>
             </div>
-          </Box>
+          </Stack>
         ),
       },
       spent: {
         rawValue: '0',
         content: (
-          <Box display="flex" flexDirection="row" gap={1} alignItems="center">
+          <Stack direction="row" spacing={1} alignItems="center">
             <Skeleton variant="circular" width={26} height={26} />
             <Typography>
               <Skeleton width={100} />
             </Typography>
-          </Box>
+          </Stack>
         ),
       },
       resetTime: {
@@ -97,10 +97,10 @@ export const SpendingLimitsTable = ({
                 spent: {
                   rawValue: spendingLimit.spent,
                   content: (
-                    <Box data-testid="spent-amount" display="flex" alignItems="center" gap={1}>
+                    <Stack data-testid="spent-amount" alignItems="center" spacing={1}>
                       <TokenIcon logoUri={spendingLimit.token.logoUri} tokenSymbol={spendingLimit.token.symbol} />
                       {`${formattedSpent} of ${formattedAmount} ${spendingLimit.token.symbol}`}
-                    </Box>
+                    </Stack>
                   ),
                 },
                 resetTime: {
diff --git a/src/components/sidebar/QrCodeButton/QrModal.tsx b/src/components/sidebar/QrCodeButton/QrModal.tsx
index 04ec8df5ba..10f2987a97 100644
--- a/src/components/sidebar/QrCodeButton/QrModal.tsx
+++ b/src/components/sidebar/QrCodeButton/QrModal.tsx
@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react'
-import { Box, Switch, DialogContent, FormControlLabel, Typography } from '@mui/material'
+import { Stack, Switch, DialogContent, FormControlLabel, Typography, Box } from '@mui/material'
 import ModalDialog from '@/components/common/ModalDialog'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import { useCurrentChain } from '@/hooks/useChains'
@@ -30,7 +30,7 @@ const QrModal = ({ onClose }: { onClose: () => void }): ReactElement => {
           Only send {nativeToken} and tokens (e.g. ERC20, ERC721) to this address.
         </Typography>
 
-        <Box display="flex" flexDirection="column" flexWrap="wrap" justifyContent="center" alignItems="center" my={2}>
+        <Stack 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>
@@ -55,7 +55,7 @@ const QrModal = ({ onClose }: { onClose: () => void }): ReactElement => {
               showCopyButton
             />
           </Box>
-        </Box>
+        </Stack>
       </DialogContent>
     </ModalDialog>
   )
diff --git a/src/components/transactions/SignedMessagesHelpLink/index.tsx b/src/components/transactions/SignedMessagesHelpLink/index.tsx
index 6c3cfafe14..9725c3034b 100644
--- a/src/components/transactions/SignedMessagesHelpLink/index.tsx
+++ b/src/components/transactions/SignedMessagesHelpLink/index.tsx
@@ -1,4 +1,4 @@
-import { Box, SvgIcon, Typography } from '@mui/material'
+import { Stack, SvgIcon, Typography } from '@mui/material'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import ExternalLink from '@/components/common/ExternalLink'
 import { useAppSelector } from '@/store'
@@ -14,14 +14,14 @@ const SignedMessagesHelpLink = () => {
   }
 
   return (
-    <Box display="flex" alignItems="center" gap={1}>
+    <Stack alignItems="center" spacing={1}>
       <SvgIcon component={InfoIcon} inheritViewBox color="border" fontSize="small" />
       <ExternalLink noIcon href={HelpCenterArticle.SIGNED_MESSAGES}>
         <Typography variant="body2" fontWeight={700}>
           What are signed messages?
         </Typography>
       </ExternalLink>
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/transactions/TxDetails/TxData/Transfer/index.tsx b/src/components/transactions/TxDetails/TxData/Transfer/index.tsx
index 9971388af1..cdf2ffbcf2 100644
--- a/src/components/transactions/TxDetails/TxData/Transfer/index.tsx
+++ b/src/components/transactions/TxDetails/TxData/Transfer/index.tsx
@@ -3,7 +3,7 @@ import { TransferTx } from '@/components/transactions/TxInfo'
 import { isTxQueued } from '@/utils/transaction-guards'
 import type { TransactionStatus, Transfer } from '@safe-global/safe-gateway-typescript-sdk'
 import { TransferDirection } from '@safe-global/safe-gateway-typescript-sdk'
-import { Box, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import React from 'react'
 
 import TransferActions from '@/components/transactions/TxDetails/TxData/Transfer/TransferActions'
@@ -21,7 +21,7 @@ const TransferTxInfoMain = ({ txInfo, txStatus, trusted, imitation }: TransferTx
   const { direction } = txInfo
 
   return (
-    <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
+    <Stack direction="row" alignItems="center" spacing={1}>
       <Typography>
         {direction === TransferDirection.INCOMING ? 'Received' : isTxQueued(txStatus) ? 'Send' : 'Sent'}{' '}
         <b>
@@ -30,7 +30,7 @@ const TransferTxInfoMain = ({ txInfo, txStatus, trusted, imitation }: TransferTx
         {direction === TransferDirection.INCOMING ? ' from:' : ' to:'}
       </Typography>
       {!trusted && !imitation && <MaliciousTxWarning />}
-    </Box>
+    </Stack>
   )
 }
 
@@ -38,10 +38,10 @@ const TransferTxInfo = ({ txInfo, txStatus, trusted, imitation }: TransferTxInfo
   const address = txInfo.direction.toUpperCase() === TransferDirection.INCOMING ? txInfo.sender : txInfo.recipient
 
   return (
-    <Box display="flex" flexDirection="column" gap={1}>
+    <Stack spacing={1}>
       <TransferTxInfoMain txInfo={txInfo} txStatus={txStatus} trusted={trusted} imitation={imitation} />
 
-      <Box display="flex" alignItems="center" width="100%">
+      <Stack alignItems="center" width="100%">
         <EthHashInfo
           address={address.value}
           name={address.name}
@@ -53,9 +53,9 @@ const TransferTxInfo = ({ txInfo, txStatus, trusted, imitation }: TransferTxInfo
         >
           <TransferActions address={address.value} txInfo={txInfo} trusted={trusted} />
         </EthHashInfo>
-      </Box>
+      </Stack>
       {imitation && <ImitationTransactionWarning />}
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/transactions/TxSummary/QueueActions.tsx b/src/components/transactions/TxSummary/QueueActions.tsx
index df6075a6c0..66889fc20d 100644
--- a/src/components/transactions/TxSummary/QueueActions.tsx
+++ b/src/components/transactions/TxSummary/QueueActions.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import { Stack } from '@mui/material'
 import { type TransactionSummary } from '@safe-global/safe-gateway-typescript-sdk'
 import { isAwaitingExecution } from '@/utils/transaction-guards'
 import ExecuteTxButton from '../ExecuteTxButton'
@@ -20,12 +20,12 @@ const QueueActions = ({ tx }: { tx: TransactionSummary }) => {
   }
 
   return (
-    <Box data-testid="tx-actions" mr={2} display="flex" justifyContent="center">
+    <Stack data-testid="tx-actions" mr={2} justifyContent="center">
       {ExecutionComponent}
       {pendingTx && pendingTx.status === PendingStatus.PROCESSING && (
         <SpeedUpMonitor txId={tx.id} pendingTx={pendingTx} modalTrigger="alertButton" />
       )}
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/tx-flow/common/TxNonce/index.tsx b/src/components/tx-flow/common/TxNonce/index.tsx
index 5d3f243e39..7b199376e3 100644
--- a/src/components/tx-flow/common/TxNonce/index.tsx
+++ b/src/components/tx-flow/common/TxNonce/index.tsx
@@ -1,7 +1,6 @@
 import { memo, type ReactElement, useContext, useMemo, useState, useEffect } from 'react'
 import {
   Autocomplete,
-  Box,
   IconButton,
   InputAdornment,
   Skeleton,
@@ -13,6 +12,7 @@ import {
   Typography,
   ListSubheader,
   type ListSubheaderProps,
+  Stack,
 } from '@mui/material'
 import { createFilterOptions } from '@mui/material/Autocomplete'
 import { Controller, useForm } from 'react-hook-form'
@@ -277,7 +277,7 @@ const TxNonce = () => {
   const { nonce, recommendedNonce } = useContext(SafeTxContext)
 
   return (
-    <Box data-testid="nonce-fld" display="flex" alignItems="center" gap={1}>
+    <Stack data-testid="nonce-fld" alignItems="center" spacing={1}>
       Nonce{' '}
       <Typography component="span" fontWeight={700}>
         #
@@ -287,7 +287,7 @@ const TxNonce = () => {
       ) : (
         <TxNonceForm nonce={nonce.toString()} recommendedNonce={recommendedNonce.toString()} />
       )}
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx b/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx
index 8e128c2871..2fabd93fd8 100644
--- a/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx
+++ b/src/components/tx-flow/flows/CancelRecovery/CancelRecoveryOverview.tsx
@@ -1,6 +1,6 @@
 import { trackEvent } from '@/services/analytics'
 import { RECOVERY_EVENTS } from '@/services/analytics/events/recovery'
-import { Box, Button, Typography } from '@mui/material'
+import { Stack, Button, Typography } from '@mui/material'
 import { useContext } from 'react'
 import type { ReactElement } from 'react'
 
@@ -20,7 +20,7 @@ export function CancelRecoveryOverview({ onSubmit }: { onSubmit: () => void }):
 
   return (
     <TxCard>
-      <Box display="flex" flexDirection="column" alignItems="center" p={{ md: 5 }}>
+      <Stack alignItems="center" p={{ md: 5 }}>
         {/* TODO: Replace with correct icon when provided */}
         <ReplaceTxIcon />
 
@@ -33,7 +33,7 @@ export function CancelRecoveryOverview({ onSubmit }: { onSubmit: () => void }):
           time.
         </Typography>
 
-        <Box display="flex" columnGap={3} rowGap={1} flexWrap="wrap">
+        <Stack columnGap={3} spacing={1} flexWrap="wrap">
           <Button variant="outlined" onClick={onClose} className={css.button} size="small">
             Go back
           </Button>
@@ -41,8 +41,8 @@ export function CancelRecoveryOverview({ onSubmit }: { onSubmit: () => void }):
           <Button data-testid="cancel-proposal-btn" variant="contained" onClick={onSubmit} className={css.button}>
             Yes, cancel proposal
           </Button>
-        </Box>
-      </Box>
+        </Stack>
+      </Stack>
     </TxCard>
   )
 }
diff --git a/src/components/tx-flow/flows/NestedTxSuccessScreen/index.tsx b/src/components/tx-flow/flows/NestedTxSuccessScreen/index.tsx
index 0e7113fe5c..5a65f29c4a 100644
--- a/src/components/tx-flow/flows/NestedTxSuccessScreen/index.tsx
+++ b/src/components/tx-flow/flows/NestedTxSuccessScreen/index.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Box, Container, Paper, Stack, SvgIcon, Typography } from '@mui/material'
+import { Stack, Container, Paper, Box, SvgIcon, Typography } from '@mui/material'
 import { PendingStatus, selectPendingTxById } from '@/store/pendingTxsSlice'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import ErrorMessage from '@/components/tx/ErrorMessage'
@@ -65,7 +65,7 @@ const NestedTxSuccessScreen = ({ txId }: Props) => {
       }}
       maxWidth={false}
     >
-      <Box padding={3} mt={3} display="flex" flexDirection="column" alignItems="center" gap={2}>
+      <Stack padding={3} mt={3} alignItems="center" spacing={2}>
         <Box className={css.icon}>
           <SvgIcon component={NestedSafeIcon} inheritViewBox fontSize="large" alt="Nested Safe" />
         </Box>
@@ -76,7 +76,7 @@ const NestedTxSuccessScreen = ({ txId }: Props) => {
           Once confirmed and executed this signer transaction will confirm the child Safe&apos;s transaction.
         </Typography>
         <Stack spacing={2} width="70%">
-          <Box display="flex" flexDirection="column" alignItems="start" gap={1}>
+          <Stack alignItems="start" spacing={1}>
             <Typography variant="body2" color="text.secondary">
               Parent Safe
             </Typography>
@@ -86,7 +86,7 @@ const NestedTxSuccessScreen = ({ txId }: Props) => {
               isAddressBookName={Boolean(parentSafeAddress)}
               shortAddress={false}
             />
-          </Box>
+          </Stack>
           <Stack direction="row" spacing={2} alignItems="center" pl={1}>
             <SvgIcon component={ArrowDownIcon} fontSize="medium" color="border" inheritViewBox />
             <Typography
@@ -105,7 +105,7 @@ const NestedTxSuccessScreen = ({ txId }: Props) => {
               approveHash
             </Typography>
           </Stack>
-          <Box display="flex" flexDirection="column" alignItems="start" gap={1}>
+          <Stack alignItems="start" spacing={1}>
             <Typography variant="body2" color="text.secondary">
               Current Safe
             </Typography>
@@ -115,7 +115,7 @@ const NestedTxSuccessScreen = ({ txId }: Props) => {
               isAddressBookName={Boolean(currentSafeAddress)}
               shortAddress={false}
             />
-          </Box>
+          </Stack>
         </Stack>
         <Track {...MODALS_EVENTS.OPEN_PARENT_TX}>
           <Link
@@ -143,7 +143,7 @@ const NestedTxSuccessScreen = ({ txId }: Props) => {
             <ExternalLink mode="button">Open the transaction</ExternalLink>
           </Link>
         </Track>
-      </Box>
+      </Stack>
     </Container>
   )
 }
diff --git a/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx b/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
index 9bca66b02a..a43bec6371 100644
--- a/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
+++ b/src/components/tx-flow/flows/ReplaceTx/DeleteTxModal.tsx
@@ -12,6 +12,7 @@ import {
   Box,
   SvgIcon,
   CircularProgress,
+  Stack,
 } from '@mui/material'
 import { Close } from '@mui/icons-material'
 import madProps from '@/utils/mad-props'
@@ -90,7 +91,7 @@ const InternalDeleteTxModal = ({
   return (
     <Dialog open onClose={onClose}>
       <DialogTitle>
-        <Box data-testid="untrusted-token-warning" display="flex" alignItems="center">
+        <Stack data-testid="untrusted-token-warning" alignItems="center">
           <Typography variant="h6" fontWeight={700} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <SvgIcon component={InfoIcon} inheritViewBox color="error" />
             Delete this transaction?
@@ -103,7 +104,7 @@ const InternalDeleteTxModal = ({
           <IconButton aria-label="close" onClick={onClose} sx={{ marginLeft: 'auto' }}>
             <Close />
           </IconButton>
-        </Box>
+        </Stack>
       </DialogTitle>
 
       <Divider />
diff --git a/src/components/tx-flow/flows/ReplaceTx/index.tsx b/src/components/tx-flow/flows/ReplaceTx/index.tsx
index 469dc6304b..2be60ad8a3 100644
--- a/src/components/tx-flow/flows/ReplaceTx/index.tsx
+++ b/src/components/tx-flow/flows/ReplaceTx/index.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react'
 import { type NextRouter, useRouter } from 'next/router'
-import { Box, Tooltip, Typography } from '@mui/material'
+import { Box, Stack, Tooltip, Typography } from '@mui/material'
 import DeleteIcon from '@/public/images/common/delete.svg'
 import CancelIcon from '@/public/images/common/cancel.svg'
 import ReplaceTxIcon from '@/public/images/transactions/replace-tx.svg'
@@ -137,7 +137,7 @@ const ReplaceTxMenu = ({
           </Track>
         </Typography>
 
-        <Box display="flex" flexDirection="column" gap={2}>
+        <Stack spacing={2}>
           <Track {...REJECT_TX_EVENTS.REPLACE_TX_BUTTON} as="div">
             <ChoiceButton
               icon={CachedIcon}
@@ -176,7 +176,7 @@ const ReplaceTxMenu = ({
               onSuccess={() => setTxFlow(undefined)}
             />
           )}
-        </Box>
+        </Stack>
       </TxCard>
     </TxLayout>
   )
diff --git a/src/components/tx-flow/flows/SignMessage/index.tsx b/src/components/tx-flow/flows/SignMessage/index.tsx
index 6c608ba339..94f4683351 100644
--- a/src/components/tx-flow/flows/SignMessage/index.tsx
+++ b/src/components/tx-flow/flows/SignMessage/index.tsx
@@ -3,7 +3,7 @@ import SignMessage, { type ConfirmProps, type ProposeProps } from '@/components/
 import { getSwapTitle } from '@/features/swap'
 import { selectSwapParams } from '@/features/swap/store/swapParamsSlice'
 import { useAppSelector } from '@/store'
-import { Box, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
 import { ErrorBoundary } from '@sentry/react'
 import { type BaseTransaction } from '@safe-global/safe-apps-sdk'
@@ -38,12 +38,12 @@ export const AppTitle = ({
   }
 
   return (
-    <Box display="flex" alignItems="center">
+    <Stack alignItems="center">
       <SafeAppIconCard src={appLogo} alt={name || 'The icon of the application'} width={32} height={32} />
       <Typography variant="h4" pl={2} fontWeight="bold">
         {title}
       </Typography>
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx b/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx
index 1cc055aa17..3859741b43 100644
--- a/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx
+++ b/src/components/tx-flow/flows/SignMessageOnChain/ReviewSignMessageOnChain.tsx
@@ -3,8 +3,8 @@ import type { ReactElement } from 'react'
 import { useContext, useEffect, useState } from 'react'
 import { useMemo } from 'react'
 import { hashMessage, TypedDataEncoder } from 'ethers'
-import { Box } from '@mui/system'
-import { Typography, SvgIcon } from '@mui/material'
+import { Stack } from '@mui/system'
+import { Typography, SvgIcon, Box } from '@mui/material'
 import WarningIcon from '@/public/images/notifications/warning.svg'
 import { type EIP712TypedData, Methods, type RequestId } from '@safe-global/safe-apps-sdk'
 import { OperationType } from '@safe-global/safe-core-sdk-types'
@@ -146,12 +146,12 @@ const ReviewSignMessageOnChain = ({ message, method, requestId }: SignMessageOnC
       </Typography>
       <DecodedMsg message={decodedMessage} isInModal />
 
-      <Box display="flex" alignItems="center" my={2}>
+      <Stack alignItems="center" my={2}>
         <SvgIcon component={WarningIcon} inheritViewBox color="warning" />
         <Typography ml={1}>
           Signing a message with your Safe Account requires a transaction on the blockchain
         </Typography>
-      </Box>
+      </Stack>
     </SignOrExecuteForm>
   )
 }
diff --git a/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx b/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
index a263aed275..62cc699e93 100644
--- a/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
+++ b/src/components/tx/ApprovalEditor/EditableApprovalItem.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, IconButton, Stack, SvgIcon } from '@mui/material'
+import { Stack, Button, IconButton, SvgIcon } from '@mui/material'
 import css from '@/components/tx/ApprovalEditor/styles.module.css'
 import type { ApprovalInfo } from './hooks/useApprovalInfos'
 
@@ -48,9 +48,9 @@ const EditableApprovalItem = ({
       className={css.approvalField}
       onClick={readOnly ? handleEditMode : undefined}
     >
-      <Box display="flex" flexDirection="row" alignItems="center" gap="4px">
+      <Stack direction="row" alignItems="center" spacing="4px">
         <TokenIcon size={32} logoUri={approval.tokenInfo?.logoUri} tokenSymbol={approval.tokenInfo?.symbol} />
-      </Box>
+      </Stack>
 
       <ApprovalValueField name={name} tx={approval} readOnly={readOnly} />
 
diff --git a/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx b/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx
index d6c6c20f71..8b90f7c0e2 100644
--- a/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignOrExecuteSkeleton.tsx
@@ -1,12 +1,12 @@
 import LoadingSpinner, { SpinnerStatus } from '@/components/new-safe/create/steps/StatusStep/LoadingSpinner'
 import TxCard from '@/components/tx-flow/common/TxCard'
-import { Box } from '@mui/material'
+import { Stack } from '@mui/material'
 
 const SignOrExecuteSkeleton = () => (
   <TxCard>
-    <Box minHeight="38svh" display="flex" alignItems="center" justifyContent="center" mb={5}>
+    <Stack minHeight="38svh" alignItems="center" justifyContent="center" mb={5}>
       <LoadingSpinner status={SpinnerStatus.PROCESSING} />
-    </Box>
+    </Stack>
   </TxCard>
 )
 
diff --git a/src/components/tx/SignOrExecuteForm/SignerForm/index.tsx b/src/components/tx/SignOrExecuteForm/SignerForm/index.tsx
index 07b8e1c6ec..f21c013b9e 100644
--- a/src/components/tx/SignOrExecuteForm/SignerForm/index.tsx
+++ b/src/components/tx/SignOrExecuteForm/SignerForm/index.tsx
@@ -1,9 +1,9 @@
 import {
-  Box,
   FormControl,
   InputLabel,
   MenuItem,
   Select,
+  Stack,
   SvgIcon,
   Tooltip,
   Typography,
@@ -86,7 +86,7 @@ export const SignerForm = ({ willExecute }: { willExecute?: boolean }) => {
         </Tooltip>
       </Typography>
 
-      <Box display="flex" alignItems="center" gap={1}>
+      <Stack alignItems="center" spacing={1}>
         <FormControl fullWidth size="medium">
           <InputLabel id="signer-label">Signer Account</InputLabel>
           <Select
@@ -109,7 +109,7 @@ export const SignerForm = ({ willExecute }: { willExecute?: boolean }) => {
             ))}
           </Select>
         </FormControl>
-      </Box>
+      </Stack>
     </TxCard>
   )
 }
diff --git a/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap b/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap
index e4872296c5..29cbb417ed 100644
--- a/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap
+++ b/src/components/tx/SignOrExecuteForm/__tests__/__snapshots__/SignOrExecute.test.tsx.snap
@@ -206,7 +206,7 @@ exports[`SignOrExecute should display a loading component 1`] = `
       class="MuiCardContent-root cardContent css-1lt5qva-MuiCardContent-root"
     >
       <div
-        class="MuiBox-root css-17luq05"
+        class="MuiStack-root css-17uq0s2-MuiStack-root"
       >
         <div
           class="box MuiBox-root css-0"
diff --git a/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap b/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap
index 549ada2e01..dd90aa2d37 100644
--- a/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap
+++ b/src/components/tx/confirmation-views/BatchTransactions/__snapshots__/BatchTransactions.test.tsx.snap
@@ -102,10 +102,10 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
                     class="details"
                   >
                     <div
-                      class="MuiBox-root css-1821gv5"
+                      class="MuiStack-root css-jfdv4h-MuiStack-root"
                     >
                       <div
-                        class="MuiBox-root css-8v90jo"
+                        class="MuiStack-root css-kdc3n8-MuiStack-root"
                       >
                         <p
                           class="MuiTypography-root MuiTypography-body1 css-v6lhhw-MuiTypography-root"
@@ -128,7 +128,7 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
                         </p>
                       </div>
                       <div
-                        class="MuiBox-root css-7pf6at"
+                        class="MuiStack-root css-1pnsv3a-MuiStack-root"
                       >
                         <div
                           class="container"
@@ -146,7 +146,7 @@ exports[`BatchTransactions should render a list of batch transactions 1`] = `
                             class="MuiBox-root css-1lchl8k"
                           >
                             <div
-                              class="MuiBox-root css-171onha"
+                              class="MuiStack-root css-c4vnuj-MuiStack-root"
                               title="GnosisSafeProxy"
                             >
                               <div
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 68b2eb3519..4101638ee1 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
@@ -32,7 +32,7 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
         class="MuiBox-root css-1lchl8k"
       >
         <div
-          class="MuiBox-root css-171onha"
+          class="MuiStack-root css-c4vnuj-MuiStack-root"
           title="Bob"
         >
           <div
@@ -132,7 +132,7 @@ exports[`SettingsChange should display the SettingsChange component with newOwne
         class="MuiBox-root css-1lchl8k"
       >
         <div
-          class="MuiBox-root css-171onha"
+          class="MuiStack-root css-c4vnuj-MuiStack-root"
           title="Alice"
         >
           <div
@@ -240,7 +240,7 @@ exports[`SettingsChange should display the SettingsChange component with owner d
         class="MuiBox-root css-1lchl8k"
       >
         <div
-          class="MuiBox-root css-171onha"
+          class="MuiStack-root css-c4vnuj-MuiStack-root"
           title="Nevinha"
         >
           <div
diff --git a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
index cdedd844a4..c3398fe924 100644
--- a/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
+++ b/src/components/tx/confirmation-views/__snapshots__/ConfirmationView.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
         class="MuiBox-root css-1lchl8k"
       >
         <div
-          class="MuiBox-root css-171onha"
+          class="MuiStack-root css-c4vnuj-MuiStack-root"
           title="Nevinha"
         >
           <div
@@ -381,7 +381,7 @@ exports[`ConfirmationView should display a confirmation screen for a SETTINGS_CH
                               class="MuiBox-root css-1lchl8k"
                             >
                               <div
-                                class="MuiBox-root css-171onha"
+                                class="MuiStack-root css-c4vnuj-MuiStack-root"
                                 title="MetaMultiSigWallet"
                               >
                                 <div
@@ -937,7 +937,7 @@ exports[`ConfirmationView should display a confirmation with method call when th
                               class="MuiBox-root css-1lchl8k"
                             >
                               <div
-                                class="MuiBox-root css-171onha"
+                                class="MuiStack-root css-c4vnuj-MuiStack-root"
                                 title="MetaMultiSigWallet"
                               >
                                 <div
diff --git a/src/components/welcome/WelcomeLogin/WalletLogin.tsx b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
index 9486b34edf..bb929f6676 100644
--- a/src/components/welcome/WelcomeLogin/WalletLogin.tsx
+++ b/src/components/welcome/WelcomeLogin/WalletLogin.tsx
@@ -1,6 +1,6 @@
 import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
 import useWallet from '@/hooks/wallets/useWallet'
-import { Box, Button, Typography } from '@mui/material'
+import { Stack, Button, Typography, Box } from '@mui/material'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import WalletIcon from '@/components/common/WalletIcon'
 
@@ -25,7 +25,7 @@ const WalletLogin = ({ onLogin, onContinue }: { onLogin: () => void; onContinue:
             alignItems="center"
             gap={1}
           >
-            <Box display="flex" flexDirection="column" alignItems="flex-start">
+            <Stack alignItems="flex-start">
               <Typography variant="subtitle2" fontWeight={700}>
                 Continue with {wallet.label}
               </Typography>
@@ -38,7 +38,7 @@ const WalletLogin = ({ onLogin, onContinue }: { onLogin: () => void; onContinue:
                   copyAddress={false}
                 />
               )}
-            </Box>
+            </Stack>
             {wallet.icon && <WalletIcon icon={wallet.icon} provider={wallet.label} width={24} height={24} />}
           </Box>
         </Button>
diff --git a/src/components/wrappers/DisclaimerWrapper/index.tsx b/src/components/wrappers/DisclaimerWrapper/index.tsx
index 12d180b13b..aa95bcd931 100644
--- a/src/components/wrappers/DisclaimerWrapper/index.tsx
+++ b/src/components/wrappers/DisclaimerWrapper/index.tsx
@@ -26,7 +26,7 @@ export function _DisclaimerWrapper({
 
   if (!hasConsented) {
     return (
-      <Stack direction="column" alignItems="center" justifyContent="center" flex={1}>
+      <Stack alignItems="center" justifyContent="center" flex={1}>
         <Disclaimer
           title="Note"
           content={<WidgetDisclaimer widgetName={widgetName} />}
diff --git a/src/components/wrappers/SanctionWrapper/index.tsx b/src/components/wrappers/SanctionWrapper/index.tsx
index 12465eed4b..bb80abed35 100644
--- a/src/components/wrappers/SanctionWrapper/index.tsx
+++ b/src/components/wrappers/SanctionWrapper/index.tsx
@@ -36,7 +36,7 @@ export function _SanctionWrapper({
 
   if (blockedAddress) {
     return (
-      <Stack direction="column" alignItems="center" justifyContent="center" flex={1}>
+      <Stack alignItems="center" justifyContent="center" flex={1}>
         <BlockedAddress address={blockedAddress} featureTitle={featureTitle} />
       </Stack>
     )
diff --git a/src/features/counterfactual/ActivateAccountFlow.tsx b/src/features/counterfactual/ActivateAccountFlow.tsx
index bf9cf65f67..135fcd8589 100644
--- a/src/features/counterfactual/ActivateAccountFlow.tsx
+++ b/src/features/counterfactual/ActivateAccountFlow.tsx
@@ -22,7 +22,7 @@ import { asError } from '@/services/exceptions/utils'
 import { useAppSelector } from '@/store'
 import { hasFeature } from '@/utils/chains'
 import { hasRemainingRelays } from '@/utils/relaying'
-import { Box, Button, CircularProgress, Divider, Grid, Typography } from '@mui/material'
+import { Stack, Button, CircularProgress, Divider, Grid, Typography, Box } from '@mui/material'
 import type { DeploySafeProps } from '@safe-global/protocol-kit'
 import { FEATURES } from '@/utils/chains'
 import React, { useContext, useMemo, useState } from 'react'
@@ -163,7 +163,7 @@ const ActivateAccountFlow = () => {
         />
 
         <Divider sx={{ mx: -3, mt: 2, mb: 1 }} />
-        <Box display="flex" flexDirection="column" gap={3}>
+        <Stack spacing={3}>
           {canRelay && (
             <Grid container spacing={3}>
               <ReviewRow
@@ -209,11 +209,11 @@ const ActivateAccountFlow = () => {
               Your connected wallet doesn&apos;t have enough funds to execute this transaction
             </ErrorMessage>
           )}
-        </Box>
+        </Stack>
 
         <Divider sx={{ mx: -3, mt: 2, mb: 1 }} />
 
-        <Box display="flex" flexDirection="row" justifyContent="flex-end" gap={3}>
+        <Stack direction="row" justifyContent="flex-end" spacing={3}>
           <CheckWallet checkNetwork={!submitDisabled} allowNonOwner allowUndeployedSafe>
             {(isOk) => (
               <Button
@@ -227,7 +227,7 @@ const ActivateAccountFlow = () => {
               </Button>
             )}
           </CheckWallet>
-        </Box>
+        </Stack>
       </TxCard>
     </TxLayout>
   )
diff --git a/src/features/myAccounts/components/DataWidget/index.tsx b/src/features/myAccounts/components/DataWidget/index.tsx
index a8799633e1..e0f6f5f11e 100644
--- a/src/features/myAccounts/components/DataWidget/index.tsx
+++ b/src/features/myAccounts/components/DataWidget/index.tsx
@@ -1,4 +1,4 @@
-import { Button, SvgIcon, Card, CardHeader, CardContent, Tooltip, Box } from '@mui/material'
+import { Button, SvgIcon, Card, CardHeader, CardContent, Tooltip, Stack } from '@mui/material'
 import { useState } from 'react'
 import type { ReactElement } from 'react'
 
@@ -56,7 +56,7 @@ export const DataWidget = (): ReactElement => {
         }
       />
       <CardContent>
-        <Box display="flex" gap={2} justifyContent="center" sx={{ maxWidth: 240, margin: 'auto' }}>
+        <Stack spacing={2} justifyContent="center" sx={{ maxWidth: 240, margin: 'auto' }}>
           {hasData && (
             <Track {...OVERVIEW_EVENTS.EXPORT_DATA} label={trackingLabel}>
               <Button
@@ -82,7 +82,7 @@ export const DataWidget = (): ReactElement => {
               Import
             </Button>
           </Track>
-        </Box>
+        </Stack>
       </CardContent>
       {importModalOpen && (
         <ImportDialog
diff --git a/src/features/myAccounts/components/OrderByButton/index.tsx b/src/features/myAccounts/components/OrderByButton/index.tsx
index 0944fee6d1..d16ba131f9 100644
--- a/src/features/myAccounts/components/OrderByButton/index.tsx
+++ b/src/features/myAccounts/components/OrderByButton/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Box, Button, ListItemText, MenuItem, SvgIcon, Typography } from '@mui/material'
+import { Stack, Button, ListItemText, MenuItem, SvgIcon, Typography } from '@mui/material'
 import ContextMenu from '@/components/common/ContextMenu'
 import TransactionsIcon from '@/public/images/transactions/transactions.svg'
 import CheckIcon from '@/public/images/common/check.svg'
@@ -34,7 +34,7 @@ const OrderByButton = ({ orderBy: orderBy, onOrderByChange: onOrderByChange }: O
   }
 
   return (
-    <Box display="flex">
+    <Stack>
       <Button
         data-testid="sortby-button"
         onClick={handleClick}
@@ -79,7 +79,7 @@ const OrderByButton = ({ orderBy: orderBy, onOrderByChange: onOrderByChange }: O
           {orderBy === OrderByOption.NAME && <CheckIcon sx={{ ml: 1 }} />}
         </MenuItem>
       </ContextMenu>
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/features/myAccounts/index.tsx b/src/features/myAccounts/index.tsx
index 876bb3fc8e..fc51a80d78 100644
--- a/src/features/myAccounts/index.tsx
+++ b/src/features/myAccounts/index.tsx
@@ -9,6 +9,7 @@ import {
   InputAdornment,
   Link,
   Paper,
+  Stack,
   SvgIcon,
   TextField,
   Typography,
@@ -119,7 +120,7 @@ const AccountsList = ({ safes, onLinkClick, isSidebar = false }: AccountsListPro
 
         <Paper sx={{ padding: 0 }}>
           <Paper sx={{ px: 2, py: 1 }}>
-            <Box display="flex" justifyContent="space-between" width="100%" gap={1}>
+            <Stack justifyContent="space-between" width="100%" spacing={1}>
               <TextField
                 id="search-by-name"
                 placeholder="Search"
@@ -150,7 +151,7 @@ const AccountsList = ({ safes, onLinkClick, isSidebar = false }: AccountsListPro
                 size="small"
               />
               <OrderByButton orderBy={orderBy} onOrderByChange={handleOrderByChange} />
-            </Box>
+            </Stack>
           </Paper>
 
           {isSidebar && <Divider />}
diff --git a/src/features/proposers/components/DeleteProposerDialog.tsx b/src/features/proposers/components/DeleteProposerDialog.tsx
index 4ad41ef97c..7206d5c75c 100644
--- a/src/features/proposers/components/DeleteProposerDialog.tsx
+++ b/src/features/proposers/components/DeleteProposerDialog.tsx
@@ -25,6 +25,7 @@ import {
   CircularProgress,
   SvgIcon,
   Tooltip,
+  Stack,
 } from '@mui/material'
 import { Close } from '@mui/icons-material'
 import madProps from '@/utils/mad-props'
@@ -134,7 +135,7 @@ const InternalDeleteProposer = ({ wallet, safeAddress, chainId, proposer }: Dele
 
       <Dialog open={open} onClose={onCancel}>
         <DialogTitle>
-          <Box display="flex" alignItems="center">
+          <Stack alignItems="center">
             <Typography variant="h6" fontWeight={700} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
               Delete this proposer?
             </Typography>
@@ -144,7 +145,7 @@ const InternalDeleteProposer = ({ wallet, safeAddress, chainId, proposer }: Dele
             <IconButton aria-label="close" onClick={onCancel} sx={{ marginLeft: 'auto' }}>
               <Close />
             </IconButton>
-          </Box>
+          </Stack>
         </DialogTitle>
 
         <Divider />
diff --git a/src/features/proposers/components/UpsertProposer.tsx b/src/features/proposers/components/UpsertProposer.tsx
index 2cea318c8d..e60f21251d 100644
--- a/src/features/proposers/components/UpsertProposer.tsx
+++ b/src/features/proposers/components/UpsertProposer.tsx
@@ -28,6 +28,7 @@ import {
   DialogTitle,
   Divider,
   IconButton,
+  Stack,
   Typography,
 } from '@mui/material'
 import type { Delegate } from '@safe-global/safe-gateway-typescript-sdk/dist/types/delegates'
@@ -137,7 +138,7 @@ const UpsertProposer = ({ onClose, onSuccess, proposer }: UpsertProposerProps) =
       <FormProvider {...methods}>
         <form onSubmit={onSubmit}>
           <DialogTitle>
-            <Box data-testid="untrusted-token-warning" display="flex" alignItems="center">
+            <Stack data-testid="untrusted-token-warning" alignItems="center">
               <Typography variant="h6" fontWeight={700} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 {isEditing ? 'Edit' : 'Add'} proposer
               </Typography>
@@ -147,7 +148,7 @@ const UpsertProposer = ({ onClose, onSuccess, proposer }: UpsertProposerProps) =
               <IconButton aria-label="close" onClick={onCancel} sx={{ marginLeft: 'auto' }}>
                 <Close />
               </IconButton>
-            </Box>
+            </Stack>
           </DialogTitle>
 
           <Divider />
diff --git a/src/features/recovery/components/RecoverySettings/index.tsx b/src/features/recovery/components/RecoverySettings/index.tsx
index 0aa340ddec..eb5914947e 100644
--- a/src/features/recovery/components/RecoverySettings/index.tsx
+++ b/src/features/recovery/components/RecoverySettings/index.tsx
@@ -1,7 +1,7 @@
 import Track from '@/components/common/Track'
 import { ChooseRecoveryMethodModal } from './ChooseRecoveryMethodModal'
 import { RECOVERY_EVENTS } from '@/services/analytics/events/recovery'
-import { Box, Button, Grid, Paper, SvgIcon, Tooltip, Typography } from '@mui/material'
+import { Stack, Button, Grid, Paper, SvgIcon, Tooltip, Typography } from '@mui/material'
 import { type ReactElement, useMemo, useState } from 'react'
 
 import ExternalLink from '@/components/common/ExternalLink'
@@ -113,11 +113,11 @@ function RecoverySettings(): ReactElement {
     <Paper sx={{ p: 4 }}>
       <Grid container spacing={3}>
         <Grid item lg={4} xs={12}>
-          <Box display="flex" alignItems="center" gap={1} mb={1}>
+          <Stack alignItems="center" spacing={1} mb={1}>
             <Typography variant="h4" fontWeight="bold">
               Account recovery
             </Typography>
-          </Box>
+          </Stack>
         </Grid>
 
         <Grid item xs>
diff --git a/src/features/recovery/components/RecoverySummary/index.tsx b/src/features/recovery/components/RecoverySummary/index.tsx
index e3fdd022c4..653364b33a 100644
--- a/src/features/recovery/components/RecoverySummary/index.tsx
+++ b/src/features/recovery/components/RecoverySummary/index.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import { Box, Stack } from '@mui/material'
 import type { ReactElement } from 'react'
 
 import { RecoveryType } from '../RecoveryType'
@@ -35,9 +35,9 @@ export function RecoverySummary({ item }: { item: RecoveryQueueItem }): ReactEle
           <RecoveryStatus recovery={item} />
         </Box>
       ) : (
-        <Box gridArea="actions" mr={2} display="flex" justifyContent="center">
+        <Stack gridArea="actions" mr={2} justifyContent="center">
           {!isMalicious && wallet && <ExecuteRecoveryButton recovery={item} compact />}
-        </Box>
+        </Stack>
       )}
     </Box>
   )
diff --git a/src/features/siweAccounts/components/EnableAccountBanner/index.tsx b/src/features/siweAccounts/components/EnableAccountBanner/index.tsx
index 126c3d750b..7d962228ef 100644
--- a/src/features/siweAccounts/components/EnableAccountBanner/index.tsx
+++ b/src/features/siweAccounts/components/EnableAccountBanner/index.tsx
@@ -1,5 +1,5 @@
 import { signInWithEthereum } from '@/services/siwe'
-import { Alert, Box, Button, IconButton, Typography } from '@mui/material'
+import { Alert, Stack, Button, IconButton, Typography } from '@mui/material'
 import useWallet from '@/hooks/wallets/useWallet'
 import CloseIcon from '@mui/icons-material/Close'
 import DownloadCloud from '@/public/images/common/download-cloud.svg'
@@ -59,12 +59,12 @@ const SignInBanner = ({ provider }: { provider: BrowserProvider | undefined }) =
           </>
         }
       >
-        <Box display="flex" alignContent="center" alignItems="center" width="100%">
+        <Stack 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>
-        </Box>
+        </Stack>
       </Alert>
     </div>
   )
diff --git a/src/features/speedup/components/SpeedUpModal.tsx b/src/features/speedup/components/SpeedUpModal.tsx
index 767e8932d7..7764af2c1d 100644
--- a/src/features/speedup/components/SpeedUpModal.tsx
+++ b/src/features/speedup/components/SpeedUpModal.tsx
@@ -1,7 +1,7 @@
 import useGasPrice from '@/hooks/useGasPrice'
 import ModalDialog from '@/components/common/ModalDialog'
 import DialogContent from '@mui/material/DialogContent'
-import { Box, Button, CircularProgress, SvgIcon, Tooltip, Typography } from '@mui/material'
+import { Stack, Button, CircularProgress, SvgIcon, Tooltip, Typography, Box } from '@mui/material'
 import RocketSpeedup from '@/public/images/common/ic-rocket-speedup.svg'
 import DialogActions from '@mui/material/DialogActions'
 import useWallet from '@/hooks/wallets/useWallet'
@@ -167,9 +167,9 @@ export const SpeedUpModal = ({
     return (
       <ModalDialog open={open} onClose={onCancel} dialogTitle="Speed up transaction">
         <DialogContent sx={{ p: '24px !important' }}>
-          <Box display="flex" justifyContent="center" alignItems="center" mb={2}>
+          <Stack justifyContent="center" alignItems="center" mb={2}>
             <SvgIcon inheritViewBox component={RocketSpeedup} sx={{ width: 90, height: 90 }} />
-          </Box>
+          </Stack>
 
           <Typography data-testid="speedup-summary">
             This will speed up the pending transaction by{' '}
@@ -226,9 +226,9 @@ export const SpeedUpModal = ({
   return (
     <ModalDialog open={open} onClose={handleClose} dialogTitle="Speed up transaction">
       <DialogContent sx={{ p: '24px !important' }}>
-        <Box display="flex" justifyContent="center" alignItems="center" mb={2}>
+        <Stack justifyContent="center" alignItems="center" mb={2}>
           <SvgIcon inheritViewBox component={RocketSpeedup} sx={{ width: 90, height: 90 }} />
-        </Box>
+        </Stack>
 
         <Typography data-testid="speedup-summary">
           Is this transaction taking too long? Speed it up by using the &quot;speed up&quot; option in your connected
diff --git a/src/features/stake/components/StakingTxExitDetails/index.tsx b/src/features/stake/components/StakingTxExitDetails/index.tsx
index d4cdb80722..6422e4a714 100644
--- a/src/features/stake/components/StakingTxExitDetails/index.tsx
+++ b/src/features/stake/components/StakingTxExitDetails/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Link } from '@mui/material'
+import { Stack, Link } from '@mui/material'
 import type { StakingTxExitInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { NativeStakingStatus } from '@safe-global/safe-gateway-typescript-sdk'
 import FieldsGrid from '@/components/tx/FieldsGrid'
@@ -14,7 +14,7 @@ const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo }) => {
   ])
 
   return (
-    <Box pr={5} display="flex" flexDirection="column" gap={1}>
+    <Stack pr={5} spacing={1}>
       <FieldsGrid title="Exit">
         {info.validators.map((validator: string, index: number) => {
           return (
@@ -30,7 +30,7 @@ const StakingTxExitDetails = ({ info }: { info: StakingTxExitInfo }) => {
       <FieldsGrid title="Validator status">
         <StakingStatus status={info.status} />
       </FieldsGrid>
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/features/stake/components/StakingTxWithdrawDetails/index.tsx b/src/features/stake/components/StakingTxWithdrawDetails/index.tsx
index 78681f19d0..9df647d601 100644
--- a/src/features/stake/components/StakingTxWithdrawDetails/index.tsx
+++ b/src/features/stake/components/StakingTxWithdrawDetails/index.tsx
@@ -1,12 +1,12 @@
-import { Box } from '@mui/material'
+import { Stack } from '@mui/material'
 import type { StakingTxWithdrawInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import StakingConfirmationTxWithdraw from '@/features/stake/components/StakingConfirmationTx/Withdraw'
 
 const StakingTxWithdrawDetails = ({ info }: { info: StakingTxWithdrawInfo }) => {
   return (
-    <Box pl={1} pr={5} display="flex" flexDirection="column" gap={1}>
+    <Stack pl={1} pr={5} spacing={1}>
       <StakingConfirmationTxWithdraw order={info} />
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/features/swap/components/SwapProgress/index.tsx b/src/features/swap/components/SwapProgress/index.tsx
index ca4a1a2b97..5b6e9f5805 100644
--- a/src/features/swap/components/SwapProgress/index.tsx
+++ b/src/features/swap/components/SwapProgress/index.tsx
@@ -15,7 +15,7 @@ const SwapProgress = ({ order }: { order: Order }) => {
   const tokenSymbol = isSellOrder ? order.sellToken.symbol : order.buyToken.symbol
 
   return (
-    <Stack direction="row" alignItems="center" gap={1}>
+    <Stack direction="row" alignItems="center" spacing={1}>
       <LinearProgress
         variant="determinate"
         value={progressValue}
diff --git a/src/features/targetedOutreach/components/OutreachPopup/OutreachPopup.tsx b/src/features/targetedOutreach/components/OutreachPopup/OutreachPopup.tsx
index f635d3947e..18d65281b9 100644
--- a/src/features/targetedOutreach/components/OutreachPopup/OutreachPopup.tsx
+++ b/src/features/targetedOutreach/components/OutreachPopup/OutreachPopup.tsx
@@ -1,7 +1,7 @@
 import { useCreateSubmissionMutation, useGetSubmissionQuery } from '@/store/api/gateway'
 import { skipToken } from '@reduxjs/toolkit/query'
 import { useEffect, type ReactElement } from 'react'
-import { Avatar, Box, Button, Chip, IconButton, Link, Paper, Stack, ThemeProvider, Typography } from '@mui/material'
+import { Avatar, Stack, Button, Chip, IconButton, Link, Paper, ThemeProvider, Typography, Box } from '@mui/material'
 import { Close } from '@mui/icons-material'
 import type { Theme } from '@mui/material/styles'
 import { useAppDispatch, useAppSelector } from '@/store'
@@ -80,8 +80,8 @@ const OutreachPopup = (): ReactElement | null => {
         <ThemeProvider theme={safeTheme}>
           <Box className={css.popup}>
             <Paper className={css.container}>
-              <Stack gap={2}>
-                <Box display="flex">
+              <Stack spacing={2}>
+                <Stack>
                   <Avatar alt="Clem, product lead" src="/images/common/outreach-popup-avatar.png" />
                   <Box ml={1}>
                     <Typography variant="body2">Clem</Typography>
@@ -89,7 +89,7 @@ const OutreachPopup = (): ReactElement | null => {
                       Product Lead
                     </Typography>
                   </Box>
-                </Box>
+                </Stack>
                 <Box>
                   <Chip
                     size="small"
diff --git a/src/features/walletconnect/components/WcHints/index.tsx b/src/features/walletconnect/components/WcHints/index.tsx
index 8123a20c2b..b80d29c620 100644
--- a/src/features/walletconnect/components/WcHints/index.tsx
+++ b/src/features/walletconnect/components/WcHints/index.tsx
@@ -3,7 +3,6 @@ import {
   Accordion,
   AccordionSummary,
   Avatar,
-  Box,
   Typography,
   AccordionDetails,
   SvgIcon,
@@ -11,6 +10,7 @@ import {
   ListItem,
   ListItemAvatar,
   ListItemText,
+  Stack,
 } from '@mui/material'
 import { useState } from 'react'
 import type { ReactElement } from 'react'
@@ -85,7 +85,7 @@ const WcHints = (): ReactElement => {
   }
 
   return (
-    <Box display="flex" flexDirection="column" gap={1}>
+    <Stack spacing={1}>
       <HintAccordion
         title={ConnectionTitle}
         items={ConnectionSteps}
@@ -98,7 +98,7 @@ const WcHints = (): ReactElement => {
         onExpand={() => onExpand('interaction')}
         expanded={expandedAccordion === 'interaction'}
       />
-    </Box>
+    </Stack>
   )
 }
 
diff --git a/src/pages/_offline.tsx b/src/pages/_offline.tsx
index a36fda8e98..18dce03a6f 100644
--- a/src/pages/_offline.tsx
+++ b/src/pages/_offline.tsx
@@ -1,4 +1,4 @@
-import { Box, Paper, Typography } from '@mui/material'
+import { Stack, Paper, Typography } from '@mui/material'
 import WifiOffIcon from '@mui/icons-material/WifiOff'
 import type { NextPage } from 'next'
 import Head from 'next/head'
@@ -11,11 +11,11 @@ const Offline: NextPage = () => {
       </Head>
 
       <main>
-        <Box display="flex" justifyContent="center">
+        <Stack justifyContent="center">
           <Paper sx={{ p: 4, mb: 2, maxWidth: 900 }}>
-            <Box display="flex" justifyContent="center" mb={2} fontSize={100}>
+            <Stack justifyContent="center" mb={2} fontSize={100}>
               <WifiOffIcon fontSize="inherit" />
-            </Box>
+            </Stack>
 
             <Typography variant="h1" textAlign="center">
               Oops, it looks like you&apos;re offline!
@@ -36,7 +36,7 @@ const Offline: NextPage = () => {
               We hope to see you back online soon. Thank you for your patience.
             </Typography>
           </Paper>
-        </Box>
+        </Stack>
       </main>
     </>
   )
diff --git a/src/pages/apps/open.tsx b/src/pages/apps/open.tsx
index 938e690dcb..6b4a20a0f1 100644
--- a/src/pages/apps/open.tsx
+++ b/src/pages/apps/open.tsx
@@ -1,7 +1,7 @@
 import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import { useCallback } from 'react'
-import { Box, CircularProgress } from '@mui/material'
+import { Stack, CircularProgress } from '@mui/material'
 
 import { useSafeAppUrl } from '@/hooks/safe-apps/useSafeAppUrl'
 import { useSafeApps } from '@/hooks/safe-apps/useSafeApps'
@@ -82,9 +82,9 @@ const SafeApps: NextPage = () => {
 
   if (isLoading) {
     return (
-      <Box display="flex" justifyContent="center" alignItems="center" height="100%">
+      <Stack justifyContent="center" alignItems="center" height="100%">
         <CircularProgress />
-      </Box>
+      </Stack>
     )
   }