diff --git a/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/AddExistingModal.tsx b/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/AddExistingModal.tsx
index 0cbc23045092..2b81672deebe 100644
--- a/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/AddExistingModal.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/AddExistingModal.tsx
@@ -1,10 +1,8 @@
-import type { IRoom, Serialized } from '@rocket.chat/core-typings';
 import { Box, Button, Field, Modal } from '@rocket.chat/fuselage';
 import { useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
-import type { ComponentProps } from 'react';
 import React, { memo, useCallback } from 'react';
+import { useForm, Controller } from 'react-hook-form';
 
-import { useForm } from '../../../../../hooks/useForm';
 import RoomsAvailableForTeamsAutoComplete from './RoomsAvailableForTeamsAutoComplete';
 
 type AddExistingModalProps = {
@@ -14,20 +12,18 @@ type AddExistingModalProps = {
 
 const AddExistingModal = ({ onClose, teamId }: AddExistingModalProps) => {
 	const t = useTranslation();
-
-	const addRoomEndpoint = useEndpoint('POST', '/v1/teams.addRooms');
 	const dispatchToastMessage = useToastMessageDispatch();
 
-	const { values, handlers, hasUnsavedChanges } = useForm({
-		rooms: [] as Serialized<IRoom>[],
-	});
+	const addRoomEndpoint = useEndpoint('POST', '/v1/teams.addRooms');
 
-	const { rooms } = values as { rooms: string[] };
-	const { handleRooms } = handlers;
+	const {
+		control,
+		formState: { isDirty },
+		handleSubmit,
+	} = useForm({ defaultValues: { rooms: [] } });
 
 	const handleAddChannels = useCallback(
-		async (e) => {
-			e.preventDefault();
+		async ({ rooms }) => {
 			try {
 				await addRoomEndpoint({
 					rooms,
@@ -41,11 +37,11 @@ const AddExistingModal = ({ onClose, teamId }: AddExistingModalProps) => {
 				onClose();
 			}
 		},
-		[addRoomEndpoint, rooms, teamId, onClose, dispatchToastMessage, t],
+		[addRoomEndpoint, teamId, onClose, dispatchToastMessage, t],
 	);
 
 	return (
-		<Modal wrapperFunction={(props: ComponentProps<typeof Box>) => <Box is='form' onSubmit={handleAddChannels} {...props} />}>
+		<Modal wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleAddChannels)} {...props} />}>
 			<Modal.Header>
 				<Modal.Title>{t('Team_Add_existing_channels')}</Modal.Title>
 				<Modal.Close onClick={onClose} />
@@ -53,13 +49,17 @@ const AddExistingModal = ({ onClose, teamId }: AddExistingModalProps) => {
 			<Modal.Content>
 				<Field mbe='x24'>
 					<Field.Label>{t('Channels')}</Field.Label>
-					<RoomsAvailableForTeamsAutoComplete value={rooms} onChange={handleRooms} />
+					<Controller
+						control={control}
+						name='rooms'
+						render={({ field: { value, onChange } }) => <RoomsAvailableForTeamsAutoComplete value={value} onChange={onChange} />}
+					/>
 				</Field>
 			</Modal.Content>
 			<Modal.Footer>
 				<Modal.FooterControllers>
 					<Button onClick={onClose}>{t('Cancel')}</Button>
-					<Button disabled={!hasUnsavedChanges} type='submit' primary>
+					<Button disabled={!isDirty} type='submit' primary>
 						{t('Add')}
 					</Button>
 				</Modal.FooterControllers>
diff --git a/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/RoomsAvailableForTeamsAutoComplete.tsx b/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/RoomsAvailableForTeamsAutoComplete.tsx
index 13e9d95b3df1..7dbafc9e350f 100644
--- a/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/RoomsAvailableForTeamsAutoComplete.tsx
+++ b/apps/meteor/client/views/teams/contextualBar/channels/AddExistingModal/RoomsAvailableForTeamsAutoComplete.tsx
@@ -1,4 +1,4 @@
-import { AutoComplete, Box, Icon, Option, Options, Chip } from '@rocket.chat/fuselage';
+import { AutoComplete, Box, Option, Options, Chip } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
@@ -46,8 +46,8 @@ const RoomsAvailableForTeamsAutoComplete = ({ value, onChange, ...props }: Rooms
 			filter={filter}
 			setFilter={setFilter}
 			renderSelected={({ selected: { value, label }, onRemove }) => (
-				<Chip key={value} height='x20' value={value} onClick={onRemove} mie='x4'>
-					<Icon name={label.type === 'c' ? 'hash' : 'hashtag-lock'} size='x12' />
+				<Chip key={value} height='x20' value={value} onClick={onRemove} mb='x2' mie='x4'>
+					<RoomAvatar size='x20' room={{ type: label?.type || 'c', _id: value, ...label }} />
 					<Box is='span' margin='none' mis='x4'>
 						{label.name}
 					</Box>