diff --git a/app/ui-message/client/index.js b/app/ui-message/client/index.js
index e2a0c2288ce6..879813b2847e 100644
--- a/app/ui-message/client/index.js
+++ b/app/ui-message/client/index.js
@@ -6,4 +6,4 @@ import './popup/messagePopupChannel';
 import './popup/messagePopupConfig';
 import './popup/messagePopupEmoji';
 import './popup/messagePopupSlashCommandPreview';
-import './blocks';
+import '../../../client/views/blocks';
diff --git a/app/ui-sidenav/client/sidebarHeader.js b/app/ui-sidenav/client/sidebarHeader.js
index 4ca2d53506bc..83ea3947d667 100644
--- a/app/ui-sidenav/client/sidebarHeader.js
+++ b/app/ui-sidenav/client/sidebarHeader.js
@@ -66,7 +66,7 @@ const toolbarButtons = (/* user */) => [{
 	action: async (e) => {
 		const options = [];
 		const config = {
-			template: createTemplateForComponent('SortList', () => import('./SortList')),
+			template: createTemplateForComponent('SortList', () => import('../../../client/components/SortList')),
 			currentTarget: e.currentTarget,
 			data: {
 				options,
diff --git a/app/ui/client/index.js b/app/ui/client/index.js
index 2f9c199fd968..0296027dc874 100644
--- a/app/ui/client/index.js
+++ b/app/ui/client/index.js
@@ -68,4 +68,4 @@ export { VideoRecorder } from './lib/recorderjs/videoRecorder';
 export { chatMessages } from './views/app/room';
 export * from './lib/userPopoverStatus';
 
-createTemplateForComponent('RoomForeword', () => import('./views/app/RoomForeword'));
+createTemplateForComponent('RoomForeword', () => import('../../../client/components/RoomForeword'));
diff --git a/client/admin/customEmoji/CustomEmoji.js b/client/admin/customEmoji/CustomEmoji.js
index 1837621237c8..84c7d5867ddf 100644
--- a/client/admin/customEmoji/CustomEmoji.js
+++ b/client/admin/customEmoji/CustomEmoji.js
@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
 import { Box, Table, TextInput, Icon } from '@rocket.chat/fuselage';
 
-import { GenericTable, Th } from '../../../app/ui/client/components/GenericTable';
+import { GenericTable, Th } from '../../components/GenericTable';
 import { useTranslation } from '../../contexts/TranslationContext';
 
 const FilterByText = ({ setFilter, ...props }) => {
diff --git a/client/admin/customSounds/AdminSounds.js b/client/admin/customSounds/AdminSounds.js
index 5800ecf719ce..031ccb3a58f8 100644
--- a/client/admin/customSounds/AdminSounds.js
+++ b/client/admin/customSounds/AdminSounds.js
@@ -2,7 +2,7 @@ import React, { useMemo, useCallback, useState, useEffect } from 'react';
 import { Box, Table, TextInput, Icon, Button } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
-import { GenericTable, Th } from '../../../app/ui/client/components/GenericTable';
+import { GenericTable, Th } from '../../components/GenericTable';
 import { useCustomSound } from '../../contexts/CustomSoundContext';
 
 const FilterByText = ({ setFilter, ...props }) => {
diff --git a/client/admin/customUserStatus/CustomUserStatus.js b/client/admin/customUserStatus/CustomUserStatus.js
index 6b62d22ccbec..bd63cc6d5aaa 100644
--- a/client/admin/customUserStatus/CustomUserStatus.js
+++ b/client/admin/customUserStatus/CustomUserStatus.js
@@ -1,7 +1,7 @@
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
 import { Box, Table, TextInput, Icon } from '@rocket.chat/fuselage';
 
-import { GenericTable, Th } from '../../../app/ui/client/components/GenericTable';
+import { GenericTable, Th } from '../../components/GenericTable';
 import { useTranslation } from '../../contexts/TranslationContext';
 
 const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
diff --git a/client/admin/integrations/IntegrationsTable.js b/client/admin/integrations/IntegrationsTable.js
index ceeab34c1634..ba64ecf39930 100644
--- a/client/admin/integrations/IntegrationsTable.js
+++ b/client/admin/integrations/IntegrationsTable.js
@@ -2,7 +2,7 @@ import { Box, Table, TextInput, Icon } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useResizeObserver } from '@rocket.chat/fuselage-hooks';
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
 
-import { GenericTable, Th } from '../../../app/ui/client/components/GenericTable';
+import { GenericTable, Th } from '../../components/GenericTable';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useRoute } from '../../contexts/RouterContext';
 import { useEndpointDataExperimental } from '../../hooks/useEndpointDataExperimental';
diff --git a/client/admin/invites/InvitesPage.js b/client/admin/invites/InvitesPage.js
index ec646e9a8501..caf247692a60 100644
--- a/client/admin/invites/InvitesPage.js
+++ b/client/admin/invites/InvitesPage.js
@@ -13,7 +13,7 @@ import { useModal } from '../../contexts/ModalContext';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useEndpoint } from '../../contexts/ServerContext';
 import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
-import { GenericTable } from '../../../app/ui/client/components/GenericTable';
+import { GenericTable } from '../../components/GenericTable';
 import { useFormatDateAndTime } from '../../hooks/useFormatDateAndTime';
 
 
diff --git a/client/admin/oauthApps/OAuthAppsTable.js b/client/admin/oauthApps/OAuthAppsTable.js
index 91b1ec301b06..f4bd9060729d 100644
--- a/client/admin/oauthApps/OAuthAppsTable.js
+++ b/client/admin/oauthApps/OAuthAppsTable.js
@@ -1,7 +1,7 @@
 import { Table } from '@rocket.chat/fuselage';
 import React, { useMemo, useCallback } from 'react';
 
-import { GenericTable, Th } from '../../../app/ui/client/components/GenericTable';
+import { GenericTable, Th } from '../../components/GenericTable';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useRoute } from '../../contexts/RouterContext';
 import { useEndpointDataExperimental } from '../../hooks/useEndpointDataExperimental';
diff --git a/client/admin/rooms/RoomsTable.js b/client/admin/rooms/RoomsTable.js
index 57fbb87a3b08..195c00a6cff7 100644
--- a/client/admin/rooms/RoomsTable.js
+++ b/client/admin/rooms/RoomsTable.js
@@ -2,7 +2,7 @@ import { Box, Table, Icon, TextInput, Field, CheckBox, Margins } from '@rocket.c
 import { useMediaQuery, useUniqueId, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
 
-import { GenericTable, Th } from '../../../app/ui/client/components/GenericTable';
+import { GenericTable, Th } from '../../components/GenericTable';
 import { useTranslation } from '../../contexts/TranslationContext';
 import RoomAvatar from '../../components/basic/avatar/RoomAvatar';
 import { roomTypes } from '../../../app/utils/client';
diff --git a/client/admin/users/UsersTable.js b/client/admin/users/UsersTable.js
index 715fcff77ff7..7c64012681ce 100644
--- a/client/admin/users/UsersTable.js
+++ b/client/admin/users/UsersTable.js
@@ -2,7 +2,7 @@ import { Box, Table, Avatar, TextInput, Icon } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMediaQuery } from '@rocket.chat/fuselage-hooks';
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
 
-import { GenericTable, Th } from '../../../app/ui/client/components/GenericTable';
+import { GenericTable, Th } from '../../components/GenericTable';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { roomTypes } from '../../../app/utils/client';
 import { useRoute } from '../../contexts/RouterContext';
diff --git a/app/ui/client/components/GenericTable.js b/client/components/GenericTable.js
similarity index 97%
rename from app/ui/client/components/GenericTable.js
rename to client/components/GenericTable.js
index 6e2f85eb6223..cafd8fba5fff 100644
--- a/app/ui/client/components/GenericTable.js
+++ b/client/components/GenericTable.js
@@ -2,7 +2,7 @@ import React, { useMemo, useState, useEffect, useCallback, forwardRef } from 're
 import { Box, Pagination, Skeleton, Table, Flex, Tile, Scrollable } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 
-import { useTranslation } from '../../../../client/contexts/TranslationContext';
+import { useTranslation } from '../contexts/TranslationContext';
 
 function SortIcon({ direction }) {
 	return <Box is='svg' width='x16' height='x16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
diff --git a/app/ui/client/components/GenericTable.stories.js b/client/components/GenericTable.stories.js
similarity index 94%
rename from app/ui/client/components/GenericTable.stories.js
rename to client/components/GenericTable.stories.js
index ac6ba252d360..678ae1831eee 100644
--- a/app/ui/client/components/GenericTable.stories.js
+++ b/client/components/GenericTable.stories.js
@@ -5,7 +5,7 @@ import { GenericTable, Th } from './GenericTable';
 
 
 export default {
-	title: 'uncategorized/GenericTable',
+	title: 'components/GenericTable',
 	component: GenericTable,
 	decorators: [(fn) => <div children={fn()} style={{ height: '100vh' }} />],
 };
diff --git a/app/ui/client/views/app/RoomForeword.js b/client/components/RoomForeword.js
similarity index 80%
rename from app/ui/client/views/app/RoomForeword.js
rename to client/components/RoomForeword.js
index 98998a38f3f2..dfa9779fd975 100644
--- a/app/ui/client/views/app/RoomForeword.js
+++ b/client/components/RoomForeword.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Avatar, Margins, Flex, Box, Tag } from '@rocket.chat/fuselage';
 
-import { Rooms } from '../../../../models';
-import { useTranslation } from '../../../../../client/contexts/TranslationContext';
-import { useReactiveValue } from '../../../../../client/hooks/useReactiveValue';
-import { useUser } from '../../../../../client/contexts/UserContext';
-import { roomTypes } from '../../../../utils/client';
+import { Rooms } from '../../app/models';
+import { useTranslation } from '../contexts/TranslationContext';
+import { useReactiveValue } from '../hooks/useReactiveValue';
+import { useUser } from '../contexts/UserContext';
+import { roomTypes } from '../../app/utils/client';
 
 const RoomForeword = ({ _id: rid }) => {
 	const t = useTranslation();
diff --git a/app/ui-sidenav/client/SortList.js b/client/components/SortList.js
similarity index 96%
rename from app/ui-sidenav/client/SortList.js
rename to client/components/SortList.js
index 71ca52af71ed..debde9fd6bae 100644
--- a/app/ui-sidenav/client/SortList.js
+++ b/client/components/SortList.js
@@ -2,9 +2,9 @@ import React, { useCallback } from 'react';
 import { Icon, ToggleSwitch, RadioButton, Box, Flex, Margins } from '@rocket.chat/fuselage';
 
 
-import { useTranslation } from '../../../client/contexts/TranslationContext';
-import { useUserPreference } from '../../../client/contexts/UserContext';
-import { useMethod } from '../../../client/contexts/ServerContext';
+import { useTranslation } from '../contexts/TranslationContext';
+import { useUserPreference } from '../contexts/UserContext';
+import { useMethod } from '../contexts/ServerContext';
 
 function SortListItem({ text, icon, input }) {
 	return <Flex.Container>
diff --git a/client/routes.js b/client/routes.js
index 6a7602a2ac10..3aacdba145f7 100644
--- a/client/routes.js
+++ b/client/routes.js
@@ -97,7 +97,7 @@ FlowRouter.route('/home', {
 FlowRouter.route('/directory/:tab?', {
 	name: 'directory',
 	action: () => {
-		renderRouteComponent(() => import('../app/ui/client/views/app/components/Directory'), { template: 'main', region: 'center' });
+		renderRouteComponent(() => import('./views/directory/DirectoryPage'), { template: 'main', region: 'center' });
 	},
 	triggersExit: [function() {
 		$('.main-content').addClass('rc-old');
diff --git a/app/ui-message/client/blocks/MessageBlock.js b/client/views/blocks/MessageBlock.js
similarity index 89%
rename from app/ui-message/client/blocks/MessageBlock.js
rename to client/views/blocks/MessageBlock.js
index 3bd9a8739ff3..5faf042f78ae 100644
--- a/app/ui-message/client/blocks/MessageBlock.js
+++ b/client/views/blocks/MessageBlock.js
@@ -2,8 +2,8 @@ import { UIKitIncomingInteractionContainerType } from '@rocket.chat/apps-engine/
 import { UiKitMessage, UiKitComponent, kitContext, messageParser } from '@rocket.chat/fuselage-ui-kit';
 import React, { useRef, useEffect } from 'react';
 
-import { renderMessageBody } from '../../../ui-utils/client';
-import * as ActionManager from '../ActionManager';
+import { renderMessageBody } from '../../../app/ui-utils/client';
+import * as ActionManager from '../../../app/ui-message/client/ActionManager';
 
 // TODO: move this to fuselage-ui-kit itself
 messageParser.text = ({ text, type } = {}) => {
diff --git a/app/ui-message/client/blocks/ModalBlock.js b/client/views/blocks/ModalBlock.js
similarity index 97%
rename from app/ui-message/client/blocks/ModalBlock.js
rename to client/views/blocks/ModalBlock.js
index cec19b7c74d1..d7f223baa903 100644
--- a/app/ui-message/client/blocks/ModalBlock.js
+++ b/client/views/blocks/ModalBlock.js
@@ -5,9 +5,9 @@ import { kitContext, UiKitComponent, UiKitModal, modalParser } from '@rocket.cha
 import { uiKitText } from '@rocket.chat/ui-kit';
 import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
-import { renderMessageBody } from '../../../ui-utils/client';
-import { getURL } from '../../../utils/lib/getURL';
-import * as ActionManager from '../ActionManager';
+import { renderMessageBody } from '../../../app/ui-utils/client';
+import { getURL } from '../../../app/utils/lib/getURL';
+import * as ActionManager from '../../../app/ui-message/client/ActionManager';
 
 // TODO: move this to fuselage-ui-kit itself
 modalParser.text = ({ text, type } = {}) => {
diff --git a/app/ui-message/client/blocks/index.js b/client/views/blocks/index.js
similarity index 80%
rename from app/ui-message/client/blocks/index.js
rename to client/views/blocks/index.js
index d081ff82163b..20a7ce22d5de 100644
--- a/app/ui-message/client/blocks/index.js
+++ b/client/views/blocks/index.js
@@ -1,6 +1,6 @@
 import { HTML } from 'meteor/htmljs';
 
-import { createTemplateForComponent } from '../../../../client/reactAdapters';
+import { createTemplateForComponent } from '../../reactAdapters';
 
 createTemplateForComponent('ModalBlock', () => import('./ModalBlock'), {
 	// eslint-disable-next-line new-cap
diff --git a/app/ui/client/views/app/components/Directory/ChannelsTab.js b/client/views/directory/ChannelsTab.js
similarity index 85%
rename from app/ui/client/views/app/components/Directory/ChannelsTab.js
rename to client/views/directory/ChannelsTab.js
index 5348354e50c4..583969ecb5d0 100644
--- a/app/ui/client/views/app/components/Directory/ChannelsTab.js
+++ b/client/views/directory/ChannelsTab.js
@@ -1,16 +1,16 @@
-import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import { Box, Margins, Table, Avatar, Tag, Icon, TextInput } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
 
-import { GenericTable, Th } from '../../../../components/GenericTable';
-import MarkdownText from '../../../../../../../client/components/basic/MarkdownText';
-import { useTranslation } from '../../../../../../../client/contexts/TranslationContext';
-import { usePermission } from '../../../../../../../client/contexts/AuthorizationContext';
-import { useRoute } from '../../../../../../../client/contexts/RouterContext';
-import { useEndpointData } from '../../../../../../../client/hooks/useEndpointData';
-import { useFormatDate } from '../../../../../../../client/hooks/useFormatDate';
-import { roomTypes } from '../../../../../../utils/client';
-import { useQuery } from '../hooks';
+import { GenericTable, Th } from '../../components/GenericTable';
+import MarkdownText from '../../components/basic/MarkdownText';
+import { useTranslation } from '../../contexts/TranslationContext';
+import { usePermission } from '../../contexts/AuthorizationContext';
+import { useRoute } from '../../contexts/RouterContext';
+import { useEndpointData } from '../../hooks/useEndpointData';
+import { useFormatDate } from '../../hooks/useFormatDate';
+import { roomTypes } from '../../../app/utils/client';
+import { useQuery } from './hooks';
 
 const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
 
diff --git a/app/ui/client/views/app/components/Directory/index.js b/client/views/directory/DirectoryPage.js
similarity index 79%
rename from app/ui/client/views/app/components/Directory/index.js
rename to client/views/directory/DirectoryPage.js
index cfa1fdb9e829..b143715e2872 100644
--- a/app/ui/client/views/app/components/Directory/index.js
+++ b/client/views/directory/DirectoryPage.js
@@ -1,14 +1,14 @@
 import React, { useEffect, useCallback } from 'react';
 import { Tabs } from '@rocket.chat/fuselage';
 
-import Page from '../../../../../../../client/components/basic/Page';
-import { useTranslation } from '../../../../../../../client/contexts/TranslationContext';
+import Page from '../../components/basic/Page';
+import { useTranslation } from '../../contexts/TranslationContext';
 import { UserTab } from './UserTab';
 import { ChannelsTab } from './ChannelsTab';
-import { useRoute, useRouteParameter } from '../../../../../../../client/contexts/RouterContext';
-import { useSetting } from '../../../../../../../client/contexts/SettingsContext';
+import { useRoute, useRouteParameter } from '../../contexts/RouterContext';
+import { useSetting } from '../../contexts/SettingsContext';
 
-export function DirectoryPage() {
+function DirectoryPage() {
 	const t = useTranslation();
 
 	const defaultTab = useSetting('Accounts_Directory_DefaultView');
diff --git a/app/ui/client/views/app/components/Directory/UserTab.js b/client/views/directory/UserTab.js
similarity index 87%
rename from app/ui/client/views/app/components/Directory/UserTab.js
rename to client/views/directory/UserTab.js
index 58a997e1784d..c1a978be34f1 100644
--- a/app/ui/client/views/app/components/Directory/UserTab.js
+++ b/client/views/directory/UserTab.js
@@ -2,14 +2,14 @@ import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import { Box, Table, Flex, Avatar, TextInput, Icon } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 
-import { GenericTable, Th } from '../../../../components/GenericTable';
-import { useTranslation } from '../../../../../../../client/contexts/TranslationContext';
-import { useRoute } from '../../../../../../../client/contexts/RouterContext';
-import { usePermission } from '../../../../../../../client/contexts/AuthorizationContext';
-import { useQuery } from '../hooks';
-import { roomTypes } from '../../../../../../utils/client';
-import { useEndpointData } from '../../../../../../../client/hooks/useEndpointData';
-import { useFormatDate } from '../../../../../../../client/hooks/useFormatDate';
+import { GenericTable, Th } from '../../components/GenericTable';
+import { useTranslation } from '../../contexts/TranslationContext';
+import { useRoute } from '../../contexts/RouterContext';
+import { usePermission } from '../../contexts/AuthorizationContext';
+import { useQuery } from './hooks';
+import { roomTypes } from '../../../app/utils/client';
+import { useEndpointData } from '../../hooks/useEndpointData';
+import { useFormatDate } from '../../hooks/useFormatDate';
 
 const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
 
diff --git a/app/ui/client/views/app/components/hooks.js b/client/views/directory/hooks.js
similarity index 100%
rename from app/ui/client/views/app/components/hooks.js
rename to client/views/directory/hooks.js