diff --git a/public/src/client/chats.js b/public/src/client/chats.js
index 7063055c5d..f72b1e1aaa 100644
--- a/public/src/client/chats.js
+++ b/public/src/client/chats.js
@@ -247,7 +247,7 @@ define('forum/chats', [
 		let modal;
 
 		buttonEl.on('click', function () {
-			app.parseAndTranslate('partials/modals/manage_room', {}, function (html) {
+			app.parseAndTranslate('modals/manage-room', {}, function (html) {
 				modal = bootbox.dialog({
 					title: '[[modules:chat.manage-room]]',
 					message: html,
@@ -325,7 +325,7 @@ define('forum/chats', [
 			}
 		}
 
-		app.parseAndTranslate('partials/modals/manage_room_users', data, function (html) {
+		app.parseAndTranslate('partials/chats/manage-room-users', data, function (html) {
 			listEl.html(html);
 		});
 	};
@@ -334,7 +334,7 @@ define('forum/chats', [
 		let modal;
 
 		buttonEl.on('click', function () {
-			app.parseAndTranslate('partials/modals/rename_room', {
+			app.parseAndTranslate('modals/rename-room', {
 				name: roomName || ajaxify.data.roomName,
 			}, function (html) {
 				modal = bootbox.dialog({
diff --git a/public/src/client/topic/diffs.js b/public/src/client/topic/diffs.js
index ea492348cb..d635c4e0f6 100644
--- a/public/src/client/topic/diffs.js
+++ b/public/src/client/topic/diffs.js
@@ -109,7 +109,7 @@ define('forum/topic/diffs', ['api', 'bootbox', 'alerts', 'forum/topic/images'],
 				params.unshift(blockName);
 			}
 
-			app.parseAndTranslate('partials/modals/post_history', ...params);
+			app.parseAndTranslate('modals/post-history', ...params);
 		});
 	}
 
diff --git a/public/src/client/topic/votes.js b/public/src/client/topic/votes.js
index 74402df1e4..3f2bc718d0 100644
--- a/public/src/client/topic/votes.js
+++ b/public/src/client/topic/votes.js
@@ -100,7 +100,7 @@ define('forum/topic/votes', [
 				return alerts.error(err);
 			}
 
-			app.parseAndTranslate('partials/modals/votes_modal', data, function (html) {
+			app.parseAndTranslate('modals/votes', data, function (html) {
 				const dialog = bootbox.dialog({
 					title: '[[global:voters]]',
 					message: html,
diff --git a/public/src/modules/accounts/picture.js b/public/src/modules/accounts/picture.js
index a95ea2270e..e9413bf209 100644
--- a/public/src/modules/accounts/picture.js
+++ b/public/src/modules/accounts/picture.js
@@ -172,7 +172,7 @@ define('accounts/picture', [
 
 		modal.find('[data-action="upload-url"]').on('click', function () {
 			modal.modal('hide');
-			app.parseAndTranslate('partials/modals/upload_picture_from_url_modal', {}, function (uploadModal) {
+			app.parseAndTranslate('modals/upload-picture-from-url', {}, function (uploadModal) {
 				uploadModal.modal('show');
 
 				uploadModal.find('.upload-btn').on('click', function () {
diff --git a/public/src/modules/flags.js b/public/src/modules/flags.js
index 820dad9a7a..bff55bf8b5 100644
--- a/public/src/modules/flags.js
+++ b/public/src/modules/flags.js
@@ -8,7 +8,7 @@ define('flags', ['hooks', 'components', 'api', 'alerts'], function (hooks, compo
 	let flagReason;
 
 	Flag.showFlagModal = function (data) {
-		app.parseAndTranslate('partials/modals/flag_modal', data, function (html) {
+		app.parseAndTranslate('modals/flag', data, function (html) {
 			flagModal = html;
 			flagModal.on('hidden.bs.modal', function () {
 				flagModal.remove();
diff --git a/public/src/modules/pictureCropper.js b/public/src/modules/pictureCropper.js
index cb1201ba29..c6b7185406 100644
--- a/public/src/modules/pictureCropper.js
+++ b/public/src/modules/pictureCropper.js
@@ -5,7 +5,7 @@ define('pictureCropper', ['alerts'], function (alerts) {
 
 	module.show = function (data, callback) {
 		const fileSize = data.hasOwnProperty('fileSize') && data.fileSize !== undefined ? parseInt(data.fileSize, 10) : false;
-		app.parseAndTranslate('partials/modals/upload_file_modal', {
+		app.parseAndTranslate('modals/upload-file', {
 			showHelp: data.hasOwnProperty('showHelp') && data.showHelp !== undefined ? data.showHelp : true,
 			fileSize: fileSize,
 			title: data.title || '[[global:upload_file]]',
diff --git a/public/src/modules/uploader.js b/public/src/modules/uploader.js
index c8d5351e7e..8aa010871a 100644
--- a/public/src/modules/uploader.js
+++ b/public/src/modules/uploader.js
@@ -6,7 +6,7 @@ define('uploader', ['jquery-form'], function () {
 
 	module.show = function (data, callback) {
 		const fileSize = data.hasOwnProperty('fileSize') && data.fileSize !== undefined ? parseInt(data.fileSize, 10) : false;
-		app.parseAndTranslate('partials/modals/upload_file_modal', {
+		app.parseAndTranslate('modals/upload-file', {
 			showHelp: data.hasOwnProperty('showHelp') && data.showHelp !== undefined ? data.showHelp : true,
 			fileSize: fileSize,
 			title: data.title || '[[global:upload_file]]',
diff --git a/src/views/modals/flag.tpl b/src/views/modals/flag.tpl
new file mode 100644
index 0000000000..3b101138e4
--- /dev/null
+++ b/src/views/modals/flag.tpl
@@ -0,0 +1,42 @@
+<div class="modal" tabindex="-1" role="dialog" aria-labelledby="[[flags:modal-title]]" aria-hidden="true">
+	<div class="modal-dialog modal-lg">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title">[[flags:modal-title]]</h5>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+			</div>
+			<div class="modal-body">
+				<p class="lead">
+					[[flags:modal-body, {type}, {id}]]
+				</p>
+				<div>
+					<div class="radio mb-2">
+						<label for="flag-reason-spam">
+							<input type="radio" name="flag-reason" id="flag-reason-spam" value="[[flags:modal-reason-spam]]">
+							[[flags:modal-reason-spam]]
+						</label>
+					</div>
+
+					<div class="radio mb-2">
+						<label for="flag-reason-offensive">
+							<input type="radio" name="flag-reason" id="flag-reason-offensive" value="[[flags:modal-reason-offensive]]">
+							[[flags:modal-reason-offensive]]
+						</label>
+					</div>
+
+					<div class="radio mb-2">
+						<label for="flag-reason-other">
+							<input type="radio" name="flag-reason" id="flag-reason-other" value="[[flags:modal-reason-other]]">
+							[[flags:modal-reason-other]]
+						</label>
+					</div>
+				</div>
+				<div class="mb-3">
+					<textarea class="form-control" id="flag-reason-custom" placeholder="[[flags:modal-reason-custom]]" disabled="disabled"></textarea>
+				</div>
+
+				<button type="button" class="btn btn-primary" id="flag-post-commit" disabled>[[flags:modal-submit]]</button>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/views/modals/manage-room.tpl b/src/views/modals/manage-room.tpl
new file mode 100644
index 0000000000..de9ac4f331
--- /dev/null
+++ b/src/views/modals/manage-room.tpl
@@ -0,0 +1,11 @@
+<div class="mb-3">
+	<input class="form-control" type="text" placeholder="[[global:user-search-prompt]]" />
+	<p class="text-danger"></p>
+	<p class="form-text">[[modules:chat.add-user-help]]</p>
+
+	<hr />
+
+	<ul class="list-group">
+		<li class="list-group-item"><i class="fa fa-spinner fa-spin"></i> [[modules:chat.retrieving-users]]</li>
+	</ul>
+</div>
\ No newline at end of file
diff --git a/src/views/modals/post-history.tpl b/src/views/modals/post-history.tpl
new file mode 100644
index 0000000000..1f187e991e
--- /dev/null
+++ b/src/views/modals/post-history.tpl
@@ -0,0 +1,36 @@
+<p class="number-of-diffs">
+	<!-- IF numDiffs -->
+	[[topic:diffs.description, {numDiffs}]]
+	<!-- ELSE -->
+	[[topic:diffs.no-revisions-description, {numDiffs}]]
+	<!-- END -->
+</p>
+<!-- IF numDiffs -->
+<div class="mb-3">
+	<select class="form-control">
+		{{{each diffs}}}
+		<option value="{../timestamp}">
+			{../pretty}
+			{{{ if ../username }}}[{../username}]{{{ end }}}
+			<!-- IF @first -->([[topic:diffs.current-revision]])<!-- END -->
+			<!-- IF @last -->([[topic:diffs.original-revision]])<!-- END -->
+		</option>
+		{{{end}}}
+	</select>
+
+	<hr />
+
+	<ul class="posts-list diffs list-unstyled"></ul>
+
+	{{{ if editable }}}
+	<button class="btn btn-primary" data-action="restore">[[topic:diffs.restore]]</button>
+	{{{ end }}}
+	{{{ if deletable }}}
+	<button class="btn btn-danger" data-action="delete">[[topic:diffs.delete]]</button>
+	{{{ end }}}
+	{{{ if editable }}}
+	<p class="form-text">[[topic:diffs.restore-description]]</p>
+	{{{ end }}}
+
+</div>
+<!-- END -->
diff --git a/src/views/modals/rename-room.tpl b/src/views/modals/rename-room.tpl
new file mode 100644
index 0000000000..9a77ca105c
--- /dev/null
+++ b/src/views/modals/rename-room.tpl
@@ -0,0 +1,4 @@
+<input type="text" class="form-control" id="roomName" placeholder="[[modules:chat.rename-placeholder]]" value="{name}" />
+<p class="form-text">
+	[[modules:chat.rename-help]]
+</p>
\ No newline at end of file
diff --git a/src/views/modals/upload-file.tpl b/src/views/modals/upload-file.tpl
new file mode 100644
index 0000000000..6f46f54d6a
--- /dev/null
+++ b/src/views/modals/upload-file.tpl
@@ -0,0 +1,44 @@
+<div class="modal" tabindex="-1" role="dialog" aria-labelledby="upload-file" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title">{title}</h5>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+			</div>
+			<div class="modal-body">
+				<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
+					<div class="form-group">
+						<!-- IF description -->
+						<label for="fileInput">{description}</label>
+						<!-- ENDIF description -->
+						<input type="file" id="fileInput" name="files[]" <!-- IF accept -->accept="{accept}"<!-- ENDIF accept -->>
+						<!-- IF showHelp -->
+						<p class="form-text">
+							<!-- IF accept -->
+							[[global:allowed-file-types, {accept}]]
+							<!-- ENDIF accept -->
+
+							<!-- IF fileSize --><span id="file-size-block">([[uploads:maximum-file-size, {fileSize}]])</span><!-- ENDIF fileSize -->
+						</p>
+						<!-- ENDIF showHelp -->
+					</div>
+					<input type="hidden" id="params" name="params" />
+				</form>
+
+				<div id="upload-progress-box" class="progress progress-striped hide">
+					<div id="upload-progress-bar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0">
+						<span class="sr-only"> [[success:success]]</span>
+					</div>
+				</div>
+
+				<div id="alert-status" class="alert alert-info hide"></div>
+				<div id="alert-success" class="alert alert-success hide"></div>
+				<div id="alert-error" class="alert alert-danger hide"></div>
+			</div>
+			<div class="modal-footer">
+				<button class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-hidden="true">[[global:close]]</button>
+				<button id="fileUploadSubmitBtn" class="btn btn-primary">{button}</button>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/views/modals/upload-picture-from-url.tpl b/src/views/modals/upload-picture-from-url.tpl
new file mode 100644
index 0000000000..0de3317aa4
--- /dev/null
+++ b/src/views/modals/upload-picture-from-url.tpl
@@ -0,0 +1,17 @@
+<div id="upload-picture-from-url-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="upload-picture-url" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<h5 class="modal-title" id="upload-picture-url">[[user:upload_picture]]</h5>
+				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
+			</div>
+			<div class="modal-body">
+				<input id="uploadFromUrl" class="form-control" type="text"/>
+			</div>
+			<div class="modal-footer">
+				<button class="btn btn-outline-secondary" data-bs-dismiss="modal" aria-hidden="true">[[global:close]]</button>
+				<button class="btn btn-primary upload-btn">[[user:upload_picture]]</button>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/views/modals/votes.tpl b/src/views/modals/votes.tpl
new file mode 100644
index 0000000000..e38fa3e374
--- /dev/null
+++ b/src/views/modals/votes.tpl
@@ -0,0 +1,10 @@
+<h3>[[global:upvoters]] <small>({upvoteCount})</small></h3>
+{{{each upvoters}}}
+<a href="{config.relative_path}/user/{upvoters.userslug}">{buildAvatar(upvoters, "24px", true)}</a>
+{{{end}}}
+<!-- IF showDownvotes -->
+<h3>[[global:downvoters]] <small>({downvoteCount})</small></h3>
+{{{each downvoters}}}
+<a href="{config.relative_path}/user/{downvoters.userslug}">{buildAvatar(downvoters, "24px", true)}</a>
+{{{end}}}
+<!-- ENDIF showDownvotes -->
diff --git a/src/views/partials/chats/manage-room-users.tpl b/src/views/partials/chats/manage-room-users.tpl
new file mode 100644
index 0000000000..f8808587bd
--- /dev/null
+++ b/src/views/partials/chats/manage-room-users.tpl
@@ -0,0 +1,7 @@
+{{{ each users }}}
+<li class="list-group-item">
+	{{{ if ./canKick }}}<button class="float-end btn btn-sm btn-link" data-action="kick" data-uid="{../uid}">[[modules:chat.kick]]</button>{{{ end }}}
+	{buildAvatar(users, "24px", true)}
+	<span>{../username} {{{ if ./isOwner }}}<i class="fa fa-star text-warning" title="[[modules:chat.owner]]"></i>{{{ end }}}</span>
+</li>
+{{{ end }}}
\ No newline at end of file