diff --git a/hypermedia/2-example/index.html b/hypermedia/2-example/index.html
index c3a0779..e387240 100644
--- a/hypermedia/2-example/index.html
+++ b/hypermedia/2-example/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hypermedia</title>
+    <title>Signals</title>
     <link rel="stylesheet" href="pico.blue.css">
     <meta name="color-scheme" content="light dark">
     <script type="module" src="datastar.js"></script>
@@ -12,59 +12,55 @@
 
 <body class="container" data-theme="light">
 
-    <h1 style="margin-top: 1em; text-align:center">Signals</h1>
+    <h1 style="margin-top: 1em; text-align:center">Datastar Signals</h1>
 
     <main class="grid" data-theme="dark">
-        <article id="record" data-init="@get('record1.json')" data-signals:recordnumber="1">
+        <article data-init="@get('record1.json')" data-signals:recordnumber="1">
             <header>
-                <h3 data-text="$name"></h3>
-                <p></p>
+                <h3 style="margin: 1em;" data-text="$name"></h3>
             </header>
             <form>
-                <div class="form-group" >
-                    <label for="username">username</label>
-                    <input type="username" id="username" data-bind:username >
-                </div>
-                <div class="form-group" >
-                    <label for="email">Email</label>
-                    <input type="email" id="email" data-bind:email>
-                </div>
-                <div class="form-group">
-                    <label for="phone">Phone</label>
-                    <input type="tel" id="phone" data-bind:phone>
-                </div>
-                <div class="form-group">
-                    <label for="street">Street</label>
-                    <input type="text" id="street"  data-bind:street>
-                </div>
-                <div class="form-group">
-                    <label for="suite">Suite</label>
-                    <input type="text" id="suite"  data-bind:suite>
-                </div>
-                <div class="form-group">
-                    <label for="city">City</label>
-                    <input type="text" id="city" data-bind:city>
-                </div>
-                <div class="form-group">
-                    <label for="zipcode">Zipcode</label>
-                    <input type="text" id="zipcode" data-bind:zipcode>
-                </div>
-                <div class="form-group">
-                    <label for="website">Website</label>
-                    <input type="text" id="website" data-bind:website>
-                </div>
+
+                <label for="username">Username</label>
+                <input type="username" id="username" data-bind:username>
+
+                <label for="email">Email</label>
+                <input type="email" id="email" data-bind:email>
+
+                <label for="phone">Phone</label>
+                <input type="tel" id="phone" data-bind:phone>
+
+                <label for="street">Street</label>
+                <input type="text" id="street" data-bind:street>
+
+                <label for="suite">Suite</label>
+                <input type="text" id="suite" data-bind:suite>
+
+                <label for="city">City</label>
+                <input type="text" id="city" data-bind:city>
+
+                <label for="zipcode">Zipcode</label>
+                <input type="text" id="zipcode" data-bind:zipcode>
+
+                <label for="website">Website</label>
+                <input type="text" id="website" data-bind:website>
+
             </form>
             <footer class="grid">
-                <button class="primary" data-attr:disabled="$recordnumber <= 1" data-on:click="@get(`record${$recordnumber - 1}.json`); $recordnumber--">Previous</button>
-                <button class="primary" data-attr:disabled="$recordnumber >= 6" data-on:click="@get(`record${$recordnumber + 1}.json`) ; $recordnumber++">Next</button>
+                <button class="primary" data-attr:disabled="$recordnumber <= 1"
+                    data-on:click="@get(`record${$recordnumber - 1}.json`); $recordnumber--">
+                    Previous
+                </button>
+                <button class="primary" data-attr:disabled="$recordnumber >= 6"
+                    data-on:click="@get(`record${$recordnumber + 1}.json`) ; $recordnumber++">
+                    Next
+                </button>
             </footer>
         </article>
     </main>
 
-
     <pre data-json-signals></pre>
 
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/hypermedia/2-example/recordx.json b/hypermedia/2-example/recordx.json
new file mode 100644
index 0000000..f7eba27
--- /dev/null
+++ b/hypermedia/2-example/recordx.json
@@ -0,0 +1,10 @@
+{
+    "username": "SofiaChen",
+    "email": "sofia.c@cloudnet.org",
+    "street": "Maple Avenue",
+    "suite": "Suite 210",
+    "city": "Oakridge",
+    "zipcode": "45678-9012",
+    "phone": "555-987-6543 x2156",
+    "website": "sofiachen.dev"
+  }
