diff --git a/src/components/core/button/primary-button.js b/src/components/core/button/primary-button.js
index 2997448..315e50e 100644
--- a/src/components/core/button/primary-button.js
+++ b/src/components/core/button/primary-button.js
@@ -7,9 +7,10 @@ const sizeClasses = {
   l: 'px-4 py-3 text-base leading-[1.5]',
 };
 
-const PrimaryButton = ({ size = 'sm', className, children, ...props }) => {
+const PrimaryButton = React.forwardRef(({ size = 'sm', className, children, ...props }, ref) => {
   return (
     <button
+      ref={ref}
       type="button"
       className={cn(
         'flex items-center justify-center bg-primary text-white rounded-lg',
@@ -24,7 +25,9 @@ const PrimaryButton = ({ size = 'sm', className, children, ...props }) => {
       {children}
     </button>
   );
-};
+});
+
+PrimaryButton.displayName = 'PrimaryButton';
 
 PrimaryButton.propTypes = {
   size: PropTypes.oneOf(['sm', 'l']),
diff --git a/src/components/core/button/secondary-button.js b/src/components/core/button/secondary-button.js
index cca7d73..71b788a 100644
--- a/src/components/core/button/secondary-button.js
+++ b/src/components/core/button/secondary-button.js
@@ -7,12 +7,13 @@ const sizeClasses = {
   l: 'px-4 py-3 text-base leading-[1.5]',
 };
 
-const SecondaryButton = ({ size = 'sm', className, children, ...props }) => {
+const SecondaryButton = React.forwardRef(({ size = 'sm', className, children, ...props }, ref) => {
   return (
     <button
+      ref={ref}
       type="button"
       className={cn(
-        'flex items-center justify-center text-text-primary border border-border-main rounded-lg',
+        'flex items-center justify-center bg-white text-text-primary border border-border-main rounded-lg',
         'hover:bg-gray-50',
         'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
         'disabled:bg-bg-disabled disabled:text-text-disabled disabled:border disabled:border-text-secondary disabled:cursor-not-allowed',
@@ -24,7 +25,9 @@ const SecondaryButton = ({ size = 'sm', className, children, ...props }) => {
       {children}
     </button>
   );
-};
+});
+
+SecondaryButton.displayName = 'SecondaryButton';
 
 SecondaryButton.propTypes = {
   size: PropTypes.oneOf(['sm', 'l']),
diff --git a/src/components/core/button/tertiary-button.js b/src/components/core/button/tertiary-button.js
index c306afc..fdeb177 100644
--- a/src/components/core/button/tertiary-button.js
+++ b/src/components/core/button/tertiary-button.js
@@ -7,12 +7,13 @@ const sizeClasses = {
   l: 'px-4 py-3 text-base leading-[1.5]',
 };
 
-const TertiaryButton = ({ size = 'sm', className, children, ...props }) => {
+const TertiaryButton = React.forwardRef(({ size = 'sm', className, children, ...props }, ref) => {
   return (
     <button
+      ref={ref}
       type="button"
       className={cn(
-        'flex items-center justify-center text-primary rounded-lg',
+        'flex items-center justify-center bg-white text-primary rounded-lg',
         'hover:text-blue-800',
         'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
         'disabled:bg-bg-disabled disabled:text-text-disabled disabled:border disabled:border-text-secondary disabled:cursor-not-allowed',
@@ -24,7 +25,9 @@ const TertiaryButton = ({ size = 'sm', className, children, ...props }) => {
       {children}
     </button>
   );
-};
+});
+
+TertiaryButton.displayName = 'TertiaryButton';
 
 TertiaryButton.propTypes = {
   size: PropTypes.oneOf(['sm', 'l']),