diff --git a/seeds/breadboard-ui/src/input-multipart.ts b/seeds/breadboard-ui/src/input-multipart.ts
index e3955b40..e3a27969 100644
--- a/seeds/breadboard-ui/src/input-multipart.ts
+++ b/seeds/breadboard-ui/src/input-multipart.ts
@@ -163,22 +163,22 @@ abstract class MultipartInputPart extends HTMLElement {
           display: flex;
           width: 100%;
           position: relative;
-          margin-bottom: calc(var(--grid-size) * 2);
-          min-height: calc(var(--grid-size) * 32);
+          margin-bottom: calc(var(--bb-grid-size) * 2);
+          min-height: calc(var(--bb-grid-size) * 32);
         }
 
         :host(.reserved) {
-          border-radius: calc(var(--grid-size) * 8);
+          border-radius: calc(var(--bb-grid-size) * 8);
           background: rgb(255, 255, 255);
           border: 1px solid rgb(209, 209, 209);
         }
 
         :host(.pending)::before {
           content: '';
-          width: calc(100% - var(--grid-size) * 12);
-          height: calc(var(--grid-size) * 31);
-          margin: calc(var(--grid-size) * 2);
-          border-radius: calc(var(--grid-size) * 6);
+          width: calc(100% - var(--bb-grid-size) * 12);
+          height: calc(var(--bb-grid-size) * 31);
+          margin: calc(var(--bb-grid-size) * 2);
+          border-radius: calc(var(--bb-grid-size) * 6);
           background: rgb(240, 240, 240);
           box-sizing: border-box;
         }
@@ -203,7 +203,7 @@ abstract class MultipartInputPart extends HTMLElement {
           flex: 1;
           width: 100%;
           overflow: hidden;
-          border-radius: calc(var(--grid-size) * 10);
+          border-radius: calc(var(--bb-grid-size) * 10);
           border: 1px solid rgb(209, 209, 209);
           height: 100%;
         }
@@ -214,17 +214,17 @@ abstract class MultipartInputPart extends HTMLElement {
           border: none;
           width: 100%;
           height: 100%;
-          border-radius: calc(var(--grid-size) * 10);
+          border-radius: calc(var(--bb-grid-size) * 10);
           background: rgb(255, 255, 255);
-          min-height: calc(var(--grid-size) * 12);
-          padding: calc(var(--grid-size) * 4) calc(var(--grid-size) * 10) calc(var(--grid-size) * 4) calc(var(--grid-size) * 8);
+          min-height: calc(var(--bb-grid-size) * 12);
+          padding: calc(var(--bb-grid-size) * 4) calc(var(--bb-grid-size) * 10) calc(var(--bb-grid-size) * 4) calc(var(--bb-grid-size) * 8);
         }
 
         img {
           width: calc(100% - 32px);
-          height: calc(var(--grid-size) * 36);
-          padding: calc(var(--grid-size) * 2);
-          border-radius: calc(var(--grid-size) * 8);
+          height: calc(var(--bb-grid-size) * 36);
+          padding: calc(var(--bb-grid-size) * 2);
+          border-radius: calc(var(--bb-grid-size) * 8);
           object-fit: cover;
           aspect-ratio: auto;
         }
