diff --git a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts
index d49a441a5..1a01c6b69 100644
--- a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts
+++ b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts
@@ -128,14 +128,20 @@ export const SupplyInfoWrapper = styled.div`
   }
 `;
 
-export const ProgressBar = styled.div`
+export interface progressBarProps {
+  width?: string;
+}
+
+export const ProgressBar = styled.div<progressBarProps>`
   ${mixins.flexbox("column", "flex-start", "center")};
   width: 100%;
   height: 12px;
   border-radius: 99px;
   background-color: ${({ theme }) => theme.color.background11};
   .progress-bar-rate {
-    width: 245px;
+    width: ${({ width }) => {
+      return width ? width : "0%";
+    }};
     height: 12px;
     border-radius: 8px;
     background-color: ${({ theme }) => theme.color.point};
diff --git a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.tsx b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.tsx
index a64048e43..c4f3cb766 100644
--- a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.tsx
+++ b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.tsx
@@ -30,7 +30,7 @@ const SupplyOverview: React.FC<SupplyOverviewInfoProps> = ({
           </div>
           <div>{supplyOverviewInfo.circulatingSupply}</div>
         </div>
-        <ProgressBar>
+        <ProgressBar width={"60%"}>
           <div className="progress-bar-rate" />
         </ProgressBar>
       </div>