diff --git a/CustomerWebApp/package.json b/CustomerWebApp/package.json
index 92b5daf..fe89bbb 100644
--- a/CustomerWebApp/package.json
+++ b/CustomerWebApp/package.json
@@ -27,7 +27,7 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
diff --git a/CustomerWebApp/src/components/CustomizeCard/CustomizeCard.js b/CustomerWebApp/src/components/CustomizeCard/CustomizeCard.js
index 11173ae..43a20b6 100644
--- a/CustomerWebApp/src/components/CustomizeCard/CustomizeCard.js
+++ b/CustomerWebApp/src/components/CustomizeCard/CustomizeCard.js
@@ -1,37 +1,139 @@
 import { Box, Grid, Divider, Button, ButtonBase, Typography, useTheme, Radio, RadioGroup } from "@material-ui/core";
-import React from "react";
+import React, { useState, useContext } from "react";
+import { gql, useMutation } from "@apollo/client";
+import { placeOrder } from "../../apollo/graphQL";
+import { UserContext } from "../../context/User";
+import { createAddress } from "../../apollo/graphQL";
+
+
 import useStyles from "./styles";
 
 const image = ['https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg', 'https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg', 'https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg', 'https://res.cloudinary.com/do1ia4vzf/image/upload/v1619174168/food/kjzgiugla2gteg1yvihk.jpg']
 
 function CustomizeCard(props) {
+    const { profile } = useContext(UserContext)
+    console.log(profile)
+    const [cartDetails, setCartDetails] = useState({})
+    console.log(props.data.item.variations)
+    console.log(props.data.id)
+    console.log(props.data.title)
+    const [orderDetails, setOrderDetails] = useState({ restaurant: "", meal: "", variations: [] })
+    const [quantities, setQuantities] = useState(props.data.item.variations.map(() => 0));
+    const [totalBill, setTotalBill] = useState(0)
+
+
     const theme = useTheme();
     const classes = useStyles();
 
+    const updateQuantity = (index, newQuantity, price) => {
+        const newQuantities = [...quantities];
+        newQuantities[index] = newQuantity >= 0 ? newQuantity : 0;
+        setQuantities(newQuantities);
+    };
+
+
+    const updateCart = async () => {
+        console.log(quantities)
+        setOrderDetails({ restaurant: props.data.item.title })
+        var tempTotal = 0;
+        props.data.item.variations.map((variation, index) => (
+            tempTotal = tempTotal + ((variation.price) * (quantities[index]))
+        ))
+        setTotalBill(tempTotal)
+        
+    }
+
     return (
         <Grid container direction="row" className={classes.center}>
             <Grid container item xs={10}>
                 <Box className={classes.mt3} />
-                <Typography color="textPrimary" variant="h6" className={classes.subText}>{'KFC Meal'}</Typography>
+                {orderDetails.title}
+                <Typography color="textPrimary" variant="h6" className={classes.subText}>{props.data.item.title + ' Meal'}</Typography>
                 <Box display="block" className={classes.mt3} />
             </Grid>
+            {console.log(quantities)}
             <Grid container item xs={8}>
                 <Box display="block" className={classes.mt3} />
                 <Box display="flex" style={{ width: '100%' }} alignItems="center" justifyContent="space-between">
-                    <Typography color="textPrimary">{'KFC Meal(Midnight)'}</Typography>
-                    <Typography color="primary" className={classes.subText}>{'$122.45'}</Typography>
+                    <Typography color="textPrimary">{props.data.item.title + ' Meal(Midnight)'}</Typography>
+                    <Typography color="textPrimary">{'Total'}</Typography>
+                    <Typography color="primary" className={classes.subText}>{totalBill}</Typography>
+                    <Typography color="textPrimary">{'Restaurant'}</Typography>
+                    <Typography color="primary" className={classes.subText}>{props.data.title}</Typography>
                 </Box>
                 <Box className={classes.mv2} />
-                <Typography variant="subtitle2" color="textSecondary">{'Double Zinger Pattie Burger with regular drink'}</Typography>
-                <Box display="block" className={classes.mt3}>
+                <Typography variant="subtitle2" color="textSecondary">{props.data.item.description}</Typography>
+                {props.data.item.variations.length > 0 ? (
+                    props.data.item.variations.map((variation, index) => (
+                        <><Box display="block" className={classes.mt3}>
+                            <Typography color="textPrimary">{'Select Variation'}<Typography display="inline" color="textSecondary">(Optional)</Typography></Typography>
+                        </Box>
+                            <Grid item xs={12}>
+                                <ButtonBase >
+                                    <Box display="flex" alignItems="center">
+                                        <Radio color="primary" checked={true} />
+                                        <Typography variant="body1" color="textSecondary">
+                                            {variation.title}
+                                        </Typography>
+                                        <Typography color="primary" className={classes.variationPrice}>{'$' + variation.price}</Typography>
+                                    </Box>
+                                </ButtonBase>
+                            </Grid>
+                            <Grid xs={12} alignItems="center" justify="space-between" container item>
+                                <Grid container alignItems="center" justify="space-between" item xs={5} >
+                                    <Button
+                                        variant="contained"
+                                        disableElevation
+                                        size="small"
+                                        className={classes.subBtn}
+                                        onClick={(e) => {
+                                            updateQuantity(index, quantities[index] - 1, variation.price);
+                                        }}
+                                    >
+                                        <Typography
+                                            align="center"
+                                            color="textSecondary"
+                                            className={classes.pH}
+                                        >
+                                            -
+                                        </Typography>
+                                    </Button>
+
+                                    <Typography>
+                                        {quantities[index]}
+                                    </Typography>
+                                    <Button
+                                        variant="contained"
+                                        disableElevation
+                                        size="small"
+                                        className={classes.subBtn}
+                                        onClick={(e) => {
+                                            updateQuantity(index, quantities[index] + 1, variation.price);
+                                        }}
+                                    >
+                                        <Typography
+                                            align="center"
+                                            color="textSecondary"
+                                        >
+                                            +
+                                        </Typography>
+                                    </Button>
+                                </Grid>
+
+                            </Grid>
+                        </>
+                    ))
+                ) : (<></>)}
+
+                {/*<Box display="block" className={classes.mt3}>
                     <Typography color="textPrimary">{'Select Variation'}<Typography display="inline" color="textSecondary">(Optional)</Typography></Typography>
-                </Box>
+    </Box>
                 <Grid item xs={12}>
                     <ButtonBase >
                         <Box display="flex" alignItems="center">
                             <Radio color="primary" checked={true} />
                             <Typography variant="body1" color="textSecondary">
-                                Small Cheese
+                                Small
                         </Typography>
                         </Box>
                     </ButtonBase>
@@ -42,7 +144,7 @@ function CustomizeCard(props) {
                         <Box display="flex" alignItems="center">
                             <Radio color="primary" checked={true} />
                             <Typography variant="body1" color="textSecondary">
-                                Medium Cheese
+                                Medium
               </Typography>
                         </Box>
 
@@ -53,12 +155,12 @@ function CustomizeCard(props) {
                         <Box display="flex" alignItems="center">
                             <Radio color="primary" checked={true} />
                             <Typography variant="body1" color="textSecondary">
-                                Large Cheese
+                                Large 
                         </Typography>
                         </Box>
 
                     </ButtonBase>
-                </Grid>
+                </Grid>*/}
                 <Divider style={{ width: '100%' }} className={classes.mt3} orientation="horizontal" />
                 <Box className={classes.mv2} />
                 <Grid item xs={12}>
@@ -71,7 +173,7 @@ function CustomizeCard(props) {
                                 <Radio color="primary" checked={true} />
                                 <Typography variant="body1" color="textSecondary">
                                     Pepsi
-                        </Typography>
+                                </Typography>
                             </Box>
 
                         </ButtonBase>
@@ -82,75 +184,26 @@ function CustomizeCard(props) {
                                 <Radio color="primary" checked={true} />
                                 <Typography variant="body1" color="textSecondary">
                                     Coke
-                        </Typography>
+                                </Typography>
                             </Box>
 
                         </ButtonBase>
                     </Grid>
-                </Grid>
-                <Grid xs={12} alignItems="center" justify="space-between" container item>
-                    <Grid container alignItems="center" justify="space-between" item xs={5} >
-                        <Button
-                            variant="contained"
-                            disableElevation
-                            size="small"
-                            className={classes.subBtn}
-                            onClick={(e) => {
-                                e.preventDefault();
-                            }}
-                        >
-                            <Typography
-                                align="center"
-                                color="textSecondary"
-                                className={classes.pH}
-                            >
-                                -
-                        </Typography>
-                        </Button>
-
-                        <Typography>
-                            {2}
-                        </Typography>
-                        <Button
-                            variant="contained"
-                            disableElevation
-                            size="small"
-                            className={classes.subBtn}
-                            onClick={(e) => {
-                                e.preventDefault();
-                            }}
-                        >
-                            <Typography
-                                align="center"
-                                color="textSecondary"
-                            >
-                                +
-                        </Typography>
-                        </Button>
-                    </Grid>
-                    <Grid container alignItems="center" justify="space-between" item xs={6}>
-                        <Button
-                            variant="contained"
-                            color="secondary"
-                            disableElevation
-                            fullWidth
-                            className={classes.chatBtn}
-                            onClick={(e) => {
-                                e.preventDefault();
-                            }}
-                        >
-                            <Typography
-                                align="center"
-                            >
-                                Add To Cart
-            </Typography>
-                        </Button>
-                    </Grid>
+                    <Button
+                        variant="contained"
+                        color="secondary"
+                        disableElevation
+                        className={classes.chatBtn}
+                        onClick={() => updateCart()}
+                    >
+                        <Typography align="center">Add To Cart</Typography>
+                    </Button>
                 </Grid>
             </Grid>
         </Grid>
 
+
     );
 }
 
-export default CustomizeCard;
+export default CustomizeCard;
\ No newline at end of file
diff --git a/CustomerWebApp/src/components/CustomizeCard/styles.js b/CustomerWebApp/src/components/CustomizeCard/styles.js
index 7ba6cae..0f5ea36 100644
--- a/CustomerWebApp/src/components/CustomizeCard/styles.js
+++ b/CustomerWebApp/src/components/CustomizeCard/styles.js
@@ -82,6 +82,10 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: theme.palette.primary.light,
     },
   },
