diff --git a/css/custom2_4.3.css b/css/custom2_4.3.css
index d11d572..6c82d52 100644
--- a/css/custom2_4.3.css
+++ b/css/custom2_4.3.css
@@ -151,7 +151,7 @@ Minimap
 	width: 70px;
 	position:absolute;
 	top: 2px;
-	left: 1px;
+	left: 0px;
 	transform-origin: 0 0;
 	z-index: 100;
 	border: 2px solid;
@@ -346,7 +346,7 @@ li::marker {
 	$text-muted	$gray-700		#495057	
 
 - lida2:
-	$primary						#734450
+	$primary	rgb(68, 41, 48)		#734450
 	$secondary	$gray-600			#b8a387		-
 	$success	rgb(65, 93, 67)		#054a29	#415d43
 	$info							#55327d
@@ -392,6 +392,18 @@ li::marker {
 
 /* ------- $success	rgb(65, 93, 67) / #415d43 , #DEE2E6 -------- */
 
+.custom-control-input.pri:active~.custom-control-label.pri::before {
+	background-color: rgba(68, 41, 48, 0.5) !important;
+	border-color: rgba(68, 41, 48, 0.5) !important;
+}
+.custom-control-input.pri:focus:not(:checked)~.custom-control-label.pri::before {
+	border-color: rgb(68, 41, 48)  !important;
+}
+.custom-control-input.pri:checked~.custom-control-label.pri::before {
+	border-color: rgb(68, 41, 48) !important;
+	background-color: rgb(68, 41, 48) !important;
+}
+
 .custom-control-input:active~.custom-control-label::before {
 	background-color: rgba(65, 93, 67, 0.5) !important;
 	border-color: rgba(65, 93, 67, 0.5) !important;
diff --git a/index_4.5.html b/index_4.5.html
index 79c2c7a..069e8ed 100644
--- a/index_4.5.html
+++ b/index_4.5.html
@@ -94,58 +94,52 @@
 								<a class="dropdown-item" href="#">Crediti</a>
 							</div>			
 						</li>
-					</ul>
-					<ul class="navbar-nav ml-md-auto">
 
-						<li class="nav-item dropdown pt-1 pr-2">
+						<li class="nav-item dropdown pt-1 pl-2">
 							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 									Visualizza
 							</a>
-							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+							<div class="dropdown-menu pl-3" aria-labelledby="navbarDropdown" id="opzioniVista">
 
 								<div
-									class="dropdown-item custom-control custom-checkbox text-success">
-									<input type="checkbox" class="valoreVista custom-control-input"
-										id="visFormeCheck"> <label
-										class="custom-control-label text-success" for="visFormeCheck">Forme</label>
+									class="dropdown-item custom-control custom-checkbox text-link pr-0">
+									<input type="checkbox" class="valoreVista custom-control-input pri"
+										id="visPeriodi"> <label
+										class="custom-control-label pri text-link"
+										for="visPeriodi">Periodi</label>
 								</div>
 
 								<div
-									class="dropdown-item custom-control custom-checkbox text-success">
-									<input type="checkbox" class="valoreVista custom-control-input"
-										id="visPeriodiCheck"> <label
-										class="custom-control-label text-success"
-										for="visPeriodiCheck">Periodi</label>
+									class="dropdown-item custom-control custom-checkbox text-link pr-0">
+									<input type="checkbox" class="valoreVista custom-control-input pri"
+										id="visRiferimenti" checked> <label
+										class="custom-control-label pri text-link"
+										for="visRiferimenti">Riferimenti</label>
 								</div>
 
 								<div
-									class="dropdown-item custom-control custom-checkbox text-success">
-									<input type="checkbox" class="valoreVista custom-control-input"
-										id="visRiferimentiCheck"> <label
-										class="custom-control-label text-success"
-										for="visRiferimentiCheck">Riferimenti</label>
-								</div>
-
-								<div
-									class="dropdown-item custom-control custom-checkbox text-success">
-									<input type="checkbox" class="valoreVista custom-control-input"
-										id="visDialoghiCheck"> <label
-										class="custom-control-label text-success"
-										for="visDialoghiCheck">Dialoghi</label>
+									class="dropdown-item custom-control custom-checkbox text-link pr-0">
+									<input type="checkbox" class="valoreVista custom-control-input pri"
+										id="visDialoghi"> <label
+										class="custom-control-label pri text-link"
+										for="visDialoghi">Dialoghi</label>
 								</div>
 								<div class="dropdown-divider"></div>
 
 								<div
-									class="dropdown-item custom-control custom-checkbox text-success">
-									<input type="checkbox" class="valoreVista custom-control-input"
-										id="visMetaforeCheck" disabled> <label
-										class="custom-control-label text-success"
-										for="visMetaforeCheck">Metafore</label>
+									class="dropdown-item custom-control custom-checkbox text-link pr-0">
+									<input type="checkbox" class="valoreVista custom-control-input pri"
+										id="visMetafore" disabled> <label
+										class="custom-control-label pri text-link"
+										for="visMetafore">Metafore</label>
 								</div>
 							</div>			
 						</li>
 
-						<li class="nav-item pt-1">
+					</ul>
+					<ul class="navbar-nav ml-md-auto">
+
+						<li class="nav-item pt-2">
 							<div class="input-group input-group-sm">
 								<div class="input-group-prepend">
 									<label class="input-group-text border-right-0 border-secondary pr-0"><ion-icon
diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js
index 26eec98..ab8e49c 100644
--- a/js/cesareBrowse.js
+++ b/js/cesareBrowse.js
@@ -69,6 +69,54 @@ $(document).ready(function() {
 	const minim=$(" .minimap__content")
 	//const end = performance.now();
 	//console.log(`Load cantiche time: ${end - start} ms`);
+
+$('#opzioniVista :checkbox').change(function() {
+	changedOption = $(this)[0].id;
+	switch (changedOption + "|" + this.checked){
+		case "visPeriodi|true":
+			//resetFrasi()
+			selectedVista = 'frasi'
+			$(cantoDisplayed).attr('style', 'display: d-flex;')
+
+			//cancello il grafo sintattico
+			//resetGraphStruct()
+			//emptyStructCard()
+			loadFrasi();
+				
+			break;
+		case "visPeriodi|false":
+			$("#vistaFrasi").css("display", "none");
+			resetFrasi()
+			$(cantoDisplayed).attr('style', 'display: d-flex;')
+			//cancello il grafo sintattico
+			resetGraphStruct()
+			emptyStructCard()
+			break;
+		case "visRiferimenti|true":
+			$(".showcomments").css("display", "inline-block");
+			break;					
+		case "visRiferimenti|false":
+			$(".showcomments").css("display", "none");
+			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>';
+			$('#displaynote').empty()
+			$('#displaynote').append($(emptyNoteList))
+			break;					
+		case "visDialoghi|true":
+			selectedVista = 'dialoghi'
+			resetFrasi()
+			loadDialoghi();
+			break;			
+		case "visDialoghi|false":
+			$("#vistaDialoghi").css("display", "none");
+			resetFrasi()
+			break;						
+		case "visMetafore|true":
+			//loadMetafore();
+			break;			
+		case "visMetafore|false":
+			$("#vistaMetafore").css("display", "none");
+	}
+});
 	
 $("#valoreVista").on('change', function() {
 	selectedVista = $(this).val();