diff --git a/donutshop/app/components/FavCard.tsx b/donutshop/app/components/FavCard.tsx
new file mode 100644
index 0000000..4a85adc
--- /dev/null
+++ b/donutshop/app/components/FavCard.tsx
@@ -0,0 +1,60 @@
+import { ImageProps, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import FavImgBackground from "../components/FavImgBackground";
+
+
+interface FavoritesItemCardProps {
+    id: string;
+    image_item: ImageProps;
+    name: string;
+    donutname: string;
+    type: string;
+    calories: string
+    average_rating: number;
+    ratings_count: string;
+    description: string;
+    favourite: boolean;
+    ToggleFavouriteItem: any;
+  }
+
+const FavCard: React.FC<FavoritesItemCardProps> = ({
+    id,
+    image_item,
+    name,
+    donutname,
+    type,
+    calories,
+    average_rating,
+    ratings_count,
+    description,
+    favourite,
+    ToggleFavouriteItem,
+}) => {
+
+
+  return (
+    <View style={{overflow: 'hidden'}}>
+      <FavImgBackground 
+        EnableBackHandler={false}
+        id={id}
+        image_item={image_item}
+        name={name}
+        donutname={donutname}
+        type={type}
+        calories={calories}
+        average_rating={average_rating}
+        ratings_count={ratings_count}
+        description={description}
+        favourite={favourite}
+        ToggleFavourite={ToggleFavouriteItem}
+      />
+      <View style={{paddingHorizontal: 20, borderBottomWidth:1, borderColor: '#EEEEEE'}}>
+        <Text style={{fontSize: 16, color: 'gray', marginVertical: 30}}>{description}</Text>
+      </View>
+    </View>
+  )
+}
+
+export default FavCard
+
+const styles = StyleSheet.create({})
\ No newline at end of file
diff --git a/donutshop/app/components/FavImgBackground.tsx b/donutshop/app/components/FavImgBackground.tsx
new file mode 100644
index 0000000..068f998
--- /dev/null
+++ b/donutshop/app/components/FavImgBackground.tsx
@@ -0,0 +1,79 @@
+import { ImageBackground, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { AntDesign } from '@expo/vector-icons';
+
+
+interface FavImgBackgroundProps {
+    EnableBackHandler: boolean;
+    id: string;
+    image_item: ImageProps;
+    name: string;
+    donutname: string;
+    type: string;
+    calories: string;
+    average_rating: number;
+    ratings_count: string;
+    description: string;
+    favourite: boolean;
+    ToggleFavourite: any;
+    BackHandler?: any;
+  }
+
+
+const FavImgBackground: React.FC<FavImgBackgroundProps> = ({
+    EnableBackHandler,
+    id,
+    image_item,
+    name,
+    donutname,
+    calories,
+    type,
+    average_rating,
+    ratings_count,
+    description,
+    favourite,
+    ToggleFavourite,
+    BackHandler,
+
+}) => {
+
+  return (
+    <View>
+      <ImageBackground source={image_item} style={{width: '100%', aspectRatio: 1, justifyContent: 'space-between', }}>
+        {EnableBackHandler? (
+            <View style={{padding: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',}}>
+                <Pressable onPress={() => {BackHandler()}}>
+                    <AntDesign name="left" size={24} color="gray" />
+                </Pressable>
+                <Pressable onPress={() => {ToggleFavourite(favourite, type, id);}}>
+                    <AntDesign name="heart" size={24} color="#EF5A6F" />
+                </Pressable>
+            </View>
+        ):(
+            <View style={{padding: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end',}}>
+                <Pressable onPress={() => {ToggleFavourite(favourite, type, id);}}>
+                    <AntDesign name="heart" size={24} color="#EF5A6F" />
+                </Pressable>
+            </View>
+        )}
+        <View style={{paddingVertical: 10, paddingHorizontal: 10, backgroundColor: 'rgba(255, 255, 255, 0.8)', borderTopLeftRadius: 10, borderTopRightRadius: 10}}>
+            <View style={{marginHorizontal: 10, marginVertical: 10}}>
+                <Text style={{color: '#DA7297', fontSize: 22, fontWeight: 500}}>{donutname || name}</Text>    
+            </View>
+            <View style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 10, marginVertical: 10}}>
+                <Text style={{color: '#DA7297', fontSize: 18}}>{calories} calories</Text>
+                <View style={{flexDirection: 'row', gap: 3, alignItems: 'center'}}>
+                    <AntDesign name="star" size={20} color="#EF5A6F"/>
+                    <Text style={{color: '#DA7297', textAlign: 'right', fontSize: 18}}>{average_rating}</Text>
+                    <Text style={{color: 'gray', fontSize: 12}}>({ratings_count})</Text>
+                </View>
+            </View>
+        </View>
+      </ImageBackground>
+    </View>
+  )
+}
+
+export default FavImgBackground
+
+const styles = StyleSheet.create({})
\ No newline at end of file
diff --git a/donutshop/app/screen/Cart.tsx b/donutshop/app/screen/Cart.tsx
index 578eb57..4aee765 100644
--- a/donutshop/app/screen/Cart.tsx
+++ b/donutshop/app/screen/Cart.tsx
@@ -1,7 +1,6 @@
 import { View, Text, ScrollView, Image, Pressable} from 'react-native'
 import React from 'react'
 import { useStore } from '../store/store';
-import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import Payment from '../components/Payment';
 import CartItem from '../components/CartItem';
 
@@ -15,13 +14,22 @@ const Cart = ({navigation, route}: any) => {
   const addCartItemQuantity = useStore((state: any) => state.addCartItemQuantity);
   const removeCartItemQuantity = useStore((state: any) => state.removeCartItemQuantity);
   const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
-
-  const tabBarHeight = useBottomTabBarHeight();
   //console.log("CartList =", CartList.length)
 
   const buttonPressHandler = () => {
     navigation.push('payment');
   }
+  //add to cart functionality
+  const addCartItemQuantityHandler = (id: string, size: string) => {
+    addCartItemQuantity(id, size);
+    calculateCartPrice();
+  };
+  //remove from cart functionality
+  const removeCartItemQuantityHandler = (id: string, size: string) => {
+    removeCartItemQuantity(id, size);
+    calculateCartPrice();
+  };
+
 
   return (
     <View style={{flex: 1, backgroundColor: 'white'}}>
@@ -32,12 +40,14 @@ const Cart = ({navigation, route}: any) => {
             {CartList.length == 0 ? (
               <View style={{marginVertical: 50, alignItems: 'center'}}>
                 <Image source={require('../../assets/images/misc/empty_bag.png')} style={{ width: 200, height: 200, resizeMode: "contain"}}  />
-                <Text style={{marginTop: 30, fontSize: 16, fontWeight: 500}}>You bag is empty!</Text>
+                <Text style={{marginTop: 30, fontSize: 16, fontWeight: 500}}>Your cart is empty!</Text>
               </View>
               ):(
               <View style={{gap: 10, marginTop: 20}}>
                 {CartList.map((data: any)=> (
-                  <Pressable key={data.id} onPress={() => {}}>
+                  <Pressable key={data.id} onPress={() => {
+                    navigation.push('detail', {index: data.index, id:data.id, type: data.type})
+                  }}>
                     <CartItem 
                       id = {data.id}
                       name = {data.name}
@@ -45,8 +55,8 @@ const Cart = ({navigation, route}: any) => {
                       prices = {data.prices}
                       type = {data.type}
                       image_item = {data.image_item}
-                      addCartItemQuantityHandler = {() => {}}
-                      removeCartItemQuantityHandler = {() => {}}
+                      addCartItemQuantityHandler = {addCartItemQuantityHandler}
+                      removeCartItemQuantityHandler = {removeCartItemQuantityHandler}
                     />
                   </Pressable>
                 ))}
diff --git a/donutshop/app/screen/Favorite.tsx b/donutshop/app/screen/Favorite.tsx
index ae21225..ff86115 100644
--- a/donutshop/app/screen/Favorite.tsx
+++ b/donutshop/app/screen/Favorite.tsx
@@ -1,10 +1,60 @@
-import { View, Text } from 'react-native'
-import React from 'react'
+import { View, Text, ScrollView, Image, Pressable } from 'react-native';
+import React from 'react';
+import { useStore } from '../store/store';
+import FavCard from "../components/FavCard";
+
+
+
+
+const Favorite = ({navigation}: any) => {
+  const FavoriteList = useStore((state: any) => state.FavoriteList);
+  const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);
+  const deleteFromFavoriteList = useStore((state: any) => state.deleteFromFavoriteList);
+
+  const ToggleFavourite = (favourite: boolean, type: string, id: string) => {
+    favourite ? deleteFromFavoriteList(type, id) : addToFavoriteList(type, id)
+  };
+
+
+
 
-const Favorite = () => {
   return (
-    <View>
-      <Text>Favorite</Text>
+    <View style={{flex: 1, backgroundColor: 'white'}}>
+      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
+        <View style={{flex: 1, justifyContent: 'space-between'}}>
+          <View style={{marginTop: 20, paddingVertical: 10}}>
+            <Text style={{paddingHorizontal: 20, fontSize: 30, fontWeight: 600}}>Favorite List</Text>
+            {FavoriteList.length == 0 ? (
+              <View style={{marginVertical: 50, alignItems: 'center'}}>
+                <Image source={require('../../assets/images/misc/fav.png')} style={{ width: 200, height: 200, resizeMode: "contain"}}  />
+                <Text style={{marginTop: 30, fontSize: 16, fontWeight: 500}}>Your have no favorite list!</Text>
+              </View>
+              ):(
+              <View style={{gap: 10, marginTop: 20}}>
+                {FavoriteList.map((data: any)=> (
+                  <Pressable key={data.id} onPress={() => {
+                    navigation.push('detail', {index: data.index, id:data.id, type: data.type})
+                  }}>
+                    <FavCard 
+                      id={data.id}
+                      image_item={data.image_item}
+                      name={data.name}
+                      donutname={data.donutname}
+                      type={data.type}
+                      calories={data.calories}
+                      average_rating={data.average_rating}
+                      ratings_count={data.ratings_count}
+                      description={data.description}
+                      favourite={data.favourite}
+                      ToggleFavouriteItem={ToggleFavourite}
+                    />
+                  </Pressable>
+                ))}
+              </View>
+            )}
+          </View>
+        </View>
+      </ScrollView>
     </View>
   )
 }