diff --git a/components/NFTMint/WriterMessage.vue b/components/NFTMint/WriterMessage.vue
index afbef058..86bdd8e3 100644
--- a/components/NFTMint/WriterMessage.vue
+++ b/components/NFTMint/WriterMessage.vue
@@ -40,6 +40,67 @@
         </div>
       </div>
     </div>
+    <div
+      class="flex flex-col justify-start gap-[32px] p-[20px] pb-[24px] border-2 border-[#E6F4F2] rounded-[16px] w-full"
+    >
+      <Label
+        class="w-min text-like-green"
+        :text="$t('NFTPortal.label.message.collections')"
+        tag="div"
+        preset="p6"
+        valign="middle"
+        align="left"
+        content-class="whitespace-nowrap"
+      >
+        <template #prepend>
+          <IconEye />
+        </template>
+      </Label>
+      <Button
+        v-if="selectedNftCollection"
+        preset="tertiary"
+        text-preset="h6"
+        size="mini"
+        align="center"
+        :text="selectedNftCollection.displayName"
+        @click="handleSelectCollections(null)"
+      >
+        <template #append>
+          <IconDelete/>
+        </template>
+      </Button>
+      <template v-else>
+        <Button
+          v-for="n in nftCollections"
+          :key="n.id"
+          preset="tertiary"
+          text-preset="h6"
+          size="mini"
+          align="center"
+          :text="n.displayName"
+          @click="handleSelectCollections(n)"
+        />
+        <Button
+          preset="tertiary"
+          text-preset="h6"
+          size="mini"
+          align="center"
+          @click="handleNewCollections"
+        >
+          <template #prepend>
+            <TextField
+              :value="newCollectionName"
+              :placeholder="$t('NFTPortal.placeholder.newCollectionName')"
+              @click.native.stop="() => {}"
+              @input="(value) => (newCollectionName = value)"
+            />
+          </template>
+          <template #append>
+            <IconAddMini/>
+          </template>
+        </Button>
+      </template>
+    </div>
 
     <div class="flex justify-center">
       <Button
