diff --git a/apps/meteor/CHANGELOG.md b/apps/meteor/CHANGELOG.md
index 182d30ddabb9..51ff6d4d1826 100644
--- a/apps/meteor/CHANGELOG.md
+++ b/apps/meteor/CHANGELOG.md
@@ -1,5 +1,34 @@
 # @rocket.chat/meteor
 
+## 6.3.4
+
+### Patch Changes
+
+- db919f9b23: Bump @rocket.chat/meteor version.
+- Bump @rocket.chat/meteor version.
+- ebeb088441: fix: Prevent `RoomProvider.useEffect` from subscribing to room-data stream multiple times
+- 8a7d5d3898: fix: agent role being removed upon user deactivation
+- 759fe2472a: chore: Increase cache time from 5s to 10s on `getUnits` helpers. This should reduce the number of DB calls made by this method to fetch the unit limitations for a user.
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+  - @rocket.chat/omnichannel-services@0.0.10
+  - @rocket.chat/models@0.0.10
+  - @rocket.chat/presence@0.0.10
+  - @rocket.chat/core-services@0.1.4
+  - @rocket.chat/cron@0.0.6
+  - @rocket.chat/instance-status@0.0.10
+  - @rocket.chat/core-typings@6.3.4
+  - @rocket.chat/rest-typings@6.3.4
+  - @rocket.chat/api-client@0.1.4
+  - @rocket.chat/pdf-worker@0.0.10
+  - @rocket.chat/gazzodown@1.0.4
+  - @rocket.chat/ui-contexts@1.0.4
+  - @rocket.chat/fuselage-ui-kit@1.0.4
+  - @rocket.chat/ui-theming@0.0.1
+  - @rocket.chat/ui-client@1.0.4
+  - @rocket.chat/ui-video-conf@1.0.4
+  - @rocket.chat/web-ui-registration@1.0.4
+
 ## 6.3.3
 
 ### Patch Changes
diff --git a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
index cb65ce80317e..1a326db4544d 100644
--- a/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
+++ b/apps/meteor/client/views/account/profile/AccountProfileForm.tsx
@@ -22,7 +22,6 @@ import UserAvatarEditor from '../../../components/avatar/UserAvatarEditor';
 import { useUpdateAvatar } from '../../../hooks/useUpdateAvatar';
 import { USER_STATUS_TEXT_MAX_LENGTH, BIO_TEXT_MAX_LENGTH } from '../../../lib/constants';
 import type { AccountProfileFormValues } from './getProfileInitialValues';
-import { getProfileInitialValues } from './getProfileInitialValues';
 import { useAccountProfileSettings } from './useAccountProfileSettings';
 
 const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactElement => {
@@ -46,10 +45,8 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 	} = useAccountProfileSettings();
 
 	const {
-		register,
 		control,
 		watch,
-		reset,
 		handleSubmit,
 		formState: { errors },
 	} = useFormContext<AccountProfileFormValues>();
@@ -97,10 +94,10 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 		try {
 			await updateOwnBasicInfo(
 				{
-					...(allowRealNameChange ? { realname: name } : {}),
-					...(allowEmailChange && user ? getUserEmailAddress(user) !== email && { email } : {}),
-					...(canChangeUsername ? { username } : {}),
-					...(allowUserStatusMessageChange ? { statusText } : {}),
+					realname: name,
+					...(user ? getUserEmailAddress(user) !== email && { email } : {}),
+					username,
+					statusText,
 					statusType,
 					nickname,
 					bio,
@@ -110,7 +107,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 
 			await updateAvatar();
 			dispatchToastMessage({ type: 'success', message: t('Profile_saved_successfully') });
-			reset(getProfileInitialValues(user));
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}
@@ -147,16 +143,21 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 							{t('Name')}
 						</Field.Label>
 						<Field.Row>
-							<TextInput
-								{...register('name', {
-									validate: (name) => (requireName && name === '' ? t('error-the-field-is-required', { field: t('Name') }) : true),
-								})}
-								id={nameId}
-								error={errors.name?.message}
-								disabled={!allowRealNameChange}
-								aria-required='true'
-								aria-invalid={errors.username ? 'true' : 'false'}
-								aria-describedby={`${nameId}-error ${nameId}-hint`}
+							<Controller
+								control={control}
+								name='name'
+								rules={{ validate: (name) => (requireName && name === '' ? t('error-the-field-is-required', { field: t('Name') }) : true) }}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										id={nameId}
+										error={errors.name?.message}
+										disabled={!allowRealNameChange}
+										aria-required='true'
+										aria-invalid={errors.username ? 'true' : 'false'}
+										aria-describedby={`${nameId}-error ${nameId}-hint`}
+									/>
+								)}
 							/>
 						</Field.Row>
 						{errors.name && (
@@ -171,17 +172,25 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 							{t('Username')}
 						</Field.Label>
 						<Field.Row>
-							<TextInput
-								{...register('username', {
+							<Controller
+								control={control}
+								name='username'
+								rules={{
 									required: t('error-the-field-is-required', { field: t('Username') }),
 									validate: (username) => validateUsername(username),
-								})}
-								id={usernameId}
-								error={errors.username?.message}
-								addon={<Icon name='at' size='x20' />}
-								aria-required='true'
-								aria-invalid={errors.username ? 'true' : 'false'}
-								aria-describedby={`${usernameId}-error ${usernameId}-hint`}
+								}}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										id={usernameId}
+										disabled={!canChangeUsername}
+										error={errors.username?.message}
+										addon={<Icon name='at' size='x20' />}
+										aria-required='true'
+										aria-invalid={errors.username ? 'true' : 'false'}
+										aria-describedby={`${usernameId}-error ${usernameId}-hint`}
+									/>
+								)}
 							/>
 						</Field.Row>
 						{errors?.username && (
@@ -195,26 +204,31 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 				<Field>
 					<Field.Label htmlFor={statusTextId}>{t('StatusMessage')}</Field.Label>
 					<Field.Row>
-						<TextInput
-							id={statusTextId}
-							{...register('statusText', {
-								maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH) },
-							})}
-							error={errors?.statusText?.message}
-							disabled={!allowUserStatusMessageChange}
-							flexGrow={1}
-							placeholder={t('StatusMessage_Placeholder')}
-							aria-invalid={errors.statusText ? 'true' : 'false'}
-							aria-describedby={`${statusTextId}-error ${statusTextId}-hint`}
-							addon={
-								<Controller
-									control={control}
-									name='statusType'
-									render={({ field: { value, onChange } }) => (
-										<UserStatusMenu margin='neg-x2' onChange={onChange} initialStatus={value as IUser['status']} />
-									)}
+						<Controller
+							control={control}
+							name='statusText'
+							rules={{ maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH) } }}
+							render={({ field }) => (
+								<TextInput
+									{...field}
+									id={statusTextId}
+									error={errors?.statusText?.message}
+									disabled={!allowUserStatusMessageChange}
+									flexGrow={1}
+									placeholder={t('StatusMessage_Placeholder')}
+									aria-invalid={errors.statusText ? 'true' : 'false'}
+									aria-describedby={`${statusTextId}-error ${statusTextId}-hint`}
+									addon={
+										<Controller
+											control={control}
+											name='statusType'
+											render={({ field: { value, onChange } }) => (
+												<UserStatusMenu margin='neg-x2' onChange={onChange} initialStatus={value as IUser['status']} />
+											)}
+										/>
+									}
 								/>
-							}
+							)}
 						/>
 					</Field.Row>
 					{errors?.statusText && (
@@ -227,21 +241,34 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 				<Field>
 					<Field.Label htmlFor={nicknameId}>{t('Nickname')}</Field.Label>
 					<Field.Row>
-						<TextInput id={nicknameId} {...register('nickname')} flexGrow={1} addon={<Icon name='edit' size='x20' alignSelf='center' />} />
+						<Controller
+							control={control}
+							name='nickname'
+							render={({ field }) => (
+								<TextInput {...field} id={nicknameId} flexGrow={1} addon={<Icon name='edit' size='x20' alignSelf='center' />} />
+							)}
+						/>
 					</Field.Row>
 				</Field>
 				<Field>
 					<Field.Label htmlFor={bioId}>{t('Bio')}</Field.Label>
 					<Field.Row>
-						<TextAreaInput
-							id={bioId}
-							{...register('bio', { maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) } })}
-							error={errors.bio?.message}
-							rows={3}
-							flexGrow={1}
-							addon={<Icon name='edit' size='x20' alignSelf='center' />}
-							aria-invalid={errors.statusText ? 'true' : 'false'}
-							aria-describedby={`${bioId}-error`}
+						<Controller
+							control={control}
+							name='bio'
+							rules={{ maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) } }}
+							render={({ field }) => (
+								<TextAreaInput
+									{...field}
+									id={bioId}
+									error={errors.bio?.message}
+									rows={3}
+									flexGrow={1}
+									addon={<Icon name='edit' size='x20' alignSelf='center' />}
+									aria-invalid={errors.statusText ? 'true' : 'false'}
+									aria-describedby={`${bioId}-error`}
+								/>
+							)}
 						/>
 					</Field.Row>
 					{errors?.bio && (
@@ -255,18 +282,23 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
 						{t('Email')}
 					</Field.Label>
 					<Field.Row display='flex' flexDirection='row' justifyContent='space-between'>
-						<TextInput
-							id={emailId}
-							{...register('email', {
-								validate: { validateEmail: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')) },
-							})}
-							flexGrow={1}
-							error={errors.email?.message}
-							addon={<Icon name={isUserVerified ? 'circle-check' : 'mail'} size='x20' />}
-							disabled={!allowEmailChange}
-							aria-required='true'
-							aria-invalid={errors.email ? 'true' : 'false'}
-							aria-describedby={`${emailId}-error ${emailId}-hint`}
+						<Controller
+							control={control}
+							name='email'
+							rules={{ validate: { validateEmail: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')) } }}
+							render={({ field }) => (
+								<TextInput
+									{...field}
+									id={emailId}
+									flexGrow={1}
+									error={errors.email?.message}
+									addon={<Icon name={isUserVerified ? 'circle-check' : 'mail'} size='x20' />}
+									disabled={!allowEmailChange}
+									aria-required='true'
+									aria-invalid={errors.email ? 'true' : 'false'}
+									aria-describedby={`${emailId}-error ${emailId}-hint`}
+								/>
+							)}
 						/>
 						{!isUserVerified && (
 							<Button disabled={email !== previousEmail} onClick={handleSendConfirmationEmail} mis={24}>
diff --git a/apps/meteor/client/views/admin/cloud/components/RegisterWorkspaceCards.tsx b/apps/meteor/client/views/admin/cloud/components/RegisterWorkspaceCards.tsx
index 80198f6c4b4f..c3cd878ad081 100644
--- a/apps/meteor/client/views/admin/cloud/components/RegisterWorkspaceCards.tsx
+++ b/apps/meteor/client/views/admin/cloud/components/RegisterWorkspaceCards.tsx
@@ -1,5 +1,5 @@
 import { Grid } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardTitle } from '@rocket.chat/ui-client';
 import React from 'react';
 
 import useFeatureBullets from '../hooks/useFeatureBullets';
@@ -12,8 +12,8 @@ const RegisterWorkspaceCards = () => {
 			{bulletFeatures.map((card) => (
 				<Grid.Item key={card.key} xs={4} sm={4} md={4} lg={4} xl={3}>
 					<Card>
-						<Card.Title>{card.title}</Card.Title>
-						<Card.Body height='x88'>{card.description}</Card.Body>
+						<CardTitle>{card.title}</CardTitle>
+						<CardBody height='x88'>{card.description}</CardBody>
 					</Card>
 				</Grid.Item>
 			))}
diff --git a/apps/meteor/client/views/admin/info/DeploymentCard.tsx b/apps/meteor/client/views/admin/info/DeploymentCard.tsx
index 1bf5accb489f..f1f3dde6aec0 100644
--- a/apps/meteor/client/views/admin/info/DeploymentCard.tsx
+++ b/apps/meteor/client/views/admin/info/DeploymentCard.tsx
@@ -2,7 +2,7 @@ import type { IServerInfo, IStats, Serialized } from '@rocket.chat/core-typings'
 import { ButtonGroup, Button } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import type { IInstance } from '@rocket.chat/rest-typings';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardCol, CardTitle, CardColSection, CardColTitle, CardFooter } from '@rocket.chat/ui-client';
 import { useSetModal, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { memo } from 'react';
@@ -31,57 +31,57 @@ const DeploymentCard = ({ info, statistics, instances }: DeploymentCardProps): R
 
 	return (
 		<Card data-qa-id='deployment-card'>
-			<Card.Title>{t('Deployment')}</Card.Title>
-			<Card.Body>
-				<Card.Col>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('Version')}</Card.Col.Title>
+			<CardTitle>{t('Deployment')}</CardTitle>
+			<CardBody>
+				<CardCol>
+					<CardColSection>
+						<CardColTitle>{t('Version')}</CardColTitle>
 						{statistics.version}
-					</Card.Col.Section>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('Deployment_ID')}</Card.Col.Title>
+					</CardColSection>
+					<CardColSection>
+						<CardColTitle>{t('Deployment_ID')}</CardColTitle>
 						{statistics.uniqueId}
-					</Card.Col.Section>
+					</CardColSection>
 					{appsEngineVersion && (
-						<Card.Col.Section>
-							<Card.Col.Title>{t('Apps_Engine_Version')}</Card.Col.Title>
+						<CardColSection>
+							<CardColTitle>{t('Apps_Engine_Version')}</CardColTitle>
 							{appsEngineVersion}
-						</Card.Col.Section>
+						</CardColSection>
 					)}
-					<Card.Col.Section>
-						<Card.Col.Title>{t('Node_version')}</Card.Col.Title>
+					<CardColSection>
+						<CardColTitle>{t('Node_version')}</CardColTitle>
 						{statistics.process.nodeVersion}
-					</Card.Col.Section>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('DB_Migration')}</Card.Col.Title>
+					</CardColSection>
+					<CardColSection>
+						<CardColTitle>{t('DB_Migration')}</CardColTitle>
 						{`${statistics.migration.version} (${formatDateAndTime(statistics.migration.lockedAt)})`}
-					</Card.Col.Section>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('MongoDB')}</Card.Col.Title>
+					</CardColSection>
+					<CardColSection>
+						<CardColTitle>{t('MongoDB')}</CardColTitle>
 						{`${statistics.mongoVersion} / ${statistics.mongoStorageEngine} ${
 							!statistics.msEnabled ? `(oplog ${statistics.oplogEnabled ? t('Enabled') : t('Disabled')})` : ''
 						}`}
-					</Card.Col.Section>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('Commit_details')}</Card.Col.Title>
+					</CardColSection>
+					<CardColSection>
+						<CardColTitle>{t('Commit_details')}</CardColTitle>
 						{t('github_HEAD')}: ({commit.hash ? commit.hash.slice(0, 9) : ''}) <br />
 						{t('Branch')}: {commit.branch}
-					</Card.Col.Section>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('PID')}</Card.Col.Title>
+					</CardColSection>
+					<CardColSection>
+						<CardColTitle>{t('PID')}</CardColTitle>
 						{statistics.process.pid}
-					</Card.Col.Section>
-				</Card.Col>
-			</Card.Body>
+					</CardColSection>
+				</CardCol>
+			</CardBody>
 
 			{!!instances.length && (
-				<Card.Footer>
+				<CardFooter>
 					<ButtonGroup align='end'>
 						<Button small onClick={handleInstancesModal}>
 							{t('Instances')}
 						</Button>
 					</ButtonGroup>
-				</Card.Footer>
+				</CardFooter>
 			)}
 		</Card>
 	);
diff --git a/apps/meteor/client/views/admin/info/LicenseCard.tsx b/apps/meteor/client/views/admin/info/LicenseCard.tsx
index 8865ed990a4a..bccbddaa6db7 100644
--- a/apps/meteor/client/views/admin/info/LicenseCard.tsx
+++ b/apps/meteor/client/views/admin/info/LicenseCard.tsx
@@ -1,6 +1,6 @@
 import { ButtonGroup, Button, Skeleton } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardCol, CardTitle, CardColSection, CardColTitle, CardFooter } from '@rocket.chat/ui-client';
 import { useSetModal, useSetting, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -43,14 +43,14 @@ const LicenseCard = (): ReactElement => {
 
 	return (
 		<Card data-qa-id='license-card'>
-			<Card.Title>{t('License')}</Card.Title>
-			<Card.Body>
-				<Card.Col>
-					<Card.Col.Section>
+			<CardTitle>{t('License')}</CardTitle>
+			<CardBody>
+				<CardCol>
+					<CardColSection>
 						<PlanTag />
-					</Card.Col.Section>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('Features')}</Card.Col.Title>
+					</CardColSection>
+					<CardColSection>
+						<CardColTitle>{t('Features')}</CardColTitle>
 						{isLoading ? (
 							<>
 								<Skeleton width='40x' />
@@ -67,10 +67,10 @@ const LicenseCard = (): ReactElement => {
 								<Feature label={t('Read_Receipts')} enabled={hasReadReceipts} />
 							</>
 						)}
-					</Card.Col.Section>
-				</Card.Col>
-			</Card.Body>
-			<Card.Footer>
+					</CardColSection>
+				</CardCol>
+			</CardBody>
+			<CardFooter>
 				<ButtonGroup>
 					{isAirGapped ? (
 						<Button small onClick={handleApplyLicense}>
@@ -80,7 +80,7 @@ const LicenseCard = (): ReactElement => {
 						<Button small>{t('Cloud_connectivity')}</Button>
 					)}
 				</ButtonGroup>
-			</Card.Footer>
+			</CardFooter>
 		</Card>
 	);
 };
diff --git a/apps/meteor/client/views/admin/info/UsageCard.tsx b/apps/meteor/client/views/admin/info/UsageCard.tsx
index 793789c30a03..7a3b2123e5f2 100644
--- a/apps/meteor/client/views/admin/info/UsageCard.tsx
+++ b/apps/meteor/client/views/admin/info/UsageCard.tsx
@@ -1,7 +1,17 @@
 import type { IStats } from '@rocket.chat/core-typings';
 import { ButtonGroup, Button } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { TextSeparator, Card } from '@rocket.chat/ui-client';
+import {
+	Card,
+	CardBody,
+	CardCol,
+	CardTitle,
+	CardColSection,
+	CardColTitle,
+	CardFooter,
+	TextSeparator,
+	CardIcon,
+} from '@rocket.chat/ui-client';
 import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { memo } from 'react';
@@ -29,15 +39,15 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
 
 	return (
 		<Card data-qa-id='usage-card'>
-			<Card.Title>{t('Usage')}</Card.Title>
-			<Card.Body flexDirection={vertical ? 'column' : 'row'}>
-				<Card.Col>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('Users')}</Card.Col.Title>
+			<CardTitle>{t('Usage')}</CardTitle>
+			<CardBody flexDirection={vertical ? 'column' : 'row'}>
+				<CardCol>
+					<CardColSection>
+						<CardColTitle>{t('Users')}</CardColTitle>
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon name='dialpad' /> {t('Total')}
+									<CardIcon name='dialpad' /> {t('Total')}
 								</>
 							}
 							value={statistics.totalUsers}
@@ -45,9 +55,9 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon>
+									<CardIcon>
 										<UserStatus status='online' />
-									</Card.Icon>{' '}
+									</CardIcon>{' '}
 									{t('Online')}
 								</>
 							}
@@ -56,9 +66,9 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon>
+									<CardIcon>
 										<UserStatus status='busy' />
-									</Card.Icon>{' '}
+									</CardIcon>{' '}
 									{t('Busy')}
 								</>
 							}
