diff --git a/src/lib/components/link.svelte b/src/lib/components/link.svelte
new file mode 100644
index 0000000..5538964
--- /dev/null
+++ b/src/lib/components/link.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	let {
+		name,
+		link,
+		img,
+		redirect = true,
+		children
+	}: { name?: string; link: string; img: string; redirect?: boolean; children?: any } = $props();
+</script>
+
+<div class="link grow">
+	{#if redirect}
+		<a href={link} target="_blank">
+			<h2 class="noselect">
+				{#if name}
+					{name}
+				{:else}
+					{link}
+				{/if}
+			</h2>
+			<div class="desc">
+				<img class="noselect" src={img} alt="" />
+				<p>{@render children?.()}</p>
+			</div>
+		</a>
+	{:else}
+		<h2 class="noselect">
+			{#if name}
+				{name}
+			{:else}
+				{link}
+			{/if}
+		</h2>
+		<div class="desc">
+			<img class="noselect" src={img} alt="" />
+			<p>{@render children?.()}</p>
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use '$lib/styles/variables' as vars;
+
+	a {
+		text-decoration: none;
+        color: white;
+	}
+
+    img {
+        padding: 1em;
+    }
+
+	h2 {
+		background: linear-gradient(-90deg, #dede6c, #dede6c 25%, #00d4ff00);
+		color: black;
+		line-height: 28px;
+		padding: 0.3em 0 0 0.3em;
+		text-align: right;
+	}
+
+	.link {
+		border: 1px solid vars.$base-colour;
+	}
+
+	.desc {
+		img {
+			width: 100px;
+			height: 100px;
+		}
+		p {
+			text-align: center;
+			flex-grow: 1;
+			font-size: 1.5em;
+		}
+		display: flex;
+		align-items: center;
+	}
+
+    .grow {
+    transition: all 0.2s ease-in-out;
+}
+
+.grow:hover {
+    transform: scale(1.03);
+    border: 1px solid vars.$highlight;
+}
+</style>
diff --git a/src/lib/components/pet.svelte b/src/lib/components/pet.svelte
index 6de6406..c0541a7 100644
--- a/src/lib/components/pet.svelte
+++ b/src/lib/components/pet.svelte
@@ -7,7 +7,7 @@
 	}: { name: string; species?: string; img: string; children?: any } = $props();
 </script>
 
-<div class="pet grow">
+<div class="grow pet">
 	<img src={img} alt="" />
 	<div class="info">
 		<h2>{name}</h2>
@@ -22,7 +22,7 @@
 	@use '$lib/styles/variables' as vars;
 	.pet {
 		// margin: 1em;
-		border: 1px solid vars.$highlight;
+		border: 1px solid vars.$base-colour;
 		display: flex;
 		// align-items: center;
 		gap: 1em;
@@ -32,21 +32,24 @@
 			line-height: 1em;
 			padding-top: 0.2em;
 		}
-        h3 {
-            // text-decoration: underline;
-            color: vars.$base-colour;
-            margin-bottom: .2em;
-        }
+		h3 {
+			// text-decoration: underline;
+			color: vars.$base-colour;
+			margin-bottom: 0.2em;
+		}
 		img {
 			width: 200px;
-            min-width: 200px;
+			min-width: 200px;
 			height: 200px;
 		}
 	}
+
 	.grow {
 		transition: all 0.2s ease-in-out;
 	}
+
 	.grow:hover {
 		transform: scale(1.03);
+		border: 1px solid vars.$highlight;
 	}
 </style>
diff --git a/src/routes/links/+page.svelte b/src/routes/links/+page.svelte
index 56fdb55..5b2a80a 100644
--- a/src/routes/links/+page.svelte
+++ b/src/routes/links/+page.svelte
@@ -1,10 +1,33 @@
 <script lang="ts">
 	import Window from '$lib/components/window.svelte';
+	import Link from '$lib/components/link.svelte';
+
+	//social links
+	import discord from '$lib/assets/img/socials/discord.svg';
+	import roblox from "$lib/assets/img/socials/roblox.svg";
+	import git from "$lib/assets/img/socials/git.svg";
+	import github from "$lib/assets/img/socials/github.svg";
 </script>
 
 <div class="container">
 	<h1>Links</h1>
-
+	<Window name="socials">
+		<div class="links">
+			<Link link="discord" img="{discord}" redirect={false}>genki_angel</Link>
+			<!-- <Link link="" img="">fediverse</Link> -->
+			<Link link="https://www.roblox.com/users/1757381" name="https://roblox.com" img="{roblox}">
+				i play roblox sometimes...
+			</Link>
+		</div>
+	</Window>
+	<Window name="repos">
+		<div class="links">
+			<Link link="https://git.banii.cafe" img="{git}">all my latest repos are<br>saved here ^w^</Link>
+			<Link link="https://github.com/genki-angel" name="https://github.com" img="{github}"
+				>very inactive</Link
+			>
+		</div>
+	</Window>
 </div>
 
 <style lang="scss">
@@ -21,4 +44,9 @@
 		padding: 1em;
 		gap: 1em;
 	}
+	.links {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
 </style>