diff --git a/apps/mobile/android/app/src/main/assets/index.css b/apps/mobile/android/app/src/main/assets/index.css
index 8886696f5..779b91ce0 100644
--- a/apps/mobile/android/app/src/main/assets/index.css
+++ b/apps/mobile/android/app/src/main/assets/index.css
@@ -1,21 +1,22 @@
 body {
   margin: 0px !important;
-  font-family:"Open Sans";
+  font-family: 'Open Sans';
 }
 
 .app-main {
   overflow: visible;
 }
 
-#formBox textarea {
-  font-family: "Open Sans";
+#formBox input {
+  font-family: 'Open Sans';
   font-weight: 600 !important;
   background-color: transparent;
   border: none;
   width: 100%;
   outline: none;
   resize: none;
-  font-size: 32px;
+  font-size: 25px;
+  height: 45x;
 }
 
 #formBox {
@@ -27,47 +28,30 @@ body {
   background-color: transparent;
   padding-left: 12px;
   padding-right: 12px;
-  min-height: 45px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }
 #formBox > div,
-#formBox > textarea {
+#formBox > input {
   word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
   box-sizing: border-box;
   width: 100%;
 }
 
-#formBox > textarea {
-  overflow: hidden;
-  position: absolute;
-  height: 100%;
-  padding-top: 4px;
-  padding-bottom: 5px;
-}
-
-#textCopy {
-  font-family: "Open Sans";
-  visibility: hidden;
-  font-weight: 600 !important;
-  font-size: 32px;
-  padding-top: 4px;
-  padding-bottom: 5px;
-}
-
-#formBox > div {
-  min-height: 45px;
+#titlebar input:focus {
+  outline: none;
 }
 
 .info-bar {
-  font-family: "Open Sans";
+  font-family: 'Open Sans';
   color: gray;
-  font-size: 11px;
-  height: 15px;
+  font-size: 11.5px;
+  height: 13px;
   display: flex;
   padding-left: 4px !important;
   justify-content: space-between;
+  margin-top:5px;
 }
 
 .info-bar a {
@@ -75,29 +59,16 @@ body {
   color: gray;
 }
 
-#titlebar textarea:focus {
-  outline: none;
-}
-#infowords {
-  font-family: "Open Sans";
+#infowords,#infodate,#infosaved {
+  font-family: 'Open Sans';
   margin-right: 5px;
   margin-left: 0px;
-  border-radius: 5;
+  border-radius: 5px;
   margin-top: 0;
+  height:16px;
+  padding-top:2.5px;
 }
 
-#infodate {
-  font-family: "Open Sans";
-  margin-right: 5px;
-  margin-left: 5px;
-  margin-top: 0;
-  border-radius: 5;
-}
-
-#infosaved {
-  font-family: "Open Sans";
-  margin-right: 5px;
-  margin-left: 5px;
-  border-radius: 5;
-  margin-top: 0;
+.visible {
+	display: inline-flex !important;
 }
