diff --git a/assets/css/detail.css b/assets/css/detail.css
index 9904bcfd53de5a3e0530d2348d4c8a4c1c2a27b9..187d01bb19576ee5bdab41bb610766250baa9c87 100644
--- a/assets/css/detail.css
+++ b/assets/css/detail.css
@@ -107,7 +107,7 @@ h2{
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
-    padding-top: 20%; /* Location of the box */
+    padding-top: 35%; /* Location of the box */
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
@@ -121,17 +121,27 @@ h2{
     background-color: #fefefe;
     /* margin-top: 200px; */
     margin: 0 auto auto auto; 
-    padding: 20px;
+    padding: 30px 20px;
     border: 1px solid #888;
     width: 30%;
 }
 
+.modal-content > b{
+    margin-left:40px;
+}
+
+#order-id{
+    margin-left:40px;
+}
+
 /* The Close Button */
 .close {
-    color: #aaaaaa;
+    color: #999999;
     float: right;
-    font-size: 28px;
+    font-size: 18px;
     font-weight: bold;
+    margin-top : -23px;
+    margin-right : -10px;
 }
 
 .close:hover,
diff --git a/assets/image/checkmark.png b/assets/image/checkmark.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7a8a405767d9f1f04b2ab27fa7c5447ea18ebe4
Binary files /dev/null and b/assets/image/checkmark.png differ
diff --git a/assets/js/detail.js b/assets/js/detail.js
index f993507999f49a9e35d5aa392f83ac2fbd335dd8..6e00deedb7465ea86d43f71d0a40618a60947988 100644
--- a/assets/js/detail.js
+++ b/assets/js/detail.js
@@ -23,12 +23,28 @@ function order(){
     });
 }
 
+var checked = false;
+
 function showModal(data){
 
     let orderid = document.getElementById("order-id");
     orderid.innerHTML = 'Nomor Transaksi : ' + data['data'];
-    console.log(data['data']);
-
+    orderid.style.display = "inline";
+    if(!checked){
+        let modalcontent = document.getElementsByClassName("modal-content")[0];
+        let close = document.getElementsByClassName("close")[0];
+        let img = document.createElement("img");
+        img.setAttribute("src", "/book/assets/image/checkmark.png");
+        img.setAttribute("width", "35px");
+        img.setAttribute("height", "30px");
+        img.style.display = "inline-block";
+        img.style.position = "absolute";
+        img.style.marginTop = 0;
+        img.style.marginRight = "10px";
+        modalcontent.insertBefore(img, close);
+        checked = true;
+    }
+    
     // Get the modal
     var modal = document.getElementById('modal');
     modal.style.display = "block";
diff --git a/mocks/login.png b/mocks/login.png
index 70f8a4633a0e99554eca07b9591255b861fdef0f..a59224cdc7f90639db5da5d324a29ec65482d2fc 100644
Binary files a/mocks/login.png and b/mocks/login.png differ
diff --git a/mocks/notification.png b/mocks/notification.png
index b14e859a5e33348f4102aaf466139bc317ce48d6..44cc946b3fc926482c099a88ffe9ebb877a83544 100644
Binary files a/mocks/notification.png and b/mocks/notification.png differ