@@ -67,9 +77,9 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon>
+									<CardIcon>
 										<UserStatus status='away' />
-									</Card.Icon>{' '}
+									</CardIcon>{' '}
 									{t('Away')}
 								</>
 							}
@@ -78,34 +88,34 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon>
+									<CardIcon>
 										<UserStatus status='offline' />
-									</Card.Icon>{' '}
+									</CardIcon>{' '}
 									{t('Offline')}
 								</>
 							}
 							value={statistics.offlineUsers}
 						/>
-					</Card.Col.Section>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('Types_and_Distribution')}</Card.Col.Title>
+					</CardColSection>
+					<CardColSection>
+						<CardColTitle>{t('Types_and_Distribution')}</CardColTitle>
 						<TextSeparator label={t('Connected')} value={statistics.totalConnectedUsers} />
 						<TextSeparator label={t('Stats_Active_Users')} value={statistics.activeUsers} />
 						<TextSeparator label={t('Stats_Active_Guests')} value={statistics.activeGuests} />
 						<TextSeparator label={t('Stats_Non_Active_Users')} value={statistics.nonActiveUsers} />
 						<TextSeparator label={t('Stats_App_Users')} value={statistics.appUsers} />
-					</Card.Col.Section>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('Uploads')}</Card.Col.Title>
+					</CardColSection>
+					<CardColSection>
+						<CardColTitle>{t('Uploads')}</CardColTitle>
 						<TextSeparator label={t('Stats_Total_Uploads')} value={statistics.uploadsTotal} />
 						<TextSeparator label={t('Stats_Total_Uploads_Size')} value={formatMemorySize(statistics.uploadsTotalSize)} />
-					</Card.Col.Section>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('Total_rooms')}</Card.Col.Title>
+					</CardColSection>
+					<CardColSection>
+						<CardColTitle>{t('Total_rooms')}</CardColTitle>
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon name='dialpad' size='x16' /> {t('Stats_Total_Rooms')}
+									<CardIcon name='dialpad' size='x16' /> {t('Stats_Total_Rooms')}
 								</>
 							}
 							value={statistics.totalRooms}
@@ -113,7 +123,7 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon name='hash' size='x16' /> {t('Stats_Total_Channels')}
+									<CardIcon name='hash' size='x16' /> {t('Stats_Total_Channels')}
 								</>
 							}
 							value={statistics.totalChannels}
@@ -121,7 +131,7 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon name='lock' size='x16' /> {t('Stats_Total_Private_Groups')}
+									<CardIcon name='lock' size='x16' /> {t('Stats_Total_Private_Groups')}
 								</>
 							}
 							value={statistics.totalPrivateGroups}
@@ -129,7 +139,7 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon name='balloon' size='x16' /> {t('Stats_Total_Direct_Messages')}
+									<CardIcon name='balloon' size='x16' /> {t('Stats_Total_Direct_Messages')}
 								</>
 							}
 							value={statistics.totalDirect}
@@ -137,7 +147,7 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon name='discussion' size='x16' /> {t('Total_Discussions')}
+									<CardIcon name='discussion' size='x16' /> {t('Total_Discussions')}
 								</>
 							}
 							value={statistics.totalDiscussions}
@@ -145,30 +155,30 @@ const UsageCard = ({ statistics, vertical }: UsageCardProps): ReactElement => {
 						<TextSeparator
 							label={
 								<>
-									<Card.Icon name='headset' size='x16' /> {t('Stats_Total_Livechat_Rooms')}
+									<CardIcon name='headset' size='x16' /> {t('Stats_Total_Livechat_Rooms')}
 								</>
 							}
 							value={statistics.totalLivechat}
 						/>
-					</Card.Col.Section>
-					<Card.Col.Section>
-						<Card.Col.Title>{t('Total_messages')}</Card.Col.Title>
+					</CardColSection>
+					<CardColSection>
+						<CardColTitle>{t('Total_messages')}</CardColTitle>
 						<TextSeparator label={t('Stats_Total_Messages')} value={statistics.totalMessages} />
 						<TextSeparator label={t('Total_Threads')} value={statistics.totalThreads} />
 						<TextSeparator label={t('Stats_Total_Messages_Channel')} value={statistics.totalChannelMessages} />
 						<TextSeparator label={t('Stats_Total_Messages_PrivateGroup')} value={statistics.totalPrivateGroupMessages} />
 						<TextSeparator label={t('Stats_Total_Messages_Direct')} value={statistics.totalDirectMessages} />
 						<TextSeparator label={t('Stats_Total_Messages_Livechat')} value={statistics.totalLivechatMessages} />
-					</Card.Col.Section>
-				</Card.Col>
-			</Card.Body>
-			<Card.Footer>
+					</CardColSection>
+				</CardCol>
+			</CardBody>
+			<CardFooter>
 				<ButtonGroup align='end'>
 					<Button disabled={!canViewEngagement} small onClick={handleEngagement}>
 						{t('See_on_Engagement_Dashboard')}
 					</Button>
 				</ButtonGroup>
-			</Card.Footer>
+			</CardFooter>
 		</Card>
 	);
 };
diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupCard.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupCard.tsx
index 8bf75c3753d5..26331379a9fd 100644
--- a/apps/meteor/client/views/admin/settings/SettingsGroupCard.tsx
+++ b/apps/meteor/client/views/admin/settings/SettingsGroupCard.tsx
@@ -1,7 +1,7 @@
 import type { ISetting } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
 import { Button, Box } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardTitle, CardFooter } from '@rocket.chat/ui-client';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
