Index: backend/src/main/java/medora/controller/BillingController.java
===================================================================
--- backend/src/main/java/medora/controller/BillingController.java	(revision 6c00695efaeff79d43ec7934ae4e04fac7bd67a0)
+++ backend/src/main/java/medora/controller/BillingController.java	(revision b63d7b5e4b1c98d1e978322be8e809ceee661337)
@@ -253,8 +253,8 @@
             }
 
-            // Only ADMIN can update payment status
-            if (!role.equals("ADMIN")) {
-                return ResponseEntity.status(HttpStatus.FORBIDDEN)
-                        .body(Map.of("error", "Only administrators can update payment status"));
+            // ADMIN and BILLING_ADMIN can update payment status
+            if (!role.equals("ADMIN") && !role.equals("BILLING_ADMIN")) {
+                return ResponseEntity.status(HttpStatus.FORBIDDEN)
+                        .body(Map.of("error", "Only administrators and billing admins can update payment status"));
             }
 
Index: frontend/src/pages/billing/BillingList.js
===================================================================
--- frontend/src/pages/billing/BillingList.js	(revision 6c00695efaeff79d43ec7934ae4e04fac7bd67a0)
+++ frontend/src/pages/billing/BillingList.js	(revision b63d7b5e4b1c98d1e978322be8e809ceee661337)
@@ -2,6 +2,8 @@
 import { Link, useSearchParams } from 'react-router-dom';
 import { billingService } from '../../services/billingService';
+import { patientService } from '../../services/patientService';
 import Loading from '../../components/Loading';
 import ErrorAlert from '../../components/ErrorAlert';
+import SuccessAlert from '../../components/SuccessAlert';
 
 function BillingList() {
@@ -9,31 +11,89 @@
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(null);
   const [searchParams] = useSearchParams();
   const patientId = searchParams.get('patientId');
   const user = JSON.parse(localStorage.getItem('user') || '{}');
 
-  const fetchBillings = async () => {
+  // Filters
+  const [statusFilter, setStatusFilter] = useState('');
+  const [patientFilter, setPatientFilter] = useState('');
+  const [patients, setPatients] = useState([]);
+
+  useEffect(() => {
+    const fetchBillings = async () => {
+      try {
+        setLoading(true);
+        let response;
+        if (patientId) {
+          response = await billingService.getBillingHistoryForPatient(patientId);
+        } else if (user.role === 'PATIENT') {
+          response = await billingService.getBillingHistoryForPatient(user.patientId);
+        } else {
+          response = await billingService.getAllBillings();
+        }
+        setBillings(response.data || []);
+      } catch (err) {
+        setError('Failed to fetch billing records');
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchBillings();
+  }, [patientId, user.role, user.patientId]);
+
+  // Load patients for filter dropdown (for billing admin)
+  useEffect(() => {
+    if (user.role === 'BILLING_ADMIN') {
+      const loadPatients = async () => {
+        try {
+          const response = await patientService.getAllPatients();
+          setPatients(response.data || []);
+        } catch (err) {
+          console.error('Failed to load patients:', err);
+        }
+      };
+      loadPatients();
+    }
+  }, [user.role]);
+
+  // Filter billings based on selected filters
+  const filteredBillings = billings.filter(billing => {
+    if (statusFilter && billing.paymentStatus !== statusFilter) {
+      return false;
+    }
+    if (patientFilter && billing.patientName !== patientFilter) {
+      return false;
+    }
+    return true;
+  });
+
+  const pendingBillings = billings.filter(b => b.paymentStatus === 'PENDING');
+
+  const handleUpdateStatus = async (billId, newStatus) => {
     try {
-      setLoading(true);
-      let response;
-      if (patientId) {
-        response = await billingService.getBillingHistoryForPatient(patientId);
-      } else if (user.role === 'PATIENT') {
-        response = await billingService.getBillingHistoryForPatient(user.patientId);
-      } else {
-        response = await billingService.getAllBillings();
+      const updateData = {
+        paymentStatus: newStatus
+      };
+      if (newStatus === 'PAID') {
+        updateData.paymentDate = new Date().toISOString().split('T')[0];
       }
-      setBillings(response.data);
+
+      console.log('Updating billing status:', { billId, updateData });
+      await billingService.updatePaymentStatus(billId, updateData);
+      setSuccess(`Billing status updated to ${newStatus}`);
+
+      // Refresh the list
+      const response = user.role === 'BILLING_ADMIN'
+          ? await billingService.getAllBillings()
+          : await billingService.getBillingHistoryForPatient(patientId || user.patientId);
+      setBillings(response.data || []);
     } catch (err) {
-      setError('Failed to fetch billing records');
-      console.error(err);
-    } finally {
-      setLoading(false);
+      setError(`Failed to update billing status: ${err.response?.data?.error || err.message}`);
+      console.error('Update status error:', err);
     }
   };
-
-  useEffect(() => {
-    fetchBillings();
-  }, [patientId]);
 
   // Prevent unauthorized access to billing
@@ -54,4 +114,65 @@
 
         {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+        {success && <SuccessAlert message={success} onClose={() => setSuccess(null)} />}
+
+        {/* Filters for Billing Admin */}
+        {user.role === 'BILLING_ADMIN' && (
+            <div className="bg-white rounded-lg shadow p-6 mb-6">
+              <h2 className="text-lg font-bold mb-4">Filters</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Status</label>
+                  <select
+                      value={statusFilter}
+                      onChange={(e) => setStatusFilter(e.target.value)}
+                      className="w-full px-4 py-2 border rounded-lg"
+                  >
+                    <option value="">All Statuses</option>
+                    <option value="PENDING">Pending</option>
+                    <option value="PAID">Paid</option>
+                    <option value="PROCESSING">Processing</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Patient</label>
+                  <select
+                      value={patientFilter}
+                      onChange={(e) => setPatientFilter(e.target.value)}
+                      className="w-full px-4 py-2 border rounded-lg"
+                  >
+                    <option value="">All Patients</option>
+                    {patients.map(p => (
+                        <option key={p.patientId} value={`${p.firstName} ${p.lastName}`}>
+                          {p.firstName} {p.lastName}
+                        </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            </div>
+        )}
+
+        {/* Pending Billing Records Section (for Billing Admin) */}
+        {user.role === 'BILLING_ADMIN' && pendingBillings.length > 0 && (
+            <div className="bg-yellow-50 rounded-lg shadow p-6 mb-6 border-l-4 border-yellow-500">
+              <h2 className="text-lg font-bold mb-4">Pending Billing Records ({pendingBillings.length})</h2>
+              <div className="space-y-3">
+                {pendingBillings.map(billing => (
+                    <div key={billing.billId} className="bg-white rounded p-4 flex justify-between items-center">
+                      <div>
+                        <p className="font-semibold">{billing.patientName}</p>
+                        <p className="text-sm text-gray-600">${billing.totalCost}</p>
+                      </div>
+                      <button
+                          onClick={() => handleUpdateStatus(billing.billId, 'PAID')}
+                          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 text-sm"
+                      >
+                        Mark Paid
+                      </button>
+                    </div>
+                ))}
+              </div>
+            </div>
+        )}
 
         <div className="bg-white rounded-lg shadow overflow-hidden">
@@ -67,5 +188,5 @@
             </thead>
             <tbody>
-            {billings.map(billing => (
+            {filteredBillings.map(billing => (
                 <tr key={billing.billId} className="border-t hover:bg-gray-50">
                   <td className="px-6 py-3">{billing.patientName}</td>
@@ -90,4 +211,10 @@
             </tbody>
           </table>
+
+          {filteredBillings.length === 0 && (
+              <div className="p-6 text-center text-gray-500">
+                {billings.length === 0 ? 'No billing records found' : 'No records match the selected filters'}
+              </div>
+          )}
         </div>
       </div>
Index: frontend/src/services/api.js
===================================================================
--- frontend/src/services/api.js	(revision 6c00695efaeff79d43ec7934ae4e04fac7bd67a0)
+++ frontend/src/services/api.js	(revision b63d7b5e4b1c98d1e978322be8e809ceee661337)
@@ -4,29 +4,32 @@
 
 const apiClient = axios.create({
-  baseURL: API_URL,
-  headers: {
-    'Content-Type': 'application/json',
-  },
+    baseURL: API_URL,
+    headers: {
+        'Content-Type': 'application/json',
+    },
 });
 
 // Request interceptor to add JWT token
 apiClient.interceptors.request.use(
-  config => {
-    const token = localStorage.getItem('token');
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`;
-    }
-    return config;
-  },
-  error => Promise.reject(error)
+    config => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+            console.log(' Token added to request:', config.url);
+        } else {
+            console.warn(' No token found for request:', config.url);
+        }
+        return config;
+    },
+    error => Promise.reject(error)
 );
 
 // Error handling interceptor
 apiClient.interceptors.response.use(
-  response => response,
-  error => {
-    console.error('API Error:', error.response?.data || error.message);
-    return Promise.reject(error);
-  }
+    response => response,
+    error => {
+        console.error('API Error:', error.response?.data || error.message);
+        return Promise.reject(error);
+    }
 );