diff --git a/.env.dev b/.env.dev
index 14a6c3f..79f58fe 100644
--- a/.env.dev
+++ b/.env.dev
@@ -4,10 +4,10 @@ VUE_APP_BASE_API2='https://invitation.counterfire.games'
 VUE_APP_GPAL_API='https://game2006api.cebggame.com/'
 # VUE_APP_PASSPORT_PUBLISHABLE_KEY=pk_imapik-test-8c2FAlWxWAoRITk1v9rH
 VUE_APP_PASSPORT_PUBLISHABLE_KEY=pk_imapik-test-eRr-kyOKaZ0jIdrvrPCn
-VUE_APP_PASSPORT_REDIRECT_URI=http://localhost:4000/marketplace
-VUE_APP_PASSPORT_LOGOUT_URI=http://localhost:4000/
-VUE_APP_PASSPORT_CLIENT_ID=eTmUah69p7ZdRhRYzBta6lZRKXXeXDYj
-#VUE_APP_PASSPORT_CLIENT_ID=0FNfXxQywm7wjdbyLTDzWt4txc53yRrT
+VUE_APP_PASSPORT_REDIRECT_URI=http://localhost:4000
+VUE_APP_PASSPORT_LOGOUT_URI=http://localhost:4000
+# VUE_APP_PASSPORT_CLIENT_ID=eTmUah69p7ZdRhRYzBta6lZRKXXeXDYj
+VUE_APP_PASSPORT_CLIENT_ID=0FNfXxQywm7wjdbyLTDzWt4txc53yRrT
 VUE_APP_PASSPORT_MARKET_ADDRESS=0x7d117aA8BD6D31c4fa91722f246388f38ab1942c
 VUE_APP_MKT_API='https://market-test.kingsome.cn'
 VUE_APP_NET_ID='13473'
diff --git a/.env.development b/.env.development
index d58b58b..8ac2c4d 100644
--- a/.env.development
+++ b/.env.development
@@ -7,7 +7,7 @@ VUE_APP_PASSPORT_PUBLISHABLE_KEY=pk_imapik-test-eRr-kyOKaZ0jIdrvrPCn
 VUE_APP_PASSPORT_REDIRECT_URI=https://market.kingsome.cn
 VUE_APP_PASSPORT_LOGOUT_URI=https://market.kingsome.cn
 VUE_APP_PASSPORT_CLIENT_ID=eTmUah69p7ZdRhRYzBta6lZRKXXeXDYj
-#VUE_APP_PASSPORT_CLIENT_ID=0FNfXxQywm7wjdbyLTDzWt4txc53yRrT
+# VUE_APP_PASSPORT_CLIENT_ID=0FNfXxQywm7wjdbyLTDzWt4txc53yRrT
 VUE_APP_PASSPORT_MARKET_ADDRESS=0x7d117aA8BD6D31c4fa91722f246388f38ab1942c
 VUE_APP_MKT_API='https://market-test.kingsome.cn'
 VUE_APP_NET_ID='13473'
