diff --git a/public/src/client/topic/postTools.js b/public/src/client/topic/postTools.js
index 640d936f16..28538b972f 100644
--- a/public/src/client/topic/postTools.js
+++ b/public/src/client/topic/postTools.js
@@ -453,7 +453,7 @@ define('forum/topic/postTools', [
 		require(['chat'], function (chat) {
 			chat.newChat(post.attr('data-uid'));
 		});
-		button.parents('.btn-group').find('.dropdown-toggle').click();
+		button.parents('.dropdown').find('.dropdown-toggle').click();
 		return false;
 	}
 
diff --git a/src/views/admin/manage/categories.tpl b/src/views/admin/manage/categories.tpl
index 243936577e..0519c429d3 100644
--- a/src/views/admin/manage/categories.tpl
+++ b/src/views/admin/manage/categories.tpl
@@ -8,7 +8,7 @@
 
 			<!-- IMPORT admin/partials/category/selector-dropdown-right.tpl -->
 
-			<div class="btn-group" role="group">
+			<div class="dropdown" role="group">
 				<button class="btn btn-primary btn-sm btn btn-primary btn-sm fw-semibold ff-secondary text-center text-nowrap dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
 					[[admin/manage/categories:add-category]]
 					<i class="fa fa-caret-down"></i>
diff --git a/src/views/admin/manage/group.tpl b/src/views/admin/manage/group.tpl
index 04d4e3b66e..f08142547c 100644
--- a/src/views/admin/manage/group.tpl
+++ b/src/views/admin/manage/group.tpl
@@ -5,7 +5,7 @@
 		<div class="col-12 col-md-8 px-0 mb-1 mb-md-0 d-flex justify-content-between align-items-center">
 			<h4 class="fw-bold tracking-tight mb-0">[[admin/manage/groups:edit-group]]</h4>
 
-			<div component="group-selector" class="btn-group">
+			<div component="group-selector" class="dropdown">
 				<button type="button" class="btn btn-ghost btn-sm dropdown-toggle w-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 					<span component="group-selector-selected">{group.displayName}</span> <span class="caret"></span>
 				</button>
@@ -157,7 +157,7 @@
 				<hr class="my-1"/>
 
 				<div class="edit-privileges-selector w-100">
-					<div component="category-selector" class="btn-group w-100">
+					<div component="category-selector" class="dropdown w-100">
 						<button type="button" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center flex-fill dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 							<i class="fa fa-fw fa-lock text-primary"></i> <span>[[admin/manage/groups:privileges]]</span> <span class="caret"></span>
 						</button>
diff --git a/src/views/admin/manage/registration.tpl b/src/views/admin/manage/registration.tpl
index 9eaf75c24f..265066926c 100644
--- a/src/views/admin/manage/registration.tpl
+++ b/src/views/admin/manage/registration.tpl
@@ -116,7 +116,7 @@
 							<td class ="invited-by">{{{ if @first }}}{invites.username}{{{ end }}}</td>
 							<td>{invites.invitations.email}</td>
 							<td>{invites.invitations.username}
-								<div class="btn-group float-end">
+								<div class="float-end">
 									<button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-times"></i></button>
 								</div>
 							</td>
diff --git a/src/views/admin/manage/users.tpl b/src/views/admin/manage/users.tpl
index 3223b2a485..21fa9d5e1c 100644
--- a/src/views/admin/manage/users.tpl
+++ b/src/views/admin/manage/users.tpl
@@ -21,7 +21,7 @@
 					<option value="250">[[admin/manage/users:250-per-page]]</option>
 					<option value="500">[[admin/manage/users:500-per-page]]</option>
 				</select>
-				<div class="btn-group" id="filter-by">
+				<div class="dropdown d-flex" id="filter-by">
 					<button type="button" class="btn btn-light btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						[[admin/manage/users:filter-by]] <span class="caret"></span>
 					</button>
@@ -37,7 +37,7 @@
 						</li>
 					</ul>
 				</div>
-				<div class="btn-group">
+				<div class="dropdown d-flex">
 					<button class="btn btn-primary btn-sm dropdown-toggle" id="action-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" disabled="disabled">[[admin/manage/users:edit]] <span class="caret"></span></button>
 					<ul class="dropdown-menu dropdown-menu-end p-1 text-sm overflow-auto" role="menu" style="max-height:75vh;">
 
@@ -75,7 +75,7 @@
 						<li><a href="#" class="dropdown-item rounded-1 delete-user-and-content" role="menuitem"><i class="text-secondary fa fa-fw fa-trash-o"></i> [[admin/manage/users:purge]]</a></li>
 					</ul>
 				</div>
-				<div class="btn-group">
+				<div class="dropdown d-flex">
 					<button class="btn btn-light btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><i class="fa fa-gear text-primary"></i></button>
 					<ul class="dropdown-menu dropdown-menu-end p-1" role="menu">
 						<li><a class="dropdown-item rounded-1" href="#" data-action="create" role="menuitem">[[admin/manage/users:create]]</a></li>
diff --git a/src/views/admin/partials/categories/select-category.tpl b/src/views/admin/partials/categories/select-category.tpl
index 7c2d7679f3..178b598448 100644
--- a/src/views/admin/partials/categories/select-category.tpl
+++ b/src/views/admin/partials/categories/select-category.tpl
@@ -1,5 +1,5 @@
 <div class="mb-3">
-	<div component="category-selector" class="btn-group">
+	<div component="category-selector" class="dropdown">
 		<button type="button" class="btn btn-ghost border d-flex align-items-center gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 			<span component="category-selector-selected" class="d-flex align-items-center">[[topic:thread-tools.select-category]]</span> <span class="caret"></span>
 		</button>
diff --git a/src/views/admin/partials/category/selector-dropdown-left.tpl b/src/views/admin/partials/category/selector-dropdown-left.tpl
index b61fb72745..15fb392c40 100644
--- a/src/views/admin/partials/category/selector-dropdown-left.tpl
+++ b/src/views/admin/partials/category/selector-dropdown-left.tpl
@@ -1,3 +1,3 @@
-<div component="category-selector" class="btn-group dropdown-left bottom-sheet">
+<div component="category-selector" class="dropdown dropdown-left bottom-sheet">
 <!-- IMPORT admin/partials/category/selector-dropdown-content.tpl -->
 </div>
\ No newline at end of file
diff --git a/src/views/admin/partials/category/selector-dropdown-right.tpl b/src/views/admin/partials/category/selector-dropdown-right.tpl
index dda6493b82..54b443607c 100644
--- a/src/views/admin/partials/category/selector-dropdown-right.tpl
+++ b/src/views/admin/partials/category/selector-dropdown-right.tpl
@@ -1,3 +1,3 @@
-<div component="category-selector" class="btn-group dropdown-right category-dropdown-container bottom-sheet">
+<div component="category-selector" class="dropdown dropdown-right category-dropdown-container bottom-sheet">
 <!-- IMPORT admin/partials/category/selector-dropdown-content.tpl -->
 </div>
\ No newline at end of file
diff --git a/src/views/flags/detail.tpl b/src/views/flags/detail.tpl
index c1e39af6ac..d8f7806242 100644
--- a/src/views/flags/detail.tpl
+++ b/src/views/flags/detail.tpl
@@ -9,8 +9,8 @@
 			</a>
 
 			{{{ if target.uid }}}
-			<div class="btn-group dropend" data-uid="{target.uid}">
-				<button type="button" class="btn btn-ghost btn-sm ff-secondary border d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			<div class="dropdown dropend" data-uid="{target.uid}">
+				<button type="button" class="btn btn-ghost btn-sm ff-secondary border d-flex gap-2 align-items-center dropdown-toggle w-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 					<i class="fa fa-fw fa-street-view text-primary"></i>
 					[[flags:flagged-user]]
 					<i class="fa fa-chevron-right ms-auto text-secondary"></i>
diff --git a/src/views/partials/category/filter-dropdown-left.tpl b/src/views/partials/category/filter-dropdown-left.tpl
index 3bfc37a2ef..f0bf280565 100644
--- a/src/views/partials/category/filter-dropdown-left.tpl
+++ b/src/views/partials/category/filter-dropdown-left.tpl
@@ -1,3 +1,3 @@
-<div component="category/dropdown" class="btn-group dropdown-left category-dropdown-container bottom-sheet">
+<div component="category/dropdown" class="dropdown dropdown-left category-dropdown-container bottom-sheet">
 	<!-- IMPORT partials/category/filter-dropdown-content.tpl -->
 </div>
\ No newline at end of file
diff --git a/src/views/partials/category/filter-dropdown-right.tpl b/src/views/partials/category/filter-dropdown-right.tpl
index 8be56907cc..7e77c9a064 100644
--- a/src/views/partials/category/filter-dropdown-right.tpl
+++ b/src/views/partials/category/filter-dropdown-right.tpl
@@ -1,3 +1,3 @@
-<div component="category/dropdown" class="btn-group dropdown-right category-dropdown-container bottom-sheet">
+<div component="category/dropdown" class="dropdown dropdown-right category-dropdown-container bottom-sheet">
 	<!-- IMPORT partials/category/filter-dropdown-content.tpl -->
  </div>
\ No newline at end of file
diff --git a/src/views/partials/category/selector-dropdown-left.tpl b/src/views/partials/category/selector-dropdown-left.tpl
index e978d5118b..ca0671b5a7 100644
--- a/src/views/partials/category/selector-dropdown-left.tpl
+++ b/src/views/partials/category/selector-dropdown-left.tpl
@@ -1,3 +1,3 @@
-<div component="category-selector" class="btn-group dropdown-left category-dropdown-container bottom-sheet">
+<div component="category-selector" class="dropdown dropdown-left category-dropdown-container bottom-sheet">
 	<!-- IMPORT partials/category/selector-dropdown-content.tpl -->
 </div>
\ No newline at end of file
diff --git a/src/views/partials/category/selector-dropdown-right.tpl b/src/views/partials/category/selector-dropdown-right.tpl
index 55f916f6ad..b8b31cd829 100644
--- a/src/views/partials/category/selector-dropdown-right.tpl
+++ b/src/views/partials/category/selector-dropdown-right.tpl
@@ -1,3 +1,3 @@
-<div component="category-selector" class="btn-group dropdown-right category-dropdown-container bottom-sheet">
+<div component="category-selector" class="dropdown dropdown-right category-dropdown-container bottom-sheet">
 	<!-- IMPORT partials/category/selector-dropdown-content.tpl -->
 </div>
\ No newline at end of file
diff --git a/src/views/partials/category/sort.tpl b/src/views/partials/category/sort.tpl
index 77f9f5b354..c1952e6e71 100644
--- a/src/views/partials/category/sort.tpl
+++ b/src/views/partials/category/sort.tpl
@@ -1,4 +1,4 @@
-<div class="btn-group bottom-sheet" component="thread/sort">
+<div class="dropdown bottom-sheet" component="thread/sort">
 	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:topic-sort-option, {sortOptionLabel}]]">
 		<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
 		<span class="d-none d-md-inline fw-semibold">{sortOptionLabel}</span>
