diff --git a/src/layout/Hero/SocialButton.svelte b/src/layout/Hero/SocialButton.svelte
index 5a9b300..a6772fc 100644
--- a/src/layout/Hero/SocialButton.svelte
+++ b/src/layout/Hero/SocialButton.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-	import type {Social} from '$lib/types';
+	import type { Social } from '$lib/types';
 	export let social = '';
 	export let data: Social[];
 </script>
 
-<a href={data.find(jsonSocial => jsonSocial.name === social)?.url} rel="noreferrer" target="_blank">
+<a
+	href={data.find((jsonSocial) => jsonSocial.name.toLowerCase() === social.toLowerCase())?.url}
+	rel="noreferrer"
+	target="_blank"
+>
 	<div>
 		<img src="socials/{social}.svg" alt={social} />
 	</div>
diff --git a/src/layout/Hero/SocialHost.svelte b/src/layout/Hero/SocialHost.svelte
index 748f6de..f73bab7 100644
--- a/src/layout/Hero/SocialHost.svelte
+++ b/src/layout/Hero/SocialHost.svelte
@@ -10,10 +10,10 @@
 <div class="social-host">
 	<Query {query} let:data>
 		{#if data}
-			<SocialButton social="github" data={data.socials}/>
-			<SocialButton social="discord" data={data.socials}/>
-			<SocialButton social="reddit" data={data.socials}/>
-			<SocialButton social="telegram" data={data.socials}/>
+			<SocialButton social="github" data={data.socials} />
+			<SocialButton social="discord" data={data.socials} />
+			<SocialButton social="reddit" data={data.socials} />
+			<SocialButton social="telegram" data={data.socials} />
 		{/if}
 	</Query>
 </div>