@@ -232,7 +232,7 @@ abstract class MultipartInputPart extends HTMLElement {
         #delete {
           position: absolute;
           top: 50%;
-          right: calc(var(--grid-size) * 2);
+          right: calc(var(--bb-grid-size) * 2);
           background: rgb(255, 255, 255);
           border-radius: 50%;
           background: var(--bb-icon-delete) center center no-repeat;
diff --git a/seeds/breadboard-ui/src/input.ts b/seeds/breadboard-ui/src/input.ts
index 3928bc0c..2b5975d6 100644
--- a/seeds/breadboard-ui/src/input.ts
+++ b/seeds/breadboard-ui/src/input.ts
@@ -129,9 +129,9 @@ export class Input extends HTMLElement {
           flex: 1;
           width: 100%;
           overflow: hidden;
-          border-radius: calc(var(--grid-size) * 10);
+          border-radius: calc(var(--bb-grid-size) * 10);
           border: 1px solid rgb(209, 209, 209);
-          min-height: calc(var(--grid-size) * 50);
+          min-height: calc(var(--bb-grid-size) * 50);
         }
 
         input[type=text],
@@ -139,10 +139,10 @@ export class Input extends HTMLElement {
         textarea,
         .parsed-value {
           grid-column: 1 / 5;
-          border-radius: calc(var(--grid-size) * 10);
+          border-radius: calc(var(--bb-grid-size) * 10);
           background: rgb(255, 255, 255);
-          min-height: calc(var(--grid-size) * 12);
-          padding: 0 calc(var(--grid-size) * 10) 0 calc(var(--grid-size) * 8);
+          min-height: calc(var(--bb-grid-size) * 12);
+          padding: 0 calc(var(--bb-grid-size) * 10) 0 calc(var(--bb-grid-size) * 8);
           width: 100%;
           border: 1px solid rgb(209, 209, 209);
         }
@@ -153,15 +153,15 @@ export class Input extends HTMLElement {
 
         textarea {
           resize: none;
-          padding-top: calc(var(--grid-size) * 4);
-          padding-bottom: calc(var(--grid-size) * 4);
+          padding-top: calc(var(--bb-grid-size) * 4);
+          padding-bottom: calc(var(--bb-grid-size) * 4);
           line-height: 1.4;
           border: none;
           height: 100%;
         }
 
         div#input {
-          min-height: calc(var(--grid-size) * 12);
+          min-height: calc(var(--bb-grid-size) * 12);
         }
 
         input[type=text]::placeholder,
@@ -180,11 +180,11 @@ export class Input extends HTMLElement {
 
         input[type=submit] {
           font-size: 0;
-          width: calc(var(--grid-size) * 8);
-          height: calc(var(--grid-size) * 8);
+          width: calc(var(--bb-grid-size) * 8);
+          height: calc(var(--bb-grid-size) * 8);
           position: absolute;
-          right: calc(var(--grid-size) * 2);
-          top: calc(var(--grid-size) * 7);
+          right: calc(var(--bb-grid-size) * 2);
+          top: calc(var(--bb-grid-size) * 7);
           border-radius: 50%;
           background: #FFF var(--bb-icon-start) center center no-repeat;
           border: none;
@@ -195,10 +195,10 @@ export class Input extends HTMLElement {
         }
 
         .parsed-value img {
-          width: calc(var(--grid-size) * 36);
-          height: calc(var(--grid-size) * 36);
-          margin: calc(var(--grid-size) * 5) 0;
-          border-radius: calc(var(--grid-size) * 6);
+          width: calc(var(--bb-grid-size) * 36);
+          height: calc(var(--bb-grid-size) * 36);
+          margin: calc(var(--bb-grid-size) * 5) 0;
+          border-radius: calc(var(--bb-grid-size) * 6);
           object-fit: cover;
           aspect-ratio: auto;
         }
diff --git a/seeds/breadboard-ui/src/load.ts b/seeds/breadboard-ui/src/load.ts
index fa78b6fd..6a983a50 100644
--- a/seeds/breadboard-ui/src/load.ts
+++ b/seeds/breadboard-ui/src/load.ts
@@ -60,6 +60,7 @@ export class Load extends HTMLElement {
         h1 {
           font: var(--bb-text-baseline) var(--bb-font-family);
           font-weight: 700;
+          margin: calc(var(--bb-grid-size, 4px) * 4) 0;
         }
 
         h1 > a {
diff --git a/seeds/breadboard-ui/src/output.ts b/seeds/breadboard-ui/src/output.ts
index 21c886bd..64acbf97 100644
--- a/seeds/breadboard-ui/src/output.ts
+++ b/seeds/breadboard-ui/src/output.ts
@@ -40,7 +40,7 @@ export class Output extends HTMLElement {
           list-style: none;
           font-size: var(--bb-text-small);
           font-weight: 500;
-          padding: calc(var(--bb-grid-size) * 3) calc(var(--grid-size) * 8);
+          padding: calc(var(--bb-grid-size) * 3) calc(var(--bb-grid-size) * 8);
         }
 
         summary::-webkit-details-marker {
@@ -50,7 +50,7 @@ export class Output extends HTMLElement {
         pre {
           line-height: 1.5;
           overflow-x: auto;
-          padding: calc(var(--bb-grid-size) * 3) calc(var(--grid-size) * 8);
+          padding: calc(var(--bb-grid-size) * 3) calc(var(--bb-grid-size) * 8);
           background: rgb(253, 253, 255);
           font-size: var(--bb-text-medium);
           margin: 0;
diff --git a/seeds/breadboard-ui/src/result.ts b/seeds/breadboard-ui/src/result.ts
index 91f035e1..b630e829 100644
--- a/seeds/breadboard-ui/src/result.ts
+++ b/seeds/breadboard-ui/src/result.ts
@@ -35,7 +35,7 @@ export class Result extends HTMLElement {
           list-style: none;
           font-size: var(--bb-text-small);
           font-weight: 500;
-          padding: calc(var(--bb-grid-size) * 3) calc(var(--grid-size) * 8);
+          padding: calc(var(--bb-grid-size) * 3) calc(var(--bb-grid-size) * 8);
         }
 
         summary::-webkit-details-marker {
@@ -45,7 +45,7 @@ export class Result extends HTMLElement {
         pre {
           line-height: 1.5;
           overflow-x: auto;
-          padding: calc(var(--bb-grid-size) * 3) calc(var(--grid-size) * 8);
+          padding: calc(var(--bb-grid-size) * 3) calc(var(--bb-grid-size) * 8);
           background: rgb(253, 253, 255);
           font-size: var(--bb-text-medium);
           margin: 0;
diff --git a/seeds/breadboard-ui/src/ui-controller.ts b/seeds/breadboard-ui/src/ui-controller.ts
index c92d0226..2b5e58b5 100644
--- a/seeds/breadboard-ui/src/ui-controller.ts
+++ b/seeds/breadboard-ui/src/ui-controller.ts
@@ -10,7 +10,6 @@ import { Load, type LoadArgs } from "./load.js";
 import { Output, type OutputArgs } from "./output.js";
 import { Progress } from "./progress.js";
 import { Result, ResultArgs } from "./result.js";
-import { Start, type StartArgs } from "./start.js";
 import { StartEvent, type ToastType } from "./events.js";
 import { Toast } from "./toast.js";
 import { ResponseContainer } from "./response-container.js";
@@ -19,7 +18,7 @@ import { Done } from "./done.js";
 const MERMAID_URL = "https://cdn.jsdelivr.net/npm/mermaid@10.6.1/+esm";
 const MERMAID_STYLES = `.node.active > * {
   stroke-width: 4px;
-  stroke: #666 !important;
+  stroke: #4CE8F6 !important;
 }
 
 .node.default > * {
@@ -66,12 +65,7 @@ export interface UI {
   done(): void;
 }
 
-const getBoardFromUrl = () => {
-  return new URL(window.location.href).searchParams.get("board");
-};
-
 export class UIController extends HTMLElement implements UI {
-  #start!: Start;
   #responseContainer = new ResponseContainer();
   #currentBoardDiagram = "";
 
@@ -82,71 +76,120 @@ export class UIController extends HTMLElement implements UI {
     root.innerHTML = `
       <style>
         :host {
-          --grid-size: var(--bb-grid-size, 4px);
+          display: flex;
+          flex-direction: column;
+          padding: calc(var(--bb-grid-size) * 4) calc(var(--bb-grid-size) * 8)
+              calc(var(--bb-grid-size) * 8) calc(var(--bb-grid-size) * 8);
+          box-sizing: border-box;
+          overflow: hidden;
+        }
+
+        :host * {
+          box-sizing: border-box;
+        }
 
+        #wrapper {
+          border-radius: calc(var(--bb-grid-size) * 9);
+          border: 2px solid #E3E7ED;
+          width: 100%;
+          height: 100%;
           display: grid;
+          grid-template-columns: 65fr 35fr;
+          overflow: hidden;
+        }
+
+        #diagram {
+          background-color: rgb(244, 247, 252);
+          background-image: var(--bb-grid-pattern);
+          border-radius: calc(var(--bb-grid-size) * 9);
+          overflow: hidden;
+          outline: 2px solid #E3E7ED;
+          display: none;
+          position: relative;
+        }
+
+        #diagram.active {
+          display: block;
+        }
+
+        #mermaid {
           width: 100%;
-          margin-bottom: calc(var(--grid-size) * 30);
+          height: 100%;
+          overflow: auto;
         }
 
-        :host * {
-          box-sizing: border-box;
+        #mermaid svg {
+          display: block;
         }
 
         #intro {
           display: none;
+          grid-column: 1/3;
+          background: rgb(244, 247, 252);
+          border-radius: calc(var(--bb-grid-size) * 9);
+          padding: calc(var(--bb-grid-size) * 8);
+        }
+
+        #intro > #contents {
+          max-width: 600px;
+        }
+
+        #intro p {
+          line-height: 1.5;
         }
 
         #intro.active {
           display: block;
         }
 
-        header {
-          width: 100%;
-          display: flex;
-          min-height: calc(var(--bb-grid-size) * 20);
-          align-items: center;
-          padding: 0 calc(var(--grid-size) * 4);
+        #sidebar {
+          display: none;
         }
 
-        #header-container {
-          flex: 1;
+        #sidebar.active {
+          display: grid;
+          grid-template-rows: 2fr 3fr;
+          height: 100%;
+          overflow: hidden;
         }
 
-        #response-container {
-          background: rgb(244, 247, 252);
-          border: 2px solid rgb(244, 247, 252);
-          padding: calc(var(--grid-size) * 4);
+        #history {
+          background: red;
+        }
+
+        #output {
           display: flex;
           flex-direction: column;
+          overflow: hidden;
+          grid-row: 1/3;
+          padding: calc(var(--bb-grid-size) * 5);
         }
 
-        @media(min-width: 640px) {
-          :host {
-            padding: 0 calc(var(--grid-size) * 6) 0 calc(var(--grid-size) * 6);
-          }
-
-          header {
-            padding: 0;
-          }
-
-          #response-container-wrapper {
-            overflow: hidden;
-            border-radius: calc(var(--grid-size) * 8);
-          }
-
-          #response-container {
-            padding: calc(var(--grid-size) * 6);
-            margin-top: 0;
-            overflow-y: scroll;
-            overflow-y: overflow;
-            scrollbar-gutter: stable;
-          }
+        #output h1 {
+          font-size: var(--bb-text-medium);
+          margin: 0;
+          font-weight: 400;
+          padding: 0 0 calc(var(--bb-grid-size) * 5) calc(var(--bb-grid-size) * 8);
+          background: var(--bb-icon-output) 0 0 no-repeat;
+          line-height: calc(var(--bb-grid-size) * 6);
+        }
+
+        #output-list {
+          overflow-y: scroll;
+        }
+
+        #output-list > * {
+          padding: calc(var(--bb-grid-size) * 2);
+        }
+
+        #output-list:empty::before {
+          content: 'No board outputs received';
+          font-size: var(--bb-text-small);
         }
 
         #response-container > #intro > h1 {
           font-size: var(--bb-text-xx-large);
