diff --git a/package.json b/package.json
index 7ab005930..f408697d9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.1.8+165",
+  "version": "0.1.8+166",
   "private": false,
   "scripts": {
     "dev": "next dev",
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 0a1fbd8f7..35f67145f 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils/common';
 
 // Info: 用 cva 來定義 button 的樣式 (20240319 - Shirley)
 const buttonVariants = cva(
-  '"gap space-x-2 ring-offset-background focus-visible:ring-ring group inline-flex items-center justify-center whitespace-nowrap rounded-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-100',
+  '"gap space-x-2 ring-offset-background focus-visible:ring-ring group inline-flex items-center justify-center whitespace-nowrap rounded-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-100 disabled:cursor-not-allowed',
   {
     variants: {
       variant: {
@@ -13,9 +13,9 @@ const buttonVariants = cva(
         tertiary:
           'bg-button-surface-strong-secondary text-button-text-invert hover:bg-button-surface-strong-secondary-hover disabled:bg-button-surface-strong-disable',
         tertiaryOutline:
-          'border border-button-surface-strong-secondary text-button-surface-strong-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary',
+          'border border-button-surface-strong-secondary text-button-surface-strong-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary disabled:text-button-text-disable disabled:border-button-stroke-disable',
         secondaryOutline:
-          'border border-button-text-secondary text-button-text-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary',
+          'border border-button-text-secondary text-button-text-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary disabled:text-button-text-disable disabled:border-button-stroke-disable',
         tertiaryBorderless:
           'border-none border-button-surface-strong-secondary text-button-surface-strong-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary disabled:text-button-text-disable',
         secondaryBorderless:
diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
index 105347945..7bc5456a1 100644
--- a/src/components/date_picker/date_picker.tsx
+++ b/src/components/date_picker/date_picker.tsx
@@ -387,7 +387,7 @@ const DatePicker = ({
         onClick={openCalenderHandler}
         className={cn(
           // default style
-          'flex w-full items-center space-x-3 rounded-xs border border-lightGray3 bg-white p-3 text-input-text-input-placeholder hover:cursor-pointer',
+          'flex w-full items-center space-x-3 rounded-sm border border-lightGray3 bg-white p-3 text-input-text-input-placeholder hover:cursor-pointer',
           // props control style
           btnClassName,
           // variables control style
@@ -427,7 +427,7 @@ const DatePicker = ({
         variant={'tertiaryOutline'}
         onClick={openCalenderHandler}
         className={cn(
-          'group flex w-full items-center rounded-xs border border-lightGray3 bg-white px-3 py-3 hover:cursor-pointer',
+          'group flex w-full items-center rounded-sm border border-lightGray3 bg-white px-3 py-3 hover:cursor-pointer',
           btnClassName,
           {
             'border-primaryYellow text-primaryYellow': componentVisible,
diff --git a/src/components/i18n/i18n.tsx b/src/components/i18n/i18n.tsx
index a3785d53c..954e83bdc 100644
--- a/src/components/i18n/i18n.tsx
+++ b/src/components/i18n/i18n.tsx
@@ -68,18 +68,18 @@ const I18n = ({ langIsOpen, setLangIsOpen }: II18nProps) => {
     <div
       className={`transition-all duration-300 ${
         openMenu
-          ? 'visible -translate-y-19rem opacity-100'
+          ? 'visible -translate-y-7rem opacity-100'
           : 'invisible -translate-y-36rem opacity-0'
       } lg:hidden`}
     >
       <div
         id="I18nMenuMobile"
-        className="absolute left-0 top-0 z-10 h-350px w-screen bg-white shadow"
+        className="absolute left-0 top-0 z-10 h-300px w-screen bg-white shadow"
       >
         <button
           onClick={mobileClickHandler}
           type="button"
-          className="p-16px text-button-text-secondary hover:text-button-text-primary"
+          className="px-4 pt-2 text-button-text-secondary hover:text-button-text-primary"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -107,7 +107,7 @@ const I18n = ({ langIsOpen, setLangIsOpen }: II18nProps) => {
                 scroll={false}
                 locale={item.value}
                 href={asPath}
-                className="block rounded-none px-3 py-7 font-medium hover:cursor-pointer"
+                className="block rounded-none px-3 py-7 font-medium text-button-text-secondary hover:cursor-pointer hover:text-button-text-primary"
               >
                 {item.label}
               </Link>
diff --git a/src/components/journal_list_body/journal_list_body.tsx b/src/components/journal_list_body/journal_list_body.tsx
index 9c1661208..752f528ee 100644
--- a/src/components/journal_list_body/journal_list_body.tsx
+++ b/src/components/journal_list_body/journal_list_body.tsx
@@ -24,6 +24,7 @@ import { IPaginatedData } from '@/interfaces/pagination';
 import { useGlobalCtx } from '@/contexts/global_context';
 import { MessageType } from '@/interfaces/message_modal';
 import { ToastType } from '@/interfaces/toastify';
+import { cn } from '@/lib/utils/common';
 
 // Info: (20240808 - Anna) Alpha版先隱藏(發票列表)
 // import Toggle from '@/components/toggle/toggle';
@@ -41,9 +42,9 @@ const JournalListBody = () => {
   const [isLoading, setIsLoading] = useState<boolean | undefined>(undefined);
   // Info: (20240808 - Anna) Alpha版先隱藏(發票列表)
   // const [invoiceListToggle, setInvoiceListoggle] = useState<boolean>(false);
-  const { trigger } = APIHandler<{ [key: string]: IPaginatedData<IJournalListItem[]> }>(
-    APIName.JOURNAL_LIST
-  );
+  const { trigger, isLoading: isJournalListLoading } = APIHandler<{
+    [key: string]: IPaginatedData<IJournalListItem[]>;
+  }>(APIName.JOURNAL_LIST);
   const { trigger: deleteJournalById } = APIHandler<void>(APIName.JOURNAL_DELETE);
 
   const types = [
@@ -88,16 +89,27 @@ const JournalListBody = () => {
   const [isTypeSelected, setIsTypeSelected] = useState(false);
   const [isSortBySelected, setIsSortBySelected] = useState(false);
 
-  const toggleTypeMenu = () => setIsTypeMenuOpen(!isTypeMenuOpen);
-  const toggleSortByMenu = () => setIsSortByMenuOpen(!isSortByMenuOpen);
-
+  const toggleTypeMenu = () => {
+    if (!isJournalListLoading) {
+      setIsTypeMenuOpen(!isTypeMenuOpen);
+    }
+  };
+  const toggleSortByMenu = () => {
+    if (!isJournalListLoading) {
+      setIsSortByMenuOpen(!isSortByMenuOpen);
+    }
+  };
   const tabClickHandler = (event: JOURNAL_EVENT) => {
     setCurrentTab(event);
     setJournals(pagenatedJournalListItems?.[event]?.data ?? []);
     setTotalPages(pagenatedJournalListItems?.[event]?.totalPages ?? 0);
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value);
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isJournalListLoading) {
+      setSearch(e.target.value);
+    }
+  };
 
   const getJournalList = useCallback(
     async (query: {
@@ -133,7 +145,7 @@ const JournalListBody = () => {
           endDate: !(period ?? filteredPeriod).endTimeStamp
             ? undefined
             : (period ?? filteredPeriod).endTimeStamp,
-          searchQuery: !(searchString ?? search) ? undefined : searchString ?? search,
+          searchQuery: !(searchString ?? search) ? undefined : (searchString ?? search),
         },
       });
 
@@ -204,11 +216,19 @@ const JournalListBody = () => {
 
   const displayedTypeDropMenu = (
     <div
-      onClick={toggleTypeMenu}
-      className={`group relative flex h-44px w-130px cursor-pointer ${isTypeMenuOpen ? 'border-input-stroke-input-hover text-primaryYellow' : 'border-input-stroke-input text-input-text-input-placeholder'} items-center justify-between rounded-sm border bg-white p-10px hover:border-input-stroke-input-hover hover:text-primaryYellow`}
+      onClick={isJournalListLoading ? undefined : toggleTypeMenu}
+      className={cn(
+        'group relative flex h-44px w-200px cursor-pointer items-center justify-between rounded-sm border border-input-stroke-input bg-input-surface-input-background bg-white p-10px hover:border-primaryYellow hover:text-primaryYellow',
+        {
+          'cursor-not-allowed border-button-stroke-disable text-button-text-disable hover:border-button-stroke-disable hover:text-button-text-disable':
+            isJournalListLoading,
+          'border-input-stroke-selected text-primaryYellow': isTypeMenuOpen,
+          'border-input-stroke-input text-input-text-input-placeholder': !isTypeMenuOpen,
+        }
+      )}
     >
       <p
-        className={`group-hover:text-primaryYellow ${isTypeMenuOpen ? 'text-primaryYellow' : isTypeSelected ? 'text-primaryYellow' : 'text-input-text-input-placeholder'}`}
+        className={`whitespace-nowrap ${isJournalListLoading ? 'group-hover:text-button-text-disable' : 'group-hover:text-primaryYellow'} ${isTypeMenuOpen ? 'text-primaryYellow' : isTypeSelected ? '' : 'text-input-text-input-placeholder'}`}
       >
         {t(filteredJournalType)}
       </p>
@@ -238,11 +258,19 @@ const JournalListBody = () => {
 
   const displayedSortByDropMenu = (
     <div
-      onClick={toggleSortByMenu}
-      className={`group relative flex h-44px w-200px cursor-pointer items-center justify-between rounded-sm ${isSortByMenuOpen ? 'border-input-stroke-selected text-primaryYellow' : 'border-input-stroke-input text-input-text-input-placeholder'} border bg-white p-10px hover:border-input-stroke-selected hover:text-primaryYellow`}
+      onClick={isJournalListLoading ? undefined : toggleSortByMenu}
+      className={cn(
+        'group relative flex h-44px w-200px cursor-pointer items-center justify-between rounded-sm border border-input-stroke-input bg-input-surface-input-background bg-white p-10px hover:border-primaryYellow hover:text-primaryYellow',
+        {
+          'cursor-not-allowed border-button-stroke-disable text-button-text-disable hover:border-button-stroke-disable hover:text-button-text-disable':
+            isJournalListLoading,
+          'border-input-stroke-selected text-primaryYellow': isSortByMenuOpen,
+          'border-input-stroke-input text-input-text-input-placeholder': !isSortByMenuOpen,
+        }
+      )}
     >
       <p
-        className={`whitespace-nowrap group-hover:text-primaryYellow ${isSortByMenuOpen ? 'text-primaryYellow' : isSortBySelected ? '' : 'text-lightGray3'}`}
+        className={`whitespace-nowrap ${isJournalListLoading ? 'group-hover:text-button-text-disable' : 'group-hover:text-primaryYellow'} ${isSortByMenuOpen ? 'text-primaryYellow' : isSortBySelected ? '' : 'text-input-text-input-placeholder'}`}
       >
         {t(filteredJournalSortBy)}
       </p>
@@ -274,6 +302,7 @@ const JournalListBody = () => {
   const displayedDatePicker = (
     <div className="hidden md:flex">
       <DatePicker
+        disabled={isJournalListLoading}
         type={DatePickerType.TEXT_PERIOD}
         period={filteredPeriod}
         setFilteredPeriod={setFilteredPeriod}
@@ -285,15 +314,21 @@ const JournalListBody = () => {
   const displayedSearchBar = (
     <div className="relative flex-1">
       <input
+        disabled={isJournalListLoading}
         type="text"
         placeholder={t('AUDIT_REPORT.SEARCH')}
         className={`relative flex h-44px w-full items-center justify-between rounded-sm border border-lightGray3 bg-white p-10px outline-none`}
         onChange={handleInputChange}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
+            getJournalList({ search });
+          }
+        }}
       />
       <FiSearch
         size={20}
         className="absolute right-3 top-3 cursor-pointer"
-        onClick={() => getJournalList({ search })}
+        onClick={() => !isJournalListLoading && getJournalList({ search })}
       />
     </div>
   );
diff --git a/src/components/my_reports_section/my_reports_section.tsx b/src/components/my_reports_section/my_reports_section.tsx
index 2b81a9763..18c48c141 100644
--- a/src/components/my_reports_section/my_reports_section.tsx
+++ b/src/components/my_reports_section/my_reports_section.tsx
@@ -6,6 +6,7 @@ import {
   default30DayPeriodInSec,
   LIMIT_FOR_REPORT_PAGE,
   DEFAULT_PAGE_NUMBER,
+  DEFAULT_SKELETON_COUNT_FOR_PAGE,
 } from '@/constants/display';
 import useOuterClick from '@/lib/hooks/use_outer_click';
 import PendingReportList from '@/components/pending_report_list/pending_report_list';
@@ -25,6 +26,8 @@ import { IDatePeriod } from '@/interfaces/date_period';
 import useStateRef from 'react-usestateref';
 import { IPaginatedReport, IReport, MOCK_TOTAL_PAGES } from '@/interfaces/report';
 import { ReportStatusType } from '@/constants/report';
+import { SkeletonList } from '@/components/skeleton/skeleton';
+import { cn } from '@/lib/utils/common';
 
 const MyReportsSection = () => {
   const { t } = useTranslation('common');
@@ -245,51 +248,66 @@ const MyReportsSection = () => {
   };
 
   const togglePendingSortMenu = () => {
-    setIsPendingSortSelected(true);
-    setIsPendingSortMenuOpen(!isPendingSortMenuOpen);
+    if (!isPendingDataLoading) {
+      setIsPendingSortSelected(true);
+      setIsPendingSortMenuOpen(!isPendingSortMenuOpen);
+    }
   };
 
   const toggleHistorySortMenu = () => {
-    setIsHistorySortSelected(true);
-    setIsHistorySortMenuOpen(!isHistorySortMenuOpen);
+    if (!isHistoryDataLoading) {
+      setIsHistorySortSelected(true);
+      setIsHistorySortMenuOpen(!isHistorySortMenuOpen);
+    }
   };
 
   const pendingInputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchPendingQuery(e.target.value);
+    if (!isPendingDataLoading) {
+      setSearchPendingQuery(e.target.value);
+    }
   };
 
   const historyInputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchHistoryQuery(e.target.value);
+    if (!isHistoryDataLoading) {
+      setSearchHistoryQuery(e.target.value);
+    }
   };
 
-  const pendingPaginationHandler = (newPage: number) => {
+  const pendingPaginationHandler = async (newPage: number) => {
     setPendingCurrentPage(newPage);
-    getPendingReports({ currentPage: newPage });
+    await getPendingReports({ currentPage: newPage });
   };
 
-  const historyPaginationHandler = (newPage: number) => {
+  const historyPaginationHandler = async (newPage: number) => {
     setHistoryCurrentPage(newPage);
-    getGeneratedReports({ currentPage: newPage });
+    await getGeneratedReports({ currentPage: newPage });
   };
 
-  const pendingSortClickHandler = (sorting: SortOptions) => {
+  const pendingSortClickHandler = async (sorting: SortOptions) => {
     setFilteredPendingSort(sorting);
-    getPendingReports({ filteredPendingSort: sorting });
+    await getPendingReports({ filteredPendingSort: sorting });
   };
 
-  const historySortClickHandler = (sorting: SortOptions) => {
+  const historySortClickHandler = async (sorting: SortOptions) => {
     setFilteredHistorySort(sorting);
-    getGeneratedReports({ filteredHistorySort: sorting });
+    await getGeneratedReports({ filteredHistorySort: sorting });
   };
 
   const displayedPendingSortMenu = (
     <div
       ref={pendingSortMenuRef}
-      onClick={togglePendingSortMenu}
-      className={`group relative flex h-44px w-200px cursor-pointer ${isPendingSortMenuOpen ? 'border-primaryYellow text-primaryYellow' : ''} items-center justify-between rounded-sm border border-input-stroke-input bg-input-surface-input-background p-10px hover:border-primaryYellow hover:text-primaryYellow`}
+      onClick={isPendingDataLoading ? undefined : togglePendingSortMenu}
+      className={cn(
+        'group relative flex h-44px w-200px cursor-pointer items-center justify-between rounded-sm border border-input-stroke-input bg-input-surface-input-background p-10px hover:border-primaryYellow hover:text-primaryYellow',
+        {
+          'cursor-not-allowed border-button-stroke-disable text-button-text-disable hover:border-button-stroke-disable hover:text-button-text-disable':
+            isPendingDataLoading,
+          'border-primaryYellow text-primaryYellow': isPendingSortMenuOpen,
+        }
+      )}
     >
       <p
-        className={`whitespace-nowrap group-hover:text-primaryYellow ${isPendingSortMenuOpen ? 'text-primaryYellow' : isPendingSortSelected ? '' : 'text-input-text-input-placeholder'}`}
+        className={`whitespace-nowrap ${isPendingDataLoading ? 'group-hover:text-button-text-disable' : 'group-hover:text-primaryYellow'} ${isPendingSortMenuOpen ? 'text-primaryYellow' : isPendingSortSelected ? '' : 'text-input-text-input-placeholder'}`}
       >
         {t(filteredPendingSort)}
       </p>
@@ -331,13 +349,22 @@ const MyReportsSection = () => {
   const displayedPendingSearchBar = (
     <div className="relative flex-1">
       <input
+        disabled={isPendingDataLoading}
         value={searchPendingQuery}
         onChange={pendingInputChangeHandler}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
+            getPendingReports({ searchPendingQuery });
+          }
+        }}
         type="text"
         placeholder={t('AUDIT_REPORT.SEARCH')}
         className={`relative flex h-44px w-full min-w-200px items-center justify-between rounded-sm border border-lightGray3 bg-white p-10px outline-none`}
       />
-      <div className="absolute right-3 top-3 hover:cursor-pointer">
+      <div
+        onClick={() => !isPendingDataLoading && getPendingReports({ searchPendingQuery })}
+        className="absolute right-3 top-3 hover:cursor-pointer"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="20"
@@ -369,6 +396,7 @@ const MyReportsSection = () => {
         </div>
         {/* Info: date picker (20240513 - Shirley) */}
         <DatePicker
+          disabled={isPendingDataLoading}
           datePickerHandler={handlePendingDatePickerClose}
           type={DatePickerType.TEXT_PERIOD}
           period={pendingPeriod}
@@ -389,7 +417,14 @@ const MyReportsSection = () => {
           {displayedPendingSearchBar}
         </div>
         <Button
-          onClick={() => filterOptionsModalVisibilityHandler(FilterOptionsModalType.pending)}
+          disabled={isPendingDataLoading}
+          onClick={
+            () =>
+              !isPendingDataLoading &&
+              filterOptionsModalVisibilityHandler(FilterOptionsModalType.pending)
+            // Info: conflict with prettier (20240809 - Shirley)
+            // eslint-disable-next-line react/jsx-curly-newline
+          }
           className="px-3 py-3"
           variant={'secondaryOutline'}
         >
@@ -413,7 +448,9 @@ const MyReportsSection = () => {
   );
 
   const displayedPendingDataSection = isPendingDataLoading ? (
-    <div>{t('MY_REPORTS_SECTION.LOADING')}</div>
+    <div className="flex w-full items-center justify-center py-10">
+      <SkeletonList count={DEFAULT_SKELETON_COUNT_FOR_PAGE} />
+    </div>
   ) : pendingData.length !== 0 ? (
     <div className="flex flex-col max-md:max-w-full">
       {' '}
@@ -497,11 +534,18 @@ const MyReportsSection = () => {
   const displayedHistorySortMenu = (
     <div
       ref={historySortMenuRef}
-      onClick={toggleHistorySortMenu}
-      className={`group relative flex h-44px w-200px cursor-pointer ${isHistorySortMenuOpen ? 'border-primaryYellow text-primaryYellow' : ''} items-center justify-between rounded-sm border border-input-stroke-input bg-input-surface-input-background p-10px hover:border-primaryYellow hover:text-primaryYellow`}
+      onClick={isHistoryDataLoading ? undefined : toggleHistorySortMenu}
+      className={cn(
+        'group relative flex h-44px w-200px cursor-pointer items-center justify-between rounded-sm border border-input-stroke-input bg-input-surface-input-background p-10px hover:border-primaryYellow hover:text-primaryYellow',
+        {
+          'cursor-not-allowed border-button-stroke-disable text-button-text-disable hover:border-button-stroke-disable hover:text-button-text-disable':
+            isHistoryDataLoading,
+          'border-primaryYellow text-primaryYellow': isHistorySortMenuOpen,
+        }
+      )}
     >
       <p
-        className={`whitespace-nowrap group-hover:text-primaryYellow ${isHistorySortMenuOpen ? 'text-primaryYellow' : isHistorySortSelected ? '' : 'text-input-text-input-placeholder'}`}
+        className={`whitespace-nowrap ${isHistoryDataLoading ? 'group-hover:text-button-text-disable' : 'group-hover:text-primaryYellow'} ${isHistorySortMenuOpen ? 'text-primaryYellow' : isHistorySortSelected ? '' : 'text-input-text-input-placeholder'}`}
       >
         {t(filteredHistorySort)}
       </p>
@@ -543,13 +587,22 @@ const MyReportsSection = () => {
   const displayedHistorySearchBar = (
     <div className="relative flex-1">
       <input
+        disabled={isHistoryDataLoading}
         value={searchHistoryQuery}
         onChange={historyInputChangeHandler}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
+            getGeneratedReports({ searchHistoryQuery });
+          }
+        }}
         type="text"
         placeholder={t('AUDIT_REPORT.SEARCH')}
         className={`relative flex h-44px w-full min-w-200px items-center justify-between rounded-sm border border-lightGray3 bg-white p-10px outline-none`}
       />
-      <div className="absolute right-3 top-3 hover:cursor-pointer">
+      <div
+        onClick={() => !isHistoryDataLoading && getGeneratedReports({ searchHistoryQuery })}
+        className="absolute right-3 top-3 hover:cursor-pointer"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="20"
@@ -581,6 +634,7 @@ const MyReportsSection = () => {
         </div>
         {/* Info: date picker (20240513 - Shirley) */}
         <DatePicker
+          disabled={isHistoryDataLoading}
           datePickerHandler={handleHistoryDatePickerClose}
           type={DatePickerType.TEXT_PERIOD}
           period={historyPeriod}
@@ -601,7 +655,14 @@ const MyReportsSection = () => {
           {displayedHistorySearchBar}
         </div>
         <Button
-          onClick={() => filterOptionsModalVisibilityHandler(FilterOptionsModalType.history)}
+          disabled={isHistoryDataLoading}
+          onClick={
+            () =>
+              !isHistoryDataLoading &&
+              filterOptionsModalVisibilityHandler(FilterOptionsModalType.history)
+            // Info: conflict with prettier (20240809 - Shirley)
+            // eslint-disable-next-line react/jsx-curly-newline
+          }
           className="px-3 py-3"
           variant={'secondaryOutline'}
         >
@@ -625,7 +686,9 @@ const MyReportsSection = () => {
   );
 
   const displayedHistoryDataSection = isHistoryDataLoading ? (
-    <div>{t('MY_REPORTS_SECTION.LOADING')}</div>
+    <div className="flex w-full items-center justify-center py-10">
+      <SkeletonList count={DEFAULT_SKELETON_COUNT_FOR_PAGE} />
+    </div>
   ) : historyData.length !== 0 ? (
     <div className="flex flex-col max-md:max-w-full">
       <ReportsHistoryList reports={historyData} />
diff --git a/src/components/nav_bar/nav_bar.tsx b/src/components/nav_bar/nav_bar.tsx
index d0395cce3..d6e82b03a 100644
--- a/src/components/nav_bar/nav_bar.tsx
+++ b/src/components/nav_bar/nav_bar.tsx
@@ -328,14 +328,15 @@ const NavBar = () => {
         </button>
         <div className="mt-3 flex justify-center gap-0 px-16">
           <div className="my-auto text-base font-semibold leading-6 tracking-normal text-button-text-secondary">
-            {signedIn ? username ?? DEFAULT_DISPLAYED_USER_NAME : ''}
+            {signedIn ? (username ?? DEFAULT_DISPLAYED_USER_NAME) : ''}
           </div>
+          {/* Info: edit name button (20240809 - Shirley) */}
           <button
             type="button"
             // TODO: temp disabled (20240517 - Shirley)
             // eslint-disable-next-line react/jsx-boolean-value
             disabled={true}
-            className="flex shrink-0 flex-col justify-center rounded-xs px-2 disabled:text-button-text-disable"
+            className="hidden shrink-0 flex-col justify-center rounded-xs px-2 text-button-surface-strong-secondary disabled:text-button-text-disable"
           >
             <div className="flex items-center justify-center">
               <svg
@@ -346,7 +347,7 @@ const NavBar = () => {
                 viewBox="0 0 17 16"
               >
                 <path
-                  fill="#001840"
+                  className="fill-current"
                   fillRule="evenodd"
                   d="M12.128.96a2.414 2.414 0 113.415 3.415L9.167 10.75l-.045.045c-.184.185-.38.382-.62.529a2.335 2.335 0 01-.674.28c-.273.065-.552.064-.812.064H5.835a1 1 0 01-1-1V9.55v-.064c0-.26 0-.539.065-.812.057-.238.151-.465.28-.674.146-.24.343-.436.528-.62l.045-.045L12.128.96zm2 1.415a.414.414 0 00-.585 0L7.167 8.75c-.121.121-.189.19-.238.243m7.2-6.618a.414.414 0 010 .586v-.586zm-9.132-.707h2.839a1 1 0 110 2h-2.8c-.577 0-.95 0-1.233.024-.271.022-.372.06-.421.085a1 1 0 00-.437.437c-.026.05-.063.15-.086.422-.023.283-.023.655-.023 1.232v5.6c0 .576 0 .949.023 1.232.023.272.06.372.086.422a1 1 0 00.437.437c.049.025.15.063.421.085.284.023.656.024 1.233.024h5.6c.576 0 .948-.001 1.232-.024.271-.022.372-.06.421-.085a1 1 0 00.438-.437c.025-.05.062-.15.085-.422.023-.283.024-.656.024-1.232v-2.8a1 1 0 112 0V11.506c0 .527 0 .982-.031 1.357-.032.395-.104.788-.296 1.167a3 3 0 01-1.312 1.31c-.378.194-.771.265-1.166.297-.375.03-.83.03-1.357.03H4.997c-.527 0-.982 0-1.357-.03-.395-.032-.788-.103-1.166-.296a3 3 0 01-1.312-1.311c-.192-.379-.264-.772-.296-1.167-.03-.375-.03-.83-.03-1.357V5.83c0-.527 0-.982.03-1.356.032-.396.104-.789.296-1.167a3 3 0 011.312-1.311c.378-.193.771-.264 1.166-.297.375-.03.83-.03 1.357-.03zm9.131 1.293L7.753 9.336l6.375-6.375zM6.884 9.047v-.001.001zm0-.001a.334.334 0 00-.04.096.61.61 0 00-.005.069 8.42 8.42 0 00-.004.34v.117h.117c.172 0 .268 0 .34-.004.064-.003.075-.007.069-.005a.333.333 0 00.095-.04m.297-.283a8.41 8.41 0 01-.243.238l.243-.238zm-.243.238a.61.61 0 01-.053.045l.053-.045z"
                   clipRule="evenodd"
@@ -390,7 +391,8 @@ const NavBar = () => {
         <Button
           variant={'secondaryBorderless'}
           disabled={!selectedCompany} // Info: (20240513 - Julian) 如果沒有選擇 company 就不能使用
-          className="mt-3 flex w-full justify-start rounded-xs px-4 py-2.5 disabled:text-button-text-disable"
+          // Info: disabled for now (20240809 - Shirley)
+          className="mt-3 hidden w-full justify-start rounded-xs px-4 py-2.5 disabled:text-button-text-disable"
         >
           <div className="my-auto flex items-center justify-center">
             <svg
diff --git a/src/components/new_journal_form/new_journal_form.tsx b/src/components/new_journal_form/new_journal_form.tsx
index f403f6589..d4326df7b 100644
--- a/src/components/new_journal_form/new_journal_form.tsx
+++ b/src/components/new_journal_form/new_journal_form.tsx
@@ -157,6 +157,7 @@ const NewJournalForm = () => {
   const [isPriceValid, setIsPriceValid] = useState<boolean>(true);
   const [isInstallmentValid, setIsInstallmentValid] = useState<boolean>(true);
   const [isPartialPaidValid, setIsPartialPaidValid] = useState<boolean>(true);
+  const [isFeeValid, setIsFeeValid] = useState<boolean>(true);
 
   useEffect(() => {
     if (selectedOCR !== undefined && hasCompanyId) {
@@ -351,6 +352,20 @@ const NewJournalForm = () => {
   //  Info: (20240425 - Julian) 檢查表單內容是否有變動
   const formChangedHandler = () => setFormHasChanged(true);
 
+  // Info: (20240809 - Shirley) 檢查費用是否小於總金額
+  const checkFeeValidity = (fee: number, totalPrice: number) => {
+    setIsFeeValid(fee <= totalPrice);
+  };
+
+  const amountChangeHandler = (value: number, e: React.ChangeEvent<HTMLInputElement>) => {
+    // Info: (20240809 - Shirley) 檢查費用是否正當
+    if (e.target.name === 'fee-input') {
+      checkFeeValidity(value, inputTotalPrice);
+    } else if (e.target.name === 'input-total-price') {
+      checkFeeValidity(inputFee, value);
+    }
+  };
+
   // Info: (20240423 - Julian) 清空表單的所有欄位
   const clearFormHandler = () => {
     setDatePeriod(default30DayPeriodInSec);
@@ -855,6 +870,7 @@ const NewJournalForm = () => {
                 isDecimal
                 required
                 hasComma
+                triggerWhenChanged={amountChangeHandler}
                 className="h-46px flex-1 rounded-l-sm border border-lightGray3 bg-white p-10px outline-none"
               />
               <div className="flex items-center gap-4px rounded-r-sm border border-l-0 border-lightGray3 bg-white p-12px text-sm text-lightGray4">
@@ -935,6 +951,7 @@ const NewJournalForm = () => {
                 isDecimal
                 required={feeToggle}
                 hasComma
+                triggerWhenChanged={amountChangeHandler}
                 className="h-46px flex-1 rounded-l-sm border border-lightGray3 bg-transparent p-10px outline-none md:w-1/2"
               />
               <div className="flex items-center gap-4px rounded-r-sm border border-l-0 border-lightGray3 p-12px text-sm text-lightGray4">
@@ -948,6 +965,11 @@ const NewJournalForm = () => {
                 <p>{t('JOURNAL.TWD')}</p>
               </div>
             </div>
+            {feeToggle && !isFeeValid && (
+              <div className="ml-auto text-sm text-input-text-error">
+                <p>{t('JOURNAL.FEE_EXCEEDS_TOTAL')}</p>
+              </div>
+            )}
           </div>
         </div>
 
@@ -1310,12 +1332,7 @@ const NewJournalForm = () => {
           >
             {t('JOURNAL.CLEAR_ALL')}
           </button>
-          <Button
-            id="upload-btn"
-            type="submit"
-            className="px-16px py-8px"
-            // disabled={isUploadDisabled}
-          >
+          <Button id="upload-btn" type="submit" className="px-16px py-8px" disabled={!isFeeValid}>
             <p>{t('JOURNAL.UPLOAD')}</p>
             <svg
               width="20"
diff --git a/src/components/numeric_input/numeric_input.tsx b/src/components/numeric_input/numeric_input.tsx
index 0ffadefc0..f1e65b965 100644
--- a/src/components/numeric_input/numeric_input.tsx
+++ b/src/components/numeric_input/numeric_input.tsx
@@ -6,6 +6,7 @@ interface INumericInputProps extends React.InputHTMLAttributes<HTMLInputElement>
   setValue: React.Dispatch<React.SetStateAction<number>>;
   isDecimal?: boolean;
   hasComma?: boolean; // Info: (20240722 - Liz) 新增逗號顯示
+  triggerWhenChanged?: (value: number, e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const formatDisplayValue = (
@@ -23,7 +24,14 @@ const formatDisplayValue = (
   return hasComma ? numberWithCommas(stringValue) : stringValue;
 };
 
-const NumericInput = ({ value, setValue, isDecimal, hasComma, ...props }: INumericInputProps) => {
+const NumericInput = ({
+  value,
+  setValue,
+  isDecimal,
+  hasComma,
+  triggerWhenChanged,
+  ...props
+}: INumericInputProps) => {
   // Info: (20240723 - Liz) displayValue 是顯示在 input 上的顯示值
   const [displayValue, setDisplayValue] = useState<string>(value.toString());
   // Info: (20240723 - Liz) dbValue 是存入 DB 的儲存值
@@ -60,6 +68,10 @@ const NumericInput = ({ value, setValue, isDecimal, hasComma, ...props }: INumer
 
     setDbValue(validNumericValue); // 更新儲存值
     setDisplayValue(formattedDisplayValue); // 更新顯示值
+
+    if (triggerWhenChanged) {
+      triggerWhenChanged(validNumericValue, event);
+    }
   };
 
   // Info: (20240723 - Liz) 處理 displayValue 為空或僅為點的情況
diff --git a/src/components/pending_report_list/pending_report_list.tsx b/src/components/pending_report_list/pending_report_list.tsx
index 934e37c11..e0899484d 100644
--- a/src/components/pending_report_list/pending_report_list.tsx
+++ b/src/components/pending_report_list/pending_report_list.tsx
@@ -243,20 +243,17 @@ const PendingReportList = ({ reports }: IReportListProps) => {
     </div>
   );
 
-  const displayedList = reportItems
-    // Info: (20240722 - Julian) 依照 createdTimestamp 由新到舊排序
-    .sort((a, b) => b.createdAt - a.createdAt)
-    .map((reportItem, index) => (
-      <PendingReportItem
-        key={reportItem.id}
-        report={reportItem}
-        checked={individualChecks[index]}
-        isCheckboxVisible={isCheckboxVisible}
-        onCheckChange={() => individualCheckHandler(index)}
-        onReportItemUpdate={handleReportItemUpdate}
-        onReportItemDelete={handleReportItemDelete}
-      />
-    ));
+  const displayedList = reportItems.map((reportItem, index) => (
+    <PendingReportItem
+      key={reportItem.id}
+      report={reportItem}
+      checked={individualChecks[index]}
+      isCheckboxVisible={isCheckboxVisible}
+      onCheckChange={() => individualCheckHandler(index)}
+      onReportItemUpdate={handleReportItemUpdate}
+      onReportItemDelete={handleReportItemDelete}
+    />
+  ));
 
   const displayedCheckbox = isCheckboxVisible ? (
     <th className="flex h-10 justify-center pt-10px">
diff --git a/src/components/reports_history_item/reports_history_item.tsx b/src/components/reports_history_item/reports_history_item.tsx
index 116666b9e..778259e54 100644
--- a/src/components/reports_history_item/reports_history_item.tsx
+++ b/src/components/reports_history_item/reports_history_item.tsx
@@ -107,24 +107,26 @@ const ReportsHistoryItem = ({
       </td>
       {/* Info: (20240514 - Shirley) Blockchain explorer link */}
       <td className="hidden px-16px text-left font-medium text-navyBlue2 lg:table-cell">
-        <Link href={blockChainExplorerLink} target="_blank">
-          <Button variant={'tertiaryBorderless'} size={'small'}>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              fill="none"
-              viewBox="0 0 24 24"
-            >
-              <path
-                className="fill-current"
-                fillRule="evenodd"
-                d="M12.952 2.932a5.75 5.75 0 018.13 8.131l-.009.01-3 3a5.75 5.75 0 01-8.67-.622.75.75 0 011.2-.898 4.25 4.25 0 006.41.459l2.995-2.996a4.25 4.25 0 00-6.01-6.008l-1.716 1.706a.75.75 0 01-1.058-1.064l1.72-1.71.008-.008zM7.989 8.61a5.75 5.75 0 016.615 1.944.75.75 0 01-1.202.898 4.247 4.247 0 00-4.888-1.436 4.249 4.249 0 00-1.52.977l-2.996 2.995a4.25 4.25 0 006.01 6.01l1.705-1.705a.75.75 0 111.06 1.06l-1.71 1.71-.009.01a5.75 5.75 0 01-8.13-8.131l.008-.01 3-3A5.75 5.75 0 017.99 8.61z"
-                clipRule="evenodd"
-              ></path>
-            </svg>
-          </Button>
-        </Link>
+        {blockChainExplorerLink ? (
+          <Link href={blockChainExplorerLink} target="_blank">
+            <Button variant={'tertiaryBorderless'} size={'small'}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  className="fill-current"
+                  fillRule="evenodd"
+                  d="M12.952 2.932a5.75 5.75 0 018.13 8.131l-.009.01-3 3a5.75 5.75 0 01-8.67-.622.75.75 0 011.2-.898 4.25 4.25 0 006.41.459l2.995-2.996a4.25 4.25 0 00-6.01-6.008l-1.716 1.706a.75.75 0 01-1.058-1.064l1.72-1.71.008-.008zM7.989 8.61a5.75 5.75 0 016.615 1.944.75.75 0 01-1.202.898 4.247 4.247 0 00-4.888-1.436 4.249 4.249 0 00-1.52.977l-2.996 2.995a4.25 4.25 0 006.01 6.01l1.705-1.705a.75.75 0 111.06 1.06l-1.71 1.71-.009.01a5.75 5.75 0 01-8.13-8.131l.008-.01 3-3A5.75 5.75 0 017.99 8.61z"
+                  clipRule="evenodd"
+                ></path>
+              </svg>
+            </Button>
+          </Link>
+        ) : null}
       </td>
       {/* Info: project (20240528 - Shirley) */}
       <td className="hidden px-16px text-left lg:table-cell">{displayedProject}</td>
diff --git a/src/components/reports_history_list/reports_history_list.tsx b/src/components/reports_history_list/reports_history_list.tsx
index 49e4560a8..e18665f0d 100644
--- a/src/components/reports_history_list/reports_history_list.tsx
+++ b/src/components/reports_history_list/reports_history_list.tsx
@@ -49,18 +49,15 @@ const ReportsHistoryList = ({ reports }: IReportsHistoryListProps) => {
     setIndividualChecks(updatedChecks);
   };
 
-  const displayedList = reports
-    // Info: (20240722 - Julian) 依照 createdTimestamp 由新到舊排序
-    .sort((a, b) => b.createdAt - a.createdAt)
-    .map((report, index) => (
-      <ReportsHistoryItem
-        key={report.id}
-        report={report}
-        checked={individualChecks[index]}
-        onCheckChange={() => individualCheckHandler(index)}
-        isCheckboxVisible={isCheckboxVisible}
-      />
-    ));
+  const displayedList = reports.map((report, index) => (
+    <ReportsHistoryItem
+      key={report.id}
+      report={report}
+      checked={individualChecks[index]}
+      onCheckChange={() => individualCheckHandler(index)}
+      isCheckboxVisible={isCheckboxVisible}
+    />
+  ));
   const displayedStatusButtons = (
     <div className="flex w-full items-center justify-end space-x-5">
       {isCheckboxVisible ? (
diff --git a/src/components/select_company_page_body/select_company_page_body.tsx b/src/components/select_company_page_body/select_company_page_body.tsx
index 5fa565fef..c20ac3da0 100644
--- a/src/components/select_company_page_body/select_company_page_body.tsx
+++ b/src/components/select_company_page_body/select_company_page_body.tsx
@@ -163,7 +163,8 @@ const SelectCompanyPageBody = () => {
         <button
           type="button"
           onClick={companyInvitationModalVisibilityHandler}
-          className="flex w-full items-center justify-start gap-3 border-t px-12px py-8px text-xs text-lightGray5"
+          // Info: disabled for now (20240809 - Shirley)
+          className="hidden w-full items-center justify-start gap-3 border-t px-12px py-8px text-xs text-lightGray5"
         >
           <Image src="/icons/invitation.svg" width={16} height={16} alt="invitation_icon" />
           <p>{t('SELECT_COMPANY.ENTER_INVITATION_CODE')}</p>
diff --git a/src/components/step_one_tab/step_one_tab.tsx b/src/components/step_one_tab/step_one_tab.tsx
index 2dabf687a..bc9c00cf8 100644
--- a/src/components/step_one_tab/step_one_tab.tsx
+++ b/src/components/step_one_tab/step_one_tab.tsx
@@ -9,7 +9,8 @@ import { IOCR } from '@/interfaces/ocr';
 import { ToastType } from '@/interfaces/toastify';
 import { ProgressStatus } from '@/constants/account';
 import UploadedFileItem from '@/components/uploaded_file_item/uploaded_file_item';
-import Pagination from '@/components/pagination/pagination';
+// Info: (20240809 - Shirley) disabled for now , 分頁功能在 alpha release 還沒實作
+// import Pagination from '@/components/pagination/pagination';
 import JournalUploadArea from '@/components/journal_upload_area/journal_upload_area';
 import Link from 'next/link';
 import { ISUNFA_ROUTE } from '@/constants/url';
@@ -33,8 +34,12 @@ const StepOneTab = () => {
   const { cameraScannerVisibilityHandler, toastHandler } = useGlobalCtx();
   const { selectedCompany } = useUserCtx();
   const { OCRList, OCRListStatus, updateOCRListHandler, selectOCRHandler } = useAccountingCtx();
+  // Info: (20240809 - Shirley) disabled for now , 分頁功能在 alpha release 還沒實作
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [currentFilePage, setCurrentFilePage] = useState<number>(1);
   const [fileList, setFileList] = useState<IOCR[]>(OCRList);
+  // Info: (20240809 - Shirley) disabled for now , 分頁功能在 alpha release 還沒實作
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [totalPages, setTotalPages] = useState<number>(1);
   const { trigger: deleteOCRTrigger } = APIHandler<void>(APIName.OCR_DELETE);
 
@@ -168,14 +173,15 @@ const StepOneTab = () => {
         <div className="mb-50px flex flex-col items-center gap-y-50px">
           <div className="flex w-full flex-col items-center gap-y-12px">{displayedFileList}</div>
           {/* Info: (20240523 - Julian) Pagination */}
-          {totalPages > 1 && (
+          {/* Info: (20240809 - Shirley) disabled for now , 分頁功能在 alpha release 還沒實作 */}
+          {/* {totalPages > 1 && (
             <Pagination
               currentPage={currentFilePage}
               totalPages={totalPages}
               setCurrentPage={setCurrentFilePage}
               pagePrefix="filePage"
             />
-          )}
+          )} */}
         </div>
       </>
     ) : null;
diff --git a/src/lib/utils/repo/invoice.beta.repo.ts b/src/lib/utils/repo/invoice.beta.repo.ts
index 4ba54d19b..b16635e0d 100644
--- a/src/lib/utils/repo/invoice.beta.repo.ts
+++ b/src/lib/utils/repo/invoice.beta.repo.ts
@@ -258,15 +258,17 @@ export async function listInvoice({
       gte: startDateInSecond,
       lte: endDateInSecond,
     },
-    OR: [{ deletedAt: 0 }, { deletedAt: null }],
-    ...(searchQuery
-      ? [
-          { invoice: { number: { contains: searchQuery, mode: 'insensitive' } } },
-          { invoice: { vendorTaxId: { contains: searchQuery, mode: 'insensitive' } } },
-          { invoice: { vendorOrSupplier: { contains: searchQuery, mode: 'insensitive' } } },
-          { invoice: { description: { contains: searchQuery, mode: 'insensitive' } } },
-        ]
-      : {}),
+    AND: [
+      { OR: [{ deletedAt: 0 }, { deletedAt: null }] },
+      {
+        OR: [
+          { number: { contains: searchQuery, mode: 'insensitive' } },
+          { vendorTaxId: { contains: searchQuery, mode: 'insensitive' } },
+          { vendorOrSupplier: { contains: searchQuery, mode: 'insensitive' } },
+          { description: { contains: searchQuery, mode: 'insensitive' } },
+        ],
+      },
+    ],
   };
 
   const totalCount = await prisma.invoice.count({ where });
diff --git a/src/lib/utils/repo/journal.repo.ts b/src/lib/utils/repo/journal.repo.ts
index 7e943b8c7..2675b9537 100644
--- a/src/lib/utils/repo/journal.repo.ts
+++ b/src/lib/utils/repo/journal.repo.ts
@@ -112,14 +112,16 @@ export async function listJournal(
       invoice: {
         eventType,
       },
-      OR: [{ deletedAt: 0 }, { deletedAt: null }],
-      ...(searchQuery
-        ? [
+      AND: [
+        { OR: [{ deletedAt: 0 }, { deletedAt: null }] },
+        {
+          OR: [
             { invoice: { vendorOrSupplier: { contains: searchQuery, mode: 'insensitive' } } },
             { invoice: { description: { contains: searchQuery, mode: 'insensitive' } } },
             { voucher: { no: { contains: searchQuery, mode: 'insensitive' } } },
-          ]
-        : {}),
+          ],
+        },
+      ],
     };
 
     const totalCount = await prisma.journal.count({ where });
diff --git a/src/lib/utils/repo/report.repo.ts b/src/lib/utils/repo/report.repo.ts
index 7f9aa2d16..076a49c64 100644
--- a/src/lib/utils/repo/report.repo.ts
+++ b/src/lib/utils/repo/report.repo.ts
@@ -148,15 +148,15 @@ export async function findManyReports(
     AND: [
       // { from: { gte: startDateInSecond } },
       { to: { lte: endDateInSecond } },
-    ],
-    OR: [{ deletedAt: 0 }, { deletedAt: null }],
-    ...(searchQuery
-      ? [
+      { OR: [{ deletedAt: 0 }, { deletedAt: null }] },
+      {
+        OR: [
           { name: { contains: searchQuery, mode: 'insensitive' } },
           { type: { contains: searchQuery, mode: 'insensitive' } },
           { reportType: { contains: searchQuery, mode: 'insensitive' } },
-        ]
-      : undefined),
+        ],
+      },
+    ],
   };
 
   const orderBy: Prisma.ReportOrderByWithRelationInput = { [sortBy]: sortOrder };
diff --git a/src/locales/cn/common.json b/src/locales/cn/common.json
index 9b13a7702..e968c0a47 100644
--- a/src/locales/cn/common.json
+++ b/src/locales/cn/common.json
@@ -435,7 +435,8 @@
     "GO_BACK_TO_JOURNAL_LIST": "返回日记帐",
     "DOWNLOAD": "下载",
     "DEBIT_AMOUNT_BALANCED": "借方金额与总金额平衡",
-    "CREDIT_AMOUNT_BALANCED": "贷方金额与总金额平衡"
+    "CREDIT_AMOUNT_BALANCED": "贷方金额与总金额平衡",
+    "FEE_EXCEEDS_TOTAL": "费用不能大于总金额"
   },
   "PROJECT": {
     "CHOOSE_TEAM_MEMBERS": "选择团队成员",
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
index 7c75bdadf..de091b584 100644
--- a/src/locales/en/common.json
+++ b/src/locales/en/common.json
@@ -435,7 +435,8 @@
     "GO_BACK_TO_JOURNAL_LIST": "Go back to journal list",
     "DOWNLOAD": "Download",
     "DEBIT_AMOUNT_BALANCED": "Debit amount balanced with total amount",
-    "CREDIT_AMOUNT_BALANCED": "Credit amount balanced with total amount"
+    "CREDIT_AMOUNT_BALANCED": "Credit amount balanced with total amount",
+    "FEE_EXCEEDS_TOTAL": "Fee cannot exceed total amount"
   },
   "PROJECT": {
     "CHOOSE_TEAM_MEMBERS": "Choose Team Members",
diff --git a/src/locales/tw/common.json b/src/locales/tw/common.json
index 81ccf5cc7..7e622cf66 100644
--- a/src/locales/tw/common.json
+++ b/src/locales/tw/common.json
@@ -435,7 +435,8 @@
     "GO_BACK_TO_JOURNAL_LIST": "返回日記帳",
     "DOWNLOAD": "下載",
     "DEBIT_AMOUNT_BALANCED": "借方金額與總金額平衡",
-    "CREDIT_AMOUNT_BALANCED": "貸方金額與總金額平衡"
+    "CREDIT_AMOUNT_BALANCED": "貸方金額與總金額平衡",
+    "FEE_EXCEEDS_TOTAL": "費用不能大於總金額"
   },
   "PROJECT": {
     "CHOOSE_TEAM_MEMBERS": "選擇團隊成員",
diff --git a/src/pages/api/v1/company/[companyId]/payment/index.ts b/src/pages/api/v1/company/[companyId]/payment/index.ts
index 3395d5a3f..b486d5c1b 100644
--- a/src/pages/api/v1/company/[companyId]/payment/index.ts
+++ b/src/pages/api/v1/company/[companyId]/payment/index.ts
@@ -37,8 +37,8 @@ async function handleGetRequest(req: NextApiRequest, res: NextApiResponse) {
       body: JSON.stringify({
         merchantId: oenMerchantId,
         customId: orderIdNum, // order id
-        successUrl: `https://www.google.com`, // TODO (20240806 - Jacky): Need to modify in the future
-        failureUrl: `https://www.bing.com`, // TODO (20240806 - Jacky): Need to modify in the future
+        successUrl: `https://www.google.com`,
+        failureUrl: `https://www.bing.com`,
       }),
     });
     const responseJson = await response.json();