diff --git a/src/seqcoverpkg/seqcover.html b/src/seqcoverpkg/seqcover.html
index 0365b27..2c4618b 100644
--- a/src/seqcoverpkg/seqcover.html
+++ b/src/seqcoverpkg/seqcover.html
@@ -59,6 +59,14 @@
             font-weight: 700;
         }
 
+        .popover{
+            max-width: 40%;
+        }
+
+        .fa-question-circle {
+            padding-left: .30em;
+        }
+
     </style>
 </head>
 
@@ -80,21 +88,21 @@
     <main role="main" class="container-fluid">
 
         <div class="row pt-2 bg-light">
-            <div class="col-md-5 col-lg-7">
-                <h5>Coverage summary</h5>
+            <div class="col-md-6 col-lg-6">
+                <h5>Coverage summary <span id="navigation-popover" data-toggle="popover"><i class="far fa-question-circle fa-sm"></i></span></h5>
             </div>
-            <div class="col-sm-12 col-md-7 col-lg-5 d-flex align-items-center">
-                <div class="input-group input-group-sm">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">Sample Scaling</span>
-                    </div>
-                    <input class="form-control z_scale" type="checkbox"
-                    id="z_scale_samples" title="scale values within each sample">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text">Gene Scaling</span>
+            <div class="col-sm-12 col-lg-6 d-flex align-items-center">
+                <div class="col-auto my-1">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input z_scale" type="checkbox" value="" id="z_scale_samples">
+                        <label class="form-check-label pr-3" for="z_scale_samples" title="Scale values within each sample" data-toggle="tooltip">
+                            Sample Scaling
+                        </label>
+                        <input class="form-check-input z_scale" type="checkbox" value="" id="z_scale_genes">
+                        <label class="form-check-label" for="z_scale_genes" title="Scale values within each gene" data-toggle="tooltip">
+                            Gene Scaling
+                        </label>
                     </div>
-                    <input class="form-control z_scale" type="checkbox" 
-                    id="z_scale_genes" title="scale values within each gene">
                 </div>
                 <div class="input-group input-group-sm">
                     <div class="input-group-prepend">
@@ -115,7 +123,10 @@ <h5>Coverage summary</h5>
 
         <div class="row pt-2 mb-4">
             <div class="col-md-5 col-lg-7">
-                <h5>Depth per base: <span id="header-selected-gene"></span></h5>
+                <h5>Depth per base:
+                    <span id="header-selected-gene"></span>
+                    <span id="depth-plot-popover" data-toggle="popover"><i class="far fa-question-circle fa-sm"></i></span>
+                </h5>
             </div>
             <div class="col-12"><div id="gene_plot"></div></div>
         </div>
diff --git a/src/seqcoverpkg/seqcover.js b/src/seqcoverpkg/seqcover.js
index b7dd380..9c21e1a 100644
--- a/src/seqcoverpkg/seqcover.js
+++ b/src/seqcoverpkg/seqcover.js
@@ -347,6 +347,7 @@ function tie_heatmap_to_line_plot() {
     // https://issue.life/questions/44297012
     var xticks = jQuery("#heatmap_plot .xaxislayer-above > .xtick > text")
     xticks.css({ "cursor": "pointer" })
+    xticks.attr('class', 'unselected_label')
     var d = document.getElementById("gene_plot")
 
     xticks.each(function (i) {
@@ -451,7 +452,6 @@ function draw_heatmap() {
         // responsive: true,
     }
     let trace = [{ x: x, y: y, z: z, type: 'heatmap', hoverongaps: false, colorscale: "Cividis" }]
-    // let trace = [{ x: x, y: y, z: z, type: 'heatmap', xgap: 1, ygap: 1, hoverongaps: false, colorscale: "Cividis" }]
 
     //https://plotly.com/javascript/reference/heatmap/
     let p = document.getElementById('heatmap_plot')
@@ -504,6 +504,7 @@ function draw_heatmap() {
     p.on('plotly_afterplot', function () {
         // initialize first gene as selected; or re-use selected (when changing metric)
         let yticks = jQuery("#heatmap_plot .yaxislayer-above > .ytick > text")
+        yticks.attr('class', 'unselected_label')
         if (!selected) {
             jQuery(yticks[plot_data.length - 1]).attr("class", "selected_label")
         } else {
@@ -524,8 +525,40 @@ function draw_heatmap() {
     })
 }
 
+function update_popovers() {
+    $('[data-toggle="tooltip"]').tooltip()
+
+    $("#navigation-popover").popover({
+        container: "body",
+        html: true,
+        title: "Navigating the report",
+        content: `
+            <ul class="m-0 ml-1 p-2">
+                <li>X and Y axes labels are clickable</li>
+                <li>Clicking gene names (y-axis labels) updates 'Depth per base' plot</li>
+                <li>Clicking sample names (x-axis labels) highlights the sample trace</li>
+                <li>Clicking heatmap values updates the selected gene and highlights the sample</li>
+            </ul>
+        `,
+    })
+    $("#depth-plot-popover").popover({
+        container: "body",
+        html: true,
+        title: "Depths by position across gene",
+        content: `
+            <ul class="m-0 ml-1 p-2">
+                <li>Depths per base per sample are displayed over gene length</li>
+                <li>Individual transcripts are merged into the Merged transcript</li>
+                <li>CDS segments are colored light red</li>
+                <li>UTR segments are light gray</li>
+            </ul>
+        `,
+    })
+}
+
 jQuery(document).ready(function () {
     update_header_metadata(Object.keys(plot_data[0].plot_coords.depths).length, plot_data.length)
+    update_popovers()
 
     if (Object.keys(plot_data[0].plot_coords.background_depths).length == 0) {
         jQuery('#cds_lt_bg').remove()
@@ -581,7 +614,6 @@ jQuery(document).ready(function () {
     })
 })
 
-
 function z_transform_columns(z) {
     var ztr = new Array(z.length);
     for(var rowi=0; rowi < z.length; rowi++){