diff --git a/src/components/wallet/collectibles/CollectibleList.tsx b/src/components/wallet/collectibles/CollectibleList.tsx
index 2b4e1fe..d0b48d6 100644
--- a/src/components/wallet/collectibles/CollectibleList.tsx
+++ b/src/components/wallet/collectibles/CollectibleList.tsx
@@ -97,7 +97,15 @@ export default function CollectibleList({
       </Box>
 
       {isImportCollectibleViewOpen && (
-        <Modal onClose={() => setIsImportCollectibleViewOpen(false)}>
+        <Modal
+          onClose={() => setIsImportCollectibleViewOpen(false)}
+          contentProps={{
+            style: {
+              scrollbarColor: 'gray black',
+              scrollbarWidth: 'thin'
+            }
+          }}
+        >
           <ImportCollectible onClose={() => setIsImportCollectibleViewOpen(false)} />
         </Modal>
       )}
diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
index 397ab5f..eedadf6 100644
--- a/src/components/wallet/collectibles/ImportCollectible.tsx
+++ b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Card,
+  ChevronLeftIcon,
   Divider,
   Image,
   SearchIcon,
@@ -12,6 +13,7 @@ import {
   useToast
 } from '@0xsequence/design-system'
 import { NetworkConfig, NetworkType } from '@0xsequence/network'
+import { BigNumberish, ethers } from 'ethers'
 import { ChangeEvent, useEffect, useRef, useState } from 'react'
 
 import { useObservable, useStore } from '~/stores'
@@ -35,27 +37,42 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
 
   const toast = useToast()
 
-  const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig | undefined>()
+  const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig>(mainnetNetworks[0])
   const [collectibleManualAddress, setCollectibleManualAddress] = useState<string | undefined>()
   const [collectibleManualTokenId, setCollectibleManualTokenId] = useState<number | undefined>()
-  const [contractType, setContractType] = useState<CollectibleContractType | undefined>()
-
-  const [collectibleInfo, setCollectibleInfo] = useState<CollectibleInfoResponse | undefined>()
+  const [contractType, setContractType] = useState<CollectibleContractType>(
+    CollectibleContractTypeValues.ERC721
+  )
 
-  const [isAddingCollectible, setIsAddingCollectible] = useState(false)
-  const [isAddingCollectibleManually, setIsAddingCollectibleManually] = useState(false)
+  const [isAddingCollection, setIsAddingCollection] = useState(false)
 
   const [collectionList, setCollectionList] = useState<any[]>([])
   const [collectionListFilter, setCollectionListFilter] = useState<string>('')
   const [filteredCollectionList, setFilteredCollectionList] = useState<any[]>([])
 
-  const [selectedCollection, setSelectedCollection] = useState<any[]>([])
+  const [selectedCollection, setSelectedCollection] = useState<any>()
+  const [selectedCollectibles, setSelectedCollectibles] = useState<any[]>([])
+  const [queriedCollectibles, setQueriedCollectibles] = useState<any[]>([])
+  const [isFetchingQueriedCollectibles, setIsFetchingQueriedCollectibles] = useState(false)
+
+  const [isAddingCollectibleManually, setIsAddingCollectibleManually] = useState(false)
+  const [manualCollectibleInfo, setManualCollectibleInfo] = useState<CollectibleInfoResponse | undefined>()
+
+  const [queryCollectibleTokenIdsMap, setQueryCollectibleTokenIdsMap] = useState<Record<string, string>>({})
 
   const fileInputRef = useRef<HTMLInputElement>(null)
 
-  useEffect(() => {
-    console.log(filteredCollectionList)
-  }, [filteredCollectionList])
+  const selectOptions = mainnetNetworks
+    .filter(network => !network.disabled)
+    .map(network => ({
+      label: (
+        <Box flexDirection="row" alignItems="center" gap="2">
+          <Image src={network.logoURI} maxWidth="8" maxHeight="8" />
+          <Text>{network.title}</Text>
+        </Box>
+      ),
+      value: network.chainId.toString()
+    }))
 
   useEffect(() => {
     const fetchCollectibleList = async () => {
@@ -68,35 +85,73 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
       }
     }
 
+    const fetchCollectibleInfo = async () => {
+      if (selectedNetwork && contractType && collectibleManualAddress && collectibleManualTokenId) {
+        collectibleStore
+          .getCollectibleInfo({
+            chainId: selectedNetwork.chainId,
+            address: collectibleManualAddress,
+            tokenId: collectibleManualTokenId,
+            contractType
+          })
+          .then(response => {
+            setManualCollectibleInfo(response)
+          })
+      }
+    }
+
     fetchCollectibleList()
+    fetchCollectibleInfo()
+  }, [selectedNetwork, contractType, collectibleManualAddress, collectibleManualTokenId])
 
-    if (selectedNetwork && collectibleManualAddress && collectibleManualTokenId && contractType) {
-      collectibleStore
-        .getCollectibleInfo({
-          chainId: selectedNetwork.chainId,
-          address: collectibleManualAddress,
-          tokenId: collectibleManualTokenId,
-          contractType
-        })
-        .then(response => {
-          setCollectibleInfo(response)
-        })
-    } else {
-      setCollectibleInfo(undefined)
+  useEffect(() => {
+    if (selectedNetwork && contractType && selectedCollection) {
     }
-  }, [selectedNetwork, collectibleManualAddress, collectibleManualTokenId, contractType])
+  }, [selectedNetwork, contractType, selectedCollection, selectedCollectibles])
 
