diff --git a/.changeset/chilled-chicken-drop.md b/.changeset/chilled-chicken-drop.md
new file mode 100644
index 0000000000000..139b3c00c82dd
--- /dev/null
+++ b/.changeset/chilled-chicken-drop.md
@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": patch
+"@rocket.chat/ddp-streamer": patch
+---
+
+Adds deprecation warning on `livechat:setupConnection`
diff --git a/.changeset/clever-cycles-sing.md b/.changeset/clever-cycles-sing.md
new file mode 100644
index 0000000000000..d52d892103f1d
--- /dev/null
+++ b/.changeset/clever-cycles-sing.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Adds deprecation warning on `sendFileLivechatMessage`
diff --git a/.changeset/lemon-kings-approve.md b/.changeset/lemon-kings-approve.md
new file mode 100644
index 0000000000000..1a6999c545273
--- /dev/null
+++ b/.changeset/lemon-kings-approve.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where messages are not being translated immediately in omnichannel rooms
diff --git a/.changeset/rare-schools-laugh.md b/.changeset/rare-schools-laugh.md
new file mode 100644
index 0000000000000..69cd0af9040d6
--- /dev/null
+++ b/.changeset/rare-schools-laugh.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixes real-time monitoring displaying incorrect data
diff --git a/.changeset/slow-tomatoes-try.md b/.changeset/slow-tomatoes-try.md
new file mode 100644
index 0000000000000..91b762e4f8bf6
--- /dev/null
+++ b/.changeset/slow-tomatoes-try.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where pagination is not working properly in “users in role” table
diff --git a/apps/meteor/app/autotranslate/client/lib/autotranslate.ts b/apps/meteor/app/autotranslate/client/lib/autotranslate.ts
index 3cea977c8b4e4..76b45d04e18fa 100644
--- a/apps/meteor/app/autotranslate/client/lib/autotranslate.ts
+++ b/apps/meteor/app/autotranslate/client/lib/autotranslate.ts
@@ -148,7 +148,6 @@ export const createAutoTranslateMessageStreamHandler = (): ((message: ITranslate
 					(record) => record._id === message._id,
 					({ autoTranslateFetching: _, ...record }) => ({
 						...record,
-						autoTranslateShowInverse: true,
 					}),
 				);
 				delete AutoTranslate.messageIdsToWait[message._id];
diff --git a/apps/meteor/app/livechat/client/lib/chartHandler.ts b/apps/meteor/app/livechat/client/lib/chartHandler.ts
index 55f4baafd5924..9e86c5d323513 100644
--- a/apps/meteor/app/livechat/client/lib/chartHandler.ts
+++ b/apps/meteor/app/livechat/client/lib/chartHandler.ts
@@ -209,3 +209,12 @@ export const updateChart = async <TChartType extends chartjs.ChartType>(
 
 	chart.update();
 };
+
+export const resetChart = <TChartType extends chartjs.ChartType>(chart: chartjs.Chart<TChartType>): void => {
+	chart.data.labels = [];
+	chart.data.datasets.forEach((dataset) => {
+		dataset.data = [];
+	});
+
+	chart.update();
+};
diff --git a/apps/meteor/app/livechat/server/methods/sendFileLivechatMessage.ts b/apps/meteor/app/livechat/server/methods/sendFileLivechatMessage.ts
index ef12cf728c733..7369cd450a6b9 100644
--- a/apps/meteor/app/livechat/server/methods/sendFileLivechatMessage.ts
+++ b/apps/meteor/app/livechat/server/methods/sendFileLivechatMessage.ts
@@ -13,6 +13,7 @@ import { Meteor } from 'meteor/meteor';
 
 import { sendMessageLivechat } from './sendMessageLivechat';
 import { FileUpload } from '../../../file-upload/server';
+import { methodDeprecationLogger } from '../../../lib/server/lib/deprecationWarningLogger';
 
 interface ISendFileLivechatMessage {
 	roomId: string;
@@ -112,6 +113,7 @@ export const sendFileLivechatMessage = async ({ roomId, visitorToken, file, msgD
 
 Meteor.methods<ServerMethods>({
 	async sendFileLivechatMessage(roomId, visitorToken, file, msgData = {}) {
+		methodDeprecationLogger.method('sendFileLivechatMessage', '8.0.0', '/v1/livechat/upload/:rid');
 		return sendFileLivechatMessage({ roomId, visitorToken, file, msgData });
 	},
 });
diff --git a/apps/meteor/app/livechat/server/methods/setUpConnection.ts b/apps/meteor/app/livechat/server/methods/setUpConnection.ts
index d6f05c9af03f1..4aea4caa7c6fd 100644
--- a/apps/meteor/app/livechat/server/methods/setUpConnection.ts
+++ b/apps/meteor/app/livechat/server/methods/setUpConnection.ts
@@ -3,6 +3,7 @@ import type { ServerMethods } from '@rocket.chat/ddp-client';
 import { check } from 'meteor/check';
 import { Meteor } from 'meteor/meteor';
 
+import { methodDeprecationLogger } from '../../../lib/server/lib/deprecationWarningLogger';
 import { notifyGuestStatusChanged } from '../lib/guests';
 
 declare module '@rocket.chat/ddp-client' {
@@ -24,6 +25,7 @@ declare module 'meteor/meteor' {
 
 Meteor.methods<ServerMethods>({
 	'livechat:setUpConnection'(data) {
+		methodDeprecationLogger.method('livechat:setUpConnection', '8.0.0', 'This functionality is no longer supported');
 		check(data, {
 			token: String,
 		});
diff --git a/apps/meteor/client/components/GenericTable/hooks/usePagination.ts b/apps/meteor/client/components/GenericTable/hooks/usePagination.ts
index 803752fda45ef..f7723283fd7ee 100644
--- a/apps/meteor/client/components/GenericTable/hooks/usePagination.ts
+++ b/apps/meteor/client/components/GenericTable/hooks/usePagination.ts
@@ -5,6 +5,9 @@ import { useItemsPerPage } from './useItemsPerPage';
 import { useItemsPerPageLabel } from './useItemsPerPageLabel';
 import { useShowingResultsLabel } from './useShowingResultsLabel';
 
+/**
+ * TODO: Move `usePagination` outside from `GenericTable` folder
+ */
 export const usePagination = (): {
 	current: ReturnType<typeof useCurrent>[0];
 	setCurrent: ReturnType<typeof useCurrent>[1];
diff --git a/apps/meteor/client/components/UserInfo/UserInfo.spec.tsx b/apps/meteor/client/components/UserInfo/UserInfo.spec.tsx
new file mode 100644
index 0000000000000..6e2c772e368a3
--- /dev/null
+++ b/apps/meteor/client/components/UserInfo/UserInfo.spec.tsx
@@ -0,0 +1,18 @@
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './UserInfo.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />);
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />);
+
+	const results = await axe(container);
+	expect(results).toHaveNoViolations();
+});
diff --git a/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx b/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx
index d6bd2cf662e1d..9e76aa0064590 100644
--- a/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfo.stories.tsx
@@ -1,8 +1,9 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Contextualbar } from '../Contextualbar';
+import { ContextualbarDialog } from '../Contextualbar';
 import * as Status from '../UserStatus';
 import UserInfo from './UserInfo';
+import { UserCardRole } from '../UserCard';
 
 export default {
 	component: UserInfo,
@@ -10,32 +11,32 @@ export default {
 		layout: 'fullscreen',
 		actions: { argTypesRegex: '^on.*' },
 	},
-	decorators: [(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>],
+	decorators: [
+		(fn) => (
+			<ContextualbarDialog aria-label='User Info' height='100vh'>
+				{fn()}
+			</ContextualbarDialog>
+		),
+	],
 } satisfies Meta<typeof UserInfo>;
 
-const Template: StoryFn<typeof UserInfo> = (args) => <UserInfo {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
+const defaultArgs = {
 	name: 'Guilherme Gazzo',
 	username: 'guilherme.gazzo',
+	nickname: 'gazzo',
 	statusText: '🛴 currently working on User Card',
-	bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus. Mauris in justo vel lorem ullamcorper hendrerit. Nam est metus, viverra a pellentesque vitae, ornare eget odio. Morbi tempor feugiat mattis. Morbi non felis tempor, aliquam justo sed, sagittis nibh. Mauris consequat ex metus. Praesent sodales sit amet nibh a vulputate. Integer commodo, mi vel bibendum sollicitudin, urna lectus accumsan ante, eget faucibus augue ex id neque. Aenean consectetur, orci a pellentesque mattis, tortor tellus fringilla elit, non ullamcorper risus nunc feugiat risus. Fusce sit amet nisi dapibus turpis commodo placerat. In tortor ante, vehicula sit amet augue et, imperdiet porta sem.',
-	// actions: [<UserCard.Action icon='message'/>, <UserCard.Action icon='phone'/>],
-	utcOffset: -3,
+	bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.',
 	email: 'rocketchat@rocket.chat',
 	status: <Status.Offline />,
+	roles: [<UserCardRole key='admin'>admin</UserCardRole>, <UserCardRole key='user'>user</UserCardRole>],
 };
 
-export const WithNickname = Template.bind({});
-WithNickname.args = {
-	name: 'Guilherme Gazzo',
-	username: 'guilherme.gazzo',
-	statusText: '🛴 currently working on User Card',
-	bio: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus. Mauris in justo vel lorem ullamcorper hendrerit. Nam est metus, viverra a pellentesque vitae, ornare eget odio. Morbi tempor feugiat mattis. Morbi non felis tempor, aliquam justo sed, sagittis nibh. Mauris consequat ex metus. Praesent sodales sit amet nibh a vulputate. Integer commodo, mi vel bibendum sollicitudin, urna lectus accumsan ante, eget faucibus augue ex id neque. Aenean consectetur, orci a pellentesque mattis, tortor tellus fringilla elit, non ullamcorper risus nunc feugiat risus. Fusce sit amet nisi dapibus turpis commodo placerat. In tortor ante, vehicula sit amet augue et, imperdiet porta sem.',
-	// actions: [<UserCard.Action icon='message'/>, <UserCard.Action icon='phone'/>],
-	utcOffset: -3,
-	email: 'rocketchat@rocket.chat',
-	status: <Status.Offline />,
-	nickname: 'Nickname',
+const Template: StoryFn<typeof UserInfo> = (args) => <UserInfo {...defaultArgs} {...args} />;
+
+export const Default = Template.bind({});
+
+export const WithABACAttributes = Template.bind({});
+WithABACAttributes.args = {
+	// @ts-expect-error - abacAttributes is not yet implemented in Users properties
+	abacAttributes: ['Classified', 'Top Secret', 'Confidential'],
 };
diff --git a/apps/meteor/client/components/UserInfo/UserInfo.tsx b/apps/meteor/client/components/UserInfo/UserInfo.tsx
index 4a0413d912870..58bbbc1a52ee5 100644
--- a/apps/meteor/client/components/UserInfo/UserInfo.tsx
+++ b/apps/meteor/client/components/UserInfo/UserInfo.tsx
@@ -22,6 +22,7 @@ import {
 import MarkdownText from '../MarkdownText';
 import UTCClock from '../UTCClock';
 import { UserCardRoles } from '../UserCard';
+import UserInfoABACAttributes from './UserInfoABACAttributes';
 import UserInfoAvatar from './UserInfoAvatar';
 
 type UserInfoDataProps = Serialized<
@@ -70,6 +71,8 @@ const UserInfo = ({
 	canViewAllInfo,
 	actions,
 	reason,
+	// @ts-expect-error - abacAttributes is not yet implemented in Users properties
+	abacAttributes = null,
 	...props
 }: UserInfoProps): ReactElement => {
 	const { t } = useTranslation();
@@ -113,7 +116,7 @@ const UserInfo = ({
 						</InfoPanelField>
 					)}
 
-					{roles.length !== 0 && (
+					{roles?.length !== 0 && (
 						<InfoPanelField>
 							<InfoPanelLabel>{t('Roles')}</InfoPanelLabel>
 							<UserCardRoles>{roles}</UserCardRoles>
@@ -127,10 +130,12 @@ const UserInfo = ({
 						</InfoPanelField>
 					)}
 
-					{Number.isInteger(utcOffset) && (
+					{utcOffset && Number.isInteger(utcOffset) && (
 						<InfoPanelField>
 							<InfoPanelLabel>{t('Local_Time')}</InfoPanelLabel>
-							<InfoPanelText>{utcOffset && <UTCClock utcOffset={utcOffset} />}</InfoPanelText>
+							<InfoPanelText>
+								<UTCClock utcOffset={utcOffset} />
+							</InfoPanelText>
 						</InfoPanelField>
 					)}
 
@@ -175,6 +180,12 @@ const UserInfo = ({
 						</InfoPanelField>
 					)}
 
+					{abacAttributes?.length > 0 && (
+						<InfoPanelField>
+							<InfoPanelLabel title={t('ABAC_Attributes_description')}>{t('ABAC_Attributes')}</InfoPanelLabel>
+							<UserInfoABACAttributes abacAttributes={abacAttributes} />
+						</InfoPanelField>
+					)}
 					{userCustomFields?.map(
 						(customField) =>
 							customField?.value && (
diff --git a/apps/meteor/client/components/UserInfo/UserInfoABACAttribute.tsx b/apps/meteor/client/components/UserInfo/UserInfoABACAttribute.tsx
new file mode 100644
index 0000000000000..5605bd91d7cd7
--- /dev/null
+++ b/apps/meteor/client/components/UserInfo/UserInfoABACAttribute.tsx
@@ -0,0 +1,11 @@
+import { Tag } from '@rocket.chat/fuselage';
+
+type UserInfoABACAttributeProps = {
+	attribute: string;
+};
+
+const UserInfoABACAttribute = ({ attribute }: UserInfoABACAttributeProps) => {
+	return <Tag variant='secondary-warning' children={attribute} />;
+};
+
+export default UserInfoABACAttribute;
diff --git a/apps/meteor/client/components/UserInfo/UserInfoABACAttributes.tsx b/apps/meteor/client/components/UserInfo/UserInfoABACAttributes.tsx
new file mode 100644
index 0000000000000..b9cf2870d3d64
--- /dev/null
+++ b/apps/meteor/client/components/UserInfo/UserInfoABACAttributes.tsx
@@ -0,0 +1,23 @@
+import { Box, Margins } from '@rocket.chat/fuselage';
+
+import UserInfoABACAttribute from './UserInfoABACAttribute';
+
+type UserInfoABACAttributesProps = {
+	abacAttributes: string[];
+};
+
+const UserInfoABACAttributes = ({ abacAttributes }: UserInfoABACAttributesProps) => {
+	return (
+		<Box m='neg-x2'>
+			<Box flexWrap='wrap' display='flex' flexShrink={0} mb={8}>
+				{abacAttributes.map((attribute, index) => (
+					<Margins inline={2} blockEnd={4} key={`${attribute}-${index}`}>
+						<UserInfoABACAttribute attribute={attribute} />
+					</Margins>
+				))}
+			</Box>
+		</Box>
+	);
+};
+
+export default UserInfoABACAttributes;
diff --git a/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap b/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap
new file mode 100644
index 0000000000000..33c5d0d0d537b
--- /dev/null
+++ b/apps/meteor/client/components/UserInfo/__snapshots__/UserInfo.spec.tsx.snap
@@ -0,0 +1,574 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <span
+      data-focus-scope-start="true"
+      hidden=""
+    />
+    <div
+      aria-label="User Info"
+      aria-labelledby="contextualbarTitle"
+      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-1ajmw95"
+      role="dialog"
+      tabindex="-1"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-1svuzur"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-pln26h rcx-css-1cb6i7s"
+          data-overlayscrollbars="host"
+        >
+          <div
+            class="os-size-observer"
+          >
+            <div
+              class="os-size-observer-listener"
+            />
+          </div>
+          <div
+            class=""
+            data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+            tabindex="-1"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-iag4sp"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-15qq8ie"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-css-13kmycs"
+                >
+                  <figure
+                    class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x332"
+                  >
+                    <img
+                      alt=""
+                      aria-hidden="true"
+                      class="rcx-avatar__element rcx-avatar__element--x332"
+                      data-username="guilherme.gazzo"
+                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                      title="guilherme.gazzo"
+                    />
+                  </figure>
+                </div>
+                <div
+                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                >
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1rn5ews"
+                  >
+                    <svg
+                      class="rcx-status-bullet rcx-status-bullet--offline undefined "
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle
+                        class="rcx-status-bullet rcx-status-bullet--offline"
+                        cx="6"
+                        cy="6"
+                        r="5"
+                        stroke-width="2"
+                      />
+                    </svg>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-dredvr"
+                      title="guilherme.gazzo"
+                    >
+                      guilherme.gazzo
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                    >
+                      <img
+                        alt="🛴"
+                        class="emojione"
+                        src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f6f4.png"
+                        title=":scooter:"
+                      />
+                       currently working on User Card
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                >
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      Nickname
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
+                    >
+                      gazzo
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      Roles
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                    >
+                      <span
+                        class="rcx-box rcx-box--full rcx-css-1vab7ss"
+                      >
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
+                        >
+                          <span
+                            class="rcx-box rcx-box--full rcx-tag "
+                          >
+                            <span
+                              class="rcx-tag__inner"
+                            >
+                              admin
+                            </span>
+                          </span>
+                        </div>
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
+                        >
+                          <span
+                            class="rcx-box rcx-box--full rcx-tag "
+                          >
+                            <span
+                              class="rcx-tag__inner"
+                            >
+                              user
+                            </span>
+                          </span>
+                        </div>
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      Username
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
+                      data-qa="UserInfoUserName"
+                    >
+                      guilherme.gazzo
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      Bio
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      Email
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-tj8yjq"
+                    >
+                      <a
+                        class="rcx-box rcx-box--full rcx-css-1te28na"
+                        href="mailto:rocketchat@rocket.chat"
+                      >
+                        rocketchat@rocket.chat
+                      </a>
+                      <span
+                        class="rcx-box rcx-box--full rcx-tag  rcx-css-1dtwr38 rcx-css-1eogw2f"
+                      >
+                        <span
+                          class="rcx-tag__inner"
+                        >
+                          Not_verified
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      data-focus-scope-end="true"
+      hidden=""
+    />
+  </div>
+</body>
+`;
+
+exports[`renders WithABACAttributes without crashing 1`] = `
+<body>
+  <div>
+    <span
+      data-focus-scope-start="true"
+      hidden=""
+    />
+    <div
+      aria-label="User Info"
+      aria-labelledby="contextualbarTitle"
+      class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-1ajmw95"
+      role="dialog"
+      tabindex="-1"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-1svuzur"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-pln26h rcx-css-1cb6i7s"
+          data-overlayscrollbars="host"
+        >
+          <div
+            class="os-size-observer"
+          >
+            <div
+              class="os-size-observer-listener"
+            />
+          </div>
+          <div
+            class=""
+            data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+            tabindex="-1"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-iag4sp"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-15qq8ie"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-css-13kmycs"
+                >
+                  <figure
+                    class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x332"
+                  >
+                    <img
+                      alt=""
+                      aria-hidden="true"
+                      class="rcx-avatar__element rcx-avatar__element--x332"
+                      data-username="guilherme.gazzo"
+                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                      title="guilherme.gazzo"
+                    />
+                  </figure>
+                </div>
+                <div
+                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                >
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1rn5ews"
+                  >
+                    <svg
+                      class="rcx-status-bullet rcx-status-bullet--offline undefined "
+                      fill="none"
+                      height="12"
+                      viewBox="0 0 12 12"
+                      width="12"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle
+                        class="rcx-status-bullet rcx-status-bullet--offline"
+                        cx="6"
+                        cy="6"
+                        r="5"
+                        stroke-width="2"
+                      />
+                    </svg>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-dredvr"
+                      title="guilherme.gazzo"
+                    >
+                      guilherme.gazzo
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                    >
+                      <img
+                        alt="🛴"
+                        class="emojione"
+                        src="https://cdn.jsdelivr.net/emojione/assets/4.5/png/32/1f6f4.png"
+                        title=":scooter:"
+                      />
+                       currently working on User Card
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="rcx-box rcx-box--full rcx-css-6jv9ad"
+                >
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      Nickname
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
+                    >
+                      gazzo
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      Roles
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                    >
+                      <span
+                        class="rcx-box rcx-box--full rcx-css-1vab7ss"
+                      >
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
+                        >
+                          <span
+                            class="rcx-box rcx-box--full rcx-tag "
+                          >
+                            <span
+                              class="rcx-tag__inner"
+                            >
+                              admin
+                            </span>
+                          </span>
+                        </div>
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1i2tyln"
+                        >
+                          <span
+                            class="rcx-box rcx-box--full rcx-tag "
+                          >
+                            <span
+                              class="rcx-tag__inner"
+                            >
+                              user
+                            </span>
+                          </span>
+                        </div>
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      Username
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
+                      data-qa="UserInfoUserName"
+                    >
+                      guilherme.gazzo
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      Bio
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-11phrl6"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-box--with-block-elements rcx-box--with-inline-elements"
+                      >
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus, eros convallis vulputate cursus, nisi neque eleifend libero, eget lacinia justo purus nec est. In at sodales ipsum. Sed lacinia quis purus eget pulvinar. Aenean eu pretium nunc, at aliquam magna. Praesent dignissim, tortor sed volutpat mattis, mauris diam pulvinar leo, porta commodo risus est non purus.
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      Email
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-6hwe8l rcx-css-tj8yjq"
+                    >
+                      <a
+                        class="rcx-box rcx-box--full rcx-css-1te28na"
+                        href="mailto:rocketchat@rocket.chat"
+                      >
+                        rocketchat@rocket.chat
+                      </a>
+                      <span
+                        class="rcx-box rcx-box--full rcx-tag  rcx-css-1dtwr38 rcx-css-1eogw2f"
+                      >
+                        <span
+                          class="rcx-tag__inner"
+                        >
+                          Not_verified
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    class="rcx-box rcx-box--full rcx-css-1jagyun"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-f0ql1y"
+                    >
+                      ABAC_Attributes
+                      <i
+                        aria-hidden="true"
+                        class="rcx-box rcx-box--full rcx-icon--name-info rcx-icon rcx-css-gji86h"
+                        title="ABAC_Attributes_description"
+                      >
+                        
+                      </i>
+                    </div>
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-9vcs0o"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-iitt21"
+                      >
+                        <span
+                          class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
+                        >
+                          <span
+                            class="rcx-tag__inner"
+                          >
+                            Classified
+                          </span>
+                        </span>
+                        <span
+                          class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
+                        >
+                          <span
+                            class="rcx-tag__inner"
+                          >
+                            Top Secret
+                          </span>
+                        </span>
+                        <span
+                          class="rcx-box rcx-box--full rcx-tag rcx-tag--secondary-warning rcx-css-1drnhgd"
+                        >
+                          <span
+                            class="rcx-tag__inner"
+                          >
+                            Confidential
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      data-focus-scope-end="true"
+      hidden=""
+    />
+  </div>
+</body>
+`;
diff --git a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardFilter.tsx b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardFilter.tsx
index a51023cfd9833..a94321c11e945 100644
--- a/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardFilter.tsx
+++ b/apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardFilter.tsx
@@ -1,11 +1,11 @@
-import { Box, Flex, InputBox } from '@rocket.chat/fuselage';
+import { Box, Flex, InputBoxSkeleton } from '@rocket.chat/fuselage';
 import type { ReactElement, ReactNode } from 'react';
 
 type EngagementDashboardCardFilterProps = {
 	children?: ReactNode;
 };
 
-const EngagementDashboardCardFilter = ({ children = <InputBox.Skeleton /> }: EngagementDashboardCardFilterProps): ReactElement => (
+const EngagementDashboardCardFilter = ({ children = <InputBoxSkeleton /> }: EngagementDashboardCardFilterProps): ReactElement => (
 	<Box rcx-card__row display='flex' justifyContent='flex-end' alignItems='center' wrap='no-wrap' pbe={8}>
 		{children && <Flex.Item grow={0}>{children}</Flex.Item>}
 	</Box>
diff --git a/apps/meteor/client/views/admin/import/NewImportPage.tsx b/apps/meteor/client/views/admin/import/NewImportPage.tsx
index 64b2d7b8257d6..1795883a05da7 100644
--- a/apps/meteor/client/views/admin/import/NewImportPage.tsx
+++ b/apps/meteor/client/views/admin/import/NewImportPage.tsx
@@ -1,4 +1,19 @@
-import { Box, Button, ButtonGroup, Callout, Chip, Field, Margins, Select, InputBox, TextInput, UrlInput } from '@rocket.chat/fuselage';
+import {
+	Box,
+	Button,
+	ButtonGroup,
+	Callout,
+	Chip,
+	Field,
+	Margins,
+	Select,
+	InputBox,
+	TextInput,
+	UrlInput,
+	FieldLabel,
+	FieldRow,
+	FieldHint,
+} from '@rocket.chat/fuselage';
 import { useSafely } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useToastMessageDispatch, useRouter, useRouteParameter, useSetting, useEndpoint } from '@rocket.chat/ui-contexts';
@@ -201,10 +216,10 @@ function NewImportPage() {
 				<Box marginInline='auto' marginBlock='neg-x24' width='full' maxWidth='x580'>
 					<Margins block='x24'>
 						<Field>
-							<Field.Label alignSelf='stretch' htmlFor={importerKeySelectId}>
+							<FieldLabel alignSelf='stretch' htmlFor={importerKeySelectId}>
 								{t('Import_Type')}
-							</Field.Label>
-							<Field.Row>
+							</FieldLabel>
+							<FieldRow>
 								<Select
 									id={importerKeySelectId}
 									value={importerKey}
@@ -213,21 +228,21 @@ function NewImportPage() {
 									onChange={handleImporterKeyChange}
 									options={options}
 								/>
-							</Field.Row>
+							</FieldRow>
 							{importer && (
-								<Field.Hint>
+								<FieldHint>
 									{importer.key === 'csv'
 										? t('Importer_From_Description_CSV')
 										: t('Importer_From_Description', { from: t(importer.name as TranslationKey) })}
-								</Field.Hint>
+								</FieldHint>
 							)}
 						</Field>
 						{importer && (
 							<Field>
-								<Field.Label alignSelf='stretch' htmlFor={fileTypeSelectId}>
+								<FieldLabel alignSelf='stretch' htmlFor={fileTypeSelectId}>
 									{t('File_Type')}
-								</Field.Label>
-								<Field.Row>
+								</FieldLabel>
+								<FieldRow>
 									<Select
 										id={fileTypeSelectId}
 										value={fileType}
@@ -240,7 +255,7 @@ function NewImportPage() {
 											['path', t('Server_File_Path')],
 										]}
 									/>
-								</Field.Row>
+								</FieldRow>
 							</Field>
 						)}
 						{importer && (
@@ -259,42 +274,42 @@ function NewImportPage() {
 											</Callout>
 										)}
 										<Field>
-											<Field.Label alignSelf='stretch' htmlFor={fileSourceInputId}>
+											<FieldLabel alignSelf='stretch' htmlFor={fileSourceInputId}>
 												{t('Importer_Source_File')}
-											</Field.Label>
-											<Field.Row>
+											</FieldLabel>
+											<FieldRow>
 												<InputBox type='file' id={fileSourceInputId} onChange={handleImportFileChange} />
-											</Field.Row>
+											</FieldRow>
 											{files?.length > 0 && (
-												<Field.Row>
+												<FieldRow>
 													{files.map((file, i) => (
 														<Chip key={i} onClick={handleFileUploadChipClick(file)}>
 															{file.name}
 														</Chip>
 													))}
-												</Field.Row>
+												</FieldRow>
 											)}
 										</Field>
 									</>
 								)}
 								{fileType === 'url' && (
 									<Field>
-										<Field.Label alignSelf='stretch' htmlFor={fileSourceInputId}>
+										<FieldLabel alignSelf='stretch' htmlFor={fileSourceInputId}>
 											{t('File_URL')}
-										</Field.Label>
-										<Field.Row>
+										</FieldLabel>
+										<FieldRow>
 											<UrlInput id={fileSourceInputId} value={fileUrl} onChange={handleFileUrlChange} />
-										</Field.Row>
+										</FieldRow>
 									</Field>
 								)}
 								{fileType === 'path' && (
 									<Field>
-										<Field.Label alignSelf='stretch' htmlFor={fileSourceInputId}>
+										<FieldLabel alignSelf='stretch' htmlFor={fileSourceInputId}>
 											{t('File_Path')}
-										</Field.Label>
-										<Field.Row>
+										</FieldLabel>
+										<FieldRow>
 											<TextInput id={fileSourceInputId} value={filePath} onChange={handleFilePathChange} />
-										</Field.Row>
+										</FieldRow>
 									</Field>
 								)}
 							</>
diff --git a/apps/meteor/client/views/admin/permissions/PermissionsPage.tsx b/apps/meteor/client/views/admin/permissions/PermissionsPage.tsx
index 96c0e9950433a..19f7fbc343206 100644
--- a/apps/meteor/client/views/admin/permissions/PermissionsPage.tsx
+++ b/apps/meteor/client/views/admin/permissions/PermissionsPage.tsx
@@ -22,8 +22,8 @@ const PermissionsPage = ({ isEnterprise }: { isEnterprise: boolean }): ReactElem
 	const router = useRoute('admin-permissions');
 	const setModal = useSetModal();
 
-	const paginationProps = usePagination();
-	const { permissions, total, roleList } = usePermissionsAndRoles(type, filter, paginationProps.itemsPerPage, paginationProps.current);
+	const paginationData = usePagination();
+	const { permissions, total, roleList } = usePermissionsAndRoles(type, filter, paginationData.itemsPerPage, paginationData.current);
 
 	const handlePermissionsTab = useEffectEvent(() => {
 		if (type === 'permissions') {
@@ -84,7 +84,7 @@ const PermissionsPage = ({ isEnterprise }: { isEnterprise: boolean }): ReactElem
 							permissions={permissions}
 							total={total}
 							setFilter={setFilter}
-							paginationProps={paginationProps}
+							paginationData={paginationData}
 						/>
 					</Margins>
 				</PageContent>
diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.spec.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.spec.tsx
index c1116b09798cc..9b2bdb4f63eb9 100644
--- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.spec.tsx
+++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.spec.tsx
@@ -7,6 +7,7 @@ import { axe } from 'jest-axe';
 
 import PermissionsTable from './PermissionsTable';
 import * as stories from './PermissionsTable.stories';
+import { createMockedPagination } from '../../../../../tests/mocks/data';
 
 const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
 
@@ -24,6 +25,8 @@ test.each(testCases)('%s should have no a11y violations', async (_storyname, Sto
 	expect(results).toHaveNoViolations();
 });
 
+const paginationData = createMockedPagination();
+
 const defaultPermissions: IPermission[] = [
 	{
 		_id: 'access-permissions',
@@ -51,7 +54,13 @@ const roles: IRole[] = [
 
 test('should display modal if the permission is access-permissions and has only one granted role', async () => {
 	render(
-		<PermissionsTable permissions={defaultPermissions} total={defaultPermissions.length} setFilter={() => undefined} roleList={roles} />,
+		<PermissionsTable
+			permissions={defaultPermissions}
+			total={defaultPermissions.length}
+			setFilter={() => undefined}
+			roleList={roles}
+			paginationData={paginationData}
+		/>,
 		{
 			wrapper: mockAppRoot().build(),
 		},
@@ -70,9 +79,18 @@ test('should NOT display modal if the permission is access-permissions and has m
 		},
 	];
 
-	render(<PermissionsTable permissions={morePermissions} total={morePermissions.length} setFilter={() => undefined} roleList={roles} />, {
-		wrapper: mockAppRoot().build(),
-	});
+	render(
+		<PermissionsTable
+			permissions={morePermissions}
+			total={morePermissions.length}
+			setFilter={() => undefined}
+			roleList={roles}
+			paginationData={paginationData}
+		/>,
+		{
+			wrapper: mockAppRoot().build(),
+		},
+	);
 
 	await userEvent.click(screen.getByRole('checkbox', { name: 'access-permissions - Administrator' }));
 	expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx
index c553c19f36fb3..029283b814b0c 100644
--- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx
+++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.stories.tsx
@@ -3,6 +3,7 @@ import { Margins } from '@rocket.chat/fuselage';
 import type { Meta, StoryFn } from '@storybook/react';
 
 import PermissionsTable from './PermissionsTable';
+import { createMockedPagination } from '../../../../../tests/mocks/data';
 import { PageContent } from '../../../../components/Page';
 
 export default {
@@ -98,18 +99,24 @@ const permissions: IPermission[] = [
 	},
 ];
 
-export const Default: StoryFn<typeof PermissionsTable> = (args) => <PermissionsTable {...args} />;
+const paginationData = createMockedPagination(permissions.length, 10);
+
+const Template: StoryFn<typeof PermissionsTable> = (args) => <PermissionsTable {...args} />;
+
+export const Default = Template.bind({});
 Default.args = {
-	total: permissions.length,
+	total: 10,
 	permissions,
 	roleList: roles,
 	setFilter: () => undefined,
+	paginationData,
 };
 
-export const Empty: StoryFn<typeof PermissionsTable> = (args) => <PermissionsTable {...args} />;
+export const Empty = Template.bind({});
 Empty.args = {
 	total: 0,
 	permissions: [],
 	roleList: [],
 	setFilter: () => undefined,
+	paginationData,
 };
diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx
index e034adfcf1f46..b2aede0e32d9f 100644
--- a/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx
+++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/PermissionsTable.tsx
@@ -16,15 +16,17 @@ type PermissionsTableProps = {
 	permissions: IPermission[];
 	setFilter: (filter: string) => void;
 	total: number;
-	paginationProps?: ReturnType<typeof usePagination>;
+	paginationData: ReturnType<typeof usePagination>;
 };
 
-const PermissionsTable = ({ roleList, permissions, setFilter, total, paginationProps }: PermissionsTableProps) => {
+const PermissionsTable = ({ roleList, permissions, setFilter, total, paginationData }: PermissionsTableProps) => {
 	const { t } = useTranslation();
 
 	const grantRole = useMethod('authorization:addPermissionToRole');
 	const removeRole = useMethod('authorization:removeRoleFromPermission');
 
+	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = paginationData;
+
 	const tableCustomStyle = css`
 		// Makes the first column of the table sticky
 		tr > th {
@@ -77,9 +79,11 @@ const PermissionsTable = ({ roleList, permissions, setFilter, total, paginationP
 					</GenericTable>
 					<Pagination
 						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
 						count={total}
-						onSetItemsPerPage={paginationProps?.setItemsPerPage}
-						onSetCurrent={paginationProps?.setCurrent}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
 						{...paginationProps}
 					/>
 				</>
diff --git a/apps/meteor/client/views/admin/permissions/PermissionsTable/__snapshots__/PermissionsTable.spec.tsx.snap b/apps/meteor/client/views/admin/permissions/PermissionsTable/__snapshots__/PermissionsTable.spec.tsx.snap
index 397abc9b43e5d..88fbb2b696bf2 100644
--- a/apps/meteor/client/views/admin/permissions/PermissionsTable/__snapshots__/PermissionsTable.spec.tsx.snap
+++ b/apps/meteor/client/views/admin/permissions/PermissionsTable/__snapshots__/PermissionsTable.spec.tsx.snap
@@ -1100,7 +1100,7 @@ exports[`renders Default without crashing 1`] = `
           <span
             class="rcx-box rcx-box--full rcx-pagination__label"
           >
-            Showing results 1 - 4 of 4
+            Showing results 1 - 4 of 10
           </span>
           <ol
             class="rcx-box rcx-box--full rcx-pagination__list"
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRolePage.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRolePage.tsx
index 48d61991c69c9..f65cd0a092f16 100644
--- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRolePage.tsx
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRolePage.tsx
@@ -1,12 +1,15 @@
 import type { IRole, IRoom } from '@rocket.chat/core-typings';
 import { Box, Field, FieldLabel, FieldRow, Margins, ButtonGroup, Button, Callout, FieldError } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { useToastMessageDispatch, useEndpoint, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
-import { useQueryClient } from '@tanstack/react-query';
-import { useId, type ReactElement } from 'react';
+import { useToastMessageDispatch, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useId, useMemo, type ReactElement } from 'react';
 import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
 import UsersInRoleTable from './UsersInRoleTable';
+import { useRemoveUserFromRole } from './hooks/useRemoveUserFromRole';
+import { usePagination } from '../../../../components/GenericTable/hooks/usePagination';
 import { Page, PageHeader, PageContent } from '../../../../components/Page';
 import RoomAutoComplete from '../../../../components/RoomAutoComplete';
 import UserAutoCompleteMultiple from '../../../../components/UserAutoCompleteMultiple';
@@ -17,7 +20,7 @@ type UsersInRolePayload = {
 };
 
 const UsersInRolePage = ({ role }: { role: IRole }): ReactElement => {
-	const t = useTranslation();
+	const { t } = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const queryClient = useQueryClient();
 
@@ -54,6 +57,28 @@ const UsersInRolePage = ({ role }: { role: IRole }): ReactElement => {
 		}
 	});
 
+	const getUsersInRoleEndpoint = useEndpoint('GET', '/v1/roles.getUsersInRole');
+
+	const paginationData = usePagination();
+	const { itemsPerPage, current } = paginationData;
+
+	const query = useMemo(
+		() => ({
+			role: _id,
+			...(rid && { roomId: rid }),
+			...(itemsPerPage && { count: itemsPerPage }),
+			...(current && { offset: current }),
+		}),
+		[itemsPerPage, current, rid, _id],
+	);
+
+	const { data, isLoading, isSuccess, refetch, isError } = useQuery({
+		queryKey: ['getUsersInRole', _id, query],
+		queryFn: async () => getUsersInRoleEndpoint(query),
+	});
+
+	const handleRemove = useRemoveUserFromRole({ rid, roleId: _id, roleName: name, roleDescription: description });
+
 	return (
 		<Page>
 			<PageHeader title={`${t('Users_in_role')} "${description || name}"`}>
@@ -127,7 +152,18 @@ const UsersInRolePage = ({ role }: { role: IRole }): ReactElement => {
 					</Margins>
 				</Box>
 				<Margins blockStart={8}>
-					{(role.scope === 'Users' || rid) && <UsersInRoleTable rid={rid} roleId={_id} roleName={name} description={description} />}
+					{(role.scope === 'Users' || rid) && (
+						<UsersInRoleTable
+							isLoading={isLoading}
+							isError={isError}
+							isSuccess={isSuccess}
+							total={data?.total || 0}
+							users={data?.users || []}
+							onRemove={handleRemove}
+							refetch={refetch}
+							paginationData={paginationData}
+						/>
+					)}
 					{role.scope !== 'Users' && !rid && <Callout type='info'>{t('Select_a_room')}</Callout>}
 				</Margins>
 			</PageContent>
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.spec.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.spec.tsx
new file mode 100644
index 0000000000000..87aa750f8aba1
--- /dev/null
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.spec.tsx
@@ -0,0 +1,21 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import * as stories from './UsersInRoleTable.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+	const { baseElement } = render(<Story />, { wrapper: mockAppRoot().build() });
+	expect(baseElement).toMatchSnapshot();
+});
+
+test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => {
+	const { container } = render(<Story />, { wrapper: mockAppRoot().build() });
+
+	// TODO: Needed to skip `button-name` because fuselage‘s `Pagination` buttons are missing names
+	const results = await axe(container, { rules: { 'button-name': { enabled: false } } });
+	expect(results).toHaveNoViolations();
+});
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx
new file mode 100644
index 0000000000000..68ee23235d350
--- /dev/null
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.stories.tsx
@@ -0,0 +1,84 @@
+import { Margins } from '@rocket.chat/fuselage';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import UsersInRoleTable from './UsersInRoleTable';
+import { createMockedPagination } from '../../../../../../tests/mocks/data';
+import { PageContent } from '../../../../../components/Page';
+
+export default {
+	component: UsersInRoleTable,
+	decorators: [
+		(fn) => (
+			<PageContent mb='neg-x8'>
+				<Margins block={8}>{fn()}</Margins>
+			</PageContent>
+		),
+	],
+} satisfies Meta<typeof UsersInRoleTable>;
+
+const generateMockedUsers = (count: number) =>
+	Array.from({ length: count }, (_, i) => ({
+		_id: `${i + 1}`,
+		username: `user.${i + 1}`,
+		name: `User ${i + 1}`,
+		emails: [{ address: `user${i + 1}@example.com`, verified: i % 2 === 0 }],
+		createdAt: new Date().toISOString(),
+		_updatedAt: new Date().toISOString(),
+		roles: [i < 5 ? 'admin' : 'user'],
+		type: 'user',
+		active: true,
+	}));
+
+const mockedUsers = generateMockedUsers(5);
+
+const paginationData = createMockedPagination(mockedUsers.length, 30);
+
+const Template: StoryFn<typeof UsersInRoleTable> = (args) => <UsersInRoleTable {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+	total: 30,
+	isLoading: false,
+	isError: false,
+	isSuccess: true,
+	users: mockedUsers,
+	onRemove: () => undefined,
+	refetch: () => undefined,
+	paginationData,
+};
+
+export const withLoading = Template.bind({});
+withLoading.args = {
+	total: 0,
+	isLoading: true,
+	isError: false,
+	isSuccess: false,
+	users: [],
+	onRemove: () => undefined,
+	refetch: () => undefined,
+	paginationData,
+};
+
+export const withNoResults = Template.bind({});
+withNoResults.args = {
+	total: 0,
+	isLoading: false,
+	isError: false,
+	isSuccess: true,
+	users: [],
+	onRemove: () => undefined,
+	refetch: () => undefined,
+	paginationData,
+};
+
+export const withError = Template.bind({});
+withError.args = {
+	total: 0,
+	isLoading: false,
+	isError: true,
+	isSuccess: false,
+	users: [],
+	onRemove: () => undefined,
+	refetch: () => undefined,
+	paginationData,
+};
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx
index 64d4ae417847d..974120d00e67f 100644
--- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTable.tsx
@@ -1,11 +1,5 @@
-import type { IRole, IRoom, IUserInRole } from '@rocket.chat/core-typings';
+import type { IUserInRole, Serialized } from '@rocket.chat/core-typings';
 import { Pagination } from '@rocket.chat/fuselage';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { GenericModal } from '@rocket.chat/ui-client';
-import { useSetModal, useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import type { ReactElement } from 'react';
-import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import UsersInRoleTableRow from './UsersInRoleTableRow';
@@ -18,78 +12,28 @@ import {
 	GenericTableBody,
 	GenericTableLoadingTable,
 } from '../../../../../components/GenericTable';
-import { usePagination } from '../../../../../components/GenericTable/hooks/usePagination';
+import type { usePagination } from '../../../../../components/GenericTable/hooks/usePagination';
 
 type UsersInRoleTableProps = {
-	roleName: IRole['name'];
-	roleId: IRole['_id'];
-	description: IRole['description'];
-	rid?: IRoom['_id'];
+	isLoading: boolean;
+	isError: boolean;
+	isSuccess: boolean;
+	total: number;
+	users: Serialized<IUserInRole>[];
+	onRemove: (username: IUserInRole['username']) => void;
+	paginationData: ReturnType<typeof usePagination>;
+	refetch: () => void;
 };
 
-const UsersInRoleTable = ({ rid, roleId, roleName, description }: UsersInRoleTableProps): ReactElement => {
+const UsersInRoleTable = ({ isLoading, isSuccess, isError, total, users, onRemove, refetch, paginationData }: UsersInRoleTableProps) => {
 	const { t } = useTranslation();
-	const setModal = useSetModal();
-	const dispatchToastMessage = useToastMessageDispatch();
-	const queryClient = useQueryClient();
-
-	const getUsersInRoleEndpoint = useEndpoint('GET', '/v1/roles.getUsersInRole');
-	const removeUserFromRoleEndpoint = useEndpoint('POST', '/v1/roles.removeUserFromRole');
-
-	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
-
-	const query = useMemo(
-		() => ({
-			role: roleId,
-			...(rid && { roomId: rid }),
-			...(itemsPerPage && { count: itemsPerPage }),
-			...(current && { offset: current }),
-		}),
-		[itemsPerPage, current, rid, roleId],
-	);
-
-	const { data, isLoading, isSuccess, refetch, isError } = useQuery({
-		queryKey: ['getUsersInRole', roleId, query],
-
-		queryFn: async () => getUsersInRoleEndpoint(query),
-	});
-
-	const users =
-		data?.users?.map((user) => ({
-			...user,
-			createdAt: new Date(user.createdAt),
-			_updatedAt: new Date(user._updatedAt),
-		})) || [];
-
-	const handleRemove = useEffectEvent((username: IUserInRole['username']) => {
-		const remove = async () => {
-			try {
-				if (!username) throw new Error('Username is required');
-
-				await removeUserFromRoleEndpoint({ roleId, username, scope: rid });
-				dispatchToastMessage({ type: 'success', message: t('User_removed') });
-				queryClient.invalidateQueries({
-					queryKey: ['getUsersInRole'],
-				});
-			} catch (error) {
-				dispatchToastMessage({ type: 'error', message: error });
-			} finally {
-				setModal(null);
-			}
-		};
-
-		setModal(
-			<GenericModal variant='danger' onConfirm={remove} onCancel={() => setModal(null)} confirmText={t('Delete')}>
-				{t('The_user_s_will_be_removed_from_role_s', { postProcess: 'sprintf', sprintf: [username, description || roleName] })}
-			</GenericModal>,
-		);
-	});
+	const { current, itemsPerPage, setCurrent, setItemsPerPage, ...paginationProps } = paginationData;
 
 	const headers = (
 		<>
 			<GenericTableHeaderCell>{t('Name')}</GenericTableHeaderCell>
 			<GenericTableHeaderCell>{t('Email')}</GenericTableHeaderCell>
-			<GenericTableHeaderCell w='x80'></GenericTableHeaderCell>
+			<GenericTableHeaderCell w='x80'>{t('Actions')}</GenericTableHeaderCell>
 		</>
 	);
 
@@ -99,7 +43,7 @@ const UsersInRoleTable = ({ rid, roleId, roleName, description }: UsersInRoleTab
 				<GenericTable>
 					<GenericTableHeader>{headers}</GenericTableHeader>
 					<GenericTableBody>
-						<GenericTableLoadingTable headerCells={2} />
+						<GenericTableLoadingTable headerCells={3} />
 					</GenericTableBody>
 				</GenericTable>
 			)}
@@ -108,21 +52,23 @@ const UsersInRoleTable = ({ rid, roleId, roleName, description }: UsersInRoleTab
 					<GenericTable>
 						<GenericTableHeader>{headers}</GenericTableHeader>
 						<GenericTableBody>
-							{users?.map((user) => <UsersInRoleTableRow onRemove={handleRemove} key={user?._id} user={user} />)}
+							{users.map((user) => (
+								<UsersInRoleTableRow key={user?._id} user={user} onRemove={onRemove} />
+							))}
 						</GenericTableBody>
 					</GenericTable>
 					<Pagination
 						divider
 						current={current}
 						itemsPerPage={itemsPerPage}
-						count={users.length || 0}
-						onSetItemsPerPage={onSetItemsPerPage}
-						onSetCurrent={onSetCurrent}
+						count={total}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
 						{...paginationProps}
 					/>
 				</>
 			)}
-			{users?.length === 0 && <GenericNoResults />}
+			{isSuccess && users?.length === 0 && <GenericNoResults />}
 			{isError && <GenericError buttonAction={refetch} />}
 		</>
 	);
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
index e1c9b789234cf..00e24d820893f 100644
--- a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/UsersInRoleTableRow.tsx
@@ -1,4 +1,4 @@
-import type { IUserInRole } from '@rocket.chat/core-typings';
+import type { IUserInRole, Serialized } from '@rocket.chat/core-typings';
 import { Box, IconButton } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
@@ -10,7 +10,7 @@ import { getUserEmailAddress } from '../../../../../../lib/getUserEmailAddress';
 import { GenericTableRow, GenericTableCell } from '../../../../../components/GenericTable';
 
 type UsersInRoleTableRowProps = {
-	user: IUserInRole;
+	user: Serialized<IUserInRole>;
 	onRemove: (username: IUserInRole['username']) => void;
 };
 
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/__snapshots__/UsersInRoleTable.spec.tsx.snap b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/__snapshots__/UsersInRoleTable.spec.tsx.snap
new file mode 100644
index 0000000000000..33863533c185e
--- /dev/null
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/UsersInRoleTable/__snapshots__/UsersInRoleTable.spec.tsx.snap
@@ -0,0 +1,1104 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders Default without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-9x4qdd"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-h9m6k6"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-pln26h rcx-css-1cb6i7s"
+          data-overlayscrollbars="host"
+        >
+          <div
+            class="os-size-observer"
+          >
+            <div
+              class="os-size-observer-listener"
+            />
+          </div>
+          <div
+            class=""
+            data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+            tabindex="-1"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-table__wrapper"
+            >
+              <table
+                class="rcx-box rcx-box--full rcx-table--sticky rcx-table--fixed rcx-table"
+              >
+                <thead
+                  class="rcx-box rcx-box--full rcx-table__head"
+                >
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <th
+                      class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                        wrap="no-wrap"
+                      >
+                        Name
+                      </div>
+                    </th>
+                    <th
+                      class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                        wrap="no-wrap"
+                      >
+                        Email
+                      </div>
+                    </th>
+                    <th
+                      class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell rcx-css-wbqtoq"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                        wrap="no-wrap"
+                      >
+                        Actions
+                      </div>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="rcx-box rcx-box--full rcx-table__body"
+                >
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                    role="link"
+                    tabindex="0"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell rcx-css-1te28na"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                      >
+                        <figure
+                          class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x40"
+                        >
+                          <img
+                            alt=""
+                            aria-hidden="true"
+                            class="rcx-avatar__element rcx-avatar__element--x40"
+                            data-username="user.1"
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                            title="user.1"
+                          />
+                        </figure>
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1mrdogu"
+                        >
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1bu7eoe"
+                          >
+                            User 1
+                          </div>
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-u4h3tr"
+                          >
+                            @user.1
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell rcx-css-1te28na"
+                    >
+                      user1@example.com
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <button
+                        class="rcx-box rcx-box--full rcx-button--small-square rcx-button--icon-danger rcx-button--square rcx-button--icon rcx-button"
+                        title="Remove"
+                        type="button"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-trash rcx-icon rcx-css-4pvxx3"
+                        >
+                          
+                        </i>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                    role="link"
+                    tabindex="0"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell rcx-css-1te28na"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                      >
+                        <figure
+                          class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x40"
+                        >
+                          <img
+                            alt=""
+                            aria-hidden="true"
+                            class="rcx-avatar__element rcx-avatar__element--x40"
+                            data-username="user.2"
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                            title="user.2"
+                          />
+                        </figure>
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1mrdogu"
+                        >
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1bu7eoe"
+                          >
+                            User 2
+                          </div>
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-u4h3tr"
+                          >
+                            @user.2
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell rcx-css-1te28na"
+                    >
+                      user2@example.com
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <button
+                        class="rcx-box rcx-box--full rcx-button--small-square rcx-button--icon-danger rcx-button--square rcx-button--icon rcx-button"
+                        title="Remove"
+                        type="button"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-trash rcx-icon rcx-css-4pvxx3"
+                        >
+                          
+                        </i>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                    role="link"
+                    tabindex="0"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell rcx-css-1te28na"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                      >
+                        <figure
+                          class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x40"
+                        >
+                          <img
+                            alt=""
+                            aria-hidden="true"
+                            class="rcx-avatar__element rcx-avatar__element--x40"
+                            data-username="user.3"
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                            title="user.3"
+                          />
+                        </figure>
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1mrdogu"
+                        >
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1bu7eoe"
+                          >
+                            User 3
+                          </div>
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-u4h3tr"
+                          >
+                            @user.3
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell rcx-css-1te28na"
+                    >
+                      user3@example.com
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <button
+                        class="rcx-box rcx-box--full rcx-button--small-square rcx-button--icon-danger rcx-button--square rcx-button--icon rcx-button"
+                        title="Remove"
+                        type="button"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-trash rcx-icon rcx-css-4pvxx3"
+                        >
+                          
+                        </i>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                    role="link"
+                    tabindex="0"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell rcx-css-1te28na"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                      >
+                        <figure
+                          class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x40"
+                        >
+                          <img
+                            alt=""
+                            aria-hidden="true"
+                            class="rcx-avatar__element rcx-avatar__element--x40"
+                            data-username="user.4"
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                            title="user.4"
+                          />
+                        </figure>
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1mrdogu"
+                        >
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1bu7eoe"
+                          >
+                            User 4
+                          </div>
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-u4h3tr"
+                          >
+                            @user.4
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell rcx-css-1te28na"
+                    >
+                      user4@example.com
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <button
+                        class="rcx-box rcx-box--full rcx-button--small-square rcx-button--icon-danger rcx-button--square rcx-button--icon rcx-button"
+                        title="Remove"
+                        type="button"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-trash rcx-icon rcx-css-4pvxx3"
+                        >
+                          
+                        </i>
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                    role="link"
+                    tabindex="0"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell rcx-css-1te28na"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                      >
+                        <figure
+                          class="rcx-box rcx-box--full rcx-avatar rcx-avatar--x40"
+                        >
+                          <img
+                            alt=""
+                            aria-hidden="true"
+                            class="rcx-avatar__element rcx-avatar__element--x40"
+                            data-username="user.5"
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2Oora39DwAFaQJ3y3rKeAAAAABJRU5ErkJggg=="
+                            title="user.5"
+                          />
+                        </figure>
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1mrdogu"
+                        >
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-1bu7eoe"
+                          >
+                            User 5
+                          </div>
+                          <div
+                            class="rcx-box rcx-box--full rcx-css-u4h3tr"
+                          >
+                            @user.5
+                          </div>
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell rcx-css-1te28na"
+                    >
+                      user5@example.com
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <button
+                        class="rcx-box rcx-box--full rcx-button--small-square rcx-button--icon-danger rcx-button--square rcx-button--icon rcx-button"
+                        title="Remove"
+                        type="button"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-trash rcx-icon rcx-css-4pvxx3"
+                        >
+                          
+                        </i>
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <nav
+        class="rcx-box rcx-box--full rcx-pagination--divider rcx-pagination rcx-css-cnkcl9"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-pagination__left"
+        >
+          <span
+            class="rcx-box rcx-box--full rcx-pagination__label"
+          >
+            Items per page:
+          </span>
+          <ol
+            class="rcx-box rcx-box--full rcx-pagination__list"
+          >
+            <li
+              class="rcx-box rcx-box--full rcx-pagination__list-item"
+            >
+              <button
+                class="rcx-box rcx-box--full rcx-pagination__link"
+                disabled=""
+                tabindex="-1"
+              >
+                25
+              </button>
+            </li>
+            <li
+              class="rcx-box rcx-box--full rcx-pagination__list-item"
+            >
+              <button
+                class="rcx-box rcx-box--full rcx-pagination__link"
+                tabindex="0"
+              >
+                50
+              </button>
+            </li>
+            <li
+              class="rcx-box rcx-box--full rcx-pagination__list-item"
+            >
+              <button
+                class="rcx-box rcx-box--full rcx-pagination__link"
+                tabindex="0"
+              >
+                100
+              </button>
+            </li>
+          </ol>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-pagination__right"
+        >
+          <span
+            class="rcx-box rcx-box--full rcx-pagination__label"
+          >
+            Showing results 1 - 5 of 30
+          </span>
+          <ol
+            class="rcx-box rcx-box--full rcx-pagination__list"
+          >
+            <li
+              class="rcx-box rcx-box--full rcx-pagination__list-item"
+            >
+              <button
+                class="rcx-box rcx-box--full rcx-pagination__back"
+                disabled=""
+              >
+                <span
+                  class="rcx-box rcx-box--full rcx-chevron--left rcx-chevron"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1g87xs3"
+                  >
+                    
+                  </i>
+                </span>
+              </button>
+            </li>
+            <li
+              class="rcx-box rcx-box--full rcx-pagination__list-item"
+            >
+              <button
+                class="rcx-box rcx-box--full rcx-pagination__link"
+                disabled=""
+              >
+                1
+              </button>
+            </li>
+            <li
+              class="rcx-box rcx-box--full rcx-pagination__list-item"
+            >
+              <button
+                class="rcx-box rcx-box--full rcx-pagination__link"
+              >
+                2
+              </button>
+            </li>
+            <li
+              class="rcx-box rcx-box--full rcx-pagination__list-item"
+            >
+              <button
+                class="rcx-box rcx-box--full rcx-pagination__forward"
+              >
+                <span
+                  class="rcx-box rcx-box--full rcx-chevron--right rcx-chevron"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-1g87xs3"
+                  >
+                    
+                  </i>
+                </span>
+              </button>
+            </li>
+          </ol>
+        </div>
+      </nav>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders withError without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-9x4qdd"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-1wg1u9h"
+      >
+        <div
+          class="rcx-states"
+        >
+          <i
+            aria-hidden="true"
+            class="rcx-box rcx-box--full rcx-states__icon rcx-icon--name-magnifier rcx-icon rcx-states__icon--danger rcx-css-d884y5"
+          >
+            
+          </i>
+          <h3
+            class="rcx-states__title"
+          >
+            Something_went_wrong
+          </h3>
+          <div
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Reload_page
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders withLoading without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-9x4qdd"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-h9m6k6"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-pln26h rcx-css-1cb6i7s"
+          data-overlayscrollbars="host"
+        >
+          <div
+            class="os-size-observer"
+          >
+            <div
+              class="os-size-observer-listener"
+            />
+          </div>
+          <div
+            class=""
+            data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYHidden"
+            style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; top: 0px; left: 0px; width: calc(100% + 0px); padding: 0px 0px 0px 0px;"
+            tabindex="-1"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-table__wrapper"
+            >
+              <table
+                class="rcx-box rcx-box--full rcx-table--sticky rcx-table--fixed rcx-table"
+              >
+                <thead
+                  class="rcx-box rcx-box--full rcx-table__head"
+                >
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <th
+                      class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                        wrap="no-wrap"
+                      >
+                        Name
+                      </div>
+                    </th>
+                    <th
+                      class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                        wrap="no-wrap"
+                      >
+                        Email
+                      </div>
+                    </th>
+                    <th
+                      class="rcx-box rcx-box--full rcx-table__cell--header rcx-table__cell rcx-css-wbqtoq"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-127j9mz"
+                        wrap="no-wrap"
+                      >
+                        Actions
+                      </div>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="rcx-box rcx-box--full rcx-table__body"
+                >
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1qvl0ud"
+                      >
+                        <span
+                          class="rcx-skeleton rcx-skeleton--rect rcx-css-1oezft"
+                        />
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1eminnr"
+                        >
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1qvl0ud"
+                      >
+                        <span
+                          class="rcx-skeleton rcx-skeleton--rect rcx-css-1oezft"
+                        />
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1eminnr"
+                        >
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1qvl0ud"
+                      >
+                        <span
+                          class="rcx-skeleton rcx-skeleton--rect rcx-css-1oezft"
+                        />
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1eminnr"
+                        >
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1qvl0ud"
+                      >
+                        <span
+                          class="rcx-skeleton rcx-skeleton--rect rcx-css-1oezft"
+                        />
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1eminnr"
+                        >
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1qvl0ud"
+                      >
+                        <span
+                          class="rcx-skeleton rcx-skeleton--rect rcx-css-1oezft"
+                        />
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1eminnr"
+                        >
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1qvl0ud"
+                      >
+                        <span
+                          class="rcx-skeleton rcx-skeleton--rect rcx-css-1oezft"
+                        />
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1eminnr"
+                        >
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1qvl0ud"
+                      >
+                        <span
+                          class="rcx-skeleton rcx-skeleton--rect rcx-css-1oezft"
+                        />
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1eminnr"
+                        >
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1qvl0ud"
+                      >
+                        <span
+                          class="rcx-skeleton rcx-skeleton--rect rcx-css-1oezft"
+                        />
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1eminnr"
+                        >
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1qvl0ud"
+                      >
+                        <span
+                          class="rcx-skeleton rcx-skeleton--rect rcx-css-1oezft"
+                        />
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1eminnr"
+                        >
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                  </tr>
+                  <tr
+                    class="rcx-box rcx-box--full rcx-table__row"
+                  >
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <div
+                        class="rcx-box rcx-box--full rcx-css-1qvl0ud"
+                      >
+                        <span
+                          class="rcx-skeleton rcx-skeleton--rect rcx-css-1oezft"
+                        />
+                        <div
+                          class="rcx-box rcx-box--full rcx-css-1eminnr"
+                        >
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                          <span
+                            class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                          />
+                        </div>
+                      </div>
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                    <td
+                      class="rcx-box rcx-box--full rcx-table__cell"
+                    >
+                      <span
+                        class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
+                      />
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+          <div
+            class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide os-scrollbar-auto-hide-hidden os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable"
+            style="--os-scroll-percent: 0; --os-viewport-percent: 0; --os-scroll-direction: 0;"
+          >
+            <div
+              class="os-scrollbar-track"
+            >
+              <div
+                class="os-scrollbar-handle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`renders withNoResults without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-9x4qdd"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-1wg1u9h"
+      >
+        <div
+          class="rcx-states"
+        >
+          <i
+            aria-hidden="true"
+            class="rcx-box rcx-box--full rcx-states__icon rcx-icon--name-magnifier rcx-icon rcx-css-d884y5"
+          >
+            
+          </i>
+          <h3
+            class="rcx-states__title"
+          >
+            No_results_found
+          </h3>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/apps/meteor/client/views/admin/permissions/UsersInRole/hooks/useRemoveUserFromRole.tsx b/apps/meteor/client/views/admin/permissions/UsersInRole/hooks/useRemoveUserFromRole.tsx
new file mode 100644
index 0000000000000..14d188058246a
--- /dev/null
+++ b/apps/meteor/client/views/admin/permissions/UsersInRole/hooks/useRemoveUserFromRole.tsx
@@ -0,0 +1,52 @@
+import type { IRole, IRoom, IUserInRole } from '@rocket.chat/core-typings';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+export const useRemoveUserFromRole = ({
+	rid,
+	roleId,
+	roleName,
+	roleDescription,
+}: {
+	rid?: IRoom['_id'];
+	roleId: IRole['_id'];
+	roleName: IRole['name'];
+	roleDescription: IRole['description'];
+}) => {
+	const { t } = useTranslation();
+
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+
+	const removeUserFromRoleEndpoint = useEndpoint('POST', '/v1/roles.removeUserFromRole');
+
+	const handleRemove = useEffectEvent((username: IUserInRole['username']) => {
+		const remove = async () => {
+			try {
+				if (!username) throw new Error('Username is required');
+
+				await removeUserFromRoleEndpoint({ roleId, username, scope: rid });
+				dispatchToastMessage({ type: 'success', message: t('User_removed') });
+				queryClient.invalidateQueries({
+					queryKey: ['getUsersInRole'],
+				});
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal(null);
+			}
+		};
+
+		setModal(
+			<GenericModal variant='danger' onConfirm={remove} onCancel={() => setModal(null)} confirmText={t('Delete')}>
+				{t('The_user_s_will_be_removed_from_role_s', { postProcess: 'sprintf', sprintf: [username, roleDescription || roleName] })}
+			</GenericModal>,
+		);
+	});
+
+	return handleRemove;
+};
diff --git a/apps/meteor/client/views/admin/settings/Setting/SettingSkeleton.tsx b/apps/meteor/client/views/admin/settings/Setting/SettingSkeleton.tsx
index 866d9c713739a..f12b51dec3414 100644
--- a/apps/meteor/client/views/admin/settings/Setting/SettingSkeleton.tsx
+++ b/apps/meteor/client/views/admin/settings/Setting/SettingSkeleton.tsx
@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, Flex, InputBox, Skeleton } from '@rocket.chat/fuselage';
+import { Field, FieldLabel, FieldRow, Flex, InputBoxSkeleton, Skeleton } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 
 const SettingSkeleton = (): ReactElement => (
@@ -9,7 +9,7 @@ const SettingSkeleton = (): ReactElement => (
 			</FieldLabel>
 		</Flex.Item>
 		<FieldRow>
-			<InputBox.Skeleton />
+			<InputBoxSkeleton />
 		</FieldRow>
 	</Field>
 );
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.stories.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.stories.tsx
index 69a44435b5d00..8be522d6143b3 100644
--- a/apps/meteor/client/views/admin/users/UsersTable/UsersTable.stories.tsx
+++ b/apps/meteor/client/views/admin/users/UsersTable/UsersTable.stories.tsx
@@ -2,85 +2,83 @@ import { UserStatus } from '@rocket.chat/core-typings';
 import type { Meta, StoryFn } from '@storybook/react';
 
 import UsersTable from './UsersTable';
+import { createMockedPagination } from '../../../../../tests/mocks/data';
 
 export default {
 	component: UsersTable,
 } satisfies Meta<typeof UsersTable>;
 
-const mockedPagination = {
-	current: 0,
-	setCurrent: () => undefined,
-	itemsPerPage: 25 as const,
-	setItemsPerPage: () => undefined,
-	itemsPerPageLabel: () => 'Items per page:',
-	showingResultsLabel: () => 'Showing results 1 - 5 of 5',
-};
+const Template: StoryFn<typeof UsersTable> = (args) => <UsersTable {...args} />;
+
+const mockedUsers = [
+	{
+		_id: '1',
+		username: 'example.user',
+		name: 'Example User',
+		emails: [{ address: 'example@rocket.chat', verified: true }],
+		status: UserStatus.ONLINE,
+		roles: ['user'],
+		active: true,
+		type: '',
+	},
+	{
+		_id: '2',
+		username: 'john.doe',
+		name: 'John Doe',
+		emails: [{ address: 'john@rocket.chat', verified: true }],
+		status: UserStatus.OFFLINE,
+		roles: ['admin', 'user'],
+		active: true,
+		type: '',
+	},
+	{
+		_id: '3',
+		username: 'sarah.smith',
+		name: 'Sarah Smith',
+		emails: [{ address: 'sarah@rocket.chat', verified: true }],
+		status: UserStatus.AWAY,
+		roles: ['user'],
+		active: true,
+		type: '',
+	},
+	{
+		_id: '4',
+		username: 'mike.wilson',
+		name: 'Mike Wilson',
+		emails: [{ address: 'mike@rocket.chat', verified: false }],
+		status: UserStatus.BUSY,
+		roles: ['user'],
+		active: true,
+		type: '',
+	},
+	{
+		_id: '5',
+		username: 'emma.davis',
+		name: 'Emma Davis',
+		emails: [{ address: 'emma@rocket.chat', verified: true }],
+		status: UserStatus.ONLINE,
+		roles: ['moderator', 'user'],
+		active: true,
+		type: '',
+	},
+];
 
-const Template: StoryFn<typeof UsersTable> = (args) => <UsersTable {...args} paginationData={mockedPagination} />;
+const paginationData = createMockedPagination(mockedUsers.length, 5);
 
 export const Default = Template.bind({});
 Default.args = {
-	users: [
-		{
-			_id: '1',
-			username: 'example.user',
-			name: 'Example User',
-			emails: [{ address: 'example@rocket.chat', verified: true }],
-			status: UserStatus.ONLINE,
-			roles: ['user'],
-			active: true,
-			type: '',
-		},
-		{
-			_id: '2',
-			username: 'john.doe',
-			name: 'John Doe',
-			emails: [{ address: 'john@rocket.chat', verified: true }],
-			status: UserStatus.OFFLINE,
-			roles: ['admin', 'user'],
-			active: true,
-			type: '',
-		},
-		{
-			_id: '3',
-			username: 'sarah.smith',
-			name: 'Sarah Smith',
-			emails: [{ address: 'sarah@rocket.chat', verified: true }],
-			status: UserStatus.AWAY,
-			roles: ['user'],
-			active: true,
-			type: '',
-		},
-		{
-			_id: '4',
-			username: 'mike.wilson',
-			name: 'Mike Wilson',
-			emails: [{ address: 'mike@rocket.chat', verified: false }],
-			status: UserStatus.BUSY,
-			roles: ['user'],
-			active: true,
-			type: '',
-		},
-		{
-			_id: '5',
-			username: 'emma.davis',
-			name: 'Emma Davis',
-			emails: [{ address: 'emma@rocket.chat', verified: true }],
-			status: UserStatus.ONLINE,
-			roles: ['moderator', 'user'],
-			active: true,
-			type: '',
-		},
-	],
+	users: mockedUsers,
 	total: 5,
 	isLoading: false,
 	isSuccess: true,
 	tab: 'all',
+	paginationData,
 };
 
 export const Loading = Template.bind({});
 Loading.args = {
 	isLoading: true,
+	paginationData,
 };
 
 export const NoResults = Template.bind({});
@@ -90,4 +88,5 @@ NoResults.args = {
 	isLoading: false,
 	isError: false,
 	isSuccess: true,
+	paginationData,
 };
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.tsx
index c3e98e6762619..742876c1498a7 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.tsx
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/AgentStatusChart.tsx
@@ -9,6 +9,7 @@ import { useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Chart from './Chart';
+import { useChartContext } from './useChartContext';
 import { useUpdateChartData } from './useUpdateChartData';
 import { drawDoughnutChart } from '../../../../../app/livechat/client/lib/chartHandler';
 import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
@@ -39,40 +40,41 @@ const AgentStatusChart = ({ departmentId, ...props }: AgentStatusChartsProps) =>
 	const { t } = useTranslation();
 
 	const canvas: MutableRefObject<HTMLCanvasElement | null> = useRef(null);
-	const context: MutableRefObject<chartjs.Chart<'doughnut'> | undefined> = useRef();
-
-	const updateChartData = useUpdateChartData({
-		context,
-		canvas,
-		t,
-		init,
-	});
 
 	const getAgentStatus = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/agents-status');
 	const { isSuccess, data: { offline = 0, available = 0, away = 0, busy = 0 } = initialData } = useQuery({
 		queryKey: omnichannelQueryKeys.analytics.agentsStatus(departmentId),
 		queryFn: () => getAgentStatus({ departmentId }),
+		gcTime: 0,
 	});
 
-	useEffect(() => {
-		const initChart = async () => {
-			if (!canvas.current) {
-				return;
-			}
+	const context = useChartContext({
+		canvas,
+		init,
+		t,
+	});
 
-			context.current = await init(canvas.current, context.current, t);
-		};
-		initChart();
-	}, [t]);
+	const updateChartData = useUpdateChartData({
+		context,
+		canvas,
+		init,
+		t,
+	});
 
 	useEffect(() => {
-		if (!isSuccess) return;
+		if (!context) {
+			return;
+		}
+
+		if (!isSuccess) {
+			return;
+		}
 
 		updateChartData(t('Offline'), [offline]);
 		updateChartData(t('Available'), [available]);
 		updateChartData(t('Away'), [away]);
 		updateChartData(t('Busy'), [busy]);
-	}, [available, away, busy, offline, isSuccess, t, updateChartData]);
+	}, [context, available, away, busy, offline, isSuccess, t, updateChartData]);
 
 	return <Chart canvasRef={canvas} {...props} />;
 };
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatDurationChart.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatDurationChart.tsx
index e7349209c8c48..3340d590da44a 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatDurationChart.tsx
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatDurationChart.tsx
@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import Chart from './Chart';
 import { getMomentChartLabelsAndData } from './getMomentChartLabelsAndData';
 import { getMomentCurrentLabel } from './getMomentCurrentLabel';
+import { useChartContext } from './useChartContext';
 import { useUpdateChartData } from './useUpdateChartData';
 import { drawLineChart } from '../../../../../app/livechat/client/lib/chartHandler';
 import { secondsToHHMMSS } from '../../../../../lib/utils/secondsToHHMMSS';
@@ -48,19 +49,25 @@ const ChatDurationChart = ({ departmentId, dateRange, ...props }: ChatDurationCh
 	const { t } = useTranslation();
 
 	const canvas = useRef<HTMLCanvasElement | null>(null);
-	const context = useRef<chartjs.Chart<'line'>>();
-
-	const updateChartData = useUpdateChartData({
-		context,
-		canvas,
-		t,
-		init,
-	});
 
 	const getTimings = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/timings');
 	const { isSuccess, data } = useQuery({
 		queryKey: omnichannelQueryKeys.analytics.timings(departmentId, dateRange),
 		queryFn: () => getTimings({ departmentId, ...dateRange }),
+		gcTime: 0,
+	});
+
+	const context = useChartContext({
+		canvas,
+		init,
+		t,
+	});
+
+	const updateChartData = useUpdateChartData({
+		context,
+		canvas,
+		init,
+		t,
 	});
 
 	const {
@@ -73,22 +80,17 @@ const ChatDurationChart = ({ departmentId, dateRange, ...props }: ChatDurationCh
 	};
 
 	useEffect(() => {
-		const initChart = async () => {
-			if (!canvas.current) {
-				return;
-			}
+		if (!context) {
+			return;
+		}
 
-			context.current = await init(canvas.current, context.current, t);
-		};
-		initChart();
-	}, [t]);
-
-	useEffect(() => {
-		if (!isSuccess) return;
+		if (!isSuccess) {
+			return;
+		}
 
 		const label = getMomentCurrentLabel();
 		updateChartData(label, [avg, longest]);
-	}, [avg, longest, isSuccess, t, updateChartData]);
+	}, [context, avg, longest, isSuccess, t, updateChartData]);
 
 	return <Chart canvasRef={canvas} {...props} />;
 };
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.tsx
index 4cea9cbd2fb54..42bd57a98dee8 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.tsx
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsChart.tsx
@@ -9,6 +9,7 @@ import { useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Chart from './Chart';
+import { useChartContext } from './useChartContext';
 import { useUpdateChartData } from './useUpdateChartData';
 import { drawDoughnutChart } from '../../../../../app/livechat/client/lib/chartHandler';
 import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
@@ -40,41 +41,43 @@ const ChatsChart = ({ departmentId, dateRange, ...props }: ChatsChartProps) => {
 	const { t } = useTranslation();
 
 	const canvas: MutableRefObject<HTMLCanvasElement | null> = useRef(null);
-	const context: MutableRefObject<chartjs.Chart<'doughnut'> | undefined> = useRef();
-
-	const updateChartData = useUpdateChartData({
-		context,
-		canvas,
-		t,
-		init,
-	});
 
 	const getChats = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/chats');
 	const { isSuccess, data } = useQuery({
 		queryKey: omnichannelQueryKeys.analytics.chats(departmentId, dateRange),
 		queryFn: () => getChats({ departmentId, ...dateRange }),
+		gcTime: 0,
+	});
+
+	const context = useChartContext({
+		canvas,
+		init,
+		t,
+	});
+
+	const updateChartData = useUpdateChartData({
+		context,
+		canvas,
+		init,
+		t,
 	});
 
 	const { open, queued, closed, onhold } = data ?? initialData;
 
 	useEffect(() => {
-		const initChart = async () => {
-			if (!canvas.current) {
-				return;
-			}
-			context.current = await init(canvas.current, context.current, t);
-		};
-		initChart();
-	}, [t]);
+		if (!context) {
+			return;
+		}
 
-	useEffect(() => {
-		if (!isSuccess) return;
+		if (!isSuccess) {
+			return;
+		}
 
 		updateChartData(t('Open'), [open]);
 		updateChartData(t('Closed'), [closed]);
 		updateChartData(t('On_Hold_Chats'), [onhold]);
 		updateChartData(t('Queued'), [queued]);
-	}, [closed, open, queued, onhold, isSuccess, t, updateChartData]);
+	}, [context, closed, open, queued, onhold, isSuccess, t, updateChartData]);
 
 	return <Chart canvasRef={canvas} {...props} />;
 };
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerAgentChart.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerAgentChart.tsx
index 3dc37a99f1909..9d09de4f39248 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerAgentChart.tsx
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerAgentChart.tsx
@@ -9,8 +9,9 @@ import { useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Chart from './Chart';
+import { useChartContext } from './useChartContext';
 import { useUpdateChartData } from './useUpdateChartData';
-import { drawLineChart } from '../../../../../app/livechat/client/lib/chartHandler';
+import { drawLineChart, resetChart } from '../../../../../app/livechat/client/lib/chartHandler';
 import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
 
 const init = (canvas: HTMLCanvasElement, context: chartjs.Chart<'line'> | undefined, t: TFunction) =>
@@ -29,42 +30,41 @@ const ChatsPerAgentChart = ({ departmentId, dateRange, ...props }: ChatsPerAgent
 	const { t } = useTranslation();
 
 	const canvas = useRef<HTMLCanvasElement | null>(null);
-	const context = useRef<chartjs.Chart<'line'>>();
-
-	const updateChartData = useUpdateChartData({
-		context,
-		canvas,
-		t,
-		init,
-	});
 
 	const getChatsPerAgent = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/chats-per-agent');
 	const { isSuccess, data } = useQuery({
 		queryKey: omnichannelQueryKeys.analytics.chatsPerAgent(departmentId, dateRange),
 		queryFn: () => getChatsPerAgent({ departmentId, ...dateRange }),
+		select: ({ success: _, ...data }) => Object.entries(data),
+		gcTime: 0,
 	});
 
-	useEffect(() => {
-		const initChart = async () => {
-			if (!canvas.current) {
-				return;
-			}
-			context.current = await init(canvas.current, context.current, t);
-		};
-		initChart();
-	}, [t]);
+	const context = useChartContext({
+		canvas,
+		init,
+		t,
+	});
+
+	const updateChartData = useUpdateChartData({
+		context,
+		canvas,
+		init,
+		t,
+	});
 
 	useEffect(() => {
-		if (!isSuccess) return;
+		if (!context) return;
+
+		if (!isSuccess) {
+			return;
+		}
 
-		Object.entries(data).forEach(([name, value]) => {
-			if (name === 'success') {
-				return;
-			}
+		resetChart(context);
 
+		data.forEach(([name, value]) => {
 			updateChartData(name, [value.open, value.closed, value.onhold]);
 		});
-	}, [data, isSuccess, t, updateChartData]);
+	}, [context, data, isSuccess, t, updateChartData]);
 
 	return <Chart canvasRef={canvas} {...props} />;
 };
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerDepartmentChart.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerDepartmentChart.tsx
index 7881cc48636ac..1f4073af6fc1c 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerDepartmentChart.tsx
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ChatsPerDepartmentChart.tsx
@@ -9,8 +9,9 @@ import { useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Chart from './Chart';
+import { useChartContext } from './useChartContext';
 import { useUpdateChartData } from './useUpdateChartData';
-import { drawLineChart } from '../../../../../app/livechat/client/lib/chartHandler';
+import { drawLineChart, resetChart } from '../../../../../app/livechat/client/lib/chartHandler';
 import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
 
 const init = (canvas: HTMLCanvasElement, context: chartjs.Chart<'line'> | undefined, t: TFunction) =>
@@ -29,41 +30,43 @@ const ChatsPerDepartmentChart = ({ departmentId, dateRange, ...props }: ChatsPer
 	const { t } = useTranslation();
 
 	const canvas = useRef<HTMLCanvasElement | null>(null);
-	const context = useRef<chartjs.Chart<'line'>>();
-
-	const updateChartData = useUpdateChartData({
-		context,
-		canvas,
-		t,
-		init,
-	});
 
 	const getChatsPerDepartment = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/chats-per-department');
 	const { isSuccess, data } = useQuery({
 		queryKey: omnichannelQueryKeys.analytics.chatsPerDepartment(departmentId, dateRange),
 		queryFn: () => getChatsPerDepartment({ departmentId, ...dateRange }),
+		select: ({ success: _, ...data }) => Object.entries(data),
+		gcTime: 0,
 	});
 
-	useEffect(() => {
-		const initChart = async () => {
-			if (!canvas.current) {
-				return;
-			}
-			context.current = await init(canvas.current, context.current, t);
-		};
-		initChart();
-	}, [t]);
+	const context = useChartContext({
+		canvas,
+		init,
+		t,
+	});
+
+	const updateChartData = useUpdateChartData({
+		context,
+		canvas,
+		init,
+		t,
+	});
 
 	useEffect(() => {
-		if (!isSuccess) return;
-		Object.entries(data).forEach(([name, value]) => {
-			if (name === 'success') {
-				return;
-			}
+		if (!context) {
+			return;
+		}
+
+		if (!isSuccess) {
+			return;
+		}
+
+		resetChart(context);
 
+		data.forEach(([name, value]) => {
 			updateChartData(name, [value.open, value.closed]);
 		});
-	}, [data, isSuccess, t, updateChartData]);
+	}, [context, data, isSuccess, t, updateChartData]);
 
 	return <Chart canvasRef={canvas} {...props} />;
 };
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ResponseTimesChart.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ResponseTimesChart.tsx
index 40bc38a100b9c..394ba49249f58 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ResponseTimesChart.tsx
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/ResponseTimesChart.tsx
@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next';
 import Chart from './Chart';
 import { getMomentChartLabelsAndData } from './getMomentChartLabelsAndData';
 import { getMomentCurrentLabel } from './getMomentCurrentLabel';
+import { useChartContext } from './useChartContext';
 import { useUpdateChartData } from './useUpdateChartData';
 import { drawLineChart } from '../../../../../app/livechat/client/lib/chartHandler';
 import { secondsToHHMMSS } from '../../../../../lib/utils/secondsToHHMMSS';
@@ -49,14 +50,6 @@ const ResponseTimesChart = ({ departmentId, dateRange, ...props }: ResponseTimes
 	const { t } = useTranslation();
 
 	const canvas = useRef<HTMLCanvasElement | null>(null);
-	const context = useRef<chartjs.Chart<'line'>>();
-
-	const updateChartData = useUpdateChartData({
-		context,
-		canvas,
-		t,
-		init,
-	});
 
 	const getTimings = useEndpoint('GET', '/v1/livechat/analytics/dashboards/charts/timings');
 	const {
@@ -74,25 +67,34 @@ const ResponseTimesChart = ({ departmentId, dateRange, ...props }: ResponseTimes
 	} = useQuery({
 		queryKey: omnichannelQueryKeys.analytics.timings(departmentId, dateRange),
 		queryFn: () => getTimings({ departmentId, ...dateRange }),
+		gcTime: 0,
 	});
 
-	useEffect(() => {
-		const initChart = async () => {
-			if (!canvas.current) {
-				return;
-			}
+	const context = useChartContext({
+		canvas,
+		init,
+		t,
+	});
 
-			context.current = await init(canvas.current, context.current, t);
-		};
-		initChart();
-	}, [t]);
+	const updateChartData = useUpdateChartData({
+		context,
+		canvas,
+		init,
+		t,
+	});
 
 	useEffect(() => {
-		if (!isSuccess) return;
+		if (!context) {
+			return;
+		}
+
+		if (!isSuccess) {
+			return;
+		}
 
 		const label = getMomentCurrentLabel();
 		updateChartData(label, [reactionAvg, reactionLongest, responseAvg, responseLongest]);
-	}, [reactionAvg, reactionLongest, responseAvg, responseLongest, isSuccess, t, updateChartData]);
+	}, [context, reactionAvg, reactionLongest, responseAvg, responseLongest, isSuccess, t, updateChartData]);
 
 	return <Chart canvasRef={canvas} {...props} />;
 };
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useChartContext.tsx b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useChartContext.tsx
new file mode 100644
index 0000000000000..fbdbb6b60e9a3
--- /dev/null
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useChartContext.tsx
@@ -0,0 +1,44 @@
+import type { Chart, ChartType } from 'chart.js';
+import type { TFunction } from 'i18next';
+import type { MutableRefObject } from 'react';
+import { useEffect, useState } from 'react';
+
+type UseChartContextProps<TChart> = {
+	canvas: MutableRefObject<HTMLCanvasElement | null>;
+	init: (canvas: HTMLCanvasElement, context: TChart | undefined, t: TFunction) => Promise<TChart>;
+	t: TFunction;
+};
+
+export const useChartContext = <TChartType extends ChartType>({ canvas, init, t }: UseChartContextProps<Chart<TChartType>>) => {
+	const [context, setContext] = useState<Chart<TChartType>>();
+
+	useEffect(() => {
+		let chart: Chart<TChartType> | undefined;
+		let unmounted = false;
+
+		const initializeChart = async () => {
+			if (!canvas.current) {
+				return;
+			}
+
+			chart = await init(canvas.current, undefined, t);
+
+			if (unmounted) {
+				chart?.destroy();
+				return;
+			}
+
+			setContext(chart);
+		};
+
+		void initializeChart();
+
+		return () => {
+			unmounted = true;
+			chart?.destroy();
+			setContext(undefined);
+		};
+	}, [canvas, init, t]);
+
+	return context;
+};
diff --git a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.ts b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.ts
index ba44e0bb722f4..3439d117dbc91 100644
--- a/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.ts
+++ b/apps/meteor/client/views/omnichannel/realTimeMonitoring/charts/useUpdateChartData.ts
@@ -6,15 +6,15 @@ import { type MutableRefObject } from 'react';
 import { updateChart } from '../../../../../app/livechat/client/lib/chartHandler';
 
 type UseUpdateChartDataOptions<TChart> = {
-	context: MutableRefObject<TChart | undefined>;
+	context: TChart | undefined;
 	canvas: MutableRefObject<HTMLCanvasElement | null>;
 	init: (canvas: HTMLCanvasElement, context: TChart | undefined, t: TFunction) => Promise<TChart>;
 	t: TFunction;
 };
 
 export function useUpdateChartData<TChartType extends chartjs.ChartType>({
-	context: contextRef,
 	canvas: canvasRef,
+	context,
 	init,
 	t,
 }: UseUpdateChartDataOptions<chartjs.Chart<TChartType>>) {
@@ -25,8 +25,8 @@ export function useUpdateChartData<TChartType extends chartjs.ChartType>({
 			return;
 		}
 
-		const context = contextRef.current ?? (await init(canvas, undefined, t));
+		const chartContext = context ?? (await init(canvas, undefined, t));
 
-		await updateChart(context, label, data);
+		await updateChart(chartContext, label, data);
 	});
 }
diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
index 8baf1cda2d8cf..da788b2051fae 100644
--- a/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
+++ b/apps/meteor/client/views/room/composer/messageBox/MessageBox.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable complexity */
 import { isRoomFederated, isRoomNativeFederated, type IMessage, type ISubscription } from '@rocket.chat/core-typings';
 import { useContentBoxSize, useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { useSafeRefCallback } from '@rocket.chat/ui-client';
+import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn, useSafeRefCallback } from '@rocket.chat/ui-client';
 import {
 	MessageComposerAction,
 	MessageComposerToolbarActions,
@@ -11,6 +11,7 @@ import {
 	MessageComposerActionsDivider,
 	MessageComposerToolbarSubmit,
 	MessageComposerButton,
+	MessageComposerInputExpandable,
 } from '@rocket.chat/ui-composer';
 import { useTranslation, useUserPreference, useLayout, useSetting } from '@rocket.chat/ui-contexts';
 import { useMutation } from '@tanstack/react-query';
@@ -423,17 +424,35 @@ const MessageBox = ({
 			{isRecordingVideo && <VideoMessageRecorder reference={messageComposerRef} rid={room._id} tmid={tmid} />}
 			<MessageComposer ref={messageComposerRef} variant={isEditing ? 'editing' : undefined}>
 				{isRecordingAudio && <AudioMessageRecorder rid={room._id} isMicrophoneDenied={isMicrophoneDenied} />}
-				<MessageComposerInput
-					ref={mergedRefs}
-					aria-label={composerPlaceholder}
-					name='msg'
-					disabled={isRecording || !canSend}
-					onChange={setTyping}
-					style={textAreaStyle}
-					placeholder={composerPlaceholder}
-					onPaste={handlePaste}
-					aria-activedescendant={popup.focused ? `popup-item-${popup.focused._id}` : undefined}
-				/>
+				<FeaturePreview feature='expandableMessageComposer'>
+					<FeaturePreviewOn>
+						<MessageComposerInputExpandable
+							dimensions={sizes}
+							ref={mergedRefs}
+							aria-label={composerPlaceholder}
+							name='msg'
+							disabled={isRecording || !canSend}
+							onChange={setTyping}
+							style={textAreaStyle}
+							placeholder={composerPlaceholder}
+							onPaste={handlePaste}
+							aria-activedescendant={popup.focused ? `popup-item-${popup.focused._id}` : undefined}
+						/>
+					</FeaturePreviewOn>
+					<FeaturePreviewOff>
+						<MessageComposerInput
+							ref={mergedRefs}
+							aria-label={composerPlaceholder}
+							name='msg'
+							disabled={isRecording || !canSend}
+							onChange={setTyping}
+							style={textAreaStyle}
+							placeholder={composerPlaceholder}
+							onPaste={handlePaste}
+							aria-activedescendant={popup.focused ? `popup-item-${popup.focused._id}` : undefined}
+						/>
+					</FeaturePreviewOff>
+				</FeaturePreview>
 				<MessageComposerToolbar>
 					<MessageComposerToolbarActions aria-label={t('Message_composer_toolbox_primary_actions')}>
 						<MessageComposerAction
diff --git a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx
index d07adce8fd586..a32ad4561dd1e 100644
--- a/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx
+++ b/apps/meteor/client/views/room/contextualBar/MessageSearchTab/components/MessageSearch.tsx
@@ -3,6 +3,7 @@ import { MessageTypes } from '@rocket.chat/message-types';
 import { useSetting, useTranslation, useUserPreference } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import { Fragment, memo, useState } from 'react';
+import { VisuallyHidden } from 'react-aria';
 import { Virtuoso } from 'react-virtuoso';
 
 import { ContextualbarEmptyContent } from '../../../../../components/Contextualbar';
@@ -36,7 +37,21 @@ const MessageSearch = ({ searchText, globalSearch }: MessageSearchProps): ReactE
 		<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} flexBasis={0}>
 			{messageSearchQuery.data && (
 				<>
-					{messageSearchQuery.data.length === 0 && <ContextualbarEmptyContent title={t('No_results_found')} />}
+					{messageSearchQuery.data.length === 0 && (
+						<Box is='section' aria-live='assertive' aria-atomic='true' tabIndex={-1}
+							key={`no-results-${messageSearchQuery.data.length}`}
+							aria-label={t('Search_Messages_Count', { count: messageSearchQuery.data.length })}
+						>
+							<ContextualbarEmptyContent title={t('No_results_found')} />
+						</Box>
+					)}
+
+					{messageSearchQuery.data.length > 0 && (
+						<VisuallyHidden role='status' aria-live='assertive' aria-atomic='true' aria-relevant='text' id='search-results-announcer'>
+							{t('Search_Messages_Count', { count: messageSearchQuery.data.length })}
+						</VisuallyHidden>
+					)}
+
 					{messageSearchQuery.data.length > 0 && (
 						<MessageListErrorBoundary>
 							<MessageListProvider>
diff --git a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
index 7de3980a9960e..3c1afb8aac2dd 100644
--- a/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
+++ b/apps/meteor/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteLink.tsx
@@ -1,4 +1,4 @@
-import { Box, Field, FieldLabel, FieldRow, UrlInput, Icon, Button, InputBox } from '@rocket.chat/fuselage';
+import { Box, Field, FieldLabel, FieldRow, UrlInput, Icon, Button, InputBoxSkeleton } from '@rocket.chat/fuselage';
 import { useId, type ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -22,7 +22,7 @@ const InviteLink = ({ linkText, captionText, onClickEdit }: InviteLinkProps): Re
 					{t('Invite_Link')}
 				</FieldLabel>
 				<FieldRow>
-					{!linkText && <InputBox.Skeleton />}
+					{!linkText && <InputBoxSkeleton />}
 					{linkText && (
 						<UrlInput id={inviteLinkId} value={linkText} addon={<Icon onClick={(): Promise<void> => copy()} name='copy' size='x16' />} />
 					)}
diff --git a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx
index 65388e03e3e4a..5d7dbab582d2e 100644
--- a/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx
+++ b/apps/meteor/client/views/room/contextualBar/UserInfo/UserInfoWithData.tsx
@@ -72,6 +72,9 @@ const UserInfoWithData = ({ uid, username, rid, onClose, onClickBack }: UserInfo
 			name,
 			username,
 			lastLogin,
+			/**
+			 * TODO: We shouldn't use UserCard components outside UserCard
+			 */
 			roles: roles && getRoles(roles).map((role, index) => <UserCardRole key={index}>{role}</UserCardRole>),
 			bio,
 			canViewAllInfo,
diff --git a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx
index a131208998b76..0b76771b0861f 100644
--- a/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx
+++ b/apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx
@@ -1,6 +1,6 @@
 import type { VideoConference } from '@rocket.chat/core-typings';
 import { css } from '@rocket.chat/css-in-js';
-import { Button, Message, Box, Avatar, Palette, IconButton, ButtonGroup } from '@rocket.chat/fuselage';
+import { Button, Message, Box, Palette, IconButton, ButtonGroup, AvatarStack } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { UserAvatar } from '@rocket.chat/ui-avatar';
 import { useUserDisplayName } from '@rocket.chat/ui-client';
@@ -90,7 +90,7 @@ const VideoConfListItem = ({
 						</ButtonGroup>
 						{joinedUsers.length > 0 && (
 							<Box mis={8} fontScale='c1' display='flex' alignItems='center'>
-								<Avatar.Stack>
+								<AvatarStack>
 									{joinedUsers.map(
 										(user, index) =>
 											user.username &&
@@ -104,7 +104,7 @@ const VideoConfListItem = ({
 												/>
 											),
 									)}
-								</Avatar.Stack>
+								</AvatarStack>
 								<Box mis={4}>
 									{joinedUsers.length > VIDEOCONF_STACK_MAX_USERS
 										? t('__usersCount__joined', { count: joinedUsers.length - VIDEOCONF_STACK_MAX_USERS })
diff --git a/apps/meteor/public/images/featurePreview/expandable-composer.png b/apps/meteor/public/images/featurePreview/expandable-composer.png
new file mode 100644
index 0000000000000..656e441f47a33
Binary files /dev/null and b/apps/meteor/public/images/featurePreview/expandable-composer.png differ
diff --git a/apps/meteor/tests/mocks/data.ts b/apps/meteor/tests/mocks/data.ts
index 8e4083a1d3219..1dde2432ca3be 100644
--- a/apps/meteor/tests/mocks/data.ts
+++ b/apps/meteor/tests/mocks/data.ts
@@ -453,3 +453,12 @@ export function createFakeMonitor(overrides?: Partial<Serialized<ILivechatMonito
 		...overrides,
 	};
 }
+
+export const createMockedPagination = (results = 0, total = 0) => ({
+	current: 0,
+	setCurrent: () => undefined,
+	itemsPerPage: 25 as const,
+	setItemsPerPage: () => undefined,
+	itemsPerPageLabel: () => 'Items per page:',
+	showingResultsLabel: () => `Showing results 1 - ${results} of ${total}`,
+});
diff --git a/ee/apps/ddp-streamer/src/configureServer.ts b/ee/apps/ddp-streamer/src/configureServer.ts
index ed187db498cc3..bf9bd15627cfa 100644
--- a/ee/apps/ddp-streamer/src/configureServer.ts
+++ b/ee/apps/ddp-streamer/src/configureServer.ts
@@ -139,6 +139,7 @@ server.methods({
 	},
 	// Copied from /app/livechat/server/methods/setUpConnection.js
 	'livechat:setUpConnection'(data = {}) {
+		console.warn('Warning: Method livechat:setUpConnection is deprecated and will be removed on v8.0.0');
 		const { token } = data;
 
 		if (typeof token !== 'string') {
diff --git a/ee/packages/media-calls/src/internal/SignalProcessor.ts b/ee/packages/media-calls/src/internal/SignalProcessor.ts
index 2c0a4bfdcf23f..45d99b57e2a4a 100644
--- a/ee/packages/media-calls/src/internal/SignalProcessor.ts
+++ b/ee/packages/media-calls/src/internal/SignalProcessor.ts
@@ -14,6 +14,7 @@ import type { InternalCallParams } from '../definition/common';
 import { logger } from '../logger';
 import { mediaCallDirector } from '../server/CallDirector';
 import { UserActorAgent } from './agents/UserActorAgent';
+import { getNewCallTransferredBy } from '../server/getNewCallTransferredBy';
 import { stripSensitiveDataFromSignal } from '../server/stripSensitiveData';
 
 export type SignalProcessorEvents = {
@@ -143,6 +144,8 @@ export class GlobalSignalProcessor {
 			await mediaCallDirector.renewCallId(call._id);
 		}
 
+		const transferredBy = getNewCallTransferredBy(call);
+
 		if (isCaller) {
 			this.sendSignal(uid, {
 				callId: call._id,
@@ -157,6 +160,8 @@ export class GlobalSignalProcessor {
 					...call.callee,
 				},
 				...(call.callerRequestedId && { requestedCallId: call.callerRequestedId }),
+				...(call.parentCallId && { replacingCallId: call.parentCallId }),
+				...(transferredBy && { transferredBy }),
 			});
 		}
 
@@ -173,6 +178,8 @@ export class GlobalSignalProcessor {
 				contact: {
 					...call.caller,
 				},
+				...(call.parentCallId && { replacingCallId: call.parentCallId }),
+				...(transferredBy && { transferredBy }),
 			});
 		}
 
@@ -268,6 +275,8 @@ export class GlobalSignalProcessor {
 			this.rejectCallRequest(uid, { ...rejection, reason: 'already-requested' });
 		}
 
+		const transferredBy = getNewCallTransferredBy(call);
+
 		this.sendSignal(uid, {
 			callId: call._id,
 			type: 'new',
@@ -281,6 +290,8 @@ export class GlobalSignalProcessor {
 				...call.callee,
 			},
 			requestedCallId: signal.callId,
+			...(call.parentCallId && { replacingCallId: call.parentCallId }),
+			...(transferredBy && { transferredBy }),
 		});
 
 		return call;
diff --git a/ee/packages/media-calls/src/internal/agents/UserActorAgent.ts b/ee/packages/media-calls/src/internal/agents/UserActorAgent.ts
index 6dff62ceef154..5409bef93acc9 100644
--- a/ee/packages/media-calls/src/internal/agents/UserActorAgent.ts
+++ b/ee/packages/media-calls/src/internal/agents/UserActorAgent.ts
@@ -5,6 +5,7 @@ import { MediaCallNegotiations, MediaCalls } from '@rocket.chat/models';
 import { UserActorSignalProcessor } from './CallSignalProcessor';
 import { BaseMediaCallAgent } from '../../base/BaseAgent';
 import { logger } from '../../logger';
+import { getNewCallTransferredBy } from '../../server/getNewCallTransferredBy';
 import { getMediaCallServer } from '../../server/injection';
 
 export class UserActorAgent extends BaseMediaCallAgent {
@@ -167,6 +168,8 @@ export class UserActorAgent extends BaseMediaCallAgent {
 	}
 
 	protected buildNewCallSignal(call: IMediaCall): ServerMediaSignalNewCall {
+		const transferredBy = getNewCallTransferredBy(call);
+
 		return {
 			callId: call._id,
 			type: 'new',
@@ -176,6 +179,7 @@ export class UserActorAgent extends BaseMediaCallAgent {
 			self: this.getMyCallActor(call),
 			contact: this.getOtherCallActor(call),
 			...(call.parentCallId && { replacingCallId: call.parentCallId }),
+			...(transferredBy && { transferredBy }),
 			...(call.callerRequestedId && this.role === 'caller' && { requestedCallId: call.callerRequestedId }),
 		};
 	}
diff --git a/ee/packages/media-calls/src/server/getNewCallTransferredBy.ts b/ee/packages/media-calls/src/server/getNewCallTransferredBy.ts
new file mode 100644
index 0000000000000..d994c2ba916fd
--- /dev/null
+++ b/ee/packages/media-calls/src/server/getNewCallTransferredBy.ts
@@ -0,0 +1,20 @@
+import type { IMediaCall } from '@rocket.chat/core-typings';
+import type { CallContact } from '@rocket.chat/media-signaling';
+
+export function getNewCallTransferredBy(call: IMediaCall): CallContact | null {
+	const { createdBy, parentCallId, caller, callee } = call;
+
+	if (!createdBy || !parentCallId) {
+		return null;
+	}
+
+	if (createdBy.type === caller.type && createdBy.id === caller.id) {
+		return null;
+	}
+
+	if (createdBy.type === callee.type && createdBy.id === callee.id) {
+		return null;
+	}
+
+	return createdBy;
+}
diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
index dcdbe01b31e34..0c48ab4650270 100644
--- a/packages/i18n/src/locales/en.i18n.json
+++ b/packages/i18n/src/locales/en.i18n.json
@@ -315,7 +315,7 @@
   "Accounts_TwoFactorAuthentication_Enforce_Password_Fallback_Description": "Users will be forced to enter their password, for important actions, if no other Two Factor Authentication method is enabled for that user and a password is set for him.",
   "Accounts_TwoFactorAuthentication_MaxDelta": "Maximum Delta",
   "Accounts_TwoFactorAuthentication_MaxDelta_Description": "The Maximum Delta determines how many tokens are valid at any given time. Tokens are generated every 30 seconds, and are valid for (30 * Maximum Delta) seconds.  \nExample: With a Maximum Delta set to 10, each token can be used up to 300 seconds before or after it's timestamp. This is useful when the client's clock is not properly synced with the server.",
-  "Accounts_TwoFactorAuthentication_Max_Invalid_Email_Code_Attempts": "Maximun Invalid Email OTP Codes Allowed",
+  "Accounts_TwoFactorAuthentication_Max_Invalid_Email_Code_Attempts": "Maximum Invalid Email OTP Codes Allowed",
   "Accounts_TwoFactorAuthentication_Max_Invalid_Email_Code_Attempts_Description": "The system allows a maximum number of invalid email OTP codes, after which a new code is automatically generated. We highly recommend using this setting along with 'Block failed login attempts by Username'.",
   "Accounts_TwoFactorAuthentication_RememberFor": "Remember Two Factor for (seconds)",
   "Accounts_TwoFactorAuthentication_RememberFor_Description": "Do not request two factor authorization code if it was already provided before in the given time.",
@@ -581,7 +581,7 @@
   "Apps_License_Message_appId": "License hasn't been issued for this app",
   "Apps_License_Message_bundle": "License issued for a bundle that does not contain the app",
   "Apps_License_Message_expire": "License is no longer valid and needs to be renewed",
-  "Apps_License_Message_maxSeats": "License does not accomodate the current amount of active users. Please increase the number of seats",
+  "Apps_License_Message_maxSeats": "License does not accommodate the current amount of active users. Please increase the number of seats",
   "Apps_License_Message_publicKey": "There has been an error trying to decrypt the license. Please sync your workspace in the Connectivity Services and try again",
   "Apps_License_Message_renewal": "License has expired and needs to be renewed",
   "Apps_License_Message_seats": "License does not have enough seats to accommodate the current amount of active users. Please increase the number of seats",
@@ -698,6 +698,8 @@
   "Attribute_based_access_control": "Attribute-Based Access Control",
   "Attribute_based_access_control_title": "Automate complex access management across your entire organization",
   "Attribute_based_access_control_description": "ABAC automates room access, granting or revoking access based on dynamic user attributes rather than fixed roles.",
+  "ABAC_Attributes": "Subject attributes",
+  "ABAC_Attributes_description": "User characteristics ABAC uses to determine room access",
   "Audio": "Audio",
   "Audio_Notification_Value_Description": "Can be any custom sound or the default ones: beep, chelle, ding, droplet, highbell, seasons",
   "Audio_Notifications_Default_Alert": "Audio Notifications Default Alert",
@@ -944,7 +946,7 @@
   "Cancel_message_input": "Cancel",
   "Cancel_recording": "Cancel recording",
   "Cancel_subscription": "Cancel subscription",
-  "Cancel_subscription_message": "<strong>This workspace will downgrage to Community and lose free access to premium capabilities.</strong><br/><br/> While you can keep using Rocket.Chat, your team will lose access to unlimited mobile push notifications, read receipts, marketplace apps <4>and other capabilities</4>.",
+  "Cancel_subscription_message": "<strong>This workspace will downgrade to Community and lose free access to premium capabilities.</strong><br/><br/> While you can keep using Rocket.Chat, your team will lose access to unlimited mobile push notifications, read receipts, marketplace apps <4>and other capabilities</4>.",
   "Canceled": "Canceled",
   "Canned_Response_Created": "Canned Response created",
   "Canned_Response_Delete_Warning": "Deleting a canned response cannot be undone.",
@@ -985,7 +987,7 @@
   "Channel_to_listen_on": "Channel to listen on",
   "Channel_what_is_this_channel_about": "What is this channel about?",
   "Channels": "Channels",
-  "Channels_added": "Channels added sucessfully",
+  "Channels_added": "Channels added successfully",
   "Channels_are_where_your_team_communicate": "Channels are where your team communicate",
   "Channels_list": "List of public channels",
   "Chart": "Chart",
@@ -2029,6 +2031,8 @@
   "Execute_Synchronization_Now": "Execute Synchronization Now",
   "Exit_Full_Screen": "Exit Full Screen",
   "Expand": "Expand",
+  "Expandable_message_composer": "Expandable Composer",
+  "Expandable_message_composer_description": "Expand the text input area to easily write and review longer messages without having to scroll up and down.",
   "Expand_group": "Expand {{group}}",
   "Expand_all": "Expand all",
   "Expand_view": "Expand view",
@@ -4645,6 +4649,10 @@
   "Search_Installed_Apps": "Search installed apps",
   "Search_Integrations": "Search Integrations",
   "Search_Messages": "Search Messages",
+  "Search_Messages_Count": {
+    "one": "Found {{count}} single result",
+    "other": "Found {{count}} results"
+  },
   "Search_Page_Size": "Page Size",
   "Search_Premium_Apps": "Search Premium apps",
   "Search_Private_Groups": "Search Private Groups",
@@ -6590,7 +6598,7 @@
   "onboarding.form.registeredServerForm.registrationKeepInformed": "By submitting this form you consent to receive more information about Rocket.Chat products, events and updates, according to our <1>privacy policy</1>. You may unsubscribe at any time.",
   "onboarding.form.registeredServerForm.title": "Register your workspace",
   "onboarding.form.standaloneServerForm.manuallyIntegrate": "Need to manually integrate with external services",
-  "onboarding.form.standaloneServerForm.publishOwnApp": "In order to send push notitications you need to compile and publish your own app to Google Play and App Store",
+  "onboarding.form.standaloneServerForm.publishOwnApp": "In order to send push notifications you need to compile and publish your own app to Google Play and App Store",
   "onboarding.form.standaloneServerForm.servicesUnavailable": "Some of the services will be unavailable or will require manual setup",
   "onboarding.form.standaloneServerForm.title": "Standalone Server Confirmation",
   "onboarding.page.alreadyHaveAccount": "Already have an account? <1>Manage your workspaces.</1>",
diff --git a/packages/media-signaling/src/definition/call/IClientMediaCall.ts b/packages/media-signaling/src/definition/call/IClientMediaCall.ts
index c7ad364808191..71b3bb5827b0d 100644
--- a/packages/media-signaling/src/definition/call/IClientMediaCall.ts
+++ b/packages/media-signaling/src/definition/call/IClientMediaCall.ts
@@ -77,6 +77,7 @@ export interface IClientMediaCall {
 	busy: boolean;
 
 	contact: CallContact;
+	transferredBy: CallContact | null;
 	audioLevel: number;
 	localAudioLevel: number;
 
diff --git a/packages/media-signaling/src/definition/signals/server/new.ts b/packages/media-signaling/src/definition/signals/server/new.ts
index 89967bd3a4fd5..92e4d9ed57ba0 100644
--- a/packages/media-signaling/src/definition/signals/server/new.ts
+++ b/packages/media-signaling/src/definition/signals/server/new.ts
@@ -15,4 +15,6 @@ export type ServerMediaSignalNewCall = {
 	requestedCallId?: string;
 	/** If this new call initiated from a transfer, this will hold the id of the call that was transferred */
 	replacingCallId?: string;
+	/** If this new call initiated from a transfer, this will hold the information of the user who requested the transfer */
+	transferredBy?: CallContact;
 };
diff --git a/packages/media-signaling/src/lib/Call.ts b/packages/media-signaling/src/lib/Call.ts
index 8ed715cfbfafb..37e061a8a3ec4 100644
--- a/packages/media-signaling/src/lib/Call.ts
+++ b/packages/media-signaling/src/lib/Call.ts
@@ -78,6 +78,12 @@ export class ClientMediaCall implements IClientMediaCall {
 		return this._contact || {};
 	}
 
+	private _transferredBy: CallContact | null;
+
+	public get transferredBy(): CallContact | null {
+		return this._transferredBy;
+	}
+
 	private _service: CallService | null;
 
 	public get service(): CallService | null {
@@ -200,6 +206,7 @@ export class ClientMediaCall implements IClientMediaCall {
 		this.oldClientState = 'none';
 		this._ignored = false;
 		this._contact = null;
+		this._transferredBy = null;
 		this._service = null;
 	}
 
@@ -263,6 +270,7 @@ export class ClientMediaCall implements IClientMediaCall {
 		this._service = signal.service;
 		this._role = signal.role;
 
+		this._transferredBy = signal.transferredBy || null;
 		this.changeContact(signal.contact);
 
 		if (this._role === 'caller' && !this.acceptedLocally) {
diff --git a/packages/ui-client/src/hooks/useFeaturePreviewList.ts b/packages/ui-client/src/hooks/useFeaturePreviewList.ts
index 840f3956c6059..f8fef33c53900 100644
--- a/packages/ui-client/src/hooks/useFeaturePreviewList.ts
+++ b/packages/ui-client/src/hooks/useFeaturePreviewList.ts
@@ -5,7 +5,8 @@ export type FeaturesAvailable =
 	| 'enable-timestamp-message-parser'
 	| 'contextualbarResizable'
 	| 'newNavigation'
-	| 'secondarySidebar';
+	| 'secondarySidebar'
+	| 'expandableMessageComposer';
 
 export type FeaturePreviewProps = {
 	name: FeaturesAvailable;
@@ -73,6 +74,15 @@ export const defaultFeaturesPreview: FeaturePreviewProps[] = [
 			value: true,
 		},
 	},
+	{
+		name: 'expandableMessageComposer',
+		i18n: 'Expandable_message_composer',
+		description: 'Expandable_message_composer_description',
+		imageUrl: 'images/featurePreview/expandable-composer.png',
+		group: 'Message',
+		value: false,
+		enabled: true,
+	},
 ];
 
 export const enabledDefaultFeatures = defaultFeaturesPreview.filter((feature) => feature.enabled);
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx b/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx
index b15ddb1a3ea0f..3c03bed370ea0 100644
--- a/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx
+++ b/packages/ui-composer/src/MessageComposer/MessageComposer.stories.tsx
@@ -12,6 +12,7 @@ import {
 	MessageComposerToolbarSubmit,
 	MessageComposerSkeleton,
 	MessageComposerHint,
+	MessageComposerInputExpandable,
 } from '.';
 
 export default {
@@ -48,6 +49,21 @@ export const Default: StoryFn<typeof MessageComposer> = () => (
 	</MessageComposer>
 );
 
+export const Expandable: StoryFn<typeof MessageComposer> = () => (
+	<MessageComposer>
+		<MessageComposerInputExpandable
+			dimensions={{
+				inlineSize: 400,
+				blockSize: 120,
+			}}
+			placeholder='Type a message...'
+		/>
+		<MessageComposerToolbar>
+			<MessageToolbarActions />
+		</MessageComposerToolbar>
+	</MessageComposer>
+);
+
 export const ToolbarActions: StoryFn<typeof MessageComposerToolbarActions> = () => <MessageToolbarActions />;
 
 export const WithHints: StoryFn<typeof MessageComposer> = () => (
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInputExpandable.spec.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInputExpandable.spec.tsx
new file mode 100644
index 0000000000000..804c21b9bba3a
--- /dev/null
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerInputExpandable.spec.tsx
@@ -0,0 +1,117 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import MessageComposerInputExpandable from './MessageComposerInputExpandable';
+
+test('should show expand button when dimensions.blockSize > 100', () => {
+	render(
+		<MessageComposerInputExpandable
+			dimensions={{
+				inlineSize: 400,
+				blockSize: 120,
+			}}
+			placeholder='Type a message...'
+		/>,
+	);
+
+	const expandButton = screen.getByRole('button');
+	expect(expandButton).toBeInTheDocument();
+	expect(expandButton).toHaveAttribute('title', 'Expand');
+});
+
+test('should not show expand button when dimensions.blockSize <= 100', () => {
+	render(
+		<MessageComposerInputExpandable
+			dimensions={{
+				inlineSize: 400,
+				blockSize: 80,
+			}}
+			placeholder='Type a message...'
+		/>,
+	);
+
+	const expandButton = screen.queryByRole('button');
+	expect(expandButton).not.toBeInTheDocument();
+});
+
+test('should expand input when expand button is clicked', () => {
+	render(
+		<MessageComposerInputExpandable
+			dimensions={{
+				inlineSize: 400,
+				blockSize: 120,
+			}}
+			placeholder='Type a message...'
+		/>,
+	);
+
+	const expandButton = screen.getByRole('button');
+	const textarea = screen.getByRole('textbox');
+
+	// Initially not expanded
+	expect(textarea).not.toHaveStyle({ height: '500px' });
+
+	// Click to expand
+	fireEvent.click(expandButton);
+
+	// Should be expanded now
+	expect(textarea).toHaveStyle({ height: '500px' });
+	expect(textarea).toHaveStyle({ maxHeight: '50vh' });
+	expect(expandButton).toHaveAttribute('title', 'Collapse');
+});
+
+test('should collapse input when collapse button is clicked', () => {
+	render(
+		<MessageComposerInputExpandable
+			dimensions={{
+				inlineSize: 400,
+				blockSize: 120,
+			}}
+			placeholder='Type a message...'
+		/>,
+	);
+
+	const expandButton = screen.getByRole('button');
+	const textarea = screen.getByRole('textbox');
+
+	// Expand first
+	fireEvent.click(expandButton);
+	expect(textarea).toHaveStyle({ height: '500px' });
+
+	// Click to collapse
+	fireEvent.click(expandButton);
+
+	// Should be collapsed now
+	expect(textarea).not.toHaveStyle({ height: '500px' });
+	expect(textarea).not.toHaveStyle({ maxHeight: '50vh' });
+	expect(expandButton).toHaveAttribute('title', 'Expand');
+});
+
+test('should auto-collapse when input is cleared', () => {
+	render(
+		<MessageComposerInputExpandable
+			dimensions={{
+				inlineSize: 400,
+				blockSize: 120,
+			}}
+			placeholder='Type a message...'
+		/>,
+	);
+
+	const expandButton = screen.getByRole('button');
+	const textarea = screen.getByRole('textbox');
+
+	// Expand first
+	fireEvent.click(expandButton);
+	expect(textarea).toHaveStyle({ height: '500px' });
+
+	// Type some text
+	fireEvent.change(textarea, { target: { value: 'Some text' } });
+	expect(textarea).toHaveStyle({ height: '500px' });
+
+	// Clear the text
+	fireEvent.change(textarea, { target: { value: '' } });
+
+	// Should auto-collapse
+	expect(textarea).not.toHaveStyle({ height: '500px' });
+	expect(textarea).not.toHaveStyle({ maxHeight: '50vh' });
+});
diff --git a/packages/ui-composer/src/MessageComposer/MessageComposerInputExpandable.tsx b/packages/ui-composer/src/MessageComposer/MessageComposerInputExpandable.tsx
new file mode 100644
index 0000000000000..86ed216e699b3
--- /dev/null
+++ b/packages/ui-composer/src/MessageComposer/MessageComposerInputExpandable.tsx
@@ -0,0 +1,55 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import { useState, type ComponentProps, ChangeEvent, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import MessageComposerInput from './MessageComposerInput';
+
+export type ExpandComposerButtonProps = ComponentProps<typeof Box> & {
+	dimensions: Readonly<{
+		inlineSize: number;
+		blockSize: number;
+	}>;
+};
+
+const MessageComposerInputExpandable = forwardRef<HTMLTextAreaElement, ExpandComposerButtonProps>(
+	({ dimensions, onChange, ...props }, ref) => {
+		const { t } = useTranslation();
+		const [expanded, setExpanded] = useState(false);
+
+		const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+			if (event.target.value.length === 0) {
+				setExpanded(false);
+			}
+
+			onChange?.(event);
+		};
+
+		return (
+			<>
+				{dimensions.blockSize > 100 && (
+					<Box
+						position='absolute'
+						padding={8}
+						className={css`
+							top: 0;
+							right: 0;
+						`}
+					>
+						<IconButton
+							small
+							icon={expanded ? 'arrow-collapse' : 'arrow-expand'}
+							title={expanded ? t('Collapse') : t('Expand')}
+							onClick={() => setExpanded(!expanded)}
+						/>
+					</Box>
+				)}
+				<MessageComposerInput ref={ref} onChange={handleChange} {...(!!expanded && { height: 500, maxHeight: '50vh' })} {...props} />
+			</>
+		);
+	},
+);
+
+MessageComposerInputExpandable.displayName = 'MessageComposerInputExpandable';
+
+export default MessageComposerInputExpandable;
diff --git a/packages/ui-composer/src/MessageComposer/__snapshots__/MessageComposer.spec.tsx.snap b/packages/ui-composer/src/MessageComposer/__snapshots__/MessageComposer.spec.tsx.snap
index 4c69645109556..54d541276250d 100644
--- a/packages/ui-composer/src/MessageComposer/__snapshots__/MessageComposer.spec.tsx.snap
+++ b/packages/ui-composer/src/MessageComposer/__snapshots__/MessageComposer.spec.tsx.snap
@@ -189,6 +189,211 @@ exports[`renders Default without crashing 1`] = `
 </body>
 `;
 
+exports[`renders Expandable without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-input-box__wrapper rcx-css-1t5etly"
+      role="group"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-1uzskp3 rcx-css-1v3yn09"
+      >
+        <button
+          class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button"
+          title="Expand"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="rcx-box rcx-box--full rcx-icon--name-arrow-expand rcx-icon rcx-css-4pvxx3"
+          >
+            
+          </i>
+        </button>
+      </div>
+      <textarea
+        class="rcx-box rcx-box--full rcx-css-1fg3rdf rc-message-box__textarea js-input-message rcx-css-2h4snk"
+        placeholder="Type a message..."
+        rows="1"
+      />
+      <div
+        class="rcx-box rcx-box--full rcx-css-jyts6z"
+      >
+        <div
+          aria-orientation="horizontal"
+          class="rcx-button-group rcx-button-group--align-start rcx-button-group--small"
+          role="toolbar"
+        >
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="emoji"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-emoji rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+          <hr
+            class="rcx-box rcx-box--full rcx-divider--vertical rcx-divider rcx-button-group__item rcx-css-e8uboy"
+          />
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="bold"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-bold rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="italic"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-italic rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="underline"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-underline rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="strike"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-strike rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="code"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-code rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="multiline"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-multiline rcx-icon rcx-css-4pvxx3"
+            >
+              ⁅
+            </i>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="link"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-link rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="katex"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-katex rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+          <hr
+            class="rcx-box rcx-box--full rcx-divider--vertical rcx-divider rcx-button-group__item rcx-css-e8uboy"
+          />
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="mic"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-mic rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="video"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-video rcx-icon rcx-css-4pvxx3"
+            >
+              ❲
+            </i>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="attachment"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-clip rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+          <button
+            class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+            title="more"
+            type="button"
+          >
+            <i
+              aria-hidden="true"
+              class="rcx-box rcx-box--full rcx-icon--name-plus rcx-icon rcx-css-4pvxx3"
+            >
+              
+            </i>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`renders Loading without crashing 1`] = `
 <body>
   <div>
diff --git a/packages/ui-composer/src/MessageComposer/index.ts b/packages/ui-composer/src/MessageComposer/index.ts
index edf466ab2966f..1ff2874e90d16 100644
--- a/packages/ui-composer/src/MessageComposer/index.ts
+++ b/packages/ui-composer/src/MessageComposer/index.ts
@@ -5,6 +5,7 @@ import MessageComposerButton from './MessageComposerButton';
 import MessageComposerHint from './MessageComposerHint';
 import MessageComposerIcon from './MessageComposerIcon';
 import MessageComposerInput from './MessageComposerInput';
+import MessageComposerInputExpandable from './MessageComposerInputExpandable';
 import MessageComposerSkeleton from './MessageComposerSkeleton';
 import MessageComposerToolbar from './MessageComposerToolbar';
 import MessageComposerToolbarActions from './MessageComposerToolbarActions';
@@ -15,6 +16,7 @@ export {
 	MessageComposerAction,
 	MessageComposerActionsDivider,
 	MessageComposerInput,
+	MessageComposerInputExpandable,
 	MessageComposerToolbar,
 	MessageComposerToolbarActions,
 	MessageComposerToolbarSubmit,
diff --git a/packages/ui-voip/src/v2/useMediaSessionInstance.ts b/packages/ui-voip/src/v2/useMediaSessionInstance.ts
index db55bcfafb181..b72b250e97e4c 100644
--- a/packages/ui-voip/src/v2/useMediaSessionInstance.ts
+++ b/packages/ui-voip/src/v2/useMediaSessionInstance.ts
@@ -97,7 +97,8 @@ class MediaSessionStore extends Emitter<{ change: void }> {
 
 	private makeInstance(userId: string) {
 		if (this.sessionInstance !== null) {
-			this.sessionInstance.disableStateReport();
+			this.sessionInstance.endSession();
+			this.sessionInstance = null;
 		}
 
 		if (!this._webrtcProcessorFactory || !this.sendSignalFn) {
diff --git a/packages/web-ui-registration/src/template/FormSkeleton.tsx b/packages/web-ui-registration/src/template/FormSkeleton.tsx
index 31425a0847f27..1fbe850d8abee 100644
--- a/packages/web-ui-registration/src/template/FormSkeleton.tsx
+++ b/packages/web-ui-registration/src/template/FormSkeleton.tsx
@@ -1,4 +1,4 @@
-import { Field, FieldLabel, FieldRow, FieldHint, FieldDescription, InputBox, Skeleton } from '@rocket.chat/fuselage';
+import { Field, FieldLabel, FieldRow, FieldHint, FieldDescription, Skeleton, InputBoxSkeleton } from '@rocket.chat/fuselage';
 import { Form } from '@rocket.chat/layout';
 import type { ReactElement } from 'react';
 
@@ -19,7 +19,7 @@ const FormSkeleton = (): ReactElement => {
 					<Skeleton />
 				</FieldDescription>
 				<FieldRow>
-					<InputBox.Skeleton />
+					<InputBoxSkeleton />
 				</FieldRow>
 				<FieldHint>
 					<Skeleton />