@@ -28,13 +28,13 @@ const SettingsGroupCard = ({ id, title, description }: SettingsGroupCardProps):
 
 	return (
 		<Card data-qa-id={id}>
-			<Card.Title>{t(title)}</Card.Title>
-			<Card.Body height={88}>
+			<CardTitle>{t(title)}</CardTitle>
+			<CardBody height={88}>
 				<Box className={clampStyle}>
 					{description && t.has(description) && <MarkdownText variant='inlineWithoutBreaks' content={t(description)} />}
 				</Box>
-			</Card.Body>
-			<Card.Footer>
+			</CardBody>
+			<CardFooter>
 				<Button
 					is='a'
 					href={router.buildRoutePath({
@@ -45,7 +45,7 @@ const SettingsGroupCard = ({ id, title, description }: SettingsGroupCardProps):
 				>
 					{t('Open')}
 				</Button>
-			</Card.Footer>
+			</CardFooter>
 		</Card>
 	);
 };
diff --git a/apps/meteor/client/views/admin/users/AdminUserForm.tsx b/apps/meteor/client/views/admin/users/AdminUserForm.tsx
index 4d8f2a48395c..334aca68b8f8 100644
--- a/apps/meteor/client/views/admin/users/AdminUserForm.tsx
+++ b/apps/meteor/client/views/admin/users/AdminUserForm.tsx
@@ -30,6 +30,7 @@ import { useQuery, useMutation } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
+import { validateEmail } from '../../../../lib/emailValidator';
 import { parseCSV } from '../../../../lib/utils/parseCSV';
 import { ContextualbarScrollableContent } from '../../../components/Contextualbar';
 import UserAvatarEditor from '../../../components/avatar/UserAvatarEditor';
@@ -43,11 +44,19 @@ type AdminUserFormProps = {
 	onReload: () => void;
 };
 
-const getInitialValue = (data?: Serialized<IUser>, defaultUserRoles?: IUser['roles']) => ({
+const getInitialValue = ({
+	data,
+	defaultUserRoles,
+	isSmtpEnabled,
+}: {
+	data?: Serialized<IUser>;
+	defaultUserRoles?: IUser['roles'];
+	isSmtpEnabled?: boolean;
+}) => ({
 	roles: data?.roles ?? defaultUserRoles,
 	name: data?.name ?? '',
 	password: '',
-	username: data?.username,
+	username: data?.username ?? '',
 	bio: data?.bio ?? '',
 	nickname: data?.nickname ?? '',
 	email: (data?.emails?.length && data.emails[0].address) || '',
@@ -57,12 +66,10 @@ const getInitialValue = (data?: Serialized<IUser>, defaultUserRoles?: IUser['rol
 	customFields: data?.customFields ?? {},
 	statusText: data?.statusText ?? '',
 	joinDefaultChannels: true,
-	sendWelcomeEmail: true,
+	sendWelcomeEmail: isSmtpEnabled,
 	avatar: '' as AvatarObject,
 });
 
-// TODO: check email is already in use in UI
-// TODO: add validation to statusText
 const UserForm = ({ userData, onReload, ...props }: AdminUserFormProps) => {
 	const t = useTranslation();
 	const router = useRouter();
@@ -90,12 +97,11 @@ const UserForm = ({ userData, onReload, ...props }: AdminUserFormProps) => {
 		control,
 		watch,
 		handleSubmit,
-		register,
 		reset,
 		formState: { errors, isDirty },
 	} = useForm({
-		defaultValues: getInitialValue(userData, defaultUserRoles),
-		mode: 'all',
+		defaultValues: getInitialValue({ data: userData, defaultUserRoles, isSmtpEnabled }),
+		mode: 'onBlur',
 	});
 
 	const { avatar, username, setRandomPassword } = watch();
@@ -175,43 +181,82 @@ const UserForm = ({ userData, onReload, ...props }: AdminUserFormProps) => {
 					<Field>
 						<Field.Label htmlFor={nameId}>{t('Name')}</Field.Label>
 						<Field.Row>
-							<TextInput
-								id={nameId}
-								aria-invalid={errors.name ? 'true' : 'false'}
-								error={errors.name?.message}
-								flexGrow={1}
-								{...register('name', { required: t('The_field_is_required', t('Name')) })}
+							<Controller
+								control={control}
+								name='name'
+								rules={{ required: t('The_field_is_required', t('Name')) }}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										id={nameId}
+										aria-invalid={errors.name ? 'true' : 'false'}
+										aria-describedby={`${nameId}-error`}
+										error={errors.name?.message}
+										flexGrow={1}
+									/>
+								)}
 							/>
 						</Field.Row>
-						{errors?.name && <Field.Error>{errors.name.message}</Field.Error>}
+						{errors?.name && (
+							<Field.Error aria-live='assertive' id={`${nameId}-error`}>
+								{errors.name.message}
+							</Field.Error>
+						)}
 					</Field>
 					<Field>
 						<Field.Label htmlFor={usernameId}>{t('Username')}</Field.Label>
 						<Field.Row>
-							<TextInput
-								id={usernameId}
-								aria-invalid={errors.username ? 'true' : 'false'}
-								error={errors.username?.message}
-								flexGrow={1}
-								addon={<Icon name='at' size='x20' />}
-								{...register('username', { required: t('The_field_is_required', t('Username')) })}
+							<Controller
+								control={control}
+								name='username'
+								rules={{ required: t('The_field_is_required', t('Username')) }}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										id={usernameId}
+										aria-invalid={errors.username ? 'true' : 'false'}
+										aria-describedby={`${usernameId}-error`}
+										error={errors.username?.message}
+										flexGrow={1}
+										addon={<Icon name='at' size='x20' />}
+									/>
+								)}
 							/>
 						</Field.Row>
-						{errors?.username && <Field.Error>{errors.username.message}</Field.Error>}
+						{errors?.username && (
+							<Field.Error aria-live='assertive' id={`${usernameId}-error`}>
+								{errors.username.message}
+							</Field.Error>
+						)}
 					</Field>
 					<Field>
 						<Field.Label htmlFor={emailId}>{t('Email')}</Field.Label>
 						<Field.Row>
-							<TextInput
-								id={emailId}
-								aria-invalid={errors.email ? 'true' : 'false'}
-								error={errors.email?.message}
-								flexGrow={1}
-								addon={<Icon name='mail' size='x20' />}
-								{...register('email', { required: t('The_field_is_required', t('Email')) })}
+							<Controller
+								control={control}
+								name='email'
+								rules={{
+									required: t('The_field_is_required', t('Email')),
+									validate: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')),
+								}}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										id={emailId}
+										aria-invalid={errors.email ? 'true' : 'false'}
+										aria-describedby={`${emailId}-error`}
+										error={errors.email?.message}
+										flexGrow={1}
+										addon={<Icon name='mail' size='x20' />}
+									/>
+								)}
 							/>
 						</Field.Row>
-						{errors?.email && <Field.Error>{errors.email.message}</Field.Error>}
+						{errors?.email && (
+							<Field.Error aria-live='assertive' id={`${emailId}-error`}>
+								{errors.email.message}
+							</Field.Error>
+						)}
 					</Field>
 					<Field>
 						<Box display='flex' flexDirection='row' alignItems='center' justifyContent='space-between' flexGrow={1}>
@@ -228,38 +273,65 @@ const UserForm = ({ userData, onReload, ...props }: AdminUserFormProps) => {
 					<Field>
 						<Field.Label htmlFor={statusTextId}>{t('StatusMessage')}</Field.Label>
 						<Field.Row>
-							<TextInput
-								id={statusTextId}
-								{...register('statusText', {
-									maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH) },
-								})}
-								flexGrow={1}
-								addon={<Icon name='edit' size='x20' />}
+							<Controller
+								control={control}
+								name='statusText'
+								rules={{ maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH) } }}
+								render={({ field }) => (
+									<TextInput
+										{...field}
+										id={statusTextId}
+										error={errors?.statusText?.message}
+										aria-invalid={errors.statusText ? 'true' : 'false'}
+										aria-describedby={`${statusTextId}-error`}
+										flexGrow={1}
+										addon={<Icon name='edit' size='x20' />}
+									/>
+								)}
 							/>
 						</Field.Row>
-						{errors?.statusText && <Field.Error>{errors.statusText.message}</Field.Error>}
+						{errors?.statusText && (
+							<Field.Error aria-live='assertive' id={`${statusTextId}-error`}>
+								{errors.statusText.message}
+							</Field.Error>
+						)}
 					</Field>
 					<Field>
 						<Field.Label htmlFor={bioId}>{t('Bio')}</Field.Label>
 						<Field.Row>
-							<TextAreaInput
-								id={bioId}
-								{...register('bio', { maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) } })}
-								rows={3}
-								flexGrow={1}
-								addon={<Icon name='edit' size='x20' alignSelf='center' />}
+							<Controller
+								control={control}
+								name='bio'
+								rules={{ maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) } }}
+								render={({ field }) => (
+									<TextAreaInput
+										{...field}
+										id={bioId}
+										rows={3}
+										error={errors?.bio?.message}
+										aria-invalid={errors.bio ? 'true' : 'false'}
+										aria-describedby={`${bioId}-error`}
+										flexGrow={1}
+										addon={<Icon name='edit' size='x20' alignSelf='center' />}
+									/>
+								)}
 							/>
 						</Field.Row>
-						{errors?.bio && <Field.Error>{errors.bio.message}</Field.Error>}
+						{errors?.bio && (
+							<Field.Error aria-live='assertive' id={`${bioId}-error`}>
+								{errors.bio.message}
+							</Field.Error>
+						)}
 					</Field>
 					<Field>
 						<Field.Label htmlFor={nicknameId}>{t('Nickname')}</Field.Label>
 						<Field.Row>
-							<TextInput
-								id={nicknameId}
-								{...register('nickname')}
-								flexGrow={1}
-								addon={<Icon name='edit' size='x20' alignSelf='center' />}
+							<Controller
+								control={control}
+								name='nickname'
+								render={({ field }) => (
+									<TextInput {...field} id={nicknameId} flexGrow={1} addon={<Icon name='edit' size='x20' alignSelf='center' />} />
+								)}
 							/>
 						</Field.Row>
 					</Field>
@@ -269,16 +341,28 @@ const UserForm = ({ userData, onReload, ...props }: AdminUserFormProps) => {
 						<Field>
 							<Field.Label htmlFor={passwordId}>{t('Password')}</Field.Label>
 							<Field.Row>
-								<PasswordInput
-									id={passwordId}
-									{...register('password', { required: !userData?._id && t('The_field_is_required', t('Password')) })}
-									aria-invalid={errors.password ? 'true' : 'false'}
-									error={errors.password?.message}
-									flexGrow={1}
-									addon={<Icon name='key' size='x20' />}
+								<Controller
+									control={control}
+									name='password'
+									rules={{ required: !userData?._id && t('The_field_is_required', t('Password')) }}
+									render={({ field }) => (
+										<PasswordInput
+											{...field}
+											id={passwordId}
+											aria-invalid={errors.password ? 'true' : 'false'}
+											aria-describedby={`${passwordId}-error`}
+											error={errors.password?.message}
+											flexGrow={1}
+											addon={<Icon name='key' size='x20' />}
+										/>
+									)}
 								/>
 							</Field.Row>
-							{errors?.password && <Field.Error>{errors.password.message}</Field.Error>}
+							{errors?.password && (
+								<Field.Error aria-live='assertive' id={`${passwordId}-error`}>
+									{errors.password.message}
+								</Field.Error>
+							)}
 						</Field>
 					)}
 					<Field>
