diff --git a/css/style.css b/css/style.css
index 15d97f6..dbd06f5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -70,6 +70,7 @@
    height:20px;
    min-width: 20px;
    border-radius:10px;
+   border: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 .ciclle-toolbar:hover {
@@ -118,6 +119,20 @@
     min-height: 20px;
 }
 
+.note-options {
+    position: absolute;
+    bottom: 0;
+    padding: 5px;
+}
+
+/* show placeholder text for empty notes */
+div[data-placeholder]:empty::before {
+  color: grey;
+}
+div[data-placeholder]:not([data-placeholder=""]):empty::before {
+  content: attr(data-placeholder);
+}
+
 /* Modal Content */
 
 .modal-content {
diff --git a/templates/part.note-modal-editable.php b/templates/part.note-modal-editable.php
index 9efd65c..effda97 100644
--- a/templates/part.note-modal-editable.php
+++ b/templates/part.note-modal-editable.php
@@ -2,8 +2,8 @@
 	<div class="modal-content">
 		<div class="quicknote note-active" style="background-color: #F7EB96" data-id="-1">
 			<div contenteditable="true" id='title-editable' class='note-title'></div>
-			<div contenteditable="true" id='content-editable' class='note-content'></div>
-			<div>
+			<div contenteditable="true" id='content-editable' class='note-content' data-placeholder="No content"></div>
+			<div class="note-options">
 				<div class="save-button">
 					<button id='save-button'><?php p($l->t('Save')); ?></button>
 				</div>
@@ -25,4 +25,4 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>