diff --git a/app/(private)/assets/burn-active.png b/app/(private)/assets/burn-active.png
new file mode 100644
index 0000000..ec0cfbf
Binary files /dev/null and b/app/(private)/assets/burn-active.png differ
diff --git a/app/(private)/assets/burn-inactive.png b/app/(private)/assets/burn-inactive.png
new file mode 100644
index 0000000..3bb6352
Binary files /dev/null and b/app/(private)/assets/burn-inactive.png differ
diff --git a/app/(private)/assets/gem-burn.png b/app/(private)/assets/gem-burn.png
new file mode 100644
index 0000000..080472d
Binary files /dev/null and b/app/(private)/assets/gem-burn.png differ
diff --git a/app/(private)/assets/redeem-active.png b/app/(private)/assets/redeem-active.png
index 09b9f84..a109aed 100644
Binary files a/app/(private)/assets/redeem-active.png and b/app/(private)/assets/redeem-active.png differ
diff --git a/app/(private)/assets/redeem-inactive.png b/app/(private)/assets/redeem-inactive.png
index 4665d60..ee0b2d2 100644
Binary files a/app/(private)/assets/redeem-inactive.png and b/app/(private)/assets/redeem-inactive.png differ
diff --git a/app/(private)/burn/page.tsx b/app/(private)/burn/page.tsx
index 94d08e6..f87323e 100644
--- a/app/(private)/burn/page.tsx
+++ b/app/(private)/burn/page.tsx
@@ -1,12 +1,9 @@
 'use client'
-import IconClose from '@/assets/ic_close.svg'
-import ShieldItem from '@/assets/mat khien.png'
 import FilledButton from '@/components/button/filled'
-import Checkbox from '@/components/checkbox'
-import Gem from '@/components/gem'
 import GemWithFrame from '@/components/gem/gemWithFrame'
+import { initList } from '@/constants'
 import { Bangkok, Context } from '@/provider'
-import { forgeGem } from '@/services'
+import { burn, forgeGem } from '@/services'
 import { useChain } from '@cosmos-kit/react'
 import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger, useDisclosure } from '@nextui-org/react'
 import Immutable, { Map } from 'immutable'
@@ -15,16 +12,11 @@ import getConfig from 'next/config'
 import Image from 'next/image'
 import { useContext, useEffect, useMemo, useState } from 'react'
 import { toast } from 'react-toastify'
-import ForgeBg from '../assets/force-bg.svg'
-import GemSlot from '../assets/gem-slot.svg'
-import GemSlotActive from '../assets/gem-slot_active.svg'
-import Shield from '../assets/shield.svg'
 import TopBar2 from '../assets/top-bar-2.svg'
 import TopBar from '../assets/top-bar.svg'
 import TopBarMobile from '../assets/top-bar_mobile.svg'
 import { RevealForgingResult } from '../components/revealForgingResult'
-import { initList } from '@/constants'
-
+import GemBurn from '@/app/(private)/assets/gem-burn.png'
 export default function Home() {
   const config = getConfig()
   const { assets, lastAssetsUpdate, fetchAssets, setBlackListId } = useContext(Context)
@@ -106,33 +98,16 @@ export default function Home() {
     }
   }
 