@@ -309,13 +393,23 @@ const UserForm = ({ userData, onReload, ...props }: AdminUserFormProps) => {
 									control={control}
 									name='setRandomPassword'
 									render={({ field: { ref, onChange, value } }) => (
-										<ToggleSwitch ref={ref} id={setRandomPasswordId} checked={value} onChange={onChange} disabled={!isSmtpEnabled} />
+										<ToggleSwitch
+											ref={ref}
+											id={setRandomPasswordId}
+											aria-describedby={`${setRandomPasswordId}-hint`}
+											checked={value}
+											onChange={onChange}
+											disabled={!isSmtpEnabled}
+										/>
 									)}
 								/>
 							</Field.Row>
 						</Box>
 						{!isSmtpEnabled && (
-							<Field.Hint dangerouslySetInnerHTML={{ __html: t('Send_Email_SMTP_Warning', { url: 'admin/settings/Email' }) }} />
+							<Field.Hint
+								id={`${setRandomPasswordId}-hint`}
+								dangerouslySetInnerHTML={{ __html: t('Send_Email_SMTP_Warning', { url: 'admin/settings/Email' }) }}
+							/>
 						)}
 					</Field>
 					<Field>
@@ -364,16 +458,25 @@ const UserForm = ({ userData, onReload, ...props }: AdminUserFormProps) => {
 									control={control}
 									name='sendWelcomeEmail'
 									render={({ field: { onChange, value } }) => (
-										<ToggleSwitch id={sendWelcomeEmailId} onChange={onChange} checked={value} disabled={!isSmtpEnabled} />
+										<ToggleSwitch
+											id={sendWelcomeEmailId}
+											aria-describedby={`${sendWelcomeEmailId}-hint`}
+											onChange={onChange}
+											checked={value}
+											disabled={!isSmtpEnabled}
+										/>
 									)}
 								/>
 							</Field.Row>
 						</Box>
 						{!isSmtpEnabled && (
-							<Field.Hint dangerouslySetInnerHTML={{ __html: t('Send_Email_SMTP_Warning', { url: 'admin/settings/Email' }) }} />
+							<Field.Hint
+								id={`${sendWelcomeEmailId}-hint`}
+								dangerouslySetInnerHTML={{ __html: t('Send_Email_SMTP_Warning', { url: 'admin/settings/Email' }) }}
+							/>
 						)}
 					</Field>
-					{customFieldsMetadata && (
+					{Boolean(customFieldsMetadata.length) && (
 						<>
 							<Divider />
 							<Box fontScale='h4'>{t('Custom_Fields')}</Box>
@@ -384,7 +487,11 @@ const UserForm = ({ userData, onReload, ...props }: AdminUserFormProps) => {
 			</ContextualbarScrollableContent>
 			<ContextualbarFooter>
 				<ButtonGroup stretch>
-					<Button type='reset' disabled={!isDirty} onClick={() => reset(getInitialValue(userData))}>
+					<Button
+						type='reset'
+						disabled={!isDirty}
+						onClick={() => reset(getInitialValue({ data: userData, defaultUserRoles, isSmtpEnabled }))}
+					>
 						{t('Reset')}
 					</Button>
 					<Button primary disabled={!isDirty} onClick={handleSubmit(handleSaveUser)}>
diff --git a/apps/meteor/client/views/home/cards/AddUsersCard.tsx b/apps/meteor/client/views/home/cards/AddUsersCard.tsx
index fe36c6e6f165..551552a182d4 100644
--- a/apps/meteor/client/views/home/cards/AddUsersCard.tsx
+++ b/apps/meteor/client/views/home/cards/AddUsersCard.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardFooter, CardFooterWrapper, CardTitle } from '@rocket.chat/ui-client';
 import { useTranslation, useRoute } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -14,15 +14,15 @@ const AddUsersCard = (): ReactElement => {
 
 	return (
 		<Card data-qa-id='homepage-add-users-card'>
-			<Card.Title>{t('Add_users')}</Card.Title>
-			<Card.Body>{t('Invite_and_add_members_to_this_workspace_to_start_communicating')}</Card.Body>
-			<Card.FooterWrapper>
-				<Card.Footer>
+			<CardTitle>{t('Add_users')}</CardTitle>
+			<CardBody>{t('Invite_and_add_members_to_this_workspace_to_start_communicating')}</CardBody>
+			<CardFooterWrapper>
+				<CardFooter>
 					<Button primary onClick={handleOpenUsersRoute}>
 						{t('Add_users')}
 					</Button>
-				</Card.Footer>
-			</Card.FooterWrapper>
+				</CardFooter>
+			</CardFooterWrapper>
 		</Card>
 	);
 };
diff --git a/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx b/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx
index f5421bd821e4..9e84a8ff373d 100644
--- a/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx
+++ b/apps/meteor/client/views/home/cards/CreateChannelsCard.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardFooter, CardFooterWrapper, CardTitle } from '@rocket.chat/ui-client';
 import { useTranslation, useSetModal } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -14,13 +14,13 @@ const CreateChannelsCard = (): ReactElement => {
 
 	return (
 		<Card data-qa-id='homepage-create-channels-card'>
-			<Card.Title>{t('Create_channels')}</Card.Title>
-			<Card.Body>{t('Create_a_public_channel_that_new_workspace_members_can_join')}</Card.Body>
-			<Card.FooterWrapper>
-				<Card.Footer>
+			<CardTitle>{t('Create_channels')}</CardTitle>
+			<CardBody>{t('Create_a_public_channel_that_new_workspace_members_can_join')}</CardBody>
+			<CardFooterWrapper>
+				<CardFooter>
 					<Button onClick={openCreateChannelModal}>{t('Create_channel')}</Button>
-				</Card.Footer>
-			</Card.FooterWrapper>
+				</CardFooter>
+			</CardFooterWrapper>
 		</Card>
 	);
 };
diff --git a/apps/meteor/client/views/home/cards/CustomContentCard.tsx b/apps/meteor/client/views/home/cards/CustomContentCard.tsx
index 118fa659e640..0f5c40ad87f9 100644
--- a/apps/meteor/client/views/home/cards/CustomContentCard.tsx
+++ b/apps/meteor/client/views/home/cards/CustomContentCard.tsx
@@ -1,5 +1,5 @@
 import { Box, Button, Icon, Tag } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardFooter, CardFooterWrapper } from '@rocket.chat/ui-client';
 import { useRole, useSettingSetValue, useSetting, useToastMessageDispatch, useTranslation, useRoute } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -63,8 +63,8 @@ const CustomContentCard = (): ReactElement | null => {
 				<Box mb={8} role='status' aria-label={isCustomContentBodyEmpty ? t('Homepage_Custom_Content_Default_Message') : customContentBody}>
 					{isCustomContentBodyEmpty ? t('Homepage_Custom_Content_Default_Message') : <CustomHomepageContent />}
 				</Box>
-				<Card.FooterWrapper>
-					<Card.Footer>
+				<CardFooterWrapper>
+					<CardFooter>
 						<Button onClick={() => settingsRoute.push({ group: 'Layout' })} title={t('Layout_Home_Page_Content')}>
 							{t('Customize_Content')}
 						</Button>
@@ -86,8 +86,8 @@ const CustomContentCard = (): ReactElement | null => {
 						>
 							{!isCustomContentOnly ? t('Show_Only_This_Content') : t('Show_default_content')}
 						</Button>
-					</Card.Footer>
-				</Card.FooterWrapper>
+					</CardFooter>
+				</CardFooterWrapper>
 			</Card>
 		);
 	}
diff --git a/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx b/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx
index b53d6603ccac..5a3c7834b3b4 100644
--- a/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx
+++ b/apps/meteor/client/views/home/cards/DesktopAppsCard.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardFooter, CardFooterWrapper, CardTitle } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -16,15 +16,15 @@ const DesktopAppsCard = (): ReactElement => {
 
 	return (
 		<Card data-qa-id='homepage-desktop-apps-card'>
-			<Card.Title>{t('Desktop_apps')}</Card.Title>
-			<Card.Body>{t('Install_rocket_chat_on_your_preferred_desktop_platform')}</Card.Body>
-			<Card.FooterWrapper>
-				<Card.Footer>
+			<CardTitle>{t('Desktop_apps')}</CardTitle>
+			<CardBody>{t('Install_rocket_chat_on_your_preferred_desktop_platform')}</CardBody>
+			<CardFooterWrapper>
+				<CardFooter>
 					<Button onClick={() => handleOpenLink(WINDOWS_APP_URL)}>{t('Platform_Windows')}</Button>
 					<Button onClick={() => handleOpenLink(LINUX_APP_URL)}>{t('Platform_Linux')}</Button>
 					<Button onClick={() => handleOpenLink(MAC_APP_URL)}>{t('Platform_Mac')}</Button>
-				</Card.Footer>
-			</Card.FooterWrapper>
+				</CardFooter>
+			</CardFooterWrapper>
 		</Card>
 	);
 };
diff --git a/apps/meteor/client/views/home/cards/DocumentationCard.tsx b/apps/meteor/client/views/home/cards/DocumentationCard.tsx
index c833f7425a7b..2ae8c0618093 100644
--- a/apps/meteor/client/views/home/cards/DocumentationCard.tsx
+++ b/apps/meteor/client/views/home/cards/DocumentationCard.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardFooter, CardFooterWrapper, CardTitle } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -14,13 +14,13 @@ const DocumentationCard = (): ReactElement => {
 
 	return (
 		<Card data-qa-id='homepage-documentation-card'>
-			<Card.Title>{t('Documentation')}</Card.Title>
-			<Card.Body>{t('Learn_how_to_unlock_the_myriad_possibilities_of_rocket_chat')}</Card.Body>
-			<Card.FooterWrapper>
-				<Card.Footer>
+			<CardTitle>{t('Documentation')}</CardTitle>
+			<CardBody>{t('Learn_how_to_unlock_the_myriad_possibilities_of_rocket_chat')}</CardBody>
+			<CardFooterWrapper>
+				<CardFooter>
 					<Button onClick={() => handleOpenLink(DOCS_URL)}>{t('See_documentation')}</Button>
-				</Card.Footer>
-			</Card.FooterWrapper>
+				</CardFooter>
+			</CardFooterWrapper>
 		</Card>
 	);
 };
diff --git a/apps/meteor/client/views/home/cards/JoinRoomsCard.tsx b/apps/meteor/client/views/home/cards/JoinRoomsCard.tsx
index 1a105ea8d58f..c4bfcc36d7e7 100644
--- a/apps/meteor/client/views/home/cards/JoinRoomsCard.tsx
+++ b/apps/meteor/client/views/home/cards/JoinRoomsCard.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardFooter, CardFooterWrapper, CardTitle } from '@rocket.chat/ui-client';
 import { useTranslation, useRouter } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -14,13 +14,13 @@ const JoinRoomsCard = (): ReactElement => {
 
 	return (
 		<Card data-qa-id='homepage-join-rooms-card'>
-			<Card.Title>{t('Join_rooms')}</Card.Title>
-			<Card.Body>{t('Discover_public_channels_and_teams_in_the_workspace_directory')}</Card.Body>
-			<Card.FooterWrapper>
-				<Card.Footer>
+			<CardTitle>{t('Join_rooms')}</CardTitle>
+			<CardBody>{t('Discover_public_channels_and_teams_in_the_workspace_directory')}</CardBody>
+			<CardFooterWrapper>
+				<CardFooter>
 					<Button onClick={handleDirectory}>{t('Open_directory')}</Button>
-				</Card.Footer>
-			</Card.FooterWrapper>
+				</CardFooter>
+			</CardFooterWrapper>
 		</Card>
 	);
 };
diff --git a/apps/meteor/client/views/home/cards/MobileAppsCard.tsx b/apps/meteor/client/views/home/cards/MobileAppsCard.tsx
index e04097185f42..5527e8d3e0f5 100644
--- a/apps/meteor/client/views/home/cards/MobileAppsCard.tsx
+++ b/apps/meteor/client/views/home/cards/MobileAppsCard.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardTitle, CardBody, CardFooterWrapper, CardFooter } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -15,14 +15,14 @@ const MobileAppsCard = (): ReactElement => {
 
 	return (
 		<Card data-qa-id='homepage-mobile-apps-card'>
-			<Card.Title>{t('Mobile_apps')}</Card.Title>
-			<Card.Body>{t('Take_rocket_chat_with_you_with_mobile_applications')}</Card.Body>
-			<Card.FooterWrapper>
-				<Card.Footer>
+			<CardTitle>{t('Mobile_apps')}</CardTitle>
+			<CardBody>{t('Take_rocket_chat_with_you_with_mobile_applications')}</CardBody>
+			<CardFooterWrapper>
+				<CardFooter>
 					<Button onClick={() => handleOpenLink(GOOGLE_PLAY_URL)}>{t('Google_Play')}</Button>
 					<Button onClick={() => handleOpenLink(APP_STORE_URL)}>{t('App_Store')}</Button>
-				</Card.Footer>
-			</Card.FooterWrapper>
+				</CardFooter>
+			</CardFooterWrapper>
 		</Card>
 	);
 };
diff --git a/apps/meteor/ee/client/omnichannel/reports/components/ReportCard.tsx b/apps/meteor/ee/client/omnichannel/reports/components/ReportCard.tsx
index 92a4d8d44199..d885242f7722 100644
--- a/apps/meteor/ee/client/omnichannel/reports/components/ReportCard.tsx
+++ b/apps/meteor/ee/client/omnichannel/reports/components/ReportCard.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Box, Skeleton, States, StatesIcon, StatesSubtitle, StatesTitle } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardCol, CardTitle } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactNode, ComponentProps, ReactElement } from 'react';
 import React from 'react';
