diff --git a/css/style.scss b/css/style.scss
index 7989517..9fb6d7f 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -38,7 +38,11 @@
 }
 
 .quicknote:hover {
-   box-shadow: 0px 0px 6px #808080;
+    box-shadow: 0px 0px 6px #808080;
+}
+
+#title-editable:empty:before {
+    content: attr(data-placeholder);
 }
 
 .quicknote ul {
diff --git a/js/script.js b/js/script.js
index be2dae7..5eb7710 100644
--- a/js/script.js
+++ b/js/script.js
@@ -327,7 +327,6 @@ View.prototype = {
             });
         }
 
-
         // Show delete and pin icons when hover over the notes.
         $("#notes-grid-div").on("mouseenter", ".quicknote", function() {
             $(this).find(".icon-header-note").addClass( "show-header-icon");
diff --git a/js/templates/notes.handlebars b/js/templates/notes.handlebars
index 28387e0..d3465a8 100644
--- a/js/templates/notes.handlebars
+++ b/js/templates/notes.handlebars
@@ -58,7 +58,7 @@
 			<div class='note-body'>
 				<div>
 					<div class="icon-header-note icon-pin fixed-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
-					<div contenteditable="true" id='title-editable' class='note-title'></div>
+					<div contenteditable="true" id='title-editable' class='note-title' data-placeholder="{{t "quicknotes" "Title"}}"></div>
 				</div>
 				<div contenteditable="true" id='content-editable' class='note-content'></div>
 				<div class='note-shares'></div>