diff --git a/index_4.4.html b/index_4.4.html
index a69b333..4532e93 100644
--- a/index_4.4.html
+++ b/index_4.4.html
@@ -15,6 +15,7 @@
 <link rel="stylesheet"  id="style1-Custom" href="./css/custom1_4.3.css" disabled>
 <link rel="stylesheet"  id="style2-Boot" href="./css/bootstrap.min.lida2.css">
 <link rel="stylesheet"  id="style2-Custom" href="./css/custom2_4.3.css">
+<link rel="stylesheet"  id="style2-Custom" href="./css/collapsemod.css">
 
 <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
 <script
@@ -481,11 +482,17 @@
 
 								<div class="tab-content visInfo w-100 d-flex bg-lida-vis" id="vis-TabContent" style="flex-direction: column;">
  									<div class="tab-pane fade show active p-0 bg-lida-vis" id="vis0" role="tabpanel" aria-labelledby="vis0-tab">
-										<div id='displaynote' class="p-3 pt-0"><span>Visualizza commenti</span>
+										<div id='displaynote' class="p-0">
+											<div class="card card-body well well-sm m-1 mt-2 p-0" id="noteCard0">
+												<span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessun commento visualizzato</span>
+											</div>
 										</div>
 									</div>
   									<div class="tab-pane fade p-0 bg-lida-vis" id="vis1" role="tabpanel" aria-labelledby="vis1-tab">
-										<div id='displayinfo' class="p-3"><span>Visualizza struttura periodo</span>
+										<div id='displayinfo' class="p-0">
+											<div class="card card-body well well-sm m-1 mt-2 p-0" id="infoCard0">
+												<span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessuna struttura visualizzata</span>
+											</div>
 										</div>
 									</div>
 								</div>
@@ -520,7 +527,7 @@
 											style="height: 32px; width: 76px;"
 											type="button" id="showOptions" data-toggle="collapse"
 											data-target="#collapseOptions" aria-expanded="false"
-											aria-controls="collapseExample">
+											aria-controls="collapseOptions">
 											<span class="text-muted">Opzioni</span>
 										</button>
 										<button class="btn btn-sm btn-outline-secondary bg-light ml-1"
diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js
index 0d87cd4..f6dfd09 100644
--- a/js/cesareBrowse.js
+++ b/js/cesareBrowse.js
@@ -727,7 +727,7 @@ function resetFrasi(){
 
 	function initCitazioni(){
 		//"#InfernoCanto_1"
-		console.log('VISTA CITAZIONI!')
+		//console.log('VISTA CITAZIONI!')
 		var mcanto=cantoDisplayed.replace("#",'')
 		cantica=''
 		if (mcanto.startsWith('Inf'))
@@ -739,15 +739,15 @@ function resetFrasi(){
 		canto=mcanto.split('_')[1]
 		if (canto.length==1)
 			canto='0'+canto
-		console.log(cantica+', '+canto)
+		//console.log(cantica+', '+canto)
 		commentsArray=getVersiConCitazioni(cantica, canto)
 
-		console.log("Array prima")
-		console.log(commentsArray)
+		//console.log("Array prima")
+		//console.log(commentsArray)
 
-		commentsArray.forEach(removeHtmlTags)
-		console.log("Array dopo")
-		console.log(commentsArray)		
+		commentsArray.forEach(removeHtmlTags2)
+		//console.log("Array dopo")
+		//console.log(commentsArray)		
 	}
 
 	/* Luca: removeHtmlTags2 e' la versione compatta di removeHtmlTags*/	
@@ -764,125 +764,6 @@ function resetFrasi(){
 			}
 		}
 	}
