diff --git a/package-lock.json b/package-lock.json
index ffe8398..8ed6485 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2607,6 +2607,7 @@
       "version": "1.7.7",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
       "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
diff --git a/src/components/transactionsComponets/Table.jsx b/src/components/transactionsComponets/Table.jsx
index c8a0ddd..62475a2 100644
--- a/src/components/transactionsComponets/Table.jsx
+++ b/src/components/transactionsComponets/Table.jsx
@@ -228,4 +228,4 @@ function Table() {
   );
 }
 
-export default Table;
+export default Table;
\ No newline at end of file
diff --git a/src/components/transactionsComponets/WithdrawalHistory.jsx b/src/components/transactionsComponets/WithdrawalHistory.jsx
index 2fd1a9a..8daf145 100644
--- a/src/components/transactionsComponets/WithdrawalHistory.jsx
+++ b/src/components/transactionsComponets/WithdrawalHistory.jsx
@@ -1,18 +1,21 @@
 import React, { useState } from "react";
-import { Badge } from "../../components/ui/badge"
+
+import { Badge } from "@/components/ui/badge";
 import { IoIosArrowForward, IoIosArrowBack } from "react-icons/io";
-import { Button } from "../../components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-  } from "../../components/ui/card"
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { MdCheck } from "react-icons/md";
-import { Separator } from "../../components/ui/separator"
-import logo from '../../assets/icons/Group 1000002785.png'
+import { Separator } from "@/components/ui/separator";
+import logo from "../../assets/Group 1000002785.png";
+import axios from "axios"; // Axios import
+
 
 const tableItems = [
   {
@@ -21,73 +24,24 @@ const tableItems = [
     receipt: "View",
     status: "successful",
   },
-  {
-    date: "Sept 12, 08:55pm",
-    amount: "30,000,000",
-    receipt: "View",
-    status: "successful",
-},
-{
-    date: "Sept 12, 08:55pm",
-    amount: "30,000,000",
-    receipt: "View",
-    status: "successful",
-},
-{
-    date: "Sept 12, 08:55pm",
-    amount: "30,000,000",
-    receipt: "View",
-    status: "successful",
-},
-{
-    date: "Sept 12, 08:55pm",
-    amount: "30,000,000",
-    receipt:"View",
-    status: "successful",
-},
-{
-    date: "Sept 12, 08:55pm",
-    amount: "30,000,000",
-    receipt: "View",
-    status: "successful",
-  },
-  {
-    date: "Sept 12, 08:55pm",
-    amount: "30,000,000",
-    receipt: "View",
-    status: "successful",
-},
-{
-    date: "Sept 12, 08:55pm",
-    amount: "30,000,000",
-    receipt: "View",
-    status: "successful",
-},
-{
-    date: "Sept 12, 08:55pm",
-    amount: "30,000,000",
-    receipt: "View",
-    status: "successful",
-},
-{
-    date: "Sept 12, 08:55pm",
-    amount: "30,000,000",
-    receipt:"View",
-    status: "successful",
-},
+  //... other items
 ];
 
 // Number of items per page
 const itemsPerPage = 6;
 
 function Withdraw() {
-  const [pages, setPages] = useState(["1", "2", "3", , "...", "8", "9", "10",])
+  const [pages, setPages] = useState(["1", "2", "3", "...", "8", "9", "10"]);
   const [currentPage, setCurrentPage] = useState(1);
   const totalPages = Math.ceil(tableItems.length / itemsPerPage);
   const currentItems = tableItems.slice(
     (currentPage - 1) * itemsPerPage,
     currentPage * itemsPerPage
   );
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [errorMessage, setErrorMessage] = useState("");
+
   const handleNextPage = () => {
     setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages));
   };
@@ -95,17 +49,33 @@ function Withdraw() {
     setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
   };
 
