diff --git a/docs/edit.css b/docs/edit.css
index 9607d51..85e0c81 100644
--- a/docs/edit.css
+++ b/docs/edit.css
@@ -87,6 +87,7 @@ body.loaded:not(.edited) #placeholder {
   color: var(--text-placeholder-color);
   pointer-events: none;
   position: absolute;
+  z-index: 100;
 }
 
 body.drag #content {
@@ -115,10 +116,10 @@ body.drag #content {
 #doc-title {
   outline: none;
   /* min-width: 180px; */
-  top: 0;
-  /* position: absolute; */
+  /* top: 0; */
+  position: absolute;
   padding: 0 1em;
-  font-weight: normal;
+  font-weight: bold;
   /* opacity:0.33; */
   user-select: none;
   cursor:
@@ -141,10 +142,14 @@ body.drag #content {
   bold;
 }
 
+.no-metadata .metadata-on {
+  display:none;
+}
 
 #doc-title-text:empty:after {
   content:"untitled";
   opacity:0.5;
+  font-weight:normal;
 }
 
 #doc-title.open #metadata-text {
@@ -239,7 +244,7 @@ input:focus {
 }
 #ib-info:hover {
   pointer-events: all;
-  color: black;
+  color: var(--text-color);
 }
 
 /*#toolbar a#copy {
@@ -620,10 +625,9 @@ div#editor.ql-container.ql-snow {
     margin-left: auto;
 }
 
-
 #formatbar .ql-toolbar, 
 #formatbar .ql-stroke, 
-#formatbar .ql-picker,
+#formatbar .ql-picker:not(.ql-color-picker),
 #formatbar.ql-snow a {
   color: var(--text-color) ;
   stroke: var(--text-color) ;
@@ -649,7 +653,7 @@ div#mainmenu {
     position: relative;
 }
 
-input#md-include {min-width: unset;height: 2em; width: 1em;margin-right: 1em;}
+input#md-include {min-width: unset;/* height: 2em; */width: 1em;margin-right: 0.5em;}
 
 label:not(:first-child) {
     font-weight: normal;
diff --git a/docs/edit.html b/docs/edit.html
index 926d162..e4caf60 100644
--- a/docs/edit.html
+++ b/docs/edit.html
@@ -14,7 +14,7 @@
       href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
 <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
-
+<script src="/js/crypto-js.min.js"></script>
 <script src="/js/lzma/lzma_worker-min.js"></script>
 <script src="/edit.js" type="module"></script>
 
@@ -36,12 +36,11 @@
 <div id="doc-title" class="toolbarbutton hide-before-edit" placeholder="untitled"> 
   <div class="title" id="doc-title-text"></div>
   <form id="md-contents" class="menu">
-    <div class="inputrow"><label for="md-title">title</label><input type="text" name="title" id="md-title" placeholder="untitled"></div>
-    <div class="inputrow"><label for="md-description">description</label><input type="text" name="description" id="md-description" placeholder="text"></div>
-    <div class="inputrow"><label for="md-favicon">favicon</label><input type="text" name="favicon" id="md-favicon" placeholder="emoji or url"></div>
-    <div class="inputrow"><label for="md-image">image</label><input type="text" name="image" id="md-image" placeholder="image url"></div>
+    <div class="inputrow"><label for="md-title">title</label><input type="text" name="title" id="md-title" placeholder="untitled"><input title="Include link metadata" type="checkbox" name="includeMetadata" id="md-include" value="true" checked></div>
+    <div class="inputrow metadata-on"><label for="md-description">description</label><input type="text" name="description" id="md-description" placeholder="text"></div>
+    <div class="inputrow metadata-on"><label for="md-favicon">favicon</label><input type="text" name="favicon" id="md-favicon" placeholder="emoji or url"></div>
+    <div class="inputrow metadata-on"><label for="md-image">image</label><input type="text" name="image" id="md-image" placeholder="image url"></div>
     <div class="inputrow"><label for="md-password">password</label><input type="text" name="password" id="md-password" placeholder="encryption password"></div>
-    <div class="inputrow"><label for="md-include">metadata</label><input type="checkbox" name="includeMetadata" id="md-include" checked><label for="md-include">include link metadata</label><a href="">?</a></div>
   </form>
 </div>
 
diff --git a/docs/edit.js b/docs/edit.js
index 7da185d..26fc216 100644
--- a/docs/edit.js
+++ b/docs/edit.js
@@ -76,7 +76,8 @@ window.onload = async function() {
   // content.addEventListener("keyup", handleInput);
   QS("#doc-title").addEventListener("keyup", handleInput);
   Array.from(document.getElementsByTagName("input")).forEach(i => i.addEventListener("keydown", handleInput))
-  
+  document.getElementById("md-include").addEventListener("change", handleMetadataCheckbox);
+
   document.getElementById("drop-zone").addEventListener("drop", handleDrop);
   document.getElementById("drop-zone").addEventListener("dragover", e => e.preventDefault());
   editor.addEventListener("paste", handlePaste);
@@ -118,6 +119,8 @@ window.onload = async function() {
     }
   } else {
     updateBodyClass();
+    setContent(sessionStorage.getItem("editor-content"))
+
   }
 };
 
