diff --git a/.github/workflows/dev.yaml b/.github/workflows/dev.yaml
index 20415b94..c7403b32 100644
--- a/.github/workflows/dev.yaml
+++ b/.github/workflows/dev.yaml
@@ -32,7 +32,7 @@ jobs:
     uses: Cerebellum-Network/reusable-workflows/.github/workflows/build-and-upload-static.yaml@1.0.0
     with:
       runs-on: '["self-hosted", "cere-network-large"]'
-      build_container: 'node:14-buster-slim'
+      build_container: 'node:16'
       deploy_container: 'ubuntu:20.04'
       install_packages_command: 'cp -rf frontend/frontend.config-cere-dev.js frontend/frontend.config.js; yarn install'
       build_command: 'yarn workspace frontend generate'
diff --git a/backend/backend.config.js b/backend/backend.config.js
index 8c02c235..353c9296 100644
--- a/backend/backend.config.js
+++ b/backend/backend.config.js
@@ -65,7 +65,6 @@ module.exports = {
       name: 'ddc',
       enabled: !process.env.DDC_DISABLE,
       crawler: './crawlers/ddc.js',
-      // TODO update default to Mainnet once DDC Mainnet deployed. Ticket: https://cerenetwork.atlassian.net/browse/CBI-2050
       contractRpc: process.env.DDC_CONTRACT_RPC || 'wss://rpc.testnet.cere.network/ws',
       contractName: process.env.DDC_CONTRACT_NAME || 'ddc_bucket',
       contractAddress: process.env.DDC_CONTRACT_ADDRESS || '5DTZfAcmZctJodfa4W88BW5QXVBxT4v7UEax91HZCArTih6U',
@@ -73,5 +72,14 @@ module.exports = {
           parseInt(process.env.DDC_POLLING_TIME_MS, 10)
           || 2 * 60 * 1000, // 2 minutes
     },
+    {
+      name: 'ddc2',
+      enabled: !process.env.DDC2_DISABLE,
+      crawler: './crawlers/ddc2.js',
+      startDelay: 0,
+      pollingTime:
+          parseInt(process.env.DDC2_POLLING_TIME_MS, 10)
+          || 2 * 60 * 1000, // 2 minutes
+    },
   ],
 };
