diff --git a/.storybook/decorators.js b/.storybook/decorators.js
index db662ca23039..8a3804864ef7 100644
--- a/.storybook/decorators.js
+++ b/.storybook/decorators.js
@@ -31,11 +31,20 @@ export const rocketChatDecorator = (fn) => {
 };
 
 export const fullHeightDecorator = (storyFn) =>
-	<div style={{ display: 'flex', flexDirection: 'column', maxHeight: '100vh' }}>
+	<div style={{
+		display: 'flex',
+		flexDirection: 'column',
+		maxHeight: '100vh',
+	}}>
 		{storyFn()}
 	</div>;
 
 export const centeredDecorator = (storyFn) =>
-	<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
+	<div style={{
+		display: 'flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		minHeight: '100vh',
+	}}>
 		{storyFn()}
 	</div>;
diff --git a/.storybook/mocks/providers.js b/.storybook/mocks/providers.js
index 1cdd00b7dac1..96aa4bcf9a8d 100644
--- a/.storybook/mocks/providers.js
+++ b/.storybook/mocks/providers.js
@@ -2,6 +2,7 @@ import i18next from 'i18next';
 import React from 'react';
 
 import { TranslationContext } from '../../client/contexts/TranslationContext';
+import ServerProvider from '../../client/providers/ServerProvider';
 
 let contextValue;
 
@@ -61,7 +62,9 @@ function TranslationProviderMock({ children }) {
 }
 
 export function MeteorProviderMock({ children }) {
-	return <TranslationProviderMock>
-		{children}
-	</TranslationProviderMock>;
+	return <ServerProvider>
+		<TranslationProviderMock>
+			{children}
+		</TranslationProviderMock>
+	</ServerProvider>;
 }
diff --git a/client/components/Card/Body.js b/client/components/Card/Body.tsx
similarity index 50%
rename from client/components/Card/Body.js
rename to client/components/Card/Body.tsx
index fefef7eb60a6..c33c95ba712f 100644
--- a/client/components/Card/Body.js
+++ b/client/components/Card/Body.tsx
@@ -1,7 +1,10 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC, CSSProperties } from 'react';
 
