diff --git a/core/src/engine/noop.ts b/core/src/engine/noop.ts
index d59b7e6..0cf2979 100644
--- a/core/src/engine/noop.ts
+++ b/core/src/engine/noop.ts
@@ -8,7 +8,7 @@ export async function generate<D extends {} = {}>(
   _: unknown
 ): Promise<{ debug: D; message: string }> {
   await new Promise<void>((resolve) => {
-    setTimeout(() => resolve(), 750);
+    setTimeout(() => resolve(), 7500);
   });
   return {
     message:
diff --git a/web/src/app/ailly.ts b/web/src/app/ailly.ts
index 2852abc..cee716c 100644
--- a/web/src/app/ailly.ts
+++ b/web/src/app/ailly.ts
@@ -5,7 +5,7 @@ import { Ailly, types } from "@ailly/core";
 export async function generateOne(content: types.Content) {
   const settings = await Ailly.makePipelineSettings({
     root: "/ailly",
-    engine: "noop",
+    // engine: "noop",
   });
   const manager = await Ailly.GenerateManager.from(
     [content.path],
diff --git a/web/src/app/editor.module.css b/web/src/app/editor.module.css
index 864b8af..b65236c 100644
--- a/web/src/app/editor.module.css
+++ b/web/src/app/editor.module.css
@@ -11,4 +11,5 @@
   border: none;
   border-radius: var(--size-base);
   box-shadow: lightgrey 0 0 2px 4px;
+  margin-top: calc(var(--size-base) * 5);
 }
diff --git a/web/src/app/editor.tsx b/web/src/app/editor.tsx
index cd06866..8d6c8d0 100644
--- a/web/src/app/editor.tsx
+++ b/web/src/app/editor.tsx
@@ -3,34 +3,27 @@
 import { useAillyPageStore } from "./store";
 
 import styles from "./editor.module.css";
+import { ChangeEvent, useMemo } from "react";
 
+const INPUT_DELAY = 900;
 export const Editor = (store: ReturnType<typeof useAillyPageStore>) => {
-  const { state, actions } = store;
+  const { actions } = store;
+
+  const onChange = useMemo(() => {
+    let timer: ReturnType<typeof globalThis.setTimeout>;
+    return (e: ChangeEvent<HTMLTextAreaElement>) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => actions.prompt(e.target.value), INPUT_DELAY);
+    };
+  }, []);
 
   return (
-    <div>
-      <ol className={styles.prompt}>
-        {state.selections
-          .map((selections, block) =>
-            selections.map((opt) => (
-              <li key={`${block}-${opt}`}>
-                <blockquote>
-                  <p>{state.story[block].options[opt].content}</p>
-                </blockquote>
-              </li>
-            ))
-          )
-          .flat()}
-        <li>
-          <textarea
-            className={styles.instruction}
-            placeholder="What do we want to do today?"
-            onBlur={(e) => {
-              actions.prompt(e.target.value);
-            }}
-          />
-        </li>
-      </ol>
-    </div>
+    <section>
+      <textarea
+        className={styles.instruction}
+        placeholder="What do we want to do today?"
+        onChange={onChange}
+      />
+    </section>
   );
 };
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 205accf..86c8395 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -1,23 +1,54 @@
 @import url("https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:wght@400;700&family=Inter:wght@400;700&family=JetBrains+Mono&display=swap");
 
 :root {
+  color-scheme: light;
   --font-family-base: Inter, sans-serif;
   --font-family-heading: "Ibarra Real Nova", serif;
   --font-family-monospace: "JetBrains Mono", monospace;
+  --font-size-base: 20px;
   --color-base: lightblue;
   --color-contrast: lightgreen;
+  --color-background: white;
+  --color-text: black;
   --size-base: 5px;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --color-base: darkblue;
+    --color-contrast: darkgreen;
+    --color-background: black;
+    --color-text: white;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
-  font-size: 20px;
+  font-size: var(--font-size-base);
   font-family: var(--font-family-base);
 }
 
 h1,
 h2 {
   font-family: var(--font-family-heading);
+  margin: 0;
+  padding: calc(var(--size-base) * 3) 0;
+}
+
+header {
+  background: var(--color-contrast);
+  border-bottom: 2px solid color-mix(in lch, var(--color-contrast) 85%, black);
+  margin-bottom: var(--size-base);
+}
+
+header nav ul {
+  list-style: none;
+  margin: 0;
 }
 
 code,
diff --git a/web/src/app/page.module.css b/web/src/app/page.module.css
index 00b2e09..86d4353 100644
--- a/web/src/app/page.module.css
+++ b/web/src/app/page.module.css
@@ -1,6 +1,17 @@
 .main {
   display: flex;
-  flex-direction: row;
-  width: 100%;
+  flex-direction: column;
   justify-content: space-around;
+  margin: 0 calc(var(--size-base) * 4);
+}
+
+.main section {
+  width: 100%;
+}
+
+@media (min-width: 500px) {
+  .main {
+    width: 500px;
+    margin: 0 auto;
+  }
 }
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index db51a94..4dac282 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -10,30 +10,9 @@ export default function Home() {
   const store = useAillyPageStore();
   return (
     <div className={styles.main}>
-      <div
-        style={{
-          position: "fixed",
-          left: 0,
-          bottom: 0,
-        }}
-      >
-        <pre>{`storyItem: ${store.state.storyItem}\nselections: ${JSON.stringify(
-          store.state.selections
-        )}`}</pre>
-      </div>
-      <aside style={{ flex: 1 }} />
-      <section style={{ flex: 2 }}>
-        <Storyboard {...store} />
-      </section>
-      <aside style={{ flex: 0.5 }} />
-      <section style={{ flex: 3 }}>
-        <Editor {...store}/>
-      </section>
-      <aside style={{ flex: 0.5 }} />
-      <section style={{ flex: 2 }}>
-        <Response {...store}/>
-      </section>
-      <aside style={{ flex: 1 }} />
+      <Response {...store} />
+      <Editor {...store} />
+      <Storyboard {...store} />
     </div>
   );
 }
diff --git a/web/src/app/response.module.css b/web/src/app/response.module.css
index 41af750..54d39db 100644
--- a/web/src/app/response.module.css
+++ b/web/src/app/response.module.css
@@ -1,23 +1,41 @@
-.button {
-  cursor: pointer;
-  --color-pct: 100%;
-  --color-button: color-mix(
-    in lch,
-    var(--color-contrast) var(--color-pct),
-    white
-  );
-  border-radius: var(--size-base);
-  padding: var(--size-base) calc(2 * var(--size-base));
-  background: var(--color-button);
-  border: var(--color-button) solid 1.5px;
-  box-shadow: var(--color-button) 1px 2px 5px 2px;
+.response {
+  min-height: 55px;
+  max-height: 235px;
+  overflow-y: scroll;
+  transition: max-height 1s ease-in, min-height 1s ease-in;
+
+  &.generating {
+    max-height: 35px;
+    min-height: 35px;
+  }
+}
+
+.spinner {
+  margin: 25px auto;
+  display: flex;
+  justify-content: center;
 }
 
-.button:hover,
-.button:focus {
-  --color-pct: 95%;
+.spinner:before {
+  content: " ";
+  display: block;
+  width: 25px;
+  height: 25px;
+  padding: 25px;
+  --border: 5px solid var(--color-base);
+  border: var(--border);
+  border-bottom: none;
+  border-radius: 50%;
+  rotate: 0deg;
+  animation: rotation 0.8s infinite;
 }
 
-.button:active {
-  --color-pct: 90%;
+@keyframes rotation {
+  from {
+    rotate: 0deg;
+  }
+
+  to {
+    rotate: 360deg;
+  }
 }
diff --git a/web/src/app/response.tsx b/web/src/app/response.tsx
index c2dc3fd..f68d89f 100644
--- a/web/src/app/response.tsx
+++ b/web/src/app/response.tsx
@@ -5,16 +5,17 @@ import { useAillyPageStore } from "./store";
 import styles from "./response.module.css";
 
 export const Response = (store: ReturnType<typeof useAillyPageStore>) => {
-  const { state } = store
+  const { state } = store;
 
   return (
-    <>
-      <div>
+    <section
+      className={`${styles.response} ${state.generating ? "generating" : ""}`}
+    >
+      {state.generating ? (
+        <div className={styles.spinner}></div>
+      ) : (
         <M>{state.response.content}</M>
-      </div>
-      <div>
-        <button className={styles.button}>Generate</button>
-      </div>
-    </>
+      )}
+    </section>
   );
 };
diff --git a/web/src/app/store.ts b/web/src/app/store.ts
index f42cff1..bf5535f 100644
--- a/web/src/app/store.ts
+++ b/web/src/app/store.ts
@@ -9,6 +9,7 @@ export interface AillyPageState {
   selections: number[][];
   instruction: string;
   response: Response;
+  generating: boolean;
 }
 
 export interface StoryBook {
@@ -39,9 +40,11 @@ export type AillyStoreDispatch = Dispatch<{
 export function makeAillyStore(dispatch: MutableRefObject<AillyStoreDispatch>) {
   const story: StoryBook[] = [ROLES, TONES];
   let storyItem = -1;
+  let nextStoryItem = -1;
   let selections: number[][] = [];
   let instruction = "";
   let response = { content: "" };
+  let generating = true;
 
   const reducers = {
     updateState(state: AillyPageState): AillyPageState {
@@ -51,6 +54,7 @@ export function makeAillyStore(dispatch: MutableRefObject<AillyStoreDispatch>) {
         selections: [...selections.map((opts) => [...opts])],
         storyItem,
         response: { ...response },
+        generating,
       };
       return newState;
     },
@@ -66,12 +70,12 @@ export function makeAillyStore(dispatch: MutableRefObject<AillyStoreDispatch>) {
     },
     prompt(content: string) {
       instruction = content;
-      if (storyItem == -1) storyItem = 0;
+      if (storyItem == -1) nextStoryItem = 0;
       this.updateAndGenerate();
     },
     select(block: number, choice: number) {
       if (selections[block + 1] == undefined) {
-        storyItem = block + 1;
+        nextStoryItem = block + 1;
       }
       const newBlock =
         story[block].select == "multi"
@@ -97,8 +101,23 @@ export function makeAillyStore(dispatch: MutableRefObject<AillyStoreDispatch>) {
           view: {},
         },
       };
-      const genContent = await generateOne(content);
-      response.content = genContent.response ?? "";
+      generating = true;
+      this.update();
+      try {
+        const genContent = await generateOne(content);
+        const error = (genContent.meta?.debug as { error: {} } | undefined)
+          ?.error;
+        if (error) {
+          response.content = JSON.stringify(error);
+        } else {
+          response.content = genContent.response ?? "";
+        }
+      } finally {
+        generating = false;
+      }
+      this.update();
+      await pause(1200);
+      storyItem = nextStoryItem;
       this.update();
     },
   };
@@ -160,3 +179,7 @@ const TONES: StoryBook = {
   ],
   select: "single",
 };
+
+async function pause(ms: number): Promise<void> {
+  return new Promise((r) => setTimeout(r, ms));
+}
diff --git a/web/src/app/storyboard.module.css b/web/src/app/storyboard.module.css
index 710114c..7d638b3 100644
--- a/web/src/app/storyboard.module.css
+++ b/web/src/app/storyboard.module.css
@@ -23,6 +23,18 @@
   box-shadow: var(--color-base) 1px 2px 5px 2px;
   border: var(--color-base) solid 1.5px;
   padding: var(--size-base) calc(2 * var(--size-base));
+
+  animation: fadeIn 1s;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 100;
+  }
 }
 
 li:has(.option):not(:last-of-type) {
@@ -31,7 +43,7 @@ li:has(.option):not(:last-of-type) {
 
 .option:hover {
   cursor: pointer;
-  background: color-mix(in lch, var(--color-base) 85%, #fff);
+  background: color-mix(in lch, var(--color-base) 85%, var(--color-background));
 }
 
 .option:has(:checked) {
diff --git a/web/src/app/storyboard.tsx b/web/src/app/storyboard.tsx
index 07503c7..feabb3d 100644
--- a/web/src/app/storyboard.tsx
+++ b/web/src/app/storyboard.tsx
@@ -6,34 +6,41 @@ import styles from "./storyboard.module.css";
 export const Storyboard = (store: ReturnType<typeof useAillyPageStore>) => {
   const { state, actions } = store;
   return (
-    <ol className={styles.blocks}>
-      {state.storyItem > -1 &&
-        state.story.slice(0, state.storyItem + 1).map((item, block) => (
-          <li key={item.slug} className={styles.block}>
-            <h2>{item.title}</h2>
-            <ol>
-              {item.options.map((option, opt) => {
-                const name = item.slug + "-" + option.slug;
-                const input = item.select == "single" ? "radio" : "checkbox";
-                const checked = state.selections[block]?.includes(opt) ?? false;
-                return (
-                  <li key={option.slug}>
-                    <label htmlFor={name} className={styles.option}>
-                      <input
-                        type={input}
-                        id={name}
-                        name={item.slug}
-                        defaultChecked={checked}
-                        onClick={() => actions.select(block, opt)}
-                      />{" "}
-                      {option.content}
-                    </label>
-                  </li>
-                );
-              })}
-            </ol>
-          </li>
-        ))}
-    </ol>
+    <section>
+      <ol className={styles.blocks}>
+        {state.storyItem > -1 &&
+          state.story
+            .slice(0, state.storyItem + 1)
+            .map((item, block) => (
+              <li key={item.slug} className={styles.block}>
+                <h2>{item.title}</h2>
+                <ol>
+                  {item.options.map((option, opt) => {
+                    const name = item.slug + "-" + option.slug;
+                    const input =
+                      item.select == "single" ? "radio" : "checkbox";
+                    const checked =
+                      state.selections[block]?.includes(opt) ?? false;
+                    return (
+                      <li key={option.slug}>
+                        <label htmlFor={name} className={styles.option}>
+                          <input
+                            type={input}
+                            id={name}
+                            name={item.slug}
+                            defaultChecked={checked}
+                            onClick={() => actions.select(block, opt)}
+                          />{" "}
+                          {option.content}
+                        </label>
+                      </li>
+                    );
+                  })}
+                </ol>
+              </li>
+            ))
+            .reverse()}
+      </ol>
+    </section>
   );
 };