diff --git a/web/index.html b/web/index.html
index dfd205f..b7e9dd3 100644
--- a/web/index.html
+++ b/web/index.html
@@ -961,10 +961,69 @@ $ python web/serve.py</div>
       if (e.key === 'Escape') closeModal();
     });
 
+    // Handle navigation filter clicks via hash
+    window.addEventListener('hashchange', async () => {
+      const hash = window.location.hash.substring(2);
+      let templates = await loadTemplates();
+      let typeFilter = hash.split('=')[1];
+      
+      // Filter templates by type
+      if (typeFilter && typeFilter !== 'Alle') {
+        templates = templates.filter(t => t.type === typeFilter);
+      }
+      
+      // Update active state in navigation
+      document.querySelectorAll('.nav a').forEach(a => {
+        a.classList.remove('active');
+        if (a.textContent === 'Alle' && (!typeFilter || typeFilter === 'Alle')) {
+          a.classList.add('active');
+        } else if (a.getAttribute('href').includes(`type=${typeFilter}`)) {
+          a.classList.add('active');
+        }
+      });
+      
+      renderTemplates(templates);
+    });
+
+    // Click handler for navigation
+    document.querySelectorAll('.nav a').forEach(link => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        // Spezialbehandlung für "Alle"
+        if (link.textContent.trim() === 'Alle') {
+          window.location.hash = '#';
+        } else {
+          const href = link.getAttribute('href');
+          const type = href.substring(href.indexOf('=') + 1);
+          window.location.hash = `#?type=${type}`;
+        }
+      });
+    });
+
     // Initial load
     loadTemplates().then(t => {
       allTemplates = t;
-      renderTemplates(t);
+     
+      // Check for initial hash
+      const hash = window.location.hash.substring(2);
+      let typeFilter = hash ? hash.split('=')[1] : undefined;
+      let filteredTemplates = t;
+      
+      if (typeFilter && typeFilter !== 'Alle') {
+        filteredTemplates = t.filter(template => template.type === typeFilter);
+      }
+      
+      // Update active state
+      document.querySelectorAll('.nav a').forEach(a => {
+        a.classList.remove('active');
+        if (!typeFilter || a.textContent === 'Alle') {
+          a.classList.add('active');
+        } else if (a.getAttribute('href').includes(`type=${typeFilter}`)) {
+          a.classList.add('active');
+        }
+      });
+      
+      renderTemplates(filteredTemplates);
     });
   </script>
 </body>