diff --git a/src/components/Core/StorageCard.vue b/src/components/Core/StorageCard.vue
index a039f5d857..cde82677ef 100644
--- a/src/components/Core/StorageCard.vue
+++ b/src/components/Core/StorageCard.vue
@@ -1,24 +1,22 @@
 <template>
   <v-card flat color="secondary" class="mr-2 ml-2">
-    <v-layout row wrap class="pa-3 mx-auto">
-      <v-flex md6>
-        <div style="margin-top: 6px" :class="color + '--text'" data-testid="StorageCard-label">
+    <v-row class="px-3">
+      <v-col cols="6" class="d-flex align-center">
+        <div :class="color + '--text'" data-testid="StorageCard-label">
           {{ label }}
         </div>
-      </v-flex>
-      <v-flex md6>
+      </v-col>
+      <v-col cols="6" class="d-flex align-center">
         <span data-testid="StorageCard-Wrapper" :class="color + '--text title'">
-          <span data-testid="StorageCard-value"> {{ value | getDataValue(2) }} </span>
-          <span data-testid="StorageCard-unit" class="caption">
-            {{ value | getDataUnit }}
-          </span>
+          <span data-testid="StorageCard-value">{{ value | getDataValue(2) }} </span>
+          <span data-testid="StorageCard-unit" class="caption">{{ value | getDataUnit }}</span>
         </span>
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
   </v-card>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'StorageCard',
   props: ['color', 'label', 'value']
diff --git a/src/components/Core/StringCard.vue b/src/components/Core/StringCard.vue
index 8ea6752f49..edb5807e90 100644
--- a/src/components/Core/StringCard.vue
+++ b/src/components/Core/StringCard.vue
@@ -1,21 +1,21 @@
 <template>
   <v-card flat color="secondary" class="mr-2 ml-2">
-    <v-layout row wrap class="pa-3 mx-auto">
-      <v-flex md6>
-        <div style="margin-top: 6px" :class="color + '--text'" data-testid="StringCard-label">
+    <v-row class="px-3">
+      <v-col cols="6" class="d-flex align-center">
+        <div :class="color + '--text'" data-testid="StringCard-label">
           {{ label }}
         </div>
-      </v-flex>
-      <v-flex md6>
+      </v-col>
+      <v-col cols="6" class="d-flex align-center">
         <span data-testid="StringCard-Wrapper" :class="color + '--text title'">
-          <span data-testid="StringCard-value"> {{ value }} </span>
+          <span data-testid="StringCard-value">{{ value }}</span>
         </span>
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
   </v-card>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'StringCard',
   props: ['color', 'label', 'value']
diff --git a/src/components/Navbar/FreeSpace.vue b/src/components/Navbar/FreeSpace.vue
index dab6b16134..a6d52e26d3 100644
--- a/src/components/Navbar/FreeSpace.vue
+++ b/src/components/Navbar/FreeSpace.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="space" class="mb-4">
-    <StorageCard v-if="space" class="mt-8" :label="$t('navbar.freeSpace') | titleCase" color="upload" :value="space" />
+    <StorageCard v-if="space" class="mt-8" :label="$t('navbar.freeSpace')" color="upload" :value="space" />
   </div>
 </template>