diff --git a/css/custom.css b/css/custom.css
index e4d2163..4129582 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -1,5 +1,15 @@
 /* custom.css */    
 
+.badge-outline-info {
+	padding: .1rem .15rem;
+	margin-left: .15rem;
+	margin-right: .2rem;
+	font-weight: 300;
+	vertical-align: super;
+    color: #3da5f4;
+    border: 1px solid #3da5f4;
+}
+
 .navig-canto:hover {
   font-weight: 800;
   color: #007bff !important;
@@ -32,6 +42,10 @@ table {
 #selectable0 .ui-selected { background: #00968e; color: white; }
 #selectable0 { list-style-type: none; margin: 0; padding: 0; }
 
+#selectable2 .ui-selecting { background: #4abd8c; }
+#selectable2 .ui-selected { background: #00968e; color: white; }
+#selectable2 { list-style-type: none; margin: 0; padding: 0; }
+
 .selCanti {
 	border:6px solid #f8f9fa;
 	border-collapse:collapse;
diff --git a/index_2.0.html b/index_2.0.html
index f097254..6b51011 100644
--- a/index_2.0.html
+++ b/index_2.0.html
@@ -93,14 +93,13 @@
 								<button class="btn btn-sm btn-link" id="cantica1" data-toggle="collapse"
 									data-target="#collapseOne" aria-expanded="true"
 									aria-controls="collapseOne">Inferno</button>
-								<span class="badge badge-primary badge-pill">14</span>
 							</h6>
 						</div>
 
 						<div id="collapseOne" class="collapse show"
 							aria-labelledby="headingOne" data-parent="#accordion">
 							<div class="card-body">
-								<span class="navig-canto small text-muted" name="InfernoCanto 1" href="#" style="line-height: 1.2em">1</span>
+								<span class="navig-canto small text-muted" name="InfernoCanto 1" href="#" style="line-height: 1.2em">1<span class="badge badge-outline-info badge-pill">14</span></span>
 								<span class="navig-canto small text-muted" name="InfernoCanto 2" href="#" style="line-height: 1.2em">2</span>
 								<span class="navig-canto small text-muted" name="InfernoCanto 3" href="#" style="line-height: 1.2em">3</span>
 								<span class="navig-canto small text-muted" name="InfernoCanto 4" href="#" style="line-height: 1.2em">4</span>
@@ -139,11 +138,11 @@
 					</div>
 					<div class="card">
 						<div class="card-header" id="headingTwo">
-							<h5 class="mb-0">
+							<h6 class="mb-0">
 								<button class="btn btn-sm btn-link collapsed" id="cantica2" data-toggle="collapse"
 									data-target="#collapseTwo" aria-expanded="false"
 									aria-controls="collapseTwo">Purgatorio</button>
-							</h5>
+							</h6>
 						</div>
 						<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
 							<div class="card-body">
@@ -185,11 +184,11 @@
 					</div>
 					<div class="card">
 						<div class="card-header" id="headingThree">
-							<h5 class="mb-0">
+							<h6 class="mb-0">
 								<button class="btn btn-sm btn-link collapsed" id="cantica3" data-toggle="collapse"
 									data-target="#collapseThree" aria-expanded="false"
 									aria-controls="collapseThree">Paradiso</button>
-							</h5>
+							</h6>
 						</div>
 						<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
 							<div class="card-body">