@@ -109,9 +170,14 @@ export default class UploadForm extends Vue {
 
   @Prop(Number) readonly premintAmount!: undefined
 
+  @Prop(Array) readonly nftCollections!: any[]
+
+  @Prop(Object) readonly selectedNftCollection!: any
+
   userInfo: any = undefined
   avatar: string = ''
   displayName: string = this.address
+  newCollectionName: string = '';
   shouldShowSettings = false
 
   async mounted() {
@@ -129,6 +195,14 @@ export default class UploadForm extends Vue {
     }
   }
 
+  handleSelectCollections(collection: any) {
+    this.$emit('select-collection', collection)
+  }
+
+  handleNewCollections() {
+    this.$emit('select-collection', { displayName: this.newCollectionName })
+  }
+
   handleClickSettings() {
     this.shouldShowSettings = !this.shouldShowSettings
   }
diff --git a/constant/api.ts b/constant/api.ts
index 0f2beb55..43a3dfad 100644
--- a/constant/api.ts
+++ b/constant/api.ts
@@ -30,6 +30,7 @@ export const getNFTMetadata = (iscnId: string) => {
     qsPayload,
   )}`;
 };
+export const getNFTCollectionsApi = (wallet: string, collectionId?: string) => `${LIKE_CO_API_ROOT}/likernft/collections/${collectionId ? `${collectionId}/` : ''}?wallet=${wallet}`;
 export const getChainNFTIdList = (classId: string): string => `${LIKECOIN_CHAIN_API}/likechain/likenft/v1/owner?class_id=${classId}`
 export const getUserInfoMinByAddress = (addr: string) =>
   `${LIKE_CO_API_ROOT}/users/addr/${addr}/min`;
diff --git a/pages/nft/iscn/_iscnId.vue b/pages/nft/iscn/_iscnId.vue
index 94c76cfe..e311187b 100644
--- a/pages/nft/iscn/_iscnId.vue
+++ b/pages/nft/iscn/_iscnId.vue
@@ -34,7 +34,10 @@
         :address="address"
         :placeholder="reservePlaceholder"
         :premint-amount="premintAmount"
+        :nft-collections="nftCollections"
+        :selected-nft-collection="pendingCollection"
         @message-change="(value) => (message = value)"
+        @select-collection="onSelectCollection"
         @update-input="handleInputReserveNft"
       />
 
@@ -95,7 +98,7 @@
                 class="flex items-center underline"
                 href="https://discord.gg/likecoin"
                 target="_blank"
-                @click.native.prevent="onReport"
+                @click.prevent="onReport"
               >
                 <span>{{ $t('NFTPortal.label.report') }}</span>
               </a>
@@ -134,11 +137,12 @@ import {
   getNftUriViaNftId,
   getChainNFTIdList,
   getNftModelApi,
+  getNFTCollectionsApi,
 } from '~/constant/api'
 import { getSigningClient } from '~/utils/cosmos/iscn/sign'
 import { ISCNRecordWithID } from '~/utils/cosmos/iscn/iscn.type'
 import { LIKER_LAND_URL, LIKER_NFT_API_WALLET, LIKER_NFT_FEE_WALLET } from '~/constant'
-import sendLIKE from '~/utils/cosmos/sign'
+import { sendLIKE } from '~/utils/cosmos/sign'
 import { getAccountBalance } from '~/utils/cosmos'
 import { logTrackerEvent } from '~/utils/logger'
 
@@ -214,6 +218,7 @@ export default class NFTTestMintPage extends Vue {
 
   @walletModule.Action toggleSnackbar!: (error: string) => void
   @walletModule.Action('initIfNecessary') initIfNecessary!: () => Promise<any>
+  @walletModule.Action('signTextMessage') signTextMessage!: (arg0: { action: string; }) => any
 
   @walletModule.Getter('getType') walletType!: string | null
   @walletModule.Getter('getWalletAddress') address!: string
@@ -242,6 +247,8 @@ export default class NFTTestMintPage extends Vue {
   NftName: string = '';
   NftDescription: string  = '';
 
+  nftCollections: any[] = [];
+  pendingCollection: any = null;
   message: string = ''
 
   isCustomOgimage = false
@@ -465,6 +472,10 @@ export default class NFTTestMintPage extends Vue {
     return `0 - ${this.premintAmount - 1}`
   }
 
+  get shouldCreateNewNFTCollection() {
+    return this.pendingCollection && !(this.pendingCollection.id && this.nftCollections.find(nft => nft.id === this.pendingCollection.id));
+  }
+
   async mounted() {
     try {
       await Promise.all([
@@ -472,6 +483,7 @@ export default class NFTTestMintPage extends Vue {
         this.getMintInfo(),
       ])
       await this.getOgImage()
+      await this.getNFTCollections();
       if (this.$route.query.mint_status_id && !this.mintStatusId) {
         this.tryRecoverMintStatus(this.$route.query.mint_status_id as string)
       }
@@ -689,6 +701,17 @@ export default class NFTTestMintPage extends Vue {
     }
   }
 
+  async getNFTCollections() {
+    try {
+      const { data } = await this.$axios.get(getNFTCollectionsApi(this.address))
+      const collections = Object.keys(data).map(id => ({ id, ...data[id] }));
+      this.nftCollections = collections;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error)
+    }
+  }
+
   async checkArweaveIdExistsAndEstimateFee() {
     try {
       logTrackerEvent(this, 'IscnMintNFT', 'CheckArweaveIdExistsAndEstimateFee', this.iscnId, 1);
@@ -827,6 +850,9 @@ export default class NFTTestMintPage extends Vue {
         )
         this.postInfo = data
       }
+      if (this.pendingCollection) {
+        await this.handleNFTCollection();
+      }
       logTrackerEvent(this, 'IscnMintNFT', 'PostMintInfoSuccess', this.classId, 1);
     } catch (error: any) {
       // If the API returns a status of 409, it indicates that the request may have already successful
@@ -939,6 +965,41 @@ export default class NFTTestMintPage extends Vue {
     }
   }
 
+  async handleNFTCollection() {
+    if (this.shouldCreateNewNFTCollection) {
+      const signature = await this.signTextMessage({ action: 'new_collection' });
+      const payload = {
+        ...signature,
+        payload: { displayName: this.pendingCollection.displayName, nfts: [this.classId] },
+      }
+      const { data } = await axios.post(
+        getNFTCollectionsApi(this.address),
+        payload,
+      )
+      this.pendingCollection.id = data.id;
+      logTrackerEvent(this, 'IscnMintNFT', 'PostNewCollectionSuccess', this.classId, 1);
+    } else {
+      const signature = await this.signTextMessage({ action: 'patch_collection' });
+      const {
+        id: collectionId,
+        displayName: collectionDisplayName,
+        nfts: collectionNfts,
+      } = this.pendingCollection
+      const payload = {
+        ...signature,
+        payload: {
+          displayName: collectionDisplayName,
+          nfts: collectionNfts.concat(this.classId),
+        },
+      }
+      await axios.patch(
+        getNFTCollectionsApi(this.address, collectionId),
+        payload,
+      )
+      logTrackerEvent(this, 'IscnMintNFT', 'PatchCollectionSuccess', this.classId, 1);
+    }
+  }
+
   async mintNFT() {
     if (this.isSubscriptionMint) {
       if (!this.mintNFTResult) {
@@ -1032,6 +1093,10 @@ export default class NFTTestMintPage extends Vue {
     logTrackerEvent(this, 'IscnMintNFT', 'ReserveNFT', this.reserveNft.toString(), 1);
   }
 
+  onSelectCollection(collection: any | null) {
+    this.pendingCollection = collection;
+  }
+
   onReport() {
     logTrackerEvent(this, 'IscnMintNFT', 'onClickReportIssue', this.mintState, 1);
   }
diff --git a/pages/nft/url/index.vue b/pages/nft/url/index.vue
index d222669b..7b86ef98 100644
--- a/pages/nft/url/index.vue
+++ b/pages/nft/url/index.vue
@@ -93,7 +93,7 @@
                 class="flex items-center underline"
                 href="https://discord.gg/likecoin"
                 target="_blank"
-                @click.native.prevent="onReport"
+                @click.prevent="onReport"
               >
                 <span>{{ $t('NFTPortal.label.report') }}</span>
               </a>
diff --git a/store/subscription.ts b/store/subscription.ts
index b103ab07..ba1c75fe 100644
--- a/store/subscription.ts
+++ b/store/subscription.ts
@@ -12,7 +12,6 @@ import {
   getSubscriptionPortalApi,
   getUserIsSubscribedMinterApi,
 } from '@/constant/api'
-import signSubscriptionAction from '~/utils/cosmos/subscription'
 
 @Module({
   name: 'subscription',
@@ -86,16 +85,9 @@ export default class SubscriptionStore extends VuexModule {
 
   @Action
   async signSubscriptionPortal() {
-    await this.context.dispatch('wallet/initIfNecessary', null, { root: true })
-    const { address: wallet, signer } = this.context.rootState.wallet
     try {
-      this.context.commit('wallet/setMessageSigningMode', true, { root: true })
-      const payload = await signSubscriptionAction(
-        signer,
-        wallet,
-        'subscription_portal',
-      );
-      this.context.commit('wallet/setMessageSigningMode', false, { root: true })
+      const payload = await this.context.dispatch('wallet/signTextMessage', { action: 'subscription_portal' }, { root: true })
+      const { address: wallet } = this.context.rootState.wallet
       const { data } = await axios.post(
         getSubscriptionPortalApi(wallet),
         payload,
@@ -110,21 +102,15 @@ export default class SubscriptionStore extends VuexModule {
 
   @Action
   async newMintInstance() {
-    await this.context.dispatch('wallet/initIfNecessary', null, { root: true })
-    const { address: wallet, signer } = this.context.rootState.wallet
     let payload;
     try {
-      this.context.commit('wallet/setMessageSigningMode', true, { root: true })
-      payload = await signSubscriptionAction(
-        signer,
-        wallet,
-        'new_mint',
-      );
-      this.context.commit('wallet/setMessageSigningMode', false, { root: true })
+      payload = await this.context.dispatch('wallet/signTextMessage', { action: 'new_mint' }, { root: true })
     } catch (_) {
       // no op
       return null;
     }
+
+    const { address: wallet } = this.context.rootState.wallet
     const { data } = await axios.post(
       getNewSubscriberMintInstanceApi(wallet),
       payload,
diff --git a/store/wallet.ts b/store/wallet.ts
index ca82c925..9f8d6518 100644
--- a/store/wallet.ts
+++ b/store/wallet.ts
@@ -5,6 +5,7 @@ import { OfflineSigner } from '@cosmjs/proto-signing'
 import { catchAxiosError } from '~/utils/misc'
 import { LIKECOIN_WALLET_CONNECTOR_CONFIG } from '~/constant/network'
 import { getUserInfoMinByAddress } from '~/constant/api'
+import { signTextAction } from '~/utils/cosmos/sign'
 
 let likecoinWalletLib: any = null
 let connectorInstance: any = null
@@ -93,6 +94,7 @@ export default class Wallet extends VuexModule {
     };
   }
 
+  @Mutation
   setHasSubmittedEmail(hasSubmittedEmail: boolean) {
     this.hasSubmittedEmail = hasSubmittedEmail
   }
@@ -214,6 +216,20 @@ export default class Wallet extends VuexModule {
     this.context.dispatch('subscription/resetAllStatus', null, { root: true });
   }
 
+  @Action
+  async signTextMessage({ action }: { action: string }) {
+    await this.context.dispatch('initIfNecessary');
+    if (!this.signer) throw new Error('WALLET_NOT_INITED')
+    this.context.commit('setMessageSigningMode', true)
+    const payload = await signTextAction(
+      this.signer,
+      this.address,
+      action,
+    );
+    this.context.commit('setMessageSigningMode', false)
+    return payload;
+  }
+
   get getType() {
     return this.type
   }
diff --git a/utils/cosmos/sign.ts b/utils/cosmos/sign.ts
index f1e77f31..c90f9979 100644
--- a/utils/cosmos/sign.ts
+++ b/utils/cosmos/sign.ts
@@ -2,6 +2,9 @@ import network from '@/constant/network';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { OfflineSigner } from '@cosmjs/proto-signing';
 import BigNumber from 'bignumber.js';
+import stringify from 'fast-json-stable-stringify';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { OfflineAminoSigner } from '@cosmjs/amino';
 import { COSMOS_DENOM, TRANSFER_GAS, DEFAULT_GAS_PRICE_NUMBER } from '~/constant';
 
 let cosmLib: any = null;
@@ -33,4 +36,55 @@ export async function sendLIKE(
   return res;
 }
 
-export default sendLIKE;
+async function signTextMessage(inputWallet: string, signer: any, action: string) {
+  if (!inputWallet) return null;
+  const ts = Date.now();
+  const payload = JSON.stringify({
+    action,
+    likeWallet: inputWallet,
+    ts,
+  });
+  const {
+    signed: signedMessage,
+    signature: { signature, pub_key: publicKey },
+  } = await signer(payload);
+  const data = {
+    signature,
+    publicKey: publicKey.value,
+    message: stringify(signedMessage),
+    from: inputWallet,
+  };
+  return data;
+}
+
+async function payloadSigner(
+  signPayload: any,
+  signer: OfflineSigner,
+  address: string,
+) {
+  const message = {
+    chain_id: network.id,
+    memo: signPayload,
+    msgs: [],
+    fee: { gas: '1', amount: [{ denom: network.coinLookup[0].chainDenom, amount: '0' }] },
+    sequence: '0',
+    account_number: '0',
+  };
+  const payload = await (signer as OfflineAminoSigner).signAmino(
+    address,
+    message,
+  );
+  return { message, ...payload };
+}
+
+export function signTextAction(
+  signer: OfflineSigner,
+  address: string,
+  action: string,
+) {
+  return signTextMessage(
+      address,
+      (s: any) => payloadSigner(s, signer, address),
+      action,
+  );
+}
diff --git a/utils/cosmos/subscription.ts b/utils/cosmos/subscription.ts
deleted file mode 100644
index 0bdee192..00000000
--- a/utils/cosmos/subscription.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import stringify from 'fast-json-stable-stringify';
-import network from '@/constant/network';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { OfflineSigner } from '@cosmjs/proto-signing';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { OfflineAminoSigner } from '@cosmjs/amino';
-
-async function signSubscriptionMessage(inputWallet: string, signer: any, action: string) {
-  if (!inputWallet) return null;
-  const ts = Date.now();
-  const payload = JSON.stringify({
-    action,
-    likeWallet: inputWallet,
-    ts,
-  });
-  const {
-    signed: signedMessage,
-    signature: { signature, pub_key: publicKey },
-  } = await signer(payload);
-  const data = {
-    signature,
-    publicKey: publicKey.value,
-    message: stringify(signedMessage),
-    from: inputWallet,
-  };
-  return data;
-}
-
-async function payloadSigner(
-  signPayload: any,
-  signer: OfflineSigner,
-  address: string,
-) {
-  const message = {
-    chain_id: network.id,
-    memo: signPayload,
-    msgs: [],
-    fee: { gas: '1', amount: [{ denom: network.coinLookup[0].chainDenom, amount: '0' }] },
-    sequence: '0',
-    account_number: '0',
-  };
-  const payload = await (signer as OfflineAminoSigner).signAmino(
-    address,
-    message,
-  );
-  return { message, ...payload };
-}
-
-export default function signSubscriptionAction(
-  signer: OfflineSigner,
-  address: string,
-  action: string,
-) {
-  return signSubscriptionMessage(
-      address,
-      (s: any) => payloadSigner(s, signer, address),
-      action,
-  );
-}
\ No newline at end of file