diff --git a/frontend/src/app/reports/page.tsx b/frontend/src/app/reports/page.tsx
new file mode 100644
index 0000000..68fa9ba
--- /dev/null
+++ b/frontend/src/app/reports/page.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import { useState } from 'react';
+import { api } from '@/lib/api';
+import Navbar from '@/components/Navbar';
+import { FileDown, Loader2 } from 'lucide-react';
+
+const downloadPdf = async (url: string, filename: string) => {
+  const response = await api.get(url, { responseType: 'blob' });
+  const blob = new Blob([response.data], { type: 'application/pdf' });
+  const downloadUrl = window.URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = downloadUrl;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  window.URL.revokeObjectURL(downloadUrl);
+};
+
+export default function ReportsPage() {
+  const [year, setYear] = useState<number>(2025);
+  const [downloading, setDownloading] = useState<string | null>(null);
+
+  const handleDownloadKyosai = async () => {
+    setDownloading('kyosai');
+    try {
+      await downloadPdf(`/reports/kyosai/${year}/`, `水稲共済細目書_${year}.pdf`);
+    } catch (error) {
+      console.error('Download failed:', error);
+      alert('ダウンロードに失敗しました');
+    } finally {
+      setDownloading(null);
+    }
+  };
+
+  const handleDownloadChusankan = async () => {
+    setDownloading('chusankan');
+    try {
+      await downloadPdf(`/reports/chusankan/${year}/`, `中山間交付金申请书_${year}.pdf`);
+    } catch (error) {
+      console.error('Download failed:', error);
+      alert('ダウンロードに失敗しました');
+    } finally {
+      setDownloading(null);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Navbar />
+      <div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">帳票出力</h1>
+
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="mb-6">
+            <label htmlFor="year" className="block text-sm font-medium text-gray-700 mb-2">
+              対象年度
+            </label>
+            <select
+              id="year"
+              value={year}
+              onChange={(e) => setYear(parseInt(e.target.value))}
+              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 w-full max-w-xs"
+            >
+              <option value={2025}>2025年</option>
+              <option value={2026}>2026年</option>
+              <option value={2027}>2027年</option>
+            </select>
+          </div>
+
+          <div className="space-y-4">
+            <button
+              onClick={handleDownloadKyosai}
+              disabled={downloading !== null}
+              className="w-full flex items-center justify-center px-4 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {downloading === 'kyosai' ? (
+                <>
+                  <Loader2 className="h-5 w-5 mr-2 animate-spin" />
+                  ダウンロード中...
+                </>
+              ) : (
+                <>
+                  <FileDown className="h-5 w-5 mr-2" />
+                  水稲共済細目書をダウンロード
+                </>
+              )}
+            </button>
+
+            <button
+              onClick={handleDownloadChusankan}
+              disabled={downloading !== null}
+              className="w-full flex items-center justify-center px-4 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {downloading === 'chusankan' ? (
+                <>
+                  <Loader2 className="h-5 w-5 mr-2 animate-spin" />
+                  ダウンロード中...
+                </>
+              ) : (
+                <>
+                  <FileDown className="h-5 w-5 mr-2" />
+                  中山間交付金申請書をダウンロード
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 61ab29e..ae6ba99 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useRouter, usePathname } from 'next/navigation';
-import { LogOut, Wheat, MapPin } from 'lucide-react';
+import { LogOut, Wheat, MapPin, FileText } from 'lucide-react';
 import { logout } from '@/lib/api';
 
 export default function Navbar() {
@@ -43,6 +43,17 @@ export default function Navbar() {
                 <MapPin className="h-4 w-4 mr-2" />
                 圃場管理
               </button>
+              <button
+                onClick={() => router.push('/reports')}
+                className={`flex items-center px-3 py-2 text-sm rounded-md transition-colors ${
+                  isActive('/reports') || pathname?.startsWith('/reports/')
+                    ? 'text-green-700 bg-green-50'
+                    : 'text-gray-700 hover:text-gray-900 hover:bg-gray-100'
+                }`}
+              >
+                <FileText className="h-4 w-4 mr-2" />
+                帳票出力
+              </button>
             </div>
           </div>
           <div className="flex items-center">