diff --git a/static/guestbook.js b/static/guestbook.js
index dada823..8a6dcac 100644
--- a/static/guestbook.js
+++ b/static/guestbook.js
@@ -1,7 +1,74 @@
+class GuestbookForm extends HTMLElement {
+    static get observedAttributes() {
+        return ['guestbook'];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this._guestbook = this.getAttribute('guestbook') || '';
+        this._postUrl = `${this._guestbook}/comments/create/remote`
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'guestbook') {
+            this._guestbook = newValue;
+            this.render();
+        }
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+      <style>
+        form div {
+          margin-bottom: 0.75em;
+        }
+        label {
+          display: block;
+          font-weight: bold;
+          margin-bottom: 0.25em;
+        }
+        input[type="text"], textarea {
+          width: 100%;
+          box-sizing: border-box;
+        }
+        input[type="submit"] {
+          font-size: 1em;
+          padding: 0.5em 1em;
+        }
+      </style>
+      <form action="${this._postUrl}" method="post">
+        <div>
+          <label for="authorname">Name</label>
+          <input type="text" name="authorname" id="authorname"/>
+        </div>
+        <div>
+          <label for="authoremail">Email (Optional)</label>
+          <input type="text" name="authoremail" id="authoremail"/>
+        </div>
+        <div>
+          <label for="authorsite">Site Url (Optional)</label>
+          <input type="text" name="authorsite" id="authorsite"/>
+        </div>
+        <div>
+          <label for="content">Comment</label>
+          <textarea name="content" id="content"></textarea>
+        </div>
+        <div>
+          <input type="hidden" value="${window.location.pathname}" name="redirect" id="redirect" />
+        </div>
+        <div>
+          <input type="submit" value="Submit"/>
+        </div>
+      </form>
+    `;
+    }
+}
 
 class CommentList extends HTMLElement {
     static get observedAttributes() {
-        return ['src'];
+        return ['guestbook'];
     }
 
     constructor() {
@@ -13,26 +80,28 @@ class CommentList extends HTMLElement {
     }
 
     connectedCallback() {
-        if (this.hasAttribute('src')) {
+        if (this.hasAttribute('guestbook')) {
             this.fetchComments();
         }
     }
 
     attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'src' && oldValue !== newValue) {
+        if (name === 'guestbook' && oldValue !== newValue) {
             this.fetchComments();
         }
     }
 
     async fetchComments() {
-        const src = this.getAttribute('src');
-        if (!src) return;
+        const guestbook = this.getAttribute('guestbook');
+        if (!guestbook) return;
         this.loading = true;
         this.error = null;
         this.render();
 
+        const commentsUrl = `${guestbook}/comments`
+
         try {
-            const response = await fetch(src);
+            const response = await fetch(commentsUrl);
             if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
             const data = await response.json();
             this.comments = Array.isArray(data) ? data : [];
@@ -103,4 +172,6 @@ class CommentList extends HTMLElement {
     }
 }
 
-customElements.define('comment-list', CommentList);
+customElements.define('guestbook-form', GuestbookForm);
+customElements.define('guestbook-comments', CommentList);
+