diff --git a/src/pages/boxers/[id].astro b/src/pages/boxers/[id].astro
index 0d46e016f..be2001cae 100644
--- a/src/pages/boxers/[id].astro
+++ b/src/pages/boxers/[id].astro
@@ -19,19 +19,13 @@ const [boxer] = BOXERS.filter((boxer) => boxer.id === id)
 >
 	<main class="flex flex-col items-center">
 		<div class="w-full lg:flex lg:items-center">
-			<picture
-				class:list={"boxer-photo h-auto w-[400px] object-contain"}
-				transition:name="boxer-big-image"
-			>
-				<source srcset="/img/boxers/el-mariana-big.avif" type="image/avif" />
+			<picture class="boxer-photo h-auto w-[400px]" transition:name="boxer-big-image">
+				<source srcset={`/img/boxers/${id}-big.avif`} type="image/avif" />
 				<img
 					class="aspect-[285/428] h-auto w-full"
-					alt="Fotografía de El Mariana"
-					src="/img/boxers/el-mariana-big.webp"
-					style="
-						filter: drop-shadow(0 0 20px rgba(0, 0, 0, .5));
-						mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
-					"
+					alt={`Fotografía de ${boxer.name}`}
+					src={`/img/boxers/${id}-big.webp`}
+					style="filter: drop-shadow(0 0 20px rgba(0, 0, 0, .5)); mask-image: linear-gradient(to bottom, black 80%, transparent 100%);"
 				/>
 			</picture>
 			<div class="w-full px-10 text-center lg:mx-auto lg:w-1/2 lg:text-left">
diff --git a/src/sections/SelectYourBoxer.astro b/src/sections/SelectYourBoxer.astro
index fc67f187e..58f9ae3bb 100644
--- a/src/sections/SelectYourBoxer.astro
+++ b/src/sections/SelectYourBoxer.astro
@@ -8,8 +8,6 @@ const listOfBoxers = BOXERS.map((boxer) => {
 	const countryName = COUNTRIES[country]?.name || ""
 	return { ...boxer, countryName }
 })
-
-const msFadeLuchador = 150
 ---
 
 <section class="my-40">
@@ -28,10 +26,7 @@ const msFadeLuchador = 150
 	</Typography>
 
 	<div class="flex flex-col items-center justify-center gap-8">
-		<article
-			class="relative flex w-full flex-col items-center justify-center"
-			style="view-transition-name: boxer;"
-		>
+		<article class="relative flex w-full flex-col items-center justify-center">
 			<header class="relative flex w-full flex-col items-center justify-center">
 				<div
 					class="absolute inset-0 -z-20 m-auto bg-center bg-no-repeat"
@@ -43,12 +38,12 @@ const msFadeLuchador = 150
 				>
 				</div>
 				<picture
-					class:list={"boxer-photo h-auto w-[400px] object-contain"}
+					class:list={"boxer-photo aspect-[285/428] h-auto w-[400px]"}
 					transition:name="boxer-big-image"
 				>
 					<source srcset="/img/boxers/el-mariana-big.avif" type="image/avif" />
 					<img
-						class="aspect-[285/428] h-auto w-full"
+						class="aspect-[285/428] h-auto w-full object-contain"
 						alt="Fotografía de El Mariana"
 						src="/img/boxers/el-mariana-big.webp"
 						style="
@@ -70,7 +65,7 @@ const msFadeLuchador = 150
 				</div>
 
 				<img
-					class:list={`boxer-flag pointer-events-none aspect-[3/2] h-auto w-20 object-contain object-center transition duration-[${msFadeLuchador}] 3xl:w-24`}
+					class:list={"boxer-flag pointer-events-none aspect-[3/2] h-auto w-20 object-contain object-center 3xl:w-24"}
 					alt="Bandera de México"
 					src="/img/flags/mx.webp"
 				/>
@@ -78,14 +73,14 @@ const msFadeLuchador = 150
 
 			<footer
 				id="boxer-footer"
-				class="absolute bottom-0 hidden w-full justify-between text-center text-white transition duration-200 xl:flex"
+				class="absolute bottom-0 hidden w-full justify-between text-center text-white xl:flex"
 			>
 				<div class="flex flex-col gap-y-2">
 					<h4 class="text-lg">País</h4>
 					<p id="boxer-country" class="text-lg font-bold">México</p>
 					<a
 						href="#"
-						class="mt-10 inline-block font-semibold text-accent transition hover:scale-110"
+						class="mt-10 inline-block font-semibold text-accent transition-transform hover:scale-110"
 					>
 						Ver combate
 					</a>
@@ -93,10 +88,10 @@ const msFadeLuchador = 150
 
 				<div class="flex flex-col gap-y-2">
 					<h4 class="text-lg">Peso</h4>
-					<p id="boxer-weight" class="text-lg font-bold">87</p>
+					<p id="boxer-weight" class="text-lg font-bold">87kg</p>
 					<a
 						href="#"
-						class="mt-10 inline-block font-semibold text-accent transition hover:scale-110"
+						class="mt-10 inline-block font-semibold text-accent transition-transform hover:scale-110"
 					>
 						Ver perfil
 					</a>
@@ -104,7 +99,6 @@ const msFadeLuchador = 150
 			</footer>
 		</article>
 		<aside class="boxers-aside">
