diff --git a/web/src/routes/Screenshots.svelte b/web/src/routes/Screenshots.svelte
index e9a4238..86d4b46 100644
--- a/web/src/routes/Screenshots.svelte
+++ b/web/src/routes/Screenshots.svelte
@@ -8,18 +8,18 @@
 		{alt: "service overview", src: `${base}/images/service-overview.webp`},
 	]
 
-	const nextIdx = i => ((i + 1) % carouselImages.length);
-	const prevIdx = i => (carouselImages - i)
+	const len = carouselImages.length;
+	const modIdx = i => (1 + (i + len) % len);
 </script>
 
 <div class="mockup-window rounded-xl bg-base-200 w-auto h-fit shadow-lg shadow-secondary">
 	<div class="w-full carousel rounded-box">
 	{#each carouselImages as image, i}
-		<div id="img{1 + i}" class="carousel-item relative w-full">
+		<div id="img{modIdx(i)}" class="carousel-item relative w-full">
 			<img src={image.src} class="w-full" alt={image.alt} />
 			<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
-				<a href="#img{1 + prevIdx(i)}" class="btn btn-circle">❮</a>
-				<a href="#img{1 + nextIdx(i)}" class="btn btn-circle">❯</a>
+				<a href="#img{modIdx(i - 1)}" class="btn btn-circle">❮</a>
+				<a href="#img{modIdx(i + 1)}" class="btn btn-circle">❯</a>
 			</div>
 		</div>
 	{/each}