-
-	function removeHtmlTags(value){
-		var text = value["annotazione"]
-		if (text != null){
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;","");
-			text = text.replace("&raquo;","");
-			text = text.replaceAll("\n"," ");
-			value["annotazione"] = text;
-		}
-				
-		text = value["verso"]
-		if (text != null){
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;","");
-			text = text.replace("&raquo;","");
-			text = text.replaceAll("\n"," ");
-			value["verso"] = text;
-		}
-		
-		text = value["commentario"]
-		if (text != null){
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;","");
-			text = text.replace("&raquo;","");
-			text = text.replaceAll("\n"," ");
-			value["commentario"] = text;
-		}
-		
-		text = value["frammentoNota"]
-		if (text != null){
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;","");
-			text = text.replace("&raquo;","");
-			text = text.replaceAll("\n"," ");
-			value["frammentoNota"] = text;
-		}
-		
-		text = value["AutoreCitazione"]
-		if (text != null){
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;","");
-			text = text.replace("&raquo;","");
-			text = text.replaceAll("\n"," ");
-			value["AutoreCitazione"] = text;
-		}
-		
-		text = value["FonteCitazione"]
-		if (text != null){
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;","");
-			text = text.replace("&raquo;","");
-			text = text.replaceAll("\n"," ");
-			value["FonteCitazione"] = text;
-		}
-		
-		text = value["NotaFonteCitazione"]
-		if (text != null) {
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;", "");
-			text = text.replace("&raquo;", "");
-			text = text.replaceAll("\n"," ");
-			value["NotaFonteCitazione"] = text;
-		}
-		
-		text = value["LuogoFonteCitazione"]
-		if (text != null) {
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;", "");
-			text = text.replace("&raquo;", "");
-			text = text.replaceAll("\n"," ");
-			value["LuogoFonteCitazione"] = text;
-		}
-
-		text = value["TestoFonteCitazione"]
-		if (text != null) {
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;", "");
-			text = text.replace("&raquo;", "");
-			text = text.replaceAll("\n"," ");
-			value["TestoFonteCitazione"] = text;
-		}
-		
-		text = value["URLFonteCitazione"]
-		if (text != null) {
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;", "");
-			text = text.replace("&raquo;", "");
-			text = text.replaceAll("\n"," ");
-			value["URLFonteCitazione"] = text;
-		}
-
-		text = value["NaturaRiferimento"]
-		if (text != null) {
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;", "");
-			text = text.replace("&raquo;", "");
-			text = text.replaceAll("\n"," ");
-			value["NaturaRiferimento"] = text;
-		}
-
-		text = value["RapportoCommentoCommentatoreText"]
-		if (text != null) {
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;", "");
-			text = text.replace("&raquo;", "");
-			text = text.replaceAll("\n"," ");
-			value["RapportoCommentoCommentatoreText"] = text;
-		}
-
-		text = value["RapportoSoggettoOggetto"]
-		if (text != null) {
-			text = text.replace(/<(.|\n)*?>/g, '');
-			text = text.replace("&laquo;", "");
-			text = text.replace("&raquo;", "");
-			text = text.replaceAll("\n"," ");
-			value["RapportoSoggettoOggetto"] = text;
-		}
-	}
 	
 	jQuery(document).delegate(' .showcomments', 'click', function() {
 		var cid = $(this).attr('id');
@@ -899,84 +780,82 @@ function resetFrasi(){
 							break;
 				case "3":	cantica = "Paradiso";
 		}
-			
-		var commentArea = $('#CardCommenti');
-		commentArea.empty()
+		var commentArea = $('#displaynote');
+		// commentArea.empty()
+		if ($('#noteCard0').length ) {
+			$("#noteCard0")[0].remove();
+		}
 		var id = cid.substr(9);		
 		var collapseNote;
 		
 		for (var pos in commentsArray){
-			var claBody = $('<div class="card-body p-0 mx-1 mb-1 bg-lida11 border rounded" id="claBodyxX1Xx">');
+			console.log("Id: "+id);
+			var noteCard = $('<div class="card card-body well well-sm m-1 mt-2 p-0" id="noteCard' + id + '">');			
+			var collapseCardBody = $('<div class="card-body p-0 mx-1 mb-1 border rounded" >');
 			var divCampiSingoli = $('<div class="d-flex align-content-start flex-wrap text-muted">');
 
 			var comments = commentsArray[pos]
 			if (comments.verso == id){
-				createNoteHeader(commentArea, comments, id, cantica, parcid);			
+				createNoteHeader(noteCard, comments, id, pos, cantica, parcid);			
 				
-				collapseNote = $('<div class="collapse show"'+'aria-labelledby="headingCX" data-parent="#sortable0">');
-				collapseNote.attr('id',"collapseNote"+id)
-				collapseNote.append(claBody);
-				commentArea.append(collapseNote)
+				collapseNote = $('<div class="collapse show">');
+				collapseNote.attr('id',"collapseNote"+id+ '_' + pos)
 
 				if (comments.TestoFonteCitazione != null && comments.TestoFonteCitazione != "nan"){
-					createModule(collapseNote,"Testo della fonte: ", comments.TestoFonteCitazione, "1", id)
+					createModule(collapseCardBody,"Testo della fonte: ", comments.TestoFonteCitazione, "1", id, pos)
 				}
-					
 				if (comments.NaturaRiferimento != null){
 					createDivSingola(divCampiSingoli, "Tipo Riferimento: ", comments.NaturaRiferimento)
-					divCampiSingoli.appendTo(collapseNote);
-
+					divCampiSingoli.appendTo(collapseCardBody);
 				}
 				if (comments.commentario != null){
 					createDivSingola(divCampiSingoli, "Commentatore: ", comments.commentario)
-					divCampiSingoli.appendTo(collapseNote);
-
+					divCampiSingoli.appendTo(collapseCardBody);
 				}		
 				if (comments.RapportoSoggettoOggetto != null){
 					createDivSingola(divCampiSingoli, "Rapporto Testo/Fonte: ", comments.RapportoSoggettoOggetto)
-					divCampiSingoli.appendTo(collapseNote);
-
+					divCampiSingoli.appendTo(collapseCardBody);
 				}
 				if (comments.RapportoCommentoCommentatoreText != null && comments.RapportoCommentoCommentatoreText != "nan"){
-					createModuleCommentatore (collapseNote, comments.RapportoCommentoCommentatoreText, "5", id)
+					createModuleCommentatore (collapseCardBody, comments.RapportoCommentoCommentatoreText, "5", id, pos)
 				}
 				if (comments.frammentoNota != null && comments.frammentoNota != "nan"){
-					createModule(collapseNote,"Nota: ", comments.frammentoNota, "7", id)
+					createModule(collapseCardBody,"Nota: ", comments.frammentoNota, "7", id, pos)
 				}				
 				if (comments.annotazione != null && comments.annotazione != "nan"){
-					createModule(collapseNote,"Annotazione completa: ", comments.annotazione, "6", id)
+					createModule(collapseCardBody,"Annotazione completa: ", comments.annotazione, "6", id, pos)
 				}				
 				if (comments.NotaFonteCitazione != null && comments.NotaFonteCitazione != "nan" && comments.NotaFonteCitazione != ""){
-					createModule(collapseNote,"Nota dell'annotatore: ", comments.NotaFonteCitazione, "8", id)
+					createModule(collapseCardBody,"Nota dell'annotatore: ", comments.NotaFonteCitazione, "8", id, pos)
 				}
-				commentArea.append('<hr class="pt-0 center text-dark bg-dark" style="width: 100%;">');
+				//commentArea.append('<hr class="pt-0 center text-dark bg-dark" style="width: 100%;">');
+				collapseCardBody.appendTo(collapseNote);
+				collapseNote.appendTo(noteCard);
+				commentArea.append(noteCard)
 			}
 		}		
 		$('#tab-list #vis0-tab').tab('show')
 	})
 	
