diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index ff9cdf7..6e9ba5e 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -18,7 +18,7 @@ const BadgeStory = ({ ...badgeProps }) => {
 };
 
 type Story = StoryObj<typeof Badge>;
-export const withIcon: Story = {
+export const WithIcon: Story = {
   args: {
     children: 'Badge',
     leftIcon: <IcGroundLine />,
@@ -26,7 +26,7 @@ export const withIcon: Story = {
   render: BadgeStory,
 };
 
-export const withoutIcon: Story = {
+export const WithoutIcon: Story = {
   args: {
     children: 'Badge',
   },
diff --git a/src/components/Badge/Badge.style.ts b/src/components/Badge/Badge.style.ts
index 7112d7f..210d322 100644
--- a/src/components/Badge/Badge.style.ts
+++ b/src/components/Badge/Badge.style.ts
@@ -3,7 +3,7 @@ import { styled } from 'styled-components';
 import { SemanticColor } from '@/style';
 
 interface StyledBadgeProps {
-  backgroundColor: SemanticColor;
+  $backgroundColor: SemanticColor;
 }
 export const StyledBadge = styled.div<StyledBadgeProps>`
   display: flex;
@@ -13,7 +13,7 @@ export const StyledBadge = styled.div<StyledBadgeProps>`
   height: 24px;
   padding: 0 var(--padding);
   border-radius: 2px;
-  background-color: ${({ theme, backgroundColor }) => theme.color[backgroundColor]};
+  background-color: ${({ theme, $backgroundColor }) => theme.color[$backgroundColor]};
 
   ${({ theme }) => theme.typo.caption1};
 `;
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 91a5846..da7db4a 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -9,7 +9,7 @@ function Badge({ color = 'monoItemBG', children = 'Badge', leftIcon }: BadgeProp
       style={{
         padding: leftIcon ? '0 8px' : '0 12px',
       }}
-      backgroundColor={color}
+      $backgroundColor={color}
     >
       {leftIcon && (
         <IconContext.Provider