-  const selectOptions = mainnetNetworks
-    .filter(network => !network.disabled)
-    .map(network => ({
-      label: (
-        <Box flexDirection="row" alignItems="center" gap="2">
-          <Image src={network.logoURI} maxWidth="8" maxHeight="8" />
-          <Text>{network.title}</Text>
-        </Box>
-      ),
-      value: network.chainId.toString()
-    }))
+  useEffect(() => {
+    const fetchQueriedCollectibles = async () => {
+      setQueriedCollectibles([])
+      if (!queryCollectibleTokenIdsMap[selectedCollection.address]) return
+
+      setIsFetchingQueriedCollectibles(true)
+      const tokenIds = queryCollectibleTokenIdsMap[selectedCollection.address].split(',').map(Number)
+
+      for (const tokenId of tokenIds) {
+        try {
+          const collectibleInfo = await collectibleStore.getCollectibleInfo({
+            chainId: selectedNetwork.chainId,
+            contractType,
+            address: selectedCollection.address,
+            tokenId: tokenId
+          })
+
+          if (collectibleInfo.isOwner) {
+            setQueriedCollectibles(prev => [
+              ...prev,
+              {
+                collectibleInfo,
+                chainId: selectedNetwork.chainId,
+                contractType,
+                address: selectedCollection.address,
+                tokenId
+              }
+            ])
+          }
+        } catch (error) {
+          console.error(error)
+          continue
+        }
+      }
+      setIsFetchingQueriedCollectibles(false)
+    }
+
+    fetchQueriedCollectibles()
+  }, [queryCollectibleTokenIdsMap])
+
+  useEffect(() => {
+    console.log(selectedCollectibles)
+  }, [selectedCollectibles])
 
   useEffect(() => {
     const fetchCollectionList = async () => {
@@ -124,54 +179,62 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     )
   }, [collectionList, collectionListFilter])
 
