diff --git a/package-lock.json b/package-lock.json
index b1bd505..9e65ad3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "amazon",
       "version": "0.1.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
diff --git a/src/App.js b/src/App.js
index f13b5b6..cef82ef 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,6 +17,7 @@ import Register from './pages/Register';
 import Cart from './pages/Cart';
 import Delivery from './pages/Delivery';
 import OrderHistroy from './pages/OrderHistroy';
+import DeliveryOption from './pages/DeliveryOption';
 /**
 * @author
 * @class App
@@ -47,6 +48,7 @@ class App extends Component {
         <Route path="/checkout" component={ Checkout }></Route>
         <Route path="/delivery" component={ Delivery }></Route>
         <Route path="/order_history" component={ OrderHistroy }></Route>
+        <Route path="/deliveryoption"  component={DeliveryOption}></Route>
       </Router>
     )
   }
diff --git a/src/components/Header.js b/src/components/Header.js
index 6fee3e0..f072e08 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -34,6 +34,45 @@ class Header extends Component {
         showCountryModal: false,
         AllNavMenuCloseBtn: 'd-none'
     }
+    sty = `
+    .home_spritesheet{
+        background: url(https://images-eu.ssl-images-amazon.com/images/G/31/gno/sprites/nav-sprite-global-1x-hm-dsk-reorg._CB405936311_.png);
+      }
+      .h_amazon_pos{
+        background-position: -9px -38px;
+      }
+       .h_amz_con{
+        width:100px;
+        height:42px;
+      }
+      .h_loc_con_pos{
+        width: 21px;
+        height:34px;
+        background-position: -71px -379px;
+      }
+      .foot_spritesheet{
+        background-image: url('https://m.media-amazon.com/images/S/sash/rzrQQdi0aRm6Dap.png');
+      }
+      .a_flag_pos{
+        background-position: 0 -166px;
+        width:24px;
+    height: 18px;
+      }
+      .a_arrow_pos{
+        background-position: -181px -334px  !important;
+        width: 16px;
+        height: 17px;
+      }
+      .cart_con_pos{
+        background-position: -10px -340px !important;
+        width: 38px;
+        height: 26px;
+      }
+      .a_header_top button {
+          font-size:15px !important;
+      }
+    `;
+
     //2. constructor
     constructor(props) {
         super(props);
@@ -96,10 +135,11 @@ class Header extends Component {
             <React.Fragment>
                 <style>
                     {myCustomFont}
+                    {this.sty}
                 </style>
                 <div className={'overylay w-100 h-100 ' + this.state.overylay} ></div>
 
-                <button onClick={this.handleNavMenuClose} className={'btn-close btn-close-white AllNavMenuCloseBtn position-fixed top-0 ' + this.state.AllNavMenuCloseBtn}></button>
+                <button onClick={this.handleNavMenuClose} className={'btn-close btn-close-white AllNavMenuCloseBtn  position-fixed top-0 ' + this.state.AllNavMenuCloseBtn}></button>
                 <div className={'AllNavMenu h-100 position-fixed top-0 ' + this.state.AllNavMenu}>
                     <div className="AllNavMenuHeader text-white mhcolor p-3">
                         <h5 className="modal-title " id="staticBackdropLabel"><FontAwesomeIcon icon={faUser} /> Hello, Sign in</h5>
@@ -186,20 +226,20 @@ class Header extends Component {
                     </div>
                 </div>
                 <header>
-                    <div className={'a_header_top p-1 w-100 ' + this.state.y}>
-                        <button className="me-1 btn h-100" style={{ 'width': '10%' }}>
-                            <img className="img-fluid" src="./logo.png" />
+                    <div className={'a_header_top p-1 w-100 fs-6 ' + this.state.y}>
+                        <button className=" me-1 btn h-100" style={{ 'width': '11%' }}>
+                            <span className=" ms-0 p-0 d-block float-start h_amz_con home_spritesheet  h_amazon_pos" ></span>
+                            <span className="text-white mt-2 pt-1 float-start">.in</span>
                         </button>
-                        <button className="text-start row m-0 lh-1 text-white fs-6 me-1 btn h-100" style={{ 'width': '10%' }}>
-                            <div className="col-2 p-0"><FontAwesomeIcon icon={faMapMarkerAlt} /></div>
-                            <div className="col-10 p-0 fw-bolder">
-                                Deliver to Anil
-
-                                <span className="fw-bold d-block"><span className="a_city">Neemuch</span><span className="a_pincode">458441</span></span>
-                            </div>
+                        <button className="text-start mt-1 row m-0 lh-1 text-white fs-6 me-1 btn h-100" style={{ 'width': '13%' }}>
+                            <div className="p-0  ms-3" >Hello</div>
+                            <a className="fw-bold p-0">
+                                <span className=" ms-0  d-block float-start h_loc_con_pos home_spritesheet " ></span>
+                                <span className="text-white d-block  float-start">Select your address</span>
+                            </a>
 
                         </button>
-                        <form className={'bg-white hform  w-50 d-inline-block ' + this.state.z}>
+                        <form style={{ 'width': '45%' }} className={'bg-white hform   d-inline-block ' + this.state.z}>
                             <div className="row m-0">
                                 <div className="col-1 p-0 border-end">
                                     <div className="btn-group" role="group">
@@ -220,8 +260,9 @@ class Header extends Component {
                                 </div>
                             </div>
                         </form>
-                        <button className="a_ht_countrydd_btn btn h-100 p-0 position-relative" style={{ 'width': '4%' }}>
-                            <Flag className="d-inline-block me-1" code={'in'} height="16" /><FontAwesomeIcon className="text-white d-inline-block" icon={faChevronDown} />
+                        <button className="  a_ht_countrydd_btn btn h-100 p-0 position-relative" style={{ 'width': '5%' }}>
+                            <span className="  d-block float-start p-0 foot_spritesheet  a_flag_pos"></span>
+                            <span className="home_spritesheet float-start a_arrow_pos "></span>
                             <div className="text-start p-3 a_ht_countrydd position-absolute bg-white rounded-3 border">
                                 <div className="arrow-up position-absolute a_au_a_ht_countrydd"></div>
                                 <div className="form-check">
@@ -262,7 +303,7 @@ class Header extends Component {
                                 <a href="#" className="btn btn-link">Change country/region</a>
                             </div>
                         </button>
-                        <button onMouseOver={this.overylay} onMouseOut={this.hideOverlay} className="a_ht_signin_model_btn position-relative text-start fs-6 text-white btn h-100" style={{ 'width': '8%' }}>
+                        <button onMouseOver={this.overylay} onMouseOut={this.hideOverlay} className=" ms-1 a_ht_signin_model_btn position-relative text-start fs-6 text-white btn h-100" style={{ 'width': '10%' }}>
                             <div>Hello, Sign in</div>
                             <span className="fw-bolder">Account &amp; Lists</span>
                             <div className="a_ht_signin_model position-absolute rounded-1 bg-white border">
@@ -336,12 +377,13 @@ class Header extends Component {
                                 </div>
                             </div>
                         </button>
-                        <button className="text-start text-white btn h-100" style={{ 'width': '8%' }}>
+                        <button className="text-start text-white btn h-100" style={{ 'width': '7%' }}>
                             <div>Returns</div>
                             <span className="fw-bolder">&amp; Orders</span>
                         </button>
-                        <button className="text-white btn h-100" style={{ 'width': '8%' }}>
-                            <FontAwesomeIcon className="fs-3" icon={faCartPlus} /> Cart
+                        <button className=" ms-1 text-white btn h-100" style={{ 'width': '7%' }}>
+                            <span className="d-block float-start home_spritesheet cart_con_pos"></span>
+                            <span className="float-start">cart</span>
                         </button>
                     </div>
                     <div className="a_header_bottom">
diff --git a/src/pages/Cart.js b/src/pages/Cart.js
index d157f3a..a3e496d 100644
--- a/src/pages/Cart.js
+++ b/src/pages/Cart.js
@@ -242,7 +242,7 @@ class Cart extends Component {
                                     <div className="accordion-item border rounded-0 ">
                                         <h2 className="accordion-header border-0" id="headingOne">
                                             <button className="accordion-button bg-white text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                                            EMI Available
+                                                EMI Available
                                             </button>
                                         </h2>
                                         <div id="collapseOne" className="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
@@ -251,7 +251,7 @@ class Cart extends Component {
                                             </div>
                                         </div>
                                     </div>
-                                </div>                                
+                                </div>
                             </div>
                             <div className="more_itm_to_exp bg-white border rounded-3 p-3">
                                 <h6>More items to explore</h6>
diff --git a/src/pages/DeliveryOption.js b/src/pages/DeliveryOption.js
new file mode 100644
index 0000000..1c08295
--- /dev/null
+++ b/src/pages/DeliveryOption.js
@@ -0,0 +1,95 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom';
+/**
+* @author
+* @class DeliveryOption
+**/
+
+class DeliveryOption extends Component {
+    //1.property
+    state = {}
+    styl = `
+    .a_font_size{
+        font-size: 14px
+        
+    }
+ .amznbtn{
+            background-image: -webkit-linear-gradient(top ,#ffffcc 0% , #ffcc99 10%,#ffcc66 50%);
+           }
+           .a_anch_dec a:hover{
+            color:#C7511F !important;
+            text-decoration:underline !important;
+          }
+    `
+    //2 constructor
+
+    //3 method
+    render() {
+        return (
+            <>
+                <style>
+                    {this.styl}
+                </style>
+                <div className="delioptioncon ">
+                    <div className="container ">
+                        <div className=" del_header border-bottom">
+                            <img className="mt-5 mb-5" src="https://images-eu.ssl-images-amazon.com/images/G/31/x-locale/checkout/checkout-spc-address-banner._CB485947649_.gif" />
+                            <div className="row mt-3 mb-5 m-0">
+                                <div className="col-9  ">
+                                    <h3>Choose your delivery options</h3>
+                                </div>
+                                <div className="col-3  p-0">
+                                    <Link to="/paymentmethod" className="btn border  btn-light border w-100">
+                                        <button className="btn mt-1 w-100 btn-sm border amznbtn" >Continue</button>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                        <div className=" delioptio_main_con border-bottom">
+                            <div className="row mt-2 m-0">
+                                <div className="col  a_anch_dec ">
+                                    <h5 className="fw-bold">Shipment 1 of 1</h5>
+                                    <span className="fw-bold">Shipping from Amazon </span>
+                                    <img src="https://images-na.ssl-images-amazon.com/images/G/31/marketing/fba/fba-badge_18px._V384100965_.png" />
+                                    <a href="#" className=" ">(learn more)</a>
+                                    <div className="a_font_size ">
+                                        <span className="d-block mt-2 mb-2">Deliver to: Antim songara, 41, pragati nagar, NEEMUCH, MADHYA PRADESH, 458441 India</span>
+                                        <div className="ms-2">
+                                            <span className="fw-bold">Dell Vostro 3400 14" FHD Display Laptop (I5-1135G7 / 8GB / 512GB SSD / NVIDIA MX330 2GB Graphics / Win 10 + MSO / Backlit KB / Dune Color ) D552172WIN9DE</span>
+                                            <span className="d-block"> <span className="text-decoration-line-through">₹67,240.00</span>  <span className="text-warning">₹59,490.00 </span>- Quantity: 1</span>
+                                            <spna>Sold by: Appario Retail Private Ltd</spna>
+                                        </div>
+                                        <a href="#" className=" mt-2 mb-2 d-block text-decoration-none">Change quantities or delete</a>
+                                    </div>
+                                </div>
+                                <div className="col ps-3">
+                                    <h5 className="fw-bold" >Choose a delivery speed</h5>
+                                    <div className="form-check">
+                                        <input className="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked />
+                                        <label className="form-check-label" for="flexRadioDefault2">
+                                            <span className="text-success">wednesday</span> - Free Free delivery and eligible order
+                                        </label>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="a_font_size deli_footer mt-2">
+                            <div className="   d-flex justify-content-center a_anch_dec">
+                                <a href="#" className="border-end pe-1 text-decoration-none ">Conditions of Use </a>
+                                <a href="#" className="ps-1 text-decoration-none"> Privacy Notice </a>
+                                <span>© 2012-2020, Amazon.com, Inc. and its affiliates</span>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </>
+        )
+    }
+}
+
+
+DeliveryOption.propTypes = {}
+export default DeliveryOption
\ No newline at end of file