+  variationPrice: {
+    fontWeight: 700,
+    marginLeft: 20
+  }
 }));
 
 export default useStyles;
diff --git a/CustomerWebApp/src/components/OrderDetail/DetailCard.js b/CustomerWebApp/src/components/OrderDetail/DetailCard.js
index ae27f49..ce375fd 100644
--- a/CustomerWebApp/src/components/OrderDetail/DetailCard.js
+++ b/CustomerWebApp/src/components/OrderDetail/DetailCard.js
@@ -6,6 +6,7 @@ import { UserContext } from "../../context/User";
 import useStyles from "./styles";
 
 function DetailCard(props) {
+  console.log(props)
   const classes = useStyles();
   const navigation = useHistory();
   const { isLoggedIn } = useContext(UserContext);
@@ -84,3 +85,4 @@ function DetailCard(props) {
 }
 
 export default DetailCard;
+
diff --git a/CustomerWebApp/src/components/OrderDetail/ItemsContainer.js b/CustomerWebApp/src/components/OrderDetail/ItemsContainer.js
index 0c64ef1..9f18a2c 100644
--- a/CustomerWebApp/src/components/OrderDetail/ItemsContainer.js
+++ b/CustomerWebApp/src/components/OrderDetail/ItemsContainer.js
@@ -1,12 +1,15 @@
 import { Box, Grid, Paper, Button, Typography, useTheme } from "@material-ui/core";
-import React, {useState, useContext} from "react";
+import React, { useState, useContext } from "react";
 import Skeleton from '@material-ui/lab/Skeleton';
 import useStyles from "./styles";
 import { Link as RouterLink } from "react-router-dom";
-import {foods  } from "../../apollo/graphQL";
+import { foods } from "../../apollo/graphQL";
 import { gql, useQuery } from "@apollo/client";
 import { get } from "lodash";
 import ConfigurationContext from "../../context/Configuration";
+import CustomizeCard from "../CustomizeCard/CustomizeCard";
+import { Link } from 'react-router-dom';
+
 
 // constants
 const FOODS = gql`
@@ -15,24 +18,25 @@ const FOODS = gql`
 
 function ItemContainer(props) {
     const theme = useTheme();
+    console.log(props.title)
     const classes = useStyles();
     const [filters, setFilters] = useState({})
     const { loading, error, data, refetch, networkStatus } = useQuery(FOODS, {
         variables: { category: props._id, ...filters }
-      })
+    })
     const configuration = useContext(ConfigurationContext)
