diff --git a/client/components/Header/Header.tsx b/client/components/Header/Header.tsx
index f0a2043dddb9f..9c14618c44b3d 100644
--- a/client/components/Header/Header.tsx
+++ b/client/components/Header/Header.tsx
@@ -1,33 +1,38 @@
 import { Box } from '@rocket.chat/fuselage';
 import React, { FC } from 'react';
 
+import { useLayout } from '../../contexts/LayoutContext';
 import HeaderDivider from './HeaderDivider';
 
-const Header: FC<any> = (props) => (
-	<Box
-		rcx-room-header
-		is='header'
-		height='x64'
-		display='flex'
-		justifyContent='center'
-		flexDirection='column'
-		overflow='hidden'
-		flexShrink={0}
-	>
+const Header: FC<any> = (props) => {
+	const { isMobile } = useLayout();
+
+	return (
 		<Box
+			rcx-room-header
+			is='header'
 			height='x64'
-			mi='neg-x4'
-			pi='x24'
 			display='flex'
-			flexGrow={1}
 			justifyContent='center'
-			alignItems='center'
+			flexDirection='column'
 			overflow='hidden'
-			flexDirection='row'
-			{...props}
-		/>
-		<HeaderDivider />
-	</Box>
-);
+			flexShrink={0}
+		>
+			<Box
+				height='x64'
+				mi='neg-x4'
+				pi={isMobile ? 'x12' : 'x24'}
+				display='flex'
+				flexGrow={1}
+				justifyContent='center'
+				alignItems='center'
+				overflow='hidden'
+				flexDirection='row'
+				{...props}
+			/>
+			<HeaderDivider />
+		</Box>
+	);
+};
 
 export default Header;
diff --git a/client/views/room/Header/DirectRoomHeader.js b/client/views/room/Header/DirectRoomHeader.js
index e9044ab817153..fc7ff71908de5 100644
--- a/client/views/room/Header/DirectRoomHeader.js
+++ b/client/views/room/Header/DirectRoomHeader.js
@@ -4,12 +4,12 @@ import { useUserId } from '../../../contexts/UserContext';
 import { useUserData } from '../../../hooks/useUserData';
 import RoomHeader from './RoomHeader';
 
-const DirectRoomHeader = ({ room }) => {
+const DirectRoomHeader = ({ room, slots }) => {
 	const userId = useUserId();
 	const directUserId = room.uids.filter((uid) => uid !== userId).shift();
 	const directUserData = useUserData(directUserId);
 
-	return <RoomHeader room={room} topic={directUserData?.statusText} />;
+	return <RoomHeader slots={slots} room={room} topic={directUserData?.statusText} />;
 };
 
 export default DirectRoomHeader;
diff --git a/client/views/room/Header/Header.js b/client/views/room/Header/Header.js
index d6d65217fd8dc..31a6ae1f3eb74 100644
--- a/client/views/room/Header/Header.js
+++ b/client/views/room/Header/Header.js
@@ -9,6 +9,7 @@ import RoomHeader from './RoomHeader';
 
 const Header = ({ room }) => {
 	const { isMobile, isEmbedded, showTopNavbarEmbeddedLayout } = useLayout();
+
 	const slots = useMemo(
 		() => ({
 			start: isMobile && (