diff --git a/src/app.html b/src/app.html
index adf8bd8..dd400e6 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,11 +1,11 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
+    <attic-app>%sveltekit.body%</attic-app>
   </body>
 </html>
diff --git a/src/css/base/global.css b/src/css/base/global.css
new file mode 100644
index 0000000..6a5186f
--- /dev/null
+++ b/src/css/base/global.css
@@ -0,0 +1,58 @@
+html {
+  background: wheat;
+  color: black;
+}
+
+body {
+  font-family: sans-serif;
+  font-size: 1.125rem;
+  font-weight: 400;
+  font-synthesis: none;
+  line-height: 1.5;
+  min-block-size: 100svb;
+}
+
+attic-app {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  min-block-size: 100svb;
+
+  & > :is(header, footer, main) {
+    display: grid;
+    grid-template-columns:
+      [full-start]
+      1fr
+      [margin-start]
+      minmax(20px, min(5vi, 100px))
+      [main-start]
+      minmax(260px, 800px)
+      [main-end]
+      minmax(20px, min(5vi, 100px))
+      [margin-end]
+      1fr
+      [full-end];
+
+    & > * {
+      grid-column: main;
+    }
+  }
+
+  & > header {
+    padding-block: 30px;
+  }
+
+  & > footer {
+    padding-block: 30px;
+    margin-block-start: auto;
+  }
+
+  & > main {
+    row-gap: 30px;
+  }
+}
+
+:focus-visible {
+  outline: 2px solid magenta;
+  outline-offset: 2px;
+}
diff --git a/src/css/base/typography.css b/src/css/base/typography.css
new file mode 100644
index 0000000..cbc08e1
--- /dev/null
+++ b/src/css/base/typography.css
@@ -0,0 +1,13 @@
+h1 {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+:is(h2, h3, h4, h5, h6) {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+p:has(small:read-only) {
+  font-size: 1rem;
+}
diff --git a/src/css/components/button.css b/src/css/components/button.css
new file mode 100644
index 0000000..b831be7
--- /dev/null
+++ b/src/css/components/button.css
@@ -0,0 +1,7 @@
+button {
+  border: 2px solid currentColor;
+  font-weight: 700;
+  inline-size: fit-content;
+  line-height: 1.5;
+  padding: 5px 10px;
+}
diff --git a/src/css/components/form.css b/src/css/components/form.css
new file mode 100644
index 0000000..7c74746
--- /dev/null
+++ b/src/css/components/form.css
@@ -0,0 +1,15 @@
+form {
+  background: white;
+  display: grid;
+  gap: 10px;
+  justify-items: start;
+  padding: 20px;
+
+  & label {
+    display: block;
+    font-size: 1rem;
+    font-weight: 700;
+    inline-size: fit-content;
+    line-height: 1.5;
+  }
+}
diff --git a/src/css/components/input.css b/src/css/components/input.css
new file mode 100644
index 0000000..caa647a
--- /dev/null
+++ b/src/css/components/input.css
@@ -0,0 +1,8 @@
+input[type="text"] {
+  background: white;
+  border: 2px solid currentColor;
+  font-weight: 400;
+  inline-size: min(100%, 300px);
+  line-height: 1.5;
+  padding: 5px 10px;
+}
diff --git a/src/css/main.css b/src/css/main.css
index 61068f5..06cf919 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,3 +1,31 @@
 @layer base, components, utility;
 
 @import "base/reset.css" layer(base);
+@import "base/global.css" layer(base);
+@import "base/typography.css" layer(base);
+
+@import "components/button.css" layer(base);
+@import "components/input.css" layer(base);
+@import "components/form.css" layer(base);
+
+.error {
+  color: #dd2244;
+  font-weight: 700;
+}
+
+.avatar {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 50px auto;
+  gap: 10px;
+
+  & img {
+    border-radius: calc(1px * infinity);
+    block-size: 50px;
+    inline-size: 50px;
+  }
+
+  & p {
+    font-weight: 700;
+  }
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0845b4a..bc0fbf9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,4 +4,22 @@
   let { children } = $props();
 </script>
 
-{@render children()}
+<header>
+  <hgroup>
+    <h1>attic.social</h1>
+    <p>Attic is a cozy space with lofty ambitions.</p>
+  </hgroup>
+</header>
+
+<main>
+  {@render children()}
+</main>
+
+<footer>
+  <p>
+    <small>
+      &copy; Copyright 2026
+      <a href="https://dbushell.com">David Bushell</a>
+    </small>
+  </p>
+</footer>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 86635eb..406d89b 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -15,7 +15,7 @@ export const actions = {
       url = await startSession(event, String(handle ?? ""));
     } catch (err) {
       console.log(err);
-      return fail(400, { handle, invalid: true });
+      return fail(400, { handle, action: "login", error: "Invalid handle." });
     }
     redirect(303, url);
   },
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7e46703..9288310 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,25 +1,40 @@
 <script lang="ts">
   import type { PageProps } from "./$types.d.ts";
   let { data, form }: PageProps = $props();
-
-  let handle = $derived(form?.handle ?? "");
 </script>
 
 {#if data.user}
-  <img alt="avatar" src="/avatar/{data.user.did}" width="50" height="50" />
-  <h2>Hello, {data.user.displayName}!</h2>
+  <h2>Signed in as:</h2>
+  <div class="avatar">
+    <img alt="avatar" src="/avatar/{data.user.did}" width="50" height="50" />
+    <p>{data.user.displayName}</p>
+  </div>
+
+  <form method="POST" action="?/displayName">
+    <h2>Attic settings</h2>
+    <label for="displayName">Display name</label>
+    <input
+      type="text"
+      id="displayName"
+      name="displayName"
+      value={data.user.displayName}
+    />
+    <button type="submit">Update</button>
+  </form>
+
   <form method="POST" action="?/logout">
-    <button type="submit">Logout</button>
+    <h2>Bye!</h2>
+    <button type="submit">Sign out</button>
   </form>
 {:else}
   <form method="POST" action="?/login">
     <h2>Connect</h2>
     <p>Connect with your Bluesky / Atmosphere account.</p>
-    {#if form?.invalid}
-      <p><strong>Invalid handle</strong></p>
+    {#if form?.action === "login" && form?.error}
+      <p class="error">{form.error}</p>
     {/if}
     <label for="handle">Handle</label>
-    <input type="text" id="handle" name="handle" bind:value={handle} />
-    <button type="submit">Login</button>
+    <input type="text" id="handle" name="handle" value={form?.handle} />
+    <button type="submit">Sign in</button>
   </form>
 {/if}
