diff --git a/_layouts/category.html b/_layouts/category.html
index bb9afae..da3770a 100644
--- a/_layouts/category.html
+++ b/_layouts/category.html
@@ -17,20 +17,25 @@ <h1>{{ page.title }}</h1>
   <div class="card-grid">
     {% for item in collection %}
       <div class="card">
-        <h3><a href="{{ item.url | relative_url }}">{{ item.title }}</a></h3>
-        {% if item.description %}
-          <p>{{ item.description }}</p>
-        {% endif %}
-        {% if item.author %}
-          <p style="font-size: 0.8rem; color: var(--color-muted);">by {{ item.author }}</p>
-        {% endif %}
-        {% if item.tags %}
-          <div class="tag-list">
-            {% for tag in item.tags %}
-              <a class="tag" href="{{ site.baseurl }}/tags/{{ tag }}/">{{ tag }}</a>
-            {% endfor %}
-          </div>
+        {% if item.thumbnail %}
+          <img class="card-thumbnail" src="{{ item.thumbnail | relative_url }}" alt="{{ item.title }}">
         {% endif %}
+        <div class="card-body">
+          <h3><a href="{{ item.url | relative_url }}">{{ item.title }}</a></h3>
+          {% if item.description %}
+            <p>{{ item.description }}</p>
+          {% endif %}
+          {% if item.author %}
+            <p style="font-size: 0.8rem; color: var(--color-muted);">by {{ item.author }}</p>
+          {% endif %}
+          {% if item.tags %}
+            <div class="tag-list">
+              {% for tag in item.tags %}
+                <a class="tag" href="{{ site.baseurl }}/tags/{{ tag }}/">{{ tag }}</a>
+              {% endfor %}
+            </div>
+          {% endif %}
+        </div>
       </div>
     {% endfor %}
   </div>
diff --git a/_layouts/default.html b/_layouts/default.html
index 97aab8b..80c8584 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -99,11 +99,22 @@
       background: var(--color-surface);
       border: 1px solid var(--color-border);
       border-radius: var(--radius);
-      padding: var(--space-lg);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
       transition: box-shadow 0.15s;
     }
     .card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
 
+    .card-thumbnail {
+      width: 100%;
+      height: 160px;
+      object-fit: cover;
+      display: block;
+    }
+
+    .card-body { padding: var(--space-lg); }
+
     .card h3 { font-size: 1.1rem; margin-bottom: var(--space-xs); }
     .card p { font-size: 0.9rem; color: var(--color-muted); margin-bottom: var(--space-sm); }
 
diff --git a/_layouts/tag.html b/_layouts/tag.html
index 6f662c4..00370b5 100644
--- a/_layouts/tag.html
+++ b/_layouts/tag.html
@@ -28,20 +28,25 @@ <h1>Tag: {{ page.tag }}</h1>
   <div class="card-grid">
     {% for item in all_items %}
       <div class="card">
-        <h3><a href="{{ item.url | relative_url }}">{{ item.title }}</a></h3>
-        {% if item.description %}
-          <p>{{ item.description }}</p>
-        {% endif %}
-        {% if item.author %}
-          <p style="font-size: 0.8rem; color: var(--color-muted);">by {{ item.author }}</p>
-        {% endif %}
-        {% if item.tags %}
-          <div class="tag-list">
-            {% for tag in item.tags %}
-              <a class="tag" href="{{ site.baseurl }}/tags/{{ tag }}/">{{ tag }}</a>
-            {% endfor %}
-          </div>
+        {% if item.thumbnail %}
+          <img class="card-thumbnail" src="{{ item.thumbnail | relative_url }}" alt="{{ item.title }}">
         {% endif %}
+        <div class="card-body">
+          <h3><a href="{{ item.url | relative_url }}">{{ item.title }}</a></h3>
+          {% if item.description %}
+            <p>{{ item.description }}</p>
+          {% endif %}
+          {% if item.author %}
+            <p style="font-size: 0.8rem; color: var(--color-muted);">by {{ item.author }}</p>
+          {% endif %}
+          {% if item.tags %}
+            <div class="tag-list">
+              {% for tag in item.tags %}
+                <a class="tag" href="{{ site.baseurl }}/tags/{{ tag }}/">{{ tag }}</a>
+              {% endfor %}
+            </div>
+          {% endif %}
+        </div>
       </div>
     {% endfor %}
   </div>
diff --git a/index.md b/index.md
index e563653..8653b18 100644
--- a/index.md
+++ b/index.md
@@ -8,33 +8,45 @@ title: Home
 
 <div class="card-grid">
   <div class="card">
-    <h3><a href="{{ site.baseurl }}/lightshows/">Light Shows</a></h3>
-    <p>Custom light show sequences (.fseq) with optional audio.</p>
-    <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.lightshows | size }} items</p>
+    <div class="card-body">
+      <h3><a href="{{ site.baseurl }}/lightshows/">Light Shows</a></h3>
+      <p>Custom light show sequences (.fseq) with optional audio.</p>
+      <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.lightshows | size }} items</p>
+    </div>
   </div>
   <div class="card">
-    <h3><a href="{{ site.baseurl }}/locksounds/">Lock Sounds</a></h3>
-    <p>Lock/unlock chime sounds (.wav) for your Tesla.</p>
-    <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.locksounds | size }} items</p>
+    <div class="card-body">
+      <h3><a href="{{ site.baseurl }}/locksounds/">Lock Sounds</a></h3>
+      <p>Lock/unlock chime sounds (.wav) for your Tesla.</p>
+      <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.locksounds | size }} items</p>
+    </div>
   </div>
   <div class="card">
-    <h3><a href="{{ site.baseurl }}/boombox/">Boombox</a></h3>
-    <p>Audio tracks for Tesla's Boombox feature.</p>
-    <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.boombox | size }} items</p>
+    <div class="card-body">
+      <h3><a href="{{ site.baseurl }}/boombox/">Boombox</a></h3>
+      <p>Audio tracks for Tesla's Boombox feature.</p>
+      <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.boombox | size }} items</p>
+    </div>
   </div>
   <div class="card">
-    <h3><a href="{{ site.baseurl }}/wraps/">Wraps</a></h3>
-    <p>Vehicle wrap designs and templates.</p>
-    <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.wraps | size }} items</p>
+    <div class="card-body">
+      <h3><a href="{{ site.baseurl }}/wraps/">Wraps</a></h3>
+      <p>Vehicle wrap designs and templates.</p>
+      <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.wraps | size }} items</p>
+    </div>
   </div>
   <div class="card">
-    <h3><a href="{{ site.baseurl }}/hornsounds/">Horn Sounds</a></h3>
-    <p>Custom horn sounds for your Tesla.</p>
-    <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.hornsounds | size }} items</p>
+    <div class="card-body">
+      <h3><a href="{{ site.baseurl }}/hornsounds/">Horn Sounds</a></h3>
+      <p>Custom horn sounds for your Tesla.</p>
+      <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.hornsounds | size }} items</p>
+    </div>
   </div>
   <div class="card">
-    <h3><a href="{{ site.baseurl }}/tags/">Browse by Tag</a></h3>
-    <p>Filter content across all categories by tag.</p>
-    <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.data.tags | size }} tags</p>
+    <div class="card-body">
+      <h3><a href="{{ site.baseurl }}/tags/">Browse by Tag</a></h3>
+      <p>Filter content across all categories by tag.</p>
+      <p style="font-size: 0.8rem; color: var(--color-muted);">{{ site.data.tags | size }} tags</p>
+    </div>
   </div>
 </div>