diff --git a/pages/index.tsx b/pages/index.tsx
index 7d23ebadd..cc77bafca 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,17 +1,20 @@
 import { Layout } from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
+import Test from './test';
 
 export default function Home() {
   return (
     <>
-      <HomeBanner />
+
+      <Test />
+      {/* <HomeBanner />
       <HomeFeature />
       <HomeCategories />
       <HomeCollection />
       <HomeVideo />
       <HomeCTA />
       <HomeRecipe />
-      <HomeSubscribe />
+      <HomeSubscribe /> */}
 
       {/* // todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}
diff --git a/pages/test.tsx b/pages/test.tsx
index 0e95fddf6..73945053e 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,23 +1,13 @@
 import { useState } from 'react'
-import {
-  ButtonCommon,
-  Layout, ModalInfo
-} from 'src/components/common'
+import { ButtonCommon, Layout, ModalInfo } from 'src/components/common'
+
+import CheckoutSuccess from 'src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess'
 
 export default function Test() {
-  const [visible, setVisible] = useState(false)
-  const onClose = () => {
-    setVisible(false)
-  }
-  const onOpen = () => {
-    setVisible(true)
-  }
+  
   return (
     <>
-      <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalInfo visible={visible} onClose={onClose}>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
-      </ModalInfo>
+      <CheckoutSuccess />
     </>
   )
 }
diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx
index 17f520185..18fa73b33 100644
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -15,24 +15,24 @@ interface Props {
 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
     const { locale = 'en-US' } = useRouter()
-    const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
+    // const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
 
-    const toggle = () => {
-        if (visibleCartDrawer) {
-            closeCartDrawer()
-        } else {
-            openModal()
-        }
-    }
+    // const toggle = () => {
+    //     if (visibleCartDrawer) {
+    //         closeCartDrawer()
+    //     } else {
+    //         openModal()
+    //     }
+    // }
     return (
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
                 <Header />
                 <main >{children}</main>
-                <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
-                <CartDrawer
+                {/* <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button> */}
+                {/* <CartDrawer
                     visible={visibleCartDrawer}
-                    onClose={closeCartDrawer} />
+                    onClose={closeCartDrawer} /> */}
                 <Footer />
             </div>
         </CommerceProvider>
diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss
new file mode 100644
index 000000000..73f69f7bf
--- /dev/null
+++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.module.scss
@@ -0,0 +1,48 @@
+@import '../../../../styles/utilities';
+
+.checkoutSuccessWrapper {
+    @apply flex items-center justify-center;
+    margin-top: -3.2rem;
+    
+    .checkoutSuccess {
+        border-radius: 80% 90% 18% 10% / 20% 10% 27% 20%;
+        max-width: 77.6rem;
+        height: fit-content;
+        background: 
+            url('./assets/veget.png') left 0 top 0 no-repeat,
+            url('./assets/fish.png') right 0 top 0 no-repeat,
+            url('./assets/freezeShrimp.png') right 0 bottom 0 no-repeat,
+            url('./assets/coffeeBean.png') left 0 bottom 0 no-repeat;
+        background-color: #E3F2E9;
+    
+        .checkoutContent {
+            @apply text-center;
+            margin: 7.2rem 4.8rem 6.4rem 4.8rem;
+
+            .checkoutMsg {
+                @apply heading-1 font-heading;
+                margin-top: 3.2rem;
+                margin-bottom: 1.6rem;
+            }
+        
+            .checkoutSubMsg {
+                @apply sub-headline;
+                margin-bottom: 4rem;
+            }
+        
+            .backToHomeBtn {
+                @apply flex cursor-pointer font-bold items-center justify-center;
+                color: white;
+                background-color: var(--primary);
+                margin: auto;
+                // border-radius: 80% 90% 18% 10% / 20% 10% 27% 20%; // to do
+                width: fit-content;
+                padding: 1.6rem 3.2rem 1.6rem 3.2rem;
+        
+                .arrowRight {
+                    margin-left: 1.4rem;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx
new file mode 100644
index 000000000..23f98046e
--- /dev/null
+++ b/src/components/modules/checkout/CheckoutSuccess/CheckoutSuccess.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import s from './CheckoutSuccess.module.scss';
+
+import Image from "next/image";
+import Link from "next/link";
+
+import checkIcon from './assets/checkIcon.png';
+
+const CheckoutSuccess = () => {
+    
+    return (
+        <div className={s.checkoutSuccessWrapper}>
+            <div className={s.checkoutSuccess}>
+                <div className={s.checkoutContent}>
+                    <div>
+                        <Image src={checkIcon} alt="check icon" />
+                    </div>
+
+                    <div className={s.checkoutMsg}>Your purchase has been successed!</div>
+                    <div className={s.checkoutSubMsg}>Last call! Shop deep deals on 100+ bulk picks while you can.</div>
+                    
+                    <div>
+                        <Link href="/">
+                            <a className={s.backToHomeBtn}>Back to home
+                                <div className={s.arrowRight}>
+                                    <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M11.92 6.61994C11.8724 6.49719 11.801 6.38505 11.71 6.28994L6.71 1.28994C6.61676 1.1967 6.50607 1.12274 6.38425 1.07228C6.26243 1.02182 6.13186 0.99585 6 0.99585C5.7337 0.99585 5.4783 1.10164 5.29 1.28994C5.19676 1.38318 5.1228 1.49387 5.07234 1.61569C5.02188 1.73751 4.99591 1.86808 4.99591 1.99994C4.99591 2.26624 5.1017 2.52164 5.29 2.70994L8.59 5.99994H1C0.734784 5.99994 0.48043 6.1053 0.292893 6.29283C0.105357 6.48037 0 6.73472 0 6.99994C0 7.26516 0.105357 7.51951 0.292893 7.70705C0.48043 7.89458 0.734784 7.99994 1 7.99994H8.59L5.29 11.2899C5.19627 11.3829 5.12188 11.4935 5.07111 11.6154C5.02034 11.7372 4.9942 11.8679 4.9942 11.9999C4.9942 12.132 5.02034 12.2627 5.07111 12.3845C5.12188 12.5064 5.19627 12.617 5.29 12.7099C5.38296 12.8037 5.49356 12.8781 5.61542 12.9288C5.73728 12.9796 5.86799 13.0057 6 13.0057C6.13201 13.0057 6.26272 12.9796 6.38458 12.9288C6.50644 12.8781 6.61704 12.8037 6.71 12.7099L11.71 7.70994C11.801 7.61484 11.8724 7.50269 11.92 7.37994C12.02 7.13648 12.02 6.8634 11.92 6.61994Z" fill="white"/>
+                                    </svg>
+                                </div>
+                            </a>
+                        </Link>
+                        
+                    </div>
+                </div>
+
+                <div className={s.cornerImgs}>
+                    
+                    
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default CheckoutSuccess
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutSuccess/assets/checkIcon.png b/src/components/modules/checkout/CheckoutSuccess/assets/checkIcon.png
new file mode 100644
index 000000000..9d97234fb
Binary files /dev/null and b/src/components/modules/checkout/CheckoutSuccess/assets/checkIcon.png differ
diff --git a/src/components/modules/checkout/CheckoutSuccess/assets/coffeeBean.png b/src/components/modules/checkout/CheckoutSuccess/assets/coffeeBean.png
new file mode 100644
index 000000000..742f30b68
Binary files /dev/null and b/src/components/modules/checkout/CheckoutSuccess/assets/coffeeBean.png differ
diff --git a/src/components/modules/checkout/CheckoutSuccess/assets/fish.png b/src/components/modules/checkout/CheckoutSuccess/assets/fish.png
new file mode 100644
index 000000000..14f676f64
Binary files /dev/null and b/src/components/modules/checkout/CheckoutSuccess/assets/fish.png differ
diff --git a/src/components/modules/checkout/CheckoutSuccess/assets/freezeShrimp.png b/src/components/modules/checkout/CheckoutSuccess/assets/freezeShrimp.png
new file mode 100644
index 000000000..5b3a501ac
Binary files /dev/null and b/src/components/modules/checkout/CheckoutSuccess/assets/freezeShrimp.png differ
diff --git a/src/components/modules/checkout/CheckoutSuccess/assets/veget.png b/src/components/modules/checkout/CheckoutSuccess/assets/veget.png
new file mode 100644
index 000000000..83b8f51cc
Binary files /dev/null and b/src/components/modules/checkout/CheckoutSuccess/assets/veget.png differ