diff --git a/apps/meteor/client/views/omnichannel/modals/CloseChatModal.tsx b/apps/meteor/client/views/omnichannel/modals/CloseChatModal.tsx
index 8d88307497bea..b25474b36bec2 100644
--- a/apps/meteor/client/views/omnichannel/modals/CloseChatModal.tsx
+++ b/apps/meteor/client/views/omnichannel/modals/CloseChatModal.tsx
@@ -4,7 +4,6 @@ import {
 	FieldGroup,
 	Button,
 	TextInput,
-	Modal,
 	Box,
 	CheckBox,
 	Divider,
@@ -12,13 +11,6 @@ import {
 	FieldLabel,
 	FieldRow,
 	FieldError,
-	ModalHeader,
-	ModalIcon,
-	ModalTitle,
-	ModalClose,
-	ModalFooter,
-	ModalFooterControllers,
-	ModalContent,
 } from '@rocket.chat/fuselage';
 import { GenericModal } from '@rocket.chat/ui-client';
 import { usePermission, useSetting, useUserPreference, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
@@ -88,31 +80,58 @@ const CloseChatModal = ({ department, visitorEmail, onCancel, onConfirm }: Close
 	};
 
 	const onSubmit = useCallback(
-		({ comment, tags, transcriptPDF, transcriptEmail, subject }: CloseChatModalFormData) => {
-			const preferences = {
-				omnichannelTranscriptPDF: !!transcriptPDF,
-				omnichannelTranscriptEmail: alwaysSendTranscript ? true : !!transcriptEmail,
-			};
-			const requestData = transcriptEmail && visitorEmail ? { email: visitorEmail, subject } : undefined;
-
-			if (!comment?.trim() && commentRequired) {
-				setError('comment', { type: 'custom', message: t('Required_field', { field: t('Comment') }) });
-			}
-
-			if (transcriptEmail && !subject) {
-				setError('subject', { type: 'custom', message: t('Required_field', { field: t('Subject') }) });
-			}
-
-			if (!tags?.length && tagRequired) {
-				setError('tags', { type: 'custom', message: t('error-tags-must-be-assigned-before-closing-chat') });
-			}
-
-			if (!errors.comment || errors.tags) {
-				onConfirm(comment, tags, preferences, requestData);
-			}
-		},
-		[commentRequired, tagRequired, visitorEmail, errors, setError, t, onConfirm, alwaysSendTranscript],
-	);
+	({ comment, tags, transcriptPDF, transcriptEmail, subject }: CloseChatModalFormData) => {
+		const preferences = {
+			omnichannelTranscriptPDF: !!transcriptPDF,
+			omnichannelTranscriptEmail: alwaysSendTranscript ? true : !!transcriptEmail,
+		};
+
+		const requestData =
+			transcriptEmail && visitorEmail ? { email: visitorEmail, subject } : undefined;
+
+		let hasError = false;
+
+		if (!comment?.trim() && commentRequired) {
+			setError('comment', {
+				type: 'custom',
+				message: t('Required_field', { field: t('Comment') }),
+			});
+			hasError = true;
+		}
+
+		if (transcriptEmail && !subject) {
+			setError('subject', {
+				type: 'custom',
+				message: t('Required_field', { field: t('Subject') }),
+			});
+			hasError = true;
+		}
+
+		if (!tags?.length && tagRequired) {
+			setError('tags', {
+				type: 'custom',
+				message: t('error-tags-must-be-assigned-before-closing-chat'),
+			});
+			hasError = true;
+		}
+
+		if (hasError) {
+			return;
+		}
+
+		onConfirm(comment, tags, preferences, requestData);
+	},
+	[
+		commentRequired,
+		tagRequired,
+		visitorEmail,
+		setError,
+		t,
+		onConfirm,
+		alwaysSendTranscript,
+	],
+);
+
 
 	const cannotSubmit = useMemo(() => {
 		const cannotSendTag = (tagRequired && !tags?.length) || errors.tags;
@@ -141,112 +160,110 @@ const CloseChatModal = ({ department, visitorEmail, onCancel, onConfirm }: Close
 	}, [register, tagRequired]);
 
 	useEffect(() => {
-		if (transcriptEmail) {
-			if (!visitorEmail) {
-				dispatchToastMessage({ type: 'error', message: t('Customer_without_registered_email') });
-				return;
-			}
-			setValue('subject', subject || customSubject || t('Transcript_of_your_livechat_conversation'));
-		}
-	}, [transcriptEmail, setValue, visitorEmail, subject, t, customSubject, dispatchToastMessage]);
+	if (!transcriptEmail) {
+		return;
+	}
+
+	if (!visitorEmail) {
+		dispatchToastMessage({ type: 'error', message: t('Customer_without_registered_email') });
+		return;
+	}
+
+	setValue(
+		'subject',
+		customSubject || t('Transcript_of_your_livechat_conversation'),
+		{ shouldDirty: false },
+	);
+}, [transcriptEmail, setValue, visitorEmail, t, customSubject, dispatchToastMessage]);
+
 
 	if (commentRequired || tagRequired || canSendTranscript) {
 		return (
-			// TODO: Replace Modal with GenericModal
-			<Modal
-				aria-label={t('Wrap_up_conversation')}
+			<GenericModal
+				title={t('Wrap_up_conversation')}
+				icon='baloon-close-top-right'
+				onCancel={onCancel}
+				onClose={onCancel}
+				confirmText={t('Confirm')}
+				cancelText={t('Cancel')}
+				confirmDisabled={cannotSubmit}
 				wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(onSubmit)} {...props} />}
 			>
