diff --git a/application/views/qso/index.php b/application/views/qso/index.php
index dca38658a..9580fb217 100644
--- a/application/views/qso/index.php
+++ b/application/views/qso/index.php
@@ -751,7 +751,7 @@ if (typeof window.DX_WATERFALL_FIELD_MAP === 'undefined') {
 		var user_show_notes = <?php echo ($this->session->userdata('user_show_notes')) ? 'true' : 'false'; ?>;
 	</script>
 
-	<div class="card callsign-notes" id="callsign-notes">
+	<div class="card callsign-notes" id="callsign-notes" style="display: none;">
         <div class="card-header d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#callsign-notes-body" aria-expanded="false" aria-controls="callsign-notes-body" style="cursor: pointer;">
           <h4 style="font-size: 16px; font-weight: bold;" class="card-title mb-0">
             <?= __("Callsign Notes"); ?>
diff --git a/assets/js/sections/qso.js b/assets/js/sections/qso.js
index cad646487..00e496196 100644
--- a/assets/js/sections/qso.js
+++ b/assets/js/sections/qso.js
@@ -170,10 +170,12 @@ function setNotesVisibility(state, noteText = "",show_notes = user_show_notes) {
 	if (state === 0) {
 		// No callsign - Hide note card
 		$noteCard.hide();
+		$('#callsign-notes-body').removeClass('show');
 
 	} else if (state === 1) {
 		// Callsign, no note yet - show note card with message
 		$noteCard.show();
+		$('#callsign-notes-body').removeClass('show');
 
 		// Hide editor toolbar, set value and show preview
 		document.querySelector('.EasyMDEContainer .editor-toolbar').style.display = 'none';
@@ -185,6 +187,9 @@ function setNotesVisibility(state, noteText = "",show_notes = user_show_notes) {
 		// Callsign with existing notes - show note card with notes
 		$noteCard.show();
 
+		// Automatically expand the panel when note exists
+		$('#callsign-notes-body').addClass('show');
+
 		// Hide editor toolbar, set value and show preview
 		document.querySelector('.EasyMDEContainer .editor-toolbar').style.display = 'none';
 		noteEditor.value(noteText);