diff --git a/packages/server/src/models/ExpenseCategory.ts b/packages/server/src/models/ExpenseCategory.ts
index 50416805e8..21d61f7e8d 100644
--- a/packages/server/src/models/ExpenseCategory.ts
+++ b/packages/server/src/models/ExpenseCategory.ts
@@ -2,6 +2,8 @@ import { Model } from 'objection';
 import TenantModel from 'models/TenantModel';
 
 export default class ExpenseCategory extends TenantModel {
+  amount: number;
+  
   /**
    * Table name
    */
diff --git a/packages/server/src/services/Expenses/CRUD/ExpenseCategoryTransformer.ts b/packages/server/src/services/Expenses/CRUD/ExpenseCategoryTransformer.ts
new file mode 100644
index 0000000000..3f8383c03e
--- /dev/null
+++ b/packages/server/src/services/Expenses/CRUD/ExpenseCategoryTransformer.ts
@@ -0,0 +1,25 @@
+import { Transformer } from '@/lib/Transformer/Transformer';
+import { ExpenseCategory } from '@/models';
+import { formatNumber } from '@/utils';
+
+export class ExpenseCategoryTransformer extends Transformer {
+  /**
+   * Include these attributes to expense object.
+   * @returns {Array}
+   */
+  public includeAttributes = (): string[] => {
+    return ['amountFormatted'];
+  };
+
+  /**
+   * Retrieves the formatted amount.
+   * @param {ExpenseCategory} category
+   * @returns {string}
+   */
+  protected amountFormatted(category: ExpenseCategory) {
+    return formatNumber(category.amount, {
+      currencyCode: this.context.currencyCode,
+      money: false,
+    });
+  }
+}
diff --git a/packages/server/src/services/Expenses/CRUD/ExpenseTransformer.ts b/packages/server/src/services/Expenses/CRUD/ExpenseTransformer.ts
index 2812a92614..89f461934a 100644
--- a/packages/server/src/services/Expenses/CRUD/ExpenseTransformer.ts
+++ b/packages/server/src/services/Expenses/CRUD/ExpenseTransformer.ts
@@ -1,6 +1,7 @@
 import { Transformer } from '@/lib/Transformer/Transformer';
 import { formatNumber } from 'utils';
 import { IExpense } from '@/interfaces';
+import { ExpenseCategoryTransformer } from './ExpenseCategoryTransformer';
 
 export class ExpenseTransfromer extends Transformer {
   /**
@@ -12,7 +13,8 @@ export class ExpenseTransfromer extends Transformer {
       'formattedAmount',
       'formattedLandedCostAmount',
       'formattedAllocatedCostAmount',
-      'formattedDate'
+      'formattedDate',
+      'categories',
     ];
   };
 
@@ -56,5 +58,16 @@ export class ExpenseTransfromer extends Transformer {
    */
   protected formattedDate = (expense: IExpense): string => {
     return this.formatDate(expense.paymentDate);
-  }
+  };
+
+  /**
+   * Retrieves the transformed expense categories.
+   * @param {IExpense} expense
+   * @returns {}
+   */
+  protected categories = (expense: IExpense) => {
+    return this.item(expense.categories, new ExpenseCategoryTransformer(), {
+      currencyCode: expense.currencyCode,
+    });
+  };
 }
diff --git a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx
index c1acea3f2a..48b3b2514f 100644
--- a/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx
+++ b/packages/webapp/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.tsx
@@ -9,7 +9,7 @@ import {
   TotalLineTextStyle,
 } from '@/components';
 import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
-import { FormatNumber, TotalLine } from '@/components';
+import { TotalLine } from '@/components';
 
 /**
  * Footer details of expense readonly details.
@@ -22,12 +22,12 @@ export default function ExpenseDrawerFooter() {
       <ExpenseTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
         <TotalLine
           title={<T id={'expense.details.subtotal'} />}
-          value={<FormatNumber value={expense.total_amount} />}
+          value={expense.formatted_amount}
           borderStyle={TotalLineBorderStyle.SingleDark}
         />
         <TotalLine
           title={<T id={'expense.details.total'} />}
-          value={<FormatNumber value={expense.formatted_amount} />}
+          value={expense.formatted_amount}
           borderStyle={TotalLineBorderStyle.DoubleDark}
           textStyle={TotalLineTextStyle.Bold}
         />
diff --git a/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx b/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx
index 276923cceb..377f6f9a44 100644
--- a/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx
+++ b/packages/webapp/src/containers/Drawers/ExpenseDrawer/utils.tsx
@@ -36,8 +36,7 @@ export const useExpenseReadEntriesColumns = () => {
       },
       {
         Header: intl.get('amount'),
-        accessor: 'amount',
-        Cell: FormatNumberCell,
+        accessor: 'amount_formatted',
         width: getColumnWidth(categories, 'amount', {
           minWidth: 60,
           magicSpacing: 5,