diff --git a/README.md b/README.md
index 6a310d8..489ea5a 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,9 @@ You can download the latest versions [here](https://nightly.link/floatplane/Mits
 #### Should I use a SPIFFS or LittleFS version?
 There are two incompatible filesystems for ESP8266/ESP32 - LittleFS and SPIFFS. LittleFS is the more modern filesystem and should be used by default. SPIFFS is supported for backwards compatibility when upgrading from older versions, but support will be removed at some point. If you know you need SPIFFS, use a firmware version with SPIFFS in the name. Don't worry, the upload page will try to warn you if you've picked incorrectly!
 
+### Testing web changes locally
+There's a simple webserver you can launch by running `scripts/webserver.rb`. It will render page templates with a fixed set of data, so it's not a true simulator - but it's helpful when iterating on frontend changes.
+
 ---
 ## Monitoring
 MitsuQTT exposes a `/metrics.json` endpoint that can be used to directly interrogate the state of the hardware. You can connect this to a tool like [Uptime Kuma](https://github.com/louislam/uptime-kuma) to watch for changes and publish alerts:
diff --git a/localhost:8000/css?version=89abcdef b/localhost:8000/css?version=89abcdef
deleted file mode 100644
index f85a122..0000000
--- a/localhost:8000/css?version=89abcdef
+++ /dev/null
@@ -1,618 +0,0 @@
-/* MVP.css v1.14 - https://github.com/andybrewer/mvp */
-/* Project-specific customizations are at the bottom */
-
-:root {
-    --active-brightness: 0.85;
-    --border-radius: 5px;
-    --box-shadow: 2px 2px 10px;
-    --color-accent: #118bee15;
-    --color-bg: #fff;
-    --color-bg-secondary: #e9e9e9;
-    --color-link: #118bee;
-    --color-secondary: #920de9;
-    --color-secondary-accent: #920de90b;
-    --color-shadow: #f4f4f4;
-    --color-table: #118bee;
-    --color-text: #000;
-    --color-text-secondary: #999;
-    --color-success: #47c266;
-    --color-danger: #e20d0d;
-    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-    --hover-brightness: 1.2;
-    --justify-important: center;
-    --justify-normal: left;
-    --line-height: 1.5;
-    --width-card: 285px;
-    --width-card-medium: 460px;
-    --width-card-wide: 800px;
-    --width-content: 1080px;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root[color-mode="user"] {
-        --color-accent: #0097fc4f;
-        --color-bg: #333;
-        --color-bg-secondary: #555;
-        --color-link: #0097fc;
-        --color-secondary: #e20de9;
-        --color-secondary-accent: #e20de94f;
-        --color-shadow: #bbbbbb20;
-        --color-table: #0097fc;
-        --color-text: #f7f7f7;
-        --color-text-secondary: #aaa;
-    }
-}
-
-html {
-    scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
-}
-
-/* Layout */
-article aside {
-    background: var(--color-secondary-accent);
-    border-left: 4px solid var(--color-secondary);
-    padding: 0.01rem 0.8rem;
-}
-
-body {
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-family: var(--font-family);
-    line-height: var(--line-height);
-    margin: 0;
-    overflow-x: hidden;
-    padding: 0;
-}
-
-footer,
-header,
-main {
-    margin: 0 auto;
-    max-width: var(--width-content);
-    padding: 3rem 1rem;
-}
-
-hr {
-    background-color: var(--color-bg-secondary);
-    border: none;
-    height: 1px;
-    margin: 4rem 0;
-    width: 100%;
-}
-
-section {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: var(--justify-important);
-}
-
-section img,
-article img {
-    max-width: 100%;
-}
-
-section pre {
-    overflow: auto;
-}
-
-section aside {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    margin: 1rem;
-    padding: 1.25rem;
-    width: var(--width-card);
-}
-
-section aside:hover {
-    box-shadow: var(--box-shadow) var(--color-bg-secondary);
-}
-
-[hidden] {
-    display: none;
-}
-
-/* Headers */
-article header,
-div header,
-main header {
-    padding-top: 0;
-}
-
-header {
-    text-align: var(--justify-important);
-}
-
-header a.buttonLink,
-header a b,
-header a em,
-header a i,
-header a strong {
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
-}
-
-header nav img {
-    margin: 1rem 0;
-}
-
-section header {
-    padding-top: 0;
-    width: 100%;
-}
-
-/* Nav */
-nav {
-    align-items: center;
-    display: flex;
-    font-weight: bold;
-    justify-content: space-between;
-    margin-bottom: 7rem;
-}
-
-nav ul {
-    list-style: none;
-    padding: 0;
-}
-
-nav ul li {
-    display: inline-block;
-    margin: 0 0.5rem;
-    position: relative;
-    text-align: left;
-}
-
-/* Nav Dropdown */
-nav ul li:hover ul {
-    display: block;
-}
-
-nav ul li ul {
-    background: var(--color-bg);
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    display: none;
-    height: auto;
-    left: -2px;
-    padding: .5rem 1rem;
-    position: absolute;
-    top: 1.7rem;
-    white-space: nowrap;
-    width: auto;
-    z-index: 1;
-}
-
-nav ul li ul::before {
-    /* fill gap above to make mousing over them easier */
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: -0.5rem;
-    height: 0.5rem;
-}
-
-nav ul li ul li,
-nav ul li ul li a {
-    display: block;
-}
-
-/* Typography */
-code,
-samp {
-    background-color: var(--color-accent);
-    border-radius: var(--border-radius);
-    color: var(--color-text);
-    display: inline-block;
-    margin: 0 0.1rem;
-    padding: 0 0.5rem;
-}
-
-details {
-    margin: 1.3rem 0;
-}
-
-details summary {
-    font-weight: bold;
-    cursor: pointer;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    line-height: var(--line-height);
-    text-wrap: balance;
-}
-
-mark {
-    padding: 0.1rem;
-}
-
-ol li,
-ul li {
-    padding: 0.2rem 0;
-}
-
-p {
-    margin: 0.75rem 0;
-    padding: 0;
-    width: 100%;
-}
-
-pre {
-    margin: 1rem 0;
-    max-width: var(--width-card-wide);
-    padding: 1rem 0;
-}
-
-pre code,
-pre samp {
-    display: block;
-    max-width: var(--width-card-wide);
-    padding: 0.5rem 2rem;
-    white-space: pre-wrap;
-}
-
-small {
-    color: var(--color-text-secondary);
-}
-
-sup {
-    background-color: var(--color-secondary);
-    border-radius: var(--border-radius);
-    color: var(--color-bg);
-    font-size: xx-small;
-    font-weight: bold;
-    margin: 0.2rem;
-    padding: 0.2rem 0.3rem;
-    position: relative;
-    top: -2px;
-}
-
-/* Links */
-a {
-    color: var(--color-link);
-    display: inline-block;
-    font-weight: bold;
-    text-decoration: underline;
-}
-
-a:active {
-    filter: brightness(var(--active-brightness));
-}
-
-a:hover {
-    filter: brightness(var(--hover-brightness));
-}
-
-a.buttonLink {
-    text-decoration: none;
-    box-sizing: border-box;
-}
-
-a.buttonLink,
-a b,
-a em,
-a i,
-a strong,
-button,
-input[type="submit"] {
-    border-radius: var(--border-radius);
-    display: inline-block;
-    font-size: medium;
-    font-weight: bold;
-    line-height: var(--line-height);
-    margin: 0.5rem 0;
-    padding: 1rem 2rem;
-}
-
-button,
-input[type="submit"] {
-    font-family: var(--font-family);
-}
-
-button:active,
-input[type="submit"]:active {
-    filter: brightness(var(--active-brightness));
-}
-
-button:hover,
-input[type="submit"]:hover {
-    cursor: pointer;
-    filter: brightness(var(--hover-brightness));
-}
-
-a b,
-a strong,
-button,
-input[type="submit"] {
-    background-color: var(--color-link);
-    border: 2px solid var(--color-link);
-    color: var(--color-bg);
-}
-
-a.buttonLink,
-a em,
-a i {
-    border: 2px solid var(--color-link);
-    border-radius: var(--border-radius);
-    color: var(--color-link);
-    display: inline-block;
-    padding: 1rem 2rem;
-}
-
-.bred {
-    border: 2px solid var(--color-danger);
-    border-radius: var(--border-radius);
-    background-color: var(--color-danger);
-    color: var(---color-bg);
-}
-
-.bgrn {
-    border: 2px solid var(--color-success);
-    background-color: var(--color-success);
-}
-
-article aside a {
-    color: var(--color-secondary);
-}
-
-/* Images */
-figure {
-    margin: 0;
-    padding: 0;
-}
-
-figure img {
-    max-width: 100%;
-}
-
-figure figcaption {
-    color: var(--color-text-secondary);
-}
-
-/* Forms */
-button:disabled,
-input:disabled {
-    background: var(--color-bg-secondary);
-    border-color: var(--color-bg-secondary);
-    color: var(--color-text-secondary);
-    cursor: not-allowed;
-}
-
-button[disabled]:hover,
-input[type="submit"][disabled]:hover {
-    filter: none;
-}
-
-form {
-    /* border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow); */
-    display: block;
-    max-width: var(--width-card-medium);
-    min-width: var(--width-card);
-    /* padding: 1.5rem; */
-    text-align: var(--justify-normal);
-}
-
-form header {
-    margin: 1.5rem 0;
-    padding: 1.5rem 0;
-}
-
-input,
-label,
-select,
-textarea {
-    display: block;
-    font-size: inherit;
-    /* max-width: var(--width-card-medium); */
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-    display: inline-block;
-}
-
-input[type="checkbox"]+label,
-input[type="radio"]+label {
-    display: inline-block;
-    font-weight: normal;
-    position: relative;
-    top: 1px;
-}
-
-input[type="range"] {
-    padding: 0.4rem 0;
-}
-
-input,
-select,
-textarea {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    margin-bottom: 1rem;
-    padding: 0.4rem 0.8rem;
-}
-
-input[type="text"],
-textarea {
-    width: calc(100% - 1.6rem);
-}
-
-input[readonly],
-textarea[readonly] {
-    background-color: var(--color-bg-secondary);
-}
-
-label {
-    font-weight: bold;
-    margin-bottom: 0.2rem;
-}
-
-/* Popups */
-dialog {
-    border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow) var(--color-shadow);
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 50%;
-    z-index: 999;
-}
-
-/* Tables */
-table {
-    /* border: 1px solid var(--color-bg-secondary);
-    border-radius: var(--border-radius);
-    border-spacing: 0; */
-    display: inline-block;
-    max-width: 100%;
-    overflow-x: auto;
-    padding: 0;
-    white-space: nowrap;
-}
-
-table td,
-table th,
-table tr {
-    padding: 0.4rem 0.8rem;
-    text-align: var(--justify-important);
-}
-
-table thead {
-    background-color: var(--color-table);
-    border-collapse: collapse;
-    border-radius: var(--border-radius);
-    color: var(--color-bg);
-    margin: 0;
-    padding: 0;
-}
-
-table thead tr:first-child th:first-child {
-    border-top-left-radius: var(--border-radius);
-}
-
-table thead tr:first-child th:last-child {
-    border-top-right-radius: var(--border-radius);
-}
-
-table thead th:first-child,
-table tr td:first-child {
-    text-align: var(--justify-normal);
-}
-
-table thead th:first-child,
-table tr td:first-child {
-    padding-left: 0rem;
-}
-
-/* table tr:nth-child(even) {
-    background-color: var(--color-accent);
-} */
-
-/* Quotes */
-blockquote {
-    display: block;
-    font-size: x-large;
-    line-height: var(--line-height);
-    margin: 1rem auto;
-    max-width: var(--width-card-medium);
-    padding: 1.5rem 1rem;
-    text-align: var(--justify-important);
-}
-
-blockquote footer {
-    color: var(--color-text-secondary);
-    display: block;
-    font-size: small;
-    line-height: var(--line-height);
-    padding: 1.5rem 0;
-}
-
-/* Scrollbars */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: rgb(202, 202, 232) auto;
-}
-
-*::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-}
-
-*::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-    background-color: rgb(202, 202, 232);
-    border-radius: 10px;
-}
-
-/* Project-specific customizations */
-header, main, footer {
-    padding: 1rem;
-    max-width: var(--width-card-medium);
-    min-width: var(--width-card);
-}
-
-a.buttonLink,
-a b,
-a em,
-a i,
-a strong,
-button,
-input[type="submit"] {
-    margin-right: 1rem;
-}
-
-form > button, form > a.buttonLink {
-    width: 100%;
-    max-width: var(--width-card-medium);
-    min-width: var(--width-card);
-}
-
-a.buttonLink {
-    text-align: center;
-    /* max-width: var(--width-card-medium);
-    min-width: var(--width-card); */
-}
-
-div.buttons {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 0rem 1rem;
-}
-
-div.buttons button, div.buttons a.buttonLink {
-    flex: 1 1 auto;
-    margin-right: 0rem;
-    max-width: var(--width-card-medium);
-    min-width: var(--width-card);
-}
-
-td.bold {
-    font-weight: bold;
-}
-
-td.left {
-    text-align: var(--justify-normal);
-}
-
-.wrap-text {
-    text-wrap: wrap;
-}
\ No newline at end of file
diff --git a/scripts/activate.sh b/scripts/activate.sh
new file mode 100755
index 0000000..1f8b410
--- /dev/null
+++ b/scripts/activate.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+if [[ -d "$HOME/.platformio/penv/bin" ]]; then
+    export PATH=$PATH:$HOME/.platformio/penv/bin
+    echo "Added PlatformIO tools to the path"
+    $SHELL
+else
+    echo "No PlatformIO installation detected"
+fi