diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss
new file mode 100644
index 000000000..564a21d9a
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss
@@ -0,0 +1,15 @@
+@import '../../../../styles/utilities';
+
+.deliveryItem {
+    @apply flex bg-gray items-center;
+    border-radius: 50% 20% 60% 2%/ 10% 20% 10% 50%;
+    margin-bottom: 1.6rem;
+}
+
+.separator {
+    border-left: 2px dashed #EBEBEB;
+    margin-left: 2.4rem;
+    margin-right: 2.4rem;
+    max-height: 9.2rem;
+    min-height: 8.6rem;
+}
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.tsx b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
new file mode 100644
index 000000000..781861f47
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/DeliveryItem.tsx
@@ -0,0 +1,30 @@
+import React from "react"
+import s from './DeliveryItem.module.scss'
+
+import IdAndStatus from './components/IdAndStatus/IdAndStatus'
+import Products from './components/Products/Products'
+import TotalPrice from './components/TotalPrice/TotalPrice'
+import ReOrder from './components/ReOrder/ReOrder'
+
+
+interface DeliveryItemProps {
+    id: string;
+    status: "waiting" | "delivering" | "delivered";
+    products: string[];
+    totalPrice: number;
+    reOrderLink?: string;
+}
+
+const DeliveryItem = ({ id, status, products, totalPrice, reOrderLink } : DeliveryItemProps) => {
+    return (
+        <section className={s.deliveryItem}>
+            <IdAndStatus id={id} status={status} />
+            <div className={s.separator}></div>
+            <Products products={products} />
+            <TotalPrice totalPrice={totalPrice} />
+            <ReOrder show={status==="delivered" ? "show" : ""} href={reOrderLink} />
+        </section>
+    )
+}
+
+export default DeliveryItem
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
new file mode 100644
index 000000000..a7d5cd989
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
@@ -0,0 +1,30 @@
+@import '../../../../../../styles/utilities';
+
+.idAndStatus {
+    @apply items-center;
+    padding: 2.4rem 0 2.4rem 2.4rem;
+
+    .id {
+        @apply font-bold;
+        margin-bottom: .8rem;
+    }
+
+    .deliveryStatus {
+        @apply font-bold text-white;
+        font-size: 1.2rem;
+        line-height: 2rem;
+        padding: 0 .8rem;
+        border-radius: 0.5rem;
+        width: fit-content;
+
+        &.waiting {
+            background-color: #D9A645;
+        }
+        &.delivering {
+            background-color: var(--info-dark);
+        }
+        &.delivered {
+            background-color: var(--positive);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
new file mode 100644
index 000000000..841dd530f
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
@@ -0,0 +1,25 @@
+import classNames from "classnames"
+import React from "react"
+import s from './IdAndStatus.module.scss'
+
+
+interface IdAndStatusProps {
+    id?: string;
+    status: "waiting" | "delivering" | "delivered";
+}
+
+const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
+    return (
+        <div className={s.idAndStatus}>
+            <div className={s.id}>
+                {id}
+            </div>
+            <div className={classNames(s.deliveryStatus, {
+                [s[status]]: status
+            })}> {status}
+            </div>
+        </div>
+    )
+}
+
+export default IdAndStatus
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/Products/Products.tsx b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx
new file mode 100644
index 000000000..a9dcc70dc
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/Products/Products.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+interface ProductsProps {
+    products: string[];
+}
+
+const Products = ({ products } : ProductsProps) => {
+
+    function toString(products:string[]): string {
+        let strProducts = "";
+        products.map((prod, i) => {
+            if (i === 0) {
+                strProducts += prod;
+            } else {
+                strProducts += `, ${prod}`
+            }
+        });
+        return strProducts;
+    }
+
+    return (
+        <div className="products">
+            {toString(products)}
+        </div>
+    )
+}
+
+export default Products
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
new file mode 100644
index 000000000..ddb3100d1
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
@@ -0,0 +1,17 @@
+@import '../../../../../../styles/utilities';
+
+.reOrder {
+    @apply text-white custom-border-radius hidden;
+    padding: .8rem 1.2rem;
+    margin-right: 2.4rem;
+    background-color: var(--positive);
+
+    &.show {
+        @apply block;
+    }
+
+    &:hover {
+        @apply cursor-pointer;
+    }
+
+}
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx
new file mode 100644
index 000000000..f3dda4b81
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.tsx
@@ -0,0 +1,21 @@
+import classNames from "classnames"
+import React from "react"
+import s from './ReOrder.module.scss'
+
+
+interface ReOrderProps {
+    show: string;
+    href?: string;
+}
+
+const ReOrder = ({ show="" ,href } : ReOrderProps) => {
+    return (
+        <div className={classNames(s.reOrder, {
+            [s[show]]: show
+        })}>
+            Re-Order
+        </div>
+    )
+}
+
+export default ReOrder
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss
new file mode 100644
index 000000000..b4d128781
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss
@@ -0,0 +1,10 @@
+@import '../../../../../../styles/utilities';
+
+.totalPrice {
+    margin-left: auto; 
+    margin-right: 2.4rem;
+
+    .price {
+        @apply font-bold sub-headline;
+    }
+}
\ No newline at end of file
diff --git a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.tsx b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.tsx
new file mode 100644
index 000000000..153149e85
--- /dev/null
+++ b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.tsx
@@ -0,0 +1,18 @@
+import React from "react"
+import s from './TotalPrice.module.scss'
+
+
+interface TotalPriceProps {
+    totalPrice: number;
+}
+
+const TotalPrice = ({ totalPrice } : TotalPriceProps) => {
+    return (
+        <section className={s.totalPrice}>
+            <div className="text-right">Total</div>
+            <div className={s.price}>Rp {totalPrice}</div>
+        </section>
+    )
+}
+
+export default TotalPrice
\ No newline at end of file