diff --git a/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx b/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx
index fbf1f17a..be0a2e53 100644
--- a/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx
+++ b/apps/web/src/app/(routes)/bridge/[address]/TokenList.tsx
@@ -159,9 +159,9 @@ export default function TokenList({ nftContractAddress }: TokenListProps) {
                 cardType="nft"
                 chain={sourceChain}
                 disabled={isAllSelected && !isSelected}
-                image={ownedNft.image}
                 isSelected={isSelected}
                 key={ownedNft.tokenId}
+                media={ownedNft.media}
                 title={ownedNft.name}
               />
             );
diff --git a/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx b/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx
index 86664b5e..be60a4d0 100644
--- a/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx
+++ b/apps/web/src/app/(routes)/bridge/_components/CollectionGrid.tsx
@@ -62,8 +62,8 @@ export default function CollectionGrid({
                 cardType="collection"
                 chain={sourceChain}
                 disabled={!nftCollection.isBridgeable}
-                image={nftCollection.image}
                 isBridgeable={nftCollection.isBridgeable}
+                media={nftCollection.media}
                 numberOfNfts={nftCollection.totalBalance}
                 onClick={() => {}}
                 title={nftCollection.name}
diff --git a/apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx b/apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx
index baae2e8d..aee6eafc 100644
--- a/apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx
+++ b/apps/web/src/app/(routes)/bridge/_components/TransferNftsList.tsx
@@ -50,32 +50,13 @@ export default function TransferNftsList() {
         return (
           <div className="flex justify-between" key={selectedNft.tokenId}>
             <div className="flex items-center gap-4">
-              {selectedNft?.image ? (
-                <Media
-                  alt={selectedNft.tokenName}
-                  className="rounded"
-                  height={52}
-                  src={selectedNft.image}
-                  width={52}
-                />
-              ) : (
-                <>
-                  <Media
-                    alt="empty Nft image"
-                    className="hidden rounded dark:block"
-                    height={52}
-                    src={`/medias/dark/empty_nft.png`}
-                    width={52}
-                  />
-                  <Media
-                    alt="empty Nft image"
-                    className="rounded dark:hidden"
-                    height={52}
-                    src={`/medias/empty_nft.png`}
-                    width={52}
-                  />
-                </>
-              )}
+              <Media
+                alt={selectedNft.tokenName}
+                className="rounded"
+                height={52}
+                media={selectedNft.media}
+                width={52}
+              />
               <div className="flex flex-col">
                 <Typography ellipsable variant="body_text_14">
                   {selectedNft.collectionName}
diff --git a/apps/web/src/app/(routes)/bridge/_hooks/useTransferStarknetNfts.ts b/apps/web/src/app/(routes)/bridge/_hooks/useTransferStarknetNfts.ts
index fe74e24f..53767753 100644
--- a/apps/web/src/app/(routes)/bridge/_hooks/useTransferStarknetNfts.ts
+++ b/apps/web/src/app/(routes)/bridge/_hooks/useTransferStarknetNfts.ts
@@ -140,7 +140,7 @@ export default function useTransferStarknetNfts() {
         setIsSigning(false);
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
       setIsSigning(false);
     }
   }
diff --git a/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx b/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx
index 6c2d0123..ded1e1e0 100644
--- a/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx
+++ b/apps/web/src/app/(routes)/lounge/_components/NftTransferItem.tsx
@@ -86,32 +86,13 @@ export default function NftTransferItem({
         )}
       >
         <div className="flex items-center gap-4">
-          {collectionImage ? (
-            <Media
-              alt="nft"
-              className="rounded-lg"
-              height={62}
-              src={collectionImage}
-              width={62}
-            />
-          ) : (
-            <>
-              <Image
-                alt="empty Nft image"
-                className="hidden aspect-square rounded-lg object-cover dark:block"
-                height={62}
-                src={`/medias/dark/empty_nft.png`}
-                width={62}
-              />
-              <Image
-                alt="empty Nft image"
-                className="aspect-square rounded-lg object-cover dark:hidden"
-                height={62}
-                src={`/medias/empty_nft.png`}
-                width={62}
-              />
-            </>
-          )}
+          <Media
+            alt="nft"
+            className="rounded-lg"
+            height={62}
+            media={{ format: "image", src: collectionImage }}
+            width={62}
+          />
           <div className="text-left">
             <Typography component="p" variant="body_text_bold_14">
               {collectionName} Collection
diff --git a/apps/web/src/app/(routes)/lounge/_components/NftTransferItemContent.tsx b/apps/web/src/app/(routes)/lounge/_components/NftTransferItemContent.tsx
index 941eb4b0..b0643816 100644
--- a/apps/web/src/app/(routes)/lounge/_components/NftTransferItemContent.tsx
+++ b/apps/web/src/app/(routes)/lounge/_components/NftTransferItemContent.tsx
@@ -97,32 +97,13 @@ export default function NftTransferItemContent({
               <div key={nft.tokenName}>
                 <div className="grid grid-cols-[1fr_1fr_1fr_1fr_2.25rem] place-items-start items-center">
                   <div className="flex items-center gap-4">
-                    {nft.image !== undefined ? (
-                      <Media
-                        alt="nft"
-                        className="flex-shrink-0 rounded-md"
-                        height={52}
-                        src={nft.image}
-                        width={52}
-                      />
-                    ) : (
-                      <>
-                        <Media
-                          alt="empty Nft image"
-                          className="hidden aspect-square rounded-lg object-cover dark:block"
-                          height={52}
-                          src={`/medias/dark/empty_nft.png`}
-                          width={52}
-                        />
-                        <Media
-                          alt="empty Nft image"
-                          className="aspect-square rounded-lg object-cover dark:hidden"
-                          height={52}
-                          src={`/medias/empty_nft.png`}
-                          width={52}
-                        />
-                      </>
-                    )}
+                    <Media
+                      alt="nft"
+                      className="flex-shrink-0 rounded-md"
+                      height={52}
+                      media={nft.media}
+                      width={52}
+                    />
                     <div className="text-left">
                       <Typography component="p" variant="body_text_14">
                         {nft.collectionName}
diff --git a/apps/web/src/app/(routes)/portfolio/_components/NftTabsContent.tsx b/apps/web/src/app/(routes)/portfolio/_components/NftTabsContent.tsx
index 03059412..c295b2bd 100644
--- a/apps/web/src/app/(routes)/portfolio/_components/NftTabsContent.tsx
+++ b/apps/web/src/app/(routes)/portfolio/_components/NftTabsContent.tsx
@@ -62,9 +62,9 @@ function AllNftsTabsContent() {
               <NftCard
                 cardType="nft"
                 chain="Ethereum"
-                image={nft.image}
                 isSelected={false}
                 key={`${nft.contractAddress}-${nft.tokenId}`}
+                media={nft.media}
                 title={nft.name}
               />
             );
@@ -78,9 +78,9 @@ function AllNftsTabsContent() {
                 <NftCard
                   cardType="nft"
                   chain="Starknet"
-                  image={nft.image}
                   isSelected={false}
                   key={`${nft.contractAddress}-${nft.tokenId}`}
+                  media={nft.media}
                   title={nft.name}
                 />
               );
@@ -147,9 +147,9 @@ function CollectionsTabsContent() {
               <NftCard
                 cardType="collection"
                 chain="Ethereum"
-                image={collection.image}
                 isSelected={false}
                 key={collection.contractAddress}
+                media={collection.media}
                 numberOfNfts={collection.totalBalance}
                 title={collection.name}
               />
@@ -163,9 +163,9 @@ function CollectionsTabsContent() {
                 <NftCard
                   cardType="collection"
                   chain="Starknet"
-                  image={collection.image}
                   isSelected={false}
                   key={collection.contractAddress}
+                  media={collection.media}
                   numberOfNfts={collection.totalBalance}
                   title={collection.name}
                 />
@@ -222,9 +222,9 @@ function EthereumNTabsContent() {
               <NftCard
                 cardType="nft"
                 chain="Ethereum"
-                image={nft.image}
                 isSelected={false}
                 key={`${nft.contractAddress}-${nft.tokenId}`}
+                media={nft.media}
                 title={nft.name}
               />
             );
@@ -282,9 +282,9 @@ function StarknetTabsContent() {
             <NftCard
               cardType="nft"
               chain="Starknet"
-              image={nft.image}
               isSelected={false}
               key={`${nft.contractAddress}-${nft.tokenId}`}
+              media={nft.media}
               title={nft.name}
             />
           );
diff --git a/apps/web/src/app/(routes)/portfolio/page.tsx b/apps/web/src/app/(routes)/portfolio/page.tsx
index a6af33d6..036e105f 100644
--- a/apps/web/src/app/(routes)/portfolio/page.tsx
+++ b/apps/web/src/app/(routes)/portfolio/page.tsx
@@ -15,9 +15,9 @@ export default function Page() {
 
           <NftsTabs />
 
-          <BridgingQuestBanner className="mt-16" />
+          <BridgingQuestBanner className="my-16" />
 
-          <NftTransferList className="mt-16" variant="lounge" />
+          <NftTransferList variant="lounge" />
         </MainPageContainer>
       </div>
       <Footer />
diff --git a/apps/web/src/app/(routes)/providers.tsx b/apps/web/src/app/(routes)/providers.tsx
index 493dade0..824ce747 100644
--- a/apps/web/src/app/(routes)/providers.tsx
+++ b/apps/web/src/app/(routes)/providers.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import {
-  type Chain,
+  // type Chain,
   // goerli as starknetGoerli,
   mainnet as starknetMainnet,
 } from "@starknet-react/chains";
 import {
   StarknetConfig,
-  jsonRpcProvider,
+  // jsonRpcProvider,
+  publicProvider,
   // publicProvider,
 } from "@starknet-react/core";
 import { ThemeProvider } from "next-themes";
@@ -32,14 +33,14 @@ const wagmiConfig = createConfig({
   },
 });
 
-function starknetRpc(chain: Chain) {
-  if (chain.network === "goerli")
-    return { nodeUrl: `https://juno.testnet.arkproject.dev/` };
+// function starknetRpc(chain: Chain) {
+//   if (chain.network === "goerli")
+//     return { nodeUrl: `https://juno.testnet.arkproject.dev/` };
 
-  return { nodeUrl: `https://juno.mainnet.arkproject.dev/` };
-}
+//   return { nodeUrl: `https://juno.mainnet.arkproject.dev/` };
+// }
 
-// const starknetProvider = publicProvider();
+const starknetProvider = publicProvider();
 
 interface ProvidersProps {
   children: React.ReactNode;
@@ -52,8 +53,8 @@ export default function Providers({ children }: ProvidersProps) {
       // chains={[starknetGoerli]}
       chains={[starknetMainnet]}
       connectors={starknetConnectors}
-      provider={jsonRpcProvider({ rpc: starknetRpc })}
-      // provider={starknetProvider}
+      // provider={jsonRpcProvider({ rpc: starknetRpc })}
+      provider={starknetProvider}
     >
       <WagmiProvider config={wagmiConfig}>
         <WalletModalsProvider>
diff --git a/apps/web/src/app/_abis/bridge_l1_abi.json b/apps/web/src/app/_abis/bridge_l1_abi.json
new file mode 100644
index 00000000..94aea468
--- /dev/null
+++ b/apps/web/src/app/_abis/bridge_l1_abi.json
@@ -0,0 +1,34 @@
+[
+  {
+    "type": "function",
+    "name": "getWhiteListedCollections",
+    "inputs": [],
+    "outputs": [
+      {
+        "name": "",
+        "type": "address[]",
+        "internalType": "address[]"
+      }
+    ],
+    "stateMutability": "view"
+  },
+  {
+    "type": "function",
+    "name": "isWhiteListed",
+    "inputs": [
+      {
+        "name": "collection",
+        "type": "address",
+        "internalType": "address"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool",
+        "internalType": "bool"
+      }
+    ],
+    "stateMutability": "view"
+  }
+]
diff --git a/apps/web/src/app/_components/Media.tsx b/apps/web/src/app/_components/Media.tsx
index a427dc1d..c063d817 100644
--- a/apps/web/src/app/_components/Media.tsx
+++ b/apps/web/src/app/_components/Media.tsx
@@ -1,10 +1,14 @@
 import Image from "next/image";
+import { useTheme } from "next-themes";
+
+import { type NftMedia } from "~/server/api/types";
+/* eslint-disable @next/next/no-img-element */
 
 interface MediaProps {
   alt: string;
   className?: string;
   height: number;
-  src: string;
+  media: NftMedia;
   width: number;
 }
 
@@ -12,12 +16,24 @@ export default function Media({
   alt,
   className,
   height,
-  src,
+  media,
   width,
 }: MediaProps) {
-  const extension = src.split(".").pop();
+  const { resolvedTheme } = useTheme();
+
+  if (media.src === undefined || media.src.length === 0) {
+    return (
+      <Image
+        alt={alt}
+        className={className}
+        height={height}
+        src={`/medias/${resolvedTheme === "dark" ? "dark/" : ""}empty_nft.png`}
+        width={width}
+      />
+    );
+  }
 
-  if (extension === "mp4") {
+  if (media.format === "video") {
     return (
       <video
         autoPlay
@@ -27,17 +43,17 @@ export default function Media({
         muted
         width={width}
       >
-        <source src={src} type="video/mp4" />
+        <source src={media.src} type="video/mp4" />
         Your browser does not support the video tag.
       </video>
     );
   } else {
     return (
-      <Image
+      <img
         alt={alt}
         className={className}
         height={height}
-        src={src}
+        src={media.src}
         width={width}
       />
     );
diff --git a/apps/web/src/app/_components/NftCard/NftCard.tsx b/apps/web/src/app/_components/NftCard/NftCard.tsx
index b2e83c30..bf475e29 100644
--- a/apps/web/src/app/_components/NftCard/NftCard.tsx
+++ b/apps/web/src/app/_components/NftCard/NftCard.tsx
@@ -1,6 +1,8 @@
 import clsx from "clsx";
 import { Typography } from "design-system";
 
+import { type NftMedia } from "~/server/api/types";
+
 import { type Chain } from "../../_types";
 import ConditionalWrapper from "../ConditionalWrapper";
 import NftCardImage from "./NftCardImage";
@@ -10,8 +12,8 @@ type NftCardProps = {
   chain?: Chain;
   className?: string;
   disabled?: boolean;
-  image?: string;
   isSelected: boolean;
+  media: NftMedia;
   onClick?: () => void;
   title: string;
 } & (
@@ -28,8 +30,8 @@ export default function NftCard({
   chain,
   className,
   disabled,
-  image,
   isSelected,
+  media,
   numberOfNfts,
   onClick,
   title,
@@ -68,7 +70,7 @@ export default function NftCard({
           )
         }
       >
-        <NftCardImage chain={chain} imageUrl={image} />
+        <NftCardImage chain={chain} media={media} />
         <div className="mt-3 text-left">
           <div className="flex items-center justify-between">
             <Typography
@@ -82,7 +84,7 @@ export default function NftCard({
             {cardType === "nft" && onClick !== undefined && (
               <div
                 className={clsx(
-                  "h-5 w-5 rounded-full",
+                  "h-5 w-5 flex-shrink-0 rounded-full",
                   isSelected
                     ? "border-[6px] border-primary-source bg-white "
                     : "bg-neutral-300 dark:bg-space-blue-300"
diff --git a/apps/web/src/app/_components/NftCard/NftCardImage.tsx b/apps/web/src/app/_components/NftCard/NftCardImage.tsx
index 0f2e2ce6..9c004ab1 100644
--- a/apps/web/src/app/_components/NftCard/NftCardImage.tsx
+++ b/apps/web/src/app/_components/NftCard/NftCardImage.tsx
@@ -1,49 +1,25 @@
 import Image from "next/image";
-import { useTheme } from "next-themes";
 
 import { CHAIN_LOGOS_BY_NAME } from "~/app/_lib/utils/connectors";
 import { type Chain } from "~/app/_types";
+import { type NftMedia } from "~/server/api/types";
 
 import Media from "../Media";
 
 interface NftCardImageProps {
   chain?: Chain;
-  imageUrl?: string;
+  media: NftMedia;
 }
-export default function NftCardImage({ chain, imageUrl }: NftCardImageProps) {
-  const { resolvedTheme } = useTheme();
-
+export default function NftCardImage({ chain, media }: NftCardImageProps) {
   return (
     <div className="relative">
-      {imageUrl ? (
-        <Media
-          src={
-            imageUrl ??
-            `/medias/${resolvedTheme === "dark" ? "dark/" : ""}empty_nft.png`
-          }
-          alt="Nft image"
-          className="aspect-square h-full w-full rounded-lg object-cover"
-          height={300}
-          width={300}
-        />
-      ) : (
-        <>
-          <Media
-            alt="empty Nft image"
-            className="hidden aspect-square h-full w-full rounded-lg object-cover dark:block"
-            height={300}
-            src={`/medias/dark/empty_nft.png`}
-            width={300}
-          />
-          <Media
-            alt="empty Nft image"
-            className="aspect-square h-full w-full rounded-lg object-cover dark:hidden"
-            height={300}
-            src={`/medias/empty_nft.png`}
-            width={300}
-          />
-        </>
-      )}
+      <Media
+        alt=""
+        className="aspect-square h-full w-full rounded-lg object-cover"
+        height={300}
+        media={media}
+        width={300}
+      />
 
       {chain !== undefined && (
         <Image
diff --git a/apps/web/src/server/api/routers/bridgeRequest.ts b/apps/web/src/server/api/routers/bridgeRequest.ts
index 615a61d3..ecd5a722 100644
--- a/apps/web/src/server/api/routers/bridgeRequest.ts
+++ b/apps/web/src/server/api/routers/bridgeRequest.ts
@@ -93,11 +93,7 @@ export const bridgeRequestRouter = createTRPCRouter({
             past: { requests: [], totalCount: 0 },
           };
         }
-        // if (
-        //   bridgeRequests[0] !== undefined &&
-        //   bridgeRequests[0]?.req.chain_src === "eth"
-        // ) {
-        // }
+
         let requestMetadata: Array<Nft> = [];
         if (bridgeRequests[0]?.req.chain_src === "eth") {
           requestMetadata = await alchemy.nft.getNftMetadataBatch(
diff --git a/apps/web/src/server/api/routers/l1Nfts.ts b/apps/web/src/server/api/routers/l1Nfts.ts
index eac02d1f..736838a9 100644
--- a/apps/web/src/server/api/routers/l1Nfts.ts
+++ b/apps/web/src/server/api/routers/l1Nfts.ts
@@ -1,10 +1,24 @@
 import { Alchemy, Network, NftFilters } from "alchemy-sdk";
+import { createClient, getContract, http } from "viem";
+import { mainnet } from "viem/chains";
 import { z } from "zod";
 
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
 
+import l1_bridge_contract from "../../../app/_abis/bridge_l1_abi.json";
 import { type Collection, type Nft } from "../types";
 
+const viemClient = createClient({
+  chain: mainnet,
+  transport: http(process.env.NEXT_PUBLIC_ALCHEMY_ETHEREUM_RPC_ENDPOINT ?? ""),
+});
+
+const bridgeL1Contract = getContract({
+  abi: l1_bridge_contract,
+  address: process.env.NEXT_PUBLIC_L1_BRIDGE_ADDRESS as `0x${string}`,
+  client: viemClient,
+});
+
 const alchemy = new Alchemy({
   apiKey: process.env.ALCHEMY_API_KEY,
   network: Network.ETH_MAINNET,
@@ -39,18 +53,23 @@ export const l1NftsRouter = createTRPCRouter({
           pageSize,
         });
 
+      const whitelistedCollections =
+        (await bridgeL1Contract.read?.getWhiteListedCollections?.()) as
+          | Array<string>
+          | undefined;
+
       const collections: Array<Collection> = contracts.map((contract) => {
-        const media =
-          contract.address === process.env.EVERAI_L1_CONTRACT_ADDRESS
-            ? contract.media[0]?.raw
-            : contract.media[0]?.thumbnail;
+        const media = contract.media[0];
+        const mediaSrc = media?.gateway ?? media?.thumbnail ?? media?.raw;
+        const mediaFormat = media?.format === "mp4" ? "video" : "image";
+        const isBridgeable =
+          whitelistedCollections !== undefined &&
+          whitelistedCollections.includes(contract.address);
 
         return {
           contractAddress: contract.address,
-          image: media,
-          // isBridgeable:
-          //   contract.address === process.env.EVERAI_L1_CONTRACT_ADDRESS,
-          isBridgeable: true,
+          isBridgeable,
+          media: { format: mediaFormat, src: mediaSrc },
           name: contract.name ?? contract.symbol ?? "Unknown",
           totalBalance: contract.totalBalance,
         };
@@ -77,14 +96,13 @@ export const l1NftsRouter = createTRPCRouter({
       );
 
       return response.map((nft) => {
-        const media =
-          nft.contract.address === process.env.EVERAI_L1_CONTRACT_ADDRESS
-            ? nft.media[0]?.raw
-            : nft.media[0]?.thumbnail;
+        const media = nft.media[0];
+        const mediaSrc = media?.gateway ?? media?.thumbnail ?? media?.raw;
+        const mediaFormat = media?.format === "mp4" ? "video" : "image";
 
         return {
           collectionName: nft.contract.name,
-          image: media,
+          media: { format: mediaFormat, src: mediaSrc },
           tokenId: nft.tokenId,
           tokenName: nft.title.length > 0 ? nft.title : `#${nft.tokenId}`,
         };
@@ -119,14 +137,13 @@ export const l1NftsRouter = createTRPCRouter({
 
       // TODO @YohanTz: Handle videos
       const ownedNfts: Array<Nft> = nfts.map((nft) => {
-        const media =
-          nft.contract.address === process.env.EVERAI_L1_CONTRACT_ADDRESS
-            ? nft.media[0]?.raw
-            : nft.media[0]?.thumbnail;
+        const media = nft.media[0];
+        const mediaSrc = media?.gateway ?? media?.thumbnail ?? media?.raw;
+        const mediaFormat = media?.format === "mp4" ? "video" : "image";
 
         return {
           contractAddress: nft.contract.address,
-          image: media,
+          media: { format: mediaFormat, src: mediaSrc },
           name:
             nft.title.length > 0
               ? nft.title
diff --git a/apps/web/src/server/api/routers/l2Nfts.ts b/apps/web/src/server/api/routers/l2Nfts.ts
index 94b841be..3449925b 100644
--- a/apps/web/src/server/api/routers/l2Nfts.ts
+++ b/apps/web/src/server/api/routers/l2Nfts.ts
@@ -89,18 +89,26 @@ export const l2NftsRouter = createTRPCRouter({
         });
         const contracts =
           (await contractsResponse.json()) as ArkCollectionsApiResponse;
-
         const collections: Array<Collection> = contracts.result.map(
-          (contract) => ({
-            contractAddress: contract.contract_address,
-            image: contract.image,
-
-            isBridgeable:
-              contract.contract_address ===
-              process.env.EVERAI_L2_CONTRACT_ADDRESS,
-            name: contract.name ?? contract.symbol,
-            totalBalance: contract.tokens_count,
-          })
+          (contract) => {
+            const mediaSrc = contract.image?.replace(
+              "ipfs://",
+              process.env.IPFS_GATEWAY ?? ""
+            );
+            const mediaFormat =
+              mediaSrc?.split(".").pop() === "mp4" ? "video" : "image";
+
+            return {
+              contractAddress: contract.contract_address,
+              isBridgeable: true,
+
+              // isBridgeable:
+              //   contract.contract_address ===
+              media: { format: mediaFormat, src: mediaSrc },
+              name: contract.name ?? contract.symbol,
+              totalBalance: contract.tokens_count,
+            };
+          }
         );
 
         return { collections, totalCount: contracts.total_count };
@@ -152,12 +160,21 @@ export const l2NftsRouter = createTRPCRouter({
               validateAndParseAddress(nft.owner) ===
                 validateAndParseAddress(ownerAddress)
           )
-          .map((nft) => ({
-            collectionName: "EveraiDuo",
-            image: nft.metadata?.normalized.image,
-            tokenId: nft.token_id,
-            tokenName: nft.metadata?.normalized.name ?? `#${nft.token_id}`,
-          }));
+          .map((nft) => {
+            const mediaSrc = nft.metadata?.normalized.image?.replace(
+              "ipfs://",
+              process.env.IPFS_GATEWAY ?? ""
+            );
+            const mediaFormat =
+              mediaSrc?.split(".").pop() === "mp4" ? "video" : "image";
+
+            return {
+              collectionName: "EveraiDuo",
+              media: { format: mediaFormat, src: mediaSrc },
+              tokenId: nft.token_id,
+              tokenName: nft.metadata?.normalized.name ?? `#${nft.token_id}`,
+            };
+          });
       } catch (error) {
         console.error("getL2NftMetadataBatch error:", error);
         return [];
@@ -201,15 +218,24 @@ export const l2NftsRouter = createTRPCRouter({
 
         const nfts = (await nftsResponse.json()) as ArkNftsApiResponse;
 
-        const ownedNfts: Array<Nft> = nfts.result.map((nft) => ({
-          contractAddress: nft.contract_address,
-          image: nft.metadata?.normalized.image ?? undefined,
-          name:
-            nft.metadata?.normalized.name?.length ?? 0 > 0
-              ? nft.metadata?.normalized?.name ?? ""
-              : `${nft.token_id}`,
-          tokenId: nft.token_id,
-        }));
+        const ownedNfts: Array<Nft> = nfts.result.map((nft) => {
+          const mediaSrc = nft.metadata?.normalized.image?.replace(
+            "ipfs://",
+            process.env.IPFS_GATEWAY ?? ""
+          );
+          const mediaFormat =
+            mediaSrc?.split(".").pop() === "mp4" ? "video" : "image";
+
+          return {
+            contractAddress: nft.contract_address,
+            media: { format: mediaFormat, src: mediaSrc },
+            name:
+              nft.metadata?.normalized.name?.length ?? 0 > 0
+                ? nft.metadata?.normalized?.name ?? ""
+                : `${nft.token_id}`,
+            tokenId: nft.token_id,
+          };
+        });
 
         return { ownedNfts, totalCount: nfts.total_count };
       } catch (error) {
diff --git a/apps/web/src/server/api/types.ts b/apps/web/src/server/api/types.ts
index c8f39957..db0021f9 100644
--- a/apps/web/src/server/api/types.ts
+++ b/apps/web/src/server/api/types.ts
@@ -1,14 +1,16 @@
+export type NftMedia = { format: string; src: string | undefined };
+
 export type Nft = {
   contractAddress: string;
-  image: string | undefined;
+  media: NftMedia;
   name: string;
   tokenId: string;
 };
 
 export type Collection = {
   contractAddress: string;
-  image: string | undefined;
   isBridgeable: boolean;
+  media: NftMedia;
   name: string;
   totalBalance: number;
 };
diff --git a/turbo.json b/turbo.json
index e417fbbb..4db019c2 100644
--- a/turbo.json
+++ b/turbo.json
@@ -18,8 +18,6 @@
     "HOSTNAME_L1",
     "HOSTNAME_L2",
     "L2_DEPLOYER_PRIVATE_KEY",
-    "EVERAI_L1_CONTRACT_ADDRESS",
-    "EVERAI_L2_CONTRACT_ADDRESS",
     "L2_DEPLOYER_ADDRESS",
     "NEXT_PUBLIC_ARKLANE_API_DOMAIN",
     "GOERLI_ALCHEMY_KEY",
@@ -30,7 +28,8 @@
     "NEXT_PUBLIC_ARK_API_DOMAIN",
     "VERCEL_URL",
     "NODE_ENV",
-    "PORT"
+    "PORT",
+    "IPFS_GATEWAY"
   ],
   "pipeline": {
     "build:l1": {