diff --git a/basicswap/static/js/offerstable.js b/basicswap/static/js/offerstable.js
index 1b0c262..7f351fa 100644
--- a/basicswap/static/js/offerstable.js
+++ b/basicswap/static/js/offerstable.js
@@ -800,10 +800,12 @@ function createTableRow(offer, isSentOffers) {
   row.className = `opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600`;
   row.setAttribute('data-offer-id', uniqueId);
 
-  const coinFromSymbol = coinNameToSymbol[offer.coin_from] || offer.coin_from.toLowerCase();
-  const coinToSymbol = coinNameToSymbol[offer.coin_to] || offer.coin_to.toLowerCase();
-  const coinFromDisplay = getDisplayName(offer.coin_from);
-  const coinToDisplay = getDisplayName(offer.coin_to);
+  const coinFrom = offer.coin_from;
+  const coinTo = offer.coin_to;
+  const coinFromSymbol = coinNameToSymbol[coinFrom] || coinFrom.toLowerCase();
+  const coinToSymbol = coinNameToSymbol[coinTo] || coinTo.toLowerCase();
+  const coinFromDisplay = getDisplayName(coinFrom);
+  const coinToDisplay = getDisplayName(coinTo);
 
   const postedTime = formatTimeAgo(offer.created_at);
   const expiresIn = formatTimeLeft(offer.expire_at);
@@ -821,18 +823,18 @@ function createTableRow(offer, isSentOffers) {
   row.innerHTML = `
     ${createTimeColumn(offer, postedTime, expiresIn)}
     ${createDetailsColumn(offer)}
-    ${createTakerAmountColumn(offer, coinToDisplay, coinFromDisplay, coinFromSymbol)}
-    ${createSwapColumn(offer, coinToDisplay, coinFromDisplay, coinToSymbol, coinFromSymbol)}
-    ${createOrderbookColumn(offer, coinFromDisplay, coinToDisplay)}
-    ${createRateColumn(offer, coinFromDisplay, coinToDisplay)}
+    ${createTakerAmountColumn(offer, coinTo, coinFrom)}
+    ${createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol)}
+    ${createOrderbookColumn(offer, coinFrom, coinTo)}
+    ${createRateColumn(offer, coinFrom, coinTo)}
     ${createPercentageColumn(offer)}
     ${createActionColumn(offer, buttonClass, buttonText)}
-    ${createTooltips(offer, isOwnOffer, coinFromDisplay, coinToDisplay, fromAmount, toAmount, postedTime, expiresIn, isActuallyExpired)}
+    ${createTooltips(offer, isOwnOffer, coinFrom, coinTo, fromAmount, toAmount, postedTime, expiresIn, isActuallyExpired)}
   `;
 
   updateTooltipTargets(row, uniqueId);
 
-  updateProfitLoss(row, coinFromDisplay, coinToDisplay, fromAmount, toAmount, isOwnOffer);
+  updateProfitLoss(row, coinFrom, coinTo, fromAmount, toAmount, isOwnOffer);
 
   return row;
 }
@@ -1142,29 +1144,12 @@ function createDetailsColumn(offer) {
   `;
 }
 
-function createTakerAmountColumn(offer, coinTo, coinFrom) {
-  const toAmount = parseFloat(offer.amount_to);
-  const fromSymbol = getCoinSymbol(coinFrom);
-  return `
-    <td class="py-0">
-      <div class="py-3 px-4 text-left">
-        <a data-tooltip-target="tooltip-wallet${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(fromSymbol)}" class="items-center monospace">
-          <div class="pr-2">        
-            <div class="text-sm font-semibold">${toAmount.toFixed(4)}</div>          
-            <div class="text-sm text-gray-500 dark:text-gray-400">${coinFrom}</div>
-          </div>
-        </a>
-      </div>
-    </td>
-  `;
-}
-
-function createSwapColumn(offer, coinToDisplay, coinFromDisplay, coinToSymbol, coinFromSymbol) {
+function createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol) {
   const getImageFilename = (symbol, displayName) => {
     if (displayName.toLowerCase() === 'zcoin' || displayName.toLowerCase() === 'firo') {
-      return 'firo.png';
+      return 'Firo.png';
     }
-    return `${symbol.toLowerCase()}.png`;
+    return `${displayName.replace(' ', '-')}.png`;
   };
 
   return `
@@ -1186,15 +1171,32 @@ function createSwapColumn(offer, coinToDisplay, coinFromDisplay, coinToSymbol, c
   `;
 }
 
-function createOrderbookColumn(offer, coinFrom, coinTo) {
+function createTakerAmountColumn(offer, coinTo, coinFrom) {
   const fromAmount = parseFloat(offer.amount_from);
   const toSymbol = getCoinSymbol(coinTo);
+  return `
+    <td class="py-0">
+      <div class="py-3 px-4 text-left">
+        <a data-tooltip-target="tooltip-wallet${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(toSymbol)}" class="items-center monospace">
+          <div class="pr-2">        
+            <div class="text-sm font-semibold">${fromAmount.toFixed(4)}</div>          
+            <div class="text-sm text-gray-500 dark:text-gray-400">${coinFrom}</div>
+          </div>
+        </a>
+      </div>
+    </td>
+  `;
+}
+
+function createOrderbookColumn(offer, coinFrom, coinTo) {
+  const toAmount = parseFloat(offer.amount_to);
+  const fromSymbol = getCoinSymbol(coinFrom);
   return `
     <td class="p-0">
       <div class="py-3 px-4 text-right">
-        <a data-tooltip-target="tooltip-wallet-maker${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(toSymbol)}" class="items-center monospace">
+        <a data-tooltip-target="tooltip-wallet-maker${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(fromSymbol)}" class="items-center monospace">
           <div class="pr-2">        
-            <div class="text-sm font-semibold">${fromAmount.toFixed(4)}</div>           
+            <div class="text-sm font-semibold">${toAmount.toFixed(4)}</div>           
             <div class="text-sm text-gray-500 dark:text-gray-400">${coinTo}</div>
           </div>
         </a>