diff --git a/resources/js/components/cashflow/period-navigation.test.tsx b/resources/js/components/cashflow/period-navigation.test.tsx
new file mode 100644
index 00000000..65d5092a
--- /dev/null
+++ b/resources/js/components/cashflow/period-navigation.test.tsx
@@ -0,0 +1,37 @@
+import { setTranslations } from '@/utils/i18n';
+import { render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { PeriodNavigation } from './period-navigation';
+
+vi.mock('@inertiajs/react', () => ({
+    usePage: () => ({ props: { locale: 'es' } }),
+}));
+
+describe('PeriodNavigation', () => {
+    afterEach(() => {
+        setTranslations({});
+    });
+
+    it('translates period type labels at render time', () => {
+        setTranslations({
+            Month: 'Mes',
+            Quarter: 'Trimestre',
+            Year: 'Año',
+        });
+
+        render(
+            <PeriodNavigation
+                currentDate={new Date(2026, 0, 1)}
+                periodType="month"
+                onDateChange={() => undefined}
+                onPeriodTypeChange={() => undefined}
+            />,
+        );
+
+        expect(screen.getByRole('button', { name: 'Mes' })).toBeInTheDocument();
+        expect(
+            screen.getByRole('button', { name: 'Trimestre' }),
+        ).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Año' })).toBeInTheDocument();
+    });
+});
diff --git a/resources/js/components/cashflow/period-navigation.tsx b/resources/js/components/cashflow/period-navigation.tsx
index a9ee3241..1567dc0d 100644
--- a/resources/js/components/cashflow/period-navigation.tsx
+++ b/resources/js/components/cashflow/period-navigation.tsx
@@ -31,11 +31,11 @@ interface PeriodNavigationProps {
 
 const periodTypeOptions: Array<{
     value: CashflowPeriodType;
-    label: string;
+    labelKey: string;
 }> = [
-    { value: 'month', label: __('Month') },
-    { value: 'quarter', label: __('Quarter') },
-    { value: 'year', label: __('Year') },
+    { value: 'month', labelKey: 'Month' },
+    { value: 'quarter', labelKey: 'Quarter' },
+    { value: 'year', labelKey: 'Year' },
 ];
 
 export function PeriodNavigation({
@@ -77,7 +77,7 @@ export function PeriodNavigation({
                                 'border-primary bg-primary text-primary-foreground',
                         )}
                     >
-                        {option.label}
+                        {__(option.labelKey)}
                     </Button>
                 ))}
             </ButtonGroup>