diff --git a/src/components/partials/SimpleCard.vue b/src/components/partials/SimpleCard.vue
index 5fe7b9ab8986138022aa4a4b4e9232b6ea2c82f0..1709a796a474d3e39e7d45d05dce6f59f82429f2 100644
--- a/src/components/partials/SimpleCard.vue
+++ b/src/components/partials/SimpleCard.vue
@@ -12,6 +12,9 @@
       <div class="content-anggaran text-right">
         <b>{{ total }}</b>
       </div>
+      <div class="index">
+        <b>{{ index + 1 }}</b>
+      </div>
     </b-card>
   </b-col>
 </template>
@@ -20,7 +23,7 @@
 
 export default {
   name: 'SimpleCard',
-  props : ['jenisAnggaran','totalAnggaran'],
+  props : ['jenisAnggaran','totalAnggaran','index'],
   data() {
       return {
         total : "Rp "+this.totalAnggaran
@@ -43,5 +46,18 @@ export default {
     width : 100%;
     margin-top : 10px;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+    overflow: hidden;
+}
+
+.index {
+  position: absolute;
+  font-size: 8rem;
+  font-style: bold;
+  color: #00000011;
+  bottom: -80px;
+  -webkit-user-select: none; /* Safari */        
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
 }
 </style>
diff --git a/src/components/partials/SimpleCardContainer.vue b/src/components/partials/SimpleCardContainer.vue
index a006dad4f6651ec227f61d6240d9d0c3707d3c7a..3a752a8ca5a09a4b0482149f58cc65c477cf33a5 100644
--- a/src/components/partials/SimpleCardContainer.vue
+++ b/src/components/partials/SimpleCardContainer.vue
@@ -1,6 +1,6 @@
 <template>
     <b-row id="content-detail">
-        <simple-card v-for="data in dataBubble" :key="data.name" v-bind:jenisAnggaran="data.name" v-bind:totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
+        <simple-card v-for="(data, index) in dataBubble" :key="data.name" :jenisAnggaran="data.name" :index="index" :totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
               ',00.-'"/>
     </b-row>
 </template>
diff --git a/src/components/partials/SimpleCardContainerScroll.vue b/src/components/partials/SimpleCardContainerScroll.vue
index 676dc52737d1be33765c868f1729c11ca174629f..38a1eca21b6d20c4c03bc093a557fec0c73541d4 100644
--- a/src/components/partials/SimpleCardContainerScroll.vue
+++ b/src/components/partials/SimpleCardContainerScroll.vue
@@ -4,7 +4,7 @@
       {{"Detail KEGIATAN"+ "(" + rows + ")" }}
     </h4>
     <b-row id="content-detail">
-        <simple-card v-for="data in dataBubble" :key="data._id.$oid" v-bind:jenisAnggaran="data.name" v-bind:totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
+        <simple-card v-for="(data, index) in dataBubble" :key="data._id.$oid" :index="index" :jenisAnggaran="data.name" :totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
               ',00.-'"" />
     </b-row>
   </div>