diff --git a/src/app/[locale]/keyword-cloud/components/ProgressIndicator.tsx b/src/app/[locale]/keyword-cloud/components/ProgressIndicator.tsx
new file mode 100644
index 0000000..99cd1c7
--- /dev/null
+++ b/src/app/[locale]/keyword-cloud/components/ProgressIndicator.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ProgressIndicatorProps {
+  currentQuarter: string;
+  totalQuarters: number;
+  quarters: string[];
+}
+
+export function ProgressIndicator({ currentQuarter, totalQuarters, quarters }: ProgressIndicatorProps) {
+  const currentIndex = quarters.indexOf(currentQuarter);
+
+  return (
+    <div className="flex gap-2 mb-12 max-w-md mx-auto">
+      {quarters.map((quarter, index) => {
+        const isCompleted = index <= currentIndex;
+        const isCurrent = index === currentIndex;
+        const isLast = index === quarters.length - 1;
+
+        return (
+          <div
+            key={quarter}
+            className={cn(
+              'progress-step',
+              'h-3',
+              'flex-1',
+              'border-2',
+              'border-black',
+              'transition-colors',
+              'duration-300',
+              isCurrent && 'bg-primary',
+              isCompleted && !isCurrent && 'bg-secondary',
+              !isCompleted && 'bg-gray-200 dark:bg-gray-700',
+              isLast && 'border-dashed'
+            )}
+            aria-label={`Quarter ${quarter}`}
+          />
+        );
+      })}
+    </div>
+  );
+}