-				<ModalHeader>
-					<ModalIcon name='baloon-close-top-right' />
-					<ModalTitle>{t('Wrap_up_conversation')}</ModalTitle>
-					<ModalClose onClick={onCancel} />
-				</ModalHeader>
-				<ModalContent fontScale='p2'>
-					<Box color='annotation'>{t('Close_room_description')}</Box>
-					<FieldGroup>
-						<Field>
-							<FieldLabel required={commentRequired}>{t('Comment')}</FieldLabel>
-							<FieldRow>
-								<TextInput
-									{...register('comment')}
-									error={errors.comment && t('Required_field', { field: t('Comment') })}
-									flexGrow={1}
-									placeholder={t('Please_add_a_comment')}
-								/>
-							</FieldRow>
-							<FieldError>{errors.comment?.message}</FieldError>
-						</Field>
-						<Field>
-							<Tags tagRequired={tagRequired} tags={tags} handler={handleTags} {...(department && { department: department._id })} />
-							<FieldError>{errors.tags?.message}</FieldError>
-						</Field>
-						{canSendTranscript && (
-							<>
-								<Field>
-									<Divider />
-									<FieldLabel marginBlockStart={8}>{t('Chat_transcript')}</FieldLabel>
+				<Box color='annotation'>{t('Close_room_description')}</Box>
+
+				<FieldGroup>
+					<Field>
+						<FieldLabel required={commentRequired}>{t('Comment')}</FieldLabel>
+						<FieldRow>
+							<TextInput
+								{...register('comment')}
+								error={errors.comment && t('Required_field', { field: t('Comment') })}
+								flexGrow={1}
+								placeholder={t('Please_add_a_comment')}
+							/>
+						</FieldRow>
+						<FieldError>{errors.comment?.message}</FieldError>
+					</Field>
+
+					<Field>
+						<Tags tagRequired={tagRequired} tags={tags} handler={handleTags} {...(department && { department: department._id })} />
+						<FieldError>{errors.tags?.message}</FieldError>
+					</Field>
+
+					
+					{canSendTranscript && (
+						<>
+							<Field>
+								<Divider />
+								<FieldLabel marginBlockStart={8}>{t('Chat_transcript')}</FieldLabel>
+							</Field>
+
+							{canSendTranscriptPDF && (
+								<Field marginBlockStart={10}>
+									<FieldRow>
+										<FieldLabel>{t('Omnichannel_transcript_pdf')}</FieldLabel>
+										<CheckBox {...register('transcriptPDF', { value: userTranscriptPDF })} />
+									</FieldRow>
 								</Field>
-								{canSendTranscriptPDF && (
+							)}
+
+							{canSendTranscriptEmail && (
+								<>
 									<Field marginBlockStart={10}>
 										<FieldRow>
-											<FieldLabel htmlFor='transcript-pdf'>{t('Omnichannel_transcript_pdf')}</FieldLabel>
-											<CheckBox id='transcript-pdf' {...register('transcriptPDF', { value: userTranscriptPDF })} />
+											<FieldLabel>{t('Omnichannel_transcript_email')}</FieldLabel>
+											<CheckBox {...register('transcriptEmail', { value: userTranscriptEmail })} />
 										</FieldRow>
 									</Field>
-								)}
-								{canSendTranscriptEmail && (
-									<>
-										<Field marginBlockStart={10}>
-											<FieldRow>
-												<FieldLabel htmlFor='transcript-email'>{t('Omnichannel_transcript_email')}</FieldLabel>
-												<CheckBox id='transcript-email' {...register('transcriptEmail', { value: userTranscriptEmail })} />
-											</FieldRow>
-										</Field>
-										{transcriptEmail && (
-											<>
-												<Field marginBlockStart={14}>
-													<FieldLabel required>{t('Contact_email')}</FieldLabel>
-													<FieldRow>
-														<EmailInput value={visitorEmail} required disabled flexGrow={1} />
-													</FieldRow>
-												</Field>
-												<Field marginBlockStart={12}>
-													<FieldLabel required>{t('Subject')}</FieldLabel>
-													<FieldRow>
-														<TextInput
-															{...register('subject', { required: true })}
-															className='active'
-															error={errors.subject && t('Required_field', { field: t('Subject') })}
-															flexGrow={1}
-														/>
-													</FieldRow>
-													<FieldError>{errors.subject?.message}</FieldError>
-												</Field>
-											</>
-										)}
-									</>
-								)}
-								<Field marginBlockStart={16}>
-									<FieldLabel color='annotation' fontScale='c1'>
-										{canSendTranscriptPDF && canSendTranscriptEmail
-											? t('These_options_affect_this_conversation_only_To_set_default_selections_go_to_My_Account_Omnichannel')
-											: t('This_option_affect_this_conversation_only_To_set_default_selection_go_to_My_Account_Omnichannel')}
-									</FieldLabel>
-								</Field>
-							</>
-						)}
-					</FieldGroup>
-				</ModalContent>
-				<ModalFooter>
-					<ModalFooterControllers>
-						<Button onClick={onCancel}>{t('Cancel')}</Button>
-						<Button type='submit' disabled={cannotSubmit} primary>
-							{t('Confirm')}
-						</Button>
-					</ModalFooterControllers>
-				</ModalFooter>
-			</Modal>
+
+									{transcriptEmail && (
+										<>
+											<Field marginBlockStart={14}>
+												<FieldLabel required>{t('Contact_email')}</FieldLabel>
+												<FieldRow>
+													<EmailInput value={visitorEmail} required disabled flexGrow={1} />
+												</FieldRow>
+											</Field>
+
+											<Field marginBlockStart={12}>
+												<FieldLabel required>{t('Subject')}</FieldLabel>
+												<FieldRow>
+													<TextInput
+														{...register('subject', { required: true })}
+														error={errors.subject && t('Required_field', { field: t('Subject') })}
+														flexGrow={1}
+													/>
+												</FieldRow>
+												<FieldError>{errors.subject?.message}</FieldError>
+											</Field>
+										</>
+									)}
+								</>
+							)}
+						</>
+					)}
+				</FieldGroup>
+			</GenericModal>
 		);
 	}
 
