diff --git a/src/lib/BattleRank.svelte b/src/lib/BattleRank.svelte
index 1121535..48d2c9a 100644
--- a/src/lib/BattleRank.svelte
+++ b/src/lib/BattleRank.svelte
@@ -4,7 +4,7 @@
 
 	let { rank, ...rest }: { rank: number } & HTMLAttributes<HTMLDivElement> = $props();
 
-	const [xOffset, yOffset] = imageOffset(rank);
+	const [xOffset, yOffset] = $derived(imageOffset(rank));
 </script>
 
 <div {...rest}>
diff --git a/src/lib/GameVersion.svelte b/src/lib/GameVersion.svelte
index f909efc..12e82ae 100644
--- a/src/lib/GameVersion.svelte
+++ b/src/lib/GameVersion.svelte
@@ -5,7 +5,7 @@
 
 	let { version, ...rest }: { version: string } & HTMLAttributes<HTMLImageElement> = $props();
 
-	const { minor } = fromVersionString(version);
+	const { minor } = $derived(fromVersionString(version));
 </script>
 
 <img src="/versions/{gameVersions[minor.toString()]}" alt={version} {...rest} />
diff --git a/src/lib/Rating.svelte b/src/lib/Rating.svelte
index 80e97c5..6c897a1 100644
--- a/src/lib/Rating.svelte
+++ b/src/lib/Rating.svelte
@@ -4,8 +4,8 @@
 
 	let { rating }: { rating: number } = $props();
 
-	const characters = rating.toString().padStart(4, '0');
-	const type = ratingType(rating);
+	const characters = $derived(rating.toString().padStart(4, '0'));
+	const type = $derived(ratingType(rating));
 </script>
 
 <div class="flex items-center">
diff --git a/src/lib/RatingCharacter.svelte b/src/lib/RatingCharacter.svelte
index 1f4e881..6a67fbd 100644
--- a/src/lib/RatingCharacter.svelte
+++ b/src/lib/RatingCharacter.svelte
@@ -8,7 +8,7 @@
 		...rest
 	}: { character: number | '.'; type: number } & HTMLAttributes<HTMLDivElement> = $props();
 
-	const [xOffset, yOffset] = imageOffset(character, type);
+	const [xOffset, yOffset] = $derived(imageOffset(character, type));
 </script>
 
 <div {...rest}>