diff --git a/public/scss/admin/common.scss b/public/scss/admin/common.scss
index 945c5b89e3..81e74f3289 100644
--- a/public/scss/admin/common.scss
+++ b/public/scss/admin/common.scss
@@ -13,43 +13,19 @@
 
 .tracking-tight { letter-spacing: -0.02em; }
 
-@mixin btn-ghost-base {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: ($spacer * 0.5);
-	border-radius: $border-radius-sm;
-	border-width: 1px;
-	border-color: transparent;
-	background-color: transparent;
-	padding: ($spacer * 0.25) ($spacer * 0.5);
-	text-align: left;
-	--bs-text-opacity: 1;
-	color: $btn-ghost-color;
-	font-family: $font-family-secondary;
-	cursor: pointer;
-	&:hover, &.active {
-		background-color: $btn-ghost-hover-color;
-		text-decoration: none;
-	}
-}
-
+// https://getbootstrap.com/docs/5.3/components/buttons/#variables
 .btn-ghost {
-	@include btn-ghost-base();
-	line-height: 1.5rem;
-	> i {
-		line-height: 1.5rem;
-	}
+	--bs-btn-color: #{$btn-ghost-color};
+	--bs-btn-bg: transparent;
+	--bs-btn-border-color: transparent;
+	--bs-btn-box-shadow: none;
+	--bs-btn-hover-color: #{$btn-ghost-color};
+	--bs-btn-hover-bg: #{$btn-ghost-hover-color};
+	--bs-btn-hover-border-color: #{$btn-ghost-hover-color};
+	--bs-btn-active-bg: #{$btn-ghost-hover-color};
+	--bs-btn-active-border-color: transparent;
 }
 
