diff --git a/components/NftCard.tsx b/components/NftCard.tsx
index 6a6227c..45c3325 100644
--- a/components/NftCard.tsx
+++ b/components/NftCard.tsx
@@ -1,41 +1,66 @@
 import { useConnection } from '@solana/wallet-adapter-react'
-import { Link, Button, Text, IconButton } from '@primer/react'
+import { Link, Text, Button, Spinner } from '@primer/react'
 import { FC } from 'react'
 import { LinkExternalIcon } from '@primer/octicons-react'
 import Image from 'next/image'
+import { VariantType } from '@primer/react/lib/Button/types'
 
-const NftCard: FC<{ title: string; imageLink: string; hash?: string }> = ({ title, imageLink, hash }) => {
+const NftCard: FC<{
+    title: string
+    imageLink?: string
+    buttons?: {
+        text: string
+        as: 'link' | 'button'
+        hash?: string
+        isLoading?: boolean
+        variant: VariantType
+        onClick?: () => void
+    }[]
+}> = ({ title, imageLink, buttons }) => {
     const { connection } = useConnection()
-    const image = imageLink !== '' ? imageLink : '/default-image.png'
     return (
         <div
-            className='d-flex flex-column flex-justify-center flex-items-center border rounded-3 gap-2 py-2'
+            className='d-flex flex-column flex-justify-center flex-items-center border rounded-3 py-2'
             style={{ width: '185px' }}
         >
             <Text as='p' fontWeight='bold'>
                 {title}
             </Text>
             <div
-                className='border rounded-3 mb-2 overflow-hidden d-flex flex-items-center flex-justify-center'
+                className='border color-bg-inset rounded-3 mb-2 overflow-hidden d-flex flex-items-center flex-justify-center'
                 style={{ height: '168px', width: '168px' }}
             >
                 <div className='width-full height-full position-relative'>
-                    <Image alt={title} src={imageLink} layout='fill' objectFit='cover' />
+                    {imageLink?.length && <Image alt={title} src={imageLink} layout='fill' objectFit='cover' />}
                 </div>
             </div>
-            {hash && (
-                <Link
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    href={`https://solscan.io/token/${hash}${
-                        connection.rpcEndpoint.includes('devnet') ? '?cluster=devnet' : ''
-                    }`}
-                >
-                    <Button leadingIcon={LinkExternalIcon} variant='invisible'>
-                        View in solscan
+
+            {buttons
+                ?.filter((btn) => btn.as === 'button')
+                .map((btn, i) => (
+                    <Button variant={btn.variant} onClick={() => btn.onClick && btn.onClick()} key={i}>
+                        <div className={'d-flex flex-row flex-justify-center flex-items-center'}>
+                            {btn.isLoading && <Spinner sx={{ mr: 2 }} size='small' />}
+                            {btn.text}
+                        </div>
                     </Button>
-                </Link>
-            )}
+                ))}
+            {buttons
+                ?.filter((btn) => btn.as === 'link')
+                .map((btn, i) => (
+                    <Link
+                        key={i}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        href={`https://solscan.io/account/${btn.hash}?${
+                            connection.rpcEndpoint.includes('devnet') ? '?cluster=devnet' : ''
+                        }`}
+                    >
+                        <Button leadingIcon={LinkExternalIcon} variant={btn.variant}>
+                            {btn.text}
+                        </Button>
+                    </Link>
+                ))}
         </div>
     )
 }
diff --git a/pages/[id].tsx b/pages/[id].tsx
index aeeb942..2d45a1b 100644
--- a/pages/[id].tsx
+++ b/pages/[id].tsx
@@ -21,6 +21,7 @@ import { useEffect, useState } from 'react'
 import { useSetRecoilState } from 'recoil'
 import { nftsState } from 'lib/recoil-store/atoms'
 import { getAllNftsByCM, getNftByMint } from 'lib/nft/actions'
+import { useMintCandyMachine } from 'hooks'
 
 const CandyMachine: NextPage = () => {
     const router = useRouter()
@@ -36,6 +37,9 @@ const CandyMachine: NextPage = () => {
     const [isLoading, setIsLoading] = useState(false)
     const [isReloading, setIsReloading] = useState(false)
     const setNftsState = useSetRecoilState(nftsState)
+    const { isUserMinting, itemsRemaining, mintAccount, refreshCandyMachineState } = useMintCandyMachine(
+        candyMachineAccount as string
+    )
     const [hasCollection, setHasCollection] = useState(false)
 
     async function viewNfts(e: React.ChangeEvent<HTMLInputElement>) {
@@ -126,6 +130,7 @@ const CandyMachine: NextPage = () => {
     }
 
     useEffect(() => {
+        refreshCandyMachineState()
         getNfts()
         fetchCandyMachine({ candyMachineAccount, connection }).then(setCandyMachineConfig)
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -226,7 +231,14 @@ const CandyMachine: NextPage = () => {
                                     <NftCard
                                         title={collectionNft.name}
                                         imageLink={collectionNft.image}
-                                        hash={collectionNft.mint?.toBase58()}
+                                        buttons={[
+                                            {
+                                                text: 'View in Solscan',
+                                                as: 'link',
+                                                variant: 'invisible',
+                                                hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                            },
+                                        ]}
                                     />
                                 </div>
                             )}
@@ -235,30 +247,79 @@ const CandyMachine: NextPage = () => {
                     <div className='mt-5'>
                         <h4>Minted NFTs - 5</h4>
                         <div className='d-flex flex-justify-start flex-items-center gap-5 mt-3'>
+                            {itemsRemaining > 0 && (
+                                <NftCard
+                                    title={'New NFT'}
+                                    buttons={[
+                                        {
+                                            text: 'Mint 1 NFT',
+                                            isLoading: isUserMinting,
+                                            as: 'button',
+                                            variant: 'primary',
+                                            onClick: () => mintAccount(),
+                                        },
+                                    ]}
+                                />
+                            )}
                             <NftCard
                                 title={'CryptoDude #1'}
                                 imageLink={'/favicon.ico'}
-                                hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
+                                buttons={[
+                                    {
+                                        text: 'View in Solscan',
+                                        as: 'link',
+                                        variant: 'invisible',
+                                        hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                    },
+                                ]}
                             />
                             <NftCard
                                 title={'CryptoDude #2'}
                                 imageLink={'/favicon.ico'}
-                                hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
+                                buttons={[
+                                    {
+                                        text: 'View in Solscan',
+                                        as: 'link',
+                                        variant: 'invisible',
+                                        hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                    },
+                                ]}
                             />
                             <NftCard
                                 title={'CryptoDude #3'}
                                 imageLink={'/favicon.ico'}
-                                hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
+                                buttons={[
+                                    {
+                                        text: 'View in Solscan',
+                                        as: 'link',
+                                        variant: 'invisible',
+                                        hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                    },
+                                ]}
                             />
                             <NftCard
                                 title={'CryptoDude #4'}
                                 imageLink={'/favicon.ico'}
-                                hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
+                                buttons={[
+                                    {
+                                        text: 'View in Solscan',
+                                        as: 'link',
+                                        variant: 'invisible',
+                                        hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                    },
+                                ]}
                             />
                             <NftCard
                                 title={'CryptoDude #5'}
                                 imageLink={'/favicon.ico'}
-                                hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
+                                buttons={[
+                                    {
+                                        text: 'View in Solscan',
+                                        as: 'link',
+                                        variant: 'invisible',
+                                        hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                    },
+                                ]}
                             />
                         </div>
                     </div>
@@ -268,27 +329,62 @@ const CandyMachine: NextPage = () => {
                             <NftCard
                                 title={'CryptoDude #1'}
                                 imageLink={'/favicon.ico'}
-                                hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
+                                buttons={[
+                                    {
+                                        text: 'View in Solscan',
+                                        as: 'link',
+                                        variant: 'invisible',
+                                        hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                    },
+                                ]}
                             />
                             <NftCard
                                 title={'CryptoDude #2'}
                                 imageLink={'/favicon.ico'}
-                                hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
+                                buttons={[
+                                    {
+                                        text: 'View in Solscan',
+                                        as: 'link',
+                                        variant: 'invisible',
+                                        hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                    },
+                                ]}
                             />
                             <NftCard
                                 title={'CryptoDude #3'}
                                 imageLink={'/favicon.ico'}
-                                hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
+                                buttons={[
+                                    {
+                                        text: 'View in Solscan',
+                                        as: 'link',
+                                        variant: 'invisible',
+                                        hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                    },
+                                ]}
                             />
                             <NftCard
                                 title={'CryptoDude #4'}
                                 imageLink={'/favicon.ico'}
-                                hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
+                                buttons={[
+                                    {
+                                        text: 'View in Solscan',
+                                        as: 'link',
+                                        variant: 'invisible',
+                                        hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                    },
+                                ]}
                             />
                             <NftCard
                                 title={'CryptoDude #5'}
                                 imageLink={'/favicon.ico'}
-                                hash={'14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns'}
+                                buttons={[
+                                    {
+                                        text: 'View in Solscan',
+                                        as: 'link',
+                                        variant: 'invisible',
+                                        hash: '14eoYMYLY19gtfE1gwWDhnjDD3fDjGTQTGyicBKT33Ns',
+                                    },
+                                ]}
                             />
                         </div>
                     </div>
diff --git a/public/default-image.png b/public/default-image.png
deleted file mode 100644
index 5f313f0..0000000
Binary files a/public/default-image.png and /dev/null differ