diff --git a/cspell-config/cspell-misc.txt b/cspell-config/cspell-misc.txt
index 80a1e34..28f192e 100644
--- a/cspell-config/cspell-misc.txt
+++ b/cspell-config/cspell-misc.txt
@@ -27,3 +27,4 @@ usdc
 // examples/nft-quest
 Fren
 fren
+nfts
diff --git a/examples/nft-quest/components/zk/panel/section.vue b/examples/nft-quest/components/zk/panel/section.vue
index 64521c1..54627fc 100644
--- a/examples/nft-quest/components/zk/panel/section.vue
+++ b/examples/nft-quest/components/zk/panel/section.vue
@@ -32,7 +32,7 @@ const props = defineProps<{
 }>();
 
 const headerUI = twMerge(
-  "px-4 flex items-center bg-neutral-100 rounded-t-zk py-2 dark:bg-neutral-950",
+  "p-4 flex items-center bg-neutral-100 rounded-t-zk dark:bg-neutral-950",
   props.ui?.header,
 );
 
@@ -51,7 +51,7 @@ const bodyUI = computed(() => {
 });
 
 const footerUI = twMerge(
-  "bg-neutral-100 rounded-b-zk p-2 px-4 dark:bg-neutral-950",
+  "flex justify-center bg-neutral-100 rounded-b-zk p-2 px-4 dark:bg-neutral-950",
   props.ui?.footer,
 );
 </script>
diff --git a/packages/auth-server/abi/ZeekNFTQuest.ts b/packages/auth-server/abi/ZeekNFTQuest.ts
new file mode 100644
index 0000000..162d1d2
--- /dev/null
+++ b/packages/auth-server/abi/ZeekNFTQuest.ts
@@ -0,0 +1,427 @@
+export const ZeekNftQuestAbi = [
+  {
+    inputs: [
+      {
+        internalType: "string",
+        name: "baseTokenURI",
+        type: "string",
+      },
+    ],
+    stateMutability: "nonpayable",
+    type: "constructor",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "owner",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "approved",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "Approval",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "owner",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "operator",
+        type: "address",
+      },
+      {
+        indexed: false,
+        internalType: "bool",
+        name: "approved",
+        type: "bool",
+      },
+    ],
+    name: "ApprovalForAll",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "previousOwner",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "newOwner",
+        type: "address",
+      },
+    ],
+    name: "OwnershipTransferred",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      {
+        indexed: true,
+        internalType: "address",
+        name: "from",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        indexed: true,
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "Transfer",
+    type: "event",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "approve",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "owner",
+        type: "address",
+      },
+    ],
+    name: "balanceOf",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "getApproved",
+    outputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "owner",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "operator",
+        type: "address",
+      },
+    ],
+    name: "isApprovedForAll",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+    ],
+    name: "mint",
+    outputs: [
+      {
+        internalType: "uint256",
+        name: "",
+        type: "uint256",
+      },
+    ],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "name",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "owner",
+    outputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "ownerOf",
+    outputs: [
+      {
+        internalType: "address",
+        name: "",
+        type: "address",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "renounceOwnership",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "from",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "safeTransferFrom",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "from",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+      {
+        internalType: "bytes",
+        name: "data",
+        type: "bytes",
+      },
+    ],
+    name: "safeTransferFrom",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "operator",
+        type: "address",
+      },
+      {
+        internalType: "bool",
+        name: "approved",
+        type: "bool",
+      },
+    ],
+    name: "setApprovalForAll",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "bytes4",
+        name: "interfaceId",
+        type: "bytes4",
+      },
+    ],
+    name: "supportsInterface",
+    outputs: [
+      {
+        internalType: "bool",
+        name: "",
+        type: "bool",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "symbol",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "tokenURI",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "tokenURI",
+    outputs: [
+      {
+        internalType: "string",
+        name: "",
+        type: "string",
+      },
+    ],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "from",
+        type: "address",
+      },
+      {
+        internalType: "address",
+        name: "to",
+        type: "address",
+      },
+      {
+        internalType: "uint256",
+        name: "tokenId",
+        type: "uint256",
+      },
+    ],
+    name: "transferFrom",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      {
+        internalType: "address",
+        name: "newOwner",
+        type: "address",
+      },
+    ],
+    name: "transferOwnership",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+] as const;
diff --git a/packages/auth-server/components/dashboard/assets.vue b/packages/auth-server/components/dashboard/assets.vue
index a59ebce..eb37f76 100644
--- a/packages/auth-server/components/dashboard/assets.vue
+++ b/packages/auth-server/components/dashboard/assets.vue
@@ -1,72 +1,73 @@
 <template>
