diff --git a/src/views/admin/advanced/hooks.tpl b/src/views/admin/advanced/hooks.tpl
index 357d3039f5..44a417917b 100644
--- a/src/views/admin/advanced/hooks.tpl
+++ b/src/views/admin/advanced/hooks.tpl
@@ -1,28 +1,28 @@
-<div class="hooks-list panel-group px-lg-4" id="accordion" role="tablist" aria-multiselectable="true">
+<div class="hooks-list px-lg-4" id="accordion" role="tablist" aria-multiselectable="true">
 	{{{ each hooks }}}
-	<div class="card">
-		<div class="card-header" role="tab">
-			<h6 class="mb-0">
-				<a style="text-transform: none;" class="text-reset text-decoration-none" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" data-bs-target="#{hooks.index}" aria-expanded="true" aria-controls="{hooks.index}">{hooks.hookName}</a>
-				<span class="float-end">{hooks.count} hooks</span>
+	<div class="mb-3 border rounded p-2">
+		<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>
 			</h6>
 		</div>
 		<div id="{hooks.index}" class="accordion-collapse collapse" role="tabpanel">
-		<div class="card-body">
-			{{{ each hooks.methods }}}
-			<div class="mb-3">
-				<strong>{hooks.methods.id}</strong>
-				Priority: {hooks.methods.priority}
+			<div class="d-flex flex-column mt-3 ms-3">
+				{{{ each hooks.methods }}}
+				<div class="mb-3">
+					<strong>{hooks.methods.id}</strong>
+					<span class="text-secondary text-sm">Priority: {hooks.methods.priority}</span>
 
-				<button class="btn btn-primary btn-sm float-end" type="button" data-bs-toggle="collapse" data-bs-target="#{hooks.methods.index}" aria-expanded="false" aria-controls="{hooks.methods.index}">
-					Show Code <i class="fa fa-eye"></i>
-				</button>
+					<button class="btn btn-light btn-sm float-end" type="button" data-bs-toggle="collapse" data-bs-target="#{hooks.methods.index}" aria-expanded="false" aria-controls="{hooks.methods.index}">
+						<i class="fa fa-eye"></i> Show Code
+					</button>
+				</div>
+				<div class="collapse" id="{hooks.methods.index}">
+					<pre class="p-3 text-bg-light border rounded">{hooks.methods.method}</pre>
+				</div>
+				{{{ end }}}
 			</div>
-			<div class="collapse" id="{hooks.methods.index}">
-				<pre class="p-3 text-bg-light border border-secondary rounded">{hooks.methods.method}</pre>
-			</div>
-			{{{ end }}}
-		</div>
 		</div>
 	</div>
 	{{{ end }}}