-  const forgeGemHandler = async () => {
+  const burnHandler = async () => {
     try {
       setLoading(true)
-      const bl = []
-      const main = assets.find((asset) => asset.type == mainGem)
-      const msgs = [
-        {
-          contract: main?.cw721_contract.smart_contract.address,
-          msg: {
-            approve: {
-              spender: config.OPERATOR_CONTRACT_ADDRESS,
-              token_id: main?.token_id,
-            },
-          },
-        },
-      ]
-      bl.push(main?.token_id)
-
+      const bl: any[] = []
       const material: any[] = []
-      for (let i = 0; i < 5; i++) {
-        if (materialGems[i] != undefined) {
-          const asset = assets.find(
-            (a) =>
-              a.type == materialGems[i] &&
-              !material.find((g) => g.tokenId == a.token_id) &&
-              main?.token_id != a.token_id
-          )
+      const msgs: any[] = []
+
+      list.forEach((gem) => {
+        for (let i = 0; i < gem.amount; i++) {
+          const asset = assets.find((a) => a.type == gem.type && !material.find((g) => g.tokenId == a.token_id))
           material.push({
             contractAddress: asset?.cw721_contract.smart_contract.address as string,
             tokenId: asset?.token_id as string,
@@ -148,23 +123,11 @@ export default function Home() {
           })
           bl.push(asset?.token_id)
         }
-      }
-      let shield
-      if (useShield) {
-        shield = assets.find((asset) => asset.type == 'shield')
-        msgs.push({
-          contract: shield?.cw721_contract.smart_contract.address,
-          msg: {
-            approve: {
-              spender: config.OPERATOR_CONTRACT_ADDRESS,
-              token_id: shield?.token_id,
-            },
-          },
-        })
-        bl.push(shield?.token_id)
-      }
+      })
+
       setTempBlackList(bl)
-      console.log('forge', main, material, shield)
+      console.log('burn', material)
+      return
       const client = await getSigningCosmWasmClient()
       await client.executeMultiple(
         address as string,
@@ -175,19 +138,7 @@ export default function Home() {
         'auto'
       )
 
-      const result = await forgeGem(
-        {
-          contractAddress: main?.cw721_contract.smart_contract.address as string,
-          tokenId: main?.token_id as string,
-        },
-        material,
-        useShield
-          ? {
-              contractAddress: shield?.cw721_contract.smart_contract.address as string,
-              tokenId: shield?.token_id as string,
-            }
-          : undefined
-      )
+      const result = await burn(material)
 
       if (result?.data?.data?.requestId) {
         setRequestId(result?.data?.data?.requestId)
@@ -218,6 +169,8 @@ export default function Home() {
     }
   }
 
+  const gemCount = list.reduce((total, current) => (total += +current.amount), 0)
+
   return (
     <>
       {requestId && (
@@ -422,73 +375,89 @@ export default function Home() {
               {list.length ? (
                 list.map((gem) => {
                   return (
-                    <div key={gem.type} className='p-[10px] rounded-[4px] flex gap-4 bg-[#D6CCB5]'>
-                      <GemWithFrame type={gem.type as any} />
-                      <div className='flex flex-col gap-1'>
-                        <div className='text-[#545454] text-xs'>
-                          {`${(function () {
-                            switch (gem.type[0]) {
-                              case 'w':
-                                return 'White'
-                              case 'b':
-                                return 'Blue'
-                              case 'g':
-                                return 'Gold'
-                              case 'r':
-                                return 'Red'
-                            }
-                          })()} Gem ${gem.type[1]}`}
-                        </div>
-                        <div className='flex items-center gap-4'>
-                          <input
-                            type='number'
-                            onChange={(e) => {
-                              const v = e.target.value as any
-                              const newList = [...list]
-                              const index = newList.findIndex((g) => g.type == gem.type)
-                              newList[index].amount = !isNaN(v) ? v : '0'
-                              setList(newList)
-                            }}
-                            className='text-sm text-[#545454] p-2 bg-[#fff] shadow-[0px_1px_4px_0px_rgba(0,0,0,0.20)_inset] rounded-md text-center w-full'
-                          />
-                          <svg
-                            xmlns='http://www.w3.org/2000/svg'
-                            width='10'
-                            height='10'
-                            viewBox='0 0 10 10'
-                            fill='none'
-                            className='cursor-pointer'
-                            onClick={() => addGemHandler(gem.type)}>
-                            <path
-                              d='M9 1L1 9'
-                              stroke='#885E23'
-                              stroke-width='2'
-                              strokeLinecap='round'
-                              strokeLinejoin='round'
-                            />
-                            <path
-                              d='M1 1L9 9'
-                              stroke='#885E23'
-                              stroke-width='2'
-                              strokeLinecap='round'
-                              strokeLinejoin='round'
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
+                    <GemInput
+                      key={gem.type}
+                      gem={gem}
+                      gems={gems}
+                      list={list}
+                      setList={setList}
+                      addGemHandler={addGemHandler}
+                    />
                   )
                 })
               ) : (
                 <div className='text-sm text-center w-full'>No gems selected</div>
               )}
             </div>
-            <FilledButton className='w-fit mx-auto' onClick={() => console.log(list)}>
-              Burn
-            </FilledButton>
+            <div className='flex gap-4'>
+              <div className='px-[10px] py-[6px] rounded-md flex gap-[11px] items-center bg-[#D6CCB5] text-[#545454] shrink-0'>
+                <Image src={GemBurn} alt='' />
+                <div className={`${gemCount > 50 ? 'text-[#DC3535]' : ''}`}>{`${gemCount}/50`}</div>
+              </div>
+              <FilledButton className='w-full mx-auto' onClick={burnHandler} disabled={!gemCount || gemCount > 50}>
+                Burn
+              </FilledButton>
+            </div>
           </div>
         </div>
       </div>
     </>
   )
 }
+const GemInput = ({ gem, gems, list, setList, addGemHandler }: any) => {
+  const [value, setValue] = useState(0)
+  return (
+    <div className='p-[10px] rounded-[4px] flex gap-4 bg-[#D6CCB5]'>
+      <GemWithFrame type={gem.type as any} />
+      <div className='flex flex-col gap-1'>
+        <div className='text-[#545454] text-xs'>
+          {`${(function () {
+            switch (gem.type[0]) {
+              case 'w':
+                return 'White'
+              case 'b':
+                return 'Blue'
+              case 'g':
+                return 'Gold'
+              case 'r':
+                return 'Red'
+            }
+          })()} Gem ${gem.type[1]}`}
+        </div>
+        <div className='flex items-center gap-4'>
+          <input
+            type='number'
+            max={gems.get(gem.type)}
+            value={value}
+            onChange={(e) => {
+              const v = e.target.value as any
+              const newList = [...list]
+              const index = newList.findIndex((g) => g.type == gem.type)
+              newList[index].amount = !isNaN(v)
+                ? +gems.get(gem.type) > +v
+                  ? v > 0
+                    ? v
+                    : ''
+                  : gems.get(gem.type)
+                : '0'
+              setValue(newList[index].amount)
+              setList(newList)
+            }}
+            className='text-sm text-[#545454] p-2 bg-[#fff] shadow-[0px_1px_4px_0px_rgba(0,0,0,0.20)_inset] rounded-md text-center w-full'
+          />
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            width='10'
+            height='10'
+            viewBox='0 0 10 10'
+            fill='none'
+            className='cursor-pointer'
+            onClick={() => addGemHandler(gem.type)}>
+            <path d='M9 1L1 9' stroke='#885E23' stroke-width='2' strokeLinecap='round' strokeLinejoin='round' />
+            <path d='M1 1L9 9' stroke='#885E23' stroke-width='2' strokeLinecap='round' strokeLinejoin='round' />
+          </svg>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/(private)/layout.tsx b/app/(private)/layout.tsx
index 03f6a01..4450641 100644
--- a/app/(private)/layout.tsx
+++ b/app/(private)/layout.tsx
@@ -4,6 +4,8 @@ import ForgeActive from '@/app/(private)/assets/force-active.png'
 import ForgeInactive from '@/app/(private)/assets/force-inactive.png'
 import RedeemActive from '@/app/(private)/assets/redeem-active.png'
 import RedeemInactive from '@/app/(private)/assets/redeem-inactive.png'
+import BurnActive from '@/app/(private)/assets/burn-active.png'
+import BurnInactive from '@/app/(private)/assets/burn-inactive.png'
 import QuestActive from '@/app/(private)/assets/quest-active.png'
 import QuestInactive from '@/app/(private)/assets/quest-inactive.png'
 import Active from '@/app/(private)/assets/active-tab.png'
@@ -82,6 +84,28 @@ export default function Layout({ children }: { children: ReactNode }) {
             className={` hidden w-[112px] ${pathname != '/redeem' ? 'md:block' : ''}`}
           />
         </div>
+        <div
+          className='cursor-pointer'
+          onClick={() => {
+            router.push('/burn')
+          }}>
+          <div className='relative md:hidden cursor-pointer'>
+            <Image src={pathname == '/burn' ? Active : Inactive} alt='' className={`w-[106px]`} />
+            <div
+              className={`${Bangkok.className} absolute inset-0 grid place-items-center ${
+                pathname == '/burn' ? 'text-[#FFB438]' : 'text-[#828282]'
+              }`}>
+              <div className='capitalize'>Burn</div>
+            </div>
+          </div>
+          <Image src={BurnActive} alt='' className={` hidden w-[157px] ${pathname == '/burn' ? 'md:block' : ''}`} />{' '}
+          <Image
+            src={BurnInactive}
+            alt=''
+            id='screen_Burn'
+            className={` hidden w-[112px] ${pathname != '/burn' ? 'md:block' : ''}`}
+          />
+        </div>
         <div
           className='cursor-pointer'
           onClick={() => {
diff --git a/services/index.ts b/services/index.ts
index fc1b6e1..760085d 100644
--- a/services/index.ts
+++ b/services/index.ts
@@ -319,6 +319,21 @@ export const redeem = async (
     return error
   }
 }
+export const burn = async (
+  gems: {
+    contract_address: string
+    token_id: string
+  }[]
+) => {
+  try {
+    const res = await privateAxios.post(`${getConfig().REST_API_ENDPOINT}/nft-burn/burn`, {
+      materials: gems,
+    })
+    return res
+  } catch (error: any) {
+    return error
+  }
+}
 export const sample = async () => {
   try {
   } catch (error: any) {