diff --git a/.gitignore b/.gitignore
index 5b3eca4..2938463 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,9 @@ __pycache__
 package-lock.json
 .parcel-cache
 *.old
+
+data/*.db*
+
+# macOS duplicate copies
+* 2
+* 2.*
diff --git a/.postcssrc b/.postcssrc
deleted file mode 100644
index 39ef0bb..0000000
--- a/.postcssrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "plugins": {
-        "tailwindcss": {},
-        "cssnano": {}
-    }
-}
diff --git a/Dockerfile b/Dockerfile
index 988a57c..4ce9fa5 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,7 +14,7 @@ RUN npm i --package-lock-only
 RUN npm ci
 
 COPY ./client ./client
-COPY ./tailwind.config.js ./.postcssrc ./
+COPY ./tailwind.config.js ./postcss.config.js ./vite.config.ts ./tsconfig.json ./
 RUN npm run build
 
 # RUNTIME
diff --git a/client/App.tsx b/client/App.tsx
index c9b05a7..37688fe 100644
--- a/client/App.tsx
+++ b/client/App.tsx
@@ -1,17 +1,26 @@
-import React from 'react';
-import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
+import { lazy, Suspense } from 'react'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
-import { BASE_URL } from './api';
+import { BASE_URL } from './api'
+import { ToastProvider } from './components/Toast'
 
-import Login from './pages/Login';
-import New from './pages/New';
+import Login from './pages/Login'
 import Home from './pages/Home'
 import AllFlights from './pages/AllFlights'
-import Statistics from './pages/Statistics';
-import Settings from './pages/Settings';
+import { AppShell } from './components/shell/AppShell'
+import { Spinner } from './components/ui/Spinner'
 
-import Navbar from './components/Navbar';
-import { ToastProvider } from './components/Toast';
+const New = lazy(() => import('./pages/New'))
+const Statistics = lazy(() => import('./pages/Statistics'))
+const Settings = lazy(() => import('./pages/Settings'))
+
+function Loading() {
+    return (
+        <div className="flex justify-center py-20">
+            <Spinner />
+        </div>
+    )
+}
 
 export function App() {
     return (
@@ -19,21 +28,36 @@ export function App() {
             <BrowserRouter basename={BASE_URL}>
             <Routes>
                 <Route path="/login" element={<Login />} />
-                <Route element={
-                    <>
-                        <Navbar />
-                        <div className="h-full p-4 overflow-x-auto">
-                            <Outlet />
-                        </div>
-                    </>}>
+                <Route element={<AppShell />}>
                     <Route path="/" element={<Home />} />
-                    <Route path="/new" element={<New />} />
+                    <Route
+                        path="/new"
+                        element={
+                            <Suspense fallback={<Loading />}>
+                                <New />
+                            </Suspense>
+                        }
+                    />
                     <Route path="/flights" element={<AllFlights />} />
-                    <Route path="/statistics" element={<Statistics />} />
-                    <Route path="/settings" element={<Settings />} />
+                    <Route
+                        path="/statistics"
+                        element={
+                            <Suspense fallback={<Loading />}>
+                                <Statistics />
+                            </Suspense>
+                        }
+                    />
+                    <Route
+                        path="/settings"
+                        element={
+                            <Suspense fallback={<Loading />}>
+                                <Settings />
+                            </Suspense>
+                        }
+                    />
                 </Route>
             </Routes>
         </BrowserRouter>
         </ToastProvider>
-    );
+    )
 }
diff --git a/client/components/Elements.tsx b/client/components/Elements.tsx
deleted file mode 100644
index 675a00d..0000000
--- a/client/components/Elements.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import React, {ChangeEvent, useState} from 'react';
-
-interface HeadingProps {
-    text: string;
-}
-export function Heading({ text }: HeadingProps) {
-    return (
-        <h1 className="mb-3 text-3xl font-bold">{text}</h1>
-    );
-}
-
-interface SubheadingProps {
-    text: string;
-}
-export function Subheading({ text }: SubheadingProps) {
-    return (
-        <h3 className="mb-2 font-bold text-lg">{text}</h3>
-    );
-}
-
-interface WhisperProps {
-    text: string;
-    negativeTopMargin?: boolean;
-}
-export function Whisper({ text, negativeTopMargin = false}: WhisperProps) {
-    return (
-        <p className={`${negativeTopMargin ? "-mt-4" : ""} text-sm font-mono text-gray-700/60`}>
-            {text}
-        </p>
-    )
-}
-
-interface LabelProps {
-    text: string;
-    required?: boolean;
-}
-export function Label({ text, required }: LabelProps) {
-    return (
-        <label className={`${required ? "after:content-['*'] after:ml-0.5 after:text-red-500" : ""}
-                          mb-1 font-semibold block`}>
-            {text}
-        </label> 
-    );
-}
-
-interface ButtonProps {
-    text: string;
-    level?: "default"|"success"|"danger";
-    right?: boolean;
-    submit?: boolean;
-    disabled?: boolean;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>|null;
-}
-export function Button({ text, 
-                         level = "default",
-                         right = false,
-                         submit = false, 
-                         disabled = false,
-                         onClick = null }: ButtonProps) {
-    var colors = "";
-    switch(level) {
-        case "success":
-            colors = "bg-green-500 text-white enabled:hover:bg-green-400";
-            break;
-        case "danger":
-            colors = "bg-red-500 text-white enabled:hover:bg-red-400";
-            break;
-        case "default":
-        default:
-            colors = "bg-white text-black border border-gray-300 enabled:hover:bg-gray-100";
-    };
-
-    return (
-        <button type={submit ? "submit": "button"}
-                className={`py-1 px-2 my-1 mr-1 rounded-md cursor-pointer ${colors}
-                            disabled:opacity-60 disabled:cursor-not-allowed
-                            ${right ? "float-right" : ""}`}
-                disabled={disabled}
-                onClick={onClick ? onClick : () => {}}>
-            {text}
-        </button>
-    );
-}
-
-interface InputProps {
-    type: "text"|"password"|"number"|"date"|"time"|"file";
-    name?: string;
-    defaultValue?: string;
-    maxLength?: number;
-    onChange?: ((event: ChangeEvent<HTMLInputElement>) => any)|null;
-    required?: boolean;
-    placeholder?: string;
-}
-export function Input({ type, 
-                        name, 
-                        defaultValue,
-                        maxLength, 
-                        onChange = null, 
-                        required = false, 
-                        placeholder}: InputProps) {
-    return (
-        <input  className={`${type == "text" || type == "password" ? "w-full" : ""} px-1 mb-4 bg-white rounded-none outline-none font-mono box-border 
-                            placeholder:italic border-b-2 border-gray-200 focus:border-primary-400`}
-                type={type}
-                accept={type == "file" ? ".csv,.db" : undefined}
-                name={name} 
-                defaultValue={defaultValue}
-                maxLength={maxLength}
-                min={type == "number" ? 0 : undefined}
-                onChange={onChange ? onChange : () => {}}
-                required={required}
-                placeholder={placeholder}/>
-    );
-}
-
-interface TextAreaProps {
-    name?: string;
-    defaultValue?: string;
-    placeholder?: string;
-    maxLength?: number;
-}
-export function TextArea ({ name,
-                            defaultValue,
-                            placeholder,
-                            maxLength }: TextAreaProps) {
-    return (
-        <textarea rows={5} 
-                  className="w-full px-1 mb-4 bg-white rounded-none outline-none font-mono box-border
-                             border-2 border-gray-200 focus:border-primary-400"
-                  name={name}
-                  defaultValue={defaultValue}
-                  placeholder={placeholder}
-                  maxLength={maxLength} >
-        </textarea>
-    );
-}
-
-interface CheckboxProps {
-    name?: string;
-    checked?: boolean;
-    onChange?: ((event: ChangeEvent<HTMLInputElement>) => any)|null;
-}
-export function Checkbox({ checked, name, onChange }: CheckboxProps) {
-    return (
-        <input  className="ml-5 bg-white rounded-none outline-none box-border border-2 border-gray-200 hover:border-primary-400"
-                type="checkbox"
-                name={name} 
-                onChange={onChange ? onChange : () => {}}
-                checked={checked} />
-    )
-}
-
-interface OptionProps {
-    text: string;
-    value?: string;
-}
-function Option({text, value}: OptionProps) {
-    return (
-        <option className=""
-                value={value}>
-            {text}
-        </option>
-    );
-}
-
-interface SelectProps {
-    name?: string;
-    options: OptionProps[];
-}
-export function Select({name, options}: SelectProps) {
-    return (
-        <select className="px-1 py-0.5 mb-4 bg-white rounded-none outline-none font-mono bg-white box-border 
-                border-b-2 border-gray-200 focus:border-primary-400"
-                name={name}>
-            { options.map((option) => (
-                <Option text={option.text} value={option.value}/>  
-            ))} 
-        </select>
-    );
-}
-
-interface DialogProps {
-    title: string;
-    buttonLevel?: "default"|"success"|"danger";
-    formBody: any; // ?
-    onSubmit: React.FormEventHandler<HTMLFormElement>;
-}
-export function Dialog({ title, buttonLevel = "default", formBody, onSubmit }: DialogProps) {
-    const modalId = Math.random().toString(36).slice(2, 10); // to support multiple modals in one page
-
-    const openModal = () => {
-        const modalElement = document.getElementById(modalId) as HTMLDialogElement;
-        modalElement.showModal();
-    }
-
-    const closeModal = () => {
-        const modalElement = document.getElementById(modalId) as HTMLDialogElement;
-        modalElement.close();
-    }
-
-    const handleSubmit = (event) => {
-        closeModal();
-        event.preventDefault();
-        onSubmit(event);
-    }
-
-    return (
-    <>
-            <Button text={title} onClick={openModal} level={buttonLevel}/>
-
-            <dialog id={modalId} className="md:w-2/3 max-md:w-4/5 rounded-md">
-            <form className="flex flex-col" onSubmit={handleSubmit}>
-                
-                <div className="pl-5 pt-2 border-b border-b-gray-400">
-                    <Subheading text={title} />
-                </div>
-
-                <div className="p-5">
-                    {formBody}
-                </div>
-
-                <div className="px-5 py-2 border-t border-t-gray-400">
-                    <Button text="Cancel"
-                            onClick={closeModal} />
-                    <Button text="Done" 
-                            level="success"
-                            right
-                            submit/>
-                </div>
-
-            </form>
-            </dialog>
-        </>
-    );
-}
diff --git a/client/components/FetchConnection.tsx b/client/components/FetchConnection.tsx
deleted file mode 100644
index e545b70..0000000
--- a/client/components/FetchConnection.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { useEffect } from 'react';
-import { useState } from 'react';
-import { Button } from '../components/Elements'
-import { useToast } from '../components/Toast';
-import API from '../api';
-import { Flight } from '../models';
-
-interface FetchConnectionProps {
-    name: string;
-    date: string;
-    origin: string|undefined;
-    destination: string|undefined;
-    value?: number;
-    onFetched?: (c: number) => void;
-}
-
-export default function FetchConnection({ name, date, origin, destination, value, onFetched }: FetchConnectionProps) {
-    const [searched, setSearched] = useState<boolean>(false);
-    const [connectionFlight, setConnectionFlight] = useState<Flight>();
-    const { showToast } = useToast(); // only needed for printing flight info
-
-    // if value is initially set, we must
-    // find matching flight (only first render)
-    useEffect(() => {
-        if (value) {
-            API.get(`flights?id=${value}`)
-            .then((data: Flight) => { setConnectionFlight(data) });
-        }
-    }, [])
-
-    // whenever origin or destination or date is changed,
-    // we can search again
-    useEffect(() => {
-        setSearched(false);
-    }, [date, origin, destination]);
-
-    // this method returns an actual instance of 
-    // Flight so that its class methods can be used
-    const createInstance = (obj) => {
-        let correct: Flight = new Flight();
-        Object.assign(correct, obj);
-
-        return correct;
-    }
-
-    const searchConnection = () => {
-        // connection flight must be within 2 days after
-        // and 1 day before the actual flight, and should
-        // have origin where actual flight has destination,
-        // and destination != actual flight origin
-        const start = new Date(date);
-        start.setDate(start.getDate() - 1);
-
-        const end = new Date(date);
-        end.setDate(end.getDate() + 2);
-
-        const fmt = d => d.toISOString().substring(0, 10);
-
-        API.get(`/flights?start=${fmt(start)}&end=${fmt(end)}&origin=${destination}`)
-        .then((data: Flight[]) => {
-            if (!onFetched) return; // only keep going if we have to do something
-
-            // only keep results where connection flight destination != actual flight origin,
-            // so that quick trips aren't counted as a connection back and forth
-            data = data.filter((flight: Flight) => flight.destination.icao != origin)
-
-            if (data.length > 1) {
-                // this should be very rare, for now we handle it
-                // with a crude prompt
-                const choice = prompt(`Multiple possible connections found, select one by entering its number:
-                                          ${ data.map((f: Flight, i) => `\n[${i}] ${createInstance(f).toString()}`) }`);
-
-                if (!choice) {
-                    showToast('Your input must be a valid index!', 'error');
-                    return;
-                }
-
-                const parsed = Number.parseInt(choice);
-
-                if (!Number.isInteger(parsed) || parsed < 0 || parsed > data.length - 1) {
-                    showToast('Your input must be a valid index!', 'error');
-                    return;
-                }
-
-                const connection: Flight = data[choice];
-                setConnectionFlight(connection);
-                onFetched(connection.id);
-            } else if (data.length == 1) {
-                const connection: Flight = data[0];
-                setConnectionFlight(connection);
-                onFetched(connection.id);
-            }
-
-            setSearched(true);
-        });
-    }
-
-    return (
-    <>
-        { !searched &&
-            <Button
-                text="Fetch"
-                disabled={destination === undefined}
-                onClick={searchConnection}
-            />
-        }
-
-        <input type="hidden" name={name} value={value}/>
-
-        { connectionFlight ?
-            <p>{createInstance(connectionFlight).toString()}</p>
-            :
-            searched &&
-            <p>No results!</p>
-        }
-    </>
-    );
-}
diff --git a/client/components/Navbar.tsx b/client/components/Navbar.tsx
deleted file mode 100644
index a8e3bec..0000000
--- a/client/components/Navbar.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { NavLink } from 'react-router-dom';
-import React, {useState} from 'react';
-
-interface NavItemProps {
-    to: string;
-    text: string;
-    right?: boolean;
-}
-
-function NavItem({ to, text, right = false }: NavItemProps) {
-    return (
-        <NavLink to={to}>
-            { ({ isActive }) => 
-                <li className={`p-4 border-b-4 border-gray-700 hover:border-primary-400
-                                ${ isActive ? "text-primary-400" : "text-white" } 
-                                ${ right ? "justify-self-end" : "" }`}>
-                {text}
-                </li>
-            }
-        </NavLink>
-    );
-}
-
-function NavMenu({ items }) {
-    const [open, setOpen] = useState<boolean>(false);
-
-    const toggleOpen = () => {
-        setOpen(!open);
-    }
-
-    return (
-        <div>
-            <p className="p-4 text-white cursor-pointer float-right" onClick={toggleOpen}>{open ? "x" : "Menu"}</p>
-            { open &&
-            <div className="bg-gray-700 absolute top-[3.5em] right-0" onClick={toggleOpen}>
-                {[items.home, items.new, items.flights, items.statistics, items.settings]}
-            </div>
-            }
-        </div>
-    );
-}
-
-export default function Navbar() {
-    const items = {
-        'home': <NavItem key="home" to="/" text="Home" />,
-        'new': <NavItem key="new" to="/new" text="New" />,
-        'flights': <NavItem key="all flights" to="/flights" text="All Flights" />,
-        'statistics': <NavItem key="statistics" to="/statistics" text="Statistics" />,
-        'settings': <NavItem key="settings" to="/settings" text="Settings" right />
-    };
-
-    return(
-        <nav className="bg-gray-700 list-none">
-            <div className="flex justify-between max-md:hidden">
-                <div className="flex">
-                {[items.home, items.new, items.flights, items.statistics]}
-                </div>
-
-                <div className="flex">
-                {[items.settings]}
-                </div>
-            </div>
-
-            <div className="flex justify-between md:hidden">
-                <div className="flex">
-                {[items.home, items.new]}
-                </div>
-
-                <NavMenu items={items} />
-            </div>
-        </nav>
-    );
-}
diff --git a/client/components/SearchInput.tsx b/client/components/SearchInput.tsx
deleted file mode 100644
index 5b8adf8..0000000
--- a/client/components/SearchInput.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, {useEffect} from 'react';
-import { useState } from 'react';
-import { Input, Whisper } from '../components/Elements'
-import API from '../api';
-import { Airline, Airport } from '../models';
-
-interface SearchInputProps {
-    name: string;
-    type: "airports"|"airlines";
-    value?: Airport|Airline;
-    onSelect?: (s) => void; // type any for implementation, but really is Airport|Airline
-}
-
-export default function SearchInput({ name, type, value, onSelect }: SearchInputProps) {
-    const [subjectsData, setSubjectsData] = useState<Airport[]|Airline[]>([]);
-
-    // this allows the parent to override
-    // the selected subject, e.g. when fetching with
-    // flight number
-    useEffect(() => {
-        if (value) {
-            setSubjectsData([]);
-        }
-    }, [value]);
-
-    // this method returns an actual instance of 
-    // Airport/Airline so that their 
-    // class methods can be used
-    const createInstance = (obj) => {
-        const correct = type == "airports" ? new Airport() : new Airline();
-        Object.assign(correct, obj);
-
-        return correct;
-    }
-
-    const searchSubject = (event) => {
-        const query = event.target.value;
-
-        if (query.length > 1) {
-            API.get(`/${type}?q=${query}`)
-            .then((data: Airport[]|Airline[]) => setSubjectsData(data))
-        }
-        else setSubjectsData([]);
-    }
-
-    return (
-    <>
-        <Input 
-            type="text"
-            maxLength={16}
-            onChange={searchSubject}
-            placeholder="Search"
-        />
-
-        <input type="hidden" name={name} value={value?.icao}/>
-        { subjectsData.length > 0 &&
-        <ul className="-mt-4 mb-4 border-x-2 border-b-2 border-gray-200">
-            { subjectsData.map((s: Airport|Airline) => (
-            <li className="py-1 px-2 even:bg-gray-100 cursor-pointer hover:bg-gray-200"
-                value={s.icao} 
-                onClick={() => {
-                    setSubjectsData([]); 
-                    if (onSelect) onSelect(s);
-                }} >
-                { createInstance(s).toString() }
-            </li>
-            ))}
-        </ul>
-        }
-
-        { value &&
-            <Whisper text={`selected: ${createInstance(value).toString()}`} negativeTopMargin />
-        }
-    </>
-    );
-}
-
diff --git a/client/components/SingleFlight.tsx b/client/components/SingleFlight.tsx
deleted file mode 100644
index f2a1c15..0000000
--- a/client/components/SingleFlight.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { Button, Heading, Input, Select, Subheading, TextArea } from '../components/Elements'
-import { Airline, Airport, Flight, User } from '../models';
-import SearchInput from './SearchInput';
-import API from '../api';
-import ConfigStorage from '../storage/configStorage';
-import { objectFromForm } from '../utils';
-import { SingleFlightMap } from './WorldMap';
-import FetchConnection from './FetchConnection';
-
-export default function SingleFlight({ flightID }) {
-    const [flight, setFlight] = useState<Flight>();
-    const [selfUsername, setSelfUsername] = useState<string>();
-    const [editMode, setEditMode] = useState<Boolean>(false);
-
-    const navigate = useNavigate();
-    const metricUnits = ConfigStorage.getSetting("metricUnits");
-    const localAirportTime = ConfigStorage.getSetting("localAirportTime");
-
-    useEffect(() => {
-        API.get(`/flights?id=${flightID}&metric=${metricUnits}`)
-        .then((data: Flight) => {
-            setFlight(data);
-        });
-
-        API.get("/users/me")
-        .then((data: User) => {
-            setSelfUsername(data.username);
-        });
-    }, []);
-
-    if(flight === undefined) {
-        return (
-            <p className="m-4">Loading...</p>
-        );
-    }
-
-    const toggleEditMode = (event) => {
-        event.preventDefault();
-        setEditMode(!editMode);
-    }
-
-    const deleteFlight = (event) => {
-        event.preventDefault();
-        if(confirm("Are you sure?")) {
-            API.delete(`/flights?id=${flight.id}`)
-            .then(() => navigate("/"));
-        }
-    }
-
-    const updateFlight = (event) => {
-        event.preventDefault();
-
-        const flightPatchData = objectFromForm(event);
-
-        if (flightPatchData === null) {
-            this.toggleEditMode();
-            return;
-        }
-
-        API.patch(`flights?id=${flight.id}&timezones=${localAirportTime}`, flightPatchData)
-        .then(() => window.location.reload());
-    }
-
-    return (
-        <>
-            <Heading text={`${flight.origin.iata || flight.origin.icao } to ${flight.destination.iata || flight.destination.icao}`} />
-            <h2 className="-mt-4 mb-4 text-xl">{flight.username} on {flight.date}</h2>
-           
-            <form onSubmit={updateFlight}>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
-                <div className="container">
-                    <Subheading text="Timings" />
-                    { editMode ? 
-                    <>
-                        <p>Date: <Input type="date" name="date" defaultValue={flight.date} /></p>
-                        <p>Departure Time: <Input type="time" name="departureTime" defaultValue={flight.departureTime} /></p>
-                        <p>Arrival Time: <Input type="time" name="arrivalTime" defaultValue={flight.arrivalTime} /></p>
-                        <p>Arrival Date: <Input type="date" name="arrivalDate" defaultValue={flight.arrivalDate}/></p>
-                        <p>Duration: <Input type="number" name="duration" placeholder={flight.duration?.toString()}/></p>
-                    </>
-                    :
-                    <>
-                        <p>Date: <span>{flight.date}</span></p>
-                        <p>Departure Time: <span>{flight.departureTime || "N/A"}</span></p>
-                        <p>Arrival Time: <span>{flight.arrivalTime || "N/A"}</span></p>
-                        <p>Arrival Date: <span>{flight.arrivalDate || "N/A"}</span></p>
-                        <p>Duration: <span>{flight.duration ? flight.duration + " min" : "N/A"}</span></p>
-                    </>
-                    }
-                </div>
-
-                <div className="container">
-                    <Subheading text="Airports" />
-                    { editMode ?
-                    <>
-                        <p>Origin: <SearchInput name="origin"
-                                                type="airports"
-                                                value={flight.origin}
-                                                onSelect={(airport: Airport) => setFlight(prev => ({...prev!, origin: airport}))}/></p>
-                        <p>Destination: <SearchInput name="destination" 
-                                                     type="airports" 
-                                                     value={flight.destination}
-                                                     onSelect={(airport: Airport) => setFlight(prev => ({...prev!, destination: airport}))}/></p>
-                        <p>Distance (km): <Input type="number" name="distance" placeholder={flight.distance?.toString()}/></p>
-                    </>
-                    :
-                    <>
-                        <p className="mb-2">Distance: <span>{flight.distance ? flight.distance + (metricUnits === "false" ? " mi" : " km") : "N/A"}</span></p>
-                        <p className="font-bold">Origin</p> 
-                        <ul className="mb-2">
-                            <li>ICAO/IATA: <span>{flight.origin.icao}/{flight.origin.iata}</span></li>
-                            <li>Type: <span>{flight.origin.type}</span></li>
-                            <li>Name: <span>{flight.origin.name}</span></li>
-                            <li>Location: <span>{flight.origin.continent}, {flight.origin.country}, {flight.origin.region}, {flight.origin.municipality}</span></li>
-                            <li>Timezone: <span>{flight.origin.timezone}</span></li>
-                        </ul>
-
-                        <p className="font-bold">Destination</p> 
-                        <ul>
-                            <li>ICAO/IATA: <span>{flight.destination.icao}/{flight.destination.iata}</span></li>
-                            <li>Type: <span>{flight.destination.type}</span></li>
-                            <li>Name: <span>{flight.destination.name}</span></li>
-                            <li>Location: <span>{flight.destination.continent}, {flight.destination.country}, {flight.destination.region}, {flight.destination.municipality}</span></li>
-                            <li>Timezone: <span>{flight.destination.timezone}</span></li>
-                        </ul>
-                    </>
-                    }
-                </div>
-
-                <div className="container">
-                    <Subheading text="Other" />
-                    { editMode ?
-                    <>
-                        <p>Seat: <Select name="seat" options={[
-                            { text: flight.seat, value: "" },
-                            { text: "Aisle", value: "aisle" },
-                            { text: "Middle", value: "middle" },
-                            { text: "Window", value: "window" }
-                        ]} /></p>
-                        <p>Aircraft Side: <Select name="aircraftSide" options={[
-                            { text: flight.aircraftSide, value: "" },
-                            { text: "Left", value: "left" },
-                            { text: "Right", value: "right" },
-                            { text: "Center", value: "center" }
-                        ]} /></p>
-                        <p>Class: <Select name="ticketClass" options={[
-                            { text: flight.ticketClass, value: "" },
-                            { text: "Private", value: "private" },
-                            { text: "First", value: "first" },
-                            { text: "Business", value: "business" },
-                            { text: "Economy+", value: "economy+" },
-                            { text: "Economy", value: "economy" }
-                        ]} /></p>
-                        <p>Purpose: <Select name="purpose" options={[
-                            { text: flight.purpose, value: "" },
-                            { text: "Leisure", value: "leisure" },
-                            { text: "Business", value: "business" },
-                            { text: "Crew", value: "crew" },
-                            { text: "Other", value: "other" }
-                        ]} /></p>
-                        <p>Airplane: <Input type="text" name="airplane" placeholder={flight.airplane} /></p>
-                        <p>Airline: <SearchInput name="airline" 
-                                                 type="airlines" 
-                                                 value={flight.airline}
-                                                 onSelect={(airline: Airline) => setFlight(prev => ({...prev!, airline: airline}))}/></p>
-                        <p>Tail Number: <Input type="text" name="tailNumber" placeholder={flight.tailNumber} /></p>
-                        <p>Flight Number: <Input type="text" name="flightNumber" placeholder={flight.flightNumber} /></p>
-                        <p>Connection: <FetchConnection name="connection" 
-                                                        date={flight.date} 
-                                                        origin={flight.origin.icao}
-                                                        destination={flight.destination.icao}
-                                                        value={flight.connection}
-                                                        onFetched={(c: number) => setFlight(prev => ({...prev!, connection: c}))} /></p>
-                        <p>Notes</p>
-                        <TextArea name="notes" defaultValue={flight.notes}/>
-                    </>
-                    :
-                    <>
-                        <p>Seat: <span>{flight.seat || "N/A"}</span></p>
-                        <p>Aircraft Side: <span>{flight.aircraftSide || "N/A"}</span></p>
-                        <p>Class: <span>{flight.ticketClass || "N/A"}</span></p>
-                        <p>Purpose: <span>{flight.purpose || "N/A"}</span></p>
-                        <p>Airplane: <span>{flight.airplane || "N/A"}</span></p>
-                        <p>Airline: <span>{flight.airline ? flight.airline.icao + " - " + flight.airline.name : "N/A"}</span></p>
-                        <p>Tail Number: <span>{flight.tailNumber || "N/A"}</span></p>
-                        <p>Flight Number: <span>{flight.flightNumber || "N/A"}</span></p>
-                        <p>Connection: <span>{flight.connection ? <a href={`/flights?id=${flight.connection}`} className="underline">link</a> : "N/A"}</span></p>
-                        <p>Notes: {flight.notes ?  <p className="whitespace-pre-line inline">{flight.notes}</p> : "N/A"}</p>
-                    </>}
-                </div>
-
-                <div className="container">
-                    <SingleFlightMap flightID={flightID} distance={flight.distance} /> 
-                </div>
-            </div>
-
-            { editMode &&
-                <Button text="Save" 
-                        level="success" 
-                        submit/>
-            }
-            { selfUsername === flight.username &&
-                <>
-                <Button text={editMode ? "Cancel" : "Edit" } level="default" onClick={toggleEditMode} />
-                <Button text="Delete" level="danger" onClick={deleteFlight} />
-                </>
-            }
-            </form>
-        </>
-    );
-}
diff --git a/client/components/Stats.tsx b/client/components/Stats.tsx
deleted file mode 100644
index 5168f7c..0000000
--- a/client/components/Stats.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import React, {useState, useMemo, useEffect} from 'react';
-
-import { Whisper } from './Elements';
-import { Statistics } from '../models';
-import ConfigStorage from '../storage/configStorage';
-import API from '../api';
-
-function StatBox({stat, description}) {
-    return (
-        <div className="container bg-gray-100 text-center rounded-full">
-            <span className="text-3xl block">{stat}</span>
-            {description}
-        </div>
-    );
-}
-
-export function ShortStats() {
-    const [statistics, setStatistics] = useState<Statistics>()
-    const metricUnits = ConfigStorage.getSetting("metricUnits");
-
-    // runs before render
-    useMemo(() => {
-        API.get(`/statistics?metric=${metricUnits}`)
-        .then((data: Statistics) => {
-            setStatistics(data);
-        });
-    }, []);
-
-    if (statistics === undefined) {
-        return <p className="m-4">loading...</p>;
-    }
-
-    return (
-        <div className="flex mb-4 whitespace-nowrap overflow-x-auto ">
-            <StatBox stat={statistics.totalFlights}
-                     description="flights"/>
-
-            <StatBox stat={statistics.totalUniqueAirports}
-                     description="airports"/>
-
-            <StatBox stat={(statistics.totalDuration / 60).toFixed(0)}
-                     description="hours"/>
-
-            <StatBox stat={statistics.totalDistance.toLocaleString()}
-                     description={metricUnits === "false" ? "miles" : "kilometers"}/>
-
-            <StatBox stat={statistics.visitedCountries}
-                     description="countries visited"/>
-        </div>
-    );
-}
-
-function StatFrequency({ object, measure }) {
-    if (Object.keys(object).length === 0) {
-        return <p>No records found</p>
-    };
-
-    return (
-        <ol className="list-decimal ml-5">
-        { Object.keys(object).map((key => {
-            return (
-                <li>
-                    <div className="flex flex-wrap justify-between">
-                        <span>{key}</span>
-                        <div className="inline">
-                            <Whisper text={`${object[key]} ${measure}`} />
-                        </div>
-                    </div>
-                </li>
-            )
-        }))}
-        </ol>
-    )
-}
-
-export function AllStats({ filters }) {
-    const [statistics, setStatistics] = useState<Statistics>();
-    const [durationUnitIndex, setDurationUnitIndex] = useState(0);
-    const [distanceUnitIndex, setDistanceUnitIndex] = useState(0);
-    const metricUnits = ConfigStorage.getSetting('metricUnits');
-
-    useEffect(() => {
-        API.get(`/statistics?metric=${metricUnits}`, filters).then((data: Statistics) => {
-        setStatistics(data);
-        });
-    }, [filters, metricUnits]);
-
-    if (!statistics) {
-        return <p className="m-4">loading...</p>;
-    }
-
-    // cycle through duration units
-    const durationUnits = [
-        { label: "hours", divisor: 60 },
-        { label: "days",  divisor: 1440 },
-        { label: "weeks", divisor: 10080 },
-    ];
-
-    const handleDurationClick = () => {
-        setDurationUnitIndex((prev) => (prev + 1) % durationUnits.length);
-    };
-
-    // cycle through distance units
-    const distanceUnits = [
-        { label: metricUnits === 'false' ? 'mi' : 'km', divisor: 1 },
-        { label: "times around Earth", divisor: metricUnits === 'false' ? 24900 : 40000 },
-        { label: "times to Moon", divisor: metricUnits === 'false' ?  239000 : 385000 },
-    ];
-
-    const handleDistanceClick = () => {
-        setDistanceUnitIndex((prev) => (prev + 1) % distanceUnits.length);
-    };
-
-    return (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
-            <div className="container">
-                <h3 className="text-lg font-semibold mb-4">Generic</h3>
-
-                <p className="mb-2">
-                    Number of flights: <span className="font-medium">{statistics.totalFlights}</span>
-                </p>
-                <p className="mb-2">
-                    Total (registered) time spent flying:{' '}
-                    <span className="font-medium cursor-pointer" onClick={handleDurationClick}>
-                        {(statistics.totalDuration / durationUnits[durationUnitIndex].divisor).toFixed(1)} {' '}
-                        {durationUnits[durationUnitIndex].label}
-                    </span>
-                </p>
-                <p className="mb-2">
-                    Total distance travelled:{' '}
-                    <span className="font-medium cursor-pointer" onClick={handleDistanceClick}>
-                        {(statistics.totalDistance / distanceUnits[distanceUnitIndex].divisor).toFixed(1)} {' '}
-                        {distanceUnits[distanceUnitIndex].label}
-                    </span>
-                </p>
-                <p className="mb-2">
-                    Total unique airports visited:{' '}
-                    <span className="font-medium">{statistics.totalUniqueAirports}</span>
-                </p>
-                <p className="mb-2">
-                    Range of days:{' '}
-                    <span className="font-medium">{statistics.daysRange} days</span>
-                </p>
-                <p className="mb-2">
-                    'Visited' countries:{' '}
-                    <span className="font-medium">{statistics.visitedCountries}</span>
-                </p>
-            </div>
-
-            <div className="container">
-                <h3 className="text-lg font-semibold mb-4">Most visited airports</h3>
-                <StatFrequency object={statistics.mostVisitedAirports} measure="visits" />
-            </div>
-
-            <div className="container">
-                <h3 className="text-lg font-semibold mb-4">Most common countries</h3>
-                <StatFrequency object={statistics.mostCommonCountries} measure="flights" />
-            </div>
-
-            <div className="container">
-                <h3 className="text-lg font-semibold mb-4">Most common seat</h3>
-                <StatFrequency object={statistics.seatFrequency} measure="flights" />
-            </div>
-
-            <div className="container">
-                <h3 className="text-lg font-semibold mb-4">Most common class</h3>
-                <StatFrequency object={statistics.ticketClassFrequency} measure="flights" />
-            </div>
-
-            <div className="container">
-                <h3 className="text-lg font-semibold mb-4">Most common airlines</h3>
-                <StatFrequency object={statistics.mostCommonAirlines} measure="flights" />
-            </div>
-
-    </div>
-  );
-}
-
diff --git a/client/components/UserSelect.tsx b/client/components/UserSelect.tsx
deleted file mode 100644
index e438d86..0000000
--- a/client/components/UserSelect.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import { Select } from './Elements';
-
-import API from '../api';
-
-export default function UserSelect() {
-    const [users, setUsers] = useState<string[]>([]);
-
-    useEffect(() => {
-        API.get("/users")
-        .then((res) => {
-            setUsers(res)
-        });
-    }, [])
-
-    return (
-        <Select name="username" options={[
-            { text: "You", value: "" },
-            ...users.map((username) => ({
-                text: username,
-                value: username
-            }))
-        ]}/>
-    )
-}
diff --git a/client/components/WorldMap.tsx b/client/components/WorldMap.tsx
deleted file mode 100644
index 1d32e0b..0000000
--- a/client/components/WorldMap.tsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ComposableMap, ZoomableGroup, Geographies, Geography, Marker, Line } from "react-simple-maps";
-
-import API from '../api';
-import ConfigStorage from '../storage/configStorage';
-import { Coord, Trajectory } from '../models';
-
-interface BoundsInterface {
-    south: number;
-    north: number;
-    west: number;
-    east: number;
-}
-const defaultBounds: BoundsInterface = {
-    south: -90,
-    north: 90,
-    west: -180,
-    east: 180
-}
-
-interface MapGeographiesProps {
-    lines: Trajectory[];
-    markers: Coord[];
-    zoom: number;
-}
-function MapFeatures({ lines, markers, zoom }: MapGeographiesProps) {
-    const [world, setWorld] = useState<object>();
-
-    useEffect(() => {
-        const showVisitedCountries = ConfigStorage.getSetting("showVisitedCountries");
-        API.get(`/geography/world?visited=${showVisitedCountries}`)
-        .then((data) => setWorld(data));
-    }, []);
-
-    if (world === undefined) {
-        return;
-    }
-
-    const scaleFactor = 1 / Math.sqrt(zoom);
-
-    return (
-        <>
-        <Geographies geography={world}>
-            {({ geographies }) =>
-              geographies.map((geo) => (
-                <Geography
-                    key={geo.rsmKey}
-                    geography={geo}
-                    stroke="#111"
-                    strokeWidth={0.7 * scaleFactor}
-                    fill={geo.properties.visited ? "#F25000" : "#333"}
-                    />
-              ))
-            }
-        </Geographies>
-
-        { lines.map((line) => (
-            <Line
-                from={[line.first.longitude, line.first.latitude]}
-                to={[line.second.longitude, line.second.latitude]}
-                stroke="#FF5533CC"
-                strokeWidth={
-                        (
-                            ConfigStorage.getSetting("frequencyBasedLine") === "true" ?
-                            Math.min(1 + Math.floor(line.frequency / 3), 6)
-                            : 1
-                        ) * scaleFactor
-                    }
-                strokeLinecap="round" />
-
-        ))}
-
-        { markers.map((marker) => (
-            <Marker coordinates={[marker.longitude, marker.latitude]}>
-                <circle r={
-                        (
-                            ConfigStorage.getSetting("frequencyBasedMarker") === "true" ?
-                            Math.min(3 + Math.floor(marker.frequency / 3), 6)
-                            : 3
-                        ) * scaleFactor
-                    }
-                    fill={
-                        ConfigStorage.getSetting("frequencyBasedMarker") === "true" ?
-                        "#FFA50080"
-                        : "#FFA500"
-                    }
-                    stroke="#FFA500"
-                    strokeWidth={0.5 * scaleFactor}
-                />
-            </Marker>
-        ))}
-        </>
-    );
-}
-
-export default function WorldMap() {
-    const [lines, setLines] = useState<Trajectory[]>([]);
-    const [markers, setMarkers] = useState<Coord[]>([]);
-    const [initialZoom, setInitialZoom] = useState<number>(1);
-    const [zoom, setZoom] = useState<number>(1);
-    const [center, setCenter] = useState<[number, number]>([0, 0])
-
-    useEffect(() => {
-        API.get("/geography/decorations")
-        .then((data: [Trajectory[], Coord[]]) => {
-            setLines(data[0]);
-            setMarkers(data[1]);
-
-            if (data[1] && data[1].length > 1 && ConfigStorage.getSetting("restrictWorldMap") === "true") {
-                // find bounding box defined by visited airports
-                // i.e. get southernmost, eastmost, northmost, westmost
-                // visited airports
-                const latitudes = data[1].map(coord => coord.latitude);
-                const longitudes = data[1].map(coord => coord.longitude);
-
-                const south = Math.min(...latitudes);
-                const north = Math.max(...latitudes);
-                const west = Math.min(...longitudes);
-                const east = Math.max(...longitudes);
-
-                // compute center
-                const centerLon = (west + east) / 2;
-                const centerLat = (south + north) / 2;
-                setCenter([centerLon, centerLat]);
-
-                // compute zoom
-                const lonSpan = east - west;
-                const latSpan = north - south;
-                const maxSpan = Math.max(lonSpan, latSpan);
-                const computedZoom = Math.min(150 / maxSpan, 3);
-                setInitialZoom(computedZoom);
-
-                if (computedZoom < 1) {
-                   setInitialZoom(1);
-                   setCenter([0, 0]);
-                }
-            }
-        });
-    }, []);
-
-    return (
-        <>
-            <ComposableMap width={1000} height={470}>
-                <ZoomableGroup maxZoom={10}
-                               translateExtent={[[0, 0], [1000, 470]]}
-                               zoom={initialZoom}
-                               center={center}
-                               onMove={({zoom: newZoom}) => {
-                                   if (newZoom != zoom) setZoom(newZoom)
-                               }}>
-
-                    <MapFeatures lines={lines} markers={markers} zoom={zoom}/>
-
-                </ZoomableGroup>
-            </ComposableMap>
-        </>
-    );
-}
-
-interface SingleFlightMapProps {
-    flightID: number;
-    distance: number;
-}
-export function SingleFlightMap({ flightID, distance }: SingleFlightMapProps) {
-    const [lines, setLines] = useState<Trajectory[]>([]);
-    const [markers, setMarkers] = useState<Coord[]>([]);
-
-    useEffect(() => {
-        API.get(`/geography/decorations?flight_id=${flightID}`)
-        .then((data: [Trajectory[], Coord[]]) => {
-            setLines(data[0]);
-            setMarkers(data[1]);
-        })
-    }, [])
-
-    // some trajectory is required for this component
-    if (lines.length == 0) {
-        return;
-    }
-
-    // function that computes midpoint of a trajectory 
-    // on a sphere, i.e. supporting trajs. that 'clip'
-    // around the world projection
-    const midpointOnSphere = (p1: Coord, p2: Coord) => {
-        // convert degrees to radians
-        const toRad = deg => deg * Math.PI / 180;
-        const toDeg = rad => rad * 180 / Math.PI;
-
-        const lat1 = toRad(p1.latitude);
-        const lon1 = toRad(p1.longitude);
-        const lat2 = toRad(p2.latitude);
-        const lon2 = toRad(p2.longitude);
-
-        // convert to cartesian
-        const x1 = Math.cos(lat1) * Math.cos(lon1);
-        const y1 = Math.cos(lat1) * Math.sin(lon1);
-        const z1 = Math.sin(lat1);
-
-        const x2 = Math.cos(lat2) * Math.cos(lon2);
-        const y2 = Math.cos(lat2) * Math.sin(lon2);
-        const z2 = Math.sin(lat2);
-
-        // compute average
-        const x = (x1 + x2) / 2;
-        const y = (y1 + y2) / 2;
-        const z = (z1 + z2) / 2;
-
-        // convert back to lat/lon
-        const lon = Math.atan2(y, x);
-        const hyp = Math.sqrt(x * x + y * y);
-        const lat = Math.atan2(z, hyp);
-
-        return [toDeg(lon), toDeg(lat)];
-    };
-
-    // compute center and zoom of map so that it fits the trajectory
-    const center = midpointOnSphere(markers[0], markers[1]);
-    const zoom = Math.min(20000/distance, 10) * 160;
-
-    return (
-        <ComposableMap width={1000} 
-                       height={470}
-                       projectionConfig={{
-                           scale: zoom,
-                           rotate: [-center[0], -center[1], 0] // rotate world around center of traj.
-                       }}>
-
-                {/* the zoom calculation effectively undoes the automatic zoom 
-                    adjustment from the ComposableMap component */}
-                <MapFeatures lines={lines} markers={markers} zoom={1 / Math.sqrt(zoom)}/>
-
-        </ComposableMap>
-    );
-}
diff --git a/client/components/flights/FlightDetail.tsx b/client/components/flights/FlightDetail.tsx
new file mode 100644
index 0000000..1baf558
--- /dev/null
+++ b/client/components/flights/FlightDetail.tsx
@@ -0,0 +1,552 @@
+import { useState, type FormEvent, lazy, Suspense } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { ArrowLeft, ArrowRight, Pencil, Trash2, X, Check } from 'lucide-react'
+import { useQueryClient } from '@tanstack/react-query'
+
+import API from '@/api'
+import {
+    useCurrentUser,
+    useFlight,
+    useDeleteFlight,
+    searchAirports,
+    searchAirlines,
+} from '@/lib/queries'
+import type { Airport, Airline, Flight } from '@/models'
+import ConfigStorage from '@/storage/configStorage'
+
+import { Panel, PanelHeader, PanelTitle, PanelBody } from '@/components/ui/Panel'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Label } from '@/components/ui/Label'
+import { Select } from '@/components/ui/Select'
+import { Combobox, type ComboboxOption } from '@/components/ui/Combobox'
+import { Spinner } from '@/components/ui/Spinner'
+import { Badge } from '@/components/ui/Badge'
+import { DataBlock } from '@/components/ui/DataBlock'
+const SingleFlightMap = lazy(() =>
+    import('@/components/map/WorldMap').then((m) => ({ default: m.SingleFlightMap })),
+)
+
+import { formatDuration, formatDistance, formatTime, airportCode } from '@/lib/format'
+
+interface FlightDetailProps {
+    flightId: number
+}
+
+const SEAT_OPTIONS = ['', 'aisle', 'middle', 'window']
+const AIRCRAFT_SIDES = ['', 'left', 'right', 'center']
+const CLASSES = ['', 'private', 'first', 'business', 'economy+', 'economy']
+const PURPOSES = ['', 'leisure', 'business', 'crew', 'other']
+
+export function FlightDetail({ flightId }: FlightDetailProps) {
+    const navigate = useNavigate()
+    const metric = ConfigStorage.getSetting('metricUnits') !== 'false'
+    const localAirportTime = ConfigStorage.getSetting('localAirportTime') === 'true'
+    const { data: flight, isLoading } = useFlight(flightId)
+    const { data: me } = useCurrentUser()
+
+    const [editing, setEditing] = useState(false)
+    const [draft, setDraft] = useState<Partial<Flight>>({})
+    const [saving, setSaving] = useState(false)
+    const qc = useQueryClient()
+
+    const deleteMut = useDeleteFlight()
+
+    if (isLoading || !flight) {
+        return (
+            <div className="flex justify-center py-16">
+                <Spinner />
+            </div>
+        )
+    }
+
+    const isOwner = me?.username === flight.username
+
+    const enterEdit = () => {
+        setDraft({
+            date: flight.date,
+            departureTime: flight.departureTime,
+            arrivalTime: flight.arrivalTime,
+            arrivalDate: flight.arrivalDate,
+            duration: flight.duration,
+            origin: flight.origin,
+            destination: flight.destination,
+            distance: flight.distance,
+            seat: flight.seat,
+            aircraftSide: flight.aircraftSide,
+            ticketClass: flight.ticketClass,
+            purpose: flight.purpose,
+            airplane: flight.airplane,
+            airline: flight.airline,
+            tailNumber: flight.tailNumber,
+            flightNumber: flight.flightNumber,
+            notes: flight.notes,
+        })
+        setEditing(true)
+    }
+
+    const handleSave = async (e: FormEvent) => {
+        e.preventDefault()
+        setSaving(true)
+        const payload: any = {}
+        for (const [k, v] of Object.entries(draft)) {
+            if (v === '' || v === undefined || v === null) continue
+            if (k === 'origin' || k === 'destination') {
+                payload[k] = (v as Airport).icao
+            } else if (k === 'airline') {
+                payload[k] = (v as Airline).icao
+            } else {
+                payload[k] = v
+            }
+        }
+        try {
+            await API.patch(
+                `/flights?id=${flightId}&timezones=${localAirportTime}`,
+                payload,
+            )
+            await qc.invalidateQueries({ queryKey: ['flight', flightId] })
+            await qc.invalidateQueries({ queryKey: ['flights'] })
+            setEditing(false)
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    const handleDelete = () => {
+        if (!confirm('Delete this flight?')) return
+        deleteMut.mutate(flightId, {
+            onSuccess: () => navigate('/flights'),
+        })
+    }
+
+    return (
+        <form onSubmit={handleSave} className="max-w-7xl mx-auto p-4 md:p-6 space-y-4">
+            {/* Back + header */}
+            <div className="flex items-center justify-between gap-4 flex-wrap">
+                <Link
+                    to="/flights"
+                    className="board-label flex items-center gap-1.5 text-ink-muted hover:text-ink"
+                >
+                    <ArrowLeft size={14} /> All flights
+                </Link>
+                <div className="flex items-center gap-2">
+                    {isOwner && !editing && (
+                        <>
+                            <Button type="button" variant="outline" size="sm" onClick={enterEdit}>
+                                <Pencil size={13} /> Edit
+                            </Button>
+                            <Button
+                                type="button"
+                                variant="danger"
+                                size="sm"
+                                onClick={handleDelete}
+                                disabled={deleteMut.isPending}
+                            >
+                                <Trash2 size={13} /> Delete
+                            </Button>
+                        </>
+                    )}
+                    {editing && (
+                        <>
+                            <Button
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => setEditing(false)}
+                            >
+                                <X size={13} /> Cancel
+                            </Button>
+                            <Button
+                                type="submit"
+                                variant="accent"
+                                size="sm"
+                                disabled={saving}
+                            >
+                                <Check size={13} /> {saving ? 'Saving…' : 'Save'}
+                            </Button>
+                        </>
+                    )}
+                </div>
+            </div>
+
+            {/* Banner */}
+            <Panel>
+                <div className="px-4 md:px-6 py-5">
+                    <div className="flex items-center gap-3 mb-2">
+                        <Badge variant="muted">{flight.username}</Badge>
+                        <Badge variant="default">{flight.date}</Badge>
+                        {flight.flightNumber && <Badge variant="accent">{flight.flightNumber}</Badge>}
+                    </div>
+                    <div className="flex items-center gap-4 md:gap-6 flex-wrap">
+                        <div className="text-3xl md:text-5xl font-mono font-bold tracking-board">
+                            {airportCode(flight.origin)}
+                        </div>
+                        <div className="flex flex-col items-center text-ink-muted">
+                            <span className="board-label">
+                                {formatDuration(flight.duration)}
+                            </span>
+                            <ArrowRight size={24} className="my-1" />
+                            <span className="board-label">
+                                {formatDistance(flight.distance, metric)}
+                            </span>
+                        </div>
+                        <div className="text-3xl md:text-5xl font-mono font-bold tracking-board">
+                            {airportCode(flight.destination)}
+                        </div>
+                    </div>
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-5 pt-4 border-t border-rule">
+                        <DataBlock
+                            label="Departure"
+                            value={formatTime(flight.departureTime)}
+                            sub={flight.origin?.timezone}
+                        />
+                        <DataBlock
+                            label="Arrival"
+                            value={formatTime(flight.arrivalTime)}
+                            sub={flight.arrivalDate || flight.destination?.timezone}
+                        />
+                        <DataBlock
+                            label="Airline"
+                            value={
+                                flight.airline
+                                    ? flight.airline.iata || flight.airline.icao
+                                    : '—'
+                            }
+                            sub={flight.airline?.name}
+                        />
+                        <DataBlock
+                            label="Aircraft"
+                            value={flight.airplane || '—'}
+                            sub={flight.tailNumber || undefined}
+                        />
+                    </div>
+                </div>
+            </Panel>
+
+            {/* Airports */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <AirportPanel title="Departure airport" airport={flight.origin} />
+                <AirportPanel title="Arrival airport" airport={flight.destination} />
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                <Panel>
+                    <PanelHeader>
+                        <PanelTitle>Route</PanelTitle>
+                    </PanelHeader>
+                    {flight.distance ? (
+                        <Suspense
+                            fallback={
+                                <div className="flex justify-center py-12">
+                                    <Spinner />
+                                </div>
+                            }
+                        >
+                            <SingleFlightMap
+                                flightId={flightId}
+                                distance={flight.distance}
+                                className="bg-paper-soft/30"
+                            />
+                        </Suspense>
+                    ) : (
+                        <PanelBody className="text-center text-ink-muted text-sm">No route data</PanelBody>
+                    )}
+                </Panel>
+
+                <Panel>
+                    <PanelHeader>
+                        <PanelTitle>{editing ? 'Edit details' : 'Details'}</PanelTitle>
+                    </PanelHeader>
+                    <PanelBody className="space-y-3">
+                        {editing ? (
+                            <EditFields draft={draft} setDraft={setDraft} />
+                        ) : (
+                            <ReadFields flight={flight} />
+                        )}
+                    </PanelBody>
+                </Panel>
+            </div>
+
+            {flight.notes && !editing && (
+                <Panel>
+                    <PanelHeader>
+                        <PanelTitle>Notes</PanelTitle>
+                    </PanelHeader>
+                    <PanelBody>
+                        <p className="font-mono text-sm whitespace-pre-line text-ink-soft">
+                            {flight.notes}
+                        </p>
+                    </PanelBody>
+                </Panel>
+            )}
+        </form>
+    )
+}
+
+function AirportPanel({ title, airport }: { title: string; airport: any }) {
+    if (!airport || typeof airport === 'string') {
+        return (
+            <Panel>
+                <PanelHeader>
+                    <PanelTitle>{title}</PanelTitle>
+                </PanelHeader>
+                <PanelBody className="text-sm font-mono text-ink-muted">
+                    {typeof airport === 'string' ? airport : 'No airport data'}
+                </PanelBody>
+            </Panel>
+        )
+    }
+    return (
+        <Panel>
+            <PanelHeader>
+                <PanelTitle>{title}</PanelTitle>
+                <span className="font-mono font-semibold tracking-board text-ink">
+                    {airport.iata || airport.icao}
+                </span>
+            </PanelHeader>
+            <PanelBody className="grid grid-cols-2 gap-3">
+                <DataBlock label="Name" value={airport.name || '—'} className="col-span-2" />
+                <DataBlock label="City" value={airport.municipality || '—'} />
+                <DataBlock label="Country" value={airport.country || '—'} />
+                <DataBlock label="Region" value={airport.region || '—'} />
+                <DataBlock label="Continent" value={airport.continent || '—'} />
+                <DataBlock label="ICAO / IATA" value={`${airport.icao || '—'} / ${airport.iata || '—'}`} />
+                <DataBlock label="Timezone" value={airport.timezone || '—'} />
+            </PanelBody>
+        </Panel>
+    )
+}
+
+function ReadFields({ flight }: { flight: Flight }) {
+    return (
+        <div className="grid grid-cols-2 gap-3">
+            <DataBlock label="Seat" value={flight.seat || '—'} valueClassName="capitalize" />
+            <DataBlock
+                label="Side"
+                value={flight.aircraftSide || '—'}
+                valueClassName="capitalize"
+            />
+            <DataBlock label="Class" value={flight.ticketClass || '—'} valueClassName="capitalize" />
+            <DataBlock label="Purpose" value={flight.purpose || '—'} valueClassName="capitalize" />
+            <DataBlock label="Tail number" value={flight.tailNumber || '—'} />
+            <DataBlock label="Flight number" value={flight.flightNumber || '—'} />
+            {flight.connection && (
+                <div className="col-span-2">
+                    <span className="board-label">Connection</span>
+                    <Link
+                        to={`/flights?id=${flight.connection}`}
+                        className="block font-mono text-sm text-accent-deep underline mt-1"
+                    >
+                        Linked flight #{flight.connection}
+                    </Link>
+                </div>
+            )}
+        </div>
+    )
+}
+
+interface EditFieldsProps {
+    draft: Partial<Flight>
+    setDraft: (d: Partial<Flight>) => void
+}
+
+function EditFields({ draft, setDraft }: EditFieldsProps) {
+    const set = <K extends keyof Flight>(k: K, v: Flight[K] | undefined) =>
+        setDraft({ ...draft, [k]: v as any })
+
+    const onAirportSearch = async (q: string): Promise<ComboboxOption<Airport>[]> => {
+        const res = await searchAirports(q)
+        return res.map((a) => ({
+            value: a.icao,
+            label: `${a.iata || a.icao} · ${a.municipality}`,
+            sub: `${a.name} · ${a.country}`,
+            raw: a,
+        }))
+    }
+    const onAirlineSearch = async (q: string): Promise<ComboboxOption<Airline>[]> => {
+        const res = await searchAirlines(q)
+        return res.map((a) => ({
+            value: a.icao,
+            label: `${a.iata || a.icao} · ${a.name}`,
+            raw: a,
+        }))
+    }
+
+    return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div className="col-span-2">
+                <Label>Date</Label>
+                <Input
+                    type="date"
+                    value={draft.date ?? ''}
+                    onChange={(e) => set('date', e.target.value)}
+                />
+            </div>
+
+            <div>
+                <Label>Origin</Label>
+                <Combobox<Airport>
+                    displayValue={
+                        draft.origin
+                            ? `${draft.origin.iata || draft.origin.icao} · ${draft.origin.municipality}`
+                            : undefined
+                    }
+                    onSearch={onAirportSearch}
+                    onSelect={(o) => set('origin', o.raw as Airport)}
+                />
+            </div>
+            <div>
+                <Label>Destination</Label>
+                <Combobox<Airport>
+                    displayValue={
+                        draft.destination
+                            ? `${draft.destination.iata || draft.destination.icao} · ${draft.destination.municipality}`
+                            : undefined
+                    }
+                    onSearch={onAirportSearch}
+                    onSelect={(o) => set('destination', o.raw as Airport)}
+                />
+            </div>
+
+            <div>
+                <Label>Departure time</Label>
+                <Input
+                    type="time"
+                    value={draft.departureTime ?? ''}
+                    onChange={(e) => set('departureTime', e.target.value)}
+                />
+            </div>
+            <div>
+                <Label>Arrival time</Label>
+                <Input
+                    type="time"
+                    value={draft.arrivalTime ?? ''}
+                    onChange={(e) => set('arrivalTime', e.target.value)}
+                />
+            </div>
+
+            <div>
+                <Label>Arrival date</Label>
+                <Input
+                    type="date"
+                    value={draft.arrivalDate ?? ''}
+                    onChange={(e) => set('arrivalDate', e.target.value)}
+                />
+            </div>
+            <div>
+                <Label>Duration (min)</Label>
+                <Input
+                    type="number"
+                    value={draft.duration ?? ''}
+                    onChange={(e) =>
+                        set('duration', e.target.value ? Number(e.target.value) : undefined)
+                    }
+                />
+            </div>
+
+            <div>
+                <Label>Distance</Label>
+                <Input
+                    type="number"
+                    value={draft.distance ?? ''}
+                    onChange={(e) =>
+                        set('distance', e.target.value ? Number(e.target.value) : undefined)
+                    }
+                />
+            </div>
+            <div>
+                <Label>Airline</Label>
+                <Combobox<Airline>
+                    displayValue={
+                        draft.airline
+                            ? `${draft.airline.iata || draft.airline.icao} · ${draft.airline.name}`
+                            : undefined
+                    }
+                    onSearch={onAirlineSearch}
+                    onSelect={(o) => set('airline', o.raw as Airline)}
+                />
+            </div>
+
+            <div>
+                <Label>Seat</Label>
+                <Select value={draft.seat ?? ''} onChange={(e) => set('seat', e.target.value)}>
+                    {SEAT_OPTIONS.map((o) => (
+                        <option key={o} value={o}>
+                            {o || '—'}
+                        </option>
+                    ))}
+                </Select>
+            </div>
+            <div>
+                <Label>Side</Label>
+                <Select
+                    value={draft.aircraftSide ?? ''}
+                    onChange={(e) => set('aircraftSide', e.target.value)}
+                >
+                    {AIRCRAFT_SIDES.map((o) => (
+                        <option key={o} value={o}>
+                            {o || '—'}
+                        </option>
+                    ))}
+                </Select>
+            </div>
+
+            <div>
+                <Label>Class</Label>
+                <Select
+                    value={draft.ticketClass ?? ''}
+                    onChange={(e) => set('ticketClass', e.target.value)}
+                >
+                    {CLASSES.map((o) => (
+                        <option key={o} value={o}>
+                            {o || '—'}
+                        </option>
+                    ))}
+                </Select>
+            </div>
+            <div>
+                <Label>Purpose</Label>
+                <Select value={draft.purpose ?? ''} onChange={(e) => set('purpose', e.target.value)}>
+                    {PURPOSES.map((o) => (
+                        <option key={o} value={o}>
+                            {o || '—'}
+                        </option>
+                    ))}
+                </Select>
+            </div>
+
+            <div>
+                <Label>Airplane</Label>
+                <Input
+                    value={draft.airplane ?? ''}
+                    onChange={(e) => set('airplane', e.target.value)}
+                />
+            </div>
+            <div>
+                <Label>Tail number</Label>
+                <Input
+                    value={draft.tailNumber ?? ''}
+                    onChange={(e) => set('tailNumber', e.target.value)}
+                />
+            </div>
+
+            <div className="col-span-2">
+                <Label>Flight number</Label>
+                <Input
+                    value={draft.flightNumber ?? ''}
+                    onChange={(e) => set('flightNumber', e.target.value)}
+                />
+            </div>
+
+            <div className="col-span-2">
+                <Label>Notes</Label>
+                <textarea
+                    rows={3}
+                    value={draft.notes ?? ''}
+                    onChange={(e) => set('notes', e.target.value)}
+                    className="w-full bg-paper border border-rule px-3 py-2 font-mono text-sm focus:border-ink focus:outline-none"
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/client/components/flights/FlightFilters.tsx b/client/components/flights/FlightFilters.tsx
new file mode 100644
index 0000000..6d2d939
--- /dev/null
+++ b/client/components/flights/FlightFilters.tsx
@@ -0,0 +1,147 @@
+import { useState } from 'react'
+import { Filter, X } from 'lucide-react'
+import { Sheet } from '@/components/ui/Sheet'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Label } from '@/components/ui/Label'
+import { Select } from '@/components/ui/Select'
+import { Badge } from '@/components/ui/Badge'
+import { useUsernames, type FlightsFilters } from '@/lib/queries'
+
+interface FlightFiltersProps {
+    filters: FlightsFilters
+    onChange: (f: FlightsFilters) => void
+}
+
+const ACTIVE_KEYS: (keyof FlightsFilters)[] = ['start', 'end', 'username']
+
+export function FlightFiltersBar({ filters, onChange }: FlightFiltersProps) {
+    const [open, setOpen] = useState(false)
+    const { data: usernames } = useUsernames()
+    const [draft, setDraft] = useState<FlightsFilters>(filters)
+
+    const activeCount = ACTIVE_KEYS.filter((k) => filters[k] !== undefined && filters[k] !== '').length
+
+    const apply = () => {
+        const clean: FlightsFilters = {}
+        for (const [k, v] of Object.entries(draft)) {
+            if (v === '' || v === undefined || v === null) continue
+            ;(clean as any)[k] = v
+        }
+        onChange(clean)
+        setOpen(false)
+    }
+
+    const clear = () => {
+        setDraft({})
+        onChange({})
+        setOpen(false)
+    }
+
+    return (
+        <>
+            <div className="flex items-center justify-between gap-3 mb-3 flex-wrap">
+                <div className="flex items-center gap-2 flex-wrap">
+                    {filters.start && (
+                        <FilterChip
+                            label={`From ${filters.start}`}
+                            onClear={() => onChange({ ...filters, start: undefined })}
+                        />
+                    )}
+                    {filters.end && (
+                        <FilterChip
+                            label={`To ${filters.end}`}
+                            onClear={() => onChange({ ...filters, end: undefined })}
+                        />
+                    )}
+                    {filters.username && (
+                        <FilterChip
+                            label={`User ${filters.username}`}
+                            onClear={() => onChange({ ...filters, username: undefined })}
+                        />
+                    )}
+                    {activeCount === 0 && (
+                        <span className="board-label text-ink-muted">All flights</span>
+                    )}
+                </div>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                        setDraft(filters)
+                        setOpen(true)
+                    }}
+                >
+                    <Filter size={13} />
+                    Filters
+                    {activeCount > 0 && (
+                        <span className="ml-1 bg-accent text-ink px-1.5 text-[10px] font-bold">
+                            {activeCount}
+                        </span>
+                    )}
+                </Button>
+            </div>
+
+            <Sheet open={open} onOpenChange={setOpen} title="Filters">
+                <div className="space-y-4">
+                    <div>
+                        <Label>Start date</Label>
+                        <Input
+                            type="date"
+                            value={draft.start ?? ''}
+                            onChange={(e) => setDraft({ ...draft, start: e.target.value })}
+                        />
+                    </div>
+                    <div>
+                        <Label>End date</Label>
+                        <Input
+                            type="date"
+                            value={draft.end ?? ''}
+                            onChange={(e) => setDraft({ ...draft, end: e.target.value })}
+                        />
+                    </div>
+                    <div>
+                        <Label>User</Label>
+                        <Select
+                            value={draft.username ?? ''}
+                            onChange={(e) =>
+                                setDraft({ ...draft, username: e.target.value || undefined })
+                            }
+                        >
+                            <option value="">Any user</option>
+                            {usernames?.map((u) => (
+                                <option key={u} value={u}>
+                                    {u}
+                                </option>
+                            ))}
+                        </Select>
+                    </div>
+
+                    <div className="flex gap-2 pt-4 border-t border-rule">
+                        <Button variant="outline" onClick={clear} className="flex-1">
+                            Clear all
+                        </Button>
+                        <Button variant="accent" onClick={apply} className="flex-1">
+                            Apply
+                        </Button>
+                    </div>
+                </div>
+            </Sheet>
+        </>
+    )
+}
+
+function FilterChip({ label, onClear }: { label: string; onClear: () => void }) {
+    return (
+        <Badge variant="accent" className="gap-1.5 pl-2 pr-1 py-1">
+            {label}
+            <button
+                onClick={onClear}
+                aria-label="Remove filter"
+                className="hover:text-danger"
+            >
+                <X size={11} />
+            </button>
+        </Badge>
+    )
+}
diff --git a/client/components/flights/FlightsTable.tsx b/client/components/flights/FlightsTable.tsx
new file mode 100644
index 0000000..7265015
--- /dev/null
+++ b/client/components/flights/FlightsTable.tsx
@@ -0,0 +1,194 @@
+import { useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ArrowRight, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
+import type { SortingState } from '@tanstack/react-table'
+
+import type { Flight } from '@/models'
+import { Spinner } from '@/components/ui/Spinner'
+import { Badge } from '@/components/ui/Badge'
+import { formatDistance, formatDuration, formatTime, airportCode } from '@/lib/format'
+import { cn } from '@/lib/cn'
+import {
+    FLIGHT_COLUMNS,
+    COLUMN_INDEX,
+    type FlightColumnDef,
+} from '@/lib/flightColumns'
+import type { ColumnPref } from '@/storage/columnsStorage'
+
+interface FlightsTableProps {
+    flights: Flight[] | undefined
+    isLoading: boolean
+    sorting: SortingState
+    setSorting: (s: SortingState) => void
+    metric: boolean
+    columnPrefs: ColumnPref[]
+}
+
+export function FlightsTable({
+    flights,
+    isLoading,
+    sorting,
+    setSorting,
+    metric,
+    columnPrefs,
+}: FlightsTableProps) {
+    const navigate = useNavigate()
+
+    const visibleColumns = useMemo<FlightColumnDef[]>(() => {
+        // Use prefs order, fall back to registry order for unknowns.
+        const fromPrefs = columnPrefs
+            .filter((p) => p.visible && COLUMN_INDEX[p.id])
+            .map((p) => COLUMN_INDEX[p.id])
+        return fromPrefs.length > 0 ? fromPrefs : FLIGHT_COLUMNS.filter((c) => c.defaultVisible)
+    }, [columnPrefs])
+
+    const currentSort = sorting[0]
+    const toggleSort = (key: string) => {
+        if (currentSort?.id === key) {
+            setSorting([{ id: key, desc: !currentSort.desc }])
+        } else {
+            setSorting([{ id: key, desc: true }])
+        }
+    }
+
+    if (isLoading) {
+        return (
+            <div className="flex justify-center py-16">
+                <Spinner />
+            </div>
+        )
+    }
+
+    if (!flights || flights.length === 0) {
+        return (
+            <div className="text-center text-ink-muted text-sm font-mono py-16">
+                No flights found.
+            </div>
+        )
+    }
+
+    return (
+        <>
+            {/* Desktop table */}
+            <div className="hidden md:block overflow-x-auto">
+                <table className="w-full border-collapse">
+                    <thead className="bg-paper-soft border-y border-rule">
+                        <tr>
+                            {visibleColumns.map((col) => {
+                                const sortable = !!col.sortable
+                                const sortedDesc =
+                                    sortable && currentSort?.id === col.sortable
+                                        ? currentSort.desc
+                                        : undefined
+                                return (
+                                    <th
+                                        key={col.id}
+                                        onClick={
+                                            sortable ? () => toggleSort(col.sortable!) : undefined
+                                        }
+                                        className={cn(
+                                            'board-label text-left px-3 h-10 select-none whitespace-nowrap',
+                                            col.numeric && 'text-right',
+                                            sortable && 'cursor-pointer hover:text-ink',
+                                        )}
+                                    >
+                                        <span
+                                            className={cn(
+                                                'inline-flex items-center gap-1',
+                                                col.numeric && 'justify-end w-full',
+                                            )}
+                                        >
+                                            {col.label}
+                                            {sortable && sortedDesc === undefined && (
+                                                <ArrowUpDown size={11} className="opacity-40" />
+                                            )}
+                                            {sortable && sortedDesc === false && (
+                                                <ArrowUp size={11} />
+                                            )}
+                                            {sortable && sortedDesc === true && (
+                                                <ArrowDown size={11} />
+                                            )}
+                                        </span>
+                                    </th>
+                                )
+                            })}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {flights.map((flight, i) => (
+                            <tr
+                                key={flight.id}
+                                onClick={() => navigate(`/flights?id=${flight.id}`)}
+                                className={cn(
+                                    'cursor-pointer border-b border-rule transition-colors',
+                                    i % 2 === 0 ? 'bg-paper' : 'bg-paper-stripe',
+                                    'hover:bg-accent-soft/40',
+                                )}
+                            >
+                                {visibleColumns.map((col) => (
+                                    <td
+                                        key={col.id}
+                                        className={cn(
+                                            'px-3 py-2.5 font-mono text-sm whitespace-nowrap',
+                                            col.numeric && 'text-right tabular-nums',
+                                            col.id === 'notes' && 'max-w-[280px] truncate',
+                                        )}
+                                    >
+                                        {col.render(flight, { metric })}
+                                    </td>
+                                ))}
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* Mobile cards (compact, doesn't honor column prefs) */}
+            <div className="md:hidden divide-y divide-rule">
+                {flights.map((f, i) => (
+                    <button
+                        key={f.id}
+                        onClick={() => navigate(`/flights?id=${f.id}`)}
+                        className={cn(
+                            'w-full text-left p-4 transition-colors',
+                            i % 2 === 0 ? 'bg-paper' : 'bg-paper-stripe',
+                            'hover:bg-accent-soft/40',
+                        )}
+                    >
+                        <div className="flex items-center justify-between mb-1.5">
+                            <span className="font-mono tabular-nums text-xs text-ink-muted">
+                                {f.date}
+                            </span>
+                            {f.ticketClass && (
+                                <Badge variant="muted">{f.ticketClass}</Badge>
+                            )}
+                        </div>
+                        <div className="flex items-center gap-2 font-mono">
+                            <span className="text-xl font-semibold tracking-board">
+                                {airportCode(f.origin)}
+                            </span>
+                            <ArrowRight size={14} className="text-ink-faint" />
+                            <span className="text-xl font-semibold tracking-board">
+                                {airportCode(f.destination)}
+                            </span>
+                            <span className="ml-auto text-ink-muted tabular-nums text-xs">
+                                {formatTime(f.departureTime)}
+                            </span>
+                        </div>
+                        <div className="flex items-center gap-3 mt-1 text-xs font-mono text-ink-muted tabular-nums">
+                            <span>{formatDuration(f.duration)}</span>
+                            <span>·</span>
+                            <span>{formatDistance(f.distance, metric)}</span>
+                            {f.airline && (
+                                <>
+                                    <span>·</span>
+                                    <span>{f.airline.iata || f.airline.icao}</span>
+                                </>
+                            )}
+                        </div>
+                    </button>
+                ))}
+            </div>
+        </>
+    )
+}
diff --git a/client/components/map/WorldMap.tsx b/client/components/map/WorldMap.tsx
new file mode 100644
index 0000000..2b84708
--- /dev/null
+++ b/client/components/map/WorldMap.tsx
@@ -0,0 +1,195 @@
+import { useState } from 'react'
+import { ComposableMap, ZoomableGroup, Geographies, Geography, Marker, Line } from 'react-simple-maps'
+import { useDecorations, useWorldGeography } from '@/lib/queries'
+import ConfigStorage from '@/storage/configStorage'
+
+interface WorldMapProps {
+    flightId?: number
+    className?: string
+    interactive?: boolean
+}
+
+const MAP_W = 1000
+const MAP_H = 480
+
+const COLORS = {
+    land: '#EFE7CE',
+    landStroke: '#14130F',
+    visited: '#F5C518',
+    visitedStroke: '#C99A00',
+    line: '#14130F',
+    marker: '#E85D1F',
+    markerStroke: '#A33A0E',
+}
+
+export function WorldMap({ flightId, className, interactive = true }: WorldMapProps) {
+    const showVisited = ConfigStorage.getSetting('showVisitedCountries') === 'true'
+    const freqMarker = ConfigStorage.getSetting('frequencyBasedMarker') === 'true'
+    const freqLine = ConfigStorage.getSetting('frequencyBasedLine') === 'true'
+
+    const { data: world } = useWorldGeography(showVisited)
+    const { data: decor } = useDecorations(flightId)
+
+    const lines = decor?.lines ?? []
+    const markers = decor?.markers ?? []
+
+    const [zoom, setZoom] = useState(1)
+    // Inverse-sqrt scaling keeps markers/lines visually constant as the user zooms.
+    const sf = 1 / Math.sqrt(zoom)
+
+    return (
+        <div className={className}>
+            <ComposableMap width={MAP_W} height={MAP_H} style={{ width: '100%', height: 'auto', display: 'block' }}>
+                <ZoomableGroup
+                    maxZoom={interactive ? 10 : 1}
+                    minZoom={1}
+                    filterZoomEvent={() => interactive}
+                    onMove={({ zoom: z }) => {
+                        if (z !== zoom) setZoom(z)
+                    }}
+                    translateExtent={[
+                        [0, 0],
+                        [MAP_W, MAP_H],
+                    ]}
+                >
+                    {world && (
+                        <Geographies geography={world as any}>
+                            {({ geographies }) =>
+                                geographies.map((geo: any) => (
+                                    <Geography
+                                        key={geo.rsmKey}
+                                        geography={geo}
+                                        stroke={geo.properties.visited ? COLORS.visitedStroke : COLORS.landStroke}
+                                        strokeWidth={(geo.properties.visited ? 0.5 : 0.3) * sf}
+                                        fill={geo.properties.visited ? COLORS.visited : COLORS.land}
+                                        style={{
+                                            default: { outline: 'none' },
+                                            hover: { outline: 'none', fill: geo.properties.visited ? COLORS.visited : COLORS.land },
+                                            pressed: { outline: 'none' },
+                                        }}
+                                    />
+                                ))
+                            }
+                        </Geographies>
+                    )}
+
+                    {lines.map((line, i) => {
+                        const w = freqLine ? Math.min(0.6 + line.frequency * 0.25, 3) : 0.8
+                        return (
+                            <Line
+                                key={`l-${i}`}
+                                from={[line.first.longitude, line.first.latitude]}
+                                to={[line.second.longitude, line.second.latitude]}
+                                stroke={COLORS.line}
+                                strokeOpacity={0.55}
+                                strokeWidth={w * sf}
+                                strokeLinecap="round"
+                            />
+                        )
+                    })}
+
+                    {markers.map((marker, i) => {
+                        const r = (freqMarker ? Math.min(2.5 + marker.frequency * 0.4, 6) : 3) * sf
+                        return (
+                            <Marker key={`m-${i}`} coordinates={[marker.longitude, marker.latitude]}>
+                                <circle
+                                    r={r}
+                                    fill={COLORS.marker}
+                                    fillOpacity={0.55}
+                                    stroke={COLORS.markerStroke}
+                                    strokeOpacity={0.7}
+                                    strokeWidth={0.4 * sf}
+                                />
+                            </Marker>
+                        )
+                    })}
+                </ZoomableGroup>
+            </ComposableMap>
+        </div>
+    )
+}
+
+interface SingleFlightMapProps {
+    flightId: number
+    distance: number
+    className?: string
+}
+
+export function SingleFlightMap({ flightId, distance, className }: SingleFlightMapProps) {
+    const { data: decor } = useDecorations(flightId)
+    const { data: world } = useWorldGeography(false)
+    const lines = decor?.lines ?? []
+    const markers = decor?.markers ?? []
+
+    if (lines.length === 0 || markers.length < 2) return null
+
+    // spherical midpoint
+    const toRad = (d: number) => (d * Math.PI) / 180
+    const toDeg = (r: number) => (r * 180) / Math.PI
+    const p1 = markers[0]
+    const p2 = markers[1]
+    const lat1 = toRad(p1.latitude)
+    const lon1 = toRad(p1.longitude)
+    const lat2 = toRad(p2.latitude)
+    const lon2 = toRad(p2.longitude)
+    const x = (Math.cos(lat1) * Math.cos(lon1) + Math.cos(lat2) * Math.cos(lon2)) / 2
+    const y = (Math.cos(lat1) * Math.sin(lon1) + Math.cos(lat2) * Math.sin(lon2)) / 2
+    const z = (Math.sin(lat1) + Math.sin(lat2)) / 2
+    const cLon = toDeg(Math.atan2(y, x))
+    const cLat = toDeg(Math.atan2(z, Math.sqrt(x * x + y * y)))
+    const scale = Math.min(20000 / Math.max(distance, 1), 10) * 160
+
+    return (
+        <div className={className}>
+            <ComposableMap
+                width={MAP_W}
+                height={MAP_H}
+                projectionConfig={{ scale, rotate: [-cLon, -cLat, 0] }}
+                style={{ width: '100%', height: 'auto', display: 'block' }}
+            >
+                {world && (
+                    <Geographies geography={world as any}>
+                        {({ geographies }) =>
+                            geographies.map((geo: any) => (
+                                <Geography
+                                    key={geo.rsmKey}
+                                    geography={geo}
+                                    stroke={COLORS.landStroke}
+                                    strokeWidth={0.3}
+                                    fill={COLORS.land}
+                                    style={{
+                                        default: { outline: 'none' },
+                                        hover: { outline: 'none', fill: COLORS.land },
+                                        pressed: { outline: 'none' },
+                                    }}
+                                />
+                            ))
+                        }
+                    </Geographies>
+                )}
+                {lines.map((line, i) => (
+                    <Line
+                        key={`l-${i}`}
+                        from={[line.first.longitude, line.first.latitude]}
+                        to={[line.second.longitude, line.second.latitude]}
+                        stroke={COLORS.line}
+                        strokeWidth={0.6}
+                        strokeLinecap="round"
+                    />
+                ))}
+                {markers.map((m, i) => (
+                    <Marker key={`m-${i}`} coordinates={[m.longitude, m.latitude]}>
+                        <circle
+                            r={3}
+                            fill={COLORS.marker}
+                            fillOpacity={0.7}
+                            stroke={COLORS.markerStroke}
+                            strokeOpacity={0.8}
+                            strokeWidth={0.4}
+                        />
+                    </Marker>
+                ))}
+            </ComposableMap>
+        </div>
+    )
+}
diff --git a/client/components/settings/ColumnsManager.tsx b/client/components/settings/ColumnsManager.tsx
new file mode 100644
index 0000000..49ecb31
--- /dev/null
+++ b/client/components/settings/ColumnsManager.tsx
@@ -0,0 +1,191 @@
+import { useEffect, useState } from 'react'
+import {
+    DndContext,
+    closestCenter,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+    type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+    SortableContext,
+    arrayMove,
+    sortableKeyboardCoordinates,
+    useSortable,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical, Eye, EyeOff, Lock, RotateCcw } from 'lucide-react'
+
+import {
+    loadColumnPrefs,
+    saveColumnPrefs,
+    resetColumnPrefs,
+    type ColumnPref,
+} from '@/storage/columnsStorage'
+import { COLUMN_INDEX, REQUIRED_COLUMN_IDS } from '@/lib/flightColumns'
+import { Switch } from '@/components/ui/Switch'
+import { Button } from '@/components/ui/Button'
+import { cn } from '@/lib/cn'
+
+function emitChanged() {
+    window.dispatchEvent(new Event('jetlog:columns-changed'))
+}
+
+export function ColumnsManager() {
+    const [prefs, setPrefs] = useState<ColumnPref[]>(() => loadColumnPrefs())
+
+    const update = (next: ColumnPref[]) => {
+        setPrefs(next)
+        saveColumnPrefs(next)
+        emitChanged()
+    }
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+        useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+    )
+
+    const handleDragEnd = (e: DragEndEvent) => {
+        const { active, over } = e
+        if (!over || active.id === over.id) return
+        const oldIndex = prefs.findIndex((p) => p.id === active.id)
+        const newIndex = prefs.findIndex((p) => p.id === over.id)
+        if (oldIndex === -1 || newIndex === -1) return
+        update(arrayMove(prefs, oldIndex, newIndex))
+    }
+
+    const toggleVisibility = (id: string, visible: boolean) => {
+        if (REQUIRED_COLUMN_IDS.includes(id)) return
+        update(prefs.map((p) => (p.id === id ? { ...p, visible } : p)))
+    }
+
+    const resetAll = () => {
+        const fresh = resetColumnPrefs()
+        setPrefs(fresh)
+        emitChanged()
+    }
+
+    useEffect(() => {
+        // Keep in sync if changed in another tab.
+        const onStorage = (e: StorageEvent) => {
+            if (e.key && e.key.startsWith('flights.columns')) {
+                setPrefs(loadColumnPrefs())
+            }
+        }
+        window.addEventListener('storage', onStorage)
+        return () => window.removeEventListener('storage', onStorage)
+    }, [])
+
+    const visibleCount = prefs.filter((p) => p.visible).length
+
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center justify-between gap-3 flex-wrap">
+                <div>
+                    <p className="board-label text-ink-muted">
+                        {visibleCount} of {prefs.length} columns visible
+                    </p>
+                    <p className="text-xs text-ink-muted font-mono mt-0.5">
+                        Drag rows to reorder · toggle to show/hide · origin and
+                        destination are required.
+                    </p>
+                </div>
+                <Button variant="outline" size="sm" onClick={resetAll}>
+                    <RotateCcw size={13} /> Reset
+                </Button>
+            </div>
+
+            <div className="border border-rule bg-paper">
+                <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragEnd={handleDragEnd}
+                >
+                    <SortableContext
+                        items={prefs.map((p) => p.id)}
+                        strategy={verticalListSortingStrategy}
+                    >
+                        {prefs.map((p) => (
+                            <ColumnRow
+                                key={p.id}
+                                pref={p}
+                                onToggle={(v) => toggleVisibility(p.id, v)}
+                            />
+                        ))}
+                    </SortableContext>
+                </DndContext>
+            </div>
+        </div>
+    )
+}
+
+interface ColumnRowProps {
+    pref: ColumnPref
+    onToggle: (visible: boolean) => void
+}
+
+function ColumnRow({ pref, onToggle }: ColumnRowProps) {
+    const def = COLUMN_INDEX[pref.id]
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+    } = useSortable({ id: pref.id })
+
+    const required = !!def?.required
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={{
+                transform: CSS.Transform.toString(transform),
+                transition,
+            }}
+            className={cn(
+                'flex items-center gap-3 px-3 py-2.5 border-b border-rule last:border-b-0 bg-paper',
+                isDragging && 'opacity-60 z-10 shadow-paper bg-paper-soft',
+            )}
+        >
+            <button
+                type="button"
+                {...attributes}
+                {...listeners}
+                aria-label="Drag to reorder"
+                className="cursor-grab active:cursor-grabbing text-ink-faint hover:text-ink touch-none"
+            >
+                <GripVertical size={16} />
+            </button>
+            <div className="flex-1 min-w-0">
+                <div className="font-mono text-sm text-ink truncate">
+                    {def?.label ?? pref.id}
+                </div>
+                <div className="text-[10px] font-mono uppercase tracking-board text-ink-faint">
+                    {pref.id}
+                </div>
+            </div>
+            {required ? (
+                <span
+                    title="Required column"
+                    className="flex items-center gap-1 board-label text-ink-muted"
+                >
+                    <Lock size={12} /> Required
+                </span>
+            ) : pref.visible ? (
+                <Eye size={14} className="text-ink-muted" />
+            ) : (
+                <EyeOff size={14} className="text-ink-faint" />
+            )}
+            <Switch
+                checked={pref.visible}
+                onCheckedChange={onToggle}
+                disabled={required}
+                aria-label={`Show ${def?.label ?? pref.id}`}
+            />
+        </div>
+    )
+}
diff --git a/client/components/shell/AppShell.tsx b/client/components/shell/AppShell.tsx
new file mode 100644
index 0000000..bdbb0e2
--- /dev/null
+++ b/client/components/shell/AppShell.tsx
@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { Link, Outlet, useLocation } from 'react-router-dom'
+import { Menu } from 'lucide-react'
+import { NavSheet } from './NavSheet'
+import { BoardClock } from './BoardClock'
+
+const TITLES: Record<string, string> = {
+    '/': 'Dashboard',
+    '/flights': 'Flights',
+    '/new': 'New Flight',
+    '/statistics': 'Statistics',
+    '/settings': 'Settings',
+}
+
+function pageTitle(pathname: string) {
+    if (TITLES[pathname]) return TITLES[pathname]
+    const match = Object.keys(TITLES)
+        .filter((p) => p !== '/')
+        .find((p) => pathname.startsWith(p))
+    return match ? TITLES[match] : 'Jetlog'
+}
+
+export function AppShell() {
+    const [menuOpen, setMenuOpen] = useState(false)
+    const location = useLocation()
+
+    return (
+        <div className="min-h-full flex flex-col">
+            <header className="sticky top-0 z-30 bg-paper/95 backdrop-blur border-b border-rule">
+                <div className="h-14 px-4 md:px-6 flex items-center justify-between gap-4">
+                    <div className="flex items-baseline gap-3 min-w-0">
+                        <Link
+                            to="/"
+                            className="font-mono font-bold text-ink tracking-board uppercase text-base shrink-0"
+                        >
+                            Jet<span className="text-accent-deep">log</span>
+                        </Link>
+                        <span className="text-ink-faint shrink-0">/</span>
+                        <span className="board-label truncate">
+                            {pageTitle(location.pathname)}
+                        </span>
+                    </div>
+
+                    <div className="flex items-center gap-4">
+                        <BoardClock />
+                        <button
+                            onClick={() => setMenuOpen(true)}
+                            aria-label="Open menu"
+                            className="p-1.5 -mr-1.5 text-ink hover:text-accent-deep"
+                        >
+                            <Menu size={22} strokeWidth={1.75} />
+                        </button>
+                    </div>
+                </div>
+            </header>
+
+            <main className="flex-1 min-h-0">
+                <Outlet />
+            </main>
+
+            <NavSheet open={menuOpen} onClose={() => setMenuOpen(false)} />
+        </div>
+    )
+}
diff --git a/client/components/shell/BoardClock.tsx b/client/components/shell/BoardClock.tsx
new file mode 100644
index 0000000..2f0bf93
--- /dev/null
+++ b/client/components/shell/BoardClock.tsx
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+
+export function BoardClock() {
+    const [now, setNow] = useState(() => new Date())
+
+    useEffect(() => {
+        const t = window.setInterval(() => setNow(new Date()), 1000)
+        return () => window.clearInterval(t)
+    }, [])
+
+    const hh = String(now.getUTCHours()).padStart(2, '0')
+    const mm = String(now.getUTCMinutes()).padStart(2, '0')
+    const ss = String(now.getUTCSeconds()).padStart(2, '0')
+
+    return (
+        <div className="hidden md:flex items-baseline gap-2">
+            <span className="board-label">UTC</span>
+            <span className="board-value text-sm tracking-board">
+                {hh}:{mm}
+                <span className="text-ink-faint">:{ss}</span>
+            </span>
+        </div>
+    )
+}
diff --git a/client/components/shell/NavSheet.tsx b/client/components/shell/NavSheet.tsx
new file mode 100644
index 0000000..5500d15
--- /dev/null
+++ b/client/components/shell/NavSheet.tsx
@@ -0,0 +1,132 @@
+import { useEffect } from 'react'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { useQueryClient } from '@tanstack/react-query'
+import { Home, PlaneTakeoff, Plus, BarChart3, Settings as Cog, LogOut, X, UserRound } from 'lucide-react'
+import { cn } from '@/lib/cn'
+import TokenStorage from '@/storage/tokenStorage'
+import { useCurrentUser } from '@/lib/queries'
+
+interface NavSheetProps {
+    open: boolean
+    onClose: () => void
+}
+
+const NAV_ITEMS = [
+    { to: '/', label: 'Home', icon: Home },
+    { to: '/flights', label: 'Flights', icon: PlaneTakeoff },
+    { to: '/new', label: 'New Flight', icon: Plus },
+    { to: '/statistics', label: 'Statistics', icon: BarChart3 },
+    { to: '/settings', label: 'Settings', icon: Cog },
+]
+
+export function NavSheet({ open, onClose }: NavSheetProps) {
+    const location = useLocation()
+    const navigate = useNavigate()
+    const qc = useQueryClient()
+    const { data: me } = useCurrentUser()
+
+    useEffect(() => {
+        if (!open) return
+        const onKey = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') onClose()
+        }
+        window.addEventListener('keydown', onKey)
+        document.body.style.overflow = 'hidden'
+        return () => {
+            window.removeEventListener('keydown', onKey)
+            document.body.style.overflow = ''
+        }
+    }, [open, onClose])
+
+    const handleLogout = () => {
+        TokenStorage.clearToken()
+        qc.clear()
+        onClose()
+        navigate('/login')
+    }
+
+    if (!open) return null
+
+    return (
+        <div className="fixed inset-0 z-50">
+            <div
+                className="absolute inset-0 bg-ink/30 animate-fade-in"
+                onClick={onClose}
+                aria-hidden
+            />
+            <aside
+                role="dialog"
+                aria-label="Navigation"
+                className="absolute right-0 top-0 h-full w-[86%] max-w-[360px] bg-paper border-l border-rule shadow-paper animate-slide-in-right flex flex-col"
+            >
+                <div className="flex items-center justify-between px-5 h-14 border-b border-rule">
+                    <span className="board-label">Menu</span>
+                    <button
+                        onClick={onClose}
+                        aria-label="Close menu"
+                        className="p-1 -mr-1 hover:text-accent-deep"
+                    >
+                        <X size={20} />
+                    </button>
+                </div>
+
+                <nav className="flex-1 overflow-y-auto py-2">
+                    {NAV_ITEMS.map(({ to, label, icon: Icon }) => {
+                        const active =
+                            to === '/'
+                                ? location.pathname === '/'
+                                : location.pathname.startsWith(to)
+                        return (
+                            <Link
+                                key={to}
+                                to={to}
+                                onClick={onClose}
+                                className={cn(
+                                    'flex items-center gap-3 px-5 py-3.5 border-l-2 transition-colors',
+                                    active
+                                        ? 'border-accent bg-accent-soft/40 text-ink'
+                                        : 'border-transparent text-ink-soft hover:bg-paper-soft',
+                                )}
+                            >
+                                <Icon size={18} strokeWidth={1.75} />
+                                <span className="font-mono uppercase tracking-board text-sm">
+                                    {label}
+                                </span>
+                            </Link>
+                        )
+                    })}
+                </nav>
+
+                <div className="border-t border-rule p-3 space-y-1">
+                    {me && (
+                        <div className="flex items-center gap-3 px-2 py-2 min-w-0">
+                            <div className="h-7 w-7 border border-ink bg-accent flex items-center justify-center shrink-0">
+                                <UserRound size={14} strokeWidth={2} />
+                            </div>
+                            <div className="min-w-0">
+                                <div className="board-label text-ink-muted leading-none">
+                                    Signed in as
+                                </div>
+                                <div className="font-mono text-sm text-ink truncate">
+                                    {me.username}
+                                    {me.isAdmin && (
+                                        <span className="ml-2 text-[10px] uppercase tracking-board text-accent-deep">
+                                            admin
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    <button
+                        onClick={handleLogout}
+                        className="w-full flex items-center gap-3 px-2 py-2.5 text-ink-soft hover:text-danger transition-colors"
+                    >
+                        <LogOut size={18} strokeWidth={1.75} />
+                        <span className="font-mono uppercase tracking-board text-sm">Logout</span>
+                    </button>
+                </div>
+            </aside>
+        </div>
+    )
+}
diff --git a/client/components/stats/Charts.tsx b/client/components/stats/Charts.tsx
new file mode 100644
index 0000000..ddc45a9
--- /dev/null
+++ b/client/components/stats/Charts.tsx
@@ -0,0 +1,268 @@
+import {
+    Bar,
+    BarChart,
+    CartesianGrid,
+    Cell,
+    Line,
+    LineChart,
+    Pie,
+    PieChart,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis,
+} from 'recharts'
+
+import { Panel, PanelHeader, PanelTitle, PanelBody } from '@/components/ui/Panel'
+
+const INK = '#14130F'
+const RULE = '#D9D2BC'
+const ACCENT = '#F5C518'
+const PIE_COLORS = ['#F5C518', '#14130F', '#76725F', '#C99A00', '#FBE680', '#A8A48F']
+
+const tooltipStyle = {
+    background: '#FAF7F0',
+    border: '1px solid #14130F',
+    borderRadius: 0,
+    fontFamily: 'JetBrains Mono, monospace',
+    fontSize: 11,
+    padding: '6px 8px',
+}
+const labelStyle = { color: INK, fontWeight: 600, textTransform: 'uppercase' as const }
+const itemStyle = { color: INK }
+
+interface FrequencyChartProps {
+    title: string
+    data: Record<string, number> | undefined
+    label?: string
+}
+
+export function FrequencyBarChart({ title, data, label = 'count' }: FrequencyChartProps) {
+    const entries = Object.entries(data ?? {})
+        .map(([name, value]) => ({ name, value }))
+        .slice(0, 8)
+
+    return (
+        <Panel>
+            <PanelHeader>
+                <PanelTitle>{title}</PanelTitle>
+            </PanelHeader>
+            <PanelBody className="pt-2">
+                {entries.length === 0 ? (
+                    <p className="text-center text-ink-muted text-sm py-8 font-mono">
+                        No data
+                    </p>
+                ) : (
+                    <ResponsiveContainer width="100%" height={Math.max(220, entries.length * 32)}>
+                        <BarChart
+                            data={entries}
+                            layout="vertical"
+                            margin={{ top: 0, right: 16, left: 0, bottom: 0 }}
+                        >
+                            <CartesianGrid stroke={RULE} horizontal={false} />
+                            <XAxis
+                                type="number"
+                                stroke={INK}
+                                tick={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fill: INK }}
+                                tickLine={false}
+                                axisLine={{ stroke: RULE }}
+                            />
+                            <YAxis
+                                type="category"
+                                dataKey="name"
+                                stroke={INK}
+                                width={140}
+                                tick={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, fill: INK }}
+                                tickLine={false}
+                                axisLine={{ stroke: RULE }}
+                            />
+                            <Tooltip
+                                cursor={{ fill: 'rgba(245,197,24,0.1)' }}
+                                contentStyle={tooltipStyle}
+                                labelStyle={labelStyle}
+                                itemStyle={itemStyle}
+                                separator=""
+                                formatter={(v: number) => [`${v} ${label}`, '']}
+                            />
+                            <Bar dataKey="value" fill={ACCENT} stroke={INK} strokeWidth={1} />
+                        </BarChart>
+                    </ResponsiveContainer>
+                )}
+            </PanelBody>
+        </Panel>
+    )
+}
+
+export function FrequencyDonut({ title, data }: FrequencyChartProps) {
+    const entries = Object.entries(data ?? {}).map(([name, value]) => ({ name, value }))
+    const total = entries.reduce((sum, e) => sum + e.value, 0)
+
+    return (
+        <Panel>
+            <PanelHeader>
+                <PanelTitle>{title}</PanelTitle>
+            </PanelHeader>
+            <PanelBody>
+                {entries.length === 0 ? (
+                    <p className="text-center text-ink-muted text-sm py-8 font-mono">
+                        No data
+                    </p>
+                ) : (
+                    <div className="flex items-center gap-6">
+                        <ResponsiveContainer width="50%" height={180}>
+                            <PieChart>
+                                <Pie
+                                    data={entries}
+                                    dataKey="value"
+                                    nameKey="name"
+                                    innerRadius={40}
+                                    outerRadius={75}
+                                    stroke={INK}
+                                    strokeWidth={1}
+                                    paddingAngle={1}
+                                >
+                                    {entries.map((_, i) => (
+                                        <Cell key={i} fill={PIE_COLORS[i % PIE_COLORS.length]} />
+                                    ))}
+                                </Pie>
+                                <Tooltip
+                                    contentStyle={tooltipStyle}
+                                    labelStyle={labelStyle}
+                                itemStyle={itemStyle}
+                                    separator=" — "
+                                    formatter={(v: number, n: string) => [
+                                        `${v} (${Math.round((v / total) * 100)}%)`,
+                                        n,
+                                    ]}
+                                />
+                            </PieChart>
+                        </ResponsiveContainer>
+                        <ul className="flex-1 space-y-1.5 min-w-0">
+                            {entries.map((e, i) => (
+                                <li key={e.name} className="flex items-center gap-2 text-xs font-mono">
+                                    <span
+                                        className="inline-block h-2.5 w-2.5 border border-ink shrink-0"
+                                        style={{ background: PIE_COLORS[i % PIE_COLORS.length] }}
+                                    />
+                                    <span className="capitalize truncate flex-1">{e.name}</span>
+                                    <span className="text-ink-muted tabular-nums">
+                                        {Math.round((e.value / total) * 100)}%
+                                    </span>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+            </PanelBody>
+        </Panel>
+    )
+}
+
+interface TimelinePoint {
+    label: string
+    flights: number
+    cumulative: number
+}
+interface TimelineChartProps {
+    title: string
+    data: TimelinePoint[]
+    metric: boolean
+}
+
+export function FlightsPerMonthChart({ title, data }: { title: string; data: TimelinePoint[] }) {
+    return (
+        <Panel>
+            <PanelHeader>
+                <PanelTitle>{title}</PanelTitle>
+            </PanelHeader>
+            <PanelBody>
+                {data.length === 0 ? (
+                    <p className="text-center text-ink-muted text-sm py-8 font-mono">No data</p>
+                ) : (
+                    <ResponsiveContainer width="100%" height={240}>
+                        <BarChart data={data} margin={{ top: 8, right: 12, left: -16, bottom: 0 }}>
+                            <CartesianGrid stroke={RULE} vertical={false} />
+                            <XAxis
+                                dataKey="label"
+                                stroke={INK}
+                                tick={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fill: INK }}
+                                tickLine={false}
+                                axisLine={{ stroke: RULE }}
+                            />
+                            <YAxis
+                                stroke={INK}
+                                allowDecimals={false}
+                                tick={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fill: INK }}
+                                tickLine={false}
+                                axisLine={{ stroke: RULE }}
+                            />
+                            <Tooltip
+                                cursor={{ fill: 'rgba(245,197,24,0.12)' }}
+                                contentStyle={tooltipStyle}
+                                labelStyle={labelStyle}
+                                itemStyle={itemStyle}
+                                separator=""
+                                formatter={(v: number) => [`${v} flights`, '']}
+                            />
+                            <Bar dataKey="flights" fill={ACCENT} stroke={INK} strokeWidth={1} />
+                        </BarChart>
+                    </ResponsiveContainer>
+                )}
+            </PanelBody>
+        </Panel>
+    )
+}
+
+export function CumulativeDistanceChart({ title, data, metric }: TimelineChartProps) {
+    return (
+        <Panel>
+            <PanelHeader>
+                <PanelTitle>{title}</PanelTitle>
+                <span className="board-label text-ink-muted">{metric ? 'km' : 'mi'}</span>
+            </PanelHeader>
+            <PanelBody>
+                {data.length === 0 ? (
+                    <p className="text-center text-ink-muted text-sm py-8 font-mono">No data</p>
+                ) : (
+                    <ResponsiveContainer width="100%" height={240}>
+                        <LineChart data={data} margin={{ top: 8, right: 12, left: -8, bottom: 0 }}>
+                            <CartesianGrid stroke={RULE} vertical={false} />
+                            <XAxis
+                                dataKey="label"
+                                stroke={INK}
+                                tick={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fill: INK }}
+                                tickLine={false}
+                                axisLine={{ stroke: RULE }}
+                            />
+                            <YAxis
+                                stroke={INK}
+                                tick={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fill: INK }}
+                                tickLine={false}
+                                axisLine={{ stroke: RULE }}
+                                tickFormatter={(v: number) =>
+                                    v >= 1000 ? `${Math.round(v / 1000)}k` : String(v)
+                                }
+                            />
+                            <Tooltip
+                                cursor={{ stroke: ACCENT }}
+                                contentStyle={tooltipStyle}
+                                labelStyle={labelStyle}
+                                itemStyle={itemStyle}
+                                separator=""
+                                formatter={(v: number) => [`${v.toLocaleString()} ${metric ? 'km' : 'mi'}`, '']}
+                            />
+                            <Line
+                                type="monotone"
+                                dataKey="cumulative"
+                                stroke={INK}
+                                strokeWidth={2}
+                                dot={{ fill: ACCENT, stroke: INK, r: 3 }}
+                                activeDot={{ r: 5, fill: ACCENT, stroke: INK }}
+                            />
+                        </LineChart>
+                    </ResponsiveContainer>
+                )}
+            </PanelBody>
+        </Panel>
+    )
+}
diff --git a/client/components/ui/Badge.tsx b/client/components/ui/Badge.tsx
new file mode 100644
index 0000000..5173696
--- /dev/null
+++ b/client/components/ui/Badge.tsx
@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/cn'
+
+const badge = cva(
+    'inline-flex items-center gap-1.5 px-2 py-0.5 font-mono uppercase tracking-board text-[10px] border',
+    {
+        variants: {
+            variant: {
+                default: 'bg-paper border-rule text-ink-soft',
+                accent: 'bg-accent-soft border-accent-deep text-ink',
+                ok: 'bg-paper border-ok text-ok',
+                danger: 'bg-paper border-danger text-danger',
+                muted: 'bg-paper-soft border-rule text-ink-muted',
+            },
+        },
+        defaultVariants: { variant: 'default' },
+    },
+)
+
+export interface BadgeProps
+    extends HTMLAttributes<HTMLSpanElement>,
+        VariantProps<typeof badge> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+    return <span className={cn(badge({ variant }), className)} {...props} />
+}
diff --git a/client/components/ui/Button.tsx b/client/components/ui/Button.tsx
new file mode 100644
index 0000000..476a014
--- /dev/null
+++ b/client/components/ui/Button.tsx
@@ -0,0 +1,47 @@
+import { forwardRef, type ButtonHTMLAttributes } from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/cn'
+
+const button = cva(
+    'inline-flex items-center justify-center gap-2 font-mono uppercase tracking-board text-[12px] border transition-colors select-none disabled:opacity-40 disabled:pointer-events-none whitespace-nowrap',
+    {
+        variants: {
+            variant: {
+                default:
+                    'bg-paper text-ink border-ink hover:bg-ink hover:text-paper',
+                accent:
+                    'bg-accent text-ink border-accent-deep hover:bg-accent-deep hover:text-paper',
+                ghost:
+                    'bg-transparent text-ink border-transparent hover:bg-paper-soft',
+                danger:
+                    'bg-paper text-danger border-danger hover:bg-danger hover:text-paper',
+                outline:
+                    'bg-transparent text-ink border-rule hover:border-ink hover:bg-paper-soft',
+            },
+            size: {
+                sm: 'h-7 px-2.5',
+                md: 'h-9 px-3.5',
+                lg: 'h-11 px-5 text-[13px]',
+                icon: 'h-9 w-9',
+            },
+        },
+        defaultVariants: { variant: 'default', size: 'md' },
+    },
+)
+
+export interface ButtonProps
+    extends ButtonHTMLAttributes<HTMLButtonElement>,
+        VariantProps<typeof button> {
+    asChild?: boolean
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild, ...props }, ref) => {
+        const Comp = asChild ? Slot : 'button'
+        return (
+            <Comp ref={ref} className={cn(button({ variant, size }), className)} {...props} />
+        )
+    },
+)
+Button.displayName = 'Button'
diff --git a/client/components/ui/Combobox.tsx b/client/components/ui/Combobox.tsx
new file mode 100644
index 0000000..10e8a27
--- /dev/null
+++ b/client/components/ui/Combobox.tsx
@@ -0,0 +1,130 @@
+import { useEffect, useRef, useState } from 'react'
+import * as Popover from '@radix-ui/react-popover'
+import { ChevronDown, Search } from 'lucide-react'
+import { cn } from '@/lib/cn'
+
+export interface ComboboxOption<T = unknown> {
+    value: string
+    label: string
+    sub?: string
+    raw?: T
+}
+
+interface ComboboxProps<T> {
+    value?: string
+    placeholder?: string
+    onSearch: (query: string) => Promise<ComboboxOption<T>[]>
+    onSelect: (option: ComboboxOption<T>) => void
+    displayValue?: string
+    disabled?: boolean
+    minChars?: number
+    className?: string
+}
+
+export function Combobox<T>({
+    placeholder = 'Search...',
+    onSearch,
+    onSelect,
+    displayValue,
+    disabled,
+    minChars = 2,
+    className,
+}: ComboboxProps<T>) {
+    const [open, setOpen] = useState(false)
+    const [query, setQuery] = useState('')
+    const [options, setOptions] = useState<ComboboxOption<T>[]>([])
+    const [loading, setLoading] = useState(false)
+    const debounceRef = useRef<number | null>(null)
+
+    useEffect(() => {
+        if (debounceRef.current) window.clearTimeout(debounceRef.current)
+        if (query.length < minChars) {
+            setOptions([])
+            return
+        }
+        setLoading(true)
+        debounceRef.current = window.setTimeout(async () => {
+            try {
+                const results = await onSearch(query)
+                setOptions(results)
+            } finally {
+                setLoading(false)
+            }
+        }, 200)
+        return () => {
+            if (debounceRef.current) window.clearTimeout(debounceRef.current)
+        }
+    }, [query, minChars, onSearch])
+
+    return (
+        <Popover.Root open={open} onOpenChange={setOpen}>
+            <Popover.Trigger asChild>
+                <button
+                    type="button"
+                    disabled={disabled}
+                    className={cn(
+                        'h-10 w-full px-3 bg-paper border border-rule flex items-center justify-between gap-2 font-mono text-sm text-left',
+                        'hover:border-ink focus:border-ink focus:outline-none',
+                        'disabled:opacity-50',
+                        className,
+                    )}
+                >
+                    <span className={cn(displayValue ? 'text-ink truncate' : 'text-ink-faint')}>
+                        {displayValue || placeholder}
+                    </span>
+                    <ChevronDown size={14} className="text-ink-muted shrink-0" />
+                </button>
+            </Popover.Trigger>
+            <Popover.Portal>
+                <Popover.Content
+                    align="start"
+                    sideOffset={4}
+                    className="z-50 w-[var(--radix-popover-trigger-width)] bg-paper border border-ink shadow-paper animate-fade-in"
+                >
+                    <div className="flex items-center gap-2 border-b border-rule px-3 h-10">
+                        <Search size={14} className="text-ink-muted" />
+                        <input
+                            autoFocus
+                            value={query}
+                            onChange={(e) => setQuery(e.target.value)}
+                            placeholder={placeholder}
+                            className="flex-1 bg-transparent font-mono text-sm focus:outline-none"
+                        />
+                    </div>
+                    <div className="max-h-64 overflow-y-auto">
+                        {query.length < minChars && (
+                            <p className="px-3 py-3 text-xs text-ink-muted">
+                                Type at least {minChars} characters
+                            </p>
+                        )}
+                        {loading && (
+                            <p className="px-3 py-3 text-xs text-ink-muted">Searching...</p>
+                        )}
+                        {!loading && query.length >= minChars && options.length === 0 && (
+                            <p className="px-3 py-3 text-xs text-ink-muted">No results</p>
+                        )}
+                        {options.map((opt) => (
+                            <button
+                                key={opt.value}
+                                type="button"
+                                onClick={() => {
+                                    onSelect(opt)
+                                    setOpen(false)
+                                    setQuery('')
+                                }}
+                                className="w-full text-left px-3 py-2 hover:bg-accent-soft/40 border-b border-rule last:border-b-0"
+                            >
+                                <div className="font-mono text-sm text-ink">{opt.label}</div>
+                                {opt.sub && (
+                                    <div className="font-mono text-[11px] text-ink-muted truncate">
+                                        {opt.sub}
+                                    </div>
+                                )}
+                            </button>
+                        ))}
+                    </div>
+                </Popover.Content>
+            </Popover.Portal>
+        </Popover.Root>
+    )
+}
diff --git a/client/components/ui/DataBlock.tsx b/client/components/ui/DataBlock.tsx
new file mode 100644
index 0000000..a48663a
--- /dev/null
+++ b/client/components/ui/DataBlock.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/cn'
+
+interface DataBlockProps {
+    label: string
+    value: ReactNode
+    sub?: ReactNode
+    className?: string
+    valueClassName?: string
+}
+
+export function DataBlock({ label, value, sub, className, valueClassName }: DataBlockProps) {
+    return (
+        <div className={cn('flex flex-col', className)}>
+            <span className="board-label">{label}</span>
+            <span className={cn('font-mono tabular-nums text-ink leading-tight mt-1', valueClassName)}>
+                {value}
+            </span>
+            {sub && <span className="font-mono text-[11px] text-ink-muted mt-0.5">{sub}</span>}
+        </div>
+    )
+}
diff --git a/client/components/ui/Dialog.tsx b/client/components/ui/Dialog.tsx
new file mode 100644
index 0000000..ff72b1c
--- /dev/null
+++ b/client/components/ui/Dialog.tsx
@@ -0,0 +1,48 @@
+import * as RDialog from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/cn'
+
+interface DialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    title?: string
+    description?: string
+    children: ReactNode
+    className?: string
+}
+
+export function Dialog({ open, onOpenChange, title, description, children, className }: DialogProps) {
+    return (
+        <RDialog.Root open={open} onOpenChange={onOpenChange}>
+            <RDialog.Portal>
+                <RDialog.Overlay className="fixed inset-0 z-50 bg-ink/30 animate-fade-in" />
+                <RDialog.Content
+                    className={cn(
+                        'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
+                        'w-[92vw] max-w-md max-h-[90vh] overflow-y-auto',
+                        'bg-paper border border-ink shadow-paper',
+                        'animate-fade-in',
+                        className,
+                    )}
+                >
+                    <div className="flex items-center justify-between gap-4 px-4 h-11 border-b border-rule">
+                        <RDialog.Title className="board-label text-ink">{title}</RDialog.Title>
+                        <RDialog.Close
+                            aria-label="Close"
+                            className="p-1 -mr-1 hover:text-accent-deep"
+                        >
+                            <X size={18} />
+                        </RDialog.Close>
+                    </div>
+                    {description && (
+                        <RDialog.Description className="px-4 pt-3 text-sm text-ink-muted">
+                            {description}
+                        </RDialog.Description>
+                    )}
+                    <div className="p-4">{children}</div>
+                </RDialog.Content>
+            </RDialog.Portal>
+        </RDialog.Root>
+    )
+}
diff --git a/client/components/ui/Input.tsx b/client/components/ui/Input.tsx
new file mode 100644
index 0000000..e697261
--- /dev/null
+++ b/client/components/ui/Input.tsx
@@ -0,0 +1,35 @@
+import { forwardRef, type InputHTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+    ({ className, type, ...props }, ref) => {
+        const isFile = type === 'file'
+        return (
+            <input
+                ref={ref}
+                type={type}
+                className={cn(
+                    'h-10 w-full bg-paper border border-rule font-mono text-sm text-ink',
+                    'placeholder:text-ink-faint',
+                    'focus:border-ink focus:outline-none',
+                    'disabled:opacity-50 disabled:bg-paper-soft',
+                    'tabular-nums',
+                    isFile
+                        ? [
+                              'pl-0 pr-3 cursor-pointer text-ink-soft',
+                              'file:h-full file:mr-3 file:px-3',
+                              'file:border-0 file:border-r file:border-rule',
+                              'file:bg-paper-soft file:text-ink',
+                              'file:font-mono file:uppercase file:tracking-board file:text-[11px]',
+                              'hover:file:bg-accent-soft',
+                              'file:cursor-pointer',
+                          ]
+                        : 'px-3',
+                    className,
+                )}
+                {...props}
+            />
+        )
+    },
+)
+Input.displayName = 'Input'
diff --git a/client/components/ui/Label.tsx b/client/components/ui/Label.tsx
new file mode 100644
index 0000000..9ccf4dc
--- /dev/null
+++ b/client/components/ui/Label.tsx
@@ -0,0 +1,21 @@
+import type { LabelHTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean
+}
+
+export function Label({ className, required, children, ...props }: LabelProps) {
+    return (
+        <label
+            className={cn(
+                'block board-label mb-1.5 select-none',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            {required && <span className="text-danger ml-1">*</span>}
+        </label>
+    )
+}
diff --git a/client/components/ui/Panel.tsx b/client/components/ui/Panel.tsx
new file mode 100644
index 0000000..fd7859a
--- /dev/null
+++ b/client/components/ui/Panel.tsx
@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+export function Panel({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn(
+                'bg-paper border border-rule',
+                className,
+            )}
+            {...props}
+        />
+    )
+}
+
+export function PanelHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn(
+                'flex items-center justify-between gap-4 px-4 h-11 border-b border-rule',
+                className,
+            )}
+            {...props}
+        />
+    )
+}
+
+export function PanelTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+    return (
+        <h2
+            className={cn('board-label text-ink', className)}
+            {...props}
+        />
+    )
+}
+
+export function PanelBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+    return <div className={cn('p-4', className)} {...props} />
+}
diff --git a/client/components/ui/Select.tsx b/client/components/ui/Select.tsx
new file mode 100644
index 0000000..87a9680
--- /dev/null
+++ b/client/components/ui/Select.tsx
@@ -0,0 +1,27 @@
+import { forwardRef, type SelectHTMLAttributes } from 'react'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/cn'
+
+export const Select = forwardRef<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>(
+    ({ className, children, ...props }, ref) => (
+        <div className="relative">
+            <select
+                ref={ref}
+                className={cn(
+                    'h-10 w-full appearance-none bg-paper border border-rule px-3 pr-8 font-mono text-sm text-ink',
+                    'focus:border-ink focus:outline-none',
+                    'disabled:opacity-50',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+            </select>
+            <ChevronDown
+                size={14}
+                className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-ink-muted"
+            />
+        </div>
+    ),
+)
+Select.displayName = 'Select'
diff --git a/client/components/ui/Sheet.tsx b/client/components/ui/Sheet.tsx
new file mode 100644
index 0000000..a53551a
--- /dev/null
+++ b/client/components/ui/Sheet.tsx
@@ -0,0 +1,43 @@
+import * as RDialog from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/cn'
+
+interface SheetProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    title?: string
+    side?: 'right' | 'bottom'
+    children: ReactNode
+    className?: string
+}
+
+export function Sheet({ open, onOpenChange, title, side = 'right', children, className }: SheetProps) {
+    const sideClasses =
+        side === 'right'
+            ? 'right-0 top-0 h-full w-[92%] max-w-md border-l animate-slide-in-right'
+            : 'left-0 right-0 bottom-0 max-h-[85vh] border-t animate-fade-in'
+
+    return (
+        <RDialog.Root open={open} onOpenChange={onOpenChange}>
+            <RDialog.Portal>
+                <RDialog.Overlay className="fixed inset-0 z-50 bg-ink/30 animate-fade-in" />
+                <RDialog.Content
+                    className={cn(
+                        'fixed z-50 bg-paper border-rule shadow-paper flex flex-col',
+                        sideClasses,
+                        className,
+                    )}
+                >
+                    <div className="flex items-center justify-between gap-4 px-4 h-12 border-b border-rule shrink-0">
+                        <RDialog.Title className="board-label text-ink">{title}</RDialog.Title>
+                        <RDialog.Close aria-label="Close" className="p-1 -mr-1 hover:text-accent-deep">
+                            <X size={18} />
+                        </RDialog.Close>
+                    </div>
+                    <div className="flex-1 overflow-y-auto p-4">{children}</div>
+                </RDialog.Content>
+            </RDialog.Portal>
+        </RDialog.Root>
+    )
+}
diff --git a/client/components/ui/Spinner.tsx b/client/components/ui/Spinner.tsx
new file mode 100644
index 0000000..77d9c7a
--- /dev/null
+++ b/client/components/ui/Spinner.tsx
@@ -0,0 +1,14 @@
+import { cn } from '@/lib/cn'
+
+export function Spinner({ className }: { className?: string }) {
+    return (
+        <span
+            className={cn(
+                'inline-block h-4 w-4 border-2 border-ink-faint border-t-ink animate-spin',
+                className,
+            )}
+            role="status"
+            aria-label="Loading"
+        />
+    )
+}
diff --git a/client/components/ui/SplitFlap.tsx b/client/components/ui/SplitFlap.tsx
new file mode 100644
index 0000000..3c43a9b
--- /dev/null
+++ b/client/components/ui/SplitFlap.tsx
@@ -0,0 +1,45 @@
+import { useEffect, useState, type CSSProperties } from 'react'
+import { cn } from '@/lib/cn'
+
+interface SplitFlapProps {
+    value: string | number
+    className?: string
+    delay?: number
+}
+
+/**
+ * One-shot split-flap reveal on mount. Each character flaps in with a staggered delay.
+ * Falls back gracefully if prefers-reduced-motion is set.
+ */
+export function SplitFlap({ value, className, delay = 0 }: SplitFlapProps) {
+    const chars = String(value).split('')
+    const [reduced, setReduced] = useState(false)
+
+    useEffect(() => {
+        const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+        setReduced(mq.matches)
+    }, [])
+
+    return (
+        <span className={cn('inline-flex tabular-nums', className)} aria-label={String(value)}>
+            {chars.map((c, i) => (
+                <span
+                    key={`${i}-${c}`}
+                    style={
+                        reduced
+                            ? undefined
+                            : ({
+                                  animationDelay: `${delay + i * 60}ms`,
+                                  animationFillMode: 'both',
+                                  transformOrigin: 'center bottom',
+                                  display: 'inline-block',
+                              } as CSSProperties)
+                    }
+                    className={reduced ? '' : 'animate-flap-in'}
+                >
+                    {c}
+                </span>
+            ))}
+        </span>
+    )
+}
diff --git a/client/components/ui/Switch.tsx b/client/components/ui/Switch.tsx
new file mode 100644
index 0000000..eeca545
--- /dev/null
+++ b/client/components/ui/Switch.tsx
@@ -0,0 +1,31 @@
+import * as RSwitch from '@radix-ui/react-switch'
+import { cn } from '@/lib/cn'
+
+interface SwitchProps {
+    checked?: boolean
+    defaultChecked?: boolean
+    onCheckedChange?: (checked: boolean) => void
+    disabled?: boolean
+    id?: string
+    'aria-label'?: string
+}
+
+export function Switch(props: SwitchProps) {
+    return (
+        <RSwitch.Root
+            {...props}
+            className={cn(
+                'relative inline-flex items-center h-5 w-9 shrink-0 border border-ink bg-paper-soft transition-colors px-[2px]',
+                'data-[state=checked]:bg-accent data-[state=checked]:border-accent-deep',
+                'disabled:opacity-50 disabled:pointer-events-none',
+            )}
+        >
+            <RSwitch.Thumb
+                className={cn(
+                    'block h-3 w-3 bg-ink transition-transform',
+                    'data-[state=checked]:translate-x-[16px]',
+                )}
+            />
+        </RSwitch.Root>
+    )
+}
diff --git a/client/components/ui/Tabs.tsx b/client/components/ui/Tabs.tsx
new file mode 100644
index 0000000..dbdafb7
--- /dev/null
+++ b/client/components/ui/Tabs.tsx
@@ -0,0 +1,51 @@
+import * as RTabs from '@radix-ui/react-tabs'
+import { forwardRef, type ComponentPropsWithoutRef } from 'react'
+import { cn } from '@/lib/cn'
+
+export const Tabs = RTabs.Root
+
+export const TabsList = forwardRef<
+    HTMLDivElement,
+    ComponentPropsWithoutRef<typeof RTabs.List>
+>(({ className, ...props }, ref) => (
+    <RTabs.List
+        ref={ref}
+        className={cn(
+            'flex items-stretch border-b border-rule -mb-px overflow-x-auto',
+            className,
+        )}
+        {...props}
+    />
+))
+TabsList.displayName = 'TabsList'
+
+export const TabsTrigger = forwardRef<
+    HTMLButtonElement,
+    ComponentPropsWithoutRef<typeof RTabs.Trigger>
+>(({ className, ...props }, ref) => (
+    <RTabs.Trigger
+        ref={ref}
+        className={cn(
+            'px-4 h-10 font-mono uppercase tracking-board text-[11px] text-ink-muted whitespace-nowrap shrink-0',
+            'border-b-2 border-transparent -mb-px',
+            'hover:text-ink',
+            'data-[state=active]:border-accent data-[state=active]:text-ink',
+            'focus-visible:outline-none',
+            className,
+        )}
+        {...props}
+    />
+))
+TabsTrigger.displayName = 'TabsTrigger'
+
+export const TabsContent = forwardRef<
+    HTMLDivElement,
+    ComponentPropsWithoutRef<typeof RTabs.Content>
+>(({ className, ...props }, ref) => (
+    <RTabs.Content
+        ref={ref}
+        className={cn('pt-6 focus-visible:outline-none', className)}
+        {...props}
+    />
+))
+TabsContent.displayName = 'TabsContent'
diff --git a/client/index.html b/client/index.html
index cbf1a41..6485cf5 100644
--- a/client/index.html
+++ b/client/index.html
@@ -2,24 +2,19 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
-        <link rel="icon" href="public/favicon.png">
-        <link rel="stylesheet" href="style.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        <meta name="theme-color" content="#FAF7F0" />
+        <link rel="icon" href="/favicon.png" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+            rel="stylesheet"
+        />
         <title>Jetlog</title>
     </head>
-
     <body>
         <div id="app"></div>
-        <script type="module" src="index.js"></script>
+        <script type="module" src="/main.tsx"></script>
     </body>
-
-    <style>
-        * {
-            transition-duration: 200ms;
-        }
-
-        html, body, #app {
-            height: 100%;
-        }
-    </style>
 </html>
