diff --git a/src/component/Dashoboard/ManageServices/ManageServices.jsx b/src/component/Dashoboard/ManageServices/ManageServices.jsx
index 08ca196..b3f953e 100644
--- a/src/component/Dashoboard/ManageServices/ManageServices.jsx
+++ b/src/component/Dashoboard/ManageServices/ManageServices.jsx
@@ -12,26 +12,15 @@ import AddService from '../AddService/AddService';
 
 const ManageServices = () => {
     const { state: { email }} = useAppContext()
-    const [services, setServices] = useState([])
-    const [isUpdated, setIsUpdated] = useState(false)
-    const [edit, setEdit] = useState(null);
 
-    useEffect(() => {
-        axios.get('https://immense-river-40491.herokuapp.com/services')
-        .then(res => {
-            setServices(res.data);
-            setIsUpdated(false)
-        })
-    }, [isUpdated, edit])
-    
     const checkPermission = (id, action) => {
         const getMainServices = services.slice(0, 6)
-        const getService = getMainServices.find(({_id}) => id === _id)
-        
-        if(getService && email === "test@admin.com"){
-            swal("Permission restriction!","As a test admin, you can't edit or delete the main six services. You can only edit or delete your added services", "info" )
+        const getService = getMainServices.find(({ _id }) => id === _id)
+
+        if (getService && email === "test@admin.com") {
+            swal("Permission restriction!", "As a test admin, you can't edit or delete the main six services. You can only edit or delete your added services", "info")
         } else {
-            if(action === 'edit'){
+            if (action === 'edit') {
                 setEdit(id)
             } else {
                 handleDelete(id)
@@ -47,77 +36,77 @@ const ManageServices = () => {
             icon: "warning",
             buttons: true,
             dangerMode: true,
-          })
-          .then( wantDelete => {
-            if (wantDelete) {
-                const loading = toast.loading('deleting...Please wait!')
-                axios.delete(`https://immense-river-40491.herokuapp.com/delete/${id}`)
-                .then(res => {
-                    toast.dismiss(loading)
-                    if(res){
-                        setIsUpdated(true);
-                        toast.success('Service has been deleted successfully!');
-                    }
-                    else{
-                        toast.error('Something went wrong, please try again');
-                    }
-                })
-                .catch(err => {
-                    toast.dismiss(loading)
-                    swal({
-                        title: "Failed!",
-                        text: 'Something went wrong, please try again',
-                        icon: "error",
-                      });
-                })
-            } 
-          })
+        })
+            .then(wantDelete => {
+                if (wantDelete) {
+                    const loading = toast.loading('deleting...Please wait!')
+                    axios.delete(`https://immense-river-40491.herokuapp.com/delete/${id}`)
+                        .then(res => {
+                            toast.dismiss(loading)
+                            if (res) {
+                                setIsUpdated(true);
+                                toast.success('Service has been deleted successfully!');
+                            }
+                            else {
+                                toast.error('Something went wrong, please try again');
+                            }
+                        })
+                        .catch(err => {
+                            toast.dismiss(loading)
+                            swal({
+                                title: "Failed!",
+                                text: 'Something went wrong, please try again',
+                                icon: "error",
+                            });
+                        })
+                }
+            })
     }
 
     return (
         <>
-        { edit ? 
-            <AddService edit={edit} setEdit={setEdit} services={services}/> 
-            : 
-            services.length === 0 ?
-            <TableLoader/>
-            :
-           <div className="orderList">
-                <Table hover width="100%">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Description</th>
-                            <th>Price</th>
-                            <th>Action</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {
-                            services.map(({_id, name, price, description}) => {
-                                let des = description
-                                // let shortDes = des.split(' ').slice(0,5).join(' ')
-                                return(
-                                    <tr>
-                                        <td>{name}</td>
-                                        <td>{des ? des : "Nothing"}</td>
-                                        <td>${price}</td>
-                                        <td>
-                                            <Button variant="outline-success" onClick={() => checkPermission(_id, 'edit')}> 
-                                            <FontAwesomeIcon icon={faEdit}/>
-                                             Edit</Button>
-                                            <Button className="ml-2" variant="outline-danger" onClick={() => checkPermission(_id, 'delete')}> 
-                                            <FontAwesomeIcon icon={faTrashAlt}/>
-                                             Delete</Button>
-                                        </td>
-                                    </tr>
-                                )
-                            })
-                        }
-                    </tbody>
-                </Table>
-            </div>
-        }
+            {edit ?
+                <AddService edit={edit} setEdit={setEdit} services={services} />
+                :
+                services.length === 0 ?
+                    <TableLoader />
+                    :
+                    <div className="orderList">
+                        <Table hover width="100%">
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Description</th>
+                                    <th>Price</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    services.map(({ _id, name, price, description }) => {
+                                        let des = description
+                                        // let shortDes = des.split(' ').slice(0,5).join(' ')
+                                        return (
+                                            <tr>
+                                                <td>{name}</td>
+                                                <td>{des ? des : "Nothing"}</td>
+                                                <td>${price}</td>
+                                                <td>
+                                                    <Button variant="outline-success" onClick={() => checkPermission(_id, 'edit')}>
+                                                        <FontAwesomeIcon icon={faEdit} />
+                                                        Edit</Button>
+                                                    <Button className="ml-2" variant="outline-danger" onClick={() => checkPermission(_id, 'delete')}>
+                                                        <FontAwesomeIcon icon={faTrashAlt} />
+                                                        Delete</Button>
+                                                </td>
+                                            </tr>
+                                        )
+                                    })
+                                }
+                            </tbody>
+                        </Table>
+                    </div>
+            }
         </>
     );
 };
