diff --git a/.changeset/tidy-snails-smile.md b/.changeset/tidy-snails-smile.md
new file mode 100644
index 0000000000000..546ec86bd8e63
--- /dev/null
+++ b/.changeset/tidy-snails-smile.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/apps": patch
+---
+
+Fixes app startup failing with EACCES errors in docker deployments running with specified UIDs
diff --git a/apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx b/apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx
index c6b9b95ffe120..5c2467482af1e 100644
--- a/apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx
+++ b/apps/meteor/client/apps/gameCenter/GameCenterContainer.tsx
@@ -29,7 +29,7 @@ const GameCenterContainer = ({ handleClose, handleBack, game }: IGameCenterConta
 				</ContextualbarTitle>
 				{handleClose && <ContextualbarClose onClick={handleClose} />}
 			</ContextualbarHeader>
-			<ContextualbarContent pb={16}>
+			<ContextualbarContent paddingBlock={16}>
 				<iframe title={t('Apps_Game_Center')} style={{ position: 'absolute', width: '95%', height: '80%' }} src={game.url} />
 			</ContextualbarContent>
 		</ContextualbarDialog>
diff --git a/apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx b/apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx
index bad66d4d3f2df..13da02330d6a3 100644
--- a/apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx
+++ b/apps/meteor/client/apps/gameCenter/GameCenterInvitePlayersModal.tsx
@@ -50,8 +50,8 @@ const GameCenterInvitePlayersModal = ({ game, onClose }: IGameCenterInvitePlayer
 	return (
 		<>
 			<GenericModal onClose={onClose} onCancel={onClose} onConfirm={sendInvite} title={t('Apps_Game_Center_Invite_Friends')}>
-				<Box mbe={16}>{t('Invite_Users')}</Box>
-				<Box mbe={16} display='flex' justifyContent='stretch'>
+				<Box marginBlockEnd={16}>{t('Invite_Users')}</Box>
+				<Box marginBlockEnd={16} display='flex' justifyContent='stretch'>
 					<UserAutoCompleteMultiple value={users} onChange={setUsers} federated />
 				</Box>
 			</GenericModal>
diff --git a/apps/meteor/client/components/ActionManagerBusyState.tsx b/apps/meteor/client/components/ActionManagerBusyState.tsx
index 2388401411ab2..fafe794be3b9d 100644
--- a/apps/meteor/client/components/ActionManagerBusyState.tsx
+++ b/apps/meteor/client/components/ActionManagerBusyState.tsx
@@ -33,8 +33,8 @@ const ActionManagerBusyState = () => {
 				`}
 				position='absolute'
 				insetInlineStart='50%'
-				p={16}
-				bg='tint'
+				padding={16}
+				backgroundColor='tint'
 				color='default'
 				textAlign='center'
 				fontSize='p2'
diff --git a/apps/meteor/client/components/Backdrop.tsx b/apps/meteor/client/components/Backdrop.tsx
index 2b7bab614276c..a3ed3ea4001ef 100644
--- a/apps/meteor/client/components/Backdrop.tsx
+++ b/apps/meteor/client/components/Backdrop.tsx
@@ -3,4 +3,4 @@ import type { ComponentProps } from 'react';
 
 export type BackdropProps = ComponentProps<typeof ModalBackdrop>;
 
-export const Backdrop = (props: BackdropProps) => <ModalBackdrop bg='transparent' {...props} />;
+export const Backdrop = (props: BackdropProps) => <ModalBackdrop backgroundColor='transparent' {...props} />;
diff --git a/apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx b/apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx
index bb1a72cbfef95..c7916e1063a5f 100644
--- a/apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx
+++ b/apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx
@@ -115,7 +115,7 @@ const CreateDiscussion = ({
 			cancelText={t('Cancel')}
 			confirmLoading={createDiscussionMutation.isPending}
 		>
-			<Box mbe={24}>{t('Discussion_description')}</Box>
+			<Box marginBlockEnd={24}>{t('Discussion_description')}</Box>
 			<FieldGroup>
 				<Field>
 					<FieldLabel required>{t('Discussion_target_channel')}</FieldLabel>
diff --git a/apps/meteor/client/components/FilterByText.tsx b/apps/meteor/client/components/FilterByText.tsx
index 080e2d8ecb03e..4a1cb35a44b53 100644
--- a/apps/meteor/client/components/FilterByText.tsx
+++ b/apps/meteor/client/components/FilterByText.tsx
@@ -23,8 +23,8 @@ const FilterByText = forwardRef<HTMLInputElement, FilterByTextProps>(function Fi
 	}, []);
 
 	return (
-		<Box mb={16} mi='neg-x4' is='form' onSubmit={handleFormSubmit} display='flex' flexWrap='wrap' alignItems='center'>
-			<Box mi={4} display='flex' flexGrow={1}>
+		<Box marginBlock={16} marginInline='neg-x4' is='form' onSubmit={handleFormSubmit} display='flex' flexWrap='wrap' alignItems='center'>
+			<Box marginInline={4} display='flex' flexGrow={1}>
 				<TextInput
 					{...props}
 					placeholder={placeholder ?? t('Search')}
diff --git a/apps/meteor/client/components/FingerprintChangeModal.tsx b/apps/meteor/client/components/FingerprintChangeModal.tsx
index 3e0965b33081f..26ddd888ee2fc 100644
--- a/apps/meteor/client/components/FingerprintChangeModal.tsx
+++ b/apps/meteor/client/components/FingerprintChangeModal.tsx
@@ -22,10 +22,10 @@ const FingerprintChangeModal = ({ onConfirm, onCancel, onClose }: FingerprintCha
 			confirmText={t('Configuration_update')}
 			cancelText={t('New_workspace')}
 		>
-			<Box is='p' mbe={16}>
+			<Box is='p' marginBlockEnd={16}>
 				<Trans i18nKey='Unique_ID_change_detected_description' />
 			</Box>
-			<Box is='p' mbe={16}>
+			<Box is='p' marginBlockEnd={16}>
 				<Trans
 					i18nKey='Unique_ID_change_detected_learn_more_link'
 					components={{ a: <ExternalLink to={links.go.fingerPrintChangedFaq} /> }}
diff --git a/apps/meteor/client/components/FingerprintChangeModalConfirmation.tsx b/apps/meteor/client/components/FingerprintChangeModalConfirmation.tsx
index 08fe5751c77e5..925859dfe6d2c 100644
--- a/apps/meteor/client/components/FingerprintChangeModalConfirmation.tsx
+++ b/apps/meteor/client/components/FingerprintChangeModalConfirmation.tsx
@@ -23,14 +23,14 @@ const FingerprintChangeModalConfirmation = ({ onConfirm, onCancel, onClose, newW
 			confirmText={newWorkspace ? t('Confirm_new_workspace') : t('Confirm_configuration_update')}
 			onClose={onClose}
 		>
-			<Box is='p' mbe={16}>
+			<Box is='p' marginBlockEnd={16}>
 				{newWorkspace ? (
 					<Trans i18nKey='Confirm_new_workspace_description' />
 				) : (
 					<Trans i18nKey='Confirm_configuration_update_description' />
 				)}
 			</Box>
-			<Box is='p' mbe={16}>
+			<Box is='p' marginBlockEnd={16}>
 				<Trans
 					i18nKey='Unique_ID_change_detected_learn_more_link'
 					components={{ a: <ExternalLink to={links.go.fingerPrintChangedFaq} /> }}
diff --git a/apps/meteor/client/components/GenericNoResults/GenericNoResults.stories.tsx b/apps/meteor/client/components/GenericNoResults/GenericNoResults.stories.tsx
index 23e31cebc3b0d..7d3186d1b1029 100644
--- a/apps/meteor/client/components/GenericNoResults/GenericNoResults.stories.tsx
+++ b/apps/meteor/client/components/GenericNoResults/GenericNoResults.stories.tsx
@@ -16,7 +16,7 @@ export default {
 
 const filter = (
 	<>
-		<Box mb={16} is='form' display='flex' flexDirection='column'>
+		<Box marginBlock={16} is='form' display='flex' flexDirection='column'>
 			<TextInput flexShrink={0} placeholder='Search...' endAddon={<Icon name='magnifier' size='x20' />} />
 		</Box>
 	</>
diff --git a/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsage.tsx b/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsage.tsx
index 32ad60ecd4a36..3035023b4a734 100644
--- a/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsage.tsx
+++ b/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsage.tsx
@@ -27,9 +27,9 @@ const GenericResourceUsage = ({
 	return (
 		<Box
 			title={tooltip}
-			w='x180'
-			h='x40'
-			mi={8}
+			width='x180'
+			height='x40'
+			marginInline={8}
 			fontScale='c1'
 			display='flex'
 			flexDirection='column'
diff --git a/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsageSkeleton.tsx b/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsageSkeleton.tsx
index ca74dbdf5da89..45bf19d2f448f 100644
--- a/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsageSkeleton.tsx
+++ b/apps/meteor/client/components/GenericResourceUsage/GenericResourceUsageSkeleton.tsx
@@ -7,9 +7,18 @@ export type GenericResourceUsageSkeletonProps = {
 
 const GenericResourceUsageSkeleton = ({ title, ...props }: GenericResourceUsageSkeletonProps) => {
 	return (
-		<Box w='x180' h='x40' mi={8} fontScale='c1' display='flex' flexDirection='column' justifyContent='space-around' {...props}>
-			{title ? <Box color='default'>{title}</Box> : <Skeleton w='full' />}
-			<Skeleton w='full' />
+		<Box
+			width='x180'
+			height='x40'
+			marginInline={8}
+			fontScale='c1'
+			display='flex'
+			flexDirection='column'
+			justifyContent='space-around'
+			{...props}
+		>
+			{title ? <Box color='default'>{title}</Box> : <Skeleton width='full' />}
+			<Skeleton width='full' />
 		</Box>
 	);
 };
diff --git a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx
index 9d63fb49e4c95..40d5ffee52345 100644
--- a/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx
+++ b/apps/meteor/client/components/GenericUpsellModal/GenericUpsellModal.tsx
@@ -43,7 +43,7 @@ const GenericUpsellModal = ({
 				</Box>
 			)}
 			{description && (
-				<Box style={{ whiteSpace: 'break-spaces' }} fontScale='p2' mbs={16}>
+				<Box style={{ whiteSpace: 'break-spaces' }} fontScale='p2' marginBlockStart={16}>
 					{description}
 				</Box>
 			)}
diff --git a/apps/meteor/client/components/ListItem.stories.tsx b/apps/meteor/client/components/ListItem.stories.tsx
index bd9e412995a9d..f149c3a01d19b 100644
--- a/apps/meteor/client/components/ListItem.stories.tsx
+++ b/apps/meteor/client/components/ListItem.stories.tsx
@@ -16,8 +16,8 @@ export default {
 
 export const ListWithIcon: StoryFn<typeof Tile> = () => {
 	return (
-		<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
-			<Box flexShrink={1} pb={12}>
+		<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
+			<Box flexShrink={1} paddingBlock={12}>
 				<OptionTitle>Title</OptionTitle>
 				<ListItem text='Item 1' icon='info' />
 				<ListItem text='Item 2' icon='star' />
@@ -30,8 +30,8 @@ export const ListWithIcon: StoryFn<typeof Tile> = () => {
 
 export const NoIcon: StoryFn<typeof Tile> = () => {
 	return (
-		<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
-			<Box flexShrink={1} pb={12}>
+		<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
+			<Box flexShrink={1} paddingBlock={12}>
 				<OptionTitle>Title</OptionTitle>
 				<ListItem text='Item 1' />
 				<ListItem text='Item 2' />
@@ -45,8 +45,8 @@ export const NoIcon: StoryFn<typeof Tile> = () => {
 export const MixedWithGap: StoryObj<typeof Tile> = {
 	render: () => {
 		return (
-			<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
-				<Box flexShrink={1} pb={12}>
+			<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
+				<Box flexShrink={1} paddingBlock={12}>
 					<OptionTitle>Title</OptionTitle>
 					<ListItem text='Item 1' icon='hashtag' />
 					<ListItem text='Item 2' icon='team' />
@@ -70,8 +70,8 @@ export const MixedWithGap: StoryObj<typeof Tile> = {
 export const MixedWithoutGap: StoryObj<typeof Tile> = {
 	render: () => {
 		return (
-			<Tile elevation='2' p='0' display='flex' flexDirection='column' overflow='auto' w='x240'>
-				<Box flexShrink={1} pb={12}>
+			<Tile elevation='2' padding='0' display='flex' flexDirection='column' overflow='auto' width='x240'>
+				<Box flexShrink={1} paddingBlock={12}>
 					<OptionTitle>Title</OptionTitle>
 					<ListItem text='Item 1' icon='hashtag' />
 					<ListItem text='Item 2' icon='team' />
diff --git a/apps/meteor/client/components/ListSkeleton.tsx b/apps/meteor/client/components/ListSkeleton.tsx
index b216271d6b6f1..e3ecb7f4633ce 100644
--- a/apps/meteor/client/components/ListSkeleton.tsx
+++ b/apps/meteor/client/components/ListSkeleton.tsx
@@ -16,11 +16,11 @@ const ListSkeleton = ({ listCount = 2 }: ListSkeletonProps) => {
 	return (
 		<Box display='flex' height='100%' justifyContent='flex-start' flexDirection='column'>
 			{widths.map((width, index) => (
-				<Box key={index} pi={24} pb={16} display='flex'>
+				<Box key={index} paddingInline={24} paddingBlock={16} display='flex'>
 					<Box>
 						<Skeleton variant='rect' width={36} height={36} />
 					</Box>
-					<Box mis={8} flexGrow={1}>
+					<Box marginInlineStart={8} flexGrow={1}>
 						<Skeleton width='100%' />
 						<Skeleton width={width} />
 					</Box>
diff --git a/apps/meteor/client/components/NotFoundState.tsx b/apps/meteor/client/components/NotFoundState.tsx
index 6fd3fe363807b..e9803d851f1ef 100644
--- a/apps/meteor/client/components/NotFoundState.tsx
+++ b/apps/meteor/client/components/NotFoundState.tsx
@@ -21,7 +21,7 @@ const NotFoundState = ({ title, subtitle }: NotFoundProps) => {
 				<StatesIcon name='magnifier' />
 				<StatesTitle>{title}</StatesTitle>
 				<StatesSubtitle>{subtitle}</StatesSubtitle>
-				<Box mbs={16}>
+				<Box marginBlockStart={16}>
 					<StatesActions>
 						<StatesAction onClick={handleGoHomeClick}>{t('Homepage')}</StatesAction>
 					</StatesActions>
diff --git a/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx b/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx
index e32ae1b1f2a68..36a0f20f9574d 100644
--- a/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx
+++ b/apps/meteor/client/components/RoomAutoComplete/RoomAutoComplete.tsx
@@ -78,10 +78,10 @@ const RoomAutoComplete = forwardRef<HTMLInputElement, RoomAutoCompleteProps>(fun
 			setFilter={setFilter}
 			renderSelected={({ selected: { value, label } }) => (
 				<>
-					<Box margin='none' mi={2}>
+					<Box margin='none' marginInline={2}>
 						<RoomAvatar size={AVATAR_SIZE} room={{ ...label, type: label?.type || 'c', _id: value }} />
 					</Box>
-					<Box margin='none' mi={2}>
+					<Box margin='none' marginInline={2}>
 						{label?.name}
 					</Box>
 					{renderRoomIcon?.({ encrypted: label?.encrypted, type: label?.type })}
diff --git a/apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx b/apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx
index 99d558b72f9d5..d0564ab037ecd 100644
--- a/apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx
+++ b/apps/meteor/client/components/RoomAutoCompleteMultiple/RoomAutoCompleteMultiple.tsx
@@ -53,7 +53,7 @@ const RoomAutoCompleteMultiple = ({ value, onChange, ...props }: RoomAutoComplet
 			renderSelected={({ selected: { value, label }, onRemove, ...props }) => (
 				<Chip {...props} key={value} value={value} onClick={onRemove}>
 					<RoomAvatar size='x20' room={{ ...label, type: label?.type || 'c', _id: value }} />
-					<Box is='span' margin='none' mis={4}>
+					<Box is='span' margin='none' marginInlineStart={4}>
 						{label?.name}
 					</Box>
 				</Chip>
diff --git a/apps/meteor/client/components/Sidebar/Content.tsx b/apps/meteor/client/components/Sidebar/Content.tsx
index d1b244606aa7e..4626341737f34 100644
--- a/apps/meteor/client/components/Sidebar/Content.tsx
+++ b/apps/meteor/client/components/Sidebar/Content.tsx
@@ -7,7 +7,7 @@ export type ContentProps = ComponentPropsWithoutRef<typeof CustomScrollbars>;
 const Content = ({ children, ...props }: ContentProps) => (
 	<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} overflow='hidden'>
 		<CustomScrollbars {...props}>
-			<Box display='flex' flexDirection='column' w='full' h='full'>
+			<Box display='flex' flexDirection='column' width='full' height='full'>
 				{children}
 			</Box>
 		</CustomScrollbars>
diff --git a/apps/meteor/client/components/Sidebar/Header.tsx b/apps/meteor/client/components/Sidebar/Header.tsx
index 386ec132a7f78..a4add08bb76e1 100644
--- a/apps/meteor/client/components/Sidebar/Header.tsx
+++ b/apps/meteor/client/components/Sidebar/Header.tsx
@@ -12,9 +12,9 @@ const Header = ({ title, onClose, children, ...props }: HeaderProps) => {
 	const { t } = useTranslation();
 
 	return (
-		<Box display='flex' flexDirection='column' pb={16} {...props}>
+		<Box display='flex' flexDirection='column' paddingBlock={16} {...props}>
 			{(title || onClose) && (
-				<Box display='flex' flexDirection='row' alignItems='center' pi={24} justifyContent='space-between' flexGrow={1}>
+				<Box display='flex' flexDirection='row' alignItems='center' paddingInline={24} justifyContent='space-between' flexGrow={1}>
 					{title && (
 						<Box color='default' fontScale='p2b' flexShrink={1} withTruncatedText>
 							{title}
diff --git a/apps/meteor/client/components/Sidebar/Sidebar.tsx b/apps/meteor/client/components/Sidebar/Sidebar.tsx
index 07325a602920e..9dbc670af1b9b 100644
--- a/apps/meteor/client/components/Sidebar/Sidebar.tsx
+++ b/apps/meteor/client/components/Sidebar/Sidebar.tsx
@@ -3,6 +3,8 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type SidebarProps = ComponentPropsWithoutRef<typeof FuselageSidebar>;
 
-const Sidebar = (props: SidebarProps) => <FuselageSidebar {...props} role='navigation' display='flex' flexDirection='column' h='full' />;
+const Sidebar = (props: SidebarProps) => (
+	<FuselageSidebar {...props} role='navigation' display='flex' flexDirection='column' height='full' />
+);
 
 export default Sidebar;
diff --git a/apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx b/apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx
index 95f3ffd29d6d8..db28fdbf71766 100644
--- a/apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx
+++ b/apps/meteor/client/components/Sidebar/SidebarGenericItem.tsx
@@ -19,7 +19,7 @@ const SidebarGenericItem = ({ href, active, externalUrl, children, ...props }: S
 		{...(externalUrl && { target: '_blank', rel: 'noopener noreferrer' })}
 		{...props}
 	>
-		<Box display='flex' flexDirection='row' alignItems='center' pb={8} width='100%'>
+		<Box display='flex' flexDirection='row' alignItems='center' paddingBlock={8} width='100%'>
 			{children}
 		</Box>
 	</SidebarItem>
diff --git a/apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx b/apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx
index 52f81cf923372..11a953675eae2 100644
--- a/apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx
+++ b/apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx
@@ -36,11 +36,11 @@ const SidebarNavigationItem = ({
 
 	return (
 		<SidebarGenericItem active={isActive} href={path} externalUrl={externalUrl} aria-current={isActive ? 'page' : undefined}>
-			{icon && <Icon name={icon} size='x20' mi={4} />}
+			{icon && <Icon name={icon} size='x20' marginInline={4} />}
 			<Box
 				withTruncatedText
 				fontScale='p2'
-				mi={4}
+				marginInline={4}
 				flexGrow={1}
 				display='flex'
 				alignItems='center'
diff --git a/apps/meteor/client/components/Skeleton.tsx b/apps/meteor/client/components/Skeleton.tsx
index 2c534ca4874f8..d991e85443dce 100644
--- a/apps/meteor/client/components/Skeleton.tsx
+++ b/apps/meteor/client/components/Skeleton.tsx
@@ -2,12 +2,12 @@ import { Box, Skeleton } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 
 export const FormSkeleton = (props: ComponentProps<typeof Box>) => (
-	<Box w='full' pb={24} {...props}>
-		<Skeleton mbe={8} />
-		<Skeleton mbe={4} />
-		<Skeleton mbe={4} />
-		<Skeleton mbe={8} />
-		<Skeleton mbe={4} />
-		<Skeleton mbe={8} />
+	<Box width='full' paddingBlock={24} {...props}>
+		<Skeleton marginBlockEnd={8} />
+		<Skeleton marginBlockEnd={4} />
+		<Skeleton marginBlockEnd={4} />
+		<Skeleton marginBlockEnd={8} />
+		<Skeleton marginBlockEnd={4} />
+		<Skeleton marginBlockEnd={8} />
 	</Box>
 );
diff --git a/apps/meteor/client/components/TextCopy.tsx b/apps/meteor/client/components/TextCopy.tsx
index 612420ce4e646..2119486b08116 100644
--- a/apps/meteor/client/components/TextCopy.tsx
+++ b/apps/meteor/client/components/TextCopy.tsx
@@ -5,7 +5,15 @@ import { useTranslation } from 'react-i18next';
 import useClipboardWithToast from '../hooks/useClipboardWithToast';
 
 const defaultWrapperRenderer = (text: string) => (
-	<Box fontFamily='mono' alignSelf='center' fontScale='p2' style={{ wordBreak: 'break-all' }} mie={4} flexGrow={1} maxHeight='x108'>
+	<Box
+		fontFamily='mono'
+		alignSelf='center'
+		fontScale='p2'
+		style={{ wordBreak: 'break-all' }}
+		marginInlineEnd={4}
+		flexGrow={1}
+		maxHeight='x108'
+	>
 		{text}
 	</Box>
 );
@@ -31,7 +39,7 @@ const TextCopy = ({ text, wrapper = defaultWrapperRenderer, ...props }: TextCopy
 			justifyContent='stretch'
 			alignItems='flex-start'
 			flexGrow={1}
-			pb={16}
+			paddingBlock={16}
 			backgroundColor='surface'
 			width='full'
 			{...props}
diff --git a/apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx b/apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx
index a81e9d1a948b1..fba2c2b04900a 100644
--- a/apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx
+++ b/apps/meteor/client/components/TwoFactorModal/TwoFactorEmailModal.tsx
@@ -122,7 +122,7 @@ const TwoFactorEmailModal = ({ onConfirm, onClose, invalidAttempt, emailOrUserna
 					{errors.code && <FieldError>{errors.code.message}</FieldError>}
 				</Field>
 			</FieldGroup>
-			<Button display='flex' justifyContent='end' onClick={onClickResendCode} small mbs={24}>
+			<Button display='flex' justifyContent='end' onClick={onClickResendCode} small marginBlockStart={24}>
 				{t('Cloud_resend_email')}
 			</Button>
 		</GenericModal>
diff --git a/apps/meteor/client/components/UrlChangeModal.tsx b/apps/meteor/client/components/UrlChangeModal.tsx
index e7e5cf765b9c2..3e8f9080d4f93 100644
--- a/apps/meteor/client/components/UrlChangeModal.tsx
+++ b/apps/meteor/client/components/UrlChangeModal.tsx
@@ -16,7 +16,7 @@ const UrlChangeModal = ({ onConfirm, siteUrl, currentUrl, onClose }: UrlChangeMo
 		<GenericModal variant='warning' title={t('Warning')} onConfirm={onConfirm} onClose={onClose} onCancel={onClose} confirmText={t('Yes')}>
 			<Box
 				is='p'
-				mbe={16}
+				marginBlockEnd={16}
 				dangerouslySetInnerHTML={{
 					__html: DOMPurify.sanitize(
 						t('The_setting_s_is_configured_to_s_and_you_are_accessing_from_s', {
diff --git a/apps/meteor/client/components/UserAndRoomAutoCompleteMultiple/UserAndRoomAutoCompleteMultiple.tsx b/apps/meteor/client/components/UserAndRoomAutoCompleteMultiple/UserAndRoomAutoCompleteMultiple.tsx
index b380ef2dee1c6..0da0e78e52eac 100644
--- a/apps/meteor/client/components/UserAndRoomAutoCompleteMultiple/UserAndRoomAutoCompleteMultiple.tsx
+++ b/apps/meteor/client/components/UserAndRoomAutoCompleteMultiple/UserAndRoomAutoCompleteMultiple.tsx
@@ -81,9 +81,9 @@ const UserAndRoomAutoCompleteMultiple = ({ value, onChange, limit, ...props }: U
 			setFilter={setFilter}
 			multiple
 			renderSelected={({ selected: { value, label }, onRemove, ...props }) => (
-				<Chip {...props} height='x20' value={value} onClick={onRemove} mie={4}>
+				<Chip {...props} height='x20' value={value} onClick={onRemove} marginInlineEnd={4}>
 					<RoomAvatar size='x20' room={{ ...label, _id: value }} />
-					<Box is='span' margin='none' mis={4}>
+					<Box is='span' margin='none' marginInlineStart={4}>
 						{label.name}
 					</Box>
 				</Chip>
diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx
index 3825d4f705b7b..2535e940235e2 100644
--- a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx
+++ b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.tsx
@@ -106,8 +106,8 @@ const UserAutoCompleteMultiple = forwardRef<HTMLInputElement, UserAutoCompleteMu
 
 						return (
 							<UserAvatarChip
-								mie={4}
-								mb={2}
+								marginInlineEnd={4}
+								marginBlock={2}
 								key={username}
 								federated={currentCachedOption._federated}
 								name={currentCachedOption.name}
diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx
index c601f345d308f..07788fc1011a8 100644
--- a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx
+++ b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAvatarChip.tsx
@@ -14,7 +14,7 @@ const UserAvatarChip = ({ federated, username, name, ...props }: UserAvatarChipP
 	return (
 		<Chip height='x20' {...props}>
 			{federated ? <Icon size='x20' name='globe' verticalAlign='middle' /> : <UserAvatar size='x20' username={username} />}
-			<Box is='span' margin='none' mis={4} verticalAlign='middle'>
+			<Box is='span' margin='none' marginInlineStart={4} verticalAlign='middle'>
 				{displayName}
 			</Box>
 		</Chip>
diff --git a/apps/meteor/client/components/UserCard/UserCard.tsx b/apps/meteor/client/components/UserCard/UserCard.tsx
index d47a85961bc06..e24af21ba3ec8 100644
--- a/apps/meteor/client/components/UserCard/UserCard.tsx
+++ b/apps/meteor/client/components/UserCard/UserCard.tsx
@@ -52,21 +52,30 @@ const UserCard = ({
 		<UserCardDialog aria-label={t('User_card')} {...props}>
 			<div>
 				{username && <UserAvatar username={username} etag={etag} size='x124' />}
-				<Box flexGrow={0} display='flex' mbs={12} alignItems='center' justifyContent='center'>
+				<Box flexGrow={0} display='flex' marginBlockStart={12} alignItems='center' justifyContent='center'>
 					<UserCardActions aria-label={t('User_card_actions')}>{actions}</UserCardActions>
 				</Box>
 			</div>
-			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} mis={16} width='1px'>
-				<Box mbe={4} withTruncatedText display='flex' alignItems='center'>
+			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} marginInlineStart={16} width='1px'>
+				<Box marginBlockEnd={4} withTruncatedText display='flex' alignItems='center'>
 					<UserCardUsername status={status} name={name} />
 					{nickname && (
-						<Box flexGrow={1} flexShrink={1} flexBasis={0} title={nickname} color='hint' mis={4} fontScale='p2' withTruncatedText>
+						<Box
+							flexGrow={1}
+							flexShrink={1}
+							flexBasis={0}
+							title={nickname}
+							color='hint'
+							marginInlineStart={4}
+							fontScale='p2'
+							withTruncatedText
+						>
 							({nickname})
 						</Box>
 					)}
 				</Box>
 				{customStatus && (
-					<UserCardInfo mbe={16}>
+					<UserCardInfo marginBlockEnd={16}>
 						{typeof customStatus === 'string' ? (
 							<MarkdownText withTruncatedText variant='inlineWithoutBreaks' content={customStatus} parseEmoji={true} />
 						) : (
@@ -89,7 +98,7 @@ const UserCard = ({
 					</div>
 				)}
 			</Box>
-			{onClose && <IconButton mis={16} small aria-label={t('Close')} icon='cross' onClick={onClose} />}
+			{onClose && <IconButton marginInlineStart={16} small aria-label={t('Close')} icon='cross' onClick={onClose} />}
 		</UserCardDialog>
 	);
 };
diff --git a/apps/meteor/client/components/UserCard/UserCardDialog.tsx b/apps/meteor/client/components/UserCard/UserCardDialog.tsx
index cdcdcbf864775..051a0a0449289 100644
--- a/apps/meteor/client/components/UserCard/UserCardDialog.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardDialog.tsx
@@ -15,9 +15,9 @@ const UserCardDialog = (props: UserCardDialogProps) => {
 			ref={ref}
 			minHeight='x214'
 			rcx-user-card
-			bg='surface'
+			backgroundColor='surface'
 			elevation='2'
-			p={24}
+			padding={24}
 			display='flex'
 			borderRadius='x4'
 			width='439px'
diff --git a/apps/meteor/client/components/UserCard/UserCardInfo.tsx b/apps/meteor/client/components/UserCard/UserCardInfo.tsx
index 65b2b8bda8dcc..8003318e80066 100644
--- a/apps/meteor/client/components/UserCard/UserCardInfo.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardInfo.tsx
@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 
 const UserCardInfo = (props: ComponentProps<typeof Box>) => (
-	<Box mb={8} is='span' fontScale='p2' color='hint' withTruncatedText {...props} />
+	<Box marginBlock={8} is='span' fontScale='p2' color='hint' withTruncatedText {...props} />
 );
 
 export default UserCardInfo;
diff --git a/apps/meteor/client/components/UserCard/UserCardRole.tsx b/apps/meteor/client/components/UserCard/UserCardRole.tsx
index 976b099cd785c..c760080e716f6 100644
--- a/apps/meteor/client/components/UserCard/UserCardRole.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardRole.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 export type UserCardRoleProps = { children: ReactNode };
 
 const UserCardRole = ({ children }: UserCardRoleProps) => (
-	<Box m={2} fontScale='c2'>
+	<Box margin={2} fontScale='c2'>
 		<Tag>{children}</Tag>
 	</Box>
 );
diff --git a/apps/meteor/client/components/UserCard/UserCardRoles.tsx b/apps/meteor/client/components/UserCard/UserCardRoles.tsx
index 274812498ea3c..2a7e6635b9a43 100644
--- a/apps/meteor/client/components/UserCard/UserCardRoles.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardRoles.tsx
@@ -6,7 +6,7 @@ import UserCardInfo from './UserCardInfo';
 export type UserCardRolesProps = { children: ReactNode };
 
 const UserCardRoles = ({ children }: UserCardRolesProps) => (
-	<Box m='neg-x2'>
+	<Box margin='neg-x2'>
 		<UserCardInfo flexWrap='wrap' display='flex' flexShrink={0}>
 			{children}
 		</UserCardInfo>
diff --git a/apps/meteor/client/components/UserCard/UserCardSkeleton.tsx b/apps/meteor/client/components/UserCard/UserCardSkeleton.tsx
index d39d267dd0acc..1ba6e1b2177c0 100644
--- a/apps/meteor/client/components/UserCard/UserCardSkeleton.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardSkeleton.tsx
@@ -8,19 +8,19 @@ const UserCardSkeleton = (props: ComponentProps<typeof UserCardDialog>) => {
 		<UserCardDialog {...props}>
 			<Box>
 				<Skeleton borderRadius='x4' width='x124' height='x124' variant='rect' />
-				<Box flexGrow={0} display='flex' mbs={12} alignItems='center' justifyContent='center'>
+				<Box flexGrow={0} display='flex' marginBlockStart={12} alignItems='center' justifyContent='center'>
 					{Array.from({ length: 3 }).map((_, i) => (
-						<Skeleton key={i} variant='rect' height='x28' width='x28' borderRadius='x4' mi={2} />
+						<Skeleton key={i} variant='rect' height='x28' width='x28' borderRadius='x4' marginInline={2} />
 					))}
 				</Box>
 			</Box>
-			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} mis={16} width='1px'>
-				<Box mbe={4} withTruncatedText display='flex' alignItems='center'>
+			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} marginInlineStart={16} width='1px'>
+				<Box marginBlockEnd={4} withTruncatedText display='flex' alignItems='center'>
 					<Skeleton width='100%' />
 				</Box>
 				<Skeleton width='100%' />
 				{Array.from({ length: 3 }).map((_, i) => (
-					<Skeleton key={i} flexGrow={1} mi={2} />
+					<Skeleton key={i} flexGrow={1} marginInline={2} />
 				))}
 				{Array.from({ length: 2 }).map((_, i) => (
 					<Skeleton key={i} width='100%' />
diff --git a/apps/meteor/client/components/UserCard/UserCardUsername.tsx b/apps/meteor/client/components/UserCard/UserCardUsername.tsx
index 2340f464847bc..3a9917d56e17e 100644
--- a/apps/meteor/client/components/UserCard/UserCardUsername.tsx
+++ b/apps/meteor/client/components/UserCard/UserCardUsername.tsx
@@ -22,7 +22,7 @@ const UserCardUsername = ({ name, status = <UserStatus.Offline />, ...props }: U
 		{...props}
 	>
 		{status}
-		<Box mis={8} flexGrow={1} withTruncatedText>
+		<Box marginInlineStart={8} flexGrow={1} withTruncatedText>
 			{name}
 		</Box>
 	</Box>
diff --git a/apps/meteor/client/components/UserInfo/UserInfo.tsx b/apps/meteor/client/components/UserInfo/UserInfo.tsx
index f6dcd5a83185b..865ee78e50142 100644
--- a/apps/meteor/client/components/UserInfo/UserInfo.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfo.tsx
@@ -87,7 +87,7 @@ const UserInfo = ({
 	const usernameId = useId();
 
 	return (
-		<ContextualbarScrollableContent p={24} {...props}>
+		<ContextualbarScrollableContent padding={24} {...props}>
 			<InfoPanel>
 				{username && (
 					<InfoPanelAvatar>
diff --git a/apps/meteor/client/components/UserInfo/UserInfoABACAttributes.tsx b/apps/meteor/client/components/UserInfo/UserInfoABACAttributes.tsx
index ab84ca30a5e21..2f12e8d2864c9 100644
--- a/apps/meteor/client/components/UserInfo/UserInfoABACAttributes.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfoABACAttributes.tsx
@@ -9,8 +9,8 @@ export type UserInfoABACAttributesProps = {
 
 const UserInfoABACAttributes = ({ abacAttributes }: UserInfoABACAttributesProps) => {
 	return (
-		<Box m='neg-x2'>
-			<Box flexWrap='wrap' display='flex' flexShrink={0} mb={8}>
+		<Box margin='neg-x2'>
+			<Box flexWrap='wrap' display='flex' flexShrink={0} marginBlock={8}>
 				{abacAttributes.map((attribute, index) =>
 					attribute.values.map((value) => (
 						<Margins inline={2} blockEnd={4} key={`${attribute.key}-${value}-${index}`}>
diff --git a/apps/meteor/client/components/UserInfo/UserInfoAction.tsx b/apps/meteor/client/components/UserInfo/UserInfoAction.tsx
index 1e4568ad33f47..27f84211e9c1a 100644
--- a/apps/meteor/client/components/UserInfo/UserInfoAction.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfoAction.tsx
@@ -8,11 +8,11 @@ export type UserInfoActionProps = {
 
 const UserInfoAction = ({ icon, label, title, ...props }: UserInfoActionProps) => {
 	if (!label && icon && title) {
-		return <IconButton small secondary icon={icon} title={title} aria-label={title} {...props} mi={4} size={40} />;
+		return <IconButton small secondary icon={icon} title={title} aria-label={title} {...props} marginInline={4} size={40} />;
 	}
 
 	return (
-		<Button icon={icon} {...props} mi={4}>
+		<Button icon={icon} {...props} marginInline={4}>
 			{label}
 		</Button>
 	);
diff --git a/apps/meteor/client/components/UserStatusText/UserStatusText.tsx b/apps/meteor/client/components/UserStatusText/UserStatusText.tsx
index b21b168e87790..71301d639c004 100644
--- a/apps/meteor/client/components/UserStatusText/UserStatusText.tsx
+++ b/apps/meteor/client/components/UserStatusText/UserStatusText.tsx
@@ -36,7 +36,7 @@ const UserStatusText = ({ status, statusText, statusExpiresAt }: UserStatusTextP
 			{headline && <MarkdownText content={headline} parseEmoji={true} variant='inline' />}
 			{expirationText && (
 				<Box fontScale='c1' display='flex' alignItems='center'>
-					<Icon name='clock' size='x16' mie={4} />
+					<Icon name='clock' size='x16' marginInlineEnd={4} />
 					{expirationText}
 				</Box>
 			)}
diff --git a/apps/meteor/client/components/Wizard/WizardActions.tsx b/apps/meteor/client/components/Wizard/WizardActions.tsx
index 7c505f5214b82..13a525ace8b3f 100644
--- a/apps/meteor/client/components/Wizard/WizardActions.tsx
+++ b/apps/meteor/client/components/Wizard/WizardActions.tsx
@@ -7,7 +7,7 @@ export type WizardActionsProps = {
 
 const WizardActions = ({ children }: WizardActionsProps) => {
 	return (
-		<Box is={ButtonGroup} mbs={24} display='flex' justifyContent='end'>
+		<Box is={ButtonGroup} marginBlockStart={24} display='flex' justifyContent='end'>
 			{children}
 		</Box>
 	);
diff --git a/apps/meteor/client/components/avatar/RoomAvatarEditor.tsx b/apps/meteor/client/components/avatar/RoomAvatarEditor.tsx
index 265aa0c0866e5..1fbc007701af6 100644
--- a/apps/meteor/client/components/avatar/RoomAvatarEditor.tsx
+++ b/apps/meteor/client/components/avatar/RoomAvatarEditor.tsx
@@ -49,7 +49,7 @@ const RoomAvatarEditor = ({ disabled = false, room, roomAvatar, onChangeAvatar }
 	const defaultUrl = room.prid ? getAvatarURL({ roomId: room.prid }) : getAvatarURL({ username: `@${room.name}` }); // Discussions inherit avatars from the parent room
 
 	return (
-		<Box borderRadius='x2' maxWidth='x332' w='full' position='relative'>
+		<Box borderRadius='x2' maxWidth='x332' width='full' position='relative'>
 			<RoomAvatar {...(roomAvatar !== undefined && { url: roomAvatar === null ? defaultUrl : roomAvatar })} room={room} size='x332' />
 			<Box
 				className={[
@@ -59,7 +59,7 @@ const RoomAvatarEditor = ({ disabled = false, room, roomAvatar, onChangeAvatar }
 					`,
 				]}
 				position='absolute'
-				m={12}
+				margin={12}
 			>
 				<ButtonGroup>
 					<Button icon='upload' disabled={isRoomFederated(room) || disabled} small title={t('Upload_user_avatar')} onClick={clickUpload}>
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
index c195dbaf3eb9b..9d6f5e1993aee 100644
--- a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarEditor.tsx
@@ -99,7 +99,7 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, name, disab
 	return (
 		<Box display='flex' flexDirection='column' fontScale='p2m' color='default'>
 			{t('Profile_picture')}
-			<Box display='flex' flexDirection='row' mbs={4}>
+			<Box display='flex' flexDirection='row' marginBlockStart={4}>
 				<UserAvatar
 					size='x124'
 					url={url}
@@ -113,15 +113,15 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, name, disab
 					}}
 					onError={() => setAvatarUrlError(t('error-invalid-image-url'))}
 				/>
-				<Box display='flex' flexDirection='column' flexGrow='1' mis={4}>
-					<Box display='flex' flexDirection='row' mbs='none'>
-						<Button square disabled={disabled} mi={4} title={t('Accounts_SetDefaultAvatar')} onClick={clickReset}>
+				<Box display='flex' flexDirection='column' flexGrow='1' marginInlineStart={4}>
+					<Box display='flex' flexDirection='row' marginBlockStart='none'>
+						<Button square disabled={disabled} marginInline={4} title={t('Accounts_SetDefaultAvatar')} onClick={clickReset}>
 							<Avatar url={`/avatar/%40${useFullNameForDefaultAvatar ? name : username}`} />
 						</Button>
-						<IconButton icon='upload' secondary disabled={disabled} title={t('Upload')} mi={4} onClick={clickUpload} />
+						<IconButton icon='upload' secondary disabled={disabled} title={t('Upload')} marginInline={4} onClick={clickUpload} />
 						<UserAvatarSuggestions disabled={disabled} onSelectOne={handleSelectSuggestion} />
 					</Box>
-					<Field pis={4} mbs={12}>
+					<Field paddingInlineStart={4} marginBlockStart={12}>
 						<FieldLabel>{t('Use_url_for_avatar')}</FieldLabel>
 						<FieldRow>
 							<TextInput
@@ -134,8 +134,8 @@ function UserAvatarEditor({ currentUsername, username, setAvatarObj, name, disab
 										disabled={!canAddUrl}
 										title={t('Add_URL')}
 										onClick={handleAddUrl}
-										mb={-4}
-										mie={-4}
+										marginBlock={-4}
+										marginInlineEnd={-4}
 									/>
 								}
 								disabled={disabled}
diff --git a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx
index f9616c1e2cadc..5587c83ad2b77 100644
--- a/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx
+++ b/apps/meteor/client/components/avatar/UserAvatarEditor/UserAvatarSuggestions.tsx
@@ -19,7 +19,7 @@ function UserAvatarSuggestions({ disabled, onSelectOne }: UserAvatarSuggestionsP
 			{suggestions.map(
 				(suggestion) =>
 					suggestion.blob && (
-						<Button key={suggestion.service} square disabled={disabled} mi={4} onClick={handleClick(suggestion)}>
+						<Button key={suggestion.service} square disabled={disabled} marginInline={4} onClick={handleClick(suggestion)}>
 							<Avatar title={suggestion.service} url={suggestion.blob} />
 						</Button>
 					),
diff --git a/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx b/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx
index 289fa7e3186f6..82c46df1253c6 100644
--- a/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx
+++ b/apps/meteor/client/components/connectionStatus/ConnectionStatusBar.tsx
@@ -45,8 +45,8 @@ function ConnectionStatusBar() {
 			className={connectionStatusBarStyle}
 			rcx-connection-status-bar
 			insetBlockStart={0}
-			pb={4}
-			pi={12}
+			paddingBlock={4}
+			paddingInline={12}
 			width='100%'
 			borderBlockEndWidth={2}
 			role='alert'
diff --git a/apps/meteor/client/components/deviceManagement/DeviceIcon.tsx b/apps/meteor/client/components/deviceManagement/DeviceIcon.tsx
index 2bce6928c9e0b..00e28d5f765fd 100644
--- a/apps/meteor/client/components/deviceManagement/DeviceIcon.tsx
+++ b/apps/meteor/client/components/deviceManagement/DeviceIcon.tsx
@@ -16,11 +16,11 @@ const DeviceIcon = ({ deviceType }: DeviceIconProps) => (
 		display='inline-flex'
 		alignItems='center'
 		justifyContent='center'
-		p={4}
-		bg='selected'
+		padding={4}
+		backgroundColor='selected'
 		size='x24'
 		borderRadius='full'
-		mie={8}
+		marginInlineEnd={8}
 	>
 		<Icon name={iconMap[deviceType] || 'globe'} size='x16' color='hint' />
 	</Box>
diff --git a/apps/meteor/client/components/message/content/Action.tsx b/apps/meteor/client/components/message/content/Action.tsx
index ad46c044e2c6f..c1000302829af 100644
--- a/apps/meteor/client/components/message/content/Action.tsx
+++ b/apps/meteor/client/components/message/content/Action.tsx
@@ -3,6 +3,6 @@ import type { ComponentProps } from 'react';
 
 export type ActionProps = ComponentProps<typeof IconButton> & { icon: string };
 
-const Action = (props: ActionProps) => <IconButton mi={2} mini {...props} />;
+const Action = (props: ActionProps) => <IconButton marginInline={2} mini {...props} />;
 
 export default Action;
diff --git a/apps/meteor/client/components/message/content/MessageActions.tsx b/apps/meteor/client/components/message/content/MessageActions.tsx
index e15f54e5eecbd..264500df84677 100644
--- a/apps/meteor/client/components/message/content/MessageActions.tsx
+++ b/apps/meteor/client/components/message/content/MessageActions.tsx
@@ -29,7 +29,7 @@ const MessageActions = ({ message, actions }: MessageActionsProps) => {
 	const alignment = actions[0]?.actionLinksAlignment || 'center';
 
 	return (
-		<Box display='flex' mb={4} mi={-4} width='full' justifyContent={alignment}>
+		<Box display='flex' marginBlock={4} marginInline={-4} width='full' justifyContent={alignment}>
 			<ButtonGroup align='center'>
 				{actions.map((action, key) => (
 					<MessageAction key={key} runAction={runAction} {...action} />
diff --git a/apps/meteor/client/components/message/content/attachments/default/ActionAttachtment.tsx b/apps/meteor/client/components/message/content/attachments/default/ActionAttachtment.tsx
index 8460ed9be0475..9bdfc7db4e4a7 100644
--- a/apps/meteor/client/components/message/content/attachments/default/ActionAttachtment.tsx
+++ b/apps/meteor/client/components/message/content/attachments/default/ActionAttachtment.tsx
@@ -10,7 +10,7 @@ export const ActionAttachment = ({ actions }: ActionAttachmentProps) => {
 	const handleLinkClick = useExternalLink();
 
 	return (
-		<Box mb={4}>
+		<Box marginBlock={4}>
 			<ButtonGroup small>
 				{actions
 					.filter(
diff --git a/apps/meteor/client/components/message/content/attachments/default/Field.tsx b/apps/meteor/client/components/message/content/attachments/default/Field.tsx
index f05c0049e5c6c..30b0979e13341 100644
--- a/apps/meteor/client/components/message/content/attachments/default/Field.tsx
+++ b/apps/meteor/client/components/message/content/attachments/default/Field.tsx
@@ -9,7 +9,7 @@ export type FieldProps = {
 
 // TODO: description missing color token
 const Field = ({ title, value, ...props }: FieldProps) => (
-	<Box mb={4} pi={4} width='full' flexBasis={100} flexShrink={0} color='default' {...props}>
+	<Box marginBlock={4} paddingInline={4} width='full' flexBasis={100} flexShrink={0} color='default' {...props}>
 		<Box fontScale='p2m'>{title}</Box>
 		{value}
 	</Box>
diff --git a/apps/meteor/client/components/message/content/attachments/default/FieldsAttachment.tsx b/apps/meteor/client/components/message/content/attachments/default/FieldsAttachment.tsx
index 98a94dc9be124..235a01a31e173 100644
--- a/apps/meteor/client/components/message/content/attachments/default/FieldsAttachment.tsx
+++ b/apps/meteor/client/components/message/content/attachments/default/FieldsAttachment.tsx
@@ -13,7 +13,7 @@ export type FieldsAttachmentProps = {
 };
 
 const FieldsAttachment = ({ fields }: FieldsAttachmentProps) => (
-	<Box flexWrap='wrap' display='flex' mb={4} mi={-4}>
+	<Box flexWrap='wrap' display='flex' marginBlock={4} marginInline={-4}>
 		{fields.map((field, index) => (field.short ? <ShortField key={index} {...field} /> : <Field key={index} {...field} />))}
 	</Box>
 );
diff --git a/apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx b/apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx
index 54bf0a4968ebb..67007dbdbb775 100644
--- a/apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx
+++ b/apps/meteor/client/components/message/content/attachments/file/AudioAttachment.tsx
@@ -63,12 +63,12 @@ const AudioAttachment = ({
 					borderWidth='default'
 					borderStyle='solid'
 					borderColor='extra-light'
-					bg='tint'
-					pb={12}
-					pie={8}
-					pis={16}
+					backgroundColor='tint'
+					paddingBlock={12}
+					paddingInlineEnd={8}
+					paddingInlineStart={16}
 					borderRadius='x4'
-					w='100%'
+					width='100%'
 					maxWidth='x300'
 				>
 					<AudioPlayerControls
diff --git a/apps/meteor/client/components/message/content/attachments/structure/Attachment.tsx b/apps/meteor/client/components/message/content/attachments/structure/Attachment.tsx
index 13a91b00af37b..d9a17e85e3379 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/Attachment.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/Attachment.tsx
@@ -14,7 +14,7 @@ const Attachment = (props: AttachmentProps) => {
 	return (
 		<Box
 			rcx-message-attachment
-			mb={4}
+			marginBlock={4}
 			maxWidth={width}
 			width='full'
 			display='flex'
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthor.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthor.tsx
index 5e9fe891faafc..5346760e76cb6 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthor.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthor.tsx
@@ -4,7 +4,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type AttachmentAuthorProps = ComponentPropsWithoutRef<typeof Box>;
 
 const AttachmentAuthor = (props: AttachmentAuthorProps) => (
-	<Box display='flex' flexDirection='row' alignItems='center' mbe={4} {...props} />
+	<Box display='flex' flexDirection='row' alignItems='center' marginBlockEnd={4} {...props} />
 );
 
 export default AttachmentAuthor;
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthorName.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthorName.tsx
index 9854cc801ff2a..adc84cd6c1d82 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthorName.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentAuthorName.tsx
@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type AttachmentAuthorNameProps = ComponentPropsWithoutRef<typeof Box>;
 
-const AttachmentAuthorName = (props: AttachmentAuthorNameProps) => <Box withTruncatedText fontScale='p2m' mi={8} {...props} />;
+const AttachmentAuthorName = (props: AttachmentAuthorNameProps) => <Box withTruncatedText fontScale='p2m' marginInline={8} {...props} />;
 
 export default AttachmentAuthorName;
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentBlock.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentBlock.tsx
index ae05103c4181a..43237fe66426c 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentBlock.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentBlock.tsx
@@ -11,7 +11,7 @@ const AttachmentBlock = ({ pre, color = 'annotation', children }: AttachmentBloc
 		<Box
 			display='flex'
 			flexDirection='row'
-			pis={16}
+			paddingInlineStart={16}
 			borderRadius={2}
 			borderInlineStartStyle='solid'
 			borderInlineStartWidth='default'
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentContent.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentContent.tsx
index a30120a0d7524..f378340e329d6 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentContent.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentContent.tsx
@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type AttachmentContentProps = ComponentPropsWithoutRef<typeof Box>;
 
-const AttachmentContent = (props: AttachmentContentProps) => <Box rcx-attachment__content width='full' mb={4} {...props} />;
+const AttachmentContent = (props: AttachmentContentProps) => <Box rcx-attachment__content width='full' marginBlock={4} {...props} />;
 
 export default AttachmentContent;
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentDetails.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentDetails.tsx
index 2de9eeeb09706..cd7147f6c3a99 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentDetails.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentDetails.tsx
@@ -4,7 +4,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type AttachmentDetailsProps = ComponentPropsWithoutRef<typeof Box>;
 
 const AttachmentDetails = (props: AttachmentDetailsProps) => (
-	<Box rcx-attachment__details fontScale='p2' color='default' bg='surface-tint' padding={16} {...props} />
+	<Box rcx-attachment__details fontScale='p2' color='default' backgroundColor='surface-tint' padding={16} {...props} />
 );
 
 export default AttachmentDetails;
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentImage.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentImage.tsx
index b2e205818f8bc..7debac8a809d1 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentImage.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentImage.tsx
@@ -65,7 +65,7 @@ const AttachmentImage = ({ id, previewUrl, dataSrc, loadImage = true, setLoadIma
 
 	return (
 		<Box width={dimensions.width} maxWidth='full' position='relative'>
-			<Box pbs={`${dimensions.ratio}%`} position='relative'>
+			<Box paddingBlockStart={`${dimensions.ratio}%`} position='relative'>
 				<ImageBox
 					is='picture'
 					position='absolute'
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentMessageLink.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentMessageLink.tsx
index 4c60ed3cd97b9..364fac0fda37a 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentMessageLink.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentMessageLink.tsx
@@ -8,7 +8,7 @@ type AttachmentAuthorMessageLinkProps = ComponentPropsWithoutRef<typeof Box>;
 const AttachmentAuthorMessageLink = ({ href, ...props }: AttachmentAuthorMessageLinkProps) => {
 	const { t } = useTranslation();
 
-	return <IconButton mis={4} mini is='a' href={href} icon='jump' title={t('Jump_to_message')} {...props} />;
+	return <IconButton marginInlineStart={4} mini is='a' href={href} icon='jump' title={t('Jump_to_message')} {...props} />;
 };
 
 export default AttachmentAuthorMessageLink;
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentRow.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentRow.tsx
index 58ed3221e87a9..4a37419c7d438 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentRow.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentRow.tsx
@@ -4,7 +4,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type AttachmentRowProps = ComponentPropsWithoutRef<typeof Box>;
 
 const AttachmentRow = (props: AttachmentRowProps) => (
-	<Box mi={-2} mbe={2} rcx-message-attachment display='flex' alignItems='center' {...props} />
+	<Box marginInline={-2} marginBlockEnd={2} rcx-message-attachment display='flex' alignItems='center' {...props} />
 );
 
 export default AttachmentRow;
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentText.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentText.tsx
index bc95f45417ace..3ca2e56e04f5d 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentText.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentText.tsx
@@ -6,7 +6,17 @@ export type AttachmentTextProps = ComponentPropsWithoutRef<typeof Box>;
 
 const AttachmentText = (props: AttachmentTextProps) => {
 	const { t } = useTranslation();
-	return <Box role='document' aria-roledescription={t('message_attachment')} mbe={4} mi={2} fontScale='p2' color='default' {...props} />;
+	return (
+		<Box
+			role='document'
+			aria-roledescription={t('message_attachment')}
+			marginBlockEnd={4}
+			marginInline={2}
+			fontScale='p2'
+			color='default'
+			{...props}
+		/>
+	);
 };
 
 export default AttachmentText;
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentThumb.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentThumb.tsx
index ca82f5b0e6703..48921c705c88e 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentThumb.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentThumb.tsx
@@ -4,7 +4,7 @@ import { memo } from 'react';
 export type AttachmentThumbProps = { url: string };
 
 const AttachmentThumb = ({ url }: AttachmentThumbProps) => (
-	<Box mis={8}>
+	<Box marginInlineStart={8}>
 		<Avatar {...({ url, size: 'x48' } as any)} />
 	</Box>
 );
diff --git a/apps/meteor/client/components/message/content/attachments/structure/AttachmentTitle.tsx b/apps/meteor/client/components/message/content/attachments/structure/AttachmentTitle.tsx
index d5f587576b536..e565d7568be6b 100644
--- a/apps/meteor/client/components/message/content/attachments/structure/AttachmentTitle.tsx
+++ b/apps/meteor/client/components/message/content/attachments/structure/AttachmentTitle.tsx
@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type AttachmentTitleProps = ComponentPropsWithoutRef<typeof Box>;
 
-const AttachmentTitle = (props: AttachmentTitleProps) => <Box withTruncatedText mi={2} fontScale='c1' color='hint' {...props} />;
+const AttachmentTitle = (props: AttachmentTitleProps) => <Box withTruncatedText marginInline={2} fontScale='c1' color='hint' {...props} />;
 
 export default AttachmentTitle;
diff --git a/apps/meteor/client/components/message/notification/AllMentionNotification.tsx b/apps/meteor/client/components/message/notification/AllMentionNotification.tsx
index a3caff5a30028..7f4e1562ea077 100644
--- a/apps/meteor/client/components/message/notification/AllMentionNotification.tsx
+++ b/apps/meteor/client/components/message/notification/AllMentionNotification.tsx
@@ -1,7 +1,7 @@
 import MessageNotification from './MessageNotification';
 
 const AllMentionNotification = function All() {
-	return <MessageNotification label='mention-all' bg='badge-background-level-3' />;
+	return <MessageNotification label='mention-all' backgroundColor='badge-background-level-3' />;
 };
 
 export default AllMentionNotification;
diff --git a/apps/meteor/client/components/message/notification/MeMentionNotification.tsx b/apps/meteor/client/components/message/notification/MeMentionNotification.tsx
index 0fc10fb9e2b90..27611d87c9b3b 100644
--- a/apps/meteor/client/components/message/notification/MeMentionNotification.tsx
+++ b/apps/meteor/client/components/message/notification/MeMentionNotification.tsx
@@ -1,7 +1,7 @@
 import MessageNotification from './MessageNotification';
 
 const MeMentionNotification = () => {
-	return <MessageNotification label='Me' bg='badge-background-level-4' />;
+	return <MessageNotification label='Me' backgroundColor='badge-background-level-4' />;
 };
 
 export default MeMentionNotification;
diff --git a/apps/meteor/client/components/message/notification/MessageNotification.tsx b/apps/meteor/client/components/message/notification/MessageNotification.tsx
index f3fcaa23df620..249dd15c98a67 100644
--- a/apps/meteor/client/components/message/notification/MessageNotification.tsx
+++ b/apps/meteor/client/components/message/notification/MessageNotification.tsx
@@ -5,12 +5,12 @@ import { useTranslation } from 'react-i18next';
 
 export type MessageNotificationProps = {
 	label: TranslationKey;
-	bg: keyof (typeof Palette)['badge'];
+	backgroundColor: keyof (typeof Palette)['badge'];
 };
 
-const MessageNotification = ({ label, bg }: MessageNotificationProps) => {
+const MessageNotification = ({ label, backgroundColor }: MessageNotificationProps) => {
 	const { t } = useTranslation();
-	return <Box width='x8' aria-label={t(label)} borderRadius='full' height='x8' bg={bg} />;
+	return <Box width='x8' aria-label={t(label)} borderRadius='full' height='x8' backgroundColor={backgroundColor} />;
 };
 
 export default MessageNotification;
diff --git a/apps/meteor/client/components/message/notification/UnreadMessagesNotification.tsx b/apps/meteor/client/components/message/notification/UnreadMessagesNotification.tsx
index d2212a1fe0a68..b7a61af1134b7 100644
--- a/apps/meteor/client/components/message/notification/UnreadMessagesNotification.tsx
+++ b/apps/meteor/client/components/message/notification/UnreadMessagesNotification.tsx
@@ -1,7 +1,7 @@
 import MessageNotification from './MessageNotification';
 
 const UnreadMessagesNotification = () => {
-	return <MessageNotification label='Unread' bg='badge-background-level-2' />;
+	return <MessageNotification label='Unread' backgroundColor='badge-background-level-2' />;
 };
 
 export default UnreadMessagesNotification;
diff --git a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/DatePicker.tsx b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/DatePicker.tsx
index 451061956ee42..2d75b56098fff 100644
--- a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/DatePicker.tsx
+++ b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/DatePicker.tsx
@@ -23,7 +23,7 @@ const DatePicker = ({ value, onChange }: DatePickerProps) => {
 	const dateValue = value && !isNaN(value.getTime()) ? format(value, 'yyyy-MM-dd') : '';
 
 	return (
-		<Box mb='x16'>
+		<Box marginBlock='x16'>
 			<Field>
 				<FieldLabel htmlFor={fieldId}>{t('Date')}</FieldLabel>
 				<FieldRow>
diff --git a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/FormatSelector.tsx b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/FormatSelector.tsx
index f28f41e14efdf..0e3deb123d01f 100644
--- a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/FormatSelector.tsx
+++ b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/FormatSelector.tsx
@@ -22,7 +22,7 @@ const FormatSelector = ({ value, onChange }: FormatSelectorProps) => {
 	);
 
 	return (
-		<Box mb='x16'>
+		<Box marginBlock='x16'>
 			<Field>
 				<FieldLabel>{t('Format')}</FieldLabel>
 				<FieldRow>
diff --git a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/Preview.tsx b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/Preview.tsx
index 69b2107b4fa89..3bbb18b9909dd 100644
--- a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/Preview.tsx
+++ b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/Preview.tsx
@@ -20,7 +20,7 @@ const Preview = ({ date, format, timezone }: PreviewProps) => {
 	const tokens = parse(markup);
 
 	return (
-		<Box mb='x16'>
+		<Box marginBlock='x16'>
 			<Field>
 				<FieldLabel>{t('Preview')}</FieldLabel>
 				<FieldRow>
diff --git a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimePicker.tsx b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimePicker.tsx
index 887817a0b63bf..da374593be750 100644
--- a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimePicker.tsx
+++ b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimePicker.tsx
@@ -23,7 +23,7 @@ const TimePicker = ({ value, onChange }: TimePickerProps) => {
 	const timeValue = value && !isNaN(value.getTime()) ? format(value, 'HH:mm') : '';
 
 	return (
-		<Box mb='x16'>
+		<Box marginBlock='x16'>
 			<Field>
 				<FieldLabel htmlFor={fieldId}>{t('Time')}</FieldLabel>
 				<FieldRow>
diff --git a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx
index 05e5c4926313c..57fd0ef16bb03 100644
--- a/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx
+++ b/apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx
@@ -23,7 +23,7 @@ const TimezoneSelector = ({ value, onChange }: TimezoneSelectorProps) => {
 	];
 
 	return (
-		<Box mb='x16'>
+		<Box marginBlock='x16'>
 			<Field>
 				<FieldLabel>{t('Timezone')}</FieldLabel>
 				<FieldDescription>{t('Timezone_picker_description')}</FieldDescription>
diff --git a/apps/meteor/client/hooks/useShowSettingAlerts.tsx b/apps/meteor/client/hooks/useShowSettingAlerts.tsx
index 1957508df198d..d653d7d95f760 100644
--- a/apps/meteor/client/hooks/useShowSettingAlerts.tsx
+++ b/apps/meteor/client/hooks/useShowSettingAlerts.tsx
@@ -41,8 +41,8 @@ export const useShowSettingAlerts = () => {
 							const labelText = (i18n.exists(i18nLabel) && t(i18nLabel)) || (i18n.exists(_id) && t(_id)) || i18nLabel || _id;
 
 							return (
-								<Box key={_id} mbe={24}>
-									<Box fontScale='h4' mbe={8}>
+								<Box key={_id} marginBlockEnd={24}>
+									<Box fontScale='h4' marginBlockEnd={8}>
 										{labelText}
 									</Box>
 									<Callout type='warning'>
diff --git a/apps/meteor/client/navbar/NavBarNavigation.tsx b/apps/meteor/client/navbar/NavBarNavigation.tsx
index f9582e5a59043..6ba09499f6332 100644
--- a/apps/meteor/client/navbar/NavBarNavigation.tsx
+++ b/apps/meteor/client/navbar/NavBarNavigation.tsx
@@ -16,7 +16,7 @@ const NavbarNavigation = () => {
 				<NavBarSearch />
 			</FocusScope>
 			{!isMobile && (
-				<Box mie={8}>
+				<Box marginInlineEnd={8}>
 					<NavBarGroup aria-label={t('History_navigation')}>
 						<NavBarItem title={t('Back_in_history')} onClick={() => navigate(-1)} icon='chevron-right' small />
 						<NavBarItem title={t('Forward_in_history')} onClick={() => navigate(1)} icon='chevron-left' small />
diff --git a/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateChannelModal.tsx b/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateChannelModal.tsx
index 5dedbd2448851..3a20da553c36b 100644
--- a/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateChannelModal.tsx
+++ b/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateChannelModal.tsx
@@ -200,8 +200,8 @@ const CreateChannelModal = ({ teamId = '', mainRoom, onClose, reload }: CreateCh
 				<ModalTitle id={`${createChannelFormId}-title`}>{t('Create_channel')}</ModalTitle>
 				<ModalClose tabIndex={-1} title={t('Close')} onClick={onClose} />
 			</ModalHeader>
-			<ModalContent mbe={2}>
-				<FieldGroup mbe={24}>
+			<ModalContent marginBlockEnd={2}>
+				<FieldGroup marginBlockEnd={24}>
 					<Field>
 						<FieldLabel required>{t('Name')}</FieldLabel>
 						<FieldRow>
diff --git a/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateDirectMessage.tsx b/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateDirectMessage.tsx
index c5ba3134c61c1..c4a385f5a9770 100644
--- a/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateDirectMessage.tsx
+++ b/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateDirectMessage.tsx
@@ -63,7 +63,7 @@ const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => {
 				<ModalTitle id={`${createDMFormId}-title`}>{t('Create_direct_message')}</ModalTitle>
 				<ModalClose tabIndex={-1} onClick={onClose} />
 			</ModalHeader>
-			<ModalContent mbe={2}>
+			<ModalContent marginBlockEnd={2}>
 				<FieldGroup>
 					<Field>
 						<FieldLabel>{t('Direct_message_creation_description')}</FieldLabel>
diff --git a/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateTeamModal.tsx b/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateTeamModal.tsx
index 346214bbaaeb8..0183e78bc8e5a 100644
--- a/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateTeamModal.tsx
+++ b/apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateTeamModal.tsx
@@ -161,11 +161,11 @@ const CreateTeamModal = ({ onClose }: CreateTeamModalProps) => {
 				<ModalTitle id={`${createTeamFormId}-title`}>{t('Teams_New_Title')}</ModalTitle>
 				<ModalClose title={t('Close')} onClick={onClose} tabIndex={-1} />
 			</ModalHeader>
-			<ModalContent mbe={2}>
-				<Box fontScale='p2' mbe={16}>
+			<ModalContent marginBlockEnd={2}>
+				<Box fontScale='p2' marginBlockEnd={16}>
 					{t('Teams_new_description')}
 				</Box>
-				<FieldGroup mbe={24}>
+				<FieldGroup marginBlockEnd={24}>
 					<Field>
 						<FieldLabel required>{t('Teams_New_Name_Label')}</FieldLabel>
 						<FieldRow>
diff --git a/apps/meteor/client/navbar/NavBarSearch/NavBarSearch.tsx b/apps/meteor/client/navbar/NavBarSearch/NavBarSearch.tsx
index b17b744403d88..78c84bb6472fb 100644
--- a/apps/meteor/client/navbar/NavBarSearch/NavBarSearch.tsx
+++ b/apps/meteor/client/navbar/NavBarSearch/NavBarSearch.tsx
@@ -75,7 +75,7 @@ const NavBarSearch = () => {
 
 	return (
 		<FormProvider {...methods}>
-			<Box width='100%' maxWidth='x622' role='search' aria-label={t('Search_rooms')} mi={8} position='relative'>
+			<Box width='100%' maxWidth='x622' role='search' aria-label={t('Search_rooms')} marginInline={8} position='relative'>
 				<TextInput
 					{...rest}
 					{...triggerProps}
diff --git a/apps/meteor/client/navbar/NavBarSearch/NavBarSearchListbox.tsx b/apps/meteor/client/navbar/NavBarSearch/NavBarSearchListbox.tsx
index 0011bf42d4b91..92d58ffa595c5 100644
--- a/apps/meteor/client/navbar/NavBarSearch/NavBarSearchListbox.tsx
+++ b/apps/meteor/client/navbar/NavBarSearch/NavBarSearchListbox.tsx
@@ -42,8 +42,8 @@ const NavBarSearchListBox = ({ state, overlayProps }: NavBarSearchListBoxProps)
 			position='absolute'
 			zIndex={99}
 			padding={0}
-			pb={16}
-			mbs={4}
+			paddingBlock={16}
+			marginBlockStart={4}
 			minHeight='x52'
 			maxHeight='50vh'
 			display='flex'
@@ -55,7 +55,15 @@ const NavBarSearchListBox = ({ state, overlayProps }: NavBarSearchListBoxProps)
 				<div {...overlayProps} role='listbox' aria-label={t('Channels')} aria-busy={isLoading} tabIndex={-1} onKeyDown={handleKeyDown}>
 					{items.length === 0 && !isLoading && <NavBarSearchNoResults />}
 					{items.length > 0 && (
-						<Box color='titles-labels' fontScale='c1' fontWeight='bold' pi={12} mbe={4} role='presentation' aria-hidden>
+						<Box
+							color='titles-labels'
+							fontScale='c1'
+							fontWeight='bold'
+							paddingInline={12}
+							marginBlockEnd={4}
+							role='presentation'
+							aria-hidden
+						>
 							{filterText ? t('Results') : t('Recent')}
 						</Box>
 					)}
diff --git a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx
index d84943c77e40b..ec7e5bf66430e 100644
--- a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx
+++ b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/EditStatusModal.tsx
@@ -150,7 +150,7 @@ const EditStatusModal = ({ onClose }: EditStatusModalProps) => {
 						/>
 					</FieldRow>
 					{statusDuration === 'custom' && (
-						<Box display='flex' mi='neg-x4' mbs={8}>
+						<Box display='flex' marginInline='neg-x4' marginBlockStart={8}>
 							<Margins inline={4}>
 								<Controller
 									control={control}
diff --git a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/KeyboardShortcutsModal.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/KeyboardShortcutsModal.tsx
index 0d6f716c9c585..23244d2799389 100644
--- a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/KeyboardShortcutsModal.tsx
+++ b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/KeyboardShortcutsModal.tsx
@@ -92,19 +92,19 @@ const KeyboardShortcutsModal = ({ onClose }: KeyboardShortcutsModalProps) => {
 
 	return (
 		<GenericModal icon='keyboard' variant='info' title={t('Keyboard_Shortcuts_Title')} cancelText={t('Close')} onCancel={onClose}>
-			<Box is='dl' aria-label={t('Keyboard_Shortcuts_Title')} m={0}>
+			<Box is='dl' aria-label={t('Keyboard_Shortcuts_Title')} margin={0}>
 				{SHORTCUTS.map(({ id, descriptionKey, combos }) => (
-					<Box key={id} mbe={12}>
-						<Box is='dt' fontScale='p2m' fontWeight='700' mbe={4}>
+					<Box key={id} marginBlockEnd={12}>
+						<Box is='dt' fontScale='p2m' fontWeight='700' marginBlockEnd={4}>
 							{t(descriptionKey)}
 						</Box>
-						<Box is='dd' fontScale='p2' m={0} mbe={8}>
+						<Box is='dd' fontScale='p2' margin={0} marginBlockEnd={8}>
 							{combos.map((combo, comboIndex) => {
 								const keys = isMac ? combo.mac : combo.other;
 								return (
 									<Fragment key={comboIndex}>
 										{comboIndex > 0 && (
-											<Box is='span' mi={8} color='hint'>
+											<Box is='span' marginInline={8} color='hint'>
 												{t('or')}
 											</Box>
 										)}
@@ -112,7 +112,7 @@ const KeyboardShortcutsModal = ({ onClose }: KeyboardShortcutsModalProps) => {
 											{keys.map((token, tokenIndex) => (
 												<Fragment key={tokenIndex}>
 													{tokenIndex > 0 && (
-														<Box is='span' mi={4} aria-hidden='true'>
+														<Box is='span' marginInline={4} aria-hidden='true'>
 															+
 														</Box>
 													)}
@@ -124,7 +124,7 @@ const KeyboardShortcutsModal = ({ onClose }: KeyboardShortcutsModalProps) => {
 								);
 							})}
 						</Box>
-						<Divider aria-hidden='true' m={0} />
+						<Divider aria-hidden='true' margin={0} />
 					</Box>
 				))}
 			</Box>
diff --git a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuButton.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuButton.tsx
index 1141e06932d46..e6547b523d17e 100644
--- a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuButton.tsx
+++ b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuButton.tsx
@@ -46,7 +46,7 @@ const UserMenuButton = forwardRef(function UserMenuButton(props: UserMenuButtonP
 				overflow='hidden'
 				size='x12'
 				borderWidth='default'
-				bg='surface-tint'
+				backgroundColor='surface-tint'
 				borderColor='extra-light'
 				borderRadius='full'
 			>
diff --git a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx
index bb110c60b637e..3bd24bf915762 100644
--- a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx
+++ b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/UserMenuHeader.tsx
@@ -9,12 +9,12 @@ const UserMenuHeader = ({ user }: UserMenuHeaderProps) => {
 	const displayName = useUserDisplayName(user);
 
 	return (
-		<Box display='flex' flexDirection='row' alignItems='center' minWidth='x208' mbe='neg-x4' mbs='neg-x8'>
-			<Box mie={4}>
+		<Box display='flex' flexDirection='row' alignItems='center' minWidth='x208' marginBlockEnd='neg-x4' marginBlockStart='neg-x8'>
+			<Box marginInlineEnd={4}>
 				<UserAvatar size='x36' username={user?.username || ''} etag={user?.avatarETag} />
 			</Box>
-			<Box mis={4} display='flex' overflow='hidden' flexDirection='column' fontScale='p2' flexGrow={1} flexShrink={1}>
-				<Box withTruncatedText w='full' is='span' fontWeight='700'>
+			<Box marginInlineStart={4} display='flex' overflow='hidden' flexDirection='column' fontScale='p2' flexGrow={1} flexShrink={1}>
+				<Box withTruncatedText width='full' is='span' fontWeight='700'>
 					{displayName}
 				</Box>
 			</Box>
diff --git a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx
index 21a983ecfd952..579e4649eaf0a 100644
--- a/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx
+++ b/apps/meteor/client/navbar/NavBarSettingsToolbar/UserMenu/hooks/useStatusItems.tsx
@@ -86,7 +86,7 @@ export const useStatusItems = (user?: IUser): GenericMenuItemProps[] => {
 					id: 'presence-disabled',
 					content: (
 						<Box fontScale='p2'>
-							<Box mbe={4} wordBreak='break-word' style={{ whiteSpace: 'normal' }}>
+							<Box marginBlockEnd={4} wordBreak='break-word' style={{ whiteSpace: 'normal' }}>
 								{t('User_status_disabled')}
 							</Box>
 							<Box is='a' color='info' onClick={handleStatusDisabledModal}>
@@ -111,7 +111,7 @@ export const useStatusItems = (user?: IUser): GenericMenuItemProps[] => {
 						{contentValue && <MarkdownText content={contentValue} parseEmoji variant='inline' />}
 						{customStatusExpiration && (
 							<Box color='secondary-info' display='flex' alignItems='center'>
-								<Icon name='clock' size='x16' mie={4} />
+								<Icon name='clock' size='x16' marginInlineEnd={4} />
 								{customStatusExpiration}
 							</Box>
 						)}
diff --git a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx
index ed9f9c1349110..441106a02f501 100644
--- a/apps/meteor/client/sidebar/Item/Condensed.stories.tsx
+++ b/apps/meteor/client/sidebar/Item/Condensed.stories.tsx
@@ -14,7 +14,7 @@ export default {
 	},
 	decorators: [
 		(fn) => (
-			<Box maxWidth='x300' bg='dark' borderRadius='x4'>
+			<Box maxWidth='x300' backgroundColor='dark' borderRadius='x4'>
 				{fn()}
 			</Box>
 		),
@@ -25,7 +25,7 @@ const Template: StoryFn<typeof Condensed> = (args) => (
 	<Condensed
 		{...args}
 		titleIcon={
-			<Box mi={4}>
+			<Box marginInline={4}>
 				<Status.Online />
 			</Box>
 		}
diff --git a/apps/meteor/client/sidebar/Item/Extended.stories.tsx b/apps/meteor/client/sidebar/Item/Extended.stories.tsx
index cd9ef1ba1bef6..ffa6efecfadb7 100644
--- a/apps/meteor/client/sidebar/Item/Extended.stories.tsx
+++ b/apps/meteor/client/sidebar/Item/Extended.stories.tsx
@@ -10,7 +10,7 @@ export default {
 	component: Extended,
 	decorators: [
 		(fn) => (
-			<Box maxWidth='x300' bg='dark' borderRadius='x4'>
+			<Box maxWidth='x300' backgroundColor='dark' borderRadius='x4'>
 				{fn()}
 			</Box>
 		),
@@ -22,7 +22,7 @@ const Template: StoryFn<typeof Extended> = (args) => (
 		{...args}
 		title='John Doe'
 		subtitle={
-			<Box display='flex' flexDirection='row' w='full' alignItems='center'>
+			<Box display='flex' flexDirection='row' width='full' alignItems='center'>
 				<Box flexGrow='1' withTruncatedText>
 					John Doe: test 123
 				</Box>
@@ -40,7 +40,7 @@ const Template: StoryFn<typeof Extended> = (args) => (
 			</Box>
 		}
 		titleIcon={
-			<Box mi={4}>
+			<Box marginInline={4}>
 				<Status.Online />
 			</Box>
 		}
diff --git a/apps/meteor/client/sidebar/Item/Medium.stories.tsx b/apps/meteor/client/sidebar/Item/Medium.stories.tsx
index be5e6698400f5..70cb8fc671398 100644
--- a/apps/meteor/client/sidebar/Item/Medium.stories.tsx
+++ b/apps/meteor/client/sidebar/Item/Medium.stories.tsx
@@ -13,7 +13,7 @@ export default {
 	},
 	decorators: [
 		(fn) => (
-			<Box maxWidth='x300' bg='dark' borderRadius='x4'>
+			<Box maxWidth='x300' backgroundColor='dark' borderRadius='x4'>
 				{fn()}
 			</Box>
 		),
@@ -24,7 +24,7 @@ const Template: StoryFn<typeof Medium> = (args) => (
 	<Medium
 		{...args}
 		titleIcon={
-			<Box mi={4}>
+			<Box marginInline={4}>
 				<Status.Online />
 			</Box>
 		}
diff --git a/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx b/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx
index 71b8a1428ccd6..2d3f1b86cc0af 100644
--- a/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx
+++ b/apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx
@@ -18,7 +18,7 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => {
 		<>
 			{showUnread && <UnreadBadge title={unreadTitle} roomTitle={roomTitle} variant={unreadVariant} total={unreadCount.total} />}
 			{isOmnichannelRoom(room) && <OmnichannelBadges room={room} />}
-			{isInviteSubscription(room) && <InvitationBadge mbs={2} invitationDate={room.ts} />}
+			{isInviteSubscription(room) && <InvitationBadge marginBlockStart={2} invitationDate={room.ts} />}
 		</>
 	);
 };
diff --git a/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx b/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx
index 0908ca57e274f..9da98856e4645 100644
--- a/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx
+++ b/apps/meteor/client/sidebar/footer/SidebarFooterDefault.tsx
@@ -26,8 +26,8 @@ const SidebarFooterDefault = () => {
 			<SidebarDivider />
 			<Box
 				is='footer'
-				pb={12}
-				pi={16}
+				paddingBlock={12}
+				paddingInline={16}
 				height='x48'
 				width='auto'
 				className={sidebarFooterStyle}
diff --git a/apps/meteor/client/sidebar/footer/SidebarFooterWatermark.tsx b/apps/meteor/client/sidebar/footer/SidebarFooterWatermark.tsx
index 3dcff6236ac1d..bc2fe80b3878f 100644
--- a/apps/meteor/client/sidebar/footer/SidebarFooterWatermark.tsx
+++ b/apps/meteor/client/sidebar/footer/SidebarFooterWatermark.tsx
@@ -26,12 +26,12 @@ export const SidebarFooterWatermark = () => {
 	}
 
 	return (
-		<Box pi={16} pbe={8}>
+		<Box paddingInline={16} paddingBlockEnd={8}>
 			<Box is='a' href={links.rocketChat} target='_blank' rel='noopener noreferrer'>
-				<Box fontScale='micro' color='hint' pbe={4}>
+				<Box fontScale='micro' color='hint' paddingBlockEnd={4}>
 					{t('Powered_by_RocketChat')}
 				</Box>
-				<Box fontScale='micro' color='pure-white' pbe={4}>
+				<Box fontScale='micro' color='pure-white' paddingBlockEnd={4}>
 					{licenseName.data}
 				</Box>
 			</Box>
diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx
index 7bec2a06cee53..e20822d6589bf 100644
--- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx
+++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomList.tsx
@@ -60,7 +60,7 @@ const FederatedRoomList = ({ serverName, roomName, count }: FederatedRoomListPro
 
 	const flattenedData = data?.pages.flatMap((page) => page.rooms);
 	return (
-		<Box is='ul' overflow='hidden' height='356px' flexGrow={1} flexShrink={0} mi={-24}>
+		<Box is='ul' overflow='hidden' height='356px' flexGrow={1} flexShrink={0} marginInline={-24}>
 			<VirtualizedScrollbars>
 				<Virtuoso
 					data={flattenedData || []}
diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListItem.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListItem.tsx
index d2610a77e09ba..4f11d9b3fc88d 100644
--- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListItem.tsx
+++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListItem.tsx
@@ -24,8 +24,8 @@ const FederatedRoomListItem = ({
 	const { t } = useTranslation();
 
 	return (
-		<Box mb={16} pi={24} is='li' display='flex' flexDirection='column' w='full' name={canonicalAlias}>
-			<Box display='flex' flexDirection='row' justifyContent='space-between' alignItems='center' mbe={4}>
+		<Box marginBlock={16} paddingInline={24} is='li' display='flex' flexDirection='column' width='full' name={canonicalAlias}>
+			<Box display='flex' flexDirection='row' justifyContent='space-between' alignItems='center' marginBlockEnd={4}>
 				<Box flexGrow={1} flexShrink={1} fontScale='p1' fontWeight='bold' title={name} withTruncatedText>
 					{name}
 				</Box>
@@ -44,15 +44,15 @@ const FederatedRoomListItem = ({
 			</Box>
 
 			{topic && (
-				<Box is='p' fontScale='c1' mb={4} maxHeight='x120' overflow='hidden' withTruncatedText className={[clampLine]}>
+				<Box is='p' fontScale='c1' marginBlock={4} maxHeight='x120' overflow='hidden' withTruncatedText className={[clampLine]}>
 					{topic}
 				</Box>
 			)}
 
-			<Box mbs={4} fontScale='micro' fontWeight='bolder' verticalAlign='top'>
+			<Box marginBlockStart={4} fontScale='micro' fontWeight='bolder' verticalAlign='top'>
 				{canonicalAlias}{' '}
 				<Box color='hint' is='span' verticalAlign='top'>
-					<Icon name='user' size='x12' mbe={2} />
+					<Icon name='user' size='x12' marginBlockEnd={2} />
 					{joinedMembers}
 				</Box>
 			</Box>
diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx
index f78f98abe3c59..2a0c567a4e608 100644
--- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx
+++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationManageServerModal.tsx
@@ -96,7 +96,7 @@ const MatrixFederationAddServerModal = ({ onClickClose }: MatrixFederationAddSer
 									setErrorKey(undefined);
 								}
 							}}
-							mie={4}
+							marginInlineEnd={4}
 						/>
 						<Button onClick={() => addServer()} primary loading={isPending}>
 							{t('Add')}
@@ -105,7 +105,7 @@ const MatrixFederationAddServerModal = ({ onClickClose }: MatrixFederationAddSer
 					{isError && errorKey && <FieldError>{t(errorKey)}</FieldError>}
 					<FieldHint>{t('Federation_Example_matrix_server')}</FieldHint>
 				</Field>
-				<Divider mb={16} />
+				<Divider marginBlock={16} />
 				{!isLoadingServerList && data?.servers && <MatrixFederationRemoveServerList servers={data.servers} />}
 			</ModalContent>
 			<ModalFooter>
diff --git a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx
index bb769300c715d..98c9563e2301d 100644
--- a/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx
+++ b/apps/meteor/client/sidebar/header/MatrixFederationSearch/MatrixFederationSearchModalContent.tsx
@@ -45,7 +45,7 @@ const MatrixFederationSearchModalContent = ({ defaultSelectedServer, servers }:
 	return (
 		<>
 			<Box display='flex' flexDirection='row'>
-				<Box mie={4} flexGrow={0} flexShrink={4}>
+				<Box marginInlineEnd={4} flexGrow={0} flexShrink={4}>
 					<Select options={serverOptions} value={serverName} onChange={(value) => setServerName(String(value))} />
 				</Box>
 				<TextInput
@@ -56,7 +56,7 @@ const MatrixFederationSearchModalContent = ({ defaultSelectedServer, servers }:
 					onChange={(e: ChangeEvent<HTMLInputElement>) => setRoomName(e.currentTarget.value)}
 				/>
 			</Box>
-			<Box is='a' display='flex' flexDirection='row' mbe={16} onClick={manageServers}>
+			<Box is='a' display='flex' flexDirection='row' marginBlockEnd={16} onClick={manageServers}>
 				{t('Manage_server_list')}
 			</Box>
 			<FederatedRoomListErrorBoundary>
diff --git a/apps/meteor/client/sidebar/sections/NowPlayingSection.tsx b/apps/meteor/client/sidebar/sections/NowPlayingSection.tsx
index 00064fc923f42..59406a200fccf 100644
--- a/apps/meteor/client/sidebar/sections/NowPlayingSection.tsx
+++ b/apps/meteor/client/sidebar/sections/NowPlayingSection.tsx
@@ -38,7 +38,7 @@ const NowPlayingSection = () => {
 
 	return (
 		<SidebarCard>
-			<Box display='flex' alignItems='center' justifyContent='space-between' mbe={10} style={{ gap: 8 }}>
+			<Box display='flex' alignItems='center' justifyContent='space-between' marginBlockEnd={10} style={{ gap: 8 }}>
 				<Box
 					display='flex'
 					alignItems='center'
diff --git a/apps/meteor/client/sidebar/sections/SidebarCard.tsx b/apps/meteor/client/sidebar/sections/SidebarCard.tsx
index ec475e3f5f36d..0decc84a3e9a8 100644
--- a/apps/meteor/client/sidebar/sections/SidebarCard.tsx
+++ b/apps/meteor/client/sidebar/sections/SidebarCard.tsx
@@ -8,7 +8,15 @@ export type SidebarCardProps = { children: ReactNode };
  * bordered container in the sidebar tint.
  */
 const SidebarCard = ({ children }: SidebarCardProps) => (
-	<Box m={8} p={10} borderRadius='x8' borderWidth='default' borderStyle='solid' borderColor='stroke-light' backgroundColor='surface-tint'>
+	<Box
+		margin={8}
+		padding={10}
+		borderRadius='x8'
+		borderWidth='default'
+		borderStyle='solid'
+		borderColor='stroke-light'
+		backgroundColor='surface-tint'
+	>
 		{children}
 	</Box>
 );
diff --git a/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx b/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx
index ac876da527ed2..36bb1da5b16a7 100644
--- a/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx
+++ b/apps/meteor/client/views/account/accessibility/AccessibilityPage.tsx
@@ -81,9 +81,18 @@ const AccessibilityPage = () => {
 		<Page>
 			<PageHeader title={t('Accessibility_and_Appearance')} />
 			<PageScrollableContentWithShadow>
-				<Box is='form' id={pageFormId} onSubmit={handleSubmit(handleSaveData)} maxWidth='x600' w='full' alignSelf='center' mb={40} mi={36}>
-					<Box fontScale='p1' mbe={24}>
-						<Box pb={16} is='p'>
+				<Box
+					is='form'
+					id={pageFormId}
+					onSubmit={handleSubmit(handleSaveData)}
+					maxWidth='x600'
+					width='full'
+					alignSelf='center'
+					marginBlock={40}
+					marginInline={36}
+				>
+					<Box fontScale='p1' marginBlockEnd={24}>
+						<Box paddingBlock={16} is='p'>
 							{t('Accessibility_activation')}
 						</Box>
 						<p id={linkListId}>{t('Learn_more_about_accessibility')}</p>
@@ -103,7 +112,11 @@ const AccessibilityPage = () => {
 						<AccordionItem defaultExpanded={true} title={t('Theme')}>
 							{themes.map(({ id, title, description }, index) => {
 								return (
-									<Field key={id} pbe={themes.length - 1 ? undefined : 'x28'} pbs={index === 0 ? undefined : 'x28'}>
+									<Field
+										key={id}
+										paddingBlockEnd={themes.length - 1 ? undefined : 'x28'}
+										paddingBlockStart={index === 0 ? undefined : 'x28'}
+									>
 										<FieldRow>
 											<FieldLabel display='flex' alignItems='center'>
 												{t(title)}
@@ -116,7 +129,7 @@ const AccessibilityPage = () => {
 												)}
 											/>
 										</FieldRow>
-										<FieldHint mbs={12} style={{ whiteSpace: 'break-spaces' }}>
+										<FieldHint marginBlockStart={12} style={{ whiteSpace: 'break-spaces' }}>
 											{t(description)}
 										</FieldHint>
 									</Field>
@@ -129,11 +142,11 @@ const AccessibilityPage = () => {
 									<legend>{t('Adjustable_layout')}</legend>
 								</VisuallyHidden>
 								<Field>
-									<FieldLabel mbe={12}>{t('Font_size')}</FieldLabel>
+									<FieldLabel marginBlockEnd={12}>{t('Font_size')}</FieldLabel>
 									<FieldRow>
 										<Controller control={control} name='fontSize' render={({ field }) => <Select {...field} options={fontSizes(t)} />} />
 									</FieldRow>
-									<FieldDescription mb={12}>{t('Adjustable_font_size_description')}</FieldDescription>
+									<FieldDescription marginBlock={12}>{t('Adjustable_font_size_description')}</FieldDescription>
 								</Field>
 								<Field>
 									<FieldRow>
@@ -148,7 +161,7 @@ const AccessibilityPage = () => {
 										className={css`
 											white-space: break-spaces;
 										`}
-										mb={12}
+										marginBlock={12}
 									>
 										{t('Mentions_with_@_symbol_description')}
 									</FieldDescription>
diff --git a/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.tsx b/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.tsx
index 87510c230154d..d47d110939555 100644
--- a/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.tsx
+++ b/apps/meteor/client/views/account/featurePreview/AccountFeaturePreviewPage.tsx
@@ -78,7 +78,7 @@ const AccountFeaturePreviewPage = () => {
 		<Page>
 			<PageHeader title={t('Feature_preview')} />
 			<PageScrollableContentWithShadow>
-				<Box maxWidth='x600' w='full' alignSelf='center'>
+				<Box maxWidth='x600' width='full' alignSelf='center'>
 					{featuresPreview.length === 0 && (
 						<States>
 							<StatesIcon name='magnifier' />
@@ -110,9 +110,11 @@ const AccountFeaturePreviewPage = () => {
 																disabled={feature.disabled}
 															/>
 														</FieldRow>
-														{feature.description && <FieldHint mbs={12}>{t(feature.description)}</FieldHint>}
+														{feature.description && <FieldHint marginBlockStart={12}>{t(feature.description)}</FieldHint>}
 													</Field>
-													{feature.imageUrl && <Box is='img' width='100%' height='auto' mbs={16} src={feature.imageUrl} alt='' />}
+													{feature.imageUrl && (
+														<Box is='img' width='100%' height='auto' marginBlockStart={16} src={feature.imageUrl} alt='' />
+													)}
 												</Fragment>
 											))}
 										</FieldGroup>
diff --git a/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx b/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
index f2a6a4264635a..26e4d8a1743a6 100644
--- a/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
+++ b/apps/meteor/client/views/account/integrations/AccountIntegrationsPage.tsx
@@ -45,7 +45,7 @@ const AccountIntegrationsPage = () => {
 		<Page>
 			<PageHeader title={t('Integrations')} />
 			<PageScrollableContentWithShadow>
-				<Box is='form' maxWidth='x600' w='full' alignSelf='center' onSubmit={handleSubmit(handleSubmitForm)}>
+				<Box is='form' maxWidth='x600' width='full' alignSelf='center' onSubmit={handleSubmit(handleSubmitForm)}>
 					<Field>
 						<FieldLabel>{t('WebDAV_Accounts')}</FieldLabel>
 						<FieldRow>
diff --git a/apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.tsx b/apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.tsx
index 83e3a7c56112d..544279fb27954 100644
--- a/apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.tsx
+++ b/apps/meteor/client/views/account/omnichannel/OmnichannelPreferencesPage.tsx
@@ -50,7 +50,7 @@ const OmnichannelPreferencesPage = () => {
 		<Page>
 			<PageHeader title={t('Omnichannel')} />
 			<PageScrollableContentWithShadow is='form' onSubmit={handleSubmit(handleSave)}>
-				<Box maxWidth='x600' w='full' alignSelf='center'>
+				<Box maxWidth='x600' width='full' alignSelf='center'>
 					<Accordion>
 						<FormProvider {...methods}>
 							<PreferencesGeneral />
diff --git a/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx b/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx
index 2f88a5f622149..bfc046b0f86a2 100644
--- a/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx
+++ b/apps/meteor/client/views/account/omnichannel/PreferencesConversationTranscript.tsx
@@ -24,11 +24,11 @@ const PreferencesConversationTranscript = () => {
 						<FieldLabel>
 							{t('Omnichannel_transcript_pdf')}
 							{!hasLicense && (
-								<Tag mi={4} variant='featured'>
+								<Tag marginInline={4} variant='featured'>
 									{t('Premium')}
 								</Tag>
 							)}
-							{!canSendTranscriptPDF && hasLicense && <Tag mi={4}>{t('No_permission')}</Tag>}
+							{!canSendTranscriptPDF && hasLicense && <Tag marginInline={4}>{t('No_permission')}</Tag>}
 						</FieldLabel>
 						<Controller
 							control={control}
@@ -42,7 +42,7 @@ const PreferencesConversationTranscript = () => {
 					<FieldRow>
 						<FieldLabel>
 							{t('Omnichannel_transcript_email')}
-							{!canSendTranscriptEmailPermission && <Tag mi={4}>{t('No_permission')}</Tag>}
+							{!canSendTranscriptEmailPermission && <Tag marginInline={4}>{t('No_permission')}</Tag>}
 						</FieldLabel>
 						<Controller
 							control={control}
diff --git a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx b/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx
index c4dcf0718abb4..7dee7867897be 100644
--- a/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx
+++ b/apps/meteor/client/views/account/preferences/AccountPreferencesPage.tsx
@@ -76,7 +76,7 @@ const AccountPreferencesPage = () => {
 			<PageHeader title={t('Preferences')} />
 			<PageScrollableContentWithShadow>
 				<FormProvider {...methods}>
-					<Box id={preferencesFormId} is='form' maxWidth='x600' w='full' alignSelf='center' onSubmit={handleSubmit(handleSaveData)}>
+					<Box id={preferencesFormId} is='form' maxWidth='x600' width='full' alignSelf='center' onSubmit={handleSubmit(handleSaveData)}>
 						<Accordion>
 							<PreferencesLocalizationSection />
 							<PreferencesGlobalSection />
diff --git a/apps/meteor/client/views/account/preferences/MyDataModal.tsx b/apps/meteor/client/views/account/preferences/MyDataModal.tsx
index 924a4c7372151..74e8b61419046 100644
--- a/apps/meteor/client/views/account/preferences/MyDataModal.tsx
+++ b/apps/meteor/client/views/account/preferences/MyDataModal.tsx
@@ -31,7 +31,7 @@ const MyDataModal = ({ onCancel, title, text, ...props }: MyDataModalProps) => {
 			</ModalHeader>
 			{text && (
 				<ModalContent fontScale='p2'>
-					<Box mb={8}>{text}</Box>
+					<Box marginBlock={8}>{text}</Box>
 				</ModalContent>
 			)}
 			<ModalFooter>
diff --git a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
index 826051d2b5489..d9affc30a6252 100644
--- a/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
+++ b/apps/meteor/client/views/account/preferences/PreferencesSoundSection.tsx
@@ -24,14 +24,14 @@ const PreferencesSoundSection = () => {
 			<FieldGroup>
 				<Field>
 					<FieldLabel>{t('Master_volume')}</FieldLabel>
-					<FieldHint mbe={4}>{t('Master_volume_hint')}</FieldHint>
+					<FieldHint marginBlockEnd={4}>{t('Master_volume_hint')}</FieldHint>
 					<FieldRow>
 						<Controller name='masterVolume' control={control} render={({ field }) => <Slider {...field} minValue={0} maxValue={100} />} />
 					</FieldRow>
 				</Field>
 				<Field>
 					<FieldLabel>{t('Notification_volume')}</FieldLabel>
-					<FieldHint mbe={4}>{t('Notification_volume_hint')}</FieldHint>
+					<FieldHint marginBlockEnd={4}>{t('Notification_volume_hint')}</FieldHint>
 					<FieldRow>
 						<Controller
 							name='notificationsSoundVolume'
@@ -53,7 +53,7 @@ const PreferencesSoundSection = () => {
 				</Field>
 				<Field>
 					<FieldLabel>{t('Call_ringer_volume')}</FieldLabel>
-					<FieldHint mbe={4}>{t('Call_ringer_volume_hint')}</FieldHint>
+					<FieldHint marginBlockEnd={4}>{t('Call_ringer_volume_hint')}</FieldHint>
 					<FieldRow>
 						<Controller
 							name='voipRingerVolume'
diff --git a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
index a2e49530705fe..f4904d084fd2f 100644
--- a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
+++ b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
@@ -244,7 +244,7 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>) => {
 						{!canChangeUsername && <FieldHint>{t('Username_Change_Disabled')}</FieldHint>}
 					</Field>
 				</Box>
-				<Divider mbs={24} mbe={0} />
+				<Divider marginBlockStart={24} marginBlockEnd={0} />
 				<Field>
 					<FieldLabel>{t('Status')}</FieldLabel>
 					<FieldRow>
@@ -301,7 +301,7 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>) => {
 						/>
 					</FieldRow>
 					{statusDuration === 'custom' && (
-						<Box display='flex' mi='neg-x4' mbs={8}>
+						<Box display='flex' marginInline='neg-x4' marginBlockStart={8}>
 							<Margins inline={4}>
 								<Controller
 									control={control}
@@ -338,7 +338,7 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>) => {
 					{errors.statusDuration && <FieldError>{errors.statusDuration.message}</FieldError>}
 					<FieldHint>{t('Status_new_status_warning')}</FieldHint>
 				</Field>
-				<Divider mbs={24} mbe={0} />
+				<Divider marginBlockStart={24} marginBlockEnd={0} />
 				<Field>
 					<FieldLabel>{t('Nickname')}</FieldLabel>
 					<FieldRow>
diff --git a/apps/meteor/client/views/account/profile/AccountProfilePage.tsx b/apps/meteor/client/views/account/profile/AccountProfilePage.tsx
index 58901885149ef..70fbc245f6235 100644
--- a/apps/meteor/client/views/account/profile/AccountProfilePage.tsx
+++ b/apps/meteor/client/views/account/profile/AccountProfilePage.tsx
@@ -119,11 +119,11 @@ const AccountProfilePage = () => {
 		<Page>
 			<PageHeader title={t('Profile')} />
 			<PageScrollableContentWithShadow>
-				<Box maxWidth='600px' w='full' alignSelf='center'>
+				<Box maxWidth='600px' width='full' alignSelf='center'>
 					<FormProvider {...methods}>
 						<AccountProfileForm id={profileFormId} />
 					</FormProvider>
-					<Box mb={12}>
+					<Box marginBlock={12}>
 						<ButtonGroup stretch vertical={isMobile}>
 							<Button onClick={handleLogoutOtherLocations} flexGrow={0} loading={loggingOut}>
 								{t('Logout_Others')}
diff --git a/apps/meteor/client/views/account/profile/ActionConfirmModal.tsx b/apps/meteor/client/views/account/profile/ActionConfirmModal.tsx
index 85d9dfce59a7c..9933d6b26d2ac 100644
--- a/apps/meteor/client/views/account/profile/ActionConfirmModal.tsx
+++ b/apps/meteor/client/views/account/profile/ActionConfirmModal.tsx
@@ -43,7 +43,7 @@ const ActionConfirmModal = ({ isPassword, onConfirm, onCancel }: ActionConfirmMo
 			title={t('Delete_account?')}
 			confirmText={t('Delete_account')}
 		>
-			<FieldGroup w='full'>
+			<FieldGroup width='full'>
 				<Field>
 					<FieldLabel required htmlFor={credentialFieldId}>
 						{isPassword ? t('Enter_your_password_to_delete_your_account') : t('Enter_your_username_to_delete_your_account')}
diff --git a/apps/meteor/client/views/account/security/AccountSecurityPage.tsx b/apps/meteor/client/views/account/security/AccountSecurityPage.tsx
index 7ff059f1c5bba..45b51b520689a 100644
--- a/apps/meteor/client/views/account/security/AccountSecurityPage.tsx
+++ b/apps/meteor/client/views/account/security/AccountSecurityPage.tsx
@@ -44,7 +44,7 @@ const AccountSecurityPage = () => {
 		<Page>
 			<PageHeader title={t('Security')} />
 			<PageScrollableContentWithShadow>
-				<Box maxWidth='x600' w='full' alignSelf='center' color='default'>
+				<Box maxWidth='x600' width='full' alignSelf='center' color='default'>
 					{allowPasswordChange && (
 						<FormProvider {...methods}>
 							<Accordion>
@@ -58,7 +58,7 @@ const AccountSecurityPage = () => {
 						{(twoFactorTOTP || showEmailTwoFactor) && twoFactorEnabled && (
 							<AccordionItem defaultExpanded={require2faSetup} title={t('Two Factor Authentication')}>
 								{require2faSetup && (
-									<Callout type='warning' title={t('Enable_two-factor_authentication')} mbe='24px'>
+									<Callout type='warning' title={t('Enable_two-factor_authentication')} marginBlockEnd='24px'>
 										{t('Enable_two-factor_authentication_callout_description')}
 									</Callout>
 								)}
diff --git a/apps/meteor/client/views/account/security/BackupCodesModal.tsx b/apps/meteor/client/views/account/security/BackupCodesModal.tsx
index 165f0652444a3..389e0c218f067 100644
--- a/apps/meteor/client/views/account/security/BackupCodesModal.tsx
+++ b/apps/meteor/client/views/account/security/BackupCodesModal.tsx
@@ -17,13 +17,13 @@ const BackupCodesModal = ({ codes, onClose }: BackupCodesModalProps) => {
 
 	return (
 		<GenericModal title={t('Backup_codes')} onCancel={onClose} cancelText={t('Close')}>
-			<Box mb={8} withRichContent>
+			<Box marginBlock={8} withRichContent>
 				{t('Make_sure_you_have_a_copy_of_your_codes_1')}
 			</Box>
-			<CodeSnippet buttonText={hasCopied ? t('Copied') : t('Copy')} buttonDisabled={hasCopied} onClick={() => copy()} mbs={8}>
+			<CodeSnippet buttonText={hasCopied ? t('Copied') : t('Copy')} buttonDisabled={hasCopied} onClick={() => copy()} marginBlockStart={8}>
 				{codesText}
 			</CodeSnippet>
-			<Box mb={8} withRichContent>
+			<Box marginBlock={8} withRichContent>
 				{t('Make_sure_you_have_a_copy_of_your_codes_2')}
 			</Box>
 		</GenericModal>
diff --git a/apps/meteor/client/views/account/security/ChangePassphrase.tsx b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
index 6a4e2eada8223..a7f7c5c676e9d 100644
--- a/apps/meteor/client/views/account/security/ChangePassphrase.tsx
+++ b/apps/meteor/client/views/account/security/ChangePassphrase.tsx
@@ -101,11 +101,11 @@ export const ChangePassphrase = () => {
 			<Box is='p' fontScale='p1' id={e2ePasswordExplanationId}>
 				<Trans i18nKey='E2E_Encryption_Password_Explanation' />
 			</Box>
-			<Box mbs={36} w='full'>
-				<Box is='h3' fontScale='h4' mbe={12}>
+			<Box marginBlockStart={36} width='full'>
+				<Box is='h3' fontScale='h4' marginBlockEnd={12}>
 					{t('Change_E2EE_password')}
 				</Box>
-				<FieldGroup w='full'>
+				<FieldGroup width='full'>
 					<Field>
 						<FieldLabel htmlFor={passphraseId}>{t('New_E2EE_password')}</FieldLabel>
 						<FieldRow>
@@ -192,7 +192,7 @@ export const ChangePassphrase = () => {
 						</Field>
 					)}
 				</FieldGroup>
-				<Button primary disabled={!(keysExist && valid && isValid)} onClick={handleSubmit(handleSave)} mbs={12}>
+				<Button primary disabled={!(keysExist && valid && isValid)} onClick={handleSubmit(handleSave)} marginBlockStart={12}>
 					{t('Save_changes')}
 				</Button>
 			</Box>
diff --git a/apps/meteor/client/views/account/security/EndToEnd.tsx b/apps/meteor/client/views/account/security/EndToEnd.tsx
index 18e9acf72c125..0ce90c315ada9 100644
--- a/apps/meteor/client/views/account/security/EndToEnd.tsx
+++ b/apps/meteor/client/views/account/security/EndToEnd.tsx
@@ -7,7 +7,7 @@ const EndToEnd = () => {
 	return (
 		<Box display='flex' flexDirection='column' alignItems='flex-start'>
 			<ChangePassphrase />
-			<Divider mb={36} width='full' />
+			<Divider marginBlock={36} width='full' />
 			<ResetPassphrase />
 		</Box>
 	);
diff --git a/apps/meteor/client/views/account/security/ResetPassphrase.tsx b/apps/meteor/client/views/account/security/ResetPassphrase.tsx
index 4160047bbd383..150c70ea3e788 100644
--- a/apps/meteor/client/views/account/security/ResetPassphrase.tsx
+++ b/apps/meteor/client/views/account/security/ResetPassphrase.tsx
@@ -8,10 +8,10 @@ export const ResetPassphrase = () => {
 	const resetE2EPassword = useResetE2EPasswordMutation();
 	return (
 		<>
-			<Box is='h4' fontScale='h4' mbe={12}>
+			<Box is='h4' fontScale='h4' marginBlockEnd={12}>
 				{t('Reset_E2EE_password')}
 			</Box>
-			<Box is='p' fontScale='p1' mbe={12}>
+			<Box is='p' fontScale='p1' marginBlockEnd={12}>
 				{t('Reset_E2EE_password_description')}
 			</Box>
 			<Button onClick={() => resetE2EPassword.mutate()}>{t('Reset_E2EE_password')}</Button>
diff --git a/apps/meteor/client/views/account/security/TwoFactorEmail.tsx b/apps/meteor/client/views/account/security/TwoFactorEmail.tsx
index 5929662999cb2..5bdd93b93eeab 100644
--- a/apps/meteor/client/views/account/security/TwoFactorEmail.tsx
+++ b/apps/meteor/client/views/account/security/TwoFactorEmail.tsx
@@ -38,7 +38,7 @@ const TwoFactorEmail = (props: ComponentProps<typeof Box>) => {
 	);
 
 	return (
-		<Box display='flex' flexDirection='column' alignItems='flex-start' mbs={16} {...props}>
+		<Box display='flex' flexDirection='column' alignItems='flex-start' marginBlockStart={16} {...props}>
 			<Margins blockEnd={8}>
 				<Field>
 					<FieldRow>
diff --git a/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx b/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx
index 87e012361cf41..89d7a95f8e606 100644
--- a/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx
+++ b/apps/meteor/client/views/account/security/TwoFactorTOTP.tsx
@@ -154,11 +154,11 @@ const TwoFactorTOTP = (props: TwoFactorTOTPProps) => {
 						<Box>{t('Scan_QR_code')}</Box>
 						<Box>{t('Scan_QR_code_alternative_s')}</Box>
 						<TextCopy text={totpSecret || ''} />
-						<Box mis='-16px' mb='-16px' is='img' size='x200' src={qrCode} aria-hidden='true' />
+						<Box marginInlineStart='-16px' marginBlock='-16px' is='img' size='x200' src={qrCode} aria-hidden='true' />
 						<Field>
 							<FieldLabel htmlFor={totpCodeId}>{t('Enter_code_provided_by_authentication_app')}</FieldLabel>
 							<FieldRow>
-								<TextInput id={totpCodeId} mie='8px' {...register('authCode')} />
+								<TextInput id={totpCodeId} marginInlineEnd='8px' {...register('authCode')} />
 								<Button primary onClick={handleSubmit(handleVerifyCode)}>
 									{t('Verify')}
 								</Button>
@@ -168,7 +168,7 @@ const TwoFactorTOTP = (props: TwoFactorTOTPProps) => {
 				)}
 				{totpEnabled && (
 					<>
-						<Box fontScale='p2m' mbs={8}>
+						<Box fontScale='p2m' marginBlockStart={8}>
 							{t('Backup_codes')}
 						</Box>
 						<Box color='font-secondary-info'>{t('You_have_n_codes_remaining', { number: codesRemaining })}</Box>
diff --git a/apps/meteor/client/views/account/tokens/AccountTokensTable/AddToken.tsx b/apps/meteor/client/views/account/tokens/AccountTokensTable/AddToken.tsx
index 087408b2d9496..980db9c382a50 100644
--- a/apps/meteor/client/views/account/tokens/AccountTokensTable/AddToken.tsx
+++ b/apps/meteor/client/views/account/tokens/AccountTokensTable/AddToken.tsx
@@ -67,7 +67,7 @@ const AddToken = ({ reload }: AddTokenProps) => {
 	const nameErrorId = useId();
 
 	return (
-		<FieldGroup is='form' onSubmit={handleSubmit(handleAddToken)} mb={8}>
+		<FieldGroup is='form' onSubmit={handleSubmit(handleAddToken)} marginBlock={8}>
 			<Field>
 				<FieldRow>
 					<Margins inlineEnd={4}>
diff --git a/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.stories.tsx b/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.stories.tsx
index 9976e5f989612..3fb10c4131bde 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.stories.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.stories.tsx
@@ -41,7 +41,7 @@ export const NewAttribute: StoryObj<typeof AttributesForm> = {
 
 			return (
 				<FormProvider {...methods}>
-					<Contextualbar width='400px' p={16}>
+					<Contextualbar width='400px' padding={16}>
 						{fn()}
 					</Contextualbar>
 				</FormProvider>
@@ -67,7 +67,7 @@ export const WithLockedAttributes: StoryObj<typeof AttributesForm> = {
 
 			return (
 				<FormProvider {...methods}>
-					<Contextualbar width='400px' p={16}>
+					<Contextualbar width='400px' padding={16}>
 						{fn()}
 					</Contextualbar>
 				</FormProvider>
diff --git a/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.tsx b/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.tsx
index 5401b1e844fbe..3a677235fdd63 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesForm.tsx
@@ -144,7 +144,13 @@ const AttributesForm = ({ onSave, onCancel, description }: AttributesFormProps)
 									})}
 								/>
 								{index !== 0 && (
-									<IconButton mis={8} small title={t('ABAC_Remove_attribute')} icon='trash' onClick={() => removeLockedAttribute(index)} />
+									<IconButton
+										marginInlineStart={8}
+										small
+										title={t('ABAC_Remove_attribute')}
+										icon='trash'
+										onClick={() => removeLockedAttribute(index)}
+									/>
 								)}
 							</FieldRow>
 							{errors.lockedAttributes?.[index]?.value && (
@@ -189,7 +195,7 @@ const AttributesForm = ({ onSave, onCancel, description }: AttributesFormProps)
 									})}
 								/>
 								{(index !== 0 || lockedAttributesFields.length > 0) && (
-									<IconButton mis={8} small title={t('ABAC_Remove_attribute')} icon='trash' onClick={() => remove(index)} />
+									<IconButton marginInlineStart={8} small title={t('ABAC_Remove_attribute')} icon='trash' onClick={() => remove(index)} />
 								)}
 							</FieldRow>
 							{errors.attributeValues?.[index]?.value && (
@@ -200,7 +206,7 @@ const AttributesForm = ({ onSave, onCancel, description }: AttributesFormProps)
 						</Fragment>
 					))}
 					<Button
-						mb={8}
+						marginBlock={8}
 						onClick={() => append({ value: '' })}
 						// Checking for values since rhf does consider the newly added field as dirty after an append() call
 						disabled={!!getAttributeValuesError() || attributeValues?.some((value: { value: string }) => value?.value === '')}
diff --git a/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesPage.tsx b/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesPage.tsx
index 9f2af5bdcbe7c..065a5eeae533e 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesPage.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACAttributesTab/AttributesPage.tsx
@@ -65,7 +65,7 @@ const AttributesPage = () => {
 						value={text}
 						onChange={(e) => setText((e.target as HTMLInputElement).value)}
 					/>
-					<Button onClick={handleNewAttribute} primary mis={8} disabled={!isABACAvailable}>
+					<Button onClick={handleNewAttribute} primary marginInlineStart={8} disabled={!isABACAvailable}>
 						{t('ABAC_New_attribute')}
 					</Button>
 				</Box>
@@ -80,7 +80,7 @@ const AttributesPage = () => {
 						<GenericTableHeader>
 							<GenericTableHeaderCell>{t('Name')}</GenericTableHeaderCell>
 							<GenericTableHeaderCell>{t('Value')}</GenericTableHeaderCell>
-							<GenericTableHeaderCell key='spacer' w={40} />
+							<GenericTableHeaderCell key='spacer' width={40} />
 						</GenericTableHeader>
 						<GenericTableBody>
 							{data?.attributes?.map((attribute) => (
diff --git a/apps/meteor/client/views/admin/ABAC/ABACLogsTab/LogsPage.tsx b/apps/meteor/client/views/admin/ABAC/ABACLogsTab/LogsPage.tsx
index fe99a9d3cb7e0..8fefca831a864 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACLogsTab/LogsPage.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACLogsTab/LogsPage.tsx
@@ -185,7 +185,7 @@ const LogsPage = () => {
 									<GenericTableRow key={eventInfo.id}>
 										<GenericTableCell withTruncatedText>
 											{eventInfo.userAvatar && (
-												<Box is='span' mie={4}>
+												<Box is='span' marginInlineEnd={4}>
 													{eventInfo.userAvatar}
 												</Box>
 											)}
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomForm.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomForm.tsx
index 7accabc3c649a..e6f3f3b2aba84 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomForm.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomForm.tsx
@@ -112,7 +112,7 @@ const RoomForm = ({ onClose, onSave, roomInfo, setSelectedRoomLabel, redacted =
 					)}
 				</Field>
 				{redacted && (
-					<Box mbe={16}>
+					<Box marginBlockEnd={16}>
 						<Callout type='warning' title={t('ABAC_Attributes_Redacted')}>
 							{t('ABAC_Attributes_Redacted_Description')}
 						</Callout>
@@ -120,7 +120,7 @@ const RoomForm = ({ onClose, onSave, roomInfo, setSelectedRoomLabel, redacted =
 				)}
 				<RoomFormAttributeFields fields={fields} remove={remove} disabled={redacted} />
 				<Button
-					w='full'
+					width='full'
 					disabled={redacted || fields.length >= 10}
 					onClick={() => {
 						append({ key: '', values: [] });
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx
index 66f332b82fe7c..6c2247dce3a80 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeField.tsx
@@ -65,7 +65,7 @@ const RoomFormAttributeField = ({
 	}, [attributeList, keyField.value]);
 
 	return (
-		<Box display='flex' flexDirection='column' w='full'>
+		<Box display='flex' flexDirection='column' width='full'>
 			<FieldRow>
 				<SelectFiltered
 					{...keyField}
@@ -76,7 +76,7 @@ const RoomFormAttributeField = ({
 					aria-invalid={keyFieldState.error ? 'true' : 'false'}
 					aria-describedby={keyFieldState.error ? `${keyField.name}-error` : undefined}
 					placeholder={t('ABAC_Search_Attribute')}
-					mbe={4}
+					marginBlockEnd={4}
 					error={keyFieldState.error?.message}
 					withTruncatedText
 					disabled={disabled}
@@ -112,7 +112,7 @@ const RoomFormAttributeField = ({
 				</FieldError>
 			)}
 			{index !== 0 && (
-				<Button onClick={onRemove} title={t('Remove')} mbs={8} disabled={disabled}>
+				<Button onClick={onRemove} title={t('Remove')} marginBlockStart={8} disabled={disabled}>
 					{t('Remove')}
 				</Button>
 			)}
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx
index 59b75596acdb4..c15ec03f69590 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAttributeFields.tsx
@@ -24,7 +24,7 @@ const RoomFormAttributeFields = ({ fields, remove, disabled = false }: RoomFormA
 	return (
 		<>
 			{isExternalAttributeStore && (
-				<Box mbe={8} color='annotation' fontSize='p2'>
+				<Box marginBlockEnd={8} color='annotation' fontSize='p2'>
 					{t('ABAC_Picker_External_Store_Helper')}
 				</Box>
 			)}
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAutocomplete.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAutocomplete.tsx
index e2cbaa1d1753c..a3c18232dddd2 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAutocomplete.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomFormAutocomplete.tsx
@@ -45,7 +45,7 @@ const RoomFormAutocomplete = ({ value, onSelectedRoom, ...props }: RoomFormAutoc
 			filter={filter}
 			setFilter={setFilter}
 			renderSelected={({ selected: { label } }) => (
-				<Box margin='none' mi={2}>
+				<Box margin='none' marginInline={2}>
 					{label?.name}
 				</Box>
 			)}
diff --git a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomsPage.tsx b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomsPage.tsx
index d705b5f3daa3d..c018bc1e16ece 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomsPage.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACRoomsTab/RoomsPage.tsx
@@ -77,7 +77,7 @@ const RoomsPage = () => {
 						value={text}
 						onChange={(e) => setText((e.target as HTMLInputElement).value)}
 					/>
-					<Box pis={8} maxWidth={200}>
+					<Box paddingInlineStart={8} maxWidth={200}>
 						<Select
 							options={[
 								['all', t('All'), true],
@@ -89,7 +89,7 @@ const RoomsPage = () => {
 							onChange={(value) => setFilterType(value as 'all' | 'roomName' | 'attribute' | 'value')}
 						/>
 					</Box>
-					<Button onClick={handleNewAttribute} primary mis={8} disabled={isABACAvailable !== true}>
+					<Button onClick={handleNewAttribute} primary marginInlineStart={8} disabled={isABACAvailable !== true}>
 						{t('Add_room')}
 					</Button>
 				</Box>
@@ -106,7 +106,7 @@ const RoomsPage = () => {
 							<GenericTableHeaderCell>{t('Members')}</GenericTableHeaderCell>
 							<GenericTableHeaderCell>{t('ABAC_Attributes')}</GenericTableHeaderCell>
 							<GenericTableHeaderCell>{t('ABAC_Attribute_Values')}</GenericTableHeaderCell>
-							<GenericTableHeaderCell key='spacer' w={40} />
+							<GenericTableHeaderCell key='spacer' width={40} />
 						</GenericTableHeader>
 						<GenericTableBody>
 							{data?.rooms?.map((room) => (
diff --git a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingsPage.tsx b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingsPage.tsx
index 0d37794caefee..fd0f1e66c9e07 100644
--- a/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingsPage.tsx
+++ b/apps/meteor/client/views/admin/ABAC/ABACSettingTab/SettingsPage.tsx
@@ -14,7 +14,7 @@ const SettingsPage = () => {
 	const pdpType = useSetting('ABAC_PDP_Type', 'local');
 
 	return (
-		<Box maxWidth='x600' w='full' alignSelf='center' overflow='auto' mb={24}>
+		<Box maxWidth='x600' width='full' alignSelf='center' overflow='auto' marginBlock={24}>
 			<FieldGroup>
 				<AbacEnabledToggle hasABAC={hasABAC} />
 				<SettingField settingId='ABAC_PDP_Type' />
diff --git a/apps/meteor/client/views/admin/ABAC/AdminABACPage.tsx b/apps/meteor/client/views/admin/ABAC/AdminABACPage.tsx
index d166b1199c953..2a2234ff969c2 100644
--- a/apps/meteor/client/views/admin/ABAC/AdminABACPage.tsx
+++ b/apps/meteor/client/views/admin/ABAC/AdminABACPage.tsx
@@ -69,7 +69,7 @@ const AdminABACPage = ({ shouldShowWarning }: AdminABACPageProps) => {
 					</ButtonGroup>
 				</PageHeader>
 				{shouldShowWarning && (
-					<Box mi={24} mb={16}>
+					<Box marginInline={24} marginBlock={16}>
 						<Callout type='warning' title={t('ABAC_automatically_disabled_callout')}>
 							<Trans
 								i18nKey='ABAC_automatically_disabled_callout_description'
diff --git a/apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx b/apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx
index 1357dd7323e40..3be2d02e78f74 100644
--- a/apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx
+++ b/apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx
@@ -105,9 +105,9 @@ const AddCustomEmoji = ({ close, onChange, ...props }: AddCustomEmojiProps) => {
 					</FieldLabel>
 					{errors.emoji && <FieldError>{t('Required_field', { field: t('Custom_Emoji') })}</FieldError>}
 					{newEmojiPreview && (
-						<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='center'>
+						<Box display='flex' flexDirection='row' marginInline='neg-x4' justifyContent='center'>
 							<Margins inline={4}>
-								<Box is='img' objectFit='contain' w='x120' h='x120' src={newEmojiPreview} />
+								<Box is='img' objectFit='contain' width='x120' height='x120' src={newEmojiPreview} />
 							</Margins>
 						</Box>
 					)}
diff --git a/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx b/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
index 12f663ca8ba78..b3aba8668e7ef 100644
--- a/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
+++ b/apps/meteor/client/views/admin/customEmoji/CustomEmoji.tsx
@@ -46,10 +46,10 @@ const CustomEmoji = ({ onClick, reload }: CustomEmojiProps) => {
 
 	const headers = useMemo(
 		() => [
-			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name' w='x200'>
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name' width='x200'>
 				{t('Name')}
 			</GenericTableHeaderCell>,
-			<GenericTableHeaderCell key='aliases' w='x200'>
+			<GenericTableHeaderCell key='aliases' width='x200'>
 				{t('Aliases')}
 			</GenericTableHeaderCell>,
 		],
diff --git a/apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx b/apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx
index 52f45638988cb..979e6ec8b48ea 100644
--- a/apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx
+++ b/apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx
@@ -173,9 +173,9 @@ const EditCustomEmoji = ({ close, onChange, data, ...props }: EditCustomEmojiPro
 							<IconButton icon='upload' secondary onClick={clickUpload} />
 						</FieldLabel>
 						{newEmojiPreview && (
-							<Box display='flex' flexDirection='row' mbs='none' justifyContent='center'>
+							<Box display='flex' flexDirection='row' marginBlockStart='none' justifyContent='center'>
 								<Margins inline={4}>
-									<Box is='img' objectFit='contain' w='x120' h='x120' src={newEmojiPreview} />
+									<Box is='img' objectFit='contain' width='x120' height='x120' src={newEmojiPreview} />
 								</Margins>
 							</Box>
 						)}
@@ -189,7 +189,7 @@ const EditCustomEmoji = ({ close, onChange, data, ...props }: EditCustomEmojiPro
 						{t('Save')}
 					</Button>
 				</ButtonGroup>
-				<Box mbs={8}>
+				<Box marginBlockStart={8}>
 					<ButtonGroup stretch>
 						<Button icon='trash' danger onClick={handleDeleteButtonClick}>
 							{t('Delete')}
diff --git a/apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx b/apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx
index 0fed65d0aa76c..887db137ad253 100644
--- a/apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx
+++ b/apps/meteor/client/views/admin/customEmoji/EditCustomEmojiWithData.tsx
@@ -29,7 +29,7 @@ const EditCustomEmojiWithData = ({ _id, onChange, close, ...props }: EditCustomE
 	});
 
 	if (isPending) {
-		return <FormSkeleton pi={20} />;
+		return <FormSkeleton paddingInline={20} />;
 	}
 
 	if (error || !data || !data.emojis || data.emojis.update.length < 1) {
diff --git a/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx b/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx
index 9aaa96728f763..84d87065bb6cb 100644
--- a/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx
+++ b/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx
@@ -93,7 +93,7 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr
 				</Field>
 				<Field>
 					<FieldLabel alignSelf='stretch'>{t('Sound File')}</FieldLabel>
-					<Box display='flex' flexDirection='row' mbs='none' alignItems='center'>
+					<Box display='flex' flexDirection='row' marginBlockStart='none' alignItems='center'>
 						<Margins inline={4}>
 							<IconButton secondary small icon='upload' onClick={clickUpload} />
 							{sound?.name || t('None')}
diff --git a/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.stories.tsx b/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.stories.tsx
index b8a293643ccaa..daada06ccc94f 100644
--- a/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.stories.tsx
+++ b/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.stories.tsx
@@ -10,7 +10,7 @@ export default {
 	component: CustomSoundsTable,
 	decorators: [
 		(fn) => (
-			<PageContent mb='neg-x8'>
+			<PageContent marginBlock='neg-x8'>
 				<Margins block={8}>{fn()}</Margins>
 			</PageContent>
 		),
diff --git a/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx b/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx
index dbf6fef7b862a..70f928134e763 100644
--- a/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx
+++ b/apps/meteor/client/views/admin/customSounds/CustomSoundsTable/CustomSoundsTable.tsx
@@ -59,7 +59,7 @@ const CustomSoundsTable = ({ reload, onClick }: CustomSoundsTableProps) => {
 			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
 				{t('Name')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell w='x40' key='action' />
+			<GenericTableHeaderCell width='x40' key='action' />
 		</>
 	);
 
diff --git a/apps/meteor/client/views/admin/customSounds/EditCustomSound.tsx b/apps/meteor/client/views/admin/customSounds/EditCustomSound.tsx
index 108dbfe6548fa..dbea6451ed8cf 100644
--- a/apps/meteor/client/views/admin/customSounds/EditCustomSound.tsx
+++ b/apps/meteor/client/views/admin/customSounds/EditCustomSound.tsx
@@ -28,7 +28,7 @@ function EditCustomSound({ _id, onChange, close, ...props }: EditCustomSoundProp
 	});
 
 	if (isLoading) {
-		return <FormSkeleton pi={20} />;
+		return <FormSkeleton paddingInline={20} />;
 	}
 
 	if (!data) {
diff --git a/apps/meteor/client/views/admin/customSounds/EditSound.tsx b/apps/meteor/client/views/admin/customSounds/EditSound.tsx
index 603de14ecc4ba..5f4e5a412c75e 100644
--- a/apps/meteor/client/views/admin/customSounds/EditSound.tsx
+++ b/apps/meteor/client/views/admin/customSounds/EditSound.tsx
@@ -124,7 +124,7 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps) {
 				</Field>
 				<Field>
 					<FieldLabel alignSelf='stretch'>{t('Sound File')}</FieldLabel>
-					<Box display='flex' flexDirection='row' mbs='none' alignItems='center'>
+					<Box display='flex' flexDirection='row' marginBlockStart='none' alignItems='center'>
 						<Margins inline={4}>
 							<IconButton secondary small icon='upload' onClick={clickUpload} />
 							{file?.name || (data?.name && data?.extension && `${data.name}.${data.extension}`) || t('None')}
@@ -139,7 +139,7 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps) {
 						{t('Save')}
 					</Button>
 				</ButtonGroup>
-				<Box mbs={8}>
+				<Box marginBlockStart={8}>
 					<ButtonGroup stretch>
 						<Button icon='trash' danger onClick={handleDeleteButtonClick}>
 							{t('Delete')}
diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusForm.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusForm.tsx
index 7ac286f7ae8a6..f7e29944850c4 100644
--- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusForm.tsx
+++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusForm.tsx
@@ -127,7 +127,7 @@ const CustomUserStatusForm = ({ onClose, onReload, status }: CustomUserStatusFor
 					</Button>
 				</ButtonGroup>
 				{_id && (
-					<Box mbs={8}>
+					<Box marginBlockStart={8}>
 						<ButtonGroup stretch>
 							<Button icon='trash' danger onClick={handleDeleteStatus}>
 								{t('Delete')}
diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusFormWithData.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusFormWithData.tsx
index aede22c9c2917..51d0a3ae237f0 100644
--- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusFormWithData.tsx
+++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusFormWithData.tsx
@@ -39,12 +39,12 @@ const CustomUserStatusFormWithData = ({ _id, onReload, onClose }: CustomUserStat
 	}
 
 	if (isPending) {
-		return <FormSkeleton pi={20} />;
+		return <FormSkeleton paddingInline={20} />;
 	}
 
 	if (error || !data || data.count < 1) {
 		return (
-			<Box p={20}>
+			<Box padding={20}>
 				<Callout type='danger'>{t('Custom_User_Status_Error_Invalid_User_Status')}</Callout>
 			</Box>
 		);
diff --git a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusService.tsx b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusService.tsx
index e048233f99fe9..54e6844b285c3 100644
--- a/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusService.tsx
+++ b/apps/meteor/client/views/admin/customUserStatus/CustomUserStatusService.tsx
@@ -32,7 +32,7 @@ const CustomUserStatusService = () => {
 
 	if (result.isPending || disablePresenceService.isPending || licenseIsLoading) {
 		return (
-			<Box pi={16} pb={8}>
+			<Box paddingInline={16} paddingBlock={8}>
 				<Skeleton />
 				<Skeleton />
 				<Skeleton />
@@ -43,7 +43,7 @@ const CustomUserStatusService = () => {
 	}
 	if (result.isError || disablePresenceService.isError) {
 		return (
-			<Box display='flex' flexDirection='column' alignItems='center' pb={20} color='default'>
+			<Box display='flex' flexDirection='column' alignItems='center' paddingBlock={20} color='default'>
 				<StatesIcon name='circle-exclamation' />
 				<StatesSubtitle>{t('Unable_to_load_active_connections')}</StatesSubtitle>
 				<StatesAction icon='reload' onClick={() => result.refetch()}>
@@ -59,7 +59,7 @@ const CustomUserStatusService = () => {
 		<>
 			<ContextualbarContent display='flex' flexDirection='column' justifyContent='space-between' color='default'>
 				<div>
-					<Box display='flex' justifyContent='space-between' mb={16}>
+					<Box display='flex' justifyContent='space-between' marginBlock={16}>
 						<Box fontScale='p1'>{t('Service_status')}</Box>
 						<ToggleSwitch
 							disabled={disablePresenceService.isPending || !presenceDisabled || percentage === 100}
@@ -67,7 +67,7 @@ const CustomUserStatusService = () => {
 							onChange={() => disablePresenceService.mutate()}
 						/>
 					</Box>
-					<Box display='flex' fontScale='c1' justifyContent='space-between' mb={16}>
+					<Box display='flex' fontScale='c1' justifyContent='space-between' marginBlock={16}>
 						<Box>{t('Active_connections')}</Box>
 						<Box>{license?.isEnterprise ? current : `${current}/${max}`}</Box>
 					</Box>
@@ -80,13 +80,13 @@ const CustomUserStatusService = () => {
 						</Margins>
 					)}
 				</div>
-				<Box display='flex' flexDirection='column' mb={16}>
+				<Box display='flex' flexDirection='column' marginBlock={16}>
 					{license?.isEnterprise ? (
 						<>
-							<Box fontScale='p2' mb={8}>
+							<Box fontScale='p2' marginBlock={8}>
 								{t('Premium_cap_description')}
 							</Box>
-							<Box fontScale='p2' mb={8}>
+							<Box fontScale='p2' marginBlock={8}>
 								<Trans i18nKey='Larger_amounts_of_active_connections'>
 									For larger amounts of active connections you can consider our
 									<Box is='a' href={links.scaling} target='_blank' color='info'>
@@ -98,10 +98,10 @@ const CustomUserStatusService = () => {
 						</>
 					) : (
 						<>
-							<Box fontScale='p2' mb={8}>
+							<Box fontScale='p2' marginBlock={8}>
 								{t('Community_cap_description')}
 							</Box>
-							<Box fontScale='p2' mb={8}>
+							<Box fontScale='p2' marginBlock={8}>
 								{t('Premium_cap_description')}
 							</Box>
 						</>
diff --git a/apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx b/apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx
index 78fa506c25fb9..ac83558d9ca1b 100644
--- a/apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx
+++ b/apps/meteor/client/views/admin/deviceManagement/DeviceManagementInfo/DeviceManagementInfo.tsx
@@ -62,7 +62,7 @@ const DeviceManagementInfo = ({ device, sessionId, loginAt, ip, userId, _user }:
 							<InfoPanelLabel>{t('User')}</InfoPanelLabel>
 							<Box>
 								<UserAvatar username={username} etag={userPresence?.avatarETag} />
-								<Box is='span' pi={8}>
+								<Box is='span' paddingInline={8}>
 									<StatusBullet status={userPresence?.status} />
 								</Box>
 								{name && <Box is='span'>{name}</Box>}
diff --git a/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx b/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx
index 1c809bb892643..e5ca21513cf73 100644
--- a/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx
+++ b/apps/meteor/client/views/admin/emailInbox/EmailInboxForm.tsx
@@ -212,7 +212,7 @@ const EmailInboxForm = ({ inboxData }: EmailInboxFormProps) => {
 
 	return (
 		<PageScrollableContentWithShadow>
-			<Box maxWidth='x600' w='full' alignSelf='center'>
+			<Box maxWidth='x600' width='full' alignSelf='center'>
 				<Accordion>
 					<AccordionItem defaultExpanded title={t('Inbox_Info')}>
 						<FieldGroup>
diff --git a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCard.tsx b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCard.tsx
index 43cd2b5d215c4..41636e2dd490f 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCard.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCard.tsx
@@ -9,12 +9,12 @@ export type EngagementDashboardCardProps = {
 };
 
 const EngagementDashboardCard = ({ children, title = undefined }: EngagementDashboardCardProps) => (
-	<Box mb={16}>
+	<Box marginBlock={16}>
 		<Card>
 			{title && <CardTitle>{title}</CardTitle>}
 			<CardBody>
 				<EngagementDashboardCardErrorBoundary>
-					<Box w='full'>{children}</Box>
+					<Box width='full'>{children}</Box>
 				</EngagementDashboardCardErrorBoundary>
 			</CardBody>
 		</Card>
diff --git a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardFilter.tsx b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardFilter.tsx
index e823089d58813..76907f694e031 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardFilter.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardFilter.tsx
@@ -6,7 +6,7 @@ export type EngagementDashboardCardFilterProps = {
 };
 
 const EngagementDashboardCardFilter = ({ children = <InputBoxSkeleton /> }: EngagementDashboardCardFilterProps) => (
-	<Box rcx-card__row display='flex' justifyContent='flex-end' alignItems='center' wrap='no-wrap' pbe={8}>
+	<Box rcx-card__row display='flex' justifyContent='flex-end' alignItems='center' wrap='no-wrap' paddingBlockEnd={8}>
 		{children && <FlexItem grow={0}>{children}</FlexItem>}
 	</Box>
 );
diff --git a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx
index 0fe51fc3547ba..780d421a87821 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.tsx
@@ -53,7 +53,7 @@ const EngagementDashboardPage = ({ tab = 'users', onSelectTab }: EngagementDashb
 				</TabsItem>
 			</Tabs>
 			<PageScrollableContent padding={0}>
-				<Box m={24}>
+				<Box margin={24}>
 					{(tab === 'users' && <UsersTab timezone={timezoneId} />) ||
 						(tab === 'messages' && <MessagesTab timezone={timezoneId} />) ||
 						(tab === 'channels' && <ChannelsTab />)}
diff --git a/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx b/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx
index 9ac7b3476aab9..cb8f95de2a29b 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/users/ContentForHours.tsx
@@ -48,7 +48,7 @@ const ContentForHours = ({ displacement, onPreviousDateClick, onNextDateClick, t
 				<Button square small onClick={onPreviousDateClick}>
 					<Chevron left size='x20' style={{ verticalAlign: 'middle' }} />
 				</Button>
-				<Box mi={8} flexBasis='25%' is='span' style={{ textAlign: 'center' }}>
+				<Box marginInline={8} flexBasis='25%' is='span' style={{ textAlign: 'center' }}>
 					{data ? format(new Date(data.day), displacement < 7 ? 'EEEE' : 'P') : null}
 				</Box>
 				<Button square small disabled={displacement === 0} onClick={onNextDateClick}>
diff --git a/apps/meteor/client/views/admin/featurePreview/AdminFeaturePreviewPage.tsx b/apps/meteor/client/views/admin/featurePreview/AdminFeaturePreviewPage.tsx
index 32d31ab0bbe49..2fcdc7bd8d74b 100644
--- a/apps/meteor/client/views/admin/featurePreview/AdminFeaturePreviewPage.tsx
+++ b/apps/meteor/client/views/admin/featurePreview/AdminFeaturePreviewPage.tsx
@@ -75,7 +75,7 @@ const AdminFeaturePreviewPage = () => {
 		<Page>
 			<PageHeader title={t('Feature_preview')} />
 			<PageScrollableContentWithShadow>
-				<Box maxWidth='x600' w='full' alignSelf='center'>
+				<Box maxWidth='x600' width='full' alignSelf='center'>
 					<Box>
 						<Margins block={24}>
 							<Box fontScale='p1'>{t('Feature_preview_admin_page_description')}</Box>
@@ -101,9 +101,9 @@ const AdminFeaturePreviewPage = () => {
 														disabled={feature.disabled || !allowFeaturePreviewSetting.value}
 													/>
 												</FieldRow>
-												{feature.description && <FieldHint mbs={12}>{t(feature.description)}</FieldHint>}
+												{feature.description && <FieldHint marginBlockStart={12}>{t(feature.description)}</FieldHint>}
 											</Field>
-											{feature.imageUrl && <Box is='img' width='100%' height='auto' mbs={16} src={feature.imageUrl} alt='' />}
+											{feature.imageUrl && <Box is='img' width='100%' height='auto' marginBlockStart={16} src={feature.imageUrl} alt='' />}
 										</Fragment>
 									))}
 								</FieldGroup>
diff --git a/apps/meteor/client/views/admin/import/ImportProgressPage.tsx b/apps/meteor/client/views/admin/import/ImportProgressPage.tsx
index 3a7cbf4df3552..4d087873587e1 100644
--- a/apps/meteor/client/views/admin/import/ImportProgressPage.tsx
+++ b/apps/meteor/client/views/admin/import/ImportProgressPage.tsx
@@ -172,7 +172,7 @@ const ImportProgressPage = function ImportProgressPage() {
 								</Box>
 								<Box display='flex' justifyContent='center'>
 									<ProgressBar percentage={(progress.data.completed / progress.data.total) * 100} />
-									<Box is='span' fontScale='p2' mis={24}>
+									<Box is='span' fontScale='p2' marginInlineStart={24}>
 										{numberFormat((progress.data.completed / progress.data.total) * 100, 0)}%
 									</Box>
 								</Box>
diff --git a/apps/meteor/client/views/admin/import/PrepareImportPage.tsx b/apps/meteor/client/views/admin/import/PrepareImportPage.tsx
index 5259013468a0d..337d0b15396a6 100644
--- a/apps/meteor/client/views/admin/import/PrepareImportPage.tsx
+++ b/apps/meteor/client/views/admin/import/PrepareImportPage.tsx
@@ -229,7 +229,7 @@ function PrepareImportPage() {
 								{progressRate ? (
 									<Box display='flex' justifyContent='center' fontScale='p2'>
 										<ProgressBar percentage={Math.floor(progressRate)} />
-										<Box is='span' mis='x24'>
+										<Box is='span' marginInlineStart='x24'>
 											{numberFormat(progressRate, 0)}%
 										</Box>
 									</Box>
diff --git a/apps/meteor/client/views/admin/integrations/EditIntegrationsPageWithData.tsx b/apps/meteor/client/views/admin/integrations/EditIntegrationsPageWithData.tsx
index 9a338517ffa53..6339474af190e 100644
--- a/apps/meteor/client/views/admin/integrations/EditIntegrationsPageWithData.tsx
+++ b/apps/meteor/client/views/admin/integrations/EditIntegrationsPageWithData.tsx
@@ -22,19 +22,19 @@ const EditIntegrationsPageWithData = ({ integrationId }: EditIntegrationsPageWit
 
 	if (isPending) {
 		return (
-			<Box w='full' p={24}>
-				<Skeleton mbe={4} />
-				<Skeleton mbe={8} />
-				<Skeleton mbe={4} />
-				<Skeleton mbe={8} />
-				<Skeleton mbe={4} />
-				<Skeleton mbe={8} />
+			<Box width='full' padding={24}>
+				<Skeleton marginBlockEnd={4} />
+				<Skeleton marginBlockEnd={8} />
+				<Skeleton marginBlockEnd={4} />
+				<Skeleton marginBlockEnd={8} />
+				<Skeleton marginBlockEnd={4} />
+				<Skeleton marginBlockEnd={8} />
 			</Box>
 		);
 	}
 
 	if (isError) {
-		return <Box mbs={16}>{t('Oops_page_not_found')}</Box>;
+		return <Box marginBlockStart={16}>{t('Oops_page_not_found')}</Box>;
 	}
 
 	if (data?.integration.type === 'webhook-outgoing') {
diff --git a/apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx b/apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx
index c0862bd83da4a..c69df6beb1116 100644
--- a/apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx
+++ b/apps/meteor/client/views/admin/integrations/IntegrationsTable.tsx
@@ -67,7 +67,7 @@ const IntegrationsTable = ({ type }: IntegrationsTableProps) => {
 				active={sortBy === 'name'}
 				onClick={setSort}
 				sort='name'
-				{...(!isMobile && { w: 'x280' })}
+				{...(!isMobile && { width: 'x280' })}
 			>
 				{t('Name')}
 			</GenericTableHeaderCell>
diff --git a/apps/meteor/client/views/admin/integrations/NewBot.tsx b/apps/meteor/client/views/admin/integrations/NewBot.tsx
index 360732038af0a..f4faf80b6b8ab 100644
--- a/apps/meteor/client/views/admin/integrations/NewBot.tsx
+++ b/apps/meteor/client/views/admin/integrations/NewBot.tsx
@@ -3,7 +3,7 @@ import { ExternalLink } from '@rocket.chat/ui-client';
 import { Trans } from 'react-i18next';
 
 const NewBot = () => (
-	<Box pb={20} fontScale='h4' key='bots'>
+	<Box paddingBlock={20} fontScale='h4' key='bots'>
 		<Trans
 			i18nKey='additional_integrations_Bots'
 			components={{ a: <ExternalLink to='https://github.com/RocketChat/hubot-rocketchat' /> }}
diff --git a/apps/meteor/client/views/admin/integrations/NewZapier.tsx b/apps/meteor/client/views/admin/integrations/NewZapier.tsx
index 1842047aa8c52..f9447a1bae792 100644
--- a/apps/meteor/client/views/admin/integrations/NewZapier.tsx
+++ b/apps/meteor/client/views/admin/integrations/NewZapier.tsx
@@ -54,15 +54,15 @@ const NewZapier = ({ ...props }) => {
 				type='warning'
 				icon='warning'
 				title={t(!zapierAvailable ? 'Zapier_integration_is_not_available' : 'Zapier_integration_has_been_deprecated')}
-				mbs={16}
-				mbe={4}
+				marginBlockStart={16}
+				marginBlockEnd={4}
 			>
 				{t(!zapierAvailable ? 'Install_Zapier_from_marketplace_new_workspaces' : 'Install_Zapier_from_marketplace')}
 			</Callout>
 			{zapierAvailable && (
 				<>
 					{!script && (
-						<Box display='flex' flexDirection='column' alignItems='stretch' mbs={10}>
+						<Box display='flex' flexDirection='column' alignItems='stretch' marginBlockStart={10}>
 							<Margins blockEnd={14}>
 								<Skeleton variant='rect' height={71} />
 								<Skeleton variant='rect' height={71} />
diff --git a/apps/meteor/client/views/admin/integrations/incoming/IncomingWebhookForm.tsx b/apps/meteor/client/views/admin/integrations/incoming/IncomingWebhookForm.tsx
index bf78c8d6cc8ea..3b39da26ed5d9 100644
--- a/apps/meteor/client/views/admin/integrations/incoming/IncomingWebhookForm.tsx
+++ b/apps/meteor/client/views/admin/integrations/incoming/IncomingWebhookForm.tsx
@@ -81,7 +81,7 @@ const IncomingWebhookForm = ({ webhookData }: IncomingWebhookFormProps) => {
 	const curlField = useId();
 
 	return (
-		<Box maxWidth='x600' alignSelf='center' w='full'>
+		<Box maxWidth='x600' alignSelf='center' width='full'>
 			<Accordion>
 				<AccordionItem defaultExpanded={Boolean(webhookData?._id)} title={t('Instructions')}>
 					<FieldGroup>
diff --git a/apps/meteor/client/views/admin/integrations/outgoing/OutgoingWebhookForm.tsx b/apps/meteor/client/views/admin/integrations/outgoing/OutgoingWebhookForm.tsx
index 6ccd27f3773ea..ccdab87f2e599 100644
--- a/apps/meteor/client/views/admin/integrations/outgoing/OutgoingWebhookForm.tsx
+++ b/apps/meteor/client/views/admin/integrations/outgoing/OutgoingWebhookForm.tsx
@@ -117,7 +117,7 @@ const OutgoingWebhookForm = () => {
 	const runOnEditsField = useId();
 
 	return (
-		<Box maxWidth='x600' alignSelf='center' w='full'>
+		<Box maxWidth='x600' alignSelf='center' width='full'>
 			<Accordion>
 				<AccordionItem defaultExpanded title={t('Settings')}>
 					<FieldGroup>
diff --git a/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryContent.tsx b/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryContent.tsx
index 0753544720925..2798d33bc88f8 100644
--- a/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryContent.tsx
+++ b/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryContent.tsx
@@ -11,24 +11,24 @@ const HistoryContent = ({ data, isLoading }: HistoryContentProps) => {
 
 	if (isLoading) {
 		return (
-			<Box w='full' pb={24}>
-				<Skeleton mbe={4} />
-				<Skeleton mbe={8} />
-				<Skeleton mbe={4} />
-				<Skeleton mbe={8} />
-				<Skeleton mbe={4} />
-				<Skeleton mbe={8} />
+			<Box width='full' paddingBlock={24}>
+				<Skeleton marginBlockEnd={4} />
+				<Skeleton marginBlockEnd={8} />
+				<Skeleton marginBlockEnd={4} />
+				<Skeleton marginBlockEnd={8} />
+				<Skeleton marginBlockEnd={4} />
+				<Skeleton marginBlockEnd={8} />
 			</Box>
 		);
 	}
 
 	if (data.length < 1) {
-		return <Box mbs={16}>{t('Integration_Outgoing_WebHook_No_History')}</Box>;
+		return <Box marginBlockStart={16}>{t('Integration_Outgoing_WebHook_No_History')}</Box>;
 	}
 
 	return (
 		<Box display='flex' alignItems='center' flexDirection='column'>
-			<Accordion w='full' maxWidth='x600' alignSelf='center' key='content'>
+			<Accordion width='full' maxWidth='x600' alignSelf='center' key='content'>
 				{data.map((current) => (
 					<HistoryItem data={current} key={current._id} />
 				))}
diff --git a/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryItem.tsx b/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryItem.tsx
index 9e9c9c2ab358a..aede875f59a76 100644
--- a/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryItem.tsx
+++ b/apps/meteor/client/views/admin/integrations/outgoing/history/HistoryItem.tsx
@@ -56,9 +56,9 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 	return (
 		<AccordionItem
 			title={
-				<Box display='inline-flex' w='full' flexDirection='row' justifyContent='space-between'>
+				<Box display='inline-flex' width='full' flexDirection='row' justifyContent='space-between'>
 					<Box display='flex' flexDirection='row' alignItems='center'>
-						<Icon name='info-circled' size='x16' mie={4} />
+						<Icon name='info-circled' size='x16' marginInlineEnd={4} />
 						{formatDateAndTime(_createdAt)}
 					</Box>
 					<Button secondary onClick={handleClickReplay}>
@@ -71,7 +71,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 				<Field>
 					<FieldLabel>{t('Status')}</FieldLabel>
 					<FieldRow>
-						<Box withRichContent w='full'>
+						<Box withRichContent width='full'>
 							<code>{error ? t('Failure') : t('Success')}</code>
 						</Box>
 					</FieldRow>
@@ -79,7 +79,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 				<Field>
 					<FieldLabel>{t('Integration_Outgoing_WebHook_History_Time_Triggered')}</FieldLabel>
 					<FieldRow>
-						<Box withRichContent w='full'>
+						<Box withRichContent width='full'>
 							<code>{createdAt}</code>
 						</Box>
 					</FieldRow>
@@ -87,7 +87,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 				<Field>
 					<FieldLabel>{t('Integration_Outgoing_WebHook_History_Time_Ended_Or_Error')}</FieldLabel>
 					<FieldRow>
-						<Box withRichContent w='full'>
+						<Box withRichContent width='full'>
 							<code>{updatedAt}</code>
 						</Box>
 					</FieldRow>
@@ -95,7 +95,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 				<Field>
 					<FieldLabel>{t('Event_Trigger')}</FieldLabel>
 					<FieldRow>
-						<Box withRichContent w='full'>
+						<Box withRichContent width='full'>
 							<code>{t(outgoingEvents[event].label)}</code>
 						</Box>
 					</FieldRow>
@@ -103,7 +103,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 				<Field>
 					<FieldLabel>{t('Integration_Outgoing_WebHook_History_Trigger_Step')}</FieldLabel>
 					<FieldRow>
-						<Box withRichContent w='full'>
+						<Box withRichContent width='full'>
 							<code>{step}</code>
 						</Box>
 					</FieldRow>
@@ -112,7 +112,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 					<Field>
 						<FieldLabel>{t('Integration_Outgoing_WebHook_History_Data_Passed_To_Trigger')}</FieldLabel>
 						<FieldRow>
-							<Box withRichContent w='full'>
+							<Box withRichContent width='full'>
 								<pre>
 									<code dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dataSentToTriggerCode) }}></code>
 								</pre>
@@ -124,7 +124,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 					<Field>
 						<FieldLabel>{t('Integration_Outgoing_WebHook_History_Messages_Sent_From_Prepare_Script')}</FieldLabel>
 						<FieldRow>
-							<Box withRichContent w='full'>
+							<Box withRichContent width='full'>
 								<pre>
 									<code dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(prepareSentMessageCode) }}></code>
 								</pre>
@@ -136,7 +136,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 					<Field>
 						<FieldLabel>{t('Integration_Outgoing_WebHook_History_Messages_Sent_From_Process_Script')}</FieldLabel>
 						<FieldRow>
-							<Box withRichContent w='full'>
+							<Box withRichContent width='full'>
 								<pre>
 									<code dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(processSentMessageCode) }}></code>
 								</pre>
@@ -148,7 +148,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 					<Field>
 						<FieldLabel>{t('URL')}</FieldLabel>
 						<FieldRow>
-							<Box withRichContent w='full'>
+							<Box withRichContent width='full'>
 								<code>{url}</code>
 							</Box>
 						</FieldRow>
@@ -158,7 +158,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 					<Field>
 						<FieldLabel>{t('Integration_Outgoing_WebHook_History_Data_Passed_To_URL')}</FieldLabel>
 						<FieldRow>
-							<Box withRichContent w='full'>
+							<Box withRichContent width='full'>
 								<pre>
 									<code dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(httpCallDataCode) }}></code>
 								</pre>
@@ -170,7 +170,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 					<Field>
 						<FieldLabel>{t('Integration_Outgoing_WebHook_History_Http_Response_Error')}</FieldLabel>
 						<FieldRow>
-							<Box withRichContent w='full'>
+							<Box withRichContent width='full'>
 								<pre>
 									<code dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(httpErrorCode) }}></code>
 								</pre>
@@ -182,7 +182,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 					<Field>
 						<FieldLabel>{t('Integration_Outgoing_WebHook_History_Http_Response')}</FieldLabel>
 						<FieldRow>
-							<Box withRichContent w='full'>
+							<Box withRichContent width='full'>
 								<pre>
 									<code dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(httpResultCode) }}></code>
 								</pre>
@@ -194,7 +194,7 @@ const HistoryItem = ({ data }: HistoryItemProps) => {
 					<Field>
 						<FieldLabel>{t('Integration_Outgoing_WebHook_History_Error_Stacktrace')}</FieldLabel>
 						<FieldRow>
-							<Box withRichContent w='full'>
+							<Box withRichContent width='full'>
 								<pre>
 									<code dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(errorStackCode) }}></code>
 								</pre>
diff --git a/apps/meteor/client/views/admin/invites/InvitesPage.tsx b/apps/meteor/client/views/admin/invites/InvitesPage.tsx
index 68f1c3a62f08a..bc6106cc01706 100644
--- a/apps/meteor/client/views/admin/invites/InvitesPage.tsx
+++ b/apps/meteor/client/views/admin/invites/InvitesPage.tsx
@@ -71,13 +71,13 @@ const InvitesPage = () => {
 	const headers = useMemo(
 		() => (
 			<>
-				<GenericTableHeaderCell w={notSmall ? '20%' : '80%'}>{t('Token')}</GenericTableHeaderCell>
+				<GenericTableHeaderCell width={notSmall ? '20%' : '80%'}>{t('Token')}</GenericTableHeaderCell>
 				{notSmall && (
 					<>
-						<GenericTableHeaderCell w='35%'>{t('Created_at')}</GenericTableHeaderCell>
-						<GenericTableHeaderCell w='20%'>{t('Expiration')}</GenericTableHeaderCell>
-						<GenericTableHeaderCell w='10%'>{t('Uses')}</GenericTableHeaderCell>
-						<GenericTableHeaderCell w='10%'>{t('Uses_left')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell width='35%'>{t('Created_at')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell width='20%'>{t('Expiration')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell width='10%'>{t('Uses')}</GenericTableHeaderCell>
+						<GenericTableHeaderCell width='10%'>{t('Uses_left')}</GenericTableHeaderCell>
 						<GenericTableHeaderCell />
 					</>
 				)}
diff --git a/apps/meteor/client/views/admin/mailer/MailerPage.tsx b/apps/meteor/client/views/admin/mailer/MailerPage.tsx
index a8db94a2926a6..042cbb40c97a6 100644
--- a/apps/meteor/client/views/admin/mailer/MailerPage.tsx
+++ b/apps/meteor/client/views/admin/mailer/MailerPage.tsx
@@ -72,7 +72,7 @@ const MailerPage = () => {
 	return (
 		<Page>
 			<PageHeader title={t('Mailer')} />
-			<PageScrollableContentWithShadow alignSelf='center' w='100%' display='flex' flexDirection='column' alignItems='center'>
+			<PageScrollableContentWithShadow alignSelf='center' width='100%' display='flex' flexDirection='column' alignItems='center'>
 				<Box id={mailerFormId} is='form' autoComplete='off' maxWidth='x600' onSubmit={handleSubmit(handleSendEmail)}>
 					<FieldGroup>
 						<Field>
diff --git a/apps/meteor/client/views/admin/moderation/UserMessages.tsx b/apps/meteor/client/views/admin/moderation/UserMessages.tsx
index d8db785def5c1..f20f377207c73 100644
--- a/apps/meteor/client/views/admin/moderation/UserMessages.tsx
+++ b/apps/meteor/client/views/admin/moderation/UserMessages.tsx
@@ -48,7 +48,7 @@ const UserMessages = ({ userId, onRedirect }: { userId: string; onRedirect: (mid
 							</Callout>
 						)}
 						{!report.user && (
-							<Callout mbs={8} type='warning' icon='warning'>
+							<Callout marginBlockStart={8} type='warning' icon='warning'>
 								{t('Moderation_User_deleted_warning')}
 							</Callout>
 						)}
@@ -69,7 +69,7 @@ const UserMessages = ({ userId, onRedirect }: { userId: string; onRedirect: (mid
 					))}
 				{isSuccess && report.messages.length === 0 && <GenericNoResults title={t('No_message_reports')} icon='message' />}
 				{isError && (
-					<Box display='flex' flexDirection='column' alignItems='center' pb={20} color='default'>
+					<Box display='flex' flexDirection='column' alignItems='center' paddingBlock={20} color='default'>
 						<StatesIcon name='warning' variation='danger' />
 						<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
 						<StatesActions>
diff --git a/apps/meteor/client/views/admin/moderation/UserReports/UserReportInfo.tsx b/apps/meteor/client/views/admin/moderation/UserReports/UserReportInfo.tsx
index db24df7e93068..930d061bad0d3 100644
--- a/apps/meteor/client/views/admin/moderation/UserReports/UserReportInfo.tsx
+++ b/apps/meteor/client/views/admin/moderation/UserReports/UserReportInfo.tsx
@@ -63,7 +63,7 @@ const UserReportInfo = ({ userId }: UserReportInfoProps) => {
 
 	if (isError) {
 		return (
-			<Box display='flex' flexDirection='column' alignItems='center' pb={20} color='default'>
+			<Box display='flex' flexDirection='column' alignItems='center' paddingBlock={20} color='default'>
 				<StatesIcon name='warning' variation='danger' />
 				<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
 				<StatesActions>
@@ -103,7 +103,7 @@ const UserReportInfo = ({ userId }: UserReportInfoProps) => {
 								</Field>
 							</FieldGroup>
 						) : (
-							<Callout mbs={8} type='warning' icon='warning'>
+							<Callout marginBlockStart={8} type='warning' icon='warning'>
 								{t('Moderation_User_deleted_warning')}
 							</Callout>
 						)}
diff --git a/apps/meteor/client/views/admin/moderation/helpers/UserColumn.tsx b/apps/meteor/client/views/admin/moderation/helpers/UserColumn.tsx
index 7a54c234f874e..20343be7ba89f 100644
--- a/apps/meteor/client/views/admin/moderation/helpers/UserColumn.tsx
+++ b/apps/meteor/client/views/admin/moderation/helpers/UserColumn.tsx
@@ -19,7 +19,7 @@ const UserColumn = ({ name, username, fontSize, size }: UserColumnProps) => {
 					<UserAvatar size={size} username={username} />
 				</Box>
 			)}
-			<Box display='flex' mi={8} withTruncatedText>
+			<Box display='flex' marginInline={8} withTruncatedText>
 				<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
 					<Box fontScale='p2m' color='default' withTruncatedText>
 						{name && username ? (
diff --git a/apps/meteor/client/views/admin/oauthApps/EditOauthApp.tsx b/apps/meteor/client/views/admin/oauthApps/EditOauthApp.tsx
index 830c2b0d8d084..8b2f6ba1d1d91 100644
--- a/apps/meteor/client/views/admin/oauthApps/EditOauthApp.tsx
+++ b/apps/meteor/client/views/admin/oauthApps/EditOauthApp.tsx
@@ -105,8 +105,8 @@ const EditOauthApp = ({ onChange, data, ...props }: EditOauthAppProps) => {
 	const tokenUrlField = useId();
 
 	return (
-		<ContextualbarScrollableContent w='full' {...props}>
-			<FieldGroup maxWidth='x600' alignSelf='center' w='full'>
+		<ContextualbarScrollableContent width='full' {...props}>
+			<FieldGroup maxWidth='x600' alignSelf='center' width='full'>
 				<Field>
 					<FieldRow>
 						<FieldLabel>{t('Active')}</FieldLabel>
diff --git a/apps/meteor/client/views/admin/oauthApps/EditOauthAppWithData.tsx b/apps/meteor/client/views/admin/oauthApps/EditOauthAppWithData.tsx
index bfe11830cba91..6f67a78f77fc8 100644
--- a/apps/meteor/client/views/admin/oauthApps/EditOauthAppWithData.tsx
+++ b/apps/meteor/client/views/admin/oauthApps/EditOauthAppWithData.tsx
@@ -30,12 +30,12 @@ const EditOauthAppWithData = ({ _id, ...props }: EditOauthAppWithDataProps) => {
 	}, [refetch]);
 
 	if (isPending) {
-		return <FormSkeleton pi={20} />;
+		return <FormSkeleton paddingInline={20} />;
 	}
 
 	if (error || !data || !_id) {
 		return (
-			<Box fontScale='h2' pb={20}>
+			<Box fontScale='h2' paddingBlock={20}>
 				{t('error-application-not-found')}
 			</Box>
 		);
diff --git a/apps/meteor/client/views/admin/oauthApps/OAuthAddApp.tsx b/apps/meteor/client/views/admin/oauthApps/OAuthAddApp.tsx
index a8be765228398..2253920796522 100644
--- a/apps/meteor/client/views/admin/oauthApps/OAuthAddApp.tsx
+++ b/apps/meteor/client/views/admin/oauthApps/OAuthAddApp.tsx
@@ -55,8 +55,8 @@ const OAuthAddApp = () => {
 	const redirectUriField = useId();
 
 	return (
-		<ContextualbarScrollableContent w='full'>
-			<FieldGroup maxWidth='x600' alignSelf='center' w='full'>
+		<ContextualbarScrollableContent width='full'>
+			<FieldGroup maxWidth='x600' alignSelf='center' width='full'>
 				<Field>
 					<FieldRow>
 						<FieldLabel>{t('Active')}</FieldLabel>
diff --git a/apps/meteor/client/views/admin/permissions/EditRolePage.tsx b/apps/meteor/client/views/admin/permissions/EditRolePage.tsx
index a6cb4af13380c..5328ca3d59385 100644
--- a/apps/meteor/client/views/admin/permissions/EditRolePage.tsx
+++ b/apps/meteor/client/views/admin/permissions/EditRolePage.tsx
@@ -100,7 +100,7 @@ const EditRolePage = ({ role, isEnterprise }: EditRolePageProps) => {
 	return (
 		<>
 			<ContextualbarScrollableContent>
-				<Box w='full' alignSelf='center' mb='neg-x8'>
+				<Box width='full' alignSelf='center' marginBlock='neg-x8'>
 					<Margins block={8}>
 						<FormProvider {...methods}>
 							<RoleForm editing={Boolean(role?._id)} isProtected={role?.protected} isDisabled={!isEnterprise} />
diff --git a/apps/meteor/client/views/admin/permissions/PermissionsPage.tsx b/apps/meteor/client/views/admin/permissions/PermissionsPage.tsx
index a1bd6c9149aee..ac66a33cf49f1 100644
--- a/apps/meteor/client/views/admin/permissions/PermissionsPage.tsx
+++ b/apps/meteor/client/views/admin/permissions/PermissionsPage.tsx
@@ -71,7 +71,7 @@ const PermissionsPage = ({ isEnterprise }: PermissionsPageProps) => {
 						</TabsItem>
 					</Tabs>
 				</Margins>
-				<PageContent mb='neg-x8'>
+				<PageContent marginBlock='neg-x8'>
 					<Margins block={8}>
 						<PermissionsTable
 							roleList={roleList}
diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx
index 921b58fb0762a..46df3df7eaefd 100644
--- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx
+++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx
@@ -10,7 +10,7 @@ export default {
 	component: PermissionsTable,
 	decorators: [
 		(fn) => (
-			<PageContent mb='neg-x8'>
+			<PageContent marginBlock='neg-x8'>
 				<Margins block={8}>{fn()}</Margins>
 			</PageContent>
 		),
diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleHeader.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleHeader.tsx
index 53c5ebf9b7f31..3e4aaff88fe2b 100644
--- a/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleHeader.tsx
+++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/RoleHeader.tsx
@@ -22,7 +22,7 @@ const RoleHeader = ({ _id, name, description }: RoleHeaderProps) => {
 	});
 
 	return (
-		<GenericTableHeaderCell pi={4} p={8}>
+		<GenericTableHeaderCell paddingInline={4} padding={8}>
 			<Button small icon='edit' secondary onClick={handleEditRole}>
 				{description || name}
 			</Button>
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRolePage.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRolePage.tsx
index 88fcdca9fa4de..984d12ead454c 100644
--- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRolePage.tsx
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRolePage.tsx
@@ -88,10 +88,10 @@ const UsersInRolePage = ({ role }: UsersInRolePageProps) => {
 				</ButtonGroup>
 			</PageHeader>
 			<PageContent>
-				<Box display='flex' flexDirection='column' w='full' mi='neg-x4'>
+				<Box display='flex' flexDirection='column' width='full' marginInline='neg-x4'>
 					<Margins inline={4}>
 						{role.scope !== 'Users' && (
-							<Field mbe={4}>
+							<Field marginBlockEnd={4}>
 								<FieldLabel htmlFor={roomFieldId}>{t('Choose_a_room')}</FieldLabel>
 								<FieldRow>
 									<Controller
@@ -138,7 +138,7 @@ const UsersInRolePage = ({ role }: UsersInRolePageProps) => {
 										/>
 									)}
 								/>
-								<Button mis={8} primary onClick={handleSubmit(handleAdd)} disabled={!isDirty}>
+								<Button marginInlineStart={8} primary onClick={handleSubmit(handleAdd)} disabled={!isDirty}>
 									{t('Add')}
 								</Button>
 							</FieldRow>
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx
index 4ae4639b93d70..4c2f56aa93d42 100644
--- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx
@@ -9,7 +9,7 @@ export default {
 	component: UsersInRoleTable,
 	decorators: [
 		(fn) => (
-			<PageContent mb='neg-x8'>
+			<PageContent marginBlock='neg-x8'>
 				<Margins block={8}>{fn()}</Margins>
 			</PageContent>
 		),
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx
index f6686aab1edaf..36525399464de 100644
--- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx
@@ -33,7 +33,7 @@ const UsersInRoleTable = ({ isLoading, isSuccess, isError, total, users, onRemov
 		<>
 			<GenericTableHeaderCell>{t('Name')}</GenericTableHeaderCell>
 			<GenericTableHeaderCell>{t('Email')}</GenericTableHeaderCell>
-			<GenericTableHeaderCell w='x80'>{t('Actions')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell width='x80'>{t('Actions')}</GenericTableHeaderCell>
 		</>
 	);
 
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
index c8636f5653162..4f518eb6ac80b 100644
--- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
@@ -27,12 +27,12 @@ const UsersInRoleTableRow = ({ user, onRemove }: UsersInRoleTableRowProps) => {
 			<GenericTableCell withTruncatedText>
 				<Box display='flex' alignItems='center'>
 					<UserAvatar size='x40' username={username ?? ''} etag={avatarETag} />
-					<Box display='flex' withTruncatedText mi={8}>
+					<Box display='flex' withTruncatedText marginInline={8}>
 						<Box fontScale='p2m' withTruncatedText color='default'>
 							{name || username}
 						</Box>
 						{name && (
-							<Box mis={4} fontScale='p2' color='hint' withTruncatedText>
+							<Box marginInlineStart={4} fontScale='p2' color='hint' withTruncatedText>
 								{`@${username}`}
 							</Box>
 						)}
diff --git a/apps/meteor/client/views/admin/rooms/EditRoom.tsx b/apps/meteor/client/views/admin/rooms/EditRoom.tsx
index f835040e7bb25..e22ee1771c6fa 100644
--- a/apps/meteor/client/views/admin/rooms/EditRoom.tsx
+++ b/apps/meteor/client/views/admin/rooms/EditRoom.tsx
@@ -141,7 +141,7 @@ const EditRoom = ({ room, onChange, onDelete, onClose }: EditRoomProps) => {
 		<>
 			<ContextualbarScrollableContent id={formId} is='form' onSubmit={handleSubmit(handleSave)}>
 				{room.t !== 'd' && (
-					<Box pbe={24} display='flex' justifyContent='center'>
+					<Box paddingBlockEnd={24} display='flex' justifyContent='center'>
 						<Controller
 							name='roomAvatar'
 							control={control}
@@ -353,7 +353,7 @@ const EditRoom = ({ room, onChange, onDelete, onClose }: EditRoomProps) => {
 						{t('Save')}
 					</Button>
 				</ButtonGroup>
-				<Box mbs={8}>
+				<Box marginBlockStart={8}>
 					<ButtonGroup stretch>
 						<Button icon='trash' danger loading={isDeleting} disabled={!canDeleteRoom || roomIsFederated} onClick={handleDelete}>
 							{t('Delete')}
diff --git a/apps/meteor/client/views/admin/rooms/RoomRow.tsx b/apps/meteor/client/views/admin/rooms/RoomRow.tsx
index c13e4d6f2704a..722085881417d 100644
--- a/apps/meteor/client/views/admin/rooms/RoomRow.tsx
+++ b/apps/meteor/client/views/admin/rooms/RoomRow.tsx
@@ -72,7 +72,7 @@ const RoomRow = ({ room }: RoomRowProps) => {
 						alignItems='center'
 						withTruncatedText
 					>
-						{icon && <Icon mi={4} name={icon} fontScale='p2m' color='hint' />}
+						{icon && <Icon marginInline={4} name={icon} fontScale='p2m' color='hint' />}
 						<Box fontScale='p2m' withTruncatedText color='default' qa-room-name={roomName}>
 							{roomName}
 						</Box>
diff --git a/apps/meteor/client/views/admin/rooms/RoomsTable.tsx b/apps/meteor/client/views/admin/rooms/RoomsTable.tsx
index 9a3e123c1b769..bc8ce77fd42f1 100644
--- a/apps/meteor/client/views/admin/rooms/RoomsTable.tsx
+++ b/apps/meteor/client/views/admin/rooms/RoomsTable.tsx
@@ -79,10 +79,10 @@ const RoomsTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
 
 	const headers = (
 		<>
-			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name' w='x200'>
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name' width='x200'>
 				{t('Name')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='type' direction={sortDirection} active={sortBy === 't'} onClick={setSort} sort='t' w='x100'>
+			<GenericTableHeaderCell key='type' direction={sortDirection} active={sortBy === 't'} onClick={setSort} sort='t' width='x100'>
 				{t('Type')}
 			</GenericTableHeaderCell>
 			<GenericTableHeaderCell
@@ -91,13 +91,20 @@ const RoomsTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
 				active={sortBy === 'usersCount'}
 				onClick={setSort}
 				sort='usersCount'
-				w='x80'
+				width='x80'
 			>
 				{t('Users')}
 			</GenericTableHeaderCell>
 			{mediaQuery && (
 				<>
-					<GenericTableHeaderCell key='messages' direction={sortDirection} active={sortBy === 'msgs'} onClick={setSort} sort='msgs' w='x80'>
+					<GenericTableHeaderCell
+						key='messages'
+						direction={sortDirection}
+						active={sortBy === 'msgs'}
+						onClick={setSort}
+						sort='msgs'
+						width='x80'
+					>
 						{t('Msgs')}
 					</GenericTableHeaderCell>
 					<GenericTableHeaderCell
@@ -106,7 +113,7 @@ const RoomsTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
 						active={sortBy === 'default'}
 						onClick={setSort}
 						sort='default'
-						w='x80'
+						width='x80'
 					>
 						{t('Default')}
 					</GenericTableHeaderCell>
@@ -116,11 +123,11 @@ const RoomsTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
 						active={sortBy === 'featured'}
 						onClick={setSort}
 						sort='featured'
-						w='x80'
+						width='x80'
 					>
 						{t('Featured')}
 					</GenericTableHeaderCell>
-					<GenericTableHeaderCell key='ts' direction={sortDirection} active={sortBy === 'ts'} onClick={setSort} sort='ts' w='x120'>
+					<GenericTableHeaderCell key='ts' direction={sortDirection} active={sortBy === 'ts'} onClick={setSort} sort='ts' width='x120'>
 						{t('Created_at')}
 					</GenericTableHeaderCell>
 				</>
diff --git a/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx b/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx
index 6cf21695c3336..4b9c61c5d284e 100644
--- a/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx
+++ b/apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx
@@ -79,13 +79,13 @@ const RoomsTableFilters = ({ setFilters }: RoomsTableFiltersProps) => {
 		<Box
 			is='form'
 			onSubmit={useCallback((e: FormEvent) => e.preventDefault(), [])}
-			mb='x8'
+			marginBlock='x8'
 			display='flex'
 			flexWrap='wrap'
 			alignItems='center'
 			justifyContent='center'
 		>
-			<Box minWidth='x224' display='flex' m='x4' flexGrow={2}>
+			<Box minWidth='x224' display='flex' margin='x4' flexGrow={2}>
 				<TextInput
 					name='search-rooms'
 					alignItems='center'
@@ -95,7 +95,7 @@ const RoomsTableFilters = ({ setFilters }: RoomsTableFiltersProps) => {
 					value={text}
 				/>
 			</Box>
-			<Box minWidth='x224' m='x4'>
+			<Box minWidth='x224' margin='x4'>
 				<MultiSelectCustom
 					dropdownOptions={roomTypeFilterStructure}
 					defaultTitle='All_rooms'
diff --git a/apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx b/apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx
index 310b233a90ebf..1dbb55c9af60f 100644
--- a/apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx
@@ -91,7 +91,7 @@ const MemoizedSetting = ({
 
 	return (
 		<Field className={className} flexDirection='row' justifyContent='space-between' alignItems='flex-start'>
-			<Box flexDirection='column' flexGrow={1} wordBreak='break-word' w='full'>
+			<Box flexDirection='column' flexGrow={1} wordBreak='break-word' width='full'>
 				<InputComponent
 					value={value}
 					hint={hint}
diff --git a/apps/meteor/client/views/admin/settings/Setting/Setting.tsx b/apps/meteor/client/views/admin/settings/Setting/Setting.tsx
index 630811d96ff2d..9d4a4b9d59051 100644
--- a/apps/meteor/client/views/admin/settings/Setting/Setting.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/Setting.tsx
@@ -139,7 +139,7 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr
 	const showUpgradeButton = useMemo(
 		() =>
 			shouldDisableEnterprise ? (
-				<Button mbs={4} is='a' href={PRICING_URL} target='_blank'>
+				<Button marginBlockStart={4} is='a' href={PRICING_URL} target='_blank'>
 					{t('See_Paid_Plan')}
 				</Button>
 			) : undefined,
@@ -153,7 +153,7 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr
 
 		return (
 			<>
-				<Box is='span' mie={4}>
+				<Box is='span' marginInlineEnd={4}>
 					{labelText}
 				</Box>
 				<Tag variant='featured'>{t('Premium')}</Tag>
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx
index 0ec580f2c3bce..5648d7e60d500 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx
@@ -30,7 +30,7 @@ function BooleanSettingInput({
 					{label}
 				</FieldLabel>
 				<Box display='flex' alignItems='center'>
-					{hasResetButton && <ResetSettingButton mie={8} onClick={onResetButtonClick} />}
+					{hasResetButton && <ResetSettingButton marginInlineEnd={8} onClick={onResetButtonClick} />}
 					<ToggleSwitch id={_id} checked={value === true} disabled={disabled || readonly} onChange={handleChange} />
 				</Box>
 			</FieldRow>
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirrorBox.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirrorBox.tsx
index d8649cf13255f..cf148bc0559b0 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirrorBox.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirrorBox.tsx
@@ -26,9 +26,9 @@ const CodeMirrorBox = ({ label, children, error }: CodeMirrorBoxProps) => {
 				flexDirection='column'
 				width='100%'
 				height='100%'
-				p={40}
+				padding={40}
 			>
-				<Box fontScale='p1' mbe={4}>
+				<Box fontScale='p1' marginBlockEnd={4}>
 					{label}
 				</Box>
 				<Box
@@ -44,11 +44,11 @@ const CodeMirrorBox = ({ label, children, error }: CodeMirrorBoxProps) => {
 					{children}
 				</Box>
 				{error && (
-					<FieldError id={errorId} role='alert' mbs={4}>
+					<FieldError id={errorId} role='alert' marginBlockStart={4}>
 						{error}
 					</FieldError>
 				)}
-				<Box mbs={8}>
+				<Box marginBlockStart={8}>
 					<ButtonGroup>
 						<Button primary onClick={(): void => toggleFullScreen()}>
 							{t('Exit_Full_Screen')}
@@ -75,11 +75,11 @@ const CodeMirrorBox = ({ label, children, error }: CodeMirrorBoxProps) => {
 				{children}
 			</Box>
 			{error && (
-				<FieldError id={errorId} role='alert' mbs={4}>
+				<FieldError id={errorId} role='alert' marginBlockStart={4}>
 					{error}
 				</FieldError>
 			)}
-			<Box mbs={8}>
+			<Box marginBlockStart={8}>
 				<ButtonGroup>
 					<Button primary onClick={(): void => toggleFullScreen()}>
 						{t('Full_Screen')}
diff --git a/apps/meteor/client/views/admin/settings/Setting/inputs/RangeSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/RangeSettingInput.tsx
index 8790a843dbda0..ec062c060d9cb 100644
--- a/apps/meteor/client/views/admin/settings/Setting/inputs/RangeSettingInput.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/inputs/RangeSettingInput.tsx
@@ -33,7 +33,7 @@ function RangeSettingInput({
 			</FieldRow>
 			{hint && (
 				<FieldRow>
-					<FieldHint mbe={4}>{hint}</FieldHint>
+					<FieldHint marginBlockEnd={4}>{hint}</FieldHint>
 				</FieldRow>
 			)}
 			<FieldRow>
diff --git a/apps/meteor/client/views/admin/settings/SettingsPage.tsx b/apps/meteor/client/views/admin/settings/SettingsPage.tsx
index 3d9d9acd92f8a..ff9c693c4a465 100644
--- a/apps/meteor/client/views/admin/settings/SettingsPage.tsx
+++ b/apps/meteor/client/views/admin/settings/SettingsPage.tsx
@@ -24,7 +24,7 @@ const SettingsPage = () => {
 				<SearchInput value={filter} placeholder={t('Search')} onChange={handleChange} endAddon={<Icon name='magnifier' size='x20' />} />
 			</PageBlockWithBorder>
 
-			<PageScrollableContentWithShadow p={0} mi={24} mbe={16}>
+			<PageScrollableContentWithShadow padding={0} marginInline={24} marginBlockEnd={16}>
 				<CardGrid
 					breakpoints={{
 						xs: 4,
@@ -32,7 +32,7 @@ const SettingsPage = () => {
 						md: 4,
 						lg: 6,
 						xl: 4,
-						p: 8,
+						padding: 8,
 					}}
 				>
 					{!!groups.length &&
diff --git a/apps/meteor/client/views/admin/sidebar/AdminSidebarPages.tsx b/apps/meteor/client/views/admin/sidebar/AdminSidebarPages.tsx
index cac99e6203cc5..420c8174e6c73 100644
--- a/apps/meteor/client/views/admin/sidebar/AdminSidebarPages.tsx
+++ b/apps/meteor/client/views/admin/sidebar/AdminSidebarPages.tsx
@@ -12,7 +12,7 @@ const AdminSidebarPages = ({ currentPath }: AdminSidebarPagesProps) => {
 	const items = useSyncExternalStore(subscribeToAdminSidebarItems, getAdminSidebarItems);
 
 	return (
-		<Box display='flex' flexDirection='column' flexShrink={0} pb={8}>
+		<Box display='flex' flexDirection='column' flexShrink={0} paddingBlock={8}>
 			<SidebarItemsAssembler items={items} currentPath={currentPath} />
 		</Box>
 	);
diff --git a/apps/meteor/client/views/admin/subscription/SubscriptionCalloutLimits.tsx b/apps/meteor/client/views/admin/subscription/SubscriptionCalloutLimits.tsx
index a4e2ef55f0d61..b9bf64c29451e 100644
--- a/apps/meteor/client/views/admin/subscription/SubscriptionCalloutLimits.tsx
+++ b/apps/meteor/client/views/admin/subscription/SubscriptionCalloutLimits.tsx
@@ -24,7 +24,7 @@ export const SubscriptionCalloutLimits = () => {
 	return (
 		<>
 			{start_fair_policy && (
-				<Callout type='warning' title={t('subscription.callout.servicesDisruptionsMayOccur')} m={8}>
+				<Callout type='warning' title={t('subscription.callout.servicesDisruptionsMayOccur')} margin={8}>
 					<Trans
 						i18nKey='subscription.callout.description.limitsReached'
 						count={start_fair_policy.length}
@@ -46,7 +46,7 @@ export const SubscriptionCalloutLimits = () => {
 			)}
 
 			{prevent_action && (
-				<Callout type='danger' title={t('subscription.callout.servicesDisruptionsOccurring')} m={8}>
+				<Callout type='danger' title={t('subscription.callout.servicesDisruptionsOccurring')} margin={8}>
 					<Trans
 						i18nKey='subscription.callout.description.limitsExceeded'
 						count={prevent_action.length}
@@ -68,7 +68,7 @@ export const SubscriptionCalloutLimits = () => {
 			)}
 
 			{disable_modules && (
-				<Callout type='danger' title={t('subscription.callout.capabilitiesDisabled')} m={8}>
+				<Callout type='danger' title={t('subscription.callout.capabilitiesDisabled')} margin={8}>
 					<Trans
 						i18nKey='subscription.callout.description.limitsExceeded'
 						count={disable_modules.length}
@@ -90,7 +90,7 @@ export const SubscriptionCalloutLimits = () => {
 			)}
 
 			{invalidate_license && (
-				<Callout type='danger' title={t('subscription.callout.allPremiumCapabilitiesDisabled')} m={8}>
+				<Callout type='danger' title={t('subscription.callout.allPremiumCapabilitiesDisabled')} margin={8}>
 					<Trans
 						i18nKey='subscription.callout.description.limitsExceeded'
 						count={disable_modules.length}
diff --git a/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx b/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
index 372ef57da895b..7b277f672f41c 100644
--- a/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
+++ b/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
@@ -104,7 +104,7 @@ const SubscriptionPage = () => {
 	}, [handleSyncLicenseUpdate, router, subscriptionSuccess, syncLicenseUpdate.isIdle]);
 
 	return (
-		<Page bg='tint'>
+		<Page background='tint'>
 			<PageHeaderNoShadow title={t('Subscription')}>
 				<ButtonGroup>
 					{canViewRegistrationStatus && (
@@ -122,9 +122,9 @@ const SubscriptionPage = () => {
 					<UiKitSubscriptionLicense key='license' initialView={cloudSyncAnnouncement} />
 				</PageBlockWithBorder>
 			)}
-			<PageScrollableContentWithShadow p={16}>
+			<PageScrollableContentWithShadow padding={16}>
 				{(showSubscriptionCallout || syncLicenseUpdate.isPending) && (
-					<Callout type='info' title={t('Sync_license_update_Callout_Title')} m={8}>
+					<Callout type='info' title={t('Sync_license_update_Callout_Title')} margin={8}>
 						{t('Sync_license_update_Callout')}
 					</Callout>
 				)}
@@ -140,17 +140,17 @@ const SubscriptionPage = () => {
 							</Accordion>
 						)}
 						<Box marginBlock='none' marginInline='auto' width='full' color='default'>
-							<Grid m={0}>
-								<GridItem lg={4} xs={4} p={8} minHeight={260}>
+							<Grid margin={0}>
+								<GridItem lg={4} xs={4} padding={8} minHeight={260}>
 									<PlanCard license={license} licenseLimits={{ activeUsers: seatsLimit }} />
 								</GridItem>
 
-								<GridItem lg={8} xs={4} p={8} minHeight={260}>
+								<GridItem lg={8} xs={4} padding={8} minHeight={260}>
 									<FeaturesCard activeModules={activeModules} isEnterprise={isEnterprise} />
 								</GridItem>
 
 								{seatsLimit.value !== undefined && (
-									<GridItem lg={6} xs={4} p={8} minHeight={260}>
+									<GridItem lg={6} xs={4} padding={8} minHeight={260}>
 										{seatsLimit.max !== Infinity ? (
 											<SeatsCard value={seatsLimit.value} max={seatsLimit.max} hideManageSubscription={licensesData?.trial} />
 										) : (
@@ -160,7 +160,7 @@ const SubscriptionPage = () => {
 								)}
 
 								{macLimit.value !== undefined && (
-									<GridItem lg={6} xs={4} p={8} minHeight={260}>
+									<GridItem lg={6} xs={4} padding={8} minHeight={260}>
 										{macLimit.max !== Infinity ? (
 											<MACCard max={macLimit.max} value={macLimit.value} hideManageSubscription={licensesData?.trial} />
 										) : (
@@ -172,15 +172,15 @@ const SubscriptionPage = () => {
 								{!license && (
 									<>
 										{limits?.marketplaceApps !== undefined && (
-											<GridItem lg={4} xs={4} p={8} minHeight={260}>
+											<GridItem lg={4} xs={4} padding={8} minHeight={260}>
 												<AppsUsageCard privateAppsLimit={limits?.privateApps} marketplaceAppsLimit={limits.marketplaceApps} />
 											</GridItem>
 										)}
 
-										<GridItem lg={4} xs={4} p={8} minHeight={260}>
+										<GridItem lg={4} xs={4} padding={8} minHeight={260}>
 											<ActiveSessionsCard />
 										</GridItem>
-										<GridItem lg={4} xs={4} p={8} minHeight={260}>
+										<GridItem lg={4} xs={4} padding={8} minHeight={260}>
 											<ActiveSessionsPeakCard />
 										</GridItem>
 									</>
diff --git a/apps/meteor/client/views/admin/subscription/SubscriptionPageSkeleton.tsx b/apps/meteor/client/views/admin/subscription/SubscriptionPageSkeleton.tsx
index ef6808d42fa44..74c2f3f9b6e62 100644
--- a/apps/meteor/client/views/admin/subscription/SubscriptionPageSkeleton.tsx
+++ b/apps/meteor/client/views/admin/subscription/SubscriptionPageSkeleton.tsx
@@ -3,17 +3,17 @@ import { memo } from 'react';
 
 const SubscriptionPageSkeleton = () => (
 	<Box marginBlock='none' marginInline='auto' width='full' color='default'>
-		<Grid m={0}>
-			<GridItem lg={4} xs={4} p={8}>
+		<Grid margin={0}>
+			<GridItem lg={4} xs={4} padding={8}>
 				<Skeleton variant='rect' width='full' height={240} />
 			</GridItem>
-			<GridItem lg={8} xs={4} p={8}>
+			<GridItem lg={8} xs={4} padding={8}>
 				<Skeleton variant='rect' width='full' height={240} />
 			</GridItem>
-			<GridItem lg={6} xs={4} p={8}>
+			<GridItem lg={6} xs={4} padding={8}>
 				<Skeleton variant='rect' width='full' height={240} />
 			</GridItem>
-			<GridItem lg={6} xs={4} p={8}>
+			<GridItem lg={6} xs={4} padding={8}>
 				<Skeleton variant='rect' width='full' height={240} />
 			</GridItem>
 		</Grid>
diff --git a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx
index 964cda8d4ef8c..f7c716fd39196 100644
--- a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx
@@ -5,7 +5,7 @@ export type FeatureUsageCardBodyProps = { justifyContent?: 'flex-start' | 'cente
 
 const FeatureUsageCardBody = ({ justifyContent = 'center', children }: FeatureUsageCardBodyProps) => (
 	<CardBody>
-		<Box h='full' w='full' display='flex' alignItems='center' justifyContent={justifyContent} flexDirection='column'>
+		<Box height='full' width='full' display='flex' alignItems='center' justifyContent={justifyContent} flexDirection='column'>
 			{children}
 		</Box>
 	</CardBody>
diff --git a/apps/meteor/client/views/admin/subscription/components/UpgradeToGetMore.tsx b/apps/meteor/client/views/admin/subscription/components/UpgradeToGetMore.tsx
index db21f81ad9e2d..884fbba05fca5 100644
--- a/apps/meteor/client/views/admin/subscription/components/UpgradeToGetMore.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/UpgradeToGetMore.tsx
@@ -44,7 +44,7 @@ const UpgradeToGetMore = ({ activeModules, children }: UpgradeToGetMoreProps) =>
 	}
 
 	return (
-		<Box w='full' p={8} mbs={40}>
+		<Box width='full' padding={8} marginBlockStart={40}>
 			<States>
 				<StatesIcon name='rocket' />
 				<StatesTitle>{t('UpgradeToGetMore_Headline')}</StatesTitle>
@@ -57,14 +57,14 @@ const UpgradeToGetMore = ({ activeModules, children }: UpgradeToGetMoreProps) =>
 					md: 4,
 					lg: 6,
 					xl: 4,
-					p: 8,
+					padding: 8,
 				}}
 			>
 				{upgradeModules.map((card, index) => {
 					return <GenericCard key={index} icon='check' type='success' height='full' {...card} />;
 				})}
 			</CardGrid>
-			<Box pbs={24}>
+			<Box paddingBlockStart={24}>
 				<ButtonGroup large vertical>
 					<Button icon='new-window' onClick={() => handleOpenLink(PRICING_LINK)} role='link'>
 						{t('Compare_plans')}
diff --git a/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.tsx b/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.tsx
index 72120f3efb83e..a060ec0eab8e8 100644
--- a/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/UsagePieGraph.tsx
@@ -98,7 +98,7 @@ const UsagePieGraph = ({ used = 0, total = 0, label, color, size = 140 }: UsageP
 					})}
 			</Box>
 			{label && (
-				<Box is='span' mbs={4} color='font-secondary-info'>
+				<Box is='span' marginBlockStart={4} color='font-secondary-info'>
 					{label}
 				</Box>
 			)}
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
index 3ee04644633f4..8ddc9c6f4f8d8 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
@@ -58,7 +58,7 @@ const ActiveSessionsCard = () => {
 		>
 			<FeatureUsageCardBody justifyContent='flex-start'>
 				<Box color='font-secondary-info' textAlign='center'>
-					<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} mbe={12}>
+					<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} marginBlockEnd={12}>
 						{used} / {total}
 					</Box>
 					{available} {t('ActiveSessions_available')}
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
index 070e16511c8f0..727a85fc67e86 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
@@ -45,7 +45,7 @@ const ActiveSessionsPeakCard = () => {
 	return (
 		<FeatureUsageCard card={card}>
 			<Box color='font-secondary-info' textAlign='center'>
-				<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} mbe={12}>
+				<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} marginBlockEnd={12}>
 					{used} / {total}
 				</Box>
 				{formatDate(new Date())}
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCardSection.tsx b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCardSection.tsx
index 2ab612157618a..9c0e08f0726be 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCardSection.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCardSection.tsx
@@ -15,8 +15,8 @@ const AppsUsageCardSection = ({ title, tip, appsCount, appsMaxCount, warningThre
 	const labelId = useId();
 
 	return (
-		<Box fontScale='c1' mb={12} title={tip} display='flex' flexDirection='column' width='100%'>
-			<Box display='flex' flexGrow='1' justifyContent='space-between' mbe={4}>
+		<Box fontScale='c1' marginBlock={12} title={tip} display='flex' flexDirection='column' width='100%'>
+			<Box display='flex' flexGrow='1' justifyContent='space-between' marginBlockEnd={4}>
 				<div id={labelId}>{title}</div>
 
 				<Box color={warningThresholdCrossed ? 'status-font-on-danger' : 'status-font-on-success'}>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx
index 9cae1cdbe02d4..ee1168f1ec07e 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx
@@ -18,7 +18,7 @@ const CountMACCard = ({ macsCount }: CountMACCardProps) => {
 		>
 			<FeatureUsageCardBody>
 				<Box fontScale='h1'>
-					<Icon color='font-annotation' name='headset' size={40} mie={4} />
+					<Icon color='font-annotation' name='headset' size={40} marginInlineEnd={4} />
 					{macsCount}
 				</Box>
 			</FeatureUsageCardBody>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
index d65c3c4ad83d2..b0237f5258ed9 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
@@ -18,7 +18,7 @@ const CountSeatsCard = ({ activeUsers }: CountSeatsCardProps) => {
 		>
 			<FeatureUsageCardBody>
 				<Box fontScale='h1' display='flex' alignItems='center' justifyContent='center'>
-					<Icon color='font-annotation' name='user' size={40} mie={4} />
+					<Icon color='font-annotation' name='user' size={40} marginInlineEnd={4} />
 					{activeUsers}
 				</Box>
 			</FeatureUsageCardBody>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/FeaturesCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/FeaturesCard.tsx
index 74335d79ddc9e..aea8030dad5a1 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/FeaturesCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/FeaturesCard.tsx
@@ -68,9 +68,9 @@ const FeaturesCard = ({ activeModules, isEnterprise }: FeaturesCardProps) => {
 			<CardBody>
 				<Box display='flex' flexWrap='wrap' justifyContent='space-between' flexDirection={isSmall ? 'row' : 'column'}>
 					{getFeatureSet(activeModules, isEnterprise).map(({ success, title, infoText }, index) => (
-						<Box key={`feature_${index}`} display='flex' alignItems='center' mbe={4} width={isSmall ? '50%' : 'full'}>
+						<Box key={`feature_${index}`} display='flex' alignItems='center' marginBlockEnd={4} width={isSmall ? '50%' : 'full'}>
 							<FramedIcon success={success} icon={success ? 'check' : 'lock'} />
-							<Box is='p' fontScale='p2' mis={12} mie={2} color='font-secondary-info'>
+							<Box is='p' fontScale='p2' marginInlineStart={12} marginInlineEnd={2} color='font-secondary-info'>
 								{t(title)}
 							</Box>
 							{infoText && <InfoTextIconModal title={t(title)} infoText={t(infoText)} />}
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/ManageLicenseModal/LicenseFilePreview.tsx b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/ManageLicenseModal/LicenseFilePreview.tsx
index fc2c46c6a4f31..9644a80f7f4c2 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/ManageLicenseModal/LicenseFilePreview.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/ManageLicenseModal/LicenseFilePreview.tsx
@@ -9,9 +9,9 @@ const LicenseFilePreview = ({ selectedFile, handleRemoveFile }: { selectedFile:
 	const { t } = useTranslation();
 
 	return (
-		<Box display='flex' alignItems='center' padding={4} mbe={8} borderRadius={4} borderWidth={1} borderColor='extra-light'>
+		<Box display='flex' alignItems='center' padding={4} marginBlockEnd={8} borderRadius={4} borderWidth={1} borderColor='extra-light'>
 			<FilePreviewIcon format={getFileExtension(selectedFile.name)} />
-			<Box flexGrow={1} withTruncatedText mis={8} display='flex' flexDirection='column'>
+			<Box flexGrow={1} withTruncatedText marginInlineStart={8} display='flex' flexDirection='column'>
 				<Box fontScale='p2' color='info' withTruncatedText>
 					{selectedFile.name}
 				</Box>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/ManageLicenseModal/ManageLicenseModal.tsx b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/ManageLicenseModal/ManageLicenseModal.tsx
index cca560e2ef866..7c6c054559d75 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/ManageLicenseModal/ManageLicenseModal.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/ManageLicenseModal/ManageLicenseModal.tsx
@@ -120,7 +120,7 @@ const ManageLicenseModal = ({ enterpriseLicense, onCancel }: ManageLicenseModalP
 			onConfirm={handleApply}
 			onCancel={onCancel}
 		>
-			<Box fontScale='p2' mbe={8}>
+			<Box fontScale='p2' marginBlockEnd={8}>
 				{t('Manage_license_description')}
 			</Box>
 			<Box
@@ -142,9 +142,9 @@ const ManageLicenseModal = ({ enterpriseLicense, onCancel }: ManageLicenseModalP
 				<FieldRow>
 					<TextAreaInput
 						withRichContent
-						mbe={8}
+						marginBlockEnd={8}
 						width='100%'
-						bg={isDragOver ? 'tint' : undefined}
+						backgroundColor={isDragOver ? 'tint' : undefined}
 						borderStyle={isDragOver ? 'dashed' : 'solid'}
 						borderColor={isDragOver ? 'stroke-highlight' : 'stroke-light'}
 						style={{ fontFamily: 'monospace' }}
@@ -170,7 +170,7 @@ const ManageLicenseModal = ({ enterpriseLicense, onCancel }: ManageLicenseModalP
 				)}
 			</ButtonGroup>
 			{showStatus && (
-				<Box mbs={16}>
+				<Box marginBlockStart={16}>
 					<LicenseStatus isValidating={isValidating} isValid={isLicenseValid} invalidMessage={invalidMessage} />
 				</Box>
 			)}
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx
index 6d99949ca7cc6..2d9bb52137f87 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardCommunity.tsx
@@ -12,10 +12,10 @@ const PlanCardCommunity = () => {
 			<PlanCardHeader name={t('Community')} />
 			<CardBody flexDirection='column'>
 				<Box display='flex' flexDirection='row' alignItems='center'>
-					<Icon name='card' size={24} mie={12} /> {t('free_per_month_user')}
+					<Icon name='card' size={24} marginInlineEnd={12} /> {t('free_per_month_user')}
 				</Box>
 				<Box display='flex' flexDirection='row' alignItems='center'>
-					<Icon name='cloud-plus' size={24} mie={12} /> {t('Self_managed_hosting')}
+					<Icon name='cloud-plus' size={24} marginInlineEnd={12} /> {t('Self_managed_hosting')}
 				</Box>
 				<PlanCardLicenseDetails />
 			</CardBody>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardHeader.tsx b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardHeader.tsx
index 1e3fce39c11d1..2fec97fe63ec1 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardHeader.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardHeader.tsx
@@ -5,7 +5,7 @@ export type PlanCardHeaderProps = { name: string };
 const PlanCardHeader = ({ name }: PlanCardHeaderProps) => {
 	return (
 		<CardHeader>
-			<Icon name='rocketchat' color={Palette.badge['badge-background-level-4'].toString()} size='x28' mie={4} />
+			<Icon name='rocketchat' color={Palette.badge['badge-background-level-4'].toString()} size='x28' marginInlineEnd={4} />
 			<CardTitle variant='h3'>{name}</CardTitle>
 		</CardHeader>
 	);
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardLicenseDetails.tsx b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardLicenseDetails.tsx
index b5928fd0fcf2e..70b43643ef448 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardLicenseDetails.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardLicenseDetails.tsx
@@ -34,7 +34,7 @@ const PlanCardLicenseDetails = () => {
 			<Divider />
 			<Box>
 				<Box display='flex'>
-					<Box mie={4}>{t('Site_Url')}</Box>
+					<Box marginInlineEnd={4}>{t('Site_Url')}</Box>
 					{hasCopiedSiteURL ? (
 						<IconButton success icon='check' mini />
 					) : (
@@ -47,7 +47,7 @@ const PlanCardLicenseDetails = () => {
 			</Box>
 			<Box>
 				<Box display='flex'>
-					<Box mie={4}>{t('Hashed_Site_Url')}</Box>
+					<Box marginInlineEnd={4}>{t('Hashed_Site_Url')}</Box>
 					{hasCopiedHashed ? (
 						<IconButton success icon='check' mini />
 					) : (
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardPremium.tsx b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardPremium.tsx
index abce2bf2edf5a..1705150408eea 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardPremium.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardPremium.tsx
@@ -34,13 +34,13 @@ const PlanCardPremium = ({ licenseInformation, licenseLimits }: PlanCardProps) =
 			<CardBody flexDirection='column'>
 				{licenseLimits?.activeUsers.max === Infinity && (
 					<Box display='flex' alignItems='center'>
-						<Icon name='lightning' size='x24' mie={12} />
+						<Icon name='lightning' size='x24' marginInlineEnd={12} />
 						{t('Unlimited_seats')}
 					</Box>
 				)}
 				{visualExpiration && (
 					<Box display='flex' alignItems='center'>
-						<Icon name='calendar' size='x24' mie={12} />
+						<Icon name='calendar' size='x24' marginInlineEnd={12} />
 						<span>
 							{isAutoRenew ? (
 								t('Renews_DATE', { date: formatDate(visualExpiration || '') })
@@ -54,7 +54,7 @@ const PlanCardPremium = ({ licenseInformation, licenseLimits }: PlanCardProps) =
 				)}
 				{!isLoading ? (
 					<Box display='flex' alignItems='center'>
-						<Icon name='cloud-plus' size='x24' mie={12} /> {isSelfHosted ? t('Self_managed_hosting') : t('Cloud_hosting')}
+						<Icon name='cloud-plus' size='x24' marginInlineEnd={12} /> {isSelfHosted ? t('Self_managed_hosting') : t('Cloud_hosting')}
 					</Box>
 				) : (
 					<Skeleton />
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardTrial.tsx b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardTrial.tsx
index 9d9fdff84c4dd..8dda1c7ebb981 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardTrial.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/PlanCard/PlanCardTrial.tsx
@@ -26,7 +26,7 @@ const PlanCardTrial = ({ licenseInformation }: PlanCardProps) => {
 			<CardBody flexDirection='column'>
 				{visualExpiration && (
 					<CardRow>
-						<Box fontScale='p2b' mie={8}>
+						<Box fontScale='p2b' marginInlineEnd={8}>
 							{t('Trial_active')}
 						</Box>
 						<Tag>{t('n_days_left', { n: differenceInDays(new Date(visualExpiration), new Date()) })}</Tag>
@@ -54,7 +54,13 @@ const PlanCardTrial = ({ licenseInformation }: PlanCardProps) => {
 				<PlanCardLicenseDetails />
 			</CardBody>
 			<CardControls>
-				<UpgradeButton target='plan_card_trial' action={isSalesAssisted ? 'finish_purchase' : 'contact_sales'} primary mbs='auto' w='full'>
+				<UpgradeButton
+					target='plan_card_trial'
+					action={isSalesAssisted ? 'finish_purchase' : 'contact_sales'}
+					primary
+					marginBlockStart='auto'
+					width='full'
+				>
 					{isSalesAssisted ? t('Finish_purchase') : t('Contact_sales')}
 				</UpgradeButton>
 			</CardControls>
diff --git a/apps/meteor/client/views/admin/users/AdminInviteUsers.tsx b/apps/meteor/client/views/admin/users/AdminInviteUsers.tsx
index c9a72a4d2b42c..fffb0e4329ce6 100644
--- a/apps/meteor/client/views/admin/users/AdminInviteUsers.tsx
+++ b/apps/meteor/client/views/admin/users/AdminInviteUsers.tsx
@@ -59,17 +59,17 @@ const AdminInviteUsers = () => {
 	return (
 		<>
 			<ContextualbarScrollableContent>
-				<Box is='h2' fontScale='h2' mb={8}>
+				<Box is='h2' fontScale='h2' marginBlock={8}>
 					{t('Send_invitation_email')}
 				</Box>
-				<Box fontScale='p2' mb={8}>
+				<Box fontScale='p2' marginBlock={8}>
 					{t('Send_invitation_email_info')}
 				</Box>
 				<TextAreaInput rows={5} flexGrow={0} onChange={(e: ChangeEvent<HTMLInputElement>): void => setText(e.currentTarget.value)} />
 			</ContextualbarScrollableContent>
 			<ContextualbarFooter>
 				<ButtonGroup stretch>
-					<Button icon='send' primary onClick={handleClick} disabled={!getEmails(text).length} alignItems='stretch' mb={8}>
+					<Button icon='send' primary onClick={handleClick} disabled={!getEmails(text).length} alignItems='stretch' marginBlock={8}>
 						{t('Send')}
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/admin/users/AdminUserForm.tsx b/apps/meteor/client/views/admin/users/AdminUserForm.tsx
index 3433d62f9facf..a72c4f9220393 100644
--- a/apps/meteor/client/views/admin/users/AdminUserForm.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserForm.tsx
@@ -250,15 +250,21 @@ const AdminUserForm = ({ userData, onReload, context, refetchUserFormData, roleD
 							</FieldError>
 						)}
 						{isLoadingSmtpStatus ? (
-							<Skeleton w='full' h={26} />
+							<Skeleton width='full' height={26} />
 						) : (
 							<>
-								<FieldRow mbs={12}>
+								<FieldRow marginBlockStart={12}>
 									<Box display='flex' alignItems='center'>
-										<FieldLabel htmlFor={verifiedId} p={0} disabled={!isSmtpEnabled || !isVerificationNeeded} m={0}>
+										<FieldLabel htmlFor={verifiedId} padding={0} disabled={!isSmtpEnabled || !isVerificationNeeded} margin={0}>
 											{t('Mark_email_as_verified')}
 										</FieldLabel>
-										<Icon name='info-circled' size='x20' mis={4} title={t('Enable_to_bypass_email_verification')} color='default' />
+										<Icon
+											name='info-circled'
+											size='x20'
+											marginInlineStart={4}
+											title={t('Enable_to_bypass_email_verification')}
+											color='default'
+										/>
 									</Box>
 									<Controller
 										control={control}
@@ -365,7 +371,7 @@ const AdminUserForm = ({ userData, onReload, context, refetchUserFormData, roleD
 							<PasswordFieldSkeleton />
 						) : (
 							<>
-								<FieldLabel htmlFor={passwordId} mbe={8}>
+								<FieldLabel htmlFor={passwordId} marginBlockEnd={8}>
 									{t('Password')}
 								</FieldLabel>
 								<AdminUserSetRandomPasswordRadios
@@ -430,10 +436,10 @@ const AdminUserForm = ({ userData, onReload, context, refetchUserFormData, roleD
 					)}
 					<Field>
 						{isLoadingSmtpStatus ? (
-							<Skeleton w='full' h={26} />
+							<Skeleton width='full' height={26} />
 						) : (
 							<>
-								<Box display='flex' flexDirection='row' alignItems='center' justifyContent='space-between' flexGrow={1} mbe={8}>
+								<Box display='flex' flexDirection='row' alignItems='center' justifyContent='space-between' flexGrow={1} marginBlockEnd={8}>
 									<FieldLabel htmlFor={sendWelcomeEmailId} disabled={!isSmtpEnabled}>
 										{t('Send_welcome_email')}
 									</FieldLabel>
@@ -455,7 +461,7 @@ const AdminUserForm = ({ userData, onReload, context, refetchUserFormData, roleD
 									</FieldRow>
 								</Box>
 								{!isSmtpEnabled && (
-									<FieldHint id={`${sendWelcomeEmailId}-hint`} mbs={0}>
+									<FieldHint id={`${sendWelcomeEmailId}-hint`} marginBlockStart={0}>
 										<Trans
 											i18nKey='Send_Email_SMTP_Warning'
 											components={{
@@ -530,8 +536,8 @@ const AdminUserForm = ({ userData, onReload, context, refetchUserFormData, roleD
 						<>
 							<Button
 								fontScale='c2'
-								w='x140'
-								h='x28'
+								width='x140'
+								height='x28'
 								display='flex'
 								alignItems='center'
 								justifyContent='center'
@@ -545,7 +551,7 @@ const AdminUserForm = ({ userData, onReload, context, refetchUserFormData, roleD
 				</FieldGroup>
 			</ContextualbarScrollableContent>
 			<ContextualbarFooter>
-				<Button primary disabled={!isDirty} onClick={handleSubmit(handleSaveUser)} w='100%'>
+				<Button primary disabled={!isDirty} onClick={handleSubmit(handleSaveUser)} width='100%'>
 					{isNewUserPage ? t('Add_user') : t('Save_user')}
 				</Button>
 			</ContextualbarFooter>
diff --git a/apps/meteor/client/views/admin/users/AdminUserFormWithData.tsx b/apps/meteor/client/views/admin/users/AdminUserFormWithData.tsx
index 2806d4a31b5d6..14de0fbfaf781 100644
--- a/apps/meteor/client/views/admin/users/AdminUserFormWithData.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserFormWithData.tsx
@@ -26,7 +26,7 @@ const AdminUserFormWithData = ({ uid, onReload, context, roleData, roleError }:
 
 	if (isPending) {
 		return (
-			<Box p={24}>
+			<Box padding={24}>
 				<FormSkeleton />
 			</Box>
 		);
@@ -34,7 +34,7 @@ const AdminUserFormWithData = ({ uid, onReload, context, roleData, roleError }:
 
 	if (isError) {
 		return (
-			<Callout m={16} type='danger'>
+			<Callout margin={16} type='danger'>
 				{t('User_not_found')}
 			</Callout>
 		);
@@ -42,7 +42,7 @@ const AdminUserFormWithData = ({ uid, onReload, context, roleData, roleError }:
 
 	if (data?.user && !!data.user.federated) {
 		return (
-			<Callout m={16} type='danger'>
+			<Callout margin={16} type='danger'>
 				{t('Edit_Federated_User_Not_Allowed')}
 			</Callout>
 		);
diff --git a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
index e8708931f399c..b6cfcb792821a 100644
--- a/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserInfoWithData.tsx
@@ -108,7 +108,7 @@ const AdminUserInfoWithData = ({ uid, onReload, tab }: AdminUserInfoWithDataProp
 
 	if (error || !user || !data?.user) {
 		return (
-			<ContextualbarContent pb={16}>
+			<ContextualbarContent paddingBlock={16}>
 				<Callout type='danger'>{t('User_not_found')}</Callout>
 			</ContextualbarContent>
 		);
diff --git a/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordContent.tsx b/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordContent.tsx
index a7c30bceceb54..38e3745018f69 100644
--- a/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordContent.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordContent.tsx
@@ -39,7 +39,15 @@ const AdminUserSetRandomPasswordContent = ({
 
 	return (
 		<>
-			<Box display='flex' flexDirection='row' alignItems='center' justifyContent='space-between' flexGrow={1} mbe={8} mbs={12}>
+			<Box
+				display='flex'
+				flexDirection='row'
+				alignItems='center'
+				justifyContent='space-between'
+				flexGrow={1}
+				marginBlockEnd={8}
+				marginBlockStart={12}
+			>
 				<FieldLabel htmlFor={requirePasswordChangeId}>{t('Require_password_change')}</FieldLabel>
 				<FieldRow>
 					<Controller
diff --git a/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordRadios.tsx b/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordRadios.tsx
index 25b0bda5c99bc..55f9249fb5b61 100644
--- a/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordRadios.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserSetRandomPasswordRadios.tsx
@@ -33,8 +33,8 @@ const AdminUserSetRandomPasswordRadios = ({
 
 	return (
 		<>
-			<Box display='flex' flexDirection='row' alignItems='center' flexGrow={1} mbe={8}>
-				<FieldRow mie={8}>
+			<Box display='flex' flexDirection='row' alignItems='center' flexGrow={1} marginBlockEnd={8}>
+				<FieldRow marginInlineEnd={8}>
 					<Controller
 						control={control}
 						name='setRandomPassword'
@@ -56,7 +56,7 @@ const AdminUserSetRandomPasswordRadios = ({
 				</FieldLabel>
 			</Box>
 			{!isSmtpEnabled && (
-				<FieldHint id={`${setRandomPasswordId}-hint`} mbe={16} mbs={0}>
+				<FieldHint id={`${setRandomPasswordId}-hint`} marginBlockEnd={16} marginBlockStart={0}>
 					<Trans
 						i18nKey='Send_Email_SMTP_Warning'
 						components={{
@@ -67,7 +67,7 @@ const AdminUserSetRandomPasswordRadios = ({
 				</FieldHint>
 			)}
 			<Box display='flex' flexDirection='row' alignItems='center' flexGrow={1}>
-				<FieldRow mie={8}>
+				<FieldRow marginInlineEnd={8}>
 					<Controller
 						control={control}
 						name='setRandomPassword'
diff --git a/apps/meteor/client/views/admin/users/AdminUserUpgrade.tsx b/apps/meteor/client/views/admin/users/AdminUserUpgrade.tsx
index cf423011ebcd9..dec1ab231ad51 100644
--- a/apps/meteor/client/views/admin/users/AdminUserUpgrade.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserUpgrade.tsx
@@ -14,7 +14,7 @@ const AdminUserUpgrade = () => {
 
 	return (
 		<>
-			<ContextualbarScrollableContent h='full'>
+			<ContextualbarScrollableContent height='full'>
 				<ContextualbarEmptyContent icon='warning' title={t('Seat_limit_reached')} subtitle={t('Seat_limit_reached_Description')} />
 			</ContextualbarScrollableContent>
 			<ContextualbarFooter>
diff --git a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
index 2fe17c50a6e60..1bc0bbcfd8607 100644
--- a/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUsersPage.tsx
@@ -116,7 +116,7 @@ const AdminUsersPage = () => {
 					<UsersPageHeaderContent isSeatsCapExceeded={isSeatsCapExceeded} seatsCap={seatsCap} />
 				</PageHeader>
 				{preventAction?.includes('activeUsers') && (
-					<Callout type='danger' title={t('subscription.callout.servicesDisruptionsOccurring')} mbe={19} mi={24}>
+					<Callout type='danger' title={t('subscription.callout.servicesDisruptionsOccurring')} marginBlockEnd={19} marginInline={24}>
 						<Trans
 							i18nKey='subscription.callout.description.limitsExceeded'
 							count={preventAction.length}
@@ -142,7 +142,7 @@ const AdminUsersPage = () => {
 					</TabsItem>
 					<TabsItem selected={tab === 'pending'} onClick={() => handleTabChange('pending')} display='flex' flexDirection='row'>
 						{`${t('Pending')} `}
-						{pendingUsersCount.isLoading && <Skeleton variant='circle' height='x16' width='x16' mis={8} />}
+						{pendingUsersCount.isLoading && <Skeleton variant='circle' height='x16' width='x16' marginInlineStart={8} />}
 						{pendingUsersCount.isSuccess && `(${pendingUsersCount.data})`}
 					</TabsItem>
 					<TabsItem selected={tab === 'active'} onClick={() => handleTabChange('active')}>
diff --git a/apps/meteor/client/views/admin/users/PasswordFieldSkeleton.tsx b/apps/meteor/client/views/admin/users/PasswordFieldSkeleton.tsx
index 1649aa63ea8ae..32eac1ed7780c 100644
--- a/apps/meteor/client/views/admin/users/PasswordFieldSkeleton.tsx
+++ b/apps/meteor/client/views/admin/users/PasswordFieldSkeleton.tsx
@@ -2,14 +2,14 @@ import { Box, Skeleton } from '@rocket.chat/fuselage';
 
 const PasswordFieldSkeleton = () => (
 	<>
-		<Skeleton w={65} h={20} />
+		<Skeleton width={65} height={20} />
 		<Box display='flex' flexDirection='row' justifyContent='space-between'>
-			<Skeleton w={232} h={26} />
-			<Skeleton w={20} h={20} variant='circle' />
+			<Skeleton width={232} height={26} />
+			<Skeleton width={20} height={20} variant='circle' />
 		</Box>
 		<Box display='flex' flexDirection='row' justifyContent='space-between'>
-			<Skeleton w={105} h={26} />
-			<Skeleton w={20} h={20} variant='circle' />
+			<Skeleton width={105} height={26} />
+			<Skeleton width={20} height={20} variant='circle' />
 		</Box>
 	</>
 );
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
index c4d8ae23ede5e..f4e4251060049 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.tsx
@@ -139,7 +139,7 @@ const UsersTable = ({
 			),
 			tab === 'all' && showVoipExtension && (
 				<GenericTableHeaderCell
-					w='x180'
+					width='x180'
 					key='freeSwitchExtension'
 					direction={sortData?.sortDirection}
 					active={sortData?.sortBy === 'freeSwitchExtension'}
@@ -149,7 +149,7 @@ const UsersTable = ({
 					{t('Voice_call_extension')}
 				</GenericTableHeaderCell>
 			),
-			<GenericTableHeaderCell key='actions' w={tab === 'pending' ? 'x204' : 'x50'}>
+			<GenericTableHeaderCell key='actions' width={tab === 'pending' ? 'x204' : 'x50'}>
 				{t('Actions')}
 			</GenericTableHeaderCell>,
 		],
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
index 32ab40987cc3f..2a7bc94fcfcc4 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
@@ -64,7 +64,7 @@ const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps
 
 	return (
 		<Box
-			mb={16}
+			marginBlock={16}
 			is='form'
 			onSubmit={(event) => {
 				event.preventDefault();
@@ -84,7 +84,7 @@ const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps
 					aria-label={t('Search_Users')}
 				/>
 			</Margins>
-			<Box mb={4} width={isLargeScreenOrBigger ? 'unset' : '100%'}>
+			<Box marginBlock={4} width={isLargeScreenOrBigger ? 'unset' : '100%'}>
 				<MultiSelectCustom
 					dropdownOptions={userRolesFilterStructure}
 					defaultTitle='All_roles'
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
index 174de69d3cbd8..ba8cb61146a70 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTableRow.tsx
@@ -133,7 +133,7 @@ const UsersTableRow = ({ user, tab, isMobile, isLaptop, isSeatsCapExceeded, show
 				<Box display='flex' alignItems='center'>
 					{username && <UserAvatar size={isMobile || isLaptop ? 'x28' : 'x40'} username={username} etag={avatarETag} />}
 					<Box display='flex' flexGrow={1} flexShrink={1} flexBasis='0%' alignSelf='center' alignItems='center' withTruncatedText>
-						<Box mi={8}>
+						<Box marginInline={8}>
 							<UserStatus status={status || Status.OFFLINE} />
 						</Box>
 						<Box fontScale='p2' withTruncatedText>
diff --git a/apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx b/apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx
index 9174efb4cc89c..0b39ca5c35c68 100644
--- a/apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx
+++ b/apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx
@@ -12,23 +12,31 @@ const AnalyticsReports = () => {
 
 	return (
 		<Box display='flex' flexDirection='column' overflow='hidden' height='100%'>
-			<Callout title={t('Server_logs_access_has_changed_callout_title')} mbe={16}>
+			<Callout title={t('Server_logs_access_has_changed_callout_title')} marginBlockEnd={16}>
 				<MarkdownText variant='inline' content={t('Server_logs_access_has_changed_callout_description', { docsUrl: links.go.logsDocs })} />
 			</Callout>
-			<Box backgroundColor='light' p={20} pbe={28} mbe={16} borderRadius={4}>
-				<Box display='flex' flexDirection='row' alignItems='center' mbe={20}>
-					<Box display='flex' justifyContent='center' alignItems='center' borderRadius={2} p={4} mie={8} bg='status-background-info'>
+			<Box backgroundColor='light' padding={20} paddingBlockEnd={28} marginBlockEnd={16} borderRadius={4}>
+				<Box display='flex' flexDirection='row' alignItems='center' marginBlockEnd={20}>
+					<Box
+						display='flex'
+						justifyContent='center'
+						alignItems='center'
+						borderRadius={2}
+						padding={4}
+						marginInlineEnd={8}
+						backgroundColor='status-background-info'
+					>
 						<Icon name='info' size={20} color='info' />
 					</Box>
 					<Box fontScale='h4'>{t('How_and_why_we_collect_usage_data')}</Box>
 				</Box>
-				<Box fontScale='p1' mbe={16}>
+				<Box fontScale='p1' marginBlockEnd={16}>
 					{t('Analytics_page_briefing_first_paragraph')}
 				</Box>
 				<Box fontScale='p1'>{t('Analytics_page_briefing_second_paragraph')}</Box>
 			</Box>
 			<Scrollable vertical>
-				<Box mbe={8} padding={8} bg='neutral' borderRadius={4} height='100%'>
+				<Box marginBlockEnd={8} padding={8} backgroundColor='neutral' borderRadius={4} height='100%'>
 					{isSuccess && <pre>{JSON.stringify(data, null, '\t')}</pre>}
 					{isError && t('Something_went_wrong_try_again_later')}
 					{isLoading && Array.from({ length: 10 }).map((_, index) => <Skeleton key={index} />)}
diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionItem.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionItem.tsx
index d902e578592f5..db5664eea2ea2 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionItem.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardActionItem.tsx
@@ -14,7 +14,7 @@ const VersionCardActionItem = ({ icon, label, danger }: VersionCardActionItemPro
 	return (
 		<Box display='flex' alignItems='center' color={danger ? 'danger' : 'secondary-info'} fontScale='p2m'>
 			<FramedIcon danger={danger} icon={icon} />
-			<Box mis={12}>{label}</Box>
+			<Box marginInlineStart={12}>{label}</Box>
 		</Box>
 	);
 };
diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardSkeleton.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardSkeleton.tsx
index 8a5562811411e..e2899ac98da7f 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardSkeleton.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/components/VersionCardSkeleton.tsx
@@ -6,15 +6,15 @@ export const VersionCardSkeleton = () => {
 			<Skeleton height={28} width={160} />
 			<Skeleton height={28} width={150} />
 			<Box display='flex' width={160} height={28} alignItems='center'>
-				<Skeleton height={38} width={28} mie={12} />
+				<Skeleton height={38} width={28} marginInlineEnd={12} />
 				<Skeleton height={20} width={120} />
 			</Box>
 			<Box display='flex' width={180} height={28} alignItems='center'>
-				<Skeleton height={38} width={28} mie={12} />
+				<Skeleton height={38} width={28} marginInlineEnd={12} />
 				<Skeleton height={20} width={140} />
 			</Box>
 			<Box display='flex' width={160} height={28} alignItems='center'>
-				<Skeleton height={38} width={28} mie={12} />
+				<Skeleton height={38} width={28} marginInlineEnd={12} />
 				<Skeleton height={20} width={120} />
 			</Box>
 			<Skeleton height={50} width={160} />
diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceModal.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceModal.tsx
index 548b287749fcf..a1dd972a579bf 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceModal.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceModal.tsx
@@ -56,7 +56,7 @@ const RegisterWorkspaceModal = ({ onClose, onStatusChange, ...props }: RegisterW
 						{bulletFeatures.map((features) => (
 							<li key={features.key}>
 								<strong>{features.title}</strong>
-								<Box is='p' mbs={4}>
+								<Box is='p' marginBlockStart={4}>
 									{features.description}
 								</Box>
 							</li>
@@ -68,7 +68,7 @@ const RegisterWorkspaceModal = ({ onClose, onStatusChange, ...props }: RegisterW
 				</Box>
 			</ModalContent>
 			<ModalFooter>
-				<Box is='div' display='flex' justifyContent='space-between' alignItems='center' w='full'>
+				<Box is='div' display='flex' justifyContent='space-between' alignItems='center' width='full'>
 					<ExternalLink to={documentationLink}>{t('Learn_more')}</ExternalLink>
 					<ButtonGroup align='end'>
 						<Button onClick={handleTokenModal}>{t('Use_token')}</Button>
diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceSetupModal/RegisterWorkspaceSetupStepOneModal.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceSetupModal/RegisterWorkspaceSetupStepOneModal.tsx
index 987416ab013cf..04df61a99dc54 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceSetupModal/RegisterWorkspaceSetupStepOneModal.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceSetupModal/RegisterWorkspaceSetupStepOneModal.tsx
@@ -86,7 +86,7 @@ const RegisterWorkspaceSetupStepOneModal = ({
 					<Box is='p' fontSize='p2' withRichContent>
 						{t('RegisterWorkspace_Setup_Subtitle')}
 					</Box>
-					<Field pbs={10}>
+					<Field paddingBlockStart={10}>
 						<FieldLabel htmlFor={emailField}>{t('RegisterWorkspace_Setup_Label')}</FieldLabel>
 						<FieldRow>
 							<TextInput
@@ -97,12 +97,12 @@ const RegisterWorkspaceSetupStepOneModal = ({
 							/>
 						</FieldRow>
 					</Field>
-					<Box mb={16} fontSize='c1'>
+					<Box marginBlock={16} fontSize='c1'>
 						<Box is='p'>
 							<strong>{t('RegisterWorkspace_Setup_Have_Account_Title')}</strong>
 						</Box>
 						<Box is='p'>{t('RegisterWorkspace_Setup_Have_Account_Subtitle')}</Box>
-						<Box is='p' pbs={16}>
+						<Box is='p' paddingBlockStart={16}>
 							<strong>{t('RegisterWorkspace_Setup_No_Account_Title')}</strong>
 						</Box>
 						<Box is='p'>{t('RegisterWorkspace_Setup_No_Account_Subtitle')}</Box>
diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceSetupModal/RegisterWorkspaceSetupStepTwoModal.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceSetupModal/RegisterWorkspaceSetupStepTwoModal.tsx
index 676ebd286a485..e3ec09ed2645e 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceSetupModal/RegisterWorkspaceSetupStepTwoModal.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceSetupModal/RegisterWorkspaceSetupStepTwoModal.tsx
@@ -94,7 +94,7 @@ const RegisterWorkspaceSetupStepTwoModal = ({ email, step, setStep, onClose, int
 						</Trans>
 					</Box>
 					<Box is='p'>{t('RegisterWorkspace_Setup_Email_Verification')}</Box>
-					<Field pbs={10}>
+					<Field paddingBlockStart={10}>
 						<FieldLabel>{t('Security_code')}</FieldLabel>
 						<FieldRow>
 							<TextInput defaultValue={intentData.user_code} disabled />
@@ -103,14 +103,14 @@ const RegisterWorkspaceSetupStepTwoModal = ({ email, step, setStep, onClose, int
 				</Box>
 			</ModalContent>
 			<ModalFooter>
-				<Box is='div' display='flex' justifyContent='start' fontSize='c1' w='full'>
+				<Box is='div' display='flex' justifyContent='start' fontSize='c1' width='full'>
 					<Trans i18nKey='RegisterWorkspace_Didnt_Receive_Email'>
 						Didn't receive email?{' '}
-						<Box is='a' pi={4} onClick={handleResendRegistrationEmail}>
+						<Box is='a' paddingInline={4} onClick={handleResendRegistrationEmail}>
 							Resend
 						</Box>{' '}
 						or{' '}
-						<Box is='a' pi={4} onClick={handleBackFromConfirmation}>
+						<Box is='a' paddingInline={4} onClick={handleBackFromConfirmation}>
 							change email
 						</Box>
 					</Trans>
diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceTokenModal.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceTokenModal.tsx
index 348f9693797fa..6f2ca10aeb577 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceTokenModal.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisterWorkspaceTokenModal.tsx
@@ -90,7 +90,7 @@ const RegisterWorkspaceTokenModal = ({ onClose, onStatusChange, ...props }: Regi
 					</Trans>
 				</Box>
 				<Box is='p' fontSize='p2'>{`2. ${t('RegisterWorkspace_Token_Step_Two')}`}</Box>
-				<Field pbs={10}>
+				<Field paddingBlockStart={10}>
 					<FieldLabel>{t('Registration_Token')}</FieldLabel>
 					<FieldRow>
 						<TextInput onChange={handleTokenChange} value={token} />
diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisteredWorkspaceModal.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisteredWorkspaceModal.tsx
index b2d4f68dcd929..aeed931bc0283 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisteredWorkspaceModal.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/modals/RegisteredWorkspaceModal.tsx
@@ -67,7 +67,7 @@ const RegisteredWorkspaceModal = ({ onClose, onStatusChange, ...props }: Registe
 						{bulletFeatures.map((item, index) => (
 							<li key={index}>
 								<strong>{item.title}</strong>
-								<Box is='p' mbs={4}>
+								<Box is='p' marginBlockStart={4}>
 									{item.description}
 								</Box>
 							</li>
diff --git a/apps/meteor/client/views/admin/workspace/WorkspacePage.tsx b/apps/meteor/client/views/admin/workspace/WorkspacePage.tsx
index 6ae19a63992bd..3f5183988ba02 100644
--- a/apps/meteor/client/views/admin/workspace/WorkspacePage.tsx
+++ b/apps/meteor/client/views/admin/workspace/WorkspacePage.tsx
@@ -37,7 +37,7 @@ const WorkspacePage = ({
 	const warningMultipleInstances = !data?.isEnterprise && !statistics?.msEnabled && statistics?.instanceCount > 1;
 
 	return (
-		<Page bg='tint'>
+		<Page background='tint'>
 			<PageHeader title={t('Workspace')}>
 				{canViewStatistics && (
 					<ButtonGroup>
@@ -49,15 +49,15 @@ const WorkspacePage = ({
 				)}
 			</PageHeader>
 
-			<PageScrollableContentWithShadow p={16}>
+			<PageScrollableContentWithShadow padding={16}>
 				<Box marginBlock='none' marginInline='auto' width='full' color='default'>
 					{warningMultipleInstances && (
 						<Callout type='warning' title={t('Multiple_monolith_instances_alert')} marginBlockEnd={16}></Callout>
 					)}
-					<Box mbe={16}>
+					<Box marginBlockEnd={16}>
 						<VersionCard serverInfo={serverInfo} />
 					</Box>
-					<CardGrid breakpoints={{ lg: 4, xs: 4, p: 8 }}>
+					<CardGrid breakpoints={{ lg: 4, xs: 4, padding: 8 }}>
 						<DeploymentCard serverInfo={serverInfo} statistics={statistics} instances={instances} />
 						<UsersUploadsCard statistics={statistics} />
 						<MessagesRoomsCard statistics={statistics} />
diff --git a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardTextSeparator.tsx b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardTextSeparator.tsx
index 4d5ecef2e1273..b2b998f491b39 100644
--- a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardTextSeparator.tsx
+++ b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardTextSeparator.tsx
@@ -13,7 +13,7 @@ const WorkspaceCardTextSeparator = ({ icon, label, value, status }: WorkspaceCar
 	<TextSeparator
 		label={
 			<>
-				{icon && <Icon name={icon} size='x16' mie={4} />}
+				{icon && <Icon name={icon} size='x16' marginInlineEnd={4} />}
 				{status && (
 					<Box minWidth='x16' display='inline-flex' flexDirection='row' alignItems='flex-end' justifyContent='center'>
 						<StatusBullet status={status} />
diff --git a/apps/meteor/client/views/audit/AuditPage.tsx b/apps/meteor/client/views/audit/AuditPage.tsx
index 215516c1e3266..c58fff59e7dc9 100644
--- a/apps/meteor/client/views/audit/AuditPage.tsx
+++ b/apps/meteor/client/views/audit/AuditPage.tsx
@@ -34,7 +34,7 @@ const AuditPage = () => {
 					{t('Omnichannel')}
 				</TabsItem>
 			</Tabs>
-			<PageScrollableContentWithShadow mb={-4}>
+			<PageScrollableContentWithShadow marginBlock={-4}>
 				<Margins block={4}>
 					<AuditForm key={type} type={type} setSelectedRoom={setSelectedRoom} onSubmit={auditMutation.mutate} />
 					{selectedRoom?.encrypted && type === '' ? (
diff --git a/apps/meteor/client/views/audit/components/AuditForm.tsx b/apps/meteor/client/views/audit/components/AuditForm.tsx
index f9c999368ad1d..801f29d8f1277 100644
--- a/apps/meteor/client/views/audit/components/AuditForm.tsx
+++ b/apps/meteor/client/views/audit/components/AuditForm.tsx
@@ -60,7 +60,7 @@ const AuditForm = ({ type, onSubmit, setSelectedRoom }: AuditFormProps) => {
 				{type === 'u' && <UsersTab form={form} />}
 				{type === 'd' && <DirectTab form={form} />}
 				{type === 'l' && <OmnichannelTab form={form} />}
-				<Box flexShrink={0} mbs={28} mis={8}>
+				<Box flexShrink={0} marginBlockStart={28} marginInlineStart={8}>
 					<ButtonGroup align='end'>
 						<Button secondary onClick={() => window.print()}>
 							{t('Export')} {t('PDF')}
diff --git a/apps/meteor/client/views/audit/components/AuditModalField.tsx b/apps/meteor/client/views/audit/components/AuditModalField.tsx
index ac8d4ad2853b7..7c920de793f47 100644
--- a/apps/meteor/client/views/audit/components/AuditModalField.tsx
+++ b/apps/meteor/client/views/audit/components/AuditModalField.tsx
@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type AuditModalFieldProps = ComponentPropsWithoutRef<typeof Box>;
 
-const AuditModalField = (props: AuditModalFieldProps) => <Box mb={12} {...props} />;
+const AuditModalField = (props: AuditModalFieldProps) => <Box marginBlock={12} {...props} />;
 
 export default AuditModalField;
diff --git a/apps/meteor/client/views/audit/components/AuditModalLabel.tsx b/apps/meteor/client/views/audit/components/AuditModalLabel.tsx
index a34497cef7629..40ace2a3eabc9 100644
--- a/apps/meteor/client/views/audit/components/AuditModalLabel.tsx
+++ b/apps/meteor/client/views/audit/components/AuditModalLabel.tsx
@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type AuditModalLabelProps = ComponentPropsWithoutRef<typeof Box>;
 
-const AuditModalLabel = (props: AuditModalLabelProps) => <Box mbe={4} fontScale='p2m' color='titles-labels' {...props} />;
+const AuditModalLabel = (props: AuditModalLabelProps) => <Box marginBlockEnd={4} fontScale='p2m' color='titles-labels' {...props} />;
 
 export default AuditModalLabel;
diff --git a/apps/meteor/client/views/audit/components/SecurityLogDisplayModal.tsx b/apps/meteor/client/views/audit/components/SecurityLogDisplayModal.tsx
index ff7e48347f99d..9718428c8c2a9 100644
--- a/apps/meteor/client/views/audit/components/SecurityLogDisplayModal.tsx
+++ b/apps/meteor/client/views/audit/components/SecurityLogDisplayModal.tsx
@@ -35,7 +35,7 @@ const SecurityLogDisplayModal = ({ timestamp, actor, setting, changedFrom, chang
 					<Box display='flex' alignItems='center'>
 						{actor.type === 'user' && <UserAvatar size='x24' userId={actor._id} />}
 						<Box
-							mi={actor.type === 'user' ? 8 : 0}
+							marginInline={actor.type === 'user' ? 8 : 0}
 							fontScale='p2m'
 							display='flex'
 							flexDirection='column'
diff --git a/apps/meteor/client/views/audit/components/SecurityLogsTable.tsx b/apps/meteor/client/views/audit/components/SecurityLogsTable.tsx
index 89f0a64bd1217..7e1bfcdb26e7b 100644
--- a/apps/meteor/client/views/audit/components/SecurityLogsTable.tsx
+++ b/apps/meteor/client/views/audit/components/SecurityLogsTable.tsx
@@ -101,7 +101,7 @@ const SecurityLogsTable = () => {
 
 	return (
 		<>
-			<Box mb={16} display='flex' flexWrap='wrap' alignItems='flex-end'>
+			<Box marginBlock={16} display='flex' flexWrap='wrap' alignItems='flex-end'>
 				<Field width='unset' flexShrink={1} flexGrow={1}>
 					<Margins inline={6}>
 						<FieldLabel>{t('Date')}</FieldLabel>
@@ -182,7 +182,7 @@ const SecurityLogsTable = () => {
 									<GenericTableCell withTruncatedText>
 										<Box display='flex' alignItems='center'>
 											{item.actor.type === 'user' && (
-												<Box mie={4}>
+												<Box marginInlineEnd={4}>
 													<UserAvatar size='x24' userId={item.actor._id} />
 												</Box>
 											)}
diff --git a/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx b/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx
index 036ce14fc47fc..f89f5ebfea234 100644
--- a/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx
+++ b/apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx
@@ -104,13 +104,21 @@ const AudioMessageRecorder = ({ rid, isMicrophoneDenied }: AudioMessageRecorderP
 	}
 
 	return (
-		<Box display='flex' position='absolute' color='default' pi={4} pb={12} role='group' aria-label={t('Audio_recorder')}>
+		<Box
+			display='flex'
+			position='absolute'
+			color='default'
+			paddingInline={4}
+			paddingBlock={12}
+			role='group'
+			aria-label={t('Audio_recorder')}
+		>
 			{state === 'recording' && (
 				<>
 					<MessageComposerAction icon='circle-cross' title={t('Cancel_recording')} onClick={handleCancelButtonClick} />
-					<Box display='flex' alignItems='center' mi={4} justifyContent='center'>
+					<Box display='flex' alignItems='center' marginInline={4} justifyContent='center'>
 						<Icon name='rec' color='red' />
-						<Box fontScale='p2' mis={4} is='span' minWidth='x40'>
+						<Box fontScale='p2' marginInlineStart={4} is='span' minWidth='x40'>
 							{time}
 						</Box>
 					</Box>
diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx
index a89d88961f8a3..6b1378dd3b6ae 100644
--- a/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx
+++ b/apps/meteor/client/views/composer/EmojiPicker/EmojiCategoryRow.tsx
@@ -31,7 +31,7 @@ const EmojiCategoryRow = ({ item, handleLoadMore, handleSelectEmoji }: EmojiCate
 	if (isRowDivider(item)) {
 		return (
 			<>
-				<Box is='h4' fontScale='c1' pb={8} id={`emoji-list-category-${item.category}`}>
+				<Box is='h4' fontScale='c1' paddingBlock={8} id={`emoji-list-category-${item.category}`}>
 					{t(item.i18n)}
 				</Box>
 			</>
diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiPicker.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiPicker.tsx
index 851532caaa6fd..3919cde8ed9dd 100644
--- a/apps/meteor/client/views/composer/EmojiPicker/EmojiPicker.tsx
+++ b/apps/meteor/client/views/composer/EmojiPicker/EmojiPicker.tsx
@@ -214,7 +214,7 @@ const EmojiPicker = ({ reference, onClose, onPickEmoji }: EmojiPickerProps) => {
 						/>
 					))}
 				</EmojiPickerCategoryHeader>
-				<Divider mb={12} />
+				<Divider marginBlock={12} />
 				<EmojiPickerListArea role='tabpanel'>
 					{searching && <SearchingResult searchResults={searchResults} handleSelectEmoji={handleSelectEmoji} />}
 					{!searching && (
diff --git a/apps/meteor/client/views/composer/EmojiPicker/EmojiPickerDesktopDropdown.tsx b/apps/meteor/client/views/composer/EmojiPicker/EmojiPickerDesktopDropdown.tsx
index f010a3560a7ee..640d985a3a71b 100644
--- a/apps/meteor/client/views/composer/EmojiPicker/EmojiPickerDesktopDropdown.tsx
+++ b/apps/meteor/client/views/composer/EmojiPicker/EmojiPickerDesktopDropdown.tsx
@@ -61,8 +61,17 @@ const EmojiPickerDesktopDropdown = forwardRef(function ToolboxDropdownDesktop(
 	const style = useDropdownPosition(reference, targetRef);
 
 	return (
-		<Tile style={style} ref={mergedRef} elevation='2' pi='0' pb='0' display='flex' flexDirection='column' overflow='auto'>
-			<Box flexShrink={1} pb={12}>
+		<Tile
+			style={style}
+			ref={mergedRef}
+			elevation='2'
+			paddingInline='0'
+			paddingBlock='0'
+			display='flex'
+			flexDirection='column'
+			overflow='auto'
+		>
+			<Box flexShrink={1} paddingBlock={12}>
 				{children}
 			</Box>
 		</Tile>
diff --git a/apps/meteor/client/views/composer/EmojiPicker/ToneSelector/ToneSelector.tsx b/apps/meteor/client/views/composer/EmojiPicker/ToneSelector/ToneSelector.tsx
index ac5cd89882c11..529bc14543a11 100644
--- a/apps/meteor/client/views/composer/EmojiPicker/ToneSelector/ToneSelector.tsx
+++ b/apps/meteor/client/views/composer/EmojiPicker/ToneSelector/ToneSelector.tsx
@@ -58,7 +58,7 @@ const ToneSelector = ({ tone, setTone }: { tone: number; setTone: (tone: number)
 				onBlur={hide}
 				onKeyUp={handleKeyUp}
 				onKeyDown={handleKeyDown}
-				mis={4}
+				marginInlineStart={4}
 				icon={<ToneItem tone={tone} />}
 			/>
 			<PositionAnimated width='auto' visible={visible} anchor={ref} placement='left-middle'>
diff --git a/apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx b/apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx
index 37232dfbc28d0..385cbf0d0afa5 100644
--- a/apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx
+++ b/apps/meteor/client/views/composer/VideoMessageRecorder/VideoMessageRecorder.tsx
@@ -115,14 +115,14 @@ const VideoMessageRecorder = ({ rid, tmid, reference }: VideoMessageRecorderProp
 
 	return (
 		<PositionAnimated visible='visible' anchor={reference as RefObject<HTMLElement>} placement='top-end'>
-			<Box role='dialog' aria-label={t('Video_record')} bg='light' padding={4} borderRadius={4} elevation='2'>
+			<Box role='dialog' aria-label={t('Video_record')} backgroundColor='light' padding={4} borderRadius={4} elevation='2'>
 				<Box className={videoContainerClass} overflow='hidden' height={240} borderRadius={4}>
 					<video muted autoPlay playsInline ref={videoRef} width={320} height={240} />
 				</Box>
-				<Box mbs={4} display='flex' justifyContent='space-between'>
+				<Box marginBlockStart={4} display='flex' justifyContent='space-between'>
 					<Button aria-label={isRecording ? t('Stop_Recording') : t('Record')} small onClick={handleRecord}>
 						<Box is='span' display='flex' alignItems='center'>
-							<Icon size='x16' mie={time ? 4 : undefined} name={isRecording ? 'stop-unfilled' : 'rec'} />
+							<Icon size='x16' marginInlineEnd={time ? 4 : undefined} name={isRecording ? 'stop-unfilled' : 'rec'} />
 							{time && <span>{time}</span>}
 						</Box>
 					</Button>
diff --git a/apps/meteor/client/views/directory/RoomTags.tsx b/apps/meteor/client/views/directory/RoomTags.tsx
index 0a08ee1aec2c1..cf6504e66729a 100644
--- a/apps/meteor/client/views/directory/RoomTags.tsx
+++ b/apps/meteor/client/views/directory/RoomTags.tsx
@@ -10,7 +10,7 @@ const RoomTags = ({ room }: RoomTagsProps) => {
 	const { t } = useTranslation();
 
 	return (
-		<Box mi={4} alignItems='center' display='flex' withTruncatedText>
+		<Box marginInline={4} alignItems='center' display='flex' withTruncatedText>
 			<Margins inline={2}>
 				{room.default && <Tag variant='secondary'>{t('default')}</Tag>}
 				{room.featured && <Tag variant='secondary'>{t('featured')}</Tag>}
diff --git a/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx b/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx
index ae8933c385867..ecaed2f1963f3 100644
--- a/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx
+++ b/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx
@@ -43,7 +43,7 @@ const ChannelsTable = () => {
 					active={sortBy === 'usersCount'}
 					onClick={setSort}
 					sort='usersCount'
-					w='100px'
+					width='100px'
 				>
 					{t('Users')}
 				</GenericTableHeaderCell>,
@@ -54,7 +54,7 @@ const ChannelsTable = () => {
 						active={sortBy === 'createdAt'}
 						onClick={setSort}
 						sort='createdAt'
-						w='150px'
+						width='150px'
 					>
 						{t('Created_at')}
 					</GenericTableHeaderCell>
@@ -66,13 +66,13 @@ const ChannelsTable = () => {
 						active={sortBy === 'lastMessage'}
 						onClick={setSort}
 						sort='lastMessage'
-						w='150px'
+						width='150px'
 					>
 						{t('Last_Message')}
 					</GenericTableHeaderCell>
 				),
 				mediaQuery && (
-					<GenericTableHeaderCell key='belongsTo' w='150px'>
+					<GenericTableHeaderCell key='belongsTo' width='150px'>
 						{t('Belongs_To')}
 					</GenericTableHeaderCell>
 				),
diff --git a/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx b/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx
index 63bb58d4ca34a..e49f58722dfb7 100644
--- a/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx
+++ b/apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTableRow.tsx
@@ -25,10 +25,10 @@ const ChannelsTableRow = ({ onClick, room, mediaQuery }: ChannelsTableRowProps)
 			<GenericTableCell>
 				<Box display='flex'>
 					<Box flexGrow={0}>{avatarUrl && <Avatar size='x40' title={fname || name} url={avatarUrl} />}</Box>
-					<Box flexGrow={1} mi={8} withTruncatedText>
+					<Box flexGrow={1} marginInline={8} withTruncatedText>
 						<Box display='flex' alignItems='center'>
 							<RoomIcon room={room} />
-							<Box fontScale='p2m' mi={4}>
+							<Box fontScale='p2m' marginInline={4}>
 								{fname || name}
 							</Box>
 							<RoomTags room={room} />
diff --git a/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx b/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx
index 2162656556823..e33c1af2bdcb5 100644
--- a/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx
+++ b/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx
@@ -34,7 +34,7 @@ const TeamsTable = () => {
 				<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
 					{t('Name')}
 				</GenericTableHeaderCell>,
-				<GenericTableHeaderCell key='channelsCount' w='100px'>
+				<GenericTableHeaderCell key='channelsCount' width='100px'>
 					{t('Channels')}
 				</GenericTableHeaderCell>,
 				mediaQuery && (
@@ -44,7 +44,7 @@ const TeamsTable = () => {
 						active={sortBy === 'createdAt'}
 						onClick={setSort}
 						sort='createdAt'
-						w='150px'
+						width='150px'
 					>
 						{t('Created_at')}
 					</GenericTableHeaderCell>
diff --git a/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx b/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx
index 29472781712b4..1fc6d7560be9e 100644
--- a/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx
+++ b/apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTableRow.tsx
@@ -25,10 +25,10 @@ const TeamsTableRow = ({ onClick, team, mediaQuery }: TeamsTableRowProps) => {
 			<GenericTableCell>
 				<Box display='flex'>
 					<Box flexGrow={0}>{avatarUrl && <Avatar size='x40' title={fname || name} url={avatarUrl} />}</Box>
-					<Box flexGrow={1} mi={8} withTruncatedText>
+					<Box flexGrow={1} marginInline={8} withTruncatedText>
 						<Box display='flex' alignItems='center'>
 							<RoomIcon room={team} />
-							<Box fontScale='p2m' mi={4}>
+							<Box fontScale='p2m' marginInline={4}>
 								{fname || name}
 							</Box>
 							<RoomTags room={team} />
diff --git a/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx b/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx
index d507387db3365..5a45a025797f6 100644
--- a/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx
+++ b/apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTableRow.tsx
@@ -30,13 +30,13 @@ const UsersTableRow = ({
 				<FlexContainer>
 					<Box>
 						<FlexItem>{username && <UserAvatar size='x40' title={username} username={username} etag={avatarETag} />}</FlexItem>
-						<Box withTruncatedText mi={8}>
+						<Box withTruncatedText marginInline={8}>
 							<Box display='flex'>
 								<Box fontScale='p2m' withTruncatedText>
 									{name || username}
 									{nickname && ` (${nickname})`}
 								</Box>{' '}
-								<Box mi={4} />{' '}
+								<Box marginInline={4} />{' '}
 								<Box fontScale='p2' color='hint' withTruncatedText>
 									{username}
 								</Box>
diff --git a/apps/meteor/client/views/e2e/EnterE2EPasswordModal/EnterE2EPasswordModal.tsx b/apps/meteor/client/views/e2e/EnterE2EPasswordModal/EnterE2EPasswordModal.tsx
index a3652b3166c15..6813afceb8310 100644
--- a/apps/meteor/client/views/e2e/EnterE2EPasswordModal/EnterE2EPasswordModal.tsx
+++ b/apps/meteor/client/views/e2e/EnterE2EPasswordModal/EnterE2EPasswordModal.tsx
@@ -80,7 +80,7 @@ const EnterE2EPasswordModal = ({ onConfirm, onClose, onCancel }: EnterE2EPasswor
 			onCancel={onCancel}
 		>
 			<Box>{t('E2E_password_request_text')}</Box>
-			<FieldGroup mbs={24} w='full'>
+			<FieldGroup marginBlockStart={24} width='full'>
 				<Field>
 					<FieldRow>
 						<Controller
diff --git a/apps/meteor/client/views/e2e/SaveE2EPasswordModal.tsx b/apps/meteor/client/views/e2e/SaveE2EPasswordModal.tsx
index 1366357f4a99b..6b6c2c0ce6017 100644
--- a/apps/meteor/client/views/e2e/SaveE2EPasswordModal.tsx
+++ b/apps/meteor/client/views/e2e/SaveE2EPasswordModal.tsx
@@ -33,11 +33,11 @@ const SaveE2EPasswordModal = ({ randomPassword, onClose, onCancel, onConfirm }:
 		>
 			<p>
 				{t('E2E_password_reveal_text')}
-				<ExternalLink to={DOCS_URL} mis={4}>
+				<ExternalLink to={DOCS_URL} marginInlineStart={4}>
 					{t('Learn_more_about_E2EE')}
 				</ExternalLink>
 			</p>
-			<Box is='p' fontWeight='bold' mb={20}>
+			<Box is='p' fontWeight='bold' marginBlock={20}>
 				{t('E2E_password_save_text')}
 			</Box>
 			<p id={passwordId}>{t('Your_E2EE_password_is')}</p>
@@ -46,7 +46,7 @@ const SaveE2EPasswordModal = ({ randomPassword, onClose, onCancel, onConfirm }:
 				buttonText={hasCopied ? t('Copied') : t('Copy')}
 				buttonDisabled={hasCopied}
 				onClick={() => copy()}
-				mbs={8}
+				marginBlockStart={8}
 			>
 				{randomPassword}
 			</CodeSnippet>
diff --git a/apps/meteor/client/views/home/DefaultHomePage.tsx b/apps/meteor/client/views/home/DefaultHomePage.tsx
index 94047e6fba889..d415b524b7abf 100644
--- a/apps/meteor/client/views/home/DefaultHomePage.tsx
+++ b/apps/meteor/client/views/home/DefaultHomePage.tsx
@@ -26,13 +26,13 @@ const DefaultHomePage = () => {
 		<Page color='default' background='tint'>
 			<HomePageHeader />
 			<PageScrollableContent>
-				<Box is='h2' fontScale='h1' mb={20}>
+				<Box is='h2' fontScale='h1' marginBlock={20}>
 					{t('Welcome_to_workspace', { Site_Name: workspaceName || 'Rocket.Chat' })}
 				</Box>
-				<Box is='h3' fontScale='h3' mb={16}>
+				<Box is='h3' fontScale='h3' marginBlock={16}>
 					{t('Some_ideas_to_get_you_started')}
 				</Box>
-				<Box mi='neg-x8'>
+				<Box marginInline='neg-x8'>
 					<CardGroup wrap stretch>
 						{canAddUsers && <AddUsersCard />}
 						{canCreateChannel && <CreateChannelsCard />}
diff --git a/apps/meteor/client/views/home/HomepageGridItem.tsx b/apps/meteor/client/views/home/HomepageGridItem.tsx
index dc18bf293a30c..310bd73775a5b 100644
--- a/apps/meteor/client/views/home/HomepageGridItem.tsx
+++ b/apps/meteor/client/views/home/HomepageGridItem.tsx
@@ -10,7 +10,7 @@ const HomepageGridItem = ({ children }: HomepageGridItemProps) => {
 	const isMedium = !breakpoints.includes('lg');
 
 	return (
-		<GridItem xs={4} sm={4} md={4} lg={6} xl={4} p={8} maxWidth={isMedium ? '100%' : '50%'} flexGrow={1}>
+		<GridItem xs={4} sm={4} md={4} lg={6} xl={4} padding={8} maxWidth={isMedium ? '100%' : '50%'} flexGrow={1}>
 			{children}
 		</GridItem>
 	);
diff --git a/apps/meteor/client/views/home/cards/CustomContentCard.tsx b/apps/meteor/client/views/home/cards/CustomContentCard.tsx
index c90280802c418..cdbb3e9b6eac4 100644
--- a/apps/meteor/client/views/home/cards/CustomContentCard.tsx
+++ b/apps/meteor/client/views/home/cards/CustomContentCard.tsx
@@ -54,7 +54,7 @@ const CustomContentCard = (props: Omit<ComponentProps<typeof Card>, 'type'>) =>
 			<Card role='region' aria-label={t('Custom_content', 'Custom content')} {...props}>
 				<CardHeader>
 					<Tag>
-						<Icon mie={4} name={willNotShowCustomContent ? 'eye-off' : 'eye'} size='x12' />
+						<Icon marginInlineEnd={4} name={willNotShowCustomContent ? 'eye-off' : 'eye'} size='x12' />
 						{willNotShowCustomContent ? t('Not_Visible_To_Workspace') : t('Visible_To_Workspace')}
 					</Tag>
 				</CardHeader>
@@ -89,7 +89,7 @@ const CustomContentCard = (props: Omit<ComponentProps<typeof Card>, 'type'>) =>
 	if (!willNotShowCustomContent && !isCustomContentOnly) {
 		return (
 			<Card>
-				<Box mb={8}>
+				<Box marginBlock={8}>
 					<CustomHomepageContent role='status' aria-label={customContentBody} />
 				</Box>
 			</Card>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPage.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPage.tsx
index 800a3839c2ff8..f10b449841753 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPage.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPage.tsx
@@ -106,10 +106,10 @@ const AppDetailsPage = ({ id }: AppDetailsPageProps) => {
 
 	return (
 		<Page flexDirection='row'>
-			<Page flexDirection='column' h='full'>
+			<Page flexDirection='column' height='full'>
 				<PageHeader title={t('App_Info')} onClickBack={handleReturn} />
-				<PageScrollableContentWithShadow pi={24} pbs={24} pbe={0} h='full'>
-					<Box w='full' alignSelf='center' h='full' display='flex' flexDirection='column'>
+				<PageScrollableContentWithShadow paddingInline={24} paddingBlockStart={24} paddingBlockEnd={0} height='full'>
+					<Box width='full' alignSelf='center' height='full' display='flex' flexDirection='column'>
 						{!appData && <AppDetailsPageLoading />}
 						{appData && (
 							<>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageHeader.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageHeader.tsx
index 5fc136e8d91c7..57746f92bd4e5 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageHeader.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageHeader.tsx
@@ -36,37 +36,37 @@ const AppDetailsPageHeader = ({ app }: AppDetailsPageHeaderProps) => {
 	const incompatibleStatus = versionIncompatible ? appIncompatibleStatusProps() : undefined;
 
 	return (
-		<Box color='default' display='flex' flexDirection='row' mbe={20} w='full'>
-			<Box mie={32}>
+		<Box color='default' display='flex' flexDirection='row' marginBlockEnd={20} width='full'>
+			<Box marginInlineEnd={32}>
 				<AppAvatar size='x124' iconFileContent={iconFileContent} iconFileData={iconFileData} />
 			</Box>
 			<Box display='flex' flexDirection='column'>
-				<Box display='flex' flexDirection='row' alignItems='center' mbe={8}>
-					<Box fontScale='h1' mie={8}>
+				<Box display='flex' flexDirection='row' alignItems='center' marginBlockEnd={8}>
+					<Box fontScale='h1' marginInlineEnd={8}>
 						{name}
 					</Box>
 					{bundledIn && Boolean(bundledIn.length) && <BundleChips bundledIn={bundledIn} />}
 				</Box>
 
 				{shortDescription && (
-					<Box fontScale='p1' mbe={16}>
+					<Box fontScale='p1' marginBlockEnd={16}>
 						{shortDescription}
 					</Box>
 				)}
 
-				<Box display='flex' flexDirection='row' alignItems='center' mbe={16}>
+				<Box display='flex' flexDirection='row' alignItems='center' marginBlockEnd={16}>
 					<AppStatus app={app} installed={installed} isAppDetailsPage />
 					{(installed || isSubscribed) && <AppMenu app={app} isAppDetailsPage />}
 				</Box>
 				<Box fontScale='c1' display='flex' flexDirection='row' color='hint' alignItems='center'>
 					{author?.name}
-					<Box mi={16} color='disabled'>
+					<Box marginInline={16} color='disabled'>
 						|
 					</Box>
 					<Box>{t('Version_version', { version: versioni18nKey(app) })}</Box>
 					{lastUpdated && (
 						<>
-							<Box mi={16} color='disabled'>
+							<Box marginInline={16} color='disabled'>
 								|
 							</Box>
 							<Box>
@@ -79,7 +79,7 @@ const AppDetailsPageHeader = ({ app }: AppDetailsPageHeaderProps) => {
 
 					{versionIncompatible && (
 						<>
-							<Box mi={16} color='disabled'>
+							<Box marginInline={16} color='disabled'>
 								|
 							</Box>
 
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageLoading.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageLoading.tsx
index 991d700d91e8d..9bf81218f3eb0 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageLoading.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/AppDetailsPageLoading.tsx
@@ -1,12 +1,12 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
 
 const AppDetailsPageLoading = () => (
-	<Box display='flex' flexDirection='row' mbe={20} w='full'>
-		<Skeleton variant='rect' w='x120' h='x120' mie={32} />
+	<Box display='flex' flexDirection='row' marginBlockEnd={20} width='full'>
+		<Skeleton variant='rect' width='x120' height='x120' marginInlineEnd={32} />
 		<Box display='flex' flexDirection='column' justifyContent='space-between' flexGrow={1}>
-			<Skeleton variant='rect' w='full' h='x32' />
-			<Skeleton variant='rect' w='full' h='x32' />
-			<Skeleton variant='rect' w='full' h='x32' />
+			<Skeleton variant='rect' width='full' height='x32' />
+			<Skeleton variant='rect' width='full' height='x32' />
+			<Skeleton variant='rect' width='full' height='x32' />
 		</Box>
 	</Box>
 );
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetails.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetails.tsx
index 4ba762144ab7f..a3f88f828df04 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetails.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetails.tsx
@@ -46,10 +46,10 @@ const AppDetails = ({ app }: AppDetailsProps) => {
 	const openExternalLink = useExternalLink();
 
 	return (
-		<Box mbs='36px' maxWidth='x640' w='full' marginInline='auto' color='default'>
+		<Box marginBlockStart='36px' maxWidth='x640' width='full' marginInline='auto' color='default'>
 			{appAddon && !workspaceHasAddon && (
 				<Callout
-					mb={16}
+					marginBlock={16}
 					title={t('Subscription_add-on_required')}
 					type='info'
 					actions={
@@ -64,13 +64,13 @@ const AppDetails = ({ app }: AppDetailsProps) => {
 			{app.licenseValidation && (
 				<>
 					{Object.entries(app.licenseValidation.warnings).map(([key]) => (
-						<Callout key={key} type='warning' mb={16}>
+						<Callout key={key} type='warning' marginBlock={16}>
 							{t(`Apps_License_Message_${key}` as TranslationKey)}
 						</Callout>
 					))}
 
 					{Object.entries(app.licenseValidation.errors).map(([key]) => (
-						<Callout key={key} type='danger' mb={16}>
+						<Callout key={key} type='danger' marginBlock={16}>
 							{t(`Apps_License_Message_${key}` as TranslationKey)}
 						</Callout>
 					))}
@@ -82,7 +82,7 @@ const AppDetails = ({ app }: AppDetailsProps) => {
 					{isCarouselVisible && <ScreenshotCarouselAnchor screenshots={screenshots} />}
 
 					<Box is='section'>
-						<Box fontScale='h4' mbe={8} color='titles-labels'>
+						<Box fontScale='h4' marginBlockEnd={8} color='titles-labels'>
 							{t('Description')}
 						</Box>
 						<Box
@@ -96,12 +96,12 @@ const AppDetails = ({ app }: AppDetailsProps) => {
 					</Box>
 
 					<Box is='section'>
-						<Box fontScale='h4' mbe={8} color='titles-labels'>
+						<Box fontScale='h4' marginBlockEnd={8} color='titles-labels'>
 							{t('Categories')}
 						</Box>
 						<Box display='flex' flexDirection='row' flexWrap='wrap' justifyContent='start' alignItems='center'>
 							{categories?.map((current) => (
-								<Chip key={current} textTransform='uppercase' m={4}>
+								<Chip key={current} textTransform='uppercase' margin={4}>
 									{current}
 								</Chip>
 							))}
@@ -109,11 +109,11 @@ const AppDetails = ({ app }: AppDetailsProps) => {
 					</Box>
 
 					<Box is='section'>
-						<Box fontScale='h4' mbe={8}>
+						<Box fontScale='h4' marginBlockEnd={8}>
 							{t('Contact')}
 						</Box>
-						<Box display='flex' flexDirection='row' flexGrow={1} justifyContent='space-around' flexWrap='wrap' mbe={24}>
-							<Box display='flex' flexDirection='column' mie={12} flexGrow={1}>
+						<Box display='flex' flexDirection='row' flexGrow={1} justifyContent='space-around' flexWrap='wrap' marginBlockEnd={24}>
+							<Box display='flex' flexDirection='column' marginInlineEnd={12} flexGrow={1}>
 								<Box fontScale='h4' color='hint'>
 									{t('Author_Site')}
 								</Box>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetailsAPIs.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetailsAPIs.tsx
index 5c6eaf6a8161e..f2e288070e60a 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetailsAPIs.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppDetails/AppDetailsAPIs.tsx
@@ -18,11 +18,11 @@ const AppDetailsAPIs = ({ apis }: AppDetailsAPIsProps) => {
 	return (
 		<>
 			<Box display='flex' flexDirection='column'>
-				<Box fontScale='h4' mb={12}>
+				<Box fontScale='h4' marginBlock={12}>
 					{t('APIs')}
 				</Box>
 				{apis.map((api) => (
-					<Box key={api.path} mb={8}>
+					<Box key={api.path} marginBlock={8}>
 						<Box fontScale='p2m'>
 							{api.methods.join(' | ').toUpperCase()} {api.path}
 						</Box>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppInstances/AppInstances.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppInstances/AppInstances.tsx
index 2d75cb487c1ab..eeee5b3eacb2f 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppInstances/AppInstances.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppInstances/AppInstances.tsx
@@ -48,7 +48,7 @@ const AppInstances = ({ id }: AppInstanceProps) => {
 	};
 
 	return (
-		<Box h='full' w='full' marginInline='auto' color='default' pbs={24}>
+		<Box height='full' width='full' marginInline='auto' color='default' paddingBlockStart={24}>
 			{isLoading && <AccordionLoading />}
 			{isError && (
 				<Box maxWidth='x600' alignSelf='center'>
@@ -57,7 +57,7 @@ const AppInstances = ({ id }: AppInstanceProps) => {
 			)}
 			{isSuccess && data.clusterStatus && data.clusterStatus.length > 0 && (
 				<CustomScrollbars>
-					<GenericTable w='full'>
+					<GenericTable width='full'>
 						<GenericTableHeader>
 							<GenericTableHeaderCell key='instanceId'>{t('Workspace_instance')}</GenericTableHeaderCell>
 							<GenericTableHeaderCell key='status'>{t('Status')}</GenericTableHeaderCell>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx
index f5752786328a7..5734ade2c3321 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogs.tsx
@@ -99,7 +99,7 @@ const AppLogs = ({ id }: AppLogsProps) => {
 
 	return (
 		<>
-			<Box pb={16}>
+			<Box paddingBlock={16}>
 				<AppLogsFilter
 					appId={id}
 					noResults={isFetching || !isSuccess || data?.logs?.length === 0}
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.tsx
index 5d2fa63ca27e5..5fdca8cd3c363 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItem.tsx
@@ -24,7 +24,7 @@ const AppLogsItem = ({ regionId, expanded, onExpand, ...props }: AppLogsItemProp
 				return (
 					<Box
 						lineHeight={20}
-						mbe={4}
+						marginBlockEnd={4}
 						fontFamily='mono'
 						key={`${index}-${severity}-${timestamp}-${caller}`}
 					>{`${timestamp} ${severity} ${caller} ${parsedArgs}`}</Box>
@@ -47,18 +47,18 @@ const AppLogsItem = ({ regionId, expanded, onExpand, ...props }: AppLogsItemProp
 				<Box ref={anchorRef}>{title}</Box>
 			</CollapseButton>
 
-			<CollapsibleRegion expanded={expanded} id={regionId} pbs={expanded ? 16 : '0px'} mis={36}>
-				{props.instanceId && <AppsLogItemField mbs={0} field={props.instanceId} label='Instance' />}
+			<CollapsibleRegion expanded={expanded} id={regionId} paddingBlockStart={expanded ? 16 : '0px'} marginInlineStart={36}>
+				{props.instanceId && <AppsLogItemField marginBlockStart={0} field={props.instanceId} label='Instance' />}
 				{props.totalTime !== undefined && <AppsLogItemField field={`${props.totalTime}ms`} label={t('Total_time')} />}
 				{props.startTime && <AppsLogItemField field={formatDateAndTime(Date.parse(props.startTime))} label={t('Time')} />}
 				{props.method && <AppsLogItemField field={props.method} label={t('Event')} />}
-				<Box mbs={16} display='flex' color='default' flexDirection='column'>
+				<Box marginBlockStart={16} display='flex' color='default' flexDirection='column'>
 					<Box fontWeight={700}>{t('Full_log')}</Box>
 				</Box>
 				<AppLogsItemEntry fullLog={props} />
 			</CollapsibleRegion>
 			<Box is='dt'>
-				<Divider mb={0} />
+				<Divider marginBlock={0} />
 			</Box>
 		</>
 	);
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItemField.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItemField.tsx
index d4d62e6fcaeb2..07f8cae857878 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItemField.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/AppLogsItemField.tsx
@@ -8,7 +8,7 @@ export type AppsLogItemFieldProps = {
 
 export const AppsLogItemField = ({ field, label, ...props }: AppsLogItemFieldProps) => {
 	return (
-		<Box mb={16} display='flex' color='default' flexDirection='column' {...props}>
+		<Box marginBlock={16} display='flex' color='default' flexDirection='column' {...props}>
 			<Box fontWeight={700}>{label}</Box>
 			{field}
 		</Box>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Components/CollapseButton.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Components/CollapseButton.tsx
index 6fe37592e7ec0..d17696d3aec77 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Components/CollapseButton.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Components/CollapseButton.tsx
@@ -34,7 +34,7 @@ export const CollapseButton = ({ regionId, children, expanded, onClick }: Collap
 				color={Palette.text['font-default']}
 			>
 				<Chevron size={32} down={!expanded} up={expanded} style={{ alignSelf: 'flex-start' }} />
-				<Box pb='x4' pi='x4' fontWeight='700'>
+				<Box paddingBlock='x4' paddingInline='x4' fontWeight='700'>
 					{children}
 				</Box>
 			</Box>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx
index 71b68a625d2f2..bc2ca589b4273 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.stories.tsx
@@ -23,7 +23,7 @@ export default {
 
 			return (
 				<FormProvider {...methods}>
-					<Box p={16}>{fn()}</Box>
+					<Box padding={16}>{fn()}</Box>
 				</FormProvider>
 			);
 		},
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.tsx
index 8ce935b64a4f9..190b329e5250f 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilter.tsx
@@ -59,7 +59,7 @@ export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLo
 
 	return (
 		<Box display='flex' alignItems='flex-end' flexDirection='row' width='full' flexWrap='wrap' alignContent='flex-end'>
-			<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+			<Box display='flex' flexDirection='column' marginInlineEnd={10} flexGrow={1}>
 				<Label id='eventFilterLabel' htmlFor='eventFilter'>
 					{t('Event')}
 				</Label>
@@ -71,14 +71,14 @@ export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLo
 			</Box>
 			{!compactMode && (
 				<>
-					<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+					<Box display='flex' flexDirection='column' marginInlineEnd={10} flexGrow={1}>
 						<Label id='timeFilterLabel' htmlFor='timeFilter'>
 							{t('Time')}
 						</Label>
 						<TimeFilterSelect id='timeFilter' aria-labelledby='timeFilterLabel' />
 					</Box>
 
-					<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+					<Box display='flex' flexDirection='column' marginInlineEnd={10} flexGrow={1}>
 						<Label id='instanceFilterLabel' htmlFor='instanceFilter'>
 							{t('Instance')}
 						</Label>
@@ -91,7 +91,7 @@ export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLo
 						/>
 					</Box>
 
-					<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+					<Box display='flex' flexDirection='column' marginInlineEnd={10} flexGrow={1}>
 						<Label>{t('Severity')}</Label>
 						<Controller control={control} name='severity' render={({ field }) => <SeverityFilterSelect id='severityFilter' {...field} />} />
 					</Box>
@@ -101,7 +101,7 @@ export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLo
 						disabled={isLoading}
 						icon='refresh'
 						secondary
-						mie={10}
+						marginInlineEnd={10}
 						onClick={() => refreshLogs()}
 					/>
 
@@ -110,7 +110,7 @@ export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLo
 						icon='circle-arrow-down'
 						disabled={noResults}
 						secondary
-						mie={10}
+						marginInlineEnd={10}
 						onClick={() => openExportModal()}
 						aria-label={noResults ? t('No_data_to_export') : t('Export')}
 						aria-disabled={noResults}
@@ -122,7 +122,7 @@ export const AppLogsFilter = ({ appId, expandAll, collapseAll, refetchLogs, isLo
 
 			{compactMode && (
 				<>
-					<Button alignSelf='flex-end' icon='customize' secondary mie={10} onClick={() => openContextualBar()}>
+					<Button alignSelf='flex-end' icon='customize' secondary marginInlineEnd={10} onClick={() => openContextualBar()}>
 						{t('Filters')}
 					</Button>
 					<CompactFilterOptions
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.tsx
index 30c84e259341e..23d7bfc6c37fa 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/AppLogsFilterContextualBar.tsx
@@ -35,21 +35,21 @@ export const AppLogsFilterContextualBar = ({ appId, onClose = () => undefined }:
 				<ContextualbarClose onClick={onClose} />
 			</ContextualbarHeader>
 			<ContextualbarScrollableContent is='form'>
-				<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+				<Box display='flex' flexDirection='column' marginInlineEnd={10} flexGrow={1}>
 					<Label id='timeFilterLabel' htmlFor='timeFilter'>
 						{t('Time')}
 					</Label>
 					<TimeFilterSelect aria-labelledby='timeFilterLabel' id='timeFilter' compactView={true} />
 				</Box>
-				<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+				<Box display='flex' flexDirection='column' marginInlineEnd={10} flexGrow={1}>
 					<Label htmlFor='timeFilter'>{t('Logs_from')}</Label>
 					<DateTimeFilter control={control} type='start' />
 				</Box>
-				<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+				<Box display='flex' flexDirection='column' marginInlineEnd={10} flexGrow={1}>
 					<Label htmlFor='timeFilter'>{t('Until')}</Label>
 					<DateTimeFilter control={control} type='end' />
 				</Box>
-				<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+				<Box display='flex' flexDirection='column' marginInlineEnd={10} flexGrow={1}>
 					<Label id='instanceFilterLabel' htmlFor='instanceFilter'>
 						{t('Instance')}
 					</Label>
@@ -61,7 +61,7 @@ export const AppLogsFilterContextualBar = ({ appId, onClose = () => undefined }:
 						)}
 					/>
 				</Box>
-				<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+				<Box display='flex' flexDirection='column' marginInlineEnd={10} flexGrow={1}>
 					<Label id='severityFilterLabel' htmlFor='severityFilter'>
 						{t('Severity')}
 					</Label>
@@ -73,7 +73,7 @@ export const AppLogsFilterContextualBar = ({ appId, onClose = () => undefined }:
 				</Box>
 			</ContextualbarScrollableContent>
 			<ContextualbarFooter>
-				<Button secondary w='full' aria-label={t('Clear_filters')} onClick={() => reset()}>
+				<Button secondary width='full' aria-label={t('Clear_filters')} onClick={() => reset()}>
 					{t('Clear_filters')}
 				</Button>
 			</ContextualbarFooter>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.stories.tsx
index 97d14f60c7688..1b6ee68e4b3da 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.stories.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.stories.tsx
@@ -16,7 +16,7 @@ export default {
 
 			return (
 				<FormProvider {...methods}>
-					<Box p={16}>{fn()}</Box>
+					<Box padding={16}>{fn()}</Box>
 				</FormProvider>
 			);
 		},
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.tsx
index 20e2828826630..71a468fe500fe 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/DateTimeModal.tsx
@@ -51,11 +51,11 @@ export const DateTimeModal = ({ onSave, onClose, defaultValues }: DateTimeModalP
 				<ModalClose onClick={onClose} />
 			</ModalHeader>
 			<ModalContent>
-				<Box display='flex' flexDirection='column' mie={10} mbe={24} flexGrow={1}>
+				<Box display='flex' flexDirection='column' marginInlineEnd={10} marginBlockEnd={24} flexGrow={1}>
 					<Label htmlFor='timeFilter'>{t('Logs_from')}</Label>
 					<DateTimeFilter control={control} type='start' />
 				</Box>
-				<Box display='flex' flexDirection='column' mie={10} flexGrow={1}>
+				<Box display='flex' flexDirection='column' marginInlineEnd={10} flexGrow={1}>
 					<Label htmlFor='timeFilter'>{t('Until')}</Label>
 					<DateTimeFilter control={control} type='end' />
 				</Box>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.stories.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.stories.tsx
index b5942f7731970..a92e7aa034621 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.stories.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.stories.tsx
@@ -26,7 +26,7 @@ export default {
 
 			return (
 				<FormProvider {...methods}>
-					<Box p={16}>{fn()}</Box>
+					<Box padding={16}>{fn()}</Box>
 				</FormProvider>
 			);
 		},
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.tsx
index c6d8a2d46f3fc..b5946610cabb7 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppLogs/Filters/ExportLogsModal.tsx
@@ -101,7 +101,7 @@ export const ExportLogsModal = ({ onClose, filterValues, onConfirm }: ExportLogs
 				<ModalClose onClick={onClose} />
 			</ModalHeader>
 			<ModalContent>
-				<Box display='flex' flexDirection='column' mie={10} mbe={24} flexGrow={1}>
+				<Box display='flex' flexDirection='column' marginInlineEnd={10} marginBlockEnd={24} flexGrow={1}>
 					<Label>{t('Format')}</Label>
 					<Field>
 						<FieldRow>
@@ -140,7 +140,7 @@ export const ExportLogsModal = ({ onClose, filterValues, onConfirm }: ExportLogs
 						</FieldRow>
 					</Field>
 				</Box>
-				<Box display='flex' flexDirection='column' mie={10} mbe={24} flexGrow={1}>
+				<Box display='flex' flexDirection='column' marginInlineEnd={10} marginBlockEnd={24} flexGrow={1}>
 					<Label>{t('Export_most_recent_logs')}</Label>
 					<Field>
 						<FieldRow>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppReleases/AppReleasesItem.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppReleases/AppReleasesItem.tsx
index 4be6142bb2325..443592fe5db76 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppReleases/AppReleasesItem.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppReleases/AppReleasesItem.tsx
@@ -24,7 +24,7 @@ const AppReleasesItem = ({ release, ...props }: ReleaseItemProps) => {
 
 	const title = (
 		<Box display='flex' flexDirection='row'>
-			<Box is='h4' fontScale='p1b' color='default' mie={24}>
+			<Box is='h4' fontScale='p1b' color='default' marginInlineEnd={24}>
 				{release.version}
 			</Box>
 			<Box is='p' fontScale='p1' color='hint'>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequestItem.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequestItem.tsx
index 763f22a298a45..89ed44a362a2e 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequestItem.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequestItem.tsx
@@ -17,16 +17,16 @@ const AppRequestItem = ({ seen, name, createdDate, message, username }: AppReque
 	const isAdminUser = usePermission('manage-apps');
 
 	return (
-		<Box display='flex' flexDirection='row' pb={12} pie={24} mbe={8} flexGrow='1'>
-			<Box mie={8} mbs={2} display='flex' flexDirection='row' alignItems='flex-start' h='full'>
-				<Box mie={16} alignSelf='center' height='100%' width='x8'>
+		<Box display='flex' flexDirection='row' paddingBlock={12} paddingInlineEnd={24} marginBlockEnd={8} flexGrow='1'>
+			<Box marginInlineEnd={8} marginBlockStart={2} display='flex' flexDirection='row' alignItems='flex-start' height='full'>
+				<Box marginInlineEnd={16} alignSelf='center' height='100%' width='x8'>
 					{!seen && isAdminUser && <Badge small variant='primary' />}
 				</Box>
 				{username && <UserAvatar size='x36' username={username} />}
 			</Box>
 			<Box display='flex' flexDirection='column'>
-				<Box display='flex' flexDirection='row' alignItems='flex-start' mbe={4}>
-					<Box fontScale='p2b' mie={4} lineHeight='initial' color='titles-labels'>
+				<Box display='flex' flexDirection='row' alignItems='flex-start' marginBlockEnd={4}>
+					<Box fontScale='p2b' marginInlineEnd={4} lineHeight='initial' color='titles-labels'>
 						{name}
 					</Box>
 					<Box fontScale='c1' color='annotation'>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequests.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequests.tsx
index e914d616ddd1a..9e6a95fef78fd 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequests.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequests.tsx
@@ -57,15 +57,15 @@ const AppRequests = ({ id, isAdminUser }: AppRequestsProps) => {
 
 	if (isLoading) {
 		return (
-			<Box w='full' maxWidth='x608' marginInline='auto' pbs={36}>
+			<Box width='full' maxWidth='x608' marginInline='auto' paddingBlockStart={36}>
 				<AppRequestsLoading />
 			</Box>
 		);
 	}
 
 	return (
-		<Box h='full' display='flex' flexDirection='column'>
-			<Box w='full' maxWidth='x608' marginInline='auto' pbs={36} flexGrow='1'>
+		<Box height='full' display='flex' flexDirection='column'>
+			<Box width='full' maxWidth='x608' marginInline='auto' paddingBlockStart={36} flexGrow='1'>
 				{isSuccess && paginatedAppRequests.data?.length ? (
 					paginatedAppRequests.data.map((request) => (
 						<AppRequestItem
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequestsLoading.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequestsLoading.tsx
index 4c14d5b596dc8..ee52c46bb9d9e 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequestsLoading.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppRequests/AppRequestsLoading.tsx
@@ -2,12 +2,12 @@ import { Box, Skeleton } from '@rocket.chat/fuselage';
 
 const AppRequestsLoading = () => {
 	const appRequestsLoading = Array.from({ length: 5 }, (_, i) => (
-		<Box key={i} display='flex' flexDirection='row' pb={12} pie={24} mbe={8}>
-			<Box is='section' mie={8} mbs={2} display='flex' flexDirection='row' alignItems='flex-start' h='full'>
+		<Box key={i} display='flex' flexDirection='row' paddingBlock={12} paddingInlineEnd={24} marginBlockEnd={8}>
+			<Box is='section' marginInlineEnd={8} marginBlockStart={2} display='flex' flexDirection='row' alignItems='flex-start' height='full'>
 				<Skeleton variant='rect' height='x36' width='x36' />
 			</Box>
 			<Box is='section' display='flex' flexDirection='column'>
-				<Box display='flex' flexDirection='row' alignItems='flex-start' mbe={4}>
+				<Box display='flex' flexDirection='row' alignItems='flex-start' marginBlockEnd={4}>
 					<Skeleton variant='rect' height='x16' width='x215' />
 				</Box>
 				<Skeleton variant='rect' height='x60' width='x516' />
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurity.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurity.tsx
index 1f7fdff892b0a..6815919eb541a 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurity.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurity.tsx
@@ -16,7 +16,7 @@ const AppSecurity = ({ privacyPolicySummary, appPermissions, tosLink, privacyLin
 	const { t } = useTranslation();
 
 	return (
-		<Box maxWidth='x640' w='full' marginInline='auto' color='default'>
+		<Box maxWidth='x640' width='full' marginInline='auto' color='default'>
 			<Box display='flex' flexDirection='column'>
 				<Margins block={16}>
 					<Box is='section'>
@@ -28,7 +28,7 @@ const AppSecurity = ({ privacyPolicySummary, appPermissions, tosLink, privacyLin
 
 					<Box is='section'>
 						<AppSecurityLabel>{t('Permissions')}</AppSecurityLabel>
-						<Box is='ol' type='1' style={{ listStyleType: 'decimal' }} mis={24}>
+						<Box is='ol' type='1' style={{ listStyleType: 'decimal' }} marginInlineStart={24}>
 							<AppPermissionsList appPermissions={appPermissions} />
 						</Box>
 					</Box>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurityLabel.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurityLabel.tsx
index 5f15bcba2ceb6..417a2386e136c 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurityLabel.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSecurity/AppSecurityLabel.tsx
@@ -3,7 +3,7 @@ import { Box } from '@rocket.chat/fuselage';
 export type AppSecurityLabelProps = { children: string };
 
 const AppSecurityLabel = ({ children }: AppSecurityLabelProps) => (
-	<Box fontScale='h4' mbe={8} color='titles-labels'>
+	<Box fontScale='h4' marginBlockEnd={8} color='titles-labels'>
 		{children}
 	</Box>
 );
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSettings.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSettings.tsx
index 965a0c550bdb9..ff039e172cdf2 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSettings.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSettings.tsx
@@ -29,7 +29,7 @@ const AppSettings = ({ settings }: AppSettingsProps) => {
 	}, [settings]);
 
 	return (
-		<Box display='flex' flexDirection='column' maxWidth='x640' w='full' marginInline='auto'>
+		<Box display='flex' flexDirection='column' maxWidth='x640' width='full' marginInline='auto'>
 			<Accordion>
 				{groupedSettings.map(([section, sectionSettings], index) => (
 					<AccordionItem key={section} title={tApp(section)} defaultExpanded={index === 0}>
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatus.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatus.tsx
index dae26aeec52c5..239c6194a9799 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatus.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppStatus/AppStatus.tsx
@@ -136,7 +136,7 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, installed, ...pro
 	};
 
 	return (
-		<Box {...props} display='flex' alignItems='center' mie={8}>
+		<Box {...props} display='flex' alignItems='center' marginInlineEnd={8}>
 			{button && isAppDetailsPage && (!installed || canUpdate) && (
 				<Box
 					display='flex'
@@ -153,7 +153,7 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, installed, ...pro
 						loading={loading}
 						disabled={action === 'request' && (app?.requestedEndUser || endUserRequested)}
 						onClick={handleAcquireApp}
-						mie={8}
+						marginInlineEnd={8}
 					>
 						{t(button.label)}
 					</Button>
@@ -168,7 +168,7 @@ const AppStatus = ({ app, showStatus = true, isAppDetailsPage, installed, ...pro
 				<Margins inlineEnd={index !== statuses.length - 1 ? 8 : undefined} key={index}>
 					<Tag data-qa-type='app-status-tag' variant={getStatusVariant(status)} title={status.tooltipText ? status.tooltipText : ''}>
 						<Box display='flex' color={getStatusFontColor(status)} alignItems='center'>
-							{status.icon && <Icon name={status.icon} size={16} mie={2} />}
+							{status.icon && <Icon name={status.icon} size={16} marginInlineEnd={2} />}
 							{handleAppRequestsNumber(status)} {t(status.label)}
 						</Box>
 					</Tag>
diff --git a/apps/meteor/client/views/marketplace/AppExemptModal.tsx b/apps/meteor/client/views/marketplace/AppExemptModal.tsx
index c9196a0e9790c..734b32c08b68f 100644
--- a/apps/meteor/client/views/marketplace/AppExemptModal.tsx
+++ b/apps/meteor/client/views/marketplace/AppExemptModal.tsx
@@ -39,7 +39,7 @@ const AppExemptModal = ({ onCancel, appName }: AppExemptModalProps) => {
 			onCancel={onCancel}
 			onConfirm={goToManageSubscriptionPage}
 		>
-			<Box mbe={28}>{t('Apps_Private_App_Is_Exempt', { appName })}</Box>
+			<Box marginBlockEnd={28}>{t('Apps_Private_App_Is_Exempt', { appName })}</Box>
 			{t('Upgrade_subscription_to_enable_private_apps')}
 		</GenericModal>
 	);
diff --git a/apps/meteor/client/views/marketplace/AppInstallPage.tsx b/apps/meteor/client/views/marketplace/AppInstallPage.tsx
index 5489c3be9e261..1a50c472221a2 100644
--- a/apps/meteor/client/views/marketplace/AppInstallPage.tsx
+++ b/apps/meteor/client/views/marketplace/AppInstallPage.tsx
@@ -33,7 +33,7 @@ const AppInstallPage = () => {
 		<Page flexDirection='column'>
 			<PageHeader title={t('App_Installation')} />
 			<PageScrollableContent>
-				<FieldGroup display='flex' flexDirection='column' alignSelf='center' maxWidth='x600' w='full'>
+				<FieldGroup display='flex' flexDirection='column' alignSelf='center' maxWidth='x600' width='full'>
 					<Field>
 						<FieldLabel htmlFor={fileField}>{t('App_Url_to_Install_From_File')}</FieldLabel>
 						<FieldRow>
@@ -47,7 +47,7 @@ const AppInstallPage = () => {
 										{...field}
 										value={field.value?.name || ''}
 										endAddon={
-											<Button icon='upload' small primary onClick={handleUploadButtonClick} mb='neg-x4' mie='neg-x8'>
+											<Button icon='upload' small primary onClick={handleUploadButtonClick} marginBlock='neg-x4' marginInlineEnd='neg-x8'>
 												{t('Browse_Files')}
 											</Button>
 										}
diff --git a/apps/meteor/client/views/marketplace/AppPermissionsReviewModal.tsx b/apps/meteor/client/views/marketplace/AppPermissionsReviewModal.tsx
index f66e0fa89d726..636ccc130eb9a 100644
--- a/apps/meteor/client/views/marketplace/AppPermissionsReviewModal.tsx
+++ b/apps/meteor/client/views/marketplace/AppPermissionsReviewModal.tsx
@@ -23,10 +23,10 @@ const AppPermissionsReviewModal = ({ appPermissions, onCancel, onConfirm }: AppP
 			onClose={onCancel}
 			confirmText={t('Agree')}
 		>
-			<Box fontScale='p2' mbe={20}>
+			<Box fontScale='p2' marginBlockEnd={20}>
 				{t('Apps_Permissions_Review_Modal_Subtitle')}
 			</Box>
-			<Box is='ol' type='1' style={{ listStyleType: 'decimal' }} mis={24}>
+			<Box is='ol' type='1' style={{ listStyleType: 'decimal' }} marginInlineStart={24}>
 				<AppPermissionsList appPermissions={appPermissions} />
 			</Box>
 		</GenericModal>
diff --git a/apps/meteor/client/views/marketplace/AppsList/AppsList.tsx b/apps/meteor/client/views/marketplace/AppsList/AppsList.tsx
index a4017c07c89c1..717780bcbc2ee 100644
--- a/apps/meteor/client/views/marketplace/AppsList/AppsList.tsx
+++ b/apps/meteor/client/views/marketplace/AppsList/AppsList.tsx
@@ -11,9 +11,9 @@ export type AppsListProps = {
 
 const AppsList = ({ apps, title, appsListId }: AppsListProps) => {
 	return (
-		<Box mbe={16}>
+		<Box marginBlockEnd={16}>
 			{title && (
-				<Box is='h2' id={appsListId} fontScale='h3' color='default' mbe={20}>
+				<Box is='h2' id={appsListId} fontScale='h3' color='default' marginBlockEnd={20}>
 					{title}
 				</Box>
 			)}
diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
index 2db210eee1c0c..e4856c662d115 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/AppsFilters.tsx
@@ -56,7 +56,7 @@ const AppsFilters = ({
 	const fixFiltersSize = breakpoints.includes('lg') ? { maxWidth: 'x200', minWidth: 'x200' } : null;
 
 	return (
-		<Box pi={24}>
+		<Box paddingInline={24}>
 			<FilterByText value={text} onChange={(event) => setText(event.target.value)} placeholder={appsSearchPlaceholders[context]}>
 				{!isPrivateAppsPage && (
 					<RadioDropDown group={freePaidFilterStructure} onSelected={freePaidFilterOnSelected} flexGrow={1} {...fixFiltersSize} />
diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsPageConnectionError.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsPageConnectionError.tsx
index 17e1a64318ebd..ce25edc5ee478 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/AppsPageConnectionError.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/AppsPageConnectionError.tsx
@@ -5,7 +5,7 @@ const AppsPageContentError = ({ onButtonClick }: { onButtonClick: () => void })
 	const { t } = useTranslation();
 
 	return (
-		<Box mbs={20}>
+		<Box marginBlockStart={20}>
 			<States>
 				<StatesIcon variation='danger' name='circle-exclamation' />
 				<StatesTitle>{t('Connection_error')}</StatesTitle>
diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentBody.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentBody.tsx
index d1ac70bf612d1..f452b3343a5a4 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentBody.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentBody.tsx
@@ -43,7 +43,7 @@ const AppsPageContentBody = ({
 
 	return (
 		<>
-			<Box display='flex' flexDirection='column' overflow='hidden' height='100%' pi={24}>
+			<Box display='flex' flexDirection='column' overflow='hidden' height='100%' paddingInline={24}>
 				<Box overflowY='scroll' height='100%' ref={scrollableRef}>
 					{isMarketplace && !isFiltered && <FeaturedAppsSections appsListId={appsListId} appsResult={appsResult?.allApps || []} />}
 					<AppsList appsListId={appsListId} apps={appsResult?.items || []} title={isMarketplace ? t('All_Apps') : undefined} />
diff --git a/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentSkeleton.tsx b/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentSkeleton.tsx
index 7f748713fef99..96cf8a27b85c3 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentSkeleton.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/AppsPageContentSkeleton.tsx
@@ -1,18 +1,18 @@
 import { Skeleton, Box } from '@rocket.chat/fuselage';
 
 const AppsPageContentSkeleton = () => {
-	const loadingRows = Array.from({ length: 3 }, (_, i) => <Skeleton key={i} height='x56' mbe={8} width='100%' variant='rect' />);
+	const loadingRows = Array.from({ length: 3 }, (_, i) => <Skeleton key={i} height='x56' marginBlockEnd={8} width='100%' variant='rect' />);
 	return (
-		<Box pi={24}>
-			<Box mbe={36}>
-				<Skeleton height='x28' width='x150' mbe={20} variant='rect' />
+		<Box paddingInline={24}>
+			<Box marginBlockEnd={36}>
+				<Skeleton height='x28' width='x150' marginBlockEnd={20} variant='rect' />
 				{loadingRows}
 			</Box>
-			<Box mbe={36}>
-				<Skeleton height='x28' width='x150' mbe={20} variant='rect' />
+			<Box marginBlockEnd={36}>
+				<Skeleton height='x28' width='x150' marginBlockEnd={20} variant='rect' />
 				{loadingRows}
 			</Box>
-			<Skeleton height='x28' width='x150' mbe={20} variant='rect' />
+			<Skeleton height='x28' width='x150' marginBlockEnd={20} variant='rect' />
 			{loadingRows}
 		</Box>
 	);
diff --git a/apps/meteor/client/views/marketplace/AppsPage/NoAppRequestsEmptyState.tsx b/apps/meteor/client/views/marketplace/AppsPage/NoAppRequestsEmptyState.tsx
index 489499ac0c214..eb6b54b11c79e 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/NoAppRequestsEmptyState.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/NoAppRequestsEmptyState.tsx
@@ -5,7 +5,7 @@ const NoAppRequestsEmptyState = () => {
 	const { t } = useTranslation();
 
 	return (
-		<Box mbs='24px'>
+		<Box marginBlockStart='24px'>
 			<States>
 				<StatesIcon name='cube' />
 				<StatesTitle>{t('No_requested_apps')}</StatesTitle>
diff --git a/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppMatchesEmptyState.tsx b/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppMatchesEmptyState.tsx
index 9eeeb8a4032a9..e736ff08666d5 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppMatchesEmptyState.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppMatchesEmptyState.tsx
@@ -21,7 +21,7 @@ const NoInstalledAppMatchesEmptyState = ({ shouldShowSearchText, text, onButtonC
 	const { t } = useTranslation();
 
 	return (
-		<Box mbs={20}>
+		<Box marginBlockStart={20}>
 			<States>
 				<StatesIcon name='magnifier' />
 				<StatesTitle>{t('No_installed_app_matches')}</StatesTitle>
diff --git a/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppsEmptyState.tsx b/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppsEmptyState.tsx
index def454f6c657a..631a90d5eb108 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppsEmptyState.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/NoInstalledAppsEmptyState.tsx
@@ -5,7 +5,7 @@ const NoInstalledAppsEmptyState = ({ onButtonClick }: { onButtonClick: () => voi
 	const { t } = useTranslation();
 
 	return (
-		<Box mbs={20}>
+		<Box marginBlockStart={20}>
 			<States>
 				<StatesIcon name='magnifier' />
 				<StatesTitle>{t('No_apps_installed')}</StatesTitle>
diff --git a/apps/meteor/client/views/marketplace/AppsPage/NoMarketplaceOrInstalledAppMatchesEmptyState.tsx b/apps/meteor/client/views/marketplace/AppsPage/NoMarketplaceOrInstalledAppMatchesEmptyState.tsx
index f39e2656e367c..1f0d7777815ba 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/NoMarketplaceOrInstalledAppMatchesEmptyState.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/NoMarketplaceOrInstalledAppMatchesEmptyState.tsx
@@ -20,7 +20,7 @@ const NoMarketplaceOrInstalledAppMatchesEmptyState = ({
 	const { t } = useTranslation();
 
 	return (
-		<Box mbs={20}>
+		<Box marginBlockStart={20}>
 			<States>
 				<StatesIcon name='magnifier' />
 				<StatesTitle>{t('No_app_matches')}</StatesTitle>
diff --git a/apps/meteor/client/views/marketplace/AppsPage/PrivateEmptyState.tsx b/apps/meteor/client/views/marketplace/AppsPage/PrivateEmptyState.tsx
index 473c5deed13d0..0a83c85a376b6 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/PrivateEmptyState.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/PrivateEmptyState.tsx
@@ -7,7 +7,7 @@ import { usePrivateAppsEnabled } from '../hooks/usePrivateAppsEnabled';
 const PrivateEmptyState = () => {
 	const privateAppsEnabled = usePrivateAppsEnabled();
 
-	return <Box mbs='24px'>{privateAppsEnabled ? <PrivateEmptyStateDefault /> : <PrivateEmptyStateUpgrade />}</Box>;
+	return <Box marginBlockStart='24px'>{privateAppsEnabled ? <PrivateEmptyStateDefault /> : <PrivateEmptyStateUpgrade />}</Box>;
 };
 
 export default PrivateEmptyState;
diff --git a/apps/meteor/client/views/marketplace/AppsPage/UnsupportedEmptyState.tsx b/apps/meteor/client/views/marketplace/AppsPage/UnsupportedEmptyState.tsx
index e4cd683b35fa5..8c47a60193c1c 100644
--- a/apps/meteor/client/views/marketplace/AppsPage/UnsupportedEmptyState.tsx
+++ b/apps/meteor/client/views/marketplace/AppsPage/UnsupportedEmptyState.tsx
@@ -13,7 +13,7 @@ const UnsupportedEmptyState = () => {
 	const description = isAdmin ? t('Update_to_access_marketplace_description') : t('Marketplace_unavailable_description');
 
 	return (
-		<Box mbs={64}>
+		<Box marginBlockStart={64}>
 			<States>
 				<StatesIcon name='warning' />
 				<StatesTitle>{title}</StatesTitle>
diff --git a/apps/meteor/client/views/marketplace/IframeModal.tsx b/apps/meteor/client/views/marketplace/IframeModal.tsx
index 3826f83478314..39cfddaa28162 100644
--- a/apps/meteor/client/views/marketplace/IframeModal.tsx
+++ b/apps/meteor/client/views/marketplace/IframeModal.tsx
@@ -36,7 +36,7 @@ const IframeModal = ({ url, confirm, cancel, wrapperHeight = 'x360', ...props }:
 
 	return (
 		<Modal height={wrapperHeight} {...props}>
-			<Box padding='x12' w='full' h='full' flexGrow={1} bg='white' borderRadius='x8'>
+			<Box padding='x12' width='full' height='full' flexGrow={1} backgroundColor='white' borderRadius='x8'>
 				<iframe title={t('Marketplace_apps')} style={{ border: 'none', height: '100%', width: '100%' }} src={url} />
 			</Box>
 		</Modal>
diff --git a/apps/meteor/client/views/marketplace/components/AccordionLoading.tsx b/apps/meteor/client/views/marketplace/components/AccordionLoading.tsx
index b0abca36ff3eb..40a1626a43849 100644
--- a/apps/meteor/client/views/marketplace/components/AccordionLoading.tsx
+++ b/apps/meteor/client/views/marketplace/components/AccordionLoading.tsx
@@ -5,7 +5,7 @@ const SKELETON_ITEMS = 3;
 const AccordionLoading = () => (
 	<>
 		{Array.from({ length: SKELETON_ITEMS }, (_v, k) => (
-			<Skeleton key={k} variant='rect' height='80px' m='2px' />
+			<Skeleton key={k} variant='rect' height='80px' margin='2px' />
 		))}
 	</>
 );
diff --git a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDown.stories.tsx b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDown.stories.tsx
index 30d765c94a12e..91595e9ec2b46 100644
--- a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDown.stories.tsx
+++ b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDown.stories.tsx
@@ -73,7 +73,7 @@ export const Default: StoryFn = () => {
 	const onSelected = useCategoryToggle(setData);
 
 	return (
-		<Box w='x144'>
+		<Box width='x144'>
 			<ButtonGroup>
 				<CategoryDropDown categories={data} selectedCategories={selectedCategories} onSelected={onSelected} />
 			</ButtonGroup>
diff --git a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx
index e530777d8373d..b4385a66a97a4 100644
--- a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx
+++ b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx
@@ -21,7 +21,7 @@ const CategoryDropDownAnchor = forwardRef<HTMLElement, CategoryDropDownAnchorPro
 			ref={ref}
 			onClick={onClick}
 			alignItems='center'
-			bg={selectedCategoriesCount ? colorTokens.b500 : 'light'}
+			backgroundColor={selectedCategoriesCount ? colorTokens.b500 : 'light'}
 			borderColor={selectedCategoriesCount ? 'none' : 'light'}
 			borderRadius='x4'
 			borderWidth={selectedCategoriesCount ? 'none' : 'x1'}
@@ -31,8 +31,8 @@ const CategoryDropDownAnchor = forwardRef<HTMLElement, CategoryDropDownAnchorPro
 			justifyContent='space-between'
 			minWidth='x144'
 			height='x40'
-			pie={7}
-			pis={14}
+			paddingInlineEnd={7}
+			paddingInlineStart={14}
 			lineHeight='unset'
 			rcx-input-box
 			{...props}
@@ -41,18 +41,18 @@ const CategoryDropDownAnchor = forwardRef<HTMLElement, CategoryDropDownAnchorPro
 				<Box
 					is='span'
 					alignItems='center'
-					bg='light'
+					backgroundColor='light'
 					borderRadius='x32'
 					color='info'
 					display='flex'
 					fontSize='micro'
 					fontWeight={700}
-					h='fit-content'
+					height='fit-content'
 					justifyContent='center'
-					mie={6}
+					marginInlineEnd={6}
 					minWidth={22}
-					pb={4}
-					pi={0}
+					paddingBlock={4}
+					paddingInline={0}
 				>
 					{selectedCategoriesCount}
 				</Box>
@@ -60,7 +60,7 @@ const CategoryDropDownAnchor = forwardRef<HTMLElement, CategoryDropDownAnchorPro
 			<Box is='span' display='flex' flexGrow={1} fontScale='p2' color={selectedCategoriesCount ? 'white' : 'hint'}>
 				{selectedCategoriesCount > 0 ? t('Categories') : t('All_categories')}
 			</Box>
-			<Box mi={4} display='flex' alignItems='center' justifyContent='center'>
+			<Box marginInline={4} display='flex' alignItems='center' justifyContent='center'>
 				<Icon name='chevron-down' size='x20' color={selectedCategoriesCount ? 'white' : 'hint'} />
 			</Box>
 		</Box>
diff --git a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownList.tsx b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownList.tsx
index 548ea390f7e64..2ad274e65b1b5 100644
--- a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownList.tsx
+++ b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownList.tsx
@@ -5,11 +5,11 @@ import type { CategoryDropDownListProps } from '../../definitions/CategoryDropdo
 
 const CategoryDropDownList = ({ categories, onSelected }: CategoryDropDownListProps) => {
 	return (
-		<Tile overflow='auto' pb={12} pi={0} elevation='2' w='full' bg='light' borderRadius={2}>
+		<Tile overflow='auto' paddingBlock={12} paddingInline={0} elevation='2' width='full' backgroundColor='light' borderRadius={2}>
 			{categories.map((category, index) => (
 				<Fragment key={index}>
 					{category.label && (
-						<Box pi={16} pbs={8} pbe={4} fontScale='micro' textTransform='uppercase' color='default'>
+						<Box paddingInline={16} paddingBlockStart={8} paddingBlockEnd={4} fontScale='micro' textTransform='uppercase' color='default'>
 							{category.label}
 						</Box>
 					)}
diff --git a/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx b/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx
index 25fc8ae2d4b4d..8c7717b348ffe 100644
--- a/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx
+++ b/apps/meteor/client/views/marketplace/components/MarketplaceHeader.tsx
@@ -44,7 +44,7 @@ const MarketplaceHeader = ({ title, unsupportedVersion }: MarketplaceHeaderProps
 
 	return (
 		<PageHeader title={title}>
-			{result.isLoading && <GenericResourceUsageSkeleton mi={16} />}
+			{result.isLoading && <GenericResourceUsageSkeleton marginInline={16} />}
 
 			{!unsupportedVersion && result.isSuccess && !result.data.hasUnlimitedApps && (
 				<Margins inline={16}>
diff --git a/apps/meteor/client/views/marketplace/components/PrivateAppInstallModal/PrivateAppInstallModal.tsx b/apps/meteor/client/views/marketplace/components/PrivateAppInstallModal/PrivateAppInstallModal.tsx
index 8212abb06711e..62aa2382ac029 100644
--- a/apps/meteor/client/views/marketplace/components/PrivateAppInstallModal/PrivateAppInstallModal.tsx
+++ b/apps/meteor/client/views/marketplace/components/PrivateAppInstallModal/PrivateAppInstallModal.tsx
@@ -43,7 +43,7 @@ const PrivateAppInstallModal = ({ onClose, onProceed }: PrivateAppInstallModalPr
 			</ModalHeader>
 
 			<ModalContent>
-				<Box mbe={28}>{t('Private_app_install_modal_content')}</Box>
+				<Box marginBlockEnd={28}>{t('Private_app_install_modal_content')}</Box>
 				{t('Upgrade_subscription_to_enable_private_apps')}
 			</ModalContent>
 
diff --git a/apps/meteor/client/views/marketplace/components/RadioButtonList.tsx b/apps/meteor/client/views/marketplace/components/RadioButtonList.tsx
index 465d15cc6a538..d07a058fd9d15 100644
--- a/apps/meteor/client/views/marketplace/components/RadioButtonList.tsx
+++ b/apps/meteor/client/views/marketplace/components/RadioButtonList.tsx
@@ -3,9 +3,9 @@ import { Box, Option, RadioButton, Tile } from '@rocket.chat/fuselage';
 import type { RadioDropDownProps } from '../definitions/RadioDropDownDefinitions';
 
 const RadioButtonList = ({ group, onSelected }: RadioDropDownProps) => (
-	<Tile overflow='auto' pb={12} pi={0} elevation='2' w='full' bg='light' borderRadius='x2'>
+	<Tile overflow='auto' paddingBlock={12} paddingInline={0} elevation='2' width='full' backgroundColor='light' borderRadius='x2'>
 		{group.label && (
-			<Box pi={16} pbs={8} pbe={4} fontScale='micro' textTransform='uppercase' color='default'>
+			<Box paddingInline={16} paddingBlockStart={8} paddingBlockEnd={4} fontScale='micro' textTransform='uppercase' color='default'>
 				{group.label}
 			</Box>
 		)}
diff --git a/apps/meteor/client/views/marketplace/components/RadioDropDown/RadioDownAnchor.tsx b/apps/meteor/client/views/marketplace/components/RadioDropDown/RadioDownAnchor.tsx
index 940e0dbccf44f..eb6ed70415f2f 100644
--- a/apps/meteor/client/views/marketplace/components/RadioDropDown/RadioDownAnchor.tsx
+++ b/apps/meteor/client/views/marketplace/components/RadioDropDown/RadioDownAnchor.tsx
@@ -19,7 +19,7 @@ const RadioDownAnchor = forwardRef<HTMLElement, RadioDropdownAnchorProps>(functi
 			ref={ref}
 			onClick={onClick}
 			alignItems='center'
-			bg='light'
+			backgroundColor='light'
 			borderColor='light'
 			borderRadius='x4'
 			borderWidth='x1'
@@ -28,11 +28,11 @@ const RadioDownAnchor = forwardRef<HTMLElement, RadioDropdownAnchorProps>(functi
 			flexGrow={1}
 			flexShrink={1}
 			fontScale='p2'
-			h='x40'
+			height='x40'
 			justifyContent='space-between'
 			minWidth='x144'
-			pie={10}
-			pis={14}
+			paddingInlineEnd={10}
+			paddingInlineStart={14}
 			rcx-input-box
 			{...props}
 		>
diff --git a/apps/meteor/client/views/marketplace/components/ScreenshotCarousel.tsx b/apps/meteor/client/views/marketplace/components/ScreenshotCarousel.tsx
index b07598fe08428..eefde3318366a 100644
--- a/apps/meteor/client/views/marketplace/components/ScreenshotCarousel.tsx
+++ b/apps/meteor/client/views/marketplace/components/ScreenshotCarousel.tsx
@@ -37,7 +37,15 @@ const ScreenshotCarousel = ({
 			return (
 				<Box style={screenshotWrapperStyle} key={currentScreenshot.id}>
 					{isCurrentImageOnScreen && (
-						<Box is='img' src={currentScreenshot.accessUrl} alt='Carousel image' maxWidth='x1200' maxHeight='x600' w='100%' height='100%' />
+						<Box
+							is='img'
+							src={currentScreenshot.accessUrl}
+							alt='Carousel image'
+							maxWidth='x1200'
+							maxHeight='x600'
+							width='100%'
+							height='100%'
+						/>
 					)}
 				</Box>
 			);
@@ -45,7 +53,7 @@ const ScreenshotCarousel = ({
 
 	return (
 		<>
-			<Box position='fixed' w='100%' h='100vh' bg='font-pure-black' opacity='0.7' marginBlock='-0.75px' zIndex='2' />
+			<Box position='fixed' width='100%' height='100vh' backgroundColor='font-pure-black' opacity='0.7' marginBlock='-0.75px' zIndex='2' />
 
 			{!isFirstSlide && (
 				<IconButton
@@ -78,7 +86,7 @@ const ScreenshotCarousel = ({
 				justifyContent='center'
 				alignItems='center'
 				zIndex='2'
-				mi={38}
+				marginInline={38}
 			>
 				{handleScreenshotRender()}
 			</Box>
diff --git a/apps/meteor/client/views/marketplace/components/ScreenshotCarouselAnchor.tsx b/apps/meteor/client/views/marketplace/components/ScreenshotCarouselAnchor.tsx
index d63d9fec8530c..d2d5a2127f7d8 100644
--- a/apps/meteor/client/views/marketplace/components/ScreenshotCarouselAnchor.tsx
+++ b/apps/meteor/client/views/marketplace/components/ScreenshotCarouselAnchor.tsx
@@ -104,8 +104,8 @@ const ScreenshotCarouselAnchor = ({ screenshots }: ScreenshotCarouselAnchorProps
 					]}
 				/>
 
-				<Box display='flex' flexDirection='row' bg='tint' pi={16} pb={10} alignItems='center'>
-					<Icon name='image' size='x24' mie={8} />{' '}
+				<Box display='flex' flexDirection='row' backgroundColor='tint' paddingInline={16} paddingBlock={10} alignItems='center'>
+					<Icon name='image' size='x24' marginInlineEnd={8} />{' '}
 					<Box is='span' fontScale='p2m' color='default'>
 						{currentPreviewIndex + 1} of {screenshots.length}
 					</Box>
diff --git a/apps/meteor/client/views/marketplace/hooks/useAppMenu.tsx b/apps/meteor/client/views/marketplace/hooks/useAppMenu.tsx
index fff31cef26f40..85d34f52ca668 100644
--- a/apps/meteor/client/views/marketplace/hooks/useAppMenu.tsx
+++ b/apps/meteor/client/views/marketplace/hooks/useAppMenu.tsx
@@ -342,7 +342,7 @@ export const useAppMenu = (app: App, isAppDetailsPage: boolean) => {
 					section: 0,
 					content: (
 						<>
-							<Icon name={incompatibleIconName(app, 'subscribe')} size='x16' mie={4} />
+							<Icon name={incompatibleIconName(app, 'subscribe')} size='x16' marginInlineEnd={4} />
 							{t('Subscription')}
 						</>
 					),
@@ -358,7 +358,7 @@ export const useAppMenu = (app: App, isAppDetailsPage: boolean) => {
 					disabled: requestedEndUser,
 					content: (
 						<>
-							{isAdminUser && <Icon name={incompatibleIconName(app, 'install')} size='x16' mie={4} />}
+							{isAdminUser && <Icon name={incompatibleIconName(app, 'install')} size='x16' marginInlineEnd={4} />}
 							{t(buttonLabel)}
 						</>
 					),
@@ -388,7 +388,7 @@ export const useAppMenu = (app: App, isAppDetailsPage: boolean) => {
 					section: 0,
 					content: (
 						<>
-							<Icon name='desktop-text' size='x16' mie={4} />
+							<Icon name='desktop-text' size='x16' marginInlineEnd={4} />
 							{t('View_Logs')}
 						</>
 					),
@@ -401,7 +401,7 @@ export const useAppMenu = (app: App, isAppDetailsPage: boolean) => {
 					section: 0,
 					content: (
 						<>
-							<Icon name={incompatibleIconName(app, 'update')} size='x16' mie={4} />
+							<Icon name={incompatibleIconName(app, 'update')} size='x16' marginInlineEnd={4} />
 							{t('Update')}
 						</>
 					),
@@ -414,7 +414,7 @@ export const useAppMenu = (app: App, isAppDetailsPage: boolean) => {
 					section: 0,
 					content: (
 						<Box color='status-font-on-warning'>
-							<Icon name='ban' size='x16' mie={4} />
+							<Icon name='ban' size='x16' marginInlineEnd={4} />
 							{t('Disable')}
 						</Box>
 					),
@@ -438,7 +438,7 @@ export const useAppMenu = (app: App, isAppDetailsPage: boolean) => {
 					section: 1,
 					content: (
 						<Box color='status-font-on-danger'>
-							<Icon name='trash' size='x16' mie={4} />
+							<Icon name='trash' size='x16' marginInlineEnd={4} />
 							{t('Uninstall')}
 						</Box>
 					),
diff --git a/apps/meteor/client/views/mediaCallHistory/CallHistoryPageFilters.tsx b/apps/meteor/client/views/mediaCallHistory/CallHistoryPageFilters.tsx
index d9ec88a6763a5..4b6bdb33f1719 100644
--- a/apps/meteor/client/views/mediaCallHistory/CallHistoryPageFilters.tsx
+++ b/apps/meteor/client/views/mediaCallHistory/CallHistoryPageFilters.tsx
@@ -80,13 +80,13 @@ const CallHistoryPageFilters = ({ onChangeText, onChangeType, onChangeStates, se
 		<Box
 			is='form'
 			onSubmit={useCallback((e: SubmitEvent<HTMLFormElement>) => e.preventDefault(), [])}
-			mb='x8'
+			marginBlock='x8'
 			display='flex'
 			flexWrap='wrap'
 			alignItems='center'
 			justifyContent='center'
 		>
-			<Box minWidth='x224' flexBasis='45%' display='flex' m='x4' flexGrow={2} flexShrink={0}>
+			<Box minWidth='x224' flexBasis='45%' display='flex' margin='x4' flexGrow={2} flexShrink={0}>
 				<TextInput
 					name='search-rooms'
 					alignItems='center'
@@ -97,10 +97,10 @@ const CallHistoryPageFilters = ({ onChangeText, onChangeType, onChangeStates, se
 				/>
 			</Box>
 			<Box display='flex' flexGrow={1} flexShrink={2} flexWrap='wrap'>
-				<Box minWidth='x224' m='x4' flexGrow={1} flexShrink={1} alignItems='stretch' display='flex'>
+				<Box minWidth='x224' margin='x4' flexGrow={1} flexShrink={1} alignItems='stretch' display='flex'>
 					<Select options={selectTypeOptions} value={type} onChange={(key: Key) => onChangeType(key as TypeFilter)} />
 				</Box>
-				<Box minWidth='x224' m='x4' flexGrow={1} flexShrink={1}>
+				<Box minWidth='x224' margin='x4' flexGrow={1} flexShrink={1}>
 					<MultiSelectCustom
 						dropdownOptions={dropdownStatesOptions}
 						defaultTitle='All_statuses'
diff --git a/apps/meteor/client/views/navigation/sidebar/RoomList/OmnichannelFilters.tsx b/apps/meteor/client/views/navigation/sidebar/RoomList/OmnichannelFilters.tsx
index 29c5c718a6c76..7a2ff24b65a39 100644
--- a/apps/meteor/client/views/navigation/sidebar/RoomList/OmnichannelFilters.tsx
+++ b/apps/meteor/client/views/navigation/sidebar/RoomList/OmnichannelFilters.tsx
@@ -21,7 +21,7 @@ const OmnichannelFilters = () => {
 				{canViewOmnichannelQueue && <RoomListFiltersItem group='queue' icon={sidePanelFiltersConfig.queue.icon} />}
 				<RoomListFiltersItem group='onHold' icon={sidePanelFiltersConfig.onHold.icon} />
 			</Box>
-			<Divider borderColor='stroke-light' mb={4} mi={16} />
+			<Divider borderColor='stroke-light' marginBlock={4} marginInline={16} />
 		</>
 	);
 };
diff --git a/apps/meteor/client/views/navigation/sidebar/RoomList/TeamCollabFilters.tsx b/apps/meteor/client/views/navigation/sidebar/RoomList/TeamCollabFilters.tsx
index e8ad1faa58f28..810426db62eba 100644
--- a/apps/meteor/client/views/navigation/sidebar/RoomList/TeamCollabFilters.tsx
+++ b/apps/meteor/client/views/navigation/sidebar/RoomList/TeamCollabFilters.tsx
@@ -16,7 +16,7 @@ const TeamCollabFilters = () => {
 				<RoomListFiltersItem group='favorites' icon={sidePanelFiltersConfig.favorites.icon} />
 				{isDiscussionEnabled && <RoomListFiltersItem group='discussions' icon={sidePanelFiltersConfig.discussions.icon} />}
 			</Box>
-			<Divider borderColor='stroke-light' mb={4} mi={16} />
+			<Divider borderColor='stroke-light' marginBlock={4} marginInline={16} />
 		</>
 	);
 };
diff --git a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx
index 247149053b1c6..30e6ca2e19858 100644
--- a/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx
+++ b/apps/meteor/client/views/navigation/sidebar/badges/SidebarItemBadges.tsx
@@ -16,7 +16,7 @@ const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => {
 	return (
 		<>
 			{showUnread && <UnreadBadge title={unreadTitle} roomTitle={roomTitle} variant={unreadVariant} total={unreadCount.total} />}
-			{isInviteSubscription(room) && <InvitationBadge mbs={2} invitationDate={room.ts} />}
+			{isInviteSubscription(room) && <InvitationBadge marginBlockStart={2} invitationDate={room.ts} />}
 		</>
 	);
 };
diff --git a/apps/meteor/client/views/navigation/sidepanel/SidePanelInternal.tsx b/apps/meteor/client/views/navigation/sidepanel/SidePanelInternal.tsx
index 92e1e8475d433..aa6603853dde5 100644
--- a/apps/meteor/client/views/navigation/sidepanel/SidePanelInternal.tsx
+++ b/apps/meteor/client/views/navigation/sidepanel/SidePanelInternal.tsx
@@ -41,17 +41,17 @@ const SidePanelInternal = ({ title, currentTab, unreadOnly, toggleUnreadOnly, ro
 		<Sidepanel role='tabpanel' aria-label={t('Side_panel')}>
 			<SidepanelHeader role='heading' aria-label={title}>
 				<Box withTruncatedText display='flex' alignItems='center'>
-					{isTablet && <IconButton mie={8} icon='arrow-back' title={t('Back')} small onClick={closeSidePanel} />}
+					{isTablet && <IconButton marginInlineEnd={8} icon='arrow-back' title={t('Back')} small onClick={closeSidePanel} />}
 					<SidepanelHeaderTitle>{title}</SidepanelHeaderTitle>
 				</Box>
 				<Box display='flex' alignItems='center'>
-					<Box htmlFor={unreadFieldId} is='label' fontScale='c1' mie={8}>
+					<Box htmlFor={unreadFieldId} is='label' fontScale='c1' marginInlineEnd={8}>
 						{t('Unread')}
 					</Box>
 					<ToggleSwitch id={unreadFieldId} checked={unreadOnly} onChange={toggleUnreadOnly} />
 				</Box>
 			</SidepanelHeader>
-			<Box h='full' ref={ref}>
+			<Box height='full' ref={ref}>
 				{rooms && rooms.length === 0 && <SidePanelNoResults currentTab={currentTab} />}
 				<VirtualizedScrollbars>
 					<Virtuoso
diff --git a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelTagIcon.tsx b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelTagIcon.tsx
index 89c39473fbddd..1fdec7aa9e558 100644
--- a/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelTagIcon.tsx
+++ b/apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidePanelTagIcon.tsx
@@ -3,6 +3,6 @@ import type { ComponentProps } from 'react';
 
 export type SidePanelTagIconProps = { icon: Pick<ComponentProps<typeof Icon>, 'name' | 'color'> | null };
 
-const SidePanelTagIcon = ({ icon }: SidePanelTagIconProps) => (icon ? <Icon size='x12' mie={4} {...icon} /> : null);
+const SidePanelTagIcon = ({ icon }: SidePanelTagIconProps) => (icon ? <Icon size='x12' marginInlineEnd={4} {...icon} /> : null);
 
 export default SidePanelTagIcon;
diff --git a/apps/meteor/client/views/navigation/sidepanel/omnichannel/SidePanelOmnichannelBadges/SidePanelPriorityTag.tsx b/apps/meteor/client/views/navigation/sidepanel/omnichannel/SidePanelOmnichannelBadges/SidePanelPriorityTag.tsx
index bf36cd7d0d2f9..aeb56b2354d91 100644
--- a/apps/meteor/client/views/navigation/sidepanel/omnichannel/SidePanelOmnichannelBadges/SidePanelPriorityTag.tsx
+++ b/apps/meteor/client/views/navigation/sidepanel/omnichannel/SidePanelOmnichannelBadges/SidePanelPriorityTag.tsx
@@ -13,7 +13,7 @@ const SidePanelPriorityTag = ({ priorityWeight }: SidePanelPriorityTagProps) =>
 	}
 
 	return (
-		<Tag icon={<Icon mie={4} size='x12' name={prioritiesConfig?.iconName} />} variant={prioritiesConfig?.variant}>
+		<Tag icon={<Icon marginInlineEnd={4} size='x12' name={prioritiesConfig?.iconName} />} variant={prioritiesConfig?.variant}>
 			{prioritiesConfig?.name}
 		</Tag>
 	);
diff --git a/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.tsx b/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.tsx
index fb66fb0557da9..e4fccc806b9ff 100644
--- a/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.tsx
+++ b/apps/meteor/client/views/notAuthorized/NotAuthorizedPage.tsx
@@ -7,7 +7,7 @@ const NotAuthorizedPage = () => {
 
 	return (
 		<Page>
-			<PageContent pb={24}>
+			<PageContent paddingBlock={24}>
 				<Box is='p' fontScale='p2' color='default'>
 					{t('You_are_not_authorized_to_view_this_page')}
 				</Box>
diff --git a/apps/meteor/client/views/oauth/components/Layout.tsx b/apps/meteor/client/views/oauth/components/Layout.tsx
index b46a3d31ab3b5..e0ec6c9a8a22e 100644
--- a/apps/meteor/client/views/oauth/components/Layout.tsx
+++ b/apps/meteor/client/views/oauth/components/Layout.tsx
@@ -15,7 +15,7 @@ const Layout = ({ children }: LayoutProps) => {
 	return (
 		<VerticalWizardLayout
 			background={customBackground}
-			logo={!hideLogo && customLogo ? <Box is='img' maxHeight={40} mi={-8} src={customLogo} alt='Logo' /> : undefined}
+			logo={!hideLogo && customLogo ? <Box is='img' maxHeight={40} marginInline={-8} src={customLogo} alt='Logo' /> : undefined}
 		>
 			{children}
 		</VerticalWizardLayout>
diff --git a/apps/meteor/client/views/omnichannel/additionalForms/BusinessHoursMultiple.stories.tsx b/apps/meteor/client/views/omnichannel/additionalForms/BusinessHoursMultiple.stories.tsx
index c03dbab0ed819..70dfa41722a81 100644
--- a/apps/meteor/client/views/omnichannel/additionalForms/BusinessHoursMultiple.stories.tsx
+++ b/apps/meteor/client/views/omnichannel/additionalForms/BusinessHoursMultiple.stories.tsx
@@ -10,7 +10,7 @@ export default {
 	},
 	decorators: [
 		(fn) => (
-			<Box maxWidth='x600' alignSelf='center' w='full' m={24}>
+			<Box maxWidth='x600' alignSelf='center' width='full' margin={24}>
 				{fn()}
 			</Box>
 		),
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentEditWithData.tsx b/apps/meteor/client/views/omnichannel/agents/AgentEditWithData.tsx
index ceb293d22c77d..777da656c80be 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentEditWithData.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentEditWithData.tsx
@@ -37,7 +37,7 @@ const AgentEditWithData = ({ uid }: AgentEditWithDataProps) => {
 	}
 
 	if (error || agentsDepartmentsError || !data?.user) {
-		return <Box p={16}>{t('User_not_found')}</Box>;
+		return <Box padding={16}>{t('User_not_found')}</Box>;
 	}
 
 	return <AgentEdit agentData={data.user} agentDepartments={agentDepartments.departments} />;
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx b/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
index b22780679623c..2896bd8632f57 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx
@@ -40,7 +40,7 @@ const AgentInfo = ({ uid }: AgentInfoProps) => {
 	}
 
 	if (isError) {
-		return <Box mbs={16}>{t('User_not_found')}</Box>;
+		return <Box marginBlockStart={16}>{t('User_not_found')}</Box>;
 	}
 
 	const { username, statusLivechat, status: userStatus } = data?.user;
@@ -68,7 +68,7 @@ const AgentInfo = ({ uid }: AgentInfoProps) => {
 					<AgentInfoAction key={t('Remove')} title={t('Remove')} label={t('Remove')} onClick={handleDelete} icon='trash' />
 				</ButtonGroup>
 				<Margins block={4}>
-					<Box mb={2}>
+					<Box marginBlock={2}>
 						<UserInfoUsername username={username} status={<UserStatus status={userStatus} />} />
 					</Box>
 					{statusLivechat && (
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx
index 8668518cdd312..6784d3121048d 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx
@@ -41,7 +41,7 @@ const AddAgent = () => {
 				<FieldLabel htmlFor={usernameFieldId}>{t('Username')}</FieldLabel>
 				<FieldRow>
 					<UserAutoComplete id={usernameFieldId} value={username} onChange={handleChange} />
-					<Button disabled={!username} onClick={handleSave} mis={8} primary>
+					<Button disabled={!username} onClick={handleSave} marginInlineStart={8} primary>
 						{t('Add_agent')}
 					</Button>
 				</FieldRow>
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx
index 3cb6a49f3db67..81d21ceea81c2 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx
@@ -66,7 +66,7 @@ const AgentsTable = () => {
 			<GenericTableHeaderCell direction={sortDirection} sort='statusLivechat' active={sortBy === 'statusLivechat'} onClick={onHeaderClick}>
 				{t('Livechat_status')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell w='x60'>{t('Remove')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell width='x60'>{t('Remove')}</GenericTableHeaderCell>
 		</>
 	);
 
diff --git a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTableRow.tsx b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTableRow.tsx
index 9b5ab20c87878..ff753ad883f66 100644
--- a/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTableRow.tsx
+++ b/apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTableRow.tsx
@@ -30,7 +30,7 @@ const AgentsTableRow = ({
 			<GenericTableCell>
 				<Box display='flex' alignItems='center'>
 					{username && <UserAvatar size={mediaQuery ? 'x28' : 'x40'} title={username} username={username} etag={avatarETag} />}
-					<Box display='flex' withTruncatedText mi={8}>
+					<Box display='flex' withTruncatedText marginInline={8}>
 						<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
 							<Box fontScale='p2m' withTruncatedText color='default'>
 								{name || username}
@@ -49,7 +49,7 @@ const AgentsTableRow = ({
 					<Box fontScale='p2m' withTruncatedText color='hint'>
 						{username}
 					</Box>
-					<Box mi={4} />
+					<Box marginInline={4} />
 				</GenericTableCell>
 			)}
 			<GenericTableCell withTruncatedText>{emails?.length && emails[0].address}</GenericTableCell>
diff --git a/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.tsx b/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.tsx
index e2a839572d82a..7184f6bdb2113 100644
--- a/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.tsx
+++ b/apps/meteor/client/views/omnichannel/analytics/AnalyticsPage.tsx
@@ -55,14 +55,14 @@ const AnalyticsPage = () => {
 			<PageHeader title={t('Analytics')} />
 			<PageScrollableContentWithShadow display='flex' flexDirection='column'>
 				<Margins block={4}>
-					<Box display='flex' mi='neg-x4' flexWrap='wrap' flexGrow={1}>
+					<Box display='flex' marginInline='neg-x4' flexWrap='wrap' flexGrow={1}>
 						<Box display='flex' flexWrap='wrap' flexGrow={1}>
-							<Box display='flex' mi={4} flexDirection='column' flexGrow={1}>
-								<Label mb={4}>{t('Type')}</Label>
+							<Box display='flex' marginInline={4} flexDirection='column' flexGrow={1}>
+								<Label marginBlock={4}>{t('Type')}</Label>
 								<Select options={typeOptions} value={type} onChange={(value) => setType(String(value))} />
 							</Box>
-							<Box display='flex' mi={4} flexDirection='column' flexGrow={1}>
-								<Label mb={4}>{t('Departments')}</Label>
+							<Box display='flex' marginInline={4} flexDirection='column' flexGrow={1}>
+								<Label marginBlock={4}>{t('Departments')}</Label>
 								<AutoCompleteDepartment
 									value={department || undefined}
 									onChange={setDepartment}
@@ -72,7 +72,7 @@ const AnalyticsPage = () => {
 								/>
 							</Box>
 						</Box>
-						<DateRangePicker flexGrow={1} mi={4} onChange={setDateRange} />
+						<DateRangePicker flexGrow={1} marginInline={4} onChange={setDateRange} />
 					</Box>
 					<Box>
 						<Overview type={type} dateRange={dateRange} departmentId={department || ''} />
@@ -90,14 +90,14 @@ const AnalyticsPage = () => {
 					<Box display='flex' flexGrow={1} flexShrink={1}>
 						<InterchangeableChart
 							flexShrink={1}
-							w='66%'
-							h='100%'
+							width='66%'
+							height='100%'
 							chartName={chartName || ''}
 							departmentId={department || ''}
 							dateRange={dateRange}
 							alignSelf='stretch'
 						/>
-						<Box display='flex' w='33%' justifyContent='stretch' p={10} mis={4}>
+						<Box display='flex' width='33%' justifyContent='stretch' padding={10} marginInlineStart={4}>
 							<AgentOverview type={chartName || ''} dateRange={dateRange} departmentId={department || ''} />
 						</Box>
 					</Box>
diff --git a/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx b/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx
index 0ed5426d2c734..9020472e611cc 100644
--- a/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx
+++ b/apps/meteor/client/views/omnichannel/analytics/DateRangePicker.tsx
@@ -125,8 +125,8 @@ const DateRangePicker = ({ onChange = () => undefined, ...props }: DateRangePick
 
 	return (
 		<Box {...props}>
-			<Box mi='neg-x4' height='full' display='flex' flexDirection='row'>
-				<Field mi={4} flexShrink={1} flexGrow={1}>
+			<Box marginInline='neg-x4' height='full' display='flex' flexDirection='row'>
+				<Field marginInline={4} flexShrink={1} flexGrow={1}>
 					<FieldLabel>{t('Start')}</FieldLabel>
 					<FieldRow>
 						<Box height='x40' display='flex' width='full'>
@@ -134,13 +134,13 @@ const DateRangePicker = ({ onChange = () => undefined, ...props }: DateRangePick
 						</Box>
 					</FieldRow>
 				</Field>
-				<Field mi={4} flexShrink={1} flexGrow={1}>
+				<Field marginInline={4} flexShrink={1} flexGrow={1}>
 					<FieldLabel>{t('End')}</FieldLabel>
 					<FieldRow>
 						<Box height='x40' display='flex' width='full'>
 							<InputBox type='date' onChange={handleEnd} min={start} max={todayDate} value={end} />
 						</Box>
-						<Box mis={8}>
+						<Box marginInlineStart={8}>
 							<GenericMenu title={t('Date_range_presets')} items={options} small />
 						</Box>
 					</FieldRow>
diff --git a/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx b/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx
index dba81fc48f925..04dff6f149d83 100644
--- a/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx
+++ b/apps/meteor/client/views/omnichannel/analytics/InterchangeableChart.tsx
@@ -43,8 +43,8 @@ const InterchangeableChart = ({
 	dateRange: { start: string; end: string };
 	chartName: string;
 	flexShrink: number;
-	h: string;
-	w: string;
+	height: string;
+	width: string;
 	alignSelf: string;
 }) => {
 	const { t } = useTranslation();
diff --git a/apps/meteor/client/views/omnichannel/analytics/Overview.tsx b/apps/meteor/client/views/omnichannel/analytics/Overview.tsx
index eb061b2a52b5f..9745ddb123139 100644
--- a/apps/meteor/client/views/omnichannel/analytics/Overview.tsx
+++ b/apps/meteor/client/views/omnichannel/analytics/Overview.tsx
@@ -58,13 +58,13 @@ const Overview = ({ type, dateRange, departmentId }: OverviewProps) => {
 	}, [start, end, loadData, params]);
 
 	return (
-		<Box pb={28} flexDirection='column'>
+		<Box paddingBlock={28} flexDirection='column'>
 			{displayData.map((items = [], i) => (
-				<CounterRow key={i} border='0' pb='none'>
+				<CounterRow key={i} border='0' paddingBlock='none'>
 					{items.map(({ title, value }, i) => (
 						<CounterItem
 							flexShrink={1}
-							pb={8}
+							paddingBlock={8}
 							flexBasis='100%'
 							key={i}
 							title={title ? t(title as TranslationKey) : <Skeleton width='x60' />}
diff --git a/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx b/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx
index a56326790a25e..026ca3c6388cd 100644
--- a/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx
+++ b/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx
@@ -20,7 +20,7 @@ const AppearanceFieldLabel = ({ children, premium = false, ...props }: Appearanc
 
 	return (
 		<FieldLabel {...props}>
-			<Box is='span' mie={4}>
+			<Box is='span' marginInlineEnd={4}>
 				{children}
 			</Box>
 			<Tag variant='featured'>{t('Premium')}</Tag>
diff --git a/apps/meteor/client/views/omnichannel/appearance/AppearancePage.tsx b/apps/meteor/client/views/omnichannel/appearance/AppearancePage.tsx
index 83ca320a49e3f..e8e93d70ac24a 100644
--- a/apps/meteor/client/views/omnichannel/appearance/AppearancePage.tsx
+++ b/apps/meteor/client/views/omnichannel/appearance/AppearancePage.tsx
@@ -82,7 +82,7 @@ const AppearancePage = ({ settings }: AppearancePageProps) => {
 		<Page>
 			<PageHeader title={t('Appearance')} />
 			<PageScrollableContentWithShadow>
-				<Box maxWidth='x600' w='full' alignSelf='center'>
+				<Box maxWidth='x600' width='full' alignSelf='center'>
 					<FormProvider {...methods}>
 						<form id={formId} onSubmit={handleSubmit(handleSave)}>
 							<AppearanceForm />
diff --git a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.stories.tsx b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.stories.tsx
index f9368b0d0831c..a8f73166922aa 100644
--- a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.stories.tsx
+++ b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.stories.tsx
@@ -7,7 +7,7 @@ export default {
 	component: BusinessHoursForm,
 	decorators: [
 		(fn) => (
-			<Box maxWidth='x600' alignSelf='center' w='full' m={24}>
+			<Box maxWidth='x600' alignSelf='center' width='full' margin={24}>
 				{fn()}
 			</Box>
 		),
diff --git a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.tsx b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.tsx
index c262974a3b3f9..24aa5e5e9b7f3 100644
--- a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.tsx
+++ b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursForm.tsx
@@ -71,7 +71,7 @@ const BusinessHoursForm = ({ type }: BusinessHoursFormProps) => {
 						render={({ field }) => <Select id={timezoneField} {...field} options={timeZonesOptions} />}
 					/>
 				</FieldRow>
-				<Callout title={t('Daylight_savings_time')} type='info' mbs='x8'>
+				<Callout title={t('Daylight_savings_time')} type='info' marginBlockStart='x8'>
 					{t('Business_hours_will_update_automatically')}
 				</Callout>
 			</Field>
@@ -93,7 +93,7 @@ const BusinessHoursForm = ({ type }: BusinessHoursFormProps) => {
 								options={daysOptions}
 								value={value}
 								placeholder={t('Select_an_option')}
-								w='full'
+								width='full'
 							/>
 						)}
 					/>
@@ -103,14 +103,14 @@ const BusinessHoursForm = ({ type }: BusinessHoursFormProps) => {
 				<Field key={dayTime.id}>
 					<FieldLabel>{t(dayTime.day as TranslationKey)}</FieldLabel>
 					<FieldRow>
-						<Box display='flex' flexDirection='column' flexGrow={1} mie={2}>
+						<Box display='flex' flexDirection='column' flexGrow={1} marginInlineEnd={2}>
 							<FieldLabel htmlFor={`${daysTimeField + index}-start`}>{t('Open')}</FieldLabel>
 							<Controller
 								name={`daysTime.${index}.start.time`}
 								render={({ field }) => <InputBox id={`${daysTimeField + index}-start`} type='time' {...field} />}
 							/>
 						</Box>
-						<Box display='flex' flexDirection='column' flexGrow={1} mis={2}>
+						<Box display='flex' flexDirection='column' flexGrow={1} marginInlineStart={2}>
 							<FieldLabel htmlFor={`${daysTimeField + index}-finish`}>{t('Close')}</FieldLabel>
 							<Controller
 								name={`daysTime.${index}.finish.time`}
diff --git a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTable.stories.tsx b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTable.stories.tsx
index 65f29058e7bda..18885d91d6444 100644
--- a/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTable.stories.tsx
+++ b/apps/meteor/client/views/omnichannel/businessHours/BusinessHoursTable.stories.tsx
@@ -60,7 +60,7 @@ export const Default: StoryObj<typeof BusinessHoursTable> = {
 
 	decorators: [
 		(fn) => (
-			<Box maxWidth='x600' alignSelf='center' w='full' m={24}>
+			<Box maxWidth='x600' alignSelf='center' width='full' margin={24}>
 				{fn()}
 			</Box>
 		),
diff --git a/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHours.tsx b/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHours.tsx
index 1139c15fd2543..1b2f6f15d2886 100644
--- a/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHours.tsx
+++ b/apps/meteor/client/views/omnichannel/businessHours/EditBusinessHours.tsx
@@ -93,7 +93,7 @@ const EditBusinessHours = ({ businessHourData, type }: EditBusinessHoursProps) =
 				</ButtonGroup>
 			</PageHeader>
 			<PageScrollableContentWithShadow>
-				<Box maxWidth='600px' w='full' alignSelf='center'>
+				<Box maxWidth='600px' width='full' alignSelf='center'>
 					<FormProvider {...methods}>
 						<form id={formId} onSubmit={handleSubmit(handleSave)}>
 							<BusinessHoursForm type={type} />
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponseForm.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponseForm.tsx
index b6bb02fbc2ad6..135025c9f00cb 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponseForm.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponseForm.tsx
@@ -63,7 +63,7 @@ const CannedResponseForm = () => {
 				)}
 			</Field>
 			<Field>
-				<FieldLabel htmlFor={messageField} w='full' display='flex' flexDirection='row' justifyContent='space-between'>
+				<FieldLabel htmlFor={messageField} width='full' display='flex' flexDirection='row' justifyContent='space-between'>
 					{t('Message')}
 					{text !== '' && (
 						<Box className={clickable} color='info' onClick={() => setPreview(!preview)}>
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.tsx
index 6cc3ffbe29168..ccb22bf312435 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.tsx
@@ -121,7 +121,7 @@ const CannedResponsesComposer = ({ onChange, ...props }: CannedResponsesComposer
 						}}
 					/>
 					<PositionAnimated visible={visible ? 'visible' : 'hidden'} anchor={ref}>
-						<Tile elevation='1' w='224px'>
+						<Tile elevation='1' width='224px'>
 							<InsertPlaceholderDropdown onChange={onChange} textAreaRef={textAreaRef} setVisible={setVisible} />
 						</Tile>
 					</PositionAnimated>
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposerPreview.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposerPreview.tsx
index f02d1aa3337d4..76c3e0ab4c653 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposerPreview.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposerPreview.tsx
@@ -9,8 +9,16 @@ const CannedResponsesComposerPreview = ({ text }: CannedResponsesComposerPreview
 	const textM = text.split(/\n/).join('  \n');
 
 	return (
-		<Box style={{ wordBreak: 'normal' }} display='flex' flexDirection='column' pb={0} pi={12} rcx-box--animated rcx-input-box__wrapper>
-			<MarkdownText w='full' flexGrow={1} content={textM} parseEmoji={true} />
+		<Box
+			style={{ wordBreak: 'normal' }}
+			display='flex'
+			flexDirection='column'
+			paddingBlock={0}
+			paddingInline={12}
+			rcx-box--animated
+			rcx-input-box__wrapper
+		>
+			<MarkdownText width='full' flexGrow={1} content={textM} parseEmoji={true} />
 		</Box>
 	);
 };
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/InsertPlaceholderDropdown.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/InsertPlaceholderDropdown.tsx
index fb6fa6b4cadf6..f303d22b74c97 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/InsertPlaceholderDropdown.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/InsertPlaceholderDropdown.tsx
@@ -40,17 +40,17 @@ const InsertPlaceholderDropdown = ({ onChange, textAreaRef, setVisible }: Insert
 			</Box>
 			<Box is='ul'>
 				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('contact.name')}>
-					<Box mb='4px' style={{ width: '100%' }} fontScale='p2'>
+					<Box marginBlock='4px' style={{ width: '100%' }} fontScale='p2'>
 						{t('Name')}
 					</Box>
 				</Box>
 				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('contact.email')}>
-					<Box mb='4px' style={{ width: '100%' }} fontScale='p2'>
+					<Box marginBlock='4px' style={{ width: '100%' }} fontScale='p2'>
 						{t('Email')}
 					</Box>
 				</Box>
 				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('contact.phone')}>
-					<Box mb='4px' style={{ width: '100%' }} fontScale='p2'>
+					<Box marginBlock='4px' style={{ width: '100%' }} fontScale='p2'>
 						{t('Phone')}
 					</Box>
 				</Box>
@@ -61,12 +61,12 @@ const InsertPlaceholderDropdown = ({ onChange, textAreaRef, setVisible }: Insert
 			</Box>
 			<Box is='ul'>
 				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('agent.name')}>
-					<Box mb='4px' style={{ width: '100%' }} fontScale='p2'>
+					<Box marginBlock='4px' style={{ width: '100%' }} fontScale='p2'>
 						{t('Name')}
 					</Box>
 				</Box>
 				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('agent.email')}>
-					<Box mb='4px' style={{ width: '100%' }} fontScale='p2'>
+					<Box marginBlock='4px' style={{ width: '100%' }} fontScale='p2'>
 						{t('Email')}
 					</Box>
 				</Box>
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.stories.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.stories.tsx
index 1ce7b50935211..cd1bf822ab0a3 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.stories.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.stories.tsx
@@ -28,7 +28,7 @@ export const Default: StoryObj<typeof CannedResponse> = {
 
 	decorators: [
 		(fn) => (
-			<Box h='600px' w='330px'>
+			<Box height='600px' width='330px'>
 				{fn()}
 			</Box>
 		),
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.tsx
index 2ab79b79b6e95..b36fa017ec622 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponse.tsx
@@ -51,40 +51,40 @@ const CannedResponse = ({
 				{onClose && <ContextualbarClose onClick={onClose} />}
 			</ContextualbarHeader>
 			<ContextualbarContent>
-				<Box pb='24px'>
-					<Box mbe='16px'>
-						<Box fontScale='p2m' mbe='8px'>
+				<Box paddingBlock='24px'>
+					<Box marginBlockEnd='16px'>
+						<Box fontScale='p2m' marginBlockEnd='8px'>
 							{t('Shortcut')}:
 						</Box>
 						<Box fontScale='c1' color='hint'>
 							!{shortcut}
 						</Box>
 					</Box>
-					<Box mbe='16px'>
-						<Box fontScale='p2m' mbe='8px'>
+					<Box marginBlockEnd='16px'>
+						<Box fontScale='p2m' marginBlockEnd='8px'>
 							{t('Content')}:
 						</Box>
 						<Box fontScale='c1' color='hint'>
 							"{text}"
 						</Box>
 					</Box>
-					<Box mbe='16px'>
-						<Box fontScale='p2m' mbe='8px'>
+					<Box marginBlockEnd='16px'>
+						<Box fontScale='p2m' marginBlockEnd='8px'>
 							{t('Sharing')}:
 						</Box>
 						<Box fontScale='c1' color='hint'>
 							{scope}
 						</Box>
 					</Box>
-					<Box mbe='16px'>
-						<Box fontScale='p2m' mbe='8px'>
+					<Box marginBlockEnd='16px'>
+						<Box fontScale='p2m' marginBlockEnd='8px'>
 							{t('Tags')}:
 						</Box>
 						<Box display='flex' flexDirection='row'>
 							{tags && tags.length > 0 ? (
-								<Box display='flex' w='full' flexDirection='row' mbs='8px' flexWrap='wrap'>
+								<Box display='flex' width='full' flexDirection='row' marginBlockStart='8px' flexWrap='wrap'>
 									{tags.map((tag: string, idx: number) => (
-										<Box key={idx} mie='4px' mbe='4px'>
+										<Box key={idx} marginInlineEnd='4px' marginBlockEnd='4px'>
 											<Tag>{tag}</Tag>
 										</Box>
 									))}
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx
index ed64bd87c2d94..ec7bbc7982829 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/CannedResponseList.tsx
@@ -85,8 +85,8 @@ const CannedResponseList = ({
 				<ContextualbarClose onClick={onClose} />
 			</ContextualbarHeader>
 			<ContextualbarContent paddingInline={0} ref={ref}>
-				<Box display='flex' flexDirection='row' p={24} flexShrink={0}>
-					<Box display='flex' flexDirection='row' flexGrow={1} mi='neg-x4'>
+				<Box display='flex' flexDirection='row' padding={24} flexShrink={0}>
+					<Box display='flex' flexDirection='row' flexGrow={1} marginInline='neg-x4'>
 						<Margins inline={4}>
 							<TextInput
 								placeholder={t('Search')}
@@ -95,7 +95,7 @@ const CannedResponseList = ({
 								endAddon={<Icon name='magnifier' size='x20' />}
 								ref={inputRef}
 							/>
-							<Box w='x144'>
+							<Box width='x144'>
 								<Select aria-label={t('Type')} onChange={(value) => setType(String(value))} value={type} options={options} />
 							</Box>
 						</Margins>
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.stories.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.stories.tsx
index 148dc73fe039b..83fda80520644 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.stories.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.stories.tsx
@@ -34,5 +34,5 @@ export const Default: StoryObj<typeof Item> = {
 		},
 	},
 
-	decorators: [(fn) => <Box w='330px'>{fn()}</Box>],
+	decorators: [(fn) => <Box width='330px'>{fn()}</Box>],
 };
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.tsx
index 5ce5e0894c944..ca5dcb7ca99bd 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/contextualBar/CannedResponse/Item.tsx
@@ -27,9 +27,9 @@ const Item = ({ data, allowUse, onClickItem, onClickUse }: ItemProps) => {
 
 	return (
 		<Box
-			pbs={16}
-			pbe={12}
-			pi={24}
+			paddingBlockStart={16}
+			paddingBlockEnd={12}
+			paddingInline={24}
 			color='default'
 			borderBlockEndWidth={1}
 			borderBlockEndColor='light'
@@ -40,7 +40,7 @@ const Item = ({ data, allowUse, onClickItem, onClickUse }: ItemProps) => {
 			onMouseLeave={(): void => setVisibility(false)}
 		>
 			<Box display='flex' flexDirection='row' justifyContent='space-between' alignItems='center'>
-				<Box w='full' minWidth={0}>
+				<Box width='full' minWidth={0}>
 					<Box fontScale='p2m' withTruncatedText>
 						!{data.shortcut}
 					</Box>
@@ -61,13 +61,13 @@ const Item = ({ data, allowUse, onClickItem, onClickUse }: ItemProps) => {
 					<Icon name='chevron-left' size='x24' color='hint' />
 				</Box>
 			</Box>
-			<Box fontScale='p2' mbs='8px' color='hint' withTruncatedText>
+			<Box fontScale='p2' marginBlockStart='8px' color='hint' withTruncatedText>
 				"{data.text}"
 			</Box>
 			{data.tags && data.tags.length > 0 && (
-				<Box display='flex' w='full' flexDirection='row' mbs='8px' flexWrap='wrap'>
+				<Box display='flex' width='full' flexDirection='row' marginBlockStart='8px' flexWrap='wrap'>
 					{data.tags.map((tag: string, idx: number) => (
-						<Box key={idx} mie='4px' mbe='4px'>
+						<Box key={idx} marginInlineEnd='4px' marginBlockEnd='4px'>
 							<Tag>{tag}</Tag>
 						</Box>
 					))}
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEdit.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEdit.tsx
index 6b0c18a5cc056..3ba8f82da1f47 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEdit.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEdit.tsx
@@ -88,7 +88,7 @@ const CannedResponseEdit = ({ cannedResponseData, onDelete }: CannedResponseEdit
 			</PageHeader>
 			<PageScrollableContentWithShadow>
 				<FormProvider {...methods}>
-					<Box id={formId} onSubmit={handleSubmit(handleSave)} w='full' alignSelf='center' maxWidth='x600' is='form' autoComplete='off'>
+					<Box id={formId} onSubmit={handleSubmit(handleSave)} width='full' alignSelf='center' maxWidth='x600' is='form' autoComplete='off'>
 						<CannedResponseForm />
 					</Box>
 				</FormProvider>
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEditWithData.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEditWithData.tsx
index c6b3e85f5385d..f2296e3504c3f 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEditWithData.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEditWithData.tsx
@@ -28,7 +28,7 @@ const CannedResponseEditWithData = ({ cannedResponseId }: CannedResponseEditWith
 
 	if (isError) {
 		return (
-			<Callout m={16} type='danger'>
+			<Callout margin={16} type='danger'>
 				{t('Not_Available')}
 			</Callout>
 		);
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEditWithDepartmentData.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEditWithDepartmentData.tsx
index 6d5ba9322a7d3..265e40917632f 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEditWithDepartmentData.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEditWithDepartmentData.tsx
@@ -39,7 +39,7 @@ const CannedResponseEditWithDepartmentData = ({
 
 	if (isError) {
 		return (
-			<Callout m={16} type='danger'>
+			<Callout margin={16} type='danger'>
 				{t('Not_Available')}
 			</Callout>
 		);
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseFilter.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseFilter.tsx
index 5e4662bc2b0d4..319cd2c0fa22e 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseFilter.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseFilter.tsx
@@ -28,21 +28,21 @@ const CannedResponsesFilter = ({ createdBy, setCreatedBy, sharing, setSharing, t
 	];
 
 	return (
-		<Box mb={16} display='flex' flexDirection='row'>
-			<Box display='flex' mie={8} flexGrow={1} flexDirection='column'>
-				<Box mb={4}>{t('Search')}</Box>
+		<Box marginBlock={16} display='flex' flexDirection='row'>
+			<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+				<Box marginBlock={4}>{t('Search')}</Box>
 				<TextInput
 					value={text}
 					onChange={(e: ChangeEvent<HTMLInputElement>) => setText(e.target.value)}
 					endAddon={<Icon name='magnifier' size='x20' />}
 				/>
 			</Box>
-			<Box display='flex' mie={8} flexGrow={1} flexDirection='column'>
-				<Box mb={4}>{t('Sharing')}</Box>
+			<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+				<Box marginBlock={4}>{t('Sharing')}</Box>
 				<Select value={sharing} onChange={(value) => setSharing(value as SharingValues)} options={sharingList} />
 			</Box>
-			<Box display='flex' mie={8} flexGrow={1} flexDirection='column'>
-				<Box mb={4}>{t('Created_by')}</Box>
+			<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+				<Box marginBlock={4}>{t('Created_by')}</Box>
 				<AutoCompleteAgent value={createdBy} onChange={setCreatedBy} haveAll />
 			</Box>
 		</Box>
diff --git a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponsesTable.tsx b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponsesTable.tsx
index 5e91bf94fa2db..4e6917bfdaa2d 100644
--- a/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponsesTable.tsx
+++ b/apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponsesTable.tsx
@@ -108,7 +108,7 @@ const CannedResponsesTable = () => {
 			<GenericTableHeaderCell key='tags' direction={sortDirection} active={sortBy === 'tags'} onClick={setSort} sort='tags'>
 				{t('Tags')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='remove' w='x60'>
+			<GenericTableHeaderCell key='remove' width='x60'>
 				{t('Remove')}
 			</GenericTableHeaderCell>
 		</>
@@ -158,7 +158,7 @@ const CannedResponsesTable = () => {
 									<GenericTableCell withTruncatedText>
 										<Box display='flex' alignItems='center'>
 											<UserAvatar size='x24' username={createdBy.username} />
-											<Box display='flex' withTruncatedText mi={8}>
+											<Box display='flex' withTruncatedText marginInline={8}>
 												<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
 													<Box fontScale='p2m' withTruncatedText color='default'>
 														{createdBy.username}
diff --git a/apps/meteor/client/views/omnichannel/components/AgentInfoDetails.tsx b/apps/meteor/client/views/omnichannel/components/AgentInfoDetails.tsx
index dba147070df83..f571281ed2a9a 100644
--- a/apps/meteor/client/views/omnichannel/components/AgentInfoDetails.tsx
+++ b/apps/meteor/client/views/omnichannel/components/AgentInfoDetails.tsx
@@ -23,11 +23,11 @@ const AgentInfoDetails = ({ name, shortName, status = <UserStatus.Offline />, ..
 		{...props}
 	>
 		{status}{' '}
-		<Box mis={8} flexGrow={1} withTruncatedText>
+		<Box marginInlineStart={8} flexGrow={1} withTruncatedText>
 			{name}
 		</Box>
 		{shortName && (
-			<Box display='flex' mis={8} mb={8} justifyContent='center' fontScale='c1'>
+			<Box display='flex' marginInlineStart={8} marginBlock={8} justifyContent='center' fontScale='c1'>
 				({shortName})
 			</Box>
 		)}
diff --git a/apps/meteor/client/views/omnichannel/components/CustomField.tsx b/apps/meteor/client/views/omnichannel/components/CustomField.tsx
index 057e87d2a9125..5978bdcb8254a 100644
--- a/apps/meteor/client/views/omnichannel/components/CustomField.tsx
+++ b/apps/meteor/client/views/omnichannel/components/CustomField.tsx
@@ -24,7 +24,7 @@ const CustomField = ({ id, value }: CustomFieldProps) => {
 	}
 
 	if (isError || !data?.customField) {
-		return <Box mbs={16}>{t('Custom_Field_Not_Found')}</Box>;
+		return <Box marginBlockStart={16}>{t('Custom_Field_Not_Found')}</Box>;
 	}
 
 	const { label } = data.customField;
diff --git a/apps/meteor/client/views/omnichannel/components/Field.tsx b/apps/meteor/client/views/omnichannel/components/Field.tsx
index 16120c096ebf0..8063aaff93a2e 100644
--- a/apps/meteor/client/views/omnichannel/components/Field.tsx
+++ b/apps/meteor/client/views/omnichannel/components/Field.tsx
@@ -3,6 +3,6 @@ import type { ReactNode } from 'react';
 
 export type FieldProps = { children?: ReactNode };
 
-const Field = ({ children }: FieldProps) => <Box mb={16}>{children}</Box>;
+const Field = ({ children }: FieldProps) => <Box marginBlock={16}>{children}</Box>;
 
 export default Field;
diff --git a/apps/meteor/client/views/omnichannel/components/FormSkeleton.tsx b/apps/meteor/client/views/omnichannel/components/FormSkeleton.tsx
index 872cac119063f..e99c610476787 100644
--- a/apps/meteor/client/views/omnichannel/components/FormSkeleton.tsx
+++ b/apps/meteor/client/views/omnichannel/components/FormSkeleton.tsx
@@ -4,8 +4,8 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type FormSkeletonProps = ComponentPropsWithoutRef<typeof Box>;
 
 export const FormSkeleton = (props: FormSkeletonProps) => (
-	<Box w='full' pb={24} {...props}>
-		<Skeleton mbe={8} />
-		<Skeleton mbe={4} />
+	<Box width='full' paddingBlock={24} {...props}>
+		<Skeleton marginBlockEnd={8} />
+		<Skeleton marginBlockEnd={4} />
 	</Box>
 );
diff --git a/apps/meteor/client/views/omnichannel/components/Label.tsx b/apps/meteor/client/views/omnichannel/components/Label.tsx
index 971619631b57f..78f168923cb70 100644
--- a/apps/meteor/client/views/omnichannel/components/Label.tsx
+++ b/apps/meteor/client/views/omnichannel/components/Label.tsx
@@ -3,5 +3,5 @@ import type { ComponentProps } from 'react';
 
 export type LabelProps = ComponentProps<typeof Box>;
 
-const Label = (props: LabelProps) => <Box mbe={8} fontScale='p2m' color='default' {...props} />;
+const Label = (props: LabelProps) => <Box marginBlockEnd={8} fontScale='p2m' color='default' {...props} />;
 export default Label;
diff --git a/apps/meteor/client/views/omnichannel/components/OmnichannelVerificationTag.tsx b/apps/meteor/client/views/omnichannel/components/OmnichannelVerificationTag.tsx
index ba656524efe62..626e3282f2686 100644
--- a/apps/meteor/client/views/omnichannel/components/OmnichannelVerificationTag.tsx
+++ b/apps/meteor/client/views/omnichannel/components/OmnichannelVerificationTag.tsx
@@ -17,7 +17,7 @@ const OmnichannelVerificationTag = ({ verified, onClick }: OmnichannelVerificati
 		<Tag
 			variant={isVerified ? 'primary' : undefined}
 			onClick={!isVerified && onClick ? onClick : undefined}
-			icon={<Icon size='x12' mie={4} name={isVerified ? 'success-circle' : 'question-mark'} />}
+			icon={<Icon size='x12' marginInlineEnd={4} name={isVerified ? 'success-circle' : 'question-mark'} />}
 		>
 			{isVerified ? t('Verified') : t('Unverified')}
 		</Tag>
diff --git a/apps/meteor/client/views/omnichannel/components/Tags.tsx b/apps/meteor/client/views/omnichannel/components/Tags.tsx
index 974c4fd8df1ed..5c69272634b46 100644
--- a/apps/meteor/client/views/omnichannel/components/Tags.tsx
+++ b/apps/meteor/client/views/omnichannel/components/Tags.tsx
@@ -67,7 +67,7 @@ const Tags = ({ tags = [], handler, error, tagRequired, department }: TagsProps)
 
 	return (
 		<>
-			<FieldLabel htmlFor={tagsFieldId} required={tagRequired} mb={4}>
+			<FieldLabel htmlFor={tagsFieldId} required={tagRequired} marginBlock={4}>
 				{t('Tags')}
 			</FieldLabel>
 
@@ -94,7 +94,7 @@ const Tags = ({ tags = [], handler, error, tagRequired, department }: TagsProps)
 							flexGrow={1}
 							placeholder={t('Enter_a_tag')}
 						/>
-						<Button disabled={!tagValue} mis={8} title={t('Add')} onClick={handleTagTextSubmit}>
+						<Button disabled={!tagValue} marginInlineStart={8} title={t('Add')} onClick={handleTagTextSubmit}>
 							{t('Add')}
 						</Button>
 					</FieldRow>
@@ -104,7 +104,7 @@ const Tags = ({ tags = [], handler, error, tagRequired, department }: TagsProps)
 			{customTags.length > 0 && (
 				<FieldRow justifyContent='flex-start'>
 					{customTags?.map((tag, i) => (
-						<Chip key={i} onClick={(): void => removeTag(tag)} mie={8}>
+						<Chip key={i} onClick={(): void => removeTag(tag)} marginInlineEnd={8}>
 							{tag}
 						</Chip>
 					))}
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/AutoCompleteDepartmentAgent.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/AutoCompleteDepartmentAgent.tsx
index 23bc8206fe8c4..184602bc13966 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/AutoCompleteDepartmentAgent.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/AutoCompleteDepartmentAgent.tsx
@@ -41,9 +41,9 @@ const AutoCompleteDepartmentAgent = ({ value, onChange, agents, placeholder, ...
 			options={options}
 			renderSelected={({ selected: { value, label }, ...props }) => {
 				return (
-					<Chip {...props} height='x20' value={value} onClick={() => onChange('')} mie={4}>
+					<Chip {...props} height='x20' value={value} onClick={() => onChange('')} marginInlineEnd={4}>
 						<UserAvatar size='x20' username={label} />
-						<Box is='span' margin='none' mis={4}>
+						<Box is='span' margin='none' marginInlineStart={4}>
 							{label}
 						</Box>
 					</Chip>
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessagePreview/OutboundMessagePreview.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessagePreview/OutboundMessagePreview.tsx
index 81728e1a7cc34..1e9c2f16668ea 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessagePreview/OutboundMessagePreview.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessagePreview/OutboundMessagePreview.tsx
@@ -73,7 +73,7 @@ const OutboundMessagePreview = ({
 		<Box {...props} is='section'>
 			<ul>
 				<Margins blockStart={24}>
-					<Box is='li' mbs={0}>
+					<Box is='li' marginBlockStart={0}>
 						<PreviewItem icon='doc' label={t('Template')}>
 							{template?.name}
 						</PreviewItem>
@@ -97,7 +97,7 @@ const OutboundMessagePreview = ({
 			</ul>
 
 			{template ? (
-				<Box mbs={30}>
+				<Box marginBlockStart={30}>
 					<TemplatePreview template={template} parameters={templateParameters} />
 				</Box>
 			) : null}
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessagePreview/PreviewItem.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessagePreview/PreviewItem.tsx
index 3593f5c90be75..8eb7cfec41b2b 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessagePreview/PreviewItem.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessagePreview/PreviewItem.tsx
@@ -17,7 +17,7 @@ const PreviewItem = ({ icon, label, children }: PreviewItemProps) => {
 	return (
 		<Box display='flex'>
 			<Icon size={18} name={icon} />
-			<Box mis={6}>
+			<Box marginInlineStart={6}>
 				<Box is='span' id={id} fontScale='p2m'>
 					{label}
 				</Box>
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.tsx
index 17105a1ba43d6..ae995baba770f 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/OutboundMessageWizard.tsx
@@ -171,7 +171,7 @@ const OutboundMessageWizard = ({ defaultValues = {}, onSuccess, onError }: Outbo
 			<Wizard api={wizardApi} display='flex' flexDirection='column' height='100%'>
 				<WizardTabs />
 
-				<Box mbs={16} minHeight={0} flexGrow={1}>
+				<Box marginBlockStart={16} minHeight={0} flexGrow={1}>
 					<WizardContent id='recipient'>
 						<RecipientStep defaultValues={state} onDirty={handleDirtyStep} onSubmit={handleSubmit} />
 					</WizardContent>
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/components/OutboundMessageWizardSkeleton.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/components/OutboundMessageWizardSkeleton.tsx
index 53d21dcfe6cbd..364b454895579 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/components/OutboundMessageWizardSkeleton.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/components/OutboundMessageWizardSkeleton.tsx
@@ -5,28 +5,28 @@ const OutboubdMessageWizardSkeleton = () => {
 		<Box role='status' aria-busy='true'>
 			<Box display='flex'>
 				<Skeleton width={75} height={40} />
-				<Skeleton mis={8} width={100} height={50} />
-				<Skeleton mis={8} width={100} height={50} />
-				<Skeleton mis={8} width={100} height={50} />
+				<Skeleton marginInlineStart={8} width={100} height={50} />
+				<Skeleton marginInlineStart={8} width={100} height={50} />
+				<Skeleton marginInlineStart={8} width={100} height={50} />
 			</Box>
 
-			<Box mbs={10}>
+			<Box marginBlockStart={10}>
 				<Skeleton width={80} height={30} />
 				<Skeleton width='100%' height={50} />
 			</Box>
-			<Box mbs={10}>
+			<Box marginBlockStart={10}>
 				<Skeleton width={80} height={30} />
 				<Skeleton width='100%' height={50} />
 			</Box>
-			<Box mbs={10}>
+			<Box marginBlockStart={10}>
 				<Skeleton width={80} height={30} />
 				<Skeleton width='100%' height={50} />
 			</Box>
-			<Box mbs={10}>
+			<Box marginBlockStart={10}>
 				<Skeleton width={80} height={30} />
 				<Skeleton width='100%' height={50} />
 			</Box>
-			<Box mbs={10} display='flex' justifyContent='end'>
+			<Box marginBlockStart={10} display='flex' justifyContent='end'>
 				<Skeleton width={85} height={60} />
 			</Box>
 		</Box>
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/components/RetryButton.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/components/RetryButton.tsx
index ad1fab1fc32c6..17791fcda5f60 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/components/RetryButton.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/components/RetryButton.tsx
@@ -28,7 +28,7 @@ const RetryButton = ({ loading, onClick }: RetryButtonProps) => {
 			rcx-button--loading={loading}
 			icon={loading ? 'loading' : 'reload'}
 			title={loading ? t('Loading...') : t('Retry')}
-			mis={4}
+			marginInlineStart={4}
 			onClick={() => onClick()}
 		/>
 	);
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx
index 788fe6effb0b0..01509334edd2c 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx
@@ -80,7 +80,7 @@ const MessageForm = (props: MessageFormProps) => {
 	return (
 		<Form id={messageFormId} onSubmit={handleSubmit(submit)} noValidate>
 			<Scrollable vertical>
-				<FieldGroup justifyContent='start' pi={2}>
+				<FieldGroup justifyContent='start' paddingInline={2}>
 					<TemplateField control={control} templates={templates} onChange={() => setValue('templateParameters', {})} />
 
 					{parametersMetadata.map((metadata) => (
@@ -92,7 +92,7 @@ const MessageForm = (props: MessageFormProps) => {
 			</Scrollable>
 
 			{customActions ?? (
-				<Box mbs={24} display='flex' justifyContent='end'>
+				<Box marginBlockStart={24} display='flex' justifyContent='end'>
 					<Button type='submit' primary loading={isSubmitting}>
 						{t('Submit')}
 					</Button>
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RecipientForm/RecipientForm.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RecipientForm/RecipientForm.tsx
index 65642eb9d7c88..b8ad99bbb6355 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RecipientForm/RecipientForm.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RecipientForm/RecipientForm.tsx
@@ -186,7 +186,7 @@ const RecipientForm = (props: RecipientFormProps) => {
 	return (
 		<Form id={recipientFormId} onSubmit={handleSubmit(submit)} noValidate>
 			<Scrollable vertical>
-				<FieldGroup justifyContent='start' pi={2}>
+				<FieldGroup justifyContent='start' paddingInline={2}>
 					<ContactField
 						control={control}
 						isError={isErrorContact || isContactNotFound}
@@ -216,7 +216,7 @@ const RecipientForm = (props: RecipientFormProps) => {
 			</Scrollable>
 
 			{customActions ?? (
-				<Box mbs={24} display='flex' justifyContent='end' flexGrow={0} flexShrink={0}>
+				<Box marginBlockStart={24} display='flex' justifyContent='end' flexGrow={0} flexShrink={0}>
 					<Button type='submit' primary loading={isSubmitting}>
 						{t('Submit')}
 					</Button>
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RecipientForm/components/ContactField.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RecipientForm/components/ContactField.tsx
index f8cd54d05b062..7f92d7ebd0c66 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RecipientForm/components/ContactField.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RecipientForm/components/ContactField.tsx
@@ -43,7 +43,7 @@ const ContactField = ({ control, isError = false, isFetching = false, onRetry, .
 
 		return (
 			<Option {...props} avatar={<UserAvatar title={label} username={label} size='x20' />}>
-				<Box is={OptionContent} mie='auto' flexGrow={0} flexShrink={0} flexBasis={0}>
+				<Box is={OptionContent} marginInlineEnd='auto' flexGrow={0} flexShrink={0} flexBasis={0}>
 					{label}
 				</Box>
 				{phones?.length ? (
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RepliesForm/RepliesForm.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RepliesForm/RepliesForm.tsx
index eac8588a3da7e..0daaa83e0d18d 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RepliesForm/RepliesForm.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RepliesForm/RepliesForm.tsx
@@ -118,7 +118,7 @@ const RepliesForm = (props: RepliesFormProps) => {
 	return (
 		<Form id={repliesFormId} onSubmit={handleSubmit(submit)} noValidate>
 			<Scrollable vertical>
-				<FieldGroup justifyContent='start' pi={2}>
+				<FieldGroup justifyContent='start' paddingInline={2}>
 					<DepartmentField
 						control={control}
 						onlyMyDepartments={!canAssignAllDepartments}
@@ -139,7 +139,7 @@ const RepliesForm = (props: RepliesFormProps) => {
 			</Scrollable>
 
 			{customActions ?? (
-				<Box mbs={24} display='flex' justifyContent='end'>
+				<Box marginBlockStart={24} display='flex' justifyContent='end'>
 					<Button type='submit' primary loading={isSubmitting}>
 						{t('Submit')}
 					</Button>
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePlaceholderSelector/TemplatePlaceholderInput.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePlaceholderSelector/TemplatePlaceholderInput.tsx
index 0e4e532a5adeb..50351e93bf61a 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePlaceholderSelector/TemplatePlaceholderInput.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePlaceholderSelector/TemplatePlaceholderInput.tsx
@@ -30,7 +30,13 @@ const TemplatePlaceholderInput = ({ contact, value = '', type, onChange, ...prop
 		<Box display='flex' width='100%'>
 			<TextInput {...props} ref={inputRef} value={value} endAddon={addon} onChange={handleChange as ChangeEventHandler<HTMLInputElement>} />
 
-			<PlaceholderSelector disabled={type !== 'text'} mis={12} contact={contact} onSelect={handleChange} onOpenChange={handleOpenToggle} />
+			<PlaceholderSelector
+				disabled={type !== 'text'}
+				marginInlineStart={12}
+				contact={contact}
+				onSelect={handleChange}
+				onOpenChange={handleOpenToggle}
+			/>
 		</Box>
 	);
 };
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePlaceholderSelector/TemplatePlaceholderSelector.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePlaceholderSelector/TemplatePlaceholderSelector.tsx
index cb0953fe1d11a..7657e8188f530 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePlaceholderSelector/TemplatePlaceholderSelector.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePlaceholderSelector/TemplatePlaceholderSelector.tsx
@@ -7,7 +7,7 @@ import { useAgentSection } from './hooks/useAgentSection';
 import { useContactSection } from './hooks/useContactSection';
 import { useCustomFieldsSection } from './hooks/useCustomFieldsSection';
 
-type PlaceholderSelectorProps = Pick<ComponentProps<typeof PlaceholderButton>, 'mis' | 'disabled'> & {
+type PlaceholderSelectorProps = Pick<ComponentProps<typeof PlaceholderButton>, 'marginInlineStart' | 'disabled'> & {
 	contact?: Serialized<ILivechatContact>;
 	onSelect(value: string): void;
 	onOpenChange?(isOpen: boolean): void;
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePreview.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePreview.tsx
index 62ab1c1fb6b3b..ec6bde56ea8c3 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePreview.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/components/TemplatePreview.tsx
@@ -34,8 +34,8 @@ const TemplatePreview = ({ template, parameters = {} }: TemplatePreviewProps) =>
 	}, [components, parameters, t]);
 
 	return (
-		<Box mbs={12}>
-			<Box is='p' fontScale='p2m' mbe={2} id={previewId}>
+		<Box marginBlockStart={12}>
+			<Box is='p' fontScale='p2m' marginBlockEnd={2} id={previewId}>
 				{t('Message_preview')}
 			</Box>
 			<Callout type='info' icon='balloon-text' title={content.header || ''} aria-labelledby={previewId}>
diff --git a/apps/meteor/client/views/omnichannel/components/outboundMessage/modals/OutboundMessageModal/OutboundMessageModal.tsx b/apps/meteor/client/views/omnichannel/components/outboundMessage/modals/OutboundMessageModal/OutboundMessageModal.tsx
index 010781587d0d5..93c9910f93a72 100644
--- a/apps/meteor/client/views/omnichannel/components/outboundMessage/modals/OutboundMessageModal/OutboundMessageModal.tsx
+++ b/apps/meteor/client/views/omnichannel/components/outboundMessage/modals/OutboundMessageModal/OutboundMessageModal.tsx
@@ -45,14 +45,19 @@ const OutboundMessageModal = ({ defaultValues, onClose }: OutboundMessageModalPr
 	});
 
 	return (
-		<ModalBackdrop bg='transparent' onClick={(e) => e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()} onKeyDown={handleKeyDown}>
+		<ModalBackdrop
+			backgroundColor='transparent'
+			onClick={(e) => e.stopPropagation()}
+			onMouseDown={(e) => e.stopPropagation()}
+			onKeyDown={handleKeyDown}
+		>
 			<Modal aria-labelledby={modalId} display={isClosing ? 'none' : undefined}>
 				<ModalHeader>
 					<ModalTitle id={modalId}>{t('Outbound_message')}</ModalTitle>
 					<ModalClose aria-label={t('Close')} onClick={() => setClosingConfirmation(true)} />
 				</ModalHeader>
 
-				<ModalContent pbe={16} height='100%'>
+				<ModalContent paddingBlockEnd={16} height='100%'>
 					<OutboundMessageWizard defaultValues={defaultValues} onSuccess={onClose} onError={onClose} />
 				</ModalContent>
 			</Modal>
diff --git a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx
index c5ee023d5cd60..eacc77a09d0ae 100644
--- a/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx
+++ b/apps/meteor/client/views/omnichannel/contactHistory/MessageList/ContactHistoryMessagesList.tsx
@@ -83,13 +83,13 @@ const ContactHistoryMessagesList = ({ chatId, onClose, onOpenRoom }: ContactHist
 				<Box
 					display='flex'
 					flexDirection='row'
-					p={24}
+					padding={24}
 					borderBlockEndWidth='default'
 					borderBlockEndStyle='solid'
 					borderBlockEndColor='extra-light'
 					flexShrink={0}
 				>
-					<Box display='flex' flexDirection='row' flexGrow={1} mi='neg-x4'>
+					<Box display='flex' flexDirection='row' flexGrow={1} marginInline='neg-x4'>
 						<Margins inline={4}>
 							<TextInput
 								placeholder={t('Search')}
@@ -101,7 +101,7 @@ const ContactHistoryMessagesList = ({ chatId, onClose, onOpenRoom }: ContactHist
 					</Box>
 				</Box>
 				{isPending && (
-					<Box pi={24} pb={12}>
+					<Box paddingInline={24} paddingBlock={12}>
 						<Throbber size='x12' />
 					</Box>
 				)}
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx b/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx
index 6d4faaf469050..ed4f4291529f0 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx
@@ -46,12 +46,12 @@ const ContactInfo = ({ contact, onClose }: ContactInfoProps) => {
 				<ContextualbarTitle>{t('Contact')}</ContextualbarTitle>
 				<ContextualbarClose onClick={onClose} />
 			</ContextualbarHeader>
-			<Box display='flex' flexDirection='column' pi={24}>
+			<Box display='flex' flexDirection='column' paddingInline={24}>
 				{name && (
-					<Box width='100%' pb={16} display='flex' alignItems='center' justifyContent='space-between'>
+					<Box width='100%' paddingBlock={16} display='flex' alignItems='center' justifyContent='space-between'>
 						<Box withTruncatedText display='flex'>
 							<UserAvatar size='x40' title={name} username={name} />
-							<Box withTruncatedText mis={16} display='flex' flexDirection='column'>
+							<Box withTruncatedText marginInlineStart={16} display='flex' flexDirection='column'>
 								<Box withTruncatedText fontScale='h4'>
 									{name}
 								</Box>
@@ -69,7 +69,7 @@ const ContactInfo = ({ contact, onClose }: ContactInfoProps) => {
 				)}
 				{hasConflicts && (
 					<Callout
-						mbe={8}
+						marginBlockEnd={8}
 						alignItems='center'
 						icon='members'
 						actions={
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ReviewContactModal.tsx b/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ReviewContactModal.tsx
index d5a427516f249..ab92e0f372029 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ReviewContactModal.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ReviewContactModal.tsx
@@ -107,7 +107,7 @@ const ReviewContactModal = ({ contact, onCancel }: ReviewContactModalProps) => {
 							</FieldRow>
 							<FieldHint id={`${name}-hint`}>
 								<Box display='flex' alignItems='center'>
-									<Box mie={4}>{t('different_values_found', { number: values.length })}</Box>
+									<Box marginInlineEnd={4}>{t('different_values_found', { number: values.length })}</Box>
 									<Badge variant='primary' small />
 								</Box>
 							</FieldHint>
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx b/apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx
index 3e171728034c6..1c9d7c92cbb52 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx
@@ -231,13 +231,13 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 									}}
 									render={({ field }) => <TextInput {...field} error={errors.emails?.[index]?.address?.message} aria-required='true' />}
 								/>
-								<IconButton title={t('Remove_email')} small onClick={() => removeEmail(index)} mis={8} icon='trash' />
+								<IconButton title={t('Remove_email')} small onClick={() => removeEmail(index)} marginInlineStart={8} icon='trash' />
 							</FieldRow>
 							{errors.emails?.[index]?.address && <FieldError>{errors.emails?.[index]?.address?.message}</FieldError>}
 						</Fragment>
 					))}
 					<Button
-						mbs={8}
+						marginBlockStart={8}
 						onClick={validateMultipleFields(emailFields.length, hasLicense) ? handleOpenUpSellModal : () => appendEmail({ address: '' })}
 					>
 						{t('Add_email')}
@@ -257,13 +257,13 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 									}}
 									render={({ field }) => <TextInput {...field} error={errors.phones?.[index]?.phoneNumber?.message} aria-required='true' />}
 								/>
-								<IconButton title={t('Remove_phone')} small onClick={() => removePhone(index)} mis={8} icon='trash' />
+								<IconButton title={t('Remove_phone')} small onClick={() => removePhone(index)} marginInlineStart={8} icon='trash' />
 							</FieldRow>
 							{errors.phones?.[index]?.phoneNumber && <FieldError>{errors.phones?.[index]?.phoneNumber?.message}</FieldError>}
 						</Fragment>
 					))}
 					<Button
-						mbs={8}
+						marginBlockStart={8}
 						onClick={
 							validateMultipleFields(phoneFields.length, hasLicense) ? handleOpenUpSellModal : () => appendPhone({ phoneNumber: '' })
 						}
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx
index 9977066400152..a5b4d6d2eab45 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx
@@ -29,7 +29,7 @@ const ContactInfoChannels = ({ contact }: ContactInfoChannelsProps) => {
 	if (isPending) {
 		return (
 			<ContextualbarContent>
-				<Box pb={12}>
+				<Box paddingBlock={12}>
 					<Throbber size='x12' />
 				</Box>
 			</ContextualbarContent>
@@ -54,7 +54,7 @@ const ContactInfoChannels = ({ contact }: ContactInfoChannelsProps) => {
 			)}
 			{data.channels && data.channels.length > 0 && (
 				<>
-					<Box is='span' fontScale='p2' pbs={24} pis={24} mbe={8}>
+					<Box is='span' fontScale='p2' paddingBlockStart={24} paddingInlineStart={24} marginBlockEnd={8}>
 						{t('Last_contacts')}
 					</Box>
 					<Box role='list' flexGrow={1} flexShrink={1} overflow='hidden' display='flex'>
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannelsItem.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannelsItem.tsx
index 8be87a4c45a4d..76234b6b31ba9 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannelsItem.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannelsItem.tsx
@@ -86,8 +86,8 @@ const ContactInfoChannelsItem = ({
 			borderBlockEndColor='stroke-extra-light'
 			borderBlockEndStyle='solid'
 			className={['rcx-box--animated', customClass]}
-			pi={24}
-			pb={12}
+			paddingInline={24}
+			paddingBlock={12}
 			display='flex'
 			flexDirection='column'
 			onFocus={() => setShowButton(true)}
@@ -97,17 +97,17 @@ const ContactInfoChannelsItem = ({
 			<Box display='flex' alignItems='center'>
 				{details && <OmnichannelRoomIcon source={details} size='x18' placement='default' />}
 				{details && (
-					<Box mi={4} fontScale='p2b'>
+					<Box marginInline={4} fontScale='p2b'>
 						{getSourceName(details)} {blocked && `(${t('Blocked')})`}
 					</Box>
 				)}
 				{lastChat && (
-					<Box mis={4} fontScale='c1'>
+					<Box marginInlineStart={4} fontScale='c1'>
 						{getTimeFromNow(lastChat.ts)}
 					</Box>
 				)}
 			</Box>
-			<Box minHeight='x24' alignItems='center' mbs={4} display='flex' justifyContent='space-between'>
+			<Box minHeight='x24' alignItems='center' marginBlockStart={4} display='flex' justifyContent='space-between'>
 				<Box>{channelLabel}</Box>
 				{showButton && <GenericMenu detached title={t('Options')} sections={[{ items: menuItems }]} tiny />}
 			</Box>
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetails.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetails.tsx
index e1cb70b02b656..17d214f4ac2b1 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetails.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetails.tsx
@@ -61,7 +61,7 @@ const ContactInfoDetails = ({ contact, emails, phones, createdAt, customFieldEnt
 
 				{customFieldEntries.length > 0 && (
 					<>
-						<Divider mi={-24} />
+						<Divider marginInline={-24} />
 						{customFieldEntries?.map(([key, value]) => <CustomField key={key} id={key} value={value as string} />)}
 					</>
 				)}
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetailsEntry.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetailsEntry.tsx
index ad954634f9329..6c1c3feddaf58 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetailsEntry.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetailsEntry.tsx
@@ -10,9 +10,9 @@ export type ContactInfoDetailsEntryProps = Pick<ComponentProps<typeof Box>, 'is'
 
 const ContactInfoDetailsEntry = ({ icon, value, actions, ...props }: ContactInfoDetailsEntryProps) => (
 	<Box display='flex' alignItems='center' {...props}>
-		<Icon size='x18' mie={4} name={icon} />
+		<Icon size='x18' marginInlineEnd={4} name={icon} />
 		<Box withTruncatedText display='flex' flexGrow={1} alignItems='center' justifyContent='space-between'>
-			<Box is='p' fontScale='p2' withTruncatedText mi={4}>
+			<Box is='p' fontScale='p2' withTruncatedText marginInline={4}>
 				{value}
 			</Box>
 			<Box display='flex' alignItems='center'>
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactManagerInfo.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactManagerInfo.tsx
index ca7459df39f6e..a4cfd1dd689a4 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactManagerInfo.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactManagerInfo.tsx
@@ -23,12 +23,12 @@ const ContactManagerInfo = ({ userId }: ContactManagerInfoProps) => {
 
 	return (
 		<Box>
-			<Box mbe={4}>{t('Contact_Manager')}</Box>
+			<Box marginBlockEnd={4}>{t('Contact_Manager')}</Box>
 			{isLoading && <Skeleton />}
 			{isSuccess && (
 				<Box display='flex' alignItems='center'>
 					{data.user.username && <UserAvatar size='x18' username={data.user.username} />}
-					<Box mi={8}>
+					<Box marginInline={8}>
 						<UserStatus status={data.user.status} />
 					</Box>
 					<Box fontScale='p2'>{data.user.name}</Box>
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx
index a16706929e726..d631dc1d7c1ce 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx
@@ -72,13 +72,13 @@ const ContactInfoHistory = ({ contact, setChatId }: ContactInfoHistoryProps) =>
 			<Box
 				display='flex'
 				flexDirection='row'
-				p={24}
+				padding={24}
 				borderBlockEndWidth='default'
 				borderBlockEndStyle='solid'
 				borderBlockEndColor='extra-light'
 				flexShrink={0}
 			>
-				<Box display='flex' flexDirection='row' flexGrow={1} mi='neg-x4'>
+				<Box display='flex' flexDirection='row' flexGrow={1} marginInline='neg-x4'>
 					<Margins inline={4}>
 						<Select
 							value={type}
@@ -91,7 +91,7 @@ const ContactInfoHistory = ({ contact, setChatId }: ContactInfoHistoryProps) =>
 				</Box>
 			</Box>
 			{isLoading && (
-				<Box pi={24} pb={12}>
+				<Box paddingInline={24} paddingBlock={12}>
 					<Throbber size='x12' />
 				</Box>
 			)}
@@ -106,7 +106,7 @@ const ContactInfoHistory = ({ contact, setChatId }: ContactInfoHistoryProps) =>
 			)}
 			{!isError && data?.history && data.history.length > 0 && (
 				<>
-					<Box pi={24} pb={12}>
+					<Box paddingInline={24} paddingBlock={12}>
 						<Box is='span' color='hint' fontScale='p2'>
 							{t('Showing_current_of_total', { current: data?.history.length, total: data?.total })}
 						</Box>
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryItem.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryItem.tsx
index ffba86a73aa73..369292c51ac3f 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryItem.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryItem.tsx
@@ -53,8 +53,8 @@ const ContactInfoHistoryItem = ({ source, lastMessage, verified, onClick }: Cont
 			borderBlockEndColor='stroke-extra-light'
 			borderBlockEndStyle='solid'
 			className={['rcx-box--animated', customClass]}
-			pi={24}
-			pb={12}
+			paddingInline={24}
+			paddingBlock={12}
 			display='flex'
 			flexDirection='column'
 			onClick={onClick}
@@ -63,19 +63,19 @@ const ContactInfoHistoryItem = ({ source, lastMessage, verified, onClick }: Cont
 				<Box display='flex' alignItems='center'>
 					{source && <OmnichannelRoomIcon source={source} size='x18' placement='default' />}
 					{source && (
-						<Box mi={4} fontScale='p2b'>
+						<Box marginInline={4} fontScale='p2b'>
 							{getSourceName(source)}
 						</Box>
 					)}
 					{lastMessage && (
-						<Box mis={4} fontScale='c1'>
+						<Box marginInlineStart={4} fontScale='c1'>
 							{getTimeFromNow(lastMessage.ts)}
 						</Box>
 					)}
 				</Box>
-				<Box mis={4} is='span' onClick={preventPropagation}>
+				<Box marginInlineStart={4} is='span' onClick={preventPropagation}>
 					{hasLicense && verified ? (
-						<Icon title={t('Verified')} mis={4} size='x16' name='success-circle' color='stroke-highlight' />
+						<Icon title={t('Verified')} marginInlineStart={4} size='x16' name='success-circle' color='stroke-highlight' />
 					) : (
 						<IconButton
 							title={t('Unverified')}
@@ -87,7 +87,7 @@ const ContactInfoHistoryItem = ({ source, lastMessage, verified, onClick }: Cont
 				</Box>
 			</Box>
 			{lastMessage?.msg.trim() && (
-				<Box width='full' mbs={8}>
+				<Box width='full' marginBlockStart={8}>
 					<MessageGenericPreview>
 						<MessageGenericPreviewContent>
 							<MessageGenericPreviewTitle>{t('Closing_chat_message')}:</MessageGenericPreviewTitle>
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryMessages.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryMessages.tsx
index 2b9bcd9d84fd3..e94002505da59 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryMessages.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryMessages.tsx
@@ -62,13 +62,13 @@ const ContactInfoHistoryMessages = ({ chatId, onBack, onOpenRoom }: ContactHisto
 				<Box
 					display='flex'
 					flexDirection='row'
-					p={24}
+					padding={24}
 					borderBlockEndWidth='default'
 					borderBlockEndStyle='solid'
 					borderBlockEndColor='extra-light'
 					flexShrink={0}
 				>
-					<Box display='flex' alignItems='center' flexDirection='row' flexGrow={1} mi='neg-x4'>
+					<Box display='flex' alignItems='center' flexDirection='row' flexGrow={1} marginInline='neg-x4'>
 						<Margins inline={4}>
 							<TextInput
 								placeholder={t('Search')}
@@ -81,7 +81,7 @@ const ContactInfoHistoryMessages = ({ chatId, onBack, onOpenRoom }: ContactHisto
 					</Box>
 				</Box>
 				{isPending && (
-					<Box pi={24} pb={12}>
+					<Box paddingInline={24} paddingBlock={12}>
 						<Throbber size='x12' />
 					</Box>
 				)}
diff --git a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsForm.stories.tsx b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsForm.stories.tsx
index 20ebc46771e13..81fda03e13daa 100644
--- a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsForm.stories.tsx
+++ b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsForm.stories.tsx
@@ -7,7 +7,7 @@ export default {
 	component: EditCustomFields,
 	decorators: [
 		(fn) => (
-			<Box maxWidth='x600' alignSelf='center' w='full' m={24}>
+			<Box maxWidth='x600' alignSelf='center' width='full' margin={24}>
 				{fn()}
 			</Box>
 		),
diff --git a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx
index e041566a0ad07..e3c29edb3c9a6 100644
--- a/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx
@@ -72,7 +72,7 @@ const CustomFieldsTable = () => {
 			>
 				{t('Visibility')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='remove' w='x60' />
+			<GenericTableHeaderCell key='remove' width='x60' />
 		</>
 	);
 
diff --git a/apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx b/apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx
index dfc7a269cc1ac..596dcf2d6276c 100644
--- a/apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx
+++ b/apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx
@@ -231,7 +231,7 @@ const EditCustomFields = ({ customFieldData, onClose }: { customFieldData?: Seri
 					</Button>
 				</ButtonGroup>
 				{customFieldData?._id && (
-					<Box mbs={8}>
+					<Box marginBlockStart={8}>
 						<ButtonGroup stretch>
 							<Button icon='trash' danger onClick={() => handleDelete(customFieldData._id)}>
 								{t('Delete')}
diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx
index e7cfc8b903e8b..950c763c588dc 100644
--- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AddAgent.tsx
@@ -45,7 +45,7 @@ function AddAgent({ agentList, onAdd, 'aria-labelledby': ariaLabelledBy }: AddAg
 	return (
 		<Box role='group' aria-labelledby={ariaLabelledBy} display='flex' alignItems='center'>
 			<AutoCompleteAgent value={userId} onChange={handleAgent} />
-			<Button disabled={!userId} onClick={handleSave} mis={8} primary>
+			<Button disabled={!userId} onClick={handleSave} marginInlineStart={8} primary>
 				{t('Add')}
 			</Button>
 		</Box>
diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentAvatar.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentAvatar.tsx
index 1559a879a6710..55d8064c532a3 100644
--- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentAvatar.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/AgentAvatar.tsx
@@ -11,7 +11,7 @@ const AgentAvatar = ({ name, username, eTag }: AgentAvatarProps) => {
 	return (
 		<Box display='flex' alignItems='center'>
 			<UserAvatar size={mediaQuery ? 'x28' : 'x40'} title={username} username={username} etag={eTag} />
-			<Box display='flex' withTruncatedText mi={8}>
+			<Box display='flex' withTruncatedText marginInline={8}>
 				<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
 					<Box fontScale='p2m' withTruncatedText color='default'>
 						{name || username}
diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx
index d5290d3874217..9f42670abc30a 100644
--- a/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/DepartmentAgentsTable/DepartmentAgentsTable.tsx
@@ -28,10 +28,10 @@ function DepartmentAgentsTable({ control, register, 'aria-labelledby': ariaLabel
 			<AddAgent aria-labelledby={ariaLabelledBy} agentList={agentList} onAdd={append} />
 			<GenericTable aria-label={t('Agents')}>
 				<GenericTableHeader>
-					<GenericTableHeaderCell w='x200'>{t('Name')}</GenericTableHeaderCell>
-					<GenericTableHeaderCell w='x140'>{t('Count')}</GenericTableHeaderCell>
-					<GenericTableHeaderCell w='x120'>{t('Order')}</GenericTableHeaderCell>
-					<GenericTableHeaderCell w='x40'>{t('Remove')}</GenericTableHeaderCell>
+					<GenericTableHeaderCell width='x200'>{t('Name')}</GenericTableHeaderCell>
+					<GenericTableHeaderCell width='x140'>{t('Count')}</GenericTableHeaderCell>
+					<GenericTableHeaderCell width='x120'>{t('Order')}</GenericTableHeaderCell>
+					<GenericTableHeaderCell width='x40'>{t('Remove')}</GenericTableHeaderCell>
 				</GenericTableHeader>
 				<GenericTableBody>
 					{page.map((agent, index) => (
diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx
index 2cfd2b73019aa..3045ffb40206d 100644
--- a/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx
@@ -36,14 +36,14 @@ const DepartmentTags = ({ error, value: tags, onChange, ...props }: DepartmentTa
 					onChange={(e: ChangeEvent<HTMLInputElement>) => setTagText(e.currentTarget.value)}
 					{...props}
 				/>
-				<Button disabled={Boolean(!tagText.trim()) || tags.includes(tagText)} mis={8} title={t('Add')} onClick={handleAddTag}>
+				<Button disabled={Boolean(!tagText.trim()) || tags.includes(tagText)} marginInlineStart={8} title={t('Add')} onClick={handleAddTag}>
 					{t('Add')}
 				</Button>
 			</FieldRow>
 			{tags?.length > 0 && (
 				<FieldRow justifyContent='flex-start'>
 					{tags.map((tag, i) => (
-						<Chip key={i} onClick={handleTagChipClick(tag)} mie={8}>
+						<Chip key={i} onClick={handleTagChipClick(tag)} marginInlineEnd={8}>
 							{tag}
 						</Chip>
 					))}
diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx
index a9798c5b17f89..9d43c198189d1 100644
--- a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/DepartmentsTable.tsx
@@ -92,7 +92,7 @@ const DepartmentsTable = ({ archived }: DepartmentsTableProps) => {
 			>
 				{t('Show_on_registration_page')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='spacer' w={40} />
+			<GenericTableHeaderCell key='spacer' width={40} />
 		</>
 	);
 
diff --git a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/RemoveDepartmentModal.tsx b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/RemoveDepartmentModal.tsx
index a248b5b82cc13..3b9a77a7d532b 100644
--- a/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/RemoveDepartmentModal.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/DepartmentsTable/RemoveDepartmentModal.tsx
@@ -43,8 +43,8 @@ const RemoveDepartmentModal = ({ _id = '', name, reset, onClose }: RemoveDepartm
 			variant='danger'
 			confirmDisabled={text !== name}
 		>
-			<Box mbe={16}>{t('Are_you_sure_delete_department')}</Box>
-			<Box mbe={16} display='flex' justifyContent='stretch'>
+			<Box marginBlockEnd={16}>{t('Are_you_sure_delete_department')}</Box>
+			<Box marginBlockEnd={16} display='flex' justifyContent='stretch'>
 				<Input
 					value={text}
 					aria-label={t('Department_name')}
diff --git a/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx b/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx
index 1a92e32a79d8d..761e9f681a052 100644
--- a/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx
@@ -149,7 +149,7 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 				</PageHeader>
 				<PageScrollableContentWithShadow>
 					<FieldGroup
-						w='full'
+						width='full'
 						alignSelf='center'
 						maxWidth='x600'
 						id={formId}
@@ -299,7 +299,7 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 								<Field>
 									<FieldLabel htmlFor={departmentsAllowedToForwardFieldId}>{t('List_of_departments_for_forward')}</FieldLabel>
 									<FieldRow>
-										<Box w='100%'>
+										<Box width='100%'>
 											<Controller
 												control={control}
 												name='departmentsAllowedToForward'
@@ -311,7 +311,7 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 														excludeId={id ?? ''}
 														value={value}
 														maxWidth='100%'
-														w='100%'
+														width='100%'
 														flexGrow={1}
 														onChange={onChange}
 													/>
@@ -417,9 +417,9 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 						<Field>
 							<DepartmentBusinessHours bhId={department?.businessHourId} />
 						</Field>
-						<Divider mb={16} />
+						<Divider marginBlock={16} />
 						<Field>
-							<FieldLabel id={agentsLabelId} mb={4}>
+							<FieldLabel id={agentsLabelId} marginBlock={4}>
 								{t('Agents')}
 							</FieldLabel>
 							<Box display='flex' flexDirection='column' height='50vh'>
diff --git a/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithAllowedForwardData.tsx b/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithAllowedForwardData.tsx
index b9a0da934237e..e6025743931e1 100644
--- a/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithAllowedForwardData.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithAllowedForwardData.tsx
@@ -29,7 +29,7 @@ const EditDepartmentWithAllowedForwardData = ({ data, ...props }: Omit<EditDepar
 	}
 
 	if (isError) {
-		return <Box mbs={16}>{t('Not_Available')}</Box>;
+		return <Box marginBlockStart={16}>{t('Not_Available')}</Box>;
 	}
 
 	return <EditDepartment data={data} allowedToForwardData={allowedToForwardData} {...props} />;
diff --git a/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithData.tsx b/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithData.tsx
index 1d68ee821375a..71d26f63cff96 100644
--- a/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithData.tsx
+++ b/apps/meteor/client/views/omnichannel/departments/EditDepartmentWithData.tsx
@@ -28,11 +28,11 @@ const EditDepartmentWithData = ({ id, title }: EditDepartmentWithDataProps) => {
 	}
 
 	if (isError || (id && !data?.department)) {
-		return <Box mbs={16}>{t('Department_not_found')}</Box>;
+		return <Box marginBlockStart={16}>{t('Department_not_found')}</Box>;
 	}
 
 	if (data?.department?.archived === true) {
-		return <Box mbs={16}>{t('Department_archived')}</Box>;
+		return <Box marginBlockStart={16}>{t('Department_archived')}</Box>;
 	}
 
 	return (
diff --git a/apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx b/apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx
index 519878961938d..11f8b17b16c61 100644
--- a/apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/OmnichannelDirectoryPage.tsx
@@ -44,7 +44,7 @@ const OmnichannelDirectoryPage = () => {
 					</Tabs>
 					<PageContent>
 						{isWorkspaceOverMacLimit && (
-							<Box mbs={16}>
+							<Box marginBlockStart={16}>
 								<Callout type='danger' icon='warning' title={t('The_workspace_has_exceeded_the_monthly_limit_of_active_contacts')}>
 									{t('Talk_to_your_workspace_admin_to_address_this_issue')}
 								</Callout>
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/ChatInfo.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/ChatInfo.tsx
index 70cf42ec1eba2..204e7a5833f37 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/ChatInfo.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/ChatInfo.tsx
@@ -90,7 +90,7 @@ function ChatInfo({ id, route }: ChatInfoProps) {
 
 	return (
 		<>
-			<ContextualbarScrollableContent p={24}>
+			<ContextualbarScrollableContent padding={24}>
 				<Margins block='x4'>
 					{source && <SourceField room={room as unknown as IOmnichannelRoom} />}
 					{room && v && <ContactField contact={v as IVisitor} room={room as unknown as IOmnichannelRoom} />}
@@ -103,7 +103,7 @@ function ChatInfo({ id, route }: ChatInfoProps) {
 							<InfoPanelText>
 								<ul aria-labelledby={`${roomId}-tags`}>
 									{tags.map((tag) => (
-										<Box is='li' key={tag} mie={4} display='inline'>
+										<Box is='li' key={tag} marginInlineEnd={4} display='inline'>
 											<Tag style={{ display: 'inline' }} disabled>
 												{tag}
 											</Tag>
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEdit.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEdit.tsx
index a419ab154b321..3c343d2dd8800 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEdit.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEdit.tsx
@@ -160,7 +160,7 @@ function RoomEdit({ room, visitor, reload, reloadInfo, onClose }: RoomEditProps)
 					</Button>
 
 					<Button
-						mie='none'
+						marginInlineEnd='none'
 						flexGrow={1}
 						onClick={handleSubmit(handleSave)}
 						loading={isSubmitting}
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEditWithData.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEditWithData.tsx
index a7bfadbd3b7e0..7743239f34912 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEditWithData.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/RoomEdit/RoomEditWithData.tsx
@@ -26,11 +26,11 @@ function RoomEditWithData({ id: roomId, reload, reloadInfo, onClose }: RoomEditW
 	}
 
 	if (isRoomError || !room) {
-		return <Box mbs={16}>{t('Room_not_found')}</Box>;
+		return <Box marginBlockStart={16}>{t('Room_not_found')}</Box>;
 	}
 
 	if (isVisitorError || !visitor) {
-		return <Box mbs={16}>{t('Visitor_not_found')}</Box>;
+		return <Box marginBlockStart={16}>{t('Visitor_not_found')}</Box>;
 	}
 
 	return <RoomEdit room={room} visitor={visitor} reload={reload} reloadInfo={reloadInfo} onClose={onClose} />;
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTable.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTable.tsx
index 7bcc9655f06b5..955ce7a6fe005 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTable.tsx
@@ -56,14 +56,14 @@ const ChatsTable = () => {
 			)}
 			<GenericTableHeaderCell key='source.type'>{t('Channel')}</GenericTableHeaderCell>
 			<GenericTableHeaderCell key='servedBy'>{t('Agent')}</GenericTableHeaderCell>
-			<GenericTableHeaderCell w='x100'>{t('Verification')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell width='x100'>{t('Verification')}</GenericTableHeaderCell>
 			<GenericTableHeaderCell key='department.name'>{t('Department')}</GenericTableHeaderCell>
 			<GenericTableHeaderCell key='ts' direction={sortDirection} active={sortBy === 'ts'} onClick={setSort} sort='ts'>
 				{t('Started_At')}
 			</GenericTableHeaderCell>
 			<GenericTableHeaderCell key='lm'>{t('Last_Message')}</GenericTableHeaderCell>
 			<GenericTableHeaderCell key='status'>{t('Status')}</GenericTableHeaderCell>
-			{canRemoveClosedChats && <GenericTableHeaderCell key='remove' w='x60' />}
+			{canRemoveClosedChats && <GenericTableHeaderCell key='remove' width='x60' />}
 		</>
 	);
 
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableFilter.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableFilter.tsx
index 696c91112d39b..19f990ce927c0 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableFilter.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableFilter.tsx
@@ -73,14 +73,14 @@ const ChatsTableFilter = () => {
 				</Button>
 				{menuItems.length > 0 && <GenericMenu placement='bottom-end' detached title={t('More')} sections={menuItems} />}
 			</FilterByText>
-			<Box display='flex' flexWrap='wrap' mbe={4}>
+			<Box display='flex' flexWrap='wrap' marginBlockEnd={4}>
 				{Object.entries(displayFilters).map(([value, label], index) => {
 					if (!label) {
 						return null;
 					}
 
 					return (
-						<Chip mie={8} mbe={8} key={index} onClick={() => removeFilter(value)}>
+						<Chip marginInlineEnd={8} marginBlockEnd={8} key={index} onClick={() => removeFilter(value)}>
 							{label}
 						</Chip>
 					);
diff --git a/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableRow.tsx b/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableRow.tsx
index 60138a3d5f182..76ca3402e5b1a 100644
--- a/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableRow.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/chats/ChatsTable/ChatsTableRow.tsx
@@ -55,7 +55,7 @@ const ChatsTableRow = (room: IOmnichannelRoomWithDepartment) => {
 					{tags && (
 						<Box color='hint' display='flex' flex-direction='row'>
 							{tags.map((tag: string) => (
-								<Box mbs={4} mie={4} withTruncatedText overflow={tag.length > 10 ? 'hidden' : 'visible'} key={tag}>
+								<Box marginBlockStart={4} marginInlineEnd={4} withTruncatedText overflow={tag.length > 10 ? 'hidden' : 'visible'} key={tag}>
 									<Tag style={{ display: 'inline' }} disabled>
 										{tag}
 									</Tag>
@@ -73,7 +73,7 @@ const ChatsTableRow = (room: IOmnichannelRoomWithDepartment) => {
 			<GenericTableCell withTruncatedText>
 				<Box display='flex' alignItems='center'>
 					<OmnichannelRoomIcon size='x20' source={source} />
-					<Box mis={8}>{getSourceLabel(source)}</Box>
+					<Box marginInlineStart={8}>{getSourceLabel(source)}</Box>
 				</Box>
 			</GenericTableCell>
 			<GenericTableCell withTruncatedText>{servedBy?.username}</GenericTableCell>
diff --git a/apps/meteor/client/views/omnichannel/directory/components/AgentField.tsx b/apps/meteor/client/views/omnichannel/directory/components/AgentField.tsx
index 026aac60178ea..b56fb40cc60e1 100644
--- a/apps/meteor/client/views/omnichannel/directory/components/AgentField.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/components/AgentField.tsx
@@ -40,7 +40,12 @@ const AgentField = ({ agent, isSmall = false }: AgentFieldProps) => {
 			<Label>{t('Agent')}</Label>
 			<Info style={{ display: 'flex' }}>
 				<UserAvatar size={isSmall ? 'x28' : 'x40'} title={username} username={username || ''} />
-				<AgentInfoDetails mis={isSmall ? 'x8' : 'x10'} name={displayName} shortName={username} status={<UserStatus status={status} />} />
+				<AgentInfoDetails
+					marginInlineStart={isSmall ? 'x8' : 'x10'}
+					name={displayName}
+					shortName={username}
+					status={<UserStatus status={status} />}
+				/>
 			</Info>
 		</Field>
 	);
diff --git a/apps/meteor/client/views/omnichannel/directory/components/ContactField.tsx b/apps/meteor/client/views/omnichannel/directory/components/ContactField.tsx
index e59947bdd9652..dd5d61dd93dc2 100644
--- a/apps/meteor/client/views/omnichannel/directory/components/ContactField.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/components/ContactField.tsx
@@ -34,7 +34,7 @@ const ContactField = ({ contact, room }: ContactFieldProps) => {
 	}
 
 	if (isError || !data?.visitor) {
-		return <Box mbs={16}>{t('Contact_not_found')}</Box>;
+		return <Box marginBlockStart={16}>{t('Contact_not_found')}</Box>;
 	}
 
 	const {
@@ -50,7 +50,7 @@ const ContactField = ({ contact, room }: ContactFieldProps) => {
 			<Label>{t('Contact')}</Label>
 			<Info style={{ display: 'flex' }}>
 				<Avatar size='x40' title={fname} url={avatarUrl} />
-				<AgentInfoDetails mis={10} name={displayName} shortName={contactIdentifier} status={<UserStatus status={status} />} />
+				<AgentInfoDetails marginInlineStart={10} name={displayName} shortName={contactIdentifier} status={<UserStatus status={status} />} />
 			</Info>
 		</Field>
 	);
diff --git a/apps/meteor/client/views/omnichannel/directory/components/FormSkeleton.tsx b/apps/meteor/client/views/omnichannel/directory/components/FormSkeleton.tsx
index 966506feeda3f..7029dd30a39da 100644
--- a/apps/meteor/client/views/omnichannel/directory/components/FormSkeleton.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/components/FormSkeleton.tsx
@@ -4,12 +4,12 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type FormSkeletonProps = ComponentPropsWithoutRef<typeof Box>;
 
 export const FormSkeleton = (props: FormSkeletonProps) => (
-	<Box w='full' pb={24} {...props}>
-		<Skeleton mbe={8} />
-		<Skeleton mbe={4} />
-		<Skeleton mbe={4} />
-		<Skeleton mbe={8} />
-		<Skeleton mbe={4} />
-		<Skeleton mbe={8} />
+	<Box width='full' paddingBlock={24} {...props}>
+		<Skeleton marginBlockEnd={8} />
+		<Skeleton marginBlockEnd={4} />
+		<Skeleton marginBlockEnd={4} />
+		<Skeleton marginBlockEnd={8} />
+		<Skeleton marginBlockEnd={4} />
+		<Skeleton marginBlockEnd={8} />
 	</Box>
 );
diff --git a/apps/meteor/client/views/omnichannel/directory/components/PriorityField.tsx b/apps/meteor/client/views/omnichannel/directory/components/PriorityField.tsx
index 199d8f1b12b9a..bd188f7fdee49 100644
--- a/apps/meteor/client/views/omnichannel/directory/components/PriorityField.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/components/PriorityField.tsx
@@ -20,7 +20,7 @@ const PriorityField = ({ id }: PriorityFieldProps) => {
 	}
 
 	if (isError || !data) {
-		return <Box mbs={16}>{t('Custom_Field_Not_Found')}</Box>;
+		return <Box marginBlockStart={16}>{t('Custom_Field_Not_Found')}</Box>;
 	}
 
 	const { dirty, name, i18n } = data;
diff --git a/apps/meteor/client/views/omnichannel/directory/components/SlaField.tsx b/apps/meteor/client/views/omnichannel/directory/components/SlaField.tsx
index 7261f0511cc98..4d552a8ca45d6 100644
--- a/apps/meteor/client/views/omnichannel/directory/components/SlaField.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/components/SlaField.tsx
@@ -22,7 +22,7 @@ const SlaField = ({ id }: SlaFieldProps) => {
 	}
 
 	if (isError || !data) {
-		return <Box mbs={16}>{t('Custom_Field_Not_Found')}</Box>;
+		return <Box marginBlockStart={16}>{t('Custom_Field_Not_Found')}</Box>;
 	}
 
 	const { name } = data;
diff --git a/apps/meteor/client/views/omnichannel/directory/components/SourceField.tsx b/apps/meteor/client/views/omnichannel/directory/components/SourceField.tsx
index 9e96f104ff741..9992655c1d859 100644
--- a/apps/meteor/client/views/omnichannel/directory/components/SourceField.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/components/SourceField.tsx
@@ -38,7 +38,7 @@ const SourceField = ({ room }: SourceFieldProps) => {
 			<Info>
 				<Box display='flex' alignItems='center'>
 					<OmnichannelRoomIcon source={room.source} status={room.v.status} size='x24' />
-					<Label mi={8} mbe='0'>
+					<Label marginInline={8} marginBlockEnd='0'>
 						{getSourceName(room.source)}
 					</Label>
 					{defaultTypesVisitorData[room.source.type]}
diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
index c68a76a4f3aed..e4b02ccced46c 100644
--- a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx
@@ -86,7 +86,7 @@ function ContactTable() {
 			>
 				{t('Last_Chat')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='spacer' w={40} />
+			<GenericTableHeaderCell key='spacer' width={40} />
 		</>
 	);
 
@@ -137,7 +137,7 @@ function ContactTable() {
 				</>
 			)}
 			{isError && (
-				<Box mbs={20}>
+				<Box marginBlockStart={20}>
 					<States>
 						<StatesIcon variation='danger' name='circle-exclamation' />
 						<StatesTitle>{t('Connection_error')}</StatesTitle>
diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx
index 6c66780f25abe..ee36c07d67b4d 100644
--- a/apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx
@@ -37,7 +37,7 @@ const ContactTableRow = ({ _id, name, contactManager, lastChat, channels }: ILiv
 				{latestChannel?.details && (
 					<Box withTruncatedText display='flex' alignItems='center'>
 						<OmnichannelRoomIcon size='x20' source={latestChannel?.details} />
-						<Box withTruncatedText mis={8}>
+						<Box withTruncatedText marginInlineStart={8}>
 							{getSourceLabel(latestChannel?.details)}
 						</Box>
 					</Box>
diff --git a/apps/meteor/client/views/omnichannel/directory/contacts/RemoveContactModal.tsx b/apps/meteor/client/views/omnichannel/directory/contacts/RemoveContactModal.tsx
index d4d6257bd77b1..7ad39657c2fe1 100644
--- a/apps/meteor/client/views/omnichannel/directory/contacts/RemoveContactModal.tsx
+++ b/apps/meteor/client/views/omnichannel/directory/contacts/RemoveContactModal.tsx
@@ -60,10 +60,10 @@ const RemoveContactModal = ({ _id, name, channelsCount, onClose }: RemoveContact
 			variant='danger'
 			confirmDisabled={text !== confirmationText}
 		>
-			<Box is='p' id={`${contactDeleteModalId}-description`} mbe={16}>
+			<Box is='p' id={`${contactDeleteModalId}-description`} marginBlockEnd={16}>
 				{t('Are_you_sure_delete_contact', { contactName: name, channelsCount, confirmationText })}
 			</Box>
-			<Box mbe={16} display='flex' justifyContent='stretch'>
+			<Box marginBlockEnd={16} display='flex' justifyContent='stretch'>
 				<Input
 					value={text}
 					name='confirmContactRemoval'
diff --git a/apps/meteor/client/views/omnichannel/managers/AddManager.tsx b/apps/meteor/client/views/omnichannel/managers/AddManager.tsx
index 92f4dfd210fcd..9342b080a04e9 100644
--- a/apps/meteor/client/views/omnichannel/managers/AddManager.tsx
+++ b/apps/meteor/client/views/omnichannel/managers/AddManager.tsx
@@ -42,7 +42,7 @@ const AddManager = () => {
 				<FieldLabel htmlFor={usernameFieldId}>{t('Username')}</FieldLabel>
 				<FieldRow>
 					<UserAutoComplete id={usernameFieldId} value={username} onChange={handleChange} />
-					<Button disabled={!username} onClick={handleSave} mis={8} primary>
+					<Button disabled={!username} onClick={handleSave} marginInlineStart={8} primary>
 						{t('Add_manager')}
 					</Button>
 				</FieldRow>
diff --git a/apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx b/apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx
index 2bb705a694053..18b397e1e75a7 100644
--- a/apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx
+++ b/apps/meteor/client/views/omnichannel/managers/ManagersTable.tsx
@@ -72,7 +72,7 @@ const ManagersTable = () => {
 			>
 				{t('Email')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='remove' w='x60'>
+			<GenericTableHeaderCell key='remove' width='x60'>
 				{t('Remove')}
 			</GenericTableHeaderCell>
 		</>
@@ -111,7 +111,7 @@ const ManagersTable = () => {
 									<GenericTableCell withTruncatedText>
 										<Box display='flex' alignItems='center'>
 											<UserAvatar size='x28' username={user.username || ''} etag={user.avatarETag} />
-											<Box display='flex' withTruncatedText mi={8}>
+											<Box display='flex' withTruncatedText marginInline={8}>
 												<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
 													<Box fontScale='p2m' withTruncatedText color='default'>
 														{user.name || user.username}
@@ -124,7 +124,7 @@ const ManagersTable = () => {
 										<Box fontScale='p2m' withTruncatedText color='hint'>
 											{user.username}
 										</Box>
-										<Box mi={4} />
+										<Box marginInline={4} />
 									</GenericTableCell>
 									<GenericTableCell withTruncatedText>{user.emails?.length && user.emails[0].address}</GenericTableCell>
 									<RemoveManagerButton _id={user._id} />
diff --git a/apps/meteor/client/views/omnichannel/modals/EnterpriseDepartmentsModal.tsx b/apps/meteor/client/views/omnichannel/modals/EnterpriseDepartmentsModal.tsx
index 401ecfebba02e..1331f9ff3e12b 100644
--- a/apps/meteor/client/views/omnichannel/modals/EnterpriseDepartmentsModal.tsx
+++ b/apps/meteor/client/views/omnichannel/modals/EnterpriseDepartmentsModal.tsx
@@ -53,7 +53,7 @@ const EnterpriseDepartmentsModal = ({ closeModal }: { closeModal: () => void })
 			</ModalHeader>
 			<ModalContent fontScale='p2'>
 				<ModalHeroImage src='/images/departments.svg' />
-				<Box fontScale='h3' mbe={28}>
+				<Box fontScale='h3' marginBlockEnd={28}>
 					{t('Premium_Departments_title')}
 				</Box>
 				{t('Premium_Departments_description_upgrade')}
diff --git a/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx b/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
index b0278c79b2219..71bbfa6bcb634 100644
--- a/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
+++ b/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
@@ -128,7 +128,7 @@ const ForwardChatModal = ({ room, onCancel }: ForwardChatModalProps) => {
 						/>
 					</FieldRow>
 				</Field>
-				<Divider p={0}>{t('or')}</Divider>
+				<Divider padding={0}>{t('or')}</Divider>
 				<Field>
 					<FieldLabel htmlFor={userFieldId}>{t('Forward_to_user')}</FieldLabel>
 					<FieldRow>
@@ -154,7 +154,7 @@ const ForwardChatModal = ({ room, onCancel }: ForwardChatModalProps) => {
 				<Field marginBlock={15}>
 					<FieldLabel htmlFor={commentFieldId}>
 						{t('Leave_a_comment')}
-						<Box mis={4} is='span' color='annotation'>
+						<Box marginInlineStart={4} is='span' color='annotation'>
 							({t('Optional')})
 						</Box>
 					</FieldLabel>
diff --git a/apps/meteor/client/views/omnichannel/monitors/MonitorsTable.tsx b/apps/meteor/client/views/omnichannel/monitors/MonitorsTable.tsx
index d790c15b22c43..2439d2e68a880 100644
--- a/apps/meteor/client/views/omnichannel/monitors/MonitorsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/monitors/MonitorsTable.tsx
@@ -123,7 +123,7 @@ const MonitorsTable = () => {
 			<GenericTableHeaderCell key='email' direction={sortDirection} active={sortBy === 'email'} onClick={setSort}>
 				{t('Email')}
 			</GenericTableHeaderCell>,
-			<GenericTableHeaderCell key='spacer' w={40} />,
+			<GenericTableHeaderCell key='spacer' width={40} />,
 		],
 		[setSort, sortBy, sortDirection, t],
 	);
@@ -135,7 +135,7 @@ const MonitorsTable = () => {
 					<FieldLabel htmlFor={usernameFieldId}>{t('Username')}</FieldLabel>
 					<FieldRow>
 						<UserAutoComplete id={usernameFieldId} name='monitor' value={username} onChange={setUsername as () => void} />
-						<Button primary disabled={!username} loading={addMutation.isPending} onClick={() => handleAdd()} mis={8}>
+						<Button primary disabled={!username} loading={addMutation.isPending} onClick={() => handleAdd()} marginInlineStart={8}>
 							{t('Add_monitor')}
 						</Button>
 					</FieldRow>
diff --git a/apps/meteor/client/views/omnichannel/priorities/PrioritiesTable.tsx b/apps/meteor/client/views/omnichannel/priorities/PrioritiesTable.tsx
index 6278f20cea958..690ca670fce26 100644
--- a/apps/meteor/client/views/omnichannel/priorities/PrioritiesTable.tsx
+++ b/apps/meteor/client/views/omnichannel/priorities/PrioritiesTable.tsx
@@ -22,7 +22,7 @@ export const PrioritiesTable = ({ priorities, onRowClick, isLoading }: Prioritie
 
 	const headers = (
 		<>
-			<GenericTableHeaderCell key='icon' w='100px'>
+			<GenericTableHeaderCell key='icon' width='100px'>
 				{t('Icon')}
 			</GenericTableHeaderCell>
 			<GenericTableHeaderCell key='name'>{t('Name')}</GenericTableHeaderCell>
diff --git a/apps/meteor/client/views/omnichannel/priorities/PriorityEditFormWithData.tsx b/apps/meteor/client/views/omnichannel/priorities/PriorityEditFormWithData.tsx
index 048efe549f61d..d451937ed3b26 100644
--- a/apps/meteor/client/views/omnichannel/priorities/PriorityEditFormWithData.tsx
+++ b/apps/meteor/client/views/omnichannel/priorities/PriorityEditFormWithData.tsx
@@ -20,7 +20,7 @@ function PriorityEditFormWithData({ priorityId, ...props }: PriorityEditFormWith
 
 	if (isError || !data) {
 		return (
-			<Callout m={16} type='danger'>
+			<Callout margin={16} type='danger'>
 				{t('Not_Available')}
 			</Callout>
 		);
diff --git a/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx b/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx
index 068f264ae253a..e0ed5e8c9e5ab 100644
--- a/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx
+++ b/apps/meteor/client/views/omnichannel/queueList/QueueListFilter.tsx
@@ -47,18 +47,18 @@ export const QueueListFilter = ({ setFilter, ...props }: QueueListFilterProps) =
 	}, [setFilter, servedBy, status, department]);
 
 	return (
-		<Box mb={16} is='form' onSubmit={onSubmit} display='flex' flexDirection='column' {...props}>
+		<Box marginBlock={16} is='form' onSubmit={onSubmit} display='flex' flexDirection='column' {...props}>
 			<Box display='flex' flexDirection='row' flexWrap='wrap' {...props}>
-				<Box display='flex' mie={8} flexGrow={1} flexDirection='column'>
-					<Label mb={4}>{t('Served_By')}</Label>
+				<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+					<Label marginBlock={4}>{t('Served_By')}</Label>
 					<AutoCompleteAgent haveAll value={servedBy} onChange={handleServedBy} />
 				</Box>
-				<Box display='flex' mie={8} flexGrow={1} flexDirection='column'>
-					<Label mb={4}>{t('Status')}</Label>
+				<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+					<Label marginBlock={4}>{t('Status')}</Label>
 					<Select options={statusOptions} value={status} onChange={handleStatus} placeholder={t('Status')} />
 				</Box>
-				<Box display='flex' mie={8} flexGrow={1} flexDirection='column'>
-					<Label mb={4}>{t('Department')}</Label>
+				<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+					<Label marginBlock={4}>{t('Department')}</Label>
 					<AutoCompleteDepartment haveAll value={department} onChange={handleDepartment} onlyMyDepartments />
 				</Box>
 			</Box>
diff --git a/apps/meteor/client/views/omnichannel/queueList/QueueListTable.tsx b/apps/meteor/client/views/omnichannel/queueList/QueueListTable.tsx
index 3e258fe6df0ff..cfdb32ee2e211 100644
--- a/apps/meteor/client/views/omnichannel/queueList/QueueListTable.tsx
+++ b/apps/meteor/client/views/omnichannel/queueList/QueueListTable.tsx
@@ -133,9 +133,9 @@ const QueueListTable = () => {
 							{data?.queue.map(({ user, department, chats }) => (
 								<GenericTableRow key={user._id} tabIndex={0}>
 									<GenericTableCell withTruncatedText>
-										<Box display='flex' alignItems='center' mb='5px'>
+										<Box display='flex' alignItems='center' marginBlock='5px'>
 											<UserAvatar size={mediaQuery ? 'x28' : 'x40'} username={user.username} />
-											<Box display='flex' mi={8}>
+											<Box display='flex' marginInline={8}>
 												{user.username}
 											</Box>
 										</Box>
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.tsx
index d856d762e2f0e..f01d76fbe6624 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.tsx
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/RealTimeMonitoringPage.tsx
@@ -59,9 +59,9 @@ const RealTimeMonitoringPage = () => {
 			<PageHeader title={t('Real_Time_Monitoring')} />
 			<PageScrollableContentWithShadow>
 				<Margins block='x4'>
-					<Box flexDirection='row' display='flex' justifyContent='space-between' alignSelf='center' w='full'>
-						<Box maxWidth='50%' display='flex' mi={4} flexGrow={1} flexDirection='column'>
-							<Label mb={4}>{t('Departments')}</Label>
+					<Box flexDirection='row' display='flex' justifyContent='space-between' alignSelf='center' width='full'>
+						<Box maxWidth='50%' display='flex' marginInline={4} flexGrow={1} flexDirection='column'>
+							<Label marginBlock={4}>{t('Departments')}</Label>
 							<AutoCompleteDepartment
 								value={departmentId}
 								onChange={setDepartment}
@@ -72,8 +72,8 @@ const RealTimeMonitoringPage = () => {
 								renderItem={({ label, ...props }) => <Option {...props} label={<span style={{ whiteSpace: 'normal' }}>{label}</span>} />}
 							/>
 						</Box>
-						<Box maxWidth='50%' display='flex' mi={4} flexGrow={1} flexDirection='column'>
-							<Label mb={4}>{t('Update_every')}</Label>
+						<Box maxWidth='50%' display='flex' marginInline={4} flexGrow={1} flexDirection='column'>
+							<Label marginBlock={4}>{t('Update_every')}</Label>
 							<Select
 								options={reloadOptions}
 								onChange={useStableCallback((val: Key) => setReloadFrequency(val as number))}
@@ -81,31 +81,45 @@ const RealTimeMonitoringPage = () => {
 							/>
 						</Box>
 					</Box>
-					<Box display='flex' flexDirection='row' w='full' alignItems='stretch' flexShrink={1}>
+					<Box display='flex' flexDirection='row' width='full' alignItems='stretch' flexShrink={1}>
 						<ConversationOverview flexGrow={1} flexShrink={1} width='50%' departmentId={departmentId} dateRange={dateRange} />
 					</Box>
-					<Box display='flex' flexDirection='row' w='full' alignItems='stretch' flexShrink={1}>
-						<ChatsChart flexGrow={1} flexShrink={1} width='50%' mie={2} departmentId={departmentId} dateRange={dateRange} />
-						<ChatsPerAgentChart flexGrow={1} flexShrink={1} width='50%' mis={2} departmentId={departmentId} dateRange={dateRange} />
+					<Box display='flex' flexDirection='row' width='full' alignItems='stretch' flexShrink={1}>
+						<ChatsChart flexGrow={1} flexShrink={1} width='50%' marginInlineEnd={2} departmentId={departmentId} dateRange={dateRange} />
+						<ChatsPerAgentChart
+							flexGrow={1}
+							flexShrink={1}
+							width='50%'
+							marginInlineStart={2}
+							departmentId={departmentId}
+							dateRange={dateRange}
+						/>
 					</Box>
-					<Box display='flex' flexDirection='row' w='full' alignItems='stretch' flexShrink={1}>
+					<Box display='flex' flexDirection='row' width='full' alignItems='stretch' flexShrink={1}>
 						<ChatsOverview flexGrow={1} flexShrink={1} width='50%' departmentId={departmentId} dateRange={dateRange} />
 					</Box>
-					<Box display='flex' flexDirection='row' w='full' alignItems='stretch' flexShrink={1}>
-						<AgentStatusChart flexGrow={1} flexShrink={1} width='50%' mie={2} departmentId={departmentId} />
-						<ChatsPerDepartmentChart flexGrow={1} flexShrink={1} width='50%' mis={2} departmentId={departmentId} dateRange={dateRange} />
+					<Box display='flex' flexDirection='row' width='full' alignItems='stretch' flexShrink={1}>
+						<AgentStatusChart flexGrow={1} flexShrink={1} width='50%' marginInlineEnd={2} departmentId={departmentId} />
+						<ChatsPerDepartmentChart
+							flexGrow={1}
+							flexShrink={1}
+							width='50%'
+							marginInlineStart={2}
+							departmentId={departmentId}
+							dateRange={dateRange}
+						/>
 					</Box>
-					<Box display='flex' flexDirection='row' w='full' alignItems='stretch' flexShrink={1}>
+					<Box display='flex' flexDirection='row' width='full' alignItems='stretch' flexShrink={1}>
 						<AgentsOverview flexGrow={1} flexShrink={1} departmentId={departmentId} dateRange={dateRange} />
 					</Box>
-					<Box display='flex' w='full' flexShrink={1}>
-						<ChatDurationChart flexGrow={1} flexShrink={1} w='100%' departmentId={departmentId} dateRange={dateRange} />
+					<Box display='flex' width='full' flexShrink={1}>
+						<ChatDurationChart flexGrow={1} flexShrink={1} width='100%' departmentId={departmentId} dateRange={dateRange} />
 					</Box>
-					<Box display='flex' flexDirection='row' w='full' alignItems='stretch' flexShrink={1}>
+					<Box display='flex' flexDirection='row' width='full' alignItems='stretch' flexShrink={1}>
 						<ProductivityOverview flexGrow={1} flexShrink={1} departmentId={departmentId} dateRange={dateRange} />
 					</Box>
-					<Box display='flex' w='full' flexShrink={1}>
-						<ResponseTimesChart flexGrow={1} flexShrink={1} w='100%' departmentId={departmentId} dateRange={dateRange} />
+					<Box display='flex' width='full' flexShrink={1}>
+						<ResponseTimesChart flexGrow={1} flexShrink={1} width='100%' departmentId={departmentId} dateRange={dateRange} />
 					</Box>
 				</Margins>
 			</PageScrollableContentWithShadow>
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterItem.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterItem.tsx
index 80f9650859406..1cc5bb59e8e6a 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterItem.tsx
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterItem.tsx
@@ -9,11 +9,11 @@ const CounterItem = ({
 	title: ReactNode;
 	count: string | number;
 	flexShrink?: number;
-	pb?: number;
+	paddingBlock?: number;
 	flexBasis?: string;
 }) => (
 	<Box display='flex' flexDirection='column' justifyContent='space-between' alignItems='center' flexGrow={1} {...props}>
-		<Box fontScale='h4' textTransform='uppercase' color='hint' textAlign='center' pi={8}>
+		<Box fontScale='h4' textTransform='uppercase' color='hint' textAlign='center' paddingInline={8}>
 			{title}
 		</Box>
 		<Box fontScale='h2'>{count}</Box>
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterRow.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterRow.tsx
index b2e61a161edc7..33368981fd9be 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterRow.tsx
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/counter/CounterRow.tsx
@@ -8,7 +8,16 @@ export type CounterRowProps = {
 } & ComponentPropsWithoutRef<typeof Box>;
 
 const CounterRow = ({ children, ...props }: CounterRowProps) => (
-	<Box pb={28} pi={20} display='flex' flexDirection='row' justifyContent='space-around' alignItems='center' flexGrow={1} {...props}>
+	<Box
+		paddingBlock={28}
+		paddingInline={20}
+		display='flex'
+		flexDirection='row'
+		justifyContent='space-around'
+		alignItems='center'
+		flexGrow={1}
+		{...props}
+	>
 		{children &&
 			flattenChildren(children).reduce(
 				(acc: ReactNode[], child, i) =>
@@ -16,7 +25,7 @@ const CounterRow = ({ children, ...props }: CounterRowProps) => (
 						? [
 								...acc,
 								<Fragment key={i}>{child}</Fragment>,
-								<Divider key={(i + 1) * children.length} width='x2' m='none' alignSelf='stretch' />,
+								<Divider key={(i + 1) * children.length} width='x2' margin='none' alignSelf='stretch' />,
 							]
 						: [...acc, child],
 				[],
diff --git a/apps/meteor/client/views/omnichannel/reports/ReportsPage.tsx b/apps/meteor/client/views/omnichannel/reports/ReportsPage.tsx
index 0e1f390c30e35..fa5bd0e26cca4 100644
--- a/apps/meteor/client/views/omnichannel/reports/ReportsPage.tsx
+++ b/apps/meteor/client/views/omnichannel/reports/ReportsPage.tsx
@@ -22,7 +22,7 @@ const ReportsPage = () => {
 	return (
 		<Page background='tint'>
 			<PageHeader title={t('Reports')} />
-			<Box is='p' color='hint' fontScale='p2' mi={24}>
+			<Box is='p' color='hint' fontScale='p2' marginInline={24}>
 				{t('Omnichannel_Reports_Summary')}
 			</Box>
 			<PageScrollableContentWithShadow alignItems='center'>
diff --git a/apps/meteor/client/views/omnichannel/reports/components/ReportCard.tsx b/apps/meteor/client/views/omnichannel/reports/components/ReportCard.tsx
index 325f11ea8982f..6f239c3cbb901 100644
--- a/apps/meteor/client/views/omnichannel/reports/components/ReportCard.tsx
+++ b/apps/meteor/client/views/omnichannel/reports/components/ReportCard.tsx
@@ -27,7 +27,7 @@ export const ReportCard = forwardRef<HTMLElement, ReportCardProps>(function Repo
 	ref,
 ) {
 	return (
-		<Box h='full' ref={ref}>
+		<Box height='full' ref={ref}>
 			<Card height='full' aria-busy={isPending} data-qa={id}>
 				<Box rcx-card__header justifyContent='space-between'>
 					<CardCol>
@@ -44,7 +44,7 @@ export const ReportCard = forwardRef<HTMLElement, ReportCardProps>(function Repo
 					</CardCol>
 				</Box>
 				<CardBody flexDirection='column' height='full'>
-					<Box h='full' display='flex' flexDirection='column' justifyContent='center'>
+					<Box height='full' display='flex' flexDirection='column' justifyContent='center'>
 						<ReportCardContent
 							isPending={isPending}
 							isDataFound={isDataFound}
diff --git a/apps/meteor/client/views/omnichannel/reports/components/ReportCardLoadingState.tsx b/apps/meteor/client/views/omnichannel/reports/components/ReportCardLoadingState.tsx
index 722094cc9c869..6629ea64c9302 100644
--- a/apps/meteor/client/views/omnichannel/reports/components/ReportCardLoadingState.tsx
+++ b/apps/meteor/client/views/omnichannel/reports/components/ReportCardLoadingState.tsx
@@ -3,7 +3,7 @@ import { Box, Skeleton } from '@rocket.chat/fuselage';
 export const ReportCardLoadingState = () => (
 	<Box display='flex' height='100%' width='100%'>
 		<Box flexGrow={1}>
-			<Skeleton style={{ transform: 'none' }} height='100%' mb={8} mie={16} />
+			<Skeleton style={{ transform: 'none' }} height='100%' marginBlock={8} marginInlineEnd={16} />
 		</Box>
 		<Box flexGrow={1}>
 			<Skeleton height={28} />
diff --git a/apps/meteor/client/views/omnichannel/reports/sections/AgentsSection.tsx b/apps/meteor/client/views/omnichannel/reports/sections/AgentsSection.tsx
index 2a363622b7db6..9db9ea5b15a6f 100644
--- a/apps/meteor/client/views/omnichannel/reports/sections/AgentsSection.tsx
+++ b/apps/meteor/client/views/omnichannel/reports/sections/AgentsSection.tsx
@@ -20,7 +20,7 @@ export const AgentsSection = () => {
 		<ReportCard ref={ref} {...config}>
 			<Box display='flex' flexDirection={wrapped ? 'column' : 'row'}>
 				<Box flexGrow={1}>
-					<Box is='p' fontScale='p2' mbe={8}>
+					<Box is='p' fontScale='p2' marginBlockEnd={8}>
 						{t('Top_5_agents_with_the_most_conversations')}
 					</Box>
 					<BarChart
@@ -45,7 +45,7 @@ export const AgentsSection = () => {
 					/>
 				</Box>
 
-				<Box display='flex' h='x360' minWidth='50%' flexGrow={1}>
+				<Box display='flex' height='x360' minWidth='50%' flexGrow={1}>
 					<AgentsTable data={data} sortBy={sortBy} sortDirection={sortDirection} setSort={setSort} />
 				</Box>
 			</Box>
diff --git a/apps/meteor/client/views/omnichannel/slaPolicies/SlaEdit.tsx b/apps/meteor/client/views/omnichannel/slaPolicies/SlaEdit.tsx
index 088fb2175513e..6d5b7d66865d6 100644
--- a/apps/meteor/client/views/omnichannel/slaPolicies/SlaEdit.tsx
+++ b/apps/meteor/client/views/omnichannel/slaPolicies/SlaEdit.tsx
@@ -152,7 +152,7 @@ function SlaEdit({ data, isNew, slaId, reload, ...props }: SlaEditProps) {
 							{t('Reset')}
 						</Button>
 					)}
-					<Button primary mie='none' type='submit' flexGrow={1} form={formId}>
+					<Button primary marginInlineEnd='none' type='submit' flexGrow={1} form={formId}>
 						{t('Save')}
 					</Button>
 				</ButtonGroup>
diff --git a/apps/meteor/client/views/omnichannel/slaPolicies/SlaEditWithData.tsx b/apps/meteor/client/views/omnichannel/slaPolicies/SlaEditWithData.tsx
index f9f1221e6cfe0..a4c307407b744 100644
--- a/apps/meteor/client/views/omnichannel/slaPolicies/SlaEditWithData.tsx
+++ b/apps/meteor/client/views/omnichannel/slaPolicies/SlaEditWithData.tsx
@@ -25,7 +25,7 @@ function SlaEditWithData({ slaId, reload }: SlaEditProps) {
 
 	if (isError || !data) {
 		return (
-			<Callout m={16} type='danger'>
+			<Callout margin={16} type='danger'>
 				{t('Not_Available')}
 			</Callout>
 		);
diff --git a/apps/meteor/client/views/omnichannel/slaPolicies/SlaTable.tsx b/apps/meteor/client/views/omnichannel/slaPolicies/SlaTable.tsx
index 38ec897dfeecc..10b366bd8f2bf 100644
--- a/apps/meteor/client/views/omnichannel/slaPolicies/SlaTable.tsx
+++ b/apps/meteor/client/views/omnichannel/slaPolicies/SlaTable.tsx
@@ -82,7 +82,7 @@ const SlaTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
 			>
 				{t('Estimated_wait_time')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='remove' w='x60'>
+			<GenericTableHeaderCell key='remove' width='x60'>
 				{t('Remove')}
 			</GenericTableHeaderCell>
 		</>
diff --git a/apps/meteor/client/views/omnichannel/tags/TagEdit.tsx b/apps/meteor/client/views/omnichannel/tags/TagEdit.tsx
index 5b70b72826879..7138eb91a538c 100644
--- a/apps/meteor/client/views/omnichannel/tags/TagEdit.tsx
+++ b/apps/meteor/client/views/omnichannel/tags/TagEdit.tsx
@@ -136,7 +136,7 @@ const TagEdit = ({ tagData, currentDepartments, onClose }: TagEditProps) => {
 					</Button>
 				</ButtonGroup>
 				{_id && (
-					<Box mbs={8}>
+					<Box marginBlockStart={8}>
 						<ButtonGroup stretch>
 							<Button icon='trash' danger onClick={() => handleDeleteTag(_id)}>
 								{t('Delete')}
diff --git a/apps/meteor/client/views/omnichannel/tags/TagEditWithData.tsx b/apps/meteor/client/views/omnichannel/tags/TagEditWithData.tsx
index ca61811fe4573..efc99f22ef723 100644
--- a/apps/meteor/client/views/omnichannel/tags/TagEditWithData.tsx
+++ b/apps/meteor/client/views/omnichannel/tags/TagEditWithData.tsx
@@ -24,7 +24,7 @@ const TagEditWithData = ({ tagId, onClose }: { tagId: ILivechatTag['_id']; onClo
 
 	if (isError) {
 		return (
-			<Callout m={16} type='danger'>
+			<Callout margin={16} type='danger'>
 				{t('Not_Available')}
 			</Callout>
 		);
diff --git a/apps/meteor/client/views/omnichannel/tags/TagEditWithDepartmentData.tsx b/apps/meteor/client/views/omnichannel/tags/TagEditWithDepartmentData.tsx
index a62497a0d5e31..ccbfd86ba1b13 100644
--- a/apps/meteor/client/views/omnichannel/tags/TagEditWithDepartmentData.tsx
+++ b/apps/meteor/client/views/omnichannel/tags/TagEditWithDepartmentData.tsx
@@ -22,7 +22,7 @@ const TagEditWithDepartmentData = ({ tagData, onClose }: { tagData: Serialized<I
 
 	if (isError) {
 		return (
-			<Callout m={16} type='danger'>
+			<Callout margin={16} type='danger'>
 				{t('Not_Available')}
 			</Callout>
 		);
diff --git a/apps/meteor/client/views/omnichannel/tags/TagsTable.tsx b/apps/meteor/client/views/omnichannel/tags/TagsTable.tsx
index 7ae09a4d07b01..d70dee472fbf9 100644
--- a/apps/meteor/client/views/omnichannel/tags/TagsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/tags/TagsTable.tsx
@@ -70,7 +70,7 @@ const TagsTable = () => {
 			>
 				{t('Description')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='remove' w='x60' />
+			<GenericTableHeaderCell key='remove' width='x60' />
 		</>
 	);
 
diff --git a/apps/meteor/client/views/omnichannel/units/UnitEdit.tsx b/apps/meteor/client/views/omnichannel/units/UnitEdit.tsx
index 175914c2c7982..b9669916f402f 100644
--- a/apps/meteor/client/views/omnichannel/units/UnitEdit.tsx
+++ b/apps/meteor/client/views/omnichannel/units/UnitEdit.tsx
@@ -270,7 +270,7 @@ const UnitEdit = ({ unitData, unitMonitors, unitDepartments, onUpdate, onDelete,
 					</Button>
 				</ButtonGroup>
 				{_id && (
-					<Box mbs={8}>
+					<Box marginBlockStart={8}>
 						<ButtonGroup stretch>
 							<Button icon='trash' danger onClick={() => onDelete?.()}>
 								{t('Delete')}
diff --git a/apps/meteor/client/views/omnichannel/units/UnitEditWithData.tsx b/apps/meteor/client/views/omnichannel/units/UnitEditWithData.tsx
index 72b73148f6e44..14f5d4b5a71a8 100644
--- a/apps/meteor/client/views/omnichannel/units/UnitEditWithData.tsx
+++ b/apps/meteor/client/views/omnichannel/units/UnitEditWithData.tsx
@@ -51,7 +51,7 @@ const UnitEditWithData = ({ unitId, onClose }: { unitId: IOmnichannelBusinessUni
 
 	if (isError || unitMonitorsError || unitDepartmentsError) {
 		return (
-			<Callout m={16} type='danger'>
+			<Callout margin={16} type='danger'>
 				{t('Not_Available')}
 			</Callout>
 		);
diff --git a/apps/meteor/client/views/omnichannel/units/UnitsTable.tsx b/apps/meteor/client/views/omnichannel/units/UnitsTable.tsx
index f2dda5654ebff..5c31c4ed7103f 100644
--- a/apps/meteor/client/views/omnichannel/units/UnitsTable.tsx
+++ b/apps/meteor/client/views/omnichannel/units/UnitsTable.tsx
@@ -65,7 +65,7 @@ const UnitsTable = () => {
 			>
 				{t('Visibility')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='remove' w='x60' />
+			<GenericTableHeaderCell key='remove' width='x60' />
 		</>
 	);
 
diff --git a/apps/meteor/client/views/omnichannel/webhooks/WebhooksPage.tsx b/apps/meteor/client/views/omnichannel/webhooks/WebhooksPage.tsx
index d9c54dee13055..716ebf21fc462 100644
--- a/apps/meteor/client/views/omnichannel/webhooks/WebhooksPage.tsx
+++ b/apps/meteor/client/views/omnichannel/webhooks/WebhooksPage.tsx
@@ -167,7 +167,7 @@ const WebhooksPage = ({ settings }: WebhooksPageProps) => {
 				</ButtonGroup>
 			</PageHeader>
 			<PageScrollableContentWithShadow>
-				<Box maxWidth='x600' w='full' alignSelf='center'>
+				<Box maxWidth='x600' width='full' alignSelf='center'>
 					<p>{t('You_can_use_webhooks_to_easily_integrate_livechat_with_your_CRM')}</p>
 					<p>
 						<ExternalLink to={INTEGRATION_URL}>{t('Click_here')}</ExternalLink> {t('to_see_more_details_on_how_to_integrate')}
@@ -200,12 +200,18 @@ const WebhooksPage = ({ settings }: WebhooksPageProps) => {
 						<Field>
 							<FieldLabel>{t('Send_request_on')}</FieldLabel>
 							<FieldRow>
-								<Box w='full' display='flex' alignItems='stretch' justifyContent='stretch'>
+								<Box width='full' display='flex' alignItems='stretch' justifyContent='stretch'>
 									<Controller
 										control={control}
 										name='sendOn'
 										render={({ field: { onChange, value } }) => (
-											<MultiSelect w='full' value={value} onChange={onChange} options={sendOptions} placeholder={t('Select_an_option')} />
+											<MultiSelect
+												width='full'
+												value={value}
+												onChange={onChange}
+												options={sendOptions}
+												placeholder={t('Select_an_option')}
+											/>
 										)}
 									/>
 								</Box>
diff --git a/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx b/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx
index d00c3fff60739..d224537f3f132 100644
--- a/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx
+++ b/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventItem.tsx
@@ -47,8 +47,8 @@ const OutlookEventItem = ({ subject, description, startTime, meetingUrl }: Outlo
 			borderBlockEndWidth={1}
 			borderBlockEndColor='stroke-extra-light'
 			borderBlockEndStyle='solid'
-			pi={24}
-			pb={16}
+			paddingInline={24}
+			paddingBlock={16}
 			display='flex'
 			justifyContent='space-between'
 			onClick={handleOpenEvent}
diff --git a/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx b/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx
index effa04d2556d1..1d389f0b4d4bd 100644
--- a/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx
+++ b/apps/meteor/client/views/outlookCalendar/OutlookEventsList/OutlookEventsList.tsx
@@ -93,7 +93,7 @@ const OutlookEventsList = ({ onClose, changeRoute }: OutlookEventsListProps) =>
 					)}
 				</ButtonGroup>
 				{hasOutlookMethods && (
-					<Box mbs={8}>
+					<Box marginBlockStart={8}>
 						<ButtonGroup stretch>
 							<Button primary loading={syncOutlookCalendar.isPending} onClick={() => syncOutlookCalendar.mutate()}>
 								{authEnabled ? t('Sync') : t('Log_in_to_sync')}
diff --git a/apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx b/apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx
index 74864d33dd01e..b60256d5cea17 100644
--- a/apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx
+++ b/apps/meteor/client/views/outlookCalendar/OutlookSettingsList/OutlookSettingItem.tsx
@@ -29,12 +29,12 @@ const OutlookSettingItem = ({ id, title, subTitle, enabled, handleEnable }: Outl
 			borderBlockEndColor='stroke-extra-light'
 			borderBlockEndStyle='solid'
 			className={hovered}
-			pi={24}
-			pb={16}
+			paddingInline={24}
+			paddingBlock={16}
 			display='flex'
 			justifyContent='space-between'
 		>
-			<Box mie={8}>
+			<Box marginInlineEnd={8}>
 				<Box fontScale='h4'>{title}</Box>
 				<Box fontScale='p2'>{subTitle}</Box>
 			</Box>
diff --git a/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeaderTag.tsx b/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeaderTag.tsx
index 724e44f7e0aac..0cf2e0a62e064 100644
--- a/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeaderTag.tsx
+++ b/apps/meteor/client/views/room/Header/Omnichannel/OmnichannelRoomHeaderTag.tsx
@@ -10,7 +10,7 @@ const OmnichannelRoomHeaderTag = () => {
 	const { verified } = useOmnichannelRoom();
 
 	return (
-		<Box mis={4} withTruncatedText>
+		<Box marginInlineStart={4} withTruncatedText>
 			<OmnichannelVerificationTag verified={verified} onClick={() => setModal(<AdvancedContactModal onCancel={() => setModal(null)} />)} />
 		</Box>
 	);
diff --git a/apps/meteor/client/views/room/Header/RoomTitle.tsx b/apps/meteor/client/views/room/Header/RoomTitle.tsx
index 030bd5cd5f441..4fecfbc02a4be 100644
--- a/apps/meteor/client/views/room/Header/RoomTitle.tsx
+++ b/apps/meteor/client/views/room/Header/RoomTitle.tsx
@@ -37,7 +37,7 @@ const RoomTitle = ({ room }: RoomTitleProps) => {
 	const buttonProps = useButtonPattern(handleOpenRoomInfo);
 
 	return (
-		<HeaderTitleButton aria-label={`${room.name}${room.encrypted ? ` - ${t('encrypted')}` : ''}`} {...buttonProps} mie={4}>
+		<HeaderTitleButton aria-label={`${room.name}${room.encrypted ? ` - ${t('encrypted')}` : ''}`} {...buttonProps} marginInlineEnd={4}>
 			<HeaderIconWithRoom room={room} />
 			<HeaderTitle>{room.name}</HeaderTitle>
 		</HeaderTitleButton>
diff --git a/apps/meteor/client/views/room/NotSubscribedRoom.tsx b/apps/meteor/client/views/room/NotSubscribedRoom.tsx
index 0a8ac307e3c2f..9eb53cdd79d99 100644
--- a/apps/meteor/client/views/room/NotSubscribedRoom.tsx
+++ b/apps/meteor/client/views/room/NotSubscribedRoom.tsx
@@ -31,7 +31,7 @@ const NotSubscribedRoom = ({ rid, reference, type }: NotSubscribedRoomProps) =>
 								/>
 							</Box>
 						</StatesSubtitle>
-						<Box mbs={16}>
+						<Box marginBlockStart={16}>
 							<StatesActions>
 								<StatesAction disabled={handleJoinClick.isPending} onClick={() => handleJoinClick.mutate({ rid, reference, type })}>
 									{t('Join_channel')}
diff --git a/apps/meteor/client/views/room/RoomOpener.tsx b/apps/meteor/client/views/room/RoomOpener.tsx
index ef1f7b26ff41d..ba7bb794398c3 100644
--- a/apps/meteor/client/views/room/RoomOpener.tsx
+++ b/apps/meteor/client/views/room/RoomOpener.tsx
@@ -29,7 +29,7 @@ const RoomOpener = ({ type, reference }: RoomOpenerProps) => {
 	const { t } = useTranslation();
 
 	return (
-		<Box display='flex' w='full' h='full'>
+		<Box display='flex' width='full' height='full'>
 			<Suspense fallback={<RoomSkeleton />}>
 				{isLoading && <RoomSkeleton />}
 				{isSuccess && (
diff --git a/apps/meteor/client/views/room/RoomOpenerEmbedded.tsx b/apps/meteor/client/views/room/RoomOpenerEmbedded.tsx
index 7b33753c427c8..d3a5bb1a82935 100644
--- a/apps/meteor/client/views/room/RoomOpenerEmbedded.tsx
+++ b/apps/meteor/client/views/room/RoomOpenerEmbedded.tsx
@@ -50,7 +50,7 @@ const RoomOpenerEmbedded = ({ type, reference }: RoomOpenerProps) => {
 	const { t } = useTranslation();
 
 	return (
-		<Box display='flex' w='full' h='full'>
+		<Box display='flex' width='full' height='full'>
 			<Suspense fallback={<RoomSkeleton />}>
 				{isLoading && <RoomSkeleton />}
 				{isSuccess && (
diff --git a/apps/meteor/client/views/room/body/RetentionPolicyWarning.tsx b/apps/meteor/client/views/room/body/RetentionPolicyWarning.tsx
index 36565ff11c3db..a54e02de63e8b 100644
--- a/apps/meteor/client/views/room/body/RetentionPolicyWarning.tsx
+++ b/apps/meteor/client/views/room/body/RetentionPolicyWarning.tsx
@@ -13,7 +13,7 @@ const RetentionPolicyWarning = ({ room }: RetentionPolicyWarningProps) => {
 	const message = usePruneWarningMessage(room);
 
 	return (
-		<Box display='flex' justifyContent='center' pi={20} mb={8}>
+		<Box display='flex' justifyContent='center' paddingInline={20} marginBlock={8}>
 			<Bubble role='alert' aria-live='polite' aria-label={t('Retention_policy_warning_banner')} small secondary>
 				{message}
 			</Bubble>
diff --git a/apps/meteor/client/views/room/body/RoomBody.tsx b/apps/meteor/client/views/room/body/RoomBody.tsx
index 90eff2a276c3f..cfe1b4bbc1323 100644
--- a/apps/meteor/client/views/room/body/RoomBody.tsx
+++ b/apps/meteor/client/views/room/body/RoomBody.tsx
@@ -171,7 +171,7 @@ const RoomBody = () => {
 					<div className='messages-container-wrapper'>
 						<div className='messages-container-main' {...fileUploadTriggerProps}>
 							<DropTargetOverlay {...fileUploadOverlayProps} />
-							<Box position='absolute' w='full'>
+							<Box position='absolute' width='full'>
 								{isUploading && <UploadProgressIndicator uploads={uploads} />}
 								{Boolean(unread) && (
 									<UnreadMessagesIndicator
diff --git a/apps/meteor/client/views/room/body/RoomForeword/RoomForeword.tsx b/apps/meteor/client/views/room/body/RoomForeword/RoomForeword.tsx
index 6fb4255ec7595..102c8e1052e9f 100644
--- a/apps/meteor/client/views/room/body/RoomForeword/RoomForeword.tsx
+++ b/apps/meteor/client/views/room/body/RoomForeword/RoomForeword.tsx
@@ -13,7 +13,7 @@ const RoomForeword = ({ user, room }: RoomForewordProps) => {
 
 	if (!isDirectMessageRoom(room)) {
 		return (
-			<Box fontScale='c1' color='default' display='flex' justifyContent='center' mb={8}>
+			<Box fontScale='c1' color='default' display='flex' justifyContent='center' marginBlock={8}>
 				{t('Start_of_conversation')}
 			</Box>
 		);
@@ -26,17 +26,17 @@ const RoomForeword = ({ user, room }: RoomForewordProps) => {
 	}
 
 	return (
-		<Box is='div' flexGrow={1} display='flex' justifyContent='center' flexDirection='column' mb={8}>
+		<Box is='div' flexGrow={1} display='flex' justifyContent='center' flexDirection='column' marginBlock={8}>
 			<FlexItem grow={1}>
 				<Box display='flex' alignItems='center' justifyContent='center'>
 					{usernames.map((username, index) => (
-						<Box is='span' mi={4} key={index}>
+						<Box is='span' marginInline={4} key={index}>
 							<UserAvatar size='x48' username={username} />
 						</Box>
 					))}
 				</Box>
 			</FlexItem>
-			<Box display='flex' color='default' fontScale='h4' flexGrow={1} justifyContent='center' mb={16}>
+			<Box display='flex' color='default' fontScale='h4' flexGrow={1} justifyContent='center' marginBlock={16}>
 				{t('Direct_message_you_have_joined')}
 			</Box>
 			<Box is='div' flexGrow={1} display='flex' justifyContent='center'>
diff --git a/apps/meteor/client/views/room/body/RoomInviteBody.tsx b/apps/meteor/client/views/room/body/RoomInviteBody.tsx
index c40a75a10203b..f1e46b7393619 100644
--- a/apps/meteor/client/views/room/body/RoomInviteBody.tsx
+++ b/apps/meteor/client/views/room/body/RoomInviteBody.tsx
@@ -19,12 +19,12 @@ const RoomInviteBody = ({ inviter, infoLink, isLoading, onAccept, onReject }: Ro
 	const { name, username } = inviter;
 
 	return (
-		<Box m='auto'>
+		<Box margin='auto'>
 			<States>
 				<StatesIcon name='mail' />
 				<StatesTitle>{t('Message_request')}</StatesTitle>
 				<StatesSubtitle>
-					<Box mbe={8}>{t('You_have_been_invited_to_have_a_conversation_with')}</Box>
+					<Box marginBlockEnd={8}>{t('You_have_been_invited_to_have_a_conversation_with')}</Box>
 					<Chip>
 						<UserAvatar username={username} size='x16' /> {name || username}
 					</Chip>
diff --git a/apps/meteor/client/views/room/body/UnreadMessagesIndicator.tsx b/apps/meteor/client/views/room/body/UnreadMessagesIndicator.tsx
index ceacbf4a43396..7ec645ccecacc 100644
--- a/apps/meteor/client/views/room/body/UnreadMessagesIndicator.tsx
+++ b/apps/meteor/client/views/room/body/UnreadMessagesIndicator.tsx
@@ -19,7 +19,7 @@ const UnreadMessagesIndicator = ({ count, onJumpButtonClick, onMarkAsReadButtonC
 	const { t } = useTranslation();
 
 	return (
-		<Box className={indicatorStyle} mbs={8}>
+		<Box className={indicatorStyle} marginBlockStart={8}>
 			<Bubble
 				onClick={onJumpButtonClick}
 				onDismiss={onMarkAsReadButtonClick}
diff --git a/apps/meteor/client/views/room/body/UploadProgress/UploadProgressIndicator.tsx b/apps/meteor/client/views/room/body/UploadProgress/UploadProgressIndicator.tsx
index 8b283b2df62dc..842943e0b5134 100644
--- a/apps/meteor/client/views/room/body/UploadProgress/UploadProgressIndicator.tsx
+++ b/apps/meteor/client/views/room/body/UploadProgress/UploadProgressIndicator.tsx
@@ -63,7 +63,7 @@ const UploadProgressIndicator = ({ uploads }: UploadProgressIndicatorProps) => {
 	}
 
 	return (
-		<Box className={customClass} mbs={8}>
+		<Box className={customClass} marginBlockStart={8}>
 			<Bubble role='status'>{`${percentage}% ${t('Uploading__count__file', { count })}`}</Bubble>
 		</Box>
 	);
diff --git a/apps/meteor/client/views/room/composer/ComposerAirGappedRestricted.tsx b/apps/meteor/client/views/room/composer/ComposerAirGappedRestricted.tsx
index 6cf59f7cbfa84..b7ac47e3fabc8 100644
--- a/apps/meteor/client/views/room/composer/ComposerAirGappedRestricted.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerAirGappedRestricted.tsx
@@ -5,7 +5,7 @@ import { Trans } from 'react-i18next';
 const ComposerAirGappedRestricted = () => {
 	return (
 		<MessageFooterCallout color='default'>
-			<Icon name='warning' size={20} mie={4} />
+			<Icon name='warning' size={20} marginInlineEnd={4} />
 			<span>
 				<Trans i18nKey='Composer_readonly_airgapped'>
 					<Box is='span' fontWeight={600}>
diff --git a/apps/meteor/client/views/room/composer/ComposerAnonymous.tsx b/apps/meteor/client/views/room/composer/ComposerAnonymous.tsx
index adcd2789bcc2c..93db75b3ab4e4 100644
--- a/apps/meteor/client/views/room/composer/ComposerAnonymous.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerAnonymous.tsx
@@ -37,7 +37,7 @@ const ComposerAnonymous = () => {
 	};
 
 	return (
-		<Box mb={16}>
+		<Box marginBlock={16}>
 			<ButtonGroup>
 				<Button small primary onClick={() => setForceLogin(true)}>
 					{t('Sign_in_to_start_talking')}
diff --git a/apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx
index 6f3dd7ea1ce0e..bc874d46709ce 100644
--- a/apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx
@@ -80,14 +80,22 @@ function ComposerBoxPopup<
 
 	return (
 		<Box position='relative'>
-			<Tile ref={composerBoxPopupRef} padding={0} role='menu' mbe={8} overflow='hidden' aria-labelledby={id} name='ComposerBoxPopup'>
+			<Tile
+				ref={composerBoxPopupRef}
+				padding={0}
+				role='menu'
+				marginBlockEnd={8}
+				overflow='hidden'
+				aria-labelledby={id}
+				name='ComposerBoxPopup'
+			>
 				{title && (
-					<Box bg='tint' pi={16} pb={8} id={id}>
+					<Box backgroundColor='tint' paddingInline={16} paddingBlock={8} id={id}>
 						{title}
 					</Box>
 				)}
 				<CustomScrollbars>
-					<Box pb={8} maxHeight='x320'>
+					<Box paddingBlock={8} maxHeight='x320'>
 						{!isLoading && itemsFlat.length === 0 && <Option>{t('No_results_found')}</Option>}
 						{isLoading && <OptionSkeleton />}
 						{itemsFlat.map((item, index) => {
diff --git a/apps/meteor/client/views/room/composer/ComposerBoxPopupPreview.tsx b/apps/meteor/client/views/room/composer/ComposerBoxPopupPreview.tsx
index 4739582076258..fa294231ff6ad 100644
--- a/apps/meteor/client/views/room/composer/ComposerBoxPopupPreview.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerBoxPopupPreview.tsx
@@ -105,9 +105,9 @@ const ComposerBoxPopupPreview = forwardRef(function ComposerBoxPopupPreview(
 
 	return (
 		<Box position='relative'>
-			<Tile padding={0} role='menu' mbe={8} overflow='hidden' aria-labelledby={id}>
+			<Tile padding={0} role='menu' marginBlockEnd={8} overflow='hidden' aria-labelledby={id}>
 				{title && (
-					<Box bg='tint' pi={16} pb={8} id={id}>
+					<Box backgroundColor='tint' paddingInline={16} paddingBlock={8} id={id}>
 						{title}
 					</Box>
 				)}
@@ -116,7 +116,7 @@ const ComposerBoxPopupPreview = forwardRef(function ComposerBoxPopupPreview(
 						{isLoading &&
 							Array(5)
 								.fill(5)
-								.map((_, index) => <Skeleton variant='rect' h='100px' w='120px' m={2} key={index} />)}
+								.map((_, index) => <Skeleton variant='rect' height='100px' width='120px' margin={2} key={index} />)}
 
 						{!isLoading &&
 							itemsFlat.map((item) => (
@@ -126,11 +126,11 @@ const ComposerBoxPopupPreview = forwardRef(function ComposerBoxPopupPreview(
 									className={['popup-item', item === focused && 'selected'].filter(Boolean).join(' ')}
 									id={`popup-item-${item._id}`}
 									key={item._id}
-									bg={item === focused ? 'selected' : undefined}
+									backgroundColor={item === focused ? 'selected' : undefined}
 									borderColor={item === focused ? 'highlight' : 'transparent'}
 									tabIndex={item === focused ? 0 : -1}
 									aria-selected={item === focused}
-									m={2}
+									margin={2}
 									borderWidth='default'
 									borderRadius='x4'
 								>
diff --git a/apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelCallout.tsx b/apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelCallout.tsx
index 23a42b0546ad3..1aa900180ae0e 100644
--- a/apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelCallout.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelCallout.tsx
@@ -40,7 +40,7 @@ const ComposerOmnichannelCallout = () => {
 		<Callout
 			role='status'
 			aria-labelledby={calloutDescriptionId}
-			mbe={16}
+			marginBlockEnd={16}
 			actions={
 				<ButtonGroup>
 					<Button onClick={() => navigate(`/live/${_id}/contact-profile/edit`)} small>
diff --git a/apps/meteor/client/views/room/composer/ComposerUserActionIndicator/ComposerUserActionIndicator.tsx b/apps/meteor/client/views/room/composer/ComposerUserActionIndicator/ComposerUserActionIndicator.tsx
index 0f91ad791f1da..c927674ed0d30 100644
--- a/apps/meteor/client/views/room/composer/ComposerUserActionIndicator/ComposerUserActionIndicator.tsx
+++ b/apps/meteor/client/views/room/composer/ComposerUserActionIndicator/ComposerUserActionIndicator.tsx
@@ -57,7 +57,7 @@ const ComposerUserActionIndicator = ({ rid, tmid }: ComposerUserActionIndicatorP
 	return (
 		<Box
 			role='status'
-			h='x20'
+			height='x20'
 			className='rc-message-box__activity-wrapper'
 			fontScale='c1'
 			color='annotation'
diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBoxReplies.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBoxReplies.tsx
index 0066bdc17fe61..709b2d91840e4 100644
--- a/apps/meteor/client/views/room/composer/messageBox/MessageBoxReplies.tsx
+++ b/apps/meteor/client/views/room/composer/messageBox/MessageBoxReplies.tsx
@@ -18,7 +18,7 @@ const MessageBoxReplies = () => {
 	}
 
 	return (
-		<Box mbe={8} position='relative' overflowY='auto' maxHeight='x256'>
+		<Box marginBlockEnd={8} position='relative' overflowY='auto' maxHeight='x256'>
 			{replies.map((reply) => (
 				<MessageBoxReply key={reply._id} reply={reply} />
 			))}
diff --git a/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx b/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx
index 3aea26ad90bba..480f7446e9a15 100644
--- a/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx
+++ b/apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx
@@ -33,7 +33,7 @@ const AutoTranslate = ({ language, languages, handleSwitch, translateEnable, han
 				<ContextualbarTitle>{t('Auto_Translate')}</ContextualbarTitle>
 				{handleClose && <ContextualbarClose onClick={handleClose} />}
 			</ContextualbarHeader>
-			<ContextualbarContent pbs={24}>
+			<ContextualbarContent paddingBlockStart={24}>
 				<FieldGroup>
 					{room.encrypted && (
 						<Callout title={t('Automatic_translation_not_available')} type='warning'>
diff --git a/apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.tsx b/apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.tsx
index 175857ac3d122..a6417af0e636b 100644
--- a/apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.tsx
+++ b/apps/meteor/client/views/room/contextualBar/BannedUsers/BannedUsers.tsx
@@ -38,9 +38,9 @@ const BannedUsers = ({ loading, error, bannedUsers, useRealName = false, onClick
 				<ContextualbarTitle>{t('Banned_Users')}</ContextualbarTitle>
 				<ContextualbarClose onClick={onClickClose} />
 			</ContextualbarHeader>
-			<ContextualbarContent p={0} pb={12}>
+			<ContextualbarContent padding={0} paddingBlock={12}>
 				{loading && (
-					<Box pi={24} pb={12}>
+					<Box paddingInline={24} paddingBlock={12}>
 						<Throbber size='x12' />
 					</Box>
 				)}
@@ -52,7 +52,7 @@ const BannedUsers = ({ loading, error, bannedUsers, useRealName = false, onClick
 				)}
 
 				{!loading && !error && bannedUsers.length > 0 && (
-					<Box w='full' h='full' overflow='hidden' flexShrink={1}>
+					<Box width='full' height='full' overflow='hidden' flexShrink={1}>
 						<VirtualizedScrollbars>
 							<Virtuoso
 								style={{ height: '100%', width: '100%' }}
diff --git a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx
index 54d603c902a42..bff99894c1239 100644
--- a/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx
@@ -82,20 +82,20 @@ function DiscussionsList({
 			<ContextualbarContent paddingInline={0}>
 				<ResultsLiveRegion shouldAnnounce={isSuccess} itemCount={itemCount} />
 				{isPending && (
-					<Box pi={24} pb={12}>
+					<Box paddingInline={24} paddingBlock={12}>
 						<Throbber size='x12' />
 					</Box>
 				)}
 				{error instanceof Error && (
-					<Callout mi={24} type='danger'>
+					<Callout marginInline={24} type='danger'>
 						{error.toString()}
 					</Callout>
 				)}
 				{isSuccess && (
-					<Box id={discussionListId} w='full' h='full' overflow='hidden' flexShrink={1}>
+					<Box id={discussionListId} width='full' height='full' overflow='hidden' flexShrink={1}>
 						{discussions.length === 0 && <ContextualbarEmptyContent title={t('No_Discussions_found')} />}
 						{discussions.length > 0 && (
-							<Box h='full' w='full' style={{ minHeight: 0 }}>
+							<Box height='full' width='full' style={{ minHeight: 0 }}>
 								<PaginatedVirtualList
 									items={discussions}
 									totalCount={itemCount}
diff --git a/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx b/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx
index 740b77d5e1c7e..00741bf35dc15 100644
--- a/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Discussions/components/DiscussionsListItem.tsx
@@ -49,7 +49,7 @@ const DiscussionListItem = ({
 }: DiscussionListItemProps) => {
 	const { t } = useTranslation();
 	return (
-		<Box is={Message} {...props} className={className} pbs={16} pbe={8}>
+		<Box is={Message} {...props} className={className} paddingBlockStart={16} paddingBlockEnd={8}>
 			<MessageLeftContainer>
 				<MessageAvatar emoji={emoji ? <Emoji emojiHandle={emoji} fillContainer /> : undefined} username={username} size='x36' />
 			</MessageLeftContainer>
diff --git a/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx b/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx
index fc845b36ee738..c89b9e298c65c 100644
--- a/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Info/EditRoomInfo/EditRoomInfo.tsx
@@ -243,7 +243,7 @@ const EditRoomInfo = ({ room, onClickClose, onClickBack }: EditRoomInfoProps) =>
 				<ContextualbarTitle>{t(`${title[roomType]}`)}</ContextualbarTitle>
 				{onClickClose && <ContextualbarClose onClick={onClickClose} />}
 			</ContextualbarHeader>
-			<ContextualbarScrollableContent p={24}>
+			<ContextualbarScrollableContent padding={24}>
 				<form id={formId} onSubmit={handleSubmit(handleSave)}>
 					<Box display='flex' justifyContent='center'>
 						<Controller
diff --git a/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/ABAC/RoomInfoABACSection.tsx b/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/ABAC/RoomInfoABACSection.tsx
index 64d1cad65a40f..8ccfaec5fe33f 100644
--- a/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/ABAC/RoomInfoABACSection.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/ABAC/RoomInfoABACSection.tsx
@@ -28,13 +28,13 @@ const RoomInfoABACSection = ({ room }: RoomInfoABACSectionProps) => {
 
 	return (
 		<>
-			<Divider mb={32} width='full' />
+			<Divider marginBlock={32} width='full' />
 			<InfoPanelField>
-				<Box display='flex' mbe={16}>
+				<Box display='flex' marginBlockEnd={16}>
 					<Tag medium>
 						<Box display='flex' alignItems='center'>
 							<RoomIcon room={room} />
-							<Box mis={2}>{t('ABAC_Managed')}</Box>
+							<Box marginInlineStart={2}>{t('ABAC_Managed')}</Box>
 						</Box>
 					</Tag>
 				</Box>
@@ -44,13 +44,19 @@ const RoomInfoABACSection = ({ room }: RoomInfoABACSectionProps) => {
 				<InfoPanelLabel id='room-attributes-list-label'>{t('ABAC_Room_Attributes')}</InfoPanelLabel>
 				<Box is='ul' aria-labelledby='room-attributes-list-label'>
 					{room.abacAttributes.map((attribute) => (
-						<Box is='li' key={attribute.key} mb={16}>
+						<Box is='li' key={attribute.key} marginBlock={16}>
 							<Box is='span' id={`room-attribute-${attribute.key}-label`}>
 								{attribute.key}
 							</Box>
-							<Box is='ul' display='flex' mbs={8} alignItems='center' aria-labelledby={`room-attribute-${attribute.key}-label`}>
+							<Box
+								is='ul'
+								display='flex'
+								marginBlockStart={8}
+								alignItems='center'
+								aria-labelledby={`room-attribute-${attribute.key}-label`}
+							>
 								{attribute.values.map((value) => (
-									<Box is='li' mie={4} key={value}>
+									<Box is='li' marginInlineEnd={4} key={value}>
 										<Tag medium>{value}</Tag>
 									</Box>
 								))}
diff --git a/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx b/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx
index 7562b27ec0096..28cc3961ee5be 100644
--- a/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.tsx
@@ -57,9 +57,9 @@ const RoomInfo = ({ room, icon, onClickBack, onClickClose, onClickEnterRoom, onC
 				{onClickClose && <ContextualbarClose onClick={onClickClose} />}
 			</ContextualbarHeader>
 
-			<ContextualbarScrollableContent p={24}>
+			<ContextualbarScrollableContent padding={24}>
 				<InfoPanel>
-					<InfoPanelSection maxWidth='x332' mi='auto'>
+					<InfoPanelSection maxWidth='x332' marginInline='auto'>
 						<InfoPanelAvatar>
 							<RoomAvatar size='x332' room={room} />
 						</InfoPanelAvatar>
@@ -78,7 +78,7 @@ const RoomInfo = ({ room, icon, onClickBack, onClickClose, onClickEnterRoom, onC
 
 					{archived && (
 						<InfoPanelSection>
-							<Box mb={16}>
+							<Box marginBlock={16}>
 								<Callout type='warning'>{t('Room_archived')}</Callout>
 							</Box>
 						</InfoPanelSection>
diff --git a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/MessageSearchTab.tsx b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/MessageSearchTab.tsx
index c804515c61ac7..6b3cad8894ce2 100644
--- a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/MessageSearchTab.tsx
+++ b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/MessageSearchTab.tsx
@@ -121,7 +121,7 @@ const MessageSearchTab = () => {
 					</>
 				)}
 				{providerQuery.isError && (
-					<Callout m={24} type='danger'>
+					<Callout margin={24} type='danger'>
 						{t('Search_current_provider_not_active')}
 					</Callout>
 				)}
diff --git a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearchForm.tsx b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearchForm.tsx
index 973a154f49e98..e2df740a00847 100644
--- a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearchForm.tsx
+++ b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearchForm.tsx
@@ -51,7 +51,7 @@ const MessageSearchForm = ({ provider, onSearch, searchListId, isSuccess }: Mess
 	const { t } = useTranslation();
 
 	return (
-		<Box is='form' onSubmit={submitHandler} w='full'>
+		<Box is='form' onSubmit={submitHandler} width='full'>
 			<Field>
 				<TextInput
 					endAddon={<Icon name='magnifier' size='x20' />}
@@ -72,7 +72,7 @@ const MessageSearchForm = ({ provider, onSearch, searchListId, isSuccess }: Mess
 				</Field>
 			)}
 			{room.encrypted && (
-				<Callout type='warning' mbs={12} icon='circle-exclamation'>
+				<Callout type='warning' marginBlockStart={12} icon='circle-exclamation'>
 					<Box fontScale='p2b'>{t('Encrypted_RoomType', { roomType: getRoomTypeTranslation(room).toLowerCase() })}</Box>
 					{t('Encrypted_content_cannot_be_searched')}
 				</Callout>
diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx
index 9227f439e3565..94ff7eeb3ce73 100644
--- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx
+++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/NotificationPreferencesForm.tsx
@@ -84,7 +84,7 @@ const NotificationPreferencesForm = ({ notificationOptions, handlePlaySound }: N
 									optionValue={value}
 									onChange={onChange}
 								>
-									<IconButton icon='play' mis={4} onClick={handlePlaySound} aria-label={t('Play')} />
+									<IconButton icon='play' marginInlineStart={4} onClick={handlePlaySound} aria-label={t('Play')} />
 								</NotificationPreference>
 							)}
 						/>
diff --git a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.tsx b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.tsx
index 08974b238f4b9..8f01b5f201b49 100644
--- a/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.tsx
+++ b/apps/meteor/client/views/room/contextualBar/NotificationPreferences/components/NotificationByDevice.tsx
@@ -14,7 +14,7 @@ const NotificationByDevice = ({ device, icon, children }: NotificationByDevicePr
 		title={
 			<Box display='flex' alignItems='center'>
 				<Icon name={icon} size='x18' />
-				<Box fontScale='p2m' mi={16}>
+				<Box fontScale='p2m' marginInline={16}>
 					{device}
 				</Box>
 			</Box>
diff --git a/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessagesDateTimeRow.tsx b/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessagesDateTimeRow.tsx
index 59d5fe2584587..8f57f64f28b0f 100644
--- a/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessagesDateTimeRow.tsx
+++ b/apps/meteor/client/views/room/contextualBar/PruneMessages/PruneMessagesDateTimeRow.tsx
@@ -14,10 +14,10 @@ const PruneMessagesDateTimeRow = ({ label, field }: PruneMessagesDateTimeRowProp
 	return (
 		<Field>
 			<FieldLabel flexGrow={0}>{label}</FieldLabel>
-			<Box display='flex' mi='neg-x4'>
+			<Box display='flex' marginInline='neg-x4'>
 				<Margins inline={4}>
-					<InputBox aria-label={`${label} ${t('Date')}`} type='date' flexGrow={1} h='x20' {...register(`${field}.date`)} />
-					<InputBox aria-label={`${label} ${t('Time')}`} type='time' flexGrow={1} h='x20' {...register(`${field}.time`)} />
+					<InputBox aria-label={`${label} ${t('Date')}`} type='date' flexGrow={1} height='x20' {...register(`${field}.date`)} />
+					<InputBox aria-label={`${label} ${t('Time')}`} type='time' flexGrow={1} height='x20' {...register(`${field}.time`)} />
 				</Margins>
 			</Box>
 		</Field>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFileItemWrapper.tsx b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFileItemWrapper.tsx
index 5f581c5e19726..9d770f74355e7 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFileItemWrapper.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFileItemWrapper.tsx
@@ -23,8 +23,8 @@ const RoomFileItemWrapper = forwardRef(function RoomFileItemWrapper(
 			role='listitem'
 			aria-label={item.name}
 			display='flex'
-			pb={12}
-			pi={24}
+			paddingBlock={12}
+			paddingInline={24}
 			borderRadius={4}
 			className={customClass}
 			{...props}
diff --git a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx
index 9c5bb867023bd..5527bb5f00012 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomFiles/RoomFiles.tsx
@@ -82,19 +82,19 @@ const RoomFiles = ({
 					onChange={setText}
 					endAddon={<Icon name='magnifier' size='x20' />}
 				/>
-				<Box w='x144' mis={8}>
+				<Box width='x144' marginInlineStart={8}>
 					<Select aria-controls={isSuccess ? filesListId : undefined} onChange={setType} value={type} options={options} />
 				</Box>
 			</ContextualbarSection>
 			<ContextualbarContent paddingInline={0}>
 				<ResultsLiveRegion shouldAnnounce={isSuccess} itemCount={total} />
 				{isPending && (
-					<Box p={24}>
+					<Box padding={24}>
 						<Throbber size='x12' />
 					</Box>
 				)}
 				{isSuccess && (
-					<Box w='full' h='full' id={filesListId} flexShrink={1} overflow='hidden'>
+					<Box width='full' height='full' id={filesListId} flexShrink={1} overflow='hidden'>
 						{filesItems.length === 0 && <ContextualbarEmptyContent title={t('No_files_found')} />}
 						{filesItems.length > 0 && (
 							<VirtualizedScrollbars>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItem.tsx b/apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItem.tsx
index 2fab9f8ea999d..183de48e56aa0 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItem.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomFiles/components/FileItem.tsx
@@ -47,7 +47,7 @@ const FileItem = ({ rid, fileData, onClickDelete }: FileItemProps) => {
 					{...(path?.includes('/file-decrypt/') ? encryptedAnchorProps : {})}
 				>
 					<FilePreviewIcon format={getFileExtension(name)} />
-					<Box mis={8} flexShrink={1} overflow='hidden'>
+					<Box marginInlineStart={8} flexShrink={1} overflow='hidden'>
 						<Box withTruncatedText color='default' fontScale='p2m'>
 							{name}
 						</Box>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomFiles/components/ImageItem.tsx b/apps/meteor/client/views/room/contextualBar/RoomFiles/components/ImageItem.tsx
index cb1161cd34353..13934f97c5eea 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomFiles/components/ImageItem.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomFiles/components/ImageItem.tsx
@@ -26,7 +26,7 @@ const ImageItem = ({ id, url, name, timestamp, username, alt = '' }: ImageItemPr
 					<Avatar objectFit='cover' size='x48' url={url} className='gallery-item' alt={alt} />
 				</Box>
 			)}
-			<Box mis={8} flexShrink={1} overflow='hidden' className='gallery-item' cursor='default'>
+			<Box marginInlineStart={8} flexShrink={1} overflow='hidden' className='gallery-item' cursor='default'>
 				{name && (
 					<Box withTruncatedText color='default' fontScale='p2m' className='gallery-item'>
 						{name}
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddMatrixUsers/AddMatrixUsersModal.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddMatrixUsers/AddMatrixUsersModal.tsx
index 22710a94f8f17..371ac4329c54c 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddMatrixUsers/AddMatrixUsersModal.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/AddMatrixUsers/AddMatrixUsersModal.tsx
@@ -90,7 +90,8 @@ const AddMatrixUsersModal = ({ onClose, matrixIdVerifiedStatus, onSave, complete
 				<Box is='ul'>
 					{[...matrixIdVerifiedStatus.entries()].map(([_matrixId, _verificationStatus]) => (
 						<Box is='li' display='flex' key={_matrixId}>
-							{_matrixId} <Icon mis={4} name={verificationStatusAsIcon(_verificationStatus)} title={t(_verificationStatus)} size='x20' />
+							{_matrixId}{' '}
+							<Icon marginInlineStart={4} name={verificationStatusAsIcon(_verificationStatus)} title={t(_verificationStatus)} size='x20' />
 						</Box>
 					))}
 					{rocketChatUsers.map((_user) => (
@@ -100,12 +101,12 @@ const AddMatrixUsersModal = ({ onClose, matrixIdVerifiedStatus, onSave, complete
 					))}
 				</Box>
 				{bannedError && (
-					<Box color='danger' fontScale='c1' mbs={8}>
+					<Box color='danger' fontScale='c1' marginBlockStart={8}>
 						{t('User_is_banned_from_room_confirm_unban')}
 					</Box>
 				)}
 				{error && (
-					<Box color='danger' fontScale='c1' mbs={8}>
+					<Box color='danger' fontScale='c1' marginBlockStart={8}>
 						{error}
 					</Box>
 				)}
@@ -115,7 +116,7 @@ const AddMatrixUsersModal = ({ onClose, matrixIdVerifiedStatus, onSave, complete
 					<ModalFooterAnnotation>
 						<Box display='flex' alignItems='center'>
 							<CheckBox checked={unbanConfirmed} onChange={() => setUnbanConfirmed((prev) => !prev)} id={checkboxId} />
-							<Label htmlFor={checkboxId} mis={8}>
+							<Label htmlFor={checkboxId} marginInlineStart={8}>
 								{t('Yes_unban_user')}
 							</Label>
 						</Box>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/BannedUsersUnbanModal.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/BannedUsersUnbanModal.tsx
index fa0d89c78838d..85d9f1ca3c21e 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/BannedUsersUnbanModal.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/AddUsers/BannedUsersUnbanModal.tsx
@@ -51,7 +51,7 @@ const BannedUsersUnbanModal = ({ onClose, onConfirm }: BannedUsersUnbanModalProp
 			<ModalContent>
 				<Box>{t('User_is_banned_from_room_confirm_unban')}</Box>
 				{error && (
-					<Box color='danger' fontScale='c1' mbs={8}>
+					<Box color='danger' fontScale='c1' marginBlockStart={8}>
 						{error}
 					</Box>
 				)}
@@ -60,7 +60,7 @@ const BannedUsersUnbanModal = ({ onClose, onConfirm }: BannedUsersUnbanModalProp
 				<ModalFooterAnnotation>
 					<Box display='flex' alignItems='center'>
 						<CheckBox checked={unbanConfirmed} onChange={() => setUnbanConfirmed((prev) => !prev)} id={checkboxId} />
-						<Label htmlFor={checkboxId} mis={8}>
+						<Label htmlFor={checkboxId} marginInlineStart={8}>
 							{t('Yes_unban_user')}
 						</Label>
 					</Box>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx
index 37ee345633078..535b5d3f79ba3 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/EditInviteLink.tsx
@@ -72,7 +72,7 @@ const EditInviteLink = ({ daysAndMaxUses, onClickNewLink }: EditInviteLinkProps)
 					/>
 				</FieldRow>
 			</Field>
-			<Box mbs={8}>
+			<Box marginBlockStart={8}>
 				<Button loading={isSubmitting} disabled={!isDirty} primary onClick={handleSubmit(onClickNewLink)}>
 					{t('Generate_New_Link')}
 				</Button>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
index 64c65305f0b9e..e7589907517a4 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
@@ -28,13 +28,13 @@ const InviteLink = ({ linkText, captionText, onClickEdit }: InviteLinkProps) =>
 					)}
 				</FieldRow>
 				{captionText && (
-					<Box pb={8} color='annotation' fontScale='c2'>
+					<Box paddingBlock={8} color='annotation' fontScale='c2'>
 						{captionText}
 					</Box>
 				)}
 			</Field>
 			{onClickEdit && (
-				<Box mbs={8}>
+				<Box marginBlockStart={8}>
 					<Button onClick={onClickEdit}>{t('Edit_Invite')}</Button>
 				</Box>
 			)}
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersLoading.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersLoading.tsx
index 462dd8d2d4ac0..b3fbe66bdcd2d 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersLoading.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsersLoading.tsx
@@ -9,7 +9,7 @@ type InviteUsersProps = {
 
 const InviteUsersLoading = ({ onClose, onClickBack: onClickBackMembers }: InviteUsersProps) => (
 	<InviteUsersWrapper onClose={onClose} onClickBack={onClickBackMembers}>
-		<Skeleton w='full' />
+		<Skeleton width='full' />
 	</InviteUsersWrapper>
 );
 
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
index 511fcff230e7e..d565f8713fcc4 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembers.tsx
@@ -156,7 +156,7 @@ const RoomMembers = ({
 					onChange={setText}
 					endAddon={<Icon name='magnifier' size='x20' />}
 				/>
-				<Box w='x144' mis={8}>
+				<Box width='x144' marginInlineStart={8}>
 					<Select
 						aria-controls={isSuccess ? membersListId : undefined}
 						options={options}
@@ -165,28 +165,28 @@ const RoomMembers = ({
 					/>
 				</Box>
 			</ContextualbarSection>
-			<ContextualbarContent p={0} pb={12}>
+			<ContextualbarContent padding={0} paddingBlock={12}>
 				<ResultsLiveRegion shouldAnnounce={isSuccess} itemCount={members.length} />
 				{isPending && (
-					<Box pi={24} pb={12}>
+					<Box paddingInline={24} paddingBlock={12}>
 						<Throbber size='x12' />
 					</Box>
 				)}
 				{error && (
-					<Box pi={24} pb={12}>
+					<Box paddingInline={24} paddingBlock={12}>
 						<Callout type='danger'>{error.message}</Callout>
 					</Box>
 				)}
 				{isSuccess && (
 					<>
 						{members.length > 0 && (
-							<Box pi={24} pb={12}>
+							<Box paddingInline={24} paddingBlock={12}>
 								<Box is='span' color='hint' fontScale='p2'>
 									{t('Showing_current_of_total', { current: members.length, total })}
 								</Box>
 							</Box>
 						)}
-						<Box id={membersListId} w='full' h='full' overflow='hidden' flexShrink={1}>
+						<Box id={membersListId} width='full' height='full' overflow='hidden' flexShrink={1}>
 							{members.length <= 0 && <ContextualbarEmptyContent title={t('No_members_found')} />}
 							{members.length > 0 && (
 								<VirtualizedScrollbars>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx
index 0c8742b0be6a3..be38c4c0c23f4 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/RoomMembersItem.tsx
@@ -98,7 +98,7 @@ const RoomMembersItem = ({
 			</OptionContent>
 			{subscription?.status === 'INVITED' && (
 				<OptionColumn>
-					<InvitationBadge mbs={2} size='x20' invitationDate={subscription.ts} />
+					<InvitationBadge marginBlockStart={2} size='x20' invitationDate={subscription.ts} />
 				</OptionColumn>
 			)}
 			<OptionMenu onClick={preventPropagation}>
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx b/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx
index b133c5828ab85..f41b9dd9334d8 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/ThreadList.tsx
@@ -136,7 +136,7 @@ const ThreadList = () => {
 					value={searchText}
 					onChange={handleSearchTextChange}
 				/>
-				<Box w='x144' mis={8}>
+				<Box width='x144' marginInlineStart={8}>
 					<Select
 						aria-controls={isSuccess ? threadListId : undefined}
 						options={typeOptions}
@@ -148,17 +148,17 @@ const ThreadList = () => {
 			<ContextualbarContent paddingInline={0} ref={ref}>
 				<ResultsLiveRegion shouldAnnounce={isSuccess} itemCount={itemCount} />
 				{isPending && (
-					<Box pi={24} pb={12}>
+					<Box paddingInline={24} paddingBlock={12}>
 						<Throbber size='x12' />
 					</Box>
 				)}
 				{error && (
-					<Callout mi={24} type='danger'>
+					<Callout marginInline={24} type='danger'>
 						{getErrorMessage(error, t('Something_went_wrong'))}
 					</Callout>
 				)}
 				{isSuccess && (
-					<Box id={threadListId} w='full' h='full' overflow='hidden' flexShrink={1}>
+					<Box id={threadListId} width='full' height='full' overflow='hidden' flexShrink={1}>
 						{items.length === 0 && <ContextualbarEmptyContent title={t('No_Threads')} />}
 						{items.length > 0 && (
 							<VirtualizedScrollbars>
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx
index 9aea6bbb55041..97261cddca637 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx
@@ -128,7 +128,7 @@ const ThreadChat = ({ mainMessage }: ThreadChatProps) => {
 										onChange={() => setSendToChannel((checked) => !checked)}
 										name='alsoSendThreadToChannel'
 									/>
-									<FieldLabel mis='x8' htmlFor={sendToChannelID} color='annotation' fontScale='p2'>
+									<FieldLabel marginInlineStart='x8' htmlFor={sendToChannelID} color='annotation' fontScale='p2'>
 										{t('Also_send_to_channel')}
 									</FieldLabel>
 								</FieldRow>
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx
index ec7181fbf9fe9..bd0815472c6b0 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadListMessage.tsx
@@ -59,7 +59,7 @@ const ThreadListMessage = ({
 
 	return (
 		<Box className={className}>
-			<Box pbs={16} is={Message} {...props}>
+			<Box paddingBlockStart={16} is={Message} {...props}>
 				<MessageLeftContainer>
 					<MessageAvatar emoji={emoji ? <Emoji emojiHandle={emoji} fillContainer /> : undefined} username={username} size='x36' />
 				</MessageLeftContainer>
@@ -74,7 +74,7 @@ const ThreadListMessage = ({
 				<MessageContainerFixed>
 					<ThreadMetricsFollow following={following} mid={_id} rid={rid} mention={false} unread={false} all={false} />
 					{unread && (
-						<Box mbs={24}>
+						<Box marginBlockStart={24}>
 							<ThreadMetricsUnreadBadge unread={unread} mention={mention} all={all} />
 						</Box>
 					)}
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadSkeleton.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadSkeleton.tsx
index 1804355f782e6..84c2e1e6c9944 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadSkeleton.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadSkeleton.tsx
@@ -2,7 +2,7 @@ import { Box, Skeleton } from '@rocket.chat/fuselage';
 
 const ThreadSkeleton = () => {
 	return (
-		<Box p={24}>
+		<Box padding={24}>
 			<Skeleton width='32px' height='32px' variant='rect' /> <Skeleton />
 			{Array(5)
 				.fill(5)
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/ReportUserModal.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/ReportUserModal.tsx
index 243008795d22f..b04bd734f8878 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/ReportUserModal.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/ReportUserModal.tsx
@@ -42,9 +42,9 @@ const ReportUserModal = ({ username, displayName, onConfirm, onClose }: ReportUs
 			onCancel={onClose}
 			confirmText={t('Report')}
 		>
-			<Box mbe={16} display='flex' alignItems='center'>
+			<Box marginBlockEnd={16} display='flex' alignItems='center'>
 				<UserAvatar username={username} />
-				<Box mis={8} fontScale='p2b'>
+				<Box marginInlineStart={8} fontScale='p2b'>
 					{displayName}
 				</Box>
 			</Box>
@@ -58,7 +58,7 @@ const ReportUserModal = ({ username, displayName, onConfirm, onClose }: ReportUs
 							rows={3}
 							{...register('reasonForReport', { required: t('Required_field', { field: t('Reason_for_report') }) })}
 							width='full'
-							mbe={4}
+							marginBlockEnd={4}
 							aria-required='true'
 							aria-describedby={`${reasonForReportId}-description ${reasonForReportId}-error`}
 						/>
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
index b691c8fc28f58..41d727a131a94 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoActions.tsx
@@ -66,7 +66,7 @@ const UserInfoActions = ({ user, rid, isInvited, backToList }: UserInfoActionsPr
 	}, [actionsDefinition, menu]);
 
 	if (isPending) {
-		return <Skeleton w='full' />;
+		return <Skeleton width='full' />;
 	}
 	return <ButtonGroup align='center'>{actions}</ButtonGroup>;
 };
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx
index 0f756f3f711f8..79bf96e4f5cc0 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx
@@ -108,7 +108,7 @@ const UserInfoWithData = ({ uid, username, rid, invitationDate, onClose, onClick
 			)}
 
 			{isError && !user && (
-				<ContextualbarContent pb={16}>
+				<ContextualbarContent paddingBlock={16}>
 					<Callout type='danger'>{t('User_not_found')}</Callout>
 				</ContextualbarContent>
 			)}
diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfBlockModal.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfBlockModal.tsx
index f9b9262fb7fcf..e8adff60f8fa6 100644
--- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfBlockModal.tsx
+++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfBlockModal.tsx
@@ -9,7 +9,7 @@ const VideoConfBlockModal = ({ onClose, onConfirm }: { onClose: () => void; onCo
 
 	const confirmButtonContent = (
 		<Box>
-			<Icon mie={8} size='x20' name='new-window' />
+			<Icon marginInlineEnd={8} size='x20' name='new-window' />
 			{t('Open_call')}
 		</Box>
 	);
@@ -31,7 +31,7 @@ const VideoConfBlockModal = ({ onClose, onConfirm }: { onClose: () => void; onCo
 			onClose={onClose}
 		>
 			<>
-				<Box mbe={24}>{t('Your_web_browser_blocked_Rocket_Chat_from_opening_tab')}</Box>
+				<Box marginBlockEnd={24}>{t('Your_web_browser_blocked_Rocket_Chat_from_opening_tab')}</Box>
 				<Box>
 					{t('To_prevent_seeing_this_message_again_allow_popups_from_workspace_URL')}
 					<Box is='span' fontWeight={700}>
diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfConfigModal.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfConfigModal.tsx
index 96c954973f0c2..bf2c9d5b7ab35 100644
--- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfConfigModal.tsx
+++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfConfigModal.tsx
@@ -39,7 +39,7 @@ const VideoConfConfigModal = ({ onClose, onConfirm, isAdmin }: VideoConfConfigMo
 				<ModalHeroImage maxHeight='initial' src='/images/conf-call-config.svg' />
 				<Box fontScale='h3'>{t('Premium_capabilities')}</Box>
 				<Box withRichContent>
-					<Box is='ul' pis={24}>
+					<Box is='ul' paddingInlineStart={24}>
 						<li>{t('Ringtones_and_visual_indicators_notify_people_of_incoming_calls')}</li>
 						<li>{t('Call_history_provides_a_record_of_when_calls_took_place_and_who_joined')}</li>
 					</Box>
@@ -56,10 +56,10 @@ const VideoConfConfigModal = ({ onClose, onConfirm, isAdmin }: VideoConfConfigMo
 						{t('Secure_SaaS_solution')} {t('A_cloud-based_platform_for_those_needing_a_plug-and-play_app')}
 					</Callout>
 				</Margins>
-				<Box fontScale='h3' mbs={24}>
+				<Box fontScale='h3' marginBlockStart={24}>
 					{t('Required_action')}
 				</Box>
-				<Callout mbs={12} mbe={24} title={t('Missing_configuration')} type='warning'>
+				<Callout marginBlockStart={12} marginBlockEnd={24} title={t('Missing_configuration')} type='warning'>
 					{isAdmin
 						? t('An_app_needs_to_be_installed_and_configured')
 						: t('A_workspace_admin_needs_to_install_and_configure_a_conference_call_app')}
diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx
index 16f8fa706b444..84741127b9939 100644
--- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx
+++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfList.tsx
@@ -43,7 +43,7 @@ const VideoConfList = ({ onClose, total, videoConfs, loading, error, reload, loa
 			</ContextualbarHeader>
 			<ContextualbarContent paddingInline={0} ref={ref}>
 				{loading && (
-					<Box pi={24} pb={12}>
+					<Box paddingInline={24} paddingBlock={12}>
 						<Throbber size='x12' />
 					</Box>
 				)}
diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx
index 4a8f9a77fb84f..b1d7ae715bea0 100644
--- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx
+++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx
@@ -76,7 +76,7 @@ const VideoConfListItem = ({
 			borderBlockEndColor='stroke-extra-light'
 			borderBlockEndStyle='solid'
 			className={[...className, hovered].filter(Boolean)}
-			pb={8}
+			paddingBlock={8}
 		>
 			<Message {...props}>
 				<MessageLeftContainer>{username && <UserAvatar username={username} size='x36' />}</MessageLeftContainer>
@@ -103,7 +103,7 @@ const VideoConfListItem = ({
 							)}
 						</ButtonGroup>
 						{joinedUsers.length > 0 && (
-							<Box mis={8} fontScale='c1' display='flex' alignItems='center'>
+							<Box marginInlineStart={8} fontScale='c1' display='flex' alignItems='center'>
 								<AvatarStack>
 									{joinedUsers.map(
 										(user, index) =>
@@ -119,7 +119,7 @@ const VideoConfListItem = ({
 											),
 									)}
 								</AvatarStack>
-								<Box mis={4}>
+								<Box marginInlineStart={4}>
 									{joinedUsers.length > VIDEOCONF_STACK_MAX_USERS
 										? t('__usersCount__joined', { count: joinedUsers.length - VIDEOCONF_STACK_MAX_USERS })
 										: t('joined')}
@@ -127,7 +127,7 @@ const VideoConfListItem = ({
 							</Box>
 						)}
 						{joinedUsers.length === 0 && !endedAt && (
-							<Box mis={8} fontScale='c1'>
+							<Box marginInlineStart={8} fontScale='c1'>
 								{t('Be_the_first_to_join')}
 							</Box>
 						)}
diff --git a/apps/meteor/client/views/room/layout/RoomLayout.tsx b/apps/meteor/client/views/room/layout/RoomLayout.tsx
index fa3cce1881906..41fc2227b5ca5 100644
--- a/apps/meteor/client/views/room/layout/RoomLayout.tsx
+++ b/apps/meteor/client/views/room/layout/RoomLayout.tsx
@@ -57,7 +57,7 @@ const RoomLayout = ({ header, body, footer, aside, ...props }: RoomLayoutProps)
 				[layout, contextualbarPosition, contextualbarSize],
 			)}
 		>
-			<Box h='full' w='full' display='flex' flexDirection='column' bg='room' {...props} ref={ref}>
+			<Box height='full' width='full' display='flex' flexDirection='column' backgroundColor='room' {...props} ref={ref}>
 				<Suspense fallback={<HeaderSkeleton />}>{header}</Suspense>
 				<Box display='flex' flexGrow={1} overflow='hidden' height='full' position='relative'>
 					<Box display={hideBody ? 'none' : 'flex'} flexDirection='column' flexGrow={1} minWidth={0}>
diff --git a/apps/meteor/client/views/room/modals/E2EEModals/DisableE2EEModal.tsx b/apps/meteor/client/views/room/modals/E2EEModals/DisableE2EEModal.tsx
index 2fe9155e17f7b..3da0332f81ff7 100644
--- a/apps/meteor/client/views/room/modals/E2EEModals/DisableE2EEModal.tsx
+++ b/apps/meteor/client/views/room/modals/E2EEModals/DisableE2EEModal.tsx
@@ -24,18 +24,18 @@ const DisableE2EEModal = ({ onConfirm, onCancel, roomType, canResetRoomKey, onRe
 			onDismiss={() => undefined}
 			annotation={t('Proceed_with_caution')}
 		>
-			<Box mbe={16} is='p'>
+			<Box marginBlockEnd={16} is='p'>
 				<Trans i18nKey='E2E_disable_encryption_description' tOptions={{ roomType }} />
 			</Box>
 
 			{canResetRoomKey && (
 				<>
-					<Box mbe={16} is='p'>
+					<Box marginBlockEnd={16} is='p'>
 						{t('E2E_disable_encryption_reset_keys_description')}
 					</Box>
 					<Accordion>
 						<AccordionItem title={t('E2E_reset_encryption_keys')}>
-							<Box mbe={16} is='p'>
+							<Box marginBlockEnd={16} is='p'>
 								{t('E2E_reset_encryption_keys_description')}
 							</Box>
 							<Button secondary danger small onClick={onResetRoomKey}>
diff --git a/apps/meteor/client/views/room/modals/E2EEModals/EnableE2EEModal.tsx b/apps/meteor/client/views/room/modals/E2EEModals/EnableE2EEModal.tsx
index c2710fb9cb5fc..40a8ce815c85f 100644
--- a/apps/meteor/client/views/room/modals/E2EEModals/EnableE2EEModal.tsx
+++ b/apps/meteor/client/views/room/modals/E2EEModals/EnableE2EEModal.tsx
@@ -20,7 +20,7 @@ const EnableE2EEModal = ({ onConfirm, onClose, roomType }: EnableE2EEModalProps)
 			onConfirm={onConfirm}
 			onCancel={onClose}
 		>
-			<Box mbe={16} is='p'>
+			<Box marginBlockEnd={16} is='p'>
 				{t('E2E_enable_encryption_description', { roomType })}
 			</Box>
 		</GenericModal>
diff --git a/apps/meteor/client/views/room/modals/E2EEModals/ResetKeysE2EEModal.tsx b/apps/meteor/client/views/room/modals/E2EEModals/ResetKeysE2EEModal.tsx
index b25adf4a183ea..08cb4c72508c3 100644
--- a/apps/meteor/client/views/room/modals/E2EEModals/ResetKeysE2EEModal.tsx
+++ b/apps/meteor/client/views/room/modals/E2EEModals/ResetKeysE2EEModal.tsx
@@ -48,7 +48,7 @@ const ResetKeysE2EEModal = ({ roomType, roomId, onCancel }: ResetKeysE2EEModalPr
 			onConfirm={handleResetRoomKey}
 			onDismiss={() => undefined}
 		>
-			<Box mbe={16} is='p'>
+			<Box marginBlockEnd={16} is='p'>
 				<Trans i18nKey='E2E_reset_encryption_keys_modal_description' tOptions={{ roomType }}>
 					Resetting E2EE keys is only recommend if no {roomType} member has a valid key to regain access to the previously encrypted
 					content. All members may lose access to previously encrypted content.
diff --git a/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx b/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx
index a0a17fb80532b..c30ee29021a31 100644
--- a/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx
+++ b/apps/meteor/client/views/room/modals/FileUploadModal/FileUploadModal.tsx
@@ -72,7 +72,7 @@ const FileUploadModal = ({ onClose, file, fileName, fileAltText = '', onSubmit }
 					<ModalClose tabIndex={-1} onClick={onClose} />
 				</ModalHeader>
 				<ModalContent>
-					<Box display='flex' maxHeight='x360' w='full' justifyContent='center' alignContent='center' mbe={16}>
+					<Box display='flex' maxHeight='x360' width='full' justifyContent='center' alignContent='center' marginBlockEnd={16}>
 						<FilePreview file={file} altText={fileAltText} />
 					</Box>
 					<FieldGroup>
diff --git a/apps/meteor/client/views/room/modals/FileUploadModal/GenericPreview.tsx b/apps/meteor/client/views/room/modals/FileUploadModal/GenericPreview.tsx
index 41774f3ef66ad..b55a1ba9fb964 100644
--- a/apps/meteor/client/views/room/modals/FileUploadModal/GenericPreview.tsx
+++ b/apps/meteor/client/views/room/modals/FileUploadModal/GenericPreview.tsx
@@ -5,8 +5,8 @@ import { formatBytes } from '../../../../lib/utils/formatBytes';
 export type GenericPreviewProps = { file: File };
 
 const GenericPreview = ({ file }: GenericPreviewProps) => (
-	<Box display='flex' alignItems='center' w='full' fontScale='h4'>
-		<Icon name='file' size='x24' mis={-2} mie={4} />
+	<Box display='flex' alignItems='center' width='full' fontScale='h4'>
+		<Icon name='file' size='x24' marginInlineStart={-2} marginInlineEnd={4} />
 		{`${file.name} - ${formatBytes(file.size, 2)}`}
 	</Box>
 );
diff --git a/apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx b/apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx
index f782888e23a46..0587102d79ec0 100644
--- a/apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx
+++ b/apps/meteor/client/views/room/modals/FileUploadModal/MediaPreview.tsx
@@ -24,8 +24,8 @@ const MediaPreview = ({ file, fileType, altText }: MediaPreviewProps) => {
 
 	if (typeof url !== 'string') {
 		return (
-			<Box display='flex' alignItems='center' w='full'>
-				<Icon name='image' size='x24' mie={4} />
+			<Box display='flex' alignItems='center' width='full'>
+				<Icon name='image' size='x24' marginInlineEnd={4} />
 				{t('FileUpload_Cannot_preview_file')}
 			</Box>
 		);
@@ -37,7 +37,7 @@ const MediaPreview = ({ file, fileType, altText }: MediaPreviewProps) => {
 
 	if (fileType === FilePreviewType.VIDEO) {
 		return (
-			<Box is='video' w='full' controls>
+			<Box is='video' width='full' controls>
 				<source src={url} type={userAgentMIMETypeFallback(file.type)} />
 				{t('Browser_does_not_support_video_element')}
 			</Box>
diff --git a/apps/meteor/client/views/room/modals/FileUploadModal/PreviewSkeleton.tsx b/apps/meteor/client/views/room/modals/FileUploadModal/PreviewSkeleton.tsx
index 5f317ba42ffdc..4a0c9320fb3b5 100644
--- a/apps/meteor/client/views/room/modals/FileUploadModal/PreviewSkeleton.tsx
+++ b/apps/meteor/client/views/room/modals/FileUploadModal/PreviewSkeleton.tsx
@@ -1,5 +1,5 @@
 import { Skeleton } from '@rocket.chat/fuselage';
 
-const PreviewSkeleton = () => <Skeleton variant='rect' w='full' h='x200' />;
+const PreviewSkeleton = () => <Skeleton variant='rect' width='full' height='x200' />;
 
 export default PreviewSkeleton;
diff --git a/apps/meteor/client/views/room/modals/PinMessageModal/PinMessageModal.tsx b/apps/meteor/client/views/room/modals/PinMessageModal/PinMessageModal.tsx
index ccab1000eb993..4fe09b2c0554b 100644
--- a/apps/meteor/client/views/room/modals/PinMessageModal/PinMessageModal.tsx
+++ b/apps/meteor/client/views/room/modals/PinMessageModal/PinMessageModal.tsx
@@ -27,13 +27,13 @@ const PinMessageModal = ({ message, ...props }: PinMessageModalProps) => {
 
 	return (
 		<GenericModal icon='pin' title={t('Pin_Message')} variant='warning' confirmText={t('Yes_pin_message')} {...props}>
-			<Box mbe={16} is='p'>
+			<Box marginBlockEnd={16} is='p'>
 				{t('Are_you_sure_you_want_to_pin_this_message')}
 			</Box>
 			<AttachmentProvider>
 				<QuoteAttachment attachment={attachment} />
 			</AttachmentProvider>
-			<Box is='p' fontScale='c1' mbs={16}>
+			<Box is='p' fontScale='c1' marginBlockStart={16}>
 				{t('Pinned_messages_are_visible_to_everyone')}
 			</Box>
 			<Box is='p' fontScale='c1'>
diff --git a/apps/meteor/client/views/room/modals/ReactionListModal/ReactionUserTag.tsx b/apps/meteor/client/views/room/modals/ReactionListModal/ReactionUserTag.tsx
index 776bddfd57a3f..9fd137a0c651c 100644
--- a/apps/meteor/client/views/room/modals/ReactionListModal/ReactionUserTag.tsx
+++ b/apps/meteor/client/views/room/modals/ReactionListModal/ReactionUserTag.tsx
@@ -3,7 +3,7 @@ import { Box, Tag } from '@rocket.chat/fuselage';
 export type ReactionUserTagProps = { displayName: string };
 
 const ReactionUserTag = ({ displayName }: ReactionUserTagProps) => (
-	<Box mie={4} mbe={4}>
+	<Box marginInlineEnd={4} marginBlockEnd={4}>
 		<Tag variant='primary'>{displayName}</Tag>
 	</Box>
 );
diff --git a/apps/meteor/client/views/room/modals/ReactionListModal/Reactions.tsx b/apps/meteor/client/views/room/modals/ReactionListModal/Reactions.tsx
index 7120c028a930a..38437cddb3a47 100644
--- a/apps/meteor/client/views/room/modals/ReactionListModal/Reactions.tsx
+++ b/apps/meteor/client/views/room/modals/ReactionListModal/Reactions.tsx
@@ -13,9 +13,9 @@ const Reactions = ({ reactions }: ReactionsProps) => {
 	return (
 		<Box display='flex' flexDirection='column'>
 			{Object.entries(reactions).map(([reaction, { names = [], usernames }]) => (
-				<Box key={reaction} display='flex' alignItems='center' flexDirection='row' overflowX='hidden' mb={8}>
+				<Box key={reaction} display='flex' alignItems='center' flexDirection='row' overflowX='hidden' marginBlock={8}>
 					<Emoji emojiHandle={reaction} />
-					<Box display='flex' flexWrap='wrap' paddingBlock={4} mis={4}>
+					<Box display='flex' flexWrap='wrap' paddingBlock={4} marginInlineStart={4}>
 						{usernames.map((username, i: number) => (
 							<ReactionUserTag key={username} displayName={useRealName ? names[i] || username : username} />
 						))}
diff --git a/apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptRow.tsx b/apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptRow.tsx
index e8c754249aaed..8f33533fe68e4 100644
--- a/apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptRow.tsx
+++ b/apps/meteor/client/views/room/modals/ReadReceiptsModal/ReadReceiptRow.tsx
@@ -10,10 +10,10 @@ const ReadReceiptRow = ({ user, ts }: IReadReceiptWithUser) => {
 	const formatDateAndTime = useFormatDateAndTime({ withSeconds: true });
 
 	return (
-		<Box role='listitem' display='flex' flexDirection='row' justifyContent='space-between' alignItems='center' mbe={8}>
+		<Box role='listitem' display='flex' flexDirection='row' justifyContent='space-between' alignItems='center' marginBlockEnd={8}>
 			<Box display='flex' flexDirection='row' alignItems='center'>
 				<UserAvatar username={user?.username || ''} size='x24' />
-				<Box is='span' mis={8}>
+				<Box is='span' marginInlineStart={8}>
 					{displayName}
 				</Box>
 			</Box>
diff --git a/apps/meteor/client/views/room/modals/ReportMessageModal/ReportMessageModal.tsx b/apps/meteor/client/views/room/modals/ReportMessageModal/ReportMessageModal.tsx
index a1f8ec637d9ad..5f4daadc0138f 100644
--- a/apps/meteor/client/views/room/modals/ReportMessageModal/ReportMessageModal.tsx
+++ b/apps/meteor/client/views/room/modals/ReportMessageModal/ReportMessageModal.tsx
@@ -59,7 +59,7 @@ const ReportMessageModal = ({ message, onClose }: ReportMessageModalProps) => {
 			onCancel={onClose}
 			confirmText={t('Report')}
 		>
-			<Box mbe={24} className={wordBreak}>
+			<Box marginBlockEnd={24} className={wordBreak}>
 				{message.md ? <MessageContentBody md={message.md} /> : <MarkdownText variant='inline' parseEmoji content={message.msg} />}
 			</Box>
 			<FieldGroup>
diff --git a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/FilePickerBreadcrumbs.tsx b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/FilePickerBreadcrumbs.tsx
index df8de9b90c0c5..e2453eb93629e 100644
--- a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/FilePickerBreadcrumbs.tsx
+++ b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/FilePickerBreadcrumbs.tsx
@@ -12,7 +12,7 @@ const FilePickerBreadcrumbs = ({ parentFolders, handleBreadcrumb, handleBack }:
 	const { t } = useTranslation();
 
 	return (
-		<Box display='flex' alignItems='center' overflowX='auto' mie={8}>
+		<Box display='flex' alignItems='center' overflowX='auto' marginInlineEnd={8}>
 			<IconButton disabled={parentFolders.length === 0} title={t('Back')} aria-label='back' icon='arrow-back' small onClick={handleBack} />
 			<IconButton title={t('Root')} aria-label='home' icon='home' small data-index={-1} onClick={handleBreadcrumb} />
 			{parentFolders?.map((parentFolder, index) => (
diff --git a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/WebdavFilePickerGrid.tsx b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/WebdavFilePickerGrid.tsx
index 99d70a9c2d4dd..bcf575192e3ff 100644
--- a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/WebdavFilePickerGrid.tsx
+++ b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerGrid/WebdavFilePickerGrid.tsx
@@ -26,7 +26,7 @@ const WebdavFilePickerGrid = ({ webdavNodes, onNodeClick, isLoading }: WebdavFil
 				Array(6)
 					.fill('')
 					.map((_, index) => (
-						<WebdavFilePickerGridItem p={4} key={index}>
+						<WebdavFilePickerGridItem padding={4} key={index}>
 							<Skeleton variant='rect' width='full' height='full' />
 						</WebdavFilePickerGridItem>
 					))}
@@ -36,7 +36,7 @@ const WebdavFilePickerGrid = ({ webdavNodes, onNodeClick, isLoading }: WebdavFil
 
 					return (
 						<WebdavFilePickerGridItem key={index} className={hoverStyle} onClick={(): void => onNodeClick(webdavNode)}>
-							<Icon mie={4} size='x72' name={icon} />
+							<Icon marginInlineEnd={4} size='x72' name={icon} />
 							<Box textAlign='center'>{webdavNode.basename}</Box>
 						</WebdavFilePickerGridItem>
 					);
diff --git a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerTable.tsx b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerTable.tsx
index 16ce02dbfe62a..eafbeea1cbc5e 100644
--- a/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerTable.tsx
+++ b/apps/meteor/client/views/room/webdav/WebdavFilePickerModal/WebdavFilePickerTable.tsx
@@ -68,8 +68,8 @@ const WebdavFilePickerTable = ({ webdavNodes, sortBy, sortDirection, onSort, onN
 
 								return (
 									<GenericTableRow key={index} onClick={(): void => onNodeClick(webdavNode)} tabIndex={index} role='link' action>
-										<GenericTableCell fontScale='p2' color='default' w='x200' display='flex' alignItems='center'>
-											<Icon mie={4} size='x20' name={icon} />
+										<GenericTableCell fontScale='p2' color='default' width='x200' display='flex' alignItems='center'>
+											<Icon marginInlineEnd={4} size='x20' name={icon} />
 											<Box withTruncatedText>{webdavNode.basename}</Box>
 										</GenericTableCell>
 										<GenericTableCell fontScale='p2' color='default'>
diff --git a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
index a2ed06e110e50..81beed25d6b82 100644
--- a/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
+++ b/apps/meteor/client/views/root/MainLayout/LayoutWithSidebar.tsx
@@ -58,7 +58,7 @@ const LayoutWithSidebar = ({ children }: LayoutWithSidebarProps) => {
 			<AccessibilityShortcut />
 			{!embeddedLayout && <NavBar />}
 			<Box
-				bg='surface-light'
+				backgroundColor='surface-light'
 				id='rocket-chat'
 				className={[embeddedLayout ? 'embedded-view' : undefined, 'menu-nav'].filter(Boolean).join(' ')}
 			>
diff --git a/apps/meteor/client/views/root/MainLayout/RegisterUsername.tsx b/apps/meteor/client/views/root/MainLayout/RegisterUsername.tsx
index 8840a270bb5d1..5282c4aff2f0b 100644
--- a/apps/meteor/client/views/root/MainLayout/RegisterUsername.tsx
+++ b/apps/meteor/client/views/root/MainLayout/RegisterUsername.tsx
@@ -94,7 +94,7 @@ const RegisterUsername = () => {
 	return (
 		<VerticalWizardLayout
 			background={customBackground}
-			logo={!hideLogo && customLogo ? <Box is='img' maxHeight='x40' mi='neg-x8' src={customLogo} alt='Logo' /> : <></>}
+			logo={!hideLogo && customLogo ? <Box is='img' maxHeight='x40' marginInline='neg-x8' src={customLogo} alt='Logo' /> : <></>}
 		>
 			<Form aria-labelledby={formLabelId} onSubmit={handleSubmit((data) => registerUsernameMutation.mutate(data))}>
 				<FormHeader>
diff --git a/apps/meteor/client/views/root/MainLayout/TwoFactorAuthSetupCheck.tsx b/apps/meteor/client/views/root/MainLayout/TwoFactorAuthSetupCheck.tsx
index 068288f4b8124..8aa5bdbd64317 100644
--- a/apps/meteor/client/views/root/MainLayout/TwoFactorAuthSetupCheck.tsx
+++ b/apps/meteor/client/views/root/MainLayout/TwoFactorAuthSetupCheck.tsx
@@ -17,7 +17,7 @@ const TwoFactorAuthSetupCheck = ({ children }: TwoFactorAuthSetupCheckProps) =>
 
 	if (require2faSetup) {
 		return (
-			<Box bg='surface-light' id='rocket-chat' className={embeddedLayout ? 'embedded-view' : undefined}>
+			<Box backgroundColor='surface-light' id='rocket-chat' className={embeddedLayout ? 'embedded-view' : undefined}>
 				<MainContent>
 					<AccountSecurityPage />
 				</MainContent>
diff --git a/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTable.tsx b/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTable.tsx
index 6015dbc1caaa5..c570f7f42cada 100644
--- a/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTable.tsx
+++ b/apps/meteor/client/views/teams/ChannelDesertionTable/ChannelDesertionTable.tsx
@@ -56,12 +56,12 @@ const ChannelDesertionTable = ({
 	}, [rooms, sortBy, sortDirection]);
 
 	return (
-		<Box display='flex' flexDirection='column' height='x200' mbs={24}>
+		<Box display='flex' flexDirection='column' height='x200' marginBlockStart={24}>
 			<GenericTable fixed={false}>
 				<GenericTableHeader>
 					<GenericTableHeaderCell key='name' sort='name' onClick={setSort} direction={sortDirection} active={sortBy === 'name'}>
 						<CheckBox indeterminate={indeterminate} checked={checked} onChange={onToggleAllRooms} />
-						<Box mi={8}>{t('Channel_name')}</Box>
+						<Box marginInline={8}>{t('Channel_name')}</Box>
 					</GenericTableHeaderCell>
 					<GenericTableHeaderCell key='ts' sort='ts' onClick={setSort} direction={sortDirection} active={sortBy === 'ts'}>
 						<Box width='100%' textAlign='end'>
diff --git a/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/AddExistingModal.tsx b/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/AddExistingModal.tsx
index 6f42d89d61e43..ac47ad4518126 100644
--- a/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/AddExistingModal.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/AddExistingModal.tsx
@@ -71,7 +71,7 @@ const AddExistingModal = ({ teamId, onClose, reload }: AddExistingModalProps) =>
 				<ModalClose onClick={onClose} />
 			</ModalHeader>
 			<ModalContent>
-				<Field mbe={24}>
+				<Field marginBlockEnd={24}>
 					<FieldLabel>{t('Channels')}</FieldLabel>
 					<Controller
 						control={control}
diff --git a/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/RoomsAvailableForTeamsAutoComplete.tsx b/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/RoomsAvailableForTeamsAutoComplete.tsx
index 2bb8e9e9f41e9..f845a0d2e3a7b 100644
--- a/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/RoomsAvailableForTeamsAutoComplete.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/RoomsAvailableForTeamsAutoComplete.tsx
@@ -46,9 +46,9 @@ const RoomsAvailableForTeamsAutoComplete = ({ value, onChange, ...props }: Rooms
 			filter={filter}
 			setFilter={setFilter}
 			renderSelected={({ selected: { value, label }, onRemove }) => (
-				<Chip key={value} height='x20' value={value} onClick={onRemove} mb={2} mie={4}>
+				<Chip key={value} height='x20' value={value} onClick={onRemove} marginBlock={2} marginInlineEnd={4}>
 					<RoomAvatar size='x20' room={{ ...label, type: label?.type || 'c', _id: value }} />
-					<Box is='span' margin='none' mis={4}>
+					<Box is='span' margin='none' marginInlineStart={4}>
 						{label.name}
 					</Box>
 				</Chip>
diff --git a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelItem.tsx b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelItem.tsx
index 6d306c6e3a7b9..a15198fa975c1 100644
--- a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelItem.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannelItem.tsx
@@ -62,7 +62,7 @@ const TeamsChannelItem = ({ room, mainRoom, onClickView, reload }: TeamsChannelI
 				<Box display='inline-flex' alignItems='center'>
 					{roomCoordinator.getRoomName(room.t, room)}{' '}
 					{room.teamDefault ? (
-						<Box mi={4}>
+						<Box marginInline={4}>
 							<Tag>{t('Team_Auto-join')}</Tag>
 						</Box>
 					) : (
diff --git a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx
index fc2d2a90c5e83..448419f353868 100644
--- a/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/channels/TeamsChannels.tsx
@@ -95,29 +95,29 @@ const TeamsChannels = ({
 					onChange={setText}
 					endAddon={<Icon name='magnifier' size='x20' />}
 				/>
-				<Box w='x144' mis={8}>
+				<Box width='x144' marginInlineStart={8}>
 					<Select onChange={(val) => setType(val as 'all' | 'autoJoin')} value={type} options={options} />
 				</Box>
 			</ContextualbarSection>
-			<ContextualbarContent p={12}>
+			<ContextualbarContent padding={12}>
 				{loading && (
-					<Box pi={24} pb={12}>
+					<Box paddingInline={24} paddingBlock={12}>
 						<Throbber size='x12' />
 					</Box>
 				)}
 				{!loading && channels.length === 0 && <ContextualbarEmptyContent title={t('No_channels_in_team')} />}
 				{!loading && channels.length > 0 && (
 					<>
-						<Box pi={18} pb={12}>
+						<Box paddingInline={18} paddingBlock={12}>
 							<Box is='span' color='hint' fontScale='p2'>
 								{t('Showing')}: {channels.length}
 							</Box>
 
-							<Box is='span' color='hint' fontScale='p2' mis={8}>
+							<Box is='span' color='hint' fontScale='p2' marginInlineStart={8}>
 								{t('Total')}: {total}
 							</Box>
 						</Box>
-						<Box w='full' h='full' role='list' overflow='hidden' flexShrink={1}>
+						<Box width='full' height='full' role='list' overflow='hidden' flexShrink={1}>
 							<VirtualizedScrollbars>
 								<Virtuoso
 									totalCount={total}
diff --git a/apps/meteor/client/views/teams/contextualBar/info/ConvertToChannelModal/ModalSteps/FirstStep.tsx b/apps/meteor/client/views/teams/contextualBar/info/ConvertToChannelModal/ModalSteps/FirstStep.tsx
index f34ae4de0dfd9..b9572b106cac6 100644
--- a/apps/meteor/client/views/teams/contextualBar/info/ConvertToChannelModal/ModalSteps/FirstStep.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/info/ConvertToChannelModal/ModalSteps/FirstStep.tsx
@@ -41,11 +41,11 @@ const FirstStep = ({
 			onConfirm={onConfirm}
 			{...props}
 		>
-			<Box mbe={24} fontScale='p2'>
+			<Box marginBlockEnd={24} fontScale='p2'>
 				{t('Select_the_teams_channels_you_would_like_to_delete')}
 			</Box>
 
-			<Box mbe={24} fontScale='p2'>
+			<Box marginBlockEnd={24} fontScale='p2'>
 				{t('Notice_that_public_channels_will_be_public_and_visible_to_everyone')}
 			</Box>
 
diff --git a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/ChannelDeletionTable.tsx b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/ChannelDeletionTable.tsx
index 163b1034f3321..2212c74f75c46 100644
--- a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/ChannelDeletionTable.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/ChannelDeletionTable/ChannelDeletionTable.tsx
@@ -43,7 +43,7 @@ const ChannelDeletionTable = ({ rooms, onChangeRoomSelection, selectedRooms, onT
 		<>
 			<GenericTableHeaderCell key='name' sort='name' onClick={setSort} direction={sortDirection} active={sortBy === 'name'}>
 				<CheckBox indeterminate={indeterminate} checked={checked} onChange={onToggleAllRooms} />
-				<Box mi={8}>{t('Channel_name')}</Box>
+				<Box marginInline={8}>{t('Channel_name')}</Box>
 			</GenericTableHeaderCell>
 			<GenericTableHeaderCell
 				key='usersCount'
@@ -60,7 +60,7 @@ const ChannelDeletionTable = ({ rooms, onChangeRoomSelection, selectedRooms, onT
 	);
 
 	return (
-		<Box display='flex' flexDirection='column' height='x200' mbs={24}>
+		<Box display='flex' flexDirection='column' height='x200' marginBlockStart={24}>
 			<GenericTable>
 				<GenericTableHeader>{headers}</GenericTableHeader>
 				<GenericTableBody>
diff --git a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamChannels.tsx b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamChannels.tsx
index d9b2160b4962a..22e689de78a46 100644
--- a/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamChannels.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/info/DeleteTeam/DeleteTeamChannels.tsx
@@ -33,7 +33,7 @@ const DeleteTeamChannels = ({
 			onClose={onCancel}
 			confirmText={t('Continue')}
 		>
-			<Box withRichContent mbe={16}>
+			<Box withRichContent marginBlockEnd={16}>
 				<Box is='span' color='status-font-on-danger' fontWeight='bold'>
 					{t('Team_Delete_Channel_modal_content_danger')}{' '}
 				</Box>
diff --git a/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.tsx b/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.tsx
index 4094b4c6d475d..52b3e66daf400 100644
--- a/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/info/TeamsInfo.tsx
@@ -50,9 +50,9 @@ const TeamsInfo = ({ room, onClickClose, onClickEdit, onClickViewChannels }: Tea
 				<ContextualbarTitle>{t('Teams_Info')}</ContextualbarTitle>
 				{onClickClose && <ContextualbarClose onClick={onClickClose} />}
 			</ContextualbarHeader>
-			<ContextualbarScrollableContent p={24}>
+			<ContextualbarScrollableContent padding={24}>
 				<InfoPanel>
-					<InfoPanelSection maxWidth='x332' mi='auto'>
+					<InfoPanelSection maxWidth='x332' marginInline='auto'>
 						<InfoPanelAvatar>
 							<RoomAvatar size='x332' room={room} />
 						</InfoPanelAvatar>
@@ -75,7 +75,7 @@ const TeamsInfo = ({ room, onClickClose, onClickEdit, onClickViewChannels }: Tea
 
 					<InfoPanelSection>
 						{room.archived && (
-							<Box mb={16}>
+							<Box marginBlock={16}>
 								<Callout type='warning'>{t('Room_archived')}</Callout>
 							</Box>
 						)}
diff --git a/apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersFirstStep.tsx b/apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersFirstStep.tsx
index e77dcacb4d265..2f9464be358c9 100644
--- a/apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersFirstStep.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/members/RemoveUsersModal/RemoveUsersFirstStep.tsx
@@ -41,7 +41,7 @@ const RemoveUsersFirstStep = ({
 			onConfirm={onConfirm}
 			{...props}
 		>
-			<Box mbe={24} fontScale='p2'>
+			<Box marginBlockEnd={24} fontScale='p2'>
 				{t('Select_the_channels_you_want_the_user_to_be_removed_from')}
 			</Box>
 			<ChannelDesertionTable
diff --git a/apps/meteor/server/lib/authorization/hasPermission.ts b/apps/meteor/server/lib/authorization/hasPermission.ts
index aef811ef3a6fd..2cf2fa5cb6412 100644
--- a/apps/meteor/server/lib/authorization/hasPermission.ts
+++ b/apps/meteor/server/lib/authorization/hasPermission.ts
@@ -2,18 +2,23 @@ import { Authorization } from '@rocket.chat/core-services';
 import type { UserWithRoles } from '@rocket.chat/core-services';
 import type { IUser, IPermission, IRoom } from '@rocket.chat/core-typings';
 
+// Forward only the fields the permission check needs, so a full user document
+// (with services, e2e keys, etc.) isn't serialized to the authorization service.
+const toSubject = (user: IUser['_id'] | UserWithRoles): IUser['_id'] | UserWithRoles =>
+	typeof user === 'string' ? user : { _id: user._id, roles: user.roles };
+
 export const hasAllPermissionAsync = async (
 	user: IUser['_id'] | UserWithRoles,
 	permissions: IPermission['_id'][],
 	scope?: IRoom['_id'],
-): Promise<boolean> => Authorization.hasAllPermission(user, permissions, scope);
+): Promise<boolean> => Authorization.hasAllPermission(toSubject(user), permissions, scope);
 export const hasPermissionAsync = async (
 	user: IUser['_id'] | UserWithRoles,
 	permissionId: IPermission['_id'],
 	scope?: IRoom['_id'],
-): Promise<boolean> => Authorization.hasPermission(user, permissionId, scope);
+): Promise<boolean> => Authorization.hasPermission(toSubject(user), permissionId, scope);
 export const hasAtLeastOnePermissionAsync = async (
 	user: IUser['_id'] | UserWithRoles,
 	permissions: IPermission['_id'][],
 	scope?: IRoom['_id'],
-): Promise<boolean> => Authorization.hasAtLeastOnePermission(user, permissions, scope);
+): Promise<boolean> => Authorization.hasAtLeastOnePermission(toSubject(user), permissions, scope);
diff --git a/apps/uikit-playground/src/App.tsx b/apps/uikit-playground/src/App.tsx
index 80655038904da..28240e04b30f1 100644
--- a/apps/uikit-playground/src/App.tsx
+++ b/apps/uikit-playground/src/App.tsx
@@ -31,7 +31,7 @@ function App() {
 		dispatch(isTabletAction(isTablet));
 	}, [isTablet, dispatch]);
 	return (
-		<Box w='100vw' h='100vh' display='flex' flexDirection='column'>
+		<Box width='100vw' height='100vh' display='flex' flexDirection='column'>
 			<ToastBarProvider>
 				<BrowserRouter>
 					<Routes>
diff --git a/apps/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx b/apps/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx
index 9dfb4681f0ec0..dda8378d3f3c7 100644
--- a/apps/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx
+++ b/apps/uikit-playground/src/Components/ComponentSideBar/ScrollableSideBar.tsx
@@ -8,9 +8,9 @@ const ScrollableSideBar = () => (
 	<Scrollable vertical>
 		<Box
 			width='100%'
-			mbs='39px'
+			marginBlockStart='39px'
 			borderBlockStart='var(--default-border)'
-			bg='var(--primaryBackgroundColor)'
+			backgroundColor='var(--primaryBackgroundColor)'
 			className={css`
 				box-shadow: var(--dropdown-box-shadow);
 			`}
diff --git a/apps/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx b/apps/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx
index e180b5a6ec39c..21917254dd772 100644
--- a/apps/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx
+++ b/apps/uikit-playground/src/Components/ComponentSideBar/SideBar.tsx
@@ -27,7 +27,7 @@ const SideBar = () => {
 			`;
 
 	return (
-		<Box position='absolute' height='100%' display='flex' zIndex={4} bg='#fff' className={[slide]}>
+		<Box position='absolute' height='100%' display='flex' zIndex={4} backgroundColor='#fff' className={[slide]}>
 			<SliderBtn />
 			<ScrollableSideBar />
 		</Box>
diff --git a/apps/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx b/apps/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
index f5d96319d69cc..7eb02bdb40bf4 100644
--- a/apps/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
+++ b/apps/uikit-playground/src/Components/ComponentSideBar/SliderBtn.tsx
@@ -80,7 +80,7 @@ const SliderBtn = () => {
 						cursor: pointer;
 					`}
 				>
-					<Box size='50%' bg='info' className={slideBtnAnimation} />
+					<Box size='50%' backgroundColor='info' className={slideBtnAnimation} />
 				</Box>
 			)}
 		</Box>
diff --git a/apps/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx b/apps/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
index 0220e1fb13060..bae2f4a9d4633 100644
--- a/apps/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
+++ b/apps/uikit-playground/src/Components/CreateNewScreen/CreateNewScreenContainer.tsx
@@ -31,11 +31,11 @@ const CreateNewScreenContainer = () => {
 		<Scrollable horizontal>
 			<Box
 				ref={mergedRef}
-				w='100%'
+				width='100%'
 				height='250px'
 				borderBlockEnd='var(--default-border)'
 				position='fixed'
-				pi='40px'
+				paddingInline='40px'
 				className={css`
 					top: -255px;
 					left: 0;
diff --git a/apps/uikit-playground/src/Components/DropDown/DropDown.tsx b/apps/uikit-playground/src/Components/DropDown/DropDown.tsx
index c3a81b39ff129..f602ee43590f3 100644
--- a/apps/uikit-playground/src/Components/DropDown/DropDown.tsx
+++ b/apps/uikit-playground/src/Components/DropDown/DropDown.tsx
@@ -20,7 +20,7 @@ const DropDown = ({ blocksTree }: DropDownProps) => {
 	);
 
 	return (
-		<Box pbs='15px' pbe='30px'>
+		<Box paddingBlockStart='15px' paddingBlockEnd='30px'>
 			{blocksTree.map((branch: ItemBranch, i: number) => (
 				<Box key={i}>{recursiveComponentTree(branch, layer)}</Box>
 			))}
diff --git a/apps/uikit-playground/src/Components/DropDown/Items.tsx b/apps/uikit-playground/src/Components/DropDown/Items.tsx
index 85bcd833007cd..41c6119afecc0 100644
--- a/apps/uikit-playground/src/Components/DropDown/Items.tsx
+++ b/apps/uikit-playground/src/Components/DropDown/Items.tsx
@@ -25,7 +25,7 @@ const Items = ({ label, children, layer, payload }: ItemProps) => {
 	};
 
 	return (
-		<Box mbe={layer === 1 ? '10px' : '0px'}>
+		<Box marginBlockEnd={layer === 1 ? '10px' : '0px'}>
 			<Box
 				display='flex'
 				alignItems='center'
diff --git a/apps/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx b/apps/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
index 770e4c77afca2..21470a2c213f2 100644
--- a/apps/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
+++ b/apps/uikit-playground/src/Components/FlowContainer/UIKitWrapper/UIKitWrapper.tsx
@@ -17,11 +17,11 @@ const UIKitWrapper = ({ id, data }: UIKitWrapperProps) => {
 	if (!screens[data]) return null;
 	const { blocks, surface } = screens[data].payload;
 	return (
-		<Box padding='10px' border='var(--default-border)' bg='white' borderRadius='10px'>
+		<Box padding='10px' border='var(--default-border)' backgroundColor='white' borderRadius='10px'>
 			<Handle type='target' className='react-flow-targetHandle' position={Position.Left} id={`${id}`} />
 			<SurfaceRender type={surface}>
 				{blocks.map((block, index) => (
-					<Box key={index} pie='6px' className='uiKitWrapper'>
+					<Box key={index} paddingInlineEnd='6px' className='uiKitWrapper'>
 						<Box position='relative' border='var(--default-border)' padding='10px'>
 							<RenderPayload blocks={[block]} surface={surface} />
 							<Handle type='source' className='react-flow-sourceHandle' position={Position.Right} id={block.actionId} />
diff --git a/apps/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx b/apps/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
index 1f05d9ba5148f..1119bba273962 100644
--- a/apps/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
+++ b/apps/uikit-playground/src/Components/HomeContainer/HomeContainer.tsx
@@ -9,7 +9,7 @@ import CreateNewScreenButton from '../ScreenThumbnail/CreateNewScreenButton';
 const HomeContainer = () => {
 	const { dispatch } = useContext(context);
 	return (
-		<Box minWidth='100%' display='flex' justifyContent='center' h='var(--content-height)' pbs='30px'>
+		<Box minWidth='100%' display='flex' justifyContent='center' height='var(--content-height)' paddingBlockStart='30px'>
 			<Box
 				width='max-content'
 				minWidth='70%'
diff --git a/apps/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx b/apps/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx
index d53a080a17318..01d0237257995 100644
--- a/apps/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx
+++ b/apps/uikit-playground/src/Components/HomeContainer/ProjectsList/ProjectsList.tsx
@@ -17,7 +17,7 @@ const ProjectsList = () => {
 				grid-template-columns: repeat(auto-fill, 200px);
 				gap: 30px;
 			`}
-			pbe='30px'
+			paddingBlockEnd='30px'
 		>
 			{Object.values(projects).map((project) => (
 				<ProjectsThumbnail
diff --git a/apps/uikit-playground/src/Components/NavBar/Divider.tsx b/apps/uikit-playground/src/Components/NavBar/Divider.tsx
index f8afeca255f9c..a5daafffe3ae3 100644
--- a/apps/uikit-playground/src/Components/NavBar/Divider.tsx
+++ b/apps/uikit-playground/src/Components/NavBar/Divider.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
 
-const Divider = () => <Box height='70%' width='1px' bg='#c7c7c7' />;
+const Divider = () => <Box height='70%' width='1px' backgroundColor='#c7c7c7' />;
 
 export default Divider;
diff --git a/apps/uikit-playground/src/Components/NavBar/NavBar.tsx b/apps/uikit-playground/src/Components/NavBar/NavBar.tsx
index 03cf39f3af6f3..7bb25a7e55123 100644
--- a/apps/uikit-playground/src/Components/NavBar/NavBar.tsx
+++ b/apps/uikit-playground/src/Components/NavBar/NavBar.tsx
@@ -31,12 +31,12 @@ const NabBar = () => {
 					user-select: none;
 				`}
 			>
-				<Button primary onClick={() => navigate(routes.home)} mis='20px' small square>
+				<Button primary onClick={() => navigate(routes.home)} marginInlineStart='20px' small square>
 					<Icon name='home' size='x24' />
 				</Button>
 				{!isMobile && (
 					<Button
-						mis='12px'
+						marginInlineStart='12px'
 						small
 						success
 						onClick={() => {
diff --git a/apps/uikit-playground/src/Components/NavBar/RightNavBtn.tsx b/apps/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
index def0698b93243..805c8ebe85514 100644
--- a/apps/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
+++ b/apps/uikit-playground/src/Components/NavBar/RightNavBtn.tsx
@@ -8,7 +8,7 @@ const RightNavBtn = () => {
 	const { state, dispatch } = useContext(context);
 
 	return (
-		<Box mie='15px' onClick={() => state.isMobile && dispatch(navMenuToggleAction(true))}>
+		<Box marginInlineEnd='15px' onClick={() => state.isMobile && dispatch(navMenuToggleAction(true))}>
 			{state.isMobile ? <BurgerIcon /> : <Button primary>Send to RocketChat</Button>}
 		</Box>
 	);
diff --git a/apps/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx b/apps/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
index d432818eb608f..e801faadeeb6b 100644
--- a/apps/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
+++ b/apps/uikit-playground/src/Components/Preview/Display/Surface/ContextualBarSurface.tsx
@@ -22,7 +22,7 @@ const ContextualBarSurface = ({ children }: ContextualBarSurfaceProps) => (
 			<ContextualbarAction data-qa='ContextualbarActionClose' title='Close' name='cross' />
 		</ContextualbarHeader>
 
-		<Box height='100%' p='12px'>
+		<Box height='100%' padding='12px'>
 			<Box height='100%' display='flex' flexShrink={1} flexDirection='column' flexGrow={1}>
 				<Scrollbars
 					autoHide
diff --git a/apps/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx b/apps/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
index 0897cc0587210..92c64db058e9a 100644
--- a/apps/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
+++ b/apps/uikit-playground/src/Components/Preview/Display/Surface/Surface.tsx
@@ -65,7 +65,7 @@ const Surface = () => {
 	};
 
 	return (
-		<Box w='100%' h='100%' padding='20px'>
+		<Box width='100%' height='100%' padding='20px'>
 			<UiKitContext.Provider
 				value={{
 					action: (a) => {
diff --git a/apps/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx b/apps/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx
index 1682703b994dc..2699df30a0339 100644
--- a/apps/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx
+++ b/apps/uikit-playground/src/Components/Preview/Editor/ActionBlockEditor.tsx
@@ -10,7 +10,7 @@ const ActionBlockEditor = () => (
 			height='100%'
 			width='100%'
 			zIndex={1}
-			bg='#f6f9fc'
+			backgroundColor='#f6f9fc'
 			display='flex'
 			borderInlineStart='var(--default-border)'
 			overflow='auto'
diff --git a/apps/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx b/apps/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx
index 057def4397201..0305a9a396ac7 100644
--- a/apps/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx
+++ b/apps/uikit-playground/src/Components/Preview/Editor/ActionPreviewEditor.tsx
@@ -10,7 +10,7 @@ const ActionPreviewEditor = () => (
 			height='100%'
 			width='100%'
 			zIndex={1}
-			bg='#f6f9fc'
+			backgroundColor='#f6f9fc'
 			display='flex'
 			borderInlineStart='var(--default-border)'
 			overflow='auto'
diff --git a/apps/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx b/apps/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
index 279629be3d7f5..c5a45994fddf9 100644
--- a/apps/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
+++ b/apps/uikit-playground/src/Components/Preview/Editor/EditorPanel.tsx
@@ -77,7 +77,7 @@ const EditorPanel = () => {
 						className={tabChangeStyle(editorTabsToggle)}
 					>
 						{Object.values(tabsItem).map(({ Container: ContainerComponent }, index) => (
-							<Fragment key={index}>{index === editorTabsToggle ? <ContainerComponent /> : <Box w='100%' h='100%' />}</Fragment>
+							<Fragment key={index}>{index === editorTabsToggle ? <ContainerComponent /> : <Box width='100%' height='100%' />}</Fragment>
 						))}
 					</Box>
 				</Box>
diff --git a/apps/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx b/apps/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
index 1c5e27277fbbe..1d01f00133df5 100644
--- a/apps/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
+++ b/apps/uikit-playground/src/Components/Preview/NavPanel/NavPanel.tsx
@@ -26,15 +26,15 @@ const NavPanel = () => {
 			alignItems='center'
 			zIndex={1}
 			justifyContent={isMobile ? 'flex-end' : 'space-between'}
-			bg='alternative'
+			backgroundColor='alternative'
 			className={css`
 				user-select: none;
 			`}
 		>
 			{!isMobile && (
-				<Box display='flex' alignItems='center' flexGrow={0} pis={4}>
+				<Box display='flex' alignItems='center' flexGrow={0} paddingInlineStart={4}>
 					<SurfaceSelect />
-					<Button mis='10px' small warning height='max-content' onClick={() => dispatch(templatesToggleAction(true))}>
+					<Button marginInlineStart='10px' small warning height='max-content' onClick={() => dispatch(templatesToggleAction(true))}>
 						Templates
 					</Button>
 				</Box>
diff --git a/apps/uikit-playground/src/Components/Preview/Preview.tsx b/apps/uikit-playground/src/Components/Preview/Preview.tsx
index 7759bcab99ad2..b2da9c65797f4 100644
--- a/apps/uikit-playground/src/Components/Preview/Preview.tsx
+++ b/apps/uikit-playground/src/Components/Preview/Preview.tsx
@@ -20,11 +20,11 @@ const Preview = () => {
 		<Box
 			display='flex'
 			flexGrow={1}
-			bg='#fff'
+			backgroundColor='#fff'
 			zIndex={3}
 			height='100%'
 			flexDirection='column'
-			pis={isMobile ? '' : 'var(--sidebar-width)'}
+			paddingInlineStart={isMobile ? '' : 'var(--sidebar-width)'}
 			className={css`
 				transition: 0.5s ease;
 			`}
diff --git a/apps/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx b/apps/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
index cf42f3c7699b6..4c38bcc3f5418 100644
--- a/apps/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
+++ b/apps/uikit-playground/src/Components/PrototypeRender/PrototypeRender.tsx
@@ -40,7 +40,7 @@ const PrototypeRender = ({
 		}, 1000);
 	};
 	return (
-		<Box h='max-content' mb='auto' className='rc-prototype-renderer'>
+		<Box height='max-content' marginBlock='auto' className='rc-prototype-renderer'>
 			<SurfaceRender type={surface}>
 				{blocks.map((action, id) => (
 					<Box
@@ -52,8 +52,8 @@ const PrototypeRender = ({
 					>
 						<Box
 							position='relative'
-							w='100%'
-							h='100%'
+							width='100%'
+							height='100%'
 							className={css`
 								pointer-events: none;
 								user-select: none;
diff --git a/apps/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx b/apps/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
index eb809a7113406..790e38c48a534 100644
--- a/apps/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
+++ b/apps/uikit-playground/src/Components/PtototypeContainer/PrototypeContainer.tsx
@@ -22,7 +22,7 @@ const PrototypeContainer = () => {
 
 	return (
 		<Scrollable vertical>
-			<Box w='100%' h='100%'>
+			<Box width='100%' height='100%'>
 				<PrototypeRender
 					surface={surface}
 					blocks={blocks}
diff --git a/apps/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx b/apps/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
index bd00573feaa85..df1411e16baab 100644
--- a/apps/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
+++ b/apps/uikit-playground/src/Components/ScreenThumbnail/EditMenu/EditMenu.tsx
@@ -59,14 +59,14 @@ const EditMenu = ({
 			</Button>
 			{isOpen && (
 				<Box position='absolute'>
-					<Box elevation='1' pb='10px' bg='white'>
-						<Box mi='10px'>
+					<Box elevation='1' paddingBlock='10px' backgroundColor='white'>
+						<Box marginInline='10px'>
 							<EditableLabel value={name} onChange={onChange} onBlur={onBlur} {...labelProps} />
-							<Box withTruncatedText mbs='2px' fontScale='p2'>
+							<Box withTruncatedText marginBlockStart='2px' fontScale='p2'>
 								{formatDate(date)}
 							</Box>
 						</Box>
-						<Divider mbs='12px' />
+						<Divider marginBlockStart='12px' />
 						<Option disabled={!onDuplicate} onClick={duplicatehandler}>
 							Duplicate
 						</Option>
diff --git a/apps/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/EditableLabel.tsx b/apps/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/EditableLabel.tsx
index af2d405dc1814..bf81f09bc28f4 100644
--- a/apps/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/EditableLabel.tsx
+++ b/apps/uikit-playground/src/Components/ScreenThumbnail/EditableLabel/EditableLabel.tsx
@@ -16,8 +16,8 @@ const EditableLabel = (props: ComponentProps<typeof Input>) => {
 		<Box
 			position='relative'
 			className='rc-editableLabel'
-			w='100%'
-			h='max-content'
+			width='100%'
+			height='max-content'
 			display='flex'
 			alignItems='center'
 			onMouseEnter={() => setHover(true)}
diff --git a/apps/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx b/apps/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx
index b8187af6f8a1f..2267eabe4ce6d 100644
--- a/apps/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx
+++ b/apps/uikit-playground/src/Components/ScreenThumbnail/ScreenThumbnailWrapper.tsx
@@ -13,11 +13,11 @@ const ScreenThumbnailWrapper = ({
 	onClick?: ComponentProps<typeof Box>['onClick'];
 	children: ReactNode;
 } & ComponentProps<typeof Box>) => (
-	<Box w={width} h={height} className='screen-thumbnail-wrapper'>
-		<Box w={width} h={height} position='absolute' className='screenThumbnailBackdrop' onClick={onClick} />
+	<Box width={width} height={height} className='screen-thumbnail-wrapper'>
+		<Box width={width} height={height} position='absolute' className='screenThumbnailBackdrop' onClick={onClick} />
 		<Box
-			w={`calc(${width} - ${padding})`}
-			h={`calc(${height} - ${padding})`}
+			width={`calc(${width} - ${padding})`}
+			height={`calc(${height} - ${padding})`}
 			position='relative'
 			overflow='hidden'
 			onClick={onClick}
diff --git a/apps/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx b/apps/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
index a2abd7cb13b02..123ee167daf06 100644
--- a/apps/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
+++ b/apps/uikit-playground/src/Components/ScreenThumbnail/Thumbnail.tsx
@@ -23,7 +23,7 @@ const Thumbnail = ({ of, ...props }: ThumbnailProps) => {
 	return (
 		<Box overflow='hidden' position='relative' ref={parentRef} {...props}>
 			<Box
-				w='max-content'
+				width='max-content'
 				className={css`
 					transform: scale(${scale});
 					transform-origin: 0% 0%;
diff --git a/apps/uikit-playground/src/Components/Templates/Container/Payload.tsx b/apps/uikit-playground/src/Components/Templates/Container/Payload.tsx
index 580f24564354a..2a3f05049c75d 100644
--- a/apps/uikit-playground/src/Components/Templates/Container/Payload.tsx
+++ b/apps/uikit-playground/src/Components/Templates/Container/Payload.tsx
@@ -54,7 +54,7 @@ const Payload = ({ blocks, surface }: PayloadProps) => {
 					</SurfaceRender>
 				</Box>
 			</Box>
-			<Button onClick={clickHandler} primary mbs='15px' mbe='25px'>
+			<Button onClick={clickHandler} primary marginBlockStart='15px' marginBlockEnd='25px'>
 				Use This Template
 			</Button>
 		</>
diff --git a/apps/uikit-playground/src/Components/Templates/Container/Section.tsx b/apps/uikit-playground/src/Components/Templates/Container/Section.tsx
index f1b0726eef16b..5f089aac5c2ac 100644
--- a/apps/uikit-playground/src/Components/Templates/Container/Section.tsx
+++ b/apps/uikit-playground/src/Components/Templates/Container/Section.tsx
@@ -6,13 +6,13 @@ import type { templateType } from '../../../utils/templates';
 export type SectionProps = { template: templateType; index: number };
 
 const Section = ({ template, index }: SectionProps) => (
-	<Box mbs='25px' width='100%' key={index}>
-		<Box mbe='5px'>
+	<Box marginBlockStart='25px' width='100%' key={index}>
+		<Box marginBlockEnd='5px'>
 			<Label fontSize={24} fontWeight={800}>
 				{template.heading}
 			</Label>
 		</Box>
-		<Box mbe='15px'>
+		<Box marginBlockEnd='15px'>
 			<Label>{template.description}</Label>
 		</Box>
 		{template.payloads.map((payload, i) => (
diff --git a/apps/uikit-playground/src/Components/Templates/Templates.tsx b/apps/uikit-playground/src/Components/Templates/Templates.tsx
index 50bae43cac74f..d594ab2213ca5 100644
--- a/apps/uikit-playground/src/Components/Templates/Templates.tsx
+++ b/apps/uikit-playground/src/Components/Templates/Templates.tsx
@@ -22,7 +22,7 @@ const Templates = () => {
 						display='flex'
 						justifyContent='center'
 						alignItems='flex-start'
-						bg='white'
+						backgroundColor='white'
 						zIndex={100}
 						overflow='auto'
 						className={css`
diff --git a/apps/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx b/apps/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
index 2d7797846ea4b..e4bd6a41b034d 100644
--- a/apps/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
+++ b/apps/uikit-playground/src/Components/navMenu/Menu/Wrapper.tsx
@@ -5,8 +5,8 @@ export type WrapperProps = { children: ReactNode };
 
 const Wrapper = ({ children }: WrapperProps) => (
 	<Box
-		pbs='80px'
-		pis='50px'
+		paddingBlockStart='80px'
+		paddingInlineStart='50px'
 		display='inline-flex'
 		flexDirection='column'
 		alignItems='center'
diff --git a/apps/uikit-playground/src/Components/navMenu/Menu/index.tsx b/apps/uikit-playground/src/Components/navMenu/Menu/index.tsx
index 633a04ac24a1c..9f3a14c842f05 100644
--- a/apps/uikit-playground/src/Components/navMenu/Menu/index.tsx
+++ b/apps/uikit-playground/src/Components/navMenu/Menu/index.tsx
@@ -37,7 +37,7 @@ const Menu = ({ isOpen }: MenuProps) => {
 			position='absolute'
 			width='min(85%, 280px)'
 			height='100%'
-			bg='default'
+			backgroundColor='default'
 			className={[basicStyle, toggleStyle]}
 			onClick={(e) => {
 				e.stopPropagation();
diff --git a/apps/uikit-playground/src/Components/navMenu/NavMenu.tsx b/apps/uikit-playground/src/Components/navMenu/NavMenu.tsx
index c56459647bb85..b21ccae1e26f7 100644
--- a/apps/uikit-playground/src/Components/navMenu/NavMenu.tsx
+++ b/apps/uikit-playground/src/Components/navMenu/NavMenu.tsx
@@ -30,7 +30,7 @@ const NavMenu = () => {
 			width='100%'
 			height='100%'
 			zIndex={3}
-			bg={isOpen ? '#000000cc' : 'transparent'}
+			backgroundColor={isOpen ? '#000000cc' : 'transparent'}
 			className={css`
 				user-select: none;
 				transition: var(--animation-fast);
diff --git a/apps/uikit-playground/src/Pages/FlowDiagram.tsx b/apps/uikit-playground/src/Pages/FlowDiagram.tsx
index da4854d12b409..32b384572abc0 100644
--- a/apps/uikit-playground/src/Pages/FlowDiagram.tsx
+++ b/apps/uikit-playground/src/Pages/FlowDiagram.tsx
@@ -4,7 +4,7 @@ import { ReactFlowProvider } from 'reactflow';
 import FlowContainer from '../Components/FlowContainer/FlowContainer';
 
 const FlowDiagram = () => (
-	<Box w='100%' h='100%' position='relative'>
+	<Box width='100%' height='100%' position='relative'>
 		<ReactFlowProvider>
 			<FlowContainer />
 		</ReactFlowProvider>
diff --git a/apps/uikit-playground/src/Pages/Home.tsx b/apps/uikit-playground/src/Pages/Home.tsx
index 7d298c42815e4..6a3e24dcb9bcb 100644
--- a/apps/uikit-playground/src/Pages/Home.tsx
+++ b/apps/uikit-playground/src/Pages/Home.tsx
@@ -4,7 +4,7 @@ import HomeContainer from '../Components/HomeContainer/HomeContainer';
 
 const Home = () => {
 	return (
-		<Box display='flex' flexDirection='column' w='100%' flexGrow={1}>
+		<Box display='flex' flexDirection='column' width='100%' flexGrow={1}>
 			<Scrollable>
 				<HomeContainer />
 			</Scrollable>
diff --git a/apps/uikit-playground/src/Pages/Playground.tsx b/apps/uikit-playground/src/Pages/Playground.tsx
index c88d69284a9ad..6af72c843fbb9 100644
--- a/apps/uikit-playground/src/Pages/Playground.tsx
+++ b/apps/uikit-playground/src/Pages/Playground.tsx
@@ -21,7 +21,14 @@ const Playground = () => {
 			<Box position='relative' width='100%' flexGrow={1}>
 				<CreateNewScreenContainer />
 				<Templates />
-				<Box display='flex' width='100%' height='100%' flexDirection='column' overflow='hidden' bg='var(--primaryBackgroundColor)'>
+				<Box
+					display='flex'
+					width='100%'
+					height='100%'
+					flexDirection='column'
+					overflow='hidden'
+					backgroundColor='var(--primaryBackgroundColor)'
+				>
 					<Box width='100%' flexGrow={1} position='relative' zIndex={0}>
 						<ComponentSideBar />
 						<Preview />
diff --git a/apps/uikit-playground/src/Pages/Prototype.tsx b/apps/uikit-playground/src/Pages/Prototype.tsx
index 350b4d0d70f23..e009a50313b52 100644
--- a/apps/uikit-playground/src/Pages/Prototype.tsx
+++ b/apps/uikit-playground/src/Pages/Prototype.tsx
@@ -4,7 +4,7 @@ import PrototypeContainer from '../Components/PtototypeContainer/PrototypeContai
 
 const Prototype = () => {
 	return (
-		<Box w='100%' h='100%'>
+		<Box width='100%' height='100%'>
 			<PrototypeContainer />
 		</Box>
 	);
diff --git a/apps/uikit-playground/src/Pages/SignInSignUp.tsx b/apps/uikit-playground/src/Pages/SignInSignUp.tsx
index 5ca187587b1f7..b4a328ac05571 100644
--- a/apps/uikit-playground/src/Pages/SignInSignUp.tsx
+++ b/apps/uikit-playground/src/Pages/SignInSignUp.tsx
@@ -31,23 +31,23 @@ const SignInSignUp = ({ route }: SignInSignUpProps) => {
 	};
 	return (
 		<FlexContainer justifyContent='center' alignItems='center'>
-			<Box w='100%' flexGrow={1}>
+			<Box width='100%' flexGrow={1}>
 				<FlexContainer justifyContent='start' alignItems='center' direction='column'>
-					<Box w='max-content' h='100%'>
-						<Box w='180px' h='40px' mbs='100px'>
+					<Box width='max-content' height='100%'>
+						<Box width='180px' height='40px' marginBlockStart='100px'>
 							<RocketChatLogo />
 						</Box>
-						<Label mbs='20px' fontScale='hero'>
+						<Label marginBlockStart='20px' fontScale='hero'>
 							{labels[route].header}
 						</Label>
-						<Label mbs='10px' fontScale='p2'>
+						<Label marginBlockStart='10px' fontScale='p2'>
 							{labels[route].description}
 						</Label>
-						<InputBox mbs='20px' w='80%' maxHeight='50px' type='email' />
-						<Button mbs='20px' w='80%' primary>
+						<InputBox marginBlockStart='20px' width='80%' maxHeight='50px' type='email' />
+						<Button marginBlockStart='20px' width='80%' primary>
 							{labels[route].button}
 						</Button>
-						<Label mbs='20px' fontScale='p2'>
+						<Label marginBlockStart='20px' fontScale='p2'>
 							{`${labels[route].footer} `}
 							<Label
 								fontScale='p2'
diff --git a/docs/frontend-guidelines.md b/docs/frontend-guidelines.md
new file mode 100644
index 0000000000000..623c6f2b41465
--- /dev/null
+++ b/docs/frontend-guidelines.md
@@ -0,0 +1,1004 @@
+# Frontend Guidelines
+
+> Compiled from the internal Confluence page [Guidelines](https://rocketchat.atlassian.net/wiki/spaces/RnD/pages/753532947/Guidelines) (R&D space) and its child pages. These are the guidelines for writing clear, concise, and consistent frontend code.
+
+## Table of contents
+
+- [TypeScript general conventions](#typescript-general-conventions)
+- [Migrating from JavaScript](#migrating-from-javascript)
+- [React](#react)
+- [Building components](#building-components)
+
+---
+
+## TypeScript general conventions
+
+### Don't use CommonJS features
+
+Avoid using CommonJS features such as `require` and `module` alongside ES module constructs like `import` and `export`. The preference is for ES modules due to their enhanced portability and user-friendly nature. However, keep in mind that synchronous conditional imports aren't possible in ES modules.
+
+Example of CommonJS (not recommended):
+
+```ts
+// commonjs.ts
+if (condition) {
+	const foo = require('foo');
+	module.exports = foo;
+} else {
+	module.exports = {};
+}
+```
+
+Invalid ES module pattern:
+
+```ts
+// esmodule.ts
+if (condition) {
+	import foo from 'foo';
+	export default foo;
+} else {
+	export default {};
+}
+```
+
+### Prefer `import type` over `import`
+
+Prioritize using `import type` for type-only imports. While a regular `import` works for both JavaScript and TypeScript, it can include module output code in the bundle. The `import type` construct is specific to TypeScript compilation and avoids unnecessary code inclusion.
+
+```ts
+// Foo.ts
+export class Foo {
+	bar: string;
+
+	constructor(bar: string) {
+		this.bar = bar;
+	}
+}
+
+// Bar.ts
+export class Bar {
+	foo: Foo;
+
+	constructor(foo: Foo) {
+		this.foo = foo;
+	}
+}
+
+// index.ts
+import { Foo } from './Foo';
+import type { Bar } from './Bar';
+
+declare const foo: Foo;
+declare const bar: Bar;
+
+// index.js (transpiled from index.ts)
+import { Foo } from './Foo';
+```
+
+### Know the difference between `type` and `interface`
+
+An `interface` serves as a type declaration similar to a class construct, while a `class` functions as an actual class declaration.
+
+```ts
+interface IThing {
+	prop: string;
+	method(): void;
+}
+
+class Thing implements IThing {
+	public prop = 'foo';
+
+	method(): void {
+		console.log('bar');
+	}
+}
+```
+
+A `type` construct is similar to an interface but offers greater flexibility. The `type` construct permits declaration of union types:
+
+```ts
+type Foo = string | number;
+```
+
+An `interface` can declare generic types:
+
+```ts
+interface IFoo<T> {
+	prop: T;
+}
+```
+
+A `type` also supports generics and conditional types, providing more adaptability:
+
+```ts
+type Foo<T> = T extends string ? { foo: number } : { bar: number };
+```
+
+### Avoid using classes as namespaces
+
+Pattern to avoid:
+
+```ts
+// foo.ts
+class Foo {
+	bar(): void {
+		// ...
+	}
+}
+
+export const foo = new Foo();
+
+// index.ts
+import { foo } from './foo';
+
+foo.bar();
+```
+
+Preferred approach (when no state is needed):
+
+```ts
+// foo.ts
+export function bar(): void {
+	// ...
+}
+
+// index.ts
+import * as foo from './foo';
+
+foo.bar();
+```
+
+Valid use case (when managing state):
+
+```ts
+// foo.ts
+class Foo {
+	baz: number;
+
+	bar(): void {
+		// perform actions referencing and modifying `this.baz`
+	}
+}
+
+export const foo = new Foo();
+
+// index.ts
+import { foo } from './foo';
+
+foo.bar();
+```
+
+Classes are reasonable when they encapsulate state and provide a controlled interface for modification.
+
+### Avoid using the `any` type except when it's used as a constraint
+
+Refrain from using `any` under most circumstances. Instead, follow this model:
+
+- `unknown` serves as the universal type, encompassing all potential values;
+- `any` should not be seen as an actual type, but rather as a means to disable TypeScript's type checking.
+
+Using `any` is discouraged as it indicates unawareness regarding the type being manipulated. Working with `unknown` necessitates type narrowing, leading to more robust code.
+
+```ts
+// Avoid using any
+declare const foo: any;
+foo.bar(); // No compilation error
+
+// Prefer using unknown
+declare const bar: unknown;
+bar.baz(); // Compilation error
+
+const hasBaz = (bar: unknown): bar is { baz(): void } =>
+	typeof bar === 'object' && bar !== null && 'baz' in bar && typeof (bar as { baz: unknown }).baz === 'function';
+
+if (hasBaz(bar)) {
+	bar.baz(); // No compilation error
+}
+```
+
+Exception — generic type constraints:
+
+```ts
+type X<F> = F extends (x: unknown) => void ? true : false;
+type Y<F> = F extends (x: any) => void ? true : false;
+
+type A = X<(x: string) => void>; // `false`, because x is not `unknown`
+type B = Y<(x: string) => void>; // `true`, because x is anything
+```
+
+---
+
+## Migrating from JavaScript
+
+### TypeScript is a superset of JavaScript
+
+TypeScript is an extension of JavaScript, meaning that when transitioning from JavaScript to TypeScript, you can employ the identical syntax used in JavaScript. Many errors flagged by the TypeScript compiler (`tsc`) and ESLint enforce best practices, though some can be disregarded if they don't affect functionality.
+
+### JSDoc
+
+When `allowJs` is enabled in `tsconfig.json`, JSDoc comments can document types within JavaScript code. This is particularly useful during gradual migration when `tsc` struggles with type inference.
+
+Example with `@typedef`:
+
+```js
+// module.js
+
+/**
+ * @typedef {Object} Foo
+ * @property {string} bar
+ * @property {string} qux
+ */
+
+export const foo = { bar: 'baz' };
+
+foo.qux = 'quux';
+```
+
+Alternative using the `@type` tag:
+
+```js
+// module.js
+
+/**
+ * @type {{ bar: string; qux: string }}
+ */
+export const foo = { bar: 'baz' };
+
+foo.qux = 'quux';
+```
+
+Both approaches help ensure TypeScript accurately recognizes the complete type structure.
+
+### Declare a `*.d.ts` file
+
+Creating a `.d.ts` declaration file is strongly recommended when migrating large JavaScript modules. These files manage imports and exports, functioning as a module's interface. This approach is superior to JSDoc for planning and understanding module structure.
+
+```ts
+// hugeModule.d.ts
+export function foo(): void; // maybe it will be placed in another module
+export function bar(): void; // maybe it will be placed in another module
+```
+
+---
+
+## React
+
+> Most of the recommendations here are based on Alex Kondov's [Tao of React](https://alexkondov.com/tao-of-react/).
+
+### Prefer functional components
+
+React initially introduced class components to leverage JavaScript class syntax for managing state and component lifecycles. However, class components have significant drawbacks:
+
+- they tend to be verbose;
+- they often involve a misuse of the inheritance mechanism through `extends` and `super`.
+
+Hooks were introduced to provide an alternative approach to declaring state and effects. They maintain the core concept of the component's render function without the need for classes, streamlining the development process.
+
+### Declare one component per file
+
+While colocation is a commendable concept, it's not consistently followed for React components within a single file. The main reason is that we've noticed people misusing this approach before. It might start with something as straightforward as adding a basic modal component alongside a page component, but it can quickly lead to a confusing jumble of components that becomes difficult to manage.
+
+### Name components
+
+Failing to name a component is a common mistake that can lead to prolonged debugging efforts. It results in less informative error stacks and challenges while navigating components in React Dev Tools. There are two approaches to properly name a component:
+
+1. By writing a non-anonymous function:
+
+```jsx
+const Foo = () => {
+	return <div>Foo</div>;
+};
+
+console.log('The component name is:', Foo.name);
+```
+
+2. By using the `displayName` property:
+
+```jsx
+const Foo = memo(() => {
+	return <div>Foo</div>;
+});
+
+Foo.displayName = 'Foo'; // `Foo.name` is `undefined`
+
+console.log('The component name is:', Foo.displayName);
+```
+
+### Use default export at the end of file
+
+While named exports are often preferred, using default export enhances code readability, especially when dealing with Higher Order Components (HOCs) like `memo` and `forwardRef`, and it aligns neatly with code splitting using `lazy`.
+
+```tsx
+// Component.tsx
+import { memo } from 'react';
+
+type ComponentProps = {
+	name: string;
+};
+
+// It is NOT an anonymous function
+const Component = (props: ComponentProps) => {
+	return <div>Hello, {props.name}</div>;
+};
+
+export default memo(Component); // the component name is preserved
+```
+
+```ts
+// index.ts
+import { lazy } from 'react';
+
+const Component = lazy(() => import('./Component'));
+```
+
+The same example based on named exports is less readable:
+
+```tsx
+// Component.tsx
+import { memo } from 'react';
+
+type ComponentProps = {
+	name: string;
+};
+
+// It is an anonymous function
+export const Component = memo((props: ComponentProps) => {
+	return <div>Hello, {props.name}</div>;
+});
+
+Component.displayName = 'Component'; // needed for React Dev Tools
+```
+
+```ts
+// index.ts
+import { lazy } from 'react';
+
+const Component = lazy(async () => {
+	const { Component } = await import('./Component');
+	return { default: Component }; // you need to reconstruct the default export
+});
+```
+
+### Extract helper functions
+
+A drawback associated with the adoption of React Hooks is the tendency for individuals to define helper functions within the component. This is facilitated by the fact that there is no requirement to pass arguments; instead, variables from the encompassing scope can be directly accessed and used.
+
+```jsx
+const Component = () => {
+	const value = useMyHook();
+	const isValueOK = () => value === 'OK';
+	return isValueOK() ? <>OK</> : null;
+};
+```
+
+Typically, effective helper functions adhere to the principle of being pure, which makes them simpler to debug. However, when you bind variables into the helper's scope, you're making it impure. Furthermore, with each rendering cycle, the function value gets redefined. While this process is efficient in terms of CPU and memory usage, it can lead to scenarios where you must rely on techniques like `useCallback` to prevent unnecessary re-renders of child components that receive your helper function as a prop.
+
+Here's the ideal case:
+
+```jsx
+const isValueOK = (value) => value === 'OK';
+
+const Component = () => {
+	const value = useMyHook();
+	return isValueOK(value) ? <>OK</> : null;
+};
+```
+
+### Do not refer to the `children` prop explicitly
+
+Children should always be actual children, not passed in as a prop. Use the `eslint-plugin-react` rule [`react/no-children-prop`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md) as reference.
+
+❌ Incorrect:
+
+```jsx
+export const MyComponent = () => <div children={...} />;
+```
+
+✅ Correct:
+
+```jsx
+export const MyComponent = () => <div>{...}</div>;
+```
+
+### Declare props type explicitly
+
+Each component named, for instance, `Component` must have an _exported_ type declaration for `ComponentProps`.
+
+```tsx
+export type MyComponentProps = {
+	// ...
+};
+
+const MyComponent = (props: MyComponentProps) => /* ... */;
+
+export default MyComponent;
+```
+
+### Use generic types when appropriate
+
+Generic types are a great way to ensure type safety once they enable us to not fall into the unsoundness of type assertions.
+
+❌ Incorrect:
+
+```tsx
+// MyComponent.tsx
+export type MyComponentProps = {
+	value: unknown;
+	onChange: (newValue: unknown) => void;
+};
+
+const MyComponent = ({ value, onChange }: MyComponentProps) => /* ... */;
+
+export default MyComponent;
+
+// MyApp.tsx
+import MyComponent from './MyComponent';
+
+const MyApp = () => {
+	const [value, setValue] = useState('');
+	const handleChange = (value: unknown) => {
+		setValue(value as string); // unsound type assertion, as unknown can be anything
+	};
+	return <MyComponent value={value} onChange={handleChange} />;
+};
+
+export default MyApp;
+```
+
+✅ Correct:
+
+```tsx
+// MyComponent.tsx
+export type MyComponentProps<TValue> = {
+	value: TValue;
+	onChange: (newValue: TValue) => void;
+};
+
+const MyComponent = <TValue,>({ value, onChange }: MyComponentProps<TValue>) => /* ... */;
+
+export default MyComponent;
+
+// MyApp.tsx
+import MyComponent from './MyComponent';
+
+const MyApp = () => {
+	const [value, setValue] = useState('');
+	const handleChange = (value: string) => {
+		setValue(value);
+	};
+	// since `value` is string, `onChange` type will be inferred
+	// as `(value: string) => void`
+	return <MyComponent value={value} onChange={handleChange} />;
+};
+
+export default MyApp;
+```
+
+### Avoid naming identifiers with their value type/kind
+
+This is a common programming convention, but it seems easier to violate when working with React concepts. In general, identifiers should not include information about the data structure they refer to.
+
+```ts
+// Examples of bad identifiers
+const amountConst = 123; // instead of "amount"
+let countNumber = 0; // instead of "count"
+function logFunction(lineString: string) {
+	// instead of "log" and "line"
+	console.log(lineString);
+}
+```
+
+Identifiers like this mimic the old-fashioned Hungarian notation. In React, this happens quite often:
+
+```tsx
+// Examples of bad identifiers in React constructs
+function useThingHook() {
+	// ...
+} // instead of "useThing"
+
+const useThingContext = () => useContext(ThingContext);
+// "ThingContext" already exposes itself as a context that provides a "Thing".
+// "useThing" is good enough, since it doesn't need to expose its context dependency.
+
+const MyComponent = () => <div />;
+// Fine for code examples and components passed by props*, but in general
+// capital cased function names used in JSX already communicate they are of
+// "Component" kind
+
+// * when "Component" is okay as a suffix
+type MyPanelProps = {
+	panelComponent: ElementType<{}>;
+};
+
+function MyPanel({ panelComponent: PanelComponent }: MyPanelProps) {
+	// "PanelComponent" is fine here
+	return (
+		<div className='panel'>
+			<PanelComponent />
+		</div>
+	);
+}
+```
+
+---
+
+## Building components
+
+A component is a reusable piece of code that represents a single UI element. Components vary by complexity and type, existing at either the **application** level or the **Fuselage library** level:
+
+- **Application components** remain specific to particular Rocket.Chat applications, without cross-application reusability.
+- **Fuselage library components** are reusable across all Rocket.Chat applications and represent the recommended approach.
+
+### Component rules matrix
+
+| Combination      | Fuselage level | Application level |
+| ---------------- | -------------- | ----------------- |
+| Simple & Visual  | ✅             | ❌                |
+| Complex & Visual | ✅             | ✅                |
+| Simple & Logical | ❌             | ❌                |
+| Complex & Logical| ❌             | ✅                |
+
+### Simple components
+
+Simple components represent atomic UI elements like buttons or text fields.
+
+#### Prefer variation over styles
+
+Use prop names suggesting component variation rather than style-based props. Instead of `color="blue"`, use `variation="primary"` for improved readability and consistency.
+
+#### Avoid hardcoded values or magic numbers
+
+Preferred:
+
+```jsx
+<Button small square>
+	<Icon name='circle-arrow-down' size='x24' />
+</Button>
+```
+
+Not recommended:
+
+```jsx
+<Button height='50px' width='50px' square>
+	<Icon name='circle-arrow-down' size='x24' />
+</Button>
+```
+
+#### Customize via CSS variables
+
+Prioritize CSS variable customization over arbitrary values:
+
+```scss
+$modal-margin: theme('modal-margin', auto);
+
+.rcx-modal {
+	position: static;
+	display: flex;
+	width: 100%;
+	max-height: 100%;
+	margin: $modal-margin;
+}
+```
+
+#### Document variations in Storybook
+
+Display all possible variations with descriptive explanations for non-obvious options.
+
+#### Unit test all behaviors
+
+Comprehensive unit tests ensure reliability across all intended scenarios:
+
+```jsx
+describe('[Menu Component]', () => {
+	const menuOption = screen.queryByText('Make Admin');
+
+	it('should renders without crashing', () => {
+		render(<Simple {...Simple.args} />);
+	});
+
+	it('should open options when click', async () => {
+		const { getByTestId } = render(<Simple {...Simple.args} />);
+		const button = getByTestId('menu');
+		userEvent.click(button);
+		expect(await screen.findByText('Make Admin')).toBeInTheDocument();
+	});
+
+	it('should have no options when click twice', async () => {
+		const { getByTestId } = render(<Simple {...Simple.args} />);
+		const button = getByTestId('menu');
+		userEvent.click(button);
+		userEvent.click(button);
+		expect(menuOption).toBeNull();
+	});
+
+	it('should have no options when click on menu and then elsewhere', async () => {
+		const { getByTestId } = render(<Simple {...Simple.args} />);
+		const button = getByTestId('menu');
+		userEvent.click(button);
+		userEvent.click(document.body);
+		expect(menuOption).toBeNull();
+	});
+});
+```
+
+#### Avoid "Boxed" components
+
+The `Box` component works as a wildcard primarily for simple or complex components during prototyping. For simple components specifically, construct using HTML tags instead.
+
+### Complex components
+
+Complex components combine multiple simple components for sophisticated UI elements like modals or tables.
+
+#### Visual only, no logic
+
+Concentrate solely on the user interface design, ensuring it is poised to incorporate the required logic seamlessly.
+
+```jsx
+export const Default = () => (
+	<Modal>
+		<ModalHeader>
+			<ModalHeaderText>
+				<ModalTitle>Modal Header</ModalTitle>
+			</ModalHeaderText>
+			<ModalClose />
+		</ModalHeader>
+		<ModalContent>Modal Body</ModalContent>
+		<ModalFooter>
+			<ModalFooterControllers>
+				<Button>Cancel</Button>
+				<Button primary onClick={action('click')}>
+					Submit
+				</Button>
+			</ModalFooterControllers>
+		</ModalFooter>
+	</Modal>
+);
+```
+
+#### Split components for clarity
+
+Structure components into understandable, logical segments.
+
+#### Develop with Storybook first
+
+Start with Storybook to separate interface from logic:
+
+```tsx
+export const CallingDM: ComponentStory<typeof VideoConfMessage> = () => (
+	<VideoConfMessage>
+		<VideoConfMessageRow>
+			<VideoConfMessageIcon variant='incoming' />
+			<VideoConfMessageText>Calling...</VideoConfMessageText>
+		</VideoConfMessageRow>
+		<VideoConfMessageFooter>
+			<VideoConfMessageAction primary>Join</VideoConfMessageAction>
+			<VideoConfMessageFooterText>Waiting for answer</VideoConfMessageFooterText>
+		</VideoConfMessageFooter>
+	</VideoConfMessage>
+);
+
+export const CallEndedDM: ComponentStory<typeof VideoConfMessage> = () => (
+	<VideoConfMessage>
+		<VideoConfMessageRow>
+			<VideoConfMessageIcon />
+			<VideoConfMessageText>Call ended</VideoConfMessageText>
+		</VideoConfMessageRow>
+		<VideoConfMessageFooter>
+			<VideoConfMessageAction>Call Back</VideoConfMessageAction>
+			<VideoConfMessageFooterText>Call was not answered</VideoConfMessageFooterText>
+		</VideoConfMessageFooter>
+	</VideoConfMessage>
+);
+```
+
+#### Child components must remain scoped
+
+❌ Incorrect:
+
+```tsx
+export const MyComponent: ComponentStory<typeof VideoConfMessage> = () => (
+	<Box display='flex'>
+		<form>
+			<VideoConfMessageAction>Call ended</VideoConfMessageAction>
+		</form>
+	</Box>
+);
+```
+
+✅ Correct:
+
+```tsx
+export const MyComponent: ComponentStory<typeof VideoConfMessage> = () => (
+	<Box display='flex'>
+		<form>
+			<VideoConfMessage>
+				<VideoConfMessageFooter>
+					<VideoConfMessageAction>Call ended</VideoConfMessageAction>
+				</VideoConfMessageFooter>
+			</VideoConfMessage>
+		</form>
+	</Box>
+);
+```
+
+#### Encapsulate HTML elements, Box, and Box props
+
+Encapsulation ensures predictable behavior and streamlined debugging by accessing HTML elements and Box props solely through the Box component's API.
+
+❌ Incorrect:
+
+```tsx
+export const VideoConfMessage: ComponentStory<typeof VideoConfMessage> = () => (
+	<Box mbs='x4' maxWidth='345px' borderWidth={2} borderColor='neutral-200' borderRadius='x4'>
+		<Box p='x16' display='flex' alignItems='center'>
+			<Icon name='link' />
+			<div>My Text</div>
+		</Box>
+	</Box>
+);
+```
+
+✅ Correct:
+
+```tsx
+const VideoConfMessage = ({ ...props }): ReactElement => (
+	<Box mbs='x4' maxWidth='345' borderWidth={2} borderColor='neutral-200' borderRadius='x4' {...props} />
+);
+```
+
+#### Provide hooks as helpers
+
+In the following example, the `useVideoConfControllers` hook is provided as a helper to manage the state of the popup's controllers:
+
+```ts
+export const useVideoConfControllers = (
+	initialPreferences: controllersConfigProps = { mic: true, cam: false },
+): { controllersConfig: controllersConfigProps; handleToggleMic: () => void; handleToggleCam: () => void } => {
+	const [controllersConfig, setControllersConfig] = useState(initialPreferences);
+
+	const handleToggleMic = useCallback((): void => {
+		setControllersConfig((prevState) => ({ ...prevState, mic: !prevState.mic }));
+	}, []);
+
+	const handleToggleCam = useCallback((): void => {
+		setControllersConfig((prevState) => ({ ...prevState, cam: !prevState.cam }));
+	}, []);
+
+	return {
+		controllersConfig,
+		handleToggleMic,
+		handleToggleCam,
+	};
+};
+```
+
+```tsx
+const { controllersConfig } = useVideoConfControllers();
+
+return (
+	<VideoConfPopup>
+		<VideoConfPopupHeader>
+			<VideoConfPopupTitle text={t('Calling')} counter />
+			<VideoConfPopupControllers>
+				<VideoConfController
+					active={controllersConfig.cam}
+					title={controllersConfig.cam ? t('Cam_on') : t('Cam_off')}
+					icon={controllersConfig.cam ? 'video' : 'video-off'}
+					disabled
+				/>
+				<VideoConfController
+					active={controllersConfig.mic}
+					title={controllersConfig.mic ? t('Mic_on') : t('Mic_off')}
+					icon={controllersConfig.mic ? 'mic' : 'mic-off'}
+					disabled
+				/>
+			</VideoConfPopupControllers>
+		</VideoConfPopupHeader>
+	</VideoConfPopup>
+);
+```
+
+### Understanding the component and defining the scope
+
+New components typically emerge from requirements put forth by the Product Design Team. The frontend engineer holds the responsibility of assessing the genuine necessity of such components. Due to the substantial effort involved in creating a new component, it is prudent to collaborate with product managers and designers. It is advisable to explore the feasibility of employing Complex Components as an MVP to validate concepts and user flows. Subsequent to successful validation, the progression to developing a new Fuselage level component can be considered.
+
+**How do I know my component should be part of the Fuselage library?**
+
+Consider the `VerticalBar` component as a clear example. It began as a Complex Component for a single application but has now advanced to the Fuselage level. This shift is driven by its usefulness in multiple applications, like Rocket.Chat and Cloud Portal. This case demonstrates how components can grow from specific solutions to versatile tools with broader applications.
+
+### Logical components
+
+#### Use child components to compose a logical complex component
+
+Leverage the integration of child components to construct a unified and logical complex component:
+
+```tsx
+const OutgoingPopup = ({ room, onClose, id }: OutgoingPopupProps): ReactElement => {
+	const t = useTranslation();
+	const videoConfPreferences = useVideoConfPreferences();
+	const { controllersConfig } = useVideoConfControllers();
+
+	return (
+		<VideoConfPopup>
+			<VideoConfPopupHeader>
+				<VideoConfPopupTitle text={t('Calling')} counter />
+				<VideoConfPopupControllers>
+					<VideoConfController
+						active={controllersConfig.cam}
+						title={controllersConfig.cam ? t('Cam_on') : t('Cam_off')}
+						icon={controllersConfig.cam ? 'video' : 'video-off'}
+						disabled
+					/>
+					<VideoConfController
+						active={controllersConfig.mic}
+						title={controllersConfig.mic ? t('Mic_on') : t('Mic_off')}
+						icon={controllersConfig.mic ? 'mic' : 'mic-off'}
+						disabled
+					/>
+				</VideoConfPopupControllers>
+			</VideoConfPopupHeader>
+		</VideoConfPopup>
+	);
+};
+```
+
+#### Customization through variations
+
+Provide users with the ability to customize a component's appearance or behavior by selecting from predefined variations or options. This approach enhances user experience and flexibility in adapting components to specific requirements.
+
+```tsx
+<VideoConfController
+	active={controllersConfig.mic}
+	title={controllersConfig.mic ? t('Mic_on') : t('Mic_off')}
+	icon={controllersConfig.mic ? 'mic' : 'mic-off'}
+	disabled
+/>
+```
+
+```tsx
+const VideoConfController = ({ icon, active, secondary, disabled, small = true, ...props }: VideoConfControllerProps): ReactElement => {
+	const id = useUniqueId();
+
+	return (
+		<IconButton
+			small={small}
+			icon={icon}
+			id={id}
+			info={active}
+			disabled={disabled}
+			secondary={secondary || active || disabled}
+			{...props}
+		/>
+	);
+};
+```
+
+#### Avoid direct styles
+
+Refrain from applying direct styles to components. By avoiding inline styling, the code maintains a cleaner structure and promotes better separation of concerns, enhancing maintainability and readability.
+
+❌ Avoid:
+
+```tsx
+<VideoConfPopup>
+	<VideoConfPopupHeader>
+		<VideoConfPopupTitle text={t('Calling')} counter />
+		<VideoConfPopupControllers>
+			<Box display='flex' alignItems='center'>
+				<VideoConfController
+					width='50px'
+					height='50px'
+					active={controllersConfig.cam}
+					title={controllersConfig.cam ? t('Cam_on') : t('Cam_off')}
+					icon={controllersConfig.cam ? 'video' : 'video-off'}
+					disabled
+				/>
+				<VideoConfController
+					active={controllersConfig.mic}
+					title={controllersConfig.mic ? t('Mic_on') : t('Mic_off')}
+					icon={controllersConfig.mic ? 'mic' : 'mic-off'}
+					disabled
+				/>
+			</Box>
+		</VideoConfPopupControllers>
+	</VideoConfPopupHeader>
+</VideoConfPopup>
+```
+
+#### Don't write CSS styles in JS files
+
+This approach separates your component's logic from styling, promoting better code organization and maintainability while avoiding inline CSS-in-JS styling.
+
+Define your custom styling in an external CSS file:
+
+```css
+/* styles.css */
+
+.customClass {
+	border: 1px solid black;
+	padding: 1.5rem;
+}
+```
+
+Then, apply the class to your component:
+
+```tsx
+import './styles.css';
+
+return (
+	<VideoConfPopup>
+		<VideoConfPopupHeader>
+			<VideoConfPopupTitle text={t('Calling')} counter />
+			<VideoConfPopupControllers>
+				<VideoConfController
+					className='customClass'
+					active={controllersConfig.cam}
+					title={controllersConfig.cam ? t('Cam_on') : t('Cam_off')}
+					icon={controllersConfig.cam ? 'video' : 'video-off'}
+					disabled
+				/>
+				<VideoConfController
+					active={controllersConfig.mic}
+					title={controllersConfig.mic ? t('Mic_on') : t('Mic_off')}
+					icon={controllersConfig.mic ? 'mic' : 'mic-off'}
+					disabled
+				/>
+			</VideoConfPopupControllers>
+		</VideoConfPopupHeader>
+	</VideoConfPopup>
+);
+```
+
+#### Use the states of the component
+
+By using component states to conditionally render different complex components, you maintain a clear and organized structure in your code, enhancing readability and maintainability.
+
+```tsx
+if (isReceiving) {
+	return <IncomingPopup room={room} id={id} position={position} onClose={onClose} onMute={handleMute} onConfirm={handleConfirm} />;
+}
+
+if (isCalling) {
+	return <OutgoingPopup room={room} id={id} onClose={onClose} />;
+}
+
+return <StartCallPopup loading={starting} room={room} id={id} onClose={dismissOutgoing} onConfirm={handleStartCall} />;
+```
+
+Each state should render the proper Complex Component:
+
+```tsx
+const OutgoingPopup = ({ room, onClose, id }: OutgoingPopupProps): ReactElement => {
+	const t = useTranslation();
+	const videoConfPreferences = useVideoConfPreferences();
+	const { controllersConfig } = useVideoConfControllers();
+
+	return (
+		<VideoConfPopup>
+			<VideoConfPopupHeader>
+				<VideoConfPopupTitle text={t('Calling')} counter />
+				<VideoConfPopupControllers>
+					<VideoConfController
+						active={controllersConfig.cam}
+						title={controllersConfig.cam ? t('Cam_on') : t('Cam_off')}
+						icon={controllersConfig.cam ? 'video' : 'video-off'}
+						disabled
+					/>
+					<VideoConfController
+						active={controllersConfig.mic}
+						title={controllersConfig.mic ? t('Mic_on') : t('Mic_off')}
+						icon={controllersConfig.mic ? 'mic' : 'mic-off'}
+						disabled
+					/>
+				</VideoConfPopupControllers>
+			</VideoConfPopupHeader>
+		</VideoConfPopup>
+	);
+};
+```
+
+### Visual components
+
+Visual components are responsible for the appearance of a UI element. They define the element's style, layout, and other visual properties.
+
+Adhering to the guidelines in Fuselage's componentization offers the value of modular, reusable, and maintainable UI components. This approach enables efficient development, ensures consistent behavior, and supports the evolution of solutions from specific contexts to broader applications. By encapsulating logic, avoiding direct styles, and leveraging API-driven customization, developers can create a streamlined and user-centered experience.
diff --git a/packages/apps/src/server/runtime/deno/AppsEngineDenoRuntime.ts b/packages/apps/src/server/runtime/deno/AppsEngineDenoRuntime.ts
index 430185a94ca77..8641bdcabe73a 100644
--- a/packages/apps/src/server/runtime/deno/AppsEngineDenoRuntime.ts
+++ b/packages/apps/src/server/runtime/deno/AppsEngineDenoRuntime.ts
@@ -25,7 +25,7 @@ function getDenoConfigPath(): string {
  *
  * Returns the path to the generated config file.
  */
-function generateEphemeralDenoConfig(targetPath: string, denoConfigPath: string, appsEnginePath: string): void {
+function generateEphemeralDenoConfig(targetPath: string, denoConfigPath: string, appsEnginePath: string, packagePath: string): void {
 	let staticConfig: DenoConfigurationFileSchema;
 
 	try {
@@ -39,6 +39,8 @@ function generateEphemeralDenoConfig(targetPath: string, denoConfigPath: string,
 		imports: {
 			...staticConfig.imports,
 			'@rocket.chat/apps-engine/': `${appsEnginePath}/`,
+			'@rocket.chat/apps/base-runtime/': `${path.join(packagePath, 'base-runtime', 'src')}/`,
+			'@rocket.chat/apps/': `${packagePath}/`,
 		},
 	};
 
@@ -67,7 +69,7 @@ export class DenoRuntimeSubprocessController extends BaseRuntimeSubprocessContro
 		this.denoDir = process.env.DENO_DIR ?? path.join(this.packagePath, '.deno-cache');
 
 		this.denoRuntimePath = path.join(this.tempFilePath, 'deno-runtime', 'main.ts');
-		this.denoEphemeralConfigPath = this.denoConfigPath.replace('.jsonc', '.runtime.jsonc');
+		this.denoEphemeralConfigPath = path.join(this.tempFilePath, 'deno.runtime.jsonc');
 
 		/**
 		 * Deno 2.x refuses to run scripts inside the node_modules, so we create a symlink to the deno runtime files in the temp directory
@@ -81,8 +83,8 @@ export class DenoRuntimeSubprocessController extends BaseRuntimeSubprocessContro
 			}
 		}
 
-		// Generate a runtime config with the resolved absolute path for @rocket.chat/apps-engine/
-		generateEphemeralDenoConfig(this.denoEphemeralConfigPath, this.denoConfigPath, this.appsEnginePath);
+		// Generate a runtime config with the resolved absolute path for @rocket.chat/apps-engine/ and @rocket.chat/apps/ paths
+		generateEphemeralDenoConfig(this.denoEphemeralConfigPath, this.denoConfigPath, this.appsEnginePath, this.packagePath);
 	}
 
 	protected buildProcessConfiguration(): ProcessConfiguration {
diff --git a/packages/fuselage-ui-kit/src/blocks/InfoCard.tsx b/packages/fuselage-ui-kit/src/blocks/InfoCard.tsx
index d11fbf3603367..e34ed167f55db 100644
--- a/packages/fuselage-ui-kit/src/blocks/InfoCard.tsx
+++ b/packages/fuselage-ui-kit/src/blocks/InfoCard.tsx
@@ -32,18 +32,18 @@ const InfoCard = ({ block, surfaceRenderer, context }: InfoCardProps) => {
 						justifyContent='space-between'
 						flexDirection='row'
 					>
-						<Box display='flex' alignItems='center' flexDirection='row' mi={-4}>
+						<Box display='flex' alignItems='center' flexDirection='row' marginInline={-4}>
 							{elements.map((element, index) => {
 								if (element.type === 'icon') {
 									return (
-										<Box key={index} mi={4}>
+										<Box key={index} marginInline={4}>
 											<IconElement block={element} context={context} surfaceRenderer={surfaceRenderer} index={index} />
 										</Box>
 									);
 								}
 								if (element.type === 'plain_text' || element.type === 'mrkdwn') {
 									return (
-										<Box key={index} mi={4}>
+										<Box key={index} marginInline={4}>
 											<>{surfaceRenderer.renderTextObject(element, index, UiKit.BlockContext.NONE)}</>
 										</Box>
 									);
diff --git a/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/ChannelsSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/ChannelsSelectElement.tsx
index 8788bf31cd4f3..5bb7356726601 100644
--- a/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/ChannelsSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/ChannelsSelectElement.tsx
@@ -33,9 +33,9 @@ const ChannelsSelectElement = ({ block, context }: ChannelsSelectElementProps) =
 			filter={filter}
 			setFilter={setFilter}
 			renderSelected={({ selected: { value, label } }) => (
-				<Chip height='x20' value={value} mie={4}>
+				<Chip height='x20' value={value} marginInlineEnd={4}>
 					<RoomAvatar size='x20' room={{ _id: value, ...label, type: label?.type || 'c' }} />
-					<Box verticalAlign='middle' is='span' margin='none' mi={4}>
+					<Box verticalAlign='middle' is='span' margin='none' marginInline={4}>
 						{label.name}
 					</Box>
 				</Chip>
diff --git a/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/MultiChannelsSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/MultiChannelsSelectElement.tsx
index 7b6b8e66cc2be..be47afeaec8fe 100644
--- a/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/MultiChannelsSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/ChannelsSelectElement/MultiChannelsSelectElement.tsx
@@ -36,7 +36,7 @@ const MultiChannelsSelectElement = ({ block, context }: MultiChannelsSelectProps
 			renderSelected={({ selected: { value, label }, onRemove, ...props }) => (
 				<Chip key={value} {...props} value={value} onClick={onRemove}>
 					<RoomAvatar size='x20' room={{ _id: value, ...label, type: label?.type || 'c' }} />
-					<Box is='span' margin='none' mis={4}>
+					<Box is='span' margin='none' marginInlineStart={4}>
 						{label?.name}
 					</Box>
 				</Chip>
diff --git a/packages/fuselage-ui-kit/src/elements/CheckboxElement.tsx b/packages/fuselage-ui-kit/src/elements/CheckboxElement.tsx
index a424336cc1e8e..c7f0a01dca057 100644
--- a/packages/fuselage-ui-kit/src/elements/CheckboxElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/CheckboxElement.tsx
@@ -16,9 +16,9 @@ const CheckboxElement = ({ block, context, surfaceRenderer }: CheckboxElementPro
 				const isChecked = value?.includes(option.value);
 
 				return (
-					<Box key={option.value} pb={4}>
+					<Box key={option.value} paddingBlock={4}>
 						<CheckBox disabled={loading} value={option.value} checked={isChecked} onChange={action} />
-						<Box is='label' pis={8}>
+						<Box is='label' paddingInlineStart={8}>
 							{surfaceRenderer.renderTextObject(option.text, 0, UiKit.BlockContext.NONE)}
 						</Box>
 					</Box>
diff --git a/packages/fuselage-ui-kit/src/elements/RadioButtonElement.tsx b/packages/fuselage-ui-kit/src/elements/RadioButtonElement.tsx
index f70bb1a3016ce..ea0c8238f3bd2 100644
--- a/packages/fuselage-ui-kit/src/elements/RadioButtonElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/RadioButtonElement.tsx
@@ -13,9 +13,9 @@ const RadioButtonElement = ({ block, context, surfaceRenderer }: RadioButtonElem
 	return (
 		<Box>
 			{options.map((option: UiKit.Option) => (
-				<Box key={option.value} pb={4}>
+				<Box key={option.value} paddingBlock={4}>
 					<RadioButton disabled={loading} checked={value === option.value} value={option.value} onChange={action} />
-					<Box is='label' pis={8}>
+					<Box is='label' paddingInlineStart={8}>
 						{surfaceRenderer.renderTextObject(option.text, 0, UiKit.BlockContext.NONE)}
 					</Box>
 				</Box>
diff --git a/packages/fuselage-ui-kit/src/elements/ToggleSwitchElement.tsx b/packages/fuselage-ui-kit/src/elements/ToggleSwitchElement.tsx
index b064f4812f5af..ffaaa75492470 100644
--- a/packages/fuselage-ui-kit/src/elements/ToggleSwitchElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/ToggleSwitchElement.tsx
@@ -16,9 +16,9 @@ const ToggleSwitchElement = ({ block, context, surfaceRenderer }: ToggleSwitchEl
 				const isChecked = value.includes(option.value);
 
 				return (
-					<Box key={option.value} pb={4}>
+					<Box key={option.value} paddingBlock={4}>
 						<ToggleSwitch disabled={loading} value={option.value} checked={isChecked} onChange={action} />
-						<Box is='label' pis={8}>
+						<Box is='label' paddingInlineStart={8}>
 							{surfaceRenderer.renderTextObject(option.text, 0, UiKit.BlockContext.NONE)}
 						</Box>
 					</Box>
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
index 700c38548c630..6a2c55f9ce7f2 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/MultiUsersSelectElement.tsx
@@ -36,9 +36,9 @@ const MultiUsersSelectElement = ({ block, context }: MultiUsersSelectElementProp
 			onChange={handleChange}
 			multiple
 			renderSelected={({ selected: { value, label }, onRemove, ...props }) => (
-				<Chip {...props} height='x20' value={value} onClick={onRemove} mie={4}>
+				<Chip {...props} height='x20' value={value} onClick={onRemove} marginInlineEnd={4}>
 					<UserAvatar size='x20' username={value} />
-					<Box is='span' margin='none' mis={4}>
+					<Box is='span' margin='none' marginInlineStart={4}>
 						{label}
 					</Box>
 				</Chip>
diff --git a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
index 98d960fb7819c..3d02081b5b381 100644
--- a/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
+++ b/packages/fuselage-ui-kit/src/elements/UsersSelectElement/UsersSelectElement.tsx
@@ -40,9 +40,9 @@ const UsersSelectElement = ({ block, context }: UsersSelectElementProps) => {
 			filter={filter}
 			setFilter={setFilter}
 			renderSelected={({ selected: { value, label } }) => (
-				<Chip height='x20' value={value} mie={4}>
+				<Chip height='x20' value={value} marginInlineEnd={4}>
 					<UserAvatar size='x20' username={value} />
-					<Box verticalAlign='middle' is='span' margin='none' mi={4}>
+					<Box verticalAlign='middle' is='span' margin='none' marginInline={4}>
 						{label}
 					</Box>
 				</Chip>
diff --git a/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.tsx b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.tsx
index 45cd71d660c06..17dd94f1970b0 100644
--- a/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.tsx
+++ b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.tsx
@@ -29,7 +29,7 @@ const AnnouncementBanner = ({ children, className, onClick, ...props }: Announce
 		<Box
 			focusable
 			height='x40'
-			pi={24}
+			paddingInline={24}
 			alignItems='center'
 			display='flex'
 			fontScale='p2m'
@@ -41,7 +41,7 @@ const AnnouncementBanner = ({ children, className, onClick, ...props }: Announce
 			onClick={onClick}
 			{...props}
 		>
-			<Box withTruncatedText w='none'>
+			<Box withTruncatedText width='none'>
 				{children}
 			</Box>
 		</Box>
diff --git a/packages/ui-client/src/components/Contextualbar/ContextualbarHeader.tsx b/packages/ui-client/src/components/Contextualbar/ContextualbarHeader.tsx
index 8412f7a7bbd30..6efb7bd273eed 100644
--- a/packages/ui-client/src/components/Contextualbar/ContextualbarHeader.tsx
+++ b/packages/ui-client/src/components/Contextualbar/ContextualbarHeader.tsx
@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 import { memo } from 'react';
 
 const ContextualbarHeader = (props: ComponentPropsWithoutRef<typeof ContextualbarV2Header>) => (
-	<ContextualbarV2Header mbs={-1} {...props} />
+	<ContextualbarV2Header marginBlockStart={-1} {...props} />
 );
 export default memo(ContextualbarHeader);
diff --git a/packages/ui-client/src/components/Contextualbar/ContextualbarSkeletonBody.tsx b/packages/ui-client/src/components/Contextualbar/ContextualbarSkeletonBody.tsx
index 9c150bc7cbf18..1fb3f97bfd06c 100644
--- a/packages/ui-client/src/components/Contextualbar/ContextualbarSkeletonBody.tsx
+++ b/packages/ui-client/src/components/Contextualbar/ContextualbarSkeletonBody.tsx
@@ -7,8 +7,8 @@ const ContextualbarSkeletonBody = () => (
 		<ContextualbarHeader>
 			<Skeleton width='100%' />
 		</ContextualbarHeader>
-		<Box p={24}>
-			<Skeleton mbe={4} width='x32' height='x32' variant='rect' />
+		<Box padding={24}>
+			<Skeleton marginBlockEnd={4} width='x32' height='x32' variant='rect' />
 			{Array(5)
 				.fill(5)
 				.map((_, index) => (
diff --git a/packages/ui-client/src/components/DotLeader.tsx b/packages/ui-client/src/components/DotLeader.tsx
index 5a9b1db5fb568..d1fd02d0853b9 100644
--- a/packages/ui-client/src/components/DotLeader.tsx
+++ b/packages/ui-client/src/components/DotLeader.tsx
@@ -7,7 +7,15 @@ export type DotLeaderProps = {
 };
 
 const DotLeader = ({ color = 'neutral-300', dotSize = 'x2' }: DotLeaderProps) => (
-	<Box flexGrow={1} h='full' alignSelf='flex-end' borderBlockEndStyle='dotted' borderBlockEndWidth={dotSize} m={2} borderColor={color} />
+	<Box
+		flexGrow={1}
+		height='full'
+		alignSelf='flex-end'
+		borderBlockEndStyle='dotted'
+		borderBlockEndWidth={dotSize}
+		margin={2}
+		borderColor={color}
+	/>
 );
 
 export default DotLeader;
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx
index 2a85ad0ba1e87..07d976aa63e2c 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerCategoryHeader.tsx
@@ -4,7 +4,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type EmojiPickerCategoryHeaderProps = ComponentPropsWithoutRef<typeof ButtonGroup>;
 
 const EmojiPickerCategoryHeader = (props: EmojiPickerCategoryHeaderProps) => (
-	<Box mbs={12} mi={12}>
+	<Box marginBlockStart={12} marginInline={12}>
 		<ButtonGroup small stretch {...props} />
 	</Box>
 );
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerContainer.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerContainer.tsx
index f3ff2736d91ac..2c617bd65b441 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerContainer.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerContainer.tsx
@@ -10,11 +10,11 @@ const EmojiPickerContainer = forwardRef<HTMLElement, Omit<AllHTMLAttributes<HTML
 				color='default'
 				ref={ref}
 				height='x480'
-				bg='light'
+				backgroundColor='light'
 				borderRadius={4}
 				display='flex'
 				flexDirection='column'
-				mb='neg-x12'
+				marginBlock='neg-x12'
 			/>
 		);
 	},
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerFooter.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerFooter.tsx
index 260bff88231c2..0f15408f263d3 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerFooter.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerFooter.tsx
@@ -2,7 +2,16 @@ import { Box } from '@rocket.chat/fuselage';
 import type { AllHTMLAttributes } from 'react';
 
 const EmojiPickerFooter = (props: Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>) => (
-	<Box {...props} bg='neutral' display='flex' flexDirection='column' alignItems='center' color='secondary-info' fontScale='micro' pb={8} />
+	<Box
+		{...props}
+		backgroundColor='neutral'
+		display='flex'
+		flexDirection='column'
+		alignItems='center'
+		color='secondary-info'
+		fontScale='micro'
+		paddingBlock={8}
+	/>
 );
 
 export default EmojiPickerFooter;
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerHeader.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerHeader.tsx
index 086aaf164f1bf..139a889452be3 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerHeader.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerHeader.tsx
@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { AllHTMLAttributes } from 'react';
 
 const EmojiPickerHeader = (props: Omit<AllHTMLAttributes<HTMLDivElement>, 'is' | 'style'>) => (
-	<Box {...props} display='flex' alignItems='center' pbs={12} pi={12} />
+	<Box {...props} display='flex' alignItems='center' paddingBlockStart={12} paddingInline={12} />
 );
 
 export default EmojiPickerHeader;
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerListArea.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerListArea.tsx
index 0faeb4b62a0c6..3ba5f7ae4fcb7 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerListArea.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerListArea.tsx
@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { AllHTMLAttributes } from 'react';
 
 const EmojiPickerListArea = (props: Omit<AllHTMLAttributes<HTMLDivElement>, 'is' | 'style'>) => (
-	<Box {...props} w='full' h='full' pis={12} overflow='hidden' />
+	<Box {...props} width='full' height='full' paddingInlineStart={12} overflow='hidden' />
 );
 
 export default EmojiPickerListArea;
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerLoadMore.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerLoadMore.tsx
index 6afe44502aafc..b5c471e377de7 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerLoadMore.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerLoadMore.tsx
@@ -2,7 +2,7 @@ import { Box, Button } from '@rocket.chat/fuselage';
 import type { AllHTMLAttributes } from 'react';
 
 const EmojiPickerLoadMore = ({ children, ...props }: Omit<AllHTMLAttributes<HTMLButtonElement>, 'style' | 'is'>) => (
-	<Box display='flex' flexDirection='column' alignItems='center' mbe={8}>
+	<Box display='flex' flexDirection='column' alignItems='center' marginBlockEnd={8}>
 		<Button {...props} small>
 			{children}
 		</Button>
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerNotFound.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerNotFound.tsx
index 170f7793dbec3..dab6003badb74 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerNotFound.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerNotFound.tsx
@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { AllHTMLAttributes } from 'react';
 
 const EmojiPickerNotFound = (props: Omit<AllHTMLAttributes<HTMLDivElement>, 'is' | 'style'>) => (
-	<Box {...props} display='flex' flexDirection='column' alignItems='center' fontScale='c1' mb={8} w='full' />
+	<Box {...props} display='flex' flexDirection='column' alignItems='center' fontScale='c1' marginBlock={8} width='full' />
 );
 
 export default EmojiPickerNotFound;
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerPreview.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerPreview.tsx
index 8b4873837611e..c88d20c5d610d 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerPreview.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerPreview.tsx
@@ -15,7 +15,7 @@ const EmojiPickerPreview = ({ emoji, name, ...props }: EmojiPickerPreviewProps)
 	return (
 		<Box {...props} display='flex' alignItems='center'>
 			<Box className={previewEmojiClass} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(emoji) }}></Box>
-			<Box mis={4} display='flex' flexDirection='column' maxWidth='x160'>
+			<Box marginInlineStart={4} display='flex' flexDirection='column' maxWidth='x160'>
 				<Box fontScale='c2' withTruncatedText>
 					{name}
 				</Box>
diff --git a/packages/ui-client/src/components/EmojiPicker/EmojiPickerPreviewArea.tsx b/packages/ui-client/src/components/EmojiPicker/EmojiPickerPreviewArea.tsx
index 0081ddad9f2d5..dbc3ea4370c50 100644
--- a/packages/ui-client/src/components/EmojiPicker/EmojiPickerPreviewArea.tsx
+++ b/packages/ui-client/src/components/EmojiPicker/EmojiPickerPreviewArea.tsx
@@ -4,8 +4,8 @@ import type { AllHTMLAttributes } from 'react';
 const EmojiPickerPreviewArea = (props: Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>) => (
 	<Box
 		{...props}
-		p={12}
-		bg='tint'
+		padding={12}
+		backgroundColor='tint'
 		color='secondary-info'
 		display='flex'
 		alignItems='center'
diff --git a/packages/ui-client/src/components/FilePreviewIcon.tsx b/packages/ui-client/src/components/FilePreviewIcon.tsx
index 08ab602a6303a..705eee5fc644a 100644
--- a/packages/ui-client/src/components/FilePreviewIcon.tsx
+++ b/packages/ui-client/src/components/FilePreviewIcon.tsx
@@ -8,7 +8,7 @@ const FilePreviewIcon = ({ format }: FilePreviewIconProps) => {
 			width='x48'
 			height='x48'
 			borderRadius={4}
-			bg='surface-neutral'
+			backgroundColor='surface-neutral'
 			justifyContent='center'
 			display='flex'
 			flexDirection='column'
diff --git a/packages/ui-client/src/components/GenericTable/GenericTable.stories.tsx b/packages/ui-client/src/components/GenericTable/GenericTable.stories.tsx
index 068c347c6fef3..1d483ed1c9d43 100644
--- a/packages/ui-client/src/components/GenericTable/GenericTable.stories.tsx
+++ b/packages/ui-client/src/components/GenericTable/GenericTable.stories.tsx
@@ -37,7 +37,7 @@ const results = Array.from({ length: 10 }, (_, i) => ({
 
 const filter = (
 	<>
-		<Box mb={16} is='form' display='flex' flexDirection='column'>
+		<Box marginBlock={16} is='form' display='flex' flexDirection='column'>
 			<TextInput flexShrink={0} placeholder='Search...' endAddon={<Icon name='magnifier' size='x20' />} />
 		</Box>
 	</>
diff --git a/packages/ui-client/src/components/GenericTable/GenericTable.tsx b/packages/ui-client/src/components/GenericTable/GenericTable.tsx
index a4857243652a6..0e6a15512918c 100644
--- a/packages/ui-client/src/components/GenericTable/GenericTable.tsx
+++ b/packages/ui-client/src/components/GenericTable/GenericTable.tsx
@@ -14,7 +14,7 @@ export const GenericTable = forwardRef(function GenericTable(
 	ref: ForwardedRef<HTMLElement>,
 ) {
 	return (
-		<Box mi='neg-x24' pi={24} flexShrink={1} flexGrow={1} ref={ref} overflow='hidden'>
+		<Box marginInline='neg-x24' paddingInline={24} flexShrink={1} flexGrow={1} ref={ref} overflow='hidden'>
 			<CustomScrollbars overflowX>
 				<Table fixed={fixed} sticky {...props}>
 					{children}
diff --git a/packages/ui-client/src/components/GenericTable/GenericTableLoadingRow.tsx b/packages/ui-client/src/components/GenericTable/GenericTableLoadingRow.tsx
index b8f38d884c776..dd2c8020ea888 100644
--- a/packages/ui-client/src/components/GenericTable/GenericTableLoadingRow.tsx
+++ b/packages/ui-client/src/components/GenericTable/GenericTableLoadingRow.tsx
@@ -7,7 +7,7 @@ export const GenericTableLoadingRow = ({ cols }: GenericTableLoadingRowProps) =>
 		<TableCell>
 			<Box display='flex'>
 				<Skeleton variant='rect' height={40} width={40} />
-				<Box mi={8} flexGrow={1}>
+				<Box marginInline={8} flexGrow={1}>
 					<Skeleton width='100%' />
 					<Skeleton width='100%' />
 				</Box>
diff --git a/packages/ui-client/src/components/Header/Header.tsx b/packages/ui-client/src/components/Header/Header.tsx
index 536cb827360c1..faf5342750815 100644
--- a/packages/ui-client/src/components/Header/Header.tsx
+++ b/packages/ui-client/src/components/Header/Header.tsx
@@ -17,7 +17,7 @@ const Header = (props: HeaderProps) => (
 		flexShrink={0}
 	>
 		<Box
-			pi='x16'
+			paddingInline='x16'
 			height='x44'
 			display='flex'
 			flexGrow={1}
@@ -25,7 +25,7 @@ const Header = (props: HeaderProps) => (
 			alignItems='center'
 			overflow='hidden'
 			flexDirection='row'
-			bg='room'
+			backgroundColor='room'
 			{...props}
 		/>
 		<HeaderDivider />
diff --git a/packages/ui-client/src/components/Header/HeaderAvatar.tsx b/packages/ui-client/src/components/Header/HeaderAvatar.tsx
index c70660324fde1..cee02876a97f7 100644
--- a/packages/ui-client/src/components/Header/HeaderAvatar.tsx
+++ b/packages/ui-client/src/components/Header/HeaderAvatar.tsx
@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type HeaderAvatarProps = ComponentPropsWithoutRef<typeof Box>;
 
-const HeaderAvatar = (props: HeaderAvatarProps) => <Box mi={4} display='flex' alignItems='center' {...props} />;
+const HeaderAvatar = (props: HeaderAvatarProps) => <Box marginInline={4} display='flex' alignItems='center' {...props} />;
 
 export default HeaderAvatar;
diff --git a/packages/ui-client/src/components/Header/HeaderContent.tsx b/packages/ui-client/src/components/Header/HeaderContent.tsx
index bd94ade6999bf..f2084f4b40b5c 100644
--- a/packages/ui-client/src/components/Header/HeaderContent.tsx
+++ b/packages/ui-client/src/components/Header/HeaderContent.tsx
@@ -4,7 +4,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type HeaderContentProps = ComponentPropsWithoutRef<typeof Box>;
 
 const HeaderContent = (props: HeaderContentProps) => (
-	<Box flexGrow={1} width={1} flexShrink={1} mi={4} display='flex' justifyContent='center' flexDirection='column' {...props} />
+	<Box flexGrow={1} width={1} flexShrink={1} marginInline={4} display='flex' justifyContent='center' flexDirection='column' {...props} />
 );
 
 export default HeaderContent;
diff --git a/packages/ui-client/src/components/Header/HeaderContentRow.tsx b/packages/ui-client/src/components/Header/HeaderContentRow.tsx
index c77a97da2f48d..3940831d79572 100644
--- a/packages/ui-client/src/components/Header/HeaderContentRow.tsx
+++ b/packages/ui-client/src/components/Header/HeaderContentRow.tsx
@@ -4,7 +4,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type HeaderContentRowProps = ComponentPropsWithoutRef<typeof Box>;
 
 const HeaderContentRow = (props: HeaderContentRowProps) => (
-	<Box alignItems='center' flexShrink={1} flexGrow={1} display='flex' w='full' {...props} />
+	<Box alignItems='center' flexShrink={1} flexGrow={1} display='flex' width='full' {...props} />
 );
 
 export default HeaderContentRow;
diff --git a/packages/ui-client/src/components/Header/HeaderDivider.tsx b/packages/ui-client/src/components/Header/HeaderDivider.tsx
index 2beadec2d0882..dd24184ae53e2 100644
--- a/packages/ui-client/src/components/Header/HeaderDivider.tsx
+++ b/packages/ui-client/src/components/Header/HeaderDivider.tsx
@@ -1,5 +1,5 @@
 import { Divider } from '@rocket.chat/fuselage';
 
-const HeaderDivider = () => <Divider mbs={-2} mbe={0} />;
+const HeaderDivider = () => <Divider marginBlockStart={-2} marginBlockEnd={0} />;
 
 export default HeaderDivider;
diff --git a/packages/ui-client/src/components/Header/HeaderState.tsx b/packages/ui-client/src/components/Header/HeaderState.tsx
index 0368175d08f7c..7603b4a4411ab 100644
--- a/packages/ui-client/src/components/Header/HeaderState.tsx
+++ b/packages/ui-client/src/components/Header/HeaderState.tsx
@@ -12,6 +12,6 @@ export type HeaderStateProps =
 	  });
 
 const HeaderState = (props: HeaderStateProps) =>
-	props.onClick ? <IconButton tiny mie={4} {...props} /> : <Icon size='x16' mie={8} name={props.icon} {...props} />;
+	props.onClick ? <IconButton tiny marginInlineEnd={4} {...props} /> : <Icon size='x16' marginInlineEnd={8} name={props.icon} {...props} />;
 
 export default HeaderState;
diff --git a/packages/ui-client/src/components/Header/HeaderSubtitle.tsx b/packages/ui-client/src/components/Header/HeaderSubtitle.tsx
index 5a9cc063ae51f..484f815f4ccd8 100644
--- a/packages/ui-client/src/components/Header/HeaderSubtitle.tsx
+++ b/packages/ui-client/src/components/Header/HeaderSubtitle.tsx
@@ -4,7 +4,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type HeaderSubtitleProps = ComponentPropsWithoutRef<typeof Box>;
 
 const HeaderSubtitle = (props: HeaderSubtitleProps) => (
-	<Box color='hint' fontScale='p2' pb='x4' flexGrow={1} withTruncatedText {...props} />
+	<Box color='hint' fontScale='p2' paddingBlock='x4' flexGrow={1} withTruncatedText {...props} />
 );
 
 export default HeaderSubtitle;
diff --git a/packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx b/packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx
index 2123e2c360c8d..a5819541b86c6 100644
--- a/packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTag/HeaderTag.tsx
@@ -4,7 +4,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type HeaderTagProps = ComponentPropsWithoutRef<typeof Tag>;
 
 const HeaderTag = ({ children, ...props }: HeaderTagProps) => (
-	<Box p={4} withTruncatedText minWidth='x32'>
+	<Box padding={4} withTruncatedText minWidth='x32'>
 		<Tag medium {...props}>
 			{children}
 		</Tag>
diff --git a/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx b/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx
index 262c3df71b864..67c07c9817c59 100644
--- a/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTag/HeaderTagIcon.tsx
@@ -16,7 +16,7 @@ const HeaderTagIcon = ({ icon }: HeaderIconProps) => {
 			{icon}
 		</Box>
 	) : (
-		<Icon size='x12' mie={4} {...icon} />
+		<Icon size='x12' marginInlineEnd={4} {...icon} />
 	);
 };
 
diff --git a/packages/ui-client/src/components/Header/HeaderTitle.tsx b/packages/ui-client/src/components/Header/HeaderTitle.tsx
index 11886962ccc2e..1e2f55ed2689b 100644
--- a/packages/ui-client/src/components/Header/HeaderTitle.tsx
+++ b/packages/ui-client/src/components/Header/HeaderTitle.tsx
@@ -3,6 +3,8 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type HeaderTitleProps = ComponentPropsWithoutRef<typeof Box>;
 
-const HeaderTitle = (props: HeaderTitleProps) => <Box color='titles-labels' mi={4} is='h1' fontScale='h4' withTruncatedText {...props} />;
+const HeaderTitle = (props: HeaderTitleProps) => (
+	<Box color='titles-labels' marginInline={4} is='h1' fontScale='h4' withTruncatedText {...props} />
+);
 
 export default HeaderTitle;
diff --git a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx
index f3823002e88e1..a79e6ddfdabd7 100644
--- a/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx
+++ b/packages/ui-client/src/components/Header/HeaderToolbar/HeaderToolbarDivider.tsx
@@ -1,5 +1,5 @@
 import { Divider } from '@rocket.chat/fuselage';
 
-const HeaderToolbarDivider = () => <Divider mi={4} vertical />;
+const HeaderToolbarDivider = () => <Divider marginInline={4} vertical />;
 
 export default HeaderToolbarDivider;
diff --git a/packages/ui-client/src/components/InfoPanel/InfoPanel.tsx b/packages/ui-client/src/components/InfoPanel/InfoPanel.tsx
index bf2495cc4776b..f6b72e44343bc 100644
--- a/packages/ui-client/src/components/InfoPanel/InfoPanel.tsx
+++ b/packages/ui-client/src/components/InfoPanel/InfoPanel.tsx
@@ -6,7 +6,7 @@ export type InfoPanelProps = {
 };
 
 const InfoPanel = ({ children }: InfoPanelProps) => (
-	<Box flexGrow={1} mb='neg-x24'>
+	<Box flexGrow={1} marginBlock='neg-x24'>
 		{children}
 	</Box>
 );
diff --git a/packages/ui-client/src/components/InfoPanel/InfoPanelField.tsx b/packages/ui-client/src/components/InfoPanel/InfoPanelField.tsx
index 233543ccd2819..8c968eeac78c5 100644
--- a/packages/ui-client/src/components/InfoPanel/InfoPanelField.tsx
+++ b/packages/ui-client/src/components/InfoPanel/InfoPanelField.tsx
@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type InfoPanelFieldProps = ComponentPropsWithoutRef<typeof Box>;
 
-const InfoPanelField = (props: InfoPanelFieldProps) => <Box mb={16} {...props} />;
+const InfoPanelField = (props: InfoPanelFieldProps) => <Box marginBlock={16} {...props} />;
 
 export default InfoPanelField;
diff --git a/packages/ui-client/src/components/InfoPanel/InfoPanelLabel.tsx b/packages/ui-client/src/components/InfoPanel/InfoPanelLabel.tsx
index 31713b9fdc15f..bc0212eb58999 100644
--- a/packages/ui-client/src/components/InfoPanel/InfoPanelLabel.tsx
+++ b/packages/ui-client/src/components/InfoPanel/InfoPanelLabel.tsx
@@ -4,9 +4,9 @@ import type { ComponentPropsWithoutRef } from 'react';
 export type InfoPanelLabelProps = ComponentPropsWithoutRef<typeof Box>;
 
 const InfoPanelLabel = ({ title, children, ...props }: InfoPanelLabelProps) => (
-	<Box mb={8} fontScale='p2m' color='default' {...props}>
+	<Box marginBlock={8} fontScale='p2m' color='default' {...props}>
 		{children}
-		{title && <Icon name='info' color='secondary-info' mi={4} size='x16' title={title} />}
+		{title && <Icon name='info' color='secondary-info' marginInline={4} size='x16' title={title} />}
 	</Box>
 );
 
diff --git a/packages/ui-client/src/components/InfoPanel/InfoPanelSection.tsx b/packages/ui-client/src/components/InfoPanel/InfoPanelSection.tsx
index 72a9e4e8f4d2b..99abe6db45db9 100644
--- a/packages/ui-client/src/components/InfoPanel/InfoPanelSection.tsx
+++ b/packages/ui-client/src/components/InfoPanel/InfoPanelSection.tsx
@@ -3,6 +3,6 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 export type InfoPanelSectionProps = ComponentPropsWithoutRef<typeof Box>;
 
-const InfoPanelSection = (props: InfoPanelSectionProps) => <Box mb={24} {...props} />;
+const InfoPanelSection = (props: InfoPanelSectionProps) => <Box marginBlock={24} {...props} />;
 
 export default InfoPanelSection;
diff --git a/packages/ui-client/src/components/InfoPanel/InfoPanelText.tsx b/packages/ui-client/src/components/InfoPanel/InfoPanelText.tsx
index cc3a97ac303b0..09cff578c6121 100644
--- a/packages/ui-client/src/components/InfoPanel/InfoPanelText.tsx
+++ b/packages/ui-client/src/components/InfoPanel/InfoPanelText.tsx
@@ -8,6 +8,6 @@ const wordBreak = css`
 
 export type InfoPanelTextProps = ComponentPropsWithoutRef<typeof Box>;
 
-const InfoPanelText = (props: InfoPanelTextProps) => <Box mb={8} fontScale='p2' color='hint' className={wordBreak} {...props} />;
+const InfoPanelText = (props: InfoPanelTextProps) => <Box marginBlock={8} fontScale='p2' color='hint' className={wordBreak} {...props} />;
 
 export default InfoPanelText;
diff --git a/packages/ui-client/src/components/InfoPanel/InfoPanelTitle.tsx b/packages/ui-client/src/components/InfoPanel/InfoPanelTitle.tsx
index 7b2063bc93ba8..a95bb53989414 100644
--- a/packages/ui-client/src/components/InfoPanel/InfoPanelTitle.tsx
+++ b/packages/ui-client/src/components/InfoPanel/InfoPanelTitle.tsx
@@ -12,7 +12,7 @@ const isValidIcon = (icon: ReactNode): icon is IconName => typeof icon === 'stri
 const InfoPanelTitle = ({ title, icon }: InfoPanelTitleProps) => (
 	<Box display='flex' flexShrink={0} alignItems='center' fontScale='h4' color='default' withTruncatedText>
 		{isValidIcon(icon) ? <Icon name={icon} size='x22' /> : icon}
-		<Box mis={8} withTruncatedText title={title}>
+		<Box marginInlineStart={8} withTruncatedText title={title}>
 			{title}
 		</Box>
 	</Box>
diff --git a/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx b/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx
index b745777324362..4b5c9c146b08c 100644
--- a/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx
+++ b/packages/ui-client/src/components/Modal/GenericModal/withDoNotAskAgain.tsx
@@ -50,7 +50,7 @@ function withDoNotAskAgain<T extends RequiredModalProps>(Component: ComponentTyp
 				dontAskAgain={
 					<Box display='flex' flexDirection='row'>
 						<CheckBox id={dontAskAgainId} checked={state} onChange={onChange} name='dont_ask_again' />
-						<Label color='annotation' fontScale='p2' mis={8} htmlFor={dontAskAgainId}>
+						<Label color='annotation' fontScale='p2' marginInlineStart={8} htmlFor={dontAskAgainId}>
 							{t('Dont_ask_me_again')}
 						</Label>
 					</Box>
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx
index b4858ef6e7eb5..f2f53aa24a6e9 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx
@@ -33,7 +33,7 @@ const MultiSelectCustomAnchor = forwardRef<HTMLElement, MultiSelectCustomAnchorP
 			display='flex'
 			justifyContent='space-between'
 			alignItems='center'
-			h='x40'
+			height='x40'
 			className={['rcx-input-box__wrapper', customStyle, ...(Array.isArray(className) ? className : [className])].filter(Boolean)}
 			{...props}
 		>
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
index 1b57ac1f11805..f5d624828c364 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx
@@ -37,9 +37,18 @@ const MultiSelectCustomList = ({
 	const filteredOptions = useFilteredOptions(text, options);
 
 	return (
-		<Tile overflow='auto' pb={12} pi={0} elevation='2' w='full' bg='light' borderRadius={2} maxHeight='50vh'>
+		<Tile
+			overflow='auto'
+			paddingBlock={12}
+			paddingInline={0}
+			elevation='2'
+			width='full'
+			backgroundColor='light'
+			borderRadius={2}
+			maxHeight='50vh'
+		>
 			{searchBarText && (
-				<Box pi={12} mbe={12}>
+				<Box paddingInline={12} marginBlockEnd={12}>
 					<SearchInput
 						name='select-search'
 						placeholder={t(searchBarText as TranslationKey)}
@@ -53,16 +62,22 @@ const MultiSelectCustomList = ({
 			{filteredOptions.map((option) => (
 				<Fragment key={option.id}>
 					{option.isGroupTitle || !option.hasOwnProperty('checked') ? (
-						<Box mi='x10' mb={4} fontScale='p2b' color='default'>
+						<Box marginInline='x10' marginBlock={4} fontScale='p2b' color='default'>
 							{t(option.text as TranslationKey)}
 						</Box>
 					) : (
 						<Option key={option.id}>
-							{option.icon && <OptionIcon name={option.icon.name} color={getIconColor(option.icon.color)} mie={4} />}
-							<Box w='full' display='flex' justifyContent='space-between' is='label'>
+							{option.icon && <OptionIcon name={option.icon.name} color={getIconColor(option.icon.color)} marginInlineEnd={4} />}
+							<Box width='full' display='flex' justifyContent='space-between' is='label'>
 								{t(option.text as TranslationKey)}
 
-								<CheckBox checked={option.checked} pi={0} name={option.text} id={option.id} onChange={() => onSelected(option)} />
+								<CheckBox
+									checked={option.checked}
+									paddingInline={0}
+									name={option.text}
+									id={option.id}
+									onChange={() => onSelected(option)}
+								/>
 							</Box>
 						</Option>
 					)}
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx
index f0c63486ed8bd..a06c7815b656a 100644
--- a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx
+++ b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomListWrapper.tsx
@@ -9,7 +9,7 @@ const MultiSelectCustomListWrapper = forwardRef<Element, MultiSelectCustomListWr
 	ref,
 ) {
 	return (
-		<Box ref={ref} zIndex={999} w='full' position='absolute' mbs={40} pbs={4}>
+		<Box ref={ref} zIndex={999} width='full' position='absolute' marginBlockStart={40} paddingBlockStart={4}>
 			{children}
 		</Box>
 	);
diff --git a/packages/ui-client/src/components/Page/Page.tsx b/packages/ui-client/src/components/Page/Page.tsx
index 47a2fd9d4b4f5..8bf36414fff80 100644
--- a/packages/ui-client/src/components/Page/Page.tsx
+++ b/packages/ui-client/src/components/Page/Page.tsx
@@ -20,7 +20,7 @@ const Page = ({ background = 'light', ...props }: PageProps) => {
 				flexShrink={1}
 				height='full'
 				overflow='hidden'
-				bg={background}
+				backgroundColor={background}
 				color='default'
 				{...props}
 			/>
diff --git a/packages/ui-client/src/components/Page/PageBlock.tsx b/packages/ui-client/src/components/Page/PageBlock.tsx
index ecdc596e57332..4a44c1e270b1d 100644
--- a/packages/ui-client/src/components/Page/PageBlock.tsx
+++ b/packages/ui-client/src/components/Page/PageBlock.tsx
@@ -5,7 +5,9 @@ import { forwardRef } from 'react';
 import PageContent from './PageContent';
 
 const PageBlock = forwardRef<HTMLElement, ComponentProps<typeof Box>>(function PageBlock(props, ref) {
-	return <PageContent borderBlockEndColor='transparent' {...props} pb={16} ref={ref} borderBlockEndWidth='default' height='auto' />;
+	return (
+		<PageContent borderBlockEndColor='transparent' {...props} paddingBlock={16} ref={ref} borderBlockEndWidth='default' height='auto' />
+	);
 });
 
 export default PageBlock;
diff --git a/packages/ui-client/src/components/Page/PageFooter.tsx b/packages/ui-client/src/components/Page/PageFooter.tsx
index 2013c9041ce86..0b7dca0bbfc68 100644
--- a/packages/ui-client/src/components/Page/PageFooter.tsx
+++ b/packages/ui-client/src/components/Page/PageFooter.tsx
@@ -6,7 +6,7 @@ export type PageFooterProps = { isDirty: boolean } & ComponentProps<typeof Box>;
 const PageFooter = ({ children, isDirty, ...props }: PageFooterProps) => {
 	return (
 		<AnimatedVisibility visibility={isDirty ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN}>
-			<Box elevation='1' borderWidth={0} borderColor='transparent' minHeight='x64' pb={8} {...props}>
+			<Box elevation='1' borderWidth={0} borderColor='transparent' minHeight='x64' paddingBlock={8} {...props}>
 				<Box
 					height='100%'
 					marginInline={24}
diff --git a/packages/ui-client/src/components/Page/PageHeaderNoShadow.tsx b/packages/ui-client/src/components/Page/PageHeaderNoShadow.tsx
index d00cfbdec13ea..11b67977bb387 100644
--- a/packages/ui-client/src/components/Page/PageHeaderNoShadow.tsx
+++ b/packages/ui-client/src/components/Page/PageHeaderNoShadow.tsx
@@ -20,7 +20,7 @@ const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props
 	useDocumentTitle(typeof title === 'string' ? title : undefined);
 
 	return (
-		<Box is='header' borderBlockEndWidth='default' pb={8} borderBlockEndColor='transparent' {...props}>
+		<Box is='header' borderBlockEndWidth='default' paddingBlock={8} borderBlockEndColor='transparent' {...props}>
 			<Box
 				height='100%'
 				marginInline={24}
@@ -36,7 +36,7 @@ const PageHeaderNoShadow = ({ children = undefined, title, onClickBack, ...props
 						<SidebarToggler />
 					</HeaderToolbar>
 				) : null}
-				{onClickBack && <IconButton small mie={8} icon='arrow-back' onClick={onClickBack} title={t('Back')} />}
+				{onClickBack && <IconButton small marginInlineEnd={8} icon='arrow-back' onClick={onClickBack} title={t('Back')} />}
 				<Box is='h1' fontScale='h2' flexGrow={1}>
 					{title}
 				</Box>
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
index d0e1c67b9f6eb..a1552cf9d02c1 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierItem.tsx
@@ -35,14 +35,14 @@ export const PasswordVerifierItem = ({ isValid, ...props }: PasswordVerifierItem
 			display='flex'
 			flexBasis={props.vertical ? '100%' : '50%'}
 			alignItems='center'
-			mbe={8}
+			marginBlockEnd={8}
 			fontScale='c1'
 			color={icon.color}
 			role='listitem'
 			aria-hidden='false'
 			aria-labelledby={`${iconId} ${textId}`}
 		>
-			<Icon id={iconId} aria-hidden='false' size='x16' mie={4} {...icon} />
+			<Icon id={iconId} aria-hidden='false' size='x16' marginInlineEnd={4} {...icon} />
 			<span id={textId}>{requirementText}</span>
 		</Box>
 	);
diff --git a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
index d77430dded56d..37bde3cb8e8f7 100644
--- a/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
+++ b/packages/ui-client/src/components/PasswordVerifier/PasswordVerifierList.tsx
@@ -24,8 +24,8 @@ export const PasswordVerifierList = ({ id, validations, vertical = true }: Passw
 			<span id={id} hidden>
 				{t('Password_Policy_Aria_Description')}
 			</span>
-			<Box display='flex' flexDirection='column' mbs={8}>
-				<Box mbe={8} fontScale='c2' id={uniqueId} aria-hidden>
+			<Box display='flex' flexDirection='column' marginBlockStart={8}>
+				<Box marginBlockEnd={8} fontScale='c2' id={uniqueId} aria-hidden>
 					{t('Password_must_have')}
 				</Box>
 				<Box display='flex' flexWrap='wrap' role='list' aria-labelledby={uniqueId} aria-live='polite'>
diff --git a/packages/ui-client/src/components/TextSeparator.tsx b/packages/ui-client/src/components/TextSeparator.tsx
index f1ae4137cdf36..4bc59f1d3ebdb 100644
--- a/packages/ui-client/src/components/TextSeparator.tsx
+++ b/packages/ui-client/src/components/TextSeparator.tsx
@@ -9,7 +9,7 @@ export type TextSeparatorProps = {
 };
 
 const TextSeparator = ({ label, value }: TextSeparatorProps) => (
-	<Box display='flex' flexDirection='row' mb={4}>
+	<Box display='flex' flexDirection='row' marginBlock={4}>
 		<Box display='inline-flex' alignItems='center'>
 			{label}
 		</Box>
diff --git a/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx b/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx
index fe4090254e429..59f7d1c912ba6 100644
--- a/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx
+++ b/packages/ui-client/src/components/UserAutoComplete/UserAutoComplete.tsx
@@ -38,9 +38,9 @@ const UserAutoComplete = ({ value, onChange, ...props }: UserAutoCompleteProps)
 			filter={filter}
 			setFilter={setFilter}
 			renderSelected={({ selected: { value, label } }) => (
-				<Chip height='x20' value={value} mie={4}>
+				<Chip height='x20' value={value} marginInlineEnd={4}>
 					<UserAvatar size='x20' username={value} />
-					<Box verticalAlign='middle' is='span' margin='none' mi={4}>
+					<Box verticalAlign='middle' is='span' margin='none' marginInline={4}>
 						{label}
 					</Box>
 				</Chip>
diff --git a/packages/ui-client/src/components/Wizard/Wizard.stories.tsx b/packages/ui-client/src/components/Wizard/Wizard.stories.tsx
index a835615083ecc..1e365a5e3a390 100644
--- a/packages/ui-client/src/components/Wizard/Wizard.stories.tsx
+++ b/packages/ui-client/src/components/Wizard/Wizard.stories.tsx
@@ -44,7 +44,7 @@ const WizardExample = ({ ordered = false }: { ordered?: boolean }) => {
 			<WizardTabs ordered={ordered} />
 
 			<WizardContent id='first-step'>
-				<Box width='100%' height='100%' pbs={24}>
+				<Box width='100%' height='100%' paddingBlockStart={24}>
 					<States>
 						<StatesIcon name='magnifier' />
 						<StatesTitle>First step</StatesTitle>
@@ -56,7 +56,7 @@ const WizardExample = ({ ordered = false }: { ordered?: boolean }) => {
 				</WizardActions>
 			</WizardContent>
 			<WizardContent id='second-step'>
-				<Box width='100%' height='100%' pbs={24}>
+				<Box width='100%' height='100%' paddingBlockStart={24}>
 					<States>
 						<StatesIcon name='magnifier' />
 						<StatesTitle>Second step</StatesTitle>
@@ -69,7 +69,7 @@ const WizardExample = ({ ordered = false }: { ordered?: boolean }) => {
 				</WizardActions>
 			</WizardContent>
 			<WizardContent id='third-step'>
-				<Box width='100%' height='100%' pbs={24}>
+				<Box width='100%' height='100%' paddingBlockStart={24}>
 					<States>
 						<StatesIcon name='magnifier' />
 						<StatesTitle>Third step</StatesTitle>
diff --git a/packages/ui-client/src/components/Wizard/WizardActions.tsx b/packages/ui-client/src/components/Wizard/WizardActions.tsx
index c2947d38cb29d..6e54f1063b37a 100644
--- a/packages/ui-client/src/components/Wizard/WizardActions.tsx
+++ b/packages/ui-client/src/components/Wizard/WizardActions.tsx
@@ -7,9 +7,9 @@ export type WizardActionsProps = {
 };
 
 const WizardActions = ({ annotation, children }: WizardActionsProps) => (
-	<Box className='steps-wizard-footer' pbs={24} display='flex' alignItems='center' justifyContent='end'>
+	<Box className='steps-wizard-footer' paddingBlockStart={24} display='flex' alignItems='center' justifyContent='end'>
 		{annotation ? (
-			<Box mie='auto' fontScale='c1' color='annotation'>
+			<Box marginInlineEnd='auto' fontScale='c1' color='annotation'>
 				{annotation}
 			</Box>
 		) : null}
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposer.tsx b/packages/ui-composer/src/MessageComposer/MessageComposer.tsx
index 4ad7f187ea2c7..751f29fdbb4ef 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposer.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposer.tsx
@@ -12,14 +12,14 @@ const MessageComposer = forwardRef<HTMLElement, MessageComposerProps>(function M
 	return (
 		<Box
 			rcx-input-box__wrapper
-			mbs={2}
-			bg={variant === 'editing' ? 'status-background-warning-2' : undefined}
+			marginBlockStart={2}
+			backgroundColor={variant === 'editing' ? 'status-background-warning-2' : undefined}
 			ref={ref}
 			role='group'
 			display='flex'
 			flexDirection='column'
 			overflow='hidden'
-			p={0}
+			padding={0}
 			{...props}
 		/>
 	);
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerActionsDivider.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerActionsDivider.tsx
index 2f21ccbab7136..39c7b61eb2417 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerActionsDivider.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerActionsDivider.tsx
@@ -2,7 +2,7 @@ import { Divider } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 
 const MessageComposerActionsDivider = ({ height = 'x20', ...props }: ComponentProps<typeof Divider>) => (
-	<Divider vertical mi={4} borderColor='light' mb={0} backgroundColor='selected' height={height} {...props} />
+	<Divider vertical marginInline={4} borderColor='light' marginBlock={0} backgroundColor='selected' height={height} {...props} />
 );
 
 export default MessageComposerActionsDivider;
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFile.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFile.tsx
index 0dde80ad1cc5b..dfc97a8d5f98f 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFile.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFile.tsx
@@ -80,7 +80,7 @@ const MessageComposerFile = ({
 			position='relative'
 			height='x58'
 			width='x234'
-			mie={8}
+			marginInlineEnd={8}
 			onClick={handleClick}
 			{...props}
 		>
@@ -95,7 +95,7 @@ const MessageComposerFile = ({
 			) : (
 				<FilePreviewIcon format={fileFormat} />
 			)}
-			<Box flexGrow={1} withTruncatedText mis={4} display='flex' flexDirection='column'>
+			<Box flexGrow={1} withTruncatedText marginInlineStart={4} display='flex' flexDirection='column'>
 				<Box {...buttonProps} fontScale='p2' color={disabled ? 'disabled' : 'info'} withTruncatedText>
 					{fileTitle}
 				</Box>
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFileGroup.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFileGroup.tsx
index c745b60a1bcf2..7d2dda0eb9735 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFileGroup.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerFile/MessageComposerFileGroup.tsx
@@ -8,9 +8,9 @@ const MessageComposerFileGroup = ({ children, style, ...props }: ComponentProps<
 			display='flex'
 			width='100%'
 			flexDirection='row'
-			pi={8}
-			pbe={8}
-			pbs={2}
+			paddingInline={8}
+			paddingBlockEnd={8}
+			paddingBlockStart={2}
 			overflowX='auto'
 			style={{ whiteSpace: 'nowrap', ...style }}
 			{...props}
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerHint.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerHint.tsx
index abbb8b2208bb6..0343901e367f8 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerHint.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerHint.tsx
@@ -9,8 +9,8 @@ export type MessageComposerHintProps = {
 };
 
 const MessageComposerHint = ({ icon, children, helperText }: MessageComposerHintProps) => (
-	<Box pbs={0} pbe={4} display='flex' flexDirection='row' justifyContent='space-between' alignItems='center'>
-		<Tag icon={icon ? <Icon mie={4} name={icon} size='x12' /> : undefined}>{children}</Tag>
+	<Box paddingBlockStart={0} paddingBlockEnd={4} display='flex' flexDirection='row' justifyContent='space-between' alignItems='center'>
+		<Tag icon={icon ? <Icon marginInlineEnd={4} name={icon} size='x12' /> : undefined}>{children}</Tag>
 		{helperText && (
 			<Box fontScale='c1' color='hint'>
 				{helperText}
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerIcon.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerIcon.tsx
index de48be5583518..a6ae4cd03da68 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerIcon.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerIcon.tsx
@@ -4,6 +4,8 @@ import type { HTMLAttributes } from 'react';
 
 export type MessageComposerIconProps = { name: Keys } & Omit<HTMLAttributes<HTMLElement>, 'is'>;
 
-const MessageComposerIcon = ({ name, ...props }: MessageComposerIconProps) => <Icon name={name} size='x20' mie={4} {...props} />;
+const MessageComposerIcon = ({ name, ...props }: MessageComposerIconProps) => (
+	<Icon name={name} size='x20' marginInlineEnd={4} {...props} />
+);
 
 export default MessageComposerIcon;
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx
index dfe65cffa4c58..da7820fa0696c 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerInput.tsx
@@ -24,8 +24,8 @@ const MessageComposerInput = forwardRef<HTMLTextAreaElement, MessageComposerInpu
 			rows={1}
 			fontScale='p2'
 			ref={ref}
-			pi={12}
-			pb={16}
+			paddingInline={12}
+			paddingBlock={16}
 			borderWidth={0}
 			is='textarea'
 			{...props}
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerSkeleton.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerSkeleton.tsx
index 43682004cfa0b..0231d3183a5a2 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerSkeleton.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerSkeleton.tsx
@@ -4,7 +4,7 @@ import { MessageComposer, MessageComposerToolbar } from '.';
 
 const MessageComposerSkeleton = () => (
 	<MessageComposer>
-		<Box width='100%' display='flex' alignItems='center' height='x52' pi={12}>
+		<Box width='100%' display='flex' alignItems='center' height='x52' paddingInline={12}>
 			<Skeleton width='100%' height={36} />
 		</Box>
 		<MessageComposerToolbar height={36} />
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerToolbar.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerToolbar.tsx
index b558f29b452c3..582939eaf1d0f 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposerToolbar.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerToolbar.tsx
@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 
 const MessageComposerToolbar = (props: ComponentProps<typeof Box>) => (
-	<Box backgroundColor='surface-neutral' p={4} display='flex' justifyContent='space-between' w='full' {...props} />
+	<Box backgroundColor='surface-neutral' padding={4} display='flex' justifyContent='space-between' width='full' {...props} />
 );
 
 export default MessageComposerToolbar;
diff --git a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.tsx b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.tsx
index 24a339745bafa..565723f29ff2f 100644
--- a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.tsx
+++ b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCallout.tsx
@@ -21,8 +21,8 @@ const MessageFooterCallout = forwardRef<
 			borderWidth={2}
 			borderColor='light'
 			borderRadius='x4'
-			p={8}
-			mbe={24}
+			padding={8}
+			marginBlockEnd={24}
 			backgroundColor='surface-tint'
 			alignItems='center'
 			minHeight='x48'
diff --git a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutAction.tsx b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutAction.tsx
index 0e4d8d463601a..eb3108795eae6 100644
--- a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutAction.tsx
+++ b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutAction.tsx
@@ -6,7 +6,7 @@ export type MessageFooterCalloutActionProps = ComponentProps<typeof Button>;
 
 const MessageFooterCalloutAction = forwardRef<HTMLButtonElement, MessageFooterCalloutActionProps>(
 	function MessageFooterCalloutAction(props, ref) {
-		return <Button mi={4} ref={ref} primary small flexShrink={0} {...props} />;
+		return <Button marginInline={4} ref={ref} primary small flexShrink={0} {...props} />;
 	},
 );
 
diff --git a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutContent.tsx b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutContent.tsx
index 0bb59de727345..dee5f8eb7706c 100644
--- a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutContent.tsx
+++ b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutContent.tsx
@@ -6,7 +6,7 @@ export type MessageFooterCalloutContentProps = ComponentProps<typeof Box>;
 
 const MessageFooterCalloutContent = forwardRef<HTMLDivElement, MessageFooterCalloutContentProps>(
 	function MessageFooterCalloutContent(props, ref) {
-		return <Box mi={4} ref={ref} flexWrap='wrap' textAlign='center' color='default' flexGrow={1} flexShrink={1} {...props} />;
+		return <Box marginInline={4} ref={ref} flexWrap='wrap' textAlign='center' color='default' flexGrow={1} flexShrink={1} {...props} />;
 	},
 );
 
diff --git a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutDivider.tsx b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutDivider.tsx
index daa1a00178192..505fa3e869bc7 100644
--- a/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutDivider.tsx
+++ b/packages/ui-composer/src/MessageFooterCallout/MessageFooterCalloutDivider.tsx
@@ -2,7 +2,7 @@ import { Box } from '@rocket.chat/fuselage';
 import { forwardRef } from 'react';
 
 const MessageFooterCalloutDivider = forwardRef<HTMLButtonElement>(function MessageFooterCalloutDivider(props, ref) {
-	return <Box is='hr' ref={ref} borderInlineStart='1px solid' mi={4} flexShrink={0} {...props} />;
+	return <Box is='hr' ref={ref} borderInlineStart='1px solid' marginInline={4} flexShrink={0} {...props} />;
 });
 
 export default MessageFooterCalloutDivider;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx
index 2c0037907ec96..dd33f75c7daa6 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.tsx
@@ -5,7 +5,7 @@ export type VideoConfMessageProps = Omit<AllHTMLAttributes<HTMLDivElement>, 'is'
 
 const VideoConfMessage = (props: VideoConfMessageProps) => (
 	<Box
-		mbs={4}
+		marginBlockStart={4}
 		color='default'
 		maxWidth='345px'
 		backgroundColor='surface-light'
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageButton.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageButton.tsx
index 273707a088e23..f1fc74d94be3b 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageButton.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageButton.tsx
@@ -3,5 +3,7 @@ import type { AllHTMLAttributes } from 'react';
 
 export type VideoConfMessageButtonProps = { primary?: boolean } & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is'>;
 
-const VideoConfMessageButton = ({ primary, ...props }: VideoConfMessageButtonProps) => <Button {...props} mi={4} small primary={primary} />;
+const VideoConfMessageButton = ({ primary, ...props }: VideoConfMessageButtonProps) => (
+	<Button {...props} marginInline={4} small primary={primary} />
+);
 export default VideoConfMessageButton;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx
index 34362b7d3b366..67302b2481fb3 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooter.tsx
@@ -7,7 +7,7 @@ export type VideoConfMessageFooterProps = Omit<AllHTMLAttributes<HTMLDivElement>
 
 const VideoConfMessageFooter = ({ children, ...props }: VideoConfMessageFooterProps) => (
 	<VideoConfMessageRow backgroundColor='tint' {...props}>
-		<Box mi='neg-x4' display='flex' alignItems='center'>
+		<Box marginInline='neg-x4' display='flex' alignItems='center'>
 			{children}
 		</Box>
 	</VideoConfMessageRow>
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx
index 0b0149d30f1b7..91c2bfd1fba91 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageFooterText.tsx
@@ -4,7 +4,7 @@ import type { AllHTMLAttributes } from 'react';
 export type VideoConfMessageFooterTextProps = Omit<AllHTMLAttributes<HTMLParagraphElement>, 'is'>;
 
 const VideoConfMessageFooterText = ({ children, ...props }: VideoConfMessageFooterTextProps) => (
-	<Box {...props} is='p' fontScale='micro' mi={4}>
+	<Box {...props} is='p' fontScale='micro' marginInline={4}>
 		{children}
 	</Box>
 );
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageRow.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageRow.tsx
index 297cdb424a8bd..5f6c533064611 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageRow.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageRow.tsx
@@ -3,6 +3,8 @@ import type { ComponentProps } from 'react';
 
 export type VideoConfMessageRowProps = ComponentProps<typeof Box>;
 
-const VideoConfMessageRow = (props: VideoConfMessageRowProps) => <Box p={16} display='flex' justifyContent='space-between' {...props} />;
+const VideoConfMessageRow = (props: VideoConfMessageRowProps) => (
+	<Box padding={16} display='flex' justifyContent='space-between' {...props} />
+);
 
 export default VideoConfMessageRow;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx
index 00715a91f6678..e23d7228a30f3 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx
@@ -9,10 +9,10 @@ export type VideoConfMessageSkeletonProps = Omit<AllHTMLAttributes<HTMLDivElemen
 const VideoConfMessageSkeleton = (props: VideoConfMessageSkeletonProps) => (
 	<VideoConfMessage {...props}>
 		<VideoConfMessageRow>
-			<Skeleton width='full' pb={4} />
+			<Skeleton width='full' paddingBlock={4} />
 		</VideoConfMessageRow>
 		<VideoConfMessageRow backgroundColor='tint'>
-			<Skeleton width='full' pb={4} />
+			<Skeleton width='full' paddingBlock={4} />
 		</VideoConfMessageRow>
 	</VideoConfMessage>
 );
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageText.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageText.tsx
index 1097604221275..60bc3f47710ba 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageText.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageText.tsx
@@ -3,6 +3,6 @@ import type { AllHTMLAttributes } from 'react';
 
 export type VideoConfMessageTextProps = AllHTMLAttributes<HTMLParagraphElement>;
 
-const VideoConfMessageText = (props: VideoConfMessageTextProps) => <Box {...props} is='p' fontScale='c2' mis={8} />;
+const VideoConfMessageText = (props: VideoConfMessageTextProps) => <Box {...props} is='p' fontScale='c2' marginInlineStart={8} />;
 
 export default VideoConfMessageText;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx
index da4ae9d9a2f5c..3736f611df7b7 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageUserStack.tsx
@@ -16,11 +16,11 @@ const VideoConfMessageUserStack = ({ users }: VideoConfMessageUserStackProps) =>
 	const getUserAvatarPath = useUserAvatarPath();
 
 	return (
-		<Box mi={4}>
+		<Box marginInline={4}>
 			{displayAvatars && (
-				<Box display='flex' alignItems='center' mi='neg-x2'>
+				<Box display='flex' alignItems='center' marginInline='neg-x2'>
 					{users.slice(0, MAX_USERS).map(({ name, username }, index) => (
-						<Box mi={2} key={index}>
+						<Box marginInline={2} key={index}>
 							<Avatar
 								size='x28'
 								alt={username || ''}
diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
index 58e734175b0fd..fb62d18c3d83d 100644
--- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
+++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopup.tsx
@@ -24,7 +24,7 @@ export type VideoConfPopupProps = {
 const VideoConfPopup = forwardRef<HTMLDivElement, VideoConfPopupProps>(function VideoConfPopup({ children, position, ...props }, ref) {
 	return (
 		<VideoConfPopupContainer role='dialog' ref={ref} position={position} {...props}>
-			<Box p={24} maxWidth='x276' color='default'>
+			<Box padding={24} maxWidth='x276' color='default'>
 				{children}
 			</Box>
 		</VideoConfPopupContainer>
diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupBackdrop.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupBackdrop.tsx
index c17ee60d751f6..a91230f093fde 100644
--- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupBackdrop.tsx
+++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupBackdrop.tsx
@@ -17,7 +17,7 @@ const backdropStyle = css`
 export type VideoConfPopupBackdropProps = { children: ReactNode };
 
 const VideoConfPopupBackdrop = ({ children }: VideoConfPopupBackdropProps) => (
-	<Box m={40} zIndex={99} className={backdropStyle}>
+	<Box margin={40} zIndex={99} className={backdropStyle}>
 		{children}
 	</Box>
 );
diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupContent.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupContent.tsx
index 4e788b8aed727..3573718199ec5 100644
--- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupContent.tsx
+++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupContent.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 export type VideoConfPopupContentProps = { children: ReactNode };
 
 const VideoConfPopupContent = ({ children }: VideoConfPopupContentProps) => (
-	<Box display='flex' flexDirection='column' mbs={8}>
+	<Box display='flex' flexDirection='column' marginBlockStart={8}>
 		{children}
 	</Box>
 );
diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooter.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooter.tsx
index c14cc65e71963..276e4c3583c11 100644
--- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooter.tsx
+++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupFooter.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 
-const VideoConfPopupFooter = (props: ComponentProps<typeof Box>) => <Box mbs={28} {...props} />;
+const VideoConfPopupFooter = (props: ComponentProps<typeof Box>) => <Box marginBlockStart={28} {...props} />;
 
 export default VideoConfPopupFooter;
diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupInfo.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupInfo.tsx
index 8498cb73b43fb..52690fd6e2d8d 100644
--- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupInfo.tsx
+++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupInfo.tsx
@@ -11,9 +11,9 @@ const VideoConfPopupInfo = ({ avatar, icon, children }: VideoConfPopupInfoProps)
 	<Box display='flex' alignItems='center'>
 		{avatar}
 		{(icon || children) && (
-			<Box display='flex' flexGrow={1} flexShrink={1} flexBasis='0%' alignItems='center' mis={8} withTruncatedText>
+			<Box display='flex' flexGrow={1} flexShrink={1} flexBasis='0%' alignItems='center' marginInlineStart={8} withTruncatedText>
 				{icon}
-				<Box mis={8} fontScale='h4' withTruncatedText>
+				<Box marginInlineStart={8} fontScale='h4' withTruncatedText>
 					{children}
 				</Box>
 			</Box>
diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupSkeleton.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupSkeleton.tsx
index 15263df46e7fb..51f3301f797d4 100644
--- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupSkeleton.tsx
+++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupSkeleton.tsx
@@ -16,7 +16,7 @@ const VideoConfPopupSkeleton = (props: VideoConfPopupSkeletonProps) => (
 		<VideoConfPopupContent>
 			<Box display='flex' alignItems='center'>
 				<Skeleton variant='rect' height='x36' width='x36' />
-				<Skeleton mis={8} variant='rect' height='x24' width='x120' />
+				<Skeleton marginInlineStart={8} variant='rect' height='x24' width='x120' />
 			</Box>
 		</VideoConfPopupContent>
 		<VideoConfPopupFooter>
diff --git a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupTitle.tsx b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupTitle.tsx
index b001faf97fe8b..1b6445b16ba0b 100644
--- a/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupTitle.tsx
+++ b/packages/ui-video-conf/src/VideoConfPopup/VideoConfPopupTitle.tsx
@@ -8,7 +8,7 @@ export type VideoConfPopupTitleProps = {
 const VideoConfPopupTitle = ({ text, counter = false }: VideoConfPopupTitleProps) => (
 	<Box display='flex' alignItems='center'>
 		<Box fontScale='p2b'>{text}</Box>
-		{counter && <Throbber size='x8' mis={4} />}
+		{counter && <Throbber size='x8' marginInlineStart={4} />}
 	</Box>
 );
 
diff --git a/packages/ui-voip/src/components/Actions/ActionStrip.tsx b/packages/ui-voip/src/components/Actions/ActionStrip.tsx
index 67fb48ecdde86..611dda9e13e07 100644
--- a/packages/ui-voip/src/components/Actions/ActionStrip.tsx
+++ b/packages/ui-voip/src/components/Actions/ActionStrip.tsx
@@ -16,10 +16,10 @@ const ActionStrip = ({ children, leftSlot, rightSlot }: ActionStripProps) => {
 			flexDirection='row'
 			justifyContent='space-between'
 			flexShrink={0}
-			w='full'
+			width='full'
 			alignItems='center'
 			height={ACTION_STRIP_TOTAL_HEIGHT}
-			bg='surface-light'
+			backgroundColor='surface-light'
 			borderBlock='1px solid'
 			borderColor='stroke-extra-light'
 			paddingInline={20}
diff --git a/packages/ui-voip/src/components/CallHistoryExternalUser.tsx b/packages/ui-voip/src/components/CallHistoryExternalUser.tsx
index f9da50de9ba17..4e689047df86b 100644
--- a/packages/ui-voip/src/components/CallHistoryExternalUser.tsx
+++ b/packages/ui-voip/src/components/CallHistoryExternalUser.tsx
@@ -10,11 +10,11 @@ export type CallHistoryExternalUserProps = {
 const CallHistoryExternalUser = ({ contact: { number }, showIcon = true }: CallHistoryExternalUserProps) => {
 	return (
 		<Box display='flex' flexDirection='row' alignItems='center'>
-			<Box mie={8}>
+			<Box marginInlineEnd={8}>
 				<FramedIcon icon='user' size={28} />
 			</Box>
 			{showIcon && (
-				<Box mie={8}>
+				<Box marginInlineEnd={8}>
 					<Icon name='phone' size={20} />
 				</Box>
 			)}
diff --git a/packages/ui-voip/src/components/CallHistoryInternalUser.tsx b/packages/ui-voip/src/components/CallHistoryInternalUser.tsx
index 487d84d60d143..7892c28deb800 100644
--- a/packages/ui-voip/src/components/CallHistoryInternalUser.tsx
+++ b/packages/ui-voip/src/components/CallHistoryInternalUser.tsx
@@ -24,8 +24,8 @@ const CallHistoryInternalUser = ({ contact: { username, name, _id } }: CallHisto
 
 	return (
 		<Box display='flex' flexDirection='row' alignItems='center' role='button' onClick={(e) => openUserCard(e, username)} {...triggerProps}>
-			<Box mie={8}>{avatarUrl ? <Avatar url={avatarUrl} size='x28' /> : <Icon name='user' size='x28' />}</Box>
-			<Box mie={8}>
+			<Box marginInlineEnd={8}>{avatarUrl ? <Avatar url={avatarUrl} size='x28' /> : <Icon name='user' size='x28' />}</Box>
+			<Box marginInlineEnd={8}>
 				<StatusBullet status={userStatus?.status || 'loading'} size='small' />
 			</Box>
 			<Box>{displayName}</Box>
diff --git a/packages/ui-voip/src/components/CallHistoryUnknownUser.tsx b/packages/ui-voip/src/components/CallHistoryUnknownUser.tsx
index 3a79100a50d1f..b96f4c0b2c284 100644
--- a/packages/ui-voip/src/components/CallHistoryUnknownUser.tsx
+++ b/packages/ui-voip/src/components/CallHistoryUnknownUser.tsx
@@ -5,7 +5,7 @@ const CallHistoryUnknownUser = () => {
 	const { t } = useTranslation();
 	return (
 		<Box display='flex' flexDirection='row' alignItems='center'>
-			<Box mie={8}>
+			<Box marginInlineEnd={8}>
 				<FramedIcon icon='warning' size={28} />
 			</Box>
 			<Box>{t('Unknown')}</Box>
diff --git a/packages/ui-voip/src/components/Cards/Card.tsx b/packages/ui-voip/src/components/Cards/Card.tsx
index c5be25f826048..2420925201502 100644
--- a/packages/ui-voip/src/components/Cards/Card.tsx
+++ b/packages/ui-voip/src/components/Cards/Card.tsx
@@ -76,7 +76,7 @@ const Card = ({
 			height={height}
 			minWidth={CARD_MIN_WIDTH}
 			minHeight={minHeight}
-			m={CARD_MARGIN}
+			margin={CARD_MARGIN}
 			{...borderProps}
 		>
 			{children}
diff --git a/packages/ui-voip/src/components/Cards/CardList.tsx b/packages/ui-voip/src/components/Cards/CardList.tsx
index 65e64629163ab..462852939e337 100644
--- a/packages/ui-voip/src/components/Cards/CardList.tsx
+++ b/packages/ui-voip/src/components/Cards/CardList.tsx
@@ -23,8 +23,8 @@ const CardList = ({
 	return (
 		<Box
 			display='flex'
-			mb={autoMargin ? 'auto' : undefined}
-			mi={marginInline}
+			marginBlock={autoMargin ? 'auto' : undefined}
+			marginInline={marginInline}
 			flexDirection={direction}
 			flexWrap={shouldWrapCards ? 'wrap' : 'nowrap'}
 			flexGrow={1}
diff --git a/packages/ui-voip/src/components/Cards/CardListSection.tsx b/packages/ui-voip/src/components/Cards/CardListSection.tsx
index ea22709cef892..e85ae12f3bd02 100644
--- a/packages/ui-voip/src/components/Cards/CardListSection.tsx
+++ b/packages/ui-voip/src/components/Cards/CardListSection.tsx
@@ -9,7 +9,16 @@ export const SECTION_MAX_HEIGHT = 50;
 
 const CardListSection = ({ children }: CardListSectionProps) => {
 	return (
-		<Box display='flex' flexGrow={1} flexShrink={1} overflow='auto' justifyContent='stretch' alignItems='center' p={2} maxHeight='full'>
+		<Box
+			display='flex'
+			flexGrow={1}
+			flexShrink={1}
+			overflow='auto'
+			justifyContent='stretch'
+			alignItems='center'
+			padding={2}
+			maxHeight='full'
+		>
 			{children}
 		</Box>
 	);
diff --git a/packages/ui-voip/src/components/Cards/PeerCard/PeerCard.tsx b/packages/ui-voip/src/components/Cards/PeerCard/PeerCard.tsx
index 9e28d382ab7c5..4f31dac2986a6 100644
--- a/packages/ui-voip/src/components/Cards/PeerCard/PeerCard.tsx
+++ b/packages/ui-voip/src/components/Cards/PeerCard/PeerCard.tsx
@@ -23,7 +23,7 @@ const PeerCard = ({ displayName, avatarUrl, muted, held }: PeerCardProps) => {
 				height='100%'
 			>
 				<PeerCardSlot muted={muted} held={held} displayName={displayName} />
-				<Box mbe={8}>{avatarUrl ? <Avatar url={avatarUrl} size='x48' /> : <Icon name='user' size='x48' />}</Box>
+				<Box marginBlockEnd={8}>{avatarUrl ? <Avatar url={avatarUrl} size='x48' /> : <Icon name='user' size='x48' />}</Box>
 			</Box>
 		</Card>
 	);
diff --git a/packages/ui-voip/src/components/Cards/PeerCard/PeerCardSlot.tsx b/packages/ui-voip/src/components/Cards/PeerCard/PeerCardSlot.tsx
index ff483b3937995..7a991c07cdd79 100644
--- a/packages/ui-voip/src/components/Cards/PeerCard/PeerCardSlot.tsx
+++ b/packages/ui-voip/src/components/Cards/PeerCard/PeerCardSlot.tsx
@@ -12,8 +12,8 @@ const PeerCardSlot = ({ muted, held, displayName }: PeerCardSlotProps) => {
 	return (
 		<CardSlot position='bottomLeft'>
 			{displayName}
-			{muted && <Icon name='mic-off' size='x12' color='danger' mis={4} />}
-			{held && <Icon name='pause-shape-unfilled' size='x12' color='danger' mis={4} />}
+			{muted && <Icon name='mic-off' size='x12' color='danger' marginInlineStart={4} />}
+			{held && <Icon name='pause-shape-unfilled' size='x12' color='danger' marginInlineStart={4} />}
 		</CardSlot>
 	);
 };
diff --git a/packages/ui-voip/src/components/Keypad/Key.tsx b/packages/ui-voip/src/components/Keypad/Key.tsx
index 2ff883e7b34f8..68a1b9430b69a 100644
--- a/packages/ui-voip/src/components/Keypad/Key.tsx
+++ b/packages/ui-voip/src/components/Keypad/Key.tsx
@@ -35,8 +35,8 @@ const Key = ({ primaryKey, alternativeKey, longPressKey, onLongKeyPress, onKeyPr
 	const buttonProps = longPressKey ? mergeProps(pressProps, longPressProps) : pressProps;
 
 	return (
-		<Button minWidth={52} w={52} h={40} p={0} m={4} {...buttonProps} className={dialPadButtonClass} borderRadius={8}>
-			<Box is='span' fontScale={large ? 'h1' : 'p1'} fontWeight={large ? 300 : 400} mb={-4}>
+		<Button minWidth={52} width={52} height={40} padding={0} margin={4} {...buttonProps} className={dialPadButtonClass} borderRadius={8}>
+			<Box is='span' fontScale={large ? 'h1' : 'p1'} fontWeight={large ? 300 : 400} marginBlock={-4}>
 				{primaryKey}
 			</Box>
 			<Box is='span' fontScale='c1' color='hint' aria-hidden minHeight={16} letterSpacing='0.15em'>
diff --git a/packages/ui-voip/src/components/PeerAutocomplete.tsx b/packages/ui-voip/src/components/PeerAutocomplete.tsx
index 76d606f0ef999..f7992240c2586 100644
--- a/packages/ui-voip/src/components/PeerAutocomplete.tsx
+++ b/packages/ui-voip/src/components/PeerAutocomplete.tsx
@@ -29,7 +29,7 @@ const PeerAutocomplete = ({ options, filter, value, onChangeValue, onChangeFilte
 	const fieldErrorId = useId();
 
 	return (
-		<Field mb={-2}>
+		<Field marginBlock={-2}>
 			<FieldRow>
 				<AutoComplete
 					aria-labelledby={fieldDescriptionId}
@@ -52,7 +52,7 @@ const PeerAutocomplete = ({ options, filter, value, onChangeValue, onChangeFilte
 								label={
 									<Box display='flex' flexDirection='row' alignItems='center'>
 										<StatusBullet status={thisOption?.status} />
-										<Box mis={4}>{label}</Box>
+										<Box marginInlineStart={4}>{label}</Box>
 									</Box>
 								}
 								avatar={<Avatar size='x20' url={thisOption?.avatarUrl || ''} />}
diff --git a/packages/ui-voip/src/components/PeerInfo/InternalUser.tsx b/packages/ui-voip/src/components/PeerInfo/InternalUser.tsx
index 81ffab95415c5..f8ddfa7f94c81 100644
--- a/packages/ui-voip/src/components/PeerInfo/InternalUser.tsx
+++ b/packages/ui-voip/src/components/PeerInfo/InternalUser.tsx
@@ -23,12 +23,12 @@ const InternalUser = ({ displayName, avatarUrl, callerId, status, slots, remoteM
 	const remoteStatusText = getRemoteStatusText(slots);
 	return (
 		<Box display='flex' flexDirection='row' id='rcx-media-call-widget-caller-info'>
-			<Box mie={8}>{avatarUrl ? <Avatar url={avatarUrl} size='x20' /> : <Icon name='user' size='x20' />}</Box>
+			<Box marginInlineEnd={8}>{avatarUrl ? <Avatar url={avatarUrl} size='x20' /> : <Icon name='user' size='x20' />}</Box>
 			<Box display='flex' flexDirection='column' flexGrow={1}>
 				<Box display='flex' flexDirection='row' alignItems='center' fontScale='p2b' color='default' justifyContent='space-between'>
 					<Box is='span' display='flex' flexDirection='row' alignItems='center'>
 						{status && <StatusBullet status={status} size='small' />}
-						<Box mis={4}>{displayName}</Box>
+						<Box marginInlineStart={4}>{displayName}</Box>
 					</Box>
 					{remoteMuted && <Icon name='mic-off' size='x16' color='danger' />}
 				</Box>
diff --git a/packages/ui-voip/src/components/PeerInfo/PhoneNumber.tsx b/packages/ui-voip/src/components/PeerInfo/PhoneNumber.tsx
index 6d7b6a40516a5..5e97cb4a60fc3 100644
--- a/packages/ui-voip/src/components/PeerInfo/PhoneNumber.tsx
+++ b/packages/ui-voip/src/components/PeerInfo/PhoneNumber.tsx
@@ -7,7 +7,7 @@ export type PhoneNumberProps = {
 const PhoneNumber = ({ number }: PhoneNumberProps) => {
 	return (
 		<Box display='flex' flexDirection='row' id='rcx-media-call-widget-caller-info'>
-			<Icon size='x20' name='phone' mie={8} aria-hidden='true' />
+			<Icon size='x20' name='phone' marginInlineEnd={8} aria-hidden='true' />
 			<Box fontScale='p2b'>{number}</Box>
 		</Box>
 	);
diff --git a/packages/ui-voip/src/components/Widget/WidgetContent.tsx b/packages/ui-voip/src/components/Widget/WidgetContent.tsx
index ff63e6555fb87..8cef5b2be5b3e 100644
--- a/packages/ui-voip/src/components/Widget/WidgetContent.tsx
+++ b/packages/ui-voip/src/components/Widget/WidgetContent.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 export type WidgetContentProps = { children: ReactNode };
 
 const WidgetContent = ({ children }: WidgetContentProps) => (
-	<Box is='section' mb={4} mi={12} flexGrow={1}>
+	<Box is='section' marginBlock={4} marginInline={12} flexGrow={1}>
 		{children}
 	</Box>
 );
diff --git a/packages/ui-voip/src/components/Widget/WidgetFooter.tsx b/packages/ui-voip/src/components/Widget/WidgetFooter.tsx
index 36c9eef848931..ab3ce641a3e63 100644
--- a/packages/ui-voip/src/components/Widget/WidgetFooter.tsx
+++ b/packages/ui-voip/src/components/Widget/WidgetFooter.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 export type WidgetFooterProps = { children: ReactNode };
 
 const WidgetFooter = ({ children }: WidgetFooterProps) => (
-	<Box is='footer' p={12} bg='surface-light' mbs={4}>
+	<Box is='footer' padding={12} backgroundColor='surface-light' marginBlockStart={4}>
 		{children}
 	</Box>
 );
diff --git a/packages/ui-voip/src/components/Widget/WidgetHeader.tsx b/packages/ui-voip/src/components/Widget/WidgetHeader.tsx
index bb82347666c43..9d5998ef7910e 100644
--- a/packages/ui-voip/src/components/Widget/WidgetHeader.tsx
+++ b/packages/ui-voip/src/components/Widget/WidgetHeader.tsx
@@ -12,12 +12,12 @@ export type WidgetHeaderProps = {
 const WidgetHeader = ({ title, children }: WidgetHeaderProps) => {
 	const { t } = useTranslation();
 	return (
-		<Box is='header' mi={12} mb={4} display='flex' alignItems='center' justifyContent='space-between'>
+		<Box is='header' marginInline={12} marginBlock={4} display='flex' alignItems='center' justifyContent='space-between'>
 			<VisuallyHidden id='rcx-media-call-widget-title-prefix'>{t('Voice_call')}</VisuallyHidden>
 			<Box is='h3' color='titles-labels' fontScale='p1b' id='rcx-media-call-widget-title'>
 				{title}
 			</Box>
-			<Box mis={8} display='flex' flexDirection='row'>
+			<Box marginInlineStart={8} display='flex' flexDirection='row'>
 				{children}
 			</Box>
 		</Box>
diff --git a/packages/ui-voip/src/components/Widget/WidgetInfo.tsx b/packages/ui-voip/src/components/Widget/WidgetInfo.tsx
index babab539d043b..ebf3a5fe5c6a2 100644
--- a/packages/ui-voip/src/components/Widget/WidgetInfo.tsx
+++ b/packages/ui-voip/src/components/Widget/WidgetInfo.tsx
@@ -22,9 +22,9 @@ const WidgetInfo = ({ slots, variant = 'default' }: WidgetInfoProps) => {
 			display='flex'
 			flexDirection='row'
 			justifyContent={variant === 'card-content' ? 'center' : 'space-between'}
-			mi={12}
-			mbs={4}
-			mbe={variant === 'card-content' ? 0 : 4}
+			marginInline={12}
+			marginBlockStart={4}
+			marginBlockEnd={variant === 'card-content' ? 0 : 4}
 		>
 			{slots.map((slot) => (
 				<Box
@@ -33,7 +33,7 @@ const WidgetInfo = ({ slots, variant = 'default' }: WidgetInfoProps) => {
 					fontScale={variant === 'card-content' ? 'c1' : 'p2'}
 					key={slot.text}
 				>
-					{slot.icon && <Icon name={slot.icon} mbe={4} />} {slot.text}
+					{slot.icon && <Icon name={slot.icon} marginBlockEnd={4} />} {slot.text}
 				</Box>
 			))}
 		</Box>
diff --git a/packages/ui-voip/src/hooks/VoipPopupDraggable/useDraggable.stories.tsx b/packages/ui-voip/src/hooks/VoipPopupDraggable/useDraggable.stories.tsx
index b176c6ec30b5b..fabeb84d252fd 100644
--- a/packages/ui-voip/src/hooks/VoipPopupDraggable/useDraggable.stories.tsx
+++ b/packages/ui-voip/src/hooks/VoipPopupDraggable/useDraggable.stories.tsx
@@ -416,7 +416,7 @@ export const ElementUpdates: Story = {
 
 const getLorem = (size: number) => {
 	return Array.from({ length: size }, (_, i) => (
-		<Box display='block' pbe={12} key={i}>
+		<Box display='block' paddingBlockEnd={12} key={i}>
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
 			minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
 			reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
@@ -444,7 +444,7 @@ const MockedPage = () => {
 
 	const overflowBoxProps = {
 		display: 'flex',
-		h: 'full',
+		height: 'full',
 		flexGrow: 1,
 		flexShrink: 0,
 		flexBasis: '33%',
@@ -456,17 +456,17 @@ const MockedPage = () => {
 		<>
 			<Box display='flex' flexDirection='row' height='100vh' width='100vw' overflow='hidden'>
 				<Box {...overflowBoxProps}>
-					<Box w='full' h='full' data-testid='scrollable-1'>
+					<Box width='full' height='full' data-testid='scrollable-1'>
 						{getLorem(100)}
 					</Box>
 				</Box>
 				<Box {...overflowBoxProps}>
-					<Box w='full' h='full' data-testid='scrollable-2'>
+					<Box width='full' height='full' data-testid='scrollable-2'>
 						{getLorem(100)}
 					</Box>
 				</Box>
 				<Box {...overflowBoxProps}>
-					<Box w='full' h='full' data-testid='scrollable-3'>
+					<Box width='full' height='full' data-testid='scrollable-3'>
 						{getLorem(100)}
 					</Box>
 				</Box>
diff --git a/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.tsx b/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.tsx
index 1f8c3e9c17619..9228d3a634b0d 100644
--- a/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.tsx
+++ b/packages/ui-voip/src/views/CallHistoryContextualbar/CallHistoryContextualbar.tsx
@@ -66,7 +66,7 @@ const CallHistoryContextualBar = ({ onClose, actions, contact, data }: CallHisto
 					</InfoPanelSection>
 					<InfoPanelSection>
 						<Box display='flex' flexDirection='row' alignItems='center' fontScale='p1b'>
-							<Icon name={direction === 'inbound' ? 'arrow-down-left' : 'arrow-up-right'} size={24} mie={8} />
+							<Icon name={direction === 'inbound' ? 'arrow-down-left' : 'arrow-up-right'} size={24} marginInlineEnd={8} />
 							{direction === 'inbound' ? t('Incoming_voice_call') : t('Outgoing_voice_call')}
 						</Box>
 					</InfoPanelSection>
@@ -76,7 +76,7 @@ const CallHistoryContextualBar = ({ onClose, actions, contact, data }: CallHisto
 								<UiKitComponent render={UiKitMessageSurfaceRender} blocks={getHistoryMessagePayload(data.state, duration).blocks} />
 							</UiKitContext.Provider>
 						</MessageBlock>
-						<Box mbs={-8}>{date}</Box>
+						<Box marginBlockStart={-8}>{date}</Box>
 					</InfoPanelSection>
 					<InfoPanelSection>
 						<InfoPanelLabel>{t('Call_ID')}</InfoPanelLabel>
@@ -94,7 +94,7 @@ const CallHistoryContextualBar = ({ onClose, actions, contact, data }: CallHisto
 				<ButtonGroup stretch>
 					{isCallHistoryInternalContact(contact) && directMessage && (
 						<Button onClick={directMessage}>
-							<Icon name='balloon' size='x20' mie='x4' />
+							<Icon name='balloon' size='x20' marginInlineEnd='x4' />
 							{t('Direct_message')}
 						</Button>
 					)}
@@ -105,7 +105,7 @@ const CallHistoryContextualBar = ({ onClose, actions, contact, data }: CallHisto
 							disabled={state !== 'available'}
 							title={state !== 'available' ? t('Call_in_progress') : undefined}
 						>
-							<Icon name='phone' size='x20' mie='x4' />
+							<Icon name='phone' size='x20' marginInlineEnd='x4' />
 							{t('Call')}
 						</Button>
 					)}
diff --git a/packages/ui-voip/src/views/MediaCallHistoryTable/CallHistoryTableDirection.tsx b/packages/ui-voip/src/views/MediaCallHistoryTable/CallHistoryTableDirection.tsx
index c09b6c02c6272..ab751336f2e11 100644
--- a/packages/ui-voip/src/views/MediaCallHistoryTable/CallHistoryTableDirection.tsx
+++ b/packages/ui-voip/src/views/MediaCallHistoryTable/CallHistoryTableDirection.tsx
@@ -8,7 +8,7 @@ const CallHistoryTableDirection = ({ direction }: CallHistoryTableDirectionProps
 	const iconName = direction === 'outbound' ? 'arrow-up-right' : 'arrow-down-left';
 	return (
 		<Box display='flex' flexDirection='row' alignItems='center'>
-			<Icon name={iconName} color='primary' size={20} mie={8} />
+			<Icon name={iconName} color='primary' size={20} marginInlineEnd={8} />
 			{t('Voice')}
 		</Box>
 	);
diff --git a/packages/ui-voip/src/views/MediaCallHistoryTable/CallHistoryTableStatus.tsx b/packages/ui-voip/src/views/MediaCallHistoryTable/CallHistoryTableStatus.tsx
index 0a6e28c7e0d0a..a2207307fa84a 100644
--- a/packages/ui-voip/src/views/MediaCallHistoryTable/CallHistoryTableStatus.tsx
+++ b/packages/ui-voip/src/views/MediaCallHistoryTable/CallHistoryTableStatus.tsx
@@ -58,7 +58,7 @@ const CallHistoryTableStatus = ({ status, duration }: CallHistoryTableStatusProp
 
 	return (
 		<Box display='flex' flexDirection='row' alignItems='center' color={variant}>
-			<Icon name={icon} color={variant} size={20} mie={8} />
+			<Icon name={icon} color={variant} size={20} marginInlineEnd={8} />
 			{getCallStateText(status, t)}
 			{durationText && <> - {durationText}</>}
 		</Box>
diff --git a/packages/ui-voip/src/views/MediaCallPopoutView.tsx b/packages/ui-voip/src/views/MediaCallPopoutView.tsx
index 9472c2200739f..5f0ddc54b2e9b 100644
--- a/packages/ui-voip/src/views/MediaCallPopoutView.tsx
+++ b/packages/ui-voip/src/views/MediaCallPopoutView.tsx
@@ -48,9 +48,9 @@ const MediaCallPopoutView = ({ user, onClickClosePopout, onClickFullscreen, full
 			is='main'
 			aria-label={t('Voice_call')}
 			id='outer-element'
-			w='full'
-			h='full'
-			bg='surface-tint'
+			width='full'
+			height='full'
+			backgroundColor='surface-tint'
 			overflow='hidden'
 			display='flex'
 			flexDirection='column'
@@ -59,7 +59,7 @@ const MediaCallPopoutView = ({ user, onClickClosePopout, onClickFullscreen, full
 			<MediaCallCardList user={user} shouldWrapCards={shouldWrapCards} />
 			<ActionStrip
 				leftSlot={
-					<Box color='default' alignContent='center' pis={16}>
+					<Box color='default' alignContent='center' paddingInlineStart={16}>
 						<Timer startAt={startedAt} />
 					</Box>
 				}
diff --git a/packages/ui-voip/src/views/MediaCallPopoutWindow.tsx b/packages/ui-voip/src/views/MediaCallPopoutWindow.tsx
index b5d381d1a728b..c770358ba4e57 100644
--- a/packages/ui-voip/src/views/MediaCallPopoutWindow.tsx
+++ b/packages/ui-voip/src/views/MediaCallPopoutWindow.tsx
@@ -55,7 +55,7 @@ const MediaCallPopoutWindow = ({ container, onClosePopout }: MediaCallPopoutWind
 					<StyledOwnerDocument.Provider value={contextValue}>
 						<TooltipProvider ownerDocument={ownerDocument}>
 							{createPortal(
-								<Box w='full' h='full' display='flex' flexDirection='column' justifyContent='space-between'>
+								<Box width='full' height='full' display='flex' flexDirection='column' justifyContent='space-between'>
 									<MediaCallPopoutView
 										user={ownUser}
 										onClickClosePopout={onClosePopout}
diff --git a/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomActivity.tsx b/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomActivity.tsx
index e3a40bd371074..9574f51180c7c 100644
--- a/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomActivity.tsx
+++ b/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomActivity.tsx
@@ -32,7 +32,7 @@ const MediaCallRoomActivity = ({ children }: MediaCallRoomActivityProps) => {
 		setShowChat((prev) => !prev);
 	};
 	return (
-		<Box w='full' h='full' display='flex' flexDirection='column' justifyContent='space-between' ref={ref}>
+		<Box width='full' height='full' display='flex' flexDirection='column' justifyContent='space-between' ref={ref}>
 			<MediaCallViewProvider>
 				<MediaCallRoomSection
 					showChat={showChat}
@@ -43,7 +43,7 @@ const MediaCallRoomActivity = ({ children }: MediaCallRoomActivityProps) => {
 			</MediaCallViewProvider>
 
 			{showChat && (
-				<Box w='full' flexGrow={2} flexShrink={0}>
+				<Box width='full' flexGrow={2} flexShrink={0}>
 					{children}
 				</Box>
 			)}
diff --git a/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx b/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx
index 71e0a149fa18c..cc658f5c01c19 100644
--- a/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx
+++ b/packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx
@@ -76,8 +76,8 @@ const MediaCallRoomSection = ({ showChat, onToggleChat, user, containerHeight }:
 	return (
 		<Box
 			id='outer-element'
-			w='full'
-			bg='surface-tint'
+			width='full'
+			backgroundColor='surface-tint'
 			overflow='hidden'
 			display='flex'
 			flexDirection='column'
@@ -88,7 +88,7 @@ const MediaCallRoomSection = ({ showChat, onToggleChat, user, containerHeight }:
 			{isPopout ? <PopoutDockPrompt onClosePopout={onClosePopout} /> : <MediaCallCardList user={user} shouldWrapCards={shouldWrapCards} />}
 			<ActionStrip
 				leftSlot={
-					<Box color='default' alignContent='center' pis={16}>
+					<Box color='default' alignContent='center' paddingInlineStart={16}>
 						<Timer startAt={startedAt} />
 					</Box>
 				}
diff --git a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx
index 04a0ff128baa0..1a70664d3ccb8 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/MediaCallWidget.stories.tsx
@@ -42,7 +42,7 @@ export const MediaCallWidgetManualTesting: Story = {
 		const { state } = sessionState;
 		return (
 			<>
-				<Button onClick={() => toggleWidget()} disabled={state !== 'new' && state !== 'closed'} mie={8}>
+				<Button onClick={() => toggleWidget()} disabled={state !== 'new' && state !== 'closed'} marginInlineEnd={8}>
 					Toggle widget
 				</Button>
 				<Button onClick={() => onCall()} disabled={state !== 'closed'}>
diff --git a/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx b/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx
index 46f3edd5ed45b..79b60461bc7c3 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/NewCall.tsx
@@ -34,7 +34,7 @@ const NewCall = () => {
 			<WidgetContent>
 				<PeerAutocomplete {...autocomplete} />
 				{peerInfo && (
-					<Box mb={8}>
+					<Box marginBlock={8}>
 						<PeerInfo {...peerInfo} />
 					</Box>
 				)}
diff --git a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx
index 04f5b77012fe5..cc335933fb8d4 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/OngoingCall.tsx
@@ -57,10 +57,10 @@ const OngoingCall = () => {
 			<WidgetInfo slots={slots} />
 			<WidgetFooter>
 				{open ? (
-					<Box display='flex' justifyContent='center' alignItems='center' w='100%' flexDirection='column' mbe={8}>
-						<Field mbe={8}>
+					<Box display='flex' justifyContent='center' alignItems='center' width='100%' flexDirection='column' marginBlockEnd={8}>
+						<Field marginBlockEnd={8}>
 							<FieldRow>
-								<TextInput value={inputValue} readOnly small mi={24} />
+								<TextInput value={inputValue} readOnly small marginInline={24} />
 							</FieldRow>
 						</Field>
 						<Keypad
@@ -69,7 +69,7 @@ const OngoingCall = () => {
 								onTone(...args);
 							}}
 						/>
-						<Divider w='100%' />
+						<Divider width='100%' />
 					</Box>
 				) : null}
 				<ButtonGroup large>
diff --git a/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx b/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
index e8a3aed87d14c..ebf90d64a8d85 100644
--- a/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
+++ b/packages/ui-voip/src/views/MediaCallWidget/OngoingCallWithScreen.tsx
@@ -84,7 +84,7 @@ const OngoingCall = () => {
 
 					{isPopout && (
 						<Box display='flex' flexDirection='column' gap={4}>
-							<Button onClick={onClosePopout} icon='arrow-from-cross-box' medium w='full'>
+							<Button onClick={onClosePopout} icon='arrow-from-cross-box' medium width='full'>
 								{t('Show_call_here')}
 							</Button>
 							{localScreen?.active && (
diff --git a/packages/ui-voip/src/views/PopoutDockPrompt.tsx b/packages/ui-voip/src/views/PopoutDockPrompt.tsx
index 03ce00af577db..57b7e486754ea 100644
--- a/packages/ui-voip/src/views/PopoutDockPrompt.tsx
+++ b/packages/ui-voip/src/views/PopoutDockPrompt.tsx
@@ -11,16 +11,16 @@ const PopoutDockPrompt = ({ onClosePopout }: PopoutDockPromptProps) => {
 	return (
 		<Box
 			is='section'
-			mb={20}
-			p={24}
-			w='full'
+			marginBlock={20}
+			padding={24}
+			width='full'
 			display='flex'
 			flexDirection='column'
 			justifyContent='center'
 			alignItems='center'
 			flexGrow={1}
 		>
-			<Box is='h1' color='font-default' mbe={40}>
+			<Box is='h1' color='font-default' marginBlockEnd={40}>
 				{t('Call_open_separate_window')}
 			</Box>
 			<Button onClick={onClosePopout} icon='arrow-from-cross-box' large>
diff --git a/packages/ui-voip/src/views/TransferModal.tsx b/packages/ui-voip/src/views/TransferModal.tsx
index e7985970359c4..bba3853732723 100644
--- a/packages/ui-voip/src/views/TransferModal.tsx
+++ b/packages/ui-voip/src/views/TransferModal.tsx
@@ -67,7 +67,7 @@ const TransferModal = ({ onCancel, onConfirm }: TransferModalProps) => {
 			<ModalContent>
 				<PeerAutocomplete {...autocomplete} error={error} onChangeValue={onChangeValue} />
 				{peer && (
-					<Box mb={8}>
+					<Box marginBlock={8}>
 						<PeerInfo {...peer} />
 					</Box>
 				)}
diff --git a/packages/web-ui-registration/src/CMSPage.tsx b/packages/web-ui-registration/src/CMSPage.tsx
index b0ebb48febcca..8f4c026fa43ec 100644
--- a/packages/web-ui-registration/src/CMSPage.tsx
+++ b/packages/web-ui-registration/src/CMSPage.tsx
@@ -18,11 +18,11 @@ const CMSPage = ({ page }: CMSPageProps) => {
 	return (
 		<VerticalWizardLayout
 			background={customBackground}
-			logo={customLogo ? <Box is='img' maxHeight='x40' mi='neg-x8' src={customLogo} alt='Logo' /> : undefined}
+			logo={customLogo ? <Box is='img' maxHeight='x40' marginInline='neg-x8' src={customLogo} alt='Logo' /> : undefined}
 		>
 			<VerticalWizardLayoutTitle>{t(page)}</VerticalWizardLayoutTitle>
 			<VerticalWizardLayoutForm>
-				<Box p={32}>
+				<Box padding={32}>
 					<IconButton title={t('Back')} icon='arrow-back' onClick={() => window.history.back()} style={{ float: 'right' }} />
 					<Box withRichContent dangerouslySetInnerHTML={{ __html: pageContent }} />
 				</Box>
diff --git a/packages/web-ui-registration/src/LoginServices.tsx b/packages/web-ui-registration/src/LoginServices.tsx
index ecfea54932dc6..8ac27f035cab2 100644
--- a/packages/web-ui-registration/src/LoginServices.tsx
+++ b/packages/web-ui-registration/src/LoginServices.tsx
@@ -41,7 +41,7 @@ const LoginServices = ({ disabled, setError }: LoginServicesProps) => {
 	return (
 		<>
 			{showFormLogin && (
-				<Divider mb={24} p={0}>
+				<Divider marginBlock={24} padding={0}>
 					{t('registration.component.form.divider')}
 				</Divider>
 			)}
diff --git a/packages/web-ui-registration/src/ResetPasswordForm.tsx b/packages/web-ui-registration/src/ResetPasswordForm.tsx
index 31b7e8c38eb2d..978e318b4c087 100644
--- a/packages/web-ui-registration/src/ResetPasswordForm.tsx
+++ b/packages/web-ui-registration/src/ResetPasswordForm.tsx
@@ -79,7 +79,7 @@ export const ResetPasswordForm = ({ setLoginRoute }: ResetPasswordFormProps) =>
 				</FieldGroup>
 				{isSuccess && (
 					<FieldGroup>
-						<Callout aria-live='assertive' role='status' mbs={24} icon='mail'>
+						<Callout aria-live='assertive' role='status' marginBlockStart={24} icon='mail'>
 							{t('registration.page.resetPassword.sent')}
 						</Callout>
 					</FieldGroup>
diff --git a/packages/web-ui-registration/src/components/LoginPoweredBy.tsx b/packages/web-ui-registration/src/components/LoginPoweredBy.tsx
index bb849a69d639f..bba93e09e4c03 100644
--- a/packages/web-ui-registration/src/components/LoginPoweredBy.tsx
+++ b/packages/web-ui-registration/src/components/LoginPoweredBy.tsx
@@ -9,7 +9,7 @@ export const LoginPoweredBy = () => {
 		return null;
 	}
 	return (
-		<Box mbe={18}>
+		<Box marginBlockEnd={18}>
 			<Trans i18nKey='registration.page.poweredBy'>
 				{'Powered by '}
 				<ActionLink href='https://rocket.chat/' target='_blank' rel='noopener noreferrer'>
diff --git a/packages/web-ui-registration/src/components/LoginSwitchLanguageFooter.tsx b/packages/web-ui-registration/src/components/LoginSwitchLanguageFooter.tsx
index 368f781b66d2a..1d72fb3b9a02e 100644
--- a/packages/web-ui-registration/src/components/LoginSwitchLanguageFooter.tsx
+++ b/packages/web-ui-registration/src/components/LoginSwitchLanguageFooter.tsx
@@ -67,7 +67,7 @@ const LoginSwitchLanguageFooter = ({
 				}
 
 				return (
-					<Button secondary small mie={8} key={suggestion.key} onClick={handleSwitchLanguageClick(suggestion)}>
+					<Button secondary small marginInlineEnd={8} key={suggestion.key} onClick={handleSwitchLanguageClick(suggestion)}>
 						<Trans i18nKey='registration.component.switchLanguage' tOptions={{ lng: suggestion.key }} values={{ name: suggestion.ogName }}>
 							Change to <strong>{suggestion.ogName}</strong>
 						</Trans>
diff --git a/packages/web-ui-registration/src/template/HorizontalTemplate.tsx b/packages/web-ui-registration/src/template/HorizontalTemplate.tsx
index 0675b98f5b4d7..19d2fb84c1ed8 100644
--- a/packages/web-ui-registration/src/template/HorizontalTemplate.tsx
+++ b/packages/web-ui-registration/src/template/HorizontalTemplate.tsx
@@ -24,7 +24,7 @@ const HorizontalTemplate = ({ children }: HorizontalTemplateProps) => {
 	return (
 		<HorizontalWizardLayout
 			background={customBackground}
-			logo={!hideLogo && customLogo ? <Box is='img' maxHeight='x40' mi='neg-x8' src={customLogo} alt='Logo' /> : <></>}
+			logo={!hideLogo && customLogo ? <Box is='img' maxHeight='x40' marginInline='neg-x8' src={customLogo} alt='Logo' /> : <></>}
 		>
 			<HorizontalWizardLayoutAside>
 				<HorizontalWizardLayoutTitle>
diff --git a/packages/web-ui-registration/src/template/VerticalTemplate.tsx b/packages/web-ui-registration/src/template/VerticalTemplate.tsx
index e51d1442df4f8..121d1d27bdb9f 100644
--- a/packages/web-ui-registration/src/template/VerticalTemplate.tsx
+++ b/packages/web-ui-registration/src/template/VerticalTemplate.tsx
@@ -18,7 +18,7 @@ const VerticalTemplate = ({ children }: VerticalTemplateProps) => {
 	return (
 		<VerticalWizardLayout
 			background={customBackground}
-			logo={!hideLogo && customLogo ? <Box is='img' maxHeight='x40' mi='neg-x8' src={customLogo} alt='Logo' /> : <></>}
+			logo={!hideLogo && customLogo ? <Box is='img' maxHeight='x40' marginInline='neg-x8' src={customLogo} alt='Logo' /> : <></>}
 		>
 			<VerticalWizardLayoutTitle>
 				<RegisterTitle />