diff --git a/client/index.js b/client/index.js
deleted file mode 100644
index 7d17473..0000000
--- a/client/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import { App } from './App';
-
-import TokenStorage from './storage/tokenStorage';
-TokenStorage.loadStoredToken();
-
-const container = document.getElementById("app");
-const root = createRoot(container);
-root.render(<App />);
diff --git a/client/lib/cn.ts b/client/lib/cn.ts
new file mode 100644
index 0000000..62987cf
--- /dev/null
+++ b/client/lib/cn.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
diff --git a/client/lib/flightColumns.ts b/client/lib/flightColumns.ts
new file mode 100644
index 0000000..7cbceb0
--- /dev/null
+++ b/client/lib/flightColumns.ts
@@ -0,0 +1,156 @@
+import type { ReactNode } from 'react'
+import type { Flight } from '@/models'
+import { formatDistance, formatDuration, formatTime, airportCode } from '@/lib/format'
+
+export type FlightSortKey = 'date' | 'duration' | 'distance' | 'seat'
+
+export interface FlightColumnDef {
+    id: string
+    label: string
+    sortable?: FlightSortKey
+    required?: boolean
+    defaultVisible: boolean
+    /** Right-aligned numeric columns get tabular treatment in the table. */
+    numeric?: boolean
+    render: (flight: Flight, ctx: { metric: boolean }) => ReactNode
+}
+
+const dash = '—'
+
+export const FLIGHT_COLUMNS: FlightColumnDef[] = [
+    {
+        id: 'date',
+        label: 'Date',
+        sortable: 'date',
+        required: true,
+        defaultVisible: true,
+        render: (f) => f.date || dash,
+    },
+    {
+        id: 'origin',
+        label: 'Origin',
+        required: true,
+        defaultVisible: true,
+        render: (f) => airportCode(f.origin),
+    },
+    {
+        id: 'destination',
+        label: 'Destination',
+        required: true,
+        defaultVisible: true,
+        render: (f) => airportCode(f.destination),
+    },
+    {
+        id: 'departureTime',
+        label: 'Departure',
+        defaultVisible: true,
+        render: (f) => formatTime(f.departureTime),
+    },
+    {
+        id: 'arrivalTime',
+        label: 'Arrival',
+        defaultVisible: true,
+        render: (f) => formatTime(f.arrivalTime),
+    },
+    {
+        id: 'arrivalDate',
+        label: 'Arrival date',
+        defaultVisible: false,
+        render: (f) => f.arrivalDate || dash,
+    },
+    {
+        id: 'duration',
+        label: 'Duration',
+        sortable: 'duration',
+        defaultVisible: true,
+        numeric: true,
+        render: (f) => formatDuration(f.duration),
+    },
+    {
+        id: 'distance',
+        label: 'Distance',
+        sortable: 'distance',
+        defaultVisible: true,
+        numeric: true,
+        render: (f, { metric }) => formatDistance(f.distance, metric),
+    },
+    {
+        id: 'seat',
+        label: 'Seat',
+        sortable: 'seat',
+        defaultVisible: true,
+        render: (f) => f.seat || dash,
+    },
+    {
+        id: 'aircraftSide',
+        label: 'Side',
+        defaultVisible: false,
+        render: (f) => f.aircraftSide || dash,
+    },
+    {
+        id: 'ticketClass',
+        label: 'Class',
+        defaultVisible: true,
+        render: (f) => f.ticketClass || dash,
+    },
+    {
+        id: 'purpose',
+        label: 'Purpose',
+        defaultVisible: false,
+        render: (f) => f.purpose || dash,
+    },
+    {
+        id: 'airline',
+        label: 'Airline',
+        defaultVisible: true,
+        render: (f) => (f.airline ? f.airline.iata || f.airline.icao : dash),
+    },
+    {
+        id: 'airplane',
+        label: 'Airplane',
+        defaultVisible: false,
+        render: (f) => f.airplane || dash,
+    },
+    {
+        id: 'tailNumber',
+        label: 'Tail number',
+        defaultVisible: false,
+        render: (f) => f.tailNumber || dash,
+    },
+    {
+        id: 'flightNumber',
+        label: 'Flight number',
+        defaultVisible: false,
+        render: (f) => f.flightNumber || dash,
+    },
+    {
+        id: 'username',
+        label: 'User',
+        defaultVisible: false,
+        render: (f) => f.username || dash,
+    },
+    {
+        id: 'notes',
+        label: 'Notes',
+        defaultVisible: false,
+        render: (f) => f.notes || dash,
+    },
+    {
+        id: 'connection',
+        label: 'Connection',
+        defaultVisible: false,
+        numeric: true,
+        render: (f) => (f.connection ? `#${f.connection}` : dash),
+    },
+    {
+        id: 'id',
+        label: 'Flight ID',
+        defaultVisible: false,
+        numeric: true,
+        render: (f) => `#${f.id}`,
+    },
+]
+
+export const COLUMN_INDEX = Object.fromEntries(FLIGHT_COLUMNS.map((c) => [c.id, c]))
+
+export const REQUIRED_COLUMN_IDS = FLIGHT_COLUMNS.filter((c) => c.required).map((c) => c.id)
diff --git a/client/lib/format.ts b/client/lib/format.ts
new file mode 100644
index 0000000..a65372e
--- /dev/null
+++ b/client/lib/format.ts
@@ -0,0 +1,31 @@
+export function formatDuration(minutes?: number | null): string {
+    if (!minutes) return '—'
+    const h = Math.floor(minutes / 60)
+    const m = minutes % 60
+    if (h === 0) return `${m}m`
+    if (m === 0) return `${h}h`
+    return `${h}h ${m.toString().padStart(2, '0')}m`
+}
+
+export function formatDistance(value?: number | null, metric: boolean = true): string {
+    if (!value) return '—'
+    return `${value.toLocaleString('en-US')} ${metric ? 'km' : 'mi'}`
+}
+
+export function formatTime(time?: string | null): string {
+    if (!time) return '—'
+    return time.slice(0, 5)
+}
+
+export function formatDate(date?: string | null): string {
+    if (!date) return '—'
+    return date
+}
+
+export function airportCode(
+    code?: { iata?: string; icao?: string } | string | null,
+): string {
+    if (!code) return '—'
+    if (typeof code === 'string') return code
+    return code.iata || code.icao || '—'
+}
diff --git a/client/lib/normalize.ts b/client/lib/normalize.ts
new file mode 100644
index 0000000..697d02c
--- /dev/null
+++ b/client/lib/normalize.ts
@@ -0,0 +1,23 @@
+function snakeToCamelKey(s: string): string {
+    return s.replace(/_([a-z0-9])/g, (_, c) => c.toUpperCase())
+}
+
+/**
+ * Recursively rewrite snake_case object keys to camelCase. Leaves arrays,
+ * primitives, dates, and class instances alone. The backend has aliasing
+ * configured but FastAPI 0.103 serializes with field names (snake_case);
+ * this lets the rest of the codebase keep using camelCase.
+ */
+export function camelize<T = unknown>(value: unknown): T {
+    if (Array.isArray(value)) {
+        return value.map((v) => camelize(v)) as unknown as T
+    }
+    if (value && typeof value === 'object' && value.constructor === Object) {
+        const out: Record<string, unknown> = {}
+        for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+            out[snakeToCamelKey(k)] = camelize(v)
+        }
+        return out as T
+    }
+    return value as T
+}
diff --git a/client/lib/queries.ts b/client/lib/queries.ts
new file mode 100644
index 0000000..2a47cc0
--- /dev/null
+++ b/client/lib/queries.ts
@@ -0,0 +1,139 @@
+import {
+    useMutation,
+    useQuery,
+    useQueryClient,
+    type UseQueryOptions,
+} from '@tanstack/react-query'
+import API, { ENABLE_EXTERNAL_APIS } from '@/api'
+import type { Flight, Airport, Airline, Statistics, User, Coord, Trajectory } from '@/models'
+import { camelize } from './normalize'
+
+export { ENABLE_EXTERNAL_APIS }
+
+async function getJSON<T>(endpoint: string, params: Record<string, unknown> = {}): Promise<T> {
+    const data = await API.get(endpoint, params)
+    return camelize<T>(data)
+}
+
+// ---------- Users ----------
+
+export function useCurrentUser() {
+    return useQuery<User>({
+        queryKey: ['user', 'me'],
+        queryFn: () => getJSON<User>('/users/me'),
+        staleTime: 5 * 60_000,
+    })
+}
+
+export function useUsernames() {
+    return useQuery<string[]>({
+        queryKey: ['users'],
+        queryFn: () => API.get('/users'),
+        staleTime: 60_000,
+    })
+}
+
+// ---------- Flights ----------
+
+export interface FlightsFilters {
+    limit?: number
+    offset?: number
+    order?: 'ASC' | 'DESC'
+    sort?: 'date' | 'duration' | 'distance' | 'seat'
+    start?: string
+    end?: string
+    username?: string
+    metric?: boolean
+}
+
+export function useFlights(filters: FlightsFilters) {
+    return useQuery<Flight[]>({
+        queryKey: ['flights', filters],
+        queryFn: () => getJSON<Flight[]>('/flights', filters as Record<string, unknown>),
+    })
+}
+
+export function useFlight(id?: number) {
+    return useQuery<Flight>({
+        queryKey: ['flight', id],
+        queryFn: () => getJSON<Flight>('/flights', { id }),
+        enabled: id !== undefined && id !== null,
+    })
+}
+
+export function useDeleteFlight() {
+    const qc = useQueryClient()
+    return useMutation({
+        mutationFn: (id: number) => API.delete(`/flights?id=${id}`),
+        onSuccess: () => qc.invalidateQueries({ queryKey: ['flights'] }),
+    })
+}
+
+// ---------- Statistics ----------
+
+export interface StatsFilters {
+    start?: string
+    end?: string
+    username?: string
+    metric?: boolean
+}
+
+export function useStatistics(filters: StatsFilters = {}, options?: UseQueryOptions<Statistics>) {
+    return useQuery<Statistics>({
+        queryKey: ['statistics', filters],
+        queryFn: () => getJSON<Statistics>('/statistics', filters as Record<string, unknown>),
+        ...options,
+    })
+}
+
+// ---------- Geography ----------
+
+export function useWorldGeography(visited: boolean) {
+    return useQuery({
+        queryKey: ['geo', 'world', visited],
+        queryFn: () => API.get('/geography/world', { visited }),
+        staleTime: 10 * 60_000,
+    })
+}
+
+export interface Decorations {
+    lines: Trajectory[]
+    markers: Coord[]
+}
+
+export function useDecorations(flightId?: number) {
+    return useQuery<Decorations>({
+        queryKey: ['geo', 'decorations', flightId],
+        queryFn: async () => {
+            const raw = await API.get(
+                '/geography/decorations',
+                flightId ? { flight_id: flightId } : {},
+            )
+            // Backend returns a tuple: [lines, markers]
+            const [lines, markers] = Array.isArray(raw) ? raw : [[], []]
+            return {
+                lines: camelize<Trajectory[]>(lines ?? []),
+                markers: camelize<Coord[]>(markers ?? []),
+            }
+        },
+        staleTime: 60_000,
+    })
+}
+
+// ---------- Airports / Airlines ----------
+
+export function searchAirports(q: string): Promise<Airport[]> {
+    return getJSON<Airport[]>('/airports', { q })
+}
+
+export function searchAirlines(q: string): Promise<Airline[]> {
+    return getJSON<Airline[]>('/airlines', { q })
+}
+
+export function fetchAirport(icao: string): Promise<Airport> {
+    return getJSON<Airport>(`/airports/${icao}`)
+}
+
+export function fetchAirline(icao: string): Promise<Airline> {
+    return getJSON<Airline>(`/airlines/${icao}`)
+}
diff --git a/client/main.tsx b/client/main.tsx
new file mode 100644
index 0000000..c2f171f
--- /dev/null
+++ b/client/main.tsx
@@ -0,0 +1,27 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { App } from './App'
+import TokenStorage from './storage/tokenStorage'
+import './style.css'
+
+TokenStorage.loadStoredToken()
+
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            retry: 1,
+            refetchOnWindowFocus: false,
+            staleTime: 30_000,
+        },
+    },
+})
+
+const container = document.getElementById('app')!
+createRoot(container).render(
+    <StrictMode>
+        <QueryClientProvider client={queryClient}>
+            <App />
+        </QueryClientProvider>
+    </StrictMode>,
+)
diff --git a/client/pages/AllFlights.tsx b/client/pages/AllFlights.tsx
index 1e6546e..15cc7d2 100644
--- a/client/pages/AllFlights.tsx
+++ b/client/pages/AllFlights.tsx
@@ -1,180 +1,138 @@
-import React, { useState, useEffect } from 'react';
-import { useSearchParams, useNavigate } from 'react-router-dom';
-
-import { Heading, Label, Input, Select, Dialog, Whisper } from '../components/Elements';
-import UserSelect from '../components/UserSelect';
-import SingleFlight from '../components/SingleFlight';
-import { Flight } from '../models'
-
-import API from '../api'
-import { objectFromForm } from '../utils';
-import ConfigStorage from '../storage/configStorage';
-
-interface FlightsFilters {
-    limit?: number;
-    offset?: number;
-    order?: "DESC"|"ASC";
-    sort?: "date"|"seat"|"aircraft_side"|"ticket_class"|"duration"|"distance";
-    start?: string;
-    end?: string;
-    username?: string;
-}
-export default function AllFlights() {
-    const [searchParams, setSearchParams] = useSearchParams()
-    const [filters, setFilters] = useState<FlightsFilters>({})
-
-    const flightID = searchParams.get("id");
-
-    const saveFilters = (event) => {
-        event.preventDefault();
-
-        const filters = objectFromForm(event);
+import { useState, useEffect } from 'react'
+import { Link, useSearchParams } from 'react-router-dom'
+import { Plus, ChevronLeft, ChevronRight } from 'lucide-react'
+import type { SortingState } from '@tanstack/react-table'
+
+import { FlightsTable } from '@/components/flights/FlightsTable'
+import { FlightFiltersBar } from '@/components/flights/FlightFilters'
+import { FlightDetail } from '@/components/flights/FlightDetail'
+import { Panel } from '@/components/ui/Panel'
+import { Button } from '@/components/ui/Button'
+import { Select } from '@/components/ui/Select'
+import ConfigStorage from '@/storage/configStorage'
+import { useFlights, type FlightsFilters } from '@/lib/queries'
+import { loadColumnPrefs } from '@/storage/columnsStorage'
+
+const PAGE_SIZES = [10, 20, 50]
 
-        if (filters === null) {
-            return;
-        }
-
-        setFilters(filters);
-        //event.target.reset();
-    }
+export default function AllFlights() {
+    const [searchParams] = useSearchParams()
+    const flightId = searchParams.get('id')
 
-    if(flightID) {
-        return (
-            <SingleFlight flightID={flightID} />
-        );
-    }
-    else {
-        return (
-            <>
-                <Heading text="All Flights" />
-                <Dialog title="Filters"
-                        onSubmit={saveFilters}
-                        formBody={(
-                        <>
-                            <Label text="Limit" />
-                            <Input type="number" name="limit" />
-                            <br />
-                            <Label text="Offset" />
-                            <Input type="number" name="offset" />
-                            <br />
-                            <Label text="Order" />
-                            <Select name="order"
-                                    options={[
-                                { text: "Any", value: "" },
-                                { text: "Descending", value: "DESC" },
-                                { text: "Ascending", value: "ASC" }
-                            ]}/>
-                            <br />
-                            <Label text="Sort By" />
-                            <Select name="sort"
-                                    options={[
-                                { text: "Any", value: "" },
-                                { text: "Date", value: "date" },
-                                { text: "Seat", value: "seat" },
-                                { text: "Aircraft Side", value: "aircraft_side" },
-                                { text: "Ticket Class", value: "ticket_class" },
-                                { text: "Duration", value: "duration" },
-                                { text: "Distance", value: "distance" }
-                            ]}/>
-                            <br />
-                            <Label text="Start Date" />
-                            <Input type="date" name="start" />
-                            <br />
-                            <Label text="End Date" />
-                            <Input type="date" name="end" />
-                            <br />
-                            <Label text="User"/>
-                            <UserSelect />
-                        </>
-                        )}/>
-
-                <FlightsTable filters={filters} />
-            </>
-        );
+    if (flightId) {
+        return <FlightDetail flightId={Number(flightId)} />
     }
-}
 
-function TableCell({ text }) {
-    return (
-        <td className="px-2 py-1 whitespace-nowrap border border-gray-300">
-            {text}
-        </td>
-    );
+    return <FlightsListPage />
 }
 
-function TableHeading({ text }) {
-    return (
-        <th className="px-2 whitespace-nowrap border border-gray-300 bg-primary-300 font-semibold">
-            {text}
-        </th>
-    );
-}
+function FlightsListPage() {
+    const metric = ConfigStorage.getSetting('metricUnits') !== 'false'
+    const [filters, setFilters] = useState<FlightsFilters>({})
+    const [sorting, setSorting] = useState<SortingState>([{ id: 'date', desc: true }])
+    const [pageSize, setPageSize] = useState(20)
+    const [page, setPage] = useState(0)
+    const [columnPrefs, setColumnPrefs] = useState(() => loadColumnPrefs())
 
-function FlightsTable({ filters }: { filters: FlightsFilters }) {
-    const [flights, setFlights] = useState<Flight[]>();
-    const navigate = useNavigate();
-    const metricUnits = ConfigStorage.getSetting("metricUnits");
+    // Refresh prefs when returning to this page (e.g. after editing in Settings).
+    useEffect(() => {
+        const onFocus = () => setColumnPrefs(loadColumnPrefs())
+        window.addEventListener('focus', onFocus)
+        window.addEventListener('jetlog:columns-changed', onFocus as EventListener)
+        return () => {
+            window.removeEventListener('focus', onFocus)
+            window.removeEventListener('jetlog:columns-changed', onFocus as EventListener)
+        }
+    }, [])
 
+    // Reset to first page whenever filters, sort, or page size change
     useEffect(() => {
-        API.get(`/flights?metric=${metricUnits}`, filters)
-        .then((data: Flight[]) => {
-            setFlights(data);
-        });
-    }, [filters]);
-
-    if(flights === undefined) {
-        return (
-            <p className="m-4">Loading...</p>
-        );
-    }
-    else if (flights.length === 0) {
-        return (
-            <p className="m-4">No flights!</p>
-        );
+        setPage(0)
+    }, [filters, sorting, pageSize])
+
+    // Fetch one extra to detect a next page without a count endpoint
+    const queryFilters: FlightsFilters = {
+        ...filters,
+        metric,
+        sort: sorting[0]?.id as FlightsFilters['sort'],
+        order: sorting[0]?.desc ? 'DESC' : 'ASC',
+        limit: pageSize + 1,
+        offset: page * pageSize,
     }
+    const { data: rawFlights, isLoading, isFetching } = useFlights(queryFilters)
 
-    const viewFlight = (flightID: number) => {
-        navigate(`/flights?id=${flightID}`);
-    }
+    const hasNext = (rawFlights?.length ?? 0) > pageSize
+    const pageFlights = rawFlights?.slice(0, pageSize)
+    const showingCount = pageFlights?.length ?? 0
+    const start = showingCount > 0 ? page * pageSize + 1 : 0
+    const end = page * pageSize + showingCount
 
     return (
-    <>
-        <div className="overflow-x-auto">
-        <table className="table-auto w-full">
-            <tr>
-                <TableHeading text="Date"/>
-                <TableHeading text="Origin"/>
-                <TableHeading text="Destination"/>
-                <TableHeading text="Departure Time"/>
-                <TableHeading text="Arrival Time"/>
-                <TableHeading text="Duration"/>
-                <TableHeading text="Distance"/>
-                <TableHeading text="Seat"/>
-                <TableHeading text="Class"/>
-                <TableHeading text="Airplane"/>
-                <TableHeading text="Airline"/>
-            </tr>
-            { flights.map((flight: Flight) => (
-            <tr className="cursor-pointer even:bg-gray-100 hover:bg-gray-200 duration-75" 
-                onClick={() => viewFlight(flight.id)}>
-                <TableCell text={flight.date}/>
-                <TableCell text={flight.origin.municipality + ' (' + (flight.origin.iata || flight.origin.icao) + ')'}/>
-                <TableCell text={flight.destination.municipality + ' (' + (flight.destination.iata || flight.destination.icao) + ')'} />
-                <TableCell text={flight.departureTime || ""}/>
-                <TableCell text={flight.arrivalTime || ""}/>
-                <TableCell text={flight.duration ? flight.duration + " min" : ""}/>
-                <TableCell text={flight.distance ? flight.distance.toLocaleString() + (metricUnits === "false" ? " mi" : " km") : ""}/>
-                <TableCell text={flight.seat || ""}/>
-                <TableCell text={flight.ticketClass || ""} />
-                <TableCell text={flight.airplane || ""}/>
-                <TableCell text={flight.airline?.name || ""}/>
-            </tr>
-            ))}
-        </table>
+        <div className="max-w-7xl mx-auto p-4 md:p-6">
+            <div className="flex items-center justify-between mb-4">
+                <h1 className="font-mono uppercase tracking-board text-base">All flights</h1>
+                <Button asChild variant="accent" size="sm">
+                    <Link to="/new">
+                        <Plus size={13} /> New flight
+                    </Link>
+                </Button>
+            </div>
+
+            <FlightFiltersBar filters={filters} onChange={setFilters} />
+
+            <Panel className="overflow-hidden">
+                <FlightsTable
+                    flights={pageFlights}
+                    isLoading={isLoading}
+                    sorting={sorting}
+                    setSorting={setSorting}
+                    metric={metric}
+                    columnPrefs={columnPrefs}
+                />
+            </Panel>
+
+            <div className="flex items-center justify-between gap-3 mt-3 flex-wrap">
+                <div className="flex items-center gap-2">
+                    <label className="board-label text-ink-muted">Per page</label>
+                    <Select
+                        value={pageSize}
+                        onChange={(e) => setPageSize(Number(e.target.value))}
+                        className="h-8 w-auto min-w-[68px]"
+                    >
+                        {PAGE_SIZES.map((s) => (
+                            <option key={s} value={s}>
+                                {s}
+                            </option>
+                        ))}
+                    </Select>
+                </div>
+
+                <p className="text-xs font-mono text-ink-muted tabular-nums">
+                    {showingCount > 0 ? `Showing ${start}–${end}` : 'No results'}
+                </p>
+
+                <div className="flex items-center gap-2">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setPage((p) => Math.max(0, p - 1))}
+                        disabled={page === 0 || isFetching}
+                    >
+                        <ChevronLeft size={13} /> Prev
+                    </Button>
+                    <span className="board-label text-ink-muted tabular-nums px-2">
+                        Page {page + 1}
+                    </span>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setPage((p) => p + 1)}
+                        disabled={!hasNext || isFetching}
+                    >
+                        Next <ChevronRight size={13} />
+                    </Button>
+                </div>
+            </div>
         </div>
-
-        <Whisper text={`Showing at most ${filters.limit || 50} flights. Adjust filters for more.`} />
-
-    </>
-    );
+    )
 }
