diff --git a/src/Debate.svelte b/src/Debate.svelte
new file mode 100644
index 0000000..f9fa73c
--- /dev/null
+++ b/src/Debate.svelte
@@ -0,0 +1,70 @@
+<script>
+  import { onMount } from 'svelte';
+  import Hls from 'hls.js';
+
+  export let slug; // The slug is passed as a prop
+
+  let debateData = {}; // Initialize debateData
+  let transcripts = []; // Initialize transcripts
+  let subtitlesUrl = `/static/debates/transcripts/${slug}.vtt`;
+
+  // Async function to fetch debate data including video URL and headers
+  async function fetchDebateData() {
+    const response = await fetch(`/static/debates/${slug}.json`);
+    debateData = await response.json();
+  }
+
+  // Async function to fetch transcripts
+  async function fetchTranscripts() {
+    const response = await fetch(`/static/debates/transcripts/${slug}.json`);
+    transcripts = await response.json();
+  }
+
+  onMount(async () => {
+    await fetchDebateData();
+    await fetchTranscripts();
+
+    const video = document.getElementById('video');
+    if (Hls.isSupported()) {
+      const hls = new Hls({
+        xhrSetup: function(xhr, url) {
+          // Apply headers from debateData to the request
+          Object.keys(debateData.headers).forEach(header => {
+            xhr.setRequestHeader(header, debateData.headers[header]);
+          });
+        }
+      });
+      hls.loadSource(debateData.videoUrl);
+      hls.attachMedia(video);
+    }
+  });
+</script>
+
+<style>
+  .transcript {
+    margin-top: 20px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    overflow-y: scroll;
+    height: 300px;
+  }
+  .message {
+    margin-bottom: 15px;
+  }
+  .speaker {
+    font-weight: bold;
+  }
+</style>
+
+<video id="video" controls>
+  <track label="Português" kind="subtitles" srclang="pt" src={subtitlesUrl} default>
+</video>
+
+<div class="transcript">
+  {#each transcripts as { speaker, time, text }}
+    <div class="message">
+      <div class="speaker">{speaker}:</div>
+      <div class="text">{text}</div>
+    </div>
+  {/each}
+</div>