diff --git a/web-ng/src/routes/+page.svelte b/web-ng/src/routes/+page.svelte
deleted file mode 100644
index 5982b0a..0000000
--- a/web-ng/src/routes/+page.svelte
+++ /dev/null
@@ -1,2 +0,0 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
diff --git a/web-ng/.eslintignore b/webif/.eslintignore
similarity index 100%
rename from web-ng/.eslintignore
rename to webif/.eslintignore
diff --git a/web-ng/.eslintrc.cjs b/webif/.eslintrc.cjs
similarity index 100%
rename from web-ng/.eslintrc.cjs
rename to webif/.eslintrc.cjs
diff --git a/web-ng/.gitignore b/webif/.gitignore
similarity index 100%
rename from web-ng/.gitignore
rename to webif/.gitignore
diff --git a/web-ng/.npmrc b/webif/.npmrc
similarity index 100%
rename from web-ng/.npmrc
rename to webif/.npmrc
diff --git a/web-ng/.prettierignore b/webif/.prettierignore
similarity index 100%
rename from web-ng/.prettierignore
rename to webif/.prettierignore
diff --git a/web-ng/.prettierrc b/webif/.prettierrc
similarity index 100%
rename from web-ng/.prettierrc
rename to webif/.prettierrc
diff --git a/web-ng/README.md b/webif/README.md
similarity index 100%
rename from web-ng/README.md
rename to webif/README.md
diff --git a/webif/eachwatt.css b/webif/eachwatt.css
deleted file mode 100644
index 36267ee..0000000
--- a/webif/eachwatt.css
+++ /dev/null
@@ -1,83 +0,0 @@
-*,
-html {
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
-
-html {
-    width: 100%;
-    height: 100%;
-}
-
-body {
-    width: 100%;
-    height: 100%;
-    position: relative;
-}
-
-div#container {
-    max-width: 1200px;
-    margin: 0 auto;
-    clear: both;
-}
-
-div#container-left,
-div#container-right,
-div#mains-power,
-div.mains-power-card,
-pre#configuration {
-    padding: 0.8em;
-    box-sizing: border-box;
-}
-
-h1, h2, p, table, img#logo, div#mains-power {
-    margin-bottom: 1em;
-}
-
-table {
-    width: 100%;
-}
-
-th, td {
-    text-align: left;
-    padding: 0 0.4em 0.4em 0;
-}
-
-th {
-    border-bottom: 1px solid #000;
-}
-
-.cell-right-align {
-    text-align: right;
-}
-
-div#container-left {
-    width: 30%;
-    float: left;
-}
-
-div#container-right {
-    width: 70%;
-    float: right;
-}
-
-pre#configuration {
-    background-color: #DDD;
-    overflow: hidden;
-}
-
-div#mains-power {
-    background-color: #DDD;
-}
-
-div.mains-power-card {
-    float: left;
-    width: 25%;
-    padding: 2em;
-    text-align: center;
-}
-
-div.mains-power-card span {
-    display: block;
-}
diff --git a/webif/eachwatt.js b/webif/eachwatt.js
deleted file mode 100644
index 99612e3..0000000
--- a/webif/eachwatt.js
+++ /dev/null
@@ -1,134 +0,0 @@
-const updateCharacteristicsSensorDataTable = (sensorData) => {
-  const table = document.querySelector('#characteristics-sensor-data')
-
-  let tableData = `
-        <th>Name</th>
-        <th>Phase</th>
-        <th class="cell-right-align">Voltage</th>
-        <th class="cell-right-align">Frequency</th>
-    `
-
-  tableData += sensorData.map((data) => {
-    const characteristics = data.characteristics
-    const voltage = data.voltage
-    const frequency = data.frequency
-
-    return `
-        <tr>
-            <td>${characteristics.name}</td>
-            <td>${characteristics.phase}</td>
-            <td class="cell-right-align">${voltage}V</td>
-            <td class="cell-right-align">${frequency}Hz</td>
-        </tr>
-      `
-  }).join('')
-
-  table.innerHTML = tableData
-}
-
-const updateMainsPowerSensorCards = (sensorData) => {
-  document.querySelector('#mains-power').innerHTML = sensorData.map((data) => {
-    return `
-      <div class="mains-power-card">
-        <label>${data.circuit.name}</label>
-        <span>${data.watts}W</span>
-      </div>
-    `
-  }).join('') + `
-    <div style="clear: both;"></div>
-  `
-}
-
-const updatePowerSensorDataTable = (sensorData) => {
-  const table = document.querySelector('#power-sensor-data')
-
-  let tableData = `
-        <tr>
-            <th>Circuit</th>
-            <th>Group</th>
-            <th>Circuit type</th>
-            <th>Sensor type</th>
-            <th class="cell-right-align">Power</th>
-        </tr>
-    `
-
-  tableData += sensorData.map((data) => {
-    return `
-        <tr>
-            <td>${data.circuit.name}</td>
-            <td>${data.circuit.group ?? ''}</td>
-            <td>${data.circuit.type}</td>
-            <td>${data.circuit.sensor.type}</td>
-            <td class="cell-right-align">${data.watts}W</td>
-        </tr>
-      `
-  }).join('')
-
-  table.innerHTML = tableData
-}
-
-const updateConfiguration = (config) => {
-  document.querySelector('#configuration').innerHTML = config
-}
-
-const updateLastUpdate = (webSocketUrl, timestamp) => {
-  const lastUpdate = new Date(timestamp)
-
-  document.querySelector('#last-update').innerHTML = `Last update: ${lastUpdate.toISOString()}, connected to ${webSocketUrl}`
-}
-
-const parseTimestamp = (sensorData) => {
-  return sensorData[0].timestamp
-}
-
-const determineWebSocketUrl = () => {
-  const urlParams = new URLSearchParams(window.location.search)
-
-  return urlParams.get('ws')
-}
-
-// Determine WebSocket URL from URL parameters
-const webSocketUrl = determineWebSocketUrl()
-const ws = new WebSocket(webSocketUrl)
-
-ws.addEventListener('open', () => {
-  console.log(`Connected to WebSocket at ${webSocketUrl}`)
-})
-
-ws.addEventListener('message', (event) => {
-  const data = event.data
-  const message = JSON.parse(data)
-
-  // Parse last update timestamp from sensor data messages
-  switch (message.type) {
-    case 'characteristicsSensorData':
-    case 'powerSensorData':
-      const timestamp = parseTimestamp(message.data)
-      updateLastUpdate(webSocketUrl, timestamp)
-      break
-  }
-
-  // Handle each message type
-  switch (message.type) {
-    case 'characteristicsSensorData':
-      updateCharacteristicsSensorDataTable(message.data)
-      break
-    case 'powerSensorData':
-      const mainsSensorData = message.data.filter((d) => {
-        // Filter out unmetered
-        return d.circuit.type === 'main' &&
-          d.circuit.sensor.type !== 'unmetered'
-      })
-
-      const circuitSensorData = message.data.filter((d) => {
-        return d.circuit.type === 'circuit'
-      })
-
-      updateMainsPowerSensorCards(mainsSensorData)
-      updatePowerSensorDataTable(message.data)
-      break
-    case 'configuration':
-      updateConfiguration(message.data)
-      break
-  }
-})
diff --git a/webif/index.html b/webif/index.html
deleted file mode 100644
index 492a356..0000000
--- a/webif/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>EachWatt</title>
-    <link rel="stylesheet" href="eachwatt.css">
-</head>
-<body>
-<div id="container">
-    <div id="container-left">
-        <img id="logo" src="eachwatt_logo.png" alt="EachWatt logo" />
-        <h2>Configuration</h2>
-        <pre id="configuration"></pre>
-    </div>
-    <div id="container-right">
-        <p id="last-update"></p>
-        <h2>Characteristics</h2>
-        <table id="characteristics-sensor-data"></table>
-        <h2>Mains power</h2>
-        <div id="mains-power"></div>
-        <h2>All circuits</h2>
-        <table id="power-sensor-data"></table>
-    </div>
-</div>
-<script type="text/javascript" src="eachwatt.js"></script>
-</body>
-</html>
diff --git a/web-ng/package-lock.json b/webif/package-lock.json
similarity index 100%
rename from web-ng/package-lock.json
rename to webif/package-lock.json
diff --git a/web-ng/package.json b/webif/package.json
similarity index 100%
rename from web-ng/package.json
rename to webif/package.json
diff --git a/web-ng/src/app.d.ts b/webif/src/app.d.ts
similarity index 100%
rename from web-ng/src/app.d.ts
rename to webif/src/app.d.ts
diff --git a/web-ng/src/app.html b/webif/src/app.html
similarity index 100%
rename from web-ng/src/app.html
rename to webif/src/app.html
diff --git a/webif/eachwatt_logo.png b/webif/src/lib/assets/eachwatt_logo.png
similarity index 100%
rename from webif/eachwatt_logo.png
rename to webif/src/lib/assets/eachwatt_logo.png
diff --git a/web-ng/src/lib/index.ts b/webif/src/lib/index.ts
similarity index 100%
rename from web-ng/src/lib/index.ts
rename to webif/src/lib/index.ts
diff --git a/webif/src/routes/+layout.svelte b/webif/src/routes/+layout.svelte
new file mode 100644
index 0000000..46c1470
--- /dev/null
+++ b/webif/src/routes/+layout.svelte
@@ -0,0 +1,56 @@
+<style>
+    :global(*),
+    :global(html) {
+        margin: 0;
+        padding: 0;
+        border: 0;
+    }
+
+    :global(html) {
+        width: 100%;
+        height: 100%;
+    }
+
+    :global(body) {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+
+    :global(h1),
+    :global(h2),
+    :global(p),
+    :global(table) {
+        margin-bottom: 1em;
+    }
+
+    :global(table) {
+        width: 100%;
+    }
+
+    :global(th),
+    :global(td) {
+        text-align: left;
+        padding: 0 0.4em 0.4em 0;
+    }
+
+    :global(th) {
+        border-bottom: 1px solid #000;
+    }
+
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        clear: both;
+    }
+
+    :global(.cell-right-align) {
+        text-align: right;
+    }
+</style>
+<svelte:head>
+    <title>EachWatt</title>
+</svelte:head>
+<div class="container">
+    <slot />
+</div>
diff --git a/webif/src/routes/+page.svelte b/webif/src/routes/+page.svelte
new file mode 100644
index 0000000..bc96afa
--- /dev/null
+++ b/webif/src/routes/+page.svelte
@@ -0,0 +1,95 @@
+<script>
+    import { onMount } from 'svelte'
+    import Logo from './Logo.svelte'
+    import Configuration from './Configuration.svelte'
+    import LastUpdate from './LastUpdate.svelte'
+    import Characteristics from './Characteristics.svelte'
+    import MainsPower from './MainsPower.svelte'
+    import Circuits from './Circuits.svelte'
+
+    let configuration
+    let webSocketUrl
+    let lastUpdateTimestamp
+    let characteristicsSensorData
+    let mainsSensorData
+    let circuitSensorData
+
+    const determineWebSocketUrl = () => {
+      const urlParams = new URLSearchParams(window.location.search)
+
+      return urlParams.get('ws')
+    }
+
+    const parseTimestamp = (sensorData) => {
+      return new Date(sensorData[0].timestamp)
+    }
+
+    onMount(() => {
+      // Determine WebSocket URL from URL parameters
+      webSocketUrl = determineWebSocketUrl()
+      const ws = new WebSocket(webSocketUrl)
+
+      ws.addEventListener('open', () => {
+        console.log(`Connected to WebSocket at ${webSocketUrl}`)
+      })
+
+      ws.addEventListener('message', (event) => {
+        const data = event.data
+        const message = JSON.parse(data)
+
+        // Parse last update timestamp from sensor data messages
+        switch (message.type) {
+          case 'characteristicsSensorData':
+          case 'powerSensorData':
+            lastUpdateTimestamp = parseTimestamp(message.data)
+            break
+        }
+
+        // Handle each message type
+        switch (message.type) {
+          case 'characteristicsSensorData':
+            characteristicsSensorData = message.data
+            break
+          case 'powerSensorData':
+            mainsSensorData = message.data.filter((d) => {
+              // Filter out unmetered
+              return d.circuit.type === 'main' &&
+                d.circuit.sensor.type !== 'unmetered'
+            })
+
+            circuitSensorData = message.data.filter((d) => {
+              return d.circuit.type === 'circuit'
+            })
+            break
+          case 'configuration':
+            configuration = message.data
+            break
+        }
+      })
+    })
+</script>
+<style>
+    .container-left {
+        width: 30%;
+        float: left;
+        padding: 0.8em;
+        box-sizing: border-box;
+    }
+
+    .container-right {
+        width: 70%;
+        float: right;
+        padding: 0.8em;
+        box-sizing: border-box;
+    }
+</style>
+<div class="container-left">
+    <Logo />
+    <Configuration configuration={configuration} />
+</div>
+<div class="container-right">
+    <LastUpdate lastUpdateTimestamp={lastUpdateTimestamp} webSocketUrl={webSocketUrl} />
+    <Characteristics sensorData={characteristicsSensorData} />
+    <MainsPower sensorData={mainsSensorData} />
+    <Circuits sensorData={circuitSensorData} />
+</div>
diff --git a/webif/src/routes/Characteristics.svelte b/webif/src/routes/Characteristics.svelte
new file mode 100644
index 0000000..ddc22e5
--- /dev/null
+++ b/webif/src/routes/Characteristics.svelte
@@ -0,0 +1,20 @@
+<script>
+    export let sensorData = []
+</script>
+<h2>Characteristics</h2>
+<table>
+    <tr>
+        <th>Name</th>
+        <th>Phase</th>
+        <th class="cell-right-align">Voltage</th>
+        <th class="cell-right-align">Frequency</th>
+    </tr>
+    {#each sensorData as data}
+        <tr>
+            <td>{data.characteristics.name}</td>
+            <td>{data.characteristics.phase}</td>
+            <td class="cell-right-align">{data.voltage}V</td>
+            <td class="cell-right-align">{data.frequency}Hz</td>
+        </tr>
+    {/each}
+</table>
diff --git a/webif/src/routes/Circuits.svelte b/webif/src/routes/Circuits.svelte
new file mode 100644
index 0000000..4974447
--- /dev/null
+++ b/webif/src/routes/Circuits.svelte
@@ -0,0 +1,22 @@
+<script>
+    export let sensorData = []
+</script>
+<h2>All circuits</h2>
+<table>
+    <tr>
+        <th>Circuit</th>
+        <th>Group</th>
+        <th>Circuit type</th>
+        <th>Sensor type</th>
+        <th class="cell-right-align">Power</th>
+    </tr>
+    {#each sensorData as data}
+        <tr>
+            <td>{data.circuit.name}</td>
+            <td>{data.circuit.group ?? ''}</td>
+            <td>{data.circuit.type}</td>
+            <td>{data.circuit.sensor.type}</td>
+            <td class="cell-right-align">{data.watts}W</td>
+        </tr>
+    {/each}
+</table>
diff --git a/webif/src/routes/Configuration.svelte b/webif/src/routes/Configuration.svelte
new file mode 100644
index 0000000..c861592
--- /dev/null
+++ b/webif/src/routes/Configuration.svelte
@@ -0,0 +1,15 @@
+<script>
+    export let configuration
+</script>
+<style>
+    pre {
+        padding: 0.8em;
+        box-sizing: border-box;
+        background-color: #DDD;
+        overflow: hidden;
+    }
+</style>
+<h2>Configuration</h2>
+<pre id="configuration">
+    {configuration}
+</pre>
diff --git a/webif/src/routes/LastUpdate.svelte b/webif/src/routes/LastUpdate.svelte
new file mode 100644
index 0000000..abc5a14
--- /dev/null
+++ b/webif/src/routes/LastUpdate.svelte
@@ -0,0 +1,6 @@
+<script>
+    export let lastUpdateTimestamp, webSocketUrl;
+</script>
+<p>
+    Last update: {lastUpdateTimestamp?.toISOString()}, connected to {webSocketUrl}
+</p>
diff --git a/webif/src/routes/Logo.svelte b/webif/src/routes/Logo.svelte
new file mode 100644
index 0000000..0da9970
--- /dev/null
+++ b/webif/src/routes/Logo.svelte
@@ -0,0 +1,9 @@
+<script>
+  import logo from '$lib/assets/eachwatt_logo.png'
+</script>
+<style>
+    img {
+        margin-bottom: 1em;
+    }
+</style>
+<img id="logo" src={logo} alt="EachWatt logo" />
diff --git a/webif/src/routes/MainsPower.svelte b/webif/src/routes/MainsPower.svelte
new file mode 100644
index 0000000..b4d6969
--- /dev/null
+++ b/webif/src/routes/MainsPower.svelte
@@ -0,0 +1,33 @@
+<script>
+    export let sensorData = []
+</script>
+<style>
+    .mains-power-cards {
+        padding: 0.8em;
+        box-sizing: border-box;
+        background-color: #DDD;
+        margin-bottom: 1em;
+    }
+
+    .mains-power-card {
+        padding: 0.8em;
+        box-sizing: border-box;
+        float: left;
+        width: 25%;
+        padding: 2em;
+        text-align: center;
+    }
+
+    .mains-power-card span {
+        display: block;
+    }
+</style>
+<div class="mains-power-cards">
+    {#each sensorData as data}
+        <div class="mains-power-card">
+            {data.circuit.name}
+            <span>{data.watts}W</span>
+        </div>
+    {/each}
+    <div style="clear: both;"></div>
+</div>
diff --git a/web-ng/static/favicon.png b/webif/static/favicon.png
similarity index 100%
rename from web-ng/static/favicon.png
rename to webif/static/favicon.png
diff --git a/web-ng/svelte.config.js b/webif/svelte.config.js
similarity index 100%
rename from web-ng/svelte.config.js
rename to webif/svelte.config.js
diff --git a/web-ng/tsconfig.json b/webif/tsconfig.json
similarity index 100%
rename from web-ng/tsconfig.json
rename to webif/tsconfig.json
diff --git a/web-ng/vite.config.ts b/webif/vite.config.ts
similarity index 100%
rename from web-ng/vite.config.ts
rename to webif/vite.config.ts