diff --git a/client/Channel/Threads/ContextualBar/List.js b/client/Channel/Threads/ContextualBar/List.js
index 109fe8f74aa..46c5f11a9da 100644
--- a/client/Channel/Threads/ContextualBar/List.js
+++ b/client/Channel/Threads/ContextualBar/List.js
@@ -17,13 +17,13 @@ import RawText from '../../../components/basic/RawText';
 import { useRoute } from '../../../contexts/RouterContext';
 import { useUserId } from '../../../contexts/UserContext';
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../../hooks/useEndpointDataExperimental';
-import { useTimeAgo } from '../../../hooks/useTimeAgo';
-import { MessageSkeleton } from '../../components/Message';
-import { useUserSubscription } from '../../hooks/useUserSubscription';
 import { useUserRoom } from '../../hooks/useUserRoom';
+import { useUserSubscription } from '../../hooks/useUserSubscription';
 import { useSetting } from '../../../contexts/SettingsContext';
-import ThreadListMessage from './components/Message';
+import { useTimeAgo } from '../../../hooks/useTimeAgo';
 import { clickableItem } from '../../helpers/clickableItem';
+import { MessageSkeleton } from '../../components/Message';
+import ThreadListMessage from './components/Message';
 
 function mapProps(WrappedComponent) {
 	return ({ msg, username, replies, tcount, ts, ...props }) => <WrappedComponent replies={tcount} participants={replies.length} username={username} msg={msg} ts={ts} {...props}/>;
diff --git a/client/admin/cloud/ConnectToCloudSection.js b/client/admin/cloud/ConnectToCloudSection.js
index 2b1009d35cc..dc04984121f 100644
--- a/client/admin/cloud/ConnectToCloudSection.js
+++ b/client/admin/cloud/ConnectToCloudSection.js
@@ -47,7 +47,7 @@ function ConnectToCloudSection({
 
 	return <Box is='section' {...props}>
 		<Subtitle>{t('Cloud_registration_required')}</Subtitle>
-		<Box withRichContent>
+		<Box withRichContent color='neutral-800'>
 			<p>{t('Cloud_registration_required_description')}</p>
 		</Box>
 		<ButtonGroup>
diff --git a/client/admin/cloud/TroubleshootingSection.js b/client/admin/cloud/TroubleshootingSection.js
index 4d1c8e7238d..90d0e7017e1 100644
--- a/client/admin/cloud/TroubleshootingSection.js
+++ b/client/admin/cloud/TroubleshootingSection.js
@@ -41,7 +41,7 @@ function TroubleshootingSection({
 	return <Box is='section' {...props}>
 		<Subtitle>{t('Cloud_troubleshooting')}</Subtitle>
 
-		<Box withRichContent>
+		<Box withRichContent color='neutral-800'>
 			<p>{t('Cloud_workspace_support')}</p>
 		</Box>
 
@@ -51,7 +51,7 @@ function TroubleshootingSection({
 			</Button>
 		</ButtonGroup>
 
-		<Box withRichContent>
+		<Box withRichContent color='neutral-800'>
 			<p>
 				{t('Cloud_status_page_description')}:{' '}
 				<a href={statusPageUrl} target='_blank' rel='noopener noreferrer'>{statusPageUrl}</a>
diff --git a/client/admin/cloud/WhatIsItSection.js b/client/admin/cloud/WhatIsItSection.js
index 3bafb0e65f5..43068468066 100644
--- a/client/admin/cloud/WhatIsItSection.js
+++ b/client/admin/cloud/WhatIsItSection.js
@@ -10,7 +10,7 @@ function WhatIsItSection(props) {
 	return <Box is='section' {...props}>
 		<Subtitle>{t('Cloud_what_is_it')}</Subtitle>
 
-		<Box withRichContent>
+		<Box withRichContent color='neutral-800'>
 			<p>{t('Cloud_what_is_it_description')}</p>
 
 			<details>
diff --git a/client/admin/cloud/WorkspaceLoginSection.js b/client/admin/cloud/WorkspaceLoginSection.js
index bc98cc54475..ee505d14e4c 100644
--- a/client/admin/cloud/WorkspaceLoginSection.js
+++ b/client/admin/cloud/WorkspaceLoginSection.js
@@ -85,7 +85,7 @@ function WorkspaceLoginSection({
 	}, [checkUserLoggedIn, dispatchToastMessage, setLoading, setLoggedIn]);
 
 	return <Box is='section' {...props}>
-		<Box withRichContent>
+		<Box withRichContent color='neutral-800'>
 			<p>{t('Cloud_workspace_connected')}</p>
 		</Box>
 
@@ -95,7 +95,7 @@ function WorkspaceLoginSection({
 				: <Button primary disabled={isLoading} onClick={handleLoginButtonClick}>{t('Cloud_login_to_cloud')}</Button>}
 		</ButtonGroup>
 
-		<Box withRichContent>
+		<Box withRichContent color='neutral-800'>
 			<p>{t('Cloud_workspace_disconnect')}</p>
 		</Box>
 
diff --git a/client/admin/cloud/WorkspaceRegistrationSection.js b/client/admin/cloud/WorkspaceRegistrationSection.js
index 8f2884afa63..f1fc89c8cff 100644
--- a/client/admin/cloud/WorkspaceRegistrationSection.js
+++ b/client/admin/cloud/WorkspaceRegistrationSection.js
@@ -118,7 +118,7 @@ function WorkspaceRegistrationSection({
 				<Button primary disabled={isProcessing} onClick={handleConnectButtonClick}>{t('Connect')}</Button>
 			</ButtonGroup>
 
-			<Box withRichContent>
+			<Box withRichContent color='neutral-800'>
 				<p>{t('Cloud_connect_support')}: <a href={supportMailtoUrl} target='_blank' rel='noopener noreferrer'>{supportEmailAddress}</a></p>
 			</Box>
 		</Margins>
diff --git a/client/components/basic/Page.js b/client/components/basic/Page.js
index deb42507fef..ae9c59b821f 100644
--- a/client/components/basic/Page.js
+++ b/client/components/basic/Page.js
@@ -12,6 +12,7 @@ function Page(props) {
 	const [border, setBorder] = useState(false);
 	return <PageContext.Provider value={[border, setBorder]}>
 		<Box
+			backgroundColor='surface'
 			is='section'
 			display='flex'
 			flexDirection='column'
@@ -43,6 +44,7 @@ function PageHeader({ children, title, ...props }) {
 			flexDirection='row'
 			flexWrap='nowrap'
 			alignItems='center'
+			color='neutral-800'
 			{...props}
 		>
 			{hasBurgerMenuButton && <BurgerMenuButton
diff --git a/client/components/basic/TextCopy.js b/client/components/basic/TextCopy.js
index aaf094eb640..9b45d190a34 100644
--- a/client/components/basic/TextCopy.js
+++ b/client/components/basic/TextCopy.js
@@ -26,7 +26,7 @@ const TextCopy = ({ text, wordBreak = 'break-all', ...props }) => {
 		alignItems='flex-start'
 		flexGrow={1}
 		padding='x16'
-		backgroundColor='neutral-100'
+		backgroundColor='surface'
 		width='full'
 		{...props}
 	>
diff --git a/client/components/basic/VerticalBar.js b/client/components/basic/VerticalBar.js
index 19f50827c09..b1c131e4100 100644
--- a/client/components/basic/VerticalBar.js
+++ b/client/components/basic/VerticalBar.js
@@ -11,6 +11,7 @@ function VerticalBar({ children, ...props }) {
 
 	return <Box
 		rcx-vertical-bar
+		backgroundColor='surface'
 		display='flex'
 		flexDirection='column'
 		flexShrink={0}
@@ -18,7 +19,6 @@ function VerticalBar({ children, ...props }) {
 		height='full'
 		position={small ? 'absolute' : undefined}
 		insetInlineEnd={small ? 'none' : undefined}
-		backgroundColor='white'
 		{...props}
 	>
 		{children}
@@ -33,10 +33,10 @@ function VerticalBarHeader({ children, ...props }) {
 		display='flex'
 		alignItems='center'
 		justifyContent='space-between'
-		backgroundColor='white'
 		borderBlockColor='neutral-200'
 		borderBlockEndWidth='x2'
 		fontScale='s2'
+		color='neutral-800'
 		{...props}
 	>
 		<Margins inline='x4'>{children}</Margins>