diff --git a/apps.html b/apps.html
index bca3979..89a388d 100644
--- a/apps.html
+++ b/apps.html
@@ -3,225 +3,463 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Mobilní aplikace – Mamutovo</title>
+<title>Aplikace – Mamutovo</title>
 <style>
-  @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');
 
-  :root {
-    --bg: #0f0f0f;
-    --surface: #1a1a1a;
-    --surface2: #242424;
-    --accent: #6364ff;
-    --accent2: #ff6b6b;
-    --text: #f0f0f0;
-    --muted: #888;
-    --border: #2e2e2e;
-    --radius: 10px;
+:root {
+  --bg: #0d0d0d;
+  --surface: #161616;
+  --surface2: #1e1e1e;
+  --surface3: #252525;
+  --accent: #00c896;
+  --accent2: #ff6b6b;
+  --accent3: #fbbf24;
+  --text: #f0f0f0;
+  --muted: #777;
+  --muted2: #555;
+  --border: #282828;
+  --radius: 10px;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Syne', sans-serif;
+  min-height: 100vh;
+}
+
+/* HEADER */
+.header {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 2.5rem 1.5rem 1.5rem;
+}
+
+.badge {
+  display: inline-block;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+  color: var(--muted);
+  font-family: 'Space Mono', monospace;
+  font-size: 0.78rem;
+  padding: 0.4rem 1rem;
+  border-radius: 999px;
+  margin-bottom: 1.2rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  text-decoration: none;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.badge:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+h1 {
+  font-size: clamp(1.6rem, 4vw, 2.4rem);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.4rem;
+}
+
+h1 span { color: var(--accent); }
+
+.subtitle {
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin-bottom: 1.8rem;
+}
+
+/* FILTER BUTTONS */
+.filters {
+  max-width: 960px;
+  margin: 0 auto 1.5rem;
+  padding: 0 1.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.ftag {
+  font-family: 'Space Mono', monospace;
+  font-size: 0.72rem;
+  padding: 0.35rem 0.9rem;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.ftag:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: rgba(0,200,150,0.06);
+}
+
+.ftag.active {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: rgba(0,200,150,0.1);
+}
+
+/* GRID */
+.grid {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 1.5rem 3rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.9rem;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    grid-template-columns: 1fr;
   }
+}
 
-  * { box-sizing: border-box; margin: 0; padding: 0; }
+/* CARD */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.1rem 1.1rem 1rem;
+  display: flex;
+  gap: 0.9rem;
+  align-items: flex-start;
+  transition: border-color 0.2s, transform 0.15s;
+  animation: fadeIn 0.3s ease both;
+}
 
-  body {
-    background: var(--bg);
-    color: var(--text);
-    font-family: 'Syne', sans-serif;
-    min-height: 100vh;
-    padding: 0 1rem;
-  }
+.card:hover {
+  border-color: var(--accent);
+  transform: translateY(-2px);
+}
 
-  /* --- HERO --- */
-  .hero {
-    max-width: 680px;
-    margin: 0 auto;
-    padding: 3rem 0 2rem;
-    text-align: center;
-  }
+.card[hidden] { display: none; }
 
-  a.badge { text-decoration: none; }
-  a.badge:hover { border-color: var(--accent); color: var(--accent); }
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
 
-  .badge {
-    display: inline-block;
-    background: var(--surface2);
-    border: 1px solid var(--border);
-    color: var(--muted);
-    font-family: 'Space Mono', monospace;
-    font-size: 0.85rem;
-    padding: 0.45rem 1.1rem;
-    border-radius: 999px;
-    margin-bottom: 1.5rem;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-  }
+/* LOGO */
+.app-logo {
+  width: 64px;
+  height: 64px;
+  min-width: 64px;
+  border-radius: 14px;
+  background: var(--surface3);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  line-height: 1;
+  overflow: hidden;
+  flex-shrink: 0;
+}
 
-  h1 {
-    font-size: clamp(1.4rem, 4vw, 2.5rem);
-    font-weight: 700;
-    line-height: 1.1;
-    margin-bottom: 1rem;
-    letter-spacing: -0.02em;
-    word-break: break-word;
-    overflow-wrap: break-word;
-  }
+.app-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 14px;
+}
 
-  h1 span { color: var(--accent); }
+/* CARD BODY */
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  flex: 1;
+  min-width: 0;
+}
 
