diff --git a/.vscode/settings.json b/.vscode/settings.json
index 61087f6..429353b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,8 @@
 	"files.autoSave": "onFocusChange",
 	"editor.formatOnPaste": true,
 	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "esbenp.prettier-vscode"
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"[html]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	}
 }
diff --git a/src/lib/common.ts b/src/lib/common.ts
new file mode 100644
index 0000000..7b00c71
--- /dev/null
+++ b/src/lib/common.ts
@@ -0,0 +1,4 @@
+import { locale } from '$lib/i18n';
+
+export const capitalizeFirstLetter = ([first, ...rest]) =>
+	first.toLocaleUpperCase(locale) + rest.join('');
diff --git a/src/lib/components/Profile.svelte b/src/lib/components/Profile.svelte
index 3dd5c98..f05ed6c 100644
--- a/src/lib/components/Profile.svelte
+++ b/src/lib/components/Profile.svelte
@@ -8,9 +8,9 @@
 		alt="headshot"
 	/>
 
-	<h1>{$t('profile.name')}</h1>
+	<h1>{$t('home.name')}</h1>
 
-	<p>{$t('profile.about')}</p>
+	<p>{$t('home.about')}</p>
 </section>
 
 <style lang="scss">
diff --git a/src/lib/i18n/de/about.json b/src/lib/i18n/de/about.json
deleted file mode 100644
index efbf0e1..0000000
--- a/src/lib/i18n/de/about.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"contact": "Kontakt"
-}
diff --git a/src/lib/i18n/de/contact.json b/src/lib/i18n/de/contact.json
new file mode 100644
index 0000000..2f34493
--- /dev/null
+++ b/src/lib/i18n/de/contact.json
@@ -0,0 +1,5 @@
+{
+	"title": "kontakt",
+	"meta": "Kontaktdaten von Wouter van der Wal",
+	"description": "Hier sind ein paar verschiedene Möglichkeiten, mich zu kontaktieren."
+}
diff --git a/src/lib/i18n/de/profile.json b/src/lib/i18n/de/home.json
similarity index 100%
rename from src/lib/i18n/de/profile.json
rename to src/lib/i18n/de/home.json
diff --git a/src/lib/i18n/de/navigation.json b/src/lib/i18n/de/navigation.json
index 6273d52..522e74d 100644
--- a/src/lib/i18n/de/navigation.json
+++ b/src/lib/i18n/de/navigation.json
@@ -5,5 +5,5 @@
 	"theme": "Thema",
 	"language": "Sprache",
 	"home": "Start",
-	"about": "Über"
+	"contact": "Kontakt"
 }
diff --git a/src/lib/i18n/en/about.json b/src/lib/i18n/en/about.json
deleted file mode 100644
index 84c7f10..0000000
--- a/src/lib/i18n/en/about.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"contact": "Contact"
-}
diff --git a/src/lib/i18n/en/contact.json b/src/lib/i18n/en/contact.json
new file mode 100644
index 0000000..4660213
--- /dev/null
+++ b/src/lib/i18n/en/contact.json
@@ -0,0 +1,5 @@
+{
+	"title": "contact",
+	"meta": "Contact details of Wouter van der Wal",
+	"description": "Here are a few different ways of contacting me."
+}
diff --git a/src/lib/i18n/en/profile.json b/src/lib/i18n/en/home.json
similarity index 100%
rename from src/lib/i18n/en/profile.json
rename to src/lib/i18n/en/home.json
diff --git a/src/lib/i18n/en/navigation.json b/src/lib/i18n/en/navigation.json
index 9eb5508..26cf2ee 100644
--- a/src/lib/i18n/en/navigation.json
+++ b/src/lib/i18n/en/navigation.json
@@ -5,5 +5,5 @@
 	"theme": "Theme",
 	"language": "Language",
 	"home": "Home",
-	"about": "About"
+	"contact": "Contact"
 }
diff --git a/src/lib/i18n/index.ts b/src/lib/i18n/index.ts
index fd770f7..13923e8 100644
--- a/src/lib/i18n/index.ts
+++ b/src/lib/i18n/index.ts
@@ -3,6 +3,31 @@ import lang from './lang.json';
 
 export const defaultLocale = 'en';
 
+interface key {
+	key: string;
+	routes?: string[];
+}
+
+const languages = ['en', 'nl', 'de'];
+const keys: key[] = [
+	// Different pages
+	{
+		key: 'home',
+		routes: ['/']
+	},
+	{
+		key: 'contact',
+		routes: ['/contact']
+	},
+	// Common parts
+	{
+		key: 'navigation'
+	},
+	{
+		key: 'common'
+	}
+];
+
 /** @type {import('@sveltejs/kit').Handle} */
 const config = {
 	translations: {
@@ -10,76 +35,16 @@ const config = {
 		nl: { lang },
 		de: { lang }
 	},
-	loaders: [
-		{
-			locale: 'en',
-			key: 'profile',
-			route: ['/'],
-			loader: async () => (await import('./en/profile.json')).default
-		},
-		{
-			locale: 'en',
-			key: 'common',
-			loader: async () => (await import('./en/common.json')).default
-		},
-		{
-			locale: 'en',
-			key: 'navigation',
-			loader: async () => (await import('./en/navigation.json')).default
-		},
-		{
-			locale: 'en',
-			key: 'about',
-			path: ['/about'],
-			loader: async () => (await import('./en/about.json')).default
-		},
-
-		{
-			locale: 'nl',
-			key: 'profile',
-			route: ['/'],
-			loader: async () => (await import('./nl/profile.json')).default
-		},
-		{
-			locale: 'nl',
-			key: 'common',
-			loader: async () => (await import('./nl/common.json')).default
-		},
-		{
-			locale: 'nl',
-			key: 'navigation',
-			loader: async () => (await import('./nl/navigation.json')).default
-		},
-		{
-			locale: 'nl',
-			key: 'about',
-			path: ['/about'],
-			loader: async () => (await import('./nl/about.json')).default
-		},
-
-		{
-			locale: 'de',
-			key: 'profile',
-			route: ['/'],
-			loader: async () => (await import('./de/profile.json')).default
-		},
-		{
-			locale: 'de',
-			key: 'common',
-			loader: async () => (await import('./de/common.json')).default
-		},
-		{
-			locale: 'de',
-			key: 'navigation',
-			loader: async () => (await import('./de/navigation.json')).default
-		},
-		{
-			locale: 'de',
-			key: 'about',
-			path: ['/about'],
-			loader: async () => (await import('./de/about.json')).default
-		}
-	]
+	loaders: languages.flatMap((language) => {
+		return keys.map((key) => {
+			return {
+				locale: language,
+				key: key.key,
+				route: key.routes,
+				loader: async () => (await import(`./${language}/${key.key}.json`)).default
+			};
+		});
+	})
 };
 
 export const { t, locale, locales, loading, loadTranslations } = new i18n(config);
diff --git a/src/lib/i18n/nl/about.json b/src/lib/i18n/nl/about.json
deleted file mode 100644
index 84c7f10..0000000
--- a/src/lib/i18n/nl/about.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"contact": "Contact"
-}
diff --git a/src/lib/i18n/nl/contact.json b/src/lib/i18n/nl/contact.json
new file mode 100644
index 0000000..3a173ae
--- /dev/null
+++ b/src/lib/i18n/nl/contact.json
@@ -0,0 +1,5 @@
+{
+	"title": "contact",
+	"meta": "Contactgegevens van Wouter van der Wal",
+	"description": "Hier zijn een paar verschillende manieren om contact met mij op te nemen."
+}
diff --git a/src/lib/i18n/nl/profile.json b/src/lib/i18n/nl/home.json
similarity index 100%
rename from src/lib/i18n/nl/profile.json
rename to src/lib/i18n/nl/home.json
diff --git a/src/lib/i18n/nl/navigation.json b/src/lib/i18n/nl/navigation.json
index 7ca7edc..96d1603 100644
--- a/src/lib/i18n/nl/navigation.json
+++ b/src/lib/i18n/nl/navigation.json
@@ -5,5 +5,5 @@
 	"theme": "Thema",
 	"language": "Taal",
 	"home": "Home",
-	"about": "Over"
+	"contact": "Contact"
 }
diff --git a/src/routes/[lang]/about.svelte b/src/routes/[lang]/about.svelte
deleted file mode 100644
index 8411659..0000000
--- a/src/routes/[lang]/about.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-	import { t } from '$lib/i18n';
-
-	import MdEmail from 'svelte-icons/md/MdEmail.svelte';
-	import GoMarkGithub from 'svelte-icons/go/GoMarkGithub.svelte';
-	import FaLinkedin from 'svelte-icons/fa/FaLinkedin.svelte';
-	import FaTwitter from 'svelte-icons/fa/FaTwitter.svelte';
-</script>
-
-<h1>{$t('about.contact')}</h1>
-
-<ul>
-	<li><MdEmail /><span><a href="mailto:me@wjtje.ga">me@wjtje.ga</a></span></li>
-	<li><GoMarkGithub /><span><a href="https://www.github.com/wjtje">wjtje</a></span></li>
-	<li>
-		<FaLinkedin /><span><a href="https://www.linkedin.com/in/wjtje/">Wouter van der Wal</a></span>
-	</li>
-	<li><FaTwitter /><span><a href="https://twitter.com/wjtje_wal">wjtje_wal</a></span></li>
-</ul>
-
-<style lang="scss">
-	h1 {
-		@apply text-2xl pb-2;
-	}
-
-	ul {
-		li {
-			@apply h-8 flex flex-row gap-2 items-center mb-2;
-
-			:global(svg) {
-				@apply h-8 w-8 p-1;
-			}
-
-			span {
-				@apply flex-grow h-auto;
-
-				a {
-					@apply hover:text-sky-400 transition-[color];
-				}
-			}
-		}
-	}
-</style>
diff --git a/src/routes/[lang]/contact.svelte b/src/routes/[lang]/contact.svelte
new file mode 100644
index 0000000..fae81dd
--- /dev/null
+++ b/src/routes/[lang]/contact.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { t } from '$lib/i18n';
+	import { capitalizeFirstLetter } from '$lib/common';
+
+	import MdEmail from 'svelte-icons/md/MdEmail.svelte';
+	import GoMarkGithub from 'svelte-icons/go/GoMarkGithub.svelte';
+	import FaLinkedin from 'svelte-icons/fa/FaLinkedin.svelte';
+	import FaTwitter from 'svelte-icons/fa/FaTwitter.svelte';
+	import FaReddit from 'svelte-icons/fa/FaReddit.svelte';
+</script>
+
+<svelte:head>
+	<title>{$t('common.title')} - {$t('contact.title')}</title>
+	<meta name="description" content={$t('contact.meta')} />
+</svelte:head>
+
+<h1>{capitalizeFirstLetter($t('contact.title'))}</h1>
+
+<p>{$t('contact.description')}</p>
+
+<ul>
+	<li class="email">
+		<MdEmail title="email" />
+		<span><a href="mailto:me@wjtje.ga">me@wjtje.ga</a></span>
+	</li>
+	<li class="github">
+		<GoMarkGithub title="Github" />
+		<span><a href="https://www.github.com/wjtje">wjtje</a></span>
+	</li>
+	<li class="linkedin">
+		<FaLinkedin title="LinkedIn" />
+		<span><a href="https://www.linkedin.com/in/wjtje/">Wouter van der Wal</a></span>
+	</li>
+	<li class="reddit">
+		<FaReddit title="Reddit" /><span><a href="https://www.reddit.com/u/wjtje">u/wjtje</a></span>
+	</li>
+	<li class="twitter">
+		<FaTwitter title="twitter" />
+		<span><a href="https://twitter.com/wjtje_wal">@wjtje_wal</a></span>
+	</li>
+</ul>
+
+<style lang="scss">
+	h1 {
+		@apply text-4xl pb-3;
+	}
+
+	p {
+		@apply pb-2;
+	}
+
+	ul {
+		li {
+			@apply h-8 flex flex-row gap-2 items-center mb-2 transition-[color] duration-200 w-auto;
+
+			:global(svg) {
+				@apply h-8 w-8 p-1 fill-current;
+			}
+
+			span {
+				@apply h-auto whitespace-nowrap;
+			}
+
+			// Custom hover effects
+			&.email {
+				@apply hover:text-red-600 dark:hover:text-red-500;
+			}
+
+			// Define brands with custom styles
+			$brands: linkedin, reddit, twitter;
+
+			@each $brand in $brands {
+				&.#{$brand} {
+					@apply hover:text-#{$brand}-brand;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 38476e2..ce06027 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -30,8 +30,8 @@
 			name: $t('navigation.home')
 		},
 		{
-			path: `about`,
-			name: $t('navigation.about')
+			path: `contact`,
+			name: $t('navigation.contact')
 		}
 	];
 </script>
diff --git a/static/sitemap.xml b/static/sitemap.xml
index 3738ba1..f8da838 100644
--- a/static/sitemap.xml
+++ b/static/sitemap.xml
@@ -7,10 +7,10 @@
 		<xhtml:link rel="alternate" hreflang="de" href="https://wjtje.ga/de" />
 	</url>
 	<url>
-		<loc>https://wjtje.ga/en/about</loc>
+		<loc>https://wjtje.ga/en/contact</loc>
 		<priority>0.8</priority>
-		<xhtml:link rel="alternate" hreflang="en" href="https://wjtje.ga/en/about" />
-		<xhtml:link rel="alternate" hreflang="nl" href="https://wjtje.ga/nl/about" />
-		<xhtml:link rel="alternate" hreflang="de" href="https://wjtje.ga/de/about" />
+		<xhtml:link rel="alternate" hreflang="en" href="https://wjtje.ga/en/contact" />
+		<xhtml:link rel="alternate" hreflang="nl" href="https://wjtje.ga/nl/contact" />
+		<xhtml:link rel="alternate" hreflang="de" href="https://wjtje.ga/de/contact" />
 	</url>
 </urlset>
\ No newline at end of file
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index dc41f53..1c21fd0 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -2,7 +2,13 @@ module.exports = {
 	content: ['./src/**/*.{html,svelte,ts,js}'],
 	darkMode: 'class',
 	theme: {
-		extend: {}
+		extend: {
+			colors: {
+				'reddit-brand': '#ff4500',
+				'twitter-brand': '#009EF7',
+				'linkedin-brand': '#0A66C2'
+			}
+		}
 	},
 	plugins: [require('tailwindcss-global-dark')]
 };