diff --git a/examples/ex-1/index.html b/examples/ex-1/index.html
index 26ae165..774bb76 100644
--- a/examples/ex-1/index.html
+++ b/examples/ex-1/index.html
@@ -7,18 +7,23 @@
   </head>
   <body>
     <header>
-      <label for="ms">Milliseconds between boxes</label>
-      <input
-        id="ms"
-        placeholder="Milliseconds between boxes"
-        value="0"
-        type="number"
-      />
-      <label for="box">Number of boxes</label>
-      <input id="box" placeholder="Number of boxes" value="3" type="number" />
-      <button>Diff</button>
-      <a href="/ex-1">Reload</a>
-      <div><a href="/">Come back to examples</a></div>
+      <form>
+        <label for="ms">Milliseconds between boxes</label>
+        <input
+          id="ms"
+          placeholder="Milliseconds between boxes"
+          value="0"
+          type="number"
+        />
+        <label for="box">Number of boxes</label>
+        <input id="box" placeholder="Number of boxes" value="3" type="number" />
+        <button>Diff</button>
+        <a href="/ex-1">Reload</a>
+        <a href="/">Come back to examples</a>
+        <a href="https://github.com/aralroca/diff-dom-streaming" target="_blank"
+          >GitHub</a
+        >
+      </form>
     </header>
   </body>
 </html>
diff --git a/examples/ex-1/index.js b/examples/ex-1/index.js
index e238323..62fbb43 100644
--- a/examples/ex-1/index.js
+++ b/examples/ex-1/index.js
@@ -1,6 +1,8 @@
 import diff from "https://unpkg.com/diff-dom-streaming@latest";
 
-async function diffStreamReader() {
+async function diffStreamReader(e) {
+  e?.preventDefault();
+
   // This is a simple example. Normally the stream comes from a fetch request.
   const encoder = new TextEncoder();
   const ms = +document.querySelector("#ms").value ?? 0;
@@ -20,18 +22,21 @@ async function diffStreamReader() {
         </head>
         <body>
           <header>
-            <label for="ms">Milliseconds between boxes</label>
-            <input
-            id="ms"
-            placeholder="Milliseconds between boxes"
-            value="0"
-            type="number"
-            />
-            <label for="box">Number of boxes</label>
-            <input id="box" placeholder="Number of boxes" value="3" type="number" />
-            <button>Diff</button>
-            <a href="/ex-1">Reload</a>
-            <div><a href="/">Come back to examples</a></div>
+            <form>
+              <label for="ms">Milliseconds between boxes</label>
+              <input
+              id="ms"
+              placeholder="Milliseconds between boxes"
+              value="0"
+              type="number"
+              />
+              <label for="box">Number of boxes</label>
+              <input id="box" placeholder="Number of boxes" value="3" type="number" />
+              <button>Diff</button>
+              <a href="/ex-1">Reload</a>
+              <a href="/">Come back to examples</a>
+              <a href="https://github.com/aralroca/diff-dom-streaming" target="_blank">GitHub</a>
+            </form>
           </header>
           <div class="container">
         `),
@@ -65,4 +70,4 @@ async function diffStreamReader() {
   await diff(document, stream.getReader());
 }
 
-document.querySelector("button").addEventListener("click", diffStreamReader);
+document.querySelector("form").addEventListener("submit", diffStreamReader);
diff --git a/examples/ex-1/styles.css b/examples/ex-1/styles.css
index f25643a..094efc8 100644
--- a/examples/ex-1/styles.css
+++ b/examples/ex-1/styles.css
@@ -6,8 +6,10 @@ header {
   position: fixed;
   padding: 10px;
   margin-top: -10px;
+  text-align: center;
   background-color: light-dark(white, black);
   width: 100%;
+  box-shadow: 2px 2px 10px 0 hsla(0, 0%, 40%, 0.5);
 }
 
 .container {
@@ -22,4 +24,11 @@ header {
   padding: 20px;
   border: 1px solid #000;
   margin: 10px;
+  width: calc(33.33% - 20px);
+}
+
+input,
+button,
+a {
+  margin-right: 10px;
 }
