diff --git a/src/components/pages/profile/SideNav/index.jsx b/src/components/pages/profile/SideNav/index.jsx
index 9f962ed..110ee53 100644
--- a/src/components/pages/profile/SideNav/index.jsx
+++ b/src/components/pages/profile/SideNav/index.jsx
@@ -3,12 +3,22 @@ import { AiTwotoneShopping } from "react-icons/ai";
 import { FiLogOut } from 'react-icons/fi'
 import { Button, Col, Modal } from 'react-bootstrap';
 import { NavDiv , ProfileLink } from '../../../../styles/pages/profile-page'
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Slab } from "../../../../styles/themes/font-styles";
+import { fetchResult, postApi } from "../../../../services/api/loaded-services";
 
 
 const SideNav = () =>{
     const [show, setShow] = useState(false);
+    const [userData, setUserData] = useState({})
+    useEffect(() => {
+        async function fetchdata(){
+            await postApi("profile")
+            let res = await fetchResult("profile")
+            setUserData(res)
+        }
+        fetchdata()
+	}, [])
 
     const handleClose = () => setShow(false);
     const handleShow = () => setShow(true);
@@ -16,9 +26,9 @@ const SideNav = () =>{
     return(
         <Col xs={2} className="d-none d-md-block">
             <NavDiv className='px-1 py-2'>
-                <img style={{ borderRadius: '50%' , width : '50px' , height : '50px' ,float:'left', margin:'0 1rem 0 0.5rem'}} src="https://lh3.googleusercontent.com/a-/AOh14GhwgF6-YeLPhg2KB8rPpU7DxzZXPMZFhuoIq5AIzg=s96-c" />
+                <img style={{ borderRadius: '50%' , width : '50px' , height : '50px' ,float:'left', margin:'0 1rem 0 0.5rem'}} src={userData.photo} />
                 <p style={{fontSize:'15px', marginBottom:'0'}}>Hello,</p>
-                <strong style={{color:'#7D0D80'}}>Gowthaman M</strong>
+                <strong style={{color:'#7D0D80'}}> {userData.name} </strong>
                 <hr />
                 <ProfileLink to='../profile/order'>
                 <h5 style={{color:'#7D0D80'}} className="pl-1 mx-1"><AiTwotoneShopping className="mx-1 mb-1" size='16' />My Orders</h5>
diff --git a/src/components/pages/profile/delivery/index.jsx b/src/components/pages/profile/delivery/index.jsx
index df65404..42f51de 100644
--- a/src/components/pages/profile/delivery/index.jsx
+++ b/src/components/pages/profile/delivery/index.jsx
@@ -1,25 +1,61 @@
 import { useState, useEffect } from "react";
 import { Col, Container, Row } from "react-bootstrap";
 import { Input, StyledRow , StyledButton , Msg } from "../../../../styles/pages/delivery";
-import data from "../../../../api/DeliveryInfo.json";
 import axios from "axios";
 import { Slab } from "../../../../styles/themes/font-styles";
 import { RiPencilFill } from "react-icons/ri";
 import { FaEraser , FaSave } from "react-icons/fa";
 import SideNav from "../SideNav";
 import { NavDiv } from "../../../../styles/pages/profile-page";
+import { fetchResult, postApi } from "../../../../services/api/loaded-services";
+import { ApiPostService } from "../../../../services/api/api-services";
+import { retriveDetails } from "../../../../services/storage/details";
 
 const DeliveryInformation = () =>{
-    const [fname,setfName]=useState( data.fname )
-    const [lname,setlName]=useState( data.lname )
-    const [phno,setPhno]=useState( data.phno )
-    const [address,setAddress]=useState( data.address )
-    const [pin,setPin]=useState( data.pin )
-    const [city,setCity]=useState( data.city )
-    const [state,setState]=useState( data.state )
-    const [err,setErr]=useState("")
-    const [msg,setMsg]=useState("")
+    const [details,setDetails]= useState( 
+        { fname:'', lname:'' , phno:'' , address:'' , pin:'' , city:'' ,state:'' }
+    )
+    const [msg,setMsg]=useState({ err:'', msg:'' })
 
+    const handleChange = e => {
+        const { name, value } = e.target;
+        setDetails(prevState => ({
+            ...prevState,
+            [name]: value
+        }));
+    };
+
+    function assign(data){
+        console.log('data', data)
+        var name=data.deliveryName.split(" ");
+        var pincode= data.pincode === 0 ? "" : data.pincode
+        setDetails({
+            'fname':name[0] ,
+            'lname': name[1],
+            'phno':data.phoneNumber ,
+            'address':data.address,
+            'pin':pincode,
+            'city':data.city,
+            'state':data.state});
+    }
+
+    function messages(name, str){
+        setMsg(prevState => ({
+            ...prevState,
+            [name]: str
+         }));
+    }
+
+    let userId = retriveDetails()
+        
+    useEffect(() => {
+        async function fetchdata(){
+            await postApi("profile")
+            let det = await fetchResult("delivery")
+            assign(det)
+        }
+        fetchdata()
+	}, [])
     const edit= () =>{
         var TextElements = document.getElementsByClassName("info");
         
@@ -30,32 +66,26 @@ const DeliveryInformation = () =>{
         for (var i = 0, max = TextElements.length; i < max; i++) {
             TextElements[i].removeAttribute("readOnly")
         }
-        setErr("")
-        setMsg("")
+        messages('err',"")
+        messages('msg',"")
     }
     const reset= () =>{
-        setfName("");
-        setlName("");
-        setPhno("");
-        setAddress("");
-        setPin("");
-        setCity("");
-        setState("");
+        setDetails({ fname:'', lname:'' , phno:'' , address:'' , pin:'' , city:'' ,state:'' })
     }
     const save =() =>{
-        if (fname==="" || lname==="" || phno==='' || address==="" || pin===""|| city==="" || state==="") {
-            setErr("All fields are required!")
+        if (details.fname==="" || details.lname==="" || details.phno==='' || details.address==="" || details.pin===""|| details.city==="" || details.state==="") {
+            messages('err',"All fields are required!")
             return;
         }
-        if(phno.length<10 || phno.length>10){
-            setErr('Enter a valid phone number!')
+        if(details.phno.length<10 || details.phno.length>10){
+            messages('err', 'Enter a valid phone number!')
             return;
         }
-        if(pin.length<6 || pin.length>6){
-            setErr('Enter a valid pincode!')
+        if(details.pin.length<6 || details.pin.length>6){
+             messages('err', 'Enter a valid pincode!')
             return;
         }
-        setErr("")
+        messages('err','')
         var TextElements = document.getElementsByClassName("info");
         for (var i = 0, max = TextElements.length; i < max; i++) {
             TextElements[i].readOnly = true;
@@ -63,32 +93,52 @@ const DeliveryInformation = () =>{
         document.getElementById('clear').style['display']="none";
         document.getElementById('save').style['display']="none";
         document.getElementById('edit').style['display']="block";
-        setMsg("Your Address have been Updated!")
-    }
-    let a={pin}
-    useEffect(async () => {
-        await axios.get(`https://api.postalpincode.in/pincode/`+a.pin)
-        .then((res) => {
-            console.log(res);
-            let cy=res.data[0].PostOffice[0]
-            setCity(cy.District)
-            setState(cy.State)
-        })
-        .catch((err) => {
-            console.log(err)
-            setCity('')
-            setState('')
+        let delName=details.fname+" "+details.lname;
+        let op = ApiPostService(process.env.REACT_APP_DELIVERYUPDATE, { 
+            'customer': userId.id, 
+            'phoneNumber': details.phno , 
+            'address': details.address,
+            'deliveryName': delName,
+            'pincode': details.pin,
+            'nation': 'India',
+            'state': details.state,
+            'city': details.city,
         })
-    },[pin])
+        messages('msg','Your Address have been Updated!')
+    }
+    
+    useEffect(() => {
+        async function getpin(){
+            let a={details}
+            await axios.get(`https://api.postalpincode.in/pincode/`+a.details.pin)
+            .then((res) => {
+                let cy=res.data[0].PostOffice[0]
+                setDetails(prevState => ({
+                    ...prevState,
+                    city: cy.District,
+                    state: cy.State
+                 }));
+            })
+            .catch((err) => {
+                console.log(err)
+                setDetails(prevState => ({
+                    ...prevState,
+                    city: '',
+                    state: ''
+                 }));
+            })
+        }
+        getpin()
+    },[details.pin])
 
     return (
-        <Container fluid style={{clear: 'both', overflow: 'hidden', marginTop:'5%'}}>
+        <Container fluid style={{clear: 'both', overflow: 'hidden', marginTop:'9%'}}>
             <Row>
 
                 <SideNav />
 
                 <Col lg={10} md={10} xs={12} style={{overflow:'hidden'}}>
-                    <NavDiv type="main" mobile="diff">
+                    <NavDiv type="main" mobile="diff" style={{paddingTop:'1.5em'}}>
                     <h2 style={{textAlign:"center", fontFamily:Slab, color:"purple", textTransform:'uppercase' }}>Delivery Information</h2>
                     <hr style={{width: '70%', margin:"auto"}} />
                     <StyledButton className='form-control' onClick={reset} style={{display:'none', backgroundColor:'#FFB400', border:'none'}} id="clear">Clear<FaEraser className="mx-1 mb-1" size='16' /></StyledButton>
@@ -96,45 +146,45 @@ const DeliveryInformation = () =>{
                     <br />
                     <StyledRow style={{clear:'both'}}>
                         <Col lg={5} xs={7} md={5}>
-                            <div class="form-floating mb-3">
-                                <Input width="full" type="text" className="form-control info" id="floatingInput" value={fname} readOnly onChange={e=>setfName(e.target.value)} />
-                                <label for="floatingInput">First Name</label>
+                            <div className="form-floating mb-3">
+                                <Input width="full" type="text" className="form-control info" id="firstName" value={details.fname} readOnly onChange={handleChange} name="fname" />
+                                <label htmlFor="firstName">First Name</label>
                             </div>
                         </Col>
                         <Col lg={5} xs={5} md={5}>
-                            <div class="form-floating mb-3">
-                                <Input style={{width:'80%'}} type="text" className="form-control info" id="floatingInput" value={lname} readOnly onChange={e=>setlName(e.target.value)} />
-                                <label for="floatingInput">Last Name</label>
+                            <div className="form-floating mb-3">
+                                <Input style={{width:'80%'}} type="text" className="form-control info" id="lasttName" value={details.lname} readOnly onChange={handleChange} name='lname'/>
+                                <label htmlFor="lasttName">Last Name</label>
                             </div>
                         </Col>
                     </StyledRow>
                     <StyledRow>
                         <Col>
-                            <div class="form-floating mb-3">
-                                <Input type="number" className="form-control info" id="floatingInput" value={phno} readOnly onChange={e=>setPhno(e.target.value)} />
-                                <label for="floatingInput">Phone Number</label>
+                            <div className="form-floating mb-3">
+                                <Input type="number" className="form-control info" id="phone" value={details.phno} readOnly onChange={handleChange} name='phno' />
+                                <label htmlFor="phone">Phone Number</label>
                             </div>
-                            <div class="form-floating mb-3">
-                                <Input type="text" className="form-control info" id="floatingInput" value={address} readOnly onChange={e=>setAddress(e.target.value)} />
-                                <label for="floatingInput">Address</label>
+                            <div className="form-floating mb-3">
+                                <Input type="text" className="form-control info" id="address" value={details.address} readOnly onChange={handleChange} name='address' />
+                                <label htmlFor="address">Address</label>
                             </div>
-                            <div class="form-floating mb-3">
-                                <Input type="number" className="form-control info" id="floatingInput" value={pin} readOnly onChange={e=>setPin(e.target.value)} />
-                                <label for="floatingInput">PinCode</label>
+                            <div className="form-floating mb-3">
+                                <Input type="number" className="form-control info" id="pin" value={details.pin} readOnly onChange={handleChange} name='pin' />
+                                <label htmlFor="pin">PinCode</label>
                             </div>
-                            <div class="form-floating mb-3">
-                                <Input type="text" className="form-control info" id="floatingInput" value={city} readOnly onChange={e=>setCity(e.target.value)} />
-                                <label for="floatingInput">District</label>
+                            <div className="form-floating mb-3">
+                                <Input type="text" className="form-control info" id="district" value={details.city} readOnly name='district' />
+                                <label htmlFor="district">District</label>
                             </div>
-                            <div class="form-floating mb-3">
-                                <Input type="text" className="form-control info" id="floatingInput" value={state} readOnly onChange={e=>setState(e.target.value)} />
-                                <label for="floatingInput">State</label>
+                            <div className="form-floating mb-3">
+                                <Input type="text" className="form-control info" id="state" value={details.state} readOnly name='state' />
+                                <label htmlFor="state">State</label>
                             </div>
                         </Col>
                     </StyledRow>
-                    <Msg type='err' style={{color:'#F83535'}}>{err}</Msg>
+                    <Msg type='err' style={{color:'#F83535'}}>{msg.err}</Msg>
                     <StyledButton className='form-control ' onClick={save} style={{display:'none', backgroundColor:'#00A550' }} type='save' id="save">Save<FaSave className="mx-1 mb-1" size='16' /></StyledButton>
-                    <Msg style={{marginLeft:'16rem', color:'#00A550'}}>{msg}</Msg>
+                    <Msg style={{marginLeft:'16rem', color:'#00A550'}}>{msg.msg}</Msg>
                     <br />
                     </NavDiv>
                 </Col>
diff --git a/src/components/pages/profile/index.jsx b/src/components/pages/profile/index.jsx
index 05a2ff9..0557d1d 100644
--- a/src/components/pages/profile/index.jsx
+++ b/src/components/pages/profile/index.jsx
@@ -1,30 +1,50 @@
+import React, { useState, useEffect } from 'react'
 import { Col, Container, Row } from "react-bootstrap";
-import { Links, TabData, Para , NavDiv , ProfileLink} from "../../../styles/pages/profile-page";
+import { Links, TabData, Para, NavDiv, ProfileLink } from "../../../styles/pages/profile-page";
 import { Slab } from "../../../styles/themes/font-styles"
-import  SideNav  from './SideNav';
+import SideNav from './SideNav';
 import { RiPencilFill } from "react-icons/ri";
 import { AiTwotoneShopping } from "react-icons/ai";
-import {IoIosArrowForward} from 'react-icons/io'
+import { IoIosArrowForward } from 'react-icons/io'
+import { fetchResult, postApi } from '../../../services/api/loaded-services';
+import { Button } from '../../../styles/widgets/widgets';
+
 const Profile = () => {
+	const [userData, setUserData] = useState({})
+	const [details, setDetails] = useState({})
+	useEffect(() => {
+		async function fetchdata(){
+			await postApi("profile")
+			let res = await fetchResult("profile")
+			let det = await fetchResult("delivery")
+			setUserData(res)
+			setDetails(det)
+		}
+		fetchdata()
+	}, [])
 	return (
-		<Container fluid style={{ clear:'both', backgroundColor:'#fff', fontFamily: Slab, marginTop:'5%'}}>
+		<Container fluid style={{ clear: 'both', backgroundColor: '#fff', fontFamily: Slab ,marginTop:'9%'}}>
 			<Row>
 
 				<SideNav />
-				
-				<Col xs={10} className="m-auto p-auto d-none d-md-block" >
+
+				<Col xs={10} className="mx-auto p-auto d-none d-md-block" >
 					<NavDiv type='main'>
-						<h4 style={{fontFamily:Slab, color:'purple'}}>Personal Information</h4>
+						<h4 style={{ fontFamily: Slab, color: 'purple' }}>Personal Information</h4>
 						<Row>
 							<Col className="p-5">
 								<table>
-									<tr><TabData font="bold">Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</TabData><TabData font="big">Gowthaman M</TabData></tr>
-									<tr><TabData font="bold">E-mail &nbsp;&nbsp;&nbsp;&nbsp;:</TabData><TabData font="big">manogowtham211@gmail.com</TabData></tr>
-									<tr><TabData font="bold">Phone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</TabData><TabData font="big">+91 9003091453</TabData></tr>
-									<br />
-									<tr><TabData font="bold">Address &nbsp;:</TabData><TabData>37/9a, Srinivasa Perumal Koil, 1st street,</TabData></tr>
-									<tr><TabData></TabData><TabData>Chennai, TamilNadu-600019 </TabData></tr>
+									<tbody>
+										<tr><TabData font="bold">Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</TabData><TabData font="big"> {userData.name} </TabData></tr>
+										<tr><TabData font="bold">E-mail &nbsp;&nbsp;&nbsp;&nbsp;:</TabData><TabData font="big"> {userData.email} </TabData></tr>
+										{ details.address!=='' && <>
+										<tr><TabData font="bold">Phone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</TabData><TabData font="big"> {details.phoneNumber} </TabData></tr>
+										<tr><TabData font="bold">Address &nbsp;:</TabData><TabData> {details.address} ,</TabData></tr>
+										<tr><TabData></TabData><TabData>{details.city},{details.state} -{details.pincode}</TabData></tr>
+										</> }
+									</tbody>
 								</table>
+								{ details.address==='' && <> <ProfileLink to='../delivery'><Button >Add More Information</Button></ProfileLink> </>}
 								<Links>
 									<a>Change Password</a>
 								</Links>
@@ -32,29 +52,33 @@ const Profile = () => {
 						</Row>
 					</NavDiv>
 				</Col>
-				<div className="d-md-none" style={{padding:0, marginTop:'-5%'}}>
-						<Container className='py-4' style={{backgroundColor:"purple",width:'100%'}}>
-							<h2 style={{fontFamily:Slab, color:'#fff' , textAlign:'center'}}>Profile</h2>
-							<img className='mx-auto' style={{ borderRadius: '50%' , width : '100px' , height : '100px' ,display:'block', margin:'auto'}} src="https://lh3.googleusercontent.com/a-/AOh14GhwgF6-YeLPhg2KB8rPpU7DxzZXPMZFhuoIq5AIzg=s96-c" />
-							<Para font="big" className='text-center py-2 text-light'>Gowthaman M</Para>
-							<Para font="big" className='text-center pb-2 text-light'>manogowtham211@gmail.com</Para>
-						</Container>
+				<div className="d-md-none" style={{ padding: 0, marginTop: '-5%' }}>
+					<Container className='py-4' style={{ backgroundColor: "purple", width: '100%' }}>
+						<h2 style={{ fontFamily: Slab, color: '#fff', textAlign: 'center' }}>Profile</h2>
+						<img className='mx-auto' style={{ borderRadius: '50%', width: '100px', height: '100px', display: 'block', margin: 'auto' }} src="https://lh3.googleusercontent.com/a-/AOh14GhwgF6-YeLPhg2KB8rPpU7DxzZXPMZFhuoIq5AIzg=s96-c" />
+						<Para font="big" className='text-center py-2 text-light'> { userData.name } </Para>
+						<Para font="big" className='text-center pb-2 text-light'> { userData.email } </Para>
+					</Container>
 					<NavDiv mobile='yes' className="my-5 pt-3 mx-4">
 						<ProfileLink to='../profile/order'>
 							<div>
-							<h2 style={{fontFamily:Slab, color:'purple', marginBottom:0, float:'left'}} ><AiTwotoneShopping className="mx-1 mb-2" />My Orders</h2>
-							<h2 style={{float:'right'}}><IoIosArrowForward className="mx-3 mb-1"/></h2>
+								<h2 style={{ fontFamily: Slab, color: 'purple', marginBottom: 0, float: 'left' }} ><AiTwotoneShopping className="mx-1 mb-2" />My Orders</h2>
+								<h2 style={{ float: 'right' }}><IoIosArrowForward className="mx-3 mb-1" /></h2>
 							</div>
 						</ProfileLink>
-						<div style={{clear:'both'}}></div>
+						<div style={{ clear: 'both' }}></div>
 					</NavDiv>
 					<NavDiv mobile='yes' className="px-3">
-						<h2 style={{fontFamily:Slab, color:'purple'}} >My Address</h2>
+						<h2 style={{ fontFamily: Slab, color: 'purple' }} >My Address</h2>
 						<hr />
-						<Para style={{textAlign:'left', margin: 0}}>37/9a, Srinivasa Perumal Koil, 1st street,<br/> Chennai, TamilNadu-600019<br /><strong>9003091453</strong></Para><br />
-						<hr style={{marginTop:0}} />
+						{ details.address!=='' && 
+							<>
+							<Para style={{ textAlign: 'left', margin: 0 }}>{details.address},<br /> {details.city}, {details.state}-{details.pincode}<br /><strong>{details.phoneNumber}</strong></Para><br />
+							<hr style={{ marginTop: 0 }} />
+							</> 
+						}
 						<ProfileLink to='../delivery'>
-							<h4 style={{textAlign:'right', margin:'0 8px'}}> <RiPencilFill className="mx-1 mb-1" />Edit Address </h4>
+							<h4 style={{ textAlign: 'right', margin: '0 8px' }}> <RiPencilFill className="mx-1 mb-1" />Edit Address </h4>
 						</ProfileLink>
 					</NavDiv>
 				</div>
diff --git a/src/components/pages/profile/orders/details/index.jsx b/src/components/pages/profile/orders/details/index.jsx
index f3687e7..007b4bb 100644
--- a/src/components/pages/profile/orders/details/index.jsx
+++ b/src/components/pages/profile/orders/details/index.jsx
@@ -51,7 +51,7 @@ const OrderDetails = () => {
     );
 
     return(
-        <Container fluid style={{ clear:'both', marginTop:'5%' }}>
+        <Container fluid style={{ clear:'both', marginTop:'9%' }}>
             <Row>
                 
                 <SideNav />
@@ -133,10 +133,10 @@ const OrderDetails = () => {
                                 </Row>
                                 <Row>
                                     <Col xs={10}>
-                                        <DelPara>URL  : <a href={data.trackURL} target='_blank'>{data.trackURL}</a></DelPara>
+                                        <DelPara>URL  : <a href={data.trackURL} rel="noreferrer" target='_blank'>{data.trackURL}</a></DelPara>
                                     </Col>
                                     <Col xs={2}>
-                                        <a href={data.trackURL} target='_blank' ><MdOpenInNew className='mb-1' style={{float:'right', color:'#000'}} size='20' /></a>
+                                        <a href={data.trackURL} rel="noreferrer" target='_blank' ><MdOpenInNew className='mb-1' style={{float:'right', color:'#000'}} size='20' /></a>
                                     </Col>
                                 </Row>
                             </StyledCard>
diff --git a/src/components/pages/profile/orders/index.jsx b/src/components/pages/profile/orders/index.jsx
index b571b13..84651ed 100644
--- a/src/components/pages/profile/orders/index.jsx
+++ b/src/components/pages/profile/orders/index.jsx
@@ -1,37 +1,85 @@
-import React, { useState } from "react";
-import {Container, Table, Row, Col } from "react-bootstrap"; 
-import {TabBody, TabHead, Tab, Para, StyleStatus} from '../../../../styles/pages/order-page'
+ import React, { useState } from "react";
+import {Container, Table, Row, Col , Card } from "react-bootstrap"; 
+import {Tab, Para, StyleStatus , TabData} from '../../../../styles/pages/order-page'
 import data from "../../../../api/Orders.json"
 import {Slab} from '../../../../styles/themes/font-styles';
 import  SideNav  from '../SideNav';
 import {NavDiv, ProfileLink} from '../../../../styles/pages/profile-page';
+import { MdContentCopy , MdOpenInNew } from 'react-icons/md';
+import Clipboard from 'react-clipboard.js';
 
 function Order() {
-
-    let StatusStyle={
-        textAlign: 'center',
-        verticalAlign: 'middle'
-    };
     
     const [order, setOrder] = useState(data)
     
-    const tabBody = order.map((id) =>
-        <tr>            
-            <td><ProfileLink to='../details'>{id.orderRef}</ProfileLink></td>
-            <td>{id.orderDate}</td>
-            <td>{id.deliveryDate}</td>
-            <td>₹.{id.total}</td>
-            <td>{id.noItems}</td>
-            <td>{id.payment}</td>
-            <td style={StatusStyle}><StyleStatus status={id.status}>{id.status}</StyleStatus>
-                {/* <StyledButton className=" shadow-none " status={id.status}>{id.status}</StyledButton> */}
-                </td>
-            {/* <td><a href={id.invoice}><MdPictureAsPdf style={IconStyle}/></a></td> */}
-            {/* <td><a>Details</a><br/>
-            <a>Reorder</a></td> */}
-        </tr>
+    const card = order.map((id) =>
+        <Card className='mb-lg-2 mb-md-3'>
+            <ProfileLink to='../details'>
+            <Card.Header>
+                <Table style={{marginBottom:0}}>
+                    <tbody>
+                        <tr>
+                            <TabData width='med' font='bold'>Ordered on</TabData>
+                            <TabData float='right'>Order ID</TabData>
+                            <TabData width='auto' float='right'>#{id.orderRef}</TabData>
+                        </tr>
+                        <tr>
+                            <TabData>21/11/11</TabData>
+                            <TabData colSpan={2} width='full'>Shipped to Gowthaman</TabData>
+                        </tr>
+                    </tbody>
+                </Table>
+            </Card.Header>
+            </ProfileLink>            
+            <Card.Body>
+                <Table style={{marginBottom:0}}>
+                    <tbody>
+                        <tr>
+                            <TabData width='med' font='bold'>Delivered</TabData>
+                            <TabData width='big'>{id.deliveryDate}</TabData>
+                            <TabData font='bold'>Tracking ID</TabData>
+                            <TabData>:</TabData>
+                            <TabData>CT040857193IN</TabData>
+                            <TabData width='small' >
+                                <Clipboard data-clipboard-text='CT040857193IN' style={{border:'none', padding:0, backgroundColor:'#fff'}}>
+                                    <MdContentCopy className='mb-1' size='20' />
+                                </Clipboard>
+                            </TabData>
+                        </tr>
+                        <tr>
+                            <TabData width='med' font='bold'>Total</TabData>
+                            <TabData>₹ {id.total}</TabData>
+                            <TabData font='bold'>Tracking URL</TabData>
+                            <TabData>:</TabData>
+                            <TabData><a style={{padding:0}} href="https://www.indiapost.gov.in/_layouts/15/DOP.Portal.Tracking/TrackConsignment.aspx" rel="noreferrer" target='_blank'>{add3Dots('https://www.indiapost.gov.in/_layouts/15/DOP.Portal.Tracking/TrackConsignment.aspx' , 22)}</a></TabData>
+                            <TabData width='small'>
+                                <a href="https://www.indiapost.gov.in/_layouts/15/DOP.Portal.Tracking/TrackConsignment.aspx" rel="noreferrer" target='_blank' className='px-0'><MdOpenInNew className='mb-1' style={{color:'#000'}} size='20' /></a>
+                            </TabData>
+                        </tr>
+                        <tr>
+                            <TabData width='med' font='bold'>No. of Items</TabData>
+                            <TabData>{id.noItems}</TabData>
+                            <TabData font='bold'>Payment</TabData>
+                            <TabData>:</TabData>
+                            <TabData>{id.payment}</TabData>
+                        </tr>
+                    </tbody>
+                </Table>                              
+            </Card.Body>
+        </Card>
     );
 
+    function add3Dots(string, limit)
+    {
+        var dots = "...";
+        if(string.length > limit)
+        {
+            string = string.substring(0,limit) + dots;
+        }
+        
+        return string;
+    }
+
     const tab = order.map((id) =>
         <div>
             <ProfileLink to='../details'>
@@ -57,14 +105,12 @@ function Order() {
                         <StyleStatus style={{float:"left"}} status={id.status}>{id.status}</StyleStatus><br/>
                     </Col>
                 </Row>
-            {/* <Para>{id.noItems} items</Para>
-            <StyleStatus style={{float:"left"}} status={id.status}>{id.status}</StyleStatus><br/> */}
             </ProfileLink>
             <hr />
         </div>
     );
     return (
-        <Container fluid style={{ clear:'both', marginTop:'5%' }}>
+        <Container fluid style={{ clear:'both', marginTop:'9%' }}>
             <Row>
                 <SideNav />
 
@@ -73,30 +119,7 @@ function Order() {
                     <h4 style={{fontFamily:Slab}} >Order History</h4>
                     <Tab>
                         <h5 style={{fontFamily:Slab}}>Here are the orders you've placed since your account was created.</h5>
-                        <Table bordered >
-                            <TabHead>
-                                <tr>
-                                    <td>Order<br/>
-                                        Reference</td>
-                                    <td>Ordered<br />
-                                        Date</td>
-                                    <td>Expected<br />
-                                        Delivery Date</td>
-                                    <td>Total<br/>
-                                        Price</td>
-                                    <td>No. of<br />
-                                        Items</td>
-                                    <td>Payment<br />
-                                        Method</td>
-                                    <td>Status</td>
-                                    {/* <td>Invoice</td> */}
-                                    {/* <td></td> */}
-                                </tr>
-                            </TabHead>
-                            <TabBody>
-                                {tabBody}
-                            </TabBody>
-                        </Table>
+                        {card}
                     </Tab>
                     <br />
                     </NavDiv>
diff --git a/src/services/api/loaded-services.js b/src/services/api/loaded-services.js
index bd70648..a36c60a 100644
--- a/src/services/api/loaded-services.js
+++ b/src/services/api/loaded-services.js
@@ -1,10 +1,13 @@
 import { retriveDetails } from "../storage/details";
 import { ApiGetService, ApiPostService } from "./api-services";
 
-let categories = [];
-let subcategories = [];
 let home = [];
 let product=[];
+let categories = [];
+let subcategories = [];
+let userData = {};
+let personalDetails={};
+
 
 // Gets all the (get) requests
 async function getApi() {
@@ -13,6 +16,24 @@ async function getApi() {
 }
 
 async function postApi(value) {
+  let element;
+  if (value === "subcategories") {
+    for (let index = 0; index < categories.length; index++) {
+      element = categories[index];
+      console.log(element);
+      subcategories = await ApiPostService(
+        process.env.REACT_APP_SUBCATEGORY_POST_URL,
+        { category: element.name }
+      );
+    }
+  }
+  if (value === "profile") {
+    let userId = await retriveDetails()
+    let userDetails = await ApiPostService(process.env.REACT_APP_PROFILE, { 'customer': userId.id })
+    userData = userDetails.data
+    personalDetails = userDetails.data.personalInfo
+  }
+
   postProduct(value);
 }
 
@@ -59,6 +80,12 @@ async function fetchResult(item,opt=null) {
       if (subcategories.length === 0) await getCategory();
       return subcategories;
 
+    case "profile":
+      return userData;
+      
+    case 'delivery':
+      return personalDetails;
+      
     case "home":
       if (home.length === 0) await getHome();
       return home;
@@ -73,4 +100,6 @@ async function fetchResult(item,opt=null) {
   }
 }
 
-export { getApi, postApi, fetchResult };
\ No newline at end of file
+
+export { getApi, postApi, fetchResult };
+
diff --git a/src/styles/pages/order-page.js b/src/styles/pages/order-page.js
index 548229d..b2e71d0 100644
--- a/src/styles/pages/order-page.js
+++ b/src/styles/pages/order-page.js
@@ -1,30 +1,52 @@
-import styled from "styled-components"
-import {Lora , Slab} from '../themes/font-styles'
-import {LightShade, DarkShade} from "../themes/color-theme"
+import styled, { css }  from "styled-components"
+import {Lora } from '../themes/font-styles'
 
-export const TabHead= styled.thead`
-    background-color: ${LightShade};
-    font-weight: 700;
-    font-size: 1.125rem;
-    font-family: ${Slab};
-    color:white;
-    text-align:center;
-    vertical-align: middle !important;
-`;
-
-export const TabBody = styled.tbody`
-    white-space: pre-line;
-    font-size: 0.9rem;
-    font-weight:700;
-    color: ${DarkShade};
-    background-color: #fff;
-    font-family: ${Lora};
-    text-align:center;
-    vertical-align: middle !important;
+export const TabData= styled.td`
+    border:0;
+    padding:0 !important;
+    font:0.9rem;
+    ${props => props.width === "med" && css`
+        width:13%;
+        @media (min-width:0px) and (max-width:1020px){
+            width: 20%;   
+        }
+    `}
+    ${props => props.width === "small" && css`
+        width:10%;
+        @media (min-width:0px) and (max-width:1020px){
+            width: auto;   
+        }
+    `}
+    ${props => props.font === "bold" && css`
+        font-weight:700;
+    `}
+    ${props => props.width === "big" && css`
+        width:40%;
+        @media (min-width:1064px) and (max-width:1200px){
+            width: 35%;   
+        }
+        @media (min-width:0px) and (max-width:1064px){
+            width: auto;   
+        }
+    `}
+    ${props => props.float === "right" && css`
+        width:74%;
+        text-align:right;
+        @media (min-width:0px) and (max-width:900px){
+            width: 60%;   
+        }
+    `}
+    ${props => props.width === "full" && css`
+        width:auto;
+        text-align:right;
+    `}
+    ${props => props.width === "auto" && css`
+        width:auto;
+    `}
 `;
 
 export const Tab = styled.div`
-    padding: 20px;
+    padding: 20px 20px 0;
     @media (min-width:0px) and (max-width:766px){
         padding: 20px 0;
     }
diff --git a/src/styles/pages/profile-page.js b/src/styles/pages/profile-page.js
index bf6c6dc..d8f0a8a 100644
--- a/src/styles/pages/profile-page.js
+++ b/src/styles/pages/profile-page.js
@@ -49,7 +49,7 @@ export const Links= styled.div`
 export const NavDiv=styled.div`
     margin-top:10px;
     margin-right:-15px;
-    background-color:#FCF8FB;
+    background-color:#FDF9FC;
     border-radius: 5px;
     box-shadow: 3px 3px 10px 1px rgba(199,173,230,0.77);
     -webkit-box-shadow: 3px 3px 10px 1px rgba(199,173,230,0.77);