-  const toggleSelectCollectible = async (collectionAddress: string) => {
-    const isSelected = selectedCollection.some(collection => collection.address === collectionAddress)
-    if (isSelected) {
-      setSelectedCollection(
-        selectedCollection.filter(collectible => collectible.address !== collectionAddress)
-      )
-    } else {
-      setSelectedCollection([...selectedCollection, { address: collectionAddress, info: undefined }])
-    }
-  }
-
   const handleAdd = async () => {
-    if (
-      selectedNetwork &&
-      collectibleManualAddress &&
-      collectibleInfo &&
-      collectibleManualTokenId &&
-      contractType
-    ) {
-      await collectibleStore.addCollectible({
-        collectibleInfoParams: {
-          chainId: selectedNetwork.chainId,
-          address: collectibleManualAddress,
-          tokenId: collectibleManualTokenId,
-          contractType
-        },
-        collectibleInfoResponse: collectibleInfo
-      })
-      setIsAddingCollectible(false)
+    try {
+      if (
+        selectedNetwork &&
+        contractType &&
+        collectibleManualAddress &&
+        collectibleManualTokenId &&
+        manualCollectibleInfo
+      ) {
+        await collectibleStore.addCollectible({
+          collectibleInfoParams: {
+            chainId: selectedNetwork.chainId,
+            address: collectibleManualAddress,
+            tokenId: collectibleManualTokenId,
+            contractType
+          },
+          collectibleInfoResponse: manualCollectibleInfo
+        })
+      }
+
+      if (selectedCollectibles.length > 0) {
+        selectedCollectibles.map(async collectible => {
+          await collectibleStore.addCollectible({
+            collectibleInfoParams: {
+              chainId: collectible.chainId,
+              address: collectible.address,
+              tokenId: collectible.tokenId,
+              contractType: collectible.contractType
+            },
+            collectibleInfoResponse: collectible.collectibleInfo
+          })
+        })
+      }
+
+      setIsAddingCollection(false)
       toast({
         variant: 'success',
-        title:
-          contractType === CollectibleContractTypeValues.ERC721
-            ? 'ERC721 collectible added successfully'
-            : 'ERC1155 collectible added successfully',
+        title: `Collectible${selectedCollectibles.length + (collectibleManualAddress ? 1 : 0) > 1 ? 's' : ''} added successfully`,
         description:
           "You'll be able to see this collectible on your browser as long as you don't clear your cache."
       })
       resetInputs()
       onClose()
+    } catch (error) {
+      console.error(error)
+      toast({
+        variant: 'error',
+        title: 'One or more collectibles failed to add',
+        description: 'Please try again.'
+      })
     }
   }
 
   const resetInputs = () => {
     setCollectibleManualAddress(undefined)
-    setSelectedNetwork(undefined)
     setCollectibleManualTokenId(undefined)
-    setContractType(undefined)
   }
 
   const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
@@ -219,326 +282,226 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
     fileInputRef.current?.click()
   }
 
