diff --git a/app/Http/Controllers/StudentController.php b/app/Http/Controllers/StudentController.php
index 08ddd14..ae69537 100644
--- a/app/Http/Controllers/StudentController.php
+++ b/app/Http/Controllers/StudentController.php
@@ -20,4 +20,8 @@ public function all_students(){
         $students = Student::paginate(5);
         return response()->json($students);
     }
+    public function edit_student($id){
+        $student = Student::find($id);
+        return response()->json($student);
+    }
 }
diff --git a/public/js/app.js b/public/js/app.js
index 5788504..31b18b1 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -2039,13 +2039,110 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
   data: function data() {
     return {
       students: {},
       name: "",
       email: "",
-      phone: ""
+      phone: "",
+      edit_name: "",
+      edit_email: "",
+      edit_phone: ""
     };
   },
   mounted: function mounted() {
@@ -2066,8 +2163,19 @@ __webpack_require__.r(__webpack_exports__);
 
       var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
       axios.get("all_students/?page=" + page).then(function (response) {
+        console.log(response.data);
         _this.students = response.data;
+      });
+    },
+    // create method edit student
+    editStudent: function editStudent(id) {
+      var _this2 = this;
+
+      axios.get("edit_student/" + id).then(function (response) {
         console.log(response.data);
+        _this2.edit_name = response.data.name;
+        _this2.edit_email = response.data.email;
+        _this2.edit_phone = response.data.phone;
       });
     }
   }
@@ -38502,7 +38610,46 @@ var render = function() {
                       _vm._v(" "),
                       _c("td", [_vm._v(_vm._s(student.phone))]),
                       _vm._v(" "),
-                      _c("td", [_vm._v("Dele")])
+                      _c("td", [
+                        _c(
+                          "button",
+                          {
+                            staticClass: "btn btn-primary",
+                            attrs: {
+                              type: "button",
+                              "data-toggle": "modal",
+                              "data-target": "#exampleModal"
+                            },
+                            on: {
+                              click: function($event) {
+                                return _vm.editStudent(student.id)
+                              }
+                            }
+                          },
+                          [
+                            _vm._v(
+                              "\n                    Edit\n                  "
+                            )
+                          ]
+                        ),
+                        _vm._v("\n                  |\n                  "),
+                        _c(
+                          "button",
+                          {
+                            staticClass: "btn btn-primary",
+                            attrs: {
+                              type: "button",
+                              "data-toggle": "modal",
+                              "data-target": "#exampleModal"
+                            }
+                          },
+                          [
+                            _vm._v(
+                              "\n                    Delete\n                  "
+                            )
+                          ]
+                        )
+                      ])
                     ])
                   }),
                   0
@@ -38518,7 +38665,137 @@ var render = function() {
           )
         ])
       ])
-    ])
+    ]),
+    _vm._v(" "),
+    _c(
+      "div",
+      {
+        staticClass: "modal fade",
+        attrs: {
+          id: "exampleModal",
+          tabindex: "-1",
+          role: "dialog",
+          "aria-labelledby": "exampleModalLabel",
+          "aria-hidden": "true"
+        }
+      },
+      [
+        _c(
+          "div",
+          { staticClass: "modal-dialog", attrs: { role: "document" } },
+          [
+            _c("div", { staticClass: "modal-content" }, [
+              _vm._m(1),
+              _vm._v(" "),
+              _c("div", { staticClass: "modal-body" }, [
+                _c("form", [
+                  _c("div", { staticClass: "form-group" }, [
+                    _c("label", { attrs: { for: "exampleInputEmail1" } }, [
+                      _vm._v("Name")
+                    ]),
+                    _vm._v(" "),
+                    _c("input", {
+                      directives: [
+                        {
+                          name: "model",
+                          rawName: "v-model",
+                          value: _vm.edit_name,
+                          expression: "edit_name"
+                        }
+                      ],
+                      staticClass: "form-control",
+                      attrs: { type: "text", placeholder: "Enter Name" },
+                      domProps: { value: _vm.edit_name },
+                      on: {
+                        input: function($event) {
+                          if ($event.target.composing) {
+                            return
+                          }
+                          _vm.edit_name = $event.target.value
+                        }
+                      }
+                    })
+                  ]),
+                  _vm._v(" "),
+                  _c("div", { staticClass: "form-group" }, [
+                    _c("label", { attrs: { for: "exampleInputEmail1" } }, [
+                      _vm._v("Email")
+                    ]),
+                    _vm._v(" "),
+                    _c("input", {
+                      directives: [
+                        {
+                          name: "model",
+                          rawName: "v-model",
+                          value: _vm.edit_email,
+                          expression: "edit_email"
+                        }
+                      ],
+                      staticClass: "form-control",
+                      attrs: { type: "email", placeholder: "Enter email" },
+                      domProps: { value: _vm.edit_email },
+                      on: {
+                        input: function($event) {
+                          if ($event.target.composing) {
+                            return
+                          }
+                          _vm.edit_email = $event.target.value
+                        }
+                      }
+                    })
+                  ]),
+                  _vm._v(" "),
+                  _c("div", { staticClass: "form-group" }, [
+                    _c("label", { attrs: { for: "exampleInputEmail1" } }, [
+                      _vm._v("Phone")
+                    ]),
+                    _vm._v(" "),
+                    _c("input", {
+                      directives: [
+                        {
+                          name: "model",
+                          rawName: "v-model",
+                          value: _vm.edit_phone,
+                          expression: "edit_phone"
+                        }
+                      ],
+                      staticClass: "form-control",
+                      attrs: { type: "phone", placeholder: "Enter Phone" },
+                      domProps: { value: _vm.edit_phone },
+                      on: {
+                        input: function($event) {
+                          if ($event.target.composing) {
+                            return
+                          }
+                          _vm.edit_phone = $event.target.value
+                        }
+                      }
+                    })
+                  ]),
+                  _vm._v(" "),
+                  _c(
+                    "button",
+                    {
+                      staticClass: "btn btn-primary",
+                      attrs: { type: "submit" },
+                      on: {
+                        click: function($event) {
+                          $event.preventDefault()
+                          return _vm.saveStudent($event)
+                        }
+                      }
+                    },
+                    [_vm._v("\n              Submit\n            ")]
+                  )
+                ])
+              ]),
+              _vm._v(" "),
+              _vm._m(2)
+            ])
+          ]
+        )
+      ]
+    )
   ])
 }
 var staticRenderFns = [
@@ -38539,6 +38816,52 @@ var staticRenderFns = [
         _c("th", { attrs: { scope: "col" } }, [_vm._v("Action")])
       ])
     ])
