diff --git a/frontend/app/dashboard/transactions/components/TransactionRow.tsx b/frontend/app/dashboard/transactions/components/TransactionRow.tsx
index ed0f938c..f4d51c40 100644
--- a/frontend/app/dashboard/transactions/components/TransactionRow.tsx
+++ b/frontend/app/dashboard/transactions/components/TransactionRow.tsx
@@ -6,109 +6,105 @@ import {
   ArrowUpCircle,
   Repeat,
   Sparkles,
-  FileText,
 } from 'lucide-react';
 
 export type TransactionType = 'deposit' | 'withdraw' | 'swap' | 'yield';
 export type TransactionStatus = 'completed' | 'pending';
 
 export interface TransactionRowProps {
-  date: string; // ISO date-time or human readable
+  date: string;
   time: string;
   transactionId: string;
   type: TransactionType;
   assetDetails: string;
-  amount: number;
-  currency: string;
+  amountDisplay: string;
+  isPositive: boolean | null;
   status: TransactionStatus;
   onClick?(id: string): void;
 }
 
-const typeMeta: Record<TransactionType, { icon: React.ReactNode; label: string; style: string }> = {
+const typeMeta: Record<TransactionType, { icon: React.ReactNode; label: string }> = {
   deposit: {
-    icon: <ArrowDownCircle size={18} className="text-emerald-400" />,
+    icon: <ArrowDownCircle size={18} className="text-[#34d399]" />,
     label: 'Deposit',
-    style: 'text-emerald-200',
   },
   withdraw: {
-    icon: <ArrowUpCircle size={18} className="text-rose-400" />,
+    icon: <ArrowUpCircle size={18} className="text-[#fb7185]" />,
     label: 'Withdraw',
-    style: 'text-rose-200',
   },
   swap: {
-    icon: <Repeat size={18} className="text-cyan-300" />,
+    icon: <Repeat size={18} className="text-[#38bdf8]" />,
     label: 'Swap',
-    style: 'text-cyan-200',
   },
   yield: {
-    icon: <Sparkles size={18} className="text-amber-300" />,
+    icon: <Sparkles size={18} className="text-[#fcd34d]" />,
     label: 'Yield',
-    style: 'text-amber-200',
   },
 };
 
-const statusMeta: Record<TransactionStatus, { label: string; style: string }> = {
+const statusMeta: Record<TransactionStatus, { label: string; style: string; defaultColor: string }> = {
   completed: {
     label: 'Completed',
-    style: 'bg-emerald-200/15 text-emerald-200 border-emerald-100/30',
+    style: 'border-[#10b981] text-[#34d399]',
+    defaultColor: '#10b981',
   },
   pending: {
     label: 'Pending',
-    style: 'bg-amber-200/15 text-amber-200 border-amber-100/30',
+    style: 'border-[#f59e0b] text-[#fbbf24]',
+    defaultColor: '#f59e0b',
   },
 };
 
-function formatAmount(amount: number): string {
-  const abs = Math.abs(amount).toLocaleString(undefined, {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  });
-  return `${amount < 0 ? '-' : '+'}$${abs}`;
-}
-
 export default function TransactionRow({
   date,
   time,
   transactionId,
   type,
   assetDetails,
-  amount,
-  currency,
+  amountDisplay,
+  isPositive,
   status,
   onClick,
 }: TransactionRowProps) {
   const typeInfo = typeMeta[type];
   const statusInfo = statusMeta[status];
-  const amountStyle = amount >= 0 ? 'text-emerald-300' : 'text-rose-300';
+  
+  let amountStyle = 'text-white';
+  if (isPositive === true) amountStyle = 'text-[#34d399]';
+  if (isPositive === false) amountStyle = 'text-[#fb7185]';
 
   return (
     <div
-      className="grid grid-cols-12 items-center gap-3 px-5 py-4 border-b border-white/10 text-sm md:text-base hover:bg-white/5 transition-colors cursor-pointer"
+      className="grid grid-cols-12 items-center gap-3 px-5 py-4 border-b border-white/5 text-sm md:text-[15px] hover:bg-white/5 transition-colors cursor-pointer"
       onClick={() => onClick?.(transactionId)}
     >
       <div className="col-span-2">
-        <p className="text-[#b1d7da] font-medium">{date}</p>
-        <p className="text-[#6c9da3] text-xs mt-0.5">{time}</p>
+        <p className="text-[#e2f8f8] font-semibold">{date}</p>
+        <p className="text-[#5e8c96] text-xs mt-0.5 font-medium">{time}</p>
       </div>
 
-      <div className="col-span-3">
-        <p className="text-white font-semibold">{transactionId}</p>
-        <div className="inline-flex items-center gap-2 text-xs mt-1 text-[#6c9da3]">
+      <div className="col-span-2 text-[#e2f8f8]">
+        {transactionId}
+      </div>
+
+      <div className="col-span-2">
+        <div className="inline-flex items-center gap-2 text-[#e2f8f8] font-medium">
           {typeInfo.icon}
-          <span className={typeInfo.style}>{typeInfo.label}</span>
+          <span>{typeInfo.label}</span>
         </div>
       </div>
 
-      <div className="col-span-3 text-[#c9eef5]">{assetDetails}</div>
+      <div className="col-span-2 text-[#e2f8f8] font-medium">{assetDetails}</div>
 
-      <div className={`col-span-2 text-right font-semibold ${amountStyle}`}>
-        {formatAmount(amount)} <span className="text-[#6faab0] text-xs">{currency}</span>
+      <div className={`col-span-2 text-right font-bold ${amountStyle}`}>
+        {amountDisplay}
       </div>
 
-      <div className="col-span-2 text-right">
+      <div className="col-span-2 flex justify-end">
         <span
-          className={`inline-flex items-center justify-center px-3 py-1 text-xs font-semibold rounded-full border ${statusInfo.style}`}
+          className={`inline-flex items-center justify-center gap-1.5 px-2.5 py-1 text-xs font-bold rounded-full border border-current ${statusInfo.style}`}
         >
+          <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: statusInfo.defaultColor }}></span>
           {statusInfo.label}
         </span>
       </div>
diff --git a/frontend/app/dashboard/transactions/page.tsx b/frontend/app/dashboard/transactions/page.tsx
index 9372c971..5ea5070c 100644
--- a/frontend/app/dashboard/transactions/page.tsx
+++ b/frontend/app/dashboard/transactions/page.tsx
@@ -8,11 +8,10 @@ type TransactionRowData = {
   date: string;
   time: string;
   transactionId: string;
-  title: string;
   type: TransactionType;
   assetDetails: string;
-  amount: number;
-  currency: string;
+  amountDisplay: string;
+  isPositive: boolean | null;
   status: TransactionStatus;
   hash: string;
 };
@@ -24,11 +23,11 @@ function csvEscape(value: string) {
 }
 
 function toCsv(rows: TransactionRowData[]) {
-  const header = ["date", "time", "transactionId", "type", "assetDetails", "amount", "currency", "status", "hash"];
+  const header = ["date", "time", "transactionId", "type", "assetDetails", "amountDisplay", "status", "hash"];
   const lines = [
     header.join(","),
     ...rows.map((r) =>
-      [r.date, r.time, r.transactionId, r.type, r.assetDetails, r.amount.toString(), r.currency, r.status, r.hash]
+      [r.date, r.time, r.transactionId, r.type, r.assetDetails, r.amountDisplay, r.status, r.hash]
         .map(csvEscape)
         .join(","),
     ),
@@ -55,64 +54,48 @@ function downloadTextFile(
 export default function TransactionHistoryPage() {
   const transactions: TransactionRowData[] = [
     {
-      date: "2026-03-25",
-      time: "10:23",
-      transactionId: "0x9f2a...a1b3",
-      title: "Deposit USDC",
+      date: "Oct 25, 2023",
+      time: "10:23 AM",
+      transactionId: "0xabc...123",
       type: "deposit",
-      assetDetails: "USDC Wallet",
-      amount: 500.0,
-      currency: "USDC",
+      assetDetails: "USDC",
+      amountDisplay: "+$500.00",
+      isPositive: true,
       status: "completed",
-      hash: "0x9f2a...a1b3",
+      hash: "0xabc",
     },
     {
-      date: "2026-03-25",
-      time: "08:15",
-      transactionId: "0x3d10...c92e",
-      title: "Yield Earned",
-      type: "yield",
-      assetDetails: "Auto-compound reward",
-      amount: 12.45,
-      currency: "USDC",
+      date: "Oct 24, 2023",
+      time: "04:15 PM",
+      transactionId: "0xdef...456",
+      type: "withdraw",
+      assetDetails: "ETH",
+      amountDisplay: "-0.50 ETH",
+      isPositive: false,
       status: "completed",
-      hash: "0x3d10...c92e",
+      hash: "0xdef",
     },
     {
-      date: "2026-03-24",
-      time: "16:32",
-      transactionId: "0x7a4c...1ff2",
-      title: "Swap ETH → USDC",
+      date: "Oct 24, 2023",
+      time: "09:30 AM",
+      transactionId: "0xghi...789",
       type: "swap",
-      assetDetails: "0.5 ETH for 835 USDC",
-      amount: -0.5,
-      currency: "ETH",
+      assetDetails: "XLM → USDC",
+      amountDisplay: "200 USDC",
+      isPositive: null,
       status: "completed",
-      hash: "0x7a4c...1ff2",
+      hash: "0xghi",
     },
     {
-      date: "2026-03-24",
-      time: "14:18",
-      transactionId: "0x0b22...8e91",
-      title: "Withdraw USDC",
-      type: "withdraw",
-      assetDetails: "To external wallet",
-      amount: -250.0,
-      currency: "USDC",
+      date: "Oct 23, 2023",
+      time: "08:00 AM",
+      transactionId: "0xjkl...012",
+      type: "yield",
+      assetDetails: "Staking Reward",
+      amountDisplay: "+$12.45",
+      isPositive: true,
       status: "pending",
-      hash: "0x0b22...8e91",
-    },
-    {
-      date: "2026-03-25",
-      time: "12:00",
-      transactionId: "0x5f99...d2be",
-      title: "Swap USDC → DAI",
-      type: "swap",
-      assetDetails: "550 USDC to 549 DAI",
-      amount: -550.0,
-      currency: "USDC",
-      status: "completed",
-      hash: "0x5f99...d2be",
+      hash: "0xjkl",
     },
   ];
 
@@ -177,10 +160,12 @@ export default function TransactionHistoryPage() {
 
       <div className="rounded-2xl border border-white/5 bg-[#0e2330] overflow-hidden">
         <div className="grid grid-cols-12 px-5 py-3 border-b border-white/5 text-[#5e8c96] text-xs font-bold uppercase tracking-widest">
-          <div className="col-span-4">Date</div>
-          <div className="col-span-4">Description</div>
-          <div className="col-span-2">Token</div>
+          <div className="col-span-2">Date</div>
+          <div className="col-span-2">Transaction ID</div>
+          <div className="col-span-2">Type</div>
+          <div className="col-span-2">Asset / Details</div>
           <div className="col-span-2 text-right">Amount</div>
+          <div className="col-span-2 text-right">Status</div>
         </div>
 
         {transactions.map((t) => (
@@ -191,12 +176,22 @@ export default function TransactionHistoryPage() {
             transactionId={t.transactionId}
             type={t.type}
             assetDetails={t.assetDetails}
-            amount={t.amount}
-            currency={t.currency}
+            amountDisplay={t.amountDisplay}
+            isPositive={t.isPositive}
             status={t.status}
             onClick={(id) => console.log('Open transaction', id)}
           />
         ))}
+
+        {/* Empty space filler */}
+        <div className="h-[300px] border-b border-white/5"></div>
+
+        {/* Pagination Controls */}
+        <div className="px-5 py-4 flex items-center gap-4 text-sm font-semibold justify-end">
+          <button className="text-[#5e8c96] hover:text-[#e2f8f8] transition-colors">&lt; Prev</button>
+          <span className="px-4 py-1.5 bg-[rgba(6,110,110,0.2)] text-[#e2f8f8] rounded-lg">Page 1 of 12</span>
+          <button className="text-[#e2f8f8] hover:text-[#8ef4ef] transition-colors flex items-center gap-1">Next &gt;</button>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4e533640..f4e1159f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1176,6 +1176,7 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1196,6 +1197,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1322,6 +1324,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -1478,6 +1481,7 @@
       "integrity": "sha512-20MV9SUdeN6Jd84xESsKhRly+/vxI+hwvpBMA93s+9dAcjdCuCojn4IqUGS3lvVaqjVYGYHSRMCpeFtF2rQYxQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.2",
@@ -2363,6 +2367,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -2420,6 +2425,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2429,6 +2435,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },