diff --git a/website/src/app.html b/website/src/app.html
index 7841d164..0850632f 100644
--- a/website/src/app.html
+++ b/website/src/app.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     %sveltekit.head%
 </head>
 
diff --git a/website/src/app.pcss b/website/src/app.pcss
index 22880547..e51f4441 100644
--- a/website/src/app.pcss
+++ b/website/src/app.pcss
@@ -32,6 +32,8 @@
     --destructive-foreground: 210 40% 98%;
 
     --support: 220 15 130;
+
+    --link: 0 110 180;
  
     --ring: 222.2 84% 4.9%;
  
@@ -67,6 +69,8 @@
     --destructive-foreground: 210 40% 98%;
 
     --support: 255 110 190;
+
+    --link: 80 190 255;
  
     --ring: hsl(212.7,26.8%,83.9);
   }
diff --git a/website/src/lib/components/Help.svelte b/website/src/lib/components/Help.svelte
index b9e6aa32..82d2e17b 100644
--- a/website/src/lib/components/Help.svelte
+++ b/website/src/lib/components/Help.svelte
@@ -5,16 +5,14 @@
 	export let link: string | undefined = undefined;
 </script>
 
-<div class="text-sm bg-muted rounded border flex flex-row items-center p-2 {$$props.class || ''}">
+<div
+	class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {$$props.class || ''}"
+>
 	<CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
 	<div>
 		<slot />
 		{#if link}
-			<a
-				href={link}
-				target="_blank"
-				class="text-sm text-blue-500 dark:text-blue-300 hover:underline"
-			>
+			<a href={link} target="_blank" class="text-sm text-link hover:underline">
 				{$_('menu.more')}
 			</a>
 		{/if}
diff --git a/website/src/lib/components/docs/DocsContainer.svelte b/website/src/lib/components/docs/DocsContainer.svelte
index 6340a8c7..633c83f1 100644
--- a/website/src/lib/components/docs/DocsContainer.svelte
+++ b/website/src/lib/components/docs/DocsContainer.svelte
@@ -41,17 +41,17 @@
 	}
 
 	:global(.markdown > a) {
-		@apply text-blue-500;
+		@apply text-link;
 		@apply hover:underline;
 	}
 
 	:global(.markdown p > a) {
-		@apply text-blue-500;
+		@apply text-link;
 		@apply hover:underline;
 	}
 
 	:global(.markdown li > a) {
-		@apply text-blue-500;
+		@apply text-link;
 		@apply hover:underline;
 	}
 
diff --git a/website/src/lib/components/docs/DocsNote.svelte b/website/src/lib/components/docs/DocsNote.svelte
index 617e8c10..8cfd9fe1 100644
--- a/website/src/lib/components/docs/DocsNote.svelte
+++ b/website/src/lib/components/docs/DocsNote.svelte
@@ -3,8 +3,8 @@
 </script>
 
 <div
-	class="bg-accent border-l-8 {type === 'note'
-		? 'border-blue-500'
+	class="bg-secondary border-l-8 {type === 'note'
+		? 'border-link'
 		: 'border-destructive'} p-2 text-sm rounded-md"
 >
 	<slot />
@@ -12,7 +12,7 @@
 
 <style lang="postcss">
 	div :global(a) {
-		@apply text-blue-500;
+		@apply text-link;
 		@apply hover:underline;
 	}
 </style>
diff --git a/website/src/lib/components/gpx-layer/WaypointPopup.svelte b/website/src/lib/components/gpx-layer/WaypointPopup.svelte
index 78ed74e7..bd1002f1 100644
--- a/website/src/lib/components/gpx-layer/WaypointPopup.svelte
+++ b/website/src/lib/components/gpx-layer/WaypointPopup.svelte
@@ -99,7 +99,7 @@
 
 <style lang="postcss">
 	div :global(a) {
-		@apply text-blue-500 dark:text-blue-300;
+		@apply text-link;
 		@apply hover:underline;
 	}
 
