diff --git a/src/components/table-response.vue b/src/components/table-response.vue
index e0431ff6f8c6fa53dacbffd7a419f41a8f45813c..f7157d694a7ef86214464a215161265d945127f5 100644
--- a/src/components/table-response.vue
+++ b/src/components/table-response.vue
@@ -35,9 +35,10 @@
               </template>
             </template>
 
-          <td style="text-align: center">
-            <button @click="this.$emit('edit-entry', e[columns.Id.data])" class="btn btn-blue"> <i class="icon ion-android-create" style="font-size: 20px"></i> Edit </button>
-            <button @click="this.$emit('delete-entry', e[columns.Id.data])" class="btn-red"> <i class="icon ion-ios-trash-outline" style="font-size: 23px"></i> </button>
+          <td v-if="e.status == 'pending'" style="text-align: center">
+            <button @click="this.$emit('approve', e[columns.Id.data])" class="btn-green mx-2">Approve</button>
+            <button @click="this.$emit('adjust', e[columns.Id.data])" class="btn-blue mx-2">Adjust</button>
+            <button @click="this.$emit('reject', e[columns.Id.data])" class="btn-reject mx-2">Reject</button>
           </td>
         </tr>
       </tbody>
@@ -95,6 +96,10 @@ export default {
       default: true
     },
     key: Number,
+    refresh: {
+      type: Boolean,
+      default: true
+    },
   },
   data() {
     return {
@@ -127,6 +132,9 @@ export default {
     },
     endpoint(){
       this.getData()
+    },
+    refresh(){
+      this.getData()
     }
   },
   methods: {
@@ -135,7 +143,7 @@ export default {
       if (!this.sorted.asc){
         sortCol = `-${sortCol}`
       }
-        HTTP.get(`${this.endpoint}?page=${this.page}&sort=${sortCol}&filter[${this.filter_column}]=${this.filter}`).then((res)=>{
+        HTTP.get(`${this.endpoint}?page=${this.page}&sort=${sortCol}`).then((res)=>{
             if (res.status == 200){
               // console.log(res.data)
                 this.entries = res.data.data.data
@@ -217,4 +225,25 @@ li {
 th{
     text-align: center;
 }
+
+.btn-blue {
+  background-color: #6992b4;
+  color: #f1f7fc;
+  border-radius: 15px;
+  padding: 7px;
+}
+
+.btn-green {
+  background-color: #3CB371;
+  color: #f1f7fc;
+  border-radius: 15px;
+  padding: 7px;
+}
+
+.btn-reject {
+  background: #f4476b;
+  color: #f1f7fc;
+  border-radius: 15px;
+  padding: 7px;
+}
 </style>
diff --git a/src/views/ResponseIndex.vue b/src/views/ResponseIndex.vue
index 3b68d40a51d2e24853afccd8860923bb9c3d1fa8..83eabdd859343372f89d6dffd9e59ed2a9b14a84 100644
--- a/src/views/ResponseIndex.vue
+++ b/src/views/ResponseIndex.vue
@@ -95,10 +95,12 @@
                             :columns="columns"
                             :filter="filter"
                             :filter_column="'status'"
-                            :edit = "false"
-                            :delete = "false"
                             :default_sort = "'status'"
+                            :refresh = "refresh"
                             @detail-entry="detailResponse"
+                            @approve="approve"
+                            @reject="reject"
+                            @adjust="adjust"
                         ></TableR>
                     </div>
                 </div>
@@ -158,18 +160,18 @@ export default {
             slug: "",
             endpoint:"",
             kpi:{},
+            refresh:true,
         }
     },
     created(){
         this.slug = this.$route.params.empId
         this.kpiId = this.$route.params.kpiId
         this.getEmpId()
-        console.log(this.isManager)
     },
     methods: {
         detailResponse(id){
             //routing page detail
-            this.$router.push({ name: "ResponseDetail", params: { kpiId: this.kpiId, empId:this.empId, responseId:id }});
+            this.$router.push({ name: "ResponseDetail", params: { kpiId: this.kpiId, empId:this.slug, responseId:id }});
         },
         getEmpId(){
             HTTP.get(`employees/${this.slug}`).then((res)=>{
@@ -182,6 +184,31 @@ export default {
                 this.kpi = res.data.data
                 this.endpoint = `kpis/${this.kpi.id}/employees/${this.emp.id}/kpi-responses`
             })
+        },
+        changeStatus(id, status){
+            HTTP.get(`kpi-responses/${id}`).then((res)=>{
+                let kpiRes = res.data.data
+                kpiRes.status = status
+                let response = {
+                    "kpi_id": kpiRes.kpi_id,
+                    "actual" : kpiRes.actual,
+                    "description" : kpiRes.description,
+                    "status" : status,
+                    "date" : kpiRes.date
+                }
+                HTTP.put(`kpi-responses/${id}`, response).then(()=>{
+                    this.refresh = !this.refresh
+                }).catch((e)=> {console.log(e.response.data)})
+            })
+        },
+        approve(id){
+            this.changeStatus(id, "approved")
+        },
+        reject(id){
+            this.changeStatus(id, "rejected")
+        },
+        adjust(id){
+            console.log(id)
         }
     }