diff --git a/next-env.d.ts b/next-env.d.ts
index c6643fda1..9bc3dd46b 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/src/components/common/TabCommon/TabCommon.module.scss b/src/components/common/TabCommon/TabCommon.module.scss
index d8b5d0f9a..ff90e8979 100644
--- a/src/components/common/TabCommon/TabCommon.module.scss
+++ b/src/components/common/TabCommon/TabCommon.module.scss
@@ -7,7 +7,7 @@
         .tabList {
             @apply flex;
             position: relative;
-            border-bottom: 2px solid #FBFBFB;
+            border-bottom: 2px solid #EBEBEB;
             padding: 0.8rem 0;
             &.center{
                 margin: auto;
diff --git a/src/components/modules/account/AccountPage/AccountPage.module.scss b/src/components/modules/account/AccountPage/AccountPage.module.scss
index 3f8307750..5eece6c80 100644
--- a/src/components/modules/account/AccountPage/AccountPage.module.scss
+++ b/src/components/modules/account/AccountPage/AccountPage.module.scss
@@ -6,6 +6,8 @@
     margin-top: -3.2rem;
     padding-top: 3.2rem;
     padding-bottom: 3.2rem;
+    min-height: 70rem;
+
 
     @screen md {
         padding-left: 3.2rem;
diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx
index 3b0948c40..c463b056a 100644
--- a/src/components/modules/account/AccountPage/AccountPage.tsx
+++ b/src/components/modules/account/AccountPage/AccountPage.tsx
@@ -5,9 +5,12 @@ import { HeadingCommon, TabPane } from "src/components/common"
 
 import AccountNavigation from '../AccountNavigation/AccountNavigation'
 import AccountInfomation from "./components/AccountInfomation/AccountInfomation"
+import FavouriteProducts from "./components/FavouriteProducts/FavouriteProducts"
 import OrderInfomation from './components/OrderInformation/OrderInformation'
 import EditInfoModal from './components/EditInfoModal/EditInfoModal'
 
+import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data';
+
 const waiting = [
     {
         id: "NO 123456",
@@ -74,7 +77,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
                         <OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
                     </TabPane>
                     <TabPane tabName="Favourite"> 
-                        {/* <FavoriteProduct active={activeTab === 2} favProducts={favProducts} /> */}
+                        <FavouriteProducts products={PRODUCT_CART_DATA_TEST}  />
                     </TabPane>
                 </AccountNavigation>
             </section>
diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
index 442dae2eb..466dc3127 100644
--- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
+++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.module.scss
@@ -38,6 +38,7 @@
 
     .shippingInfo {
         @apply heading-3 font-heading;
+        margin-bottom: .8rem;
     }
 
     .accountAddress {
diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
index f24b36216..dac651fea 100644
--- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
+++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx
@@ -21,34 +21,30 @@ const AccountInfomation = ({ account, onClick } : AccountInfomationProps) => {
 
     return (
         <section className={s.accountInfomation}>
-            {
-                <div>
-                    <div className={s.avatar}>
-                        <Image src={avatar} alt="avatar" />
-                    </div>
+            <div className={s.avatar}>
+                <Image src={avatar} alt="avatar" />
+            </div>
 
-                    <div className={s.accountName}>
-                        {account.name}  
-                    </div>
-                    <div className={s.accountEmail}>
-                        {account.email}  
-                    </div>
+            <div className={s.accountName}>
+                {account.name}  
+            </div>
+            <div className={s.accountEmail}>
+                {account.email}  
+            </div>
 
-                    <div className={s.horizontalSeparator}></div>
+            <div className={s.horizontalSeparator}></div>
 
-                    <div className={s.shippingInfo}>Shipping Infomation</div>
+            <div className={s.shippingInfo}>Shipping Infomation</div>
 
-                    <div className={s.accountAddress}>
-                        {account.address + `, ${account.state}, ${account.city}, ${account.postalCode}`}  
-                    </div>
+            <div className={s.accountAddress}>
+                {account.address + `, ${account.state}, ${account.city}, ${account.postalCode}`}  
+            </div>
 
-                    <div className={s.accountPhoneNumber}>
-                        {account.phoneNumber}  
-                    </div>
+            <div className={s.accountPhoneNumber}>
+                {account.phoneNumber}  
+            </div>
 
-                    <div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
-                </div>
-            }
+            <div onClick={showEditForm} className={s.editInfoBtn}>Edit</div>
         </section>
     )
 }
diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss
index fb67ab24c..1215ac2a3 100644
--- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss
+++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss
@@ -32,30 +32,7 @@
     }
 
     .buttons {
-        @apply flex;
-
-        .buttonCancel {
-            @apply bg-white text-center font-bold custom-border-radius-lg;
-            color: #141414;
-            border: 1px solid #141414;
-            padding: 1.6rem;
-            margin-right: 1.6rem;
-            width: 100%;
-            
-            &:hover {
-                @apply cursor-pointer;
-            }
-        }
-
-        .buttonSave {
-            @apply text-center font-bold custom-border-radius-lg;
-            background-color: var(--primary);
-            color: white;
-            padding: 1.6rem;
-            width: 100%;
-            &:hover {
-                @apply cursor-pointer;
-            }
-        }
+        @apply grid grid-cols-2;
+        grid-gap: 1.6rem;
     }
 }
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
index 5f88df01b..4f1b8296b 100644
--- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
+++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import s from './EditInfoModal.module.scss'
 
-import { ModalCommon, Inputcommon, SelectCommon } from '../../../../../common'
+import { ModalCommon, Inputcommon, SelectCommon, ButtonCommon } from '../../../../../common'
 
 interface EditInfoModalProps {
     accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string};
@@ -58,8 +58,8 @@ const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoMod
                 </div>
 
                 <div className={s.buttons}>
-                    <div onClick={closeModal} className={s.buttonCancel}>Cancel</div>
-                    <div onClick={saveInfo} className={s.buttonSave}>Save</div>
+                    <ButtonCommon onClick={closeModal} type="light" size="large" >Cancel</ButtonCommon>
+                    <ButtonCommon onClick={saveInfo} size="large" >Save</ButtonCommon>
                 </div>
             </section>
         </ModalCommon>
diff --git a/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss
new file mode 100644
index 000000000..e6eef3499
--- /dev/null
+++ b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.module.scss
@@ -0,0 +1,5 @@
+@import '../../../../../../styles/utilities';
+
+.favouriteProducts {
+   
+}
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx
new file mode 100644
index 000000000..f88605242
--- /dev/null
+++ b/src/components/modules/account/AccountPage/components/FavouriteProducts/FavouriteProducts.tsx
@@ -0,0 +1,20 @@
+import React from "react"
+import s from './FavouriteProducts.module.scss'
+import {ProductList} from '../../../../../common'
+import { ProductCardProps } from '../../../../../common/ProductCard/ProductCard'
+
+
+interface FavouriteProductsProps {
+    products: ProductCardProps[];
+}
+
+const FavouriteProducts = ({ products } : FavouriteProductsProps) => {
+
+    return (
+        <section className={s.favouriteProducts}>
+            <ProductList data={products} />
+        </section>
+    )
+}
+
+export default FavouriteProducts
\ No newline at end of file
diff --git a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
index 98f305b9e..211cebe3b 100644
--- a/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
+++ b/src/components/modules/account/AccountPage/components/OrderInformation/OrderInformation.tsx
@@ -16,48 +16,44 @@ const OrderInformation = ({ waiting, delivering, delivered} : OrderInformationPr
 
     return (
         <section className={s.orderInformation}>
-            {
-                <div>
-                    <div className={s.title}>Order Information</div>
+            <div className={s.title}>Order Information</div>
 
-                    <div className={s.tabs}>
-                        <TabCommon>
-                            <TabPane tabName={"Wait for Comfirmation"} >
-                                <div className={s.blank}></div>
-                                {
-                                    waiting.map((order, i) => {
-                                        return (
-                                            <DeliveryItem key={order.id} id={order.id} status="waiting" products={order.products} totalPrice={order.totalPrice} />
-                                        )
-                                    }) 
-                                }
-                            </TabPane>
+            <div className={s.tabs}>
+                <TabCommon>
+                    <TabPane tabName={"Wait for Comfirmation"} >
+                        <div className={s.blank}></div>
+                        {
+                            waiting.map((order, i) => {
+                                return (
+                                    <DeliveryItem key={order.id} id={order.id} status="waiting" products={order.products} totalPrice={order.totalPrice} />
+                                )
+                            }) 
+                        }
+                    </TabPane>
 
-                            <TabPane tabName={"Delivering"}>
-                                <div className={s.blank}></div>
-                                {
-                                    delivering.map((order, i) => {
-                                        return (
-                                            <DeliveryItem key={order.id} id={order.id} status="delivering" products={order.products} totalPrice={order.totalPrice} />
-                                        )
-                                    }) 
-                                }
-                            </TabPane>
+                    <TabPane tabName={"Delivering"}>
+                        <div className={s.blank}></div>
+                        {
+                            delivering.map((order, i) => {
+                                return (
+                                    <DeliveryItem key={order.id} id={order.id} status="delivering" products={order.products} totalPrice={order.totalPrice} />
+                                )
+                            }) 
+                        }
+                    </TabPane>
 
-                            <TabPane tabName={"Delivered"}>
-                                <div className={s.blank}></div>
-                                {
-                                    delivered.map((order, i) => {
-                                        return (
-                                            <DeliveryItem key={order.id} id={order.id} status="delivered" products={order.products} totalPrice={order.totalPrice} />
-                                        )
-                                    }) 
-                                }
-                            </TabPane>
-                        </TabCommon>
-                    </div>
-                </div>
-            }
+                    <TabPane tabName={"Delivered"}>
+                        <div className={s.blank}></div>
+                        {
+                            delivered.map((order, i) => {
+                                return (
+                                    <DeliveryItem key={order.id} id={order.id} status="delivered" products={order.products} totalPrice={order.totalPrice} />
+                                )
+                            }) 
+                        }
+                    </TabPane>
+                </TabCommon>
+            </div>
         </section>
     )
 }
diff --git a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss
index b83b77fd3..44cc3a5c9 100644
--- a/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss
+++ b/src/components/modules/account/DeliveryItem/DeliveryItem.module.scss
@@ -1,9 +1,8 @@
 @import '../../../../styles/utilities';
 
 .deliveryItem {
-    @apply flex bg-white items-center custom-border-radius;
+    @apply flex bg-white items-center shape-common;
     margin-bottom: 1.6rem;
-    border: 1px solid var(--primary)
 }
 
 .separator {
diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
index bc0d692b3..5e8cbdd83 100644
--- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
+++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.module.scss
@@ -2,11 +2,7 @@
 
 .idAndStatus {
     @apply items-center;
-    padding: 2.4rem 0 2.4rem 1rem;
-
-    @screen md {
-        padding: 2.4rem 0 2.4rem 1.2rem;
-    }
+    padding: 2.4rem 0 2.4rem 1.2rem;
 
     @screen lg {
         padding: 2.4rem 0 2.4rem 2.4rem;
diff --git a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
index 841dd530f..578c94f97 100644
--- a/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
+++ b/src/components/modules/account/DeliveryItem/components/IdAndStatus/IdAndStatus.tsx
@@ -5,10 +5,10 @@ import s from './IdAndStatus.module.scss'
 
 interface IdAndStatusProps {
     id?: string;
-    status: "waiting" | "delivering" | "delivered";
+    status: "Waiting" | "Delivering" | "Delivered";
 }
 
-const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
+const IdAndStatus = ({ id, status="Waiting" } : IdAndStatusProps) => {
     return (
         <div className={s.idAndStatus}>
             <div className={s.id}>
@@ -16,7 +16,7 @@ const IdAndStatus = ({ id, status="waiting" } : IdAndStatusProps) => {
             </div>
             <div className={classNames(s.deliveryStatus, {
                 [s[status]]: status
-            })}> {status}
+            })}> {status.charAt(0).toUpperCase() + status.slice(1)}
             </div>
         </div>
     )
diff --git a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
index b46b528e1..ce36380da 100644
--- a/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
+++ b/src/components/modules/account/DeliveryItem/components/ReOrder/ReOrder.module.scss
@@ -3,14 +3,9 @@
 .reOrder {
     @apply text-white custom-border-radius hidden font-bold;
     padding: .4rem .6rem;
-    margin-right: 1rem;
+    margin-right: 1.2rem;
     background-color: var(--primary);
 
-    @screen md {
-        padding: .4rem .6rem;
-        margin-right: 1.2rem;
-    }
-
     @screen lg {
         padding: .8rem 1.2rem;
         margin-right: 2.4rem;
diff --git a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss
index 9a4f795b3..e987f30c1 100644
--- a/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss
+++ b/src/components/modules/account/DeliveryItem/components/TotalPrice/TotalPrice.module.scss
@@ -2,11 +2,7 @@
 
 .totalPrice {
     margin-left: auto; 
-    margin-right: 1rem;
-
-    @screen md {
-        margin-right: 1.2rem;
-    }
+    margin-right: 1.2rem;
 
     @screen lg {
         margin-right: 2.4rem;