diff --git a/contract/README.md b/contract/README.md
index 593d3ea2..66cc1991 100644
--- a/contract/README.md
+++ b/contract/README.md
@@ -1 +1,127 @@
-# CIP68Generator - Contract
+use aiken/collection/list
+use aiken/crypto.{ScriptHash, VerificationKeyHash}
+use cardano/address
+use cardano/assets.{AssetName, PolicyId, without_lovelace}
+use cardano/minting
+use cardano/transaction.{Transaction}
+use cardano/tx.{verify_signature}
+use cardano/value
+use cip68generator/types.{Burn, Mint, MintRedeemer}
+use cip68generator/utils
+use types/cip68
+use validation/find
+
+// validator - mint
+// parameters (exchange_address, store_validator)
+validator mint(store: ScriptHash) {
+mint(redeemer: MintRedeemer, policy_id: PolicyId, transaction: Transaction) {
+let Transaction { inputs, outputs, extra_signatories, mint, .. } =
+transaction
+
+    let mint_flatten =
+      mint
+        |> without_lovelace()
+        |> assets.flatten()
+
+    when redeemer is {
+      Mint -> {
+        let first_tx_id = find.first_input_txid(inputs)
+        let first_tx_index = find.first_input_index(inputs)
+
+        let reference_token = utils.token_prefix(mint_flatten, cip68.prefix_100)
+        let user_token = utils.token_prefix(mint_flatten, cip68.prefix_222)
+
+        let check_none_token =
+          utils.check_none_token(user_token, reference_token)
+
+        when check_none_token is {
+          False -> False
+          True -> {
+            let reference_value =
+              assets.from_asset(policy_id, reference_token, 1)
+            let store_address = address.from_script(store)
+            let output_utxo =
+              find.output_by_addr_value(outputs, store_address, reference_value)
+
+            and {
+              first_tx_index < 256,
+              list.length(mint_flatten) >= 2,
+              minting.exact(mint_flatten, policy_id, reference_token, 1)?,
+              utils.check_output_utxo(output_utxo, extra_signatories)?,
+            }
+          }
+        }
+      }
+
+      Burn -> True
+    }
+
+}
+
+else(\_) {
+fail
+}
+}
+
+use aiken/collection/list
+use aiken/crypto.{ScriptHash, VerificationKeyHash}
+use cardano/address
+use cardano/assets.{AssetName, PolicyId, without_lovelace}
+use cardano/minting
+use cardano/transaction.{Transaction}
+use cardano/tx.{verify_signature}
+use cardano/value
+use cip68generator/types.{Burn, Mint, MintRedeemer}
+use cip68generator/utils
+use types/cip68
+use validation/find
+
+// validator - mint
+// parameters (exchange_address, store_validator)
+validator mint(store: ScriptHash) {
+mint(redeemer: MintRedeemer, policy_id: PolicyId, transaction: Transaction) {
+let Transaction { inputs, outputs, extra_signatories, mint, .. } =
+transaction
+
+    let mint_flatten =
+      mint
+        |> without_lovelace()
+        |> assets.flatten()
+
+    when redeemer is {
+      Mint -> {
+        let first_tx_id = find.first_input_txid(inputs)
+        let first_tx_index = find.first_input_index(inputs)
+
+        let reference_token = utils.token_prefix(mint_flatten, cip68.prefix_100)
+        let user_token = utils.token_prefix(mint_flatten, cip68.prefix_222)
+
+        let check_none_token = utils.check_none_token(user_token, reference_token)
+
+        when reference_token is {
+          Some(reference_token) -> {
+            let reference_value =
+              assets.from_asset(policy_id, reference_token, 1)
+            let store_address = address.from_script(store)
+            let output_utxo =
+              find.output_by_addr_value(outputs, store_address, reference_value)
+
+            and {
+              first_tx_index < 256,
+              list.length(mint_flatten) >= 2,
+              minting.exact(mint_flatten, policy_id, reference_token, 1)?,
+              utils.check_output_utxo(output_utxo, extra_signatories)?,
+            }
+          }
+          _ -> fail @"No matching asset found for the given prefix"
+        }
+      }
+      Burn -> True
+    }
+
+}
+
+else(\_) {
+fail
+}
+}
diff --git a/contract/lib/cip68generator/types.ak b/contract/lib/cip68generator/types.ak
index 63f176de..6fcf1fc8 100644
--- a/contract/lib/cip68generator/types.ak
+++ b/contract/lib/cip68generator/types.ak
@@ -1,30 +1,14 @@
 use aiken/crypto.{VerificationKeyHash}
 use cardano/assets.{AssetName, PolicyId}
 
-pub type Asset {
-  policy_id: PolicyId,
-  asset_name: AssetName,
-}
-
-pub type Extra {
-  address: VerificationKeyHash,
-  has_change: Bool,
-  asset: Asset,
-}
-
-pub type StoreDatum {
-  metadata: Pair<Data, Data>,
-  version: Int,
-  extra: Extra,
-}
-
+// the redeemer using mint validator
 pub type MintRedeemer {
   Mint
   Burn
 }
 
+// the redeemer using store validator
 pub type StoreRedeemer {
   Update
   Remove
-  Redeem
 }
diff --git a/contract/lib/cip68generator/utils.ak b/contract/lib/cip68generator/utils.ak
index 0b7502c1..4b565b26 100644
--- a/contract/lib/cip68generator/utils.ak
+++ b/contract/lib/cip68generator/utils.ak
@@ -1,15 +1,105 @@
 use aiken/collection/list
-use cardano/assets.{flatten, without_lovelace}
+use aiken/crypto.{ScriptHash, VerificationKeyHash}
+use aiken/primitive/bytearray
+use cardano/address.{Address}
+use cardano/assets.{AssetName, PolicyId, flatten, lovelace_of, without_lovelace}
 use cardano/transaction.{InlineDatum, Output}
-use cip68generator/types.{StoreDatum}
+use cardano/tx
+use types/cip68.{CIP68}
 
