diff --git a/SwiftParcel.Web/frontend/src/components/details/offer.tsx b/SwiftParcel.Web/frontend/src/components/details/offer.tsx
index 5e06750..7aa147e 100644
--- a/SwiftParcel.Web/frontend/src/components/details/offer.tsx
+++ b/SwiftParcel.Web/frontend/src/components/details/offer.tsx
@@ -49,9 +49,7 @@ export function OfferDetails({
           show={showUserDetailsModal}
           setShow={setShowUserDetailsModal}
           userId={getUserIdFromStorage()}
-          parcelId={offer.parcelId}
-          priceBreakDown={offer.priceBreakDown}
-          company={offer.companyName}
+          offer={offer}
           userData={userData}
       />
     </>
diff --git a/SwiftParcel.Web/frontend/src/components/modals/offers/userDetailsModal.tsx b/SwiftParcel.Web/frontend/src/components/modals/offers/userDetailsModal.tsx
index 8387a99..895d2d9 100644
--- a/SwiftParcel.Web/frontend/src/components/modals/offers/userDetailsModal.tsx
+++ b/SwiftParcel.Web/frontend/src/components/modals/offers/userDetailsModal.tsx
@@ -15,9 +15,7 @@ import {
     show: boolean;
     setShow: (show: boolean) => void;
     userId: any;
-    parcelId : any;
-    priceBreakDown: string;
-    company: string;
+    offer: any;
     userData: any;
   }
 
@@ -73,6 +71,19 @@ import {
       </div>
   );
 
+  const PriceBreakDownElement = ({ element }) => (
+      <div className="mb-4 border-b border-gray-200 pb-1 grid grid-cols-1 md:grid-cols-2 gap-4">
+      <Label
+          id="elementName"
+          value={`${element.description}:`}
+      />
+      <Label
+          id="elementValue"
+          value={`${element.amount} ${element.currency}`}
+      />
+    </div>
+  );
+
   const BasicInfoSection = ({ userData, handleStringChange, errors }) => (
     <div>
         <TextInputWithLabel
@@ -167,7 +178,7 @@ import {
       addressApartmentNumber: userAddress[2],
       addressCity: userAddress[3],
       addressZipCode: userAddress[4],
-      addressCountry: userAddress[5],
+      addressCountry: userAddress[5]
     });
 
     const handleStringChange = <T extends keyof UserInfo>(field: T) => (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -248,7 +259,7 @@ import {
 
       createOrder(
         props.userId,
-        props.parcelId,
+        props.offer.parcelId,
         userInfo.name,
         userInfo.email,
         userInfo.addressStreet,
@@ -257,7 +268,7 @@ import {
         userInfo.addressCity,
         userInfo.addressZipCode,
         userInfo.addressCountry,
-        props.company)
+        props.offer.company)
         .then((response) => {
           setSuccess("Offer submitted successfully!");
           setUserInfo(
@@ -295,6 +306,17 @@ import {
                   </h1>
                   <div className="flex flex-col gap-6">
 
+                    <SectionTitle title="Price break down" />
+
+                    {props.offer.priceBreakDown != null && props.offer.priceBreakDown?.length > 0 ? (
+                      props.offer.priceBreakDown?.map((element: any) => element != null ? (
+                        <PriceBreakDownElement
+                          key={element.description}
+                          element={element}
+                        />
+                      ) : null)
+                    ) : null}
+
                     <SectionTitle title="Your basic info" />
 
                     <BasicInfoSection