@@ -61,7 +61,7 @@ export const ReportCard = ({
 			data-qa={id}
 			aria-busy={isLoading}
 		>
-			<Card.Title>
+			<CardTitle>
 				<Box display='flex' justifyContent='space-between' alignItems='center' flexWrap='wrap' style={{ rowGap: 8 }}>
 					<Box display='flex' flexDirection='column' flexShrink={1} mie={16}>
 						<Box is='span' withTruncatedText>
@@ -76,9 +76,9 @@ export const ReportCard = ({
 						<DownloadDataButton {...downloadProps} title='Download CSV' size={32} />
 					</Box>
 				</Box>
-			</Card.Title>
-			<Card.Body>
-				<Card.Col>
+			</CardTitle>
+			<CardBody>
+				<CardCol>
 					<Box minHeight={minHeight}>
 						<CardErrorState isError={isError} onRetry={onRetry}>
 							{isLoading && LoadingSkeleton}
@@ -94,8 +94,8 @@ export const ReportCard = ({
 							{!isLoading && isDataFound && children}
 						</CardErrorState>
 					</Box>
-				</Card.Col>
-			</Card.Body>
+				</CardCol>
+			</CardBody>
 		</Box>
 	);
 };
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/EngagementDashboardCard.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/EngagementDashboardCard.tsx
index 7c4965bce5d0..0fe32a90d825 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/EngagementDashboardCard.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/EngagementDashboardCard.tsx
@@ -1,5 +1,5 @@
 import { Box } from '@rocket.chat/fuselage';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardCol, CardTitle } from '@rocket.chat/ui-client';
 import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 
@@ -13,14 +13,14 @@ type EngagementDashboardCardProps = {
 const EngagementDashboardCard = ({ children, title = undefined }: EngagementDashboardCardProps): ReactElement => (
 	<Box mb={16}>
 		<Card>
-			{title && <Card.Title>{title}</Card.Title>}
-			<Card.Body>
-				<Card.Col>
+			{title && <CardTitle>{title}</CardTitle>}
+			<CardBody>
+				<CardCol>
 					<EngagementDashboardCardErrorBoundary>
 						<Box>{children}</Box>
 					</EngagementDashboardCardErrorBoundary>
-				</Card.Col>
-			</Card.Body>
+				</CardCol>
+			</CardBody>
 		</Card>
 	</Box>
 );
diff --git a/apps/meteor/ee/client/views/admin/info/SeatsCard.tsx b/apps/meteor/ee/client/views/admin/info/SeatsCard.tsx
index ddcfe312122f..b595dd9c1fae 100644
--- a/apps/meteor/ee/client/views/admin/info/SeatsCard.tsx
+++ b/apps/meteor/ee/client/views/admin/info/SeatsCard.tsx
@@ -1,6 +1,6 @@
 import { Box, Button, ButtonGroup, Skeleton } from '@rocket.chat/fuselage';
 import colors from '@rocket.chat/fuselage-tokens/colors';
-import { Card } from '@rocket.chat/ui-client';
+import { Card, CardBody, CardCol, CardFooter, CardTitle } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
@@ -27,9 +27,9 @@ const SeatsCard = ({ seatsCap }: SeatsCardProps): ReactElement => {
 
 	return (
 		<Card>
-			<Card.Title>{t('Seats_usage')}</Card.Title>
-			<Card.Body>
-				<Card.Col>
+			<CardTitle>{t('Seats_usage')}</CardTitle>
+			<CardBody>
+				<CardCol>
 					<Box display='flex' flexDirection='row' justifyContent='center' fontScale={isNearLimit ? 'p2m' : 'p2'}>
 						{!seatsCap ? (
 							<Skeleton variant='rect' width='x112' height='x112' />
@@ -43,15 +43,15 @@ const SeatsCard = ({ seatsCap }: SeatsCardProps): ReactElement => {
 							/>
 						)}
 					</Box>
-				</Card.Col>
-			</Card.Body>
-			<Card.Footer>
+				</CardCol>
+			</CardBody>
+			<CardFooter>
 				<ButtonGroup align='end'>
 					<Button small primary onClick={() => handleExternalLink(requestSeatsLink)}>
 						{t('Request_seats')}
 					</Button>
 				</ButtonGroup>
-			</Card.Footer>
+			</CardFooter>
 		</Card>
 	);
 };
diff --git a/apps/meteor/ee/server/services/CHANGELOG.md b/apps/meteor/ee/server/services/CHANGELOG.md
index c9759c95b0af..7966239693fd 100644
--- a/apps/meteor/ee/server/services/CHANGELOG.md
+++ b/apps/meteor/ee/server/services/CHANGELOG.md
@@ -1,5 +1,16 @@
 # rocketchat-services
 
+## 1.1.4
+
+### Patch Changes
+
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+  - @rocket.chat/models@0.0.10
+  - @rocket.chat/core-services@0.1.4
+  - @rocket.chat/core-typings@6.3.4
+  - @rocket.chat/rest-typings@6.3.4
+
 ## 1.1.3
 
 ### Patch Changes
diff --git a/apps/meteor/ee/server/services/package.json b/apps/meteor/ee/server/services/package.json
index 5ef03a985d0f..a80d29269c88 100644
--- a/apps/meteor/ee/server/services/package.json
+++ b/apps/meteor/ee/server/services/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "rocketchat-services",
 	"private": true,
-	"version": "1.1.3",
+	"version": "1.1.4",
 	"description": "Rocket.Chat Authorization service",
 	"main": "index.js",
 	"scripts": {
diff --git a/apps/meteor/package.json b/apps/meteor/package.json
index 78b875191b02..618591f585bb 100644
--- a/apps/meteor/package.json
+++ b/apps/meteor/package.json
@@ -470,4 +470,4 @@
 	"installConfig": {
 		"hoistingLimits": "workspaces"
 	}
-}
\ No newline at end of file
+}
diff --git a/apps/meteor/tests/e2e/login.spec.ts b/apps/meteor/tests/e2e/login.spec.ts
index 2414e5579e3b..958f5120f142 100644
--- a/apps/meteor/tests/e2e/login.spec.ts
+++ b/apps/meteor/tests/e2e/login.spec.ts
@@ -12,6 +12,11 @@ test.describe.parallel('Login', () => {
 		await page.goto('/home');
 	});
 
+	test('should not have any accessibility violations', async ({ makeAxeBuilder }) => {
+		const results = await makeAxeBuilder().analyze();
+		expect(results.violations).toEqual([]);
+	})
+
 	test('Login with invalid credentials', async () => {
 		await test.step('expect to have username and password marked as invalid', async () => {
 			await poRegistration.username.type(faker.internet.email());
diff --git a/apps/meteor/tests/e2e/register.spec.ts b/apps/meteor/tests/e2e/register.spec.ts
index f99f212ff718..6d62ace5e7d3 100644
--- a/apps/meteor/tests/e2e/register.spec.ts
+++ b/apps/meteor/tests/e2e/register.spec.ts
@@ -128,7 +128,7 @@ test.describe.serial('register', () => {
 			await page.goto('/home');
 			await poRegistration.goToRegister.click();
 	
-			const results = await makeAxeBuilder().disableRules(['landmark-one-main', 'region']).analyze();
+			const results = await makeAxeBuilder().analyze();
 	
 			expect(results.violations).toEqual([]);
 		});
diff --git a/ee/apps/account-service/CHANGELOG.md b/ee/apps/account-service/CHANGELOG.md
index 67bb7a8164f5..89607251a0fd 100644
--- a/ee/apps/account-service/CHANGELOG.md
+++ b/ee/apps/account-service/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @rocket.chat/account-service
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+  - @rocket.chat/models@0.0.10
+  - @rocket.chat/core-services@0.1.4
+  - @rocket.chat/core-typings@6.3.4
+  - @rocket.chat/rest-typings@6.3.4
+
 ## 0.2.3
 
 ### Patch Changes
diff --git a/ee/apps/account-service/package.json b/ee/apps/account-service/package.json
index 8b6c0efc9796..39dce6f462f9 100644
--- a/ee/apps/account-service/package.json
+++ b/ee/apps/account-service/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@rocket.chat/account-service",
 	"private": true,
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"description": "Rocket.Chat Account service",
 	"scripts": {
 		"build": "tsc -p tsconfig.json",
diff --git a/ee/apps/authorization-service/CHANGELOG.md b/ee/apps/authorization-service/CHANGELOG.md
index 882144f1602f..9873537590d3 100644
--- a/ee/apps/authorization-service/CHANGELOG.md
+++ b/ee/apps/authorization-service/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @rocket.chat/authorization-service
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+  - @rocket.chat/models@0.0.10
+  - @rocket.chat/core-services@0.1.4
+  - @rocket.chat/core-typings@6.3.4
+  - @rocket.chat/rest-typings@6.3.4
+
 ## 0.2.3
 
 ### Patch Changes
diff --git a/ee/apps/authorization-service/package.json b/ee/apps/authorization-service/package.json
index 02431b537db5..b2a595366474 100644
--- a/ee/apps/authorization-service/package.json
+++ b/ee/apps/authorization-service/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@rocket.chat/authorization-service",
 	"private": true,
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"description": "Rocket.Chat Authorization service",
 	"scripts": {
 		"build": "tsc -p tsconfig.json",
diff --git a/ee/apps/ddp-streamer/CHANGELOG.md b/ee/apps/ddp-streamer/CHANGELOG.md
index 242f5b517039..b2a64786913b 100644
--- a/ee/apps/ddp-streamer/CHANGELOG.md
+++ b/ee/apps/ddp-streamer/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @rocket.chat/ddp-streamer
 
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+  - @rocket.chat/models@0.0.10
+  - @rocket.chat/core-services@0.1.4
+  - @rocket.chat/instance-status@0.0.10
+  - @rocket.chat/core-typings@6.3.4
+  - @rocket.chat/rest-typings@6.3.4
+  - @rocket.chat/ui-contexts@1.0.4
+
 ## 0.1.3
 
 ### Patch Changes
diff --git a/ee/apps/ddp-streamer/package.json b/ee/apps/ddp-streamer/package.json
index 32876be36fd8..f6eb59fedcfd 100644
--- a/ee/apps/ddp-streamer/package.json
+++ b/ee/apps/ddp-streamer/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@rocket.chat/ddp-streamer",
 	"private": true,
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"description": "Rocket.Chat DDP-Streamer service",
 	"scripts": {
 		"build": "tsc -p tsconfig.json",
diff --git a/ee/apps/omnichannel-transcript/CHANGELOG.md b/ee/apps/omnichannel-transcript/CHANGELOG.md
index f7de2c547ab0..78829550a937 100644
--- a/ee/apps/omnichannel-transcript/CHANGELOG.md
+++ b/ee/apps/omnichannel-transcript/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @rocket.chat/omnichannel-transcript
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+  - @rocket.chat/omnichannel-services@0.0.10
+  - @rocket.chat/models@0.0.10
+  - @rocket.chat/core-services@0.1.4
+  - @rocket.chat/core-typings@6.3.4
+  - @rocket.chat/pdf-worker@0.0.10
+
 ## 0.2.3
 
 ### Patch Changes
diff --git a/ee/apps/omnichannel-transcript/package.json b/ee/apps/omnichannel-transcript/package.json
index 4ba11422a2bd..94faf82d74e7 100644
--- a/ee/apps/omnichannel-transcript/package.json
+++ b/ee/apps/omnichannel-transcript/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@rocket.chat/omnichannel-transcript",
 	"private": true,
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"description": "Rocket.Chat service",
 	"scripts": {
 		"build": "tsc -p tsconfig.json",
diff --git a/ee/apps/presence-service/CHANGELOG.md b/ee/apps/presence-service/CHANGELOG.md
index 5bb3ef39b101..08a27bb77ced 100644
--- a/ee/apps/presence-service/CHANGELOG.md
+++ b/ee/apps/presence-service/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @rocket.chat/presence-service
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+  - @rocket.chat/models@0.0.10
+  - @rocket.chat/presence@0.0.10
+  - @rocket.chat/core-services@0.1.4
+  - @rocket.chat/core-typings@6.3.4
+
 ## 0.2.3
 
 ### Patch Changes
diff --git a/ee/apps/presence-service/package.json b/ee/apps/presence-service/package.json
index dfd9a8902aac..a79ea33b6406 100644
--- a/ee/apps/presence-service/package.json
+++ b/ee/apps/presence-service/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@rocket.chat/presence-service",
 	"private": true,
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"description": "Rocket.Chat Presence service",
 	"scripts": {
 		"build": "tsc -p tsconfig.json",
diff --git a/ee/apps/queue-worker/CHANGELOG.md b/ee/apps/queue-worker/CHANGELOG.md
index 1490afbb40ab..2bd7874719e4 100644
--- a/ee/apps/queue-worker/CHANGELOG.md
+++ b/ee/apps/queue-worker/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @rocket.chat/queue-worker
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+  - @rocket.chat/omnichannel-services@0.0.10
+  - @rocket.chat/models@0.0.10
+  - @rocket.chat/core-services@0.1.4
+  - @rocket.chat/core-typings@6.3.4
+
 ## 0.2.3
 
 ### Patch Changes
diff --git a/ee/apps/queue-worker/package.json b/ee/apps/queue-worker/package.json
index 6907bfa478a8..8eb8b299105b 100644
--- a/ee/apps/queue-worker/package.json
+++ b/ee/apps/queue-worker/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@rocket.chat/queue-worker",
 	"private": true,
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"description": "Rocket.Chat service",
 	"scripts": {
 		"build": "tsc -p tsconfig.json",
diff --git a/ee/apps/stream-hub-service/CHANGELOG.md b/ee/apps/stream-hub-service/CHANGELOG.md
index 6af9dfb7b0e0..9f5da36d15f5 100644
--- a/ee/apps/stream-hub-service/CHANGELOG.md
+++ b/ee/apps/stream-hub-service/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @rocket.chat/stream-hub-service
 
+## 0.2.4
+
+### Patch Changes
+
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+  - @rocket.chat/models@0.0.10
+  - @rocket.chat/core-services@0.1.4
+  - @rocket.chat/core-typings@6.3.4
+
 ## 0.2.3
 
 ### Patch Changes
diff --git a/ee/apps/stream-hub-service/package.json b/ee/apps/stream-hub-service/package.json
index 325a8a75f336..469b6bc8feda 100644
--- a/ee/apps/stream-hub-service/package.json
+++ b/ee/apps/stream-hub-service/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@rocket.chat/stream-hub-service",
 	"private": true,
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"description": "Rocket.Chat Stream Hub service",
 	"scripts": {
 		"build": "tsc -p tsconfig.json",
diff --git a/ee/packages/api-client/CHANGELOG.md b/ee/packages/api-client/CHANGELOG.md
index 030d8cae3b99..5ecdabd24205 100644
--- a/ee/packages/api-client/CHANGELOG.md
+++ b/ee/packages/api-client/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @rocket.chat/api-client
 
+## 0.1.4
+
+### Patch Changes
+
+- @rocket.chat/core-typings@6.3.4
+- @rocket.chat/rest-typings@6.3.4
+
 ## 0.1.3
 
 ### Patch Changes
diff --git a/ee/packages/api-client/package.json b/ee/packages/api-client/package.json
index 488811d73155..987659f45ddf 100644
--- a/ee/packages/api-client/package.json
+++ b/ee/packages/api-client/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/api-client",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"devDependencies": {
 		"@swc/core": "^1.3.66",
 		"@swc/jest": "^0.2.26",
diff --git a/ee/packages/ddp-client/CHANGELOG.md b/ee/packages/ddp-client/CHANGELOG.md
index 6a656d38a488..a4af639fe331 100644
--- a/ee/packages/ddp-client/CHANGELOG.md
+++ b/ee/packages/ddp-client/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @rocket.chat/ddp-client
 
+## 0.1.4
+
+### Patch Changes
+
+- @rocket.chat/rest-typings@6.3.4
+- @rocket.chat/api-client@0.1.4
+
 ## 0.1.3
 
 ### Patch Changes
diff --git a/ee/packages/ddp-client/package.json b/ee/packages/ddp-client/package.json
index 9aeb554005d9..350937874a54 100644
--- a/ee/packages/ddp-client/package.json
+++ b/ee/packages/ddp-client/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/ddp-client",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"devDependencies": {
 		"@swc/core": "^1.3.66",
 		"@swc/jest": "^0.2.26",
diff --git a/ee/packages/omnichannel-services/CHANGELOG.md b/ee/packages/omnichannel-services/CHANGELOG.md
index c141b4205af5..1d7bc3c6daaa 100644
--- a/ee/packages/omnichannel-services/CHANGELOG.md
+++ b/ee/packages/omnichannel-services/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @rocket.chat/omnichannel-services
 
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+  - @rocket.chat/models@0.0.10
+  - @rocket.chat/core-services@0.1.4
+  - @rocket.chat/core-typings@6.3.4
+  - @rocket.chat/rest-typings@6.3.4
+  - @rocket.chat/pdf-worker@0.0.10
+
 ## 0.0.9
 
 ### Patch Changes
diff --git a/ee/packages/omnichannel-services/package.json b/ee/packages/omnichannel-services/package.json
index 27c04e99e7ea..3b85bb71988b 100644
--- a/ee/packages/omnichannel-services/package.json
+++ b/ee/packages/omnichannel-services/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/omnichannel-services",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"private": true,
 	"devDependencies": {
 		"@rocket.chat/eslint-config": "workspace:^",
diff --git a/ee/packages/pdf-worker/CHANGELOG.md b/ee/packages/pdf-worker/CHANGELOG.md
index bf50d15ae71b..7dee5be2c4df 100644
--- a/ee/packages/pdf-worker/CHANGELOG.md
+++ b/ee/packages/pdf-worker/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket.chat/pdf-worker
 
+## 0.0.10
+
+### Patch Changes
+
+- @rocket.chat/core-typings@6.3.4
+
 ## 0.0.9
 
 ### Patch Changes
diff --git a/ee/packages/pdf-worker/package.json b/ee/packages/pdf-worker/package.json
index 5e8324613ad1..a089448057a6 100644
--- a/ee/packages/pdf-worker/package.json
+++ b/ee/packages/pdf-worker/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/pdf-worker",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"private": true,
 	"devDependencies": {
 		"@storybook/addon-essentials": "~6.5.16",
diff --git a/ee/packages/presence/CHANGELOG.md b/ee/packages/presence/CHANGELOG.md
index 1ed57117b68e..c5c3dbaf9adc 100644
--- a/ee/packages/presence/CHANGELOG.md
+++ b/ee/packages/presence/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @rocket.chat/presence
 
+## 0.0.10
+
+### Patch Changes
+
+- @rocket.chat/models@0.0.10
+- @rocket.chat/core-services@0.1.4
+- @rocket.chat/core-typings@6.3.4
+
 ## 0.0.9
 
 ### Patch Changes
diff --git a/ee/packages/presence/package.json b/ee/packages/presence/package.json
index 5f96bf0fde98..18bc8371997b 100644
--- a/ee/packages/presence/package.json
+++ b/ee/packages/presence/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/presence",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"private": true,
 	"devDependencies": {
 		"@babel/core": "~7.22.9",
diff --git a/packages/core-services/CHANGELOG.md b/packages/core-services/CHANGELOG.md
index 07a137608d92..f432cc857e7f 100644
--- a/packages/core-services/CHANGELOG.md
+++ b/packages/core-services/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @rocket.chat/core-services
 
+## 0.1.4
+
+### Patch Changes
+
+- @rocket.chat/models@0.0.10
+- @rocket.chat/core-typings@6.3.4
+- @rocket.chat/rest-typings@6.3.4
+
 ## 0.1.3
 
 ### Patch Changes
diff --git a/packages/core-services/package.json b/packages/core-services/package.json
index d63c525a2782..f9468b62edb3 100644
--- a/packages/core-services/package.json
+++ b/packages/core-services/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/core-services",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"private": true,
 	"devDependencies": {
 		"@babel/core": "~7.22.9",
diff --git a/packages/core-typings/CHANGELOG.md b/packages/core-typings/CHANGELOG.md
index 5e6880b649a4..832aceb8ac06 100644
--- a/packages/core-typings/CHANGELOG.md
+++ b/packages/core-typings/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @rocket.chat/core-typings
 
+## 6.3.4
+
 ## 6.3.3
 
 ## 6.3.2
diff --git a/packages/core-typings/package.json b/packages/core-typings/package.json
index 33c93c28d8a8..b727aa01dcdc 100644
--- a/packages/core-typings/package.json
+++ b/packages/core-typings/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/core-typings",
-	"version": "6.3.3",
+	"version": "6.3.4",
 	"devDependencies": {
 		"@rocket.chat/eslint-config": "workspace:^",
 		"eslint": "~8.45.0",
diff --git a/packages/cron/CHANGELOG.md b/packages/cron/CHANGELOG.md
index 44b205dda1e7..9699a8f01631 100644
--- a/packages/cron/CHANGELOG.md
+++ b/packages/cron/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @rocket.chat/cron
 
+## 0.0.6
+
+### Patch Changes
+
+- @rocket.chat/models@0.0.10
+- @rocket.chat/core-typings@6.3.4
+
 ## 0.0.5
 
 ### Patch Changes
diff --git a/packages/cron/package.json b/packages/cron/package.json
index 396047b3147c..2ef55db12b8a 100644
--- a/packages/cron/package.json
+++ b/packages/cron/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/cron",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"private": true,
 	"devDependencies": {
 		"@types/jest": "~29.5.3",
diff --git a/packages/fuselage-ui-kit/CHANGELOG.md b/packages/fuselage-ui-kit/CHANGELOG.md
index 6d52e9064b16..0ec8fb25ca1f 100644
--- a/packages/fuselage-ui-kit/CHANGELOG.md
+++ b/packages/fuselage-ui-kit/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Change Log
 
+## 1.0.4
+
+### Patch Changes
+
+- @rocket.chat/gazzodown@1.0.4
+- @rocket.chat/ui-contexts@1.0.4
+- @rocket.chat/ui-video-conf@1.0.4
+
 ## 1.0.3
 
 ### Patch Changes
diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
index 0cc50b819e9e..70e9f21727d9 100644
--- a/packages/fuselage-ui-kit/package.json
+++ b/packages/fuselage-ui-kit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@rocket.chat/fuselage-ui-kit",
   "private": true,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "UiKit elements for Rocket.Chat Apps built under Fuselage design system",
   "homepage": "https://rocketchat.github.io/Rocket.Chat.Fuselage/",
   "author": {
@@ -46,9 +46,9 @@
     "@rocket.chat/icons": "*",
     "@rocket.chat/prettier-config": "*",
     "@rocket.chat/styled": "*",
-    "@rocket.chat/ui-contexts": "1.0.3",
+    "@rocket.chat/ui-contexts": "1.0.4",
     "@rocket.chat/ui-kit": "*",
-    "@rocket.chat/ui-video-conf": "1.0.3",
+    "@rocket.chat/ui-video-conf": "1.0.4",
     "@tanstack/react-query": "*",
     "react": "*",
     "react-dom": "*"
diff --git a/packages/gazzodown/CHANGELOG.md b/packages/gazzodown/CHANGELOG.md
index 88c0f11d0cdb..3e208b86242d 100644
--- a/packages/gazzodown/CHANGELOG.md
+++ b/packages/gazzodown/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @rocket.chat/gazzodown
 
+## 1.0.4
+
+### Patch Changes
+
+- @rocket.chat/core-typings@6.3.4
+- @rocket.chat/ui-contexts@1.0.4
+- @rocket.chat/ui-client@1.0.4
+
 ## 1.0.3
 
 ### Patch Changes
diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json
index f71325b37a1c..3e8988200c13 100644
--- a/packages/gazzodown/package.json
+++ b/packages/gazzodown/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/gazzodown",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"private": true,
 	"devDependencies": {
 		"@babel/core": "~7.22.9",
@@ -65,7 +65,7 @@
 		"/dist"
 	],
 	"peerDependencies": {
-		"@rocket.chat/core-typings": "6.3.3",
+		"@rocket.chat/core-typings": "6.3.4",
 		"@rocket.chat/css-in-js": "*",
 		"@rocket.chat/fuselage": "*",
 		"@rocket.chat/fuselage-tokens": "*",
diff --git a/packages/instance-status/CHANGELOG.md b/packages/instance-status/CHANGELOG.md
index 1b5dfc94f624..20b229fbc24c 100644
--- a/packages/instance-status/CHANGELOG.md
+++ b/packages/instance-status/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket.chat/instance-status
 
+## 0.0.10
+
+### Patch Changes
+
+- @rocket.chat/models@0.0.10
+
 ## 0.0.9
 
 ### Patch Changes
diff --git a/packages/instance-status/package.json b/packages/instance-status/package.json
index c36f4e9834e3..d7d8bbb50d46 100644
--- a/packages/instance-status/package.json
+++ b/packages/instance-status/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/instance-status",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"private": true,
 	"devDependencies": {
 		"@rocket.chat/eslint-config": "workspace:^",
diff --git a/packages/model-typings/CHANGELOG.md b/packages/model-typings/CHANGELOG.md
index 1d89b9145bc4..836eb3a1dcc8 100644
--- a/packages/model-typings/CHANGELOG.md
+++ b/packages/model-typings/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @rocket.chat/model-typings
 
+## 0.0.10
+
+### Patch Changes
+
+- 8a7d5d3898: fix: agent role being removed upon user deactivation
+  - @rocket.chat/core-typings@6.3.4
+
 ## 0.0.9
 
 ### Patch Changes
diff --git a/packages/model-typings/package.json b/packages/model-typings/package.json
index 89ee934005cd..bacc3023e5f4 100644
--- a/packages/model-typings/package.json
+++ b/packages/model-typings/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/model-typings",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"private": true,
 	"devDependencies": {
 		"@types/jest": "~29.5.3",
diff --git a/packages/models/CHANGELOG.md b/packages/models/CHANGELOG.md
index c8249a587d15..230aa3158fbd 100644
--- a/packages/models/CHANGELOG.md
+++ b/packages/models/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @rocket.chat/models
 
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [8a7d5d3898]
+  - @rocket.chat/model-typings@0.0.10
+
 ## 0.0.9
 
 ### Patch Changes
diff --git a/packages/models/package.json b/packages/models/package.json
index 0a80a2975ffc..c075c8132582 100644
--- a/packages/models/package.json
+++ b/packages/models/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/models",
-	"version": "0.0.9",
+	"version": "0.0.10",
 	"private": true,
 	"devDependencies": {
 		"@types/jest": "~29.5.3",
diff --git a/packages/rest-typings/CHANGELOG.md b/packages/rest-typings/CHANGELOG.md
index 9c5aa19f1b07..62f05e378e4e 100644
--- a/packages/rest-typings/CHANGELOG.md
+++ b/packages/rest-typings/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket.chat/rest-typings
 
+## 6.3.4
+
+### Patch Changes
+
+- @rocket.chat/core-typings@6.3.4
+
 ## 6.3.3
 
 ### Patch Changes
diff --git a/packages/rest-typings/package.json b/packages/rest-typings/package.json
index acb2cb635414..45bb773b7dee 100644
--- a/packages/rest-typings/package.json
+++ b/packages/rest-typings/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/rest-typings",
-	"version": "6.3.3",
+	"version": "6.3.4",
 	"devDependencies": {
 		"@rocket.chat/eslint-config": "workspace:^",
 		"@types/jest": "~29.5.3",
diff --git a/packages/ui-client/CHANGELOG.md b/packages/ui-client/CHANGELOG.md
index 497a40137ee5..fa6ebadcedfa 100644
--- a/packages/ui-client/CHANGELOG.md
+++ b/packages/ui-client/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket.chat/ui-client
 
+## 1.0.4
+
+### Patch Changes
+
+- @rocket.chat/ui-contexts@1.0.4
+
 ## 1.0.3
 
 ### Patch Changes
diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json
index 4bc9a7d8c681..adf07e87c9a0 100644
--- a/packages/ui-client/package.json
+++ b/packages/ui-client/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/ui-client",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"private": true,
 	"devDependencies": {
 		"@babel/core": "~7.22.9",
@@ -61,7 +61,7 @@
 		"@rocket.chat/fuselage": "*",
 		"@rocket.chat/fuselage-hooks": "*",
 		"@rocket.chat/icons": "*",
-		"@rocket.chat/ui-contexts": "1.0.3",
+		"@rocket.chat/ui-contexts": "1.0.4",
 		"react": "~17.0.2"
 	},
 	"volta": {
diff --git a/packages/ui-client/src/components/Card/Card.stories.tsx b/packages/ui-client/src/components/Card/Card.stories.tsx
index 4697443e9259..56a2220219ed 100644
--- a/packages/ui-client/src/components/Card/Card.stories.tsx
+++ b/packages/ui-client/src/components/Card/Card.stories.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
-import Card from '.';
+import { Card, CardBody, CardCol, CardColSection, CardColTitle, CardDivider, CardFooter, CardIcon, CardTitle } from '.';
 import TextSeparator from '../TextSeparator';
 import { UserStatus } from '../UserStatus';
 
@@ -9,13 +9,13 @@ export default {
 	title: 'Components/Card',
 	component: Card,
 	subcomponents: {
-		'Card.Title': Card.Title,
-		'Card.Body': Card.Body,
-		'Card.Col': Card.Col,
-		'Card.Col.Section': Card.Col.Section,
-		'Card.Col.Title': Card.Col.Title,
-		'Card.Footer': Card.Footer,
-		'Card.Divider': Card.Divider,
+		CardTitle,
+		CardBody,
+		CardCol,
+		CardColSection,
+		CardColTitle,
+		CardFooter,
+		CardDivider,
 	},
 	parameters: {
 		layout: 'centered',
@@ -25,14 +25,14 @@ export default {
 
 export const Example: ComponentStory<typeof Card> = () => (
 	<Card>
-		<Card.Title>Usage</Card.Title>
-		<Card.Body flexDirection='column'>
-			<Card.Col.Section>
-				<Card.Col.Title>Users</Card.Col.Title>
+		<CardTitle>Usage</CardTitle>
+		<CardBody flexDirection='column'>
+			<CardColSection>
+				<CardColTitle>Users</CardColTitle>
 				<TextSeparator
 					label={
 						<>
-							<Card.Icon name='dialpad' /> Total
+							<CardIcon name='dialpad' /> Total
 						</>
 					}
 					value={123}
@@ -40,9 +40,9 @@ export const Example: ComponentStory<typeof Card> = () => (
 				<TextSeparator
 					label={
 						<>
-							<Card.Icon>
+							<CardIcon>
 								<UserStatus status='online' />
-							</Card.Icon>{' '}
+							</CardIcon>{' '}
 							Online
 						</>
 					}
@@ -51,9 +51,9 @@ export const Example: ComponentStory<typeof Card> = () => (
 				<TextSeparator
 					label={
 						<>
-							<Card.Icon>
+							<CardIcon>
 								<UserStatus status='busy' />
-							</Card.Icon>{' '}
+							</CardIcon>{' '}
 							Busy
 						</>
 					}
@@ -62,9 +62,9 @@ export const Example: ComponentStory<typeof Card> = () => (
 				<TextSeparator
 					label={
 						<>
-							<Card.Icon>
+							<CardIcon>
 								<UserStatus status='away' />
-							</Card.Icon>{' '}
+							</CardIcon>{' '}
 							Away
 						</>
 					}
@@ -73,111 +73,111 @@ export const Example: ComponentStory<typeof Card> = () => (
 				<TextSeparator
 					label={
 						<>
-							<Card.Icon>
+							<CardIcon>
 								<UserStatus status='offline' />
-							</Card.Icon>{' '}
+							</CardIcon>{' '}
 							Offline
 						</>
 					}
 					value={123}
 				/>
-			</Card.Col.Section>
-			<Card.Col.Section>
-				<Card.Col.Title>Types and Distribution</Card.Col.Title>
+			</CardColSection>
+			<CardColSection>
+				<CardColTitle>Types and Distribution</CardColTitle>
 				<TextSeparator label='Connected' value={123} />
 				<TextSeparator label='Active Users' value={123} />
 				<TextSeparator label='Active Guests' value={123} />
 				<TextSeparator label='Non-Active Users' value={123} />
 				<TextSeparator label='App Users' value={123} />
-			</Card.Col.Section>
-			<Card.Col.Section>
-				<Card.Col.Title>Uploads</Card.Col.Title>
+			</CardColSection>
+			<CardColSection>
+				<CardColTitle>Uploads</CardColTitle>
 				<TextSeparator label='Total Uploads' value={123} />
 				<TextSeparator label='Total Uploads (size)' value='123 GB' />
-			</Card.Col.Section>
-		</Card.Body>
+			</CardColSection>
+		</CardBody>
 	</Card>
 );
 
 export const Single: ComponentStory<typeof Card> = () => (
 	<Card>
-		<Card.Title>A card</Card.Title>
-		<Card.Body>
-			<Card.Col>
+		<CardTitle>A card</CardTitle>
+		<CardBody>
+			<CardCol>
 				<Box>
-					<Card.Col.Title>A Section</Card.Col.Title>
+					<CardColTitle>A Section</CardColTitle>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 				</Box>
 				<Box>
-					<Card.Col.Title>Another Section</Card.Col.Title>
+					<CardColTitle>Another Section</CardColTitle>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 				</Box>
-			</Card.Col>
-		</Card.Body>
-		<Card.Footer>
+			</CardCol>
+		</CardBody>
+		<CardFooter>
 			<ButtonGroup align='end'>
 				<Button small>I'm a button in a footer</Button>
 			</ButtonGroup>
-		</Card.Footer>
+		</CardFooter>
 	</Card>
 );
 
 export const Double: ComponentStory<typeof Card> = () => (
 	<Card>
-		<Card.Title>A card</Card.Title>
-		<Card.Body>
-			<Card.Col>
+		<CardTitle>A card</CardTitle>
+		<CardBody>
+			<CardCol>
 				<Box>
-					<Card.Col.Title>A Section</Card.Col.Title>
+					<CardColTitle>A Section</CardColTitle>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 				</Box>
 				<Box>
-					<Card.Col.Title>Another Section</Card.Col.Title>
+					<CardColTitle>Another Section</CardColTitle>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 				</Box>
-			</Card.Col>
-			<Card.Divider />
-			<Card.Col>
+			</CardCol>
+			<CardDivider />
+			<CardCol>
 				<Box>
-					<Card.Col.Title>A Section</Card.Col.Title>
+					<CardColTitle>A Section</CardColTitle>
 					<Box display='flex' flexDirection='row' alignItems='center'>
-						<Card.Icon name='document-eye' />A bunch of stuff
+						<CardIcon name='document-eye' />A bunch of stuff
 					</Box>
 					<Box display='flex' flexDirection='row' alignItems='center'>
-						<Card.Icon name='pencil' />A bunch of stuff
+						<CardIcon name='pencil' />A bunch of stuff
 					</Box>
 					<Box display='flex' flexDirection='row' alignItems='center'>
-						<Card.Icon name='cross' />A bunch of stuff
+						<CardIcon name='cross' />A bunch of stuff
 					</Box>
 					<Box display='flex' flexDirection='row' alignItems='center'>
-						<Card.Icon name='dialpad' />A bunch of stuff
+						<CardIcon name='dialpad' />A bunch of stuff
 					</Box>
 				</Box>
 				<Box>
-					<Card.Col.Title>Another Section</Card.Col.Title>
+					<CardColTitle>Another Section</CardColTitle>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 					<div>A bunch of stuff</div>
 				</Box>
-			</Card.Col>
-		</Card.Body>
-		<Card.Footer>
+			</CardCol>
+		</CardBody>
+		<CardFooter>
 			<ButtonGroup align='end'>
 				<Button small>I'm a button in a footer</Button>
 			</ButtonGroup>
-		</Card.Footer>
+		</CardFooter>
 	</Card>
 );
diff --git a/packages/ui-client/src/components/Card/index.ts b/packages/ui-client/src/components/Card/index.ts
index ade5391e61d6..76df65e5a809 100644
--- a/packages/ui-client/src/components/Card/index.ts
+++ b/packages/ui-client/src/components/Card/index.ts
@@ -1,30 +1,10 @@
-import Card from './Card';
-import CardBody from './CardBody';
-import CardCol from './CardCol';
-import CardColSection from './CardColSection';
-import CardColTitle from './CardColTitle';
-import CardDivider from './CardDivider';
-import CardFooter from './CardFooter';
-import CardFooterWrapper from './CardFooterWrapper';
-import CardIcon from './CardIcon';
-import CardTitle from './CardTitle';
-
-export const DOUBLE_COLUMN_CARD_WIDTH = 552;
-
-/**
- * @deprecated Avoid default usage, use named imports instead
- */
-export default Object.assign(Card, {
-	Title: CardTitle,
-	Body: CardBody,
-	Col: Object.assign(CardCol, {
-		Title: CardColTitle,
-		Section: CardColSection,
-	}),
-	Footer: CardFooter,
-	FooterWrapper: CardFooterWrapper,
-	Divider: CardDivider,
-	Icon: CardIcon,
-});
-
-export { Card, CardBody, CardCol, CardColSection, CardColTitle, CardDivider, CardFooter, CardFooterWrapper, CardIcon, CardTitle };
+export { default as Card } from './Card';
+export { default as CardBody } from './CardBody';
+export { default as CardCol } from './CardCol';
+export { default as CardColSection } from './CardColSection';
+export { default as CardColTitle } from './CardColTitle';
+export { default as CardDivider } from './CardDivider';
+export { default as CardFooter } from './CardFooter';
+export { default as CardFooterWrapper } from './CardFooterWrapper';
+export { default as CardIcon } from './CardIcon';
+export { default as CardTitle } from './CardTitle';
diff --git a/packages/ui-client/src/components/index.ts b/packages/ui-client/src/components/index.ts
index 6448f37b3e68..3de4bf411a5e 100644
--- a/packages/ui-client/src/components/index.ts
+++ b/packages/ui-client/src/components/index.ts
@@ -7,7 +7,7 @@ export * from '../hooks/useValidatePassword';
 export { default as TextSeparator } from './TextSeparator';
 export * from './TooltipComponent';
 export * as UserStatus from './UserStatus';
-export { default as Card } from './Card';
+export * from './Card';
 export * from './Header';
 export * from './MultiSelectCustom/MultiSelectCustom';
 export * from './FeaturePreview/FeaturePreview';
diff --git a/packages/ui-contexts/CHANGELOG.md b/packages/ui-contexts/CHANGELOG.md
index 0be8b831d56b..af1cef5bcba6 100644
--- a/packages/ui-contexts/CHANGELOG.md
+++ b/packages/ui-contexts/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @rocket.chat/ui-contexts
 
+## 1.0.4
+
+### Patch Changes
+
+- @rocket.chat/core-typings@6.3.4
+- @rocket.chat/rest-typings@6.3.4
+- @rocket.chat/ddp-client@0.1.4
+
 ## 1.0.3
 
 ### Patch Changes
diff --git a/packages/ui-contexts/package.json b/packages/ui-contexts/package.json
index aff54e877f57..fd262b4a66fc 100644
--- a/packages/ui-contexts/package.json
+++ b/packages/ui-contexts/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/ui-contexts",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"private": true,
 	"devDependencies": {
 		"@rocket.chat/core-typings": "workspace:^",
diff --git a/packages/ui-video-conf/CHANGELOG.md b/packages/ui-video-conf/CHANGELOG.md
index b5408f61908a..114a6fe5d3ca 100644
--- a/packages/ui-video-conf/CHANGELOG.md
+++ b/packages/ui-video-conf/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket.chat/ui-video-conf
 
+## 1.0.4
+
+### Patch Changes
+
+- @rocket.chat/ui-contexts@1.0.4
+
 ## 1.0.3
 
 ### Patch Changes
diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json
index c2ce9e393647..00106886a26e 100644
--- a/packages/ui-video-conf/package.json
+++ b/packages/ui-video-conf/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/ui-video-conf",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"private": true,
 	"devDependencies": {
 		"@babel/core": "~7.22.9",
@@ -35,7 +35,7 @@
 		"@rocket.chat/fuselage-hooks": "*",
 		"@rocket.chat/icons": "*",
 		"@rocket.chat/styled": "*",
-		"@rocket.chat/ui-contexts": "1.0.3",
+		"@rocket.chat/ui-contexts": "1.0.4",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2"
 	},
diff --git a/packages/uikit-playground/CHANGELOG.md b/packages/uikit-playground/CHANGELOG.md
index 852e0fe95baf..fd1c5f2f689b 100644
--- a/packages/uikit-playground/CHANGELOG.md
+++ b/packages/uikit-playground/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @rocket.chat/uikit-playground
 
+## 0.1.4
+
+### Patch Changes
+
+- @rocket.chat/ui-contexts@1.0.4
+- @rocket.chat/fuselage-ui-kit@1.0.4
+
 ## 0.1.3
 
 ### Patch Changes
diff --git a/packages/uikit-playground/package.json b/packages/uikit-playground/package.json
index c32f476697cf..78bbf2fb6a3a 100644
--- a/packages/uikit-playground/package.json
+++ b/packages/uikit-playground/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@rocket.chat/uikit-playground",
   "private": true,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/packages/web-ui-registration/CHANGELOG.md b/packages/web-ui-registration/CHANGELOG.md
index cf000c3483bc..e89a16f355fb 100644
--- a/packages/web-ui-registration/CHANGELOG.md
+++ b/packages/web-ui-registration/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @rocket.chat/web-ui-registration
 
+## 1.0.4
+
+### Patch Changes
+
+- @rocket.chat/ui-contexts@1.0.4
+
 ## 1.0.3
 
 ### Patch Changes
diff --git a/packages/web-ui-registration/package.json b/packages/web-ui-registration/package.json
index a6e7332c948f..f6727baaac37 100644
--- a/packages/web-ui-registration/package.json
+++ b/packages/web-ui-registration/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@rocket.chat/web-ui-registration",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"private": true,
 	"homepage": "https://rocket.chat",
 	"main": "./dist/index.js",
@@ -49,7 +49,7 @@
 	},
 	"peerDependencies": {
 		"@rocket.chat/layout": "*",
-		"@rocket.chat/ui-contexts": "1.0.3",
+		"@rocket.chat/ui-contexts": "1.0.4",
 		"@tanstack/react-query": "*",
 		"react": "*",
 		"react-hook-form": "*",
diff --git a/packages/web-ui-registration/src/LoginForm.tsx b/packages/web-ui-registration/src/LoginForm.tsx
index 832959f9125e..112139a483e6 100644
--- a/packages/web-ui-registration/src/LoginForm.tsx
+++ b/packages/web-ui-registration/src/LoginForm.tsx
@@ -3,9 +3,8 @@ import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { Form, ActionLink } from '@rocket.chat/layout';
 import { useLoginWithPassword, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
-import type { UseMutationResult } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -13,14 +12,38 @@ import EmailConfirmationForm from './EmailConfirmationForm';
 import LoginServices from './LoginServices';
 import type { DispatchLoginRouter } from './hooks/useLoginRouter';
 
-export type LoginErrors =
-	| 'error-user-is-not-activated'
-	| 'error-invalid-email'
-	| 'error-login-blocked-for-ip'
-	| 'error-login-blocked-for-user'
-	| 'error-license-user-limit-reached'
-	| 'user-not-found'
-	| 'error-app-user-is-not-allowed-to-login';
+const LOGIN_SUBMIT_ERRORS = {
+	'error-user-is-not-activated': {
+		type: 'warning',
+		i18n: 'registration.page.registration.waitActivationWarning',
+	},
+	'error-app-user-is-not-allowed-to-login': {
+		type: 'danger',
+		i18n: 'registration.page.login.errors.AppUserNotAllowedToLogin',
+	},
+	'user-not-found': {
+		type: 'danger',
+		i18n: 'registration.page.login.errors.wrongCredentials',
+	},
+	'error-login-blocked-for-ip': {
+		type: 'danger',
+		i18n: 'registration.page.login.errors.loginBlockedForIp',
+	},
+	'error-login-blocked-for-user': {
+		type: 'danger',
+		i18n: 'registration.page.login.errors.loginBlockedForUser',
+	},
+	'error-license-user-limit-reached': {
+		type: 'warning',
+		i18n: 'registration.page.login.errors.licenseUserLimitReached',
+	},
+	'error-invalid-email': {
+		type: 'danger',
+		i18n: 'registration.page.login.errors.invalidEmail',
+	},
+} as const;
+
+export type LoginErrors = keyof typeof LOGIN_SUBMIT_ERRORS;
 
 export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRouter }): ReactElement => {
 	const {
@@ -30,12 +53,8 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 		clearErrors,
 		getValues,
 		formState: { errors },
-	} = useForm<{
-		email?: string;
-		username: string;
-		password: string;
-	}>({
-		mode: 'onChange',
+	} = useForm<{ username: string; password: string }>({
+		mode: 'onBlur',
 	});
 
 	const { t } = useTranslation();
@@ -48,21 +67,13 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 	const usernameOrEmailPlaceholder = String(useSetting('Accounts_EmailOrUsernamePlaceholder'));
 	const passwordPlaceholder = String(useSetting('Accounts_PasswordPlaceholder'));
 
-	const loginMutation: UseMutationResult<
-		void,
-		Error,
-		{
-			username: string;
-			password: string;
-			email?: string;
-		}
-	> = useMutation({
-		mutationFn: (formData) => {
+	const loginMutation = useMutation({
+		mutationFn: (formData: { username: string; password: string }) => {
 			return login(formData.username, formData.password);
 		},
 		onError: (error: any) => {
 			if ([error.error, error.errorType].includes('error-invalid-email')) {
-				setError('email', { type: 'invalid-email', message: t('registration.page.login.errors.invalidEmail') });
+				setError('username', { type: 'invalid-email', message: t('registration.page.login.errors.invalidEmail') });
 			}
 
 			if ('error' in error && error.error !== 403) {
@@ -76,20 +87,32 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 		},
 	});
 
-	if (errors.email?.type === 'invalid-email') {
-		return <EmailConfirmationForm onBackToLogin={() => clearErrors('email')} email={getValues('email')} />;
+	const usernameId = useUniqueId();
+	const passwordId = useUniqueId();
+	const loginFormRef = useRef<HTMLElement>(null);
+
+	useEffect(() => {
+		if (loginFormRef.current) {
+			loginFormRef.current.focus();
+		}
+	}, []);
+
+	const renderErrorOnSubmit = (error: LoginErrors) => {
+		const { type, i18n } = LOGIN_SUBMIT_ERRORS[error];
+		return <Callout type={type}>{i18n}</Callout>;
+	};
+
+	if (errors.username?.type === 'invalid-email') {
+		return <EmailConfirmationForm onBackToLogin={() => clearErrors('username')} email={getValues('username')} />;
 	}
 
 	return (
 		<Form
+			tabIndex={-1}
+			ref={loginFormRef}
 			aria-labelledby={formLabelId}
-			onSubmit={handleSubmit(async (data) => {
-				if (loginMutation.isLoading) {
-					return;
-				}
-
-				loginMutation.mutate(data);
-			})}
+			aria-describedby='welcomeTitle'
+			onSubmit={handleSubmit(async (data) => loginMutation.mutate(data))}
 		>
 			<Form.Header>
 				<Form.Title id={formLabelId}>{t('registration.component.login')}</Form.Title>
@@ -99,50 +122,47 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 					<Form.Container>
 						<FieldGroup disabled={loginMutation.isLoading}>
 							<Field>
-								<Field.Label htmlFor='username'>{t('registration.component.form.emailOrUsername')}</Field.Label>
+								<Field.Label required htmlFor={usernameId}>
+									{t('registration.component.form.emailOrUsername')}
+								</Field.Label>
 								<Field.Row>
 									<TextInput
 										{...register('username', {
-											required: true,
-											onChange: () => {
-												clearErrors(['username', 'password']);
-											},
+											required: t('registration.component.form.requiredField'),
 										})}
 										placeholder={usernameOrEmailPlaceholder || t('registration.component.form.emailPlaceholder')}
-										error={
-											errors.username?.message ||
-											(errors.username?.type === 'required' ? t('registration.component.form.requiredField') : undefined)
-										}
+										error={errors.username?.message}
 										aria-invalid={errors.username ? 'true' : 'false'}
-										id='username'
+										aria-describedby={`${usernameId}-error`}
+										id={usernameId}
 									/>
 								</Field.Row>
-								{errors.username && errors.username.type === 'required' && (
-									<Field.Error>{t('registration.component.form.requiredField')}</Field.Error>
+								{errors.username && (
+									<Field.Error aria-live='assertive' id={`${usernameId}-error`}>
+										{errors.username.message}
+									</Field.Error>
 								)}
 							</Field>
-
 							<Field>
-								<Field.Label htmlFor='password'>{t('registration.component.form.password')}</Field.Label>
+								<Field.Label required htmlFor={passwordId}>
+									{t('registration.component.form.password')}
+								</Field.Label>
 								<Field.Row>
 									<PasswordInput
 										{...register('password', {
-											required: true,
-											onChange: () => {
-												clearErrors(['username', 'password']);
-											},
+											required: t('registration.component.form.requiredField'),
 										})}
 										placeholder={passwordPlaceholder}
-										error={
-											errors.password?.message ||
-											(errors.password?.type === 'required' ? t('registration.component.form.requiredField') : undefined)
-										}
+										error={errors.password?.message}
 										aria-invalid={errors.password ? 'true' : 'false'}
-										id='password'
+										aria-describedby={`${passwordId}-error`}
+										id={passwordId}
 									/>
 								</Field.Row>
-								{errors.password && errors.password.type === 'required' && (
-									<Field.Error>{t('registration.component.form.requiredField')}</Field.Error>
+								{errors.password && (
+									<Field.Error aria-live='assertive' id={`${passwordId}-error`}>
+										{errors.password.message}
+									</Field.Error>
 								)}
 								{isResetPasswordAllowed && (
 									<Field.Row justifyContent='end'>
@@ -159,31 +179,7 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 								)}
 							</Field>
 						</FieldGroup>
-						<FieldGroup disabled={loginMutation.isLoading}>
-							{errorOnSubmit === 'error-user-is-not-activated' && (
-								<Callout type='warning'>{t('registration.page.registration.waitActivationWarning')}</Callout>
-							)}
-
-							{errorOnSubmit === 'error-app-user-is-not-allowed-to-login' && (
-								<Callout type='danger'>{t('registration.page.login.errors.AppUserNotAllowedToLogin')}</Callout>
-							)}
-
-							{errorOnSubmit === 'user-not-found' && (
-								<Callout type='danger'>{t('registration.page.login.errors.wrongCredentials')}</Callout>
-							)}
-
-							{errorOnSubmit === 'error-login-blocked-for-ip' && (
-								<Callout type='danger'>{t('registration.page.login.errors.loginBlockedForIp')}</Callout>
-							)}
-
-							{errorOnSubmit === 'error-login-blocked-for-user' && (
-								<Callout type='danger'>{t('registration.page.login.errors.loginBlockedForUser')}</Callout>
-							)}
-
-							{errorOnSubmit === 'error-license-user-limit-reached' && (
-								<Callout type='warning'>{t('registration.page.login.errors.licenseUserLimitReached')}</Callout>
-							)}
-						</FieldGroup>
+						{errorOnSubmit && <FieldGroup disabled={loginMutation.isLoading}>{renderErrorOnSubmit(errorOnSubmit)}</FieldGroup>}
 					</Form.Container>
 					<Form.Footer>
 						<ButtonGroup stretch>
diff --git a/packages/web-ui-registration/src/RegisterForm.tsx b/packages/web-ui-registration/src/RegisterForm.tsx
index 32ba9238766d..eb0aa7229f6d 100644
--- a/packages/web-ui-registration/src/RegisterForm.tsx
+++ b/packages/web-ui-registration/src/RegisterForm.tsx
@@ -5,7 +5,7 @@ import { Form, ActionLink } from '@rocket.chat/layout';
 import { CustomFieldsForm, PasswordVerifier, useValidatePassword } from '@rocket.chat/ui-client';
 import { useAccountsCustomFields, useSetting, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -63,6 +63,14 @@ export const RegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRo
 	const { password } = watch();
 	const passwordIsValid = useValidatePassword(password);
 
+	const registerFormRef = useRef<HTMLElement>(null);
+
+	useEffect(() => {
+		if (registerFormRef.current) {
+			registerFormRef.current.focus();
+		}
+	}, []);
+
 	const handleRegister = async ({ password, passwordConfirmation: _, ...formData }: LoginRegisterPayload) => {
 		registerUser.mutate(
 			{ pass: password, ...formData },
@@ -102,7 +110,13 @@ export const RegisterForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRo
 	}
 
 	return (
-		<Form aria-labelledby={formLabelId} onSubmit={handleSubmit(handleRegister)}>
+		<Form
+			tabIndex={-1}
+			ref={registerFormRef}
+			aria-labelledby={formLabelId}
+			aria-describedby='welcomeTitle'
+			onSubmit={handleSubmit(handleRegister)}
+		>
 			<Form.Header>
 				<Form.Title id={formLabelId}>{t('registration.component.form.createAnAccount')}</Form.Title>
 			</Form.Header>
diff --git a/packages/web-ui-registration/src/RegisterTemplate.tsx b/packages/web-ui-registration/src/RegisterTemplate.tsx
index 9afaac8816d5..9b50c176cef2 100644
--- a/packages/web-ui-registration/src/RegisterTemplate.tsx
+++ b/packages/web-ui-registration/src/RegisterTemplate.tsx
@@ -1,16 +1,18 @@
 import { useSetting } from '@rocket.chat/ui-contexts';
-import type { ReactElement } from 'react';
+import type { AllHTMLAttributes } from 'react';
 
 import HorizontalTemplate from './template/HorizontalTemplate';
 import VerticalTemplate from './template/VerticalTemplate';
 
-const RegisterTemplate = ({ children }: { children: ReactElement }): ReactElement => {
+const RegisterTemplate = ({ children, ...props }: AllHTMLAttributes<HTMLElement>) => {
 	const template = useSetting<'vertical-template' | 'horizontal-template'>('Layout_Login_Template');
 
-	if (template === 'vertical-template') {
-		return <VerticalTemplate>{children}</VerticalTemplate>;
-	}
-	return <HorizontalTemplate>{children}</HorizontalTemplate>;
+	return (
+		<main>
+			{template === 'vertical-template' && <VerticalTemplate {...props} children={children} />}
+			{template === 'horizontal-template' && <HorizontalTemplate {...props} children={children} />}
+		</main>
+	);
 };
 
 export default RegisterTemplate;
diff --git a/packages/web-ui-registration/src/components/RegisterTitle.tsx b/packages/web-ui-registration/src/components/RegisterTitle.tsx
index e00e010fd674..2a8dea17206c 100644
--- a/packages/web-ui-registration/src/components/RegisterTitle.tsx
+++ b/packages/web-ui-registration/src/components/RegisterTitle.tsx
@@ -9,5 +9,10 @@ export const RegisterTitle = (): ReactElement | null => {
 	if (hideTitle) {
 		return null;
 	}
-	return <Trans i18nKey='registration.component.welcome'>Welcome to {siteName} workspace</Trans>;
+
+	return (
+		<span id='welcomeTitle'>
+			<Trans i18nKey='registration.component.welcome'>Welcome to {siteName} workspace</Trans>
+		</span>
+	);
 };
diff --git a/packages/web-ui-registration/src/template/HorizontalTemplate.tsx b/packages/web-ui-registration/src/template/HorizontalTemplate.tsx
index 197091928086..6fd11618746f 100644
--- a/packages/web-ui-registration/src/template/HorizontalTemplate.tsx
+++ b/packages/web-ui-registration/src/template/HorizontalTemplate.tsx
@@ -5,7 +5,6 @@ import {
 	HorizontalWizardLayoutContent,
 	HorizontalWizardLayoutTitle,
 	HorizontalWizardLayoutFooter,
-	HorizontalWizardLayoutDescription,
 } from '@rocket.chat/layout';
 import { useSetting, useAssetWithDarkModePath } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ReactNode } from 'react';
@@ -29,9 +28,7 @@ const HorizontalTemplate = ({ children }: { children: ReactNode }): ReactElement
 				<HorizontalWizardLayoutTitle>
 					<RegisterTitle />
 				</HorizontalWizardLayoutTitle>
-				<HorizontalWizardLayoutDescription>
-					<LoginPoweredBy />
-				</HorizontalWizardLayoutDescription>
+				<LoginPoweredBy />
 			</HorizontalWizardLayoutAside>
 			<HorizontalWizardLayoutContent>
 				{children}