diff --git a/client/pages/Home.tsx b/client/pages/Home.tsx
index ee6189a..52bd3d7 100644
--- a/client/pages/Home.tsx
+++ b/client/pages/Home.tsx
@@ -1,16 +1,179 @@
-import React from 'react';
+import { lazy, Suspense } from 'react'
+import { Link } from 'react-router-dom'
+import { ArrowRight, Plane } from 'lucide-react'
 
-import { ShortStats } from '../components/Stats';
-import WorldMap from '../components/WorldMap';
+import { useCurrentUser, useFlights, useStatistics } from '@/lib/queries'
 
-export default function Home() {
+const WorldMap = lazy(() =>
+    import('@/components/map/WorldMap').then((m) => ({ default: m.WorldMap })),
+)
+import { Panel, PanelHeader, PanelTitle, PanelBody } from '@/components/ui/Panel'
+import { SplitFlap } from '@/components/ui/SplitFlap'
+import { Spinner } from '@/components/ui/Spinner'
+import { Badge } from '@/components/ui/Badge'
+import ConfigStorage from '@/storage/configStorage'
+import type { Flight } from '@/models'
+
+function formatNumber(n: number) {
+    return n.toLocaleString('en-US')
+}
+
+interface StatCellProps {
+    label: string
+    value: string
+    unit?: string
+    delay?: number
+}
+
+function StatCell({ label, value, unit, delay = 0 }: StatCellProps) {
     return (
-        <>
-            <ShortStats />
+        <div className="px-5 py-4 border-r border-rule last:border-r-0 flex-1 min-w-[140px]">
+            <div className="board-label mb-2">{label}</div>
+            <div className="flex items-baseline gap-1.5">
+                <span className="font-mono font-semibold text-3xl md:text-4xl text-ink tabular-nums leading-none">
+                    <SplitFlap value={value} delay={delay} />
+                </span>
+                {unit && <span className="board-label">{unit}</span>}
+            </div>
+        </div>
+    )
+}
+
+function CountersStrip() {
+    const metric = ConfigStorage.getSetting('metricUnits') !== 'false'
+    const { data: me } = useCurrentUser()
+    const { data: stats, isLoading } = useStatistics(
+        { metric, username: me?.username },
+        { enabled: !!me } as any,
+    )
 
-            <div className="md:w-4/5 md:m-auto">
-                <WorldMap />
+    if (isLoading || !stats) {
+        return (
+            <Panel className="h-[110px] flex items-center justify-center">
+                <Spinner />
+            </Panel>
+        )
+    }
+
+    return (
+        <Panel className="overflow-x-auto">
+            <div className="flex divide-x divide-rule min-w-max">
+                <StatCell label="Flights" value={formatNumber(stats.totalFlights)} delay={0} />
+                <StatCell label="Airports" value={formatNumber(stats.totalUniqueAirports)} delay={80} />
+                <StatCell
+                    label="Hours"
+                    value={formatNumber(Math.round(stats.totalDuration / 60))}
+                    delay={160}
+                />
+                <StatCell
+                    label="Distance"
+                    value={formatNumber(stats.totalDistance)}
+                    unit={metric ? 'km' : 'mi'}
+                    delay={240}
+                />
+                <StatCell
+                    label="Countries"
+                    value={formatNumber(stats.visitedCountries)}
+                    delay={320}
+                />
             </div>
-        </>
-    );
+        </Panel>
+    )
+}
+
+function RecentFlightRow({ flight }: { flight: Flight }) {
+    const origin = flight.origin?.iata || flight.origin?.icao || '—'
+    const dest = flight.destination?.iata || flight.destination?.icao || '—'
+    const dep = flight.departureTime?.slice(0, 5) || '—'
+    return (
+        <Link
+            to={`/flights?id=${flight.id}`}
+            className="flex items-center gap-3 px-4 py-3 border-b border-rule last:border-b-0 odd:bg-paper even:bg-paper-soft/50 hover:bg-accent-soft/40 transition-colors"
+        >
+            <span className="font-mono text-xs text-ink-muted tabular-nums w-20 shrink-0">
+                {flight.date}
+            </span>
+            <span className="font-mono font-semibold text-sm tabular-nums tracking-board">
+                {origin}
+            </span>
+            <ArrowRight size={12} className="text-ink-faint" />
+            <span className="font-mono font-semibold text-sm tabular-nums tracking-board">
+                {dest}
+            </span>
+            <span className="font-mono text-xs text-ink-muted tabular-nums ml-auto hidden sm:inline">
+                {dep}
+            </span>
+            <Badge variant="muted" className="hidden md:inline-flex">
+                {flight.airline?.iata || flight.airline?.icao || '—'}
+            </Badge>
+        </Link>
+    )
+}
+
+function RecentFlights() {
+    const { data: me } = useCurrentUser()
+    const { data: flights, isLoading } = useFlights({
+        limit: 5,
+        sort: 'date',
+        order: 'DESC',
+        username: me?.username,
+    })
+
+    return (
+        <Panel>
+            <PanelHeader>
+                <PanelTitle>Recent flights</PanelTitle>
+                <Link
+                    to="/flights"
+                    className="board-label text-ink-muted hover:text-ink flex items-center gap-1"
+                >
+                    All flights <ArrowRight size={12} />
+                </Link>
+            </PanelHeader>
+            {isLoading ? (
+                <PanelBody className="flex justify-center">
+                    <Spinner />
+                </PanelBody>
+            ) : flights && flights.length > 0 ? (
+                <div>
+                    {flights.map((f) => (
+                        <RecentFlightRow key={f.id} flight={f} />
+                    ))}
+                </div>
+            ) : (
+                <PanelBody className="text-center text-ink-muted text-sm py-10">
+                    <Plane className="mx-auto mb-2 text-ink-faint" size={28} strokeWidth={1.5} />
+                    No flights yet. <Link to="/new" className="text-accent-deep underline">Add your first flight</Link>.
+                </PanelBody>
+            )}
+        </Panel>
+    )
+}
+
+export default function Home() {
+    return (
+        <div className="p-4 md:p-6 space-y-4 md:space-y-6 max-w-7xl mx-auto">
+            <CountersStrip />
+
+            <Panel>
+                <PanelHeader>
+                    <PanelTitle>World map</PanelTitle>
+                    <span className="board-label text-ink-muted hidden sm:inline">
+                        Visited airports & routes
+                    </span>
+                </PanelHeader>
+                <Suspense
+                    fallback={
+                        <div className="flex justify-center py-16">
+                            <Spinner />
+                        </div>
+                    }
+                >
+                    <WorldMap className="bg-paper-soft/30" />
+                </Suspense>
+            </Panel>
+
+            <RecentFlights />
+        </div>
+    )
 }
