diff --git a/frontend/app.js b/frontend/app.js
index 0f8cfe0..1f19e97 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -136,6 +136,11 @@ function render(){
     });
   } catch {}
 
+  const summaryEl = document.getElementById('summary');
+  if (summaryEl) {
+    summaryEl.classList.toggle('hidden', items.length === 0);
+  }
+
   const c = {queued:0,uploading:0,done:0,dup:0,err:0};
   for(const it of items){
     if(['queued','checking'].includes(it.status)) c.queued++;
diff --git a/frontend/index.html b/frontend/index.html
index 873ff94..675abfd 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -51,7 +51,7 @@
     </section>
 
     <!-- Queue summary -->
-    <section id="summary" class="!mt-12 rounded-2xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-gray-700 transition-colors">
+    <section id="summary" class="hidden !mt-12 rounded-2xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-gray-700 transition-colors">
       <div class="flex flex-wrap items-end justify-between gap-2 text-sm">
         <!-- Buttons: on small screens show on their own row above -->
         <div class="order-1 w-full md:order-2 md:w-auto flex gap-2 justify-end">
diff --git a/frontend/invite.html b/frontend/invite.html
index d079894..6cc43a3 100644
--- a/frontend/invite.html
+++ b/frontend/invite.html
@@ -71,7 +71,7 @@
       </div>
     </section>
 
-    <section id="summary" class="!mt-12 rounded-2xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-gray-700">
+    <section id="summary" class="hidden !mt-12 rounded-2xl border bg-white p-4 shadow-sm dark:bg-gray-800 dark:border-gray-700">
       <div class="flex flex-wrap items-end justify-between gap-2 text-sm">
         <!-- Buttons: ensure present on invite page and visible on small screens -->
         <div class="order-1 w-full md:order-2 md:w-auto flex gap-2 justify-end">