diff --git a/www/app/components/record.js b/www/app/components/record.js
index 44de590e..c47a2edd 100644
--- a/www/app/components/record.js
+++ b/www/app/components/record.js
@@ -106,8 +106,46 @@ export default function Recorder(props) {
 
   useEffect(() => {
     topicsRef.current = props.topics;
+    if (!isRecording) renderMarkers();
   }, [props.topics]);
 
+  const renderMarkers = () => {
+    if (!waveRegions) return;
+
+    waveRegions.clearRegions();
+    for (let topic of topicsRef.current) {
+      const content = document.createElement("div");
+      content.style = `
+        border-left: solid 1px orange;
+        padding: 0 2px;
+        font-size: 0.7rem;
+        max-width: 100px;
+        width: max-content;
+        cursor: pointer;
+        background-color: white;
+        border-radius: 0 3px 3px 0;
+      `;
+      content.onmouseover = () => (content.style.backgroundColor = "orange");
+      content.onmouseout = () => (content.style.backgroundColor = "white");
+      content.textContent =
+        topic.title.length >= 20
+          ? topic.title.slice(0, 17) + "..."
+          : topic.title;
+
+      const region = waveRegions.addRegion({
+        start: topic.timestamp,
+        content,
+        color: "f00",
+        drag: false,
+      });
+      region.on("click", (e) => {
+        e.stopPropagation();
+        setActiveTopic(topic);
+        wavesurfer.setTime(region.start);
+      });
+    }
+  };
+
   useEffect(() => {
     if (record) {
       return record.on("stopRecording", () => {
@@ -115,39 +153,7 @@ export default function Recorder(props) {
         link.href = record.getRecordedUrl();
         link.download = "reflector-recording.webm";
         link.style.visibility = "visible";
-
-        for (let topic of topicsRef.current) {
-          const content = document.createElement("div");
-          content.style = `
-            border-left: solid 1px orange;
-            padding: 0 2px;
-            font-size: 0.7rem;
-            max-width: 100px;
-            width: max-content;
-            cursor: pointer;
-            background-color: white;
-            border-radius: 0 3px 3px 0;
-          `;
-          content.onmouseover = () =>
-            (content.style.backgroundColor = "orange");
-          content.onmouseout = () => (content.style.backgroundColor = "white");
-          content.textContent =
-            topic.title.length >= 20
-              ? topic.title.slice(0, 17) + "..."
-              : topic.title;
-
-          const region = waveRegions.addRegion({
-            start: topic.timestamp,
-            content,
-            color: "f00",
-            drag: false,
-          });
-          region.on("click", (e) => {
-            e.stopPropagation();
-            setActiveTopic(topic);
-            wavesurfer.setTime(region.start);
-          });
-        }
+        renderMarkers();
       });
     }
   }, [record]);