diff --git a/resources/views/form/rapport-team3/list-1718178830-d871301e-312b-4a60-nebmitra-15afa4ce6163.blade.php b/resources/views/form/rapport-team3/list-1718178830-d871301e-312b-4a60-nebmitra-15afa4ce6163.blade.php
index 906b1fd1..02b8a31c 100644
--- a/resources/views/form/rapport-team3/list-1718178830-d871301e-312b-4a60-nebmitra-15afa4ce6163.blade.php
+++ b/resources/views/form/rapport-team3/list-1718178830-d871301e-312b-4a60-nebmitra-15afa4ce6163.blade.php
@@ -72,6 +72,14 @@
                                 <input type="hidden" name="form_id" id="form_id" value="{{ $form_id }}">
                             </form>
 
+                            <div class="status-filter-capsules mb-3" id="status-filter-capsules" role="group" aria-label="Filter by status">
+                                <button type="button" class="status-capsule active" data-status="">All</button>
+                                <button type="button" class="status-capsule status-order-taken" data-status="Order taken">Order Taken</button>
+                                <button type="button" class="status-capsule status-invoice" data-status="Invoice Uploded">Invoice Uploaded</button>
+                                <button type="button" class="status-capsule status-approved" data-status="Approved">Approved</button>
+                                <button type="button" class="status-capsule status-rejected" data-status="Rejected">Rejected</button>
+                            </div>
+
                             <input type="hidden" name="workflow_type" id="workflow_type"
                                 value="{{ $form->workflow_type ?? '' }}">
 
@@ -252,6 +260,58 @@
         font-size: 11px;
     } */
         }
+
+        .status-filter-capsules {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            align-items: center;
+        }
+
+        .status-capsule {
+            border: 1px solid #dee2e6;
+            background: #f8f9fa;
+            color: #495057;
+            border-radius: 999px;
+            padding: 6px 14px;
+            font-size: 12px;
+            font-weight: 600;
+            line-height: 1.2;
+            cursor: pointer;
+            transition: all 0.15s ease-in-out;
+        }
+
+        .status-capsule:hover {
+            border-color: #adb5bd;
+            background: #eef1f4;
+        }
+
+        .status-capsule.active {
+            color: #fff;
+            border-color: transparent;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+        }
+
+        .status-capsule.active[data-status=""] {
+            background: #6c757d;
+        }
+
+        .status-capsule.active.status-order-taken {
+            background: #fd7e14;
+        }
+
+        .status-capsule.active.status-invoice {
+            background: #0dcaf0;
+            color: #053b4a;
+        }
+
+        .status-capsule.active.status-approved {
+            background: #198754;
+        }
+
+        .status-capsule.active.status-rejected {
+            background: #dc3545;
+        }
     </style>
 
     <!-- end page -->
@@ -723,41 +783,56 @@
 
             // Store current filter params globally
             let currentFilterParams = {};
+            let activeStatusFilter = '';
+
+            function buildFilterParams() {
+                return {
+                    form_id: $('#form_id').val(),
+                    startdate: $('#startdate').val() || '',
+                    enddate: $('#enddate').val() || '',
+                    submission_status: activeStatusFilter || ''
+                };
+            }
+
+            function applyStatusFilter(status) {
+                activeStatusFilter = status || '';
+                $('#status-filter-capsules .status-capsule').removeClass('active');
+                const selector = status
+                    ? `#status-filter-capsules .status-capsule[data-status="${status.replace(/"/g, '\\"')}"]`
+                    : '#status-filter-capsules .status-capsule[data-status=""]';
+                $(selector).addClass('active');
+
+                currentFilterParams = buildFilterParams();
+                lastkey = 1;
+                loadRows(lastkey, false, currentFilterParams);
+            }
+
+            $('#status-filter-capsules').on('click', '.status-capsule', function() {
+                const status = $(this).data('status') || '';
+                // Toggle off if same capsule is clicked again (except All)
+                if (status && status === activeStatusFilter) {
+                    applyStatusFilter('');
+                    return;
+                }
+                applyStatusFilter(status);
+            });
 
             $('#apply-date-range').on('click', function() {
-                var startdate = $('#startdate').val();
-                var enddate = $('#enddate').val();
-                var form_id = $('#form_id').val();
-
-                // Save current filter params for load more
-                currentFilterParams = {
-                    form_id: form_id,
-                    startdate: startdate,
-                    enddate: enddate
-                };
-
-                // Clear table and load with new filter
+                currentFilterParams = buildFilterParams();
                 lastkey = 1;
                 loadRows(lastkey, false, currentFilterParams);
             });
 
             // On page load, load first 50 rows
             $(function() {
-                // Set initial filter params (if any)
-                var form_id = $('#form_id').val();
-                var startdate = $('#startdate').val();
-                var enddate = $('#enddate').val();
-                currentFilterParams = {
-                    form_id: form_id,
-                    startdate: startdate,
-                    enddate: enddate
-                };
+                currentFilterParams = buildFilterParams();
                 loadRows(1, true, currentFilterParams);
             });
 
             // Load more button click
             $('#load-btn').off('click').on('click', function() {
                 if (lastkey) {
+                    currentFilterParams = buildFilterParams();
                     loadRows(lastkey, true, currentFilterParams);
                 }
             });