-  const [popupVisible, setPopupVisible] = useState(false);
-  const [selectedItem, setSelectedItem] = useState(null);
-
-  const handleReceiptClick = (item) => {
-    setSelectedItem(item);
-    setPopupVisible(true);
+  const handleReceiptClick = async (item) => {
+    try {
+      const response = await axios.get(
+        "https://api.propertyhive.com.ng/api/v1/invoice/1",
+        {
+          headers: {
+            Authorization: `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzI4MzEzMzYwLCJpYXQiOjE3MjgzMDYxNjAsImp0aSI6ImI5NjY3ZDhjYjI3ZjQyMTFhZDM4ZjYxODk1OTAzOTRiIiwidXNlcl9pZCI6NX0.0WunVWGIdQt_d_xpwuvuOOLN3s4vIfrjQxqBcAvvSmI`,
+          },
+        }
+      );      
+      if (response.data) {
+        setSelectedItem({ ...item, ...response.data });
+        setErrorMessage("");
+        setPopupVisible(true);
+      } else {
+        setErrorMessage("No data fetched");
+      }
+    } catch (error) {
+      setErrorMessage("Error fetching data");
+      console.error("Error fetching data:", error);
+    }
   };
 
   const handleClosePopup = () => {
     setPopupVisible(false);
     setSelectedItem(null);
+    setErrorMessage("");
   };
 
   return (
@@ -136,17 +106,19 @@ function Withdraw() {
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">{item.date}</td>
                   <td className="px-6 py-4 whitespace-nowrap">
-                    <Badge variant="outline" className="text-[#5FC92E]">{item.status}</Badge>
+                    <Badge variant="outline" className="text-[#5FC92E]">
+                      {item.status}
+                    </Badge>
                   </td>
                   <td className="px-6 py-4 whitespace-nowrap">
-                  <Button
+                    <Button
                       variant="link"
                       className="text-[#389294]"
                       onClick={() => handleReceiptClick(item)}
                     >
                       {item.receipt}
                     </Button>
-                    </td>
+                  </td>
                 </tr>
               ))}
             </tbody>