-const Body = ({ children, flexDirection = 'row' }) => (
+const Body: FC<{ flexDirection: CSSProperties['flexDirection'] }> = ({
+	children,
+	flexDirection = 'row',
+}) => (
 	<Box mb='x8' display='flex' flexDirection={flexDirection} flexGrow={1}>
 		{children}
 	</Box>
diff --git a/client/components/Card/Card.stories.js b/client/components/Card/Card.stories.js
index 7af0a3351640..2d243b70285b 100644
--- a/client/components/Card/Card.stories.js
+++ b/client/components/Card/Card.stories.js
@@ -1,10 +1,10 @@
 import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import Card from './Card';
+import Card from '.';
 
 export default {
-	title: 'components/basic/Card',
+	title: 'components/Card',
 	component: Card,
 };
 
@@ -74,7 +74,7 @@ export const Double = () => (
 							<Card.Icon name='cross' />A bunch of stuff
 						</Box>
 						<Box display='flex' flexDirection='row' alignItems='center'>
-							<Card.Icon name='num-pad' />A bunch of stuff
+							<Card.Icon name='dialpad' />A bunch of stuff
 						</Box>
 					</Box>
 					<Box>
diff --git a/client/components/Card/Card.js b/client/components/Card/Card.tsx
similarity index 72%
rename from client/components/Card/Card.js
rename to client/components/Card/Card.tsx
index c8eaa55402e3..75c41e9485a2 100644
--- a/client/components/Card/Card.js
+++ b/client/components/Card/Card.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Card = ({ children, ...props }) => (
+const Card: FC = ({ children, ...props }) => (
 	<Box
 		display='flex'
 		flexDirection='column'
diff --git a/client/components/Card/CardDivider.js b/client/components/Card/CardDivider.js
deleted file mode 100644
index 1c9a216bf5a4..000000000000
--- a/client/components/Card/CardDivider.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Divider } from '@rocket.chat/fuselage';
-import React from 'react';
-
-const CardDivider = () => <Divider width='x1' mi='x24' mb='none' alignSelf='stretch' />;
-
-export default CardDivider;
diff --git a/client/components/Card/CardDivider.tsx b/client/components/Card/CardDivider.tsx
new file mode 100644
index 000000000000..52ef72dbd409
--- /dev/null
+++ b/client/components/Card/CardDivider.tsx
@@ -0,0 +1,6 @@
+import { Divider } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+const CardDivider: FC = () => <Divider width='x1' mi='x24' mb='none' alignSelf='stretch' />;
+
+export default CardDivider;
diff --git a/client/components/Card/CardIcon.js b/client/components/Card/CardIcon.tsx
similarity index 71%
rename from client/components/Card/CardIcon.js
rename to client/components/Card/CardIcon.tsx
index 7d48697365bc..66e387834c89 100644
--- a/client/components/Card/CardIcon.js
+++ b/client/components/Card/CardIcon.tsx
@@ -1,7 +1,7 @@
 import { Box, Icon } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const CardIcon = ({ name, children, ...props }) => (
+const CardIcon: FC<{ name: string }> = ({ name, children, ...props }) => (
 	<Box
 		minWidth='x16'
 		display='inline-flex'
diff --git a/client/components/Card/Col.js b/client/components/Card/Col.tsx
similarity index 71%
rename from client/components/Card/Col.js
rename to client/components/Card/Col.tsx
index 5f8700ee85f1..e3107ea3fc97 100644
--- a/client/components/Card/Col.js
+++ b/client/components/Card/Col.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Col = ({ children }) => (
+const Col: FC = ({ children }) => (
 	<Box display='flex' alignSelf='stretch' w='x228' flexDirection='column' fontScale='c1'>
 		{children}
 	</Box>
diff --git a/client/components/Card/ColSection.js b/client/components/Card/ColSection.tsx
similarity index 61%
rename from client/components/Card/ColSection.js
rename to client/components/Card/ColSection.tsx
index 172149515c1d..b09b17dafd57 100644
--- a/client/components/Card/ColSection.js
+++ b/client/components/Card/ColSection.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const ColSection = ({ children }) => (
+const ColSection: FC = ({ children }) => (
 	<Box mb='x8' color='info'>
 		{children}
 	</Box>
diff --git a/client/components/Card/ColTitle.js b/client/components/Card/ColTitle.tsx
similarity index 62%
rename from client/components/Card/ColTitle.js
rename to client/components/Card/ColTitle.tsx
index 65488def96c8..80298c09b86c 100644
--- a/client/components/Card/ColTitle.js
+++ b/client/components/Card/ColTitle.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const ColTitle = ({ children }) => (
+const ColTitle: FC = ({ children }) => (
 	<Box fontScale='c2' m='none'>
 		{children}
 	</Box>
diff --git a/client/components/Card/Footer.js b/client/components/Card/Footer.js
deleted file mode 100644
index 330561cd9db5..000000000000
--- a/client/components/Card/Footer.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
-
-const Footer = ({ children }) => <Box mb='x8'>{children}</Box>;
-
-export default Footer;
diff --git a/client/components/Card/Footer.tsx b/client/components/Card/Footer.tsx
new file mode 100644
index 000000000000..22c4304cc64c
--- /dev/null
+++ b/client/components/Card/Footer.tsx
@@ -0,0 +1,6 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { FC } from 'react';
+
+const Footer: FC = ({ children }) => <Box mb='x8'>{children}</Box>;
+
+export default Footer;
diff --git a/client/components/Card/Title.js b/client/components/Card/Title.tsx
similarity index 62%
rename from client/components/Card/Title.js
rename to client/components/Card/Title.tsx
index 46f38ea0acf2..5f547f649d39 100644
--- a/client/components/Card/Title.js
+++ b/client/components/Card/Title.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { FC } from 'react';
 
-const Title = ({ children }) => (
+const Title: FC = ({ children }) => (
 	<Box mb='x8' fontScale='p2'>
 		{children}
 	</Box>
diff --git a/client/components/Card/index.ts b/client/components/Card/index.ts
index cc0c4521665e..632c01e5a811 100644
--- a/client/components/Card/index.ts
+++ b/client/components/Card/index.ts
@@ -8,6 +8,8 @@ import ColTitle from './ColTitle';
 import Footer from './Footer';
 import Title from './Title';
 
+export const DOUBLE_COLUMN_CARD_WIDTH = 552;
+
 export default Object.assign(Card, {
 	Title,
 	Body,
@@ -19,5 +21,3 @@ export default Object.assign(Card, {
 	Divider: CardDivider,
 	Icon: CardIcon,
 });
-
-export const DOUBLE_COLUMN_CARD_WIDTH = 552;
diff --git a/client/components/DotLeader.stories.js b/client/components/DotLeader.stories.js
index 3cbf9b6b6960..487fed3033e8 100644
--- a/client/components/DotLeader.stories.js
+++ b/client/components/DotLeader.stories.js
@@ -4,7 +4,7 @@ import React from 'react';
 import DotLeader from './DotLeader';
 
 export default {
-	title: 'components/basic/DotLeader',
+	title: 'components/DotLeader',
 	component: DotLeader,
 };
 
diff --git a/client/components/Header/Header.stories.js b/client/components/Header/Header.stories.js
index dd5e8f9a903b..522a3b7760d2 100644
--- a/client/components/Header/Header.stories.js
+++ b/client/components/Header/Header.stories.js
@@ -9,7 +9,7 @@ import RoomAvatar from '../avatar/RoomAvatar';
 import Header from './Header';
 
 export default {
-	title: 'Chat Header',
+	title: 'room/Header',
 	component: Header,
 };
 
diff --git a/client/components/Message/Attachments/components/Image.stories.js b/client/components/Message/Attachments/components/Image.stories.js
index d5aa1af10cc7..5f8a5789fc63 100644
--- a/client/components/Message/Attachments/components/Image.stories.js
+++ b/client/components/Message/Attachments/components/Image.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import Retry from './Retry';
 
 export default {
-	title: 'Image',
+	title: 'components/Image',
 	component: Image,
 };
 
diff --git a/client/components/Message/Metrics/Metrics.stories.js b/client/components/Message/Metrics/Metrics.stories.js
index 49f2657f3cd6..55ea77eceb9c 100644
--- a/client/components/Message/Metrics/Metrics.stories.js
+++ b/client/components/Message/Metrics/Metrics.stories.js
@@ -5,7 +5,7 @@ import Reply from './Reply';
 import Metrics from './index';
 
 export default {
-	title: 'components/Message/Metrics',
+	title: 'message/Metrics',
 	component: Metrics,
 };
 
diff --git a/client/components/Page/PageScrollableContent.tsx b/client/components/Page/PageScrollableContent.tsx
index 1c1298e9037b..2d809c51ec12 100644
--- a/client/components/Page/PageScrollableContent.tsx
+++ b/client/components/Page/PageScrollableContent.tsx
@@ -10,7 +10,14 @@ type PageScrollableContentProps = {
 const PageScrollableContent = forwardRef<HTMLElement, PageScrollableContentProps>(
 	function PageScrollableContent({ onScrollContent, ...props }, ref) {
 		return (
-			<Box display='flex' flexShrink={1} flexDirection='column' flexGrow={1} overflow='hidden'>
+			<Box
+				height='50vh'
+				display='flex'
+				flexShrink={1}
+				flexDirection='column'
+				flexGrow={1}
+				overflow='hidden'
+			>
 				<ScrollableContentWrapper
 					onScroll={onScrollContent as CustomScrollbarsProps['onScroll']}
 					ref={ref as any}
diff --git a/client/components/data/Counter.js b/client/components/data/Counter.js
index fd9e4cccd1e8..d84731fe7778 100644
--- a/client/components/data/Counter.js
+++ b/client/components/data/Counter.js
@@ -8,7 +8,15 @@ function Counter({ count, variation = 0, description }) {
 		<>
 			<Flex.Container alignItems='end'>
 				<Box>
-					<Box is='span' color='default' fontScale='h1' style={{ fontSize: '3em', lineHeight: 1 }}>
+					<Box
+						is='span'
+						color='default'
+						fontScale='h1'
+						style={{
+							fontSize: '3em',
+							lineHeight: 1,
+						}}
+					>
 						{count}
 					</Box>
 					<Growth fontScale='s1'>{variation}</Growth>
diff --git a/client/lib/asyncState/AsyncStatePhase.ts b/client/lib/asyncState/AsyncStatePhase.ts
index 09b40a8c0e79..937213c86fa7 100644
--- a/client/lib/asyncState/AsyncStatePhase.ts
+++ b/client/lib/asyncState/AsyncStatePhase.ts
@@ -1,4 +1,4 @@
-export const enum AsyncStatePhase {
+export enum AsyncStatePhase {
 	LOADING = 'loading',
 	RESOLVED = 'resolved',
 	REJECTED = 'rejected',
diff --git a/client/sidebar/Item/Condensed.js b/client/sidebar/Item/Condensed.js
index f56b4f2615ab..5a233d889519 100644
--- a/client/sidebar/Item/Condensed.js
+++ b/client/sidebar/Item/Condensed.js
@@ -5,6 +5,7 @@ import React, { memo, useState } from 'react';
 const Condensed = ({
 	icon,
 	title = '',
+	titleIcon,
 	avatar,
 	actions,
 	href,
diff --git a/client/sidebar/Item/Condensed.stories.js b/client/sidebar/Item/Condensed.stories.js
index bf42db4d39da..a11138cace7c 100644
--- a/client/sidebar/Item/Condensed.stories.js
+++ b/client/sidebar/Item/Condensed.stories.js
@@ -6,7 +6,7 @@ import UserAvatar from '../../components/avatar/UserAvatar';
 import Condensed from './Condensed';
 
 export default {
-	title: 'Sidebar/condensed',
+	title: 'Sidebar/Condensed',
 	component: Condensed,
 };
 
diff --git a/client/sidebar/Item/Extended.js b/client/sidebar/Item/Extended.js
index ef2cba910992..42aa7a165b75 100644
--- a/client/sidebar/Item/Extended.js
+++ b/client/sidebar/Item/Extended.js
@@ -14,6 +14,7 @@ const Extended = ({
 	menu,
 	menuOptions,
 	subtitle = '',
+	titleIcon,
 	badges,
 	threadUnread,
 	unread,
diff --git a/client/sidebar/Item/Extended.stories.js b/client/sidebar/Item/Extended.stories.js
index 4de55d78fc99..90c42d2d8b22 100644
--- a/client/sidebar/Item/Extended.stories.js
+++ b/client/sidebar/Item/Extended.stories.js
@@ -78,7 +78,6 @@ export const Menu = () => (
 			clickable
 			title={title}
 			subtitle={subtitle}
-			w
 			titleIcon={<Box mi='x4'>{<Status.Online />}</Box>}
 			avatar={avatar}
 			menuOptions={{
diff --git a/client/sidebar/Item/Medium.js b/client/sidebar/Item/Medium.js
index 6246486b18ca..1c019ec24e86 100644
--- a/client/sidebar/Item/Medium.js
+++ b/client/sidebar/Item/Medium.js
@@ -5,6 +5,7 @@ import React, { memo, useState } from 'react';
 const Medium = ({
 	icon,
 	title = '',
+	titleIcon,
 	avatar,
 	actions,
 	href,
diff --git a/client/sidebar/Item/Medium.stories.js b/client/sidebar/Item/Medium.stories.js
index a0132ca0e758..a4b42a20d598 100644
--- a/client/sidebar/Item/Medium.stories.js
+++ b/client/sidebar/Item/Medium.stories.js
@@ -6,7 +6,7 @@ import UserAvatar from '../../components/avatar/UserAvatar';
 import Medium from './Medium';
 
 export default {
-	title: 'Sidebar/medium',
+	title: 'Sidebar/Medium',
 	component: Medium,
 };
 
diff --git a/client/sidebar/Sidebar.stories.js b/client/sidebar/Sidebar.stories.js
index e127f143244e..b67318dc6e68 100644
--- a/client/sidebar/Sidebar.stories.js
+++ b/client/sidebar/Sidebar.stories.js
@@ -149,9 +149,9 @@ const Sidebar = () => (
 	<>
 		<SettingsContext.Provider value={settingContextValue}>
 			<UserContext.Provider value={userContextValue}>
-				<aside class='sidebar sidebar--main' role='navigation'>
+				<aside className='sidebar sidebar--main' role='navigation'>
 					<Header />
-					<div class='rooms-list sidebar--custom-colors' aria-label='Channels' role='region'>
+					<div className='rooms-list sidebar--custom-colors' aria-label='Channels' role='region'>
 						<RoomList />
 					</div>
 				</aside>
diff --git a/client/sidebar/hooks/useSidebarPaletteColor.js b/client/sidebar/hooks/useSidebarPaletteColor.js
index 4c292d95c3f5..2b7568c8764d 100644
--- a/client/sidebar/hooks/useSidebarPaletteColor.js
+++ b/client/sidebar/hooks/useSidebarPaletteColor.js
@@ -138,7 +138,8 @@ const useTheme = () => {
 	return result;
 };
 
-const toVar = (color) => (color[0] === '#' ? color : oldPallet[color] || `var(--${color})`);
+const toVar = (color) =>
+	color && color[0] === '#' ? color : oldPallet[color] || `var(--${color})`;
 
 const getStyle = ((selector) => (colors) => `
 		${selector} {
diff --git a/client/views/admin/settings/inputs/MultiSelectSettingInput.stories.js b/client/views/admin/settings/inputs/MultiSelectSettingInput.stories.js
index 94c63e4c8be7..04ec4f1b364b 100644
--- a/client/views/admin/settings/inputs/MultiSelectSettingInput.stories.js
+++ b/client/views/admin/settings/inputs/MultiSelectSettingInput.stories.js
@@ -41,8 +41,10 @@ export const withValue = () => (
 		_id='setting_id'
 		label='Label'
 		placeholder='Placeholder'
-		value='1'
-		values={options}
+		value={[
+			[1, 'Lorem Ipsum'],
+			[2, 'Lorem Ipsum'],
+		]}
 	/>
 );
 
diff --git a/client/views/notFound/NotFoundPage.stories.js b/client/views/notFound/NotFoundPage.stories.js
index c399f1f78852..48625c9f18e8 100644
--- a/client/views/notFound/NotFoundPage.stories.js
+++ b/client/views/notFound/NotFoundPage.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import NotFoundPage from './NotFoundPage';
 
 export default {
-	title: 'views/notFound/NotFoundPage',
+	title: 'components/NotFoundPage',
 	component: NotFoundPage,
 };
 
diff --git a/client/views/omnichannel/analytics/DateRangePicker.stories.js b/client/views/omnichannel/analytics/DateRangePicker.stories.js
index 9266229a7ca8..455c60a91e6a 100644
--- a/client/views/omnichannel/analytics/DateRangePicker.stories.js
+++ b/client/views/omnichannel/analytics/DateRangePicker.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import DateRangePicker from './DateRangePicker';
 
 export default {
-	title: 'DateRange',
+	title: 'components/DateRangePicker',
 	component: DateRangePicker,
 };
 
diff --git a/client/views/omnichannel/installation/Installation.js b/client/views/omnichannel/installation/Installation.js
index 6d50f58466f0..186737caa76b 100644
--- a/client/views/omnichannel/installation/Installation.js
+++ b/client/views/omnichannel/installation/Installation.js
@@ -11,7 +11,7 @@ import Wrapper from './Wrapper';
 const Installation = () => {
 	const t = useTranslation();
 
-	const siteUrl = useSetting('Site_Url').replace(/\/$/, '');
+	const siteUrl = useSetting('Site_Url')?.replace(/\/$/, '');
 
 	const installString = `<!-- Start of Rocket.Chat Livechat Script -->
 	<script type="text/javascript">
diff --git a/client/views/room/Announcement/Announcement.stories.js b/client/views/room/Announcement/Announcement.stories.js
index 3b167001c928..ee50e51120fa 100644
--- a/client/views/room/Announcement/Announcement.stories.js
+++ b/client/views/room/Announcement/Announcement.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import Announcement from '.';
 
 export default {
-	title: 'components/Announcement',
+	title: 'room/Announcement',
 	component: Announcement,
 };
 
diff --git a/client/views/room/Room.stories.js b/client/views/room/Room.stories.js
index 2e2dc933a485..f1efbd1f8aad 100644
--- a/client/views/room/Room.stories.js
+++ b/client/views/room/Room.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { RoomTemplate } from './components/RoomTemplate/RoomTemplate';
 
 export default {
-	title: 'views/Room',
+	title: 'room',
 	component: RoomTemplate,
 };
 
diff --git a/client/views/room/contextualBar/AutoTranslate/AutoTranslate.stories.js b/client/views/room/contextualBar/AutoTranslate/AutoTranslate.stories.js
index f4b448e6af76..f5fb21ef4eee 100644
--- a/client/views/room/contextualBar/AutoTranslate/AutoTranslate.stories.js
+++ b/client/views/room/contextualBar/AutoTranslate/AutoTranslate.stories.js
@@ -5,7 +5,7 @@ import VerticalBar from '../../../../components/VerticalBar';
 import AutoTranslate from './AutoTranslate';
 
 export default {
-	title: 'components/basic/AutoTranslate',
+	title: 'room/contextualBar/AutoTranslate',
 	component: AutoTranslate,
 };
 
diff --git a/client/views/room/contextualBar/Call/Jitsi/CallJitsi.stories.js b/client/views/room/contextualBar/Call/Jitsi/CallJitsi.stories.js
index 2418d17d6c38..8688faaab649 100644
--- a/client/views/room/contextualBar/Call/Jitsi/CallJitsi.stories.js
+++ b/client/views/room/contextualBar/Call/Jitsi/CallJitsi.stories.js
@@ -6,7 +6,7 @@ import CallJitsi from './CallJitsi';
 import CallModal from './components/CallModal';
 
 export default {
-	title: 'components/basic/CallJitsi',
+	title: 'room/contextualBar/CallJitsi',
 	component: CallJitsi,
 };
 
diff --git a/client/views/room/contextualBar/ExportMessages/ExportMessages.stories.js b/client/views/room/contextualBar/ExportMessages/ExportMessages.stories.js
index bc74d116f2a5..01b8a7aaa954 100644
--- a/client/views/room/contextualBar/ExportMessages/ExportMessages.stories.js
+++ b/client/views/room/contextualBar/ExportMessages/ExportMessages.stories.js
@@ -3,8 +3,8 @@ import React from 'react';
 import ExportMessages from './index';
 
 export default {
-	title: 'contextualBar/Export Messages',
+	title: 'room/contextualBar/ExportMessages',
 	component: ExportMessages,
 };
 
-export const ContextualBar = () => <ExportMessages />;
+export const _default = () => <ExportMessages />;
diff --git a/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.js b/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.js
index 0793a4eadd98..ff260361ee53 100644
--- a/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.js
+++ b/client/views/room/contextualBar/Info/RoomInfo/RoomInfo.stories.js
@@ -4,7 +4,7 @@ import VerticalBar from '../../../../../components/VerticalBar';
 import RoomInfo from './RoomInfo';
 
 export default {
-	title: 'components/RoomInfo',
+	title: 'room/contextualBar/RoomInfo',
 	component: RoomInfo,
 };
 
diff --git a/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcuts.stories.js b/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcuts.stories.js
index af4f53ef1d59..5de651488470 100644
--- a/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcuts.stories.js
+++ b/client/views/room/contextualBar/KeyboardShortcuts/KeyboardShortcuts.stories.js
@@ -5,7 +5,7 @@ import VerticalBar from '../../../../components/VerticalBar';
 import KeyboardShortcutsWithClose from './KeyboardShortcutsWithClose';
 
 export default {
-	title: 'components/KeyboardShortcut',
+	title: 'room/contextualBar/KeyboardShortcut',
 	component: KeyboardShortcutsWithClose,
 };
 
diff --git a/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js b/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
index b2b9e7f550d1..ca544b21f2c4 100644
--- a/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
+++ b/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.js
@@ -17,6 +17,7 @@ const NotificationPreferences = ({
 	handleSaveButton,
 }) => {
 	const t = useTranslation();
+
 	return (
 		<>
 			<VerticalBar.Header>
@@ -28,42 +29,42 @@ const NotificationPreferences = ({
 				<NotificationToogle
 					label={t('Turn_ON')}
 					description={t('Receive_alerts')}
-					onChange={formHandlers.handleTurnOn}
-					defaultChecked={formValues.turnOn}
+					onChange={formHandlers?.handleTurnOn}
+					defaultChecked={formValues?.turnOn}
 				/>
 				<NotificationToogle
 					label={t('Mute_Group_Mentions')}
-					onChange={formHandlers.handleMuteGroupMentions}
-					defaultChecked={formValues.muteGroupMentions}
+					onChange={formHandlers?.handleMuteGroupMentions}
+					defaultChecked={formValues?.muteGroupMentions}
 				/>
 				<NotificationToogle
 					label={t('Show_counter')}
 					description={t('Display_unread_counter')}
-					onChange={formHandlers.handleShowCounter}
-					defaultChecked={formValues.showCounter}
+					onChange={formHandlers?.handleShowCounter}
+					defaultChecked={formValues?.showCounter}
 				/>
 				<FieldGroup>
 					<NotificationByDevice device={t('Desktop')} icon={'computer'}>
 						<Preferences
 							id={'DesktopAlert'}
-							onChange={formHandlers.handleDesktopAlert}
+							onChange={formHandlers?.handleDesktopAlert}
 							name={t('Alerts')}
 							options={handleOptions.alerts}
-							optionDefault={formValues.desktopAlert}
+							optionDefault={formValues?.desktopAlert}
 						/>
 						<Preferences
 							id={'DesktopAudio'}
-							onChange={formHandlers.handleDesktopAudio}
+							onChange={formHandlers?.handleDesktopAudio}
 							name={t('Audio')}
 							options={handleOptions.audio}
-							optionDefault={formValues.desktopAudio}
+							optionDefault={formValues?.desktopAudio}
 						/>
 						<Preferences
 							id={'DesktopSound'}
-							onChange={formHandlers.handleDesktopSound}
+							onChange={formHandlers?.handleDesktopSound}
 							name={t('Sound')}
 							options={handleOptions.sound}
-							optionDefault={formValues.desktopSound}
+							optionDefault={formValues?.desktopSound}
 						>
 							<Button mis='x4' square ghost onClick={handlePlaySound}>
 								<Icon name='play' size='x18' />
@@ -73,19 +74,19 @@ const NotificationPreferences = ({
 					<NotificationByDevice device={t('Mobile')} icon={'mobile'}>
 						<Preferences
 							id={'MobileAlert'}
-							onChange={formHandlers.handleMobileAlert}
+							onChange={formHandlers?.handleMobileAlert}
 							name={t('Alerts')}
 							options={handleOptions.alerts}
-							optionDefault={formValues.mobileAlert}
+							optionDefault={formValues?.mobileAlert}
 						/>
 					</NotificationByDevice>
 					<NotificationByDevice device={t('Email')} icon={'mail'}>
 						<Preferences
 							id={'EmailAlert'}
-							onChange={formHandlers.handleEmailAlert}
+							onChange={formHandlers?.handleEmailAlert}
 							name={t('Alerts')}
 							options={handleOptions.alerts}
-							optionDefault={formValues.emailAlert}
+							optionDefault={formValues?.emailAlert}
 						/>
 					</NotificationByDevice>
 				</FieldGroup>
diff --git a/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.stories.js b/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.stories.js
index c3dbf656912b..df0ca3522ec6 100644
--- a/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.stories.js
+++ b/client/views/room/contextualBar/NotificationPreferences/NotificationPreferences.stories.js
@@ -1,11 +1,10 @@
-import { Box } from '@rocket.chat/fuselage';
 import React from 'react';
 
 import VerticalBar from '../../../../components/VerticalBar';
 import NotificationsPreferences from './NotificationPreferences';
 
 export default {
-	title: 'components/basic/NotificationsPreferences',
+	title: 'room/contextualBar/NotificationsPreferences',
 	component: NotificationsPreferences,
 };
 
@@ -49,21 +48,19 @@ handleSelect.mobile.alert = 'mentions';
 handleSelect.email.alert = 'nothing';
 
 export const Default = () => (
-	<Box height='600px'>
-		<VerticalBar>
-			<NotificationsPreferences
-				handleOn={handleOn}
-				handleSwitch={handleSwitch}
-				handleOptions={handleOptions}
-				handleSelect={handleSelect}
-				handleChangeOption={{
-					desktopAlert: () => {},
-					desktopAudio: () => {},
-					mobileAlert: () => {},
-					emailAlert: () => {},
-				}}
-				handleSoundChange={{ desktopSound: () => {} }}
-			/>
-		</VerticalBar>
-	</Box>
+	<VerticalBar>
+		<NotificationsPreferences
+			handleOn={handleOn}
+			handleSwitch={handleSwitch}
+			handleOptions={handleOptions}
+			handleSelect={handleSelect}
+			handleChangeOption={{
+				desktopAlert: () => {},
+				desktopAudio: () => {},
+				mobileAlert: () => {},
+				emailAlert: () => {},
+			}}
+			handleSoundChange={{ desktopSound: () => {} }}
+		/>
+	</VerticalBar>
 );
diff --git a/client/views/room/contextualBar/OTR/OTR.stories.js b/client/views/room/contextualBar/OTR/OTR.stories.js
index 9cd741f6421b..ea94ea590121 100644
--- a/client/views/room/contextualBar/OTR/OTR.stories.js
+++ b/client/views/room/contextualBar/OTR/OTR.stories.js
@@ -4,7 +4,7 @@ import VerticalBar from '../../../../components/VerticalBar';
 import OTR from './OTR';
 
 export default {
-	title: 'components/OTR',
+	title: 'room/contextualBar/OTR',
 	component: OTR,
 };
 
diff --git a/client/views/room/contextualBar/PruneMessages/PruneMessages.stories.js b/client/views/room/contextualBar/PruneMessages/PruneMessages.stories.js
index b37244f8628e..185d945448cd 100644
--- a/client/views/room/contextualBar/PruneMessages/PruneMessages.stories.js
+++ b/client/views/room/contextualBar/PruneMessages/PruneMessages.stories.js
@@ -4,7 +4,7 @@ import VerticalBar from '../../../../components/VerticalBar';
 import PruneMessages from './PruneMessages';
 
 export default {
-	title: 'components/PruneMessages',
+	title: 'room/contextualBar/PruneMessages',
 	component: PruneMessages,
 };
 
diff --git a/client/views/room/contextualBar/RoomFiles/RoomFiles.stories.js b/client/views/room/contextualBar/RoomFiles/RoomFiles.stories.js
index 85bcb1fc6e3e..58a4fca68981 100644
--- a/client/views/room/contextualBar/RoomFiles/RoomFiles.stories.js
+++ b/client/views/room/contextualBar/RoomFiles/RoomFiles.stories.js
@@ -4,7 +4,7 @@ import VerticalBar from '../../../../components/VerticalBar';
 import RoomFiles from './RoomFiles';
 
 export default {
-	title: 'components/RoomFiles',
+	title: 'room/contextualBar/RoomFiles',
 	component: RoomFiles,
 };
 
diff --git a/client/views/room/contextualBar/RoomFiles/components/FileItem.js b/client/views/room/contextualBar/RoomFiles/components/FileItem.js
index 57e9313cc993..16a4f2b9b924 100644
--- a/client/views/room/contextualBar/RoomFiles/components/FileItem.js
+++ b/client/views/room/contextualBar/RoomFiles/components/FileItem.js
@@ -14,21 +14,24 @@ const hoverClass = css`
 	}
 `;
 
-const FileItem = ({
-	_id,
-	name,
-	url,
-	uploadedAt,
-	ts,
-	user,
-	type,
-	typeGroup,
-	style,
-	onClickDelete,
-	className,
-	isDeletionAllowed,
-}) => {
+const FileItem = ({ fileData }) => {
 	const format = useFormatDateAndTime();
+
+	const {
+		_id,
+		name,
+		url,
+		uploadedAt,
+		ts,
+		user,
+		type,
+		typeGroup,
+		style,
+		onClickDelete,
+		className,
+		isDeletionAllowed,
+	} = fileData;
+
 	return (
 		<Box display='flex' p='x12' style={style} className={[className, hoverClass]}>
 			<Box
@@ -62,7 +65,9 @@ const FileItem = ({
 				_id={_id}
 				name={name}
 				url={url}
-				onClickDelete={isDeletionAllowed({ uid: user?._id, ts }) && onClickDelete}
+				onClickDelete={
+					isDeletionAllowed && isDeletionAllowed({ uid: user?._id, ts }) && onClickDelete
+				}
 			/>
 		</Box>
 	);
diff --git a/client/views/room/contextualBar/RoomFiles/components/FileItem.stories.js b/client/views/room/contextualBar/RoomFiles/components/FileItem.stories.js
index cb61423af781..e16607d68f18 100644
--- a/client/views/room/contextualBar/RoomFiles/components/FileItem.stories.js
+++ b/client/views/room/contextualBar/RoomFiles/components/FileItem.stories.js
@@ -4,7 +4,7 @@ import VerticalBar from '../../../../../components/VerticalBar';
 import FileItem from './FileItem';
 
 export default {
-	title: 'components/RoomFiles/FileItem',
+	title: 'room/ContextualBar/RoomFiles/FileItem',
 	component: FileItem,
 };
 
diff --git a/client/views/room/contextualBar/RoomFiles/components/FileItemIcon.stories.js b/client/views/room/contextualBar/RoomFiles/components/FileItemIcon.stories.js
index 06c858337c61..d4dd1a59efbc 100644
--- a/client/views/room/contextualBar/RoomFiles/components/FileItemIcon.stories.js
+++ b/client/views/room/contextualBar/RoomFiles/components/FileItemIcon.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import FileItemIcon from './FileItemIcon';
 
 export default {
-	title: 'components/RoomFiles/FileItemIcon',
+	title: 'room/contextualBar/RoomFiles/FileItemIcon',
 	component: FileItemIcon,
 };
 
diff --git a/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.js b/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.js
index 81cb41dc3d77..d026b0c33e43 100644
--- a/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.js
+++ b/client/views/room/contextualBar/RoomMembers/AddUsers/AddUsers.stories.js
@@ -4,7 +4,7 @@ import VerticalBar from '../../../../../components/VerticalBar';
 import AddUsers from './AddUsers';
 
 export default {
-	title: 'components/RoomMembers/AddUsers',
+	title: 'room/contextualBar/RoomMembers/AddUsers',
 	component: AddUsers,
 };
 
diff --git a/client/views/room/contextualBar/RoomMembers/EditInvite/EditInvite.stories.js b/client/views/room/contextualBar/RoomMembers/EditInvite/EditInvite.stories.js
index d06dec36af67..d81a8e1c92ea 100644
--- a/client/views/room/contextualBar/RoomMembers/EditInvite/EditInvite.stories.js
+++ b/client/views/room/contextualBar/RoomMembers/EditInvite/EditInvite.stories.js
@@ -4,7 +4,7 @@ import VerticalBar from '../../../../../components/VerticalBar';
 import EditInvite from './EditInvite';
 
 export default {
-	title: 'components/RoomMembers/EditInvite',
+	title: 'room/contextualBar/RoomMembers/EditInvite',
 	component: EditInvite,
 };
 
diff --git a/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.js b/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.js
index 7a7d00613537..b32ca0c34d03 100644
--- a/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.js
+++ b/client/views/room/contextualBar/RoomMembers/InviteUsers/InviteUsers.stories.js
@@ -4,7 +4,7 @@ import VerticalBar from '../../../../../components/VerticalBar';
 import InviteUsers from './InviteUsers';
 
 export default {
-	title: 'components/RoomMembers/InviteUsers',
+	title: 'room/contextualBar/RoomMembers/InviteUsers',
 	component: InviteUsers,
 };
 
diff --git a/client/views/room/contextualBar/RoomMembers/RoomMembers.stories.js b/client/views/room/contextualBar/RoomMembers/RoomMembers.stories.js
index d9328e6b28b3..94d437421811 100644
--- a/client/views/room/contextualBar/RoomMembers/RoomMembers.stories.js
+++ b/client/views/room/contextualBar/RoomMembers/RoomMembers.stories.js
@@ -4,7 +4,7 @@ import VerticalBar from '../../../../components/VerticalBar';
 import RoomMembers from './List/RoomMembers';
 
 export default {
-	title: 'components/RoomMembers',
+	title: 'room/contextualBar/RoomMembers',
 	component: RoomMembers,
 };
 
diff --git a/client/views/room/contextualBar/UserInfo/UserInfo.stories.js b/client/views/room/contextualBar/UserInfo/UserInfo.stories.js
index 658e3ee0038f..07f2d93e7cef 100644
--- a/client/views/room/contextualBar/UserInfo/UserInfo.stories.js
+++ b/client/views/room/contextualBar/UserInfo/UserInfo.stories.js
@@ -5,7 +5,7 @@ import VerticalBar from '../../../../components/VerticalBar';
 import UserInfo from './UserInfo';
 
 export default {
-	title: 'components/UserInfo',
+	title: 'room/contextualBar/UserInfo',
 	component: UserInfo,
 };
 
diff --git a/client/views/setupWizard/Pager.stories.js b/client/views/setupWizard/Pager.stories.js
index 14181ae44e93..caa9dc8c0443 100644
--- a/client/views/setupWizard/Pager.stories.js
+++ b/client/views/setupWizard/Pager.stories.js
@@ -4,7 +4,7 @@ import React from 'react';
 import { Pager } from './Pager';
 
 export default {
-	title: 'views/setupWizard/Pager',
+	title: 'components/setupWizard/Pager',
 	component: Pager,
 };
 
diff --git a/client/views/setupWizard/SetupWizardPage.stories.js b/client/views/setupWizard/SetupWizardPage.stories.js
index 6ece80137d9e..20fac95a07de 100644
--- a/client/views/setupWizard/SetupWizardPage.stories.js
+++ b/client/views/setupWizard/SetupWizardPage.stories.js
@@ -4,7 +4,7 @@ import SetupWizardPage from './SetupWizardPage';
 import { finalStep } from './SetupWizardState';
 
 export default {
-	title: 'views/setupWizard/SetupWizardPage',
+	title: 'components/setupWizard/SetupWizardPage',
 	component: SetupWizardPage,
 };
 
diff --git a/client/views/setupWizard/SideBar.stories.js b/client/views/setupWizard/SideBar.stories.js
index 115d7b08d44b..3b2bac30227b 100644
--- a/client/views/setupWizard/SideBar.stories.js
+++ b/client/views/setupWizard/SideBar.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import SideBar from './SideBar';
 
 export default {
-	title: 'views/setupWizard/SideBar',
+	title: 'components/setupWizard/SideBar',
 	component: SideBar,
 };
 
diff --git a/client/views/setupWizard/StepHeader.stories.js b/client/views/setupWizard/StepHeader.stories.js
index 020dc8586bfa..442faf478852 100644
--- a/client/views/setupWizard/StepHeader.stories.js
+++ b/client/views/setupWizard/StepHeader.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { StepHeader } from './StepHeader';
 
 export default {
-	title: 'views/setupWizard/StepHeader',
+	title: 'components/setupWizard/StepHeader',
 	component: StepHeader,
 };
 
diff --git a/client/views/setupWizard/steps/AdminUserInformationStep.stories.js b/client/views/setupWizard/steps/AdminUserInformationStep.stories.js
index be363dc08c18..3ff6492a5dd4 100644
--- a/client/views/setupWizard/steps/AdminUserInformationStep.stories.js
+++ b/client/views/setupWizard/steps/AdminUserInformationStep.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import AdminUserInformationStep from './AdminUserInformationStep';
 
 export default {
-	title: 'views/setupWizard/steps/AdminUserInformationStep',
+	title: 'components/setupWizard/steps/AdminUserInformationStep',
 	component: AdminUserInformationStep,
 };
 
diff --git a/client/views/setupWizard/steps/FinalStep.stories.js b/client/views/setupWizard/steps/FinalStep.stories.js
index 4defdb5c87ff..e3bc8a516f12 100644
--- a/client/views/setupWizard/steps/FinalStep.stories.js
+++ b/client/views/setupWizard/steps/FinalStep.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import FinalStep from './FinalStep';
 
 export default {
-	title: 'views/setupWizard/steps/FinalStep',
+	title: 'components/setupWizard/steps/FinalStep',
 	component: FinalStep,
 };
 
diff --git a/client/views/setupWizard/steps/RegisterServerStep.stories.js b/client/views/setupWizard/steps/RegisterServerStep.stories.js
index da4a989a5f6d..769f8baea817 100644
--- a/client/views/setupWizard/steps/RegisterServerStep.stories.js
+++ b/client/views/setupWizard/steps/RegisterServerStep.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import RegisterServerStep from './RegisterServerStep';
 
 export default {
-	title: 'views/setupWizard/steps/RegisterServerStep',
+	title: 'components/setupWizard/steps/RegisterServerStep',
 	component: RegisterServerStep,
 };
 
diff --git a/client/views/setupWizard/steps/SettingsBasedStep.stories.js b/client/views/setupWizard/steps/SettingsBasedStep.stories.js
index fa08b954d88c..377f8a9d959d 100644
--- a/client/views/setupWizard/steps/SettingsBasedStep.stories.js
+++ b/client/views/setupWizard/steps/SettingsBasedStep.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import SettingsBasedStep from './SettingsBasedStep';
 
 export default {
-	title: 'views/setupWizard/steps/SettingsBasedStep',
+	title: 'components/setupWizard/steps/SettingsBasedStep',
 	component: SettingsBasedStep,
 };
 
diff --git a/client/views/teams/contextualBar/info/Delete/DeleteTeamModal.stories.js b/client/views/teams/contextualBar/info/Delete/DeleteTeamModal.stories.js
index c7c9b11642a5..dd046023d981 100644
--- a/client/views/teams/contextualBar/info/Delete/DeleteTeamModal.stories.js
+++ b/client/views/teams/contextualBar/info/Delete/DeleteTeamModal.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import DeleteTeam, { StepOne, StepTwo, StepThree } from '.';
 
 export default {
-	title: 'components/DeleteTeamModal',
+	title: 'teams/DeleteTeamModal',
 	component: DeleteTeam,
 };
 
diff --git a/client/views/teams/contextualBar/info/Leave/LeaveTeamModal.stories.js b/client/views/teams/contextualBar/info/Leave/LeaveTeamModal.stories.js
index f250d4123ccd..c452a90a2ace 100644
--- a/client/views/teams/contextualBar/info/Leave/LeaveTeamModal.stories.js
+++ b/client/views/teams/contextualBar/info/Leave/LeaveTeamModal.stories.js
@@ -3,7 +3,7 @@ import React from 'react';
 import LeaveTeamModal, { StepOne, StepTwo } from '.';
 
 export default {
-	title: 'components/LeaveTeamModal',
+	title: 'teams/LeaveTeamModal',
 	component: LeaveTeamModal,
 };
 
diff --git a/client/views/teams/contextualBar/info/TeamsInfo.stories.js b/client/views/teams/contextualBar/info/TeamsInfo.stories.js
index c6ffec4e051c..08ac2d198369 100644
--- a/client/views/teams/contextualBar/info/TeamsInfo.stories.js
+++ b/client/views/teams/contextualBar/info/TeamsInfo.stories.js
@@ -4,7 +4,7 @@ import VerticalBar from '../../../../components/VerticalBar';
 import TeamsInfo from './TeamsInfo';
 
 export default {
-	title: 'components/TeamsInfo',
+	title: 'teams/TeamsInfo',
 	component: TeamsInfo,
 };
 
diff --git a/ee/app/engagement-dashboard/client/components/ChannelsTab/index.stories.js b/ee/app/engagement-dashboard/client/components/ChannelsTab/ChannelsTab.stories.js
similarity index 89%
rename from ee/app/engagement-dashboard/client/components/ChannelsTab/index.stories.js
rename to ee/app/engagement-dashboard/client/components/ChannelsTab/ChannelsTab.stories.js
index b7603d0e5aed..420ecaa95630 100644
--- a/ee/app/engagement-dashboard/client/components/ChannelsTab/index.stories.js
+++ b/ee/app/engagement-dashboard/client/components/ChannelsTab/ChannelsTab.stories.js
@@ -1,7 +1,7 @@
 import { Margins } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { ChannelsTab } from '.';
+import ChannelsTab from '.';
 
 export default {
 	title: 'admin/enterprise/engagement/ChannelsTab',
diff --git a/ee/app/engagement-dashboard/client/components/ChannelsTab/TableSection.js b/ee/app/engagement-dashboard/client/components/ChannelsTab/TableSection.js
index 57107419629d..0e87072186fd 100644
--- a/ee/app/engagement-dashboard/client/components/ChannelsTab/TableSection.js
+++ b/ee/app/engagement-dashboard/client/components/ChannelsTab/TableSection.js
@@ -8,7 +8,7 @@ import Growth from '../../../../../../client/components/data/Growth';
 import { Section } from '../Section';
 import { downloadCsvAs } from '../../../../../../client/lib/download';
 
-export function TableSection() {
+const TableSection = () => {
 	const t = useTranslation();
 
 	const periodOptions = useMemo(() => [
@@ -155,4 +155,6 @@ export function TableSection() {
 			/>
 		</Box>
 	</Section>;
-}
+};
+
+export default TableSection;
diff --git a/ee/app/engagement-dashboard/client/components/ChannelsTab/index.js b/ee/app/engagement-dashboard/client/components/ChannelsTab/index.js
index c59914097a6e..db12bcb932aa 100644
--- a/ee/app/engagement-dashboard/client/components/ChannelsTab/index.js
+++ b/ee/app/engagement-dashboard/client/components/ChannelsTab/index.js
@@ -1,9 +1,7 @@
 import React from 'react';
 
-import { TableSection } from './TableSection';
+import TableSection from './TableSection';
 
-export function ChannelsTab() {
-	return <>
-		<TableSection />
-	</>;
-}
+const ChannelsTab = () => <TableSection />;
+
+export default ChannelsTab;
diff --git a/ee/app/engagement-dashboard/client/components/EngagementDashboardPage.js b/ee/app/engagement-dashboard/client/components/EngagementDashboardPage.js
index f33781174e84..7f11889c85aa 100644
--- a/ee/app/engagement-dashboard/client/components/EngagementDashboardPage.js
+++ b/ee/app/engagement-dashboard/client/components/EngagementDashboardPage.js
@@ -3,14 +3,14 @@ import React, { useMemo } from 'react';
 
 import { useTranslation } from '../../../../../client/contexts/TranslationContext';
 import Page from '../../../../../client/components/Page';
-import { UsersTab } from './UsersTab';
-import { MessagesTab } from './MessagesTab';
-import { ChannelsTab } from './ChannelsTab';
+import UsersTab from './UsersTab';
+import MessagesTab from './MessagesTab';
+import ChannelsTab from './ChannelsTab';
 
-export function EngagementDashboardPage({
+export const EngagementDashboardPage = ({
 	tab = 'users',
 	onSelectTab,
-}) {
+}) => {
 	const t = useTranslation();
 
 	const handleTabClick = useMemo(() => (onSelectTab ? (tab) => () => onSelectTab(tab) : () => undefined), [onSelectTab]);
@@ -30,4 +30,4 @@ export function EngagementDashboardPage({
 			</Box>
 		</Page.ScrollableContent>
 	</Page>;
-}
+};
diff --git a/ee/app/engagement-dashboard/client/components/MessagesTab/MessagesPerChannelSection.js b/ee/app/engagement-dashboard/client/components/MessagesTab/MessagesPerChannelSection.js
index 248a816cfa45..dbc2bc035cf6 100644
--- a/ee/app/engagement-dashboard/client/components/MessagesTab/MessagesPerChannelSection.js
+++ b/ee/app/engagement-dashboard/client/components/MessagesTab/MessagesPerChannelSection.js
@@ -9,7 +9,7 @@ import { LegendSymbol } from '../data/LegendSymbol';
 import { Section } from '../Section';
 import { downloadCsvAs } from '../../../../../../client/lib/download';
 
-export function MessagesPerChannelSection() {
+const MessagesPerChannelSection = () => {
 	const t = useTranslation();
 
 	const periodOptions = useMemo(() => [
@@ -86,8 +86,15 @@ export function MessagesPerChannelSection() {
 										? <Box>
 											<Flex.Item grow={1} shrink={1}>
 												<Margins inline='x24'>
-													<Box style={{ position: 'relative', height: 300 }}>
-														<Box style={{ position: 'absolute', width: '100%', height: '100%' }}>
+													<Box style={{
+														position: 'relative',
+														height: 300,
+													}}>
+														<Box style={{
+															position: 'absolute',
+															width: '100%',
+															height: '100%',
+														}}>
 															<ResponsivePie
 																data={[
 																	{
@@ -221,4 +228,6 @@ export function MessagesPerChannelSection() {
 			</Margins>
 		</Flex.Container>
 	</Section>;
-}
+};
+
+export default MessagesPerChannelSection;
diff --git a/ee/app/engagement-dashboard/client/components/MessagesTab/MessagesSentSection.js b/ee/app/engagement-dashboard/client/components/MessagesTab/MessagesSentSection.js
index 105fddf14e9a..69a26c9a9a1a 100644
--- a/ee/app/engagement-dashboard/client/components/MessagesTab/MessagesSentSection.js
+++ b/ee/app/engagement-dashboard/client/components/MessagesTab/MessagesSentSection.js
@@ -9,7 +9,7 @@ import CounterSet from '../../../../../../client/components/data/CounterSet';
 import { Section } from '../Section';
 import { downloadCsvAs } from '../../../../../../client/lib/download';
 
-export function MessagesSentSection() {
+const MessagesSentSection = () => {
 	const t = useTranslation();
 
 	const periodOptions = useMemo(() => [
@@ -110,7 +110,11 @@ export function MessagesSentSection() {
 				? <Box style={{ height: 240 }}>
 					<Flex.Item align='stretch' grow={1} shrink={0}>
 						<Box style={{ position: 'relative' }}>
-							<Box style={{ position: 'absolute', width: '100%', height: '100%' }}>
+							<Box style={{
+								position: 'absolute',
+								width: '100%',
+								height: '100%',
+							}}>
 								<ResponsiveBar
 									data={values}
 									indexBy='date'
@@ -174,4 +178,6 @@ export function MessagesSentSection() {
 				: <Skeleton variant='rect' height={240} />}
 		</Flex.Container>
 	</Section>;
-}
+};
+
+export default MessagesSentSection;
diff --git a/ee/app/engagement-dashboard/client/components/MessagesTab/index.stories.js b/ee/app/engagement-dashboard/client/components/MessagesTab/MessagesTab.stories.js
similarity index 89%
rename from ee/app/engagement-dashboard/client/components/MessagesTab/index.stories.js
rename to ee/app/engagement-dashboard/client/components/MessagesTab/MessagesTab.stories.js
index cd3fe61d3d0f..aa3e886b3e43 100644
--- a/ee/app/engagement-dashboard/client/components/MessagesTab/index.stories.js
+++ b/ee/app/engagement-dashboard/client/components/MessagesTab/MessagesTab.stories.js
@@ -1,7 +1,7 @@
 import { Margins } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { MessagesTab } from '.';
+import MessagesTab from '.';
 
 export default {
 	title: 'admin/enterprise/engagement/MessagesTab',
diff --git a/ee/app/engagement-dashboard/client/components/MessagesTab/index.js b/ee/app/engagement-dashboard/client/components/MessagesTab/index.js
index 04daa9970db2..8c111a61d41d 100644
--- a/ee/app/engagement-dashboard/client/components/MessagesTab/index.js
+++ b/ee/app/engagement-dashboard/client/components/MessagesTab/index.js
@@ -1,13 +1,13 @@
-import { Divider } from '@rocket.chat/fuselage';
 import React from 'react';
+import { Divider } from '@rocket.chat/fuselage';
+
+import MessagesSentSection from './MessagesSentSection';
+import MessagesPerChannelSection from './MessagesPerChannelSection';
 
-import { MessagesSentSection } from './MessagesSentSection';
-import { MessagesPerChannelSection } from './MessagesPerChannelSection';
+const MessagesTab = () => <>
+	<MessagesSentSection />
+	<Divider />
+	<MessagesPerChannelSection />
+</>;
 
-export function MessagesTab() {
-	return <>
-		<MessagesSentSection />
-		<Divider />
-		<MessagesPerChannelSection />
-	</>;
-}
+export default MessagesTab;
diff --git a/ee/app/engagement-dashboard/client/components/UsersTab/ActiveUsersSection.js b/ee/app/engagement-dashboard/client/components/UsersTab/ActiveUsersSection.js
index 96de8caff1c3..cd77e21cf96d 100644
--- a/ee/app/engagement-dashboard/client/components/UsersTab/ActiveUsersSection.js
+++ b/ee/app/engagement-dashboard/client/components/UsersTab/ActiveUsersSection.js
@@ -10,7 +10,7 @@ import { LegendSymbol } from '../data/LegendSymbol';
 import { Section } from '../Section';
 import { downloadCsvAs } from '../../../../../../client/lib/download';
 
-export function ActiveUsersSection() {
+const ActiveUsersSection = () => {
 	const t = useTranslation();
 
 	const period = useMemo(() => ({
@@ -133,7 +133,11 @@ export function ActiveUsersSection() {
 				? <Box style={{ height: 240 }}>
 					<Flex.Item align='stretch' grow={1} shrink={0}>
 						<Box style={{ position: 'relative' }}>
-							<Box style={{ position: 'absolute', width: '100%', height: '100%' }}>
+							<Box style={{
+								position: 'absolute',
+								width: '100%',
+								height: '100%',
+							}}>
 								<ResponsiveLine
 									data={[
 										{
@@ -237,4 +241,6 @@ export function ActiveUsersSection() {
 				: <Skeleton variant='rect' height={240} />}
 		</Flex.Container>
 	</Section>;
-}
+};
+
+export default ActiveUsersSection;
diff --git a/ee/app/engagement-dashboard/client/components/UsersTab/BusiestChatTimesSection.js b/ee/app/engagement-dashboard/client/components/UsersTab/BusiestChatTimesSection.js
index 5413c5890bd7..7040d3b8bfe6 100644
--- a/ee/app/engagement-dashboard/client/components/UsersTab/BusiestChatTimesSection.js
+++ b/ee/app/engagement-dashboard/client/components/UsersTab/BusiestChatTimesSection.js
@@ -8,7 +8,7 @@ import { useTranslation } from '../../../../../../client/contexts/TranslationCon
 import { useEndpointData } from '../../../../../../client/hooks/useEndpointData';
 import { Section } from '../Section';
 
-function ContentForHours({ displacement, onPreviousDateClick, onNextDateClick }) {
+const ContentForHours = ({ displacement, onPreviousDateClick, onNextDateClick }) => {
 	const t = useTranslation();
 	const isLgScreen = useBreakpoints().includes('lg');
 
@@ -115,9 +115,9 @@ function ContentForHours({ displacement, onPreviousDateClick, onNextDateClick })
 			</Box>
 			: <Skeleton variant='rect' height={196} />}
 	</>;
-}
+};
 
-function ContentForDays({ displacement, onPreviousDateClick, onNextDateClick }) {
+const ContentForDays = ({ displacement, onPreviousDateClick, onNextDateClick }) => {
 	const currentDate = useMemo(() => moment.utc().subtract(displacement, 'weeks'), [displacement]);
 	const formattedCurrentDate = useMemo(() => {
 		const startOfWeekDate = currentDate.clone().subtract(6, 'days');
@@ -153,7 +153,11 @@ function ContentForDays({ displacement, onPreviousDateClick, onNextDateClick })
 				? <Box style={{ height: 196 }}>
 					<Flex.Item align='stretch' grow={1} shrink={0}>
 						<Box style={{ position: 'relative' }}>
-							<Box style={{ position: 'absolute', width: '100%', height: '100%' }}>
+							<Box style={{
+								position: 'absolute',
+								width: '100%',
+								height: '100%',
+							}}>
 								<ResponsiveBar
 									data={values}
 									indexBy='day'
@@ -208,9 +212,9 @@ function ContentForDays({ displacement, onPreviousDateClick, onNextDateClick })
 				: <Skeleton variant='rect' height={196} />}
 		</Flex.Container>
 	</>;
-}
+};
 
-export function BusiestChatTimesSection() {
+const BusiestChatTimesSection = () => {
 	const t = useTranslation();
 
 	const [timeUnit, setTimeUnit] = useState('hours');
@@ -241,4 +245,6 @@ export function BusiestChatTimesSection() {
 			onNextDateClick={handleNextDateClick}
 		/>
 	</Section>;
-}
+};
+
+export default BusiestChatTimesSection;
diff --git a/ee/app/engagement-dashboard/client/components/UsersTab/NewUsersSection.js b/ee/app/engagement-dashboard/client/components/UsersTab/NewUsersSection.js
index eba7fbfaab23..f258125839a3 100644
--- a/ee/app/engagement-dashboard/client/components/UsersTab/NewUsersSection.js
+++ b/ee/app/engagement-dashboard/client/components/UsersTab/NewUsersSection.js
@@ -13,7 +13,7 @@ import { downloadCsvAs } from '../../../../../../client/lib/download';
 
 const TICK_WIDTH = 45;
 
-export function NewUsersSection() {
+const NewUsersSection = () => {
 	const t = useTranslation();
 
 	const periodOptions = useMemo(() => [
@@ -136,7 +136,11 @@ export function NewUsersSection() {
 				? <Box style={{ height: 240 }}>
 					<Flex.Item align='stretch' grow={1} shrink={0}>
 						<Box style={{ position: 'relative' }} ref={sizeRef}>
-							<Box style={{ position: 'absolute', width: '100%', height: '100%' }}>
+							<Box style={{
+								position: 'absolute',
+								width: '100%',
+								height: '100%',
+							}}>
 								<ResponsiveBar
 									data={values}
 									indexBy='date'
@@ -208,4 +212,6 @@ export function NewUsersSection() {
 				: <Box ref={sizeRef}><Skeleton variant='rect' height={240}/></Box>}
 		</Flex.Container>
 	</Section>;
-}
+};
+
+export default NewUsersSection;
diff --git a/ee/app/engagement-dashboard/client/components/UsersTab/UsersByTimeOfTheDaySection.js b/ee/app/engagement-dashboard/client/components/UsersTab/UsersByTimeOfTheDaySection.js
index b0f099e5e859..42b639ffd0a0 100644
--- a/ee/app/engagement-dashboard/client/components/UsersTab/UsersByTimeOfTheDaySection.js
+++ b/ee/app/engagement-dashboard/client/components/UsersTab/UsersByTimeOfTheDaySection.js
@@ -8,7 +8,7 @@ import { useEndpointData } from '../../../../../../client/hooks/useEndpointData'
 import { Section } from '../Section';
 import { downloadCsvAs } from '../../../../../../client/lib/download';
 
-export function UsersByTimeOfTheDaySection() {
+const UsersByTimeOfTheDaySection = () => {
 	const t = useTranslation();
 
 	const periodOptions = useMemo(() => [
@@ -101,7 +101,11 @@ export function UsersByTimeOfTheDaySection() {
 			? <Box display='flex' style={{ height: 696 }}>
 				<Flex.Item align='stretch' grow={1} shrink={0}>
 					<Box style={{ position: 'relative' }}>
-						<Box style={{ position: 'absolute', width: '100%', height: '100%' }}>
+						<Box style={{
+							position: 'absolute',
+							width: '100%',
+							height: '100%',
+						}}>
 							<ResponsiveHeatMap
 								data={values}
 								indexBy='hour'
@@ -177,4 +181,6 @@ export function UsersByTimeOfTheDaySection() {
 			</Box>
 			: <Skeleton variant='rect' height={696} />}
 	</Section>;
-}
+};
+
+export default UsersByTimeOfTheDaySection;
diff --git a/ee/app/engagement-dashboard/client/components/UsersTab/index.stories.js b/ee/app/engagement-dashboard/client/components/UsersTab/UsersTab.Stories.js
similarity index 100%
rename from ee/app/engagement-dashboard/client/components/UsersTab/index.stories.js
rename to ee/app/engagement-dashboard/client/components/UsersTab/UsersTab.Stories.js
diff --git a/ee/app/engagement-dashboard/client/components/UsersTab/index.js b/ee/app/engagement-dashboard/client/components/UsersTab/index.js
index ba7cdaf3a13c..8e1298ad1997 100644
--- a/ee/app/engagement-dashboard/client/components/UsersTab/index.js
+++ b/ee/app/engagement-dashboard/client/components/UsersTab/index.js
@@ -1,13 +1,13 @@
+import React from 'react';
 import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import { Box, Divider, Flex, Margins } from '@rocket.chat/fuselage';
-import React from 'react';
 
-import { NewUsersSection } from './NewUsersSection';
-import { ActiveUsersSection } from './ActiveUsersSection';
-import { UsersByTimeOfTheDaySection } from './UsersByTimeOfTheDaySection';
-import { BusiestChatTimesSection } from './BusiestChatTimesSection';
+import NewUsersSection from './NewUsersSection';
+import ActiveUsersSection from './ActiveUsersSection';
+import UsersByTimeOfTheDaySection from './UsersByTimeOfTheDaySection';
+import BusiestChatTimesSection from './BusiestChatTimesSection';
 
-export function UsersTab() {
+const UsersTab = () => {
 	const isXxlScreen = useBreakpoints().includes('xxl');
 
 	return <>
@@ -26,4 +26,6 @@ export function UsersTab() {
 			</Margins>
 		</Box>
 	</>;
-}
+};
+
+export default UsersTab;
diff --git a/ee/client/audit/AuditPage.js b/ee/client/audit/AuditPage.js
index 04f571df6785..17bd00aca326 100644
--- a/ee/client/audit/AuditPage.js
+++ b/ee/client/audit/AuditPage.js
@@ -1,25 +1,9 @@
-import {
-	Box,
-	Field,
-	TextInput,
-	ButtonGroup,
-	Button,
-	Margins,
-	Tabs,
-	Flex,
-} from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import React, { useRef, useState } from 'react';
 
-import AutoCompleteAgent from '../../../client/components/AutoCompleteAgent';
-import Page from '../../../client/components/Page';
 import { useTranslation } from '../../../client/contexts/TranslationContext';
 import { useForm } from '../../../client/hooks/useForm';
-import DateRangePicker from './DateRangePicker';
-import Result from './Result';
-import RoomAutoComplete from './RoomAutoComplete';
-import UserAutoCompleteMultiple from './UserAutoCompleteMultiple';
-import VisitorAutoComplete from './VisitorAutoComplete';
+import { AuditPageBase } from './AuditPageBase';
 
 const initialValues = {
 	msg: '',
@@ -62,15 +46,6 @@ const AuditPage = () => {
 		handleDateRange,
 	} = handlers;
 
-	const useHandleType = (type) =>
-		useMutableCallback(() => {
-			handleVisitor('');
-			handleAgent();
-			handleRid('');
-			handleUsers([]);
-			handleType(type);
-		});
-
 	const onChangeUsers = useMutableCallback((value, action) => {
 		if (!action) {
 			if (users.includes(value)) {
@@ -125,127 +100,25 @@ const AuditPage = () => {
 	});
 
 	return (
-		<Page>
-			<Page.Header title={t('Message_auditing')} />
-			<Tabs>
-				<Tabs.Item selected={type === ''} onClick={useHandleType('')}>
-					{t('Channels')}
-				</Tabs.Item>
-				<Tabs.Item selected={type === 'u'} onClick={useHandleType('u')}>
-					{t('Users')}
-				</Tabs.Item>
-				<Tabs.Item selected={type === 'd'} onClick={useHandleType('d')}>
-					{t('Direct_Messages')}
-				</Tabs.Item>
-				<Tabs.Item selected={type === 'l'} onClick={useHandleType('l')}>
-					{t('Omnichannel')}
-				</Tabs.Item>
-			</Tabs>
-			<Page.ScrollableContentWithShadow mb='neg-x4'>
-				<Margins block='x4'>
-					<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='stretch'>
-						<Margins inline='x4'>
-							<Flex.Item shrink={1}>
-								<Field>
-									<Field.Label>{t('Message')}</Field.Label>
-									<Field.Row>
-										<TextInput value={msg} onChange={handleMsg} placeholder={t('Search')} />
-									</Field.Row>
-								</Field>
-								<Field>
-									<Field.Label>{t('Date')}</Field.Label>
-									<Field.Row>
-										<DateRangePicker onChange={handleDateRange} display='flex' flexGrow={1} />
-									</Field.Row>
-								</Field>
-							</Flex.Item>
-						</Margins>
-					</Box>
-					<Box display='flex' flexDirection='row' alignItems='flex-end'>
-						<Flex.Item shrink={1}>
-							{type === '' && (
-								<Field>
-									<Field.Label>{t('Channel_name')}</Field.Label>
-									<Field.Row>
-										<RoomAutoComplete
-											error={errors.rid}
-											value={rid}
-											onChange={handleRid}
-											placeholder={t('Channel_Name_Placeholder')}
-										/>
-									</Field.Row>
-									{errors.rid && <Field.Error>{errors.rid}</Field.Error>}
-								</Field>
-							)}
-							{type === 'u' && (
-								<Field>
-									<Field.Label>{t('Users')}</Field.Label>
-									<Field.Row>
-										<UserAutoCompleteMultiple
-											error={errors.users}
-											value={users}
-											onChange={onChangeUsers}
-											placeholder={t('Username_Placeholder')}
-										/>
-									</Field.Row>
-									{errors.users && <Field.Error>{errors.users}</Field.Error>}
-								</Field>
-							)}
-							{type === 'd' && (
-								<Field>
-									<Field.Label>{t('Users')}</Field.Label>
-									<Field.Row>
-										<UserAutoCompleteMultiple
-											error={errors.users}
-											value={users}
-											onChange={onChangeUsers}
-											placeholder={t('Username_Placeholder')}
-										/>
-									</Field.Row>
-									{errors.users && <Field.Error>{errors.users}</Field.Error>}
-								</Field>
-							)}
-							{type === 'l' && (
-								<>
-									<Margins inline='x4'>
-										<Field>
-											<Field.Label flexGrow={0}>{t('Visitor')}</Field.Label>
-											<Field.Row>
-												<VisitorAutoComplete
-													error={errors.visitor}
-													value={visitor}
-													onChange={handleVisitor}
-													placeholder={t('Username_Placeholder')}
-												/>
-											</Field.Row>
-											{errors.visitor && <Field.Error>{errors.visitor}</Field.Error>}
-										</Field>
-										<Field>
-											<Field.Label flexGrow={0}>{t('Agent')}</Field.Label>
-											<Field.Row>
-												<AutoCompleteAgent
-													error={errors.agent}
-													value={agent}
-													onChange={handleAgent}
-													placeholder={t('Username_Placeholder')}
-												/>
-											</Field.Row>
-											{errors.agent && <Field.Error>{errors.agent}</Field.Error>}
-										</Field>
-									</Margins>
-								</>
-							)}
-							<ButtonGroup mis='x8' align='end'>
-								<Button primary onClick={apply}>
-									{t('Apply')}
-								</Button>
-							</ButtonGroup>
-						</Flex.Item>
-					</Box>
-					<Result setDataRef={setData} />
-				</Margins>
-			</Page.ScrollableContentWithShadow>
-		</Page>
+		<AuditPageBase
+			type={type}
+			handleType={handleType}
+			msg={msg}
+			handleMsg={handleMsg}
+			handleDateRange={handleDateRange}
+			errors={errors}
+			rid={rid}
+			handleRid={handleRid}
+			users={users}
+			handleUsers={handleUsers}
+			onChangeUsers={onChangeUsers}
+			visitor={visitor}
+			handleVisitor={handleVisitor}
+			agent={agent}
+			handleAgent={handleAgent}
+			apply={apply}
+			setData={setData}
+		/>
 	);
 };
 
diff --git a/ee/client/audit/AuditPageBase.js b/ee/client/audit/AuditPageBase.js
new file mode 100644
index 000000000000..5cbe71d4461b
--- /dev/null
+++ b/ee/client/audit/AuditPageBase.js
@@ -0,0 +1,119 @@
+import {
+	Box,
+	Field,
+	TextInput,
+	ButtonGroup,
+	Button,
+	Margins,
+	Tabs,
+	Flex,
+} from '@rocket.chat/fuselage';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
+import React from 'react';
+
+import Page from '../../../client/components/Page';
+import { useTranslation } from '../../../client/contexts/TranslationContext';
+import DateRangePicker from './DateRangePicker';
+import Result from './Result';
+import ChannelTab from './Tabs/ChannelTab';
+import DirectTab from './Tabs/DirectTab';
+import UsersTab from './Tabs/UsersTab';
+import VisitorsTab from './Tabs/VisitorsTab';
+
+// TODO: create more stories for the tabs
+export const AuditPageBase = ({
+	type,
+	handleType,
+	msg,
+	handleMsg,
+	handleDateRange,
+	errors,
+	rid,
+	handleRid,
+	users,
+	handleUsers,
+	onChangeUsers,
+	visitor,
+	handleVisitor,
+	agent,
+	handleAgent,
+	apply,
+	setData,
+}) => {
+	const t = useTranslation();
+
+	const useHandleType = (type) =>
+		useMutableCallback(() => {
+			handleVisitor('');
+			handleAgent();
+			handleRid('');
+			handleUsers([]);
+			handleType(type);
+		});
+
+	return (
+		<Page>
+			<Page.Header title={t('Message_auditing')} />
+			<Tabs>
+				<Tabs.Item selected={type === ''} onClick={useHandleType('')}>
+					{t('Channels')}
+				</Tabs.Item>
+				<Tabs.Item selected={type === 'u'} onClick={useHandleType('u')}>
+					{t('Users')}
+				</Tabs.Item>
+				<Tabs.Item selected={type === 'd'} onClick={useHandleType('d')}>
+					{t('Direct_Messages')}
+				</Tabs.Item>
+				<Tabs.Item selected={type === 'l'} onClick={useHandleType('l')}>
+					{t('Omnichannel')}
+				</Tabs.Item>
+			</Tabs>
+			<Page.ScrollableContentWithShadow mb='neg-x4'>
+				<Margins block='x4'>
+					<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='stretch'>
+						<Margins inline='x4'>
+							<Flex.Item shrink={1}>
+								<Field>
+									<Field.Label>{t('Message')}</Field.Label>
+									<Field.Row>
+										<TextInput value={msg} onChange={handleMsg} placeholder={t('Search')} />
+									</Field.Row>
+								</Field>
+								<Field>
+									<Field.Label>{t('Date')}</Field.Label>
+									<Field.Row>
+										<DateRangePicker onChange={handleDateRange} display='flex' flexGrow={1} />
+									</Field.Row>
+								</Field>
+							</Flex.Item>
+						</Margins>
+					</Box>
+					<Box display='flex' flexDirection='row' alignItems='flex-end'>
+						<Flex.Item shrink={1}>
+							{type === '' && <ChannelTab errors={errors} rid={rid} handleRid={handleRid} />}
+							{type === 'u' && (
+								<UsersTab errors={errors} users={users} onChangeUsers={onChangeUsers} />
+							)}
+							{type === 'd' && <DirectTab />}
+							{type === 'l' && (
+								<VisitorsTab
+									errors={errors}
+									visitor={visitor}
+									handleVisitor={handleVisitor}
+									agent={agent}
+									handleAgent={handleAgent}
+								/>
+							)}
+							<ButtonGroup mis='x8' align='end'>
+								<Button primary onClick={apply}>
+									{t('Apply')}
+								</Button>
+							</ButtonGroup>
+						</Flex.Item>
+					</Box>
+					{setData && <Result setDataRef={setData} />}
+				</Margins>
+			</Page.ScrollableContentWithShadow>
+		</Page>
+	);
+};
diff --git a/ee/client/audit/Tabs/ChannelTab.js b/ee/client/audit/Tabs/ChannelTab.js
new file mode 100644
index 000000000000..2606b6889d0d
--- /dev/null
+++ b/ee/client/audit/Tabs/ChannelTab.js
@@ -0,0 +1,26 @@
+import { Field } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import { useTranslation } from '../../../../client/contexts/TranslationContext';
+import RoomAutoComplete from '../RoomAutoComplete';
+
+const ChannelTab = ({ errors, rid, handleRid }) => {
+	const t = useTranslation();
+
+	return (
+		<Field>
+			<Field.Label>{t('Channel_name')}</Field.Label>
+			<Field.Row>
+				<RoomAutoComplete
+					error={errors.rid}
+					value={rid}
+					onChange={handleRid}
+					placeholder={t('Channel_Name_Placeholder')}
+				/>
+			</Field.Row>
+			{errors.rid && <Field.Error>{errors.rid}</Field.Error>}
+		</Field>
+	);
+};
+
+export default ChannelTab;
diff --git a/ee/client/audit/Tabs/DirectTab.js b/ee/client/audit/Tabs/DirectTab.js
new file mode 100644
index 000000000000..4f8b3d2e9103
--- /dev/null
+++ b/ee/client/audit/Tabs/DirectTab.js
@@ -0,0 +1,26 @@
+import { Field } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import { useTranslation } from '../../../../client/contexts/TranslationContext';
+import UserAutoCompleteMultiple from '../UserAutoCompleteMultiple';
+
+const DirectTab = ({ errors, users, onChangeUsers }) => {
+	const t = useTranslation();
+
+	return (
+		<Field>
+			<Field.Label>{t('Users')}</Field.Label>
+			<Field.Row>
+				<UserAutoCompleteMultiple
+					error={errors.users}
+					value={users}
+					onChange={onChangeUsers}
+					placeholder={t('Username_Placeholder')}
+				/>
+			</Field.Row>
+			{errors.users && <Field.Error>{errors.users}</Field.Error>}
+		</Field>
+	);
+};
+
+export default DirectTab;
diff --git a/ee/client/audit/Tabs/UsersTab.js b/ee/client/audit/Tabs/UsersTab.js
new file mode 100644
index 000000000000..16bcc27be327
--- /dev/null
+++ b/ee/client/audit/Tabs/UsersTab.js
@@ -0,0 +1,26 @@
+import { Field } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import { useTranslation } from '../../../../client/contexts/TranslationContext';
+import UserAutoCompleteMultiple from '../UserAutoCompleteMultiple';
+
+const UsersTab = ({ errors, users, onChangeUsers }) => {
+	const t = useTranslation();
+
+	return (
+		<Field>
+			<Field.Label>{t('Users')}</Field.Label>
+			<Field.Row>
+				<UserAutoCompleteMultiple
+					error={errors.users}
+					value={users}
+					onChange={onChangeUsers}
+					placeholder={t('Username_Placeholder')}
+				/>
+			</Field.Row>
+			{errors.users && <Field.Error>{errors.users}</Field.Error>}
+		</Field>
+	);
+};
+
+export default UsersTab;
diff --git a/ee/client/audit/Tabs/VisitorsTab.js b/ee/client/audit/Tabs/VisitorsTab.js
new file mode 100644
index 000000000000..672007fca2bf
--- /dev/null
+++ b/ee/client/audit/Tabs/VisitorsTab.js
@@ -0,0 +1,41 @@
+import { Field, Margins } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import AutoCompleteAgent from '../../../../client/components/AutoCompleteAgent';
+import { useTranslation } from '../../../../client/contexts/TranslationContext';
+import VisitorAutoComplete from '../VisitorAutoComplete';
+
+const VisitorsTab = ({ errors, visitor, handleVisitor, agent, handleAgent }) => {
+	const t = useTranslation();
+
+	return (
+		<Margins inline='x4'>
+			<Field>
+				<Field.Label flexGrow={0}>{t('Visitor')}</Field.Label>
+				<Field.Row>
+					<VisitorAutoComplete
+						error={errors.visitor}
+						value={visitor}
+						onChange={handleVisitor}
+						placeholder={t('Username_Placeholder')}
+					/>
+				</Field.Row>
+				{errors.visitor && <Field.Error>{errors.visitor}</Field.Error>}
+			</Field>
+			<Field>
+				<Field.Label flexGrow={0}>{t('Agent')}</Field.Label>
+				<Field.Row>
+					<AutoCompleteAgent
+						error={errors.agent}
+						value={agent}
+						onChange={handleAgent}
+						placeholder={t('Username_Placeholder')}
+					/>
+				</Field.Row>
+				{errors.agent && <Field.Error>{errors.agent}</Field.Error>}
+			</Field>
+		</Margins>
+	);
+};
+
+export default VisitorsTab;
diff --git a/ee/client/omnichannel/additionalForms/BusinessHoursTimeZone.js b/ee/client/omnichannel/additionalForms/BusinessHoursTimeZone.js
index 5cb9658d89b1..956b4472a0ca 100644
--- a/ee/client/omnichannel/additionalForms/BusinessHoursTimeZone.js
+++ b/ee/client/omnichannel/additionalForms/BusinessHoursTimeZone.js
@@ -21,7 +21,7 @@ const BusinessHoursTimeZone = ({ onChange, data, className, hasChanges = () => {
 
 	const timeZonesOptions = useMemo(() => timeZones.map((name) => [name, t(name)]), [t, timeZones]);
 
-	onChange({ name });
+	onChange && onChange({ name });
 	hasChanges(hasUnsavedChanges);
 
 	return (
diff --git a/ee/client/omnichannel/cannedResponses/CannedResponseAdd.stories.js b/ee/client/omnichannel/cannedResponses/CannedResponseAdd.stories.js
index 71e623269f58..492eea9287e1 100644
--- a/ee/client/omnichannel/cannedResponses/CannedResponseAdd.stories.js
+++ b/ee/client/omnichannel/cannedResponses/CannedResponseAdd.stories.js
@@ -4,7 +4,7 @@ import React from 'react';
 import CannedResponseAdd from './CannedResponseAdd';
 
 export default {
-	title: 'omnichannel/CannedResponseAdd',
+	title: 'omnichannel/CannedResponse/CannedResponseAdd',
 	component: CannedResponseAdd,
 };
 
diff --git a/ee/client/omnichannel/cannedResponses/CannedResponseDetails.stories.js b/ee/client/omnichannel/cannedResponses/CannedResponseDetails.stories.js
index 5c843e57ee3c..94e0046dfe32 100644
--- a/ee/client/omnichannel/cannedResponses/CannedResponseDetails.stories.js
+++ b/ee/client/omnichannel/cannedResponses/CannedResponseDetails.stories.js
@@ -4,7 +4,7 @@ import React from 'react';
 import { CannedResponseDetails } from './CannedResponseDetails';
 
 export default {
-	title: 'omnichannel/CannedResponseDetails',
+	title: 'omnichannel/CannedResponse/CannedResponseDetails',
 	component: CannedResponseDetails,
 };
 
@@ -16,6 +16,6 @@ const cannedResponse = {
 
 export const Default = () => (
 	<Box maxWidth='x300' alignSelf='center' w='full'>
-		<CannedResponseDetails {...cannedResponse} />
+		<CannedResponseDetails response={cannedResponse} />
 	</Box>
 );
diff --git a/ee/client/omnichannel/cannedResponses/CannedResponseEdit.js b/ee/client/omnichannel/cannedResponses/CannedResponseEdit.js
index fdb8f4f64a80..7d0dbfc8f211 100644
--- a/ee/client/omnichannel/cannedResponses/CannedResponseEdit.js
+++ b/ee/client/omnichannel/cannedResponses/CannedResponseEdit.js
@@ -8,7 +8,7 @@ import { useForm } from '../../../../client/hooks/useForm';
 import CannedResponsesForm from './CannedResponseForm';
 import { withResponseData } from './withResponseData';
 
-const CannedResponseEdit = ({ response, onSave, onReturn, onClose }) => {
+export const CannedResponseEdit = ({ response, onSave, onReturn, onClose }) => {
 	const t = useTranslation();
 	const [errors, setErrors] = useState();
 
diff --git a/ee/client/omnichannel/cannedResponses/CannedResponseEdit.stories.js b/ee/client/omnichannel/cannedResponses/CannedResponseEdit.stories.js
index ca36dcd007ac..24dfe85f9162 100644
--- a/ee/client/omnichannel/cannedResponses/CannedResponseEdit.stories.js
+++ b/ee/client/omnichannel/cannedResponses/CannedResponseEdit.stories.js
@@ -1,10 +1,10 @@
 import { Box } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import CannedResponseEdit from './CannedResponseEdit';
+import { CannedResponseEdit } from './CannedResponseEdit';
 
 export default {
-	title: 'omnichannel/CannedResponseEdit',
+	title: 'omnichannel/CannedResponse/CannedResponseEdit',
 	component: CannedResponseEdit,
 };
 
@@ -15,6 +15,6 @@ const cannedResponse = {
 
 export const Default = () => (
 	<Box maxWidth='x300' alignSelf='center' w='full'>
-		<CannedResponseEdit {...cannedResponse} />
+		<CannedResponseEdit response={cannedResponse} />
 	</Box>
 );
diff --git a/ee/client/omnichannel/cannedResponses/CannedResponseForm.stories.js b/ee/client/omnichannel/cannedResponses/CannedResponseForm.stories.js
index e779e011460e..3779dbb0262c 100644
--- a/ee/client/omnichannel/cannedResponses/CannedResponseForm.stories.js
+++ b/ee/client/omnichannel/cannedResponses/CannedResponseForm.stories.js
@@ -5,7 +5,7 @@ import { useForm } from '../../../../client/hooks/useForm';
 import CannedResponseForm from './CannedResponseForm';
 
 export default {
-	title: 'omnichannel/CannedResponseForm',
+	title: 'omnichannel/CannedResponse/CannedResponseForm',
 	component: CannedResponseForm,
 };
 
diff --git a/ee/client/omnichannel/cannedResponses/CannedResponsesList.stories.js b/ee/client/omnichannel/cannedResponses/CannedResponsesList.stories.js
index 1e75c61df725..b315611c996d 100644
--- a/ee/client/omnichannel/cannedResponses/CannedResponsesList.stories.js
+++ b/ee/client/omnichannel/cannedResponses/CannedResponsesList.stories.js
@@ -4,7 +4,7 @@ import React from 'react';
 import CannedResponsesList from './CannedResponsesList';
 
 export default {
-	title: 'omnichannel/CannedResponsesList',
+	title: 'omnichannel/CannedResponse/CannedResponsesList',
 	component: CannedResponsesList,
 };