diff --git a/app/DataTables/WorklistDataTable.php b/app/DataTables/WorklistDataTable.php
index a8f3a70..5f5f77a 100644
--- a/app/DataTables/WorklistDataTable.php
+++ b/app/DataTables/WorklistDataTable.php
@@ -49,9 +49,9 @@ public function dataTable(QueryBuilder $query): EloquentDataTable
                 return self::dtFormat($study->received_at);
             })
             ->editColumn('show_study', function (Study $study) {
-                $btn = '<a href="#" data-id="'.$study->id.'" data-original-title="Show" class="btn btn-info btn-sm showStudy">Show</a>';
-                $btn .= ' <a href="#" data-id="'.$study->id.'" data-original-title="Edit" class="edit btn btn-primary btn-sm editProduct">Edit</a>';
-                $btn .= ' <a href="#" data-id="'.$study->id.'" data-original-title="Delete" class="btn btn-danger btn-sm deleteProduct">Delete</a>';
+                $btn = '<a href="#" data-id="'._h($study->id).'" class="btn btn-outline-facebook btn-xs showStudy">Show</a>';
+                $btn .= ' <a href="#" data-id="'._h($study->id).'" class="edit btn btn-primary btn-xs editStudy">Edit</a>';
+                $btn .= ' <a href="#" data-id="'._h($study->id).'" class="btn btn-danger btn-xs deleteStudy">Delete</a>';
 
                 return $btn;
             })
diff --git a/app/Http/Controllers/Staff/StudiesController.php b/app/Http/Controllers/Staff/StudiesController.php
index 7ba121e..0fbfc7c 100644
--- a/app/Http/Controllers/Staff/StudiesController.php
+++ b/app/Http/Controllers/Staff/StudiesController.php
@@ -21,9 +21,10 @@ public function details()
         return response()->json($study);
     }
 
-    public function show(Request $request)
+    public function show()
     {
-        $study = Study::with(['details'])->findOrFail($request->id);
+        $this->decodeKeys();
+        $study = Study::with(['details'])->findOrFail($this->key);
 
         return view('staff.studies.show-details', compact('study'));
     }
diff --git a/pint.json b/pint.json
new file mode 100644
index 0000000..e69de29
diff --git a/resources/views/staff/worklist/table.blade.php b/resources/views/staff/worklist/table.blade.php
index 4eabd4e..7bc493b 100644
--- a/resources/views/staff/worklist/table.blade.php
+++ b/resources/views/staff/worklist/table.blade.php
@@ -27,6 +27,9 @@
 @endsection
 
 @section('vendor-script')
+    <script src="https://code.jquery.com/jquery-3.7.1.slim.js"
+            integrity="sha256-UgvvN8vBkgO0luPSUl2s8TIlOSYRoGFAX4jlCIm9Adc=" crossorigin="anonymous"></script>
+
     @vite([
       'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
     ])
@@ -34,51 +37,19 @@
 
 @section('page-script')
     {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
-    <script>
-        /*
-        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
-        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
-        */
-    </script>
 
     <script type="text/javascript">
-
-        document.addEventListener('DOMContentLoaded', function () {
-            document.querySelectorAll('.showStudy').forEach(function (button) {
-                button.addEventListener('click', function () {
-                    console.log('Clicked on study:', this.getAttribute('data-id'));
-                    var studyId = this.getAttribute('data-id');
-                    fetch(`{{ route('staff.studies.show') }}?id=${studyId}`, {
-                        mode: 'cors',
-                        credentials: 'include',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'Accept': 'application/json'
-                        }
-                    })
-                        .then(response => response.text())
-                        .then(data => {
-                            document.getElementById('studyDetails').innerHTML = data;
-                            var studyModal = new bootstrap.Modal(document.getElementById('studyModal'));
-                            studyModal.show();
-                        })
-                        .catch(error => console.error('Error fetching study details:', error));
-                });
-            });
-        });
-
-        /*
         $(document).ready(function () {
             $('body').on('click', '.showStudy', function () {
                 var study_id = $(this).data('id');
-                $.get("{{ route('staff.studies.show') }}", { id: study_id }, function (data) {
+                $.get("{{ route('staff.studies.show') }}", {hashid: study_id}, function (data) {
                     $('#studyDetails').html(data);
                     $('#studyModal').modal('show');
                 });
             });
         });
-        */
     </script>
+
 @endsection
 
 @section('content')
@@ -116,14 +87,16 @@
                         <div class="form-group">
                             <label for="name" class="col-sm-2 control-label">Name</label>
                             <div class="col-sm-12">
-                                <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" value="" maxlength="50" required="">
+                                <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name"
+                                       value="" maxlength="50" required="">
                             </div>
                         </div>
 
                         <div class="form-group">
                             <label class="col-sm-2 control-label">Details</label>
                             <div class="col-sm-12">
-                                <textarea id="detail" name="detail" required="" placeholder="Enter Details" class="form-control"></textarea>
+                                <textarea id="detail" name="detail" required="" placeholder="Enter Details"
+                                          class="form-control"></textarea>
                             </div>
                         </div>