-  <ZkPanelSection
-    title="Assets"
-    :ui="{ title: 'py-2', footer: 'flex justify-center' }"
-  >
-    <ZkTableBody>
-      <template v-if="filteredBalances.length === 0">
-        <ZkTableRow>
-          <div class="w-full text-center text-neutral-500 py-4 flex items-center justify-center">
-            <ZkIcon
-              icon="savings"
-              class="mr-2 !text-4xl"
-            />
-            We can't find any balances related to this account.
-          </div>
-        </ZkTableRow>
-      </template>
-      <template v-else>
-        <ZkTableRow
-          v-for="(balance, balanceAddress) in filteredBalances"
-          :key="balanceAddress"
-        >
-          <ZkTableCellData>
-            <img
-              v-if="balance.token.iconURL"
-              :src="balance.token.iconURL"
-              alt="Thumbnail"
-              class="w-12 h-12 rounded"
-            >
-            <ZkIconThumbnail
-              v-else
-              :icon="'toll'"
-            />
-          </ZkTableCellData>
-          <ZkTableCellData class="flex-auto">
-            {{ balance.token.symbol }}
-            <template
-              v-if="balance.token.name"
-              #sub
-            >
-              {{ balance.token.name }}
-            </template>
-          </ZkTableCellData>
-          <ZkTableCellData class="text-right">
-            <span class="font-bold">
-              {{ formatUnits(BigInt(balance.balance), balance.token.decimals) }}
-            </span>
-            <template
-              v-if="balance.token.usdPrice"
-              #sub
-            >
-              {{ formatBalance(balance.token.usdValue) }}
-            </template>
-          </ZkTableCellData>
-        </ZkTableRow>
-      </template>
-    </ZkTableBody>
-    <template
-      v-if="hasMoreToShow"
-      #footer
+  <div>
+    <ZkPanelSection
+      title="Assets"
     >
-      <ZkButton
-        type="secondary"
-        @click="showAll = !showAll"
+      <ZkTableBody>
+        <template v-if="filteredBalances.length === 0">
+          <ZkTableRow>
+            <div class="w-full text-center text-neutral-500 py-4 flex items-center justify-center">
+              <ZkIcon
+                icon="savings"
+                class="mr-2 !text-4xl"
+              />
+              We can't find any balances related to this account.
+            </div>
+          </ZkTableRow>
+        </template>
+        <template v-else>
+          <ZkTableRow
+            v-for="(balance, balanceAddress) in filteredBalances"
+            :key="balanceAddress"
+          >
+            <ZkTableCellData>
+              <img
+                v-if="balance.token.iconURL"
+                :src="balance.token.iconURL"
+                alt="Thumbnail"
+                class="w-12 h-12 rounded"
+              >
+              <ZkIconThumbnail
+                v-else
+                :icon="'toll'"
+              />
+            </ZkTableCellData>
+            <ZkTableCellData class="flex-auto">
+              {{ balance.token.symbol }}
+              <template
+                v-if="balance.token.name"
+                #sub
+              >
+                {{ balance.token.name }}
+              </template>
+            </ZkTableCellData>
+            <ZkTableCellData class="text-right pr-2">
+              <span class="font-bold">
+                {{ formatUnits(BigInt(balance.balance), balance.token.decimals) }}
+              </span>
+              <template
+                v-if="balance.token.usdPrice"
+                #sub
+              >
+                {{ formatBalance(balance.token.usdValue) }}
+              </template>
+            </ZkTableCellData>
+          </ZkTableRow>
+        </template>
+      </ZkTableBody>
+      <template
+        v-if="hasMoreToShow"
+        #footer
       >
