diff --git a/src/components/DriversList.astro b/src/components/DriversList.astro
new file mode 100644
index 0000000..af70500
--- /dev/null
+++ b/src/components/DriversList.astro
@@ -0,0 +1,16 @@
+---
+import { db } from '@/db';
+
+const { records } = await db.executeQuery(
+  `MATCH (d:Driver)
+  RETURN
+    (d.forename + " " + d.surname) AS fullname
+  ORDER BY
+    toUpper(d.surname),
+    toUpper(d.forename)`
+);
+---
+
+<datalist id="drivers">
+  {records.map((rec) => <option value={rec.get('fullname')} />)}
+</datalist>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 90818f3..8c1639b 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,18 +1,60 @@
+---
+import '@picocss/pico/css/pico.blue.min.css';
+---
+
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
-    <title>Astro</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-    </style>
+    <title>Six Degrees of Formula One</title>
   </head>
-  <body>
-    <slot />
+  <body class="container">
+    <header>
+      <nav aria-label="Main navigation">
+        <ul>
+          <li><a href="/about">About</a></li>
+          <li><a href="/credits">Credits</a></li>
+          <li>
+            <a href="https://github.com/maciejpedzich/sixdegs">Source Code</a>
+          </li>
+        </ul>
+        <ul>
+          <li>theme switch</li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <slot />
+    </main>
+    <div id="spacer"></div>
+    <footer>
+      <small>
+        Made with 🧠 by <a href="https://maciejpedzi.ch">Maciej Pędzich</a>
+      </small>
+    </footer>
   </body>
 </html>
+
+<style>
+  body {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .container {
+    max-width: 65ch;
+    text-align: center;
+  }
+
+  #spacer {
+    flex: 1 0 auto;
+  }
+
+  footer {
+    border-top: 1px solid var(--pico-muted-border-color);
+    padding: 1rem;
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1517317..6a1c6f9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,23 +1,53 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
-import VisGraph from '../components/VisGraph.astro';
+import DriversList from '@/components/DriversList.astro';
 
-const nodes = [
-  { id: 1, label: 'Node 1' },
-  { id: 2, label: 'Node 2' },
-  { id: 3, label: 'Node 3' },
-  { id: 4, label: 'Node 4' },
-  { id: 5, label: 'Node 5' }
-];
-const edges = [
-  { from: 1, to: 3 },
-  { from: 1, to: 2 },
-  { from: 2, to: 4 },
-  { from: 2, to: 5 },
-  { from: 3, to: 3 }
-];
+Astro.response.headers.set('Cache-Control', 'public, max-age=604800');
 ---
 
 <BaseLayout>
-  <VisGraph nodes={nodes} edges={edges} />
+  <hgroup>
+    <h1>Six Degrees of Formula One</h1>
+    <p>Find out which driver is the sport's Kevin Bacon</p>
+  </hgroup>
+  <p id="prompt">Get all the shortest paths from/to:</p>
+  <form action="/paths" method="GET">
+    <fieldset class="grid">
+      <input
+        type="text"
+        name="source"
+        placeholder="Source"
+        aria-label="Source"
+        list="drivers"
+        autocomplete="off"
+        required
+      />
+      <input
+        type="text"
+        name="dest"
+        placeholder="Destination"
+        aria-label="Destination"
+        list="drivers"
+        autocomplete="off"
+        required
+      />
+      <DriversList />
+    </fieldset>
+    <button type="submit">Submit</button>
+  </form>
 </BaseLayout>
+
+<style>
+  #prompt {
+    margin-top: 1.75rem;
+  }
+
+  fieldset.grid {
+    margin-bottom: 0.25rem;
+  }
+
+  button[type='submit'] {
+    padding: 0.5rem 0.75rem;
+    width: unset;
+  }
+</style>
