diff --git a/apps/web/src/components/Nft/SingleNft.tsx b/apps/web/src/components/Nft/SingleNft.tsx
index 8bf1ebd1e244..de65a55df2e2 100644
--- a/apps/web/src/components/Nft/SingleNft.tsx
+++ b/apps/web/src/components/Nft/SingleNft.tsx
@@ -2,7 +2,6 @@ import { RARIBLE_URL, STATIC_IMAGES_URL } from '@lenster/data/constants';
 import type { Nft } from '@lenster/lens';
 import sanitizeDStorageUrl from '@lenster/lib/sanitizeDStorageUrl';
 import { Card } from '@lenster/ui';
-import Link from 'next/link';
 import type { FC } from 'react';
 import { CHAIN_ID } from 'src/constants';
 
@@ -20,10 +19,13 @@ const SingleNft: FC<SingleNftProps> = ({ nft, linkToDetail = true }) => {
 
   return (
     <Card>
-      {nft?.originalContent?.animatedUrl ? (
-        <div className="divider h-52 sm:h-80 sm:rounded-t-[10px]">
-          {nft?.originalContent?.animatedUrl?.includes('.gltf') ? (
-            <Link href={nftURL ?? ''} target="_blank" rel="noreferrer noopener">
+      <div
+        onClick={() => nftURL && window.open(nftURL, '_blank')}
+        className="cursor-pointer"
+      >
+        {nft?.originalContent?.animatedUrl ? (
+          <div className="divider h-52 sm:h-80 sm:rounded-t-[10px]">
+            {nft?.originalContent?.animatedUrl?.includes('.gltf') ? (
               <div
                 style={{
                   backgroundImage: `url(${`${STATIC_IMAGES_URL}/placeholder.webp`})`,
@@ -32,17 +34,15 @@ const SingleNft: FC<SingleNftProps> = ({ nft, linkToDetail = true }) => {
                   backgroundRepeat: 'no-repeat'
                 }}
               />
-            </Link>
-          ) : (
-            <iframe
-              title={`${nft.contractAddress}:${nft.tokenId}`}
-              sandbox=""
-              src={sanitizeDStorageUrl(nft?.originalContent?.animatedUrl)}
-            />
-          )}
-        </div>
-      ) : (
-        <Link href={nftURL ?? ''} target="_blank" rel="noreferrer noopener">
+            ) : (
+              <iframe
+                title={`${nft.contractAddress}:${nft.tokenId}`}
+                sandbox=""
+                src={sanitizeDStorageUrl(nft?.originalContent?.animatedUrl)}
+              />
+            )}
+          </div>
+        ) : (
           <div
             className="divider h-52 sm:h-80 sm:rounded-t-[10px]"
             style={{
@@ -56,23 +56,16 @@ const SingleNft: FC<SingleNftProps> = ({ nft, linkToDetail = true }) => {
               backgroundRepeat: 'no-repeat'
             }}
           />
-        </Link>
-      )}
-      <div className="space-y-1 p-5">
-        {nft.collectionName && (
-          <div className="lt-text-gray-500 truncate text-sm">
-            {nft.collectionName}
-          </div>
         )}
-        <div className="truncate">
-          <Link
-            className="font-bold"
-            href={nftURL ?? ''}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
+        <div className="space-y-1 p-5">
+          {nft.collectionName && (
+            <div className="lt-text-gray-500 truncate text-sm">
+              {nft.collectionName}
+            </div>
+          )}
+          <div className="truncate">
             {nft.name ? nft.name : `#${nft.tokenId}`}
-          </Link>
+          </div>
         </div>
       </div>
     </Card>
diff --git a/apps/web/src/components/Profile/NftGallery/Picker.tsx b/apps/web/src/components/Profile/NftGallery/Picker.tsx
index da26b2a5e9d0..4e9a2de25c63 100644
--- a/apps/web/src/components/Profile/NftGallery/Picker.tsx
+++ b/apps/web/src/components/Profile/NftGallery/Picker.tsx
@@ -17,7 +17,11 @@ import type { NftGalleryItem } from 'src/store/nft-gallery';
 import { useNftGalleryStore } from 'src/store/nft-gallery';
 import { mainnet } from 'wagmi/chains';
 
-const Picker: FC = () => {
+interface PickerProps {
+  onlyAllowOne?: boolean;
+}
+
+const Picker: FC<PickerProps> = ({ onlyAllowOne }) => {
   const currentProfile = useAppStore((state) => state.currentProfile);
   const gallery = useNftGalleryStore((state) => state.gallery);
   const setGallery = useNftGalleryStore((state) => state.setGallery);
@@ -80,11 +84,24 @@ const Picker: FC = () => {
     if (gallery.items.length === 50) {
       return toast.error(t`Only 50 items allowed for gallery`);
     }
+
     const customId = `${item.chainId}_${item.contractAddress}_${item.tokenId}`;
     const nft = {
       itemId: customId,
       ...item
     };
+
+    if (onlyAllowOne) {
+      setGallery({
+        ...gallery,
+        name: '',
+        items: [nft],
+        toAdd: [],
+        toRemove: []
+      });
+      return;
+    }
+
     const alreadySelectedIndex = gallery.items.findIndex(
       (n) => n.itemId === customId
     );
@@ -143,7 +160,7 @@ const Picker: FC = () => {
   });
 
   return (
-    <div className="grid grid-cols-1 gap-4 p-5 sm:grid-cols-3">
+    <div className="grid grid-cols-1 gap-4 p-5 sm:grid-cols-3 md:grid-cols-4">
       {nfts?.map((nft, index) => {
         const id = `${nft.chainId}_${nft.contractAddress}_${nft.tokenId}`;
         const isSelected = selectedItems.includes(id);
@@ -156,7 +173,7 @@ const Picker: FC = () => {
             )}
           >
             {isSelected && (
-              <button className="bg-brand-500 absolute right-2 top-2 rounded-full">
+              <button className="bg-brand-500 absolute right-2 top-2 z-20 rounded-full">
                 <CheckIcon className="h-5 w-5 p-1 text-white" />
               </button>
             )}
diff --git a/apps/web/src/components/Settings/Profile/NftAvatarModal.tsx b/apps/web/src/components/Settings/Profile/NftAvatarModal.tsx
new file mode 100644
index 000000000000..6e0c6f29a5e6
--- /dev/null
+++ b/apps/web/src/components/Settings/Profile/NftAvatarModal.tsx
@@ -0,0 +1,208 @@
+import Picker from '@components/Profile/NftGallery/Picker';
+import { PencilIcon } from '@heroicons/react/outline';
+import { LensHub } from '@lenster/abis';
+import { LENSHUB_PROXY } from '@lenster/data/constants';
+import { Errors } from '@lenster/data/errors';
+import { SETTINGS } from '@lenster/data/tracking';
+import {
+  type UpdateProfileImageRequest,
+  useBroadcastMutation,
+  useCreateSetProfileImageUriTypedDataMutation,
+  useCreateSetProfileImageUriViaDispatcherMutation,
+  useNftChallengeLazyQuery
+} from '@lenster/lens';
+import getSignature from '@lenster/lib/getSignature';
+import { Button, ErrorMessage, Modal, Spinner } from '@lenster/ui';
+import errorToast from '@lib/errorToast';
+import { Leafwatch } from '@lib/leafwatch';
+import { t, Trans } from '@lingui/macro';
+import type { Dispatch, FC, SetStateAction } from 'react';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { useAppStore } from 'src/store/app';
+import { useNftGalleryStore } from 'src/store/nft-gallery';
+import { useNonceStore } from 'src/store/nonce';
+import { useContractWrite, useSignMessage, useSignTypedData } from 'wagmi';
+
+interface NftAvatarModalProps {
+  showNftAvatarModal: boolean;
+  setShowNftAvatarModal: Dispatch<SetStateAction<boolean>>;
+}
+
+const NftAvatarModal: FC<NftAvatarModalProps> = ({
+  showNftAvatarModal,
+  setShowNftAvatarModal
+}) => {
+  const userSigNonce = useNonceStore((state) => state.userSigNonce);
+  const [isLoading, setIsLoading] = useState(false);
+  const currentProfile = useAppStore((state) => state.currentProfile);
+  const gallery = useNftGalleryStore((state) => state.gallery);
+
+  const { signMessageAsync } = useSignMessage();
+
+  const setUserSigNonce = useNonceStore((state) => state.setUserSigNonce);
+
+  const onCompleted = (__typename?: 'RelayError' | 'RelayerResult') => {
+    if (__typename === 'RelayError') {
+      return;
+    }
+
+    setIsLoading(false);
+    toast.success(t`Avatar updated successfully!`);
+    Leafwatch.track(SETTINGS.PROFILE.SET_NFT_PICTURE);
+  };
+
+  const onError = (error: any) => {
+    setIsLoading(false);
+    errorToast(error);
+  };
+
+  const [loadChallenge] = useNftChallengeLazyQuery();
+  const [broadcast] = useBroadcastMutation({
+    onCompleted: ({ broadcast }) => onCompleted(broadcast.__typename)
+  });
+  const { signTypedDataAsync } = useSignTypedData({ onError });
+
+  const { error, write } = useContractWrite({
+    address: LENSHUB_PROXY,
+    abi: LensHub,
+    functionName: 'setProfileImageURI',
+    onSuccess: () => onCompleted(),
+    onError
+  });
+
+  // Dispatcher
+  const canUseRelay = currentProfile?.dispatcher?.canUseRelay;
+  const isSponsored = currentProfile?.dispatcher?.sponsor;
+
+  const [createSetProfileImageURITypedData] =
+    useCreateSetProfileImageUriTypedDataMutation({
+      onCompleted: async ({ createSetProfileImageURITypedData }) => {
+        const { id, typedData } = createSetProfileImageURITypedData;
+        const signature = await signTypedDataAsync(getSignature(typedData));
+        setUserSigNonce(userSigNonce + 1);
+        const { data } = await broadcast({
+          variables: { request: { id, signature } }
+        });
+        if (data?.broadcast.__typename === 'RelayError') {
+          const { profileId, imageURI } = typedData.value;
+          return write?.({ args: [profileId, imageURI] });
+        }
+      },
+      onError
+    });
+
+  const [createSetProfileImageURIViaDispatcher] =
+    useCreateSetProfileImageUriViaDispatcherMutation({
+      onCompleted: ({ createSetProfileImageURIViaDispatcher }) =>
+        onCompleted(createSetProfileImageURIViaDispatcher.__typename),
+      onError
+    });
+
+  const createViaDispatcher = async (request: UpdateProfileImageRequest) => {
+    const { data } = await createSetProfileImageURIViaDispatcher({
+      variables: { request }
+    });
+    if (
+      data?.createSetProfileImageURIViaDispatcher?.__typename === 'RelayError'
+    ) {
+      return await createSetProfileImageURITypedData({
+        variables: {
+          options: { overrideSigNonce: userSigNonce },
+          request
+        }
+      });
+    }
+  };
+
+  const setAvatar = async () => {
+    if (!currentProfile || gallery.items.length === 0) {
+      return toast.error(Errors.SignWallet);
+    }
+
+    try {
+      setIsLoading(true);
+      const { contractAddress, tokenId, chainId } = gallery.items[0];
+      const challengeRes = await loadChallenge({
+        variables: {
+          request: {
+            ethereumAddress: currentProfile?.ownedBy,
+            nfts: [
+              {
+                contractAddress,
+                tokenId,
+                chainId
+              }
+            ]
+          }
+        }
+      });
+
+      const signature = await signMessageAsync({
+        message: challengeRes?.data?.nftOwnershipChallenge?.text as string
+      });
+
+      const request: UpdateProfileImageRequest = {
+        profileId: currentProfile?.id,
+        nftData: {
+          id: challengeRes?.data?.nftOwnershipChallenge?.id,
+          signature
+        }
+      };
+
+      setShowNftAvatarModal(false);
+
+      if (canUseRelay && isSponsored) {
+        return await createViaDispatcher(request);
+      }
+
+      return await createSetProfileImageURITypedData({
+        variables: {
+          options: { overrideSigNonce: userSigNonce },
+          request
+        }
+      });
+    } catch (error) {
+      onError(error);
+    }
+  };
+
+  return (
+    <Modal
+      size="lg"
+      title={t`Select a NFT`}
+      show={showNftAvatarModal}
+      onClose={() => setShowNftAvatarModal(false)}
+    >
+      <div className="flex flex-col">
+        {error && (
+          <ErrorMessage
+            className="mb-3"
+            title={t`Transaction failed!`}
+            error={error}
+          />
+        )}
+        <div className="mb-4 mr-1 flex h-[70vh] overflow-y-scroll">
+          <Picker onlyAllowOne={true} />
+        </div>
+        <div className="ml-auto flex items-center space-x-2 p-4">
+          <Button
+            onClick={setAvatar}
+            disabled={isLoading || gallery.items.length === 0}
+            icon={
+              isLoading ? (
+                <Spinner size="xs" />
+              ) : (
+                <PencilIcon className="h-4 w-4" />
+              )
+            }
+          >
+            <Trans>Save</Trans>
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default NftAvatarModal;
diff --git a/apps/web/src/components/Settings/Profile/NftPicture.tsx b/apps/web/src/components/Settings/Profile/NftPicture.tsx
index fd3ef72d0f3b..a39f29ed7ed1 100644
--- a/apps/web/src/components/Settings/Profile/NftPicture.tsx
+++ b/apps/web/src/components/Settings/Profile/NftPicture.tsx
@@ -1,244 +1,39 @@
 import { PencilIcon } from '@heroicons/react/outline';
-import { LensHub } from '@lenster/abis';
-import { IS_MAINNET, LENSHUB_PROXY } from '@lenster/data/constants';
-import { Errors } from '@lenster/data/errors';
-import { Regex } from '@lenster/data/regex';
-import { SETTINGS } from '@lenster/data/tracking';
-import type {
-  NftImage,
-  Profile,
-  UpdateProfileImageRequest
-} from '@lenster/lens';
-import {
-  useBroadcastMutation,
-  useCreateSetProfileImageUriTypedDataMutation,
-  useCreateSetProfileImageUriViaDispatcherMutation,
-  useNftChallengeLazyQuery
-} from '@lenster/lens';
-import getSignature from '@lenster/lib/getSignature';
-import {
-  Button,
-  ErrorMessage,
-  Form,
-  Input,
-  Spinner,
-  useZodForm
-} from '@lenster/ui';
-import errorToast from '@lib/errorToast';
-import { Leafwatch } from '@lib/leafwatch';
-import { t, Trans } from '@lingui/macro';
-import type { FC } from 'react';
-import { useState } from 'react';
-import toast from 'react-hot-toast';
-import { useAppStore } from 'src/store/app';
-import { useNonceStore } from 'src/store/nonce';
-import { useContractWrite, useSignMessage, useSignTypedData } from 'wagmi';
-import { mainnet, polygon, polygonMumbai } from 'wagmi/chains';
-import { object, string } from 'zod';
+import type { Profile } from '@lenster/lens';
+import formatHandle from '@lenster/lib/formatHandle';
+import getAvatar from '@lenster/lib/getAvatar';
+import { Button, Image } from '@lenster/ui';
+import { Trans } from '@lingui/macro';
+import { type FC, useState } from 'react';
 
-const editNftPictureSchema = object({
-  contractAddress: string()
-    .max(42, { message: t`Contract address should be within 42 characters` })
-    .regex(Regex.ethereumAddress, { message: t`Invalid Contract address` }),
-  tokenId: string()
-});
+import NftAvatarModal from './NftAvatarModal';
 
 interface NftPictureProps {
-  profile: Profile & { picture: NftImage };
+  profile: Profile;
 }
 
 const NftPicture: FC<NftPictureProps> = ({ profile }) => {
-  const userSigNonce = useNonceStore((state) => state.userSigNonce);
-  const setUserSigNonce = useNonceStore((state) => state.setUserSigNonce);
-  const currentProfile = useAppStore((state) => state.currentProfile);
-  const [isLoading, setIsLoading] = useState(false);
-  const [chainId, setChainId] = useState<number>(
-    profile?.picture?.chainId || mainnet.id
-  );
-  const { signMessageAsync } = useSignMessage();
-
-  const form = useZodForm({
-    schema: editNftPictureSchema,
-    defaultValues: {
-      contractAddress: profile?.picture?.contractAddress,
-      tokenId: profile?.picture?.tokenId
-    }
-  });
-
-  // Dispatcher
-  const canUseRelay = currentProfile?.dispatcher?.canUseRelay;
-  const isSponsored = currentProfile?.dispatcher?.sponsor;
-
-  const onCompleted = (__typename?: 'RelayError' | 'RelayerResult') => {
-    if (__typename === 'RelayError') {
-      return;
-    }
-
-    setIsLoading(false);
-    toast.success(t`Avatar updated successfully!`);
-    Leafwatch.track(SETTINGS.PROFILE.SET_NFT_PICTURE);
-  };
-
-  const onError = (error: any) => {
-    setIsLoading(false);
-    errorToast(error);
-  };
-
-  const { signTypedDataAsync } = useSignTypedData({ onError });
-  const { error, write } = useContractWrite({
-    address: LENSHUB_PROXY,
-    abi: LensHub,
-    functionName: 'setProfileImageURI',
-    onSuccess: () => onCompleted(),
-    onError
-  });
-
-  const [loadChallenge] = useNftChallengeLazyQuery();
-  const [broadcast] = useBroadcastMutation({
-    onCompleted: ({ broadcast }) => onCompleted(broadcast.__typename)
-  });
-  const [createSetProfileImageURITypedData] =
-    useCreateSetProfileImageUriTypedDataMutation({
-      onCompleted: async ({ createSetProfileImageURITypedData }) => {
-        const { id, typedData } = createSetProfileImageURITypedData;
-        const signature = await signTypedDataAsync(getSignature(typedData));
-        setUserSigNonce(userSigNonce + 1);
-        const { data } = await broadcast({
-          variables: { request: { id, signature } }
-        });
-        if (data?.broadcast.__typename === 'RelayError') {
-          const { profileId, imageURI } = typedData.value;
-          return write?.({ args: [profileId, imageURI] });
-        }
-      },
-      onError
-    });
-
-  const [createSetProfileImageURIViaDispatcher] =
-    useCreateSetProfileImageUriViaDispatcherMutation({
-      onCompleted: ({ createSetProfileImageURIViaDispatcher }) =>
-        onCompleted(createSetProfileImageURIViaDispatcher.__typename),
-      onError
-    });
-
-  const createViaDispatcher = async (request: UpdateProfileImageRequest) => {
-    const { data } = await createSetProfileImageURIViaDispatcher({
-      variables: { request }
-    });
-    if (
-      data?.createSetProfileImageURIViaDispatcher?.__typename === 'RelayError'
-    ) {
-      return await createSetProfileImageURITypedData({
-        variables: {
-          options: { overrideSigNonce: userSigNonce },
-          request
-        }
-      });
-    }
-  };
-
-  const setAvatar = async (contractAddress: string, tokenId: string) => {
-    if (!currentProfile) {
-      return toast.error(Errors.SignWallet);
-    }
-
-    try {
-      setIsLoading(true);
-      const challengeRes = await loadChallenge({
-        variables: {
-          request: {
-            ethereumAddress: currentProfile?.ownedBy,
-            nfts: [
-              {
-                contractAddress,
-                tokenId,
-                chainId
-              }
-            ]
-          }
-        }
-      });
-
-      const signature = await signMessageAsync({
-        message: challengeRes?.data?.nftOwnershipChallenge?.text as string
-      });
-
-      const request: UpdateProfileImageRequest = {
-        profileId: currentProfile?.id,
-        nftData: {
-          id: challengeRes?.data?.nftOwnershipChallenge?.id,
-          signature
-        }
-      };
-
-      if (canUseRelay && isSponsored) {
-        return await createViaDispatcher(request);
-      }
-
-      return await createSetProfileImageURITypedData({
-        variables: {
-          options: { overrideSigNonce: userSigNonce },
-          request
-        }
-      });
-    } catch (error) {
-      onError(error);
-    }
-  };
+  const [showNftAvatarModal, setShowNftAvatarModal] = useState<boolean>(false);
 
   return (
-    <Form
-      form={form}
-      className="space-y-4"
-      onSubmit={async ({ contractAddress, tokenId }) => {
-        await setAvatar(contractAddress, tokenId);
-      }}
-    >
-      {error && (
-        <ErrorMessage
-          className="mb-3"
-          title={t`Transaction failed!`}
-          error={error}
-        />
-      )}
-      <div>
-        <div className="label">Chain</div>
-        <div>
-          <select
-            className="focus:border-brand-500 focus:ring-brand-400 w-full rounded-xl border border-gray-300 bg-white outline-none dark:border-gray-700 dark:bg-gray-800"
-            onChange={(e) => setChainId(parseInt(e.target.value))}
-            value={chainId}
-          >
-            {IS_MAINNET && <option value={mainnet.id}>Ethereum</option>}
-            <option value={IS_MAINNET ? polygon.id : polygonMumbai.id}>
-              {IS_MAINNET ? 'Polygon' : 'Mumbai'}
-            </option>
-          </select>
-        </div>
-      </div>
-      <Input
-        label={t`Contract Address`}
-        type="text"
-        placeholder="0x277f5959e22f94d5bd4c2cc0a77c4c71f31da3ac"
-        {...form.register('contractAddress')}
-      />
-      <Input
-        label={t`Token Id`}
-        type="text"
-        placeholder="1"
-        {...form.register('tokenId')}
+    <div>
+      <Image
+        src={getAvatar(profile)}
+        loading="lazy"
+        className={'mb-4 max-w-xs rounded-lg'}
+        alt={formatHandle(profile?.handle)}
       />
       <Button
-        className="ml-auto"
-        type="submit"
-        disabled={isLoading}
-        icon={
-          isLoading ? <Spinner size="xs" /> : <PencilIcon className="h-4 w-4" />
-        }
+        icon={<PencilIcon className="h-4 w-4" />}
+        onClick={() => setShowNftAvatarModal(true)}
       >
-        <Trans>Save</Trans>
+        <Trans>Choose NFT Avatar</Trans>
       </Button>
-    </Form>
+      <NftAvatarModal
+        showNftAvatarModal={showNftAvatarModal}
+        setShowNftAvatarModal={setShowNftAvatarModal}
+      />
+    </div>
   );
 };
 
diff --git a/apps/web/src/components/Shared/Shimmer/NftShimmer.tsx b/apps/web/src/components/Shared/Shimmer/NftShimmer.tsx
index 9ee4b857d367..63e864e8a50d 100644
--- a/apps/web/src/components/Shared/Shimmer/NftShimmer.tsx
+++ b/apps/web/src/components/Shared/Shimmer/NftShimmer.tsx
@@ -4,7 +4,7 @@ import type { FC } from 'react';
 const NftShimmer: FC = () => {
   return (
     <Card>
-      <div className="shimmer h-52 space-y-4 sm:h-80 md:rounded-t-[10px]" />
+      <div className="shimmer h-52 space-y-4 sm:h-80 md:h-40 md:rounded-t-[10px]" />
       <div className="space-y-2 border-t p-5 dark:border-gray-700">
         <div className="shimmer h-3 w-7/12 rounded-lg" />
         <div className="shimmer h-3 w-1/3 rounded-lg" />
diff --git a/apps/web/src/components/Shared/Shimmer/NftsShimmer.tsx b/apps/web/src/components/Shared/Shimmer/NftsShimmer.tsx
index 57c27c2cef7e..abe4790f15d2 100644
--- a/apps/web/src/components/Shared/Shimmer/NftsShimmer.tsx
+++ b/apps/web/src/components/Shared/Shimmer/NftsShimmer.tsx
@@ -4,7 +4,11 @@ import NftShimmer from './NftShimmer';
 
 const NftsShimmer: FC = () => {
   return (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+    <div className="grid h-[fit-content] w-[100%] grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
+      <NftShimmer />
+      <NftShimmer />
+      <NftShimmer />
+      <NftShimmer />
       <NftShimmer />
       <NftShimmer />
       <NftShimmer />