diff --git a/src/components/commentCard.vue b/src/components/commentCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..adb544912912e856ee8ec491865df5a4174baf8a
--- /dev/null
+++ b/src/components/commentCard.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="card mx-3 my-1 bground-light">
+      <div class="card-body">
+          <p class="card-subtitle text-blue mt-1">{{comment.comment}}</p>
+      </div>
+      
+      <div class="card-footer">
+        <p class=" text-blue">{{comment.created_at}}</p>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CommentCard",
+  props: {
+      comment : Object
+  },
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style scoped>
+#footer{
+  width: 100%;
+}
+</style>
diff --git a/src/views/ResponseDetail.vue b/src/views/ResponseDetail.vue
index 6994551bb9e3c326fda7c946faeae42050f690c5..588a496d535bdf3850519b5e2d1f40d18395d734 100644
--- a/src/views/ResponseDetail.vue
+++ b/src/views/ResponseDetail.vue
@@ -4,7 +4,54 @@
                 <Sidebar current_page = "About"></Sidebar>
                 <div class="col ps-md-2 pt-2">
                     <Header></Header>
-                        <!-- isi mulai di sini -->
+                    <div class="row p-3">
+                            <router-link :to="{ path: `/manager/kpi/${this.kpiId}/employees/${this.empId}/responses` }" style="text-decoration: none">
+                            <div class="d-flex flex-row justify-content-start align-items-center illustration" id="back">
+                            <i class="icon ion-chevron-left text-blue" style="font-size: 20px"></i>
+                            <p class="text-blue ms-1">kembali</p>
+                            </div>
+                            </router-link>
+                    </div>
+                    <div class="row p-2">
+                        <h1 class="text-blue">{{kpi.name}}</h1>
+                        <div class="mb-3 me-3">
+                            <label  for="dateInput" class="text-blue"> Tanggal </label>
+                            <input v-model="response.date" type="text" id="dateInput" class="form-control" readonly>
+                        </div>
+                        <div class="mb-3 me-3">
+                            <label  for="NameInput" class="text-blue"> Target </label>
+                            <input v-model="kpi.target" type="text" id="NameInput" class="form-control" readonly>
+                        </div>
+                        <div class="mb-3 me-3">
+                            <label  for="NameInput" class="text-blue"> Aktual </label>
+                            <input v-model="response.actual" type="text" id="NameInput" class="form-control" readonly>
+                        </div>
+                        <div class="mb-3 me-3">
+                            <label  for="NameInput" class="text-blue"> Deskripsi </label>
+                            <input v-model="response.description" type="text" id="NameInput" class="form-control" readonly>
+                        </div>
+                        <div class="mb-3 me-3">
+                            <label  for="NameInput" class="text-blue"> Status </label>
+                            <input v-model="response.status" type="text" id="NameInput" class="form-control" readonly>
+                        </div>
+                        <div class="col">
+                            <button class="btn-reject float-end mx-2">Reject</button>
+                            <button class="btn-blue float-end mx-2">Adjust</button>
+                            <button class="btn-green float-end mx-2">Approve</button>
+                        </div>
+                    </div>
+                    <hr class="m-2">
+                    <div class="row p-2">
+                        <div class="col">
+                        <h1 class="text-blue">Komentar</h1>
+                        </div>
+                        <div class="col">
+                        <button class="btn-blue float-end">Buat Komentar</button>
+                        </div>
+                    </div>
+                    <template v-for="c in comments" :key="c">
+                        <CommentCard :comment="c"></CommentCard>
+                    </template>
                 </div>
             </div>
     </div>
@@ -14,14 +61,51 @@
 
 import Header from "../components/header"
 import Sidebar from "../components/sidebar"
+import CommentCard from "../components/commentCard"
 
 
 export default {
     name: "ResponseDetail",
     components: {
         Header,
-        Sidebar
+        Sidebar,
+        CommentCard
     }, 
+    data(){
+        return{
+            temp_comment:{
+                comment : "Tolong diperbaiki lagi",
+                created_at : "10-23-2021"
+            },
+            comments: [],
+            empId: 0,
+            responseId: 0,
+            kpiId: 0,
+            response: {
+                date: "10-23-2021",
+                actual: 10,
+                description: "Deskripsi",
+                status: "Pending"
+            },
+            kpi:{
+                name: "Nama KPI",
+                target: 20
+            }
+
+        }
+    },
+    created(){
+        this.empId = this.$route.params.empId
+        this.kpiId = this.$route.params.kpiId
+        this.responseId = this.$route.params.responseId
+        this.getComments()
+    },
+    methods: {
+        getComments(){
+            this.comments.push(this.temp_comment)
+            this.comments.push(this.temp_comment)
+        }
+    },
 }
 </script>
 
@@ -37,5 +121,24 @@ body {
     background-color: #fff;
 }
 
+.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>
\ No newline at end of file
diff --git a/src/views/ResponseIndex.vue b/src/views/ResponseIndex.vue
index d627c4b4c866f50ac80b5dd3766f1ef4681d31d8..fddb71adfb4bf21094b4e462c987a5de51d3e040 100644
--- a/src/views/ResponseIndex.vue
+++ b/src/views/ResponseIndex.vue
@@ -85,7 +85,6 @@ export default {
     created(){
         this.empId = this.$route.params.empId
         this.kpiId = this.$route.params.kpiId
-        console.log(this.empId, this.kpiId)
     },
     methods: {
         detailResponse(id){