diff --git a/app/controller/book/routes.php b/app/controller/book/routes.php
index 1e01ecd1ab13d9c1e22bcc0b0749a810909dbf27..78e079e0b2a22d4c1e6226debf93e8177b2e6fee 100644
--- a/app/controller/book/routes.php
+++ b/app/controller/book/routes.php
@@ -1,8 +1,8 @@
 <?php
 
     function addBookRoutes($router, $bookUsecase){
-        $router->add("/book/", "GET", array($bookUsecase, 'searchBook'));
-        $router->add("/book/:book_id/", "GET", array($bookUsecase, 'getBookDetail'));
+        $router->add("/api/book/", "GET", array($bookUsecase, 'searchBook'));
+        $router->add("/api/book/:book_id/", "GET", array($bookUsecase, 'getBookDetail'));
         // $router->add("/", "GET", $homepage, $middlewareExample);
         // $router->add("/book/:book_id/user/:user_id/", "POST", $postCallbackExample, $middlewareExample);
         // $router->add("/book/:book_id/", "POST", $postCallbackExample, $middlewareExample);
diff --git a/app/view/homepage.php b/app/view/homepage.php
index 526715e066be5471af3159f891306b6cfdde53b3..6eb1b261df2376755d8602a430f0bf56dca18019 100644
--- a/app/view/homepage.php
+++ b/app/view/homepage.php
@@ -1,6 +1,7 @@
 <?php
     $homepage = function() {
         include __VIEW__.'/static/html/header.html';
+        include __VIEW__.'/static/html/browse.html';
         if ($_COOKIE["user"]){
             echo $_COOKIE["user"];
             setcookie("user","", time()-3600);
@@ -8,6 +9,5 @@
             echo "gada cookie";
             setcookie("user",1);
         }
-
     }
 ?>
\ No newline at end of file
diff --git a/app/view/static/css/base.css b/app/view/static/css/base.css
index 6183a812252815f740d7497212cc1337eb371bb6..e07a88d8c37e35ba1f21cc320ad9f9a73d1c8ca2 100644
--- a/app/view/static/css/base.css
+++ b/app/view/static/css/base.css
@@ -3,4 +3,34 @@ body {
     height: 100%;
     margin:0 auto;
     padding:0px;
+}
+
+.title {
+    font-size: 80px;
+    color: #f26600;
+
+    margin-bottom: 30px;
+}
+
+.content {
+    margin-left: 20px;
+    margin-top: 40px;
+    margin-right: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.justify-content-end {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.justify-content-between {
+    display: flex;
+    justify-content: space-between;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
 }
\ No newline at end of file
diff --git a/app/view/static/css/browse.css b/app/view/static/css/browse.css
new file mode 100644
index 0000000000000000000000000000000000000000..fd087ab86b2318ef476bcf575f043b30f687eaf8
--- /dev/null
+++ b/app/view/static/css/browse.css
@@ -0,0 +1,24 @@
+.search-book input {
+    display: block;
+    height: 38px;
+    width: 100%;
+    border: 2px solid;
+    border-color: #898989;
+    border-radius: 5px;
+
+    margin-bottom: 20px;
+    padding-left: 10px;
+}
+
+.search-book button {
+    width: 120px;
+    height: 35px;
+    background-color: #00aeef;
+    border-color: #00aeef;
+    border-radius: 5px;
+}
+
+.search-book button span {
+    color: white;
+    font-size: 18px;
+}
\ No newline at end of file
diff --git a/app/view/static/css/search_result.css b/app/view/static/css/search_result.css
new file mode 100644
index 0000000000000000000000000000000000000000..ff48b1ce9f563ea35984ab029df73b0e10ddeac0
--- /dev/null
+++ b/app/view/static/css/search_result.css
@@ -0,0 +1,37 @@
+.search-result-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.search-result-title h1, .search-result-title h2{
+    align-self: flex-end;
+}
+
+.search-result-title h2 {
+    margin-bottom: 45px;
+    font-size: 30px;
+    color: #4c4c4c; 
+}
+
+.result-img {
+    width: 25%;
+}
+
+.result-content {
+    width: 75%;
+}
+
+.result-title {
+    color: #f26600;
+
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+.result-author {
+    color: #4d4d4d;
+
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
\ No newline at end of file
diff --git a/app/view/static/html/browse.html b/app/view/static/html/browse.html
new file mode 100644
index 0000000000000000000000000000000000000000..644c63866b2c6b2e19b9321e3c65a404fecf2c8e
--- /dev/null
+++ b/app/view/static/html/browse.html
@@ -0,0 +1,16 @@
+<link rel="stylesheet" href="../css/browse.css">
+<link rel="stylesheet" href="../css/base.css">
+<div class="content search-book">
+    <h1 class="title">Search Book</h1> 
+    <form>
+        <input 
+            type="text"
+            name='search-book'
+            id='search-book'
+            placeholder="Input search terms..."
+        />
+        <div class="justify-content-end">
+            <button type='submit' id='search-book-button'><span>Search</span></button>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/app/view/static/html/search_result.html b/app/view/static/html/search_result.html
new file mode 100644
index 0000000000000000000000000000000000000000..127bf04a53ecd24458571bc144b343839b656c5c
--- /dev/null
+++ b/app/view/static/html/search_result.html
@@ -0,0 +1,20 @@
+<link rel="stylesheet" href="../css/base.css">
+<link rel="stylesheet" href="../css/search_result.css">
+<div class="content search-result">
+    <div class="search-result-title">
+        <h1 class="title">Search Result</h1>
+        <h2>Found 2 result(s)</h2>
+    </div>
+    <div class="result row">
+        <div class="result-img">
+
+        </div>
+        <div class="result-content">
+            <h1 class="result-title">Nota Hidup</h1>
+            <h2 class="result-author">Light R.D.B. - 4.3/5.0 (1 votes)</h2>
+            <p class="result-description">
+                Buku ajaib yang berisi nama-nama orang terpilih. Jika namamu tertulis di buku ini maka kamu adalah salah satu orang yang beruntung.
+            </p>
+        </div>
+    </div>
+</div>
\ No newline at end of file