diff --git a/.changeset/sour-roses-invite.md b/.changeset/sour-roses-invite.md
new file mode 100644
index 000000000000..d560be689142
--- /dev/null
+++ b/.changeset/sour-roses-invite.md
@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": minor
+---
+
+Improves the workspace and subscription admin pages by updating font scaling, centralizing elements, 
+enhancing responsiveness, and refactoring components to provide a better overall user experience.
diff --git a/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx b/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
index 79a25574116d..7f4635950a5a 100644
--- a/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
+++ b/apps/meteor/client/views/admin/subscription/SubscriptionPage.tsx
@@ -138,16 +138,17 @@ const SubscriptionPage = () => {
 						)}
 						<Box marginBlock='none' marginInline='auto' width='full' color='default'>
 							<Grid m={0}>
-								<Grid.Item lg={4} xs={4} p={8}>
+								<Grid.Item lg={4} xs={4} p={8} minHeight={260}>
 									{license && <PlanCard licenseInformation={license.information} licenseLimits={{ activeUsers: seatsLimit }} />}
 									{!license && <PlanCardCommunity />}
 								</Grid.Item>
-								<Grid.Item lg={8} xs={4} p={8}>
+
+								<Grid.Item lg={8} xs={4} p={8} minHeight={260}>
 									<FeaturesCard activeModules={activeModules} isEnterprise={isEnterprise} />
 								</Grid.Item>
 
 								{seatsLimit.value !== undefined && (
-									<Grid.Item lg={6} xs={4} p={8}>
+									<Grid.Item lg={6} xs={4} p={8} minHeight={260}>
 										{seatsLimit.max !== Infinity ? (
 											<SeatsCard value={seatsLimit.value} max={seatsLimit.max} hideManageSubscription={licensesData?.trial} />
 										) : (
@@ -157,7 +158,7 @@ const SubscriptionPage = () => {
 								)}
 
 								{macLimit.value !== undefined && (
-									<Grid.Item lg={6} xs={4} p={8}>
+									<Grid.Item lg={6} xs={4} p={8} minHeight={260}>
 										{macLimit.max !== Infinity ? (
 											<MACCard max={macLimit.max} value={macLimit.value} hideManageSubscription={licensesData?.trial} />
 										) : (
@@ -169,15 +170,15 @@ const SubscriptionPage = () => {
 								{!license && (
 									<>
 										{limits?.marketplaceApps !== undefined && (
-											<Grid.Item lg={4} xs={4} p={8}>
+											<Grid.Item lg={4} xs={4} p={8} minHeight={260}>
 												<AppsUsageCard privateAppsLimit={limits?.privateApps} marketplaceAppsLimit={limits.marketplaceApps} />
 											</Grid.Item>
 										)}
 
-										<Grid.Item lg={4} xs={4} p={8}>
+										<Grid.Item lg={4} xs={4} p={8} minHeight={260}>
 											<ActiveSessionsCard />
 										</Grid.Item>
-										<Grid.Item lg={4} xs={4} p={8}>
+										<Grid.Item lg={4} xs={4} p={8} minHeight={260}>
 											<ActiveSessionsPeakCard />
 										</Grid.Item>
 									</>
diff --git a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
index 34a9746b1b53..b7407d9257ab 100644
--- a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Card, CardBody, CardControls, CardTitle } from '@rocket.chat/fuselage';
+import { Card, CardControls, CardTitle } from '@rocket.chat/fuselage';
 import type { ReactElement, ReactNode } from 'react';
 import React, { memo } from 'react';
 
@@ -17,16 +17,13 @@ export type CardProps = {
 
 const FeatureUsageCard = ({ children, card }: FeatureUsageCardProps): ReactElement => {
 	const { title, infoText, upgradeButton } = card;
+
 	return (
 		<Card height='full'>
 			<CardTitle>
 				{title} {infoText && <InfoTextIconModal title={title} infoText={infoText} />}
 			</CardTitle>
-			<CardBody>
-				<Box h='full' w='full'>
-					{children}
-				</Box>
-			</CardBody>
+			{children}
 			{upgradeButton && <CardControls>{upgradeButton}</CardControls>}
 		</Card>
 	);
diff --git a/apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx
new file mode 100644
index 000000000000..540b486d955d
--- /dev/null
+++ b/apps/meteor/client/views/admin/subscription/components/FeatureUsageCardBody.tsx
@@ -0,0 +1,15 @@
+import { Box, CardBody } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import React from 'react';
+
+type FeatureUsageCardBodyProps = { justifyContent?: 'flex-start' | 'center'; children: ReactNode };
+
+const FeatureUsageCardBody = ({ justifyContent = 'center', children }: FeatureUsageCardBodyProps) => (
+	<CardBody>
+		<Box h='full' w='full' display='flex' alignItems='center' justifyContent={justifyContent} flexDirection='column'>
+			{children}
+		</Box>
+	</CardBody>
+);
+
+export default FeatureUsageCardBody;
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 e42ae7f6b744..28de97968394 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsCard.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useActiveConnections } from '../../../../hooks/useActiveConnections';
 import type { CardProps } from '../FeatureUsageCard';
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 import UpgradeButton from '../UpgradeButton';
 
 const getLimits = ({ max, current }: { max: number; current: number }) => {
@@ -35,7 +36,9 @@ const ActiveSessionsCard = (): ReactElement => {
 	if (result.isLoading || result.isError) {
 		return (
 			<FeatureUsageCard card={card}>
-				<Skeleton variant='rect' width='x112' height='x112' />
+				<FeatureUsageCardBody justifyContent='flex-start'>
+					<Skeleton variant='rect' width='x112' height='x224' />
+				</FeatureUsageCardBody>
 			</FeatureUsageCard>
 		);
 	}
@@ -55,12 +58,14 @@ const ActiveSessionsCard = (): ReactElement => {
 				}),
 			}}
 		>
-			<Box color='font-secondary-info'>
-				<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} mbe={12}>
-					{used} / {total}
+			<FeatureUsageCardBody justifyContent='flex-start'>
+				<Box color='font-secondary-info' textAlign='center'>
+					<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} mbe={12}>
+						{used} / {total}
+					</Box>
+					{available} {t('ActiveSessions_available')}
 				</Box>
-				{available} {t('ActiveSessions_available')}
-			</Box>
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };
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 02ac3eeeb536..af443f1e659f 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/ActiveSessionsPeakCard.tsx
@@ -7,6 +7,7 @@ import { useFormatDate } from '../../../../../hooks/useFormatDate';
 import { useStatistics } from '../../../../hooks/useStatistics';
 import type { CardProps } from '../FeatureUsageCard';
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 import UpgradeButton from '../UpgradeButton';
 
 const ActiveSessionsPeakCard = (): ReactElement => {
@@ -36,14 +37,16 @@ const ActiveSessionsPeakCard = (): ReactElement => {
 	if (isLoading || maxMonthlyPeakConnections === undefined) {
 		return (
 			<FeatureUsageCard card={card}>
-				<Skeleton variant='rect' width='x112' height='x112' />
+				<FeatureUsageCardBody justifyContent='flex-start'>
+					<Skeleton variant='rect' width='x112' height='x112' />
+				</FeatureUsageCardBody>
 			</FeatureUsageCard>
 		);
 	}
 
 	return (
 		<FeatureUsageCard card={card}>
-			<Box color='font-secondary-info'>
+			<Box color='font-secondary-info' textAlign='center'>
 				<Box fontScale='h1' color={exceedLimit ? 'font-danger' : 'font-default'} mbe={12}>
 					{used} / {total}
 				</Box>
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
index a87ef914aba0..4fc31cb260c5 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/AppsUsageCard/AppsUsageCard.tsx
@@ -8,6 +8,7 @@ import AppsUsageCardSection from './AppsUsageCardSection';
 import { PRICING_LINK } from '../../../utils/links';
 import type { CardProps } from '../../FeatureUsageCard';
 import FeatureUsageCard from '../../FeatureUsageCard';
+import FeatureUsageCardBody from '../../FeatureUsageCardBody';
 import UpgradeButton from '../../UpgradeButton';
 
 // Magic numbers
@@ -27,7 +28,9 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
 		// FIXME: not accessible enough
 		return (
 			<FeatureUsageCard card={{ title: t('Apps') }}>
-				<Skeleton variant='rect' width='x112' height='x112' role='presentation' />
+				<FeatureUsageCardBody justifyContent='flex-start'>
+					<Skeleton variant='rect' width='x112' height='x224' role='presentation' />
+				</FeatureUsageCardBody>
 			</FeatureUsageCard>
 		);
 	}
@@ -61,20 +64,22 @@ const AppsUsageCard = ({ privateAppsLimit, marketplaceAppsLimit }: AppsUsageCard
 
 	return (
 		<FeatureUsageCard card={card}>
-			<AppsUsageCardSection
-				title={t('Marketplace_apps')}
-				appsCount={marketplaceAppsCount}
-				appsMaxCount={marketplaceAppsMaxCount}
-				warningThreshold={defaultWarningThreshold}
-			/>
+			<FeatureUsageCardBody justifyContent='flex-start'>
+				<AppsUsageCardSection
+					title={t('Marketplace_apps')}
+					appsCount={marketplaceAppsCount}
+					appsMaxCount={marketplaceAppsMaxCount}
+					warningThreshold={defaultWarningThreshold}
+				/>
 
-			<AppsUsageCardSection
-				title={t('Private_apps')}
-				tip={privateAppsMaxCount === 0 ? t('Private_apps_premium_message') : undefined}
-				appsCount={privateAppsCount}
-				appsMaxCount={privateAppsMaxCount}
-				warningThreshold={defaultWarningThreshold}
-			/>
+				<AppsUsageCardSection
+					title={t('Private_apps')}
+					tip={privateAppsMaxCount === 0 ? t('Private_apps_premium_message') : undefined}
+					appsCount={privateAppsCount}
+					appsMaxCount={privateAppsMaxCount}
+					warningThreshold={defaultWarningThreshold}
+				/>
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };
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 ac17957eda01..843e782cdafd 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
@@ -17,7 +17,7 @@ const AppsUsageCardSection = ({ title, tip, appsCount, appsMaxCount, warningThre
 	const labelId = useUniqueId();
 
 	return (
-		<Box fontScale='c1' mb={12} title={tip}>
+		<Box fontScale='c1' mb={12} title={tip} display='flex' flexDirection='column' width='100%'>
 			<Box display='flex' flexGrow='1' justifyContent='space-between' mbe={4}>
 				<div id={labelId}>{title}</div>
 
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 862504692d1f..fc6a69c1df66 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/CountMACCard.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 
 const CountMACCard = ({ macsCount }: { macsCount: number }): ReactElement => {
 	const { t } = useTranslation();
@@ -15,10 +16,12 @@ const CountMACCard = ({ macsCount }: { macsCount: number }): ReactElement => {
 				infoText: t('CountMAC_InfoText'),
 			}}
 		>
-			<Box fontScale='h1'>
-				<Icon color='font-annotation' name='headset' size={40} mie={4} />
-				{macsCount}
-			</Box>
+			<FeatureUsageCardBody>
+				<Box fontScale='h1'>
+					<Icon color='font-annotation' name='headset' size={40} mie={4} />
+					{macsCount}
+				</Box>
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };
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 a730c4cdf9fb..4280146232a4 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/CountSeatsCard.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 
 const CountSeatsCard = ({ activeUsers }: { activeUsers: number }): ReactElement => {
 	const { t } = useTranslation();
@@ -15,10 +16,12 @@ const CountSeatsCard = ({ activeUsers }: { activeUsers: number }): ReactElement
 				infoText: t('CountSeats_InfoText'),
 			}}
 		>
-			<Box fontScale='h1'>
-				<Icon color='font-annotation' name='user' size={40} mie={4} />
-				{activeUsers}
-			</Box>
+			<FeatureUsageCardBody>
+				<Box fontScale='h1' display='flex' alignItems='center' justifyContent='center'>
+					<Icon color='font-annotation' name='user' size={40} mie={4} />
+					{activeUsers}
+				</Box>
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx
index f60292df064b..af4cf73f63d6 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/MACCard.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { CardProps } from '../FeatureUsageCard';
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 import UpgradeButton from '../UpgradeButton';
 import UsagePieGraph from '../UsagePieGraph';
 
@@ -57,7 +58,9 @@ const MACCard = ({
 
 	return (
 		<FeatureUsageCard card={card}>
-			<UsagePieGraph label={message} used={pieGraph.used} total={pieGraph.total} color={color} />
+			<FeatureUsageCardBody>
+				<UsagePieGraph label={message} used={pieGraph.used} total={pieGraph.total} color={color} />
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };
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 3ce0ee07cabd..f55da3ad06fc 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
@@ -1,4 +1,4 @@
-import { Card, CardBody, CardRow, Icon } from '@rocket.chat/fuselage';
+import { Box, Card, CardBody, Icon } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,12 +12,12 @@ const PlanCardCommunity = (): ReactElement => {
 		<Card height='full'>
 			<PlanCardHeader name={t('Community')} />
 			<CardBody flexDirection='column'>
-				<CardRow>
+				<Box display='flex' flexDirection='row' alignItems='center'>
 					<Icon name='card' size={24} mie={12} /> {t('free_per_month_user')}
-				</CardRow>
-				<CardRow>
+				</Box>
+				<Box display='flex' flexDirection='row' alignItems='center'>
 					<Icon name='cloud-plus' size={24} mie={12} /> {t('Self_managed_hosting')}
-				</CardRow>
+				</Box>
 			</CardBody>
 		</Card>
 	);
diff --git a/apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx b/apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx
index a90f2d1171d0..1806437cff2f 100644
--- a/apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx
+++ b/apps/meteor/client/views/admin/subscription/components/cards/SeatsCard.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import type { CardProps } from '../FeatureUsageCard';
 import FeatureUsageCard from '../FeatureUsageCard';
+import FeatureUsageCardBody from '../FeatureUsageCardBody';
 import UpgradeButton from '../UpgradeButton';
 import UsagePieGraph from '../UsagePieGraph';
 
@@ -43,7 +44,9 @@ const SeatsCard = ({ value, max, hideManageSubscription }: SeatsCardProps): Reac
 	const message = seatsLeft > 0 ? t('Seats_Available', { seatsLeft }) : undefined;
 	return (
 		<FeatureUsageCard card={card}>
-			<UsagePieGraph label={message} used={pieGraph.used} total={pieGraph.total} color={color} />
+			<FeatureUsageCardBody>
+				<UsagePieGraph label={message} used={pieGraph.used} total={pieGraph.total} color={color} />
+			</FeatureUsageCardBody>
 		</FeatureUsageCard>
 	);
 };
diff --git a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
index 5cf225771745..0ff7e96e8002 100644
--- a/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/DeploymentCard/DeploymentCard.tsx
@@ -1,5 +1,5 @@
 import type { IWorkspaceInfo, IStats } from '@rocket.chat/core-typings';
-import { Button, Card, CardControls } from '@rocket.chat/fuselage';
+import { Button, Card, CardBody, CardControls, Margins } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import type { IInstance } from '@rocket.chat/rest-typings';
 import { useSetModal } from '@rocket.chat/ui-contexts';
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
 import WorkspaceCardSection from '../components/WorkspaceCardSection';
 import InstancesModal from './components/InstancesModal';
+import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';
 
 type DeploymentCardProps = {
 	serverInfo: IWorkspaceInfo;
@@ -30,35 +31,59 @@ const DeploymentCard = ({ serverInfo: { info, cloudWorkspaceId }, statistics, in
 
 	return (
 		<Card data-qa-id='deployment-card' height='full'>
-			<WorkspaceCardSection title={t('Deployment')} />
-			<WorkspaceCardSection title={t('Version')} body={statistics.version} />
-			<WorkspaceCardSection title={t('Deployment_ID')} body={statistics.uniqueId} />
+			<CardBody flexDirection='column'>
+				<WorkspaceCardSection>
+					<WorkspaceCardSectionTitle title={t('Deployment')} variant='h4' />
+				</WorkspaceCardSection>
+				<Margins blockEnd={8}>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Version')} />
+						{statistics.version}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Deployment_ID')} />
+						{statistics.uniqueId}
+					</WorkspaceCardSection>
 
-			{cloudWorkspaceId && <WorkspaceCardSection title={t('Cloud_Workspace_Id')} body={cloudWorkspaceId} />}
+					{cloudWorkspaceId && (
+						<WorkspaceCardSection>
+							<WorkspaceCardSectionTitle title={t('Cloud_Workspace_Id')} />
+							{cloudWorkspaceId}
+						</WorkspaceCardSection>
+					)}
 
-			{appsEngineVersion && <WorkspaceCardSection title={t('Apps_Engine_Version')} body={appsEngineVersion} />}
-			<WorkspaceCardSection title={t('Node_version')} body={statistics.process.nodeVersion} />
-			<WorkspaceCardSection
-				title={t('DB_Migration')}
-				body={`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
-			/>
-			<WorkspaceCardSection
-				title={t('MongoDB')}
-				body={`${statistics.mongoVersion} / ${statistics.mongoStorageEngine} ${
-					!statistics.msEnabled ? `(oplog ${statistics.oplogEnabled ? t('Enabled') : t('Disabled')})` : ''
-				}`}
-			/>
-			<WorkspaceCardSection
-				title={t('Commit_details')}
-				body={
-					<>
+					{appsEngineVersion && (
+						<WorkspaceCardSection>
+							<WorkspaceCardSectionTitle title={t('Apps_Engine_Version')} />
+							{appsEngineVersion}
+						</WorkspaceCardSection>
+					)}
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Node_version')} />
+						{statistics.process.nodeVersion}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('DB_Migration')} />
+						{`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('MongoDB')} />
+						{`${statistics.mongoVersion} / ${statistics.mongoStorageEngine} ${
+							!statistics.msEnabled ? `(oplog ${statistics.oplogEnabled ? t('Enabled') : t('Disabled')})` : ''
+						}`}
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Commit_details')} />
 						{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
 						{t('Branch')}: {commit.branch} <br />
 						{commit.subject}
-					</>
-				}
-			/>
-			<WorkspaceCardSection title={t('PID')} body={statistics.process.pid} />
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('PID')} />
+						{statistics.process.pid}
+					</WorkspaceCardSection>
+				</Margins>
+			</CardBody>
 
 			{!!instances.length && (
 				<CardControls>
diff --git a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
index b608df3ed5c5..0939a3774c22 100644
--- a/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/MessagesRoomsCard/MessagesRoomsCard.tsx
@@ -5,6 +5,7 @@ import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import WorkspaceCardSection from '../components/WorkspaceCardSection';
+import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';
 import WorkspaceCardTextSeparator from '../components/WorkspaceCardTextSeparator';
 
 type MessagesRoomsCardProps = {
@@ -16,45 +17,34 @@ const MessagesRoomsCard = ({ statistics }: MessagesRoomsCardProps): ReactElement
 
 	return (
 		<Card height='full'>
-			<WorkspaceCardSection
-				title={t('Total_rooms')}
-				body={
-					<>
-						<WorkspaceCardTextSeparator label={t('Channels')} icon='hash' value={statistics.totalChannels} />
-						<WorkspaceCardTextSeparator label={t('Private_Groups')} icon='lock' value={statistics.totalPrivateGroups} />
-						<WorkspaceCardTextSeparator label={t('Direct_Messages')} icon='balloon' value={statistics.totalDirect} />
-						<WorkspaceCardTextSeparator label={t('Discussions')} icon='discussion' value={statistics.totalDiscussions} />
-						<WorkspaceCardTextSeparator label={t('Omnichannel')} icon='headset' value={statistics.totalLivechat} />
-						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalRooms} />
-					</>
-				}
-			/>
+			<WorkspaceCardSection>
+				<WorkspaceCardSectionTitle title={t('Total_rooms')} variant='h4' />
 
-			<WorkspaceCardSection
-				title={t('Messages')}
-				body={
-					<>
-						<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Channel')} icon='hash' value={statistics.totalChannelMessages} />
-						<WorkspaceCardTextSeparator
-							label={t('Stats_Total_Messages_PrivateGroup')}
-							icon='lock'
-							value={statistics.totalPrivateGroupMessages}
-						/>
-						<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Direct')} icon='balloon' value={statistics.totalDirectMessages} />
-						<WorkspaceCardTextSeparator
-							label={t('Stats_Total_Messages_Discussions')}
-							icon='discussion'
-							value={statistics.totalDiscussionsMessages}
-						/>
-						<WorkspaceCardTextSeparator
-							label={t('Stats_Total_Messages_Livechat')}
-							icon='headset'
-							value={statistics.totalLivechatMessages}
-						/>
-						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalMessages} />
-					</>
-				}
-			/>
+				<WorkspaceCardTextSeparator label={t('Channels')} icon='hash' value={statistics.totalChannels} />
+				<WorkspaceCardTextSeparator label={t('Private_Groups')} icon='lock' value={statistics.totalPrivateGroups} />
+				<WorkspaceCardTextSeparator label={t('Direct_Messages')} icon='balloon' value={statistics.totalDirect} />
+				<WorkspaceCardTextSeparator label={t('Discussions')} icon='discussion' value={statistics.totalDiscussions} />
+				<WorkspaceCardTextSeparator label={t('Omnichannel')} icon='headset' value={statistics.totalLivechat} />
+				<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalRooms} />
+			</WorkspaceCardSection>
+
+			<WorkspaceCardSection>
+				<WorkspaceCardSectionTitle title={t('Messages')} variant='h4' />
+				<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Channel')} icon='hash' value={statistics.totalChannelMessages} />
+				<WorkspaceCardTextSeparator
+					label={t('Stats_Total_Messages_PrivateGroup')}
+					icon='lock'
+					value={statistics.totalPrivateGroupMessages}
+				/>
+				<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Direct')} icon='balloon' value={statistics.totalDirectMessages} />
+				<WorkspaceCardTextSeparator
+					label={t('Stats_Total_Messages_Discussions')}
+					icon='discussion'
+					value={statistics.totalDiscussionsMessages}
+				/>
+				<WorkspaceCardTextSeparator label={t('Stats_Total_Messages_Livechat')} icon='headset' value={statistics.totalLivechatMessages} />
+				<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalMessages} />
+			</WorkspaceCardSection>
 		</Card>
 	);
 };
diff --git a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
index bbf3a27d47b6..2a4290fa3ace 100644
--- a/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/UsersUploadsCard/UsersUploadsCard.tsx
@@ -1,5 +1,5 @@
 import type { IStats } from '@rocket.chat/core-typings';
-import { Button, Card, CardBody, CardControls } from '@rocket.chat/fuselage';
+import { Button, Card, CardBody, CardControls, Margins } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { useFormatMemorySize } from '../../../../hooks/useFormatMemorySize';
 import { useHasLicenseModule } from '../../../../hooks/useHasLicenseModule';
 import WorkspaceCardSection from '../components/WorkspaceCardSection';
+import WorkspaceCardSectionTitle from '../components/WorkspaceCardSectionTitle';
 import WorkspaceCardTextSeparator from '../components/WorkspaceCardTextSeparator';
 
 type UsersUploadsCardProps = {
@@ -30,41 +31,33 @@ const UsersUploadsCard = ({ statistics }: UsersUploadsCardProps): ReactElement =
 	return (
 		<Card height='full'>
 			<CardBody flexDirection='column'>
-				<WorkspaceCardSection
-					title={t('Users')}
-					body={
-						<>
-							<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
-							<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
-							<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
-							<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
-							<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
-						</>
-					}
-				/>
+				<Margins blockEnd={24}>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Users')} variant='h4' />
 
-				<WorkspaceCardSection
-					title={t('Types')}
-					body={
-						<>
-							<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
-							<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
-							<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
-							<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
-							<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
-						</>
-					}
-				/>
+						<WorkspaceCardTextSeparator label={t('Online')} status='online' value={statistics.onlineUsers} />
+						<WorkspaceCardTextSeparator label={t('Busy')} status='busy' value={statistics.busyUsers} />
+						<WorkspaceCardTextSeparator label={t('Away')} status='away' value={statistics.awayUsers} />
+						<WorkspaceCardTextSeparator label={t('Offline')} status='offline' value={statistics.offlineUsers} />
+						<WorkspaceCardTextSeparator label={t('Total')} value={statistics.totalUsers} />
+					</WorkspaceCardSection>
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Types')} variant='h4' />
 
-				<WorkspaceCardSection
-					title={t('Uploads')}
-					body={
-						<>
-							<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
-							<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
-						</>
-					}
-				/>
+						<WorkspaceCardTextSeparator label={t('Users_Connected')} value={statistics.totalConnectedUsers} />
+						<WorkspaceCardTextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
+						<WorkspaceCardTextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
+						<WorkspaceCardTextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
+						<WorkspaceCardTextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
+					</WorkspaceCardSection>
+
+					<WorkspaceCardSection>
+						<WorkspaceCardSectionTitle title={t('Uploads')} variant='h4' />
+
+						<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
+						<WorkspaceCardTextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
+					</WorkspaceCardSection>
+				</Margins>
 			</CardBody>
 
 			<CardControls>
diff --git a/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx b/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx
index 93c05ab2e9a0..f37033cb172d 100644
--- a/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx
+++ b/apps/meteor/client/views/admin/workspace/VersionCard/VersionCard.tsx
@@ -1,6 +1,6 @@
 import type { IWorkspaceInfo } from '@rocket.chat/core-typings';
 import { Box, Card, CardBody, CardCol, CardControls, CardHeader, CardTitle, Icon } from '@rocket.chat/fuselage';
-import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import type { SupportedVersions } from '@rocket.chat/server-cloud-communication';
 import { ExternalLink } from '@rocket.chat/ui-client';
 import type { LocationPathname } from '@rocket.chat/ui-contexts';
@@ -29,14 +29,15 @@ type VersionCardProps = {
 };
 
 const VersionCard = ({ serverInfo }: VersionCardProps): ReactElement => {
-	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+	const breakpoints = useBreakpoints();
+	const isExtraLargeOrBigger = breakpoints.includes('xl');
 
 	const getUrl = useMediaUrl();
 	const cardBackground = {
 		backgroundImage: `url(${getUrl('images/globe.png')})`,
 		backgroundRepeat: 'no-repeat',
-		backgroundPosition: 'right 20px center',
-		backgroundSize: mediaQuery ? 'auto' : 'contain',
+		backgroundPosition: isExtraLargeOrBigger ? 'right 20px center' : 'left 450px center',
+		backgroundSize: 'auto',
 	};
 
 	const setModal = useSetModal();
diff --git a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
index f120daaf0886..612c75a2d4df 100644
--- a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
+++ b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSection.tsx
@@ -3,17 +3,9 @@ import type { ReactNode } from 'react';
 import React from 'react';
 
 type WorkspaceCardSectionProps = {
-	title: string;
-	body?: ReactNode;
+	children: ReactNode;
 };
 
-const WorkspaceCardSection = ({ title, body }: WorkspaceCardSectionProps) => {
-	return (
-		<Box fontScale='c1'>
-			<Box fontScale='c2'>{title}</Box>
-			{body && body}
-		</Box>
-	);
-};
+const WorkspaceCardSection = ({ children }: WorkspaceCardSectionProps) => <Box fontScale='p2'>{children}</Box>;
 
 export default WorkspaceCardSection;
diff --git a/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx
new file mode 100644
index 000000000000..218016c2be75
--- /dev/null
+++ b/apps/meteor/client/views/admin/workspace/components/WorkspaceCardSectionTitle.tsx
@@ -0,0 +1,15 @@
+import { Box } from '@rocket.chat/fuselage';
+import React from 'react';
+
+type WorkspaceCardSectionTitleProps = {
+	variant?: 'p2b' | 'h4';
+	title: string;
+};
+
+const WorkspaceCardSectionTitle = ({ variant = 'p2b', title }: WorkspaceCardSectionTitleProps) => (
+	<Box fontScale={variant} marginBlockEnd={variant === 'h4' ? 20 : 0}>
+		{title}
+	</Box>
+);
+
+export default WorkspaceCardSectionTitle;