-pub fn check_output_utxo(output: Output) -> Bool {
+// check the output utxos containing the reference nft
+pub fn check_output_utxo(output: Output, vks: List<VerificationKeyHash>) -> Bool {
   expect InlineDatum(data) = output.datum
-  expect _metadatum: StoreDatum = data
+  expect metadatum: CIP68 = data
+  expect name: ByteArray = cip68.get(metadatum, "name")
+  expect image: ByteArray = cip68.get(metadatum, "image")
+  expect media_type: ByteArray = cip68.get(metadatum, "mediaType")
+  expect author: VerificationKeyHash = cip68.get(metadatum, "author")
+
   let output_value =
     output.value
       |> without_lovelace()
       |> flatten()
 
-  list.length(output_value) == 1
+  and {
+    bytearray.length(name) > 0,
+    bytearray.length(image) > 0,
+    bytearray.length(media_type) > 0,
+    tx.verify_signature(vks, author),
+    list.length(output_value) == 1,
+  }
+}
+
+// get asset name from mint flatten
+pub fn token_prefix(
+  flat: List<(PolicyId, AssetName, Int)>,
+  prefix: ByteArray,
+) -> Option<AssetName> {
+  let exist =
+    list.find(
+      flat,
+      fn((policy_id, asset_name, amount)) {
+        bytearray.starts_with(asset_name, prefix)
+      },
+    )
+  when exist is {
+    Some((policy_id, asset_name, amount)) -> Some(asset_name)
+    None -> None
+  }
+}
+
+pub fn check_none_token(
+  user_token: Option<AssetName>,
+  reference_token: Option<AssetName>,
+) -> Bool {
+  if user_token == None || reference_token == None {
+    False
+  } else {
+    True
+  }
+}
+
+pub fn check_address(output: Output, address: Address) -> Bool {
+  output.address.payment_credential == address.payment_credential
+}
+
+// The function checks whether the output exists or not
+pub fn check_none_output(
+  output_store: Option<Output>,
+  output_exchange: Option<Output>,
+) -> Bool {
+  // If one of the 3 outputs does not exist, the function will return False
+  if output_store == None || output_exchange == None {
+    False
+  } else {
+    // Otherwise, the function will return True
+    True
+  }
+}
+
+pub fn find_output(
+  outputs: List<Output>,
+  price: Int,
+  address: Address,
+) -> Option<Output> {
+  list.find(
+    outputs,
+    fn(output) { check_amount(output, price) && check_address(output, address) },
+  )
+}
+
+pub fn check_price_duplicate(out_sell: Output, out_royal: Output) -> Bool {
+  lovelace_of(out_sell.value) > lovelace_of(out_royal.value)
+}
+
+pub fn check_address_duplicate(
+  output_author: Output,
+  output_exchange: Output,
+) -> Bool {
+  output_author.address.payment_credential == output_exchange.address.payment_credential
+}
+
+// The function checks the amount
+pub fn check_amount(output: Output, price: Int) -> Bool {
+  lovelace_of(output.value) >= price
 }
diff --git a/contract/src/txbuilder/cip68.txbuilder.ts b/contract/src/txbuilder/cip68.txbuilder.ts
index 1b6b4290..879e0abb 100644
--- a/contract/src/txbuilder/cip68.txbuilder.ts
+++ b/contract/src/txbuilder/cip68.txbuilder.ts
@@ -10,6 +10,8 @@ import {
   UTxO,
   AssetMetadata,
   metadataToCip68,
+  mConStr1,
+  deserializeAddress
 } from "@meshsdk/core";
 import { ICip68Contract } from "../interface/icip68.interface";
 import { MeshAdapter } from "../adapters/mesh.adapter";
@@ -27,25 +29,28 @@ export class Cip68Contract extends MeshAdapter implements ICip68Contract {
   protected mintCompileCode: string = this.readValidator(plutus, title.mint);
   protected storeCompileCode: string = this.readValidator(plutus, title.store);
 
-  protected mintScriptCbor = applyParamsToScript(this.mintCompileCode, []);
-  protected storeScriptCbor = applyParamsToScript(this.storeCompileCode, []);
+  protected storeScriptCbor = applyParamsToScript(this.storeCompileCode, ["9dcd4b00b1d25d24c07a82c02af5e955e42271a2548136df4af35b38", BigInt(1)]);
 
-  protected mintScript: PlutusScript = {
-    code: this.mintScriptCbor,
-    version: "V3",
-  };
   protected storeScript: PlutusScript = {
     code: this.storeScriptCbor,
     version: "V3",
   };
-
-  protected policyId = resolveScriptHash(this.mintScriptCbor, "V3");
-  protected storeAddress = serializePlutusScript(
+   protected storeAddress = serializePlutusScript(
     this.storeScript,
     undefined,
     APP_NETWORK,
     false,
   ).address;
+  protected storeScriptHash = deserializeAddress(this.storeAddress).scriptHash;
+  protected mintScriptCbor = applyParamsToScript(this.mintCompileCode, [
+    "9dcd4b00b1d25d24c07a82c02af5e955e42271a2548136df4af35b38", BigInt(1),this.storeScriptHash
+  ]);
+  protected mintScript: PlutusScript = {
+    code: this.mintScriptCbor,
+    version: "V3",
+  };
+  protected policyId = resolveScriptHash(this.mintScriptCbor, "V3");
+ 
 
   /**
    *
@@ -62,19 +67,24 @@ export class Cip68Contract extends MeshAdapter implements ICip68Contract {
     quantity: string;
   }) => {
     const { utxos, walletAddress, collateral } = await this.getWalletForTx();
+
     const utxoRef: UTxO = await this.getUtxoForTx(
       MINT_REFERENCE_SCRIPT_ADDRESS,
       MINT_REFERENCE_SCRIPT_HASH,
     );
-    const unsignedTx = await this.meshTxBuilder
+
+    console.log(deserializeAddress(walletAddress).pubKeyHash)
+    const unsignedTx = this.meshTxBuilder
       .mintPlutusScriptV3()
-      .mint(String(quantity), this.policyId, CIP68_222(stringToHex(assetName)))
-      .mintTxInReference(utxoRef.input.txHash, utxoRef.input.outputIndex)
+      .mint(quantity, this.policyId, CIP68_222(stringToHex(assetName)))
+      // .mintTxInReference(utxoRef.input.txHash, utxoRef.input.outputIndex)
+      .mintingScript(this.mintScriptCbor)
       .mintRedeemerValue(mConStr0([]))
 
       .mintPlutusScriptV3()
       .mint("1", this.policyId, CIP68_100(stringToHex(assetName)))
-      .mintTxInReference(utxoRef.input.txHash, utxoRef.input.outputIndex)
+      .mintingScript(this.mintScriptCbor)
+      // .mintTxInReference(utxoRef.input.txHash, utxoRef.input.outputIndex)
       .mintRedeemerValue(mConStr0([]))
 
       .txOut(this.storeAddress, [
@@ -84,7 +94,15 @@ export class Cip68Contract extends MeshAdapter implements ICip68Contract {
         },
       ])
       .txOutInlineDatumValue(metadataToCip68(metadata))
+      .txOut("addr_test1qzwu6jcqk8f96fxq02pvq2h4a927ggn35f2gzdklfte4kwx0sd5zdvsat2chsyyjxkjxcg6uz2y46avd46mzqdgdy3dsckqxs4", [
+        {
+          unit: "lovelace",
+          quantity: "1500000",
+        },
+      ])
+      
       .changeAddress(walletAddress)
+      .requiredSignerHash(deserializeAddress(walletAddress).pubKeyHash)
       .selectUtxosFrom(utxos)
       .txInCollateral(
         collateral.input.txHash,
@@ -95,6 +113,78 @@ export class Cip68Contract extends MeshAdapter implements ICip68Contract {
     return unsignedTx.complete();
   };
 
+  burn = async ({
+    assetName,
+    quantity,
+    txHash,
+  }: {
+    assetName: string;
+    quantity: string;
+    txHash: string;
+  }) => {
+    const { utxos, walletAddress, collateral } = await this.getWalletForTx();
+
+    const mintUtxoRef: UTxO = await this.getUtxoForTx(
+      MINT_REFERENCE_SCRIPT_ADDRESS,
+      MINT_REFERENCE_SCRIPT_HASH,
+    );
+    const storeUtxoRef: UTxO = await this.getUtxoForTx(
+      STORE_REFERENCE_SCRIPT_ADDRESS,
+      STORE_REFERENCE_SCRIPT_HASH,
+    );
+
+    const storeUtxo = await this.getUtxoForTx(this.storeAddress, txHash);
+    const userUtxo = await this.getUtxoForTx(walletAddress, txHash);
+
+    const unsignedTx = this.meshTxBuilder
+      // .txIn(storeUtxo.input.txHash, storeUtxo.input.outputIndex)
+
+      .mintPlutusScriptV3()
+      .mint(quantity, this.policyId, CIP68_222(stringToHex(assetName)))
+    .mintingScript(this.mintScriptCbor)
+      // .mintTxInReference(
+      //   mintUtxoRef.input.txHash,
+      //   mintUtxoRef.input.outputIndex,
+      // )
+      .mintRedeemerValue(mConStr1([]))
+
+      .spendingPlutusScriptV3()
+      .txIn(storeUtxo.input.txHash, storeUtxo.input.outputIndex)
+      .txInInlineDatumPresent()
+      .txInRedeemerValue(mConStr1([]))
+      .spendingTxInReference(
+        storeUtxoRef.input.txHash,
+        storeUtxoRef.input.outputIndex,
+      )
+
+      .txOut(walletAddress, [
+        {
+          unit: this.policyId + CIP68_100(stringToHex(assetName)),
+          quantity: "1",
+        },
+      ])
+      .txOutInlineDatumValue("")
+
+      .mintPlutusScriptV3()
+      .mint(quantity, this.policyId, CIP68_100(stringToHex(assetName)))
+      .mintTxInReference(
+        mintUtxoRef.input.txHash,
+        mintUtxoRef.input.outputIndex,
+      )
+      .mintRedeemerValue(mConStr1([]))
+      .requiredSignerHash(deserializeAddress(walletAddress).pubKeyHash)
+      .changeAddress(walletAddress)
+      .selectUtxosFrom(utxos)
+      .txInCollateral(
+        collateral.input.txHash,
+        collateral.input.outputIndex,
+        collateral.output.amount,
+        collateral.output.address,
+      );
+
+    return unsignedTx.complete();
+  };
+
   update = async ({
     assetName,
     metadata,
@@ -127,6 +217,7 @@ export class Cip68Contract extends MeshAdapter implements ICip68Contract {
       .txInInlineDatumPresent()
       .txInRedeemerValue(mConStr0([]))
       .spendingTxInReference(utxoRef.input.txHash, utxoRef.input.outputIndex)
+
       .txOut(this.storeAddress, [
         {
           unit: this.policyId + CIP68_100(stringToHex(assetName)),
@@ -134,6 +225,14 @@ export class Cip68Contract extends MeshAdapter implements ICip68Contract {
         },
       ])
       .txOutInlineDatumValue(metadataToCip68(metadata))
+
+      .txOut("addr_test1qzwu6jcqk8f96fxq02pvq2h4a927ggn35f2gzdklfte4kwx0sd5zdvsat2chsyyjxkjxcg6uz2y46avd46mzqdgdy3dsckqxs4", [
+        {
+          unit: "lovelace",
+          quantity: "1000000",
+        },
+      ])
+      .requiredSignerHash(deserializeAddress(walletAddress).pubKeyHash)
       .changeAddress(walletAddress)
       .selectUtxosFrom(utxos)
       .txInCollateral(
diff --git a/contract/tests/cip68.test.ts b/contract/tests/cip68.test.ts
index 08722672..b4d6e849 100644
--- a/contract/tests/cip68.test.ts
+++ b/contract/tests/cip68.test.ts
@@ -3,6 +3,7 @@ import { describe, test, expect, beforeEach } from "@jest/globals";
 import {
   BlockfrostProvider,
   BrowserWallet,
+  deserializeAddress,
   KoiosProvider,
   MeshTxBuilder,
   MeshWallet,
@@ -37,22 +38,42 @@ describe("Mint, Burn, Update, Remove Assets (NFT/TOKEN) CIP68", function () {
     });
   });
 
-  // test("Mint", async function () {
+  test("Mint", async function () {
+    const cip68Contract: Cip68Contract = new Cip68Contract({
+      fetcher: blockfrostProvider,
+      wallet: wallet,
+      meshTxBuilder: meshTxBuilder,
+    });
+
+    const unsignedTx: string = await cip68Contract.mint({
+      assetName: "CIP68 Generators000001",
+      metadata: {
+        name: "CIP68 Generators",
+        image: "ipfs://QmRzicpReutwCkM6aotuKjErFCUD213DpwPq6ByuzMJaua",
+        mediaType: "image/jpg",
+        description: "Open source dynamic assets (Token/NFT) generator (CIP68)",
+        author: deserializeAddress(await wallet.getChangeAddress()).pubKeyHash,
+      },
+      quantity: "1",
+    });
+    const signedTx = await wallet.signTx(unsignedTx, true);
+    const txHash = await wallet.submitTx(signedTx);
+    console.log(txHash);
+    expect(txHash.length).toBe(64);
+  });
+
+  // test("Burn", async function () {
   //   const cip68Contract: Cip68Contract = new Cip68Contract({
   //     fetcher: blockfrostProvider,
   //     wallet: wallet,
   //     meshTxBuilder: meshTxBuilder,
   //   });
 
-  //   const unsignedTx: string = await cip68Contract.mint({
+  //   const unsignedTx: string = await cip68Contract.burn({
   //     assetName: "CIP68 Generators",
-  //     metadata: {
-  //       name: "CIP68 Generators",
-  //       image: "ipfs://QmRzicpReutwCkM6aotuKjErFCUD213DpwPq6ByuzMJaua",
-  //       mediaType: "image/jpg",
-  //       description: "Open source dynamic assets (Token/NFT) generator (CIP68)",
-  //     },
-  //     quantity: "1",
+  //     txHash:
+  //       "728fa7f14b3652a34dfd0f920b5739ede6bda1a88e9ffc52d74636bb41007235",
+  //     quantity: "-1",
   //   });
   //   const signedTx = await wallet.signTx(unsignedTx, true);
   //   const txHash = await wallet.submitTx(signedTx);
@@ -74,7 +95,8 @@ describe("Mint, Burn, Update, Remove Assets (NFT/TOKEN) CIP68", function () {
   //       image: "ipfs://QmRzicpReutwCkM6aotuKjErFCUD213DpwPq6ByuzMJaua",
   //       mediaType: "image/jpg",
   //     },
-  //     txHash: "d3c92245ad396c3c05e2530be2e0d3a3adbf1871113fcb18a197c23e4fdfcd1a",
+  //     txHash:
+  //       "d3c92245ad396c3c05e2530be2e0d3a3adbf1871113fcb18a197c23e4fdfcd1a",
   //   });
   //   const signedTx = await wallet.signTx(unsignedTx, true);
   //   const txHash = await wallet.submitTx(signedTx);
@@ -82,18 +104,18 @@ describe("Mint, Burn, Update, Remove Assets (NFT/TOKEN) CIP68", function () {
   //   expect(txHash.length).toBe(64);
   // });
 
-  test("Mint Reference Script", async function () {
-    const cip68Contract: Cip68Contract = new Cip68Contract({
-      fetcher: blockfrostProvider,
-      wallet: wallet,
-      meshTxBuilder: meshTxBuilder,
-    });
-    const unsignedTx: string = await cip68Contract.createReferenceScriptMint();
-    const signedTx = await wallet.signTx(unsignedTx, true);
-    const txHash = await wallet.submitTx(signedTx);
-    console.log(txHash);
-    expect(txHash.length).toBe(64);
-  });
+  //  test('Mint Reference Script', async function () {
+  //       const cip68Contract: Cip68Contract = new Cip68Contract({
+  //           fetcher: blockfrostProvider,
+  //           wallet: wallet,
+  //           meshTxBuilder: meshTxBuilder,
+  //       });
+  //       const unsignedTx: string = await cip68Contract.createReferenceScriptMint();
+  //       const signedTx = await wallet.signTx(unsignedTx, true);
+  //       const txHash = await wallet.submitTx(signedTx);
+  //       console.log(txHash);
+  //       expect(txHash.length).toBe(64);
+  //   });
 
   // test('Store Reference Script', async function () {
   //     const cip68Contract: Cip68Contract = new Cip68Contract({
diff --git a/contract/validators/mint.ak b/contract/validators/mint.ak
index 08d55cd0..6583268d 100644
--- a/contract/validators/mint.ak
+++ b/contract/validators/mint.ak
@@ -1,14 +1,84 @@
-use aiken/crypto.{VerificationKeyHash}
-use cardano/assets.{PolicyId}
+use aiken/collection/list
+use aiken/crypto.{ScriptHash, VerificationKeyHash}
+use cardano/address
+use cardano/assets.{AssetName, PolicyId, without_lovelace}
+use cardano/minting
 use cardano/transaction.{Transaction}
 use cardano/tx.{verify_signature}
+use cardano/value
 use cip68generator/types.{Burn, Mint, MintRedeemer}
+use cip68generator/utils
+use types/cip68
+use validation/find
+
+// validator - mint
+// parameters (exchange_address, store_validator)
+validator mint(
+  exchange: VerificationKeyHash,
+  exchange_fee: Int,
+  store: ScriptHash,
+) {
+  mint(redeemer: MintRedeemer, policy_id: PolicyId, transaction: Transaction) {
+    let Transaction { inputs, outputs, extra_signatories, mint, .. } =
+      transaction
+
+    let mint_flatten =
+      mint
+        |> without_lovelace()
+        |> assets.flatten()
+    let exchange_address = address.from_verification_key(exchange)
+    let output_utxo_exchange =
+      utils.find_output(outputs, exchange_fee, exchange_address)
 
-validator mint(issuer: VerificationKeyHash) {
-  mint(redeemer: MintRedeemer, _policy_id: PolicyId, transaction: Transaction) {
-    let Transaction { extra_signatories, .. } = transaction
     when redeemer is {
-      Mint -> verify_signature(extra_signatories, issuer)
+      Mint -> {
+        let reference_token_option =
+          utils.token_prefix(mint_flatten, cip68.prefix_100)
+        let user_token_option =
+          utils.token_prefix(mint_flatten, cip68.prefix_222)
+        let amount_mint_token: Int = list.length(mint_flatten)
+        let check_none_token =
+          utils.check_none_token(user_token_option, reference_token_option)
+
+        when check_none_token is {
+          False -> False
+          True ->
+            when (reference_token_option, user_token_option) is {
+              (Some(reference_token), Some(user_token)) -> {
+                let reference_value =
+                  assets.from_asset(policy_id, reference_token, 1)
+                let user_value =
+                  assets.from_asset(
+                    policy_id,
+                    user_token,
+                    amount_mint_token - 1,
+                  )
+                let store_address = address.from_script(store)
+                let output_utxo_store =
+                  find.output_by_addr_value(
+                    outputs,
+                    store_address,
+                    reference_value,
+                  )
+                // let output_utxo_user = find.output_by_addr_value(outputs)
+                and {
+                  amount_mint_token >= 2,
+                  minting.exact(mint_flatten, policy_id, reference_token, 1)?,
+                  minting.exact(
+                    mint_flatten,
+                    policy_id,
+                    user_token,
+                    amount_mint_token - 1,
+                  )?,
+                  utils.check_output_utxo(output_utxo_store, extra_signatories)?,
+                  output_utxo_exchange != None,
+                }
+              }
+              _ -> False
+            }
+        }
+      }
+
       Burn -> True
     }
   }
diff --git a/contract/validators/store.ak b/contract/validators/store.ak
index c12b73bb..d4f40757 100644
--- a/contract/validators/store.ak
+++ b/contract/validators/store.ak
@@ -1,18 +1,49 @@
-use cardano/transaction.{OutputReference, Transaction}
-use cip68generator/types.{Redeem, Remove, StoreRedeemer, Update}
+use aiken/crypto.{ScriptHash, VerificationKeyHash}
+use cardano/address
+use cardano/assets.{flatten, without_lovelace}
+use cardano/transaction.{
+  InlineDatum, Output, OutputReference, Transaction, find_input,
+}
+use cip68generator/types.{Remove, StoreRedeemer, Update}
+use cip68generator/utils
 use types/cip68.{CIP68}
+use validation/find.{output_by_addr_value}
 
-validator store {
+validator store(exchange: VerificationKeyHash, exchange_fee: Int) {
   spend(
-    _datum: Option<CIP68>,
+    datum: Option<CIP68>,
     redeemer: StoreRedeemer,
-    _output_reference: OutputReference,
-    _transaction: Transaction,
+    output_reference: OutputReference,
+    transaction: Transaction,
   ) {
+    expect Some(datum_output) = datum
+    let Transaction { inputs, outputs, extra_signatories, .. } = transaction
+    expect Some(input) = find_input(inputs, output_reference)
+    let script_address = input.output.address
+    let reference_token =
+      input.output.value
+        |> without_lovelace()
+    let validator_output =
+      output_by_addr_value(outputs, script_address, reference_token)
+    let exchange_address = address.from_verification_key(exchange)
+    let output_utxo_exchange =
+      utils.find_output(outputs, exchange_fee, exchange_address)
     when redeemer is {
-      Update -> True
+      Update -> {
+        expect InlineDatum(datum_input) = validator_output.datum
+        let meradatum_output: CIP68 = datum_output
+        expect metadatum_input: CIP68 = datum_input
+        expect author_input: ByteArray = cip68.get(metadatum_input, "author")
+        expect author_output: ByteArray = cip68.get(meradatum_output, "author")
+
+        let check_author = author_input == author_output
+        and {
+          utils.check_output_utxo(validator_output, extra_signatories)?,
+          output_utxo_exchange != None,
+          check_author,
+        }
+      }
       Remove -> True
-      Redeem -> True
     }
   }
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 78b07dd0..af5840f7 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -15,55 +15,55 @@ const compat = new FlatCompat({
 });
 
 const eslintConfig = [
-  // {
-  //   ignores: ["**/node_modules", "**/.eslintrc.js", "src/components/ui/**"],
-  // },
-  // ...compat.extends(
-  //   "eslint:recommended",
-  //   "plugin:@typescript-eslint/eslint-recommended",
-  //   "plugin:@typescript-eslint/recommended",
-  //   "plugin:jsx-a11y/recommended",
-  //   "plugin:prettier/recommended",
-  //   "next",
-  //   "next/core-web-vitals",
-  // ),
-  // {
-  //   plugins: {
-  //     "@typescript-eslint": typescriptEslint,
-  //   },
-  //   languageOptions: {
-  //     globals: {
-  //       ...globals.browser,
-  //       ...globals.amd,
-  //       ...globals.node,
-  //     },
-  //     parser: tsParser,
-  //     ecmaVersion: 5,
-  //     sourceType: "commonjs",
-  //     parserOptions: {
-  //       project: true,
-  //       tsconfigRootDir: __dirname,
-  //     },
-  //   },
-  //   rules: {
-  //     "prettier/prettier": "error",
-  //     "react/react-in-jsx-scope": "off",
-  //     "jsx-a11y/anchor-is-valid": [
-  //       "error",
-  //       {
-  //         components: ["Link"],
-  //         specialLink: ["hrefLeft", "hrefRight"],
-  //         aspects: ["invalidHref", "preferButton"],
-  //       },
-  //     ],
-  //     "react/prop-types": 0,
-  //     "@typescript-eslint/no-unused-vars": 1,
-  //     "react/no-unescaped-entities": 0,
-  //     "@typescript-eslint/explicit-module-boundary-types": "off",
-  //     "@typescript-eslint/no-var-requires": "off",
-  //     "@typescript-eslint/ban-ts-comment": "off",
-  //   },
-  // },
+  {
+    ignores: ["**/node_modules", "**/.eslintrc.js", "src/components/ui/**"],
+  },
+  ...compat.extends(
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:prettier/recommended",
+    "next",
+    "next/core-web-vitals",
+  ),
+  {
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.amd,
+        ...globals.node,
+      },
+      parser: tsParser,
+      ecmaVersion: 5,
+      sourceType: "commonjs",
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: __dirname,
+      },
+    },
+    rules: {
+      "prettier/prettier": "error",
+      "react/react-in-jsx-scope": "off",
+      "jsx-a11y/anchor-is-valid": [
+        "error",
+        {
+          components: ["Link"],
+          specialLink: ["hrefLeft", "hrefRight"],
+          aspects: ["invalidHref", "preferButton"],
+        },
+      ],
+      "react/prop-types": 0,
+      "@typescript-eslint/no-unused-vars": 1,
+      "react/no-unescaped-entities": 0,
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-var-requires": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+    },
+  },
 ];
 
 export default eslintConfig;
diff --git a/next.config.mjs b/next.config.mjs
index 908c860c..25b527c1 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -16,7 +16,7 @@ const nextConfig = {
       {
         protocol: "https",
         hostname: "ipfs.io",
-        pathname: "/ipfs/**",
+        pathname: "/**",
       },
     ],
   },
diff --git a/package.json b/package.json
index 2a3c3299..c08370e5 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,13 @@
     "lint": "next lint --fix",
     "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,json}' --config ./.prettierrc",
     "prepare": "husky",
-    "test": "jest"
+    "test": "jest",
+    "build:contract": "cd ./contract && aiken build"
   },
   "dependencies": {
-    "@meshsdk/core": "^1.7.9",
-    "@meshsdk/react": "^1.7.9",
+    "@hookform/resolvers": "^3.9.1",
+    "@meshsdk/core": "^1.7.11",
+    "@meshsdk/react": "^1.7.11",
     "@prisma/client": "^5.21.1",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-aspect-ratio": "^1.1.0",
@@ -25,7 +27,9 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.3",
@@ -36,17 +40,19 @@
     "clsx": "^2.1.1",
     "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
-    "framer-motion": "^11.11.10",
+    "framer-motion": "^11.11.11",
     "lodash": "^4.17.21",
     "lucide-react": "^0.447.0",
-    "next": "^15.0.1",
+    "next": "^15.0.2",
     "next-auth": "^5.0.0-beta.25",
     "node-cache": "^5.1.2",
+    "prism-react-renderer": "^2.4.0",
     "react": "^19.0.0-rc-fb9a90fa48-20240614",
     "react-copy-to-clipboard": "^5.1.0",
     "react-countup": "^6.5.3",
     "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0-rc-fb9a90fa48-20240614",
+    "react-hook-form": "^7.53.1",
     "react-icons": "^5.3.0",
     "react-simple-typewriter": "^5.0.1",
     "react-vertical-timeline-component": "^3.6.0",
@@ -55,10 +61,11 @@
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "yarn": "^1.22.22",
-    "zustand": "^5.0.0"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.1",
+    "@eslint/compat": "^1.2.2",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.13.0",
     "@jest/globals": "^29.7.0",
@@ -66,14 +73,15 @@
     "@types/crypto-js": "^4.2.2",
     "@types/dotenv": "^6.1.1",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.12",
-    "@types/node": "^20.17.0",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^20.17.5",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-vertical-timeline-component": "^3.3.6",
     "dotenv": "^16.4.5",
     "eslint": "^9.13.0",
     "eslint-config-next": "15.0.1",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "globals": "^15.11.0",
     "husky": "^9.1.6",
diff --git a/src/app/(app)/dashboard/(profile)/_components/profile-page.tsx b/src/app/(app)/dashboard/(profile)/_components/profile-page.tsx
index d0a535d2..192ecdf2 100644
--- a/src/app/(app)/dashboard/(profile)/_components/profile-page.tsx
+++ b/src/app/(app)/dashboard/(profile)/_components/profile-page.tsx
@@ -4,20 +4,18 @@ import { Button } from "@/components/ui/button";
 import { appImage, walletImage } from "@/public/images";
 import Image from "next/image";
 import Link from "next/link";
-import { Pagination } from "swiper/modules";
 import { IoLocation } from "react-icons/io5";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { VscVerified } from "react-icons/vsc";
 import Asset from "./asset";
 
 export default function ProfilePage() {
   return (
     <main className="flex-1 overflow-y-auto overflow-x-hidden">
-      <aside className="py-8 px-10 m-auto flex flex-col gap-6">
+      <aside className="py-8 px-10 m-auto flex flex-col gap-6 max-md:p-2">
         <section className="rounded-xl p-6 bg-[#13161b] shadow-md flex items-center justify-between flex-wrap gap-3">
           <div className="grid gap-6 items-center min-w-0">
             <section className="flex items-center gap-2">
-              <div className="flex items-center justify-center w-[90px] h-[90px] shadow-sm overflow-hidden border-[1px] border-solid border-gray-800 rounded-full">
+              <div className="flex items-center justify-center w-[90px] h-[90px] shadow-sm overflow-hidden border-[1px] border-solid border-gray-800 rounded-full max-md:w-14 max-md:h-14">
                 <Image
                   src={appImage.cardano}
                   alt="Avatar"
@@ -25,12 +23,14 @@ export default function ProfilePage() {
                 />
               </div>
               <div className="min-w-0 grid gap-1 justify-start ">
-                <h3 className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap justify-stretch text-2xl">
+                <h3 className="max-w-full overflow-hidden text-ellipsis whitespace-nowrap justify-stretch text-2xl max-md:text-[24px] max-md:leading-7">
                   Independence
                 </h3>
                 <div className="flex items-center justify-center py-1 px-2 rounded-lg bg-[#282c34] text-gray-400 shadow-md gap-1">
-                  <IoLocation className="text-[20px] font-bold text-gray-200" />
-                  <span>addr_test1qz...rtm6</span>
+                  <IoLocation className="text-[20px] max-md:text-[14px] font-bold text-gray-200" />
+                  <span className="max-md:text-[12px]">
+                    addr_test1qz...rtm6
+                  </span>
                   <svg viewBox="0 0 24 24" width="12" height="12">
                     <path
                       fillRule="evenodd"
@@ -42,13 +42,15 @@ export default function ProfilePage() {
                 </div>
               </div>
             </section>
-            <section className="flex flex-wrap py-2 px-3 items-center gap-5 rounded-lg bg-[linear-gradient(270deg,_rgba(174,193,197,0)_0.07%,_rgba(174,193,197,0.19)_92.8%,_rgba(174,193,197,0.2)_99.14%)]">
+            <section className="flex flex-wrap py-2 px-3 items-center gap-5 rounded-lg bg-[linear-gradient(270deg,_rgba(174,193,197,0)_0.07%,_rgba(174,193,197,0.19)_92.8%,_rgba(174,193,197,0.2)_99.14%)] max-md:py-1 max-md:px-2">
               <div className="flex items-center gap-2">
-                <Image
-                  src={walletImage.nami}
-                  alt="Wallet"
-                  className="w-7 h-7 object-cover"
-                />
+                <div className="w-7 h-7 max-md:w-5 max-md:h-5">
+                  <Image
+                    src={walletImage.nami}
+                    alt="Wallet"
+                    className="w-full h-full object-cover"
+                  />
+                </div>
                 <div className="flex flex-col justify-center">
                   <p className="text-[10px]">Balance</p>
                   <p className="text-[14px] font-semibold">60,117.219 ₳</p>
diff --git a/src/app/(app)/dashboard/detail/[unit]/_components/detail-page.tsx b/src/app/(app)/dashboard/detail/[unit]/_components/detail-page.tsx
index 06565c97..6c983922 100644
--- a/src/app/(app)/dashboard/detail/[unit]/_components/detail-page.tsx
+++ b/src/app/(app)/dashboard/detail/[unit]/_components/detail-page.tsx
@@ -257,7 +257,7 @@ export default function DetailPage() {
                     OWNER
                   </h3>
                   <Link
-                    href=""
+                    href="/#"
                     className="flex items-center gap-2 overflow-hidden"
                   >
                     <div className="w-8 h-8 overflow-hidden relative rounded-full">
diff --git a/src/app/(app)/dashboard/detail/_components/history/index.tsx b/src/app/(app)/dashboard/detail/_components/history/index.tsx
index 6dff6c2c..6d6fac6a 100644
--- a/src/app/(app)/dashboard/detail/_components/history/index.tsx
+++ b/src/app/(app)/dashboard/detail/_components/history/index.tsx
@@ -10,10 +10,10 @@ export default function DetailHistoryPage() {
     <VerticalTimeline>
       <VerticalTimelineElement
         className="vertical-timeline-element--work shadow-sm"
-        contentStyle={{ background: "#13161B", color: "#fff" }}
+        contentStyle={{ background: "#13161B", color: "#ccc" }}
         contentArrowStyle={{ borderRight: "7px solid  #13161B" }}
-        date="2011 - present"
-        iconStyle={{ background: "rgb(33, 150, 243)", color: "#fff" }}
+        date="25 Sep, 2024 10:46 - Mint"
+        iconStyle={{ background: "#13161B", color: "#fff" }}
       >
         <h3 className="vertical-timeline-element-title">Creative Director</h3>
         <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
diff --git a/src/app/(app)/dashboard/utilities/_components/create-collection-button.tsx b/src/app/(app)/dashboard/utilities/_components/create-collection-button.tsx
deleted file mode 100644
index f125c98b..00000000
--- a/src/app/(app)/dashboard/utilities/_components/create-collection-button.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-
-export function CreateCollection() {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button className="bg-orange-500 text-white hover:bg-orange-600">
-          Create New
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="bg-card">
-        <div className="w-full max-w-md rounded-l p-6">
-          <form className="space-y-6">
-            <div className="space-y-2">
-              <Label htmlFor="name">Title</Label>
-              <Input id="name" required />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="description">Description</Label>
-              <Textarea id="description" />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="link">Link</Label>
-              <Input id="link" />
-            </div>
-            <Button type="submit" className="w-full">
-              Submit
-            </Button>
-          </form>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/app/(app)/dashboard/utilities/_components/folder-card.tsx b/src/app/(app)/dashboard/utilities/_components/folder-card.tsx
index f9100f4e..202d0501 100644
--- a/src/app/(app)/dashboard/utilities/_components/folder-card.tsx
+++ b/src/app/(app)/dashboard/utilities/_components/folder-card.tsx
@@ -1,19 +1,29 @@
 import { FolderIcon } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Card } from "@/components/ui/card";
+import { Collection } from "@prisma/client";
+import Link from "next/link";
+import { dashboardRoutes } from "@/constants/routers";
 
-export default function FolderCard() {
+export default function FolderCard({ collection }: { collection: Collection }) {
   return (
-    <Card className="rounded-lg p-2">
-      <div className="flex items-center justify-between p-2">
-        <div className="flex items-center space-x-3">
-          <FolderIcon className="h-5 w-5 text-yellow-400" />
-          <span className="text-sm font-medium text-white">
-            collection name
-          </span>
+    <Link
+      href={
+        dashboardRoutes.utilities.children.collection.redirect +
+        `/${collection.id}`
+      }
+    >
+      <Card className="rounded-lg p-2">
+        <div className="flex items-center justify-between p-2">
+          <div className="flex items-center space-x-3">
+            <FolderIcon className="h-5 w-5 text-yellow-400" />
+            <span className="text-sm font-medium text-white">
+              {collection.name}
+            </span>
+          </div>
+          <Checkbox className="h-4 w-4 rounded-full" />
         </div>
-        <Checkbox className="h-4 w-4 rounded-full" />
-      </div>
-    </Card>
+      </Card>
+    </Link>
   );
 }
diff --git a/src/app/(app)/dashboard/utilities/collection/[id]/create/page.tsx b/src/app/(app)/dashboard/utilities/collection/[id]/create/page.tsx
new file mode 100644
index 00000000..58639027
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/[id]/create/page.tsx
@@ -0,0 +1,9 @@
+import JsonBuilder from "../../_components/json-builder";
+
+export default function Page() {
+  return (
+    <>
+      <JsonBuilder />
+    </>
+  );
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/[id]/layout.tsx b/src/app/(app)/dashboard/utilities/collection/[id]/layout.tsx
new file mode 100644
index 00000000..17658c31
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/[id]/layout.tsx
@@ -0,0 +1,14 @@
+import MetadataProvider from "../_context/metadata";
+
+export default async function Layout({
+  params,
+  children,
+}: {
+  params: Promise<{ id: string }>;
+  children: React.ReactNode;
+}) {
+  const collectionId = (await params).id;
+  return (
+    <MetadataProvider collectionId={collectionId}>{children}</MetadataProvider>
+  );
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/[id]/page.tsx b/src/app/(app)/dashboard/utilities/collection/[id]/page.tsx
index c135be15..f128871b 100644
--- a/src/app/(app)/dashboard/utilities/collection/[id]/page.tsx
+++ b/src/app/(app)/dashboard/utilities/collection/[id]/page.tsx
@@ -1,5 +1,65 @@
-import CollectionPage from "@/app/(app)/dashboard/(utilities)/_components/collection";
+"use client";
+import { Icons } from "@/components/common/icons";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsTrigger } from "@/components/ui/tabs";
+import { TabsList } from "@radix-ui/react-tabs";
+import Link from "next/link";
+import { useMetadataContext } from "../_context/metadata";
+import MetadataList from "../_components/metadata-list";
+import MetadataGird from "../_components/metadata-gird";
+import Pagination from "../_components/pagination";
+import { ExternalLink } from "lucide-react";
+import { Filter } from "../_components/filter";
+import MetadataAction from "../_components/metadata-action";
 
-export default function page() {
-  return <CollectionPage />;
+export default function MetadataPage() {
+  const { collectionId } = useMetadataContext();
+  return (
+    <div className="mt-5 rounded-lg bg-section p-2">
+      <h1 className="text-2xl font-semibold leading-7">Metadata</h1>
+      <div className="mt-5">
+        <Tabs defaultValue="list" className="px-4">
+          <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg p-2">
+            <TabsList>
+              <TabsTrigger
+                value="list"
+                className="data-[state=active]:bg-gray-600"
+              >
+                <Icons.squareMenu className="h-5 w-5" />
+              </TabsTrigger>
+              <TabsTrigger
+                value="grid"
+                className="data-[state=active]:bg-gray-600"
+              >
+                <Icons.layoutGrid className="h-5 w-5" />
+              </TabsTrigger>
+            </TabsList>
+
+            <div className="flex items-center space-x-2">
+              <MetadataAction />
+              <Link href={`${collectionId}/create`}>
+                <Button className="bg-orange-500 text-white hover:bg-orange-600">
+                  Create New
+                </Button>
+              </Link>
+            </div>
+          </div>
+          <Filter />
+          <TabsContent value="list">
+            <MetadataList />
+          </TabsContent>
+          <TabsContent value="grid">
+            <MetadataGird />
+          </TabsContent>
+        </Tabs>
+        <div className="flex flex-col items-center justify-between space-y-2 sm:flex-row sm:space-y-0">
+          <Button variant="link" className="text-sm font-semibold sm:text-base">
+            <span>Document</span>
+            <ExternalLink className="ml-2 h-4 w-4" />
+          </Button>
+          <Pagination />
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/app/(app)/dashboard/utilities/collection/[id]/update/page.tsx b/src/app/(app)/dashboard/utilities/collection/[id]/update/page.tsx
deleted file mode 100644
index 3058c6cf..00000000
--- a/src/app/(app)/dashboard/utilities/collection/[id]/update/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function page() {
-  return <div> page</div>;
-}
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/create-collection-button.tsx b/src/app/(app)/dashboard/utilities/collection/_components/create-collection-button.tsx
new file mode 100644
index 00000000..d3ffccfe
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/create-collection-button.tsx
@@ -0,0 +1,110 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import * as z from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "@/hooks/use-toast";
+import { createCollection } from "@/services/database/collection";
+import { useCollectionContext } from "../_context/collection";
+
+const formSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  description: z.string(),
+});
+
+export function CreateCollectionButton() {
+  const { createNewDialogOpen, toggleCreateNewDialogOpen } =
+    useCollectionContext();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+    },
+  });
+
+  async function handleSubmit(values: z.infer<typeof formSchema>) {
+    const { result, message } = await createCollection(values);
+    if (result) {
+      toast({ title: "Success", description: message });
+      form.reset();
+      toggleCreateNewDialogOpen(false);
+    } else {
+      toast({
+        title: "Error",
+        description: message,
+        variant: "destructive",
+      });
+    }
+  }
+
+  return (
+    <>
+      <Button
+        onClick={() => toggleCreateNewDialogOpen(true)}
+        className="bg-orange-500 text-white hover:bg-orange-600"
+      >
+        Create New
+      </Button>
+      <Dialog
+        open={createNewDialogOpen}
+        onOpenChange={toggleCreateNewDialogOpen}
+      >
+        <DialogContent className="bg-card">
+          <DialogTitle>Create New Collection</DialogTitle>
+
+          <div className="w-full max-w-md rounded-l p-2">
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(handleSubmit)}
+                className="space-y-8 max-w-3xl mx-auto"
+              >
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Input placeholder="Collection Name" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <Textarea
+                          placeholder="Description..."
+                          className="resize-none"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <Button type="submit">Submit</Button>
+              </form>
+            </Form>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/filter.tsx b/src/app/(app)/dashboard/utilities/collection/_components/filter.tsx
new file mode 100644
index 00000000..6fd4a9ef
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/filter.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { DatePickerWithRange } from "@/components/common/date-range-picker";
+import { DateRange } from "react-day-picker";
+import { useState } from "react";
+import { filterDefault } from "@/constants";
+import { FilterType } from "@/types";
+import { useMetadataContext } from "../_context/metadata";
+
+export const Filter = () => {
+  const { filter, setFilter } = useMetadataContext();
+  const [temp, setTemp] = useState<FilterType>(filter);
+
+  const handleSearch = () => {
+    if (temp) {
+      setFilter(temp);
+    }
+  };
+  const resetFilter = () => {
+    setTemp(filterDefault);
+    setFilter(filterDefault);
+  };
+  return (
+    <div className="flex flex-col items-center space-y-2 rounded-lg p-4 sm:flex-row sm:space-x-2 sm:space-y-0">
+      <div className="relative flex-grow">
+        <Icons.search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 transform" />
+        <Input
+          type="text"
+          placeholder="Search by Content"
+          value={temp.query}
+          className="w-full rounded-md py-2 pl-10 pr-4 focus:outline-none focus:ring-2"
+          onChange={(e) => setTemp({ ...temp, query: e.target.value })}
+        />
+      </div>
+      <div className="flex space-x-2">
+        <DatePickerWithRange
+          range={temp.range || filter.range}
+          setRange={(range: DateRange | undefined) =>
+            setTemp({
+              ...temp,
+              range: range ?? filter.range,
+            })
+          }
+        />
+      </div>
+      {JSON.stringify(filter) == JSON.stringify(filterDefault) ? (
+        <Button
+          variant="secondary"
+          onClick={handleSearch}
+          className="rounded-md bg-blue-500 w-20 px-4 py-2 font-semibold transition duration-300 ease-in-out"
+        >
+          Search
+        </Button>
+      ) : (
+        <Button
+          onClick={resetFilter}
+          className="rounded-md bg-blue-500 w-20 px-4 py-2 font-semibold transition duration-300 ease-in-out"
+        >
+          Reset
+        </Button>
+      )}
+    </div>
+  );
+};
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/folder-action.tsx b/src/app/(app)/dashboard/utilities/collection/_components/folder-action.tsx
new file mode 100644
index 00000000..62d562ea
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/folder-action.tsx
@@ -0,0 +1,85 @@
+// import { Button } from "@/components/ui/button";
+// import {
+//   AlertDialog,
+//   AlertDialogAction,
+//   AlertDialogCancel,
+//   AlertDialogContent,
+//   AlertDialogDescription,
+//   AlertDialogFooter,
+//   AlertDialogHeader,
+//   AlertDialogTitle,
+//   AlertDialogTrigger,
+// } from "@/components/ui/alert-dialog";
+
+// export default function FolderAction() {
+//   const { listMedia, listSelected, setListSelected, deleteMediaSelected } =
+//     useUploadContext();
+//   return (
+//     <>
+//       {listSelected.length > 0 && (
+//         <div className="inline-flex rounded-md shadow-sm" role="group">
+//           {listSelected.length != listMedia.length ? (
+//             <Button
+//               onClick={() => setListSelected(listMedia)}
+//               variant="secondary"
+//               className="rounded-r-none w-24"
+//             >
+//               Select All
+//             </Button>
+//           ) : (
+//             <Button
+//               onClick={() => setListSelected([])}
+//               variant="secondary"
+//               className="rounded-r-none w-24 "
+//             >
+//               Unselect All
+//             </Button>
+//           )}
+//           {/* <Button
+//             variant="secondary"
+//             className="rounded-none border-x border-gray-600"
+//           >
+//             Format
+//           </Button>
+//           <Button
+//             variant="secondary"
+//             className="rounded-none border-r border-gray-600"
+//           >
+//             Download
+//           </Button> */}
+//           <AlertDialog>
+//             <AlertDialogTrigger asChild>
+//               <Button
+//                 className="rounded-l-none border-l border-gray-600"
+//                 variant="secondary"
+//               >
+//                 Delete
+//               </Button>
+//             </AlertDialogTrigger>
+//             <AlertDialogContent>
+//               <AlertDialogHeader>
+//                 <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+//                 <AlertDialogDescription>
+//                   This action cannot be undone. This will permanently delete
+//                   your media and remove your data from our servers.
+//                 </AlertDialogDescription>
+//               </AlertDialogHeader>
+//               <AlertDialogFooter>
+//                 <AlertDialogCancel>Cancel</AlertDialogCancel>
+//                 <AlertDialogAction onClick={deleteMediaSelected}>
+//                   Continue
+//                 </AlertDialogAction>
+//               </AlertDialogFooter>
+//             </AlertDialogContent>
+//           </AlertDialog>
+//           {/* <Button
+//             variant="secondary"
+//             className="rounded-l-none border-l border-gray-600"
+//           >
+//             Delete
+//           </Button> */}
+//         </div>
+//       )}
+//     </>
+//   );
+// }
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/folder-card.tsx b/src/app/(app)/dashboard/utilities/collection/_components/folder-card.tsx
new file mode 100644
index 00000000..f9100f4e
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/folder-card.tsx
@@ -0,0 +1,19 @@
+import { FolderIcon } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Card } from "@/components/ui/card";
+
+export default function FolderCard() {
+  return (
+    <Card className="rounded-lg p-2">
+      <div className="flex items-center justify-between p-2">
+        <div className="flex items-center space-x-3">
+          <FolderIcon className="h-5 w-5 text-yellow-400" />
+          <span className="text-sm font-medium text-white">
+            collection name
+          </span>
+        </div>
+        <Checkbox className="h-4 w-4 rounded-full" />
+      </div>
+    </Card>
+  );
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/json-builder.tsx b/src/app/(app)/dashboard/utilities/collection/_components/json-builder.tsx
new file mode 100644
index 00000000..d3cdf7b2
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/json-builder.tsx
@@ -0,0 +1,385 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { PlusCircle, Trash2, ChevronDown, ChevronRight } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { useMetadataContext } from "../_context/metadata";
+import { JsonValue } from "@/types";
+import { useJsonStore } from "../_context/metadata/json-builder-store";
+
+function JsonField({
+  parentType,
+  keyName,
+  value,
+  path,
+  updateField,
+  removeField,
+  addField,
+}: {
+  parentType: string;
+  keyName: string;
+  value: JsonValue;
+  path: string[];
+  updateField: (path: string[], value: JsonValue) => void;
+  removeField: (path: string[]) => void;
+  addField: (path: string[]) => void;
+}) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const currentPath = [...path, keyName];
+  const addChildField = () => {
+    if (typeof value === "object" && value !== null) {
+      if (Array.isArray(value)) {
+        updateField(currentPath, [...value, ""]);
+      } else {
+        const newKey = `newField${Object.keys(value).length}`;
+        updateField(currentPath, { ...value, [newKey]: "" });
+      }
+    }
+  };
+
+  const renderValueInput = () => {
+    switch (typeof value) {
+      case "string":
+      case "number":
+        return (
+          <Input
+            value={String(value)}
+            type={typeof value == "number" ? "number" : "text"}
+            onChange={(e) => {
+              let newValue: JsonValue = e.target.value;
+              if (typeof value === "number") newValue = Number(e.target.value);
+              updateField(currentPath, newValue);
+            }}
+            className="w-1/3 bg-section"
+          />
+        );
+      case "boolean":
+        return (
+          <Select
+            value={value ? "true" : "false"}
+            onValueChange={(newValue) =>
+              updateField(currentPath, newValue === "true")
+            }
+          >
+            <SelectTrigger className="w-1/3 bg-section">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="true">True</SelectItem>
+              <SelectItem value="false">False</SelectItem>
+            </SelectContent>
+          </Select>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="ml-8 mt-2">
+      <div className="flex items-center space-x-2">
+        {typeof value === "object" && value !== null && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsExpanded(!isExpanded)}
+            aria-label={isExpanded ? "Collapse" : "Expand"}
+          >
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )}
+          </Button>
+        )}
+        <Select
+          value={Array.isArray(value) ? "array" : typeof value}
+          onValueChange={(newType) => {
+            let newValue: JsonValue = "";
+            if (newType === "number") newValue = 0;
+            if (newType === "boolean") newValue = false;
+            if (newType === "object") newValue = {};
+            if (newType === "array") newValue = [];
+            updateField(currentPath, newValue);
+          }}
+        >
+          <SelectTrigger className="w-[120px] bg-section">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="string">String</SelectItem>
+            <SelectItem value="number">Number</SelectItem>
+            <SelectItem value="boolean">Boolean</SelectItem>
+            <SelectItem value="object">Object</SelectItem>
+            <SelectItem value="array">Array</SelectItem>
+          </SelectContent>
+        </Select>
+        <Label className="w-1/4">
+          <Input
+            value={keyName}
+            disabled={parentType == "array"}
+            onChange={(e) => {
+              const newPath = [...path, e.target.value];
+              removeField(currentPath);
+              updateField(newPath, value);
+            }}
+            className="w-full bg-section"
+          />
+        </Label>
+
+        {renderValueInput()}
+        {typeof value === "object" && value !== null && (
+          <Button onClick={addChildField} aria-label="Add child field">
+            <PlusCircle className="mr-2 h-4 w-4" />
+            {`Add Child`}
+          </Button>
+        )}
+        <Button
+          variant="destructive"
+          size="icon"
+          onClick={() => removeField(currentPath)}
+          aria-label="Remove field"
+        >
+          <Trash2 className="h-4 w-4 text-white" />
+        </Button>
+      </div>
+      {isExpanded && typeof value === "object" && value !== null && (
+        <div className="ml-4 mt-2">
+          {Array.isArray(value)
+            ? value.map((item, index) => (
+                <JsonField
+                  parentType={"array"}
+                  key={index}
+                  keyName={String(index)}
+                  value={item}
+                  path={currentPath}
+                  updateField={updateField}
+                  removeField={removeField}
+                  addField={addField}
+                />
+              ))
+            : Object.entries(value).map(([subKey, subValue]) => (
+                <JsonField
+                  parentType="object"
+                  key={subKey}
+                  keyName={subKey}
+                  value={subValue}
+                  path={currentPath}
+                  updateField={updateField}
+                  removeField={removeField}
+                  addField={addField}
+                />
+              ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function JsonBuilder() {
+  const { createMetadata } = useMetadataContext();
+  const { jsonBuilder, setJsonBuilder, addField, updateField, removeField } =
+    useJsonStore();
+  const [template, setTemplate] = useState<string>("");
+  const [inputValue, setInputValue] = useState<string>(
+    JSON.stringify(jsonBuilder, null, 2),
+  );
+  const [err, setErr] = useState("");
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = event.target.value;
+    setInputValue(value);
+    try {
+      const parsedJson = JSON.parse(value);
+      setJsonBuilder(parsedJson);
+      setErr("");
+    } catch (error) {
+      if (error instanceof Error) {
+        setErr(error.message);
+      } else {
+        setErr(String(error));
+      }
+    }
+  };
+
+  useEffect(() => {
+    setInputValue(JSON.stringify(jsonBuilder, null, 2));
+  }, [jsonBuilder]);
+
+  return (
+    <div className="bg-section h-full rounded-lg p-5 flex flex-col">
+      <Tabs defaultValue="basic" className="flex-grow overflow-y-auto">
+        <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg p-2 mb-4">
+          <TabsList>
+            <TabsTrigger value="basic">Basic</TabsTrigger>
+            <TabsTrigger value="advanced">Advanced</TabsTrigger>
+          </TabsList>
+
+          <Select
+            value={template}
+            onValueChange={(newValue) => {
+              switch (newValue) {
+                case "Fungible":
+                  setTemplate("Fungible");
+                  setJsonBuilder({
+                    ticker: "SYMBOL",
+                    decimals: 6,
+                    version: "1.0",
+                    name: "Fungible Token",
+                    description: "Demo fungible token",
+                    image: "ipfs://QmZ4t3...",
+                    external_url: "https://example.com",
+                    attributes: [
+                      {
+                        trait_type: "Rarity",
+                        value: "Common",
+                      },
+                      {
+                        trait_type: "Type",
+                        value: "Weapon",
+                      },
+                    ],
+                  });
+                  break;
+                case "Audio":
+                  setTemplate("Audio");
+                  setJsonBuilder({
+                    name: "Audio NFT",
+                    description: "Demo audio NFT",
+                    files: [
+                      {
+                        name: "Audio File",
+                        src: "ipfs://audio_file_location",
+                        mediaType: "audio/mpeg",
+                      },
+                    ],
+                    image: "",
+                    external_url: "",
+                    animation_url: "",
+                    attributes: [],
+                  });
+                  break;
+                case "Image":
+                  setTemplate("Image");
+                  setJsonBuilder({
+                    name: "Image NFT",
+                    description: "",
+                    files: [
+                      {
+                        name: "Image File",
+                        src: "ipfs://image_file_location",
+                        mediaType: "image/png",
+                      },
+                    ],
+                    image: "",
+                    external_url: "",
+                    attributes: [],
+                  });
+                  break;
+                case "Smart":
+                  setTemplate("Smart");
+                  setJsonBuilder({
+                    name: "Smart Asset",
+                    description: "",
+                    files: [
+                      {
+                        name: "Smart File",
+                        src: "ipfs://smart_file_location",
+                        mediaType: "application/jsonBuilder",
+                      },
+                    ],
+                    image: "",
+                    external_url: "",
+                    animation_url: "",
+                    attributes: [],
+                  });
+                  break;
+                case "Video":
+                  setTemplate("Video");
+                  setJsonBuilder({
+                    name: "Video NFT",
+                    description: "",
+                    files: [
+                      {
+                        name: "Video File",
+                        src: "ipfs://video_file_location",
+                        mediaType: "video/mp4",
+                      },
+                    ],
+                    image: "",
+                    external_url: "",
+                    animation_url: "",
+                    attributes: [],
+                  });
+                  break;
+                default:
+                  setTemplate("");
+                  setJsonBuilder({});
+                  break;
+              }
+            }}
+          >
+            <SelectTrigger className="w-1/3 bg-section">
+              <SelectValue placeholder="Select Asset Type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="Fungible">Fungible Asset Metadata</SelectItem>
+              <SelectItem value="Audio">Audio Asset Metadata</SelectItem>
+              <SelectItem value="Image">Image Asset Metadata</SelectItem>
+              <SelectItem value="Smart">Smart Asset Metadata</SelectItem>
+              <SelectItem value="Video">Video Asset Metadata</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <p className="text-red-500 text-sm">{err}</p>
+
+        <TabsContent value="basic">
+          <div className="space-y-4">
+            {Object.entries(jsonBuilder).map(([key, value]) => (
+              <JsonField
+                parentType="object"
+                key={key}
+                keyName={key}
+                value={value}
+                path={[]}
+                updateField={updateField}
+                removeField={removeField}
+                addField={addField}
+              />
+            ))}
+            <Button onClick={() => addField([])} className="flex items-center">
+              <PlusCircle className="mr-2 h-4 w-4" />
+              Add Root Field
+            </Button>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="advanced" className="flex-grow">
+          <Textarea
+            className="w-full h-80 overflow-auto rounded-md p-4 border border-dashed border-[#6272a4] bg-[#282a36]"
+            value={inputValue}
+            onChange={handleInputChange}
+          />
+        </TabsContent>
+      </Tabs>
+
+      <div className="mt-4">
+        <Button onClick={() => createMetadata(jsonBuilder)} className="w-full">
+          Create
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/metadata-action.tsx b/src/app/(app)/dashboard/utilities/collection/_components/metadata-action.tsx
new file mode 100644
index 00000000..5a838e1a
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/metadata-action.tsx
@@ -0,0 +1,90 @@
+import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { useMetadataContext } from "../_context/metadata";
+
+export default function MetadataAction() {
+  const {
+    listMetadata,
+    listSelected,
+    setListSelected,
+    deleteMetadataSelected,
+  } = useMetadataContext();
+  return (
+    <>
+      {listSelected.length > 0 && (
+        <div className="inline-flex rounded-md shadow-sm" role="group">
+          {listSelected.length != listMetadata.length ? (
+            <Button
+              onClick={() => setListSelected(listMetadata)}
+              variant="secondary"
+              className="rounded-r-none w-24"
+            >
+              Select All
+            </Button>
+          ) : (
+            <Button
+              onClick={() => setListSelected([])}
+              variant="secondary"
+              className="rounded-r-none w-24 "
+            >
+              Unselect All
+            </Button>
+          )}
+          {/* <Button
+            variant="secondary"
+            className="rounded-none border-x border-gray-600"
+          >
+            Format
+          </Button>
+          <Button
+            variant="secondary"
+            className="rounded-none border-r border-gray-600"
+          >
+            Download
+          </Button> */}
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button
+                className="rounded-l-none border-l border-gray-600"
+                variant="secondary"
+              >
+                Delete
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This action cannot be undone. This will permanently delete
+                  your media and remove your data from our servers.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction onClick={deleteMetadataSelected}>
+                  Continue
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+          {/* <Button
+            variant="secondary"
+            className="rounded-l-none border-l border-gray-600"
+          >
+            Delete
+          </Button> */}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/metadata-card.tsx b/src/app/(app)/dashboard/utilities/collection/_components/metadata-card.tsx
new file mode 100644
index 00000000..4609721a
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/metadata-card.tsx
@@ -0,0 +1,61 @@
+import { MoreVertical } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Card } from "@/components/ui/card";
+import { AspectRatio } from "@radix-ui/react-aspect-ratio";
+import { Metadata } from "@prisma/client";
+// import { IPFS_GATEWAY } from "@/constants";
+import { useMetadataContext } from "../_context/metadata";
+// import FileDisplay from "@/components/common/file-display";
+import { AssetMetadata } from "@meshsdk/core";
+import Image from "next/image";
+import { isNil } from "lodash";
+
+export default function MetadataCard({ metadata }: { metadata: Metadata }) {
+  const { listSelected, setListSelected } = useMetadataContext();
+  const handleSellect = (metadata: Metadata, checked: boolean) => {
+    if (checked) {
+      setListSelected([...listSelected, metadata]);
+    } else {
+      setListSelected(listSelected.filter((item) => item !== metadata));
+    }
+  };
+
+  const { name } = metadata.content as AssetMetadata;
+
+  return (
+    <Card className="rounded-lg p-2">
+      <div className="mb-2 flex items-center justify-between">
+        <div className="flex items-center space-x-3">
+          <Checkbox
+            className="h-4 w-4 rounded-full"
+            checked={listSelected.includes(metadata)}
+            onClick={() =>
+              handleSellect(metadata, !listSelected.includes(metadata))
+            }
+          />
+          <label
+            htmlFor="metadata-select"
+            className="cursor-pointer truncate text-sm"
+          >
+            {!isNil(name) && name.length > 15
+              ? name.slice(0, 15) + "..."
+              : name}
+          </label>
+        </div>
+        <Button variant="ghost" size="icon" className="hover:bg-white/10">
+          <MoreVertical className="h-5 w-5" />
+        </Button>
+      </div>
+      <AspectRatio ratio={4 / 3} className="bg-muted">
+        <Image
+          src={`/metadata-image?metadata=${encodeURIComponent(JSON.stringify(metadata.content))}`}
+          alt={name || "Metadata"}
+          width={800}
+          height={600}
+          className="h-full w-full rounded-lg border object-cover"
+        />
+      </AspectRatio>
+    </Card>
+  );
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/metadata-gird.tsx b/src/app/(app)/dashboard/utilities/collection/_components/metadata-gird.tsx
new file mode 100644
index 00000000..a7b556f1
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/metadata-gird.tsx
@@ -0,0 +1,19 @@
+import { useMetadataContext } from "../_context/metadata";
+import MetadataCard from "./metadata-card";
+
+export default function MetadataGird() {
+  const { loading, listMetadata } = useMetadataContext();
+  if (loading) return <div>Loading...</div>;
+
+  return (
+    <div className="w-full space-y-4 rounded-lg p-4">
+      <div className="overflow-x-auto">
+        <div className="md:grid-col-2 grid grid-cols-1 gap-4 lg:grid-cols-3 xl:grid-cols-4">
+          {listMetadata.map((item, index) => (
+            <MetadataCard metadata={item} key={index} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/metadata-list.tsx b/src/app/(app)/dashboard/utilities/collection/_components/metadata-list.tsx
new file mode 100644
index 00000000..321cceba
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/metadata-list.tsx
@@ -0,0 +1,115 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { MoreVertical } from "lucide-react";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { useMetadataContext } from "../_context/metadata";
+import FileDisplay from "@/components/common/file-display";
+import { AssetMetadata } from "@meshsdk/core";
+import { isNil } from "lodash";
+import { Metadata } from "@prisma/client";
+
+export default function MetadataList() {
+  const { loading, listMetadata, setListSelected, listSelected } =
+    useMetadataContext();
+  if (loading) return <div>Loading...</div>;
+
+  const handleSellect = (metadata: Metadata, checked: boolean) => {
+    if (checked) {
+      setListSelected([...listSelected, metadata]);
+    } else {
+      setListSelected(listSelected.filter((item) => item !== metadata));
+    }
+  };
+
+  return (
+    <div className="w-full space-y-4 rounded-lg p-4">
+      <div className="overflow-x-auto">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[300px] font-normal">NAME</TableHead>
+              <TableHead className="hidden font-normal md:table-cell">
+                Content
+              </TableHead>
+              <TableHead className="hidden font-normal sm:table-cell">
+                DATE
+              </TableHead>
+              <TableHead className="text-right font-normal">ACTION</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {listMetadata.map((metadata, index) => {
+              const { name } = metadata.content as AssetMetadata;
+              return (
+                <TableRow key={index} className="mb-2 rounded-lg">
+                  <TableCell className="rounded-l-lg font-medium">
+                    <div className="flex items-center space-x-4">
+                      <Checkbox
+                        id={`checkbox-${index}`}
+                        checked={listSelected.includes(metadata)}
+                        className="rounded-full"
+                        onClick={() =>
+                          handleSellect(
+                            metadata,
+                            !listSelected.includes(metadata),
+                          )
+                        }
+                      />
+                      <div className="h-10 w-10 overflow-hidden rounded-lg">
+                        <AspectRatio ratio={10 / 10} className="bg-muted">
+                          <FileDisplay
+                            src={``}
+                            alt={name}
+                            type={"text/plain"}
+                            className="h-full w-full rounded-md object-cover"
+                          />
+                        </AspectRatio>
+                      </div>
+                      <div>
+                        <div className="">
+                          {!isNil(name) && name.length > 15
+                            ? name.slice(0, 15) + "..."
+                            : name}
+                        </div>
+                        <div className="text-sm">application/json</div>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell className="hidden md:table-cell">
+                    <div className="flex items-center space-x-2">
+                      {/* <AspectRatio ratio={4 / 3} className="bg-muted">
+                        <Image
+                          src={`/metadata-image?metadata=${encodeURIComponent(JSON.stringify(metadata.content))}`}
+                          alt={name}
+                          fill
+                          className="h-full w-full rounded-lg border object-cover"
+                        />
+                      </AspectRatio>
+                      <Copy className="h-5 w-5" /> */}
+                    </div>
+                  </TableCell>
+                  <TableCell className="hidden sm:table-cell">
+                    {metadata.createdAt.toLocaleDateString()}
+                  </TableCell>
+                  <TableCell className="rounded-r-lg text-right">
+                    <Button variant="ghost" size="icon" className="hover:">
+                      <MoreVertical className="h-5 w-5" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/pagination.tsx b/src/app/(app)/dashboard/utilities/collection/_components/pagination.tsx
new file mode 100644
index 00000000..091bcd82
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/pagination.tsx
@@ -0,0 +1,44 @@
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useMetadataContext } from "../_context/metadata";
+
+export default function Pagination() {
+  const { totalPages, currentPage, setCurrentPage } = useMetadataContext();
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+  return (
+    <div className="flex items-center space-x-2 rounded-lg p-1">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="hover: h-8 w-8"
+        onClick={handlePreviousPage} // Handle previous page
+        disabled={currentPage === 1} // Disable if on the first page
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+      <span className="text-sm">
+        Page <span className="font-medium">{currentPage}</span> of{" "}
+        <span className="font-medium">{totalPages}</span>
+      </span>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="hover: h-8 w-8"
+        onClick={handleNextPage} // Handle next page
+        disabled={currentPage === totalPages} // Disable if on the last page
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/_components/search-bar.tsx b/src/app/(app)/dashboard/utilities/collection/_components/search-bar.tsx
new file mode 100644
index 00000000..b3757c18
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_components/search-bar.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { DatePickerWithRange } from "@/components/common/date-range-picker";
+
+export const SearchBar = () => {
+  return (
+    <div className="flex flex-col items-center space-y-2 rounded-lg p-4 sm:flex-row sm:space-x-2 sm:space-y-0">
+      <div className="relative flex-grow">
+        <Icons.search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 transform" />
+        <Input
+          type="text"
+          placeholder="Search by Name or CID"
+          className="w-full rounded-md py-2 pl-10 pr-4 focus:outline-none focus:ring-2"
+        />
+      </div>
+      <div className="flex space-x-2">
+        <DatePickerWithRange />
+      </div>
+      <Button className="rounded-md bg-blue-500 px-4 py-2 font-semibold transition duration-300 ease-in-out">
+        Search
+      </Button>
+    </div>
+  );
+};
diff --git a/src/app/(app)/dashboard/utilities/collection/_context/collection/index.tsx b/src/app/(app)/dashboard/utilities/collection/_context/collection/index.tsx
new file mode 100644
index 00000000..d2c313e6
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_context/collection/index.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { createContext, PropsWithChildren, useContext, useState } from "react";
+import useCollectionStore, { CollectionStore } from "./store";
+import { getAllCollection } from "@/services/database/collection";
+import { useQuery } from "@tanstack/react-query";
+
+type CollectionContextType = CollectionStore & {
+  loading: boolean;
+};
+
+export default function CollectionProvider({ children }: PropsWithChildren) {
+  useState<boolean>(false);
+  const {
+    listSelected,
+    setListSelected,
+    createNewDialogOpen,
+    toggleCreateNewDialogOpen,
+  } = useCollectionStore();
+  const { data, isLoading } = useQuery({
+    queryKey: ["getCollection"],
+    queryFn: () => getAllCollection(),
+    refetchInterval: 5000,
+  });
+  return (
+    <CollectionContext.Provider
+      value={{
+        loading: isLoading,
+        listCollection: data?.data || [],
+        createNewDialogOpen,
+        toggleCreateNewDialogOpen,
+        listSelected,
+        setListSelected,
+      }}
+    >
+      {children}
+    </CollectionContext.Provider>
+  );
+}
+
+const CollectionContext = createContext<CollectionContextType>(null!);
+export const useCollectionContext = function () {
+  const context = useContext(CollectionContext);
+  if (!context) {
+    throw new Error(
+      "useCollectionContext must be used within a CollectionProvider",
+    );
+  }
+  return context;
+};
diff --git a/src/app/(app)/dashboard/utilities/collection/_context/collection/store.ts b/src/app/(app)/dashboard/utilities/collection/_context/collection/store.ts
new file mode 100644
index 00000000..4c649c0f
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_context/collection/store.ts
@@ -0,0 +1,21 @@
+import { create } from "zustand";
+import { Collection } from "@prisma/client";
+
+export type CollectionStore = {
+  listCollection: Collection[];
+  listSelected: Collection[];
+  createNewDialogOpen: boolean;
+  toggleCreateNewDialogOpen: (open: boolean) => void;
+  setListSelected: (media: Collection[]) => void;
+};
+
+const useCollectionStore = create<CollectionStore>((set) => ({
+  listCollection: [],
+  listSelected: [],
+  createNewDialogOpen: false,
+  setListSelected: (media: Collection[]) => set({ listSelected: media }),
+  toggleCreateNewDialogOpen: (open: boolean) =>
+    set({ createNewDialogOpen: open }),
+}));
+
+export default useCollectionStore;
diff --git a/src/app/(app)/dashboard/utilities/collection/_context/metadata/index.tsx b/src/app/(app)/dashboard/utilities/collection/_context/metadata/index.tsx
new file mode 100644
index 00000000..37eb536a
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_context/metadata/index.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import useMetadataStore, { MetadataStore } from "./store";
+import { AssetMetadata } from "@meshsdk/core";
+import {
+  addMetadata,
+  deleteMetadata,
+  getMetadata,
+} from "@/services/database/metadata";
+import { toast } from "@/hooks/use-toast";
+import { dashboardRoutes } from "@/constants/routers";
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+
+type MetadataContextType = MetadataStore & {
+  loading: boolean;
+  collectionId: string;
+  createMetadata: (metadataContent: AssetMetadata) => void;
+  deleteMetadataSelected: () => void;
+};
+
+export default function MetadataProvider({
+  collectionId,
+  children,
+}: {
+  collectionId: string;
+  children: React.ReactNode;
+}) {
+  const {
+    setListMetadata,
+    currentPage,
+    filter,
+    setFilter,
+    listSelected,
+    setListSelected,
+    setCurrentPage,
+  } = useMetadataStore();
+  const router = useRouter();
+
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: ["getMedia", currentPage, filter],
+    queryFn: () =>
+      getMetadata({
+        collectionId,
+        page: currentPage,
+        query: filter.query,
+        range: filter.range,
+      }),
+    refetchInterval: 5000,
+  });
+
+  const createMetadata = async (metadataContent: AssetMetadata) => {
+    const { result, message } = await addMetadata({
+      collectionId,
+      listMetadata: [metadataContent],
+    });
+    if (result) {
+      toast({
+        title: "Sucess",
+        variant: "default",
+        description: "Metadata created",
+      });
+      router.push(
+        dashboardRoutes.utilities.children.collection.redirect +
+          "/" +
+          collectionId,
+      );
+    } else {
+      toast({
+        title: "Error",
+        variant: "destructive",
+        description: message,
+      });
+    }
+    refetch();
+  };
+
+  const deleteMetadataSelected = async () => {
+    const { result, message } = await deleteMetadata({
+      collectionId,
+      listMetadata: listSelected,
+    });
+    if (result) {
+      toast({
+        title: "Sucess",
+        variant: "default",
+        description: "Metadata deleted",
+      });
+      setListSelected([]);
+    } else {
+      toast({
+        title: "Error",
+        variant: "destructive",
+        description: message,
+      });
+    }
+    refetch();
+  };
+
+  return (
+    <MetadataContext.Provider
+      value={{
+        loading: isLoading,
+        listMetadata: data?.data || [],
+        currentPage,
+        totalPages: data?.totalPages || 0,
+        filter,
+        setFilter,
+        setListMetadata,
+        setCurrentPage,
+        collectionId,
+        listSelected,
+        deleteMetadataSelected,
+        createMetadata,
+        setListSelected,
+      }}
+    >
+      {children}
+    </MetadataContext.Provider>
+  );
+}
+
+const MetadataContext = createContext<MetadataContextType>(null!);
+export const useMetadataContext = function () {
+  const context = useContext(MetadataContext);
+  if (!context) {
+    throw new Error(
+      "useMetadataContext must be used within a MetadataProvider",
+    );
+  }
+  return context;
+};
diff --git a/src/app/(app)/dashboard/utilities/collection/_context/metadata/json-builder-store.ts b/src/app/(app)/dashboard/utilities/collection/_context/metadata/json-builder-store.ts
new file mode 100644
index 00000000..9cfc3cd9
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_context/metadata/json-builder-store.ts
@@ -0,0 +1,60 @@
+import { create } from "zustand";
+import { JsonValue } from "@/types";
+
+interface JsonStore {
+  jsonBuilder: { [key: string]: JsonValue };
+  setJsonBuilder: (newJson: { [key: string]: JsonValue }) => void;
+  addField: (path: string[]) => void;
+  updateField: (path: string[], value: JsonValue) => void;
+  removeField: (path: string[]) => void;
+}
+
+export const useJsonStore = create<JsonStore>((set) => ({
+  jsonBuilder: {},
+  setJsonBuilder: (newJson) => set({ jsonBuilder: newJson }),
+  addField: (path) =>
+    set((state) => {
+      const newJson = { ...state.jsonBuilder };
+      let current = newJson;
+      for (const key of path) {
+        if (typeof current[key] === "object" && current[key] !== null) {
+          current = current[key] as { [key: string]: JsonValue };
+        }
+      }
+      if (Array.isArray(current)) {
+        current.push("");
+      } else {
+        current[`newField${Object.keys(current).length}`] = "";
+      }
+      return { jsonBuilder: newJson };
+    }),
+
+  updateField: (path, value) =>
+    set((state) => {
+      const newJson = { ...state.jsonBuilder };
+      let current = newJson;
+      for (let i = 0; i < path.length - 1; i++) {
+        if (typeof current[path[i]] === "object" && current[path[i]] !== null) {
+          current = current[path[i]] as { [key: string]: JsonValue };
+        }
+      }
+      current[path[path.length - 1]] = value;
+      return { jsonBuilder: newJson };
+    }),
+  removeField: (path) =>
+    set((state) => {
+      const newJson = { ...state.jsonBuilder };
+      let current = newJson;
+      for (let i = 0; i < path.length - 1; i++) {
+        if (typeof current[path[i]] === "object" && current[path[i]] !== null) {
+          current = current[path[i]] as { [key: string]: JsonValue };
+        }
+      }
+      if (Array.isArray(current)) {
+        current.splice(Number(path[path.length - 1]), 1);
+      } else {
+        delete current[path[path.length - 1]];
+      }
+      return { jsonBuilder: newJson };
+    }),
+}));
diff --git a/src/app/(app)/dashboard/utilities/collection/_context/metadata/store.ts b/src/app/(app)/dashboard/utilities/collection/_context/metadata/store.ts
new file mode 100644
index 00000000..27bca53f
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/_context/metadata/store.ts
@@ -0,0 +1,30 @@
+import { create } from "zustand";
+import { Metadata } from "@prisma/client";
+import { FilterType } from "@/types";
+import { filterDefault } from "@/constants";
+
+export type MetadataStore = {
+  listMetadata: Metadata[];
+  setListMetadata: (media: Metadata[]) => void;
+  listSelected: Metadata[];
+  setListSelected: (media: Metadata[]) => void;
+  currentPage: number;
+  totalPages: number;
+  setCurrentPage: (page: number) => void;
+  filter: FilterType;
+  setFilter: (filter: FilterType) => void;
+};
+
+const useMetadataStore = create<MetadataStore>((set) => ({
+  listMetadata: [],
+  listSelected: [],
+  currentPage: 1,
+  totalPages: 0,
+  filter: filterDefault,
+  setFilter: (filter: FilterType) => set({ filter }),
+  setCurrentPage: (page: number) => set({ currentPage: page }),
+  setListMetadata: (media: Metadata[]) => set({ listMetadata: media }),
+  setListSelected: (media: Metadata[]) => set({ listSelected: media }),
+}));
+
+export default useMetadataStore;
diff --git a/src/app/(app)/dashboard/utilities/collection/layout.tsx b/src/app/(app)/dashboard/utilities/collection/layout.tsx
new file mode 100644
index 00000000..1dd399db
--- /dev/null
+++ b/src/app/(app)/dashboard/utilities/collection/layout.tsx
@@ -0,0 +1,6 @@
+import { PropsWithChildren } from "react";
+import CollectionProvider from "./_context/collection";
+
+export default function Layout({ children }: Readonly<PropsWithChildren>) {
+  return <CollectionProvider>{children}</CollectionProvider>;
+}
diff --git a/src/app/(app)/dashboard/utilities/collection/page.tsx b/src/app/(app)/dashboard/utilities/collection/page.tsx
index a69f4bb9..b45d6022 100644
--- a/src/app/(app)/dashboard/utilities/collection/page.tsx
+++ b/src/app/(app)/dashboard/utilities/collection/page.tsx
@@ -1,40 +1,28 @@
-import { Button } from "@/components/ui/button";
-import { CreateCollection } from "../_components/create-collection-button";
-import { SearchBar } from "../_components/search-bar";
-import ListFolderCard from "../_components/list-folder";
+"use client";
+import FolderCard from "../_components/folder-card";
+import { CreateCollectionButton } from "./_components/create-collection-button";
+import { useCollectionContext } from "./_context/collection";
 export default function CollectionPage() {
+  const { listCollection } = useCollectionContext();
   return (
     <div className="mt-5 rounded-lg bg-section p-2">
-      <h1 className="text-2xl font-semibold leading-7">Collection</h1>
+      <h1 className="text-2xl font-semibold leading-7">Collection Metadata</h1>
       <div className="mt-5">
         <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg p-2">
           <div />
           <div className="flex items-center space-x-2">
-            <div className="inline-flex rounded-md shadow-sm" role="group">
-              <Button variant="secondary" className="rounded-r-none">
-                Select All
-              </Button>
-              <Button
-                variant="secondary"
-                className="rounded-none border-x border-gray-600"
-              >
-                Format
-              </Button>
-              <Button
-                variant="secondary"
-                className="rounded-none border-r border-gray-600"
-              >
-                Download
-              </Button>
-              <Button variant="secondary" className="rounded-l-none">
-                Delete
-              </Button>
+            <CreateCollectionButton />
+          </div>
+        </div>
+        <div className="h-[60vh] w-full space-y-4 rounded-lg p-4">
+          <div className="overflow-x-auto">
+            <div className="md:grid-col-2 grid grid-cols-1 gap-4 lg:grid-cols-3 xl:grid-cols-4">
+              {listCollection.map((collection, index) => (
+                <FolderCard collection={collection} key={index} />
+              ))}
             </div>
-            <CreateCollection />
           </div>
         </div>
-        <SearchBar />
-        <ListFolderCard />
       </div>
     </div>
   );
diff --git a/src/app/(app)/dashboard/utilities/metadata/[id]/page.tsx b/src/app/(app)/dashboard/utilities/metadata/[id]/page.tsx
deleted file mode 100644
index c3b96920..00000000
--- a/src/app/(app)/dashboard/utilities/metadata/[id]/page.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Icons } from "@/components/common/icons";
-import { Button } from "@/components/ui/button";
-import { Tabs, TabsContent, TabsTrigger } from "@/components/ui/tabs";
-import { TabsList } from "@radix-ui/react-tabs";
-import { SearchBar } from "../../_components/search-bar";
-import TableData from "../../_components/file-table";
-import ListFileCard from "../../_components/list-file";
-export default function MetadataPage() {
-  return (
-    <div className="mt-5 rounded-lg bg-section p-2">
-      <h1 className="text-2xl font-semibold leading-7">Metadata</h1>
-      <div className="mt-5">
-        <Tabs defaultValue="list" className="px-4">
-          <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg p-2">
-            <TabsList>
-              <TabsTrigger
-                value="list"
-                className="data-[state=active]:bg-gray-600"
-              >
-                <Icons.squareMenu className="h-5 w-5" />
-              </TabsTrigger>
-              <TabsTrigger
-                value="grid"
-                className="data-[state=active]:bg-gray-600"
-              >
-                <Icons.layoutGrid className="h-5 w-5" />
-              </TabsTrigger>
-            </TabsList>
-
-            <div className="flex items-center space-x-2">
-              <div className="inline-flex rounded-md shadow-sm" role="group">
-                <Button variant="secondary" className="rounded-r-none">
-                  Select All
-                </Button>
-                <Button
-                  variant="secondary"
-                  className="rounded-none border-x border-gray-600"
-                >
-                  Format
-                </Button>
-                <Button
-                  variant="secondary"
-                  className="rounded-none border-r border-gray-600"
-                >
-                  Download
-                </Button>
-                <Button variant="secondary" className="rounded-l-none">
-                  Delete
-                </Button>
-              </div>
-              <Button className="bg-orange-500 text-white hover:bg-orange-600">
-                Create New
-              </Button>
-            </div>
-          </div>
-          <SearchBar />
-          <TabsContent value="list">
-            <TableData listMedia={[]} />
-          </TabsContent>
-          <TabsContent value="grid">
-            <ListFileCard listMedia={[]} />
-          </TabsContent>
-        </Tabs>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/(app)/dashboard/utilities/metadata/[id]/update/page.tsx b/src/app/(app)/dashboard/utilities/metadata/[id]/update/page.tsx
deleted file mode 100644
index 3058c6cf..00000000
--- a/src/app/(app)/dashboard/utilities/metadata/[id]/update/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function page() {
-  return <div> page</div>;
-}
diff --git a/src/app/(app)/dashboard/utilities/metadata/create/page.tsx b/src/app/(app)/dashboard/utilities/metadata/create/page.tsx
deleted file mode 100644
index 3058c6cf..00000000
--- a/src/app/(app)/dashboard/utilities/metadata/create/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function page() {
-  return <div> page</div>;
-}
diff --git a/src/app/(app)/dashboard/utilities/metadata/page.tsx b/src/app/(app)/dashboard/utilities/metadata/page.tsx
deleted file mode 100644
index e0b71ac8..00000000
--- a/src/app/(app)/dashboard/utilities/metadata/page.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Card } from "@/components/ui/card";
-import { AspectRatio } from "@/components/ui/aspect-ratio";
-import { Images } from "@/components/common/images";
-import Link from "next/link";
-export default function UtilitiesPage() {
-  return (
-    <div className="rounded-lg bg-section p-2">
-      <h1 className="text-2xl font-semibold leading-7">Utilities</h1>
-      <div className="mt-2 grid grid-cols-1 gap-4 p-4 md:grid-cols-3">
-        <Link
-          href="/dashboard/utilities/collection"
-          className="rounded-lg shadow-none transition-shadow duration-300 hover:shadow-lg hover:shadow-teal-400"
-        >
-          <Card className="h-full">
-            <AspectRatio ratio={5 / 3} className="bg-muted">
-              <Images.metadata className="h-full w-full rounded-t-lg object-cover" />
-            </AspectRatio>
-            <div className="flex flex-col items-center justify-start gap-3 self-stretch px-4 py-2">
-              <div className="font-semibol self-stretch text-center text-base">
-                Collection Metadata
-              </div>
-              <div className="font- self-stretch text-center text-sm text-secondary">
-                Have images but need JSON? We got you covered!
-              </div>
-            </div>
-          </Card>
-        </Link>
-
-        <Link
-          href="/dashboard/utilities/storage"
-          className="rounded-lg shadow-none transition-shadow duration-300 hover:shadow-lg hover:shadow-teal-400"
-        >
-          <Card className="h-full">
-            <AspectRatio ratio={5 / 3} className="bg-muted">
-              <Images.metadata className="h-full w-full rounded-t-lg object-cover" />
-            </AspectRatio>
-            <div className="flex flex-col items-center justify-start gap-3 self-stretch px-4 py-2">
-              <div className="font-semibol self-stretch text-center text-base">
-                Stogare
-              </div>
-              <div className="font- self-stretch text-center text-sm text-secondary">
-                Upload and manage your media
-              </div>
-            </div>
-          </Card>
-        </Link>
-        <Card className="rounded-lg">
-          <AspectRatio ratio={5 / 3} className="bg-muted">
-            <Images.metadata className="h-full w-full rounded-t-lg object-cover" />
-          </AspectRatio>
-          <div className="flex flex-col items-center justify-start gap-3 self-stretch px-4 py-2">
-            <div className="font-semibol self-stretch text-center text-base">
-              Fast collection
-            </div>
-            <div className="font- self-stretch text-center text-sm text-secondary">
-              Create collection using csv file
-            </div>
-          </div>
-        </Card>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/(app)/dashboard/utilities/page.tsx b/src/app/(app)/dashboard/utilities/page.tsx
index 98d36f33..439555ce 100644
--- a/src/app/(app)/dashboard/utilities/page.tsx
+++ b/src/app/(app)/dashboard/utilities/page.tsx
@@ -6,7 +6,7 @@ import { dashboardRoutes } from "@/constants/routers";
 export default function UtilitiesPage() {
   return (
     <div className="py-8 px-10 m-auto flex flex-col">
-      <div className="rounded-xl p-6 bg-[#13161b] shadow-md flex flex-col gap-3">
+      <div className="rounded-xl p-6 bg-[#13161b] shadow-md flex-wrap gap-3 space-y-5">
         <h1 className="text-2xl font-medium leading-7">Utilities</h1>
         <div className="mt-2 grid  gap-4 grid-cols-3 max-md:grid-cols-1">
           <Link
@@ -46,7 +46,7 @@ export default function UtilitiesPage() {
               </div>
             </Card>
           </Link>
-          <Card className="rounded-lg h-full">
+          <Card className="rounded-lg">
             <AspectRatio ratio={5 / 3} className="bg-muted">
               <Images.collection className="h-full w-full rounded-t-lg object-cover" />
             </AspectRatio>
@@ -59,7 +59,7 @@ export default function UtilitiesPage() {
               </div>
             </div>
           </Card>
-          <Card className="rounded-lg h-full">
+          <Card className="rounded-lg">
             <AspectRatio ratio={5 / 3} className="bg-muted">
               <Images.collection className="h-full w-full rounded-t-lg object-cover" />
             </AspectRatio>
@@ -72,29 +72,6 @@ export default function UtilitiesPage() {
               </div>
             </div>
           </Card>
-          <Card className="rounded-lg h-full">
-            <AspectRatio
-              ratio={5 / 3}
-              className="bg-muted flex items-center justify-center opacity-70"
-            >
-              <svg viewBox="0 0 24 24" width="80" height="80">
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M12 1.573a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1a.75.75 0 0 1 .75-.75Zm.83 5.128 4 1.825c.11.05.214.11.31.177L12 11.47 6.86 8.703c.096-.068.2-.127.31-.177l4-1.825a2 2 0 0 1 1.66 0ZM6.037 9.964a2 2 0 0 0-.037.382V15.3a2 2 0 0 0 1.17 1.82l4 1.824.08.035V12.77L6.037 9.964Zm6.713 9.015.08-.035 4-1.824A2 2 0 0 0 18 15.3v-4.954c0-.13-.013-.258-.037-.382L12.75 12.77v6.208Zm0 2.344a.75.75 0 1 0-1.5 0v1a.75.75 0 0 0 1.5 0v-1ZM20.601 3.72a.75.75 0 0 1 0 1.061l-.707.707a.75.75 0 0 1-1.06-1.06l.707-.708a.75.75 0 0 1 1.06 0ZM5.166 20.217a.75.75 0 0 0-1.06-1.06l-.707.706a.75.75 0 0 0 1.06 1.061l.707-.707Zm17.584-7.894a.75.75 0 0 1-.75.75h-1a.75.75 0 0 1 0-1.5h1a.75.75 0 0 1 .75.75ZM3 13.073a.75.75 0 0 0 0-1.5H2a.75.75 0 1 0 0 1.5h1Zm17.601 7.851a.75.75 0 0 1-1.06 0l-.707-.707a.75.75 0 1 1 1.06-1.06l.707.706a.75.75 0 0 1 0 1.061ZM4.106 5.49a.75.75 0 0 0 1.06-1.06L4.46 3.72A.75.75 0 0 0 3.4 4.782l.707.707Z"
-                  fill="currentColor"
-                ></path>
-              </svg>
-            </AspectRatio>
-            <div className="flex flex-col items-center justify-start gap-3 self-stretch px-4 py-2">
-              <div className="font-semibol self-stretch text-center text-base">
-                Builders Program
-              </div>
-              <div className="font- self-stretch text-center text-sm text-secondary">
-                Comming Soon
-              </div>
-            </div>
-          </Card>
         </div>
       </div>
     </div>
diff --git a/src/app/(app)/dashboard/utilities/storage/[id]/page.tsx b/src/app/(app)/dashboard/utilities/storage/[id]/page.tsx
deleted file mode 100644
index 3058c6cf..00000000
--- a/src/app/(app)/dashboard/utilities/storage/[id]/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function page() {
-  return <div> page</div>;
-}
diff --git a/src/app/(app)/dashboard/utilities/storage/[id]/update/page.tsx b/src/app/(app)/dashboard/utilities/storage/[id]/update/page.tsx
deleted file mode 100644
index 3058c6cf..00000000
--- a/src/app/(app)/dashboard/utilities/storage/[id]/update/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function page() {
-  return <div> page</div>;
-}
diff --git a/src/app/(app)/dashboard/utilities/storage/_components/file-card.tsx b/src/app/(app)/dashboard/utilities/storage/_components/file-card.tsx
index 2d3d5354..319e1462 100644
--- a/src/app/(app)/dashboard/utilities/storage/_components/file-card.tsx
+++ b/src/app/(app)/dashboard/utilities/storage/_components/file-card.tsx
@@ -6,7 +6,7 @@ import { AspectRatio } from "@radix-ui/react-aspect-ratio";
 import { Media } from "@prisma/client";
 import { IPFS_GATEWAY } from "@/constants";
 import { useUploadContext } from "../_context";
-import FileDisplay from "./media-image";
+import FileDisplay from "../../../../../../components/common/file-display";
 
 export default function FileCard({ file }: { file: Media }) {
   const { listSelected, setListSelected } = useUploadContext();
diff --git a/src/app/(app)/dashboard/utilities/storage/_components/filter.tsx b/src/app/(app)/dashboard/utilities/storage/_components/filter.tsx
index abfceee2..072d098d 100644
--- a/src/app/(app)/dashboard/utilities/storage/_components/filter.tsx
+++ b/src/app/(app)/dashboard/utilities/storage/_components/filter.tsx
@@ -7,7 +7,8 @@ import { DatePickerWithRange } from "@/components/common/date-range-picker";
 import { useUploadContext } from "../_context";
 import { DateRange } from "react-day-picker";
 import { useState } from "react";
-import { filterDefault, FilterType } from "../_context/store";
+import { filterDefault } from "@/constants";
+import { FilterType } from "@/types";
 
 export const Filter = () => {
   const { filter, setFilter } = useUploadContext();
diff --git a/src/app/(app)/dashboard/utilities/storage/_components/media-list.tsx b/src/app/(app)/dashboard/utilities/storage/_components/media-list.tsx
index 7fa4ed2e..4ad58011 100644
--- a/src/app/(app)/dashboard/utilities/storage/_components/media-list.tsx
+++ b/src/app/(app)/dashboard/utilities/storage/_components/media-list.tsx
@@ -15,7 +15,7 @@ import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { IPFS_GATEWAY } from "@/constants";
 import { useUploadContext } from "../_context";
 import { Media } from "@prisma/client";
-import FileDisplay from "./media-image";
+import FileDisplay from "../../../../../../components/common/file-display";
 
 export default function MediaList() {
   const { loading, listMedia, listSelected, setListSelected } =
@@ -74,7 +74,6 @@ export default function MediaList() {
                     </div>
                     <div>
                       <div className="font-bold">
-                        {" "}
                         {file.name.length > 30
                           ? file.name.slice(0, 30) + "..."
                           : file.name}
diff --git a/src/app/(app)/dashboard/utilities/storage/_context/store.ts b/src/app/(app)/dashboard/utilities/storage/_context/store.ts
index 1fa5d2ab..faccc363 100644
--- a/src/app/(app)/dashboard/utilities/storage/_context/store.ts
+++ b/src/app/(app)/dashboard/utilities/storage/_context/store.ts
@@ -1,19 +1,8 @@
 import { create } from "zustand";
 import { Media } from "@prisma/client";
-import { DateRange } from "react-day-picker";
+import { FilterType } from "@/types";
+import { filterDefault } from "@/constants";
 
-export type FilterType = {
-  range: DateRange;
-  query: string;
-};
-
-export const filterDefault: FilterType = {
-  range: {
-    from: new Date(2024, 0, 1),
-    to: new Date(2024, 11, 31),
-  },
-  query: "",
-};
 export type UploadStore = {
   listMedia: Media[];
   listSelected: Media[];
diff --git a/src/app/(app)/metadata-image/route.tsx b/src/app/(app)/metadata-image/route.tsx
new file mode 100644
index 00000000..16a9cfb7
--- /dev/null
+++ b/src/app/(app)/metadata-image/route.tsx
@@ -0,0 +1,63 @@
+import { ImageResponse } from "next/og";
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const jsonString = searchParams.get("metadata");
+
+  if (!jsonString) {
+    return new Response("No metadata provided", { status: 400 });
+  }
+
+  let metadata;
+  try {
+    metadata = JSON.parse(jsonString);
+  } catch (e) {
+    return new Response(e instanceof Error ? e.message : "unknown error", {
+      status: 400,
+    });
+  }
+
+  const ThumbnailComponent = (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "column",
+        width: "800px",
+        height: "600px",
+        backgroundColor: "#44475a", // Màu nền tối
+        fontFamily: "monospace",
+        fontSize: "30px",
+        fontWeight: "bold",
+        color: "#f1fa8c", // Màu chữ sáng
+        padding: "5px",
+        boxSizing: "border-box",
+        whiteSpace: "pre-wrap",
+        overflow: "hidden",
+        textAlign: "left",
+      }}
+    >
+      <pre
+        style={{
+          margin: 0,
+          maxHeight: "100%",
+          overflow: "hidden",
+        }}
+      >
+        <code
+          style={{
+            padding: "10px",
+            borderRadius: "5px",
+          }}
+        >
+          {JSON.stringify(metadata, null, 2)}
+        </code>
+      </pre>
+    </div>
+  );
+
+  return new ImageResponse(ThumbnailComponent, {
+    width: 800,
+    height: 600,
+  });
+}
diff --git a/src/app/(app)/dashboard/utilities/storage/_components/media-image.tsx b/src/components/common/file-display.tsx
similarity index 100%
rename from src/app/(app)/dashboard/utilities/storage/_components/media-image.tsx
rename to src/components/common/file-display.tsx
diff --git a/src/components/layouts/desktop-dashboard/sidebar/index.tsx b/src/components/layouts/desktop-dashboard/sidebar/index.tsx
index 7337a3db..27301da8 100644
--- a/src/components/layouts/desktop-dashboard/sidebar/index.tsx
+++ b/src/components/layouts/desktop-dashboard/sidebar/index.tsx
@@ -4,7 +4,6 @@ import { useSidebarToggle } from "@/hooks/use-sidebar-toggle";
 import { SidebarToggle } from "./sidebar-toggle";
 import { MenuList } from "./menu-list";
 import { Button } from "@/components/ui/button";
-import { Images } from "@/components/common/images";
 import router from "@/constants/routers";
 import Image from "next/image";
 import { appImage } from "@/public/images";
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8200958a..be7fa4d9 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,54 +1,56 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from '@/utils';
+import { cn } from "@/utils"
 
 const buttonVariants = cva(
-    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-    {
-        variants: {
-            variant: {
-                default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-                destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-                outline:
-                    'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-                secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-                ghost: 'hover:bg-accent hover:text-accent-foreground',
-                link: 'text-primary underline-offset-4 hover:underline',
-            },
-            size: {
-                default: 'h-10 px-4 py-2',
-                sm: 'h-9 rounded-md px-3',
-                lg: 'h-11 rounded-md px-8',
-                icon: 'h-10 w-10',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
     },
-);
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
 
 export interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-        VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant, size, asChild = false, ...props }, ref) => {
-        const Comp = asChild ? Slot : 'button';
-        return (
-            <Comp
-                className={cn(buttonVariants({ variant, size, className }))}
-                ref={ref}
-                {...props}
-            />
-        );
-    },
-);
-Button.displayName = 'Button';
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 00000000..7a09245f
--- /dev/null
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 0ba13d5c..4b4251c7 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,21 +1,26 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from '@/utils';
+import { cn } from "@/utils"
 
 const labelVariants = cva(
-    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-);
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
 
 const Label = React.forwardRef<
-    React.ElementRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-    <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
 
-export { Label };
+export { Label }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 00000000..31818e78
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 00000000..f51e2a0b
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/src/constants/app-contants.ts b/src/constants/app-contants.ts
index a673baf5..af3d74b0 100644
--- a/src/constants/app-contants.ts
+++ b/src/constants/app-contants.ts
@@ -1,3 +1,5 @@
+import { FilterType } from "@/types";
+
 export const appConfig = {
   title: "CIP68 Generator",
   description: "",
@@ -6,3 +8,11 @@ export const uploadConfig = {
   maxFiles: 50,
   maxSize: 5,
 };
+
+export const filterDefault: FilterType = {
+  range: {
+    from: new Date(2024, 0, 1),
+    to: new Date(2024, 11, 31),
+  },
+  query: "",
+};
diff --git a/src/constants/mimeTypes.ts b/src/constants/mime-types.ts
similarity index 100%
rename from src/constants/mimeTypes.ts
rename to src/constants/mime-types.ts
diff --git a/src/constants/routers.ts b/src/constants/routers.ts
index 187487db..4e566d19 100644
--- a/src/constants/routers.ts
+++ b/src/constants/routers.ts
@@ -24,7 +24,7 @@ export const dashboardRoutes = {
     redirect: "/dashboard/utilities",
     children: {
       collection: {
-        redirect: "/dashboard/collection",
+        redirect: "/dashboard/utilities/collection",
       },
       storage: {
         redirect: "/dashboard/utilities/storage",
diff --git a/src/services/api/blockfrost.ts b/src/services/api/blockfrost.ts
new file mode 100644
index 00000000..a0d158b5
--- /dev/null
+++ b/src/services/api/blockfrost.ts
@@ -0,0 +1,12 @@
+import { BLOCKFROST_API_KEY } from "@/contract/src/constants";
+import { BlockFrostAPI } from "@blockfrost/blockfrost-js";
+
+class BlockfrostService extends BlockFrostAPI {
+  constructor() {
+    super({
+      projectId: BLOCKFROST_API_KEY,
+    });
+  }
+}
+
+export default BlockfrostService;
diff --git a/src/services/api/koios.ts b/src/services/api/koios.ts
new file mode 100644
index 00000000..5a78fe7b
--- /dev/null
+++ b/src/services/api/koios.ts
@@ -0,0 +1,12 @@
+import "dotenv/config";
+import { Axios } from "axios";
+
+class KoiosService extends Axios {
+  constructor() {
+    super({
+      baseURL: process.env.KOIOS_RPC_URL_PREPROD!,
+    });
+  }
+}
+
+export default KoiosService;
diff --git a/src/services/database/collection/index.ts b/src/services/database/collection/index.ts
new file mode 100644
index 00000000..6ddb3a62
--- /dev/null
+++ b/src/services/database/collection/index.ts
@@ -0,0 +1,71 @@
+"use server";
+import { auth } from "@/lib/auth";
+import prisma from "@/lib/prisma";
+import { UnauthorizedException } from "@/utils/http/http-exceptions";
+
+export async function createCollection({
+  name,
+  description,
+}: {
+  name: string;
+  description?: string;
+}) {
+  try {
+    const session = await auth();
+    const userId = session?.user?.id;
+
+    if (!userId) {
+      throw new UnauthorizedException();
+    }
+
+    await prisma.collection.create({
+      data: {
+        name,
+        description,
+        userId,
+      },
+    });
+
+    return {
+      result: true,
+      message: "success",
+    };
+  } catch (e: unknown) {
+    return {
+      result: false,
+      message:
+        e instanceof Error ? e.message : "Cant create collection,unknown error",
+    };
+  }
+}
+export async function getAllCollection() {
+  try {
+    const session = await auth();
+    const userId = session?.user?.id;
+
+    if (!userId) {
+      throw new UnauthorizedException();
+    }
+
+    const collections = await prisma.collection.findMany({
+      where: {
+        userId: userId,
+      },
+    });
+
+    return {
+      result: true,
+      message: "success",
+      data: collections,
+    };
+  } catch (error: unknown) {
+    return {
+      result: false,
+      data: [],
+      message:
+        error instanceof Error
+          ? error.message
+          : "Cant get collection ,Unknown error",
+    };
+  }
+}
diff --git a/src/services/database/media/index.ts b/src/services/database/media/index.ts
index 3848404e..2e27104e 100644
--- a/src/services/database/media/index.ts
+++ b/src/services/database/media/index.ts
@@ -4,22 +4,20 @@ import { auth } from "@/lib/auth";
 import prisma from "@/lib/prisma";
 import { UnauthorizedException } from "@/utils/http/http-exceptions";
 import { Media } from "@prisma/client";
-import { isNil } from "lodash";
+import { isEmpty, isNil } from "lodash";
 import { DateRange } from "react-day-picker";
 
-interface GetMediaParams {
-  query?: string | null;
-  range?: DateRange | null;
-  page?: number;
-  limit?: number;
-}
-
 export async function getMedia({
   query = null,
   range = null,
   page = 1,
   limit = 12,
-}: GetMediaParams) {
+}: {
+  query?: string | null;
+  range?: DateRange | null;
+  page?: number;
+  limit?: number;
+}) {
   try {
     const session = await auth();
     const userId = session?.user?.id;
@@ -30,7 +28,7 @@ export async function getMedia({
 
     const whereConditions: {
       userId: string;
-      OR: Array<
+      OR?: Array<
         | {
             name?: {
               contains: string;
@@ -50,10 +48,10 @@ export async function getMedia({
       };
     } = {
       userId: userId,
-      OR: [],
     };
 
-    if (!isNil(query)) {
+    if (!isNil(query) && !isEmpty(query)) {
+      whereConditions.OR = whereConditions.OR || [];
       whereConditions.OR.push({
         name: {
           contains: query,
diff --git a/src/services/database/metadata/index.ts b/src/services/database/metadata/index.ts
new file mode 100644
index 00000000..adb5ebb2
--- /dev/null
+++ b/src/services/database/metadata/index.ts
@@ -0,0 +1,203 @@
+"use server";
+
+import { auth } from "@/lib/auth";
+import prisma from "@/lib/prisma";
+import { UnauthorizedException } from "@/utils/http/http-exceptions";
+import { AssetMetadata } from "@meshsdk/core";
+import { Metadata } from "@prisma/client";
+import { isEmpty, isNil } from "lodash";
+import { DateRange } from "react-day-picker";
+
+export async function addMetadata({
+  collectionId,
+  listMetadata,
+}: {
+  collectionId: string;
+  listMetadata: AssetMetadata[];
+}) {
+  try {
+    const session = await auth();
+    const userId = session?.user?.id;
+
+    if (isNil(userId)) {
+      throw new UnauthorizedException();
+    }
+
+    const collection = await prisma.collection.findFirst({
+      where: {
+        id: collectionId,
+        userId: userId,
+      },
+    });
+
+    if (isNil(collection)) {
+      throw new Error("Collection not found");
+    }
+
+    await prisma.metadata.createMany({
+      data: listMetadata.map((metadata) => ({
+        collectionId,
+        content: metadata,
+      })),
+    });
+
+    return {
+      result: true,
+      message: "success",
+    };
+  } catch (e: unknown) {
+    return {
+      result: false,
+      message:
+        e instanceof Error ? e.message : "Cant create metadata,unknown error",
+    };
+  }
+}
+
+export async function getMetadata({
+  collectionId,
+  query = null,
+  range = null,
+  page = 1,
+  limit = 12,
+}: {
+  collectionId: string;
+  query?: string | null;
+  range?: DateRange | null;
+  page?: number;
+  limit?: number;
+}) {
+  try {
+    const session = await auth();
+    const userId = session?.user?.id;
+
+    if (!userId) {
+      throw new UnauthorizedException();
+    }
+
+    const collection = await prisma.collection.findFirst({
+      where: {
+        id: collectionId,
+        userId: userId,
+      },
+    });
+
+    if (isNil(collection)) {
+      throw new Error("Collection not found");
+    }
+
+    // Define whereConditions with OR clause for JSON filtering on multiple paths
+    const whereConditions: {
+      collectionId: string;
+      OR?: Array<{
+        content: {
+          path: string[];
+          string_contains: string;
+          mode: "insensitive";
+        };
+      }>;
+      createdAt?: {
+        gte: Date;
+        lte: Date;
+      };
+    } = {
+      collectionId,
+    };
+
+    if (!isNil(query) && !isEmpty(query)) {
+      whereConditions.OR = [
+        {
+          content: {
+            path: ["name"],
+            string_contains: query,
+            mode: "insensitive",
+          },
+        },
+        {
+          content: {
+            path: ["description"],
+            string_contains: query,
+            mode: "insensitive",
+          },
+        },
+      ];
+    }
+
+    if (!isNil(range) && range.from && range.to) {
+      whereConditions.createdAt = {
+        gte: range.from,
+        lte: range.to,
+      };
+    }
+
+    const metadata = await prisma.metadata.findMany({
+      where: whereConditions,
+      skip: (page - 1) * limit,
+      take: limit,
+    });
+
+    const totalItems = await prisma.metadata.count({
+      where: whereConditions,
+    });
+
+    return {
+      data: metadata,
+      totalItems,
+      totalPages: Math.ceil(totalItems / limit),
+      currentPage: page,
+    };
+  } catch (e) {
+    return {
+      data: [],
+      message: e instanceof Error ? e.message : "unknown error",
+    };
+  }
+}
+
+export async function deleteMetadata({
+  collectionId,
+  listMetadata,
+}: {
+  collectionId: string;
+  listMetadata: Metadata[];
+}) {
+  try {
+    const session = await auth();
+    const userId = session?.user?.id;
+
+    if (!userId) {
+      throw new UnauthorizedException();
+    }
+
+    const collection = await prisma.collection.findFirst({
+      where: {
+        id: collectionId,
+        userId: userId,
+      },
+    });
+
+    if (isNil(collection)) {
+      throw new Error("Collection not found");
+    }
+
+    const metadataIds = listMetadata.map((metadata) => metadata.id);
+
+    await prisma.metadata.deleteMany({
+      where: {
+        id: {
+          in: metadataIds,
+        },
+      },
+    });
+
+    return {
+      result: true,
+      message: "success",
+    };
+  } catch (e) {
+    return {
+      result: false,
+      message: e instanceof Error ? e.message : "unknown error",
+    };
+  }
+}
diff --git a/src/services/upload/kudo.ts b/src/services/upload/kudo.ts
index 39a2af3e..31cc3151 100644
--- a/src/services/upload/kudo.ts
+++ b/src/services/upload/kudo.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 "use server";
 import { IPFS_ENDPOINT } from "@/constants";
-import mimeTypes from "@/constants/mimeTypes";
+import mimeTypes from "@/constants/mime-types";
 import { auth } from "@/lib/auth";
 import prisma from "@/lib/prisma";
 import { UnauthorizedException } from "@/utils/http/http-exceptions";
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index e48c885e..8f85c0ef 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 /* eslint-disable no-var */
 import { Icons } from "@/components/common/icons";
 import { BrowserWallet } from "@meshsdk/core";
@@ -15,6 +16,24 @@ declare global {
   var cacheUser: NodeCache;
 }
 
+export type JsonValue = string | number | boolean | JsonObject | JsonArray;
+export interface JsonObject {
+  [key: string]: JsonValue;
+}
+export interface JsonArray extends Array<JsonValue> {}
+export interface JsonStore {
+  jsonBuilder: { [key: string]: JsonValue };
+  setJsonBuilder: (newJson: { [key: string]: JsonValue }) => void;
+  addField: (path: string[]) => void;
+  updateField: (path: string[], value: JsonValue) => void;
+  removeField: (path: string[]) => void;
+}
+
+export type FilterType = {
+  range: DateRange;
+  query: string;
+};
+
 export type WalletType = {
   name: string;
   image: string | StaticImageData;