diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
index 6e8cd7c8f8..7bfaeeb98a 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-browser-template.js
@@ -345,18 +345,8 @@ class VariantInterpreterBrowserTemplate extends LitElement {
         this.requestUpdate();
     }
 
-    render() {
-        // Check Project exists
-        if (!this.opencgaSession?.study) {
-            return html`
-                <div class="guard-page">
-                    <i class="fas fa-lock fa-5x"></i>
-                    <h3>No project available to browse. Please login to continue</h3>
-                </div>
-            `;
-        }
-
-        return html`
+    renderStyles() {
+        return html `
             <style>
                 .prioritization-center {
                     margin: auto;
@@ -394,6 +384,22 @@ class VariantInterpreterBrowserTemplate extends LitElement {
                     margin: 20px 0;
                 }
             </style>
+        `;
+    }
+
+    render() {
+        // Check Project exists
+        if (!this.opencgaSession?.study) {
+            return html`
+                <div class="guard-page">
+                    <i class="fas fa-lock fa-5x"></i>
+                    <h3>No project available to browse. Please login to continue</h3>
+                </div>
+            `;
+        }
+
+        return html`
+
 
             ${this._config.showTitle ? html`
                 <tool-header
@@ -404,17 +410,17 @@ class VariantInterpreterBrowserTemplate extends LitElement {
 
             ${this.clinicalAnalysis.interpretation.locked ? html`
                 <div class="row">
-                    <div class="panel panel-warning col-sm-8 col-sm-offset-2" style="padding: 0">
-                        <div class="panel-heading" style="font-size: 1.1em">
+                    <div class="card text-bg-warning col-sm-8 offset-sm-2 p-0">
+                        <div class="card-header" style="font-size: 1.1em">
                             <label>Interpretation locked:</label> you cannot modify this interpretation. You can unlock the interpretation in
-                            <span style="font-style: italic;">Case Info >> Interpretation Manager</span>.
+                            <span class="fst-italic">Case Info >> Interpretation Manager</span>.
                         </div>
                     </div>
                 </div>` : null
             }
 
             <div class="row">
-                <div class="col-md-2 mb-3">
+                <div class="col-2">
                     <div class="d-grid gap-2 mb-3 cy-search-button-wrapper">
                         <button type="button" class="btn btn-primary btn-block" ?disabled="${!this.searchActive}" @click="${this.onSearch}">
                             <i class="fa fa-search" aria-hidden="true"></i>
@@ -434,7 +440,7 @@ class VariantInterpreterBrowserTemplate extends LitElement {
                     </variant-browser-filter>
                 </div> <!-- Close col-md-2 -->
 
-                <div class="col-md-10">
+                <div class="col-10">
                     <div>
                         <variant-interpreter-browser-toolbar
                             .clinicalAnalysis="${this.clinicalAnalysis}"
diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
index 8d3fb9a0bb..70a1d33ad2 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid-formatter.js
@@ -19,7 +19,6 @@ import VariantGridFormatter from "../variant-grid-formatter.js";
 import UtilsNew from "../../../core/utils-new.js";
 import BioinfoUtils from "../../../core/bioinfo/bioinfo-utils.js";
 
-
 export default class VariantInterpreterGridFormatter {
 
     static roleInCancerFormatter(value, row, index) {
@@ -123,23 +122,21 @@ export default class VariantInterpreterGridFormatter {
                 const clinicalSignificance = CLINICAL_SIGNIFICANCE_SETTINGS[re.classification.clinicalSignificance].id;
                 clinicalSignificanceHtml = `
                     <div style="margin: 5px 0px; color: ${CLINICAL_SIGNIFICANCE_SETTINGS[re.classification.clinicalSignificance].color}">${clinicalSignificance}</div>
-                    <div class="help-block">${re.classification.acmg.map(acmg => acmg.classification).join(", ")}</div>
+                    <div class="text-body-secondary">${re.classification.acmg.map(acmg => acmg.classification).join(", ")}</div>
                 `;
-                clinicalSignificanceTooltipText = `<div class='col-md-12 predictionTooltip-inner' style='padding: 0px'>
-                                                        <form class='form-horizontal'>
-                                                            <div class='form-group' style='margin: 0px 2px'>
-                                                                <label class='col-md-5'>ACMG</label>
-                                                                <div class='col-md-7'>${re.classification.acmg.join(", ")}</div>
-                                                            </div>
-                                                            <div class='form-group' style='margin: 0px 2px'>
-                                                                <label class='col-md-5'>ACMG Tier</label>
-                                                                <div class='col-md-7'>${re.classification.tier}</div>
-                                                            </div>
-                                                        </form>
-                                                   </div>`;
+                clinicalSignificanceTooltipText = `<div class='p-1' style='width: 250px;'>
+                                                        <div class='row mb-2'>
+                                                            <div class='col-6'>ACMG</div>
+                                                            <div class='col-6'>${re.classification?.acmg?.join(", ")}</div>
+                                                        </div>
+                                                        <div class='row mb-2'>
+                                                            <div class='col-6'>ACMG Tier</div>
+                                                            <div class='col-6'>${re.classification.tier}</div>
+                                                        </div>
+                                                    </div>`;
             }
         }
-        return `<a class='predictionTooltip' tooltip-title="Classification" tooltip-text="${clinicalSignificanceTooltipText}">
+        return `<a class='predictionTooltip text-decoration-none' tooltip-title="Classification" tooltip-text="${clinicalSignificanceTooltipText}">
                     ${clinicalSignificanceHtml}
                 </a>`;
     }
@@ -320,7 +317,7 @@ export default class VariantInterpreterGridFormatter {
                                 }
                             </div>
                             ${gene.modesOfInheritance ? `
-                                <div class="help-block" style="margin: 5px 0" title="Panel Mode of Inheritance of gene ${gene.name}">${gene.modesOfInheritance.join(", ")}</div>
+                                <div class="text-body-secondary" style="margin: 5px 0" title="Panel Mode of Inheritance of gene ${gene.name}">${gene.modesOfInheritance.join(", ")}</div>
                                 ` : ""
                             }
                             ${gene.confidence ? `
@@ -350,7 +347,7 @@ export default class VariantInterpreterGridFormatter {
                             </div>
                         ` : ""
                     }
-                        <div class="help-block">${re.classification.acmg?.map(acmg => acmg.classification || acmg)?.join(", ")}</div>
+                        <div class="text-body-secondary">${re.classification.acmg?.map(acmg => acmg.classification || acmg)?.join(", ")}</div>
                     `;
                 }
 
@@ -364,7 +361,7 @@ export default class VariantInterpreterGridFormatter {
                             </div>
                         ` : ""
                     }
-                        <div class="help-block">${re.review.acmg?.map(acmg => acmg.classification)?.join(", ")}</div>
+                        <div class="text-body-secondary">${re.review.acmg?.map(acmg => acmg.classification)?.join(", ")}</div>
                     `;
                 }
 
@@ -514,9 +511,9 @@ export default class VariantInterpreterGridFormatter {
 
                 // Get tooltip text
                 const tooltipText = VariantInterpreterGridFormatter._getSampleGenotypeTooltipText(row, sampleEntry, file);
-                resultHtml += `<a class="zygositySampleTooltip" tooltip-title="Variant Call Information" tooltip-text='${tooltipText}'>
-                                ${content}
-                              </a><br>`;
+                resultHtml += `<a class="zygositySampleTooltip text-decoration-none" tooltip-title="Variant Call Information" tooltip-text='${tooltipText}'>
+                                    ${content}
+                                </a><br>`;
             }
         }
 
@@ -992,12 +989,12 @@ export default class VariantInterpreterGridFormatter {
         return `
             <div>
                 ${config?.showEditReview ? `
-                    <button id="${prefix}${row.id}VariantReviewButton" class="btn btn-link" data-index="${index}" data-variant-id="${row.id}" ${disabled}>
-                        <i class="fa fa-edit icon-padding" aria-hidden="true"></i>&nbsp;Edit ...
+                    <button id="${prefix}${row.id}VariantReviewButton" class="btn btn-link text-decoration-none" data-index="${index}" data-variant-id="${row.id}" ${disabled}>
+                        <i class="fa fa-edit icon-padding" aria-hidden="true"></i>Edit ...
                     </button>
                 `: ""}
                 ${checked && row?.status ? `
-                    <div class="help-block" style="margin: 5px 0">${row.status}</div>
+                    <div class="text-body-secondary" style="margin: 5px 0">${row.status}</div>
                 ` : ""}
                 ${checked && (row.comments?.length > 0 || row.discussion?.text) ? `
                     <div style="">
diff --git a/src/webcomponents/variant/interpretation/variant-interpreter-grid.js b/src/webcomponents/variant/interpretation/variant-interpreter-grid.js
index f171155e42..a2e811d92c 100644
--- a/src/webcomponents/variant/interpretation/variant-interpreter-grid.js
+++ b/src/webcomponents/variant/interpretation/variant-interpreter-grid.js
@@ -847,10 +847,9 @@ export default class VariantInterpreterGrid extends LitElement {
                             <div class="dropdown">
                                 <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                     <i class="fas fa-toolbox" aria-hidden="true"></i>
-                                    <span>Actions</span>
-                                    <span class="caret" style="margin-left: 5px"></span>
+                                    Actions
                                 </button>
-                                <ul class="dropdown-menu dropdown-menu-end
+                                <ul class="dropdown-menu dropdown-menu-end">
                                     <li>
                                         <a id="${reviewId}" href="javascript: void 0" class="dropdown-item reviewButton" data-action="edit" ${reviewDisabled}>
                                             <i class="fas fa-edit reviewButton" aria-hidden="true"></i> Edit ...
@@ -1523,7 +1522,7 @@ export default class VariantInterpreterGrid extends LitElement {
         return [];
     }
 
-    render() {
+    renderStyle() {
         return html`
             <style>
                 .variant-link-dropdown:hover .dropdown-menu {
@@ -1537,6 +1536,11 @@ export default class VariantInterpreterGrid extends LitElement {
                     transform: scale(1.2);
                 }
             </style>
+        `;
+    }
+
+    render() {
+        return html`
 
             <opencb-grid-toolbar
                 .config="${this.toolbarConfig}"
@@ -1576,7 +1580,7 @@ export default class VariantInterpreterGrid extends LitElement {
             </div>
 
             <div class="modal fade pt-0" id="${this._prefix}EvidenceReviewModal" tabindex="-1"
-                 role="dialog" aria-hidden="true" style="overflow-y: visible">
+                role="dialog" aria-hidden="true" style="overflow-y: visible">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content">
                         <div class="modal-header">
diff --git a/src/webcomponents/variant/variant-grid-formatter.js b/src/webcomponents/variant/variant-grid-formatter.js
index 5c1688122f..e9b91951c6 100644
--- a/src/webcomponents/variant/variant-grid-formatter.js
+++ b/src/webcomponents/variant/variant-grid-formatter.js
@@ -87,12 +87,12 @@ export default class VariantGridFormatter {
             tooltipText += `
                 <div class="dropdown-header" style="padding-top: 5px;padding-left: 5px">External Links</div>
                 <div style="padding: 5px">
-                    <a target="_blank" href="${BioinfoUtils.getVariantLink(variantId, variantRegion, "decipher")}">
+                    <a class="text-decoration-none" target="_blank" href="${BioinfoUtils.getVariantLink(variantId, variantRegion, "decipher")}">
                         Decipher
                     </a>
                 </div>
                 <div style="padding: 5px" data-cy="varsome-variant-link">
-                    <a target="_blank" ${row.type === "COPY_NUMBER" ? `class="${"disabled"}"` : `href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "varsome", assembly)}"`}>
+                    <a class="text-decoration-none" target="_blank" ${row.type === "COPY_NUMBER" ? `class="${"disabled"}"` : `href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "varsome", assembly)}"`}>
                         Varsome ${row.type === "COPY_NUMBER" ? "<small>(Disabled)</small>" : ""}
                     </a>
                 </div>
@@ -102,12 +102,12 @@ export default class VariantGridFormatter {
         tooltipText += `
             <div class="dropdown-header" style="padding-top: 5px;padding-left: 5px">External Genome Browsers</div>
             <div style="padding: 5px">
-                <a target="_blank" href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "ensembl_genome_browser", assembly)}">
+                <a class="text-decoration-none" target="_blank" href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "ensembl_genome_browser", assembly)}">
                     Ensembl Genome Browser
                 </a>
             </div>
             <div style="padding: 5px">
-                <a target="_blank" href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "ucsc_genome_browser")}">
+                <a class="text-decoration-none" target="_blank" href="${BioinfoUtils.getVariantLink(row.id, variantRegion, "ucsc_genome_browser")}">
                     UCSC Genome Browser
                 </a>
             </div>
@@ -173,9 +173,9 @@ export default class VariantGridFormatter {
 
         if (snpId) {
             if (assembly.toUpperCase() === "GRCH37") {
-                return "<a target='_blank' href='http://grch37.ensembl.org/Homo_sapiens/Variation/Explore?vdb=variation;v=" + snpId + "'>" + snpId + "</a>";
+                return "<a class='text-decoration-none' target='_blank' href='http://grch37.ensembl.org/Homo_sapiens/Variation/Explore?vdb=variation;v=" + snpId + "'>" + snpId + "</a>";
             } else {
-                return "<a target='_blank' href='http://www.ensembl.org/Homo_sapiens/Variation/Explore?vdb=variation;v=" + snpId + "'>" + snpId + "</a>";
+                return "<a class='text-decoration-none' target='_blank' href='http://www.ensembl.org/Homo_sapiens/Variation/Explore?vdb=variation;v=" + snpId + "'>" + snpId + "</a>";
             }
         }
         return snpId;
@@ -232,8 +232,8 @@ export default class VariantGridFormatter {
                         // If gene contains one of the query.ct
                         if (geneHasQueryCt.has(geneName)) {
                             geneWithCtLinks.push(`<a class="gene-tooltip text-decoration-none" tooltip-title="Links" tooltip-text="${tooltipText}" style="margin-left: 2px;">
-                                                        ${geneName}
-                                                  </a>`);
+                                                    ${geneName}
+                                                </a>`);
                         } else {
                             geneLinks.push(`<a class="gene-tooltip text-decoration-none" tooltip-title="Links" tooltip-text="${tooltipText}" style="margin-left: 2px;color: darkgray;font-style: italic">
                                                     ${geneName}
@@ -282,7 +282,9 @@ export default class VariantGridFormatter {
 
     static getGeneTooltip(geneName, assembly) {
         return `
-            <div class='dropdown-header ps-1 pt-1'>External Links</div>
+            <div class='dropdown-header ps-1 mt-2 mb-1'>
+                External Links
+            </div>
             <div class='p-1'>
                 <a class='text-decoration-none' target='_blank' href='${BioinfoUtils.getEnsemblLink(geneName, "gene", assembly)}'>Ensembl</a>
             </div>
@@ -295,8 +297,9 @@ export default class VariantGridFormatter {
             <div class='p-1' data-cy='varsome-gene-link'>
                 <a class='text-decoration-none' target='_blank' href='${BioinfoUtils.getGeneLink(geneName, "varsome", assembly)}'>Varsome</a>
             </div>
-
-            <div class='dropdown-header ps-1 pt-1'>Clinical Resources</div>
+            <div class='dropdown-header ps-1 mt-2 mb-1'>
+                Clinical Resources
+            </div>
             <hr class='dropdown-divider'>
             <div class='p-1'>
                 <a class='text-decoration-none' target='_blank' href='${BioinfoUtils.getGeneLink(geneName, "decipher")}'>Decipher</a>