+  },
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("div", { staticClass: "modal-header" }, [
+      _c(
+        "h5",
+        { staticClass: "modal-title", attrs: { id: "exampleModalLabel" } },
+        [_vm._v("Modal title")]
+      ),
+      _vm._v(" "),
+      _c(
+        "button",
+        {
+          staticClass: "close",
+          attrs: {
+            type: "button",
+            "data-dismiss": "modal",
+            "aria-label": "Close"
+          }
+        },
+        [_c("span", { attrs: { "aria-hidden": "true" } }, [_vm._v("×")])]
+      )
+    ])
+  },
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c("div", { staticClass: "modal-footer" }, [
+      _c(
+        "button",
+        {
+          staticClass: "btn btn-secondary",
+          attrs: { type: "button", "data-dismiss": "modal" }
+        },
+        [_vm._v("\n            Close\n          ")]
+      ),
+      _vm._v(" "),
+      _c(
+        "button",
+        { staticClass: "btn btn-primary", attrs: { type: "button" } },
+        [_vm._v("Save changes")]
+      )
+    ])
   }
 ]
 render._withStripped = true
diff --git a/resources/js/components/CreateComponent.vue b/resources/js/components/CreateComponent.vue
index c7f7afa..04f6f4f 100644
--- a/resources/js/components/CreateComponent.vue
+++ b/resources/js/components/CreateComponent.vue
@@ -63,11 +63,30 @@
               </thead>
               <tbody>
                 <tr v-for="(student, index) in students.data" :key="student.id">
-                  <th scope="row">{{index+1}}</th>
-                  <td>{{student.name}}</td>
-                  <td>{{student.email}}</td>
-                  <td>{{student.phone}}</td>
-                  <td>Dele</td>
+                  <th scope="row">{{ index + 1 }}</th>
+                  <td>{{ student.name }}</td>
+                  <td>{{ student.email }}</td>
+                  <td>{{ student.phone }}</td>
+                  <td>
+                    <button
+                      type="button"
+                      @click="editStudent(student.id)"
+                      class="btn btn-primary"
+                      data-toggle="modal"
+                      data-target="#exampleModal"
+                    >
+                      Edit
+                    </button>
+                    |
+                    <button
+                      type="button"
+                      class="btn btn-primary"
+                      data-toggle="modal"
+                      data-target="#exampleModal"
+                    >
+                      Delete
+                    </button>
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -79,6 +98,81 @@
         </div>
       </div>
     </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="exampleModal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <form>
+              <div class="form-group">
+                <label for="exampleInputEmail1">Name</label>
+                <input
+                  type="text"
+                  v-model="edit_name"
+                  class="form-control"
+                  placeholder="Enter Name"
+                />
+              </div>
+              <div class="form-group">
+                <label for="exampleInputEmail1">Email</label>
+                <input
+                  type="email"
+                  v-model="edit_email"
+                  class="form-control"
+                  placeholder="Enter email"
+                />
+              </div>
+              <div class="form-group">
+                <label for="exampleInputEmail1">Phone</label>
+                <input
+                  type="phone"
+                  v-model="edit_phone"
+                  class="form-control"
+                  placeholder="Enter Phone"
+                />
+              </div>
+
+              <button
+                type="submit"
+                v-on:click.prevent="saveStudent"
+                class="btn btn-primary"
+              >
+                Submit
+              </button>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -90,6 +184,10 @@ export default {
       name: "",
       email: "",
       phone: "",
+
+      edit_name: "",
+      edit_email: "",
+      edit_phone: "",
     };
   },
   mounted() {
@@ -108,8 +206,17 @@ export default {
     // Our method to GET results from a Laravel endpoint
     getResults(page = 1) {
       axios.get("all_students/?page=" + page).then((response) => {
+        console.log(response.data);
         this.students = response.data;
+      });
+    },
+    // create method edit student
+    editStudent(id) {
+      axios.get("edit_student/" + id).then((response) => {
         console.log(response.data);
+        this.edit_name = response.data.name;
+        this.edit_email = response.data.email;
+        this.edit_phone = response.data.phone;
       });
     },
   },
diff --git a/routes/web.php b/routes/web.php
index 7675927..1edb65e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -19,4 +19,5 @@
 
 Route::get('/home', 'HomeController@index')->name('home');
 Route::post('save_student', 'StudentController@save_student');
-Route::get('all_students', 'StudentController@all_students');
\ No newline at end of file
+Route::get('all_students', 'StudentController@all_students');
+Route::get('edit_student/{id}', 'StudentController@edit_student');
\ No newline at end of file