diff --git a/src/app/components/ProgressBar/ProgressBar.tsx b/src/app/components/ProgressBar/ProgressBar.tsx
index 5d5d098d..3337c382 100644
--- a/src/app/components/ProgressBar/ProgressBar.tsx
+++ b/src/app/components/ProgressBar/ProgressBar.tsx
@@ -1,23 +1,31 @@
 // 개설 확정은 참여 인원수가 최소 인원 수(5명)을 충족한 경우 자동 확정 처리됩니다.
-// Progress bar(참여 인원수) 처음 렌더링 시 숫자가 올라가면서 바가 채워지도록 합니다. (애니메이션) - framer motion
 'use client';
 
 import { IconArrow, IconCheckCircle, IconPerson } from '@/public/icons';
 
+/**
+ * ProgressBar component
+ * @param {number} participantNumber - 참여 인원 수
+ * @param {boolean} hasParticipantNumber - 참여 인원 수 렌더링 여부
+ * @param {boolean} hasOpeningConfirmed - 개설 확정 렌더링 여부
+ */
+
 interface ProgressBarProps {
   participantNumber: number;
   hasParticipantNumber: boolean;
+  hasOpeningConfirmed: boolean;
 }
 
 const ProgressBar = ({
   participantNumber,
   hasParticipantNumber,
+  hasOpeningConfirmed,
 }: ProgressBarProps) => {
   const isOpeningConfirmed = participantNumber >= 5; // 개설 확정 여부 (boolean)
   const isClosedGathering = participantNumber === 20; // 참여 인원이 20명인 경우 (boolean)
 
   return (
-    <div className='flex gap-24 border border-solid'>
+    <div className='flex gap-24'>
       <div className='flex w-full flex-col gap-12'>
         {/* gathering information */}
         <div className='flex items-center gap-8'>
@@ -31,7 +39,7 @@ const ProgressBar = ({
             </div>
           )}
           {/* 개설확정 렌더링 선택 */}
-          {isOpeningConfirmed && !isClosedGathering && (
+          {hasOpeningConfirmed && isOpeningConfirmed && !isClosedGathering && (
             <div className='text-14 flex items-center gap-4 text-var-orange-400'>
               <IconCheckCircle className='h-24 w-24' />
               개설확정
@@ -48,11 +56,11 @@ const ProgressBar = ({
       </div>
       {/* user action */}
       {isClosedGathering ? (
-        <div className='text-16 flex w-full items-center font-semibold text-var-orange-400'>
+        <div className='text-16 flex items-center font-semibold text-var-orange-400'>
           Closed
         </div>
       ) : (
-        <div className='text-16 flex w-full items-center gap-8 font-semibold text-var-orange-600'>
+        <div className='text-16 flex items-center gap-8 whitespace-nowrap font-semibold text-var-orange-600'>
           join now
           <IconArrow className='h-[18px] w-[18px]' />
         </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6b33fa9e..7f3f57af 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,8 +3,32 @@ import ProgressBar from './components/ProgressBar/ProgressBar';
 export default function Home() {
   return (
     <main className='flex h-dvh w-dvw items-center justify-center bg-white'>
-      <div className='w-500'>
-        <ProgressBar participantNumber={5} hasParticipantNumber={true} />
+      <div className='flex w-500 flex-col gap-20'>
+        <ProgressBar
+          participantNumber={3}
+          hasParticipantNumber={true}
+          hasOpeningConfirmed={true}
+        />
+        <ProgressBar
+          participantNumber={5}
+          hasParticipantNumber={true}
+          hasOpeningConfirmed={true}
+        />
+        <ProgressBar
+          participantNumber={12}
+          hasParticipantNumber={true}
+          hasOpeningConfirmed={true}
+        />
+        <ProgressBar
+          participantNumber={20}
+          hasParticipantNumber={true}
+          hasOpeningConfirmed={true}
+        />
+        <ProgressBar
+          participantNumber={5}
+          hasParticipantNumber={false}
+          hasOpeningConfirmed={false}
+        />
       </div>
     </main>
   );