diff --git a/.gitignore b/.gitignore
index ae239dd..2ebe419 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,4 @@ dist/yarn-error.log
 .histoire/dist
 dist
 src/lib/components/__image_snapshots__/__diff_output__/
+.histoire/dist
diff --git a/.histoire/dist/__sandbox.html b/.histoire/dist/__sandbox.html
deleted file mode 100644
index d0b0be4..0000000
--- a/.histoire/dist/__sandbox.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Histoire</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="description" content="">
-  <link rel="stylesheet" href="/assets/style-7abbff26.css">
-    
-    
-</head>
-<body>
-  <div id="app"></div>
-    <script type="module" src="/assets/bundle-sandbox-5de41e5f.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/.histoire/dist/index.html b/.histoire/dist/index.html
deleted file mode 100644
index 2bdbfc3..0000000
--- a/.histoire/dist/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Histoire</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="description" content="">
-  <link rel="stylesheet" href="/assets/style-7abbff26.css">
-    
-    <link rel="preload" href="/assets/vendor-5d606883.js" as="script" crossOrigin="anonymous">
-</head>
-<body>
-  <div id="app"></div>
-    <script type="module" src="/assets/bundle-main-2dc03f26.js"></script>
-</body>
-</html>
\ No newline at end of file
diff --git a/.histoire/screenshots/src-lib-components-shipedit-propulsion-engine-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipedit-propulsion-engine-story-svelte-_default-1280x800.png
index 0b8cf6a..bff1768 100644
Binary files a/.histoire/screenshots/src-lib-components-shipedit-propulsion-engine-story-svelte-_default-1280x800.png and b/.histoire/screenshots/src-lib-components-shipedit-propulsion-engine-story-svelte-_default-1280x800.png differ
diff --git a/.histoire/screenshots/src-lib-components-shipedit-propulsion-story-svelte-_default-1280x800.png b/.histoire/screenshots/src-lib-components-shipedit-propulsion-story-svelte-_default-1280x800.png
index 2647d0e..112c982 100644
Binary files a/.histoire/screenshots/src-lib-components-shipedit-propulsion-story-svelte-_default-1280x800.png and b/.histoire/screenshots/src-lib-components-shipedit-propulsion-story-svelte-_default-1280x800.png differ
diff --git a/src/lib/components/MainLayout.svelte b/src/lib/components/MainLayout.svelte
new file mode 100644
index 0000000..fc22854
--- /dev/null
+++ b/src/lib/components/MainLayout.svelte
@@ -0,0 +1,28 @@
+<header>
+  <nav>
+    <h1>
+      <a>The Docks</a>
+    </h1>
+    <h3 class="max">a Full Thrust ship builder</h3>
+    <a>About</a>
+    <span>&nbsp;</span>
+  </nav>
+</header>
+<main class="responsive">
+  <slot />
+</main>
+
+<script>
+  import "$lib/style/index.js";
+</script>
+
+<style>
+  header nav {
+    align-items: baseline;
+    font-family: "Faktos";
+  }
+  h3 {
+    font-size: var(--font-scale-12);
+    font-weight: normal;
+  }
+</style>
diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-4-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-4-snap.png
index 0b8cf6a..bff1768 100644
Binary files a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-4-snap.png and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-4-snap.png differ
diff --git a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-6-snap.png b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-6-snap.png
index 2647d0e..112c982 100644
Binary files a/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-6-snap.png and b/src/lib/components/__image_snapshots__/screenshots-test-ts-src-lib-components-screenshots-test-ts-image-snapshot-6-snap.png differ
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..7a041ca
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,12 @@
+<Layout>
+  <slot />
+</Layout>
+
+<script>
+  import { setContext } from "svelte";
+
+  import { createApi } from "$lib/store/api.ts";
+  import Layout from "$lib/components/MainLayout.svelte";
+
+  setContext("api", createApi());
+</script>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8c3d41a..1333ed7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1 @@
-<App />
-
-<script>
-  import { setContext } from "svelte";
-
-  import "$lib/style/index.js";
-  import shipStore from "$lib/store/ship.js";
-
-  import App from "$lib/components/App.svelte";
-
-  setContext("ship", shipStore());
-</script>
+TODO
diff --git a/src/routes/about/+layout.svelte b/src/routes/about/+layout.svelte
new file mode 100644
index 0000000..6e2f9f4
--- /dev/null
+++ b/src/routes/about/+layout.svelte
@@ -0,0 +1,23 @@
+<nav class="m l left">
+  <a>
+    <i>Question_Mark</i>
+    <span>About</span>
+  </a>
+  <!-- TODO
+    <a>
+      <i>Quiz</i>
+      <span>See also</span>
+    </a>
+    <a>
+      <i>Format_List_Bulleted</i>
+      <span>Changelog</span>
+    </a>
+    -->
+</nav>
+<slot />
+
+<style>
+  nav {
+    margin-top: 70px;
+  }
+</style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 643ceee..90b9b49 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,82 +1,39 @@
-<header>
-  <nav>
-    <h1>
-      <a>The Docks</a>
-    </h1>
-    <h3 class="max">a Full Thrust ship builder</h3>
-    <a>About</a>
-    <span>&nbsp;</span>
-  </nav>
-</header>
-<main class="responsive">
-  <nav class="m l left">
-    <a>
-      <i>Question_Mark</i>
-      <span>About</span>
-    </a>
-    <!-- TODO
-    <a>
-      <i>Quiz</i>
-      <span>See also</span>
-    </a>
-    <a>
-      <i>Format_List_Bulleted</i>
-      <span>Changelog</span>
-    </a>
-    -->
-  </nav>
-  <h2>Welcome to the docks!</h2>
+<h2>Welcome to the docks!</h2>
 
