diff --git a/src/routes/(pages)/+page.svelte b/src/routes/(pages)/+page.svelte
index 3272f84..07e4b50 100644
--- a/src/routes/(pages)/+page.svelte
+++ b/src/routes/(pages)/+page.svelte
@@ -4,6 +4,7 @@
 	import { version } from '../../../package.json';
 	import { i18n } from '$lib/i18n';
 	import type { Snapshot } from '@sveltejs/kit';
+	import { fade } from 'svelte/transition';
 	const buildDate = import.meta.env.VITE_BUILD_DATE || '???';
 
 	let search = $state('');
@@ -214,9 +215,14 @@
 	<div class="tests">
 		{#each nonEmptyCategories as category}
 			{#if tests.filter((test) => test.categories.includes(category.id)).length > 0}
-				<h2>{$i18n.t(category.label)}</h2>
+				<h2 transition:fade={{ duration: 200 }}>{$i18n.t(category.label)}</h2>
 				{#each filteredTests.filter((test) => test.categories.includes(category.id) && filteredCategories.every( (f) => test.categories.includes(f) )) as test}
-					<a class="test" href={test.id} class:disabled={test.disabled}>
+					<a
+						class="test"
+						href={test.id}
+						class:disabled={test.disabled}
+						transition:fade={{ duration: 200 }}
+					>
 						<i class="ti {test.icon}"></i>
 						<div class="label">
 							<span class="name">{$i18n.t(test.label)}</span>
@@ -286,7 +292,9 @@
 			display: flex;
 			flex-direction: column;
 
-			opacity: 0.66;
+			opacity: 0.5;
+
+			transition: opacity 0.2s ease-in-out;
 
 			&.active {
 				opacity: 1;