diff --git a/apps/mobile/html/Web.bundle/site/constants.js b/apps/mobile/html/Web.bundle/site/constants.js
index 1e41732cf..d6ac5522e 100755
--- a/apps/mobile/html/Web.bundle/site/constants.js
+++ b/apps/mobile/html/Web.bundle/site/constants.js
@@ -126,13 +126,9 @@ function setTheme() {
   let node = `
 	#titleInput {
 	  color:${pageTheme.colors.heading};
-	  font-size:${32 * pageTheme.colors.factor};
+	  font-size:${25 * pageTheme.colors.factor};
 	}
   
-	#textCopy {
-	  color:${pageTheme.colors.pri};
-	  font-size:${32 * pageTheme.colors.factor};
-	}
 	#titleInput::-webkit-input-placeholder {
 	  color:${pageTheme.colors.icon}
 	}
@@ -140,6 +136,7 @@ function setTheme() {
 	.info-bar {
 	  color:${pageTheme.colors.icon};
 	}
+  
 	  #titlebar {
 		display:flex !important;
 	  }
@@ -225,7 +222,6 @@ function setTheme() {
       background: none !important;
       border-bottom: 1px solid ${pageTheme.colors.nav} !important;
     }`;
-    
 
   let node2 = `
   .mce-content-body table[data-mce-selected], {
@@ -342,9 +338,8 @@ code {
 
 `;
 
-  let editorHead = tinymce.activeEditor.contentDocument.getElementsByTagName(
-    'head'
-  )[0];
+  let editorHead =
+    tinymce.activeEditor.contentDocument.getElementsByTagName('head')[0];
   let css2 = document.createElement('style');
   css2.appendChild(document.createTextNode(node2));
   editorHead.appendChild(css2);
diff --git a/apps/mobile/html/Web.bundle/site/index.css b/apps/mobile/html/Web.bundle/site/index.css
index e3be60f8f..1061feb58 100644
--- a/apps/mobile/html/Web.bundle/site/index.css
+++ b/apps/mobile/html/Web.bundle/site/index.css
@@ -1,102 +1,76 @@
 body {
-	margin:0px !important;
-	overflow: visible;
-	font-family:"Open Sans";
+  margin: 0px !important;
+  font-family: 'Open Sans';
 }
 
-#formBox textarea {
-	font-family: "Open Sans";
-	font-weight: 600 !important;
-	background-color: transparent;
-	border: none;
-	width: 100%;
-	outline: none;
-	resize: none;
-	font-size: 32px;
-  }
-  
-  #formBox {
-	margin-block-end: 0px;
-	position: relative;
-  }
-  
-  #titlebar {
-	background-color: transparent;
-	padding-left: 0px;
-	padding-right: 12px;
-	min-height: 45px;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-  }
-  #formBox > div,
-  #formBox > textarea {
-	word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
-	box-sizing: border-box;
-	width: 100%;
-  }
-  
-  #formBox > textarea {
-	overflow: hidden;
-	position: absolute;
-	height: 100%;
+.app-main {
+  overflow: visible;
+}
 
-	padding-top: 4px;
-    padding-bottom: 5px;
-  }
-  
-  #textCopy {
-	font-family: "Open Sans";
-	font-weight: 600 !important;
-	font-size: 32px;
-	padding-top: 4px;
-    padding-bottom: 5px;
-	padding-right: 0.5em;
-	padding-left: 0.5em;
-  }
-  
-  #formBox > div {
-	min-height: 45px;
-  }
-  
-  .info-bar {
-	font-family: "Open Sans";
-	color: gray;
-	font-size: 11px;
-	height: 15px;
-	display: flex;	
-	padding-left: 14px !important;
-	justify-content: space-between;
-  }
+#formBox input {
+  font-family: 'Open Sans';
+  font-weight: 600 !important;
+  background-color: transparent;
+  border: none;
+  width: 100%;
+  outline: none;
+  resize: none;
+  font-size: 25px;
+  height: 45x;
+}
 
-  .info-bar a {
-	text-decoration: none;
-	color: gray
-  }
-  
-  #titlebar textarea:focus {
-	outline: none;
-  }
-  #infowords {
-	font-family: "Open Sans";
-	margin-right: 5px;
-	margin-left: 0px;
-	border-radius: 5;
-	margin-top: 0;
-  }
-  
-  #infodate {
-	font-family: "Open Sans";
-	margin-right: 5px;
-	margin-left: 5px;
-	margin-top: 0;
-	border-radius: 5;
-  }
-  
-  #infosaved {
-	font-family: "Open Sans";
-	margin-right: 5px;
-	margin-left: 5px;
-	border-radius: 5;
-	margin-top: 0;
-  }
+#formBox {
+  margin-block-end: 0px;
+  position: relative;
+}
+
+#titlebar {
+  background-color: transparent;
+  padding-left: 0px;
+  padding-right: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+#formBox > div,
+#formBox > input {
+  word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
+  box-sizing: border-box;
+  width: 100%;
+}
+
+#titlebar input:focus {
+  outline: none;
+}
+
+.info-bar {
+  font-family: 'Open Sans';
+  color: gray;
+  font-size: 11.5px;
+  height: 13px;
+  display: flex;
+  padding-left: 4px !important;
+  justify-content: space-between;
+  margin-top: 5px;
+}
+
+.info-bar a {
+  text-decoration: none;
+  color: gray;
+}
+
+#infowords,
+#infodate,
+#infosaved {
+  font-family: 'Open Sans';
+  margin-right: 5px;
+  margin-left: 0px;
+  border-radius: 5px;
+  margin-top: 0;
+  height: 16px;
+  padding-top: 2.5px;
+}
+
+.visible {
+  display: inline-flex !important;
+}
diff --git a/apps/mobile/html/Web.bundle/site/index.html b/apps/mobile/html/Web.bundle/site/index.html
index 16facc194..436fb719f 100644
--- a/apps/mobile/html/Web.bundle/site/index.html
+++ b/apps/mobile/html/Web.bundle/site/index.html
@@ -14,15 +14,15 @@
 		<input id="image-input" accept='image/png, image/gif, image/jpeg, image/bmp, image/x-icon' type="file"
 			name="name" style="display: none;" />
 		<div id="titlebar">
