diff --git a/js/update-note.js b/js/update-note.js
index ec1e91a..f9f8abb 100644
--- a/js/update-note.js
+++ b/js/update-note.js
@@ -2,6 +2,7 @@ function update_box() {
     const update_box = `
     <!-- new note box expanded -->
     <form id="update_note">
+        <input type="hidden" name="id">
         <div class= "card-header py-1">
             <!-- The following two <div> MUST BE EMPTY to display placeholder -->
                 <!-- new note title input -->
@@ -41,18 +42,18 @@ function update_box() {
     $("#update_content").focus();
 
     // color pickers at footer
-    $("#update_note .dot").each(function(index) {
+    $("#update_note .dot").each(function (index) {
         $(this).css("background-color", $(this).attr("value"));
 
-        $(this).click(function() {
+        $(this).click(function () {
             $(this).addClass("selected_dot")
-            .siblings().removeClass("selected_dot");
-            
-            $("#update_note_box").css("background-color",$(this).attr("value"));
+                .siblings().removeClass("selected_dot");
+
+            $("#update_note_box").css("background-color", $(this).attr("value"));
         })
-        
 
-        if(index === 0) {
+
+        if (index === 0) {
             $(this).addClass("selected_dot");
         }
     });
@@ -66,8 +67,8 @@ function update_box() {
     });
 
     // move focus to note content on enter key press
-    $("#update_title").keydown(function(e){
-        if(e.keyCode == 13) {
+    $("#update_title").keydown(function (e) {
+        if (e.keyCode == 13) {
             e.preventDefault();
             $("#update_content").focus();
         }
@@ -76,10 +77,85 @@ function update_box() {
 update_box();
 
 // show update box modal on click of note
-$("#existing_notes").on('click','.note_title, .note_content', function() {
-    $("#update_modal").modal("show");
+$("#existing_notes").on('click', '.note_title, .note_content', function () {
+
+    $modal = $("#update_modal");
+    $modal.modal("show");
 
     // select the note
     $note = $(this).parent();
-    
+    $id = $note.attr("id");
+    $title = $note.children(".note_title").text();
+    $content = $note.children(".note_content").text();
+    $color = $note.attr("data-color");
+
+    // fill value to update modal
+    $("#update_title").text($title);
+    $("#update_content").text($content);
+    $("#update_note input[name='id']").val($id);
+
+    // change color accordingly
+    $modal.find(".dot").each(function () {
+        if ($(this).attr("value") == $color) {
+            $(this).addClass("selected_dot")
+                .siblings().removeClass("selected_dot");
+
+            $("#update_note_box").css("background-color", $(this).attr("value"));
+        }
+    });
+
+    // update on save button click
+    $modal.on('submit', "#update_note", function (event) {
+        event.preventDefault();
+
+        // bind form contents to hidden elements
+        
+        // $("input[name='id']", this).val($id);
+        $("input[name='title']", this).val($("#update_title").html());
+        $("input[name='content']", this).val($("#update_content").html());
+        $("input[name='color']", this).val($(".selected_dot", this).attr("value"));
+        $("input[name='pinned']", this).val("false");
+
+        // select form
+        $form = $("#update_note");
+
+        // cache inputs
+        $inputs = $form.find("input");
+
+        // serialize the data
+        var serializedData = $form.serialize();
+
+        // console.log(serializedData);
+
+        // disable form elements for the duration of ajax request
+        // disabled elements do not be serialized so serialize first and disable
+        $inputs.prop("disabled", true);
+
+        // fire Ajax request to php/update.php
+        var request = $.ajax({
+            url: "php/update.php",
+            type: "POST",
+            data: serializedData
+        });
+
+        // callback handler on success
+        request.done(function (response, textStatus, jqXHR) {
+            response = JSON.parse(response);
+            $modal.modal("hide");
+
+            // update note on DOM
+            $note.children(".note_title").html(response['title']);
+            $note.children(".note_content").html(response['content']);
+            $note.attr("data-color",response['color']);
+            $note.attr("data-lastModified",response['last_modified']);
+            $note.attr("style","background-color:"+response['color']);
+            $note.hide().prependTo("#existing_notes").fadeIn(1000);
+        });
+
+        request.always(function() {
+            $inputs.prop("disabled",false);
+        });
+    });
+
+
 });
\ No newline at end of file
diff --git a/php/create.php b/php/create.php
index 4a6f133..8a1e8d4 100644
--- a/php/create.php
+++ b/php/create.php
@@ -57,7 +57,7 @@
                     $result = $result -> fetch_assoc();
 
                     echo '<div class="saved_note card" id ="'.$id.'" style="background-color:'.$result['color'].';"
-                    data-lastModified="'.$result['last_modified'].'" data-pinned="'.$result['pinned'].'">
+                    data-lastModified="'.$result['last_modified'].'" data-pinned="'.$result['pinned'].'" data-color="'.$result['color'].'">
                         <div class="note_title card-header py-1">'.$result['title'].'</div>
                         <div class="note_content card-body py-1">'.$result['content'].'</div>
                         <div class="card-footer py-0">
diff --git a/php/read.php b/php/read.php
index 27c1831..3fc5cee 100644
--- a/php/read.php
+++ b/php/read.php
@@ -24,7 +24,7 @@
                 $pinned = $row['pinned'];
 
                 echo '<div class="saved_note card" id ="'.$id.'" style="background-color:'.$color.';"
-                    data-lastModified="'.$lastModified.'" data-pinned="'.$pinned.'">
+                    data-lastModified="'.$lastModified.'" data-pinned="'.$pinned.'" data-color="'.$color.'">
                         <div class="note_title card-header py-1">'.$title.'</div>
                         <div class="note_content card-body py-1">'.$content.'</div>
                         <div class="card-footer py-0">
diff --git a/php/update.php b/php/update.php
index dc10d56..695b9f9 100644
--- a/php/update.php
+++ b/php/update.php
@@ -1,4 +1,73 @@
 <?php
+// include congig file
+require_once "config.php";
 
+// variables
+$title = $content = "";
+$color = "White";
+$error = "";
 
+// process new note creation
+if($_SERVER["REQUEST_METHOD"] == "POST") {
+
+    // $rest_json = file_get_contents("php://input");
+    // $_POST = json_decode($rest_json, true);
+
+    // validate title
+    $id = isset($_POST['id']) ? $_POST['id'] : '';
+    $input_title = trim(isset($_POST['title']) ? $_POST['title'] : '');
+    $input_content = trim(isset($_POST['content']) ? $_POST['content'] : '');
+    $input_color = trim(isset($_POST['color']) ? $_POST['color'] : $color);
+
+    // stop XSS
+    $input_title = htmlspecialchars($input_title, ENT_QUOTES, 'UTF-8', false);
+    $input_content = htmlspecialchars($input_content, ENT_QUOTES, 'UTF-8', false);
+    $input_color = htmlspecialchars($input_color, ENT_QUOTES, 'UTF-8', false);
+
+    // discard if both empty
+    if(!empty($input_title) || !empty($input_content)) {
+        $title = $input_title;
+        $content = $input_content;
+        $color = $input_color;
+    }
+    else {
+        $error = "Empty Note ! Discarded !!";
+    }
+
+    // check input errors before inserting into database
+    if(empty($error)) {
+        // prepare insert statement
+        $sql = "UPDATE notes
+                SET title=?, content=?, color=?
+                WHERE id=?";
+        
+        // prepare and bind variables
+        if($stmt = $conn -> prepare($sql)) {
+            $stmt -> bind_param("sssi",$param_title, $param_content, $param_color,$param_id);
+
+            // set parameters
+            $param_id = $id;
+            $param_title = $title;
+            $param_content = $content;
+            $param_color = $color;
+
+            // attempt to execute prepared statement
+            if($stmt -> execute()) {
+                // return newly created object
+                $sql = "SELECT * FROM notes WHERE id=".$id;
+                $result = $conn -> query($sql);
+                $result = $result -> fetch_assoc();
+
+                echo json_encode($result,JSON_NUMERIC_CHECK);
+            }
+
+            // close statement
+            $stmt -> close();
+        }
+
+        // close connection
+        $conn -> close();
+    }
+}
+exit();
 ?>
\ No newline at end of file