diff --git a/client/pages/Login.tsx b/client/pages/Login.tsx
index 255eec3..b31fa5d 100644
--- a/client/pages/Login.tsx
+++ b/client/pages/Login.tsx
@@ -1,55 +1,102 @@
-import React, {useState} from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useState, type FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 
-import API from '../api';
-import TokenStorage from '../storage/tokenStorage';
-import {Heading, Checkbox, Input, Button} from '../components/Elements'
+import API from '@/api'
+import TokenStorage from '@/storage/tokenStorage'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Label } from '@/components/ui/Label'
+import { Switch } from '@/components/ui/Switch'
 
 export default function Login() {
-    const navigate = useNavigate();
-    const [remember, setRemember] = useState<boolean>(false);
-    const [failedLogin, setFailedLogin] = useState<boolean>(false);
-
-    const handleSubmit = (event) => {
-        event.preventDefault();
-        const formData = new FormData(event.currentTarget);
-
-        API.post("/auth/token", formData)
-        .then((data) => {
-            const token = data.access_token;
-            TokenStorage.storeToken(token, remember);
-
-            navigate("/");
-        })
-        .catch((err) => {
-            if (err.response.status === 401) {
-                setFailedLogin(true);
+    const navigate = useNavigate()
+    const qc = useQueryClient()
+    const [remember, setRemember] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    const login = useMutation({
+        mutationFn: (formData: FormData) => API.post('/auth/token', formData),
+        onSuccess: (data) => {
+            TokenStorage.storeToken(data.access_token, remember)
+            qc.clear()
+            navigate('/')
+        },
+        onError: (err: any) => {
+            if (err?.response?.status === 401) {
+                setError('Incorrect username or password')
+            } else {
+                setError('Unable to log in. Please try again.')
             }
-        });
+        },
+    })
+
+    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        setError(null)
+        login.mutate(new FormData(event.currentTarget))
     }
 
     return (
-    <div className="h-full flex items-center">
-        <div className="container mx-auto max-w-xs text-center">
-            <Heading text="Jetlog" />
-            <form onSubmit={handleSubmit}>
-                { failedLogin ?
-                    <p className="mb-3 text-red-600">Incorrect username or password</p>
-                    : <></>
-                }
-                <Input type="text" name="username" placeholder="username" required/>
-                <Input type="password" name="password" placeholder="password" required/>
-
-                <p className="inline mb-2">Remember me</p>
-                <Checkbox name="remember" onChange={(e) => setRemember(e.target.checked)}/>
-
-                <br />
-
-                <button className="py-1 px-2 my-2 w-2/3 
-                cursor-pointer bg-primary-500 text-white text-lg
-                font-bold hover:bg-primary-400" type="submit">Login</button>
-            </form>
+        <div className="min-h-full flex items-center justify-center px-4 py-10">
+            <div className="w-full max-w-sm">
+                <h1 className="font-mono font-bold uppercase tracking-board text-2xl text-center mb-8">
+                    Jet<span className="text-accent-deep">log</span>
+                </h1>
+
+                <form onSubmit={handleSubmit} className="space-y-4">
+                    <div>
+                        <Label htmlFor="username">Username</Label>
+                        <Input
+                            id="username"
+                            name="username"
+                            type="text"
+                            autoComplete="username"
+                            autoFocus
+                            required
+                        />
+                    </div>
+
+                    <div>
+                        <Label htmlFor="password">Password</Label>
+                        <Input
+                            id="password"
+                            name="password"
+                            type="password"
+                            autoComplete="current-password"
+                            required
+                        />
+                    </div>
+
+                    <label
+                        htmlFor="remember"
+                        className="flex items-center gap-2 cursor-pointer board-label pt-1"
+                    >
+                        <Switch
+                            id="remember"
+                            checked={remember}
+                            onCheckedChange={setRemember}
+                        />
+                        Remember me
+                    </label>
+
+                    {error && (
+                        <div className="border border-danger bg-danger-soft/40 text-danger px-3 py-2 text-xs font-mono">
+                            {error}
+                        </div>
+                    )}
+
+                    <Button
+                        type="submit"
+                        variant="accent"
+                        size="lg"
+                        className="w-full"
+                        disabled={login.isPending}
+                    >
+                        {login.isPending ? 'Signing in…' : 'Sign in'}
+                    </Button>
+                </form>
+            </div>
         </div>
-    </div>
-    );
+    )
 }