-          margin: 0 0 calc(var(--grid-size) * 6) 0;
+          margin: 0 0 calc(var(--bb-grid-size) * 6) 0;
           display: inline-block;
           background: linear-gradient(
             45deg,
@@ -158,8 +201,8 @@ export class UIController extends HTMLElement implements UI {
         }
 
         #response-container > #intro > p {
-          max-width: calc(var(--grid-size) * 125);
-          margin: 0 0 calc(var(--grid-size) * 5) 0;
+          max-width: calc(var(--bb-grid-size) * 125);
+          margin: 0 0 calc(var(--bb-grid-size) * 5) 0;
           line-height: 1.5;
         }
 
@@ -173,117 +216,59 @@ export class UIController extends HTMLElement implements UI {
         }
 
         #url-input-container {
-          margin-top: calc(var(--grid-size) * 10);
+          margin-top: calc(var(--bb-grid-size) * 10);
           position: relative;
         }
 
         #url-input {
-          border-radius: calc(var(--grid-size) * 10);
+          border-radius: calc(var(--bb-grid-size) * 10);
           background: rgb(255, 255, 255);
-          height: calc(var(--grid-size) * 12);
-          padding: 0 calc(var(--grid-size) * 10) 0 calc(var(--grid-size) * 4);
+          height: calc(var(--bb-grid-size) * 12);
+          padding: 0 calc(var(--bb-grid-size) * 10) 0 calc(var(--bb-grid-size) * 4);
           width: 100%;
           border: 1px solid rgb(209, 209, 209);
         }
 
         #url-submit {
           font-size: 0;
