diff --git a/.sqlx/query-05d7a87d04e669dc8ed1a1152be390d5abfdd0cf202744c65597aec1f2f03ff1.json b/.sqlx/query-05d7a87d04e669dc8ed1a1152be390d5abfdd0cf202744c65597aec1f2f03ff1.json
new file mode 100644
index 00000000..01fef587
--- /dev/null
+++ b/.sqlx/query-05d7a87d04e669dc8ed1a1152be390d5abfdd0cf202744c65597aec1f2f03ff1.json
@@ -0,0 +1,20 @@
+{
+  "db_name": "SQLite",
+  "query": "SELECT DISTINCT minter_did FROM nfts WHERE minter_did IS NOT NULL",
+  "describe": {
+    "columns": [
+      {
+        "name": "minter_did",
+        "ordinal": 0,
+        "type_info": "Blob"
+      }
+    ],
+    "parameters": {
+      "Right": 0
+    },
+    "nullable": [
+      true
+    ]
+  },
+  "hash": "05d7a87d04e669dc8ed1a1152be390d5abfdd0cf202744c65597aec1f2f03ff1"
+}
diff --git a/crates/sage-api/src/requests/data.rs b/crates/sage-api/src/requests/data.rs
index bc367f54..68051c52 100644
--- a/crates/sage-api/src/requests/data.rs
+++ b/crates/sage-api/src/requests/data.rs
@@ -76,6 +76,14 @@ pub struct GetDidsResponse {
     pub dids: Vec<DidRecord>,
 }
 
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, Type)]
+pub struct GetMinterDidIds {}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Type)]
+pub struct GetMinterDidIdsResponse {
+    pub did_ids: Vec<String>,
+}
+
 #[derive(Debug, Clone, Copy, Serialize, Deserialize, Type)]
 pub struct GetPendingTransactions {}
 
