diff --git a/client/contexts/ServerContext/endpoints.ts b/client/contexts/ServerContext/endpoints.ts
index 4354dcbf1a123..0fc3e1a17f06c 100644
--- a/client/contexts/ServerContext/endpoints.ts
+++ b/client/contexts/ServerContext/endpoints.ts
@@ -2,12 +2,14 @@ import { FollowMessageEndpoint as ChatFollowMessageEndpoint } from './endpoints/
 import { GetMessageEndpoint as ChatGetMessageEndpoint } from './endpoints/v1/chat/getMessage';
 import { UnfollowMessageEndpoint as ChatUnfollowMessageEndpoint } from './endpoints/v1/chat/unfollowMessage';
 import { AutocompleteEndpoint as UsersAutocompleteEndpoint } from './endpoints/v1/users/autocomplete';
+import { AutocompleteChannelAndPrivateEndpoint as RoomsAutocompleteEndpoint } from './endpoints/v1/rooms/autocompleteChannelAndPrivate';
 import { AppearanceEndpoint as LivechatAppearanceEndpoint } from './endpoints/v1/livechat/appearance';
 import { ListEndpoint as CustomUserStatusListEndpoint } from './endpoints/v1/custom-user-status/list';
 import { ExternalComponentsEndpoint as AppsExternalComponentsEndpoint } from './endpoints/apps/externalComponents';
 import { ManualRegisterEndpoint as CloudManualRegisterEndpoint } from './endpoints/v1/cloud/manualRegister';
 import { FilesEndpoint as GroupsFilesEndpoint } from './endpoints/v1/groups/files';
 import { FilesEndpoint as ImFilesEndpoint } from './endpoints/v1/im/files';
+import { AddRoomsEndpoint as TeamsAddRoomsEndpoint } from './endpoints/v1/teams/addRooms';
 import { FilesEndpoint as ChannelsFilesEndpoint } from './endpoints/v1/channels/files';
 import { ListEndpoint as EmojiCustomListEndpoint } from './endpoints/v1/emoji-custom/list';
 import { GetDiscussionsEndpoint as ChatGetDiscussionsEndpoint } from './endpoints/v1/chat/getDiscussions';
@@ -28,6 +30,8 @@ export type ServerEndpoints = {
 	'livechat/appearance': LivechatAppearanceEndpoint;
 	'custom-user-status.list': CustomUserStatusListEndpoint;
 	'/apps/externalComponents': AppsExternalComponentsEndpoint;
+	'rooms.autocomplete.channelAndPrivate': RoomsAutocompleteEndpoint;
+	'teams.addRooms': TeamsAddRoomsEndpoint;
 };
 
 export type ServerEndpointPath = keyof ServerEndpoints;
diff --git a/client/contexts/ServerContext/endpoints/v1/rooms/autocompleteChannelAndPrivate.ts b/client/contexts/ServerContext/endpoints/v1/rooms/autocompleteChannelAndPrivate.ts
new file mode 100644
index 0000000000000..0b84607ca8d98
--- /dev/null
+++ b/client/contexts/ServerContext/endpoints/v1/rooms/autocompleteChannelAndPrivate.ts
@@ -0,0 +1,5 @@
+import { IRoom } from '../../../../../../definition/IRoom';
+
+export type AutocompleteChannelAndPrivateEndpoint = {
+	GET: (params: { selector: string }) => { items: IRoom[] };
+};
diff --git a/client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts b/client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts
new file mode 100644
index 0000000000000..cc1a8fc9ef475
--- /dev/null
+++ b/client/contexts/ServerContext/endpoints/v1/teams/addRooms.ts
@@ -0,0 +1,9 @@
+import { IRoom } from '../../../../../../definition/IRoom';
+
+export type AddRoomsEndpoint = {
+	POST: (params: { rooms: IRoom['_id'][]; teamId: string }) => {
+		success: true;
+		statusCode: 200;
+		body: IRoom[];
+	};
+};
diff --git a/client/main.js b/client/main.js
index 6b00aa64b0347..9ee80d00c408e 100644
--- a/client/main.js
+++ b/client/main.js
@@ -21,5 +21,5 @@ import './startup';
 import './views/admin';
 import './views/login';
 import './views/room/adapters';
