diff --git a/layouts/_default/index.html b/layouts/_default/index.html
index a37ff6f..ce60f94 100644
--- a/layouts/_default/index.html
+++ b/layouts/_default/index.html
@@ -6,24 +6,43 @@
   {{ end }}
 </div>
 <div class="cards" id="cards">
-  {{ $current := "Books" }}
-  {{ range where .Site.RegularPages ".Params.category" $current }}
-    {{ partial "card.html" . }}
+  {{ range .Site.RegularPages }}
+    {{ if .Params.category }}
+      {{ partial "card.html" . }}
+    {{ end }}
   {{ end }}
 </div>
 <script>
-// Simple tab switching (client-side, not Hugo)
+// Tab switching with "All" default view
 document.addEventListener('DOMContentLoaded', function() {
   const tabs = document.querySelectorAll('.tab');
   const cards = document.getElementById('cards');
   const allCards = Array.from(cards.children);
-  tabs.forEach(tab => {
+  
+  // Add an "All" tab at the beginning
+  const tabsContainer = document.getElementById('tabs');
+  const allTab = document.createElement('div');
+  allTab.className = 'tab active';
+  allTab.textContent = 'All';
+  allTab.setAttribute('data-tab', 'all');
+  tabsContainer.prepend(allTab);
+  
+  // Make other tabs inactive initially
+  tabs.forEach(tab => tab.classList.remove('active'));
+  
+  // Add click handler for all tabs (including the new All tab)
+  document.querySelectorAll('.tab').forEach(tab => {
     tab.addEventListener('click', function() {
-      tabs.forEach(t => t.classList.remove('active'));
+      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
       this.classList.add('active');
       const cat = this.getAttribute('data-tab');
+      
       allCards.forEach(card => {
-        card.style.display = card.innerHTML.includes(`category=\"${cat}\"`) ? '' : 'none';
+        if (cat === 'all') {
+          card.style.display = '';
+        } else {
+          card.style.display = card.innerHTML.includes(`category=\"${cat}\"`) ? '' : 'none';
+        }
       });
     });
   });