diff --git a/examples/vanilla/screen.html b/examples/vanilla/screen.html
index 28467355..a0fd9b9a 100644
--- a/examples/vanilla/screen.html
+++ b/examples/vanilla/screen.html
@@ -1,66 +1,77 @@
 <!DOCTYPE html>
+<html>
 
-<video id="video" width="100%"></video>
-<center>
-  <button id="record">Record</button>
-  <button id="play">Play</button>
-</center>
+<head>
+  <title>Think</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
+</head>
 
-<script src="../../../gun/gun.js"></script>
+<body>
+  <video id="video" width="100%"></video>
+  <center>
+    <button id="record">Record</button>
+    <button id="play">Play</button>
+  </center>
 
-<script>
-  const gun = Gun(`${ window.location.origin }/gun`)
-  const record = { recorder: null, recording: false }
+  <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
 
-  const video = document.querySelector('#video')
-  const playButton = document.querySelector('#play')
-  const recordButton = document.querySelector('#record')
+  <script>
+    const gun = Gun(`${window.location.origin}/gun`)
+    const record = { recorder: null, recording: false }
 
-  recordButton.addEventListener('click', () => {
-    console.log(record)
-    if (!record.ing) {
-      return record.stream()
+    const video = document.querySelector('#video')
+    const playButton = document.querySelector('#play')
+    const recordButton = document.querySelector('#record')
+
+    recordButton.addEventListener('click', () => {
+      console.log(record)
+      if (!record.ing) {
+        return record.stream()
+      }
+      recordButton.innerText = 'Record'
+      if (record.ing.stop) { record.ing.stop() }
+      record.ing = false
+    }, false)
+
+    record.stream = () => {
+      navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
+        const chunks = [] // we have a stream, we can record it
+        record.ing = new MediaRecorder(stream)
+        record.ing.ondataavailable = eve => chunks.push(eve.data)
+        record.ing.onstop = () => record.save(new Blob(chunks))
+        record.ing.start()
+        recordButton.innerText = 'End'
+      }, err => { console.log(err) })
     }
-    recordButton.innerText = 'Record'
-    if (record.ing.stop) { record.ing.stop() }
-    record.ing = false
-  }, false)
 
