diff --git a/apps/meteor/client/views/room/Header/RoomTitle.tsx b/apps/meteor/client/views/room/Header/RoomTitle.tsx
index 7937051cc2ba3..2ff1a21650156 100644
--- a/apps/meteor/client/views/room/Header/RoomTitle.tsx
+++ b/apps/meteor/client/views/room/Header/RoomTitle.tsx
@@ -41,6 +41,7 @@ const RoomTitle = ({ room }: { room: IRoom }): ReactElement => {
 			onClick={() => handleOpenRoomInfo()}
 			tabIndex={0}
 			role='button'
+			mie={4}
 		>
 			<HeaderIconWithRoom room={room} />
 			<HeaderTitle is='h1'>{room.name}</HeaderTitle>
diff --git a/apps/meteor/client/views/room/Header/icons/Favorite.tsx b/apps/meteor/client/views/room/Header/icons/Favorite.tsx
index 3fd30a5d24912..5afbac0355c84 100644
--- a/apps/meteor/client/views/room/Header/icons/Favorite.tsx
+++ b/apps/meteor/client/views/room/Header/icons/Favorite.tsx
@@ -33,8 +33,7 @@ const Favorite = ({ room: { _id, f: favorite = false, t: type, name } }: { room:
 			title={favoriteLabel}
 			icon={favorite ? 'star-filled' : 'star'}
 			onClick={handleFavoriteClick}
-			color={favorite ? 'status-font-on-warning' : null}
-			tiny
+			color={favorite ? 'status-font-on-warning' : undefined}
 		/>
 	);
 };
diff --git a/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx b/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx
index 6e45ce2fa94f4..b9910522d59b4 100644
--- a/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx
+++ b/apps/meteor/client/views/room/HeaderV2/RoomTitle.tsx
@@ -43,6 +43,7 @@ const RoomTitle = ({ room }: RoomTitleProps) => {
 			onClick={() => handleOpenRoomInfo()}
 			tabIndex={0}
 			role='button'
+			mie={4}
 		>
 			<HeaderIconWithRoom room={room} />
 			<HeaderTitle is='h1'>{room.name}</HeaderTitle>
diff --git a/apps/meteor/client/views/room/HeaderV2/icons/Encrypted.tsx b/apps/meteor/client/views/room/HeaderV2/icons/Encrypted.tsx
index 47a613225ebd1..3e376e3b9d661 100644
--- a/apps/meteor/client/views/room/HeaderV2/icons/Encrypted.tsx
+++ b/apps/meteor/client/views/room/HeaderV2/icons/Encrypted.tsx
@@ -9,7 +9,7 @@ import { HeaderState } from '../../../../components/Header';
 const Encrypted = ({ room }: { room: IRoom }) => {
 	const { t } = useTranslation();
 	const e2eEnabled = useSetting('E2E_Enable');
-	return e2eEnabled && room?.encrypted ? <HeaderState title={t('Encrypted')} icon='key' color={colors.g500} tiny /> : null;
+	return e2eEnabled && room?.encrypted ? <HeaderState title={t('Encrypted')} icon='key' color={colors.g500} /> : null;
 };
 
 export default memo(Encrypted);
diff --git a/apps/meteor/client/views/room/HeaderV2/icons/Favorite.tsx b/apps/meteor/client/views/room/HeaderV2/icons/Favorite.tsx
index 3fd30a5d24912..5afbac0355c84 100644
--- a/apps/meteor/client/views/room/HeaderV2/icons/Favorite.tsx
+++ b/apps/meteor/client/views/room/HeaderV2/icons/Favorite.tsx
@@ -33,8 +33,7 @@ const Favorite = ({ room: { _id, f: favorite = false, t: type, name } }: { room:
 			title={favoriteLabel}
 			icon={favorite ? 'star-filled' : 'star'}
 			onClick={handleFavoriteClick}
-			color={favorite ? 'status-font-on-warning' : null}
-			tiny
+			color={favorite ? 'status-font-on-warning' : undefined}
 		/>
 	);
 };
diff --git a/apps/meteor/tests/e2e/channel-management.spec.ts b/apps/meteor/tests/e2e/channel-management.spec.ts
index 71c310d9b6f40..f8ff93723c69f 100644
--- a/apps/meteor/tests/e2e/channel-management.spec.ts
+++ b/apps/meteor/tests/e2e/channel-management.spec.ts
@@ -134,7 +134,7 @@ test.describe.serial('channel-management', () => {
 		targetChannel = hugeName;
 
 		await page.setViewportSize({ width: 640, height: 460 });
-		await expect(page.getByRole('heading', { name: hugeName })).toHaveCSS('width', '419px');
+		await expect(page.getByRole('heading', { name: hugeName })).toHaveCSS('width', '411px');
 	});
 
 	test('should open sidebar clicking on sidebar toggler', async ({ page }) => {
diff --git a/packages/ui-client/src/components/Header/HeaderState.tsx b/packages/ui-client/src/components/Header/HeaderState.tsx
index 01fe2a162129e..5d64f380279c3 100644
--- a/packages/ui-client/src/components/Header/HeaderState.tsx
+++ b/packages/ui-client/src/components/Header/HeaderState.tsx
@@ -1,6 +1,17 @@
 import { Icon, IconButton } from '@rocket.chat/fuselage';
-import type { FC } from 'react';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import type { AllHTMLAttributes, ComponentPropsWithoutRef, FC, MouseEventHandler } from 'react';
 
-const HeaderState: FC<any> = (props) => (props.onClick ? <IconButton mini {...props} /> : <Icon size='x16' name={props.icon} {...props} />);
+type HeaderStateProps =
+	| (Pick<ComponentPropsWithoutRef<typeof IconButton>, 'color' | 'title' | 'icon'> & {
+			onClick: MouseEventHandler;
+	  } & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is'>)
+	| (Omit<ComponentPropsWithoutRef<typeof Icon>, 'name' | 'onClick'> & {
+			icon: IconName;
+			onClick?: undefined;
+	  });
+
+const HeaderState: FC<HeaderStateProps> = (props) =>
+	props.onClick ? <IconButton mini mie={4} {...props} /> : <Icon size='x16' mie={4} name={props.icon} {...props} />;
 
 export default HeaderState;
diff --git a/packages/ui-client/src/components/HeaderV2/HeaderState.tsx b/packages/ui-client/src/components/HeaderV2/HeaderState.tsx
index a5f29d77b28e4..360f3f67715e8 100644
--- a/packages/ui-client/src/components/HeaderV2/HeaderState.tsx
+++ b/packages/ui-client/src/components/HeaderV2/HeaderState.tsx
@@ -1,17 +1,17 @@
 import { Icon, IconButton } from '@rocket.chat/fuselage';
 import type { Keys as IconName } from '@rocket.chat/icons';
-import type { ComponentPropsWithoutRef, MouseEventHandler } from 'react';
+import type { AllHTMLAttributes, ComponentPropsWithoutRef, MouseEventHandler } from 'react';
 
 type HeaderStateProps =
-	| (Omit<ComponentPropsWithoutRef<typeof IconButton>, 'onClick'> & {
+	| (Pick<ComponentPropsWithoutRef<typeof IconButton>, 'color' | 'title' | 'icon'> & {
 			onClick: MouseEventHandler;
-	  })
+	  } & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is'>)
 	| (Omit<ComponentPropsWithoutRef<typeof Icon>, 'name' | 'onClick'> & {
 			icon: IconName;
 			onClick?: undefined;
 	  });
 
 const HeaderState = (props: HeaderStateProps) =>
-	props.onClick ? <IconButton mini {...props} /> : <Icon size='x16' name={props.icon} {...props} />;
+	props.onClick ? <IconButton mini mie={4} {...props} /> : <Icon size='x16' mie={4} name={props.icon} {...props} />;
 
 export default HeaderState;