diff --git a/app/[locale]/share/attachment/[id]/not-found.tsx b/app/[locale]/share/attachment/[id]/not-found.tsx
new file mode 100644
index 0000000..c0991fe
--- /dev/null
+++ b/app/[locale]/share/attachment/[id]/not-found.tsx
@@ -0,0 +1,6 @@
+import { NotFoundPage } from '@/app/ui/NotFoundPage';
+ 
+const ShareAttachmentNotFound = () =>
+<NotFoundPage title="404 File Not Found" description="Could not find the requested shared attachment." />;
+
+export default ShareAttachmentNotFound;
\ No newline at end of file
diff --git a/app/[locale]/share/attachment/[id]/route.tsx b/app/[locale]/share/attachment/[id]/route.tsx
new file mode 100644
index 0000000..b8099f8
--- /dev/null
+++ b/app/[locale]/share/attachment/[id]/route.tsx
@@ -0,0 +1,27 @@
+import { fetchBillById } from '@/app/lib/actions/billActions';
+import { notFound } from 'next/navigation';
+
+export async function GET(request: Request, { params:{ id } }: { params: { id:string } }) {
+    const [locationID, billID] = id.split('-');
+
+    const [location, bill] = await fetchBillById(locationID, billID, true) ?? [];
+
+    if(!bill?.attachment) {
+        notFound();
+    }
+
+    // convert fileContentsBase64 from Base64 string to binary string
+    const fileContentsBuffer = Buffer.from(bill.attachment.fileContentsBase64, 'base64');
+
+    // convert fileContentsBuffer to format that can be sent to the client
+    const fileContents = new Uint8Array(fileContentsBuffer);
+    
+    return new Response(fileContents, {
+        status: 200,
+        headers: {
+            'Content-Type': "application/octet-stream",
+            'Content-Disposition': `attachment; filename="${bill.attachment.fileName}"`,
+            'Last-Modified': `${bill.attachment.fileLastModified}`
+        }
+    });
+}
\ No newline at end of file
diff --git a/app/ui/ViewBillCard.tsx b/app/ui/ViewBillCard.tsx
index 88e8350..5b85c81 100644
--- a/app/ui/ViewBillCard.tsx
+++ b/app/ui/ViewBillCard.tsx
@@ -63,7 +63,7 @@ export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {
                 attachment ?
                 <span className="textarea textarea-bordered max-w-[400px] w-full grow">
                     <p className="font-bold uppercase">{t("attachment")}</p>
-                    <Link href={`/attachment/${locationID}-${billID}/`} target="_blank" className='text-center w-full max-w-[20em] text-nowrap truncate inline-block mt-2'>
+                    <Link href={`/share/attachment/${locationID}-${billID}/`} target="_blank" className='text-center w-full max-w-[20em] text-nowrap truncate inline-block mt-2'>
                         <DocumentIcon className="h-[1em] w-[1em] text-2xl inline-block mr-1" />
                             {decodeURIComponent(attachment.fileName)}
                     </Link>
diff --git a/middleware.ts b/middleware.ts
index 9dcd075..0c03375 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -10,7 +10,7 @@ import { locales, defaultLocale } from '@/app/i18n';
 import { Session } from 'next-auth';
 
 // http://localhost:3000/share/location/675c41b227d0df76a35f106e
-const publicPages = ['/terms', '/policy', '/login', '/share/location/.*', '/share/bill/.*'];
+const publicPages = ['/terms', '/policy', '/login', '/share/location/.*', '/share/bill/.*', '/share/attachment/.*'];
  
 const intlMiddleware = createIntlMiddleware({
   locales,