diff --git a/app/javascript/controllers/bulk_select_controller.js b/app/javascript/controllers/bulk_select_controller.js
index e72704c7..104d2aa6 100644
--- a/app/javascript/controllers/bulk_select_controller.js
+++ b/app/javascript/controllers/bulk_select_controller.js
@@ -126,7 +126,7 @@ export default class extends Controller {
   _updateSelectionBar() {
     const count = this.selectedIdsValue.length;
     this.selectionBarTextTarget.innerText = `${count} ${this._pluralizedResourceName()} selected`;
-    this.selectionBarTarget.hidden = count === 0;
+    this.selectionBarTarget.classList.toggle("hidden", count === 0);
     this.selectionBarTarget.querySelector("input[type='checkbox']").checked =
       count > 0;
   }
diff --git a/app/views/transactions/index.html.erb b/app/views/transactions/index.html.erb
index 8626da49..1055496f 100644
--- a/app/views/transactions/index.html.erb
+++ b/app/views/transactions/index.html.erb
@@ -10,7 +10,7 @@
     <%= render "transactions/searches/search" %>
 
     <% if @transaction_entries.present? %>
-      <div hidden id="entry-selection-bar" data-bulk-select-target="selectionBar">
+      <div id="entry-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
         <%= render "account/transactions/selection_bar" %>
       </div>
       <div class="grow overflow-y-auto">