diff --git a/package.json b/package.json
index e7b01441..8d10b018 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.2+23",
+  "version": "0.8.2+24",
   "private": false,
   "scripts": {
     "dev": "next dev",
diff --git a/src/components/accounting_title_page_body/accounting_title_page_body.tsx b/src/components/accounting_title_page_body/accounting_title_page_body.tsx
index d0264c88..2f9079ab 100644
--- a/src/components/accounting_title_page_body/accounting_title_page_body.tsx
+++ b/src/components/accounting_title_page_body/accounting_title_page_body.tsx
@@ -194,7 +194,7 @@ const AccountingTitlePageBody = () => {
       <div className="mt-40px flex flex-col items-center gap-x-20px gap-y-8px lg:mt-0 lg:flex-row">
         {/* Info: (20240717 - Julian) Assets */}
         <div className="flex w-full flex-col gap-8px lg:w-200px">
-          <p className="font-semibold text-input-text-primary">{t('common:COMMON.ASSETS')}</p>
+          <p className="font-semibold text-input-text-primary">{t('common:COMMON.ASSET')}</p>
           <div
             onClick={assetDropmenuToggleHandler}
             className={`relative flex items-center justify-between rounded-sm border bg-input-surface-input-background ${assetVisible ? 'border-input-stroke-selected' : 'border-input-stroke-input'} px-12px py-10px hover:cursor-pointer`}
diff --git a/src/components/accounting_voucher_row/accounting_voucher_row.tsx b/src/components/accounting_voucher_row/accounting_voucher_row.tsx
index 88772543..1c4e4458 100644
--- a/src/components/accounting_voucher_row/accounting_voucher_row.tsx
+++ b/src/components/accounting_voucher_row/accounting_voucher_row.tsx
@@ -201,7 +201,7 @@ const AccountingVoucherRow = ({ accountingVoucher }: IAccountingVoucherRow) => {
           <FiSearch size={16} />
         </div>
         <div className="px-12px py-8px uppercase text-dropdown-text-head">
-          {t('common:COMMON.ASSETS')}
+          {t('common:COMMON.ASSET')}
         </div>
         <div
           ref={accountingRef}
diff --git a/src/components/accounting_voucher_row/accounting_voucher_row_mobile.tsx b/src/components/accounting_voucher_row/accounting_voucher_row_mobile.tsx
index 5b9d1798..b0713c70 100644
--- a/src/components/accounting_voucher_row/accounting_voucher_row_mobile.tsx
+++ b/src/components/accounting_voucher_row/accounting_voucher_row_mobile.tsx
@@ -172,7 +172,7 @@ const AccountingVoucherRowMobile = ({ type, accountingVoucher }: IAccountingVouc
           <FiSearch size={16} />
         </div>
         <div className="px-12px py-8px uppercase text-dropdown-text-head">
-          {t('common:COMMON.ASSETS')}
+          {t('common:COMMON.ASSET')}
         </div>
         <div
           ref={accountingRef}
diff --git a/src/components/balance_sheet_report_body/balance_sheet_report_body_all.tsx b/src/components/balance_sheet_report_body/balance_sheet_report_body_all.tsx
index aa528115..c927e68b 100644
--- a/src/components/balance_sheet_report_body/balance_sheet_report_body_all.tsx
+++ b/src/components/balance_sheet_report_body/balance_sheet_report_body_all.tsx
@@ -4,7 +4,7 @@ import { useUserCtx } from '@/contexts/user_context';
 import { BalanceSheetReport, FinancialReportItem } from '@/interfaces/report';
 import APIHandler from '@/lib/utils/api_handler';
 import Image from 'next/image';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import PieChart from '@/components/balance_sheet_report_body/pie_chart';
 import PieChartAssets from '@/components/balance_sheet_report_body/pie_chart_assets';
 import useStateRef from 'react-usestateref';
@@ -12,6 +12,7 @@ import { timestampToString } from '@/lib/utils/common';
 import { SkeletonList } from '@/components/skeleton/skeleton';
 import { DEFAULT_SKELETON_COUNT_FOR_PAGE } from '@/constants/display';
 import { useTranslation } from 'next-i18next';
+import CollapseButton from '@/components/button/collapse_button';
 
 interface IBalanceSheetReportBodyAllProps {
   reportId: string;
@@ -72,6 +73,18 @@ const BalanceSheetReportBodyAll = ({ reportId }: IBalanceSheetReportBodyAllProps
   const isNoDataForCurALR = curAssetLiabilityRatio.every((value) => value === 0);
   const isNoDataForPreALR = preAssetLiabilityRatio.every((value) => value === 0);
 
+  // Info: (20241001 - Anna) 管理表格摺疊狀態
+  const [isSummaryCollapsed, setIsSummaryCollapsed] = useState(false);
+  const [isDetailCollapsed, setIsDetailCollapsed] = useState(false);
+  // Info: (20241001 - Anna) 切換摺疊狀態
+  const toggleSummaryTable = () => {
+    setIsSummaryCollapsed(!isSummaryCollapsed);
+  };
+
+  const toggleDetailTable = () => {
+    setIsDetailCollapsed(!isDetailCollapsed);
+  };
+
   useEffect(() => {
     if (getReportFinancialSuccess === true && reportFinancial && reportFinancial?.otherInfo) {
       const currentDateString = timestampToString(reportFinancial.curDate.to ?? 0);
@@ -626,39 +639,44 @@ const BalanceSheetReportBodyAll = ({ reportId }: IBalanceSheetReportBodyAllProps
 
       <section className="mx-1 text-text-neutral-secondary">
         <div className="relative z-1 mb-16px flex justify-between font-semibold text-surface-brand-secondary">
-          <p>一、項目彙總格式</p>
+          <div className="flex items-center">
+            <p>一、項目彙總格式</p>
+            <CollapseButton onClick={toggleSummaryTable} isCollapsed={isSummaryCollapsed} />
+          </div>
           <p>單位：新台幣元</p>
         </div>
-        <table className="relative z-1 w-full border-collapse bg-white">
-          <thead>
-            <tr>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
-                代號
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
-                會計項目
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
-                {curDate}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
-                %
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
-                {preDate}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
-                %
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {reportFinancial &&
-              reportFinancial.general &&
-              Object.prototype.hasOwnProperty.call(reportFinancial, 'general') &&
-              rowsForPage1(reportFinancial.general)}
-          </tbody>
-        </table>
+        {!isSummaryCollapsed && (
+          <table className="relative z-1 w-full border-collapse bg-white">
+            <thead>
+              <tr>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
+                  代號
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
+                  會計項目
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
+                  {curDate}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
+                  %
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
+                  {preDate}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
+                  %
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {reportFinancial &&
+                reportFinancial.general &&
+                Object.prototype.hasOwnProperty.call(reportFinancial, 'general') &&
+                rowsForPage1(reportFinancial.general)}
+            </tbody>
+          </table>
+        )}
       </section>
 
       {renderedFooter(1)}
@@ -727,39 +745,44 @@ const BalanceSheetReportBodyAll = ({ reportId }: IBalanceSheetReportBodyAllProps
         </div>
 
         <div className="mb-16px mt-32px flex justify-between font-semibold text-surface-brand-secondary">
-          <p>二、細項分類格式</p>
+          <div className="flex items-center">
+            <p>二、細項分類格式</p>
+            <CollapseButton onClick={toggleDetailTable} isCollapsed={isDetailCollapsed} />
+          </div>
           <p>單位：新台幣元</p>
         </div>
-        <table className="w-full border-collapse bg-white">
-          <thead>
-            <tr>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
-                代號
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
-                會計項目
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
-                {curDate}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
-                %
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
-                {preDate}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
-                %
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {reportFinancial &&
-              reportFinancial.details &&
-              Object.prototype.hasOwnProperty.call(reportFinancial, 'details') &&
-              rowsForPage2part1(reportFinancial.details)}
-          </tbody>
-        </table>
+        {!isDetailCollapsed && (
+          <table className="w-full border-collapse bg-white">
+            <thead>
+              <tr>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
+                  代號
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-sm font-semibold">
+                  會計項目
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
+                  {curDate}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
+                  %
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-sm font-semibold">
+                  {preDate}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-sm font-semibold">
+                  %
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {reportFinancial &&
+                reportFinancial.details &&
+                Object.prototype.hasOwnProperty.call(reportFinancial, 'details') &&
+                rowsForPage2part1(reportFinancial.details)}
+            </tbody>
+          </table>
+        )}
       </section>
       {renderedFooter(2)}
     </div>
diff --git a/src/components/button/collapse_button.tsx b/src/components/button/collapse_button.tsx
new file mode 100644
index 00000000..b69e6a53
--- /dev/null
+++ b/src/components/button/collapse_button.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { BsChevronDown, BsChevronUp } from 'react-icons/bs';
+
+// Info: (20241001 - Anna) 定義 CollapseButton 的 props 類型
+interface CollapseButtonProps {
+  onClick: () => void;
+  isCollapsed: boolean;
+}
+
+const CollapseButton: React.FC<CollapseButtonProps> = ({ onClick, isCollapsed }) => {
+  return (
+    <p className="inline-flex">
+      <button className="rounded px-2" onClick={onClick} type="button" aria-expanded={!isCollapsed}>
+        {/* Info: (20241001 - Anna) 根據狀態顯示對應箭頭 */}
+        {isCollapsed ? (
+          <BsChevronUp style={{ color: 'var(--neutral-500)' }} />
+        ) : (
+          <BsChevronDown style={{ color: 'var(--neutral-500)' }} />
+        )}
+      </button>
+    </p>
+  );
+};
+
+export default CollapseButton;
diff --git a/src/components/cash_flow_statement_report_body/cash_flow_statement_report_body_all.tsx b/src/components/cash_flow_statement_report_body/cash_flow_statement_report_body_all.tsx
index 18e9708f..972da918 100644
--- a/src/components/cash_flow_statement_report_body/cash_flow_statement_report_body_all.tsx
+++ b/src/components/cash_flow_statement_report_body/cash_flow_statement_report_body_all.tsx
@@ -2,7 +2,7 @@ import { APIName } from '@/constants/api_connection';
 import { useUserCtx } from '@/contexts/user_context';
 import { CashFlowStatementReport, FinancialReportItem } from '@/interfaces/report';
 import APIHandler from '@/lib/utils/api_handler';
-import React, { useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import LineChart from '@/components/cash_flow_statement_report_body/line_chart';
@@ -13,6 +13,7 @@ import { SkeletonList } from '@/components/skeleton/skeleton';
 import { DEFAULT_SKELETON_COUNT_FOR_PAGE } from '@/constants/display';
 import useStateRef from 'react-usestateref';
 import { timestampToString } from '@/lib/utils/common';
+import CollapseButton from '@/components/button/collapse_button';
 
 interface ICashFlowStatementReportBodyAllProps {
   reportId: string;
@@ -53,6 +54,17 @@ const CashFlowStatementReportBodyAll = ({ reportId }: ICashFlowStatementReportBo
   const [firstThought, setFirstThought] = useStateRef<string>('');
   const [secondThought, setSecondThought] = useStateRef<string>('');
   const [thirdThought, setThirdThought] = useStateRef<string>('');
+  // Info: (20241001 - Anna) 管理表格摺疊狀態
+  const [isSummaryCollapsed, setIsSummaryCollapsed] = useState(false);
+  const [isDetailCollapsed, setIsDetailCollapsed] = useState(false);
+  // Info: (20241001 - Anna) 切換摺疊狀態
+  const toggleSummaryTable = () => {
+    setIsSummaryCollapsed(!isSummaryCollapsed);
+  };
+
+  const toggleDetailTable = () => {
+    setIsDetailCollapsed(!isDetailCollapsed);
+  };
 
   useEffect(() => {
     if (getReportFinancialSuccess === true && reportFinancial) {
@@ -320,10 +332,16 @@ const CashFlowStatementReportBodyAll = ({ reportId }: ICashFlowStatementReportBo
       </header>
       <section className="relative mx-1 text-text-neutral-secondary">
         <div className="mb-16px flex justify-between text-xs font-semibold text-surface-brand-secondary">
-          <p>一、項目彙總格式</p>
+          <div className="flex items-center">
+            <p>一、項目彙總格式</p>
+            <CollapseButton onClick={toggleSummaryTable} isCollapsed={isSummaryCollapsed} />
+          </div>
           <p>單位：新台幣元</p>
         </div>
-        {reportFinancial && reportFinancial.general && renderTable(reportFinancial.general, 0, 10)}
+        {!isSummaryCollapsed &&
+          reportFinancial &&
+          reportFinancial.general &&
+          renderTable(reportFinancial.general, 0, 10)}
       </section>
       {renderedFooter(1)}
     </div>
@@ -359,10 +377,16 @@ const CashFlowStatementReportBodyAll = ({ reportId }: ICashFlowStatementReportBo
         </div>
 
         <div className="mb-1 mt-8 flex justify-between text-xs font-semibold text-surface-brand-secondary">
-          <p>二、細項分類格式</p>
+          <div className="flex items-center">
+            <p>二、細項分類格式</p>
+            <CollapseButton onClick={toggleDetailTable} isCollapsed={isDetailCollapsed} />
+          </div>
           <p>單位：新台幣元</p>
         </div>
-        {reportFinancial && reportFinancial.details && renderTable(reportFinancial.details, 0, 3)}
+        {!isDetailCollapsed &&
+          reportFinancial &&
+          reportFinancial.details &&
+          renderTable(reportFinancial.details, 0, 3)}
 
         <div className="relative bottom-20 right-0 -z-10">
           <Image
diff --git a/src/components/income_statement_report_body/income_statement_report_body_all.tsx b/src/components/income_statement_report_body/income_statement_report_body_all.tsx
index af19c7d2..f6a744bc 100644
--- a/src/components/income_statement_report_body/income_statement_report_body_all.tsx
+++ b/src/components/income_statement_report_body/income_statement_report_body_all.tsx
@@ -6,8 +6,9 @@ import { useUserCtx } from '@/contexts/user_context';
 import { FinancialReport, IncomeStatementOtherInfo } from '@/interfaces/report';
 import APIHandler from '@/lib/utils/api_handler';
 import Image from 'next/image';
-import React from 'react';
+import React, { useState } from 'react';
 import { format } from 'date-fns';
+import CollapseButton from '@/components/button/collapse_button';
 
 interface IIncomeStatementReportBodyAllProps {
   reportId: string;
@@ -15,6 +16,17 @@ interface IIncomeStatementReportBodyAllProps {
 
 const IncomeStatementReportBodyAll = ({ reportId }: IIncomeStatementReportBodyAllProps) => {
   const { isAuthLoading, selectedCompany } = useUserCtx();
+  // Info: (20241001 - Anna) 管理表格摺疊狀態
+  const [isSummaryCollapsed, setIsSummaryCollapsed] = useState(false);
+  const [isDetailCollapsed, setIsDetailCollapsed] = useState(false);
+  // Info: (20241001 - Anna) 切換摺疊狀態
+  const toggleSummaryTable = () => {
+    setIsSummaryCollapsed(!isSummaryCollapsed);
+  };
+
+  const toggleDetailTable = () => {
+    setIsDetailCollapsed(!isDetailCollapsed);
+  };
   const hasCompanyId = isAuthLoading === false && !!selectedCompany?.id;
   const {
     data: reportFinancial,
@@ -124,73 +136,78 @@ const IncomeStatementReportBodyAll = ({ reportId }: IIncomeStatementReportBodyAl
 
       <section className="text-text-neutral-secondary">
         <div className="relative z-1 mb-16px flex justify-between font-semibold text-surface-brand-secondary">
-          <p className="text-xs font-bold leading-5">一、項目彙總格式</p>
+          <div className="flex items-center">
+            <p className="text-xs font-bold leading-5">一、項目彙總格式</p>
+            <CollapseButton onClick={toggleSummaryTable} isCollapsed={isSummaryCollapsed} />
+          </div>
           <p className="text-xs font-bold leading-5">單位：新台幣元 每股盈餘單位：新台幣元</p>
         </div>
-        <table className="relative z-1 w-full border-collapse bg-white">
-          <thead>
-            <tr>
-              <th className="whitespace-nowrap border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-xs font-semibold">
-                代號
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-xs font-semibold">
-                會計項目
-              </th>
-              <th className="whitespace-nowrap border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-xs font-semibold">
-                {reportFinancial && reportFinancial.company && (
-                  <p className="text-left font-barlow text-xs font-semibold leading-5">
-                    {formattedCurFromDate}至{formattedCurToDate}
-                  </p>
-                )}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-xs font-semibold">
-                %
-              </th>
-              <th
-                className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-xs font-semibold"
-                style={{ whiteSpace: 'nowrap' }}
-              >
-                {reportFinancial && reportFinancial.company && (
-                  <p className="text-left font-barlow text-xs font-semibold leading-5">
-                    {formattedPreFromDate}至{formattedPreToDate}
-                  </p>
-                )}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-xs font-semibold">
-                %
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {reportFinancial &&
-              reportFinancial.general &&
-              reportFinancial.general.slice(0, 10).map((value) => (
-                <tr key={value.code} className="h-40px">
-                  <td className="border border-stroke-brand-secondary-soft p-10px text-xs">
-                    {value.code}
-                  </td>
-                  <td
-                    className="border border-stroke-brand-secondary-soft p-10px text-xs"
-                    style={{ width: '200px' }}
-                  >
-                    {value.name}
-                  </td>
-                  <td className="border border-stroke-brand-secondary-soft p-10px text-end text-xs">
-                    {value.curPeriodAmount}
-                  </td>
-                  <td className="border border-stroke-brand-secondary-soft p-10px text-center text-xs">
-                    {value.curPeriodPercentage}
-                  </td>
-                  <td className="border border-stroke-brand-secondary-soft p-10px text-end text-xs">
-                    {value.prePeriodAmount}
-                  </td>
-                  <td className="border border-stroke-brand-secondary-soft p-10px text-center text-xs">
-                    {value.prePeriodPercentage}
-                  </td>
-                </tr>
-              ))}
-          </tbody>
-        </table>
+        {!isSummaryCollapsed && (
+          <table className="relative z-1 w-full border-collapse bg-white">
+            <thead>
+              <tr>
+                <th className="whitespace-nowrap border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-xs font-semibold">
+                  代號
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-xs font-semibold">
+                  會計項目
+                </th>
+                <th className="whitespace-nowrap border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-xs font-semibold">
+                  {!isSummaryCollapsed && reportFinancial && reportFinancial.company && (
+                    <p className="text-left font-barlow text-xs font-semibold leading-5">
+                      {formattedCurFromDate}至{formattedCurToDate}
+                    </p>
+                  )}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-xs font-semibold">
+                  %
+                </th>
+                <th
+                  className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-xs font-semibold"
+                  style={{ whiteSpace: 'nowrap' }}
+                >
+                  {reportFinancial && reportFinancial.company && (
+                    <p className="text-left font-barlow text-xs font-semibold leading-5">
+                      {formattedPreFromDate}至{formattedPreToDate}
+                    </p>
+                  )}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-xs font-semibold">
+                  %
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {reportFinancial &&
+                reportFinancial.general &&
+                reportFinancial.general.slice(0, 10).map((value) => (
+                  <tr key={value.code} className="h-40px">
+                    <td className="border border-stroke-brand-secondary-soft p-10px text-xs">
+                      {value.code}
+                    </td>
+                    <td
+                      className="border border-stroke-brand-secondary-soft p-10px text-xs"
+                      style={{ width: '200px' }}
+                    >
+                      {value.name}
+                    </td>
+                    <td className="border border-stroke-brand-secondary-soft p-10px text-end text-xs">
+                      {value.curPeriodAmount}
+                    </td>
+                    <td className="border border-stroke-brand-secondary-soft p-10px text-center text-xs">
+                      {value.curPeriodPercentage}
+                    </td>
+                    <td className="border border-stroke-brand-secondary-soft p-10px text-end text-xs">
+                      {value.prePeriodAmount}
+                    </td>
+                    <td className="border border-stroke-brand-secondary-soft p-10px text-center text-xs">
+                      {value.prePeriodPercentage}
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        )}
       </section>
       {renderedFooter(1)}
     </div>
@@ -451,73 +468,78 @@ const IncomeStatementReportBodyAll = ({ reportId }: IIncomeStatementReportBodyAl
       </header>
       <section className="text-text-neutral-secondary">
         <div className="mb-16px mt-32px flex justify-between font-semibold text-surface-brand-secondary">
-          <p className="text-xs font-bold leading-5">二、細項分類格式</p>
+          <div className="flex items-center">
+            <p className="text-xs font-bold leading-5">二、細項分類格式</p>
+            <CollapseButton onClick={toggleDetailTable} isCollapsed={isDetailCollapsed} />
+          </div>
           <p className="text-xs font-bold leading-5">單位：新台幣元 每股盈餘單位：新台幣元</p>
         </div>
-        <table className="w-full border-collapse bg-white">
-          <thead>
-            <tr>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-xs font-semibold">
-                代號
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-xs font-semibold">
-                會計項目
-              </th>
-              <th
-                className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-xs font-semibold"
-                style={{ whiteSpace: 'nowrap' }}
-              >
-                {reportFinancial && reportFinancial.company && (
-                  <p className="text-left font-barlow text-xs font-semibold leading-5">
-                    {formattedCurFromDate}至{formattedCurToDate}
-                  </p>
-                )}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-xs font-semibold">
-                %
-              </th>
-              <th
-                className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-xs font-semibold"
-                style={{ whiteSpace: 'nowrap' }}
-              >
-                {reportFinancial && reportFinancial.company && (
-                  <p className="text-left font-barlow text-xs font-semibold leading-5">
-                    {formattedPreFromDate}至{formattedPreToDate}
-                  </p>
-                )}
-              </th>
-              <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-xs font-semibold">
-                %
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {reportFinancial &&
-              reportFinancial.details &&
-              reportFinancial.details.slice(0, 15).map((value) => (
-                <tr key={value.code} className="h-40px">
-                  <td className="border border-stroke-brand-secondary-soft p-10px text-xs">
-                    {value.code}
-                  </td>
-                  <td className="w-177px border border-stroke-brand-secondary-soft p-10px text-xs">
-                    {value.name}
-                  </td>
-                  <td className="border border-stroke-brand-secondary-soft p-10px text-end text-xs">
-                    {value.curPeriodAmount}
-                  </td>
-                  <td className="border border-stroke-brand-secondary-soft p-10px text-center text-xs">
-                    {value.curPeriodPercentage}
-                  </td>
-                  <td className="border border-stroke-brand-secondary-soft p-10px text-end text-xs">
-                    {value.prePeriodAmount}
-                  </td>
-                  <td className="border border-stroke-brand-secondary-soft p-10px text-center text-xs">
-                    {value.prePeriodPercentage}
-                  </td>
-                </tr>
-              ))}
-          </tbody>
-        </table>
+        {!isDetailCollapsed && (
+          <table className="w-full border-collapse bg-white">
+            <thead>
+              <tr>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-xs font-semibold">
+                  代號
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-left text-xs font-semibold">
+                  會計項目
+                </th>
+                <th
+                  className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-xs font-semibold"
+                  style={{ whiteSpace: 'nowrap' }}
+                >
+                  {!isDetailCollapsed && reportFinancial && reportFinancial.company && (
+                    <p className="text-left font-barlow text-xs font-semibold leading-5">
+                      {formattedCurFromDate}至{formattedCurToDate}
+                    </p>
+                  )}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-xs font-semibold">
+                  %
+                </th>
+                <th
+                  className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-end text-xs font-semibold"
+                  style={{ whiteSpace: 'nowrap' }}
+                >
+                  {reportFinancial && reportFinancial.company && (
+                    <p className="text-left font-barlow text-xs font-semibold leading-5">
+                      {formattedPreFromDate}至{formattedPreToDate}
+                    </p>
+                  )}
+                </th>
+                <th className="border border-stroke-brand-secondary-soft bg-surface-brand-primary-soft p-10px text-center text-xs font-semibold">
+                  %
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {reportFinancial &&
+                reportFinancial.details &&
+                reportFinancial.details.slice(0, 15).map((value) => (
+                  <tr key={value.code} className="h-40px">
+                    <td className="border border-stroke-brand-secondary-soft p-10px text-xs">
+                      {value.code}
+                    </td>
+                    <td className="w-177px border border-stroke-brand-secondary-soft p-10px text-xs">
+                      {value.name}
+                    </td>
+                    <td className="border border-stroke-brand-secondary-soft p-10px text-end text-xs">
+                      {value.curPeriodAmount}
+                    </td>
+                    <td className="border border-stroke-brand-secondary-soft p-10px text-center text-xs">
+                      {value.curPeriodPercentage}
+                    </td>
+                    <td className="border border-stroke-brand-secondary-soft p-10px text-end text-xs">
+                      {value.prePeriodAmount}
+                    </td>
+                    <td className="border border-stroke-brand-secondary-soft p-10px text-center text-xs">
+                      {value.prePeriodPercentage}
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        )}
       </section>
       {renderedFooter(4)}
     </div>
diff --git a/src/locales/cn/setting.json b/src/locales/cn/setting.json
index 9d830ac3..d2ab61ba 100644
--- a/src/locales/cn/setting.json
+++ b/src/locales/cn/setting.json
@@ -40,6 +40,9 @@
     "SUCCESSFULLY_UPDATED_ACCOUNT": "会计科目更新成功",
     "FAILED_TO_UPDATE_ACCOUNT": "更新科目失败，请稍后重试。",
     "FAILED_TO_GET_ACCOUNT_DATA": "取得科目资料失败，请稍后重试。",
-    "FAIL_UPDATE_COMPANY_NAME": "无法更新公司名称。错误代码：{{updateTeamCode}}"
+    "FAIL_UPDATE_COMPANY_NAME": "无法更新公司名称。错误代码：{{updateTeamCode}}",
+    "ASSET": "资产",
+    "OTHERCOMPREHENSIVEINCOME": "其他综合損益",
+    "COST": "成本"
   }
 }
diff --git a/src/locales/en/setting.json b/src/locales/en/setting.json
index cbdfdd6f..0b129b97 100644
--- a/src/locales/en/setting.json
+++ b/src/locales/en/setting.json
@@ -8,6 +8,7 @@
     "ADMINISTRATOR": "Administrator",
     "SUBSCRIPTION_BILLS": "Subscription&Bills",
     "ACCOUNTING_TITLE_MANAGEMENT": "Accounting Title Management",
+    "ASSETS": "資產",
     "LIABILITY": "Liability",
     "EQUITY": "Equity",
     "ALL": "All",
@@ -40,6 +41,8 @@
     "SUCCESSFULLY_UPDATED_ACCOUNT": "Successfully updated account: ",
     "FAILED_TO_UPDATE_ACCOUNT": "Failed to update account, please try again later.",
     "FAILED_TO_GET_ACCOUNT_DATA": "Failed to get account data, please try again later.",
-    "FAIL_UPDATE_COMPANY_NAME": "Fail to update company name. Code:{{updateTeamCode}}"
+    "FAIL_UPDATE_COMPANY_NAME": "Fail to update company name. Code:{{updateTeamCode}}",
+    "OTHERCOMPREHENSIVEINCOME": "Other Comprehensive Income",
+    "COST": "Cost"
   }
 }
diff --git a/src/locales/tw/setting.json b/src/locales/tw/setting.json
index 4e76fe63..5ba83b49 100644
--- a/src/locales/tw/setting.json
+++ b/src/locales/tw/setting.json
@@ -40,6 +40,9 @@
     "SUCCESSFULLY_UPDATED_ACCOUNT": "會計科目更新成功：",
     "FAILED_TO_UPDATE_ACCOUNT": "更新科目失敗，請稍後重試。",
     "FAILED_TO_GET_ACCOUNT_DATA": "取得科目資料失敗，請稍後重試。",
-    "FAIL_UPDATE_COMPANY_NAME": "無法更新公司名稱。錯誤代碼：{{updateTeamCode}}"
+    "FAIL_UPDATE_COMPANY_NAME": "無法更新公司名稱。錯誤代碼：{{updateTeamCode}}",
+    "ASSET": "資產",
+    "OTHERCOMPREHENSIVEINCOME": "其他综合損益",
+    "COST": "成本"
   }
 }