diff --git a/src/views/partials/category/tools-dropdown-left.tpl b/src/views/partials/category/tools-dropdown-left.tpl
index b6917296c7..f2d1786f2f 100644
--- a/src/views/partials/category/tools-dropdown-left.tpl
+++ b/src/views/partials/category/tools-dropdown-left.tpl
@@ -1,5 +1,5 @@
 {{{ if showTopicTools }}}
-<div class="btn-group thread-tools dropdown-left bottom-sheet">
+<div class="dropdown thread-tools dropdown-left bottom-sheet">
 	<!-- IMPORT partials/category/tools-dropdown-content.tpl -->
 </div>
 {{{ end }}}
\ No newline at end of file
diff --git a/src/views/partials/category/tools-dropdown-right.tpl b/src/views/partials/category/tools-dropdown-right.tpl
index 5a43f6d6c7..5d854a7149 100644
--- a/src/views/partials/category/tools-dropdown-right.tpl
+++ b/src/views/partials/category/tools-dropdown-right.tpl
@@ -1,5 +1,5 @@
 {{{ if showTopicTools }}}
-<div class="btn-group thread-tools dropdown-right bottom-sheet">
+<div class="dropdown thread-tools dropdown-right bottom-sheet">
 	<!-- IMPORT partials/category/tools-dropdown-content.tpl -->
 </div>
 {{{ end }}}
