diff --git a/src/components/pages/expense/ExpenseRealizationContent.tsx b/src/components/pages/expense/ExpenseRealizationContent.tsx
index 57dc74c4..ccd57ec3 100644
--- a/src/components/pages/expense/ExpenseRealizationContent.tsx
+++ b/src/components/pages/expense/ExpenseRealizationContent.tsx
@@ -16,7 +16,7 @@ import {
 } from '@/components/pages/expense/form/ExpenseRequestForm.schema';
 import { ExpenseApi } from '@/services/api/expense';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { ACCEPTED_FILE_TYPE } from '@/config/constant';
+import { ACCEPTED_FILE_TYPE, S3_PUBLIC_BASE_URL } from '@/config/constant';
 
 interface ExpenseRealizationContentProps {
   initialValues?: Expense;
@@ -103,24 +103,32 @@ const ExpenseRealizationContent = ({
                     initialValues?.realization_docs.length > 0 && (
                       <ul className='list-disc'>
                         {initialValues?.realization_docs.map(
-                          (realizationDocument, realizationDocumentIdx) => (
-                            <li key={realizationDocumentIdx}>
-                              <Link
-                                href={realizationDocument.path}
-                                target='_blank'
-                                rel='noopener noreferrer'
-                                className='text-blue-500 underline'
-                              >
-                                {realizationDocument.path}{' '}
-                                <Icon
-                                  icon='cuida:open-in-new-tab-outline'
-                                  width={12}
-                                  height={12}
-                                  className='inline'
-                                />
-                              </Link>
-                            </li>
-                          )
+                          (realizationDocument, realizationDocumentIdx) => {
+                            const path = realizationDocument.path.startsWith(
+                              '/'
+                            )
+                              ? realizationDocument.path.slice(1)
+                              : realizationDocument.path;
+                            const documentUrl = `${S3_PUBLIC_BASE_URL}/${path}`;
+                            return (
+                              <li key={realizationDocumentIdx}>
+                                <Link
+                                  href={documentUrl}
+                                  target='_blank'
+                                  rel='noopener noreferrer'
+                                  className='text-blue-500 underline'
+                                >
+                                  {realizationDocument.path}{' '}
+                                  <Icon
+                                    icon='cuida:open-in-new-tab-outline'
+                                    width={12}
+                                    height={12}
+                                    className='inline'
+                                  />
+                                </Link>
+                              </li>
+                            );
+                          }
                         )}
                       </ul>
                     )}
diff --git a/src/components/pages/expense/ExpenseRequestContent.tsx b/src/components/pages/expense/ExpenseRequestContent.tsx
index b561ff29..bff371df 100644
--- a/src/components/pages/expense/ExpenseRequestContent.tsx
+++ b/src/components/pages/expense/ExpenseRequestContent.tsx
@@ -27,7 +27,7 @@ import {
   UploadRequestDocumentsFormSchema,
   UploadRequestDocumentsFormValues,
 } from '@/components/pages/expense/form/ExpenseRequestForm.schema';
-import { ACCEPTED_FILE_TYPE } from '@/config/constant';
+import { ACCEPTED_FILE_TYPE, S3_PUBLIC_BASE_URL } from '@/config/constant';
 import { ExpenseApi } from '@/services/api/expense';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { EXPENSE_REQUEST_APPROVAL_LINE } from '@/config/approval-line';
@@ -489,24 +489,32 @@ const ExpenseRequestContent = ({
                         initialValues?.documents.length > 0 && (
                           <ul className='list-disc'>
                             {initialValues?.documents.map(
-                              (requestDocument, requestDocumentIdx) => (
-                                <li key={requestDocumentIdx}>
-                                  <Link
-                                    href={requestDocument.path}
-                                    target='_blank'
-                                    rel='noopener noreferrer'
-                                    className='text-blue-500 underline'
-                                  >
-                                    {requestDocument.path}{' '}
-                                    <Icon
-                                      icon='cuida:open-in-new-tab-outline'
-                                      width={12}
-                                      height={12}
-                                      className='inline'
-                                    />
-                                  </Link>
-                                </li>
-                              )
+                              (requestDocument, requestDocumentIdx) => {
+                                const path = requestDocument.path.startsWith(
+                                  '/'
+                                )
+                                  ? requestDocument.path.slice(1)
+                                  : requestDocument.path;
+                                const documentUrl = `${S3_PUBLIC_BASE_URL}/${path}`;
+                                return (
+                                  <li key={requestDocumentIdx}>
+                                    <Link
+                                      href={documentUrl}
+                                      target='_blank'
+                                      rel='noopener noreferrer'
+                                      className='text-blue-500 underline'
+                                    >
+                                      {requestDocument.path}{' '}
+                                      <Icon
+                                        icon='cuida:open-in-new-tab-outline'
+                                        width={12}
+                                        height={12}
+                                        className='inline'
+                                      />
+                                    </Link>
+                                  </li>
+                                );
+                              }
                             )}
                           </ul>
                         )}
diff --git a/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts b/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts
index f22e72ed..1f3682ea 100644
--- a/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts
+++ b/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts
@@ -1,6 +1,7 @@
 import * as Yup from 'yup';
 import { Expense } from '@/types/api/expense';
 import { formatDate } from '@/lib/helper';
+import { S3_PUBLIC_BASE_URL } from '@/config/constant';
 
 type ExpenseRealizationFormSchemaType = {
   category?: {
@@ -138,10 +139,13 @@ export const getExpenseRealizationFormInitialValues = (
           label: initialValues.supplier.name,
         }
       : undefined,
-    existing_documents: initialValues?.realization_docs?.map((doc) => ({
-      name: doc.path,
-      url: doc.path,
-    })),
+    existing_documents: initialValues?.realization_docs?.map((doc) => {
+      const path = doc.path.startsWith('/') ? doc.path.slice(1) : doc.path;
+      return {
+        name: doc.path,
+        url: `${S3_PUBLIC_BASE_URL}/${path}`,
+      };
+    }),
     documents: [],
     realizations: initialValues?.kandangs
       ? initialValues.kandangs.map((kandangExpense) => {
diff --git a/src/components/pages/expense/form/ExpenseRequestForm.schema.ts b/src/components/pages/expense/form/ExpenseRequestForm.schema.ts
index f0dfecd7..71357361 100644
--- a/src/components/pages/expense/form/ExpenseRequestForm.schema.ts
+++ b/src/components/pages/expense/form/ExpenseRequestForm.schema.ts
@@ -1,6 +1,7 @@
 import * as Yup from 'yup';
 import { Expense } from '@/types/api/expense';
 import { formatDate } from '@/lib/helper';
+import { S3_PUBLIC_BASE_URL } from '@/config/constant';
 
 type ExpenseFormSchemaType = {
   category?: {
@@ -144,11 +145,14 @@ export const getExpenseFormInitialValues = (
           label: initialValues.supplier.name,
         }
       : undefined,
-    existing_documents: initialValues?.documents?.map((doc) => ({
-      id: doc.id,
-      name: doc.path,
-      url: doc.path,
-    })),
+    existing_documents: initialValues?.documents?.map((doc) => {
+      const path = doc.path.startsWith('/') ? doc.path.slice(1) : doc.path;
+      return {
+        id: doc.id,
+        name: doc.path,
+        url: `${S3_PUBLIC_BASE_URL}/${path}`,
+      };
+    }),
     deleted_documents: [],
     documents: [],
     expense_nonstocks: initialValues?.kandangs
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 047ed279..508bf14f 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -349,6 +349,9 @@ export const ACCEPTED_FILE_TYPE = {
   },
 };
 
+export const S3_PUBLIC_BASE_URL = process.env
+  .NEXT_PUBLIC_S3_PUBLIC_BASE_URL as string;
+
 export const FILTER_TYPE_OPTIONS = [
   {
     label: 'Tanggal Realisasi',