-  return (
-    // <Box flexDirection="column">
-    //   <Box flexDirection="column" padding="6" gap="6">
-    //     <Text variant="large" fontWeight="bold" color="text80">
-    //       Import ERC721 or ERC1155 Collectibles
-    //     </Text>
-
-    //     <Box flexDirection="column" gap="3">
-    //       <Box flexDirection="column" gap="1">
-    //         <Text variant="normal" fontWeight="medium" color="text80">
-    //           Collectible Network
-    //         </Text>
-
-    //         <Select
-    //           name="collectibleNetwork"
-    //           options={selectOptions}
-    //           onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
-    //         />
-    //       </Box>
-
-    //       <Box flexDirection="column" gap="1">
-    //         <Text variant="normal" fontWeight="medium" color="text80">
-    //           Collectible Type
-    //         </Text>
-
-    //         <Select
-    //           name="collectibleType"
-    //           options={[
-    //             { value: 'ERC721', label: 'ERC721' },
-    //             { value: 'ERC1155', label: 'ERC1155' }
-    //           ]}
-    //           onValueChange={value => setContractType(value as CollectibleContractType)}
-    //         />
-    //       </Box>
-
-    //       <Box flexDirection="column" gap="0.5">
-    //         <Text variant="normal" fontWeight="medium" color="text80">
-    //           Token
-    //         </Text>
-
-    //         <Box
-    //           onClick={() => {}}
-    //           width="fit"
-    //           cursor="pointer"
-    //           paddingBottom="0.5"
-    //           opacity={{ base: '100', hover: '80' }}
-    //         >
-    //           <Text variant="normal" fontWeight="medium" color="text50">
-    //             Import external token list
-    //           </Text>
-    //         </Box>
-
-    //         <Select
-    //           name="collectibleList"
-    //           options={
-    //             collectibleList?.slice(0, 20).map(collectible => {
-    //               return {
-    //                 label: collectible.name,
-    //                 value: collectible.address
-    //               }
-    //             }) ?? []
-    //           }
-    //           onValueChange={value => setCollectibleAddress(value)}
-    //         />
-    //       </Box>
-
-    //       {isAddingCollectibleManually && (
-    //         <>
-    //           <Box flexDirection="column" gap="0.5">
-    //             <Text variant="normal" fontWeight="medium" color="text80">
-    //               Collectible Address
-    //             </Text>
-
-    //             <Box flexDirection="row" gap="1" paddingBottom="0.5">
-    //               <Text variant="normal" fontWeight="medium" color="text50">
-    //                 See addresses on network's
-    //               </Text>
-
-    //               <Text
-    //                 variant="normal"
-    //                 color="text50"
-    //                 underline={!!tokenDirectory}
-    //                 cursor={tokenDirectory ? 'pointer' : 'default'}
-    //                 onClick={() => {
-    //                   if (tokenDirectory) {
-    //                     window.open(tokenDirectory)
-    //                   }
-    //                 }}
-    //               >
-    //                 directory
-    //               </Text>
-    //             </Box>
-
-    //             <TextInput
-    //               name="collectibleAddress"
-    //               value={collectibleAddress ?? ''}
-    //               onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-    //                 setCollectibleAddress(ev.target.value)
-    //               }}
-    //             />
-    //           </Box>
-
-    //           <Box flexDirection="column" gap="0.5">
-    //             <Text variant="normal" fontWeight="medium" color="text80">
-    //               Collectible Token ID
-    //             </Text>
-
-    //             <TextInput
-    //               name="collectibleTokenId"
-    //               value={collectibleTokenId ?? ''}
-    //               onKeyPress={(event: { key: string; preventDefault: () => void }) => {
-    //                 if (!/[0-9]/.test(event.key)) {
-    //                   event.preventDefault()
-    //                 }
-    //               }}
-    //               onChange={(ev: ChangeEvent<HTMLInputElement>) => {
-    //                 if (ev.target.value === '') {
-    //                   setCollectibleTokenId(undefined)
-    //                   return
-    //                 }
-
-    //                 setCollectibleTokenId(ev.target.value as unknown as number)
-    //               }}
-    //             />
-    //           </Box>
-    //         </>
-    //       )}
-    //     </Box>
-
-    //     {isFetchingCollectibleInfo && (
-    //       <Box alignItems="center" justifyContent="center">
-    //         <Spinner size="lg" />
-    //       </Box>
-    //     )}
-
-    //     {collectibleInfoResponse && !collectibleInfoResponse.isOwner && !isFetchingCollectibleInfo && (
-    //       <Box alignItems="center" justifyContent="center">
-    //         <Text variant="medium" color="warning">
-    //           You do not own this collectible
-    //         </Text>
-    //       </Box>
-    //     )}
-
-    //     {collectibleInfoResponse && collectibleInfoResponse.isOwner && !isFetchingCollectibleInfo && (
-    //       <Card flexDirection="row" gap="6">
-    //         <Image src={collectibleInfoResponse.image} style={{ width: '120px', height: 'auto' }} />
-
-    //         <Box flexDirection="column" gap="2">
-    //           <Text variant="medium" fontWeight="bold" color="text80">
-    //             {collectibleInfoResponse.name ?? ''}
-    //           </Text>
-    //           <Text variant="small" color="text80">
-    //             Your Balance:
-    //           </Text>
-    //           <Text variant="medium" fontWeight="bold" color="text80">
-    //             {Number(
-    //               ethers.formatUnits(
-    //                 collectibleInfoResponse.balance as BigNumberish,
-    //                 collectibleInfoResponse.decimals ?? 0
-    //               )
-    //             )}
-    //           </Text>
-    //         </Box>
-    //       </Card>
-    //     )}
-    //   </Box>
-
-    //   <Divider marginY="0" />
-
-    //   <Box flexDirection="row" padding="6" gap="2">
-    //     {!isAddingCollectibleManually && (
-    //       <Button
-    //         label="Manual Import"
-    //         shape="square"
-    //         onClick={() => {
-    //           setIsAddingCollectibleManually(true)
-    //         }}
-    //       />
-    //     )}
-
-    //     <Button label="Cancel" size="md" shape="square" marginLeft="auto" onClick={onClose} />
-
-    //     <Button
-    //       label="Add Collectible"
-    //       variant="primary"
-    //       shape="square"
-    //       disabled={collectibleInfoResponse === undefined || isAddingCollectible}
-    //       onClick={() => {
-    //         handleAdd()
-    //       }}
-    //     />
-    //   </Box>
-    // </Box>
-    <Box flexDirection="column" height="full">
-      <Box flexDirection="column" height="full" padding="6" gap="6">
-        <Box flexDirection="row" alignItems="center" gap="4">
-          <Text variant="large" fontWeight="bold" color="text80">
-            Import NFT
-          </Text>
+  const toggleSelectCollectible = async (collectible: any) => {
+    const isSelected = selectedCollectibles.some(
+      c => c.address === collectible.address && c.tokenId === collectible.tokenId
+    )
+    if (isSelected) {
+      setSelectedCollectibles(
+        selectedCollectibles.filter(
+          c => c.address !== collectible.address && c.tokenId !== collectible.tokenId
+        )
+      )
+    } else {
+      setSelectedCollectibles([...selectedCollectibles, collectible])
+    }
+  }
 
-          <Select
-            name="collectibleNetwork"
-            placeholder="Select Network"
-            options={selectOptions}
-            onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
+  const showCollectible = (collectible: any, i: number) => {
+    return (
+      <Box
+        key={i}
+        flexDirection="row"
+        alignItems="center"
+        background={{ base: 'backgroundPrimary', hover: 'backgroundSecondary' }}
+        onClick={() => {
+          toggleSelectCollectible(collectible)
+        }}
+        borderRadius="sm"
+        padding="3"
+        gap="4"
+      >
+        <Image src={collectible.collectibleInfo.image} maxHeight="10" maxWidth="10" />
+        <Text variant="normal" fontWeight="semibold" color="text80">
+          {collectible.collectibleInfo.name}
+        </Text>
+        <Box flexDirection="row" alignItems="center" marginLeft="auto" gap="2">
+          <Text variant="normal" fontWeight="bold" color="text80">
+            Balance:
+          </Text>
+          <Text variant="normal" fontWeight="bold" color="text80" marginRight="1">
+            {collectible.contractType === CollectibleContractTypeValues.ERC721
+              ? 1
+              : ethers.formatUnits(
+                  collectible.collectibleInfo.balance as BigNumberish,
+                  collectible.collectibleInfo.decimals ?? 0
+                )}
+          </Text>
+          <FilledRoundCheckBox
+            checked={
+              (selectedCollectibles?.filter(c => c.address.includes(collectible.address)).length || 0) > 0
+            }
           />
         </Box>
+      </Box>
+    )
+  }
 
-        <Box flexDirection="column" style={{ gap: '5px' }}>
-          <Box gap="2">
-            <Box onClick={() => setContractType(CollectibleContractTypeValues.ERC721)}>
-              <Text
-                variant="normal"
-                fontWeight="semibold"
-                color={contractType === CollectibleContractTypeValues.ERC721 ? 'text100' : 'text50'}
-                paddingX="4"
-              >
-                ERC721
-              </Text>
-              {contractType === CollectibleContractTypeValues.ERC721 && (
-                <Divider color="white" height="0.5" position="relative" marginY="0" style={{ top: '6px' }} />
-              )}
-            </Box>
-
-            <Box onClick={() => setContractType(CollectibleContractTypeValues.ERC1155)}>
-              <Text
-                variant="normal"
-                fontWeight="semibold"
-                color={contractType === CollectibleContractTypeValues.ERC1155 ? 'text100' : 'text50'}
-                paddingX="4"
-              >
-                ERC1155
-              </Text>
-              {contractType === CollectibleContractTypeValues.ERC1155 && (
-                <Divider color="white" height="0.5" position="relative" marginY="0" style={{ top: '6px' }} />
-              )}
-            </Box>
+  return (
+    <Box flexDirection="column" height="fit" minHeight="full">
+      {selectedCollection ? (
+        <Box flexDirection="column" height="full" padding="6" gap="6">
+          <Box flexDirection="row" alignItems="center" gap="4">
+            <Button leftIcon={ChevronLeftIcon} onClick={() => setSelectedCollection(undefined)} />
+            <Image src={selectedCollection.logoURI} maxHeight="10" maxWidth="10" />
+            <Text variant="large" fontWeight="bold" color="text80">
+              {selectedCollection.name}
+            </Text>
           </Box>
-          <Divider marginY="0" />
-        </Box>
 
-        <Box flexDirection="column" gap="2">
-          <TextInput
-            leftIcon={SearchIcon}
-            value={collectionListFilter}
-            placeholder="Search for a collectible"
-            onChange={(ev: ChangeEvent<HTMLInputElement>) => setCollectionListFilter(ev.target.value)}
-          />
+          <Box flexDirection="column" gap="2">
+            <TextInput
+              leftIcon={SearchIcon}
+              value={queryCollectibleTokenIdsMap[selectedCollection.address]}
+              placeholder="Enter token IDs separated by commas"
+              onChange={(ev: ChangeEvent<HTMLInputElement>) =>
+                setQueryCollectibleTokenIdsMap({
+                  ...queryCollectibleTokenIdsMap,
+                  [selectedCollection.address]: ev.target.value
+                })
+              }
+            />
+          </Box>
 
-          <Button
-            label={
-              selectedNetwork && contractType
-                ? `Import custom token list for ${contractType === CollectibleContractTypeValues.ERC721 ? 'ERC721' + ' on ' + selectedNetwork?.title : 'ERC1155' + ' on ' + selectedNetwork?.title}`
-                : 'Select Network and Type to import custom token list'
-            }
-            variant="text"
-            shape="square"
-            marginTop="auto"
-            onClick={selectedNetwork && contractType ? handleImportCustomCollectibleList : undefined}
-          />
+          {isFetchingQueriedCollectibles ? (
+            <Box alignItems="center" justifyContent="center">
+              <Spinner size="lg" />
+            </Box>
+          ) : (
+            <Box flexDirection="column">
+              {selectedCollectibles?.map((collectible, i) => {
+                if (collectible.address === selectedCollection.address) {
+                  return showCollectible(collectible, i)
+                }
+              })}
+              {queriedCollectibles?.map((collectible, i) => {
+                if (
+                  collectible.address === selectedCollection.address &&
+                  !selectedCollectibles.some(c => c.tokenId === collectible.tokenId)
+                ) {
+                  return showCollectible(collectible, i)
+                }
+              })}
+            </Box>
+          )}
         </Box>
+      ) : (
+        <Box flexDirection="column" height="full" padding="6" gap="6">
+          <Box flexDirection="row" alignItems="center" gap="4">
+            <Text variant="large" fontWeight="bold" color="text80">
+              Import NFT
+            </Text>
+
+            <Select
+              name="collectibleNetwork"
+              placeholder="Select Network"
+              value={selectedNetwork?.chainId.toString()}
+              options={selectOptions}
+              onValueChange={value =>
+                setSelectedNetwork(networks.find(n => n.chainId === Number(value)) || mainnetNetworks[0])
+              }
+            />
+          </Box>
 
-        <Box flexDirection="column">
-          {filteredCollectionList?.map((collectible, i) => {
-            return (
-              <Box
-                key={i}
-                flexDirection="row"
-                alignItems="center"
-                background={{ base: 'backgroundPrimary', hover: 'backgroundSecondary' }}
-                onClick={() => {
-                  toggleSelectCollectible(collectible.address)
-                }}
-                borderRadius="sm"
-                padding="3"
-                gap="4"
-              >
-                <Image src={collectible.logoURI} maxHeight="10" maxWidth="10" />
-                <Text variant="normal" fontWeight="semibold" color="text80">
-                  {collectible.name}
+          <Box flexDirection="column" style={{ gap: '5px' }}>
+            <Box gap="2">
+              <Box onClick={() => setContractType(CollectibleContractTypeValues.ERC721)}>
+                <Text
+                  variant="normal"
+                  fontWeight="semibold"
+                  color={contractType === CollectibleContractTypeValues.ERC721 ? 'text100' : 'text50'}
+                  paddingX="4"
+                >
+                  ERC721
                 </Text>
-                <Box flexDirection="row" alignItems="center" marginLeft="auto" gap="2">
-                  {selectedCollection?.filter(c => c.address.includes(collectible.address)).length > 0 && (
-                    <>
-                      <Text variant="normal" fontWeight="bold" color="text80">
-                        Balance:
-                      </Text>
-                      {selectedCollection?.filter(c => c.address.includes(collectible.address))[0].info
-                        ?.balance ? (
-                        <Text variant="normal" fontWeight="bold" color="text80">
-                          {
-                            selectedCollection?.filter(c => c.address.includes(collectible.address))[0].info
-                              ?.balance
-                          }
-                        </Text>
-                      ) : (
-                        <Spinner size="md" marginRight="1" />
-                      )}
-                    </>
-                  )}
-                  <FilledRoundCheckBox
-                    checked={
-                      (selectedCollection?.filter(c => c.address.includes(collectible.address)).length || 0) >
-                      0
-                    }
+                {contractType === CollectibleContractTypeValues.ERC721 && (
+                  <Divider
+                    color="white"
+                    height="0.5"
+                    position="relative"
+                    marginY="0"
+                    style={{ top: '6px' }}
                   />
-                </Box>
+                )}
               </Box>
-            )
-          })}
-        </Box>
 
-        <input
-          type="file"
-          accept=".json"
-          style={{ display: 'none' }}
-          ref={fileInputRef}
-          onChange={handleFileChange}
-        />
-      </Box>
+              <Box onClick={() => setContractType(CollectibleContractTypeValues.ERC1155)}>
+                <Text
+                  variant="normal"
+                  fontWeight="semibold"
+                  color={contractType === CollectibleContractTypeValues.ERC1155 ? 'text100' : 'text50'}
+                  paddingX="4"
+                >
+                  ERC1155
+                </Text>
+                {contractType === CollectibleContractTypeValues.ERC1155 && (
+                  <Divider
+                    color="white"
+                    height="0.5"
+                    position="relative"
+                    marginY="0"
+                    style={{ top: '6px' }}
+                  />
+                )}
+              </Box>
+            </Box>
+            <Divider marginY="0" />
+          </Box>
+
+          <Box flexDirection="column" gap="2">
+            <TextInput
+              leftIcon={SearchIcon}
+              value={collectionListFilter}
+              placeholder="Search for a collection"
+              onChange={(ev: ChangeEvent<HTMLInputElement>) => setCollectionListFilter(ev.target.value)}
+            />
+
+            <Button
+              label={
+                selectedNetwork && contractType
+                  ? `Import custom token list for ${contractType === CollectibleContractTypeValues.ERC721 ? 'ERC721' + ' on ' + selectedNetwork?.title : 'ERC1155' + ' on ' + selectedNetwork?.title}`
+                  : 'Select Network and Type to import custom token list'
+              }
+              variant="text"
+              shape="square"
+              marginTop="auto"
+              onClick={selectedNetwork && contractType ? handleImportCustomCollectibleList : undefined}
+            />
+          </Box>
+
+          <Box flexDirection="column">
+            {filteredCollectionList?.map((collection, i) => {
+              return (
+                <Box
+                  key={i}
+                  flexDirection="row"
+                  alignItems="center"
+                  background={{ base: 'backgroundPrimary', hover: 'backgroundSecondary' }}
+                  onClick={() => {
+                    setSelectedCollection(collection)
+                  }}
+                  borderRadius="sm"
+                  padding="3"
+                  gap="4"
+                >
+                  <Image src={collection.logoURI} maxHeight="10" maxWidth="10" />
+                  <Text variant="normal" fontWeight="semibold" color="text80">
+                    {collection.name}
+                  </Text>
+                </Box>
+              )
+            })}
+          </Box>
+
+          <input
+            type="file"
+            accept=".json"
+            style={{ display: 'none' }}
+            ref={fileInputRef}
+            onChange={handleFileChange}
+          />
+        </Box>
+      )}
 
       <Box marginTop="auto">
         <Box paddingX="6">
@@ -558,30 +521,47 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
             </Box>
           )}
 
