diff --git a/src/components/StatCardComponet.vue b/src/components/StatCardComponet.vue
index e69a943a..2e4a000c 100644
--- a/src/components/StatCardComponet.vue
+++ b/src/components/StatCardComponet.vue
@@ -12,18 +12,21 @@ const color = ['purple', 'pink', 'yellow', 'green'];
 </script>
 
 <template>
-  <div class="row" :class="{ 'justify-center': $q.screen.lt.md }">
+  <div
+    class="row"
+    style="gap: var(--size-4)"
+    :class="{ 'justify-between': $q.screen.lt.md }"
+  >
     <app-box
       v-for="(v, i) in props.branch"
       :key="v.label"
-      class="bordered wave col-12 q-ma-sm"
+      class="bordered wave col-12"
       :class="`color-${color[i % 5]}`"
       style="
         width: 200px;
         min-width: 150px;
-        box-shadow:
-          0px 5px 5px 0 rgba(0, 0, 0, 0.2),
-          0px 5px 5px 0 rgba(0, 0, 0, 0.19);
+        max-height: 95px;
+        box-shadow: var(--shadow-2);
       "
     >
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">