diff --git a/src/components/card.vue b/src/components/card.vue
index 35380ad..2574d42 100644
--- a/src/components/card.vue
+++ b/src/components/card.vue
@@ -2,7 +2,7 @@
   <div class="card bg-light">
     <div class="card-body text-center">
       <p class="display-4 mb-0">{{cases}}</p>
-      <h5 class="text-muted">Confirmed Cases</h5>
+      <h5 class="text-muted">{{title}}</h5>
     </div>
   </div>
 </template>
@@ -10,6 +10,6 @@
 <script>
 export default {
   name: "Card",
-  props: ["cases"]
+  props: ["cases", "title"]
 };
 </script>
\ No newline at end of file
diff --git a/src/components/main.vue b/src/components/main.vue
index 32e1246..8b7f57d 100644
--- a/src/components/main.vue
+++ b/src/components/main.vue
@@ -7,13 +7,13 @@
     </div>
     <div class="row" v-if="load">
       <div class="col-md-4">
-        <Card :cases="worldWideResult.confirmed.value" />
+        <Card :cases="worldWideResult.confirmed.value" title="Confirmed Cases" />
       </div>
       <div class="col-md-4" v-if="countryList">
-        <Card :cases="worldWideResult.recovered.value" />
+        <Card :cases="worldWideResult.recovered.value" title="Recovered Cases" />
       </div>
       <div class="col-md-4">
-        <Card :cases="worldWideResult.deaths.value" />
+        <Card :cases="worldWideResult.deaths.value" title="Total Deaths" />
       </div>
     </div>
     <div class="row bg-light mt-5">