diff --git a/src/components/booking/book.jsx b/src/components/booking/book.jsx
new file mode 100644
index 0000000..62a94a9
--- /dev/null
+++ b/src/components/booking/book.jsx
@@ -0,0 +1,55 @@
+//if is loggedin ==true: booking will happen else link to signup page
+//here method is post : userdetails and packagedetails
+import React, { Component } from 'react'
+import { postBookingDetails } from '../../helpers/api'
+import { withRouter } from 'react-router-dom'
+
+class BookingPage extends Component {
+  constructor(props) {
+    super(props)
+    //setiing initial state
+    this.state = {
+      packageId: '',
+      userId: '',
+    }
+  }
+
+  componentDidMount() {
+    const userdet = localStorage.getItem('userdetails')
+    const userid = JSON.parse(userdet)
+    const packageid = this.props.match.params
+
+    this.setState({
+      userId: userid._id,
+      packageId: packageid.id,
+    })
+    if (userdet == undefined || userdet == null) {
+      this.props.history.push('/login')
+    }
+  }
+
+  submitHandler = event => {
+    event.preventDefault()
+    const { userId, packageId } = this.state
+    const bookingDetails = {
+      userId,
+      packageId,
+    }
+    console.log('hi')
+    postBookingDetails(bookingDetails).then(res => {
+      console.log(res.data)
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <button type="button" onClick={this.submitHandler}>
+          Book Now
+        </button>
+      </div>
+    )
+  }
+}
+
+export default BookingPage
diff --git a/src/components/home/container.jsx b/src/components/home/container.jsx
index c75254a..0f5d7e5 100644
--- a/src/components/home/container.jsx
+++ b/src/components/home/container.jsx
@@ -76,10 +76,10 @@ class Fetch extends React.Component {
 
         <div>
           {pkg.map(pkg_item => (
-            <div key={pkg_item._id}>
+            <div key={pkg_item.slug}>
               {' '}
               <h2>
-                <Link to={`/package/${pkg_item._id}`}>{pkg_item.name}</Link>
+                <Link to={`/package/${pkg_item.slug}`}>{pkg_item.name}</Link>
               </h2>
               <h3>{pkg_item.description}</h3>
             </div>
diff --git a/src/components/login/loginpage.jsx b/src/components/login/loginpage.jsx
index 2776d90..63b55a4 100644
--- a/src/components/login/loginpage.jsx
+++ b/src/components/login/loginpage.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
-import { PostCredentials } from '../../helpers/api'
+import { postCredentials } from '../../helpers/api'
 
 class LoginPage extends Component {
   constructor(props) {
diff --git a/src/components/login/signup.jsx b/src/components/login/signup.jsx
index 0451b0c..1240071 100644
--- a/src/components/login/signup.jsx
+++ b/src/components/login/signup.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import { withRouter } from 'react-router-dom'
-import { PostUser } from '../../helpers/api'
+import { postUser } from '../../helpers/api'
 
 class SignUp extends Component {
   constructor(props) {
diff --git a/src/components/package/container.jsx b/src/components/package/container.jsx
index f0121d6..f1fbd01 100644
--- a/src/components/package/container.jsx
+++ b/src/components/package/container.jsx
@@ -2,6 +2,8 @@ import React from 'react'
 import Loader from '../common/loader'
 import Error from '../common/error'
 import { getPackageId } from '../../helpers/api'
+import { Link } from 'react-router-dom'
+import { postCredentials } from '../../helpers/api'
 class Package extends React.Component {
   constructor(props) {
     super(props)
@@ -13,9 +15,10 @@ class Package extends React.Component {
   }
 
   componentDidMount() {
-    const id = this.props.match.params.id
+    const slug = this.props.match.params.slug
+    console.log(slug)
 
-    getPackageId(id)
+    getPackageId(slug)
       .then(output => {
         this.setState({ pkg: output, isloading: false })
         console.log(output)
@@ -35,10 +38,8 @@ class Package extends React.Component {
       <div>
         <h1>Name:{pkg.name}</h1>
         <h2>Description:{pkg.description}</h2>
-        <h3>Duration:{pkg.duration}</h3>
-        {pkg.conditions.map(item => (
-          <h4>condition:{item}</h4>
-        ))}
+        {/* booking for user */}
+        <Link to={`/booking/${pkg._id}`}>Book Now</Link>
       </div>
     )
   }
diff --git a/src/components/router.jsx b/src/components/router.jsx
index d581e40..8b00d94 100644
--- a/src/components/router.jsx
+++ b/src/components/router.jsx
@@ -5,6 +5,7 @@ import Signup from './login/signup'
 import Login from './login/loginpage'
 import Package from './package'
 import Category from './category'
+import Booking from './booking/book'
 
 class Routing extends React.Component {
   render() {
@@ -14,7 +15,8 @@ class Routing extends React.Component {
           <Route exact path="/" component={Home} />
           <Route exact path="/signup" component={Signup} />
           <Route exact path="/login" component={Login} />
-          <Route path="/package/:id/" component={Package} />
+          <Route path="/booking/:id" component={Booking} />
+          <Route path="/package/:slug/" component={Package} />
           <Route path="/category/:id/" component={Category} />
 
           {/* TODO: <Route component={Nf} /> */}
diff --git a/src/helpers/api.js b/src/helpers/api.js
index 8552a4b..4333ded 100644
--- a/src/helpers/api.js
+++ b/src/helpers/api.js
@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-const BASE_URL = 'https://salty-thicket-13140.herokuapp.com/api/v1'
+const BASE_URL = 'http://127.0.0.1:3000/api/v1/'
 
 export function getAllPackage() {
   return fetch(`${BASE_URL}/package/all`).then(res => res.json())
@@ -32,3 +32,11 @@ export function postCredentials(user) {
     data: user,
   })
 }
+
+export function postBookingDetails(bookingDetails) {
+  return axios({
+    method: 'POST',
+    url: `${BASE_URL}/book`,
+    data: bookingDetails,
+  })
+}