diff --git a/js/extension.js b/js/extension.js
index 58822e9..b911535 100644
--- a/js/extension.js
+++ b/js/extension.js
@@ -125,6 +125,7 @@ class NotesSidebar {
         // Update textarea if active note changed or note content changed
         if (updates.activeNote || updates.noteContent) {
             this.updateTextArea();
+            this.updateTextAreaState();
         }
     }
 
@@ -135,7 +136,12 @@ class NotesSidebar {
     get savedContent() { return this.store.state.savedContent; }
 
     updateTextArea() {
-        if (!this.textArea || !this.activeNote) return;
+        if (!this.textArea) return;
+
+        if (!this.activeNote) {
+            this.textArea.value = '';
+            return;
+        }
 
         // Check if we have unsaved content for this note
         if (this.noteContent.has(this.activeNote)) {
@@ -145,6 +151,16 @@ class NotesSidebar {
         }
     }
 
+    updateTextAreaState() {
+        if (!this.textArea) return;
+
+        const hasActiveNote = !!this.activeNote;
+        this.textArea.disabled = !hasActiveNote;
+        this.textArea.placeholder = hasActiveNote
+            ? 'Start typing your notes...'
+            : 'Select a note to start editing...';
+    }
+
     async init() {
         await this.loadNotes();
     }
@@ -162,6 +178,7 @@ class NotesSidebar {
             // Trigger reactive updates when reopening
             this.renderTabs();
             this.updateTextArea();
+            this.updateTextAreaState();
             return;
         }
 
@@ -199,7 +216,10 @@ class NotesSidebar {
 
         this.textArea = document.createElement('textarea');
         this.textArea.className = 'notes-textarea';
-        this.textArea.placeholder = 'Start typing your notes...';
+        this.textArea.placeholder = 'Select a note to start editing...';
+
+        // Initialize as disabled (will be enabled reactively if there's an active note)
+        this.textArea.disabled = true;
 
         // Add event listener to track changes
         this.textArea.addEventListener('input', () => this.onTextAreaChange());
@@ -256,6 +276,9 @@ class NotesSidebar {
 
             if (notes.length > 0 && !this.activeNote) {
                 this.store.setActiveNote(notes[0]);
+            } else if (notes.length === 0) {
+                // Ensure active note is cleared when no notes exist
+                this.store.setActiveNote(null);
             }
 
             // Load content for active note after setting state
@@ -353,16 +376,13 @@ class NotesSidebar {
             if (response.ok) {
                 // Clean up tracking for deleted note
                 const deletedNote = this.activeNote;
+
+                // Clear active note first to ensure state change is triggered
+                this.store.setActiveNote(null);
                 this.store.deleteNoteFromState(deletedNote);
 
+                // Refresh notes list (this will handle setting activeNote correctly)
                 await this.refreshNotes();
-                // Select the first available note or clear if no notes left
-                const newActiveNote = this.notes.length > 0 ? this.notes[0] : null;
-                this.store.setActiveNote(newActiveNote);
-
-                if (newActiveNote) {
-                    await this.loadNoteContent(newActiveNote);
-                }
             }
         } catch (error) {
             console.error('Error deleting note:', error);
@@ -448,7 +468,11 @@ class NotesSidebar {
     }
 
     onTextAreaChange() {
-        if (!this.activeNote) return;
+        if (!this.activeNote) {
+            // Clear the textarea if someone types without an active note
+            this.textArea.value = '';
+            return;
+        }
 
         const currentContent = this.textArea.value;
         const savedContent = this.savedContent.get(this.activeNote) || '';
diff --git a/js/notes-sidebar.css b/js/notes-sidebar.css
index d6ca723..6ef5ae1 100644
--- a/js/notes-sidebar.css
+++ b/js/notes-sidebar.css
@@ -78,6 +78,12 @@
     border-color: #4CAF50;
 }
 
+.notes-textarea:disabled {
+    background: #111;
+    color: #666;
+    cursor: not-allowed;
+}
+
 .notes-button-container {
     display: flex;
     gap: 10px;