diff --git a/client/pages/New.tsx b/client/pages/New.tsx
index 6388147..300b6d7 100644
--- a/client/pages/New.tsx
+++ b/client/pages/New.tsx
@@ -1,320 +1,529 @@
-import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useEffect, useState, type FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQueryClient } from '@tanstack/react-query'
+import { Plane, Radio, Loader2 } from 'lucide-react'
 
-import { Heading, Label, Button, Input, Select, TextArea } from '../components/Elements';
-import SearchInput from '../components/SearchInput'
-import API, { ENABLE_EXTERNAL_APIS } from '../api';
-import { objectFromForm } from '../utils';
-import { Airline, Airport, User } from '../models';
-import ConfigStorage from '../storage/configStorage';
-import FetchConnection from '../components/FetchConnection';
+import API, { ENABLE_EXTERNAL_APIS } from '@/api'
+import {
+    searchAirports,
+    searchAirlines,
+    useCurrentUser,
+    useUsernames,
+} from '@/lib/queries'
+import type { Airline, Airport } from '@/models'
+import ConfigStorage from '@/storage/configStorage'
 
-function TravelerFields({ username }: { username: string }) {
-    return (
-        <>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-2">
-            <div>
-                <Label text="Seat Type" />
-                <Select
-                    name={`seat__${username}`}
-                    options={[
-                        { text: "Choose", value: "" },
-                        { text: "Aisle", value: "aisle" },
-                        { text: "Middle", value: "middle" },
-                        { text: "Window", value: "window" }
-                    ]}
-                />
-            </div>
-            <div>
-                <Label text="Aircraft Side" />
-                <Select
-                    name={`aircraftSide__${username}`}
-                    options={[
-                        { text: "Choose", value: "" },
-                        { text: "Left", value: "left" },
-                        { text: "Right", value: "right" },
-                        { text: "Center", value: "center" }
-                    ]}
-                />
-            </div>
-            <div>
-                <Label text="Class" />
-                <Select
-                    name={`ticketClass__${username}`}
-                    options={[
-                        { text: "Choose", value: "" },
-                        { text: "Private", value: "private" },
-                        { text: "First", value: "first" },
-                        { text: "Business", value: "business" },
-                        { text: "Economy+", value: "economy+" },
-                        { text: "Economy", value: "economy" }
-                    ]}
-                />
-            </div>
-            <div>
-                <Label text="Purpose" />
-                <Select
-                    name={`purpose__${username}`}
-                    options={[
-                        { text: "Choose", value: "" },
-                        { text: "Leisure", value: "leisure" },
-                        { text: "Business", value: "business" },
-                        { text: "Crew", value: "crew" },
-                        { text: "Other", value: "other" }
-                    ]}
-                />
-            </div>
-        </div>
-        <div>
-            <Label text="Notes"/>
-            <TextArea 
-                name={`notes__${username}`}
-                placeholder="Type here..." 
-                maxLength={150}
-            />
-        </div>
-        </>
-    );
-}
+import { Panel, PanelHeader, PanelTitle, PanelBody } from '@/components/ui/Panel'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Label } from '@/components/ui/Label'
+import { Select } from '@/components/ui/Select'
+import { Combobox, type ComboboxOption } from '@/components/ui/Combobox'
+import { Badge } from '@/components/ui/Badge'
 
