diff --git a/apps/meteor/app/custom-sounds/client/index.ts b/apps/meteor/app/custom-sounds/client/index.ts
index d1154824c78c9..95992988ccfb1 100644
--- a/apps/meteor/app/custom-sounds/client/index.ts
+++ b/apps/meteor/app/custom-sounds/client/index.ts
@@ -1,21 +1 @@
-import { Meteor } from 'meteor/meteor';
-
-import { Notifications } from '../../notifications/client';
-import { CachedCollectionManager } from '../../ui-cached-collection/client';
-import { CustomSounds } from './lib/CustomSounds';
-
-Meteor.startup(() => {
-	CachedCollectionManager.onLogin(() => {
-		Notifications.onAll('public-info', ([key, data]) => {
-			switch (key) {
-				case 'updateCustomSound':
-					CustomSounds.update(data[0].soundData);
-					break;
-				case 'deleteCustomSound':
-					CustomSounds.remove(data[0].soundData);
-					break;
-			}
-		});
-	});
-});
 export { CustomSounds } from './lib/CustomSounds';
diff --git a/apps/meteor/app/custom-sounds/client/lib/CustomSounds.ts b/apps/meteor/app/custom-sounds/client/lib/CustomSounds.ts
index f881c15f98867..f925caf7f8098 100644
--- a/apps/meteor/app/custom-sounds/client/lib/CustomSounds.ts
+++ b/apps/meteor/app/custom-sounds/client/lib/CustomSounds.ts
@@ -1,8 +1,6 @@
 import type { ICustomSound } from '@rocket.chat/core-typings';
-import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 
-import { CachedCollectionManager } from '../../../ui-cached-collection/client';
 import { getURL } from '../../../utils/client';
 import { sdk } from '../../../utils/client/lib/SDKClient';
 
@@ -28,8 +26,11 @@ const defaultSounds = [
 class CustomSoundsClass {
 	list: ReactiveVar<Record<string, ICustomSound>>;
 
+	initialFetchDone: boolean;
+
 	constructor() {
 		this.list = new ReactiveVar({});
+		this.initialFetchDone = false;
 		defaultSounds.forEach((sound) => this.add(sound));
 	}
 
@@ -130,15 +131,17 @@ class CustomSoundsClass {
 
 		return audio && audio.duration > 0 && !audio.paused;
 	};
-}
-
-export const CustomSounds = new CustomSoundsClass();
 
-Meteor.startup(() =>
-	CachedCollectionManager.onLogin(async () => {
+	fetchCustomSoundList = async () => {
+		if (this.initialFetchDone) {
+			return;
+		}
 		const result = await sdk.call('listCustomSounds');
 		for (const sound of result) {
-			CustomSounds.add(sound);
+			this.add(sound);
 		}
-	}),
-);
+		this.initialFetchDone = true;
+	};
+}
+
+export const CustomSounds = new CustomSoundsClass();
diff --git a/apps/meteor/client/providers/CustomSoundProvider.tsx b/apps/meteor/client/providers/CustomSoundProvider.tsx
index b383ad8300124..cb2d2933117fe 100644
--- a/apps/meteor/client/providers/CustomSoundProvider.tsx
+++ b/apps/meteor/client/providers/CustomSoundProvider.tsx
@@ -1,10 +1,36 @@
-import { CustomSoundContext } from '@rocket.chat/ui-contexts';
+import { CustomSoundContext, useUserId, useStream } from '@rocket.chat/ui-contexts';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { CustomSounds } from '../../app/custom-sounds/client/lib/CustomSounds';
 
 const CustomSoundProvider: FC = ({ children }) => {
+	const userId = useUserId();
+	useEffect(() => {
+		if (!userId) {
+			return;
+		}
+		void CustomSounds.fetchCustomSoundList();
+	}, [userId]);
+
+	const streamAll = useStream('notify-all');
+
+	useEffect(() => {
+		if (!userId) {
+			return;
+		}
+
+		return streamAll('public-info', ([key, data]) => {
+			switch (key) {
+				case 'updateCustomSound':
+					CustomSounds.update(data[0].soundData);
+					break;
+				case 'deleteCustomSound':
+					CustomSounds.remove(data[0].soundData);
+					break;
+			}
+		});
+	}, [userId, streamAll]);
 	return <CustomSoundContext.Provider children={children} value={CustomSounds} />;
 };
 
diff --git a/apps/meteor/client/providers/MeteorProvider.tsx b/apps/meteor/client/providers/MeteorProvider.tsx
index dadb47caead4e..aa12af9055210 100644
--- a/apps/meteor/client/providers/MeteorProvider.tsx
+++ b/apps/meteor/client/providers/MeteorProvider.tsx
@@ -35,8 +35,8 @@ const MeteorProvider: FC = ({ children }) => (
 								<ToastMessagesProvider>
 									<LayoutProvider>
 										<AvatarUrlProvider>
-											<CustomSoundProvider>
-												<UserProvider>
+											<UserProvider>
+												<CustomSoundProvider>
 													<DeviceProvider>
 														<ModalProvider>
 															<AuthorizationProvider>
@@ -56,8 +56,8 @@ const MeteorProvider: FC = ({ children }) => (
 															</AuthorizationProvider>
 														</ModalProvider>
 													</DeviceProvider>
-												</UserProvider>
-											</CustomSoundProvider>
+												</CustomSoundProvider>
+											</UserProvider>
 										</AvatarUrlProvider>
 									</LayoutProvider>
 								</ToastMessagesProvider>