diff --git a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-dashboard.scss b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-dashboard.scss
index 9f598b900c3..1afe47e0407 100644
--- a/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-dashboard.scss
+++ b/webapp/sources/rudder/rudder-web/src/main/style/rudder/rudder-dashboard.scss
@@ -19,7 +19,7 @@
 
 .rudder-template .homePage .panel,
 .rudder-template .homePage .card{
-  margin-bottom: 30px;
+  height: 100%;
   border-radius: 12px;
   box-shadow: 0 10px 20px 6px #dce3ef63;
   border: none !important;
@@ -55,12 +55,11 @@
   & > a {
     .badge{
       background-color: #b1bbcb;
-      opacity:.5;
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      padding: 5px 10px;
-      font-size: .8em;
+      padding: 0px 10px;
+      font-size: 1em;
     }
 
     &:hover {
diff --git a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/index.html b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/index.html
index 6e8a5f9a8be..0b410b5c4c0 100644
--- a/webapp/sources/rudder/rudder-web/src/main/webapp/secure/index.html
+++ b/webapp/sources/rudder/rudder-web/src/main/webapp/secure/index.html
@@ -10,7 +10,7 @@
 <div class="rudder-template">
   <div class="homePage">
     <div class="row">
-      <div class="col-xl-2 col-lg-6">
+      <div class="col-xl-2 col-lg-6 mb-4">
         <div class="card stats">
           <h5 class="card-title py-2 px-3 mb-0">Statistics</h5>
           <div data-lift="lazy-load?template=lazy-load-spinner">
@@ -56,7 +56,7 @@ <h5 class="card-title py-2 px-3 mb-0">Statistics</h5>
        </div>
       </div>
 
-      <div class="col-xl-4 col-lg-6">
+      <div class="col-xl-4 col-lg-6 mb-4">
         <div class="card global-compliance">
           <h5 class="card-title py-2 px-3 mb-0">Global compliance</h5>
           <div class="card-body text-center">
@@ -66,7 +66,7 @@ <h5 class="card-title py-2 px-3 mb-0">Global compliance</h5>
         </div>
       </div>
 
-      <div class="col-xl-6 col-lg-12">
+      <div class="col-xl-6 col-lg-12 mb-4">
         <div class="card global-compliance-details">
           <h5 class="card-title py-2 px-3 mb-0">Global compliance details</h5>
           <div class="card-body">
@@ -78,7 +78,7 @@ <h5 class="text-center" id="globalComplianceStats"></h5>
     </div>
 
     <div class="row">
-      <div class="col-xl-4 col-lg-4">
+      <div class="col-xl-4 col-lg-4 mb-4">
         <div id="nodeOverview" class="card">
           <h5 class="card-title py-2 px-3 mb-0">Global score breakdown</h5>
           <div class="card-body text-center">
@@ -91,7 +91,7 @@ <h5 class="card-title py-2 px-3 mb-0">Global score breakdown</h5>
         </div>
       </div>
 
-      <div class="col-xl-8 col-lg-8" id="scoreBreakdown">
+      <div class="col-xl-8 col-lg-8 mb-4" id="scoreBreakdown">
         <div class="card">
           <h5 class="card-title py-2 px-3 mb-0">Score breakdown</h5>
           <div class="card-body text-center">
@@ -101,7 +101,7 @@ <h5 class="card-title py-2 px-3 mb-0">Score breakdown</h5>
         </div>
       </div>
 
-      <div class="col-xl-12 col-lg-12" id="nodeBreakdown">
+      <div class="col-xl-12 col-lg-12 mb-4" id="nodeBreakdown">
         <div class="card">
           <h5 class="card-title py-2 px-3 mb-0">Node breakdown</h5>
           <div class="card-body text-center">