-          width: calc(var(--grid-size) * 8);
-          height: calc(var(--grid-size) * 8);
+          width: calc(var(--bb-grid-size) * 8);
+          height: calc(var(--bb-grid-size) * 8);
           position: absolute;
-          right: calc(var(--grid-size) * 2);
-          top: calc(var(--grid-size) * 2);
+          right: calc(var(--bb-grid-size) * 2);
+          top: calc(var(--bb-grid-size) * 2);
           border-radius: 50%;
           background: #FFF var(--bb-icon-start) center center no-repeat;
           border: none;
         }
 
-        #board-content {
-          border-radius: calc(var(--grid-size) * 8);
-          padding: calc(var(--grid-size) * 8);
-          background: rgb(255, 255, 255);
-          opacity: 0;
-          position: relative;
-          flex: 1;
-        }
-
-        #board-content.active {
-          opacity: 1;
-        }
-
-        #diagram,
-        #diagram svg {
-          max-height: 60vh;
-        }
-
-        #mermaid {
-          display: flex;
-        }
-
         #input {
           position: absolute;
           bottom: calc(var(--bb-grid-size) * 8);
           width: calc(100% - var(--bb-grid-size) * 16);
           border-radius: calc(var(--bb-grid-size) * 6);
-          background: rgb(255, 255, 255);
+          background: rgba(255, 255, 255, 0.7);
           padding: calc(var(--bb-grid-size) * 4);
           border: 1px solid rgb(204, 204, 204);
           box-shadow: 0 2px 3px 0 rgba(0,0,0,0.13),
             0 7px 9px 0 rgba(0,0,0,0.16);
           display: none;
