diff --git a/src/app.scss b/src/app.scss
index 704e3bd..dc7bb20 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -59,13 +59,33 @@
 			hsla(287, 100%, 50%, 0.2),
 			hsla(287, 100%, 50%, 0)
 		);
+	--bg-gradient-pink: linear-gradient(
+		to bottom,
+		var(--accent-pink),
+		hsla(303, 100%, 50%, 0) 25%
+	);
+	--bg-gradient-red: linear-gradient(
+		to bottom,
+		var(--accent-red),
+		hsla(348, 100%, 50%, 0) 25%
+	);
+	--bg-gradient-purple: linear-gradient(
+		to bottom,
+		var(--accent-purple),
+		hsla(264, 100%, 50%, 0) 25%
+	);
+	--bg-gradient-blue: linear-gradient(
+		to bottom,
+		var(--accent-blue),
+		hsla(220, 100%, 50%, 0) 25%
+	);
 	--bg-panel: hsl(0, 0%, 100%);
 	--bg-panel-accented: hsl(0, 0%, 92%);
 	--bg-separator: hsl(0, 0%, 88%);
 	--bg-button: var(--bg-panel-accented);
 	--bg-badge: hsl(0, 0%, 0%);
-	--bg-input: #E0E0E0;
-	
+	--bg-input: #e0e0e0;
+
 	--shadow-panel: 0 2px 4px 0 hsla(0, 0%, 0%, 0.15);
 }
 
@@ -100,6 +120,26 @@
 			hsla(353, 100%, 50%, 0.07),
 			hsla(353, 100%, 50%, 0) 50%
 		);
+	--bg-gradient-pink: linear-gradient(
+		to bottom,
+		hsla(303, 100%, 50%, 0.1),
+		hsla(303, 100%, 50%, 0) 25%
+	);
+	--bg-gradient-red: linear-gradient(
+		to bottom,
+		hsla(348, 100%, 50%, 0.1),
+		hsla(348, 100%, 50%, 0) 25%
+	);
+	--bg-gradient-purple: linear-gradient(
+		to bottom,
+		hsla(264, 100%, 50%, 0.1),
+		hsla(264, 100%, 50%, 0) 25%
+	);
+	--bg-gradient-blue: linear-gradient(
+		to bottom,
+		hsla(220, 100%, 50%, 0.1),
+		hsla(220, 100%, 50%, 0) 25%
+	);
 	--bg-panel: hsl(220, 4%, 18%);
 	--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
 	--bg-separator: hsl(220, 4%, 28%);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7651857..db56f4d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -181,4 +181,19 @@
 		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
 		style="background: var(--bg-gradient);"
 	></div>
+{:else if data.pathname === "/convert"}
+	<div
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient-pink);"
+	></div>
+{:else if data.pathname === "/settings"}
+	<div
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient-blue);"
+	></div>
+{:else if data.pathname === "/about"}
+	<div
+		class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
+		style="background: var(--bg-gradient-pink);"
+	></div>
 {/if}
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 27509c8..2e9be9a 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -44,6 +44,7 @@
 
 	onMount(async () => {
 		// Fetch GitHub contributors
+		// TODO: cache it, so we don't have to fetch it every time the page is loaded
 		try {
 			const response = await fetch(
 				"https://api.github.com/repos/not-nullptr/VERT/contributors",