-			<div class="blur"><div class="clip-black"></div></div>
 			<nav class="boxers-nav">
 				{
 					listOfBoxers.map(({ id, name, country, countryName, weight }, index) => (
@@ -119,14 +113,12 @@ const msFadeLuchador = 150
 							data-weight={weight}
 						>
 							<div class="boxer-link-background" />
-							<picture class="boxer-image">
-								<img
-									loading="lazy"
-									src={`/img/boxers/${id}-small.webp`}
-									alt={`Foto en pequeño del boxeador ${name}`}
-									class="boxer-image"
-								/>
-							</picture>
+							<img
+								loading="lazy"
+								src={`/img/boxers/${id}-small.webp`}
+								alt={`Foto en pequeño del boxeador ${name}`}
+								class="boxer-image aspect-square h-full w-full object-contain"
+							/>
 						</a>
 					))
 				}
@@ -137,7 +129,7 @@ const msFadeLuchador = 150
 
 <script>
 	document.addEventListener("astro:page-load", () => {
-		const boxerLinks = document.querySelectorAll(".boxer-link")
+		const boxerLinks = document.querySelectorAll(".boxer-link") as NodeListOf<HTMLAnchorElement>
 		const boxerNav = document.querySelector(".boxers-nav")
 		const boxerTitle = document.querySelector(".boxer-title") as HTMLImageElement
 		const boxerPhoto = document.querySelector(".boxer-photo") as HTMLPictureElement
@@ -146,29 +138,44 @@ const msFadeLuchador = 150
 		const boxerCountryElement = document.getElementById("boxer-country") as HTMLElement
 		const boxerWeightElement = document.getElementById("boxer-weight") as HTMLElement
 
-		boxerLinks.forEach((link) => {
-			link.addEventListener("mouseenter", (event) => {
-				const currentTarget = event.currentTarget as HTMLElement
-				if (currentTarget.classList.contains("active")) return
+		function activateBoxer(element: HTMLElement, link: HTMLElement, replaceUrl: boolean = false) {
+			if (element.classList.contains("active")) return
+
+			const { id, name, country, countryName, weight } = element?.dataset
 
-				const { id, name, country, countryName, weight } = currentTarget?.dataset
+			boxerNav?.querySelector(".active")?.classList.remove("active")
+			link.classList.add("active")
+			if (replaceUrl) {
+				history.replaceState({}, "", `?boxer=${id}`)
+			}
 
-				boxerNav?.querySelector(".active")?.classList.remove("active")
-				link.classList.add("active")
+			const boxerSrc = `/img/boxers/${id}-big`
 
-				const boxerSrc = `/img/boxers/${id}-big`
+			boxerPhoto.getElementsByTagName("source")[0].srcset = `${boxerSrc}.avif`
+			boxerPhoto.getElementsByTagName("img")[0].src = `${boxerSrc}.webp`
+			boxerTitle.innerText = name?.toLocaleLowerCase() ?? ""
+			boxerCountry.src = `/img/flags/${country}.webp`
 
-				boxerPhoto.getElementsByTagName("source")[0].srcset = `${boxerSrc}.avif`
-				boxerPhoto.getElementsByTagName("img")[0].src = `${boxerSrc}.webp`
-				boxerTitle.innerText = name?.toLocaleLowerCase() ?? ""
-				boxerCountry.src = `/img/flags/${country}.webp`
+			boxerPhoto.getElementsByTagName("img")[0].alt = `Fotografía de ${name}`
+			boxerCountry.alt = `Bandera de ${countryName}`
 
-				boxerPhoto.getElementsByTagName("img")[0].alt = `Fotografía de ${name}`
-				boxerCountry.alt = `Bandera de ${countryName}`
+			boxerCountryElement.innerText = countryName ?? ""
+			boxerWeightElement.innerText = weight ? `${weight}kg` : "?"
+			boxerFooter.style.display = "flex"
+		}
+
+		const urlParams = new URLSearchParams(window.location.search)
+		const boxerId = urlParams.get("boxer") ?? "el-mariana"
+		const boxerEl = document.querySelector(`[data-id="${boxerId}"]`) as HTMLElement
+		if (boxerEl) {
+			activateBoxer(boxerEl, boxerEl, false)
+		}
 
-				boxerCountryElement.innerText = countryName ?? ""
-				boxerWeightElement.innerText = weight ?? ""
-				boxerFooter.style.display = "flex"
+		boxerLinks.forEach((link) => {
+			link.addEventListener("mouseenter", (event) => {
+				const currentTarget = event.currentTarget as HTMLElement
+				if (currentTarget.classList.contains("active")) return
+				activateBoxer(currentTarget, link, true)
 			})
 		})
 	})
@@ -225,22 +232,22 @@ const msFadeLuchador = 150
 	.boxer-image {
 		object-fit: contain;
 		z-index: 2;
-		transition: all 0.3s ease-in-out;
-		height: 100%;
+		transition: transform 0.3s ease-in-out;
 		mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
 	}
 
-	.boxer-link:hover .boxer-image {
-		transform: scale(1.05);
-	}
 	.boxer-link .boxer-image {
 		filter: grayscale(100%);
 		transition: filter 0.3s ease;
 	}
 
+	.boxer-link:hover .boxer-image,
 	.boxer-link.active .boxer-image {
+		transform: scale(1.05);
 		filter: grayscale(0%);
 	}
+
+	.boxer-link.active .boxer-link-background,
 	.boxer-link:hover .boxer-link-background {
 		filter: brightness(0.5);
 	}
@@ -264,15 +271,5 @@ const msFadeLuchador = 150
 			@apply flex items-center justify-center;
 			width: 100%;
 		}
-
-		.boxer-image {
-			@apply h-full;
-		}
-	}
-
-	@media (max-width: 1650px) {
-		.boxers-aside.up {
-			margin-top: -15rem;
-		}
 	}
 </style>