diff --git a/package.json b/package.json
index c637fe216..45349ca1b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.2+34",
+  "version": "0.8.2+35",
   "private": false,
   "scripts": {
     "dev": "next dev",
diff --git a/src/components/certificate/certificate_qrcode_modal.tsx b/src/components/certificate/certificate_qrcode_modal.tsx
index cb163802b..49fffb986 100644
--- a/src/components/certificate/certificate_qrcode_modal.tsx
+++ b/src/components/certificate/certificate_qrcode_modal.tsx
@@ -40,7 +40,7 @@ const CertificateQRCodeModal: React.FC<CertificateQRCodeModalProps> = ({
           <div className="text-xl font-semibold">Url</div>
           <div className="text-xs font-normal text-card-text-sub">for mobile upload</div>
         </h2>
-        <div className="mx-20 my-10">
+        <div className="mx-20 my-10 flex flex-col items-center">
           {/* Info: (20240924 - tzuhan) 發票縮略圖 */}
           <Canvas
             text={`${isDev ? 'http://192.168.2.29:3000' : DOMAIN}/${ISUNFA_ROUTE.UPLOAD}?token=${token}`}
@@ -55,6 +55,12 @@ const CertificateQRCodeModal: React.FC<CertificateQRCodeModalProps> = ({
               },
             }}
           />
+          <a
+            className="mt-2 text-center text-xs text-card-text-sub"
+            href={`${isDev ? 'http://localhost:3000' : DOMAIN}/${ISUNFA_ROUTE.UPLOAD}?token=${token}`}
+            target="_blank"
+            rel="noreferrer"
+          >{`${isDev ? 'http://localhost:3000' : DOMAIN}/${ISUNFA_ROUTE.UPLOAD}?token=${token}`}</a>
         </div>
         <div className="flex justify-end gap-2 border-t border-stroke-neutral-quaternary px-4 py-3">
           <Button
diff --git a/src/components/floating_upload_popup/floating_upload_popup.tsx b/src/components/floating_upload_popup/floating_upload_popup.tsx
index c3959ecdc..742bb5c0f 100644
--- a/src/components/floating_upload_popup/floating_upload_popup.tsx
+++ b/src/components/floating_upload_popup/floating_upload_popup.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import UploadFileItem from '@/components/upload_certificate/upload_file_item';
 import { ProgressStatus } from '@/constants/account';
 import Image from 'next/image';
@@ -10,20 +10,21 @@ interface FloatingUploadPopupProps {
 
 const FloatingUploadPopup: React.FC<FloatingUploadPopupProps> = ({ uploadingCertificates }) => {
   const [files, setFiles] = useState<ICertificateInfo[]>(uploadingCertificates);
-  // const [files, setFiles] = useState<UploadFile[]>([
-  //   { name: 'preline-ui.xls', size: 7, progress: 20, status: ProgressStatus.IN_PROGRESS },
-  //   { name: 'preline-ui.xls', size: 7, progress: 50, status: ProgressStatus.IN_PROGRESS },
-  //   { name: 'preline-ui.xls', size: 7, progress: 80, status: ProgressStatus.IN_PROGRESS },
-  // ]);
-  const [expanded, setExpanded] = useState(false); // Info: (20240919 - tzuhan) 控制展開/收縮狀態
+  const [expanded, setExpanded] = useState(false);
 
-  // Info: (20240919 - tzuhan) 計算總上傳進度和狀態
-  const totalFiles = files.length;
-  const completedFiles = files.filter((file) => file.progress === 100).length;
-  const isUploading = files.some(
-    (file) => file.progress > 0 && file.progress < 100 && file.status !== ProgressStatus.PAUSED
+  // Info: (20241009 - tzuhan) Memoize calculated values to avoid redundant recalculations
+  const totalFiles = useMemo(() => uploadingCertificates.length, [files]);
+  const completedFiles = useMemo(
+    () => uploadingCertificates.filter((file) => file.status === ProgressStatus.SUCCESS).length,
+    [files]
+  );
+  const isUploading = useMemo(
+    () =>
+      files.some(
+        (file) => file.progress > 0 && file.progress < 100 && file.status !== ProgressStatus.PAUSED
+      ),
+    [files]
   );
-
   // Info: (20240919 - tzuhan) 暫停或繼續上傳
   const updateFileStatus = (prevFiles: ICertificateInfo[], index: number) =>
     prevFiles.map((file, i) => {
@@ -48,13 +49,21 @@ const FloatingUploadPopup: React.FC<FloatingUploadPopupProps> = ({ uploadingCert
     setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
   };
 
-  return (
+  const displayed =
+    totalFiles > 0 ||
+    uploadingCertificates.filter((file) => file.status === ProgressStatus.IN_PROGRESS).length > 0;
+
+  useEffect(() => {
+    setFiles(uploadingCertificates);
+  }, [uploadingCertificates]);
+
+  const popUpBody = displayed ? (
     <div className="dashboardCardShadow fixed bottom-4 right-4 w-480px overflow-hidden">
       {/* Info: (20240919 - tzuhan) Header: 顯示標題與收縮/展開按鈕 */}
       <div className="flex items-center justify-between p-4">
         <div className="flex-auto flex-col items-center text-center">
           <div className="flex items-center justify-center space-x-2 text-lg font-semibold">
-            <Image src="/elements/cloud_upload.svg" width={24} height={24} alt="clock" />
+            <Image src="/elements/cloud_upload.svg" width={24} height={24} alt="Upload icon" />
             <div>Upload file</div>
           </div>
           {totalFiles > 0 && (
@@ -94,7 +103,9 @@ const FloatingUploadPopup: React.FC<FloatingUploadPopupProps> = ({ uploadingCert
         </div>
       )}
     </div>
-  );
+  ) : null;
+
+  return popUpBody;
 };
 
 export default FloatingUploadPopup;
diff --git a/src/constants/account.ts b/src/constants/account.ts
index 509300fdc..dc46aeb94 100644
--- a/src/constants/account.ts
+++ b/src/constants/account.ts
@@ -2,6 +2,7 @@
 // Info: (20240416 - Murky) type
 export enum ProgressStatus {
   SUCCESS = 'success',
+  FAILED = 'failed',
   IN_PROGRESS = 'inProgress',
   NOT_FOUND = 'notFound',
   ALREADY_UPLOAD = 'alreadyUpload',
diff --git a/src/constants/api_connection.ts b/src/constants/api_connection.ts
index 8a8114dca..dfa7e1b53 100644
--- a/src/constants/api_connection.ts
+++ b/src/constants/api_connection.ts
@@ -78,6 +78,7 @@ export enum APIName {
   STATUS_INFO_GET = 'STATUS_INFO_GET',
   ACCOUNT_LIST = 'ACCOUNT_LIST',
   FILE_UPLOAD = 'FILE_UPLOAD',
+  PUBLIC_FILE_UPLOAD = 'PUBLIC_FILE_UPLOAD',
   FILE_DELETE = 'FILE_DELETE',
   FILE_GET = 'FILE_GET',
   COMPANY_GET_BY_ID = 'COMPANY_GET_BY_ID',
@@ -99,6 +100,9 @@ export enum APIName {
   PUBLIC_KEY_GET = 'PUBLIC_KEY_GET',
   ZOD_EXAMPLE = 'ZOD_EXAMPLE', // Info: (20240909 - Murky) This is a Zod example, to demonstrate how to use Zod schema to validate data.
   CERTIFICATE_LIST = 'CERTIFICATE_LIST',
+  PUSHER = 'PUSHER',
+  ENCRYPT = 'ENCRYPT',
+  DECRYPT = 'DECRYPT',
 }
 
 export enum APIPath {
@@ -156,6 +160,7 @@ export enum APIPath {
   STATUS_INFO_GET = `${apiPrefix}/status_info`,
   ACCOUNT_LIST = `${apiPrefix}/company/:companyId/account`,
   FILE_UPLOAD = `${apiPrefix}/company/:companyId/file`,
+  PUBLIC_FILE_UPLOAD = `${apiPrefixV2}/upload`,
   FILE_DELETE = `${apiPrefix}/company/:companyId/file/:fileId`,
   FILE_GET = `${apiPrefix}/company/:companyId/file/:fileId`,
   COMPANY_GET_BY_ID = `${apiPrefix}/company/:companyId`,
@@ -177,6 +182,9 @@ export enum APIPath {
   PUBLIC_KEY_GET = `${apiPrefix}/company/:companyId/public_key`,
   ZOD_EXAMPLE = `${apiPrefix}/company/zod`, // Info: (20240909 - Murky) This is a Zod example, to demonstrate how to use Zod schema to validate data.
   CERTIFICATE_LIST = `${apiPrefix}/company/:companyId/certificate`,
+  PUSHER = `${apiPrefixV2}/pusher`,
+  ENCRYPT = `${apiPrefixV2}/encrypt`,
+  DECRYPT = `${apiPrefixV2}/decrypt`,
 }
 const createConfig = ({
   name,
@@ -418,6 +426,11 @@ export const APIConfig: Record<IAPIName, IAPIConfig> = {
     method: HttpMethod.POST,
     path: APIPath.FILE_UPLOAD,
   }),
+  [APIName.PUBLIC_FILE_UPLOAD]: createConfig({
+    name: APIName.PUBLIC_FILE_UPLOAD,
+    method: HttpMethod.POST,
+    path: APIPath.PUBLIC_FILE_UPLOAD,
+  }),
   [APIName.FILE_DELETE]: createConfig({
     name: APIName.FILE_DELETE,
     method: HttpMethod.DELETE,
@@ -518,4 +531,19 @@ export const APIConfig: Record<IAPIName, IAPIConfig> = {
     method: HttpMethod.GET,
     path: APIPath.CERTIFICATE_LIST,
   }),
+  [APIName.PUSHER]: createConfig({
+    name: APIName.PUSHER,
+    method: HttpMethod.POST,
+    path: APIPath.PUSHER,
+  }),
+  [APIName.ENCRYPT]: createConfig({
+    name: APIName.ENCRYPT,
+    method: HttpMethod.POST,
+    path: APIPath.ENCRYPT,
+  }),
+  [APIName.DECRYPT]: createConfig({
+    name: APIName.DECRYPT,
+    method: HttpMethod.POST,
+    path: APIPath.DECRYPT,
+  }),
 };
diff --git a/src/constants/file.ts b/src/constants/file.ts
index 20c7e0ab5..001d675ca 100644
--- a/src/constants/file.ts
+++ b/src/constants/file.ts
@@ -4,6 +4,7 @@ export enum FileFolder {
   INVOICE = 'invoice',
   KYC = 'kyc',
   TMP = 'tmp',
+  mobile_upload = 'mobile_upload',
 }
 
 export enum UploadType {
@@ -12,6 +13,7 @@ export enum UploadType {
   USER = 'user',
   PROJECT = 'project',
   INVOICE = 'invoice',
+  MOBILE_UPLOAD = 'mobile_upload',
 }
 
 export enum FileDatabaseConnectionType {
@@ -31,6 +33,7 @@ export const UPLOAD_TYPE_TO_FOLDER_MAP = {
   [UploadType.USER]: FileFolder.TMP,
   [UploadType.PROJECT]: FileFolder.TMP,
   [UploadType.INVOICE]: FileFolder.INVOICE,
+  [UploadType.MOBILE_UPLOAD]: FileFolder.mobile_upload,
 };
 
 export enum UploadDocumentType {
diff --git a/src/constants/pusher.ts b/src/constants/pusher.ts
new file mode 100644
index 000000000..b64368d7e
--- /dev/null
+++ b/src/constants/pusher.ts
@@ -0,0 +1,13 @@
+export enum PRIVATE_CHANNEL {
+  NOTIFICATION = 'private-notification',
+  CERTIFICATE = 'certificate', // TODO: (20241009 - tzuhan) update to 'private-certificate',
+  VOUCHER = 'private-voucher',
+  REPORT = 'private-report',
+}
+
+export enum CERTIFICATE_EVENT {
+  UPLOAD = 'certificate-upload',
+  UPDATE = 'certificate-update',
+  ANALYSIS = 'certificate-analysis',
+  DELETE = 'certificate-delete',
+}
diff --git a/src/interfaces/api_connection.ts b/src/interfaces/api_connection.ts
index ae36fdae9..0039db0b2 100644
--- a/src/interfaces/api_connection.ts
+++ b/src/interfaces/api_connection.ts
@@ -45,6 +45,7 @@ export type IAPIName =
   | 'STATUS_INFO_GET'
   | 'ACCOUNT_LIST'
   | 'FILE_UPLOAD'
+  | 'PUBLIC_FILE_UPLOAD'
   | 'FILE_DELETE'
   | 'FILE_GET'
   | 'COMPANY_GET_BY_ID'
@@ -64,7 +65,10 @@ export type IAPIName =
   | 'GET_PROJECT_BY_ID'
   | 'UPDATE_PROJECT_BY_ID'
   | 'PUBLIC_KEY_GET'
-  | 'CERTIFICATE_LIST';
+  | 'CERTIFICATE_LIST'
+  | 'PUSHER'
+  | 'ENCRYPT'
+  | 'DECRYPT';
 
 export type IHttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 
@@ -75,7 +79,8 @@ export type IAPIInput = {
     | FormData
     | IVoucher
     | IFinancialReportRequest
-    | ICompanyKYCForm;
+    | ICompanyKYCForm
+    | string;
   params?: { [key: string]: unknown };
   query?: { [key: string]: unknown };
 };
diff --git a/src/interfaces/certificate.ts b/src/interfaces/certificate.ts
index 42220e0c9..27bf73e93 100644
--- a/src/interfaces/certificate.ts
+++ b/src/interfaces/certificate.ts
@@ -31,18 +31,14 @@ export interface ICertificate {
   uploader: string;
 }
 
-export interface ICertificateData {
-  token: string;
-  url: string;
-  status: ProgressStatus;
-}
-
 export interface ICertificateInfo {
-  url: string;
+  id: number;
   name: string;
   size: number;
   status: ProgressStatus;
   progress: number;
+  url: string;
+  file?: File;
 }
 
 export enum VIEW_TYPES {
diff --git a/src/lib/pusher.ts b/src/lib/pusher.ts
new file mode 100644
index 000000000..daa4957ef
--- /dev/null
+++ b/src/lib/pusher.ts
@@ -0,0 +1,19 @@
+import Pusher from 'pusher';
+
+// Info: (20241009-tzuhan) 初始化 Pusher
+const pusherConfig = {
+  appId: process.env.PUSHER_APP_ID!,
+  key: process.env.NEXT_PUBLIC_PUSHER_KEY!,
+  secret: process.env.PUSHER_SECRET!,
+  host: process.env.NEXT_PUBLIC_PUSHER_HOST!,
+  useTLS: process.env.PUSHER_USE_TLS === 'true',
+};
+
+let pusherInstance: Pusher | null = null;
+
+export const getPusherInstance = (): Pusher => {
+  if (!pusherInstance) {
+    pusherInstance = new Pusher(pusherConfig);
+  }
+  return pusherInstance;
+};
diff --git a/src/lib/pusherClient.ts b/src/lib/pusherClient.ts
new file mode 100644
index 000000000..9331d4f70
--- /dev/null
+++ b/src/lib/pusherClient.ts
@@ -0,0 +1,26 @@
+import Pusher from 'pusher-js';
+
+let pusherInstance: Pusher | null = null;
+
+const pusherConfig = {
+  appKey: process.env.NEXT_PUBLIC_PUSHER_KEY!,
+  cluster: process.env.NEXT_PUBLIC_PUSHER_CLUSTER || '',
+  wsHost: process.env.NEXT_PUBLIC_PUSHER_HOST!,
+  wsPort: parseFloat(process.env.NEXT_PUBLIC_PUSHER_PORT!),
+};
+
+export const getPusherInstance = (): Pusher => {
+  if (!pusherInstance) {
+    pusherInstance = new Pusher(pusherConfig.appKey, {
+      cluster: pusherConfig.cluster,
+      wsHost: pusherConfig.wsHost,
+      wsPort: pusherConfig.wsPort,
+      channelAuthorization: {
+        transport: 'jsonp',
+        endpoint: `${pusherConfig.wsHost}/api/pusher/auth`,
+        headers: {},
+      },
+    });
+  }
+  return pusherInstance;
+};
diff --git a/src/lib/utils/parse_image_form.ts b/src/lib/utils/parse_image_form.ts
index a4d500772..71af979e0 100644
--- a/src/lib/utils/parse_image_form.ts
+++ b/src/lib/utils/parse_image_form.ts
@@ -1,4 +1,4 @@
-import { IncomingForm, Fields, Files } from 'formidable';
+import formidable, { IncomingForm, Fields, Files } from 'formidable';
 import { promises as fs } from 'fs';
 import path from 'path';
 import { NextApiRequest } from 'next';
@@ -6,11 +6,39 @@ import { FORMIDABLE_OPTIONS } from '@/constants/config';
 import { FileFolder, getFileFolder } from '@/constants/file';
 import loggerBack from '@/lib/utils/logger_back';
 
+export const extractKeyAndIvFromFields = (fields: formidable.Fields) => {
+  const { encryptedSymmetricKey, iv } = fields;
+  const keyStr =
+    encryptedSymmetricKey && encryptedSymmetricKey.length ? encryptedSymmetricKey[0] : '';
+  const ivStr = iv ? iv[0] : '';
+
+  const ivUnit8: Uint8Array = new Uint8Array(ivStr.split(',').map((num) => parseInt(num, 10)));
+
+  const isEncrypted = !!(keyStr && ivUnit8.length > 0);
+
+  return {
+    isEncrypted,
+    encryptedSymmetricKey: keyStr,
+    iv: ivUnit8,
+  };
+};
+
 export const parseForm = async (
   req: NextApiRequest,
-  subDir: FileFolder = FileFolder.TMP // Info: (20240726 - Jacky) 預設子資料夾名稱為tmp
+  subDir: FileFolder = FileFolder.TMP, // Info: (20240726 - Jacky) 預設子資料夾名稱為tmp
+  subSubDir?: string // Info: (202410008 - Tzuhan) 如果有傳入subSubDir，則使用subSubDir
 ) => {
-  const uploadDir = getFileFolder(subDir);
+  let uploadDir = getFileFolder(subDir);
+  // Deprecated: (20241011-tzuhan) Debugging purpose
+  // eslint-disable-next-line no-console
+  console.log(`parseForm (subDir: ${subDir}, subSubDir: ${subSubDir}), req`, req);
+
+  // Info: (202410008 - Tzuhan) 如果有傳入subSubDir，更新 uploadDir
+  if (subSubDir) {
+    uploadDir = path.join(uploadDir, subSubDir);
+    await fs.mkdir(uploadDir, { recursive: true }); // Info: (202410008 - Tzuhan) 確保該目錄存在
+  }
+
   const options = {
     ...FORMIDABLE_OPTIONS,
     uploadDir,
@@ -20,8 +48,14 @@ export const parseForm = async (
   const parsePromise = new Promise<{ fields: Fields; files: Files<string> }>((resolve, reject) => {
     form.parse(req, (err, fields, files) => {
       if (err) {
+        // Deprecated: (20241011-tzuhan) Debugging purpose
+        // eslint-disable-next-line no-console
+        console.error(`form.parse err:`, err);
         reject(err);
       } else {
+        // Deprecated: (20241011-tzuhan) Debugging purpose
+        // eslint-disable-next-line no-console
+        console.log(`form.parse fields, files:`, fields, files);
         resolve({ fields, files });
       }
     });
diff --git a/src/lib/utils/pusher_token.ts b/src/lib/utils/pusher_token.ts
new file mode 100644
index 000000000..176b894ea
--- /dev/null
+++ b/src/lib/utils/pusher_token.ts
@@ -0,0 +1,32 @@
+import crypto from 'crypto';
+
+// Info: (20241008 - tzuhan) 使用 AES 加密算法
+const algorithm = 'aes-256-ctr';
+const secretKey = process.env.TOKEN_SECRET_KEY!;
+
+if (!secretKey || secretKey.trim().length === 0) {
+  throw new Error('Missing secret key for encryption. Please check your environment variables.');
+}
+
+// Info: (20241008 - tzuhan) 確保密鑰是 32 字節（256 位），如果長度不夠，通過哈希生成
+const key = crypto.createHash('sha256').update(secretKey).digest();
+const iv = crypto.randomBytes(16);
+
+// Info: (20241008 - tzuhan) 加密函數
+export function encrypt(text: string): string {
+  const cipher = crypto.createCipheriv(algorithm, key, iv);
+  const encrypted = Buffer.concat([cipher.update(text), cipher.final()]);
+
+  return iv.toString('hex') + ':' + encrypted.toString('hex');
+}
+
+export function decrypt(token: string): string {
+  const [ivHex, encryptedText] = token.split(':');
+  const decipher = crypto.createDecipheriv(algorithm, key, Buffer.from(ivHex, 'hex'));
+  const decrypted = Buffer.concat([
+    decipher.update(Buffer.from(encryptedText, 'hex')),
+    decipher.final(),
+  ]);
+
+  return decrypted.toString(); // Info: (20241008 - tzuhan) 返回解密後的原始字符串
+}
diff --git a/src/pages/api/v2/encrypt.ts b/src/pages/api/v2/encrypt.ts
new file mode 100644
index 000000000..16f4b018a
--- /dev/null
+++ b/src/pages/api/v2/encrypt.ts
@@ -0,0 +1,24 @@
+import { STATUS_MESSAGE } from '@/constants/status_code';
+import { formatApiResponse } from '@/lib/utils/common';
+import { encrypt } from '@/lib/utils/pusher_token';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  let statusMessage: string = STATUS_MESSAGE.BAD_REQUEST;
+  let payload: string = '';
+  try {
+    if (req.method === 'POST') {
+      const { companyId } = req.body;
+      const token = encrypt(companyId.toString());
+      statusMessage = STATUS_MESSAGE.SUCCESS;
+      payload = token;
+    } else {
+      statusMessage = STATUS_MESSAGE.METHOD_NOT_ALLOWED;
+    }
+  } catch (error) {
+    statusMessage = (error as Error).message;
+  } finally {
+    const { httpCode, result } = formatApiResponse<string>(statusMessage, payload);
+    res.status(httpCode).json(result);
+  }
+}
diff --git a/src/pages/api/v2/pusher.ts b/src/pages/api/v2/pusher.ts
index b6ca42850..379bfa1be 100644
--- a/src/pages/api/v2/pusher.ts
+++ b/src/pages/api/v2/pusher.ts
@@ -1,37 +1,40 @@
+import { STATUS_MESSAGE } from '@/constants/status_code';
+import { ICertificateInfo } from '@/interfaces/certificate';
+import { formatApiResponse } from '@/lib/utils/common';
 import type { NextApiRequest, NextApiResponse } from 'next';
-import Pusher from 'pusher';
-
-// Info: (20241004-tzuhan) 初始化 Pusher
-const pusher = new Pusher({
-  appId: process.env.PUSHER_APP_ID!,
-  key: process.env.NEXT_PUBLIC_PUSHER_KEY!,
-  secret: process.env.PUSHER_SECRET!,
-  host: process.env.NEXT_PUBLIC_PUSHER_HOST!,
-  useTLS: process.env.PUSHER_USE_TLS === 'true',
-});
+import { getPusherInstance } from '@/lib/pusher'; // Info: (20241009-tzuhan) 使用封裝好的 Pusher singleton instance
+import { CERTIFICATE_EVENT, PRIVATE_CHANNEL } from '@/constants/pusher';
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method === 'POST') {
-    const { certificates } = req.body;
+  let statusMessage: string = STATUS_MESSAGE.BAD_REQUEST;
 
-    // eslint-disable-next-line no-console
-    console.log('certificates:', certificates);
+  try {
+    if (req.method !== 'POST') {
+      statusMessage = STATUS_MESSAGE.METHOD_NOT_ALLOWED;
+    } else {
+      const { token, certificates } = req.body;
 
-    // Info: (20241004-tzuhan) 發送圖片 URL 給其他訂閱者
-    try {
-      await Promise.all(
-        certificates.map(async (certificate: { url: string; token: string }) => {
-          await pusher.trigger('certificate-channel', 'certificate-event', {
-            url: certificate.url,
-            token: certificate.token,
+      if (!token || !certificates || !Array.isArray(certificates)) {
+        statusMessage = STATUS_MESSAGE.BAD_REQUEST;
+      } else {
+        const pusher = getPusherInstance();
+        const certificatePromises = certificates.map(async (certificate: ICertificateInfo) => {
+          return pusher.trigger(PRIVATE_CHANNEL.CERTIFICATE, CERTIFICATE_EVENT.UPLOAD, {
+            certificate,
+            token,
           });
-        })
-      );
-      res.status(200).json({ status: 'Certificate sent successfully' });
-    } catch (error) {
-      res.status(500).json({ status: 'Failed to send certificates', error });
+        });
+
+        await Promise.all(certificatePromises);
+
+        statusMessage = STATUS_MESSAGE.SUCCESS;
+      }
     }
-  } else {
-    res.status(405).send('Method not allowed');
+  } catch (_error) {
+    const error = _error as Error;
+    statusMessage = error.message;
+  } finally {
+    const { httpCode, result } = formatApiResponse<null>(statusMessage, null);
+    res.status(httpCode).json(result);
   }
 }
diff --git a/src/pages/api/v2/upload.ts b/src/pages/api/v2/upload.ts
index 0bef24f54..81ea99294 100644
--- a/src/pages/api/v2/upload.ts
+++ b/src/pages/api/v2/upload.ts
@@ -1,67 +1,83 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { IncomingForm, File as FormidableFile } from 'formidable';
-import { promises as fs } from 'fs';
+import { UPLOAD_TYPE_TO_FOLDER_MAP, UploadType } from '@/constants/file';
+import { STATUS_MESSAGE } from '@/constants/status_code';
+import { IResponseData } from '@/interfaces/response_data';
+import { parseForm } from '@/lib/utils/parse_image_form';
+import loggerBack from '@/lib/utils/logger_back';
+import { isEnumValue } from '@/lib/utils/type_guard/common';
+import { formatApiResponse } from '@/lib/utils/common';
+import { decrypt } from '@/lib/utils/pusher_token';
 
-import path from 'path';
-
-// Info: (20241007 - tzuhan) 禁用內建的 body 解析
 export const config = {
   api: {
     bodyParser: false,
   },
 };
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method === 'POST') {
-    const form = new IncomingForm({
-      uploadDir: path.join(process.cwd(), '/tmp'),
-      keepExtensions: true, // Info: (20241007 - tzuhan) 保留文件擴展名
-    });
+async function handlePostRequest(req: NextApiRequest) {
+  let statusMessage: string = STATUS_MESSAGE.BAD_REQUEST;
+  const payload: null = null;
 
-    // Deprecated: (20241011 - tzuhan) Debugging purpose
+  try {
+    const { type, token } = req.query;
+    // Deprecated: (20241011-tzuhan) Debugging purpose
     // eslint-disable-next-line no-console
-    console.log('form:', form);
-
-    form.parse(req, async (err, fields, files) => {
-      if (err) {
-        // Deprecated: (20241011 - tzuhan) Debugging purpose
-        // eslint-disable-next-line no-console
-        console.error('Error parsing the files:', err);
-        return res.status(500).json({ message: 'File upload error' });
-      }
+    console.log(`API POST type (${!isEnumValue(UploadType, type)}): `, type, ` token: `, token);
 
-      // Deprecated: (20241011 - tzuhan) Debugging purpose
-      // eslint-disable-next-line no-console
-      console.log('files:', files);
+    if (!isEnumValue(UploadType, type)) {
+      throw new Error(STATUS_MESSAGE.INVALID_INPUT_TYPE);
+    }
+    if (!token) {
+      throw new Error(STATUS_MESSAGE.BAD_REQUEST);
+    }
+    const companyId = decrypt(token as string);
 
-      // Info: (20241007 - tzuhan) 處理多個文件
-      const uploadedFiles = Array.isArray(files.files) ? files.files : [files.files]; // 確保它是數組
+    const parsedForm = await parseForm(req, UPLOAD_TYPE_TO_FOLDER_MAP[type], token as string);
+    // TODO: (20241011 - tzuhan) Handle file upload logic here, save to DB
+    // eslint-disable-next-line no-console
+    console.log(`API POST companyId(${companyId}) parsedForm: `, parsedForm);
 
-      const uploadDir = path.join(process.cwd(), '/public/uploads');
-      await fs.mkdir(uploadDir, { recursive: true }); // Info: (20241007 - tzuhan) 確保上傳目錄存在
+    statusMessage = STATUS_MESSAGE.SUCCESS;
+  } catch (_error) {
+    const error = _error as Error;
+    loggerBack.error(error, `API POST File: ${error.message}`);
+    statusMessage = error.message;
+  }
 
-      // Info: (20241007 - tzuhan) 生成每個文件的 URL 和 token
-      const certificates = await Promise.all(
-        uploadedFiles
-          .filter((file: FormidableFile | undefined) => !!file)
-          .map(async (file: FormidableFile) => {
-            const tempFilePath = file.filepath;
-            const fileName = `${Date.now()}_${file.originalFilename}`;
-            const finalFilePath = path.join(uploadDir, fileName);
+  return { statusMessage, payload };
+}
 
-            await fs.rename(tempFilePath, finalFilePath); // Info: (20241007 - tzuhan) 將文件移動到最終目錄
+const methodHandlers: {
+  [key: string]: (
+    req: NextApiRequest,
+    res: NextApiResponse
+  ) => Promise<{ statusMessage: string; payload: null }>;
+} = {
+  POST: handlePostRequest,
+};
 
-            const fileUrl = `/uploads/${fileName}`; // Info: (20241007 - tzuhan) 文件的相對 URL
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<IResponseData<null>>
+) {
+  let statusMessage: string = STATUS_MESSAGE.BAD_REQUEST;
+  let payload: null = null;
 
-            return {
-              fileUrl,
-            };
-          })
-      );
+  try {
+    const handleRequest = methodHandlers[req.method || ''];
+    if (handleRequest) {
+      ({ statusMessage, payload } = await handleRequest(req, res));
+    } else {
+      statusMessage = STATUS_MESSAGE.METHOD_NOT_ALLOWED;
 
-      return res.status(200).json({ certificates });
-    });
-  } else {
-    res.status(405).json({ message: 'Method not allowed' });
+      // eslint-disable-next-line no-console
+      console.error('Failed to send certificates update via Pusher', `METHOD_NOT_ALLOWED`);
+    }
+  } catch (_error) {
+    const error = _error as Error;
+    statusMessage = error.message;
+  } finally {
+    const { httpCode, result } = formatApiResponse<null>(statusMessage, payload);
+    res.status(httpCode).json(result);
   }
 }
diff --git a/src/pages/mobile_upload.tsx b/src/pages/mobile_upload.tsx
index 6b879b85a..dca51ae06 100644
--- a/src/pages/mobile_upload.tsx
+++ b/src/pages/mobile_upload.tsx
@@ -2,86 +2,139 @@ import { useRouter } from 'next/router';
 import { Button } from '@/components/button/button';
 import Head from 'next/head';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { ILocale } from '@/interfaces/locale';
-import { ICertificateData } from '@/interfaces/certificate';
+import { ICertificateInfo } from '@/interfaces/certificate';
+import { APIName } from '@/constants/api_connection';
+import { IFile } from '@/interfaces/file';
+import APIHandler from '@/lib/utils/api_handler';
+import { UploadType } from '@/constants/file';
+import useStateRef from 'react-usestateref';
 import { ProgressStatus } from '@/constants/account';
 
-interface FileWithUrl extends File {
+interface IFileWithUrl extends File {
+  file: File;
+  name: string;
+  size: number;
+  type: string;
+  lastModified: number;
   url: string;
 }
 
 const MobileUploadPage: React.FC = () => {
   const router = useRouter();
   const { query } = router;
-  const { token } = query;
-  const [selectedCertificates, setSelectedCertificates] = useState<FileWithUrl[]>([]);
-  const [uploadedCertificates, setUploadedCertificates] = useState<ICertificateData[]>([]);
+  const [token, setToken] = useState<string | undefined>(undefined);
+  const [selectedCertificates, setSelectedCertificates, selectedCertificatesRef] = useStateRef<
+    IFileWithUrl[]
+  >([]);
+  const [uploadedCertificates, setUploadedCertificates] = useState<ICertificateInfo[]>([]);
   const [isUploading, setIsUploading] = useState<boolean>(false);
+  const { trigger: uploadFileAPI } = APIHandler<IFile[]>(APIName.PUBLIC_FILE_UPLOAD);
+  const { trigger: pusherAPI } = APIHandler<void>(APIName.PUSHER);
+
+  useEffect(() => {
+    if (router.isReady && query.token) {
+      setToken(query.token as string);
+    }
+  }, [router.isReady, query.token]);
 
   const handleCertificateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
-      setSelectedCertificates(
-        Array.from(e.target.files).map((file) => {
-          return {
-            ...file,
-            url: URL.createObjectURL(file),
-          };
-        })
+      const certificates = Array.from(e.target.files).map(
+        (file) =>
+          ({
+            file, // Info: (20241009 - tzuhan) Store the original File object for FormData
+            name: file.name, // Info: (20241009 - tzuhan)  File metadata
+            size: file.size,
+            type: file.type,
+            lastModified: file.lastModified,
+            url: URL.createObjectURL(file), // Info: (20241009 - tzuhan)  For displaying the image preview
+          }) as IFileWithUrl
       );
+      setSelectedCertificates(certificates);
     }
   };
 
   const uploadCertificates = async () => {
     setIsUploading(true);
 
-    // Info: (20241007 - tzuhan) 使用 FormData 上傳文件
-    const formData = new FormData();
-    selectedCertificates.forEach((certificate) => {
-      formData.append('file', certificate);
-    });
-
     try {
-      const response = await fetch('/api/v2/upload', {
-        method: 'POST',
+      // Info: (20241007 - tzuhan) Step 1: Push initial certificate info via Pusher
+      const certificatesPayload = selectedCertificatesRef.current.map(
+        (obj, index) =>
+          ({
+            id: uploadedCertificates.length + index,
+            name: obj.name,
+            size: obj.size,
+            url: obj.url,
+            status: ProgressStatus.IN_PROGRESS,
+            progress: 0,
+          }) as ICertificateInfo
+      );
+
+      // Deprecated: (20241011-tzuhan) Debugging purpose
+      // eslint-disable-next-line no-console
+      console.log('certificatesPayload:', certificatesPayload);
+
+      const { success: successPush } = await pusherAPI({
+        body: {
+          token: token as string,
+          certificates: certificatesPayload,
+        },
+      });
+
+      if (successPush === false) {
+        throw new Error('Failed to send initial certificates via Pusher');
+      }
+
+      // Info: (20241008 - tzuhan) Step 2: Use FormData to upload files
+      const formData = new FormData();
+      selectedCertificates.forEach((certificate) => {
+        formData.append('file', certificate.file); // Info: (20241009 - tzuhan) Use the original File object
+      });
+
+      const { success } = await uploadFileAPI({
+        query: {
+          type: UploadType.MOBILE_UPLOAD,
+          token: token as string,
+        },
         body: formData,
       });
 
-      const data = await response.json();
-      if (!response.ok) {
+      if (success === false) {
         throw new Error('Failed to upload certificates');
       }
 
-      // Deprecated: (20241011 - tzuhan) Debugging purpose
-      // eslint-disable-next-line no-console
-      console.log('data:', data);
+      // Info: (20241008 - tzuhan) Step 3: Update certificates progress and push again
+      const uploadingCertificates = selectedCertificatesRef.current.map(
+        (obj, index) =>
+          ({
+            id: uploadedCertificates.length + index,
+            name: obj.name,
+            size: obj.size,
+            url: obj.url, // Info: (20241008 - tzuhan) Use original URL here
+            status: ProgressStatus.SUCCESS,
+            progress: 100, // Info: (20241008 - tzuhan) Placeholder progress
+          }) as ICertificateInfo
+      );
 
-      const { certificates } = data;
-      certificates.forEach(async (certificate: { fileUrl: string }) => {
-        const certificateUpload = {
-          url: certificate.fileUrl,
+      const { success: successPushAgain } = await pusherAPI({
+        body: {
           token: token as string,
-          status: ProgressStatus.IN_PROGRESS,
-        };
-
-        setUploadedCertificates([...uploadedCertificates, certificateUpload]);
+          certificates: uploadingCertificates,
+        },
+      });
 
+      if (successPushAgain === false) {
         // Deprecated: (20241011 - tzuhan) Debugging purpose
         // eslint-disable-next-line no-console
-        console.log('certificates:', certificateUpload);
-
-        // Info: (20241007 - tzuhan) 通過 Pusher 傳送圖片 URL 和 token
-        await fetch('/api/v2/pusher', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ certificate: certificateUpload }),
-        });
-      });
-
-      setSelectedCertificates([]);
+        console.error('Failed to send certificates update via Pusher');
+      } else {
+        setSelectedCertificates([]);
+        setUploadedCertificates((prev) => [...prev, ...uploadingCertificates]);
+      }
     } catch (error) {
       // Deprecated: (20241011 - tzuhan) Debugging purpose
       // eslint-disable-next-line no-console
@@ -104,7 +157,7 @@ const MobileUploadPage: React.FC = () => {
         <input type="file" accept="image/*" multiple onChange={handleCertificateChange} />
         <Button
           onClick={uploadCertificates}
-          disabled={isUploading || selectedCertificates.length === 0}
+          disabled={isUploading || selectedCertificates.length === 0 || !token}
         >
           {isUploading ? 'Uploading...' : 'Send Certificates'}
         </Button>
@@ -127,8 +180,8 @@ const MobileUploadPage: React.FC = () => {
           <h2>Uploaded Certificates</h2>
           <div className="flex flex-row gap-2">
             {uploadedCertificates.map((certificate, index) => (
-              <div key={`pusher_mobile_${index + 1}`}>
-                {certificate.status !== ProgressStatus.SYSTEM_ERROR ? (
+              <div key={`uploaded_certificate_${index + 1}`}>
+                {certificate.status !== ProgressStatus.FAILED ? (
                   <Image
                     src={certificate.url}
                     alt={`Uploaded Certificate ${index}`}
@@ -148,7 +201,7 @@ const MobileUploadPage: React.FC = () => {
   );
 };
 
-const getStaticPropsFunction = async ({ locale }: ILocale) => ({
+export const getStaticProps = async ({ locale }: ILocale) => ({
   props: {
     ...(await serverSideTranslations(locale, [
       'common',
@@ -163,6 +216,4 @@ const getStaticPropsFunction = async ({ locale }: ILocale) => ({
   },
 });
 
-export const getStaticProps = getStaticPropsFunction;
-
 export default MobileUploadPage;
diff --git a/src/pages/certificate_list.tsx b/src/pages/users/accounting/certificate_list.tsx
similarity index 76%
rename from src/pages/certificate_list.tsx
rename to src/pages/users/accounting/certificate_list.tsx
index 7191ff249..a9604fdc6 100644
--- a/src/pages/certificate_list.tsx
+++ b/src/pages/users/accounting/certificate_list.tsx
@@ -18,14 +18,19 @@ import {
 } from '@/interfaces/certificate';
 import Certificate from '@/components/certificate/certificate';
 import CertificateEditModal from '@/components/certificate/certificate_edit_modal';
-import Pusher, { Channel } from 'pusher-js';
+import { getPusherInstance } from '@/lib/pusherClient';
 import FloatingUploadPopup from '@/components/floating_upload_popup/floating_upload_popup';
 import CertificateQRCodeModal from '@/components/certificate/certificate_qrcode_modal';
-import Image from 'next/image';
-import { v4 as uuidv4 } from 'uuid';
-import { ProgressStatus } from '@/constants/account';
+import APIHandler from '@/lib/utils/api_handler';
+import { CERTIFICATE_EVENT, PRIVATE_CHANNEL } from '@/constants/pusher';
+import useStateRef from 'react-usestateref';
+import { useUserCtx } from '@/contexts/user_context';
 
-const UploadCertificatePage: React.FC = () => {
+const CertificateListPage: React.FC = () => {
+  const { selectedCompany } = useUserCtx();
+  const { id: companyId } = selectedCompany!;
+  const { trigger: encryptAPI } = APIHandler<string>(APIName.ENCRYPT);
+  const [token, setToken, tokenRef] = useStateRef<string | undefined>(undefined);
   const [showQRCode, setShowQRCode] = useState<boolean>(false);
   const [activeTab, setActiveTab] = useState(0);
   const [data, setData] = useState<{ [tab: number]: { [id: number]: ICertificateUI } }>({
@@ -43,8 +48,10 @@ const UploadCertificatePage: React.FC = () => {
     0: false,
     1: false,
   });
-  const token = uuidv4(); // Info: (20241007 - tzuhan) 生成唯一 token
-  const [uploadingCertificates, setUploadingCertificates] = useState<ICertificateInfo[]>([]);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [uploadingCertificates, setUploadingCertificates, uploadingCertificatesRef] = useStateRef<{
+    [id: number]: ICertificateInfo;
+  }>({});
 
   const handleApiResponse = useCallback((resData: ICertificate[]) => {
     const sumInvoiceTotalPrice = {
@@ -189,61 +196,60 @@ const UploadCertificatePage: React.FC = () => {
     console.log('Save selected id:', certificate);
   }, []);
 
-  const certificateHandler = async (certificateData: { url: string; token: string }) => {
-    // TODO: (20241007 - tzuhan) post certificate data to server and get uploading certificate list back and update certificate list when uploaded
-    // TODO: (20241007 - tzuhan) get Token from server
-    if (certificateData.token === token) {
-      // Info: (20241007 - tzuhan) 使用 fetch 下載圖片文件
-      const response = await fetch(certificateData.url);
-      const blob = await response.blob();
+  const certificateHandler = useCallback(
+    async (message: { token: string; certificate: ICertificateInfo }) => {
+      const { token: receivedToken, certificate: certificateData } = message;
+      // Deprecated: (20241011 - tzuhan) Debugging purpose
+      // eslint-disable-next-line no-console
+      console.log(
+        `pusher got message, (token(${tokenRef.current})===_token${receivedToken})?${tokenRef.current === receivedToken} message:`,
+        message
+      );
 
-      // Info: (20241007 - tzuhan) 獲取文件名，從 response headers 提取
-      const contentDisposition = response.headers.get('Content-Disposition');
-      let fileName = 'unknown';
-      if (contentDisposition) {
-        const match = contentDisposition.match(/filename="(.+)"/);
-        if (match && match[1]) {
-          // Info: (20241007 - tzuhan) 使用陣列解構提取文件名
-          [, fileName] = match;
-        }
+      if (receivedToken === tokenRef.current) {
+        const updatedCertificates = {
+          ...uploadingCertificatesRef.current,
+        };
+        updatedCertificates[certificateData.id] = certificateData;
+        setUploadingCertificates(updatedCertificates);
+        // Deprecated: (20241011 - tzuhan) Debugging purpose
+        // eslint-disable-next-line no-console
+        console.log(`uploadingCertificatesRef.current:`, uploadingCertificatesRef.current);
+      }
+    },
+    [tokenRef, setUploadingCertificates]
+  );
+  const getToken = useCallback(async () => {
+    if (!tokenRef.current) {
+      const res = await encryptAPI({ body: { companyId } });
+      if (res.success && res.data) {
+        setToken(res.data);
       } else {
-        // Info: (20241007 - tzuhan) 如果沒有提供 header，可以從 url 推斷出文件名
-        fileName = certificateData.url.split('/').pop() || 'unknown';
+        setToken('');
       }
-
-      // Info: (20241007 - tzuhan) 獲取文件大小
-      const fileSize = blob.size;
-
-      const imageObjectUrl = URL.createObjectURL(blob);
-      setUploadingCertificates((prev) => [
-        ...prev,
-        {
-          url: imageObjectUrl,
-          status: ProgressStatus.IN_PROGRESS,
-          name: fileName,
-          size: fileSize,
-          progress: 80,
-        },
-      ]);
     }
-  };
+  }, [tokenRef, companyId, setToken]);
+
+  const toggleQRCode = useCallback(() => {
+    getToken();
+    setShowQRCode((prev) => !prev);
+  }, []);
 
   useEffect(() => {
-    const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_KEY!, {
-      cluster: '',
-      wsHost: process.env.NEXT_PUBLIC_PUSHER_HOST!,
-      wsPort: parseFloat(process.env.NEXT_PUBLIC_PUSHER_PORT!),
-    });
+    getToken();
+  }, [getToken]);
 
-    const channel: Channel = pusher.subscribe('certificate-channel');
+  useEffect(() => {
+    const pusher = getPusherInstance();
+    const channel = pusher.subscribe(PRIVATE_CHANNEL.CERTIFICATE);
 
-    channel.bind('certificate-event', certificateHandler);
+    channel.bind(CERTIFICATE_EVENT.UPLOAD, certificateHandler);
 
     return () => {
-      channel.unbind('certificate-event', certificateHandler);
-      pusher.unsubscribe('certificate-channel');
+      channel.unbind(CERTIFICATE_EVENT.UPLOAD, certificateHandler);
+      pusher.unsubscribe(PRIVATE_CHANNEL.CERTIFICATE);
     };
-  }, []);
+  }, [certificateHandler]);
 
   return (
     <>
@@ -251,7 +257,7 @@ const UploadCertificatePage: React.FC = () => {
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon/favicon.ico" />
-        <title>Upload Certificate - iSunFA</title>
+        <title>Certificate List - iSunFA</title>
       </Head>
       <main className="flex h-screen w-screen overflow-hidden">
         {editingId && (
@@ -262,12 +268,12 @@ const UploadCertificatePage: React.FC = () => {
             onSave={handleSave}
           />
         )}
-        {showQRCode && (
+        {showQRCode && !!token && (
           <CertificateQRCodeModal
             isOpen={showQRCode}
             onClose={() => setShowQRCode((prev) => !prev)}
             isOnTopOfModal={false}
-            token={token}
+            token={tokenRef.current!}
           />
         )}
 
@@ -281,20 +287,7 @@ const UploadCertificatePage: React.FC = () => {
           {/* Info: (20240919 - tzuhan) Main Content */}
           <div className="space-y-4 overflow-y-scroll p-6">
             {/* Info: (20240919 - tzuhan) Upload Area */}
-            <UploadArea
-              isDisabled={false}
-              withScanner
-              toggleQRCode={() => setShowQRCode((prev) => !prev)}
-            />
-            <div>
-              {uploadingCertificates.map((image, index) => (
-                <div key={`pusher_${index + 1}`}>
-                  <Image src={image.url} alt={`Received Image ${index}`} width={200} height={200} />
-                  <p>Status: {image.status}</p>
-                </div>
-              ))}
-            </div>
-
+            <UploadArea isDisabled={false} withScanner toggleQRCode={toggleQRCode} />
             {/* Info: (20240919 - tzuhan) Tabs */}
             <Tabs
               tabs={['Certificate Without Voucher', 'Certificate with Voucher']}
@@ -349,9 +342,9 @@ const UploadCertificatePage: React.FC = () => {
             />
           </div>
           {/* Info: (20240926- tzuhan) Floating Upload Popup */}
-          {uploadingCertificates.length > 0 && (
-            <FloatingUploadPopup uploadingCertificates={uploadingCertificates} />
-          )}
+          <FloatingUploadPopup
+            uploadingCertificates={Object.values(uploadingCertificatesRef.current)}
+          />
         </div>
       </main>
     </>
@@ -375,4 +368,4 @@ const getStaticPropsFunction = async ({ locale }: ILocale) => ({
 
 export const getStaticProps = getStaticPropsFunction;
 
-export default UploadCertificatePage;
+export default CertificateListPage;