diff --git a/donutshop_ecommerce/src/app/orders/[id]/page.js b/donutshop_ecommerce/src/app/orders/[id]/page.js
index a284c52..024cfa7 100644
--- a/donutshop_ecommerce/src/app/orders/[id]/page.js
+++ b/donutshop_ecommerce/src/app/orders/[id]/page.js
@@ -1,10 +1,14 @@
 "use client"
 import Image from 'next/image'
-import React, { useContext, useEffect } from 'react'
-import { CartContext } from '../../../components/AppContext'
+import React, { useContext, useEffect, useState } from 'react'
+import { CartContext, productTotal } from '../../../components/AppContext'
+import { useParams } from 'next/navigation'
+import AddressInfo from '../../../components/layout/AddressInfo'
 
 const OrdersPage = () => {
-    const {clearCart} = useContext(CartContext);
+    const {clearCart, cartProducts} = useContext(CartContext);
+    const {id} = useParams();
+    const [order, setOrder] = useState();
 
     useEffect(() => {
         if(typeof window !== 'undefined'){
@@ -12,19 +16,81 @@ const OrdersPage = () => {
                 clearCart();
             }
         }
+        if(id){
+            fetch('/api/orders?_id='+id).then(res => {
+                res.json().then(orderData => {
+                    setOrder(orderData);
+                })
+            })
+        }
     }, [])
 
 
+    let subtotal = 0
+    if(order?.cartProducts){
+        for(const product of order?.cartProducts){
+            subtotal += productTotal(product)
+        }
+    }
+
+
   return (
     <div className='pb-20 md:pb-40'>
-        <div className='px-5 md:px-10 py-5 sm:py-10 max-w-2xl mx-auto'>
+        <div className='px-5 md:px-10 py-5 sm:py-10 max-w-xl mx-auto'>
             <div className='flex flex-col gap-4 items-center justify-center text-center mb-10'>
-                <Image src='/check.png' width={100} height={100} alt='checked' className='mb-6'/>
+                <Image src='/check.png' width={100} height={100} alt='checked' className='mb-5'/>
                 <p className='uppercase'>Thank you</p>
                 <p className='uppercase text-xl'>Your order is confirmed</p>
-                <p className='text-sm'>We will be sending you an email confirmation to your email shortly</p>
+                <button type='button' className='p-2 bg-pink-500 rounded-md text-xs text-white hover:opacity-80 uppercase'>Track your order</button>
             </div>
-            product
+            {order && (
+                <div className='flex flex-col gap-5 py-5 px-5 border rounded-md shadow-md'>
+                    <div className='border-b pb-5'>
+                        <p className='mb-5 text-pink-500 font-semibold text-center'>Order Summary</p>
+                        {order.cartProducts.map(product => (
+                            <div className='flex justify-between'>
+                                <div>
+                                    <p className='w-[150px] lg:w-[300px] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800 text-xs sm:text-sm font-bold'>{product.itemName}</p>
+                                    {product.size && (
+                                        <div className='text-gray-800 font-semibold text-xs sm:text-sm'>Size: <span className='text-[10px] sm:text-xs text-gray-600'>{product.size.itemName}</span></div>
+                                    )}
+                                    {product.extra?.length > 0 && (
+                                        <div className='text-gray-800 font-semibold text-xs sm:text-sm flex gap-1 items-center'>Add: {product.extra.map(extras => (
+                                            <span className='text-[10px] sm:text-xs text-gray-600'>{extras.itemName} (+${extras.price})</span>
+                                            ))}
+                                        </div>
+                                    )}
+                                </div>
+                                <div>
+                                    <p className='text-gray-800 text-xs sm:text-sm font-semibold'>${productTotal(product)}</p>
+                                </div>
+                            </div>
+                        ))}
+                        <div className='flex justify-end text-gray-800'>
+                        <div className='flex flex-col gap-1 mt-5 md:mt-10 text-xs sm:text-sm'>
+                            <div className='flex gap-10 justify-between font-semibold'>
+                                <p>Subtotal:</p>
+                                <p className='ml-5 text-end'>${subtotal.toFixed(2)}</p>
+                            </div>
+                            <div className='flex gap-10 justify-between font-semibold'>
+                                <p>Delivery:</p>
+                                <p className='ml-5 text-end'>$4.99</p>
+                            </div>
+                            <div className='flex gap-10 justify-between font-semibold'>
+                                <p>Order total:</p>
+                                <p className='ml-5 text-end'>${(subtotal + 4.99).toFixed(2)}</p>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                    <div>
+                        <div className='text-sm max-w-md mx-auto'>
+                            <p className='mb-5 font-semibold text-center text-base text-pink-500'>Delivery Address</p>
+                            <AddressInfo addressProps={order} disabled={true}/>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     </div>
   )
diff --git a/donutshop_ecommerce/src/components/layout/AddressInfo.js b/donutshop_ecommerce/src/components/layout/AddressInfo.js
index 74eb039..b377497 100644
--- a/donutshop_ecommerce/src/components/layout/AddressInfo.js
+++ b/donutshop_ecommerce/src/components/layout/AddressInfo.js
@@ -1,35 +1,35 @@
 import React from 'react'
 
-const AddressInfo = ({addressProps, setAddressProps}) => {
+const AddressInfo = ({addressProps, setAddressProps, disabled=false}) => {
     const {phoneNumber, streetAddress, city, stateProvince, zipCode, country} = addressProps;
 
   return (
     <>
         <div>
             <label className='text-gray-700 text-sm font-semibold'>Phone number</label>
-            <input type='tel' placeholder='Phone number' value={phoneNumber} onChange={ev => setAddressProps('phoneNumber', ev.target.value)}/>
+            <input type='tel' placeholder='Phone number' value={phoneNumber} onChange={ev => setAddressProps('phoneNumber', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
         </div>
         <div>
             <label className='text-gray-700 text-sm font-semibold'>Street Address</label>
-            <input type='text' placeholder='Address' value={streetAddress} onChange={ev => setAddressProps('streetAddress', ev.target.value)}/>
+            <input type='text' placeholder='Address' value={streetAddress} onChange={ev => setAddressProps('streetAddress', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
         </div>
         <div>
             <label className='text-gray-700 text-sm font-semibold'>City</label>
-            <input type='text' placeholder='City' value={city} onChange={ev => setAddressProps('city', ev.target.value)}/>
+            <input type='text' placeholder='City' value={city} onChange={ev => setAddressProps('city', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
         </div>
         <div className='flex flex-col sm:flex-row gap-0 sm:gap-2'>
             <div>
               <label className='text-gray-700 text-sm font-semibold'>State/Province</label>
-              <input type='text' placeholder='State/Province' value={stateProvince} onChange={ev => setAddressProps('stateProvince', ev.target.value)}/>
+              <input type='text' placeholder='State/Province' value={stateProvince} onChange={ev => setAddressProps('stateProvince', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
             </div>
             <div>
               <label className='text-gray-700 text-sm font-semibold'>Zip/Postal code</label>
-              <input type='text' placeholder='Zip/Postal code' value={zipCode} onChange={ev => setAddressProps('zipCode', ev.target.value)}/>
+              <input type='text' placeholder='Zip/Postal code' value={zipCode} onChange={ev => setAddressProps('zipCode', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
             </div>
         </div>
         <div>
             <label className='text-gray-700 text-sm font-semibold'>Country</label>
-            <input type='text' placeholder='Country' value={country} onChange={ev => setAddressProps('country', ev.target.value)}/>
+            <input type='text' placeholder='Country' value={country} onChange={ev => setAddressProps('country', ev.target.value)} disabled={disabled} className=' disabled:bg-gray-100 disabled:text-gray-400'/>
         </div>
     </>
   )