diff --git a/package-lock.json b/package-lock.json
index 9ac6da4..cc42802 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "eachwatt",
       "version": "1.0.0",
+      "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@influxdata/influxdb-client": "^1.33.2",
diff --git a/package.json b/package.json
index b63ea7c..e6c0466 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,9 @@
   "author": "Sam Stenvall <neggelandia@gmail.com>",
   "license": "GPL-3.0-or-later",
   "scripts": {
+    "postinstall": "cd webif/ && npm install",
     "build": "rm -rf dist/* && npx tsc",
+    "build-all": "npm run build && cd webif/ && npm run build",
     "prettier": "prettier --write src/ tests/",
     "prettier-check": "prettier --check src/ tests/",
     "lint": "eslint 'src/**/*.ts'",
diff --git a/systemd/eachwatt.service b/systemd/eachwatt.service
index 3e622cd..d2e1917 100644
--- a/systemd/eachwatt.service
+++ b/systemd/eachwatt.service
@@ -5,7 +5,8 @@ After=network.target
 
 [Service]
 WorkingDirectory=/opt/eachwatt
-ExecStartPre=/usr/bin/npm run build
+ExecStartPre=/usr/bin/npm install
+ExecStartPre=/usr/bin/npm run build-all
 ExecStart=/usr/bin/node /opt/eachwatt/dist/eachwatt.js -c /etc/eachwatt/config.yml
 Restart=always
 RestartSec=5
diff --git a/webif/src/lib/stores.ts b/webif/src/lib/stores.ts
new file mode 100644
index 0000000..8b879b1
--- /dev/null
+++ b/webif/src/lib/stores.ts
@@ -0,0 +1,8 @@
+import { writable } from 'svelte/store'
+
+export const configurationStore = writable({})
+export const characteristicsStore = writable([])
+export const mainSensorDataStore = writable([])
+export const circuitSensorDataStore = writable([])
+export const lastUpdateTimestampStore = writable(undefined)
+export const webSocketUrlStore = writable(undefined)
diff --git a/webif/src/routes/+layout.svelte b/webif/src/routes/+layout.svelte
index a5204ae..09aef61 100644
--- a/webif/src/routes/+layout.svelte
+++ b/webif/src/routes/+layout.svelte
@@ -1,11 +1,80 @@
 <script>
     import 'purecss/build/pure.css'
+
+    import {
+      configurationStore,
+      characteristicsStore,
+      mainSensorDataStore,
+      circuitSensorDataStore,
+      lastUpdateTimestampStore,
+      webSocketUrlStore
+    } from '../lib/stores'
+    import { onMount } from 'svelte'
+    import { determineWebSocketUrl } from '../lib/websocket'
+
+    const parseTimestamp = (sensorData) => {
+      return new Date(sensorData[0].timestamp)
+    }
+
+    onMount(() => {
+      // Determine WebSocket URL from URL parameters
+      $webSocketUrlStore = determineWebSocketUrl()
+      const ws = new WebSocket($webSocketUrlStore)
+
+      ws.addEventListener('open', () => {
+        console.log(`Connected to WebSocket at ${$webSocketUrlStore}`)
+      })
+
+      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':
+            $lastUpdateTimestampStore = parseTimestamp(message.data)
+            break
+        }
+
+        // Handle each message type
+        switch (message.type) {
+          case 'characteristicsSensorData':
+            $characteristicsStore = message.data
+            break
+          case 'powerSensorData':
+            $mainSensorDataStore = message.data.filter((d) => {
+              // Filter out unmetered
+              return d.circuit.type === 'main' && d.circuit.sensor.type !== 'unmetered'
+            })
+
+            $circuitSensorDataStore = message.data
+            break
+          case 'configuration':
+            $configurationStore = message.data
+            break
+        }
+      })
+    })
 </script>
 <svelte:head>
   <title>EachWatt</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </svelte:head>
 <div class="pure-g container">
