diff --git a/src/pages/GenerationPage.tsx b/src/pages/GenerationPage.tsx
index 02875f13b..210deafb6 100644
--- a/src/pages/GenerationPage.tsx
+++ b/src/pages/GenerationPage.tsx
@@ -263,7 +263,12 @@ export default function GenerationPage() {
       if (activeModule !== "listening") return;
       const st = getModuleState("listening");
       const sections = [...st.listeningSections];
-      sections[vars.sectionIndex] = { ...sections[vars.sectionIndex], audioUrl: res.audio_url || "" };
+      let url = res.audio_url || "";
+      if (!url && res.audio_base64) {
+        const ct = res.content_type || "audio/mpeg";
+        url = `data:${ct};base64,${res.audio_base64}`;
+      }
+      sections[vars.sectionIndex] = { ...sections[vars.sectionIndex], audioUrl: url };
       updateModuleState("listening", { listeningSections: sections });
       toast({ title: "Audio generated" });
     },
@@ -648,7 +653,12 @@ export default function GenerationPage() {
                         {generateAudioMut.isPending ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : <Play className="h-3 w-3 mr-1" />}
                         Generate Audio
                       </Button>
-                      {sec.audioUrl && <p className="text-xs text-green-600 mt-1">Audio ready</p>}
+                      {sec.audioUrl && (
+                        <div className="mt-2 space-y-1">
+                          <p className="text-xs text-green-600">Audio ready</p>
+                          <audio controls src={sec.audioUrl} className="w-full h-8" />
+                        </div>
+                      )}
                     </CollapsibleContent>
                   </Collapsible>
                 </CardContent>