diff --git a/src/components/moderation/ReportsQueue.tsx b/src/components/moderation/ReportsQueue.tsx
index f4aeab02..169a4c34 100644
--- a/src/components/moderation/ReportsQueue.tsx
+++ b/src/components/moderation/ReportsQueue.tsx
@@ -348,6 +348,11 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
     );
   }
 
+  // Apply client-side sorting
+  const sortedReports = useMemo(() => {
+    return sortReports(reports, sortConfig);
+  }, [reports, sortConfig]);
+
   return (
     <div className="space-y-6">
       {/* New Reports Notification */}
@@ -419,10 +424,8 @@ export const ReportsQueue = forwardRef<ReportsQueueRef>((props, ref) => {
         )}
       </div>
 
-      {/* Apply sorting before rendering */}
-      {useMemo(() => {
-        const sortedReports = sortReports(reports, sortConfig);
-        return sortedReports.map((report) => (
+      {/* Report Cards */}
+      {sortedReports.map((report) => (
         <Card key={report.id} className="border-l-4 border-l-red-500">
           <CardHeader className="pb-4">
             <div className="flex items-center justify-between">