diff --git a/assets/css/biodata.css b/assets/css/biodata.css
index e5bfd8e52ab9471622a1dc1a4699d9090f3477ea..0e7a64ade284f106ba8fc8e6a240794f2d9f5df7 100644
--- a/assets/css/biodata.css
+++ b/assets/css/biodata.css
@@ -27,19 +27,20 @@ div.edit{
     align-self:flex-end;
 }
 
-image.profile {
-    height: 50px;
-    width: 50px;
+img.profile {
+    height: 250px;
+    width: 250px;
     border-radius: 50%;
 }
 
 img.edits {
-    border: 1px solid #ddd;
-    border-radius: 4px;
     padding: 5px;
-    width: 150px;
+    width: 50px;
 }
 
-img.edits:hover {
-    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+
+img.icon {
+    height: 30px;
+    width: 30px;
+    padding-right: 0cm;
 }
diff --git a/assets/css/edit_biodata.css b/assets/css/edit_biodata.css
index 0834d4da7b830bed2d5750b51fe95756c9b66cca..25c777e8084d250e62538cc7e0be1da5461b01a8 100644
--- a/assets/css/edit_biodata.css
+++ b/assets/css/edit_biodata.css
@@ -1,7 +1,17 @@
-h1 {
+th {
     color: coral;
 }
 
+th span {
+    font-size: 30px;
+}
+
+prof_pic {
+    height: 200px;
+    width: 200px;
+    border-radius: 50%;
+}
+
 img {
     width: 100px;
     height: 100px;
@@ -20,9 +30,8 @@ button.back {
 
 button.back:hover {
     background-color: maroon;
-    border: whitesmoke 1px solid;
+    border: plum 1px solid;
     color: linen;
-    border-style: hidden;
 }
 
 button.save {
@@ -43,4 +52,28 @@ button.save:hover {
 
 textarea {
     resize: none;
+}
+
+.inputfile {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+.inputfile + label {
+    font-size: 1.25em;
+    font-weight: 700;
+    background-color: rgb(209, 202, 202);
+    border: 1px solid gainsboro;
+    border-radius: 5px;
+    display: inline-block;
+}
+
+div.fieldname {
+    border: 1px solid;
+    width: 200px;
+    height: 20px;
 }
\ No newline at end of file
diff --git a/assets/image/address.png b/assets/image/address.png
new file mode 100644
index 0000000000000000000000000000000000000000..1896fe53a66cd537f958ac9d64e042d4e819bb64
Binary files /dev/null and b/assets/image/address.png differ
diff --git a/assets/image/dummy.jpg b/assets/image/dummy.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..45cb6608d8a5d97b97e4696a3207fbfe8710aa18
Binary files /dev/null and b/assets/image/dummy.jpg differ
diff --git a/assets/image/dummy2.jpg b/assets/image/dummy2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..889ae10f1e910c35a6295e2a763186781bda35bf
Binary files /dev/null and b/assets/image/dummy2.jpg differ
diff --git a/assets/image/email.png b/assets/image/email.png
new file mode 100644
index 0000000000000000000000000000000000000000..63d1e0c8117d49ea41dbfb00c345923d3a0937ac
Binary files /dev/null and b/assets/image/email.png differ
diff --git a/assets/image/empty_image.png b/assets/image/empty_image.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a920d058ddbbee1cbf53019fa8e10d7a475d51c
Binary files /dev/null and b/assets/image/empty_image.png differ
diff --git a/assets/image/pacman.jpg b/assets/image/pacman.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2fab54f5723b48bfe3e201bf8d837b9c4cbac67f
Binary files /dev/null and b/assets/image/pacman.jpg differ
diff --git a/assets/image/pencil.png b/assets/image/pencil.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0632c7303d217cad2d1a0794f8b297846ceaa46
Binary files /dev/null and b/assets/image/pencil.png differ
diff --git a/assets/image/pencil2.png b/assets/image/pencil2.png
new file mode 100644
index 0000000000000000000000000000000000000000..cded74059278c934caf54ef95edb14b902b6a667
Binary files /dev/null and b/assets/image/pencil2.png differ
diff --git a/assets/image/phone.png b/assets/image/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..43c4dfcaa0eaf8d9ea2b83b9a45c246111df4703
Binary files /dev/null and b/assets/image/phone.png differ
diff --git a/assets/image/profile.jpg b/assets/image/profile.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..97a1a78035f2c53030c9b148e9a9fe39b355b901
Binary files /dev/null and b/assets/image/profile.jpg differ
diff --git a/assets/image/tayo.jpg b/assets/image/tayo.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5c597838ea1361d9c1393a986edd95a2f4c5eaa2
Binary files /dev/null and b/assets/image/tayo.jpg differ
diff --git a/assets/js/edit.js b/assets/js/edit.js
index f5ebe91d0820c9770b503f5fdeb0d610d46dd5cd..c9e65dd780931f45b09c9449ec8d8d411a381d68 100644
--- a/assets/js/edit.js
+++ b/assets/js/edit.js
@@ -1,51 +1,74 @@
-window.onload = function() {
+window.addEventListener('load', function() {
+    var input = document.getElementById('field_data');
+    var infoArea = document.getElementById('filename');
+    var image = document.getElementById('prof_pic');
+
+    input.addEventListener('change', function ( event ) {
+        
+        // the change event gives us the input it occurred in 
+        var input = event.srcElement;
+        
+        // the input has an array of files in the `files` property, each one has a name that you can use. We're just using the name here.
+        var fileName = input.files[0].name;
+        
+        // use fileName however fits your app best, i.e. add it into a div
+        infoArea.value = fileName;
+
+        var imagePath = URL.createObjectURL(event.target.files[0]);
+        image.src = imagePath;
+    });
+
     // Add validator for the fields below.
-    let name = document.getElementById('field_name');
-    let address = document.getElementById('field_address');
-    let phone = document.getElementById('field_phone');
-    name.onkeyup = function(e) {
-        if (this.value !== "") {
+    var name = document.getElementById('field_name');
+    var address = document.getElementById('field_address');
+    var phone = document.getElementById('field_phone');
+    // let pic_id = document.getElementById('field_image_id');
+    //let image = document.getElementById('field_data');
+    name.onchange = function(e) {
+        if (this.value.match(nameRE)) {
             name_ok = true;
         } else {
             name_ok = false;
         }
     }
-    address.onkeyup = function(e) {
+    address.onchange = function(e) {
         if (this.value !== "") {
             address_ok = true;
         } else {
             address_ok = false;
         }
     }
-    phone.onkeyup = function(e) {
-        if (this.value !== "") {
+    phone.onchange = function(e) {
+        if (this.value.match(phoneRE)) {
             phone_ok = true;
         } else {
             phone_ok = false;
         }
     }
     // Whether or not a field is okay.
-    var name_ok = false;
-    var address_ok = false;
-    var phone_ok = false;
+    var name_ok = name.value !== "";
+    var address_ok = address.value !== "";
+    var phone_ok = phone.value !== "";
+    // var pic_id_ok = false;
+    
     // On save button clicked.
     let button = document.getElementById('save_button');
     button.addEventListener("click", (e) => {
-        // let name = document.getElementById('field_name');
-        // if (!name_ok) {
-        //     name.focus();
-        //     return;
-        // }
-        // let address = document.getElementById('field_address');
-        // if (!address_ok) {
-        //     address.focus();
-        //     return;
-        // }
-        // let phone = document.getElementById('field_phone');
-        // if (!phone_ok) {
-        //     phone.focus();
-        //     return;
-        // }
+        if ((!name_ok)) {
+            notifyError(name);
+            return;
+        }
+        if (!address_ok) {
+            notifyError(address);
+            return;
+        }
+        if (!phone_ok) {
+            notifyError(phone);
+            return;
+        }
         document.getElementById("edit_form").submit();
     });
-}
\ No newline at end of file
+});
+
+nameRE = /^(\w+)(\s\w+)*$/g;
+phoneRE = /^\d{9,12}$/g;
\ No newline at end of file
diff --git a/assets/js/history.js b/assets/js/history.js
index 93d83fae622a6eb0d7498bb8d572a78bdb1c6af6..fe91755707654917d43ca0b3f64529dc0ff2f707 100644
--- a/assets/js/history.js
+++ b/assets/js/history.js
@@ -11,7 +11,11 @@ function loadHistory() {
             for (i = 0; i < data.data[0].length; i++) {
                 // setting bind variable
                 var img = document.createElement("IMG");
-                img.setAttribute("src", "ajax/image/get?id=" + data.data[1][i].image_id);
+                if (data.data[1][i].image_id == null) {
+                    img.setAttribute("src", path("assets/image/empty_image.png"));
+                } else {
+                    img.setAttribute("src", "ajax/image/get?id=" + data.data[1][i].image_id);
+                }
                 var titleName = document.createTextNode(data.data[1][i].title);
                 var amount = document.createTextNode("Jumlah : " + data.data[0][i].amount);
                 var reviewStatus;
diff --git a/assets/js/navBar.js b/assets/js/navBar.js
index c8f31eba288868e11593078b8f2de5f8246ee060..0afd4fe0b435b4797571751e2f4f37b25a095ce0 100644
--- a/assets/js/navBar.js
+++ b/assets/js/navBar.js
@@ -1,8 +1,7 @@
 window.addEventListener('load', function() {
-    currentTab = window.location.pathname.split("/").pop();
-    if (currentTab == "review") {
-        document.getElementById("history").style.backgroundColor = "rgba(255, 81, 0, 0.74)";
-    } else {
-        document.getElementById(currentTab).style.backgroundColor = "rgba(255, 81, 0, 0.74)";
+    var currentTab = window.location.pathname.split("/")[2];
+    var tab = document.getElementById(currentTab);
+    if (tab) {
+        tab.style.backgroundColor = "rgba(255, 81, 0, 0.74)";
     }
 });
\ No newline at end of file
diff --git a/controller/BiodataController.php b/controller/BiodataController.php
index 0269f2fe583a89d03789466054ac8e7edda57d3b..1768ab07c7e471c2c92bc2fdbacef2ec2dca31b6 100644
--- a/controller/BiodataController.php
+++ b/controller/BiodataController.php
@@ -15,15 +15,17 @@ class BiodataController extends BaseController {
         if (isset($username)) {
             $model_biodata = new Model\BiodataModel();
             $biodata = $model_biodata->findByID($username);
-            $this->setResponse(200, "Success");
-            return $biodata->asArray();
-        
-            // $this->setResponse(401, "Not logged in");
-            // return $params;
-            
+            if (isset($biodata)) {
+                $this->setResponse(200, "Success");
+                return $biodata->asArray();
+            }
+            else {
+                $this->setResponse(500, "No biodata for $username");
+                return;
+            }
         }
         else {
-            $this->setResponse(400);
+            $this->setResponse(401, "Please log in first!");
             return $params;
         }
     }
diff --git a/controller/EditController.php b/controller/EditController.php
index 515f2c8ddde3d33c114e56bc05c2dbb9e0f78088..c51f3ced98b2562597fcae539f18419f3f0989d4 100644
--- a/controller/EditController.php
+++ b/controller/EditController.php
@@ -13,64 +13,80 @@ class EditController extends BaseController {
     protected function run($params) {
         $username = $this->getUsername();
         if (isset($username)) {
+
+            $image_id = null;
+            //If uploaded an image 
+            if ((isset($_FILES['image'])) && (!empty($_FILES['image']['tmp_name']))) {
+                $file = file_get_contents($_FILES['image']["tmp_name"]);
+                $info = pathinfo($_FILES['image']['name']);
+                $ext = $info['extension'];
+                $model_image = new Model\ImageModel();
+                $image = $model_image->findByID((int) $this->getArg('pic_id'));
+                if (isset($image)) {
+                    $image->data = $file;
+                    $image->type = $ext;
+                    $model_image->update($image);
+                    // if ($model_image->affectedRow > 0) {
+                        // $this->setResponse(200, "Ganti gambar");
+                    // } else {
+                    //     $this->setResponse(200, "Unchanged.");
+                    // }
+                    // return $image->id;   
+                }
+                else {
+                    $image = new Entity\ImageEntity(array(
+                        "id" => 0,
+                        "data" => $file,
+                        "type" => $ext
+                    ));
+                    $model_image->create($image);
+                }
+                $image_id = $image->id;
+            }
+
             $model_account = new Model\AccountModel();
             $model_biodata = new Model\BiodataModel();
+            // $model_image = new Model\ImageModel();
+
             $user = $model_account->findByID($username);
             if (isset($this->params["data"]["name"])) {
-                // User available.
+                // Data received.
+                // $image = $model_image->findByID($this->getArg('pic_id'));
                 $biodata = $model_biodata->findByID($username);
-                $arr_bio = $biodata->asArray();
-                $biodatas = new Entity\GenericEntity(array(
-                    "username" => $username,
-                    "name" => $this->getArg('name'),
-                    "email" => $arr_bio['email'],
-                    "address" => $this->getArg('address'),
-                    "phone" => $this->getArg('phone'),
-                ));
-                // $result = $model_biodata->update($biodatas);
-                
-                if ($model_biodata->update($biodatas)) {
-                    // return to history page
-                    header("Location: /book/profile");
-                    exit;
+                $biodata->name = $this->getArg('name');
+                $biodata->address = $this->getArg('address');
+                $biodata->phone = $this->getArg('phone');
+                if (isset($image_id)) {
+                    $biodata->pic_id = $image_id;
                 }
-
-                // $model_token = new Model\TokenModel();
-                // $token = $model_token->findByID($this->getArg('username'));
+                $model_biodata->update($biodata);
+                
+                // $model_biodata->update($biodatas);
                 
-                // if (isset($token)) {
-                //     // Update current token.
-                //     $token->token = LoginController::generateAccessToken($user->username);
-                //     $token->expiry = date('Y-m-d H:i:s', strtotime(date('Y-m-d H:i:s') . ' + ' . LoginController::$TokenDuration));
-                //     $model_token->update($token);
-                // } else {
-                //     // Create a new token.
-                //     $token = new Entity\TokenEntity(array(
-                //         "username" => $user->username,
-                //         "access-token" => LoginController::generateAccessToken($user->username),
-                //         "expiry" => date('Y-m-d H:i:s', strtotime(date('Y-m-d H:i:s') . ' + ' . LoginController::$TokenDuration))
-                //     ));
-                //     $model_token->create($token);
-                // }
                 $this->setResponse(200, "User $username updated");
-                return $biodatas->asArray();
+                return $biodata->asArray();
                 // return $params;
             } else {
+                //Initial condition
                 $biodata = $model_biodata->findByID($username);
                 $arr_bio = $biodata->asArray();
-                $biodatas = new Entity\GenericEntity(array(
-                    "username" => $username,
-                    "name" => $arr_bio['name'],
-                    "email" => $arr_bio['email'],
-                    "address" => $arr_bio['address'],
-                    "phone" => $arr_bio['phone'],
-                ));
+                // $biodatas = new Entity\GenericEntity(array(
+                //     "username" => $username,
+                //     "name" => $arr_bio['name'],
+                //     "email" => $arr_bio['email'],
+                //     "address" => $arr_bio['address'],
+                //     "phone" => $arr_bio['phone'],
+                //     "pic_id" => $arr_bio["pic_id"],
+                //     // "pic_id" => "100",
+                // ));
                 $this->setResponse(200, "Please edit");
-                return $biodatas->asArray();
-                // return $params;
+                return $arr_bio;
+                // return $_FILES;
             }
+
+
         } else {
-            $this->setResponse(400, "Please log in first");
+            $this->setResponse(401, "Please log in first");
             return $params;
         }
     }
diff --git a/model/BiodataModel.php b/model/BiodataModel.php
index 11f1c7163c23e43b7de78091be05154da1e701c5..c63d2155cf9ce68085c87e45f25f754238fd617b 100644
--- a/model/BiodataModel.php
+++ b/model/BiodataModel.php
@@ -1,98 +1,100 @@
-<?php
-namespace JLAS\Book\Model;
-
-class BiodataModel extends BaseModel {
-
-    function __construct() {
-        parent::__construct("GenericEntity");
-        $this->table = "biodata";
-    }
-
-    /**
-     * Find an account with specific username.
-     * @param string $id The username of the biodata.
-     * @return GenericEntity the entity with matching id.
-     */
-    public function findByID($id) {
-        $result = $this->query("SELECT * FROM $this->table WHERE `username` = :id LIMIT 1", array(":id"=>$id));
-        if (count($this->queryResult) > 0) {
-            return $this->newEntity($this->queryResult[0]);
-        }
-        return null;
-    }
-    
-    /**
-     * Find an entity matching the criteria.
-     * @return array an array containing all matching entities.
-     */
-    public function find($criteria, $data) {
-        $result = $this->query("SELECT * FROM $this->table WHERE $criteria", $data);
-        $retval = array();
-        if ($result) {
-            foreach ($this->queryResult as $row) {
-                array_push($retval, $this->newEntity($row));
-            }
-        }
-        return $retval;
-    }
-
-    /**
-     * Insert a new entity into the database.
-     * @param GenericEntity $entity the entity to be created.
-     * @return boolean if the creation is successful.
-     */
-    public function create($entity) {
-        if ($this->findByID($entity->username) != null) {
-            return false;
-        }
-        $result = $this->query(
-            "INSERT INTO $this->table (`username`, `name`, `email`, `address`, `phone`) VALUES (:username, :name, :email, :address, :phone)",
-            array(
-                ":username" => $entity->username,
-                ":name" => $entity->name,
-                ":email" => $entity->email,
-                ":address" => $entity->address,
-                ":phone" => $entity->phone,
-            )
-        );
-        return $result;
-    }
-
-    /**
-     * Update an entity in the database.
-     * @param GenericEntity $entity the entity to be updated.
-     * @return boolean if the update is successful.
-     */
-    public function update($entity) {
-        $result = $this->query(
-            "UPDATE $this->table SET `name`=:name, `email`=:email, `address`=:address, `phone`=:phone WHERE `username`=:username",
-            array(
-                ":username" => $entity->username,
-                ":name" => $entity->name,
-                ":email" => $entity->email,
-                ":address" => $entity->address,
-                ":phone" => $entity->phone,
-            )
-        );
-        return $result;
-    }
-
-    /**
-     * Delete an entity from the database.
-     * @param GenericEntity $entity the entity to be deleted.
-     * @return boolean if the deletion is successful.
-     */
-    public function delete($entity) {
-        $result = $this->query(
-            "DELETE FROM $this->table WHERE `username`=:username",
-            array(
-                ":username" => $entity->username,
-            )
-        );
-        return $result;
-
-    }
-
-}
-
+<?php
+namespace JLAS\Book\Model;
+
+class BiodataModel extends BaseModel {
+
+    function __construct() {
+        parent::__construct("GenericEntity");
+        $this->table = "biodata";
+    }
+
+    /**
+     * Find an account with specific username.
+     * @param string $id The username of the biodata.
+     * @return GenericEntity the entity with matching id.
+     */
+    public function findByID($id) {
+        $result = $this->query("SELECT * FROM $this->table WHERE `username` = :id LIMIT 1", array(":id"=>$id));
+        if (count($this->queryResult) > 0) {
+            return $this->newEntity($this->queryResult[0]);
+        }
+        return null;
+    }
+    
+    /**
+     * Find an entity matching the criteria.
+     * @return array an array containing all matching entities.
+     */
+    public function find($criteria, $data) {
+        $result = $this->query("SELECT * FROM $this->table WHERE $criteria", $data);
+        $retval = array();
+        if ($result) {
+            foreach ($this->queryResult as $row) {
+                array_push($retval, $this->newEntity($row));
+            }
+        }
+        return $retval;
+    }
+
+    /**
+     * Insert a new entity into the database.
+     * @param GenericEntity $entity the entity to be created.
+     * @return boolean if the creation is successful.
+     */
+    public function create($entity) {
+        if ($this->findByID($entity->username) != null) {
+            return false;
+        }
+        $result = $this->query(
+            "INSERT INTO $this->table (`username`, `name`, `email`, `address`, `phone`, `pic_id`) VALUES (:username, :name, :email, :address, :phone, :pic_id)",
+            array(
+                ":username" => $entity->username,
+                ":name" => $entity->name,
+                ":email" => $entity->email,
+                ":address" => $entity->address,
+                ":phone" => $entity->phone,
+                ":pic_id" => $entity->pic_id,
+            )
+        );
+        return $result;
+    }
+
+    /**
+     * Update an entity in the database.
+     * @param GenericEntity $entity the entity to be updated.
+     * @return boolean if the update is successful.
+     */
+    public function update($entity) {
+        $result = $this->query(
+            "UPDATE $this->table SET `name`=:name, `email`=:email, `address`=:address, `phone`=:phone, `pic_id`=:pic_id WHERE `username`=:username",
+            array(
+                ":username" => $entity->username,
+                ":name" => $entity->name,
+                ":email" => $entity->email,
+                ":address" => $entity->address,
+                ":phone" => $entity->phone,
+                ":pic_id" => $entity->pic_id,
+            )
+        );
+        return $result;
+    }
+
+    /**
+     * Delete an entity from the database.
+     * @param GenericEntity $entity the entity to be deleted.
+     * @return boolean if the deletion is successful.
+     */
+    public function delete($entity) {
+        $result = $this->query(
+            "DELETE FROM $this->table WHERE `username`=:username",
+            array(
+                ":username" => $entity->username,
+            )
+        );
+        return $result;
+
+    }
+
+}
+
 ?>
\ No newline at end of file
diff --git a/model/ImageModel.php b/model/ImageModel.php
index f5e6fa38790a77e67eb7a48bd1a8f9cd297bad36..0b1d78b627f45ead9d661d4b8fad71b23e57265e 100644
--- a/model/ImageModel.php
+++ b/model/ImageModel.php
@@ -1,95 +1,95 @@
-<?php
-namespace JLAS\Book\Model;
-
-class ImageModel extends BaseModel {
-
-    function __construct() {
-        parent::__construct("ImageEntity");
-        $this->table = "images";
-    }
-
-    /**
-     * Find an image with specific id.
-     * @param string $id The id of the image.
-     * @return ImageEntity the entity with matching id.
-     */
-    public function findByID($id) {
-        $result = $this->query("SELECT * FROM $this->table WHERE `id` = :id LIMIT 1", array(":id"=>$id));
-        if (count($this->queryResult) > 0) {
-            return $this->newEntity($this->queryResult[0]);
-        }
-        return null;
-    }
-    
-    /**
-     * Find an entity matching the criteria.
-     * @return array an array containing all matching entities.
-     */
-    public function find($criteria, $data) {
-        $result = $this->query("SELECT * FROM $this->table WHERE $criteria", $data);
-        $retval = array();
-        if ($result) {
-            foreach ($this->queryResult as $row) {
-                array_push($retval, $this->newEntity($row));
-            }
-        }
-        return $retval;
-    }
-
-    /**
-     * Insert a new entity into the database.
-     * @param ImageEntity $entity the entity to be created.
-     * @return boolean if the creation is successful.
-     */
-    public function create($entity) {
-        if ($this->findByID($entity->id) != null) {
-            return false;
-        }
-        $result = $this->query(
-            "INSERT INTO $this->table (`id`, `data`, `type`) VALUES (:id, :data, :type)",
-            array(
-                ":id" => $entity->id,
-                ":data" => $entity->data,
-                ":type" => $entity->type,
-            )
-        );
-        $entity->id = $this->connect()->lastInsertId();
-        return $result;
-    }
-
-    /**
-     * Update an entity in the database.
-     * @param ImageEntity $entity the entity to be updated.
-     * @return boolean if the update is successful.
-     */
-    public function update($entity) {
-        $result = $this->query(
-            "UPDATE $this->table SET `id`=:id, `data`=:data, `type`=:type",
-            array(
-                ":id" => $entity->id,
-                ":data" => $entity->data,
-                ":type" => $entity->type,
-            )
-        );
-        return $result;
-    }
-
-    /**
-     * Delete an entity from the database.
-     * @param ImageEntity $entity the entity to be deleted.
-     * @return boolean if the deletion is successful.
-     */
-    public function delete($entity) {
-        $result = $this->query(
-            "DELETE FROM $this->table WHERE `id`=:id",
-            array(
-                ":id" => $entity->id,
-            )
-        );
-        return $result;
-
-    }
-
-}
-
+<?php
+namespace JLAS\Book\Model;
+
+class ImageModel extends BaseModel {
+
+    function __construct() {
+        parent::__construct("ImageEntity");
+        $this->table = "images";
+    }
+
+    /**
+     * Find an image with specific id.
+     * @param string $id The id of the image.
+     * @return ImageEntity the entity with matching id.
+     */
+    public function findByID($id) {
+        $result = $this->query("SELECT * FROM $this->table WHERE `id` = :id LIMIT 1", array(":id"=>$id));
+        if (count($this->queryResult) > 0) {
+            return $this->newEntity($this->queryResult[0]);
+        }
+        return null;
+    }
+    
+    /**
+     * Find an entity matching the criteria.
+     * @return array an array containing all matching entities.
+     */
+    public function find($criteria, $data) {
+        $result = $this->query("SELECT * FROM $this->table WHERE $criteria", $data);
+        $retval = array();
+        if ($result) {
+            foreach ($this->queryResult as $row) {
+                array_push($retval, $this->newEntity($row));
+            }
+        }
+        return $retval;
+    }
+
+    /**
+     * Insert a new entity into the database.
+     * @param ImageEntity $entity the entity to be created.
+     * @return boolean if the creation is successful.
+     */
+    public function create($entity) {
+        if ($this->findByID($entity->id) != null) {
+            return false;
+        }
+        $result = $this->query(
+            "INSERT INTO $this->table (`id`, `data`, `type`) VALUES (:id, :data, :type)",
+            array(
+                ":id" => $entity->id,
+                ":data" => $entity->data,
+                ":type" => $entity->type,
+            )
+        );
+        $entity->id = $this->connect()->lastInsertId();
+        return $result;
+    }
+
+    /**
+     * Update an entity in the database.
+     * @param ImageEntity $entity the entity to be updated.
+     * @return boolean if the update is successful.
+     */
+    public function update($entity) {
+        $result = $this->query(
+            "UPDATE $this->table SET `data`=:data, `type`=:type WHERE `id`=:id",
+            array(
+                ":id" => $entity->id,
+                ":data" => $entity->data,
+                ":type" => $entity->type,
+            )
+        );
+        return $result;
+    }
+
+    /**
+     * Delete an entity from the database.
+     * @param ImageEntity $entity the entity to be deleted.
+     * @return boolean if the deletion is successful.
+     */
+    public function delete($entity) {
+        $result = $this->query(
+            "DELETE FROM $this->table WHERE `id`=:id",
+            array(
+                ":id" => $entity->id,
+            )
+        );
+        return $result;
+
+    }
+
+}
+
 ?>
\ No newline at end of file
diff --git a/routing/profile.php b/routing/profile.php
index c4464b410a314138990da962cdab666cdce8df3a..f00c7af26b0b27784e3e0b1df58aa55774c15b82 100644
--- a/routing/profile.php
+++ b/routing/profile.php
@@ -3,6 +3,6 @@ namespace JLAS\Book;
 use SuPHP\Routing as Routing;
 
 Routing\addRoute("^profile$", "GET", ["biodata.php"], "BiodataController");
-Routing\addRoute("^edit$", "GET", ["edit_biodata.php"], "EditController");
-Routing\addRoute("^edit$", "POST", ["edit_biodata.php"], "EditController");
+Routing\addRoute("^profile\/edit$", "GET", ["edit_biodata.php"], "EditController");
+Routing\addRoute("^profile\/edit$", "POST", ["edit_biodata.php"], "EditController");
 ?>
\ No newline at end of file
diff --git a/sql/biodata.sql b/sql/biodata.sql
index b790d2b3e9a77d2aa6ccea851f80b971f843d00f..344d45fe5312aab1c9c1488807f89ef3cddc0f08 100644
--- a/sql/biodata.sql
+++ b/sql/biodata.sql
@@ -1,11 +1,11 @@
 -- phpMyAdmin SQL Dump
--- version 4.8.0
+-- version 4.7.9
 -- https://www.phpmyadmin.net/
 --
--- Host: localhost
--- Generation Time: Oct 20, 2018 at 12:00 PM
+-- Host: 127.0.0.1
+-- Generation Time: Oct 25, 2018 at 09:47 AM
 -- Server version: 10.1.31-MariaDB
--- PHP Version: 7.2.4
+-- PHP Version: 7.2.3
 
 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
 SET AUTOCOMMIT = 0;
@@ -34,7 +34,8 @@ CREATE TABLE `biodata` (
   `name` varchar(255) NOT NULL,
   `email` varchar(255) NOT NULL,
   `address` text NOT NULL,
-  `phone` varchar(255) NOT NULL
+  `phone` varchar(255) NOT NULL,
+  `pic_id` int(11) DEFAULT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
 --
diff --git a/sql/book.sql b/sql/book.sql
index d994131a5b967dae65355a9d2b77d02e20a9d245..f0794a059eeb428594a2f3c0c6e664626ca8f6fc 100644
--- a/sql/book.sql
+++ b/sql/book.sql
@@ -3,7 +3,7 @@
 -- https://www.phpmyadmin.net/
 --
 -- Host: 127.0.0.1
--- Generation Time: Oct 24, 2018 at 12:42 PM
+-- Generation Time: Oct 25, 2018 at 07:40 AM
 -- Server version: 10.1.31-MariaDB
 -- PHP Version: 7.2.3
 
@@ -34,7 +34,7 @@ CREATE TABLE `book` (
   `title` varchar(255) NOT NULL,
   `author` varchar(255) NOT NULL,
   `description` text NOT NULL,
-  `image_id` int(11) NOT NULL
+  `image_id` int(11) DEFAULT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
 --
@@ -57,6 +57,16 @@ ALTER TABLE `book`
 --
 ALTER TABLE `book`
   MODIFY `book_id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- Constraints for dumped tables
+--
+
+--
+-- Constraints for table `book`
+--
+ALTER TABLE `book`
+  ADD CONSTRAINT `image_id` FOREIGN KEY (`image_id`) REFERENCES `images` (`id`) ON DELETE SET NULL ON UPDATE CASCADE;
 COMMIT;
 
 /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
diff --git a/view/biodata.php b/view/biodata.php
index 7e19c903aa7e4c77b8d95549ef05580e4846daf7..4c74b606c1dd3e55044db7e4d000a70d14829b78 100644
--- a/view/biodata.php
+++ b/view/biodata.php
@@ -1,40 +1,57 @@
 <!DOCTYPE html>
 <?php 
-    var_dump($response);
-    echo "<br>";
-    var_dump($data);
+    if ($response['code'] != 200) {
+        alert("Error : " . $response['code'] . ' ' . $response['message']);
+        redirect(URLROOT . 'login');
+        die;
+    }
 ?>
 <html>
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Profile</title>
-    <link rel="stylesheet" href="assets/css/biodata.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <?php
+    include VIEW . "navBar.php";
+    css("biodata.css");
+    ?>
+    <!-- <link rel="stylesheet" href="assets/css/biodata.css"> -->
 </head>
 <body>
 
 <div class="header">
-    <div class="edit"><a href="edit"> <img class="edits" alt="Edit button" src="https://us.123rf.com/450wm/briang77/briang771512/briang77151201745/49670730-pencil-vector-icon.jpg?ver=6"> </a></div>
-    <div><image class="profile" src="img/tayo.jpg" alt="Profile picture"> </div>
+    <div class="edit"><a href="<?php path('profile/edit'); ?>"> <img class="edits" alt="Edit button" src="assets/image/pencil.png"> </a></div>
+    <div><img class="profile" src="<?php 
+                                        if(isset($data["pic_id"])) {
+                                            echo "ajax/image/get?id=". $data["pic_id"];
+                                        }
+                                        else {
+                                            echo "assets/image/dummy.jpg";
+                                        }?>" 
+                                        alt="Profile picture"> </div>
     <div><?php echo $data["name"] ?></div>
 </div>
 
 <h1 class="content"> My profile </h1>
 <table>
     <tr>
-    <td>Username</td>
+        <td><img class="icon" src="assets/image/profile.jpg"> </td>
+        <td>Username</td>
         <td><?php echo $data["username"] ?></td>
     </tr>
     <tr>
+        <td><img class="icon" src="assets/image/email.png"> </td>
         <td>Email </td>
         <td><?php echo $data["email"] ?></td>
     </tr>
     <tr>
+        <td><img class="icon" src="assets/image/address.png" ></td>
         <td>Address </td>
         <td><?php echo $data["address"] ?></textarea></td>
     </tr>
     <tr>
+        <td><img class="icon" src="assets/image/phone.png"> </td>
         <td>Phone Number </td>
         <td><?php echo $data["phone"] ?></td>
     </tr>
diff --git a/view/edit_biodata.php b/view/edit_biodata.php
index d82367bea0be08f255e2ceaf7782ad31e35ef222..db1a935b5744f928a295c777927357e07e13eb24 100644
--- a/view/edit_biodata.php
+++ b/view/edit_biodata.php
@@ -1,8 +1,15 @@
 <!DOCTYPE html>
 <?php 
-    var_dump($response);
-    echo "<br>";
-    var_dump($data);
+    if (isset($response)) {
+        if ($response['code'] != 200) {
+            alert("Error : " . $response['code'] . ' ' . $response['message']);
+            redirect(URLROOT . 'login');
+            die;
+        } else if ($_SERVER['REQUEST_METHOD'] == "POST") {
+            redirect(URLROOT . 'profile');
+            die;
+        }
+    }
 ?>
 <html>
 <head>
@@ -10,9 +17,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Edit Profile</title>
-    <link rel="stylesheet" href="assets/css/edit_biodata.css">
-    <script src="assets/js/edit.js"></script>
-    <!-- <script src="assets/js/bootstrap.js"></script> -->
+    <?php
+    include VIEW . "navBar.php";
+    css("main.css");
+    css("edit_biodata.css");
+    js("bootstrap.js");
+    js("edit.js");
+    ?>
+    <!-- <link rel="stylesheet" href="assets/css/edit_biodata.css">
+    <script src="assets/js/edit.js"></script> -->
 </head>
 <body>
 
@@ -20,16 +33,29 @@
     <table>
         <thead>
         <tr>
-            <th colspan="3"><span>Edit Profile</span></th>
+            <th colspan="2"><span>Edit Profile</span></th>
         </tr>
         </thead>
         <body>
-            <form method="POST" action="" id="edit_form"> 
+            <form method="POST" action="" id="edit_form"  enctype="multipart/form-data"> 
+                <input id="field_image_id" name="pic_id" hidden value="<?php echo $data["pic_id"]?>">
                 <tr> 
-                    <td><img src="data:image/jpeg;base64,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" alt="Profile Picture"> </td>
+                    <td><img id="prof_pic" class="prof_pic" src="<?php 
+                                                        if(isset($data["pic_id"])) {
+                                                            path("ajax/image/get?id=". $data["pic_id"]);
+                                                        }
+                                                        else {
+                                                            path("assets/image/dummy.jpg");
+                                                        }?>" 
+                                                    alt="Profile Picture"> </td>
                     <td> 
                             Update profile picture <br>
-                            <input type="text" name="file_address"> <input type="file" name="new_profile" value="Browse ...">
+                            <input type="text" id="filename" class="fieldname" readonly>
+                            <input id="field_data" name="image" type="file" accept="image/jpeg, image/png, image/gif" class="inputfile"/><label for="field_data">Browse...</label>
+                            <!-- <input type="text" id="filename" class="fieldname" name="pic_id" value="<?php echo $data["pic_id"]?>"></div> -->
+                            <!-- <form action="ajax/image/set" method="POST" id="prof_pic_form">
+                                <input id="field_data" name="data" type="file" accept="image/jpg|image/png" class="inputfile"/><label for="field_data">Browse...</label>
+                            </form>       -->
                     </td>
                 </tr>
                 <tr>
@@ -46,7 +72,7 @@
                 </tr>
             </form>
             <tr>
-                <td><button class="back" onclick="window.location.href = 'profile';">Back</button></td>
+                <td><button class="back" onclick="window.location.href = path('profile');">Cancel</button></td>
                 <td align="right"><button class="save" id="save_button">Save </button></td>
             </tr>
     </table>
diff --git a/view/image.php b/view/image.php
index c2bc21e44b38a7ce8b761a275cfc92e352453ccc..8223da25d35f8c0798e19b4ed42c7df542214633 100644
--- a/view/image.php
+++ b/view/image.php
@@ -3,7 +3,7 @@ if ($response['code'] == 200) {
     $mime = "";
     if ($data['type'] == "png") {
         $mime = "image/png";
-    } else if ($data['type'] == "jpg") {
+    } else if (($data['type'] == "jpeg") || ($data['type'] == "jpg")) {
         $mime = "image/jpeg";
     } else if ($data['type'] == "gif") {
         $mime = "image/gif";
diff --git a/view/review.php b/view/review.php
index b82536d63140d875d3f107bd3b5bb4bf6a9bb9ce..99e609124487de6d61fba1a5c089643b9223c422 100644
--- a/view/review.php
+++ b/view/review.php
@@ -32,7 +32,15 @@
                 </p>
             </td>
             <td id="imageCell">
-                <img id="bookImage" src="ajax/image/get?id=<?php echo($data[1]->image_id);?>">
+                <img id="bookImage" src=
+                    <?php 
+                        if (empty($data[1]->image_id)) {
+                            echo(path("assets/image/empty_image.png"));
+                        } else {
+                            echo("ajax/image/get?id=" . $data[1]->image_id);
+                        }
+                    ?>
+                >
             </td> 
         </tr>
         <tr>