-			<form id="formBox">
-				<textarea maxlength="150" id="titleInput" placeholder="Note title"></textarea>
-				<div id="textCopy"></div>
-			</form>
+			<div id="formBox">
+				<input maxlength="150" id="titleInput"
+					placeholder="Note title"></input>
+			</div>
 			<div class="info-bar">
 				<div style="display:flex;">
 					<p id="infowords"></p>
-					<p id="infodate"></p>
-					<p id="infosaved"></p>
+					<p style="display:none" id="infodate"></p>
+					<p style="display:none" id="infosaved"></p>
 				</div>
 			</div>
 		</div>
diff --git a/apps/mobile/html/Web.bundle/site/listeners.js b/apps/mobile/html/Web.bundle/site/listeners.js
index 28cfbebcb..6a792ece0 100755
--- a/apps/mobile/html/Web.bundle/site/listeners.js
+++ b/apps/mobile/html/Web.bundle/site/listeners.js
@@ -2,38 +2,31 @@ let titleInput = document.getElementById('titleInput');
 let infoBar = '.info-bar';
 let info = null;
 let scrollTimer = null;
+
+function onDomContentLoaded() {
+  document.body.onscroll = function (event) {
+    if (scrollTimer) {
+      clearTimeout(scrollTimer);
+      scrollTimer = null;
+    }
+    updateInfoBar();
+    scrollTimer = setTimeout(function () {
+
+      window.ReactNativeWebView.postMessage(
+        JSON.stringify({
+          visible: event.target.documentElement.scrollTop,
+          title: document.getElementById('titleInput').value,
+          type: 'scroll'
+        })
+      
+      );
+    }, 100);
+  };
+}
+
 function attachTitleInputListeners() {
   infoBar = '.info-bar';
-  document.addEventListener(
-    'DOMContentLoaded',
-    function () {
-      autosize();
-      document.body.onscroll = function (event) {
-        if (scrollTimer) {
-          clearTimeout(scrollTimer);
-          scrollTimer = null;
-        }
-        scrollTimer = setTimeout(function () {
-          window.ReactNativeWebView.postMessage(
-            JSON.stringify({
-              visible: event.target.documentElement.scrollTop,
-              title: document.getElementById('titleInput').value,
-              type: 'scroll'
-            })
-          );
-        }, 100);
-      };
-    },
-    false
-  );
-
-  document.getElementById('formBox').onsubmit = function (evt) {
-    evt.preventDefault();
-    if (tinymce.activeEditor) {
-      tinymce.activeEditor && tinymce.activeEditor.focus();
-    }
-    onTitleChange();
-  };
+  document.addEventListener('DOMContentLoaded', onDomContentLoaded, false);
 
   document.getElementById('titleInput').onkeypress = function (evt) {
     if (evt.keyCode === 13 || evt.which === 13) {
@@ -49,7 +42,6 @@ function attachTitleInputListeners() {
   document
     .getElementById('titleInput')
     .addEventListener('focus', function (evt) {
-      autosize();
       if (window.ReactNativeWebView) {
         window.ReactNativeWebView.postMessage(
           JSON.stringify({
@@ -69,10 +61,10 @@ function attachTitleInputListeners() {
     onTitleChange();
   };
 }
-
+let titleTimeout = 0;
 function onTitleChange() {
-  setTimeout(() => {
-    autosize();
+  clearTimeout(titleTimeout);
+  titleTimeout = setTimeout(() => {
     if (isLoading) {
       return;
     }
@@ -84,7 +76,8 @@ function onTitleChange() {
     info = document.querySelector(infoBar);
     if (tinymce.activeEditor) {
       info.querySelector('#infowords').innerText =
-      editor.countWords() + ' words';
+        editor.countWords() + ' words';
+      updateInfoBar()
     }
 
     if (titleMessage && typeof titleMessage.value === 'string') {
@@ -92,24 +85,51 @@ function onTitleChange() {
         window.ReactNativeWebView.postMessage(JSON.stringify(titleMessage));
       }
     }
-  }, 500);
+  }, 300);
 }
 
 function autosize() {
-  let ele = document.getElementById('textCopy');
-  ele.innerHTML = document
-    .getElementById('titleInput')
-    .value.replace(/\n/g, '<br/>');
-  let newHeight = document.getElementById('titlebar').scrollHeight;
-  let css = document.createElement('style');
-  css.type = 'text/css';
-  let node = `
-      .tox-tinymce {
-        min-height:calc(100vh - ${newHeight}px) !important;
-        };
-   `;
-  css.appendChild(document.createTextNode(node));
-  document.getElementsByTagName('head')[0].appendChild(css);
+  // let ele = document.getElementById('textCopy');
+  // ele.innerHTML = document
+  //   .getElementById('titleInput')
+  //   .value.replace(/\n/g, '<br/>');
+  // let newHeight = document.getElementById('titlebar').scrollHeight;
+  // let css = document.createElement('style');
+  // css.type = 'text/css';
+  // let node = `
+  //     .tox-tinymce {
+  //       min-height:calc(100vh - ${newHeight}px) !important;
+  //       };
+  //  `;
+  // css.appendChild(document.createTextNode(node));
+  // document.getElementsByTagName('head')[0].appendChild(css);
+}
+
+function isInvalidValue(value) {
+  return (
+    value === '' ||
+    value === '<p></p>' ||
+    value === '<p><br></p>' ||
+    value === '<p>&nbsp;</p>'
+  );
+}
+
+function updateInfoBar() {
+  let ids = ['infodate', 'infosaved'];
+  ids.forEach(id => {
+    let element = document.getElementById(id);
+    if (!element) return;
+    if (element.textContent && element.textContent !== '') {
+     if (!element.classList.contains("visible")) {
+        element.classList.add('visible');
+      }
+    } else {
+      if (element.classList.contains("visible")) {
+        element.classList.remove('visible');
+      }
+    
+    }
+  });
 }
 
 function attachMessageListener() {
@@ -118,6 +138,7 @@ function attachMessageListener() {
   if (isSafari) {
     listenerHandler = window;
   }
+
   listenerHandler.addEventListener('message', function (data) {
     let message = JSON.parse(data.data);
     let type = message.type;
@@ -131,7 +152,12 @@ function attachMessageListener() {
         isLoading = true;
         globalThis.isClearingNoteData = false;
         tinymce.activeEditor.mode.set('readonly');
-        tinymce.activeEditor.setContent(value);
+        if (isInvalidValue(value)) {
+          tinymce.activeEditor.setContent('');
+        } else {
+          tinymce.activeEditor.setContent(value);
+        }
+
         setTimeout(function () {
           document.activeElement.blur();
           window.blur();
@@ -141,7 +167,8 @@ function attachMessageListener() {
         }, 300);
         info = document.querySelector(infoBar);
         info.querySelector('#infowords').innerText =
-        editor.countWords() + ' words';
+          editor.countWords() + ' words';
+          updateInfoBar()
         break;
       case 'htmldiff':
         document.getElementsByClassName('htmldiff_div')[0].innerHTML = value;
@@ -155,9 +182,6 @@ function attachMessageListener() {
         break;
       case 'title':
         document.getElementById('titleInput').value = value;
-        setTimeout(function () {
-          autosize();
-        }, 100);
         break;
       default:
         break;
diff --git a/apps/mobile/src/views/Editor/tiny/tiny.js b/apps/mobile/src/views/Editor/tiny/tiny.js
index 30ff7471a..a3222e41d 100644
--- a/apps/mobile/src/views/Editor/tiny/tiny.js
+++ b/apps/mobile/src/views/Editor/tiny/tiny.js
@@ -14,6 +14,7 @@ info = document.querySelector(infoBar);
 info.querySelector('#infosaved').innerText = "";
 info.querySelector('#infodate').innerText = "";
 info.querySelector('#infowords').innerText = ""
+updateInfoBar()
 document.activeElement.blur();
 window.blur();
 `;
@@ -72,6 +73,7 @@ const updateDateEdited = value => `
 	(function() {
 		info = document.querySelector(infoBar);
         info.querySelector('#infodate').innerText = "${value}";
+        updateInfoBar()
 	})();
 `;
 
@@ -79,6 +81,7 @@ const updateSavingState = value => `
 	(function() {
 		info = document.querySelector(infoBar);
     info.querySelector('#infosaved').innerText = "${value}";
+    updateInfoBar()
 	})();
 `;