diff --git a/resources/js/pages/admin/finance/payroll/index.tsx b/resources/js/pages/admin/finance/payroll/index.tsx
index 41ae740..90b4395 100644
--- a/resources/js/pages/admin/finance/payroll/index.tsx
+++ b/resources/js/pages/admin/finance/payroll/index.tsx
@@ -76,21 +76,25 @@ export default function PayrollIndex({
                 )}
             </div>
 
-            <div className="flex flex-col gap-3">
-                <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
-                    {currentMonthPayrolls.map((payroll) => (
-                        <PayrollCard
-                            key={payroll.id}
-                            payroll={payroll}
-                            onClick={() => {
-                                if (hasPermission('Edit:PayrollAdjustment')) {
-                                    onEdit(payroll);
-                                }
-                            }}
-                        />
-                    ))}
+            {currentMonthPayrolls.length > 0 && (
+                <div className="flex flex-col gap-3">
+                    <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                        {currentMonthPayrolls.map((payroll) => (
+                            <PayrollCard
+                                key={payroll.id}
+                                payroll={payroll}
+                                onClick={() => {
+                                    if (
+                                        hasPermission('Edit:PayrollAdjustment')
+                                    ) {
+                                        onEdit(payroll);
+                                    }
+                                }}
+                            />
+                        ))}
+                    </div>
                 </div>
-            </div>
+            )}
 
             <PayrollFormModal
                 isOpen={isFormOpen}