@@ -160,24 +132,28 @@ function Withdraw() {
               Page {currentPage} of {totalPages}
             </div>
             <div className="flex items-center gap-32" aria-label="Pagination">
-            <ul className="flex items-center gap-1">
-                {pages.map((item, idx) => (
-                    <li key={item}>
+              <ul className="flex items-center gap-1">
+                {pages.map((item) => (
+                  <li key={item}>
                     {item === "..." ? (
-                        <div>{item}</div>
+                      <div>{item}</div>
                     ) : (
-                        <button
+                      <button
                         onClick={() => setCurrentPage(Number(item))}
                         aria-current={currentPage == item ? "page" : undefined}
                         className={`px-3 py-2 rounded-lg duration-150 hover:text-white hover:bg-[#389294] 
-                            ${currentPage == item ? "border border-[#389294] text-[#389294] font-medium" : "text-gray-600"}`}
-                        >                          
+                            ${
+                              currentPage == item
+                                ? "border border-[#389294] text-[#389294] font-medium"
+                                : "text-gray-600"
+                            }`}
+                      >
                         {item}
-                        </button>
+                      </button>
                     )}
-                    </li>
+                  </li>
                 ))}
-                </ul>
+              </ul>
               <div className="flex gap-4">
                 <button
                   onClick={handlePreviousPage}
@@ -207,7 +183,9 @@ function Withdraw() {
 
           {/* Mobile Pagination */}
           <div className="flex items-center justify-between text-sm text-gray-600 font-medium md:hidden">
-            <div className="font-semi-bold">Page {currentPage} of {totalPages}</div>
+            <div className="font-semi-bold">
+              Page {currentPage} of {totalPages}
+            </div>
             <button
               onClick={handlePreviousPage}
               disabled={currentPage === 1}
@@ -226,10 +204,17 @@ function Withdraw() {
         </div>
       </div>
 
+      {/* Popup for Receipt */}
       {popupVisible && selectedItem && (
-          <div className="fixed inset-0 flex items-center justify-center z-50">
-            <div className="absolute inset-0 bg-black opacity-50" onClick={handleClosePopup}></div>
-            <div className="relative p-6 bg-white rounded-lg  max-w-md">
+        <div className="fixed inset-0 flex items-center justify-center z-50">
+          <div
+            className="absolute inset-0 bg-black opacity-50"
+            onClick={handleClosePopup}
+          ></div>
+          <div className="relative p-6 bg-white rounded-lg max-w-md">
+            {errorMessage ? (
+              <div className="text-red-500">{errorMessage}</div>
+            ) : (
               <Card className="w-full max-w-sm">
                 <CardHeader className="pb-2">
                   <CardTitle className="text-xl font-semibold flex flex-col items-center text-gray-500">
@@ -241,52 +226,50 @@ function Withdraw() {
                         <MdCheck />
                       </span>
                     </div>
-                    Withdrawal Successful
+                    <span>Transaction successful</span>
                   </CardTitle>
                 </CardHeader>
-                <CardDescription className="text-center text-3xl font-semibold text-black">
-                  ₦{selectedItem.amount}
-                </CardDescription>
-                <CardContent className="p-6 text-sm">
-                  <Separator className="my-2" />
-                  <ul className="grid gap-3">
-                    <li className="flex items-center justify-between">
-                      <span className="text-base">Ref Number</span>
-                      <span>000085752257</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-base">Payment Time</span>
-                      <span>{selectedItem.date}</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-base">Account Name</span>
-                      <span>John James</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-base">Payment Number</span>
-                      <span>1234567890</span>
-                    </li>
-                    <li className="flex items-center justify-between">
-                      <span className="text-base">Bank</span>
-                      <span>Guaranty Bank PLC</span>
-                    </li>
-                  </ul>
+                <CardContent className="grid gap-4">
+                  <div className="flex justify-between">
+                    <CardDescription>Amount</CardDescription>
+                    <span className="font-semibold text-md">
+                      ₦ {selectedItem.amount}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <CardDescription>Fee</CardDescription>
+                    <span className="font-semibold text-md">
+                      ₦ {selectedItem.fee}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <CardDescription>Date</CardDescription>
+                    <span className="font-semibold text-md">
+                      {selectedItem.date}
+                    </span>
+                  </div>
+                  <Separator />
+                  <div className="flex justify-between">
+                    <CardDescription>Receipt</CardDescription>
+                    <span className="font-semibold text-md">
+                      {selectedItem.receipt}
+                    </span>
+                  </div>
                 </CardContent>
-                <CardFooter className="flex flex-col items-center">
+                <CardFooter className="flex justify-center">
                   <Button
-                    variant="outline"
-                    className="w-full gap-1.5 text-sm border-[#389294]"
+                    variant="default"
+                    size="md"
+                    onClick={handleClosePopup}
                   >
-                    <span className="text-[#389294]">Download Receipt</span>
+                    Close
                   </Button>
-                  <div className="mt-6">
-                    <img src={logo} alt="logo" />
-                  </div>
                 </CardFooter>
               </Card>
-            </div>
+            )}
           </div>
-        )}
+        </div>
+      )}
     </>
   );
 }
diff --git a/src/components/transactionsComponets/transactionDetails.jsx b/src/components/transactionsComponets/transactionDetails.jsx
index 907d12c..a8d1f33 100644
--- a/src/components/transactionsComponets/transactionDetails.jsx
+++ b/src/components/transactionsComponets/transactionDetails.jsx
@@ -1,130 +1,190 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { DollarSign, Paperclip, Phone } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import {
-    DollarSign,
-    Paperclip,
-    Phone,
-} from "lucide-react";
-import { Button } from "../ui/button"
-import {
-    Avatar,
-    AvatarFallback,
-    AvatarImage,
-} from "../ui/avatar";
+
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar";
 import {
-    Card,
-    CardContent,
-    CardHeader,
-    CardTitle,
-} from "../ui/card";
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
+export function Details() {
+  const [transactionData, setTransactionData] = useState(null);
+  const [error, setError] = useState(null);
 
-const tableItems = [
-    {
-        date: "Sept 12, 08:55pm",
-        amount: "30,000,000",
-        document: "pending",
-        status: "full payment",
-    },
-];
+  useEffect(() => {
+    const fetchTransaction = async () => {
+      try {
+        const response = await axios.get(
+          "https://api.propertyhive.com.ng/api/v1/transactions/1/",
+          {
+            headers: {
+              Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzI4NTAyMzQ4LCJpYXQiOjE3Mjg0OTUxNDgsImp0aSI6IjFmYmE0ZWVlNWFlNDQ2MzJiZDFjNGMxYThiYmNjZmZmIiwidXNlcl9pZCI6NX0.rHQpbeuvBsrrONhYu0hgEdj4iHRgls0MrwcPeBfVcoY`,
+            },
+          }
+        );
+        console.log("Transaction Data:", response.data); // Debugging line
+        setTransactionData(response.data); // Adjust this if needed based on response structure
+      } catch (error) {
+        if (error.response && error.response.status === 403) {
+          setError("You are not authorized to view this data. Please check your token or permissions.");
+        } else {
+          setError(error.response?.statusText || error.message);
+        }
+        console.error("Error fetching transaction:", error.response || error);
+      }
+    };
 
-export function Details() {
-    return (
-        <div className="flex min-h-screen w-full flex-col">
-            <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
-                <Card className="w-full">
-                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                        <div className="flex items-center">
-                            <Avatar className="hidden h-9 w-9 sm:flex">
-                                <AvatarImage src="/avatars/01.png" alt="Avatar" />
-                                <AvatarFallback>OM</AvatarFallback>
-                            </Avatar>
-                            <div className="ml-2">
-                                <CardTitle className="text-md font-semibold">John James</CardTitle>
-                                <div className="flex items-center text-sm text-muted-foreground">
-                                    <Phone className="h-4 w-4 text-green-500 mr-1" />
-                                    08040951697
-                                </div>
-                            </div>
-                        </div>
-                    </CardHeader>
-                    <CardContent>
-                    </CardContent>
-                </Card>
-                <div className="grid gap-2 md:gap-4 md:grid-cols-2 lg:grid-cols-4">
-                    <Card className="md:col-span-2 xl:col-span-3">
-                        <CardHeader className="flex flex-row items-center">
-                            <div className="grid gap-2">
-                                <CardTitle>Transactions</CardTitle>
-                            </div>
-                        </CardHeader>
-                        <CardContent>
-                            <div className="max-w-screen-xl mx-auto px-4 md:px-8">
-                                <div className="mt-6 shadow-sm border rounded-lg overflow-x-auto">
-                                    <table className="w-full table-auto text-sm text-left">
-                                        <thead className="bg-gray-50 text-gray-600 font-light border-b">
-                                            <tr className="divide-x bg-[#203F41] text-white">
-                                                <th className="py-3 px-6">S/N</th>
-                                                <th className="py-3 px-6">Amount(₦)</th>
-                                                <th className="py-3 px-6">Date</th>
-                                                <th className="py-3 px-6">Document</th>
-                                                <th className="py-3 px-6">Status</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody className="text-gray-600 divide-y">
-                                            {tableItems.map((item, idx) => (
-                                                <tr key={idx} className="divide-x">
-                                                    <td className="px-6 py-4 whitespace-nowrap flex items-center gap-x-6">
-                                                        <span>{idx + 1}</span>
-                                                    </td>
-                                                    <td className="px-6 py-4 whitespace-nowrap">
-                                                        <div className="inline-flex items-center">
-                                                            {item.amount}
-                                                        </div>
-                                                    </td>
-                                                    <td className="px-6 py-4 whitespace-nowrap">{item.date}</td>
-                                                    <td className="px-6 py-4 whitespace-nowrap text-[#E29400]">• {item.document}</td>
-                                                    <td className="px-6 py-4 whitespace-nowrap text-blue-500">
-                                                        {item.status}
-                                                    </td>
-                                                </tr>
-                                            ))}
-                                        </tbody>
-                                    </table>
-                                </div>
+    fetchTransaction();
+  }, []);
+
+  return (
+    <div className="flex min-h-screen w-full flex-col">
+      <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+        <Card className="w-full">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <div className="flex items-center">
+              <Avatar className="hidden h-9 w-9 sm:flex">
+                <AvatarImage src="/avatars/01.png" alt="Avatar" />
+                <AvatarFallback>OM</AvatarFallback>
+              </Avatar>
+              <div className="ml-2">
+                <CardTitle className="text-md font-semibold">
+                  John James
+                </CardTitle>
+                <div className="flex items-center text-sm text-muted-foreground">
+                  <Phone className="h-4 w-4 text-green-500 mr-1" />
+                  08040951697
+                </div>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent></CardContent>
+        </Card>
+
+        <div className="grid gap-2 md:gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <Card className="md:col-span-2 xl:col-span-3">
+            <CardHeader className="flex flex-row items-center">
+              <div className="grid gap-2">
+                <CardTitle>Transactions</CardTitle>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="max-w-screen-xl mx-auto px-4 md:px-8">
+                <div className="mt-6 shadow-sm border rounded-lg overflow-x-auto">
+                  <table className="w-full table-auto text-sm text-left">
+                    <thead className="bg-gray-50 text-gray-600 font-light border-b">
+                      <tr className="divide-x bg-[#203F41] text-white">
+                        <th className="py-3 px-6">S/N</th>
+                        <th className="py-3 px-6">Amount(₦)</th>
+                        <th className="py-3 px-6">Date</th>
+                        <th className="py-3 px-6">Document</th>
+                        <th className="py-3 px-6">Status</th>
+                      </tr>
+                    </thead>
+                    <tbody className="text-gray-600 divide-y">
+                      {error ? (
+                        <tr className="divide-x">
+                          <td colSpan={5} className="px-6 py-4 text-red-500 text-center">
+                            Error fetching data: {error}
+                          </td>
+                        </tr>
+                      ) : !transactionData ? (
+                        <tr className="divide-x">
+                          <td colSpan={5} className="px-6 py-4 text-gray-500 text-center">
+                            No transactions available
+                          </td>
+                        </tr>
+                      ) : (
+                        <tr className="divide-x">
+                          <td className="px-6 py-4 whitespace-nowrap flex items-center gap-x-6">
+                            <span>1</span>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            <div className="inline-flex items-center text-black font-semibold">
+                              {transactionData.total_amount}
                             </div>
-                            <p className="leading-7 [&:not(:first-child)]:mt-6 font-semibold text-[#4B5353] flex items-center justify-center">
-                                John James has completed payment, kindly proceed to <br /> send the necessary documents, the funds will be
-                                locked <br /> until verification has been done by the buyer.
-                            </p>
-                        </CardContent>
-                    </Card>
-                    <Card>
-                        <CardHeader>
-                            <CardTitle className="ml-9 text-lg text-[#255A5D]">Full Payment</CardTitle>
-                        </CardHeader>
-                        <CardContent className="grid gap-4">
-                            <img src="/src/assets/frame01.jpg" alt="Payment Illustration" className="w-28 rounded-lg ml-10 h-auto" />
-                            <p className="text-sm ml-3 text-muted-foreground">
-                             Luxury Duplex, Banana Island, Lekki, Lagos state
-                            </p>
-                            <h1 className="font-semibold ml-10 text-[#255A5D]">
-                            ₦200,000,000
-                            </h1>
-                            <Button variant="ghost" className="w-full text-[#389294]">
-                                View Full details
-                            </Button>
-                            <p className="text-md ml-9 text-muted-foreground">
-                             Documents sent
-                            </p>
-                        </CardContent>
-                    </Card>
-                    {/* Button below transactions card */}
-                    <div>
-                        <Button className="w-[748px] bg-[#389294]">
-                            Send Document <span className="ml-3 font-extralight"><Paperclip/></span>
-                        </Button>
-                    </div>
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap">
+                            {/* Format the created_at date and time */}
+                            {new Date(transactionData.created_at).toLocaleString('en-US', {
+                              year: 'numeric',
+                              month: 'long',
+                              day: 'numeric',
+                              hour: 'numeric',
+                              minute: 'numeric',
+                              second: 'numeric',
+                              hour12: true,
+                            })}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-[#E29400]">
+                          • {transactionData.document ? (
+                              <span>{transactionData.document}</span>
+                            ) : (
+                              <span>Pending</span>
+                            )}
+                          </td>
+                          <td className="px-6 py-4 whitespace-nowrap text-blue-500">
+                            {transactionData.status}
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
                 </div>
-            </main>
+              </div>
+              <p className="leading-7 [&:not(:first-child)]:mt-6 font-semibold text-[#4B5353] flex items-center justify-center">
+                John James has completed payment, kindly proceed to <br />{" "}
+                send the necessary documents, the funds will be locked <br />{" "}
+                until verification has been done by the buyer.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="ml-9 text-lg text-[#255A5D]">
+                Full Payment
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="grid gap-4">
+              <img
+                src="/src/assets/frame01.jpg"
+                alt="Payment Illustration"
+                className="w-28 rounded-lg ml-10 h-auto"
+              />
+              <p className="text-sm ml-3 text-muted-foreground">
+                Luxury Duplex, Banana Island, Lekki, Lagos state
+              </p>
+              <h1 className="font-semibold ml-10 text-[#255A5D]">
+                ₦200,000,000
+              </h1>
+              <Button variant="ghost" className="w-full text-[#389294]">
+                View Full details
+              </Button>
+              <p className="text-md ml-9 text-muted-foreground">
+                Documents sent
+              </p>
+            </CardContent>
+          </Card>
+
+          <div>
+            <Button className="w-[748px] bg-[#389294]">
+              Send Document{" "}
+              <span className="ml-3 font-extralight">
+                <Paperclip />
+              </span>
+            </Button>
+          </div>
         </div>
-    );
+      </main>
+    </div>
+  );
 }