diff --git a/dialog.css b/dialog.css
index a618ba7..3104f46 100644
--- a/dialog.css
+++ b/dialog.css
@@ -58,6 +58,13 @@
             content: '⚠️ ';
         }
     }
+    &.-style-dialog {
+        --jsl-dialog-bgcolor: #fff;
+        --jsl-dialog-bordercolor: #05224e;
+        /* .-title::before {
+            content: '⚠️ ';
+        } */
+    }
 
     .-header {
         border-top-left-radius: 0.5rem;
diff --git a/index.html b/index.html
index 25c9309..f909ef7 100644
--- a/index.html
+++ b/index.html
@@ -1,111 +1,117 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-
     <link rel="stylesheet" type="text/css" href="./dialog.css">
     <link rel="stylesheet" type="text/css" href="./jsonform.css">
 </head>
 <body>
-
 <script type="module">
-import { el } from './dom.js';
-import { dialog } from './dialog.js';
-import { JsonForm, TextField, NumericField, CheckField } from './jsonform.js';
-import { jsonQuery, jsonPatch, tokenizePath } from './json.js';
-import { date } from './date.js';
 
-// build our dom
-let btn, btn2, btn3, btn4;
-let root = el.div({}, [
-    el.div({ style:'color:#444;' }, "This is dynamically generated!"),
-    el.div({ style:'display:flex; gap:0.25rem; margin-top:0.25rem;' }, [
-        el.button({ 'on:click': () => dialog.info("You clicked me!") }, "With event"),
-        btn = el.button({}, "Hello World"),
-        btn2 = el.button({}, "Error mode"),
-        btn3 = el.button({}, "Edit form"),
-        btn4 = el.button({}, "Form modal"),
-    ])
-]);
-// click handler
-btn.addEventListener('click', () => {
-    dialog.msgbox("Yo! This is a messagebox!").then((result) => {
-        console.log("Accepted with: " + result);
-        dialog.confirm("Isn't that neat?", "Woah", { "sure":"Sure!", "nah":"Nah..." }).then((result) => {
-            console.log("Neat? " + result);
+    import { el, dom } from './dom.js';
+    import { dialog } from './dialog.js';
+    import { JsonForm, TextField, NumericField, CheckField } from './jsonform.js';
+    import { jsonQuery, jsonPatch, tokenizePath } from './json.js';
+    import { date } from './date.js';
+
+    // build our dom tree
+    let btn, btn2, btn3, btn4;
+    let root = el.div({}, [
+        el.div({ style:'color:#444;' }, "This is dynamically generated!"),
+        el.div({ style:'display:flex; gap:0.25rem; margin-top:0.25rem;' }, [
+            el.button({ 'on:click': () => dialog.info("You clicked me!") }, "With event"),
+            btn = el.button({}, "Hello World"),
+            btn2 = el.button({}, "Error mode"),
+            btn3 = el.button({}, "Edit form"),
+            btn4 = el.button({}, "Form modal"),
+        ])
+    ]);
+
+    // Apply attributes (in this case styles) to the root element
+    dom.apply(root, { 'style':'border: solid 1px #999; padding: 5px;' });
+
+    // click handlers to show off the dialogs
+    btn.addEventListener('click', () => {
+        dialog.msgbox("Yo! This is a messagebox!").then((result) => {
+            console.log("Accepted with: " + result);
+            dialog.confirm("Isn't that neat?", "Woah", { "sure":"Sure!", "nah":"Nah..." }).then((result) => {
+                console.log("Neat? " + result);
+            });
         });
     });
-});
-// click handler
-btn2.addEventListener('click', async () => {
-    await dialog.error("Oh shit. That didn't work. Maybe try again?");
-    await dialog.information("Just kidding! Everything is great!");
-});
+    btn2.addEventListener('click', async () => {
+        await dialog.error("Oh shit. That didn't work. Maybe try again?");
+        await dialog.information("Just kidding! Everything is great!");
+    });
 
-document.body.appendChild(root);
+    // Append the dom we built
+    document.body.appendChild(root);
 
-const userForm = new JsonForm();
-userForm.layout.addRow()
-    .append(new TextField({ label:"Username", width:70, path:".username" }))
-    .append(new NumericField({ label:"ID", path:".id", locked:true }));
-userForm.layout.addRow()
-    .append(new TextField({ label:"Created", width:50, path:".meta.created", locked:true }))
-    .append(new TextField({ label:"Updated", width:50, path:".meta.updated", locked:true }));
-userForm.layout.addRow()
-    .append(new NumericField({ label:"Salary", width:30, path:".meta.salary", fixed:2 }))
-    .append(new CheckField({ label:"Admin", path:".admin" }));
-document.body.appendChild(userForm.dom());
+    // Define a form with three rows and some various fields
+    const userForm = new JsonForm();
+    userForm.layout.addRow()
+        .append(new TextField({ label:"Username", width:70, path:".username" }))
+        .append(new NumericField({ label:"ID", path:".id", locked:true }));
+    userForm.layout.addRow()
+        .append(new TextField({ label:"Created", width:50, path:".meta.created", locked:true }))
+        .append(new TextField({ label:"Updated", width:50, path:".meta.updated", locked:true }));
+    userForm.layout.addRow()
+        .append(new NumericField({ label:"Salary", width:30, path:".meta.salary", fixed:2 }))
+        .append(new CheckField({ label:"Admin", path:".admin" }));
+    document.body.appendChild(userForm.dom());
 
-// Set the model
-userForm.model = {
-    username: "Admin",
-    id: 1,
-    meta: {
-        created: '2025-09-01 00:00:00 +02:00',
-    }
-};
-
-btn3.addEventListener('click', () => {
-    userForm.editable = !userForm.editable;
-    if (!userForm.editable) {
-        console.log(userForm.model);
-    }
-});
-
-const productForm = new JsonForm();
-productForm.layout.addRow()
-    .append(new TextField({ label:"Product", width:60, path:".product.name" }))
-    .append(new NumericField({ label:"Price", path:".product.price", fixed:2 }));
-productForm.layout.addRow()
-    .append(new NumericField({ label:"Inventory", width:30, path:".inventory.count" }))
-    .append(new NumericField({ label:"Limit", width:30, path:".inventory.limit" }))
-    .append(new CheckField({ label:"Virtual", path:".virtual" }));
-
-productForm.model = {};
-
-btn4.addEventListener('click', () => {
-    dialog.dialog(productForm.dom(), "Title", {"ok":"Update"}, { showClose:true, width:'400px' }).then(
-        (result) => {
-            productForm.editable = false;
-            if (result == 'ok') {
-                console.log(productForm.model);
-            }
+    // Set the model
+    userForm.model = {
+        username: "Admin",
+        id: 1,
+        meta: {
+            created: '2025-09-01 00:00:00 +02:00',
         }
-    )
-    productForm.editable = true;
-});
+    };
 
+    // Create a click handler to toggle editable on the form
+    btn3.addEventListener('click', () => {
+        userForm.editable = !userForm.editable;
+        if (!userForm.editable) {
+            console.log(userForm.model);
+        }
+    });
 
-// console.log(tokenizePath(".foo.bar[1].title"));
-// console.log(jsonQuery({ "foo":{ "bar":"42" }}, ".foo.bar" ));
-// console.log(jsonQuery([ { name:"cheese" }, { name:"bread" }, { name:"milk" } ], "[].name" ));
+    // Define another form, this one for embedding in a dialog
+    const productForm = new JsonForm();
+    productForm.layout.addRow()
+        .append(new TextField({ label:"Product", width:60, path:".product.name" }))
+        .append(new NumericField({ label:"Price", path:".product.price", fixed:2 }));
+    productForm.layout.addRow()
+        .append(new NumericField({ label:"Inventory", width:30, path:".inventory.count" }))
+        .append(new NumericField({ label:"Limit", width:30, path:".inventory.limit" }))
+        .append(new CheckField({ label:"Virtual", width:20, path:".virtual" }))
+        .append(new CheckField({ label:"Active", width:20, path:".active" }));
 
-let data = { name: "Bob" };
-console.log(data);
-let data2 = jsonPatch(data, ".name", "Bobby");
-console.log(data, data2);
+    // Set an empty model for creating a new product
+    productForm.model = {};
 
+    btn4.addEventListener('click', () => {
+        dialog.dialog(productForm.dom(), "Title", {"ok":"Update"}, { showClose:true, width:'400px' }).then(
+            (result) => {
+                productForm.editable = false;
+                if (result == 'ok') {
+                    // here's the new product model!
+                    console.log(productForm.model);
+                }
+            }
+        )
+        productForm.editable = true;
+    });
+
+    // This just demonstrates the json functions
+    console.log(tokenizePath(".foo.bar[1].title"));
+    console.log(jsonQuery({ "foo":{ "bar":"42" }}, ".foo.bar" ));
+    console.log(jsonQuery([ { name:"cheese" }, { name:"bread" }, { name:"milk" } ], "[].name" ));
+
+    let data = { name: "Bob" };
+    console.log(data);
+    let data2 = jsonPatch(data, ".name", "Bobby");
+    console.log(data, data2);
 
 </script>
-
-
 </body>
diff --git a/jsonform.css b/jsonform.css
index 67029fb..00c3081 100644
--- a/jsonform.css
+++ b/jsonform.css
@@ -70,10 +70,11 @@
                         cursor: pointer;
                         pointer-events: all;
                         .-check-thumb {
-                            background: #254b6e !important;
+                            background: #5a6977 !important;
                         }
                     }
                     .-check-box {
+                        box-sizing: border-box;
                         padding: 0.25rem;
                         padding-left: 0em;
                         padding-right: 1rem;
@@ -81,14 +82,17 @@
                         border: solid 1px #444;
                         background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0)), #929292;
                         color: #dddddd;
+                        transition-property: padding;
+                        transition-duration: 0.2s;
                         .-check-thumb {
                             border-radius: 0.25rem;
                             background-color: #444;
                             padding: 0.25rem 0.5rem;
-                            box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
+                            box-shadow: 0px 0px 5px rgba(0,0,0,0.5), inset 0px 0px 2px rgba(255,255,255,0.2);
+                            text-shadow: -1px 0px 0px rgba(0,0,0,0.5);
                         }
                         &.-check-on {
-                            padding-left: 1em;
+                            padding-left: 1rem;
                             padding-right: 0rem;
                             .-check-thumb {
                             background-color: #2c7416 !important;
diff --git a/jsonform.js b/jsonform.js
index e83c6e3..920a291 100644
--- a/jsonform.js
+++ b/jsonform.js
@@ -295,7 +295,7 @@ class CheckField extends FormField {
     }
     toggle() {
         this.value = !this.value;
-        console.log("toggle", this.value);
+        // console.log("toggle", this.value);
     }
     valueUpdated() {
         if (!this.#input) return;