-export default function New() {
-    const navigate = useNavigate();
+const SEAT_OPTIONS = ['', 'aisle', 'middle', 'window']
+const AIRCRAFT_SIDES = ['', 'left', 'right', 'center']
+const CLASSES = ['', 'private', 'first', 'business', 'economy+', 'economy']
+const PURPOSES = ['', 'leisure', 'business', 'crew', 'other']
 
-    const [date, setDate] = useState<string>((new Date()).toISOString().substring(0, 10));
-    const [flightNumber, setFlightNumber] = useState<string>();
-    const [origin, setOrigin] = useState<Airport>();
-    const [destination, setDestination] = useState<Airport>();
-    const [airline, setAirline] = useState<Airline>();
-    const [connection, setConnection] = useState<number>();
+interface TravelerExtras {
+    seat: string
+    aircraftSide: string
+    ticketClass: string
+    purpose: string
+    notes: string
+}
+const emptyExtras = (): TravelerExtras => ({
+    seat: '',
+    aircraftSide: '',
+    ticketClass: '',
+    purpose: '',
+    notes: '',
+})
 
-    // delegation (admin-only for now)
-    const [currentUser, setCurrentUser] = useState<User | undefined>();
-    const [allUsernames, setAllUsernames] = useState<string[] | undefined>();
-    const [selectedUsernames, setSelectedUsernames] = useState<string[]>([]);
+interface SharedFields {
+    origin?: Airport
+    destination?: Airport
+    airline?: Airline
+    date: string
+    departureTime: string
+    arrivalTime: string
+    arrivalDate: string
+    airplane: string
+    tailNumber: string
+    flightNumber: string
+}
 
-    const localAirportTime = ConfigStorage.getSetting("localAirportTime");
+export default function NewFlight() {
+    const navigate = useNavigate()
+    const qc = useQueryClient()
+    const localAirportTime = ConfigStorage.getSetting('localAirportTime') === 'true'
 
-    useEffect(() => {
-        // Get current user; if admin, load users list
-        // Own username cannot be unselected because 
-        // delegation should be used when multiple users
-        // board the same flight
-        API.get('/users/me').then((me: User) => {
-            setCurrentUser(me);
-            setSelectedUsernames([me.username]);
-            if (me.isAdmin) {
-                API.get('/users')
-                .then((users: string[]) => {
-                    users = users.filter(username => username !== me.username);
-                    setAllUsernames(users);
-                });
-            }
-        });
-    }, []);
+    const { data: me } = useCurrentUser()
+    const { data: allUsers } = useUsernames()
 
-    const postFlight = async (event) => {
-        event.preventDefault();
+    const [shared, setShared] = useState<SharedFields>({
+        date: new Date().toISOString().slice(0, 10),
+        departureTime: '',
+        arrivalTime: '',
+        arrivalDate: '',
+        airplane: '',
+        tailNumber: '',
+        flightNumber: '',
+    })
 
-        const rawFormData = objectFromForm(event);
-        if (rawFormData === null) {
-            return;
+    const [travelers, setTravelers] = useState<Record<string, TravelerExtras>>({})
+    const [submitting, setSubmitting] = useState(false)
+    const [fetching, setFetching] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    // Initialize traveler list when current user loads
+    useEffect(() => {
+        if (me && !travelers[me.username]) {
+            setTravelers({ [me.username]: emptyExtras() })
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [me?.username])
 
-        // Build payload from form data
-        const sharedFields = ["airline", "origin", "destination", "date", 
-            "flightNumber", "departureTime", "arrivalTime", "arrivalDate",
-            "airplane", "tailNumber"];
-        let payload = selectedUsernames.map(selectedUsername => {
-            var userFlight = { username: selectedUsername };
+    const setShared_ = <K extends keyof SharedFields>(k: K, v: SharedFields[K]) =>
+        setShared((s) => ({ ...s, [k]: v }))
 
-            for (const sharedField of sharedFields) {
-                userFlight[sharedField] = rawFormData[sharedField];
-            }
+    const updateTraveler = (
+        username: string,
+        patch: Partial<TravelerExtras>,
+    ) =>
+        setTravelers((t) => ({
+            ...t,
+            [username]: { ...t[username], ...patch },
+        }))
 
-            for (const [key, value] of Object.entries(rawFormData)) {
-                const [field, user] = key.split("__");
-                if (user == selectedUsername) {
-                    userFlight[field] = value;
-                }
+    const toggleTraveler = (username: string) => {
+        setTravelers((t) => {
+            if (t[username]) {
+                const { [username]: _, ...rest } = t
+                return rest
             }
+            return { ...t, [username]: emptyExtras() }
+        })
+    }
 
-            return userFlight;
-        });
-
-        console.log(payload);
+    const onAirportSearch = async (q: string): Promise<ComboboxOption<Airport>[]> => {
+        const res = await searchAirports(q)
+        return res.map((a) => ({
+            value: a.icao,
+            label: `${a.iata || a.icao} · ${a.municipality}`,
+            sub: `${a.name} · ${a.country}`,
+            raw: a,
+        }))
+    }
+    const onAirlineSearch = async (q: string): Promise<ComboboxOption<Airline>[]> => {
+        const res = await searchAirlines(q)
+        return res.map((a) => ({
+            value: a.icao,
+            label: `${a.iata || a.icao} · ${a.name}`,
+            raw: a,
+        }))
+    }
 
-        if (payload.length == 1) {
-            API.post(`/flights?timezones=${localAirportTime}`, payload[0])
-            .then(flightID => navigate(`/flights?id=${flightID}`));
-        } else {
-            API.post(`/flights/many?timezones=${localAirportTime}`, payload)
-            .then(creatorFlightID => navigate(`/flights?id=${creatorFlightID}`));
+    const attemptFetchByCallsign = async () => {
+        if (!ENABLE_EXTERNAL_APIS || !shared.flightNumber) return
+        setFetching(true)
+        setError(null)
+        try {
+            const data = await API.getRemote(
+                `https://api.adsbdb.com/v0/callsign/${shared.flightNumber}`,
+            )
+            const route = data?.response?.flightroute
+            if (!route) {
+                setError('No route found for that flight number.')
+                return
+            }
+            const [origin, destination, airline] = await Promise.all([
+                API.get(`/airports/${route.origin.icao_code}`),
+                API.get(`/airports/${route.destination.icao_code}`),
+                API.get(`/airlines/${route.airline.icao}`),
+            ])
+            setShared((s) => ({ ...s, origin, destination, airline }))
+        } catch {
+            setError('Failed to fetch flight info.')
+        } finally {
+            setFetching(false)
         }
-    };
+    }
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault()
+        setError(null)
 
-    const attemptFetchFlight = async () => {
-        if (!ENABLE_EXTERNAL_APIS) {
-            return;
+        if (!shared.origin || !shared.destination) {
+            setError('Origin and destination are required.')
+            return
+        }
+        const usernames = Object.keys(travelers)
+        if (usernames.length === 0) {
+            setError('At least one traveler is required.')
+            return
         }
 
-        API.getRemote(`https://api.adsbdb.com/v0/callsign/${flightNumber}`)
-        .then(async (data: Object) => {
-            const originICAO = data["response"]["flightroute"]["origin"]["icao_code"];
-            const destinationICAO = data["response"]["flightroute"]["destination"]["icao_code"];
-            const airlineICAO = data["response"]["flightroute"]["airline"]["icao"];
+        setSubmitting(true)
+        try {
+            const sharedPayload = {
+                origin: shared.origin.icao,
+                destination: shared.destination.icao,
+                airline: shared.airline?.icao,
+                date: shared.date,
+                departureTime: shared.departureTime || undefined,
+                arrivalTime: shared.arrivalTime || undefined,
+                arrivalDate: shared.arrivalDate || undefined,
+                airplane: shared.airplane || undefined,
+                tailNumber: shared.tailNumber || undefined,
+                flightNumber: shared.flightNumber || undefined,
+            }
+
+            const payload = usernames.map((u) => {
+                const extras = travelers[u]
+                const filteredExtras: Record<string, string> = {}
+                for (const [k, v] of Object.entries(extras)) {
+                    if (v) filteredExtras[k] = v
+                }
+                return { username: u, ...sharedPayload, ...filteredExtras }
+            })
 
-            const origin = await API.get(`/airports/${originICAO}`);
-            const destination= await API.get(`/airports/${destinationICAO}`);
-            const airline = await API.get(`/airlines/${airlineICAO}`)
+            const endpoint =
+                payload.length === 1
+                    ? `/flights?timezones=${localAirportTime}`
+                    : `/flights/many?timezones=${localAirportTime}`
+            const body = payload.length === 1 ? payload[0] : payload
+            const flightId = await API.post(endpoint, body)
+            qc.invalidateQueries({ queryKey: ['flights'] })
+            navigate(`/flights?id=${flightId}`)
+        } catch {
+            setError('Failed to save flight.')
+        } finally {
+            setSubmitting(false)
+        }
+    }
 
-            setOrigin({...origin});
-            setDestination({...destination});
-            setAirline({ ...airline });
-        });
-    };
+    const isAdmin = me?.isAdmin
+    const otherUsers = allUsers?.filter((u) => u !== me?.username) ?? []
 
     return (
-        <>
-            <Heading text="New Flight" />
+        <form onSubmit={handleSubmit} className="max-w-5xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
+            <div className="flex items-center justify-between">
+                <h1 className="font-mono uppercase tracking-board text-base">New flight</h1>
+                <Badge variant="muted">
+                    <Plane size={11} className="mr-1" />
+                    Manual entry
+                </Badge>
+            </div>
 
-            <form onSubmit={postFlight}>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
-                    <div className="container">
-                        <Label text="Origin" required />
-                        <SearchInput name="origin"
-                                     type="airports"
-                                     value={origin}
-                                     onSelect={(airport: Airport) => setOrigin(airport)} />
-                        <br />
-                        <Label text="Destination" required />
-                        <SearchInput name="destination"
-                                     type="airports"
-                                     value={destination}
-                                     onSelect={(airport: Airport) => setDestination(airport)} />
-                        <br />
-                        <Label text="Date" required />
-                        <Input
-                            type="date"
-                            name="date"
-                            defaultValue={(new Date()).toISOString().substring(0, 10)}
-                            onChange={(e) => setDate(e.target.value)}
-                            required
-                        />
+            {/* Fetch by callsign — prominent at top */}
+            {ENABLE_EXTERNAL_APIS && (
+                <Panel className="border-ink/20">
+                    <PanelBody className="!py-4">
+                        <Label>Flight number</Label>
+                        <div className="flex gap-2">
+                            <Input
+                                placeholder="e.g. FR2460"
+                                value={shared.flightNumber}
+                                maxLength={7}
+                                onChange={(e) =>
+                                    setShared_('flightNumber', e.target.value.toUpperCase())
+                                }
+                                className="flex-1"
+                            />
+                            <Button
+                                type="button"
+                                variant="accent"
+                                onClick={attemptFetchByCallsign}
+                                disabled={!shared.flightNumber || fetching}
+                                className="h-10 shrink-0"
+                            >
+                                {fetching ? (
+                                    <Loader2 size={14} className="animate-spin" />
+                                ) : (
+                                    <Radio size={14} />
+                                )}
+                                {fetching ? 'Fetching…' : 'Fetch'}
+                            </Button>
+                        </div>
+                        <p className="text-xs text-ink-muted font-mono mt-1.5">
+                            Enter a callsign and we'll pre-fill origin, destination & airline.
+                        </p>
+                    </PanelBody>
+                </Panel>
+            )}
 
-                        <br />
-                        <Label text="Departure Time" />
-                        <Input
-                            type="time"
-                            name="departureTime"
-                        />
-                        <br />
-                        <Label text="Arrival Time" />
-                        <Input
-                            type="time"
-                            name="arrivalTime"
-                        />
-                        <br />
-                        <Label text="Arrival Date" />
-                        <Input
-                            type="date"
-                            name="arrivalDate"
-                        />
-                    </div>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
+                {/* Route */}
+                <Panel>
+                    <PanelHeader>
+                        <PanelTitle>Route</PanelTitle>
+                    </PanelHeader>
+                    <PanelBody className="space-y-3">
+                        <div>
+                            <Label required>Origin</Label>
+                            <Combobox<Airport>
+                                placeholder="Search airports..."
+                                displayValue={
+                                    shared.origin
+                                        ? `${shared.origin.iata || shared.origin.icao} · ${shared.origin.municipality}`
+                                        : undefined
+                                }
+                                onSearch={onAirportSearch}
+                                onSelect={(o) => setShared_('origin', o.raw as Airport)}
+                            />
+                        </div>
+                        <div>
+                            <Label required>Destination</Label>
+                            <Combobox<Airport>
+                                placeholder="Search airports..."
+                                displayValue={
+                                    shared.destination
+                                        ? `${shared.destination.iata || shared.destination.icao} · ${shared.destination.municipality}`
+                                        : undefined
+                                }
+                                onSearch={onAirportSearch}
+                                onSelect={(o) => setShared_('destination', o.raw as Airport)}
+                            />
+                        </div>
+                        <div>
+                            <Label>Airline</Label>
+                            <Combobox<Airline>
+                                placeholder="Search airlines..."
+                                displayValue={
+                                    shared.airline
+                                        ? `${shared.airline.iata || shared.airline.icao} · ${shared.airline.name}`
+                                        : undefined
+                                }
+                                onSearch={onAirlineSearch}
+                                onSelect={(o) => setShared_('airline', o.raw as Airline)}
+                            />
+                        </div>
+                    </PanelBody>
+                </Panel>
 
-                    <div className="container">
-                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {/* Schedule + aircraft */}
+                <Panel>
+                    <PanelHeader>
+                        <PanelTitle>Schedule & aircraft</PanelTitle>
+                    </PanelHeader>
+                    <PanelBody className="space-y-3">
+                        <div>
+                            <Label required>Date</Label>
+                            <Input
+                                type="date"
+                                value={shared.date}
+                                onChange={(e) => setShared_('date', e.target.value)}
+                                required
+                            />
+                        </div>
+                        <div className="grid grid-cols-2 gap-3">
                             <div>
-                                <Label text="Airplane" />
-                                <Input type="text" name="airplane" placeholder="B738" maxLength={16} />
+                                <Label>Departure</Label>
+                                <Input
+                                    type="time"
+                                    value={shared.departureTime}
+                                    onChange={(e) => setShared_('departureTime', e.target.value)}
+                                />
                             </div>
                             <div>
-                                <Label text="Tail Number" />
-                                <Input type="text" name="tailNumber" placeholder="EI-DCL" maxLength={16} />
+                                <Label>Arrival</Label>
+                                <Input
+                                    type="time"
+                                    value={shared.arrivalTime}
+                                    onChange={(e) => setShared_('arrivalTime', e.target.value)}
+                                />
                             </div>
                         </div>
-
-                        <br />
-                        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 items-end">
+                        <div>
+                            <Label>Arrival date</Label>
+                            <Input
+                                type="date"
+                                value={shared.arrivalDate}
+                                onChange={(e) => setShared_('arrivalDate', e.target.value)}
+                            />
+                        </div>
+                        <div className="grid grid-cols-2 gap-3">
                             <div>
-                                <Label text="Airline" />
-                                <SearchInput name="airline"
-                                             type="airlines"
-                                             value={airline}
-                                             onSelect={(airline: Airline) => setAirline(airline)} />
+                                <Label>Airplane</Label>
+                                <Input
+                                    placeholder="B738"
+                                    maxLength={16}
+                                    value={shared.airplane}
+                                    onChange={(e) => setShared_('airplane', e.target.value)}
+                                />
                             </div>
-                            <div className="whitespace-nowrap">
-                                <Label text="Flight Number" />
+                            <div>
+                                <Label>Tail number</Label>
                                 <Input
-                                    type="text"
-                                    name="flightNumber"
-                                    placeholder="FR2460"
-                                    maxLength={7}
-                                    onChange={(e) => setFlightNumber(e.target.value)}
+                                    placeholder="EI-DCL"
+                                    maxLength={16}
+                                    value={shared.tailNumber}
+                                    onChange={(e) => setShared_('tailNumber', e.target.value)}
                                 />
                             </div>
-                            { ENABLE_EXTERNAL_APIS && 
-                                <div className="h-10 flex items-center">
-                                    <Button text="Fetch" onClick={attemptFetchFlight} disabled={!flightNumber} />
-                                </div>
-                            }
-                        </div>
-                        <div>
-                            <Label text="Connection" />
-                            <FetchConnection name="connection"
-                                             date={date}
-                                             origin={origin?.icao}
-                                             destination={destination?.icao}
-                                             value={connection}
-                                             onFetched={(c: number) => setConnection(c)} />
                         </div>
-                    </div>
-                </div>
+                    </PanelBody>
+                </Panel>
+            </div>
 
-                {currentUser?.isAdmin && allUsernames && (
-                    <div className="px-4 pb-2">
-                        <Label text="Add flight for users" />
-                        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mt-2">
-                            {allUsernames.map((username) => (
-                                <label key={username} className="flex items-center gap-2">
-                                    <input
-                                        type="checkbox"
-                                        checked={selectedUsernames.includes(username)}
-                                        onChange={() => setSelectedUsernames((prev) => {
-                                            if (prev.includes(username)) return prev.filter(u => u !== username);
-                                            return [...prev, username];
-                                        })}
-                                    />
-                                    <span>{username}</span>
-                                </label>
-                            ))}
+            {/* Travelers */}
+            <Panel>
+                <PanelHeader>
+                    <PanelTitle>
+                        {isAdmin ? 'Travelers' : 'Your details'}
+                    </PanelTitle>
+                    {isAdmin && (
+                        <span className="board-label text-ink-muted">
+                            {Object.keys(travelers).length} selected
+                        </span>
+                    )}
+                </PanelHeader>
+                <PanelBody className="space-y-4">
+                    {isAdmin && otherUsers.length > 0 && (
+                        <div>
+                            <Label>Log this flight for</Label>
+                            <div className="flex flex-wrap gap-2 mt-1">
+                                {me && (
+                                    <Badge variant="accent">
+                                        {me.username} (you)
+                                    </Badge>
+                                )}
+                                {otherUsers.map((u) => {
+                                    const selected = !!travelers[u]
+                                    return (
+                                        <button
+                                            type="button"
+                                            key={u}
+                                            onClick={() => toggleTraveler(u)}
+                                            className={
+                                                selected
+                                                    ? 'inline-flex items-center px-2 py-0.5 font-mono uppercase tracking-board text-[10px] border bg-accent-soft border-accent-deep text-ink hover:bg-accent'
+                                                    : 'inline-flex items-center px-2 py-0.5 font-mono uppercase tracking-board text-[10px] border bg-paper border-rule text-ink-muted hover:border-ink hover:text-ink'
+                                            }
+                                        >
+                                            {u}
+                                        </button>
+                                    )
+                                })}
+                            </div>
                         </div>
+                    )}
 
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-4">
-                            {selectedUsernames.map((selectedUsername) => (
-                                <div key={selectedUsername} className="container">
-                                    <div className="font-medium mb-2">Traveler: {selectedUsername}</div>
-                                    <TravelerFields username={selectedUsername} />
+                    <div className="space-y-4">
+                        {Object.entries(travelers).map(([username, extras]) => (
+                            <div key={username} className="border border-rule p-4">
+                                <div className="board-label mb-3">
+                                    Traveler: <span className="text-ink">{username}</span>
                                 </div>
-                            ))}
-                        </div>
+                                <TravelerForm
+                                    extras={extras}
+                                    onChange={(p) => updateTraveler(username, p)}
+                                />
+                            </div>
+                        ))}
                     </div>
-                )}
+                </PanelBody>
+            </Panel>
 
-                {!currentUser?.isAdmin && currentUser && (
-                    <div className="px-4 pb-2">
-                        <div className="container">
-                            <TravelerFields username={currentUser.username} />
-                        </div>
-                    </div>
-                )}
+            {error && (
+                <div className="border border-danger bg-danger-soft/40 text-danger px-3 py-2 text-sm font-mono">
+                    {error}
+                </div>
+            )}
+
+            <div className="flex items-center justify-end gap-2 sticky bottom-0 bg-paper/95 backdrop-blur border-t border-rule -mx-4 md:-mx-6 px-4 md:px-6 py-3">
+                <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => navigate(-1)}
+                    disabled={submitting}
+                >
+                    Cancel
+                </Button>
+                <Button type="submit" variant="accent" size="lg" disabled={submitting}>
+                    {submitting ? 'Saving…' : 'Save flight'}
+                </Button>
+            </div>
+        </form>
+    )
+}
 
-                <div className="px-4 pb-4">
-                    <Button
-                        text="Done"
-                        submit
-                    />
+function TravelerForm({
+    extras,
+    onChange,
+}: {
+    extras: TravelerExtras
+    onChange: (p: Partial<TravelerExtras>) => void
+}) {
+    return (
+        <div className="space-y-3">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                <div>
+                    <Label>Seat</Label>
+                    <Select
+                        value={extras.seat}
+                        onChange={(e) => onChange({ seat: e.target.value })}
+                    >
+                        {SEAT_OPTIONS.map((o) => (
+                            <option key={o} value={o}>
+                                {o || 'Choose'}
+                            </option>
+                        ))}
+                    </Select>
+                </div>
+                <div>
+                    <Label>Side</Label>
+                    <Select
+                        value={extras.aircraftSide}
+                        onChange={(e) => onChange({ aircraftSide: e.target.value })}
+                    >
+                        {AIRCRAFT_SIDES.map((o) => (
+                            <option key={o} value={o}>
+                                {o || 'Choose'}
+                            </option>
+                        ))}
+                    </Select>
+                </div>
+                <div>
+                    <Label>Class</Label>
+                    <Select
+                        value={extras.ticketClass}
+                        onChange={(e) => onChange({ ticketClass: e.target.value })}
+                    >
+                        {CLASSES.map((o) => (
+                            <option key={o} value={o}>
+                                {o || 'Choose'}
+                            </option>
+                        ))}
+                    </Select>
                 </div>
-            </form>
-        </>
-    );
+                <div>
+                    <Label>Purpose</Label>
+                    <Select
+                        value={extras.purpose}
+                        onChange={(e) => onChange({ purpose: e.target.value })}
+                    >
+                        {PURPOSES.map((o) => (
+                            <option key={o} value={o}>
+                                {o || 'Choose'}
+                            </option>
+                        ))}
+                    </Select>
+                </div>
+            </div>
+            <div>
+                <Label>Notes</Label>
+                <textarea
+                    rows={2}
+                    maxLength={150}
+                    placeholder="Type here..."
+                    value={extras.notes}
+                    onChange={(e) => onChange({ notes: e.target.value })}
+                    className="w-full bg-paper border border-rule px-3 py-2 font-mono text-sm focus:border-ink focus:outline-none"
+                />
+            </div>
+        </div>
+    )
 }
diff --git a/client/pages/Settings.tsx b/client/pages/Settings.tsx
index 5be6c96..f8d45f3 100644
--- a/client/pages/Settings.tsx
+++ b/client/pages/Settings.tsx
@@ -1,328 +1,604 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import API, { ENABLE_EXTERNAL_APIS } from '../api';
-import { Heading, Label, Input, Checkbox, Subheading, Button, Dialog, Select } from '../components/Elements'
-import { useToast } from '../components/Toast';
-import ConfigStorage, { ConfigInterface } from '../storage/configStorage';
-import { User } from '../models';
-import TokenStorage from '../storage/tokenStorage';
-
-interface UserInfoProps {
-    user: User;
-    isSelf?: boolean;
+import { useEffect, useState, type FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+    LogOut,
+    Trash2,
+    Pencil,
+    Upload,
+    Download,
+    Plus,
+    PlayCircle,
+} from 'lucide-react'
+
+import API, { ENABLE_EXTERNAL_APIS } from '@/api'
+import { useCurrentUser, useUsernames } from '@/lib/queries'
+import ConfigStorage, { type ConfigInterface } from '@/storage/configStorage'
+import TokenStorage from '@/storage/tokenStorage'
+import type { User } from '@/models'
+
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs'
+import { ColumnsManager } from '@/components/settings/ColumnsManager'
+import { Panel, PanelHeader, PanelTitle, PanelBody } from '@/components/ui/Panel'
+import { Switch } from '@/components/ui/Switch'
+import { Button } from '@/components/ui/Button'
+import { Input } from '@/components/ui/Input'
+import { Label } from '@/components/ui/Label'
+import { Select } from '@/components/ui/Select'
+import { Dialog } from '@/components/ui/Dialog'
+import { Badge } from '@/components/ui/Badge'
+import { DataBlock } from '@/components/ui/DataBlock'
+import { Spinner } from '@/components/ui/Spinner'
+
+interface PrefDef {
+    key: keyof ConfigInterface
+    label: string
+    description: string
 }
-function UserInfo({user, isSelf = false} : UserInfoProps) {
-    const editUser = async (event) => {
-        let userPatchData = Object.fromEntries(new FormData(event.currentTarget));
-        userPatchData = Object.fromEntries(Object.entries(userPatchData).filter(([_, v]) => v != ""));
-
-        // if admin status not updated, dont include it in the patch data
-        if ("isAdmin" in userPatchData && userPatchData["isAdmin"] === user.isAdmin.toString()) {
-            delete userPatchData["isAdmin"];
-        }
-
-        if (Object.keys(userPatchData).length === 0) {
-            return;
-        }
 
-        await API.patch(`/users/${user.username}`, userPatchData);
+const PREFS: PrefDef[] = [
+    {
+        key: 'metricUnits',
+        label: 'Metric units',
+        description: 'Use kilometers instead of miles for distance.',
+    },
+    {
+        key: 'localAirportTime',
+        label: 'Local airport timezone',
+        description: 'Compute flight duration using each airport\'s local time.',
+    },
+    {
+        key: 'showVisitedCountries',
+        label: 'Highlight visited countries',
+        description: 'Fill visited countries on the world map.',
+    },
+    {
+        key: 'frequencyBasedMarker',
+        label: 'Frequency-based markers',
+        description: 'Scale airport markers on the map by visit count.',
+    },
+    {
+        key: 'frequencyBasedLine',
+        label: 'Frequency-based flight lines',
+        description: 'Scale flight path thickness by trip frequency.',
+    },
+]
 
-        window.location.reload();
-    }
-
-    const logout = () => {
-        TokenStorage.clearToken();
-        window.location.href = "/login";
-    }
-
-    const deleteUser = async () => {
-        if (confirm("Are you sure? All flights associated with this user will also be removed.")) {
-            await API.delete(`/users/${user.username}`);
-            window.location.reload();
-        }
-    }
+export default function Settings() {
+    const { data: me } = useCurrentUser()
 
     return (
-        <>
-            <p>Username: <span>{user.username}</span></p>
-            <p>Admin: <span>{user.isAdmin.toString()}</span></p>
-            <p>Last login: <span>{user.lastLogin}</span></p>
-            <p>Created on: <span>{user.createdOn}</span></p>
-
-            <Dialog title="Edit User"
-                    formBody={(
+        <div className="max-w-5xl mx-auto p-4 md:p-6">
+            <h1 className="font-mono uppercase tracking-board text-base mb-4">Settings</h1>
+
+            <Tabs defaultValue="preferences">
+                <TabsList>
+                    <TabsTrigger value="preferences">Preferences</TabsTrigger>
+                    <TabsTrigger value="table">Flights table</TabsTrigger>
+                    <TabsTrigger value="data">Import / Export</TabsTrigger>
+                    <TabsTrigger value="account">Account</TabsTrigger>
+                    {me?.isAdmin && (
+                        <>
+                            <TabsTrigger value="users">Users</TabsTrigger>
+                            <TabsTrigger value="jobs">Jobs</TabsTrigger>
+                        </>
+                    )}
+                </TabsList>
+
+                <TabsContent value="preferences">
+                    <PreferencesPanel />
+                </TabsContent>
+                <TabsContent value="table">
+                    <Panel>
+                        <PanelHeader>
+                            <PanelTitle>Columns on All Flights</PanelTitle>
+                        </PanelHeader>
+                        <PanelBody>
+                            <ColumnsManager />
+                        </PanelBody>
+                    </Panel>
+                </TabsContent>
+                <TabsContent value="data">
+                    <DataPanel />
+                </TabsContent>
+                <TabsContent value="account">
+                    <AccountPanel me={me} />
+                </TabsContent>
+                {me?.isAdmin && (
                     <>
-                        <Label text="New Username"/>
-                        <Input type="text" name="username" placeholder={user.username}/>
-                        { isSelf ?
-                            <></>
-                            :
-                            <>
-                            <br />
-                            <Label text="New Admin Status"/>
-                            <Select name="isAdmin" options={[
-                                {
-                                    text: user.isAdmin.toString(),
-                                    value: user.isAdmin.toString()
-                                },
-                                {
-                                    text: (!user.isAdmin).toString(),
-                                    value: (!user.isAdmin).toString()
-                                }
-                            ]} />
-                            </>
-                        }
-                        <br />
-                        <Label text="New Password"/>
-                        <Input type="password" name="password"/>
+                        <TabsContent value="users">
+                            <UsersPanel me={me} />
+                        </TabsContent>
+                        <TabsContent value="jobs">
+                            <JobsPanel />
+                        </TabsContent>
                     </>
-                    )}
-                    onSubmit={editUser}/>
-
-            { isSelf ?
-                <Button text="Logout" level="danger" onClick={logout}/>
-                :
-                <Button text="Delete" level="danger" onClick={deleteUser}/>
-            }
-        </>
+                )}
+            </Tabs>
+        </div>
     )
 }
 
-export default function Settings() {
-    const [options, setOptions] = useState<ConfigInterface>(ConfigStorage.getAllSettings())
-    const [user, setUser] = useState<User>();
-    const [allUsers, setAllUsers] = useState<User[]>([]);
-    const [disableJobs, setDisableJobs] = useState(false);
-    const navigate = useNavigate();
-    const { showToast } = useToast();
-
-    useEffect(() => {
-        API.get("/users/me")
-        .then((data: User) => {
-            setUser(data);
-
-            if (data.isAdmin) {
-                API.get("/users")
-                .then((users: string[]) => {
-                    for (let u of users) {
-                        if (u === data.username) continue; // skip self
-
-                        API.get(`/users/${u}/details`)
-                        .then((user) => {
-                            setAllUsers(prevAllUsers => {
-                                return [...prevAllUsers, user];
-                            });
-                        });
-                    }
-                });
-            }
-        });
-    }, []);
-
-    const handleImportSubmit = (event) => {
-        event.preventDefault();
-        const formData = new FormData(event.currentTarget);
+// ---------- Preferences ----------
 
-        for(const pair of formData.entries()) {
-            const file = pair[1];
+function PreferencesPanel() {
+    const [opts, setOpts] = useState<ConfigInterface>(() => ConfigStorage.getAllSettings())
 
-            if(file instanceof Blob && file.size > 0) {
-                var sendFormData = new FormData();
-                sendFormData.append('file', file);
-                API.post(`/importing?csv_type=${pair[0]}`, sendFormData)
-                .then(() => navigate("/"));
-            }
-        }
+    const toggle = (key: keyof ConfigInterface, value: boolean) => {
+        const v = value.toString()
+        ConfigStorage.setSetting(key, v)
+        setOpts({ ...opts, [key]: v })
     }
 
-    const handleExportClick = (exportType: string) => {
-        if(exportType === "csv") {
-            API.post("/exporting/csv", {}, true);
-        } else if(exportType === "ical") {
-            API.post("/exporting/ical", {}, true);
+    return (
+        <Panel>
+            <PanelBody className="divide-y divide-rule p-0">
+                {PREFS.map((p) => (
+                    <div
+                        key={p.key}
+                        className="flex items-start justify-between gap-4 px-4 py-4"
+                    >
+                        <div className="min-w-0">
+                            <Label className="mb-0.5">{p.label}</Label>
+                            <p className="text-xs text-ink-muted font-mono">
+                                {p.description}
+                            </p>
+                        </div>
+                        <Switch
+                            checked={opts[p.key] === 'true'}
+                            onCheckedChange={(v) => toggle(p.key, v)}
+                            aria-label={p.label}
+                        />
+                    </div>
+                ))}
+            </PanelBody>
+        </Panel>
+    )
+}
+
+// ---------- Import / Export ----------
+
+function DataPanel() {
+    const navigate = useNavigate()
+    const [importing, setImporting] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    const handleImport = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        setError(null)
+        const formData = new FormData(e.currentTarget)
+        const entries = Array.from(formData.entries()).filter(
+            ([, v]) => v instanceof Blob && (v as Blob).size > 0,
+        )
+        if (entries.length === 0) {
+            setError('Please choose at least one file.')
+            return
+        }
+        setImporting(true)
+        try {
+            for (const [type, file] of entries) {
+                const fd = new FormData()
+                fd.append('file', file as Blob)
+                await API.post(`/importing?csv_type=${type}`, fd)
+            }
+            navigate('/')
+        } finally {
+            setImporting(false)
         }
     }
 
-    const changeOption = (event) => {
-        const key = event.target.name;
-        const value = event.target.checked.toString();
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <Panel>
+                <PanelHeader>
+                    <PanelTitle>Import flights</PanelTitle>
+                </PanelHeader>
+                <PanelBody>
+                    <form onSubmit={handleImport} className="space-y-4">
+                        <div>
+                            <Label>MyFlightRadar24</Label>
+                            <Input type="file" name="myflightradar24" accept=".csv" />
+                        </div>
+                        <div>
+                            <Label>Flighty</Label>
+                            <Input type="file" name="flighty" accept=".csv" />
+                        </div>
+                        <div>
+                            <Label>Custom CSV</Label>
+                            <Input type="file" name="custom" accept=".csv" />
+                        </div>
+                        {error && (
+                            <p className="text-xs font-mono text-danger">{error}</p>
+                        )}
+                        <Button type="submit" variant="accent" disabled={importing}>
+                            <Upload size={13} />
+                            {importing ? 'Importing…' : 'Import'}
+                        </Button>
+                    </form>
+                </PanelBody>
+            </Panel>
+
+            <Panel>
+                <PanelHeader>
+                    <PanelTitle>Export flights</PanelTitle>
+                </PanelHeader>
+                <PanelBody className="space-y-3">
+                    <p className="text-xs text-ink-muted font-mono">
+                        Download all your logged flights in one of the formats below.
+                    </p>
+                    <div className="flex flex-col sm:flex-row gap-2">
+                        <Button
+                            variant="outline"
+                            onClick={() => API.post('/exporting/csv', {}, true)}
+                            className="flex-1"
+                        >
+                            <Download size={13} /> Export CSV
+                        </Button>
+                        <Button
+                            variant="outline"
+                            onClick={() => API.post('/exporting/ical', {}, true)}
+                            className="flex-1"
+                        >
+                            <Download size={13} /> Export iCal
+                        </Button>
+                    </div>
+                </PanelBody>
+            </Panel>
+        </div>
+    )
+}
 
-        setOptions({...options, [key]: value})
-        ConfigStorage.setSetting(key, value);
-    }
+// ---------- Account ----------
 
-    const createUser = async (event) => {
-        let userData = Object.fromEntries(new FormData(event.currentTarget));
-        await API.post("/users", userData);
+function AccountPanel({ me }: { me?: User }) {
+    const [editOpen, setEditOpen] = useState(false)
+    if (!me) return <Spinner />
 
-        window.location.reload();
+    const logout = () => {
+        TokenStorage.clearToken()
+        window.location.href = '/login'
     }
 
-    const computeConnections = async () => {
-        setDisableJobs(true);
-
-        API.post("/flights/connections", {})
-        .then((data: object) => {
-            showToast(`Connections computed: ${data["amountUpdated"]} updated, ${data["amountSkipped"]} skipped`, 'success');
-            setDisableJobs(false);
-        });
-    }
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <Panel>
+                <PanelHeader>
+                    <PanelTitle>Your account</PanelTitle>
+                    {me.isAdmin && <Badge variant="accent">Admin</Badge>}
+                </PanelHeader>
+                <PanelBody className="grid grid-cols-2 gap-4">
+                    <DataBlock label="Username" value={me.username} />
+                    <DataBlock label="Admin" value={me.isAdmin ? 'Yes' : 'No'} />
+                    <DataBlock label="Last login" value={me.lastLogin || '—'} />
+                    <DataBlock label="Created" value={me.createdOn || '—'} />
+                </PanelBody>
+            </Panel>
+
+            <Panel>
+                <PanelHeader>
+                    <PanelTitle>Actions</PanelTitle>
+                </PanelHeader>
+                <PanelBody className="space-y-2">
+                    <Button
+                        variant="outline"
+                        className="w-full justify-start"
+                        onClick={() => setEditOpen(true)}
+                    >
+                        <Pencil size={13} /> Edit account
+                    </Button>
+                    <Button
+                        variant="danger"
+                        className="w-full justify-start"
+                        onClick={logout}
+                    >
+                        <LogOut size={13} /> Log out
+                    </Button>
+                </PanelBody>
+            </Panel>
+
+            <EditUserDialog
+                open={editOpen}
+                onOpenChange={setEditOpen}
+                user={me}
+                isSelf
+            />
+        </div>
+    )
+}
 
-    const fetchAirlinesFromCallsigns = async () => {
-        setDisableJobs(true);
+// ---------- Users (admin) ----------
+
+function useAllUserDetails(usernames: string[] | undefined, selfUsername?: string) {
+    return useQuery({
+        queryKey: ['users', 'details', usernames, selfUsername],
+        queryFn: async () => {
+            if (!usernames) return []
+            const others = usernames.filter((u) => u !== selfUsername)
+            return Promise.all(others.map((u) => API.get(`/users/${u}/details`) as Promise<User>))
+        },
+        enabled: !!usernames,
+    })
+}
 
-        API.post("/flights/airlines_from_callsigns", {})
-        .then((data: object) => {
-            showToast(`Airlines fetched: ${data["amountUpdated"]} updated, ${data["amountSkipped"]} skipped`, 'success');
-            setDisableJobs(false);
-        })
-    }
+function UsersPanel({ me }: { me: User }) {
+    const { data: usernames } = useUsernames()
+    const { data: users, isLoading } = useAllUserDetails(usernames, me.username)
+    const [createOpen, setCreateOpen] = useState(false)
 
     return (
-    <>
-        <Heading text="Settings" />
+        <div className="space-y-4">
+            <div className="flex items-center justify-between">
+                <p className="board-label text-ink-muted">
+                    {users?.length ?? 0} other users
+                </p>
+                <Button variant="accent" size="sm" onClick={() => setCreateOpen(true)}>
+                    <Plus size={13} /> New user
+                </Button>
+            </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
-            <div className="container">
-                <Subheading text="Import"/>
+            {isLoading ? (
+                <div className="flex justify-center py-10">
+                    <Spinner />
+                </div>
+            ) : !users || users.length === 0 ? (
+                <Panel>
+                    <PanelBody className="text-center text-ink-muted text-sm py-10 font-mono">
+                        No other users.
+                    </PanelBody>
+                </Panel>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {users.map((u) => (
+                        <UserCard key={u.username} user={u} />
+                    ))}
+                </div>
+            )}
 
-                <form onSubmit={handleImportSubmit}>
-                    <Label text="MyFlightRadar24" />
-                    <Input type="file" name="myflightradar24" />
+            <CreateUserDialog open={createOpen} onOpenChange={setCreateOpen} />
+        </div>
+    )
+}
 
-                    <Label text="Flighty" />
-                    <Input type="file" name="flighty" />
+function UserCard({ user }: { user: User }) {
+    const qc = useQueryClient()
+    const [editOpen, setEditOpen] = useState(false)
 
-                    <Label text="Custom CSV" />
-                    <Input type="file" name="custom" />
+    const handleDelete = async () => {
+        if (!confirm(`Delete user "${user.username}" and all their flights?`)) return
+        await API.delete(`/users/${user.username}`)
+        qc.invalidateQueries({ queryKey: ['users'] })
+    }
 
-                    <br />
-                    <Button text="Import" level="success" submit/>
-                </form>
-            </div>
-            
-            <div className="container">
-                <Subheading text="Export"/>
+    return (
+        <Panel>
+            <PanelHeader>
+                <PanelTitle>{user.username}</PanelTitle>
+                {user.isAdmin && <Badge variant="accent">Admin</Badge>}
+            </PanelHeader>
+            <PanelBody className="space-y-3">
+                <div className="grid grid-cols-2 gap-3">
+                    <DataBlock label="Last login" value={user.lastLogin || '—'} />
+                    <DataBlock label="Created" value={user.createdOn || '—'} />
+                </div>
+                <div className="flex gap-2 pt-2 border-t border-rule">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        className="flex-1"
+                        onClick={() => setEditOpen(true)}
+                    >
+                        <Pencil size={13} /> Edit
+                    </Button>
+                    <Button
+                        variant="danger"
+                        size="sm"
+                        className="flex-1"
+                        onClick={handleDelete}
+                    >
+                        <Trash2 size={13} /> Delete
+                    </Button>
+                </div>
+            </PanelBody>
+            <EditUserDialog open={editOpen} onOpenChange={setEditOpen} user={user} />
+        </Panel>
+    )
+}
 
-                <Button text="Export to CSV" onClick={() => handleExportClick("csv")}/>
-                <br />
-                <Button text="Export to iCal" onClick={() => handleExportClick("ical")}/>
-            </div>
+interface EditUserDialogProps {
+    user: User
+    open: boolean
+    onOpenChange: (o: boolean) => void
+    isSelf?: boolean
+}
 
-            <div className="container">
-                <Subheading text="Customization" />
+function EditUserDialog({ user, open, onOpenChange, isSelf }: EditUserDialogProps) {
+    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        const fd = Object.fromEntries(new FormData(e.currentTarget))
+        const patch: Record<string, string> = {}
+        for (const [k, v] of Object.entries(fd)) {
+            if (typeof v !== 'string' || !v) continue
+            patch[k] = v
+        }
+        if (patch.isAdmin === user.isAdmin.toString()) delete patch.isAdmin
+        if (Object.keys(patch).length === 0) {
+            onOpenChange(false)
+            return
+        }
+        await API.patch(`/users/${user.username}`, patch)
+        window.location.reload()
+    }
 
-                <div className="flex justify-between">
-                    <Label text="Frequency based marker size" />
-                    <Checkbox name="frequencyBasedMarker" 
-                                checked={options.frequencyBasedMarker === "true"} 
-                                onChange={changeOption} />
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange} title={`Edit ${user.username}`}>
+            <form onSubmit={handleSubmit} className="space-y-3">
+                <div>
+                    <Label>New username</Label>
+                    <Input name="username" placeholder={user.username} />
                 </div>
-
-                <div className="flex justify-between">
-                    <Label text="Frequency based line size" />
-                    <Checkbox name="frequencyBasedLine" 
-                                checked={options.frequencyBasedLine === "true"} 
-                                onChange={changeOption} />
+                {!isSelf && (
+                    <div>
+                        <Label>Admin</Label>
+                        <Select name="isAdmin" defaultValue={user.isAdmin.toString()}>
+                            <option value="false">No</option>
+                            <option value="true">Yes</option>
+                        </Select>
+                    </div>
+                )}
+                <div>
+                    <Label>New password</Label>
+                    <Input name="password" type="password" placeholder="Leave blank to keep current" />
                 </div>
-
-                <div className="flex justify-between">
-                    <Label text="Show visited countries" />
-                    <Checkbox name="showVisitedCountries" 
-                                checked={options.showVisitedCountries === "true"} 
-                                onChange={changeOption} />
+                <div className="flex justify-end gap-2 pt-3 border-t border-rule">
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onOpenChange(false)}
+                    >
+                        Cancel
+                    </Button>
+                    <Button type="submit" variant="accent" size="sm">
+                        Save
+                    </Button>
                 </div>
+            </form>
+        </Dialog>
+    )
+}
 
-                <div className="flex justify-between">
-                    <Label text="Use metric units" />
-                    <Checkbox name="metricUnits" 
-                                checked={options.metricUnits === "true"} 
-                                onChange={changeOption} />
-                </div>
+function CreateUserDialog({
+    open,
+    onOpenChange,
+}: {
+    open: boolean
+    onOpenChange: (o: boolean) => void
+}) {
+    const qc = useQueryClient()
+    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        const data = Object.fromEntries(new FormData(e.currentTarget))
+        await API.post('/users', data)
+        qc.invalidateQueries({ queryKey: ['users'] })
+        onOpenChange(false)
+    }
 
-                <div className="flex justify-between">
-                    <Label text="Use airport timezones for duration" />
-                    <Checkbox name="localAirportTime" 
-                                checked={options.localAirportTime === "true"} 
-                                onChange={changeOption} />
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange} title="Create user">
+            <form onSubmit={handleSubmit} className="space-y-3">
+                <div>
+                    <Label required>Username</Label>
+                    <Input name="username" required />
                 </div>
-
-                <div className="flex justify-between">
-                    <Label text="Restrict world map to visited areas" />
-                    <Checkbox name="restrictWorldMap"
-                                checked={options.restrictWorldMap === "true"}
-                                onChange={changeOption} />
-
+                <div>
+                    <Label required>Admin</Label>
+                    <Select name="isAdmin" defaultValue="false">
+                        <option value="false">No</option>
+                        <option value="true">Yes</option>
+                    </Select>
                 </div>
-
-                <hr />
-
-                <Subheading text="Utilities" />
-
-                <div className="flex justify-between">
-                    <Label text="Compute flight connections" />
-                    <Button text="Run" disabled={disableJobs} onClick={computeConnections} />
+                <div>
+                    <Label required>Password</Label>
+                    <Input name="password" type="password" required />
+                </div>
+                <div className="flex justify-end gap-2 pt-3 border-t border-rule">
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onOpenChange(false)}
+                    >
+                        Cancel
+                    </Button>
+                    <Button type="submit" variant="accent" size="sm">
+                        Create
+                    </Button>
                 </div>
+            </form>
+        </Dialog>
+    )
+}
 
