diff --git a/src/components/account/BalanceTable.vue b/src/components/account/BalanceTable.vue
index b0cb64ca7..361fd1a26 100644
--- a/src/components/account/BalanceTable.vue
+++ b/src/components/account/BalanceTable.vue
@@ -54,7 +54,7 @@
       />
     </o-table-column>
 
-    <o-table-column v-slot="props" field="balance" label="Balance" position="right">
+    <o-table-column v-slot="props" field="balance" label="Balance/Nb of NFTs" position="right">
       <TokenAmount v-bind:amount="BigInt(props.row.balance)"
                    v-bind:token-id="props.row.token_id"/>
     </o-table-column>
diff --git a/src/components/account/CollectionTable.vue b/src/components/account/CollectionTable.vue
new file mode 100644
index 000000000..8aa9dad6e
--- /dev/null
+++ b/src/components/account/CollectionTable.vue
@@ -0,0 +1,130 @@
+<!--
+  -
+  - Hedera Mirror Node Explorer
+  -
+  - Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -      http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -
+  -->
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+  <o-table
+    :data="collection"
+    :loading="loading"
+    :hoverable="true"
+    :paginated="!isTouchDevice"
+    backend-pagination
+    :total="totalRowCount"
+    :current-page="currentPage"
+    :per-page="pageSize"
+    @page-change="onPageChange"
+    :striped="true"
+    :v-model:current-page="currentPage"
+    :mobile-breakpoint="ORUGA_MOBILE_BREAKPOINT"
+    aria-current-label="Current page"
+    aria-next-label="Next page"
+    aria-page-label="Page"
+    aria-previous-label="Previous page"
+    @cell-click="handleClick"
+  >
+    <o-table-column v-slot="props" field="serial" label="Serial">
+      {{ props.row.serial_number }}
+    </o-table-column>
+  </o-table>
+
+  <EmptyTable v-if="!collection.length"/>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts">
+
+import {ComputedRef, defineComponent, inject, PropType, Ref} from 'vue';
+import {Nft} from "@/schemas/HederaSchemas";
+import TokenLink from "@/components/values/TokenLink.vue";
+import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
+import EmptyTable from "@/components/EmptyTable.vue";
+import {routeManager} from "@/router";
+import {CollectionTableController} from "@/components/account/CollectionTableController";
+
+export default defineComponent({
+  name: 'CollectionTable',
+
+  components: {
+    EmptyTable,
+    TokenLink,
+  },
+
+  props: {
+    controller: {
+      type: Object as PropType<CollectionTableController>,
+      required: true
+    },
+    tokenId: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup(props) {
+    const isTouchDevice = inject('isTouchDevice', false)
+    const isMediumScreen = inject('isMediumScreen', true)
+
+    const handleClick = (
+      n: Nft,
+      c: unknown,
+      i: number,
+      ci: number,
+      event: MouseEvent,
+    ) => {
+      if (n.token_id && n.serial_number) {
+        routeManager.routeToSerial(
+          n.token_id,
+          n.serial_number,
+          event.ctrlKey || event.metaKey,
+        );
+      }
+    };
+
+    return {
+      isTouchDevice,
+      isMediumScreen,
+      collection: props.controller.rows as ComputedRef<Nft[]>,
+      loading: props.controller.loading as ComputedRef<boolean>,
+      totalRowCount: props.controller.totalRowCount as ComputedRef<number>,
+      currentPage: props.controller.currentPage as Ref<number>,
+      onPageChange: props.controller.onPageChange,
+      pageSize: props.controller.pageSize as Ref<Number>,
+      handleClick,
+      ORUGA_MOBILE_BREAKPOINT
+    }
+  }
+});
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                       STYLE                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/account/CollectionTableController.ts b/src/components/account/CollectionTableController.ts
new file mode 100644
index 000000000..0aff3d32c
--- /dev/null
+++ b/src/components/account/CollectionTableController.ts
@@ -0,0 +1,86 @@
+/*-
+ *
+ * Hedera Mirror Node Explorer
+ *
+ * Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {Nft, Nfts} from "@/schemas/HederaSchemas";
+import {ComputedRef, Ref} from "vue";
+import axios from "axios";
+import {KeyOperator, SortOrder, TableController} from "@/utils/table/TableController";
+import {Router} from "vue-router";
+
+export class CollectionTableController extends TableController<Nft, number> {
+
+    public readonly accountId: Ref<string | null>
+    public readonly tokenId: string
+
+    //
+    // Public
+    //
+
+    public constructor(router: Router, tokenId: string, accountId: Ref<string | null>, pageSize: ComputedRef<number>) {
+        super(router, pageSize, 10 * pageSize.value, 5000, 10, 100)
+        this.accountId = accountId
+        this.tokenId = tokenId
+    }
+
+    //
+    // TableController
+    //
+
+    public async load(serialNumber: number | null, operator: KeyOperator, order: SortOrder, limit: number): Promise<Nft[] | null> {
+        if (this.tokenId == null || this.accountId.value == null) {
+            return Promise.resolve(null)
+        }
+
+        const params = {} as {
+            limit: number
+            "token.id": string | undefined
+            serialnumber: string | undefined
+            order: string
+        }
+        params.limit = limit
+        params.order = order
+        params["token.id"] = this.tokenId
+
+        if (serialNumber !== null) {
+            params.serialnumber = operator + ":" + serialNumber
+        }
+
+        const { data } = await axios.get<Nfts>(
+          `api/v1/accounts/${this.accountId.value}/nfts`,
+          {params: params},
+        )
+
+        const nfts = data.nfts ?? null
+
+        return Promise.resolve(nfts)
+    }
+
+    public keyFor(row: Nft): number {
+        return row.serial_number ?? 0
+    }
+
+    public stringFromKey(serialNumber: number): string {
+        return serialNumber.toString()
+    }
+
+    public keyFromString(s: string): number | null {
+        return Number(s)
+    }
+}
diff --git a/src/components/account/NftsTable.vue b/src/components/account/NftsTable.vue
new file mode 100644
index 000000000..8b8d123e4
--- /dev/null
+++ b/src/components/account/NftsTable.vue
@@ -0,0 +1,119 @@
+<!--
+  -
+  - Hedera Mirror Node Explorer
+  -
+  - Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -      http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -
+  -->
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+  <o-table
+    :data="collections"
+    :paginated="!isTouchDevice"
+    :per-page="perPage"
+    @cell-click="handleClick"
+
+    :hoverable="true"
+    :narrowed="true"
+    :striped="true"
+    :mobile-breakpoint="ORUGA_MOBILE_BREAKPOINT"
+
+    aria-current-label="Current page"
+    aria-next-label="Next page"
+    aria-page-label="Page"
+    aria-previous-label="Previous page"
+  >
+    <o-table-column v-slot="props" field="token_id" label="Token">
+      <TokenLink
+        v-bind:show-extra="true"
+        v-bind:token-id="props.row.tokenId"
+        v-bind:no-anchor="true"
+      />
+    </o-table-column>
+    <o-table-column v-slot="props" field="owned" label="Owned" position="right">
+      {{ props.row.collectionSize }}
+    </o-table-column>
+  </o-table>
+
+  <EmptyTable v-if="!collections.length"/>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts">
+
+import {computed, defineComponent, inject, PropType} from 'vue';
+import TokenLink from "@/components/values/TokenLink.vue";
+import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
+import EmptyTable from "@/components/EmptyTable.vue";
+import {routeManager} from "@/router";
+import {useRoute} from "vue-router";
+import {NftCollectionInfo} from "@/utils/cache/NftCollectionCache";
+
+export default defineComponent({
+  name: 'NftsTable',
+
+  components: {
+    EmptyTable,
+    TokenLink,
+  },
+
+  props: {
+    collections: {
+      type: Object as PropType<NftCollectionInfo[]>,
+      required: true
+    },
+  },
+
+  setup() {
+    const route = useRoute();
+
+    const isTouchDevice = inject('isTouchDevice', false)
+    const isMediumScreen = inject('isMediumScreen', true)
+
+    const perPage = computed(() => isMediumScreen ? 15 : 5)
+
+    const handleClick = (nft: NftCollectionInfo, c: unknown, i: number, ci: number, event: MouseEvent) => {
+      if (nft.tokenId) {
+        routeManager.routeToCollection(route.params.accountId as string, nft.tokenId, event.ctrlKey || event.metaKey)
+      }
+    }
+
+    return {
+      isTouchDevice,
+      isMediumScreen,
+      perPage,
+      handleClick,
+      ORUGA_MOBILE_BREAKPOINT
+    }
+  }
+});
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                       STYLE                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/allowances/ApproveAllowanceDialog.vue b/src/components/allowances/ApproveAllowanceDialog.vue
index 55e932da4..c214ee09b 100644
--- a/src/components/allowances/ApproveAllowanceDialog.vue
+++ b/src/components/allowances/ApproveAllowanceDialog.vue
@@ -321,7 +321,7 @@ export default defineComponent({
         result ||= allowanceChoice.value !== "token"
         result ||= selectedSpender.value !== props.currentTokenAllowance?.spender
         result ||= selectedToken.value !== props.currentTokenAllowance.token_id
-        result ||= selectedTokenAmount.value !== props.currentTokenAllowance?.amount_granted.toString() ?? null
+        result ||= selectedTokenAmount.value !== (props.currentTokenAllowance?.amount_granted.toString() ?? null)
       } else {
         result = true
       }
diff --git a/src/pages/AccountBalances.vue b/src/pages/AccountBalances.vue
index 9151d0add..e7eaa16bb 100644
--- a/src/pages/AccountBalances.vue
+++ b/src/pages/AccountBalances.vue
@@ -26,9 +26,9 @@
 
   <section class="section" :class="{'h-mobile-background': isTouchDevice || !isSmallScreen}">
 
-    <DashboardCard>
+    <DashboardCard id="balanceCard">
       <template v-slot:title>
-        <span class="h-is-primary-title">Token Balances for Account </span>
+        <span class="h-is-primary-title">All Tokens Owned by </span>
         <span class="h-is-secondary-text">{{ accountId }}</span>
       </template>
       <template v-slot:content>
@@ -36,6 +36,16 @@
       </template>
     </DashboardCard>
 
+    <DashboardCard id="nftsCard">
+      <template v-slot:title>
+        <span class="h-is-primary-title">NFTs Owned by </span>
+        <span class="h-is-secondary-text">{{ accountId }}</span>
+      </template>
+      <template v-slot:content>
+        <NftsTable :collections="nftCollections"/>
+      </template>
+    </DashboardCard>
+
   </section>
 
   <Footer/>
@@ -55,12 +65,15 @@ import Footer from "@/components/Footer.vue";
 import {TokenRelationshipsTableController} from "@/components/account/TokenRelationshipsTableController";
 import {useRouter} from "vue-router";
 import {EntityID} from "@/utils/EntityID";
+import NftsTable from "@/components/account/NftsTable.vue";
+import {NftCollectionCache} from "@/utils/cache/NftCollectionCache";
 
 export default defineComponent({
 
   name: 'AccountBalances',
 
   components: {
+    NftsTable,
     Footer,
     DashboardCard,
     BalanceTable
@@ -85,18 +98,28 @@ export default defineComponent({
     })
 
     const tokenRelationshipTableController =
-        new TokenRelationshipsTableController(useRouter(), normalizedAccountId, perPage)
-    onMounted(() => tokenRelationshipTableController.mount())
-    onBeforeUnmount(() => tokenRelationshipTableController.unmount())
+        new TokenRelationshipsTableController(useRouter(), normalizedAccountId, perPage);
+    const nftCollectionLookup = NftCollectionCache.instance.makeLookup(normalizedAccountId)
+    onMounted(() => {
+        tokenRelationshipTableController.mount()
+        nftCollectionLookup.mount()
+    })
+    onBeforeUnmount(() => {
+        tokenRelationshipTableController.unmount()
+        nftCollectionLookup.unmount()
+    })
+
+    const nftCollections = computed( () => nftCollectionLookup.entity.value ?? [])
 
     return {
       isSmallScreen,
       isTouchDevice,
       tokenRelationshipTableController,
+      nftCollections
     }
   }
 });
 
 </script>
 
-<style/>
\ No newline at end of file
+<style/>
diff --git a/src/pages/AccountCollection.vue b/src/pages/AccountCollection.vue
new file mode 100644
index 000000000..20b0b9ab4
--- /dev/null
+++ b/src/pages/AccountCollection.vue
@@ -0,0 +1,119 @@
+<!--
+  -
+  - Hedera Mirror Node Explorer
+  -
+  - Copyright (C) 2021 - 2023 Hedera Hashgraph, LLC
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -      http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -
+  -->
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                     TEMPLATE                                                    -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<template>
+
+  <section class="section" :class="{'h-mobile-background': isTouchDevice || !isSmallScreen}">
+
+    <DashboardCard>
+      <template v-slot:title>
+        <div class="is-flex is-align-items-baseline">
+          <p class="h-is-primary-title">Collection</p>
+          <TokenLink
+              v-bind:show-extra="true"
+              v-bind:token-id="tokenId"
+              class="h-is-secondary-text ml-2"
+          />
+        </div>
+        <p class="h-is-tertiary-text has-text-grey">{{ 'for Account ' + normalizedAccountId }}</p>
+      </template>
+      <template v-slot:content>
+        <CollectionTable :token-id="tokenId" :controller="collectionTableController"/>
+      </template>
+    </DashboardCard>
+
+  </section>
+
+  <Footer/>
+
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts">
+
+import {computed, defineComponent, inject, onBeforeUnmount, onMounted} from 'vue';
+import DashboardCard from "@/components/DashboardCard.vue";
+import Footer from "@/components/Footer.vue";
+import { useRouter } from "vue-router";
+import {EntityID} from "@/utils/EntityID";
+import { CollectionTableController } from "@/components/account/CollectionTableController";
+import CollectionTable from "@/components/account/CollectionTable.vue";
+import TokenLink from "@/components/values/TokenLink.vue";
+
+export default defineComponent({
+
+  name: 'AccountCollection',
+
+  components: {
+    TokenLink,
+    CollectionTable,
+    Footer,
+    DashboardCard
+  },
+
+  props: {
+    accountId: {
+      type: String,
+      required: true
+    },
+    tokenId: {
+      type: String,
+      required: true
+    },
+    network: String
+  },
+
+  setup(props) {
+    const isSmallScreen = inject('isSmallScreen', true)
+    const isMediumScreen = inject('isMediumScreen', true)
+    const isTouchDevice = inject('isTouchDevice', false)
+    const perPage = computed(() => isMediumScreen ? 15 : 5)
+    const normalizedAccountId = computed(() => {
+      const result = EntityID.parse(props.accountId) ?? EntityID.fromAddress(props.accountId)
+      return result !== null ? result.toString() : null
+    })
+
+    const collectionTableController = new CollectionTableController(useRouter(), props.tokenId, normalizedAccountId, perPage);
+    onMounted(() => {
+      collectionTableController.mount()
+    })
+    onBeforeUnmount(() => {
+      collectionTableController.unmount()
+    })
+
+    return {
+      isSmallScreen,
+      isTouchDevice,
+      collectionTableController,
+      normalizedAccountId,
+    }
+  }
+});
+
+</script>
+
+<style/>
diff --git a/src/pages/AccountDetails.vue b/src/pages/AccountDetails.vue
index b9fed9d9a..2e9112c2d 100644
--- a/src/pages/AccountDetails.vue
+++ b/src/pages/AccountDetails.vue
@@ -97,7 +97,7 @@
         <div class="columns h-is-property-text">
           <div class="column">
             <Property id="balance">
-              <template v-slot:name>{{ tokenBalances?.length ? 'Balances' : 'Balance' }}</template>
+              <template v-slot:name>{{ displayedBalances.length ? 'Balances' : 'Balance' }}</template>
               <template v-slot:value>
                 <div v-if="account" class="h-is-tertiary-text">
                   <HbarAmount v-bind:amount="hbarBalance" v-bind:show-extra="true" timestamp="0"/>
@@ -105,16 +105,14 @@
                 <div v-else-if="isInactiveEvmAddress" class="h-is-tertiary-text">
                   <HbarAmount v-bind:amount="0" v-bind:show-extra="true" timestamp="0"/>
                 </div>
+                <div v-for="b in displayedBalances" :key="b.token_id ?? undefined" class="h-is-tertiary-text">
+                    <TokenAmount v-bind:amount="BigInt(b.balance)" v-bind:show-extra="true" v-bind:token-id="b.token_id"/>
+                </div>
                 <div v-if="displayAllTokenLinks">
                   <router-link :to="{name: 'AccountBalances', params: {accountId: accountId}}">
-                    Show all token balances
+                    <span class="h-is-text-size-3 has-text-grey">Show all tokens</span>
                   </router-link>
                 </div>
-                <div v-else>
-                  <div v-for="b in tokenBalances ?? []" :key="b.token_id ?? undefined" class="h-is-tertiary-text">
-                    <TokenAmount v-bind:amount="BigInt(b.balance)" v-bind:show-extra="true" v-bind:token-id="b.token_id"/>
-                  </div>
-                </div>
                 <div v-if="elapsed && !isSmallScreen" class="has-text-grey has-text-right"> {{ elapsed }} ago</div>
               </template>
             </Property>
@@ -283,7 +281,7 @@
 
 <script lang="ts">
 
-import {computed, defineComponent, inject, onBeforeUnmount, onMounted, watch} from 'vue';
+import {computed, ComputedRef, defineComponent, inject, onBeforeUnmount, onMounted, watch} from 'vue';
 import KeyValue from "@/components/values/KeyValue.vue";
 import PlayPauseButton from "@/components/PlayPauseButton.vue";
 import TransactionTable from "@/components/transaction/TransactionTable.vue";
@@ -314,6 +312,7 @@ import EVMAddress from "@/components/values/EVMAddress.vue";
 import ApproveAllowanceSection from "@/components/allowances/ApproveAllowanceSection.vue";
 import InfoTooltip from "@/components/InfoTooltip.vue";
 import Copyable from "@/components/Copyable.vue";
+import {TokenBalance} from "@/schemas/HederaSchemas";
 
 const MAX_TOKEN_BALANCES = 10
 
@@ -413,10 +412,6 @@ export default defineComponent({
     const balanceAnalyzer = new BalanceAnalyzer(accountLocParser.accountId, 10000)
     onMounted(() => balanceAnalyzer.mount())
     onBeforeUnmount(() => balanceAnalyzer.unmount())
-    const displayAllTokenLinks = computed(() => {
-      const tokenCount = balanceAnalyzer.tokenBalances.value?.length ?? 0
-      return tokenCount > MAX_TOKEN_BALANCES
-    })
     const elapsed = computed(() => {
           let result: string | null
           if (balanceAnalyzer.balanceTimeStamp.value) {
@@ -435,6 +430,20 @@ export default defineComponent({
         }
     )
 
+    const displayedBalances: ComputedRef<TokenBalance[]> = computed(() => {
+        const result: TokenBalance[] = []
+        const allBalances = balanceAnalyzer.tokenBalances.value
+        for (let i = 0; i < allBalances.length && result.length < MAX_TOKEN_BALANCES; i++) {
+            if (allBalances[i].balance > 0) {
+                result.push(allBalances[i])
+            }
+        }
+        return result
+    })
+
+    const displayAllTokenLinks = computed(
+        () => displayedBalances.value.length < balanceAnalyzer.tokenBalances.value.length)
+
     //
     // contract
     //
@@ -500,7 +509,7 @@ export default defineComponent({
       ethereumAddress: accountLocParser.ethereumAddress,
       balanceTimeStamp: balanceAnalyzer.balanceTimeStamp,
       hbarBalance: balanceAnalyzer.hbarBalance,
-      tokenBalances: balanceAnalyzer.tokenBalances,
+      displayedBalances,
       balanceAnalyzer, // For testing purpose
       displayAllTokenLinks,
       elapsed,
diff --git a/src/pages/ContractDetails.vue b/src/pages/ContractDetails.vue
index 96fe2f4f2..0f02d83fe 100644
--- a/src/pages/ContractDetails.vue
+++ b/src/pages/ContractDetails.vue
@@ -68,20 +68,18 @@
 
       <template v-slot:leftContent>
             <Property id="balance">
-              <template v-slot:name>{{ tokens?.length ? 'Balances' : 'Balance' }}</template>
+              <template v-slot:name>{{ displayedBalances.length ? 'Balances' : 'Balance' }}</template>
               <template v-slot:value>
                 <div class="has-flex-direction-column">
                   <HbarAmount v-if="contract" :amount="balance" :show-extra="true" timestamp="0"/>
+                  <div v-for="t in displayedBalances" :key="t.token_id ?? undefined">
+                    <TokenAmount :amount="BigInt(t.balance)" :show-extra="true" :token-id="t.token_id"/>
+                  </div>
                   <div v-if="displayAllTokenLinks">
                     <router-link :to="{name: 'AccountBalances', params: {accountId: contractId}}">
-                      See all token balances
+                      <span class="h-is-text-size-3 has-text-grey">Show all tokens</span>
                     </router-link>
                   </div>
-                  <div v-else>
-                    <div v-for="t in tokens ?? []" :key="t.token_id ?? undefined">
-                      <TokenAmount :amount="BigInt(t.balance)" :show-extra="true" :token-id="t.token_id"/>
-                    </div>
-                  </div>
                 </div>
               </template>
             </Property>
@@ -311,9 +309,6 @@ export default defineComponent({
     const balance: ComputedRef<number|null>
         = computed(() => accountLookup.entity.value?.balance?.balance ?? null)
 
-    const tokens: ComputedRef<TokenBalance[]|null>
-        = computed(() => accountLookup.entity.value?.balance?.tokens ?? null)
-
     //
     // balanceCache
     //
@@ -321,11 +316,21 @@ export default defineComponent({
     const balanceAnalyzer = new BalanceAnalyzer(contractLocParser.contractId, 10000)
     onMounted(() => balanceAnalyzer.mount())
     onBeforeUnmount(() => balanceAnalyzer.unmount())
-    const displayAllTokenLinks = computed(() => {
-      const tokenCount = balanceAnalyzer.tokenBalances.value?.length ?? 0
-      return tokenCount > MAX_TOKEN_BALANCES
+
+    const displayedBalances: ComputedRef<TokenBalance[]> = computed(() => {
+      const result: TokenBalance[] = []
+      const allBalances = balanceAnalyzer.tokenBalances.value
+      for (let i = 0; i < allBalances.length && result.length < MAX_TOKEN_BALANCES; i++) {
+        if (allBalances[i].balance > 0) {
+          result.push(allBalances[i])
+        }
+      }
+      return result
     })
 
+    const displayAllTokenLinks = computed(
+        () => displayedBalances.value.length < balanceAnalyzer.tokenBalances.value.length)
+
     const accountRoute = computed(() => {
       return normalizedContractId.value !== null ?  routeManager.makeRouteToAccount(normalizedContractId.value) : null
     })
@@ -347,7 +352,7 @@ export default defineComponent({
       isTouchDevice,
       contract: contractLocParser.entity,
       balance,
-      tokens,
+      displayedBalances,
       ethereumAddress: contractLocParser.ethereumAddress,
       displayNonce,
       accountChecksum,
diff --git a/src/router.ts b/src/router.ts
index 674471f9e..eaa8fed7e 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -51,6 +51,7 @@ import AccountsWithKey from "@/pages/AccountsWithKey.vue";
 import AdminKeyDetails from "@/pages/AdminKeyDetails.vue";
 import AddressDetails from "@/pages/AddressDetails.vue";
 import RoutingSpec from "@/pages/RoutingSpec.vue";
+import AccountCollection from "@/pages/AccountCollection.vue"
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -140,6 +141,12 @@ const routes: Array<RouteRecordRaw> = [
     component: AccountBalances,
     props: true
   },
+  {
+    path: '/:network/accountcollection/:accountId/:tokenId',
+    name: 'AccountCollection',
+    component: AccountCollection,
+    props: true
+  },
   {
     path: '/:network/tokens',
     name: 'Tokens',
diff --git a/src/utils/RouteManager.ts b/src/utils/RouteManager.ts
index 6e4937ed2..f54e891d4 100644
--- a/src/utils/RouteManager.ts
+++ b/src/utils/RouteManager.ts
@@ -277,6 +277,13 @@ export class RouteManager {
         }
     }
 
+    public makeRouteToCollection(accountId: string, tokenId: string): RouteLocationRaw {
+        return {
+            name: 'AccountCollection',
+            params: {accountId: accountId, tokenId: tokenId, network: this.currentNetwork.value}
+        }
+    }
+
     public routeToSerial(tokenId: string, serialNumber: number, newTab = false): Promise<NavigationFailure | void | undefined> {
         let result: Promise<NavigationFailure | void | undefined>
         if (newTab) {
@@ -289,6 +296,18 @@ export class RouteManager {
         return result
     }
 
+    public routeToCollection(accountId: string, tokenId: string, newTab = false): Promise<NavigationFailure | void | undefined> {
+        let result: Promise<NavigationFailure | void | undefined>
+        if (newTab) {
+            const routeData = this.router.resolve(this.makeRouteToCollection(accountId, tokenId))
+            window.open(routeData.href, '_blank')
+            result = Promise.resolve()
+        } else {
+            result = this.router.push(this.makeRouteToCollection(accountId, tokenId))
+        }
+        return result
+    }
+
     //
     // Contract
     //
diff --git a/src/utils/cache/CacheUtils.ts b/src/utils/cache/CacheUtils.ts
index 0fac22c82..fdb32d190 100644
--- a/src/utils/cache/CacheUtils.ts
+++ b/src/utils/cache/CacheUtils.ts
@@ -47,6 +47,7 @@ import {SourcifyCache} from "@/utils/cache/SourcifyCache";
 import {TokenAssociationCache} from "@/utils/cache/TokenAssociationCache";
 import {MarketDataCache} from "@/components/dashboard/MarketDataCache";
 import { ContractResultsLogsByContractIdCache } from "@/utils/cache/ContractResultsLogsByContractIdCache"
+import {NftCollectionCache} from "@/utils/cache/NftCollectionCache";
 
 export class CacheUtils {
 
@@ -68,6 +69,7 @@ export class CacheUtils {
         HbarPriceCache.instance.clear()
         // IPFSCache.instance => no clear: we preserve it because IPFS content is valid for all networks
         NetworkCache.instance.clear()
+        NftCollectionCache.instance.clear()
         SourcifyCache.instance.clear()
         StakeCache.instance.clear()
         TokenAssociationCache.instance.clear()
diff --git a/src/utils/cache/NftCollectionCache.ts b/src/utils/cache/NftCollectionCache.ts
new file mode 100644
index 000000000..b8f0b8344
--- /dev/null
+++ b/src/utils/cache/NftCollectionCache.ts
@@ -0,0 +1,91 @@
+/*-
+ *
+ * Hedera Mirror Node Explorer
+ *
+ * Copyright (C) 2021 - 2024 Hedera Hashgraph, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {EntityCache} from "@/utils/cache/base/EntityCache";
+import {Nft, Nfts} from "@/schemas/HederaSchemas";
+import axios, {AxiosResponse} from "axios";
+
+export class NftCollectionCache extends EntityCache<string, NftCollectionInfo[]> {
+
+    public static readonly instance = new NftCollectionCache()
+
+    //
+    // Cache
+    //
+
+    protected async load(accountId: string): Promise<NftCollectionInfo[]> {
+        let result: NftCollectionInfo[] = []
+        let nextURL: string|null = "api/v1/accounts/" + accountId + "/nfts"
+        const params = {
+            limit: 25
+        }
+        while (nextURL !== null) {
+            const response: AxiosResponse<Nfts>
+                = await axios.get<Nfts>(nextURL, { params: params})
+            this.appendNfts(response.data.nfts ?? [], result)
+            nextURL = response.data.links?.next ?? null
+        }
+        return Promise.resolve(result)
+    }
+
+    //
+    // Private
+    //
+
+    private static readonly SAMPLE_COUNT = 10
+
+    private appendNfts(nfts: Nft[], result: NftCollectionInfo[]) {
+        for (const nft of nfts) {
+            this.appendNft(nft, result)
+        }
+    }
+
+    private appendNft(nft: Nft, result: NftCollectionInfo[]) {
+
+        //
+        // Nfts[] are returned in a specific order.
+        // See https://testnet.mirrornode.hedera.com/api/v1/docs/#/accounts/listNftByAccountId
+        // Logic below assumes this ordering
+        //
+
+        const lastCollection = result.length >= 1 ? result[result.length-1] : null
+        if (lastCollection !== null && lastCollection.tokenId === nft.token_id) {
+            lastCollection.collectionSize += 1
+            if (lastCollection.samples.length < NftCollectionCache.SAMPLE_COUNT) {
+                lastCollection.samples.push(nft)
+            }
+        } else {
+            result.push(new NftCollectionInfo(nft.token_id ?? null, nft))
+        }
+    }
+}
+
+export class NftCollectionInfo {
+
+    public readonly tokenId: string|null
+    public collectionSize: number
+    public samples: Nft[]
+
+    public constructor(tokenId: string|null, firstSample: Nft) {
+        this.tokenId = tokenId
+        this.collectionSize = 1
+        this.samples = [firstSample]
+    }
+}
\ No newline at end of file
diff --git a/tests/e2e/specs/AccountNavigation.cy.ts b/tests/e2e/specs/AccountNavigation.cy.ts
index dbea5d223..a4070b838 100644
--- a/tests/e2e/specs/AccountNavigation.cy.ts
+++ b/tests/e2e/specs/AccountNavigation.cy.ts
@@ -78,13 +78,14 @@ describe('Account Navigation', () => {
         cy.url().should('include', '/mainnet/account/')
 
         cy.get('#balance')
-            .contains('a', "Show all token balances")
+            .contains('a', "Show all tokens")
             .click()
 
         cy.url().should('include', 'accountbalances/' + accountId1)
-        cy.contains('Token Balances for Account ' + accountId1)
+        cy.contains('All Tokens Owned by ' + accountId1)
 
         cy.get('table')
+            .eq(0)
             .find('tbody tr')
             .should('have.length.at.least', 2)
             .eq(0)
diff --git a/tests/unit/account/AccountBalances.spec.ts b/tests/unit/account/AccountBalances.spec.ts
index 852d6b20f..57ec963fe 100644
--- a/tests/unit/account/AccountBalances.spec.ts
+++ b/tests/unit/account/AccountBalances.spec.ts
@@ -23,7 +23,7 @@ import {flushPromises, mount} from "@vue/test-utils"
 import router from "@/router";
 import axios from "axios";
 import {
-    SAMPLE_ASSOCIATED_TOKEN, SAMPLE_ASSOCIATED_TOKEN_2,
+    SAMPLE_ASSOCIATED_TOKEN, SAMPLE_ASSOCIATED_TOKEN_2, SAMPLE_NFTS, SAMPLE_NONFUNGIBLE,
     SAMPLE_TOKEN_ASSOCIATIONS
 } from "../Mocks";
 import MockAdapter from "axios-mock-adapter";
@@ -42,7 +42,7 @@ HMSF.forceUTC = true
 
 describe("AccountBalances.vue", () => {
 
-    test("all props", async () => {
+    test("tokens", async () => {
 
         await router.push("/") // To avoid "missing required param 'network'" error
 
@@ -70,13 +70,62 @@ describe("AccountBalances.vue", () => {
         // console.log(wrapper.find('thead').text())
         // console.log(wrapper.find('tbody').text())
 
-        expect(wrapper.find('thead').text()).toBe("Token Balance")
-        expect(wrapper.find('tbody').text()).toBe(
+        const balanceCard = wrapper.get("#balanceCard")
+        expect(balanceCard.find('thead').text()).toBe("Token Balance/Nb of NFTs")
+        expect(balanceCard.find('tbody').text()).toBe(
             "0.0.34332104" + "HSuite" + "0.0000" +
             "0.0.49292859" + "TokenA7" + "0.00000000")
 
+        const nftsCard = wrapper.get("#nftsCard")
+        expect(nftsCard.find('thead').text()).toBe("Token Owned")
+        expect(nftsCard.find('tbody').text()).toBe("")
+
+        wrapper.unmount()
+        await flushPromises()
+        mock.restore()
+    });
+
+    test("nfts", async () => {
+
+        await router.push("/") // To avoid "missing required param 'network'" error
+
+        const mock = new MockAdapter(axios);
+        const accountId = SAMPLE_NFTS.nfts[0].account_id
+        const tokenId = SAMPLE_NFTS.nfts[0].token_id
+
+        const matcher1 = `/api/v1/accounts/${accountId}/nfts`
+        mock.onGet(matcher1).reply(200, SAMPLE_NFTS)
+
+        const matcher2 = "/api/v1/tokens/" + tokenId
+        mock.onGet(matcher2).reply(200, SAMPLE_NONFUNGIBLE)
+
+        const matcher3 = "/api/v1/accounts/" + accountId + "/tokens"
+        mock.onGet(matcher3).reply(200, { tokens: []})
+
+        const wrapper = mount(AccountBalances, {
+            global: {
+                plugins: [router, Oruga]
+            },
+            props: {
+                accountId: accountId
+            },
+        });
+
+        await flushPromises()
+        // console.log(wrapper.find('thead').text())
+        // console.log(wrapper.find('tbody').text())
+
+        const balanceCard = wrapper.get("#balanceCard")
+        expect(balanceCard.find('thead').text()).toBe("Token Balance/Nb of NFTs")
+        expect(balanceCard.find('tbody').text()).toBe("")
+
+        const nftsCard = wrapper.get("#nftsCard")
+        expect(nftsCard.find('thead').text()).toBe("Token Owned")
+        expect(nftsCard.find('tbody').text()).toBe("0.0.748383Ħ Frens Kingdom2")
+
         wrapper.unmount()
         await flushPromises()
+        mock.restore()
     });
 
 });