-  .tagline {
-    color: var(--muted);
-    font-size: 1.05rem;
-    line-height: 1.6;
-    max-width: 480px;
-    margin: 0 auto 2.5rem;
-  }
+.card-name {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  /* --- SECTIONS --- */
-  .sections {
-    max-width: 680px;
-    margin: 0 auto 3rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
+/* TAGS */
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+}
 
-  .section {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 1.4rem 1.6rem;
-    transition: border-color 0.2s;
-  }
+.tag {
+  font-family: 'Space Mono', monospace;
+  font-size: 0.62rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid;
+}
 
-  .section:hover { border-color: var(--accent); }
+.tag-platform {
+  color: var(--accent);
+  background: rgba(0,200,150,0.07);
+  border-color: rgba(0,200,150,0.18);
+}
 
-  .section h2 {
-    font-size: 1rem;
-    font-weight: 700;
-    margin-bottom: 0.8rem;
-    letter-spacing: -0.01em;
-    color: var(--text);
-  }
+.tag-free {
+  color: #94d5a0;
+  background: rgba(148,213,160,0.07);
+  border-color: rgba(148,213,160,0.18);
+}
 
-  .section a {
-    color: var(--accent);
-    text-decoration: none;
-  }
+.tag-paid {
+  color: var(--accent3);
+  background: rgba(251,191,36,0.07);
+  border-color: rgba(251,191,36,0.18);
+}
 
-  .section a:hover { text-decoration: underline; }
+.tag-open {
+  color: #7eb8f7;
+  background: rgba(126,184,247,0.07);
+  border-color: rgba(126,184,247,0.18);
+}
 
-  /* --- APP LIST --- */
-  .app-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
+/* BUTTON */
+.btn-dl {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-family: 'Space Mono', monospace;
+  font-size: 0.7rem;
+  font-weight: 700;
+  padding: 0.4rem 0.85rem;
+  border-radius: 7px;
+  border: 1px solid var(--border);
+  background: var(--surface2);
+  color: var(--text);
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.15s;
+  align-self: flex-start;
+  margin-top: 0.2rem;
+}
 
-  .app-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-    padding-bottom: 0.75rem;
-    border-bottom: 1px solid var(--border);
-  }
+.btn-dl:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
 
-  .app-item:last-child {
-    padding-bottom: 0;
-    border-bottom: none;
-  }
+/* FOOTER */
+.footer-note {
+  max-width: 960px;
+  margin: 0 auto 3rem;
+  padding: 1rem 1.5rem 0;
+  border-top: 1px solid var(--border);
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.82rem;
+  line-height: 1.6;
+}
 
-  .app-name {
-    font-weight: 700;
-    font-size: 0.95rem;
-  }
+.footer-note a {
+  color: var(--accent);
+  text-decoration: none;
+  font-family: 'Space Mono', monospace;
+  font-size: 0.78rem;
+}
 
-  .app-name a {
-    color: var(--text);
-    text-decoration: none;
-  }
-
-  .app-name a:hover {
-    color: var(--accent);
-    text-decoration: none;
-  }
-
-  .app-desc {
-    color: var(--muted);
-    font-size: 0.88rem;
-    line-height: 1.5;
-  }
-
-  /* --- FOOTER NOTE --- */
-  .footer-note {
-    max-width: 680px;
-    margin: 0 auto 3rem;
-    text-align: center;
-    color: var(--muted);
-    font-size: 0.82rem;
-    line-height: 1.6;
-    padding-top: 1rem;
-    border-top: 1px solid var(--border);
-  }
-
-  .footer-note a {
-    color: var(--accent);
-    text-decoration: none;
-    font-family: 'Space Mono', monospace;
-    font-size: 0.78rem;
-  }
-
-  .footer-note a:hover { text-decoration: underline; }
+.footer-note a:hover { text-decoration: underline; }
 </style>
 </head>
 <body>
 
-<div class="hero">
+<div class="header">
   <a href="https://fedi.mamutovo.cz" class="badge">🦣 MAMUTOVO · APLIKACE</a>
-  <h1>Mobilní <span>aplikace</span></h1>
-  <p class="tagline">Doporučené appky pro Mastodon na Android a iOS.</p>
+  <h1>Aplikace pro <span>Mastodon</span></h1>
+  <p class="subtitle">Doporučené klienty pro Android, iOS, web a počítač.</p>
 </div>
 
-<div class="sections">
+<div class="filters">
+  <button class="ftag active" data-filter="vse">Vše</button>
+  <button class="ftag" data-filter="android">Android</button>
+  <button class="ftag" data-filter="ios">iOS</button>
+  <button class="ftag" data-filter="web">Web</button>
+  <button class="ftag" data-filter="pocitac">Počítač</button>
+</div>
 