-.btn-ghost-sm {
-	@include btn-ghost-base();
-	font-size: 0.875rem;
-	line-height: 1.25rem;
-	> i {
-		line-height: 1.25rem;
-	}
-}
 
 @include color-mode(dark) {
 	.btn-light {
@@ -58,10 +34,11 @@
 	.text-bg-light {
 		@extend .text-bg-dark;
 	}
-	.btn-ghost, .btn-ghost-sm {
+	.btn-ghost {
 		color: $btn-ghost-color-dark;
 		&:hover, &.active {
 			background-color: $btn-ghost-hover-color-dark;
+			border-color: $btn-ghost-hover-color-dark;
 		}
 	}
 }
diff --git a/public/scss/admin/sidebar.scss b/public/scss/admin/sidebar.scss
index 0a354fdd6c..0ca0d252d0 100644
--- a/public/scss/admin/sidebar.scss
+++ b/public/scss/admin/sidebar.scss
@@ -1,12 +1,12 @@
 #sidebar-left, #offcanvas {
-	.btn-ghost, .btn-ghost-sm {
+	.btn-ghost {
 		i {
 			color: $gray-500;
 		}
 	}
 
 	.accordion-body {
-		.btn-ghost-sm {
+		.btn-ghost.btn-sm {
 			padding-left: 38px!important;
 		}
 	}
diff --git a/public/scss/btn-ghost.scss b/public/scss/btn-ghost.scss
index 80b819171a..704f07d202 100644
--- a/public/scss/btn-ghost.scss
+++ b/public/scss/btn-ghost.scss
@@ -12,40 +12,15 @@ $btn-ghost-active-color-dark: lighten($btn-ghost-hover-color-dark, 5%)!default;
 	--btn-ghost-active-color: #{$btn-ghost-active-color-dark};
 }
 
-@mixin btn-ghost-base {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: ($spacer * 0.5);
-	border-radius: $border-radius-sm;
-	border-width: 1px;
-	border-color: transparent;
-	background-color: transparent;
-	box-shadow: none;
-	padding: ($spacer * 0.25) ($spacer * 0.5);
-	text-align: left;
-	--bs-text-opacity: 1;
-	color: inherit !important;
-	cursor: pointer;
-	&:hover, &.active {
-		background-color: var(--btn-ghost-hover-color);
-		text-decoration: none;
-	}
-}
-
+// https://getbootstrap.com/docs/5.3/components/buttons/#variables
 .btn-ghost {
-	@include btn-ghost-base();
-	line-height: 1.5rem;
-	> i {
-		line-height: 1.5rem;
-	}
-}
-
-.btn-ghost-sm {
-	@include btn-ghost-base();
-	font-size: 0.875rem;
-	line-height: 1.25rem;
-	> i {
-		line-height: 1.25rem;
-	}
-}
\ No newline at end of file
+	--bs-btn-color: inherit!important;
+	--bs-btn-bg: transparent;
+	--bs-btn-border-color: transparent;
+	--bs-btn-box-shadow: none;
+	--bs-btn-hover-color: inherit;
+	--bs-btn-hover-bg: #{$btn-ghost-hover-color};
+	--bs-btn-hover-border-color: #{$btn-ghost-hover-color};
+	--bs-btn-active-bg: #{$btn-ghost-hover-color};
+	--bs-btn-active-border-color: transparent;
+  }
\ No newline at end of file
diff --git a/public/src/admin/extend/plugins.js b/public/src/admin/extend/plugins.js
index 5d33b4d9b5..6a8816d5a4 100644
--- a/public/src/admin/extend/plugins.js
+++ b/public/src/admin/extend/plugins.js
@@ -198,10 +198,10 @@ define('admin/extend/plugins', [
 						<li class="d-flex justify-content-between gap-1 pointer border-bottom pb-2" data-plugin="${plugin}">
 							${plugin}
 							<div class="d-flex gap-1">
-								<div class="btn-ghost-sm move-up">
+								<div class="btn btn-ghost btn-sm move-up">
 									<i class="fa fa-chevron-up"></i>
 								</div>
-								<div class="btn-ghost-sm move-down">
+								<div class="btn btn-ghost btn-sm move-down">
 									<i class="fa fa-chevron-down"></i>
 								</div>
 							</div>
diff --git a/public/src/admin/settings.js b/public/src/admin/settings.js
index de7cd48096..0721d8c209 100644
--- a/public/src/admin/settings.js
+++ b/public/src/admin/settings.js
@@ -21,7 +21,7 @@ define('admin/settings', [
 				if (anchor.startsWith('section')) {
 					$this.parent().attr('id', anchor);
 				}
-				tocList.append(`<a class="btn-ghost-sm text-xs justify-content-start text-decoration-none" href="#${anchor}">${header}</a>`);
+				tocList.append(`<a class="btn btn-ghost btn-sm text-xs text-start text-decoration-none" href="#${anchor}">${header}</a>`);
 			});
 			const offset = mainHader.outerHeight(true);
 			// https://stackoverflow.com/a/11814275/583363
diff --git a/src/views/admin/advanced/hooks.tpl b/src/views/admin/advanced/hooks.tpl
index 61aaa26ebc..fceffc3655 100644
--- a/src/views/admin/advanced/hooks.tpl
+++ b/src/views/admin/advanced/hooks.tpl
@@ -4,7 +4,7 @@
 		<div class="" role="tab">
 			<h6 class="mb-0 ps-2 d-flex justify-content-between align-items-center">
 				<span>{hooks.hookName}</span>
-				<button class="btn-ghost-sm" data-bs-toggle="collapse" data-bs-parent="#accordion" data-bs-target="#{hooks.index}" aria-expanded="true" aria-controls="{hooks.index}">View hooks ({hooks.count})</button>
+				<button class="btn btn-ghost btn-sm" data-bs-toggle="collapse" data-bs-parent="#accordion" data-bs-target="#{hooks.index}" aria-expanded="true" aria-controls="{hooks.index}">View hooks ({hooks.count})</button>
 			</h6>
 		</div>
 		<div id="{hooks.index}" class="accordion-collapse collapse" role="tabpanel">
diff --git a/src/views/admin/manage/admins-mods.tpl b/src/views/admin/manage/admins-mods.tpl
index 977c59275d..6375ea923e 100644
--- a/src/views/admin/manage/admins-mods.tpl
+++ b/src/views/admin/manage/admins-mods.tpl
@@ -15,7 +15,7 @@
 			<div class="badge text-bg-light m-1 p-1 border d-inline-flex gap-1 align-items-center" data-uid="{admins.members.uid}">
 				{buildAvatar(admins.members, "24px", true)}
 				<a href="{config.relative_path}/user/{admins.members.userslug}">{admins.members.username}</a>
-				<button class="btn-ghost-sm p-0 remove-user-icon">
+				<button class="btn btn-ghost btn-sm p-0 remove-user-icon">
 					<i class="fa fa-fw fa-times"></i>
 				</button>
 			</div>
@@ -35,7 +35,7 @@
 			<div class="badge text-bg-light m-1 p-1 border d-inline-flex gap-1 align-items-center" data-uid="{globalMods.members.uid}">
 				{buildAvatar(globalMods.members, "24px", true)}
 				<a href="{config.relative_path}/user/{globalMods.members.userslug}">{globalMods.members.username}</a>
-				<button class="btn-ghost-sm p-0 remove-user-icon">
+				<button class="btn btn-ghost btn-sm p-0 remove-user-icon">
 					<i class="fa fa-fw fa-times"></i>
 				</button>
 			</div>
@@ -87,7 +87,7 @@
 				<div class="badge text-bg-light m-1 p-1 border d-inline-flex gap-1 align-items-center" data-uid="{categoryMods.moderators.uid}">
 					{buildAvatar(categoryMods.moderators, "24px", true)}
 					<a href="{config.relative_path}/user/{categoryMods.moderators.userslug}">{categoryMods.moderators.username}</a>
-					<button class="btn-ghost-sm p-0 remove-user-icon">
+					<button class="btn btn-ghost btn-sm p-0 remove-user-icon">
 						<i class="fa fa-fw fa-times" role="button"></i>
 					</button>
 				</div>
diff --git a/src/views/admin/manage/categories.tpl b/src/views/admin/manage/categories.tpl
index 512105dbac..bed5850325 100644
--- a/src/views/admin/manage/categories.tpl
+++ b/src/views/admin/manage/categories.tpl
@@ -4,7 +4,7 @@
 			<h4 class="fw-bold tracking-tight mb-0">[[admin/manage/categories:manage-categories]]</h4>
 		</div>
 		<div class="d-flex gap-1">
-			<button id="toggle-collapse-all" class="btn-ghost-sm text-nowrap" data-collapsed="0">[[admin/manage/categories:collapse-all]]</button>
+			<button id="toggle-collapse-all" class="btn btn-ghost btn-sm text-nowrap" data-collapsed="0">[[admin/manage/categories:collapse-all]]</button>
 
 			<!-- IMPORT admin/partials/category/selector-dropdown-right.tpl -->
 
diff --git a/src/views/admin/manage/category.tpl b/src/views/admin/manage/category.tpl
index fb2afcedec..9f2ebbe2c3 100644
--- a/src/views/admin/manage/category.tpl
+++ b/src/views/admin/manage/category.tpl
@@ -166,27 +166,27 @@
 
 		<div class="col-12 col-md-4 px-0 px-md-3 options acp-sidebar">
 			<div class="p-2 d-flex flex-column text-bg-light border rounded-1 gap-1">
-				<a href="{config.relative_path}/admin/manage/categories" class="btn-ghost-sm justify-content-start"><i class="fa fa-fw fa-chevron-left text-primary"></i> [[admin/manage/categories:back-to-categories]]</a>
+				<a href="{config.relative_path}/admin/manage/categories" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center"><i class="fa fa-fw fa-chevron-left text-primary"></i> [[admin/manage/categories:back-to-categories]]</a>
 
 				<hr class="my-1"/>
 
-				<button class="btn-ghost-sm justify-content-start copy-settings">
+				<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center copy-settings">
 					<i class="fa fa-fw fa-files-o text-primary"></i> [[admin/manage/categories:copy-settings]]
 				</button>
 
-				<a class="btn-ghost-sm justify-content-start" href="{config.relative_path}/admin/manage/categories/{category.cid}/analytics"><i class="fa fa-fw fa-chart-simple text-primary"></i> [[admin/manage/categories:analytics]]</a>
+				<a class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" href="{config.relative_path}/admin/manage/categories/{category.cid}/analytics"><i class="fa fa-fw fa-chart-simple text-primary"></i> [[admin/manage/categories:analytics]]</a>
 
-				<a href="{config.relative_path}/admin/manage/privileges/{category.cid}" class="btn-ghost-sm justify-content-start">
+				<a href="{config.relative_path}/admin/manage/privileges/{category.cid}" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center">
 					<i class="fa fa-fw fa-lock text-primary"></i> [[admin/manage/categories:privileges]]
 				</a>
 
-				<a href="{config.relative_path}/category/{category.cid}" class="btn-ghost-sm justify-content-start">
+				<a href="{config.relative_path}/category/{category.cid}" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center">
 					<i class="fa fa-fw fa-eye text-primary"></i> [[admin/manage/categories:view-category]]
 				</a>
 
 				<hr class="my-1"/>
 
-				<button data-action="toggle" data-disabled="{category.disabled}" class="btn-ghost-sm justify-content-start">
+				<button data-action="toggle" data-disabled="{category.disabled}" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center">
 					{{{ if category.disabled }}}
 					<i class="fa fa-fw fa-check text-success"></i>
 					<span class="label">[[admin/manage/categories:enable]]</span>
@@ -196,7 +196,7 @@
 					{{{ end }}}
 				</button>
 
-				<button class="btn-ghost-sm purge justify-content-start">
+				<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center">
 					<i class="fa fa-fw fa-trash text-danger"></i> [[admin/manage/categories:purge]]
 				</button>
 
diff --git a/src/views/admin/manage/group.tpl b/src/views/admin/manage/group.tpl
index e8ce44d981..114d5e8692 100644
--- a/src/views/admin/manage/group.tpl
+++ b/src/views/admin/manage/group.tpl
@@ -6,7 +6,7 @@
 			<h4 class="fw-bold tracking-tight mb-0">[[admin/manage/groups:edit-group]]</h4>
 
 			<div component="group-selector" class="btn-group">
-				<button type="button" class="btn-ghost-sm dropdown-toggle w-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				<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>
 				<div component="group-selector-search" class="hidden position-absolute w-100">
@@ -148,13 +148,13 @@
 
 		<div class="col-12 col-md-4 px-0 px-md-3 acp-sidebar">
 			<div class="p-2 d-flex flex-column text-bg-light border rounded-1 gap-1">
-				<a href="{config.relative_path}/admin/manage/groups" class="btn-ghost-sm justify-content-start"><i class="fa fa-fw fa-chevron-left text-primary"></i> [[admin/manage/groups:back-to-groups]]</a>
+				<a href="{config.relative_path}/admin/manage/groups" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center"><i class="fa fa-fw fa-chevron-left text-primary"></i> [[admin/manage/groups:back-to-groups]]</a>
 
 				<hr class="my-1"/>
 
 				<div class="edit-privileges-selector w-100">
 					<div component="category-selector" class="btn-group w-100">
-						<button type="button" class="btn-ghost-sm justify-content-start flex-fill dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						<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>
 						<div component="category-selector-search" class="hidden position-absolute">
@@ -180,16 +180,16 @@
 					</div>
 				</div>
 
-				<a href="{config.relative_path}/api/admin/groups/{group.nameEncoded}/csv" class="btn-ghost-sm justify-content-start">
+				<a href="{config.relative_path}/api/admin/groups/{group.nameEncoded}/csv" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center">
 					<i class="fa fa-fw fa-file-csv text-primary"></i>[[admin/manage/groups:members-csv]]</a>
 
-				<a href="{config.relative_path}/groups/{group.slug}" class="btn-ghost-sm justify-content-start">
+				<a href="{config.relative_path}/groups/{group.slug}" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center">
 					<i class="fa fa-fw fa-eye text-primary"></i> [[admin/manage/groups:view-group]]
 				</a>
 
 				<hr class="my-1"/>
 
-				<button data-action="delete" class="btn-ghost-sm justify-content-start">
+				<button data-action="delete" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center">
 					<i class="fa fa-fw fa-trash text-danger"></i> [[admin/manage/groups:delete]]
 				</button>
 			</div>
diff --git a/src/views/admin/partials/category/selector-dropdown-content.tpl b/src/views/admin/partials/category/selector-dropdown-content.tpl
index 263603af90..7515b9e0e1 100644
--- a/src/views/admin/partials/category/selector-dropdown-content.tpl
+++ b/src/views/admin/partials/category/selector-dropdown-content.tpl
@@ -1,4 +1,4 @@
-<button type="button" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<button type="button" class="btn btn-ghost btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 	<span component="category-selector-selected">
 		<span class="category-item d-inline-flex align-items-center gap-1">
 		{{{ if (selectedCategory && !showCategorySelectLabel) }}}
diff --git a/src/views/admin/partials/navigation.tpl b/src/views/admin/partials/navigation.tpl
index 8c89f6a702..95b8e6b939 100644
--- a/src/views/admin/partials/navigation.tpl
+++ b/src/views/admin/partials/navigation.tpl
@@ -4,18 +4,18 @@
 
 	<!-- dashboard menu -->
 	<div class="d-flex flex-column">
-		<button class="btn-ghost justify-content-start" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDashboard" aria-expanded="true" aria-controls="collapseDashboard">
+		<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDashboard" aria-expanded="true" aria-controls="collapseDashboard">
 			<i class="fa fa-fw fa-gauge"></i>
-			<div class="flex-1 font-serif text-sm fw-semibold">[[admin/menu:section-dashboard]]</div>
+			<div class="flex-1 font-serif text-sm fw-semibold text-start">[[admin/menu:section-dashboard]]</div>
 		</button>
 
 		<div id="collapseDashboard" class="accordion-collapse collapse" data-bs-parent="#accordionACP">
-			<div class="accordion-body p-0">
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/dashboard">[[admin/menu:dashboard/overview]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/dashboard/logins">[[admin/menu:dashboard/logins]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/dashboard/users">[[admin/menu:dashboard/users]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/dashboard/topics">[[admin/menu:dashboard/topics]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/dashboard/searches">[[admin/menu:dashboard/searches]]</a>
+			<div class="accordion-body p-0 d-grid">
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/dashboard">[[admin/menu:dashboard/overview]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/dashboard/logins">[[admin/menu:dashboard/logins]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/dashboard/users">[[admin/menu:dashboard/users]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/dashboard/topics">[[admin/menu:dashboard/topics]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/dashboard/searches">[[admin/menu:dashboard/searches]]</a>
 			</div>
 		</div>
 	</div>
@@ -23,40 +23,40 @@
 	<!-- manage menu -->
 	{{{ if showManageMenu }}}
 	<div class="d-flex flex-column">
-		<button class="btn-ghost justify-content-start" type="button" data-bs-toggle="collapse" data-bs-target="#collapseManage" aria-expanded="true" aria-controls="collapseManage">
+		<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseManage" aria-expanded="true" aria-controls="collapseManage">
 			<i class="fa fa-fw fa-list"></i>
-			<div class="flex-1 font-serif text-sm fw-semibold">[[admin/menu:section-manage]]</div>
+			<div class="flex-1 font-serif text-sm fw-semibold text-start">[[admin/menu:section-manage]]</div>
 		</button>
 
 		<div id="collapseManage" class="accordion-collapse collapse" data-bs-parent="#accordionACP">
-			<div class="accordion-body p-0">
+			<div class="accordion-body p-0 d-grid">
 				{{{ if user.privileges.admin:categories }}}
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" id="manage-categories" href="{relative_path}/admin/manage/categories">[[admin/menu:manage/categories]]</a>
+				<a class="btn btn-ghost btn-sm text-start" id="manage-categories" href="{relative_path}/admin/manage/categories">[[admin/menu:manage/categories]]</a>
 				{{{ end }}}
 				{{{ if user.privileges.admin:privileges }}}
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/manage/privileges">[[admin/menu:manage/privileges]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/manage/privileges">[[admin/menu:manage/privileges]]</a>
 				{{{ end }}}
 				{{{ if user.privileges.admin:users }}}
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" id="manage-users" href="{relative_path}/admin/manage/users">[[admin/menu:manage/users]]</a>
+				<a class="btn btn-ghost btn-sm text-start" id="manage-users" href="{relative_path}/admin/manage/users">[[admin/menu:manage/users]]</a>
 				{{{ end }}}
 				{{{ if user.privileges.admin:groups }}}
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/manage/groups">[[admin/menu:manage/groups]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/manage/groups">[[admin/menu:manage/groups]]</a>
 				{{{ end }}}
 				{{{ if user.privileges.admin:admins-mods }}}
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/manage/admins-mods">[[admin/menu:manage/admins-mods]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/manage/admins-mods">[[admin/menu:manage/admins-mods]]</a>
 				{{{ end }}}
 				{{{ if user.privileges.admin:tags }}}
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/manage/tags">[[admin/menu:manage/tags]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/manage/tags">[[admin/menu:manage/tags]]</a>
 				{{{ end }}}
 				{{{ if user.privileges.superadmin }}}
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/manage/registration">[[admin/menu:manage/registration]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/manage/uploads">[[admin/menu:manage/uploads]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/manage/digest">[[admin/menu:manage/digest]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/manage/registration">[[admin/menu:manage/registration]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/manage/uploads">[[admin/menu:manage/uploads]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/manage/digest">[[admin/menu:manage/digest]]</a>
 				<hr/>
 				<h6 class="text-xs ps-4">[[pages:moderator-tools]]</h6>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" target="_top" href="{relative_path}/flags">[[admin/menu:manage/flagged-content]] <i class="fa fa-external-link"></i></a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" target="_top" href="{relative_path}/post-queue">[[admin/menu:manage/post-queue]] <i class="fa fa-external-link"></i></a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" target="_top" href="{relative_path}/ip-blacklist">[[admin/menu:manage/ip-blacklist]] <i class="fa fa-external-link"></i></a>
+				<a class="btn btn-ghost btn-sm text-start" target="_top" href="{relative_path}/flags">[[admin/menu:manage/flagged-content]] <i class="fa fa-external-link"></i></a>
+				<a class="btn btn-ghost btn-sm text-start" target="_top" href="{relative_path}/post-queue">[[admin/menu:manage/post-queue]] <i class="fa fa-external-link"></i></a>
+				<a class="btn btn-ghost btn-sm text-start" target="_top" href="{relative_path}/ip-blacklist">[[admin/menu:manage/ip-blacklist]] <i class="fa fa-external-link"></i></a>
 				{{{ end }}}
 			</div>
 		</div>
@@ -66,29 +66,29 @@
 	<!-- settings menu -->
 	{{{ if user.privileges.admin:settings }}}
 	<div class="d-flex flex-column">
-		<button class="btn-ghost justify-content-start" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSettings" aria-expanded="true" aria-controls="collapseSettings">
+		<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSettings" aria-expanded="true" aria-controls="collapseSettings">
 			<i class="fa fa-fw fa-sliders"></i>
-			<div class="flex-1 font-serif text-sm fw-semibold">[[admin/menu:section-settings]]</div>
+			<div class="flex-1 font-serif text-sm fw-semibold text-start">[[admin/menu:section-settings]]</div>
 		</button>
 
 		<div id="collapseSettings" class="accordion-collapse collapse" data-bs-parent="#accordionACP">
-			<div class="accordion-body p-0">
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" id="settings-general" href="{relative_path}/admin/settings/general">[[admin/menu:section-general]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/navigation">[[admin/menu:settings/navigation]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/user">[[admin/menu:settings/user]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/reputation">[[admin/menu:settings/reputation]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/group">[[admin/menu:settings/group]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/tags">[[admin/menu:manage/tags]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/post">[[admin/menu:settings/post]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/uploads">[[admin/menu:settings/uploads]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/email">[[admin/menu:settings/email]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/chat">[[admin/menu:settings/chat]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/pagination">[[admin/menu:settings/pagination]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/notifications">[[admin/menu:settings/notifications]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/api">[[admin/menu:settings/api]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/cookies">[[admin/menu:settings/cookies]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/web-crawler">[[admin/menu:settings/web-crawler]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/settings/advanced">[[admin/menu:settings/advanced]]</a>
+			<div class="accordion-body p-0 d-grid">
+				<a class="btn btn-ghost btn-sm text-start" id="settings-general" href="{relative_path}/admin/settings/general">[[admin/menu:section-general]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/navigation">[[admin/menu:settings/navigation]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/user">[[admin/menu:settings/user]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/reputation">[[admin/menu:settings/reputation]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/group">[[admin/menu:settings/group]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/tags">[[admin/menu:manage/tags]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/post">[[admin/menu:settings/post]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/uploads">[[admin/menu:settings/uploads]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/email">[[admin/menu:settings/email]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/chat">[[admin/menu:settings/chat]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/pagination">[[admin/menu:settings/pagination]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/notifications">[[admin/menu:settings/notifications]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/api">[[admin/menu:settings/api]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/cookies">[[admin/menu:settings/cookies]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/web-crawler">[[admin/menu:settings/web-crawler]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/settings/advanced">[[admin/menu:settings/advanced]]</a>
 			</div>
 		</div>
 	</div>
@@ -96,16 +96,16 @@
 
 	<!-- appearance menu -->
 	<div class="d-flex flex-column">
-		<button class="btn-ghost justify-content-start" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAppearance" aria-expanded="true" aria-controls="collapseAppearance">
+		<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAppearance" aria-expanded="true" aria-controls="collapseAppearance">
 			<i class="fa fa-fw fa-paintbrush"></i>
-			<div class="flex-1 font-serif text-sm fw-semibold">[[admin/menu:section-appearance]]</div>
+			<div class="flex-1 font-serif text-sm fw-semibold text-start">[[admin/menu:section-appearance]]</div>
 		</button>
 
 		<div id="collapseAppearance" class="accordion-collapse collapse" data-bs-parent="#accordionACP">
-			<div class="accordion-body p-0">
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" id="appearance-themes" href="{relative_path}/admin/appearance/themes">[[admin/menu:appearance/themes]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" id="appearance-skins" href="{relative_path}/admin/appearance/skins">[[admin/menu:appearance/skins]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" id="appearance-customise" href="{relative_path}/admin/appearance/customise">[[admin/menu:appearance/customise]]</a>
+			<div class="accordion-body p-0 d-grid">
+				<a class="btn btn-ghost btn-sm text-start" id="appearance-themes" href="{relative_path}/admin/appearance/themes">[[admin/menu:appearance/themes]]</a>
+				<a class="btn btn-ghost btn-sm text-start" id="appearance-skins" href="{relative_path}/admin/appearance/skins">[[admin/menu:appearance/skins]]</a>
+				<a class="btn btn-ghost btn-sm text-start" id="appearance-customise" href="{relative_path}/admin/appearance/customise">[[admin/menu:appearance/customise]]</a>
 			</div>
 		</div>
 	</div>
@@ -113,16 +113,16 @@
 
 	<!-- extend menu -->
 	<div class="d-flex flex-column">
-		<button class="btn-ghost justify-content-start" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExtend" aria-expanded="true" aria-controls="collapseExtend">
+		<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExtend" aria-expanded="true" aria-controls="collapseExtend">
 			<i class="fa fa-fw fa-wrench"></i>
-			<div class="flex-1 font-serif text-sm fw-semibold">[[admin/menu:section-extend]]</div>
+			<div class="flex-1 font-serif text-sm fw-semibold text-start">[[admin/menu:section-extend]]</div>
 		</button>
 
 		<div id="collapseExtend" class="accordion-collapse collapse" data-bs-parent="#accordionACP">
-			<div class="accordion-body p-0">
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/extend/plugins">[[admin/menu:extend/plugins]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/extend/widgets">[[admin/menu:extend/widgets]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/extend/rewards">[[admin/menu:extend/rewards]]</a>
+			<div class="accordion-body p-0 d-grid">
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/extend/plugins">[[admin/menu:extend/plugins]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/extend/widgets">[[admin/menu:extend/widgets]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/extend/rewards">[[admin/menu:extend/rewards]]</a>
 			</div>
 		</div>
 	</div>
@@ -130,26 +130,26 @@
 	<!-- plugins menu -->
 	{{{ if plugins.length }}}
 	<div class="d-flex flex-column">
-		<button class="btn-ghost justify-content-start" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlugins" aria-expanded="true" aria-controls="collapsePlugins">
+		<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePlugins" aria-expanded="true" aria-controls="collapsePlugins">
 			<i class="fa fa-fw fa-plug"></i>
-			<div class="flex-1 font-serif text-sm fw-semibold">[[admin/menu:section-plugins]]</div>
+			<div class="flex-1 font-serif text-sm fw-semibold text-start">[[admin/menu:section-plugins]]</div>
 		</button>
 
 		<div id="collapsePlugins" class="accordion-collapse collapse" data-bs-parent="#accordionACP">
-			<div class="accordion-body p-0">
+			<div class="accordion-body p-0 d-grid">
 				{{{ each plugins }}}
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin{./route}">{./name}</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin{./route}">{./name}</a>
 				{{{ end }}}
 
 				{{{ if authentication.length }}}
 				<hr/>
 				<div class="text-sm ms-4">[[admin/menu:section-social-auth]]</div>
 				{{{ each authentication }}}
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin{./route}">{./name}</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin{./route}">{./name}</a>
 				{{{ end }}}
 				{{{ end }}}
 				<hr/>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/extend/plugins#download">[[admin/menu:extend/plugins.install]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/extend/plugins#download">[[admin/menu:extend/plugins.install]]</a>
 			</div>
 		</div>
 	</div>
@@ -159,21 +159,21 @@
 	<!-- advanced menu -->
 	{{{ if user.privileges.superadmin }}}
 	<div class="d-flex flex-column">
-		<button class="btn-ghost justify-content-start" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAdvanced" aria-expanded="true" aria-controls="collapseAdvanced">
+		<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAdvanced" aria-expanded="true" aria-controls="collapseAdvanced">
 			<i class="fa fa-fw fa-superpowers"></i>
-			<div class="flex-1 font-serif text-sm fw-semibold">[[admin/menu:section-advanced]]</div>
+			<div class="flex-1 font-serif text-sm fw-semibold text-start">[[admin/menu:section-advanced]]</div>
 		</button>
 
 		<div id="collapseAdvanced" class="accordion-collapse collapse" data-bs-parent="#accordionACP">
-			<div class="accordion-body p-0">
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/advanced/database">[[admin/menu:advanced/database]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/advanced/events">[[admin/menu:advanced/events]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/advanced/hooks">[[admin/menu:advanced/hooks]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/advanced/cache">[[admin/menu:advanced/cache]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/advanced/errors">[[admin/menu:advanced/errors]]</a>
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/advanced/logs">[[admin/menu:advanced/logs]]</a>
+			<div class="accordion-body p-0 d-grid">
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/advanced/database">[[admin/menu:advanced/database]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/advanced/events">[[admin/menu:advanced/events]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/advanced/hooks">[[admin/menu:advanced/hooks]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/advanced/cache">[[admin/menu:advanced/cache]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/advanced/errors">[[admin/menu:advanced/errors]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/advanced/logs">[[admin/menu:advanced/logs]]</a>
 				{{{ if env }}}
-				<a class="btn-ghost-sm justify-content-start text-decoration-none" href="{relative_path}/admin/development/logger">[[admin/menu:development/logger]]</a>
+				<a class="btn btn-ghost btn-sm text-start" href="{relative_path}/admin/development/logger">[[admin/menu:development/logger]]</a>
 				{{{ end }}}
 			</div>
 		</div>
diff --git a/src/views/admin/partials/offcanvas.tpl b/src/views/admin/partials/offcanvas.tpl
index f4651a74e6..85de4c2b87 100644
--- a/src/views/admin/partials/offcanvas.tpl
+++ b/src/views/admin/partials/offcanvas.tpl
@@ -2,7 +2,7 @@
 	<div class="offcanvas-body flex-0 pb-0 overflow-visible d-flex flex-column gap-1 ff-secondary">
 		<!-- IMPORT admin/partials/quick_actions/alerts.tpl -->
 
-		<a href="{config.relative_path}/" class="btn-ghost fw-semibold text-decoration-none justify-content-start"><i class="fa fa-fw fa-home"></i> [[admin/menu:view-forum]]</a>
+		<a href="{config.relative_path}/" class="btn btn-ghost btn-sm d-flex gap-2 fw-semibold text-decoration-none align-items-center justify-content-start"><i class="fa fa-fw fa-home"></i> [[admin/menu:view-forum]]</a>
 
 		<!-- IMPORT admin/partials/search.tpl -->
 	</div>
diff --git a/src/views/admin/partials/quick_actions/buttons.tpl b/src/views/admin/partials/quick_actions/buttons.tpl
index 1fb549b227..6965ea28b0 100644
--- a/src/views/admin/partials/quick_actions/buttons.tpl
+++ b/src/views/admin/partials/quick_actions/buttons.tpl
@@ -1,7 +1,7 @@
 {{{ if user.privileges.superadmin }}}
-<button component="rebuild-and-restart" class="btn-ghost fw-semibold text-decoration-none justify-content-start" ><i class="fa fa-fw fa-refresh"></i> [[admin/menu:rebuild-and-restart]]</button>
+<button component="rebuild-and-restart" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center fw-semibold text-decoration-none justify-content-start" ><i class="fa fa-fw fa-refresh"></i> [[admin/menu:rebuild-and-restart]]</button>
 
-<button component="restart" class="btn-ghost fw-semibold text-decoration-none justify-content-start" ><i class="fa fa-fw fa-repeat"></i> [[admin/menu:restart]]</button>
+<button component="restart" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center fw-semibold text-decoration-none justify-content-start" ><i class="fa fa-fw fa-repeat"></i> [[admin/menu:restart]]</button>
 {{{ end }}}
 
-<button component="logout" class="btn-ghost fw-semibold text-decoration-none justify-content-start" ><i class="fa fa-fw fa-sign-out"></i> [[admin/menu:logout]]</button>
\ No newline at end of file
+<button component="logout" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center fw-semibold text-decoration-none justify-content-start" ><i class="fa fa-fw fa-sign-out"></i> [[admin/menu:logout]]</button>
\ No newline at end of file
diff --git a/src/views/admin/partials/sidebar-left.tpl b/src/views/admin/partials/sidebar-left.tpl
index d56029d806..a313e4de4f 100644
--- a/src/views/admin/partials/sidebar-left.tpl
+++ b/src/views/admin/partials/sidebar-left.tpl
@@ -3,7 +3,7 @@
 
 		<!-- IMPORT admin/partials/quick_actions/alerts.tpl -->
 
-		<a href="{config.relative_path}/" class="btn-ghost fw-semibold text-decoration-none justify-content-start"><i class="fa fa-fw fa-home"></i> [[admin/menu:view-forum]]</a>
+		<a href="{config.relative_path}/" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center fw-semibold text-decoration-none"><i class="fa fa-fw fa-home"></i> [[admin/menu:view-forum]]</a>
 
 		<!-- IMPORT admin/partials/search.tpl -->
 	</div>
diff --git a/src/views/chat.tpl b/src/views/chat.tpl
index c4b673088c..1591045f68 100644
--- a/src/views/chat.tpl
+++ b/src/views/chat.tpl
@@ -4,7 +4,7 @@
 			<div class="modal-header d-flex gap-4 justify-content-between">
 				<div class="fs-6 flex-grow-1 fw-semibold tracking-tight text-truncate text-nowrap" component="chat/room/name" data-icon="{icon}">{{{ if ./roomName }}}<i class="fa {icon} text-muted"></i> {roomName}{{{ else }}}{./chatWithMessage}{{{ end}}}</div>
 				<div class="d-flex gap-1 align-items-center">
-					<button type="button" class="btn-ghost-sm d-none d-md-flex" data-action="maximize" title="[[modules:chat.maximize]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
+					<button type="button" class="btn btn-ghost btn-sm d-none d-md-flex align-self-stretch align-items-center" data-action="maximize" title="[[modules:chat.maximize]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
 						<i class="fa fa-fw fa-expand text-muted"></i>
 					</button>
 
diff --git a/src/views/chats.tpl b/src/views/chats.tpl
index 3ffc290ae4..1d42649981 100644
--- a/src/views/chats.tpl
+++ b/src/views/chats.tpl
@@ -12,14 +12,14 @@
 
 				<div class="d-flex flex-column gap-1">
 					<div class="d-flex gap-1 align-items-center justify-content-between justify-content-lg-start">
-						<button class="btn-ghost-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#public-rooms"
+						<button class="btn btn-ghost btn-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#public-rooms"
 						onclick="$(this).find('i').toggleClass('fa-rotate-180');"><i class="fa fa-fw fa-chevron-up" style="transition: 0.25s ease;"></i></button>
 						<label class="text-sm text-muted lh-1">[[modules:chat.public-rooms, {publicRooms.length}]]</label>
 					</div>
 					<div id="public-rooms" component="chat/public" class="collapse show">
 						<div class="d-flex gap-1 flex-column">
 							{{{ each publicRooms }}}
-							<div component="chat/public/room" class="btn-ghost-sm ff-sans justify-content-between hover-parent {{{ if ./unread}}}unread{{{ end }}}" data-roomid="{./roomId}">
+							<div component="chat/public/room" class="btn btn-ghost btn-sm ff-sans d-flex justify-content-between hover-parent {{{ if ./unread}}}unread{{{ end }}}" data-roomid="{./roomId}">
 								<div class="d-flex gap-1 align-items-center"><i class="fa {./icon} text-muted"></i> {./roomName} <div component="chat/public/room/unread/count" data-count="{./unreadCount}" class="badge border bg-light text-primary {{{ if !./unreadCount }}}hidden{{{ end }}}">{./unreadCountText}</div></div>
 								<div>
 									<div component="chat/public/room/sort/handle" class="text-muted {{{ if isAdmin }}}hover-d-block{{{ else }}}d-none{{{ end }}}" style="cursor:grab;"><i class="fa fa-bars"></i></div>
@@ -36,7 +36,7 @@
 				<div class="d-flex flex-column gap-1 overflow-auto">
 					{{{ if rooms.length }}}
 					<div class="d-flex gap-1 align-items-center justify-content-between justify-content-lg-start">
-						<button class="btn-ghost-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#private-rooms"
+						<button class="btn btn-ghost btn-sm p-1 order-1 order-lg-0" data-bs-toggle="collapse" data-bs-target="#private-rooms"
 						onclick="$(this).find('i').toggleClass('fa-rotate-180')"><i class="fa fa-fw fa-chevron-up" style="transition: 0.25s ease;"></i></button>
 						<label class="text-sm text-muted lh-1">[[modules:chat.private-rooms, {privateRoomCount}]]</label>
 					</div>
diff --git a/src/views/partials/chats/composer.tpl b/src/views/partials/chats/composer.tpl
index d80c9337d5..dc88f12616 100644
--- a/src/views/partials/chats/composer.tpl
+++ b/src/views/partials/chats/composer.tpl
@@ -1,17 +1,17 @@
 <div component="chat/composer" class="d-flex flex-column border-top pt-2 align-items-start">
 	<div component="chat/composer/replying-to" data-tomid="" class="text-sm px-2 mb-1 d-flex gap-2 align-items-center hidden">
-		<div component="chat/composer/replying-to-text"></div> <button component="chat/composer/replying-to-cancel" class="btn-ghost-sm px-2 py-1"><i class="fa fa-times"></i></button>
+		<div component="chat/composer/replying-to-text"></div> <button component="chat/composer/replying-to-cancel" class="btn btn-ghost btn-sm px-2 py-1"><i class="fa fa-times"></i></button>
 	</div>
 	<div class="w-100 flex-grow-1 flex-nowrap position-relative d-flex rounded-2 border border-secondary p-1 align-items-end">
-		<button component="chat/upload/button" class="btn-ghost-sm px-2" type="button" title="[[global:upload]]" data-bs-toggle="tooltip"><i class="fa fa-fw fa-upload"></i></button>
+		<button component="chat/upload/button" class="btn btn-ghost btn-sm d-flex p-2" type="button" title="[[global:upload]]" data-bs-toggle="tooltip"><i class="fa fa-fw fa-upload"></i></button>
 		<div class="flex-grow-1 align-self-center">
 			<textarea component="chat/input" placeholder="{{{ if roomName }}}[[modules:chat.placeholder.message-room, {roomName}]]{{{ else }}}[[modules:chat.placeholder.mobile]]{{{ end }}}" class="bg-transparent text-body form-control chat-input mousetrap rounded-0 border-0 shadow-none px-1 py-0" style="min-height: 1.5rem;height:0;max-height:30vh;resize:none;"></textarea>
 		</div>
 		<div class="d-flex gap-1">
 			{{{ each composerActions }}}
-			<button data-action="{./action}" class="btn-ghost-sm px-2 {./class}" type="button" title="{./title}" data-bs-toggle="tooltip"><i class="fa {./icon}"></i></button>
+			<button data-action="{./action}" class="btn btn-ghost btn-sm d-flex p-2 {./class}" type="button" title="{./title}" data-bs-toggle="tooltip"><i class="fa {./icon}"></i></button>
 			{{{ end }}}
-			<button class="btn-ghost-sm px-2" type="button" data-action="send" title="[[modules:chat.send]]" data-bs-toggle="tooltip"><i class="fa fa-fw fa-paper-plane text-primary"></i></button>
+			<button class="btn btn-ghost btn-sm d-flex p-2" type="button" data-action="send" title="[[modules:chat.send]]" data-bs-toggle="tooltip"><i class="fa fa-fw fa-paper-plane text-primary"></i></button>
 		</div>
 	</div>
 	<div class="d-flex justify-content-between align-items-center text-xs w-100 px-2 mt-1">
diff --git a/src/views/partials/chats/options.tpl b/src/views/partials/chats/options.tpl
index 2ffbdbec4e..0c651d503c 100644
--- a/src/views/partials/chats/options.tpl
+++ b/src/views/partials/chats/options.tpl
@@ -1,6 +1,6 @@
 <div class="d-flex gap-1 align-items-stretch">
 	<!-- search -->
-	<button class="btn-ghost-sm" component="chat/room/search/toggle" data-manual-tooltip="1" title="[[global:header.search]]">
+	<button class="btn btn-ghost btn-sm" component="chat/room/search/toggle" data-manual-tooltip="1" title="[[global:header.search]]">
 		<i class="fa fa-search text-muted"></i>
 	</button>
 	<div component="chat/room/search/container" class="position-relative hidden align-self-center">
@@ -13,7 +13,7 @@
 
 	<!-- notification dropdown -->
 	<div class="dropdown d-flex" data-manual-tooltip="1" title="[[modules:chat.notification-settings]]" component="chat/notification/setting">
-		<button class="btn-ghost-sm position-relative" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<button class="btn btn-ghost btn-sm position-relative" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 			<i class="fa fa-bell text-muted"></i>
 			<span class="position-absolute top-0 end-0 text-xs text-muted opacity-50" style="font-size: 10px!important; padding: 1px; line-height: 10px;">
 				<i component="chat/notification/setting/icon" class="fa {notificationOptionsIcon}"></i>
@@ -43,13 +43,13 @@
 	</div>
 
 	<!-- pinned messages -->
-	<button component="chat/pinned/messages/btn" class="btn-ghost-sm d-none d-lg-flex flex-nowrap" title="[[modules:chat.pinned-messages]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
+	<button component="chat/pinned/messages/btn" class="btn btn-ghost btn-sm d-none d-lg-block flex-nowrap" title="[[modules:chat.pinned-messages]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
 		<i class="fa fa-thumb-tack text-muted"></i>
 	</button>
 
 	<!-- manage/options dropdown -->
 	<div class="dropdown d-flex" data-manual-tooltip="1" title="[[modules:chat.options]]">
-		<button component="chat/controlsToggle" class="btn-ghost-sm" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<button component="chat/controlsToggle" class="btn btn-ghost btn-sm" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 			<i class="fa fa-gear text-muted"></i>
 		</button>
 		<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" component="chat/controls" role="menu">
@@ -82,7 +82,7 @@
 
 	<!-- users toggle -->
 	{{{ if users.length }}}
-	<div component="chat/user/list/btn" class="btn-ghost-sm d-none d-lg-flex flex-nowrap gap-3" title="[[modules:chat.view-users-list]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
+	<div component="chat/user/list/btn" class="btn btn-ghost btn-sm d-none d-lg-flex flex-nowrap gap-3" title="[[modules:chat.view-users-list]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
 		<div class="d-flex text-nowrap">
 			{{{ if ./users.0 }}}
 			<span style="width: 18px; z-index: 3;" class="text-decoration-none" href="{config.relative_path}/user/{./users.0.userslug}">{buildAvatar(./users.0, "24px", true)}</span>
diff --git a/src/views/partials/chats/parent.tpl b/src/views/partials/chats/parent.tpl
index 5f76398846..33951788d4 100644
--- a/src/views/partials/chats/parent.tpl
+++ b/src/views/partials/chats/parent.tpl
@@ -1,5 +1,5 @@
 <div class="d-flex ms-4 mb-2 align-items-center">
-	<div component="chat/message/parent" data-parent-mid="{messages.parent.mid}" data-uid="{messages.parent.fromuid}" class="btn-ghost-sm ff-secondary align-items-start flex-row w-100">
+	<div component="chat/message/parent" data-parent-mid="{messages.parent.mid}" data-uid="{messages.parent.fromuid}" class="btn btn-ghost btn-sm d-flex gap-2 ff-secondary text-start flex-row w-100">
 		<div class="d-flex gap-2 text-sm text-nowrap">
 			<div><i class="fa fa-sm fa-reply opacity-50"></i></div>
 			<div class="d-flex flex-nowrap gap-1 align-items-center">
diff --git a/src/views/partials/chats/recent_room.tpl b/src/views/partials/chats/recent_room.tpl
index ae48ac531f..b84e829ec9 100644
--- a/src/views/partials/chats/recent_room.tpl
+++ b/src/views/partials/chats/recent_room.tpl
@@ -3,7 +3,7 @@
 {{{ end }}}
 <div component="chat/recent/room" data-roomid="{./roomId}" data-full="1" class="rounded-1 {{{ if ./unread }}}unread{{{ end }}}">
 	<div class="d-flex gap-1 justify-content-between">
-		<div class="chat-room-btn position-relative d-flex flex-grow-1 gap-2 justify-content-start align-items-start btn-ghost-sm ff-sans">
+		<div class="chat-room-btn position-relative d-flex flex-grow-1 gap-2 justify-content-start align-items-start btn btn-ghost btn-sm ff-sans text-start">
 			<div class="main-avatar">
 				{{{ if ./users.length }}}
 				{{{ if ./groupChat}}}
@@ -35,7 +35,7 @@
 			</div>
 		</div>
 		<div>
-			<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+			<button class="mark-read btn btn-ghost btn-sm d-flex align-items-center justify-content-center flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
 				<i class="unread fa fa-2xs fa-circle text-primary {{{ if !./unread }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-read]]"></i>
 				<i class="read fa fa-2xs fa-circle-o text-secondary {{{ if ./unread }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-unread]]"></i>
 			</button>
diff --git a/src/views/partials/chats/user-list.tpl b/src/views/partials/chats/user-list.tpl
index 482ebd98c9..306a625290 100644
--- a/src/views/partials/chats/user-list.tpl
+++ b/src/views/partials/chats/user-list.tpl
@@ -1,6 +1,6 @@
 <div component="chat/user/list" class="border-start hidden d-flex flex-column gap-1 p-1 overflow-auto ghost-scrollbar" style="min-width:240px; width: 240px;">
 	{{{ each users }}}
-	<a data-index="{./index}" data-uid="{./uid}" class="btn-ghost-sm ff-secondary d-flex justify-content-start align-items-center gap-2 {{{ if ./online }}}online{{{ end}}}" href="{config.relative_path}/uid/{./uid}">
+	<a data-index="{./index}" data-uid="{./uid}" class="btn btn-ghost btn-sm d-flex ff-secondary d-flex justify-content-start align-items-center gap-2 {{{ if ./online }}}online{{{ end}}}" href="{config.relative_path}/uid/{./uid}">
 		<div>{buildAvatar(users, "24px", true)}</div>
 		<div class="d-flex gap-1 flex-grow-1 text-nowrap text-truncate">
 			<span component="chat/user/list/username" class="text-truncate">{./username}</span>