diff --git a/src/app.css b/src/app.css
index 9e4081b..03a1f2a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -19,3 +19,13 @@ body {
 .hero > div {
 	backdrop-filter: blur(10px);
 }
+
+a {
+	@apply hover:text-neutral-400;
+	@apply transition-colors;
+}
+
+a > div {
+	@apply hover:text-neutral-400;
+	@apply transition-colors;
+}
diff --git a/src/lib/components/Icons/Bluesky.svelte b/src/lib/components/Icons/Bluesky.svelte
new file mode 100644
index 0000000..e088328
--- /dev/null
+++ b/src/lib/components/Icons/Bluesky.svelte
@@ -0,0 +1,10 @@
+<svg
+	role="img"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="none"
+	fill="currentColor"
+	><title>Bluesky</title><path
+		d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"
+	/></svg
+>
diff --git a/src/lib/components/Icons/X.svelte b/src/lib/components/Icons/X.svelte
new file mode 100644
index 0000000..4454ac5
--- /dev/null
+++ b/src/lib/components/Icons/X.svelte
@@ -0,0 +1,10 @@
+<svg
+	role="img"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="none"
+	fill="currentColor"
+	><title>X</title><path
+		d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
+	/></svg
+>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4a6ee57..5125dcf 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,6 +6,8 @@
 	import Lastfm from '$lib/components/Icons/LastFM.svelte';
 	import GitHub from '$lib/components/Icons/GitHub.svelte';
 	import Mastodon from '$lib/components/Icons/Mastodon.svelte';
+	import X from '$lib/components/Icons/X.svelte';
+	import Bluesky from '$lib/components/Icons/Bluesky.svelte';
 </script>
 
 <svelte:head>
@@ -55,12 +57,22 @@
 						<Discord />
 					</div>
 				</a>
+				<a class="flex" href="https://x.com/{config.TWITTER}">
+					<div class="h-7 w-7 my-auto text-white/75">
+						<X />
+					</div>
+				</a>
+				<a class="flex" href="https://bsky.app/profile/{config.BLUESKY}">
+					<div class="h-7 w-7 my-auto text-white/75">
+						<Bluesky />
+					</div>
+				</a>
 			</div>
 
 			<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1">
 				<div class="flex space-x-4">
 					<img
-						class="w-24 h-24 rounded-lg"
+						class="w-24 h-24"
 						src={$page.data.lastfm?.recenttracks?.track[0]?.image.find(
 							(_) => _.size == 'extralarge'
 						)?.['#text']}