diff --git a/app/Http/Controllers/StudentController.php b/app/Http/Controllers/StudentController.php
index ae69537..ab10547 100644
--- a/app/Http/Controllers/StudentController.php
+++ b/app/Http/Controllers/StudentController.php
@@ -7,7 +7,8 @@
 
 class StudentController extends Controller
 {
-    public function save_student(){
+    public function save_student()
+    {
         $student = new Student;
         $student->name = request()->name;
         $student->email = request()->email;
@@ -16,12 +17,25 @@ public function save_student(){
         return 'fersgdre';
     }
 
-    public function all_students(){
+    public function all_students()
+    {
         $students = Student::paginate(5);
         return response()->json($students);
     }
-    public function edit_student($id){
+
+    public function edit_student($id)
+    {
         $student = Student::find($id);
         return response()->json($student);
     }
+
+    public function update_student()
+    {
+        $student = Student::find(request()->id);
+        $student->name = request()->name;
+        $student->email = request()->email;
+        $student->phone = request()->phone;
+        $student->update();
+        return 'done update';
+    }
 }
diff --git a/public/js/app.js b/public/js/app.js
index 31b18b1..cae7c41 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -2132,7 +2132,6 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
-//
 /* harmony default export */ __webpack_exports__["default"] = ({
   data: function data() {
     return {
@@ -2142,7 +2141,8 @@ __webpack_require__.r(__webpack_exports__);
       phone: "",
       edit_name: "",
       edit_email: "",
-      edit_phone: ""
+      edit_phone: "",
+      id: ""
     };
   },
   mounted: function mounted() {
@@ -2151,31 +2151,51 @@ __webpack_require__.r(__webpack_exports__);
   },
   methods: {
     saveStudent: function saveStudent() {
+      var _this = this;
+
       axios.post("save_student", {
         name: this.name,
         email: this.email,
         phone: this.phone
+      }).then(function (response) {
+        _this.getResults(); //show list student after add
+
       });
     },
     // Our method to GET results from a Laravel endpoint
     getResults: function getResults() {
-      var _this = this;
+      var _this2 = this;
 
       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;
+        _this2.students = response.data;
       });
     },
     // create method edit student
     editStudent: function editStudent(id) {
-      var _this2 = this;
+      var _this3 = 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;
+        _this3.id = response.data.id;
+        _this3.edit_name = response.data.name;
+        _this3.edit_email = response.data.email;
+        _this3.edit_phone = response.data.phone;
+      });
+    },
+    updateStudent: function updateStudent() {
+      var _this4 = this;
+
+      console.log(this.id);
+      axios.put("update_student", {
+        id: this.id,
+        name: this.edit_name,
+        email: this.edit_email,
+        phone: this.edit_phone
+      }).then(function (response) {
+        _this4.getResults(); //show list student after update
+
       });
     }
   }
@@ -38687,8 +38707,8 @@ var render = function() {
             _c("div", { staticClass: "modal-content" }, [
               _vm._m(1),
               _vm._v(" "),
-              _c("div", { staticClass: "modal-body" }, [
-                _c("form", [
+              _c("form", [
+                _c("div", { staticClass: "modal-body" }, [
                   _c("div", { staticClass: "form-group" }, [
                     _c("label", { attrs: { for: "exampleInputEmail1" } }, [
                       _vm._v("Name")
@@ -38771,26 +38791,35 @@ var render = function() {
                         }
                       }
                     })
-                  ]),
+                  ])
+                ]),
+                _vm._v(" "),
+                _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: "submit" },
+                      staticClass: "btn btn-success",
+                      attrs: { type: "button", "data-dismiss": "modal" },
                       on: {
                         click: function($event) {
                           $event.preventDefault()
-                          return _vm.saveStudent($event)
+                          return _vm.updateStudent($event)
                         }
                       }
                     },
-                    [_vm._v("\n              Submit\n            ")]
+                    [_vm._v("\n              Save changes\n            ")]
                   )
                 ])
-              ]),
-              _vm._v(" "),
-              _vm._m(2)
+              ])
             ])
           ]
         )
@@ -38841,27 +38870,6 @@ var staticRenderFns = [
         [_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 04f6f4f..be2546d 100644
--- a/resources/js/components/CreateComponent.vue
+++ b/resources/js/components/CreateComponent.vue
@@ -121,8 +121,8 @@
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
-          <div class="modal-body">
-            <form>
+          <form>
+            <div class="modal-body">
               <div class="form-group">
                 <label for="exampleInputEmail1">Name</label>
                 <input
@@ -150,26 +150,25 @@
                   placeholder="Enter Phone"
                 />
               </div>
-
+            </div>
+            <div class="modal-footer">
               <button
-                type="submit"
-                v-on:click.prevent="saveStudent"
-                class="btn btn-primary"
+                type="button"
+                class="btn btn-secondary"
+                data-dismiss="modal"
               >
-                Submit
+                Close
               </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>
+              <button
+                type="button"
+                data-dismiss="modal"
+                v-on:click.prevent="updateStudent"
+                class="btn btn-success"
+              >
+                Save changes
+              </button>
+            </div>
+          </form>
         </div>
       </div>
     </div>
@@ -188,6 +187,8 @@ export default {
       edit_name: "",
       edit_email: "",
       edit_phone: "",
+
+      id: "",
     };
   },
   mounted() {
@@ -196,11 +197,15 @@ export default {
   },
   methods: {
     saveStudent() {
-      axios.post("save_student", {
-        name: this.name,
-        email: this.email,
-        phone: this.phone,
-      });
+      axios
+        .post("save_student", {
+          name: this.name,
+          email: this.email,
+          phone: this.phone,
+        })
+        .then((response) => {
+          this.getResults(); //show list student after add
+        });
     },
 
     // Our method to GET results from a Laravel endpoint
@@ -214,11 +219,25 @@ export default {
     editStudent(id) {
       axios.get("edit_student/" + id).then((response) => {
         console.log(response.data);
+        this.id = response.data.id;
         this.edit_name = response.data.name;
         this.edit_email = response.data.email;
         this.edit_phone = response.data.phone;
       });
     },
+    updateStudent() {
+      console.log(this.id);
+      axios
+        .put("update_student", {
+          id: this.id,
+          name: this.edit_name,
+          email: this.edit_email,
+          phone: this.edit_phone,
+        })
+        .then((response) => {
+          this.getResults(); //show list student after update
+        });
+    },
   },
 };
 </script>
diff --git a/routes/web.php b/routes/web.php
index 1edb65e..aa4e551 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -20,4 +20,5 @@
 Route::get('/home', 'HomeController@index')->name('home');
 Route::post('save_student', 'StudentController@save_student');
 Route::get('all_students', 'StudentController@all_students');
-Route::get('edit_student/{id}', 'StudentController@edit_student');
\ No newline at end of file
+Route::get('edit_student/{id}', 'StudentController@edit_student');
+Route::put('update_student', 'StudentController@update_student');
\ No newline at end of file