diff --git a/assets/css/detail.css b/assets/css/detail.css
index 61b580f7510ff56cf8aed53126ced07710c6ce70..f65828b8b7062f238a9618a0a6a23f8ec28843da 100644
--- a/assets/css/detail.css
+++ b/assets/css/detail.css
@@ -1,3 +1,34 @@
+body{
+    font-family: 'Tw Cen MT';    
+}
+
+.detail-left > h1{
+    margin : 0;
+    color:  rgba(255, 81, 0, 0.74);
+    font-size : 60px;
+}
+
+.detail-left > h4{
+    margin : 0;
+    font-size : 24px;
+}
+
+h2{
+    font-size : 48px;
+}
+
+#order{
+    margin-top : 25px;
+    padding : 5px 25px;
+    border: none;
+    border-radius : 3px;
+    background-color : rgb(38, 144, 231);
+    color : white;
+    float : right;
+    display: block;
+    cursor : pointer;
+}
+
 .container{
     display : grid;
     grid-template-columns : [col-1] 5% [col-2] 90% [col-3] 5% [col-4];
@@ -9,7 +40,6 @@
     grid-column : col-2 / col-3;
     grid-row : row-1 / row-2;
     grid-template-columns : [col-1] 80% [col-2] 20% [col-3];
-    background-color:blue;
     padding-top : 50px;
 }
 
@@ -24,21 +54,22 @@
 .order{
     grid-column : col-2 / col-3;
     grid-row : row-2 / row-3;
-    background-color:red;
 }
 
-#order{
-    float : right;
+img{
+    min-width: 50px;
 }
 
 .review{
     grid-column : col-2 / col-3;
     grid-row : row-3 / row-4;
-    display : grid;
 }
 
 .review-item{
+    display : grid;    
     grid-template-columns : [col-1] 10% [col-2] 80% [col-3] 10% [col-4];
+    grid-gap : 15px;
+    margin-bottom : 20px;
 }
 
 .review-left{
@@ -47,10 +78,25 @@
 
 .review-middle{
     grid-column : col-2 / col-3;
+    word-wrap: break-word;
+}
+
+.review-username{
+    font-size : 20px;
+    font-weight : bold;
+}
+
+.review-message{
+    margin-top : -15px;
 }
 
 .review-right{
     grid-column : col-3 / col-4;
+    text-align : center;
+}
+
+.profile{
+    border : 1px solid black;
 }
 
 /* The Modal (background) */
@@ -59,13 +105,15 @@
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
     padding-top: 100px; /* Location of the box */
-    left: 0;
-    top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    top: 80%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
 }
 
 /* Modal Content */
diff --git a/assets/css/search.css b/assets/css/search.css
index f814030fa308b55d3eb975530686a8b615eac5de..61f1d31096b3d63b0f391b3f250952fd7c185061 100644
--- a/assets/css/search.css
+++ b/assets/css/search.css
@@ -1,3 +1,7 @@
+body{
+    font-family: 'Tw Cen MT';    
+}
+
 .container{
     display : grid;
     grid-template-columns : [col-1] 5% [col-2] 90% [col-3] 5% [col-4];
@@ -13,6 +17,7 @@
     display : grid;
     grid-template-columns : [col-11] 60% [col-21] 40% [col-31];
     grid-template-rows : [row-11] 35px [row-21] 20px [row-31];
+    padding-top : 25px;
 }
 
 #searchbook{
@@ -20,13 +25,25 @@
     grid-row : row-11 / row-21;
 }
 
+#searchbook > h1{
+    margin : 0;
+    color:  rgba(255, 81, 0, 0.74);
+    font-size : 60px;
+}
+
 #resultcount{
     grid-column : col-21 / col-31;
     grid-row : row-21 / row-31;
     text-align : right;
 }
 
+#resultcount > h5{
+    font-size:20px;
+    margin-top:0px;
+}
+
 #form{
+    margin-top : 50px;
     grid-row : row-2 / row-3;
 }
 
@@ -41,10 +58,11 @@
     padding : 5px 25px;
     border: none;
     border-radius : 3px;
-    background-color : blue;
+    background-color : rgb(38, 144, 231);
     color : white;
     float : right;
     display: block;
+    cursor : pointer;
 }
 
 #result{
@@ -65,23 +83,30 @@
     grid-row : row-1 / row-4;
 }
 
+img.book-image{
+    border : 1px solid black;
+}
+
 .book-title{
     grid-column : col-2 / col-3;
     grid-row : row-1 / row-2;
     font-size : 20px;
     font-weight : bold;
+    color:  rgba(255, 81, 0, 0.74);    
 }
 
 .book-author{
     grid-column : col-2 / col-2;
     grid-row : row-2 / row-3;
+    font-size : 16px;
     font-weight : bold;
-    font-size : 20px;
 }
 
 .book-desc{
     grid-column : col-2 / col-3;
     grid-row : row-3 / row-4;
+    margin-top : -15px;
+    word-wrap : break-word;
 }
 
 .book-detail{
@@ -97,8 +122,9 @@
     color : #ffffff;
     float : right;
     display : inline-block;
-    background-color : blue;
+    background-color : rgb(38, 144, 231);
     padding : 4px 20px;
     border : none;
     cursor : pointer;
+    border-radius : 3px;    
 }
\ No newline at end of file
diff --git a/assets/js/search.js b/assets/js/search.js
index 5e640a582807c249efeff0705435dbdac45dea66..d9afbe02e05c81a8154570bab4960cd6a5400364 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -1,118 +1,14 @@
-var page = 1;
 var warned = false;
 
