diff --git a/src/components/Molecules/Address/NFTApprovalList/NFTApprovalList.stories.tsx b/src/components/Molecules/Address/NFTApprovalList/NFTApprovalList.stories.tsx
new file mode 100644
index 00000000..ef9c48e9
--- /dev/null
+++ b/src/components/Molecules/Address/NFTApprovalList/NFTApprovalList.stories.tsx
@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { NFTApprovalList as NFTApprovalListComponent } from "./NFTApprovalList";
+
+type Story = StoryObj<typeof NFTApprovalListComponent>;
+
+const meta: Meta<typeof NFTApprovalListComponent> = {
+    title: "Molecules/Address/Approval/NFT Approval List",
+    component: NFTApprovalListComponent,
+};
+
+export default meta;
+
+export const NFTApprovalList: Story = {
+    args: {
+        chain_name: "eth-mainnet",
+        address: "demo.eth",
+    },
+};
diff --git a/src/components/Molecules/Address/NFTApprovalList/NFTApprovalList.tsx b/src/components/Molecules/Address/NFTApprovalList/NFTApprovalList.tsx
new file mode 100644
index 00000000..d2d3ead2
--- /dev/null
+++ b/src/components/Molecules/Address/NFTApprovalList/NFTApprovalList.tsx
@@ -0,0 +1,188 @@
+import { type Option, None, Some } from "@/utils/option";
+import type { NftApprovalsItem } from "@covalenthq/client-sdk";
+import { useEffect, useState } from "react";
+import { type NFTApprovalListProps } from "@/utils/types/molecules.types";
+import { useGoldRush } from "@/utils/store";
+import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { defaultErrorMessage } from "@/utils/constants/shared.constants";
+import { TableHeaderSorting, TableList } from "@/components/Shared";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Address } from "@/components/Atoms";
+import { Button } from "@/components/ui/button";
+
+export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
+    chain_name,
+    address,
+    on_revoke_approval,
+}) => {
+    const { covalentClient } = useGoldRush();
+
+    const [maybeResult, setMaybeResult] =
+        useState<Option<NftApprovalsItem[] | null>>(None);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    useEffect(() => {
+        (async () => {
+            setMaybeResult(None);
+            setErrorMessage(null);
+            try {
+                const { data, ...error } =
+                    await covalentClient.SecurityService.getNftApprovals(
+                        chain_name,
+                        address.trim()
+                    );
+                if (error.error) {
+                    throw error;
+                }
+                setMaybeResult(new Some(data.items));
+            } catch (error: CovalentAPIError | any) {
+                setErrorMessage(error?.error_message ?? defaultErrorMessage);
+                setMaybeResult(new Some(null));
+                console.error(error);
+            }
+        })();
+    }, [chain_name, address]);
+
+    const columns: ColumnDef<NftApprovalsItem>[] = [
+        {
+            id: "token_details",
+            accessorKey: "token_details",
+            header: ({ column }) => (
+                <TableHeaderSorting<NftApprovalsItem>
+                    align="left"
+                    header={"Token"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => {
+                return (
+                    <div className="flex flex-col">
+                        <div className="flex items-center gap-1">
+                            {row.original.contract_ticker_symbol || (
+                                <Address
+                                    address={row.original.contract_address}
+                                />
+                            )}
+                        </div>
+                        <p className="text-xs opacity-80">
+                            <Address address={row.original.contract_address} />
+                        </p>
+                    </div>
+                );
+            },
+        },
+        {
+            id: "token_balance",
+            accessorKey: "token_balance",
+            header: ({ column }) => (
+                <TableHeaderSorting<NftApprovalsItem>
+                    align="left"
+                    header={"Wallet Balance"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => row.original.token_balances.length,
+        },
+        {
+            id: "token_id",
+            accessorKey: "token_id",
+            header: ({ column }) => (
+                <TableHeaderSorting<NftApprovalsItem>
+                    align="left"
+                    header={"Token ID"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => {
+                const token_ids = row.original.token_balances.map(
+                    (balance) => balance.token_id
+                );
+                return (
+                    <p className="max-w-40 break-all">{token_ids.join(", ")}</p>
+                );
+            },
+        },
+        {
+            id: "spender_address_label",
+            accessorKey: "spender_address_label",
+            header: ({ column }) => (
+                <TableHeaderSorting<NftApprovalsItem>
+                    align="left"
+                    header={"Spender"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => {
+                return (
+                    <p className="flex flex-col">
+                        {row.original.spenders.map((spender) =>
+                            spender.spender_address_label ? (
+                                spender.spender_address_label
+                            ) : (
+                                <Address
+                                    address={spender.spender_address}
+                                    key={spender.spender_address}
+                                />
+                            )
+                        )}
+                    </p>
+                );
+            },
+        },
+        {
+            id: "risk_factor",
+            accessorKey: "risk_factor",
+            header: ({ column }) => (
+                <TableHeaderSorting<NftApprovalsItem>
+                    align="left"
+                    header={"Risk Factor"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => {
+                return (
+                    <span
+                        className={`${
+                            row.original.spenders[0].allowance === "Unlimited"
+                                ? "bg-red-500"
+                                : "bg-green-500"
+                        } rounded px-2 py-1 text-white`}
+                    >
+                        {row.original.spenders[0].allowance === "Unlimited"
+                            ? "High"
+                            : "Low"}
+                    </span>
+                );
+            },
+        },
+    ];
+
+    if (on_revoke_approval) {
+        columns.push({
+            id: "revoke",
+            accessorKey: "revoke",
+            header: () => <div className="w-12"></div>,
+            cell: ({ row }) => {
+                return (
+                    <Button onClick={() => on_revoke_approval(row.original)}>
+                        Revoke
+                    </Button>
+                );
+            },
+        });
+    }
+
+    return (
+        <TableList<NftApprovalsItem>
+            columns={columns}
+            errorMessage={errorMessage}
+            maybeData={maybeResult}
+            sorting_state={[
+                {
+                    id: "value_at_risk",
+                    desc: true,
+                },
+            ]}
+        />
+    );
+};
diff --git a/src/components/Molecules/Address/TokenApprovalList/TokenApprovalList.stories.tsx b/src/components/Molecules/Address/TokenApprovalList/TokenApprovalList.stories.tsx
new file mode 100644
index 00000000..518a6d7d
--- /dev/null
+++ b/src/components/Molecules/Address/TokenApprovalList/TokenApprovalList.stories.tsx
@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { TokenApprovalList as TokenApprovalListComponent } from "./TokenApprovalList";
+
+type Story = StoryObj<typeof TokenApprovalListComponent>;
+
+const meta: Meta<typeof TokenApprovalListComponent> = {
+    title: "Molecules/Address/Approval/Token Approval List",
+    component: TokenApprovalListComponent,
+};
+
+export default meta;
+
+export const TokenApprovalList: Story = {
+    args: {
+        chain_name: "eth-mainnet",
+        address: "demo.eth",
+    },
+};
diff --git a/src/components/Molecules/Address/TokenApprovalList/TokenApprovalList.tsx b/src/components/Molecules/Address/TokenApprovalList/TokenApprovalList.tsx
new file mode 100644
index 00000000..013baf99
--- /dev/null
+++ b/src/components/Molecules/Address/TokenApprovalList/TokenApprovalList.tsx
@@ -0,0 +1,219 @@
+import { type Option, None, Some } from "@/utils/option";
+import { type TokensApprovalItem } from "@covalenthq/client-sdk";
+import { useEffect, useState } from "react";
+import { type TokenApprovalListProps } from "@/utils/types/molecules.types";
+import { useGoldRush } from "@/utils/store";
+import { type CovalentAPIError } from "@/utils/types/shared.types";
+import {
+    GRK_SIZES,
+    defaultErrorMessage,
+} from "@/utils/constants/shared.constants";
+import { CardDetail, TableHeaderSorting, TableList } from "@/components/Shared";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Address, TokenAvatar } from "@/components/Atoms";
+import { Button } from "@/components/ui/button";
+
+export const TokenApprovalList: React.FC<TokenApprovalListProps> = ({
+    chain_name,
+    address,
+    on_revoke_approval,
+}) => {
+    const { covalentClient } = useGoldRush();
+
+    const [maybeResult, setMaybeResult] =
+        useState<Option<TokensApprovalItem[] | null>>(None);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    useEffect(() => {
+        (async () => {
+            setMaybeResult(None);
+            setErrorMessage(null);
+            try {
+                const { data, ...error } =
+                    await covalentClient.SecurityService.getApprovals(
+                        chain_name,
+                        address.trim()
+                    );
+                if (error.error) {
+                    throw error;
+                }
+                setMaybeResult(new Some(data.items));
+            } catch (error: CovalentAPIError | any) {
+                setErrorMessage(error?.error_message ?? defaultErrorMessage);
+                setMaybeResult(new Some(null));
+                console.error(error);
+            }
+        })();
+    }, [chain_name, address]);
+
+    const columns: ColumnDef<TokensApprovalItem>[] = [
+        {
+            id: "token_details",
+            accessorKey: "token_details",
+            header: ({ column }) => (
+                <TableHeaderSorting<TokensApprovalItem>
+                    align="left"
+                    header={"Token"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => {
+                return (
+                    <div className="flex flex-col">
+                        <CardDetail
+                            content={
+                                <div className="flex items-center gap-1">
+                                    <TokenAvatar
+                                        token_url={row.original.logo_url}
+                                        size={GRK_SIZES.EXTRA_SMALL}
+                                    />
+                                    {row.original.ticker_symbol || (
+                                        <Address
+                                            address={row.original.token_address}
+                                        />
+                                    )}
+                                </div>
+                            }
+                        />
+                        <CardDetail
+                            subtext={
+                                <Address address={row.original.token_address} />
+                            }
+                        />
+                    </div>
+                );
+            },
+        },
+        {
+            id: "balance_quote",
+            accessorKey: "balance_quote",
+            header: ({ column }) => (
+                <TableHeaderSorting<TokensApprovalItem>
+                    align="left"
+                    header={"Wallet Balance"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => {
+                return (
+                    <div className="flex flex-col">
+                        <CardDetail
+                            content={
+                                Number(row.original.balance) /
+                                Math.pow(10, row.original.contract_decimals)
+                            }
+                        />
+                        <CardDetail
+                            subtext={row.original.pretty_balance_quote}
+                        />
+                    </div>
+                );
+            },
+        },
+        {
+            id: "pretty_value_at_risk_quote",
+            accessorKey: "pretty_value_at_risk_quote",
+            header: ({ column }) => (
+                <TableHeaderSorting<TokensApprovalItem>
+                    align="left"
+                    header={"Value at Risk"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => {
+                return (
+                    <p>
+                        {row.original.pretty_value_at_risk_quote
+                            ? row.original.pretty_value_at_risk_quote
+                            : Number(row.original.value_at_risk) /
+                              Math.pow(10, row.original.contract_decimals)}
+                    </p>
+                );
+            },
+        },
+        {
+            id: "spender_address_label",
+            accessorKey: "spender_address_label",
+            header: ({ column }) => (
+                <TableHeaderSorting<TokensApprovalItem>
+                    align="left"
+                    header={"Spender(s)"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => {
+                return (
+                    <p className="flex flex-col">
+                        {row.original.spenders.map((spender) =>
+                            spender.spender_address_label ? (
+                                spender.spender_address_label
+                            ) : (
+                                <Address
+                                    address={spender.spender_address}
+                                    key={spender.spender_address}
+                                />
+                            )
+                        )}
+                    </p>
+                );
+            },
+        },
+        {
+            id: "risk_factor",
+            accessorKey: "risk_factor",
+            header: ({ column }) => (
+                <TableHeaderSorting<TokensApprovalItem>
+                    align="left"
+                    header={"Risk Factor"}
+                    column={column}
+                />
+            ),
+            cell: ({ row }) => {
+                return (
+                    <span
+                        className={`${
+                            row.original.spenders[0].risk_factor ===
+                            "CONSIDER REVOKING"
+                                ? "bg-red-500"
+                                : "bg-green-500"
+                        } rounded px-2 py-1 text-white`}
+                    >
+                        {row.original.spenders[0].risk_factor ===
+                        "CONSIDER REVOKING"
+                            ? "High"
+                            : "Low"}
+                    </span>
+                );
+            },
+        },
+    ];
+
+    if (on_revoke_approval) {
+        columns.push({
+            id: "revoke",
+            accessorKey: "revoke",
+            header: () => <div className="w-12"></div>,
+            cell: ({ row }) => {
+                return (
+                    <Button onClick={() => on_revoke_approval(row.original)}>
+                        Revoke
+                    </Button>
+                );
+            },
+        });
+    }
+
+    return (
+        <TableList<TokensApprovalItem>
+            columns={columns}
+            errorMessage={errorMessage}
+            maybeData={maybeResult}
+            sorting_state={[
+                {
+                    id: "value_at_risk",
+                    desc: true,
+                },
+            ]}
+        />
+    );
+};
diff --git a/src/components/Molecules/index.ts b/src/components/Molecules/index.ts
index a689dfe9..44ee0f43 100644
--- a/src/components/Molecules/index.ts
+++ b/src/components/Molecules/index.ts
@@ -8,6 +8,8 @@ export { LatestBlocks } from "./Block/LatestBlocks/LatestBlocks";
 export { ChainSelector } from "./ChainSelector/ChainSelector";
 export { GasCard } from "./GasCard/GasCard";
 export { LatestPrice } from "./LatestPrice/LatestPrice";
+export { TokenApprovalList } from "./Address/TokenApprovalList/TokenApprovalList";
+export { NFTApprovalList } from "./Address/NFTApprovalList/NFTApprovalList";
 export { NFTCollectionDetails } from "./NFT/NFTCollectionDetails/NFTCollectionDetails";
 export { NFTCollectionTokensList } from "./NFT/NFTCollectionTokensList/NFTCollectionTokensList";
 export { NFTFloorPrice } from "./NFT/NFTFloorPrice/NFTFloorPrice";
diff --git a/src/utils/types/molecules.types.ts b/src/utils/types/molecules.types.ts
index 7e2c8730..ed3357d7 100644
--- a/src/utils/types/molecules.types.ts
+++ b/src/utils/types/molecules.types.ts
@@ -1,4 +1,8 @@
 import { type Option } from "@/utils/option";
+import type {
+    NftApprovalsItem,
+    TokensApprovalItem,
+} from "@covalenthq/client-sdk";
 import {
     type BalanceItem,
     type Block,
@@ -30,6 +34,18 @@ export interface AddressActivityListProps {
     errorMessage?: string | null;
 }
 
+export interface NFTApprovalListProps {
+    chain_name: Chain;
+    address: string;
+    on_revoke_approval?: (approval: NftApprovalsItem) => void;
+}
+
+export interface TokenApprovalListProps {
+    chain_name: Chain;
+    address: string;
+    on_revoke_approval?: (approval: TokensApprovalItem) => void;
+}
+
 export interface BlockDetailsProps {
     chain_name: Chain;
     height: number;
diff --git a/src/utils/types/shared.types.ts b/src/utils/types/shared.types.ts
index cfde739a..1b7eff6c 100644
--- a/src/utils/types/shared.types.ts
+++ b/src/utils/types/shared.types.ts
@@ -1,4 +1,8 @@
 import { type Option } from "@/utils/option";
+import type {
+    NftApprovalsItem,
+    TokensApprovalItem,
+} from "@covalenthq/client-sdk";
 import { type Pagination, type Transaction } from "@covalenthq/client-sdk";
 import {
     type Column,
@@ -45,6 +49,16 @@ export interface TransactionsProps {
     errorMessage: string | null;
 }
 
+export interface TokenApprovalsTableProps {
+    maybeResult: Option<TokensApprovalItem[] | null>;
+    errorMessage: string | null;
+}
+
+export interface NFTApprovalsTableProps {
+    maybeResult: Option<NftApprovalsItem[] | null>;
+    errorMessage: string | null;
+}
+
 export interface SkeletonTableProps {
     rows?: number;
     cols?: number;