diff --git a/src/routes/auth/+layout.svelte b/src/routes/auth/+layout.svelte
index ccc29449..1ed8bdea 100644
--- a/src/routes/auth/+layout.svelte
+++ b/src/routes/auth/+layout.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
+	import Icon from '$lib/components/Icon.svelte'
+	import * as m from '$lib/paraglide/messages'
 
 	interface Props {
 		children: Snippet
@@ -10,6 +12,10 @@
 
 <div class="authContainer">
 	<div class="authBackground"></div>
+	<a href="/" class="backLink">
+		<Icon name="arrow-left" size={14} />
+		{m.auth_backToHome()}
+	</a>
 	<div class="authContent">
 		{@render children()}
 	</div>
@@ -18,6 +24,7 @@
 <style lang="scss">
 	@use '$src/themes/spacing' as *;
 	@use '$src/themes/effects' as *;
+	@use '$src/themes/typography' as *;
 
 	.authContainer {
 		min-height: 100vh;
@@ -30,9 +37,7 @@
 	.authBackground {
 		position: absolute;
 		inset: 0;
-		background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-		background-size: cover;
-		background-position: center;
+		background: #1a1a2e url('/images/port-breeze.jpg') center / cover no-repeat;
 		z-index: 0;
 
 		// Overlay for readability
@@ -40,7 +45,29 @@
 			content: '';
 			position: absolute;
 			inset: 0;
-			background: rgba(0, 0, 0, 0.3);
+			background: rgba(0, 0, 0, 0.4);
+		}
+	}
+
+	.backLink {
+		position: absolute;
+		top: $unit-3x;
+		left: $unit-3x;
+		z-index: 2;
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		color: rgba(255, 255, 255, 0.9);
+		text-decoration: none;
+		font-size: $font-small;
+		padding: $unit $unit-2x;
+		border-radius: $unit;
+		background: rgba(0, 0, 0, 0.3);
+		backdrop-filter: blur(4px);
+		transition: background 0.2s ease;
+
+		&:hover {
+			background: rgba(0, 0, 0, 0.5);
 		}
 	}