diff --git a/website/src/lib/components/layer-control/OverpassPopup.svelte b/website/src/lib/components/layer-control/OverpassPopup.svelte
index be93afb3..7bb611b5 100644
--- a/website/src/lib/components/layer-control/OverpassPopup.svelte
+++ b/website/src/lib/components/layer-control/OverpassPopup.svelte
@@ -62,11 +62,11 @@
 						{#if key !== 'name' && !key.includes('image')}
 							<span class="font-mono">{key}</span>
 							{#if key === 'website' || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
-								<a href={value} target="_blank" class="text-blue-500 underline">{value}</a>
+								<a href={value} target="_blank" class="text-link underline">{value}</a>
 							{:else if key === 'phone' || key === 'contact:phone'}
-								<a href={'tel:' + value} class="text-blue-500 underline">{value}</a>
+								<a href={'tel:' + value} class="text-link underline">{value}</a>
 							{:else if key === 'email' || key === 'contact:email'}
-								<a href={'mailto:' + value} class="text-blue-500 underline">{value}</a>
+								<a href={'mailto:' + value} class="text-link underline">{value}</a>
 							{:else}
 								<span>{value}</span>
 							{/if}
diff --git a/website/src/routes/[[language]]/help/+layout.svelte b/website/src/routes/[[language]]/help/+layout.svelte
index 81d69e39..8fc2746c 100644
--- a/website/src/routes/[[language]]/help/+layout.svelte
+++ b/website/src/routes/[[language]]/help/+layout.svelte
@@ -16,7 +16,7 @@
 			<Button
 				variant="link"
 				href={getURLForLanguage($locale, `/help/${guide}`)}
-				class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
+				class="min-h-5 h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
 					.params.guide === guide
 					? 'font-semibold text-foreground'
 					: ''}"
@@ -29,7 +29,7 @@
 				<Button
 					variant="link"
 					href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
-					class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
+					class="min-h-5 h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
 						.params.guide ===
 					guide + '/' + subGuide
 						? 'font-semibold text-foreground'
diff --git a/website/src/routes/[[language]]/help/+page.svelte b/website/src/routes/[[language]]/help/+page.svelte
index be3bef1c..47a06966 100644
--- a/website/src/routes/[[language]]/help/+page.svelte
+++ b/website/src/routes/[[language]]/help/+page.svelte
@@ -14,13 +14,13 @@
 		<Button
 			variant="outline"
 			href={getURLForLanguage($locale, `/help/${guide}`)}
-			class="h-full pt-6 pb-3 px-0"
+			class="min-h-36 h-full pt-6 pb-3 px-0"
 		>
 			<div class="flex flex-col w-full">
-				<div class="text-center text-5xl">
+				<div class="h-12 text-center text-5xl">
 					{guideIcons[guide]}
 				</div>
-				<div class="text-2xl text-center my-3 w-full whitespace-normal px-6">
+				<div class="min-h-8 text-2xl text-center my-3 w-full whitespace-normal px-6">
 					{#await data.guideModules[guide] then guideModule}
 						{guideModule.metadata.title}
 					{/await}
@@ -30,7 +30,7 @@
 						<Button
 							variant="link"
 							href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
-							class="h-fit px-0 py-1 text-muted-foreground   text-base text-center whitespace-normal"
+							class="min-h-8 h-fit min-w-24 px-0 py-1 text-muted-foreground text-base text-center whitespace-normal"
 						>
 							<svelte:component this={guideIcons[subGuide]} size="16" class="mr-1 shrink-0" />
 							{#await data.guideModules[`${guide}/${subGuide}`] then guideModule}
diff --git a/website/src/routes/[[language]]/help/[...guide]/+page.svelte b/website/src/routes/[[language]]/help/[...guide]/+page.svelte
index a0abf4de..e43917d0 100644
--- a/website/src/routes/[[language]]/help/[...guide]/+page.svelte
+++ b/website/src/routes/[[language]]/help/[...guide]/+page.svelte
@@ -53,7 +53,7 @@
 			variant="link"
 			href="https://www.reddit.com/r/gpxstudio/"
 			target="_blank"
-			class="p-0 h-6 text-blue-500"
+			class="p-0 h-6 text-link"
 		>
 			<CornerDownRight size="16" class="mr-1" />
 			{$_('docs.ask_on_reddit')}
@@ -65,7 +65,7 @@
 			href="https://github.com/gpxstudio/gpx.studio/edit/dev/website/src/lib/docs/en/{$page.params
 				.guide}.mdx"
 			target="_blank"
-			class="p-0 h-6 ml-auto text-blue-500"
+			class="p-0 h-6 ml-auto text-link"
 		>
 			<PenLine size="16" class="mr-1" />
 			Edit this page on GitHub
@@ -75,7 +75,7 @@
 			variant="link"
 			href="https://crowdin.com/project/gpxstudio/{$locale}"
 			target="_blank"
-			class="p-0 h-6 ml-auto text-blue-500"
+			class="p-0 h-6 ml-auto text-link"
 		>
 			<PenLine size="16" class="mr-1" />
 			{$_('docs.translate')}
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 10d84a63..f5ef5354 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -42,6 +42,7 @@ const config = {
                     foreground: "hsl(var(--card-foreground) / <alpha-value>)"
                 },
                 support: "rgb(var(--support))",
+                link: "rgb(var(--link))"
             },
             borderRadius: {
                 lg: "var(--radius)",
