diff --git a/react-app/components/TripPlan/ViewTripPlan.js b/react-app/components/TripPlan/ViewTripPlan.js
index ff63620..c8c6218 100644
--- a/react-app/components/TripPlan/ViewTripPlan.js
+++ b/react-app/components/TripPlan/ViewTripPlan.js
@@ -8,15 +8,7 @@ import { Close } from '../common/icons/Close'
 import { FaEye } from 'react-icons/fa'
 import TripPlanLayout from './TripPlanLayout'
 const TripPlanInfo = ({
-  id,
-  vehicleEntryId,
-  vehicleEntry,
-  amount,
-  paid,
-  createdAt,
-  distance,
-  duration,
-  ...props
+  tripplan
 }) => {
   const [isOpen, setIsOpen] = useState(false)
   const handleClose = () => setIsOpen(false)
@@ -25,7 +17,7 @@ const TripPlanInfo = ({
     <>
       <div
         onClick={handleOpen}
-        {...props}
+        {...tripplan}
         className="smooth-effect m-3 rounded bg-yellow-300 p-2 text-yellow-800 shadow hover:bg-yellow-400"
       >
         <FaEye />
@@ -64,16 +56,15 @@ const TripPlanInfo = ({
                     <Close onClick={handleClose} />
                   </Dialog.Title>
 
-                  <TripPlanLayout
-                    id={id}
-                    vehicleEntryId={vehicleEntryId}
-                    vehicleEntry={vehicleEntry}
-                    amount={amount}
-                    paid={paid}
-                    createdAt={createdAt}
-                    distance={distance}
-                    duration={duration}
-                  />
+                  {/* <TripPlanLayout
+                    id={tripplan.id}
+                    vehicleId={tripplan.vehicleId}
+                    driverId={tripplan.driverId}
+                    driver={tripplan.driver}
+                    vehicle={tripplan.vehicle}
+                    tripPlanStss={tripplan.tripPlanStss}
+                    tripPlanLandfills={tripplan.tripPlanLandfills}
+                  /> */}
                 </Dialog.Panel>
               </Transition.Child>
             </div>
diff --git a/react-app/components/TripPlans/TripPlanItem.js b/react-app/components/TripPlans/TripPlanItem.js
index f9c9f96..ea3e50f 100644
--- a/react-app/components/TripPlans/TripPlanItem.js
+++ b/react-app/components/TripPlans/TripPlanItem.js
@@ -6,78 +6,39 @@ import { BiBuildingHouse, BiDownload, BiLocationPlus, BiMoneyWithdraw } from 're
 import { FaMoneyTripPlan, FaTimesCircle } from 'react-icons/fa'
 import { RxClock } from 'react-icons/rx'
  
-const TripPlanItem = ({
-  id,
-  vehicleEntryId,
-  vehicleEntry,
-  amount,
-  paid,
-  createdAt,
-  distance,
-  duration
-}) => {
+const TripPlanItem = ({ id, vehicle, tripPlanStss, tripPlanLandfills }) => {
   return (
-
     <div className="my-4 flex flex-col md:flex-row justify-between rounded-lg smooth-effect bg-white shadow hover:bg-green-100 transition-shadow duration-300">
       <div className="flex flex-col justify-between p-4">
         <div>
           <div className="flex items-center mb-2">
             <BsTruck className="text-lg text-gray-700 mr-2" />
-            <span className="text-lg font-semibold text-gray-800">Vehicle: {vehicleEntry?.vehicle?.registrationNumber}</span>
+            <span className="text-lg font-semibold text-gray-800">Vehicle: {vehicle?.registrationNumber}</span>
           </div>
           <div className="flex items-center mb-2">
             <BiBuildingHouse className="text-lg text-gray-700 mr-2" />
-            <span className="text-sm text-gray-600">STS: {vehicleEntry?.sts?.wardNumber} - {vehicleEntry?.sts?.name}</span>
+            <span className="text-sm text-gray-600">STS: {tripPlanStss.map(tripPlanSts => `${tripPlanSts.sts.wardNumber} - ${tripPlanSts.sts.name}`).join(', ')}</span>
           </div>
           <div className="flex items-center mb-2">
             <BiLocationPlus className="text-lg text-gray-700 mr-2" />
-            <span className="text-sm text-gray-600">Landfill: {vehicleEntry?.landfill?.name}</span>
-          </div>
-        </div>
-        <div className="   gap-4 flex flex-row marker:justify-between items-center text-gray-700">
-          <div className="flex items-center mb-2 sm:mb-0">
-            <GiPathDistance className="text-lg mr-2" />
-            <span>{distance.toFixed(2)} km</span>
+            <span className="text-sm text-gray-600">Landfill: {tripPlanLandfills.map(tripPlanLandfill => tripPlanLandfill.landfill.name).join(', ')}</span>
           </div>
-          <div className="flex items-center">
-            <BsClockHistory className="text-lg mr-2" />
-            <span>{duration.toFixed(2)} mins</span>
-          </div>
-        </div>
-
-        <div className="mt-2 flex flex-row items-center">
-          <RxClock className="text-lg text-gray-700 mr-2" />
-          <span className="text-sm">{new Date(createdAt).toLocaleString()}</span>
         </div>
       </div>
 
       <div className="flex flex-col items-center justify-center p-4">
+        <div className="flex items-center">
+          <GiNuclearWaste className="text-lg font-bold mr-2" />
+          <span> Capacity: {vehicle?.capacity?.toFixed(2)} Ton</span>
+        </div>
 
-          <div className="flex items-center">
-            <GiNuclearWaste className="text-lg font-bold mr-2" />
-            <span> {vehicleEntry.volumeOfWaste.toFixed(2)} Ton</span>
-          </div>
-          <div className="flex items-center">
-            <BiMoneyWithdraw className="text-lg font-bold mr-2" />
-            <span className="text-green-600 font-semibold">  {amount.toFixed(2)} Tk</span>
-          </div>
-
-          <TripPlanInfo
-            id={id}
-          vehicleEntryId={vehicleEntryId}
-          vehicleEntry={vehicleEntry}
-          amount={amount}
-          paid={paid}
-          createdAt={createdAt}
-          distance={distance}
-            duration={duration}
-          />
-          <button onClick={() => window.open(`http://3.208.28.247:5000/tripplan/${id}/download`, '_blank')} className="flex items-center justify-center px-2 py-2 rounded-md bg-green-500 text-white hover:bg-green-600 transition duration-150 ease-in-out">
-            <BiDownload className="mr-1" />
-          </button>
+        {/* <button onClick={() => window.open(`http://3.208.28.247:5000/tripplan/${id}/download`, '_blank')} className="flex items-center justify-center px-2 py-2 rounded-md bg-green-500 text-white hover:bg-green-600 transition duration-150 ease-in-out">
+          <BiDownload className="mr-1" />
+        </button> */}
       </div>
     </div>
   )
 }
 
 export default TripPlanItem
+
diff --git a/react-app/components/TripPlans/TripPlanItems.js b/react-app/components/TripPlans/TripPlanItems.js
index fc28240..b7d3443 100644
--- a/react-app/components/TripPlans/TripPlanItems.js
+++ b/react-app/components/TripPlans/TripPlanItems.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import TripPlanItem from './TripPlanItem'
 
-const TripPlanItems = ({ tripplans }) => {
+const TripPlanItems = ({ tripplan }) => {
   return (
     <div className="block max-h-[75vh] overflow-y-auto rounded-lg border p-2 desktop:max-h-[80vh]">
-      {tripplans?.length
+      {tripplan?.length
         ? (
-            tripplans?.map((i) => <TripPlanItem key={i.id} {...i} />)
+            tripplan?.map((i) => <TripPlanItem key={i.id} {...i} />)
           )
         : (
         <div className="h-[100px] w-full text-center font-bold text-gray-300">
diff --git a/react-app/pages/bills.js b/react-app/pages/bills.js
index b28de4b..5fdb44e 100644
--- a/react-app/pages/bills.js
+++ b/react-app/pages/bills.js
@@ -82,44 +82,44 @@ function Bills() {
     setValue(newValue)
   }
 
-  useEffect(() => {
-    const token = localStorage.getItem('token')
+  // useEffect(() => {
+  //   const token = localStorage.getItem('token')
 
-    setLoadingBills(true)
-    if (token) {
-      const queryString = getQueryString({
-        ...value,
-        ...filters,
-      })
+  //   setLoadingBills(true)
+  //   if (token) {
+  //     const queryString = getQueryString({
+  //       ...value,
+  //       ...filters,
+  //     })
 
-      console.log('queryString:', queryString)
+  //     console.log('queryString:', queryString)
 
-      axios
-        .get(getBaseUrl() + queryString, {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        })
-        .then((res) => {
-          setBillData(res.data)
-          console.log(res.data)
-          setLoadingBills(false)
-          setErrorBills(null)
-        })
-        .catch((err) => {
-          setErrorBills(err)
-          console.log(err)
-          setLoadingBills(false)
-        })
-    }
-  }, [
-    value,
-    filters.isPaid,
-    filters.isVerified,
-    filters.landfillId,
-    filters.stsId,
-    filters.vehicleId,
-  ])
+  //     axios
+  //       .get(getBaseUrl() + queryString, {
+  //         headers: {
+  //           Authorization: `Bearer ${token}`,
+  //         },
+  //       })
+  //       .then((res) => {
+  //         setBillData(res.data)
+  //         console.log(res.data)
+  //         setLoadingBills(false)
+  //         setErrorBills(null)
+  //       })
+  //       .catch((err) => {
+  //         setErrorBills(err)
+  //         console.log(err)
+  //         setLoadingBills(false)
+  //       })
+  //   }
+  // }, [
+  //   value,
+  //   filters.isPaid,
+  //   filters.isVerified,
+  //   filters.landfillId,
+  //   filters.stsId,
+  //   filters.vehicleId,
+  // ])
 
   const colors = [
     { b: 'bg-blue-100', c: 'text-blue-700' },
@@ -146,7 +146,7 @@ function Bills() {
           },
         })
         .then((res) => {
-          setValues(res.data)
+          setBillData(res.data)
         })
         .catch((err) => {
           console.log(err)
@@ -154,6 +154,25 @@ function Bills() {
     }
   }, [])
 
+  useEffect(() => {
+    const token = localStorage.getItem('token')
+    axios
+      .get(getBaseUrl() + '/bill', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        setBillData(res.data)
+        console.log(res.data)
+        setLoadingBills(false)
+        setErrorBills(null)
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }, []);
+
   return (
     <NoSSR>
       <div className="  flex  w-full flex-col gap-1 rounded-xl bg-white p-3 shadow">
diff --git a/react-app/pages/tripplan.js b/react-app/pages/tripplan.js
index b28de4b..043a128 100644
--- a/react-app/pages/tripplan.js
+++ b/react-app/pages/tripplan.js
@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react'
 import Layout from '../components/layout'
 import { NoSSR } from '../components/common/NoSSR'
 import Datepicker from 'react-tailwindcss-datepicker'
-import BillItems from '../components/Bills/BillItems'
+import TripPlanItems from '../components/TripPlans/TripPlanItems'
 import { getBaseUrl } from '../utils/url'
 import axios from 'axios'
 import Select from '../components/common/Select'
@@ -51,10 +51,11 @@ const getQueryString = (params) => {
   return queryString
 }
 
-function Bills() {
-  const [billData, setBillData] = useState({})
+function Trips () {
+  // const [billData, setBillData] = useState({})
   const [loadingBills, setLoadingBills] = useState(true)
   const [errorBills, setErrorBills] = useState(null)
+  const [tripplan, setTripplan] = useState({})
 
   const [filters, setFilters] = useState({
     isPaid: 's',
@@ -82,44 +83,44 @@ function Bills() {
     setValue(newValue)
   }
 
-  useEffect(() => {
-    const token = localStorage.getItem('token')
+  // useEffect(() => {
+  //   const token = localStorage.getItem('token')
 
-    setLoadingBills(true)
-    if (token) {
-      const queryString = getQueryString({
-        ...value,
-        ...filters,
-      })
+  //   setLoadingBills(true)
+  //   if (token) {
+  //     const queryString = getQueryString({
+  //       ...value,
+  //       ...filters,
+  //     })
 
-      console.log('queryString:', queryString)
+  //     console.log('queryString:', queryString)
 
-      axios
-        .get(getBaseUrl() + queryString, {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        })
-        .then((res) => {
-          setBillData(res.data)
-          console.log(res.data)
-          setLoadingBills(false)
-          setErrorBills(null)
-        })
-        .catch((err) => {
-          setErrorBills(err)
-          console.log(err)
-          setLoadingBills(false)
-        })
-    }
-  }, [
-    value,
-    filters.isPaid,
-    filters.isVerified,
-    filters.landfillId,
-    filters.stsId,
-    filters.vehicleId,
-  ])
+  //     axios
+  //       .get(getBaseUrl() + queryString, {
+  //         headers: {
+  //           Authorization: `Bearer ${token}`,
+  //         },
+  //       })
+  //       .then((res) => {
+  //         setBillData(res.data)
+  //         console.log(res.data)
+  //         setLoadingBills(false)
+  //         setErrorBills(null)
+  //       })
+  //       .catch((err) => {
+  //         setErrorBills(err)
+  //         console.log(err)
+  //         setLoadingBills(false)
+  //       })
+  //   }
+  // }, [
+  //   value,
+  //   filters.isPaid,
+  //   filters.isVerified,
+  //   filters.landfillId,
+  //   filters.stsId,
+  //   filters.vehicleId,
+  // ])
 
   const colors = [
     { b: 'bg-blue-100', c: 'text-blue-700' },
@@ -140,19 +141,22 @@ function Bills() {
     const token = localStorage.getItem('token')
     if (token) {
       axios
-        .get(getBaseUrl() + '/dashboard-bills-filter', {
+        .get(getBaseUrl() + '/tripplan', {
           headers: {
             Authorization: `Bearer ${token}`,
           },
         })
         .then((res) => {
-          setValues(res.data)
+          setTripplan(res.data)
+          console.log(res.data)
+          setLoadingBills(false)
+          setErrorBills(null)
         })
         .catch((err) => {
           console.log(err)
         })
     }
-  }, [])
+  }, [tripplan.length])
 
   return (
     <NoSSR>
@@ -261,8 +265,8 @@ function Bills() {
         ) : (
           <div>
             <div className=" my-4 flex flex-row justify-between space-x-2">
-              {billData?.additionalData &&
-                billData?.additionalData.map((item, i) => {
+              {tripplan?.additionalData &&
+                tripplan?.additionalData.map((item, i) => {
                   return (
                     <div
                       key={item.name + i}
@@ -310,16 +314,16 @@ function Bills() {
             <div className="text-red-500">Error loading data</div>
           </div>
         ) : (
-          <BillItems bills={billData?.bills} />
+          <TripPlanItems tripplan={tripplan} />
         )}
       </div>
     </NoSSR>
   )
 }
 
-export default Bills
+export default Trips
 
-Bills.getLayout = function getLayout(page) {
+Trips.getLayout = function getLayout(page) {
   // eslint-disable-next-line react/react-in-jsx-scope
   return <Layout>{page}</Layout>
 }