diff --git a/src/components/common/button/Button.stories.tsx b/src/components/common/button/Button.stories.tsx
index c6fdce6f..971560df 100644
--- a/src/components/common/button/Button.stories.tsx
+++ b/src/components/common/button/Button.stories.tsx
@@ -39,6 +39,10 @@ export const Gradient: TButtonStory = {
   args: { variant: "gradient" },
 };
 
+export const Tertiary: TButtonStory = {
+  args: { variant: "tertiary" },
+};
+
 export const Disabled: TButtonStory = {
   args: { disabled: true },
 };
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
index 6b567924..f0ac6441 100644
--- a/src/components/common/button/Button.tsx
+++ b/src/components/common/button/Button.tsx
@@ -10,6 +10,7 @@ interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     | "danger"
     | "dangerSoft"
     | "gradient"
+    | "tertiary"
     | "custom";
   isLoading?: boolean;
   leftIcon?: ReactNode;
@@ -46,6 +47,8 @@ export default function Button({
       "bg-status-red/10 text-status-red border border-status-red hover:bg-status-red/20 disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-gray-300 disabled:hover:bg-bg-disabled",
     gradient:
       "bg-linear-to-r from-logo-1 to-logo-2 text-white hover:opacity-90 shadow-brand-500/30 disabled:bg-bg-disabled disabled:text-text-disabled disabled:shadow-none disabled:hover:opacity-50",
+    tertiary:
+      "!h-7 border border-gray-200 text-text-auth-sub px-5 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out",
     custom: "",
   };
 
@@ -70,7 +73,7 @@ export default function Button({
           {leftIcon}
         </span>
       )}
-      <span>{children}</span>
+      {children}
     </button>
   );
 }