diff --git a/app/templates/runs/_run_card.html b/app/templates/runs/_run_card.html
index f44a884..88a42a2 100644
--- a/app/templates/runs/_run_card.html
+++ b/app/templates/runs/_run_card.html
@@ -64,14 +64,14 @@
         {# Arrow #}
         <span class="text-gray-600">-></span>
 
-        {# Output preview #}
+        {# Output preview - prefer IPFS URLs when available #}
         {% if run.output_cid %}
         <div class="flex items-center space-x-1">
             <span class="text-xs text-gray-500 mr-1">Out:</span>
             {% if run.output_media_type and run.output_media_type.startswith('image/') %}
-            <img src="/cache/{{ run.output_cid }}/raw" alt="" class="w-10 h-10 object-cover rounded">
+            <img src="{% if run.ipfs_cid %}/ipfs/{{ run.ipfs_cid }}{% else %}/cache/{{ run.output_cid }}/raw{% endif %}" alt="" class="w-10 h-10 object-cover rounded">
             {% elif run.output_media_type and run.output_media_type.startswith('video/') %}
-            <video src="/cache/{{ run.output_cid }}/raw" class="w-10 h-10 object-cover rounded" muted></video>
+            <video src="{% if run.ipfs_cid %}/ipfs/{{ run.ipfs_cid }}{% else %}/cache/{{ run.output_cid }}/raw{% endif %}" class="w-10 h-10 object-cover rounded" muted></video>
             {% else %}
             <div class="w-10 h-10 bg-gray-700 rounded flex items-center justify-center text-gray-500 text-xs">?</div>
             {% endif %}
diff --git a/app/templates/runs/detail.html b/app/templates/runs/detail.html
index e0cbb72..3458584 100644
--- a/app/templates/runs/detail.html
+++ b/app/templates/runs/detail.html
@@ -572,18 +572,18 @@
     <div class="mt-8 bg-gray-800 rounded-lg p-6">
         <h3 class="text-lg font-semibold mb-4">Output</h3>
 
-        {# Inline media preview #}
+        {# Inline media preview - prefer IPFS URLs when available #}
         <div class="mb-4">
             {% if output_media_type and output_media_type.startswith('image/') %}
             <a href="/cache/{{ run.output_cid }}" class="block">
-                <img src="/cache/{{ run.output_cid }}/raw" alt="Output"
+                <img src="{% if run.ipfs_cid %}/ipfs/{{ run.ipfs_cid }}{% else %}/cache/{{ run.output_cid }}/raw{% endif %}" alt="Output"
                      class="max-w-full max-h-96 rounded-lg mx-auto">
             </a>
             {% elif output_media_type and output_media_type.startswith('video/') %}
-            <video src="/cache/{{ run.output_cid }}/raw" controls
+            <video src="{% if run.ipfs_cid %}/ipfs/{{ run.ipfs_cid }}{% else %}/cache/{{ run.output_cid }}/raw{% endif %}" controls
                    class="max-w-full max-h-96 rounded-lg mx-auto"></video>
             {% elif output_media_type and output_media_type.startswith('audio/') %}
-            <audio src="/cache/{{ run.output_cid }}/raw" controls class="w-full"></audio>
+            <audio src="{% if run.ipfs_cid %}/ipfs/{{ run.ipfs_cid }}{% else %}/cache/{{ run.output_cid }}/raw{% endif %}" controls class="w-full"></audio>
             {% else %}
             <div class="bg-gray-900 rounded-lg p-8 text-center text-gray-500">
                 <div class="text-4xl mb-2">?</div>
@@ -596,11 +596,11 @@
             <a href="/cache/{{ run.output_cid }}" class="font-mono text-sm text-blue-400 hover:text-blue-300">
                 {{ run.output_cid }}
             </a>
-            {% if run.output_ipfs_cid %}
-            <a href="https://ipfs.io/ipfs/{{ run.output_ipfs_cid }}"
+            {% if run.ipfs_cid %}
+            <a href="https://ipfs.io/ipfs/{{ run.ipfs_cid }}"
                target="_blank"
                class="text-gray-400 hover:text-white text-sm">
-                IPFS: {{ run.output_ipfs_cid[:16] }}...
+                IPFS: {{ run.ipfs_cid[:16] }}...
             </a>
             {% endif %}
         </div>