-                { ENABLE_EXTERNAL_APIS && 
-                    <div className="flex justify-between">
-                        <Label text="Fetch missing airlines" />
-                        <Button text="Run" disabled={disableJobs} onClick={fetchAirlinesFromCallsigns} />
-                    </div>
-                }
-            </div>
+// ---------- Jobs (admin) ----------
+
+function JobsPanel() {
+    const [running, setRunning] = useState<string | null>(null)
+    const [result, setResult] = useState<string | null>(null)
+
+    const run = async (job: 'connections' | 'airlines', label: string) => {
+        setRunning(label)
+        setResult(null)
+        try {
+            const endpoint =
+                job === 'connections'
+                    ? '/flights/connections'
+                    : '/flights/airlines_from_callsigns'
+            const data = await API.post(endpoint, {})
+            setResult(
+                `${label}: ${data?.amountUpdated ?? 0} updated, ${
+                    data?.amountSkipped ?? 0
+                } skipped`,
+            )
+        } finally {
+            setRunning(null)
+        }
+    }
 
+    return (
+        <Panel>
+            <PanelHeader>
+                <PanelTitle>Maintenance jobs</PanelTitle>
+            </PanelHeader>
+            <PanelBody className="space-y-3">
+                <JobRow
+                    label="Compute flight connections"
+                    description="Find return/onward connections between existing flights."
+                    onRun={() => run('connections', 'Connections')}
+                    running={running === 'Connections'}
+                    disabled={!!running}
+                />
+                {ENABLE_EXTERNAL_APIS && (
+                    <JobRow
+                        label="Fetch missing airlines"
+                        description="Look up airlines for flights with a callsign but no airline."
+                        onRun={() => run('airlines', 'Airlines')}
+                        running={running === 'Airlines'}
+                        disabled={!!running}
+                    />
+                )}
+                {result && (
+                    <div className="mt-2 border border-ok bg-paper-soft/40 text-ok px-3 py-2 text-xs font-mono">
+                        {result}
+                    </div>
+                )}
+            </PanelBody>
+        </Panel>
+    )
+}
 
