diff --git a/src/components/popup/home/Transactions.tsx b/src/components/popup/home/Transactions.tsx
index 83950e85..e4ea44b1 100644
--- a/src/components/popup/home/Transactions.tsx
+++ b/src/components/popup/home/Transactions.tsx
@@ -6,7 +6,6 @@ import { Loading, Text } from "@arconnect/components";
 
 import { gql } from "~gateways/api";
 import styled from "styled-components";
-import { balanceToFractioned, formatFiatBalance } from "~tokens/currency";
 import {
   AO_RECEIVER_QUERY,
   AO_SENT_QUERY,
@@ -20,6 +19,10 @@ import { suggestedGateways } from "~gateways/gateway";
 import { Spacer } from "@arconnect/components";
 import { Heading, ViewAll, TokenCount } from "../Title";
 import {
+  getFormattedAmount,
+  getFormattedFiatAmount,
+  getFullMonthName,
+  getTransactionDescription,
   processTransactions,
   sortFn,
   type ExtendedTransaction
@@ -118,49 +121,6 @@ export default function Transactions() {
     push(`/transaction/${id}?back=${encodeURIComponent("/transactions")}`);
   };
 
-  const getFormattedAmount = (transaction: ExtendedTransaction) => {
-    switch (transaction.transactionType) {
-      case "sent":
-      case "received":
-        return `${parseFloat(transaction.node.quantity.ar).toFixed(3)} AR`;
-      case "aoSent":
-      case "aoReceived":
-        if (transaction.aoInfo) {
-          return `${balanceToFractioned(transaction.aoInfo.quantity, {
-            divisibility: transaction.aoInfo.denomination
-          }).toFixed()} ${transaction.aoInfo.tickerName}`;
-        }
-        return "";
-      default:
-        return "";
-    }
-  };
-
-  const getTransactionDescription = (transaction: ExtendedTransaction) => {
-    switch (transaction.transactionType) {
-      case "sent":
-        return `${browser.i18n.getMessage("sent")} AR`;
-      case "received":
-        return `${browser.i18n.getMessage("received")} AR`;
-      case "aoSent":
-        return `${browser.i18n.getMessage("sent")} ${
-          transaction.aoInfo.tickerName
-        }`;
-      case "aoReceived":
-        return `${browser.i18n.getMessage("received")} ${
-          transaction.aoInfo.tickerName
-        }`;
-      default:
-        return "";
-    }
-  };
-
-  const getFullMonthName = (monthYear: string) => {
-    const [month, year] = monthYear.split("-").map(Number);
-    const date = new Date(year, month - 1);
-    return date.toLocaleString("default", { month: "long" });
-  };
-
   return (
     <>
       <Heading>
@@ -170,7 +130,7 @@ export default function Transactions() {
         </ViewAll>
       </Heading>
       <Spacer y={1} />
-      <TransactionsWrapper showBorder={transactions.length > 0}>
+      <TransactionsWrapper showBorder={transactions.length > 0 && !loading}>
         {!loading &&
           (transactions.length > 0 ? (
             transactions.map((transaction, index) => (
@@ -192,11 +152,7 @@ export default function Transactions() {
                   <Section alignRight>
                     <Main>{getFormattedAmount(transaction)}</Main>
                     <Secondary>
-                      {transaction.node.quantity &&
-                        formatFiatBalance(
-                          transaction.node.quantity.ar,
-                          currency
-                        )}
+                      {getFormattedFiatAmount(transaction, arPrice, currency)}
                     </Secondary>
                   </Section>
                 </Transaction>
diff --git a/src/lib/transactions.ts b/src/lib/transactions.ts
index cb2c348a..47d30e85 100644
--- a/src/lib/transactions.ts
+++ b/src/lib/transactions.ts
@@ -6,6 +6,9 @@ import { formatAddress } from "~utils/format";
 import { ExtensionStorage } from "~utils/storage";
 import { getTokenInfo } from "~tokens/aoTokens/router";
 import type { Token } from "~tokens/token";
+import BigNumber from "bignumber.js";
+import browser from "webextension-polyfill";
+import { balanceToFractioned, formatFiatBalance } from "~tokens/currency";
 
 let tokens: TokenInfo[] = null;
 export let tokenInfoMap = new Map<string, TokenInfo | Token>();
@@ -126,3 +129,62 @@ export const processTransactions = async (
     return Promise.resolve([]);
   }
 };
+
+export const getFormattedAmount = (transaction: ExtendedTransaction) => {
+  switch (transaction.transactionType) {
+    case "sent":
+    case "received":
+      return `${parseFloat(transaction.node.quantity.ar).toFixed(3)} AR`;
+    case "aoSent":
+    case "aoReceived":
+      if (transaction.aoInfo) {
+        return `${balanceToFractioned(transaction.aoInfo.quantity, {
+          divisibility: transaction.aoInfo.denomination
+        }).toFixed()} ${transaction.aoInfo.tickerName}`;
+      }
+      return "";
+    default:
+      return "";
+  }
+};
+
+export const getFormattedFiatAmount = (
+  transaction: ExtendedTransaction,
+  arPrice: number,
+  currency: string
+) => {
+  try {
+    if (transaction.node.quantity) {
+      const fiatBalance = BigNumber(transaction.node.quantity.ar).multipliedBy(
+        arPrice
+      );
+      return formatFiatBalance(fiatBalance, currency);
+    }
+  } catch {}
+  return "";
+};
+
+export const getTransactionDescription = (transaction: ExtendedTransaction) => {
+  switch (transaction.transactionType) {
+    case "sent":
+      return `${browser.i18n.getMessage("sent")} AR`;
+    case "received":
+      return `${browser.i18n.getMessage("received")} AR`;
+    case "aoSent":
+      return `${browser.i18n.getMessage("sent")} ${
+        transaction.aoInfo.tickerName
+      }`;
+    case "aoReceived":
+      return `${browser.i18n.getMessage("received")} ${
+        transaction.aoInfo.tickerName
+      }`;
+    default:
+      return "";
+  }
+};
+
+export const getFullMonthName = (monthYear: string) => {
+  const [month, year] = monthYear.split("-").map(Number);
+  const date = new Date(year, month - 1);
+  return date.toLocaleString("default", { month: "long" });
+};
diff --git a/src/routes/popup/transaction/transactions.tsx b/src/routes/popup/transaction/transactions.tsx
index 3ab4592d..b476b310 100644
--- a/src/routes/popup/transaction/transactions.tsx
+++ b/src/routes/popup/transaction/transactions.tsx
@@ -7,7 +7,6 @@ import { useStorage } from "@plasmohq/storage/hook";
 import { gql } from "~gateways/api";
 import styled from "styled-components";
 import { Empty, TitleMessage } from "../notifications";
-import { balanceToFractioned, formatFiatBalance } from "~tokens/currency";
 import {
   AO_RECEIVER_QUERY_WITH_CURSOR,
   AO_SENT_QUERY_WITH_CURSOR,
@@ -24,7 +23,11 @@ import {
   sortFn,
   processTransactions,
   type GroupedTransactions,
-  type ExtendedTransaction
+  type ExtendedTransaction,
+  getFormattedAmount,
+  getFormattedFiatAmount,
+  getFullMonthName,
+  getTransactionDescription
 } from "~lib/transactions";
 
 const defaultCursors = ["", "", "", ""];
@@ -190,49 +193,6 @@ export default function Transactions() {
     push(`/transaction/${id}?back=${encodeURIComponent("/transactions")}`);
   };
 
-  const getFormattedAmount = (transaction: ExtendedTransaction) => {
-    switch (transaction.transactionType) {
-      case "sent":
-      case "received":
-        return `${parseFloat(transaction.node.quantity.ar).toFixed(3)} AR`;
-      case "aoSent":
-      case "aoReceived":
-        if (transaction.aoInfo) {
-          return `${balanceToFractioned(transaction.aoInfo.quantity, {
-            divisibility: transaction.aoInfo.denomination
-          }).toFixed()} ${transaction.aoInfo.tickerName}`;
-        }
-        return "";
-      default:
-        return "";
-    }
-  };
-
-  const getTransactionDescription = (transaction: ExtendedTransaction) => {
-    switch (transaction.transactionType) {
-      case "sent":
-        return `${browser.i18n.getMessage("sent")} AR`;
-      case "received":
-        return `${browser.i18n.getMessage("received")} AR`;
-      case "aoSent":
-        return `${browser.i18n.getMessage("sent")} ${
-          transaction.aoInfo.tickerName
-        }`;
-      case "aoReceived":
-        return `${browser.i18n.getMessage("received")} ${
-          transaction.aoInfo.tickerName
-        }`;
-      default:
-        return "";
-    }
-  };
-
-  const getFullMonthName = (monthYear: string) => {
-    const [month, year] = monthYear.split("-").map(Number);
-    const date = new Date(year, month - 1);
-    return date.toLocaleString("default", { month: "long" });
-  };
-
   return (
     <>
       <HeadV2 title={browser.i18n.getMessage("transaction_history_title")} />
@@ -260,11 +220,11 @@ export default function Transactions() {
                       <Section alignRight>
                         <Main>{getFormattedAmount(transaction)}</Main>
                         <Secondary>
-                          {transaction.node.quantity &&
-                            formatFiatBalance(
-                              transaction.node.quantity.ar,
-                              currency
-                            )}
+                          {getFormattedFiatAmount(
+                            transaction,
+                            arPrice,
+                            currency
+                          )}
                         </Secondary>
                       </Section>
                     </Transaction>