-import './adapters';
 import './views/teams';
+import './adapters';
diff --git a/client/sidebar/header/CreateChannel.js b/client/sidebar/header/CreateChannel.js
index c5515e10c478d..c762558580d4e 100644
--- a/client/sidebar/header/CreateChannel.js
+++ b/client/sidebar/header/CreateChannel.js
@@ -129,6 +129,7 @@ export const CreateChannel = ({
 
 export default memo(({
 	onClose,
+	teamId = '',
 }) => {
 	const createChannel = useEndpointActionExperimental('POST', 'channels.create');
 	const createPrivateChannel = useEndpointActionExperimental('POST', 'groups.create');
@@ -206,6 +207,7 @@ export default memo(({
 			name,
 			members: users,
 			readOnly,
+			...teamId && { teamId },
 			extraData: {
 				broadcast,
 				encrypted,
@@ -215,10 +217,10 @@ export default memo(({
 
 		if (type) {
 			roomData = await createPrivateChannel(params);
-			goToRoom(roomData.group._id);
+			!teamId && goToRoom(roomData.group._id);
 		} else {
 			roomData = await createChannel(params);
-			goToRoom(roomData.channel._id);
+			!teamId && goToRoom(roomData.channel._id);
 		}
 
 		if (roomData.success && roomData.group && description) {
@@ -238,6 +240,7 @@ export default memo(({
 		readOnly,
 		setChannelDescription,
 		setPrivateChannelDescription,
+		teamId,
 		type,
 		users,
 	]);
diff --git a/client/views/directory/TeamsTab.js b/client/views/directory/TeamsTab.js
index e8e3c8317c4f5..a2334f3cad45a 100644
--- a/client/views/directory/TeamsTab.js
+++ b/client/views/directory/TeamsTab.js
@@ -91,7 +91,6 @@ function TeamsTable() {
 
 	return <GenericTable
 		header={header}
-		// renderFilter={({ onChange, ...props }) => <FilterByText placeholder={t('Search_Teams')} inputRef={refAutoFocus} onChange={onChange} {...props} />}
 		renderRow={renderRow}
 		results={data.teams}
 		setParams={setParams}
diff --git a/client/views/room/index.js b/client/views/room/index.js
index 593ebec9cbf70..b272971bbfd5c 100644
--- a/client/views/room/index.js
+++ b/client/views/room/index.js
@@ -31,7 +31,7 @@ const Room = () => {
 		<RoomTemplate.Body><BlazeTemplate onClick={hideFlexTab ? close : undefined} name='roomOld' tabBar={tabBar} rid={room._id} _id={room._id} /></RoomTemplate.Body>
 		{ tab && <RoomTemplate.Aside data-qa-tabbar-name={tab.id}>
 			{ typeof tab.template === 'string' && <VerticalBarOldActions {...tab} name={tab.template} tabBar={tabBar} rid={room._id} _id={room._id} /> }
-			{ typeof tab.template !== 'string' && <LazyComponent template={tab.template} tabBar={tabBar} rid={room._id} _id={room._id} /> }
+			{ typeof tab.template !== 'string' && <LazyComponent template={tab.template} tabBar={tabBar} rid={room._id} teamId={room.teamId} _id={room._id} /> }
 		</RoomTemplate.Aside>}
 	</RoomTemplate>;
 };
diff --git a/client/views/room/providers/ToolboxProvider.tsx b/client/views/room/providers/ToolboxProvider.tsx
index 4861ed551183c..56a66de40f12e 100644
--- a/client/views/room/providers/ToolboxProvider.tsx
+++ b/client/views/room/providers/ToolboxProvider.tsx
@@ -30,6 +30,7 @@ const VirtualAction = React.memo(({ handleChange, room, action, id }: { id: stri
 	const config = typeof action === 'function' ? action({ room }) : action;
 
 	const group = getGroup(room);
+
 	const visible = config && (!config.groups || (groupsDict[room.t] && config.groups.includes(group as any)));
 
 	useLayoutEffect(() => {
diff --git a/client/views/teams/contextualBar/TeamChannelItem.js b/client/views/teams/contextualBar/TeamChannelItem.js
new file mode 100644
index 0000000000000..495fde584a8c3
--- /dev/null
+++ b/client/views/teams/contextualBar/TeamChannelItem.js
@@ -0,0 +1,122 @@
+import React, { useMemo, useState } from 'react';
+import { ActionButton, Box, CheckBox, Icon, Menu, Option } from '@rocket.chat/fuselage';
+import { usePrefersReducedMotion, useMutableCallback } from '@rocket.chat/fuselage-hooks';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useEndpoint } from '../../../contexts/ServerContext';
+import { useSetModal } from '../../../contexts/ModalContext';
+import RoomAvatar from '../../../components/avatar/RoomAvatar';
+import ConfirmationModal from '../modals/ConfirmationModal';
+import { roomTypes } from '../../../../app/utils/client';
+
+export const useReactModal = (Component, props) => {
+	const setModal = useSetModal();
+
+	return useMutableCallback(() => {
+		const handleClose = () => {
+			setModal(null);
+		};
+
+		setModal(() => <Component
+			onClose={handleClose}
+			{...props}
+		/>);
+	});
+};
+
+const RoomActions = ({ room }) => {
+	const t = useTranslation();
+	const updateRoomEndpoint = useEndpoint('POST', 'teams.updateRoom');
+	const removeRoomEndpoint = useEndpoint('POST', 'teams.removeRoom');
+	const deleteRoomEndpoint = useEndpoint('POST', room.t === 'c' ? 'channels.delete' : 'groups.delete');
+
+	const RemoveFromTeamAction = useReactModal(ConfirmationModal, {
+		onConfirmAction: () => {
+			removeRoomEndpoint({ teamId: room.teamId, roomId: room._id });
+		},
+		labelButton: t('Remove'),
+		content: <Box is='span' size='14px'>{t('Team_Remove_from_team_modal_content', { teamName: roomTypes.getRoomName(room.t, room) })}</Box>,
+	});
+
+	const DeleteChannelAction = useReactModal(ConfirmationModal, {
+		onConfirmAction: () => {
+			deleteRoomEndpoint({ roomId: room._id });
+		},
+		labelButton: t('Delete'),
+		content: <>
+			<Box is='span' size='14px' color='danger-500' fontWeight='600'>{t('Team_Delete_Channel_modal_content_danger')}</Box>
+			<Box is='span' size='14px'> {t('Team_Delete_Channel_modal_content')}</Box>
+		</>,
+	});
+
+	const menuOptions = useMemo(() => {
+		const AutoJoinAction = () => {
+			updateRoomEndpoint({
+				roomId: room._id,
+				isDefault: !room.teamDefault,
+			});
+		};
+
+		return [{
+			label: {
+				label: t('Team_Auto-join'),
+				icon: room.t === 'c' ? 'hash' : 'hashtag-lock',
+			},
+			action: AutoJoinAction,
+		},
+		{
+			label: {
+				label: t('Team_Remove_from_team'),
+				icon: 'cross',
+			},
+			action: RemoveFromTeamAction,
+		},
+		{
+			label: {
+				label: t('Delete'),
+				icon: 'trash',
+			},
+			action: DeleteChannelAction,
+		}];
+	}, [DeleteChannelAction, RemoveFromTeamAction, room._id, room.t, room.teamDefault, t, updateRoomEndpoint]);
+
+	return <Menu
+		flexShrink={0}
+		key='menu'
+		tiny
+		renderItem={({ label: { label, icon }, ...props }) =>
+			(icon.match(/hash/)
+				? <Option {...props} label={label} icon={icon}><CheckBox checked={room.teamDefault} /></Option>
+				: <Box color='danger-600'><Option {...props} label={label} icon={icon} /></Box>)}
+		options={menuOptions}
+	/>;
+};
+
+export const TeamChannelItem = ({ room }) => {
+	const [showButton, setShowButton] = useState();
+
+	const isReduceMotionEnabled = usePrefersReducedMotion();
+	const handleMenuEvent = { [isReduceMotionEnabled ? 'onMouseEnter' : 'onTransitionEnd']: setShowButton };
+
+	return (
+		<Option
+			id={room._id}
+			{ ...handleMenuEvent }
+		>
+			<Option.Avatar>
+				<RoomAvatar room={room} size='x28' />
+			</Option.Avatar>
+			<Option.Column>{room.t === 'c' ? <Icon name='hash' size='x15'/> : <Icon name='hashtag-lock' size='x15'/>}</Option.Column>
+			<Option.Content>{room.fname || room.name}</Option.Content>
+			<Option.Menu>
+				{showButton ? <RoomActions room={room} /> : <ActionButton
+					ghost
+					tiny
+					icon='kebab'
+				/>}
+			</Option.Menu>
+		</Option>
+	);
+};
+
+TeamChannelItem.Skeleton = Option.Skeleton;
diff --git a/client/views/teams/contextualBar/TeamChannels.js b/client/views/teams/contextualBar/TeamChannels.js
new file mode 100644
index 0000000000000..c3f116089242c
--- /dev/null
+++ b/client/views/teams/contextualBar/TeamChannels.js
@@ -0,0 +1,172 @@
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { Box, Icon, TextInput, Margins, Select, Throbber, ButtonGroup, Button } from '@rocket.chat/fuselage';
+import { Virtuoso } from 'react-virtuoso';
+import { useMutableCallback, useLocalStorage, useAutoFocus } from '@rocket.chat/fuselage-hooks';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useEndpoint } from '../../../contexts/ServerContext';
+import { useSetModal } from '../../../contexts/ModalContext';
+import { useScrollableRecordList } from '../../../hooks/lists/useScrollableRecordList';
+import { useRecordList } from '../../../hooks/lists/useRecordList';
+import { RecordList } from '../../../lib/lists/RecordList.ts';
+import ScrollableContentWrapper from '../../../components/ScrollableContentWrapper';
+import VerticalBar from '../../../components/VerticalBar';
+import AddExistingModal from '../modals/AddExistingModal';
+import { TeamChannelItem } from './TeamChannelItem';
+import CreateChannel from '../../../sidebar/header/CreateChannel';
+
+const Row = memo(function Row({ room }) {
+	if (!room) {
+		return <BaseTeamChannels.Option.Skeleton />;
+	}
+
+	return <BaseTeamChannels.Option
+		room={room}
+	/>;
+});
+
+const BaseTeamChannels = ({
+	loading,
+	channels = [],
+	text,
+	type,
+	setText,
+	setType,
+	onClickClose,
+	onClickAddExisting,
+	onClickCreateNew,
+	total,
+	loadMoreItems,
+}) => {
+	const t = useTranslation();
+	const inputRef = useAutoFocus(true);
+
+	const options = useMemo(() => [
+		['all', t('All')],
+		['autoJoin', t('Auto-join')],
+	], [t]);
+
+	const lm = useMutableCallback((start) => loadMoreItems(start + 1, Math.min(50, start + 1 - channels.length)));
+
+	return (
+		<>
+			<VerticalBar.Header>
+				<VerticalBar.Icon name='hash'/>
+				<VerticalBar.Text>{t('Channels')}</VerticalBar.Text>
+				{ onClickClose && <VerticalBar.Close onClick={onClickClose} /> }
+			</VerticalBar.Header>
+
+			<VerticalBar.Content p='x12'>
+				<Box display='flex' flexDirection='row' p='x12' flexShrink={0}>
+					<Box display='flex' flexDirection='row' flexGrow={1} mi='neg-x4'>
+						<Margins inline='x4'>
+							<TextInput placeholder={t('Search')} value={text} ref={inputRef} onChange={setText} addon={<Icon name='magnifier' size='x20'/>}/>
+							<Select
+								flexGrow={0}
+								width='110px'
+								onChange={setType}
+								value={type}
+								options={options} />
+						</Margins>
+					</Box>
+				</Box>
+
+				{loading && <Box pi='x24' pb='x12'><Throbber size='x12' /></Box>}
+				{!loading && channels.length <= 0 && <Box pi='x24' pb='x12'>{t('No_results_found')}</Box>}
+
+				<Box w='full' h='full' overflow='hidden' flexShrink={1}>
+					{!loading && channels && channels.length > 0 && <Virtuoso
+						style={{ height: '100%', width: '100%' }}
+						totalCount={total}
+						endReached={lm}
+						overscan={50}
+						data={channels}
+						components={{ Scroller: ScrollableContentWrapper }}
+						itemContent={(index, data) => <Row
+							room={data}
+						/>}
+					/>}
+				</Box>
+			</VerticalBar.Content>
+
+			<VerticalBar.Footer>
+				<ButtonGroup stretch>
+					{ onClickAddExisting && <Button onClick={onClickAddExisting} width='50%'>{t('Team_Add_existing')}</Button> }
+					{ onClickCreateNew && <Button onClick={onClickCreateNew} width='50%' primary>{t('Create_new')}</Button> }
+				</ButtonGroup>
+			</VerticalBar.Footer>
+		</>
+	);
+};
+
+BaseTeamChannels.Option = TeamChannelItem;
+
+export const useReactModal = (Component, props) => {
+	const setModal = useSetModal();
+
+	return useMutableCallback((e) => {
+		e.preventDefault();
+
+		const handleClose = () => {
+			setModal(null);
+		};
+
+		setModal(() => <Component
+			onClose={handleClose}
+			{...props}
+		/>);
+	});
+};
+
+function TeamChannels({ teamId, tabBar }) {
+	const [type, setType] = useLocalStorage('channels-list-type', 'all');
+	const [text, setText] = useState('');
+	const [roomList] = useState(() => new RecordList());
+
+	const roomListEndpoint = useEndpoint('GET', 'teams.listRooms');
+
+	const fetchData = useCallback(async (/* start, end*/) => {
+		const { rooms, total } = await roomListEndpoint({ teamId });
+
+		const roomsDated = rooms.map((rooms) => {
+			rooms._updatedAt = new Date(rooms._updatedAt);
+			return { ...rooms };
+		});
+		return {
+			items: roomsDated,
+			itemCount: total,
+		};
+	}, [roomListEndpoint, teamId]);
+
+	const { loadMoreItems } = useScrollableRecordList(
+		roomList,
+		fetchData,
+	);
+	const { phase, items, itemCount } = useRecordList(roomList);
+
+	const handleTextChange = useCallback((event) => {
+		setText(event.currentTarget.value);
+	}, []);
+
+	const addExisting = useReactModal(AddExistingModal, { teamId });
+
+	const createNew = useReactModal(CreateChannel, { teamId });
+
+	return (
+		<BaseTeamChannels
+			loading={phase === 'loading'}
+			type={type}
+			text={text}
+			setType={setType}
+			setText={handleTextChange}
+			channels={items}
+			total={itemCount}
+			onClickClose={tabBar.close}
+			onClickAddExisting={addExisting}
+			onClickCreateNew={createNew}
+			loadMoreItems={loadMoreItems}
+		/>
+	);
+}
+
+export default TeamChannels;
diff --git a/client/views/teams/contextualBar/index.ts b/client/views/teams/contextualBar/index.ts
new file mode 100644
index 0000000000000..d2633b51a8615
--- /dev/null
+++ b/client/views/teams/contextualBar/index.ts
@@ -0,0 +1,14 @@
+import { lazy, LazyExoticComponent, FC } from 'react';
+
+import { addAction } from '../../room/lib/Toolbox';
+
+addAction('team-channels', () => ({
+	groups: ['team'],
+	id: 'team-channels',
+	anonymous: true,
+	title: 'Team_Channels',
+	icon: 'hash',
+	template: lazy(() => import('./TeamChannels')) as LazyExoticComponent<FC>,
+	full: true,
+	order: 8,
+}));
diff --git a/client/views/teams/index.js b/client/views/teams/index.js
index 9e9bd979d05b1..9a2bd377992cb 100644
--- a/client/views/teams/index.js
+++ b/client/views/teams/index.js
@@ -1,3 +1,4 @@
+import './contextualBar';
 import './info/tabBar.ts';
 import './members/tabBar';
 import './info';
diff --git a/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
new file mode 100644
index 0000000000000..0b078bacfdfae
--- /dev/null
+++ b/client/views/teams/modals/AddExistingModal/AddExistingModal.tsx
@@ -0,0 +1,95 @@
+import React, { memo, FC, useCallback } from 'react';
+import { ButtonGroup, Button, Field, Modal } from '@rocket.chat/fuselage';
+
+import { useForm } from '../../../../hooks/useForm';
+import { useTranslation } from '../../../../contexts/TranslationContext';
+import { useEndpoint } from '../../../../contexts/ServerContext';
+import RoomsInput from './RoomsInput';
+import { IRoom } from '../../../../../definition/IRoom';
+import { useToastMessageDispatch } from '../../../../contexts/ToastMessagesContext';
+
+type AddExistingModalState = {
+	onAdd: any;
+	rooms: IRoom[];
+	onChange: (value: IRoom, action: 'remove' | undefined) => void;
+	hasUnsavedChanges: boolean;
+}
+
+type AddExistingModalProps = {
+	onClose: () => void;
+	teamId: string;
+};
+
+const useAddExistingModalState = (onClose: () => void, teamId: string): AddExistingModalState => {
+	const addRoomEndpoint = useEndpoint('POST', 'teams.addRooms');
+
+	const { values, handlers, hasUnsavedChanges } = useForm({
+		rooms: [] as IRoom[],
+	});
+
+	const { rooms } = values as { rooms: IRoom[] };
+	const { handleRooms } = handlers;
+
+	const onChange = useCallback<AddExistingModalState['onChange']>((value, action) => {
+		if (!action) {
+			if (rooms.some((current: IRoom) => current._id === value._id)) {
+				return;
+			}
+
+			handleRooms([...rooms, value]);
+
+			return;
+		}
+
+		handleRooms(rooms.filter((current: any) => current._id !== value));
+	}, [handleRooms, rooms]);
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const onAdd = useCallback(async () => {
+		try {
+			await addRoomEndpoint({
+				rooms: rooms.map((room) => room._id),
+				teamId,
+			});
+			onClose();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	}, [addRoomEndpoint, rooms, teamId, onClose, dispatchToastMessage]);
+
+	return { onAdd, rooms, onChange, hasUnsavedChanges };
+};
+
+const AddExistingModal: FC<AddExistingModalProps> = ({ onClose, teamId }) => {
+	const t = useTranslation();
+	const {
+		rooms,
+		onAdd,
+		onChange,
+		hasUnsavedChanges,
+	} = useAddExistingModalState(onClose, teamId);
+
+	const isAddButtonEnabled = hasUnsavedChanges;
+
+	return <Modal>
+		<Modal.Header>
+			<Modal.Title>{t('Team_Add_existing_channels')}</Modal.Title>
+			<Modal.Close onClick={onClose}/>
+		</Modal.Header>
+		<Modal.Content>
+			<Field mbe='x24'>
+				<Field.Label>{t('Channels')}</Field.Label>
+				<RoomsInput value={rooms} onChange={onChange} />
+			</Field>
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button onClick={onClose}>{t('Cancel')}</Button>
+				<Button disabled={!isAddButtonEnabled} onClick={onAdd} primary>{t('Add')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default memo(AddExistingModal);
diff --git a/client/views/teams/modals/AddExistingModal/RoomsInput.tsx b/client/views/teams/modals/AddExistingModal/RoomsInput.tsx
new file mode 100644
index 0000000000000..4c23bcfd60a97
--- /dev/null
+++ b/client/views/teams/modals/AddExistingModal/RoomsInput.tsx
@@ -0,0 +1,87 @@
+import { AutoComplete, Box, Icon, Option, Options, Chip, AutoCompleteProps } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import React, { FC, memo, useCallback, useMemo, useState } from 'react';
+
+import { IRoom } from '../../../../../definition/IRoom';
+import RoomAvatar from '../../../../components/avatar/RoomAvatar';
+import { useEndpointData } from '../../../../hooks/useEndpointData';
+import { roomTypes } from '../../../../../app/utils/client';
+
+type RoomsInputProps = {
+	value: IRoom[];
+	onChange: (value: IRoom, action: 'remove' | undefined) => void;
+};
+
+// TODO: Make AutoComplete accept arbitrary kinds of values
+const useRoomsAutoComplete = (name: string): {
+	rooms: Record<IRoom['_id'], IRoom>;
+	options: AutoCompleteProps['options'];
+} => {
+	const params = useMemo(() => ({
+		selector: JSON.stringify({ name }),
+	}), [name]);
+	const { value: data } = useEndpointData('rooms.autocomplete.channelAndPrivate', params);
+
+	const options = useMemo<AutoCompleteProps['options']>(() => {
+		if (!data) {
+			return [];
+		}
+
+		return data.items.map((room: IRoom) => ({
+			label: roomTypes.getRoomName(room.t, room),
+			value: room._id,
+		}));
+	}, [data]);
+
+	const rooms = useMemo<Record<IRoom['_id'], IRoom>>(() => data?.items.reduce((obj, room) => {
+		obj[room._id] = room;
+		return obj;
+	}, {} as Record<IRoom['_id'], IRoom>) ?? {}, [data]);
+
+	return {
+		options,
+		rooms,
+	};
+};
+
+const RoomsInput: FC<RoomsInputProps> = ({ onChange, ...props }) => {
+	const [filter, setFilter] = useState('');
+	const { rooms, options } = useRoomsAutoComplete(useDebouncedValue(filter, 1000));
+
+	const onClickSelected = useCallback((e) => {
+		e.stopPropagation();
+		e.preventDefault();
+
+		onChange(rooms[e.currentTarget.value], 'remove');
+	}, [onChange, rooms]);
+
+	const handleChange = useCallback<AutoCompleteProps['onChange']>((value, action) => {
+		onChange(rooms[value as IRoom['_id']], action);
+	}, [onChange, rooms]);
+
+	const renderSelected = useCallback<FC<{ value?: IRoom[] }>>(
+		({ value: selected }) => <>
+			{selected?.map((room) => (<Chip key={room._id} height='x20' value={room._id} onClick={onClickSelected} mie='x4'>
+				<Icon name={room.t === 'c' ? 'hash' : 'hashtag-lock'} size='x12' />
+				<Box is='span' margin='none' mis='x4'>{room.name}</Box>
+			</Chip>))}
+		</>, [onClickSelected],
+	);
+
+	const renderItem = useCallback<FC<{ value: IRoom['_id'] }>>(
+		({ value: rid, ...props }) => <Option key={rooms[rid]._id} {...props} avatar={<RoomAvatar room={rooms[rid]} size={Options.AvatarSize} />} />,
+		[rooms],
+	);
+
+	return <AutoComplete
+		{...props}
+		filter={filter}
+		options={options}
+		renderSelected={renderSelected}
+		renderItem={renderItem}
+		setFilter={setFilter}
+		onChange={handleChange}
+	/>;
+};
+
+export default memo(RoomsInput);
diff --git a/client/views/teams/modals/AddExistingModal/index.ts b/client/views/teams/modals/AddExistingModal/index.ts
new file mode 100644
index 0000000000000..3e17de58e8aef
--- /dev/null
+++ b/client/views/teams/modals/AddExistingModal/index.ts
@@ -0,0 +1 @@
+export { default } from './AddExistingModal';
diff --git a/client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx b/client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx
new file mode 100644
index 0000000000000..15f6d1cb92be2
--- /dev/null
+++ b/client/views/teams/modals/ConfirmationModal/ConfirmationModal.tsx
@@ -0,0 +1,38 @@
+import React, { memo, FC } from 'react';
+import { Box, ButtonGroup, Button, Icon, Modal } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../../../contexts/TranslationContext';
+
+type ConfirmationModalProps = {
+	onClose: () => void;
+	onConfirmAction: any;
+	labelButton: string;
+	content: string;
+}
+
+const ConfirmationModal: FC<ConfirmationModalProps> = ({ onClose, onConfirmAction, labelButton, content }) => {
+	const t = useTranslation();
+
+	const handleConfirm = (): void => {
+		onConfirmAction();
+		onClose();
+	};
+
+	return <Modal>
+		<Modal.Header>
+			<Modal.Title display='flex'><Box mie='x12' ><Icon size='x20' name='modal-warning' color='warning-700'/></Box>{t('Confirmation')}</Modal.Title>
+			<Modal.Close onClick={onClose}/>
+		</Modal.Header>
+		<Modal.Content>
+			{content}
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button onClick={onClose}>{t('Cancel')}</Button>
+				<Button onClick={handleConfirm} primary danger>{labelButton}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default memo(ConfirmationModal);
diff --git a/client/views/teams/modals/ConfirmationModal/index.ts b/client/views/teams/modals/ConfirmationModal/index.ts
new file mode 100644
index 0000000000000..70dcc831cc1a7
--- /dev/null
+++ b/client/views/teams/modals/ConfirmationModal/index.ts
@@ -0,0 +1 @@
+export { default } from './ConfirmationModal';
diff --git a/definition/IRoom.ts b/definition/IRoom.ts
index 50d91a3eb2174..e0dfee5b605a1 100644
--- a/definition/IRoom.ts
+++ b/definition/IRoom.ts
@@ -11,6 +11,7 @@ export interface IRoom extends IRocketChatRecord {
 	_id: RoomID;
 	t: RoomType;
 	name: string;
+	fname: string;
 	msgs: number;
 	default?: true;
 	broadcast?: true;
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
index 661ea8386cc88..04b67e5ed7cc2 100644
--- a/packages/rocketchat-i18n/i18n/en.i18n.json
+++ b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -3725,7 +3725,15 @@
   "Target user not allowed to receive messages": "Target user not allowed to receive messages",
   "TargetRoom": "Target Room",
   "TargetRoom_Description": "The room where messages will be sent which are a result of this event being fired. Only one target room is allowed and it must exist.",
+  "Team_Add_existing_channels": "Add Existing Channels",
+  "Team_Add_existing": "Add Existing",
+  "Team_Auto-join": "Auto-join",
+  "Team_Channels": "Team Channels",
+  "Team_Delete_Channel_modal_content_danger": "This can’t be undone.",
+  "Team_Delete_Channel_modal_content": "Would you like to delete this Channel?",
   "Team_Info": "Team Info",
+  "Team_Remove_from_team_modal_content": "Would you like to remove this Channel from __teamName__? The Channel will be moved back to the workspace.",
+  "Team_Remove_from_team": "Remove from team",
   "Team_what_is_this_team_about": "What is this team about",
   "Team": "Team",
   "Teams_about_the_channels": "And about the Channels?",