diff --git a/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx b/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx
index f9daf3d14816..e58db0f06162 100644
--- a/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx
+++ b/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx
@@ -7,7 +7,7 @@ type AnnouncementComponenttParams = {
 };
 
 const AnnouncementComponent: FC<AnnouncementComponenttParams> = ({ children, onClickOpen }) => (
-	<RoomBanner className='rcx-header-section' onClick={onClickOpen}>
+	<RoomBanner className='rcx-header-section rcx-announcement-section' onClick={onClickOpen}>
 		<RoomBannerContent data-qa='AnnouncementAnnoucementComponent'>{children}</RoomBannerContent>
 	</RoomBanner>
 );
diff --git a/apps/meteor/client/views/room/body/RoomTopic.tsx b/apps/meteor/client/views/room/body/RoomTopic.tsx
index 0987f39602a8..fee06bd087d6 100644
--- a/apps/meteor/client/views/room/body/RoomTopic.tsx
+++ b/apps/meteor/client/views/room/body/RoomTopic.tsx
@@ -51,7 +51,7 @@ export const RoomTopic = ({ room, user }: RoomTopicProps) => {
 	if (!topic && !roomLeader) return null;
 
 	return (
-		<RoomBanner className='rcx-header-section' role='note'>
+		<RoomBanner className='rcx-header-section rcx-topic-section' role='note'>
 			<RoomBannerContent>
 				{roomLeader && !topic && canEdit ? (
 					<Box is='a' href={href}>
diff --git a/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx b/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx
index e5ab04580314..8b9bda9e4020 100644
--- a/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx
+++ b/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx
@@ -10,6 +10,10 @@ const clickable = css`
 	}
 `;
 
+const style = css`
+	background-color: ${Palette.surface['surface-room']};
+`;
+
 export const RoomBanner = ({ onClick, className, ...props }: ComponentProps<typeof Box>) => {
 	const { isMobile } = useLayout();
 
@@ -25,8 +29,7 @@ export const RoomBanner = ({ onClick, className, ...props }: ComponentProps<type
 				alignItems='center'
 				overflow='hidden'
 				flexDirection='row'
-				bg='room'
-				className={[onClick && clickable, ...(Array.isArray(className) ? className : [className])]}
+				className={[style, onClick && clickable, ...(Array.isArray(className) ? className : [className])]}
 				onClick={onClick}
 				tabIndex={onClick ? 0 : -1}
 				role={onClick ? 'button' : 'banner'}
diff --git a/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx b/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx
index 65c3cd4f38f7..36b5d74569ea 100644
--- a/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx
+++ b/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx
@@ -1,6 +1,16 @@
-import { Box } from '@rocket.chat/fuselage';
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Palette } from '@rocket.chat/fuselage';
 import { HTMLAttributes } from 'react';
 
 export const RoomBannerContent = (props: Omit<HTMLAttributes<HTMLElement>, 'is'>) => (
-	<Box color='hint' fontScale='p2' p={4} flexGrow={1} withTruncatedText {...props} />
+	<Box
+		fontScale='p2'
+		p={4}
+		flexGrow={1}
+		withTruncatedText
+		className={css`
+			color: ${Palette.text['font-hint']};
+		`}
+		{...props}
+	/>
 );