diff --git a/app/gyeol/components/ProgressBar.tsx b/app/gyeol/components/ProgressBar.tsx
new file mode 100644
index 0000000..df574ea
--- /dev/null
+++ b/app/gyeol/components/ProgressBar.tsx
@@ -0,0 +1,34 @@
+import { QUESTION_STEPS, TOTAL_QUESTIONS, type SurveyStep } from '@/lib/survey/types';
+
+interface Props {
+  step: SurveyStep;
+}
+
+/**
+ * 상단 진행률 바.
+ * intro/thanks에서는 렌더링 안 됨 (질문 step 만 표시).
+ */
+export default function ProgressBar({ step }: Props) {
+  const idx = QUESTION_STEPS.indexOf(step as 'q1');
+  if (idx < 0) return null;
+
+  const current = idx + 1;
+  const percent = (current / TOTAL_QUESTIONS) * 100;
+
+  return (
+    <div className="w-full max-w-md mx-auto mb-8">
+      <div className="flex items-center justify-between mb-2 text-white/60 text-xs font-mono tracking-widest">
+        <span>{current}/{TOTAL_QUESTIONS}</span>
+      </div>
+      <div className="h-[2px] bg-white/10 rounded-full overflow-hidden">
+        <div
+          className="h-full transition-all duration-500 ease-out"
+          style={{
+            width: `${percent}%`,
+            background: 'linear-gradient(90deg, #cc97ff 0%, #53ddfc 100%)',
+          }}
+        />
+      </div>
+    </div>
+  );
+}