diff --git a/app/components/device/new/device-info.tsx b/app/components/device/new/device-info.tsx
index 8186f4dc..cedaf921 100644
--- a/app/components/device/new/device-info.tsx
+++ b/app/components/device/new/device-info.tsx
@@ -121,11 +121,14 @@ export function DeviceSelectionStep() {
 					return (
 						<Card
 							key={device.name}
+							role="button"
+							tabIndex={0}
 							className={cn(
-								'relative transform cursor-pointer overflow-hidden transition-all duration-300 ease-in-out hover:scale-105',
-								selectedDevice === device.name
-									? 'bg-primary/10 ring-primary ring-2'
-									: 'hover:bg-gray-50',
+								'border-border bg-card text-card-foreground relative transform cursor-pointer overflow-hidden rounded-xl border transition-all duration-300 ease-in-out',
+								'hover:border-primary/40 hover:bg-muted/40 hover:-translate-y-0.5 hover:shadow-md',
+								'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none',
+								selectedDevice === device.name &&
+									'border-primary bg-primary/10 ring-primary/40 shadow-sm ring-2',
 							)}
 							onClick={() => {
 								if (selectedDevice === 'senseBox:Home') {
@@ -133,24 +136,38 @@ export function DeviceSelectionStep() {
 								}
 								handleDeviceChange(device.name)
 							}}
+							onKeyDown={(event) => {
+								if (event.key === 'Enter' || event.key === ' ') {
+									event.preventDefault()
+
+									if (selectedDevice === 'senseBox:Home') {
+										return
+									}
+
+									handleDeviceChange(device.name)
+								}
+							}}
 						>
 							<CardContent className="flex flex-row p-0">
-								<img
-									src={device.image}
-									alt={device.name}
-									className={cn(
-										'w-24 self-stretch',
-										device.imageHasPadding
-											? 'object-cover'
-											: 'object-contain p-4',
-									)}
-								/>
+								<div className="border-border flex w-24 shrink-0 items-center justify-center border-r bg-white">
+									<img
+										src={device.image}
+										alt={device.name}
+										className={cn(
+											'h-full w-full',
+											device.imageHasPadding
+												? 'object-cover'
+												: 'object-contain p-4',
+										)}
+									/>
+								</div>
+
 								<div className="flex min-w-0 flex-1 flex-col justify-center p-3">
 									{selectedDevice === 'senseBox:Home' && (
 										<Button
 											variant="ghost"
 											size="icon"
-											className="absolute top-2 right-2"
+											className="text-muted-foreground hover:bg-muted hover:text-foreground absolute top-2 right-2"
 											onClick={(e) => {
 												e.stopPropagation()
 												handleClose()
@@ -159,17 +176,21 @@ export function DeviceSelectionStep() {
 											<X className="h-4 w-4" />
 										</Button>
 									)}
-									<h3 className="text-lg font-semibold wrap-break-word">
+
+									<h3 className="text-foreground text-lg font-semibold wrap-break-word">
 										{device.name}
 									</h3>
+
 									{device.name === 'senseBox:Home' &&
 										selectedDevice === 'senseBox:Home' && (
 											<>
 												<Separator className="my-2" />
+
 												<div className="w-full max-w-xs">
-													<h4 className="mb-2 text-sm font-medium">
+													<h4 className="text-muted-foreground mb-2 text-sm font-medium">
 														{t('connection_type')}
 													</h4>
+
 													<RadioGroup
 														value={selectedConnectionType}
 														onValueChange={(value) =>
@@ -183,7 +204,10 @@ export function DeviceSelectionStep() {
 																className="flex items-center space-x-2"
 															>
 																<RadioGroupItem value={type} id={type} />
-																<Label htmlFor={type} className="text-sm">
+																<Label
+																	htmlFor={type}
+																	className="text-foreground text-sm"
+																>
 																	{type}
 																</Label>
 															</div>
diff --git a/app/components/device/new/general-info.tsx b/app/components/device/new/general-info.tsx
index 3bc640f7..f58d3cd6 100644
--- a/app/components/device/new/general-info.tsx
+++ b/app/components/device/new/general-info.tsx
@@ -14,6 +14,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from '~/components/ui/tooltip'
+import { cn } from '~/lib/utils'
 
 type ExposureOption = 'outdoor' | 'indoor' | 'mobile' | 'unknown'
 
@@ -140,17 +141,23 @@ export function GeneralInfoStep() {
 					{exposureOptions.map((option) => (
 						<Button
 							key={option.value}
-							type="button" // Prevent form submission
+							type="button"
 							onClick={() => setValue('exposure', option.value)}
-							variant={'outline'}
-							className={`flex items-center gap-2 transition-all duration-200 ease-in-out ${
+							variant="outline"
+							aria-pressed={currentExposure === option.value}
+							className={cn(
+								'flex items-center gap-2 transition-all duration-200 ease-in-out',
 								currentExposure === option.value
-									? 'bg-green-100 shadow-md hover:bg-green-100'
-									: 'hover:bg-gray-100'
-							}`}
+									? [
+											'border-primary bg-primary/10 text-primary ring-primary/40 shadow-md ring-2',
+											'hover:bg-primary/15',
+											'dark:border-primary dark:bg-primary/20 dark:text-primary dark:hover:bg-primary/25',
+										]
+									: 'hover:bg-muted',
+							)}
 						>
 							{option.icon}
-							<span className="text-sm">{t(option.label)}</span>
+							<span className="text-sm">{option.label}</span>
 						</Button>
 					))}
 				</div>
diff --git a/app/components/device/new/location-info.tsx b/app/components/device/new/location-info.tsx
index f33331da..6587ccd9 100644
--- a/app/components/device/new/location-info.tsx
+++ b/app/components/device/new/location-info.tsx
@@ -136,7 +136,7 @@ export function LocationStep() {
 				</BaseMap>
 			</div>
 
-			<div className="flex w-full items-center justify-around bg-gray-50 p-4 dark:bg-gray-800">
+			<div className="bg-background flex w-full items-center justify-around p-4">
 				<div>
 					<Label htmlFor="latitude">{t('latitude')}</Label>
 					<Input
diff --git a/app/components/device/new/new-device-stepper.tsx b/app/components/device/new/new-device-stepper.tsx
index ceba45c6..05dc5bc3 100644
--- a/app/components/device/new/new-device-stepper.tsx
+++ b/app/components/device/new/new-device-stepper.tsx
@@ -178,7 +178,7 @@ export default function NewDeviceStepper() {
 			<FormProvider {...form}>
 				<Form
 					onSubmit={form.handleSubmit(onSubmit, onError)}
-					className="flex h-full w-1/2 flex-col justify-between space-y-6 rounded-lg border bg-white p-6"
+					className="bg-card flex h-full w-1/2 flex-col justify-between space-y-6 rounded-lg border p-6"
 				>
 					<div className="space-y-4">
 						{/* Breadcrumb Navigation */}
@@ -192,8 +192,8 @@ export default function NewDeviceStepper() {
 													onClick={() => stepper.navigation.goTo(step.id)}
 													className={` ${
 														stepper.state.current.index === step.index
-															? 'font-bold text-black'
-															: 'cursor-pointer text-gray-500 hover:text-black'
+															? 'text-foreground font-bold'
+															: 'hover:text-foreground text-muted-foreground cursor-pointer'
 													} `}
 												>
 													{t(step.label)}
diff --git a/app/components/device/new/summary-info.tsx b/app/components/device/new/summary-info.tsx
index d3f5ab35..6213f14c 100644
--- a/app/components/device/new/summary-info.tsx
+++ b/app/components/device/new/summary-info.tsx
@@ -1,7 +1,6 @@
 import { MapPin, Tag, Smartphone, Cpu, Cog } from 'lucide-react'
 import { useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import { Badge } from '@/components/ui/badge'
 import { Card, CardContent } from '@/components/ui/card'
 
 export function SummaryInfo() {
diff --git a/app/components/landing/header/language-selector.tsx b/app/components/landing/header/language-selector.tsx
index 879135dd..048d9999 100644
--- a/app/components/landing/header/language-selector.tsx
+++ b/app/components/landing/header/language-selector.tsx
@@ -1,6 +1,11 @@
 import { Languages } from 'lucide-react'
 import { useFetcher } from 'react-router'
 import { Button } from '~/components/ui/button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from '~/components/ui/tooltip'
 import { useRootRouteLoaderData } from '~/root'
 
 export default function LanguageSelector() {
@@ -16,21 +21,24 @@ export default function LanguageSelector() {
 		)
 	}
 
+	const languageLabel = locale === 'de' ? 'Deutsch' : 'English'
+	const nextLanguageLabel = locale === 'de' ? 'English' : 'Deutsch'
+
 	return (
-		<div className="group relative">
-			<Button
-				variant="topbar"
-				size="topbarPill"
-				onClick={toggleLanguage}
-				disabled={fetcher.state !== 'idle'}
-				aria-label={`Current language: ${locale.toUpperCase()}`}
-			>
-				<Languages />
-			</Button>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					variant="topbar"
+					size="topbarPill"
+					onClick={toggleLanguage}
+					disabled={fetcher.state !== 'idle'}
+					aria-label={`Current language: ${languageLabel}. Switch to ${nextLanguageLabel}.`}
+				>
+					<Languages />
+				</Button>
+			</TooltipTrigger>
 
-			<div className="bg-popover text-popover-foreground pointer-events-none absolute top-full left-1/2 mt-2 -translate-x-1/2 rounded-md px-2 py-1 text-xs opacity-0 shadow-md transition-opacity group-hover:opacity-100">
-				{locale.toUpperCase()}
-			</div>
-		</div>
+			<TooltipContent side="bottom">{languageLabel}</TooltipContent>
+		</Tooltip>
 	)
 }
diff --git a/app/components/landing/header/theme-toggle.tsx b/app/components/landing/header/theme-toggle.tsx
new file mode 100644
index 00000000..cfda60a6
--- /dev/null
+++ b/app/components/landing/header/theme-toggle.tsx
@@ -0,0 +1,75 @@
+import { Moon, Sun } from 'lucide-react'
+import { useFetcher } from 'react-router'
+import { Button } from '~/components/ui/button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '~/components/ui/tooltip'
+import type { ThemePreference } from '~/lib/theme'
+import { useRootRouteLoaderData } from '~/root'
+
+function applyThemePreference(preference: ThemePreference) {
+	const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+	const resolvedTheme =
+		preference === 'dark' || (preference === 'system' && prefersDark)
+			? 'dark'
+			: 'light'
+
+	const root = document.documentElement
+
+	root.classList.remove('light', 'dark')
+	root.classList.add(resolvedTheme)
+	root.style.colorScheme = resolvedTheme
+}
+
+function getCurrentResolvedTheme(): 'light' | 'dark' {
+	return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+}
+
+export default function ThemeToggle() {
+	const { themePreference } = useRootRouteLoaderData()
+	const fetcher = useFetcher()
+
+	const toggleTheme = () => {
+		const currentTheme = getCurrentResolvedTheme()
+
+		const nextThemePreference: ThemePreference =
+			currentTheme === 'dark' ? 'light' : 'dark'
+
+		applyThemePreference(nextThemePreference)
+
+		void fetcher.submit(
+			{ 'set-theme': nextThemePreference },
+			{ method: 'post', action: '/' },
+		)
+	}
+
+	const tooltipText =
+		themePreference === 'system'
+			? 'System theme'
+			: `${themePreference[0].toUpperCase()}${themePreference.slice(1)} theme`
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Button
+						variant="topbar"
+						size="topbarPill"
+						onClick={toggleTheme}
+						disabled={fetcher.state !== 'idle'}
+						aria-label={`Toggle theme. Current preference: ${themePreference}`}
+					>
+						<Sun className="block dark:hidden" />
+						<Moon className="hidden dark:block" />
+					</Button>
+				</TooltipTrigger>
+
+				<TooltipContent side="bottom">{tooltipText}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	)
+}
diff --git a/app/components/language-select.tsx b/app/components/language-select.tsx
new file mode 100644
index 00000000..43830d23
--- /dev/null
+++ b/app/components/language-select.tsx
@@ -0,0 +1,53 @@
+import { useFetcher } from 'react-router'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '~/components/ui/select'
+import { useRootRouteLoaderData } from '~/root'
+
+const supportedLocales = ['en', 'de'] as const
+
+type SupportedLocale = (typeof supportedLocales)[number]
+
+function isSupportedLocale(value: unknown): value is SupportedLocale {
+	return (
+		typeof value === 'string' &&
+		(supportedLocales as readonly string[]).includes(value)
+	)
+}
+
+export function LanguageSelect() {
+	const { locale } = useRootRouteLoaderData()
+	const fetcher = useFetcher<{ ok: boolean }>()
+
+	const optimisticLocale = fetcher.formData?.get('set-language')
+	const currentLocale = isSupportedLocale(optimisticLocale)
+		? optimisticLocale
+		: locale
+
+	return (
+		<Select
+			value={currentLocale}
+			disabled={fetcher.state !== 'idle'}
+			onValueChange={(nextLocale) => {
+				if (!isSupportedLocale(nextLocale)) return
+
+				void fetcher.submit(
+					{ 'set-language': nextLocale },
+					{ method: 'post', action: '/' },
+				)
+			}}
+		>
+			<SelectTrigger className="border-input bg-background text-foreground w-36">
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem value="en">English</SelectItem>
+				<SelectItem value="de">Deutsch</SelectItem>
+			</SelectContent>
+		</Select>
+	)
+}
diff --git a/app/components/map/topbar.tsx b/app/components/map/topbar.tsx
index eef4f49c..00b53de4 100644
--- a/app/components/map/topbar.tsx
+++ b/app/components/map/topbar.tsx
@@ -4,6 +4,7 @@ import NavBar from '../header/nav-bar'
 import Info from '../header/info'
 import LanguageSelector from '../landing/header/language-selector'
 import { TooltipProvider } from '../ui/tooltip'
+import ThemeToggle from '../landing/header/theme-toggle'
 
 interface MapHeaderProps {
 	devices: any
@@ -34,6 +35,7 @@ export default function MapHeader({
 
 					<div className="flex shrink-0 items-center gap-4">
 						<LanguageSelector />
+						<ThemeToggle />
 
 						<div className="h-7 w-px bg-black/10 dark:bg-white/15" />
 
diff --git a/app/components/mydevices/dt/columns.tsx b/app/components/mydevices/dt/columns.tsx
index 22d4cc9a..609acee9 100644
--- a/app/components/mydevices/dt/columns.tsx
+++ b/app/components/mydevices/dt/columns.tsx
@@ -1,12 +1,7 @@
 'use client'
 
 import { type ColumnDef } from '@tanstack/react-table'
-import {
-	ArrowUpDown,
-	ClipboardCopy,
-	Ellipsis,
-	LucideMapPin,
-} from 'lucide-react'
+import { ArrowUpDown, Ellipsis, LucideMapPin } from 'lucide-react'
 import { type UseTranslationResponse } from 'react-i18next'
 import { Link } from 'react-router'
 import { Button } from '@/components/ui/button'
@@ -19,6 +14,7 @@ import {
 	DropdownMenuTrigger,
 } from '~/components/ui/dropdown-menu'
 import { type Device } from '~/db/schema'
+import { DeviceIdCell } from './device-id-cell'
 
 export type SenseBox = {
 	id: string
@@ -130,21 +126,17 @@ export function getColumns(
 		{
 			accessorKey: 'id',
 			header: () => (
-				<div className="pl-0 dark:text-white">{t('device_id')}</div>
+				<div className="text-muted-foreground pl-0">{t('device_id')}</div>
 			),
 			cell: ({ row }) => {
 				const device = row.original
 
 				return (
-					<div className="flex items-center">
-						<code className="rounded-sm bg-[#f9f2f4] px-1 py-[2px] text-[#c7254e]">
-							{device?.id}
-						</code>
-						<ClipboardCopy
-							onClick={() => navigator.clipboard.writeText(device?.id)}
-							className="mr-1 ml-[6px] inline-block h-4 w-4 cursor-pointer align-text-bottom text-[#818a91] dark:text-white"
-						/>
-					</div>
+					<DeviceIdCell
+						deviceId={device.id}
+						copyLabel={t('copy_id')}
+						copiedLabel={t('copied')}
+					/>
 				)
 			},
 		},
diff --git a/app/components/mydevices/dt/data-table.tsx b/app/components/mydevices/dt/data-table.tsx
index 925e0f99..c232dd15 100644
--- a/app/components/mydevices/dt/data-table.tsx
+++ b/app/components/mydevices/dt/data-table.tsx
@@ -87,11 +87,11 @@ export function DataTable<TData, TValue>({
 					onChange={(event) =>
 						table.getColumn('name')?.setFilterValue(event.target.value)
 					}
-					className="max-w-sm dark:border-white dark:text-white"
+					className="border-input bg-background text-foreground placeholder:text-muted-foreground max-w-sm"
 				/>
 			</div>
 
-			<div className="rounded-md border dark:border-white">
+			<div className="border-border bg-card overflow-hidden rounded-md border">
 				<Table>
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (
@@ -110,7 +110,7 @@ export function DataTable<TData, TValue>({
 						))}
 					</TableHeader>
 
-					<TableBody className="dark:text-dark-text">
+					<TableBody>
 						{table.getRowModel().rows?.length ? (
 							table.getRowModel().rows.map((row) => (
 								<TableRow
@@ -121,7 +121,7 @@ export function DataTable<TData, TValue>({
 									{row.getVisibleCells().map((cell, index) => (
 										<TableCell
 											key={cell.id}
-											className={'w-[' + tableColsWidth[index] + '%]'}
+											style={{ width: `${tableColsWidth[index]}%` }}
 										>
 											{flexRender(
 												cell.column.columnDef.cell,
@@ -135,7 +135,7 @@ export function DataTable<TData, TValue>({
 							<TableRow>
 								<TableCell
 									colSpan={columns.length}
-									className="dark:text-dark-text h-24 text-center"
+									className="text-muted-foreground h-24 text-center"
 								>
 									{t('no_results')}
 								</TableCell>
@@ -145,7 +145,7 @@ export function DataTable<TData, TValue>({
 				</Table>
 			</div>
 
-			<div className="dark:text-dark-text flex justify-center py-4">
+			<div className="text-foreground flex justify-center py-4">
 				<div className="flex flex-col items-center gap-3 sm:flex-row sm:gap-6">
 					<div className="flex flex-wrap items-center space-x-2">
 						<span className="text-sm font-medium">{t('rows_per_page')}</span>
@@ -155,7 +155,7 @@ export function DataTable<TData, TValue>({
 								table.setPageSize(Number(value))
 							}}
 						>
-							<SelectTrigger className="dark:border-dark-text h-8 w-16">
+							<SelectTrigger className="border-input bg-background text-foreground h-8 w-16">
 								<SelectValue />
 							</SelectTrigger>
 							<SelectContent>
diff --git a/app/components/mydevices/dt/device-id-cell.tsx b/app/components/mydevices/dt/device-id-cell.tsx
new file mode 100644
index 00000000..cb569d40
--- /dev/null
+++ b/app/components/mydevices/dt/device-id-cell.tsx
@@ -0,0 +1,55 @@
+import { Button } from '@/components/ui/button'
+import { CopyCheckIcon, CopyIcon } from 'lucide-react'
+import { toast } from '~/components/ui/use-toast'
+import { useCopyToClipboard } from '~/hooks/use-copy-to-clipboard'
+import { useTranslation } from 'react-i18next'
+
+export function DeviceIdCell({
+	deviceId,
+	copyLabel,
+	copiedLabel,
+}: {
+	deviceId: string
+	copyLabel: string
+	copiedLabel: string
+}) {
+	const { copiedToClipboard, copyToClipboard } = useCopyToClipboard()
+	const { t } = useTranslation('data-table')
+	const handleCopyId = async () => {
+		const copied = await copyToClipboard(deviceId)
+
+		if (!copied) return
+
+		toast({
+			title: t('copied'),
+			variant: 'success',
+		})
+	}
+
+	return (
+		<div className="flex min-w-0 items-center gap-1.5">
+			<code
+				title={deviceId}
+				className="border-border bg-muted text-muted-foreground max-w-56 truncate rounded-md border px-2 py-1 font-mono text-xs"
+			>
+				{deviceId}
+			</code>
+
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				className="text-muted-foreground hover:text-foreground h-7 w-7 shrink-0 p-0"
+				onClick={handleCopyId}
+				aria-label={copiedToClipboard ? copiedLabel : copyLabel}
+				title={copiedToClipboard ? copiedLabel : copyLabel}
+			>
+				{copiedToClipboard ? (
+					<CopyCheckIcon className="h-4 w-4" />
+				) : (
+					<CopyIcon className="h-4 w-4" />
+				)}
+			</Button>
+		</div>
+	)
+}
diff --git a/app/components/prevent-theme-flash.tsx b/app/components/prevent-theme-flash.tsx
new file mode 100644
index 00000000..552ecf67
--- /dev/null
+++ b/app/components/prevent-theme-flash.tsx
@@ -0,0 +1,37 @@
+import { ThemePreference } from '~/lib/theme'
+
+export function PreventFlashOnWrongTheme({
+	themePreference,
+}: {
+	themePreference: ThemePreference
+}) {
+	const script = `
+  /*
+    The server can read the saved theme preference from the cookie/database,
+    but it cannot know the browser's current "prefers-color-scheme" value.
+
+    This matters when the saved preference is "system":
+    - "light" and "dark" are explicit and can be rendered correctly by the server.
+    - "system" must be resolved in the browser because it depends on
+      window.matchMedia('(prefers-color-scheme: dark)').
+
+    Running this small script in the document head lets us update the <html>
+    class before the CSS is painted, preventing a flash of the wrong
+    theme during initial page load.
+  */
+(() => {
+  const preference = ${JSON.stringify(themePreference)};
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const theme = preference === 'dark' || (preference === 'system' && prefersDark)
+    ? 'dark'
+    : 'light';
+
+  const root = document.documentElement;
+  root.classList.remove('light', 'dark');
+  root.classList.add(theme);
+  root.style.colorScheme = theme;
+})();
+`
+
+	return <script dangerouslySetInnerHTML={{ __html: script }} />
+}
diff --git a/app/components/theme-select.tsx b/app/components/theme-select.tsx
new file mode 100644
index 00000000..8a5bd3d5
--- /dev/null
+++ b/app/components/theme-select.tsx
@@ -0,0 +1,89 @@
+import { useEffect } from 'react'
+import { useFetcher } from 'react-router'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '~/components/ui/select'
+import { ThemePreferenceSchema, type ThemePreference } from '~/lib/theme'
+import { useRootRouteLoaderData } from '~/root'
+
+function parseThemePreference(value: unknown): ThemePreference | null {
+	const result = ThemePreferenceSchema.safeParse(value)
+	return result.success ? result.data : null
+}
+
+function resolveThemePreference(preference: ThemePreference): 'light' | 'dark' {
+	if (preference === 'dark') return 'dark'
+	if (preference === 'light') return 'light'
+
+	return window.matchMedia('(prefers-color-scheme: dark)').matches
+		? 'dark'
+		: 'light'
+}
+
+function applyThemePreference(preference: ThemePreference) {
+	const resolvedTheme = resolveThemePreference(preference)
+	const root = document.documentElement
+
+	root.classList.remove('light', 'dark')
+	root.classList.add(resolvedTheme)
+	root.style.colorScheme = resolvedTheme
+}
+
+export function ThemeSelect() {
+	const { themePreference: serverThemePreference } = useRootRouteLoaderData()
+	const fetcher = useFetcher<{ ok: boolean }>()
+
+	const optimisticThemePreference = parseThemePreference(
+		fetcher.formData?.get('set-theme'),
+	)
+
+	const currentThemePreference =
+		optimisticThemePreference ?? serverThemePreference
+
+	useEffect(() => {
+		applyThemePreference(currentThemePreference)
+
+		if (currentThemePreference !== 'system') return
+
+		const media = window.matchMedia('(prefers-color-scheme: dark)')
+		const listener = () => applyThemePreference('system')
+
+		media.addEventListener('change', listener)
+
+		return () => {
+			media.removeEventListener('change', listener)
+		}
+	}, [currentThemePreference])
+
+	return (
+		<Select
+			value={currentThemePreference}
+			disabled={fetcher.state !== 'idle'}
+			onValueChange={(nextThemePreference) => {
+				const parsedThemePreference = parseThemePreference(nextThemePreference)
+
+				if (!parsedThemePreference) return
+
+				applyThemePreference(parsedThemePreference)
+
+				void fetcher.submit(
+					{ 'set-theme': parsedThemePreference },
+					{ method: 'post', action: '/' },
+				)
+			}}
+		>
+			<SelectTrigger className="border-input bg-background text-foreground w-36">
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem value="system">System</SelectItem>
+				<SelectItem value="light">Light</SelectItem>
+				<SelectItem value="dark">Dark</SelectItem>
+			</SelectContent>
+		</Select>
+	)
+}
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index 58c29352..8c543796 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
 				default:
 					'bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90',
 				destructive:
-					'bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90',
+					'bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-700 dark:text-slate-50 dark:hover:bg-red-900/90',
 				outline:
 					'border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50',
 				secondary:
diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
index e76d8a5f..72d86c0c 100644
--- a/app/components/ui/card.tsx
+++ b/app/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
 	<div
 		ref={ref}
 		className={cn(
-			'dark:bg-dark-boxes rounded-lg border border-slate-200 bg-white text-slate-950 shadow-xs dark:border-slate-800 dark:text-slate-50',
+			'border-border bg-card text-card-foreground rounded-lg border shadow-xs',
 			className,
 		)}
 		{...props}
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
 	<h3
 		ref={ref}
 		className={cn(
-			'text-2xl leading-none font-semibold tracking-tight',
+			'text-card-foreground text-2xl leading-none font-semibold tracking-tight',
 			className,
 		)}
 		{...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<p
 		ref={ref}
-		className={cn('text-sm text-slate-500 dark:text-slate-400', className)}
+		className={cn('text-muted-foreground text-sm', className)}
 		{...props}
 	/>
 ))
diff --git a/app/components/ui/checkbox.tsx b/app/components/ui/checkbox.tsx
index d9611407..e20d1b82 100644
--- a/app/components/ui/checkbox.tsx
+++ b/app/components/ui/checkbox.tsx
@@ -13,7 +13,8 @@ const Checkbox = React.forwardRef<
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
-			'peer h-4 w-4 shrink-0 rounded-sm border border-slate-200 border-slate-900 ring-offset-white focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=checked]:text-slate-50 dark:border-slate-50 dark:border-slate-800 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-800 dark:data-[state=checked]:bg-slate-50 dark:data-[state=checked]:text-slate-900',
+			'peer border-input bg-background ring-offset-background focus-visible:ring-ring h-4 w-4 shrink-0 rounded-sm border shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+			'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
index ff853693..cc559caf 100644
--- a/app/components/ui/input.tsx
+++ b/app/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
+					'border-input bg-background text-foreground ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
 					className,
 				)}
 				ref={ref}
@@ -19,6 +19,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 		)
 	},
 )
+
 Input.displayName = 'Input'
 
 export { Input }
diff --git a/app/components/ui/switch.tsx b/app/components/ui/switch.tsx
index c439cd8e..c2a18d24 100644
--- a/app/components/ui/switch.tsx
+++ b/app/components/ui/switch.tsx
@@ -11,7 +11,11 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SwitchPrimitives.Root
 		className={cn(
-			'peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=checked]:bg-dark-green inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+			'peer border-border inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border transition-colors',
+			'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+			'disabled:cursor-not-allowed disabled:opacity-50',
+			'data-[state=unchecked]:bg-muted',
+			'data-[state=checked]:border-primary data-[state=checked]:bg-primary',
 			className,
 		)}
 		{...props}
@@ -19,7 +23,8 @@ const Switch = React.forwardRef<
 	>
 		<SwitchPrimitives.Thumb
 			className={cn(
-				'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+				'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-md ring-0 transition-transform',
+				'data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
 			)}
 		/>
 	</SwitchPrimitives.Root>
diff --git a/app/components/ui/tabs.tsx b/app/components/ui/tabs.tsx
index 83bec41a..8bfa08b0 100644
--- a/app/components/ui/tabs.tsx
+++ b/app/components/ui/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
 	<TabsPrimitive.List
 		ref={ref}
 		className={cn(
-			'inline-flex h-10 items-center justify-center rounded-md bg-slate-100 p-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400',
+			'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
 			className,
 		)}
 		{...props}
@@ -29,7 +29,10 @@ const TabsTrigger = React.forwardRef<
 	<TabsPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			'inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap ring-offset-white transition-all focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-950 data-[state=active]:shadow-xs dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=active]:bg-slate-950 dark:data-[state=active]:text-slate-50',
+			'ring-offset-background inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all',
+			'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+			'disabled:pointer-events-none disabled:opacity-50',
+			'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
 			className,
 		)}
 		{...props}
@@ -44,7 +47,7 @@ const TabsContent = React.forwardRef<
 	<TabsPrimitive.Content
 		ref={ref}
 		className={cn(
-			'mt-2 ring-offset-white focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 focus-visible:outline-hidden dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300',
+			'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
 			className,
 		)}
 		{...props}
diff --git a/app/db/drizzle/0043_flowery_bedlam.sql b/app/db/drizzle/0043_flowery_bedlam.sql
new file mode 100644
index 00000000..1522485f
--- /dev/null
+++ b/app/db/drizzle/0043_flowery_bedlam.sql
@@ -0,0 +1,2 @@
+CREATE TYPE "public"."theme_preference" AS ENUM('light', 'dark', 'system');--> statement-breakpoint
+ALTER TABLE "user" ADD COLUMN "theme_preference" "theme_preference" DEFAULT 'system' NOT NULL;
\ No newline at end of file
diff --git a/app/db/drizzle/meta/0043_snapshot.json b/app/db/drizzle/meta/0043_snapshot.json
new file mode 100644
index 00000000..ab478500
--- /dev/null
+++ b/app/db/drizzle/meta/0043_snapshot.json
@@ -0,0 +1,1640 @@
+{
+  "id": "07740930-4c95-45f7-8d50-1115b8954086",
+  "prevId": "86afca58-d04e-41b3-8a69-9a4b4bfe24a4",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.device": {
+      "name": "device",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "website": {
+          "name": "website",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "tags": {
+          "name": "tags",
+          "type": "text[]",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "ARRAY[]::text[]"
+        },
+        "link": {
+          "name": "link",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "use_auth": {
+          "name": "use_auth",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "apiKey": {
+          "name": "apiKey",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "exposure": {
+          "name": "exposure",
+          "type": "exposure",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "status": {
+          "name": "status",
+          "type": "status",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'inactive'"
+        },
+        "model": {
+          "name": "model",
+          "type": "model",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'custom'"
+        },
+        "public": {
+          "name": "public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "archived_at": {
+          "name": "archived_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "orphaned_at": {
+          "name": "orphaned_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "date",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "latitude": {
+          "name": "latitude",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "longitude": {
+          "name": "longitude",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "sensor_wiki_model": {
+          "name": "sensor_wiki_model",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "device_user_id_user_id_fk": {
+          "name": "device_user_id_user_id_fk",
+          "tableFrom": "device",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.device_to_location": {
+      "name": "device_to_location",
+      "schema": "",
+      "columns": {
+        "device_id": {
+          "name": "device_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "location_id": {
+          "name": "location_id",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "time": {
+          "name": "time",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "device_to_location_device_id_device_id_fk": {
+          "name": "device_to_location_device_id_device_id_fk",
+          "tableFrom": "device_to_location",
+          "tableTo": "device",
+          "columnsFrom": [
+            "device_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "device_to_location_location_id_location_id_fk": {
+          "name": "device_to_location_location_id_location_id_fk",
+          "tableFrom": "device_to_location",
+          "tableTo": "location",
+          "columnsFrom": [
+            "location_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "device_to_location_device_id_location_id_time_pk": {
+          "name": "device_to_location_device_id_location_id_time_pk",
+          "columns": [
+            "device_id",
+            "location_id",
+            "time"
+          ]
+        }
+      },
+      "uniqueConstraints": {
+        "device_to_location_device_id_location_id_time_unique": {
+          "name": "device_to_location_device_id_location_id_time_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "device_id",
+            "location_id",
+            "time"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.measurement": {
+      "name": "measurement",
+      "schema": "",
+      "columns": {
+        "sensor_id": {
+          "name": "sensor_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "time": {
+          "name": "time",
+          "type": "timestamp (3) with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "value": {
+          "name": "value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "location_id": {
+          "name": "location_id",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "measurement_location_id_location_id_fk": {
+          "name": "measurement_location_id_location_id_fk",
+          "tableFrom": "measurement",
+          "tableTo": "location",
+          "columnsFrom": [
+            "location_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "measurement_sensor_id_time_unique": {
+          "name": "measurement_sensor_id_time_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "sensor_id",
+            "time"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.password": {
+      "name": "password",
+      "schema": "",
+      "columns": {
+        "hash": {
+          "name": "hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "password_user_id_user_id_fk": {
+          "name": "password_user_id_user_id_fk",
+          "tableFrom": "password",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.profile": {
+      "name": "profile",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "display_name": {
+          "name": "display_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "public": {
+          "name": "public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "profile_user_id_user_id_fk": {
+          "name": "profile_user_id_user_id_fk",
+          "tableFrom": "profile",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "profile_user_id_unique": {
+          "name": "profile_user_id_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "user_id"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.profile_image": {
+      "name": "profile_image",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "alt_text": {
+          "name": "alt_text",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "content_type": {
+          "name": "content_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "blob": {
+          "name": "blob",
+          "type": "bytea",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "profile_id": {
+          "name": "profile_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "profile_image_profile_id_profile_id_fk": {
+          "name": "profile_image_profile_id_profile_id_fk",
+          "tableFrom": "profile_image",
+          "tableTo": "profile",
+          "columnsFrom": [
+            "profile_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.sensor": {
+      "name": "sensor",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "unit": {
+          "name": "unit",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "sensor_type": {
+          "name": "sensor_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "icon": {
+          "name": "icon",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "status": {
+          "name": "status",
+          "type": "status",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'inactive'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "device_id": {
+          "name": "device_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "sensor_wiki_type": {
+          "name": "sensor_wiki_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "sensor_wiki_phenomenon": {
+          "name": "sensor_wiki_phenomenon",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "sensor_wiki_unit": {
+          "name": "sensor_wiki_unit",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "lastMeasurement": {
+          "name": "lastMeasurement",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "data": {
+          "name": "data",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "order": {
+          "name": "order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sensor_device_id_device_id_fk": {
+          "name": "sensor_device_id_device_id_fk",
+          "tableFrom": "sensor",
+          "tableTo": "device",
+          "columnsFrom": [
+            "device_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.user": {
+      "name": "user",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "unconfirmed_email": {
+          "name": "unconfirmed_email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "theme_preference": {
+          "name": "theme_preference",
+          "type": "theme_preference",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'system'"
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'user'"
+        },
+        "language": {
+          "name": "language",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'en_US'"
+        },
+        "email_is_confirmed": {
+          "name": "email_is_confirmed",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "accepted_tos_version_id": {
+          "name": "accepted_tos_version_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "accepted_tos_at": {
+          "name": "accepted_tos_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_accepted_tos_version_id_tos_version_id_fk": {
+          "name": "user_accepted_tos_version_id_tos_version_id_fk",
+          "tableFrom": "user",
+          "tableTo": "tos_version",
+          "columnsFrom": [
+            "accepted_tos_version_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "user_name_unique": {
+          "name": "user_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        },
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        },
+        "user_unconfirmed_email_unique": {
+          "name": "user_unconfirmed_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "unconfirmed_email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.location": {
+      "name": "location",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "bigserial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "location": {
+          "name": "location",
+          "type": "geometry(point)",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "location_index": {
+          "name": "location_index",
+          "columns": [
+            {
+              "expression": "location",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "gist",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "location_location_unique": {
+          "name": "location_location_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "location"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.log_entry": {
+      "name": "log_entry",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "content": {
+          "name": "content",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "public": {
+          "name": "public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": false
+        },
+        "device_id": {
+          "name": "device_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.refresh_token": {
+      "name": "refresh_token",
+      "schema": "",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "refresh_token_user_id_user_id_fk": {
+          "name": "refresh_token_user_id_user_id_fk",
+          "tableFrom": "refresh_token",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.token_revocation": {
+      "name": "token_revocation",
+      "schema": "",
+      "columns": {
+        "hash": {
+          "name": "hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "json",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.claim": {
+      "name": "claim",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "box_id": {
+          "name": "box_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "claim_expires_at_idx": {
+          "name": "claim_expires_at_idx",
+          "columns": [
+            {
+              "expression": "expires_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "claim_box_id_device_id_fk": {
+          "name": "claim_box_id_device_id_fk",
+          "tableFrom": "claim",
+          "tableTo": "device",
+          "columnsFrom": [
+            "box_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "unique_box_id": {
+          "name": "unique_box_id",
+          "nullsNotDistinct": false,
+          "columns": [
+            "box_id"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.integration": {
+      "name": "integration",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "service_url": {
+          "name": "service_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "service_key": {
+          "name": "service_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "icon": {
+          "name": "icon",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "order": {
+          "name": "order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "integration_slug_unique": {
+          "name": "integration_slug_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "slug"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.tos_user_state": {
+      "name": "tos_user_state",
+      "schema": "",
+      "columns": {
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "tos_version_id": {
+          "name": "tos_version_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "accepted_at": {
+          "name": "accepted_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "tos_user_state_user_idx": {
+          "name": "tos_user_state_user_idx",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "tos_user_state_user_id_user_id_fk": {
+          "name": "tos_user_state_user_id_user_id_fk",
+          "tableFrom": "tos_user_state",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "tos_user_state_tos_version_id_tos_version_id_fk": {
+          "name": "tos_user_state_tos_version_id_tos_version_id_fk",
+          "tableFrom": "tos_user_state",
+          "tableTo": "tos_version",
+          "columnsFrom": [
+            "tos_version_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "tos_user_state_user_id_tos_version_id_pk": {
+          "name": "tos_user_state_user_id_tos_version_id_pk",
+          "columns": [
+            "user_id",
+            "tos_version_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.tos_version": {
+      "name": "tos_version",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "version": {
+          "name": "version",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "body": {
+          "name": "body",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "effective_from": {
+          "name": "effective_from",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "accept_by": {
+          "name": "accept_by",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "tos_version_effective_from_idx": {
+          "name": "tos_version_effective_from_idx",
+          "columns": [
+            {
+              "expression": "effective_from",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "tos_version_accept_by_idx": {
+          "name": "tos_version_accept_by_idx",
+          "columns": [
+            {
+              "expression": "accept_by",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "tos_version_version_unique": {
+          "name": "tos_version_version_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "version"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.action_token": {
+      "name": "action_token",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "purpose": {
+          "name": "purpose",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token_hash": {
+          "name": "token_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "action_token_user_purpose_uq": {
+          "name": "action_token_user_purpose_uq",
+          "columns": [
+            {
+              "expression": "user_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "purpose",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "action_token_expires_at_idx": {
+          "name": "action_token_expires_at_idx",
+          "columns": [
+            {
+              "expression": "expires_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "action_token_user_id_user_id_fk": {
+          "name": "action_token_user_id_user_id_fk",
+          "tableFrom": "action_token",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "action_token_token_hash_unique": {
+          "name": "action_token_token_hash_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "token_hash"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {
+    "public.exposure": {
+      "name": "exposure",
+      "schema": "public",
+      "values": [
+        "indoor",
+        "outdoor",
+        "mobile",
+        "unknown"
+      ]
+    },
+    "public.model": {
+      "name": "model",
+      "schema": "public",
+      "values": [
+        "homeV2Lora",
+        "homeV2Ethernet",
+        "homeV2Wifi",
+        "homeEthernet",
+        "homeWifi",
+        "homeEthernetFeinstaub",
+        "homeWifiFeinstaub",
+        "luftdaten_sds011",
+        "luftdaten_sds011_dht11",
+        "luftdaten_sds011_dht22",
+        "luftdaten_sds011_bmp180",
+        "luftdaten_sds011_bme280",
+        "hackair_home_v2",
+        "senseBox:Edu",
+        "luftdaten.info",
+        "custom"
+      ]
+    },
+    "public.status": {
+      "name": "status",
+      "schema": "public",
+      "values": [
+        "active",
+        "inactive",
+        "old"
+      ]
+    },
+    "public.theme_preference": {
+      "name": "theme_preference",
+      "schema": "public",
+      "values": [
+        "light",
+        "dark",
+        "system"
+      ]
+    }
+  },
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {
+    "public.measurement_10min": {
+      "columns": {
+        "sensor_id": {
+          "name": "sensor_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "time": {
+          "name": "time",
+          "type": "timestamp (3) with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "avg_value": {
+          "name": "avg_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "total_values": {
+          "name": "total_values",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "min_value": {
+          "name": "min_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "max_value": {
+          "name": "max_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "name": "measurement_10min",
+      "schema": "public",
+      "isExisting": true,
+      "materialized": true
+    },
+    "public.measurement_1day": {
+      "columns": {
+        "sensor_id": {
+          "name": "sensor_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "time": {
+          "name": "time",
+          "type": "timestamp (3) with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "avg_value": {
+          "name": "avg_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "total_values": {
+          "name": "total_values",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "min_value": {
+          "name": "min_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "max_value": {
+          "name": "max_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "name": "measurement_1day",
+      "schema": "public",
+      "isExisting": true,
+      "materialized": true
+    },
+    "public.measurement_1hour": {
+      "columns": {
+        "sensor_id": {
+          "name": "sensor_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "time": {
+          "name": "time",
+          "type": "timestamp (3) with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "avg_value": {
+          "name": "avg_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "total_values": {
+          "name": "total_values",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "min_value": {
+          "name": "min_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "max_value": {
+          "name": "max_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "name": "measurement_1hour",
+      "schema": "public",
+      "isExisting": true,
+      "materialized": true
+    },
+    "public.measurement_1month": {
+      "columns": {
+        "sensor_id": {
+          "name": "sensor_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "time": {
+          "name": "time",
+          "type": "timestamp (3) with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "avg_value": {
+          "name": "avg_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "total_values": {
+          "name": "total_values",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "min_value": {
+          "name": "min_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "max_value": {
+          "name": "max_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "name": "measurement_1month",
+      "schema": "public",
+      "isExisting": true,
+      "materialized": true
+    },
+    "public.measurement_1year": {
+      "columns": {
+        "sensor_id": {
+          "name": "sensor_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "time": {
+          "name": "time",
+          "type": "timestamp (3) with time zone",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "avg_value": {
+          "name": "avg_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "total_values": {
+          "name": "total_values",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "min_value": {
+          "name": "min_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "max_value": {
+          "name": "max_value",
+          "type": "double precision",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "name": "measurement_1year",
+      "schema": "public",
+      "isExisting": true,
+      "materialized": true
+    }
+  },
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/app/db/drizzle/meta/_journal.json b/app/db/drizzle/meta/_journal.json
index e81ab9f3..350fa5c6 100644
--- a/app/db/drizzle/meta/_journal.json
+++ b/app/db/drizzle/meta/_journal.json
@@ -302,6 +302,13 @@
       "when": 1778596447793,
       "tag": "0042_medical_blackheart",
       "breakpoints": true
+    },
+    {
+      "idx": 43,
+      "version": "7",
+      "when": 1781082106170,
+      "tag": "0043_flowery_bedlam",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/app/db/models/user.server.ts b/app/db/models/user.server.ts
index 074d7f98..75b8e90a 100644
--- a/app/db/models/user.server.ts
+++ b/app/db/models/user.server.ts
@@ -11,6 +11,7 @@ import {
 	device,
 } from '~/db/schema'
 import { drizzleClient } from '~/db.server'
+import { ThemePreference } from '~/lib/theme'
 
 export async function getUserById(id: User['id']) {
 	return drizzleClient.query.user.findFirst({
@@ -117,16 +118,43 @@ export async function updateUserPassword(
 		.returning()
 }
 
-export async function updateUserlocale(
-	email: User['email'],
-	language: User['language'],
+type UpdateUserPreferencesArgs = {
+	language?: User['language']
+	themePreference?: ThemePreference
+}
+
+export async function updateUserPreferencesById(
+	id: User['id'],
+	args: UpdateUserPreferencesArgs,
 ) {
-	return drizzleClient
+	const values: Partial<Pick<User, 'language' | 'themePreference'>> = {}
+
+	if (args.language !== undefined) {
+		values.language = args.language
+	}
+
+	if (args.themePreference !== undefined) {
+		values.themePreference = args.themePreference
+	}
+
+	if (Object.keys(values).length === 0) {
+		throw new Error('No user preference fields provided')
+	}
+
+	const [updated] = await drizzleClient
 		.update(user)
 		.set({
-			language: language,
+			...values,
+			updatedAt: sql`NOW()`,
 		})
-		.where(eq(user.email, email))
+		.where(eq(user.id, id))
+		.returning()
+
+	if (!updated) {
+		throw new Error(`User ${id} not found`)
+	}
+
+	return updated
 }
 
 type UpdateUserArgs = {
diff --git a/app/db/schema/enum.ts b/app/db/schema/enum.ts
index 9d63619c..d02004a6 100644
--- a/app/db/schema/enum.ts
+++ b/app/db/schema/enum.ts
@@ -28,3 +28,9 @@ export const DeviceModelEnum = pgEnum('model', [
 	'luftdaten.info',
 	'custom',
 ])
+
+export const themePreference = pgEnum('theme_preference', [
+	'light',
+	'dark',
+	'system',
+])
diff --git a/app/db/schema/user.ts b/app/db/schema/user.ts
index 1cc8a34a..c7fa39c7 100644
--- a/app/db/schema/user.ts
+++ b/app/db/schema/user.ts
@@ -5,13 +5,13 @@ import {
 	relations,
 } from 'drizzle-orm'
 import { pgTable, boolean, text, timestamp } from 'drizzle-orm/pg-core'
-import { v4 as uuidv4 } from 'uuid'
 import { actionToken } from './action-token'
 import { device } from './device'
 import { password } from './password'
 import { profile } from './profile'
 import { refreshToken } from './refreshToken'
 import { tosVersion } from './tos'
+import { themePreference } from './enum'
 
 /**
  * Table
@@ -24,6 +24,9 @@ export const user = pgTable('user', {
 	name: text('name').notNull().unique(),
 	email: text('email').unique().notNull(),
 	unconfirmedEmail: text('unconfirmed_email').unique(),
+	themePreference: themePreference('theme_preference')
+		.default('system')
+		.notNull(),
 	role: text('role').$type<'admin' | 'user'>().default('user'),
 	language: text('language').default('en_US'),
 	emailIsConfirmed: boolean('email_is_confirmed').default(false),
diff --git a/app/lib/theme.ts b/app/lib/theme.ts
new file mode 100644
index 00000000..e7f89504
--- /dev/null
+++ b/app/lib/theme.ts
@@ -0,0 +1,10 @@
+import { z } from 'zod'
+
+export const ThemePreferenceSchema = z.enum(['light', 'dark', 'system'])
+
+export type ThemePreference = z.infer<typeof ThemePreferenceSchema>
+export type ResolvedTheme = 'light' | 'dark'
+
+export function getServerTheme(preference: ThemePreference): ResolvedTheme {
+	return preference === 'dark' ? 'dark' : 'light'
+}
diff --git a/app/root.tsx b/app/root.tsx
index 7e128f2a..b26489f7 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -17,12 +17,18 @@ import invariant from 'tiny-invariant'
 import { type Route } from './+types/root'
 import ErrorMessage from './components/error-message'
 import { Toaster } from './components/ui/toaster'
-import { updateUserlocale } from './db/models/user.server'
+import { updateUserPreferencesById } from './db/models/user.server'
 import { getEnv } from './lib/env.server'
 import { getLocale, i18nCookie, i18nextMiddleware } from './middleware/i18next'
 import { tosUiMiddleware } from './middleware/tos-ui.server'
 import { prometheusMetricsMiddleware } from './middleware/metrics.server'
 import { getUser } from './services/session-service.server'
+import { getServerTheme, ThemePreferenceSchema } from './lib/theme'
+import {
+	getThemePreference,
+	themeCookie,
+} from './services/theme-service.server'
+import { PreventFlashOnWrongTheme } from './components/prevent-theme-flash'
 
 export const middleware: Route.MiddlewareFunction[] = [
 	prometheusMetricsMiddleware,
@@ -89,42 +95,109 @@ export const meta: MetaFunction = () => [
 export async function loader({ context, request }: Route.LoaderArgs) {
 	const locale = getLocale(context)
 	const user = await getUser(request)
+
+	const cookieThemePreference = await getThemePreference(request)
+
+	const userThemePreferenceResult = ThemePreferenceSchema.safeParse(
+		user?.themePreference,
+	)
+
+	const themePreference = userThemePreferenceResult.success
+		? userThemePreferenceResult.data
+		: cookieThemePreference
+
+	const theme = getServerTheme(themePreference)
+
+	const headers = new Headers()
+
+	// setting the cookie is required here to make sure we keep the server and client
+	// instance of i18n in synch
+	headers.append('Set-Cookie', await i18nCookie.serialize(locale))
+
+	// If the user has a DB-backed preference, mirror it into the cookie too.
+	if (userThemePreferenceResult.success) {
+		headers.append('Set-Cookie', await themeCookie.serialize(themePreference))
+	}
+
 	return data(
 		{
-			user: user,
-			locale: locale,
+			user,
+			locale,
+			themePreference,
+			theme,
 			ENV: getEnv(),
 		},
-		// setting the cookie is required here to make sure we keep the server and client
-		// instance of i18n in synch
-		{
-			headers: { 'Set-Cookie': await i18nCookie.serialize(locale) },
-		},
+		{ headers },
 	)
 }
 
 export async function action({ context, request }: Route.ActionArgs) {
 	const formData = await request.formData()
-	const setLang = formData.get('set-language')?.toString() ?? null
 
-	if (setLang === null) return
+	const setTheme = formData.get('set-theme')
 
-	const locale = getLocale(context)
-	if (setLang === locale) return
+	if (setTheme !== null) {
+		const result = ThemePreferenceSchema.safeParse(setTheme)
+
+		if (!result.success) {
+			throw data('Invalid theme preference', { status: 400 })
+		}
+
+		const user = await getUser(request)
+		const headers = new Headers()
+
+		if (user) {
+			await updateUserPreferencesById(user.id, {
+				themePreference: result.data,
+			})
+		}
+
+		headers.append('Set-Cookie', await themeCookie.serialize(result.data))
 
-	const user = await getUser(request)
-	// updating the user locale is sufficient,
-	// because the loader will set the cookie to
-	// the user locale on the next request
-	if (user) await updateUserlocale(user.email, setLang)
-	else {
 		return data(
-			{},
 			{
-				headers: { 'Set-Cookie': await i18nCookie.serialize(setLang) },
+				ok: true,
+				themePreference: result.data,
 			},
+			{ headers },
 		)
 	}
+
+	const setLang = formData.get('set-language')?.toString() ?? null
+
+	if (setLang === null) return null
+
+	const locale = getLocale(context)
+
+	if (setLang === locale) return null
+
+	const user = await getUser(request)
+
+	if (user) {
+		// updating the user locale is sufficient,
+		// because the loader will set the cookie to
+		// the user locale on the next request
+		await updateUserPreferencesById(user.id, {
+			language: setLang,
+		})
+
+		return data({
+			ok: true,
+			locale: setLang,
+		})
+	}
+
+	return data(
+		{
+			ok: true,
+			locale: setLang,
+		},
+		{
+			headers: {
+				'Set-Cookie': await i18nCookie.serialize(setLang),
+			},
+		},
+	)
 }
 
 /**
@@ -139,7 +212,7 @@ export const useRootRouteLoaderData = () => {
 }
 
 export default function App({
-	loaderData: { locale, ENV },
+	loaderData: { locale, ENV, themePreference, theme },
 }: Route.ComponentProps) {
 	const { i18n } = useTranslation()
 	useEffect(() => {
@@ -152,11 +225,12 @@ export default function App({
 		<html
 			lang={i18n.language}
 			dir={i18n.dir(i18n.language)}
-			className={clsx('light h-full')}
+			className={clsx(theme, 'h-full')}
+			suppressHydrationWarning
 		>
 			<head>
 				<Meta />
-				{/* <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} /> */}
+				<PreventFlashOnWrongTheme themePreference={themePreference} />
 				<Links />
 			</head>
 			<body className="dark:bg-dark-background dark:text-dark-text h-full">
@@ -183,15 +257,17 @@ export default function App({
  */
 export function ErrorBoundary() {
 	return (
-		<html className={clsx('light h-full')}>
+		<html className="light h-full" suppressHydrationWarning>
 			<head>
 				<Meta />
+				<PreventFlashOnWrongTheme themePreference="system" />
 				<Links />
 			</head>
-			<body className="dark:bg-dark-background dark:text-dark-text h-full">
+			<body className="bg-background text-foreground h-full">
 				<div className="flex h-screen w-screen items-center justify-center">
 					<ErrorMessage />
 				</div>
+				<Scripts />
 			</body>
 		</html>
 	)
diff --git a/app/routes/device.$deviceId.edit.general.tsx b/app/routes/device.$deviceId.edit.general.tsx
index 30e66352..3bad0c34 100644
--- a/app/routes/device.$deviceId.edit.general.tsx
+++ b/app/routes/device.$deviceId.edit.general.tsx
@@ -1020,15 +1020,18 @@ Installed on the school roof.
 							</div>
 
 							<div className="flex justify-end">
-								<button
-									type="submit"
-									name="intent"
-									value="delete"
-									disabled={!passwordDelVal || isDeleteSubmitting}
-									className="mb-5 rounded border border-gray-200 px-4 py-2 text-black hover:bg-[#e6e6e6] disabled:border-[#ccc] disabled:text-[#8a8989]"
-								>
-									{isDeleteSubmitting ? t('saving') : t('delete_device')}
-								</button>
+								<div className="flex justify-end">
+									<Button
+										type="submit"
+										name="intent"
+										value="delete"
+										variant="destructive"
+										disabled={!passwordDelVal || isDeleteSubmitting}
+										className="mb-5"
+									>
+										{isDeleteSubmitting ? t('saving') : t('delete_device')}
+									</Button>
+								</div>
 							</div>
 						</Form>
 					</div>
diff --git a/app/routes/device.$deviceId.edit.location.tsx b/app/routes/device.$deviceId.edit.location.tsx
index 0536c26c..7b657520 100644
--- a/app/routes/device.$deviceId.edit.location.tsx
+++ b/app/routes/device.$deviceId.edit.location.tsx
@@ -413,7 +413,7 @@ export default function EditLocation() {
 						<button
 							type="button"
 							onClick={resetToOriginalLocation}
-							className="mt-4 mb-10 font-semibold text-[#337ab7] hover:text-[#23527c] hover:underline disabled:cursor-not-allowed disabled:text-gray-400 disabled:no-underline"
+							className="mt-4 mb-10 font-semibold text-blue-500 hover:text-blue-700 hover:underline disabled:cursor-not-allowed disabled:text-gray-400 disabled:no-underline"
 						>
 							{t('reset_to_original_location')}
 						</button>
diff --git a/app/routes/device.$deviceId.edit.security.tsx b/app/routes/device.$deviceId.edit.security.tsx
index 0ad5a09d..a81bad88 100644
--- a/app/routes/device.$deviceId.edit.security.tsx
+++ b/app/routes/device.$deviceId.edit.security.tsx
@@ -27,6 +27,8 @@ import {
 	updateDevice,
 } from '~/db/models/device.server'
 import { getUserId } from '~/services/session-service.server'
+import { Button } from '~/components/ui/button'
+import { cn } from '~/lib/utils'
 
 type SecurityAutosaveValues = {
 	authEnabled: boolean
@@ -376,14 +378,17 @@ export default function EditBoxSecurity() {
 						></Trans>
 					</p>
 
-					<button
+					<Button
 						type="submit"
-						className="btn flex items-center space-x-2 bg-[#e9e9ed] disabled:opacity-40"
+						variant="secondary"
 						disabled={!authEnabled || isGeneratingNewKey}
+						className="inline-flex items-center gap-2"
 					>
-						<RefreshCw className="mr-2 inline h-4 w-4 align-sub" />
+						<RefreshCw
+							className={cn('h-4 w-4', isGeneratingNewKey && 'animate-spin')}
+						/>
 						{t('device_security.generate_new_key_button')}
-					</button>
+					</Button>
 				</Callout>
 			</generateKeyFetcher.Form>
 		</div>
diff --git a/app/routes/device.$deviceId.edit.sensors.tsx b/app/routes/device.$deviceId.edit.sensors.tsx
index 387517b2..209996f6 100644
--- a/app/routes/device.$deviceId.edit.sensors.tsx
+++ b/app/routes/device.$deviceId.edit.sensors.tsx
@@ -40,6 +40,9 @@ import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { useToast } from '@/components/ui/use-toast'
 import { useTranslation } from 'react-i18next'
 import { Button } from '~/components/ui/button'
+import { Callout } from '~/components/ui/alert'
+import { Input } from '~/components/ui/input'
+import { Label } from '~/components/ui/label'
 
 //*****************************************************
 export async function loader({ request, params }: Route.LoaderArgs) {
@@ -171,8 +174,8 @@ export default function EditBoxSensors() {
 				}, 2000)
 
 				toast({
-					title: t('copied'),
-					description: t('sensor_id_copied'),
+					title: t('sensor_id_copied'),
+					variant: 'success',
 				})
 			} catch {
 				toast({
@@ -235,13 +238,13 @@ export default function EditBoxSensors() {
 						</div>
 
 						{/* divider */}
-						<hr className="my-3 mt-6 h-px border-0 bg-[#dcdada] dark:bg-gray-700" />
+						<hr className="bg-border my-3 mt-6 h-px border-0" />
 
-						<div className="my-5 rounded border border-[#faebcc] bg-[#fcf8e3] p-4 text-[#8a6d3b]">
+						<Callout variant="warning">
 							<p>{t('sensor_delete_warning')}</p>
-						</div>
+						</Callout>
 
-						<ul className="mt-0 rounded-[3px] border border-solid border-[#d1d5da] pt-0">
+						<ul className="border-border bg-card text-card-foreground mt-2 overflow-hidden rounded-md border">
 							{sensorsData?.map((sensor: any, index: number) => {
 								return (
 									<li
@@ -262,7 +265,7 @@ export default function EditBoxSensors() {
 											setSensorsData(reordered)
 											dragIndexRef.current = null
 										}}
-										className="border-t border-solid border-[#e1e4e8] p-4"
+										className="border-border hover:bg-muted/30 border-t p-4 first:border-t-0"
 									>
 										<div className="grid grid-cols-12">
 											{/* drag handle */}
@@ -295,15 +298,14 @@ export default function EditBoxSensors() {
 															{/* down arrow icon */}
 															<DropdownMenu>
 																<DropdownMenuTrigger asChild>
-																	<button
-																		id="dropdownDefaultButton"
+																	<Button
 																		type="button"
-																		// className="btn btn-default"
-																		className="btn btn-default rounded-tl-none rounded-bl-none border-l-0 px-px pt-1.25 pb-1"
-																		data-dropdown-toggle="dropdown"
+																		variant="outline"
+																		size="sm"
+																		className="rounded-l-none border-l-0 px-2"
 																	>
-																		<ChevronDownIcon className="m-0 inline h-6 w-6 p-0" />
-																	</button>
+																		<ChevronDownIcon className="h-4 w-4" />
+																	</Button>
 																</DropdownMenuTrigger>
 																<DropdownMenuContent
 																	align="end"
@@ -321,7 +323,7 @@ export default function EditBoxSensors() {
 																						sensor.icon = icon.id
 																					}}
 																				>
-																					<Icon className="mr-1 ml-1.5 inline-block h-4 w-4 align-text-bottom text-[#818a91]" />
+																					<Icon className="text-muted-foreground h-4 w-4" />
 																				</DropdownMenuItem>
 																			)
 																		})}
@@ -339,50 +341,52 @@ export default function EditBoxSensors() {
 												)}
 											</div>
 											{/* middle -> sensor attributes */}
-											<div className="col-span-8 border-r border-solid border-[#e1e4e8] sm:col-span-8">
+											<div className="border-border col-span-8 border-r sm:col-span-8">
 												{/* shown by default */}
 												{!sensor?.editing && (
 													<span className="table-cell align-middle leading-[1.75]">
 														<strong className="block">
 															{t('phenomenon')}:
-															<span className="px-1 text-[#626161]">
+															<span className="text-muted-foreground px-1">
 																{sensor?.title}
 															</span>
 														</strong>
-														<strong>ID: </strong>
-														<code className="rounded-sm bg-[#f9f2f4] px-1 py-0.5 text-[#c7254e]">
-															{sensor?.id}
-															<button
-																type="button"
-																aria-label={`Copy sensor ID ${sensor?.id}`}
-																title="Copy sensor ID"
-																onClick={(e) => {
-																	e.stopPropagation()
-																	void handleCopySensorId(sensor?.id)
-																}}
-															>
-																{copiedSensorId === sensor?.id ? (
-																	<LucideCopyCheck
-																		size={20.5}
-																		className={`mr-1 ml-1.5 inline-block h-4 w-4 align-text-bottom text-green-700`}
-																	/>
-																) : (
-																	<LucideCopy
-																		size={20.5}
-																		className={`mr-1 ml-1.5 inline-block h-4 w-4 align-text-bottom text-[#818a91]`}
-																	/>
-																)}
-															</button>
-														</code>
-														<strong className="block">
+														<span className="text-foreground inline-flex max-w-full items-center gap-1">
+															<strong className="text-foreground">ID:</strong>
+															<div className="bg-muted text-muted-foreground border-border rounded-md border">
+																<code>{sensor.id}</code>
+																<button
+																	type="button"
+																	aria-label={`Copy sensor ID ${sensor?.id}`}
+																	title="Copy sensor ID"
+																	onClick={(e) => {
+																		e.stopPropagation()
+																		void handleCopySensorId(sensor?.id)
+																	}}
+																>
+																	{copiedSensorId === sensor?.id ? (
+																		<LucideCopyCheck
+																			size={20.5}
+																			className={`mr-1 ml-1.5 inline-block h-4 w-4 align-text-bottom text-green-700`}
+																		/>
+																	) : (
+																		<LucideCopy
+																			size={20.5}
+																			className={`mr-1 ml-1.5 inline-block h-4 w-4 align-text-bottom text-[#818a91]`}
+																		/>
+																	)}
+																</button>
+															</div>
+														</span>
+														<strong className="text-foreground block">
 															{t('unit')}:
-															<span className="px-1 text-[#626161]">
+															<span className="text-muted-foreground px-1 font-normal">
 																{sensor?.unit}
 															</span>
 														</strong>
-														<strong className="block">
+														<strong className="text-foreground block">
 															{t('type')}:
-															<span className="px-1 text-[#626161]">
+															<span className="text-muted-foreground px-1 font-normal">
 																{sensor?.sensorType}
 															</span>
 														</strong>
@@ -392,72 +396,71 @@ export default function EditBoxSensors() {
 												{/* shown when edit button clicked */}
 												{sensor?.editing && (
 													<div className="mb-4 pr-4">
-														<div className="mb-4">
-															<label
-																htmlFor="phenomenom"
-																className="mb-1 inline-block font-bold"
+														<div className="mb-4 space-y-1.5">
+															<Label
+																htmlFor={`phenomenon-${sensor.id ?? index}`}
+																className="font-bold"
 															>
 																{t('phenomenon')}:
-															</label>
-															<input
+															</Label>
+
+															<Input
+																id={`phenomenon-${sensor.id ?? index}`}
 																type="text"
 																defaultValue={sensor?.title}
 																placeholder="Phenomenon"
-																className="form-control"
+																aria-invalid={sensor.notValidInput}
 																onChange={(e) => {
 																	setTepmState(!tepmState)
 																	sensor.title = e.target.value
-																	if (sensor.title.length === 0) {
-																		sensor.notValidInput = true
-																	} else {
-																		sensor.notValidInput = false
-																	}
+																	sensor.notValidInput =
+																		sensor.title.length === 0
 																}}
 															/>
 														</div>
-														<div className="mb-4">
-															<label
-																htmlFor="unit"
-																className="mb-1 inline-block font-bold"
+
+														<div className="mb-4 space-y-1.5">
+															<Label
+																htmlFor={`unit-${sensor.id ?? index}`}
+																className="font-bold"
 															>
 																{t('unit')}:
-															</label>
-															<input
+															</Label>
+
+															<Input
+																id={`unit-${sensor.id ?? index}`}
 																type="text"
 																defaultValue={sensor?.unit}
 																placeholder="Unit"
-																className="form-control"
+																aria-invalid={sensor.notValidInput}
 																onChange={(e) => {
 																	setTepmState(!tepmState)
 																	sensor.unit = e.target.value
-																	if (sensor.unit.length === 0) {
-																		sensor.notValidInput = true
-																	} else {
-																		sensor.notValidInput = false
-																	}
+																	sensor.notValidInput =
+																		sensor.unit.length === 0
 																}}
 															/>
 														</div>
-														<div className="mb-4">
-															<label
-																htmlFor="type"
-																className="mb-1 inline-block font-bold"
+
+														<div className="mb-4 space-y-1.5">
+															<Label
+																htmlFor={`type-${sensor.id ?? index}`}
+																className="font-bold"
 															>
-																{t('type')}
-															</label>
-															<input
+																{t('type')}:
+															</Label>
+
+															<Input
+																id={`type-${sensor.id ?? index}`}
 																type="text"
 																defaultValue={sensor?.sensorType}
 																placeholder="Type"
-																className="form-control"
+																aria-invalid={sensor.notValidInput}
 																onChange={(e) => {
 																	setTepmState(!tepmState)
 																	sensor.sensorType = e.target.value
-																	if (sensor.sensorType.length === 0) {
-																		sensor.notValidInput = true
-																	} else {
-																		sensor.notValidInput = false
-																	}
+																	sensor.notValidInput =
+																		sensor.sensorType.length === 0
 																}}
 															/>
 														</div>
@@ -494,53 +497,55 @@ export default function EditBoxSensors() {
 													{!sensor?.editing && !sensor?.deleting && (
 														<span>
 															{/* edit button */}
-															{/* ToDo: why onClick not updating the state unless dummy unrelated state is updated */}
-															<button
+															<Button
 																type="button"
+																variant="secondary"
+																size="sm"
+																className="mt-2 mb-1 flex gap-1"
 																onClick={() => {
 																	setTepmState(!tepmState)
 																	sensor.editing = true
 																}}
-																className="mt-2 mb-1 block rounded-[3px] border-[#2e6da4] bg-[#337ab7] px-1.25 py-0.75 pt-1 text-[14px] leading-[1.6] text-[#fff] hover:border-[#204d74] hover:bg-[#286090]"
 															>
-																<Edit className="mr-1 inline-block h-4.25 w-3.75 align-sub" />
+																<Edit className="h-4 w-4" />
 																{t('edit')}
-															</button>
+															</Button>
 
 															{/* delete button */}
-															<button
+															<Button
 																type="button"
+																variant="destructive"
+																size="sm"
+																className="mt-2 mb-1 flex gap-1"
 																onClick={() => {
 																	setTepmState(!tepmState)
 																	sensor.deleting = true
 																	sensor.deleted = true
-																	return false
 																}}
-																className="mt-2 mb-1 block rounded-[3px] border-[#d43f3a] bg-[#d9534f] px-1.25 py-0.75 pt-1 text-[14px] leading-[1.6] text-[#fff] hover:border-[#ac2925] hover:bg-[#c9302c]"
 															>
-																<Trash2 className="mr-1 inline-block h-4.25 w-4 align-sub" />
+																<Trash2 className="h-4 w-4" />
 																{t('delete')}
-															</button>
+															</Button>
 														</span>
 													)}
 												</span>
 
 												{sensor?.editing && (
-													<span className="table-cell h-55.5 align-middle leading-[1.6]">
-														{/* invalid input text */}
+													<div className="table-cell h-55.5 align-middle leading-[1.6]">
 														{sensor?.notValidInput && (
-															<span className="bg-[#d9534f] p-0.75 leading-[1.6] text-[#fff]">
+															<div className="bg-destructive text-destructive-foreground mb-2 rounded-md px-2 py-1 text-xs font-medium">
 																{t('fill_required_fields')}
-															</span>
+															</div>
 														)}
 
-														{/* save button */}
-														<button
+														<Button
 															type="button"
+															size="sm"
 															disabled={sensor?.notValidInput}
-															className="mt-2 mb-1 block rounded-[3px] border-[#2e6da4] bg-[#337ab7] px-1.25 py-0.75 pt-1 text-[14px] leading-[1.6] text-[#fff] hover:border-[#204d74] hover:bg-[#286090] disabled:cursor-not-allowed"
+															className="mt-2 mb-1 flex w-full items-center justify-start gap-1"
 															onClick={() => {
 																setTepmState(!tepmState)
+
 																if (
 																	sensor.title &&
 																	sensor.unit &&
@@ -554,31 +559,32 @@ export default function EditBoxSensors() {
 																}
 															}}
 														>
-															<Save className="mr-1 inline-block h-4.25 w-3.75 align-sub" />
+															<Save className="h-4 w-4" />
 															{t('save')}
-														</button>
+														</Button>
 
-														{/* cancel button */}
-														<button
+														<Button
 															type="button"
+															variant="outline"
+															size="sm"
+															className="mt-2 mb-1 flex w-full items-center justify-start gap-1"
 															onClick={() => {
 																setTepmState(!tepmState)
+
 																if (sensor?.new) {
 																	sensorsData.splice(index, 1)
 																} else {
 																	sensor.editing = false
-																	//* restore data
 																	sensor.title = data[index].title
 																	sensor.unit = data[index].unit
 																	sensor.sensorType = data[index].sensorType
 																}
 															}}
-															className="mt-2 mb-1 block rounded-[3px] border-[#ac2925] bg-[#d9534f] px-1.25 py-0.75 pt-1 text-[14px] leading-[1.6] text-[#fff] hover:border-[#ac2925] hover:bg-[#c9302c]"
 														>
-															<X className="mr-1 inline-block h-4.25 w-3.75 scale-[1.2] align-sub" />
+															<X className="h-4 w-4" />
 															{t('cancel')}
-														</button>
-													</span>
+														</Button>
+													</div>
 												)}
 											</div>
 										</div>
diff --git a/app/routes/device.$deviceId.edit.tsx b/app/routes/device.$deviceId.edit.tsx
index f4767055..3fd0bfdc 100644
--- a/app/routes/device.$deviceId.edit.tsx
+++ b/app/routes/device.$deviceId.edit.tsx
@@ -139,7 +139,7 @@ export default function EditBox() {
 				</ToastPrimitive.Provider>
 			</div>
 
-			<div className="rounded text-[#676767]">
+			<div className="rounded">
 				<ArrowLeft className="mr-2 inline h-5 w-5" />
 				<Link to="/profile/me">{t('back_to_dashboard')}</Link>
 			</div>
diff --git a/app/routes/device.new.tsx b/app/routes/device.new.tsx
index 740c40f5..a24cabcf 100644
--- a/app/routes/device.new.tsx
+++ b/app/routes/device.new.tsx
@@ -75,7 +75,7 @@ export default function NewDevice() {
 	return (
 		<div className="flex h-screen flex-col">
 			<NavBar />
-			<div className="grow overflow-auto bg-gray-100">
+			<div className="bg-background grow overflow-auto">
 				<div className="flex h-full w-full justify-center py-10">
 					<div className="dark:text-dark-text flex h-full w-full items-center justify-center rounded-lg p-6 dark:bg-transparent dark:shadow-none">
 						<ValidationStepperForm />
diff --git a/app/routes/explore.tsx b/app/routes/explore.tsx
index d829b80c..a8afa0a6 100644
--- a/app/routes/explore.tsx
+++ b/app/routes/explore.tsx
@@ -333,7 +333,8 @@ export default function Explore() {
 				closeOnClick: false,
 				closeOnMove: true,
 				anchor: 'left',
-				offset: [15, 0],
+				offset: [15, -25],
+				className: 'device-name-popup',
 			}),
 		[],
 	)
@@ -490,7 +491,7 @@ export default function Explore() {
 				}
 				deviceNamePopup
 					.setLngLat(coordinates as LngLatLike)
-					.setHTML(feature.properties.name)
+					.setText(feature.properties.name ?? '')
 					.addTo(e.target)
 			} else {
 				e.target.getCanvas().style.cursor = ''
diff --git a/app/routes/profile.$username.tsx b/app/routes/profile.$username.tsx
index 290d9d88..f1576668 100644
--- a/app/routes/profile.$username.tsx
+++ b/app/routes/profile.$username.tsx
@@ -122,11 +122,11 @@ export default function ProfilePage() {
 	const isOwner = !!profile?.userId && requestingUserId === profile.userId
 
 	return (
-		<div className="h-full bg-slate-100">
+		<div className="bg-background text-foreground min-h-screen">
 			<NavBar />
 			<div className="flex w-full flex-col gap-6 p-8 md:flex-row md:gap-8 md:pt-4">
-				<div className="dark:bg-dark-background flex w-full flex-col gap-6 rounded-xl bg-white p-6 shadow-lg md:w-1/3">
-					<div className="dark:text-dark-text flex items-center gap-4">
+				<div className="border-border bg-card text-card-foreground flex w-full flex-col gap-6 rounded-xl border p-6 shadow-sm md:w-1/3">
+					<div className="flex items-center gap-4">
 						<Avatar className="h-16 w-16">
 							{profile?.profileImage?.id ? (
 								<AvatarImage
@@ -139,13 +139,13 @@ export default function ProfilePage() {
 							</AvatarFallback>
 						</Avatar>
 						<div>
-							<h3 className="dark:text-dark-text text-2xl font-semibold">
+							<h3 className="text-title text-2xl font-semibold">
 								{profile?.displayName || ''}
 							</h3>
-							<h4 className="dark:text-dark-text text-lg">
+							<h4 className="text-foreground text-lg">
 								{profile?.user?.name || ''}
 							</h4>
-							<p className="text-sm text-gray-500 dark:text-gray-400">
+							<p className="text-muted-foreground text-sm">
 								{t('user_since')}{' '}
 								{new Date(profile?.user?.createdAt || '').toLocaleDateString(
 									t('locale'),
@@ -155,24 +155,24 @@ export default function ProfilePage() {
 					</div>
 
 					<div className="grid grid-cols-2 gap-4 md:pt-6">
-						<div className="dark:bg-dark-boxes flex flex-col items-center rounded-lg bg-gray-100 p-4">
-							<span className="dark:text-dark-green text-2xl font-bold">
+						<div className="border-border bg-muted/60 flex flex-col items-center rounded-lg border p-4">
+							<span className="text-primary text-2xl font-bold">
 								{formatCount(profile?.user?.devices.length || 0)}
 							</span>
 							<span className="text-sm text-gray-500 dark:text-gray-400">
 								{t('devices')}
 							</span>
 						</div>
-						<div className="dark:bg-dark-boxes flex flex-col items-center rounded-lg bg-gray-100 p-4">
-							<span className="dark:text-dark-green text-2xl font-bold">
+						<div className="border-border bg-muted/60 flex flex-col items-center rounded-lg border p-4">
+							<span className="text-primary text-2xl font-bold">
 								{sensorsCount}
 							</span>
 							<span className="text-sm text-gray-500 dark:text-gray-400">
 								{t('sensors')}
 							</span>
 						</div>
-						<div className="dark:bg-dark-boxes flex flex-col items-center rounded-lg bg-gray-100 p-4">
-							<span className="dark:text-dark-green text-2xl font-bold">
+						<div className="border-border bg-muted/60 flex flex-col items-center rounded-lg border p-4">
+							<span className="text-primary text-2xl font-bold">
 								{measurementsCount}
 							</span>
 							<span className="text-sm text-gray-500 dark:text-gray-400">
@@ -183,8 +183,8 @@ export default function ProfilePage() {
 				</div>
 
 				<div className="flex w-full flex-col gap-6 md:w-2/3">
-					<div className="dark:bg-dark-background rounded-xl bg-white p-6 shadow-lg">
-						<div className="text-light-green dark:text-dark-green mb-4 text-3xl font-semibold">
+					<div className="border-border bg-card text-card-foreground rounded-xl border p-6 shadow-sm">
+						<div className="text-primary mb-4 text-3xl font-semibold">
 							{t('devices')}
 						</div>
 
diff --git a/app/routes/settings.account.tsx b/app/routes/settings.account.tsx
index 2ca626ef..820162e9 100644
--- a/app/routes/settings.account.tsx
+++ b/app/routes/settings.account.tsx
@@ -26,19 +26,11 @@ import {
 } from '~/components/ui/card'
 import { Input } from '~/components/ui/input'
 import { Label } from '~/components/ui/label'
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '~/components/ui/select'
 import { useToast } from '~/components/ui/use-toast'
 import {
 	getUserById,
 	updateUserEmail,
 	updateUserName,
-	updateUserlocale,
 	verifyLogin,
 	getUserByAnyEmail,
 	updateUserPassword,
@@ -152,12 +144,10 @@ export async function action({ request }: Route.ActionArgs) {
 
 	const name = String(formData.get('name') ?? '').trim()
 	const email = String(formData.get('email') ?? '').trim()
-	const language = String(formData.get('language') ?? '').trim()
 	const currentPassword = String(formData.get('passwordUpdate') ?? '')
 
 	invariant(typeof name === 'string', 'name must be a string')
 	invariant(typeof email === 'string', 'email must be a string')
-	invariant(typeof language === 'string', 'language must be a string')
 	invariant(typeof currentPassword === 'string', 'password must be a string')
 
 	const pendingEmail = (user.unconfirmedEmail ?? '').trim()
@@ -169,10 +159,8 @@ export async function action({ request }: Route.ActionArgs) {
 			(!hasPendingEmail && email !== user.email))
 
 	const wantsNameChange = name.length > 0 && name !== user.name
-	const wantsLanguageChange = language.length > 0 && language !== user.language
 
-	const wantsAnyChange =
-		wantsNameChange || wantsLanguageChange || wantsEmailChange
+	const wantsAnyChange = wantsNameChange || wantsEmailChange
 
 	if (!wantsAnyChange) {
 		return data(
@@ -234,10 +222,6 @@ export async function action({ request }: Route.ActionArgs) {
 		await updateUserName(user.email, name)
 	}
 
-	if (wantsLanguageChange) {
-		await updateUserlocale(user.email, language)
-	}
-
 	if (wantsEmailChange) {
 		const [updatedUser] = await updateUserEmail(user, email)
 
@@ -313,7 +297,6 @@ export default function EditUserProfilePage() {
 
 	const [name, setName] = useState(userData?.name ?? '')
 	const [email, setEmail] = useState(emailShown)
-	const [lang, setLang] = useState(userData?.language ?? 'en_US')
 
 	const emailChanged = email.trim() !== emailShown.trim()
 
@@ -347,7 +330,6 @@ export default function EditUserProfilePage() {
 
 	useEffect(() => {
 		setName(userData?.name ?? '')
-		setLang(userData?.language ?? 'en_US')
 		setEmail(emailShown)
 	}, [userData, emailShown])
 
@@ -422,14 +404,12 @@ export default function EditUserProfilePage() {
 	}, [resendFetcher.state, resendFetcher.data, toast, t])
 
 	const saveDisabled =
-		name === (userData?.name ?? '') &&
-		lang === (userData?.language ?? 'en_US') &&
-		email.trim() === emailShown.trim()
+		name === (userData?.name ?? '') && email.trim() === emailShown.trim()
 
 	return (
 		<>
 			<Form ref={profileFormRef} method="post" className="space-y-6" noValidate>
-				<Card className="dark:bg-dark-boxes dark:border-white">
+				<Card className="border-border">
 					<CardHeader>
 						<CardTitle>{t('account_information')}</CardTitle>
 						<CardDescription>{t('update_basic_details')}</CardDescription>
@@ -515,19 +495,6 @@ export default function EditUserProfilePage() {
 							) : null}
 						</div>
 
-						<div className="grid gap-2">
-							<Label htmlFor="language">{t('language')}</Label>
-							<Select value={lang} onValueChange={setLang} name="language">
-								<SelectTrigger className="dark:border-white">
-									<SelectValue placeholder={t('select_language')} />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectItem value="en_US">English</SelectItem>
-									<SelectItem value="de_DE">Deutsch</SelectItem>
-								</SelectContent>
-							</Select>
-						</div>
-
 						<div className="flex items-center justify-between gap-4 rounded-lg border p-4 dark:border-white">
 							<div className="space-y-1">
 								<p className="font-medium">{t('update_password')}</p>
@@ -557,6 +524,7 @@ export default function EditUserProfilePage() {
 					</CardFooter>
 				</Card>
 			</Form>
+
 			<Dialog
 				open={emailConfirmOpen}
 				onOpenChange={(open) => {
diff --git a/app/routes/settings.delete.tsx b/app/routes/settings.delete.tsx
index a429b0f0..e9281003 100644
--- a/app/routes/settings.delete.tsx
+++ b/app/routes/settings.delete.tsx
@@ -91,7 +91,7 @@ export default function EditUserProfilePage() {
 
 	return (
 		<Form method="post" className="space-y-6" noValidate>
-			<Card className="dark:bg-dark-boxes dark:border-white">
+			<Card>
 				<CardHeader>
 					<CardTitle>{t('delete_account')}</CardTitle>
 					<CardDescription>{t('delete_account_description')}</CardDescription>
diff --git a/app/routes/settings.preferences.tsx b/app/routes/settings.preferences.tsx
new file mode 100644
index 00000000..0f3e4aeb
--- /dev/null
+++ b/app/routes/settings.preferences.tsx
@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next'
+import { LanguageSelect } from '~/components/language-select'
+import { ThemeSelect } from '~/components/theme-select'
+import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card'
+
+export default function PreferencesSettingsPage() {
+	const { t } = useTranslation('settings')
+
+	return (
+		<Card className="border-border bg-card text-card-foreground">
+			<CardHeader>
+				<CardTitle>{t('preferences')}</CardTitle>
+			</CardHeader>
+
+			<CardContent className="divide-border divide-y">
+				<div className="flex items-center justify-between gap-4 py-4 first:pt-0">
+					<div>
+						<div className="text-foreground font-medium">{t('language')}</div>
+					</div>
+
+					<LanguageSelect />
+				</div>
+
+				<div className="flex items-center justify-between gap-4 py-4 last:pb-0">
+					<div>
+						<div className="text-foreground font-medium">{t('theme')}</div>
+						<div className="text-muted-foreground text-sm">
+							{t('theme_description')}
+						</div>
+					</div>
+
+					<ThemeSelect />
+				</div>
+			</CardContent>
+		</Card>
+	)
+}
diff --git a/app/routes/settings.profile.tsx b/app/routes/settings.profile.tsx
index ac8f0007..651e211e 100644
--- a/app/routes/settings.profile.tsx
+++ b/app/routes/settings.profile.tsx
@@ -257,7 +257,7 @@ export default function EditUserProfilePage() {
 	}
 
 	return (
-		<Card className="dark:bg-dark-boxes space-y-6 dark:border-white">
+		<Card className="space-y-6">
 			<CardHeader>
 				<CardTitle>{t('profile_settings')}</CardTitle>
 				<CardDescription>{t('profile_settings_description')}</CardDescription>
diff --git a/app/routes/settings.tsx b/app/routes/settings.tsx
index dec9adfa..07e8ddef 100644
--- a/app/routes/settings.tsx
+++ b/app/routes/settings.tsx
@@ -6,41 +6,38 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'
 export default function SettingsLayoutPage() {
 	const location = useLocation()
 	// get current tab from the URL
-	const currentTab = location.pathname.split('/')[2]
+	const currentTab = location.pathname.split('/')[2] || 'account'
 
 	const { t } = useTranslation('settings')
 
 	return (
-		<div className="dark:bg-dark-background dark:text-dark-text h-screen bg-gray-100">
+		<div className="bg-background text-foreground min-h-screen">
 			<NavBar />
-			<div className="dark:bg-dark-background flex w-full items-start justify-center bg-gray-100 py-10">
-				<div className="dark:text-dark-text w-full max-w-3xl rounded-lg bg-transparent p-6 dark:bg-transparent dark:shadow-none">
-					<Tabs
-						className="w-full"
-						defaultValue="account"
-						value={currentTab || 'account'}
-					>
+			<div className="bg-background flex w-full items-start justify-center py-10">
+				<div className="w-full max-w-3xl rounded-lg bg-transparent p-6">
+					<Tabs className="w-full" defaultValue="account" value={currentTab}>
 						<TabsList className="w-full justify-evenly">
-							<TabsTrigger
-								className="data-[state=active]:text-light-green"
-								value="profile"
-							>
-								<Link to={`/settings/profile`}>{t('public_profile')}</Link>
+							<TabsTrigger value="profile" asChild>
+								<Link to="/settings/profile">{t('public_profile')}</Link>
 							</TabsTrigger>
-							<TabsTrigger
-								className="data-[state=active]:text-light-green"
-								value="account"
-							>
-								<Link to={`/settings/account`}>{t('account')}</Link>
+
+							<TabsTrigger value="account" asChild>
+								<Link to="/settings/account">{t('account')}</Link>
+							</TabsTrigger>
+
+							<TabsTrigger value="preferences" asChild>
+								<Link to="/settings/preferences">{t('preferences')}</Link>
 							</TabsTrigger>
+
 							<TabsTrigger
-								className="data-[state=active]:text-light-green"
 								value="delete"
+								className="data-[state=active]:text-destructive"
+								asChild
 							>
-								<Link to={`/settings/delete`}>{t('delete_account')}</Link>
+								<Link to="/settings/delete">{t('delete_account')}</Link>
 							</TabsTrigger>
 						</TabsList>
-						<TabsContent className="mt-6" value={currentTab || 'profile'}>
+						<TabsContent className="mt-6" value={currentTab}>
 							<Outlet />
 						</TabsContent>
 					</Tabs>
diff --git a/app/services/theme-service.server.ts b/app/services/theme-service.server.ts
new file mode 100644
index 00000000..adf013c9
--- /dev/null
+++ b/app/services/theme-service.server.ts
@@ -0,0 +1,17 @@
+import { createCookie } from 'react-router'
+import { ThemePreference, ThemePreferenceSchema } from '~/lib/theme'
+export const themeCookie = createCookie('theme', {
+	path: '/',
+	sameSite: 'lax',
+	httpOnly: true,
+	secure: process.env.NODE_ENV === 'production',
+	maxAge: 60 * 60 * 24 * 365,
+})
+
+export async function getThemePreference(
+	request: Request,
+): Promise<ThemePreference> {
+	const value = await themeCookie.parse(request.headers.get('Cookie'))
+	const res = ThemePreferenceSchema.safeParse(value)
+	return res.success ? res.data : 'system'
+}
diff --git a/app/services/user-service.server.ts b/app/services/user-service.server.ts
index ce170e9a..11b83058 100644
--- a/app/services/user-service.server.ts
+++ b/app/services/user-service.server.ts
@@ -23,9 +23,9 @@ import {
 	getUserByUsername,
 	preparePasswordHash,
 	updateUserEmail,
-	updateUserlocale,
 	updateUserName,
 	updateUserPassword,
+	updateUserPreferencesById,
 	verifyLogin,
 } from '~/db/models/user.server'
 import { actionToken, user, type User } from '~/db/schema'
@@ -309,7 +309,7 @@ export const updateUserDetails = async (
 	}
 
 	if (language && user.language !== language) {
-		await updateUserlocale(user.email, language)
+		await updateUserPreferencesById(user.id, { language: language })
 		messages.push('Language changed.')
 		hasChanges = true
 	}
diff --git a/app/styles/app.css b/app/styles/app.css
index bf241a72..a96e51a6 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,6 +1,7 @@
 :root {
 	--color-black: #121212;
 	--color-white: #ffffff;
+
 	/* Logo Colors */
 	--logo-green: #4fae48;
 	--logo-blue: #00b4e4;
@@ -10,15 +11,19 @@
 	--light-text: #363636;
 	--light-green: #3d843f;
 	--light-blue: #037ea1;
+	--light-background: #ffffff;
+	--light-boxes: #eef2ed;
 
 	/* Dark Theme Colors */
+	--dark-title: #ffffff;
 	--dark-menu: #d2d1d0;
 	--dark-text: #d2d1d0;
 	--dark-green: #6fa161;
 	--dark-blue: #0386aa;
-	--dark-background: #242424;
+	--dark-background: #091413;
 	--dark-boxes: #3b3a3a;
 
+	/* Raw Color Palette */
 	--color-slate-50: #f8fafc;
 	--color-slate-100: #f1f5f9;
 	--color-slate-200: #e2e8f0;
@@ -29,6 +34,7 @@
 	--color-slate-700: #334155;
 	--color-slate-800: #1e293b;
 	--color-slate-900: #0f172a;
+
 	--color-zinc-50: #fafafa;
 	--color-zinc-100: #f4f4f5;
 	--color-zinc-200: #e4e4e7;
@@ -39,12 +45,14 @@
 	--color-zinc-700: #3f3f46;
 	--color-zinc-800: #27272a;
 	--color-zinc-900: #18181b;
+
 	--color-blue-50: #eff6ff;
 	--color-blue-100: #3d9cce;
 	--color-blue-200: #1879af;
 	--color-blue-400: #60a5fa;
 	--color-blue-500: #3b82f6;
 	--color-blue-700: #1d4ed8;
+
 	--color-gray-50: #f9fafb;
 	--color-gray-100: #f3f4f6;
 	--color-gray-200: #e5e7eb;
@@ -56,6 +64,7 @@
 	--color-gray-800: #1f2937;
 	--color-gray-900: #111827;
 	--color-gray-950: #030712;
+
 	--color-green-50: #f0fdf4;
 	--color-green-100: #dcfce7;
 	--color-green-200: #bbf7d0;
@@ -67,19 +76,24 @@
 	--color-green-800: #166534;
 	--color-green-900: #14532d;
 	--color-green-950: #052e16;
+
 	--color-red-50: #fef2f2;
 	--color-red-100: #fee2e2;
 	--color-red-200: #fecaca;
 	--color-red-400: #f87171;
 	--color-red-500: #ef4444;
 	--color-red-700: #b91c1c;
+	--color-red-900: #e80b0b;
+
 	--color-orange-500: #f97316;
+
 	--color-violet-50: #f5f3ff;
 	--color-violet-100: #ede9fe;
 	--color-violet-200: #ddd6fe;
 	--color-violet-400: #a78bfa;
 	--color-violet-500: #8b5cf6;
 	--color-violet-700: #6d28d9;
+
 	--color-yellow-50: #fefce8;
 	--color-yellow-100: #fef9c3;
 	--color-yellow-200: #fef08a;
@@ -87,75 +101,82 @@
 	--color-yellow-500: #eab308;
 	--color-yellow-700: #a16207;
 	--color-yellow-sensorWiki: #ffdd57;
+
 	--color-headerBorder: #e3e3e3;
 
-	/* shadcn color definitions */
-	--background: 0 0% 100%;
-	--foreground: 222.2 47.4% 11.2%;
+	/* Radius */
+	--radius: 0.5rem;
+}
 
-	--muted: 210 40% 96.1%;
-	--muted-foreground: 215.4 16.3% 46.9%;
+/*
+	Light theme.
+*/
+:root,
+html.light {
+	color-scheme: light;
 
-	--popover: 0 0% 100%;
-	--popover-foreground: 222.2 47.4% 11.2%;
+	--background: #ffffff;
+	--foreground: #363636;
 
-	--card: 0 0% 100%;
-	--card-foreground: 222.2 47.4% 11.2%;
+	--card: #ffffff;
+	--card-foreground: #363636;
 
-	--border: 214.3 31.8% 91.4%;
-	--input: 214.3 31.8% 91.4%;
+	--popover: #ffffff;
+	--popover-foreground: #363636;
 
-	--primary: 222.2 47.4% 11.2%;
-	--primary-foreground: 210 40% 98%;
+	--muted: #f3f6f2;
+	--muted-foreground: #727373;
 
-	--secondary: 210 40% 96.1%;
-	--secondary-foreground: 222.2 47.4% 11.2%;
+	--border: #dfe7dd;
+	--input: #dfe7dd;
+	--ring: #3d843f;
 
-	--accent: 210 40% 96.1%;
-	--accent-foreground: 222.2 47.4% 11.2%;
+	--primary: #3d843f;
+	--primary-foreground: #ffffff;
 
-	--destructive: 0 100% 50%;
-	--destructive-foreground: 210 40% 98%;
+	--secondary: #eef4ed;
+	--secondary-foreground: #363636;
 
-	--ring: 215 20.2% 65.1%;
+	--accent: #037ea1;
+	--accent-foreground: #ffffff;
 
-	/* shadcn radius definition */
-	--radius: 0.5rem;
+	--destructive: #ef4444;
+	--destructive-foreground: #ffffff;
 }
 
-.dark {
-	/* shadcn dark mode color definitions */
-	--background: 224 71% 4%;
-	--foreground: 213 31% 91%;
+/*
+	Dark theme
+*/
+html.dark {
+	color-scheme: dark;
 
-	--muted: 223 47% 11%;
-	--muted-foreground: 215.4 16.3% 56.9%;
+	--background: #091413;
+	--foreground: #d2d1d0;
 
-	--popover: 224 71% 4%;
-	--popover-foreground: 215 20.2% 65.1%;
+	--card: #13201e;
+	--card-foreground: #d2d1d0;
 
-	--card: 0 0% 100%;
-	--card-foreground: 222.2 47.4% 11.2%;
+	--popover: #101b19;
+	--popover-foreground: #d2d1d0;
 
-	--border: 216 34% 17%;
-	--input: 216 34% 17%;
+	--muted: #1a2a27;
+	--muted-foreground: #a9aaa7;
 
-	--primary: 210 40% 98%;
-	--primary-foreground: 222.2 47.4% 1.2%;
+	--border: #2a403b;
+	--input: #2a403b;
+	--ring: #6fa161;
 
-	--secondary: 222.2 47.4% 11.2%;
-	--secondary-foreground: 210 40% 98%;
+	--primary: #6fa161;
+	--primary-foreground: #091413;
 
-	--accent: 216 34% 17%;
-	--accent-foreground: 210 40% 98%;
+	--secondary: #1a2a27;
+	--secondary-foreground: #d2d1d0;
 
-	--destructive: 0 63% 31%;
-	--destructive-foreground: 210 40% 98%;
+	--accent: #0386aa;
+	--accent-foreground: #ffffff;
 
-	--ring: 216 34% 17%;
-
-	/* shadcn dark mode radius definition */
-	--radius: 0.5rem;
+	--destructive: #f87171;
+	--destructive-foreground: #091413;
 }
 
 kbd {
@@ -177,6 +198,40 @@ kbd {
 	white-space: nowrap;
 }
 
+.device-name-popup .maplibregl-popup-content {
+	background: var(--popover);
+	border: 1px solid var(--border);
+	border-radius: 0.375rem;
+	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
+	color: var(--popover-foreground);
+	font: inherit;
+	font-weight: 500;
+	line-height: 1.25;
+	max-width: 18rem;
+	overflow-wrap: anywhere;
+	padding: 0.375rem 0.625rem;
+}
+
+.device-name-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
+.device-name-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
+.device-name-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
+	border-bottom-color: var(--popover);
+}
+
+.device-name-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
+.device-name-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
+.device-name-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
+	border-top-color: var(--popover);
+}
+
+.device-name-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
+	border-right-color: var(--popover);
+}
+
+.device-name-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
+	border-left-color: var(--popover);
+}
+
 .map-space-shell {
 	position: fixed;
 	inset: 0;
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 5baba4e9..30a1db13 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -3,7 +3,7 @@
 @plugin 'tailwindcss-animate';
 @plugin '@tailwindcss/typography';
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 @utility container {
 	margin-inline: auto;
@@ -117,40 +117,41 @@
 	--color-light-green: #3d843f;
 	--color-light-blue: #037ea1;
 
-	--color-dark-title: FFFFFF;
+	--color-dark-title: #FFFFFF;
 	--color-dark-menu: #d2d1d0;
 	--color-dark-text: #d2d1d0;
 	--color-dark-green: #6fa161;
 	--color-dark-blue: #0386aa;
-	--color-dark-background: #242424;
+	--color-dark-background: #091413;
 	--color-dark-boxes: #3b3a3a;
 
-	--color-border: hsl(var(--border));
-	--color-input: hsl(var(--input));
-	--color-ring: hsl(var(--ring));
-	--color-background: hsl(var(--background));
-	--color-foreground: hsl(var(--foreground));
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
 
-	--color-primary: hsl(var(--primary));
-	--color-primary-foreground: hsl(var(--primary-foreground));
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
 
-	--color-secondary: hsl(var(--secondary));
-	--color-secondary-foreground: hsl(var(--secondary-foreground));
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
 
-	--color-destructive: hsl(var(--destructive));
-	--color-destructive-foreground: hsl(var(--destructive-foreground));
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
 
-	--color-muted: hsl(var(--muted));
-	--color-muted-foreground: hsl(var(--muted-foreground));
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
 
-	--color-accent: hsl(var(--accent));
-	--color-accent-foreground: hsl(var(--accent-foreground));
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
 
-	--color-popover: hsl(var(--popover));
-	--color-popover-foreground: hsl(var(--popover-foreground));
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
 
-	--color-card: hsl(var(--card));
-	--color-card-foreground: hsl(var(--card-foreground));
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
 
 	--radius-lg: var(--radius);
 	--radius-md: calc(var(--radius) - 2px);
diff --git a/public/locales/de/data-table.json b/public/locales/de/data-table.json
index 1d809207..3a0177e3 100644
--- a/public/locales/de/data-table.json
+++ b/public/locales/de/data-table.json
@@ -21,5 +21,6 @@
 	"data_upload": "Daten hochladen",
 	"support": "Unterstützung",
 	"copy_id": "ID kopieren",
+	"copied": "ID erfolgreich kopiert",
 	"delete": "Löschen"
 }
diff --git a/public/locales/de/edit-device-general.json b/public/locales/de/edit-device-general.json
index 3031a134..200eb50a 100644
--- a/public/locales/de/edit-device-general.json
+++ b/public/locales/de/edit-device-general.json
@@ -1,28 +1,28 @@
 {
-  "no_preview_yet": "Es gibt noch keine Vorschau.",
-  "general": "Allgemein",
-  "exposure": "Standort",
-  "indoor": "drinnen",
-  "outdoor": "draußen",
-  "mobile": "mobil",
-  "unknown": "unbekannt",
-  "name_is_required": "Ein Gerätename muss vergeben werden",
-  "description": "Beschreibung",
-  "markdown_supported": "Markdown ist unterstützt.",
-  "preview": "Vorschau",
-  "image": "Bild",
-  "remove_image": "Bild permanent entfernen",
-  "upload_image": "Bild hochladen",
-  "accepted_formats": "Akzeptierte Formate",
-  "add": "Hinzufügen",
-  "delete_device": "Gerät löschen",
-  "delete_device_confirm_info": "Wenn Sie Ihre Station wirklich löschen möchten, geben Sie bitte Ihr aktuelles Passwort ein – dabei werden auch alle Messwerte gelöscht.",
-  "saving": "Speichern...",
-  "save_changes": "Änderungen speichern",
-  "saved": "Gespeichert",
-  "autosave_failed": "Automatisches Speichern fehlgeschlagen. Bitte versuche es erneut.",
-  "unsaved_changes": "Ungesicherte Änderungen",
-  "longitude": "Längengrad",
-  "latitude": "Breitengrad",
-  "reset_to_original_location": "Zurücksetzen auf ursprünglichen Standort"
+	"no_preview_yet": "Es gibt noch keine Vorschau.",
+	"general": "Allgemein",
+	"exposure": "Standort",
+	"indoor": "drinnen",
+	"outdoor": "draußen",
+	"mobile": "mobil",
+	"unknown": "unbekannt",
+	"name_is_required": "Ein Gerätename muss vergeben werden",
+	"description": "Beschreibung",
+	"markdown_supported": "Markdown ist unterstützt.",
+	"preview": "Vorschau",
+	"image": "Bild",
+	"remove_image": "Bild permanent entfernen",
+	"upload_image": "Bild hochladen",
+	"accepted_formats": "Akzeptierte Formate",
+	"add": "Hinzufügen",
+	"delete_device": "Gerät löschen",
+	"delete_device_confirm_info": "Wenn Sie Ihre Station wirklich löschen möchten, geben Sie bitte Ihr aktuelles Passwort ein – dabei werden auch alle Messwerte gelöscht.",
+	"saving": "Speichern...",
+	"save_changes": "Änderungen speichern",
+	"saved": "Gespeichert",
+	"autosave_failed": "Automatisches Speichern fehlgeschlagen. Bitte versuche es erneut.",
+	"unsaved_changes": "Ungesicherte Änderungen",
+	"longitude": "Längengrad",
+	"latitude": "Breitengrad",
+	"reset_to_original_location": "Zurücksetzen auf ursprünglichen Standort"
 }
diff --git a/public/locales/de/edit-device-sensors.json b/public/locales/de/edit-device-sensors.json
index 6c52e443..3281cf0f 100644
--- a/public/locales/de/edit-device-sensors.json
+++ b/public/locales/de/edit-device-sensors.json
@@ -1,18 +1,18 @@
 {
-  "sensor_delete_warning": "Die von den Sensoren gemessenen Daten, die du löschen möchtest, werden ebenfalls gelöscht. Wenn du neue Sensoren hinzufügst, vergiss nicht, dein neues Skript abzurufen (siehe Registerkarte „Skript“).",
-  "copied": "kopiert",
-  "sensor_id_copied": "Sensor ID in Zwischenablage kopiert",
-  "copy_failed": "Kopieren fehlgeschlagen",
-  "copy_failed_desc": "Die Sensor ID wurde nicht kopiert.",
-  "phenomenon": "Phänomen",
-  "unit": "Einheit",
-  "type": "Typ",
-  "sensor_will_be_deleted": "Dieser Sensor wird gelöscht.",
-  "undo": "Rückgängig",
-  "edit": "Editieren",
-  "delete": "Löschen",
-  "fill_required_fields": "Bitte alle erforderlichen Felder ausfüllen.",
-  "cancel": "Abbrechen",
-  "save": "Speichern",
-  "add": "Hinzufügen"
+	"sensor_delete_warning": "Die von den Sensoren gemessenen Daten, die du löschen möchtest, werden ebenfalls gelöscht. Wenn du neue Sensoren hinzufügst, vergiss nicht, dein neues Skript abzurufen (siehe Registerkarte „Skript“).",
+	"copied": "kopiert",
+	"sensor_id_copied": "Sensor ID in Zwischenablage kopiert",
+	"copy_failed": "Kopieren fehlgeschlagen",
+	"copy_failed_desc": "Die Sensor ID wurde nicht kopiert.",
+	"phenomenon": "Phänomen",
+	"unit": "Einheit",
+	"type": "Typ",
+	"sensor_will_be_deleted": "Dieser Sensor wird gelöscht.",
+	"undo": "Rückgängig",
+	"edit": "Editieren",
+	"delete": "Löschen",
+	"fill_required_fields": "Bitte alle erforderlichen Felder ausfüllen.",
+	"cancel": "Abbrechen",
+	"save": "Speichern",
+	"add": "Hinzufügen"
 }
diff --git a/public/locales/de/settings.json b/public/locales/de/settings.json
index dbe7e637..4cf13322 100644
--- a/public/locales/de/settings.json
+++ b/public/locales/de/settings.json
@@ -2,6 +2,7 @@
 	"public_profile": "Öffentliches Profil",
 	"account": "Konto",
 	"password": "Passwort",
+	"preferences": "Einstellungen",
 	"delete_account": "Konto löschen",
 	"profile_updated": "Profil aktualisiert",
 	"profile_updated_description": "Dein Profil wurde erfolgreich aktualisiert.",
@@ -80,5 +81,7 @@
 	"unsaved_changes": "Ungespeicherte Änderungen",
 	"saving": "Speichern...",
 	"confirm_email_change": "Änderung der E-Mail Adresse bestätigen",
-	"confirm_email_change_description": "Bitte gib dein aktuelles Passwort ein."
+	"confirm_email_change_description": "Bitte gib dein aktuelles Passwort ein.",
+	"theme_description": "Entscheide selbst, wie openSenseMap für dich aussehen soll.",
+	"theme": "Erscheinungsbild"
 }
diff --git a/public/locales/en/data-table.json b/public/locales/en/data-table.json
index 04b020e6..116ed671 100644
--- a/public/locales/en/data-table.json
+++ b/public/locales/en/data-table.json
@@ -21,5 +21,6 @@
 	"data_upload": "Data upload",
 	"support": "Support",
 	"copy_id": "Copy ID",
+	"copied": "ID copied successfully",
 	"delete": "Delete"
 }
diff --git a/public/locales/en/edit-device-general.json b/public/locales/en/edit-device-general.json
index 6aefb075..5a94954d 100644
--- a/public/locales/en/edit-device-general.json
+++ b/public/locales/en/edit-device-general.json
@@ -1,28 +1,28 @@
 {
-  "no_preview_yet": "Nothing to preview yet.",
-  "general": "General",
-  "exposure": "Exposure",
-  "indoor": "indoor",
-  "outdoor": "outdoor",
-  "mobile": "mobile",
-  "unknown": "unknown",
-  "name_is_required": "A device name is required",
-  "description": "Description",
-  "markdown_supported": "Markdown is supported.",
-  "preview": "Preview",
-  "image": "Image",
-  "remove_image": "Remove image permanently",
-  "upload_image": "Upload image",
-  "accepted_formats": "Accepted formats",
-  "add": "Add",
-  "delete_device": "Delete device",
-  "delete_device_confirm_info": "If you really want to delete your station, please type your current password - all measurements will be deleted as well.",
-  "saving": "Saving...",
-  "save_changes": "Save changes",
-  "saved": "Saved",
-  "autosave_failed": "Automatic saving failed. Please try again.",
-  "unsaved_changes": "Unsaved changes",
-  "longitude": "Longitude",
-  "latitude": "Latitude",
-  "reset_to_original_location": "Reset to original location"
+	"no_preview_yet": "Nothing to preview yet.",
+	"general": "General",
+	"exposure": "Exposure",
+	"indoor": "indoor",
+	"outdoor": "outdoor",
+	"mobile": "mobile",
+	"unknown": "unknown",
+	"name_is_required": "A device name is required",
+	"description": "Description",
+	"markdown_supported": "Markdown is supported.",
+	"preview": "Preview",
+	"image": "Image",
+	"remove_image": "Remove image permanently",
+	"upload_image": "Upload image",
+	"accepted_formats": "Accepted formats",
+	"add": "Add",
+	"delete_device": "Delete device",
+	"delete_device_confirm_info": "If you really want to delete your station, please type your current password - all measurements will be deleted as well.",
+	"saving": "Saving...",
+	"save_changes": "Save changes",
+	"saved": "Saved",
+	"autosave_failed": "Automatic saving failed. Please try again.",
+	"unsaved_changes": "Unsaved changes",
+	"longitude": "Longitude",
+	"latitude": "Latitude",
+	"reset_to_original_location": "Reset to original location"
 }
diff --git a/public/locales/en/edit-device-sensors.json b/public/locales/en/edit-device-sensors.json
index aa366b3d..d67af956 100644
--- a/public/locales/en/edit-device-sensors.json
+++ b/public/locales/en/edit-device-sensors.json
@@ -1,18 +1,18 @@
 {
-  "copied": "copied",
-  "sensor_id_copied": "Sensor ID copied to clipboard",
-  "copy_failed": "Failed to copy",
-  "copy_failed_desc": "The sensor ID could not be copied.",
-  "sensor_delete_warning": "Data measured by sensors that you are going to delete will be deleted as well. If you add new sensors, don't forget to retrieve your new script (see tab 'Script').",
-  "phenomenon": "Phenomenon",
-  "unit": "Unit",
-  "type": "Type",
-  "sensor_will_be_deleted": "This sensor will be deleted.",
-  "undo": "Undo",
-  "edit": "Edit",
-  "delete": "Delete",
-  "fill_required_fields": "Please fill out all required fields.",
-  "cancel": "Cancel",
-  "save": "Save",
-  "add": "Add"
+	"copied": "copied",
+	"sensor_id_copied": "Sensor ID copied to clipboard",
+	"copy_failed": "Failed to copy",
+	"copy_failed_desc": "The sensor ID could not be copied.",
+	"sensor_delete_warning": "Data measured by sensors that you are going to delete will be deleted as well. If you add new sensors, don't forget to retrieve your new script (see tab 'Script').",
+	"phenomenon": "Phenomenon",
+	"unit": "Unit",
+	"type": "Type",
+	"sensor_will_be_deleted": "This sensor will be deleted.",
+	"undo": "Undo",
+	"edit": "Edit",
+	"delete": "Delete",
+	"fill_required_fields": "Please fill out all required fields.",
+	"cancel": "Cancel",
+	"save": "Save",
+	"add": "Add"
 }
diff --git a/public/locales/en/settings.json b/public/locales/en/settings.json
index 465a1990..3cf1fb34 100644
--- a/public/locales/en/settings.json
+++ b/public/locales/en/settings.json
@@ -2,8 +2,8 @@
 	"public_profile": "Public Profile",
 	"account": "Account",
 	"password": "Password",
+	"preferences": "Preferences",
 	"delete_account": "Delete Account",
-
 	"profile_updated": "Profile updated",
 	"profile_updated_description": "Your profile has been updated successfully.",
 	"something_went_wrong": "Something went wrong.",
@@ -84,5 +84,7 @@
 	"unsaved_changes": "Unsaved changes",
 	"saving": "Saving...",
 	"confirm_email_change": "Confirm email change",
-	"confirm_email_change_description": "Please enter your current password."
+	"confirm_email_change_description": "Please enter your current password.",
+	"theme_description": "Choose how openSenseMap looks to you.",
+	"theme": "Theme"
 }