diff --git a/app/custom-sounds/assets/stylesheets/customSoundsAdmin.css b/app/custom-sounds/assets/stylesheets/customSoundsAdmin.css
deleted file mode 100644
index c96075a621e0a..0000000000000
--- a/app/custom-sounds/assets/stylesheets/customSoundsAdmin.css
+++ /dev/null
@@ -1,111 +0,0 @@
-.sound-info {
-	& .icon-play-circled {
-		cursor: pointer;
-	}
-}
-
-.sound-view {
-	z-index: 15;
-
-	overflow-x: hidden;
-	overflow-y: auto;
-
-	& .thumb {
-		width: 100%;
-		height: 350px;
-		padding: 20px;
-	}
-
-	& nav {
-		padding: 0 20px;
-	}
-
-	& .info {
-		padding: 0 20px;
-
-		white-space: normal;
-
-		& h3 {
-			overflow: hidden;
-
-			width: 100%;
-			margin: 8px 0;
-
-			user-select: text;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-
-			font-size: 24px;
-			line-height: 27px;
-
-			& i::after {
-				display: inline-block;
-
-				width: 8px;
-				height: 8px;
-
-				content: " ";
-				vertical-align: middle;
-
-				border-radius: 4px;
-			}
-		}
-
-		& p {
-			-webkit-user-select: text;
-			-moz-user-select: text;
-			-ms-user-select: text;
-			user-select: text;
-
-			font-size: 12px;
-			font-weight: 300;
-			line-height: 18px;
-		}
-	}
-
-	& .edit-form {
-		padding: 20px 20px 0;
-
-		white-space: normal;
-
-		& h3 {
-			margin-bottom: 8px;
-
-			font-size: 24px;
-			line-height: 22px;
-		}
-
-		& p {
-			font-size: 12px;
-			font-weight: 300;
-			line-height: 18px;
-		}
-
-		& > .input-line {
-			margin-top: 20px;
-		}
-
-		& nav {
-			padding: 0;
-
-			&.buttons {
-				margin-top: 2em;
-			}
-		}
-
-		& .form-divisor {
-			height: 9px;
-			margin: 2em 0;
-
-			text-align: center;
-
-			& > span {
-				padding: 0 1em;
-			}
-		}
-	}
-
-	& .room-info-content > div {
-		margin: 0 0 20px;
-	}
-}
diff --git a/app/custom-sounds/client/admin/adminSoundEdit.html b/app/custom-sounds/client/admin/adminSoundEdit.html
deleted file mode 100644
index c6f4ef42f9bf9..0000000000000
--- a/app/custom-sounds/client/admin/adminSoundEdit.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<template name="adminSoundEdit">
-	<div class="content">
-		<div class="sound-view">
-			{{> soundEdit .}}
-		</div>
-	</div>
-</template>
diff --git a/app/custom-sounds/client/admin/adminSoundInfo.html b/app/custom-sounds/client/admin/adminSoundInfo.html
deleted file mode 100644
index f9676c22303ac..0000000000000
--- a/app/custom-sounds/client/admin/adminSoundInfo.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<template name="adminSoundInfo">
-	<div class="content">
-		<div class="sound-view">
-			{{> soundInfo .}}
-		</div>
-	</div>
-</template>
diff --git a/app/custom-sounds/client/admin/adminSounds.html b/app/custom-sounds/client/admin/adminSounds.html
deleted file mode 100644
index c9a20bd9c4fd5..0000000000000
--- a/app/custom-sounds/client/admin/adminSounds.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<template name="adminSounds">
-	<div class="main-content-flex">
-		<section class="page-container page-list flex-tab-main-content">
-			{{> header sectionName="Custom_Sounds"}}
-			<div class="content">
-				{{#requiresPermission 'manage-sounds'}}
-					<form class="search-form" role="form">
-						<div class="rc-input__wrapper">
-							<div class="rc-input__icon">
-								{{#if isLoading}}
-									{{> loading }}
-								{{else}}
-									{{> icon block="rc-input__icon-svg" icon="magnifier" }}
-								{{/if}}
-							</div>
-							<input id="sound-filter" type="text" class="rc-input__element"
-									 placeholder="{{_ "Search"}}" autofocus dir="auto">
-						</div>
-					</form>
-					<div class="results">
-						{{{_ "Showing_results" customsounds.length}}}
-					</div>
-					{{#table fixed='true' onItemClick=onTableItemClick onScroll=onTableScroll onResize=onTableResize}}
-						<thead>
-							<tr>
-								<th width="95%">
-									<div class="table-fake-th">{{_ "Name"}}</div>
-								</th>
-								<th width="5%">
-									<div class="table-fake-th">{{_ "Action"}}</div>
-								</th>
-							</tr>
-						</thead>
-						<tbody>
-							{{#each customsounds}}
-							<tr>
-								<td width="80%">
-									<div class="rc-table-wrapper">
-										<div class="rc-table-info">
-											<span class="rc-table-title">
-												{{name}}
-											</span>
-										</div>
-									</div>
-								</td>
-								<td width="20%">
-										<div class="rc-table-wrapper">
-												{{#if isPlaying _id}}
-													{{>icon _id=_id icon="pause" block="icon-pause-circled"}}
-												{{else}}
-													{{>icon _id=_id icon="play" block="icon-play-circled"}}
-												{{/if}}
-												{{>icon _id=_id icon="ban" block="icon-reset-circled"}}
-										</div>
-								</td>
-							</tr>
-							{{else}}
-								{{# with searchText}}
-									<tr class="table-no-click">
-										<td>{{_ "No_results_found_for"}} {{.}}</td>
-									</tr>
-								{{/with}}
-							{{/each}}
-							{{#if isLoading}}
-							<tr class="table-no-click">
-								<td class="table-loading-td">{{> loading}}</td>
-							</tr>
-							{{/if}}
-						</tbody>
-					{{/table}}
-				{{/requiresPermission}}
-			</div>
-		</section>
-		{{#with flexData}}
-			{{> flexTabBar}}
-		{{/with}}
-	</div>
-</template>
diff --git a/app/custom-sounds/client/admin/adminSounds.js b/app/custom-sounds/client/admin/adminSounds.js
deleted file mode 100644
index 9de092e3c1437..0000000000000
--- a/app/custom-sounds/client/admin/adminSounds.js
+++ /dev/null
@@ -1,176 +0,0 @@
-import { ReactiveVar } from 'meteor/reactive-var';
-import { Tracker } from 'meteor/tracker';
-import { FlowRouter } from 'meteor/kadira:flow-router';
-import { Template } from 'meteor/templating';
-import _ from 'underscore';
-
-import { RocketChatTabBar, SideNav, TabBar } from '../../../ui-utils';
-import { CustomSounds } from '../lib/CustomSounds';
-import { APIClient } from '../../../utils/client';
-
-const LIST_SIZE = 50;
-const DEBOUNCE_TIME_TO_SEARCH_IN_MS = 500;
-
-Template.adminSounds.helpers({
-	searchText() {
-		const instance = Template.instance();
-		return instance.filter && instance.filter.get();
-	},
-	isPlaying(_id) {
-		return Template.instance().isPlayingId.get() === _id;
-	},
-	customsounds() {
-		return Template.instance().sounds.get();
-	},
-	isLoading() {
-		return Template.instance().isLoading.get();
-	},
-	flexData() {
-		return {
-			tabBar: Template.instance().tabBar,
-			data: Template.instance().tabBarData.get(),
-		};
-	},
-
-	onTableScroll() {
-		const instance = Template.instance();
-		return function(currentTarget) {
-			if (currentTarget.offsetHeight + currentTarget.scrollTop < currentTarget.scrollHeight - 100) {
-				return;
-			}
-			const sounds = instance.sounds.get();
-			if (instance.total.get() > sounds.length) {
-				instance.offset.set(instance.offset.get() + LIST_SIZE);
-			}
-		};
-	},
-	onTableItemClick() {
-		const instance = Template.instance();
-		return function(item) {
-			instance.tabBarData.set({
-				sound: instance.sounds.get().find((sound) => sound._id === item._id),
-				onSuccess: instance.onSuccessCallback,
-			});
-			instance.tabBar.showGroup('custom-sounds-selected');
-			instance.tabBar.open('admin-sound-info');
-		};
-	},
-});
-
-Template.adminSounds.onCreated(function() {
-	const instance = this;
-	this.sounds = new ReactiveVar([]);
-	this.offset = new ReactiveVar(0);
-	this.total = new ReactiveVar(0);
-	this.query = new ReactiveVar({});
-	this.isLoading = new ReactiveVar(false);
-	this.filter = new ReactiveVar('');
-	this.isPlayingId = new ReactiveVar('');
-
-	this.tabBar = new RocketChatTabBar();
-	this.tabBar.showGroup(FlowRouter.current().route.name);
-	this.tabBarData = new ReactiveVar();
-
-	TabBar.addButton({
-		groups: ['custom-sounds', 'custom-sounds-selected'],
-		id: 'add-sound',
-		i18nTitle: 'Custom_Sound_Add',
-		icon: 'plus',
-		template: 'adminSoundEdit',
-		order: 1,
-	});
-
-	TabBar.addButton({
-		groups: ['custom-sounds-selected'],
-		id: 'admin-sound-info',
-		i18nTitle: 'Custom_Sound_Info',
-		icon: 'customize',
-		template: 'adminSoundInfo',
-		order: 2,
-	});
-
-	this.onSuccessCallback = () => {
-		this.offset.set(0);
-		return this.loadSounds(this.query.get(), this.offset.get());
-	};
-
-	this.tabBarData.set({
-		onSuccess: instance.onSuccessCallback,
-	});
-
-	this.loadSounds = _.debounce(async (query, offset) => {
-		this.isLoading.set(true);
-		const { sounds, total } = await APIClient.v1.get(`custom-sounds.list?count=${ LIST_SIZE }&offset=${ offset }&query=${ JSON.stringify(query) }`);
-		this.total.set(total);
-		if (offset === 0) {
-			this.sounds.set(sounds);
-		} else {
-			this.sounds.set(this.sounds.get().concat(sounds));
-		}
-		this.isLoading.set(false);
-	}, DEBOUNCE_TIME_TO_SEARCH_IN_MS);
-
-	this.autorun(() => {
-		const filter = this.filter.get() && this.filter.get().trim();
-		const offset = this.offset.get();
-		if (filter) {
-			const regex = { $regex: filter, $options: 'i' };
-			return this.loadSounds({ name: regex }, offset);
-		}
-		return this.loadSounds({}, offset);
-	});
-});
-
-Template.adminSounds.onRendered(() =>
-	Tracker.afterFlush(function() {
-		SideNav.setFlex('adminFlex');
-		SideNav.openFlex();
-	}),
-);
-
-Template.adminSounds.events({
-	'keydown #sound-filter'(e) {
-		// stop enter key
-		if (e.which === 13) {
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	},
-	'keyup #sound-filter'(e, t) {
-		e.stopPropagation();
-		e.preventDefault();
-		t.filter.set(e.currentTarget.value);
-		t.offset.set(0);
-	},
-	'click .icon-play-circled'(e, t) {
-		e.preventDefault();
-		e.stopPropagation();
-		CustomSounds.play(this._id);
-		const audio = document.getElementById(t.isPlayingId.get());
-		if (audio) {
-			audio.pause();
-		}
-		document.getElementById(this._id).onended = () => {
-			t.isPlayingId.set('');
-			this.onended = null;
-		};
-		t.isPlayingId.set(this._id);
-	},
-	'click .icon-pause-circled'(e, t) {
-		e.preventDefault();
-		e.stopPropagation();
-		const audio = document.getElementById(this._id);
-		if (audio && !audio.paused) {
-			audio.pause();
-		}
-		t.isPlayingId.set('');
-	},
-	'click .icon-reset-circled'(e) {
-		e.preventDefault();
-		e.stopPropagation();
-		const audio = document.getElementById(this._id);
-		if (audio) {
-			audio.currentTime = 0;
-		}
-	},
-});
diff --git a/app/custom-sounds/client/admin/route.js b/app/custom-sounds/client/admin/route.js
deleted file mode 100644
index bf27b5ae0edca..0000000000000
--- a/app/custom-sounds/client/admin/route.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { BlazeLayout } from 'meteor/kadira:blaze-layout';
-
-import { registerAdminRoute } from '../../../../client/admin';
-
-registerAdminRoute('/custom-sounds', {
-	name: 'custom-sounds',
-	async action(/* params*/) {
-		await import('./views');
-		BlazeLayout.render('main', { center: 'adminSounds' });
-	},
-});
diff --git a/app/custom-sounds/client/admin/soundEdit.html b/app/custom-sounds/client/admin/soundEdit.html
deleted file mode 100644
index 63caf62d4ddd2..0000000000000
--- a/app/custom-sounds/client/admin/soundEdit.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<template name="soundEdit">
-	{{#requiresPermission 'manage-sounds'}}
-		<div class="about clearfix">
-			<form class="edit-form" autocomplete="off">
-				{{#if sound}}
-					<h3>{{sound.name}}</h3>
-				{{else}}
-					<h3>{{_ "Custom_Sound_Add"}}</h3>
-				{{/if}}
-				<div class="input-line">
-					<label for="name">{{_ "Name"}}</label>
-					<input type="text" id="name" autocomplete="off" value="{{sound.name}}">
-				</div>
-				<div class="input-line">
-					<label for="image">{{_ "Sound_File_mp3"}}</label>
-					<input id="image" type="file" accept="audio/mp3,audio/mpeg,audio/x-mpeg,audio/mpeg3,audio/x-mpeg-3,.mp3"/>
-				</div>
-				<nav>
-					<button class='button button-block cancel' type="button"><span>{{_ "Cancel"}}</span></button>
-					<button class='button button-block primary save'><span>{{_ "Save"}}</span></button>
-				</nav>
-			</form>
-		</div>
-	{{/requiresPermission}}
-</template>
diff --git a/app/custom-sounds/client/admin/soundEdit.js b/app/custom-sounds/client/admin/soundEdit.js
deleted file mode 100644
index cffe9c92d1091..0000000000000
--- a/app/custom-sounds/client/admin/soundEdit.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { Template } from 'meteor/templating';
-import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
-import toastr from 'toastr';
-import s from 'underscore.string';
-
-import { t, handleError } from '../../../utils';
-
-Template.soundEdit.helpers({
-	sound() {
-		return Template.instance().sound;
-	},
-
-	name() {
-		return this.name || this._id;
-	},
-});
-
-Template.soundEdit.events({
-	'click .cancel'(e, t) {
-		e.stopPropagation();
-		e.preventDefault();
-		delete Template.instance().soundFile;
-		t.cancel(t.find('form'));
-	},
-
-	'submit form'(e, t) {
-		e.stopPropagation();
-		e.preventDefault();
-		t.save(e.currentTarget);
-	},
-
-	'change input[type=file]'(ev) {
-		const e = ev.originalEvent != null ? ev.originalEvent : ev;
-		let { files } = e.target;
-		if (e.target.files == null || files.length === 0) {
-			if (e.dataTransfer.files != null) {
-				files = e.dataTransfer.files;
-			} else {
-				files = [];
-			}
-		}
-
-		// using let x of y here seems to have incompatibility with some phones
-		for (const file in files) {
-			if (files.hasOwnProperty(file)) {
-				Template.instance().soundFile = files[file];
-			}
-		}
-	},
-});
-
-Template.soundEdit.onCreated(function() {
-	if (this.data != null) {
-		this.sound = this.data.sound;
-	} else {
-		this.sound = undefined;
-		this.data.tabBar.showGroup('custom-sounds');
-	}
-	this.onSuccess = Template.currentData().onSuccess;
-	this.cancel = (form, name) => {
-		form.reset();
-		this.data.tabBar.close();
-		if (this.sound) {
-			this.data.back(name);
-		}
-	};
-
-	this.getSoundData = () => {
-		const soundData = {};
-		if (this.sound != null) {
-			soundData._id = this.sound._id;
-			soundData.previousName = this.sound.name;
-			soundData.extension = this.sound.extension;
-			soundData.previousExtension = this.sound.extension;
-		}
-		soundData.name = s.trim(this.$('#name').val());
-		soundData.newFile = false;
-		return soundData;
-	};
-
-	this.validate = () => {
-		const soundData = this.getSoundData();
-
-		const errors = [];
-		if (!soundData.name) {
-			errors.push('Name');
-		}
-
-		if (!soundData._id) {
-			if (!this.soundFile) {
-				errors.push('Sound_File_mp3');
-			}
-		}
-
-		for (const error of errors) {
-			toastr.error(TAPi18n.__('error-the-field-is-required', { field: TAPi18n.__(error) }));
-		}
-
-		if (this.soundFile) {
-			if (!/audio\/mp3/.test(this.soundFile.type) && !/audio\/mpeg/.test(this.soundFile.type) && !/audio\/x-mpeg/.test(this.soundFile.type)) {
-				errors.push('FileType');
-				toastr.error(TAPi18n.__('error-invalid-file-type'));
-			}
-		}
-
-		return errors.length === 0;
-	};
-
-	this.save = (form) => {
-		if (this.validate()) {
-			const soundData = this.getSoundData();
-
-			if (this.soundFile) {
-				soundData.newFile = true;
-				soundData.extension = this.soundFile.name.split('.').pop();
-				soundData.type = this.soundFile.type;
-			}
-
-			Meteor.call('insertOrUpdateSound', soundData, (error, result) => {
-				if (result) {
-					soundData._id = result;
-					soundData.random = Math.round(Math.random() * 1000);
-
-					if (this.soundFile) {
-						toastr.info(TAPi18n.__('Uploading_file'));
-
-						const reader = new FileReader();
-						reader.readAsBinaryString(this.soundFile);
-						reader.onloadend = () => {
-							Meteor.call('uploadCustomSound', reader.result, this.soundFile.type, soundData, (uploadError/* , data*/) => {
-								if (uploadError != null) {
-									handleError(uploadError);
-									console.log(uploadError);
-								}
-							},
-							);
-							delete this.soundFile;
-							toastr.success(TAPi18n.__('File_uploaded'));
-						};
-					}
-
-					toastr.success(t('Custom_Sound_Saved_Successfully'));
-					this.onSuccess();
-
-					this.cancel(form, soundData.name);
-				}
-
-				if (error) {
-					handleError(error);
-				}
-			});
-		}
-	};
-});
diff --git a/app/custom-sounds/client/admin/soundInfo.html b/app/custom-sounds/client/admin/soundInfo.html
deleted file mode 100644
index 09374f00609a9..0000000000000
--- a/app/custom-sounds/client/admin/soundInfo.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<template name="soundInfo">
-	{{#if editingSound}}
-		{{> soundEdit (soundToEdit)}}
-	{{else}}
-		{{#with sound}}
-		<div class="about clearfix">
-			<div class="info">
-				<h3 title="{{name}}">{{name}}</h3>
-			</div>
-		</div>
-		{{/with}}
-		<nav>
-			{{#if hasPermission 'manage-sounds'}}
-				<button class='button button-block danger delete'><span><i class='icon-trash'></i> {{_ "Delete"}}</span></button>
-				<button class='button button-block primary edit-sound'><span><i class='icon-edit'></i> {{_ "Edit"}}</span></button>
-			{{/if}}
-		</nav>
-	{{/if}}
-</template>
diff --git a/app/custom-sounds/client/admin/soundInfo.js b/app/custom-sounds/client/admin/soundInfo.js
deleted file mode 100644
index a27c74a03b2b5..0000000000000
--- a/app/custom-sounds/client/admin/soundInfo.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { ReactiveVar } from 'meteor/reactive-var';
-import { Template } from 'meteor/templating';
-
-import { modal } from '../../../ui-utils';
-import { t, handleError } from '../../../utils';
-
-Template.soundInfo.helpers({
-	name() {
-		const sound = Template.instance().sound.get();
-		return sound.name;
-	},
-
-	sound() {
-		return Template.instance().sound.get();
-	},
-
-	editingSound() {
-		return Template.instance().editingSound.get();
-	},
-
-	soundToEdit() {
-		const instance = Template.instance();
-		return {
-			tabBar: instance.data.tabBar,
-			data: instance.data.data,
-			sound: instance.sound.get(),
-			onSuccess: instance.onSuccess,
-			back(name) {
-				instance.editingSound.set();
-
-				if (name != null) {
-					const sound = instance.sound.get();
-					if (sound.name != null && sound.name !== name) {
-						return instance.loadedName.set(name);
-					}
-				}
-			},
-		};
-	},
-});
-
-Template.soundInfo.events({
-	'click .delete'(e, instance) {
-		e.stopPropagation();
-		e.preventDefault();
-		const sound = instance.sound.get();
-		if (sound != null) {
-			const { _id } = sound;
-			modal.open({
-				title: t('Are_you_sure'),
-				text: t('Custom_Sound_Delete_Warning'),
-				type: 'warning',
-				showCancelButton: true,
-				confirmButtonColor: '#DD6B55',
-				confirmButtonText: t('Yes_delete_it'),
-				cancelButtonText: t('Cancel'),
-				closeOnConfirm: false,
-				html: false,
-			}, function() {
-				Meteor.call('deleteCustomSound', _id, (error/* , result*/) => {
-					if (error) {
-						handleError(error);
-					} else {
-						modal.open({
-							title: t('Deleted'),
-							text: t('Custom_Sound_Has_Been_Deleted'),
-							type: 'success',
-							timer: 2000,
-							showConfirmButton: false,
-						});
-						instance.onSuccess();
-						instance.data.tabBar.showGroup('custom-sounds');
-						instance.data.tabBar.close();
-					}
-				});
-			});
-		}
-	},
-
-	'click .edit-sound'(e, instance) {
-		e.stopPropagation();
-		e.preventDefault();
-
-		instance.editingSound.set(instance.sound.get()._id);
-	},
-});
-
-Template.soundInfo.onCreated(function() {
-	this.sound = new ReactiveVar();
-
-	this.editingSound = new ReactiveVar();
-
-	this.loadedName = new ReactiveVar();
-	this.onSuccess = Template.currentData().onSuccess;
-
-	this.autorun(() => {
-		const data = Template.currentData();
-		if (data && data.clear != null) {
-			this.clear = data.clear;
-		}
-	});
-
-	this.autorun(() => {
-		const data = Template.currentData().sound;
-		const sound = this.sound.get();
-		if (sound && sound.name != null) {
-			this.loadedName.set(sound.name);
-		} else if (data.name != null) {
-			this.loadedName.set(data.name);
-		}
-	});
-
-	this.autorun(() => {
-		const data = Template.currentData().sound;
-		this.sound.set(data);
-	});
-});
diff --git a/app/custom-sounds/client/admin/startup.js b/app/custom-sounds/client/admin/startup.js
deleted file mode 100644
index 105a5c4527bb7..0000000000000
--- a/app/custom-sounds/client/admin/startup.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { hasAtLeastOnePermission } from '../../../authorization';
-import { registerAdminSidebarItem } from '../../../../client/admin';
-
-registerAdminSidebarItem({
-	href: 'custom-sounds',
-	i18nLabel: 'Custom_Sounds',
-	icon: 'volume',
-	permissionGranted() {
-		return hasAtLeastOnePermission(['manage-sounds']);
-	},
-});
diff --git a/app/custom-sounds/client/admin/views.js b/app/custom-sounds/client/admin/views.js
deleted file mode 100644
index 3a2397b2bdaa6..0000000000000
--- a/app/custom-sounds/client/admin/views.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import './adminSoundEdit.html';
-import './adminSoundInfo.html';
-import './adminSounds.html';
-import './adminSounds';
-import './soundEdit.html';
-import './soundEdit';
-import './soundInfo.html';
-import './soundInfo';
diff --git a/app/custom-sounds/client/index.js b/app/custom-sounds/client/index.js
index eb17166ef2b89..77706dca50ecd 100644
--- a/app/custom-sounds/client/index.js
+++ b/app/custom-sounds/client/index.js
@@ -1,7 +1,4 @@
 import './notifications/deleteCustomSound';
 import './notifications/updateCustomSound';
-import './admin/route';
-import './admin/startup';
-import '../assets/stylesheets/customSoundsAdmin.css';
 
 export { CustomSounds } from './lib/CustomSounds';
diff --git a/app/custom-sounds/client/lib/CustomSounds.js b/app/custom-sounds/client/lib/CustomSounds.js
index 09c175ac6c040..a0422581f6aa1 100644
--- a/app/custom-sounds/client/lib/CustomSounds.js
+++ b/app/custom-sounds/client/lib/CustomSounds.js
@@ -4,6 +4,8 @@ import _ from 'underscore';
 
 import { CachedCollectionManager } from '../../../ui-cached-collection';
 
+const getCustomSoundId = (sound) => `custom-sound-${ sound }`;
+
 class CustomSoundsClass {
 	constructor() {
 		this.list = new ReactiveVar({});
@@ -19,7 +21,7 @@ class CustomSoundsClass {
 		if (!sound.src) {
 			sound.src = this.getURL(sound);
 		}
-		const audio = $('<audio />', { id: sound._id, preload: true }).append(
+		const audio = $('<audio />', { id: getCustomSoundId(sound._id), preload: true }).append(
 			$('<source />', { src: sound.src }),
 		);
 		const list = this.list.get();
@@ -59,7 +61,7 @@ class CustomSoundsClass {
 	}
 
 	play = (sound, { volume = 1, loop = false } = {}) => {
-		const audio = document.querySelector(`audio#${ sound }`);
+		const audio = document.querySelector(`#${ getCustomSoundId(sound) }`);
 		if (!audio || !audio.play) {
 			return;
 		}
diff --git a/app/custom-sounds/server/methods/insertOrUpdateSound.js b/app/custom-sounds/server/methods/insertOrUpdateSound.js
index 03a2ff69a4d83..d3fe25e0173b0 100644
--- a/app/custom-sounds/server/methods/insertOrUpdateSound.js
+++ b/app/custom-sounds/server/methods/insertOrUpdateSound.js
@@ -1,5 +1,6 @@
 import { Meteor } from 'meteor/meteor';
 import s from 'underscore.string';
+import { check } from 'meteor/check';
 
 import { hasPermission } from '../../../authorization';
 import { CustomSounds } from '../../../models';
@@ -32,6 +33,7 @@ Meteor.methods({
 		let matchingResults = [];
 
 		if (soundData._id) {
+			check(soundData._id, String);
 			matchingResults = CustomSounds.findByNameExceptId(soundData.name, soundData._id).fetch();
 		} else {
 			matchingResults = CustomSounds.findByName(soundData.name).fetch();
diff --git a/app/ui/client/components/GenericTable.js b/app/ui/client/components/GenericTable.js
index 7d671359cbe51..305d96638ae92 100644
--- a/app/ui/client/components/GenericTable.js
+++ b/app/ui/client/components/GenericTable.js
@@ -74,7 +74,7 @@ export function GenericTable({
 				: <>
 					<Scrollable>
 						<Box mi='neg-x24' pi='x24' flexGrow={1}>
-							<Table fixed>
+							<Table fixed sticky>
 								{ header && <Table.Head>
 									<Table.Row>
 										{header}
diff --git a/client/admin/customSounds/AdminSounds.js b/client/admin/customSounds/AdminSounds.js
new file mode 100644
index 0000000000000..3450406fb3249
--- /dev/null
+++ b/client/admin/customSounds/AdminSounds.js
@@ -0,0 +1,56 @@
+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 { useCustomSound } from '../../contexts/CustomSoundContext';
+
+const FilterByText = ({ setFilter, ...props }) => {
+	const t = useTranslation();
+	const [text, setText] = useState('');
+	const handleChange = useCallback((event) => setText(event.currentTarget.value), []);
+
+	useEffect(() => {
+		setFilter({ text });
+	}, [text]);
+	return <Box mb='x16' is='form' display='flex' flexDirection='column' {...props}>
+		<TextInput placeholder={t('Search')} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
+	</Box>;
+};
+
+export function AdminSounds({
+	data,
+	sort,
+	onClick,
+	onHeaderClick,
+	setParams,
+	params,
+}) {
+	const t = useTranslation();
+
+	const header = useMemo(() => [
+		<Th key={'name'} direction={sort[1]} active={sort[0] === 'name'} onClick={onHeaderClick} sort='name'>{t('Name')}</Th>,
+		<Th w='x40' key='action'></Th>,
+	], [sort]);
+
+	const customSound = useCustomSound();
+
+	const handlePlay = useCallback((sound) => {
+		customSound.play(sound);
+	}, []);
+
+	const renderRow = (sound) => {
+		const { _id, name } = sound;
+
+		return <Table.Row key={_id} onKeyDown={onClick(_id, sound)} onClick={onClick(_id, sound)} tabIndex={0} role='link' action qa-user-id={_id}>
+			<Table.Cell fontScale='p1' color='default'><Box withTruncatedText>{name}</Box></Table.Cell>
+			<Table.Cell alignItems={'end'}>
+				<Button ghost small square aria-label={t('Play')} onClick={(e) => e.preventDefault() & e.stopPropagation() & handlePlay(_id)}>
+					<Icon name='play' size='x20' />
+				</Button>
+			</Table.Cell>
+		</Table.Row>;
+	};
+
+	return <GenericTable FilterComponent={FilterByText} header={header} renderRow={renderRow} results={data.sounds} total={data.total} setParams={setParams} params={params} />;
+}
diff --git a/client/admin/customSounds/AdminSoundsRoute.js b/client/admin/customSounds/AdminSoundsRoute.js
new file mode 100644
index 0000000000000..80ad2675f9898
--- /dev/null
+++ b/client/admin/customSounds/AdminSoundsRoute.js
@@ -0,0 +1,109 @@
+// eslint-disable
+
+import React, { useMemo, useState, useCallback } from 'react';
+import { Button, Icon } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useMediaQuery } from '@rocket.chat/fuselage-hooks';
+
+import { usePermission } from '../../contexts/AuthorizationContext';
+import { useTranslation } from '../../contexts/TranslationContext';
+import Page from '../../components/basic/Page';
+import { AdminSounds } from './AdminSounds';
+import { NewSound } from './NewSound';
+import { EditSound } from './EditSound';
+import { useRoute, useRouteParameter } from '../../contexts/RouterContext';
+import { useEndpointData } from '../../hooks/useEndpointData';
+import VerticalBar from '../../components/basic/VerticalBar';
+import NotAuthorizedPage from '../NotAuthorizedPage';
+
+const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);
+
+export const useQuery = (params, sort, cache) => useMemo(() => ({
+	query: JSON.stringify({ name: { $regex: params.text || '', $options: 'i' } }),
+	sort: JSON.stringify({ [sort[0]]: sortDir(sort[1]) }),
+	...params.itemsPerPage && { count: params.itemsPerPage },
+	...params.current && { offset: params.current },
+}), [JSON.stringify(params), JSON.stringify(sort), cache]);
+
+export default function CustomSoundsRoute({ props }) {
+	const t = useTranslation();
+	const canManageCustomSounds = usePermission('manage-sounds');
+
+	const routeName = 'custom-sounds';
+
+	const [params, setParams] = useState({ text: '', current: 0, itemsPerPage: 25 });
+	const [sort, setSort] = useState(['name', 'asc']);
+	const [cache, setCache] = useState();
+
+	const debouncedParams = useDebouncedValue(params, 500);
+	const debouncedSort = useDebouncedValue(sort, 500);
+
+	const query = useQuery(debouncedParams, debouncedSort, cache);
+
+	const data = useEndpointData('custom-sounds.list', query) || {};
+
+
+	const router = useRoute(routeName);
+
+	const mobile = useMediaQuery('(max-width: 420px)');
+	const small = useMediaQuery('(max-width: 780px)');
+
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+
+	const onClick = (_id) => () => {
+		router.push({
+			context: 'edit',
+			id: _id,
+		});
+	};
+
+	const onHeaderClick = (id) => {
+		const [sortBy, sortDirection] = sort;
+
+		if (sortBy === id) {
+			setSort([id, sortDirection === 'asc' ? 'desc' : 'asc']);
+			return;
+		}
+		setSort([id, 'asc']);
+	};
+
+	const handleHeaderButtonClick = useCallback((context) => () => {
+		router.push({ context });
+	}, [router]);
+
+	const close = () => {
+		router.push({});
+	};
+
+	if (!canManageCustomSounds) {
+		return <NotAuthorizedPage />;
+	}
+
+	const onChange = useCallback(() => {
+		setCache(new Date());
+	}, []);
+
+	return <Page {...props} flexDirection='row'>
+		<Page name='admin-custom-sounds'>
+			<Page.Header title={t('Custom_Sounds')}>
+				<Button small onClick={handleHeaderButtonClick('new')} aria-label={t('New')}>
+					<Icon name='plus'/>
+				</Button>
+			</Page.Header>
+			<Page.Content>
+				<AdminSounds setParams={setParams} params={params} onHeaderClick={onHeaderClick} data={data} onClick={onClick} sort={sort}/>
+			</Page.Content>
+		</Page>
+		{ context
+			&& <VerticalBar mod-small={small} mod-mobile={mobile} style={{ width: '378px' }} qa-context-name={`admin-user-and-room-context-${ context }`} flexShrink={0}>
+				<VerticalBar.Header>
+					{ context === 'edit' && t('Custom_Sound_Edit') }
+					{ context === 'new' && t('Custom_Sound_Add') }
+					<VerticalBar.Close onClick={close}/></VerticalBar.Header>
+				<VerticalBar.Content>
+					{context === 'edit' && <EditSound _id={id} close={close} onChange={onChange} cache={cache}/>}
+					{context === 'new' && <NewSound goToNew={onClick} close={close} onChange={onChange}/>}
+				</VerticalBar.Content>
+			</VerticalBar>}
+	</Page>;
+}
diff --git a/client/admin/customSounds/EditSound.js b/client/admin/customSounds/EditSound.js
new file mode 100644
index 0000000000000..0496a617fb0e2
--- /dev/null
+++ b/client/admin/customSounds/EditSound.js
@@ -0,0 +1,202 @@
+import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import { Box, Button, ButtonGroup, Margins, TextInput, Field, Icon, Skeleton, Throbber, InputBox } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import { useMethod } from '../../contexts/ServerContext';
+import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
+import { Modal } from '../../components/basic/Modal';
+import { useFileInput } from '../../hooks/useFileInput';
+import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
+import { validate, createSoundData } from './lib';
+
+const DeleteWarningModal = ({ onDelete, onCancel, ...props }) => {
+	const t = useTranslation();
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon color='danger' name='modal-warning' size={20}/>
+			<Modal.Title>{t('Are_you_sure')}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			{t('Custom_Sound_Status_Delete_Warning')}
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button ghost onClick={onCancel}>{t('Cancel')}</Button>
+				<Button primary danger onClick={onDelete}>{t('Delete')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+const SuccessModal = ({ onClose, ...props }) => {
+	const t = useTranslation();
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon color='success' name='checkmark-circled' size={20}/>
+			<Modal.Title>{t('Deleted')}</Modal.Title>
+			<Modal.Close onClick={onClose}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			{t('Custom_Sound_Has_Been_Deleted')}
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button primary onClick={onClose}>{t('Ok')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export function EditSound({ _id, cache, ...props }) {
+	const t = useTranslation();
+	const query = useMemo(() => ({
+		query: JSON.stringify({ _id }),
+	}), [_id]);
+
+	const { data, state, error } = useEndpointDataExperimental('custom-sounds.list', query);
+
+
+	if (state === ENDPOINT_STATES.LOADING) {
+		return <Box pb='x20'>
+			<Skeleton mbs='x8'/>
+			<InputBox.Skeleton w='full'/>
+			<Skeleton mbs='x8'/>
+			<InputBox.Skeleton w='full'/>
+			<ButtonGroup stretch w='full' mbs='x8'>
+				<Button disabled><Throbber inheritColor/></Button>
+				<Button primary disabled><Throbber inheritColor/></Button>
+			</ButtonGroup>
+			<ButtonGroup stretch w='full' mbs='x8'>
+				<Button primary danger disabled><Throbber inheritColor/></Button>
+			</ButtonGroup>
+		</Box>;
+	}
+
+	if (error || !data || data.sounds.length < 1) {
+		return <Box fontScale='h1' pb='x20'>{t('Custom_User_Status_Error_Invalid_User_Status')}</Box>;
+	}
+
+	return <EditCustomSound data={data.sounds[0]} {...props}/>;
+}
+
+export function EditCustomSound({ close, onChange, data, ...props }) {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const { _id, name: previousName } = data || {};
+	const previousSound = data || {};
+
+	const [name, setName] = useState('');
+	const [sound, setSound] = useState();
+	const [modal, setModal] = useState();
+
+	useEffect(() => {
+		setName(previousName || '');
+		setSound(previousSound || '');
+	}, [previousName, previousSound, _id]);
+
+	const deleteCustomSound = useMethod('deleteCustomSound');
+	const uploadCustomSound = useMethod('uploadCustomSound');
+	const insertOrUpdateSound = useMethod('insertOrUpdateSound');
+
+	const handleChangeFile = (soundFile) => {
+		setSound(soundFile);
+	};
+
+	const hasUnsavedChanges = useMemo(() => previousName !== name || previousSound !== sound, [name, sound]);
+
+	const saveAction = async (sound) => {
+		const soundData = createSoundData(sound, name, { previousName, previousSound, _id });
+		const validation = validate(soundData, sound);
+		if (validation.length === 0) {
+			let soundId;
+			try {
+				soundId = await insertOrUpdateSound(soundData);
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+
+			soundData._id = soundId;
+			soundData.random = Math.round(Math.random() * 1000);
+
+			if (sound && sound !== previousSound) {
+				dispatchToastMessage({ type: 'success', message: t('Uploading_file') });
+
+				const reader = new FileReader();
+				reader.readAsBinaryString(sound);
+				reader.onloadend = () => {
+					try {
+						uploadCustomSound(reader.result, sound.type, soundData);
+						return dispatchToastMessage({ type: 'success', message: t('File_uploaded') });
+					} catch (error) {
+						dispatchToastMessage({ type: 'error', message: error });
+					}
+				};
+			}
+		}
+
+		validation.forEach((error) => dispatchToastMessage({ type: 'error', message: t('error-the-field-is-required', { field: t(error) }) }));
+	};
+
+	const handleSave = useCallback(async () => {
+		saveAction(sound);
+		onChange();
+	}, [name, _id, sound]);
+
+	const onDeleteConfirm = useCallback(async () => {
+		try {
+			await deleteCustomSound(_id);
+			setModal(() => <SuccessModal onClose={() => { setModal(undefined); close(); onChange(); }}/>);
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+			onChange();
+		}
+	}, [_id]);
+
+	const openConfirmDelete = () => setModal(() => <DeleteWarningModal onDelete={onDeleteConfirm} onCancel={() => setModal(undefined)}/>);
+
+
+	const clickUpload = useFileInput(handleChangeFile, 'audio/mp3');
+
+
+	return <>
+		<Box display='flex' flexDirection='column' fontScale='p1' color='default' mbs='x20' {...props}>
+			<Margins block='x4'>
+				<Field>
+					<Field.Label>{t('Name')}</Field.Label>
+					<Field.Row>
+						<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
+					</Field.Row>
+				</Field>
+
+				<Field>
+					<Field.Label alignSelf='stretch'>{t('Sound_File_mp3')}</Field.Label>
+					<Box display='flex' flexDirection='row' mbs='none'>
+						<Margins inline='x4'>
+							<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
+							{(sound && sound.name) || 'none'}
+						</Margins>
+					</Box>
+				</Field>
+
+				<Field>
+					<Field.Row>
+						<ButtonGroup stretch w='full'>
+							<Button onClick={close}>{t('Cancel')}</Button>
+							<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>{t('Save')}</Button>
+						</ButtonGroup>
+					</Field.Row>
+				</Field>
+				<Field>
+					<Field.Row>
+						<ButtonGroup stretch w='full'>
+							<Button primary danger onClick={openConfirmDelete}><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
+						</ButtonGroup>
+					</Field.Row>
+				</Field>
+			</Margins>
+		</Box>
+		{ modal }
+	</>;
+}
diff --git a/client/admin/customSounds/NewSound.js b/client/admin/customSounds/NewSound.js
new file mode 100644
index 0000000000000..b77671f1b07a7
--- /dev/null
+++ b/client/admin/customSounds/NewSound.js
@@ -0,0 +1,101 @@
+import React, { useState, useCallback } from 'react';
+import { Field, TextInput, Box, Icon, Margins, Button, ButtonGroup } from '@rocket.chat/fuselage';
+
+import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
+import { useTranslation } from '../../contexts/TranslationContext';
+import { useMethod } from '../../contexts/ServerContext';
+import { useFileInput } from '../../hooks/useFileInput';
+import { validate, createSoundData } from './lib';
+
+export function NewSound({ goToNew, close, onChange, ...props }) {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const [name, setName] = useState('');
+	const [sound, setSound] = useState();
+
+	const uploadCustomSound = useMethod('uploadCustomSound');
+
+	const insertOrUpdateSound = useMethod('insertOrUpdateSound');
+
+	const handleChangeFile = (soundFile) => {
+		setSound(soundFile);
+	};
+
+	const clickUpload = useFileInput(handleChangeFile, 'audio/mp3');
+
+	const saveAction = async (name, soundFile) => {
+		const soundData = createSoundData(soundFile, name);
+		const validation = validate(soundData, sound);
+		if (validation.length === 0) {
+			let soundId;
+			try {
+				soundId = await insertOrUpdateSound(soundData);
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+
+			soundData._id = soundId;
+			soundData.random = Math.round(Math.random() * 1000);
+
+			if (soundId) {
+				dispatchToastMessage({ type: 'success', message: t('Uploading_file') });
+
+				const reader = new FileReader();
+				reader.readAsBinaryString(soundFile);
+				reader.onloadend = () => {
+					try {
+						uploadCustomSound(reader.result, soundFile.type, soundData);
+						dispatchToastMessage({ type: 'success', message: t('File_uploaded') });
+					} catch (error) {
+						dispatchToastMessage({ type: 'error', message: error });
+					}
+				};
+			}
+			return soundId;
+		}
+		validation.forEach((error) => { throw new Error({ type: 'error', message: t('error-the-field-is-required', { field: t(error) }) }); });
+	};
+
+	const handleSave = useCallback(async () => {
+		try {
+			const result = await saveAction(
+				name,
+				sound,
+			);
+			dispatchToastMessage({ type: 'success', message: t('Custom_Sound_Updated_Successfully') });
+			goToNew(result)();
+			onChange();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	}, [name, sound]);
+
+	return <Box display='flex' flexDirection='column' fontScale='p1' color='default' mbs='x20' {...props}>
+		<Margins block='x4'>
+			<Field>
+				<Field.Label>{t('Name')}</Field.Label>
+				<Field.Row>
+					<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
+				</Field.Row>
+			</Field>
+			<Field>
+				<Field.Label alignSelf='stretch'>{t('Sound_File_mp3')}</Field.Label>
+				<Box display='flex' flexDirection='row' mbs='none'>
+					<Margins inline='x4'>
+						<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
+						{(sound && sound.name) || 'none'}
+					</Margins>
+				</Box>
+			</Field>
+			<Field>
+				<Field.Row>
+					<ButtonGroup stretch w='full'>
+						<Button mie='x4' onClick={close}>{t('Cancel')}</Button>
+						<Button primary onClick={handleSave} disabled={name === ''}>{t('Save')}</Button>
+					</ButtonGroup>
+				</Field.Row>
+			</Field>
+		</Margins>
+	</Box>;
+}
diff --git a/client/admin/customSounds/lib.js b/client/admin/customSounds/lib.js
new file mode 100644
index 0000000000000..bff7ad4c15ed3
--- /dev/null
+++ b/client/admin/customSounds/lib.js
@@ -0,0 +1,41 @@
+// Here previousData will define if it is an update or a new entry
+export function validate(soundData, soundFile) {
+	const errors = [];
+
+	if (!soundData.name) {
+		errors.push('Name');
+	}
+
+	if (!soundData._id && !soundFile) {
+		errors.push('Sound File');
+	}
+
+	if (soundFile) {
+		if (!soundData.previousSound || soundData.previousSound !== soundFile) {
+			if (!/audio\/mp3/.test(soundFile.type) && !/audio\/mpeg/.test(soundFile.type) && !/audio\/x-mpeg/.test(soundFile.type)) {
+				errors.push('FileType');
+			}
+		}
+	}
+
+	return errors;
+}
+
+export function createSoundData(soundFile, name = '', previousData) {
+	const soundData = {};
+
+	if (previousData) {
+		soundData._id = previousData._id;
+		soundData.previousName = previousData.previousName;
+		soundData.previousSound = previousData.previousSound;
+		soundData.extension = soundFile.name.split('.').pop();
+		soundData.previousExtension = previousData.previousSound.extension;
+		soundData.name = name;
+		soundData.newFile = false;
+	} else {
+		soundData.name = name.trim();
+		soundData.newFile = true;
+	}
+
+	return soundData;
+}
diff --git a/client/admin/routes.js b/client/admin/routes.js
index 4ed84283294cb..4df152660524c 100644
--- a/client/admin/routes.js
+++ b/client/admin/routes.js
@@ -32,6 +32,12 @@ registerAdminRoute('/', {
 	}],
 });
 
+registerAdminRoute('/custom-sounds/:context?/:id?', {
+	name: 'custom-sounds',
+	lazyRouteComponent: () => import('./customSounds/AdminSoundsRoute'),
+});
+
+
 registerAdminRoute('/info', {
 	name: 'admin-info',
 	lazyRouteComponent: () => import('./info/InformationRoute'),
diff --git a/client/admin/sidebarItems.js b/client/admin/sidebarItems.js
index 9a0305f359edf..a76b96d08dda1 100644
--- a/client/admin/sidebarItems.js
+++ b/client/admin/sidebarItems.js
@@ -48,3 +48,12 @@ registerAdminSidebarItem({
 	icon: 'post',
 	permissionGranted: () => hasPermission('view-logs'),
 });
+
+registerAdminSidebarItem({
+	href: 'custom-sounds',
+	i18nLabel: 'Custom_Sounds',
+	icon: 'volume',
+	permissionGranted() {
+		return hasPermission(['manage-sounds']);
+	},
+});
diff --git a/client/contexts/CustomSoundContext.js b/client/contexts/CustomSoundContext.js
new file mode 100644
index 0000000000000..d10547e2bd12a
--- /dev/null
+++ b/client/contexts/CustomSoundContext.js
@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+export const CustomSoundContext = createContext({
+	play: () => {},
+});
+
+export const useCustomSound = () => useContext(CustomSoundContext);
diff --git a/client/hooks/useFileInput.js b/client/hooks/useFileInput.js
index 78919f2878885..ded5860976c5d 100644
--- a/client/hooks/useFileInput.js
+++ b/client/hooks/useFileInput.js
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-export const useFileInput = (onSetFile) => {
+export const useFileInput = (onSetFile, fileType = 'image') => {
 	const [openInput, setOpenInput] = useState();
 
 	useEffect(() => {
@@ -11,7 +11,7 @@ export const useFileInput = (onSetFile) => {
 		document.body.appendChild(fileInput);
 
 		const handleFiles = function() {
-			formData.append('image', this.files[0]);
+			formData.append(fileType, this.files[0]);
 			onSetFile(this.files[0], formData);
 		};
 		fileInput.addEventListener('change', handleFiles, false);
diff --git a/client/providers/CustomSoundProvides.js b/client/providers/CustomSoundProvides.js
new file mode 100644
index 0000000000000..d5a41bc54fa1f
--- /dev/null
+++ b/client/providers/CustomSoundProvides.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { CustomSounds } from '../../app/custom-sounds/client/lib/CustomSounds';
+import { CustomSoundContext } from '../contexts/CustomSoundContext';
+
+
+export function CustomSoundProvider({ children }) {
+	return <CustomSoundContext.Provider children={children} value={CustomSounds} />;
+}
diff --git a/client/providers/MeteorProvider.js b/client/providers/MeteorProvider.js
index 378d37743b4c2..482906b7c689f 100644
--- a/client/providers/MeteorProvider.js
+++ b/client/providers/MeteorProvider.js
@@ -11,6 +11,7 @@ import { TranslationProvider } from './TranslationProvider';
 import { ToastMessagesProvider } from './ToastMessagesProvider';
 import { UserProvider } from './UserProvider';
 import { AvatarUrlProvider } from './AvatarUrlProvider';
+import { CustomSoundProvider } from './CustomSoundProvides';
 
 export function MeteorProvider({ children }) {
 	return <ConnectionStatusProvider>
@@ -21,13 +22,15 @@ export function MeteorProvider({ children }) {
 						<SidebarProvider>
 							<ToastMessagesProvider>
 								<SettingsProvider>
-									<AvatarUrlProvider>
-										<UserProvider>
-											<AuthorizationProvider>
-												{children}
-											</AuthorizationProvider>
-										</UserProvider>
-									</AvatarUrlProvider>
+									<CustomSoundProvider>
+										<AvatarUrlProvider>
+											<UserProvider>
+												<AuthorizationProvider>
+													{children}
+												</AuthorizationProvider>
+											</UserProvider>
+										</AvatarUrlProvider>
+									</CustomSoundProvider>
 								</SettingsProvider>
 							</ToastMessagesProvider>
 						</SidebarProvider>