diff --git a/src/webcomponents/commons/layouts/custom-navbar.js b/src/webcomponents/commons/layouts/custom-navbar.js
index 34fdecec5..18e545dfa 100644
--- a/src/webcomponents/commons/layouts/custom-navbar.js
+++ b/src/webcomponents/commons/layouts/custom-navbar.js
@@ -240,7 +240,7 @@ export default class CustomNavBar extends LitElement {
                         <div class="navbar-brand d-flex justify-content-center align-items-center me-n1" style="height: 2.5rem;">
                             <!-- Application logo provided -->
                             ${this.app?.logo ? html`
-                                <img class="d-inline-block" src="${this.app?.logo}" alt="App logo">
+                                <img class="d-inline-block" src="${this.app?.logo}" alt="App logo" style="height:1.3em;">
                             ` : nothing}
                             <!-- No application logo provided -->
                             ${!this.app?.logo && this.app?.name ? html`
diff --git a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js
index 4e3b9c2d0..7f8ab6303 100644
--- a/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js
+++ b/src/webcomponents/variant/annotation/cellbase-variant-annotation-summary.js
@@ -17,13 +17,12 @@
 import {LitElement, html, nothing} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
 import BioinfoUtils from "../../../core/bioinfo/bioinfo-utils.js";
-import Types from "../../commons/types.js";
 
 export default class CellbaseVariantAnnotationSummary extends LitElement {
 
     constructor() {
         super();
-        this._init();
+        this.#init();
     }
 
     createRenderRoot() {
@@ -50,27 +49,29 @@ export default class CellbaseVariantAnnotationSummary extends LitElement {
         };
     }
 
-    _init() {
-        this._prefix = UtilsNew.randomString(8);
-        this.variantAnnotation = {};
+    #init() {
+        this.variantAnnotation = null;
+
+        this._proteinSubScore = null;
+        this._caddScaled = null;
+        this._consequenceTypeGene = null;
+        this._consequenceTypeTranscript = null;
+        this._consequenceTypeToColor = null;
+
         this._config = this.getDefaultConfig();
     }
 
     update(changedProperties) {
-        if (changedProperties.has("variantAnnotation")) {
-            this.variantAnnotationChanged();
+        if (changedProperties.has("consequenceTypes")) {
+            this.consequenceTypesObserver();
         }
-        if (changedProperties.has("consequenceTypes") || changedProperties.has("proteinSubstitutionScores")) {
-            this.setColors();
+        if (changedProperties.has("variantAnnotation")) {
+            this.variantAnnotationObserver();
         }
         super.update(changedProperties);
     }
 
-    isTranscriptAvailable(item) {
-        return item !== "";
-    }
-
-    setColors() {
+    consequenceTypesObserver() {
         if (this.consequenceTypes) {
             const consequenceTypeToColor = {};
             for (const category of this.consequenceTypes.categories) {
@@ -84,253 +85,249 @@ export default class CellbaseVariantAnnotationSummary extends LitElement {
                     }
                 }
             }
-            this.consequenceTypeToColor = consequenceTypeToColor;
-        }
-
-        if (typeof this.proteinSubstitutionScores !== "undefined") {
-            const pssColor = new Map();
-            for (const i in this.proteinSubstitutionScores) {
-                const obj = this.proteinSubstitutionScores[i];
-                Object.keys(obj).forEach(key => {
-                    pssColor.set(key, obj[key]);
-                });
-            }
-            this.pssColor = pssColor;
+            this._consequenceTypeToColor = consequenceTypeToColor;
         }
     }
 
-    variantAnnotationChanged() {
-        const _this = this;
-        if (typeof this.variantAnnotation !== "undefined") {
-            if (UtilsNew.isEmpty(_this.variantAnnotation.reference)) {
-                _this.variantAnnotation.reference = "-";
-            }
-
-            if (UtilsNew.isEmpty(_this.variantAnnotation.alternate)) {
-                _this.variantAnnotation.alternate = "-";
+    variantAnnotationObserver() {
+        if (this.variantAnnotation) {
+            if (!this.variantAnnotation.reference) {
+                this.variantAnnotation.reference = "-";
             }
 
-            // Consequence type
-            // Color the consequence type
-            if (typeof _this.consequenceTypeToColor !== "undefined" && typeof _this.consequenceTypeToColor[_this.variantAnnotation.displayConsequenceType] !== "undefined") {
-                $("#" + _this._prefix + "CT").css("color", _this.consequenceTypeToColor[_this.variantAnnotation.displayConsequenceType]);
+            if (!this.variantAnnotation.alternate) {
+                this.variantAnnotation.alternate = "-";
             }
 
             // Find the gene and transcript that exhibit the display consequence type
-            if (typeof _this.variantAnnotation.consequenceTypes !== "undefined") {
-                for (let i = 0; i < _this.variantAnnotation.consequenceTypes.length; i++) {
-                    for (let j = 0; j < _this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms.length; j++) {
-                        if (_this.variantAnnotation.displayConsequenceType === _this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms[j].name) {
-                            _this.ctGene = _this.variantAnnotation.consequenceTypes[i].geneName;
-                            _this.ctTranscript = _this.variantAnnotation.consequenceTypes[i].transcriptId;
+            this._consequenceTypeGene = null;
+            this._consequenceTypeTranscript = null;
+            if (typeof this.variantAnnotation.consequenceTypes !== "undefined") {
+                for (let i = 0; i < this.variantAnnotation.consequenceTypes.length; i++) {
+                    for (let j = 0; j < this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms.length; j++) {
+                        if (this.variantAnnotation.displayConsequenceType === this.variantAnnotation.consequenceTypes[i].sequenceOntologyTerms[j].name) {
+                            this._consequenceTypeGene = this.variantAnnotation.consequenceTypes[i].geneName;
+                            this._consequenceTypeTranscript = this.variantAnnotation.consequenceTypes[i].transcriptId;
                             break;
                         }
                     }
                 }
             }
 
-            // PSS
+            // Protein substitution scores
             const proteinSubScore = {};
-            // debugger
-            if (typeof _this.variantAnnotation.consequenceTypes !== "undefined") {
+
+            if (typeof this.variantAnnotation.consequenceTypes !== "undefined") {
                 let min = 10;
                 let max = 0;
-                for (let i = 0; i < _this.variantAnnotation.consequenceTypes.length; i++) {
-                    if (typeof _this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation !== "undefined") {
-                        const gene = _this.variantAnnotation.consequenceTypes[i].geneName;
-                        const transcript = _this.variantAnnotation.consequenceTypes[i].ensemblTranscriptId;
-                        const scores = _this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation.substitutionScores;
+                for (let i = 0; i < this.variantAnnotation.consequenceTypes.length; i++) {
+                    if (typeof this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation !== "undefined") {
+                        const gene = this.variantAnnotation.consequenceTypes[i].geneName;
+                        const transcript = this.variantAnnotation.consequenceTypes[i].ensemblTranscriptId;
+                        const scores = this.variantAnnotation.consequenceTypes[i].proteinVariantAnnotation.substitutionScores;
 
                         if (typeof scores !== "undefined") {
                             for (let j = 0; j < scores.length; j++) {
                                 if (scores[j].source === "sift" && scores[j].score <= min) {
                                     min = scores[j].score;
-                                    proteinSubScore.sift = {score: scores[j].score, description: scores[j].description, gene: gene, transcript: transcript};
-                                    // if (typeof _this.pssColor !== "undefined" && typeof _this.pssColor.get(scores[j].description) !== "undefined") {
-                                    //     $("#" + _this._prefix + "Sift").css("color", _this.pssColor.get(scores[j].description));
-                                    // }
+                                    proteinSubScore.sift = {
+                                        score: scores[j].score,
+                                        description: scores[j].description,
+                                        gene: gene,
+                                        transcript: transcript,
+                                    };
                                 } else if (scores[j].source === "polyphen" && scores[j].score >= max) {
                                     max = scores[j].score;
-                                    proteinSubScore.polyphen = {score: scores[j].score, description: scores[j].description, gene: gene, transcript: transcript};
-                                    // if (typeof _this.pssColor !== "undefined" && typeof _this.pssColor.get(scores[j].description) !== "undefined") {
-                                    //     $("#" + _this._prefix + "Polyphen").css("color", _this.pssColor.get(scores[j].description));
-                                    // }
+                                    proteinSubScore.polyphen = {
+                                        score: scores[j].score,
+                                        description: scores[j].description,
+                                        gene: gene,
+                                        transcript: transcript,
+                                    };
                                 }
                             }
                         }
                     }
                 }
             }
-            if (Object.keys(proteinSubScore).length === 0 && proteinSubScore.constructor === Object) {
+
+            // Check if SIFT score is not defined
+            if (typeof proteinSubScore.sift === "undefined") {
                 proteinSubScore.sift = {score: "NA", description: "NA", transcript: ""};
+            }
+            // Check if Polyphen score is not defined
+            if (typeof proteinSubScore.polyphen === "undefined") {
                 proteinSubScore.polyphen = {score: "NA", description: "NA", transcript: ""};
-                $("#" + _this._prefix + "Sift").css("color", "black");
-                $("#" + _this._prefix + "Polyphen").css("color", "black");
             }
-            _this.proteinSubScore = proteinSubScore;
-            // debugger
+
+            // Save the protein substitution scores
+            this._proteinSubScore = proteinSubScore;
+
             // CADD
-            if (typeof _this.variantAnnotation.functionalScore !== "undefined") {
-                for (const i in _this.variantAnnotation.functionalScore) {
-                    const value = Number(_this.variantAnnotation.functionalScore[i].score).toFixed(2);
-                    if (_this.variantAnnotation.functionalScore[i].source === "cadd_scaled") {
-                        if (value > 15) {
-                            $("#" + _this._prefix + "Cadd").css("color", "red");
-                            _this.caddScaled = value;
-                        } else {
-                            $("#" + _this._prefix + "Cadd").css("color", "black");
-                            _this.caddScaled = value;
-                        }
-                    }
+            this._caddScaled = "NA"; // default value
+            (this.variantAnnotation.functionalScore || []).forEach(functionalScore => {
+                if (functionalScore?.source === "cadd_scaled") {
+                    this._caddScaled = Number(functionalScore.score).toFixed(2);
                 }
-            } else {
-                $("#" + _this._prefix + "Cadd").css("color", "black");
-                _this.caddScaled = "NA";
-            }
-
-            // this.requestUpdate();
+            });
         }
     }
 
+    getProteinSubstitutionScoresColor(source, description) {
+        return this.proteinSubstitutionScores?.style?.[source]?.[description] || "black";
+    }
+
     render() {
-        if (this.variantAnnotation === undefined || this.variantAnnotation === "" || this.proteinSubScore === undefined) {
-            return;
+        if (!this.variantAnnotation) {
+            return nothing;
         }
-        const variantRegion = this.variantAnnotation.chromosome + ":" + this.variantAnnotation.start + "-" + this.variantAnnotation.start;
-        const variantId = this.variantAnnotation.id ? this.variantAnnotation.id : `${this.variantAnnotation.chromosome}:${this.variantAnnotation.start}:${this.variantAnnotation.reference}:${this.variantAnnotation.alternate}`;
+
         return html`
             <data-form
                 .data="${this.variantAnnotation}"
                 .config="${this._config}">
             </data-form>
         `;
-
     }
 
     getDefaultConfig() {
-        return Types.dataFormConfig({
-            // title: "Summary",
-            sections: [{
-                title: "General",
-                elements: [{
-                    title: "Id",
-                    type: "custom",
-                    display: {
-                        render: data => {
-                            const variantRegion = data.chromosome + ":" + data.start + "-" + data.start;
-                            const variantId = data.id ? data.id : `${data.chromosome}:${data.start}:${data.reference}:${data.alternate}`;
-                            return html `
-                                <a class="text-decoration-none" target="_blank" href="${BioinfoUtils.getVariantLink(variantId, variantRegion, "ensembl_genome_browser", this.assembly)}">
-                                    ${variantId}
-                                </a>
-                            `;
-                        }
-                    }
-                },
-                {
-                    title: "HGVS",
-                    type: "custom",
-                    display: {
-                        visible: data => data?.hgvs.length > 0,
-                        render: data => html `
-                        ${data.hgvs.map(item => html` ${item}<br> `)}
-                        `
-                    }
-                },
-                {
-                    title: "Alleles",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                        ${data.reference}/${data.alternate}
-                        `
-                    }
-                },
-                {
-                    title: "Location",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                            ${data.chromosome}:${data.start}
-                            ${data.end ? html`<div>-${data.end}</div>`: nothing}
-                        `
-                    }
-                },
-                {
-                    title: "Type",
-                    type: "custom",
-                    field: "type",
-                    display: {
-                        visible: data => !UtilsNew.isEmpty(data.type),
-                    }
-                },
-                {
-                    title: "Ancestral Allele",
-                    field: "ancestralAllele",
-                    display: {
-                        visible: data => !UtilsNew.isEmpty(data.ancestralAllele),
-                    }
-                },
-                {
-                    title: "MAF",
-                    type: "custom",
-                    display: {
-                        visible: data => UtilsNew.isNotEmpty(data.minorAlleleFreq),
-                        render: data => html `${data.minorAlleleFreq} (${data.minorAllele})`
-                    }
-                },
-                {
-                    title: "Most Severe Consequence Type",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                            <span id="${this._prefix}CT">${data.displayConsequenceType}</span>
-                            ${this.ctGene ? html`
-                                <span>
-                                    (<b>Gene</b> : ${this.ctGene}, <b>Transcript</b> : ${this.ctTranscript})
-                                </span>
-                            ` : nothing }
-                        `
-                    }
-                },
-                {
-                    title: "Most Severe Deleterious Score",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                            <span id="${this._prefix}Sift" title="${this.proteinSubScore.sift.score}">
-                                ${this.proteinSubScore.sift.description}
-                            </span>
-                            ${this.isTranscriptAvailable(this.proteinSubScore.sift.transcript) ? html`
-                                (<b>Gene:</b>${this.proteinSubScore.sift.gene}, <b>Transcript: </b>${this.proteinSubScore.sift.transcript})
-                            ` : nothing }
-                        `
-                    }
-                },
+        return {
+            sections: [
                 {
-                    title: "Polyphen",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                            <span id="${this._prefix}Polyphen" title="${this.proteinSubScore.polyphen.score}">${this.proteinSubScore.polyphen.description}</span>
-                                ${this.isTranscriptAvailable(this.proteinSubScore.polyphen.transcript) ? html`
-                                (<b>Gene:</b>${this.proteinSubScore.polyphen.gene}, <b>Transcript: </b>${this.proteinSubScore.polyphen.transcript})
-                            ` : nothing}
-                        `
-                    }
+                    title: "General",
+                    elements: [
+                        {
+                            title: "Id",
+                            type: "custom",
+                            display: {
+                                render: data => {
+                                    const variantRegion = data.chromosome + ":" + data.start + "-" + data.start;
+                                    const variantId = data.id ? data.id : `${data.chromosome}:${data.start}:${data.reference}:${data.alternate}`;
+                                    const url = BioinfoUtils.getVariantLink(variantId, variantRegion, "ensembl_genome_browser", this.assembly);
+                                    return html `
+                                        <a class="text-decoration-none" target="_blank" href="${url}">
+                                            ${variantId}
+                                        </a>
+                                    `;
+                                }
+                            }
+                        },
+                        {
+                            title: "HGVS",
+                            type: "custom",
+                            display: {
+                                visible: data => data?.hgvs.length > 0,
+                                render: data => {
+                                    return data.hgvs.map(item => html`${item}<br>`);
+                                },
+                            },
+                        },
+                        {
+                            title: "Alleles",
+                            type: "custom",
+                            display: {
+                                render: data => html`${data.reference}/${data.alternate}`,
+                            },
+                        },
+                        {
+                            title: "Location",
+                            type: "custom",
+                            display: {
+                                render: data => html`${data.chromosome}:${data.start}${data.end ? html`<div>-${data.end}</div>`: nothing}`,
+                            }
+                        },
+                        {
+                            title: "Type",
+                            type: "custom",
+                            field: "type",
+                            display: {
+                                visible: data => !UtilsNew.isEmpty(data.type),
+                            },
+                        },
+                        {
+                            title: "Ancestral Allele",
+                            field: "ancestralAllele",
+                            display: {
+                                visible: data => !UtilsNew.isEmpty(data.ancestralAllele),
+                            },
+                        },
+                        {
+                            title: "MAF",
+                            type: "custom",
+                            display: {
+                                visible: data => UtilsNew.isNotEmpty(data.minorAlleleFreq),
+                                render: data => html`${data.minorAlleleFreq} (${data.minorAllele})`,
+                            },
+                        },
+                        {
+                            title: "Most Severe Consequence Type",
+                            type: "custom",
+                            display: {
+                                render: data => {
+                                    const consequenceTypeColor = this._consequenceTypeToColor?.[data.displayConsequenceType] || "black";
+                                    return html`
+                                        <span style="color:${consequenceTypeColor};">
+                                            ${data.displayConsequenceType}
+                                        </span>
+                                        ${this._consequenceTypeGene ? html`
+                                            <span>
+                                                (<b>Gene</b> : ${this._consequenceTypeGene}, <b>Transcript</b> : ${this._consequenceTypeTranscript})
+                                            </span>
+                                        ` : nothing}
+                                    `;
+                                },
+                            },
+                        },
+                        {
+                            title: "Most Severe Deleterious Score",
+                            type: "custom",
+                            display: {
+                                render: () => {
+                                    const color = this.getProteinSubstitutionScoresColor("sift", this._proteinSubScore.sift.description);
+                                    return html`
+                                        <span title="${this._proteinSubScore.sift.score}" style="color:${color};">
+                                            ${this._proteinSubScore.sift.description || "-"}
+                                        </span>
+                                        ${this._proteinSubScore.sift?.transcript ? html`
+                                            (<b>Gene:</b>${this._proteinSubScore.sift.gene}, <b>Transcript: </b>${this._proteinSubScore.sift.transcript})
+                                        ` : nothing }
+                                    `;
+                                },
+                            },
+                        },
+                        {
+                            title: "Polyphen",
+                            type: "custom",
+                            display: {
+                                render: () => {
+                                    const color = this.getProteinSubstitutionScoresColor("polyphen", this._proteinSubScore.polyphen.description);
+                                    return html`
+                                        <span title="${this._proteinSubScore.polyphen.score}" style="color:${color};">
+                                            ${this._proteinSubScore.polyphen.description || "-"}
+                                        </span>
+                                        ${this._proteinSubScore.polyphen?.transcript ? html`
+                                            (<b>Gene:</b>${this._proteinSubScore.polyphen.gene}, <b>Transcript: </b>${this._proteinSubScore.polyphen.transcript})
+                                        ` : nothing}
+                                    `;
+                                },
+                            },
+                        },
+                        {
+                            title: "CADD Scaled",
+                            type: "custom",
+                            display: {
+                                render: () => {
+                                    const colorClassName = (this._caddScaled !== "NA" && this._caddScaled > 15) ? "text-danger" : "text-body";
+                                    return html `
+                                        <span class="${colorClassName}">${this._caddScaled}</span>
+                                    `;
+                                },
+                            },
+                        },
+                    ],
                 },
-                {
-                    title: "CADD Scaled",
-                    type: "custom",
-                    display: {
-                        render: data => html `
-                            ${this.caddScaled}
-                        `
-                    }
-                }
-                ]
-            }]
-        });
+            ],
+        };
     }
 
 }