-  <!-- TODO
+<!-- TODO
   <p class="version">
     <span>version {import.meta.env.PACKAGE_VERSION}</span>
     <a>changelog</a>
   </p>
   -->
 
-  <p>
-    The Docks is a ship builder for the game
-    <a href="https://shop.groundzerogames.co.uk/rules.html" class="helper"
-      >Full Thrust</a
-    >, with construction rules following the
-    <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
-      Cross Dimensions rules
-    </a>
-    as closely as possible.
-  </p>
+<p>
+  The Docks is a ship builder for the game
+  <a href="https://shop.groundzerogames.co.uk/rules.html" class="helper"
+    >Full Thrust</a
+  >, with construction rules following the
+  <a href="http://members.ozemail.com.au/~laranzu/fullthrust/rules/">
+    Cross Dimensions rules
+  </a>
+  as closely as possible.
+</p>
 
-  <p>
-    The app is mostly developed for Firefox. I also check as much as I can that
-    I don't mess things too badly on Chrome. For the other browsers... caveat
-    emptor.
-  </p>
+<p>
+  The app is mostly developed for Firefox. I also check as much as I can that I
+  don't mess things too badly on Chrome. For the other browsers... caveat
+  emptor.
+</p>
 
-  <p>
-    Written by
-    <!-- TODO change link -->
-    <a href="https://techblog.babyl.ca">Yanick Champoux</a>
-    . Code available on
-    <!-- TODO read the url from package.json -->
-    <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
-  </p>
-</main>
-
-<script>
-  import "$lib/style/index.js";
-</script>
+<p>
+  Written by
+  <!-- TODO change link -->
+  <a href="https://techblog.babyl.ca">Yanick Champoux</a>
+  . Code available on
+  <!-- TODO read the url from package.json -->
+  <a href="https://github.com/aotds/aotds-shipyard">Github</a>.
+</p>
 
 <style>
-  header nav {
-    align-items: baseline;
-    font-family: "Faktos";
-  }
-  main nav {
-    margin-top: 70px;
-  }
-  h3 {
-    font-size: var(--font-scale-12);
-    font-weight: normal;
-  }
   h2 {
     margin-bottom: 1.5rem;
   }
diff --git a/src/routes/about/about.test.js b/src/routes/about/about.test.js
new file mode 100644
index 0000000..1980b77
--- /dev/null
+++ b/src/routes/about/about.test.js
@@ -0,0 +1,9 @@
+import { render, fireEvent, screen, getByText } from "@testing-library/svelte";
+import "@testing-library/jest-dom";
+
+import About from "./+page.svelte";
+
+test("we have an about page", () => {
+  const { getByText } = render(About);
+  expect(getByText("Welcome to the docks!")).toBeInTheDocument();
+});
