diff --git a/packages/wallet/frontend/src/pages/transactions.tsx b/packages/wallet/frontend/src/pages/transactions.tsx
index 9f88d427e..7d9c0eeb1 100644
--- a/packages/wallet/frontend/src/pages/transactions.tsx
+++ b/packages/wallet/frontend/src/pages/transactions.tsx
@@ -13,7 +13,11 @@ import {
 } from '@/lib/hooks/useTransactions'
 import { Table } from '@/ui/Table'
 import { Badge, getStatusBadgeIntent } from '@/ui/Badge'
-import { formatAmount, formatDate } from '@/utils/helpers'
+import {
+  formatAmount,
+  formatDateNoTime,
+  formatDateOnlyTime
+} from '@/utils/helpers'
 import { useRedirect } from '@/lib/hooks/useRedirect'
 import { Button } from '@/ui/Button'
 import { cx } from 'class-variance-authority'
@@ -26,6 +30,7 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from '@/ui/Tooltip'
+import { Card } from '@/components/icons/CardButtons'
 
 type WalletAddressSelectOption = SelectOption & {
   accountId: string
@@ -124,6 +129,8 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
     </>
   )
 
+  let groupByDate = ''
+
   return (
     <div className="flex flex-col items-start justify-start space-y-5 lg:max-w-xl xl:max-w-5xl">
       <PageHeader title="Transactions" />
@@ -258,12 +265,11 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
         <Table id="transactionsList" className="min-w-[57rem]">
           <Table.Head
             columns={[
-              'Account',
-              'Payment pointer name',
-              'Description',
+              'Date',
+              'Details',
               'Amount',
               'Status',
-              'Date'
+              'Payment Pointer name'
             ]}
             sort={[
               {
@@ -281,66 +287,124 @@ const TransactionsPage: NextPageWithLayout<TransactionsPageProps> = ({
           />
           <Table.Body>
             {transactions.results.length ? (
-              transactions.results.map((trx) => (
-                <Table.Row key={trx.id}>
-                  <Table.Cell>{trx.accountName}</Table.Cell>
-                  <Table.Cell className="whitespace-nowrap">
-                    {trx.walletAddressUrl && trx.walletAddressPublicName ? (
-                      <TooltipProvider delayDuration={100}>
-                        <Tooltip>
-                          <TooltipTrigger>
-                            {trx.walletAddressPublicName}
-                          </TooltipTrigger>
-                          <TooltipContent
-                            className="max-w-80"
-                            side="top"
-                            onPointerDownOutside={(e) => e.preventDefault()}
-                          >
-                            {trx.walletAddressUrl}
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    ) : (
-                      <>{trx.walletAddressUrl ?? ''}</>
-                    )}
-                  </Table.Cell>
-                  <Table.Cell className="whitespace-nowrap">
-                    {trx.description ? (
-                      trx.description
-                    ) : (
-                      <p className="text-sm font-thin">No description</p>
-                    )}
-                  </Table.Cell>
-                  <Table.Cell
-                    className={cx(
-                      'whitespace-nowrap',
-                      trx.type === 'INCOMING' &&
-                        'text-green-dark dark:text-green-neon',
-                      trx.type === 'OUTGOING' &&
-                        'text-pink-dark dark:text-yellow-neon'
-                    )}
-                  >
-                    {trx.type === 'INCOMING' ? '+' : '-'}
-                    {
-                      formatAmount({
-                        value: String(trx.value) || '0',
-                        assetCode: trx.assetCode,
-                        assetScale: trx.assetScale
-                      }).amount
-                    }
-                  </Table.Cell>
-                  <Table.Cell>
-                    <Badge
-                      intent={getStatusBadgeIntent(trx.status)}
-                      size="md"
-                      text={trx.status}
-                    />
-                  </Table.Cell>
-                  <Table.Cell className="whitespace-nowrap">
-                    {formatDate({ date: trx.createdAt.toString() })}
-                  </Table.Cell>
-                </Table.Row>
-              ))
+              transactions.results.map((trx) => {
+                let showDateHeader = false
+                if (
+                  groupByDate !==
+                  formatDateNoTime({ date: trx.createdAt.toString() })
+                ) {
+                  groupByDate = formatDateNoTime({
+                    date: trx.createdAt.toString()
+                  })
+                  showDateHeader = true
+                }
+
+                return (
+                  <>
+                    {showDateHeader ? (
+                      <Table.Row>
+                        <Table.Cell className="bg-green-dark dark:bg-pink-dark text-white text-center text-sm rounded-xl !p-1">
+                          {groupByDate}
+                        </Table.Cell>
+                        <Table.Cell className="!p-1">&nbsp;</Table.Cell>
+                        <Table.Cell className="!p-1">&nbsp;</Table.Cell>
+                        <Table.Cell className="!p-1">&nbsp;</Table.Cell>
+                        <Table.Cell className="!p-1">&nbsp;</Table.Cell>
+                      </Table.Row>
+                    ) : null}
+                    <Table.Row key={trx.id}>
+                      <Table.Cell className="whitespace-nowrap">
+                        at{' '}
+                        {formatDateOnlyTime({ date: trx.createdAt.toString() })}
+                      </Table.Cell>
+
+                      <Table.Cell className="whitespace-nowrap">
+                        <div className="flex flex-row items-center">
+                          {trx.isCard ? (
+                            <div className="text-dark-green dark:text-white pr-2">
+                              <Card />
+                            </div>
+                          ) : null}
+                          <div className="flex flex-col justify-start">
+                            {trx.secondParty ? (
+                              <span>{trx.secondParty}</span>
+                            ) : null}
+                            <span
+                              className={cx(trx.secondParty ? 'text-xs' : '')}
+                            >
+                              {trx.description ? (
+                                trx.description
+                              ) : (
+                                <p
+                                  className={cx(
+                                    'font-thin',
+                                    trx.secondParty ? 'text-xs' : 'text-sm'
+                                  )}
+                                >
+                                  No description
+                                </p>
+                              )}
+                            </span>
+                          </div>
+                        </div>
+                      </Table.Cell>
+                      <Table.Cell
+                        className={cx(
+                          'whitespace-nowrap',
+                          trx.type === 'INCOMING' &&
+                            'text-green-dark dark:text-green-neon',
+                          trx.type === 'OUTGOING' &&
+                            'text-pink-dark dark:text-yellow-neon'
+                        )}
+                      >
+                        {trx.type === 'INCOMING' ? '+' : '-'}
+                        {
+                          formatAmount({
+                            value: String(trx.value) || '0',
+                            assetCode: trx.assetCode,
+                            assetScale: trx.assetScale
+                          }).amount
+                        }
+                      </Table.Cell>
+                      <Table.Cell>
+                        <Badge
+                          intent={getStatusBadgeIntent(trx.status)}
+                          size="md"
+                          text={trx.status}
+                        />
+                      </Table.Cell>
+                      <Table.Cell className="whitespace-nowrap">
+                        <div className="flex flex-col justify-start">
+                          <span>
+                            {trx.walletAddressUrl &&
+                            trx.walletAddressPublicName ? (
+                              <TooltipProvider delayDuration={100}>
+                                <Tooltip>
+                                  <TooltipTrigger>
+                                    {trx.walletAddressPublicName}
+                                  </TooltipTrigger>
+                                  <TooltipContent
+                                    className="max-w-80"
+                                    side="top"
+                                    onPointerDownOutside={(e) =>
+                                      e.preventDefault()
+                                    }
+                                  >
+                                    {trx.walletAddressUrl}
+                                  </TooltipContent>
+                                </Tooltip>
+                              </TooltipProvider>
+                            ) : (
+                              <>{trx.walletAddressUrl ?? ''}</>
+                            )}
+                          </span>
+                          <span className="text-xs">{trx.accountName}</span>
+                        </div>
+                      </Table.Cell>
+                    </Table.Row>
+                  </>
+                )
+              })
             ) : (
               <Table.Row>
                 <Table.Cell colSpan={4} className="text-center">
diff --git a/packages/wallet/frontend/src/ui/Table.tsx b/packages/wallet/frontend/src/ui/Table.tsx
index 25cfbf4d3..ab80d771b 100644
--- a/packages/wallet/frontend/src/ui/Table.tsx
+++ b/packages/wallet/frontend/src/ui/Table.tsx
@@ -104,7 +104,7 @@ type TCellProps = ComponentProps<'td'> & {
 
 const TCell = ({ children, className, ...props }: TCellProps) => {
   return (
-    <td className={cx(className, 'p-4')} {...props}>
+    <td className={cx(className, 'p-3')} {...props}>
       {children}
     </td>
   )
diff --git a/packages/wallet/frontend/src/utils/helpers.ts b/packages/wallet/frontend/src/utils/helpers.ts
index c9afa425a..be609deaa 100644
--- a/packages/wallet/frontend/src/utils/helpers.ts
+++ b/packages/wallet/frontend/src/utils/helpers.ts
@@ -80,6 +80,26 @@ export const formatDate = ({
   })
 }
 
+export const formatDateNoTime = ({
+  date,
+  month = 'short'
+}: FormatDateArgs): string => {
+  return new Date(date).toLocaleDateString('default', {
+    day: '2-digit',
+    month,
+    year: 'numeric'
+  })
+}
+
+export const formatDateOnlyTime = ({
+  date,
+  time = true
+}: FormatDateArgs): string => {
+  return new Date(date).toLocaleTimeString('default', {
+    ...(time && { hour: '2-digit', minute: '2-digit' })
+  })
+}
+
 export const getFee = (quote: QuoteResponse): FormattedAmount => {
   if (quote.fee) {
     return formatAmount({
diff --git a/packages/wallet/shared/src/types/transaction.ts b/packages/wallet/shared/src/types/transaction.ts
index ae5b36eab..dc6edee2a 100644
--- a/packages/wallet/shared/src/types/transaction.ts
+++ b/packages/wallet/shared/src/types/transaction.ts
@@ -26,6 +26,7 @@ export interface TransactionResponse {
   secondParty?: string
   createdAt: Date
   updatedAt: Date
+  isCard?: boolean
 }
 interface TransactionListResponse extends TransactionResponse {
   assetScale: number