diff --git a/app/institutions/dashboard/-components/total-count-kpi-wrapper/styles.scss b/app/institutions/dashboard/-components/total-count-kpi-wrapper/styles.scss
index 85ef244091..24f5068b5c 100644
--- a/app/institutions/dashboard/-components/total-count-kpi-wrapper/styles.scss
+++ b/app/institutions/dashboard/-components/total-count-kpi-wrapper/styles.scss
@@ -3,8 +3,10 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    width: 100%;
+    width: calc(100% - 24px);
     height: 145px;
+    margin-left: 12px;
+    margin-right: 12px;
 
     .loading {
         display: flex;
diff --git a/app/institutions/dashboard/-components/total-count-kpi-wrapper/total-count-kpi/styles.scss b/app/institutions/dashboard/-components/total-count-kpi-wrapper/total-count-kpi/styles.scss
index ecea9128b5..29e9169585 100644
--- a/app/institutions/dashboard/-components/total-count-kpi-wrapper/total-count-kpi/styles.scss
+++ b/app/institutions/dashboard/-components/total-count-kpi-wrapper/total-count-kpi/styles.scss
@@ -1,47 +1,65 @@
+// stylelint-disable max-nesting-depth, selector-max-compound-selectors
+
 .kpi-container {
     margin-right: 12px;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
-    align-items: center;
-    width: 321px;
+    align-items: flex-start;
+    width: 290px;
     height: 140px;
     background-color: $color-bg-white;
 
-    .left-container {
-        width: 221px;
-        padding-left: 15px;
+    .top-container {
+        width: 100%;
+        display: flex;
+        margin-bottom: 10px;
 
-        .data {
+        .left-container {
+            padding-left: 5px;
             height: 75px;
-            width: 100%;
-            font-size: 84px;
-            font-style: normal;
-            font-weight: bolder;
+            width: calc(220px - 5px);
             display: flex;
             justify-content: flex-start;
             align-items: center;
-            margin-bottom: 10px;
+
+            .total-container {
+                font-size: 84px;
+                font-style: normal;
+                font-weight: bolder;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
         }
 
-        .title {
-            width: 100%;
-            font-size: 14px;
-            font-weight: normal;
-            height: 25px;
+        .right-container {
+            padding-right: 10px;
+            height: 75px;
+            width: 75px;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            align-items: center;
+
+            .icon {
+                font-size: 60px;
+                color: $color-text-slate-gray;
+            }
         }
+
     }
 
-    .right-container {
-        width: 100px;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
+    .title {
+        padding-left: 15px;
+        width: calc(100% - 15px);
+        font-size: 14px;
+        font-weight: normal;
+        height: 25px;
+    }
 
-        .icon {
-            font-size: 60px;
-            color: $color-text-slate-gray;
-        }
+    &.mobile {
+        margin-right: 0;
+        margin-bottom: 12px;
     }
 }
diff --git a/app/institutions/dashboard/-components/total-count-kpi-wrapper/total-count-kpi/template.hbs b/app/institutions/dashboard/-components/total-count-kpi-wrapper/total-count-kpi/template.hbs
index fb277c08c8..859e962cad 100644
--- a/app/institutions/dashboard/-components/total-count-kpi-wrapper/total-count-kpi/template.hbs
+++ b/app/institutions/dashboard/-components/total-count-kpi-wrapper/total-count-kpi/template.hbs
@@ -1,15 +1,23 @@
-<div local-class='kpi-container' ...attributes>
-    <div local-class='left-container'>
-        <div local-class='data' data-test-kpi-data>
+<div
+    local-class='kpi-container {{if (is-mobile) 'mobile'}}'
+    ...attributes 
+>
+    <div local-class='top-container'>
+        <div local-class='left-container' data-test-kpi-data>
             {{#if @data.total}}
-                {{@data.total}}
+                <div local-class='total-container'>
+                    {{@data.total}}
+                </div>
+                <EmberTooltip>
+                    {{@data.title}} - {{@data.total}}
+                </EmberTooltip>
             {{else}}
                 {{t 'institutions.dashboard.empty'}}
             {{/if}}
         </div>
-        <span data-test-kpi-title local-class='title'>{{@data.title}}</span>
-    </div>
-    <div local-class='right-container'>
-        <FaIcon data-test-kpi-icon @icon='{{@data.icon}}' local-class='icon'/>
+        <div local-class='right-container'>
+            <FaIcon data-test-kpi-icon @icon='{{@data.icon}}' local-class='icon'/>
+        </div>
     </div>
+    <div data-test-kpi-title local-class='title'>{{@data.title}}</div>
 </div>
\ No newline at end of file