diff --git a/.env.development b/.env.development
index 4aced98f..220e7063 100644
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1,3 @@
 NODE_ENV=development
-VUE_APP_API_URI=https://sharm.better-call.dev/v1
\ No newline at end of file
+VUE_APP_API_URI=https://sharm.better-call.dev/v1
+IPFS_NODE=https://ipfs.io
\ No newline at end of file
diff --git a/src/api/token_metadata.js b/src/api/token_metadata.js
new file mode 100644
index 00000000..75daa956
--- /dev/null
+++ b/src/api/token_metadata.js
@@ -0,0 +1,94 @@
+const axios = require('axios').default;
+
+export class RequestFailedError extends Error { }
+
+function createAxios(baseURL, timeout = 10000) {
+  return axios.create({
+    baseURL: baseURL,
+    timeout: timeout,
+    responseType: 'json'
+  })
+}
+
+function get(api, query) {
+  return api.post('/v1/graphql', query)
+      .then(res => {
+          if (res.status !== 200 || res.data.errors) {
+              throw new RequestFailedError(JSON.stringify(res));
+          }
+          return res.data.data;
+      })
+}
+
+function buildQuery(query, address, network, limit, offset) {
+  return {
+    query: query,
+    variables: {
+      address: address,
+      network: network,
+      limit: limit,
+      offset: offset
+    },
+    operationName: "GetTokenMetadata"
+  }
+}
+
+export class TokenMetadataApi {
+    constructor(baseURL) {
+      this.api = createAxios(baseURL);
+    }
+
+    get(network, address, limit=10, offset=0) {
+        let query = buildQuery(`query GetTokenMetadata($address: String, $network: String, $limit: Int, $offset: Int) {
+          token_metadata(
+              where: {
+                contract: {_eq: $address}, 
+                network: {_eq: $network}}
+              limit: $limit
+              offset: $offset
+              order_by: {update_id: desc}
+            ) {
+              network
+              contract
+              error
+              link
+              metadata
+              token_id
+            }
+          }`, address, network, limit, offset)
+
+        return get(this.api, query)
+            .then(res => {
+                return res.token_metadata;
+            })
+    }
+}
+
+export class DipDupTokenMetadataApi {
+    constructor(baseURL) {
+      this.api = createAxios(baseURL);
+    }
+
+    get(network, address, limit=10, offset=0) {
+        let query = buildQuery(`query GetTokenMetadata($address: String, $network: String, $limit: Int, $offset: Int) {
+          dipdup_token_metadata(
+              where: {
+                contract: {_eq: $address}, 
+                network: {_eq: $network}}
+              limit: $limit
+              offset: $offset
+              order_by: {update_id: desc}
+            ) {
+              network
+              contract
+              metadata
+              token_id
+            }
+        }`, address, network, limit, offset)
+
+        return get(this.api, query)
+            .then(res => {
+                return res.dipdup_token_metadata;
+        })
+    }
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 16d12d11..45b0ae74 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,7 @@ import { BrowserTracing } from "@sentry/tracing";
 
 import { shortcut, formatDatetime, formatDate, plural, urlExtractBase58, checkAddress, round } from "@/utils/tz.js";
 import { BetterCallApi } from "@/api/bcd.js";
+import { TokenMetadataApi } from "@/api/token_metadata.js";
 import { NodeRPC } from "@/api/rpc.js";
 import { Bookmarks } from "@/utils/bookmarks.js";
 import { MetadataAPI } from "@/api/metadata.js";
@@ -109,11 +110,14 @@ Vue.filter('snakeToCamel', (str) => {
 let config = {
   API_URI: process.env.VUE_APP_API_URI || `${window.location.protocol}//${window.location.host}/v1`,
   HOME_PAGE: 'home',
+  TOKEN_METADATA_API:  process.env.TOKEN_METADATA_API || "https://metadata.dipdup.net",
+  IPFS_NODE: process.env.IPFS_NODE || "https://ipfs.io",
   METADATA_API_URI: process.env.METADATA_API_URI || "https://metadata.dipdup.net"
 }
 
 let api = new BetterCallApi(config.API_URI);
 let bookmarks = new Bookmarks();
+let tokenMetadata = new TokenMetadataApi(config.TOKEN_METADATA_API);
 let metadataAPI = new MetadataAPI(config.METADATA_API_URI);
 
 const isDark = localStorage.getItem('dark') ? JSON.parse(localStorage.getItem('dark')) : true;
@@ -138,7 +142,7 @@ api.getConfig().then(response => {
 
   Vue.mixin({
     data() {
-      return { config, api, rpc, helpers, bookmarks, metadataAPI }
+      return { config, api, rpc, helpers, bookmarks, metadataAPI, tokenMetadata }
     }
   });
 
diff --git a/src/views/contract/Contract.vue b/src/views/contract/Contract.vue
index 645c1b15..eab98abf 100644
--- a/src/views/contract/Contract.vue
+++ b/src/views/contract/Contract.vue
@@ -75,7 +75,6 @@
         :address="address"
         :network="network"
         :contract="contract"
-        :tokensTotal="tokensTotal"
         :tokenBalancesTotal="tokenBalancesTotal"
         :metadata="metadata"
         :same-contracts="sameContracts"
diff --git a/src/views/contract/MenuToolbar.vue b/src/views/contract/MenuToolbar.vue
index 2b44ac1f..ef271bd4 100644
--- a/src/views/contract/MenuToolbar.vue
+++ b/src/views/contract/MenuToolbar.vue
@@ -20,12 +20,10 @@
       </v-tab>
       <v-tab
         :to="pushTo({ name: 'tokens' })"
-        :title="tokensTotal"
         replace
-        v-if="isContract && tokensTotal > 0"
+        v-if="isContract"
       >
         <v-icon left small>mdi-circle-multiple-outline</v-icon>Tokens
-        <span class="ml-1">({{ tokensTotal | numberToCompactSIFormat(1) }})</span>
       </v-tab>
       <v-tab
         :to="pushTo({ name: 'transfers' })"
diff --git a/src/views/contract/TokensTab/TokenHolders.vue b/src/views/contract/TokensTab/TokenHolders.vue
deleted file mode 100644
index cd15b607..00000000
--- a/src/views/contract/TokensTab/TokenHolders.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <v-card v-if="tokenHolders && tokenHolders.length > 0" class="mr-6 mt-4" flat outlined>
-    <v-card-text class="pa-0 pt-6 pb-4 data">
-      <h2 class="ml-6 font-weight-regular">Top holders</h2>
-      <v-row class="canvas mx-6 mt-6" no-gutters>
-        <v-col cols="6" md="8" sm="12">
-          <v-list class="canvas">
-            <v-list-item v-for="(item, i) in tokenHolders" v-bind:key="item.address">
-              <v-list-item-content class="pa-0 pl-4">
-                <v-list-item-title
-                    class="font-weight-light hash"
-                >
-                  <AccountBox
-                      :address="item.address"
-                      :network="token.network"
-                      :title="`Holder ${i + 1}`"
-                  />
-                </v-list-item-title>
-              </v-list-item-content>
-              <v-list-item-action class="pa-0">
-                <v-list-item-action-text>
-                  <span class="hash text--primary" style="font-size: 1.2em;">
-                    {{ formatBalance(item.balance) }}
-                  </span>
-                  <span v-if="token.symbol">&nbsp;{{ token.symbol }}</span>
-                </v-list-item-action-text>
-              </v-list-item-action>
-            </v-list-item>
-          </v-list>
-        </v-col>
-        <v-col cols="6">
-        </v-col>
-      </v-row>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import AccountBox from "@/components/Dialogs/AccountBox";
-
-export default {
-  name: "TokenHolders",
-  components: { AccountBox },
-  props: {
-    token: Object
-  },
-  watch: {
-    token: {
-      immediate: true,
-      async handler(newVal) {
-        if (newVal) {
-          if (this.cache[newVal.token_id] === undefined) {
-            this.cache[newVal.token_id] = await this.getHolders(newVal);
-          }
-          this.tokenHolders = this.cache[newVal.token_id];
-        }
-      }
-    }
-  },
-  methods: {
-    async getHolders(token) {
-      const res = await this.api.getTokenHoldersList(token.network, token.contract, token.token_id);
-      if (res) {
-        return Object.entries(res)
-          .sort((a, b) => Math.sign(b[1] - a[1]))
-          .map(([address, balance]) => { return { address, balance }})
-          .slice(0, 5);
-      } else {
-        return []
-      }
-    },
-    formatBalance(balance) {
-      return this.helpers
-          .round(
-              balance,
-              this.token.decimals ? this.token.decimals : 0
-          )
-          .toLocaleString(undefined, {
-            maximumFractionDigits: this.token.decimals
-                ? this.token.decimals
-                : 0,
-          })
-    },
-  },
-  data() {
-    return {
-      cache: {},
-      tokenHolders: []
-    }
-  }
-}
-</script>
diff --git a/src/views/contract/TokensTab/TokenMetadata.vue b/src/views/contract/TokensTab/TokenMetadata.vue
deleted file mode 100644
index e4dc81bf..00000000
--- a/src/views/contract/TokensTab/TokenMetadata.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<template>
-  <div v-if="token" class="py-2 px-7 mr-6 metadata-base">
-    <v-row no-gutters>
-      <v-col cols="3">
-        <v-list-item class="pl-1">
-          <v-list-item-content>
-            <v-list-item-subtitle class="overline">Token ID</v-list-item-subtitle>
-            <div class="d-flex">
-              <v-list-item-title class="key-hash">{{ token.token_id }}</v-list-item-title>
-              <v-tooltip bottom>
-                <template v-slot:activator="{ on }">
-                  <v-btn
-                    small
-                    v-on="on"
-                    icon
-                    @click="
-                      () => {
-                        $clipboard(token.token_id);
-                        showClipboardOK();
-                      }
-                    "
-                  >
-                    <v-icon small class="text--secondary">mdi-content-copy</v-icon>
-                  </v-btn>
-                </template>
-                Copy Token ID
-              </v-tooltip>
-            </div>
-          </v-list-item-content>
-        </v-list-item>
-      </v-col>
-      <v-col cols="6">
-        <v-list-item v-if="ipfsURI" class="pl-1">
-          <v-list-item-content>
-            <v-list-item-subtitle class="overline">Metadata URI</v-list-item-subtitle>
-            <div class="d-flex">
-              <v-list-item-title class="hash">{{ ipfsURI }}</v-list-item-title>
-              <v-tooltip bottom>
-                <template v-slot:activator="{ on }">
-                  <v-btn
-                    small
-                    v-on="on"
-                    icon
-                    class="mr-2"
-                    @click="
-                      () => {
-                        $clipboard(ipfsURI);
-                        showClipboardOK();
-                      }
-                    "
-                  >
-                    <v-icon small class="text--secondary">mdi-content-copy</v-icon>
-                  </v-btn>
-                </template>
-                Copy address
-              </v-tooltip>
-            </div>
-          </v-list-item-content>
-        </v-list-item>
-      </v-col>
-      <v-col cols="3" class="d-flex align-center justify-end">
-        <v-btn small text @click="showRaw = true">
-          <v-icon small class="mr-1">mdi-code-braces</v-icon>
-          <span>Raw JSON</span>
-        </v-btn>
-      </v-col>
-      <v-col cols="12" class="px-2 py-4 my-2 ba-1">
-        <span class="overline ml-3">Token info</span>
-        <v-treeview
-          :items="treeView"
-          hoverable
-          transition
-          open-on-click
-          return-object
-          class="no-padding-arrow beautify-fonts mt-2"
-        >
-          <template v-slot:label="{ item }">
-            <div @click="showTreeInfo(item)">
-              <span class="key">
-                {{item.name.split(':')[0].trim() | snakeToCamel }}:
-              </span>
-              <span
-                v-if="isTreeViewable(item)"
-              >
-                <v-treeview
-                  :items="item.children ? makeView(item.children) : makeView(JSON.parse(getValueFromName(item.name)))"
-                  :open-on-click="false"
-                  open-all
-                  expand-icon=""
-                >
-                  <template v-slot:label="{ item }">
-                    <div @click.exact.stop.prevent="showTreeInfo(item)">
-                      <span class="key">
-                        {{item.name.split(':')[0].trim() | snakeToCamel }}:
-                      </span>
-                      <span
-                          class="value"
-                      >
-                        {{getValue(item.name)}}
-                       </span>
-                    </div>
-                  </template>
-                </v-treeview>
-              </span>
-              <span
-                  v-else
-                  class="value"
-              >
-                {{ getValue(item.name, item.children) }}
-              </span>
-            </div>
-          </template>
-        </v-treeview>
-      </v-col>
-    </v-row>
-    <TreeNodeDetails
-      v-model="showTreeNodeDetails"
-      :data="dataTreeNode"
-      :network="token.network"
-    />
-    <RawJsonViewer
-        :show.sync="showRaw"
-        type="token metadata"
-        :raw="tokenInfo"
-        :is-copiable-options="true"
-    />
-  </div>
-</template>
-
-<script>
-import { makeTreeview } from '@/utils/parsing';
-import TreeNodeDetails from "@/components/Dialogs/TreeNodeDetails";
-import RawJsonViewer from "@/components/Dialogs/RawJsonViewer";
-import {mapActions} from "vuex";
-
-export default {
-  name: "TokenMetadata",
-  components: { TreeNodeDetails, RawJsonViewer },
-  props: {
-    token: Object,
-  },
-  data() {
-    return {
-      showTreeNodeDetails: false,
-      dataTreeNode: {},
-      showRaw: false,
-      ignoredKeys: [
-        'level',
-        'timestamp',
-        'contract',
-        'network',
-        'token_id',
-        'extras',
-      ]
-    }
-  },
-  methods: {
-    ...mapActions(["showClipboardOK"]),
-    isTreeViewable(item) {
-      return this.isObjectValue(this.getValueFromName(item.name));
-    },
-    showTreeInfo(item) {
-      if (item.children) {
-        return;
-      }
-      const splittedItem = item.name.split(':');
-      const name = splittedItem[0].trim();
-      const value = splittedItem.slice(1,).join(':').trim();
-      this.dataTreeNode.val = value;
-      this.dataTreeNode.name = name;
-      this.dataTreeNode.realPrim = name;
-      this.showTreeNodeDetails = true;
-    },
-    getValueFromName(name) {
-      return name.split(':').slice(1,).join(':').trim();
-    },
-    isObjectValue(value) {
-      try {
-        if (typeof JSON.parse(value) === "object") {
-          return true;
-        }
-      } catch (e) {
-        return false;
-      }
-
-      return false;
-    },
-    getValue(name, children) {
-      const value = this.getValueFromName(name);
-      if (children && children.length > 0 || this.isObjectValue(value)) {
-        return '';
-      }
-      return value;
-    },
-    makeView(obj) {
-      return makeTreeview(obj);
-    },
-  },
-  computed: {
-    tokenInfo() {
-      if (this.token) {
-        return Object.fromEntries(
-          Object.entries(this.token)
-            .filter(([key]) => -1 == this.ignoredKeys.indexOf(key)));
-      } else {
-        return null;
-      }
-    },
-    treeView() {
-      return makeTreeview(this.tokenInfo)
-    },
-    ipfsURI() {
-      return this.token.extras? this.token.extras["@@empty"] : null;
-    },
-  }
-}
-</script>
-
-<style>
-.v-treeview-node__root {
-  min-height: 20px !important;
-}
-</style>
-
-<style lang="scss" scoped>
-.v-treeview {
-  font-size: 14px;
-  font-weight: 400;
-  font-family: "Roboto Mono", monospace;
-
-  .key {
-    opacity: 0.8;
-  }
-  .value {
-    color: var(--v-tree-base);
-  }
-  .object {
-    opacity: 0.8;
-    font-weight: 300;
-  }
-}
-.key-hash {
-  max-width: 50%;
-}
-.hash {
-  max-width: 33%;
-}
-.metadata-base {
-  background-color: var(--v-data-base);
-  border: 1px solid var(--v-border-base);
-}
-</style>
diff --git a/src/views/contract/TokensTab/TokensList.vue b/src/views/contract/TokensTab/TokensList.vue
deleted file mode 100644
index 0ef252a7..00000000
--- a/src/views/contract/TokensTab/TokensList.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <div class="ma-0 pa-0">
-    <v-card flat outlined>
-      <v-list class="ma-0 pa-0 data">
-        <v-skeleton-loader
-          v-if="isLoading"
-          :loading="isSpecificLoaded"
-          type="image"
-        >
-        </v-skeleton-loader>
-        <v-list-item-group
-          v-else
-          active-class="token-card-selected"
-          mandatory
-        >
-          <template v-for="(item, i) in tokens">
-            <v-divider :key="item.token_id" v-if="i !== 0" />
-            <v-list-item @click="selectedToken = item" :key="`${item.contract}:${item.token_id}`" class="token-card">
-              <v-list-item-content>
-                <v-list-item-title>
-                  <span v-if="item.name">{{ item.name }}</span>
-                  <span v-else class="text--disabled">NO NAME</span>
-                </v-list-item-title>
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-list-item-action-text>
-                  <span class="caption text--disabled">token ID:</span>
-                  <span>&nbsp;{{ item.token_id }}</span>
-                </v-list-item-action-text>
-              </v-list-item-action>
-            </v-list-item>
-          </template>
-        </v-list-item-group>
-      </v-list>
-    </v-card>
-    <div class="text-center mt-2">
-      <v-pagination
-        v-model="tokensPage"
-        :length="tokensPageCount"
-        :total-visible="5"
-        v-if="tokensTotal > itemsPerPage"
-      ></v-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-import {getQuery, isQuery, setQuery} from "../../../utils/url";
-import {mapActions} from "vuex";
-
-const TOKEN_ID_QUERY = 'token_id';
-const SESSION_STORAGE_TOKEN_KEY = `START_UP_TOKEN_ID`;
-
-export default {
-  name: "TokensList",
-  props: {
-    network: String,
-    address: String,
-    tokensTotal: Number
-  },
-  computed: {
-    isLoading() {
-      return !this.isTokensLoaded;
-    }
-  },
-  beforeCreate() {
-    if (sessionStorage.getItem(SESSION_STORAGE_TOKEN_KEY)) {
-      sessionStorage.removeItem(SESSION_STORAGE_TOKEN_KEY);
-    }
-    const startUpTokenID = getQuery(TOKEN_ID_QUERY);
-    if (startUpTokenID) {
-      sessionStorage.setItem(SESSION_STORAGE_TOKEN_KEY, startUpTokenID);
-    }
-  },
-  methods: {
-    ...mapActions(["showError"]),
-    async getTokens(offset, size) {
-      this.isTokensLoaded = false;
-      const startUpTokenID = sessionStorage.getItem(SESSION_STORAGE_TOKEN_KEY);
-      this.api
-        .getContractTokens(this.network, this.address, offset, size)
-        .then(async (res) => {
-          if (!res) return;
-          if (this.tokensPage === 1) {
-            if (startUpTokenID) {
-              this.isSpecificLoaded = false;
-              const specificToken = await this.getSpecificToken(startUpTokenID);
-              this.isSpecificLoaded = true;
-              this.tokens = specificToken.concat(res.filter(token => token.token_id !== Number(startUpTokenID)));
-            } else {
-              this.tokens = res;
-            }
-          } else {
-            this.tokens = res.filter(token => token.token_id !== Number(startUpTokenID));
-          }
-          this.selectedToken = this.tokens[0];
-        })
-        .catch((err) => {
-          this.showError(err);
-        })
-        .finally(() => {
-          this.isTokensLoaded = true;
-        })
-    },
-    getSpecificToken(token_id) {
-      return this.api
-        .getContractToken(this.network, this.address, token_id);
-    },
-    getNextTokensAmount() {
-      const minusator = isQuery(TOKEN_ID_QUERY) && this.tokensPage === 1 ? 1 : 0;
-      return this.itemsPerPage - minusator;
-    },
-  },
-  watch: {
-    tokensPage: {
-      handler(newVal) {
-        this.tokens = [];
-        this.getTokens((newVal - 1) * this.itemsPerPage, this.getNextTokensAmount());
-      },
-      immediate: true
-    },
-    tokensTotal: {
-      handler(newVal) { 
-        this.tokensPageCount = Math.ceil(newVal / this.itemsPerPage);
-      },
-      immediate: true
-    },
-    selectedToken: {
-      handler(newVal) {
-        this.$emit('selectedToken', newVal);
-        if (newVal) {
-          setQuery(TOKEN_ID_QUERY, newVal.token_id);
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  data() {
-    return {
-      tokens: [],
-      selectedToken: null, 
-      tokensPage: 1,
-      itemsPerPage: 10,
-      tokensPageCount: 0,
-      isSpecificLoaded: false,
-      isTokensLoaded: false,
-    }
-  }
-}
-</script>
-
-<style>
-.token-card {
-  border-bottom: 1px solid var(--v-border-base);
-}
-
-.token-card:last-child {
-  border-bottom: none !important;
-}
-
-.token-card-selected {
-  border-left: 2px solid var(--v-primary-base);
-  background-color: var(--v-sidebar-base);
-}
-</style>
\ No newline at end of file
diff --git a/src/views/contract/TokensTab/TokensTab.vue b/src/views/contract/TokensTab/TokensTab.vue
index 58b5c72f..26ca71c0 100644
--- a/src/views/contract/TokensTab/TokensTab.vue
+++ b/src/views/contract/TokensTab/TokensTab.vue
@@ -1,57 +1,210 @@
 <template>
   <v-container class="canvas fill-canvas pa-8 ma-0" fluid>
-    <v-row no-gutters>
-      <v-col cols="8" class="pa-2">
-        <div
-          v-if="selectedToken"
-        >
-          <TokenMetadata :token="selectedToken"/>
-          <TokenHolders class="mt-3" :token="selectedToken" />
-        </div>
-        <v-skeleton-loader
-          v-else
-          :loading="typeof selectedToken !== 'number'"
-          type="image"
-        >
-        </v-skeleton-loader>
-      </v-col>
-      <v-col cols="4" class="pa-2">
-        <TokensList
-          :network="network"
-          :address="address"
-          :tokensTotal="tokensTotal"
-          @selectedToken="updateSelectedToken"
-        />
-      </v-col>
-    </v-row>
+    <EmptyState
+      v-if="tokens.length === 0 && !loading"
+      icon="mdi-code-brackets"
+      title="Nothing found"
+    />
+    <v-expansion-panels v-show="tokens.length > 0" multiple hover flat class="bb-1">
+      <v-expansion-panel v-for="(token) in tokens"
+                  :key="token.token_id"
+                  class="bl-1 br-1 bt-1 token-panel" 
+                  active-class="token-active-panel">
+        <v-expansion-panel-header class="py-0 px-4" :class="token.metadata === null && token.error !== null ? 'item-header-failed' : 'item-header-applied' " ripple :title="title(token)">
+          <template>
+             <v-list-item class="fill-height pa-0">
+                <v-list-item-content>
+                  <v-list-item-title>{{ title(token) }}</v-list-item-title>
+                  <v-list-item-subtitle class="font-weight-light hash text--secondary">
+                    Token ID: {{ token.token_id }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+             </v-list-item>
+          </template>
+        </v-expansion-panel-header>
+        <v-expansion-panel-content class="token-content py-4">
+          <v-list-item class="pl-0" v-if="token.link">
+            <v-list-item-content>
+              <v-list-item-subtitle class="overline">Token metadata link</v-list-item-subtitle>
+              <v-list-item-title class="d-flex align-center">
+                <span>{{ token.link }}</span>
+                <v-tooltip bottom>
+                  <template v-slot:activator="{ on }">
+                    <v-btn
+                      small
+                      v-on="on"
+                      icon
+                      class="mr-2"
+                      @click="
+                        () => {
+                          $clipboard(token.link);
+                          showClipboardOK();
+                        }
+                      "
+                    >
+                      <v-icon small class="text--secondary">mdi-content-copy</v-icon>
+                    </v-btn>
+                  </template>
+                  Copy token link
+                </v-tooltip>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+          <v-alert v-if="token.error && token.metadata === null" type="error" prominent text class="ma-0 align-center">
+            <div class="overline">Resolving token metadata error</div>
+            <div class="text--primary"> {{ token.error }}</div>
+          </v-alert>
+          <v-row v-if="token.metadata">
+            <v-col :cols="token.metadata.thumbnailUri ? 10 : 12">
+              <vue-json-pretty
+                
+                class="raw-json-viewer py-3"
+                :data="token.metadata"
+                :highlightMouseoverNode="true"
+                :customValueFormatter="formatValue"
+            ></vue-json-pretty>
+            </v-col>
+            <v-col cols="2" v-if="token.metadata.thumbnailUri" class="d-flex flex-column align-center justify-start">
+              <span class="overline mt-10" v-if="!token.loaded">Loading thumbnail...</span>
+              <div class="d-flex flex-column align-center justify-start">
+                <v-img @load="loadedImage(token)" :src="getIPFS(token.metadata.thumbnailUri)" sizes="200" alt="Thumbnail" contain eager max-height="200">
+                </v-img>
+                <div class="mt-4" v-if="token.loaded">
+                  <p class="overline">Image from thumbnail URL</p>
+                </div>
+              </div>
+            </v-col>
+          </v-row>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <v-skeleton-loader
+        v-show="loading"
+        :loading="loading"
+        type="list-item-two-line, list-item-two-line, list-item-two-line"
+      >
+      </v-skeleton-loader>
+      <span
+        v-intersect="onDownloadPage"
+        v-if="!loading && !downloaded"
+      ></span>
   </v-container>
 </template>
 
 <script>
-import TokenMetadata from "@/views/contract/TokensTab/TokenMetadata";
-import TokenHolders from "@/views/contract/TokensTab/TokenHolders";
-import TokensList from "@/views/contract/TokensTab/TokensList";
+import { mapActions } from "vuex";
+import EmptyState from "@/components/Cards/EmptyState.vue";
+import VueJsonPretty from "vue-json-pretty";
+import { DipDupTokenMetadataApi } from "@/api/token_metadata.js";
 
 export default {
   name: "ContractTokensTab",
   props: {
     network: String,
-    address: String,
-    tokensTotal: Number
+    address: String
   },
   components: {
-    TokensList,
-    TokenMetadata,
-    TokenHolders
+    EmptyState,
+    VueJsonPretty
   },
   data: () => ({
-    holders: {},
-    selectedToken: null
+    tokens: [],
+    loading: false,
+    downloaded: false,
+    ubisoft: {},
+    domains: {},
   }),
+  created() {
+    this.ubisoft = new DipDupTokenMetadataApi('https://quartz.dipdup.net');
+    this.domains = new DipDupTokenMetadataApi('https://domains.dipdup.net/');
+  },
   methods: {
-    async updateSelectedToken(newVal) {
-      this.selectedToken = newVal;
+    ...mapActions(["showError", "hideError"]),
+    title(token) {
+      if (token.metadata !== null) {
+        return token.metadata.name;
+      }
+      return `${token.token_id}`;
+    },
+    getIPFS(url) {
+      if (!url) {
+        return '';
+      }
+
+      return `${this.config.IPFS_NODE}/ipfs/${url.replace('ipfs://', '')}`
+    },
+    loadedImage(token) {
+      token.loaded = true;
+    },
+    async onDownloadPage(_entries, _observer, isIntersecting) {
+      if (isIntersecting) {
+        await this.getTokens();
+      }
+    },
+    async getTokens() {
+      if (this.loading || this.downloaded) return;
+      this.loading = true;
+
+      let api = this.tokenMetadata;
+      if (this.address === 'KT1TnVQhjxeNvLutGvzwZvYtC7vKRpwPWhc6') {
+        api = this.ubisoft;
+      } else if (this.address === 'KT1GBZmSxmnKJXGMdMLbugPfLyUPmuLSMwKS') {
+        api = this.domains;
+      }
+      
+      await api.get( this.network, this.address, 20, this.tokens.length)
+        .then(res => {
+          if (!res) {
+              this.downloaded = true; // prevent endless polling
+            } else {
+              this.downloaded = res.length === 0;
+              res.forEach(x => x.loaded = false);
+              this.tokens.push(...res);
+            }
+        })
+        .catch((err) => {
+          this.showError(err);
+          this.downloaded = true;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    formatValue(_data, _key, _path, defaultFormatResult) {
+      return defaultFormatResult
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
     },
-  }
+  },
+  watch: {
+    address: "getTokens",
+  },
 };
 </script>
+
+<style scoped>
+.token-content > .v-expansion-panel-content__wrap {
+  padding: 0;
+}
+
+.token-panel {
+  background-color: var(--v-data-base) !important;
+}
+
+.token-active-panel > .v-expansion-panel-header {
+  opacity: 0.8;
+  background-color: var(--v-border-base) !important;
+}
+
+.token-active-panel,
+.token-panel.v-expansion-panel--next-active {
+  border-bottom: 1px solid var(--v-border-base);
+}
+</style>
+
+<style lang="scss">
+@import '../../../styles/vue-json-pretty.css';
+</style>
\ No newline at end of file