diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
index 48ae98f8368b1fac71d98927bbea463a8d2d0328..90d19c0ed79adf4d64a0980a86d8155a3c1f5b3c 100644
--- a/src/components/pages/BiayaLangsungPage.vue
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -19,7 +19,10 @@
         <simple-card-container-scroll  :dataBubble='data' />
       </b-col>
       <b-col id="comments-container" cols="12" lg="8">
-        <comments commentable />
+        <comments
+          commentable
+          v-bind:id="this.$route.params.id"
+        />
       </b-col>  
     </b-row>
   </b-container>
diff --git a/src/components/pages/SemuaAnggaran.vue b/src/components/pages/SemuaAnggaran.vue
index ec64994fe447416f6145c3e3b8b0fb658f6b02cc..782dc05514fa7dccb0020e76c6de6bcb0d6e35f8 100644
--- a/src/components/pages/SemuaAnggaran.vue
+++ b/src/components/pages/SemuaAnggaran.vue
@@ -13,7 +13,10 @@
       </b-col>
     </b-row>
     <div id="comments-container">
-      <comments commentable/>
+      <comments
+        commentable
+        v-bind:id="this.id"
+      />
     </div>
   </b-container>
 </template>
@@ -32,7 +35,8 @@ export default {
   },
   data() {
     return {
-      data : []
+      data : [],
+      id : ""
     }
   },
   methods: {
@@ -51,6 +55,7 @@ export default {
       .then(response => response.json())
       .then(response => {
         if(response.status === 200) {
+          this.id = response.data._id.$oid
           this.data = response.subdata
         }
       })
diff --git a/src/components/partials/Comments.vue b/src/components/partials/Comments.vue
index 1a78ebb550700f3d32a5d69b79f844e9f6664a0e..404290c6ffdb22d97c43cdbdc5021e5170a3f917 100644
--- a/src/components/partials/Comments.vue
+++ b/src/components/partials/Comments.vue
@@ -2,15 +2,20 @@
   <div id="comments-placeholder">
     <h4 class="font-weight-bold">Komentar ({{rows}})</h4>
     <div id="comments-container">
+      <h3
+        class="center text-muted"
+      >
+        {{noticeText}}
+      </h3>
       <b-card
         bg-variant="light"
         class="item"
         v-for="comment in lists"
-        :key="comment.id"
+        :key="comment.commenter_id"
       >
-        <div><small class="font-weight-bold">{{comment.name}}</small></div>
-        {{comment.content}}
-        <div><small class="text-muted font-italic">{{comment.timestamp}}</small></div>
+        <div><small class="font-weight-bold">{{comment.commenter_name}}</small></div>
+        {{comment.comment_text}}
+        <div><small class="text-muted font-italic">{{comment.date}}</small></div>
         <b-card
           v-if="comment.hasOwnProperty('reply')"
           bg-variant="dark"
@@ -76,16 +81,19 @@ export default {
   props: {
     commentable : Boolean,
     replyable : Boolean,
+    id: String
   },
   components: {
     
   },
   data() {
     return {
+      noticeText: "",
       perPage: 5,
       currentPage: 1,
       text: "",
       replyText: [],
+      data: [],
       items: [
         {
           id: 6,
@@ -146,11 +154,11 @@ export default {
   },
   computed: {
     rows() {
-      return this.items.length
+      return this.data.length
     },
     lists() {
       // Return just page of items needed
-      return this.items.slice(
+      return this.data.slice(
         (this.currentPage - 1) * this.perPage,
         this.currentPage * this.perPage
       )
@@ -175,9 +183,35 @@ export default {
       this.refreshContent();
     },
     refreshContent: function() {
-      let temp = this.items
-      this.items = null
-      this.items = temp
+      if(this.id != '') {
+        this.noticeText = "Memuat komentar"
+        let fetchData = {
+          method: 'POST',
+          body: JSON.stringify({ page_id: this.id }),
+          headers: { "Content-Type": "application/json" }
+        }
+
+        print(fetchData)
+
+        fetch(`${this.$store.state.baseUrl}/api/comment/get`, fetchData)
+        .then(response => response.json())
+        .then(response => {
+          console.log(response)
+          if(response.status === 200) {
+            this.data = response.data
+            if (this.rows == 0) this.noticeText = "Tidak ada komentar"
+            else this.noticeText = ""
+          }
+        })
+      }
+    }
+  },
+  created() {
+    this.refreshContent()
+  },
+  watch: {
+    id(val) {
+      this.refreshContent()
     }
   }
 }