diff --git a/pages/index.tsx b/pages/index.tsx
index 99ca167d0..83b4d8185 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,10 +1,13 @@
 
 import { ButtonCommon, Layout } from 'src/components/common'
+import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
 export default function Home() {
   return (
     <>
       <div>This is home page</div>
       <ButtonCommon>Button default</ButtonCommon>
+      <ButtonCommon type={ButonType.light}>Button light</ButtonCommon>
+      <ButtonCommon size={ButtonSize.large}>Button default large</ButtonCommon>
       <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
       <p>Go to <code>src/components</code> to make your awesome component!</p>
       <p>Go to <code>src/styles</code> to find global styles!</p>
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
index 50bb2a3af..6f7a94f25 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.module.scss
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -1,7 +1,14 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";
 
 .buttonCommon {
-  @apply custom-border-radius bg-primary hover:bg-hover-primary transition-all duration-200;
+  @apply custom-border-radius bg-primary hover:bg-hover-primary transition-all duration-200 text-white;
   padding: 1.6rem 3.6rem;
-  
-}
\ No newline at end of file
+  &.light {
+    @apply text-base;
+    background-color: #fff !important;
+    border: 1px solid theme("textColor.active") !important;
+    
+  }
+  &.large {
+  }
+}