diff --git a/backend/crawlers/ddc2.js b/backend/crawlers/ddc2.js
new file mode 100644
index 00000000..22d21b72
--- /dev/null
+++ b/backend/crawlers/ddc2.js
@@ -0,0 +1,224 @@
+// @ts-check
+const pino = require('pino');
+const {
+  wait,
+  getClient,
+  getPolkadotAPI,
+  isNodeSynced,
+  dbParamQuery,
+} = require('../lib/utils');
+const backendConfig = require('../backend.config');
+
+const crawlerName = 'ddc2';
+const logger = pino({
+  level: backendConfig.logLevel,
+});
+const loggerOptions = {
+  crawler: crawlerName,
+};
+const config = backendConfig.crawlers.find(
+  ({ name }) => name === crawlerName,
+);
+
+const actualizeDdcClusters = async (api, dbClient) => {
+  const response = await api.query.ddcClusters.clusters.entries();
+
+  const clusters = response.map((entity) => entity[1].toHuman());
+
+  const persistClusterQuery = `
+    INSERT INTO cluster (
+      id,
+      manager_id,
+      reserve_id,
+      node_provider_auth_contract,
+      erasure_coding_required,
+      erasure_coding_total,
+      replication_total
+    ) VALUES (
+      $1,
+      $2,
+      $3,
+      $4,
+      $5,
+      $6,
+      $7
+    )
+    ON CONFLICT (id)
+    DO UPDATE SET
+      id = EXCLUDED.id,
+      manager_id = EXCLUDED.manager_id,
+      reserve_id = EXCLUDED.reserve_id,
+      node_provider_auth_contract = EXCLUDED.node_provider_auth_contract,
+      erasure_coding_required = EXCLUDED.erasure_coding_required,
+      erasure_coding_total = EXCLUDED.erasure_coding_total,
+      replication_total = EXCLUDED.replication_total
+  ;`;
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const cluster of clusters) {
+    const clusterData = [
+      cluster.clusterId,
+      cluster.managerId,
+      cluster.reserveId,
+      cluster.props.nodeProviderAuthContract,
+      cluster.props.erasureCodingRequired,
+      cluster.props.erasureCodingTotal,
+      cluster.props.replicationTotal,
+    ];
+
+    // eslint-disable-next-line no-await-in-loop
+    await dbParamQuery(dbClient, persistClusterQuery, clusterData, loggerOptions);
+  }
+};
+
+const actualizeDdcNodes = async (api, dbClient) => {
+  const response = await api.query.ddcNodes.storageNodes.entries();
+
+  const nodes = response.map((entity) => entity[1].toHuman());
+
+  const persistNodeQuery = `
+    INSERT INTO node (
+      id,
+      host,
+      domain,
+      ssl,
+      http_port,
+      grpc_port,
+      p2p_port,
+      mode
+    ) VALUES (
+      $1,
+      $2,
+      $3,
+      $4,
+      $5,
+      $6,
+      $7,
+      $8
+    )
+    ON CONFLICT (id)
+    DO UPDATE SET
+      id = EXCLUDED.id,
+      host = EXCLUDED.host,
+      domain = EXCLUDED.domain,
+      ssl = EXCLUDED.ssl,
+      http_port = EXCLUDED.http_port,
+      grpc_port = EXCLUDED.grpc_port,
+      p2p_port = EXCLUDED.p2p_port,
+      mode = EXCLUDED.mode
+  ;`;
+
+  const persistNodeToClusterQuery = `
+    INSERT INTO node_to_cluster (
+      cluster_id,
+      node_id
+    ) VALUES (
+      $1,
+      $2
+    )
+    ON CONFLICT (cluster_id, node_id)
+    DO UPDATE SET
+      cluster_id = EXCLUDED.cluster_id,
+      node_id = EXCLUDED.node_id
+  ;`;
+
+  const persistProviderQuery = `
+    INSERT INTO node_provider (
+      id
+    ) VALUES (
+      $1
+    )
+    ON CONFLICT (id)
+    DO UPDATE SET
+        id = EXCLUDED.id
+  ;`;
+
+  const persistNodeToProviderQuery = `
+    INSERT INTO node_to_node_provider (
+      node_provider_id,
+      node_id
+    ) VALUES (
+      $1,
+      $2
+    )
+    ON CONFLICT (node_provider_id, node_id)
+    DO UPDATE SET
+      node_provider_id = EXCLUDED.node_provider_id,
+      node_id = EXCLUDED.node_id
+  ;`;
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const node of nodes) {
+    const nodeData = [
+      node.pubKey,
+      node.props.host,
+      node.props.domain,
+      node.props.ssl,
+      Number(node.props.httpPort.replace(/,/g, '')),
+      Number(node.props.grpcPort.replace(/,/g, '')),
+      Number(node.props.p2pPort.replace(/,/g, '')),
+      node.props.mode,
+    ];
+    const providerData = [node.providerId];
+    const nodeToProviderData = [node.providerId, node.pubKey];
+    const nodeClusterData = [node.clusterId, node.pubKey];
+
+    // eslint-disable-next-line no-await-in-loop
+    await dbParamQuery(dbClient, persistProviderQuery, providerData, loggerOptions);
+
+    // eslint-disable-next-line no-await-in-loop
+    await dbParamQuery(dbClient, persistNodeQuery, nodeData, loggerOptions);
+
+    // eslint-disable-next-line no-await-in-loop
+    await dbParamQuery(dbClient, persistNodeToClusterQuery, nodeClusterData, loggerOptions);
+
+    // eslint-disable-next-line no-await-in-loop
+    await dbParamQuery(dbClient, persistNodeToProviderQuery, nodeToProviderData, loggerOptions);
+  }
+};
+
+const crawler = async (delayedStart) => {
+  if (delayedStart) {
+    logger.debug(loggerOptions, `Delaying DDC crawler start for ${config.startDelay / 1000}s`);
+    await wait(config.startDelay);
+  }
+
+  logger.info(loggerOptions, 'Running DDC crawler...');
+
+  const dbClient = await getClient(loggerOptions);
+  const api = await getPolkadotAPI(loggerOptions, config.apiCustomTypes);
+
+  let synced = await isNodeSynced(api, loggerOptions);
+  while (!synced) {
+    // eslint-disable-next-line no-await-in-loop
+    await wait(10000);
+    // eslint-disable-next-line no-await-in-loop
+    synced = await isNodeSynced(api, loggerOptions);
+  }
+
+  const startTime = new Date().getTime();
+
+  await actualizeDdcClusters(api, dbClient);
+  await actualizeDdcNodes(api, dbClient);
+
+  logger.debug(loggerOptions, 'Disconnecting from API');
+  await api.disconnect().catch((error) => logger.error(loggerOptions, `API disconnect error: ${JSON.stringify(error)}`));
+
+  logger.debug(loggerOptions, 'Disconnecting from DB');
+  await dbClient.end().catch((error) => logger.error(loggerOptions, `DB disconnect error: ${JSON.stringify(error)}`));
+
+  const endTime = new Date().getTime();
+  logger.info(loggerOptions, `Processed in ${((endTime - startTime) / 1000).toFixed(0)}s`);
+
+  logger.info(loggerOptions, `Next execution in ${(config.pollingTime / 60000).toFixed(0)}m...`);
+  setTimeout(
+    () => crawler(false),
+    config.pollingTime,
+  );
+};
+
+crawler(true).catch((error) => {
+  // eslint-disable-next-line no-console
+  console.error(error);
+  process.exit(-1);
+});
diff --git a/backend/docker/docker-compose-cere-mainnet.yml b/backend/docker/docker-compose-cere-mainnet.yml
index 60a89ba3..2d128ff0 100644
--- a/backend/docker/docker-compose-cere-mainnet.yml
+++ b/backend/docker/docker-compose-cere-mainnet.yml
@@ -73,7 +73,7 @@ services:
   # Hasura
   #
   graphql-engine:
