diff --git a/src/app/closing/detail/page.tsx b/src/app/closing/detail/page.tsx
index 1b4ebc45..f85dfbe3 100644
--- a/src/app/closing/detail/page.tsx
+++ b/src/app/closing/detail/page.tsx
@@ -24,6 +24,11 @@ const ClosingDetailPage = () => {
     () => ClosingApi.getPenjualan(Number(closingId))
   );
 
+  const { data: hppEkspedisiData, isLoading: isLoadingHppEkspedisi } = useSWR(
+    closingId ? `hpp-ekspedisi-${closingId}` : null,
+    () => ClosingApi.getHppEkspedisi(Number(closingId))
+  );
+
   if (!closingId) {
     router.back();
 
@@ -39,7 +44,7 @@ const ClosingDetailPage = () => {
     return;
   }
 
-  const isLoading = isLoadingClosing || isLoadingSales;
+  const isLoading = isLoadingClosing || isLoadingSales || isLoadingHppEkspedisi;
 
   return (
     <div className='w-full p-4 flex flex-row justify-center'>
@@ -50,6 +55,11 @@ const ClosingDetailPage = () => {
           id={Number(closingId)}
           initialValue={closing.data}
           salesData={isResponseSuccess(salesData) ? salesData.data : undefined}
+          costOfRevenueExpeditionData={
+            isResponseSuccess(hppEkspedisiData)
+              ? hppEkspedisiData.data
+              : undefined
+          }
         />
       )}
     </div>
diff --git a/src/components/pages/closing/hpp-ekspedisi/CostOfRevenueExpeditionReportTable.tsx b/src/components/pages/closing/hpp-ekspedisi/CostOfRevenueExpeditionReportTable.tsx
index 4ca0b5ac..57cf70eb 100644
--- a/src/components/pages/closing/hpp-ekspedisi/CostOfRevenueExpeditionReportTable.tsx
+++ b/src/components/pages/closing/hpp-ekspedisi/CostOfRevenueExpeditionReportTable.tsx
@@ -21,25 +21,16 @@ const CostOfRevenueExpeditionReportTable = ({
 }: CostOfRevenueExpeditionReportTableProps) => {
   const costOfRevenueExpeditionData: BaseCostOfRevenueExpedition[] =
     useMemo(() => {
-      return initialValues?.cos_expeditions || [];
+      return initialValues?.expedition_costs || [];
     }, [initialValues]);
 
   const totals = useMemo(() => {
-    if (costOfRevenueExpeditionData.length === 0) {
-      return {
-        totalHpp: 0,
-      };
-    }
-
-    const totalHpp = costOfRevenueExpeditionData.reduce(
-      (sum, item) => sum + (item.hpp || 0),
-      0
-    );
+    const totalHpp = initialValues?.total_hpp_amount || 0;
 
     return {
       totalHpp,
     };
-  }, [costOfRevenueExpeditionData]);
+  }, [initialValues]);
 
   const costOfRevenueExpeditionColumns: ColumnDef<BaseCostOfRevenueExpedition>[] =
     useMemo(
@@ -58,14 +49,14 @@ const CostOfRevenueExpeditionReportTable = ({
           ),
         },
         {
-          id: 'expedition_name',
-          accessorKey: 'expedition_name',
+          id: 'expedition_vendor_name',
+          accessorKey: 'expedition_vendor_name',
           header: 'Nama Ekspedisi',
           cell: (props) => props.getValue() || '-',
         },
         {
-          id: 'hpp',
-          accessorKey: 'hpp',
+          id: 'hpp_amount',
+          accessorKey: 'hpp_amount',
           header: 'HPP Ekspedisi',
           cell: (props) => {
             const value = props.getValue() as number;
diff --git a/src/services/api/closing.ts b/src/services/api/closing.ts
index 6ce32995..90b0ce5c 100644
--- a/src/services/api/closing.ts
+++ b/src/services/api/closing.ts
@@ -6,6 +6,7 @@ import {
   ClosingGeneralInformation,
   ClosingIncomingSapronak,
   ClosingOutgoingSapronak,
+  ClosingCostOfRevenueExpedition,
 } from '@/types/api/closing';
 import { httpClient, httpClientFetcher } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
@@ -33,6 +34,28 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
     }
   }
 
+  async getHppEkspedisi(
+    id: number
+  ): Promise<BaseApiResponse<ClosingCostOfRevenueExpedition> | undefined> {
+    try {
+      const getHppEkspedisiPath = `${this.basePath}/${id}/hpp-ekspedisi`;
+      const getHppEkspedisiRes =
+        await httpClient<BaseApiResponse<ClosingCostOfRevenueExpedition>>(
+          getHppEkspedisiPath
+        );
+      return getHppEkspedisiRes;
+    } catch (error) {
+      if (
+        axios.isAxiosError<BaseApiResponse<ClosingCostOfRevenueExpedition>>(
+          error
+        )
+      ) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
   async getAllIncomingSapronakFetcher(
     endpoint: string
   ): Promise<BaseApiResponse<ClosingIncomingSapronak[]>> {
diff --git a/src/types/api/closing.d.ts b/src/types/api/closing.d.ts
index c3e1c280..e55cb317 100644
--- a/src/types/api/closing.d.ts
+++ b/src/types/api/closing.d.ts
@@ -7,26 +7,6 @@ import { Product } from '@type/api/master-data/product';
 import { Customer } from '@type/api/master-data/customer';
 import { BaseMetadata } from '@/types/api/api-general';
 
-export type BaseSales = {
-  id: number;
-  realization_date: string;
-  age: number;
-  do_number: string;
-  product: Product;
-  customer: Customer;
-  qty: number;
-  weight: number;
-  avg_weight: number;
-  price: number;
-  total_price: number;
-  kandang: Kandang;
-  payment_status: string;
-};
-
-export type BaseClosingSales = {
-  sales: BaseSales[];
-};
-
 export type BaseClosing = {
   id: number;
   location_id: number;
@@ -44,22 +24,6 @@ export type BaseClosing = {
 
 export type Closing = BaseMetadata & BaseClosing;
 
-export type BaseCostOfRevenueExpedition = {
-  id: number;
-  expedition_name: string;
-  hpp: number;
-};
-
-export type BaseClosingCostOfRevenueExpedition = {
-  project_type: string;
-  flock_id: number;
-  period: number;
-  cos_expeditions: BaseCostOfRevenueExpedition[];
-};
-
-export type ClosingCostOfRevenueExpedition = BaseMetadata &
-  BaseClosingCostOfRevenueExpedition;
-
 export type BaseClosingGeneralInformation = BaseClosing & {
   flock_id: number;
   period: number;
@@ -91,4 +55,42 @@ export type ClosingIncomingSapronak = {
 };
 
 export type ClosingOutgoingSapronak = ClosingIncomingSapronak;
+
+export type BaseSales = {
+  id: number;
+  realization_date: string;
+  age: number;
+  do_number: string;
+  product: Product;
+  customer: Customer;
+  qty: number;
+  weight: number;
+  avg_weight: number;
+  price: number;
+  total_price: number;
+  kandang: Kandang;
+  payment_status: string;
+};
+
+export type BaseClosingSales = {
+  sales: BaseSales[];
+};
+
 export type ClosingSales = BaseMetadata & BaseClosingSales;
+
+export type BaseCostOfRevenueExpedition = {
+  id: number;
+  expedition_vendor_id: number;
+  expedition_vendor_name: string;
+  qty: number;
+  unit_price: number;
+  hpp_amount: number;
+};
+
+export type BaseClosingCostOfRevenueExpedition = {
+  expedition_costs: BaseCostOfRevenueExpedition[];
+  total_hpp_amount: number;
+};
+
+export type ClosingCostOfRevenueExpedition = BaseMetadata &
+  BaseClosingCostOfRevenueExpedition;