diff --git a/src/infrastructure/repositories/roasts.rs b/src/infrastructure/repositories/roasts.rs
index df480ab..a909ca3 100644
--- a/src/infrastructure/repositories/roasts.rs
+++ b/src/infrastructure/repositories/roasts.rs
@@ -264,6 +264,7 @@ impl RoastRepository for SqlRoastRepository {
                     "ro.name",
                     "COALESCE(r.origin,'')",
                     "COALESCE(r.producer,'')",
+                    "COALESCE(r.tasting_notes,'')",
                 ],
             )
         });
diff --git a/templates/partials/roast_list.html b/templates/partials/roast_list.html
index 9a390c3..1cae4bd 100644
--- a/templates/partials/roast_list.html
+++ b/templates/partials/roast_list.html
@@ -16,12 +16,10 @@
       <table class="responsive-table min-w-full divide-y divide-amber-200 text-left text-sm text-stone-700">
         <thead class="bg-amber-200/60 text-xs font-semibold tracking-wide text-amber-900">
           <tr>
-            {% call table::sortable_header("Added", "created-at", navigator, "#roast-list") %} {%
-            call table::sortable_header("Roast", "name", navigator, "#roast-list") %} {% call
-            table::sortable_header("Roaster", "roaster", navigator, "#roast-list") %} {% call
-            table::sortable_header("Origin", "origin", navigator, "#roast-list") %} {% call
-            table::sortable_header("Producer", "producer", navigator, "#roast-list") %}
-            <th scope="col" class="px-4 py-3">Notes</th>
+            {% call table::sortable_header("Added", "created-at", navigator, "#roast-list") %}
+            {% call table::sortable_header("Roast", "name", navigator, "#roast-list") %}
+            {% call table::sortable_header("Origin", "origin", navigator, "#roast-list") %}
+            <th scope="col" class="px-4 py-3">Tasting Notes</th>
             {% if is_authenticated %}
             <th scope="col" class="px-4 py-3 text-right">Actions</th>
             {% endif %}
@@ -42,31 +40,28 @@
               {{ roast.created_at }}
             </td>
             <td data-label="Roast" class="px-4 py-3">
-              <div class="flex flex-col">
-                <a
-                  href="{{ roast.detail_path }}"
-                  class="font-semibold text-amber-800 hover:text-amber-600"
-                  >{{ roast.name }}</a
-                >
-              </div>
+              <a
+                href="{{ roast.detail_path }}"
+                class="font-semibold text-amber-800 hover:text-amber-600"
+                >{{ roast.name }}</a
+              >
+              <div class="hidden md:block text-xs text-stone-500">{{ roast.roaster_label }}</div>
             </td>
-            <td data-label="Roaster" class="px-4 py-3 whitespace-nowrap">{{ roast.roaster_label }}</td>
-            <td data-label="Origin" class="px-4 py-3 whitespace-nowrap">{{ roast.origin }}</td>
-            <td data-label="Producer" class="px-4 py-3 whitespace-nowrap">{{ roast.producer }}</td>
-            <td data-label="Notes" class="px-4 py-3">
+            <td data-label="Roaster" class="px-4 py-3 whitespace-nowrap md:hidden">{{ roast.roaster_label }}</td>
+            <td data-label="Origin" class="px-4 py-3 whitespace-nowrap">
+              {{ roast.origin }}
+              {% if !roast.producer.is_empty() %}
+              <div class="hidden md:block text-xs text-stone-500">{{ roast.producer }}</div>
+              {% endif %}
+            </td>
+            {% if !roast.producer.is_empty() %}
+            <td data-label="Producer" class="px-4 py-3 whitespace-nowrap md:hidden">{{ roast.producer }}</td>
+            {% endif %}
+            <td data-label="Tasting Notes" class="px-4 py-3 text-stone-600 text-right md:text-left">
               {% if roast.tasting_notes.is_empty() %}
-              <span class="text-xs text-stone-500">No tasting notes yet.</span>
+              <span class="text-stone-500">No tasting notes yet.</span>
               {% else %}
-              <ul class="flex flex-wrap gap-2">
-                {% for note in roast.tasting_notes %}
-                <li>
-                  <span
-                    class="inline-flex items-center rounded-full border border-amber-500/60 bg-amber-500/10 px-3 py-1 text-xs font-semibold text-amber-700"
-                    >{{ note }}</span
-                  >
-                </li>
-                {% endfor %}
-              </ul>
+              {{ roast.tasting_notes.join(", ") }}
               {% endif %}
             </td>
             {% if is_authenticated %}