diff --git a/base.css b/base.css
new file mode 100644
index 0000000..6fe47f3
--- /dev/null
+++ b/base.css
@@ -0,0 +1 @@
+body{margin:0 auto;padding:12vmin 10vmin;max-width:35em;line-height:1.5em;font-family: -apple-system,BlinkMacSystemFont,sans-serif;word-wrap: break-word;}
\ No newline at end of file
diff --git a/edit.css b/edit.css
index 10aa39d..06956b2 100644
--- a/edit.css
+++ b/edit.css
@@ -76,11 +76,15 @@ body.drag #content {
   color: rgba(0, 0, 0, 0.2);
   background: transparent;
 }
-.ib-file {
+#doc-file {
   border-radius: 1em;
   background: #ebeff9;
   padding: 0.25em 1em;
   font-size:smaller;
+  margin-bottom:2em;
+}
+#doc-file:empty {
+  display:none;
 }
 
 #ib-info {
diff --git a/edit.html b/edit.html
index 1d25619..1b1d871 100644
--- a/edit.html
+++ b/edit.html
@@ -11,15 +11,15 @@
 <link rel="stylesheet" type="text/css" href="edit.css">
 <body>
 
+<div id="doc-title" contenteditable="true" placeholder="itty.bitty"></div>
+<div id="doc-file"></div>
+
 <div id="placeholder">
 itty bitty things<br>
 can be conveyed in a link.<br>
 type here &ndash; and then share!<p><a id="ib-info" href="http://about.bitty.site" target="_blank">about itty bitty</a><br>
 </div>
-<div id="doc-title" contenteditable="true" placeholder="itty.bitty"></div>
-<div id="content"> </div>
-
-
+<div id="content"></div>
 <span id="toolbar">
   <a target="_blank" id="length"></a>&nbsp;<a target="_blank" id="menu">menu</a>
   <div id="menu-contents" class="menu">
diff --git a/edit.js b/edit.js
index 43f92c7..0107792 100644
--- a/edit.js
+++ b/edit.js
@@ -7,6 +7,8 @@ var DATA_PREFIX_BXZE = 'data:text/html;charset=utf-8;bxze64,'
 
 var b = document.documentElement.setAttribute('data-useragent',  navigator.userAgent);
 
+var importedFileData = undefined;
+
 var content = undefined
 window.onload = function() {
   window.onpopstate = function(e) { setContent(e.state) }
@@ -49,9 +51,18 @@ function setContent(html) {
   updateBodyClass()
 }
 
+function setFileName(name) {
+  QS("#doc-file").innerText = name
+  if (name.length) {
+    setContent(''); 
+    document.body.classList.add("edited")
+  }
+}
+
+
 function updateBodyClass() {
   var length = content.innerText.length;
-  if (length) {
+  if (length || importedFileData) {
     document.body.classList.add("edited")
   } else {
     document.body.classList.remove("edited")
@@ -75,8 +86,10 @@ function handleDrop(e) {
         })
         if (ratio > 0.95) url2 = url;
         if (e.altKey) url2 = url2.replace(DATA_PREFIX_BXZE, "!")
+        
+        importedFileData = url2
         updateLink(url2, file.name, true)
-        setFileContent('📄' + file.name)
+        setFileName('📄' + file.name)
       })
     }, false);
     reader.readAsDataURL(file);
@@ -84,11 +97,6 @@ function handleDrop(e) {
   document.body.classList.remove("drag")
 }
 
-function setFileContent(name) {
-  setContent('&nbsp;<span class="ib-file" contentEditable="false">' + name + '</span><br><br>'); 
-}
-
-
 // TODO Command+Shift+T for title (H1), Command+Shift+H for headline (H2), Command+Shift+B for body text (remove any of the above)
 function handleKey(e) {
   var code = e.which;
@@ -136,11 +144,12 @@ function fetchCodepen(url) {
     var useTemplate = c.indexOf(TEMPLATE_MARKER) >= 0
     var string = '<style type="text/css">' + c + '</style>' +  h + '<script type="text/javascript">' + j + '</script>'
     stringToZip(string, function(zip) {
-      setFileContent('✒️' + url)
+      setFileName('✒️' + url)
       var title = QS("#doc-title").innerText;
-
       setTimeout(function() {
-          updateLink((useTemplate ? "" : DATA_PREFIX_BXZE) + zip, title)
+          var data = (useTemplate ? "" : DATA_PREFIX_BXZE) + zip;
+          importedFileData = data;
+          updateLink(data, title)
       }, 300);
     });
   });
@@ -163,6 +172,9 @@ function handleInput(e) {
     stringToZip(text, function(zip) {
       updateLink("?" + zip, title)
     });
+    setFileName("")
+  } else if (importedFileData) {
+    updateLink(importedFileData, title)
   } else {
     updateLink("")
   }