diff --git a/apps/meteor/client/views/omnichannel/modals/EnterpriseDepartmentsModal.tsx b/apps/meteor/client/views/omnichannel/modals/EnterpriseDepartmentsModal.tsx
index 1561619827da6..fcd6999b20199 100644
--- a/apps/meteor/client/views/omnichannel/modals/EnterpriseDepartmentsModal.tsx
+++ b/apps/meteor/client/views/omnichannel/modals/EnterpriseDepartmentsModal.tsx
@@ -1,73 +1,49 @@
-import {
-	Button,
-	Modal,
-	Box,
-	ModalHeader,
-	ModalHeaderText,
-	ModalTagline,
-	ModalTitle,
-	ModalClose,
-	ModalContent,
-	ModalHeroImage,
-	ModalFooter,
-	ModalFooterControllers,
-} from '@rocket.chat/fuselage';
-import { useOutsideClick } from '@rocket.chat/fuselage-hooks';
+import { Button, Box } from '@rocket.chat/fuselage';
 import { useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import GenericModal from '../../../components/GenericModal';
 import { useExternalLink } from '../../../hooks/useExternalLink';
 import { useCheckoutUrl } from '../../admin/subscription/hooks/useCheckoutUrl';
 
-// TODO: use `GenericModal` instead of creating a new modal from scratch
-// This seems a upSell modal for enterprise feature
 const EnterpriseDepartmentsModal = ({ closeModal }: { closeModal: () => void }): ReactElement => {
 	const { t } = useTranslation();
 	const router = useRouter();
-	const ref = useRef<HTMLDivElement>(null);
 
 	const openExternalLink = useExternalLink();
-	const manageSubscriptionUrl = useCheckoutUrl()({ target: 'new-departments-page', action: 'upgrade' });
-
-	const goToManageSubscriptionPage = (): void => {
-		openExternalLink(manageSubscriptionUrl);
-		closeModal();
-	};
+	const manageSubscriptionUrl = useCheckoutUrl()({
+		target: 'new-departments-page',
+		action: 'upgrade',
+	});
 
 	const onClose = (): void => {
 		router.navigate('/omnichannel/departments');
 		closeModal();
 	};
 
-	useOutsideClick([ref], onClose);
+	const onUpgrade = (): void => {
+		openExternalLink(manageSubscriptionUrl);
+		closeModal();
+	};
 
 	return (
-		<Modal aria-label={t('Departments')} ref={ref}>
-			<ModalHeader>
-				<ModalHeaderText>
-					<ModalTagline>{t('Premium_capability')}</ModalTagline>
-					<ModalTitle>{t('Departments')}</ModalTitle>
-				</ModalHeaderText>
-				<ModalClose onClick={onClose} />
-			</ModalHeader>
-			<ModalContent fontScale='p2'>
-				<ModalHeroImage src='/images/departments.svg' />
-				<Box fontScale='h3' mbe={28}>
-					{t('Premium_Departments_title')}
-				</Box>
-				{t('Premium_Departments_description_upgrade')}
-			</ModalContent>
-			<ModalFooter>
-				<ModalFooterControllers>
-					<Button onClick={onClose}>{t('Cancel')}</Button>
-					<Button onClick={goToManageSubscriptionPage} primary>
-						{t('Upgrade')}
-					</Button>
-				</ModalFooterControllers>
-			</ModalFooter>
-		</Modal>
+		<GenericModal
+			variant='info'
+			icon='department'
+			title={t('Departments')}
+			subtitle={t('Premium_capability')}
+			onClose={onClose}
+			confirmText={t('Upgrade')}
+			cancelText={t('Cancel')}
+			onConfirm={onUpgrade}
+			onCancel={onClose}
+		>
+			<Box mbe={28} fontScale='h3'>
+				{t('Premium_Departments_title')}
+			</Box>
+			{t('Premium_Departments_description_upgrade')}
+		</GenericModal>
 	);
 };
 
diff --git a/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx b/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
index 3bc17602ce755..c34492beb32b1 100644
--- a/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
+++ b/apps/meteor/client/views/omnichannel/modals/ForwardChatModal.tsx
@@ -4,19 +4,12 @@ import {
 	FieldGroup,
 	Button,
 	TextAreaInput,
-	Modal,
 	Box,
 	Divider,
 	FieldLabel,
 	FieldRow,
-	ModalHeader,
-	ModalIcon,
-	ModalTitle,
-	ModalClose,
-	ModalContent,
-	ModalFooter,
-	ModalFooterControllers,
 } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
 import { useEndpoint, useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { useCallback, useEffect, useId } from 'react';
@@ -38,7 +31,7 @@ type ForwardChatModalProps = {
 	room: IOmnichannelRoom;
 };
 
-const ForwardChatModal = ({ onForward, onCancel, room, ...props }: ForwardChatModalProps): ReactElement => {
+const ForwardChatModal = ({ onForward, onCancel, room }: ForwardChatModalProps): ReactElement => {
 	const { t } = useTranslation();
 	const getUserData = useEndpoint('GET', '/v1/users.info');
 	const idleAgentsAllowedForForwarding = useSetting('Livechat_enabled_when_agent_idle', true);
@@ -83,74 +76,66 @@ const ForwardChatModal = ({ onForward, onCancel, room, ...props }: ForwardChatMo
 	}, [register]);
 
 	return (
-		<Modal
-			aria-label={t('Forward_chat')}
-			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(onSubmit)} {...props} />}
-			{...props}
+		<GenericModal
+			title={t('Forward_chat')}
+			onCancel={onCancel}
+			onClose={onCancel}
+			confirmText={t('Forward')}
+			confirmDisabled={!username && !department}
+			onConfirm={handleSubmit(onSubmit)}
+			loading={isSubmitting}
 		>
-			<ModalHeader>
-				<ModalIcon name='baloon-arrow-top-right' />
-				<ModalTitle>{t('Forward_chat')}</ModalTitle>
-				<ModalClose onClick={onCancel} />
-			</ModalHeader>
-			<ModalContent fontScale='p2'>
-				<FieldGroup>
-					<Field>
-						<FieldLabel htmlFor={departmentFieldId}>{t('Forward_to_department')}</FieldLabel>
-						<FieldRow>
-							<AutoCompleteDepartment
-								id={departmentFieldId}
-								aria-label={t('Forward_to_department')}
-								withTitle={false}
-								maxWidth='100%'
-								flexGrow={1}
-								onChange={(value: string): void => {
-									setValue('department', value);
-								}}
-							/>
-						</FieldRow>
-					</Field>
-					<Divider p={0}>{t('or')}</Divider>
-					<Field>
-						<FieldLabel htmlFor={userFieldId}>{t('Forward_to_user')}</FieldLabel>
-						<FieldRow>
-							<AutoCompleteAgent
-								id={userFieldId}
-								aria-label={t('Forward_to_user')}
-								withTitle
-								onlyAvailable
-								value={getValues().username}
-								excludeId={room.servedBy?._id}
-								showIdleAgents={idleAgentsAllowedForForwarding}
-								placeholder={t('Username_name_email')}
-								onChange={(value) => {
-									setValue('username', value);
-								}}
-							/>
-						</FieldRow>
-					</Field>
-					<Field marginBlock={15}>
-						<FieldLabel>
-							{t('Leave_a_comment')}{' '}
-							<Box is='span' color='annotation'>
-								({t('Optional')})
-							</Box>
-						</FieldLabel>
-						<FieldRow>
-							<TextAreaInput {...register('comment')} rows={8} flexGrow={1} />
-						</FieldRow>
-					</Field>
-				</FieldGroup>
-			</ModalContent>
-			<ModalFooter>
-				<ModalFooterControllers>
-					<Button onClick={onCancel}>{t('Cancel')}</Button>
-					<Button type='submit' disabled={!username && !department} primary loading={isSubmitting}>
-						{t('Forward')}
-					</Button>
-				</ModalFooterControllers>
-			</ModalFooter>
-		</Modal>
+			<FieldGroup>
+				<Field>
+					<FieldLabel htmlFor={departmentFieldId}>{t('Forward_to_department')}</FieldLabel>
+					<FieldRow>
+						<AutoCompleteDepartment
+							id={departmentFieldId}
+							aria-label={t('Forward_to_department')}
+							withTitle={false}
+							maxWidth='100%'
+							flexGrow={1}
+							onChange={(value: string): void => {
+								setValue('department', value);
+							}}
+						/>
+					</FieldRow>
+				</Field>
+
+				<Divider p={0}>{t('or')}</Divider>
+
+				<Field>
+					<FieldLabel htmlFor={userFieldId}>{t('Forward_to_user')}</FieldLabel>
+					<FieldRow>
+						<AutoCompleteAgent
+							id={userFieldId}
+							aria-label={t('Forward_to_user')}
+							withTitle
+							onlyAvailable
+							value={getValues().username}
+							excludeId={room.servedBy?._id}
+							showIdleAgents={idleAgentsAllowedForForwarding}
+							placeholder={t('Username_name_email')}
+							onChange={(value) => {
+								setValue('username', value);
+							}}
+						/>
+					</FieldRow>
+				</Field>
+
+				<Field marginBlock={15}>
+					<FieldLabel>
+						{t('Leave_a_comment')}{' '}
+						<Box is='span' color='annotation'>
+							({t('Optional')})
+						</Box>
+					</FieldLabel>
+					<FieldRow>
+						<TextAreaInput {...register('comment')} rows={8} flexGrow={1} />
+					</FieldRow>
+				</Field>
+			</FieldGroup>
+		</GenericModal>
 	);
 };
 
