diff --git a/apps/ui-kit/src/lib/components/molecules/card/card.classes.ts b/apps/ui-kit/src/lib/components/molecules/card/card.classes.ts
index 4dd93547069..b1d9987f968 100644
--- a/apps/ui-kit/src/lib/components/molecules/card/card.classes.ts
+++ b/apps/ui-kit/src/lib/components/molecules/card/card.classes.ts
@@ -13,9 +13,9 @@ export const IMAGE_VARIANT_CLASSES: { [key in ImageShape]: string } = {
 };
 
 export const IMAGE_BG_CLASSES: { [key in ImageType]: string } = {
-    [ImageType.Placeholder]: ``,
-    [ImageType.BgSolid]: `bg-neutral-96`,
-    [ImageType.BgTransparent]: ``,
+    [ImageType.Placeholder]: '',
+    [ImageType.BgSolid]: 'bg-neutral-96 dark:bg-neutral-10',
+    [ImageType.BgTransparent]: '',
 };
 
 export const CARD_TYPE_CLASSES: Record<CardType, string> = {
diff --git a/apps/wallet-dashboard/app/(protected)/home/page.tsx b/apps/wallet-dashboard/app/(protected)/home/page.tsx
index 0ffe5f2eb76..61ba1487213 100644
--- a/apps/wallet-dashboard/app/(protected)/home/page.tsx
+++ b/apps/wallet-dashboard/app/(protected)/home/page.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 'use client';
 
-import { AccountBalance, MyCoins, StakingOverview } from '@/components';
+import { AccountBalance, MyCoins, TransactionsOverview, StakingOverview } from '@/components';
 import { useFeature } from '@growthbook/growthbook-react';
 import { Feature } from '@iota/core';
 import { useCurrentAccount, useCurrentWallet } from '@iota/dapp-kit';
@@ -47,7 +47,7 @@ function HomeDashboardPage(): JSX.Element {
                             Vesting
                         </div>
                         <div style={{ gridArea: 'activity' }} className="flex grow overflow-hidden">
-                            Activity
+                            <TransactionsOverview />
                         </div>
                     </div>
                 </>
diff --git a/apps/wallet-dashboard/components/Popup/Popups/TransactionDetailsPopup.tsx b/apps/wallet-dashboard/components/Popup/Popups/TransactionDetailsPopup.tsx
index 5ab2eb72942..bb622c166dd 100644
--- a/apps/wallet-dashboard/components/Popup/Popups/TransactionDetailsPopup.tsx
+++ b/apps/wallet-dashboard/components/Popup/Popups/TransactionDetailsPopup.tsx
@@ -13,7 +13,7 @@ import {
     StakeTransactionCard,
     TransactionSummary,
     UnstakeTransactionCard,
-} from '@/components/Transaction';
+} from '@/components/transactions';
 
 interface TransactionDetailsPopupProps {
     transaction: ExtendedTransaction;
diff --git a/apps/wallet-dashboard/components/TransactionIcon.tsx b/apps/wallet-dashboard/components/TransactionIcon.tsx
deleted file mode 100644
index 72e8eb65d06..00000000000
--- a/apps/wallet-dashboard/components/TransactionIcon.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { TransactionAction, TransactionState } from '@/lib/interfaces';
-import { ArrowRight, IotaLogoMark, Person, Stake, Unstake } from '@iota/ui-icons';
-
-const icons = {
-    [TransactionAction.Send]: (
-        <ArrowRight fill="currentColor" className="text-gradient-blue-start text-body -rotate-45" />
-    ),
-    [TransactionAction.Receive]: (
-        <ArrowRight fill="currentColor" className="text-gradient-blue-start text-body rotate-135" />
-    ),
-    [TransactionAction.Transaction]: (
-        <ArrowRight fill="currentColor" className="text-gradient-blue-start text-body -rotate-45" />
-    ),
-    [TransactionAction.Staked]: (
-        <Stake className="text-gradient-blue-start text-heading2 bg-transparent" />
-    ),
-    [TransactionAction.Unstaked]: <Unstake className="text-gradient-blue-start text-heading3" />,
-    [TransactionAction.Rewards]: <IotaLogoMark className="text-gradient-blue-start text-body" />,
-    [TransactionAction.PersonalMessage]: (
-        <Person fill="currentColor" className="text-gradient-blue-start text-body" />
-    ),
-};
-
-interface TransactionIconProps {
-    state: TransactionState;
-    action: keyof typeof icons;
-}
-
-function TransactionIcon({ state, action }: TransactionIconProps) {
-    const isError = state === TransactionState.Failed;
-    return (
-        <div
-            className={`${
-                isError ? 'bg-issue-light' : 'bg-gray-40'
-            } w-7.5 h-7.5 rounded-2lg flex items-center justify-center`}
-        >
-            {icons[action]}
-        </div>
-    );
-}
-
-export default TransactionIcon;
diff --git a/apps/wallet-dashboard/components/TransactionTile.tsx b/apps/wallet-dashboard/components/TransactionTile.tsx
deleted file mode 100644
index 0dda8f3f10c..00000000000
--- a/apps/wallet-dashboard/components/TransactionTile.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-'use client';
-
-import React from 'react';
-import TransactionIcon from './TransactionIcon';
-import formatTimestamp from '@/lib/utils/time';
-import { usePopups } from '@/hooks';
-import { TransactionDetailsPopup, Button } from '@/components';
-import { ExtendedTransaction } from '@/lib/interfaces';
-
-interface TransactionTileProps {
-    transaction: ExtendedTransaction;
-}
-
-function TransactionTile({ transaction }: TransactionTileProps): JSX.Element {
-    const { openPopup, closePopup } = usePopups();
-
-    const handleDetailsClick = () => {
-        openPopup(<TransactionDetailsPopup transaction={transaction} onClose={closePopup} />);
-    };
-
-    return (
-        <div className="border-gray-45 flex h-full w-full flex-row items-center space-x-4 rounded-md border border-solid p-4">
-            <TransactionIcon state={transaction.state} action={transaction.action} />
-            <div className="flex h-full w-full flex-col space-y-2">
-                <h2>{transaction.action}</h2>
-                {transaction?.timestamp && <span>{formatTimestamp(transaction.timestamp)}</span>}
-            </div>
-            <Button onClick={handleDetailsClick}>Details</Button>
-        </div>
-    );
-}
-
-export default TransactionTile;
diff --git a/apps/wallet-dashboard/components/VirtualList.tsx b/apps/wallet-dashboard/components/VirtualList.tsx
index 7ca2d37187b..49178382bfc 100644
--- a/apps/wallet-dashboard/components/VirtualList.tsx
+++ b/apps/wallet-dashboard/components/VirtualList.tsx
@@ -72,7 +72,7 @@ function VirtualList<T>({
                 {virtualItems.map((virtualItem) => (
                     <div
                         key={virtualItem.key}
-                        className={`absolute w-full pb-4 pr-4 ${onClick ? 'cursor-pointer' : ''}`}
+                        className={`absolute w-full  ${onClick ? 'cursor-pointer' : ''}`}
                         style={{
                             position: 'absolute',
                             top: 0,
diff --git a/apps/wallet-dashboard/components/index.ts b/apps/wallet-dashboard/components/index.ts
index d6a47751619..9e14f80e881 100644
--- a/apps/wallet-dashboard/components/index.ts
+++ b/apps/wallet-dashboard/components/index.ts
@@ -3,13 +3,11 @@
 
 export { default as RouteLink } from './RouteLink';
 export { default as Notifications } from './Notifications/Notifications';
-export { default as TransactionTile } from './TransactionTile';
 export { default as Box } from './Box';
 export { default as AmountBox } from './AmountBox';
 export { default as Input } from './Input';
 export { default as VirtualList } from './VirtualList';
 export { default as ExternalImage } from './ExternalImage';
-export { default as TransactionIcon } from './TransactionIcon';
 export { default as Dropdown } from './Dropdown';
 
 export * from './account-balance/AccountBalance';
@@ -18,6 +16,7 @@ export * from './Popup';
 export * from './AppList';
 export * from './Cards';
 export * from './Buttons';
+export * from './transactions';
 export * from './staking-overview';
 export * from './Dialogs';
 export * from './ImageIcon';
diff --git a/apps/wallet-dashboard/components/Transaction/GasSummary.tsx b/apps/wallet-dashboard/components/transactions/GasSummary.tsx
similarity index 100%
rename from apps/wallet-dashboard/components/Transaction/GasSummary.tsx
rename to apps/wallet-dashboard/components/transactions/GasSummary.tsx
diff --git a/apps/wallet-dashboard/components/Transaction/StakeTransactionCard.tsx b/apps/wallet-dashboard/components/transactions/StakeTransactionCard.tsx
similarity index 100%
rename from apps/wallet-dashboard/components/Transaction/StakeTransactionCard.tsx
rename to apps/wallet-dashboard/components/transactions/StakeTransactionCard.tsx
diff --git a/apps/wallet-dashboard/components/Transaction/TransactionAmount.tsx b/apps/wallet-dashboard/components/transactions/TransactionAmount.tsx
similarity index 100%
rename from apps/wallet-dashboard/components/Transaction/TransactionAmount.tsx
rename to apps/wallet-dashboard/components/transactions/TransactionAmount.tsx
diff --git a/apps/wallet-dashboard/components/transactions/TransactionIcon.tsx b/apps/wallet-dashboard/components/transactions/TransactionIcon.tsx
new file mode 100644
index 00000000000..8e04e154f13
--- /dev/null
+++ b/apps/wallet-dashboard/components/transactions/TransactionIcon.tsx
@@ -0,0 +1,32 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { LoadingIndicator } from '@iota/apps-ui-kit';
+import { ArrowBottomLeft, ArrowTopRight, Info, IotaLogoMark, Person, Stake } from '@iota/ui-icons';
+
+const ICON_COLORS = {
+    primary: 'text-primary-30',
+    error: 'text-error-30',
+};
+
+const icons = {
+    Send: <ArrowTopRight className={ICON_COLORS.primary} />,
+    Receive: <ArrowBottomLeft className={ICON_COLORS.primary} />,
+    Transaction: <ArrowTopRight className={ICON_COLORS.primary} />,
+    Staked: <Stake className={ICON_COLORS.primary} />,
+    Unstaked: <Stake className={ICON_COLORS.primary} />,
+    Rewards: <IotaLogoMark className={ICON_COLORS.primary} />,
+    Failed: <Info className={ICON_COLORS.error} />,
+    Loading: <LoadingIndicator />,
+    PersonalMessage: <Person className={ICON_COLORS.primary} />,
+};
+
+interface TransactionIconProps {
+    txnFailed?: boolean;
+    variant: keyof typeof icons;
+}
+
+function TransactionIcon({ txnFailed, variant }: TransactionIconProps) {
+    return <div className="[&_svg]:h-5 [&_svg]:w-5">{icons[txnFailed ? 'Failed' : variant]}</div>;
+}
+export default TransactionIcon;
diff --git a/apps/wallet-dashboard/components/Transaction/TransactionSummary.tsx b/apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
similarity index 100%
rename from apps/wallet-dashboard/components/Transaction/TransactionSummary.tsx
rename to apps/wallet-dashboard/components/transactions/TransactionSummary.tsx
diff --git a/apps/wallet-dashboard/components/transactions/TransactionTile.tsx b/apps/wallet-dashboard/components/transactions/TransactionTile.tsx
new file mode 100644
index 00000000000..cb029808b3c
--- /dev/null
+++ b/apps/wallet-dashboard/components/transactions/TransactionTile.tsx
@@ -0,0 +1,74 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+'use client';
+
+import React from 'react';
+import TransactionIcon from './TransactionIcon';
+import formatTimestamp from '@/lib/utils/time';
+import { usePopups } from '@/hooks';
+import { TransactionDetailsPopup } from '@/components';
+import { ExtendedTransaction, TransactionState } from '@/lib/interfaces';
+import {
+    Card,
+    CardType,
+    CardImage,
+    ImageType,
+    ImageShape,
+    CardBody,
+    CardAction,
+    CardActionType,
+} from '@iota/apps-ui-kit';
+import { useFormatCoin, useExtendedTransactionSummary, getLabel } from '@iota/core';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { useCurrentAccount } from '@iota/dapp-kit';
+
+interface TransactionTileProps {
+    transaction: ExtendedTransaction;
+}
+
+function TransactionTile({ transaction }: TransactionTileProps): JSX.Element {
+    const account = useCurrentAccount();
+    const address = account?.address;
+    const { openPopup, closePopup } = usePopups();
+
+    const transactionSummary = useExtendedTransactionSummary(transaction.raw.digest);
+    const [formatAmount, symbol] = useFormatCoin(
+        Math.abs(Number(address ? transactionSummary?.balanceChanges?.[address]?.[0]?.amount : 0)),
+        IOTA_TYPE_ARG,
+    );
+
+    const handleDetailsClick = () => {
+        openPopup(<TransactionDetailsPopup transaction={transaction} onClose={closePopup} />);
+    };
+
+    const transactionDate = transaction?.timestamp && formatTimestamp(transaction.timestamp);
+    return (
+        <Card type={CardType.Default} isHoverable onClick={handleDetailsClick}>
+            <CardImage type={ImageType.BgSolid} shape={ImageShape.SquareRounded}>
+                <TransactionIcon
+                    txnFailed={transaction.state === TransactionState.Failed}
+                    variant={getLabel(transaction?.raw, address)}
+                />
+            </CardImage>
+            <CardBody
+                title={
+                    transaction.state === TransactionState.Failed
+                        ? 'Transaction Failed'
+                        : (transaction.action ?? 'Unknown')
+                }
+                subtitle={transactionDate}
+            />
+            <CardAction
+                type={CardActionType.SupportingText}
+                title={
+                    transaction.state === TransactionState.Failed
+                        ? '--'
+                        : `${formatAmount} ${symbol}`
+                }
+            />
+        </Card>
+    );
+}
+
+export default TransactionTile;
diff --git a/apps/wallet-dashboard/components/transactions/TransactionsList.tsx b/apps/wallet-dashboard/components/transactions/TransactionsList.tsx
new file mode 100644
index 00000000000..526329aed43
--- /dev/null
+++ b/apps/wallet-dashboard/components/transactions/TransactionsList.tsx
@@ -0,0 +1,27 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { useCurrentAccount } from '@iota/dapp-kit';
+import { VirtualList, TransactionTile } from '@/components';
+import { useQueryTransactionsByAddress } from '@iota/core';
+import { getExtendedTransaction } from '@/lib/utils/transaction';
+import { IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
+
+function TransactionsList() {
+    const currentAccount = useCurrentAccount();
+    const { data: transactions, error } = useQueryTransactionsByAddress(currentAccount?.address);
+
+    if (error) {
+        return <div>{error?.message}</div>;
+    }
+
+    const virtualItem = (rawTransaction: IotaTransactionBlockResponse): JSX.Element => {
+        const transaction = getExtendedTransaction(rawTransaction, currentAccount?.address || '');
+        return <TransactionTile transaction={transaction} />;
+    };
+
+    return <VirtualList items={transactions || []} estimateSize={() => 60} render={virtualItem} />;
+}
+
+export default TransactionsList;
diff --git a/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx b/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx
new file mode 100644
index 00000000000..a590e3abcdb
--- /dev/null
+++ b/apps/wallet-dashboard/components/transactions/TransactionsOverview.tsx
@@ -0,0 +1,19 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+
+import { Panel, Title } from '@iota/apps-ui-kit';
+import TransactionsList from './TransactionsList';
+
+function TransactionsOverview() {
+    return (
+        <Panel>
+            <Title title="Activity" />
+            <div className="px-sm pb-md pt-sm">
+                <TransactionsList />
+            </div>
+        </Panel>
+    );
+}
+
+export default TransactionsOverview;
diff --git a/apps/wallet-dashboard/components/Transaction/UnstakeTransactionCard.tsx b/apps/wallet-dashboard/components/transactions/UnstakeTransactionCard.tsx
similarity index 100%
rename from apps/wallet-dashboard/components/Transaction/UnstakeTransactionCard.tsx
rename to apps/wallet-dashboard/components/transactions/UnstakeTransactionCard.tsx
diff --git a/apps/wallet-dashboard/components/Transaction/BalanceChanges/BalanceChangeEntries.tsx b/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntries.tsx
similarity index 95%
rename from apps/wallet-dashboard/components/Transaction/BalanceChanges/BalanceChangeEntries.tsx
rename to apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntries.tsx
index 9ee8daeab4d..14cc9ad7891 100644
--- a/apps/wallet-dashboard/components/Transaction/BalanceChanges/BalanceChangeEntries.tsx
+++ b/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntries.tsx
@@ -3,7 +3,7 @@
 
 import { BalanceChange } from '@iota/core';
 import { useMemo } from 'react';
-import { BalanceChangeEntry } from './';
+import { BalanceChangeEntry } from '.';
 import { getRecognizedUnRecognizedTokenChanges } from '@iota/core';
 
 interface BalanceChangeEntriesProps {
diff --git a/apps/wallet-dashboard/components/Transaction/BalanceChanges/BalanceChangeEntry.tsx b/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntry.tsx
similarity index 100%
rename from apps/wallet-dashboard/components/Transaction/BalanceChanges/BalanceChangeEntry.tsx
rename to apps/wallet-dashboard/components/transactions/balance-changes/BalanceChangeEntry.tsx
diff --git a/apps/wallet-dashboard/components/Transaction/BalanceChanges/BalanceChanges.tsx b/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChanges.tsx
similarity index 92%
rename from apps/wallet-dashboard/components/Transaction/BalanceChanges/BalanceChanges.tsx
rename to apps/wallet-dashboard/components/transactions/balance-changes/BalanceChanges.tsx
index 9f421c9e17c..34c507c62d7 100644
--- a/apps/wallet-dashboard/components/Transaction/BalanceChanges/BalanceChanges.tsx
+++ b/apps/wallet-dashboard/components/transactions/balance-changes/BalanceChanges.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { BalanceChange } from '@iota/core';
-import { BalanceChangeEntries } from './';
+import { BalanceChangeEntries } from '.';
 
 interface BalanceChangesProps {
     balanceChanges: Record<string, BalanceChange[]>;
diff --git a/apps/wallet-dashboard/components/Transaction/BalanceChanges/index.ts b/apps/wallet-dashboard/components/transactions/balance-changes/index.ts
similarity index 100%
rename from apps/wallet-dashboard/components/Transaction/BalanceChanges/index.ts
rename to apps/wallet-dashboard/components/transactions/balance-changes/index.ts
diff --git a/apps/wallet-dashboard/components/Transaction/index.ts b/apps/wallet-dashboard/components/transactions/index.ts
similarity index 55%
rename from apps/wallet-dashboard/components/Transaction/index.ts
rename to apps/wallet-dashboard/components/transactions/index.ts
index e87efcb41e4..7602efd1395 100644
--- a/apps/wallet-dashboard/components/Transaction/index.ts
+++ b/apps/wallet-dashboard/components/transactions/index.ts
@@ -6,6 +6,10 @@ export { default as TransactionAmount } from './TransactionAmount';
 export { default as StakeTransactionCard } from './StakeTransactionCard';
 export { default as UnstakeTransactionCard } from './UnstakeTransactionCard';
 export { default as TransactionSummary } from './TransactionSummary';
+export { default as TransactionTile } from './TransactionTile';
+export { default as TransactionIcon } from './TransactionIcon';
+export { default as TransactionsList } from './TransactionsList';
+export { default as TransactionsOverview } from './TransactionsOverview';
 
-export * from './BalanceChanges';
-export * from './ObjectChanges';
+export * from './balance-changes';
+export * from './object-changes';
diff --git a/apps/wallet-dashboard/components/Transaction/ObjectChanges/ObjectChangeEntry.tsx b/apps/wallet-dashboard/components/transactions/object-changes/ObjectChangeEntry.tsx
similarity index 97%
rename from apps/wallet-dashboard/components/Transaction/ObjectChanges/ObjectChangeEntry.tsx
rename to apps/wallet-dashboard/components/transactions/object-changes/ObjectChangeEntry.tsx
index 7b765fac8de..9d386d6e6d3 100644
--- a/apps/wallet-dashboard/components/Transaction/ObjectChanges/ObjectChangeEntry.tsx
+++ b/apps/wallet-dashboard/components/transactions/object-changes/ObjectChangeEntry.tsx
@@ -3,7 +3,7 @@
 
 import { ObjectChangesByOwner, IotaObjectChangeTypes } from '@iota/core';
 import { IotaObjectChange } from '@iota/iota-sdk/client';
-import { ObjectDetail } from './';
+import { ObjectDetail } from '.';
 import React from 'react';
 
 interface ObjectChangeEntryProps {
diff --git a/apps/wallet-dashboard/components/Transaction/ObjectChanges/ObjectChanges.tsx b/apps/wallet-dashboard/components/transactions/object-changes/ObjectChanges.tsx
similarity index 93%
rename from apps/wallet-dashboard/components/Transaction/ObjectChanges/ObjectChanges.tsx
rename to apps/wallet-dashboard/components/transactions/object-changes/ObjectChanges.tsx
index 8df1decfea8..b3b246e6f0e 100644
--- a/apps/wallet-dashboard/components/Transaction/ObjectChanges/ObjectChanges.tsx
+++ b/apps/wallet-dashboard/components/transactions/object-changes/ObjectChanges.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ObjectChangeSummary, IotaObjectChangeTypes } from '@iota/core';
-import { ObjectChangeEntry } from './';
+import { ObjectChangeEntry } from '.';
 
 interface ObjectChangesProps {
     objectSummary: ObjectChangeSummary;
diff --git a/apps/wallet-dashboard/components/Transaction/ObjectChanges/ObjectDetail.tsx b/apps/wallet-dashboard/components/transactions/object-changes/ObjectDetail.tsx
similarity index 100%
rename from apps/wallet-dashboard/components/Transaction/ObjectChanges/ObjectDetail.tsx
rename to apps/wallet-dashboard/components/transactions/object-changes/ObjectDetail.tsx
diff --git a/apps/wallet-dashboard/components/Transaction/ObjectChanges/index.ts b/apps/wallet-dashboard/components/transactions/object-changes/index.ts
similarity index 100%
rename from apps/wallet-dashboard/components/Transaction/ObjectChanges/index.ts
rename to apps/wallet-dashboard/components/transactions/object-changes/index.ts