diff --git a/pages/test.tsx b/pages/test.tsx
index a0d99978c..24d55e9ac 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import {
   ButtonCommon,
+  CardItemCheckout,
   Layout,
   ModalCommon,
   ModalConfirm,
@@ -19,7 +20,7 @@ const dataTest = [
     weight: '250g',
     category: 'VEGGIE',
     price: 'Rp 27.500',
-    imageSrc: image5.src,
+    imageSrc: image7.src,
   },
   {
     name: 'Tomato',
@@ -410,12 +411,12 @@ export default function Test() {
   }
   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>
-      <PaginationCommon total={40} pageSize={10}/>
-      <ProductList data={dataTest}/>
+      <CardItemCheckout {...dataTest[0]} quantity={2}/>
+      <div className="w-full" >
+        <ButtonCommon>
+          test
+        </ButtonCommon>
+      </div>
     </>
   )
 }
diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.module.scss b/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
new file mode 100644
index 000000000..374529453
--- /dev/null
+++ b/src/components/common/CardItemCheckout/CardItemCheckout.module.scss
@@ -0,0 +1,29 @@
+.warpper{
+    max-width: 49.9rem;
+    max-height: 12rem;
+    padding:1.6rem 0;
+    @apply flex items-center;
+    .image{
+        min-width: 13.3rem;
+        max-width: 8.8rem;
+        margin: 0.8rem;
+        @apply flex justify-center items-center;
+        img{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .right{
+        width: 100%;
+        .name{
+            color: var(--text-active);
+            margin-bottom: 0.5erm;
+        }
+        .quantity {
+            @apply flex justify-between text-label;
+            .price{
+                color: var(--text-base);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.tsx b/src/components/common/CardItemCheckout/CardItemCheckout.tsx
new file mode 100644
index 000000000..dd9fb14c5
--- /dev/null
+++ b/src/components/common/CardItemCheckout/CardItemCheckout.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import s from "./CardItemCheckout.module.scss"
+import { ProductProps } from 'src/utils/types.utils'
+interface CardItemCheckoutProps extends ProductProps {
+    quantity:number
+}
+
+const CardItemCheckout = ({imageSrc,name,price,weight,quantity,category}: CardItemCheckoutProps) => {
+    return (
+        <div className={s.warpper}>
+            <div className={s.image}>
+                <img src={imageSrc} alt="image" />
+            </div>
+            <div className={s.right}>
+                <div className={s.name}>
+                    {`${name} (${weight})`}
+                </div>
+                <div className={s.quantity}>
+                    Quantity: 
+                    <div className={s.price}>
+                        {`${quantity} x ${price}`}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CardItemCheckout
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index f3d73ad96..b4d2591cb 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -33,3 +33,4 @@ export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm"
 export { default as ModalInfo} from "./ModalInfo/ModalInfo"
 export { default as ProductList} from "./ProductList/ProductList"
 export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
+export { default as CardItemCheckout} from './CardItemCheckout/CardItemCheckout'