-    image: hasura/graphql-engine:v1.3.3
+    image: hasura/graphql-engine:v2.16.0-ce
     ports:
       - '8082:8080'
     depends_on:
@@ -83,6 +83,7 @@ services:
       HASURA_GRAPHQL_DATABASE_URL: 'postgres://polkastats:polkastats@postgres:5432/polkastats'
       HASURA_GRAPHQL_ENABLE_CONSOLE: 'true' # set to 'false' to disable console
       HASURA_GRAPHQL_ENABLED_LOG_TYPES: 'startup, http-log, webhook-log, websocket-log, query-log'
+      HASURA_GRAPHQL_V1_BOOLEAN_NULL_COLLAPSE: true
       HASURA_GRAPHQL_CORS_DOMAIN: http://localhost:3000
       HASURA_GRAPHQL_UNAUTHORIZED_ROLE: public
       HASURA_GRAPHQL_ADMIN_SECRET: my_admin_secret_key
diff --git a/db/migrations/20240606112923-token-utility.js b/db/migrations/20240606112923-token-utility.js
new file mode 100644
index 00000000..124dfe67
--- /dev/null
+++ b/db/migrations/20240606112923-token-utility.js
@@ -0,0 +1,53 @@
+'use strict';
+
+var dbm;
+var type;
+var seed;
+var fs = require('fs');
+var path = require('path');
+var Promise;
+
+/**
+  * We receive the dbmigrate dependency from dbmigrate initially.
+  * This enables us to not have to rely on NODE_PATH.
+  */
+exports.setup = function(options, seedLink) {
+  dbm = options.dbmigrate;
+  type = dbm.dataType;
+  seed = seedLink;
+  Promise = options.Promise;
+};
+
+exports.up = function(db) {
+  var filePath = path.join(__dirname, 'sqls', '20240606112923-token-utility-up.sql');
+  return new Promise( function( resolve, reject ) {
+    fs.readFile(filePath, {encoding: 'utf-8'}, function(err,data){
+      if (err) return reject(err);
+      console.log('received data: ' + data);
+
+      resolve(data);
+    });
+  })
+  .then(function(data) {
+    return db.runSql(data);
+  });
+};
+
+exports.down = function(db) {
+  var filePath = path.join(__dirname, 'sqls', '20240606112923-token-utility-down.sql');
+  return new Promise( function( resolve, reject ) {
+    fs.readFile(filePath, {encoding: 'utf-8'}, function(err,data){
+      if (err) return reject(err);
+      console.log('received data: ' + data);
+
+      resolve(data);
+    });
+  })
+  .then(function(data) {
+    return db.runSql(data);
+  });
+};
+
+exports._meta = {
+  "version": 1
+};
diff --git a/db/migrations/sqls/20240606112923-token-utility-down.sql b/db/migrations/sqls/20240606112923-token-utility-down.sql
new file mode 100644
index 00000000..3372eb44
--- /dev/null
+++ b/db/migrations/sqls/20240606112923-token-utility-down.sql
@@ -0,0 +1,13 @@
+DROP TABLE IF EXISTS ddc_metric_value;
+
+DROP TABLE IF EXISTS cluster;
+
+DROP TABLE IF EXISTS node;
+
+DROP TABLE IF EXISTS node_provider;
+
+DROP TABLE IF EXISTS node_provider_reward;
+
+DROP TABLE IF EXISTS node_to_cluster;
+
+DROP TABLE IF EXISTS node_to_node_provider;
\ No newline at end of file
diff --git a/db/migrations/sqls/20240606112923-token-utility-up.sql b/db/migrations/sqls/20240606112923-token-utility-up.sql
new file mode 100644
index 00000000..12ff8685
--- /dev/null
+++ b/db/migrations/sqls/20240606112923-token-utility-up.sql
@@ -0,0 +1,75 @@
+CREATE TABLE cluster (
+    id TEXT PRIMARY KEY,
+    manager_id TEXT NOT NULL,
+    reserve_id TEXT NOT NULL,
+    node_provider_auth_contract TEXT,
+    erasure_coding_required INT,
+    erasure_coding_total INT,
+    replication_total INT
+);
+
+CREATE TABLE node_provider (
+    id TEXT PRIMARY KEY
+);
+
+CREATE TABLE node(
+     id TEXT PRIMARY KEY,
+     total_capacity BIGINT,
+     uptime INTERVAL,
+     throughput BIGINT,
+     node_type TEXT,
+     tier SMALLINT,
+     host TEXT,
+     domain TEXT,
+     ssl BOOLEAN,
+     http_port SMALLINT,
+     grpc_port SMALLINT,
+     p2p_port SMALLINT,
+     mode TEXT
+);
+
+CREATE TABLE node_to_node_provider (
+    id SERIAL PRIMARY KEY,
+    node_provider_id TEXT NOT NULL,
+    node_id TEXT NOT NULL,
+    FOREIGN KEY (node_provider_id) REFERENCES node_provider(id),
+    FOREIGN KEY (node_id) REFERENCES node(id),
+    CONSTRAINT unique_node_provider_node_id UNIQUE (node_provider_id, node_id)
+);
+
+CREATE TABLE node_provider_reward (
+    id SERIAL PRIMARY KEY,
+    node_provider_id TEXT NOT NULL,
+    rewarded NUMERIC(39, 0),
+    expected_to_reward NUMERIC(39, 0),
+    era INTEGER,
+    batch_index SMALLINT,
+    stored_bytes BIGINT,
+    transferred_bytes BIGINT,
+    puts NUMERIC(39, 0),
+    gets NUMERIC(39, 0),
+    explorer_link TEXT,
+    FOREIGN KEY (node_provider_id) REFERENCES node_provider(id)
+);
+
+CREATE TABLE node_to_cluster (
+    id SERIAL PRIMARY KEY,
+    cluster_id TEXT,
+    node_id TEXT NOT NULL,
+    FOREIGN KEY (cluster_id) REFERENCES cluster(id),
+    FOREIGN KEY (node_id) REFERENCES node(id),
+    UNIQUE (cluster_id, node_id)
+);
+
+CREATE OR REPLACE VIEW node_provider_stats AS
+SELECT
+    node.id AS node_id,
+    node.node_type,
+    node_to_cluster.cluster_id,
+    nnp.node_provider_id
+FROM
+    node
+        JOIN
+    node_to_cluster ON node.id = node_to_cluster.node_id
+        JOIN
+    node_to_node_provider nnp on node.id = nnp.node_id;
\ No newline at end of file
diff --git a/frontend/assets/scss/themes/polkastats.scss b/frontend/assets/scss/themes/polkastats.scss
index 86c9adce..5a69f767 100644
--- a/frontend/assets/scss/themes/polkastats.scss
+++ b/frontend/assets/scss/themes/polkastats.scss
@@ -264,6 +264,40 @@ h6 {
   }
 }
 