-            <div className="container">
-                <Subheading text="You"/>
-                { user === undefined ?
-                    <p>Loading...</p>
-                    :
-                    <UserInfo user={user} isSelf/>
-                }
+interface JobRowProps {
+    label: string
+    description: string
+    onRun: () => void
+    running: boolean
+    disabled: boolean
+}
+function JobRow({ label, description, onRun, running, disabled }: JobRowProps) {
+    return (
+        <div className="flex items-start justify-between gap-4 py-3 border-b border-rule last:border-b-0">
+            <div className="min-w-0 flex-1">
+                <Label className="mb-0.5">{label}</Label>
+                <p className="text-xs text-ink-muted font-mono">{description}</p>
             </div>
-
-            { user === undefined || !user.isAdmin ?
-                <></>
-                :
-                allUsers === undefined ?
-                    <p>Loading...</p>
-                    :
-                    <>
-                        <div className="container w-full">
-                            <Subheading text="User Management"/>
-                            <div className="grid gap-3">
-                                {allUsers.map((u) => (
-                                    <div className="border-gray-500 border p-2">
-                                        <UserInfo user={u}/>
-                                    </div> 
-                                ))}
-                            </div>
-                            <Dialog 
-                                title="Create User" 
-                                buttonLevel="success" 
-                                onSubmit={createUser} 
-                                formBody={(
-                                    <>
-                                        <Label text="Username" required/>
-                                        <Input type="text" name="username" required/>
-                                        <br />
-                                        <Label text="Admin Status" required/>
-                                        <Select name="isAdmin" options={[
-                                            { text: "false", value: "false" },
-                                            { text: "true", value: "true" }
-                                        ]} />
-                                        <br />
-                                        <Label text="Password" required/>
-                                        <Input type="text" name="password" required/>
-                                    </>
-                                )}
-                            />
-                        </div>
-                    </>
-            }
+            <Button
+                variant="outline"
+                size="sm"
+                onClick={onRun}
+                disabled={disabled}
+            >
+                <PlayCircle size={13} />
+                {running ? 'Running…' : 'Run'}
+            </Button>
         </div>
-    </>
-    );
+    )
 }
diff --git a/client/pages/Statistics.tsx b/client/pages/Statistics.tsx
index 401405d..c632217 100644
--- a/client/pages/Statistics.tsx
+++ b/client/pages/Statistics.tsx
@@ -1,51 +1,388 @@
-import React, { useState }from 'react';
+import { useMemo, useState } from 'react'
+import { Filter, X } from 'lucide-react'
 
-import {Heading, Label, Input, Dialog} from '../components/Elements'
-import UserSelect from '../components/UserSelect';
-import { AllStats } from '../components/Stats';
+import {
+    useCurrentUser,
+    useFlights,
+    useStatistics,
+    useUsernames,
+    type StatsFilters,
+} from '@/lib/queries'
+import ConfigStorage from '@/storage/configStorage'
+import type { Flight } from '@/models'
 
-import { objectFromForm } from '../utils';
+import { Panel, PanelHeader, PanelTitle, PanelBody } from '@/components/ui/Panel'
+import { Badge } from '@/components/ui/Badge'
+import { Button } from '@/components/ui/Button'
+import { Sheet } from '@/components/ui/Sheet'
+import { Input } from '@/components/ui/Input'
+import { Label } from '@/components/ui/Label'
+import { Select } from '@/components/ui/Select'
+import { Spinner } from '@/components/ui/Spinner'
+import { SplitFlap } from '@/components/ui/SplitFlap'
+import {
+    FrequencyBarChart,
+    FrequencyDonut,
+    FlightsPerMonthChart,
+    CumulativeDistanceChart,
+} from '@/components/stats/Charts'
 
-interface StatisticsFilters {
-    start?: string;
-    end?: string;
-    username?: string;
+function formatNum(n: number) {
+    return n.toLocaleString('en-US')
+}
+
+function StatCell({ label, value, unit, delay = 0 }: { label: string; value: string; unit?: string; delay?: number }) {
+    return (
+        <div className="px-5 py-4 border-r border-rule last:border-r-0 flex-1 min-w-[140px]">
+            <div className="board-label mb-2">{label}</div>
+            <div className="flex items-baseline gap-1.5">
+                <span className="font-mono font-semibold text-3xl md:text-4xl text-ink tabular-nums leading-none">
+                    <SplitFlap value={value} delay={delay} />
+                </span>
+                {unit && <span className="board-label">{unit}</span>}
+            </div>
+        </div>
+    )
 }
-export default function Statistics() {
-    const [filters, setFilters] = useState<StatisticsFilters>();
 
-    const saveFilters = (event) => {
-        event.preventDefault();
+interface FiltersSheetProps {
+    open: boolean
+    onOpenChange: (o: boolean) => void
+    filters: StatsFilters
+    onApply: (f: StatsFilters) => void
+    isAdmin: boolean
+    selfUsername?: string
+}
 
-        const newFilters = objectFromForm(event);
+function FiltersSheet({
+    open,
+    onOpenChange,
+    filters,
+    onApply,
+    isAdmin,
+    selfUsername,
+}: FiltersSheetProps) {
+    const { data: usernames } = useUsernames()
+    const [draft, setDraft] = useState<StatsFilters>(filters)
 
-        if (newFilters === null) {
-            return;
+    return (
+        <Sheet open={open} onOpenChange={onOpenChange} title="Filter statistics">
+            <div className="space-y-4">
+                <div>
+                    <Label>Start date</Label>
+                    <Input
+                        type="date"
+                        value={draft.start ?? ''}
+                        onChange={(e) => setDraft({ ...draft, start: e.target.value })}
+                    />
+                </div>
+                <div>
+                    <Label>End date</Label>
+                    <Input
+                        type="date"
+                        value={draft.end ?? ''}
+                        onChange={(e) => setDraft({ ...draft, end: e.target.value })}
+                    />
+                </div>
+                {isAdmin && (
+                    <div>
+                        <Label>User</Label>
+                        <Select
+                            value={draft.username ?? selfUsername ?? ''}
+                            onChange={(e) =>
+                                setDraft({ ...draft, username: e.target.value || undefined })
+                            }
+                        >
+                            {usernames?.map((u) => (
+                                <option key={u} value={u}>
+                                    {u === selfUsername ? `${u} (you)` : u}
+                                </option>
+                            ))}
+                        </Select>
+                    </div>
+                )}
+                <div className="flex gap-2 pt-4 border-t border-rule">
+                    <Button
+                        variant="outline"
+                        className="flex-1"
+                        onClick={() => {
+                            setDraft({})
+                            onApply({})
+                            onOpenChange(false)
+                        }}
+                    >
+                        Clear
+                    </Button>
+                    <Button
+                        variant="accent"
+                        className="flex-1"
+                        onClick={() => {
+                            const clean: StatsFilters = {}
+                            for (const [k, v] of Object.entries(draft)) {
+                                if (v) (clean as any)[k] = v
+                            }
+                            onApply(clean)
+                            onOpenChange(false)
+                        }}
+                    >
+                        Apply
+                    </Button>
+                </div>
+            </div>
+        </Sheet>
+    )
+}
+
+const MONTH_ABBR = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+]
+
+function formatMonthLabel(yyyyMM: string): string {
+    const [year, month] = yyyyMM.split('-')
+    const mIdx = Math.max(0, Math.min(11, Number(month) - 1))
+    return `${MONTH_ABBR[mIdx]} '${year.slice(2)}`
+}
+
+function useTimeline(flights: Flight[] | undefined) {
+    return useMemo(() => {
+        if (!flights || flights.length === 0) return []
+        const buckets = new Map<string, { flights: number; distance: number }>()
+        for (const f of flights) {
+            if (!f.date) continue
+            const month = f.date.slice(0, 7)
+            const cur = buckets.get(month) ?? { flights: 0, distance: 0 }
+            cur.flights += 1
+            cur.distance += f.distance || 0
+            buckets.set(month, cur)
         }
+        const months = Array.from(buckets.keys()).sort()
+        let cumulative = 0
+        return months.map((m) => {
+            const b = buckets.get(m)!
+            cumulative += b.distance
+            return {
+                label: formatMonthLabel(m),
+                flights: b.flights,
+                cumulative,
+            }
+        })
+    }, [flights])
+}
+
+type RecentUnit = '' | 'days' | 'weeks' | 'months' | 'years'
+
+function computeRecentStart(amount: number, unit: RecentUnit): string | undefined {
+    if (!amount || !unit) return undefined
+    const d = new Date()
+    if (unit === 'days') d.setDate(d.getDate() - amount)
+    else if (unit === 'weeks') d.setDate(d.getDate() - amount * 7)
+    else if (unit === 'months') d.setMonth(d.getMonth() - amount)
+    else if (unit === 'years') d.setFullYear(d.getFullYear() - amount)
+    return d.toISOString().slice(0, 10)
+}
+
+function RecentSpanFilter({
+    amount,
+    unit,
+    onChange,
+}: {
+    amount: string
+    unit: RecentUnit
+    onChange: (amount: string, unit: RecentUnit) => void
+}) {
+    return (
+        <div className="flex items-center gap-2 flex-wrap">
+            <span className="board-label text-ink-muted shrink-0">Last</span>
+            <Input
+                type="number"
+                min={1}
+                placeholder="—"
+                value={amount}
+                onChange={(e) => onChange(e.target.value, unit)}
+                className="h-8 w-16 px-2 text-center"
+            />
+            <Select
+                value={unit}
+                onChange={(e) => onChange(amount, e.target.value as RecentUnit)}
+                className="h-8 w-auto min-w-[100px]"
+            >
+                <option value="">—</option>
+                <option value="days">days</option>
+                <option value="weeks">weeks</option>
+                <option value="months">months</option>
+                <option value="years">years</option>
+            </Select>
+            {(!amount || !unit) && (
+                <span className="text-xs font-mono text-ink-faint hidden sm:inline">
+                    all time
+                </span>
+            )}
+        </div>
+    )
+}
 
-        setFilters(newFilters);
-        //event.target.reset();
+export default function Statistics() {
+    const metric = ConfigStorage.getSetting('metricUnits') !== 'false'
+    const { data: me } = useCurrentUser()
+    const [filters, setFilters] = useState<StatsFilters>({})
+    const [filtersOpen, setFiltersOpen] = useState(false)
+    const [recentAmount, setRecentAmount] = useState('')
+    const [recentUnit, setRecentUnit] = useState<RecentUnit>('')
+
+    const setRecent = (amount: string, unit: RecentUnit) => {
+        setRecentAmount(amount)
+        setRecentUnit(unit)
+        const n = Number(amount)
+        const start = computeRecentStart(n, unit)
+        setFilters((f) => ({ ...f, start, end: start ? undefined : f.end }))
     }
 
+    // Always lock to a single user. Admins can pick another via filters.
+    const effectiveUsername = filters.username ?? me?.username
+    const queryFilters: StatsFilters = { ...filters, username: effectiveUsername, metric }
+
+    const { data: stats, isLoading } = useStatistics(queryFilters, {
+        enabled: !!effectiveUsername,
+    } as any)
+    const { data: flights } = useFlights({ ...queryFilters, limit: 5000 })
+    const timeline = useTimeline(flights)
+
+    const activeCount =
+        (filters.start ? 1 : 0) +
+        (filters.end ? 1 : 0) +
+        (filters.username && filters.username !== me?.username ? 1 : 0)
+
     return (
-    <>
-        <Heading text="Statistics" />
-        <Dialog title="Filters"
-                formBody={(
+        <div className="max-w-7xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
+            <div className="flex items-center justify-between gap-3 flex-wrap">
+                <div className="flex items-center gap-4 flex-wrap">
+                    <h1 className="font-mono uppercase tracking-board text-base">Statistics</h1>
+                    <RecentSpanFilter
+                        amount={recentAmount}
+                        unit={recentUnit}
+                        onChange={setRecent}
+                    />
+                </div>
+                <div className="flex items-center gap-2 flex-wrap">
+                    {filters.start && (
+                        <Badge variant="accent" className="gap-1.5 pl-2 pr-1 py-1">
+                            From {filters.start}
+                            <button
+                                onClick={() => setFilters({ ...filters, start: undefined })}
+                                aria-label="Remove"
+                            >
+                                <X size={11} />
+                            </button>
+                        </Badge>
+                    )}
+                    {filters.end && (
+                        <Badge variant="accent" className="gap-1.5 pl-2 pr-1 py-1">
+                            To {filters.end}
+                            <button
+                                onClick={() => setFilters({ ...filters, end: undefined })}
+                                aria-label="Remove"
+                            >
+                                <X size={11} />
+                            </button>
+                        </Badge>
+                    )}
+                    {filters.username && filters.username !== me?.username && (
+                        <Badge variant="accent" className="gap-1.5 pl-2 pr-1 py-1">
+                            User {filters.username}
+                            <button
+                                onClick={() => setFilters({ ...filters, username: undefined })}
+                                aria-label="Remove"
+                            >
+                                <X size={11} />
+                            </button>
+                        </Badge>
+                    )}
+                    <Button variant="outline" size="sm" onClick={() => setFiltersOpen(true)}>
+                        <Filter size={13} />
+                        Filters
+                        {activeCount > 0 && (
+                            <span className="ml-1 bg-accent text-ink px-1.5 text-[10px] font-bold">
+                                {activeCount}
+                            </span>
+                        )}
+                    </Button>
+                </div>
+            </div>
+
+            {isLoading || !stats ? (
+                <div className="flex justify-center py-20">
+                    <Spinner />
+                </div>
+            ) : (
                 <>
-                    <Label text="Start Date" />
-                    <Input type="date" name="start" />
-                    <br />
-                    <Label text="End Date" />
-                    <Input type="date" name="end" />
-                    <br />
-                    <Label text="User" />
-                    <UserSelect />
+                    {/* Top counters */}
+                    <Panel className="overflow-x-auto">
+                        <div className="flex divide-x divide-rule min-w-max">
+                            <StatCell label="Flights" value={formatNum(stats.totalFlights)} delay={0} />
+                            <StatCell label="Airports" value={formatNum(stats.totalUniqueAirports)} delay={80} />
+                            <StatCell
+                                label="Hours"
+                                value={formatNum(Math.round(stats.totalDuration / 60))}
+                                delay={160}
+                            />
+                            <StatCell
+                                label="Distance"
+                                value={formatNum(stats.totalDistance)}
+                                unit={metric ? 'km' : 'mi'}
+                                delay={240}
+                            />
+                            <StatCell label="Countries" value={formatNum(stats.visitedCountries)} delay={320} />
+                            <StatCell label="Day range" value={formatNum(stats.daysRange)} unit="days" delay={400} />
+                        </div>
+                    </Panel>
+
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
+                        <FlightsPerMonthChart title="Flights per month" data={timeline} />
+                        <CumulativeDistanceChart
+                            title="Cumulative distance"
+                            data={timeline}
+                            metric={metric}
+                        />
+                    </div>
+
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
+                        <FrequencyBarChart
+                            title="Most visited airports"
+                            data={stats.mostVisitedAirports as any}
+                            label="visits"
+                        />
+                        <FrequencyBarChart
+                            title="Most common airlines"
+                            data={stats.mostCommonAirlines as any}
+                            label="flights"
+                        />
+                    </div>
+
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
+                        <FrequencyDonut
+                            title="Ticket class"
+                            data={stats.ticketClassFrequency as any}
+                        />
+                        <FrequencyDonut title="Seat" data={stats.seatFrequency as any} />
+                    </div>
+
+                    <FrequencyBarChart
+                        title="Most common countries"
+                        data={stats.mostCommonCountries as any}
+                        label="flights"
+                    />
                 </>
-                )}
-                onSubmit={saveFilters} />
+            )}
 
-        <AllStats filters={filters} />
-    </>
-    );
+            <FiltersSheet
+                open={filtersOpen}
+                onOpenChange={setFiltersOpen}
+                filters={filters}
+                onApply={setFilters}
+                isAdmin={!!me?.isAdmin}
+                selfUsername={me?.username}
+            />
+        </div>
+    )
 }
diff --git a/client/storage/columnsStorage.ts b/client/storage/columnsStorage.ts
new file mode 100644
index 0000000..381adca
--- /dev/null
+++ b/client/storage/columnsStorage.ts
@@ -0,0 +1,54 @@
+import { FLIGHT_COLUMNS, REQUIRED_COLUMN_IDS } from '@/lib/flightColumns'
+
+const STORAGE_KEY = 'flights.columns.v1'
+
+export interface ColumnPref {
+    id: string
+    visible: boolean
+}
+
+export function defaultPrefs(): ColumnPref[] {
+    return FLIGHT_COLUMNS.map((c) => ({ id: c.id, visible: c.defaultVisible || !!c.required }))
+}
+
+/**
+ * Load prefs from localStorage, then reconcile against the current column
+ * registry: drop unknown ids and append any new ones in their registry order
+ * so the feature stays self-healing across releases.
+ */
+export function loadColumnPrefs(): ColumnPref[] {
+    const known = new Set(FLIGHT_COLUMNS.map((c) => c.id))
+    let stored: ColumnPref[] = []
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY)
+        if (raw) stored = JSON.parse(raw)
+    } catch {
+        stored = []
+    }
+
+    const cleaned = stored.filter((p) => p && typeof p.id === 'string' && known.has(p.id))
+    const seen = new Set(cleaned.map((p) => p.id))
+
+    for (const c of FLIGHT_COLUMNS) {
+        if (!seen.has(c.id)) {
+            cleaned.push({ id: c.id, visible: c.defaultVisible || !!c.required })
+        }
+    }
+
+    // Ensure required columns are always visible.
+    for (const p of cleaned) {
+        if (REQUIRED_COLUMN_IDS.includes(p.id)) p.visible = true
+    }
+
+    return cleaned
+}
+
+export function saveColumnPrefs(prefs: ColumnPref[]): void {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs))
+}
+
+export function resetColumnPrefs(): ColumnPref[] {
+    const fresh = defaultPrefs()
+    saveColumnPrefs(fresh)
+    return fresh
+}
diff --git a/client/storage/configStorage.ts b/client/storage/configStorage.ts
index 53d670b..2be333d 100644
--- a/client/storage/configStorage.ts
+++ b/client/storage/configStorage.ts
@@ -5,14 +5,12 @@ export interface ConfigInterface {
     showVisitedCountries: string;
     metricUnits: string;
     localAirportTime: string;
-    restrictWorldMap: string;
 }
 const ConfigKeys = ["frequencyBasedMarker",
                     "frequencyBasedLine",
                     "showVisitedCountries",
                     "metricUnits",
-                    "localAirportTime",
-                    "restrictWorldMap"];
+                    "localAirportTime"];
 type Config = typeof ConfigKeys[number];
 
 const defaultConfig: ConfigInterface = {
@@ -21,7 +19,6 @@ const defaultConfig: ConfigInterface = {
     showVisitedCountries: "false",
     metricUnits: "true",
     localAirportTime: "true",
-    restrictWorldMap: "false",
 }
 
 class ConfigStorageClass {
diff --git a/client/style.css b/client/style.css
index 3ccc4f2..e496520 100644
--- a/client/style.css
+++ b/client/style.css
@@ -2,17 +2,80 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+    :root {
+        color-scheme: light;
+        --tnum: 'tnum' 1, 'lnum' 1;
+    }
+
+    /* Hide native number-input spinners. */
+    input[type='number']::-webkit-outer-spin-button,
+    input[type='number']::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    input[type='number'] {
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+
+    html,
+    body,
+    #app {
+        height: 100%;
+    }
+
+    body {
+        @apply bg-paper text-ink font-sans antialiased;
+        font-feature-settings: var(--tnum);
+    }
+
+    /* Subtle paper texture: faint horizontal scanlines */
+    body::before {
+        content: '';
+        position: fixed;
+        inset: 0;
+        pointer-events: none;
+        background-image: repeating-linear-gradient(
+            0deg,
+            rgba(20, 19, 15, 0.018) 0px,
+            rgba(20, 19, 15, 0.018) 1px,
+            transparent 1px,
+            transparent 3px
+        );
+        z-index: 1;
+    }
+
+    #app {
+        position: relative;
+        z-index: 2;
+    }
+
+    *:focus-visible {
+        @apply outline-none ring-2 ring-accent ring-offset-2 ring-offset-paper;
+    }
+
+    ::selection {
+        background-color: #f5c518;
+        color: #14130f;
+    }
+}
+
 @layer components {
-    .container {
-        @apply p-4 mr-5 mb-4 grow border border-gray-400 rounded shadow-md;
+    .board-label {
+        @apply font-mono uppercase tracking-board text-ink-muted text-[11px];
+    }
+
+    .board-value {
+        @apply font-mono tabular-nums text-ink;
     }
 
-    hr {
-        @apply w-full mb-4
+    .hairline {
+        @apply border-rule;
     }
 
-    span {
-        @apply font-mono text-primary-500
+    .panel {
+        @apply bg-paper border border-rule;
     }
 }
 
diff --git a/client/utils.ts b/client/utils.ts
deleted file mode 100644
index 4a06d06..0000000
--- a/client/utils.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export function objectFromForm(event) {
-    let object = Object.fromEntries(new FormData(event.currentTarget));
-    object = Object.fromEntries(Object.entries(object).filter(([_, v]) => v != ""));
-
-    if (Object.keys(object).length === 0) {
-        return null;
-    }
-
-    return object;
-}
diff --git a/package.json b/package.json
index ca34e52..c62f095 100644
--- a/package.json
+++ b/package.json
@@ -1,20 +1,36 @@
 {
     "name": "jetlog",
     "version": "1.1.5",
-    "source": "client/index.html",
+    "type": "module",
     "scripts": {
-        "build": "PARCEL_WORKERS=0 parcel build --public-url ./ --dist-dir dist",
-        "watch": "PARCEL_WORKERS=0 parcel watch --dist-dir dist"
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
     },
     "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@hookform/resolvers": "^3.9.0",
+        "@radix-ui/react-dialog": "^1.1.2",
+        "@radix-ui/react-popover": "^1.1.2",
+        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.1",
+        "@radix-ui/react-tabs": "^1.1.1",
+        "@tanstack/react-query": "^5.59.0",
+        "@tanstack/react-table": "^8.20.5",
         "axios": "^1.7.2",
-        "parcel": "^2.0.0",
-        "postcss": "^8.4.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.451.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-hook-form": "^7.53.0",
         "react-router-dom": "^6.24.0",
         "react-simple-maps": "^3.0.0",
-        "tailwindcss": "^3.4.4"
+        "recharts": "^2.13.0",
+        "tailwind-merge": "^2.5.2",
+        "zod": "^3.23.8"
     },
     "overrides": {
         "react-simple-maps": {
@@ -27,8 +43,14 @@
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/react-simple-maps": "^3.0.6",
-        "buffer": "^6.0.3",
-        "cssnano": "^7.0.4",
-        "process": "^0.11.10"
+        "@vitejs/plugin-react": "^4.3.2",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.47",
+        "tailwindcss": "^3.4.13",
+        "typescript": "^5.6.2",
+        "vite": "^5.4.8"
+    },
+    "allowScripts": {
+        "esbuild@0.21.5": true
     }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..d41ad63
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index bf7465d..87c3840 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,19 +1,70 @@
-const colors = require('tailwindcss/colors')
-
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-    mode: "jit",
-    content: [
-        "./client/**/*.{html,js,ts,tsx}"
-    ],
+export default {
+    content: ['./client/**/*.{html,js,ts,tsx}'],
     theme: {
         extend: {
             colors: {
-                primary: colors.yellow,
-                gray: colors.neutral,
-                danger: colors.red
+                paper: {
+                    DEFAULT: '#FAF7F0',
+                    soft: '#F3EFE3',
+                    stripe: '#F0EBDC',
+                },
+                ink: {
+                    DEFAULT: '#14130F',
+                    soft: '#3B392F',
+                    muted: '#76725F',
+                    faint: '#A8A48F',
+                },
+                rule: '#D9D2BC',
+                accent: {
+                    DEFAULT: '#F5C518',
+                    soft: '#FBE680',
+                    deep: '#C99A00',
+                },
+                danger: {
+                    DEFAULT: '#B23B2A',
+                    soft: '#E8B8B0',
+                },
+                ok: {
+                    DEFAULT: '#3E7A4F',
+                },
+            },
+            fontFamily: {
+                mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
+                sans: ['"Space Grotesk"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+            },
+            borderRadius: {
+                DEFAULT: '2px',
+                sm: '2px',
+                md: '4px',
+            },
+            boxShadow: {
+                paper: '0 1px 0 0 rgba(20, 19, 15, 0.06)',
+            },
+            letterSpacing: {
+                board: '0.12em',
+            },
+            keyframes: {
+                'flap-in': {
+                    '0%': { transform: 'rotateX(-90deg)', opacity: '0' },
+                    '60%': { transform: 'rotateX(10deg)', opacity: '1' },
+                    '100%': { transform: 'rotateX(0deg)', opacity: '1' },
+                },
+                'slide-in-right': {
+                    '0%': { transform: 'translateX(100%)' },
+                    '100%': { transform: 'translateX(0)' },
+                },
+                'fade-in': {
+                    '0%': { opacity: '0' },
+                    '100%': { opacity: '1' },
+                },
+            },
+            animation: {
+                'flap-in': 'flap-in 500ms cubic-bezier(0.4, 0, 0.2, 1)',
+                'slide-in-right': 'slide-in-right 220ms cubic-bezier(0.4, 0, 0.2, 1)',
+                'fade-in': 'fade-in 180ms ease-out',
             },
         },
     },
-    plugins: []
+    plugins: [],
 }
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..8445de9
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": false,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "strict": false,
+        "noUnusedLocals": false,
+        "noUnusedParameters": false,
+        "noFallthroughCasesInSwitch": true,
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["client/*"]
+        }
+    },
+    "include": ["client"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..ca310dd
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+
+export default defineConfig({
+    root: 'client',
+    base: './',
+    plugins: [react()],
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, 'client'),
+        },
+    },
+    build: {
+        outDir: '../dist',
+        emptyOutDir: true,
+        target: 'es2022',
+    },
+    server: {
+        port: 5173,
+        proxy: {
+            '^/api/': 'http://localhost:3000',
+            '/config': 'http://localhost:3000',
+        },
+    },
+})