+          left: 50%;
+          translate: -50% 0;
         }
 
         #input.active {
           display: block;
         }
-
-        #temp-output {
-          position: fixed;
-          bottom: 100px;
-          right: 32px;
-          padding: 20px;
-          background: rgba(255, 255, 255, 0.8);
-          border-radius: 20px;
-          box-shadow: 0 2px 3px 0 rgba(0,0,0,0.13),
-            0 7px 9px 0 rgba(0,0,0,0.16);
-          width: 50vw;
-          max-height: 80vh;
-          overflow-y: scroll;
-        }
-
-        #temp-output.collapsed {
-          width: 30px;
-          height: 30px;
-          overflow: hidden;
-        }
-
-        #temp-output > * {
-          margin-bottom: 20px;
-        }
-
-        @media(min-width: 740px) {
-          :host {
-            padding: 0 calc(var(--bb-grid-size) * 8);
-            margin: 0;
-          }
-
-          #response-container {
-            padding: calc(var(--grid-size) * 8);
-            height: 85vh;
-          }
-        }
       </style>
-      <header>
-        <div id="header-container">
-          <slot name="header"></slot>
-        </div>
-        <div id="start-container">
-          <slot name="start"></slot>
-        </div>
-      </header>
-      <div id="response-container-wrapper">
-        <div id="response-container">
-          <div id="intro">
+      <!-- Load info -->
+      <div id="load-container">  
+        <slot name="load"></slot>
+      </div>
+
+      <div id="wrapper">
+        <!-- Intro -->
+        <div id="intro">
+          <div id="contents">
             <h1>Hello there!</h1>
             <p>This is the <strong>Breadboard Playground</strong> running in the browser. Here you can either try out one of the sample boards, or you can enter the URL for your own board below.</p>
 