+// cluster page
+#cluster-table th {
+  text-align: center;
+}
+#rewards-table th {
+  text-align: center;
+}
+.page-cluster .identicon {
+  display: inline-block;
+}
+.page-cluster td div {
+  padding: 0 !important;
+}
+.mw240 {
+  min-width: 240px;
+}
+@media (max-width: 767.98px) {
+  .page-cluster
+  .table.b-table.b-table-stacked-md
+  > tbody
+  > tr
+  > [data-label]::before {
+    display: none;
+  }
+  .page-cluster
+  .table.b-table.b-table-stacked-md
+  > tbody
+  > tr
+  > [data-label]
+  > div {
+    width: 100%;
+  }
+}
+
 // block page
 .block-table tr td:first-child {
   width: 30%;
diff --git a/frontend/components/Header.vue b/frontend/components/Header.vue
index 79b10e1d..b15c4d60 100644
--- a/frontend/components/Header.vue
+++ b/frontend/components/Header.vue
@@ -37,6 +37,11 @@
               {{ $t('layout.default.events') }}
             </b-dropdown-item>
           </b-nav-item-dropdown>
+          <b-nav-item-dropdown text="DDC">
+            <b-dropdown-item :to="`/cluster/${clusterId}`">
+              {{ $t('layout.default.dragon_one') }}
+            </b-dropdown-item>
+          </b-nav-item-dropdown>
           <b-nav-item right to="/accounts">{{
             $t('layout.default.accounts')
           }}</b-nav-item>
@@ -50,11 +55,14 @@
 </template>
 
 <script>
+import { gql } from 'graphql-tag'
 import { network } from '@/frontend.config.js'
 export default {
   data() {
     return {
       network,
+      // Hardcoded for now
+      clusterId: '0x7f82864e4f097e63d04cc279e4d8d2eb45a42ffa',
     }
   },
   computed: {
@@ -74,5 +82,21 @@ export default {
       }, 60000)
     }
   },
+  apollo: {
+    $subscribe: {
+      cluster: {
+        query: gql`
+          query cluster {
+            cluster(limit: 1) {
+              id
+            }
+          }
+        `,
+        result({ data }) {
+          this.clusterId = data.cluster[0].id
+        },
+      },
+    },
+  },
 }
 </script>