-      console.log('data', data)
+    console.log('data', data)
 
-   if(loading)
-   return  (
-   <>
-   <Skeleton variant="text"  style={{borderRadius:20,width:'20%',borderTopRightRadius:20}} />
-   <Skeleton variant="text"  style={{borderRadius:20,width:'20%',borderTopRightRadius:20}} />
-   <Skeleton variant="text" height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} />
-   <Skeleton height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} />
-   <Skeleton height={100} style={{borderRadius:20,width:'80%',borderTopRightRadius:20}} />
-   </>
-   )   
+    if (loading)
+        return (
+            <>
+                <Skeleton variant="text" style={{ borderRadius: 20, width: '20%', borderTopRightRadius: 20 }} />
+                <Skeleton variant="text" style={{ borderRadius: 20, width: '20%', borderTopRightRadius: 20 }} />
+                <Skeleton variant="text" height={100} style={{ borderRadius: 20, width: '80%', borderTopRightRadius: 20 }} />
+                <Skeleton height={100} style={{ borderRadius: 20, width: '80%', borderTopRightRadius: 20 }} />
+                <Skeleton height={100} style={{ borderRadius: 20, width: '80%', borderTopRightRadius: 20 }} />
+            </>
+        )
 
     return (
         <Grid container direction="row">
@@ -41,24 +45,25 @@ function ItemContainer(props) {
                 <Typography color="secondary" className={classes.lightText}>{'Deal Contains'}</Typography>
                 {
                     data?.foodByCategory && data?.foodByCategory.map((item, index) => (
-                        <RouterLink to={{ pathname: `/Customize` }} className={classes.link}>
-                        <Paper elevation={3} style={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', padding: 10, height: 80, borderRadius: 20 }} className={classes.mv2} >
-                            <img className={classes.ml} style={{ width: '25%', borderRadius: 20, height: '90%' }} src={item.img_url} />
-                            <Box className={classes.ml} style={{width:"60%"}}>
-                                <Typography noWrap>{item?.title}</Typography>
-                                <Typography noWrap variant="body2" className={classes.smallText} color="textSecondary">{item.description}</Typography>
-                                {/* {item.variations[0].discounted > 0 && (
+                        <Link to={{ pathname: '/Cart', state: { item, id: props._id, title: props.title } }} className={classes.link}>
+                            {console.log(item)}
+                            <Paper elevation={3} style={{ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', padding: 10, height: 80, borderRadius: 20 }} className={classes.mv2} >
+                                <img className={classes.ml} style={{ width: '25%', borderRadius: 20, height: '90%' }} src={item.img_url} />
+                                <Box className={classes.ml} style={{ width: "60%" }}>
+                                    <Typography noWrap>{item?.title}</Typography>
+                                    <Typography noWrap variant="body2" className={classes.smallText} color="textSecondary">{item.description}</Typography>
+                                    {/* {item.variations[0].discounted > 0 && (
                                 <Typography className={classes.subText} color="primary">{item.variations[0].price.toFixed(2)}</Typography>
                                 )} */}
-                                {/* {item.variations[0].discounted > 0 && ( */}
-                                <Box display="flex">
-                                <Typography className={classes.subText} color="textSecondary">{configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}{'  '}</Typography>
-                                <Typography className={classes.subText} color="primary">{configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}</Typography>
+                                    {/* {item.variations[0].discounted > 0 && ( */}
+                                    <Box display="flex">
+                                        <Typography className={classes.subText} color="textSecondary">{configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}{'  '}</Typography>
+                                        <Typography className={classes.subText} color="primary">{configuration.currency_symbol}{''} {item.variations[0].price.toFixed(2)}</Typography>
+                                    </Box>
+                                    {/* )} */}
                                 </Box>
-                                {/* )} */}
-                                </Box>
-                        </Paper>
-                        </RouterLink>
+                            </Paper>
+                        </Link>
                     ))
                 }
             </Grid>
@@ -67,4 +72,4 @@ function ItemContainer(props) {
     );
 }
 
-export default ItemContainer;
+export default ItemContainer;
\ No newline at end of file
diff --git a/CustomerWebApp/src/configuration/configurataion.js b/CustomerWebApp/src/configuration/configurataion.js
index 29df53a..3a703a5 100644
--- a/CustomerWebApp/src/configuration/configurataion.js
+++ b/CustomerWebApp/src/configuration/configurataion.js
@@ -1,5 +1,5 @@
-const SERVER_URL = "http://10.97.28.31:8000/";
-const WS_SERVER_URL = "ws://10.97.28.31:8000/";
+const SERVER_URL = "http://10.97.0.65:8000/";
+const WS_SERVER_URL = "ws://10.97.0.65:8000/";
 const GOOGLE_CLIENT_ID =
   "967541328677-ge2hpr0n095d0nro56kot0t4q388dsll.apps.googleusercontent.com";
 
diff --git a/CustomerWebApp/src/screens/Cart/Cart.js b/CustomerWebApp/src/screens/Cart/Cart.js
new file mode 100644
index 0000000..51ce57d
--- /dev/null
+++ b/CustomerWebApp/src/screens/Cart/Cart.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { useLocation } from 'react-router-dom';
+import { CustomizeCard } from '../../components'; 
+
+const Cart = () => {
+    const location = useLocation();
+  const item = location.state.item;
+  const id = location.state.id
+  const title = location.state.title
+  console.log(title)
+  return (
+    <div>
+        <CustomizeCard data={{item, id, title}}/>
+    </div>
+  )
+}
+
+export default Cart
\ No newline at end of file
diff --git a/CustomerWebApp/src/screens/Customize/Cutomize.js b/CustomerWebApp/src/screens/Customize/Cutomize.js
index 1b0c383..d66d78e 100644
--- a/CustomerWebApp/src/screens/Customize/Cutomize.js
+++ b/CustomerWebApp/src/screens/Customize/Cutomize.js
@@ -6,6 +6,7 @@ import useStyles from "./styles";
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { useHistory } from "react-router-dom";
 
+
 function OrderDetail() {
     const theme = useTheme();
     const classes = useStyles();
@@ -44,3 +45,4 @@ function OrderDetail() {
 }
 
 export default OrderDetail;
+
diff --git a/CustomerWebApp/src/utils/constant.js b/CustomerWebApp/src/utils/constant.js
index 9dbb83e..23142b0 100644
--- a/CustomerWebApp/src/utils/constant.js
+++ b/CustomerWebApp/src/utils/constant.js
@@ -12,7 +12,7 @@ import {
   Settings,
   Signup,
 } from "../screens";
-
+import Cart from "../screens/Cart/Cart";
 const ROUTES = [
   {
     path: "/Login",
@@ -86,6 +86,12 @@ const ROUTES = [
     authRequired: true,
     accessRequired: false,
   },
+  {
+    path: "/Cart",
+    component: Cart,
+    authRequired: true,
+    accessRequired: false,
+  },
 ];
 
 const HEADER_NAV = [
@@ -114,6 +120,7 @@ const HEADER_NAV = [
     name: "Settings",
     navigate: "/Settings",
   },
+
 ];
 
 const HELP_NAV = [
@@ -157,4 +164,4 @@ const ADDRESS_LABEL = [
 const ACTIVE_ORDERS = ["PENDING", "PICKED", "ACCEPTED"];
 const INACTIVE_ORDERS = ["DELIVERED", "COMPLETED"];
 
-export { ROUTES, HEADER_NAV, HELP_NAV, ADDRESS_LABEL, ACTIVE_ORDERS, INACTIVE_ORDERS };
+export { ROUTES, HEADER_NAV, HELP_NAV, ADDRESS_LABEL, ACTIVE_ORDERS, INACTIVE_ORDERS };
\ No newline at end of file