\ No newline at end of file
diff --git a/src/views/partials/category/watch.tpl b/src/views/partials/category/watch.tpl
index 1719bba07d..66a2dce28e 100644
--- a/src/views/partials/category/watch.tpl
+++ b/src/views/partials/category/watch.tpl
@@ -1,5 +1,5 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group bottom-sheet" component="topic/watch">
+<div class="dropdown bottom-sheet" component="topic/watch">
 	<button class="btn btn-ghost btn-sm ff-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<span component="category/watching/menu" class="d-flex gap-2 align-items-center {{{ if !./isWatched }}} hidden{{{ end }}}"><i class="fa fa-fw fa-bell-o text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold">[[category:watching]]</span></span>
 
diff --git a/src/views/partials/flags/filters.tpl b/src/views/partials/flags/filters.tpl
index c45c413baf..d0f91243e6 100644
--- a/src/views/partials/flags/filters.tpl
+++ b/src/views/partials/flags/filters.tpl
@@ -1,5 +1,5 @@
 <div component="flags/filters" class="d-flex flex-wrap gap-2 pb-3 border-bottom">
-	<div class="btn-group bottom-sheet">
+	<div class="dropdown bottom-sheet">
 		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.quick }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">{{{ if filters.quick }}}[[flags:filter-quick-{./filters.quick}]]{{{ else }}}[[flags:quick-filters]]{{{ end }}}</span>
 			<span class="caret text-primary opacity-75"></span>
@@ -11,7 +11,7 @@
 		</ul>
 	</div>
 
-	<div component="category/dropdown" class="btn-group category-dropdown-container bottom-sheet">
+	<div component="category/dropdown" class="dropdown category-dropdown-container bottom-sheet">
 		<button type="button" class="filter-btn btn btn-light btn-sm border dropdown-toggle {{{ if filters.cid }}}active-filter{{{ end }}}" data-bs-toggle="dropdown">
 			{{{ if selectedCategory }}}
 			<span class="category-item d-inline-flex align-items-center gap-1">
