diff --git a/dashboard/src/components/cohortPanel.js b/dashboard/src/components/cohortPanel.js
index 652651e7..d320cdbf 100644
--- a/dashboard/src/components/cohortPanel.js
+++ b/dashboard/src/components/cohortPanel.js
@@ -37,7 +37,7 @@ function CohortPanel() {
   const [allDBMArg, setAllDBMArg] = useState([])
 
   const [metadata, setMetadata] = useState([])
-  const metadataColorList = ['none', 'gold', 'blue', 'deeppink', 'darkviolet', 'cyan', 'black', 'brown', 'greenyellow', 'orchid','mediumpurple']
+  const metadataColorList = ['none', 'gold', 'blue', 'pink', 'darkviolet', 'cyan', 'black', 'brown', 'greenyellow', 'orchid','mediumpurple']
   const [metadataAttrColor, setMetadataAttrColor] = useState({})
 
   useEffect(() => {
diff --git a/dashboard/src/components/correlationMatrix.d3.js b/dashboard/src/components/correlationMatrix.d3.js
index 80e3a9a3..452fdf0f 100644
--- a/dashboard/src/components/correlationMatrix.d3.js
+++ b/dashboard/src/components/correlationMatrix.d3.js
@@ -1,6 +1,7 @@
 import * as d3 from 'd3';
 import $ from "jquery";
 import "../index.css"
+import DBMDict from '../DBM_attribute_dict.json'
 
 export default class CorrelationMatrixD3 {
     constructor(chart, data, parentId) {
@@ -17,7 +18,7 @@ export default class CorrelationMatrixD3 {
 
         var values = Object.values(data).map(el => Object.values(el))
         
-        var keys = Object.keys(data).map(e => e.replace("aco_", "").replace("fac_", "").replace("mov_", ""))
+        var keys = Object.keys(data).map(e => DBMDict[e]['label'])
 
         const minRowValue = values.map(el => Math.min(...(el)))
         const maxRowValue = values.map(el => Math.max(...(el)))
diff --git a/dashboard/src/components/individualPanel.css b/dashboard/src/components/individualPanel.css
index 9c32a880..2a1c8504 100644
--- a/dashboard/src/components/individualPanel.css
+++ b/dashboard/src/components/individualPanel.css
@@ -319,6 +319,7 @@
 #acousticsContainer {
     padding: 10px;
     margin-left: -10px;
+    font-size: 0.8rem;
     margin-right: 5px;
     width: max-content;
 }
diff --git a/dashboard/src/components/scatterplot.d3.js b/dashboard/src/components/scatterplot.d3.js
index 84e2653d..8b2f6460 100644
--- a/dashboard/src/components/scatterplot.d3.js
+++ b/dashboard/src/components/scatterplot.d3.js
@@ -28,7 +28,7 @@ export default class ScatterplotD3 {
                 $('#metadataAttributes').css("opacity", 1)
                 var medataAttr = [...new Set(Object.values(metadata).map(el => el['attr']).filter(e => e != null))]
                 var metadataColor = d3.scaleOrdinal().domain(medataAttr)
-                    .range(['gold', 'blue', 'deeppink', 'darkviolet', 'cyan', 'black', 'brown', 'greenyellow', 'orchid','mediumpurple'])
+                    .range(['gold', 'blue', 'pink', 'darkviolet', 'cyan', 'black', 'brown', 'greenyellow', 'orchid','mediumpurple'])
                 var d = Object.values(metadata).map(el => [el['id'], el['attr']])
 
                 d.forEach(el => {