diff --git a/app/templates/library.html b/app/templates/library.html
index b31f19e..de74373 100644
--- a/app/templates/library.html
+++ b/app/templates/library.html
@@ -207,12 +207,12 @@
   </div>
 
   <!-- ── Loading ── -->
-  <div x-show="loading" class="lib-loading">
+  <div x-show="loading" class="lib-loading" id="lib-loading">
     <p>Loading…</p>
   </div>
 
   <!-- ── Table ── -->
-  <div class="lib-table" x-show="!loading && flatItems.length > 0" id="lib-table">
+  <div class="lib-table" id="lib-table">
     <div class="lib-table-header">
       <div class="th lib-col-name sortable" @click="sortBy='name';doSort()">Page name</div>
       <div class="th lib-col-author sortable" @click="sortBy='author';doSort()">Created by</div>
@@ -231,7 +231,7 @@
   </div>
 
   <!-- ── Empty state ── -->
-  <div x-show="!loading && flatItems.length === 0" class="lib-empty">
+  <div x-show="!loading && flatItems.length === 0" class="lib-empty" id="lib-empty">
     <div class="empty-icon" x-text="emptyIcon"></div>
     <h3 x-text="emptyTitle"></h3>
     <p x-text="emptyText"></p>
@@ -319,7 +319,20 @@ function libraryPage() {
     _renderTable() {
       var self = this;
       var body = document.getElementById('lib-table-body');
+      var table = document.getElementById('lib-table');
+      var emptyDiv = document.getElementById('lib-empty');
+      var loadingDiv = document.getElementById('lib-loading');
       if (!body) return;
+      
+      // Show/hide table vs empty state
+      if (this.flatItems.length === 0) {
+        if (table) table.style.display = 'none';
+        if (emptyDiv) emptyDiv.style.display = '';
+        return;
+      }
+      if (table) table.style.display = '';
+      if (emptyDiv) emptyDiv.style.display = 'none';
+      if (loadingDiv) loadingDiv.style.display = 'none';
       var html = '';
       for (var i = 0; i < this.flatItems.length; i++) {
         var item = this.flatItems[i];