diff --git a/pages/index.tsx b/pages/index.tsx
index 103b3567e..99ca167d0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,7 +4,7 @@ export default function Home() {
   return (
     <>
       <div>This is home page</div>
-      <ButtonCommon />
+      <ButtonCommon>Button default</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.css b/src/components/common/ButtonCommon/ButtonCommon.module.css
deleted file mode 100644
index 6cbe5d4aa..000000000
--- a/src/components/common/ButtonCommon/ButtonCommon.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* style demo here */
-
-.buttonCommon {
-  color: red;
-}
\ No newline at end of file
diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss
new file mode 100644
index 000000000..50bb2a3af
--- /dev/null
+++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss
@@ -0,0 +1,7 @@
+@import '../../../styles/utilities';
+
+.buttonCommon {
+  @apply custom-border-radius bg-primary hover:bg-hover-primary transition-all duration-200;
+  padding: 1.6rem 3.6rem;
+  
+}
\ No newline at end of file
diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx
index 96732424a..4248ad8ab 100644
--- a/src/components/common/ButtonCommon/ButtonCommon.tsx
+++ b/src/components/common/ButtonCommon/ButtonCommon.tsx
@@ -1,14 +1,27 @@
-import { FC, useRef, useEffect } from 'react'
-import s from './ButtonCommon.module.css'
+import classNames from 'classnames'
+import React from 'react'
+import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
+import s from './ButtonCommon.module.scss'
 
 interface Props {
-    className?: string
-    children?: any
+    children?: any,
+    type?: ButonType,
+    size?: ButtonSize,
+    icon?: HTMLElement,
 }
 
-const ButtonCommon: FC<Props> = ({ }) => {
+const ButtonCommon = ({ type, size, icon, children }: Props) => {
     return (
-        <div className={s.buttonCommon}>This is button common</div>
+        <button className={classNames({
+            [s.buttonCommon]: true,
+            [s.type]: type,
+            [s.size]: size,
+        })}>
+            {
+                icon && { icon }
+            }
+            <span className={s.label}>{children}</span>
+        </button>
     )
 }
 
diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss
index 64be923aa..b983b04f2 100644
--- a/src/components/common/Header/Header.module.scss
+++ b/src/components/common/Header/Header.module.scss
@@ -2,7 +2,8 @@
 
 .header {
   .btn {
-    @apply font-bold py-2 px-4 rounded;
+    // @apply font-bold py-2 px-4 rounded;
+
   }
   .btnBlue {
     @apply bg-primary hover:bg-warning text-label font-bold py-2 px-4 custom-border-radius;
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 6314dd7e5..5a1bf21ce 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -10,27 +10,6 @@ const Header: FC<Props> = ({ }: Props) => {
     return (
         <div className={s.header}>
             This is Header
-            <button className={s.btnBlue}>
-                Button
-            </button>
-            <button className={s.btn}>
-                Button
-            </button>
-            <div className={s.link}>
-                Test link style
-            </div>
-            <h1 className="heading-1">
-                HEADING 1
-            </h1>
-            <p className="spacing-horizontal">
-                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt delectus, atque aliquid repudiandae debitis dolor facere impedit alias nemo dolores voluptatum? Commodi, delectus. Dignissimos aspernatur nobis, distinctio delectus eligendi nisi illo tempore non nostrum, molestias excepturi dolor culpa fugiat rem perspiciatis. Repellendus numquam quisquam possimus natus vero recusandae, ipsam earum ratione quos ex consectetur cum nostrum modi amet odit fugiat fugit. Facere cum enim dignissimos molestias facilis error dicta exercitationem, delectus voluptates fuga laboriosam esse sunt odio, impedit modi veritatis, nisi nam? Voluptatum voluptas similique aspernatur. Soluta, accusamus! Mollitia praesentium adipisci perspiciatis iusto dolorum sint sit placeat, nesciunt id repellendus.
-            </p>
-            <p className="spacing-horizontal-left">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque doloremque quos excepturi laborum maiores laudantium hic iusto natus? Ipsa deleniti quas odit! Labore esse enim ipsam tempora tenetur beatae maxime officiis est, a illo! Soluta suscipit maxime odit eveniet laudantium, iure atque doloribus quaerat. Obcaecati tempore molestiae aliquid amet maiores suscipit, beatae repellat illum ipsam tenetur. Porro officiis omnis quam, iure quia necessitatibus consectetur culpa itaque, in tempora rem ex ad et iusto, hic commodi fuga quibusdam. Dolores exercitationem natus dolor pariatur voluptates non corporis, minus repellat! Quis distinctio esse, animi suscipit ducimus sequi obcaecati facere, perferendis ea omnis soluta.
-            </p>
-            <p className={s.paragraph}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, natus?
-            </p>
         </div>
     )
 }
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 599c4d5aa..e4ba731fd 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -1,5 +1,6 @@
 :root {
   --primary: #36bf6d;
+  --hover-primary: #3ccc76;
   --primary-light: #e0f6e8;
   --primary-lightest: #effaf4;
 
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 96e943d2c..60e4646d0 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -88,6 +88,6 @@
         }
     }
     .custom-border-radius {
-        border-radius: 50% 20% / 10% 40%;
+        border-radius: 20% 10% 10% 4%/ 15% 40% 25% 50%;
     }
 }
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index ae4a87762..176f9b38e 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -1 +1,12 @@
-// constanst here
\ No newline at end of file
+
+
+export enum ButonType {
+    primary,
+    light,
+}
+
+export enum ButtonSize {
+    default,
+    large,
+}
+
diff --git a/tailwind.config.js b/tailwind.config.js
index 4b2e65c26..20aaabea6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,6 +22,7 @@ module.exports = {
       },
       colors: {
         primary: 'var(--primary)',
+        'hover-primary': 'var(--hover-primary)',
         'primary-light': 'var(--primary-light)',
         'primary-lightest': 'var(--primary-lightest)',