diff --git a/frontend/frontend.config.js b/frontend/frontend.config.js
index 8e1ca0dd..5e5738f8 100644
--- a/frontend/frontend.config.js
+++ b/frontend/frontend.config.js
@@ -6,8 +6,8 @@ export const network = {
   ss58Format: 54,
   coinGeckoDenom: 'cere-network',
   nodeWs: 'wss://archive.mainnet.cere.network/ws',
-  backendWs: 'wss://hasura.stats.cere.network/v1/graphql',
-  backendHttp: 'https://api.stats.cere.network/api/v1',
+  backendWs: 'ws://localhost:8082/v1/graphql',
+  backendHttp: 'http://localhost:8080/api/v1',
   googleAnalytics: '',
   theme: '@/assets/scss/themes/polkastats.scss',
   // ranking               Í
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 393b3fb1..e43b82cf 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -91,7 +91,8 @@
       "events": "Events",
       "validator": "Validator",
       "how_to_stake": "How to stake",
-      "economics": "Economics"
+      "economics": "Economics",
+      "dragon_one": "Dragon 1"
     },
     "error": {
       "page_not_found": "Page not found!",
@@ -119,6 +120,24 @@
       "loading_data": "Loading data, it can take a long time. Be patient, please",
       "download_csv": "Download in CSV format"
     },
+    "cluster": {
+      "cluster_dashboard": "Cluster Dashboard",
+      "cluster_id": "Cluster ID",
+      "providers": "Providers",
+      "throughput": "Throughput (bytes)",
+      "node_type": "Node Type",
+      "node_provider_id": "Node Provider",
+      "rewards": "Rewards for the last Era",
+      "gets": "Successful Reads in the last Era",
+      "puts": "Successful Writes in the last Era",
+      "historical_rewards": "Historical Rewards",
+      "block": "Block",
+      "event": "Event",
+      "event_index": "Event Index",
+      "rewarded_provider": "Rewarded Provider",
+      "reward_amount": "Rewards (CERE)",
+      "era": "Era"
+    },
     "account": {
       "head_title": "Cere Stats - Account {address}",
       "head_content": "{networkName} Account {address}",
diff --git a/frontend/mixins/commonMixin.js b/frontend/mixins/commonMixin.js
index a6e1c624..b8d48c98 100644
--- a/frontend/mixins/commonMixin.js
+++ b/frontend/mixins/commonMixin.js
@@ -122,5 +122,40 @@ export default {
       const date = moment.unix(timestamp)
       return moment(date).fromNow()
     },
+    filterByUniqueProviderLastEra: (data) => {
+      const seenProviders = {}
+      const result = []
+
+      for (let i = data.length - 1; i >= 0; i--) {
+        const element = data[i]
+        const providerId = element.node_provider_id
+
+        if (
+          !Object.hasOwn(seenProviders, 'providerId') ||
+          element.era > seenProviders[providerId].era
+        ) {
+          seenProviders[providerId] = element
+          result.push(element)
+        }
+      }
+      return result.reverse()
+    },
+    mergeArraysByProp: (arr1, arr2, prop) => {
+      const map = new Map()
+
+      arr1.forEach((obj) => {
+        map.set(obj[prop], { ...obj })
+      })
+
+      arr2.forEach((obj) => {
+        if (map.has(obj[prop])) {
+          map.set(obj[prop], { ...map.get(obj[prop]), ...obj })
+        } else {
+          map.set(obj[prop], { ...obj })
+        }
+      })
+
+      return Array.from(map.values())
+    },
   },
 }
diff --git a/frontend/pages/accounts.vue b/frontend/pages/accounts.vue
index d43d287c..efcbe77c 100644
--- a/frontend/pages/accounts.vue
+++ b/frontend/pages/accounts.vue
@@ -89,10 +89,7 @@
               </template>
               <template #cell(account_id)="data">
                 <div
-                  class="
-                    d-block d-sm-block d-md-none d-lg-none d-xl-none
-                    text-center
-                  "
+                  class="d-block d-sm-block d-md-none d-lg-none d-xl-none text-center"
                 >
                   <p class="mb-2">
                     {{ $t('pages.accounts.rank') }} #{{ data.item.rank }}