-function showSearchResult() {
-    var title = document.getElementById("title").value;
-    if (title == ''){
-        if (!warned){
+function validate(){
+    let input = document.getElementById("title");
+    let title = document.forms["search"]["title"].value;
+    if(title == null || title == ""){
+        if(!warned){
+            input.style.border = "3px solid red";
+            input.style.transition = "border 5s";
             warned = true;
-            let msg = document.createElement("h6");
-            msg.innerHTML = "Please input some query";
-            msg.style.color = "red";
-            let form = document.getElementById("form");
-            let search = document.getElementById("search");
-            form.insertBefore(msg, search);
-            search.style.marginTop = "-46px";
         }
-        return;
+        return false;
     }
-    // get search result by ajax
-    ajax('ajax/book/search', {
-        data: {
-            "title":title,
-            "page":page
-        },
-        success: createItem
-    });
-    
-    let childform = document.getElementById("form");
-    let parent = document.getElementById("searchSection");
-    parent.removeChild(childform);
-    document.getElementById("searchbook").innerHTML = '<h1>Search Result</h1>';
-}
-
-function createItem(data){
-    data = data['data'];
-    resultcount = data['count'];
-    data = data['results'];
-    console.log(resultcount);
-    var i;
-    let result = document.getElementById("result");
-
-    // clear result div
-    result.innerHTML = '';
-    
-    // loop for all query results
-    for(i = 0; i < data.length; i++){
-        currentData = data[i];
-
-        //create divs
-        let item = document.createElement("div");
-        let book_image = document.createElement("div");
-        let book_title = document.createElement("div");
-        let book_author = document.createElement("div");
-        let book_desc = document.createElement("div");
-        let book_desc_p = document.createElement("p");
-        let book_detail = document.createElement("div");
-
-        book_desc.appendChild(book_desc_p);
-        book_desc_p.style.marginTop = "-3px";
-        item.appendChild(book_image);
-        item.appendChild(book_title);
-        item.appendChild(book_author);
-        item.appendChild(book_desc);
-        item.appendChild(book_detail);
-        item.style.margin="10px";
-        
-        // set grids
-        item.style.display = "grid";
-        item.style.gridTemplateColumns = "[col-1] 10% [col-2] 90% [col-3]";
-        item.style.gridTemplateRows = "[row-1] 20px [row-2] 20px [row-3] auto [row-4] 20px [row-5]";
-        item.style.gridGap = "5px";
-        var j;
-        
-        book_image.style.gridColumn = "col-1 / col-2";
-        book_image.style.gridRow = "row-1 / row-4";
-        book_title.style.gridColumn = "col-2 / col-3";
-        book_title.style.gridRow = "row-1 / row-2";
-        book_author.style.gridColumn = "col-2 / col-3";
-        book_author.style.gridRow = "row-2 / row-3";
-        book_desc.style.gridColumn = "col-2 / col-3";
-        book_desc.style.gridRow = "row-3 / row-4";
-        book_detail.style.gridColumn = "col-2 / col-3";
-        book_detail.style.gridRow = "row-4 / row-5";
-        
-        item.setAttribute("id", "item" + i);
-
-        let image = document.createElement("img");
-        image.setAttribute('alt', currentData['image_id']);
-        // image.setAttribute('src', currentData['image_id']);
-        image.setAttribute("src", "https://yt3.ggpht.com/a-/AN66SAxswIm7qqop7B9TsISzh2KM-gMvwijHOYFlzw=s900-mo-c-c0xffffffff-rj-k-no");
-        image.setAttribute("height", "100%");
-        image.setAttribute("width", "100%");
-        image.style.border = "1px solid black";
-        let anchor = document.createElement("a");
-        let button = document.createElement("button");
-        anchor.setAttribute("href", "detail/" + currentData['book_id']);
-        button.style.color = "#fff";
-        button.style.float = "right";
-        button.style.display = "inline-block";
-        button.style.backgroundColor = "blue";
-        button.style.padding = "4px 20px";
-        button.style.border = "none";
-        anchor.appendChild(button);
-        button.innerHTML = "Detail";
-        let author = currentData['author'] + ' - ' + currentData['avgrating'] + '/5.0' + ' (' + currentData['votes'] + ' votes)';
-        book_image.appendChild(image);
-        book_title.innerHTML = currentData['title'];
-        book_title.style.fontSize = "20px";
-        book_title.style.fontWeight = "bold";
-        book_author.innerHTML = author;
-        book_author.style.fontWeight = "bold";
-        book_desc_p.innerHTML = currentData['description'];
-        book_detail.appendChild(anchor);
-        
-        result.appendChild(item);
-    }
-    document.getElementById("resultcount").innerHTML += '<h5">Found <u>' + resultcount + '</u> result(s)</h5>';
 }
\ No newline at end of file
diff --git a/controller/DetailController.php b/controller/DetailController.php
index 07faa83b54ea50be0852d957d5343359feacf020..25e4df259c5a4d8a540756c299df6493d185110c 100644
--- a/controller/DetailController.php
+++ b/controller/DetailController.php
@@ -20,11 +20,16 @@ class DetailController extends BaseController{
             if (isset($book)) {
                 $review_model = new Model\ReviewModel();
                 $reviews = $review_model->where()->book_id->eq($id)->finish;
-
+  
+                // get biodata model
+                $bio_model = new Model\BiodataModel();
                 
                 // get user profile pictures in review.
                 foreach($reviews as $review){
-
+                    $bio = $bio_model->findByID($review->username);
+                    if(!empty($bio)){
+                        $review->image_id = $bio->pic_id;
+                    }
                 }
 
                 $results = array(