diff --git a/src/lib/components/main/SocialsCloud.svelte b/src/lib/components/main/SocialsCloud.svelte
new file mode 100644
index 0000000..08ff940
--- /dev/null
+++ b/src/lib/components/main/SocialsCloud.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import socials from '$lib/config/socialsObjects';
+	import ObfuscatedEmail from '$lib/components/ObfuscatedEmail.svelte';
+</script>
+
+<div class="flex md:flex-row flex-wrap gap-2 max-h-24">
+	{#each socials as link}
+		<div class="card card-compact card-bordered p-6 bg-base-200 aspect-square flex items-center justify-center ">
+			{#if link.title === 'Email'}
+				<ObfuscatedEmail
+					mail={socials[0].href}
+					clazz="w-full h-full flex items-center justify-center"
+					h={12}
+					w={12}
+				/>
+			{:else}
+				<a
+					class="w-full h-full flex items-center justify-center"
+					href={link.href}
+					target="_blank"
+					rel={link.title === 'Mastodon' ? 'me' : 'noreferrer'}
+					aria-label={link.title}
+				>
+						<i class={link.icon + ' text-3xl md:text-5xl'} />
+				</a>
+			{/if}
+		</div>
+	{/each}
+</div>