@@ -296,23 +281,29 @@ export class UIController extends HTMLElement implements UI {
               </div>
             </form>
           </div>
-          
-          <slot name="load"></slot>
-          
-          <div id="board-content">
-            <div id="diagram">
-              <div id="mermaid"></div>
-            </div>
-
-            <div id="input">
-              <slot></slot>
-            </div>
+        </div>
+
+        <!-- Diagram -->
+        <div id="diagram">
+          <div id="mermaid"></div>
+
+          <!-- Inputs -->
+          <div id="input">
+            <slot></slot>
+          </div>
+        </div>
+
+        <!-- Sidebar -->
+        <div id="sidebar">
+          <!-- <div id="history">
+             <h1>History</h1>
+          </div> -->
+          <div id="output">
+            <h1>Output</h1>
+            <div id="output-list">No outputs received</div>
           </div>
         </div>
       </div>
-
-      <!-- Just here to collect outputs for now -->
-      <div id="temp-output"></div>
     `;
 
     this.appendChild(this.#responseContainer);
@@ -320,35 +311,6 @@ export class UIController extends HTMLElement implements UI {
     if (!root) {
       throw new Error("Unable to locate shadow root in UI Controller");
     }
-
-    root.querySelector("#temp-output")?.addEventListener("click", (evt) => {
-      (evt.target as HTMLElement).classList.toggle("collapsed");
-    });
-  }
-
-  setActiveBreadboard(url: string) {
-    if (!this.#start) {
-      return;
-    }
-
-    const pageUrl = new URL(window.location.href);
-    pageUrl.searchParams.set("board", url);
-    window.history.replaceState(null, "", pageUrl);
-
-    this.#start.setAttribute("url", url);
-  }
-
-  async start(args: StartArgs) {
-    this.#start = new Start(args);
-    this.#start.slot = "start";
-    this.append(this.#start);
-
-    const boardFromUrl = getBoardFromUrl();
-    if (boardFromUrl) {
-      this.dispatchEvent(new StartEvent(boardFromUrl));
-    } else {
-      this.#showIntroContent();
-    }
   }
 
   toast(message: string, type: ToastType) {
@@ -366,26 +328,23 @@ export class UIController extends HTMLElement implements UI {
 
     const children = Array.from(this.children);
     for (const child of children) {
-      if (
-        child.tagName === "HEADER" ||
-        child === this.#start ||
-        child === this.#responseContainer
-      ) {
+      if (child.tagName === "HEADER" || child === this.#responseContainer) {
         continue;
       }
       child.remove();
     }
 
-    const tempChildren = Array.from(
+    const outputs = Array.from(
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      this.shadowRoot!.querySelector("#temp-output")?.childNodes || []
+      this.shadowRoot!.querySelector("#output-list")?.childNodes || []
     );
-    for (const child of tempChildren) {
+
+    for (const child of outputs) {
       child.remove();
     }
   }
 
-  #showIntroContent() {
+  showIntroContent() {
     const root = this.shadowRoot;
     if (!root) {
       throw new Error("Unable to locate shadow root in UI Controller");
@@ -421,7 +380,8 @@ export class UIController extends HTMLElement implements UI {
       throw new Error("Unable to locate shadow root in UI Controller");
     }
 
-    root.querySelector("#board-content")?.classList.add("active");
+    root.querySelector("#sidebar")?.classList.add("active");
+    root.querySelector("#diagram")?.classList.add("active");
   }
 
   #showInputContainer() {
@@ -439,6 +399,7 @@ export class UIController extends HTMLElement implements UI {
     this.#hideIntroContent();
     this.#clearBoardContents();
     this.#showBoardContainer();
+
     const load = new Load(info);
     load.slot = "load";
     this.appendChild(load);
@@ -469,6 +430,29 @@ export class UIController extends HTMLElement implements UI {
       return;
     }
     mermaidElement.innerHTML = svg;
+
+    // Do a little tidy up.
+    const svgImage = root.querySelector("svg");
+    svgImage?.removeAttribute("style");
+    svgImage?.setAttribute("width", "100%");
+    svgImage?.setAttribute("height", "100%");
+
+    // TODO: Make this into its own element.
+    const scale = 0.8;
+    const viewBox = svgImage?.getAttribute("viewBox");
+    if (!viewBox) {
+      return;
+    }
+
+    const [, , w, h] = viewBox.split(" ").map((i) => parseFloat(i) || 0);
+    const diagramWidth = w / scale;
+    const diagramHeight = h / scale;
+    const diagramX = (w - diagramWidth) / 2;
+    const diagramY = (h - diagramHeight) / 2;
+
+    const newViewBox = `${diagramX} ${diagramY} ${diagramWidth} ${diagramHeight}`;
+    svgImage?.setAttribute("viewBox", newViewBox);
+    svgImage?.setAttribute("preserveAspectRatio", "xMidYMin");
   }
 
   progress(message: string) {
@@ -484,10 +468,10 @@ export class UIController extends HTMLElement implements UI {
     this.#showInputContainer();
 
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const tempOutput = this.shadowRoot!.querySelector("#temp-output");
-
+    const outputContainer = this.shadowRoot!.querySelector("#output-list");
     const output = new Output();
-    tempOutput?.appendChild(output);
+    outputContainer?.appendChild(output);
+
     await output.display(values);
   }
 
diff --git a/seeds/breadboard-web/index.html b/seeds/breadboard-web/index.html
index bc36478d..9ee099a8 100644
--- a/seeds/breadboard-web/index.html
+++ b/seeds/breadboard-web/index.html
@@ -6,11 +6,10 @@
   <title>Breadboard Playground</title>
 </head>
 <body>
-  <bb-ui>
-    <header slot="header">
-      <a href="/"><h1 id="title">Breadboard Playground</h1></a>
-    </header>
-  </bb-ui>
+  <header slot="header">
+    <a href="/"><h1 id="title">Breadboard Playground</h1></a>
+  </header>
+  <bb-ui> </bb-ui>
   <script type="module">
     import { Main } from "./src/index.ts";
     new Main();
diff --git a/seeds/breadboard-web/public/images/pattern.png b/seeds/breadboard-web/public/images/pattern.png
new file mode 100644
index 00000000..e9647c85
Binary files /dev/null and b/seeds/breadboard-web/public/images/pattern.png differ
diff --git a/seeds/breadboard-web/public/styles/global.css b/seeds/breadboard-web/public/styles/global.css
index 89d7f316..89506163 100644
--- a/seeds/breadboard-web/public/styles/global.css
+++ b/seeds/breadboard-web/public/styles/global.css
@@ -44,6 +44,8 @@ html {
   --bb-icon-add-photo: url(/third_party/icons/add-photo.svg);
   --bb-icon-add-note: url(/third_party/icons/add-note.svg);
   --bb-icon-delete: url(/third_party/icons/delete.svg);
+  --bb-icon-output: url(/third_party/icons/output.svg);
+  --bb-grid-pattern: url(/images/pattern.png);
 }
 
 html,
@@ -52,10 +54,24 @@ body {
   margin: 0;
   font-family: var(--bb-font-family);
   color: var(--bb-font-color);
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 
-bb-ui:not(:defined) header {
-  display: none;
+header {
+  display: flex;
+  padding: 32px;
+  height: calc(var(--bb-grid-size) * 25);
+  border-bottom: 1px solid rgb(218, 218, 218);
+}
+
+header a {
+  flex: 1;
+}
+
+bb-ui {
+  height: calc(100vh - var(--bb-grid-size) * 25);
 }
 
 header a {
diff --git a/seeds/breadboard-web/public/third_party/icons/output.svg b/seeds/breadboard-web/public/third_party/icons/output.svg
new file mode 100644
index 00000000..efed99e3
--- /dev/null
+++ b/seeds/breadboard-web/public/third_party/icons/output.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v80h-80v-80H200v560h560v-80h80v80q0 33-23.5 56.5T760-120H200Zm480-160-56-56 103-104H360v-80h367L624-624l56-56 200 200-200 200Z"/></svg>
\ No newline at end of file
diff --git a/seeds/breadboard-web/src/index.ts b/seeds/breadboard-web/src/index.ts
index 3abe1d80..97ab94f8 100644
--- a/seeds/breadboard-web/src/index.ts
+++ b/seeds/breadboard-web/src/index.ts
@@ -85,9 +85,9 @@ export class Main {
     this.#runtime = this.#getRuntime();
     BreadboardUI.register();
 
-    this.#ui.addEventListener(
+    document.body.addEventListener(
       BreadboardUI.StartEvent.eventName,
-      async (evt) => {
+      async (evt: Event) => {
         if (this.#hasActiveBoard) {
           if (
             !confirm("You already have an active board. Do you want to change?")
@@ -99,7 +99,7 @@ export class Main {
         this.#boardId++;
 
         const startEvent = evt as BreadboardUI.StartEvent;
-        this.#ui.setActiveBreadboard(startEvent.url);
+        this.setActiveBreadboard(startEvent.url);
 
         for await (const result of this.#runtime.run(
           startEvent.url,
@@ -116,7 +116,43 @@ export class Main {
       this.#ui.toast(toastEvent.message, toastEvent.toastType);
     });
 
-    this.#ui.start(config);
+    this.start(config);
+  }
+
+  setActiveBreadboard(url: string) {
+    const pageUrl = new URL(window.location.href);
+    pageUrl.searchParams.set("board", url);
+    window.history.replaceState(null, "", pageUrl);
+
+    // Update the board selector.
+    document.querySelector("bb-start")?.setAttribute("url", url);
+  }
+
+  start(args: BreadboardUI.StartArgs) {
+    const header = document.querySelector("header");
+    if (!header) {
+      return;
+    }
+
+    const Start = customElements.get("bb-start");
+    if (!Start) {
+      console.warn("Start element not defined");
+      return;
+    }
+
+    const start = new Start(args);
+    header.append(start);
+
+    const boardFromUrl = this.#getBoardFromUrl();
+    if (boardFromUrl) {
+      document.body.dispatchEvent(new BreadboardUI.StartEvent(boardFromUrl));
+    } else {
+      this.#ui.showIntroContent();
+    }
+  }
+
+  #getBoardFromUrl() {
+    return new URL(window.location.href).searchParams.get("board");
   }
 
   #hasNodeInfo(data: unknown): data is { node: { id: string } } {