diff --git a/portal/index.html b/portal/index.html
index 5814327..6f0a185 100644
--- a/portal/index.html
+++ b/portal/index.html
@@ -424,6 +424,6 @@
   <!-- Toast Container -->
   <div class="toast-container" id="toastContainer"></div>
 
-  <script src="portal.js?v=5"></script>
+  <script src="portal.js?v=6"></script>
 </body>
 </html>
diff --git a/portal/portal.css b/portal/portal.css
index 241f7d0..4b2e4a1 100644
--- a/portal/portal.css
+++ b/portal/portal.css
@@ -803,11 +803,17 @@ body {
   color: var(--success);
 }
 
-.status-badge.inactive {
+.status-badge.inactive,
+.status-badge.suspended {
   background: rgba(239, 68, 68, 0.1);
   color: var(--danger);
 }
 
+.status-badge.pending {
+  background: rgba(156, 163, 175, 0.1);
+  color: var(--gray-600);
+}
+
 /* Modal */
 .modal-overlay {
   display: none;
diff --git a/portal/portal.js b/portal/portal.js
index 54b6522..14875b4 100644
--- a/portal/portal.js
+++ b/portal/portal.js
@@ -301,15 +301,16 @@ const Portal = {
     `).join('');
   },
 
-  // Get status class
+  // Get status class for orders
   getStatusClass(statusId) {
     const classes = {
-      1: 'submitted',
-      2: 'preparing',
-      3: 'ready',
-      4: 'completed'
+      0: 'pending',     // Employee: Pending
+      1: 'submitted',   // Order: Submitted, Employee: Invited
+      2: 'active',      // Order: Preparing, Employee: Active
+      3: 'suspended',   // Order: Ready, Employee: Suspended
+      4: 'completed'    // Order: Completed
     };
-    return classes[statusId] || 'submitted';
+    return classes[statusId] || 'pending';
   },
 
   // Get status text
@@ -544,8 +545,8 @@ const Portal = {
             <td>${member.Email || '-'}</td>
             <td>${this.formatPhone(member.Phone)}</td>
             <td>
-              <span class="status-badge ${member.IsActive ? 'active' : 'inactive'}">
-                ${member.IsActive ? 'Active' : 'Inactive'}
+              <span class="status-badge ${this.getStatusClass(member.StatusID)}">
+                ${member.StatusName || 'Unknown'}
               </span>
             </td>
             <td>