diff --git a/src/app.css b/src/app.css
index 1e26e06f..848fc9c4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -44,6 +44,9 @@
 	--color-pressure: #505055;
 	--color-battery: #bdca01;
 
+	--color-hotpink-400: #f472b6;
+	--color-silver-400: #c0c0c0;
+
 	/* Shadow */
 	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index ed6d036d..32e0f2f2 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -214,67 +214,6 @@
 	</div>
 </div>
 
-<!-- Mobile Menu -->
-{#if mobileMenuOpen}
-	<div
-		class="mobile-menu absolute top-full right-0 left-0 z-50 border-t text-slate-200 backdrop-blur-lg transition-colors duration-300 lg:hidden"
-	>
-		<div class="space-y-2 p-4">
-			<a href="/app/dashboard" class="block rounded-lg px-4 py-3 text-slate-200 transition-colors">
-				{$_('Dashboard')}
-			</a>
-			<a
-				href="#pricing"
-				class="block rounded-lg px-4 py-3 transition-colors {getDarkMode()
-					? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
-					: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
-			>
-				{$_('Pricing')}
-			</a>
-			<a
-				href="#devices"
-				class="block rounded-lg px-4 py-3 transition-colors {getDarkMode()
-					? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
-					: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
-			>
-				{$_('Devices')}
-			</a>
-			<a
-				href="#resources"
-				class="block rounded-lg px-4 py-3 transition-colors {getDarkMode()
-					? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
-					: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
-			>
-				{$_('Resources')}
-			</a>
-			<a
-				href="#about"
-				class="block rounded-lg px-4 py-3 transition-colors {getDarkMode()
-					? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
-					: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
-			>
-				{$_('About')}
-			</a>
-			<div class="space-y-2 border-t pt-2 {getDarkMode() ? 'border-white/10' : 'border-gray-200'}">
-				<a
-					href="/demo"
-					class="block rounded-lg px-4 py-3 transition-colors {getDarkMode()
-						? 'text-white/80 hover:bg-green-500/10 hover:text-green-400'
-						: 'text-gray-700 hover:bg-green-500/10 hover:text-green-600'}"
-				>
-					{$_('Demo')}
-				</a>
-				<a
-					href="/contact-us"
-					class="block rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 px-4 py-3 text-center font-semibold text-white"
-				>
-					{$_('Get Started')}
-				</a>
-			</div>
-		</div>
-	</div>
-{/if}
-
 <style>
 	@keyframes drift {
 		0% {
diff --git a/src/lib/components/UI/dashboard/DashboardCard.svelte b/src/lib/components/UI/dashboard/DashboardCard.svelte
index 155e8fca..bb6a742e 100644
--- a/src/lib/components/UI/dashboard/DashboardCard.svelte
+++ b/src/lib/components/UI/dashboard/DashboardCard.svelte
@@ -63,7 +63,7 @@
 					<Icon class="text-xl text-red-500" path={mdiClose} />
 				{/if}
 			</div>
-			<span class="ml-5 flex flex-auto">{location.name}</span>
+			<span class="ml-5 flex flex-auto pt-1">{location.name}</span>
 			<button
 				class="ml-2 flex inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-blue-200 bg-blue-50 p-0 text-blue-700 transition-colors duration-200 hover:bg-blue-100 dark:border-gray-600 dark:bg-gray-700 dark:text-blue-300 dark:hover:bg-gray-600"
 				onclick={() => goto(href)}
diff --git a/src/lib/components/maps/leaflet/LeafletMap.svelte b/src/lib/components/maps/leaflet/LeafletMap.svelte
index c88ce927..e04db2cc 100644
--- a/src/lib/components/maps/leaflet/LeafletMap.svelte
+++ b/src/lib/components/maps/leaflet/LeafletMap.svelte
@@ -53,6 +53,8 @@
 					'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
 			}
 		).addTo(m);
