diff --git a/app/assets/stylesheets/tpi/_bubble-chart-countries.scss b/app/assets/stylesheets/tpi/_bubble-chart-countries.scss
index 5aa3a13c5..e49dd5be0 100644
--- a/app/assets/stylesheets/tpi/_bubble-chart-countries.scss
+++ b/app/assets/stylesheets/tpi/_bubble-chart-countries.scss
@@ -156,6 +156,8 @@ $legend-image-width: 60px;
   position: relative;
   padding-left: 20px;
   height: 100%;
+  text-align: center;
+  margin-bottom: 20px;
 }
 
 .bubble-chart__level-title-country {
@@ -163,6 +165,7 @@ $legend-image-width: 60px;
   font-family: $font-family-bold;
   font-size: 16px;
   color: $black;
+  text-align: center;
   margin-bottom: 20px;
 }
 
diff --git a/app/javascript/components/tpi/charts/ascor-bubble/Chart.js b/app/javascript/components/tpi/charts/ascor-bubble/Chart.js
index 86a906468..fbda5f8ae 100644
--- a/app/javascript/components/tpi/charts/ascor-bubble/Chart.js
+++ b/app/javascript/components/tpi/charts/ascor-bubble/Chart.js
@@ -87,8 +87,8 @@ const BubbleChart = ({ results }) => {
     <div>
       <div className="bubble-chart__container bubble-chart__container__grid">
         <div className="bubble-chart__level-title-country">Pillar</div>
-        <div className="bubble-chart__level-title-country">Area</div>
         <div />
+        <div className="bubble-chart__level-title-country">Area</div>
         {ranges.map((range) => (
           <div className="bubble-chart__level-country" key={range}>
             <div className="bubble-chart__level-title-country">{range}</div>