-	function createNoteHeader(headerDiv, comments, id, cantica, parcid){
+	function createNoteHeader(noteCardX, comments, id, pos, cantica, parcid){
 		var nomeAutore = "";
 		var titoloFonte = "";
 		var luogoFonte = "";
-		var commentHeader = $('<div class="d-flex align-content-start flex-nowrap text-muted mt-1" id= commentoVerso' + id + ' >')
-		var rigaNota = $('<div class="p-2" >');
-		var spanButtons = $('<span class="h6">');
-		var buttons = $('<div class="ml-auto p-1 pr-2">')
-		var collapseButton = $('<button id="collapseBtnNote'+id+'"'+
-				'class="btn btn-sm btn-outline-primary bg-light collapseNote border rounded text-primary px-1 pb-0  show"'+
-				'data-toggle="collapse" data-target="#collapseNote'+id+'"'+
-				'aria-expanded="true" aria-controls="collapseNote'+id+'">'+
+		var commentHeader = $('<div class="d-flex align-content-start flex-nowrap text-muted" id="commentoVerso' + id + '_' + pos + '">')
+		var rigaNota = $('<div class="p-2 mt-1">');
+		var buttons = $('<div class="d-flex flex-wrap-reverse ml-auto align-items-center justify-content-end p-1">')
+		var collapseButton = $('<button id="collapseBtnNote'+id+ '_' + pos +'"'+
+				'class="btn btn-sm btn-outline-primary bg-light collapseNote border rounded mb-auto text-primary align-self-end px-1 pb-0"'+
+				'data-toggle="collapse" data-target="#collapseNote'+id+ '_' + pos +'"'+
+				'aria-expanded="true" aria-controls="collapseNote'+id+ '_' + pos +'">'+
 				'<ion-icon name="archive"></ion-icon>');
-		var closeButton = $('<button id="closeNote'+id+'"'+
-				'class="btn btn-sm btn-outline-primary bg-light closeNote border rounded text-primary px-1 pb-0"'+
-				'style="z-index: 1000">'+
+		var closeButton = $('<button id="closeNote'+id+ '_' + pos +'"'+
+				'class="btn btn-sm btn-outline-primary bg-light closeNote border rounded mb-auto text-primary align-self-end px-1 pb-0 ml-1">'+
 				'<ion-icon name="close-circle"></ion-icon>');
 		
 		rigaNota.append('<b>' + cantica + '</b><i>' + ", Canto " + getRoman(parcid[2]) + " Verso " + parcid[3] + "</i> - ");
-		collapseButton.appendTo(spanButtons);
-		closeButton.appendTo(spanButtons);
-		spanButtons.appendTo(buttons)
+		collapseButton.appendTo(buttons);
+		closeButton.appendTo(buttons);
 		
 		if (comments.NomeAutoreCitazione == null) {
 			nomeAutore = 'riferimento';
@@ -1008,12 +887,10 @@ function resetFrasi(){
 			rigaNota.append('<b>Coordinate della Fonte:</b><a href="' + comments.URLFonteCitazione + '"target="_blank"<i> ' + luogoFonte + '</i>, </a><br>');
 		} else {
 			rigaNota.append('<b>Coordinate della Fonte:</b><i> ' + luogoFonte + '</i><br>');
-
 		}
 		rigaNota.appendTo(commentHeader);
 		buttons.appendTo(commentHeader);
-
-		commentHeader.appendTo(headerDiv);
+		commentHeader.appendTo(noteCardX);
 	}
 	
 	function createDivSingola(divCampi, campo, valore){
@@ -1022,24 +899,24 @@ function resetFrasi(){
 		divSingola.appendTo(divCampi);
 	}
 
-	
-	function createModule(collapse,label, testo, num, id){
+	function createModule(collapse,label, testo, num, id, pos){
 		var divModule = $('<div class="module pb-0">');
-		var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+'" aria-expanded="false">')
+		var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+ '_' + pos +'" aria-expanded="false">')
 		var divContent = $('<div class="d-flex align-content-start flex-wrap text-muted">');
 		var divTesto = $('<div class="p-2">')
 		var nota = '<b>'+label+'</b>'+testo;
-		divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+'" role="button"></a>')
+		divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+ '_' + pos +'" role="button"></a>')
       	divTesto.append(nota);
       	divContent.append(divTesto);
       	divNote.append(divContent)
       	divModule.append(divNote);
       	divModule.appendTo(collapse);
 	}
-	function createModuleCommentatore(collapse, commento, num, id){
+	
+	function createModuleCommentatore(collapse, commento, num, id, pos){
 		var commentoCommentatore = commento.split(',');
 		var divModule = $('<div class="module pb-0">');
-		var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+'" aria-expanded="false">')
+		var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+ '_' + pos +'" aria-expanded="false">')
 
 		var divContent = $('<div class="d-flex align-content-start flex-wrap text-muted">');
 		var divTesto = $('<div class="p-2">')
@@ -1067,13 +944,13 @@ function resetFrasi(){
 			nota = '<b>Rapporto Commento/Commentatore: </b>'+esitoCommento +' <a href="'+urlCommento+'"target="_blank"<i>' + autoreCommento+ '</i></a>, ' +  '</b><br>';
 		}
 			
-		divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+'" role="button"></a>')
+		divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+ '_' + pos +'" role="button"></a>')
       	divTesto.append(nota);
 
       	divContent.append(divTesto);
       	divNote.append(divContent)
       	divModule.append(divNote);