+		m.dragging.disable(); // Disable dragging for now
+		m.touchZoom.disable(); // Disable touch zoom for now
 
 		// Add click event listener to the map
 		m.on('click', (e: LeafletMouseEvent) => {
diff --git a/src/lib/csv/CsvDownloadButton.svelte b/src/lib/csv/CsvDownloadButton.svelte
index 428595a8..ed78dd5c 100644
--- a/src/lib/csv/CsvDownloadButton.svelte
+++ b/src/lib/csv/CsvDownloadButton.svelte
@@ -37,52 +37,55 @@
 	};
 </script>
 
-<Dialog.Root bind:open={modalOpen}>
-	<Dialog.Trigger asChild>
-		<Button variant="secondary" loading={false}>{$_('download_csv')}</Button>
-	</Dialog.Trigger>
+<div class="hidden md:flex md:items-center md:justify-end">
+	<Dialog.Root bind:open={modalOpen}>
+		<Dialog.Trigger asChild>
+			<Button variant="secondary" loading={false}>{$_('download_csv')}</Button>
+		</Dialog.Trigger>
 
-	<Dialog.Portal>
-		<Dialog.Overlay class="fixed inset-0 bg-black/50" />
-		<Dialog.Content
-			class="fixed top-1/2 left-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded bg-gray-50 p-6 text-zinc-900 shadow-lg dark:bg-zinc-800 dark:text-white"
-		>
-			<Dialog.Title class="text-lg font-semibold">{$_('select_date_range')}</Dialog.Title>
-			<Dialog.Description class="mt-1 text-sm dark:text-gray-400"
-				>{$_('select_start_end_dates')}</Dialog.Description
+		<Dialog.Portal>
+			<Dialog.Overlay class="fixed inset-0 bg-black/50" />
+			<Dialog.Content
+				class="fixed top-1/2 left-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded bg-gray-50 p-6 text-zinc-900 shadow-lg dark:bg-zinc-800 dark:text-white"
 			>
+				<Dialog.Title class="text-lg font-semibold">{$_('select_date_range')}</Dialog.Title>
+				<Dialog.Description class="mt-1 text-sm dark:text-gray-400"
+					>{$_('select_start_end_dates')}</Dialog.Description
+				>
 
-			<div class="mt-4 space-y-4">
-				<div>
-					<label for="start-date" class="mb-1 block text-sm font-medium">{$_('start_date')}</label>
-					<input
-						id="start-date"
-						type="date"
-						bind:value={startDate}
-						class="w-full rounded border border-gray-300 px-2 py-1"
-					/>
-				</div>
-				<div>
-					<label for="end-date" class="mb-1 block text-sm font-medium">{$_('end_date')}</label>
-					<input
-						id="end-date"
-						type="date"
-						bind:value={endDate}
-						class="w-full rounded border border-gray-300 px-2 py-1"
-					/>
+				<div class="mt-4 space-y-4">
+					<div>
+						<label for="start-date" class="mb-1 block text-sm font-medium">{$_('start_date')}</label
+						>
+						<input
+							id="start-date"
+							type="date"
+							bind:value={startDate}
+							class="w-full rounded border border-gray-300 px-2 py-1"
+						/>
+					</div>
+					<div>
+						<label for="end-date" class="mb-1 block text-sm font-medium">{$_('end_date')}</label>
+						<input
+							id="end-date"
+							type="date"
+							bind:value={endDate}
+							class="w-full rounded border border-gray-300 px-2 py-1"
+						/>
+					</div>
 				</div>
-			</div>
 
-			<div class="mt-6 flex justify-end gap-2">
-				<Button variant="secondary" onclick={() => (modalOpen = false)}>{$_('cancel')}</Button>
-				<Button
-					variant="primary"
-					onclick={() => {
-						startDownload();
-						modalOpen = false;
-					}}>{$_('download_csv')}</Button
-				>
-			</div>
-		</Dialog.Content>
-	</Dialog.Portal>
-</Dialog.Root>
+				<div class="mt-6 flex justify-end gap-2">
+					<Button variant="secondary" onclick={() => (modalOpen = false)}>{$_('cancel')}</Button>
+					<Button
+						variant="primary"
+						onclick={() => {
+							startDownload();
+							modalOpen = false;
+						}}>{$_('download_csv')}</Button
+					>
+				</div>
+			</Dialog.Content>
+		</Dialog.Portal>
+	</Dialog.Root>
+</div>
diff --git a/src/lib/utilities/stats.ts b/src/lib/utilities/stats.ts
index d01ee50a..c7967393 100644
--- a/src/lib/utilities/stats.ts
+++ b/src/lib/utilities/stats.ts
@@ -16,9 +16,9 @@ const colors: Record<string, string> = {
 	dew_point: 'orange',
 	dew_pointC: 'orange',
 	dewPointC: 'orange',
-	soil_EC: 'violet',
-	soil_ec: 'violet',
-	ec: 'violet',
+	soil_EC: 'green',
+	soil_ec: 'green',
+	ec: 'green',
 	soil_N: 'red',
 	soil_n: 'red',
 	soil_nitrogen: 'red',
@@ -28,8 +28,8 @@ const colors: Record<string, string> = {
 	soil_K: 'red',
 	soil_k: 'red',
 	soil_potassium: 'red',
-	soil_PH: 'yellow',
-	ph: 'yellow',
+	soil_PH: 'purple',
+	ph: 'purple',
 	soil_ph: 'yellow',
 	co2_level: 'purple',
 	co2: 'purple',
@@ -53,7 +53,7 @@ const colors: Record<string, string> = {
 	people_count: 'yellow',
 	car_count: 'red',
 	bicycle_count: 'green',
-	truck_count: 'orange',
+	truck_count: 'silver',
 	bus_count: 'blue'
 };
 
diff --git a/src/routes/app.css b/src/routes/app.css
index 9107aadd..5abadd51 100644
--- a/src/routes/app.css
+++ b/src/routes/app.css
@@ -21,6 +21,7 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
+
 	*,
 	::after,
 	::before,
@@ -47,16 +48,19 @@ nav h2 {
 	h1 {
 		@apply text-2xl font-extrabold;
 	}
+
 	h2 {
 		@apply mt-3 text-xl font-bold;
 	}
+
 	h3 {
 		@apply text-lg font-semibold;
 	}
 }
 
 main :is(h1, h2, h3):not(.prose *, .related *, .ApiDocs *) {
-	scroll-margin-top: calc(var(--headerHeight) + 148px); /* app header + docs header */
+	scroll-margin-top: calc(var(--headerHeight) + 148px);
+	/* app header + docs header */
 }
 
 main h1:not(.prose *, .related *, .ApiDocs *) {
@@ -70,7 +74,8 @@ main h2:not(.prose *, .related *, .ApiDocs *) {
 main h3:not(.prose *, .related *, .ApiDocs *) {
 	@apply text-surface-content/50 mb-1 text-xs;
 }
-main :not(.prose) h2 + h3 {
+
+main :not(.prose) h2+h3 {
 	@apply -mt-1;
 }
 
@@ -112,4 +117,4 @@ button {
 
 button:disabled {
 	@apply cursor-not-allowed;
-}
+}
\ No newline at end of file
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/+page.svelte b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/+page.svelte
index c34e4397..d0c6685c 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/+page.svelte
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/+page.svelte
@@ -237,10 +237,12 @@
 </svelte:head>
 
 <Header {device} {basePath}>
-	<div class="flex flex-wrap items-end gap-4 sm:flex-row-reverse">
-		<Button variant="secondary" href="{basePath}/settings">{$_('settings')}</Button>
+	{#snippet controls()}
 		<CsvDownloadButton {devEui} />
 		<Button class="invisible" variant="secondary" href="{basePath}/settings">{$_('report')}</Button>
+		<Button variant="secondary" href="{basePath}/settings">{$_('settings')}</Button>
+	{/snippet}
+	<div class="flex flex-wrap items-end gap-4 sm:flex-row-reverse">
 		<!-- Date range selector -->
 		<div class="flex flex-wrap items-end gap-2">
 			<!-- Date inputs -->
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/Header.svelte b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/Header.svelte
index e6a380d3..1e918209 100644
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/Header.svelte
+++ b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/Header.svelte
@@ -8,17 +8,21 @@
 		device: DeviceWithType;
 		basePath: string;
 		children?: Snippet;
+		controls?: Snippet;
 	};
 
-	let { device, basePath, children }: Props = $props();
+	let { device, basePath, children, controls }: Props = $props();
 </script>
 
 <header
 	class="sticky top-0 z-9999 flex flex-col items-start justify-between gap-4 border-b border-gray-300 p-4 md:flex-row md:items-end dark:border-neutral-400"
 	style:background-color="var(--color-background)"
 >
-	<h1 class="flex-1 text-2xl font-semibold text-gray-900 lg:text-3xl dark:text-gray-100">
-		{device.name}
+	<h1 class="flex w-full flex-1 flex-row items-center gap-4 md:flex-row md:items-end">
+		<div class="w-full text-2xl font-semibold text-gray-900 lg:text-3xl dark:text-gray-100">
+			{device.name}
+		</div>
+		<div class="flex w-full justify-end">{@render controls?.()}</div>
 	</h1>
 	{#if children}
 		{@render children?.()}
diff --git a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/device-detail-old.svelte b/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/device-detail-old.svelte
deleted file mode 100644
index 42c6592c..00000000
--- a/src/routes/app/dashboard/location/[location_id]/devices/[devEui]/device-detail-old.svelte
+++ /dev/null
@@ -1,258 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import Header from '$lib/components/Header.svelte';
-	import Spinner from '$lib/components/Spinner.svelte';
-	import type { DeviceWithType } from '$lib/models/Device';
-
-	import type { PageProps } from './$types';
-	import { getDeviceDetailDerived, setupDeviceDetail } from './device-detail.svelte';
-	import DataCard from '$lib/components/DataCard/DataCard.svelte';
-	import StatsCard from '$lib/components/StatsCard/StatsCard.svelte';
-	import { goto } from '$app/navigation';
-
-	// Get device data from server load function
-	let { data }: PageProps = $props();
-
-	let user = $state(data.user);
-	let device = $state(data.device as DeviceWithType);
-	let dataType = $state(data.dataType);
-	let latestData = $state(data.latestData);
-	let historicalData = $state(data.historicalData || []);
-
-	// Setup device detail functionality
-	const deviceDetail = setupDeviceDetail();
-
-	// Extract values from setup function - make the DOM-bound elements mutable
-	const {
-		stats,
-		chartData,
-		loading,
-		error,
-		formatDateForDisplay,
-		hasValue,
-		processHistoricalData,
-		fetchDataForDateRange,
-		renderVisualization,
-		initializeDateRange
-	} = deviceDetail;
-
-	// Define these as element references - using the new Svelte 5 approach for DOM bindings
-	// For DOM elements that don't need reactivity, we can use let declarations without $state
-	let chart1: HTMLElement;
-	let chart1Brush: HTMLElement;
-	let dataGrid: HTMLElement;
-
-	// Get the other properties that don't need DOM binding
-	let { startDate, endDate } = $state(deviceDetail);
-
-	// Derived properties
-	const derived = $state(getDeviceDetailDerived(device, dataType, latestData));
-	const deviceTypeName = $state(derived.deviceTypeName);
-	const temperatureChartVisible = $state(derived.temperatureChartVisible);
-	const humidityChartVisible = $state(derived.humidityChartVisible);
-	const moistureChartVisible = $state(derived.moistureChartVisible);
-	const co2ChartVisible = $state(derived.co2ChartVisible);
-	const phChartVisible = $state(derived.phChartVisible);
-
-	// Initialize the component
-	onMount(() => {
-		initializeDateRange();
-		processHistoricalData(historicalData, dataType);
-	});
-
-	// Effect to re-render visualization when historical data changes
-	$effect(() => {
-		// Pass the DOM elements to the renderVisualization function
-		renderVisualization(historicalData, dataType, latestData);
-	});
-
-	// Function to handle fetching data for a specific date range
-	async function handleDateRangeSubmit() {
-		const newData = await fetchDataForDateRange(device);
-		if (newData && newData.length > 0) {
-			historicalData = newData;
-			processHistoricalData(historicalData, dataType);
-		}
-	}
-</script>
-
-<svelte:head>
-	<title>Device Details - {device?.name || device?.dev_eui}</title>
-</svelte:head>
-
-<div id="chart-line"></div>
-
-<div class="device-details-container">
-	<div class="device-header">
-		<div class="back-link">
-			<a href="/app/dashboard">&larr; Back to Dashboard</a>
-		</div>
-		<h1>{device?.name || 'Device'} Details</h1>
-		<div class="device-meta">
-			<p>Type: <span class="device-type">{deviceTypeName}</span></p>
-			<p>EUI: <span class="device-eui">{device?.dev_eui}</span></p>
-			{#if device?.location_id}
-				<p>Location ID: <span class="device-location">{device.location_id}</span></p>
-			{/if}
-			{#if device?.installed_at}
-				<p>
-					Installed: <span class="device-installed"
-						>{new Date(device.installed_at).toLocaleDateString()}</span
-					>
-				</p>
-			{/if}
-		</div>
-		<button onclick={() => goto(`${device?.dev_eui}/settings`)}>⚙️ Settings</button>
-	</div>
-
-	<!-- Latest data section -->
-	<section class="data-section latest-data bg-foreground-light dark:bg-foreground-dark">
-		<h2>{$_('Latest Sensor Readings')}</h2>
-		{#if latestData}
-			<div class="sensor-readings">
-				<div class="grid grid-cols-3 gap-4">
-					{#each Object.keys(latestData) as key}
-						<DataCard {latestData} name={key} {key} notation="°C" type={key} class="w-full" />
-					{/each}
-				</div>
-				<p class="timestamp">Last updated: {new Date(latestData.created_at).toLocaleString()}</p>
-			</div>
-		{:else}
-			<p class="no-data">No recent data available for this device.</p>
-		{/if}
-	</section>
-
-	<!-- Historical data section -->
-	<section class="data-section historical-data bg-foreground-light dark:bg-foreground-dark">
-		<h2>Historical Data</h2>
-
-		<div class="date-range-selector bg-card-light dark:bg-card-dark mb-6 rounded-lg p-4 shadow">
-			<div class="date-inputs">
-				<div class="form-group">
-					<label for="startDate">Start Date:</label>
-					<input type="date" id="startDate" bind:value={startDate} max={endDate} />
-				</div>
-				<div class="form-group">
-					<label for="endDate">End Date:</label>
-					<input type="date" id="endDate" bind:value={endDate} min={startDate} />
-				</div>
-				<button class="fetch-btn" onclick={handleDateRangeSubmit} disabled={loading}>
-					{loading ? 'Loading...' : 'Fetch Data'}
-				</button>
-			</div>
-
-			{#if error}
-				<div class="error-message">{error}</div>
-			{/if}
-		</div>
-
-		{#if loading}
-			<div class="loading-container">
-				<Spinner />
-				<p>Loading historical data...</p>
-			</div>
-		{:else if historicalData.length === 0}
-			<p class="no-data">No historical data available for the selected date range.</p>
-		{:else}
-			<!-- Statistical Summary -->
-			<div class="stats-section">
-				<h3>Statistical Summary</h3>
-				<div class="stats-grid">
-					{#if temperatureChartVisible}
-						<StatsCard
-							notation="°C"
-							title="Temperature"
-							min={stats.temperature.min}
-							max={stats.temperature.max}
-							avg={stats.temperature.avg}
-						/>
-					{/if}
-
-					{#if humidityChartVisible}
-						<StatsCard
-							notation="%"
-							title="Humidity"
-							min={stats.humidity.min}
-							max={stats.humidity.max}
-							avg={stats.humidity.avg}
-						/>
-					{/if}
-
-					{#if moistureChartVisible}
-						<StatsCard
-							notation="%"
-							title="Moisture"
-							min={stats.moisture.min}
-							max={stats.moisture.max}
-							avg={stats.moisture.avg}
-						/>
-					{/if}
-
-					{#if co2ChartVisible}
-						<StatsCard title="ppm" min={stats.co2.min} max={stats.co2.max} avg={stats.co2.avg} />
-					{/if}
-
-					{#if phChartVisible}
-						<StatsCard title="pH" min={stats.ph.min} max={stats.ph.max} avg={stats.ph.avg} />
-					{/if}
-				</div>
-			</div>
-
-			<!-- Chart Visualizations -->
-			<div class="charts-section">
-				<h3>Data Visualization</h3>
-
-				<!-- Full-width chart container for both temperature and humidity/moisture -->
-				{#if temperatureChartVisible}
-					<div class="chart-container full-width">
-						<div class="chart temperature-chart">
-							<h4>Sensor Data Over Time</h4>
-							<div class="chart-placeholder">
-								<div class="chart-visual">
-									<div class="chart main-chart" bind:this={chart1}></div>
-									<div class="chart brush-chart" bind:this={chart1Brush}></div>
-								</div>
-							</div>
-						</div>
-					</div>
-				{/if}
-
-				<!-- Statistical individual charts - these remain in grid layout -->
-				<div class="chart-container stats-charts">
-					{#if humidityChartVisible || moistureChartVisible}
-						<div class="chart humidity-moisture-chart">
-							<h4>{dataType === 'air' ? 'Humidity' : 'Moisture'} Statistics</h4>
-							<div class="chart-stats">
-								<div class="chart-legend">
-									{#if humidityChartVisible}
-										<span class="min">Min: {stats.humidity.min}%</span>
-										<span class="avg">Avg: {stats.humidity.avg}%</span>
-										<span class="max">Max: {stats.humidity.max}%</span>
-									{:else}
-										<span class="min">Min: {stats.moisture.min}%</span>
-										<span class="avg">Avg: {stats.moisture.avg}%</span>
-										<span class="max">Max: {stats.moisture.max}%</span>
-									{/if}
-								</div>
-							</div>
-						</div>
-					{/if}
-
-					<!-- Similar chart sections for CO2 and pH would go here -->
-				</div>
-			</div>
-
-			<!-- Data Table -->
-			<div class="data-table-section">
-				<h3>Raw Data</h3>
-				<div class="table-container">
-					<div class="data-grid" bind:this={dataGrid}></div>
-				</div>
-			</div>
-		{/if}
-	</section>
-</div>
-
-<style>
-	@import 'device-detail.css';
-</style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9a57d65e..17976c2e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,126 +1,135 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  darkMode: 'class', // 'media' for OS preference, 'class' for manual toggle
-  theme: {
-    extend: {
-      colors: {
-        // You can customize your color palette here
-        primary: {
-          light: '#4CAF50',
-          dark: '#3a8c3f'
-        },
-        foreground: {
-          light: 'var(--color-foreground-light)',
-          DEFAULT: 'var(--color-foreground)',
-          dark: 'var(--color-foreground-dark)'
-        },
-        background: {
-          light: '#f5f5f5',
-          dark: '#1a1a1a'
-        },
-        card: {
-          light: 'var(--color-card, #ffffff)',
-          dark: 'var(--color-card, #2d2d2d)'
-        },
-        text: {
-          light: '#333333',
-          dark: '#e0e0e0'
-        },
-        air: {
-          light: '#e6f7ff',
-          dark: '#0d3b66'
-        },
-        soil: {
-          light: '#f6ffed',
-          dark: '#1e4620'
-        }
-      },
-      // Define spacing scale explicitly for Tailwind v4
-      spacing: {
-        0: '0px',
-        0.5: '0.125rem',
-        1: '0.25rem',
-        1.5: '0.375rem',
-        2: '0.5rem',
-        2.5: '0.625rem',
-        3: '0.75rem',
-        3.5: '0.875rem',
-        4: '1rem',
-        5: '1.25rem', // Ensure gap-5 uses this value
-        6: '1.5rem',
-        7: '1.75rem',
-        8: '2rem',
-        9: '2.25rem',
-        10: '2.5rem',
-        11: '2.75rem',
-        12: '3rem',
-        14: '3.5rem',
-        16: '4rem',
-        20: '5rem',
-        24: '6rem',
-        28: '7rem',
-        32: '8rem',
-        36: '9rem',
-        40: '10rem',
-        44: '11rem',
-        48: '12rem',
-        52: '13rem',
-        56: '14rem',
-        60: '15rem',
-        64: '16rem',
-        72: '18rem',
-        80: '20rem',
-        96: '24rem'
-      },
-    },
-  },
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-  ],
-  // Explicitly enable core plugins needed
-  corePlugins: {
-    preflight: true,
-    // Layout
-    display: true,
-    flexDirection: true,
-    gridTemplateColumns: true,
-    // Spacing
-    padding: true,
-    margin: true,
-    gap: true, // Explicitly enable gap
-    // Sizing
-    width: true,
-    height: true,
-    minHeight: true,
-    // Typography
-    fontSize: true,
-    fontWeight: true,
-    lineHeight: true,
-    textAlign: true,
-    textColor: true,
-    // Backgrounds
-    backgroundColor: true,
-    // Borders
-    borderRadius: true,
-    borderWidth: true,
-    borderColor: true,
-    // Effects
-    boxShadow: true,
-    // Transitions
-    transitionProperty: true,
-    transitionDuration: true,
-    transitionTimingFunction: true,
-    // Interactivity
-    cursor: true,
-    appearance: true,
-    outlineStyle: true,
-    ringWidth: true,
-    ringColor: true,
-    // SVG
-    fill: true,
-    stroke: true,
-    strokeWidth: true,
-  }
-}
\ No newline at end of file
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	darkMode: 'class', // 'media' for OS preference, 'class' for manual toggle
+	theme: {
+		extend: {
+			colors: {
+				// You can customize your color palette here
+				primary: {
+					light: '#4CAF50',
+					dark: '#3a8c3f'
+				},
+				foreground: {
+					light: 'var(--color-foreground-light)',
+					DEFAULT: 'var(--color-foreground)',
+					dark: 'var(--color-foreground-dark)'
+				},
+				background: {
+					light: '#f5f5f5',
+					dark: '#1a1a1a'
+				},
+				card: {
+					light: 'var(--color-card, #ffffff)',
+					dark: 'var(--color-card, #2d2d2d)'
+				},
+				text: {
+					light: '#333333',
+					dark: '#e0e0e0'
+				},
+				air: {
+					light: '#e6f7ff',
+					dark: '#0d3b66'
+				},
+				soil: {
+					light: '#f6ffed',
+					dark: '#1e4620'
+				},
+				hotpink: {
+					50: '#fdf2f8',
+					100: '#fce7f3',
+					200: '#fbcfe8',
+					300: '#f9a8d4',
+					400: '#f472b6', // This will create --color-hotpink-400
+					500: '#ec4899',
+					600: '#db2777',
+					700: '#be185d',
+					800: '#9d174d',
+					900: '#831843'
+				}
+			},
+			// Define spacing scale explicitly for Tailwind v4
+			spacing: {
+				0: '0px',
+				0.5: '0.125rem',
+				1: '0.25rem',
+				1.5: '0.375rem',
+				2: '0.5rem',
+				2.5: '0.625rem',
+				3: '0.75rem',
+				3.5: '0.875rem',
+				4: '1rem',
+				5: '1.25rem', // Ensure gap-5 uses this value
+				6: '1.5rem',
+				7: '1.75rem',
+				8: '2rem',
+				9: '2.25rem',
+				10: '2.5rem',
+				11: '2.75rem',
+				12: '3rem',
+				14: '3.5rem',
+				16: '4rem',
+				20: '5rem',
+				24: '6rem',
+				28: '7rem',
+				32: '8rem',
+				36: '9rem',
+				40: '10rem',
+				44: '11rem',
+				48: '12rem',
+				52: '13rem',
+				56: '14rem',
+				60: '15rem',
+				64: '16rem',
+				72: '18rem',
+				80: '20rem',
+				96: '24rem'
+			}
+		}
+	},
+	plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
+	// Explicitly enable core plugins needed
+	corePlugins: {
+		preflight: true,
+		// Layout
+		display: true,
+		flexDirection: true,
+		gridTemplateColumns: true,
+		// Spacing
+		padding: true,
+		margin: true,
+		gap: true, // Explicitly enable gap
+		// Sizing
+		width: true,
+		height: true,
+		minHeight: true,
+		// Typography
+		fontSize: true,
+		fontWeight: true,
+		lineHeight: true,
+		textAlign: true,
+		textColor: true,
+		// Backgrounds
+		backgroundColor: true,
+		// Borders
+		borderRadius: true,
+		borderWidth: true,
+		borderColor: true,
+		// Effects
+		boxShadow: true,
+		// Transitions
+		transitionProperty: true,
+		transitionDuration: true,
+		transitionTimingFunction: true,
+		// Interactivity
+		cursor: true,
+		appearance: true,
+		outlineStyle: true,
+		ringWidth: true,
+		ringColor: true,
+		// SVG
+		fill: true,
+		stroke: true,
+		strokeWidth: true
+	}
+};