diff --git a/app/Views/_layouts/main.php b/app/Views/_layouts/main.php
index c17a38b..0af7345 100644
--- a/app/Views/_layouts/main.php
+++ b/app/Views/_layouts/main.php
@@ -141,7 +141,7 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <script src="https://cdn.datatables.net/v/bs5/dt-2.3.4/r-3.0.7/datatables.min.js" integrity="sha384-O4V7rOTTcSRflQBTMk8URAYWhGGEMgmmLFrqu3e83FQtze3vmndvrH3GcRdrfXRu" crossorigin="anonymous"></script>
-  <script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.min.js"></script>
+  <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>
   <script src="https://unpkg.com/mustache@4.2.0/mustache.min.js"></script>
 
   <?= $this->renderSection('script'); ?>
diff --git a/app/Views/admin/index.php b/app/Views/admin/index.php
index 82c7958..d4da899 100644
--- a/app/Views/admin/index.php
+++ b/app/Views/admin/index.php
@@ -24,6 +24,32 @@
   </div>
 
   <div class="row"> 
+     <form method="GET" action='<?= base_url('/admin') ?>'>
+      <div class="row align-items-center g-3">
+        <div class="col-auto fw-semibold text-muted">
+          Date :
+        </div>
+
+        <div class="col-auto">
+          <input type="date" class="form-control form-control-sm" name="date1"
+            value="<?php echo $date1; ?>" />
+        </div>
+
+        <div class="col-auto">-</div>
+
+        <div class="col-auto">
+          <input type="date" class="form-control form-control-sm" name="date2"
+            value="<?php echo $date2; ?>" />
+        </div>
+
+        <div class="col-auto">
+          <button type="submit" class="btn btn-sm btn-primary">Search</button>
+        </div>
+
+        <div class="col-auto"> <button type="button" class="btn btn-sm btn-outline-dark" onclick="window.location.href='<?=base_url();?>';"> RESET </button> </div>
+        <div class="col-auto"> <button type="button" class="btn btn-sm btn-dark" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFilter" aria-controls="offcanvasFilter"> Adv.Filter </button> </div>
+      </div>
+    </form>
 
     <div class="table table-responsive-scroll">
       <table id="datatables" class="table table-sm table-hover table-bordered align-middle table-striped">
@@ -163,39 +189,9 @@
   $(document).ready(function () {
     $('#datatables').DataTable({
       layout: {
-        topStart: {
-          div: {
-            id: 'myCustomDiv',
-            className: 'custom-div-style',
-            html: `
-  <form method="GET" action='<?= base_url('/admin') ?>'>
-    <div class="row align-items-center g-3">
-      <div class="col-auto fw-semibold text-muted">
-        Date :
-      </div>
-
-      <div class="col-auto">
-        <input type="date" class="form-control form-control-sm" name="date1"
-          value="<?php echo $date1; ?>" />
-      </div>
-
-      <div class="col-auto">-</div>
-
-      <div class="col-auto">
-        <input type="date" class="form-control form-control-sm" name="date2"
-          value="<?php echo $date2; ?>" />
-      </div>
-
-      <div class="col-auto">
-        <button type="submit" class="btn btn-sm btn-primary">Search</button>
-      </div>
-
-      <div class="col-auto"> <button type="button" class="btn btn-sm btn-outline-dark" onclick="window.location.href='<?=base_url();?>';"> RESET </button> </div>
-      <div class="col-auto"> <button type="button" class="btn btn-sm btn-dark" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFilter" aria-controls="offcanvasFilter"> Adv.Filter </button> </div>
-    </div>
-  </form>`
-          }
-        }
+        topStart: 'info',
+        topEnd: 'search',
+        bottomStart: null, bottomEnd: null
       },
       order: [[0, 'asc'], [3, 'asc']],
       paging: false,
@@ -237,18 +233,20 @@
         modalContent.innerHTML =
           "<p class='text-center text-muted'>Loading data...</p>";
         try {
-          // Get API
-          const res = await fetch(`<?=base_url();?>api/specimen/${access}`);
-          const data = await res.json();
-          $.get(`<?=base_url('admin/modal_specimen');?>`, function(tpl) {
-            //console.log(tpl);
-            //console.log(data);
-            const html = Mustache.render(tpl, data);
-            modalContent.innerHTML=html;
+          $.getJSON(`<?=base_url();?>api/specimen/${access}`, function(data) {
+            $.get(`<?=base_url('admin/modal_specimen');?>`, function(tpl) {
+              data.samples = data.samples.map(s => ({
+                ...s,
+                is_coll: s.colstatus == 1,
+                is_recv: s.tubestatus == 4
+              }));
+              console.log(data);
+              const html = Mustache.render(tpl, data);
+              modalContent.innerHTML=html;
+            });
           });
         } catch (err) {
-          modalContent.innerHTML =
-            "<p class='text-danger text-center'>Gagal memuat data.</p>";
+          modalContent.innerHTML = "<p class='text-danger text-center'>Gagal memuat data.</p>";
           console.error(err);
         }
       });
diff --git a/app/Views/admin/modal_specimen.php b/app/Views/admin/modal_specimen.php
index ca457d4..97f4a7b 100644
--- a/app/Views/admin/modal_specimen.php
+++ b/app/Views/admin/modal_specimen.php
@@ -41,9 +41,10 @@
     <table class="table fs-6 text-start">
       <thead>
         <tr>
-          <th class='text-center'>Status</th>
           <th>Sample Code</th>
           <th>Sample Name</th>
+          <th class='text-center'>Collected</th>
+          <th class='text-center'>Received</th>
           <th>Action</th>
         </tr>
       </thead>
@@ -51,17 +52,24 @@
       <tbody>
         {{#samples}}
           <tr>
+            <td>{{sampcode}}</td>
+            <td>{{name}}</td>
             <td class='text-center'>
               <input type="checkbox" class="form-check-input"
-                {{#is_checked}}checked{{/is_checked}}
+                {{#is_coll}}checked{{/is_coll}}
+                disabled
+              >
+            </td>
+            <td class='text-center'>
+              <input type="checkbox" class="form-check-input"
+                {{#is_recv}}checked{{/is_recv}}
                 disabled
               >
             </td>
-            <td>{{sampcode}}</td>
-            <td>{{name}}</td>
             <td>
               <button type="button" class="btn btn-success m-0 px-2 py-1" onclick=""><h6 class="p-0 m-0">Coll.</h6></button>
               <button type="button" class="btn btn-warning m-0 px-2 py-1" onclick=""><h6 class="p-0 m-0">Un-Coll.</h6></button>
+              <button type="button" class="btn btn-warning m-0 px-2 py-1" onclick=""><h6 class="p-0 m-0">Un-Recv.</h6></button>
             </td>
           </tr>
         {{/samples}}