-  <div class="section">
-    <h2>Android</h2>
-    <div class="app-list">
-      <div class="app-item">
-        <div class="app-name"><a href="https://tusky.app">Tusky</a></div>
-        <div class="app-desc">Jednoduchý a přehledný, skvělý pro začátečníky.</div>
-      </div>
-      <div class="app-item">
-        <div class="app-name"><a href="https://sk22.github.io/megalodon">Megalodon</a></div>
-        <div class="app-desc">Fork Tusky s extra funkcemi.</div>
-      </div>
-      <div class="app-item">
-        <div class="app-name"><a href="https://fedilab.app">Fedilab</a></div>
-        <div class="app-desc">Pokročilý, podporuje více účtů.</div>
-      </div>
-      <div class="app-item">
-        <div class="app-name"><a href="https://play.google.com/store/apps/details?id=org.joinmastodon.android">Mastodon</a></div>
-        <div class="app-desc">Oficiální aplikace.</div>
+<div class="grid" id="grid">
+
+  <!-- ANDROID -->
+  <div class="card" data-platforms="android">
+    <div class="app-logo">🦣</div>
+    <div class="card-body">
+      <div class="card-name">Tusky</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">Android</span>
+        <span class="tag tag-free">Zdarma</span>
+        <span class="tag tag-open">Otevřená</span>
       </div>
+      <a href="https://tusky.app" class="btn-dl" target="_blank" rel="noopener">Stáhnout →</a>
     </div>
   </div>
 
-  <div class="section">
-    <h2>iOS</h2>
-    <div class="app-list">
-      <div class="app-item">
-        <div class="app-name"><a href="https://tapbots.com/ivory">Ivory</a></div>
-        <div class="app-desc">Nejlepší UX, placená.</div>
+  <div class="card" data-platforms="android">
+    <div class="app-logo">🐘</div>
+    <div class="card-body">
+      <div class="card-name">Pachli</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">Android</span>
+        <span class="tag tag-free">Zdarma</span>
+        <span class="tag tag-open">Otevřená</span>
       </div>
-      <div class="app-item">
-        <div class="app-name"><a href="https://apps.apple.com/app/ice-cubes-for-mastodon/id6444915884">Ice Cubes</a></div>
-        <div class="app-desc">Zdarma, open source.</div>
+      <a href="https://pachli.app" class="btn-dl" target="_blank" rel="noopener">Stáhnout →</a>
+    </div>
+  </div>
+
+  <div class="card" data-platforms="android">
+    <div class="app-logo">🌐</div>
+    <div class="card-body">
+      <div class="card-name">Fedilab</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">Android</span>
+        <span class="tag tag-free">Zdarma</span>
+        <span class="tag tag-open">Otevřená</span>
       </div>
-      <div class="app-item">
-        <div class="app-name"><a href="https://apps.apple.com/app/toot-for-mastodon/id1229021451">Toot!</a></div>
-        <div class="app-desc">Kvalitní a udržovaná appka.</div>
+      <a href="https://fedilab.app" class="btn-dl" target="_blank" rel="noopener">Stáhnout →</a>
+    </div>
+  </div>
+
+  <div class="card" data-platforms="android">
+    <div class="app-logo">📱</div>
+    <div class="card-body">
+      <div class="card-name">Mastodon</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">Android</span>
+        <span class="tag tag-free">Zdarma</span>
       </div>
-      <div class="app-item">
-        <div class="app-name"><a href="https://apps.apple.com/app/mastodon-for-iphone/id1571998974">Mastodon</a></div>
-        <div class="app-desc">Oficiální aplikace.</div>
+      <a href="https://play.google.com/store/apps/details?id=org.joinmastodon.android" class="btn-dl" target="_blank" rel="noopener">Stáhnout →</a>
+    </div>
+  </div>
+
+  <!-- iOS -->
+  <div class="card" data-platforms="ios">
+    <div class="app-logo">🦷</div>
+    <div class="card-body">
+      <div class="card-name">Ivory</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">iOS</span>
+        <span class="tag tag-paid">Placené</span>
       </div>
