diff --git a/handlers/pages/index.templ b/handlers/pages/index.templ
index db34010..b54db3a 100644
--- a/handlers/pages/index.templ
+++ b/handlers/pages/index.templ
@@ -34,23 +34,68 @@ templ (p *IndexPage) Component() {
 		>
 			@p.section("main", "brand/light-asset.svg", "/assets/img/cat-1.png", "bg-white", "", "#code") {
 				<ul class="p-0 list-none font-sans flex gap-1rem underline underline-offset-3">
-					<li><a class="text-white" href="/about">About</a></li>
-					<li><a class="text-white" href="/blog">Blog</a></li>
-					<li><a class="text-white" href="/contact">Contact</a></li>
+					<li>
+						<a
+							class="text-white opacity-50 hover:opacity-100 transition-all"
+							href="/about"
+						>About</a>
+					</li>
+					<li>
+						<a
+							class="text-white opacity-50 hover:opacity-100 transition-all"
+							href="/blog"
+						>Blog</a>
+					</li>
+					<li>
+						<a
+							class="text-white opacity-50 hover:opacity-100 transition-all"
+							href="/contact"
+						>Contact</a>
+					</li>
 				</ul>
 			}
 			@p.section("code", "brand/code-light-asset.svg", "/assets/img/cat-3.png", "bg-cyan", "#main", "#creators") {
 				<ul class="p-0 list-none font-sans flex gap-1rem underline underline-offset-3">
-					<li><a class="text-white" href="/about">About</a></li>
-					<li><a class="text-white" href="/blog">Projects</a></li>
-					<li><a class="text-white" href="/contact">Contact</a></li>
+					<li>
+						<a
+							class="text-white opacity-50 hover:opacity-100 transition-all"
+							href="/about"
+						>About</a>
+					</li>
+					<li>
+						<a
+							class="text-white opacity-50 hover:opacity-100 transition-all"
+							href="/blog"
+						>Projects</a>
+					</li>
+					<li>
+						<a
+							class="text-white opacity-50 hover:opacity-100 transition-all"
+							href="/contact"
+						>Contact</a>
+					</li>
 				</ul>
 			}
 			@p.section("creators", "brand/creators-light-asset.svg", "/assets/img/cat-2.png", "bg-purple", "#code", "") {
 				<ul class="p-0 list-none font-sans flex gap-1rem underline underline-offset-3">
-					<li><a class="text-white" href="/about">About</a></li>
-					<li><a class="text-white" href="/creators">Creators</a></li>
-					<li><a class="text-white" href="/contact">Contact</a></li>
+					<li>
+						<a
+							class="text-white opacity-50 hover:opacity-100 transition-all"
+							href="/about"
+						>About</a>
+					</li>
+					<li>
+						<a
+							class="text-white opacity-50 hover:opacity-100 transition-all"
+							href="/creators"
+						>Creators</a>
+					</li>
+					<li>
+						<a
+							class="text-white opacity-50 hover:opacity-100 transition-all"
+							href="/contact"
+						>Contact</a>
+					</li>
 				</ul>
 			}
 		</main>