diff --git a/apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.tsx b/apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.tsx
index 09c912dec0d48..6984a8002e385 100644
--- a/apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.tsx
+++ b/apps/meteor/client/views/omnichannel/modals/ReturnChatQueueModal.tsx
@@ -1,14 +1,4 @@
-import {
-	Button,
-	Modal,
-	ModalClose,
-	ModalContent,
-	ModalFooter,
-	ModalFooterControllers,
-	ModalHeader,
-	ModalIcon,
-	ModalTitle,
-} from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
 import { useTranslation } from 'react-i18next';
 
 type ReturnChatQueueModalProps = {
@@ -16,27 +6,21 @@ type ReturnChatQueueModalProps = {
 	onCancel: () => void;
 };
 
-// TODO: use `GenericModal` instead of creating a new modal from scratch
-const ReturnChatQueueModal = ({ onCancel, onMoveChat, ...props }: ReturnChatQueueModalProps) => {
+const ReturnChatQueueModal = ({ onCancel, onMoveChat }: ReturnChatQueueModalProps) => {
 	const { t } = useTranslation();
 
 	return (
-		<Modal aria-label={t('Return_to_the_queue')} {...props}>
-			<ModalHeader>
-				<ModalIcon name='burger-arrow-left' />
-				<ModalTitle>{t('Return_to_the_queue')}</ModalTitle>
-				<ModalClose onClick={onCancel} />
-			</ModalHeader>
-			<ModalContent fontScale='p2'>{t('Would_you_like_to_return_the_queue')}</ModalContent>
-			<ModalFooter>
-				<ModalFooterControllers>
-					<Button onClick={onCancel}>{t('Cancel')}</Button>
-					<Button primary onClick={onMoveChat}>
-						{t('Confirm')}
-					</Button>
-				</ModalFooterControllers>
-			</ModalFooter>
-		</Modal>
+		<GenericModal
+			variant='warning'
+			icon='burger-arrow-left'
+			title={t('Return_to_the_queue')}
+			confirmText={t('Confirm')}
+			cancelText={t('Cancel')}
+			onConfirm={onMoveChat}
+			onCancel={onCancel}
+		>
+			{t('Would_you_like_to_return_the_queue')}
+		</GenericModal>
 	);
 };