diff --git a/app/components/Snapshot/Snapshot.tsx b/app/components/Snapshot/Snapshot.tsx
index a68a469..ee1e23c 100644
--- a/app/components/Snapshot/Snapshot.tsx
+++ b/app/components/Snapshot/Snapshot.tsx
@@ -216,7 +216,24 @@ const SkeletonImagePreview = () => {
     </StyledSkeletonGridContainer>
   )
 }
+export interface MintedNFT {
+  type: 'minted'
+  tokenId: string
+  userAddress: string
+  gameGeneration: string
+  transactionHash: string
+  contractAddress: string
+}
+
+export interface PendingNFT {
+  type: 'pending'
+  generation: string
+  status: string
+  txHash: string
+  userId: string
+}
 
+export type NFT = MintedNFT | PendingNFT
 interface Props {
   readonly onClick?: React.MouseEventHandler<HTMLLIElement>
   readonly onClickTwitter?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>
@@ -228,6 +245,8 @@ interface Props {
   readonly initial?: AnimationProps['initial']
   readonly animate?: AnimationProps['animate']
   readonly exit?: AnimationProps['exit']
+  readonly refreshPage?: () => void
+  readonly nft?: NFT
 }
 
 const Snapshot = ({
@@ -242,6 +261,7 @@ const Snapshot = ({
   animate,
   exit,
   nft,
+  refreshPage,
 }: Props) => {
   const formattedUser = user ? getShortChecksumAddress(user) : null
 
@@ -292,7 +312,7 @@ const Snapshot = ({
             width: '100%',
           }}
         >
-          {gameGeneration && <SnapshotMint generation={gameGeneration} nft={nft} />}
+          {gameGeneration && <SnapshotMint generation={gameGeneration} nft={nft} refreshPage={refreshPage} />}
           {large && (
             <Button
               tertiary
diff --git a/app/components/Snapshot/SnapshotMint.tsx b/app/components/Snapshot/SnapshotMint.tsx
index 596fc7f..181227c 100644
--- a/app/components/Snapshot/SnapshotMint.tsx
+++ b/app/components/Snapshot/SnapshotMint.tsx
@@ -6,10 +6,11 @@ import { useAccount, useProvider } from '@starknet-react/core'
 import { CallData, cairo } from 'starknet'
 import Button from '../Button'
 import { useRootLoaderData } from '~/hooks/useRootLoaderData'
-import { useFetcher } from '@remix-run/react'
 import { useNftContract } from '~/hooks/useNftContract'
 import { useCheckNetwork } from '~/helpers/useCheckNetwork'
 import { useDialog } from '~/hooks/Dialog'
+import { useUser } from '~/hooks/useUser'
+import type { NFT } from './Snapshot'
 
 const MintedAddressContainer = styled.div`
   display: flex;
@@ -37,16 +38,56 @@ const MintedAddressContainer = styled.div`
   }
 `
 
-export const SnapshotMint = ({ generation, nft }: { generation: string }) => {
+interface Props {
+  generation: string
+  nft?: NFT
+  refreshPage?: () => void
+}
+export const SnapshotMint = ({ generation, nft, refreshPage }: Props) => {
+  const user = useUser()
   const { account } = useAccount()
   const { provider } = useProvider()
   const { env } = useRootLoaderData()
   const starkscan = env.USE_MAINNET ? 'https://starkscan.co' : 'https://testnet.starkscan.co'
-  const fetcher = useFetcher()
   const { isCorrectNetwork } = useCheckNetwork()
   const [_, setDialog] = useDialog()
   const { contract: nftContract } = useNftContract()
 
+  const addMintToPending = async (generationNumber: number, txHash: string) => {
+    const formData = new FormData()
+
+    formData.append('generation', String(generationNumber))
+    formData.append('txHash', txHash)
+    formData.append('userId', user?.userId || '')
+    formData.append('status', 'RECEIVED')
+
+    const res = await fetch('/api/mints', {
+      body: formData,
+      method: 'post',
+    })
+
+    const data = await res.json()
+    if (data.status === 'success') {
+      refreshPage?.()
+    }
+  }
+
+  const onMintError = async (generationNumber: string) => {
+    const formData = new FormData()
+
+    formData.append('generation', String(generationNumber))
+
+    const res = await fetch('/api/mints', {
+      body: formData,
+      method: 'delete',
+    })
+
+    const data = await res.json()
+    if (data.status === 'success') {
+      refreshPage?.()
+    }
+  }
+
   const mintGame = async (generation: string) => {
     if (!account || !nftContract) {
       return
@@ -69,57 +110,54 @@ export const SnapshotMint = ({ generation, nft }: { generation: string }) => {
         calldata: CallData.compile([generation]),
       },
     ])
+
+    addMintToPending(generation, multiCall.transaction_hash)
+
     return provider.waitForTransaction(multiCall.transaction_hash)
   }
 
-  const isLoading = false
-  if (!nft) {
+  const isPending = nft?.type === 'pending'
+  if (!nft || isPending) {
     return (
       <Button
         secondary
-        label={isLoading ? 'Pending' : 'Mint as NFT'}
-        isLoading={isLoading}
-        icon={isLoading}
+        label={isPending ? 'Pending' : 'Mint as NFT'}
+        isLoading={isPending}
+        icon={isPending}
         color="#F3E9E1"
+        disabled={isPending}
         onClick={(e) => {
           e.stopPropagation()
           if (!isCorrectNetwork) {
             setDialog('WrongNetworkDialog')
             return
           }
-          mintGame(generation).then((minted) => {
-            console.log('minted', minted)
-            fetcher.load('/snapshots')
-          })
+          mintGame(generation).catch((err) => onMintError(generation))
         }}
       />
     )
   }
 
-  if (nft) {
-    return (
-      <MintedAddressContainer>
-        <FaCircleCheck color="#27CE60" />
-        <div className="address">
-          MINTED ON CHAIN:
-          <a
-            href={`${starkscan}/nft/${nft.contractAddress}/${nft.gameGeneration}`}
-            target="_blank"
-            rel="noreferrer"
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '2px',
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {getShortMintAddress(nft.transactionHash, 5, 3)}
-            <HiOutlineExternalLink />
-          </a>
-        </div>
-      </MintedAddressContainer>
-    )
-  }
-
-  return null
+  return (
+    <MintedAddressContainer>
+      <FaCircleCheck color="#27CE60" />
+      <div className="address">
+        MINTED ON CHAIN:
+        <a
+          href={`${starkscan}/nft/${nft.contractAddress}/${nft.gameGeneration}`}
+          target="_blank"
+          rel="noreferrer"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2px',
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {getShortMintAddress(nft.transactionHash, 5, 3)}
+          <HiOutlineExternalLink />
+        </a>
+      </div>
+    </MintedAddressContainer>
+  )
 }
diff --git a/app/helpers/addMintedNftDetails.ts b/app/helpers/addMintedNftDetails.ts
new file mode 100644
index 0000000..78c1d01
--- /dev/null
+++ b/app/helpers/addMintedNftDetails.ts
@@ -0,0 +1,48 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { getChecksumAddress } from 'starknet'
+import type { MintedNFT } from '~/components/Snapshot/Snapshot'
+const targetContractAddress = process.env.NFT_CONTRACT_ADDRESS
+
+function transformNfts(nfts) {
+  const nftsByGeneration = {}
+  nfts.forEach((nft) => {
+    if (nft.token_id) {
+      nftsByGeneration[nft.token_id] = nft
+    }
+  })
+  return nftsByGeneration
+}
+
+export function addMintedNftDetails(snapshots, nfts) {
+  const nftsByGeneration = transformNfts(nfts)
+
+  const snapshotsWithNfts = snapshots.map((snapshot) => {
+    const snapshotWithNft = { ...snapshot }
+    const nft = nftsByGeneration[snapshot.gameGeneration]
+
+    if (nft && getChecksumAddress(nft.contract_address) === getChecksumAddress(targetContractAddress)) {
+      const gameModeAttribute = nft.attributes.find((attr) => attr.trait_type === 'Game Mode')
+
+      const nftData: MintedNFT = {
+        type: 'minted',
+        tokenId: nft.token_id,
+        userAddress: nft.minted_by_address,
+        gameGeneration: snapshot.gameGeneration,
+        transactionHash: nft.minted_at_transaction_hash,
+        contractAddress: nft.contract_address,
+      }
+      if (gameModeAttribute) {
+        nftData.gameMode = gameModeAttribute.value
+      }
+      snapshotWithNft.nft = nftData
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return snapshotWithNft
+  })
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return snapshotsWithNfts
+}
diff --git a/app/helpers/addPendingNftDetails.ts b/app/helpers/addPendingNftDetails.ts
new file mode 100644
index 0000000..d53f6bb
--- /dev/null
+++ b/app/helpers/addPendingNftDetails.ts
@@ -0,0 +1,28 @@
+import type { PendingNFT } from '~/components/Snapshot/Snapshot'
+
+export const addPendingNftDetails = (snapshotsWithMintedNfts: any[], pendingMints: any[]) => {
+  const idsToRemove: number[] = []
+  const snapshotsWithPendingAndMintedNfts = [...snapshotsWithMintedNfts]
+  snapshotsWithPendingAndMintedNfts.forEach((snapshot: any) => {
+    const pendingMint = pendingMints.find((mint) => mint.generation == snapshot.gameGeneration)
+
+    if (pendingMint) {
+      if (snapshot.nft) {
+        idsToRemove.push(pendingMint.generation)
+        // remove pending mint from db
+      } else {
+        const pendingNft: PendingNFT = {
+          type: 'pending',
+          generation: pendingMint.generation,
+          status: pendingMint.status,
+          txHash: pendingMint.txHash,
+          userId: pendingMint.userId,
+        }
+
+        snapshot.nft = pendingNft
+      }
+    }
+  })
+
+  return { snapshotsWithPendingAndMintedNfts, idsToRemove }
+}
diff --git a/app/helpers/mergeSnapshotsWithStarkscanNFTs.ts b/app/helpers/mergeSnapshotsWithStarkscanNFTs.ts
deleted file mode 100644
index aebc059..0000000
--- a/app/helpers/mergeSnapshotsWithStarkscanNFTs.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-
-import { getChecksumAddress } from 'starknet'
-const targetContractAddress = process.env.NFT_CONTRACT_ADDRESS
-
-function transformNfts(nfts) {
-  const nftsByGeneration = {}
-  nfts.forEach((nft) => {
-    if (nft.token_id) {
-      nftsByGeneration[nft.token_id] = nft
-    }
-  })
-  return nftsByGeneration
-}
-
-export function mergeSnapshotsWithNFTs(snapshots, nfts) {
-  const nftsByGeneration = transformNfts(nfts)
-
-  const snapshotsWithNfts = snapshots.map((snapshot) => {
-    const snapshotWithNft = { ...snapshot }
-    const nft = nftsByGeneration[snapshot.gameGeneration]
-
-    if (nft && getChecksumAddress(nft.contract_address) === getChecksumAddress(targetContractAddress)) {
-      const gameModeAttribute = nft.attributes.find((attr) => attr.trait_type === 'Game Mode')
-
-      const nftData = {
-        ...nft.raw?.metadata,
-        gameGeneration: snapshot.gameGeneration,
-        transactionHash: nft.minted_at_transaction_hash,
-        contractAddress: nft.contract_address,
-      }
-      if (gameModeAttribute) {
-        nftData.gameMode = gameModeAttribute.value
-      }
-      delete nftData.attributes
-      snapshotWithNft.nft = nftData
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    return snapshotWithNft
-  })
-
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  return snapshotsWithNfts
-}
-
-// Sample data
-// nft_id: '0x00f4ad66ea867300f97ec6e47c2d0aaa201367c1265a00b6b643fab77531bb82_5',
-// contract_address: '0x00f4ad66ea867300f97ec6e47c2d0aaa201367c1265a00b6b643fab77531bb82',
-// token_id: '5',
-// name: 'GoL2 #5',
-// description: 'Snapshot of GoL2 Game at Generation #5',
-// external_url: 'https://gol2.io',
-// attributes: [ [Object], [Object], [Object], [Object], [Object] ],
-// image_url: 'data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22910%22%20height=%22910%22%20viewBox=%220%200%20910%20910%22%3E%3Cg%20transform=%22translate(5%205)%22%3E%3Crect%20width=%22900%22%20height=%22900%22%20fill=%22%231e222b%22/%3E%3Cg%20stroke=%22%235e6266%22%20stroke-width=%221%22%3E%3Cline%20x1=%220%22%20y1=%2260%22%20x2=%22900%22%20y2=%2260%22/%3E%3Cline%20x1=%2260%22%20y1=%220%22%20x2=%2260%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22120%22%20x2=%22900%22%20y2=%22120%22/%3E%3Cline%20x1=%22120%22%20y1=%220%22%20x2=%22120%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22180%22%20x2=%22900%22%20y2=%22180%22/%3E%3Cline%20x1=%22180%22%20y1=%220%22%20x2=%22180%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22240%22%20x2=%22900%22%20y2=%22240%22/%3E%3Cline%20x1=%22240%22%20y1=%220%22%20x2=%22240%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22300%22%20x2=%22900%22%20y2=%22300%22/%3E%3Cline%20x1=%22300%22%20y1=%220%22%20x2=%22300%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22360%22%20x2=%22900%22%20y2=%22360%22/%3E%3Cline%20x1=%22360%22%20y1=%220%22%20x2=%22360%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22420%22%20x2=%22900%22%20y2=%22420%22/%3E%3Cline%20x1=%22420%22%20y1=%220%22%20x2=%22420%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22480%22%20x2=%22900%22%20y2=%22480%22/%3E%3Cline%20x1=%22480%22%20y1=%220%22%20x2=%22480%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22540%22%20x2=%22900%22%20y2=%22540%22/%3E%3Cline%20x1=%22540%22%20y1=%220%22%20x2=%22540%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22600%22%20x2=%22900%22%20y2=%22600%22/%3E%3Cline%20x1=%22600%22%20y1=%220%22%20x2=%22600%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22660%22%20x2=%22900%22%20y2=%22660%22/%3E%3Cline%20x1=%22660%22%20y1=%220%22%20x2=%22660%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22720%22%20x2=%22900%22%20y2=%22720%22/%3E%3Cline%20x1=%22720%22%20y1=%220%22%20x2=%22720%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22780%22%20x2=%22900%22%20y2=%22780%22/%3E%3Cline%20x1=%22780%22%20y1=%220%22%20x2=%22780%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22840%22%20x2=%22900%22%20y2=%22840%22/%3E%3Cline%20x1=%22840%22%20y1=%220%22%20x2=%22840%22%20y2=%22900%22/%3E%3C/g%3E%3Cg%20fill=%22%23dff17b%22%20stroke=%22%23dff17b%22%20stroke-width=%220.5%22%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(540%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(600%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(720%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(780%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(540%20420)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(780%20420)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(600%20480)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(660%20480)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(840%20480)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(720%20540)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(780%20540)%22/%3E%3C/g%3E%3Crect%20width=%22900%22%20height=%22900%22%20fill=%22none%22%20stroke=%22%230a0c10%22%20stroke-width=%225%22/%3E%3C/g%3E%3C/svg%3E',
-// image_small_url: 'data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22910%22%20height=%22910%22%20viewBox=%220%200%20910%20910%22%3E%3Cg%20transform=%22translate(5%205)%22%3E%3Crect%20width=%22900%22%20height=%22900%22%20fill=%22%231e222b%22/%3E%3Cg%20stroke=%22%235e6266%22%20stroke-width=%221%22%3E%3Cline%20x1=%220%22%20y1=%2260%22%20x2=%22900%22%20y2=%2260%22/%3E%3Cline%20x1=%2260%22%20y1=%220%22%20x2=%2260%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22120%22%20x2=%22900%22%20y2=%22120%22/%3E%3Cline%20x1=%22120%22%20y1=%220%22%20x2=%22120%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22180%22%20x2=%22900%22%20y2=%22180%22/%3E%3Cline%20x1=%22180%22%20y1=%220%22%20x2=%22180%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22240%22%20x2=%22900%22%20y2=%22240%22/%3E%3Cline%20x1=%22240%22%20y1=%220%22%20x2=%22240%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22300%22%20x2=%22900%22%20y2=%22300%22/%3E%3Cline%20x1=%22300%22%20y1=%220%22%20x2=%22300%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22360%22%20x2=%22900%22%20y2=%22360%22/%3E%3Cline%20x1=%22360%22%20y1=%220%22%20x2=%22360%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22420%22%20x2=%22900%22%20y2=%22420%22/%3E%3Cline%20x1=%22420%22%20y1=%220%22%20x2=%22420%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22480%22%20x2=%22900%22%20y2=%22480%22/%3E%3Cline%20x1=%22480%22%20y1=%220%22%20x2=%22480%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22540%22%20x2=%22900%22%20y2=%22540%22/%3E%3Cline%20x1=%22540%22%20y1=%220%22%20x2=%22540%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22600%22%20x2=%22900%22%20y2=%22600%22/%3E%3Cline%20x1=%22600%22%20y1=%220%22%20x2=%22600%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22660%22%20x2=%22900%22%20y2=%22660%22/%3E%3Cline%20x1=%22660%22%20y1=%220%22%20x2=%22660%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22720%22%20x2=%22900%22%20y2=%22720%22/%3E%3Cline%20x1=%22720%22%20y1=%220%22%20x2=%22720%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22780%22%20x2=%22900%22%20y2=%22780%22/%3E%3Cline%20x1=%22780%22%20y1=%220%22%20x2=%22780%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22840%22%20x2=%22900%22%20y2=%22840%22/%3E%3Cline%20x1=%22840%22%20y1=%220%22%20x2=%22840%22%20y2=%22900%22/%3E%3C/g%3E%3Cg%20fill=%22%23dff17b%22%20stroke=%22%23dff17b%22%20stroke-width=%220.5%22%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(540%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(600%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(720%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(780%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(540%20420)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(780%20420)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(600%20480)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(660%20480)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(840%20480)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(720%20540)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(780%20540)%22/%3E%3C/g%3E%3Crect%20width=%22900%22%20height=%22900%22%20fill=%22none%22%20stroke=%22%230a0c10%22%20stroke-width=%225%22/%3E%3C/g%3E%3C/svg%3E',
-// image_medium_url: 'data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22910%22%20height=%22910%22%20viewBox=%220%200%20910%20910%22%3E%3Cg%20transform=%22translate(5%205)%22%3E%3Crect%20width=%22900%22%20height=%22900%22%20fill=%22%231e222b%22/%3E%3Cg%20stroke=%22%235e6266%22%20stroke-width=%221%22%3E%3Cline%20x1=%220%22%20y1=%2260%22%20x2=%22900%22%20y2=%2260%22/%3E%3Cline%20x1=%2260%22%20y1=%220%22%20x2=%2260%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22120%22%20x2=%22900%22%20y2=%22120%22/%3E%3Cline%20x1=%22120%22%20y1=%220%22%20x2=%22120%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22180%22%20x2=%22900%22%20y2=%22180%22/%3E%3Cline%20x1=%22180%22%20y1=%220%22%20x2=%22180%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22240%22%20x2=%22900%22%20y2=%22240%22/%3E%3Cline%20x1=%22240%22%20y1=%220%22%20x2=%22240%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22300%22%20x2=%22900%22%20y2=%22300%22/%3E%3Cline%20x1=%22300%22%20y1=%220%22%20x2=%22300%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22360%22%20x2=%22900%22%20y2=%22360%22/%3E%3Cline%20x1=%22360%22%20y1=%220%22%20x2=%22360%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22420%22%20x2=%22900%22%20y2=%22420%22/%3E%3Cline%20x1=%22420%22%20y1=%220%22%20x2=%22420%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22480%22%20x2=%22900%22%20y2=%22480%22/%3E%3Cline%20x1=%22480%22%20y1=%220%22%20x2=%22480%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22540%22%20x2=%22900%22%20y2=%22540%22/%3E%3Cline%20x1=%22540%22%20y1=%220%22%20x2=%22540%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22600%22%20x2=%22900%22%20y2=%22600%22/%3E%3Cline%20x1=%22600%22%20y1=%220%22%20x2=%22600%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22660%22%20x2=%22900%22%20y2=%22660%22/%3E%3Cline%20x1=%22660%22%20y1=%220%22%20x2=%22660%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22720%22%20x2=%22900%22%20y2=%22720%22/%3E%3Cline%20x1=%22720%22%20y1=%220%22%20x2=%22720%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22780%22%20x2=%22900%22%20y2=%22780%22/%3E%3Cline%20x1=%22780%22%20y1=%220%22%20x2=%22780%22%20y2=%22900%22/%3E%3Cline%20x1=%220%22%20y1=%22840%22%20x2=%22900%22%20y2=%22840%22/%3E%3Cline%20x1=%22840%22%20y1=%220%22%20x2=%22840%22%20y2=%22900%22/%3E%3C/g%3E%3Cg%20fill=%22%23dff17b%22%20stroke=%22%23dff17b%22%20stroke-width=%220.5%22%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(540%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(600%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(720%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(780%20360)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(540%20420)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(780%20420)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(600%20480)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(660%20480)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(840%20480)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(720%20540)%22/%3E%3Crect%20width=%2260%22%20height=%2260%22%20transform=%22translate(780%20540)%22/%3E%3C/g%3E%3Crect%20width=%22900%22%20height=%22900%22%20fill=%22none%22%20stroke=%22%230a0c10%22%20stroke-width=%225%22/%3E%3C/g%3E%3C/svg%3E',
-// animation_url: null,
-// minted_by_address: '0x03a33a013cc7a9b632c685b7e7df3c318beb1cc8e9d08e0e54a3fd34b88abeba',
-// minted_at_transaction_hash: '0x06da7e4ae39d153b658ea7eb3ab6948db71eeb3c69e826ab0eb6e489a8520e66',
-// minted_at_timestamp: 1705573232
diff --git a/app/routes/api/mints.ts b/app/routes/api/mints.ts
new file mode 100644
index 0000000..e52c820
--- /dev/null
+++ b/app/routes/api/mints.ts
@@ -0,0 +1,36 @@
+import type { ActionArgs } from '@remix-run/node'
+import { sql } from '~/db.server'
+
+export async function action({ request }: ActionArgs) {
+  const body = await request.formData()
+
+  if (request.method === 'POST') {
+    // delete any existing mints for this generation
+    await sql`DELETE FROM mints WHERE "generation" = ${body.get('generation')};`
+    await sql`
+    INSERT INTO mints (
+      "generation",
+      "userId",
+      "txHash",
+      "status"
+      )
+      VALUES (
+        ${body.get('generation')},
+        ${body.get('userId')},
+        ${body.get('txHash')},
+        ${body.get('status')}
+        )
+        `
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return { status: 'success' }
+  } else if (request.method === 'DELETE') {
+    await sql`
+    DELETE FROM mints
+    WHERE "generation" = ${body.get('generation')}
+    `
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return { status: 'success' }
+  }
+}
diff --git a/app/routes/snapshots.tsx b/app/routes/snapshots.tsx
index 8f55db0..d1438d4 100644
--- a/app/routes/snapshots.tsx
+++ b/app/routes/snapshots.tsx
@@ -15,11 +15,11 @@ import { useFetcher } from '@remix-run/react'
 import { num } from 'starknet'
 import { useUser } from '~/hooks/useUser'
 import { useRootLoaderData } from '~/hooks/useRootLoaderData'
-// import { mergeSnapshotsWithNFTs } from '~/helpers/mergeSnapshotsWithNFTs'
-import { mergeSnapshotsWithNFTs } from '~/helpers/mergeSnapshotsWithStarkscanNFTs'
+import { addMintedNftDetails } from '~/helpers/addMintedNftDetails'
+import { addPendingNftDetails } from '~/helpers/addPendingNftDetails'
 import { getUserNFTs } from '~/helpers/getUserNFTsStarkscan'
-import { useEffect, useState } from 'react'
-import { useUpdateEffect } from 'react-use'
+import { useEffect, useMemo } from 'react'
+import { useInterval } from 'react-use'
 
 const hexToDecimalString = num.hexToDecimalString
 
@@ -57,27 +57,57 @@ export async function loader({ request }: LoaderArgs): Promise<TypedResponse<Inf
       and "transactionOwner" = ${hexToDecimalString(userId)}
   `
 
-  const snapshotsWithNfts = mergeSnapshotsWithNFTs(result.rows, userNfts || [])
-  return json(snapshotsWithNfts)
+  const pendingMints = await sql<any>`
+    select *
+    from "mints"
+    where "userId" = ${userId}
+    `
+
+  const snapshotsWithMintedNfts = addMintedNftDetails(result.rows, userNfts || [])
+  const { snapshotsWithPendingAndMintedNfts, idsToRemove } = addPendingNftDetails(
+    snapshotsWithMintedNfts,
+    pendingMints.rows
+  )
+
+  if (idsToRemove.length > 0) {
+    try {
+      await sql`
+        delete from "mints"
+        where "generation" = ANY(${idsToRemove})
+      `
+      console.log('deleted mints that exist in starkscan', idsToRemove)
+    } catch {
+      console.error('error deleting pending mints', idsToRemove)
+    }
+  }
+
+  return json(snapshotsWithPendingAndMintedNfts)
 }
 
 export default function Snapshots() {
   const user = useUser()
-  const { load, data: fetcherData } = useFetcher()
+  const { load, data } = useFetcher()
   const { env } = useRootLoaderData()
-  const [data, setData] = useState(null)
 
   useEffect(() => {
     load('/snapshots')
   }, [load])
 
-  useUpdateEffect(() => {
-    console.log('fetcherData', fetcherData)
-    if (fetcherData) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-      setData(fetcherData)
-    }
-  }, [fetcherData])
+  const refreshPage = () => {
+    load('/snapshots')
+  }
+
+  const hasAnyPendingMints = useMemo(() => {
+    if (data == null) return false
+    return data.some((s: any) => s.nft?.type === 'pending') as boolean
+  }, [data])
+
+  useInterval(
+    () => {
+      load('/snapshots')
+    },
+    hasAnyPendingMints ? 1000 * 60 : null
+  )
 
   return (
     <ContainerInner maxWidth={1000} paddingBottom={64}>
@@ -144,6 +174,7 @@ export default function Snapshots() {
                     gameGeneration={snapshot.gameGeneration}
                     gameState={snapshot.gameState}
                     user={user.userId}
+                    refreshPage={refreshPage}
                     initial={{
                       opacity: 0,
                       y: 10,
@@ -169,6 +200,7 @@ export default function Snapshots() {
                     gameState={snapshot.gameState}
                     user={user.userId}
                     nft={snapshot.nft}
+                    refreshPage={refreshPage}
                     initial={{
                       opacity: 0,
                       y: 10,