-          {isFetchingCollectibleInfo && collectibleManualAddress ? (
-            <Box alignItems="center" marginBottom="6" justifyContent="center">
+          {isFetchingCollectibleInfo && collectibleManualAddress && (
+            <Box alignItems="center" justifyContent="center">
               <Spinner size="lg" />
             </Box>
-          ) : (
-            collectibleInfo && (
-              <Card flexDirection="column" marginBottom="6" gap="2">
+          )}
+
+          {manualCollectibleInfo && !manualCollectibleInfo.isOwner && !isFetchingCollectibleInfo && (
+            <Box alignItems="center" justifyContent="center">
+              <Text variant="medium" color="warning">
+                You do not own this collectible
+              </Text>
+            </Box>
+          )}
+
+          {manualCollectibleInfo && manualCollectibleInfo.isOwner && !isFetchingCollectibleInfo && (
+            <Card flexDirection="row" gap="6">
+              <Image src={manualCollectibleInfo.image} style={{ width: '120px', height: 'auto' }} />
+
+              <Box flexDirection="column" gap="2">
                 <Text variant="medium" fontWeight="bold" color="text80">
-                  {collectibleInfo.name ?? ''}
+                  {manualCollectibleInfo.name ?? ''}
                 </Text>
                 <Text variant="small" color="text80">
                   Your Balance:
                 </Text>
                 <Text variant="medium" fontWeight="bold" color="text80">
-                  {collectibleInfo.balance}
+                  {Number(
+                    ethers.formatUnits(
+                      manualCollectibleInfo.balance as BigNumberish,
+                      manualCollectibleInfo.decimals ?? 0
+                    )
+                  )}
                 </Text>
-              </Card>
-            )
+              </Box>
+            </Card>
           )}
         </Box>
 
         <Divider marginY="0" />
 
-        <Box>
+        <Box width="full">
           <Box flexDirection="row" padding="6" gap="2">
             {isAddingCollectibleManually ? (
               <Button
@@ -591,7 +571,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
                 onClick={() => {
                   setIsAddingCollectibleManually(false)
                   setCollectibleManualAddress('')
-                  setCollectibleInfo(undefined)
+                  setManualCollectibleInfo(undefined)
                 }}
               />
             ) : (
@@ -611,7 +591,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
               label="Add"
               variant="primary"
               shape="square"
-              disabled={(collectibleInfo === undefined && !selectedCollection.length) || isAddingCollectible}
+              disabled={(!manualCollectibleInfo && !selectedCollectibles.length) || isAddingCollection}
               onClick={() => {
                 handleAdd()
               }}
diff --git a/src/components/wallet/tokens/AddCustomTokenList.tsx b/src/components/wallet/tokens/AddCustomTokenList.tsx
deleted file mode 100644
index c2a0754..0000000
--- a/src/components/wallet/tokens/AddCustomTokenList.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Button } from '@0xsequence/design-system'
-
-export default function AddCustomTokenList() {
-  return <Button />
-}
diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
index b180cea..3cd1704 100644
--- a/src/components/wallet/tokens/ImportToken.tsx
+++ b/src/components/wallet/tokens/ImportToken.tsx
@@ -32,7 +32,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
 
   const toast = useToast()
 
-  const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig>()
+  const [selectedNetwork, setSelectedNetwork] = useState<NetworkConfig>(mainnetNetworks[0])
   const [tokenManualAddress, setTokenManualAddress] = useState<string>('')
 
   const [tokenInfo, setTokenInfo] = useState<UserAddedTokenInitialInfo>()
@@ -123,7 +123,9 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
             symbol: tokenInfo.symbol,
             decimals: tokenInfo.decimals
           })
-        } else if (selectedTokens.length > 0) {
+        }
+
+        if (selectedTokens.length > 0) {
           selectedTokens.map(async token => {
             await tokenStore.addToken({
               chainId: selectedNetwork.chainId,
@@ -133,8 +135,6 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
               decimals: token.info.decimals
             })
           })
-        } else {
-          throw new Error('Invalid token data')
         }
 
         setIsAddingToken(false)
@@ -199,7 +199,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
   }
 
   return (
-    <Box flexDirection="column" height="full">
+    <Box flexDirection="column" height="fit" minHeight="full">
       <Box flexDirection="column" height="full" padding="6" gap="6">
         <Box flexDirection="row" alignItems="center" gap="4">
           <Text variant="large" fontWeight="bold" color="text80">
@@ -210,7 +210,10 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
             name="tokenNetwork"
             placeholder="Select Network"
             options={selectOptions}
-            onValueChange={value => setSelectedNetwork(networks.find(n => n.chainId === Number(value)))}
+            value={selectedNetwork?.chainId.toString()}
+            onValueChange={value =>
+              setSelectedNetwork(networks.find(n => n.chainId === Number(value)) || mainnetNetworks[0])
+            }
           />
         </Box>
 
@@ -358,7 +361,7 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
               label="Add"
               variant="primary"
               shape="square"
-              disabled={(tokenInfo === undefined && !selectedTokens.length) || isAddingToken}
+              disabled={(!tokenInfo && !selectedTokens.length) || isAddingToken}
               onClick={() => {
                 handleAdd()
               }}