diff --git a/orderapp/src/components/ConfirmSendBtn.js b/orderapp/src/components/ConfirmSendBtn.js
index 5e1edd6..4ab00c4 100644
--- a/orderapp/src/components/ConfirmSendBtn.js
+++ b/orderapp/src/components/ConfirmSendBtn.js
@@ -16,11 +16,18 @@ export default function ConfirmedOrder() {
 
   return (
     <form onSubmit={sendEmail}>
-      {/* <label>Item</label>
-      <input type="text" name="user_name" />
-      <label>Quantity</label>
-      <label>Price</label> */}
-      <input type="submit" value="Confirm Send" />
+<tr>
+                            <td>
+                                {item.name}
+                            </td>
+                            <td>
+                                {item.quantity} 
+                            </td>
+                            <td>
+                                {item.price}
+                            </td>
+                        </tr>
+      {/* <input type="submit" value="Confirm Send" /> */}
     </form>
   );
 };
\ No newline at end of file
diff --git a/orderapp/src/components/OrderlistPopUp.js b/orderapp/src/components/OrderlistPopUp.js
index e49cbe2..c4bdd95 100644
--- a/orderapp/src/components/OrderlistPopUp.js
+++ b/orderapp/src/components/OrderlistPopUp.js
@@ -1,11 +1,8 @@
 import React from 'react'
 import { useState } from 'react';
-import ConfirmedOrder from './ConfirmSendBtn';
-import CartItems from './CartItems';
+
 import Invoice from './Invoice.js'
 import './OrderlistPopUp.css';