@@ -263,20 +266,25 @@ function fetchCodepen(url) {
   });
 }
 
-
-
 function handleInput(e) {
-   handleContentChange(e);
+  handleContentChange(e);
+}
+
+function handleMetadataCheckbox(e) {
+  document.body.classList.toggle("no-metadata", !e.target.checked)
+  handleContentChange(e);
 }
 function getMetadata() {
   let formData = new FormData(document.forms[0]);
   var object = {};
   formData.forEach((value, key) => object[key] = value);
+
   return object;
 }
 
 async function handleContentChange() {
 
+  sessionStorage.setItem("editor-content", editor.innerHTML);
   var text = editor.innerText;
   let hasContent = text.trim().length > 0;
 
@@ -284,32 +292,44 @@ async function handleContentChange() {
   if (!hasContent) return;
 
   var metadata = getMetadata();
-    var rawHTML = text.indexOf("</") > 0;
-    if (rawHTML) {
-      text = text.replace(/[ |\t]+/g, " ").replace(/> +</g, "> <");
-    } else {
-      text = editor.innerHTML;
-    }
-  
-    if (text.trim().length) {
-      let url = `data:text/html;charset=utf-8,${encodeURIComponent(text)}`;
-      let durl = new bitty.DataURL(url)
-      durl = await durl.compress(bitty.GZIP_MARKER);
-      let ratio = durl.href.length / url.length;
-      console.log(`Compressed from ${url.length} to ${durl.href.length} bytes (${Math.round(ratio * 100)}%)`);
+  var rawHTML = text.indexOf("</") > 0;
+  if (rawHTML) {
+    text = text.replace(/[ |\t]+/g, " ").replace(/> +</g, "> <");
+  } else {
+    text = editor.innerHTML;
+  }
 
-      if (ratio <= 0.95) url = durl.href;
-      if (rawHTML) {
-        updateLink(url, metadata);
-      } else {
-        updateLink("?" + durl.data, metadata);
-      }
-      setFileName("");
-    } else if (importedFileData) {
-      updateLink(importedFileData, {title});
-    } else {
-      updateLink("");
+  if (text.trim().length) {
+    let url = `data:text/html;charset=utf-8,${encodeURIComponent(text)}`;
+    let durl = new bitty.DataURL(url)
+
+    if (metadata.password) {
+      durl.params.cipher = "aes-gcm"
+      durl.params.style = "default"
+      durl.params._password = metadata.password;
     }
+
+    durl = await durl.compress(bitty.GZIP_MARKER);
+    let ratio = durl.href.length / url.length;
+    console.debug(`Compressed from ${url.length} to ${durl.href.length} bytes (${Math.round(ratio * 100)}%)`);
+
+    
+
+
+    if (ratio <= 0.95) url = durl.href;
+    if (rawHTML) {
+      updateLink(url, metadata);
+    } else if (metadata.password) {
+      updateLink(durl.href, metadata);
+    } else {
+      updateLink("?" + durl.data, metadata);
+    }
+    setFileName("");
+  } else if (importedFileData) {
+    updateLink(importedFileData, {title});
+  } else {
+    updateLink("");
+  }
   
 }
 
@@ -323,13 +343,11 @@ let bittyLink = undefined;
 function updateLink(url, metadata, push) {
   
   let title = metadata.title;
-  // if (title) title = encodeURIComponent(title.trim().replace(/\s/g, "_"));
   
   let includeMetadata = !metadata.includeMetadata;
   let path = includeMetadata ? "/" : bitty.metadataToPath(metadata) ?? "/";
   let prefix = includeMetadata ? bitty.encodePrettyComponent(title) : "";
 
-  console.log(`path [${path}]`)
   if (url.length) {
     url = path + "#" + prefix + "/" + url;
   } else {
@@ -342,15 +360,20 @@ function updateLink(url, metadata, push) {
 
   document.getElementById("canonical").href = bittyLink;
 
-  console.log("previewing", bittyLink);
-  if(previewContent) QS("#preview-frame").src = bittyLink;
+  if(previewContent) {
+    console.log("previewing", bittyLink);
+    QS("#preview-frame").src = bittyLink;
+  }
 
   var hash = location.hash;
-  if (push || !hash || !hash.length) {
-    window.history.pushState(null, null, bittyLink);
-  } else {
-    window.history.replaceState(null, null, bittyLink);
+  if (true) {
+    if (push || !hash || !hash.length) {
+      window.history.pushState(null, null, bittyLink);
+    } else {
+      window.history.replaceState(null, null, bittyLink);
+    }
   }
+
   var length = bittyLink.length;
 
   QS("#length").innerText = length + " bytes";
@@ -372,7 +395,7 @@ function share() {
     title: 'itty.bitty',
     url: bittyLink
   }).then(() => {
-    console.log('Thanks for sharing!');
+    console.log('Shared!');
   })
   .catch(console.error);
 }
@@ -392,7 +415,7 @@ function toggleMenu(el) {
 
 function toggleMetadata(e) {
   if (e.target.closest(".menu")) return;
-  console.log(e)
+
   QS("#md-contents").classList.toggle("menu-visible");
   QS("#doc-title").classList.toggle("open");
   QS("#md-title").focus();