-  record.stream = () => {
-    navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
-      const chunks = [] // we have a stream, we can record it
-      record.ing = new MediaRecorder(stream)
-      record.ing.ondataavailable = eve => chunks.push(eve.data)
-      record.ing.onstop = () => record.save(new Blob(chunks))
-      record.ing.start()
-      recordButton.innerText = 'End'
-    }, err => { console.log(err) })
-  }
-
-  record.save = data => {
-    record.file = record.file || new FileReader()
-    record.file.readAsDataURL(data)
-    record.file.onloadend = () => {
-      let b64 = record.file.result
-      b64 = `data:video/webm${ b64.slice(b64.indexOf(';')) }`
-      gun.get('test').get('screen').put(b64)
+    record.save = data => {
+      record.file = record.file || new FileReader()
+      record.file.readAsDataURL(data)
+      record.file.onloadend = () => {
+        let b64 = record.file.result
+        b64 = `data:video/webm${b64.slice(b64.indexOf(';'))}`
+        gun.get('test').get('screen').put(b64)
+      }
     }
-  }
 
-  playButton.addEventListener('click', () => {
-    if (record.playing) {
-      playButton.innerText = 'Play'
-      video.pause()
-      record.playing = false
-      return
-    }
-    playButton.innerText = 'Stop'
+    playButton.addEventListener('click', () => {
+      if (record.playing) {
+        playButton.innerText = 'Play'
+        video.pause()
+        record.playing = false
+        return
+      }
 
-    record.playing = true
-    gun.get('test').get('screen').once(data => {
-      if (!data) { return }
-      video.src = data
-      video.play()
-    })
-  }, false)
-</script>
+      playButton.innerText = 'Stop'
+      record.playing = true
+
+      gun.get('test').get('screen').once(data => {
+        if (!data) { return }
+        video.src = data
+        video.play()
+      })
+    }, false)
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/vanilla/todo.html b/examples/vanilla/todo.html
index 7087f529..8706fd4f 100644
--- a/examples/vanilla/todo.html
+++ b/examples/vanilla/todo.html
@@ -1,53 +1,65 @@
+<!DOCTYPE html>
 <html>
 
+<head>
+  <title>Think</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
+</head>
+
 <body>
-    <h1>Thoughts</h1>
+  <h1>Thoughts</h1>
 
-    <form id="form">
-        <input id="input">
-        <button>Add</button>
-    </form>
+  <form id="form">
+    <input id="input">
+    <button>Add</button>
+  </form>
 
-    <ul id="parentList"></ul>
-    <!-- <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> -->
-    <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
-    <link href="style.css" rel="stylesheet">
-    <script>
-        var gun = Gun().get('thoughts');
-        document.getElementById('form').addEventListener('submit', function (e) {
-            e.preventDefault(); // attaches event listener and prevent default form action
-            var data = document.getElementById('input').value;
-            gun.set(data);
-            document.getElementById('input').value = "";
-        });
-        gun.map().on(function (thought, id) {
-            var li = document.getElementById(id) || document.getElementById('parentList').insertAdjacentHTML('beforeend', '<li id =' + id + '> ' + thought + '</li>');
-            var $ = function (selector) {
-                return document.querySelector(selector);
-            };
-            // attach the event listener to the selected li items
-            var links = $('#parentList').getElementsByTagName('li');
-            for (var i = 0; i < links.length; i++) {
-                var link = links[i];
-                // console.log(link.innerHTML);
-                link.ondblclick = dynamicEvent;
-                if (link.innerHTML === " null" || link.innerHTML === " " || link.innerHTML === "") {
-                    link.style.display = "none";
-                } else {
-                    link.style.display = "list-item";
-                };
-            };
-        });
-        function dynamicEvent() {
-            gun.get(this.id).put(null);
-            this.innerHTML = document.getElementById(this.id.innerHTML);
-            if (this.innerHTML === " null" || this.innerHTML === " " || this.innerHTML === "") {
-                this.style.display = "none";
-            } else {
-                this.style.display = "list-item";
-            };
-        };
-    </script>
+  <ul id="parentList"></ul>
+
+  <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
+
+  <script>
+    const gun = Gun(`${window.location.origin}/gun`).get('thoughts')
+
+    const parentList = document.getElementById('parentList')
+    const input = document.getElementById('input')
+    const form = document.getElementById('form')
+
+    const dynamicEvent = e => {
+      const target = e.target
+
+      gun.get(target.id).put(null)
+
+      target.innerHTML = document.getElementById(target.innerHTML)
+
+      if (target.innerHTML === ' null' || target.innerHTML === ' ' || target.innerHTML === '') {
+        target.style.display = 'none'
+      } else {
+        target.style.display = 'list-item'
+      }
+    }
+
+    gun.map().on((thought, id) => {
+      parentList.insertAdjacentHTML('beforeend', `<li id =${id}> ${thought}</li>`)
+
+      const links = parentList.getElementsByTagName('li')
+
+      for (const link of links) {
+        if (link.innerHTML === ' null' || link.innerHTML === ' ' || link.innerHTML === '') {
+          link.style.display = 'none'
+        } else {
+          link.style.display = 'list-item'
+        }
+        link.ondblclick = dynamicEvent
+      }
+    })
+
+    form.addEventListener('submit', e => {
+      e.preventDefault()
+      gun.set(input.value)
+      input.value = ''
+    })
+  </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/examples/vanilla/user.html b/examples/vanilla/user.html
new file mode 100644
index 00000000..c9319ade
--- /dev/null
+++ b/examples/vanilla/user.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+
+<h1>User</h1>
+
+<form id="sign">
+  <input id="alias" placeholder="username">
+  <input id="pass" type="password" placeholder="passphrase">
+  <input id="signup" type="button" value="sign up">
+  <input id="signin" type="button" value="sign in">
+</form>
+
+<ul id="list"></ul>
+
+<form id="said">
+  <input id="say">
+  <input id="speak" type="submit" value="speak">
+</form>
+
+<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
+
+<script>
+  const gun = Gun(`${window.location.origin}/gun`)
+  const user = gun.user().recall({ sessionStorage: true })
+
+  const alias = document.querySelector('#alias')
+  const pass = document.querySelector('#pass')
+  const sign = document.querySelector('#sign')
+  const signup = document.querySelector('#signup')
+  const signin = document.querySelector('#signin')
+  const said = document.querySelector('#said')
+  const say = document.querySelector('#say')
+  const ul = document.querySelector('#list')
+
+  function UI (say, id) {
+    const li = document.createElement('li')
+    li.setAttribute('id', id)
+    li.appendChild(document.createTextNode(say))
+    ul.appendChild(li)
+
+    return false
+  }
+
+  signup.addEventListener('click', () => user.create(alias.value, pass.value, () => user.auth(alias.value, pass.value)))
+  signin.addEventListener('click', () => user.auth(alias.value, pass.value))
+
+  said.addEventListener('submit', e => {
+    e.preventDefault()
+    // if(!user.is){ return }
+    user.get('said').set(say.value)
+    said.value = ''
+  })
+
+  gun.on('auth', () => {
+    sign.style.display = 'none'
+    user.get('said').map().on(UI)
+  })
+</script>