diff --git a/crates/sage-cli/src/router.rs b/crates/sage-cli/src/router.rs
index c002b846..8fef4db7 100644
--- a/crates/sage-cli/src/router.rs
+++ b/crates/sage-cli/src/router.rs
@@ -78,6 +78,7 @@ routes!(
     get_cats await: GetCats = "/get_cats",
     get_cat await: GetCat = "/get_cat",
     get_dids await: GetDids = "/get_dids",
+    get_minter_did_ids await: GetMinterDidIds = "/get_minter_did_ids",
     get_pending_transactions await: GetPendingTransactions = "/get_pending_transactions",
     get_transactions await: GetTransactions = "/get_transactions",
     get_transaction await: GetTransaction = "/get_transaction",
diff --git a/crates/sage-database/src/primitives/nfts.rs b/crates/sage-database/src/primitives/nfts.rs
index 384b117e..4dbb27b7 100644
--- a/crates/sage-database/src/primitives/nfts.rs
+++ b/crates/sage-database/src/primitives/nfts.rs
@@ -64,6 +64,10 @@ impl Database {
         fetch_nft_data(&self.pool, hash).await
     }
 
+    pub async fn distinct_minter_dids(&self) -> Result<Vec<Option<Bytes32>>> {
+        distinct_minter_dids(&self.pool).await
+    }
+
     pub async fn search_nfts(
         &self,
         params: NftSearchParams,
@@ -438,6 +442,16 @@ async fn insert_nft_data(
     Ok(())
 }
 
+async fn distinct_minter_dids(conn: impl SqliteExecutor<'_>) -> Result<Vec<Option<Bytes32>>> {
+    let rows = sqlx::query!("SELECT DISTINCT minter_did FROM nfts WHERE minter_did IS NOT NULL")
+        .fetch_all(conn)
+        .await?;
+
+    rows.into_iter()
+        .map(|row| row.minter_did.map(|bytes| to_bytes32(&bytes)).transpose())
+        .collect()
+}
+
 async fn fetch_nft_data(conn: impl SqliteExecutor<'_>, hash: Bytes32) -> Result<Option<NftData>> {
     let hash = hash.as_ref();
 
@@ -754,7 +768,10 @@ async fn search_nfts(
     }
 
     // Bind group parameters if present
-    if let Some(NftGroup::Collection(id) | NftGroup::MinterDid(id)) = &params.group {
+    //if let Some(NftGroup::Collection(id) | NftGroup::MinterDid(id)) = &params.group {
+    if let Some(NftGroup::Collection(id) | NftGroup::MinterDid(id) | NftGroup::OwnerDid(id)) =
+        &params.group
+    {
         query = query.bind(id.as_ref());
     }
 
diff --git a/crates/sage/src/endpoints/data.rs b/crates/sage/src/endpoints/data.rs
index 4da06db5..6b063e60 100644
--- a/crates/sage/src/endpoints/data.rs
+++ b/crates/sage/src/endpoints/data.rs
@@ -13,13 +13,14 @@ use hex_literal::hex;
 use sage_api::{
     AddressKind, Amount, AssetKind, CatRecord, CoinRecord, DerivationRecord, DidRecord, GetCat,
     GetCatCoins, GetCatCoinsResponse, GetCatResponse, GetCats, GetCatsResponse, GetDerivations,
-    GetDerivationsResponse, GetDids, GetDidsResponse, GetNft, GetNftCollection,
-    GetNftCollectionResponse, GetNftCollections, GetNftCollectionsResponse, GetNftData,
-    GetNftDataResponse, GetNftResponse, GetNfts, GetNftsResponse, GetPendingTransactions,
-    GetPendingTransactionsResponse, GetSyncStatus, GetSyncStatusResponse, GetTransaction,
-    GetTransactionResponse, GetTransactions, GetTransactionsResponse, GetXchCoins,
-    GetXchCoinsResponse, NftCollectionRecord, NftData, NftRecord, NftSortMode as ApiNftSortMode,
-    PendingTransactionRecord, TransactionCoin, TransactionRecord,
+    GetDerivationsResponse, GetDids, GetDidsResponse, GetMinterDidIds, GetMinterDidIdsResponse,
+    GetNft, GetNftCollection, GetNftCollectionResponse, GetNftCollections,
+    GetNftCollectionsResponse, GetNftData, GetNftDataResponse, GetNftResponse, GetNfts,
+    GetNftsResponse, GetPendingTransactions, GetPendingTransactionsResponse, GetSyncStatus,
+    GetSyncStatusResponse, GetTransaction, GetTransactionResponse, GetTransactions,
+    GetTransactionsResponse, GetXchCoins, GetXchCoinsResponse, NftCollectionRecord, NftData,
+    NftRecord, NftSortMode as ApiNftSortMode, PendingTransactionRecord, TransactionCoin,
+    TransactionRecord,
 };
 use sage_database::{
     CoinKind, CoinStateRow, Database, NftGroup, NftRow, NftSearchParams, NftSortMode,
@@ -244,6 +245,24 @@ impl Sage {
         Ok(GetDidsResponse { dids })
     }
 
+    pub async fn get_minter_did_ids(
+        &self,
+        _req: GetMinterDidIds,
+    ) -> Result<GetMinterDidIdsResponse> {
+        let wallet = self.wallet()?;
+
+        let did_ids = wallet
+            .db
+            .distinct_minter_dids()
+            .await?
+            .into_iter()
+            .filter_map(|did| did.map(|d| encode_address(d.to_bytes(), "did:chia:").ok()))
+            .flatten()
+            .collect();
+
+        Ok(GetMinterDidIdsResponse { did_ids })
+    }
+
     pub async fn get_pending_transactions(
         &self,
         _req: GetPendingTransactions,
diff --git a/package.json b/package.json
index 808c81d7..d520b099 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
     "react-hook-form": "^7.53.0",
     "react-imask": "^7.6.1",
     "react-router-dom": "^6.26.0",
+    "react-toastify": "^11.0.3",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "tauri-plugin-safe-area-insets": "^0.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9fb59215..1613f47f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -137,6 +137,9 @@ importers:
       react-router-dom:
         specifier: ^6.26.0
         version: 6.26.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-toastify:
+        specifier: ^11.0.3
+        version: 11.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       tailwind-merge:
         specifier: ^2.5.2
         version: 2.5.2
@@ -3246,6 +3249,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-toastify@11.0.3:
+    resolution: {integrity: sha512-cbPtHJPfc0sGqVwozBwaTrTu1ogB9+BLLjd4dDXd863qYLj7DGrQ2sg5RAChjFUB4yc3w8iXOtWcJqPK/6xqRQ==}
+    peerDependencies:
+      react: ^18 || ^19
+      react-dom: ^18 || ^19
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -6975,6 +6984,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
+  react-toastify@11.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 2.1.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
index d996c725..bcefa852 100644
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -376,6 +376,15 @@ pub async fn get_dids(state: State<'_, AppState>, req: GetDids) -> Result<GetDid
     Ok(state.lock().await.get_dids(req).await?)
 }
 
+#[command]
+#[specta]
+pub async fn get_minter_did_ids(
+    state: State<'_, AppState>,
+    req: GetMinterDidIds,
+) -> Result<GetMinterDidIdsResponse> {
+    Ok(state.lock().await.get_minter_did_ids(req).await?)
+}
+
 #[command]
 #[specta]
 pub async fn get_pending_transactions(
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 3d28b9e6..5ca914af 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -54,6 +54,7 @@ pub fn run() {
             commands::get_cats,
             commands::get_cat,
             commands::get_dids,
+            commands::get_minter_did_ids,
             commands::get_nft_collections,
             commands::get_nft_collection,
             commands::get_nfts,
diff --git a/src/App.tsx b/src/App.tsx
index 660c8ee6..ce1e2556 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,7 +23,6 @@ import useInitialization from './hooks/useInitialization';
 import { useWallet } from './hooks/useWallet';
 import { loadCatalog } from './i18n';
 import Addresses from './pages/Addresses';
-import Collection from './pages/Collection';
 import CreateProfile from './pages/CreateProfile';
 import CreateWallet from './pages/CreateWallet';
 import { DidList } from './pages/DidList';
@@ -47,6 +46,9 @@ import { ViewSavedOffer } from './pages/ViewSavedOffer';
 import Wallet from './pages/Wallet';
 import { fetchState } from './state';
 import QRScanner from './pages/QrScanner';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { Slide } from 'react-toastify';
 
 export interface DarkModeContext {
   toggle: () => void;
@@ -76,11 +78,11 @@ const router = createHashRouter(
       <Route path='/nfts' element={<Wallet />}>
         <Route path='' element={<NftList />} />
         <Route path=':launcher_id' element={<Nft />} />
+        <Route path='collections/:collection_id' element={<NftList />} />
+        <Route path='owners/:owner_did' element={<NftList />} />
+        <Route path='minters/:minter_did' element={<NftList />} />
         <Route path='mint' element={<MintNft />} />
       </Route>
-      <Route path='/collections' element={<Wallet />}>
-        <Route path=':collection_id' element={<Collection />} />
-      </Route>
       <Route path='/dids' element={<Wallet />}>
         <Route path='' element={<DidList />} />
         <Route path='create' element={<CreateProfile />} />
@@ -133,6 +135,25 @@ export default function App() {
           </ErrorProvider>
         </SafeAreaProvider>
       </DarkModeContext.Provider>
+      <ToastContainer
+        position='bottom-right'
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        theme={dark ? 'dark' : 'light'}
+        transition={Slide}
+        style={
+          {
+            '--toastify-toast-transition-timing': 'ease',
+            '--toastify-toast-transition-duration': '750ms',
+          } as React.CSSProperties
+        }
+      />
     </LanguageProvider>
   );
 }
diff --git a/src/bindings.ts b/src/bindings.ts
index 3cf74a43..854d8f77 100644
--- a/src/bindings.ts
+++ b/src/bindings.ts
@@ -116,6 +116,9 @@ async getCat(req: GetCat) : Promise<GetCatResponse> {
 async getDids(req: GetDids) : Promise<GetDidsResponse> {
     return await TAURI_INVOKE("get_dids", { req });
 },
+async getMinterDidIds(req: GetMinterDidIds) : Promise<GetMinterDidIdsResponse> {
+    return await TAURI_INVOKE("get_minter_did_ids", { req });
+},
 async getNftCollections(req: GetNftCollections) : Promise<GetNftCollectionsResponse> {
     return await TAURI_INVOKE("get_nft_collections", { req });
 },
@@ -293,6 +296,8 @@ export type GetKey = { fingerprint?: number | null }
 export type GetKeyResponse = { key: KeyInfo | null }
 export type GetKeys = Record<string, never>
 export type GetKeysResponse = { keys: KeyInfo[] }
+export type GetMinterDidIds = Record<string, never>
+export type GetMinterDidIdsResponse = { did_ids: string[] }
 export type GetNetworks = Record<string, never>
 export type GetNetworksResponse = { networks: { [key in string]: Network } }
 export type GetNft = { nft_id: string }
diff --git a/src/components/MultiSelectActions.tsx b/src/components/MultiSelectActions.tsx
index 7ca69599..76525d33 100644
--- a/src/components/MultiSelectActions.tsx
+++ b/src/components/MultiSelectActions.tsx
@@ -25,6 +25,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from './ui/dropdown-menu';
+import { toast } from 'react-toastify';
 
 export interface MultiSelectActionsProps {
   selected: string[];
@@ -37,16 +38,12 @@ export function MultiSelectActions({
 }: MultiSelectActionsProps) {
   const walletState = useWalletState();
   const offerState = useOfferState();
-
   const { addError } = useErrors();
-
   const selectedCount = selected.length;
-
   const [transferOpen, setTransferOpen] = useState(false);
   const [assignOpen, setAssignOpen] = useState(false);
   const [burnOpen, setBurnOpen] = useState(false);
   const [response, setResponse] = useState<TransactionResponse | null>(null);
-
   const onTransferSubmit = (address: string, fee: string) => {
     commands
       .transferNfts({
@@ -58,7 +55,6 @@ export function MultiSelectActions({
       .catch(addError)
       .finally(() => setTransferOpen(false));
   };
-
   const onAssignSubmit = (profile: string | null, fee: string) => {
     commands
       .assignNftsToDid({
@@ -70,7 +66,6 @@ export function MultiSelectActions({
       .catch(addError)
       .finally(() => setAssignOpen(false));
   };
-
   const onBurnSubmit = (fee: string) => {
     commands
       .transferNfts({
@@ -85,15 +80,25 @@ export function MultiSelectActions({
 
   return (
     <>
-      <div className='absolute flex justify-between items-center gap-3 bottom-6 w-60 px-5 p-3 rounded-lg shadow-md shadow-black/20 left-1/2 -translate-x-1/2 bg-white border border-neutral-200 dark:border-neutral-800 dark:bg-neutral-900'>
-        <span className='flex-shrink-0 text-neutral-900 dark:text-white'>
+      <div
+        className='absolute flex justify-between items-center gap-3 bottom-6 w-60 px-5 p-3 rounded-lg shadow-md shadow-black/20 left-1/2 -translate-x-1/2 bg-white border border-neutral-200 dark:border-neutral-800 dark:bg-neutral-900'
+        role='region'
+        aria-label={t`Selected NFTs actions`}
+      >
+        <span
+          className='flex-shrink-0 text-neutral-900 dark:text-white'
+          aria-live='polite'
+        >
           <Trans>{selectedCount} selected</Trans>
         </span>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button className='flex items-center gap-1'>
+            <Button
+              className='flex items-center gap-1'
+              aria-label={t`Actions for ${selectedCount} selected NFTs`}
+            >
               <Trans>Actions</Trans>
-              <ChevronDown className='h-5 w-5' />
+              <ChevronDown className='h-5 w-5' aria-hidden='true' />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align='center'>
@@ -104,8 +109,9 @@ export function MultiSelectActions({
                   e.stopPropagation();
                   setTransferOpen(true);
                 }}
+                aria-label={t`Transfer ${selectedCount} selected NFTs`}
               >
-                <SendIcon className='mr-2 h-4 w-4' />
+                <SendIcon className='mr-2 h-4 w-4' aria-hidden='true' />
                 <span>
                   <Trans>Transfer</Trans>
                 </span>
@@ -117,8 +123,9 @@ export function MultiSelectActions({
                   e.stopPropagation();
                   setAssignOpen(true);
                 }}
+                aria-label={t`Edit profile for ${selectedCount} selected NFTs`}
               >
-                <UserRoundPlus className='mr-2 h-4 w-4' />
+                <UserRoundPlus className='mr-2 h-4 w-4' aria-hidden='true' />
                 <span>
                   <Trans>Edit Profile</Trans>
                 </span>
@@ -130,8 +137,9 @@ export function MultiSelectActions({
                   e.stopPropagation();
                   setBurnOpen(true);
                 }}
+                aria-label={t`Burn ${selectedCount} selected NFTs`}
               >
-                <Flame className='mr-2 h-4 w-4' />
+                <Flame className='mr-2 h-4 w-4' aria-hidden='true' />
                 <span>
                   <Trans>Burn</Trans>
                 </span>
@@ -145,6 +153,7 @@ export function MultiSelectActions({
                   e.stopPropagation();
 
                   const newNfts = [...offerState.offered.nfts];
+                  let addedCount = 0;
 
                   for (const item of selected) {
                     if (newNfts.includes(item)) {
@@ -152,6 +161,7 @@ export function MultiSelectActions({
                     }
 
                     newNfts.push(item);
+                    addedCount++;
                   }
 
                   useOfferState.setState({
@@ -161,10 +171,18 @@ export function MultiSelectActions({
                     },
                   });
 
+                  const nfts = addedCount === 1 ? t`NFT` : t`NFTs`;
+                  const message =
+                    addedCount > 0
+                      ? t`Added ${addedCount} ${nfts} to offer`
+                      : t`Selected NFTs are already in the offer`;
+                  toast.success(message);
+
                   onConfirm();
                 }}
+                aria-label={t`Add ${selectedCount} selected NFTs to offer`}
               >
-                <HandCoins className='mr-2 h-4 w-4' />
+                <HandCoins className='mr-2 h-4 w-4' aria-hidden='true' />
                 <span>
                   <Trans>Add to Offer</Trans>
                 </span>
@@ -179,11 +197,14 @@ export function MultiSelectActions({
         open={transferOpen}
         setOpen={setTransferOpen}
         onSubmit={onTransferSubmit}
+        aria-describedby='bulk-transfer-description'
       >
-        <Trans>
-          This will bulk transfer {selectedCount} NFTs to another wallet. Are
-          you sure you want to proceed?
-        </Trans>
+        <p id='bulk-transfer-description'>
+          <Trans>
+            This will bulk transfer {selectedCount} NFTs to another wallet. Are
+            you sure you want to proceed?
+          </Trans>
+        </p>
       </TransferDialog>
 
       <AssignNftDialog
@@ -191,8 +212,11 @@ export function MultiSelectActions({
         open={assignOpen}
         setOpen={setAssignOpen}
         onSubmit={onAssignSubmit}
+        aria-describedby='bulk-assign-description'
       >
-        <Trans>This will bulk assign the NFTs to the selected profile.</Trans>
+        <p id='bulk-assign-description'>
+          <Trans>This will bulk assign the NFTs to the selected profile.</Trans>
+        </p>
       </AssignNftDialog>
 
       <FeeOnlyDialog
@@ -200,11 +224,14 @@ export function MultiSelectActions({
         open={burnOpen}
         setOpen={setBurnOpen}
         onSubmit={onBurnSubmit}
+        aria-describedby='bulk-burn-description'
       >
-        <Trans>
-          This will bulk burn {selectedCount} NFTs. This cannot be undone. Are
-          you sure you want to proceed?
-        </Trans>
+        <p id='bulk-burn-description'>
+          <Trans>
+            This will bulk burn {selectedCount} NFTs. This cannot be undone. Are
+            you sure you want to proceed?
+          </Trans>
+        </p>
       </FeeOnlyDialog>
 
       <ConfirmationDialog
diff --git a/src/components/NftCard.tsx b/src/components/NftCard.tsx
index 5ce35801..fe7def6d 100644
--- a/src/components/NftCard.tsx
+++ b/src/components/NftCard.tsx
@@ -26,7 +26,7 @@ import {
   SendIcon,
   UserRoundPlus,
 } from 'lucide-react';
-import { PropsWithChildren, useEffect, useState } from 'react';
+import { useEffect, useState, memo } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
@@ -69,6 +69,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from './ui/select';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './ui/tooltip';
+import { toast } from 'react-toastify';
 
 export interface NftProps {
   nft: NftRecord;
@@ -76,15 +83,17 @@ export interface NftProps {
   selectionState: [boolean, (value: boolean) => void] | null;
 }
 
-export function NftCardList({ children }: PropsWithChildren) {
-  return (
-    <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-6 mb-2'>
-      {children}
-    </div>
-  );
+interface NftCardProps {
+  nft: NftRecord;
+  updateNfts: () => void;
+  selectionState: [boolean, (value: boolean) => void] | null;
 }
 
-export function NftCard({ nft, updateNfts, selectionState }: NftProps) {
+const NftCardComponent = ({
+  nft,
+  updateNfts,
+  selectionState,
+}: NftCardProps) => {
   const walletState = useWalletState();
   const offerState = useOfferState();
   const navigate = useNavigate();
@@ -190,16 +199,38 @@ export function NftCard({ nft, updateNfts, selectionState }: NftProps) {
             selectionState[1](!selectionState[0]);
           }
         }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (selectionState === null) {
+              navigate(`/nfts/${nft.launcher_id}`);
+            } else {
+              selectionState[1](!selectionState[0]);
+            }
+          }
+        }}
+        role='button'
+        tabIndex={0}
+        aria-label={nft.name ? `NFT: ${nft.name}` : t`Unnamed NFT`}
       >
         <div className='overflow-hidden rounded-t-lg relative'>
-          <img
-            alt={nft.name ?? t`Unnamed`}
-            loading='lazy'
-            width='150'
-            height='150'
-            className='h-auto w-auto object-cover transition-all group-hover:scale-105 aspect-square color-[transparent]'
-            src={nftUri(data?.mime_type ?? null, data?.blob ?? null)}
-          />
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <img
+                  alt={nft.name ?? t`NFT artwork for unnamed NFT`}
+                  loading='lazy'
+                  width='150'
+                  height='150'
+                  className='h-auto w-auto object-cover transition-all group-hover:scale-105 aspect-square color-[transparent]'
+                  src={nftUri(data?.mime_type ?? null, data?.blob ?? null)}
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{nft.name ?? t`Unnamed`}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
 
           {selectionState !== null && (
             <Checkbox
@@ -210,12 +241,31 @@ export function NftCard({ nft, updateNfts, selectionState }: NftProps) {
         </div>
         <div className='border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50 text-md flex items-center justify-between rounded-b-lg p-2 pl-3'>
           <span className='truncate'>
-            <span className='font-medium leading-none truncate'>
-              {nft.name ?? t`Unnamed`}
-            </span>
-            <p className='text-xs text-muted-foreground truncate'>
-              {nft.collection_name ?? t`No collection`}
-            </p>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className='font-medium leading-none truncate block'>
+                    {nft.name ?? t`Unnamed`}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{nft.name ?? t`Unnamed`}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <p className='text-xs text-muted-foreground truncate'>
+                    {nft.collection_name ?? t`No collection`}
+                  </p>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{nft.collection_name ?? t`No collection`}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </span>
 
           <DropdownMenu>
@@ -295,7 +345,6 @@ export function NftCard({ nft, updateNfts, selectionState }: NftProps) {
                     e.stopPropagation();
 
                     const newNfts = [...offerState.offered.nfts];
-
                     newNfts.push(nft.launcher_id);
 
                     useOfferState.setState({
@@ -304,6 +353,8 @@ export function NftCard({ nft, updateNfts, selectionState }: NftProps) {
                         nfts: newNfts,
                       },
                     });
+
+                    toast.success(t`Added NFT to offer`);
                   }}
                   disabled={
                     !nft.created_height ||
@@ -340,7 +391,9 @@ export function NftCard({ nft, updateNfts, selectionState }: NftProps) {
                   onClick={(e) => {
                     e.stopPropagation();
                     writeText(nft.launcher_id);
+                    toast.success(t`NFT ID copied to clipboard`);
                   }}
+                  aria-label={t`Copy NFT ID to clipboard`}
                 >
                   <Copy className='mr-2 h-4 w-4' />
                   <span>
@@ -493,4 +546,13 @@ export function NftCard({ nft, updateNfts, selectionState }: NftProps) {
       />
     </>
   );
-}
+};
+
+export const NftCard = memo(NftCardComponent, (prevProps, nextProps) => {
+  // Only re-render if these props change
+  return (
+    prevProps.nft.launcher_id === nextProps.nft.launcher_id &&
+    prevProps.nft.visible === nextProps.nft.visible &&
+    prevProps.selectionState?.[0] === nextProps.selectionState?.[0]
+  );
+});
diff --git a/src/components/NftCardList.tsx b/src/components/NftCardList.tsx
new file mode 100644
index 00000000..521378ae
--- /dev/null
+++ b/src/components/NftCardList.tsx
@@ -0,0 +1,184 @@
+import { NftCard } from '@/components/NftCard';
+import { NftGroupCard } from '@/components/NftGroupCard';
+import { NftGroupMode } from '@/hooks/useNftParams';
+import { t } from '@lingui/core/macro';
+import { ReactNode, useCallback } from 'react';
+import {
+  NftCollectionRecord,
+  NftRecord,
+  DidRecord,
+  commands,
+  Error,
+} from '../bindings';
+
+interface NftCardListProps {
+  collectionId?: string;
+  ownerDid?: string;
+  minterDid?: string;
+  group?: NftGroupMode;
+  nfts: NftRecord[];
+  collections: NftCollectionRecord[];
+  dids: DidRecord[];
+  pageSize: number;
+  updateNfts: (page: number) => void;
+  page: number;
+  multiSelect?: boolean;
+  selected?: string[];
+  setSelected?: React.Dispatch<React.SetStateAction<string[]>>;
+  addError?: (error: Error) => void;
+  children?: ReactNode;
+}
+
+export function NftCardList({
+  collectionId,
+  ownerDid,
+  minterDid,
+  group,
+  nfts,
+  collections,
+  dids,
+  pageSize,
+  updateNfts,
+  page,
+  multiSelect = false,
+  selected = [],
+  setSelected,
+  addError,
+  children,
+}: NftCardListProps) {
+  const handleSelection = useCallback(
+    (id: string) => {
+      if (!multiSelect || !setSelected) return;
+
+      setSelected((prev: string[]) => {
+        const newSelected = [...prev];
+        const index = newSelected.indexOf(id);
+
+        if (index === -1) {
+          newSelected.push(id);
+        } else {
+          newSelected.splice(index, 1);
+        }
+
+        return newSelected;
+      });
+    },
+    [multiSelect, setSelected],
+  );
+
+  const renderContent = () => {
+    if (
+      !collectionId &&
+      !ownerDid &&
+      !minterDid &&
+      group === NftGroupMode.Collection
+    ) {
+      return (
+        <>
+          {collections.map((col, i) => (
+            <NftGroupCard
+              key={i}
+              type='collection'
+              item={col}
+              updateNfts={updateNfts}
+              page={page}
+              onToggleVisibility={() => {
+                commands
+                  .updateNft({
+                    nft_id: col.collection_id,
+                    visible: !col.visible,
+                  })
+                  .then(() => updateNfts(page))
+                  .catch(addError);
+              }}
+            />
+          ))}
+          {nfts.length < pageSize && (
+            <NftGroupCard
+              type='collection'
+              item={{
+                name: t`No Collection`,
+                icon: '',
+                did_id: 'Miscellaneous',
+                metadata_collection_id: 'Uncategorized NFTs',
+                collection_id: 'No collection',
+                visible: true,
+              }}
+              updateNfts={updateNfts}
+              page={page}
+            />
+          )}
+        </>
+      );
+    }
+
+    if (
+      !collectionId &&
+      !ownerDid &&
+      !minterDid &&
+      (group === NftGroupMode.OwnerDid || group === NftGroupMode.MinterDid)
+    ) {
+      return (
+        <>
+          {dids.map((did, i) => (
+            <NftGroupCard
+              key={i}
+              type='did'
+              groupMode={group}
+              item={did}
+              updateNfts={updateNfts}
+              page={page}
+            />
+          ))}
+          <NftGroupCard
+            type='did'
+            groupMode={group}
+            item={{
+              name:
+                group === NftGroupMode.OwnerDid
+                  ? t`Unassigned NFTs`
+                  : t`Unknown Minter`,
+              launcher_id: 'No did',
+              visible: true,
+              coin_id: 'No coin',
+              address: 'No address',
+              amount: 0,
+              created_height: 0,
+              create_transaction_id: 'No transaction',
+              recovery_hash: '',
+            }}
+            updateNfts={updateNfts}
+            page={page}
+          />
+        </>
+      );
+    }
+
+    return nfts.map((nft, i) => (
+      <NftCard
+        nft={nft}
+        key={i}
+        updateNfts={() => updateNfts(page)}
+        selectionState={
+          multiSelect
+            ? [
+                selected.includes(nft.launcher_id),
+                () => handleSelection(nft.launcher_id),
+              ]
+            : null
+        }
+      />
+    ));
+  };
+
+  return (
+    <div
+      className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-6 gap-2 md:gap-4 mt-6 mb-2'
+      role='grid'
+      aria-label={t`NFT Gallery`}
+    >
+      {renderContent()}
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/NftGroupCard.tsx b/src/components/NftGroupCard.tsx
new file mode 100644
index 00000000..fedc17b6
--- /dev/null
+++ b/src/components/NftGroupCard.tsx
@@ -0,0 +1,250 @@
+import { NftCollectionRecord, DidRecord } from '@/bindings';
+import { NftGroupMode } from '@/hooks/useNftParams';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  EyeIcon,
+  EyeOff,
+  MoreVerticalIcon,
+  UserIcon,
+  Paintbrush,
+  LibraryBig,
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from './ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import collectionImage from '@/images/collection.png';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './ui/tooltip';
+
+interface NftGroupCardProps {
+  type: 'collection' | 'did';
+  groupMode?: NftGroupMode;
+  item: NftCollectionRecord | DidRecord;
+  updateNfts: (page: number) => void;
+  page: number;
+  onToggleVisibility?: () => void;
+  isLoading?: boolean;
+  error?: Error;
+}
+
+export function NftGroupCard({
+  type,
+  groupMode,
+  item,
+  updateNfts,
+  page,
+  onToggleVisibility,
+  isLoading,
+  error,
+}: NftGroupCardProps) {
+  const navigate = useNavigate();
+  const isCollection = type === 'collection';
+  const allowToggleVisibility = false; //isCollection && onToggleVisibility; // not implemented yet
+  // Type guards to help TypeScript narrow the types
+  const isDidRecord = (
+    item: NftCollectionRecord | DidRecord,
+  ): item is DidRecord => {
+    return 'launcher_id' in item;
+  };
+
+  const isCollectionRecord = (
+    item: NftCollectionRecord | DidRecord,
+  ): item is NftCollectionRecord => {
+    return 'collection_id' in item;
+  };
+
+  const getLinkPath = () => {
+    if (isCollectionRecord(item)) {
+      return `/nfts/collections/${item.collection_id}`;
+    }
+    if (isDidRecord(item)) {
+      return groupMode === NftGroupMode.OwnerDid
+        ? `/nfts/owners/${item.launcher_id}`
+        : `/nfts/minters/${item.launcher_id}`;
+    }
+    return '';
+  };
+
+  const getDefaultName = () => {
+    if (isCollection) {
+      return t`Unnamed`;
+    }
+    return groupMode === NftGroupMode.OwnerDid ? (
+      <Trans>Untitled Profile</Trans>
+    ) : (
+      <Trans>Unknown Minter</Trans>
+    );
+  };
+
+  const getId = () => {
+    if (isCollectionRecord(item)) {
+      return item.collection_id;
+    }
+    if (isDidRecord(item)) {
+      return item.launcher_id;
+    }
+    return '';
+  };
+
+  if (error) {
+    return (
+      <div
+        className='border border-red-200 dark:border-red-800 rounded-lg p-4'
+        role='alert'
+      >
+        <p className='text-red-600 dark:text-red-400'>{error.message}</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div
+        className='border border-neutral-200 dark:border-neutral-800 rounded-lg p-4 animate-pulse'
+        aria-label={isCollection ? t`Loading collection` : t`Loading profile`}
+      >
+        <div className='aspect-square bg-neutral-100 dark:bg-neutral-800 rounded-t-lg' />
+        <div className='h-6 bg-neutral-100 dark:bg-neutral-800 rounded mt-4' />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      onClick={() => {
+        updateNfts(page);
+        navigate(getLinkPath());
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          updateNfts(page);
+          navigate(getLinkPath());
+        }
+      }}
+      role='button'
+      tabIndex={0}
+      className='cursor-pointer group border border-neutral-200 dark:border-neutral-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary'
+      aria-label={
+        isCollection
+          ? `Collection ${item.name || t`Unnamed`}`
+          : groupMode === NftGroupMode.OwnerDid
+            ? `Profile ${item.name || t`Untitled Profile`}`
+            : `Minter ${item.name || t`Unknown Minter`}`
+      }
+      aria-current={
+        window.location.pathname === getLinkPath() ? 'page' : undefined
+      }
+    >
+      <div className='overflow-hidden rounded-t-lg relative'>
+        {isCollection ? (
+          <div
+            className='bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center aspect-square'
+            aria-hidden='true'
+          >
+            <LibraryBig
+              className='h-12 w-12 text-neutral-400 dark:text-neutral-600'
+              aria-hidden='true'
+            />
+          </div>
+        ) : (
+          <div
+            className='bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center aspect-square'
+            aria-hidden='true'
+          >
+            {groupMode === NftGroupMode.OwnerDid ? (
+              <UserIcon
+                className='h-12 w-12 text-neutral-400 dark:text-neutral-600'
+                aria-hidden='true'
+              />
+            ) : (
+              <Paintbrush
+                className='h-12 w-12 text-neutral-400 dark:text-neutral-600'
+                aria-hidden='true'
+              />
+            )}
+          </div>
+        )}
+      </div>
+      <div className='border-t border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50 text-md flex items-center justify-between rounded-b-lg p-2 pl-3'>
+        <span className='truncate'>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <h3 className='font-medium leading-none truncate block'>
+                  {item.name ?? getDefaultName()}
+                </h3>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{item.name ?? getDefaultName()}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <p
+                  className='text-xs text-muted-foreground truncate'
+                  aria-label={`ID: ${getId()}`}
+                >
+                  {getId()}
+                </p>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{getId()}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </span>
+
+        {allowToggleVisibility && onToggleVisibility && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant='ghost'
+                size='icon'
+                onClick={(e) => e.stopPropagation()}
+                aria-label={
+                  item.visible ? t`Hide collection` : t`Show collection`
+                }
+                aria-expanded='false'
+              >
+                <MoreVerticalIcon className='h-5 w-5' aria-hidden='true' />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='end'>
+              <DropdownMenuGroup>
+                <DropdownMenuItem
+                  className='cursor-pointer'
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onToggleVisibility();
+                  }}
+                >
+                  {item.visible ? (
+                    <EyeOff className='mr-2 h-4 w-4' aria-hidden='true' />
+                  ) : (
+                    <EyeIcon className='mr-2 h-4 w-4' aria-hidden='true' />
+                  )}
+                  <span>{item.visible ? t`Hide` : t`Show`}</span>
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/NftOptions.tsx b/src/components/NftOptions.tsx
index 6da449e8..bc447843 100644
--- a/src/components/NftOptions.tsx
+++ b/src/components/NftOptions.tsx
@@ -1,4 +1,9 @@
-import { NftParams, NftView, SetNftParams } from '@/hooks/useNftParams';
+import {
+  NftParams,
+  NftSortMode,
+  NftGroupMode,
+  SetNftParams,
+} from '@/hooks/useNftParams';
 import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import {
@@ -10,6 +15,13 @@ import {
   EyeIcon,
   EyeOff,
   Images,
+  UserIcon,
+  SearchIcon,
+  XIcon,
+  LayoutGrid,
+  ArrowLeftIcon,
+  Paintbrush,
+  LibraryBigIcon,
 } from 'lucide-react';
 import { Button } from './ui/button';
 import {
@@ -20,6 +32,7 @@ import {
   DropdownMenuTrigger,
 } from './ui/dropdown-menu';
 import { Input } from './ui/input';
+import { useParams, useNavigate } from 'react-router-dom';
 
 export interface NftOptionsProps {
   isCollection?: boolean;
@@ -34,7 +47,7 @@ export interface NftOptionsProps {
 
 export function NftOptions({
   isCollection,
-  params: { page, view, showHidden, query },
+  params: { page, sort, group, showHidden, query },
   setParams,
   multiSelect,
   setMultiSelect,
@@ -42,18 +55,80 @@ export function NftOptions({
   isLoading,
   canLoadMore,
 }: NftOptionsProps) {
+  const { collection_id, owner_did, minter_did } = useParams();
+  const navigate = useNavigate();
+  const isFilteredView = Boolean(collection_id || owner_did || minter_did);
+  const allowSearch = group === NftGroupMode.None || isFilteredView;
+  const handleBack = () => {
+    if (collection_id) {
+      setParams({ group: NftGroupMode.Collection, page: 1 });
+    } else if (owner_did) {
+      setParams({ group: NftGroupMode.OwnerDid, page: 1 });
+    } else if (minter_did) {
+      setParams({ group: NftGroupMode.MinterDid, page: 1 });
+    }
+    navigate('/nfts');
+  };
+
+  // For sort button
+  const sortMode = sort === NftSortMode.Name ? 'name' : 'recent';
+  const sortLabel = t`Sort options: currently sorted by ${sortMode}`;
+
+  // For group button
+  const groupMode =
+    group === NftGroupMode.Collection
+      ? 'collections'
+      : group === NftGroupMode.OwnerDid
+        ? 'owners'
+        : group === NftGroupMode.MinterDid
+          ? 'minters'
+          : 'no grouping';
+  const groupLabel = t`Group options: currently grouped by ${groupMode}`;
+
   return (
-    <div className={`flex flex-col gap-4 ${className}`}>
-      <Input
-        type='search'
-        placeholder={t`Search NFTs...`}
-        value={query ?? ''}
-        onChange={(e) => setParams({ query: e.target.value, page: 1 })}
-        className='w-full'
-      />
+    <div
+      className={`flex flex-col gap-4 ${className}`}
+      role='toolbar'
+      aria-label={t`NFT filtering and sorting options`}
+    >
+      <div className='relative flex-1' role='search'>
+        <div className='relative'>
+          <SearchIcon
+            className='absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground'
+            aria-hidden='true'
+          />
+          <Input
+            value={query ?? ''}
+            aria-label={t`Search NFTs by name`}
+            title={t`Search NFTs by name`}
+            placeholder={t`Search NFTs by name`}
+            onChange={(e) => setParams({ query: e.target.value, page: 1 })}
+            className='w-full pl-8 pr-8'
+            disabled={!allowSearch}
+            aria-disabled={!allowSearch}
+          />
+        </div>
+        {query && (
+          <Button
+            variant='ghost'
+            size='icon'
+            title={t`Clear search`}
+            aria-label={t`Clear search`}
+            className='absolute right-0 top-0 h-full px-2 hover:bg-transparent'
+            onClick={() => setParams({ query: '', page: 1 })}
+            disabled={!allowSearch}
+          >
+            <XIcon className='h-4 w-4' aria-hidden='true' />
+          </Button>
+        )}
+      </div>
 
       <div className='flex items-center justify-between'>
-        <div className='flex gap-3 items-center'>
+        <div
+          className='flex gap-3 items-center'
+          role='navigation'
+          aria-label={t`Pagination`}
+        >
           <Button
             variant='outline'
             size='icon'
@@ -62,127 +137,233 @@ export function NftOptions({
               page > 1 &&
               setParams({ page: Math.max(page - 1, 1) })
             }
-            aria-disabled={page === 1 || isLoading}
+            disabled={page === 1 || isLoading}
             aria-label={t`Previous page`}
+            title={t`Previous page`}
           >
-            <ChevronLeftIcon className='h-4 w-4' />
+            <ChevronLeftIcon className='h-4 w-4' aria-hidden='true' />
           </Button>
-          <p className='text-sm text-muted-foreground font-medium w-[70px] text-center'>
-            Page {page}
+          <p
+            className='text-sm text-muted-foreground font-medium w-[70px] text-center'
+            aria-live='polite'
+            aria-atomic='true'
+          >
+            <Trans>Page {page}</Trans>
           </p>
           <Button
             variant='outline'
             size='icon'
             onClick={() => {
               if (!canLoadMore) return;
-
               if (!isLoading) setParams({ page: page + 1 });
             }}
-            aria-disabled={isLoading}
+            disabled={!canLoadMore || isLoading}
             aria-label={t`Next page`}
+            title={t`Next page`}
           >
-            <ChevronRightIcon className='h-4 w-4' />
+            <ChevronRightIcon className='h-4 w-4' aria-hidden='true' />
           </Button>
         </div>
 
-        <div className='flex gap-2 items-center'>
-          {view !== NftView.Collection && (
+        <div
+          className='flex gap-2 items-center'
+          role='toolbar'
+          aria-label={t`NFT view options`}
+        >
+          {isFilteredView && (
             <Button
               variant='outline'
               size='icon'
-              onClick={() => setMultiSelect(!multiSelect)}
-              aria-label={t`Toggle multi-select`}
+              onClick={handleBack}
+              aria-label={t`Back to groups`}
+              title={t`Back to groups`}
             >
-              <CopyPlus
-                className={`h-4 w-4 ${multiSelect ? 'text-green-600 dark:text-green-400' : ''}`}
-              />
+              <ArrowLeftIcon className='h-4 w-4' aria-hidden='true' />
             </Button>
           )}
 
-          <Button
-            variant='outline'
-            size='icon'
-            onClick={() => setParams({ showHidden: !showHidden })}
-            aria-label={t`Toggle hidden NFTs`}
-          >
-            {showHidden ? (
-              <EyeIcon className='h-4 w-4' />
-            ) : (
-              <EyeOff className='h-4 w-4' />
-            )}
-          </Button>
+          {(group === NftGroupMode.None || isFilteredView) && (
+            <>
+              <Button
+                variant='outline'
+                size='icon'
+                onClick={() => setMultiSelect(!multiSelect)}
+                aria-label={t`Toggle multi-select`}
+                title={t`Toggle multi-select`}
+              >
+                <CopyPlus
+                  className={`h-4 w-4 ${multiSelect ? 'text-green-600 dark:text-green-400' : ''}`}
+                  aria-hidden='true'
+                />
+              </Button>
 
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
               <Button
                 variant='outline'
                 size='icon'
-                aria-label={t`Sort options`}
+                onClick={() => setParams({ showHidden: !showHidden })}
+                aria-label={
+                  showHidden ? t`Hide hidden NFTs` : t`Show hidden NFTs`
+                }
+                aria-pressed={showHidden}
+                title={showHidden ? t`Hide hidden NFTs` : t`Show hidden NFTs`}
               >
-                {view === 'name' ? (
-                  <ArrowDownAz className='h-4 w-4' />
-                ) : view === 'recent' ? (
-                  <Clock2 className='h-4 w-4' />
+                {showHidden ? (
+                  <EyeIcon className='h-4 w-4' aria-hidden='true' />
                 ) : (
-                  <Images className='h-4 w-4' />
+                  <EyeOff className='h-4 w-4' aria-hidden='true' />
                 )}
               </Button>
-            </DropdownMenuTrigger>
 
-            <DropdownMenuContent align='end'>
-              <DropdownMenuGroup>
-                <DropdownMenuItem
-                  className='cursor-pointer'
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setParams({
-                      page: 1,
-                      view: NftView.Name,
-                    });
-                  }}
-                >
-                  <ArrowDownAz className='mr-2 h-4 w-4' />
-                  <span>
-                    <Trans>Sort Alphabetically</Trans>
-                  </span>
-                </DropdownMenuItem>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant='outline'
+                    size='icon'
+                    aria-label={sortLabel}
+                    title={sortLabel}
+                  >
+                    {sort === NftSortMode.Name ? (
+                      <ArrowDownAz className='h-4 w-4' aria-hidden='true' />
+                    ) : (
+                      <Clock2 className='h-4 w-4' aria-hidden='true' />
+                    )}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align='end'>
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem
+                      className='cursor-pointer'
+                      onClick={() =>
+                        setParams({ sort: NftSortMode.Name, page: 1 })
+                      }
+                      aria-label={t`Sort by name`}
+                    >
+                      <ArrowDownAz
+                        className='mr-2 h-4 w-4'
+                        aria-hidden='true'
+                      />
+                      <span>
+                        <Trans>Name</Trans>
+                      </span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      className='cursor-pointer'
+                      onClick={() =>
+                        setParams({ sort: NftSortMode.Recent, page: 1 })
+                      }
+                      aria-label={t`Sort by recent`}
+                    >
+                      <Clock2 className='mr-2 h-4 w-4' aria-hidden='true' />
+                      <span>
+                        <Trans>Recent</Trans>
+                      </span>
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </>
+          )}
 
-                <DropdownMenuItem
-                  className='cursor-pointer'
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setParams({
-                      page: 1,
-                      view: NftView.Recent,
-                    });
-                  }}
+          {!isCollection && !isFilteredView && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant='outline'
+                  size='icon'
+                  aria-label={groupLabel}
+                  title={groupLabel}
                 >
-                  <Clock2 className='mr-2 h-4 w-4' />
-                  <span>
-                    <Trans>Sort Recent</Trans>
-                  </span>
-                </DropdownMenuItem>
+                  {group === NftGroupMode.Collection ? (
+                    <LibraryBigIcon className='h-4 w-4' aria-hidden='true' />
+                  ) : group === NftGroupMode.OwnerDid ? (
+                    <UserIcon className='h-4 w-4' aria-hidden='true' />
+                  ) : group === NftGroupMode.MinterDid ? (
+                    <Paintbrush className='h-4 w-4' aria-hidden='true' />
+                  ) : (
+                    <LayoutGrid className='h-4 w-4' aria-hidden='true' />
+                  )}
+                </Button>
+              </DropdownMenuTrigger>
 
-                {!isCollection && (
+              <DropdownMenuContent align='end'>
+                <DropdownMenuGroup>
                   <DropdownMenuItem
                     className='cursor-pointer'
                     onClick={(e) => {
                       e.stopPropagation();
                       setParams({
                         page: 1,
-                        view: NftView.Collection,
+                        group: NftGroupMode.None,
                       });
                     }}
+                    aria-label={t`No Grouping`}
                   >
-                    <Images className='mr-2 h-4 w-4' />
+                    <LayoutGrid className='mr-2 h-4 w-4' aria-hidden='true' />
                     <span>
-                      <Trans>Group Collections</Trans>
+                      <Trans>No Grouping</Trans>
                     </span>
                   </DropdownMenuItem>
-                )}
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
+
+                  <DropdownMenuItem
+                    className='cursor-pointer'
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setParams({
+                        page: 1,
+                        group: NftGroupMode.Collection,
+                        query: '',
+                      });
+                    }}
+                    aria-label={t`Group by Collections`}
+                  >
+                    <LibraryBigIcon
+                      className='mr-2 h-4 w-4'
+                      aria-hidden='true'
+                    />
+                    <span>
+                      <Trans>Group by Collections</Trans>
+                    </span>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem
+                    className='cursor-pointer'
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setParams({
+                        page: 1,
+                        group: NftGroupMode.OwnerDid,
+                        query: '',
+                      });
+                    }}
+                    aria-label={t`Group by Owners`}
+                  >
+                    <UserIcon className='mr-2 h-4 w-4' aria-hidden='true' />
+                    <span>
+                      <Trans>Group by Owners</Trans>
+                    </span>
+                  </DropdownMenuItem>
+
+                  <DropdownMenuItem
+                    className='cursor-pointer'
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setParams({
+                        page: 1,
+                        group: NftGroupMode.MinterDid,
+                        query: '',
+                      });
+                    }}
+                    aria-label={t`Group by Minters`}
+                  >
+                    <Paintbrush className='mr-2 h-4 w-4' aria-hidden='true' />
+                    <span>
+                      <Trans>Group by Minters</Trans>
+                    </span>
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/NftPageTitle.tsx b/src/components/NftPageTitle.tsx
new file mode 100644
index 00000000..02d36b0a
--- /dev/null
+++ b/src/components/NftPageTitle.tsx
@@ -0,0 +1,65 @@
+import { t } from '@lingui/core/macro';
+import { NftCollectionRecord, DidRecord } from '../bindings';
+import { NftGroupMode } from '@/hooks/useNftParams';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+interface NftPageTitleProps {
+  collectionId?: string | null;
+  collection?: NftCollectionRecord | null;
+  ownerDid?: string | null;
+  owner?: DidRecord | null;
+  minterDid?: string | null;
+  group?: NftGroupMode;
+}
+
+function getGroupTitle(params: NftPageTitleProps) {
+  const { collectionId, collection, ownerDid, owner, minterDid, group } =
+    params;
+
+  if (collectionId) {
+    if (collection?.name === 'Uncategorized') return t`No Collection`;
+    return collection?.name ?? t`No Collection`;
+  }
+  if (ownerDid) {
+    return owner?.name ?? t`Untitled Profile`;
+  }
+  if (minterDid) {
+    if (minterDid === 'No did') return t`Unknown Minter`;
+    return minterDid;
+  }
+
+  switch (group) {
+    case NftGroupMode.Collection:
+      return t`Collections`;
+    case NftGroupMode.OwnerDid:
+      return t`Owner Profiles`;
+    case NftGroupMode.MinterDid:
+      return t`Minters`;
+    default:
+      return t`NFTs`;
+  }
+}
+
+export function NftPageTitle(props: NftPageTitleProps) {
+  const title = getGroupTitle(props);
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <h1 className='truncate max-w-[300px]' aria-label={title}>
+            {title}
+          </h1>
+        </TooltipTrigger>
+        <TooltipContent role='tooltip' aria-label={t`Full title: ${title}`}>
+          {title}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/src/components/selectors/NftSelector.tsx b/src/components/selectors/NftSelector.tsx
index 6ee3ab35..b76fa53d 100644
--- a/src/components/selectors/NftSelector.tsx
+++ b/src/components/selectors/NftSelector.tsx
@@ -150,6 +150,9 @@ export function NftSelector({
               ? (nftThumbnails[selectedNft.launcher_id] ?? defaultNftImage)
               : defaultNftImage
           }
+          alt={
+            selectedNft?.name ? `Image of ${selectedNft.name}` : 'No NFT name'
+          }
           className='w-8 h-8 rounded object-cover'
         />
         <div className='flex flex-col truncate text-left'>
diff --git a/src/components/selectors/TokenSelector.tsx b/src/components/selectors/TokenSelector.tsx
index f02581d6..fbcabe13 100644
--- a/src/components/selectors/TokenSelector.tsx
+++ b/src/components/selectors/TokenSelector.tsx
@@ -96,6 +96,11 @@ export function TokenSelector({
             alt={selectedToken.name ?? t`Unknown`}
             src={selectedToken.icon_url}
             className='w-8 h-8 rounded object-cover'
+            alt={
+              selectedToken?.name
+                ? `Image of ${selectedToken.name}`
+                : 'No token name'
+            }
           />
         )}
         <div className='flex flex-col truncate text-left'>
diff --git a/src/hooks/useNftData.ts b/src/hooks/useNftData.ts
new file mode 100644
index 00000000..e43e2ee1
--- /dev/null
+++ b/src/hooks/useNftData.ts
@@ -0,0 +1,216 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  commands,
+  events,
+  NftCollectionRecord,
+  NftRecord,
+  DidRecord,
+} from '../bindings';
+import { useErrors } from './useErrors';
+import { NftGroupMode, NftSortMode } from './useNftParams';
+
+interface NftDataParams {
+  pageSize: number;
+  sort: NftSortMode;
+  group: NftGroupMode;
+  showHidden: boolean;
+  query: string | null;
+  collectionId?: string;
+  ownerDid?: string;
+  minterDid?: string;
+  page: number;
+}
+
+interface NftDataState {
+  nfts: NftRecord[];
+  collections: NftCollectionRecord[];
+  dids: DidRecord[];
+  owner: DidRecord | null;
+  collection: NftCollectionRecord | null;
+  isLoading: boolean;
+}
+
+// Helper function moved from NftList
+function createDefaultDidRecord(name: string, launcherId: string): DidRecord {
+  return {
+    name,
+    launcher_id: launcherId,
+    visible: true,
+    coin_id: 'No coin',
+    address: 'No address',
+    amount: 0,
+    created_height: 0,
+    create_transaction_id: 'No transaction',
+    recovery_hash: '',
+  };
+}
+
+export function useNftData(params: NftDataParams) {
+  const { addError } = useErrors();
+  const [state, setState] = useState<NftDataState>({
+    nfts: [],
+    collections: [],
+    dids: [],
+    owner: null,
+    collection: null,
+    isLoading: false,
+  });
+
+  const updateNfts = useCallback(
+    async (page: number) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        if (
+          params.collectionId ||
+          params.ownerDid ||
+          params.minterDid ||
+          params.group === NftGroupMode.None
+        ) {
+          const queryParams = {
+            name: params.query || null,
+            collection_id:
+              params.collectionId === 'No collection'
+                ? 'none'
+                : (params.collectionId ?? null),
+            owner_did_id:
+              params.ownerDid === 'No did' ? 'none' : (params.ownerDid ?? null),
+            minter_did_id:
+              params.minterDid === 'No did'
+                ? 'none'
+                : (params.minterDid ?? null),
+            offset: (page - 1) * params.pageSize,
+            limit: params.pageSize,
+            sort_mode: params.sort,
+            include_hidden: params.showHidden,
+          };
+
+          const response = await commands.getNfts(queryParams);
+
+          const updates: Partial<NftDataState> = {
+            nfts: response.nfts,
+          };
+
+          if (params.collectionId) {
+            const collectionResponse = await commands.getNftCollection({
+              collection_id:
+                params.collectionId === 'No collection'
+                  ? null
+                  : params.collectionId,
+            });
+            updates.collection = collectionResponse.collection;
+          } else if (params.ownerDid) {
+            const didResponse = await commands.getDids({});
+            const foundDid = didResponse.dids.find(
+              (did) => did.launcher_id === params.ownerDid,
+            );
+            updates.owner =
+              foundDid || createDefaultDidRecord('Unassigned NFTs', 'No did');
+          } else if (params.minterDid) {
+            updates.owner = createDefaultDidRecord(
+              params.minterDid,
+              params.minterDid,
+            );
+          }
+
+          setState((prev) => ({ ...prev, ...updates }));
+        } else if (params.group === NftGroupMode.Collection) {
+          try {
+            const response = await commands.getNftCollections({
+              offset: (page - 1) * params.pageSize,
+              limit: params.pageSize,
+              include_hidden: params.showHidden,
+            });
+            setState((prev) => ({
+              ...prev,
+              collections: response.collections,
+            }));
+          } catch (error: any) {
+            setState((prev) => ({ ...prev, collections: [] }));
+            addError(error);
+          }
+        } else if (params.group === NftGroupMode.OwnerDid) {
+          try {
+            const response = await commands.getDids({});
+            setState((prev) => ({ ...prev, dids: response.dids }));
+          } catch (error: any) {
+            setState((prev) => ({ ...prev, dids: [] }));
+            addError(error);
+          }
+        } else if (params.group === NftGroupMode.MinterDid) {
+          try {
+            const uniqueMinterDids = await commands.getMinterDidIds({});
+            const minterDids: DidRecord[] = uniqueMinterDids.did_ids.map(
+              (did) =>
+                createDefaultDidRecord(
+                  `${did.replace('did:chia:', '').slice(0, 16)}...`,
+                  did,
+                ),
+            );
+            setState((prev) => ({ ...prev, dids: minterDids }));
+          } catch (error: any) {
+            setState((prev) => ({ ...prev, dids: [] }));
+            addError(error);
+          }
+        }
+      } catch (error: any) {
+        console.error('Error fetching NFTs:', error);
+        addError(error);
+      } finally {
+        setState((prev) => ({ ...prev, isLoading: false }));
+      }
+    },
+    [
+      params.pageSize,
+      params.showHidden,
+      params.sort,
+      params.group,
+      params.query,
+      params.collectionId,
+      params.ownerDid,
+      params.minterDid,
+      addError,
+    ],
+  );
+
+  // Clear state and fetch new data when params change
+  useEffect(() => {
+    setState((prev) => ({
+      ...prev,
+      nfts: [],
+      collections: [],
+      dids: [],
+      collection: null,
+      owner: null,
+    }));
+    updateNfts(params.page);
+  }, [
+    updateNfts,
+    params.collectionId,
+    params.ownerDid,
+    params.minterDid,
+    params.page,
+  ]);
+
+  // Listen for sync events
+  useEffect(() => {
+    const unlisten = events.syncEvent.listen((event) => {
+      const type = event.payload.type;
+      if (
+        type === 'coin_state' ||
+        type === 'puzzle_batch_synced' ||
+        type === 'nft_data'
+      ) {
+        updateNfts(params.page);
+      }
+    });
+
+    return () => {
+      unlisten.then((u) => u());
+    };
+  }, [updateNfts, params.page]);
+
+  return {
+    ...state,
+    updateNfts,
+  };
+}
diff --git a/src/hooks/useNftParams.ts b/src/hooks/useNftParams.ts
index f2bd364e..4c1699c7 100644
--- a/src/hooks/useNftParams.ts
+++ b/src/hooks/useNftParams.ts
@@ -1,79 +1,96 @@
 import { useSearchParams } from 'react-router-dom';
+import { useLocalStorage } from 'usehooks-ts';
+import { useCallback, useMemo } from 'react';
 
-export interface NftParams {
-  pageSize: number;
-  page: number;
-  view: NftView;
-  showHidden: boolean;
-  query: string;
-}
+const NFT_HIDDEN_STORAGE_KEY = 'sage-wallet-nft-hidden';
+const NFT_GROUP_STORAGE_KEY = 'sage-wallet-nft-group';
+const NFT_SORT_STORAGE_KEY = 'sage-wallet-nft-sort';
 
 export enum NftView {
   Name = 'name',
   Recent = 'recent',
   Collection = 'collection',
+  Did = 'did',
 }
 
-export function parseView(view: string): NftView {
-  switch (view) {
-    case 'name':
-      return NftView.Name;
-    case 'recent':
-      return NftView.Recent;
-    case 'collection':
-      return NftView.Collection;
-    default:
-      return NftView.Name;
-  }
+export enum NftSortMode {
+  Name = 'name',
+  Recent = 'recent',
 }
 
-export type SetNftParams = (params: Partial<NftParams>) => void;
+export enum NftGroupMode {
+  None = 'none',
+  Collection = 'collection',
+  OwnerDid = 'owner_did',
+  MinterDid = 'minter_did',
+}
 
-export function useNftParams(): [NftParams, SetNftParams] {
-  const [params, setParams] = useSearchParams();
+export interface NftParams {
+  pageSize: number;
+  page: number;
+  sort: NftSortMode;
+  group: NftGroupMode;
+  showHidden: boolean;
+  query: string | null;
+}
 
-  const pageSize = parseInt(params.get('pageSize') ?? '12');
-  const page = parseInt(params.get('page') ?? '1');
-  const view = parseView(params.get('view') ?? 'recent');
-  const showHidden = (params.get('showHidden') ?? 'false') === 'true';
-  const query = params.get('query') ?? '';
+export type SetNftParams = (params: Partial<NftParams>) => void;
 
-  const updateParams = ({
-    pageSize,
-    page,
-    view,
-    showHidden,
-    query,
-  }: Partial<NftParams>) => {
-    setParams(
-      (prev) => {
-        const next = new URLSearchParams(prev);
+export function useNftParams(): [NftParams, SetNftParams] {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [view, setView] = useLocalStorage<NftSortMode>(
+    NFT_SORT_STORAGE_KEY,
+    NftSortMode.Name,
+  );
+  const [showHidden, setShowHidden] = useLocalStorage<boolean>(
+    NFT_HIDDEN_STORAGE_KEY,
+    false,
+  );
+  const [group, setGroup] = useLocalStorage<NftGroupMode>(
+    NFT_GROUP_STORAGE_KEY,
+    NftGroupMode.None,
+  );
 
-        if (pageSize !== undefined) {
-          next.set('pageSize', pageSize.toString());
-        }
+  const params = useMemo(
+    () => ({
+      pageSize: 24,
+      page: Number(searchParams.get('page') || 1),
+      sort: view,
+      group,
+      showHidden,
+      query: searchParams.get('query'),
+    }),
+    [searchParams, view, group, showHidden],
+  );
 
-        if (page !== undefined) {
-          next.set('page', page.toString());
-        }
+  const setParams = useCallback(
+    (newParams: Partial<NftParams>) => {
+      const updatedParams = { ...params, ...newParams };
 
-        if (view !== undefined) {
-          next.set('view', view);
-        }
+      if (newParams.sort !== undefined) {
+        setView(newParams.sort);
+      }
 
-        if (showHidden !== undefined) {
-          next.set('showHidden', showHidden.toString());
-        }
+      if (newParams.showHidden !== undefined) {
+        setShowHidden(newParams.showHidden);
+      }
 
-        if (query !== undefined) {
-          next.set('query', query);
-        }
+      if (newParams.group !== undefined) {
+        setGroup(newParams.group);
+      }
 
-        return next;
-      },
-      { replace: true },
-    );
-  };
+      setSearchParams(
+        {
+          ...(updatedParams.page > 1 && {
+            page: updatedParams.page.toString(),
+          }),
+          ...(updatedParams.query && { query: updatedParams.query }),
+        },
+        { replace: true },
+      );
+    },
+    [params, setSearchParams, setView, setShowHidden, setGroup],
+  );
 
-  return [{ pageSize, page, view, showHidden, query }, updateParams];
+  return [params, setParams];
 }
diff --git a/src/images/profile.png b/src/images/profile.png
new file mode 100644
index 00000000..3442e69a
Binary files /dev/null and b/src/images/profile.png differ
diff --git a/src/locales/de-DE/messages.po b/src/locales/de-DE/messages.po
index 41dc3439..b135df0e 100644
--- a/src/locales/de-DE/messages.po
+++ b/src/locales/de-DE/messages.po
@@ -638,9 +638,22 @@ msgstr "Global"
 msgid "Go to wallet"
 msgstr "Zum Wallet gehen"
 
+#: src/components/NftOptions.tsx:249
+msgid "Group by Collections"
+msgstr ""
+
+#: src/components/NftOptions.tsx:265
+msgid "Group by Owners"
+msgstr ""
+
 #: src/components/NftOptions.tsx:179
-msgid "Group Collections"
-msgstr "Kollektionen gruppieren"
+#~ msgid "Group Collections"
+#~ msgstr "Kollektionen gruppieren"
+
+#: src/components/NftOptions.tsx:206
+#: src/components/NftOptions.tsx:207
+msgid "Group options"
+msgstr ""
 
 #: src/pages/Addresses.tsx:144
 msgid "Hardened addresses"
@@ -892,8 +905,9 @@ msgstr "Netzwerk ID"
 msgid "New Offer"
 msgstr "Neuer Offer"
 
-#: src/components/NftOptions.tsx:82
-#: src/components/CoinList.tsx:376
+#: src/components/NftOptions.tsx:109
+#: src/components/NftOptions.tsx:110
+#: src/components/CoinList.tsx:371
 #: src/components/AddressList.tsx:190
 msgid "Next page"
 msgstr "Nächste Seite"
@@ -911,7 +925,7 @@ msgstr "NFT optionen"
 msgid "NFT preview"
 msgstr "NFT Vorschau"
 
-#: src/pages/NftList.tsx:99
+#: src/pages/NftList.tsx:112
 #: src/components/Nav.tsx:46
 msgid "NFTs"
 msgstr "NFTs"
@@ -1049,8 +1063,9 @@ msgstr ""
 #~ msgid "Prevents the peer from being banned."
 #~ msgstr "Verhindert, dass der Peer verboten wird."
 
-#: src/components/NftOptions.tsx:66
-#: src/components/CoinList.tsx:367
+#: src/components/NftOptions.tsx:92
+#: src/components/NftOptions.tsx:93
+#: src/components/CoinList.tsx:362
 #: src/components/AddressList.tsx:181
 msgid "Previous page"
 msgstr "Vorherige Seite"
@@ -1075,6 +1090,10 @@ msgstr "Profil ist erforderlich"
 msgid "Profile name"
 msgstr "Profilname"
 
+#: src/pages/DidNfts.tsx:80
+msgid "Profile NFTs"
+msgstr ""
+
 #: src/pages/DidList.tsx:62
 #: src/components/Nav.tsx:53
 msgid "Profiles"
@@ -1186,8 +1205,9 @@ msgstr ""
 msgid "Search for a token"
 msgstr ""
 
-#: src/components/NftOptions.tsx:49
-msgid "Search NFTs..."
+#: src/components/NftOptions.tsx:61
+#: src/components/NftOptions.tsx:62
+msgid "Search NFTs"
 msgstr ""
 
 #: src/pages/TokenList.tsx:164
@@ -1290,7 +1310,7 @@ msgstr "Nach Guthaben sortieren"
 msgid "Sort options"
 msgstr "Sortieroptionen"
 
-#: src/components/NftOptions.tsx:162
+#: src/components/NftOptions.tsx:177
 msgid "Sort Recent"
 msgstr "Nach Neuestem sortieren"
 
@@ -1462,11 +1482,13 @@ msgstr "Ticker"
 msgid "Ticker is required"
 msgstr "Ticker ist erforderlich"
 
-#: src/components/NftOptions.tsx:106
+#: src/components/NftOptions.tsx:190
+#: src/components/NftOptions.tsx:191
 msgid "Toggle hidden NFTs"
 msgstr "Versteckte NFTs umschalten"
 
-#: src/components/NftOptions.tsx:94
+#: src/components/NftOptions.tsx:123
+#: src/components/NftOptions.tsx:124
 msgid "Toggle multi-select"
 msgstr "Mehrfachauswahl umschalten"
 
@@ -1523,12 +1545,12 @@ msgstr "Profil transferieren"
 #~ msgid "Unassign Profile"
 #~ msgstr "Profil nicht mehr zuweisen"
 
-#: src/pages/Transactions.tsx:289
-#: src/pages/Transactions.tsx:311
-#: src/pages/Transactions.tsx:315
-#: src/pages/Transaction.tsx:136
-#: src/pages/Transaction.tsx:160
-#: src/pages/Transaction.tsx:166
+#: src/pages/DidNfts.tsx:80
+msgid "Unassigned NFTs"
+msgstr ""
+
+#: src/pages/Transactions.tsx:297
+#: src/pages/Transaction.tsx:149
 #: src/pages/Collection.tsx:92
 #: src/components/OfferSummaryCard.tsx:81
 #: src/components/OfferSummaryCard.tsx:92
@@ -1564,9 +1586,10 @@ msgstr ""
 msgid "Unknown NFT"
 msgstr "Unbekanntes NFT"
 
-#: src/pages/NftList.tsx:203
-#: src/pages/NftList.tsx:214
-#: src/components/OfferCard.tsx:198
+#: src/pages/NftList.tsx:239
+#: src/pages/NftList.tsx:250
+#: src/pages/NftList.tsx:303
+#: src/components/OfferCard.tsx:177
 #: src/components/NftCard.tsx:196
 #: src/components/NftCard.tsx:214
 #: src/components/ConfirmationDialog.tsx:508
@@ -1574,9 +1597,13 @@ msgstr "Unbekanntes NFT"
 msgid "Unnamed"
 msgstr "Unbenannt"
 
-#: src/components/CoinList.tsx:223
-#: src/components/CoinList.tsx:246
-#: src/components/CoinList.tsx:286
+#: src/pages/NftList.tsx:314
+msgid "Unnamed Profile"
+msgstr ""
+
+#: src/components/CoinList.tsx:218
+#: src/components/CoinList.tsx:241
+#: src/components/CoinList.tsx:281
 msgid "Unspent"
 msgstr "Nicht ausgegeben"
 
diff --git a/src/locales/en-US/messages.po b/src/locales/en-US/messages.po
index b44d700f..0b88d07a 100644
--- a/src/locales/en-US/messages.po
+++ b/src/locales/en-US/messages.po
@@ -638,9 +638,22 @@ msgstr "Global"
 msgid "Go to wallet"
 msgstr "Go to wallet"
 
+#: src/components/NftOptions.tsx:249
+msgid "Group by Collections"
+msgstr "Group by Collections"
+
+#: src/components/NftOptions.tsx:265
+msgid "Group by Owners"
+msgstr "Group by Owners"
+
 #: src/components/NftOptions.tsx:179
-msgid "Group Collections"
-msgstr "Group Collections"
+#~ msgid "Group Collections"
+#~ msgstr "Group Collections"
+
+#: src/components/NftOptions.tsx:206
+#: src/components/NftOptions.tsx:207
+msgid "Group options"
+msgstr "Group options"
 
 #: src/pages/Addresses.tsx:144
 msgid "Hardened addresses"
@@ -892,8 +905,9 @@ msgstr "Network ID"
 msgid "New Offer"
 msgstr "New Offer"
 
-#: src/components/NftOptions.tsx:82
-#: src/components/CoinList.tsx:376
+#: src/components/NftOptions.tsx:109
+#: src/components/NftOptions.tsx:110
+#: src/components/CoinList.tsx:371
 #: src/components/AddressList.tsx:190
 msgid "Next page"
 msgstr "Next page"
@@ -911,7 +925,7 @@ msgstr "NFT options"
 msgid "NFT preview"
 msgstr "NFT preview"
 
-#: src/pages/NftList.tsx:99
+#: src/pages/NftList.tsx:112
 #: src/components/Nav.tsx:46
 msgid "NFTs"
 msgstr "NFTs"
@@ -1049,8 +1063,9 @@ msgstr "Position the QR code within the frame"
 #~ msgid "Prevents the peer from being banned."
 #~ msgstr "Prevents the peer from being banned."
 
-#: src/components/NftOptions.tsx:66
-#: src/components/CoinList.tsx:367
+#: src/components/NftOptions.tsx:92
+#: src/components/NftOptions.tsx:93
+#: src/components/CoinList.tsx:362
 #: src/components/AddressList.tsx:181
 msgid "Previous page"
 msgstr "Previous page"
@@ -1075,6 +1090,10 @@ msgstr "Profile is required"
 msgid "Profile name"
 msgstr "Profile name"
 
+#: src/pages/DidNfts.tsx:80
+msgid "Profile NFTs"
+msgstr "Profile NFTs"
+
 #: src/pages/DidList.tsx:62
 #: src/components/Nav.tsx:53
 msgid "Profiles"
@@ -1186,9 +1205,14 @@ msgstr "Scan QR Code"
 msgid "Search for a token"
 msgstr "Search for a token"
 
+#: src/components/NftOptions.tsx:61
+#: src/components/NftOptions.tsx:62
+msgid "Search NFTs"
+msgstr "Search NFTs"
+
 #: src/components/NftOptions.tsx:49
-msgid "Search NFTs..."
-msgstr "Search NFTs..."
+#~ msgid "Search NFTs..."
+#~ msgstr "Search NFTs..."
 
 #: src/pages/TokenList.tsx:164
 msgid "Search tokens..."
@@ -1290,7 +1314,7 @@ msgstr "Sort by Balance"
 msgid "Sort options"
 msgstr "Sort options"
 
-#: src/components/NftOptions.tsx:162
+#: src/components/NftOptions.tsx:177
 msgid "Sort Recent"
 msgstr "Sort Recent"
 
@@ -1462,11 +1486,13 @@ msgstr "Ticker"
 msgid "Ticker is required"
 msgstr "Ticker is required"
 
-#: src/components/NftOptions.tsx:106
+#: src/components/NftOptions.tsx:190
+#: src/components/NftOptions.tsx:191
 msgid "Toggle hidden NFTs"
 msgstr "Toggle hidden NFTs"
 
-#: src/components/NftOptions.tsx:94
+#: src/components/NftOptions.tsx:123
+#: src/components/NftOptions.tsx:124
 msgid "Toggle multi-select"
 msgstr "Toggle multi-select"
 
@@ -1523,12 +1549,12 @@ msgstr "Transfer Profile"
 #~ msgid "Unassign Profile"
 #~ msgstr "Unassign Profile"
 
-#: src/pages/Transactions.tsx:289
-#: src/pages/Transactions.tsx:311
-#: src/pages/Transactions.tsx:315
-#: src/pages/Transaction.tsx:136
-#: src/pages/Transaction.tsx:160
-#: src/pages/Transaction.tsx:166
+#: src/pages/DidNfts.tsx:80
+msgid "Unassigned NFTs"
+msgstr "Unassigned NFTs"
+
+#: src/pages/Transactions.tsx:297
+#: src/pages/Transaction.tsx:149
 #: src/pages/Collection.tsx:92
 #: src/components/OfferSummaryCard.tsx:81
 #: src/components/OfferSummaryCard.tsx:92
@@ -1564,9 +1590,10 @@ msgstr "Unknown CAT"
 msgid "Unknown NFT"
 msgstr "Unknown NFT"
 
-#: src/pages/NftList.tsx:203
-#: src/pages/NftList.tsx:214
-#: src/components/OfferCard.tsx:198
+#: src/pages/NftList.tsx:239
+#: src/pages/NftList.tsx:250
+#: src/pages/NftList.tsx:303
+#: src/components/OfferCard.tsx:177
 #: src/components/NftCard.tsx:196
 #: src/components/NftCard.tsx:214
 #: src/components/ConfirmationDialog.tsx:508
@@ -1574,9 +1601,13 @@ msgstr "Unknown NFT"
 msgid "Unnamed"
 msgstr "Unnamed"
 
-#: src/components/CoinList.tsx:223
-#: src/components/CoinList.tsx:246
-#: src/components/CoinList.tsx:286
+#: src/pages/NftList.tsx:314
+msgid "Unnamed Profile"
+msgstr "Unnamed Profile"
+
+#: src/components/CoinList.tsx:218
+#: src/components/CoinList.tsx:241
+#: src/components/CoinList.tsx:281
 msgid "Unspent"
 msgstr "Unspent"
 
diff --git a/src/locales/zh-CN/messages.po b/src/locales/zh-CN/messages.po
index 35d8f726..e91150da 100644
--- a/src/locales/zh-CN/messages.po
+++ b/src/locales/zh-CN/messages.po
@@ -636,9 +636,22 @@ msgstr "全局"
 msgid "Go to wallet"
 msgstr "前往钱包"
 
+#: src/components/NftOptions.tsx:249
+msgid "Group by Collections"
+msgstr ""
+
+#: src/components/NftOptions.tsx:265
+msgid "Group by Owners"
+msgstr ""
+
 #: src/components/NftOptions.tsx:179
-msgid "Group Collections"
-msgstr "分组集合"
+#~ msgid "Group Collections"
+#~ msgstr "分组集合"
+
+#: src/components/NftOptions.tsx:206
+#: src/components/NftOptions.tsx:207
+msgid "Group options"
+msgstr ""
 
 #: src/pages/Addresses.tsx:144
 msgid "Hardened addresses"
@@ -890,8 +903,9 @@ msgstr "网络ID"
 msgid "New Offer"
 msgstr "新报价"
 
-#: src/components/NftOptions.tsx:82
-#: src/components/CoinList.tsx:376
+#: src/components/NftOptions.tsx:109
+#: src/components/NftOptions.tsx:110
+#: src/components/CoinList.tsx:371
 #: src/components/AddressList.tsx:190
 msgid "Next page"
 msgstr "下一页"
@@ -909,7 +923,7 @@ msgstr "NFT选项"
 msgid "NFT preview"
 msgstr "NFT预览"
 
-#: src/pages/NftList.tsx:99
+#: src/pages/NftList.tsx:112
 #: src/components/Nav.tsx:46
 msgid "NFTs"
 msgstr "NFT"
@@ -1046,8 +1060,9 @@ msgstr ""
 #~ msgid "Prevents the peer from being banned."
 #~ msgstr "防止该节点被封禁."
 
-#: src/components/NftOptions.tsx:66
-#: src/components/CoinList.tsx:367
+#: src/components/NftOptions.tsx:92
+#: src/components/NftOptions.tsx:93
+#: src/components/CoinList.tsx:362
 #: src/components/AddressList.tsx:181
 msgid "Previous page"
 msgstr "上一页"
@@ -1072,6 +1087,10 @@ msgstr "需提供个人资料"
 msgid "Profile name"
 msgstr "个人资料名称"
 
+#: src/pages/DidNfts.tsx:80
+msgid "Profile NFTs"
+msgstr ""
+
 #: src/pages/DidList.tsx:62
 #: src/components/Nav.tsx:53
 msgid "Profiles"
@@ -1183,8 +1202,9 @@ msgstr ""
 msgid "Search for a token"
 msgstr ""
 
-#: src/components/NftOptions.tsx:49
-msgid "Search NFTs..."
+#: src/components/NftOptions.tsx:61
+#: src/components/NftOptions.tsx:62
+msgid "Search NFTs"
 msgstr ""
 
 #: src/pages/TokenList.tsx:164
@@ -1287,7 +1307,7 @@ msgstr "按余额排序"
 msgid "Sort options"
 msgstr "排序选项"
 
-#: src/components/NftOptions.tsx:162
+#: src/components/NftOptions.tsx:177
 msgid "Sort Recent"
 msgstr "按最近排序"
 
@@ -1457,11 +1477,13 @@ msgstr "简称"
 msgid "Ticker is required"
 msgstr "需提供简称"
 
-#: src/components/NftOptions.tsx:106
+#: src/components/NftOptions.tsx:190
+#: src/components/NftOptions.tsx:191
 msgid "Toggle hidden NFTs"
 msgstr "切换隐藏的NFT"
 
-#: src/components/NftOptions.tsx:94
+#: src/components/NftOptions.tsx:123
+#: src/components/NftOptions.tsx:124
 msgid "Toggle multi-select"
 msgstr "切换多重选择"
 
@@ -1517,12 +1539,12 @@ msgstr "转移个人资料"
 #~ msgid "Unassign Profile"
 #~ msgstr "取消分配个人资料"
 
-#: src/pages/Transactions.tsx:289
-#: src/pages/Transactions.tsx:311
-#: src/pages/Transactions.tsx:315
-#: src/pages/Transaction.tsx:136
-#: src/pages/Transaction.tsx:160
-#: src/pages/Transaction.tsx:166
+#: src/pages/DidNfts.tsx:80
+msgid "Unassigned NFTs"
+msgstr ""
+
+#: src/pages/Transactions.tsx:297
+#: src/pages/Transaction.tsx:149
 #: src/pages/Collection.tsx:92
 #: src/components/OfferSummaryCard.tsx:81
 #: src/components/OfferSummaryCard.tsx:92
@@ -1558,9 +1580,10 @@ msgstr ""
 msgid "Unknown NFT"
 msgstr "未知NFT"
 
-#: src/pages/NftList.tsx:203
-#: src/pages/NftList.tsx:214
-#: src/components/OfferCard.tsx:198
+#: src/pages/NftList.tsx:239
+#: src/pages/NftList.tsx:250
+#: src/pages/NftList.tsx:303
+#: src/components/OfferCard.tsx:177
 #: src/components/NftCard.tsx:196
 #: src/components/NftCard.tsx:214
 #: src/components/ConfirmationDialog.tsx:508
@@ -1568,9 +1591,13 @@ msgstr "未知NFT"
 msgid "Unnamed"
 msgstr "未命名"
 
-#: src/components/CoinList.tsx:223
-#: src/components/CoinList.tsx:246
-#: src/components/CoinList.tsx:286
+#: src/pages/NftList.tsx:314
+msgid "Unnamed Profile"
+msgstr ""
+
+#: src/components/CoinList.tsx:218
+#: src/components/CoinList.tsx:241
+#: src/components/CoinList.tsx:281
 msgid "Unspent"
 msgstr "未花费"
 
diff --git a/src/pages/Collection.tsx b/src/pages/Collection.tsx
deleted file mode 100644
index 9460c70f..00000000
--- a/src/pages/Collection.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { commands, events, NftCollectionRecord, NftRecord } from '@/bindings';
-import Container from '@/components/Container';
-import Header from '@/components/Header';
-import { MultiSelectActions } from '@/components/MultiSelectActions';
-import { NftCard, NftCardList } from '@/components/NftCard';
-import { NftOptions } from '@/components/NftOptions';
-import { ReceiveAddress } from '@/components/ReceiveAddress';
-import { useErrors } from '@/hooks/useErrors';
-import { NftView, useNftParams } from '@/hooks/useNftParams';
-import { t } from '@lingui/core/macro';
-import { useCallback, useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-
-export default function Collection() {
-  const { addError } = useErrors();
-  const { collection_id: collectionId } = useParams();
-
-  const [params, setParams] = useNftParams();
-  const { pageSize, page, view, showHidden, query } = params;
-
-  const [collection, setCollection] = useState<NftCollectionRecord | null>(
-    null,
-  );
-  const [nfts, setNfts] = useState<NftRecord[]>([]);
-  const [multiSelect, setMultiSelect] = useState(false);
-  const [selected, setSelected] = useState<string[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const updateNfts = useCallback(
-    async (page: number) => {
-      if (view === NftView.Collection) return;
-
-      setIsLoading(true);
-      try {
-        await commands
-          .getNfts({
-            collection_id:
-              collectionId === 'No collection'
-                ? 'none'
-                : (collectionId ?? null),
-            name: query || null,
-            offset: (page - 1) * pageSize,
-            limit: pageSize,
-            sort_mode: view,
-            include_hidden: showHidden,
-          })
-          .then((data) => setNfts(data.nfts))
-          .catch(addError);
-
-        await commands
-          .getNftCollection({
-            collection_id:
-              collectionId === 'No collection' ? null : (collectionId ?? null),
-          })
-          .then((data) => setCollection(data.collection))
-          .catch(addError);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [collectionId, pageSize, showHidden, view, query, addError],
-  );
-
-  useEffect(() => {
-    updateNfts(1);
-  }, [updateNfts]);
-
-  useEffect(() => {
-    const unlisten = events.syncEvent.listen((event) => {
-      const type = event.payload.type;
-
-      if (
-        type === 'coin_state' ||
-        type === 'puzzle_batch_synced' ||
-        type === 'nft_data'
-      ) {
-        updateNfts(page);
-      }
-    });
-
-    return () => {
-      unlisten.then((u) => u());
-    };
-  }, [updateNfts, page]);
-
-  useEffect(() => {
-    updateNfts(page);
-  }, [updateNfts, page]);
-
-  return (
-    <>
-      <Header title={`${collection?.name ?? t`Unknown`} NFTs`}>
-        <ReceiveAddress />
-      </Header>
-
-      <Container>
-        <NftOptions
-          isCollection
-          params={params}
-          setParams={setParams}
-          multiSelect={multiSelect}
-          setMultiSelect={(value) => {
-            setMultiSelect(value);
-            setSelected([]);
-          }}
-          isLoading={isLoading}
-          canLoadMore={nfts.length === pageSize}
-        />
-
-        <NftCardList>
-          {nfts.map((nft, i) => (
-            <NftCard
-              nft={nft}
-              key={i}
-              updateNfts={() => updateNfts(page)}
-              selectionState={
-                multiSelect
-                  ? [
-                      selected.includes(nft.launcher_id),
-                      (value) => {
-                        if (value && !selected.includes(nft.launcher_id)) {
-                          setSelected([...selected, nft.launcher_id]);
-                        } else if (
-                          !value &&
-                          selected.includes(nft.launcher_id)
-                        ) {
-                          setSelected(
-                            selected.filter((id) => id !== nft.launcher_id),
-                          );
-                        }
-                      },
-                    ]
-                  : null
-              }
-            />
-          ))}
-        </NftCardList>
-      </Container>
-
-      {selected.length > 0 && (
-        <MultiSelectActions
-          selected={selected}
-          onConfirm={() => {
-            setSelected([]);
-            setMultiSelect(false);
-          }}
-        />
-      )}
-    </>
-  );
-}
diff --git a/src/pages/NftList.tsx b/src/pages/NftList.tsx
index 346e8c11..51e410a7 100644
--- a/src/pages/NftList.tsx
+++ b/src/pages/NftList.tsx
@@ -1,108 +1,98 @@
 import Container from '@/components/Container';
 import Header from '@/components/Header';
 import { MultiSelectActions } from '@/components/MultiSelectActions';
-import { NftCard, NftCardList } from '@/components/NftCard';
+import { NftPageTitle } from '@/components/NftPageTitle';
+import { NftCardList } from '@/components/NftCardList';
 import { NftOptions } from '@/components/NftOptions';
 import { ReceiveAddress } from '@/components/ReceiveAddress';
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { useErrors } from '@/hooks/useErrors';
-import { useNftParams } from '@/hooks/useNftParams';
-import collectionImage from '@/images/collection.png';
-import { t } from '@lingui/core/macro';
+import { useNftParams, NftGroupMode } from '@/hooks/useNftParams';
 import { Trans } from '@lingui/react/macro';
-import { EyeIcon, EyeOff, ImagePlusIcon, MoreVerticalIcon } from 'lucide-react';
+import { ImagePlusIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { commands, events, NftCollectionRecord, NftRecord } from '../bindings';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useNftData } from '@/hooks/useNftData';
+import { useErrors } from '@/hooks/useErrors';
+import { t } from '@lingui/core/macro';
 
 export function NftList() {
   const navigate = useNavigate();
-
-  const { addError } = useErrors();
-
+  const {
+    collection_id: collectionId,
+    owner_did: ownerDid,
+    minter_did: minterDid,
+  } = useParams();
   const [params, setParams] = useNftParams();
-  const { pageSize, page, view, showHidden, query } = params;
-
-  const [nfts, setNfts] = useState<NftRecord[]>([]);
-  const [collections, setCollections] = useState<NftCollectionRecord[]>([]);
+  const { pageSize, sort, group, showHidden, query } = params;
   const [multiSelect, setMultiSelect] = useState(false);
   const [selected, setSelected] = useState<string[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const updateNfts = useCallback(
-    async (page: number) => {
-      setIsLoading(true);
-      try {
-        if (view === 'name' || view === 'recent') {
-          await commands
-            .getNfts({
-              name: query || null,
-              offset: (page - 1) * pageSize,
-              limit: pageSize,
-              sort_mode: view,
-              include_hidden: showHidden,
-            })
-            .then((data) => setNfts(data.nfts))
-            .catch(addError);
-        } else if (view === 'collection') {
-          await commands
-            .getNftCollections({
-              offset: (page - 1) * pageSize,
-              limit: pageSize,
-              include_hidden: showHidden,
-            })
-            .then((data) => setCollections(data.collections))
-            .catch(addError);
-        }
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [pageSize, showHidden, view, query, addError],
-  );
-
-  useEffect(() => {
-    updateNfts(1);
-  }, [updateNfts]);
-
-  useEffect(() => {
-    const unlisten = events.syncEvent.listen((event) => {
-      const type = event.payload.type;
-
-      if (
-        type === 'coin_state' ||
-        type === 'puzzle_batch_synced' ||
-        type === 'nft_data'
-      ) {
-        updateNfts(page);
-      }
+  const { addError } = useErrors();
+  const { nfts, collections, dids, owner, collection, isLoading, updateNfts } =
+    useNftData({
+      pageSize,
+      sort,
+      group,
+      showHidden,
+      query,
+      collectionId,
+      ownerDid,
+      minterDid,
+      page: params.page,
     });
 
-    return () => {
-      unlisten.then((u) => u());
-    };
-  }, [updateNfts, page]);
-
+  // Reset multi-select when route changes
   useEffect(() => {
-    updateNfts(page);
-  }, [updateNfts, page]);
+    setMultiSelect(false);
+    setSelected([]);
+  }, [collectionId, ownerDid, minterDid, group]);
+
+  const canLoadMore = useCallback(() => {
+    if (collectionId || ownerDid || minterDid || group === NftGroupMode.None) {
+      return nfts.length === pageSize;
+    } else if (group === NftGroupMode.Collection) {
+      return collections.length === pageSize;
+    } else if (
+      group === NftGroupMode.OwnerDid ||
+      group === NftGroupMode.MinterDid
+    ) {
+      return dids.length === pageSize;
+    }
+    return false;
+  }, [
+    collectionId,
+    ownerDid,
+    minterDid,
+    group,
+    nfts.length,
+    collections.length,
+    dids.length,
+    pageSize,
+  ]);
 
   return (
     <>
-      <Header title={<Trans>NFTs</Trans>}>
+      <Header
+        title={
+          <NftPageTitle
+            collectionId={collectionId}
+            collection={collection}
+            ownerDid={ownerDid}
+            owner={owner}
+            minterDid={minterDid}
+            group={group}
+          />
+        }
+      >
         <ReceiveAddress />
       </Header>
 
       <Container>
-        <Button onClick={() => navigate('/nfts/mint')}>
-          <ImagePlusIcon className='h-4 w-4 mr-2' /> <Trans>Mint NFT</Trans>
+        <Button
+          onClick={() => navigate('/nfts/mint')}
+          aria-label={t`Create new NFT`}
+        >
+          <ImagePlusIcon className='h-4 w-4 mr-2' aria-hidden='true' />
+          <Trans>Mint NFT</Trans>
         </Button>
 
         <NftOptions
@@ -115,62 +105,28 @@ export function NftList() {
           }}
           className='mt-4'
           isLoading={isLoading}
-          canLoadMore={nfts.length === pageSize}
+          canLoadMore={canLoadMore()}
+          aria-live='polite'
         />
 
-        <NftCardList>
-          {view === 'collection' ? (
-            <>
-              {collections.map((col, i) => (
-                <Collection
-                  col={col}
-                  key={i}
-                  updateNfts={() => updateNfts(page)}
-                />
-              ))}
-              {nfts.length < pageSize && (
-                <Collection
-                  col={{
-                    name: 'Uncategorized NFTs',
-                    icon: '',
-                    did_id: 'Miscellaneous',
-                    metadata_collection_id: 'Uncategorized',
-                    collection_id: 'No collection',
-                    visible: true,
-                  }}
-                  updateNfts={() => updateNfts(page)}
-                />
-              )}
-            </>
-          ) : (
-            nfts.map((nft, i) => (
-              <NftCard
-                nft={nft}
-                key={i}
-                updateNfts={() => updateNfts(page)}
-                selectionState={
-                  multiSelect
-                    ? [
-                        selected.includes(nft.launcher_id),
-                        (value) => {
-                          if (value && !selected.includes(nft.launcher_id)) {
-                            setSelected([...selected, nft.launcher_id]);
-                          } else if (
-                            !value &&
-                            selected.includes(nft.launcher_id)
-                          ) {
-                            setSelected(
-                              selected.filter((id) => id !== nft.launcher_id),
-                            );
-                          }
-                        },
-                      ]
-                    : null
-                }
-              />
-            ))
-          )}
-        </NftCardList>
+        <main aria-label={t`NFT Collection`} aria-busy={isLoading}>
+          <NftCardList
+            collectionId={collectionId}
+            ownerDid={ownerDid}
+            minterDid={minterDid}
+            group={group}
+            nfts={nfts}
+            collections={collections}
+            dids={dids}
+            pageSize={pageSize}
+            updateNfts={updateNfts}
+            page={params.page}
+            multiSelect={multiSelect}
+            selected={selected}
+            setSelected={setSelected}
+            addError={addError}
+          />
+        </main>
       </Container>
 
       {selected.length > 0 && (
@@ -180,73 +136,9 @@ export function NftList() {
             setSelected([]);
             setMultiSelect(false);
           }}
+          aria-label={t`Actions for selected NFTs`}
         />
       )}
     </>
   );
 }
-
-interface CollectionProps {
-  col: NftCollectionRecord;
-  updateNfts: () => void;
-}
-
-function Collection({ col }: CollectionProps) {
-  return (
-    <>
-      <Link
-        to={`/collections/${col.collection_id}`}
-        className={`group${`${!col.visible ? ' opacity-50 grayscale' : ''}`} border border-neutral-200 rounded-lg dark:border-neutral-800`}
-      >
-        <div className='overflow-hidden rounded-t-lg relative'>
-          <img
-            alt={col.name ?? t`Unnamed`}
-            loading='lazy'
-            width='150'
-            height='150'
-            className='h-auto w-auto object-cover transition-all group-hover:scale-105 aspect-square color-[transparent]'
-            src={collectionImage}
-          />
-        </div>
-        <div className='border-t bg-white text-neutral-950 shadow  dark:bg-neutral-900 dark:text-neutral-50 text-md flex items-center justify-between rounded-b-lg p-2 pl-3'>
-          <span className='truncate'>
-            <span className='font-medium leading-none truncate'>
-              {col.name ?? <Trans>Unnamed</Trans>}
-            </span>
-            {col.collection_id && (
-              <p className='text-xs text-muted-foreground truncate'>
-                {col.collection_id}
-              </p>
-            )}
-          </span>
-
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant='ghost' size='icon'>
-                <MoreVerticalIcon className='h-5 w-5' />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align='end'>
-              <DropdownMenuGroup>
-                <DropdownMenuItem
-                  className='cursor-pointer'
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    // toggleVisibility();
-                  }}
-                >
-                  {col.visible ? (
-                    <EyeOff className='mr-2 h-4 w-4' />
-                  ) : (
-                    <EyeIcon className='mr-2 h-4 w-4' />
-                  )}
-                  <span>{col.visible ? t`Hide` : t`Show`}</span>
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </Link>
-    </>
-  );
-}
diff --git a/src/pages/TokenList.tsx b/src/pages/TokenList.tsx
index c565530e..d1629fd8 100644
--- a/src/pages/TokenList.tsx
+++ b/src/pages/TokenList.tsx
@@ -236,7 +236,7 @@ export function TokenList() {
           )}
         </div>
 
-        <div className='mt-4 grid gap-2 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+        <div className='mt-4 grid gap-2 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6'>
           <Link to={`/wallet/token/xch`}>
             <Card className='transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-900'>
               <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>