diff --git a/src/component/Dashoboard/OrderList/OrderList.jsx b/src/component/Dashoboard/OrderList/OrderList.jsx
index 976a989..0f1fee4 100644
--- a/src/component/Dashoboard/OrderList/OrderList.jsx
+++ b/src/component/Dashoboard/OrderList/OrderList.jsx
@@ -1,50 +1,45 @@
 import axios from 'axios';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Table } from 'react-bootstrap';
 import TableLoader from '../../Shared/TableOrder/TableOrder';
 import Order from './Order';
-import './OrderList.css'
+import './OrderList.css';
+import { useFetchData } from '../hooks/useFetchData';
 
 const OrderList = () => {
-    const [orders, setOrders] = useState([]);
-    const [isUpdated, setIsUpdated] = useState(false);
-
-    useEffect(() => {
-        axios.get('https://immense-river-40491.herokuapp.com/orders')
-        .then(res => setOrders(res.data))
-    },[isUpdated])
+    const [orders, setIsUpdated] = useFetchData('https://immense-river-40491.herokuapp.com/orders', [], []);
 
     const handleAction = (id, status) => {
         setIsUpdated(true)
-        axios.patch(`https://immense-river-40491.herokuapp.com/statusUpdate/${id}`, {status: status })
-        .then(res => res.data && setIsUpdated(false))
+        axios.patch(`https://immense-river-40491.herokuapp.com/statusUpdate/${id}`, { status: status })
+            .then(res => res.data && setIsUpdated(false))
     }
-    
+
     return (
         <div className="px-2">
             {
-                orders.length === 0 ? 
-                <TableLoader/> 
-                : 
-                <div className="orderList">
-                    <Table hover>
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Email ID</th>
-                                <th>Service</th>
-                                <th>Status</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {
-                                orders.map(order => <Order key={order._id} order={order} handleAction={handleAction}/>)
-                            }
-                        </tbody>
-                    </Table>
-                </div>
+                orders.length === 0 ?
+                    <TableLoader />
+                    :
+                    <div className="orderList">
+                        <Table hover>
+                            <thead>
+                                <tr>
+                                    <th>Name</th>
+                                    <th>Email ID</th>
+                                    <th>Service</th>
+                                    <th>Status</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    orders.map(order => <Order key={order._id} order={order} handleAction={handleAction} />)
+                                }
+                            </tbody>
+                        </Table>
+                    </div>
             }
-            
+
         </div>
     );
 };
diff --git a/src/component/Dashoboard/UserDashboard/AddReview/Review.jsx b/src/component/Dashoboard/UserDashboard/AddReview/Review.jsx
index c9f1357..63ee6d5 100644
--- a/src/component/Dashoboard/UserDashboard/AddReview/Review.jsx
+++ b/src/component/Dashoboard/UserDashboard/AddReview/Review.jsx
@@ -1,3 +1,4 @@
+
 import React, { useEffect, useState } from 'react';
 import { Button } from 'react-bootstrap';
 import ReviewForm from './ReviewFrom';
@@ -11,19 +12,13 @@ import { faEdit } from '@fortawesome/free-regular-svg-icons';
 import toast from 'react-hot-toast';
 import swal from 'sweetalert';
 import { useAppContext } from '../../../../context';
