diff --git a/app/view/book_detail.php b/app/view/book_detail.php
new file mode 100644
index 0000000000000000000000000000000000000000..14248aaecb2013f55c26edb86a36fdd20ec3e321
--- /dev/null
+++ b/app/view/book_detail.php
@@ -0,0 +1,5 @@
+<?php
+ include __STATIC__.'/html/header.html';
+ include __STATIC__.'/html/book_detail.html';
+ include __STATIC__.'/html/footer.html';
+?>
\ No newline at end of file
diff --git a/app/view/history.php b/app/view/history.php
index 2b719757ecd20ee79dc06b5b29c242fc5d378650..7f5e28d965332170b1e2d679c582992800e8a738 100644
--- a/app/view/history.php
+++ b/app/view/history.php
@@ -1,6 +1,7 @@
<?php
include __STATIC__.'/html/header.html';
// Include content here;
- echo "Implement plz";
+ include __STATIC__.'/html/history.html';
+ //echo "Implement plz";
include __STATIC__.'/html/footer.html';
?>
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index f5f1ece8ce51857b5939dc1fb59af255f903a647..47f21095c3fe7f18fd1538797aa1e78074847c9d 100644
--- a/public/index.php
+++ b/public/index.php
@@ -39,6 +39,8 @@
$router->add("/history/", "GET", 'render', $authMiddleware, 'history.php');
$router->add("/profile/", "GET", 'render', $authMiddleware, 'profile.php');
$router->add("/logout/", "GET", 'render', $authMiddleware, 'logout.php');
+ $router->add("/book_detail/", "GET", 'render', null, 'book_detail.php');
+ $router->add("/history/", "GET", 'render', null, 'history.php');
// TODO: Add Order Routes
$errorCallback = function(){
diff --git a/public/static/css/book_detail.css b/public/static/css/book_detail.css
new file mode 100644
index 0000000000000000000000000000000000000000..0f8f6d587c82122c940f3785a1e46bf2aa5e33df
--- /dev/null
+++ b/public/static/css/book_detail.css
@@ -0,0 +1,73 @@
+body {
+ font-family: 'Calibri';
+}
+
+#bookdetail {
+ margin: 40px;
+ margin-top: 20px;
+ width:95%;
+}
+
+#book_title{
+ font-size: 70px;
+ color: #FF6029;
+ font-family: 'Arial Rounded MT Bold'
+}
+
+#author {
+ color: #4E4E4E;
+ font-weight: bold
+}
+
+.book_image {
+ margin-top: 20px;
+ float:right;
+ width:160px;
+ height: 160px;
+ margin-right: 30px;
+ border: 1px solid black;
+}
+
+.submit-button {
+ font-size: 1.5em;
+ color: white;
+ border: 1px solid #00AFEA;
+ border-radius: 5px;
+ padding:3px 40px 3px 40px;
+ margin: 0 auto;
+ background-color: #00AFEA;
+ float: right;
+ margin-right: 30px
+}
+
+#subtitle {
+ font-size: 35px;
+ color: #003B4C;
+ font-family: 'Arial Rounded MT Bold'
+}
+
+.imgreviewuser {
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+ float:left;
+}
+
+.username {
+ margin-left: 120px;
+ font-size: 25px;
+ color: #4E4E4E;
+ font-family: 'Arial Rounded MT Bold';
+ font-weight: bold;
+ line-height: 1.6
+}
+
+.reviewdesc {
+ margin-left: 120px;
+ color:#4E4E4E;
+}
+
+#banyakjumlah {
+ border-radius: 3px;
+ border: 1px solid #4E4E4E;
+}
\ No newline at end of file
diff --git a/public/static/css/history.css b/public/static/css/history.css
new file mode 100644
index 0000000000000000000000000000000000000000..3ad3517859fb5a58822f5c718278062096fd6f9e
--- /dev/null
+++ b/public/static/css/history.css
@@ -0,0 +1,50 @@
+body {
+ font-family: 'Calibri';
+}
+
+#history {
+ margin: 40px;
+ margin-top: 20px;
+ width:95%;
+ line-height: 1.6
+}
+
+#title {
+ font-size: 70px;
+ color: #FF6029;
+ font-family: 'Arial Rounded MT Bold'
+}
+
+.imghistory {
+ float: left;
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+}
+
+.booktitle {
+ margin-left: 10px;
+ font-size: 25px;
+ color: #FF6029;
+ font-family: 'Arial Rounded MT Bold';
+ float: left;
+ line-height: 1;
+}
+
+.waktupesan {
+ float: right;
+ font-weight: bold;
+}
+
+#jumlah {
+ float: left;
+ margin-left: 10px;
+ color:#4E4E4E;
+
+}
+
+.banyakjumlah {
+ margin-left: 120px;
+ color:#4E4E4E;
+}
+
diff --git a/public/static/html/book-detail.html b/public/static/html/book-detail.html
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/public/static/html/book_detail.html b/public/static/html/book_detail.html
new file mode 100644
index 0000000000000000000000000000000000000000..ab05705d7344e498baf7ab4e3c1a1ebf8978c926
--- /dev/null
+++ b/public/static/html/book_detail.html
@@ -0,0 +1,47 @@
+<link rel="stylesheet" href="/static/css/base.css">
+<link rel="stylesheet" href="/static/css/book_detail.css">
+
+<div id="bookdetail">
+ <img src="/static/img/notahidup.png" class="book_image">
+ <div id="book_title">Nota Hidup</div>
+ <div id="author">Light R. D. B.</div><br>
+ <div id="bookdescription">
+ Buku ajaib yang berisi nama-nama orang terpilih. Jika namamu tertulis di buku ini maka kamu adalah salah satu orang yang beruntung.
+ </div>
+
+ <h2 id="subtitle">Order</h2>
+ Jumlah:
+ <select id="banyakjumlah">
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ </select>
+
+
+ <div class="submit-order">
+ <button class="submit-button">Order</button>
+ </div><br>
+ <div id="reviews">
+ <h2 id="subtitle">Reviews</h2>
+ <img src="/static/img/tayobluebus.jpg" class="imgreviewuser">
+ <div class="username">@tayotayo</div>
+ <div class="reviewdesc">
+ Buku ini keren! Nama Rogi dan Lani, temanku, ada di sini, keberuntungan hebat menanti mereka! ( ^_^)
+ </div>
+ <br><br><br><br>
+
+ <img src="/static/img/tayogreenbus.jpg" class="imgreviewuser">
+ <div class="username">@ROGreen</div>
+ <div class="reviewdesc">
+ Aku membeli buku ini atas rekomendasi Tayo, aku menemukan namaku sendiri di buku ini. Aku tidak tahu harus senang atau sedih ( '_')
+ </div>
+ </div>
+
+</div>
\ No newline at end of file
diff --git a/public/static/html/history.html b/public/static/html/history.html
new file mode 100644
index 0000000000000000000000000000000000000000..6104c7ca9aa354c1f1af195b25de73db5f087e3c
--- /dev/null
+++ b/public/static/html/history.html
@@ -0,0 +1,19 @@
+<link rel="stylesheet" href="/static/css/base.css">
+<link rel="stylesheet" href="/static/css/history.css">
+
+<div id="history">
+ <div id="title">History</div><br>
+
+ <div id="perbook">
+ <div class="waktupesan">30 September 2018</div><br>
+ <img src="/static/img/notahidup.png" class="imghistory">
+ <div class="booktitle">Nota Hidup</div>
+ <br><div id="jumlah">Jumlah : </div>
+ <div class="banyakjumlah">1</div><br>
+
+
+ </div>
+
+
+
+</div>
\ No newline at end of file
diff --git a/public/static/img/fantasticbeast.jpeg b/public/static/img/fantasticbeast.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..c2195cce4f5c8013d5aa37deb3266214de96c6f6
Binary files /dev/null and b/public/static/img/fantasticbeast.jpeg differ
diff --git a/public/static/img/notahidup.PNG b/public/static/img/notahidup.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..643045bf0fcd39ed97c5bb06025c630197760470
Binary files /dev/null and b/public/static/img/notahidup.PNG differ
diff --git a/public/static/img/tayobluebus.jpg b/public/static/img/tayobluebus.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5decbc20821ce254a57a550cb775f5986320ebfe
Binary files /dev/null and b/public/static/img/tayobluebus.jpg differ
diff --git a/public/static/img/tayogreenbus.jpg b/public/static/img/tayogreenbus.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..17e897cc20c8daa230b8dd9231ae6d49ac1c2d4a
Binary files /dev/null and b/public/static/img/tayogreenbus.jpg differ