diff --git a/css/w3.css b/css/w3.css
index 90f49c9..ab5a1cb 100755
--- a/css/w3.css
+++ b/css/w3.css
@@ -89,7 +89,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
 .w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
 @media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
-@media (min-width:993px){.w3-modal-content{width:1250px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
+@media (min-width:993px){.w3-modal-content{width:1050px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
 @media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
 @media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
 .w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
diff --git a/js/tsne_vis.js b/js/tsne_vis.js
index 591490a..46dd900 100755
--- a/js/tsne_vis.js
+++ b/js/tsne_vis.js
@@ -206,18 +206,25 @@ var optionMetric = document.getElementById("param-SortM-view").value; // Get the
 
 var order = [];
 SelectedProjections = []
+var xValues;
 if (optionMetric == 1) {
   order = metricsSorting[optionMetric-1]
+  xValues = ['<b>QMA</b>', 'NH', 'T', 'C', 'S', 'SDC'];
 } else if (optionMetric == 2) {
   order = metricsSorting[optionMetric-1]
+  xValues = ['QMA', '<b>NH</b>', 'T', 'C', 'S', 'SDC'];
 } else if (optionMetric == 3) {
   order = metricsSorting[optionMetric-1]
+  xValues = ['QMA', 'NH', '<b>T</b>', 'C', 'S', 'SDC'];
 } else if (optionMetric == 4) {
   order = metricsSorting[optionMetric-1]
+  xValues = ['QMA', 'NH', 'T', '<b>C</b>', 'S', 'SDC'];
 } else if (optionMetric == 5) {
   order = metricsSorting[optionMetric-1]
+  xValues = ['QMA', 'NH', 'T', 'C', '<b>S</b>', 'SDC'];
 } else {
   order = metricsSorting[optionMetric-1]
+  xValues = ['QMA', 'NH', 'T', 'C', 'S', '<b>SDC</b>'];
 }
 
 var index = order.indexOf(activeProjectionNumber);
@@ -250,8 +257,6 @@ for (let k = 0; k < 6; k++) {
 var checkCounter = 0
 var checkCounterMetr = 0
 
-var xValues = ['QMA', 'NH', 'T', 'C', 'S', 'SDC'];
-
 var colorscaleValue = [
   [0, '#d9d9d9'],
   [1, '#000000']
@@ -871,25 +876,30 @@ function ReSortOver() {
 var optionMetric = document.getElementById("param-SortMOver-view").value; // Get the threshold value with which the user set's the boundaries of the schema investigation
 var order = [];
 
+var xValues;
 if (optionMetric == 1) {
   order = metricsSorting[optionMetric-1]
+  xValues = ['<b>QMA</b>', 'NH', 'T', 'C', 'S', 'SDC'];
 } else if (optionMetric == 2) {
   order = metricsSorting[optionMetric-1]
+  xValues = ['QMA', '<b>NH</b>', 'T', 'C', 'S', 'SDC'];
 } else if (optionMetric == 3) {
   order = metricsSorting[optionMetric-1]
+  xValues = ['QMA', 'NH', '<b>T</b>', 'C', 'S', 'SDC'];
 } else if (optionMetric == 4) {
   order = metricsSorting[optionMetric-1]
+  xValues = ['QMA', 'NH', 'T', '<b>C</b>', 'S', 'SDC'];
 } else if (optionMetric == 5) {
   order = metricsSorting[optionMetric-1]
+  xValues = ['QMA', 'NH', 'T', 'C', '<b>S</b>', 'SDC'];
 } else {
   order = metricsSorting[optionMetric-1]
+  xValues = ['QMA', 'NH', 'T', 'C', 'S', '<b>SDC</b>'];
 }
 
   var checkCounter = 0
   var checkCounterMetr = 0
 
-  var xValues = ['QMA', 'NH', 'T', 'C', 'S', 'SDC'];
-
   var colorscaleValue = [
     [0, '#d9d9d9'],
     [1, '#000000']
@@ -998,7 +1008,7 @@ if (optionMetric == 1) {
 
 }
 
-  var width = 1250 // interactive visualization
+  var width = 1050 // interactive visualization
   var height = 1150 // interactive visualization
   document.getElementById("confirmModal").disabled = true;