+import { useFetchData } from '../../hooks/useFetchData';
 
 
 const Review = () => {
-    const { state: { user: { email, img } } } = useAppContext();
-    const [review, setReview] = useState({});
-    const [isUpdated, setIsUpdated] = useState(false)
-    const {_id, name, address, description} = review || {};
-    useEffect(() => {
-        axios(`https://immense-river-40491.herokuapp.com/userReview?email=${email}`)
-        .then(res => {
-            setReview(res.data[0]);
-        })
-    }, [email, isUpdated])
+    const { user: { email, img } } = useContext(UserContext);
+    const [review, setIsUpdated] = useFetchData(`https://immense-river-40491.herokuapp.com/userReview?email=${email}`, {}, [email]);
+    const { _id, name, address, description } = review || {};
 
     const handleDelete = (id) => {
         setIsUpdated(false)
@@ -33,48 +28,48 @@ const Review = () => {
             icon: "warning",
             buttons: true,
             dangerMode: true,
-          })
-          .then( wantDelete => {
-            if (wantDelete) {
-                const loading = toast.loading('deleting...Please wait!')
-                axios.delete(`https://immense-river-40491.herokuapp.com/deleteReview/${id}`)
-                .then(res => {
-                    toast.dismiss(loading)
-                    if(res){
-                        setIsUpdated(true);
-                        toast.success('Your review has been deleted successfully!');
-                    }
-                    else{
-                        toast.error('Something went wrong, please try again');
-                    }
-                })
-                .catch(err => {
-                    toast.dismiss(loading)
-                    swal({
-                        title: "Failed!",
-                        text: 'Something went wrong, please try again',
-                        icon: "error",
-                      });
-                })
-            } 
-          });
+        })
+            .then(wantDelete => {
+                if (wantDelete) {
+                    const loading = toast.loading('deleting...Please wait!')
+                    axios.delete(`https://immense-river-40491.herokuapp.com/deleteReview/${id}`)
+                        .then(res => {
+                            toast.dismiss(loading)
+                            if (res) {
+                                setIsUpdated(true);
+                                toast.success('Your review has been deleted successfully!');
+                            }
+                            else {
+                                toast.error('Something went wrong, please try again');
+                            }
+                        })
+                        .catch(err => {
+                            toast.dismiss(loading)
+                            swal({
+                                title: "Failed!",
+                                text: 'Something went wrong, please try again',
+                                icon: "error",
+                            });
+                        })
+                }
+            });
     }
     return (
         <div>
-            { description ?
-            <div className="userReviewBox">
-                <div className="review col-md-6 mx-auto">
-                    { img ? <img src={img} alt=""/>:
-                    <img src={`${userImg}`} alt=""/>}
-                    <h5 className="testimonialName">{name}</h5>
-                    <h6 className="testimonialAddress">{address}</h6>
-                    <p><i>{description}</i></p>
+            {description ?
+                <div className="userReviewBox">
+                    <div className="review col-md-6 mx-auto">
+                        {img ? <img src={img} alt="" /> :
+                            <img src={`${userImg}`} alt="" />}
+                        <h5 className="testimonialName">{name}</h5>
+                        <h6 className="testimonialAddress">{address}</h6>
+                        <p><i>{description}</i></p>
+                    </div>
+                    <Button as={Link} to={`/dashboard/review/${_id}`} variant="outline-success"> <FontAwesomeIcon icon={faEdit} /> Edit</Button>
+                    <Button variant="outline-danger" onClick={() => handleDelete(_id)}> <FontAwesomeIcon icon={faTrashAlt} /> Delete</Button>
                 </div>
-                <Button as={Link} to={`/dashboard/review/${_id}`} variant="outline-success"> <FontAwesomeIcon icon={faEdit}/> Edit</Button>
-                <Button variant="outline-danger" onClick={() => handleDelete(_id)}> <FontAwesomeIcon icon={faTrashAlt}/> Delete</Button>
-            </div>
-            :
-            <ReviewForm setIsUpdated={setIsUpdated}/> 
+                :
+                <ReviewForm setIsUpdated={setIsUpdated} />
             }
         </div>
     );
diff --git a/src/component/Dashoboard/UserDashboard/BookList/BookList.jsx b/src/component/Dashoboard/UserDashboard/BookList/BookList.jsx
index aa61c41..d73c968 100644
--- a/src/component/Dashoboard/UserDashboard/BookList/BookList.jsx
+++ b/src/component/Dashoboard/UserDashboard/BookList/BookList.jsx
@@ -8,16 +8,11 @@ import './BookList.css'
 import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import ListSkeleton from '../../../Shared/TableOrder/ListSkeleton';
 import { useAppContext } from '../../../../context';
+import { useFetchData } from '../../hooks/useFetchData';
 
 const BookList = () => {
-    const { state:{user} } =useAppContext();
-    const [bookings, setBookings] = useState([]);
-    const [isUpdated, setIsUpdated] = useState(false);
-
-    useEffect(() => {
-        axios.get(`https://immense-river-40491.herokuapp.com/bookingList?email=${user.email}`)
-        .then(res => setBookings(res.data))
-    },[user.email, isUpdated])
+    const { user } = useContext(UserContext);
+    const [bookings, setIsUpdated] = useFetchData(`https://immense-river-40491.herokuapp.com/bookingList?email=${user.email}`, [], [user.email]);
 
     const handleDelete = (id, status) => {
         setIsUpdated(false)
@@ -27,51 +22,51 @@ const BookList = () => {
             icon: "warning",
             buttons: true,
             dangerMode: true,
-          })
-          .then( wantDelete => {
-            if (wantDelete) {
-                const loading = toast.loading('deleting...Please wait!')
-                axios.delete(`https://immense-river-40491.herokuapp.com/deleteOrder/${id}`)
-                .then(res => {
-                    toast.dismiss(loading)
-                    if(res){
-                        setIsUpdated(true);
-                        toast.success('Your Booking is successfully canceled!');
-                    }
-                    else{
-                        toast.error('Something went wrong, please try again');
-                    }
-                })
-                .catch(err => {
-                    toast.dismiss(loading)
-                    swal({
-                        title: "Failed!",
-                        text: 'Something went wrong, please try again',
-                        icon: "error",
-                      });
-                })
-            } 
-          });
+        })
+            .then(wantDelete => {
+                if (wantDelete) {
+                    const loading = toast.loading('deleting...Please wait!')
+                    axios.delete(`https://immense-river-40491.herokuapp.com/deleteOrder/${id}`)
+                        .then(res => {
+                            toast.dismiss(loading)
+                            if (res) {
+                                setIsUpdated(true);
+                                toast.success('Your Booking is successfully canceled!');
+                            }
+                            else {
+                                toast.error('Something went wrong, please try again');
+                            }
+                        })
+                        .catch(err => {
+                            toast.dismiss(loading)
+                            swal({
+                                title: "Failed!",
+                                text: 'Something went wrong, please try again',
+                                icon: "error",
+                            });
+                        })
+                }
+            });
     }
     return (
         <div>
-            {bookings.length === 0 && <ListSkeleton/>}
+            {bookings.length === 0 && <ListSkeleton />}
             <div className="row px-3">
                 {
-                    bookings.map(({_id, serviceName,status,description,img}) => {
-                        return(<div className="col-md-4" key={_id}>
+                    bookings.map(({ _id, serviceName, status, description, img }) => {
+                        return (<div className="col-md-4" key={_id}>
                             <div className="bookingList">
                                 <div className="d-flex justify-content-between">
-                                    <img src={img} alt=""/>
+                                    <img src={img} alt="" />
                                     <div>
-                                        <p className="serviceState" style={{color: '#fff', background: status === 'Pending' ? 'rgb(255 78 96)' : status === 'On going' ? 'rgb(73 146 255)' :'rgb(31 204 123)'}}>{status}</p>
+                                        <p className="serviceState" style={{ color: '#fff', background: status === 'Pending' ? 'rgb(255 78 96)' : status === 'On going' ? 'rgb(73 146 255)' : 'rgb(31 204 123)' }}>{status}</p>
                                     </div>
                                 </div>
                                 <h6>{serviceName}</h6>
                                 <p>{description}</p>
-                                <Button variant="outline-danger" onClick={() => handleDelete(_id, status)}> 
-                                    <FontAwesomeIcon icon={faTimesCircle}/>
-                                     { status === 'Done' ? 'Remove':'Cancel'}
+                                <Button variant="outline-danger" onClick={() => handleDelete(_id, status)}>
+                                    <FontAwesomeIcon icon={faTimesCircle} />
+                                    {status === 'Done' ? 'Remove' : 'Cancel'}
                                 </Button>
                             </div>
                         </div>)
diff --git a/src/component/Dashoboard/hooks/useFetchData.jsx b/src/component/Dashoboard/hooks/useFetchData.jsx
new file mode 100644
index 0000000..4b049e0
--- /dev/null
+++ b/src/component/Dashoboard/hooks/useFetchData.jsx
@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+export const useFetchData = (url, initialData, dependents) => {
+    const [data, setData] = useState(initialData);
+    const [isUpdated, setIsUpdated] = useState(false);
+
+    useEffect(() => {
+        axios.get(url)
+            .then(res => setData(res.data))
+    }, [url, ...dependents, isUpdated]);
+
+    return [data, setIsUpdated];
+}