-        {{ showAll ? 'Show less' : `View all (${Object.entries(assets?.balances || {}).filter(([, balance]) => balance.token !== null).length})` }}
-      </ZkButton>
-    </template>
-  </ZkPanelSection>
+        <ZkButton
+          type="secondary"
+          @click="showAll = !showAll"
+        >
+          {{ showAll ? 'Show less' : `View all (${Object.entries(assets?.balances || {}).filter(([, balance]) => balance.token !== null).length})` }}
+        </ZkButton>
+      </template>
+    </ZkPanelSection>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/auth-server/components/dashboard/nfts.vue b/packages/auth-server/components/dashboard/nfts.vue
new file mode 100644
index 0000000..dc5b89f
--- /dev/null
+++ b/packages/auth-server/components/dashboard/nfts.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <ZkPanelSection
+      title="NFTs"
+    >
+      <ZkTableBody>
+        <NftZeekNftQuest />
+      </ZkTableBody>
+    </ZkPanelSection>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/packages/auth-server/components/nft/zeek-nft-quest.vue b/packages/auth-server/components/nft/zeek-nft-quest.vue
new file mode 100644
index 0000000..ef0560a
--- /dev/null
+++ b/packages/auth-server/components/nft/zeek-nft-quest.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <ZkTableRow
+      v-if="hasNft"
+      ui="px-4"
+    >
+      <ZkTableCellData>
+        <video
+          autoplay
+          loop
+          muted
+          class="aspect-square max-w-[68px]"
+        >
+          <source
+            :src="nftMetadata?.animation_url"
+            type="video/mp4"
+          >
+        </video>
+      </ZkTableCellData>
+      <ZkTableCellData class="flex flex-col justify-center">
+        <ZkTableCellData class="flex-auto text-sm">
+          {{ nftMetadata?.description }}
+          <template #sub>
+            NFT Quest
+          </template>
+        </ZkTableCellData>
+      </ZkTableCellData>
+    </ZkTableRow>
+    <ZkTableRow
+      v-else
+      ui="px-4"
+    >
+      <ZkTableCellData class="w-full text-center text-neutral-500 py-4 flex items-center justify-center">
+        We can't find any NFTs related to this account.
+        <br>Try collecting your first NFT at <a
+          href="https://nft.zksync.dev"
+          target="_blank"
+          class="text-blue-500"
+        >NFT Quest</a>.
+      </ZkTableCellData>
+    </ZkTableRow>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Address } from "viem";
+
+import { ZeekNftQuestAbi } from "~/abi/ZeekNFTQuest";
+
+const runtimeConfig = useRuntimeConfig();
+const { address } = useAccountStore();
+const chainId = runtimeConfig.public.chainId as SupportedChainId;
+const nftAddress = runtimeConfig.public[chainId].nftQuestAddress as Address;
+const nftMetadata = ref<null | { animation_url: string; background_color: string; description: string; image: string }>(null);
+const hasNft = ref(false);
+
+const getNFTTransactions = async function () {
+  const { getPublicClient, defaultChain } = useClientStore();
+
+  const client = getPublicClient({ chainId: chainId ?? defaultChain.id });
+  const res = await client.readContract({
+    address: nftAddress,
+    abi: ZeekNftQuestAbi,
+    functionName: "balanceOf",
+    args: [address as Address],
+  });
+
+  if (res) {
+    hasNft.value = true;
+  } else {
+    hasNft.value = false;
+    return;
+  }
+
+  const fetchNftMetadata = await useNftMetadata({ address: nftAddress, abi: ZeekNftQuestAbi });
+  nftMetadata.value = fetchNftMetadata.data.value as { animation_url: string; background_color: string; description: string; image: string };
+};
+
+await getNFTTransactions();
+</script>
diff --git a/packages/auth-server/composables/useNftMetadata.ts b/packages/auth-server/composables/useNftMetadata.ts
new file mode 100644
index 0000000..1b28b1b
--- /dev/null
+++ b/packages/auth-server/composables/useNftMetadata.ts
@@ -0,0 +1,23 @@
+import type { Abi, Address } from "viem";
+
+export const useNftMetadata = async ({
+  chainId,
+  address,
+  abi,
+}: { chainId?: SupportedChainId; address: Address; abi: Abi }) => {
+  const { getPublicClient, defaultChain } = useClientStore();
+
+  const client = getPublicClient({ chainId: chainId ?? defaultChain.id });
+  const res = await client.readContract({
+    address: address,
+    abi,
+    functionName: "tokenURI",
+  });
+
+  return await useFetch<{ animation_url: string; background_color: string; description: string; image: string }>(res, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+};
diff --git a/packages/auth-server/nuxt.config.ts b/packages/auth-server/nuxt.config.ts
index 4c4cbe4..9b3ac8b 100644
--- a/packages/auth-server/nuxt.config.ts
+++ b/packages/auth-server/nuxt.config.ts
@@ -1,5 +1,5 @@
 import { defineNuxtConfig } from "nuxt/config";
-import { zksyncInMemoryNode } from "viem/chains";
+import { zksyncInMemoryNode, zksyncSepoliaTestnet } from "viem/chains";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -55,6 +55,12 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       chainId: parseInt(process.env.NUXT_PUBLIC_DEFAULT_CHAIN_ID || "") || zksyncInMemoryNode.id,
+      [zksyncInMemoryNode.id]: {
+        nftQuestAddress: "",
+      },
+      [zksyncSepoliaTestnet.id]: {
+        nftQuestAddress: "0x4D533d3B20b50b57268f189F93bFaf8B39c36AB6",
+      },
     },
   },
 });
diff --git a/packages/auth-server/pages/dashboard/index.vue b/packages/auth-server/pages/dashboard/index.vue
index fcf9b72..3317f06 100644
--- a/packages/auth-server/pages/dashboard/index.vue
+++ b/packages/auth-server/pages/dashboard/index.vue
@@ -10,7 +10,11 @@
       </template>
     </layout-header>
 
-    <dashboard-assets />
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <dashboard-assets />
+
+      <dashboard-nfts />
+    </div>
   </div>
 </template>