diff --git a/src/routes/Socials.svelte b/src/routes/Socials.svelte
index eed4af4..bbcf7f6 100644
--- a/src/routes/Socials.svelte
+++ b/src/routes/Socials.svelte
@@ -9,9 +9,10 @@
 	import IconGitHub from 'svelte-material-icons/Github.svelte';
 	import IconEmailFast from 'svelte-material-icons/EmailFast.svelte';
 	import IconMatrix from 'svelte-material-icons/Matrix.svelte';
-	// import IconGitpot from '$lib/IconGitpot.svelte';
 	import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
 	import IconChevronUp from 'svelte-material-icons/ChevronUp.svelte';
+	import IconMastodon from 'svelte-material-icons/Mastodon.svelte';
+	import IconSteam from 'svelte-material-icons/Steam.svelte';
 
 	// Initialisations
 
@@ -32,6 +33,14 @@
 		'with ❤️',
 		'with ❤️',
 		'with ❤️',
+		'with ❤️',
+		'with ❤️',
+		'with ❤️',
+		'with ❤️',
+		'with ❤️',
+		'with ❤️',
+		'with ❤️',
+		'with ❤️',
 		'with ☕️',
 		'with 🍵',
 		'with 🍪',
@@ -143,7 +152,18 @@
 			{#if showMore}
 				<div class="button-container below" transition:slide>
 					<div class="tooltip">
-						<a href="#top" class="round-button button inactive" aria-label="Inactive" />
+						<a
+							href="https://steamcommunity.com/id/sangeloo"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="round-button button steam"
+							aria-label="Steam"
+						>
+							<IconSteam class="icon" size="2.5em" />
+						</a>
+						<span class="tooltiptext">@sangeloo</span>
+					</div>
+					<div class="tooltip">
 						<a
 							href="https://matrix.to/#/@sangelo:matrix.org"
 							target="_blank"
@@ -163,8 +183,6 @@
 							class="round-button button gitpot"
 							aria-label="Gitpot"
 						>
-							<!-- <img src="/assets/icons/gitpot.svg" class="icon gitpot" /> -->
-							<!-- <IconGitpot class="icon gitpot"/> -->
 							<svg
 								class="icon gitpot"
 								width="220"
@@ -226,7 +244,18 @@
 						</a>
 						<span class="tooltiptext">/sangelo</span>
 					</div>
-					<a href="#top" class="round-button button inactive" aria-label="Inactive" />
+					<div class="tooltip">
+						<a
+							href="https://mas.to/@sangelo"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="round-button button mastodon"
+							aria-label="Mastodon"
+						>
+							<IconMastodon class="icon" size="2.5em" />
+						</a>
+						<span class="tooltiptext">@sangelo@mas.to</span>
+					</div>
 				</div>
 			{/if}
 		</div>
diff --git a/src/styles/socials.scss b/src/styles/socials.scss
index 8ea4259..490f470 100644
--- a/src/styles/socials.scss
+++ b/src/styles/socials.scss
@@ -38,7 +38,7 @@
 		.toggle-more {
 			color: $star-gray;
 			cursor: pointer;
-			transition: transform 0.3s ease-in-out;
+			transition: transform 0.3s ease-in-out, margin 0.05s ease-out;
 			text-decoration: none;
 			align-self: center;
 			width: 4em;
@@ -84,6 +84,10 @@
 			background: linear-gradient(158deg, #ec8f5a 55.62%, #ffaf37 90.01%);
 		}
 
+		.button.steam {
+			background: linear-gradient(35deg, rgb(23 29 37) 35%, rgb(44 46 53) 100%);
+		}
+
 		.button.matrix {
 			background: linear-gradient(145deg, rgb(12, 163, 165) 25%, rgb(19, 174, 122) 100%);
 		}
@@ -97,6 +101,10 @@
 			}
 		}
 
+		.button.mastodon {
+			background: linear-gradient(180deg, rgb(99 100 255) 10%, rgb(86 58 204) 100%);
+		}
+
 		.button.inactive {
 			background: transparent;
 			display: none;