diff --git a/marketplace.zip b/marketplace.zip
new file mode 100644
index 0000000..1bc21dd
Binary files /dev/null and b/marketplace.zip differ
diff --git a/src/components/chain/wallet/PassportWallet.js b/src/components/chain/wallet/PassportWallet.js
index a5a16dd..34ce607 100644
--- a/src/components/chain/wallet/PassportWallet.js
+++ b/src/components/chain/wallet/PassportWallet.js
@@ -19,7 +19,7 @@ export class PassportWallet {
     this.passportInstance = new passport.Passport({
       baseConfig,
       clientId, // replace with your client ID from Hub
-      redirectUri: `${redirectUri}/`, // replace with one of your redirect URIs from Hub
+      redirectUri, // replace with one of your redirect URIs from Hub
       logoutRedirectUri, // replace with one of your logout URIs from Hub
       logoutMode: 'silent',
       audience: 'platform_api',
diff --git a/src/components/marketplace/mktContent copy.vue b/src/components/marketplace/mktContent copy.vue
new file mode 100644
index 0000000..893ae59
--- /dev/null
+++ b/src/components/marketplace/mktContent copy.vue	
@@ -0,0 +1,356 @@
+<template>
+  <div class="mkt-content">
+    <div class="mkt-content-left">
+      <OverView :overviewValue="marketplaceList.overview" @clickOverviewChild="overviewChild" />
+      <Sort @clickSortChild="sortChild" />
+      <Price @clickPriceChild="priceChild" />
+      <h2>Type</h2>
+      <Hero :heroValue="marketplaceList.hero" @clickHeroChild="heroChild" />
+      <Rank @clickRankChild="rankChild" />
+      <Gold @clickGoldChild="goldChild" />
+    </div>
+    <div class="mkt-content-right">
+      <div class="mkt-content-right-header">
+        <div class="bg-cor"></div>
+        <div class="results-total"><span v-if="nftList">{{ nftList.length }}</span><span v-else>0 </span> Results</div>
+        <div class="search-list">
+          <li v-if="marketplaceList.overview">
+            <span>Overview: </span>
+            <span>{{ marketplaceList.overview }}</span>
+            <span v-if="marketplaceList.overview" @click="clearOverviewAll">×</span>
+          </li>
+          <li v-if="marketplaceList.sort">
+            <span>Sort By: </span>
+            <span>{{ marketplaceList.sort == '-1' ? 'From low to high' : 'From high to low'}}</span>
+            <span v-if="marketplaceList.sort" @click="clearSortAll">×</span>
+          </li>
+          <li v-if="marketplaceList.minPrice || marketplaceList.maxPrice">
+            <span>Price: </span>
+            <span v-if="!marketplaceList.maxPrice">{{ `>` }}</span>
+            <span>{{ marketplaceList.minPrice }}</span>
+            <span v-if="marketplaceList.minPrice && marketplaceList.maxPrice">~</span>
+            <span v-if="!marketplaceList.minPrice">{{ `<` }}</span>
+            <span>{{ marketplaceList.maxPrice }}</span>
+            <span v-if="marketplaceList.minPrice || marketplaceList.maxPrice" @click="clearPriceAll">×</span>
+          </li>
+          <li v-if="marketplaceList.hero.length != undefined && marketplaceList.hero.length > 0">
+            <span v-if="marketplaceList.hero.length != undefined && marketplaceList.hero.length > 0">Hero: </span>
+            <span v-for="(item,index) in marketplaceList.hero" :key="item">
+              <span>{{ searchName(item) }}</span>
+              <span v-if="marketplaceList.hero.length != index+1">/</span> 
+            </span>
+            <span v-if="marketplaceList.hero != undefined && marketplaceList.hero.length > 0" @click="clearHeroAll">×</span>
+          </li>
+          <li v-if="marketplaceList.rank.length != undefined && marketplaceList.rank.length > 0">
+            <span v-if="marketplaceList.rank.length != undefined && marketplaceList.rank.length > 0">Tier: </span>
+            <span v-for="(item, index) in marketplaceList.rank" :key="index">
+              {{ searchName(item) }}
+              <span v-if="marketplaceList.rank.length != index+1">/</span> 
+            </span>
+            <span v-if="marketplaceList.rank != undefined && marketplaceList.rank.length > 0" @click="clearRankAll">×</span>
+          </li>
+          <li v-if="marketplaceList.gold.length != undefined && marketplaceList.gold.length > 0">
+            <span v-if="marketplaceList.gold.length != undefined && marketplaceList.gold.length > 0">Gold: </span>
+            <span v-for="(item, index) in marketplaceList.gold" :key="item">
+              {{ searchName(item) }}
+              <span v-if="marketplaceList.gold.length != index+1">/</span> 
+            </span>
+            <span v-if="marketplaceList.gold != undefined && marketplaceList.gold.length > 0" @click="clearGoldAll">×</span>
+          </li>
+          <li v-if="isClearAll" class="clear-all" @click="clearAll">Clear All</li>
+        </div>
+      </div>
+      <div class="mkt-content-right-content">
+        <div class="pages" v-if="nftList != undefined && nftList.length > 0">
+          <li v-for="(item, index) in nftList" :key="index">
+            <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
+              <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
+              <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
+                <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
+          </li>
+        </div>
+        <div class="pages-no" v-else>
+          <div>
+            <img src="@/assets/img/marketplace/Empty_state.png" alt="">
+          </div>
+          <p>No NFT yet</p>
+        </div>
+      </div>
+    </div>
+    <LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, toRaw, onMounted, onUnmounted, getCurrentInstance, watch } from "vue";
+const { proxy } = getCurrentInstance();
+import OverView from "@/components/common/searchView/Overview.vue"
+import Sort from "@/components/common/searchView/Sort.vue"
+import Price from "@/components/common/searchView/Price.vue"
+import Card from '@/components/common/card.vue'
+import Hero from "@/components/common/searchView/hero.vue"
+import Rank from "@/components/common/searchView/rank.vue"
+import Gold from "@/components/common/searchView/gold.vue"
+import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
+import NftId from "@/configs/item.json"
+import {apiMarketplaceState} from "@/utils/marketplace.js"
+import { useMarketplaceStore } from "@/store/marketplace"
+const marketplaceList = useMarketplaceStore()
+
+
+
+const loadingDialogVisible = ref(false)
+const nftList = ref([])
+
+const isClearAll = ref(false)
+
+const clearOverviewAll = () => {
+  marketplaceList.overview = ''
+  toRaw(marketplaceList.getParamsData).search.name = ''
+  getHeroData()
+}
+const overviewChild = (val) => {
+  marketplaceList.overview = val
+  toRaw(marketplaceList.getParamsData).search.name = val
+  getHeroData()
+}
+
+const clearSortAll = () => {
+  marketplaceList.sort = ''
+  toRaw(marketplaceList.getParamsData).sort.fields[0].type = ''
+  getHeroData()
+}
+const sortChild = (val) => {
+  nftList.value = []
+  marketplaceList.sort = val
+  toRaw(marketplaceList.getParamsData).sort.fields[0].type = val
+  console.log(toRaw(marketplaceList.getParamsData).sort.fields[0].name)
+  getHeroData()
+}
+
+
+const clearPriceAll = () => {
+  marketplaceList.minPrice = ''
+  marketplaceList.maxPrice = ''
+  toRaw(marketplaceList.getParamsData).filter.price_min = ''
+  toRaw(marketplaceList.getParamsData).filter.price_max = ''
+  getHeroData()
+}
+const priceChild = (minPrice, maxPrice) => {
+  toRaw(marketplaceList.getParamsData).filter.price_min = minPrice
+  toRaw(marketplaceList.getParamsData).filter.price_max = maxPrice
+  getHeroData()
+}
+
+const clearHeroAll = () => {
+  marketplaceList.hero = []
+  toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  getHeroData()
+}
+const heroChild = (val) => {
+  marketplaceList.hero = val
+  toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  getHeroData()
+}
+
+const clearRankAll = () => {
+  marketplaceList.rank = []
+  toRaw(marketplaceList.getParamsData).filter.hero_ranks = []
+  getHeroData()
+}
+const rankChild = (val) => {
+  marketplaceList.rank = val
+  toRaw(marketplaceList.getParamsData).filter.hero_ranks = val
+  getHeroData()
+}
+
+const clearGoldAll = () => {
+  marketplaceList.gold = []
+  toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  getHeroData()
+}
+const goldChild = (val) => {
+  marketplaceList.gold = val
+  toRaw(marketplaceList.getParamsData).filter.item_ids = [...marketplaceList.gold,...marketplaceList.hero]
+  getHeroData()
+}
+
+const clearAll = () => {
+  marketplaceList.overview = ''
+  marketplaceList.sort = ''
+  marketplaceList.minPrice = ''
+  marketplaceList.maxPrice = ''
+  marketplaceList.hero = []
+  marketplaceList.rank = []
+  marketplaceList.gold = []
+  marketplaceList.getParamsData = {
+    page_size: 20,
+    cursor: '',
+    search: {
+      name: '',
+    },
+    filter: {
+      price_min: '',
+      price_max: '',
+      item_ids: [],
+      hero_ranks: [],
+    },
+    sort: {
+      fields: [
+        {
+          name: 'price', 
+          type: 0,
+        }
+      ]
+    }
+  }
+  getHeroData()
+}
+
+const searchName = (id) => {
+  return NftId[id].name
+}
+
+// 更新数据
+const renewNft = async() => {
+  let timer = setTimeout(() => {
+    getHeroData()
+    clearTimeout(timer);
+  }, 2000);
+}
+
+const getHeroData = async () => {
+  loadingDialogVisible.value = false;
+  try {
+    let res = await marketplaceList.getMarketplaceState(marketplaceList.getParamsData)
+    nftList.value = res.rows
+    console.log(res,'-----')
+    // loadingDialogVisible.value = false;
+  } catch(e) {
+    // console.log(e)
+  //   loadingDialogVisible.value = false;
+  }
+}
+
+// 监听筛选变化
+watch(() => [marketplaceList.overview,marketplaceList.sort,marketplaceList.minPrice,marketplaceList.maxPrice,marketplaceList.hero,marketplaceList.rank,marketplaceList.gold],
+([preTest1, preTest2, preTest3, preTest4, preTest5, preTest6, preTest7],
+[oldTest1, oldTest2, oldTest3, oldTest4, oldTest5, oldTest6, oldTest7]) => {
+  if(toRaw(preTest1) || toRaw(preTest2) || toRaw(preTest3) || toRaw(preTest4) || (toRaw(preTest5) !=[] && preTest5.length > 0 ) || (toRaw(preTest6) !=[] && toRaw(preTest6).length > 0 ) || (toRaw(preTest7) !=[] && toRaw(preTest7).length > 0 )) {
+    isClearAll.value = true
+  } else {
+    isClearAll.value = false
+  }
+})
+
+onMounted(() => {
+  getHeroData()
+})
+</script>
+
+<style lang="scss" scoped>
+.mkt-content {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  top: -600px;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  .mkt-content-left {
+    width: 300px;
+    padding: 0 35px;
+    h2 {
+      font-family: "Poppins";
+      font-weight: bold;
+      font-size: 20px;
+      color: #bb7fff;
+      margin-bottom: 20px;
+    }
+  }
+  .mkt-content-right {
+    width: calc(100% - 300px);
+    // box-sizing: border-box;
+    padding-right: 40px;
+    .mkt-content-right-header {
+      width: calc(100% - 10px);
+      height: 60px;
+      display: flex;
+      align-items: center;
+      border-bottom: 2px solid #3a3b57;
+      .bg-cor {
+        width: 15px;
+        height: 15px;
+        background: #18ff00;
+        margin-left: 10px;
+        border-radius: 50%;
+      }
+      .results-total {
+        display: flex;
+        align-items: center;
+        margin-left: 15px;
+        font-size: 14px;
+        color: #b3b5da;
+      }
+      .search-list {
+        display: flex;
+        align-items: center;
+        color: #fff;
+        li {
+          margin-left: 10px;
+          background: #2d2738;
+          padding: 5px 10px;
+          border-radius: 10px;
+          font-size: 12px;
+          cursor: pointer;
+        }
+        .clear-all {
+          background: #5a4a6d;
+        }
+      }
+    }
+    .mkt-content-right-content {
+      margin-top: 30px;
+      .pages {
+        display: flex;
+        // justify-content: space-between;
+        flex-wrap: wrap;
+        clear: both;
+        li {
+          width: calc(25% - 10px);
+          // height: 360px;
+          margin-right: 10px;
+          margin-bottom: 10px;
+          cursor: pointer;
+          &:nth-child(4n) {
+            margin-right: 0;
+          }
+        }
+      }
+      .pages-no {
+        position: relative;
+        margin-top: 150px;
+        div {
+          margin: 0 auto;
+          width: 401px;
+          height: 322px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        p {
+          position: absolute;
+          top: 260px;
+          left: 52%;
+          transform: translateX(-50%);
+          font-family: 'Poppins';
+          font-weight: bold;
+          font-size: 40px;
+          color: #8587B2;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index bd6213e..93974a3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,23 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+/* body {
+  padding: 0 !important;
+  margin: 0 !important;
+  &::-webkit-scrollbar {
+    width: 0px;
+  }
+  &::-webkit-scrollbar-track {
+    background: #171220;
+    border-radius: 2px;
+  }
+  &::-webkit-scrollbar-corner {
+    display: block;
+  }
+  &::-webkit-scrollbar-thumb {
+    height: 15px;
+    background: #9950fd;
+    border-radius: 10px;
+  }
+} */
\ No newline at end of file