diff --git a/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx b/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx
index 56646a59bb4d1..f02ad2c3fb1b7 100644
--- a/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx
+++ b/apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx
@@ -9,7 +9,7 @@ import type { soundDataType } from './lib';
 import { validate, createSoundData } from './lib';
 
 type AddCustomSoundProps = {
-	goToNew: (where: string) => () => void;
+	goToNew: (_id: string) => () => void;
 	close: () => void;
 	onChange: () => void;
 };
@@ -22,7 +22,6 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr
 	const [sound, setSound] = useState<{ name: string }>();
 
 	const uploadCustomSound = useMethod('uploadCustomSound');
-
 	const insertOrUpdateSound = useMethod('insertOrUpdateSound');
 
 	const handleChangeFile = useCallback((soundFile) => {
@@ -74,11 +73,8 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr
 	const handleSave = useCallback(async () => {
 		try {
 			const result = await saveAction(name, sound);
-			if (!result) {
-				throw new Error('error-something-went-wrong');
-			}
-			goToNew(result);
 			dispatchToastMessage({ type: 'success', message: t('Custom_Sound_Saved_Successfully') });
+			result && goToNew(result);
 			onChange();
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
diff --git a/apps/meteor/client/views/admin/customSounds/AdminSoundsRoute.tsx b/apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx
similarity index 60%
rename from apps/meteor/client/views/admin/customSounds/AdminSoundsRoute.tsx
rename to apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx
index 9eda105ec62ca..7ea3ca8bb7f39 100644
--- a/apps/meteor/client/views/admin/customSounds/AdminSoundsRoute.tsx
+++ b/apps/meteor/client/views/admin/customSounds/CustomSoundsRoute.tsx
@@ -1,6 +1,7 @@
-import { Button, Icon, Pagination } from '@rocket.chat/fuselage';
+import { Button, Icon, Pagination, States, StatesIcon, StatesActions, StatesAction, StatesTitle } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import { useRoute, useRouteParameter, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
+import { useRoute, useRouteParameter, usePermission, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React, { useMemo, useState, useCallback } from 'react';
 
@@ -14,8 +15,6 @@ import { usePagination } from '../../../components/GenericTable/hooks/usePaginat
 import { useSort } from '../../../components/GenericTable/hooks/useSort';
 import Page from '../../../components/Page';
 import VerticalBar from '../../../components/VerticalBar';
-import { useEndpointData } from '../../../hooks/useEndpointData';
-import { AsyncStatePhase } from '../../../lib/asyncState';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import AddCustomSound from './AddCustomSound';
 import CustomSoundRow from './CustomSoundRow';
@@ -46,7 +45,8 @@ const CustomSoundsRoute = (): ReactElement => {
 		500,
 	);
 
-	const { reload, ...result } = useEndpointData('/v1/custom-sounds.list', { params: query });
+	const getCustomSoundsList = useEndpoint('GET', '/v1/custom-sounds.list');
+	const { data, isSuccess, isLoading, isError, refetch } = useQuery(['custom-sounds', query], () => getCustomSoundsList(query));
 
 	const handleItemClick = useCallback(
 		(_id) => (): void => {
@@ -67,8 +67,18 @@ const CustomSoundsRoute = (): ReactElement => {
 	}, [route]);
 
 	const handleChange = useCallback(() => {
-		reload();
-	}, [reload]);
+		refetch();
+	}, [refetch]);
+
+	const headers = useMemo(
+		() => [
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+				{t('Name')}
+			</GenericTableHeaderCell>,
+			<GenericTableHeaderCell w='x40' key='action' />,
+		],
+		[setSort, sortBy, sortDirection, t],
+	);
 
 	if (!canManageCustomSounds) {
 		return <NotAuthorizedPage />;
@@ -83,30 +93,54 @@ const CustomSoundsRoute = (): ReactElement => {
 					</Button>
 				</Page.Header>
 				<Page.Content>
-					<FilterByText onChange={({ text }): void => setParams(text)} />
-					<GenericTable>
-						<GenericTableHeader>
-							<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
-								{t('Name')}
-							</GenericTableHeaderCell>
-							<GenericTableHeaderCell w='x40' key='action' />
-						</GenericTableHeader>
-						<GenericTableBody>
-							{result.phase === AsyncStatePhase.LOADING && <GenericTableLoadingTable headerCells={2} />}
-							{result.phase === AsyncStatePhase.RESOLVED &&
-								result.value.sounds.map((sound) => <CustomSoundRow sound={sound} onClick={handleItemClick} />)}
-						</GenericTableBody>
-					</GenericTable>
-					{result.phase === AsyncStatePhase.RESOLVED && (
-						<Pagination
-							current={current}
-							itemsPerPage={itemsPerPage}
-							count={result.value.total || 0}
-							onSetItemsPerPage={onSetItemsPerPage}
-							onSetCurrent={onSetCurrent}
-							{...paginationProps}
-						/>
-					)}
+					<>
+						{isLoading && (
+							<GenericTable>
+								<GenericTableHeader>{headers}</GenericTableHeader>
+								<GenericTableBody>
+									<GenericTableLoadingTable headerCells={2} />
+								</GenericTableBody>
+							</GenericTable>
+						)}
+						{isSuccess && data && data.sounds.length > 0 && (
+							<>
+								<FilterByText onChange={({ text }): void => setParams(text)} />
+								<GenericTable>
+									<GenericTableHeader>{headers}</GenericTableHeader>
+									<GenericTableBody>
+										{data?.sounds.map((sound) => (
+											<CustomSoundRow key={sound._id} sound={sound} onClick={handleItemClick} />
+										))}
+									</GenericTableBody>
+								</GenericTable>
+								<Pagination
+									divider
+									current={current}
+									itemsPerPage={itemsPerPage}
+									count={data.total || 0}
+									onSetItemsPerPage={onSetItemsPerPage}
+									onSetCurrent={onSetCurrent}
+									{...paginationProps}
+								/>
+							</>
+						)}
+						{isSuccess && data?.sounds.length === 0 && (
+							<States>
+								<StatesIcon name='magnifier' />
+								<StatesTitle>{t('No_results_found')}</StatesTitle>
+							</States>
+						)}
+
+						{isError && (
+							<States>
+								<StatesIcon name='warning' variation='danger' />
+								<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+								<StatesActions>
+									<StatesAction onClick={() => refetch()}>{t('Reload_page')}</StatesAction>
+								</StatesActions>
+							</States>
+						)}
+					</>
 				</Page.Content>
 			</Page>
 			{context && (
diff --git a/apps/meteor/client/views/admin/customSounds/EditSound.tsx b/apps/meteor/client/views/admin/customSounds/EditSound.tsx
index 38e43b9af5bf6..c3e2f23091d39 100644
--- a/apps/meteor/client/views/admin/customSounds/EditSound.tsx
+++ b/apps/meteor/client/views/admin/customSounds/EditSound.tsx
@@ -91,29 +91,20 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps): ReactEl
 	}, [saveAction, sound, onChange]);
 
 	const handleDeleteButtonClick = useCallback(() => {
-		const handleClose = (): void => {
-			setModal(null);
-			close?.();
-			onChange();
-		};
-
 		const handleDelete = async (): Promise<void> => {
 			try {
 				await deleteCustomSound(_id);
-				setModal(() => (
-					<GenericModal variant='success' onCancel={handleClose} onClose={handleClose} onConfirm={handleClose}>
-						{t('Custom_Sound_Has_Been_Deleted')}
-					</GenericModal>
-				));
+				dispatchToastMessage({ type: 'success', message: t('Custom_Sound_Has_Been_Deleted') });
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal(null);
+				close?.();
 				onChange();
 			}
 		};
 
-		const handleCancel = (): void => {
-			setModal(null);
-		};
+		const handleCancel = (): void => setModal(null);
 
 		setModal(() => (
 			<GenericModal variant='danger' onConfirm={handleDelete} onCancel={handleCancel} onClose={handleCancel} confirmText={t('Delete')}>
diff --git a/apps/meteor/client/views/admin/routes.tsx b/apps/meteor/client/views/admin/routes.tsx
index fa06088048fcd..2e5ca8e9afcbd 100644
--- a/apps/meteor/client/views/admin/routes.tsx
+++ b/apps/meteor/client/views/admin/routes.tsx
@@ -13,7 +13,7 @@ export const registerAdminRoute = createRouteGroup(
 
 registerAdminRoute('/custom-sounds/:context?/:id?', {
 	name: 'custom-sounds',
-	component: lazy(() => import('./customSounds/AdminSoundsRoute')),
+	component: lazy(() => import('./customSounds/CustomSoundsRoute')),
 });
 
 registerAdminRoute('/apps/what-is-it', {