-import AddToCartItems from './OrderlistContainer'
-
 
 function OrderlistPopUp(props) {
     // Used for Popup function only. Content to be in OrderListSendBtn.
@@ -15,8 +12,9 @@ function OrderlistPopUp(props) {
     // Use this variable to show the message after sending message:
     //Copy this portion from https://www.emailjs.com/docs/examples/reactjs/
 
+    console.log('Inside Order List Popup:', props.selectedItemList);
     return (props.trigger) ?  (
-        //A pop-up button after clicking Send Order button
+
         <div className="orderlist-popup">
             
                 <div className="popup-page">
@@ -25,13 +23,13 @@ function OrderlistPopUp(props) {
                 {/* Insert item list table here */}
 
     <button className="close" onClick={() => props.setTrigger(false)}>X</button>
-    <h1 className="popupTitle">Order List</h1>
+    <h1 className="popupTitle">Your Order Has Been Sent!</h1>
     <Invoice className="invoice" />
     <div className="table">
     <table>
         <thead>
             <tr>
-                <th colSpan="3"><h1>Confirm Order List</h1></th>
+                <th colSpan="3"><h1>Confirm Order Items</h1></th>
             </tr>
 
             <tr>
@@ -42,29 +40,28 @@ function OrderlistPopUp(props) {
             
         </thead>
         <tbody>
-        <div>{CartItems.selectedItemList}</div>
-            {/* <tr>
-                <td>testing item one</td>
-                <td>01</td>
-                <td>$0.00</td>
-            </tr>
-            <tr>
-                <td>testing item two</td>
-                <td>02</td>
-                <td>$10.00</td>
-            </tr> */}
+            {
+                props.selectedItemList ? props.selectedItemList.map((item) => {
+                    return (
+                        <tr>
+                            <td>
+                                {item.name}
+                            </td>
+                            <td>
+                                {item.quantity} 
+                            </td>
+                            <td>
+                                {item.price}
+                            </td>
+                        </tr>
+                    )
+                }) : null
+            }
         </tbody>
     </table>
-
-
             </div>
-        
-
-                {/* Two inner button within the pop-up to 1.Amend (close the page) 2.Send the Order through */}
-                <button className="amend-btn" onClick={() => props.setTrigger(false)}>Amend Order</button>
-                    <ConfirmedOrder />
-                    {/* <button className="confirm-send-btn" onSubmit={sendEmail}>Confirm Send</button> */}
-        </div>
+                    
+            </div>
     </div>
 
     ) : "";
@@ -72,38 +69,3 @@ function OrderlistPopUp(props) {
 }
 
 export default OrderlistPopUp
-
-
-
-// PLanning
-// To use useHistory and retrieve the orderlist information
-//  CheckOut features:
-//  import + path
-//  A function for Checkout
-//      UseEffect(() => {
-//           let isMounted = true
-//              axios.get(`/OrderlistContainer).then(res=>{
-//                  if(is)
-//})
-//
-//          }
-//      return (
-//            a form that is built within the orderlistContainer
-//            )
-// Structure: A table
-//      {orderlist.map( (item, index) => {
-//             totalCartPrice += AddToCartItems.product.selling_price * AddToCartItems.product_qty;
-//             return (
-//                 <tr key={index}>
-//                     <td>{items.product.name}</td>
-//                     <td>{items.product.selling_price}</td>
-//                     <td>{items.product.qty}</td>
-//                 </tr>
-//             )
-// })}  
-//
-
-// Need to do const totalOrderPrice at the end of the page
-// e.g. totalOrderPrice += item.product.selling_price * item.product_qty;
-//
-//to Show the total price. insert code as such: {totalOrderPrice} within the table
\ No newline at end of file
diff --git a/orderapp/src/components/OrderlistSendBtn.css b/orderapp/src/components/OrderlistSendBtn.css
index abb63a2..10bef42 100644
--- a/orderapp/src/components/OrderlistSendBtn.css
+++ b/orderapp/src/components/OrderlistSendBtn.css
@@ -4,6 +4,7 @@
 
 #sendorderbtn {
   position: relative;
+  margin-bottom: 5px;
   top: 30px;
 }
 
diff --git a/orderapp/src/components/OrderlistSendBtn.js b/orderapp/src/components/OrderlistSendBtn.js
index 1e8dec6..7da5b2b 100644
--- a/orderapp/src/components/OrderlistSendBtn.js
+++ b/orderapp/src/components/OrderlistSendBtn.js
@@ -2,46 +2,41 @@ import OrderlistPopUp from './OrderlistPopUp' ;
 import { useState } from 'react';
 import './OrderlistSendBtn.css';
 import AddToCartItems from './OrderlistContainer'
+import emailjs from '@emailjs/browser';
 
 //Create a function for Send Button
 //OnClick Send Button, a Popup will appear using modal
 
-
 function OrderlistSendBtn (props) {
     const [buttonPopup, setButtonPopup] = useState(false);
 
+    
+    function onSendOrderButtonClick(e) {
+      // 1. Send Email with confirmed props.
+
+      console.log('I need to send email here');
+
+      // 2. setButtonPopup to true
+      setButtonPopup(true)
+    }
     //if-else statement to show button when cart is filled and disappear when cart is empty
     if(props.selectedItemList.length === 0) {
       return null;
     }
     else {
+      console.log('Inside Send Button:', props.selectedItemList);
       return (
         <>
           <div className="sendbtn-container">
-            <button id='sendorderbtn' onClick={() => setButtonPopup(true)}>Send Order</button>
+            <button id='sendorderbtn' onClick={() => onSendOrderButtonClick()}>Send Order</button>
           </div>
-  
+        
+
           {/* Create a trigger={} to allow a function that trigger useState */}
-          <OrderlistPopUp trigger={buttonPopup} setTrigger={setButtonPopup}/>
+          <OrderlistPopUp trigger={buttonPopup} setTrigger={setButtonPopup} selectedItemList={props.selectedItemList}/>
         </>
       )
     }  
 }
 
-export default OrderlistSendBtn;
-
-// function OrderlistSendBtn () {
-    
-//     return (
-//         <div>
-//             <button >Send Order</button>
-//         </div>
-
-
-//     )
-
-
-
-// }
-
-// export default OrderlistSendBtn;
\ No newline at end of file
+export default OrderlistSendBtn;
\ No newline at end of file