diff --git a/src/pages/index.astro b/src/pages/index.astro
index 115b476..cff6396 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -13,6 +13,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
             <!-- Header -->
             <header class="header fade-in">
                 <h1 class="title">Hidden Den Cafe</h1>
+                <a class="pill-link" href="#projects">View Projects ↓</a>
                 <div class="divider">══════════════════════════════</div>
             </header>
 
@@ -42,13 +43,54 @@ import BaseLayout from "../layouts/BaseLayout.astro";
             <div class="divider">══════════════════════════════</div>
 
             <!-- Projects -->
-            <section class="section fade-in">
+            <section class="section fade-in" id="projects">
                 <h2>Projects</h2>
-                <div class="project">
-                    <h3><a href="https://git.hiddenden.cafe/Hiddenden/openrabbit" target="_blank" rel="noopener noreferrer">OpenRabbit</a></h3>
-                    <p>AI code review system for Gitea with automated PR review, issue triage, interactive chat, and codebase analysis.</p>
+                <div class="projects-grid">
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/DevDen" target="_blank" rel="noopener noreferrer">DevDen</a></h3>
+                        <p>Concept/proof-of-concept den exploring ideas and workflows—non-production, unsupported.</p>
+                    </div>
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/Cozy-Den" target="_blank" rel="noopener noreferrer">Cozy-Den</a></h3>
+                        <p>A warm, self-hosted corner of the internet creating comfortable digital spaces.</p>
+                    </div>
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/TailAssistant" target="_blank" rel="noopener noreferrer">TailAssistant</a></h3>
+                        <p>Voice companion inspired by Joey—ready to listen and respond from your desk.</p>
+                    </div>
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/GuardDen" target="_blank" rel="noopener noreferrer">GuardDen</a></h3>
+                        <p>Discord moderation denbot blending AI filtering with classic tools to keep spaces warm and safe.</p>
+                    </div>
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/openrabbit" target="_blank" rel="noopener noreferrer">openrabbit</a></h3>
+                        <p>Enterprise-grade AI code review for Gitea/GitHub with PR review, triage, chat, and analysis.</p>
+                    </div>
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/loyal_companion" target="_blank" rel="noopener noreferrer">loyal_companion</a></h3>
+                        <p>A companion for deep, steady care—processing grief, navigating attachment, and holding space.</p>
+                    </div>
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/Bean-Den" target="_blank" rel="noopener noreferrer">Bean-Den</a></h3>
+                        <p>A personal, cozy space to track your coffee experiences—discover what you love and why.</p>
+                    </div>
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/Burrow" target="_blank" rel="noopener noreferrer">Burrow</a></h3>
+                        <p>Self-hosted AI chat with a terminal aesthetic and git-backed knowledge base you can search and update.</p>
+                    </div>
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/mrunicellular" target="_blank" rel="noopener noreferrer">mrunicellular</a></h3>
+                        <p>Modern site for streamer MrUnicellular (Joey) with live stream, backend API, and database support.</p>
+                    </div>
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/Reddit_Downloader" target="_blank" rel="noopener noreferrer">Reddit_Downloader</a></h3>
+                        <p>Python-powered downloader to archive Reddit content and keep local copies.</p>
+                    </div>
+                    <div class="project-card">
+                        <h3><a href="https://git.hiddenden.cafe/Hiddenden/telegram-sticker-downloader" target="_blank" rel="noopener noreferrer">telegram-sticker-downloader</a></h3>
+                        <p>Python Telegram sticker downloader to fetch packs for offline keeps.</p>
+                    </div>
                 </div>
-                <p class="note">More projects coming soon...</p>
             </section>
 
             <div class="divider">══════════════════════════════</div>
@@ -183,32 +225,79 @@ import BaseLayout from "../layouts/BaseLayout.astro";
         color: var(--color-text-dim);
     }
 
-    .project {
-        margin-bottom: var(--space-sm);
+    .pill-link {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        margin: var(--space-xs) auto;
+        padding: 8px 14px;
+        border-radius: 999px;
+        background: var(--color-bg-light);
+        color: var(--color-accent);
+        font-weight: 600;
+        font-size: 0.9rem;
+        text-decoration: none;
+        border: 1px solid var(--color-surface);
+        transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
     }
 
-    .project h3 {
+    .pill-link:hover {
+        color: var(--color-accent-bright);
+        border-color: var(--color-accent);
+        transform: translateY(-1px);
+    }
+
+    .pill-link:focus-visible {
+        outline: 2px solid var(--color-accent);
+        outline-offset: 3px;
+    }
+
+    .projects-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+        gap: var(--space-md);
+    }
+
+    .project-card {
+        background: var(--color-bg-light);
+        border: 1px solid var(--color-surface);
+        border-radius: 10px;
+        padding: var(--space-md);
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+    }
+
+    .project-card:hover {
+        transform: translateY(-2px);
+        border-color: var(--color-accent);
+        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
+    }
+
+    .project-card h3 {
         font-size: 1rem;
         margin-bottom: var(--space-xs);
     }
 
-    .project h3 a {
-        color: var(--color-blue);
+    .project-card h3 a {
+        color: var(--color-accent);
+        text-decoration: none;
     }
 
-    .project h3 a:hover {
+    .project-card h3 a:hover {
         color: var(--color-accent-bright);
+        text-decoration: underline;
     }
 
-    .project p {
+    .project-card h3 a:focus-visible {
+        outline: 2px solid var(--color-accent);
+        outline-offset: 3px;
+    }
+
+    .project-card p {
         color: var(--color-text-dim);
         font-size: 0.9rem;
-    }
-
-    .note {
-        color: var(--color-surface);
-        font-style: italic;
-        font-size: 0.85rem;
+        line-height: 1.6;
     }
 
     .links {