Clean. Here's what's live now:

- **Tag filter bar** appears above the grid whenever any download has tags assigned. Chips for "All" + each unique tag, centered under the heading.
- **Clicking a tag** filters the grid to only matching downloads. Clicking the active tag again (or "All") clears the filter.
- **Empty state** — if a tag has no results it shows a friendly message instead of a blank grid.
- The filter only shows when tags exist — so it's invisible today (your 3 current downloads have no tags) and appears automatically once you start tagging items in the admin.

To use it: go to Admin → Downloads → edit a download item → add tags like `Colossians`, `Worksheet`, `Devotional`. Those tags will show up as filter chips on the public page instantly after publishing.

data/study-reminders.json

@@ -1,4 +1,4 @@
 {
   "users": {},
-  "updatedAt": "2026-06-04T14:16:50.276Z"
+  "updatedAt": "2026-06-05T13:00:29.596Z"
 }

src/App.css

@@ -2591,8 +2591,8 @@
 
 .resources-list {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 1rem;
+    gap: 1.25rem;
   }
 
   .resource-link {
@@ -2628,42 +2628,61 @@
     background: #111;
     border: 1px solid rgba(201, 168, 76, 0.18);
     border-radius: 18px;
-    padding: 1rem;
+    padding: 1.5rem;
-    display: grid;
+    display: flex;
+    flex-direction: column;
     gap: 1rem;
     text-decoration: none;
     color: inherit;
+    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
+  }
+
+  .resource-download-card:hover {
+    transform: translateY(-2px);
+    background: rgba(201, 168, 76, 0.06);
+    border-color: rgba(201, 168, 76, 0.32);
   }
 
   .resource-download-header {
     display: flex;
     gap: 1rem;
-    align-items: center;
+    align-items: flex-start;
   }
 
   .resource-download-meta {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.5rem;
     min-width: 0;
+    flex: 1;
   }
 
   .resource-link-label {
     display: block;
-    font-size: 1rem;
+    font-size: 1.05rem;
+    font-weight: 700;
+    line-height: 1.35;
     color: var(--brand-warm-white);
   }
 
+  .resource-link-description {
+    font-size: 0.92rem;
+    color: rgba(255, 255, 255, 0.65);
+    line-height: 1.5;
+    margin: 0;
+  }
+
   .resource-link-action {
     color: var(--brand-gold);
-    font-size: 0.95rem;
+    font-size: 0.92rem;
-    white-space: nowrap;
+    font-weight: 600;
+    margin-top: auto;
   }
 
   .resource-link-image {
-    width: 72px;
+    width: 80px;
-    height: 72px;
+    height: 80px;
-    border-radius: 16px;
+    border-radius: 14px;
     object-fit: cover;
     border: 1px solid rgba(201, 168, 76, 0.2);
     flex-shrink: 0;
@@ -2696,6 +2715,48 @@
     margin: 0.85rem auto 0;
   }
 
+  .download-tag-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+    margin: 0 auto 2rem;
+    max-width: 760px;
+  }
+
+  .download-tag-chip {
+    background: transparent;
+    border: 1px solid rgba(201, 168, 76, 0.3);
+    border-radius: 999px;
+    color: rgba(255, 255, 255, 0.65);
+    cursor: pointer;
+    font-family: var(--brand-font-body);
+    font-size: 0.88rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    padding: 0.35rem 1rem;
+    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
+  }
+
+  .download-tag-chip:hover {
+    background: rgba(201, 168, 76, 0.1);
+    border-color: rgba(201, 168, 76, 0.55);
+    color: var(--brand-warm-white);
+  }
+
+  .download-tag-chip--active {
+    background: rgba(201, 168, 76, 0.15);
+    border-color: var(--brand-gold);
+    color: var(--brand-gold);
+  }
+
+  .download-empty-state {
+    text-align: center;
+    color: var(--brand-muted);
+    font-family: var(--brand-font-body);
+    padding: 2rem 0;
+  }
+
   .download-library-group {
     background: rgba(17, 17, 17, 0.82);
     border: 1px solid rgba(201, 168, 76, 0.14);

src/App.tsx

@@ -782,26 +782,45 @@ function PodcastHighlightsSection({ content }: { content: SiteContent }) {
 function DownloadLibrarySection({ content }: { content: SiteContent }) {
   const resources = (content.customLinks ?? []).filter(link => link.placement === 'resources')
   const archivedWithResources = (content.archivedSeries ?? []).filter(series => (series.resourceLinks ?? []).length > 0)
+  const [activeTag, setActiveTag] = useState<string | null>(null)
 
   if (resources.length === 0 && archivedWithResources.length === 0) return null
 
+  const allTags = Array.from(new Set(resources.flatMap(r => r.tags ?? []))).filter(Boolean)
+  const filteredResources = activeTag ? resources.filter(r => (r.tags ?? []).includes(activeTag)) : resources
+
   return (
     <section className="section-resources section-download-library" aria-label="Download library">
       <div className="section-inner">
         <div className="download-library-head">
           <p className="eyebrow">Download Library</p>
           <h2 className="section-heading">More guides, worksheets, and past study downloads.</h2>
-          <p className="download-library-copy">Keep the main guide featured at the top, and use this library for every other download you want available on the page.</p>
         </div>
 
-        {resources.length > 0 && (
+        {allTags.length > 0 && (
+          <div className="download-tag-filter">
+            <button
+              className={`download-tag-chip${activeTag === null ? ' download-tag-chip--active' : ''}`}
+              onClick={() => setActiveTag(null)}
+            >
+              All
+            </button>
+            {allTags.map(tag => (
+              <button
+                key={tag}
+                className={`download-tag-chip${activeTag === tag ? ' download-tag-chip--active' : ''}`}
+                onClick={() => setActiveTag(prev => prev === tag ? null : tag)}
+              >
+                {tag}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {filteredResources.length > 0 && (
           <div className="download-library-group">
-            <div className="download-library-group-head">
-              <h3>Current Downloads</h3>
-              <p>Extra files you want people to grab right now.</p>
-            </div>
             <div className="resources-list">
-              {resources.map(resource => (
+              {filteredResources.map(resource => (
                 <Link key={resource.id} to={`/downloads/${buildCustomDownloadPageId(resource.id)}`} className="resource-download-card resource-download-card--link">
                   <div className="resource-download-header">
                     {resource.imageUrl && (
@@ -822,6 +841,10 @@ function DownloadLibrarySection({ content }: { content: SiteContent }) {
           </div>
         )}
 
+        {activeTag !== null && filteredResources.length === 0 && (
+          <p className="download-empty-state">No downloads tagged "{activeTag}".</p>
+        )}
+
         {archivedWithResources.length > 0 && (
           <div className="download-library-group">
             <div className="download-library-group-head">