+  <div class="pure-u-1-1 l-box">
+    <nav class="pure-menu pure-menu-horizontal">
+      <ul class="pure-menu-list">
+        <li class="pure-menu-item">
+          <a href="/" class="pure-menu-link">Dashboard</a>
+        </li>
+        <li class="pure-menu-item">
+          <a href="/configuration" class="pure-menu-link">Configuration</a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+
   <slot />
 </div>
 
@@ -13,7 +82,7 @@
     :root {
         --background: #fff;
         --color: #222;
-        --table-background: #e0e0e0;
+        --component-background: #e0e0e0;
         --highlight-color: #ff3d00;
     }
 
@@ -21,16 +90,20 @@
         :root {
             --background: #272727;
             --color: #aaa;
-            --table-background: #3b3b3b;
+            --component-background: #3b3b3b;
             --highlight-color: #ff3d00;
         }
 
+        nav {
+            background-color: var(--component-background);
+        }
+
         /* pure-table overrides */
         :global(.pure-table) {
             border: 2px solid #424242;
         }
         :global(.pure-table thead) {
-            background-color: var(--table-background);
+            background-color: var(--component-background);
             color: var(--color);
         }
 
@@ -77,4 +150,15 @@
     :global(.l-box) {
         padding: 1em;
     }
+
+    /* pure-menu tweaks */
+    :global(.pure-menu-link) {
+      border-bottom: 2px solid var(--component-background);
+    }
+
+    :global(.pure-menu-link:hover) {
+        border-bottom: 2px solid var(--highlight-color);
+        background: inherit !important;
+    }
+    /* end pure-menu tweaks */
 </style>
diff --git a/webif/src/routes/+page.svelte b/webif/src/routes/+page.svelte
index 21ee6ca..3fec436 100644
--- a/webif/src/routes/+page.svelte
+++ b/webif/src/routes/+page.svelte
@@ -1,63 +1,14 @@
 <script>
-  import { onMount } from 'svelte'
-  import { determineWebSocketUrl } from '$lib/websocket'
+  import {
+    lastUpdateTimestampStore,
+    webSocketUrlStore
+  } from '../lib/stores'
 
   import LastUpdate from './LastUpdate.svelte'
   import Characteristics from './Characteristics.svelte'
   import MainsPower from './MainsPower.svelte'
   import Circuits from './Circuits.svelte'
   import Loader from './Loader.svelte'
-
-  let webSocketUrl
-  let lastUpdateTimestamp
-  let characteristicsSensorData
-  let mainsSensorData
-  let circuitSensorData
-
-  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
-          break
-        case 'configuration':
-          // configuration = message.data
-          break
-      }
-    })
-  })
 </script>
 
 <style>
@@ -66,24 +17,24 @@
   }
 </style>
 
