diff --git a/src/lib/LinkButton.svelte b/src/lib/LinkButton.svelte
new file mode 100644
index 0000000..c1a88db
--- /dev/null
+++ b/src/lib/LinkButton.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	export let url: string;
+	export let icon: string;
+	export let title: string;
+	export let bg: string;
+	export let color: string;
+</script>
+
+<a href={url} style="background-color: {bg}; color: {color};">
+	{#if icon}
+		<div class={icon} />
+	{/if}
+	{title}
+</a>
+
+<style>
+	a {
+		text-decoration: none;
+		background-color: var(--accent);
+		padding: 8px 1em 8px 1em;
+		color: var(--primary);
+		border-radius: 10px;
+		transition: filter 0.25s;
+		display: flex;
+		align-items: center;
+		width: fit-content;
+		gap: 4px;
+	}
+
+	a:hover {
+		filter: brightness(125%);
+	}
+</style>
diff --git a/src/routes/donate.md b/src/routes/donate.md
index c264b13..076c0f9 100644
--- a/src/routes/donate.md
+++ b/src/routes/donate.md
@@ -3,6 +3,10 @@ title: Donate to Project Segfault
 description: The ways you can donate to us and more.
 ---
 
+<script>
+	import LinkButton from "$lib/LinkButton.svelte";
+</script>
+
 # { title }
 
 { description }
@@ -11,21 +15,27 @@ description: The ways you can donate to us and more.
 
 If you donate, we will be more motivated to work on the server and host more stuff and maybe even get more hardware. We really recommend you donate any spare money you have if you enjoy or use our services on a daily basis. Thanks!
 
-## Donation Links
+## Donation links
 
-### You can use our [domain name](https://projectsegfau.lt) as a crypto wallet address in supported OpenAlias Clients such as [MyMonero](https://mymonero.com/), [Electrum](https://electrum.org/) and [Electrum-LTC](https://electrum-ltc.org/).
+### Credit Card
 
-### Monero
+<LinkButton url="https://liberapay.com/ProjectSegfault/donate" icon="i-simple-icons:liberapay" title="Donate" bg="#F6C915" color="#151515" />
+
+### Cryptocurrency
+
+You can use our [domain name](https://projectsegfau.lt) as a crypto wallet address in supported OpenAlias clients such as [MyMonero](https://mymonero.com/), [Electrum](https://electrum.org/) and [Electrum-LTC](https://electrum-ltc.org/).
+
+#### Monero
 
 Address: `47L7Qsto7XcifY3CdG18ySe5Tt83kpFLDLve9jQwbc9taPBLNGv6ZrJNUKpMG9Nj9zHgCZ4FQMSyt75e8Jvx12JFLtJyFdA`  
 ![Monero QR code](/Monero.png)
 
-### Bitcoin
+#### Bitcoin
 
 Address: `bc1qrc8ywgp95a6p3zausp4nff70qzstp6h8z86sxd`  
 ![Bitcoin QR code](/Bitcoin.png)
 
-### Litecoin
+#### Litecoin
 
 Address: `ltc1qn3ald586h2ntt0n3zkvwsmju2e5vndgtvvgatj`  
 ![Litecoin QR code](/Litecoin.png)
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 4133504..4870672 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import SvelteSeo from "svelte-seo";
 	import Hero from "$lib/Hero.svelte";
+	import LinkButton from "$lib/LinkButton.svelte";
 	import dayjs from "dayjs";
 
 	let description: string = "Open source development and hosted services.";
@@ -24,12 +25,13 @@
 	marginTop="7"
 >
 	<div class="buttons">
-		<a href="/instances">Explore our services</a>
-		<a href="/projects">Explore our projects</a>
-		<a href="/donate"
-			><div class="i-fa6-solid:money-bill" />
-			Donate</a
-		>
+		<LinkButton url="/instances" title="Explore our services" />
+		<LinkButton url="/projects" title="Explore our projects" />
+		<LinkButton
+			url="/donate"
+			icon="i-fa6-solid:money-bill"
+			title="Donate"
+		/>
 	</div>
 </Hero>
 
@@ -107,22 +109,6 @@
 		}
 	}
 
-	.buttons a {
-		text-decoration: none;
-		background-color: var(--accent);
-		padding: 8px 1em 8px 1em;
-		color: var(--primary);
-		border-radius: 10px;
-		transition: filter 0.25s;
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-
-	.buttons a:hover {
-		filter: brightness(125%);
-	}
-
 	.announcement-container {
 		display: flex;
 		justify-content: center;