diff --git a/pages/index.tsx b/pages/index.tsx
index 1cf2dbf29..5f4ebb217 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,5 @@
 
-import { ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common';
+import { Banner, ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common';
 import { IconBuy } from 'src/components/icons';
 export default function Home() {
   return (
@@ -13,11 +13,16 @@ export default function Home() {
       {/* demo  */}
       <div style={{ display: 'flex' }}>
         <Inputcommon placeholder="Enter here" />
-        <InputSearch/>
+        <InputSearch />
       </div>
 
+      <Banner
+        imgLink="https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png"
+        title="Save 15% on your first order"
+        subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
+      />
       <ButtonCommon type='ghost' icon={<IconBuy />}>Button</ButtonCommon>
-      <ButtonIconBuy/>
+      <ButtonIconBuy />
     </>
   )
 }
diff --git a/src/components/common/Banner/Banner.module.scss b/src/components/common/Banner/Banner.module.scss
new file mode 100644
index 000000000..2fbd52c61
--- /dev/null
+++ b/src/components/common/Banner/Banner.module.scss
@@ -0,0 +1,38 @@
+@import "../../../styles/utilities";
+
+.banner {
+  @apply bg-primary-light custom-border-radius-lg overflow-hidden;
+  border: 1px solid var(--primary);
+
+  .inner {
+    @apply bg-no-repeat;
+    background-size: 90%;
+    background-position: right -500% bottom 0%;
+    @screen md {
+      @apply bg-right-bottom;
+      background-size: unset;
+    }
+    .content {
+      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0));
+      padding: 1.6rem;
+      max-width: 70%;
+      @screen md {
+        max-width: 50%;
+        padding: 4.8rem;
+      }
+      .top {
+        .heading {
+          @apply heading-1;
+          margin-bottom: 1.6rem;
+        }
+        .subHeading {
+          @apply sub-headline;
+        }
+      }
+
+      .bottom {
+        margin-top: 4rem;
+      }
+    }
+  }
+}
diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx
new file mode 100644
index 000000000..d85557cc5
--- /dev/null
+++ b/src/components/common/Banner/Banner.tsx
@@ -0,0 +1,44 @@
+import Link from 'next/link'
+import React, { memo } from 'react'
+import { IconArrowRight } from 'src/components/icons'
+import { ROUTE } from 'src/utils/constanst.utils'
+import { LANGUAGE } from 'src/utils/language.utils'
+import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import s from './Banner.module.scss'
+
+interface Props {
+    imgLink: string,
+    title: string,
+    subtitle: string,
+    buttonLabel?: string,
+    linkButton?: string,
+    onClick?: () => void,
+}
+
+const Banner = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME }: Props) => {
+    return (
+        <div className={s.banner}>
+            <div className={s.inner} style={{ backgroundImage: `url(${imgLink})` }}>
+                <div className={s.content}>
+                    <div className={s.top}>
+                        <h1 className={s.heading}>
+                            {title}
+                        </h1>
+                        <div className={s.subHeading}>
+                            {subtitle}
+                        </div>
+                    </div>
+                    <div className={s.bottom}>
+                        <Link href={linkButton}>
+                            <a>
+                                <ButtonCommon icon={<IconArrowRight />} isIconSuffix={true}>{buttonLabel}</ButtonCommon>
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+})
+
+export default Banner
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 916660192..7a0f464a2 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -7,3 +7,4 @@ export { default as Logo} from './Logo/Logo'
 export { default as Inputcommon} from './InputCommon/InputCommon'
 export { default as InputSearch} from './InputSearch/InputSearch'
 export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
+export { default as Banner} from './Banner/Banner'
diff --git a/src/components/icons/IconArrowRight.tsx b/src/components/icons/IconArrowRight.tsx
new file mode 100644
index 000000000..f6d2fd609
--- /dev/null
+++ b/src/components/icons/IconArrowRight.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconArrowRight = () => {
+    return (
+        <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.92 6.62019C11.8724 6.49743 11.801 6.38529 11.71 6.29019L6.71 1.29019C6.61676 1.19695 6.50607 1.12299 6.38425 1.07253C6.26243 1.02207 6.13186 0.996094 6 0.996094C5.7337 0.996094 5.4783 1.10188 5.29 1.29019C5.19676 1.38342 5.1228 1.49411 5.07234 1.61594C5.02188 1.73776 4.99591 1.86833 4.99591 2.00019C4.99591 2.26649 5.1017 2.52188 5.29 2.71019L8.59 6.00019H1C0.734784 6.00019 0.48043 6.10554 0.292893 6.29308C0.105357 6.48062 0 6.73497 0 7.00019C0 7.2654 0.105357 7.51976 0.292893 7.70729C0.48043 7.89483 0.734784 8.00019 1 8.00019H8.59L5.29 11.2902C5.19627 11.3831 5.12188 11.4937 5.07111 11.6156C5.02034 11.7375 4.9942 11.8682 4.9942 12.0002C4.9942 12.1322 5.02034 12.2629 5.07111 12.3848C5.12188 12.5066 5.19627 12.6172 5.29 12.7102C5.38296 12.8039 5.49356 12.8783 5.61542 12.9291C5.73728 12.9798 5.86799 13.006 6 13.006C6.13201 13.006 6.26272 12.9798 6.38458 12.9291C6.50644 12.8783 6.61704 12.8039 6.71 12.7102L11.71 7.71019C11.801 7.61508 11.8724 7.50294 11.92 7.38019C12.02 7.13672 12.02 6.86365 11.92 6.62019Z" fill="white" />
+        </svg>
+    )
+}
+
+export default IconArrowRight
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index c82e4fa76..a26adde71 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1,3 +1,4 @@
 export { default as IconBuy } from './IconBuy'
 export { default as IconSearch } from './IconSearch'
+export { default as IconArrowRight } from './IconArrowRight'
 
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 20093a1b2..63dd56281 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -3,6 +3,8 @@
         font-size: 4.8rem;
         line-height: 5.6rem;
         letter-spacing: -0.03em;
+        font-weight: bold;
+        text-transform: uppercase;
         @screen md {
             font-size: 6.4rem;
             line-height: 8rem;
@@ -13,6 +15,8 @@
         font-size: 4rem;
         line-height: 4.8rem;
         letter-spacing: -0.02em;
+        font-weight: bold;
+        text-transform: uppercase;
         @screen md {
             font-size: 4.8rem;
             line-height: 5.6rem;
@@ -23,6 +27,8 @@
         font-size: 2.4rem;
         line-height: 3.2rem;
         letter-spacing: -0.01em;
+        font-weight: bold;
+        text-transform: uppercase;
         @screen md {
             font-size: 3.2rem;
             line-height: 4rem;
@@ -92,6 +98,10 @@
         border-radius: 60% 10% 60% 2%/ 10% 20% 10% 50%;
     }
 
+    .custom-border-radius-lg {
+        border-radius: 60% 2% 2% 2%/ 6% 50% 50% 50%;
+    }
+
     .font-heading {
         font-family: var(--font-heading);
     }
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 94f253622..defc74eba 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -1,3 +1,7 @@
 export const KEY = {
     ENTER: 'Enter',
 }
+
+export const ROUTE = {
+    HOME: '/',
+}