@@ -50,7 +50,7 @@
 		</div>
 	</div>
 
-	<div class="btn-group bottom-sheet">
+	<div class="dropdown bottom-sheet">
 		<a class="filter-btn btn btn-light btn-sm border {{{ if (sort != "newest") }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">{{{ if (sort != "newest") }}}[[flags:sort-{./sort}]]{{{ else }}}[[flags:sort]]{{{ end }}}</span>
 			<span class="caret text-primary opacity-75"></span>
@@ -67,7 +67,7 @@
 		</ul>
 	</div>
 
-	<div class="btn-group bottom-sheet">
+	<div class="dropdown bottom-sheet">
 		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.state }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">{{{ if filters.state }}}[[flags:state-{./filters.state}]]{{{ else }}}[[flags:filter-state]]{{{ end }}}</span>
 			<span class="caret text-primary opacity-75"></span>
@@ -80,7 +80,7 @@
 		</ul>
 	</div>
 
-	<div class="btn-group bottom-sheet">
+	<div class="dropdown bottom-sheet">
 		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.type }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
 			<span class="filter-label">{{{ if filters.type }}}[[flags:filter-type-{./filters.type}]]{{{ else }}}[[flags:filter-type]]{{{ end }}}</span>
 			<span class="caret text-primary opacity-75"></span>
diff --git a/src/views/partials/tags/filter-dropdown-left.tpl b/src/views/partials/tags/filter-dropdown-left.tpl
index b80f290a56..37bfc4b293 100644
--- a/src/views/partials/tags/filter-dropdown-left.tpl
+++ b/src/views/partials/tags/filter-dropdown-left.tpl
@@ -1,3 +1,3 @@
-<div component="tag/filter" class="btn-group dropdown dropdown-left bottom-sheet">
+<div component="tag/filter" class="dropdown dropdown-left bottom-sheet">
 	<!-- IMPORT partials/tags/filter-dropdown-content.tpl -->
 </div>
\ No newline at end of file
diff --git a/src/views/partials/tags/filter-dropdown-right.tpl b/src/views/partials/tags/filter-dropdown-right.tpl
index 0d30e0e2b6..daed15f46c 100644
--- a/src/views/partials/tags/filter-dropdown-right.tpl
+++ b/src/views/partials/tags/filter-dropdown-right.tpl
@@ -1,3 +1,3 @@
-<div component="tag/filter" class="btn-group dropdown dropdown-right bottom-sheet">
+<div component="tag/filter" class="dropdown dropdown-right bottom-sheet">
 	<!-- IMPORT partials/tags/filter-dropdown-content.tpl -->
 </div>
diff --git a/src/views/partials/tags/watch.tpl b/src/views/partials/tags/watch.tpl
index 91610e1cfb..41545d5e34 100644
--- a/src/views/partials/tags/watch.tpl
+++ b/src/views/partials/tags/watch.tpl
@@ -1,5 +1,5 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group bottom-sheet" component="tag/watch">
+<div class="dropdown bottom-sheet" component="tag/watch">
 	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<span component="tag/following/menu" class="d-flex gap-2 align-items-center{{{ if !isFollowing }}} hidden{{{ end }}}">
 			<i class="flex-shrink-0 fa fa-fw fa-bell-o text-primary"></i>
diff --git a/src/views/post-queue.tpl b/src/views/post-queue.tpl
index 113e8791a6..7366500f6e 100644
--- a/src/views/post-queue.tpl
+++ b/src/views/post-queue.tpl
@@ -19,7 +19,7 @@
 		<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
 		</div>
 
-		<div class="btn-group bottom-sheet" component="post-queue/bulk-actions">
+		<div class="dropdown bottom-sheet" component="post-queue/bulk-actions">
 			<button type="button" class="btn btn-ghost btn-sm ff-secondary dropdown-toggle d-flex align-items-center gap-2" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false">
 				<i class="fa fa-clone text-primary"></i><span class="fw-semibold"> [[post-queue:bulk-actions]]</span>
 			</button>
@@ -77,7 +77,7 @@
 							<div class="d-flex text-xs fw-semibold align-items-center">
 								[[post-queue:user]]
 								{{{ if ((privileges.ban || privileges.mute) || privileges.admin:users) }}}
-								<div class="ms-auto btn-group bottom-sheet">
+								<div class="ms-auto dropdown bottom-sheet">
 									<button href="#" class="btn btn-ghost btn-sm ff-secondary border text-xs dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">[[global:actions]]</button>
 									<ul class="dropdown-menu p-1 text-sm" role="menu">
 										{{{ if privileges.view:users:info }}}