diff --git a/src/ChatDisplay.svelte b/src/ChatDisplay.svelte
index f81e186..dcad84a 100644
--- a/src/ChatDisplay.svelte
+++ b/src/ChatDisplay.svelte
@@ -13,12 +13,14 @@
   };
 
   // Generating a unique color for each speaker
-  const speakerColors = {};
+  let speakerColors = {};
+
   messages.forEach((msg) => {
-    if (!speakerColors[msg.speaker]) {
-      speakerColors[msg.speaker] = `hsl(${Math.floor(Math.random() * 360)}, 70%, 60%)`;
-    }
+    speakerColors[msg.speaker] = `hsl(${Math.floor(Math.random() * 360)}, 70%, 60%)`;
   });
+
+  $: console.log(speakerColors);
+
 </script>
 
 <style>
@@ -42,11 +44,18 @@
   }
 </style>
 
+
 <div class="chat-container">
   {#each messages as { speaker, text }, index}
-    <div class="message {getSpeakerSide(index)}"
-         style="background-color: {speakerColors[speaker]};">
-      <strong>{speaker}:</strong> {text}
-    </div>
+    {#await speakerColors[speaker]}
+      <p>Loading...</p>
+    {:then color}
+      <div class="message {getSpeakerSide(index)}" style="background-color:{color};">
+        <strong>{speaker}:</strong> {text}
+      </div>
+    {:catch error}
+      <p>Error: {error.message}</p>
+    {/await}
   {/each}
 </div>
+
diff --git a/src/Debate.svelte b/src/Debate.svelte
index 43e1e8f..951caf8 100644
--- a/src/Debate.svelte
+++ b/src/Debate.svelte
@@ -20,10 +20,28 @@
     const response = await fetch(`/debates/transcriptions/${params.slug}.json`);
     transcripts = await response.json();
   }
+    
+  // Async function to assemble video
+  async function assembleVideo() {
+    const video = document.getElementById('video');
+    if (Hls.isSupported()) {
+      const hls = new Hls({
+        xhrSetup: function(xhr, url) {
+          // Apply headers from debateData to the request, only if they exist
+          if (debateData.headers) {
+            Object.keys(debateData.headers).forEach(header => {
+              xhr.setRequestHeader(header, debateData.headers[header]);
+            });
+          }
+        }
+      });
+      hls.loadSource(debateData.m3u8_url);
+      hls.attachMedia(video);
+    }
+  }
 
   onMount(async () => {
     await fetchDebateData();
-    await fetchTranscripts();
 
     const video = document.getElementById('video');
     if (Hls.isSupported()) {
@@ -67,6 +85,11 @@
 
 <a href={debateData.original_url} target="_blank">Link para o vídeo original</a>
 
-<ChatDisplay messages={transcripts} />
+{#await fetchTranscripts()}
+{:then}
+  <ChatDisplay messages={transcripts} />
+{:catch}
+  <p>Erro ao carregar transcrições</p>
+{/await}
 
 <a href="/">Voltar à página inicial</a>