-{#if lastUpdateTimestamp === undefined}
+{#if $lastUpdateTimestampStore === undefined}
   <div class="pure-u-1-8 l-box">
     <Loader />
   </div>
   <div class="pure-u-7-8 l-box">
-    <p class="connecting">Connecting to {webSocketUrl}</p>
+    <p class="connecting">Connecting to {$webSocketUrlStore}</p>
   </div>
 {:else}
   <div class="pure-u-1-1 l-box">
-    <LastUpdate {lastUpdateTimestamp} {webSocketUrl} />
+    <LastUpdate />
   </div>
   <div class="pure-u-1-1 l-box">
-    <Characteristics sensorData={characteristicsSensorData} />
+    <Characteristics />
   </div>
   <div class="pure-u-1-1 l-box">
-    <MainsPower sensorData={mainsSensorData} />
+    <MainsPower />
   </div>
   <div class="pure-u-1-1 l-box">
-    <Circuits sensorData={circuitSensorData} />
+    <Circuits />
   </div>
 {/if}
diff --git a/webif/src/routes/Characteristics.svelte b/webif/src/routes/Characteristics.svelte
index 7fbf4bd..aad2fec 100644
--- a/webif/src/routes/Characteristics.svelte
+++ b/webif/src/routes/Characteristics.svelte
@@ -1,5 +1,5 @@
 <script>
-  export let sensorData = []
+  import { characteristicsStore } from '../lib/stores'
 </script>
 
 <h2>Characteristics</h2>
@@ -13,7 +13,7 @@
     </tr>
   </thead>
   <tbody>
-    {#each sensorData as data}
+    {#each $characteristicsStore as data}
       <tr>
         <td>{data.characteristics.name}</td>
         <td>{data.characteristics.phase}</td>
diff --git a/webif/src/routes/Circuits.svelte b/webif/src/routes/Circuits.svelte
index 2d58865..7307bd5 100644
--- a/webif/src/routes/Circuits.svelte
+++ b/webif/src/routes/Circuits.svelte
@@ -1,7 +1,6 @@
 <script>
+  import { circuitSensorDataStore } from '../lib/stores'
   import { formatPf } from '../lib/format'
-
-  export let sensorData = []
 </script>
 
 <h2>All circuits</h2>
@@ -19,7 +18,7 @@
     </tr>
   </thead>
   <tbody>
-    {#each sensorData as data}
+    {#each $circuitSensorDataStore as data}
       <tr>
         <td>{data.circuit.name}</td>
         <td>{data.circuit.group ?? ''}</td>
diff --git a/webif/src/routes/Configuration.svelte b/webif/src/routes/Configuration.svelte
deleted file mode 100644
index 7de627f..0000000
--- a/webif/src/routes/Configuration.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  export let configuration
-</script>
-
-<h2>Configuration</h2>
-<pre id="configuration">{configuration}</pre>
-
-<style>
-  pre {
-    padding: 0.8em;
-    box-sizing: border-box;
-    background-color: #ddd;
-    overflow: hidden;
-  }
-</style>
diff --git a/webif/src/routes/LastUpdate.svelte b/webif/src/routes/LastUpdate.svelte
index 65cbdcd..6077538 100644
--- a/webif/src/routes/LastUpdate.svelte
+++ b/webif/src/routes/LastUpdate.svelte
@@ -1,5 +1,5 @@
 <script>
-  export let lastUpdateTimestamp, webSocketUrl
+  import { lastUpdateTimestampStore, webSocketUrlStore } from '../lib/stores'
 </script>
 
 <style>
@@ -9,5 +9,5 @@
 </style>
 
 <p>
-  Last update: {lastUpdateTimestamp?.toISOString()}, connected to {webSocketUrl}
+  Last update: {$lastUpdateTimestampStore?.toISOString()}, connected to {$webSocketUrlStore}
 </p>
diff --git a/webif/src/routes/MainsPower.svelte b/webif/src/routes/MainsPower.svelte
index 7fae0c6..c716336 100644
--- a/webif/src/routes/MainsPower.svelte
+++ b/webif/src/routes/MainsPower.svelte
@@ -1,9 +1,9 @@
 <script>
-  export let sensorData = []
+  import { mainSensorDataStore} from '../lib/stores'
 </script>
 
 <div class="mains-power-cards">
-  {#each sensorData as data}
+  {#each $mainSensorDataStore as data}
     <div class="mains-power-card">
       <h4>{data.circuit.name}</h4>
       <span>{data.power}W</span>
@@ -22,7 +22,7 @@
   .mains-power-cards {
     padding: 0.8em;
     box-sizing: border-box;
-    background-color: var(--table-background);
+    background-color: var(--component-background);
     margin-bottom: 1em;
   }
 
diff --git a/webif/src/routes/configuration/+page.svelte b/webif/src/routes/configuration/+page.svelte
new file mode 100644
index 0000000..8fa3fcf
--- /dev/null
+++ b/webif/src/routes/configuration/+page.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { configurationStore } from '../../lib/stores'
+</script>
+
+<div class="pure-u-1-1 l-box">
+  <h2>Configuration</h2>
+  <pre id="configuration">{$configurationStore}</pre>
+</div>
+
+<style>
+    pre {
+        padding: 0.8em;
+        box-sizing: border-box;
+        background-color: var(--component-background);
+        overflow: hidden;
+    }
+</style>
+