diff --git a/components/Account/DexOrdersData.js b/components/Account/DexOrdersData.js
index 4646f3ed..3c958a6f 100644
--- a/components/Account/DexOrdersData.js
+++ b/components/Account/DexOrdersData.js
@@ -152,6 +152,130 @@ export default function DexOrdersData({ account, offerList, ledgerTimestamp, set
     )
   })
 
+  // Mobile-specific row format
+  const mobileOrderRows = sortedOfferList.map((offer, i) => {
+    const sell = offer.flags?.sell
+    
+    // Format the offer details
+    const offerDetails = (
+      <>
+        <span className="bol">{amountFormatWithIcon({ amount: sell ? offer.TakerGets : offer.TakerPays })}</span>
+        <span className="gre">{' for '}</span>
+        <span className="bol">{amountFormatWithIcon({ amount: sell ? offer.TakerPays : offer.TakerGets })}</span>
+      </>
+    )
+
+    // Format the rate details
+    const rateDetails = sell ? (
+      typeof offer.TakerGets === 'string' ? (
+        <>
+          <span>1 {nativeCurrency} = </span>
+          <span className="no-brake">
+            {niceNumber(multiply(offer.quality, 1000000), 0, null, 5)}{' '}
+            {niceCurrency(offer.TakerPays?.currency || nativeCurrency)} 
+          </span>
+        </>
+      ) : typeof offer.TakerPays === 'string' ? (
+        <>
+          <span>1 {niceCurrency(offer.TakerGets?.currency)} = </span>
+          <span className="no-brake">
+            {niceNumber(divide(offer.quality, 1000000), 0, null, 5)}{' '}
+            {nativeCurrency}
+          </span>
+        </>
+      ) : (
+        <>
+          <span>1 {niceCurrency(offer.TakerGets?.currency)} = </span>
+          <span className="no-brake">
+            {niceNumber(offer.quality, 0, null, 5)}{' '}
+            {niceCurrency(offer.TakerPays?.currency)}
+          </span>
+        </>
+      )
+    ) : (
+      typeof offer.TakerGets === 'string' ? (
+        <>
+          <span>1 {niceCurrency(offer.TakerPays?.currency)} ={' '}</span>
+          <span className="tooltip">
+            <span className="no-brake">{niceNumber(divide(1, offer.quality * 1000000), 0, null, 2)} {nativeCurrency}</span>
+            <span className="tooltiptext no-brake">
+              {fullNiceNumber(divide(1, offer.quality * 1000000))} {nativeCurrency}
+            </span>
+          </span>
+        </>
+      ) : typeof offer.TakerPays === 'string' ? (
+        <>
+          <span>1 {nativeCurrency} ={' '}</span>
+          <span className="tooltip">
+            <span className="no-brake">{niceNumber(divide(1000000, offer.quality), 0, null, 2)} {niceCurrency(offer.TakerGets?.currency)}</span>
+            <span className="tooltiptext no-brake">
+              {fullNiceNumber(divide(1000000, offer.quality))}
+              {niceCurrency(offer.TakerGets?.currency)}
+            </span>
+          </span>
+        </>
+      ) : (
+        <>
+          <span>1 {niceCurrency(offer.TakerPays?.currency)} ={' '}</span>
+          <span className="tooltip">
+            <span className="no-brake">{niceNumber(divide(1, offer.quality), 0, null, 2)} {niceCurrency(offer.TakerGets?.currency)}</span>
+            <span className="tooltiptext no-brake">
+              {fullNiceNumber(divide(1, offer.quality))}
+              {niceCurrency(offer.TakerGets?.currency)}
+            </span>
+          </span>
+        </>
+      )
+    )
+
+    return (
+      <tr key={i} className="mobile-dex-row">
+        <td colSpan="4">
+          <div className="mobile-dex-line1">
+            <span className="mobile-dex-sequence">#{offer.Sequence}</span>
+            <span className={`mobile-dex-type ${sell ? 'red' : 'green'}`}>
+              {sell ? 'Selling' : 'Buying'}
+            </span>
+            <span className="mobile-dex-action">
+              {offer.Account === account?.address ? (
+                <a
+                  href="#"
+                  onClick={() =>
+                    setSignRequest({
+                      request: {
+                        TransactionType: 'OfferCancel',
+                        OfferSequence: offer.Sequence
+                      }
+                    })
+                  }
+                  className="red tooltip"
+                >
+                  <MdMoneyOff style={{ fontSize: 18, marginBottom: -4 }} />
+                  <span className="tooltiptext">Cancel</span>
+                </a>
+              ) : (
+                <span className="grey tooltip">
+                  <MdMoneyOff style={{ fontSize: 18, marginBottom: -4 }} />
+                  <span className="tooltiptext">Cancel</span>
+                </span>
+              )}
+            </span>
+          </div>
+
+          <div className="mobile-dex-line2">
+            <span className="mobile-dex-label">Offer: </span>
+            {offerDetails}
+          </div>
+
+          <div className="mobile-dex-line3">
+            <span className="mobile-dex-label">Rate: </span>
+            {rateDetails}
+          </div>
+        </td>
+      </tr>
+    )
+  })
+
   return (
     <>
       <table className="table-details hide-on-small-w800">
@@ -222,13 +346,7 @@ export default function DexOrdersData({ account, offerList, ledgerTimestamp, set
         <br />
         <table className="table-mobile wide">
           <tbody>
-            <tr>
-              <th>#</th>
-              <th className="left">Offer</th>
-              <th className="right">Rate</th>
-              <th className="center">Action</th>
-            </tr>
-            {orderRows}
+            {mobileOrderRows}
           </tbody>
         </table>
         <br />
diff --git a/styles/pages/account.scss b/styles/pages/account.scss
index 7e9bfe77..f25551ea 100644
--- a/styles/pages/account.scss
+++ b/styles/pages/account.scss
@@ -89,5 +89,59 @@
       width: 100%;
       padding: 0;
     }
+    
+    // Mobile DEX orders styling
+    .mobile-dex-row {
+      td {
+        padding: 12px 8px;
+        vertical-align: top;
+      }
+    }
+    
+    .mobile-dex-line1 {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    
+    .mobile-dex-sequence {
+      font-weight: bold;
+      color: var(--text-secondary);
+      font-size: 12px;
+    }
+    
+    .mobile-dex-type {
+      font-weight: bold;
+      font-size: 16px;
+      flex: 1;
+      text-align: center;
+      margin: 0 8px;
+    }
+    
+    .mobile-dex-action {
+      display: flex;
+      align-items: center;
+    }
+    
+    .mobile-dex-line2 {
+      margin-bottom: 6px;
+      font-size: 14px;
+      line-height: 1.4;
+    }
+    
+    .mobile-dex-line3 {
+      font-size: 13px;
+      color: var(--text-secondary);
+      line-height: 1.3;
+    }
+    
+    .mobile-dex-label {
+      font-weight: bold;
+      color: var(--text-primary);
+      margin-right: 4px;
+    }
   }
 }