-      	divModule.appendTo(collapse);
+      	//divModule.appendTo(collapse);
 	}
 
 	function hasComments(cid){
@@ -1310,7 +1187,7 @@ function resetFrasi(){
 					//if (hasComments(idCommento)){
 					if (commNumber>0){
 						createCommentSpan(idCommento, elverso, commNumber)
-						console.log("Numero commenti: "+commNumber)
+						//console.log("Numero commenti: "+commNumber)
 					}
 					
 					if(currSentenceId!=null && currSentenceId != sentenceid){
diff --git a/js/script_4.4.js b/js/script_4.4.js
index 89f5053..810c0d8 100644
--- a/js/script_4.4.js
+++ b/js/script_4.4.js
@@ -179,7 +179,7 @@ $(document).ready(function() {
 		//maxHeight: 880,
 		alsoResize: "#displaycanto",
 		resize: function(event, ui) {
-			console.log($("#colVisualizza").css("height"));
+			//console.log($("#colVisualizza").css("height"));
 			$("#displaycanto").width(" min-content");
 			var infoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2-46;
 			$("#displayinfo").css("maxHeight", infoHeightToSet+"px");
@@ -187,7 +187,7 @@ $(document).ready(function() {
 			$("#displaynote").css("maxHeight", infoHeightToSet+"px");
 			$("#displaynote").css("height", infoHeightToSet+"px");
 			$(".visInfo").css("height", (infoHeightToSet+4)+"px");
-			console.log($("#colVisualizza").css("height"));
+			//console.log($("#colVisualizza").css("height"));
 			getDimensionsDiv(true);
 		},
 		stop: function(event, ui) {
@@ -430,8 +430,11 @@ $(document).ready(function() {
 
 	// Evento: click sull'icona rimuovi nota
     $('#displaynote').on('click', '.closeNote', function() {
-		var claListItemId = $(this).closest('.card');
-		$(claListItemId).remove();
+		var noteListItemId = $(this).closest('.card');
+		$(noteListItemId).remove();
+		if ($('#displaynote .card').length == 0) {
+			$('#displaynote').append($(emptyNoteList))
+		};
 	});
 
 		
@@ -590,6 +593,8 @@ $(document).ready(function() {
     const iconCloseCond = '<div class="p-0 mr-3 mt-0 text-right text-success"><span class="iconClClass removeCond"><ion-icon name="close-circle"></ion-icon></span></div>';
 	const emptyClaList = '<li id="li-cla0" class="list-group-item align-items-center my-1 ui-state-default ui-state-disabled border text-muted bg-white ui-state-disabled-opacity-06 small">Nessuna clausola aggiunta.</li>';
 	const defaultCond = '<div id="cla-defaultCond" class="col-12 p-1 small font-weight-bold text-muted"> Clausole e condizioni in AND di default</div>';
+	const emptyNoteList = '<div class="card card-body well well-sm m-1 mt-2 p-0" id="noteCard0"><span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessun commento visualizzato</span></div>';
+
 	const canticheList = ["Inferno","Purgatorio","Paradiso"];
 	const cla0JsonText = '{"queryText": "", "lemma_forma": "lemma", "opzioni_testo": "parola", "TipoClausola": "0", "Attiva": "0"}';
 	const condLIplaceholderText1 = 'Trascina qui almeno 1 clausola o condizione';