diff --git a/frontend/pages/cluster/_id.vue b/frontend/pages/cluster/_id.vue
new file mode 100644
index 00000000..612e72b2
--- /dev/null
+++ b/frontend/pages/cluster/_id.vue
@@ -0,0 +1,530 @@
+<template>
+  <div>
+    <section>
+      <b-container class="page-cluster main py-5">
+        <b-row class="mb-2">
+          <b-col cols="12">
+            <h1>
+              {{ $t('pages.cluster.cluster_dashboard') }}
+            </h1>
+          </b-col>
+        </b-row>
+        <b-container class="main mb-5 p-0">
+          <b-row>
+            <b-col>
+              <div class="widget mw240 mb-4">
+                <div class="col-10">
+                  <h5 class="widget-title mb-2">
+                    {{ $t('pages.cluster.cluster_id') }}
+                  </h5>
+                  <h5>
+                    <Identicon :address="clusterId" :size="20" />
+                    <nuxt-link
+                      :to="`/account/${clusterId}`"
+                      :title="$t('pages.cluster.node_provider_id')"
+                    >
+                      {{ shortAddress(clusterId) }}
+                    </nuxt-link>
+                  </h5>
+                </div>
+              </div>
+            </b-col>
+            <b-col>
+              <div class="widget mb-4">
+                <div class="col-10">
+                  <h5 class="widget-title mb-2">
+                    {{ $t('pages.cluster.providers') }}
+                  </h5>
+                  <h5>
+                    {{ providersNumber }}
+                  </h5>
+                </div>
+              </div>
+            </b-col>
+            <b-col>
+              <div class="widget mw240 mb-4">
+                <div class="col-10">
+                  <h5 class="widget-title mb-2">
+                    {{ $t('pages.cluster.throughput') }}
+                  </h5>
+                  <h5>{{ transferred_bytes }}</h5>
+                </div>
+              </div>
+            </b-col>
+          </b-row>
+        </b-container>
+        <div v-if="loading" class="text-center py-4">
+          <Loading />
+        </div>
+        <template v-else>
+          <div>
+            <b-table
+              id="cluster-table"
+              striped
+              stacked="md"
+              :fields="fields"
+              :items="clusterStats"
+            >
+              <template #cell(node_provider_id)="data">
+                <div
+                  class="d-block d-sm-block d-md-none d-lg-none d-xl-none text-center"
+                >
+                  <Identicon :address="data.item.node_provider_id" :size="40" />
+                  <nuxt-link
+                    :to="`/account/${data.item.node_provider_id}`"
+                    :title="$t('pages.cluster.node_provider_id')"
+                  >
+                    {{ shortAddress(data.item.node_provider_id) }}
+                  </nuxt-link>
+                  <table class="table table-striped mt-4">
+                    <tbody>
+                      <tr>
+                        <td class="text-left">
+                          <strong>{{ $t('pages.cluster.rewards') }}</strong>
+                        </td>
+                        <td class="text-right">
+                          {{ formatAmount(data.item.rewarded, 6) }}
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="text-left">
+                          <strong>{{ $t('pages.cluster.gets') }}</strong>
+                        </td>
+                        <td class="text-right">
+                          {{ data.item.number_of_gets }}
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="text-left">
+                          <strong>{{ $t('pages.cluster.puts') }}</strong>
+                        </td>
+                        <td class="text-right">
+                          {{ data.item.number_of_puts }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <div class="d-none d-sm-none d-md-block d-lg-block d-xl-block">
+                  <div>
+                    <Identicon
+                      :address="data.item.node_provider_id"
+                      :size="20"
+                    />
+                    <nuxt-link
+                      v-b-tooltip.hover
+                      :to="`/account/${data.item.node_provider_id}`"
+                      :title="$t('pages.cluster.node_provider_id')"
+                    >
+                      {{ shortAddress(data.item.node_provider_id) }}
+                    </nuxt-link>
+                  </div>
+                </div>
+              </template>
+              <template #cell(rewarded)="data">
+                <p class="text-right mb-0">
+                  {{ formatAmount(data.item.rewarded, 6) }}
+                </p>
+              </template>
+              <template #cell(number_of_gets)="data">
+                <p class="text-right mb-0">{{ data.item.number_of_gets }}</p>
+              </template>
+              <template #cell(number_of_puts)="data">
+                <p class="text-right mb-0">{{ data.item.number_of_puts }}</p>
+              </template>
+            </b-table>
+          </div>
+        </template>
+      </b-container>
+    </section>
+    <div>
+      <section>
+        <b-container class="main py-5">
+          <b-row class="mb-2">
+            <b-col cols="12">
+              <h1>
+                {{ $t('pages.cluster.historical_rewards') }}
+              </h1>
+            </b-col>
+          </b-row>
+          <div class="last-extrinsics">
+            <div v-if="loading" class="text-center py-4">
+              <Loading />
+            </div>
+            <template v-else>
+              <div class="table-responsive">
+                <b-table
+                  id="rewards-table"
+                  striped
+                  hover
+                  :fields="rewardsFields"
+                  :items="rewards"
+                >
+                  <template #cell(provider)="data">
+                    <div
+                      class="d-block d-sm-block d-md-none d-lg-none d-xl-none text-center"
+                    >
+                      <Identicon
+                        :address="data.item.node_provider_id"
+                        :size="40"
+                      />
+                      <nuxt-link
+                        :to="`/account/${data.item.node_provider_id}`"
+                        :title="$t('pages.cluster.provider')"
+                      >
+                        {{ shortAddress(data.item.node_provider_id) }}
+                      </nuxt-link>
+                      <table class="table table-striped mt-4">
+                        <tbody>
+                          <tr>
+                            <td class="text-left">
+                              <strong>{{ $t('pages.cluster.block') }}</strong>
+                            </td>
+                            <td class="text-right">
+                              <nuxt-link
+                                v-b-tooltip.hover.bottom
+                                :to="`/block?blockNumber=${data.item.block_number}`"
+                                title="Check block information"
+                              >
+                                #{{ formatNumber(data.item.block_number, 6) }}
+                              </nuxt-link>
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="text-left">
+                              <strong>{{ $t('pages.cluster.event') }}</strong>
+                            </td>
+                            <td class="text-right">
+                              {{ data.item.event_index }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="text-left">
+                              <strong>{{ $t('pages.cluster.era') }}</strong>
+                            </td>
+                            <td class="text-right">
+                              {{ data.item.era }}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td class="text-left">
+                              <strong>{{
+                                $t('pages.cluster.reward_amount')
+                              }}</strong>
+                            </td>
+                            <td class="text-right">
+                              {{ formatAmount(data.item.rewarded, 6) }}
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                    <div
+                      class="d-none d-sm-none d-md-block d-lg-block d-xl-block"
+                    >
+                      <Identicon
+                        :address="data.item.node_provider_id"
+                        :size="20"
+                      />
+                      <nuxt-link
+                        :to="`/account/${data.item.node_provider_id}`"
+                        :title="$t('pages.cluster.node_provider_id')"
+                      >
+                        {{ shortAddress(data.item.node_provider_id) }}
+                      </nuxt-link>
+                    </div>
+                  </template>
+                  <template #cell(block)="data">
+                    <div class="text-right mb-0">
+                      <nuxt-link
+                        v-b-tooltip.hover.bottom
+                        :to="`/block?blockNumber=${data.item.block_number}`"
+                        title="Check block information"
+                      >
+                        #{{ formatNumber(data.item.block_number, 6) }}
+                      </nuxt-link>
+                    </div>
+                  </template>
+                  <template #cell(event)="data">
+                    <p class="text-right mb-0">
+                      {{ data.item.event_index }}
+                    </p>
+                  </template>
+                  <template #cell(era)="data">
+                    <p class="text-right mb-0">
+                      {{ data.item.era }}
+                    </p>
+                  </template>
+                  <template #cell(reward)="data">
+                    <p class="text-right mb-0">
+                      {{ formatAmount(data.item.rewarded, 6) }}
+                    </p>
+                  </template>
+                </b-table>
+              </div>
+              <!-- pagination -->
+              <div class="row">
+                <div class="col-6">
+                  <!-- desktop -->
+                  <div class="d-none d-sm-none d-md-none d-lg-block d-xl-block">
+                    <b-button-group>
+                      <b-button
+                        v-for="(option, index) in paginationOptions"
+                        :key="index"
+                        variant="outline-primary2"
+                        :class="{ 'selected-per-page': perPage === option }"
+                        @click="setPageSize(option)"
+                      >
+                        {{ option }}
+                      </b-button>
+                    </b-button-group>
+                  </div>
+                  <!-- mobile -->
+                  <div
+                    class="d-block d-sm-block d-md-block d-lg-none d-xl-none"
+                  >
+                    <b-dropdown
+                      class="m-md-2"
+                      text="Page size"
+                      variant="outline-primary2"
+                    >
+                      <b-dropdown-item
+                        v-for="(option, index) in paginationOptions"
+                        :key="index"
+                        @click="setPageSize(10)"
+                      >
+                        {{ option }}
+                      </b-dropdown-item>
+                    </b-dropdown>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <b-pagination
+                    v-model="currentPage"
+                    :total-rows="totalRows"
+                    :per-page="perPage"
+                    aria-controls="my-table"
+                    variant="dark"
+                    align="right"
+                  ></b-pagination>
+                </div>
+              </div>
+            </template>
+          </div>
+        </b-container>
+      </section>
+    </div>
+  </div>
+</template>
+<script>
+import { gql } from 'graphql-tag'
+import Loading from '@/components/Loading.vue'
+import commonMixin from '@/mixins/commonMixin.js'
+import { network, paginationOptions } from '@/frontend.config.js'
+
+export default {
+  components: {
+    Loading,
+  },
+  mixins: [commonMixin],
+  data() {
+    return {
+      loading: true,
+      paginationOptions,
+      perPage: localStorage.paginationOptions
+        ? parseInt(localStorage.paginationOptions)
+        : 10,
+      currentPage: 1,
+      sortBy: `favorite`,
+      sortDesc: true,
+      filter: null,
+      filterOn: [],
+      totalRows: 1,
+      agggregateRows: 1,
+      fields: [
+        {
+          key: 'node_provider_id',
+          label: this.$t('pages.cluster.node_provider_id'),
+          sortable: true,
+          thStyle: { width: '23%' },
+        },
+        {
+          key: 'rewarded',
+          label: this.$t('pages.cluster.rewards'),
+          sortable: true,
+          class: `d-none d-sm-none d-md-table-cell d-lg-table-cell d-xl-table-cell`,
+        },
+        {
+          key: 'number_of_gets',
+          label: this.$t('pages.cluster.gets'),
+          sortable: true,
+          class: `d-none d-sm-none d-md-table-cell d-lg-table-cell d-xl-table-cell`,
+        },
+        {
+          key: 'number_of_puts',
+          label: this.$t('pages.cluster.puts'),
+          sortable: true,
+          class: `d-none d-sm-none d-md-table-cell d-lg-table-cell d-xl-table-cell`,
+        },
+      ],
+      rewardsFields: [
+        {
+          key: 'provider',
+          label: this.$t('pages.cluster.rewarded_provider'),
+          sortable: true,
+          thStyle: { width: '25%' },
+        },
+        {
+          key: 'block',
+          label: this.$t('pages.cluster.block'),
+          sortable: true,
+          class: `d-none d-sm-none d-md-table-cell d-lg-table-cell d-xl-table-cell`,
+        },
+        {
+          key: 'event',
+          label: this.$t('pages.cluster.event_index'),
+          sortable: true,
+          class: `d-none d-sm-none d-md-table-cell d-lg-table-cell d-xl-table-cell`,
+        },
+        {
+          key: 'era',
+          label: this.$t('pages.cluster.era'),
+          sortable: true,
+          class: `d-none d-sm-none d-md-table-cell d-lg-table-cell d-xl-table-cell`,
+        },
+        {
+          key: 'reward',
+          label: this.$t('pages.cluster.reward_amount'),
+          sortable: true,
+          class: `d-none d-sm-none d-md-table-cell d-lg-table-cell d-xl-table-cell`,
+        },
+      ],
+      providers: [],
+      providersNumber: 0,
+      clusterId: this.$route.params.id,
+      rewards: [],
+      providers_rewards: [],
+      transferred_bytes: 0,
+      clusterStats: [],
+    }
+  },
+  head() {
+    return {
+      title: this.$t('pages.accounts.head_title', {
+        networkName: network.name,
+      }),
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: this.$t('pages.accounts.head_content', {
+            networkName: network.name,
+          }),
+        },
+      ],
+    }
+  },
+  watch: {
+    $route() {
+      this.clusterId = this.$route.params.id
+    },
+  },
+  methods: {
+    setPageSize(num) {
+      localStorage.paginationOptions = num
+      this.perPage = parseInt(num)
+    },
+    getLastEraStats() {
+      if (this.rewards === [] || this.providers === []) {
+        return
+      }
+
+      this.clusterStats = commonMixin.methods.mergeArraysByProp(
+        this.rewards,
+        this.providers,
+        'node_provider_id'
+      )
+
+      this.loading = false
+    },
+  },
+  apollo: {
+    $subscribe: {
+      stats: {
+        query: gql`
+          query node_provider_stats($clusterId: String) {
+            node_provider_stats(where: { cluster_id: { _eq: $clusterId } }) {
+              node_provider_id
+            }
+          }
+        `,
+        variables() {
+          return {
+            clusterId: this.clusterId,
+          }
+        },
+        result({ data }) {
+          this.providers = data.node_provider_stats
+          this.providersNumber = this.providers.length
+          this.getLastEraStats()
+          this.loading = false
+        },
+      },
+      rewards: {
+        query: gql`
+          query events {
+            event(where: { method: { _eq: "ProviderRewarded" } }, limit: 20) {
+              block_number
+              event_index
+              data
+            }
+          }
+        `,
+        result({ data }) {
+          const rewards = data.event.map((record) => {
+            return {
+              ...record,
+              data: JSON.parse(record.data),
+            }
+          })
+
+          const clusterRewards = rewards.filter((reward) => {
+            return reward.data[0] === this.clusterId
+          })
+
+          this.rewards = clusterRewards.map((reward) => {
+            return {
+              clusterId: reward.data[0],
+              era: reward.data[1],
+              batch_index: reward.data[2],
+              stored_bytes: reward.data[3],
+              transferred_bytes: reward.data[4],
+              number_of_puts: reward.data[5],
+              number_of_gets: reward.data[6],
+              node_provider_id: reward.data[7],
+              rewarded: reward.data[8],
+              expected_to_reward: reward.data[9],
+              block_number: reward.block_number,
+              event_index: reward.event_index,
+            }
+          })
+
+          this.rewards = commonMixin.methods.filterByUniqueProviderLastEra(
+            this.rewards
+          )
+
+          this.transferred_bytes = this.rewards.reduce(
+            (accumulator, reward) => {
+              return accumulator + reward.transferred_bytes
+            },
+            0
+          )
+
+          this.getLastEraStats()
+          this.loading = false
+        },
+      },
+    },
+  },
+}
+</script>