diff --git a/auth.config.js b/auth.config.js
index 644cbe648..0cf131696 100644
--- a/auth.config.js
+++ b/auth.config.js
@@ -1,12 +1,11 @@
-import Twitch from "@auth/core/providers/twitch"
 import { defineConfig } from "auth-astro"
 
 export default defineConfig({
 	providers: [
-		Twitch({
-			clientId: import.meta.env.TWITCH_CLIENT_ID,
-			clientSecret: import.meta.env.TWITCH_CLIENT_SECRET,
-		}),
+		// Twitch({
+		// 	clientId: import.meta.env.TWITCH_CLIENT_ID,
+		// 	clientSecret: import.meta.env.TWITCH_CLIENT_SECRET,
+		// }),
 	],
 	callbacks: {
 		session: ({ session, token }) => ({
diff --git a/src/components/Velocimetro.astro b/src/components/Velocimetro.astro
index 22aff2152..966d34a24 100644
--- a/src/components/Velocimetro.astro
+++ b/src/components/Velocimetro.astro
@@ -1,8 +1,14 @@
-<canvas id="velocimeter" width="500px" height="260px" class="w-full md:w-[500px]"></canvas>
+---
+const { id } = Astro.props
+---
 
-<script>
-	import { $ } from "@/lib/dom-selector"
+<canvas
+	id={`velocimeter-${id}`}
+	width="500px"
+	height="260px"
+	class="velocimeter w-full md:w-[500px]"></canvas>
 
+<script define:vars={{ id }}>
 	const COLORS = {
 		"accent": "#b4cd02",
 		"white": "#fff",
@@ -10,7 +16,7 @@
 	}
 
 	document.addEventListener("astro:page-load", () => {
-		const canvas = $("#velocimeter") as HTMLCanvasElement
+		const canvas = document.querySelector(`#velocimeter-${id}`)
 		if (!canvas) return
 		const ctx = canvas.getContext("2d")
 
@@ -22,7 +28,7 @@
 			drawVelocimeter(velocimeterValue)
 		}
 
-		function drawVelocimeter(value: number) {
+		function drawVelocimeter(value) {
 			if (!ctx) return
 
 			const centerX = canvas.width / 2
@@ -95,8 +101,12 @@
 		updateVelocimeter()
 
 		window.addEventListener("forecast:loaded", (event) => {
-			const { detail } = event as CustomEvent<string>
-			canvas.setAttribute("data-percentage", detail)
+			const { detail } = event
+			const { combatId, percentage } = detail
+
+			if (combatId !== id) return
+
+			canvas.setAttribute("data-percentage", percentage)
 			updateVelocimeter()
 		})
 	})
diff --git a/src/consts/forecasts.ts b/src/consts/forecasts.ts
deleted file mode 100644
index a6775ff86..000000000
--- a/src/consts/forecasts.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import type { Forecast } from "@/types/Forecast"
-
-export const FORECASTS: Forecast[] = [
-	{
-		combatId: "1-agustin-51-vs-carreraaa",
-		forecastData: [
-			{
-				boxerId: "carreraaa",
-				forecast: 0.7,
-				predictionsCount: 70,
-			},
-			{
-				boxerId: "agustin-51",
-				forecast: 0.3,
-				predictionsCount: 30,
-			},
-		],
-	},
-	{
-		combatId: "2",
-		forecastData: [
-			{
-				boxerId: "guanyar",
-				forecast: 0.8,
-				predictionsCount: 80,
-			},
-			{
-				boxerId: "la-cobra",
-				forecast: 0.2,
-				predictionsCount: 20,
-			},
-		],
-	},
-	{
-		combatId: "4",
-		forecastData: [
-			{
-				boxerId: "shelao",
-				forecast: 0.9,
-				predictionsCount: 90,
-			},
-			{
-				boxerId: "viruzz",
-				forecast: 0.1,
-				predictionsCount: 10,
-			},
-		],
-	},
-	{
-		combatId: "6",
-		forecastData: [
-			{
-				boxerId: "plex",
-				forecast: 0.4,
-				predictionsCount: 40,
-			},
-			{
-				boxerId: "el-mariana",
-				forecast: 0.6,
-				predictionsCount: 60,
-			},
-		],
-	},
-]
diff --git a/src/pages/api/votes/[combatId].ts b/src/pages/api/votes/[combatId].ts
index 3ffc932c8..da9442cbd 100644
--- a/src/pages/api/votes/[combatId].ts
+++ b/src/pages/api/votes/[combatId].ts
@@ -1,9 +1,5 @@
 import type { APIRoute } from "astro"
-import { NOW, Votes, db } from "astro:db"
-import { getSession } from "auth-astro/server"
-import { object, safeParse, string } from "valibot"
-
-import { COMBATS } from "@/consts/combats"
+import { object, string } from "valibot"
 
 const VoteSchema = object({
 	voteId: string(),
@@ -17,56 +13,58 @@ const res = (
 	{ status, statusText, headers }: { status?: number; statusText?: string; headers?: Headers }
 ) => new Response(body, { status, statusText, headers })
 
-export const POST: APIRoute = async ({ params, request }) => {
-	const session = await getSession(request)
-
-	if (!session || session?.user?.email == null) {
-		return res("Unauthorized", { status: 401 })
-	}
-
-	const { combatId } = params
-	if (!combatId) return res("CombatId is required", { status: 400 })
-
-	const combatData = COMBATS.find((c) => c.id === combatId)
-	if (!combatData) return res("Combat not found", { status: 404 })
-
-	const { success, output } = safeParse(VoteSchema, await request.json())
-	if (!success) return res("Bad request", { status: 400 })
-
-	const { voteId } = output
-	let boxerData: string | undefined
-	if (combatData.teams !== undefined) {
-		boxerData = combatData.teams.find((t) => t === voteId)
-	} else {
-		boxerData = combatData.boxers.find((b) => b === voteId)
-	}
-	if (!boxerData) return res("Boxer not found", { status: 404 })
-
-	const userId = session.user.id
-
-	if (userId === undefined) {
-		return res("Unauthorized", { status: 401 })
-	}
-
-	const votedAt = NOW
-
-	const newId = `${userId}-${combatId}`
-	const vote = { id: newId, userId, votedAt, voteId, combatId }
-
-	try {
-		await db.insert(Votes).values(vote).onConflictDoUpdate({
-			target: Votes.id,
-			set: {
-				combatId,
-				userId,
-				voteId,
-				votedAt,
-			},
-		})
-	} catch (error) {
-		console.error(error)
-		return res("Error inserting vote", { status: 500 })
-	}
-
-	return res("OK", { status: 200 })
+export const POST: APIRoute = ({ params, request }) => {
+	return res("Unauthorized", { status: 401 })
+
+	// const session = await getSession(request)
+
+	// if (!session || session?.user?.email == null) {
+	// 	return res("Unauthorized", { status: 401 })
+	// }
+
+	// const { combatId } = params
+	// if (!combatId) return res("CombatId is required", { status: 400 })
+
+	// const combatData = COMBATS.find((c) => c.id === combatId)
+	// if (!combatData) return res("Combat not found", { status: 404 })
+
+	// const { success, output } = safeParse(VoteSchema, await request.json())
+	// if (!success) return res("Bad request", { status: 400 })
+
+	// const { voteId } = output
+	// let boxerData: string | undefined
+	// if (combatData.teams !== undefined) {
+	// 	boxerData = combatData.teams.find((t) => t === voteId)
+	// } else {
+	// 	boxerData = combatData.boxers.find((b) => b === voteId)
+	// }
+	// if (!boxerData) return res("Boxer not found", { status: 404 })
+
+	// const userId = session.user.id
+
+	// if (userId === undefined) {
+	// 	return res("Unauthorized", { status: 401 })
+	// }
+
+	// const votedAt = NOW
+
+	// const newId = `${userId}-${combatId}`
+	// const vote = { id: newId, userId, votedAt, voteId, combatId }
+
+	// try {
+	// 	await db.insert(Votes).values(vote).onConflictDoUpdate({
+	// 		target: Votes.id,
+	// 		set: {
+	// 			combatId,
+	// 			userId,
+	// 			voteId,
+	// 			votedAt,
+	// 		},
+	// 	})
+	// } catch (error) {
+	// 	console.error(error)
+	// 	return res("Error inserting vote", { status: 500 })
+	// }
+
+	// return res("OK", { status: 200 })
 }
diff --git a/src/pages/pronosticos.astro b/src/pages/pronosticos.astro
index 1e11d2701..9bd1e6cec 100644
--- a/src/pages/pronosticos.astro
+++ b/src/pages/pronosticos.astro
@@ -1,11 +1,8 @@
 ---
-import { getSession } from "auth-astro/server"
-
-import Intro from "@/components/Pronosticos/Intro.astro"
-import Vote from "@/components/Pronosticos/Vote.astro"
 import Layout from "@/layouts/Layout.astro"
 
-const session = await getSession(Astro.request)
+import { COMBATS } from "@/consts/combats"
+import Forecasts from "@/sections/Forecasts.astro"
 ---
 
 <Layout
@@ -13,6 +10,6 @@ const session = await getSession(Astro.request)
 	description="¡Participa votando a los boxeadores que crees que ganarán sus combates!"
 >
 	<main class="flex flex-col items-center justify-center text-white">
-		{session === null ? <Intro /> : <Vote user={session.user} />}
+		{COMBATS.map((combat) => <Forecasts combatId={combat.id} />)}
 	</main>
 </Layout>
diff --git a/src/pages/pronosticos.astro copy.old b/src/pages/pronosticos.astro copy.old
new file mode 100644
index 000000000..1e11d2701
--- /dev/null
+++ b/src/pages/pronosticos.astro copy.old	
@@ -0,0 +1,18 @@
+---
+import { getSession } from "auth-astro/server"
+
+import Intro from "@/components/Pronosticos/Intro.astro"
+import Vote from "@/components/Pronosticos/Vote.astro"
+import Layout from "@/layouts/Layout.astro"
+
+const session = await getSession(Astro.request)
+---
+
+<Layout
+	title="Pronostica los ganadores - La Velada del Año IV"
+	description="¡Participa votando a los boxeadores que crees que ganarán sus combates!"
+>
+	<main class="flex flex-col items-center justify-center text-white">
+		{session === null ? <Intro /> : <Vote user={session.user} />}
+	</main>
+</Layout>
diff --git a/src/sections/Forecasts.astro b/src/sections/Forecasts.astro
index cace2631a..ae0941938 100644
--- a/src/sections/Forecasts.astro
+++ b/src/sections/Forecasts.astro
@@ -1,5 +1,4 @@
 ---
-import Action from "@/components/Action.astro"
 import ForecastBoxer from "@/components/ForecastBoxer.astro"
 import Velocimetro from "@/components/Velocimetro.astro"
 import { BOXERS } from "@/consts/boxers"
@@ -17,9 +16,8 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 
 {
 	combatId === REY_DE_LA_PISTA_ID && <section
-			id="forecast"
 			data-combat-id={combatId}
-			class="forecastGrid mt-40 flex flex-col items-center gap-4 px-7"
+			class="forecast forecastGrid mt-40 flex flex-col items-center gap-4 px-7"
 		>
 			<div class="pronostico flex flex-col items-center justify-center gap-4">
 				<h2 class="text-2xl font-medium uppercase text-white">Pronóstico</h2>
@@ -42,7 +40,7 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 			))}
 			</div>
 
-			<div class="action flex w-full flex-col items-center justify-center">
+			{/* <div class="action flex w-full flex-col items-center justify-center">
 				<Action
 					class="mt-20 w-full max-w-lg text-center text-base uppercase text-primary"
 					as="a"
@@ -50,15 +48,14 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 				>
 					¡Haz tu pronóstico!
 				</Action>
-			</div>
+			</div> */}
 	</section>
 }
 
 { combatId === "3-zeling-y-nissaxter-vs-alana-y-ama-blitz" && (
 	<section
-		id="forecast"
 		data-combat-id={combatId}
-		class="forecastGrid mt-40 grid items-center gap-4 px-7"
+		class="forecast forecastGrid mt-40 grid items-center gap-4 px-7"
 	>
 
 		<ForecastBoxer
@@ -75,7 +72,7 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 			<p class="max-w-72 text-center text-xl text-primary opacity-0">
 				Basado en <span class="font-semibold text-accent">0</span> predicciones
 			</p>
-			<Velocimetro />
+			<Velocimetro id={combatId} />
 		</div>
 
 			<ForecastBoxer
@@ -87,7 +84,7 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 				class:list={["boxer2"]}
 			/>
 
-		<div class="action flex w-full flex-col items-center justify-center">
+		{/* <div class="action flex w-full flex-col items-center justify-center">
 			<Action
 				class="mt-20 w-full max-w-lg text-center text-base uppercase text-primary"
 				as="a"
@@ -95,15 +92,14 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 			>
 				¡Haz tu pronóstico!
 			</Action>
-		</div>
+		</div> */}
 	</section>
 )}
 
 { combatId !== REY_DE_LA_PISTA_ID && combatId !== "3-zeling-y-nissaxter-vs-alana-y-ama-blitz" && (
 		<section
-			id="forecast"
 			data-combat-id={combatId}
-			class="forecastGrid mt-40 grid items-center gap-4 px-7"
+			class="forecast forecastGrid mt-40 grid items-center gap-4 px-7"
 		>
 			{boxers[0] && (
 				<ForecastBoxer
@@ -120,7 +116,7 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 				<p class="max-w-72 text-center text-xl text-primary opacity-0">
 					Basado en <span class="font-semibold text-accent">0</span> predicciones
 				</p>
-				{boxers[1] && <Velocimetro />}
+				{boxers[1] && <Velocimetro id={combatId} />}
 			</div>
 			{boxers[1] && (
 				<ForecastBoxer
@@ -132,7 +128,7 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 					class:list={["boxer2"]}
 				/>
 			)}
-			<div class="action flex w-full flex-col items-center justify-center">
+			{/* <div class="action flex w-full flex-col items-center justify-center">
 				<Action
 					class="mt-20 w-full max-w-lg text-center text-base uppercase text-primary"
 					as="a"
@@ -140,54 +136,55 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 				>
 					¡Haz tu pronóstico!
 				</Action>
-			</div>
+			</div> */}
 		</section>
 	)
 }
 
 <script>
-	import { $ } from "@/lib/dom-selector"
+	import { $, $$ } from "@/lib/dom-selector"
 
 	document.addEventListener("astro:page-load", () => {
-		const $forecast = $("#forecast") as HTMLElement
-		if ($forecast == null) return
+		const $allForecasts = $$(".forecast") as NodeListOf<HTMLElement>
+		if ($allForecasts.length === 0) return
 
-		const combatId = $forecast.getAttribute("data-combat-id")
-		fetch(`/api/forecasts/get-forecast-by-combat-id.json?id=${combatId}`)
-			.then((res) => res.json())
-			.then((json: { data: { totalVotes: number; percentageVotes: Record<string, number> } }) => {
-				const { totalVotes, percentageVotes } = json?.data ?? {}
-				console.log({ totalVotes, percentageVotes })
+		$allForecasts.forEach(($forecast) => {
+			const combatId = $forecast.getAttribute("data-combat-id")
+			fetch(`/api/forecasts/get-forecast-by-combat-id.json?id=${combatId}`)
+				.then((res) => res.json())
+				.then((json: { data: { totalVotes: number; percentageVotes: Record<string, number> } }) => {
+					const { totalVotes, percentageVotes } = json?.data ?? {}
 
-				if (totalVotes == null || totalVotes === 0) return
+					if (totalVotes == null || totalVotes === 0) return
 
-				const allBoxers = $forecast.querySelectorAll(".boxer-forecast")
+					const allBoxers = $forecast.querySelectorAll(".boxer-forecast")
 
-				const isKingOfTheHill = allBoxers.length > 4
+					const isKingOfTheHill = allBoxers.length > 4
 
-				if (!isKingOfTheHill) {
-					const [, lastBoxer] = $forecast.querySelectorAll(".boxer-forecast")
-					const lastBoxerId = lastBoxer.getAttribute("data-id")
-					if (lastBoxerId == null) return
+					if (!isKingOfTheHill) {
+						const [, lastBoxer] = $forecast.querySelectorAll(".boxer-forecast")
+						const lastBoxerId = lastBoxer.getAttribute("data-id")
+						if (lastBoxerId == null) return
 
-					const percentage = percentageVotes[lastBoxerId]
-					if (percentage) {
-						const event = new CustomEvent("forecast:loaded", { detail: percentage })
-						dispatchEvent(event)
+						const percentage = percentageVotes[lastBoxerId]
+						if (percentage) {
+							const event = new CustomEvent("forecast:loaded", { detail: { combatId, percentage } })
+							dispatchEvent(event)
+						}
 					}
-				}
 
-				const $pronostico = $forecast.querySelector(".pronostico") as HTMLElement
-				$pronostico.querySelector(".opacity-0")?.classList.remove("opacity-0")
+					const $pronostico = $forecast.querySelector(".pronostico") as HTMLElement
+					$pronostico.querySelector(".opacity-0")?.classList.remove("opacity-0")
 
-				const $pronosticoNumber = $pronostico.querySelector("span")
-				if ($pronosticoNumber) $pronosticoNumber.innerText = totalVotes.toString()
+					const $pronosticoNumber = $pronostico.querySelector("span")
+					if ($pronosticoNumber) $pronosticoNumber.innerText = totalVotes.toString()
 
-				Object.entries(percentageVotes).forEach(([boxerId, forecast]) => {
-					const el = $(`.boxer-forecast[data-id="${boxerId}"]`)
-					if (el) el.innerText = `${forecast.toFixed(2)}%`
+					Object.entries(percentageVotes).forEach(([boxerId, forecast]) => {
+						const el = $(`.boxer-forecast[data-id="${boxerId}"]`)
+						if (el) el.innerText = `${forecast.toFixed(2)}%`
+					})
 				})
-			})
+		})
 	})
 </script>