diff --git a/components/ProductLinkCard.js b/components/ProductLinkCard.js
index ee3fa5e..910a47d 100644
--- a/components/ProductLinkCard.js
+++ b/components/ProductLinkCard.js
@@ -1,101 +1,101 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
 import Card from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import CardContent from '@material-ui/core/CardContent';
-import CardMedia from '@material-ui/core/CardMedia';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import Button from '@material-ui/core/Button';
-import FileCopyIcon from '@material-ui/icons/FileCopy';
-import Grid from "@material-ui/core/Grid";
-import Typography from '@material-ui/core/Typography';
+import EmailOutlinedIcon from '@material-ui/icons/EmailOutlined';
+import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
 import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import config from "../config";
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import Paper from '@material-ui/core/Paper';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Typography from '@material-ui/core/Typography';
 
 
-const useStyles = makeStyles({
-    root: {
-        maxWidth: 400,
-    },
-    media: {
-        objectFit: 'cover',
-    },
-});
-
-const ProductLinkCard = ({  product, user, useCredits }) => {
+const ProductLinkCard = ({ link,  product, user, onSendEmailClick, calculatedAmountDetails }) => {
     
     const [open, setOpen] = React.useState(false);
 
-    const generatedLink = useCredits 
-                          ? `${config.domain}buy?productId=${product.id}&oneauthId=${user.oneauth_id}&userCredits=true`
-                          :  `${config.domain}buy?productId=${product.id}&oneauthId=${user.oneauth_id}`
- 
     const handleClick = () => {
-      setOpen(true);
-    };
+        setOpen(true);
+    }
 
     const handleClose = (event, reason) => {
-      if (reason === 'clickaway') {
-        return;
-      }
+        if (reason === 'clickaway') {
+          return;
+        }
 
       setOpen(false);
-    };
-
-    const classes = useStyles();
+    }
 
     return (
-        <div className={"d-flex col-md-8 offset-1 mt-5"}>
-
-        <Card className={classes.root} style={{width: '100%'}}>
+        <Card style={{width: '100%'}}>
             <CardActionArea>
-              <CardMedia
-                className={classes.media}
-                component="img"
-                alt=""
-                height="180"
-                image={product.image_url}
-                title="Link"
-              />
               <CardContent>
-                  <Grid container wrap="wrap" spacing={2}>
-                      <Grid item xs={6}>
-                       <b> Product </b>
-                        <ul>
-                            <li> Name: {product.name} </li>
-                            <li> Description: {product.description} </li>
-                            <li className="red"> Type: {product.type}</li>
-                            <li> Mrp: {product.mrp / 100}</li>
-
-                        </ul>
-                      </Grid>
-                      <Grid item xs={6}>
-                          <b> User </b>
-                          <ul>
-                              <li>UserName: {user.username}</li>
-                              <li>OneauthId: {user.oneauth_id}</li>
-                              <li>Email: {user.email}</li>
-                              <li>Wallet Amount: {user.wallet_amount / 100}</li>
-                          </ul>
-                      </Grid>
-                  </Grid>        
-                  <hr/>
-                  <Grid container wrap="wrap">
-                        <Grid item xs={10}>
-                            <Typography>
-                              {generatedLink}
-                            </Typography>
-                        </Grid>
-                        <Grid item xs={2}>
-                            <CopyToClipboard text={generatedLink}>
-                                  <Button onClick={handleClick} title="copy to clipboard">
-                                    <FileCopyIcon />
-                                  </Button>
-                            </CopyToClipboard>
-                        </Grid>
-                  </Grid>
+
+                <TableContainer>
+                      <Typography className={"ml-5 mt-2"} variant="h5" id="tableTitle" component="div">
+                          <b> {product.description} </b>
+                      </Typography>
+
+                      <Table aria-label="simple table">
+                          <TableHead>
+                            <TableRow>
+                              <TableCell align="center">Product Name</TableCell>
+                              <TableCell align="center">Product Mrp</TableCell>
+                              <TableCell align="center">Discount</TableCell>
+                              <TableCell align="center">Taxes</TableCell>
+                              <TableCell align="center">Credits</TableCell>
+                              <TableCell align="center">Amount To Pay</TableCell>
+                              <TableCell align="center">Type</TableCell>
+                            </TableRow>
+                          </TableHead>
+                          <TableBody>
+                              <TableRow key={product.id}>
+                                <TableCell component="th" scope="row" align="center">
+                                  {product.name}
+                                </TableCell>
+                                <TableCell align="center">{product.mrp / 100}</TableCell>
+                                <TableCell align="center">{calculatedAmountDetails.discount / 100}</TableCell>
+                                <TableCell align="center">{calculatedAmountDetails.tax /100}</TableCell>
+                                <TableCell align="center">{calculatedAmountDetails.creditsApplied /100 }</TableCell>
+                                <TableCell align="center" className={"red"}>{calculatedAmountDetails.amount /100}</TableCell>
+                                <TableCell align="center" className={"red"}><b>{product.type}</b></TableCell>
+                              </TableRow>
+                          </TableBody>
+                      </Table>
+                  </TableContainer>
+
+
+                  <div className={"row mt-4"}>
+                      <div className={"col-md-2 offset-1"}>
+                          <b>Product Buy Link: </b>
+                      </div>
+
+                      <div className={"col-md-6"}>
+                          <b style={{color: '#509EE3'}}>{link}</b>
+                          <CopyToClipboard text={link}>
+                                <Button onClick={handleClick} title="copy to clipboard">
+                                  <FileCopyOutlinedIcon />
+                                </Button>
+                          </CopyToClipboard>
+                      </div>
+
+                      
+                  </div>
+
+                  <div className={"divider-h mt-1"}></div>
+
                   <Snackbar
                       anchorOrigin={{
                         vertical: 'bottom',
@@ -113,10 +113,10 @@ const ProductLinkCard = ({  product, user, useCredits }) => {
                         </React.Fragment>
                     }
                   />
-              </CardContent>
+
+                </CardContent>
             </CardActionArea>
         </Card>
-        </div>
     );
 }
 
diff --git a/controllers/products.js b/controllers/products.js
index 2609b57..d20c5ed 100644
--- a/controllers/products.js
+++ b/controllers/products.js
@@ -1,6 +1,8 @@
 import {axios} from "../DukaanAPI";
 import ErrorHandler from "../helpers/ErrorHandler";
 import organizationController from './organizations';
+import userController from './users';
+
 
 const querystring = require('querystring');
 
@@ -131,6 +133,26 @@ const fetchCenters = (organizationId) => {
     return organizationController.getOrganizationCenters(organizationId)
 }
 
+const sendBuyLinkEmail = (data) => {
+    return axios.post("/api/v2/admin/products/productBuyLinkEmail", data)
+}
+
+const getUserCartDetailsUrls = (data) => {
+    return userController.getUserCartDetailsUrls(data)
+}
+
+const getProductBuyLinkData = (data) => {
+    return Promise.all ([
+            getUserCartDetailsUrls({id: data.userId}),
+            handleCalculatePrice({
+                oneauthId: data.oneauthId,
+                productId: data.productId,
+                quantity: data.quantity,
+                useCredits: data.useCredits
+            })
+        ])
+}
+
 module.exports = {
     handleGetProducts,
     handleAddProduct,
@@ -138,5 +160,8 @@ module.exports = {
     handleCalculatePrice,
     searchProducts,
     fetchGenerateLinkData,
-    fetchCenters
+    fetchCenters,
+    sendBuyLinkEmail,
+    getUserCartDetailsUrls,
+    getProductBuyLinkData
 }
diff --git a/controllers/users.js b/controllers/users.js
index 3b4348f..924c505 100644
--- a/controllers/users.js
+++ b/controllers/users.js
@@ -60,11 +60,27 @@ const updateUserDetails = (values) => {
 
 };
 
+const getUsersActiveCartDetailsUrl = (data) => {
+    return axios.get(`api/v2/admin/users/activeCartDetails`, {params: data})
+}
+
+const getUsersPurchasedProductsDetialsUrl = (data) => {
+    return axios.get(`api/v2/admin/users/purchasedProductsDetails`, {params: data})
+}
+
+const getUserCartDetailsUrls = (data) => {
+  return Promise.all([
+          getUsersActiveCartDetailsUrl(data),
+          getUsersPurchasedProductsDetialsUrl(data)
+      ])
+}
+
 module.exports = {
   handleGetUserByEmailOrPhone,
   handleAddUser,
   handleGetUserById,
   getUsernameAvailability,
   getUserByFromOneAuthByOneAuthId,
-  updateUserDetails
+  updateUserDetails,
+  getUserCartDetailsUrls
 };
diff --git a/forms/ProductLink.js b/forms/ProductLink.js
index 1188a1a..2a336d6 100644
--- a/forms/ProductLink.js
+++ b/forms/ProductLink.js
@@ -60,8 +60,17 @@ class ProductLinkForm extends React.Component {
         super(props)
     }
 
-    generateLink = () => {
-        this.props.ongenerateLinkClick()
+    generateLink = (fields) => {
+
+        const productId = fields.product.id
+        const oneauthId = fields.user.oneauth_id
+
+        let useCreditsQueryParams = ''
+        if (fields.applyCredits)
+            useCreditsQueryParams = '/useCredits=true'
+
+        const link = `${config.domain}buy?productId=${productId}&oneauthId=${oneauthId}${useCreditsQueryParams}`
+        this.props.ongenerateLink(link)
     }
 
     render() {
@@ -69,11 +78,11 @@ class ProductLinkForm extends React.Component {
         const { classes } = this.props;
 
         return (
-            <div className={"d-flex col-md-8 offset-1 mt-5"}>
+            <div className={"d-flex col-md-11 offset-1 mt-5"}>
                 <div className={"border-card"}>
                     <div className={"d-flex justify-content-center mt-1 mb-3 pb-3"}>
                         <h2 className={"title"}>
-                            Generate
+                            Generate Buy Link
                         </h2>
                     </div>
 
@@ -96,7 +105,7 @@ class ProductLinkForm extends React.Component {
                                         onClose={() => { this.props.onAutoCompleteClose('user') }}
                                         loading={this.props.selectUserOpen && !this.props.userSearchResults.length}
                                         value={values.user}
-                                        onChange={(e, value) => {
+                                        onChange={ (e, value) => {
                                             this.props.handleUserChange(e, value)
                                             setFieldValue("user", value) }
                                         }
diff --git a/pages/admin/products/generateLink.js b/pages/admin/products/generateLink.js
index 134cf54..69a7d94 100644
--- a/pages/admin/products/generateLink.js
+++ b/pages/admin/products/generateLink.js
@@ -1,5 +1,7 @@
 import React from 'react'
 import Head from '../../../components/head';
+import Backdrop from '@material-ui/core/Backdrop';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import Layout from "../../../components/layout";
 import ProductLinkForm from "../../../forms/ProductLink";
 import CheckLogin from "../../../components/CheckLogin";
@@ -8,8 +10,27 @@ import * as userController from '../../../controllers/users'
 import ProductLinkCard from "../../../components/ProductLinkCard"
 import ErrorHandler from "../../../helpers/ErrorHandler";
 import Swal from 'sweetalert2';
+import { withStyles } from '@material-ui/core';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import Paper from '@material-ui/core/Paper';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Typography from '@material-ui/core/Typography';
 
 
+const useStyles = theme => ({
+    backdrop: {
+        zIndex: theme.zIndex.drawer + 1,
+        color: '#fff',
+    },
+    title: {
+        // minWidth: 650,
+    },
+});
+
 class GenerateLink extends React.Component {
 
     constructor(props) {
@@ -28,12 +49,19 @@ class GenerateLink extends React.Component {
             product:'',
             user:'',
             useCredits:false,
-            generateLinkClicked:false
+            generatedLink: '',
+            generateLinkClicked:false,
+            activeCartIframeUrl: '',
+            purchasedProductIframeurl: '',
+            calculatedAmountDetails: '',
+            loading: false,
         }
     }
 
     componentDidMount() {
-        controller.fetchGenerateLinkData().then((organizations) => {
+        controller.fetchGenerateLinkData({
+            user_id: this.state.user_id
+        }).then((organizations) => {
             this.setState({
                 organizations: organizations.data,
             })
@@ -126,8 +154,10 @@ class GenerateLink extends React.Component {
 
     handleProductChange = async (event, value) => {
         this.setState({
-            product: value
-        });
+            product: value,
+        })
+
+        this.unsetGeneratedLink()
     }
 
 
@@ -157,37 +187,90 @@ class GenerateLink extends React.Component {
         }
     }
 
-    handleUserChange = (event, value) => {
+    handleUserChange =  (event, value) => {
+
         this.setState({
             user: value,
-        });
+        })
+        this.unsetGeneratedLink()
     }
 
     onApplyCreditsChange = (event) => {
         this.setState({
             useCredits: !JSON.parse(event.target.value)
         })
+        this.unsetGeneratedLink()
+    }
+
+    ongenerateLink = (link) => {
+
+        controller.getProductBuyLinkData({
+            userId: this.state.user.id,
+            oneauthId: this.state.user.oneauth_id,
+            productId: this.state.product.id,
+            quantity: 1,
+            useCredits: this.state.useCredits
+        }).then(([ [activeCartDetails, purchasedProductDetails], calculatedAmountDetails]) => {
+            this.setState({
+                activeCartIframeUrl: activeCartDetails.data.iframeUrl,
+                purchasedProductIframeurl: purchasedProductDetails.data.iframeUrl,
+                generatedLink: link,
+                generateLinkClicked: true,
+                calculatedAmountDetails: calculatedAmountDetails.data,
+                loading: true
+            })
+        })
     }
 
-    ongenerateLinkClick = () => {
+    unsetGeneratedLink = () => {
         this.setState({
-            generateLinkClicked: true
+            generatedLink: '',
+            generateLinkClicked: false
         })
     }
 
+    onSendEmailClick = () => {
+        controller.sendBuyLinkEmail({
+            user_id: this.state.user.id,
+            link: this.state.generatedLink
+        }).then((response) => {
+            Swal.fire({
+              title: "Success",
+              text: "Email sent successfully!",    
+              icon: "success",
+            });
+        }).catch((err) => {
+            Swal.fire({
+                type: "error",
+                title: "Error",
+                text: "Error sending email!"
+            });
+        })
+    }
+
+    hideSpinner = () => {
+        this.setState({
+          loading: false
+        });
+    };
+
     render() {
+        const { classes } = this.props;
+
         return (
             <div>
+
+
                 <Head title="Coding Blocks | Dukaan | Generate Product Link"/>
                 <Layout/>
                 <CheckLogin>
-                    <div className={"col-md-12"}>
 
-                        <div className={"d-flex justify-content-center mt-1 pt-3 pb-1"}>
-                            <h2 className={"title"}>Create Buy Link</h2>
-                        </div>
-                        
-                        <div className={"col-md-5 offset-1 pull-left"}>
+                    <Backdrop className={classes.backdrop} open={this.state.loading}>
+                        <CircularProgress color="inherit" />
+                    </Backdrop>
+
+                    <div className={"row"}>
+                        <div className={"col-md-3 pull-left"}>
                             <ProductLinkForm {...this.state}
                                 onOrganizationChange={this.onOrganizationChange}
                                 onCenterChange={this.onCenterChange}
@@ -198,26 +281,97 @@ class GenerateLink extends React.Component {
                                 handleUserChange={this.handleUserChange}
                                 handleProductChange={this.handleProductChange}
                                 onApplyCreditsChange={this.onApplyCreditsChange}
-                                ongenerateLinkClick={this.ongenerateLinkClick}
+                                ongenerateLink={this.ongenerateLink}
                             />
                         </div>
 
-                        <div className={"col-md-6 pull-right"}>
+                            { this.state.generateLinkClicked &&
+                            <div className={"col-md-9 pull-right mt-5"}>
 
-                            { this.state.generateLinkClicked && this.state.product && this.state.user &&
-                                <ProductLinkCard
-                                    product={this.state.product}
-                                    user={this.state.user}
-                                    useCredits={this.state.useCredits}
-                                />
-                            }
-                        </div>
+                                {!this.state.loading &&
+                                    
+                                <div className={"row mr-5"}>
+                                    <TableContainer component={Paper}>
+                                        <Typography className={"ml-5 mt-2"} variant="h5" id="tableTitle" component="div">
+                                            <b> User Details </b>
+                                        </Typography>
+
+                                        <Table className={classes.table} aria-label="simple table">
+                                            <TableHead>
+                                              <TableRow>
+                                                <TableCell align="center">Name</TableCell>
+                                                <TableCell align="center">Username</TableCell>
+                                                <TableCell align="center">Wallet Amount</TableCell>
+                                                <TableCell align="center">Oneauth Id</TableCell>
+                                                <TableCell align="center">Email</TableCell>
+                                                <TableCell align="center">Mobile Number</TableCell>
+                                                <TableCell align="center">Address</TableCell>
+                                              </TableRow>
+                                            </TableHead>
+                                            <TableBody>
+                                                <TableRow key={this.state.user.id}>
+                                                  <TableCell component="th" scope="row" align="center">
+                                                    {this.state.user.firstname} {this.state.user.lastname}
+                                                  </TableCell>
+                                                  <TableCell align="center">{this.state.user.username}</TableCell>
+                                                  <TableCell align="center">{this.state.user.wallet_amount /100}</TableCell>
+                                                  <TableCell align="center">{this.state.user.oneauth_id}</TableCell>
+                                                  <TableCell align="center">{this.state.user.email}</TableCell>
+                                                  <TableCell align="center">{this.state.user.mobile_number}</TableCell>
+                                                  <TableCell align="center">{this.state.user.permanent_address}</TableCell>
+                                                </TableRow>
+                                            </TableBody>
+                                        </Table>
+                                    </TableContainer>
+                                </div>
+                                }
+
+                                <div className={"row mr-5 mt-4"}>
+                                    <iframe
+                                        src={this.state.activeCartIframeUrl}
+                                        frameBorder="0"
+                                        onLoad={this.hideSpinner}
+                                        width="100%"
+                                        height="220"
+                                        allowtransparency='true'
+                                        >
+                                    </iframe>
+                                </div>
+
+                                <div className={"row mr-5 mt-4"}>
+                                    <iframe
+                                        src={this.state.purchasedProductIframeurl}
+                                        frameBorder="0"
+                                        onLoad={this.hideSpinner}
+                                        width="100%"
+                                        height="350"
+                                        allowtransparency='true'
+                                        >
+                                    </iframe>
+                                </div>
 
+                                <div className={"row mr-5 mt-4 mb-3"}>
+
+                                    {!this.state.loading &&
+                                        <ProductLinkCard
+                                            product={this.state.product}
+                                            user={this.state.user}
+                                            useCredits={this.state.useCredits}
+                                            link={this.state.generatedLink}
+                                            onSendEmailClick={this.onSendEmailClick}
+                                            calculatedAmountDetails={this.state.calculatedAmountDetails}
+                                        />
+                                    }
+                                </div>
+
+                            </div>
+                            }
                     </div>
+
                 </CheckLogin>
             </div>
         )
     }
 }
 
-export default GenerateLink
+export default withStyles(useStyles)(GenerateLink)