diff --git a/src/main.ts b/src/main.ts
index 789fe6f..a24d2dd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -96,12 +96,33 @@ export default class PluginComment extends Plugin {
 						comment_container.appendChild(label);
 
 						const comment = document.createElement('div');
-						comment.className = 'plugin-comment';
+						comment.className = 'plugin-comment-annotation';
 						comment.contentEditable = 'true';
-						comment.innerText = this.annotations[pluginId] || `Add your personal comment about '${pluginName}' here...`;
+						const placeholder = `Add your personal comment about '${pluginName}' here...`;
+						let isPlaceholder = this.annotations[pluginId] ? false : true;
+						const initialText = this.annotations[pluginId] || placeholder;
 
-						comment_container.addEventListener('click', (event) => {
-							event.stopPropagation();
+						if(isPlaceholder) {
+							comment.addClass('plugin-comment-placeholder');
+						}
+
+						comment.innerText = initialText;
+
+						// Remove placeholder class when user starts typing
+						comment.addEventListener('focus', () => {
+							if (isPlaceholder) {
+								comment.innerText = '';
+								comment.classList.remove('plugin-comment-placeholder');
+								isPlaceholder = false;
+							}
+						});
+
+						comment.addEventListener('blur', () => {
+							if (comment.innerText.trim() === '') {
+								comment.innerText = placeholder;
+								comment.classList.add('plugin-comment-placeholder');
+								isPlaceholder = true;
+							}
 						});
 
 						// Prevent click event propagation to parent
@@ -111,8 +132,16 @@ export default class PluginComment extends Plugin {
 
 						// Save the comment on input change
 						comment.addEventListener('input', () => {
-							this.annotations[pluginId] = comment.innerText;
-							saveAnnotations(this.app.vault, this.annotations);
+							if (comment.innerText.trim() === '') {
+								delete this.annotations[pluginId];
+								comment.classList.add('plugin-comment-placeholder');
+								isPlaceholder = true;
+							} else {
+								this.annotations[pluginId] = comment.innerText;
+								comment.classList.remove('plugin-comment-placeholder');
+								isPlaceholder = false;
+							}
+							saveAnnotations(this.app.vault, this.annotations);	
 						});
 
 						comment_container.appendChild(comment);
@@ -124,6 +153,7 @@ export default class PluginComment extends Plugin {
 		});
 	}
 
+
 	onunload() {
 		console.log('Unloading Plugin Comment');
 
diff --git a/styles/styles.css b/styles/styles.css
index 38065d1..789e449 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -11,18 +11,18 @@
 	box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
 }
 
+.plugin-comment-annotation.plugin-comment-placeholder {
+	color: #CCCCCC; /* Standard placeholder color */
+	font-style: italic;
+}
+
 /* Additional styles for consistency */
 .plugin-comment-label {
 	padding-top: 5px;
 }
 
+
 .plugin-comment-annotation {
 	padding-top: 5px;
-
-	font-style: italic;
 	width: 100%;
-	margin-top: 5px;
-	border: 1px solid var(--background-modifier-border);
-	padding: 5px;
-	font-style: italic;
 }