+      <a href="https://tapbots.com/ivory" class="btn-dl" target="_blank" rel="noopener">Otevřít →</a>
+    </div>
+  </div>
+
+  <div class="card" data-platforms="ios">
+    <div class="app-logo">🧊</div>
+    <div class="card-body">
+      <div class="card-name">Ice Cubes</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">iOS</span>
+        <span class="tag tag-free">Zdarma</span>
+        <span class="tag tag-open">Otevřená</span>
+      </div>
+      <a href="https://apps.apple.com/app/ice-cubes-for-mastodon/id6444915884" class="btn-dl" target="_blank" rel="noopener">Stáhnout →</a>
+    </div>
+  </div>
+
+  <div class="card" data-platforms="ios">
+    <div class="app-logo">💬</div>
+    <div class="card-body">
+      <div class="card-name">Toot!</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">iOS</span>
+        <span class="tag tag-paid">Placené</span>
+      </div>
+      <a href="https://apps.apple.com/app/toot-for-mastodon/id1229021451" class="btn-dl" target="_blank" rel="noopener">Stáhnout →</a>
+    </div>
+  </div>
+
+  <div class="card" data-platforms="ios">
+    <div class="app-logo">📱</div>
+    <div class="card-body">
+      <div class="card-name">Mastodon</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">iOS</span>
+        <span class="tag tag-free">Zdarma</span>
+      </div>
+      <a href="https://apps.apple.com/app/mastodon-for-iphone/id1571998974" class="btn-dl" target="_blank" rel="noopener">Stáhnout →</a>
+    </div>
+  </div>
+
+  <!-- WEB -->
+  <div class="card" data-platforms="web">
+    <div class="app-logo">🐣</div>
+    <div class="card-body">
+      <div class="card-name">Phanpy</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">Web</span>
+        <span class="tag tag-free">Zdarma</span>
+        <span class="tag tag-open">Otevřená</span>
+      </div>
+      <a href="https://phanpy.cz" class="btn-dl" target="_blank" rel="noopener">Otevřít →</a>
+    </div>
+  </div>
+
+  <div class="card" data-platforms="web">
+    <div class="app-logo">🫎</div>
+    <div class="card-body">
+      <div class="card-name">Elk</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">Web</span>
+        <span class="tag tag-free">Zdarma</span>
+        <span class="tag tag-open">Otevřená</span>
+      </div>
+      <a href="https://elk.zone" class="btn-dl" target="_blank" rel="noopener">Otevřít →</a>
+    </div>
+  </div>
+
+  <div class="card" data-platforms="web">
+    <div class="app-logo">📌</div>
+    <div class="card-body">
+      <div class="card-name">Pinafore</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">Web</span>
+        <span class="tag tag-free">Zdarma</span>
+        <span class="tag tag-open">Otevřená</span>
+      </div>
+      <a href="https://pinafore.social" class="btn-dl" target="_blank" rel="noopener">Otevřít →</a>
+    </div>
+  </div>
+
+  <!-- POČÍTAČ -->
+  <div class="card" data-platforms="pocitac">
+    <div class="app-logo">🖥️</div>
+    <div class="card-body">
+      <div class="card-name">Mastodon for Mac</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">Počítač</span>
+        <span class="tag tag-free">Zdarma</span>
+      </div>
+      <a href="https://mastodon.social/apps" class="btn-dl" target="_blank" rel="noopener">Stáhnout →</a>
+    </div>
+  </div>
+
+  <div class="card" data-platforms="pocitac">
+    <div class="app-logo">🌿</div>
+    <div class="card-body">
+      <div class="card-name">Sengi</div>
+      <div class="card-tags">
+        <span class="tag tag-platform">Počítač</span>
+        <span class="tag tag-free">Zdarma</span>
+        <span class="tag tag-open">Otevřená</span>
+      </div>
+      <a href="https://nicolasconstant.github.io/sengi" class="btn-dl" target="_blank" rel="noopener">Stáhnout →</a>
     </div>
   </div>
 
@@ -229,7 +467,34 @@
 
 <div class="footer-note">
   <a href="start.html">← Zpět na průvodce</a>
+  &nbsp;·&nbsp;
+  <a href="https://mamutovo.cz/@archos">@archos@mamutovo.cz</a>
 </div>
 
+<script>
+(function () {
+  const filters = document.querySelectorAll('.ftag');
+  const cards   = document.querySelectorAll('.card');
+
+  filters.forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      const filter = btn.dataset.filter;
+
+      filters.forEach(function (b) { b.classList.remove('active'); });
+      btn.classList.add('active');
+
+      cards.forEach(function (card) {
+        if (filter === 'vse') {
+          card.hidden = false;
+        } else {
+          const platforms = card.dataset.platforms.split(' ');
+          card.hidden = !platforms.includes(filter);
+        }
+      });
+    });
+  });
+})();
+</script>
+
 </body>
 </html>
