diff --git a/src/app.html b/src/app.html
index 095b66f..28c906c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="de">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8042132..43763f6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { base } from '$app/paths';
 	import { onMount, onDestroy } from 'svelte';
-	import { Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip, Filler } from 'chart.js';
 	import 'chart.js/auto';
+	import { Chart } from 'chart.js';
 
 	type Measurement = { timestamp: number; soil_moisture: number };
 
@@ -21,7 +21,9 @@
 
 	function updateChart() {
 		if (!chart) return;
-		chart.data.labels = data.map(d => new Date(d.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }));
+		chart.data.labels = data.map(d =>
+			new Date(d.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+		);
 		chart.data.datasets[0].data = data.map(d => d.soil_moisture);
 		chart.update();
 	}
@@ -34,8 +36,8 @@
 				datasets: [{
 					label: 'Bodenfeuchte (%)',
 					data: [],
-					borderColor: '#4ade80',
-					backgroundColor: 'rgba(74, 222, 128, 0.1)',
+					borderColor: '#2980b9',
+					backgroundColor: 'rgba(133, 183, 215, 0.2)',
 					borderWidth: 2,
 					pointRadius: 0,
 					pointHoverRadius: 4,
@@ -48,14 +50,14 @@
 				maintainAspectRatio: false,
 				scales: {
 					x: {
-						ticks: { color: '#9ca3af', maxTicksLimit: 8 },
-						grid: { color: '#374151' },
+						ticks: { color: '#555', maxTicksLimit: 8 },
+						grid: { color: '#e5e7eb' },
 					},
 					y: {
 						min: 0,
 						max: 100,
-						ticks: { color: '#9ca3af', callback: v => `${v} %` },
-						grid: { color: '#374151' },
+						ticks: { color: '#555', callback: v => `${v} %` },
+						grid: { color: '#e5e7eb' },
 					}
 				},
 				plugins: {
@@ -81,33 +83,55 @@
 	const latest = $derived(data.at(-1));
 </script>
 
-<main class="min-h-screen bg-gray-950 text-gray-100 p-8 flex flex-col">
-	<h1 class="text-2xl font-semibold mb-1">Bodenfeuchte</h1>
-	<p class="text-sm text-gray-400 mb-6">
-		Letzte 6 Stunden · Aktualisierung: {lastUpdate || '…'}
-	</p>
+<svelte:head>
+	<title>Bodenfeuchte</title>
+</svelte:head>
 
-	{#if latest}
-		<div class="mb-8 inline-block bg-gray-800 rounded-xl px-6 py-4">
-			<span class="text-5xl font-bold text-green-400">{latest.soil_moisture.toFixed(1)}</span>
-			<span class="text-2xl text-gray-400 ml-2">%</span>
-			<p class="text-xs text-gray-500 mt-1">
-				{new Date(latest.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
-			</p>
+<div class="min-h-screen py-8 px-4" style="background:#f4f4f5; font-family: Arial, Helvetica, sans-serif;">
+	<div class="mx-auto flex flex-col" style="max-width:56rem; border:2px solid black; border-radius:0.75rem; background:#FFFFDD; min-height:calc(100vh - 4rem);">
+
+		<!-- Header -->
+		<div class="px-8 pt-6 pb-4 border-b-2 border-black">
+			<h1 class="text-3xl font-bold text-center">Bodenfeuchte</h1>
 		</div>
-	{/if}
 
-	<div class="bg-gray-900 rounded-2xl p-4" style="height: 360px;">
-		{#if data.length === 0}
-			<div class="flex items-center justify-center h-full text-gray-500">
-				Noch keine Daten vorhanden
+		<!-- Content -->
+		<div class="flex-1 px-8 py-6 flex flex-col gap-6">
+
+			<!-- Aktueller Wert -->
+			<div style="background:#CCCCFF; border:2px solid black; border-radius:0.5rem;" class="px-6 py-4 flex items-center justify-between">
+				<span class="text-gray-600 text-sm">Aktueller Wert</span>
+				{#if latest}
+					<div class="text-right">
+						<span class="text-4xl font-bold">{latest.soil_moisture.toFixed(1)}</span>
+						<span class="text-xl text-gray-500 ml-1">%</span>
+						<p class="text-xs text-gray-500 mt-0.5">
+							{new Date(latest.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr
+						</p>
+					</div>
+				{:else}
+					<span class="text-gray-400 text-sm">–</span>
+				{/if}
 			</div>
-		{/if}
-		<canvas bind:this={canvas} class={data.length === 0 ? 'hidden' : ''}></canvas>
-	</div>
 
-	<footer class="mt-auto pt-8 flex justify-between text-xs text-gray-600">
-		<a href="mailto:rexfue@gmail.com" class="hover:text-gray-400 transition-colors">rexfue@gmail.com</a>
-		<span>v{__APP_VERSION__} · {__BUILD_DATE__}</span>
-	</footer>
-</main>
+			<!-- Diagramm -->
+			<div style="border:2px solid black; border-radius:0.5rem; background:white; height:340px;" class="p-4">
+				<p class="text-xs text-gray-400 mb-2">Letzte 6 Stunden · Stand: {lastUpdate || '…'}</p>
+				{#if data.length === 0}
+					<div class="flex items-center justify-center h-full text-gray-400 text-sm">
+						Noch keine Daten vorhanden
+					</div>
+				{/if}
+				<canvas bind:this={canvas} class={data.length === 0 ? 'hidden' : 'w-full'} style="height:280px;"></canvas>
+			</div>
+
+		</div>
+
+		<!-- Footer -->
+		<div class="px-8 py-4 border-t-2 border-black flex justify-between text-xs text-gray-500">
+			<a href="mailto:rexfue@gmail.com" class="hover:text-gray-800 transition-colors">rexfue@gmail.com</a>
+			<span>v{__APP_VERSION__} · {__BUILD_DATE__}</span>
+		</div>
+
+	</div>
+</div>
