diff --git a/resources/views/staff/worklist/index.blade.php b/resources/views/staff/worklist/index.blade.php
index 627e457..7e67522 100644
--- a/resources/views/staff/worklist/index.blade.php
+++ b/resources/views/staff/worklist/index.blade.php
@@ -99,28 +99,53 @@
 
     <script type="text/javascript">
         $(function () {
-            function generateUrl(status, sf, st) {
+            let _status, _study_from, _study_to, _receive_from, _receive_to, _modality, _read_by = null;
+
+            function generateUrl() {
                 const url = new URL("{{ route('staff.worklist.index') }}");
-                if (status) {
-                    url.searchParams.set('status', status);
-                }
-                if (sf) {
-                    url.searchParams.set('s_f', sf);
-                }
-                if (st) {
-                    url.searchParams.set('s_t', st);
-                }
+                if (_status) url.searchParams.set('status', _status);
+                if (_study_from) url.searchParams.set('study_from', _study_from);
+                if (_study_to) url.searchParams.set('study_to', _study_to);
+                if (_receive_from) url.searchParams.set('receive_from', _receive_from);
+                if (_receive_to) url.searchParams.set('receive_to', _receive_to);
+                if (_modality) url.searchParams.set('modality', _modality);
+                if (_read_by) url.searchParams.set('read_by', _read_by);
                 return url.toString();
             }
 
-            const fp_study = $('#study_date_range').flatpickr({
+            const date_range_config = {
                 mode: 'range',
-                dateFormat: 'Y-m-d'
-            });
+                dateFormat: 'Y-m-d',
+                altInput: true,
+                altFormat: "j M (D)",
+                disable: [
+                    function (givenDate) {
+                        const today = new Date();
+                        const maxDate = new Date(today);
+                        maxDate.setDate(today.getDate() + 1);
+                        return givenDate > maxDate;
+                    }
+                ]
+            };
 
-            let _status = null;
-            let _study_from = null;
-            let _study_to = null;
+            const fp_study = $('#study_date_range').flatpickr(date_range_config);
+            const fp_receive = $('#receive_date_range').flatpickr(date_range_config);
+
+            $('#search_button').on('click', function () {
+                const study_range = fp_study.selectedDates;
+                if (study_range.length == 2) {
+                    _study_from = formatDate(study_range[0]);
+                    _study_to = formatDate(study_range[1]);
+                }
+
+                const receive_range = fp_receive.selectedDates;
+                if (receive_range.length == 2) {
+                    _receive_from = formatDate(receive_range[0]);
+                    _receive_to = formatDate(receive_range[1]);
+                }
+
+                filterTable();
+            });
 
             const tableId = '#worklist-table';
             const table = $(tableId).DataTable({
@@ -133,15 +158,15 @@ function getActiveTabStatus() {
 
             function filterTableStatus(status) {
                 _status = status;
-                table.ajax.url(generateUrl(_status, null, null)).load();
+                table.ajax.url(generateUrl()).load();
             }
 
             function filterTableStudyDate(from, to) {
-                table.ajax.url(generateUrl(_status, from, to)).load();
+                table.ajax.url(generateUrl()).load();
             }
 
             function filterTable() {
-                table.ajax.url(generateUrl(_status, _study_from, _study_to)).load();
+                table.ajax.url(generateUrl()).load();
             }
 
             function formatDate(date) {
@@ -155,15 +180,6 @@ function formatDate(date) {
                 filterTable();
             });
 
-            $('#study_date_search').on('click', function () {
-                const dateRange = fp_study.selectedDates;
-                console.log(dateRange[0].toDateString());
-                if (dateRange.length == 2) {
-                    _study_from = formatDate(dateRange[0]);
-                    _study_to = formatDate(dateRange[1]);
-                    filterTable();
-                }
-            });
         });
     </script>
 
diff --git a/resources/views/staff/worklist/partials/_check-inline.blade.php b/resources/views/staff/worklist/partials/_check-inline.blade.php
new file mode 100644
index 0000000..aee303c
--- /dev/null
+++ b/resources/views/staff/worklist/partials/_check-inline.blade.php
@@ -0,0 +1,9 @@
+@php
+    if (!isset($id)) {
+        $id = 'chk_' . $value . '_' . random_int(100, 999);
+    }
+@endphp
+<div class="form-check form-check-inline">
+    <input class="form-check-input" type="{{ $type ?? 'checkbox' }}" id="{{ $id }}" value="{{ $value }}">
+    <label class="form-check-label" for="{{ $id }}">{{ $label ?? $value }}</label>
+</div>
diff --git a/resources/views/staff/worklist/partials/_date-range.blade.php b/resources/views/staff/worklist/partials/_date-range.blade.php
new file mode 100644
index 0000000..b316303
--- /dev/null
+++ b/resources/views/staff/worklist/partials/_date-range.blade.php
@@ -0,0 +1,6 @@
+<div class="col-md-3 col-3 mb-4 me-4">
+    <div class="form-floating form-floating-outline">
+        <input type="text" class="form-control" id="{{ $id }}" placeholder="YYYY-MM-DD to YYYY-MM-DD"/>
+        <label for="{{ $id }}">{{ $label }}</label>
+    </div>
+</div>
diff --git a/resources/views/staff/worklist/partials/_filter-panel.blade.php b/resources/views/staff/worklist/partials/_filter-panel.blade.php
index 53903f7..66ed2e5 100644
--- a/resources/views/staff/worklist/partials/_filter-panel.blade.php
+++ b/resources/views/staff/worklist/partials/_filter-panel.blade.php
@@ -1,28 +1,57 @@
-<div class="row">
+<div class="container-xxl flex-grow-1 container-p-y">
 
-    <!-- Flat Picker -->
-    <div class="col-12 mb-6">
-        <div class="card">
-            <h5 class="card-header">Filter</h5>
+    <div class="card card-action mb-6">
+        <div class="card-header">
+            <h5 class="card-action-title mb-0">Filter Studies</h5>
+            <div class="card-action-element">
+                <ul class="list-inline mb-0">
+                    <li class="list-inline-item">
+                        <a href="javascript:void(0);" class="card-collapsible">
+                            <i class="tf-icons ri-arrow-up-s-line"></i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="collapse show">
             <div class="card-body">
-                <div class="row">
+                <div class="row g-2">
+                    @include('staff.worklist.partials._date-range', ['id' => 'study_date_range', 'label' => 'Study Date'])
+                    @include('staff.worklist.partials._date-range', ['id' => 'receive_date_range', 'label' => 'Receive Date'])
+                </div>
 
-                    <div class="col-md-6 col-6 mb-6">
-                        <div class="form-floating form-floating-outline">
-                            <input type="text" class="form-control" id="study_date_range"
-                                   placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range"/>
-                            <label for="flatpickr-range">Study Date</label>
+                <div class="row g-2">
+                    <div class="col-md p-2">
+                        <small class="text-light fw-medium d-block">Study Modalities</small>
+                        <div class="mt-4">
+                            @include('staff.worklist.partials._check-inline', ['value' => 'CT'])
+                            @include('staff.worklist.partials._check-inline', ['value' => 'MR'])
+                            @include('staff.worklist.partials._check-inline', ['value' => 'CR'])
+                            @include('staff.worklist.partials._check-inline', ['value' => 'DX'])
+                            @include('staff.worklist.partials._check-inline', ['value' => 'US'])
+                            @include('staff.worklist.partials._check-inline', ['value' => 'MG'])
                         </div>
                     </div>
+                </div>
 
-                    <div class="col-4">
-                        <button id="study_date_search" class="btn btn-outline-primary">
-                            <i class="fa-regular fa-calendar me-2" ></i>Search
+                <div class="row row-bordered g-2">
+                    <div class="col-sm">
+                        <button id="search_button" class="btn btn-primary me-4">
+                            <i class="fa-regular fa-magnifying-glass me-2"></i>Search
+                        </button>
+                        <button class="btn btn-outline-danger"
+                                onclick="window.location.href='{{ route('staff.worklist.index') }}'">
+                            <i class="fa-regular fa-broom-wide me-2"></i>Clear
                         </button>
                     </div>
                 </div>
+
             </div>
+
         </div>
+
     </div>
 
 </div>
+