diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
index da9fccd5445b4f230659c6ca0dcc60a5e22d7c21..be6c6b3ee8595020a1a2abc16ccb6a93e33c08ab 100644
--- a/src/components/pages/BiayaLangsungPage.vue
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -92,6 +92,14 @@ export default {
           judul : "anggaran X",
           biaya : "1000.0000"
         },
+        {
+          judul : "anggaran X",
+          biaya : "1000.0000"
+        },
+                {
+          judul : "anggaran X",
+          biaya : "1000.0000"
+        },
         {
           judul : "anggaran X",
           biaya : "1000.0000"
diff --git a/src/components/partials/Comments.vue b/src/components/partials/Comments.vue
index 1ed71ad0062d4fc23509349dfe0b095e6ca63bb0..ff1026194419745414f5a7c6744a7915ed1f4e26 100644
--- a/src/components/partials/Comments.vue
+++ b/src/components/partials/Comments.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="placeholder">
+    <h4 class="font-weight-bold">Komentar ({{rows}})</h4>
     <div id="comments-container">
-      <h4 class="font-weight-bold">Komentar ({{rows}})</h4>
       <b-card
         bg-variant="light"
         class="item"
diff --git a/src/components/partials/SimpleCard.vue b/src/components/partials/SimpleCard.vue
index f7ce78ec288a10e88a9eb9329ac78dd536e7a03c..8cc3f54715ef2605798cfdf325b545746a501fb4 100644
--- a/src/components/partials/SimpleCard.vue
+++ b/src/components/partials/SimpleCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <b-col class="px-2" md="6" lg="12" cols="12">
     <b-card bg-variant="info" text-variant="white">
         <b-card-text class="text-right">
             {{ jenisAnggaran }}
@@ -7,7 +7,7 @@
             <b>{{ total }}</b>
         </b-card-text>
       </b-card>
-  </div>
+  </b-col>
 </template>
 
 <script>
diff --git a/src/components/partials/SimpleCardContainer.vue b/src/components/partials/SimpleCardContainer.vue
index 8f914b981491251e3a3afca9c8cba0facd57fcc8..73da827ca2be2c22f8746fb2ab2f25492c6d6d45 100644
--- a/src/components/partials/SimpleCardContainer.vue
+++ b/src/components/partials/SimpleCardContainer.vue
@@ -1,8 +1,6 @@
 <template>
-    <b-row id="content-detail" class="justify-content-md-center">
-      <b-col class="px-2" md="6" lg="12" cols="12">
+    <b-row id="content-detail">
         <simple-card v-for="data in dataBubble" :key="data.judul" v-bind:jenisAnggaran="data.judul" v-bind:totalAnggaran="data.biaya" />
-      </b-col>
     </b-row>
 </template>
 
diff --git a/src/components/partials/SimpleCardContainerScroll.vue b/src/components/partials/SimpleCardContainerScroll.vue
index ab8e46b4c57d58ca037fdb1bab67b724fc713e5e..ec7a19aef8df5c37b148f46805719dcf818ac7bc 100644
--- a/src/components/partials/SimpleCardContainerScroll.vue
+++ b/src/components/partials/SimpleCardContainerScroll.vue
@@ -1,9 +1,10 @@
 <template>
   <div id="placeholder">
-    <b-row id="content-detail" class="justify-content-md-center">
-      <b-col class="px-2" md="6" lg="12" cols="12">
+    <h4 class="font-weight-bold">
+      {{"Detail KEGIATAN"+ "(" + rows + ")" }}
+    </h4>
+    <b-row id="content-detail">
         <simple-card v-for="data in dataBubble" :key="data.judul" v-bind:jenisAnggaran="data.judul" v-bind:totalAnggaran="data.biaya" />
-      </b-col>
     </b-row>
   </div>
 </template>
@@ -18,11 +19,15 @@ export default {
       return {
       }
   },
+  computed : {
+    rows() {
+      return this.dataBubble.length;
+    }
+  },
   components: {
-      'simple-card':SimpleCard,
+    'simple-card':SimpleCard,
   },
   methods : {
-    
   },
 }
 </script>
@@ -38,12 +43,12 @@ b-col {
 #placeholder {
 
   width: 100%;
-  height: 100%;
   padding: 20px;
+  margin : 10px;
   
   #content-detail {
     padding-top: 20px;   
-    height: 60%;
+    max-height: 45.3125rem; //725px
     padding: 0 10px 10px;
     overflow-y: scroll;
     border-top: 1px solid #fff;