diff --git a/src/app/[locale]/keyword-cloud/components/QuarterNavigator.tsx b/src/app/[locale]/keyword-cloud/components/QuarterNavigator.tsx
new file mode 100644
index 0000000..b189d38
--- /dev/null
+++ b/src/app/[locale]/keyword-cloud/components/QuarterNavigator.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface QuarterNavigatorProps {
+  current: string;
+  quarters: string[];
+  onNavigate: (quarter: string) => void;
+}
+
+export function QuarterNavigator({ current, quarters, onNavigate }: QuarterNavigatorProps) {
+  const currentIndex = quarters.indexOf(current);
+  const canGoPrev = currentIndex > 0;
+  const canGoNext = currentIndex < quarters.length - 1;
+
+  return (
+    <div className="flex flex-col md:flex-row items-center justify-between gap-8 mb-12">
+      {/* 上一个季度按钮 */}
+      <button
+        disabled={!canGoPrev}
+        className={cn(
+          'nav-button',
+          'order-2 md:order-1',
+          'flex items-center justify-center',
+          'w-12 h-12 md:w-16 md:h-16',
+          'bg-white dark:bg-gray-800',
+          'border-4 border-black',
+          'shadow-hard',
+          'hover:translate-y-0.5 hover:shadow-none',
+          'transition-all',
+          !canGoPrev && 'opacity-50 cursor-not-allowed'
+        )}
+        onClick={() => canGoPrev && onNavigate(quarters[currentIndex - 1])}
+        aria-label="Previous quarter"
+      >
+        <ChevronLeft className="w-8 h-8 md:w-10 md:h-10" />
+      </button>
+
+      {/* 当前季度显示 */}
+      <div className="text-center order-1 md:order-2 flex-1">
+        <div className="inline-block bg-primary border-4 border-black px-10 py-4 shadow-hard font-display font-bold text-4xl md:text-5xl mb-4 rotate-1">
+          {current}
+        </div>
+      </div>
+
+      {/* 下一个季度按钮 */}
+      <button
+        disabled={!canGoNext}
+        className={cn(
+          'nav-button',
+          'order-3',
+          'flex items-center justify-center',
+          'w-12 h-12 md:w-16 md:h-16',
+          'bg-white dark:bg-gray-800',
+          'border-4 border-black',
+          'shadow-hard',
+          'hover:translate-y-0.5 hover:shadow-none',
+          'transition-all',
+          !canGoNext && 'opacity-50 cursor-not-allowed'
+        )}
+        onClick={() => canGoNext && onNavigate(quarters[currentIndex + 1])}
+        aria-label="Next quarter"
+      >
+        <ChevronRight className="w-8 h-8 md:w-10 md:h-10" />
+      </button>
+    </div>
+  );
+}