diff --git a/.eslintrc.json b/.eslintrc.json
index 7603cde7a6..407fa26eab 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -42,7 +42,16 @@
     "@typescript-eslint/no-empty-function": "off",
     "vue/no-v-for-template-key": "off",
     "vue/no-multiple-template-root": "off",
-    "vue/no-v-model-argument": "off"
+    "vue/no-v-model-argument": "off",
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        "extendDefaults": true,
+        "types": {
+          "{}": false
+        }
+      }
+    ]
   },
   "settings": {
     "svelte3/typescript": true // load TypeScript as peer dependency
diff --git a/.github/workflows/new_stats_build.yaml b/.github/workflows/new_stats_build.yaml
new file mode 100644
index 0000000000..879284363d
--- /dev/null
+++ b/.github/workflows/new_stats_build.yaml
@@ -0,0 +1,45 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code using yarn build:app
+
+name: New Stats Build
+
+on:
+  push:
+    branches:
+      - development
+    paths:
+      - "packages/new_stats/**"
+  pull_request:
+    branches:
+      - development
+    paths:
+      - "packages/new_stats/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: "--max-old-space-size=8192"
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+          cache-dependency-path: "**/yarn.lock"
+
+      - name: Install dependencies
+        run: |
+          yarn install
+
+      - name: Build
+        run: |
+          lerna run build --no-private
+          yarn workspace @threefold/newstats build
diff --git a/.github/workflows/new_stats_docker.yaml b/.github/workflows/new_stats_docker.yaml
new file mode 100644
index 0000000000..0770f28a2f
--- /dev/null
+++ b/.github/workflows/new_stats_docker.yaml
@@ -0,0 +1,35 @@
+name: New Stats Docker Build/Push
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  Build-and-push-docker-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout the repo
+        uses: actions/checkout@v3
+      - name: Log in to the Container registry
+        uses: docker/login-action@v2.1.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Extract metadata for Docker
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ghcr.io/threefoldtech/newstats
+          tags: |
+            type=semver,pattern={{version}}
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          file: packages/new_stats/Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
diff --git a/.github/workflows/playground_build.yml b/.github/workflows/playground_build.yml
index 1593546f6b..4fdbd58997 100644
--- a/.github/workflows/playground_build.yml
+++ b/.github/workflows/playground_build.yml
@@ -17,6 +17,8 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: "--max-old-space-size=8192"
 
     strategy:
       matrix:
diff --git a/.github/workflows/playground_cd.yml b/.github/workflows/playground_cd.yml
index 4fdcfb0ad0..30307679ae 100644
--- a/.github/workflows/playground_cd.yml
+++ b/.github/workflows/playground_cd.yml
@@ -6,6 +6,7 @@ on:
   push:
     branches:
       - development
+      - development_313
     paths:
       - "packages/playground/**"
   workflow_dispatch:
@@ -19,6 +20,8 @@ concurrency:
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: "--max-old-space-size=8192"
 
     strategy:
       matrix:
@@ -47,6 +50,7 @@ jobs:
           VERSION=${VERSION:0:7} NETWORK=dev yarn build
 
       - name: Copying files to staging server
+        if: ${{ github.ref == 'refs/heads/development' }}
         uses: appleboy/scp-action@master
         with:
           host: ${{ secrets.DEV_REMOTE_HOST }}
@@ -58,3 +62,17 @@ jobs:
           source: "packages/playground/dist/"
           target: "${{ secrets.PLAYGROUND_REMOTE_DIR }}"
           strip_components: 3
+
+      - name: Copying files to staging server
+        if: ${{ github.ref == 'refs/heads/development_313' }}
+        uses: appleboy/scp-action@master
+        with:
+          host: ${{ secrets.DEV_REMOTE_HOST }}
+          username: ${{ secrets.DEV_REMOTE_USER }}
+          key: ${{ secrets.DEV_SSH_KEY }}
+          passphrase: ${{ secrets.DEV_SSH_KEY_PASSPHRASE }}
+          rm: true
+          port: ${{ secrets.PORT }}
+          source: "packages/playground/dist/"
+          target: "/opt/playground_new/devnet/dist"
+          strip_components: 3
diff --git a/Makefile b/Makefile
index 16719f141f..541bee1601 100644
--- a/Makefile
+++ b/Makefile
@@ -41,8 +41,12 @@ else ifeq ($(project), weblets)
 	cd packages/weblets/playground && yarn build
 else ifeq ($(project), playground)
 	cd packages/playground && yarn build
+else ifeq ($(project), graphql_client)
+	cd packages/graphql_client && yarn build
+else ifeq ($(project), gridproxy_client)
+	cd packages/gridproxy_client && yarn build
 else ifeq ($(project), UI)
 	cd packages/UI && yarn build
 else
 	yarn lerna run build --no-private
-endif
\ No newline at end of file
+endif
diff --git a/README.md b/README.md
index d163caa7cf..85b7f5af3f 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,8 @@ This repo contains the typescript clients and projects for Threefold grid.
 - [rmb peer client](./packages/rmb_peer_client/README.md)
 - [rmb peer server](./packages/rmb_peer_server/README.md)
 - [Playground](./packages/playground/README.md)
+- [graphql_client](./packages/graphql_client/README.md)
+- [gridproxy_client](./packages/gridproxy_client/README.md)
 - [UI](./packages/UI/README.md)
 
 ## Requirements
diff --git a/packages/dashboard/scripts/build-env.sh b/packages/dashboard/scripts/build-env.sh
index 531820e930..fd5640b2cd 100644
--- a/packages/dashboard/scripts/build-env.sh
+++ b/packages/dashboard/scripts/build-env.sh
@@ -21,7 +21,7 @@ case $TFCHAIN_NETWORK in
     GRAPHQL_URL='https://graphql.dev.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.dev.grid.tf'
     SUBSTRATE_URL='wss://tfchain.dev.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.dev.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.dev.grid.tf/activation/activate'
     PLAYGROUND_URL='https://play.dev.grid.tf'
     PLAYGROUND_V2_URL='https://playground.dev.grid.tf'
     RELAY_DOMAIN='relay.dev.grid.tf'
@@ -32,7 +32,7 @@ case $TFCHAIN_NETWORK in
     GRAPHQL_URL='https://graphql.qa.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.qa.grid.tf'
     SUBSTRATE_URL='wss://tfchain.qa.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.qa.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.qa.grid.tf/activation/activate'
     PLAYGROUND_URL='https://play.qa.grid.tf'
     PLAYGROUND_V2_URL='https://playground.qa.grid.tf'
     RELAY_DOMAIN='relay.qa.grid.tf'
@@ -43,7 +43,7 @@ case $TFCHAIN_NETWORK in
     GRAPHQL_URL='https://graphql.test.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.test.grid.tf'
     SUBSTRATE_URL='wss://tfchain.test.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.test.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.test.grid.tf/activation/activate'
     PLAYGROUND_URL='https://play.test.grid.tf'
     PLAYGROUND_V2_URL='https://playground.test.grid.tf'
     RELAY_DOMAIN='relay.test.grid.tf'
@@ -54,7 +54,7 @@ case $TFCHAIN_NETWORK in
     GRAPHQL_URL='https://graphql.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.grid.tf'
     SUBSTRATE_URL='wss://tfchain.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.grid.tf/activation/activate'
     PLAYGROUND_URL='https://play.grid.tf'
     PLAYGROUND_V2_URL='https://playground.grid.tf'
     RELAY_DOMAIN='relay.grid.tf'
diff --git a/packages/dashboard/src/components/TfChainConnector.vue b/packages/dashboard/src/components/TfChainConnector.vue
index 9dff22a367..39e45e2a7f 100644
--- a/packages/dashboard/src/components/TfChainConnector.vue
+++ b/packages/dashboard/src/components/TfChainConnector.vue
@@ -45,7 +45,7 @@
             <v-form>
               <v-text-field
                 readonly
-                label="Mnemonic"
+                label="Hex Seed"
                 :value="$store.state.profile.mnemonic"
                 :type="showMnemonic ? 'text' : 'password'"
                 :append-icon="showMnemonic ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
@@ -116,16 +116,16 @@
               @submit.prevent="connect"
             >
               <v-alert type="warning" text>
-                To connect your wallet, you will need to enter your mnemonic which will be encrypted using the password.
-                Mnemonic will never be shared outside of this device.
+                To connect your wallet, you will need to enter your Mnemonic or Hex Seed which will be encrypted using
+                the password. Mnemonic or Hex Seed will never be shared outside of this device.
               </v-alert>
 
               <v-tooltip bottom>
                 <template #activator="{ on, attrs }">
                   <div v-on="on" v-bind="attrs">
                     <v-text-field
-                      label="Mnemonic"
-                      placeholder="Please insert your mnemonic"
+                      label="Mnemonic or Hex Seed"
+                      placeholder="Please insert your Mnemonic or Hex Seed"
                       :error-messages="mnemonicError || activateAccountError"
                       :value="mnemonic"
                       @input="
@@ -142,8 +142,9 @@
                 </template>
 
                 <p class="font-weight-black" :style="{ maxWidth: '600px' }">
-                  Mnemonic are your private key. They are used to represent you on the ThreeFold Grid. You can paste
-                  existing mnemonic or click the 'Create Account' button to create an account and generate mnemonic.
+                  Mnemonic or Hex Seed are your private key. They are used to represent you on the ThreeFold Grid. You
+                  can paste existing (Mnemonic/Hex Seed) or click the 'Create Account' button to create an account and
+                  generate mnemonic.
                 </p>
               </v-tooltip>
 
@@ -244,6 +245,7 @@
 
 <script lang="ts">
 import type { ApiPromise } from "@polkadot/api";
+import { isAddress } from "@polkadot/util-crypto";
 import { validateMnemonic } from "bip39";
 import Cryptr from "cryptr";
 import md5 from "md5";
@@ -326,18 +328,32 @@ export default class TfChainConnector extends Vue {
     return this.mnemonicError?.toLowerCase().includes("couldn't find a user for the provided mnemonic") ?? false;
   }
 
+  _isValidAddress(address: string) {
+    if (address.length === 66) {
+      return isAddress(address);
+    }
+
+    if (address.length === 64) {
+      return isAddress("0x" + address);
+    }
+
+    return false;
+  }
+
   @Watch("mnemonic")
   async checkMnemonic(mnemonic: string = this.mnemonic) {
     this.validatingMnemonic = true;
     this.mnemonicError = null;
 
-    if (!mnemonic) this.mnemonicError = "Mnemonic is required.";
-    else if (!validateMnemonic(mnemonic)) this.mnemonicError = "Mnemonic doesn't seem to be valid.";
+    if (!mnemonic) this.mnemonicError = "Mnemonic or Hex Seed is required.";
+    else if (!validateMnemonic(mnemonic) && !this._isValidAddress(mnemonic))
+      this.mnemonicError = "Mnemonic or Hex Seed doesn't seem to be valid.";
     else {
       try {
         await getGrid(mnemonic);
       } catch (err) {
-        this.mnemonicError = (err as any).message || "Couldn't connect to chain using the provided mnemonic.";
+        this.mnemonicError =
+          (err as any).message || "Couldn't connect to chain using the provided mnemonic or hex seed.";
       }
     }
 
@@ -412,7 +428,6 @@ export default class TfChainConnector extends Vue {
   public validateLoginPassword(value: string) {
     if (!value) return "Password is required";
     if (value.length < 6) return "Password must be at least 6 characters.";
-    console.log(localStorage.getItem(key));
 
     const wallet = JSON.parse(localStorage.getItem(key) || "{}");
     if (wallet.password !== md5(value)) return "Please provide a valid password.";
@@ -460,7 +475,7 @@ export default class TfChainConnector extends Vue {
       if (msg.toLowerCase().includes("couldn't find a user for the provided mnemonic")) {
         this.activateAccountModal = true;
       } else {
-        this.mnemonicError = msg || "Failed to connect mnemonic on grid.";
+        this.mnemonicError = msg || "Failed to connect mnemonic or hex seed on grid.";
       }
     } finally {
       this.connecting = false;
diff --git a/packages/dashboard/src/explorer/components/NodeDetails.vue b/packages/dashboard/src/explorer/components/NodeDetails.vue
index d868459a14..18de1431d9 100644
--- a/packages/dashboard/src/explorer/components/NodeDetails.vue
+++ b/packages/dashboard/src/explorer/components/NodeDetails.vue
@@ -44,7 +44,7 @@
             <v-list-item-content>
               <v-list-item-title> Uptime </v-list-item-title>
             </v-list-item-content>
-            {{ node.uptime | secondToRedable }}
+            {{ node.uptime | toReadableDate }}
           </v-list-item>
           <v-divider />
 
diff --git a/packages/dashboard/src/explorer/config.ts b/packages/dashboard/src/explorer/config.ts
index 1fed4f1295..3e1f4c1676 100644
--- a/packages/dashboard/src/explorer/config.ts
+++ b/packages/dashboard/src/explorer/config.ts
@@ -1,17 +1,17 @@
 import Vue from "vue";
 import VueApollo from "vue-apollo";
 
-import dateFiler from "./filters/date";
+import toHumanDate from "./filters/date";
 import optionTitleFiler from "./filters/optionTitle";
-import secondToRedable from "./filters/secondToRedable";
+import toReadableDate from "./filters/toReadableDate";
 import toTeraOrGigaOrPeta from "./filters/toTeraOrGigaOrPeta";
 import apolloProvider from "./plugins/apollo";
 
 Vue.use(VueApollo);
-Vue.filter("date", dateFiler);
+Vue.filter("date", toHumanDate);
 Vue.filter("optionTitle", optionTitleFiler);
 Vue.filter("toTeraOrGigaOrPeta", toTeraOrGigaOrPeta);
-Vue.filter("secondToRedable", secondToRedable);
+Vue.filter("toReadableDate", toReadableDate);
 
 export const explorerConfigs: any = {
   apolloProvider,
diff --git a/packages/dashboard/src/explorer/filters/date.ts b/packages/dashboard/src/explorer/filters/date.ts
index 9ca9e05d9d..849f97ca84 100644
--- a/packages/dashboard/src/explorer/filters/date.ts
+++ b/packages/dashboard/src/explorer/filters/date.ts
@@ -1,10 +1,5 @@
-export default function dateFiler(value: number): string {
-  const formater = Intl.DateTimeFormat("en", {
-    timeStyle: "short",
-    dateStyle: "short",
-    // eslint-disable-next-line
-  } as any);
+import moment from "moment";
 
-  // eslint-disable-next-line
-  return formater.format(new Date(value * 1000));
+export default function toHumanDate(timeInSeconds: number): string {
+  return moment(timeInSeconds * 1000).format("M/D/YY, h:m A");
 }
diff --git a/packages/dashboard/src/explorer/filters/secondToRedable.ts b/packages/dashboard/src/explorer/filters/secondToRedable.ts
deleted file mode 100644
index 3c8a8aa6dd..0000000000
--- a/packages/dashboard/src/explorer/filters/secondToRedable.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-const gte = (v: number) => (n: number) => n >= v;
-
-const MIN = 60;
-const HOUR = 60 * MIN;
-const DAY = 24 * HOUR;
-const WEEK = 7 * DAY;
-const MONTH = 30 * DAY;
-const YEAR = 365 * DAY;
-
-const isYear = gte(YEAR);
-const isMonth = gte(MONTH);
-const isWeek = gte(WEEK);
-const isDay = gte(DAY);
-const isHour = gte(HOUR);
-const isMin = gte(MIN);
-
-const calc = (t: number, unit: number) => (t - (t % unit)) / unit;
-
-export default function secondToRedable(time?: number) {
-  if (time != 0 && !time) return "Unknown";
-
-  let t = +time;
-  if (t === 0 || isNaN(t)) return "0";
-
-  const units = {
-    years: 0,
-    months: 0,
-    weeks: 0,
-    days: 0,
-    hours: 0,
-    mins: 0,
-    seconds: 0,
-  };
-
-  const take = (v: number) => (t -= v);
-  const takeIf = (fn: any, key: keyof typeof units, v: number) => {
-    if (fn(t)) {
-      units[key] = calc(t, v);
-      take(units[key] * v);
-    }
-  };
-
-  takeIf(isYear, "years", YEAR);
-  takeIf(isMonth, "months", MONTH);
-  takeIf(isWeek, "weeks", WEEK);
-  takeIf(isDay, "days", DAY);
-  takeIf(isHour, "hours", HOUR);
-  takeIf(isMin, "mins", MIN);
-  units["seconds"] = t;
-
-  const keyToUnit = (key: string, v: number) => {
-    return v + " " + key[0].toUpperCase() + key.slice(1, key.length - 1) + (v > 1 ? "s" : "");
-  };
-  const keys = Object.keys(units) as Array<keyof typeof units>;
-  let res = "";
-
-  for (const key of keys) {
-    if (units[key] === 0) continue;
-
-    if (res.length > 0) {
-      res += ", " + keyToUnit(key, units[key]);
-      return res;
-    }
-
-    res += keyToUnit(key, units[key]);
-  }
-
-  return res;
-}
diff --git a/packages/dashboard/src/explorer/filters/toReadableDate.ts b/packages/dashboard/src/explorer/filters/toReadableDate.ts
new file mode 100644
index 0000000000..97199ad243
--- /dev/null
+++ b/packages/dashboard/src/explorer/filters/toReadableDate.ts
@@ -0,0 +1,11 @@
+import moment from "moment";
+
+export default function toReadableDate(timeInSeconds: number): string {
+  const duration = moment.duration(timeInSeconds * 1000);
+  const years = duration.years();
+  const months = duration.months();
+  const weeks = duration.weeks();
+  const days = duration.days();
+  const _ = (k: string, n: number) => (n > 0 ? `${n} ${k}${n === 1 ? "" : "s"}` : "");
+  return [_("year", years), _("month", months), _("week", weeks), _("day", days)].join(", ");
+}
diff --git a/packages/dashboard/src/explorer/views/Nodes.vue b/packages/dashboard/src/explorer/views/Nodes.vue
index 61a34b96fa..cbb5aeced5 100644
--- a/packages/dashboard/src/explorer/views/Nodes.vue
+++ b/packages/dashboard/src/explorer/views/Nodes.vue
@@ -103,7 +103,7 @@
         </template>
 
         <template v-slot:[`item.uptime`]="{ item }">
-          {{ item.uptime | secondToRedable }}
+          {{ item.uptime | toReadableDate }}
         </template>
 
         <template v-slot:[`item.status`]="{ item }">
diff --git a/packages/dashboard/src/portal/store/actions.ts b/packages/dashboard/src/portal/store/actions.ts
index 6809703161..de175fc126 100644
--- a/packages/dashboard/src/portal/store/actions.ts
+++ b/packages/dashboard/src/portal/store/actions.ts
@@ -33,13 +33,15 @@ export default {
 
     for (const key in state.dedicatedNodesFilter) {
       let value = state.dedicatedNodesFilter[key];
+
       if (key == "total_hru" || key == "total_mru" || key == "total_sru") {
-        value *= 1024 * 1024 * 1024; // convert from gb to b
-        value = Math.ceil(value);
-        value = parseInt(value);
+        value = BigInt(value) * BigInt(1024) * BigInt(1024) * BigInt(1024); // convert from gb to b
+        value = BigInt(Math.ceil(Number(value))); // Convert back to a BigInt if needed
       }
+
       // don't break the call for the null values
       if (value == null || value == undefined || value == 0) value = "";
+
       baseUrl += `&${key}=${value}`;
     }
 
diff --git a/packages/dashboard/src/utils/grid.ts b/packages/dashboard/src/utils/grid.ts
index efc111fd0b..be07fc48c2 100644
--- a/packages/dashboard/src/utils/grid.ts
+++ b/packages/dashboard/src/utils/grid.ts
@@ -8,6 +8,15 @@ export async function getGrid(mnemonic: string) {
     mnemonic,
     network: config.network as NetworkEnv,
     backendStorageType: BackendStorageType.tfkvstore,
+    ...((config.network as NetworkEnv) !== NetworkEnv.custom
+      ? {}
+      : {
+          relayURL: config.relay,
+          graphqlURL: config.graphqlUrl,
+          substrateURL: config.wsUrl,
+          activationURL: config.activationServiceUrl,
+          proxyURL: config.gridproxyUrl,
+        }),
   });
 
   await grid.connect();
@@ -19,6 +28,15 @@ export function activateAccountAndCreateTwin(mnemonic: string) {
     network: config.network as NetworkEnv,
     mnemonic,
     storeSecret: mnemonic,
+    ...((config.network as NetworkEnv) !== NetworkEnv.custom
+      ? {}
+      : {
+          relayURL: config.relay,
+          graphqlURL: config.graphqlUrl,
+          substrateURL: config.wsUrl,
+          activationURL: config.activationServiceUrl,
+          proxyURL: config.gridproxyUrl,
+        }),
   });
   grid._connect();
   const relay = grid.getDefaultUrls(config.network as NetworkEnv).relay.slice(6);
@@ -81,6 +99,15 @@ export function createAccount() {
     network,
     mnemonic: "",
     storeSecret: "test",
+    ...((config.network as NetworkEnv) !== NetworkEnv.custom
+      ? {}
+      : {
+          relayURL: config.relay,
+          graphqlURL: config.graphqlUrl,
+          substrateURL: config.wsUrl,
+          activationURL: config.activationServiceUrl,
+          proxyURL: config.gridproxyUrl,
+        }),
   });
   grid._connect();
   const relay = grid.getDefaultUrls(network).relay.slice(6);
diff --git a/packages/graphql_client/.gitignore b/packages/graphql_client/.gitignore
new file mode 100644
index 0000000000..094b1084d5
--- /dev/null
+++ b/packages/graphql_client/.gitignore
@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# internals
+legacy
diff --git a/packages/graphql_client/README.md b/packages/graphql_client/README.md
new file mode 100644
index 0000000000..785c26f346
--- /dev/null
+++ b/packages/graphql_client/README.md
@@ -0,0 +1,23 @@
+# graphql_client
+
+This a Typescript client to send requests to graghql based on the network.
+Allow to choose fields and turn chosen fields into type on the fly.
+
+## Installation
+
+```bash
+yarn install
+```
+
+## Building
+
+```bash
+yarn build
+```
+
+### Supported URLs
+
+- [devnet](https://graphql.dev.grid.tf/graphql)
+- [qanet](https://graphql.qa.grid.tf/graphql)
+- [testnet](https://graphql.test.grid.tf/graphql)
+- [mainnet](https://graphql.grid.tf/graphql)
diff --git a/packages/graphql_client/package.json b/packages/graphql_client/package.json
new file mode 100644
index 0000000000..f590f12f68
--- /dev/null
+++ b/packages/graphql_client/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@threefold/graphql_client",
+  "version": "2.1.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "ts-mixer": "^6.0.2",
+    "@threefold/types": "^1.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.3"
+  }
+}
diff --git a/packages/graphql_client/src/clients/abstract_client.ts b/packages/graphql_client/src/clients/abstract_client.ts
new file mode 100644
index 0000000000..378a353f3c
--- /dev/null
+++ b/packages/graphql_client/src/clients/abstract_client.ts
@@ -0,0 +1,131 @@
+import { ID, Int, PartialBoolean } from "../types";
+import { assertHasField, assertID } from "../utils";
+import { CONNECTION_ENTITY_QUERIES } from "./connection_queries";
+
+export type Variables = { [key: string]: any };
+
+export interface RequestOptions {
+  name: string;
+  query: string;
+  parameters: string[];
+  variables: Variables;
+}
+
+export abstract class AbstractClient {
+  protected abstract _request<T>(options: RequestOptions): Promise<T>;
+
+  protected _list<T>(options: __InternalOptions<ByArray<any, any>, T>): RequestOptions {
+    assertHasField(options.fields);
+
+    const { name, entity, limit, offset, orderBy, where, fields } = options;
+    const query = `
+      ${name}(
+        limit: $limit${name},
+        offset: $offset${name},
+        orderBy: $orderBy${name},
+        where: $where${name},
+      ) {
+        ${AbstractClient.normalizeFields(fields)}
+      }
+    `;
+
+    return {
+      name,
+      parameters: [
+        `$limit${name}: Int`,
+        `$offset${name}: Int`,
+        `$orderBy${name}: [${entity}OrderByInput!]`,
+        `$where${name}: ${entity}WhereInput`,
+      ],
+      query,
+      variables: {
+        [`limit${name}`]: limit,
+        [`offset${name}`]: offset,
+        [`orderBy${name}`]: orderBy,
+        [`where${name}`]: where,
+      },
+    };
+  }
+
+  protected _byId<T>(id: ID, fields: PartialBoolean<T>, name: string): RequestOptions {
+    assertID(id);
+    assertHasField(fields);
+
+    const query = `
+      ${name}(id: $id${name}) {
+        ${AbstractClient.normalizeFields(fields)}
+      }
+    `;
+
+    return {
+      name,
+      parameters: [`$id${name}: ID!`],
+      query,
+      variables: { [`id${name}`]: id },
+    };
+    // return this._request<T>(query, { [`id${name}`]: id }, name);
+  }
+
+  protected _connection<T>(fields: PartialBoolean<T>, options: any, name: string): RequestOptions {
+    assertHasField(fields);
+
+    const entity = CONNECTION_ENTITY_QUERIES[name];
+    const parameters = [
+      `$after${name}: String`,
+      `$first${name}: Int`,
+      `$orderBy${name}: [${entity}OrderByInput!]!`,
+      `$where${name}: ${entity}WhereInput`,
+    ];
+    const query = `
+      ${name}(
+        after: $after${name},
+        first: $first${name},
+        orderBy: $orderBy${name},
+        where: $where${name}
+      ) {
+        ${AbstractClient.normalizeFields(fields)}
+      }
+    `;
+
+    return {
+      name,
+      query,
+      parameters,
+      variables: {
+        [`after${name}`]: options.after,
+        [`first${name}`]: options.first,
+        [`orderBy${name}`]: options.orderBy,
+        [`where${name}`]: options.where,
+      },
+    };
+  }
+
+  private static normalizeFields<T>(fields: PartialBoolean<T>): string {
+    return Object.entries(fields)
+      .reduce((out, [key, value]: any) => {
+        out.push(value === true ? key : `${key}{${AbstractClient.normalizeFields(value)}}`);
+        return out;
+      }, <string[]>[])
+      .join(",");
+  }
+}
+
+type __InternalOptions<T, R> = T & {
+  name: string;
+  entity: string;
+  fields: PartialBoolean<R>;
+};
+
+export type ByIdOptions = { id: ID };
+export type ByArray<OrderBy extends string = "", Where extends object = {}> = {
+  limit?: Int;
+  offset?: Int;
+  orderBy?: `${OrderBy}_${"ASC" | "DESC"}`[];
+  where?: Where;
+};
+export type ByConnection<OrderBy extends string = "", Where extends object = {}> = {
+  after?: string;
+  first?: Int;
+  orderBy: OrderBy[];
+  where?: Where;
+};
diff --git a/packages/graphql_client/src/clients/by_id_queries.ts b/packages/graphql_client/src/clients/by_id_queries.ts
new file mode 100644
index 0000000000..5840055cc5
--- /dev/null
+++ b/packages/graphql_client/src/clients/by_id_queries.ts
@@ -0,0 +1,41 @@
+import { FitType, ID, PartialBoolean } from "../types";
+import type { ListQueries } from "./list_queries";
+
+export const BY_ID_QUERIES = {
+  nodes: "nodeById",
+  accounts: "accountById",
+  burnTransactions: "burnTransactionById",
+  cities: "cityById",
+  contractBillReports: "contractBillReportById",
+  contractResources: "contractResourcesById",
+  countries: "countryById",
+  entityProofs: "entityProofById",
+  farmingPolicies: "farmingPolicyById",
+  farms: "farmById",
+  historicalBalances: "historicalBalanceById",
+  interfaces: "interfacesById",
+  locations: "locationById",
+  mintTransactions: "mintTransactionById",
+  nameContracts: "nameContractById",
+  nodeContracts: "nodeContractById",
+  nodeResourcesTotals: "nodeResourcesTotalById",
+  nruConsumptions: "nruConsumptionById",
+  pricingPolicies: "pricingPolicyById",
+  publicConfigs: "publicConfigById",
+  publicIps: "publicIpById",
+  refundTransactions: "refundTransactionById",
+  rentContracts: "rentContractById",
+  solutionProviders: "solutionProviderById",
+  transfers: "transferById",
+  twins: "twinById",
+  uptimeEvents: "uptimeEventById",
+} as const;
+
+export type ByIdQueries = {
+  [K in keyof ListQueries as K extends keyof typeof BY_ID_QUERIES ? (typeof BY_ID_QUERIES)[K] : K]: <
+    T extends PartialBoolean<ReturnType<ListQueries[K]> extends Promise<Array<infer Q>> ? Q : unknown>,
+  >(
+    id: ID,
+    fields: T,
+  ) => ReturnType<ListQueries[K]> extends Promise<Array<infer Q>> ? Promise<FitType<T, Q>> : Promise<unknown>;
+};
diff --git a/packages/graphql_client/src/clients/client.ts b/packages/graphql_client/src/clients/client.ts
new file mode 100644
index 0000000000..4d86aa6947
--- /dev/null
+++ b/packages/graphql_client/src/clients/client.ts
@@ -0,0 +1,136 @@
+import { AbstractClient, RequestOptions } from "./abstract_client";
+import { BY_ID_QUERIES, ByIdQueries } from "./by_id_queries";
+import { CONNECTION_QUERIES, ConnectionQueries } from "./connection_queries";
+import { LIST_QUERIES, ListQueries } from "./list_queries";
+
+export enum Networks {
+  Dev = "dev",
+  Test = "test",
+  Qa = "qa",
+  Main = "main",
+  Custom = "custom",
+}
+
+type _Merge = ListQueries & ByIdQueries & ConnectionQueries;
+
+export type MergableQuery = {
+  [K in keyof _Merge]?: Parameters<_Merge[K]>;
+};
+
+export class TFGridGqlClient extends AbstractClient {
+  private readonly __uri: string;
+
+  constructor(network: Networks, url?: string) {
+    super();
+
+    if (network === Networks.Custom && url) {
+      this.__uri = url;
+    } else {
+      this.__uri =
+        network === Networks.Main ? "https://graphql.grid.tf/graphql" : `https://graphql.${network}.grid.tf/graphql`;
+    }
+  }
+
+  protected async _request<T>(options: RequestOptions): Promise<T> {
+    const { name, parameters, query, variables } = options;
+    const p = parameters && parameters.length ? `(${parameters.join(", ")})` : "";
+    const res = await fetch(this.__uri, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({
+        query: `
+          query TFGridClientQuery${p} {
+            ${query}
+          }
+        `,
+        variables,
+      }),
+    });
+    const { data } = await res.json();
+    return name ? data[name] : data;
+  }
+
+  public merge<T extends MergableQuery>(queries: T) {
+    const options: RequestOptions[] = [];
+    for (const query in queries) {
+      options.push(this[`__${query}` as any].apply(this, queries[query]));
+    }
+
+    const mergedOptions = options.reduce(
+      (o, { parameters, query, variables }) => {
+        o.parameters = [...o.parameters, ...parameters];
+        o.query += ` ${query}`;
+        o.variables = { ...o.variables, ...variables };
+        return o;
+      },
+      {
+        name: null as any,
+        parameters: [],
+        query: "",
+        variables: {},
+      } as RequestOptions,
+    );
+
+    return this._request<NormalizeMerge<T>>(mergedOptions);
+  }
+}
+
+type NormalizeMerge<T> = {
+  [K in keyof T]: K extends keyof ListQueries
+    ? ReturnType<ListQueries[K]> extends Promise<Array<infer Q>>
+      ? Q[]
+      : unknown
+    : K extends keyof ByIdQueries
+    ? ReturnType<ByIdQueries[K]> extends Promise<infer Q>
+      ? Q
+      : unknown
+    : K extends keyof ConnectionQueries
+    ? ReturnType<ConnectionQueries[K]> extends Promise<infer Q>
+      ? Q
+      : unknown
+    : unknown;
+};
+
+export interface TFGridGqlClient extends ListQueries, ByIdQueries, ConnectionQueries {}
+
+for (const [entity, query] of Object.entries(LIST_QUERIES)) {
+  Object.defineProperty(TFGridGqlClient.prototype, `__${query}`, {
+    value(this: TFGridGqlClient, fields: any, options: any) {
+      return this._list({ name: query, entity, fields, ...options });
+    },
+  });
+
+  Object.defineProperty(TFGridGqlClient.prototype, query, {
+    value(this: TFGridGqlClient, fields: any, options: any) {
+      return this._request(this[`__${query}`](fields, options));
+    },
+  });
+}
+
+for (const query of Object.values(BY_ID_QUERIES)) {
+  Object.defineProperty(TFGridGqlClient.prototype, `__${query}`, {
+    value(this: TFGridGqlClient, id: any, fields: any) {
+      return this._byId(id, fields, query);
+    },
+  });
+
+  Object.defineProperty(TFGridGqlClient.prototype, query, {
+    value(this: TFGridGqlClient, id: any, fields: any) {
+      return this._request(this[`__${query}`](id, fields));
+    },
+  });
+}
+
+for (const query of Object.values(CONNECTION_QUERIES)) {
+  Object.defineProperty(TFGridGqlClient.prototype, `__${query}`, {
+    value(this: TFGridGqlClient, fields: any, options: any) {
+      return this._connection(fields, options, query);
+    },
+  });
+
+  Object.defineProperty(TFGridGqlClient.prototype, query, {
+    value(this: TFGridGqlClient, fields: any, options: any) {
+      return this._request(this[`__${query}`](fields, options));
+    },
+  });
+}
diff --git a/packages/graphql_client/src/clients/connection_queries.ts b/packages/graphql_client/src/clients/connection_queries.ts
new file mode 100644
index 0000000000..0064f91a33
--- /dev/null
+++ b/packages/graphql_client/src/clients/connection_queries.ts
@@ -0,0 +1,95 @@
+import { FitType, Int, PartialBoolean } from "../types";
+import { ByArray } from "./abstract_client";
+import { ListQueries } from "./list_queries";
+
+export const CONNECTION_QUERIES = {
+  nodes: "nodesConnection",
+  accounts: "accountsConnection",
+  burnTransactions: "burnTransactionsConnection",
+  cities: "citiesConnection",
+  contractBillReports: "contractBillReportsConnection",
+  contractResources: "contractResourcesConnection",
+  countries: "countriesConnection",
+  entityProofs: "entityProofsConnection",
+  farmingPolicies: "farmingPoliciesConnection",
+  farms: "farmsConnection",
+  historicalBalances: "historicalBalancesConnection",
+  interfaces: "interfacesConnection",
+  locations: "locationsConnection",
+  mintTransactions: "mintTransactionsConnection",
+  nameContracts: "nameContractsConnection",
+  nodeContracts: "nodeContractsConnection",
+  nodeResourcesTotals: "nodeResourcesTotalsConnection",
+  nruConsumptions: "nruConsumptionsConnection",
+  pricingPolicies: "pricingPoliciesConnection",
+  publicConfigs: "publicConfigsConnection",
+  publicIps: "publicIpsConnection",
+  refundTransactions: "refundTransactionsConnection",
+  rentContracts: "rentContractsConnection",
+  solutionProviders: "solutionProvidersConnection",
+  transfers: "transfersConnection",
+  twins: "twinsConnection",
+  uptimeEvents: "uptimeEventsConnection",
+} as const;
+
+export const CONNECTION_ENTITY_QUERIES = {
+  nodesConnection: "Node",
+  accountsConnection: "Account",
+  burnTransactionsConnection: "BurnTransaction",
+  citiesConnection: "City",
+  contractBillReportsConnection: "ContractBillReport",
+  contractResourcesConnection: "ContractResources",
+  countriesConnection: "Country",
+  entityProofsConnection: "EntityProof",
+  farmingPoliciesConnection: "FarmingPolicy",
+  farmsConnection: "Farm",
+  historicalBalancesConnection: "HistoricalBalance",
+  interfacesConnection: "Interfaces",
+  locationsConnection: "Location",
+  mintTransactionsConnection: "MintTransaction",
+  nameContractsConnection: "NameContract",
+  nodeContractsConnection: "NodeContract",
+  nodeResourcesTotalsConnection: "NodeResourcesTotal",
+  nruConsumptionsConnection: "NruConsumption",
+  pricingPoliciesConnection: "PricingPolicy",
+  publicConfigsConnection: "PublicConfig",
+  publicIpsConnection: "PublicIp",
+  refundTransactionsConnection: "RefundTransaction",
+  rentContractsConnection: "RentContract",
+  solutionProvidersConnection: "SolutionProvider",
+  transfersConnection: "Transfer",
+  twinsConnection: "Twin",
+  uptimeEventsConnection: "UptimeEvent",
+} as const;
+
+interface __Connection<T> {
+  edges: {
+    node: T;
+    cursor: string;
+  };
+  pageInfo: {
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    startCursor: string;
+    endCursor: string;
+  };
+  totalCount: Int;
+}
+
+type __ConnectionOptions<O extends string, W> = {
+  after?: string;
+  first?: Int;
+  orderBy: `${O}_${"ASC" | "DESC"}`[];
+  where?: W;
+};
+
+type G<T> = T extends ByArray<infer O, infer W> ? __ConnectionOptions<O, W> : undefined;
+
+export type ConnectionQueries = {
+  [K in keyof ListQueries as K extends keyof typeof CONNECTION_QUERIES ? (typeof CONNECTION_QUERIES)[K] : K]: <
+    T extends PartialBoolean<__Connection<ReturnType<ListQueries[K]> extends Promise<Array<infer Q>> ? Q : unknown>>,
+  >(
+    fields: T,
+    options: G<Parameters<ListQueries[K]>[1]>,
+  ) => Promise<FitType<T, __Connection<ReturnType<ListQueries[K]> extends Promise<Array<infer Q>> ? Q : unknown>>>;
+};
diff --git a/packages/graphql_client/src/clients/list_queries.ts b/packages/graphql_client/src/clients/list_queries.ts
new file mode 100644
index 0000000000..180a00b11f
--- /dev/null
+++ b/packages/graphql_client/src/clients/list_queries.ts
@@ -0,0 +1,316 @@
+import {
+  AbstractWhere,
+  Account,
+  ArrayWhere,
+  BaseWhere,
+  BigInt,
+  BoolWhere,
+  BurnTransaction,
+  City,
+  ContractBillReport,
+  ContractResources,
+  ContractState,
+  Country,
+  DiscountLevel,
+  EntityProof,
+  EnumWhere,
+  Farm,
+  FarmCertification,
+  FarmingPolicy,
+  FitType,
+  HistoricalBalance,
+  Int,
+  Interfaces,
+  MintTransaction,
+  NameContract,
+  Node,
+  NodeCertification,
+  NodeContract,
+  NodeResourcesTotal,
+  NruConsumption,
+  NullWhere,
+  PartialBoolean,
+  PricingPolicy,
+  PublicConfig,
+  PublicIp,
+  RefundTransaction,
+  RentContract,
+  SolutionProvider,
+  StringWhere,
+  Transfer,
+  Twin,
+  UptimeEvent,
+} from "../types";
+import { ByArray } from "./abstract_client";
+
+export const LIST_QUERIES = {
+  Node: "nodes",
+  Account: "accounts",
+  BurnTransaction: "burnTransactions",
+  City: "cities",
+  ContractBillReport: "contractBillReports",
+  ContractResources: "contractResources",
+  Country: "countries",
+  EntityProof: "entityProofs",
+  FarmingPolicy: "farmingPolicies",
+  Farm: "farms",
+  HistoricalBalance: "historicalBalances",
+  Interfaces: "interfaces",
+  Location: "locations",
+  MintTransaction: "mintTransactions",
+  NameContract: "nameContracts",
+  NodeContract: "nodeContracts",
+  NodeResourcesTotal: "nodeResourcesTotals",
+  NruConsumption: "nruConsumptions",
+  PricingPolicy: "pricingPolicies",
+  PublicConfig: "publicConfigs",
+  PublicIp: "publicIps",
+  RefundTransaction: "refundTransactions",
+  RentContract: "rentContracts",
+  SolutionProvider: "solutionProviders",
+  Transfer: "transfers",
+  Twin: "twins",
+  UptimeEvent: "uptimeEvents",
+} as const;
+
+// prettier-ignore
+interface OrderBy {
+    Account: "id" | "wallet" | "balance";
+    HistoricalBalance: "id" | "account_id" | "account_wallet" | "account_balance" | "balance" | "timestamp";
+    Transfer: "id" | "from" | "to" | "amount" | "timestamp";
+    Entity: "id" | "gridVersion" | "entityID" | "name" | "country" | "city" | "accountID";
+    Twin: "id" | "gridVersion" | "twinID" | "accountID" | "ip";
+    EntityProof: "id" | "entityID" | "signature" | "twinRel_id" | "twinRel_gridVersion" | "twinRel_twinID" | "twinRel_accountID" | "twinRel_ip";
+    Farm: "id" | "gridVersion" | "farmID" | "name" | "twinID" | "pricingPolicyID" | "certification" | "stellarAddress" | "dedicatedFarm";
+    PublicIp: "id" | "farm_id" | "farm_gridVersion" | "farm_farmID" | "farm_name" | "farm_twinID" | "farm_pricingPolicyID" | "farm_certification" | "farm_stellarAddress" | "farm_dedicatedFarm" | "gateway" | "ip" | "contractId";
+    Node: "id" | "gridVersion" | "nodeID" | "farmID" | "twinID" | "location_id" | "location_longitude" | "location_latitude" | "country" | "city" | "publicConfig_id" | "publicConfig_ipv4" | "publicConfig_ipv6" | "publicConfig_gw4" | "publicConfig_gw6" | "publicConfig_domain" | "resourcesTotal_id" | "resourcesTotal_hru" | "resourcesTotal_sru" | "resourcesTotal_cru" | "resourcesTotal_mru" | "uptime" | "created" | "farmingPolicyId" | "certification" | "secure" | "virtualized" | "serialNumber" | "createdAt" | "updatedAt" | "connectionPrice";
+    NodeResourcesTotal: "id" | "node_id" | "node_gridVersion" | "node_nodeID" | "node_farmID" | "node_twinID" | "node_country" | "node_city" | "node_uptime" | "node_created" | "node_farmingPolicyId" | "node_certification" | "node_secure" | "node_virtualized" | "node_serialNumber" | "node_createdAt" | "node_updatedAt" | "node_connectionPrice" | "hru" | "sru" | "cru" | "mru";
+    Interfaces: "id" | "node_id" | "node_gridVersion" | "node_nodeID" | "node_farmID" | "node_twinID" | "node_country" | "node_city" | "node_uptime" | "node_created" | "node_farmingPolicyId" | "node_certification" | "node_secure" | "node_virtualized" | "node_serialNumber" | "node_createdAt" | "node_updatedAt" | "node_connectionPrice" | "name" | "mac" | "ips";
+    PublicConfig: "id" | "node_id" | "node_gridVersion" | "node_nodeID" | "node_farmID" | "node_twinID" | "node_country" | "node_city" | "node_uptime" | "node_created" | "node_farmingPolicyId" | "node_certification" | "node_secure" | "node_virtualized" | "node_serialNumber" | "node_createdAt" | "node_updatedAt" | "node_connectionPrice" | "ipv4" | "ipv6" | "gw4" | "gw6" | "domain";
+    Location: "id" | "longitude" | "latitude";
+    PricingPolicy: "id" | "gridVersion" | "pricingPolicyID" | "name" | "su_value" | "su_unit" | "cu_value" | "cu_unit" | "nu_value" | "nu_unit" | "ipu_value" | "ipu_unit" | "foundationAccount" | "certifiedSalesAccount" | "dedicatedNodeDiscount";
+    Country: "id" | "countryID" | "code" | "name" | "region" | "subregion" | "lat" | "long";
+    City: "id" | "cityID" | "countryID" | "name";
+    NodeContract: "id" | "gridVersion" | "contractID" | "twinID" | "nodeID" | "deploymentData" | "deploymentHash" | "numberOfPublicIPs" | "state" | "resourcesUsed_id" | "resourcesUsed_hru" | "resourcesUsed_sru" | "resourcesUsed_cru" | "resourcesUsed_mru" | "createdAt" | "solutionProviderID";
+    ContractResources: "id" | "contract_id" | "contract_gridVersion" | "contract_contractID" | "contract_twinID" | "contract_nodeID" | "contract_deploymentData" | "contract_deploymentHash" | "contract_numberOfPublicIPs" | "contract_state" | "contract_createdAt" | "contract_solutionProviderID" | "hru" | "sru" | "cru" | "mru";
+    NameContract: "id" | "gridVersion" | "contractID" | "twinID" | "name" | "state" | "createdAt" | "solutionProviderID";
+    RentContract: "id" | "gridVersion" | "contractID" | "twinID" | "nodeID" | "state" | "createdAt" | "solutionProviderID";
+    SolutionProvider: "id" | "solutionProviderID" | "description" | "link" | "approved";
+    NruConsumption: "id" | "contractID" | "timestamp" | "window" | "nru";
+    ContractBillReport: "id" | "contractID" | "discountReceived" | "amountBilled" | "timestamp";
+    FarmingPolicy: "id" | "gridVersion" | "farmingPolicyID" | "name" | "cu" | "su" | "nu" | "ipv4" | "minimalUptime" | "policyCreated" | "policyEnd" | "immutable" | "default" | "nodeCertification" | "farmCertification";
+    UptimeEvent: "id" | "nodeID" | "uptime" | "timestamp";
+    MintTransaction: "id" | "amount" | "target" | "block";
+    BurnTransaction: "id" | "block" | "amount" | "target";
+    RefundTransaction: "id" | "block" | "amount" | "target" | "txHash";
+}
+
+// prettier-ignore
+interface _W {
+    Node: 
+        BaseWhere<"gridVersion" |"nodeID" |"farmID" |"twinID" |"created" |"farmingPolicyId" | "connectionPrice", Int> &
+        BaseWhere<"uptime" | "createdAt" | "updatedAt", bigint> &
+        StringWhere<"id" | "country" | "city" | "serialNumber"> &
+        NullWhere<"country" | "city" | "uptime" | "certification" | "secure" | "virtualized" | "serialNumber" | "connectionPrice"> &
+        ArrayWhere<"interfaces", Where["Interfaces"]> &
+        EnumWhere<"certification", NodeCertification> &
+        BoolWhere<"secure" | "virtualized"> &
+        { location?: Where["Location"]; publicConfig?: Where["PublicConfig"]; resourcesTotal?: Where["NodeResourcesTotal"]; };
+
+    Account:
+        StringWhere<"id" | "wallet"> &
+        BaseWhere<"balance", bigint> &
+        ArrayWhere<"historicalBalances", Where["HistoricalBalance"]>;
+
+    BurnTransaction:
+        StringWhere<"id" | "target"> &
+        BaseWhere<"block", Int> &
+        BaseWhere<"amount", bigint>;
+
+    City:
+        StringWhere<"id" | "name"> &
+        BaseWhere<"cityID" | "countryID", Int>;
+
+    ContractBillReport:
+        StringWhere<"id"> &
+        BaseWhere<"contractID" | "amountBilled" | "timestamp", bigint> &
+        EnumWhere<"discountReceived", DiscountLevel>;
+
+    ContractResources:
+        StringWhere<"id"> &
+        BaseWhere<"hru" | "src" | "cru" | "mru", bigint> &
+        { contract?: Where["NodeContract"]; };
+
+    Country:
+        StringWhere<"id" | "code" | "name" | "region" | "subregion" | "lat" | "long"> &
+        BaseWhere<"countryID", Int> &
+        NullWhere<"lat" | "long">;
+
+    EntityProof:
+        StringWhere<"id" | "signature"> &
+        BaseWhere<"entityID", Int> &
+        { twinRel?: Where["Twin"] };
+
+    FarmingPolicy:
+        StringWhere<"id" | "name"> &
+        BaseWhere<"gridVersion" | "farmingPolicyID" | "cu" | "su" | "nu" | "ipv4" | "minimalUptime" | "policyCreated" | "policyEnd", Int> &
+        NullWhere<"name" | "cu" | "su" | "nu" | "ipv4" | "minimalUptime" | "policyCreated" | "policyEnd" | "immutable" | "default" | "nodeCertification" | "armCertification"> & 
+        BoolWhere<"immutable" | "default"> &
+        EnumWhere<"nodeCertification", NodeCertification> &
+        EnumWhere<"farmCertification", FarmCertification>;
+
+    Farm:
+        StringWhere<"id" | "name" | "stellarAddress"> &
+        BaseWhere<"gridVersion" | "farmID" | "twinID" | "pricingPolicyID", Int> &
+        NullWhere<"certification" | "stellarAddress" | "dedicatedFarm"> &
+        ArrayWhere<"publicIPs", Where["PublicIp"]> &
+        BoolWhere<"dedicatedFarm"> &
+        EnumWhere<"certification", FarmCertification>;
+
+    HistoricalBalance:
+        StringWhere<"id"> &
+        BaseWhere<"balance" | "timestamp", bigint> &
+        { account?: Where["Account"] };
+
+    Interfaces:
+        StringWhere<"id" | "name" | "mac" | "ips"> &
+        { node?: Where["Node"] };
+
+    Location: StringWhere<"id" | "longitude" | "latitude">;
+
+    MintTransaction:
+        StringWhere<"id" | "target"> &
+        BaseWhere<"amount", bigint> &
+        BaseWhere<"block", Int>;
+
+    NameContract:
+        StringWhere<"id" | "name"> &
+        BaseWhere<"gridVersion" | "twinID", Int> &
+        BaseWhere<"contractID", bigint> &
+        EnumWhere<"state", ContractState>;
+
+    NodeContract:
+        StringWhere<"id" | "deploymentData" | "deploymentHash"> &
+        BaseWhere<"gridVersion" | "twinID" | "nodeID" | "numberOfPublicIPs" | "solutionProviderID", Int> &
+        BaseWhere<"contractID" | "createdAt", bigint> &
+        EnumWhere<"state", ContractState> &
+        NullWhere<"resourcesUsed" | "solutionProviderID"> &
+        { resourcesUsed?: Where["ContractResources"] };
+
+    NodeResourcesTotal:
+        StringWhere<"id"> &
+        BaseWhere<"hru" | "sru" | "cru" | "mru", bigint> &
+        { node?: Where["Node"] };
+
+    NruConsumption:
+        StringWhere<"id"> &
+        BaseWhere<"contractID" | "timestamp" | "window" | "nru", bigint> &
+        NullWhere<"window" | "nru">;
+
+    PricingPolicy:
+        StringWhere<"id" | "name" | "foundationAccount" | "certifiedSalesAccount"> &
+        BaseWhere<"gridVersion" | "pricingPolicyID" | "dedicatedNodeDiscount", Int> &
+        { su?: Where["PricingPolicy"], cu?: Where["PricingPolicy"], nu?: Where["PricingPolicy"], ipu?: Where["PricingPolicy"] };
+
+    PublicConfig:
+        StringWhere<"id" | "ipv4" | "ipv6" | "gw4" | "gw6" | "domain"> &
+        NullWhere<"ipv4" | "ipv6" | "gw4" | "gw6" | "domain"> &
+        { node?: Where["Node"] };
+
+    PublicIp:
+        StringWhere<"id" | "gateway" | "ip"> &
+        BaseWhere<"contractId", bigint> &
+        { farm?: Where["Farm"] };
+    
+    RefundTransaction:
+        StringWhere<"id" | "target" | "txHash"> &
+        BaseWhere<"block", Int> &
+        BaseWhere<"amount", bigint>;
+
+    RentContract:
+        StringWhere<"id"> &
+        BaseWhere<"gridVersion" | "twinID" | "nodeID" | "solutionProviderID", Int> &
+        BaseWhere<"contractID" | "createdAt", bigint> &
+        EnumWhere<"state", ContractState> &
+        NullWhere<"solutionProviderID">;
+
+    SolutionProvider:
+        StringWhere<"id" | "description" | "link"> &
+        BaseWhere<"solutionProviderID", bigint> &
+        BoolWhere<"approved"> &
+        NullWhere<"providers">;
+
+    Transfer:
+        StringWhere<"id" | "from" | "to"> &
+        BaseWhere<"amount" | "timestamp", bigint>;
+
+    Twin:
+        StringWhere<"id" | "accountID" | "ip"> &
+        BaseWhere<"gridVersion" | "twinID", Int>;
+    
+    UptimeEvent:
+        StringWhere<"id"> &
+        BaseWhere<"nodeID", Int> &
+        BaseWhere<"uptime" | "timestamp", bigint>;
+}
+
+interface Where {
+  Node: AbstractWhere<_W["Node"]>;
+  Account: AbstractWhere<_W["Account"]>;
+  BurnTransaction: AbstractWhere<_W["BurnTransaction"]>;
+  City: AbstractWhere<_W["City"]>;
+  ContractBillReport: AbstractWhere<_W["ContractBillReport"]>;
+  ContractResources: AbstractWhere<_W["ContractResources"]>;
+  Country: AbstractWhere<_W["Country"]>;
+  EntityProof: AbstractWhere<_W["EntityProof"]>;
+  FarmingPolicy: AbstractWhere<_W["FarmingPolicy"]>;
+  Farm: AbstractWhere<_W["Farm"]>;
+  HistoricalBalance: AbstractWhere<_W["HistoricalBalance"]>;
+  Interfaces: AbstractWhere<_W["Interfaces"]>;
+  Location: AbstractWhere<_W["Location"]>;
+  MintTransaction: AbstractWhere<_W["MintTransaction"]>;
+  NameContract: AbstractWhere<_W["NameContract"]>;
+  NodeContract: AbstractWhere<_W["NodeContract"]>;
+  NodeResourcesTotal: AbstractWhere<_W["NodeResourcesTotal"]>;
+  NruConsumption: AbstractWhere<_W["NruConsumption"]>;
+  PricingPolicy: AbstractWhere<_W["PricingPolicy"]>;
+  PublicConfig: AbstractWhere<_W["PublicConfig"]>;
+  PublicIp: AbstractWhere<_W["PublicIp"]>;
+  RefundTransaction: AbstractWhere<_W["RefundTransaction"]>;
+  RentContract: AbstractWhere<_W["RentContract"]>;
+  SolutionProvider: AbstractWhere<_W["SolutionProvider"]>;
+  Transfer: AbstractWhere<_W["Transfer"]>;
+  Twin: AbstractWhere<_W["Twin"]>;
+  UptimeEvent: AbstractWhere<_W["UptimeEvent"]>;
+}
+
+// prettier-ignore
+export interface ListQueries {
+  nodes<T extends PartialBoolean<Node>>(fields: T, options?: ByArray<OrderBy["Node"], Where["Node"]>): Promise<FitType<T, Node>[]>;
+  accounts<T extends PartialBoolean<Account>>(fields: T,options?: ByArray<OrderBy["Account"], Where["Account"]>): Promise<FitType<T, Account>[]>;
+  burnTransactions<T extends PartialBoolean<BurnTransaction>>(fields: T,options?: ByArray<OrderBy["BurnTransaction"], Where["BurnTransaction"]>): Promise<FitType<T, BurnTransaction>[]>;
+  cities<T extends PartialBoolean<City>>(fields: T, options?: ByArray<OrderBy["City"], Where["City"]>): Promise<FitType<T, City>[]>;
+  contractBillReports<T extends PartialBoolean<ContractBillReport>>(fields: T,options?: ByArray<OrderBy["ContractBillReport"], Where["ContractBillReport"]>): Promise<FitType<T, ContractBillReport>[]>;
+  contractResources<T extends PartialBoolean<ContractResources>>(fields: T,options?: ByArray<OrderBy["ContractResources"], Where["ContractResources"]>): Promise<FitType<T, ContractResources>[]>;
+  countries<T extends PartialBoolean<Country>>(fields: T,options?: ByArray<OrderBy["Country"], Where["Country"]>): Promise<FitType<T, Country>[]>;
+  entityProofs<T extends PartialBoolean<EntityProof>>(fields: T,options?: ByArray<OrderBy["EntityProof"], Where["EntityProof"]>): Promise<FitType<T, EntityProof>[]>;
+  farmingPolicies<T extends PartialBoolean<FarmingPolicy>>(fields: T,options?: ByArray<OrderBy["FarmingPolicy"], Where["FarmingPolicy"]>): Promise<FitType<T, FarmingPolicy>[]>;
+  farms<T extends PartialBoolean<Farm>>(fields: T, options?: ByArray<OrderBy["Farm"], Where["Farm"]>): Promise<FitType<T, Farm>[]>;
+  historicalBalances<T extends PartialBoolean<HistoricalBalance>>(fields: T,options?: ByArray<OrderBy["HistoricalBalance"], Where["HistoricalBalance"]>): Promise<FitType<T, HistoricalBalance>[]>;
+  interfaces<T extends PartialBoolean<Interfaces>>(fields: T,options?: ByArray<OrderBy["Interfaces"], Where["Interfaces"]>): Promise<FitType<T, Interfaces>[]>;
+  locations<T extends PartialBoolean<Location>>(fields: T,options?: ByArray<OrderBy["Location"], Where["Location"]>): Promise<FitType<T, Location>[]>;
+  mintTransactions<T extends PartialBoolean<MintTransaction>>(fields: T,options?: ByArray<OrderBy["MintTransaction"], Where["MintTransaction"]>): Promise<FitType<T, MintTransaction>[]>;
+  nameContracts<T extends PartialBoolean<NameContract>>(fields: T,options?: ByArray<OrderBy["NameContract"], Where["NameContract"]>): Promise<FitType<T, NameContract>[]>;
+  nodeContracts<T extends PartialBoolean<NodeContract>>(fields: T,options?: ByArray<OrderBy["NodeContract"], Where["NodeContract"]>): Promise<FitType<T, NodeContract>[]>;
+  nodeResourcesTotals<T extends PartialBoolean<NodeResourcesTotal>>(fields: T,options?: ByArray<OrderBy["NodeResourcesTotal"], Where["NodeResourcesTotal"]>): Promise<FitType<T, NodeResourcesTotal>[]>;
+  nruConsumptions<T extends PartialBoolean<NruConsumption>>(fields: T,options?: ByArray<OrderBy["NruConsumption"], Where["NruConsumption"]>): Promise<FitType<T, NruConsumption>[]>;
+  pricingPolicies<T extends PartialBoolean<PricingPolicy>>(fields: T,options?: ByArray<OrderBy["PricingPolicy"], Where["PricingPolicy"]>): Promise<FitType<T, PricingPolicy>[]>;
+  publicConfigs<T extends PartialBoolean<PublicConfig>>(fields: T,options?: ByArray<OrderBy["PublicConfig"], Where["PublicConfig"]>): Promise<FitType<T, PublicConfig>[]>;
+  publicIps<T extends PartialBoolean<PublicIp>>(fields: T,options?: ByArray<OrderBy["PublicIp"], Where["PublicIp"]>): Promise<FitType<T, PublicIp>[]>;
+  refundTransactions<T extends PartialBoolean<RefundTransaction>>(fields: T,options?: ByArray<OrderBy["RefundTransaction"], Where["RefundTransaction"]>): Promise<FitType<T, RefundTransaction>[]>;
+  rentContracts<T extends PartialBoolean<RentContract>>(fields: T,options?: ByArray<OrderBy["RentContract"], Where["RentContract"]>): Promise<FitType<T, RentContract>[]>;
+  solutionProviders<T extends PartialBoolean<SolutionProvider>>(fields: T,options?: ByArray<OrderBy["SolutionProvider"], Where["SolutionProvider"]>): Promise<FitType<T, SolutionProvider>[]>;
+  transfers<T extends PartialBoolean<Transfer>>(fields: T,options?: ByArray<OrderBy["Transfer"], Where["Transfer"]>): Promise<FitType<T, Transfer>[]>;
+  twins<T extends PartialBoolean<Twin>>(fields: T, options?: ByArray<OrderBy["Twin"], Where["Twin"]>): Promise<FitType<T, Twin>[]>;
+  uptimeEvents<T extends PartialBoolean<UptimeEvent>>(fields: T,options?: ByArray<OrderBy["UptimeEvent"], Where["UptimeEvent"]>): Promise<FitType<T, UptimeEvent>[]>;
+}
diff --git a/packages/graphql_client/src/index.ts b/packages/graphql_client/src/index.ts
new file mode 100644
index 0000000000..9bdb006dbb
--- /dev/null
+++ b/packages/graphql_client/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./types";
+export { TFGridGqlClient as default, Networks } from "./clients/client";
diff --git a/packages/graphql_client/src/types/index.ts b/packages/graphql_client/src/types/index.ts
new file mode 100644
index 0000000000..c36abcc558
--- /dev/null
+++ b/packages/graphql_client/src/types/index.ts
@@ -0,0 +1,340 @@
+export type ID = number | string;
+export type BigInt = number;
+export type Int = number;
+export type FarmCertification = "NotCertified" | "Gold";
+export type NodeCertification = "Diy" | "Certified";
+export type DiscountLevel = "None" | "Default" | "Bronze" | "Silver" | "Gold";
+export type ContractState = "Created" | "Deleted" | "OutOfFunds" | "GracePeriod";
+
+export type PartialBoolean<T> = {
+  [K in keyof T]?: T[K] extends Array<infer Q>
+    ? Q extends object
+      ? PartialBoolean<Q>
+      : true
+    : T[K] extends object
+    ? PartialBoolean<T[K]>
+    : true;
+};
+
+type __BaseWhere<T> = { eq: T; not_eq: T; gt: T; gte: T; lt: T; lte: T; in: T[]; not_in: T[]; }; // prettier-ignore
+type __StringWhere = "contains" | "not_contains" | "startsWith" | "not_startsWith" | "endsWith" | "not_endsWith"; // prettier-ignore
+type __ArrayWhere = "none" | "every" | "some";
+type __EnumWhere<T> = { eq: T; not_eq: T; in: T[]; not_in: T[] };
+type __BoolWhere = "eq" | "not_eq";
+export type AbstractWhere<T> = {
+  AND?: AbstractWhere<T>;
+  OR?: AbstractWhere<T>;
+} & T;
+
+export type BaseWhere<N extends string, T> = {
+  [K in keyof __BaseWhere<T> as K extends string ? `${N}_${K}` : K]?: __BaseWhere<T>[K];
+};
+
+export type StringWhere<N extends string> = BaseWhere<N, string> & {
+  [K in __StringWhere as K extends string ? `${N}_${K}` : K]?: string;
+};
+
+export type ArrayWhere<N extends string, T> = {
+  [K in __ArrayWhere as K extends string ? `${N}_${K}` : K]?: T;
+};
+
+export type NullWhere<N extends string> = {
+  [K in N as K extends string ? `${K}_isNull` : K]?: boolean;
+};
+
+export type EnumWhere<N extends string, E> = {
+  [K in keyof __EnumWhere<E> as K extends string ? `${N}_${K}` : K]?: __EnumWhere<E>[K];
+};
+
+export type BoolWhere<N extends string> = {
+  [K in __BoolWhere as K extends string ? `${N}_${K}` : K]?: boolean;
+};
+
+export type FitType<T, R> = {
+  [K in keyof T]: K extends keyof R ? (T[K] extends object ? FitType<T[K], R[K]> : R[K]) : unknown;
+};
+
+export interface Account {
+  id: ID;
+  wallet: string;
+  balance: bigint;
+  historicalBalances: HistoricalBalance[];
+}
+
+export interface HistoricalBalance {
+  id: ID;
+  account: Account;
+  balance: bigint;
+  timestamp: bigint;
+}
+
+export interface BurnTransaction {
+  id: ID;
+  block: Int;
+  amount: bigint;
+  target: string;
+}
+
+export interface City {
+  id: ID;
+  cityID: Int;
+  countryID: Int;
+  name: string;
+}
+
+export interface ContractBillReport {
+  id: ID;
+  contractID: bigint;
+  discountReceived: DiscountLevel;
+  amountBilled: bigint;
+  timestamp: bigint;
+}
+
+export interface ContractResources {
+  id: ID;
+  contract: NodeContract;
+  hru: bigint;
+  sru: bigint;
+  cru: bigint;
+  mru: bigint;
+}
+
+export interface NodeContract {
+  id: ID;
+  gridVersion: Int;
+  contractID: bigint;
+  twinID: Int;
+  nodeID: Int;
+  deploymentData: string;
+  deploymentHash: string;
+  numberOfPublicIPs: Int;
+  state: ContractState;
+  resourcesUsed?: ContractResources;
+  createdAt: bigint;
+  solutionProviderID?: Int;
+}
+
+export interface Country {
+  id: ID;
+  countryID: Int;
+  code: string;
+  name: string;
+  region: string;
+  subregion: string;
+  lat?: string;
+  long?: string;
+}
+
+export interface Entity {
+  id: ID;
+  gridVersion: Int;
+  entityID: Int;
+  name: string;
+  country?: string;
+  city?: string;
+  accountID: string;
+}
+
+export interface EntityProof {
+  id: ID;
+  entityID: Int;
+  signature: string;
+  twinRel: Twin;
+}
+
+export interface Twin {
+  id: ID;
+  gridVersion: Int;
+  twinID: Int;
+  accountID: string;
+  ip: string;
+}
+
+export interface Farm {
+  id: ID;
+  gridVersion: Int;
+  farmID: Int;
+  name: string;
+  twinID: Int;
+  pricingPolicyID: Int;
+  certification?: FarmCertification;
+  publicIPs: PublicIp[];
+  stellarAddress?: string;
+  dedicatedFarm?: boolean;
+}
+
+export interface PublicIp {
+  id: ID;
+  farm: Farm;
+  gateway: string;
+  ip: string;
+  contractId: bigint;
+}
+
+export interface FarmingPolicy {
+  id: ID;
+  gridVersion: Int;
+  farmingPolicyID: Int;
+  name?: string;
+  cu?: Int;
+  su?: Int;
+  nu?: Int;
+  ipv4?: Int;
+  minimalUptime?: Int;
+  policyCreated?: Int;
+  policyEnd?: Int;
+  immutable?: boolean;
+  default?: boolean;
+  nodeCertification?: NodeCertification;
+  farmCertification?: FarmCertification;
+}
+
+export interface Interfaces {
+  id: ID;
+  node: Node;
+  name: string;
+  mac: string;
+  ips: string;
+}
+
+export interface Node {
+  id: ID;
+  gridVersion: Int;
+  nodeID: Int;
+  farmID: Int;
+  twinID: Int;
+  location: Location;
+  country?: string;
+  city?: string;
+  publicConfig?: PublicConfig;
+  resourcesTotal?: NodeResourcesTotal;
+  uptime?: bigint;
+  created: Int;
+  farmingPolicyId: Int;
+  interfaces: Interfaces[];
+  certification?: NodeCertification;
+  secure?: boolean;
+  virtualized?: boolean;
+  serialNumber?: string;
+  createdAt: bigint;
+  updatedAt: bigint;
+  connectionPrice?: Int;
+}
+
+export interface Location {
+  id: ID;
+  longitude: string;
+  latitude: string;
+}
+
+export interface PublicConfig {
+  id: ID;
+  node: Node;
+  ipv4?: string;
+  ipv6?: string;
+  gw4?: string;
+  gw6?: string;
+  domain?: string;
+}
+
+export interface NodeResourcesTotal {
+  id: ID;
+  node: Node;
+  hru: bigint;
+  sru: bigint;
+  cru: bigint;
+  mru: bigint;
+}
+
+export interface MintTransaction {
+  id: ID;
+  amount: bigint;
+  target: string;
+  block: Int;
+}
+
+export interface NameContract {
+  id: ID;
+  gridVersion: Int;
+  contractID: bigint;
+  twinID: Int;
+  name: string;
+  state: ContractState;
+  createdAt: bigint;
+  solutionProviderID?: Int;
+}
+
+export interface NruConsumption {
+  id: ID;
+  contractID: bigint;
+  timestamp: bigint;
+  window?: bigint;
+  nru?: bigint;
+}
+
+export interface PricingPolicy {
+  id: ID;
+  gridVersion: Int;
+  pricingPolicyID: Int;
+  name: string;
+  su: Policy;
+  cu: Policy;
+  nu: Policy;
+  ipu: Policy;
+  foundationAccount: string;
+  certifiedSalesAccount: string;
+  dedicatedNodeDiscount: Int;
+}
+
+export interface Policy {
+  value?: Int;
+  unit?: string;
+}
+
+export interface RefundTransaction {
+  id: ID;
+  block: Int;
+  amount: bigint;
+  target: string;
+  txHash: string;
+}
+
+export interface RentContract {
+  id: ID;
+  gridVersion: Int;
+  contractID: bigint;
+  twinID: Int;
+  nodeID: Int;
+  state: ContractState;
+  createdAt: bigint;
+  solutionProviderID?: Int;
+}
+
+export interface SolutionProvider {
+  id: ID;
+  solutionProviderID: bigint;
+  description: string;
+  link: string;
+  approved: boolean;
+  providers?: Array<Provider | undefined>;
+}
+
+export interface Provider {
+  who: string;
+  take: Int;
+}
+
+export interface Transfer {
+  id: ID;
+  from: string;
+  to: string;
+  amount: bigint;
+  timestamp: bigint;
+}
+
+export interface UptimeEvent {
+  id: ID;
+  nodeID: Int;
+  uptime: bigint;
+  timestamp: bigint;
+}
diff --git a/packages/graphql_client/src/utils/index.ts b/packages/graphql_client/src/utils/index.ts
new file mode 100644
index 0000000000..926603f5b7
--- /dev/null
+++ b/packages/graphql_client/src/utils/index.ts
@@ -0,0 +1,26 @@
+import { ValidationError } from "@threefold/types";
+type AssertReturn = void | never;
+function panic(message: string): never {
+  throw new Error(message);
+}
+
+/**
+ * @description
+ * Assertion
+ */
+export function assertHasField(fields: any): AssertReturn {
+  if (Object.keys(fields).length === 0) {
+    throw new ValidationError(`[Object] must contain at least 1 field.`);
+  }
+  for (const key in fields) {
+    if (fields[key] instanceof Object) assertHasField(fields[key]);
+    else if (fields[key] !== true)
+      throw new ValidationError(`Expected "${key}" of type [true | string] but got [${typeof fields[key]}]`);
+  }
+}
+
+export function assertID(value: any): AssertReturn {
+  if (value === "" || value === undefined || value === null) {
+    throw new ValidationError(`Expected a valid [ID] but got [${value}].`);
+  }
+}
diff --git a/packages/graphql_client/tsconfig.json b/packages/graphql_client/tsconfig.json
new file mode 100644
index 0000000000..bb30c987ff
--- /dev/null
+++ b/packages/graphql_client/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ES2015",
+    "moduleResolution": "node",
+    "baseUrl": "./src",
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noImplicitAny": false
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "tests"]
+}
diff --git a/packages/grid_client/package.json b/packages/grid_client/package.json
index cac026df85..a5cc2dc418 100644
--- a/packages/grid_client/package.json
+++ b/packages/grid_client/package.json
@@ -35,7 +35,9 @@
     "typescript": "^4.7.4",
     "url-join": "^4.0.1",
     "url-parse": "^1.5.10",
-    "uuid4": "^2.0.2"
+    "uuid4": "^2.0.2",
+    "await-lock": "^2.2.2",
+    "@threefold/types": "1.0.0"
   },
   "devDependencies": {
     "@types/jest": "^29.2.6",
diff --git a/packages/grid_client/scripts/add_node_to_network.ts b/packages/grid_client/scripts/add_node_to_network.ts
index 670d1e87a2..b5a0ce346c 100644
--- a/packages/grid_client/scripts/add_node_to_network.ts
+++ b/packages/grid_client/scripts/add_node_to_network.ts
@@ -1,18 +1,28 @@
+import { NetworkAddNodeModel } from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
-async function main() {
-  const grid3 = await getClient();
+async function addNode(client, node) {
   try {
-    // if the network is not created, it will create one and add this node to it.
-    const res = await grid3.networks.addNode({
-      name: "wedtest",
-      ipRange: "10.249.0.0/16",
-      nodeId: 14,
-    });
+    const res = await client.networks.addNode(node);
+    log("================= Adding node =================");
     log(res);
-  } finally {
-    grid3.disconnect();
+    log("================= Adding node =================");
+  } catch (error) {
+    log("Error while adding node " + error);
   }
 }
+
+async function main() {
+  const grid3 = await getClient();
+  const node: NetworkAddNodeModel = {
+    name: "wedtest",
+    ipRange: "10.249.0.0/16",
+    nodeId: 14,
+  };
+  // if the network is not created, it will create one and add this node to it.
+  await addNode(grid3, node);
+
+  await grid3.disconnect();
+}
 main();
diff --git a/packages/grid_client/scripts/add_worker.ts b/packages/grid_client/scripts/add_worker.ts
index 9b5623586a..24ab747677 100644
--- a/packages/grid_client/scripts/add_worker.ts
+++ b/packages/grid_client/scripts/add_worker.ts
@@ -4,6 +4,39 @@ import { log } from "./utils";
 
 // Please run kubernetes script first before running this one to create the cluster.
 
+async function addWorker(client, worker) {
+  try {
+    const res = await client.k8s.add_worker(worker);
+    log("================= Adding worker =================");
+    log(res);
+    log("================= Adding worker =================");
+  } catch (error) {
+    log("Error while adding the worker" + error);
+  }
+}
+
+async function getWorker(client, worker) {
+  try {
+    const res = await client.k8s.getObj(worker);
+    log("================= Getting worker information =================");
+    log(res);
+    log("================= Getting worker information =================");
+  } catch (error) {
+    log("Error while getting the worker" + error);
+  }
+}
+
+async function deleteWorker(client, worker) {
+  try {
+    const res = await client.k8s.delete_worker(worker);
+    log("================= Deleting the worker =================");
+    log(res);
+    log("================= Deleting the worker =================");
+  } catch (error) {
+    log("Error while deleting the worker" + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
@@ -14,28 +47,27 @@ async function main() {
     farmId: 1,
   };
 
-  // create k8s node Object
-  const worker = new AddWorkerModel();
-  worker.deployment_name = "testk8s";
-  worker.name = "worker2";
-  worker.node_id = +(await grid3.capacity.filterNodes(workerQueryOptions))[0].nodeId;
-  worker.cpu = 2;
-  worker.memory = 1024;
-  worker.rootfs_size = 0;
-  worker.disk_size = 8;
-  worker.public_ip = false;
-  worker.planetary = true;
-
-  const res = await grid3.k8s.add_worker(worker);
-  log(res);
-
-  // get the deployment
-  const l = await grid3.k8s.getObj(worker.deployment_name);
-  log(l);
-
-  // // delete
-  // const d = await grid3.k8s.delete_worker({name: worker.name, deployment_name:worker.deployment_name});
-  // log(d);
+  const worker: AddWorkerModel = {
+    deployment_name: "testk8s",
+    name: "worker2",
+    node_id: +(await grid3.capacity.filterNodes(workerQueryOptions))[0].nodeId,
+    cpu: 2,
+    memory: 1024,
+    rootfs_size: 0,
+    disk_size: 8,
+    public_ip: false,
+    public_ip6: false,
+    planetary: true,
+  };
+
+  //Add Worker
+  await addWorker(grid3, worker);
+
+  //Get worker information
+  await getWorker(grid3, worker.deployment_name);
+
+  //Uncomment the line below to delete the worker
+  // await deleteWorker(grid3, { name: worker.name, deployment_name: worker.deployment_name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/algorand.ts b/packages/grid_client/scripts/algorand.ts
index eb0f1068cf..cb8b1c5375 100644
--- a/packages/grid_client/scripts/algorand.ts
+++ b/packages/grid_client/scripts/algorand.ts
@@ -1,102 +1,166 @@
-import { GridClient } from "../src";
+import {
+  AlgorandAccountAssetsFromAddressModel,
+  AlgorandAccountCreateModel,
+  AlgorandAccountInitModel,
+  AlgorandCreateTransactionModel,
+  AlgorandSignatureModel,
+  AlgorandTransferModel,
+  BlockchainDeleteModel,
+  BlockchainGetModel,
+  BlockchainSignModel,
+  GridClient,
+} from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
+
 let grid3: GridClient;
 const test_account_address = "EBABIFYHKVSMFEV66M7SMIILEZCJ4SHBC3FPGISFFTRIIG6VX3KGSAXR34";
 const mnemonic =
   "wood clump category carpet cabin cement joy cover this hour armor twist write trade term only label later lizard disease boil pelican dish ability this";
 const message = "a message";
+const receiver = "HZ57J3K46JIJXILONBBZOHX6BKPXEM2VVXNRFSUED6DKFD5ZD24PMJ3MVA";
 const hexMessage = message
   .split("")
   .map((letter, i) => message.charCodeAt(i).toString(16))
   .join("");
+const name = "testAcc";
+
 async function main() {
+  const account: AlgorandAccountCreateModel = {
+    name: "myaccount",
+  };
+  const importedAccount: AlgorandAccountInitModel = {
+    name: name,
+    secret: mnemonic,
+  };
+  const accountAddress: AlgorandAccountAssetsFromAddressModel = {
+    address: test_account_address,
+  };
+  const accountName: BlockchainGetModel = {
+    name: name,
+  };
+  const transaction: AlgorandCreateTransactionModel = {
+    name: name,
+    address_dest: receiver,
+    amount: 100,
+    description: "test",
+  };
+  const deleteAccount1: BlockchainDeleteModel = {
+    name: name,
+  };
+  const deleteAccount2: BlockchainDeleteModel = {
+    name: "myaccount",
+  };
+  const message: BlockchainSignModel = {
+    content: hexMessage,
+    name: name,
+  };
+  const transactionModel: AlgorandCreateTransactionModel = {
+    name: name,
+    address_dest: receiver,
+    amount: 100,
+    description: "test",
+  };
+  const transfer: AlgorandTransferModel = {
+    name: name,
+    address_dest: receiver,
+    amount: 100,
+    description: "test",
+  };
+
   await getClient().then(res => (grid3 = res));
-  await createAccount("myaccount");
-  await importAccount("manana", mnemonic);
-  await getAccountAssetsFromAddress(test_account_address);
-  await getAccountAssetsFromName("manana");
-  await createTransaction("manana");
-  await signBytes("manana", hexMessage);
-  await signTransaction("manana");
-  await getAccountMnemonicFromName("manana");
-  await checkAccountExistsFromName("manana");
+
+  //Create Account
+  await createAccount(account);
+
+  //Import Account
+  await importAccount(importedAccount);
+
+  //Get assets from account address
+  await getAccountAssetsFromAddress(accountAddress);
+
+  //Get assets from account name
+  await getAccountAssetsFromName(accountName);
+
+  //Create Transaction
+  await createTransaction(transaction);
+
+  //Sign Bytes
+  await signBytes(message);
+
+  //Sign Transaction
+  await signTransaction(transactionModel);
+
+  //Get mnemonic from account name
+  await getAccountMnemonicFromName(accountName);
+
+  //Check if the account exists from account name
+  await checkAccountExistsFromName(accountName);
+
+  //List Accounts
   await listAccounts();
-  await transferAccount("manana");
-  await deleteAccount("manana");
-  await deleteAccount("myaccount");
+
+  //Transfer funds
+  await transferAccount(transfer);
+
+  //Delete Accounts
+  await deleteAccount(deleteAccount1);
+  await deleteAccount(deleteAccount2);
 
   grid3.disconnect();
 }
 
-async function createAccount(account_name: string) {
+async function createAccount(account) {
   try {
-    const account_created = await grid3.algorand.create({
-      name: account_name,
-    });
-    log(account_created);
+    await grid3.algorand.create(account);
+    log(account);
   } catch (err) {
     console.log(err);
   }
 }
-async function importAccount(account_name: string, account_mnemonic: string) {
+async function importAccount(account) {
   try {
-    const account_imported = await grid3.algorand.init({
-      name: account_name,
-      secret: account_mnemonic,
-    });
+    const account_imported = await grid3.algorand.init(account);
     log(account_imported);
   } catch (err) {
     console.log(err);
   }
 }
-async function getAccountAssetsFromName(account_name: string) {
+async function getAccountAssetsFromName(accountName) {
   try {
-    const account_assets = await grid3.algorand.assets({
-      name: account_name,
-    });
+    const account_assets = await grid3.algorand.assets(accountName);
     log(account_assets);
   } catch (err) {
     console.log(err);
   }
 }
-async function getAccountAssetsFromAddress(account_address: string) {
+async function getAccountAssetsFromAddress(accountAddress) {
   try {
-    const account_assets = await grid3.algorand.assetsByAddress({
-      address: account_address,
-    });
+    const account_assets = await grid3.algorand.assetsByAddress(accountAddress);
     log(account_assets);
   } catch (err) {
     console.log(err);
   }
 }
-async function createTransaction(account_name: string) {
+async function createTransaction(transaction) {
   try {
-    const receiver = "HZ57J3K46JIJXILONBBZOHX6BKPXEM2VVXNRFSUED6DKFD5ZD24PMJ3MVA";
-    const account_tx = await grid3.algorand.createTransaction({
-      name: account_name,
-      address_dest: receiver,
-      amount: 100,
-      description: "my nana",
-    });
+    const account_tx = await grid3.algorand.createTransaction(transaction);
     log(account_tx);
   } catch (err) {
     console.log(err);
   }
 }
-async function getAccountMnemonicFromName(account_name) {
+async function getAccountMnemonicFromName(accountName) {
   try {
-    const account = await grid3.algorand.get({ name: account_name });
+    const account = await grid3.algorand.get(accountName);
     log(account);
   } catch (err) {
     console.log(err);
   }
 }
-async function deleteAccount(account_name: string) {
+async function deleteAccount(accountName) {
   try {
-    const deleteAccountConfirmation = await grid3.algorand.delete({
-      name: account_name,
-    });
+    const deleteAccountConfirmation = await grid3.algorand.delete(accountName);
     log(deleteAccountConfirmation);
   } catch (err) {
     console.log(err);
@@ -110,47 +174,39 @@ async function listAccounts() {
     console.log(err);
   }
 }
-async function checkAccountExistsFromName(account_name: string) {
+async function checkAccountExistsFromName(accountName) {
   try {
-    const accountExist = await grid3.algorand.exist({ name: account_name });
+    const accountExist = await grid3.algorand.exist(accountName);
     log(accountExist);
   } catch (err) {
     console.log(err);
   }
 }
-async function signBytes(account_name: string, text: string) {
+async function signBytes(message) {
   try {
-    const signed_txn = await grid3.algorand.sign({ content: text, name: account_name });
+    const signed_txn = await grid3.algorand.sign(message);
     log(signed_txn);
   } catch (err) {
     console.log(err);
   }
 }
-async function signTransaction(account_name: string) {
+async function signTransaction(transactionModel) {
   try {
-    const receiver = "HZ57J3K46JIJXILONBBZOHX6BKPXEM2VVXNRFSUED6DKFD5ZD24PMJ3MVA";
-    const txn = await grid3.algorand.createTransaction({
-      name: account_name,
-      address_dest: receiver,
-      amount: 100,
-      description: "my nana",
-    });
-
-    const signed_txn = await grid3.algorand.sign_txn({ txn: txn, name: account_name });
+    const txn = await grid3.algorand.createTransaction(transactionModel);
+
+    const transaction: AlgorandSignatureModel = {
+      txn: txn,
+      name: name,
+    };
+    const signed_txn = await grid3.algorand.sign_txn(transaction);
     log(signed_txn);
   } catch (err) {
     console.log(err);
   }
 }
-async function transferAccount(account_name: string) {
+async function transferAccount(transfer) {
   try {
-    const receiver = "HZ57J3K46JIJXILONBBZOHX6BKPXEM2VVXNRFSUED6DKFD5ZD24PMJ3MVA";
-    const account_tx = await grid3.algorand.pay({
-      name: account_name,
-      address_dest: receiver,
-      amount: 100,
-      description: "my nana",
-    });
+    const account_tx = await grid3.algorand.pay(transfer);
     log(account_tx);
   } catch (err) {
     console.log(err);
diff --git a/packages/grid_client/scripts/blockchain.ts b/packages/grid_client/scripts/blockchain.ts
index cd08d19822..ae70bb4f0b 100644
--- a/packages/grid_client/scripts/blockchain.ts
+++ b/packages/grid_client/scripts/blockchain.ts
@@ -1,10 +1,9 @@
-import { GridClient } from "../src";
+import { BlockchainCreateModel, BlockchainInitModel, GridClient } from "../src";
 import { blockchainType } from "../src/modules/blockchainInterface";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
 let grid3: GridClient;
-const ip = "2a02:1812:1443:300:7913:de17:4c83:ecb2";
 const message = "a message";
 const hexMessage = message
   .split("")
@@ -17,17 +16,46 @@ async function main() {
 
   grid3 = await getClient();
 
-  await createAccount("createAlgorand", blockchainType.algorand);
-  const stellar_account = await createAccount("createStellar", blockchainType.stellar);
-  const tfchain_account = await createAccount("createTfchain", blockchainType.tfchain, ip);
+  //change the relay to the desired network
+  const relay = "relay.dev.grid.tf";
 
-  await importAccount("algorandClient", algorand_mnemonic, blockchainType.algorand);
-  await importAccount(
-    "stellarClient",
-    "SBCWGJ4A4IHDUUXPASQBL7VKGZGNRMVNV66GO5P6FU6Q4NDKHIHZFRKI",
-    blockchainType.stellar,
-  );
-  await importAccount("tfchainClient", grid3.mnemonic, blockchainType.tfchain);
+  const algorandAccount: BlockchainCreateModel = {
+    name: "createAlgorand",
+    blockchain_type: blockchainType.algorand,
+  };
+  const stellarAccount: BlockchainCreateModel = {
+    name: "createStellar",
+    relay: relay,
+    blockchain_type: blockchainType.stellar,
+  };
+  const tfchainAccount: BlockchainCreateModel = {
+    name: "createTfchain",
+    relay: relay,
+    blockchain_type: blockchainType.tfchain,
+  };
+  const importAlgorand: BlockchainInitModel = {
+    name: "algorandClient",
+    secret: algorand_mnemonic,
+    blockchain_type: blockchainType.algorand,
+  };
+  const importStellar: BlockchainInitModel = {
+    name: "stellarClient",
+    secret: "SBCWGJ4A4IHDUUXPASQBL7VKGZGNRMVNV66GO5P6FU6Q4NDKHIHZFRKI",
+    blockchain_type: blockchainType.stellar,
+  };
+  const importTFchain: BlockchainInitModel = {
+    name: "tfchainClient",
+    secret: grid3.clientOptions.mnemonic,
+    blockchain_type: blockchainType.tfchain,
+  };
+
+  await createAccount(algorandAccount);
+  const stellar_account = await createAccount(stellarAccount);
+  const tfchain_account = await createAccount(tfchainAccount);
+
+  await importAccount(importAlgorand);
+  await importAccount(importStellar);
+  await importAccount(importTFchain);
 
   // List all
   const accounts = await grid3.blockchain.list();
@@ -82,13 +110,9 @@ async function main() {
   await grid3.disconnect();
 }
 
-async function createAccount(account_name: string, blockchain_type: blockchainType, ip?: string) {
+async function createAccount(account) {
   try {
-    const account_created = await grid3.blockchain.create({
-      name: account_name,
-      ip: ip,
-      blockchain_type: blockchain_type,
-    });
+    const account_created = await grid3.blockchain.create(account);
     log(account_created);
     return account_created;
   } catch (err) {
@@ -96,13 +120,9 @@ async function createAccount(account_name: string, blockchain_type: blockchainTy
   }
 }
 
-async function importAccount(account_name: string, secret: string, blockchain_type: blockchainType) {
+async function importAccount(account) {
   try {
-    const account_imported = await grid3.blockchain.init({
-      name: account_name,
-      secret: secret,
-      blockchain_type: blockchain_type,
-    });
+    const account_imported = await grid3.blockchain.init(account);
     log(account_imported);
   } catch (err) {
     console.log(err);
diff --git a/packages/grid_client/scripts/calculator.ts b/packages/grid_client/scripts/calculator.ts
index 7351becdbf..218834d3b9 100644
--- a/packages/grid_client/scripts/calculator.ts
+++ b/packages/grid_client/scripts/calculator.ts
@@ -1,5 +1,72 @@
 import { CalculatorModel, CUModel, SUModel } from "../src";
 import { getClient } from "./client_loader";
+import { log } from "./utils";
+
+async function calculateCU(client, CUModel) {
+  try {
+    const res = await client.calculator.calCU(CUModel);
+    log("================= Calculating CU =================");
+    log(res);
+    log("================= Calculating CU =================");
+  } catch (error) {
+    log("Error while calculating CU " + error);
+  }
+}
+
+async function calculateSU(client, SUModel) {
+  try {
+    const res = await client.calculator.calSU(SUModel);
+    log("================= Calculating SU =================");
+    log(res);
+    log("================= Calculating SU =================");
+  } catch (error) {
+    log("Error while calculating SU " + error);
+  }
+}
+
+async function getTFTPrice(client) {
+  try {
+    const res = await client.calculator.tftPrice();
+    log("================= TFT Price =================");
+    log(res);
+    log("================= TFT Price =================");
+  } catch (error) {
+    log("Error while getting TFT price " + error);
+  }
+}
+
+async function getPricingPolicy(client) {
+  try {
+    const res = await client.calculator.getPrices();
+    log("================= Pricing Policy =================");
+    log(res);
+    log("================= Pricing Policy =================");
+  } catch (error) {
+    log("Error while getting pricing policy " + error);
+  }
+}
+
+async function calculateDeployment(client, CalculatorModel) {
+  try {
+    const res = await client.calculator.calculate(CalculatorModel);
+    log("================= Deployment Cost =================");
+    log(res);
+    log("================= Deployment Cost =================");
+  } catch (error) {
+    log("Error while calculating deployment cost " + error);
+  }
+}
+
+async function calculateDeploymentWithCurrentBalance(client, CalculatorModel) {
+  try {
+    const res = await client.calculator.calculateWithMyBalance(CalculatorModel);
+    log("================= Deployment Cost with current balance =================");
+    log(res);
+    log("================= Deployment Cost with current balance =================");
+  } catch (error) {
+    log("Error while calculating deployment cost " + error);
+  }
+}
 
 async function main() {
   const grid3 = await getClient();
@@ -23,23 +90,23 @@ async function main() {
     sru: 1, // GB
   };
 
-  const calCU = await grid3.calculator.calCU(CUModel);
-  console.log("calCU", calCU);
+  //Calculate CU
+  await calculateCU(grid3, CUModel);
 
-  const calSU = await grid3.calculator.calSU(SUModel);
-  console.log("calSU", calSU);
+  //Calculate SU
+  await calculateSU(grid3, SUModel);
 
-  const tftPrice = await grid3.calculator.tftPrice();
-  console.log("tftPrice", tftPrice);
+  //Get TFT price
+  await getTFTPrice(grid3);
 
-  const getPrices = await grid3.calculator.getPrices();
-  console.log("getPrices", getPrices);
+  //Get Pricing Policy
+  await getPricingPolicy(grid3);
 
-  const calculate = await grid3.calculator.calculate(CalculatorModel);
-  console.log("calculate", calculate);
+  //Get deployment cost
+  await calculateDeployment(grid3, CalculatorModel);
 
-  const calculateWithMyBalance = await grid3.calculator.calculateWithMyBalance(CalculatorModel);
-  console.log("calculateWithMyBalance", calculateWithMyBalance);
+  //Get deployment cost with current balance
+  await calculateDeploymentWithCurrentBalance(grid3, CalculatorModel);
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/caprover_leader.ts b/packages/grid_client/scripts/caprover_leader.ts
index 8c401e8d0d..df001a7b12 100644
--- a/packages/grid_client/scripts/caprover_leader.ts
+++ b/packages/grid_client/scripts/caprover_leader.ts
@@ -1,7 +1,41 @@
-import { DiskModel, FilterOptions, MachineModel, MachinesModel, NetworkModel } from "../src";
+import { FilterOptions, MachinesModel } from "../src";
 import { config, getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function deploy(client, vms) {
+  try {
+    const res = await client.machines.deploy(vms);
+    log("================= Deploying Caprover cluster =================");
+    log(res);
+    log("================= Deploying Caprover cluster =================");
+  } catch (error) {
+    log("Error while Deploying the VM " + error);
+  }
+}
+
+async function getDeployment(client, vms) {
+  try {
+    const res = await client.machines.getObj(vms);
+    log("================= Getting deployment information =================");
+    log(res);
+    log(`You can access Caprover via the browser using: http://captain.${res[0].env.CAPROVER_ROOT_DOMAIN}`);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function cancel(client, vms) {
+  try {
+    const res = await client.machines.delete(vms);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
@@ -12,59 +46,52 @@ async function main() {
     farmId: 1,
   };
 
-  const CAPROVER_FLIST = "https://hub.grid.tf/tf-official-apps/tf-caprover-latest.flist";
-  // create network Object
-  const n = new NetworkModel();
-  n.name = "wedtest";
-  n.ip_range = "10.249.0.0/16";
-
-  // create disk Object
-  const disk = new DiskModel();
-  disk.name = "wedDisk";
-  disk.size = 10;
-  disk.mountpoint = "/var/lib/docker";
-
-  // create vm node Object
-  const vm = new MachineModel();
-  vm.name = "testvm";
-  vm.node_id = +(await grid3.capacity.filterNodes(vmQueryOptions))[0].nodeId;
-  vm.disks = [disk];
-  vm.public_ip = true;
-  vm.planetary = false;
-  vm.cpu = 4;
-  vm.memory = 1024 * 4;
-  vm.rootfs_size = 0;
-  vm.flist = CAPROVER_FLIST;
-  vm.entrypoint = "/sbin/zinit init";
-  vm.env = {
-    PUBLIC_KEY: config.ssh_key,
-    SWM_NODE_MODE: "leader",
-    CAPROVER_ROOT_DOMAIN: "rafy.grid.tf", // update me
-    DEFAULT_PASSWORD: "captain42",
-    CAPTAIN_IMAGE_VERSION: "latest",
+  const vms: MachinesModel = {
+    name: "newVMS5",
+    network: {
+      name: "wedtest",
+      ip_range: "10.249.0.0/16",
+    },
+    machines: [
+      {
+        name: "testvm",
+        node_id: +(await grid3.capacity.filterNodes(vmQueryOptions))[0].nodeId,
+        disks: [
+          {
+            name: "wedDisk",
+            size: 8,
+            mountpoint: "/var/lib/docker",
+          },
+        ],
+        public_ip: true,
+        public_ip6: false,
+        planetary: false,
+        cpu: 4,
+        memory: 1024 * 4,
+        rootfs_size: 0,
+        flist: "https://hub.grid.tf/tf-official-apps/tf-caprover-latest.flist",
+        entrypoint: "/sbin/zinit init",
+        env: {
+          PUBLIC_KEY: config.ssh_key,
+          SWM_NODE_MODE: "leader",
+          CAPROVER_ROOT_DOMAIN: "rafy.grid.tf", // update me
+          DEFAULT_PASSWORD: "captain42",
+          CAPTAIN_IMAGE_VERSION: "latest",
+        },
+      },
+    ],
+    metadata: "",
+    description: "caprover leader machine/node",
   };
 
-  // create VMs Object
-  const vms = new MachinesModel();
-  vms.name = "newVMS5";
-  vms.network = n;
-  vms.machines = [vm];
-  vms.metadata = "";
-  vms.description = "caprover leader machine/node";
-
-  // deploy vms
-  const res = await grid3.machines.deploy(vms);
-  log(res);
-
-  // get the deployment
-  const l = await grid3.machines.getObj(vms.name);
-  log(l);
+  //Deploy Caprover cluster
+  await deploy(grid3, vms);
 
-  log(`You can access Caprover via the browser using: https://captain.${vm.env.CAPROVER_ROOT_DOMAIN}`);
+  //Get the deployment
+  await getDeployment(grid3, vms.name);
 
-  // // delete
-  // const d = await grid3.machines.delete({ name: vms.name });
-  // log(d);
+  //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: vms.name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/caprover_worker.ts b/packages/grid_client/scripts/caprover_worker.ts
index 6c3c84c919..acd609e0a4 100644
--- a/packages/grid_client/scripts/caprover_worker.ts
+++ b/packages/grid_client/scripts/caprover_worker.ts
@@ -1,7 +1,40 @@
-import { DiskModel, FilterOptions, MachineModel, MachinesModel, NetworkModel } from "../src";
+import { FilterOptions, MachinesModel } from "../src";
 import { config, getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function deploy(client, vms) {
+  try {
+    const res = await client.machines.deploy(vms);
+    log("================= Deploying Worker =================");
+    log(res);
+    log("================= Deploying Worker =================");
+  } catch (error) {
+    log("Error while Deploying the VM " + error);
+  }
+}
+
+async function getDeployment(client, vms) {
+  try {
+    const res = await client.machines.getObj(vms);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function cancel(client, vms) {
+  try {
+    const res = await client.machines.delete(vms);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
@@ -12,57 +45,52 @@ async function main() {
     farmId: 1,
   };
 
-  const CAPROVER_FLIST = "https://hub.grid.tf/tf-official-apps/tf-caprover-latest.flist";
-  // create network Object
-  const n = new NetworkModel();
-  n.name = "wedtest";
-  n.ip_range = "10.249.0.0/16";
-
-  // create disk Object
-  const disk = new DiskModel();
-  disk.name = "wedDisk";
-  disk.size = 10;
-  disk.mountpoint = "/var/lib/docker";
-
-  // create vm node Object
-  const vm = new MachineModel();
-  vm.name = "capworker1";
-  vm.node_id = +(await grid3.capacity.filterNodes(vmQueryOptions))[0].nodeId;
-  vm.disks = [disk];
-  vm.public_ip = true;
-  vm.planetary = false;
-  vm.cpu = 4;
-  vm.memory = 1024 * 4;
-  vm.rootfs_size = 0;
-  vm.flist = CAPROVER_FLIST;
-  vm.entrypoint = "/sbin/zinit init";
-  vm.env = {
-    // These env. vars needed to be changed based on the leader node.
-    PUBLIC_KEY: config.ssh_key,
-    SWM_NODE_MODE: "worker",
-    LEADER_PUBLIC_IP: "185.206.122.157",
-    CAPTAIN_IMAGE_VERSION: "latest",
+  const vms: MachinesModel = {
+    name: "newVMS6",
+    network: {
+      name: "wedtest",
+      ip_range: "10.249.0.0/16",
+    },
+    machines: [
+      {
+        name: "capworker1",
+        node_id: +(await grid3.capacity.filterNodes(vmQueryOptions))[1].nodeId,
+        disks: [
+          {
+            name: "wedDisk",
+            size: 10,
+            mountpoint: "/var/lib/docker",
+          },
+        ],
+        public_ip: true,
+        public_ip6: false,
+        planetary: false,
+        cpu: 4,
+        memory: 1024 * 4,
+        rootfs_size: 0,
+        flist: "https://hub.grid.tf/tf-official-apps/tf-caprover-latest.flist",
+        entrypoint: "/sbin/zinit init",
+        env: {
+          // These env. vars needed to be changed based on the leader node.
+          PUBLIC_KEY: config.ssh_key,
+          SWM_NODE_MODE: "worker",
+          LEADER_PUBLIC_IP: "185.206.122.157",
+          CAPTAIN_IMAGE_VERSION: "latest",
+        },
+      },
+    ],
+    metadata: "",
+    description: "caprover worker machine/node",
   };
 
-  // create VMs Object
-  const vms = new MachinesModel();
-  vms.name = "newVMS6";
-  vms.network = n;
-  vms.machines = [vm];
-  vms.metadata = "";
-  vms.description = "caprover worker machine/node";
-
-  // deploy vms
-  const res = await grid3.machines.deploy(vms);
-  log(res);
+  //Deploy Caprover worker
+  await deploy(grid3, vms);
 
-  // get the deployment
-  const l = await grid3.machines.getObj(vms.name);
-  log(l);
+  //Get the deployment
+  await getDeployment(grid3, vms.name);
 
-  // // delete
-  // const d = await grid3.machines.delete({ name: vms.name });
-  // log(d);
+  //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: vms.name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/checkNodeAlive.ts b/packages/grid_client/scripts/checkNodeAlive.ts
index a3497d836d..6bb232f27e 100644
--- a/packages/grid_client/scripts/checkNodeAlive.ts
+++ b/packages/grid_client/scripts/checkNodeAlive.ts
@@ -1,18 +1,31 @@
+import { PingNodeOptionsModel } from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
-async function main() {
-  const grid3 = await getClient();
-  try {
-    log(await grid3.zos.pingNode({ nodeId: 15 }));
-  } catch {
-    log(`node 15 is offline`);
-  }
+async function pingNode(client, nodeId) {
   try {
-    log(await grid3.zos.pingNode({ nodeId: 1111111111 }));
-  } catch {
-    log("node 111111 is offline");
+    const res = await client.zos.pingNode(nodeId);
+    log("================= Ping result =================");
+    log(res);
+    log("================= Ping result =================");
+  } catch (error) {
+    log(`Node ${nodeId.nodeId} is offline`);
   }
+}
+
+async function main() {
+  const grid3 = await getClient();
+  const node1: PingNodeOptionsModel = {
+    nodeId: 1,
+  };
+  const node2: PingNodeOptionsModel = {
+    nodeId: 1111111111,
+  };
+
+  await pingNode(grid3, node1);
+
+  await pingNode(grid3, node2);
+
   await grid3.disconnect();
 }
 
diff --git a/packages/grid_client/scripts/create_account.ts b/packages/grid_client/scripts/create_account.ts
index 0b73536876..d35dfe9ec8 100644
--- a/packages/grid_client/scripts/create_account.ts
+++ b/packages/grid_client/scripts/create_account.ts
@@ -6,6 +6,17 @@ import { NetworkEnv } from "../src/config";
 import config from "./config.json";
 import { log } from "./utils";
 
+async function createAccount(client, relay) {
+  try {
+    const res = await client.tfchain.createAccount(relay, true);
+    log("================= Creating account =================");
+    log(res);
+    log("================= Creating account =================");
+  } catch (error) {
+    log("Error while creating account " + error);
+  }
+}
+
 async function main() {
   let network;
 
@@ -21,8 +32,8 @@ async function main() {
   const urls = client.getDefaultUrls(network);
   const relay = urlParser(urls.relay).hostname;
 
-  const createdAccount = await client.tfchain.createAccount(relay, true);
-  log(createdAccount);
+  //Create Account
+  await createAccount(client, relay);
 }
 
 main();
diff --git a/packages/grid_client/scripts/delete_all_contracts.ts b/packages/grid_client/scripts/delete_all_contracts.ts
index 24b2f54c68..da03c89326 100644
--- a/packages/grid_client/scripts/delete_all_contracts.ts
+++ b/packages/grid_client/scripts/delete_all_contracts.ts
@@ -1,20 +1,24 @@
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function deleteAllContracts(client) {
+  try {
+    const res = await client.contracts.cancelMyContracts();
+    log("================= Deleting all contracts =================");
+    log(res);
+    log("================= Deleting all contracts =================");
+  } catch (error) {
+    log("Error while deleting contracts " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
-  grid3.contracts
-    .cancelMyContracts()
-    .then(cancellation_res => {
-      log(cancellation_res);
-    })
-    .catch(err => {
-      throw err;
-    })
-    .finally(() => {
-      grid3.disconnect();
-    });
+  //Delete all contracts
+  await deleteAllContracts(grid3);
+
+  await grid3.disconnect();
 }
 
 main();
diff --git a/packages/grid_client/scripts/dynamic_single_vm.ts b/packages/grid_client/scripts/dynamic_single_vm.ts
index 15be19aa25..89d17306fd 100644
--- a/packages/grid_client/scripts/dynamic_single_vm.ts
+++ b/packages/grid_client/scripts/dynamic_single_vm.ts
@@ -1,20 +1,42 @@
-import { DiskModel, FilterOptions, MachineModel, MachinesModel, NetworkModel } from "../src";
+import { FilterOptions, MachinesModel } from "../src";
 import { config, getClient } from "./client_loader";
 import { log } from "./utils";
 
-async function main() {
-  const grid3 = await getClient();
+async function deploy(client, vms) {
+  try {
+    const res = await client.machines.deploy(vms);
+    log("================= Deploying VM =================");
+    log(res);
+    log("================= Deploying VM =================");
+  } catch (error) {
+    log("Error while Deploying the VM " + error);
+  }
+}
 
-  // create network Object
-  const n = new NetworkModel();
-  n.name = "dynamictest";
-  n.ip_range = "10.249.0.0/16";
+async function getDeployment(client, vms) {
+  try {
+    const res = await client.machines.getObj(vms);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
 
-  // create disk Object
-  const disk = new DiskModel();
-  disk.name = "dynamicDisk";
-  disk.size = 1;
-  disk.mountpoint = "/testdisk";
+async function cancel(client, vms) {
+  try {
+    const res = await client.machines.delete(vms);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
+async function main() {
+  const grid3 = await getClient();
 
   const vmQueryOptions: FilterOptions = {
     cru: 1,
@@ -24,41 +46,48 @@ async function main() {
     country: "Belgium",
   };
 
-  // create vm node Object
-  const vm = new MachineModel();
-  vm.name = "testvm";
-  vm.node_id = +(await grid3.capacity.filterNodes(vmQueryOptions))[0].nodeId; // TODO: allow random choice
-  vm.disks = [disk];
-  vm.public_ip = false;
-  vm.planetary = true;
-  vm.cpu = 1;
-  vm.memory = 1024;
-  vm.rootfs_size = 0;
-  vm.flist = "https://hub.grid.tf/tf-official-apps/base:latest.flist";
-  vm.entrypoint = "/sbin/zinit init";
-  vm.env = {
-    SSH_KEY: config.ssh_key,
+  const vms: MachinesModel = {
+    name: "dynamicVMS",
+    network: {
+      name: "dynamictest",
+      ip_range: "10.249.0.0/16",
+    },
+    machines: [
+      {
+        name: "testvm",
+        node_id: +(await grid3.capacity.filterNodes(vmQueryOptions))[0].nodeId,
+        disks: [
+          {
+            name: "dynamicDisk",
+            size: 5,
+            mountpoint: "/testdisk",
+          },
+        ],
+        public_ip: false,
+        public_ip6: false,
+        planetary: true,
+        cpu: 1,
+        memory: 1024,
+        rootfs_size: 0,
+        flist: "https://hub.grid.tf/tf-official-apps/base:latest.flist",
+        entrypoint: "/sbin/zinit init",
+        env: {
+          SSH_KEY: config.ssh_key,
+        },
+      },
+    ],
+    metadata: "",
+    description: "test deploying VMs via ts grid3 client",
   };
 
-  // create VMs Object
-  const vms = new MachinesModel();
-  vms.name = "dynamicVMS";
-  vms.network = n;
-  vms.machines = [vm];
-  vms.metadata = "";
-  vms.description = "test deploying VMs via ts grid3 client";
-
-  // deploy vms
-  const res = await grid3.machines.deploy(vms);
-  log(res);
+  //Deploy VMs
+  await deploy(grid3, vms);
 
-  // get the deployment
-  const l = await grid3.machines.getObj(vms.name);
-  log(l);
+  //Get the deployment
+  await getDeployment(grid3, vms.name);
 
-  // // delete
-  // const d = await grid3.machines.delete({ name: vms.name });
-  // log(d);
+  //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: vms.name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/extraFees.ts b/packages/grid_client/scripts/extraFees.ts
index 87a12284d1..761b717fc7 100644
--- a/packages/grid_client/scripts/extraFees.ts
+++ b/packages/grid_client/scripts/extraFees.ts
@@ -1,26 +1,45 @@
+import { SetDedicatedNodeExtraFeesModel } from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function setExtraFee(client, extraFee) {
+  try {
+    const res = await client.contracts.setDedicatedNodeExtraFee(extraFee);
+    log("================= Setting extra fee =================");
+    log(res);
+    log("================= Setting extra fee =================");
+  } catch (error) {
+    log("Error while setting extra fee " + error);
+  }
+}
+
+async function getExtraFee(client, node) {
+  try {
+    const res = await client.contracts.getDedicatedNodeExtraFee(node);
+    log("================= Getting extra fee =================");
+    log(res);
+    log("================= Getting extra fee =================");
+  } catch (error) {
+    log("Error while getting extra fee " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
+  const node = 73;
+  const extraFee = 5;
+  const extraFeeModel: SetDedicatedNodeExtraFeesModel = {
+    nodeId: node,
+    extraFee: extraFee,
+  };
 
-  const node = { nodeId: 73 };
-
-  const extraFees = await grid3.contracts.setDedicatedNodeExtraFee({ ...node, extraFee: 5 });
+  //Set extra fee
+  await setExtraFee(grid3, extraFeeModel);
 
-  console.log(extraFees);
+  //Get extra fee
+  await getExtraFee(grid3, node);
 
-  grid3.contracts
-    .getDedicatedNodeExtraFee(node)
-    .then(res => {
-      log(res);
-    })
-    .catch(err => {
-      throw err;
-    })
-    .finally(() => {
-      grid3.disconnect();
-    });
+  await grid3.disconnect();
 }
 
 main();
diff --git a/packages/grid_client/scripts/farmerbot.ts b/packages/grid_client/scripts/farmerbot.ts
index 7ee49b4d4e..5f00b21e3b 100644
--- a/packages/grid_client/scripts/farmerbot.ts
+++ b/packages/grid_client/scripts/farmerbot.ts
@@ -1,6 +1,29 @@
 import { pingFarmModel } from "../src";
 import { FarmerBotFindNodeModel } from "../src/high_level/farmerbot";
 import { getClient } from "./client_loader";
+import { log } from "./utils";
+
+async function pingFarm(client, farm) {
+  try {
+    const res = await client.farmerbot.pingFarm(farm);
+    log("================= Pinging farm =================");
+    log(res);
+    log("================= Pinging farm =================");
+  } catch (error) {
+    log("Error while pinging farm " + error);
+  }
+}
+
+async function findNode(client, FarmerBotFindNode) {
+  try {
+    const res = await client.farmerbot.findNode(FarmerBotFindNode);
+    log("================= Finding node =================");
+    log(res);
+    log("================= Finding node =================");
+  } catch (error) {
+    log("Error while finding node " + error);
+  }
+}
 
 async function main() {
   const grid3 = await getClient();
@@ -8,9 +31,6 @@ async function main() {
     farmId: 53,
   };
 
-  const pingFarm = await grid3.farmerbot.pingFarm(farm);
-  console.log("pingFarm", pingFarm);
-
   const FarmerBotFindNode: FarmerBotFindNodeModel = {
     farmId: farm.farmId,
     required_cru: 4,
@@ -20,10 +40,11 @@ async function main() {
     // has_gpus: 2, // Uncomment it if you want to get only nodes with gpus.
   };
 
-  if (pingFarm.twinid) {
-    const node = await grid3.farmerbot.findNode(FarmerBotFindNode);
-    console.log("node", node);
-  }
+  //Ping Farm
+  await pingFarm(grid3, farm);
+
+  //Find Node
+  await findNode(grid3, FarmerBotFindNode);
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/fqdn_gateway.ts b/packages/grid_client/scripts/fqdn_gateway.ts
index b181e7f915..dab4277151 100644
--- a/packages/grid_client/scripts/fqdn_gateway.ts
+++ b/packages/grid_client/scripts/fqdn_gateway.ts
@@ -2,7 +2,40 @@ import { FilterOptions, GatewayFQDNModel } from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
-// read more about the gateway types in this doc: https://github.com/threefoldtech/zos/tree/main/docs/gateway
+async function deploy(client, gw) {
+  try {
+    const res = await client.gateway.deploy_fqdn(gw);
+    log("================= Deploying FQDN gateway =================");
+    log(res);
+    log("================= Deploying FQDN gateway =================");
+  } catch (error) {
+    log("Error while Deploying the gateway " + error);
+  }
+}
+
+async function getDeployment(client, gw) {
+  try {
+    const res = await client.gateway.getObj(gw);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function cancel(client, gw) {
+  try {
+    const res = await client.gateway.delete_fqdn(gw);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
+// read more about the gateway types in this doc: https://github.com/threefoldtech/zos/tree/main/docs/internals/gateway
 async function main() {
   const grid3 = await getClient();
 
@@ -10,25 +43,24 @@ async function main() {
     gateway: true,
     farmId: 1,
   };
-  const gw = new GatewayFQDNModel();
-  gw.name = "applyFQDN";
-  gw.node_id = +(await grid3.capacity.filterNodes(gatewayQueryOptions))[0].nodeId;
-  gw.fqdn = "test.hamada.grid.tf";
-  gw.tls_passthrough = false;
-  // the backends have to be in this format `http://ip:port` or `https://ip:port`, and the `ip` pingable from the node so using the ygg ip or public ip if available.
-  gw.backends = ["http://185.206.122.35:8000"];
-
-  // deploy
-  const res = await grid3.gateway.deploy_fqdn(gw);
-  log(res);
-
-  // get the deployment
-  const l = await grid3.gateway.getObj(gw.name);
-  log(l);
-
-  // // delete
-  // const d = await grid3.gateway.delete_fqdn({ name: gw.name });
-  // log(d);
+
+  const gw: GatewayFQDNModel = {
+    name: "applyFQDN",
+    node_id: +(await grid3.capacity.filterNodes(gatewayQueryOptions))[0].nodeId,
+    fqdn: "test.hamada.grid.tf",
+    tls_passthrough: false,
+    // the backends have to be in this format `http://ip:port` or `https://ip:port`, and the `ip` pingable from the node so using the ygg ip or public ip if available.
+    backends: ["http://185.206.122.35:8000"],
+  };
+
+  //Deploy VMs
+  await deploy(grid3, gw);
+
+  //Get the deployment
+  await getDeployment(grid3, gw.name);
+
+  //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: gw.name });
 
   grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/get_dao_proposals.ts b/packages/grid_client/scripts/get_dao_proposals.ts
new file mode 100644
index 0000000000..c41712552a
--- /dev/null
+++ b/packages/grid_client/scripts/get_dao_proposals.ts
@@ -0,0 +1,24 @@
+import { getClient } from "./client_loader";
+import { log } from "./utils";
+
+async function getProposals(client) {
+  try {
+    const res = await client.dao.get();
+    log("================= Getting proposals =================");
+    log(res);
+    log("================= Getting proposals =================");
+  } catch (error) {
+    log("Error while getting the proposals " + error);
+  }
+}
+
+async function main() {
+  const grid3 = await getClient();
+
+  //Get proposals
+  await getProposals(grid3);
+
+  await grid3.disconnect();
+}
+
+main();
diff --git a/packages/grid_client/scripts/get_deletion_time.ts b/packages/grid_client/scripts/get_deletion_time.ts
index 63dd38d870..3d57c0f4fd 100644
--- a/packages/grid_client/scripts/get_deletion_time.ts
+++ b/packages/grid_client/scripts/get_deletion_time.ts
@@ -1,20 +1,25 @@
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function getDeletionTime(client, contractId) {
+  try {
+    const res = await client.contracts.getDeletionTime({ id: contractId });
+    log("================= Getting deletion time =================");
+    log(res);
+    log("================= Getting deletion time =================");
+  } catch (error) {
+    log("Error while getting deletion time " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
+  const contractId = 1834;
+
+  //Get Deletion time
+  await getDeletionTime(grid3, contractId);
 
-  grid3.contracts
-    .getDeletionTime({ id: 1834 })
-    .then(deleteionTime => {
-      log(deleteionTime);
-    })
-    .catch(err => {
-      throw err;
-    })
-    .finally(() => {
-      grid3.disconnect();
-    });
+  await grid3.disconnect();
 }
 
 main();
diff --git a/packages/grid_client/scripts/get_network_config.ts b/packages/grid_client/scripts/get_network_config.ts
index f1349b080e..c1cf35e607 100644
--- a/packages/grid_client/scripts/get_network_config.ts
+++ b/packages/grid_client/scripts/get_network_config.ts
@@ -1,18 +1,40 @@
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
-async function main() {
-  const grid3 = await getClient();
+async function listNetworks(client) {
   try {
-    const networks = await grid3.networks.list();
-    log(networks);
+    const res = await client.networks.list();
+    log("================= Listing Networks =================");
+    log(res);
+    log("================= Listing Networks =================");
+  } catch (error) {
+    log("Error while listing networks " + error);
+  }
+}
 
-    // to have value returned from this method,
-    // a machine or k8s should be deployed with 'addAccess' enabled in the network object.
-    const config = await grid3.networks.getWireGuardConfigs({ name: "test" });
-    log(config);
-  } finally {
-    grid3.disconnect();
+async function getNetworkConfig(client, networkName) {
+  try {
+    const res = await client.networks.getWireGuardConfigs({ name: networkName });
+    log("================= Getting network config =================");
+    log(res);
+    log("================= Getting network config =================");
+  } catch (error) {
+    log("Error while getting network config " + error);
   }
 }
+
+async function main() {
+  const grid3 = await getClient();
+  const networkName = "test";
+
+  //List networks
+  await listNetworks(grid3);
+
+  // to have value returned from this method,
+  // a machine or k8s should be deployed with 'addAccess' enabled in the network object.
+  await getNetworkConfig(grid3, networkName);
+
+  await grid3.disconnect();
+}
+
 main();
diff --git a/packages/grid_client/scripts/kubernetes.ts b/packages/grid_client/scripts/kubernetes.ts
index ec51391edd..97f7a0673f 100644
--- a/packages/grid_client/scripts/kubernetes.ts
+++ b/packages/grid_client/scripts/kubernetes.ts
@@ -1,16 +1,43 @@
-import { FilterOptions, K8SModel, KubernetesNodeModel, NetworkModel } from "../src";
+import { FilterOptions, K8SModel } from "../src";
 import { config, getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function deploy(client, k8s) {
+  try {
+    const res = await client.k8s.deploy(k8s);
+    log("================= Deploying K8s =================");
+    log(res);
+    log("================= Deploying K8s =================");
+  } catch (error) {
+    log("Error while Deploying the cluster " + error);
+  }
+}
+
+async function getDeployment(client, k8s) {
+  try {
+    const res = await client.k8s.getObj(k8s);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function cancel(client, k8s) {
+  try {
+    const res = await client.k8s.delete(k8s);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
-  // create network Object
-  const n = new NetworkModel();
-  n.name = "monNetwork";
-  n.ip_range = "10.238.0.0/16";
-  n.addAccess = true;
-
   const masterQueryOptions: FilterOptions = {
     cru: 2,
     mru: 2, // GB
@@ -27,50 +54,53 @@ async function main() {
     farmId: 1,
   };
 
-  // create k8s node Object
-  const master = new KubernetesNodeModel();
-  master.name = "master";
-  master.node_id = +(await grid3.capacity.filterNodes(masterQueryOptions))[0].nodeId;
-  master.cpu = 1;
-  master.memory = 1024;
-  master.rootfs_size = 0;
-  master.disk_size = 1;
-  master.public_ip = false;
-  master.planetary = true;
-
-  // create k8s node Object
-  const worker = new KubernetesNodeModel();
-  worker.name = "worker";
-  worker.node_id = +(await grid3.capacity.filterNodes(workerQueryOptions))[0].nodeId;
-  worker.cpu = 1;
-  worker.memory = 1024;
-  worker.rootfs_size = 0;
-  worker.disk_size = 1;
-  worker.public_ip = false;
-  worker.planetary = true;
-
-  // create k8s Object
-  const k = new K8SModel();
-  k.name = "testk8s";
-  k.secret = "secret";
-  k.network = n;
-  k.masters = [master];
-  k.workers = [worker];
-  k.metadata = "";
-  k.description = "test deploying k8s via ts grid3 client";
-  k.ssh_key = config.ssh_key;
+  const k: K8SModel = {
+    name: "testk8s",
+    secret: "secret",
+    network: {
+      name: "monNetwork",
+      ip_range: "10.238.0.0/16",
+      addAccess: true,
+    },
+    masters: [
+      {
+        name: "master",
+        node_id: +(await grid3.capacity.filterNodes(masterQueryOptions))[0].nodeId,
+        cpu: 1,
+        memory: 1024,
+        rootfs_size: 0,
+        disk_size: 1,
+        public_ip: false,
+        public_ip6: false,
+        planetary: true,
+      },
+    ],
+    workers: [
+      {
+        name: "worker",
+        node_id: +(await grid3.capacity.filterNodes(workerQueryOptions))[0].nodeId,
+        cpu: 1,
+        memory: 1024,
+        rootfs_size: 0,
+        disk_size: 1,
+        public_ip: false,
+        public_ip6: false,
+        planetary: true,
+      },
+    ],
+    metadata: "",
+    description: "test deploying k8s via ts grid3 client",
+    ssh_key: config.ssh_key,
+  };
 
-  // deploy
-  const res = await grid3.k8s.deploy(k);
-  log(res);
+  //Deploy K8s
+  await deploy(grid3, k);
 
-  // get the deployment
-  const l = await grid3.k8s.getObj(k.name);
-  log(l);
+  //Get the deployment
+  await getDeployment(grid3, k.name);
 
-  // // delete
-  // const d = await grid3.k8s.delete({ name: k.name });
-  // log(d);
+  //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: k.name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/kubernetes_with_qsfs.ts b/packages/grid_client/scripts/kubernetes_with_qsfs.ts
index 184a0597cd..0f5b62e6db 100644
--- a/packages/grid_client/scripts/kubernetes_with_qsfs.ts
+++ b/packages/grid_client/scripts/kubernetes_with_qsfs.ts
@@ -1,7 +1,62 @@
-import { FilterOptions, K8SModel, KubernetesNodeModel, NetworkModel } from "../src";
+import { FilterOptions, K8SModel, QSFSZDBSModel } from "../src";
 import { config, getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function deployQsfs(client, qsfs) {
+  try {
+    const res = await client.qsfs_zdbs.deploy(qsfs);
+    log("================= Deploying QSFS =================");
+    log(res);
+    log("================= Deploying QSFS =================");
+  } catch (error) {
+    log("Error while Deploying QSFS " + error);
+  }
+}
+
+async function deploy(client, k8s) {
+  try {
+    const res = await client.k8s.deploy(k8s);
+    log("================= Deploying K8s =================");
+    log(res);
+    log("================= Deploying K8s =================");
+  } catch (error) {
+    log("Error while Deploying the cluster " + error);
+  }
+}
+
+async function getDeployment(client, k8s) {
+  try {
+    const res = await client.k8s.getObj(k8s);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function cancel(client, k8s) {
+  try {
+    const res = await client.k8s.delete(k8s);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
+async function deleteQsfs(client, qsfs) {
+  try {
+    const res = await client.qsfs_zdbs.delete(qsfs);
+    log("================= Deleting QSFS =================");
+    log(res);
+    log("================= Deleting QSFS =================");
+  } catch (error) {
+    log("Error while deleting qsfs " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
@@ -39,7 +94,7 @@ async function main() {
   }
 
   //create qsfs object
-  const qsfs = {
+  const qsfs: QSFSZDBSModel = {
     name: qsfs_name,
     count: 8,
     node_ids: qsfsNodes,
@@ -49,75 +104,68 @@ async function main() {
     metadata: "",
   };
 
-  // create network Object
-  const n = new NetworkModel();
-  n.name = "k8sqsfsNetwork";
-  n.ip_range = "10.238.0.0/16";
-
-  // create k8s node Object
-  const master = new KubernetesNodeModel();
-  master.name = "master";
-  master.node_id = +(await grid3.capacity.filterNodes(masterQueryOptions))[0].nodeId;
-  master.cpu = 1;
-  master.memory = 1024;
-  master.rootfs_size = 0;
-  master.disk_size = 1;
-  master.public_ip = false;
-  master.planetary = true;
-  master.qsfs_disks = [
-    {
-      qsfs_zdbs_name: qsfs_name,
-      name: "testQsfsK8sd1",
-      minimal_shards: 2,
-      expected_shards: 4,
-      encryption_key: "hamada",
-      prefix: "hamada",
-      cache: 1,
-      mountpoint: "/myqsfsdisk",
+  const k: K8SModel = {
+    name: "testk8sqsfs",
+    secret: "secret",
+    network: {
+      name: "k8sqsfsNetwork",
+      ip_range: "10.238.0.0/16",
     },
-  ];
-
-  // create k8s node Object
-  const worker = new KubernetesNodeModel();
-  worker.name = "worker";
-  worker.node_id = +(await grid3.capacity.filterNodes(workerQueryOptions))[0].nodeId;
-  worker.cpu = 1;
-  worker.memory = 1024;
-  worker.rootfs_size = 0;
-  worker.disk_size = 1;
-  worker.public_ip = false;
-  worker.planetary = true;
-
-  // create k8s Object
-  const k = new K8SModel();
-  k.name = "testk8sqsfs";
-  k.secret = "secret";
-  k.network = n;
-  k.masters = [master];
-  k.workers = [worker];
-  k.metadata = "";
-  k.description = "test deploying k8s via ts grid3 client";
-  k.ssh_key = config.ssh_key;
-
-  // deploy qsfs
-  const res = await grid3.qsfs_zdbs.deploy(qsfs);
-  log(">>>>>>>>>>>>>>>QSFS backend has been created<<<<<<<<<<<<<<<");
-  log(res);
-
-  const kubernetes = await grid3.k8s.deploy(k);
-  log(">>>>>>>>>>>>>>>kubernetes has been created<<<<<<<<<<<<<<<");
-  log(kubernetes);
-
-  // get the deployment
-  const l = await grid3.k8s.getObj(k.name);
-  log(">>>>>>>>>>>>>>>Deployment result<<<<<<<<<<<<<<<");
-  log(l);
-
-  // // delete
-  // const d = await grid3.k8s.delete({ name: k.name });
-  // log(d);
-  // const r = await grid3.qsfs_zdbs.delete({ name: qsfs_name });
-  // log(r);
+    masters: [
+      {
+        name: "master",
+        node_id: +(await grid3.capacity.filterNodes(masterQueryOptions))[0].nodeId,
+        cpu: 1,
+        memory: 1024,
+        rootfs_size: 0,
+        disk_size: 1,
+        public_ip: false,
+        public_ip6: false,
+        planetary: true,
+        qsfs_disks: [
+          {
+            qsfs_zdbs_name: qsfs_name,
+            name: "testQsfsK8sd1",
+            minimal_shards: 2,
+            expected_shards: 4,
+            encryption_key: "hamada",
+            prefix: "hamada",
+            cache: 1,
+            mountpoint: "/myqsfsdisk",
+          },
+        ],
+      },
+    ],
+    workers: [
+      {
+        name: "worker",
+        node_id: +(await grid3.capacity.filterNodes(workerQueryOptions))[0].nodeId,
+        cpu: 1,
+        memory: 1024,
+        rootfs_size: 0,
+        disk_size: 1,
+        public_ip: false,
+        public_ip6: false,
+        planetary: true,
+      },
+    ],
+    metadata: "",
+    description: "test deploying k8s via ts grid3 client",
+    ssh_key: config.ssh_key,
+  };
+
+  //Deploy QSFS
+  await deployQsfs(grid3, qsfs);
+
+  //Deploy K8s
+  await deploy(grid3, k);
+
+  //Get the deployment
+  await getDeployment(grid3, k.name);
+
+  // //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: k.name });
+  // await deleteQsfs(grid3, { name: qsfs_name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/kvstore_example.ts b/packages/grid_client/scripts/kvstore_example.ts
index ffac66da99..8916c879cd 100644
--- a/packages/grid_client/scripts/kvstore_example.ts
+++ b/packages/grid_client/scripts/kvstore_example.ts
@@ -1,6 +1,50 @@
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function setKey(client, key) {
+  try {
+    const res = await client.kvstore.set(key);
+    log("================= Setting the key =================");
+    log(res);
+    log("================= Setting the key =================");
+  } catch (error) {
+    log("Error while setting the key " + error);
+  }
+}
+
+async function listAllKeys(client) {
+  try {
+    const res = await client.kvstore.list();
+    log("================= Listing all keys =================");
+    log(res);
+    log("================= Listing all keys =================");
+  } catch (error) {
+    log("Error while listing keys " + error);
+  }
+}
+
+async function getKey(client, key) {
+  try {
+    const res = await client.kvstore.get(key);
+    log("================= Getting key =================");
+    log(res);
+    log("================= Getting key =================");
+  } catch (error) {
+    log("Error while getting key " + error);
+  }
+}
+
+async function removeKey(client, key) {
+  try {
+    const res = await client.kvstore.remove(key);
+    log("================= Removing key =================");
+    log(res);
+    log("================= Removing key =================");
+  } catch (error) {
+    log("Error while removing key " + error);
+  }
+}
+
 /*
 KVStore example usage:
 */
@@ -11,28 +55,24 @@ async function main() {
 
   //then every module will use the KVStore to save its configuration and restore it.
 
-  // also you can use it like this:
-  const db = gridClient.kvstore;
-
   // set key
   const key = "hamada";
   const exampleObj = {
     key1: "value1",
     key2: 2,
   };
-  // set key
-  await db.set({ key, value: JSON.stringify(exampleObj) });
 
-  // list all the keys
-  const keys = await db.list();
-  log(keys);
+  //Set key
+  await setKey(gridClient, { key, value: JSON.stringify(exampleObj) });
+
+  //List all keys
+  await listAllKeys(gridClient);
 
-  // get the key
-  const data = await db.get({ key });
-  log(JSON.parse(data));
+  //Get key
+  await getKey(gridClient, { key });
 
-  // remove the key
-  await db.remove({ key });
+  //Remove key
+  await removeKey(gridClient, { key });
 
   await gridClient.disconnect();
 }
diff --git a/packages/grid_client/scripts/list_all_contracts.ts b/packages/grid_client/scripts/list_all_contracts.ts
index f21cd3b7c7..53666d1660 100644
--- a/packages/grid_client/scripts/list_all_contracts.ts
+++ b/packages/grid_client/scripts/list_all_contracts.ts
@@ -1,20 +1,24 @@
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function listAllContracts(client) {
+  try {
+    const res = await client.contracts.listMyContracts();
+    log("================= Listing all contracts =================");
+    log(res);
+    log("================= Listing all contracts =================");
+  } catch (error) {
+    log("Error while listing contracts " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
-  grid3.contracts
-    .listMyContracts()
-    .then(res => {
-      log(res);
-    })
-    .catch(err => {
-      throw err;
-    })
-    .finally(() => {
-      grid3.disconnect();
-    });
+  //List all contracts
+  await listAllContracts(grid3);
+
+  await grid3.disconnect();
 }
 
 main();
diff --git a/packages/grid_client/scripts/multiple_vms.ts b/packages/grid_client/scripts/multiple_vms.ts
index 20b52326eb..235e4b8ef1 100644
--- a/packages/grid_client/scripts/multiple_vms.ts
+++ b/packages/grid_client/scripts/multiple_vms.ts
@@ -1,20 +1,42 @@
-import { DiskModel, FilterOptions, MachineModel, MachinesModel, NetworkModel } from "../src";
+import { FilterOptions, MachinesModel } from "../src";
 import { config, getClient } from "./client_loader";
 import { log } from "./utils";
 
-async function main() {
-  const grid3 = await getClient();
+async function deploy(client, vms) {
+  try {
+    const res = await client.machines.deploy(vms);
+    log("================= Deploying VM =================");
+    log(res);
+    log("================= Deploying VM =================");
+  } catch (error) {
+    log("Error while Deploying the VM " + error);
+  }
+}
 
-  // create network Object
-  const n = new NetworkModel();
-  n.name = "monNetwork";
-  n.ip_range = "10.238.0.0/16";
+async function getDeployment(client, vms) {
+  try {
+    const res = await client.machines.getObj(vms);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function cancel(client, vms) {
+  try {
+    const res = await client.machines.delete(vms);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
 
-  // create disk Object
-  const disk1 = new DiskModel();
-  disk1.name = "newDisk1";
-  disk1.size = 1;
-  disk1.mountpoint = "/newDisk1";
+async function main() {
+  const grid3 = await getClient();
 
   const vmQueryOptions: FilterOptions = {
     cru: 1,
@@ -24,63 +46,70 @@ async function main() {
     farmId: 1,
   };
 
-  // create vm node Object
-  const vm1 = new MachineModel();
-  vm1.name = "testvm1";
-  vm1.node_id = +(await grid3.capacity.filterNodes(vmQueryOptions))[0].nodeId;
-  vm1.disks = [disk1];
-  vm1.public_ip = false;
-  vm1.planetary = true;
-  vm1.cpu = 1;
-  vm1.memory = 1024;
-  vm1.rootfs_size = 0;
-  vm1.flist = "https://hub.grid.tf/tf-official-apps/base:latest.flist";
-  vm1.entrypoint = "/sbin/zinit init";
-  vm1.env = {
-    SSH_KEY: config.ssh_key,
-  };
-
-  // create disk Object
-  const disk2 = new DiskModel();
-  disk2.name = "newDisk2";
-  disk2.size = 1;
-  disk2.mountpoint = "/newDisk2";
-
-  // create another vm node Object
-  const vm2 = new MachineModel();
-  vm2.name = "testvm2";
-  vm2.node_id = +(await grid3.capacity.filterNodes(vmQueryOptions))[1].nodeId;
-  vm2.disks = [disk2];
-  vm2.public_ip = false;
-  vm2.planetary = true;
-  vm2.cpu = 1;
-  vm2.memory = 1024;
-  vm2.rootfs_size = 0;
-  vm2.flist = "https://hub.grid.tf/tf-official-apps/base:latest.flist";
-  vm2.entrypoint = "/sbin/zinit init";
-  vm2.env = {
-    SSH_KEY: config.ssh_key,
+  const vms: MachinesModel = {
+    name: "monVMS2",
+    network: {
+      name: "monNetwork",
+      ip_range: "10.238.0.0/16",
+    },
+    machines: [
+      {
+        name: "testvm1",
+        node_id: +(await grid3.capacity.filterNodes(vmQueryOptions))[0].nodeId,
+        disks: [
+          {
+            name: "newDisk1",
+            size: 5,
+            mountpoint: "/newDisk1",
+          },
+        ],
+        public_ip: false,
+        public_ip6: false,
+        planetary: true,
+        cpu: 1,
+        memory: 1024,
+        rootfs_size: 0,
+        flist: "https://hub.grid.tf/tf-official-apps/base:latest.flist",
+        entrypoint: "/sbin/zinit init",
+        env: {
+          SSH_KEY: config.ssh_key,
+        },
+      },
+      {
+        name: "testvm2",
+        node_id: +(await grid3.capacity.filterNodes(vmQueryOptions))[1].nodeId,
+        disks: [
+          {
+            name: "newDisk2",
+            size: 5,
+            mountpoint: "/newDisk2",
+          },
+        ],
+        public_ip: false,
+        public_ip6: false,
+        planetary: true,
+        cpu: 1,
+        memory: 1024,
+        rootfs_size: 0,
+        flist: "https://hub.grid.tf/tf-official-apps/base:latest.flist",
+        entrypoint: "/sbin/zinit init",
+        env: {
+          SSH_KEY: config.ssh_key,
+        },
+      },
+    ],
+    metadata: "",
+    description: "test deploying VMs via ts grid3 client",
   };
 
-  // create VMs Object
-  const vms = new MachinesModel();
-  vms.name = "monVMS";
-  vms.network = n;
-  vms.machines = [vm1, vm2];
-  vms.metadata = "";
-  vms.description = "test deploying VMs via ts grid3 client";
-
-  // deploy vms
-  const res = await grid3.machines.deploy(vms);
-  log(res);
+  //Deploy VMs
+  await deploy(grid3, vms);
 
-  // get the deployment
-  const l = await grid3.machines.getObj(vms.name);
-  log(l);
+  //Get the deployment
+  await getDeployment(grid3, vms.name);
 
-  // // delete
-  // const d = await grid3.machines.delete({ name: vms.name });
-  // log(d);
+  // //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: vms.name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/name_gateway.ts b/packages/grid_client/scripts/name_gateway.ts
index 5de648354a..683636df57 100644
--- a/packages/grid_client/scripts/name_gateway.ts
+++ b/packages/grid_client/scripts/name_gateway.ts
@@ -2,7 +2,40 @@ import { FilterOptions, GatewayNameModel } from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
-// read more about the gateway types in this doc: https://github.com/threefoldtech/zos/tree/main/docs/gateway
+async function deploy(client, gw) {
+  try {
+    const res = await client.gateway.deploy_name(gw);
+    log("================= Deploying name gateway =================");
+    log(res);
+    log("================= Deploying name gateway =================");
+  } catch (error) {
+    log("Error while Deploying the gateway " + error);
+  }
+}
+
+async function getDeployment(client, gw) {
+  try {
+    const res = await client.gateway.getObj(gw);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function cancel(client, gw) {
+  try {
+    const res = await client.gateway.delete_name(gw);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
+// read more about the gateway types in this doc: https://github.com/threefoldtech/zos/tree/main/docs/internals/gateway
 async function main() {
   const grid3 = await getClient();
 
@@ -11,24 +44,22 @@ async function main() {
     farmId: 1,
   };
 
-  const gw = new GatewayNameModel();
-  gw.name = "test";
-  gw.node_id = +(await grid3.capacity.filterNodes(gatewayQueryOptions))[0].nodeId;
-  gw.tls_passthrough = false;
-  // the backends have to be in this format `http://ip:port` or `https://ip:port`, and the `ip` pingable from the node so using the ygg ip or public ip if available.
-  gw.backends = ["http://185.206.122.35:8000"];
+  const gw: GatewayNameModel = {
+    name: "test",
+    node_id: +(await grid3.capacity.filterNodes(gatewayQueryOptions))[0].nodeId,
+    tls_passthrough: false,
+    // the backends have to be in this format `http://ip:port` or `https://ip:port`, and the `ip` pingable from the node so using the ygg ip or public ip if available.
+    backends: ["http://185.206.122.35:8000"],
+  };
 
-  // deploy
-  const res = await grid3.gateway.deploy_name(gw);
-  log(res);
+  //Deploy gateway
+  await deploy(grid3, gw);
 
-  // get the deployment
-  const l = await grid3.gateway.getObj(gw.name);
-  log(l);
+  //Get the deployment
+  await getDeployment(grid3, gw.name);
 
-  // // delete
-  // const d = await grid3.gateway.delete_name({ name: gw.name });
-  // log(d);
+  //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: gw.name });
 
   grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/renting.ts b/packages/grid_client/scripts/renting.ts
index 048576135d..e5ecdf0419 100644
--- a/packages/grid_client/scripts/renting.ts
+++ b/packages/grid_client/scripts/renting.ts
@@ -16,36 +16,6 @@ import { GridClient } from "../src/client";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
-// Main function
-async function main() {
-  try {
-    // Initialize the client
-    const client = await getClient();
-
-    // Get a list of rentable nodes
-    const rentableNodes = await getRentableNodes(client);
-
-    // If there are rentable nodes available
-    if (rentableNodes.length) {
-      const reservedNodeId = rentableNodes[0].nodeId;
-
-      // Reserve the first available node
-      await reserveNode(client, reservedNodeId);
-
-      // Get the rent contract for the reserved node
-      await getRentContract(client, reservedNodeId);
-
-      // Uncomment the line below if you intend to perform unreserve.
-      // await unreserve(client, reservedNodeId);
-    }
-
-    // Disconnect the client
-    await client.disconnect();
-  } catch (error) {
-    console.error("An error occurred:", error);
-  }
-}
-
 // Get rent contract ID for a node
 async function getRentContract(client: GridClient, nodeId: number) {
   try {
@@ -103,5 +73,35 @@ async function unreserve(client: GridClient, nodeId: number) {
   }
 }
 
+// Main function
+async function main() {
+  try {
+    // Initialize the client
+    const client = await getClient();
+
+    // Get a list of rentable nodes
+    const rentableNodes = await getRentableNodes(client);
+
+    // If there are rentable nodes available
+    if (rentableNodes.length) {
+      const reservedNodeId = rentableNodes[0].nodeId;
+
+      // Reserve the first available node
+      await reserveNode(client, reservedNodeId);
+
+      // Get the rent contract for the reserved node
+      await getRentContract(client, reservedNodeId);
+
+      // Uncomment the line below if you intend to perform unreserve.
+      // await unreserve(client, reservedNodeId);
+    }
+
+    // Disconnect the client
+    await client.disconnect();
+  } catch (error) {
+    console.error("An error occurred:", error);
+  }
+}
+
 // Call the main function
 main();
diff --git a/packages/grid_client/scripts/set_node_power.ts b/packages/grid_client/scripts/set_node_power.ts
index 81fb017ca7..81328959e0 100644
--- a/packages/grid_client/scripts/set_node_power.ts
+++ b/packages/grid_client/scripts/set_node_power.ts
@@ -1,5 +1,17 @@
 import { NodePowerModel } from "../src/modules";
 import { getClient } from "./client_loader";
+import { log } from "./utils";
+
+async function setNodePower(client, nodePower) {
+  try {
+    const res = await client.nodes.setNodePower(nodePower);
+    log("================= Setting node power =================");
+    log(res);
+    log("================= Setting node power =================");
+  } catch (error) {
+    log("Error while setting node power " + error);
+  }
+}
 
 async function main() {
   const grid3 = await getClient();
@@ -9,11 +21,8 @@ async function main() {
     power: true,
   };
 
-  try {
-    await grid3.nodes.setNodePower(nodePower);
-  } catch (error) {
-    console.log(error);
-  }
+  //Set node power
+  await setNodePower(grid3, nodePower);
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/single_vm.ts b/packages/grid_client/scripts/single_vm.ts
index 4f12591a91..79f19d26ea 100644
--- a/packages/grid_client/scripts/single_vm.ts
+++ b/packages/grid_client/scripts/single_vm.ts
@@ -1,57 +1,85 @@
-import { DiskModel, MachineModel, MachinesModel, NetworkModel } from "../src";
+import { MachinesModel } from "../src";
 import { config, getClient } from "./client_loader";
 import { log } from "./utils";
 
-// create network Object
-const n = new NetworkModel();
-n.name = "wedtest";
-n.ip_range = "10.249.0.0/16";
-
-// create disk Object
-const disk = new DiskModel();
-disk.name = "wedDisk";
-disk.size = 8;
-disk.mountpoint = "/testdisk";
-
-// create vm node Object
-const vm = new MachineModel();
-vm.name = "testvm";
-vm.node_id = 17;
-vm.disks = [disk];
-vm.public_ip = false;
-vm.planetary = true;
-vm.cpu = 1;
-vm.memory = 1024 * 2;
-vm.rootfs_size = 0;
-vm.flist = "https://hub.grid.tf/tf-official-apps/base:latest.flist";
-vm.entrypoint = "/sbin/zinit init";
-vm.env = {
-  SSH_KEY: config.ssh_key,
-};
-// vm.ip = "10.249.2.5" // create a machine with specific private ip
-
-// create VMs Object
-const vms = new MachinesModel();
-vms.name = "newVMS";
-vms.network = n;
-vms.machines = [vm];
-vms.metadata = "";
-vms.description = "test deploying VMs via ts grid3 client";
+async function deploy(client, vms) {
+  try {
+    const res = await client.machines.deploy(vms);
+    log("================= Deploying VM =================");
+    log(res);
+    log("================= Deploying VM =================");
+  } catch (error) {
+    log("Error while Deploying the VM " + error);
+  }
+}
+
+async function getDeployment(client, vms) {
+  try {
+    const res = await client.machines.getObj(vms);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function cancel(client, vms) {
+  try {
+    const res = await client.machines.delete(vms);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
 
 async function main() {
   const grid3 = await getClient();
 
-  // deploy vms
-  const res = await grid3.machines.deploy(vms);
-  log(res);
+  const vms: MachinesModel = {
+    name: "newVMS",
+    network: {
+      name: "wedtest",
+      ip_range: "10.249.0.0/16",
+    },
+    machines: [
+      {
+        name: "testvm",
+        node_id: 17,
+        disks: [
+          {
+            name: "wedDisk",
+            size: 8,
+            mountpoint: "/testdisk",
+          },
+        ],
+        public_ip: false,
+        public_ip6: false,
+        planetary: true,
+        cpu: 1,
+        memory: 1024 * 2,
+        rootfs_size: 0,
+        flist: "https://hub.grid.tf/tf-official-apps/base:latest.flist",
+        entrypoint: "/sbin/zinit init",
+        env: {
+          SSH_KEY: config.ssh_key,
+        },
+      },
+    ],
+    metadata: "",
+    description: "test deploying VMs via ts grid3 client",
+  };
+
+  //Deploy VMs
+  await deploy(grid3, vms);
 
-  // get the deployment
-  const l = await grid3.machines.getObj(vms.name);
-  log(l);
+  //Get the deployment
+  await getDeployment(grid3, vms.name);
 
-  // // delete
-  // const d = await grid3.machines.delete({ name: vms.name });
-  // log(d);
+  //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: vms.name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/stellar.ts b/packages/grid_client/scripts/stellar.ts
index 9660f8a7c2..f155e2c321 100644
--- a/packages/grid_client/scripts/stellar.ts
+++ b/packages/grid_client/scripts/stellar.ts
@@ -1,37 +1,197 @@
+import {
+  BlockchainDeleteModel,
+  BlockchainGetModel,
+  BlockchainSignModel,
+  StellarWalletBalanceByAddressModel,
+  StellarWalletCreateModel,
+  StellarWalletInitModel,
+  StellarWalletTransferModel,
+} from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function create(client, account) {
+  try {
+    const res = await client.stellar.create(account);
+    log("================= Creating account =================");
+    log(res);
+    log("================= Creating account =================");
+    return res;
+  } catch (error) {
+    log("Error while creating account " + error);
+  }
+}
+
+async function init(client, account) {
+  try {
+    const res = await client.stellar.init(account);
+    log("================= Initializing account =================");
+    log(res);
+    log("================= Initializing account =================");
+  } catch (error) {
+    log("Error while initializing account " + error);
+  }
+}
+
+async function list(client) {
+  try {
+    const res = await client.stellar.list();
+    log("================= Listing account =================");
+    log(res);
+    log("================= Listing account =================");
+  } catch (error) {
+    log("Error while listing account " + error);
+  }
+}
+
+async function exist(client, account) {
+  try {
+    const res = await client.stellar.exist(account);
+    log("================= Checking account =================");
+    log(res);
+    log("================= Checking account =================");
+  } catch (error) {
+    log("Error while checking account " + error);
+  }
+}
+
+async function get(client, account) {
+  try {
+    const res = await client.stellar.get(account);
+    log("================= Getting account =================");
+    log(res);
+    log("================= Getting account =================");
+    return res;
+  } catch (error) {
+    log("Error while getting account " + error);
+  }
+}
+
+async function balanceByAddress(client, address) {
+  try {
+    const res = await client.stellar.balance_by_address(address);
+    log("================= Getting balance =================");
+    log(res);
+    log("================= Getting balance =================");
+  } catch (error) {
+    log("Error while getting balance " + error);
+  }
+}
+
+async function assets(client, account) {
+  try {
+    const res = await client.stellar.assets(account);
+    log("================= Getting assets =================");
+    log(res);
+    log("================= Getting assets =================");
+  } catch (error) {
+    log("Error while getting assets " + error);
+  }
+}
+
+async function sign(client, message) {
+  try {
+    const res = await client.stellar.sign(message);
+    log("================= Signing message =================");
+    log(res);
+    log("================= Signing message =================");
+  } catch (error) {
+    log("Error while signing message " + error);
+  }
+}
+
+async function pay(client, payment) {
+  try {
+    const res = await client.stellar.pay(payment);
+    log("================= Paying =================");
+    log(res);
+    log("================= Paying =================");
+  } catch (error) {
+    log("Error while paying " + error);
+  }
+}
+
+async function deleteAccount(client, account) {
+  try {
+    const res = await client.stellar.delete(account);
+    log("================= Deleting account =================");
+    log(res);
+    log("================= Deleting account =================");
+  } catch (error) {
+    log("Error while deleting account " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
-  const created_account = await grid3.stellar.create({ name: "stellarTest" });
-  log(created_account);
+  const createAccount: StellarWalletCreateModel = {
+    name: "stellarTest",
+  };
 
-  await grid3.stellar.init({
+  const account: StellarWalletInitModel = {
     name: "stellarTest2",
     secret: "SBCWGJ4A4IHDUUXPASQBL7VKGZGNRMVNV66GO5P6FU6Q4NDKHIHZFRKI",
-  });
+  };
+
+  const getAccount: BlockchainGetModel = {
+    name: "stellarTest2",
+  };
+
+  const signMessage: BlockchainSignModel = {
+    name: "stellarTest2",
+    content: "message",
+  };
+
+  const deleteAccount1: BlockchainDeleteModel = {
+    name: "stellarTest",
+  };
 
-  log(await grid3.stellar.list());
-  log(await grid3.stellar.exist({ name: "stellarTest2" }));
+  const deleteAccount2: BlockchainDeleteModel = {
+    name: "stellarTest2",
+  };
+
+  //Create account
+  const created_account = await create(grid3, createAccount);
+
+  //Initialize account
+  await init(grid3, account);
+
+  //List accounts
+  await list(grid3);
 
-  const test_account = await grid3.stellar.get({ name: "stellarTest2" });
-  log(test_account);
+  //Check if the account exists
+  await exist(grid3, getAccount);
 
-  log(await grid3.stellar.balance_by_address({ address: test_account.public_key }));
-  log(await grid3.stellar.assets({ name: "stellarTest2" }));
-  log(await grid3.stellar.sign({ name: "stellarTest2", content: "message" }));
+  //Get account
+  const test_account = await get(grid3, getAccount);
 
-  await grid3.stellar.pay({
+  //Get balance by account address
+  const getBalance: StellarWalletBalanceByAddressModel = {
+    address: test_account.public_key,
+  };
+  await balanceByAddress(grid3, { address: getBalance });
+
+  //Get account assets
+  await assets(grid3, getAccount);
+
+  //Sign message
+  await sign(grid3, signMessage);
+
+  //Pay
+  const transaction: StellarWalletTransferModel = {
     name: "stellarTest2",
     address_dest: created_account.public_key,
     amount: 1,
     description: "paytest",
     asset: "XLM",
-  });
+  };
+
+  await pay(grid3, transaction);
 
-  log(await grid3.stellar.delete({ name: "stellarTest" }));
-  log(await grid3.stellar.delete({ name: "stellarTest2" }));
+  //Delete account
+  await deleteAccount(grid3, deleteAccount1);
+  await deleteAccount(grid3, deleteAccount2);
 
   grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/test_node_filters.ts b/packages/grid_client/scripts/test_node_filters.ts
index cf606b9eb0..b2f187ef0d 100644
--- a/packages/grid_client/scripts/test_node_filters.ts
+++ b/packages/grid_client/scripts/test_node_filters.ts
@@ -1,38 +1,96 @@
+import { FilterOptions, NodeFreeResourcesModel, NodesByFarmIdModel } from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
-async function main() {
-  const grid3 = await getClient();
+async function getFarms(client) {
+  try {
+    const res = await client.capacity.getFarms();
+    log("================= Getting farms =================");
+    log(res);
+    log("================= Getting farms =================");
+  } catch (error) {
+    log("Error while getting farms " + error);
+  }
+}
+
+async function getNodes(client) {
+  try {
+    const res = await client.capacity.getNodes();
+    log("================= Getting nodes =================");
+    log(res);
+    log("================= Getting nodes =================");
+  } catch (error) {
+    log("Error while getting nodes " + error);
+  }
+}
+
+async function getNodesByFarmId(client, farmId) {
+  try {
+    const res = await client.capacity.getNodesByFarmId(farmId);
+    log("================= Getting nodes =================");
+    log(res);
+    log("================= Getting nodes =================");
+  } catch (error) {
+    log("Error while getting nodes " + error);
+  }
+}
+
+async function getNodeFreeResources(client, nodeId) {
   try {
-    log("getFarms");
-    const f = await grid3.capacity.getFarms();
-    log(f);
-
-    log("getNodes");
-    const n = await grid3.capacity.getNodes();
-    log(n);
-
-    log("getNodesByFarmID(1)");
-    const z = await grid3.capacity.getNodesByFarmId({ farmId: 1 });
-    log(z);
-
-    log("NodeFreeResources(1)");
-    const c = await grid3.capacity.getNodeFreeResources({ nodeId: 14 });
-    log(c);
-
-    log("filterNodes");
-    const x = await grid3.capacity.filterNodes({
-      country: "Belgium",
-      publicIPs: true,
-      cru: 20,
-      sru: 50,
-    });
-    log(x);
-  } catch (e) {
-    console.error(e);
-  } finally {
-    await grid3.disconnect();
+    const res = await client.capacity.getNodeFreeResources(nodeId);
+    log("================= Getting resources =================");
+    log(res);
+    log("================= Getting resources =================");
+  } catch (error) {
+    log("Error while getting resources " + error);
   }
 }
 
+async function filterNodes(client, filterOptions) {
+  try {
+    const res = await client.capacity.filterNodes(filterOptions);
+    log("================= Filtering nodes =================");
+    log(res);
+    log("================= Filtering nodes =================");
+  } catch (error) {
+    log("Error while filtering nodes " + error);
+  }
+}
+
+async function main() {
+  const grid3 = await getClient();
+
+  const nodeOptions: FilterOptions = {
+    country: "Belgium",
+    publicIPs: true,
+    cru: 20,
+    sru: 50,
+  };
+
+  const farm: NodesByFarmIdModel = {
+    farmId: 1,
+  };
+
+  const node: NodeFreeResourcesModel = {
+    nodeId: 14,
+  };
+
+  //Get farms
+  await getFarms(grid3);
+
+  //Get nodes
+  await getNodes(grid3);
+
+  //Get nodes by farm Id
+  await getNodesByFarmId(grid3, farm);
+
+  //Get nodes' free resources
+  await getNodeFreeResources(grid3, node);
+
+  //Filter nodes
+  await filterNodes(grid3, nodeOptions);
+
+  await grid3.disconnect();
+}
+
 main();
diff --git a/packages/grid_client/scripts/tfchain/create_account.ts b/packages/grid_client/scripts/tfchain/create_account.ts
index 75c164e3b9..0665ba5b3f 100644
--- a/packages/grid_client/scripts/tfchain/create_account.ts
+++ b/packages/grid_client/scripts/tfchain/create_account.ts
@@ -1,16 +1,32 @@
 import { default as urlParser } from "url-parse";
 
+import { TfchainCreateModel } from "../../src";
 import { getClient } from "../client_loader";
+import { log } from "../utils";
+
+async function createAccount(client, account) {
+  try {
+    const res = await client.tfchain.create(account);
+    log("================= Creating account =================");
+    log(res);
+    log("================= Creating account =================");
+  } catch (error) {
+    log("Error while creating account" + error);
+  }
+}
 
 async function main() {
   const grid3 = await getClient();
   const urls = grid3.getDefaultUrls(grid3.clientOptions.network);
   const relay = urlParser(urls.relay).hostname;
-  const res = await grid3.tfchain.create({
+  const account: TfchainCreateModel = {
     relay: relay,
     name: "newacc",
-  });
-  console.log(res);
+  };
+
+  //Create Account
+  await createAccount(grid3, account);
+
   await grid3.disconnect();
 }
 
diff --git a/packages/grid_client/scripts/tfchain/get_account.ts b/packages/grid_client/scripts/tfchain/get_account.ts
index 72d8472aae..1d4df69f4a 100644
--- a/packages/grid_client/scripts/tfchain/get_account.ts
+++ b/packages/grid_client/scripts/tfchain/get_account.ts
@@ -1,9 +1,27 @@
+import { BlockchainGetModel } from "../../src";
 import { getClient } from "../client_loader";
+import { log } from "../utils";
+
+async function getAccount(client, account) {
+  try {
+    const res = await client.tfchain.get(account);
+    log("================= Getting account =================");
+    log(res);
+    log("================= Getting account =================");
+  } catch (error) {
+    log("Error while getting account" + error);
+  }
+}
 
 async function main() {
   const grid3 = await getClient();
-  const account = await grid3.tfchain.get({ name: "newacc1" });
-  console.log("address: " + account.public_key);
+  const account: BlockchainGetModel = {
+    name: "newacc",
+  };
+
+  //Get Account
+  await getAccount(grid3, account);
+
   await grid3.disconnect();
 }
 
diff --git a/packages/grid_client/scripts/tfchain/get_balance_by_address.ts b/packages/grid_client/scripts/tfchain/get_balance_by_address.ts
index 871796cc91..bf24300c34 100644
--- a/packages/grid_client/scripts/tfchain/get_balance_by_address.ts
+++ b/packages/grid_client/scripts/tfchain/get_balance_by_address.ts
@@ -1,11 +1,27 @@
+import { TfchainWalletBalanceByAddressModel } from "../../src";
 import { getClient } from "../client_loader";
+import { log } from "../utils";
+
+async function getBalanceByAddress(client, address) {
+  try {
+    const res = await client.tfchain.balanceByAddress(address);
+    log("================= Getting balance =================");
+    log(res);
+    log("================= Getting balance =================");
+  } catch (error) {
+    log("Error while getting balance" + error);
+  }
+}
 
 async function main() {
   const grid3 = await getClient();
-  const balance = await grid3.tfchain.balanceByAddress({
+  const address: TfchainWalletBalanceByAddressModel = {
     address: "5FfAv7qUb3oa8TfdeLCEicirtdGvXHnV2owtsv5XNa9aDzEu",
-  });
-  console.log(balance);
+  };
+
+  //Get balance by address
+  await getBalanceByAddress(grid3, address);
+
   await grid3.disconnect();
 }
 
diff --git a/packages/grid_client/scripts/tfchain/get_balance_by_name.ts b/packages/grid_client/scripts/tfchain/get_balance_by_name.ts
index 8e8d0c793b..7438173c4c 100644
--- a/packages/grid_client/scripts/tfchain/get_balance_by_name.ts
+++ b/packages/grid_client/scripts/tfchain/get_balance_by_name.ts
@@ -1,9 +1,27 @@
+import { BlockchainGetModel } from "../../src";
 import { getClient } from "../client_loader";
+import { log } from "../utils";
+
+async function getBalanceByName(client, account) {
+  try {
+    const res = await client.tfchain.assets(account);
+    log("================= Getting balance =================");
+    log(res);
+    log("================= Getting balance =================");
+  } catch (error) {
+    log("Error while getting balance" + error);
+  }
+}
 
 async function main() {
   const grid3 = await getClient();
-  const balance = await grid3.tfchain.assets({ name: "mariobassem" });
-  console.log(balance);
+  const account: BlockchainGetModel = {
+    name: "newacc",
+  };
+
+  //Get balance by account name
+  await getBalanceByName(grid3, account);
+
   await grid3.disconnect();
 }
 
diff --git a/packages/grid_client/scripts/tfchain/import.ts b/packages/grid_client/scripts/tfchain/import.ts
index 856b3a9264..b02829abca 100644
--- a/packages/grid_client/scripts/tfchain/import.ts
+++ b/packages/grid_client/scripts/tfchain/import.ts
@@ -1,8 +1,28 @@
+import { TfchainWalletInitModel } from "../../src";
 import { getClient } from "../client_loader";
+import { log } from "../utils";
+
+async function importAccount(client, account) {
+  try {
+    const res = await client.tfchain.init(account);
+    log("================= Importing account =================");
+    log(res);
+    log("================= Importing account =================");
+  } catch (error) {
+    log("Error while importing account" + error);
+  }
+}
 
 async function main() {
   const grid3 = await getClient();
-  await grid3.tfchain.init({ name: "mariobassem", secret: grid3.clientOptions.mnemonic });
+  const account: TfchainWalletInitModel = {
+    name: "newacc1",
+    secret: grid3.clientOptions.mnemonic,
+  };
+
+  //Import Account
+  await importAccount(grid3, account);
+
   await grid3.disconnect();
 }
 
diff --git a/packages/grid_client/scripts/tfchain/transfer.ts b/packages/grid_client/scripts/tfchain/transfer.ts
index 5b1783b046..ed8ec26506 100644
--- a/packages/grid_client/scripts/tfchain/transfer.ts
+++ b/packages/grid_client/scripts/tfchain/transfer.ts
@@ -1,9 +1,30 @@
+import { TfchainWalletTransferModel } from "../../src";
 import { getClient } from "../client_loader";
+import { log } from "../utils";
+
+async function transfer(client, transfer) {
+  try {
+    const res = await client.tfchain.pay(transfer);
+    log("================= Transferring funds =================");
+    log(res);
+    log("================= Transferring funds =================");
+  } catch (error) {
+    log("Error while transferring funds " + error);
+  }
+}
 
 async function main() {
   const grid3 = await getClient();
   const target_address = "5F7ctVSmDXMM3yTQszZy47QgvNxaeUPPRz5p3oBaK9jTeNgf";
-  await grid3.tfchain.pay({ name: "mariobassem", address_dest: target_address, amount: 100 });
+  const transferInfo: TfchainWalletTransferModel = {
+    name: "newacc",
+    address_dest: target_address,
+    amount: 100,
+  };
+
+  //transfer
+  await transfer(grid3, transferInfo);
+
   await grid3.disconnect();
 }
 
diff --git a/packages/grid_client/scripts/tfchain/vote_dao_proposal.ts b/packages/grid_client/scripts/tfchain/vote_dao_proposal.ts
new file mode 100644
index 0000000000..c865770575
--- /dev/null
+++ b/packages/grid_client/scripts/tfchain/vote_dao_proposal.ts
@@ -0,0 +1,50 @@
+import { TfchainDaoVoteModel, TfchainWalletInitModel } from "../../src";
+import { getClient } from "../client_loader";
+import { log } from "../utils";
+
+async function importAccount(client, account) {
+  try {
+    const res = await client.tfchain.init(account);
+    log("================= Importing account =================");
+    log(res);
+    log("================= Importing account =================");
+  } catch (error) {
+    log("Error while importing account" + error);
+  }
+}
+
+async function vote(client, vote) {
+  try {
+    const res = await client.tfchain.vote(vote);
+    log("================= Voting =================");
+    log(res);
+    log("================= Voting =================");
+  } catch (error) {
+    log("Error while voting " + error);
+  }
+}
+
+async function main() {
+  const grid3 = await getClient();
+  const account: TfchainWalletInitModel = {
+    name: "harby",
+    secret: grid3.clientOptions.mnemonic,
+  };
+  const voteInfo: TfchainDaoVoteModel = {
+    name: "harby",
+    address: "5FWW1F7XHaiRgPEqJdkv9nVgz94AVKXkTKNyfbLcY4rqpaNM",
+    farmId: 246,
+    hash: "0xa539b59dcf7ba10764a49c9effb88aea400d3c20f0071c3b85494423079757fe",
+    approve: true,
+  };
+
+  //Import Account
+  await importAccount(grid3, account);
+
+  //Vote
+  await vote(grid3, voteInfo);
+
+  await grid3.disconnect();
+}
+
+main();
diff --git a/packages/grid_client/scripts/update_twin.ts b/packages/grid_client/scripts/update_twin.ts
index ac9375dd52..02d8cc278c 100644
--- a/packages/grid_client/scripts/update_twin.ts
+++ b/packages/grid_client/scripts/update_twin.ts
@@ -1,15 +1,29 @@
+import { TwinCreateModel } from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function updateTwin(client, relay) {
+  try {
+    const res = await client.twins.update(relay);
+    log("================= Updating twin =================");
+    log(res);
+    log("================= Updating twin =================");
+  } catch (error) {
+    log("Error while updating twin " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain, @typescript-eslint/no-non-null-assertion
   const urls = grid3.getDefaultUrls(grid3.clientOptions?.network!);
   const relay = urls.relay.slice(6);
+  const update: TwinCreateModel = { relay: relay };
+
+  //Update twin
+  await updateTwin(grid3, update);
 
-  const data = await grid3.twins.update({ relay });
-  log(data);
   grid3.disconnect();
 }
 
diff --git a/packages/grid_client/scripts/vm_with_gpu.ts b/packages/grid_client/scripts/vm_with_gpu.ts
index 0d378c1827..bd01c34086 100644
--- a/packages/grid_client/scripts/vm_with_gpu.ts
+++ b/packages/grid_client/scripts/vm_with_gpu.ts
@@ -1,20 +1,42 @@
-import { DiskModel, FilterOptions, MachineModel, MachinesModel, NetworkModel } from "../src";
+import { FilterOptions, MachinesModel } from "../src";
 import { config, getClient } from "./client_loader";
 import { log } from "./utils";
 
-async function main() {
-  const grid3 = await getClient();
+async function deploy(client, vms) {
+  try {
+    const res = await client.machines.deploy(vms);
+    log("================= Deploying VM =================");
+    log(res);
+    log("================= Deploying VM =================");
+  } catch (error) {
+    log("Error while Deploying the VM " + error);
+  }
+}
 
-  // create network Object
-  const n = new NetworkModel();
-  n.name = "vmgpuNetwork";
-  n.ip_range = "10.249.0.0/16";
+async function getDeployment(client, vms) {
+  try {
+    const res = await client.machines.getObj(vms);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
 
-  // create disk Object
-  const disk = new DiskModel();
-  disk.name = "vmgpuDisk";
-  disk.size = 100;
-  disk.mountpoint = "/testdisk";
+async function cancel(client, vms) {
+  try {
+    const res = await client.machines.delete(vms);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
+async function main() {
+  const grid3 = await getClient();
 
   const vmQueryOptions: FilterOptions = {
     cru: 8,
@@ -31,47 +53,55 @@ async function main() {
   }
   const nodeId = +nodes[0].nodeId;
 
-  // create vm node Object
-  const vm = new MachineModel();
-  vm.name = "vmgpu";
-  vm.node_id = nodeId;
-  vm.disks = [disk];
-  vm.public_ip = false;
-  vm.planetary = true;
-  vm.cpu = 8;
-  vm.memory = 1024 * 16;
-  vm.rootfs_size = 0;
-  vm.flist = "https://hub.grid.tf/tf-official-vms/ubuntu-22.04.flist";
-  vm.entrypoint = "/";
-  vm.env = {
-    SSH_KEY: config.ssh_key,
-  };
   let gpuList = await grid3.zos.getNodeGPUInfo({ nodeId: nodeId });
   gpuList = gpuList.filter(g => g.contract === 0);
   if (gpuList.length <= 0) {
     throw Error(`Couldn't find GPU card available on node ${nodeId}`);
   }
-  vm.gpus = [gpuList[0].id]; // gpu card's id, you can check the available gpu from the dashboard
 
-  // create VMs Object
-  const vms = new MachinesModel();
-  vms.name = "vmgpu";
-  vms.network = n;
-  vms.machines = [vm];
-  vms.metadata = "";
-  vms.description = "test deploying VM with GPU via ts grid3 client";
+  const vms: MachinesModel = {
+    name: "vmgpu",
+    network: {
+      name: "vmgpuNetwork",
+      ip_range: "10.249.0.0/16",
+    },
+    machines: [
+      {
+        name: "vmgpu",
+        node_id: nodeId,
+        disks: [
+          {
+            name: "vmgpuDisk",
+            size: 100,
+            mountpoint: "/testdisk",
+          },
+        ],
+        public_ip: false,
+        public_ip6: false,
+        planetary: true,
+        cpu: 8,
+        memory: 1024 * 16,
+        rootfs_size: 0,
+        flist: "https://hub.grid.tf/tf-official-vms/ubuntu-22.04.flist",
+        entrypoint: "/",
+        env: {
+          SSH_KEY: config.ssh_key,
+        },
+        gpus: gpuList[0].id,
+      },
+    ],
+    metadata: "",
+    description: "test deploying VM with GPU via ts grid3 client",
+  };
 
-  // deploy vms
-  const res = await grid3.machines.deploy(vms);
-  log(res);
+  //Deploy VMs
+  await deploy(grid3, vms);
 
-  // get the deployment
-  const l = await grid3.machines.getObj(vms.name);
-  log(l);
+  //Get the deployment
+  await getDeployment(grid3, vms.name);
 
-  // // delete
-  // const d = await grid3.machines.delete({ name: vms.name });
-  // log(d);
+  //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: vms.name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/vm_with_qsfs.ts b/packages/grid_client/scripts/vm_with_qsfs.ts
index a489391453..139e447173 100644
--- a/packages/grid_client/scripts/vm_with_qsfs.ts
+++ b/packages/grid_client/scripts/vm_with_qsfs.ts
@@ -2,6 +2,61 @@ import { FilterOptions, MachinesModel, QSFSZDBSModel } from "../src";
 import { config, getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function deployQsfs(client, qsfs) {
+  try {
+    const res = await client.qsfs_zdbs.deploy(qsfs);
+    log("================= Deploying QSFS =================");
+    log(res);
+    log("================= Deploying QSFS =================");
+  } catch (error) {
+    log("Error while Deploying QSFS " + error);
+  }
+}
+
+async function deploy(client, vms) {
+  try {
+    const res = await client.machines.deploy(vms);
+    log("================= Deploying VM =================");
+    log(res);
+    log("================= Deploying VM =================");
+  } catch (error) {
+    log("Error while Deploying the VM " + error);
+  }
+}
+
+async function getDeployment(client, vms) {
+  try {
+    const res = await client.machines.getObj(vms);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function cancel(client, vms) {
+  try {
+    const res = await client.machines.delete(vms);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
+async function deleteQsfs(client, qsfs) {
+  try {
+    const res = await client.qsfs_zdbs.delete(qsfs);
+    log("================= Deleting QSFS =================");
+    log(res);
+    log("================= Deleting QSFS =================");
+  } catch (error) {
+    log("Error while deleting qsfs " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
@@ -89,28 +144,18 @@ async function main() {
     description: "test deploying VMs via ts grid3 client",
   };
 
-  async function cancel(grid3) {
-    // delete
-    const d = await grid3.machines.delete({ name: machines_name });
-    log(d);
-    const r = await grid3.qsfs_zdbs.delete({ name: qsfs_name });
-    log(r);
-  }
-  //deploy qsfs
-  const res = await grid3.qsfs_zdbs.deploy(qsfs);
-  log(">>>>>>>>>>>>>>>QSFS backend has been created<<<<<<<<<<<<<<<");
-  log(res);
+  //Deploy QSFS
+  await deployQsfs(grid3, qsfs);
 
-  const vm_res = await grid3.machines.deploy(vms);
-  log(">>>>>>>>>>>>>>>vm has been created<<<<<<<<<<<<<<<");
-  log(vm_res);
+  //Deploy VMs
+  await deploy(grid3, vms);
 
-  // get the deployment
-  const l = await grid3.machines.getObj(vms.name);
-  log(">>>>>>>>>>>>>>>Deployment result<<<<<<<<<<<<<<<");
-  log(l);
+  //Get the deployment
+  await getDeployment(grid3, vms.name);
 
-  // await cancel(grid3);
+  //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: machines_name });
+  // await deleteQsfs(grid3, { name: qsfs_name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/wireguard_vm.ts b/packages/grid_client/scripts/wireguard_vm.ts
index cae0c5bd39..a32e44bafd 100644
--- a/packages/grid_client/scripts/wireguard_vm.ts
+++ b/packages/grid_client/scripts/wireguard_vm.ts
@@ -1,4 +1,4 @@
-import { FilterOptions, GatewayNameModel, GridClient, MachineModel, MachinesModel, NetworkModel } from "../src";
+import { FilterOptions, GatewayNameModel, MachineModel, MachinesModel, NetworkModel } from "../src";
 import { config, getClient } from "./client_loader";
 import { log } from "./utils";
 
@@ -46,6 +46,73 @@ function createGwModel(node_id: number, ip: string, networkName: string, name: s
   } as GatewayNameModel;
 }
 
+async function deployVM(client, vms) {
+  try {
+    const res = await client.machines.deploy(vms);
+    log("================= Deploying VM =================");
+    log(res);
+    log("================= Deploying VM =================");
+  } catch (error) {
+    log("Error while Deploying the VM " + error);
+  }
+}
+
+async function getVMDeployment(client, vms) {
+  try {
+    const res = await client.machines.getObj(vms);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+    return res;
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function deployGw(client, gw) {
+  try {
+    const res = await client.gateway.deploy_name(gw);
+    log("================= Deploying name gateway =================");
+    log(res);
+    log("================= Deploying name gateway =================");
+  } catch (error) {
+    log("Error while Deploying the gateway " + error);
+  }
+}
+
+async function getGwDeployment(client, gw) {
+  try {
+    const res = await client.gateway.getObj(gw);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function deleteVM(client, vms) {
+  try {
+    const res = await client.machines.delete(vms);
+    log("================= Canceling the VM deployment =================");
+    log(res);
+    log("================= Canceling the VM deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
+async function deleteGw(client, gw) {
+  try {
+    const res = await client.gateway.delete_name(gw);
+    log("================= Canceling the GW deployment =================");
+    log(res);
+    log("================= Canceling the GW deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
@@ -65,30 +132,24 @@ async function main() {
   log(`Deploying vm on node: ${vmNode}, with network node: ${gwNode}`);
 
   // deploy the vm
-  const vmResult = await grid3.machines.deploy(machines);
-  log(vmResult);
+  await deployVM(grid3, machines);
 
-  const deployedVm = await grid3.machines.getObj(machines.name);
-  log("+++ deployed vm +++");
-  log(deployedVm);
+  //Get VM deployment
+  const deployedVm = await getVMDeployment(grid3, machines.name);
 
   const vmPrivateIP = (deployedVm as { interfaces: { ip: string }[] }[])[0].interfaces[0].ip;
   const gateway = createGwModel(gwNode, vmPrivateIP, network.name, "pyserver1", 8000);
   log(`deploying gateway ${network.name} on node ${gwNode}`);
 
-  const gatewayResult = await grid3.gateway.deploy_name(gateway);
-  log(gatewayResult);
-
-  log("+++ Deployed gateway +++");
+  //Deploy GW
+  await deployGw(grid3, gateway);
 
-  const l = await grid3.gateway.getObj(gateway.name);
-  log(l);
+  //Get GW deployment
+  await getGwDeployment(grid3, gateway.name);
 
   // delete
-  // const deletedMachines = await grid3.machines.delete({ name:  machines.name});
-  // log(deletedMachines);
-  // const deletedGW = await grid3.gateway.delete_name({ name: gateway.name});
-  // log(deletedGW);
+  // await deleteVM(grid3, { name: machines.name });
+  // await deleteGw(grid3, { name: gateway.name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/zdb.ts b/packages/grid_client/scripts/zdb.ts
index 5e8eea2ddf..ddf137f6d0 100644
--- a/packages/grid_client/scripts/zdb.ts
+++ b/packages/grid_client/scripts/zdb.ts
@@ -1,7 +1,40 @@
-import { FilterOptions, ZDBModel, ZdbModes, ZDBSModel } from "../src";
+import { FilterOptions, ZdbModes, ZDBSModel } from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
+async function deploy(client, zdb) {
+  try {
+    const res = await client.zdbs.deploy(zdb);
+    log("================= Deploying ZDBs =================");
+    log(res);
+    log("================= Deploying ZDBs =================");
+  } catch (error) {
+    log("Error while Deploying the ZDBs " + error);
+  }
+}
+
+async function getDeployment(client, zdb) {
+  try {
+    const res = await client.zdbs.getObj(zdb);
+    log("================= Getting deployment information =================");
+    log(res);
+    log("================= Getting deployment information =================");
+  } catch (error) {
+    log("Error while getting the deployment " + error);
+  }
+}
+
+async function cancel(client, zdb) {
+  try {
+    const res = await client.zdbs.delete(zdb);
+    log("================= Canceling the deployment =================");
+    log(res);
+    log("================= Canceling the deployment =================");
+  } catch (error) {
+    log("Error while canceling the deployment " + error);
+  }
+}
+
 async function main() {
   const grid3 = await getClient();
 
@@ -12,32 +45,30 @@ async function main() {
     farmId: 1,
   };
 
-  // create zdb object
-  const zdb = new ZDBModel();
-  zdb.name = "hamada";
-  zdb.node_id = +(await grid3.capacity.filterNodes(zdbQueryOptions))[0].nodeId;
-  zdb.mode = ZdbModes.user;
-  zdb.disk_size = 1;
-  zdb.publicNamespace = false;
-  zdb.password = "testzdb";
-
-  // create zdbs object
-  const zdbs = new ZDBSModel();
-  zdbs.name = "tttzdbs";
-  zdbs.zdbs = [zdb];
-  zdbs.metadata = "";
-
-  // deploy zdb
-  const res = await grid3.zdbs.deploy(zdbs);
-  log(res);
-
-  // get the deployment
-  const l = await grid3.zdbs.getObj(zdbs.name);
-  log(l);
-
-  // // delete
-  // const d = await grid3.zdbs.delete({ name: zdbs.name });
-  // log(d);
+  const zdbs: ZDBSModel = {
+    name: "tttzdbs",
+    zdbs: [
+      {
+        name: "hamada",
+        node_id: +(await grid3.capacity.filterNodes(zdbQueryOptions))[0].nodeId,
+        mode: ZdbModes.user,
+        disk_size: 1,
+        publicNamespace: false,
+        password: "testzdb",
+      },
+    ],
+    metadata: "",
+    description: "test zdbs",
+  };
+
+  //Deploy ZDBs
+  await deploy(grid3, zdbs);
+
+  //Get the deployment
+  await getDeployment(grid3, zdbs.name);
+
+  //Uncomment the line below to cancel the deployment
+  // await cancel(grid3, { name: zdbs.name });
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/scripts/zos_rmb_requests.ts b/packages/grid_client/scripts/zos_rmb_requests.ts
index 8acaaa287b..698c3786a9 100644
--- a/packages/grid_client/scripts/zos_rmb_requests.ts
+++ b/packages/grid_client/scripts/zos_rmb_requests.ts
@@ -1,52 +1,131 @@
+import { ZOSGetDeploymentModel, ZOSNodeModel } from "../src";
 import { getClient } from "./client_loader";
 import { log } from "./utils";
 
-async function main() {
-  const grid3 = await getClient();
-  const nodeId = 7;
-  const contractId = 2766;
+async function pingNode(client, nodeId) {
   try {
-    log(await grid3.zos.pingNode({ nodeId }));
-  } catch (e) {
-    log(`Couldn't ping node ${nodeId} due to ${e}`);
+    const res = await client.zos.pingNode(nodeId);
+    log("================= Pinging node =================");
+    log(res);
+    log("================= Pinging node =================");
+  } catch (error) {
+    log("Error while pinging node " + error);
   }
+}
+
+async function getDeployment(client, contractId) {
   try {
-    log(await grid3.zos.getDeployment({ contractId }));
-  } catch (e) {
-    log(`Couldn't get deployment with contractId ${contractId} due to ${e}`);
+    const res = await client.zos.getDeployment(contractId);
+    log("================= Getting deployment =================");
+    log(res);
+    log("================= Getting deployment =================");
+  } catch (error) {
+    log("Error while getting deployment " + error);
   }
+}
+
+async function hasPublicIPv6(client, nodeId) {
   try {
-    log(await grid3.zos.hasPublicIPv6({ nodeId }));
-  } catch (e) {
-    log(`Couldn't reach node ${nodeId} to check if it has public IPV6 due to ${e}`);
+    const res = await client.zos.hasPublicIPv6(nodeId);
+    log("================= Checking public ipv6 =================");
+    log(res);
+    log("================= Checking public ipv6 =================");
+  } catch (error) {
+    log("Error while checking public ipv6 " + error);
   }
+}
 
+async function listNetworkInterfaces(client, nodeId) {
   try {
-    log(await grid3.zos.listNetworkInterfaces({ nodeId }));
-  } catch (e) {
-    log(`Couldn't reach node ${nodeId} to list network interfaces due to ${e}`);
+    const res = await client.zos.listNetworkInterfaces(nodeId);
+    log("================= Listing network interfaces =================");
+    log(res);
+    log("================= Listing network interfaces =================");
+  } catch (error) {
+    log("Error while listing network interfaces " + error);
   }
+}
 
+async function listNetworkPublicIPs(client, nodeId) {
   try {
-    log(await grid3.zos.listNetworkPublicIPs({ nodeId }));
-  } catch (e) {
-    log(`Couldn't reach node ${nodeId} to list network pubic IPs due to ${e}`);
+    const res = await client.zos.listNetworkPublicIPs(nodeId);
+    log("================= Listing public ips =================");
+    log(res);
+    log("================= Listing public ips =================");
+  } catch (error) {
+    log("Error while listing public ips " + error);
   }
+}
+
+async function getNetworkPublicConfig(client, nodeId) {
   try {
-    log(await grid3.zos.getNetworkPublicConfig({ nodeId }));
-  } catch (e) {
-    log(`Couldn't reach node ${nodeId} to get network public config due to ${e}`);
+    const res = await client.zos.getNetworkPublicConfig(nodeId);
+    log("================= Getting public config =================");
+    log(res);
+    log("================= Getting public config =================");
+  } catch (error) {
+    log("Error while getting public config " + error);
   }
+}
+
+async function getStoragePools(client, nodeId) {
   try {
-    log(await grid3.zos.getStoragePools({ nodeId }));
-  } catch (e) {
-    log(`Couldn't reach node ${nodeId} to get storage pools due to ${e}`);
+    const res = await client.zos.getStoragePools(nodeId);
+    log("================= Getting storage pools =================");
+    log(res);
+    log("================= Getting storage pools =================");
+  } catch (error) {
+    log("Error while getting storage pools " + error);
   }
+}
+
+async function getNodeGPUInfo(client, nodeId) {
   try {
-    log(await grid3.zos.getNodeGPUInfo({ nodeId }));
-  } catch (e) {
-    log(`Couldn't reach node ${nodeId} to get gpu info due to ${e}`);
+    const res = await client.zos.getNodeGPUInfo(nodeId);
+    log("================= Getting GPU info =================");
+    log(res);
+    log("================= Getting GPU info =================");
+  } catch (error) {
+    log("Error while getting GPU info " + error);
   }
+}
+
+async function main() {
+  const grid3 = await getClient();
+  const nodeId = 11;
+  const contractId = 2766;
+
+  const contract: ZOSGetDeploymentModel = {
+    contractId: contractId,
+  };
+
+  const node: ZOSNodeModel = {
+    nodeId: nodeId,
+  };
+
+  //Ping Node
+  await pingNode(grid3, node);
+
+  //Get deployment
+  await getDeployment(grid3, contract);
+
+  //Has public IPV6
+  await hasPublicIPv6(grid3, node);
+
+  //List network interfaces
+  await listNetworkInterfaces(grid3, node);
+
+  //List network public IPs
+  await listNetworkPublicIPs(grid3, node);
+
+  //Get network public config
+  await getNetworkPublicConfig(grid3, node);
+
+  //Get storage pools
+  await getStoragePools(grid3, node);
+
+  //Get GPU info
+  await getNodeGPUInfo(grid3, node);
 
   await grid3.disconnect();
 }
diff --git a/packages/grid_client/src/client.ts b/packages/grid_client/src/client.ts
index 8e0641c3fc..e92387ffe8 100644
--- a/packages/grid_client/src/client.ts
+++ b/packages/grid_client/src/client.ts
@@ -1,13 +1,16 @@
 import { Client as RMBClient } from "@threefold/rmb_direct_client";
+import { GridClientError, TFChainError, ValidationError } from "@threefold/types";
+import type AwaitLock from "await-lock";
+import { validateMnemonic } from "bip39";
 import * as PATH from "path";
 import urlJoin from "url-join";
 
 import { Graphql } from "./clients";
 import { TFClient } from "./clients/tf-grid/client";
 import { ClientOptions, GridClientConfig, NetworkEnv } from "./config";
-import { send } from "./helpers";
+import { migrateKeysEncryption, send, toHexSeed } from "./helpers";
 import { isExposed } from "./helpers/expose";
-import { generateString } from "./helpers/utils";
+import { formatErrorMessage, generateString } from "./helpers/utils";
 import * as modules from "./modules/index";
 import { appPath } from "./storage/backend";
 import { BackendStorage, BackendStorageType } from "./storage/backend";
@@ -16,6 +19,8 @@ import { KeypairType } from "./zos/deployment";
 class GridClient {
   static rmbClients: Map<string, RMBClient> = new Map();
   static connecting = new Set<string>();
+  static migrationLock = new Map<string, AwaitLock>();
+  static migrated = new Set<string>();
   config: GridClientConfig;
   rmbClient: RMBClient;
   tfclient: TFClient;
@@ -41,13 +46,23 @@ class GridClient {
   farmerbot: modules.farmerbot;
   farms: modules.farms;
   networks: modules.networks;
+  dao: modules.dao;
+  bridge: modules.bridge;
   modules: string[] = [];
 
+  readonly _mnemonic: string;
+
   constructor(public clientOptions: ClientOptions) {
+    if (!clientOptions.storeSecret && validateMnemonic(clientOptions.mnemonic)) {
+      this._mnemonic = clientOptions.mnemonic;
+    }
+
+    const hexSeed = toHexSeed(clientOptions.mnemonic);
+
     this.clientOptions = {
-      mnemonic: clientOptions.mnemonic,
+      mnemonic: hexSeed,
       network: clientOptions.network,
-      storeSecret: clientOptions.storeSecret ? clientOptions.storeSecret : clientOptions.mnemonic,
+      storeSecret: clientOptions.storeSecret ? clientOptions.storeSecret : hexSeed,
       projectName: clientOptions.projectName ? clientOptions.projectName : "",
       keypairType: clientOptions.keypairType ? clientOptions.keypairType : KeypairType.sr25519,
       backendStorageType: clientOptions.backendStorageType ? clientOptions.backendStorageType : BackendStorageType.auto,
@@ -61,6 +76,15 @@ class GridClient {
         this.clientOptions.network === NetworkEnv.main
       )
     ) {
+      if (
+        !clientOptions.substrateURL ||
+        !clientOptions.proxyURL ||
+        !clientOptions.graphqlURL ||
+        !clientOptions.activationURL ||
+        !clientOptions.relayURL
+      )
+        //TODO throw a grid client error when its pr got merged
+        throw new Error("In Case of using a custom network, Must provide urls in GridClientOptions");
       this.clientOptions.network = NetworkEnv.custom;
       this.clientOptions.substrateURL = clientOptions.substrateURL;
       this.clientOptions.proxyURL = clientOptions.proxyURL;
@@ -98,11 +122,7 @@ class GridClient {
 
     if (!isConnecting) {
       await this.tfclient.connect();
-      try {
-        await this.rmbClient.connect();
-      } catch (e) {
-        throw Error(e.message);
-      }
+      await this.rmbClient.connect();
 
       await this.testConnectionUrls(urls);
 
@@ -126,9 +146,14 @@ class GridClient {
       }
     } catch (e) {
       console.log(e);
-      throw Error(`Couldn't find a user for the provided mnemonic on ${this.clientOptions.network} network.`);
+      throw new TFChainError(
+        `Couldn't get the user twin for the provided mnemonic on ${this.clientOptions.network} network.`,
+      );
     }
     this._connect();
+
+    await migrateKeysEncryption.apply(this, [GridClient]);
+
     GridClient.connecting.delete(key);
   }
 
@@ -168,7 +193,8 @@ class GridClient {
       await send("get", urlJoin(urls.rmbProxy, "version"), "", {});
     } catch (err) {
       console.log(err.message);
-      throw Error("failed to connect to Grid proxy server");
+      (err as Error).message = formatErrorMessage("Failed to connect to Grid proxy server.", err);
+      throw err;
     }
 
     try {
@@ -176,7 +202,8 @@ class GridClient {
       await gql.query("query { __typename }");
     } catch (err) {
       console.log(err.message);
-      throw Error("failed to connect to Graphql server");
+      (err as Error).message = formatErrorMessage("Failed to connect to Graphql server.", err);
+      throw err;
     }
   }
 
@@ -234,23 +261,23 @@ class GridClient {
   async invoke(message, args) {
     const namespaces = message.split(".");
     if (namespaces.length > 2) {
-      throw `Message must include 2 parts only not ${namespaces.length}`;
+      throw new ValidationError(`Message must include 2 parts only not ${namespaces.length}.`);
     }
 
     const method = namespaces.pop();
 
     const module_name = namespaces[0];
     if (!this.modules.includes(module_name)) {
-      throw `gridclient.${module_name} module doesn't exist`;
+      throw new GridClientError(`gridclient.${module_name} module doesn't exist.`);
     }
     const module = this[namespaces[0]];
 
     if (typeof module[method] !== "function") {
-      throw `${module_name}.${method} function doesn't exist`;
+      throw new GridClientError(`${module_name}.${method} function doesn't exist.`);
     }
 
     if (isExposed(module, method) == false) {
-      throw `gridclient.${module_name}.${method} cannot be exposed`;
+      throw new GridClientError(`gridclient.${module_name}.${method} cannot be exposed.`);
     }
     return await module[method].apply(module, [args]);
   }
diff --git a/packages/grid_client/src/clients/rmb/client.ts b/packages/grid_client/src/clients/rmb/client.ts
index e77e30e51c..6c186f6819 100644
--- a/packages/grid_client/src/clients/rmb/client.ts
+++ b/packages/grid_client/src/clients/rmb/client.ts
@@ -1,5 +1,7 @@
 import { Client as RMBClient } from "@threefold/rmb_direct_client";
+import { BaseError, RMBError } from "@threefold/types";
 
+import { formatErrorMessage } from "../../helpers";
 class RMB {
   client: RMBClient;
   constructor(rmbClient: RMBClient) {
@@ -12,7 +14,14 @@ class RMB {
       const requestId = await this.client.send(cmd, payload, destTwinIds[0], expiration / 60);
       result = await this.client.read(requestId);
     } catch (e) {
-      throw Error(
+      if (e instanceof BaseError) {
+        e.message = formatErrorMessage(
+          `Failed to send request to twinId ${destTwinIds} with command: ${cmd}, payload: ${payload}`,
+          e,
+        );
+        throw e;
+      }
+      throw new RMBError(
         `Failed to send request to twinId ${destTwinIds} with command: ${cmd}, payload: ${payload} due to ${e}`,
       );
     }
diff --git a/packages/grid_client/src/clients/tf-grid/balances.ts b/packages/grid_client/src/clients/tf-grid/balances.ts
index 10defccf21..c8343f523a 100644
--- a/packages/grid_client/src/clients/tf-grid/balances.ts
+++ b/packages/grid_client/src/clients/tf-grid/balances.ts
@@ -1,4 +1,5 @@
-import { Balance, Balances, BalanceTransferOptions, QueryBalancesGetOptions } from "@threefold/tfchain_client";
+import { Balance, Balances, BalanceTransferOptions, Client, QueryBalancesGetOptions } from "@threefold/tfchain_client";
+import { GridClientError } from "@threefold/types";
 import { Decimal } from "decimal.js";
 
 class TFBalances extends Balances {
@@ -16,6 +17,17 @@ class TFBalances extends Balances {
     const decimalAmountInTFT = decimalAmount.mul(10 ** 7).toNumber();
     return await super.transfer({ address: options.address, amount: decimalAmountInTFT });
   }
+
+  async getMoreFunds() {
+    if (this.client.url !== "wss://tfchain.dev.grid.tf/ws" && this.client.url !== "wss://tfchain.qa.grid.tf/ws") {
+      throw new GridClientError("Unable to get more TFTs.");
+    }
+    await this.client.connect();
+    const client = new Client({ url: this.client.url, mnemonicOrSecret: "//Alice" });
+    await client.connect();
+    const transaction = await client.balances.transfer({ address: this.client.address, amount: 100 * 1e7 });
+    return transaction.apply();
+  }
 }
 
 export { TFBalances };
diff --git a/packages/grid_client/src/clients/tf-grid/client.ts b/packages/grid_client/src/clients/tf-grid/client.ts
index 42e9762c42..ca3931e430 100644
--- a/packages/grid_client/src/clients/tf-grid/client.ts
+++ b/packages/grid_client/src/clients/tf-grid/client.ts
@@ -1,10 +1,12 @@
 import { Client } from "@threefold/tfchain_client";
+import { ValidationError } from "@threefold/types";
 
 import { KeypairType } from "../../zos/deployment";
 import { TFBalances } from "./balances";
 import { TFContracts } from "./contracts";
 import { TFKVStore } from "./kvstore";
 import { TFTermsAndConditions } from "./terms_and_conditions";
+import { TFTBridge } from "./tftBridge";
 import { TFTPrice } from "./tftPrice";
 import { TFTwins } from "./twins";
 
@@ -15,6 +17,7 @@ class TFClient extends Client {
   twins: TFTwins = new TFTwins(this);
   kvStore: TFKVStore = new TFKVStore(this);
   termsAndConditions: TFTermsAndConditions = new TFTermsAndConditions(this);
+  tftBridge: TFTBridge = new TFTBridge(this);
 
   constructor(
     public url: string,
@@ -25,7 +28,7 @@ class TFClient extends Client {
     super({ url, mnemonicOrSecret: mnemonic, keypairType });
 
     if (!storeSecret) {
-      throw new Error("Couldn't create TFClient without store secret");
+      throw new ValidationError("Couldn't create TFClient without store secret.");
     }
   }
 }
diff --git a/packages/grid_client/src/clients/tf-grid/contracts.ts b/packages/grid_client/src/clients/tf-grid/contracts.ts
index 88ebdb1ba1..0b7a5c2749 100644
--- a/packages/grid_client/src/clients/tf-grid/contracts.ts
+++ b/packages/grid_client/src/clients/tf-grid/contracts.ts
@@ -7,6 +7,7 @@ import {
 } from "@threefold/tfchain_client";
 import { Decimal } from "decimal.js";
 
+import { formatErrorMessage } from "../../helpers";
 import { ContractStates } from "../../modules";
 import { Graphql } from "../graphql/client";
 
@@ -135,7 +136,8 @@ class TFContracts extends Contracts {
 
       return response["data"] as GqlContracts;
     } catch (err) {
-      throw Error(`Error listing contracts by twin id ${options.twinId}: ${err}`);
+      (err as Error).message = formatErrorMessage(`Error listing contracts by twin id ${options.twinId}.`, err);
+      throw err;
     }
   }
 
@@ -196,7 +198,8 @@ class TFContracts extends Contracts {
           .toNumber();
       }
     } catch (err) {
-      throw Error(`Error getting consumption for contract ${options.id}: ${err}`);
+      (err as Error).message = formatErrorMessage(`Error getting consumption for contract ${options.id}.`, err);
+      throw err;
     }
   }
 
diff --git a/packages/grid_client/src/clients/tf-grid/index.ts b/packages/grid_client/src/clients/tf-grid/index.ts
index a30a4ea9b1..3ef33641a9 100644
--- a/packages/grid_client/src/clients/tf-grid/index.ts
+++ b/packages/grid_client/src/clients/tf-grid/index.ts
@@ -5,3 +5,4 @@ export * from "./kvstore";
 export * from "./balances";
 export * from "./tftPrice";
 export * from "./terms_and_conditions";
+export * from "./tftBridge";
diff --git a/packages/grid_client/src/clients/tf-grid/kvstore.ts b/packages/grid_client/src/clients/tf-grid/kvstore.ts
index d1c23a08fe..6dc90181f8 100644
--- a/packages/grid_client/src/clients/tf-grid/kvstore.ts
+++ b/packages/grid_client/src/clients/tf-grid/kvstore.ts
@@ -1,4 +1,5 @@
 import { KVStore, KVStoreGetOptions, KVStoreSetOptions } from "@threefold/tfchain_client";
+import { GridClientError } from "@threefold/types";
 import Crypto from "crypto-js";
 import nacl from "tweetnacl";
 import utils from "tweetnacl-util";
@@ -33,7 +34,7 @@ class TFKVStore extends KVStore {
       try {
         return this.decrypt(encryptedValue);
       } catch (e) {
-        throw Error(`Couldn't decrypt key: ${options.key}`);
+        throw new GridClientError(`Couldn't decrypt key: ${options.key}.`);
       }
     }
     return encryptedValue;
diff --git a/packages/grid_client/src/clients/tf-grid/tftBridge.ts b/packages/grid_client/src/clients/tf-grid/tftBridge.ts
new file mode 100644
index 0000000000..44cedd087e
--- /dev/null
+++ b/packages/grid_client/src/clients/tf-grid/tftBridge.ts
@@ -0,0 +1,26 @@
+import { Bridge, SwapToStellarOptions } from "@threefold/tfchain_client";
+import Decimal from "decimal.js";
+
+class TFTBridge extends Bridge {
+  async swapToStellar(options: SwapToStellarOptions) {
+    const decimalAmount = new Decimal(options.amount);
+    const decimalAmountInTFT = decimalAmount.mul(10 ** 7).toNumber();
+    return await super.swapToStellar({ amount: decimalAmountInTFT, target: options.target });
+  }
+
+  async getWithdrawFee(): Promise<number> {
+    const fee = await super.getWithdrawFee();
+    const decimalAmount = new Decimal(fee.toString());
+    const convertedFee = decimalAmount.div(10 ** 7).toNumber();
+    return convertedFee;
+  }
+
+  async getDepositFee(): Promise<number> {
+    const fee = await super.getDepositFee();
+    const decimalAmount = new Decimal(fee.toString());
+    const convertedFee = decimalAmount.div(10 ** 7).toNumber();
+    return convertedFee;
+  }
+}
+
+export { TFTBridge };
diff --git a/packages/grid_client/src/helpers/index.ts b/packages/grid_client/src/helpers/index.ts
index d4be81dc78..ef382c8e77 100644
--- a/packages/grid_client/src/helpers/index.ts
+++ b/packages/grid_client/src/helpers/index.ts
@@ -3,3 +3,4 @@ export * from "./requests";
 export * from "./events";
 export * from "./validator";
 export * from "./expose";
+export * from "./migration";
diff --git a/packages/grid_client/src/helpers/migration.ts b/packages/grid_client/src/helpers/migration.ts
new file mode 100644
index 0000000000..13e7a69d65
--- /dev/null
+++ b/packages/grid_client/src/helpers/migration.ts
@@ -0,0 +1,71 @@
+import AwaitLock from "await-lock";
+
+import type { GridClient } from "../client";
+
+type GridClientCtor = {
+  new (...args: any[]): GridClient;
+  migrated: Set<string>;
+  migrationLock: Map<string, AwaitLock>;
+};
+
+export async function migrateKeysEncryption(this: GridClient, GridClient: GridClientCtor): Promise<void> {
+  const migrationKey = this.config.mnemonic + this.config.network + this.config.storeSecret + this._mnemonic;
+
+  const _migrateKeysEncryption = async () => {
+    const grid = new GridClient({
+      ...this.config,
+      storeSecret: this._mnemonic as string,
+    });
+
+    const __getValue = (key: string) => {
+      return grid.kvstore.get({ key }).catch(() => null);
+    };
+
+    const __migrateKey = (key: string, value: string | null) => {
+      if (!value) {
+        return [];
+      }
+
+      return this.tfclient.kvStore.set({ key, value });
+    };
+
+    try {
+      await grid.connect();
+
+      const keys = await grid.kvstore.list();
+      const values = await Promise.all(keys.map(__getValue));
+
+      const promises = values.map((value, i) => __migrateKey(keys[i], value));
+      const exts = await Promise.all(promises.flat(1).filter(Boolean));
+
+      await this.tfclient.applyAllExtrinsics(exts.flat(1).filter(Boolean));
+      GridClient.migrated.add(migrationKey);
+    } catch (error) {
+      console.log("Failed to migrate all keys", error.message || error);
+    }
+  };
+
+  if (this._mnemonic && this.config.storeSecret !== this._mnemonic && !GridClient.migrated.has(migrationKey)) {
+    if (!GridClient.migrationLock.has(migrationKey)) {
+      GridClient.migrationLock.set(migrationKey, new AwaitLock());
+    }
+
+    const lock = GridClient.migrationLock.get(migrationKey);
+
+    if (lock) {
+      try {
+        await lock.acquireAsync();
+        if (!GridClient.migrated.has(migrationKey)) {
+          await _migrateKeysEncryption();
+        }
+      } catch (error) {
+        console.log("Failed to migrate all keys", error.message || error);
+      } finally {
+        if (lock.acquired) {
+          lock.release();
+          GridClient.migrationLock.delete(migrationKey);
+        }
+      }
+    }
+  }
+}
diff --git a/packages/grid_client/src/helpers/requests.ts b/packages/grid_client/src/helpers/requests.ts
index 958bb2f932..9af1c27e44 100644
--- a/packages/grid_client/src/helpers/requests.ts
+++ b/packages/grid_client/src/helpers/requests.ts
@@ -1,16 +1,25 @@
-import { default as axios, Method } from "axios";
+import { RequestError } from "@threefold/types";
+import { AxiosError, default as axios, Method } from "axios";
 
-async function send(method: Method, url: string, body: string, headers: Record<string, string>) {
+async function sendWithFullResponse(method: Method, url: string, body: string, headers: Record<string, string>) {
   const options = {
     method: method,
     url: url,
     data: body,
     headers: headers,
   };
-  const response = await axios(options);
-  if (response.status >= 400) {
-    throw Error(`HTTP request failed with status code: ${response.status} due to: ${response.data}`);
+  try {
+    return await axios(options);
+  } catch (e) {
+    const { response } = e as AxiosError;
+    const errorMessage = (response?.data as { error: string }).error;
+    throw new RequestError(`HTTP request failed ${errorMessage ? "due to " + errorMessage : ""}.`, response?.status);
   }
+}
+
+async function send(method: Method, url: string, body: string, headers: Record<string, string>) {
+  const response = await sendWithFullResponse(method, url, body, headers);
   return response.data;
 }
-export { send };
+
+export { send, sendWithFullResponse };
diff --git a/packages/grid_client/src/helpers/utils.ts b/packages/grid_client/src/helpers/utils.ts
index 545dfc3e08..f3a4c51589 100644
--- a/packages/grid_client/src/helpers/utils.ts
+++ b/packages/grid_client/src/helpers/utils.ts
@@ -1,3 +1,6 @@
+import { mnemonicToMiniSecret } from "@polkadot/util-crypto";
+import { validateMnemonic } from "bip39";
+import { Buffer } from "buffer";
 import nacl, { randomBytes } from "tweetnacl";
 import utils from "tweetnacl-util";
 
@@ -36,4 +39,28 @@ function log(message) {
   console.log(JSON.stringify(message, null, 2));
 }
 
-export { generateString, getRandomNumber, randomChoice, randomSecret, randomSecretAsHex, randomNonce, log };
+function toHexSeed(mnemonicOrHexSeed: string): string {
+  if (validateMnemonic(mnemonicOrHexSeed)) {
+    const seed = mnemonicToMiniSecret(mnemonicOrHexSeed);
+    return "0x" + Buffer.from(seed).toString("hex");
+  }
+
+  const seed = mnemonicOrHexSeed.length === 64 ? mnemonicOrHexSeed : mnemonicOrHexSeed.slice(2);
+  return "0x" + seed;
+}
+
+function formatErrorMessage(prefix: string, error: Error) {
+  return `${prefix}\n\t ${error.message}`;
+}
+
+export {
+  generateString,
+  getRandomNumber,
+  randomChoice,
+  randomSecret,
+  randomSecretAsHex,
+  randomNonce,
+  log,
+  toHexSeed,
+  formatErrorMessage,
+};
diff --git a/packages/grid_client/src/helpers/validator.ts b/packages/grid_client/src/helpers/validator.ts
index 41c9f1c574..097fcc1bb9 100644
--- a/packages/grid_client/src/helpers/validator.ts
+++ b/packages/grid_client/src/helpers/validator.ts
@@ -1,3 +1,4 @@
+import { ValidationError } from "@threefold/types";
 import { plainToInstance } from "class-transformer";
 import { validate } from "class-validator";
 
@@ -6,9 +7,7 @@ async function validateObject(obj) {
   // errors is an array of validation errors
   if (errors.length > 0) {
     console.log("Validation failed. errors:", errors);
-    throw Error(`Validation failed. errors: ${errors}`);
-  } else {
-    console.log("Validation succeed");
+    throw new ValidationError(`Validation failed. errors: ${errors}.`);
   }
 }
 // used as decorator
diff --git a/packages/grid_client/src/high_level/base.ts b/packages/grid_client/src/high_level/base.ts
index 715233a513..f0de74c782 100644
--- a/packages/grid_client/src/high_level/base.ts
+++ b/packages/grid_client/src/high_level/base.ts
@@ -1,3 +1,4 @@
+import { GridClientErrors } from "@threefold/types";
 import { Addr } from "netaddr";
 
 import { RMB } from "../clients/rmb/client";
@@ -179,7 +180,7 @@ class HighLevelBase {
     ],
   ): Promise<TwinDeployment[]> {
     if (types.includes(WorkloadTypes.network)) {
-      throw Error("Network workload can't be deleted");
+      throw new GridClientErrors.Workloads.WorkloadDeleteError("Network workload can't be deleted.");
     }
     let twinDeployments: TwinDeployment[] = [];
     const node_id = await this.nodes.getNodeIdFromContractId(deployment.contract_id, this.config.substrateURL);
diff --git a/packages/grid_client/src/high_level/farmerbot.ts b/packages/grid_client/src/high_level/farmerbot.ts
index a1f2029949..c08a9fa5ca 100644
--- a/packages/grid_client/src/high_level/farmerbot.ts
+++ b/packages/grid_client/src/high_level/farmerbot.ts
@@ -1,3 +1,4 @@
+import { GridClientErrors } from "@threefold/types";
 import { Expose } from "class-transformer";
 import { IsBoolean, IsDefined, IsInt, IsNotEmpty, IsNumber, IsOptional, IsString, Max, Min } from "class-validator";
 import uuid4 from "uuid4";
@@ -101,10 +102,10 @@ class FarmerBot {
       if (nodeId) {
         return nodeId;
       } else {
-        throw new Error("Couldn't find a suitable node. Please try again.");
+        throw new GridClientErrors.Farms.NodeSelectionError("Couldn't find a suitable node. Please try again.");
       }
     } else {
-      throw new Error(node.error);
+      throw new GridClientErrors.Farms.FarmerBotError(node.error);
     }
   }
 
@@ -135,7 +136,7 @@ class FarmerBot {
     const pingedFarm = await this.rmb.request([farm.twinId], "execute_job", payload, 20);
 
     if (pingedFarm.error) {
-      throw Error(pingedFarm.error);
+      throw new GridClientErrors.Farms.FarmerBotError(pingedFarm.error);
     } else {
       return pingedFarm;
     }
diff --git a/packages/grid_client/src/high_level/machine.ts b/packages/grid_client/src/high_level/machine.ts
index 3348e9b3e6..1615298d64 100644
--- a/packages/grid_client/src/high_level/machine.ts
+++ b/packages/grid_client/src/high_level/machine.ts
@@ -1,3 +1,4 @@
+import { GridClientErrors, ValidationError } from "@threefold/types";
 import { Addr } from "netaddr";
 
 import { events } from "../helpers/events";
@@ -61,12 +62,14 @@ class VMHL extends HighLevelBase {
     }
 
     if (!(await this.nodes.nodeHasResources(nodeId, { sru: totalDisksSize, mru: memory / 1024 }))) {
-      throw Error(`Node ${nodeId} doesn't have enough resources: sru=${totalDisksSize}, mru=${memory / 1024}`);
+      throw new GridClientErrors.Nodes.InvalidResourcesError(
+        `Node ${nodeId} doesn't have enough resources: sru=${totalDisksSize}, mru=${memory / 1024} .`,
+      );
     }
 
     const twinId = this.config.twinId;
     if (!(await this.nodes.nodeAvailableForTwinId(nodeId, twinId))) {
-      throw Error(
+      throw new GridClientErrors.Nodes.UnavailableNodeError(
         `Node ${nodeId} is not available for user with twinId: ${twinId}, maybe it's rented by another user or node is dedicated. use capacity planning with availableFor option.`,
       );
     }
@@ -81,20 +84,22 @@ class VMHL extends HighLevelBase {
       }
       const qsfsZdbs = await qsfsZdbsModule.getZdbs(d.qsfs_zdbs_name);
       if (qsfsZdbs.groups.length === 0 || qsfsZdbs.meta.length === 0) {
-        throw Error(`Couldn't find a qsfs zdbs with name ${d.qsfs_zdbs_name}. Please create one with qsfs_zdbs module`);
+        throw new ValidationError(
+          `Couldn't find a qsfs zdbs with name ${d.qsfs_zdbs_name}. Please create one with qsfs_zdbs module.`,
+        );
       }
       let minimalShards = Math.ceil((qsfsZdbs.groups.length * 3) / 5);
       let expectedShards = qsfsZdbs.groups.length;
       if (d.minimal_shards) {
         minimalShards = d.minimal_shards;
         if (minimalShards >= qsfsZdbs.groups.length) {
-          throw Error("Minimal shards can't be more than the number of zdbs in qsfs_zdbs deployment");
+          throw new ValidationError("Minimal shards can't be more than the number of zdbs in qsfs_zdbs deployment.");
         }
       }
       if (d.expected_shards) {
         expectedShards = d.expected_shards;
         if (expectedShards > qsfsZdbs.groups.length) {
-          throw Error("Expected shards can't be more than the number of zdbs in qsfs_zdbs deployment");
+          throw new ValidationError("Expected shards can't be more than the number of zdbs in qsfs_zdbs deployment.");
         }
       }
       const groups = new ZdbGroup();
@@ -137,21 +142,25 @@ class VMHL extends HighLevelBase {
       const nodeTwinId = await this.nodes.getNodeTwinId(nodeId);
       const gpuList = await this.rmb.request([nodeTwinId], "zos.gpu.list", "");
       if (gpuList.length <= 0) {
-        throw Error(`The selected node ${nodeId} doesn't have GPU card`);
+        throw new GridClientErrors.Nodes.InvalidResourcesError(`The selected node ${nodeId} doesn't have GPU card.`);
       }
       for (const g of gpus) {
         const found = gpuList.filter(item => item.id === g);
         if (found.length === 0) {
-          throw Error(`Couldn't find the GPU with id: "${g}" in node: ${nodeId}`);
+          throw new GridClientErrors.Nodes.GPUNotFoundError(
+            `Couldn't find the GPU with id: "${g}" in node: ${nodeId}.`,
+          );
         }
         if (found[0].contract !== 0) {
-          throw Error(`This GPU: "${g}" is currently in use by another VM with contract id: ${found[0].contract}`);
+          throw new GridClientErrors.Nodes.GPULockedError(
+            `This GPU: "${g}" is currently in use by another VM with contract id: ${found[0].contract}.`,
+          );
         }
       }
 
       const node = await this.nodes.getNode(nodeId);
       if (node.rentedByTwinId !== this.config.twinId) {
-        throw Error(`This node ${nodeId} is not rented by the current user`);
+        throw new GridClientErrors.Nodes.UnavailableNodeError(`This node ${nodeId} is not rented by the current user.`);
       }
     }
 
@@ -197,7 +206,9 @@ class VMHL extends HighLevelBase {
       let access_node_id = randomChoice(filteredAccessNodes);
       if (accessNodeId) {
         if (!filteredAccessNodes.includes(accessNodeId))
-          throw Error(`Node ${accessNodeId} is not an access not or maybe it's down`);
+          throw new GridClientErrors.Nodes.AccessNodeError(
+            `Node ${accessNodeId} is not an access node or maybe it's down.`,
+          );
 
         access_node_id = accessNodeId;
       }
diff --git a/packages/grid_client/src/high_level/network.ts b/packages/grid_client/src/high_level/network.ts
index 56dc1b689b..1fb59d3fbd 100644
--- a/packages/grid_client/src/high_level/network.ts
+++ b/packages/grid_client/src/high_level/network.ts
@@ -1,3 +1,4 @@
+import { ValidationError } from "@threefold/types";
 import { Addr } from "netaddr";
 
 import { DeploymentFactory, Network } from "../primitives";
@@ -17,7 +18,7 @@ class NetworkHL extends HighLevelBase {
 
     const workload = await network.addNode(nodeId, networkMetadata, description);
     if (!workload) {
-      throw Error(`Node ${nodeId} is already exist on network ${networkName}`);
+      throw new ValidationError(`Node ${nodeId} already exists on network ${networkName}.`);
     }
 
     const twinDeployments: TwinDeployment[] = [];
diff --git a/packages/grid_client/src/high_level/twinDeploymentHandler.ts b/packages/grid_client/src/high_level/twinDeploymentHandler.ts
index fb24b26108..7b41a8cf8c 100644
--- a/packages/grid_client/src/high_level/twinDeploymentHandler.ts
+++ b/packages/grid_client/src/high_level/twinDeploymentHandler.ts
@@ -1,8 +1,17 @@
 import { Contract, ExtrinsicResult } from "@threefold/tfchain_client";
+import {
+  BaseError,
+  GridClientError,
+  GridClientErrors,
+  TFChainError,
+  TimeoutError,
+  ValidationError,
+} from "@threefold/types";
 
 import { RMB } from "../clients";
 import { TFClient } from "../clients/tf-grid/client";
 import { GridClientConfig } from "../config";
+import { formatErrorMessage } from "../helpers";
 import { events } from "../helpers/events";
 import { validateObject } from "../helpers/validator";
 import { DeploymentFactory, Nodes } from "../primitives/index";
@@ -27,22 +36,23 @@ class TwinDeploymentHandler {
     if (id) {
       const c = await this.tfclient.contracts.get({ id });
       if (c && c.twinId !== this.config.twinId) {
-        throw Error(`Name contract with name ${name} is already reserved`);
+        throw new ValidationError(`Name contract with name ${name} is already reserved.`);
       }
     }
     try {
       return await this.tfclient.contracts.createName({ name });
     } catch (e) {
-      throw Error(`Failed to create name contract ${name} due to ${e}`);
+      //TODO ERROR should be handled in tfchain
+      throw new TFChainError(`Failed to create name contract ${name} due to ${e}.`);
     }
   }
 
   async deleteNameContract(name: string) {
     const c = await this.tfclient.contracts.getContractIdByName({ name });
     if (!c) {
-      events.emit("logs", `Couldn't find a name contract with name ${name} to delete`);
+      events.emit("logs", `Couldn't find a name contract with name ${name} to delete.`);
     } else {
-      events.emit("logs", `Deleting name contract with name: ${name} and id: ${c}`);
+      events.emit("logs", `Deleting name contract with name: ${name} and id: ${c}.`);
       return await this.tfclient.contracts.cancel({ id: c });
     }
   }
@@ -54,7 +64,11 @@ class TwinDeploymentHandler {
       const node_twin_id = await this.nodes.getNodeTwinId(twinDeployment.nodeId);
       await this.rmb.request([node_twin_id], `zos.deployment.${twinDeployment.operation}`, payload);
     } catch (e) {
-      throw Error(`Failed to ${twinDeployment.operation} the deployment on node ${twinDeployment.nodeId} due to ${e}`);
+      (e as Error).message = formatErrorMessage(
+        `Failed to ${twinDeployment.operation} the deployment on node ${twinDeployment.nodeId}.`,
+        e,
+      );
+      throw e;
     }
   }
 
@@ -69,8 +83,8 @@ class TwinDeploymentHandler {
   checkWorkload(workload: Workload, targetWorkload: Workload, nodeId: number): boolean {
     let state = false;
     if (workload.result.state === "error") {
-      throw Error(
-        `Failed to deploy ${workload.type} with name ${workload.name} on node ${nodeId} due to: ${workload.result.message}`,
+      throw new GridClientErrors.Workloads.WorkloadDeployError(
+        `Failed to deploy ${workload.type} with name ${workload.name} on node ${nodeId} due to: ${workload.result.message}.`,
       );
     } else if (workload.result.state === "ok") {
       state = true;
@@ -108,7 +122,7 @@ class TwinDeploymentHandler {
       }
       await new Promise(f => setTimeout(f, 2000));
     }
-    throw Error(`Deployment with contract_id: ${contract_id} failed to be ready after ${timeout} minutes`);
+    throw new TimeoutError(`Deployment with contract_id: ${contract_id} failed to be ready after ${timeout} minutes.`);
   }
 
   async waitForDeployments(twinDeployments: TwinDeployment[], timeout = this.config.deploymentTimeoutMinutes) {
@@ -293,10 +307,10 @@ class TwinDeploymentHandler {
       const freeIps = _farm.publicIps.filter(res => res.contractId === 0).length;
 
       if (freeIps < farmIPs.get(farmId)!) {
-        throw Error(
+        throw new GridClientErrors.Farms.InvalidResourcesError(
           `Farm ${farmId} doesn't have enough public IPs: requested IPs=${farmIPs.get(
             farmId,
-          )}, available IPs=${freeIps}`,
+          )}, available IPs=${freeIps}.`,
         );
       }
     }
@@ -347,7 +361,9 @@ class TwinDeploymentHandler {
           mru: mru / 1024 ** 3,
         }))
       ) {
-        throw Error(`Node ${twinDeployment.nodeId} doesn't have enough resources: sru=${sru}, mru=${mru}`);
+        throw new GridClientErrors.Nodes.InvalidResourcesError(
+          `Node ${twinDeployment.nodeId} doesn't have enough resources: sru=${sru}, mru=${mru} .`,
+        );
       }
       if (workloads.length && (rootfsDisks.length || ssdDisks.length || hddDisks.length)) {
         await this.nodes.verifyNodeStoragePoolCapacity(ssdDisks, hddDisks, rootfsDisks, +twinDeployment.nodeId);
@@ -565,7 +581,8 @@ class TwinDeploymentHandler {
       await this.saveNetworks(twinDeployments);
     } catch (e) {
       await this.rollback(contracts);
-      throw Error(e);
+      if (e instanceof BaseError) throw e;
+      throw new GridClientError(`Couldn't handle twin Deployment due to: ${e} .`);
     }
     return resultContracts;
   }
diff --git a/packages/grid_client/src/high_level/zdb.ts b/packages/grid_client/src/high_level/zdb.ts
index 30f3cf016a..132762424a 100644
--- a/packages/grid_client/src/high_level/zdb.ts
+++ b/packages/grid_client/src/high_level/zdb.ts
@@ -1,7 +1,8 @@
+import { GridClientErrors } from "@threefold/types";
+
 import { events } from "../helpers/events";
 import { Operations, TwinDeployment } from "../high_level/models";
 import { DeploymentFactory } from "../primitives/deployment";
-import { Nodes } from "../primitives/nodes";
 import { ZdbPrimitive } from "../primitives/zdb";
 import { Deployment } from "../zos/deployment";
 import { WorkloadTypes } from "../zos/workload";
@@ -21,7 +22,9 @@ class ZdbHL extends HighLevelBase {
     solutionProviderId?: number,
   ): Promise<TwinDeployment> {
     if (!(await this.nodes.nodeHasResources(node_id, { hru: disk_size }))) {
-      throw Error(`Node ${node_id} doesn't have enough resources: hru=${disk_size}`);
+      throw new GridClientErrors.Nodes.InvalidResourcesError(
+        `Node ${node_id} doesn't have enough resources: hru=${disk_size} .`,
+      );
     }
     events.emit("logs", `Creating a zdb on node: ${node_id}`);
     const deploymentFactory = new DeploymentFactory(this.config);
diff --git a/packages/grid_client/src/modules/algorand.ts b/packages/grid_client/src/modules/algorand.ts
index fba1d54e87..b2662b16d0 100644
--- a/packages/grid_client/src/modules/algorand.ts
+++ b/packages/grid_client/src/modules/algorand.ts
@@ -1,3 +1,4 @@
+import { RequestError, ValidationError } from "@threefold/types";
 import { default as AlgoSdk } from "algosdk";
 import axios from "axios";
 import * as PATH from "path";
@@ -58,7 +59,7 @@ class Algorand implements blockchainInterface {
   async save(name: string, value: string) {
     const [path, data] = await this._load();
     if (data[name]) {
-      throw Error(`A wallet with the same name ${name} already exists`);
+      throw new ValidationError(`A wallet with the same name ${name} already exists.`);
     }
     const updateOperations = await this.backendStorage.update(path, name, value);
     await this.saveIfKVStoreBackend(updateOperations);
@@ -97,7 +98,7 @@ class Algorand implements blockchainInterface {
   async delete(options: BlockchainDeleteModel) {
     const [path, data] = await this._load();
     if (!data[options.name]) {
-      throw Error(`Couldn't find a wallet with name ${options.name}`);
+      throw new ValidationError(`Couldn't find a wallet with name ${options.name}.`);
     }
     const updateOperations = await this.backendStorage.update(path, options.name, "", StorageUpdateAction.delete);
     await this.saveIfKVStoreBackend(updateOperations);
@@ -107,7 +108,7 @@ class Algorand implements blockchainInterface {
   @validateInput
   async create(options: AlgorandAccountCreateModel): Promise<BlockchainCreateResultModel> {
     const account_exists = await this.exist({ name: options.name });
-    if (account_exists) throw Error(`Name ${options.name} already exists`);
+    if (account_exists) throw new ValidationError(`Name ${options.name} already exists.`);
 
     const account = await AlgoSdk.generateAccount();
     const account_mnemonic = AlgoSdk.secretKeyToMnemonic(account.sk);
@@ -159,7 +160,7 @@ class Algorand implements blockchainInterface {
   async get(options: BlockchainGetModel): Promise<BlockchainGetResultModel> {
     const [, data] = await this._load();
     if (!data[options.name]) {
-      throw Error(`Couldn't find a wallet with name ${options.name}`);
+      throw new ValidationError(`Couldn't find a wallet with name ${options.name}.`);
     }
     const mnemonic = data[options.name];
     const account = await AlgoSdk.mnemonicToSecretKey(mnemonic);
@@ -233,7 +234,7 @@ class Algorand implements blockchainInterface {
       const submitted_txn = await axios.post(urlJoin(this.baseUrl, `v2/transactions`), signedTxn?.blob);
       return submitted_txn.data;
     } catch (error) {
-      throw error.response.data.message;
+      throw new RequestError(error.response.data.message, error.response.status);
     }
   }
 }
diff --git a/packages/grid_client/src/modules/balance.ts b/packages/grid_client/src/modules/balance.ts
index 1dd8befe85..dd5daa548e 100644
--- a/packages/grid_client/src/modules/balance.ts
+++ b/packages/grid_client/src/modules/balance.ts
@@ -7,7 +7,7 @@ import { checkBalance } from "./utils";
 
 class Balance {
   client: TFClient;
-  constructor(config: GridClientConfig) {
+  constructor(public config: GridClientConfig) {
     this.client = config.tfclient;
   }
   @expose
@@ -27,6 +27,12 @@ class Balance {
   async getMyBalance() {
     return await this.client.balances.getMyBalance();
   }
+
+  @expose
+  @validateInput
+  async getMoreFunds() {
+    return await this.client.balances.getMoreFunds();
+  }
 }
 
 export { Balance as balance };
diff --git a/packages/grid_client/src/modules/base.ts b/packages/grid_client/src/modules/base.ts
index a5d9444bcc..9ac3c7beaa 100644
--- a/packages/grid_client/src/modules/base.ts
+++ b/packages/grid_client/src/modules/base.ts
@@ -1,8 +1,10 @@
+import { GridClientErrors, ValidationError } from "@threefold/types";
 import * as PATH from "path";
 
 import { RMB } from "../clients";
 import { TFClient } from "../clients/tf-grid/client";
 import { GridClientConfig } from "../config";
+import { formatErrorMessage } from "../helpers";
 import { HighLevelBase } from "../high_level/base";
 import { KubernetesHL } from "../high_level/kubernetes";
 import { VMHL } from "../high_level/machine";
@@ -304,7 +306,7 @@ class BaseModule {
       try {
         deployment = await this.rmb.request([node_twin_id], "zos.deployment.get", payload);
       } catch (e) {
-        throw Error(`Failed to get deployment due to ${e}`);
+        (e as Error).message = formatErrorMessage(`Failed to get deployment`, e);
       }
       let found = false;
       for (const workload of deployment.workloads) {
@@ -430,7 +432,9 @@ class BaseModule {
       });
 
       if (pubIPOldWorkload != "" && twinDeployments.length == 0)
-        throw Error(`Cannot remove a public IP of an existent deployment`);
+        throw new GridClientErrors.Workloads.WorkloadUpdateError(
+          `Cannot remove a public IP of an existent deployment.`,
+        );
 
       oldDeployment = await this.deploymentFactory.fromObj(oldDeployment);
       const node_id = await this._getNodeIdFromContractId(name, oldDeployment.contract_id);
@@ -450,8 +454,14 @@ class BaseModule {
         if (zmachineOldWorkloads.filter(value => zmachineTwinWorkloads.includes(value)).length == 0) continue;
 
         if (pubIPTwinWorkload != pubIPOldWorkload) {
-          if (pubIPTwinWorkload == "") throw Error(`Cannot remove a public IP of an existent deployment`);
-          if (pubIPOldWorkload == "") throw Error(`Cannot add a public IP to an existent deployment`);
+          if (pubIPTwinWorkload == "")
+            throw new GridClientErrors.Workloads.WorkloadUpdateError(
+              `Cannot remove a public IP of an existent deployment.`,
+            );
+          if (pubIPOldWorkload == "")
+            throw new GridClientErrors.Workloads.WorkloadUpdateError(
+              `Cannot add a public IP to an existent deployment.`,
+            );
         }
       }
     }
@@ -574,7 +584,7 @@ class BaseModule {
         return contracts;
       }
     }
-    throw Error(`Instance with name ${name} is not found`);
+    throw new ValidationError(`Instance with name ${name} is not found.`);
   }
 
   async _delete(name: string) {
diff --git a/packages/grid_client/src/modules/blockchain.ts b/packages/grid_client/src/modules/blockchain.ts
index edd77bf1da..fe54bfb924 100644
--- a/packages/grid_client/src/modules/blockchain.ts
+++ b/packages/grid_client/src/modules/blockchain.ts
@@ -1,3 +1,5 @@
+import { GridClientError, ValidationError } from "@threefold/types";
+
 import { GridClientConfig } from "../config";
 import { expose } from "../helpers/expose";
 import { validateInput } from "../helpers/validator";
@@ -28,7 +30,7 @@ class Blockchain implements blockchainInterface {
   current_account: string;
   blockchain_type: blockchainType;
 
-  constructor(config: GridClientConfig) {
+  constructor(public config: GridClientConfig) {
     this.stellar = new stellar(config);
     this.algorand = new algorand(config);
     this.tfchain = new tfchain(config);
@@ -55,7 +57,7 @@ class Blockchain implements blockchainInterface {
   async select(options: BlockchainGetModel) {
     const account_exists = await this.exist(options);
 
-    if (!account_exists) throw Error(`Account ${options.name} doesn't exist`);
+    if (!account_exists) throw new ValidationError(`Account ${options.name} doesn't exist.`);
 
     this.current_account = options.name;
     this.blockchain_type = await this.exist_in(options);
@@ -66,7 +68,7 @@ class Blockchain implements blockchainInterface {
   async create(options: BlockchainCreateModel): Promise<BlockchainCreateResultModel> {
     const account_exists = await this.exist(options);
 
-    if (account_exists) throw Error(`Name ${options.name} already exists`);
+    if (account_exists) throw new ValidationError(`Name ${options.name} already exists.`);
 
     return this[options.blockchain_type].create(options);
   }
@@ -74,7 +76,7 @@ class Blockchain implements blockchainInterface {
   @expose
   @validateInput
   async sign(options: BlockchainSignNoNameModel) {
-    if (!this.current_account) throw Error(`No account is selected. Please select an account first`);
+    if (!this.current_account) throw new ValidationError(`No account is selected. Please select an account first.`);
 
     const modified_options: BlockchainSignModel = { name: this.current_account, content: options.content };
 
@@ -90,7 +92,7 @@ class Blockchain implements blockchainInterface {
   @expose
   @validateInput
   async get(): Promise<BlockchainGetResultModel> {
-    if (!this.current_account) throw Error(`No account is selected. Please select an account first`);
+    if (!this.current_account) throw new ValidationError(`No account is selected. Please select an account first.`);
 
     const options = { name: this.current_account };
 
@@ -113,7 +115,7 @@ class Blockchain implements blockchainInterface {
   @expose
   @validateInput
   async assets(): Promise<BlockchainAssetsModel> {
-    if (!this.current_account) throw Error(`No account is selected. Please select an account first`);
+    if (!this.current_account) throw new ValidationError(`No account is selected. Please select an account first.`);
 
     const options = { name: this.current_account };
 
@@ -124,10 +126,10 @@ class Blockchain implements blockchainInterface {
   @validateInput
   // TODO : bridge, still
   async pay(options: BlockchainPayNoNameModel) {
-    if (!this.current_account) throw Error(`No account is selected. Please select an account first`);
+    if (!this.current_account) throw new ValidationError(`No account is selected. Please select an account first.`);
 
     if (this.blockchain_type != options.blockchain_type_dest)
-      throw Error(`Transfer between blockchains isn't implemented yet`);
+      throw new GridClientError(`Transfer between blockchains isn't implemented yet.`);
 
     const modified_options: BlockchainPayModel = {
       name: this.current_account,
@@ -144,7 +146,7 @@ class Blockchain implements blockchainInterface {
   @expose
   @validateInput
   async delete() {
-    if (!this.current_account) throw Error(`No account is selected. Please select an account first`);
+    if (!this.current_account) throw new ValidationError(`No account is selected. Please select an account first.`);
 
     const options: BlockchainDeleteModel = { name: this.current_account };
 
diff --git a/packages/grid_client/src/modules/bridge.ts b/packages/grid_client/src/modules/bridge.ts
new file mode 100644
index 0000000000..1eacfde6d4
--- /dev/null
+++ b/packages/grid_client/src/modules/bridge.ts
@@ -0,0 +1,37 @@
+import { TFClient } from "../clients";
+import { GridClientConfig } from "../config";
+import { expose, validateInput } from "../helpers";
+import { ListenToMintCompletedModel, SwapToStellarModel } from "./models";
+
+class Bridge {
+  client: TFClient;
+  constructor(public config: GridClientConfig) {
+    this.client = config.tfclient;
+  }
+
+  @expose
+  @validateInput
+  async listenToMintCompleted(options: ListenToMintCompletedModel) {
+    return await this.client.tftBridge.listenToMintCompleted(options.address);
+  }
+
+  @expose
+  @validateInput
+  async getWithdrawFee() {
+    return await this.client.tftBridge.getWithdrawFee();
+  }
+
+  @expose
+  @validateInput
+  async getDepositFee() {
+    return await this.client.tftBridge.getDepositFee();
+  }
+
+  @expose
+  @validateInput
+  async swapToStellar(options: SwapToStellarModel) {
+    return await (await this.client.tftBridge.swapToStellar(options)).apply();
+  }
+}
+
+export { Bridge as bridge };
diff --git a/packages/grid_client/src/modules/calculator.ts b/packages/grid_client/src/modules/calculator.ts
index b6a975ad92..da7d6e90f0 100644
--- a/packages/grid_client/src/modules/calculator.ts
+++ b/packages/grid_client/src/modules/calculator.ts
@@ -4,10 +4,23 @@ import { expose } from "../helpers/expose";
 import { validateInput } from "../helpers/validator";
 import { CalculatorModel, CUModel, SUModel } from "./models";
 
+interface PricingInfo {
+  dedicatedPrice: number;
+  dedicatedPackage: {
+    package: string;
+    discount: number;
+  };
+  sharedPrice: number;
+  sharedPackage: {
+    package: string;
+    discount: number;
+  };
+}
+
 class Calculator {
   client: TFClient;
 
-  constructor(config: GridClientConfig) {
+  constructor(public config: GridClientConfig) {
     this.client = config.tfclient;
   }
   @expose
@@ -60,7 +73,7 @@ class Calculator {
   }
   @expose
   @validateInput
-  async calculate(options: CalculatorModel) {
+  async calculate(options: CalculatorModel): Promise<PricingInfo> {
     let balance = 0;
     const pricing = await this.pricing(options);
 
@@ -110,9 +123,15 @@ class Calculator {
     sharedPrice = (sharedPrice - sharedPrice * (discountPackages[sharedPackage].discount / 100)) / 10000000;
     return {
       dedicatedPrice: dedicatedPrice,
-      dedicatedPackage: dedicatedPackage,
+      dedicatedPackage: {
+        package: dedicatedPackage,
+        discount: discountPackages[dedicatedPackage].discount,
+      },
       sharedPrice: sharedPrice,
-      sharedPackage: sharedPackage,
+      sharedPackage: {
+        package: sharedPackage,
+        discount: discountPackages[sharedPackage].discount,
+      },
     };
   }
 
diff --git a/packages/grid_client/src/modules/capacity.ts b/packages/grid_client/src/modules/capacity.ts
index 1c3e590e0d..b726140805 100644
--- a/packages/grid_client/src/modules/capacity.ts
+++ b/packages/grid_client/src/modules/capacity.ts
@@ -94,6 +94,12 @@ class Capacity {
     return await this.nodes.filterFarms(options);
   }
 
+  @expose
+  @validateInput
+  async getFarmsCount(options?: FarmFilterOptions): Promise<number> {
+    return await this.nodes.getFarmsCount(options);
+  }
+
   @expose
   @validateInput
   async checkFarmHasFreePublicIps(options?: FarmHasFreePublicIPsModel): Promise<boolean> {
diff --git a/packages/grid_client/src/modules/contracts.ts b/packages/grid_client/src/modules/contracts.ts
index c3e88e6f4f..3450d93a42 100644
--- a/packages/grid_client/src/modules/contracts.ts
+++ b/packages/grid_client/src/modules/contracts.ts
@@ -19,12 +19,14 @@ import {
   ContractsByTwinId,
   ContractState,
   CreateServiceContractModel,
+  GetActiveContractsModel,
   GetDedicatedNodePriceModel,
   GetServiceContractModel,
   NameContractCreateModel,
   NameContractGetModel,
   NodeContractCreateModel,
   NodeContractUpdateModel,
+  RentContractCreateModel,
   RentContractGetModel,
   ServiceContractApproveModel,
   ServiceContractBillModel,
@@ -79,6 +81,14 @@ class Contracts {
   async create_name(options: NameContractCreateModel) {
     return (await this.client.contracts.createName(options)).apply();
   }
+
+  @expose
+  @validateInput
+  @checkBalance
+  async createRent(options: RentContractCreateModel) {
+    return (await this.client.contracts.createRent(options)).apply();
+  }
+
   @expose
   @validateInput
   async get(options: ContractGetModel) {
@@ -102,6 +112,12 @@ class Contracts {
     return await this.client.contracts.getDedicatedNodeExtraFee(options);
   }
 
+  @expose
+  @validateInput
+  async getActiveContracts(options: GetActiveContractsModel) {
+    return await this.client.contracts.getActiveContracts(options);
+  }
+
   @expose
   @validateInput
   async activeRentContractForNode(options: RentContractGetModel) {
diff --git a/packages/grid_client/src/modules/dao.ts b/packages/grid_client/src/modules/dao.ts
new file mode 100644
index 0000000000..b9380d26f9
--- /dev/null
+++ b/packages/grid_client/src/modules/dao.ts
@@ -0,0 +1,22 @@
+import { TFClient } from "../clients/tf-grid/client";
+import { GridClientConfig } from "../config";
+import { expose } from "../helpers/expose";
+import { validateInput } from "../helpers/validator";
+import { DaoVoteModel } from "./models";
+class Dao {
+  client: TFClient;
+  constructor(public config: GridClientConfig) {
+    this.client = config.tfclient;
+  }
+  @expose
+  @validateInput
+  async get() {
+    return await this.client.dao.get();
+  }
+  @expose
+  @validateInput
+  async vote(options: DaoVoteModel) {
+    return (await this.client.dao.vote(options)).apply();
+  }
+}
+export { Dao as dao };
diff --git a/packages/grid_client/src/modules/farms.ts b/packages/grid_client/src/modules/farms.ts
index 5aeb3cf743..b2e57ff221 100644
--- a/packages/grid_client/src/modules/farms.ts
+++ b/packages/grid_client/src/modules/farms.ts
@@ -2,7 +2,14 @@ import { TFClient } from "../clients/tf-grid/client";
 import { GridClientConfig } from "../config";
 import { expose } from "../helpers/expose";
 import { validateInput } from "../helpers/validator";
-import { FarmIdModel } from "./models";
+import {
+  AddFarmIPModel,
+  AddStellarAddressToFarmModel,
+  CreateFarmModel,
+  FarmIdModel,
+  RemoveFarmIPModel,
+} from "./models";
+import { checkBalance } from "./utils";
 
 class Farms {
   client: TFClient;
@@ -11,6 +18,34 @@ class Farms {
     this.client = config.tfclient;
   }
 
+  @expose
+  @validateInput
+  @checkBalance
+  async create(options: CreateFarmModel) {
+    return (await this.client.farms.create(options)).apply();
+  }
+
+  @expose
+  @validateInput
+  @checkBalance
+  async addFarmIp(options: AddFarmIPModel) {
+    return (await this.client.farms.addFarmIp(options)).apply();
+  }
+
+  @expose
+  @validateInput
+  @checkBalance
+  async removeFarmIp(options: RemoveFarmIPModel) {
+    return (await this.client.farms.removeFarmIp(options)).apply();
+  }
+
+  @expose
+  @validateInput
+  @checkBalance
+  async addStellarAddress(options: AddStellarAddressToFarmModel) {
+    return (await this.client.farms.addStellarAddress(options)).apply();
+  }
+
   @expose
   @validateInput
   async getFarmByID(options: FarmIdModel) {
diff --git a/packages/grid_client/src/modules/gateway.ts b/packages/grid_client/src/modules/gateway.ts
index 146269b8c1..f9e2a00cf8 100644
--- a/packages/grid_client/src/modules/gateway.ts
+++ b/packages/grid_client/src/modules/gateway.ts
@@ -1,3 +1,5 @@
+import { ValidationError } from "@threefold/types";
+
 import { GridClientConfig } from "../config";
 import { events } from "../helpers/events";
 import { expose } from "../helpers/expose";
@@ -21,7 +23,7 @@ class GWModule extends BaseModule {
   workloadTypes = [WorkloadTypes.gatewayfqdnproxy, WorkloadTypes.gatewaynameproxy];
   gateway: GatewayHL;
 
-  constructor(config: GridClientConfig) {
+  constructor(public config: GridClientConfig) {
     super(config);
     this.gateway = new GatewayHL(config);
   }
@@ -31,7 +33,7 @@ class GWModule extends BaseModule {
   @checkBalance
   async deploy_fqdn(options: GatewayFQDNModel) {
     if (await this.exists(options.name)) {
-      throw Error(`Another gateway deployment with the same name ${options.name} already exists`);
+      throw new ValidationError(`Another gateway deployment with the same name ${options.name} already exists.`);
     }
     events.emit("logs", `Start creating the gateway deployment with name ${options.name}`);
     const metadata = JSON.stringify({
@@ -60,7 +62,7 @@ class GWModule extends BaseModule {
   @checkBalance
   async deploy_name(options: GatewayNameModel) {
     if (await this.exists(options.name)) {
-      throw Error(`Another gateway deployment with the same name ${options.name} already exists`);
+      throw new ValidationError(`Another gateway deployment with the same name ${options.name} already exists.`);
     }
     events.emit("logs", `Start creating the gateway deployment with name ${options.name}`);
     const metadata = JSON.stringify({
diff --git a/packages/grid_client/src/modules/index.ts b/packages/grid_client/src/modules/index.ts
index efd0f09b32..3f81550bb6 100644
--- a/packages/grid_client/src/modules/index.ts
+++ b/packages/grid_client/src/modules/index.ts
@@ -1,4 +1,5 @@
 export * from "./k8s";
+export * from "./dao";
 export * from "./machines";
 export * from "./models";
 export * from "./zdb";
@@ -20,3 +21,4 @@ export * from "./utility";
 export * from "./farmerbot";
 export * from "./farms";
 export * from "./networks";
+export * from "./bridge";
diff --git a/packages/grid_client/src/modules/k8s.ts b/packages/grid_client/src/modules/k8s.ts
index b75b43d1a4..988a290319 100644
--- a/packages/grid_client/src/modules/k8s.ts
+++ b/packages/grid_client/src/modules/k8s.ts
@@ -1,3 +1,4 @@
+import { GridClientErrors, ValidationError } from "@threefold/types";
 import { Addr } from "netaddr";
 
 import { GridClientConfig } from "../config";
@@ -89,7 +90,7 @@ class K8sModule extends BaseModule {
     const workers_names: string[] = [];
     for (const master of options.masters) {
       if (masters_names.includes(master.name))
-        throw Error(`Another master with the same name ${master.name} already exists`);
+        throw new ValidationError(`Another master with the same name ${master.name} already exists.`);
       masters_names.push(master.name);
 
       const [twinDeployments, wgConfig] = await this.kubernetes.add_master(
@@ -127,12 +128,12 @@ class K8sModule extends BaseModule {
     if (masterIps.length === 0) {
       masterIps = await this._getMastersIp(options.name, deployments);
       if (masterIps.length === 0) {
-        throw Error("Couldn't get master ip");
+        throw new GridClientErrors.Workloads.WorkloadCreateError("Couldn't get master ip");
       }
     }
     for (const worker of options.workers!) {
       if (workers_names.includes(worker.name))
-        throw Error(`Another worker with the same name ${worker.name} already exists`);
+        throw new ValidationError(`Another worker with the same name ${worker.name} already exists.`);
       workers_names.push(worker.name);
 
       const [twinDeployments] = await this.kubernetes.add_worker(
@@ -172,11 +173,11 @@ class K8sModule extends BaseModule {
   @checkBalance
   async deploy(options: K8SModel) {
     if (options.masters.length > 1) {
-      throw Error("Multiple masters are not supported");
+      throw new ValidationError("Multiple masters are not supported");
     }
 
     if (await this.exists(options.name)) {
-      throw Error(`Another k8s deployment with the same name ${options.name} already exists`);
+      throw new ValidationError(`Another k8s deployment with the same name ${options.name} already exists.`);
     }
 
     events.emit("logs", `Start creating the cluster with name ${options.name}`);
@@ -224,26 +225,26 @@ class K8sModule extends BaseModule {
   @checkBalance
   async update(options: K8SModel) {
     if (!(await this.exists(options.name))) {
-      throw Error(`There is no k8s deployment with the name: ${options.name}`);
+      throw new ValidationError(`There is no k8s deployment with the name: ${options.name}.`);
     }
     if (options.masters.length > 1) {
-      throw Error("Multiple masters are not supported");
+      throw new ValidationError("Multiple masters are not supported.");
     }
     const oldDeployments = await this._get(options.name);
 
     const masterIps = await this._getMastersIp(options.name, oldDeployments);
     if (masterIps.length === 0) {
-      throw Error("Couldn't get master ip");
+      throw new GridClientErrors.Workloads.WorkloadUpdateError("Couldn't get master ip.");
     }
     const masterWorkloads = await this._getMastersWorkload(options.name, oldDeployments);
     if (masterWorkloads.length === 0) {
-      throw Error("Couldn't get master node");
+      throw new GridClientErrors.Workloads.WorkloadUpdateError("Couldn't get master node.");
     }
     const masterWorkload = masterWorkloads[0];
     const networkName = masterWorkload.data["network"].interfaces[0].network;
     const networkIpRange = Addr(masterWorkload.data["network"].interfaces[0].ip).mask(16).toString();
     if (networkName !== options.network.name && networkIpRange !== options.network.ip_range) {
-      throw Error("Network name and ip_range can't be changed");
+      throw new GridClientErrors.Workloads.WorkloadUpdateError("Network name and ip_range can't be changed.");
     }
 
     //TODO: check that the master nodes are not changed
@@ -256,17 +257,17 @@ class K8sModule extends BaseModule {
   @checkBalance
   async add_worker(options: AddWorkerModel) {
     if (!(await this.exists(options.deployment_name))) {
-      throw Error(`There is no k8s deployment with the name: ${options.deployment_name}`);
+      throw new ValidationError(`There is no k8s deployment with the name: ${options.deployment_name}.`);
     }
     const oldDeployments = await this._get(options.deployment_name);
     if (this.workloadExists(options.name, oldDeployments))
-      throw Error(
-        `There is another worker with the same name "${options.name}" in this cluster ${options.deployment_name}`,
+      throw new ValidationError(
+        `There is another worker with the same name "${options.name}" in this cluster ${options.deployment_name}.`,
       );
     events.emit("logs", `Start adding worker: ${options.name} to cluster: ${options.deployment_name}`);
     const masterWorkloads = await this._getMastersWorkload(options.deployment_name, oldDeployments);
     if (masterWorkloads.length === 0) {
-      throw Error("Couldn't get master node");
+      throw new GridClientErrors.Workloads.WorkloadUpdateError("Couldn't get master node.");
     }
     const masterWorkload = masterWorkloads[masterWorkloads.length - 1];
     const networkName = masterWorkload.data["network"].interfaces[0].network;
@@ -308,7 +309,7 @@ class K8sModule extends BaseModule {
   @checkBalance
   async delete_worker(options: DeleteWorkerModel) {
     if (!(await this.exists(options.deployment_name))) {
-      throw Error(`There is no k8s deployment with the name: ${options.deployment_name}`);
+      throw new ValidationError(`There is no k8s deployment with the name: ${options.deployment_name}.`);
     }
     events.emit("logs", `Start deleting worker: ${options.name} from cluster: ${options.deployment_name}`);
     return await this._deleteInstance(this.kubernetes, options.deployment_name, options.name);
diff --git a/packages/grid_client/src/modules/machines.ts b/packages/grid_client/src/modules/machines.ts
index b60ecf5cdc..f343aeb85c 100644
--- a/packages/grid_client/src/modules/machines.ts
+++ b/packages/grid_client/src/modules/machines.ts
@@ -1,3 +1,4 @@
+import { GridClientErrors, ValidationError } from "@threefold/types";
 import { Addr } from "netaddr";
 
 import { GridClientConfig } from "../config";
@@ -44,7 +45,7 @@ class MachinesModule extends BaseModule {
 
     for (const machine of options.machines) {
       if (machines_names.includes(machine.name))
-        throw Error(`Another machine with the same name ${machine.name} already exists`);
+        throw new ValidationError(`Another machine with the same name ${machine.name} already exists.`);
       machines_names.push(machine.name);
 
       const [TDeployments, wgConfig] = await this.vm.create(
@@ -86,7 +87,7 @@ class MachinesModule extends BaseModule {
   @checkBalance
   async deploy(options: MachinesModel) {
     if (await this.exists(options.name)) {
-      throw Error(`Another machine deployment with the same name ${options.name} already exists`);
+      throw new ValidationError(`Another machine deployment with the same name ${options.name} already exists.`);
     }
     events.emit("logs", `Start creating the machine deployment with name ${options.name}`);
     const [twinDeployments, , wireguardConfig] = await this._createDeployment(options);
@@ -128,7 +129,7 @@ class MachinesModule extends BaseModule {
   @checkBalance
   async update(options: MachinesModel) {
     if (!(await this.exists(options.name))) {
-      throw Error(`There is no machine with the name: ${options.name}`);
+      throw new ValidationError(`There is no machine with the name: ${options.name}`);
     }
 
     const oldDeployments = await this._get(options.name);
@@ -136,7 +137,7 @@ class MachinesModule extends BaseModule {
     const networkName = workload.data["network"].interfaces[0].network;
     const networkIpRange = Addr(workload.data["network"].interfaces[0].ip).mask(16).toString();
     if (networkName !== options.network.name || networkIpRange !== options.network.ip_range) {
-      throw Error("Network name and ip_range can't be changed");
+      throw new GridClientErrors.Workloads.WorkloadUpdateError("Network name and ip_range can't be changed.");
     }
 
     const [twinDeployments, network] = await this._createDeployment(options);
@@ -148,12 +149,12 @@ class MachinesModule extends BaseModule {
   @checkBalance
   async add_machine(options: AddMachineModel) {
     if (!(await this.exists(options.deployment_name))) {
-      throw Error(`There are no machine deployments with the name: ${options.deployment_name}`);
+      throw new ValidationError(`There are no machine deployments with the name: ${options.deployment_name}.`);
     }
     const oldDeployments = await this._get(options.deployment_name);
     if (this.workloadExists(options.name, oldDeployments))
-      throw Error(
-        `There is another machine with the same name "${options.name}" in the same deployment ${options.deployment_name}`,
+      throw new ValidationError(
+        `There is another machine with the same name "${options.name}" in the same deployment ${options.deployment_name}.`,
       );
 
     events.emit("logs", `Start adding machine: ${options.name} to deployment: ${options.deployment_name}`);
@@ -199,7 +200,7 @@ class MachinesModule extends BaseModule {
   @checkBalance
   async delete_machine(options: DeleteMachineModel) {
     if (!(await this.exists(options.deployment_name))) {
-      throw Error(`There are no machine deployments with the name: ${options.deployment_name}`);
+      throw new ValidationError(`There are no machine deployments with the name: ${options.deployment_name}.`);
     }
     events.emit("logs", `Start deleting machine: ${options.name} from deployment: ${options.deployment_name}`);
     return await this._deleteInstance(this.vm, options.deployment_name, options.name);
diff --git a/packages/grid_client/src/modules/models.ts b/packages/grid_client/src/modules/models.ts
index 3d1b2d1fd3..1dbd8f3926 100644
--- a/packages/grid_client/src/modules/models.ts
+++ b/packages/grid_client/src/modules/models.ts
@@ -284,7 +284,6 @@ class RentContractDeleteModel {
 class ContractGetModel {
   @Expose() @IsInt() @Min(1) id: number;
 }
-
 class ContractGetByNodeIdAndHashModel {
   @Expose() @IsInt() @Min(1) node_id: number;
   @Expose() @IsString() @IsNotEmpty() hash: string;
@@ -386,7 +385,12 @@ class KVStoreRemoveModel {
 class KVStoreBatchRemoveModel {
   @Expose() @ArrayNotEmpty() @IsString({ each: true }) keys: string[];
 }
-
+class DaoVoteModel {
+  @Expose() @IsString() @IsNotEmpty() address: string;
+  @Expose() @IsInt() @IsNotEmpty() @Min(1) farmId: number;
+  @Expose() @IsBoolean() approve: boolean;
+  @Expose() @IsString() @IsNotEmpty() hash: string;
+}
 class BalanceGetModel {
   @Expose() @IsString() @IsNotEmpty() address: string;
 }
@@ -431,7 +435,13 @@ class TfchainWalletInitModel {
 class TfchainWalletBalanceByAddressModel {
   @Expose() @IsString() @IsNotEmpty() address: string;
 }
-
+class TfchainDaoVoteModel {
+  @Expose() @IsString() @IsNotEmpty() @IsAlphanumeric() @MaxLength(NameLength) name: string;
+  @Expose() @IsString() @IsNotEmpty() address: string;
+  @Expose() @IsInt() @IsNotEmpty() @Min(1) farmId: number;
+  @Expose() @IsBoolean() approve: boolean;
+  @Expose() @IsString() @IsNotEmpty() hash: string;
+}
 class TfchainWalletTransferModel {
   @Expose() @IsString() @IsNotEmpty() @IsAlphanumeric() @MaxLength(NameLength) name: string;
   @Expose() @IsString() @IsNotEmpty() address_dest: string;
@@ -582,6 +592,7 @@ class FilterOptions {
   @Expose() @IsOptional() @IsBoolean() rentable?: boolean;
   @Expose() @IsOptional() @IsInt() @Min(1) rentedBy?: number;
   @Expose() @IsOptional() @IsBoolean() randomize?: boolean;
+  @Expose() @IsOptional() @IsBoolean() ret_count?: boolean;
   @Expose() @IsOptional() @Transform(({ value }) => NodeStatus[value]) @IsEnum(NodeStatus) status?: NodeStatus;
 }
 
@@ -606,8 +617,10 @@ class FarmFilterOptions {
   @Expose() @IsOptional() @IsInt() @Min(1) nodeRentedBy?: number;
   @Expose() @IsOptional() @IsInt() page?: number;
   @Expose() @IsOptional() @IsInt() size?: number;
+  @Expose() @IsOptional() @IsInt() ownedBy?: number;
   @Expose() @IsOptional() @IsInt() farmId?: number;
   @Expose() @IsOptional() @IsBoolean() randomize?: boolean;
+  @Expose() @IsOptional() @IsBoolean() ret_count?: boolean;
 }
 
 class CalculatorModel {
@@ -647,6 +660,51 @@ class FarmIdModel {
   @Expose() @IsInt() @IsNotEmpty() @Min(1) id: number;
 }
 
+class FarmPublicIPsModel {
+  @Expose() @IsNotEmpty() @IsIP() ip: string;
+  @Expose() @IsNotEmpty() @IsString() gw: string;
+}
+
+class AddFarmIPModel {
+  @Expose() @IsInt() @IsNotEmpty() @Min(1) farmId: number;
+  @Expose() @IsNotEmpty() @IsString() ip: string;
+  @Expose() @IsNotEmpty() @IsIP() gw: string;
+}
+
+class IPConfig {
+  @Expose() @IsNotEmpty() @IsString() ip: string;
+  @Expose() @IsNotEmpty() @IsIP() gw: string;
+}
+class PublicConfigModel {
+  @Expose() @IsNotEmpty() @Type(() => IPConfig) @ValidateNested() ip4: IPConfig;
+  @Expose() @IsOptional() ip6: IPConfig | null;
+  @Expose() @IsOptional() @IsString() domain: string | null;
+}
+class AddPublicConfig {
+  @Expose() @IsInt() @IsNotEmpty() @Min(1) farmId: number;
+  @Expose() @IsInt() @IsNotEmpty() @Min(1) nodeId: number;
+  @Expose() @IsOptional() @Type(() => PublicConfigModel) @ValidateNested() publicConfig?: PublicConfigModel | null;
+}
+
+class RemoveFarmIPModel {
+  @Expose() @IsInt() @IsNotEmpty() @Min(1) farmId: number;
+  @Expose() @IsNotEmpty() @IsString() ip: string;
+}
+
+class AddStellarAddressToFarmModel {
+  @Expose() @IsInt() @IsNotEmpty() @Min(1) farmId: number;
+  @Expose() @IsString() @IsNotEmpty() stellarAddress: string;
+}
+
+class CreateFarmModel {
+  @Expose() @IsString() @IsNotEmpty() @MaxLength(NameLength) name: string;
+  @Expose()
+  @IsOptional()
+  @Type(() => FarmPublicIPsModel)
+  @ValidateNested({ each: true })
+  publicIps?: FarmPublicIPsModel[];
+}
+
 class pingFarmModel {
   @Expose() @IsInt() @IsNotEmpty() @Min(1) farmId: number;
 }
@@ -671,13 +729,26 @@ class NetworkGetModel {
 
 class SetDedicatedNodeExtraFeesModel {
   @Expose() @IsInt() @IsNotEmpty() @Min(1) nodeId: number;
-  @Expose() @IsInt() @IsNotEmpty() @Min(1) extraFee: number;
+  @Expose() @IsNumber() @IsNotEmpty() @Min(0) extraFee: number;
 }
 
 class GetDedicatedNodePriceModel {
   @Expose() @IsInt() @IsNotEmpty() @Min(1) nodeId: number;
 }
 
+class SwapToStellarModel {
+  @Expose() @IsNotEmpty() @IsString() target: string;
+  @Expose() @IsNotEmpty() @Min(1) amount: number;
+}
+
+class ListenToMintCompletedModel {
+  @Expose() @IsNotEmpty() @IsString() address: string;
+}
+
+class GetActiveContractsModel {
+  @Expose() @IsInt() @IsNotEmpty() @Min(1) nodeId: number;
+}
+
 export {
   AlgorandAccountCreateModel,
   AlgorandAccountInitModel,
@@ -686,6 +757,7 @@ export {
   AlgorandCreateTransactionModel,
   AlgorandTransferModel,
   DiskModel,
+  DaoVoteModel,
   NetworkModel,
   MachineModel,
   MachinesModel,
@@ -762,6 +834,7 @@ export {
   TfchainWalletBalanceByAddressModel,
   TfchainWalletTransferModel,
   TfchainCreateModel,
+  TfchainDaoVoteModel,
   WalletMessageSignModel,
   BlockchainCreateModel,
   BlockchainCreateResultModel,
@@ -786,6 +859,7 @@ export {
   ZOSNodeModel,
   NodePowerModel,
   FarmIdModel,
+  CreateFarmModel,
   pingFarmModel,
   CreateServiceContractModel,
   ServiceContractApproveModel,
@@ -800,4 +874,11 @@ export {
   NodeGetModel,
   SetDedicatedNodeExtraFeesModel,
   GetDedicatedNodePriceModel,
+  SwapToStellarModel,
+  ListenToMintCompletedModel,
+  AddFarmIPModel,
+  RemoveFarmIPModel,
+  AddStellarAddressToFarmModel,
+  AddPublicConfig,
+  GetActiveContractsModel,
 };
diff --git a/packages/grid_client/src/modules/nodes.ts b/packages/grid_client/src/modules/nodes.ts
index a629daca65..a14e5a0af5 100644
--- a/packages/grid_client/src/modules/nodes.ts
+++ b/packages/grid_client/src/modules/nodes.ts
@@ -1,9 +1,12 @@
+import { GridClientErrors, TFChainError } from "@threefold/types";
+
 import { TFClient } from "../clients";
 import { GridClientConfig } from "../config";
 import { events, validateInput } from "../helpers";
 import { expose } from "../helpers/expose";
 import { capacity } from "./capacity";
 import {
+  AddPublicConfig,
   FilterOptions,
   NodeGetModel,
   NodePowerModel,
@@ -17,7 +20,7 @@ class Nodes {
   client: TFClient;
   capacity: capacity;
   constructor(public config: GridClientConfig) {
-    this.client = new TFClient(config.substrateURL, config.mnemonic, config.storeSecret, config.keypairType);
+    this.client = config.tfclient;
     this.capacity = new capacity(config);
   }
 
@@ -27,14 +30,15 @@ class Nodes {
   async reserve(options: RentContractCreateModel) {
     const rentContractId = await this.getRentContractId({ nodeId: options.nodeId });
     if (rentContractId) {
-      throw Error(`Node is already rented`);
+      throw new GridClientErrors.Nodes.UnavailableNodeError(`Node is already rented.`);
     }
     try {
       const res = await (await this.client.contracts.createRent(options)).apply();
-      events.emit("logs", `Rent contract with id: ${res.contractId} has been created`);
+      events.emit("logs", `Rent contract with id: ${res.contractId} has been created.`);
       return res;
     } catch (e) {
-      throw Error(`Failed to create rent contract on node ${options.nodeId} due to ${e}`);
+      //TODO Errors should be handled in tfchain
+      throw new TFChainError(`Failed to create rent contract on node ${options.nodeId} due to ${e}`);
     }
   }
 
@@ -52,7 +56,7 @@ class Nodes {
       events.emit("logs", `Rent contract for node ${options.nodeId} has been deleted`);
       return res;
     } catch (e) {
-      throw Error(`Failed to delete rent contract on node ${options.nodeId} due to ${e}`);
+      throw new TFChainError(`Failed to delete rent contract on node ${options.nodeId} due to ${e}`);
     }
   }
 
@@ -65,7 +69,7 @@ class Nodes {
         return res;
       })
       .catch(err => {
-        throw Error(`Error getting rent for node ${options.nodeId}: ${err}`);
+        throw new TFChainError(`Error getting rent for node ${options.nodeId}: ${err}`);
       });
   }
 
@@ -82,6 +86,13 @@ class Nodes {
     return (await this.client.nodes.setPower(options)).apply();
   }
 
+  @expose
+  @validateInput
+  @checkBalance
+  async addNodePublicConfig(options: AddPublicConfig) {
+    return (await this.client.nodes.addNodePublicConfig(options)).apply();
+  }
+
   @expose
   async all() {
     return await this.capacity.getAllNodes();
diff --git a/packages/grid_client/src/modules/qsfs_zdbs.ts b/packages/grid_client/src/modules/qsfs_zdbs.ts
index b2d9b9ad0a..4a1dab5354 100644
--- a/packages/grid_client/src/modules/qsfs_zdbs.ts
+++ b/packages/grid_client/src/modules/qsfs_zdbs.ts
@@ -1,3 +1,5 @@
+import { ValidationError } from "@threefold/types";
+
 import { GridClientConfig } from "../config";
 import { events } from "../helpers/events";
 import { expose } from "../helpers/expose";
@@ -15,14 +17,14 @@ class QSFSZdbsModule extends BaseModule {
   moduleName = "qsfs_zdbs";
   workloadTypes = [WorkloadTypes.zdb];
   zdb: ZdbHL;
-  constructor(config: GridClientConfig) {
+  constructor(public config: GridClientConfig) {
     super(config);
     this.zdb = new ZdbHL(config);
   }
 
   async _createDeployment(options: QSFSZDBSModel): Promise<TwinDeployment[]> {
     if (options.count < 3) {
-      throw Error("QSFS zdbs count can't be less than 3");
+      throw new ValidationError("QSFS zdbs count can't be less than 3.");
     }
     const count = options.count + 4; // 4 zdbs for meta
     const twinDeployments = [];
@@ -59,7 +61,7 @@ class QSFSZdbsModule extends BaseModule {
   @checkBalance
   async deploy(options: QSFSZDBSModel) {
     if (await this.exists(options.name)) {
-      throw Error(`Another QSFS ZDBs deployment with the same name ${options.name} already exists`);
+      throw new ValidationError(`Another QSFS ZDBs deployment with the same name ${options.name} already exists.`);
     }
     events.emit("logs", `Start creating the QSFS ZDBs deployment with name ${options.name}`);
     const twinDeployments = await this._createDeployment(options);
diff --git a/packages/grid_client/src/modules/stellar.ts b/packages/grid_client/src/modules/stellar.ts
index 69b77559fd..b0e65e1232 100644
--- a/packages/grid_client/src/modules/stellar.ts
+++ b/packages/grid_client/src/modules/stellar.ts
@@ -1,4 +1,5 @@
-import axios from "axios";
+import { GridClientError, RequestError, ValidationError } from "@threefold/types";
+import axios, { AxiosError } from "axios";
 import { Buffer } from "buffer";
 import * as PATH from "path";
 import { default as StellarSdk } from "stellar-sdk";
@@ -69,7 +70,7 @@ class Stellar implements blockchainInterface {
   async save(name: string, secret: string) {
     const [path, data] = await this._load();
     if (data[name]) {
-      throw Error(`A wallet with the same name ${name} already exists`);
+      throw new ValidationError(`A wallet with the same name ${name} already exists.`);
     }
     const updateOperations = await this.backendStorage.update(path, name, secret);
     await this.saveIfKVStoreBackend(updateOperations);
@@ -78,7 +79,7 @@ class Stellar implements blockchainInterface {
   async getWalletSecret(name: string) {
     const [, data] = await this._load();
     if (!data[name]) {
-      throw Error(`Couldn't find a wallet with name ${name}`);
+      throw new ValidationError(`Couldn't find a wallet with name ${name}.`);
     }
     return data[name];
   }
@@ -87,14 +88,14 @@ class Stellar implements blockchainInterface {
   @validateInput
   async create(options: StellarWalletCreateModel): Promise<BlockchainCreateResultModel> {
     const account_exists = await this.exist({ name: options.name });
-    if (account_exists) throw Error(`Name ${options.name} already exists`);
+    if (account_exists) throw new ValidationError(`Name ${options.name} already exists`);
 
     const account = StellarSdk.Keypair.random();
     const publicKey = account.publicKey();
     try {
       await axios.get(`https://friendbot.stellar.org?addr=${encodeURIComponent(publicKey)}`);
     } catch (e) {
-      throw Error(`An error happened while creating your account. ${e}`);
+      throw new RequestError(`An error happened while creating your account. ${e}`, (e as AxiosError).response?.status);
     }
 
     await this.save(options.name, account.secret());
@@ -150,7 +151,7 @@ class Stellar implements blockchainInterface {
   @validateInput
   async update(options: StellarWalletInitModel) {
     if (!(await this.exist(options))) {
-      throw Error(`Couldn't find a wallet with name ${options.name} to update`);
+      throw new ValidationError(`Couldn't find a wallet with name ${options.name} to update.`);
     }
     const secret = await this.getWalletSecret(options.name);
     const deleteWallet = new BlockchainDeleteModel();
@@ -162,7 +163,7 @@ class Stellar implements blockchainInterface {
       const oldSecret = options.secret;
       options.secret = secret;
       await this.init(options);
-      throw Error(`Couldn't import wallet with the secret ${oldSecret} due to: ${e}`);
+      throw new GridClientError(`Couldn't import wallet with the secret ${oldSecret} due to: ${e}`);
     }
   }
 
@@ -194,7 +195,7 @@ class Stellar implements blockchainInterface {
   async assets(options: BlockchainGetModel): Promise<BlockchainAssetsModel> {
     const secret = await this.getWalletSecret(options.name);
     if (!secret) {
-      throw Error(`Couldn't find a wallet with name ${options.name}`);
+      throw new ValidationError(`Couldn't find a wallet with name ${options.name}.`);
     }
     const walletKeypair = StellarSdk.Keypair.fromSecret(secret);
     const walletPublicKey = walletKeypair.publicKey();
@@ -230,7 +231,7 @@ class Stellar implements blockchainInterface {
   async pay(options: StellarWalletTransferModel) {
     const secret = await this.getWalletSecret(options.name);
     if (!secret) {
-      throw Error(`Couldn't find a wallet with name ${options.name}`);
+      throw new ValidationError(`Couldn't find a wallet with name ${options.name}`);
     }
     const sourceKeypair = StellarSdk.Keypair.fromSecret(secret);
     const sourcePublicKey = sourceKeypair.publicKey();
@@ -245,7 +246,7 @@ class Stellar implements blockchainInterface {
         }
       }
       if (!issuer) {
-        throw Error(`couldn't find this asset ${options.asset} on source wallet`);
+        throw new ValidationError(`couldn't find this asset ${options.asset} on source wallet.`);
       }
       asset = new StellarSdk.Asset(options.asset, issuer);
     } else {
@@ -276,8 +277,7 @@ class Stellar implements blockchainInterface {
       console.log("Success! View the transaction at: ", transactionResult._links.transaction.href);
       return transactionResult._links.transaction.href;
     } catch (e) {
-      console.log("An error has occured:", e);
-      throw Error(e);
+      throw new GridClientError(`An error has occurred: ${e}`);
     }
   }
 
@@ -286,7 +286,7 @@ class Stellar implements blockchainInterface {
   async delete(options: BlockchainDeleteModel) {
     const [path, data] = await this._load();
     if (!data[options.name]) {
-      throw Error(`Couldn't find a wallet with name ${options.name}`);
+      throw new ValidationError(`Couldn't find a wallet with name ${options.name}.`);
     }
     const updateOperations = await this.backendStorage.update(path, options.name, "", StorageUpdateAction.delete);
     await this.saveIfKVStoreBackend(updateOperations);
diff --git a/packages/grid_client/src/modules/tfchain.ts b/packages/grid_client/src/modules/tfchain.ts
index 5d7a2b1400..83ac7cc18a 100644
--- a/packages/grid_client/src/modules/tfchain.ts
+++ b/packages/grid_client/src/modules/tfchain.ts
@@ -1,5 +1,6 @@
 import { Keyring } from "@polkadot/keyring";
 import { waitReady } from "@polkadot/wasm-crypto";
+import { BaseError, TFChainError, ValidationError } from "@threefold/types";
 import axios from "axios";
 import { generateMnemonic } from "bip39";
 import { Buffer } from "buffer";
@@ -8,6 +9,7 @@ import * as PATH from "path";
 
 import { TFClient } from "../clients/tf-grid/client";
 import { GridClientConfig } from "../config";
+import { formatErrorMessage } from "../helpers";
 import { expose } from "../helpers/expose";
 import { validateInput } from "../helpers/validator";
 import { appPath, BackendStorage, BackendStorageType, StorageUpdateAction } from "../storage/backend";
@@ -22,6 +24,7 @@ import {
   BlockchainListResultModel,
   BlockchainSignModel,
   TfchainCreateModel,
+  TfchainDaoVoteModel,
   TfchainWalletBalanceByAddressModel,
   TfchainWalletInitModel,
   TfchainWalletTransferModel,
@@ -84,7 +87,7 @@ class TFChain implements blockchainInterface {
   async save(name: string, mnemonic: string) {
     const [path, data] = await this._load();
     if (data[name]) {
-      throw Error(`An account with the same name ${name} already exists`);
+      throw new ValidationError(`An account with the same name ${name} already exists.`);
     }
     const updateOperations = await this.backendStorage.update(path, name, mnemonic);
     await this.saveIfKVStoreBackend(updateOperations);
@@ -102,7 +105,7 @@ class TFChain implements blockchainInterface {
   async getMnemonics(name: string) {
     const [, data] = await this._load();
     if (!data[name]) {
-      throw Error(`An account with the name ${name} does not exist.`);
+      throw new ValidationError(`An account with the name ${name} does not exist.`);
     }
     return data[name];
   }
@@ -126,7 +129,7 @@ class TFChain implements blockchainInterface {
   @validateInput
   async update(options: TfchainWalletInitModel) {
     if (!(await this.exist(options))) {
-      throw Error(`Couldn't find an account with name ${options.name}`);
+      throw new ValidationError(`Couldn't find an account with name ${options.name}.`);
     }
     const client = new TFClient(this.substrateURL, options.secret, this.storeSecret, this.keypairType);
     await client.connect();
@@ -141,7 +144,11 @@ class TFChain implements blockchainInterface {
       );
       await this.saveIfKVStoreBackend(updateOperations);
     } catch (e) {
-      throw Error(`could not update account mnemonics: ${e}`);
+      if (e instanceof BaseError) {
+        e.message = formatErrorMessage(`Could not update account mnemonics`, e);
+        throw e;
+      }
+      throw new TFChainError(`Could not update account mnemonics: ${e}`);
     }
     return client.address;
   }
@@ -175,7 +182,7 @@ class TFChain implements blockchainInterface {
   @validateInput
   async assets(options: BlockchainGetModel): Promise<BlockchainAssetsModel> {
     if (!(await this.exist(options))) {
-      throw Error(`Couldn't find an account with name ${options.name}`);
+      throw new ValidationError(`Couldn't find an account with name ${options.name}.`);
     }
     const mnemonics = await this.getMnemonics(options.name);
     const client = new TFClient(this.substrateURL, mnemonics, this.storeSecret, this.keypairType);
@@ -213,7 +220,35 @@ class TFChain implements blockchainInterface {
     try {
       await (await sourceClient.balances.transfer({ address: options.address_dest, amount: options.amount })).apply();
     } catch (e) {
-      throw Error(`Could not complete transfer transaction: ${e}`);
+      //TODO error should be handled in tfchain?
+      if (e instanceof BaseError) {
+        e.message = formatErrorMessage(`Could not complete transfer transaction`, e);
+        throw e;
+      }
+      throw new TFChainError(`Could not complete transfer transaction: ${e}`);
+    }
+  }
+  @expose
+  @validateInput
+  async vote(options: TfchainDaoVoteModel) {
+    const mnemonics = await this.getMnemonics(options.name);
+    const sourceClient = new TFClient(this.substrateURL, mnemonics, this.storeSecret, this.keypairType);
+    await sourceClient.connect();
+    try {
+      await (
+        await sourceClient.dao.vote({
+          address: options.address,
+          farmId: options.farmId,
+          hash: options.hash,
+          approve: options.approve,
+        })
+      ).apply();
+    } catch (e) {
+      if (e instanceof BaseError) {
+        e.message = formatErrorMessage(`Could not complete transfer transaction`, e);
+        throw e;
+      }
+      throw new TFChainError(`Could not complete transfer transaction: ${e}`);
     }
   }
 
@@ -221,7 +256,7 @@ class TFChain implements blockchainInterface {
   @validateInput
   async delete(options: BlockchainDeleteModel) {
     if (!(await this.exist(options))) {
-      throw Error(`Couldn't find an account with name ${options.name}`);
+      throw new ValidationError(`Couldn't find an account with name ${options.name}.`);
     }
     const path = this.getPath();
     const updateOperations = await this.backendStorage.update(path, options.name, "", StorageUpdateAction.delete);
@@ -233,7 +268,7 @@ class TFChain implements blockchainInterface {
   @validateInput
   async create(options: TfchainCreateModel): Promise<BlockchainCreateResultModel> {
     if (await this.exist({ name: options.name })) {
-      throw Error(`An account with the same name ${options.name} already exists`);
+      throw new ValidationError(`An account with the same name ${options.name} already exists.`);
     }
     const createdAccount = await this.createAccount(options.relay as string);
     await this.init({ name: options.name, secret: createdAccount.mnemonic });
@@ -266,7 +301,7 @@ class TFChain implements blockchainInterface {
       await new Promise(f => setTimeout(f, 1000));
     }
     if (balance.free <= 0) {
-      throw Error("Couldn't activate the newly created account");
+      throw new TFChainError("Couldn't activate the newly created account.");
     }
     await (
       await client.termsAndConditions.accept({ documentLink: "https://library.threefold.me/info/legal/#/" })
@@ -287,7 +322,7 @@ class TFChain implements blockchainInterface {
     const hash = MD5(options.content);
     const message_bytes = Uint8Array.from(Buffer.from(hash.toString(), "hex"));
     const keyr = new Keyring({ type: this.keypairType });
-    const key = keyr.addFromMnemonic(mnemonics);
+    const key = keyr.addFromUri(mnemonics);
     await waitReady();
     const signed = key.sign(message_bytes);
     return Buffer.from(signed).toString("hex");
diff --git a/packages/grid_client/src/modules/twins.ts b/packages/grid_client/src/modules/twins.ts
index b0ef1805ef..a07cefcf09 100644
--- a/packages/grid_client/src/modules/twins.ts
+++ b/packages/grid_client/src/modules/twins.ts
@@ -7,7 +7,7 @@ import { checkBalance } from "./utils";
 
 class Twins {
   client: TFClient;
-  constructor(config: GridClientConfig) {
+  constructor(public config: GridClientConfig) {
     this.client = config.tfclient;
   }
 
diff --git a/packages/grid_client/src/modules/utils.ts b/packages/grid_client/src/modules/utils.ts
index 08c0a5965d..74dd13df7d 100644
--- a/packages/grid_client/src/modules/utils.ts
+++ b/packages/grid_client/src/modules/utils.ts
@@ -1,5 +1,4 @@
-import { GridClient } from "../client";
-import { TFClient } from "../clients/tf-grid/client";
+import { ValidationError } from "@threefold/types";
 
 // used as decorator
 function checkBalance(target, propertyKey: string, descriptor: PropertyDescriptor) {
@@ -7,7 +6,7 @@ function checkBalance(target, propertyKey: string, descriptor: PropertyDescripto
   descriptor.value = async function (...args) {
     const balances = await this.config.tfclient.balances.getMyBalance();
     if (balances["free"] < 0.001) {
-      throw Error("Balance is not enough to apply an extrinsic");
+      throw new ValidationError("Balance is not enough to apply an extrinsic.");
     }
     return await method.apply(this, args);
   };
diff --git a/packages/grid_client/src/modules/zdb.ts b/packages/grid_client/src/modules/zdb.ts
index 443ea68def..260fce306a 100644
--- a/packages/grid_client/src/modules/zdb.ts
+++ b/packages/grid_client/src/modules/zdb.ts
@@ -1,3 +1,5 @@
+import { ValidationError } from "@threefold/types";
+
 import { GridClientConfig } from "../config";
 import { events } from "../helpers/events";
 import { expose } from "../helpers/expose";
@@ -14,7 +16,7 @@ class ZdbsModule extends BaseModule {
   fileName = "zdbs.json";
   workloadTypes = [WorkloadTypes.zdb];
   zdb: ZdbHL;
-  constructor(config: GridClientConfig) {
+  constructor(public config: GridClientConfig) {
     super(config);
     this.zdb = new ZdbHL(config);
   }
@@ -29,7 +31,7 @@ class ZdbsModule extends BaseModule {
     });
     for (const instance of options.zdbs) {
       if (zdbs_names.includes(instance.name))
-        throw Error(`Another zdb with the same name ${instance.name} already exists`);
+        throw new ValidationError(`Another zdb with the same name ${instance.name} already exists.`);
       zdbs_names.push(instance.name);
 
       const twinDeployment = await this.zdb.create(
@@ -53,7 +55,7 @@ class ZdbsModule extends BaseModule {
   @checkBalance
   async deploy(options: ZDBSModel) {
     if (await this.exists(options.name)) {
-      throw Error(`Another zdb deployment with the same name ${options.name} already exists`);
+      throw new ValidationError(`Another zdb deployment with the same name ${options.name} already exists.`);
     }
     events.emit("logs", `Start creating the ZDB deployment with name ${options.name}`);
     const twinDeployments = await this._createDeployment(options);
@@ -112,7 +114,7 @@ class ZdbsModule extends BaseModule {
   @checkBalance
   async update(options: ZDBSModel) {
     if (!(await this.exists(options.name))) {
-      throw Error(`There is no zdb deployment with name: ${options.name}`);
+      throw new ValidationError(`There is no zdb deployment with name: ${options.name}.`);
     }
     const oldDeployments = await this._get(options.name);
     const twinDeployments = await this._createDeployment(options);
@@ -124,12 +126,12 @@ class ZdbsModule extends BaseModule {
   @checkBalance
   async add_zdb(options: AddZDBModel) {
     if (!(await this.exists(options.deployment_name))) {
-      throw Error(`There is no zdb deployment with name: ${options.deployment_name}`);
+      throw new ValidationError(`There is no zdb deployment with name: ${options.deployment_name}.`);
     }
     const oldDeployments = await this._get(options.deployment_name);
     if (this.workloadExists(options.name, oldDeployments))
-      throw Error(
-        `There is another zdb with the same name "${options.name}" in this deployment ${options.deployment_name}`,
+      throw new ValidationError(
+        `There is another zdb with the same name "${options.name}" in this deployment ${options.deployment_name}.`,
       );
     events.emit("logs", `Start adding ZDB instance: ${options.name} to deployment: ${options.deployment_name}`);
     const twinDeployment = await this.zdb.create(
@@ -152,7 +154,7 @@ class ZdbsModule extends BaseModule {
   @checkBalance
   async delete_zdb(options: DeleteZDBModel) {
     if (!(await this.exists(options.deployment_name))) {
-      throw Error(`There is no zdb deployment with name: ${options.deployment_name}`);
+      throw new ValidationError(`There is no zdb deployment with name: ${options.deployment_name}.`);
     }
     events.emit("logs", `Start deleting ZDB instance: ${options.name} from deployment: ${options.deployment_name}`);
     return await this._deleteInstance(this.zdb, options.deployment_name, options.name);
diff --git a/packages/grid_client/src/primitives/network.ts b/packages/grid_client/src/primitives/network.ts
index 3805fd9953..4c9f25013e 100644
--- a/packages/grid_client/src/primitives/network.ts
+++ b/packages/grid_client/src/primitives/network.ts
@@ -1,3 +1,4 @@
+import { GridClientErrors, ValidationError } from "@threefold/types";
 import { Buffer } from "buffer";
 import { plainToInstance } from "class-transformer";
 import { Addr } from "netaddr";
@@ -9,7 +10,7 @@ import { RMB } from "../clients/rmb/client";
 import { TFClient } from "../clients/tf-grid/client";
 import { GridClientConfig } from "../config";
 import { events } from "../helpers/events";
-import { getRandomNumber, randomChoice } from "../helpers/utils";
+import { formatErrorMessage, getRandomNumber, randomChoice } from "../helpers/utils";
 import { BackendStorage, BackendStorageType } from "../storage/backend";
 import { Deployment } from "../zos/deployment";
 import { Workload, WorkloadTypes } from "../zos/workload";
@@ -49,10 +50,10 @@ class Network {
 
   constructor(public name: string, public ipRange: string, public config: GridClientConfig) {
     if (Addr(ipRange).prefix !== 16) {
-      throw Error("Network ip_range should have a prefix 16");
+      throw new ValidationError("Network ip_range should have a prefix 16.");
     }
     if (!this.isPrivateIP(ipRange)) {
-      throw Error("Network ip_range should be a private range");
+      throw new ValidationError("Network ip_range should be a private range.");
     }
     this.backendStorage = new BackendStorage(
       config.backendStorageType,
@@ -80,16 +81,16 @@ class Network {
 
   async addAccess(node_id: number, ipv4: boolean): Promise<string> {
     if (!this.nodeExists(node_id)) {
-      throw Error(`Node ${node_id} does not exist in the network. Please add it first`);
+      throw new ValidationError(`Node ${node_id} does not exist in the network. Please add it first.`);
     }
     events.emit("logs", `Adding access to node ${node_id}`);
     const accessNodes = await this.capacity.getAccessNodes(this.config.twinId);
     if (Object.keys(accessNodes).includes(node_id.toString())) {
       if (ipv4 && !accessNodes[node_id]["ipv4"]) {
-        throw Error(`Node ${node_id} does not have ipv4 public config.`);
+        throw new GridClientErrors.Nodes.InvalidResourcesError(`Node ${node_id} does not have ipv4 public config.`);
       }
     } else {
-      throw Error(`Node ${node_id} is not an access node.`);
+      throw new GridClientErrors.Nodes.AccessNodeError(`Node ${node_id} is not an access node.`);
     }
 
     const nodeWGListeningPort = this.getNodeWGListeningPort(node_id);
@@ -99,7 +100,9 @@ class Network {
     } else if (accessNodes[node_id]["ipv6"]) {
       endpoint = `[${accessNodes[node_id]["ipv6"].split("/")[0]}]:${nodeWGListeningPort}`;
     } else {
-      throw Error(`Couldn't find ipv4 or ipv6 in the public config of node ${node_id} `);
+      throw new GridClientErrors.Nodes.InvalidResourcesError(
+        `Couldn't find ipv4 or ipv6 in the public config of node ${node_id}.`,
+      );
     }
 
     const nodesWGPubkey = await this.getNodeWGPublicKey(node_id);
@@ -209,7 +212,7 @@ class Network {
     events.emit("logs", `Loading network ${this.name}`);
     const network = await this.getNetwork();
     if (network["ip_range"] !== this.ipRange) {
-      throw Error(`The same network name ${this.name} with a different ip range already exists`);
+      throw new ValidationError(`The same network name ${this.name} with a different ip range already exists.`);
     }
 
     await this.tfClient.connect();
@@ -222,7 +225,8 @@ class Network {
       try {
         res = await this.rmb.request([node_twin_id], "zos.deployment.get", payload);
       } catch (e) {
-        throw Error(`Failed to load network deployment ${node.contract_id} due to ${e}`);
+        (e as Error).message = formatErrorMessage(`Failed to load network deployment ${node.contract_id}`, e);
+        throw e;
       }
       res["node_id"] = node.node_id;
       for (const workload of res["workloads"]) {
@@ -330,7 +334,7 @@ class Network {
         ip = ip.increment();
       }
     } else {
-      throw Error("node_id or subnet must be specified");
+      throw new ValidationError("node_id or subnet must be specified.");
     }
     if (ip) {
       ip = ip.toString().split("/")[0];
@@ -340,20 +344,20 @@ class Network {
           return ip;
         }
       }
-      throw Error(`node_id is not in the network. Please add it first`);
+      throw new ValidationError(`node_id is not in the network. Please add it first.`);
     }
   }
   validateUserIP(node_id: number, ip_address = "") {
     const reserved_ips = this.getNodeReservedIps(node_id);
     if (reserved_ips.includes(ip_address)) {
-      throw Error(`private ip ${ip_address} is being used please select another ip or leave it empty`);
+      throw new ValidationError(`private ip ${ip_address} is being used please select another ip or leave it empty.`);
     }
 
     const nodeSubnet = this.getNodeSubnet(node_id);
     const ip = Addr(ip_address);
 
     if (!Addr(nodeSubnet).contains(ip)) {
-      throw Error(`Selected ip is not available in node subnet, node subnet: ${nodeSubnet}`);
+      throw new ValidationError(`Selected ip is not available in node subnet, node subnet: ${nodeSubnet}`);
     }
     for (const node of this.nodes) {
       if (node.node_id === node_id) {
@@ -425,7 +429,7 @@ class Network {
       this.reservedSubnets.push(subnet);
       return subnet;
     } else {
-      throw Error(`subnet ${subnet} is not free`);
+      throw new ValidationError(`subnet ${subnet} is not free.`);
     }
   }
 
@@ -473,7 +477,8 @@ class Network {
     try {
       result = await this.rmb.request([node_twin_id], "zos.network.list_wg_ports", "");
     } catch (e) {
-      throw Error(`Couldn't get free Wireguard ports for node ${node_id} due to ${e}`);
+      (e as Error).message = formatErrorMessage(`Couldn't get free Wireguard ports for node ${node_id}`, e);
+      throw e;
     }
     events.emit("logs", `Node ${node_id} reserved ports: ${JSON.stringify(result)}`);
 
@@ -515,7 +520,8 @@ class Network {
       try {
         result = await this.rmb.request([node_twin_id], "zos.network.interfaces", "");
       } catch (e) {
-        throw Error(`Couldn't get the network interfaces for node ${node_id} due to ${e}`);
+        (e as Error).message = formatErrorMessage(`Couldn't get the network interfaces for node ${node_id}`, e);
+        throw e;
       }
       events.emit("logs", `Node ${node_id} network interfaces: ${JSON.stringify(result)}`);
 
@@ -624,7 +630,7 @@ PersistentKeepalive = 25\nEndpoint = ${endpoint}`;
       }
       const accessNodes = await this.getAccessNodes();
       if (accessNodes.length === 0) {
-        throw Error(
+        throw new GridClientErrors.Nodes.AccessNodeError(
           `Couldn't add node ${net["node_id"]} as it's a hidden node ` +
             `and there is no access node in this network ${this.name}. ` +
             "Please add addAccess = true in the network configuration.",
diff --git a/packages/grid_client/src/primitives/nodes.ts b/packages/grid_client/src/primitives/nodes.ts
index d5d307bd6d..bca50e2da1 100644
--- a/packages/grid_client/src/primitives/nodes.ts
+++ b/packages/grid_client/src/primitives/nodes.ts
@@ -1,13 +1,20 @@
 import { Client as RMBClient } from "@threefold/rmb_direct_client";
 import { QueryClient } from "@threefold/tfchain_client";
+import {
+  BaseError,
+  GridClientError,
+  GridClientErrors,
+  RequestError,
+  TFChainError,
+  ValidationError,
+} from "@threefold/types";
 import { default as PrivateIp } from "private-ip";
 import urlJoin from "url-join";
 
-import { GridClient } from "../client";
 import { RMB } from "../clients";
 import { Graphql } from "../clients/graphql/client";
-import { TFClient } from "../clients/tf-grid/client";
-import { send } from "../helpers/requests";
+import { formatErrorMessage } from "../helpers";
+import { send, sendWithFullResponse } from "../helpers/requests";
 import { FarmFilterOptions, FilterOptions, NodeStatus } from "../modules/models";
 
 interface FarmInfo {
@@ -50,6 +57,8 @@ interface NodeInfo {
   hasGPU: boolean;
   extraFee: number;
   rentedByTwinId: number;
+  inDedicatedFarm: boolean;
+  rentContractId: number;
 }
 interface PublicConfig {
   domain: string;
@@ -103,12 +112,13 @@ class Nodes {
       .query(body, { nodeId: node_id })
       .then(response => {
         if (response["data"]["nodes"]["length"] === 0) {
-          throw Error(`Couldn't find a node with id: ${node_id}`);
+          throw new ValidationError(`Couldn't find a node with id: ${node_id}.`);
         }
         return response["data"]["nodes"][0]["twinID"];
       })
-      .catch(err => {
-        throw Error(`Error getting node twin ID for ID ${node_id}: ${err}`);
+      .catch(e => {
+        (e as Error).message = formatErrorMessage(`Error getting node twin ID for ID ${node_id}`, e);
+        throw e;
       });
   }
 
@@ -129,7 +139,7 @@ class Nodes {
       page++;
     } while (nodes.length);
     if (Object.keys(accessNodes).length === 0) {
-      throw Error("Couldn't find any node with public config");
+      throw new GridClientErrors.Nodes.InvalidResourcesError("Couldn't find any node with public config.");
     }
     return accessNodes;
   }
@@ -140,11 +150,12 @@ class Nodes {
       .get({ id: contractId })
       .then(contract => {
         if (!contract.contractType.nodeContract)
-          throw Error(`Couldn't get node id for this contract ${contractId}. It's not a node contract`);
+          throw new ValidationError(`Couldn't get node id for this contract ${contractId}. It's not a node contract.`);
         return contract.contractType.nodeContract.nodeId;
       })
       .catch(err => {
-        throw Error(`Error getting node ID from contract ID ${contractId}: ${err}`);
+        //TODO add error handling in QueryClient/contracts
+        throw new TFChainError(`Error getting node ID from contract ID ${contractId}: ${err}`);
       });
   }
 
@@ -161,8 +172,9 @@ class Nodes {
       .then(res => {
         return res;
       })
-      .catch(err => {
-        throw Error(`Error listing farms with page ${page} and size ${pageSize}: ${err}`);
+      .catch((err: Error) => {
+        err.message = formatErrorMessage(`Error listing farms with page ${page} and size ${pageSize}`, err);
+        throw err;
       });
   }
 
@@ -171,7 +183,8 @@ class Nodes {
       const farmsCount = await this.gqlClient.getItemTotalCount("farms", "(orderBy: farmID_ASC)");
       return await this.getFarms(1, farmsCount, url);
     } catch (err) {
-      throw Error(`Error listing all farms: ${err}`);
+      (err as Error).message = formatErrorMessage(`Error listing all farms`, err);
+      throw err;
     }
   }
 
@@ -193,8 +206,9 @@ class Nodes {
       .then(ret => {
         return ret;
       })
-      .catch(err => {
-        throw Error(`Error listing nodes with page ${page} and size ${pageSize}: ${err}`);
+      .catch(e => {
+        (e as Error).message = formatErrorMessage(`Error listing nodes with page ${page} and size ${pageSize}`, e);
+        throw e;
       });
   }
 
@@ -202,8 +216,9 @@ class Nodes {
     try {
       const nodesCount = await this.gqlClient.getItemTotalCount("nodes", "(orderBy: nodeID_ASC)");
       return await this.getNodes(1, nodesCount, url);
-    } catch (err) {
-      throw Error(`Error listing all nodes: ${err}`);
+    } catch (e) {
+      (e as Error).message = formatErrorMessage(`Error listing all nodes`, e);
+      throw e;
     }
   }
 
@@ -214,8 +229,9 @@ class Nodes {
         "nodes",
         `(where: {farmID_eq: ${farmId}}, orderBy: nodeID_ASC)`,
       );
-    } catch (err) {
-      throw Error(`Error getting total nodes count: ${err}`);
+    } catch (e) {
+      (e as Error).message = formatErrorMessage(`Error getting total nodes count`, e);
+      throw e;
     }
     let r: string;
     if (url) r = url;
@@ -224,10 +240,11 @@ class Nodes {
     return send("get", urlJoin(r, `/nodes?farm_id=${farmId}&size=${nodesCount}`), "", {})
       .then(res => {
         if (res) return res;
-        else throw new Error(`The farm with id ${farmId}: doesn't have any nodes`);
+        else throw new ValidationError(`The farm with id ${farmId}: doesn't have any nodes.`);
       })
-      .catch(err => {
-        throw Error(`Error getting nodes by farm ID ${farmId}: ${err}`);
+      .catch(e => {
+        (e as Error).message = formatErrorMessage(`Error getting nodes by farm ID ${farmId}`, e);
+        throw e;
       });
   }
 
@@ -240,8 +257,9 @@ class Nodes {
       .then(ret => {
         if (ret.length !== 0) return ret[0];
       })
-      .catch(err => {
-        throw Error(`Error getting node with ID ${nodeId}: ${err}`);
+      .catch(e => {
+        (e as Error).message = formatErrorMessage(`Error getting node with ID ${nodeId}`, e);
+        throw e;
       });
   }
 
@@ -261,8 +279,9 @@ class Nodes {
 
           return ret;
         })
-        .catch(err => {
-          throw Error(`Error getting node ${nodeId}: ${err}`);
+        .catch(e => {
+          (e as Error).message = formatErrorMessage(`Error getting node ${nodeId}`, e);
+          throw e;
         });
     }
 
@@ -281,15 +300,15 @@ class Nodes {
 
         return ret;
       })
-      .catch(err => {
-        console.log(err);
-        if (err.response.status === 404) {
-          throw Error(`Node: ${nodeId} is not found`);
-        } else if (err.response.status === 502) {
-          throw Error(`Node: ${nodeId} is not reachable`);
-        } else {
-          throw err;
+      .catch(e => {
+        if (e instanceof RequestError && e.statusCode == 404) {
+          throw new ValidationError(`Node: ${nodeId} is not found`);
+        }
+        if (e instanceof BaseError) {
+          (e as Error).message = formatErrorMessage(`Couldn't get Node with ID ${nodeId}.`, e);
+          throw e;
         }
+        throw new GridClientError(`Couldn't get Node with ID ${nodeId} due to ${e}`);
       });
   }
 
@@ -297,11 +316,7 @@ class Nodes {
     let nodes: NodeInfo[] = [];
     url = url || this.proxyURL;
     const query = this.getNodeUrlQuery(options);
-    try {
-      nodes = await send("get", urlJoin(url, `/nodes?${query}`), "", {});
-    } catch (err) {
-      throw Error(`Error while requesting the grid proxy due ${err}`);
-    }
+    nodes = await send("get", urlJoin(url, `/nodes?${query}`), "", {});
     if (nodes.length) {
       nodes = nodes.filter(n => !(options.nodeExclude && options.nodeExclude?.includes(n.nodeId)));
     }
@@ -311,14 +326,26 @@ class Nodes {
     let farms: FarmInfo[] = [];
     url = url || this.proxyURL;
     const query = this.getFarmUrlQuery(options);
-    try {
-      farms = await send("get", urlJoin(url, `/farms?${query}`), "", {});
-    } catch (err) {
-      throw Error(`Error while requesting the grid proxy due ${err}`);
-    }
+    farms = await send("get", urlJoin(url, `/farms?${query}`), "", {});
     return farms;
   }
 
+  /**
+   * Retrieves the count of available farms with optional filter options.
+   *
+   * @param options - An object containing filter options to refine the farm count.
+   * @param url - (Optional) The URL to send the request to. If not provided, it defaults to the proxy URL defined in the class.
+   * @returns A Promise that resolves to the count of available farms as a number.
+   * @throws Error if there is an issue with the HTTP request or response.
+   */
+  async getFarmsCount(options: FilterOptions = {}, url = ""): Promise<number> {
+    url = url || this.proxyURL;
+    options.ret_count = true;
+    options.page = 1;
+    const query = this.getFarmUrlQuery(options);
+    return +(await sendWithFullResponse("get", urlJoin(url, `/farms?${query}`), "", {})).headers["count"];
+  }
+
   /**
    * Get farm id from farm name.
    * It returns 0 in case the farm name is not found.
@@ -384,11 +411,13 @@ class Nodes {
       node_status: "up",
       page: options.page,
       size: options.size,
+      twin_id: options.ownedBy,
       node_has_gpu: options.nodeHasGPU,
       node_rented_by: options.nodeRentedBy,
       node_certified: options.nodeCertified,
       farm_id: options.farmId,
       randomize: options.randomize,
+      ret_count: options.ret_count,
     };
     return Object.entries(params)
       .map(param => param.join("="))
@@ -409,14 +438,18 @@ class Nodes {
 
   async nodeAvailableForTwinId(nodeId: number, twinId: number): Promise<boolean> {
     return send("get", urlJoin(this.proxyURL, `/nodes/${nodeId}`), "", {})
-      .then(node => {
-        if (node.rentedByTwinId != twinId && (node.dedicated || node.rentContractId != 0)) {
+      .then((node: NodeInfo) => {
+        if (node.rentedByTwinId != twinId && (node.inDedicatedFarm || node.rentContractId != 0)) {
           return false;
         }
         return true;
       })
-      .catch(err => {
-        throw Error(`Error checking if node ${nodeId} is available for twin ${twinId}: ${err}`);
+      .catch(e => {
+        (e as Error).message = formatErrorMessage(
+          `Error checking if node ${nodeId} is available for twin ${twinId}`,
+          e,
+        );
+        throw e;
       });
   }
 
@@ -459,7 +492,7 @@ class Nodes {
     disks.forEach(disk => {
       if (!this.allocateDiskToPools(pools, disk)) {
         throw new Error(
-          `Cannot fit the required ${type.toUpperCase()} disk with size ${(disk / 1024 ** 3).toFixed(2)} GB`,
+          `Cannot fit the required ${type.toUpperCase()} disk with size ${(disk / 1024 ** 3).toFixed(2)} GB.`,
         );
       }
       this.sortArrayDesc(pools);
@@ -492,8 +525,9 @@ class Nodes {
           disk.type === DiskTypes.SSD ? ssdPools.push(disk.size - disk.used) : hddPools.push(disk.size - disk.used);
         },
       );
-    } catch (err) {
-      throw new Error(`Error getting node ${nodeId}: ${err}`);
+    } catch (e) {
+      (e as Error).message = formatErrorMessage(`Error getting node ${nodeId}`, e);
+      throw e;
     }
 
     this.sortArrayDesc(hddPools);
@@ -509,11 +543,11 @@ class Nodes {
       this.fitDisksInDisksPool(rootFileSystemDisks, ssdPools, DiskTypes.SSD);
       return true;
     } catch (error) {
-      throw new Error(
+      throw new GridClientErrors.Nodes.DiskAllocationError(
         `${(error as Error).message}, on Node ${nodeId} with disk pools:
          SSD:  ${ssdPools.map(disk => (disk / 1024 ** 3).toFixed(2).toString() + "GB ")} 
          HDD:  ${hddPools.map(disk => (disk / 1024 ** 3).toFixed(2).toString() + "GB ")}
-    Please select another Node\n`,
+    Please select another Node.\n`,
       );
     }
   }
diff --git a/packages/grid_client/src/storage/backend.ts b/packages/grid_client/src/storage/backend.ts
index 67a1b99c17..44718dfba3 100644
--- a/packages/grid_client/src/storage/backend.ts
+++ b/packages/grid_client/src/storage/backend.ts
@@ -1,3 +1,4 @@
+import { ValidationError } from "@threefold/types";
 import getAppDataPath from "appdata-path";
 import * as PATH from "path";
 
@@ -59,7 +60,7 @@ class BackendStorage {
       const storage = require("./localstorage");
       this.storage = new storage.LocalStorage();
     } else {
-      throw Error("Unsupported type for backend");
+      throw new ValidationError("Unsupported type for backend.");
     }
   }
 
diff --git a/packages/grid_client/src/zos/deployment.ts b/packages/grid_client/src/zos/deployment.ts
index a0f74ca879..8145c11d0d 100644
--- a/packages/grid_client/src/zos/deployment.ts
+++ b/packages/grid_client/src/zos/deployment.ts
@@ -101,7 +101,7 @@ class Deployment {
 
     const keyr = new Keyring({ type: keypairType });
     await waitReady();
-    const key = keyr.addFromMnemonic(mnemonic);
+    const key = keyr.addFromUri(mnemonic);
     const signed_msg = key.sign(message_bytes);
     const hex_signed_msg = this.to_hex(signed_msg);
 
diff --git a/packages/gridproxy_client/.gitignore b/packages/gridproxy_client/.gitignore
new file mode 100644
index 0000000000..094b1084d5
--- /dev/null
+++ b/packages/gridproxy_client/.gitignore
@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# internals
+legacy
diff --git a/packages/gridproxy_client/.npmignore b/packages/gridproxy_client/.npmignore
new file mode 100644
index 0000000000..e8c2a64ede
--- /dev/null
+++ b/packages/gridproxy_client/.npmignore
@@ -0,0 +1,6 @@
+**/.eslintrc.js
+**/.eslintignore
+**/.github/README.md
+coverage
+**/src
+**/tests
diff --git a/packages/gridproxy_client/.npmrc b/packages/gridproxy_client/.npmrc
new file mode 100644
index 0000000000..c42da845b4
--- /dev/null
+++ b/packages/gridproxy_client/.npmrc
@@ -0,0 +1 @@
+engine-strict = true
diff --git a/packages/gridproxy_client/README.md b/packages/gridproxy_client/README.md
new file mode 100644
index 0000000000..c4b1ec46db
--- /dev/null
+++ b/packages/gridproxy_client/README.md
@@ -0,0 +1,22 @@
+# gridproxy_client
+
+This a Typescript client to communicate with GridProxy based on the network.
+
+## Installation
+
+```bash
+yarn install
+```
+
+## Building
+
+```bash
+yarn build
+```
+
+### Supported URLs
+
+- [devnet](https://gridproxy.dev.grid.tf)
+- [qanet](https://gridproxy.qa.grid.tf)
+- [testnet](https://gridproxy.test.grid.tf)
+- [mainnet](https://gridproxy.grid.tf)
diff --git a/packages/gridproxy_client/package.json b/packages/gridproxy_client/package.json
new file mode 100644
index 0000000000..c06283c790
--- /dev/null
+++ b/packages/gridproxy_client/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@threefold/gridproxy_client",
+  "version": "2.1.1",
+  "description": "gridproxy_client help to interact with gridproxy based on network",
+  "main": "dist/public_api.js",
+  "types": "dist/public_api.d.ts",
+  "repository": "git@github.com:MohamedElmdary/gridproxy_client.git",
+  "author": "MohamedElmdary <engm5081@gmail.com>",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^4.8.4"
+  }
+}
diff --git a/packages/gridproxy_client/src/builders/abstract_builder.ts b/packages/gridproxy_client/src/builders/abstract_builder.ts
new file mode 100644
index 0000000000..1c32e312df
--- /dev/null
+++ b/packages/gridproxy_client/src/builders/abstract_builder.ts
@@ -0,0 +1,75 @@
+import { assertPattern, assertString } from "../utils";
+
+export type BuilderMapper<T> = {
+  [K in keyof T]: string;
+};
+
+export type BuilderValidator<T> = {
+  [K in keyof T]: (value: T[K]) => void | never;
+};
+
+export interface BuilderOptions<T> {
+  mapper: BuilderMapper<T>;
+  validator: BuilderValidator<T>;
+  queries: Partial<T>;
+}
+
+export interface Pagination<T> {
+  count: number | null;
+  data: T;
+}
+
+export abstract class AbstractBuilder<T> {
+  public abstract readonly uri: string;
+  private readonly __queries: Partial<T>;
+  private readonly __mapper: BuilderMapper<T>;
+  private readonly __validator: BuilderValidator<T>;
+
+  public constructor(options: BuilderOptions<T>) {
+    this.__mapper = options.mapper;
+    this.__validator = options.validator;
+    this.__queries = options.queries;
+
+    for (const key of Object.keys(this.__mapper)) {
+      Object.defineProperty(this, key, {
+        value(value: any) {
+          this.__queries[key as any] = value;
+          return this;
+        },
+      });
+    }
+  }
+
+  public async build(path: string, timeout = 10000): Promise<Response> {
+    assertString(path);
+    assertPattern(path, /^\//);
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+    try {
+      const out: string[] = [];
+
+      for (const key in this.__queries) {
+        if (this.__queries[key] === undefined || this.__queries[key] === null || this.__queries[key] === "") {
+          continue;
+        }
+
+        this.__validator[key](this.__queries[key]!);
+        out.push(`${this.__mapper[key]}=${this.__queries[key]}`);
+      }
+
+      const query = out.length > 0 ? `?${out.join("&")}` : "";
+      const response = await fetch(`${this.uri}${path}${query}`, {
+        signal: controller.signal,
+      });
+      return response;
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  }
+}
+
+export type BuilderMethods<T, B> = {
+  [K in keyof T]: (value: T[K]) => B;
+};
diff --git a/packages/gridproxy_client/src/builders/contracts.ts b/packages/gridproxy_client/src/builders/contracts.ts
new file mode 100644
index 0000000000..7c04d4958f
--- /dev/null
+++ b/packages/gridproxy_client/src/builders/contracts.ts
@@ -0,0 +1,77 @@
+import { assertBoolean, assertId, assertIn, assertNatural, assertString } from "../utils";
+import { AbstractBuilder, BuilderMapper, BuilderMethods, BuilderValidator } from "./abstract_builder";
+
+export enum ContractType {
+  Node = "node",
+  Name = "name",
+  Rent = "rent",
+}
+
+export enum ContractState {
+  Created = "Created",
+  GracePeriod = "GracePeriod",
+  Deleted = "Deleted",
+}
+
+export interface ContractsQuery {
+  page: number;
+  size: number;
+  retCount: boolean;
+  contractId: number;
+  twinId: number;
+  nodeId: number;
+  name: string;
+  type: ContractType;
+  state: ContractState;
+  deploymentData: string;
+  deploymentHash: string;
+  numberOfPublicIps: number;
+}
+
+const CONTRACTS_MAPPER: BuilderMapper<ContractsQuery> = {
+  page: "page",
+  size: "size",
+  retCount: "ret_count",
+  contractId: "contract_id",
+  twinId: "twin_id",
+  nodeId: "node_id",
+  name: "name",
+  type: "type",
+  state: "state",
+  deploymentData: "deployment_data",
+  deploymentHash: "deployment_hash",
+  numberOfPublicIps: "number_of_public_ips",
+};
+
+const CONTRACTS_VALIDATOR: BuilderValidator<ContractsQuery> = {
+  page: assertNatural,
+  size: assertNatural,
+  retCount: assertBoolean,
+  contractId: assertId,
+  twinId: assertId,
+  nodeId: assertId,
+  name: assertString,
+  type(value) {
+    assertString(value);
+    assertIn(value, [ContractType.Name, ContractType.Node, ContractType.Rent]);
+  },
+  state(value) {
+    assertString(value);
+    assertIn(value, [ContractState.Created, ContractState.GracePeriod, ContractState.Deleted]);
+  },
+  deploymentData: assertString,
+  deploymentHash: assertString,
+  numberOfPublicIps: assertNatural,
+};
+
+export class ContractsBuilder extends AbstractBuilder<ContractsQuery> {
+  constructor(public readonly uri: string, queries: Partial<ContractsQuery> = {}) {
+    super({
+      mapper: CONTRACTS_MAPPER,
+      validator: CONTRACTS_VALIDATOR,
+      queries,
+    });
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ContractsBuilder extends BuilderMethods<ContractsQuery, ContractsBuilder> {}
diff --git a/packages/gridproxy_client/src/builders/farms.ts b/packages/gridproxy_client/src/builders/farms.ts
new file mode 100644
index 0000000000..dc375f95dc
--- /dev/null
+++ b/packages/gridproxy_client/src/builders/farms.ts
@@ -0,0 +1,73 @@
+import { assertBoolean, assertId, assertIn, assertNatural, assertString } from "../utils";
+import { AbstractBuilder, BuilderMapper, BuilderMethods, BuilderValidator } from "./abstract_builder";
+
+export enum CertificationType {
+  Diy = "DIY",
+  Certified = "Certified",
+  NotCertified = "NotCertified",
+}
+
+export interface FarmsQuery {
+  page: number;
+  size: number;
+  retCount: boolean;
+  freeIps: number;
+  totalIps: number;
+  pricingPolicyId: number;
+  version: number;
+  farmId: number;
+  twinId: number;
+  name: string;
+  nameContains: string;
+  certificationType: CertificationType;
+  dedicated: boolean;
+  stellarAddress: string;
+}
+
+const FARMS_MAPPER: BuilderMapper<FarmsQuery> = {
+  page: "page",
+  size: "size",
+  retCount: "ret_count",
+  freeIps: "free_ips",
+  certificationType: "certification_type",
+  version: "version",
+  dedicated: "dedicated",
+  farmId: "farm_id",
+  name: "name",
+  nameContains: "name_contains",
+  pricingPolicyId: "pricing_policy_id",
+  stellarAddress: "stellar_address",
+  totalIps: "total_ips",
+  twinId: "twin_id",
+};
+
+const FARMS_VALIDATOR: BuilderValidator<FarmsQuery> = {
+  page: assertNatural,
+  size: assertNatural,
+  retCount: assertBoolean,
+  freeIps: assertNatural,
+  totalIps: assertNatural,
+  pricingPolicyId: assertId,
+  version: assertNatural,
+  farmId: assertId,
+  twinId: assertId,
+  name: assertString,
+  nameContains: assertString,
+  certificationType(value) {
+    assertIn(value, [CertificationType.Diy, CertificationType.Certified]);
+  },
+  dedicated: assertBoolean,
+  stellarAddress: assertString,
+};
+
+export class FarmsBuilder extends AbstractBuilder<FarmsQuery> {
+  constructor(public uri: string, queries: Partial<FarmsQuery> = {}) {
+    super({
+      mapper: FARMS_MAPPER,
+      validator: FARMS_VALIDATOR,
+      queries,
+    });
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface FarmsBuilder extends BuilderMethods<FarmsQuery, FarmsBuilder> {}
diff --git a/packages/gridproxy_client/src/builders/gateways.ts b/packages/gridproxy_client/src/builders/gateways.ts
new file mode 100644
index 0000000000..0672c70755
--- /dev/null
+++ b/packages/gridproxy_client/src/builders/gateways.ts
@@ -0,0 +1,94 @@
+import { assertBoolean, assertId, assertIn, assertNatural, assertPattern, assertString } from "../utils";
+import { AbstractBuilder, BuilderMapper, BuilderMethods, BuilderValidator } from "./abstract_builder";
+
+export enum NodeStatus {
+  Up = "up",
+  Down = "down",
+  Standby = "standby",
+}
+
+export interface GatewaysQuery {
+  page: number;
+  size: number;
+  retCount: boolean;
+  freeMru: number;
+  freeHru: number;
+  freeSru: number;
+  freeIps: number;
+  status: NodeStatus;
+  city: string;
+  country: string;
+  farmName: string;
+  ipv4: boolean;
+  ipv6: boolean;
+  dedicated: boolean;
+  rentable: boolean;
+  rented: boolean;
+  rentedBy: number;
+  availableFor: number;
+  farmIds: string;
+}
+
+const GATEWAYS_MAPPER: BuilderMapper<GatewaysQuery> = {
+  page: "page",
+  size: "size",
+  retCount: "ret_count",
+  freeMru: "free_mru",
+  freeHru: "free_hru",
+  freeSru: "free_sru",
+  freeIps: "free_ips",
+  status: "status",
+  city: "city",
+  country: "country",
+  farmName: "farm_name",
+  ipv4: "ipv4",
+  ipv6: "ipv6",
+  dedicated: "dedicated",
+  rentable: "rentable",
+  rented: "rented",
+  rentedBy: "rentedBy",
+  availableFor: "available_for",
+  farmIds: "farm_ids",
+};
+
+export const ID_PATTERN = /^\d+$/;
+const GATEWAYS_VALIDATOR: BuilderValidator<GatewaysQuery> = {
+  page: assertNatural,
+  size: assertNatural,
+  retCount: assertBoolean,
+  freeMru: assertNatural,
+  freeHru: assertNatural,
+  freeSru: assertNatural,
+  freeIps: assertNatural,
+  status(value) {
+    assertIn(value, [NodeStatus.Up, NodeStatus.Down]);
+  },
+  city: assertString,
+  country: assertString,
+  farmName: assertString,
+  ipv4: assertBoolean,
+  ipv6: assertBoolean,
+  dedicated: assertBoolean,
+  rentable: assertBoolean,
+  rented: assertBoolean,
+  rentedBy: assertId,
+  availableFor: assertId,
+  farmIds(value) {
+    value.split(",").forEach(id => {
+      assertPattern(id, ID_PATTERN);
+      assertId(+id);
+    });
+  },
+};
+
+export class GatewayBuilder extends AbstractBuilder<GatewaysQuery> {
+  constructor(public uri: string, queries: Partial<GatewaysQuery> = {}) {
+    super({
+      mapper: GATEWAYS_MAPPER,
+      validator: GATEWAYS_VALIDATOR,
+      queries,
+    });
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface GatewayBuilder extends BuilderMethods<GatewaysQuery, GatewayBuilder> {}
diff --git a/packages/gridproxy_client/src/builders/nodes.ts b/packages/gridproxy_client/src/builders/nodes.ts
new file mode 100644
index 0000000000..fc05820dd8
--- /dev/null
+++ b/packages/gridproxy_client/src/builders/nodes.ts
@@ -0,0 +1,136 @@
+import { assertBoolean, assertId, assertIn, assertInt, assertNatural, assertPattern, assertString } from "../utils";
+import { AbstractBuilder, BuilderMapper, BuilderMethods, BuilderValidator } from "./abstract_builder";
+import { ID_PATTERN, NodeStatus } from "./gateways";
+
+export interface NodesQuery {
+  page: number;
+  size: number;
+  retCount: boolean;
+  freeMru: number;
+  freeHru: number;
+  freeSru: number;
+  freeGpu: number;
+  totalMru: number;
+  totalCru: number;
+  totalGpu: number;
+  totalSru: number;
+  totalHru: number;
+  freeIps: number;
+  status: NodeStatus;
+  city: string;
+  country: string;
+  farmName: string;
+  ipv4: boolean;
+  ipv6: boolean;
+  domain: boolean;
+  dedicated: boolean;
+  rentable: boolean;
+  rented: boolean;
+  rentedBy: number;
+  availableFor: number;
+  farmIds: string;
+  nodeId: number;
+  certificationType: "NotCertified" | "Silver" | "Gold";
+  hasGpu: boolean;
+  gpuDeviceId: string;
+  gpuDeviceName: string;
+  gpuVendorId: string;
+  gpuVendorName: string;
+  gpuAvailable: boolean;
+}
+
+const NODES_MAPPER: BuilderMapper<NodesQuery> = {
+  page: "page",
+  size: "size",
+  retCount: "ret_count",
+  freeMru: "free_mru",
+  freeHru: "free_hru",
+  freeSru: "free_sru",
+  freeGpu: "free_gpu",
+  freeIps: "free_ips",
+  status: "status",
+  city: "city",
+  country: "country",
+  farmName: "farm_name",
+  domain: "domain",
+  ipv4: "ipv4",
+  ipv6: "ipv6",
+  dedicated: "dedicated",
+  rentable: "rentable",
+  rented: "rented",
+  rentedBy: "rented_by",
+  availableFor: "available_for",
+  farmIds: "farm_ids",
+  nodeId: "node_id",
+  certificationType: "certification_type",
+  gpuAvailable: "gpu_available",
+  gpuDeviceId: "gpu_device_id",
+  gpuDeviceName: "gpu_device_name",
+  gpuVendorId: "gpu_vendor_id",
+  gpuVendorName: "gpu_vendor_name",
+  hasGpu: "has_gpu",
+  totalCru: "total_cru",
+  totalHru: "total_hru",
+  totalMru: "total_mru",
+  totalSru: "total_sru",
+  totalGpu: "total_gpu",
+};
+
+const NODES_VALIDATOR: BuilderValidator<NodesQuery> = {
+  page: assertNatural,
+  size: assertNatural,
+  retCount: assertBoolean,
+  freeMru: assertNatural,
+  freeHru: assertNatural,
+  freeSru: assertNatural,
+  freeGpu: assertNatural,
+  freeIps: assertNatural,
+  status(value) {
+    assertIn(value, [NodeStatus.Up, NodeStatus.Down, NodeStatus.Standby]);
+  },
+  city: assertString,
+  country: assertString,
+  farmName: assertString,
+  domain: assertBoolean,
+  ipv4: assertBoolean,
+  ipv6: assertBoolean,
+  dedicated: assertBoolean,
+  rentable: assertBoolean,
+  rented: assertBoolean,
+  rentedBy: assertId,
+  availableFor: assertId,
+  farmIds(value) {
+    value.split(",").forEach(id => {
+      assertPattern(id, ID_PATTERN);
+      assertId(+id);
+    });
+  },
+  nodeId: assertId,
+  certificationType(value) {
+    assertIn(value, ["NotCertified", "Silver", "Gold"]);
+  },
+  gpuAvailable: assertBoolean,
+  gpuDeviceId: assertString,
+  gpuDeviceName: assertString,
+  gpuVendorId: assertString,
+  gpuVendorName: assertString,
+  hasGpu: assertBoolean,
+  totalCru: assertInt,
+  totalHru: assertInt,
+  totalMru: assertInt,
+  totalSru: assertInt,
+  totalGpu: assertInt,
+};
+
+export class NodesBuilder extends AbstractBuilder<NodesQuery> {
+  constructor(public uri: string, queries: Partial<NodesQuery> = {}) {
+    super({
+      mapper: NODES_MAPPER,
+      validator: NODES_VALIDATOR,
+      queries,
+    });
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface NodesBuilder extends BuilderMethods<NodesQuery, NodesBuilder> {}
diff --git a/packages/gridproxy_client/src/builders/public_api.ts b/packages/gridproxy_client/src/builders/public_api.ts
new file mode 100644
index 0000000000..8e28b178a8
--- /dev/null
+++ b/packages/gridproxy_client/src/builders/public_api.ts
@@ -0,0 +1,7 @@
+export * from "./abstract_builder";
+export * from "./contracts";
+export * from "./farms";
+export * from "./gateways";
+export * from "./nodes";
+export * from "./stats";
+export * from "./twins";
diff --git a/packages/gridproxy_client/src/builders/stats.ts b/packages/gridproxy_client/src/builders/stats.ts
new file mode 100644
index 0000000000..5394a10b52
--- /dev/null
+++ b/packages/gridproxy_client/src/builders/stats.ts
@@ -0,0 +1,30 @@
+import { assertIn } from "../utils";
+import { AbstractBuilder, BuilderMapper, BuilderMethods, BuilderValidator } from "./abstract_builder";
+import { NodeStatus } from "./gateways";
+
+export interface StatsQuery {
+  status: NodeStatus;
+}
+
+const STATS_MAPPER: BuilderMapper<StatsQuery> = {
+  status: "status",
+};
+
+const STATS_VALIDATOR: BuilderValidator<StatsQuery> = {
+  status(value) {
+    assertIn(value, [NodeStatus.Up, NodeStatus.Down, NodeStatus.Standby]);
+  },
+};
+
+export class StatsBuilder extends AbstractBuilder<StatsQuery> {
+  constructor(public uri: string, queries: Partial<StatsQuery> = {}) {
+    super({
+      mapper: STATS_MAPPER,
+      validator: STATS_VALIDATOR,
+      queries,
+    });
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface StatuBuilder extends BuilderMethods<StatsQuery, StatuBuilder> {}
diff --git a/packages/gridproxy_client/src/builders/twins.ts b/packages/gridproxy_client/src/builders/twins.ts
new file mode 100644
index 0000000000..f81470503d
--- /dev/null
+++ b/packages/gridproxy_client/src/builders/twins.ts
@@ -0,0 +1,39 @@
+import { assertBoolean, assertId, assertNatural } from "../utils";
+import { AbstractBuilder, BuilderMapper, BuilderMethods, BuilderValidator } from "./abstract_builder";
+
+export interface TwinsQuery {
+  page: number;
+  size: number;
+  retCount: boolean;
+  twinId: number;
+  accountId: number;
+}
+
+const TWINS_MAPPER: BuilderMapper<TwinsQuery> = {
+  page: "page",
+  size: "size",
+  retCount: "ret_count",
+  accountId: "account_id",
+  twinId: "twin_id",
+};
+
+const TWINS_VALIDATOR: BuilderValidator<TwinsQuery> = {
+  page: assertNatural,
+  size: assertNatural,
+  retCount: assertBoolean,
+  twinId: assertId,
+  accountId: assertId,
+};
+
+export class TwinsBuilder extends AbstractBuilder<TwinsQuery> {
+  constructor(public uri: string, queries: Partial<TwinsQuery> = {}) {
+    super({
+      mapper: TWINS_MAPPER,
+      validator: TWINS_VALIDATOR,
+      queries,
+    });
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface TwinsBuilder extends BuilderMethods<TwinsQuery, TwinsBuilder> {}
diff --git a/packages/gridproxy_client/src/modules/abstract_client.ts b/packages/gridproxy_client/src/modules/abstract_client.ts
new file mode 100644
index 0000000000..d1b249e420
--- /dev/null
+++ b/packages/gridproxy_client/src/modules/abstract_client.ts
@@ -0,0 +1,18 @@
+export interface AbstractClientOptions {
+  uri: string;
+  Builder: any;
+}
+
+export abstract class AbstractClient<B, Q> {
+  public readonly uri: string;
+  private readonly __Builder: any;
+
+  constructor(options: AbstractClientOptions) {
+    this.uri = options.uri;
+    this.__Builder = options.Builder;
+  }
+
+  public builder(queries: Partial<Q> = {}): B {
+    return new this.__Builder(this.uri, queries);
+  }
+}
diff --git a/packages/gridproxy_client/src/modules/client.ts b/packages/gridproxy_client/src/modules/client.ts
new file mode 100644
index 0000000000..2d14064d8f
--- /dev/null
+++ b/packages/gridproxy_client/src/modules/client.ts
@@ -0,0 +1,47 @@
+import { assertIn } from "../utils";
+import { ContractsClient } from "./contracts";
+import { FarmsClient } from "./farms";
+import { GatewaysClient } from "./gateways";
+import { NodesClient } from "./nodes";
+import { StatsClient } from "./stats";
+import { TwinsClient } from "./twins";
+
+export enum Network {
+  Main = "main",
+  Test = "test",
+  Dev = "dev",
+  Qa = "qa",
+  Custom = "custom",
+}
+
+export default class GridProxyClient {
+  private readonly __uri: string;
+
+  public get uri(): string {
+    return this.__uri;
+  }
+
+  constructor(network: Network, url?: string) {
+    assertIn(network, [Network.Main, Network.Test, Network.Dev, Network.Qa, Network.Custom]);
+
+    if (network === Network.Custom && url) {
+      this.__uri = url;
+    } else {
+      this.__uri = network === Network.Main ? "https://gridproxy.grid.tf" : `https://gridproxy.${network}.grid.tf`;
+    }
+
+    this.contracts = new ContractsClient(this.__uri);
+    this.farms = new FarmsClient(this.__uri);
+    this.gateways = new GatewaysClient(this.__uri);
+    this.twins = new TwinsClient(this.__uri);
+    this.nodes = new NodesClient(this.__uri, this.farms, this.twins);
+    this.stats = new StatsClient(this.__uri);
+  }
+
+  public contracts: ContractsClient;
+  public farms: FarmsClient;
+  public gateways: GatewaysClient;
+  public nodes: NodesClient;
+  public stats: StatsClient;
+  public twins: TwinsClient;
+}
diff --git a/packages/gridproxy_client/src/modules/contracts.ts b/packages/gridproxy_client/src/modules/contracts.ts
new file mode 100644
index 0000000000..ff36b2d7e6
--- /dev/null
+++ b/packages/gridproxy_client/src/modules/contracts.ts
@@ -0,0 +1,48 @@
+import { ContractsBuilder, ContractsQuery, ContractState, ContractType } from "../builders/public_api";
+import { resolvePaginator } from "../utils";
+import { AbstractClient } from "./abstract_client";
+
+export enum Discount {
+  Default = "Default",
+  None = "none",
+  Bronze = "Bronze",
+  Silver = "Silver",
+  Gold = "Gold",
+}
+
+export interface ContractDetails {
+  nodeId: number;
+  deployment_data?: string;
+  deployment_hash?: string;
+  number_of_public_ips?: number;
+}
+
+export interface ContractBilling {
+  amountBilled: number;
+  discountReceived: Discount;
+  timestamp: number;
+}
+
+export interface Contract {
+  contractId: number;
+  twinId: number;
+  state: ContractState;
+  created_at: number;
+  type: ContractType;
+  details: ContractDetails;
+  billing: Array<ContractBilling>;
+}
+
+export class ContractsClient extends AbstractClient<ContractsBuilder, ContractsQuery> {
+  constructor(uri: string) {
+    super({
+      uri,
+      Builder: ContractsBuilder,
+    });
+  }
+
+  public async list(queries: Partial<ContractsQuery> = {}) {
+    const res = await this.builder(queries).build("/contracts");
+    return resolvePaginator<Contract[]>(res);
+  }
+}
diff --git a/packages/gridproxy_client/src/modules/farms.ts b/packages/gridproxy_client/src/modules/farms.ts
new file mode 100644
index 0000000000..fe51c861b3
--- /dev/null
+++ b/packages/gridproxy_client/src/modules/farms.ts
@@ -0,0 +1,53 @@
+import type { Pagination } from "../builders/abstract_builder";
+import { CertificationType, FarmsBuilder, FarmsQuery } from "../builders/public_api";
+import { resolvePaginator } from "../utils";
+import { AbstractClient } from "./abstract_client";
+
+export interface PublicIp {
+  id: string;
+  ip: string;
+  farm_id: string;
+  contract_id: number;
+  gateway: string;
+}
+
+export interface Farm {
+  name: string;
+  farmId: number;
+  twinId: number;
+  pricingPolicyId: number;
+  certificationType: CertificationType;
+  stellarAddress: string;
+  dedicated: boolean;
+  publicIps: PublicIp[];
+}
+
+export class FarmsClient extends AbstractClient<FarmsBuilder, FarmsQuery> {
+  constructor(uri: string) {
+    super({
+      uri,
+      Builder: FarmsBuilder,
+    });
+  }
+
+  public async list(queries: Partial<FarmsQuery> = {}) {
+    const res = await this.builder(queries).build("/farms");
+    return resolvePaginator<Farm[]>(res);
+  }
+
+  public async listAll(queries: Partial<FarmsQuery> = {}) {
+    const { count } = await this.list({
+      ...queries,
+      size: 50,
+      page: 1,
+      retCount: true,
+    });
+    const promises: Promise<Pagination<Farm[]>>[] = [];
+    const pages = Math.ceil(count! / 50);
+    for (let i = 0; i < pages; i++) {
+      promises.push(this.list({ ...queries, size: 50, page: i + 1 }));
+    }
+    const farms = await Promise.all(promises);
+    return farms.map(node => node.data).flat(1);
+  }
+}
diff --git a/packages/gridproxy_client/src/modules/gateways.ts b/packages/gridproxy_client/src/modules/gateways.ts
new file mode 100644
index 0000000000..cf50cd5c3d
--- /dev/null
+++ b/packages/gridproxy_client/src/modules/gateways.ts
@@ -0,0 +1,97 @@
+import { CertificationType, GatewayBuilder, GatewaysQuery, NodeStatus } from "../builders/public_api";
+import { assertId, resolvePaginator } from "../utils";
+import { AbstractClient } from "./abstract_client";
+import type { Farm } from "./farms";
+import type { Twin } from "./twins";
+
+export interface Resources {
+  cru: number;
+  sru: number;
+  hru: number;
+  mru: number;
+}
+export interface Location {
+  country: string;
+  city: string;
+  longitude: number;
+  latitude: number;
+}
+export interface PublicConfig {
+  domain: string;
+  gw4: string;
+  gw6: string;
+  ipv4: string;
+  ipv6: string;
+}
+
+export interface PublicIps {
+  total: number;
+  used: number;
+  free: number;
+}
+
+export interface NodeStats {
+  system: Resources & { ipv4u: number };
+  total: Resources & { ipv4u: number };
+  used: Resources & { ipv4u: number };
+  users: {
+    deployments: number;
+    workloads: number;
+  };
+}
+
+export interface GPUCard {
+  id: string;
+  vendor: string;
+  device: string;
+  contract: number;
+}
+
+export interface GridNode {
+  id: string;
+  nodeId: number;
+  farmId: number;
+  twinId: number;
+  country: string;
+  gridVersion: number;
+  city: string;
+  uptime: number;
+  created: number;
+  farmingPolicyId: number;
+  updatedAt: number;
+  total_resources: Resources;
+  used_resources: Resources;
+  location: Location;
+  publicConfig: PublicConfig;
+  status: NodeStatus;
+  certificationType: CertificationType;
+  dedicated: boolean;
+  rentContractId: number;
+  rentedByTwinId: number;
+  farm: Farm;
+  publicIps: PublicIps;
+  twin: Twin;
+  stats: NodeStats;
+  cards: GPUCard[];
+  num_gpu: number;
+}
+
+export class GatewaysClient extends AbstractClient<GatewayBuilder, GatewaysQuery> {
+  constructor(uri: string) {
+    super({
+      uri,
+      Builder: GatewayBuilder,
+    });
+  }
+
+  public async list(queries: Partial<GatewaysQuery> = {}) {
+    const res = await this.builder(queries).build("/gateways");
+    return resolvePaginator<GridNode[]>(res);
+  }
+
+  public async byId(nodeId: number): Promise<GridNode> {
+    assertId(nodeId);
+    const res = await this.builder({}).build(`/gateways/${nodeId}`);
+    return res.json();
+  }
+}
diff --git a/packages/gridproxy_client/src/modules/nodes.ts b/packages/gridproxy_client/src/modules/nodes.ts
new file mode 100644
index 0000000000..a1b536bc1c
--- /dev/null
+++ b/packages/gridproxy_client/src/modules/nodes.ts
@@ -0,0 +1,167 @@
+import { NodesBuilder, type NodesQuery } from "../builders/nodes";
+import { resolvePaginator } from "../utils";
+import { AbstractClient } from "./abstract_client";
+import type { Farm, FarmsClient } from "./farms";
+import type { GPUCard, GridNode, NodeStats, PublicIps } from "./gateways";
+import type { Twin, TwinsClient } from "./twins";
+
+export interface NodesExtractOptions {
+  loadFarm?: boolean;
+  loadTwin?: boolean;
+  loadStats?: boolean;
+  loadGpu?: boolean;
+}
+
+export class NodesClient extends AbstractClient<NodesBuilder, NodesQuery> {
+  public farms: Map<number, Farm>;
+  public twins: Map<number, Twin>;
+
+  constructor(uri: string, private readonly __farmsClient: FarmsClient, private readonly __twinsClient: TwinsClient) {
+    super({
+      uri,
+      Builder: NodesBuilder,
+    });
+
+    this.farms = new Map<number, Farm>();
+    this.setFarm = this.setFarm.bind(this);
+
+    this.twins = new Map<number, Twin>();
+    this.setTwin = this.setTwin.bind(this);
+  }
+
+  public async list(queries: Partial<NodesQuery> = {}, extraOptions: NodesExtractOptions = {}) {
+    const res = await this.builder(queries).build("/nodes");
+    const nodes = await resolvePaginator<GridNode[]>(res);
+
+    if (extraOptions.loadFarm) {
+      await this.loadFarms(nodes.data.map(n => n.farmId));
+      nodes.data = nodes.data.map(this.setFarm);
+    }
+
+    if (extraOptions.loadTwin) {
+      await this.loadTwins(nodes.data.map(n => n.twinId));
+      nodes.data = nodes.data.map(this.setTwin);
+    }
+
+    if (extraOptions.loadStats) {
+      const nodesStats = await Promise.all(nodes.data.map(n => this.statsById(n.nodeId)));
+      nodes.data = nodes.data.map((n, index) => {
+        n.stats = nodesStats[index];
+        return n;
+      });
+    }
+
+    if (!extraOptions.loadGpu) {
+      nodes.data = nodes.data.map(n => {
+        n.cards = [];
+        return n;
+      });
+    }
+
+    if (extraOptions.loadGpu) {
+      const nodesGpu = await Promise.all(nodes.data.map(n => this.gpuById(n.nodeId)));
+      nodes.data = nodes.data.map((n, index) => {
+        const cards = nodesGpu[index];
+        n.cards = Array.isArray(cards) ? cards : [];
+        return n;
+      });
+    }
+
+    return nodes;
+  }
+
+  public async byId(nodeId: number, extraOptions: NodesExtractOptions = {}): Promise<GridNode> {
+    const res = await this.builder({}).build(`/nodes/${nodeId}`);
+    let node: GridNode = await res.json();
+
+    const capacity = Reflect.get(node, "capacity");
+    if (capacity) {
+      node.total_resources = Reflect.get(capacity, "total_resources");
+      node.used_resources = Reflect.get(capacity, "used_resources");
+    }
+
+    if (extraOptions.loadFarm && node) {
+      await this.loadFarms([node.farmId]);
+      node = this.setFarm(node);
+    }
+
+    if (extraOptions.loadTwin) {
+      await this.loadTwins([node.twinId]);
+      node = this.setTwin(node);
+    }
+
+    if (extraOptions.loadStats) {
+      node.stats = await this.statsById(node.nodeId);
+    }
+
+    node.cards = [];
+
+    if (extraOptions.loadGpu) {
+      const cards = await this.gpuById(node.nodeId);
+      if (Array.isArray(cards)) {
+        node.cards = cards;
+      }
+    }
+
+    return node;
+  }
+
+  public async statsById(nodeId: number): Promise<NodeStats> {
+    const res = await this.builder({}).build(`/nodes/${nodeId}/statistics`);
+    return res.json();
+  }
+
+  public async gpuById(nodeId: number): Promise<GPUCard[] | null | { error: string }> {
+    const res = await this.builder({}).build(`/nodes/${nodeId}/gpu`);
+    return res.json();
+  }
+
+  private async loadFarms(farmIds: number[]): Promise<void> {
+    farmIds = farmIds.filter(id => !this.farms.has(id));
+    const ids = Array.from(new Set(farmIds));
+    if (!ids.length) return;
+    const farms = await Promise.all(ids.map(farmId => this.__farmsClient.list({ farmId })));
+    for (const { data } of farms) {
+      const [farm] = data;
+      this.farms = this.farms.set(farm.farmId, farm);
+    }
+  }
+
+  private setFarm(node: GridNode): GridNode {
+    const farm = this.farms.get(node.farmId);
+    if (farm) {
+      node.farm = farm;
+      node.publicIps = this.getFarmPublicIps(farm);
+    }
+    return node;
+  }
+
+  private getFarmPublicIps(farm: Farm): PublicIps {
+    const total = farm.publicIps.length;
+    const free = farm.publicIps.filter(({ contract_id }) => contract_id === 0).length;
+    return {
+      total,
+      used: total - free,
+      free,
+    };
+  }
+
+  private async loadTwins(twinIds: number[]): Promise<void> {
+    twinIds = twinIds.filter(id => !this.twins.has(id));
+    const ids = Array.from(new Set(twinIds));
+    if (!ids.length) return;
+    const twins = await Promise.all(ids.map(twinId => this.__twinsClient.list({ twinId })));
+    for (const { data } of twins) {
+      const [twin] = data;
+      this.twins = this.twins.set(twin.twinId, twin);
+    }
+  }
+
+  private setTwin(node: GridNode): GridNode {
+    const twin = this.twins.get(node.twinId);
+    if (twin) {
+      node.twin = twin;
+    }
+    return node;
+  }
+}
diff --git a/packages/gridproxy_client/src/modules/public_api.ts b/packages/gridproxy_client/src/modules/public_api.ts
new file mode 100644
index 0000000000..b886b8807c
--- /dev/null
+++ b/packages/gridproxy_client/src/modules/public_api.ts
@@ -0,0 +1,10 @@
+import GridProxyClient from "./client";
+
+export default GridProxyClient;
+export * from "./client";
+export * from "./contracts";
+export * from "./farms";
+export * from "./gateways";
+export * from "./nodes";
+export * from "./stats";
+export * from "./twins";
diff --git a/packages/gridproxy_client/src/modules/stats.ts b/packages/gridproxy_client/src/modules/stats.ts
new file mode 100644
index 0000000000..e8e52a63c9
--- /dev/null
+++ b/packages/gridproxy_client/src/modules/stats.ts
@@ -0,0 +1,34 @@
+import { StatsBuilder, StatsQuery } from "../builders/public_api";
+import { AbstractClient } from "./abstract_client";
+
+export interface Stats {
+  nodes: number;
+  farms: number;
+  countries: number;
+  totalCru: number;
+  totalSru: number;
+  totalMru: number;
+  gpus: number;
+  totalHru: number;
+  publicIps: number;
+  accessNodes: number;
+  gateways: number;
+  twins: number;
+  contracts: number;
+  nodesDistribution: { [key: string]: number };
+  dedicatedNodes: number;
+}
+
+export class StatsClient extends AbstractClient<StatsBuilder, StatsQuery> {
+  constructor(uri: string) {
+    super({
+      uri,
+      Builder: StatsBuilder,
+    });
+  }
+
+  public async get(queries: Partial<StatsQuery> = {}): Promise<Stats> {
+    const res = await this.builder(queries).build("/stats");
+    return res.json();
+  }
+}
diff --git a/packages/gridproxy_client/src/modules/twins.ts b/packages/gridproxy_client/src/modules/twins.ts
new file mode 100644
index 0000000000..0d61c8466d
--- /dev/null
+++ b/packages/gridproxy_client/src/modules/twins.ts
@@ -0,0 +1,24 @@
+import { TwinsBuilder, TwinsQuery } from "../builders/twins";
+import { resolvePaginator } from "../utils";
+import { AbstractClient } from "./abstract_client";
+
+export interface Twin {
+  twinId: number;
+  accountId: string;
+  relay: string;
+  publicKey: string;
+}
+
+export class TwinsClient extends AbstractClient<TwinsBuilder, TwinsQuery> {
+  constructor(uri: string) {
+    super({
+      uri,
+      Builder: TwinsBuilder,
+    });
+  }
+
+  public async list(queries: Partial<TwinsQuery> = {}) {
+    const res = await this.builder(queries).build("/twins");
+    return resolvePaginator<Twin[]>(res);
+  }
+}
diff --git a/packages/gridproxy_client/src/public_api.ts b/packages/gridproxy_client/src/public_api.ts
new file mode 100644
index 0000000000..1fad2dc80c
--- /dev/null
+++ b/packages/gridproxy_client/src/public_api.ts
@@ -0,0 +1,5 @@
+import GridProxyClient from "./modules/public_api";
+
+export default GridProxyClient;
+export * from "./modules/public_api";
+export * from "./builders/public_api";
diff --git a/packages/gridproxy_client/src/utils/assert.ts b/packages/gridproxy_client/src/utils/assert.ts
new file mode 100644
index 0000000000..4761c263ce
--- /dev/null
+++ b/packages/gridproxy_client/src/utils/assert.ts
@@ -0,0 +1,47 @@
+import { isBoolean, isInt, isNumber, isString } from "./guards";
+import { capitalize, min } from "./utils";
+
+export function panic(value: any, expect: string): never {
+  const found = capitalize(typeof value);
+  throw new Error(`Expected argument of type [${expect}] but got [${found}] with value (${value}).`);
+}
+
+export function assertNumber(value: number): void | never {
+  !isNumber(value) && panic(value, "Number");
+}
+
+export function assertInt(value: number): void | never {
+  assertNumber(value);
+  !isInt(value) && panic(value, "Int");
+}
+
+/**
+ * @description
+ *
+ * Natural numbers are positive integers.
+ */
+export function assertNatural(value: number): void | never {
+  assertInt(value);
+  !min(value, 0) && panic(value, "Natural");
+}
+
+export function assertId(id: number) {
+  assertInt(id);
+  !min(id, 1) && panic(id, "ID");
+}
+
+export function assertString(value: string): void | never {
+  !isString(value) && panic(value, "String");
+}
+
+export function assertIn<T>(value: T, domain: T[]) {
+  !domain.includes(value) && panic(value, `domain(${domain.map(v => '"' + v + '"').join(", ")})`);
+}
+
+export function assertBoolean(value: boolean): void | never {
+  !isBoolean(value) && panic(value, "Boolean");
+}
+
+export function assertPattern(value: string, pattern: RegExp): void | never {
+  !pattern.test(value) && panic(value, `${pattern}`);
+}
diff --git a/packages/gridproxy_client/src/utils/guards.ts b/packages/gridproxy_client/src/utils/guards.ts
new file mode 100644
index 0000000000..fe22d1aed0
--- /dev/null
+++ b/packages/gridproxy_client/src/utils/guards.ts
@@ -0,0 +1,16 @@
+export type Int = number;
+export function isInt(value: unknown): value is Int {
+  return isNumber(value) && value === parseInt(value.toString(), 10);
+}
+
+export function isString(value: unknown): value is string {
+  return typeof value === "string";
+}
+
+export function isNumber(value: unknown): value is number {
+  return typeof value === "number";
+}
+
+export function isBoolean(value: unknown): value is boolean {
+  return typeof value === "boolean";
+}
diff --git a/packages/gridproxy_client/src/utils/index.ts b/packages/gridproxy_client/src/utils/index.ts
new file mode 100644
index 0000000000..a2781f4cd6
--- /dev/null
+++ b/packages/gridproxy_client/src/utils/index.ts
@@ -0,0 +1,3 @@
+export * from "./utils";
+export * from "./guards";
+export * from "./assert";
diff --git a/packages/gridproxy_client/src/utils/utils.ts b/packages/gridproxy_client/src/utils/utils.ts
new file mode 100644
index 0000000000..c4753e577c
--- /dev/null
+++ b/packages/gridproxy_client/src/utils/utils.ts
@@ -0,0 +1,17 @@
+import { Pagination } from "public_api";
+
+export function capitalize(value: string) {
+  return value[0].toLocaleUpperCase() + value.slice(1);
+}
+
+export function min(value: number, min: number): boolean {
+  return value >= min;
+}
+
+export async function resolvePaginator<T>(res: Response): Promise<Pagination<T>> {
+  const count = res.headers.get("count");
+  return {
+    count: count ? +count : null,
+    data: await res.json(),
+  };
+}
diff --git a/packages/gridproxy_client/tsconfig.json b/packages/gridproxy_client/tsconfig.json
new file mode 100644
index 0000000000..5e21b28523
--- /dev/null
+++ b/packages/gridproxy_client/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ES2015",
+    "moduleResolution": "node",
+    "baseUrl": "./src",
+    "outDir": "./dist",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noImplicitAny": false,
+    "lib": ["es2019", "DOM"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "tests"]
+}
diff --git a/packages/new_stats/.gitignore b/packages/new_stats/.gitignore
new file mode 100644
index 0000000000..38adffa64e
--- /dev/null
+++ b/packages/new_stats/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/new_stats/Dockerfile b/packages/new_stats/Dockerfile
new file mode 100644
index 0000000000..5aafafc608
--- /dev/null
+++ b/packages/new_stats/Dockerfile
@@ -0,0 +1,12 @@
+FROM node:18 AS build
+
+WORKDIR /app
+
+COPY . /app/
+
+# Install yarn and build project
+RUN yarn install
+RUN yarn lerna run build --no-private && yarn workspace @threefold/newstats build
+
+FROM nginx:1.16.0-alpine
+COPY --from=build /app/packages/new_stats/dist /usr/share/nginx/html
diff --git a/packages/new_stats/README.md b/packages/new_stats/README.md
new file mode 100644
index 0000000000..5fb4a3ce12
--- /dev/null
+++ b/packages/new_stats/README.md
@@ -0,0 +1,45 @@
+# Grid Stats
+
+## Introduction
+
+Grid Stats is a web application created to replace explorer.threefold.io with a simple page showing a capacity map + statistics. In the map, you get to see node distribution with each node location highlighted. While in Statistics section, general details about the nodes are being displayed like online nodes, farms count, total storage used, gateways ...etc.
+Also, you can select one or more networks to get their stats.
+
+## Installation
+
+- **Prerequisite**
+
+  - Nodejs 18^
+
+- **Clone the repository**
+
+  ```bash
+  git clone https://github.com/threefoldtech/tfgrid-sdk-ts.git
+  ```
+
+## Get started
+
+Install the dependencies...
+
+Before running the Grid Stats, in your terminal move to the project directory, then install the required dependencies using
+
+```bash
+cd tfgrid-sdk-ts
+yarn install
+```
+
+You can now run the project in development mode using
+
+```bash
+yarn workspace @threefold/newstats dev
+```
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+yarn workspace @threefold/newstats  build
+```
+
+This will generate the production build in the [dist](./dist/) directory, which can be served using [Caddy](https://caddyserver.com/) or [NGINX](https://www.nginx.com/)
diff --git a/packages/new_stats/chart/.helmignore b/packages/new_stats/chart/.helmignore
new file mode 100644
index 0000000000..0e8a0eb36f
--- /dev/null
+++ b/packages/new_stats/chart/.helmignore
@@ -0,0 +1,23 @@
+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/
diff --git a/packages/new_stats/chart/Chart.yaml b/packages/new_stats/chart/Chart.yaml
new file mode 100644
index 0000000000..f79669f3cc
--- /dev/null
+++ b/packages/new_stats/chart/Chart.yaml
@@ -0,0 +1,24 @@
+apiVersion: v2
+name: tfgrid-newstats
+description: A Helm chart for Kubernetes
+
+# A chart can be either an 'application' or a 'library' chart.
+#
+# Application charts are a collection of templates that can be packaged into versioned archives
+# to be deployed.
+#
+# Library charts provide useful utilities or functions for the chart developer. They're included as
+# a dependency of application charts to inject those utilities and functions into the rendering
+# pipeline. Library charts do not define any templates and therefore cannot be deployed.
+type: application
+
+# This is the chart version. This version number should be incremented each time you make changes
+# to the chart and its templates, including the app version.
+# Versions are expected to follow Semantic Versioning (https://semver.org/)
+version: 1.0.0
+
+# This is the version number of the application being deployed. This version number should be
+# incremented each time you make changes to the application. Versions are not expected to
+# follow Semantic Versioning. They should reflect the version the application is using.
+# It is recommended to use it with quotes.
+appVersion: "v0.0.1"
diff --git a/packages/new_stats/chart/README.md b/packages/new_stats/chart/README.md
new file mode 100644
index 0000000000..a2379c083a
--- /dev/null
+++ b/packages/new_stats/chart/README.md
@@ -0,0 +1,31 @@
+#### Note
+
+* by default we use nginx ingress controller.
+* if you want to use the ingress, you need to install the ingress controller.
+
+#### 1. Deploying the TFGrid Chart and set host domain_name
+
+```bash
+    helm install <helm_name> ./tfgrid-newstats/ --values ./tfgrid-newstats/values.yaml --set ingress.hosts[0].host=<domain_name>
+```
+
+#### 2. Test it, and check the results
+
+```bash
+    curl -X GET http://<domain_name>/
+```
+
+#### 3. Using traefik ingress controller
+
+```yaml
+    # Make sure traefik is installed.
+    # Just replace the annotations with:
+    annotations:
+      kubernetes.io/ingress.class: traefik
+```
+
+#### 4. Deploying with nginx ingress and https
+
+```bash
+    helm install <helm_name> ./tfgrid-newstats/ --values ./tfgrid-newstats/values.yaml --set ingress.hosts[0].host=<domain_name> --set ingress.tls[0].hosts[0]=<domain_name> --set ingress.tls[0].secretName=<secret_name>
+```
diff --git a/packages/new_stats/chart/templates/NOTES.txt b/packages/new_stats/chart/templates/NOTES.txt
new file mode 100644
index 0000000000..cd442546ff
--- /dev/null
+++ b/packages/new_stats/chart/templates/NOTES.txt
@@ -0,0 +1,22 @@
+1. Get the application URL by running these commands:
+{{- if .Values.ingress.enabled }}
+{{- range $host := .Values.ingress.hosts }}
+  {{- range .paths }}
+  http{{ if $.Values.ingress.tls }}s{{ end }}://{{ $host.host }}{{ .path }}
+  {{- end }}
+{{- end }}
+{{- else if contains "NodePort" .Values.service.type }}
+  export NODE_PORT=$(kubectl get --namespace {{ .Release.Namespace }} -o jsonpath="{.spec.ports[0].nodePort}" services {{ include "tfgrid-stats.fullname" . }})
+  export NODE_IP=$(kubectl get nodes --namespace {{ .Release.Namespace }} -o jsonpath="{.items[0].status.addresses[0].address}")
+  echo http://$NODE_IP:$NODE_PORT
+{{- else if contains "LoadBalancer" .Values.service.type }}
+     NOTE: It may take a few minutes for the LoadBalancer IP to be available.
+           You can watch the status of by running 'kubectl get --namespace {{ .Release.Namespace }} svc -w {{ include "tfgrid-stats.fullname" . }}'
+  export SERVICE_IP=$(kubectl get svc --namespace {{ .Release.Namespace }} {{ include "tfgrid-stats.fullname" . }} --template "{{"{{ range (index .status.loadBalancer.ingress 0) }}{{.}}{{ end }}"}}")
+  echo http://$SERVICE_IP:{{ .Values.service.port }}
+{{- else if contains "ClusterIP" .Values.service.type }}
+  export POD_NAME=$(kubectl get pods --namespace {{ .Release.Namespace }} -l "app.kubernetes.io/name={{ include "tfgrid-stats.name" . }},app.kubernetes.io/instance={{ .Release.Name }}" -o jsonpath="{.items[0].metadata.name}")
+  export CONTAINER_PORT=$(kubectl get pod --namespace {{ .Release.Namespace }} $POD_NAME -o jsonpath="{.spec.containers[0].ports[0].containerPort}")
+  echo "Visit http://127.0.0.1:8080 to use your application"
+  kubectl --namespace {{ .Release.Namespace }} port-forward $POD_NAME 8080:$CONTAINER_PORT
+{{- end }}
diff --git a/packages/new_stats/chart/templates/_helpers.tpl b/packages/new_stats/chart/templates/_helpers.tpl
new file mode 100644
index 0000000000..f30dce7d0b
--- /dev/null
+++ b/packages/new_stats/chart/templates/_helpers.tpl
@@ -0,0 +1,62 @@
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "tfgrid-newstats.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "tfgrid-newstats.fullname" -}}
+{{- if .Values.fullnameOverride }}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- if contains $name .Release.Name }}
+{{- .Release.Name | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "tfgrid-newstats.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "tfgrid-newstats.labels" -}}
+helm.sh/chart: {{ include "tfgrid-newstats.chart" . }}
+{{ include "tfgrid-newstats.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "tfgrid-newstats.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "tfgrid-newstats.name" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "tfgrid-newstats.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "tfgrid-newstats.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}
diff --git a/packages/new_stats/chart/templates/deployment.yaml b/packages/new_stats/chart/templates/deployment.yaml
new file mode 100644
index 0000000000..c6b1db7550
--- /dev/null
+++ b/packages/new_stats/chart/templates/deployment.yaml
@@ -0,0 +1,61 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "tfgrid-newstats.fullname" . }}
+  labels:
+    {{- include "tfgrid-newstats.labels" . | nindent 4 }}
+spec:
+  {{- if not .Values.autoscaling.enabled }}
+  replicas: {{ .Values.replicaCount }}
+  {{- end }}
+  selector:
+    matchLabels:
+      {{- include "tfgrid-newstats.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      {{- with .Values.podAnnotations }}
+      annotations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      labels:
+        {{- include "tfgrid-newstats.selectorLabels" . | nindent 8 }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      serviceAccountName: {{ include "tfgrid-newstats.serviceAccountName" . }}
+      securityContext:
+        {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      containers:
+        - name: {{ .Chart.Name }}
+          securityContext:
+            {{- toYaml .Values.securityContext | nindent 12 }}
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          ports:
+            - name: http
+              containerPort: 80
+              protocol: TCP
+          livenessProbe:
+            httpGet:
+              path: /
+              port: http
+          readinessProbe:
+            httpGet:
+              path: /
+              port: http
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
diff --git a/packages/new_stats/chart/templates/hpa.yaml b/packages/new_stats/chart/templates/hpa.yaml
new file mode 100644
index 0000000000..6c2cdad1ac
--- /dev/null
+++ b/packages/new_stats/chart/templates/hpa.yaml
@@ -0,0 +1,28 @@
+{{- if .Values.autoscaling.enabled }}
+apiVersion: autoscaling/v2beta1
+kind: HorizontalPodAutoscaler
+metadata:
+  name: {{ include "tfgrid-newstats.fullname" . }}
+  labels:
+    {{- include "tfgrid-newstats.labels" . | nindent 4 }}
+spec:
+  scaleTargetRef:
+    apiVersion: apps/v1
+    kind: Deployment
+    name: {{ include "tfgrid-newstats.fullname" . }}
+  minReplicas: {{ .Values.autoscaling.minReplicas }}
+  maxReplicas: {{ .Values.autoscaling.maxReplicas }}
+  metrics:
+    {{- if .Values.autoscaling.targetCPUUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: cpu
+        targetAverageUtilization: {{ .Values.autoscaling.targetCPUUtilizationPercentage }}
+    {{- end }}
+    {{- if .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    - type: Resource
+      resource:
+        name: memory
+        targetAverageUtilization: {{ .Values.autoscaling.targetMemoryUtilizationPercentage }}
+    {{- end }}
+{{- end }}
diff --git a/packages/new_stats/chart/templates/ingress.yaml b/packages/new_stats/chart/templates/ingress.yaml
new file mode 100644
index 0000000000..dcc4277c65
--- /dev/null
+++ b/packages/new_stats/chart/templates/ingress.yaml
@@ -0,0 +1,61 @@
+{{- if .Values.ingress.enabled -}}
+{{- $fullName := include "tfgrid-newstats.fullname" . -}}
+{{- $svcPort := .Values.service.port -}}
+{{- if and .Values.ingress.className (not (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion)) }}
+  {{- if not (hasKey .Values.ingress.annotations "kubernetes.io/ingress.class") }}
+  {{- $_ := set .Values.ingress.annotations "kubernetes.io/ingress.class" .Values.ingress.className}}
+  {{- end }}
+{{- end }}
+{{- if semverCompare ">=1.19-0" .Capabilities.KubeVersion.GitVersion -}}
+apiVersion: networking.k8s.io/v1
+{{- else if semverCompare ">=1.14-0" .Capabilities.KubeVersion.GitVersion -}}
+apiVersion: networking.k8s.io/v1beta1
+{{- else -}}
+apiVersion: extensions/v1beta1
+{{- end }}
+kind: Ingress
+metadata:
+  name: {{ $fullName }}
+  labels:
+    {{- include "tfgrid-newstats.labels" . | nindent 4 }}
+  {{- with .Values.ingress.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  {{- if and .Values.ingress.className (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion) }}
+  ingressClassName: {{ .Values.ingress.className }}
+  {{- end }}
+  {{- if .Values.ingress.tls }}
+  tls:
+    {{- range .Values.ingress.tls }}
+    - hosts:
+        {{- range .hosts }}
+        - {{ . | quote }}
+        {{- end }}
+      secretName: {{ .secretName }}
+    {{- end }}
+  {{- end }}
+  rules:
+    {{- range .Values.ingress.hosts }}
+    - host: {{ .host | quote }}
+      http:
+        paths:
+          {{- range .paths }}
+          - path: {{ .path }}
+            {{- if and .pathType (semverCompare ">=1.18-0" $.Capabilities.KubeVersion.GitVersion) }}
+            pathType: {{ .pathType }}
+            {{- end }}
+            backend:
+              {{- if semverCompare ">=1.19-0" $.Capabilities.KubeVersion.GitVersion }}
+              service:
+                name: {{ $fullName }}
+                port:
+                  number: {{ $svcPort }}
+              {{- else }}
+              serviceName: {{ $fullName }}
+              servicePort: {{ $svcPort }}
+              {{- end }}
+          {{- end }}
+    {{- end }}
+{{- end }}
diff --git a/packages/new_stats/chart/templates/service.yaml b/packages/new_stats/chart/templates/service.yaml
new file mode 100644
index 0000000000..c9adcd91ba
--- /dev/null
+++ b/packages/new_stats/chart/templates/service.yaml
@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "tfgrid-newstats.fullname" . }}
+  labels:
+    {{- include "tfgrid-newstats.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: http
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "tfgrid-newstats.selectorLabels" . | nindent 4 }}
diff --git a/packages/new_stats/chart/templates/serviceaccount.yaml b/packages/new_stats/chart/templates/serviceaccount.yaml
new file mode 100644
index 0000000000..ce1054b806
--- /dev/null
+++ b/packages/new_stats/chart/templates/serviceaccount.yaml
@@ -0,0 +1,12 @@
+{{- if .Values.serviceAccount.create -}}
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: {{ include "tfgrid-newstats.serviceAccountName" . }}
+  labels:
+    {{- include "tfgrid-newstats.labels" . | nindent 4 }}
+  {{- with .Values.serviceAccount.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+{{- end }}
diff --git a/packages/new_stats/chart/templates/tests/test-connection.yaml b/packages/new_stats/chart/templates/tests/test-connection.yaml
new file mode 100644
index 0000000000..c43e73eb98
--- /dev/null
+++ b/packages/new_stats/chart/templates/tests/test-connection.yaml
@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Pod
+metadata:
+  name: "{{ include "tfgrid-newstats.fullname" . }}-test-connection"
+  labels:
+    {{- include "tfgrid-newstats.labels" . | nindent 4 }}
+  annotations:
+    "helm.sh/hook": test
+spec:
+  containers:
+    - name: wget
+      image: busybox
+      command: ['wget']
+      args: ['{{ include "tfgrid-newstats.fullname" . }}:{{ .Values.service.port }}']
+  restartPolicy: Never
diff --git a/packages/new_stats/chart/values.yaml b/packages/new_stats/chart/values.yaml
new file mode 100644
index 0000000000..b315c368ff
--- /dev/null
+++ b/packages/new_stats/chart/values.yaml
@@ -0,0 +1,61 @@
+replicaCount: 1
+
+image:
+  repository: ghcr.io/threefoldtech/newstats
+  pullPolicy: Always
+  # Overrides the image tag whose default is the chart appVersion.
+  tag: ""
+
+imagePullSecrets: []
+nameOverride: ""
+fullnameOverride: ""
+
+serviceAccount:
+  # Specifies whether a service account should be created
+  create: true
+  annotations: {}
+  name: ""
+
+podAnnotations: {}
+
+podSecurityContext: {}
+
+securityContext: {}
+
+service:
+  type: ClusterIP
+  port: 80
+
+ingress:
+  enabled: true
+  className: ""
+  annotations:
+    cert-manager.io/cluster-issuer: letsencrypt
+    kubernetes.io/ingress.class: nginx
+    kubernetes.io/tls-acme: "true"
+  hosts:
+    - host: "domain.com"
+      paths:
+        - path: /
+          pathType: ImplementationSpecific
+  tls: []
+
+resources:
+  limits:
+    cpu: 1000m
+    memory: 1024Mi
+  requests:
+    cpu: 900m
+    memory: 1000Mi
+
+autoscaling:
+  enabled: false
+  minReplicas: 1
+  maxReplicas: 100
+  targetCPUUtilizationPercentage: 80
+
+nodeSelector: {}
+
+tolerations: []
+
+affinity: {}
diff --git a/packages/new_stats/index.html b/packages/new_stats/index.html
new file mode 100644
index 0000000000..5ece60d6f7
--- /dev/null
+++ b/packages/new_stats/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.png" />
+    <script defer src="https://cdn.jsdelivr.net/gh/threefoldtech/tf-map@0.0.4/dist/tf-map.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Threefold Capacity</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/new_stats/package.json b/packages/new_stats/package.json
new file mode 100644
index 0000000000..f2bdff213a
--- /dev/null
+++ b/packages/new_stats/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@threefold/newstats",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
+  },
+  "dependencies": {
+    "vue": "^3.3.4",
+    "@threefold/gridproxy_client": "^2.1.1",
+    "vuetify": "^3.3.21"
+  },
+  "devDependencies": {
+    "@tsconfig/node18": "^18.2.2",
+    "@types/jsdom": "^21.1.3",
+    "@types/node": "^18.17.17",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
+    "@vue/test-utils": "^2.4.1",
+    "@vue/tsconfig": "^0.4.0",
+    "jsdom": "^22.1.0",
+    "npm-run-all2": "^6.0.6",
+    "start-server-and-test": "^2.0.0",
+    "typescript": "~5.2.0",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.4",
+    "vue-tsc": "^1.8.11"
+  }
+}
diff --git a/packages/new_stats/public/favicon.png b/packages/new_stats/public/favicon.png
new file mode 100644
index 0000000000..49b8ba965b
Binary files /dev/null and b/packages/new_stats/public/favicon.png differ
diff --git a/packages/new_stats/src/App.vue b/packages/new_stats/src/App.vue
new file mode 100644
index 0000000000..142e2fe750
--- /dev/null
+++ b/packages/new_stats/src/App.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import StatisticsView from "./views/statistics.vue";
+</script>
+
+<template>
+  <main>
+    <v-app full-height>
+      <v-sheet color="title" class="w-100 d-flex align-center justify-center">
+        <v-icon class="mr-1" size="large" icon="mdi-chart-scatter-plot"> </v-icon>
+        <p class="my-2 font-weight-bold text-h6">Statistics</p>
+      </v-sheet>
+      <StatisticsView />
+      <v-footer color="black" class="pa-0 mt-2 d-flex flex-column">
+        <div class="my-auto bg-black text-center w-100">
+          {{ new Date().getFullYear() }} — <strong>ThreeFoldTech</strong>
+        </div>
+      </v-footer>
+    </v-app>
+  </main>
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+}
+</style>
diff --git a/packages/new_stats/src/components/network_filter.vue b/packages/new_stats/src/components/network_filter.vue
new file mode 100644
index 0000000000..a90374b734
--- /dev/null
+++ b/packages/new_stats/src/components/network_filter.vue
@@ -0,0 +1,124 @@
+<template>
+  <v-row class="d-flex pt-4 align-center">
+    <v-col
+      order-xl="last"
+      order-lg="last"
+      cols="12"
+      lg="6"
+      xl="6"
+      class="d-flex justify-lg-end justify-xl-end justify-center pb-2 align-center"
+    >
+      <v-btn
+        flat
+        variant="outlined"
+        :loading="loading"
+        color="secondary"
+        prepend-icon="mdi-reload"
+        @click="emits('refresh')"
+      >
+        <p class="font-weight-bold text-capitalize">Refresh</p>
+      </v-btn>
+    </v-col>
+    <v-col
+      cols="12"
+      lg="6"
+      xl="6"
+      class="d-flex justify-end justify-lg-start justify-xl-start flex-wrap py-0 align-center"
+    >
+      <v-col
+        cla
+        cols="12"
+        lg="3"
+        xl="3"
+        v-for="(network, index) in networks"
+        :key="index"
+        class="py-0 px-1 d-flex text-center justify-center"
+        :style="{ order: network.label === 'Main' ? 1 : 0 }"
+      >
+        <div class="pa-0">
+          <v-switch
+            style="min-width: fit-content"
+            hide-details
+            color="primary"
+            :model-value="network.value"
+            @update:model-value="updateNetworks($event, index)"
+            inset
+            :label="network.label + ' Nodes'"
+          />
+        </div>
+      </v-col>
+    </v-col>
+  </v-row>
+  <v-divider :thickness="1" class="border-opacity-50 mt-4" color="gray"></v-divider>
+
+  <!--warning dialog-->
+  <v-dialog v-model="filterError" width="auto">
+    <v-alert
+      closable
+      text="You should select one network at least"
+      color="#3C351D"
+      class="text-warning"
+      type="warning"
+      @click:close="filterError = false"
+    ></v-alert>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import { Network } from "@threefold/gridproxy_client";
+import { onMounted, ref } from "vue";
+defineProps({
+  loading: Boolean,
+});
+
+const emits = defineEmits<{
+  (events: "update:modelValue", value?: string[]): void;
+  (events: "refresh"): void;
+}>();
+const filterError = ref(false);
+
+const networks = ref([
+  { label: "Dev", value: true },
+  { label: "Main", value: true },
+  { label: "Test", value: true },
+]);
+
+// initial state; all network selected
+const selectedNetworks = ref([Network.Dev, Network.Main, Network.Test]);
+
+onMounted(() => emits("update:modelValue", selectedNetworks.value));
+
+function updateNetworks(event: Event | undefined, index: number) {
+  const network = networks.value[index].label.toLowerCase() as Network;
+  if (event) {
+    if (!selectedNetworks.value.includes(network)) {
+      selectedNetworks.value.push(network);
+    }
+    networks.value[index].value = true;
+  } else {
+    if (selectedNetworks.value.includes(network)) {
+      if (selectedNetworks.value.length <= 1) {
+        filterError.value = true;
+        return;
+      }
+      selectedNetworks.value.forEach((element, index) => {
+        if (network == element) selectedNetworks.value.splice(index, 1);
+      });
+    }
+    networks.value[index].value = false;
+  }
+  emits("update:modelValue", selectedNetworks.value);
+}
+</script>
+<script lang="ts">
+export default {
+  name: "networkFilter",
+};
+</script>
+
+<style>
+.v-overlay__scrim {
+  background: black;
+  opacity: 0.6;
+}
+</style>
diff --git a/packages/new_stats/src/components/statistics_card.vue b/packages/new_stats/src/components/statistics_card.vue
new file mode 100644
index 0000000000..8d2486ecd4
--- /dev/null
+++ b/packages/new_stats/src/components/statistics_card.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="mt-1 text-center py-0 w-100">
+    <v-card color="title">
+      <div class="d-flex align-center justify-center items-center py-2 font-weight-bold">
+        <v-icon class="mr-1" size="large">{{ item.icon }} </v-icon>
+        <span style="font-size: 1rem">
+          {{ item.title }}
+        </span>
+      </div>
+
+      <v-divider class="light border-opacity-75" :thickness="1" />
+
+      <v-card-text class="card-body light py-2" style="font-size: 0.875rem"> {{ item.data }} </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { IStatistics } from "../types/index";
+defineProps<{
+  item: IStatistics;
+}>();
+</script>
+<script lang="ts">
+export default {
+  name: "StatisticsCard",
+};
+</script>
+
+<style>
+.card-body {
+  font-size: 1.1rem !important;
+}
+</style>
diff --git a/packages/new_stats/src/components/stats_table.vue b/packages/new_stats/src/components/stats_table.vue
new file mode 100644
index 0000000000..45d804d81b
--- /dev/null
+++ b/packages/new_stats/src/components/stats_table.vue
@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <!--loading-->
+    <v-sheet color="transparent" height="82vh" v-if="loading" class="d-flex align-center justify-center">
+      <v-container class="text-center d-block">
+        <v-progress-circular size="40" indeterminate />
+        <p class="pt-4 font-weight-bold">Loading Statistics</p>
+      </v-container>
+    </v-sheet>
+
+    <!--error-->
+    <v-sheet color="transparent" height="82vh" v-else-if="failed" class="d-flex align-center w-100 justify-center">
+      <v-container class="text-center">
+        <v-icon color="error" size="x-large">mdi-close-circle-outline</v-icon>
+        <v-container class="text-error">
+          Failed to get stats data, Please check you internet connection or try again later</v-container
+        >
+        <v-btn class="text-capitalize" @click="getStatsData(true)" color="secondary">Try again </v-btn>
+      </v-container>
+    </v-sheet>
+
+    <v-container fluid class="py-0 pt-4 ml-2 d-flex justify-center" v-else>
+      <v-row class="w-100 py-0">
+        <v-col xl="8" lg="8" md="12" cols="12" class="mt-2 pb-0 px-0">
+          <v-col xl="12" lg="12" cols="12" class="mx-auto pb-0">
+            <tf-map r="125" g="227" b="200" :nodes="nodesDistribution" />
+          </v-col>
+        </v-col>
+
+        <v-col v-if="Istats.length !== 0" class="d-flex flex-wrap justify-center pt-6 pb-0 px-0">
+          <v-col
+            v-for="item of Istats"
+            :key="item.title"
+            xl="5"
+            lg="5"
+            md="3"
+            sm="9"
+            xs="9"
+            cols="9"
+            class="text-center pt-1 pb-0"
+          >
+            <StatisticsCard :item="item" />
+          </v-col>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Network } from "@threefold/gridproxy_client";
+import { computed, type Ref, ref, watch } from "vue";
+
+import type { IStatistics, NetworkStats } from "../types/index";
+import { formatData, getStats } from "../utils/stats";
+import toTeraOrGigaOrPeta from "../utils/toTeraOrGegaOrPeta";
+import StatisticsCard from "./statistics_card.vue";
+
+const props = defineProps({
+  networks: {
+    type: Object,
+    require: true,
+  },
+});
+
+const loading = ref(true);
+const failed = ref(false);
+
+const networkStats: Ref<NetworkStats> = ref({
+  dev: undefined,
+  main: undefined,
+  test: undefined,
+});
+
+const formattedStats = computed(() => {
+  return formatData(props.networks as Network[], networkStats.value);
+});
+const nodesDistribution = computed(() => JSON.stringify(formattedStats.value.nodesDistribution));
+const Istats = computed((): IStatistics[] => {
+  {
+    return [
+      { data: formattedStats.value.nodes, title: "Nodes Online", icon: "mdi-laptop" },
+      { data: formattedStats.value.dedicatedNodes, title: "Dedicated Nodes", icon: "mdi-resistor-nodes" },
+      { data: formattedStats.value.farms, title: "Farms", icon: "mdi-tractor" },
+      { data: formattedStats.value.countries, title: "Countries", icon: "mdi-earth" },
+      { data: formattedStats.value.totalCru, title: "CPUs", icon: "mdi-cpu-64-bit" },
+      { data: formattedStats.value.gpus, title: "GPUs", icon: "mdi-memory" },
+      { data: toTeraOrGigaOrPeta(formattedStats.value.totalSru.toString()), title: "SSD Storage", icon: "mdi-nas" },
+      {
+        data: toTeraOrGigaOrPeta(formattedStats.value.totalHru.toString()),
+        title: "HDD Storage",
+        icon: "mdi-harddisk",
+      },
+      { data: toTeraOrGigaOrPeta(formattedStats.value.totalMru.toString()), title: "RAM", icon: "mdi-memory" },
+      { data: formattedStats.value.accessNodes, title: "Access Nodes", icon: "mdi-gate" },
+      { data: formattedStats.value.gateways, title: "Gateways", icon: "mdi-boom-gate-outline" },
+      { data: formattedStats.value.twins, title: "Twins", icon: "mdi-brain" },
+      { data: formattedStats.value.publicIps, title: "Public IPs", icon: "mdi-access-point" },
+      { data: formattedStats.value.contracts, title: "Contracts", icon: "mdi-file-document-edit-outline" },
+    ];
+  }
+});
+async function getStatsData(refresh = false) {
+  props.networks!.forEach(async (network: Network) => {
+    if (!networkStats.value[network] || refresh)
+      try {
+        failed.value = false;
+        loading.value = true;
+        networkStats.value[network] = await getStats(network.toLowerCase() as Network);
+      } catch (error) {
+        failed.value = true;
+      } finally {
+        loading.value = false;
+      }
+  });
+}
+watch(
+  () => props.networks,
+  async () => await getStatsData(),
+  { deep: true },
+);
+
+defineExpose({ loading, getStatsData });
+</script>
+<script lang="ts">
+export default {
+  name: "StatsTable",
+};
+</script>
diff --git a/packages/new_stats/src/main.ts b/packages/new_stats/src/main.ts
new file mode 100644
index 0000000000..bd39520463
--- /dev/null
+++ b/packages/new_stats/src/main.ts
@@ -0,0 +1,12 @@
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
+
+import { createApp } from "vue";
+
+import App from "./App.vue";
+import vuetify from "./plugins/vuetify";
+
+const app = createApp(App);
+
+app.use(vuetify);
+app.mount("#app");
diff --git a/packages/new_stats/src/plugins/vuetify.ts b/packages/new_stats/src/plugins/vuetify.ts
new file mode 100644
index 0000000000..04a22e22b0
--- /dev/null
+++ b/packages/new_stats/src/plugins/vuetify.ts
@@ -0,0 +1,41 @@
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
+
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+
+const vuetify = createVuetify({
+  components: {
+    ...components,
+  },
+  directives,
+  theme: {
+    defaultTheme: "dark",
+    themes: {
+      dark: {
+        dark: true,
+        colors: {
+          primary: "#7de3c8",
+          secondary: "#74DDC3",
+          title: "#1AA18F",
+          info: "#7de3c8",
+          warning: "#FFCC00",
+          link: "#5695ff",
+          anchor: "#ffffff",
+        },
+      },
+      light: {
+        dark: false,
+        colors: {
+          primary: "#1AA18F",
+          info: "#1AA18F",
+          secondary: "#14A1B8",
+          anchor: "#000000",
+        },
+      },
+    },
+  },
+});
+
+export default vuetify;
diff --git a/packages/new_stats/src/types/index.ts b/packages/new_stats/src/types/index.ts
new file mode 100644
index 0000000000..8f0b914cb0
--- /dev/null
+++ b/packages/new_stats/src/types/index.ts
@@ -0,0 +1,10 @@
+import type { Network, Stats } from "@threefold/gridproxy_client";
+
+export interface IStatistics {
+  data: number | string;
+  title: string;
+  icon: string;
+}
+export type NetworkStats = {
+  [network in Network]?: Stats;
+};
diff --git a/packages/new_stats/src/utils/stats.ts b/packages/new_stats/src/utils/stats.ts
new file mode 100644
index 0000000000..154d8e7350
--- /dev/null
+++ b/packages/new_stats/src/utils/stats.ts
@@ -0,0 +1,82 @@
+import GridProxyClient, { Network, NodeStatus, type Stats } from "@threefold/gridproxy_client";
+
+import type { NetworkStats } from "@/types";
+
+function mergeStatsData(stats: Stats[]): Stats {
+  const res = stats[0];
+  for (let i = 1; i < stats.length; i++) {
+    res.accessNodes += stats[i].accessNodes;
+    res.dedicatedNodes += stats[i].dedicatedNodes;
+    res.contracts += stats[i].contracts;
+    res.countries += stats[i].countries;
+    res.farms += stats[i].farms;
+    res.gateways += stats[i].gateways;
+    res.nodes += stats[i].nodes;
+    res.publicIps += stats[i].publicIps;
+    res.totalCru += stats[i].totalCru;
+    res.totalHru += stats[i].totalHru;
+    res.totalMru += stats[i].totalMru;
+    res.totalSru += stats[i].totalSru;
+    res.gpus += stats[i].gpus;
+    res.twins += stats[i].twins;
+    res.nodesDistribution = mergeNodeDistribution([res.nodesDistribution, stats[i].nodesDistribution]);
+  }
+
+  return res;
+}
+
+export async function getStats(network: Network): Promise<Stats> {
+  try {
+    const client = new GridProxyClient(network);
+    const upStats = await client.stats.get({ status: NodeStatus.Up });
+    const standbyStats = await client.stats.get({ status: NodeStatus.Standby });
+    return mergeStatsData([upStats, standbyStats]);
+  } catch (error) {
+    throw new Error(`Failed to retrieve ${network} network statistics: ${error}`);
+  }
+}
+
+function mergeNodeDistribution(stats: Stats["nodesDistribution"][]) {
+  const keys = new Set(stats.map(obj => Object.keys(obj)).flat());
+
+  return Array.from(keys).reduce((res, key) => {
+    res[key] = 0;
+    stats.forEach(country => {
+      res[key] += country[key] ?? 0;
+    });
+    return res;
+  }, {} as { [key: string]: number });
+}
+
+export function formatData(network: Network[] = [Network.Main], totalStat: NetworkStats) {
+  let res: Stats = {
+    nodes: 0,
+    farms: 0,
+    countries: 0,
+    totalCru: 0,
+    totalSru: 0,
+    totalMru: 0,
+    totalHru: 0,
+    gpus: 0,
+    publicIps: 0,
+    accessNodes: 0,
+    gateways: 0,
+    twins: 0,
+    contracts: 0,
+    nodesDistribution: {},
+    dedicatedNodes: 0,
+  };
+  for (let i = 0; i < network.length; i++) {
+    const currentStats = totalStat[network[i]];
+    if (!currentStats) continue;
+    if (Number.isNaN(currentStats.dedicatedNodes)) {
+      currentStats.dedicatedNodes = 0;
+    }
+    if (Number.isNaN(currentStats.gpus)) {
+      currentStats.gpus = 0;
+    }
+    res = mergeStatsData([res, currentStats]);
+  }
+
+  return res;
+}
diff --git a/packages/new_stats/src/utils/toTeraOrGegaOrPeta.ts b/packages/new_stats/src/utils/toTeraOrGegaOrPeta.ts
new file mode 100644
index 0000000000..a03d29f835
--- /dev/null
+++ b/packages/new_stats/src/utils/toTeraOrGegaOrPeta.ts
@@ -0,0 +1,21 @@
+export default function toTeraOrGiga(value?: string) {
+  const giga = 1024 ** 3;
+
+  if (!value) return "0";
+
+  const val = +value;
+  if (val === 0 || isNaN(val)) return "0";
+
+  if (val < giga) return val.toString();
+
+  let gb = val / giga;
+
+  if (gb < 1024) return `${gb.toFixed(2)} GB`;
+
+  gb = gb / 1024;
+
+  if (gb < 1024) return `${gb.toFixed(2)} TB`;
+
+  gb = gb / 1024;
+  return `${gb.toFixed(2)} PB`;
+}
diff --git a/packages/new_stats/src/views/statistics.vue b/packages/new_stats/src/views/statistics.vue
new file mode 100644
index 0000000000..d63fed8f70
--- /dev/null
+++ b/packages/new_stats/src/views/statistics.vue
@@ -0,0 +1,27 @@
+<template>
+  <v-col cols="11" class="mx-auto pt-0">
+    <networkFilter
+      @refresh="statsTableRef.getStatsData(true)"
+      :loading="statsTableRef?.loading"
+      v-model="networks"
+    ></networkFilter>
+    <statsTable :networks="networks" ref="statsTableRef"></statsTable>
+  </v-col>
+</template>
+
+<script lang="ts" setup>
+import { Network } from "@threefold/gridproxy_client";
+import { type Ref, ref } from "vue";
+
+import networkFilter from "../components/network_filter.vue";
+import statsTable from "../components/stats_table.vue";
+
+const statsTableRef = ref();
+const networks = ref() as Ref<Network[]>;
+</script>
+<script lang="ts">
+export default {
+  components: { networkFilter, statsTable },
+  name: "StatisticsView",
+};
+</script>
diff --git a/packages/new_stats/tsconfig.app.json b/packages/new_stats/tsconfig.app.json
new file mode 100644
index 0000000000..3e5b621ef6
--- /dev/null
+++ b/packages/new_stats/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/packages/new_stats/tsconfig.json b/packages/new_stats/tsconfig.json
new file mode 100644
index 0000000000..100cf6a8f2
--- /dev/null
+++ b/packages/new_stats/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ]
+}
diff --git a/packages/new_stats/tsconfig.node.json b/packages/new_stats/tsconfig.node.json
new file mode 100644
index 0000000000..dee96bed47
--- /dev/null
+++ b/packages/new_stats/tsconfig.node.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
diff --git a/packages/new_stats/tsconfig.vitest.json b/packages/new_stats/tsconfig.vitest.json
new file mode 100644
index 0000000000..d080d611e3
--- /dev/null
+++ b/packages/new_stats/tsconfig.vitest.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}
diff --git a/packages/new_stats/vite.config.ts b/packages/new_stats/vite.config.ts
new file mode 100644
index 0000000000..b20d948497
--- /dev/null
+++ b/packages/new_stats/vite.config.ts
@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from "node:url";
+
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});
diff --git a/packages/new_stats/vitest.config.ts b/packages/new_stats/vitest.config.ts
new file mode 100644
index 0000000000..29ff4b9fd8
--- /dev/null
+++ b/packages/new_stats/vitest.config.ts
@@ -0,0 +1,14 @@
+import { fileURLToPath } from "node:url";
+import { mergeConfig, defineConfig, configDefaults } from "vitest/config";
+import viteConfig from "./vite.config";
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: "jsdom",
+      exclude: [...configDefaults.exclude, "e2e/*"],
+      root: fileURLToPath(new URL("./", import.meta.url)),
+    },
+  }),
+);
diff --git a/packages/playground/docs/build.md b/packages/playground/docs/build.md
index ba8421d2e1..2424de7862 100644
--- a/packages/playground/docs/build.md
+++ b/packages/playground/docs/build.md
@@ -2,7 +2,7 @@
 
 ## Run the script
 
-- you can run the script anywhere but make sure the generated config file are placed in [config.js](../config.js)
+- you can run the script anywhere but make sure the generated config file are placed in [config.js](../public/config.js)
 
 ```bash
 cd packages/playground/public
diff --git a/packages/playground/index.html b/packages/playground/index.html
index 8dae9df0d6..15035dcffd 100644
--- a/packages/playground/index.html
+++ b/packages/playground/index.html
@@ -4,23 +4,106 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TF Playground</title>
+    <title>Threefold Dashboard</title>
     <script src="/config.js"></script>
-
+    <script defer src="https://cdn.jsdelivr.net/gh/threefoldtech/tf-map@0.0.4/dist/tf-map.js"></script>
     <script type="text/javascript">
-      window.$crisp = []
-      window.CRISP_WEBSITE_ID = '1a5a5241-91cb-4a41-8323-5ba5ec574da0'
-      ;(function () {
-        d = document
-        s = d.createElement('script')
-        s.src = 'https://client.crisp.chat/l.js'
-        s.async = 1
-        d.getElementsByTagName('head')[0].appendChild(s)
-      })()
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
+      (function () {
+        d = document;
+        s = d.createElement("script");
+        s.src = "https://client.crisp.chat/l.js";
+        s.async = 1;
+        d.getElementsByTagName("head")[0].appendChild(s);
+      })();
     </script>
+    <style>
+      .page-loader {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: #333;
+        z-index: 999;
+      }
+      .loading-text {
+        color: #fff;
+        text-align: center;
+        font-size: 18;
+        font-family: "Roboto", sans-serif;
+      }
+      .lds-ripple {
+        display: inline-block;
+        position: relative;
+        width: 80px;
+        height: 80px;
+      }
+      .lds-ripple div {
+        position: absolute;
+        border: 4px solid #74ddc3;
+        opacity: 1;
+        border-radius: 50%;
+        animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+      }
+      .lds-ripple div:nth-child(2) {
+        animation-delay: -0.5s;
+      }
+      @keyframes lds-ripple {
+        0% {
+          top: 36px;
+          left: 36px;
+          width: 0;
+          height: 0;
+          opacity: 0;
+        }
+        4.9% {
+          top: 36px;
+          left: 36px;
+          width: 0;
+          height: 0;
+          opacity: 0;
+        }
+        5% {
+          top: 36px;
+          left: 36px;
+          width: 0;
+          height: 0;
+          opacity: 1;
+        }
+        100% {
+          top: 0px;
+          left: 0px;
+          width: 72px;
+          height: 72px;
+          opacity: 0;
+        }
+      }
+    </style>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div class="page-loader">
+        <div class="loading-text">
+          <div class="lds-ripple">
+            <div></div>
+            <div></div>
+          </div>
+          <span id="connection-error" style="display: none">Your connection seems to be slow, Please wait...</span>
+        </div>
+      </div>
+    </div>
     <script defer type="module" src="/src/main.ts"></script>
+    <script>
+      setTimeout(() => {
+        if (!window.loaded) {
+          document.getElementById("connection-error").style.display = "block";
+        }
+      }, 30000);
+    </script>
   </body>
 </html>
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 2e26de86da..c7a0fb27ab 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -25,12 +25,16 @@
     "mosha-vue-toastify": "^1.0.23",
     "pinia": "^2.0.32",
     "qrcode": "^1.5.1",
-    "tfgrid-gql": "^1.0.1",
+    "@threefold/graphql_client":"^2.1.1",
     "validator": "^13.9.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vuetify": "^3.1.15",
-    "web-ssh-keygen": "^0.1.2"
+    "web-ssh-keygen": "^0.1.2",
+    "get-ip-range": "^4.0.1",
+    "chart.js": "^4.4.0",
+    "vue-chartjs": "^5.2.0",
+    "moment": "^2.29.4"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.0",
@@ -38,6 +42,7 @@
     "@types/marked": "^5.0.0",
     "@types/node": "^18.14.2",
     "@types/qrcode": "^1.5.0",
+    "@types/chart.js": "^2.9.38",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.2",
diff --git a/packages/playground/public/config.js b/packages/playground/public/config.js
index 4db8d4be40..831970533f 100644
--- a/packages/playground/public/config.js
+++ b/packages/playground/public/config.js
@@ -4,10 +4,11 @@ window.env = {
   GRIDPROXY_URL: "https://gridproxy.dev.grid.tf",
   SUBSTRATE_URL: "wss://tfchain.dev.grid.tf/ws",
   ACTIVATION_SERVICE_URL: "https://activation.dev.grid.tf",
-  RELAY_DOMAIN: "relay.dev.grid.tf",
+  RELAY_DOMAIN: "wss://relay.dev.grid.tf",
   BRIDGE_TFT_ADDRESS: "GDHJP6TF3UXYXTNEZ2P36J5FH7W4BJJQ4AYYAXC66I2Q2AH5B6O6BCFG",
   STELLAR_NETWORK: "test",
   STELLAR_HORIZON_URL: "https://horizon-testnet.stellar.org",
   TFT_ASSET_ISSUER: "GA47YZA3PKFUZMPLQ3B5F2E3CJIB57TGGU7SPCQT2WAEYKN766PWIMB3",
+  MINTING_URL: "",
   TIMEOUT: +"10000",
 };
diff --git a/packages/playground/public/images/404.png b/packages/playground/public/images/404.png
index 11e8e7aa6e..84e1a64535 100644
Binary files a/packages/playground/public/images/404.png and b/packages/playground/public/images/404.png differ
diff --git a/packages/playground/public/images/icons/coin.png b/packages/playground/public/images/icons/coin.png
new file mode 100644
index 0000000000..c2df536eb0
Binary files /dev/null and b/packages/playground/public/images/icons/coin.png differ
diff --git a/packages/playground/public/images/logoTF_dark.png b/packages/playground/public/images/logoTF_dark.png
new file mode 100644
index 0000000000..c01b0a576a
Binary files /dev/null and b/packages/playground/public/images/logoTF_dark.png differ
diff --git a/packages/playground/public/images/logoTF_light.png b/packages/playground/public/images/logoTF_light.png
new file mode 100644
index 0000000000..4be2121e08
Binary files /dev/null and b/packages/playground/public/images/logoTF_light.png differ
diff --git a/packages/playground/scripts/build-env.sh b/packages/playground/scripts/build-env.sh
index 4d5125ee23..00b84ec5c3 100644
--- a/packages/playground/scripts/build-env.sh
+++ b/packages/playground/scripts/build-env.sh
@@ -13,6 +13,7 @@ REQUIRED_ENV_VARS=(
     ACTIVATION_SERVICE_URL
     RELAY_DOMAIN
     BRIDGE_TFT_ADDRESS
+    MINTING_URL
 )
 
 STELLAR_ENV_Vars=(
@@ -25,8 +26,8 @@ case $MODE in
     GRAPHQL_URL='https://graphql.dev.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.dev.grid.tf'
     SUBSTRATE_URL='wss://tfchain.dev.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.dev.grid.tf'
-    RELAY_DOMAIN='relay.dev.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.dev.grid.tf/activation/activate'
+    RELAY_DOMAIN='wss://relay.dev.grid.tf'
     BRIDGE_TFT_ADDRESS=GDHJP6TF3UXYXTNEZ2P36J5FH7W4BJJQ4AYYAXC66I2Q2AH5B6O6BCFG
     STELLAR_NETWORK=test
   ;;
@@ -35,8 +36,8 @@ case $MODE in
     GRAPHQL_URL='https://graphql.qa.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.qa.grid.tf'
     SUBSTRATE_URL='wss://tfchain.qa.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.qa.grid.tf'
-    RELAY_DOMAIN='relay.qa.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.qa.grid.tf/activation/activate'
+    RELAY_DOMAIN='wss://relay.qa.grid.tf'
     BRIDGE_TFT_ADDRESS=GAQH7XXFBRWXT2SBK6AHPOLXDCLXVFAKFSOJIRMRNCDINWKHGI6UYVKM
     STELLAR_NETWORK=test
   ;;
@@ -45,8 +46,8 @@ case $MODE in
     GRAPHQL_URL='https://graphql.test.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.test.grid.tf'
     SUBSTRATE_URL='wss://tfchain.test.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.test.grid.tf'
-    RELAY_DOMAIN='relay.test.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.test.grid.tf/activation/activate'
+    RELAY_DOMAIN='wss://relay.test.grid.tf'
     BRIDGE_TFT_ADDRESS=GA2CWNBUHX7NZ3B5GR4I23FMU7VY5RPA77IUJTIXTTTGKYSKDSV6LUA4
     STELLAR_NETWORK=main
   ;;
@@ -55,10 +56,11 @@ case $MODE in
     GRAPHQL_URL='https://graphql.grid.tf/graphql'
     GRIDPROXY_URL='https://gridproxy.grid.tf'
     SUBSTRATE_URL='wss://tfchain.grid.tf/ws'
-    ACTIVATION_SERVICE_URL='https://activation.grid.tf'
-    RELAY_DOMAIN='relay.grid.tf'
+    ACTIVATION_SERVICE_URL='https://activation.grid.tf/activation/activate'
+    RELAY_DOMAIN='wss://relay.grid.tf'
     BRIDGE_TFT_ADDRESS=GBNOTAYUMXVO5QDYWYO2SOCOYIJ3XFIP65GKOQN7H65ZZSO6BK4SLWSC
     STELLAR_NETWORK=main
+    MINTING_URL="https://alpha.minting.tfchain.grid.tf"
   ;;
 
   "custom")
@@ -106,6 +108,7 @@ window.env = {
   STELLAR_NETWORK: '$STELLAR_NETWORK',
   STELLAR_HORIZON_URL: '$STELLAR_HORIZON_URL',
   TFT_ASSET_ISSUER: '$TFT_ASSET_ISSUER',
+  MINTING_URL: '$MINTING_URL',
   TIMEOUT: +'$TIMEOUT'
 };
 "
@@ -115,4 +118,4 @@ window.env = {
 
 # override the content of the config file & echo the result
 echo $configs > $file
-echo -e "\e[1;32m$configs"
\ No newline at end of file
+echo -e "\e[1;32m$configs"
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index f2a6b3cee3..f517a0eef2 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,189 +1,352 @@
 <template>
   <v-app>
-    <v-navigation-drawer
-      width="280"
-      :permanent="permanent"
-      :model-value="hasActiveProfile && openSidebar"
-      @update:model-value="openSidebar = $event"
-      theme="dark"
-    >
-      <div :style="{ paddingTop: '64px' }">
-        <div
+    <profile-manager-controller>
+      <v-navigation-drawer
+        width="280"
+        :permanent="permanent"
+        :model-value="hasActiveProfile && openSidebar"
+        @update:model-value="openSidebar = $event"
+      >
+        <div :style="{ paddingTop: '64px' }">
+          <div
+            :style="{
+              maxHeight: 'calc(100vh - 64px)',
+              overflowY: 'auto',
+            }"
+          >
+            <v-list>
+              <template v-for="route in routes" :key="route.title">
+                <v-list-group v-if="route.items.length > 1" :value="route.title">
+                  <template v-slot:activator="{ props }">
+                    <v-list-item style="font-weight: 500" v-bind="props" :prepend-icon="route.icon">
+                      <v-list-item-title class="font-weight-bold">
+                        <v-tooltip :text="route.tooltip" :disabled="!route.tooltip">
+                          <template #activator="{ props }">
+                            <span v-bind="props">
+                              {{ route.title }}
+                            </span>
+                          </template>
+                        </v-tooltip>
+                      </v-list-item-title>
+                    </v-list-item>
+                  </template>
+                  <v-list-item
+                    v-for="item in route.items"
+                    :key="item.route"
+                    :value="item.route"
+                    @click="clickHandler(item)"
+                    :color="theme.name.value === AppThemeSelection.light ? 'primary' : 'info'"
+                    :active="$route.path === item.route"
+                  >
+                    <template v-slot:prepend v-if="item.icon">
+                      <v-img
+                        v-if="item.icon.includes('.')"
+                        class="mr-7"
+                        width="24"
+                        :src="baseUrl + 'images/icons/' + item.icon"
+                        :alt="item.title"
+                      />
+                      <v-icon v-else width="26">{{ item.icon }}</v-icon>
+                    </template>
+
+                    <v-list-item-title class="font-weight-bold">
+                      <v-tooltip :text="item.tooltip" :disabled="!item.tooltip">
+                        <template #activator="{ props }">
+                          <span v-bind="props">
+                            {{ item.title }}
+                          </span>
+                        </template>
+                      </v-tooltip>
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list-group>
+                <v-list-item
+                  v-else
+                  v-for="item in route.items"
+                  :key="item.route"
+                  :value="item.route"
+                  @click="clickHandler(item)"
+                  :active="$route.path === item.route"
+                  :color="theme.name.value === AppThemeSelection.light ? 'primary' : 'info'"
+                >
+                  <template v-slot:prepend v-if="item.icon">
+                    <v-img
+                      v-if="item.icon.includes('.')"
+                      class="mr-7"
+                      width="24"
+                      :src="baseUrl + 'images/icons/' + item.icon"
+                      :alt="item.title"
+                    />
+                    <v-icon v-else width="26">{{ item.icon }}</v-icon>
+                  </template>
+
+                  <v-list-item-title class="font-weight-bold">
+                    <v-tooltip :text="item.tooltip" :disabled="!item.tooltip">
+                      <template #activator="{ props }">
+                        <span v-bind="props">
+                          {{ item.title }}
+                        </span>
+                      </template>
+                    </v-tooltip>
+                  </v-list-item-title>
+                </v-list-item>
+              </template>
+            </v-list>
+          </div>
+        </div>
+
+        <template v-if="version">
+          <div class="version">
+            <v-chip color="secondary">
+              {{ version }}
+            </v-chip>
+          </div>
+        </template>
+      </v-navigation-drawer>
+
+      <v-main :style="{ paddingTop: navbarConfig ? '140px' : '70px' }">
+        <v-toolbar class="border position-fixed pr-2" :style="{ zIndex: 1005, top: 0, left: 0, right: 0 }">
+          <v-toolbar-title class="custom-toolbar-title">
+            <v-img
+              :src="`${
+                theme.name.value === AppThemeSelection.light
+                  ? baseUrl + 'images/logoTF_dark.png'
+                  : baseUrl + 'images/logoTF_light.png'
+              }`"
+              width="160px"
+            />
+          </v-toolbar-title>
+
+          <v-spacer>
+            <div class="d-flex align-center justify-start">
+              <TftSwapPrice class="pr-4"></TftSwapPrice>
+              <FundsCard v-if="hasActiveProfile"></FundsCard>
+            </div>
+          </v-spacer>
+          <v-btn class="capitalize" :style="{ pointerEvents: 'none' }" variant="text"> {{ network }}net </v-btn>
+          <v-divider vertical class="mx-2" />
+          <AppTheme />
+          <v-divider vertical class="mx-2" />
+          <ProfileManager v-model="openProfile" />
+        </v-toolbar>
+
+        <v-toolbar
+          v-if="navbarConfig"
+          :color="theme.name.value === AppThemeSelection.dark ? '#121212' : 'background'"
+          class="border position-fixed py-0 d-flex pr-2"
           :style="{
-            maxHeight: 'calc(100vh - 64px)',
-            overflowY: 'auto',
+            zIndex: 1005,
+            top: '65.5px',
+            right: 0,
+            width: openSidebar && hasActiveProfile ? 'calc(100% - 280px)' : '100%',
           }"
+          height="50"
         >
-          <v-list>
-            <template v-for="route in routes" :key="route.title">
-              <v-list-subheader>{{ route.title }}</v-list-subheader>
-              <v-list-item
-                v-for="item in route.items"
-                :key="item.route"
-                :value="item.route"
-                @click="clickHandler(item)"
-                active-color="primary"
-                :active="$route.path === item.route"
-              >
-                <template v-slot:prepend v-if="item.icon">
-                  <v-img
-                    v-if="item.icon.includes('.')"
-                    class="mr-4"
-                    width="26"
-                    :src="baseUrl + 'images/icons/' + item.icon"
-                    :alt="item.title"
-                  />
-                  <v-icon v-else>{{ item.icon }}</v-icon>
+          <v-container>
+            <v-row>
+              <v-breadcrumbs :items="navbarConfig.path" active-color="secondary">
+                <template v-slot:divider>
+                  <v-icon icon="mdi-chevron-right"></v-icon>
                 </template>
-
-                <v-list-item-title>{{ item.title }}</v-list-item-title>
-              </v-list-item>
-            </template>
-          </v-list>
-        </div>
-      </div>
-
-      <template v-if="version">
-        <div class="version">
-          <v-chip color="primary">
-            {{ version }}
-          </v-chip>
-        </div>
-      </template>
-    </v-navigation-drawer>
-
-    <v-main :style="{ paddingTop: '70px' }">
-      <v-toolbar
-        color="rgb(49, 49, 49)"
-        class="position-fixed pr-2"
-        theme="dark"
-        :style="{ zIndex: 1005, top: 0, left: 0, right: 0 }"
-      >
-        <v-toolbar-title>
-          <v-img :src="baseUrl + 'images/logoTF.png'" width="160px" />
-        </v-toolbar-title>
-
-        <v-spacer></v-spacer>
-
-        <v-btn
-          v-for="(link, index) in navbarLinks"
-          :key="index"
-          color="var(--link-color)"
-          variant="text"
-          target="_blank"
-          :href="link.url"
-          :prepend-icon="link.icon && link.label ? link.icon : undefined"
-          :icon="link.icon && !link.label ? link.icon : undefined"
-          :text="link.label"
-        />
-        <v-divider vertical v-if="navbarLinks.length" />
-        <v-btn class="capitalize" :style="{ pointerEvents: 'none' }" variant="text"> {{ network }}net </v-btn>
-        <v-divider vertical class="mx-2" />
-        <AppTheme />
-        <v-divider vertical class="mx-2" />
-        <ProfileManager v-model="openProfile" />
-      </v-toolbar>
-
-      <DeploymentListManager>
-        <v-container fluid :style="{ paddingBottom: '100px' }">
-          <div class="d-flex align-center">
-            <v-btn
-              color="primary"
-              @click="openSidebar = true"
-              icon="mdi-menu"
-              variant="tonal"
-              class="mr-2"
-              :disabled="!hasActiveProfile"
-              v-if="!permanent"
-            />
-            <div :style="{ width: '100%' }" class="mb-4">
-              <DisclaimerToolbar />
+                <template v-slot:item="{ item }">
+                  <router-link :to="item.to" :class="{ 'clickable-item': !item.disabled }">
+                    {{ item.title }}
+                  </router-link>
+                </template>
+              </v-breadcrumbs>
+            </v-row>
+          </v-container>
+        </v-toolbar>
+
+        <DeploymentListManager>
+          <v-container fluid :style="{ paddingBottom: '100px' }">
+            <div class="d-flex align-center">
+              <v-btn
+                color="secondary"
+                @click="openSidebar = true"
+                icon="mdi-menu"
+                variant="tonal"
+                class="mr-2"
+                :disabled="!hasActiveProfile"
+                v-if="!permanent"
+              />
+              <div :style="{ width: '100%' }" class="mb-4">
+                <DisclaimerToolbar />
+              </div>
             </div>
-          </div>
 
-          <div :style="{ position: 'relative' }">
-            <router-view v-slot="{ Component }">
-              <transition name="fade">
-                <div :key="$route.path">
-                  <component :is="Component" v-if="hasActiveProfile"></component>
-                  <ConnectWalletLanding @openProfile="openProfile = true" v-else />
-                </div>
-              </transition>
-            </router-view>
-          </div>
-        </v-container>
-      </DeploymentListManager>
-      <TFNotification v-if="hasActiveProfile" />
-    </v-main>
+            <div :style="{ position: 'relative' }">
+              <router-view v-slot="{ Component }">
+                <transition name="fade">
+                  <div :key="$route.path">
+                    <component :is="Component" v-if="hasActiveProfile && hasGrid"></component>
+                    <ConnectWalletLanding @openProfile="openProfile = true" v-else />
+                  </div>
+                </transition>
+              </router-view>
+            </div>
+          </v-container>
+        </DeploymentListManager>
+        <TFNotification v-if="hasActiveProfile" />
+      </v-main>
+    </profile-manager-controller>
   </v-app>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useTheme } from "vuetify";
 
 import { useProfileManager } from "./stores/profile_manager";
 
 const $route = useRoute();
 const $router = useRouter();
 const profileManager = useProfileManager();
+const gridStore = useGrid();
+const network = process.env.NETWORK || (window as any).env.NETWORK;
 
 const openProfile = ref(true);
 const hasActiveProfile = computed(() => !!profileManager.profile);
+const theme = useTheme();
+const navbarConfig = ref();
 
+const hasGrid = computed(() => !!gridStore.grid);
 watch(
   () => $route.meta,
-  meta => (document.title = "TF Playground" + (meta && "title" in meta ? ` | ${meta.title}` : ``)),
+  meta => {
+    (document.title = "Threefold Dashboard" + (meta && "title" in meta ? ` | ${meta.title}` : ``)),
+      (navbarConfig.value = meta.navbarConfig);
+  },
 );
 
+onMounted(() => {
+  (window as any).loaded = true;
+});
+
 // eslint-disable-next-line no-undef
 const version = process.env.VERSION as any;
 
 const routes: AppRoute[] = [
   {
-    title: "Deployments",
+    title: "Dashboard",
+    icon: "mdi-account-convert-outline",
     items: [
-      { title: "Full Virtual Machine", icon: "vm.png", route: "/" },
-      { title: "Micro Virtual Machine", icon: "vm.png", route: "/vm" },
-      { title: "Kubernetes", icon: "kubernetes.png", route: "/kubernetes" },
-      { title: "CapRover", icon: "caprover.png", route: "/caprover" },
-      { title: "Peertube", icon: "peertube.png", route: "/peertube" },
-      { title: "Funkwhale", icon: "funkwhale.png", route: "/funkwhale" },
-      { title: "Mattermost", icon: "mattermost.png", route: "/mattermost" },
-      { title: "Discourse", icon: "discourse.png", route: "/discourse" },
-      { title: "Taiga", icon: "taiga.png", route: "/taiga" },
-      { title: "Owncloud", icon: "owncloud.png", route: "/owncloud" },
-      { title: "Nextcloud", icon: "nextcloud.png", route: "/nextcloud" },
-      { title: "Presearch", icon: "presearch.png", route: "/presearch" },
-      { title: "Subsquid", icon: "subsquid.png", route: "/subsquid" },
-      { title: "Casperlabs", icon: "casperlabs.png", route: "/casperlabs" },
-      { title: "Algorand", icon: "algorand.png", route: "/algorand" },
-      { title: "Node Pilot", icon: "vm.png", route: "/nodepilot" },
-      { title: "Wordpress", icon: "wordpress.png", route: "/wordpress" },
-      { title: "Umbrel", icon: "umbrel.png", route: "/umbrel" },
-      // { title: "Freeflow", icon: "freeflow.png", route: "/freeflow" },
+      {
+        title: "Twin",
+        icon: "mdi-account-supervisor-outline",
+        route: "/dashboard/twin",
+      },
+      { title: "Bridge", icon: "mdi-swap-horizontal", route: "/dashboard/bridge" },
+      {
+        title: "Transfer",
+        icon: "mdi-account-arrow-right-outline",
+        route: "/dashboard/transfer",
+      },
+      { title: "Farms", icon: "mdi-silo", route: "/dashboard/farms" },
+      {
+        title: "Dedicated Nodes",
+        icon: "mdi-resistor-nodes",
+        route: "/dashboard/dedicated-nodes",
+      },
+      { title: "DAO", icon: "mdi-note-check-outline", route: "/dashboard/dao" },
+      {
+        title: "Contracts",
+        icon: "mdi-file-document-edit",
+        route: "/dashboard/contracts-list",
+      },
     ],
   },
   {
-    title: "My Account",
-    items: [{ title: "Contracts", route: "/contractslist" }],
+    title: "Calculators",
+    icon: "mdi-calculator",
+    items: [
+      {
+        title: "Pricing Calculator",
+        icon: "mdi-currency-usd",
+        route: "/calculator/pricing",
+      },
+      {
+        title: "Simulator",
+        icon: "mdi-chart-line",
+        route: "/calculator/simulator",
+      },
+    ],
   },
   {
-    title: "Help",
-    items: [{ title: "Manual", icon: "mdi-open-in-new", url: "https://manual.grid.tf/" }],
+    title: "Playground",
+    items: [{ title: "Solutions", icon: "mdi-lightbulb-on-outline", route: "/solutions" }],
+  },
+  {
+    icon: "mdi-database-search-outline",
+    title: "Statistics",
+    items: [
+      {
+        title: "Statistics",
+        icon: "mdi-chart-scatter-plot",
+        route: "/stats",
+      },
+    ],
+  },
+  {
+    icon: "mdi-access-point",
+    title: "Nodes",
+    items: [{ title: "Nodes", icon: "mdi-access-point", route: "/nodes" }],
+  },
+  {
+    icon: "mdi-access-point",
+    title: "Farms",
+    items: [{ title: "Farms", icon: "mdi-lan-connect", route: "/farms" }],
   },
-];
-
-const navbarLinks: NavbarLink[] = [
   {
-    label: "Help",
-    url: "https://manual.grid.tf/",
+    icon: "mdi-toolbox-outline",
+    title: "Services",
+    items: [
+      {
+        title: "0-Bootstrap",
+        icon: "mdi-earth",
+        url: "https://bootstrap.grid.tf/",
+        tooltip: "Download Zero-OS Images",
+      },
+      {
+        title: "0-Hub",
+        icon: "mdi-open-in-new",
+        url: "https://hub.grid.tf/",
+        tooltip: "Find or Publish your Flist",
+      },
+      {
+        title: "Minting",
+        icon: "mdi-file-document-edit",
+        route: "/minting",
+        tooltip: "TFGrid Minting Explorer",
+      },
+      {
+        title: "Monitoring",
+        icon: "mdi-equalizer",
+        url: "https://metrics.grid.tf/d/rYdddlPWkfqwf/zos-host-metrics?orgId=2&refresh=30s",
+        tooltip: "Monitor Zero-OS nodes",
+      },
+      {
+        title: "Grid Health",
+        icon: "mdi-grid-large",
+        url: "https://status.grid.tf/status/threefold",
+        tooltip: "Status of Threefold Services",
+      },
+    ],
+  },
+  {
+    title: "Manual",
+    items: [
+      {
+        title: "Manual",
+        icon: "mdi-book-open-page-variant-outline",
+        url: "https://manual.grid.tf/",
+      },
+    ],
   },
 ];
 
 // eslint-disable-next-line no-undef
-const network = process.env.NETWORK || (window as any).env.NETWORK;
-
 const permanent = window.innerWidth > 980;
 const openSidebar = ref(permanent);
 
@@ -196,20 +359,37 @@ function clickHandler({ route, url }: AppRouteItem): void {
     window.open(url, "_blank");
   }
 }
+
+$router.beforeEach((to, from, next) => {
+  if (to.path === "/" && hasActiveProfile) {
+    next({ path: "dashboard/twin" });
+  } else {
+    next();
+  }
+  window.scrollTo(0, 0);
+});
 </script>
 
 <script lang="ts">
+import { AppThemeSelection } from "@/utils/app_theme";
+
 import AppInfo from "./components/app_info.vue";
 import AppTheme from "./components/app_theme.vue";
 import ConnectWalletLanding from "./components/connect_wallet_landing.vue";
 import DeploymentListManager from "./components/deployment_list_manager.vue";
 import DisclaimerToolbar from "./components/disclaimer_toolbar.vue";
+import FundsCard from "./components/funds_card.vue";
+import ProfileManagerController from "./components/profile_manager_controller.vue";
+import TftSwapPrice from "./components/swap_price.vue";
 import TFNotification from "./components/tf_notification.vue";
+import { useGrid } from "./stores";
 import ProfileManager from "./weblets/profile_manager.vue";
 
 interface AppRoute {
   title: string;
   items: AppRouteItem[];
+  icon?: string;
+  tooltip?: string;
 }
 
 interface AppRouteItem {
@@ -217,12 +397,7 @@ interface AppRouteItem {
   route?: string;
   url?: string;
   icon?: string;
-}
-
-interface NavbarLink {
-  label?: string;
-  url: string;
-  icon?: string;
+  tooltip?: string;
 }
 
 export default {
@@ -235,102 +410,9 @@ export default {
     AppTheme,
     ConnectWalletLanding,
     AppInfo,
+    TftSwapPrice,
+    FundsCard,
+    ProfileManagerController,
   },
 };
 </script>
-
-<style lang="scss" global>
-:root {
-  --link-color: #3d7ad4;
-}
-
-.app-link {
-  text-decoration: none;
-  font-weight: bold;
-  color: var(--link-color);
-  cursor: pointer;
-}
-
-.fade-leave-active,
-.fade-enter-active {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  pointer-events: none;
-
-  transition: opacity 1s;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.capitalize {
-  text-transform: capitalize !important;
-}
-
-.v-btn {
-  text-transform: capitalize !important;
-  font-size: 1rem !important;
-}
-
-.version {
-  position: absolute;
-  bottom: 15px;
-  right: 25px;
-}
-.v-tooltip > .v-overlay__content {
-  opacity: 10;
-  color: white;
-  font-weight: 900;
-  background-color: rgb(71, 70, 70);
-}
-
-a {
-  color: #5695ff !important;
-}
-
-.custom-toolbar-title {
-  max-width: 17rem !important;
-}
-.mosha__toast__content-wrapper {
-  margin-bottom: -2px;
-}
-.mosha__toast__slot-wrapper {
-  margin-bottom: -2px;
-}
-.mosha__icon {
-  margin-right: 6px !important;
-  margin-top: 2px;
-}
-
-.mosha__icon__dark__warning {
-  fill: #ffcc00 !important;
-}
-
-.mosha__icon__light__warning {
-  fill: #fb8c00 !important;
-}
-
-.mosha__toast__content.dark__warning {
-  color: #ffcc00;
-}
-
-.mosha__toast__content.light__warning {
-  color: #fb8c00;
-}
-
-.mosha__toast__close-icon.dark__warning::before {
-  color: #ffcc00 !important;
-}
-
-.mosha__toast__close-icon.light__warning::before {
-  color: #fb8c00 !important;
-}
-
-.mosha__toast__content__text {
-  font-size: 14px !important;
-}
-</style>
diff --git a/packages/playground/src/calculator/resource_pricing.vue b/packages/playground/src/calculator/resource_pricing.vue
new file mode 100644
index 0000000000..333862187f
--- /dev/null
+++ b/packages/playground/src/calculator/resource_pricing.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="border px-4 pb-4 rounded position-relative mt-2">
+    <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-calculator</v-icon>
+      <v-card-title class="pa-0">Pricing Calculator</v-card-title>
+    </v-card>
+    <v-card class="pa-3">
+      <v-row class="mt-3 px-3 pl-6">
+        <v-alert type="info" variant="tonal">
+          For more information about Threefold Pricing check <a class="app-link" @click="openManual()">here</a>
+        </v-alert>
+      </v-row>
+      <v-row class="mt-3 px-3">
+        <v-col cols="6">
+          <input-validator
+            :value="CRU"
+            :rules="[
+              validators.required('CPU is required.'),
+              validators.isInt('CPU must be a valid integer.'),
+              validators.min('CPU min is 1 cores.', 1),
+              validators.max('CPU max is 256 cores.', 256),
+            ]"
+            #="{ props }"
+          >
+            <input-tooltip tooltip="The number of virtual cores.">
+              <v-text-field
+                label="CPU (vCores)"
+                suffix="vCores"
+                type="number"
+                v-model.number="CRU"
+                v-bind="props"
+                ref="valid"
+              />
+            </input-tooltip>
+          </input-validator>
+        </v-col>
+        <v-col cols="6">
+          <input-validator
+            :value="MRU"
+            :rules="[
+              validators.required('Memory is required.'),
+              validators.isInt('Memory must be a valid integer.'),
+              validators.max('Maximum allowed memory is 1024 GB.', 1024),
+            ]"
+            #="{ props }"
+          >
+            <input-tooltip tooltip="The amount of RAM (Random Access Memory) in GB.">
+              <v-text-field
+                label="Memory (GB)"
+                type="number"
+                suffix="GB"
+                v-model.number="MRU"
+                v-bind="props"
+                ref="valid"
+              />
+            </input-tooltip>
+          </input-validator>
+        </v-col>
+      </v-row>
+
+      <v-row class="px-3">
+        <v-col cols="6">
+          <input-validator
+            :value="SRU"
+            :rules="[
+              validators.required('SSD Storage size is required.'),
+              validators.isInt('SSD Storage size must be a valid integer.'),
+              validators.max('Maximum allowed ssd storage size is 1000000 GB.', 1000000),
+            ]"
+            #="{ props }"
+          >
+            <input-tooltip tooltip="The SSD capacity storage.">
+              <v-text-field
+                label="Disk SSD"
+                suffix="GB"
+                type="number"
+                v-model.number="SRU"
+                v-bind="props"
+                ref="valid"
+              />
+            </input-tooltip>
+          </input-validator>
+        </v-col>
+        <v-col cols="6">
+          <input-validator
+            :value="HRU"
+            :rules="[
+              validators.required('HDD Storage size is required.'),
+              validators.isInt('HDD Storage size must be a valid integer.'),
+              validators.max('Maximum allowed hdd storage size is 1000000 GB.', 1000000),
+            ]"
+            #="{ props }"
+          >
+            <input-tooltip tooltip="The HDD capacity storage.">
+              <v-text-field
+                label="Disk HDD"
+                suffix="GB"
+                type="number"
+                v-model.number="HRU"
+                v-bind="props"
+                ref="valid"
+              />
+            </input-tooltip>
+          </input-validator>
+        </v-col>
+      </v-row>
+
+      <v-row class="px-3">
+        <v-col cols="12">
+          <input-validator
+            :rules="[validators.min('Balance should be a positive integer.', 1)]"
+            :value="balance"
+            #="{ props }"
+          >
+            <input-tooltip tooltip="The amount of TFT to calculate discount.">
+              <v-text-field
+                label="Balance"
+                :disabled="currentbalance"
+                suffix="TFT"
+                type="number"
+                v-bind="props"
+                v-model.number="balance"
+                ref="valid"
+              />
+            </input-tooltip>
+          </input-validator>
+        </v-col>
+      </v-row>
+      <v-row class="my-0 my-3 px-6">
+        <input-tooltip
+          inline
+          class="px-2"
+          tooltip=" A certified node will receive 25% more reward compared to a non-certified node."
+        >
+          <v-switch color="primary" inset label="Certified Node" v-model="isCertified" hide-details />
+        </input-tooltip>
+        <input-tooltip
+          inline
+          class="px-2"
+          tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet"
+        >
+          <v-switch color="primary" inset label="With a Public IPv4" v-model="ipv4" hide-details />
+        </input-tooltip>
+        <input-tooltip inline class="px-2" tooltip="Use current balance to calculate the discount.">
+          <v-switch color="primary" inset label="Use current balance" v-model="currentbalance" hide-details />
+        </input-tooltip>
+      </v-row>
+      <v-divider />
+
+      <v-row class="pa-3" style="text-color: black">
+        <v-col cols="6" v-for="price in prices" :key="price.price">
+          <v-card
+            class="pa-3 text-center price-box"
+            height="100%"
+            :style="{ color: price.color, background: price.backgroundColor }"
+          >
+            <span class="price">
+              <p v-if="price.label === 'Dedicated Node'">
+                Cost of reserving a
+                <span class="name"
+                  ><b>{{ price.label + " " }}</b></span
+                >
+                of the same specifications
+              </p>
+              <p v-else>
+                Cost of reservation on a
+                <span class="name"
+                  ><b>{{ price.label !== undefined ? price.label + " " : " " }}</b></span
+                >
+              </p>
+              <span class="package">
+                <b>{{ price.packageName != "none" ? capitalize(price.packageName) + " Package: " : "" }}</b></span
+              >
+              <b>${{ price.price }}/month, {{ price.TFTs }} TFT/month. </b>
+            </span>
+            <span> {{ price.info }}</span>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { capitalize, watch } from "vue";
+import { onMounted } from "vue";
+import { ref } from "vue";
+
+import { useProfileManager } from "@/stores/profile_manager";
+import { getGrid } from "@/utils/grid";
+
+import { color } from "../utils/background_color";
+
+const CRU = ref<number>(1);
+const MRU = ref<number>(1);
+const SRU = ref<number>(25);
+const HRU = ref<number>(100);
+const balance = ref<number>(0);
+const TFTPrice = ref<number>(0);
+
+const isCertified = ref<boolean>(false);
+const ipv4 = ref<boolean>(false);
+const currentbalance = ref<boolean>(false);
+
+const valid = ref();
+interface PriceType {
+  label?: string;
+  color: string;
+  price: string;
+  packageName: any;
+  backgroundColor: string;
+  TFTs: any;
+  info: string;
+}
+const prices = ref<PriceType[]>([]);
+
+const grid = ref();
+const profileManager = useProfileManager();
+
+watch([CRU, MRU, SRU, HRU, balance, isCertified, ipv4, currentbalance], async () => {
+  let pkgs: any;
+  if (!valid.value.error) {
+    if (currentbalance.value) {
+      const accountBalance = await grid.value.balance.getMyBalance();
+      balance.value = accountBalance.free;
+      pkgs = await grid.value.calculator.calculateWithMyBalance({
+        cru: CRU.value,
+        mru: MRU.value,
+        hru: HRU.value,
+        sru: SRU.value,
+        ipv4u: ipv4.value,
+        certified: isCertified.value,
+      });
+    } else {
+      if (!balance.value) balance.value = 0;
+      pkgs = await grid.value.calculator.calculate({
+        cru: CRU.value,
+        mru: MRU.value,
+        hru: HRU.value,
+        sru: SRU.value,
+        ipv4u: ipv4.value,
+        certified: isCertified.value,
+        balance: balance.value,
+      });
+    }
+
+    setPriceList(pkgs);
+  }
+});
+
+watch(currentbalance, (newCurrentBalance, oldCurrentBalance) => {
+  if (oldCurrentBalance && !newCurrentBalance) {
+    balance.value = 0;
+  }
+});
+
+async function setPriceList(pkgs: any): Promise<PriceType[]> {
+  TFTPrice.value = await grid.value.calculator.tftPrice();
+  prices.value = [
+    {
+      label: "Dedicated Node",
+      price: `${pkgs.dedicatedPrice}`,
+      color: "black",
+      packageName: pkgs.dedicatedPackage.package,
+      backgroundColor: color(pkgs.dedicatedPackage.package),
+      TFTs: (+pkgs.dedicatedPrice / TFTPrice.value).toFixed(2),
+      info: "A user can reserve an entire node then use it exclusively to deploy solutions",
+    },
+    {
+      label: "Shared Node",
+      price: `${pkgs.sharedPrice}`,
+      color: "black",
+      packageName: pkgs.sharedPackage.package,
+      backgroundColor: color(pkgs.sharedPackage.package),
+      TFTs: (+pkgs.sharedPrice / TFTPrice.value).toFixed(2),
+      info: "Shared Nodes allow several users to host various workloads on a single node",
+    },
+  ];
+  return prices.value;
+}
+
+onMounted(async () => {
+  getGrid(profileManager.profile!)
+    .then(async result => {
+      grid.value = result;
+      const pkgs = await grid.value.calculator.calculate({
+        cru: CRU.value,
+        mru: MRU.value,
+        hru: HRU.value,
+        sru: SRU.value,
+        ipv4u: ipv4.value,
+        certified: isCertified.value,
+        balance: balance.value,
+      });
+      setPriceList(pkgs);
+    })
+    .catch(error => {
+      console.error("Error fetching the grid:", error);
+    });
+});
+
+function openManual() {
+  window.open("https://manual.grid.tf/cloud/cloudunits_pricing.html", "_blank");
+}
+</script>
+
+<style>
+.custom-container {
+  width: 80%;
+}
+.v-label {
+  font-size: 0.875rem;
+}
+</style>
diff --git a/packages/playground/src/clients/index.ts b/packages/playground/src/clients/index.ts
index 271ccb3d7d..6df9c6ec1c 100644
--- a/packages/playground/src/clients/index.ts
+++ b/packages/playground/src/clients/index.ts
@@ -1,9 +1,9 @@
+import TFGridGqlClient, { Networks } from "@threefold/graphql_client";
 import GridProxyClient, { Network } from "@threefold/gridproxy_client";
-import TFGridGqlClient, { Networks } from "tfgrid-gql";
 
 const network = process.env.NETWORK || window.env.NETWORK;
 
-const gqlClient = new TFGridGqlClient(network as Networks);
-const gridProxyClient = new GridProxyClient(network as Network);
+const gqlClient = new TFGridGqlClient(network as Networks, window.env.GRAPHQL_URL);
+const gridProxyClient = new GridProxyClient(network as Network, window.env.GRIDPROXY_URL);
 
 export { gqlClient, gridProxyClient };
diff --git a/packages/playground/src/components/caprover_worker.vue b/packages/playground/src/components/caprover_worker.vue
index 9c646dc570..b4c6755e58 100644
--- a/packages/playground/src/components/caprover_worker.vue
+++ b/packages/playground/src/components/caprover_worker.vue
@@ -19,8 +19,8 @@
 
     <SelectSolutionFlavor
       v-model="$props.modelValue.solution"
-      :minimum="{ cpu: 1, memory: 1024, disk: 50 }"
-      :standard="{ cpu: 2, memory: 1024 * 2, disk: 100 }"
+      :small="{ cpu: 1, memory: 2, disk: 50 }"
+      :medium="{ cpu: 2, memory: 4, disk: 100 }"
       :disabled="loadingFarm"
     />
 
@@ -47,6 +47,7 @@
         }"
         v-model="$props.modelValue.farm"
         v-model:loading="loadingFarm"
+        v-model:search="farmName"
       />
 
       <SelectNode
@@ -77,7 +78,7 @@ const rootFilesystemSize = computed(() =>
 const profileManager = useProfileManager();
 const farmManager = useFarm();
 const loadingFarm = ref(farmManager?.getLoading());
-
+const farmName = ref();
 watch(loadingFarm, (loadingFarm): void => {
   emits("update:loading", loadingFarm!);
 });
diff --git a/packages/playground/src/components/connect_wallet_landing.vue b/packages/playground/src/components/connect_wallet_landing.vue
index 8fe37dc816..7785c9c406 100644
--- a/packages/playground/src/components/connect_wallet_landing.vue
+++ b/packages/playground/src/components/connect_wallet_landing.vue
@@ -1,12 +1,12 @@
 <template>
   <div :style="{ paddingBottom: '250px' }">
     <v-alert type="info" variant="tonal">
-      Please connect to your tfchain wallet <a class="app-link" @click="$emit('openProfile')">here</a>
+      Connect your TFChain Wallet <a class="app-link" @click="$emit('openProfile')">here</a>
     </v-alert>
-    <div>
+    <v-container class="custom-container">
       <h4 class="text-center text-h3 mt-16">A Co-Owned Global Sovereign Internet</h4>
       <v-container class="d-flex justify-center mt-4">
-        <p class="text-center">
+        <p class="text-center w-75">
           ThreeFold is
           <strong
             >a peer-to-peer open-source Internet platform that connects users directly with local Internet
@@ -17,13 +17,11 @@
           <a href="https://threefold.io/" target="_blank" class="app-link">Find More!</a>
         </p>
       </v-container>
-    </div>
 
-    <v-container>
       <div
         :style="{
           backgroundImage: 'url(' + baseUrl + 'images/live-and-operational-background.png)',
-          padding: '100px 0',
+          padding: '50px 0',
           backgroundSize: 'cover',
           backgroundPosition: 'center center',
           minHeight: '850px',
@@ -31,49 +29,46 @@
       >
         <!-- class="d-flex justify-center align-center" -->
         <div class="d-flex justify-center mb-10">
-          <v-card flat class="py-1 px-2 d-inline-block m-auto">
-            <h4 class="text-center text-h3">Live and Operational</h4>
-          </v-card>
+          <h4 class="text-center text-h4">Live and Operational</h4>
         </div>
 
-        <div class="d-flex flex-wrap justify-space-around">
-          <div v-for="s in stats" :key="s.value" class="stats">
-            <v-card>
+        <div class="d-flex flex-wrap justify-center">
+          <div v-for="s in stats" :key="s.value" class="stats px-5 py-10">
+            <v-card class="my-10">
               <v-img
                 cover
-                width="200"
+                width="150"
                 class="mx-auto"
                 :src="baseUrl + 'images/icons/live-and-operational/' + s.image"
               />
               <v-card-text>
-                <p class="text-center font-weight-bold text-h4">{{ s.value }}</p>
-                <p class="text-center text-h6">{{ s.label }}</p>
+                <p class="text-center font-weight-regular text-h4">{{ s.value }}</p>
+                <p class="text-center font-weight-light text-h6">{{ s.label }}</p>
               </v-card-text>
             </v-card>
           </div>
         </div>
 
-        <div class="d-flex justify-center mt-16">
+        <div class="d-flex justify-center mt-5">
           <v-btn color="primary" target="_blank" :href="capacityURL"> Explore ThreeFold Grid Capacity </v-btn>
         </div>
       </div>
-    </v-container>
-
-    <v-container>
-      <h4 class="text-center text-h3 mb-8">The <strong>Layer Zero</strong> for a Decentralized World</h4>
-      <p class="text-center">
-        Anything that runs on Linux can run on ThreeFold – with more security, more sustainably, and in true
-        decentralization. The ThreeFold Grid can support workloads from Blockchain to Web2 to Web3 to IoT and Metaverse
-        and more.
-      </p>
+      <div class="text-center">
+        <h4 class="text-h4 mb-8">The <strong>Layer Zero</strong> for a Decentralized World</h4>
+        <p class="w-75 mx-auto">
+          Anything that runs on Linux can run on ThreeFold – with more security, more sustainably, and in true
+          decentralization. The ThreeFold Grid can support workloads from Blockchain to Web2 to Web3 to IoT and
+          Metaverse and more.
+        </p>
 
-      <div class="d-flex justify-center align-center flex-wrap mt-8">
-        <v-btn class="mr-2" variant="tonal" color="primary" target="_blank" href="https://www.threefold.io/grid/">
-          Learn about the grid
-        </v-btn>
-        <v-btn variant="tonal" color="primary" target="_blank" href="https://www.threefold.io/build/">
-          Use The Grid
-        </v-btn>
+        <div class="d-flex justify-center align-center flex-wrap mt-8">
+          <v-btn class="mr-2" color="primary" target="_blank" href="https://www.threefold.io/grid/">
+            Learn about the grid
+          </v-btn>
+          <v-btn variant="outlined" color="secondary" target="_blank" href="https://www.threefold.io/build/">
+            Use The Grid
+          </v-btn>
+        </div>
       </div>
     </v-container>
   </div>
@@ -125,9 +120,7 @@ export default {
 
 <style>
 .stats {
-  flex-grow: 1;
   min-width: 280px;
   max-width: 300px;
-  padding: 15px 15px 0;
 }
 </style>
diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
index 927cc9519f..0736754e52 100644
--- a/packages/playground/src/components/deployment_data_dialog.vue
+++ b/packages/playground/src/components/deployment_data_dialog.vue
@@ -118,6 +118,7 @@
 import hljs from "highlight.js";
 import { computed, type PropType, ref } from "vue";
 
+import { gridProxyClient } from "@/clients";
 import { getCardName } from "@/utils/helpers";
 
 const props = defineProps({
@@ -190,13 +191,15 @@ async function getGrafanaUrl() {
   isLoading.value = true;
   const grid = await getGrid(profileManager.profile!);
   if (grid) {
-    const grafana = new GrafanaStatistics(grid, props.data);
-    await grafana.getUrl().then(res => {
-      grafanaURL.value = res;
+    const nodeId = await grid.capacity.getNodeIdFromContractId({
+      contractId: contract.value.contractId,
     });
+
+    const node = await gridProxyClient.nodes.byId(nodeId);
+    const grafana = new GrafanaStatistics(node, 2);
+    grafanaURL.value = await grafana.getUrl();
   }
   isLoading.value = false;
-  return grafanaURL.value;
 }
 getGrafanaUrl();
 
@@ -292,9 +295,10 @@ function getTooltipText(contract: any, index: number) {
 
 <script lang="ts">
 import { useProfileManager } from "@/stores/profile_manager";
-import { GrafanaStatistics } from "@/utils/getMetricsUrl";
+import { GrafanaStatistics } from "@/utils/get_metrics_url";
 import { getGrid } from "@/utils/grid";
 
+import type { NodeInfo } from "../../../grid_client/dist/es6";
 import type { Disk } from "../utils/deploy_vm";
 import CopyReadonlyInput from "./copy_readonly_input.vue";
 import { HighlightDark, HighlightLight } from "./highlight_themes";
@@ -308,3 +312,4 @@ export default {
   },
 };
 </script>
+@/utils/get_metrics_url
diff --git a/packages/playground/src/components/deposit_dialog.vue b/packages/playground/src/components/deposit_dialog.vue
new file mode 100644
index 0000000000..f5e679c10d
--- /dev/null
+++ b/packages/playground/src/components/deposit_dialog.vue
@@ -0,0 +1,141 @@
+<template>
+  <v-container>
+    <v-dialog
+      transition="dialog-bottom-transition"
+      max-width="1000"
+      v-model="depositDialog"
+      @update:model-value="closeDialog"
+    >
+      <v-card>
+        <v-toolbar color="primary" dark class="d-flex justify-center bold-text"> Deposit TFT </v-toolbar>
+        <v-card-text>
+          <v-container>
+            <v-row class="py-2 pb-5">
+              <v-col cols="6" class="mx-4">
+                <div class="mb-2">
+                  <p class="mb-3">
+                    Send a
+                    {{ selectedName ? selectedName.charAt(0).toUpperCase() + selectedName.slice(1) : "" }} transaction
+                    with your TFT's to deposit to:
+                  </p>
+                </div>
+                <ul>
+                  <li class="mb-2">
+                    Destination:
+                    <p class="text-subtitle-2">{{ depositWallet }}</p>
+                  </li>
+                  <li>
+                    Memo Text:
+                    <p class="text-subtitle-2">twin_{{ twinId }}</p>
+                  </li>
+                  <div style="position: absolute; bottom: 10rem">
+                    <p :style="{ paddingBottom: '3rem', color: '#7de3c8' }">Waiting for receiving TFTs{{ dots }}</p>
+                  </div>
+                </ul>
+              </v-col>
+              <v-divider class="mx-4" vertical></v-divider>
+              <v-col>
+                <div class="d-flex flex-column text-center align-center">
+                  <b> OR </b>
+                  <p class="mb-3">Use ThreeFold Connect to scan this QRcode:</p>
+                  <div class="d-flex justify-center py-2">
+                    <QrcodeGenerator :data="qrCodeText" />
+                  </div>
+                </div>
+              </v-col>
+              <v-divider class="my-4" horizontal></v-divider>
+            </v-row>
+            <v-alert type="warning" variant="tonal" class="d-flex row justify-start">
+              <p :style="{ maxWidth: '880px' }">
+                Amount: should be larger than {{ depositFee }}TFT (deposit fee is: {{ depositFee }}TFT)
+              </p>
+            </v-alert>
+          </v-container>
+          <v-card-actions class="justify-end">
+            <v-btn variant="outlined" color="anchor" class="mr-2 text-subtitle-2" @click="closeDialog"> Close </v-btn>
+          </v-card-actions>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { Decimal } from "decimal.js";
+import { onBeforeUnmount, onMounted, ref } from "vue";
+
+import { useProfileManagerController } from "../components/profile_manager_controller.vue";
+import QrcodeGenerator from "../components/qrcode_generator.vue";
+import { useProfileManager } from "../stores";
+import { createCustomToast, ToastType } from "../utils/custom_toast";
+import { getGrid } from "../utils/grid";
+
+const depositDialog = ref(false);
+const emits = defineEmits(["close"]);
+const profileManager = useProfileManager();
+let destroyed = false;
+const loading = ref(false);
+const dots = ref(".");
+const interval = ref<number | null>(null);
+const ProfileManagerController = useProfileManagerController();
+
+const props = defineProps({
+  selectedName: String,
+  depositWallet: String,
+  qrCodeText: String,
+  depositFee: Number,
+  openDepositDialog: Boolean,
+  twinId: Number,
+});
+
+function loadingDots() {
+  if (dots.value === "...") {
+    dots.value = ".";
+  } else {
+    dots.value += ".";
+  }
+}
+
+onMounted(async () => {
+  if (!props.openDepositDialog) return;
+  if (interval.value !== null) {
+    window.clearInterval(interval.value);
+  }
+  depositDialog.value = true;
+  interval.value = window.setInterval(loadingDots, 500);
+  try {
+    loading.value = true;
+    const grid = await getGrid(profileManager.profile!);
+    const address = profileManager.profile?.address as string;
+    const receivedDeposit = await grid!.bridge.listenToMintCompleted({ address: address });
+    loading.value = false;
+    if (destroyed) return;
+    const DecimalDeposit = new Decimal(receivedDeposit);
+    const divisor = new Decimal(10000000);
+    createCustomToast(`You have received ${DecimalDeposit.dividedBy(divisor)} TFT`, ToastType.success);
+    await ProfileManagerController.reloadBalance();
+    closeDialog();
+  } catch (e) {
+    if (destroyed) return;
+    console.log(e);
+    createCustomToast(e as string, ToastType.danger);
+    closeDialog();
+  }
+});
+
+const closeDialog = () => {
+  depositDialog.value = false;
+  emits("close");
+};
+
+onBeforeUnmount(() => {
+  destroyed = true;
+});
+</script>
+
+<style>
+.bold-text {
+  font-weight: 500;
+  padding-left: 1rem;
+}
+</style>
diff --git a/packages/playground/src/components/disclaimer_toolbar.vue b/packages/playground/src/components/disclaimer_toolbar.vue
index 3969b8d09f..c3babcf1dc 100644
--- a/packages/playground/src/components/disclaimer_toolbar.vue
+++ b/packages/playground/src/components/disclaimer_toolbar.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-card-title class="font-weight-bold">Disclaimer</v-card-title>
-    <v-card-text v-if="network !== 'main' && nw !== 'main'">
+    <v-card-text class="px-4" v-if="network !== 'main' && nw !== 'main'">
       This is {{ nw }} environment. We're still ironing out the kinks. If there are any issues, please let us know
       <a class="app-link" href="https://github.com/threefoldtech/test_feedback/issues" target="_blank">here.</a>
     </v-card-text>
diff --git a/packages/playground/src/components/dynamic_tabs.vue b/packages/playground/src/components/dynamic_tabs.vue
index bf5a1a818b..186a8f8e0f 100644
--- a/packages/playground/src/components/dynamic_tabs.vue
+++ b/packages/playground/src/components/dynamic_tabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tabs v-show="!hideTabs" v-model="activeTab" align-tabs="center" color="primary" class="mb-6">
+  <v-tabs v-show="!hideTabs" v-model="activeTab" align-tabs="center" color="secondary" class="mb-6">
     <v-tab v-for="tab in tabs" :key="tab.value" :disabled="disabled">
       <v-icon :icon="tab.icon" class="mr-2" v-if="tab.icon" />
       <img
diff --git a/packages/playground/src/components/farm_dialog.vue b/packages/playground/src/components/farm_dialog.vue
new file mode 100644
index 0000000000..1377146cee
--- /dev/null
+++ b/packages/playground/src/components/farm_dialog.vue
@@ -0,0 +1,88 @@
+<template>
+  <v-dialog v-model="dialog" hide-overlay transition="dialog-bottom-transition">
+    <v-container>
+      <v-toolbar :height="35">
+        <div class="d-flex justify-center">
+          <v-btn icon dark @click="() => $emit('close-dialog', false)">
+            <v-icon size="20s">mdi-close</v-icon>
+          </v-btn>
+        </div>
+      </v-toolbar>
+
+      <template v-if="loading">
+        <div color="transparent" class="text-center">
+          <v-progress-circular color="primary" indeterminate :size="50" :width="5" />
+          <p>Loading farm details...</p>
+        </div>
+      </template>
+
+      <template v-else>
+        <v-card>
+          <v-col>
+            <farm-details-card :farm="farm" />
+          </v-col>
+          <v-col>
+            <twin-details-card :farm="farm" />
+          </v-col>
+        </v-card>
+      </template>
+    </v-container>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import type { Farm } from "@threefold/gridproxy_client";
+import type { PropType } from "vue";
+import { ref, watch } from "vue";
+
+import FarmDetailsCard from "./node_details_cards/farm_details_card.vue";
+import TwinDetailsCard from "./node_details_cards/twin_details_card.vue";
+
+export default {
+  props: {
+    openDialog: {
+      type: Boolean,
+      required: true,
+    },
+    farm: {
+      type: Object as PropType<Farm>,
+      required: true,
+    },
+  },
+  components: {
+    FarmDetailsCard,
+    TwinDetailsCard,
+  },
+  setup(props, { emit }) {
+    const loading = ref(false);
+    const dialog = ref(props.openDialog);
+
+    function closeDialog(newValue: boolean) {
+      emit("close-dialog", newValue);
+    }
+
+    watch(
+      () => props.openDialog,
+      newValue => {
+        dialog.value = newValue as boolean;
+      },
+    );
+
+    return {
+      dialog,
+      loading,
+      closeDialog,
+    };
+  },
+};
+</script>
+
+<style>
+.v-list-item__prepend > .v-icon,
+.v-list-item__append > .v-icon {
+  opacity: 1 !important;
+}
+.v-toolbar__content {
+  justify-content: end !important;
+}
+</style>
diff --git a/packages/playground/src/components/farm_gateway_manager.vue b/packages/playground/src/components/farm_gateway_manager.vue
index 73ae429461..2d16ff2036 100644
--- a/packages/playground/src/components/farm_gateway_manager.vue
+++ b/packages/playground/src/components/farm_gateway_manager.vue
@@ -4,12 +4,12 @@
 <script lang="ts" setup>
 import { provide, type Ref, ref } from "vue";
 
-import type { Farm } from "@/types";
+import type { FarmInterface } from "@/types";
 
-const FarmGateway = ref() as Ref<Farm | undefined>;
+const FarmGateway = ref() as Ref<FarmInterface | undefined>;
 const Loading = ref(false);
 provide("farm:gateway:manager", {
-  register(farmData: Farm) {
+  register(farmData: FarmInterface) {
     FarmGateway.value = farmData;
   },
   setLoading(loading: boolean) {
@@ -29,11 +29,11 @@ provide("farm:gateway:manager", {
 <script lang="ts">
 import { inject } from "vue";
 export interface FarmGatewayManager {
-  register(farmData: Farm | undefined): void;
+  register(farmData: FarmInterface | undefined): void;
   unregister(): void;
   setLoading(loading: boolean): void;
   getLoading(): boolean;
-  load(): Farm;
+  load(): FarmInterface;
 }
 
 export function useFarmGatewayManager(): FarmGatewayManager | null {
diff --git a/packages/playground/src/components/filter.vue b/packages/playground/src/components/filter.vue
new file mode 100644
index 0000000000..57bc6ac51f
--- /dev/null
+++ b/packages/playground/src/components/filter.vue
@@ -0,0 +1,118 @@
+<template>
+  <form-validator valid-on-init ref="formRef" @update:model-value="$emit('update:valid', $event)">
+    <v-expansion-panels
+      v-model="panel"
+      class="mb-3"
+      @update:model-value="
+        e => {
+          if (typeof e === 'number') {
+            formRef.validate();
+          }
+        }
+      "
+    >
+      <v-expansion-panel>
+        <v-expansion-panel-title>
+          <template v-slot:default="{}">
+            <v-row no-gutters>
+              <v-col cols="4" class="d-flex justify-start text-subtitle-1"> Filters</v-col>
+            </v-row>
+          </template>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <v-row justify="center" justify-md="start" no-gutters>
+            <v-col
+              cols="12"
+              sm="4"
+              md="2"
+              class="d-flex justify-end align-center ml-2 mr-2 mb-2"
+              v-for="key in Object.keys($props.modelValue)"
+              :key="key"
+            >
+              <input-validator
+                v-if="$props.modelValue[key].label"
+                #="{ props }"
+                :rules="$props.modelValue[key].rules?.[0] ?? []"
+                :async-rules="$props.modelValue[key].rules?.[1] ?? []"
+                :value="$props.modelValue[key].value"
+              >
+                <v-text-field
+                  :disabled="formDisabled"
+                  v-bind="props"
+                  v-model="$props.modelValue[key].value"
+                  :label="$props.modelValue[key].label"
+                  :placeholder="$props.modelValue[key].placeholder"
+                  :type="$props.modelValue[key].type"
+                ></v-text-field>
+              </input-validator>
+            </v-col>
+            <v-col cols="12" sm="4" md="2" class="d-flex justify-start align-center mb-6 ml-4">
+              <v-btn
+                :disabled="!isFiltersTouched || formDisabled"
+                @click="resetFilters"
+                variant="outlined"
+                color="primary"
+                >Reset Filters</v-btn
+              >
+            </v-col>
+          </v-row>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </form-validator>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, type PropType, ref, watch } from "vue";
+
+import { useFormRef } from "../hooks/form_validator";
+import type { InputFilterType } from "../types";
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<{ [key: string]: InputFilterType }>,
+    required: true,
+  },
+  formDisabled: Boolean,
+  valid: Boolean,
+});
+
+const emit = defineEmits(["update:model-value", "update:valid"]);
+
+const formRef = useFormRef();
+const panel = ref([0]);
+const isFiltersTouched = ref<boolean>(false);
+
+watch(
+  () => props.modelValue,
+  (newValue: PropType<{ [key: string]: InputFilterType }>) => {
+    const hasNonEmptyValue = Object.keys(newValue).some(obj => {
+      return Reflect.get(newValue, obj).value && Reflect.get(newValue, obj).value.length >= 1;
+    });
+
+    isFiltersTouched.value = hasNonEmptyValue;
+  },
+  { deep: true },
+);
+
+const resetFilters = () => {
+  emit(
+    "update:model-value",
+    Object.keys(props.modelValue).reduce((res, key) => {
+      res[key] = { ...props.modelValue[key], value: undefined };
+      return res;
+    }, {} as any),
+  );
+};
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  name: "Filters",
+});
+</script>
+<style scoped>
+.v-expansion-panel-title {
+  padding: 6px 24px;
+}
+</style>
diff --git a/packages/playground/src/components/form_validator.vue b/packages/playground/src/components/form_validator.vue
index 8df4cbaa40..82530fef5e 100644
--- a/packages/playground/src/components/form_validator.vue
+++ b/packages/playground/src/components/form_validator.vue
@@ -10,13 +10,23 @@ import type { InputValidatorService } from "@/hooks/input_validator";
 
 export default {
   name: "FormValidator",
-  props: ["modelValue"],
+  props: {
+    modelValue: Boolean,
+    validOnInit: Boolean,
+  },
   emits: { "update:modelValue": (value: boolean) => value },
-  setup(_, { emit, expose }) {
+  setup(props, { emit, expose }) {
     const statusMap = ref(new Map<number, ValidatorStatus>());
     const serviceMap = new Map<number, InputValidatorService>();
 
-    const valid = computed(() => [...statusMap.value.values()].every(status => status === ValidatorStatus.Valid));
+    const valid = computed(() =>
+      [...statusMap.value.values()].every(status => {
+        if (props.validOnInit) {
+          return status === ValidatorStatus.Valid || status === ValidatorStatus.Init;
+        }
+        return status === ValidatorStatus.Valid;
+      }),
+    );
     watch(valid, valid => emit("update:modelValue", valid), { immediate: true });
 
     const form: FormValidatorService = {
diff --git a/packages/playground/src/components/funds_card.vue b/packages/playground/src/components/funds_card.vue
new file mode 100644
index 0000000000..0da50cb86f
--- /dev/null
+++ b/packages/playground/src/components/funds_card.vue
@@ -0,0 +1,85 @@
+<template>
+  <v-tooltip location="bottom" close-delay="1000" color="primary">
+    <template #activator="{ props }">
+      <v-btn
+        id="tftBtn"
+        width="2000"
+        color="white"
+        @click="addTFT"
+        class="px-lg-6 px-md-2 px-sm-0 mx-sm-0"
+        style="color: white; max-width: 140px; width: auto; background-color: var(--primary)"
+        :loading="loadingAddTFT"
+        v-bind="props"
+      >
+        GET TFT
+      </v-btn>
+    </template>
+    <div>
+      Get TFT on Stellar using BTC or Credit card, then you can bridge it to your tfchain account using the Bridge in
+      the dashboard section.
+      <v-btn
+        icon
+        small
+        @click.stop
+        href="https://manual.grid.tf/threefold_token/buy_sell_tft/gettft.html"
+        target="_blank"
+        ><v-icon>mdi-information-outline</v-icon></v-btn
+      >
+    </div>
+  </v-tooltip>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+
+import { useProfileManagerController } from "../components/profile_manager_controller.vue";
+import { useProfileManager } from "../stores";
+import { createCustomToast, ToastType } from "../utils/custom_toast";
+import { getGrid } from "../utils/grid";
+
+export default {
+  name: "FundsCard",
+  setup() {
+    const loadingAddTFT = ref(false);
+    const profileManager = useProfileManager();
+    const ProfileManagerController = useProfileManagerController();
+    const addTFT = async () => {
+      if (window.env.NETWORK !== "dev" && window.env.NETWORK !== "qa") {
+        window.open("https://gettft.com/gettft/", "_blank");
+      } else {
+        loadingAddTFT.value = true;
+        try {
+          const grid = await getGrid(profileManager.profile!);
+          await grid?.balance.getMoreFunds();
+          await ProfileManagerController.reloadBalance();
+          loadingAddTFT.value = false;
+          createCustomToast("Success! You have received TFTs.", ToastType.success);
+        } catch (e) {
+          loadingAddTFT.value = false;
+          console.log("Error: ", e);
+          createCustomToast("Get more TFT failed!", ToastType.danger);
+        }
+      }
+    };
+    return {
+      loadingAddTFT,
+      addTFT,
+    };
+  },
+};
+</script>
+
+<style>
+#tftBtn {
+  display: inline-block;
+  min-width: 10px !important;
+}
+
+:root {
+  --primary: #1aa18f;
+}
+
+.v-tooltip > .v-overlay__content {
+  pointer-events: initial !important;
+}
+</style>
diff --git a/packages/playground/src/components/input_tooltip.vue b/packages/playground/src/components/input_tooltip.vue
index c057332efa..5ea56389ff 100644
--- a/packages/playground/src/components/input_tooltip.vue
+++ b/packages/playground/src/components/input_tooltip.vue
@@ -1,25 +1,21 @@
 <template>
   <div class="d-flex">
-    <v-tooltip :text="tooltip || 'None!'">
+    <v-tooltip :text="tooltip || 'None!'" :location="location">
       <template #activator="{ props }">
         {{ getPropsRef(props) }}
-        <div class="d-flex" :class="{ 'w-100': !inline }">
+        <div class="d-flex" :class="{ 'w-100': !inline, 'align-center': alignCenter }">
           <slot></slot>
           <span
-            :style="{ cursor: 'help', marginTop: '17.5px' }"
+            :style="{ cursor: 'help', marginTop: $props.alignCenter ? '' : '17.5px' }"
             class="ml-3"
             @mouseenter="propsRef?.onMouseenter"
             @mouseleave="propsRef?.onMouseleave"
             @focus="propsRef?.onFocus"
             @blur="propsRef?.onBlur"
           >
-            <a v-if="href" :href="href" target="_blank">
-              <v-icon>mdi-information</v-icon>
-            </a>
-
-            <template v-else>
+            <a :href="href" target="_blank">
               <v-icon>mdi-information-outline</v-icon>
-            </template>
+            </a>
           </span>
         </div>
       </template>
@@ -28,7 +24,8 @@
 </template>
 
 <script lang="ts">
-import { ref } from "vue";
+import { type PropType, ref } from "vue";
+import type { VTooltip } from "vuetify/components/VTooltip";
 
 export default {
   name: "InputTooltip",
@@ -45,6 +42,14 @@ export default {
       type: String,
       required: false,
     },
+    alignCenter: {
+      type: Boolean,
+      required: false,
+    },
+    location: {
+      type: String as PropType<VTooltip["location"]>,
+      required: false,
+    },
   },
   setup() {
     const appendIcon = "mdi-information";
diff --git a/packages/playground/src/components/input_validator.vue b/packages/playground/src/components/input_validator.vue
index 4db128cf1d..8c9db7cd01 100644
--- a/packages/playground/src/components/input_validator.vue
+++ b/packages/playground/src/components/input_validator.vue
@@ -46,6 +46,7 @@ export default {
   emits: {
     "update:modelValue": (valid: boolean) => valid,
     "update:status": (status: ValidatorStatus) => status,
+    "update:error": (error: string | null) => true || error,
   },
   setup(props, { emit, expose }) {
     const { uid } = getCurrentInstance() as { uid: number };
@@ -64,6 +65,7 @@ export default {
     }
 
     const error = ref<string | null>(null);
+    watch(error, error => emit("update:error", error), { immediate: true });
     async function validate(value = props.value): Promise<boolean> {
       setStatus(ValidatorStatus.Pending);
 
diff --git a/packages/playground/src/components/k8s_deployment_table.vue b/packages/playground/src/components/k8s_deployment_table.vue
index df2e225d4d..61fc7d1931 100644
--- a/packages/playground/src/components/k8s_deployment_table.vue
+++ b/packages/playground/src/components/k8s_deployment_table.vue
@@ -1,93 +1,74 @@
 <template>
-  <v-alert v-if="!loading && count && items.length < count" type="warning" variant="tonal">
-    Failed to load <strong>{{ count - items.length }}</strong> deployment{{ count - items.length > 1 ? "s" : "" }}.
-
-    <span>
-      This might happen because the node is down or it's not reachable
-      <span v-if="showEncryption"
-        >or the deployment{{ count - items.length > 1 ? "s are" : " is" }} encrypted by another key</span
-      >.
-    </span>
-    <v-icon class="custom-icon" @click="showDialog = true">mdi-file-document-outline </v-icon>
-
-    <v-dialog transition="dialog-bottom-transition" v-model="showDialog" persistent max-width="500px">
-      <v-card>
-        <v-card-title style="color: #ffcc00; font-weight: bold">Failed Deployments</v-card-title>
-        <v-divider color="#FFCC00" />
-        <v-card-text>
-          <li v-for="deployment in failedDeployments" :key="deployment.name">
-            {{
-              deployment.nodes.length > 0
-                ? `${deployment.name} on node${deployment.nodes.length > 1 ? "s" : ""}: ${deployment.nodes.join(", ")}`
-                : deployment.name
-            }}
-            <template v-if="deployment.contracts && deployment.contracts.length > 0">
-              with contract id:
-              <span v-for="contract in deployment.contracts" :key="contract.contract_id">
-                {{ contract.contract_id }} .
-              </span>
-            </template>
-          </li>
-        </v-card-text>
-        <v-card-actions class="justify-end">
-          <v-btn @click="showDialog = false" class="grey lighten-2 black--text" color="#FFCC00">Close</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-alert>
-
-  <ListTable
-    :headers="[
-      { title: 'PLACEHOLDER', key: 'data-table-select' },
-      { title: 'Name', key: 'name' },
-      { title: 'Public IPv4', key: 'ipv4' },
-      { title: 'Public IPv6', key: 'ipv6' },
-      { title: 'Planetary Network IP', key: 'planetary' },
-      { title: 'Workers', key: 'workers' },
-      { title: 'Billing Rate', key: 'billing' },
-      { title: 'Actions', key: 'actions' },
-    ]"
-    :items="items"
-    :loading="loading"
-    :deleting="deleting"
-    :model-value="$props.modelValue"
-    @update:model-value="$emit('update:model-value', $event)"
-    :no-data-text="`No Kubernetes deployments found on this account.`"
-    @click:row="$attrs['onClick:row']"
-  >
-    <template #[`item.name`]="{ item }">
-      {{ item.value.deploymentName }}
-    </template>
-
-    <template #[`item.ipv4`]="{ item }">
-      {{ item.value.masters[0].publicIP?.ip?.split("/")?.[0] || item.value.masters[0].publicIP?.ip || "None" }}
-    </template>
-
-    <template #[`item.ipv6`]="{ item }">
-      {{ item.value.masters[0].publicIP?.ip6 || "None" }}
-    </template>
-
-    <template #[`item.planetary`]="{ item }">
-      {{ item.value.masters[0].planetary || "None" }}
-    </template>
-
-    <template #[`item.workers`]="{ item }">
-      {{ item.value.workers.length }}
-    </template>
-
-    <template #[`item.billing`]="{ item }">
-      {{ item.value.masters[0].billing }}
-    </template>
-
-    <template #[`item.actions`]="{ item }">
-      <v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
-        Deleting...
-      </v-chip>
-      <v-btn-group variant="tonal" v-else>
-        <slot name="actions" :item="item"></slot>
-      </v-btn-group>
-    </template>
-  </ListTable>
+  <div>
+    <v-alert v-if="!loading && count && items.length < count" type="warning" variant="tonal">
+      Failed to load <strong>{{ count - items.length }}</strong> deployment{{ count - items.length > 1 ? "s" : "" }}.
+
+      <span>
+        This might happen because the node is down or it's not reachable
+        <span v-if="showEncryption"
+          >or the deployment{{ count - items.length > 1 ? "s are" : " is" }} encrypted by another key</span
+        >.
+      </span>
+      <v-icon class="custom-icon" @click="showDialog = true">mdi-file-document-outline </v-icon>
+
+      <v-dialog transition="dialog-bottom-transition" v-model="showDialog" max-width="500px">
+        <v-card>
+          <v-card-title style="color: #ffcc00; font-weight: bold">Failed Deployments</v-card-title>
+          <v-divider color="#FFCC00" />
+          <v-card-text>
+            <li v-for="deployment in failedDeployments" :key="deployment.name">
+              {{
+                deployment.nodes.length > 0
+                  ? `${deployment.name} on node${deployment.nodes.length > 1 ? "s" : ""}: ${deployment.nodes.join(
+                      ", ",
+                    )}`
+                  : deployment.name
+              }}
+              <template v-if="deployment.contracts && deployment.contracts.length > 0">
+                with contract id:
+                <span v-for="contract in deployment.contracts" :key="contract.contract_id">
+                  {{ contract.contract_id }} .
+                </span>
+              </template>
+            </li>
+          </v-card-text>
+          <v-card-actions class="justify-end">
+            <v-btn @click="showDialog = false" class="grey lighten-2 black--text" color="#FFCC00">Close</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-alert>
+
+    <ListTable
+      :headers="[
+        { title: 'PLACEHOLDER', key: 'data-table-select' },
+        { title: 'Name', key: 'name' },
+        { title: 'Public IPv4', key: 'ipv4', sortable: false },
+        { title: 'Public IPv6', key: 'ipv6', sortable: false },
+        { title: 'Planetary Network IP', key: 'planetary', sortable: false },
+        { title: 'Workers', key: 'workersLength' },
+        { title: 'Billing Rate', key: 'billing' },
+        { title: 'Actions', key: 'actions', sortable: false },
+      ]"
+      :items="items"
+      :loading="loading"
+      :deleting="deleting"
+      :model-value="$props.modelValue"
+      @update:model-value="$emit('update:model-value', $event)"
+      :no-data-text="`No Kubernetes deployments found on this account.`"
+      @click:row="$attrs['onClick:row']"
+      :sort-by="sortBy"
+    >
+      <template #[`item.actions`]="{ item }">
+        <v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
+          Deleting...
+        </v-chip>
+        <v-btn-group variant="tonal" v-else>
+          <slot name="actions" :item="item"></slot>
+        </v-btn-group>
+      </template>
+    </ListTable>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -112,6 +93,7 @@ defineEmits<{ (event: "update:model-value", value: any[]): void }>();
 const count = ref<number>();
 const items = ref<any[]>([]);
 const loading = ref(false);
+const namesOfFailedDeployments = ref("");
 
 onMounted(loadDeployments);
 async function loadDeployments() {
@@ -130,7 +112,15 @@ async function loadDeployments() {
   ];
 
   count.value = clusters.count;
-  items.value = clusters.items;
+  items.value = clusters.items.map((item: any) => {
+    item.name = item.deploymentName;
+    item.ipv4 = item.masters[0].publicIP?.ip?.split("/")?.[0] || item.masters[0].publicIP?.ip || "None";
+    item.ipv6 = item.masters[0].publicIP?.ip6 || "None";
+    item.planetary = item.masters[0].planetary || "None";
+    item.workersLength = item.workers.length;
+    item.billing = item.masters[0].billing;
+    return item;
+  });
   loading.value = false;
 }
 
@@ -145,5 +135,14 @@ export default {
   components: {
     ListTable,
   },
+  data() {
+    return {
+      sortBy: [
+        { key: "name", order: "asc" },
+        { key: "workersLength", order: "asc" },
+        { key: "billing", order: "asc" },
+      ],
+    };
+  },
 };
 </script>
diff --git a/packages/playground/src/components/k8s_worker.vue b/packages/playground/src/components/k8s_worker.vue
index 2567ba10bd..4e0bb91d30 100644
--- a/packages/playground/src/components/k8s_worker.vue
+++ b/packages/playground/src/components/k8s_worker.vue
@@ -117,6 +117,7 @@
         }"
         v-model="$props.modelValue.farm"
         v-model:loading="loadingFarm"
+        v-model:search="farmName"
       />
 
       <SelectNode
@@ -140,7 +141,7 @@ defineProps<{ modelValue: K8SWorker }>();
 const emits = defineEmits<{ (event: "update:loading", value: boolean): void }>();
 const farmManager = useFarm();
 const loadingFarm = ref(farmManager?.getLoading());
-
+const farmName = ref();
 watch(loadingFarm, (loadingFarm): void => {
   emits("update:loading", loadingFarm!);
 });
@@ -152,7 +153,7 @@ import { ref, watch } from "vue";
 import SelectFarmManager, { useFarm } from "../components/select_farm_manager.vue";
 import SelectNode from "../components/select_node.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, K8SWorker } from "../types";
+import type { FarmInterface, K8SWorker } from "../types";
 import type { INode } from "../utils/filter_nodes";
 import { generateName } from "../utils/strings";
 import RootFsSize from "./root_fs_size.vue";
@@ -170,7 +171,7 @@ export function createWorker(name: string = generateName({ prefix: "wr" })): K8S
     ipv6: false,
     planetary: true,
     rootFsSize: 2,
-    farm: undefined as Farm | undefined,
+    farm: undefined as FarmInterface | undefined,
     selectedNode: undefined as INode | undefined,
     dedicated: false,
     certified: false,
diff --git a/packages/playground/src/components/line_chart.vue b/packages/playground/src/components/line_chart.vue
new file mode 100644
index 0000000000..6a2dde16d7
--- /dev/null
+++ b/packages/playground/src/components/line_chart.vue
@@ -0,0 +1,78 @@
+<template>
+  <ChLine :data="data" :options="options" />
+</template>
+<script setup lang="ts">
+import { Line } from "vue-chartjs";
+ChartJS.register(...registerables);
+const props = defineProps<{
+  getTotalReward: (currentPrice: number) => number;
+  getRoi: (price: number) => number;
+  xs: number[];
+  isProfit: boolean;
+}>();
+const X = (20 - 0.15) / 19;
+const xs = [...Array.from({ length: 20 }).map((_, i) => 0.15 + X * i)];
+const data = computed(() => {
+  if (props.isProfit) {
+    return {
+      labels: props.xs.map(i => i.toFixed(2)) || xs.map(i => i.toFixed(2)),
+      datasets: [
+        {
+          label: "ROI",
+          data: props.xs.map(x => props.getRoi(x) / 100),
+          backgroundColor: "rgb(26, 161, 143)",
+          borderColor: "rgba(26, 161, 143, 0.5)",
+          pointRadius: 3,
+        },
+      ],
+    };
+  }
+  return {
+    labels: props.xs.map(i => i.toFixed(2)) || xs.map(i => i.toFixed(2)),
+    datasets: [
+      {
+        label: "Margin",
+        data: props.xs.map(x => props.getTotalReward(x)) || xs.map(x => props.getTotalReward(x)),
+        backgroundColor: "rgb(26, 161, 143)",
+        borderColor: "rgba(26, 161, 143, 0.5)",
+        pointRadius: 3,
+      },
+    ],
+  };
+});
+
+const options = computed(() => {
+  if (props.isProfit) {
+    return {
+      responsive: true,
+      maintainAspectRatio: true,
+      plugins: {
+        title: {
+          display: true,
+          text: "Return (USD) / TFT price (USD)",
+        },
+      },
+    } as (typeof Line)["props"]["chartOptions"];
+  }
+  return {
+    responsive: true,
+    maintainAspectRatio: true,
+    plugins: {
+      title: {
+        display: true,
+        text: "Return (USD) / TFT price (USD)",
+      },
+    },
+  } as (typeof Line)["props"]["chartOptions"];
+});
+</script>
+
+<script lang="ts">
+import { Chart as ChartJS, registerables } from "chart.js";
+import { computed } from "vue";
+
+export default {
+  name: "LineChart",
+  components: { ChLine: Line },
+};
+</script>
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 5ab4206ef5..82ac5ccf77 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -16,7 +16,7 @@
           }
         "
       >
-        <template #title>Manage Domains ({{ $props.vm?.[0]?.name }})</template>
+        <template #title>Manage Domains ({{ $props.vm.name }})</template>
 
         <v-tabs align-tabs="center" color="primary" class="mb-6" v-model="gatewayTab" :disabled="deleting">
           <v-tab>Domains List</v-tab>
@@ -253,15 +253,15 @@ export default {
     const passThrough = ref(false);
     const valid = ref(false);
 
-    const ip = props.vm[0].interfaces[0].ip as string;
-    const networkName = props.vm[0].interfaces[0].network as string;
+    const ip = props.vm.interfaces[0].ip as string;
+    const networkName = props.vm.interfaces[0].network as string;
 
     onMounted(async () => {
       const grid = await getGrid(profileManager.profile!);
       oldPrefix.value =
         (props.vm.projectName.toLowerCase().includes(ProjectName.Fullvm.toLowerCase()) ? "fvm" : "vm") +
         grid!.config.twinId;
-      prefix.value = oldPrefix.value + props.vm?.[0]?.name;
+      prefix.value = oldPrefix.value + props.vm.name;
       subdomain.value = generateName({}, 35 - prefix.value.length > 7 ? 7 : 35 - prefix.value.length);
       await loadGateways();
     });
diff --git a/packages/playground/src/components/mosha_toast/offline_nodes_toast.vue b/packages/playground/src/components/mosha_toast/offline_nodes_toast.vue
index c20c41b130..2f194f67ea 100644
--- a/packages/playground/src/components/mosha_toast/offline_nodes_toast.vue
+++ b/packages/playground/src/components/mosha_toast/offline_nodes_toast.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mosha__toast__content d-block">
     You have
-    <button class="link-color" :onclick="navigateToContractsList">
+    <button class="text-decoration-underline" :onclick="navigateToContractsList">
       {{ deploymentLen }} {{ deploymentLen > 1 ? "contracts" : "contract" }}
     </button>
     on offline or standby {{ deploymentLen > 1 ? "nodes" : "node" }}
diff --git a/packages/playground/src/components/node_details.vue b/packages/playground/src/components/node_details.vue
new file mode 100644
index 0000000000..7dd358efba
--- /dev/null
+++ b/packages/playground/src/components/node_details.vue
@@ -0,0 +1,181 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    @update:modelValue="(val:boolean) => closeDialog(val)"
+    :scrim="false"
+    transition="dialog-bottom-transition"
+    hide-overlay
+  >
+    <v-toolbar color="primary">
+      <div class="d-flex justify-center">
+        <v-btn icon dark @click="() => $emit('close-dialog', false)">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </div>
+    </v-toolbar>
+
+    <template v-if="loading">
+      <v-card class="d-flex justify-center align-center h-screen">
+        <v-progress-circular color="primary" indeterminate :size="128" :width="5" />
+        <p class="mt-2">Loading node details...</p>
+      </v-card>
+    </template>
+
+    <template v-else-if="isError">
+      <v-card class="d-flex justify-center align-center h-screen">
+        <div class="text-center w-100 pa-3">
+          <v-icon variant="tonal" color="error" style="font-size: 50px" icon="mdi-close-circle-outline" />
+          <p class="mt-4 mb-4 font-weight-bold text-error">
+            {{ errorMessage }}
+          </p>
+          <v-btn class="mr-4" @click="requestNode" color="primary" text="Try Again" />
+          <v-btn @click="(val:boolean) => closeDialog(val)" color="error" variant="outlined" text="Cancel" />
+        </div>
+      </v-card>
+    </template>
+
+    <template v-else>
+      <v-card>
+        <node-resources-charts :node="node" />
+        <v-row class="pa-8 mt-5" justify-md="start" justify-sm="center">
+          <v-col cols="12" md="6" sm="8">
+            <node-details-card :node="node" />
+          </v-col>
+          <v-col cols="12" md="6" sm="8">
+            <country-details-card :node="node" />
+            <location-details-card :node="node" />
+          </v-col>
+          <v-col cols="12" md="6" sm="8">
+            <farm-details-card :node="node" />
+          </v-col>
+          <v-col cols="12" md="6" sm="8">
+            <twin-details-card :node="node" />
+          </v-col>
+          <v-col cols="12" md="6" sm="8">
+            <interfaces-details-card :node="node" />
+          </v-col>
+          <v-col v-if="node.cards?.length" cols="12" md="6" sm="8">
+            <gpu-details-card :node="node" />
+          </v-col>
+          <v-col v-if="node.publicConfig && node.publicConfig.domain" cols="12" md="6" sm="8">
+            <public-config-details-card :node="node" />
+          </v-col>
+        </v-row>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { type GridNode, NodeStatus } from "@threefold/gridproxy_client";
+import { type PropType, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+
+import CountryDetailsCard from "@/components/node_details_cards/country_details_card.vue";
+import FarmDetailsCard from "@/components/node_details_cards/farm_details_card.vue";
+import GpuDetailsCard from "@/components/node_details_cards/gpu_details_card.vue";
+import InterfacesDetailsCard from "@/components/node_details_cards/interfaces_details_card.vue";
+import LocationDetailsCard from "@/components/node_details_cards/location_details_card.vue";
+import NodeDetailsCard from "@/components/node_details_cards/node_details_card.vue";
+import PublicConfigDetailsCard from "@/components/node_details_cards/public_config_details_card.vue";
+import TwinDetailsCard from "@/components/node_details_cards/twin_details_card.vue";
+import router from "@/router";
+import { type GridProxyRequestConfig, nodeInitializer } from "@/types";
+import { getNode, getNodeStatusColor } from "@/utils/get_nodes";
+
+import NodeResourcesCharts from "./node_resources_charts.vue";
+
+export default {
+  props: {
+    openDialog: {
+      type: Boolean,
+      required: true,
+    },
+    nodeId: {
+      type: Number,
+      required: true,
+    },
+    options: {
+      type: Object as PropType<GridProxyRequestConfig>,
+      required: true,
+    },
+  },
+
+  components: {
+    NodeResourcesCharts,
+    NodeDetailsCard,
+    FarmDetailsCard,
+    CountryDetailsCard,
+    LocationDetailsCard,
+    InterfacesDetailsCard,
+    TwinDetailsCard,
+    GpuDetailsCard,
+    PublicConfigDetailsCard,
+  },
+
+  setup(props, { emit }) {
+    const loading = ref(false);
+    const dialog = ref(false);
+    const isError = ref(false);
+    const errorMessage = ref("");
+    const route = useRoute();
+    const node = ref<GridNode>(nodeInitializer);
+
+    function closeDialog(newValue: boolean) {
+      isError.value = false;
+      errorMessage.value = "";
+      emit("close-dialog", newValue);
+    }
+
+    async function requestNode() {
+      isError.value = false;
+      if (props.nodeId > 0) {
+        try {
+          loading.value = true;
+          const _node: GridNode = await getNode(props.nodeId, props.options);
+          node.value = _node;
+          router.push({ path: route.path, query: { nodeId: node.value.nodeId } });
+        } catch (err) {
+          isError.value = true;
+          errorMessage.value = `Failed to load node with ID ${props.nodeId}. The node might be offline or unresponsive. You can try requesting it again.`;
+        } finally {
+          loading.value = false;
+        }
+      }
+    }
+
+    watch(() => props.nodeId, requestNode);
+
+    watch(
+      () => props.openDialog,
+      newValue => {
+        dialog.value = newValue as boolean;
+      },
+    );
+
+    return {
+      NodeStatus,
+
+      dialog,
+      node,
+      loading,
+      isError,
+      errorMessage,
+      requestNode,
+      closeDialog,
+      getNodeStatusColor,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.v-list-item__prepend > .v-icon,
+.v-list-item__append > .v-icon {
+  opacity: 1 !important;
+}
+:deep(.v-toolbar__content) {
+  justify-content: end !important;
+  height: 48px !important;
+}
+</style>
diff --git a/packages/playground/src/components/node_details_cards/card_details.vue b/packages/playground/src/components/node_details_cards/card_details.vue
new file mode 100644
index 0000000000..50dbf4b00d
--- /dev/null
+++ b/packages/playground/src/components/node_details_cards/card_details.vue
@@ -0,0 +1,132 @@
+<template>
+  <v-card :loading="loading">
+    <v-alert class="pa-5" style="height: 20px" color="primary">
+      <h4 class="text-center font-weight-medium">
+        <v-icon :icon="icon" size="large" />
+        {{ title }}
+      </h4>
+    </v-alert>
+    <v-card-item :class="`mt-2 mb-2 ${$props.isMap ? 'map' : ''}`">
+      <div v-if="$props.isMap">
+        <tf-map :nodes="transformedObject" r="76" g="187" b="217"></tf-map>
+      </div>
+
+      <div :class="`items`" v-else>
+        <slot name="gpu-hint-message" />
+
+        <v-row class="bb-gray" v-for="item in items" :key="item.name">
+          <v-col class="d-flex justify-start align-center ml-3">
+            <p class="font-14">{{ item.name }}</p>
+            <v-chip class="ml-4" v-if="item.nameHint" :color="item.nameHintColor">{{ item.nameHint }}</v-chip>
+          </v-col>
+          <v-col class="d-flex justify-end align-center mr-3">
+            <p class="font-14" v-if="!item.icon && !item.hint && !item.imgSrc">
+              {{ item.value && item.value.length > maxLenChar ? item.value.slice(0, maxLenChar) + "..." : item.value }}
+            </p>
+
+            <v-tooltip v-if="item.hint && !item.icon" location="top" :text="item.hint">
+              <template #activator="{ props }">
+                <p class="font-14" v-bind="props">
+                  {{
+                    item.value && item.value.length > maxLenChar ? item.value.slice(0, maxLenChar) + "..." : item.value
+                  }}
+                </p>
+              </template>
+            </v-tooltip>
+
+            <v-tooltip v-if="item.hint && item.icon" location="top" :text="item.hint">
+              <template #activator="{ props }">
+                <p class="font-14" v-bind="props">
+                  {{
+                    item.value && item.value.length > maxLenChar ? item.value.slice(0, maxLenChar) + "..." : item.value
+                  }}
+                </p>
+                <v-icon
+                  v-if="item.value && item.value.length && item.value != '-'"
+                  class="ml-1"
+                  v-bind="props"
+                  :icon="item.icon"
+                  @click="item.callback!(item.value!)"
+                />
+              </template>
+            </v-tooltip>
+
+            <v-tooltip location="top" v-else-if="item.imgSrc" :text="item.hint">
+              <template #activator="{ props }">
+                <img alt="flag" width="40" v-bind="props" :src="item.imgSrc" />
+              </template>
+            </v-tooltip>
+          </v-col>
+        </v-row>
+      </div>
+    </v-card-item>
+  </v-card>
+</template>
+
+<script lang="ts">
+import type { GridNode } from "@threefold/gridproxy_client";
+import { capitalize, onMounted, type PropType, ref } from "vue";
+
+import type { NodeDetailsCard } from "@/types";
+
+export default {
+  name: "CardDetails",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+
+    icon: {
+      type: String,
+      required: true,
+    },
+    node: {
+      type: Object as PropType<GridNode>,
+      required: false,
+    },
+
+    items: {
+      type: Array as PropType<NodeDetailsCard[]>,
+      required: false,
+    },
+
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+
+    isMap: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  setup(props) {
+    const maxLenChar = 30;
+    const transformedObject = ref<string>("");
+
+    onMounted(() => {
+      if (props.node) {
+        const country = capitalize(props.node.country);
+        transformedObject.value = JSON.stringify({
+          [country]: 1,
+        });
+      }
+    });
+
+    return { maxLenChar, transformedObject };
+  },
+};
+</script>
+
+<style scoped>
+.bb-gray {
+  border-bottom: 1px solid gray;
+}
+.map {
+  /* width: 70%; */
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/packages/playground/src/components/node_details_cards/country_details_card.vue b/packages/playground/src/components/node_details_cards/country_details_card.vue
new file mode 100644
index 0000000000..e54a9b1ab3
--- /dev/null
+++ b/packages/playground/src/components/node_details_cards/country_details_card.vue
@@ -0,0 +1,61 @@
+<template>
+  <card-details :loading="loading" title="Country Details" :items="countryFields" icon="mdi-map-outline" />
+</template>
+
+<script lang="ts">
+import type { GridNode } from "@threefold/gridproxy_client";
+import { onMounted, type PropType, ref } from "vue";
+
+import type { NodeDetailsCard } from "@/types";
+import { getCountryCode } from "@/utils/get_nodes";
+
+import CardDetails from "./card_details.vue";
+
+export default {
+  name: "CountryDetailsCard",
+  components: { CardDetails },
+  props: {
+    node: {
+      type: Object as PropType<GridNode>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const loading = ref<boolean>(false);
+    const countryFields = ref<NodeDetailsCard[]>();
+
+    const mount = () => {
+      loading.value = true;
+      countryFields.value = getNodeDetailsCard();
+      loading.value = false;
+    };
+
+    onMounted(mount);
+
+    const getNodeDetailsCard = (): NodeDetailsCard[] => {
+      return [
+        { name: "Flag", imgSrc: getCountryFlagSrc(), hint: props.node.location.country },
+        { name: "Name", value: props.node.country },
+        { name: "Code ISO 2", value: getCountryCode(props.node) },
+        { name: "City", value: props.node.city },
+        { name: "Latitude", value: props.node.location.latitude?.toString() },
+        { name: "Longitude", value: props.node.location.longitude?.toString() },
+      ];
+    };
+
+    const getCountryFlagSrc = () => {
+      const conuntryCode = getCountryCode(props.node);
+
+      return conuntryCode.toLocaleLowerCase() != "ch"
+        ? `https://www.worldatlas.com/r/w425/img/flag/${conuntryCode?.toLocaleLowerCase()}-flag.jpg`
+        : `https://www.worldatlas.com/r/w425/img/flag/${conuntryCode?.toLocaleLowerCase()}-flag.png`;
+    };
+
+    return {
+      countryFields,
+      loading,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_details_cards/farm_details_card.vue b/packages/playground/src/components/node_details_cards/farm_details_card.vue
new file mode 100644
index 0000000000..8944ddde1b
--- /dev/null
+++ b/packages/playground/src/components/node_details_cards/farm_details_card.vue
@@ -0,0 +1,75 @@
+<template>
+  <card-details :loading="loading" title="Farm Details" :items="farmFields" icon="mdi-webpack" />
+</template>
+
+<script lang="ts">
+import type { Farm, GridNode } from "@threefold/gridproxy_client";
+import { onMounted, type PropType, ref } from "vue";
+
+import type { NodeDetailsCard } from "@/types";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
+
+import CardDetails from "./card_details.vue";
+
+export default {
+  name: "FarmDetailsCard",
+  components: { CardDetails },
+  props: {
+    node: {
+      type: Object as PropType<GridNode>,
+      required: false,
+    },
+    farm: {
+      type: Object as PropType<Farm>,
+      required: false,
+    },
+  },
+
+  setup(props) {
+    const loading = ref<boolean>(false);
+    const farmFields = ref<NodeDetailsCard[]>();
+
+    const mount = () => {
+      loading.value = true;
+      farmFields.value = getFarmDetails();
+      loading.value = false;
+    };
+
+    onMounted(mount);
+
+    const copy = (address: string) => {
+      navigator.clipboard.writeText(address);
+      createCustomToast("Copied!", ToastType.success);
+    };
+
+    const getFarmDetails = (): NodeDetailsCard[] => {
+      let farmId, farmName, farmStellarAddress;
+      if (props.node) {
+        farmId = props.node.farmId.toString();
+        farmName = props.node.farm.name;
+        farmStellarAddress = props.node.farm.stellarAddress.length ? props.node.farm.stellarAddress : "-";
+      } else if (props.farm) {
+        farmId = props.farm.farmId.toString();
+        farmName = props.farm.name;
+        farmStellarAddress = props.farm.stellarAddress.length ? props.farm.stellarAddress : "-";
+      }
+      return [
+        { name: "ID", value: farmId },
+        { name: "Name", value: farmName },
+        {
+          name: "Stellar Address",
+          value: farmStellarAddress,
+          icon: "mdi-content-copy",
+          callback: copy,
+          hint: "Copy the stellar address to the clipboard.",
+        },
+      ];
+    };
+
+    return {
+      farmFields,
+      loading,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_details_cards/gpu_details_card.vue b/packages/playground/src/components/node_details_cards/gpu_details_card.vue
new file mode 100644
index 0000000000..00145f6b35
--- /dev/null
+++ b/packages/playground/src/components/node_details_cards/gpu_details_card.vue
@@ -0,0 +1,115 @@
+<template>
+  <card-details
+    :is-list-items="true"
+    :loading="loading"
+    title="GPUs Details"
+    :items="gpuFields"
+    icon="mdi-credit-card-settings-outline"
+  >
+    <template #gpu-hint-message>
+      <v-chip class="d-flex justify-center ma-4 mt-1" color="info">
+        Select a GPU card ID from the below selection to load its data.
+      </v-chip>
+      <v-row class="bb-gray">
+        <v-col class="ml-3 d-flex justify-start align-center">
+          Card ID
+          <v-chip class="ml-4" :color="selectedCard.contract ? 'warning' : 'primary'">
+            {{ selectedCard.contract ? "Reserved" : "Available" }}
+          </v-chip>
+        </v-col>
+        <v-col class="mr-3 d-flex justify-end align-center">
+          <v-select chips clearable hide-details="auto" v-model="cardId" :items="cardsIds" variant="outlined" />
+          <v-icon class="ml-1" :icon="'mdi-content-copy'" @click="copy(cardId)" />
+        </v-col>
+      </v-row>
+    </template>
+  </card-details>
+</template>
+
+<script lang="ts">
+import type { GPUCard, GridNode } from "@threefold/gridproxy_client";
+import { onMounted, type PropType, ref } from "vue";
+import { watch } from "vue";
+
+import type { NodeDetailsCard } from "@/types";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
+
+import CardDetails from "./card_details.vue";
+
+export default {
+  name: "GPUDetailsCard",
+  components: { CardDetails },
+  props: {
+    node: {
+      type: Object as PropType<GridNode>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const loading = ref<boolean>(false);
+    const gpuFields = ref<NodeDetailsCard[]>([]);
+    const cardsIds = ref<string[]>([]);
+    const cardId = ref<string>("");
+    const selectedCard = ref<GPUCard>(props.node.cards[0]);
+
+    watch(cardId, newCardId => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      selectedCard.value = props.node.cards.find(card => card.id === newCardId)!;
+      gpuFields.value = getNodeTwinDetailsCard();
+    });
+
+    const mount = () => {
+      loading.value = true;
+      selectedCard.value = props.node.cards[0];
+      props.node.cards.map((card: GPUCard) => {
+        cardsIds.value.push(card.id);
+      });
+      cardId.value = cardsIds.value[0];
+      gpuFields.value = getNodeTwinDetailsCard();
+      loading.value = false;
+    };
+
+    onMounted(mount);
+
+    const copy = (value: string) => {
+      navigator.clipboard.writeText(value);
+      createCustomToast("Copied!", ToastType.success);
+    };
+
+    const getNodeTwinDetailsCard = (): NodeDetailsCard[] => {
+      return [
+        {
+          name: "Vendor",
+          value: selectedCard.value.vendor,
+          hint: selectedCard.value.vendor,
+        },
+        {
+          name: "Device",
+          value: selectedCard.value.device,
+          hint: selectedCard.value.device,
+        },
+        {
+          name: "Contract ID",
+          value: selectedCard.value.contract === 0 ? "N/A" : selectedCard.value.contract.toString(),
+        },
+      ];
+    };
+
+    return {
+      gpuFields,
+      loading,
+      cardsIds,
+      cardId,
+      selectedCard,
+      copy,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.bb-gray {
+  border-bottom: 1px solid gray;
+}
+</style>
diff --git a/packages/playground/src/components/node_details_cards/interfaces_details_card.vue b/packages/playground/src/components/node_details_cards/interfaces_details_card.vue
new file mode 100644
index 0000000000..ed2deefb9e
--- /dev/null
+++ b/packages/playground/src/components/node_details_cards/interfaces_details_card.vue
@@ -0,0 +1,82 @@
+<template>
+  <card-details
+    :loading="loading"
+    title="Interfaces Details"
+    :items="interfaceFields"
+    icon="mdi-expansion-card-variant"
+  />
+</template>
+
+<script lang="ts">
+import type { Interfaces } from "@threefold/graphql_client";
+import type { GridNode } from "@threefold/gridproxy_client";
+import { onMounted, type PropType, ref } from "vue";
+
+import { gqlClient } from "@/clients";
+import type { NodeDetailsCard } from "@/types";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
+
+import CardDetails from "./card_details.vue";
+
+export default {
+  name: "InterfacesDetailsCard",
+  components: { CardDetails },
+  props: {
+    node: {
+      type: Object as PropType<GridNode>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const loading = ref<boolean>(false);
+    const interfaceFields = ref<NodeDetailsCard[]>();
+    const interfacesDetails = ref<Interfaces>();
+
+    const mount = () => {
+      loading.value = true;
+      interfaceFields.value = getNodeDetailsCard();
+      loading.value = false;
+    };
+
+    onMounted(async () => {
+      await getInterfaces();
+      mount();
+    });
+
+    const getInterfaces = async () => {
+      if (props.node) {
+        const interfaces = await gqlClient.interfaces(
+          { name: true, ips: true, mac: true },
+          { where: { node: { nodeID_eq: props.node?.nodeId } } },
+        );
+        interfacesDetails.value = interfaces[0] as Interfaces;
+      }
+    };
+
+    const copy = (address: string) => {
+      navigator.clipboard.writeText(address);
+      createCustomToast("Copied!", ToastType.success);
+    };
+
+    const getNodeDetailsCard = (): NodeDetailsCard[] => {
+      return [
+        { name: "Name", value: interfacesDetails.value?.name },
+        { name: "Mac Address", value: interfacesDetails.value?.mac },
+        {
+          name: "IPs",
+          value: interfacesDetails.value?.ips.replace(",", "  |  "),
+          icon: "mdi-content-copy",
+          callback: copy,
+          hint: "Copy the interface ips to the clipboard.",
+        },
+      ];
+    };
+
+    return {
+      interfaceFields,
+      loading,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_details_cards/location_details_card.vue b/packages/playground/src/components/node_details_cards/location_details_card.vue
new file mode 100644
index 0000000000..00ba00969f
--- /dev/null
+++ b/packages/playground/src/components/node_details_cards/location_details_card.vue
@@ -0,0 +1,41 @@
+<template>
+  <card-details
+    :isMap="true"
+    :loading="loading"
+    title="Location Details"
+    :items="locationFields"
+    icon="mdi-google-maps"
+    :node="$props.node"
+  />
+</template>
+
+<script lang="ts">
+// TODO: Update the map location...
+import type { GridNode } from "@threefold/gridproxy_client";
+import { type PropType, ref } from "vue";
+
+import type { NodeDetailsCard } from "@/types";
+
+import CardDetails from "./card_details.vue";
+
+export default {
+  name: "LocationDetailsCard",
+  components: { CardDetails },
+  props: {
+    node: {
+      type: Object as PropType<GridNode>,
+      required: true,
+    },
+  },
+
+  setup() {
+    const loading = ref<boolean>(false);
+    const locationFields = ref<NodeDetailsCard[]>();
+
+    return {
+      locationFields,
+      loading,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_details_cards/node_details_card.vue b/packages/playground/src/components/node_details_cards/node_details_card.vue
new file mode 100644
index 0000000000..e9fa70b1b6
--- /dev/null
+++ b/packages/playground/src/components/node_details_cards/node_details_card.vue
@@ -0,0 +1,65 @@
+<template>
+  <card-details :loading="loading" title="Node Details" :items="nodeFields" icon="mdi-resistor-nodes" />
+</template>
+
+<script lang="ts">
+import type { GridNode } from "@threefold/gridproxy_client";
+import { onMounted, type PropType, ref } from "vue";
+
+import type { NodeDetailsCard } from "@/types";
+import toHumanDate from "@/utils/date";
+import formatResourceSize from "@/utils/format_resource_size";
+
+import CardDetails from "./card_details.vue";
+
+export default {
+  name: "NodeDetailsCard",
+  components: { CardDetails },
+  props: {
+    node: {
+      type: Object as PropType<GridNode>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const loading = ref<boolean>(false);
+    const nodeFields = ref<NodeDetailsCard[]>();
+
+    const mount = () => {
+      loading.value = true;
+      nodeFields.value = getNodeDetailsCard();
+      loading.value = false;
+    };
+
+    onMounted(mount);
+
+    const getNodeDetailsCard = (): NodeDetailsCard[] => {
+      return [
+        { name: "ID", value: props.node.nodeId.toString() },
+        { name: "Farm ID", value: props.node.farmId.toString() },
+        { name: "Farm Policy ID", value: props.node.farmingPolicyId.toString() },
+        { name: "CPU", value: `${props.node.total_resources.cru} cores` },
+        { name: "Disk(HDD)", value: formatResourceSize(props.node.total_resources.hru) },
+        { name: "Disk(SSD)", value: formatResourceSize(props.node.total_resources.sru) },
+        { name: "RAM", value: formatResourceSize(props.node.total_resources.mru) },
+        { name: "Created", value: toHumanDate(props.node.created) },
+        { name: "Certification Type", value: props.node.certificationType },
+        {
+          name: "Number of Workloads",
+          value: props.node.stats && props.node.stats.system ? props.node.stats.users.workloads.toString() : "N/A",
+        },
+        {
+          name: "Number of Deployments",
+          value: props.node.stats && props.node.stats.system ? props.node.stats.users.deployments.toString() : "N/A",
+        },
+      ];
+    };
+
+    return {
+      nodeFields,
+      loading,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_details_cards/public_config_details_card.vue b/packages/playground/src/components/node_details_cards/public_config_details_card.vue
new file mode 100644
index 0000000000..ba6346e914
--- /dev/null
+++ b/packages/playground/src/components/node_details_cards/public_config_details_card.vue
@@ -0,0 +1,63 @@
+<template>
+  <card-details :loading="loading" title="Public Configs Details" :items="publicConfigFields" icon="mdi-cog" />
+</template>
+
+<script lang="ts">
+import type { GridNode } from "@threefold/gridproxy_client";
+import { onMounted, type PropType, ref } from "vue";
+
+import type { NodeDetailsCard } from "@/types";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
+
+import CardDetails from "./card_details.vue";
+
+export default {
+  name: "PublicConfigDetailsCard",
+  components: { CardDetails },
+  props: {
+    node: {
+      type: Object as PropType<GridNode>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const loading = ref<boolean>(false);
+    const publicConfigFields = ref<NodeDetailsCard[]>();
+
+    const mount = () => {
+      loading.value = true;
+      publicConfigFields.value = getNodeTwinDetailsCard();
+      loading.value = false;
+    };
+
+    onMounted(mount);
+
+    const copy = (address: string) => {
+      navigator.clipboard.writeText(address);
+      createCustomToast("Copied!", ToastType.success);
+    };
+
+    const getNodeTwinDetailsCard = (): NodeDetailsCard[] => {
+      return [
+        { name: "IPv4", value: props.node.publicConfig.ipv4 },
+        {
+          name: "IPv6",
+          value: props.node.publicConfig.ipv6,
+          icon: "mdi-content-copy",
+          callback: copy,
+          hint: "Copy the IPv6 to the clipboard.",
+        },
+        { name: "GW4", value: props.node.publicConfig.gw4 },
+        { name: "GW6", value: props.node.publicConfig.gw6 },
+        { name: "Domain", value: props.node.publicConfig.domain },
+      ];
+    };
+
+    return {
+      publicConfigFields,
+      loading,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_details_cards/twin_details_card.vue b/packages/playground/src/components/node_details_cards/twin_details_card.vue
new file mode 100644
index 0000000000..d48d25f65d
--- /dev/null
+++ b/packages/playground/src/components/node_details_cards/twin_details_card.vue
@@ -0,0 +1,87 @@
+<template>
+  <card-details :loading="loading" title="Twin Details" :items="twinFields" icon="mdi-account" />
+</template>
+
+<script lang="ts">
+import type { Farm, GridNode, Twin } from "@threefold/gridproxy_client";
+import { onMounted, type PropType, ref } from "vue";
+
+import type { NodeDetailsCard } from "@/types";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
+import { getFarmTwinByTwinId } from "@/utils/get_farms";
+
+import CardDetails from "./card_details.vue";
+
+export default {
+  name: "TwinDetailsCard",
+  components: { CardDetails },
+  props: {
+    node: {
+      type: Object as PropType<GridNode>,
+      required: false,
+    },
+    farm: {
+      type: Object as PropType<Farm>,
+      required: false,
+    },
+  },
+
+  setup(props) {
+    const loading = ref<boolean>(false);
+    const twinFields = ref<NodeDetailsCard[]>();
+    const twin = ref<Twin>();
+
+    onMounted(async () => {
+      loading.value = true;
+
+      if (props.farm) {
+        try {
+          twin.value = await getFarmTwinByTwinId({ twinId: props.farm.twinId });
+        } catch (err) {
+          createCustomToast(
+            "Failed to load Twin details due to Slow Network. Please try again later.",
+            ToastType.danger,
+          );
+        } finally {
+          loading.value = false;
+        }
+      } else if (props.node) {
+        twin.value = props.node.twin;
+      }
+      twinFields.value = getNodeTwinDetailsCard();
+    });
+
+    const copy = (address: string) => {
+      navigator.clipboard.writeText(address);
+      createCustomToast("Copied!", ToastType.success);
+    };
+
+    const getNodeTwinDetailsCard = (): NodeDetailsCard[] => {
+      let twinId, accountId, relay;
+      if (twin.value) {
+        twinId = twin.value.twinId.toString();
+
+        accountId = twin.value.accountId;
+        relay = twin.value.relay;
+      }
+
+      return [
+        { name: "ID", value: twinId || "-" },
+        {
+          name: "Account ID",
+          value: accountId || "-",
+          icon: "mdi-content-copy",
+          callback: copy,
+          hint: "Copy the account id to the clipboard.",
+        },
+        { name: "Relay", value: relay || "-" },
+      ];
+    };
+
+    return {
+      twinFields,
+      loading,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/node_resources_charts.vue b/packages/playground/src/components/node_resources_charts.vue
new file mode 100644
index 0000000000..f834ada1a5
--- /dev/null
+++ b/packages/playground/src/components/node_resources_charts.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="node-resources mt-10">
+    <v-row justify="center">
+      <v-col cols="8">
+        <h2 class="node-resources-title text-center text-h5 flex justify-center items-center">
+          <v-icon size="32" class="mr-2">mdi-chart-pie</v-icon>
+          Node {{ node.nodeId }} Resources
+          <v-chip :color="getNodeStatusColor(node.status).color">
+            {{ node.status === NodeStatus.Up ? "Online" : node.status === NodeStatus.Standby ? "Standby" : "Offline" }}
+          </v-chip>
+        </h2>
+      </v-col>
+    </v-row>
+
+    <v-row justify="center">
+      <div v-for="item in resources" :key="item.name" class="mx-6 d-flex flex-column pt-2 mt-2 align-center">
+        <div class="mb-2">{{ item.name }}</div>
+        <div class="text-center">
+          <v-progress-circular :model-value="item.value" :size="150" :width="15" color="info"
+            >{{ item.value !== "NaN" ? item.value + "%" : "N/A" }}
+          </v-progress-circular>
+        </div>
+      </div>
+    </v-row>
+
+    <v-row justify="center">
+      <v-progress-circular v-if="loading" indeterminate color="primary" :size="50" class="mt-10 mb-10" />
+
+      <v-btn
+        rounded="md"
+        variant="flat"
+        color="primary"
+        v-if="isNodeReadyToVisit()"
+        class="mt-15"
+        @click="getNodeHealthUrl"
+      >
+        Check Node Health
+      </v-btn>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { type GridNode, NodeStatus } from "@threefold/gridproxy_client";
+import { type PropType, ref } from "vue";
+
+import type { ResourceWrapper } from "@/types";
+import { GrafanaStatistics } from "@/utils/get_metrics_url";
+import { getNodeStatusColor } from "@/utils/get_nodes";
+
+export default {
+  props: {
+    node: {
+      type: Object as PropType<GridNode>,
+      required: true,
+    },
+  },
+  async mounted() {
+    this.resources = await this.getNodeResources();
+  },
+  setup(props) {
+    const resources = ref<ResourceWrapper[]>([]);
+    const renamedResources = ["CPU", "RAM", "SSD", "HDD"];
+    const loading = ref<boolean>(false);
+
+    const getNodeHealthUrl = async () => {
+      const grafana = new GrafanaStatistics(props.node);
+      const nodeHealthUrl = await grafana.getUrl();
+      window.open(nodeHealthUrl, "_blank");
+    };
+
+    const getNodeResources = async () => {
+      loading.value = true;
+      return ["cru", "mru", "sru", "hru"].map((i, idx) => {
+        let value;
+        if (props.node.stats && props.node.stats.system) {
+          value =
+            ((Reflect.get(props.node.stats.used, i) + Reflect.get(props.node.stats.system, i)) /
+              Reflect.get(props.node.stats.total, i)) *
+            100;
+        } else {
+          value = NaN;
+        }
+        loading.value = false;
+        return {
+          id: idx + 1,
+          value: value.toFixed(2),
+          name: renamedResources[idx],
+        };
+      });
+    };
+
+    // Return true if the node is up or standby
+    const isNodeReadyToVisit = () => {
+      return (
+        (!loading.value && props.node.status === NodeStatus.Up) ||
+        (!loading.value && props.node.status === NodeStatus.Standby)
+      );
+    };
+
+    return {
+      NodeStatus,
+      resources,
+      loading,
+
+      getNodeResources,
+      getNodeHealthUrl,
+      isNodeReadyToVisit,
+      getNodeStatusColor,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/nodes_table.vue b/packages/playground/src/components/nodes_table.vue
new file mode 100644
index 0000000000..9ee79566b3
--- /dev/null
+++ b/packages/playground/src/components/nodes_table.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="table-content">
+    <v-row>
+      <v-col>
+        <v-data-table-server
+          :loading="loading"
+          loading-text="Loading nodes..."
+          :headers="headers"
+          :items="modelValue"
+          :items-length="count"
+          :items-per-page="$props.size"
+          :items-per-page-options="[
+            { value: 5, title: '5' },
+            { value: 10, title: '10' },
+            { value: 15, title: '15' },
+            { value: 50, title: '50' },
+          ]"
+          :page="$props.page"
+          @update:page="$emit('update:page', $event)"
+          @update:items-per-page="$emit('update:size', $event)"
+          class="elevation-1 v-data-table-header"
+          density="compact"
+          :disable-sort="true"
+          hide-default-header
+          :hover="true"
+          @click:row="openSheet"
+        >
+          <template #loading />
+
+          <template v-slot:[`item.status`]="{ item }">
+            <p class="text-left mt-1 mb-0">
+              <v-chip :color="getNodeStatusColor(item.columns.status as string).color">
+                <span>
+                  {{ capitalize(getNodeStatusColor(item.columns.status as string).status) }}
+                </span>
+              </v-chip>
+            </p>
+          </template>
+
+          <template v-slot:[`item.dedicated`]="{ item }">
+            <p class="text-left mt-1 mb-0">
+              <v-chip :color="getNodeTypeColor(item.columns.dedicated as boolean).color">
+                <span>
+                  {{ capitalize(getNodeTypeColor(item.columns.dedicated as boolean).type) }}
+                </span>
+              </v-chip>
+            </p>
+          </template>
+        </v-data-table-server>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { type GridNode, NodeStatus } from "@threefold/gridproxy_client";
+import type { PropType } from "vue";
+import { capitalize } from "vue";
+import type { VDataTable } from "vuetify/labs/VDataTable";
+
+import formatResourceSize from "@/utils/format_resource_size";
+import { getNodeStatusColor, getNodeTypeColor } from "@/utils/get_nodes";
+import toReadableDate from "@/utils/to_readable_data";
+
+export default {
+  emits: ["update:page", "update:size", "open-dialog"],
+  props: {
+    size: {
+      required: true,
+      type: Number,
+    },
+    page: {
+      required: true,
+      type: Number,
+    },
+    modelValue: {
+      required: true,
+      type: [] as PropType<GridNode[]>,
+    },
+    count: {
+      required: true,
+      type: Number,
+    },
+    loading: {
+      required: true,
+      type: Boolean,
+    },
+  },
+  setup(_, { emit }) {
+    const nodeStatusOptions = [NodeStatus.Up, NodeStatus.Down];
+
+    const headers: VDataTable["headers"] = [
+      { title: "ID", key: "nodeId", sortable: false },
+      { title: "Farm ID", key: "farmId", align: "start", sortable: false },
+      { title: "Total Public IPs", key: "publicIps.total", align: "start", sortable: false },
+      { title: "Free Public IPs", key: "publicIps.free", align: "start", sortable: false },
+      {
+        title: "CPU",
+        key: "total_resources.cru",
+        align: "start",
+        sortable: false,
+      },
+      {
+        title: "RAM",
+        key: "total_resources.mru",
+        align: "start",
+        value: item => formatResourceSize(item.total_resources.mru),
+        sortable: false,
+      },
+      {
+        title: "SSD",
+        key: "total_resources.sru",
+        align: "start",
+        value: item => formatResourceSize(item.total_resources.sru),
+        sortable: false,
+      },
+      {
+        title: "HDD",
+        key: "total_resources.hru",
+        align: "start",
+        value: item => formatResourceSize(item.total_resources.hru),
+        sortable: false,
+      },
+      { title: "GPU", key: "num_gpu", align: "start", sortable: false },
+      { title: "Uptime", key: "uptime", align: "start", sortable: false, value: item => toReadableDate(item.uptime) },
+      { title: "Status", key: "status", align: "start", sortable: false },
+      { title: "Type", key: "dedicated", align: "start", sortable: false },
+    ];
+
+    const openSheet = (_e: any, { item }: any) => {
+      emit("open-dialog", item);
+    };
+
+    return {
+      headers,
+      nodeStatusOptions,
+      getNodeStatusColor,
+      getNodeTypeColor,
+      openSheet,
+      capitalize,
+    };
+  },
+};
+</script>
+
+<style>
+.v-data-table-header th,
+.v-data-table-header td {
+  white-space: nowrap;
+  font-size: 14px;
+}
+.v-data-table__tr {
+  line-height: 55px;
+}
+.v-data-table__thead {
+  line-height: 60px;
+}
+</style>
diff --git a/packages/playground/src/components/pie_chart.vue b/packages/playground/src/components/pie_chart.vue
new file mode 100644
index 0000000000..ce2e7254df
--- /dev/null
+++ b/packages/playground/src/components/pie_chart.vue
@@ -0,0 +1,48 @@
+<template>
+  <ChDoughnut :data="data" :options="options" />
+</template>
+<script setup lang="ts">
+ChartJS.register(...registerables);
+
+const props = defineProps<{
+  chartdata: any[];
+}>();
+
+const options = ref<(typeof Doughnut)["props"]["chartOptions"]>({
+  responsive: true,
+  plugins: {
+    legend: {
+      position: "top",
+    },
+    title: {
+      position: "top",
+      display: true,
+      padding: 10,
+      text: "Reward for CU, SU & NU",
+    },
+  },
+});
+const data = computed(() => {
+  return {
+    labels: ["NU", "CU", "SU"],
+    datasets: [
+      {
+        data: props.chartdata || [50, 100, 30],
+        backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"],
+        hoverOffset: 4,
+      },
+    ],
+  };
+});
+</script>
+
+<script lang="ts">
+import { Chart as ChartJS, registerables } from "chart.js";
+import { computed, ref } from "vue";
+import { Doughnut } from "vue-chartjs";
+
+export default {
+  name: "PieChart",
+  components: { ChDoughnut: Doughnut },
+};
+</script>
diff --git a/packages/playground/src/components/profile_manager_controller.vue b/packages/playground/src/components/profile_manager_controller.vue
new file mode 100644
index 0000000000..224877cb9b
--- /dev/null
+++ b/packages/playground/src/components/profile_manager_controller.vue
@@ -0,0 +1,35 @@
+<template>
+  <slot></slot>
+</template>
+
+<script lang="ts">
+import { inject, provide } from "vue";
+
+import type { Profile } from "@/stores/profile_manager";
+
+export interface ManagerService {
+  loadBalance(profile?: Profile): Promise<void>;
+}
+export interface ProfileManagerControllerService {
+  set(manager: ManagerService): void;
+  reloadBalance(): Promise<void>;
+}
+const key = "profile:manager:controller";
+export function useProfileManagerController() {
+  return inject(key) as ProfileManagerControllerService;
+}
+export default {
+  name: "ProfileManagerController",
+  setup() {
+    let m: ManagerService;
+    provide(key, {
+      set(manager: ManagerService) {
+        m = manager;
+      },
+      reloadBalance() {
+        return m?.loadBalance();
+      },
+    });
+  },
+};
+</script>
diff --git a/packages/playground/src/components/select_farm.vue b/packages/playground/src/components/select_farm.vue
index d2307eec51..11a96cb1a6 100644
--- a/packages/playground/src/components/select_farm.vue
+++ b/packages/playground/src/components/select_farm.vue
@@ -2,7 +2,6 @@
   <section>
     <h6 class="text-h5 mb-4 mt-2">Choose a Location</h6>
     <SelectCountry v-model="country" />
-
     <input-validator :rules="[validators.required('Farm is required.')]" :value="farm?.farmID" ref="farmInput">
       <input-tooltip tooltip="The name of the farm that you want to deploy inside it.">
         <v-autocomplete
@@ -16,6 +15,9 @@
           :model-value="shouldBeUpdated ? undefined : farm"
           @update:model-value="farm = $event"
           :error-messages="!loading && !farms.length ? 'No farms where found with the specified resources.' : undefined"
+          v-model:search="search"
+          append-inner-icon="mdi-refresh"
+          @click:append-inner="resetSearch"
         >
           <template v-slot:append-item v-if="page !== -1">
             <div class="px-4 mt-4">
@@ -28,8 +30,6 @@
                 @click="loadFarms"
                 :loading="loading"
               >
-                <!-- @click="loadNextPage" -->
-                <!-- :loading="loading" -->
                 Load More Farms
               </v-btn>
             </div>
@@ -41,13 +41,12 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, type PropType, ref, watch } from "vue";
-
-import { useInputRef } from "@/hooks/input_validator";
+import { nextTick, onMounted, onUnmounted, type PropType, type Ref, ref, watch } from "vue";
 
+import { useInputRef } from "../hooks/input_validator";
 import { useProfileManager } from "../stores/profile_manager";
-import type { Farm } from "../types";
-import { getFarms } from "../utils/get_farms";
+import type { FarmInterface } from "../types";
+import { getFarms, getFarmsPages } from "../utils/get_farms";
 import { getGrid } from "../utils/grid";
 import { useFarmGatewayManager } from "./farm_gateway_manager.vue";
 import { useFarm } from "./select_farm_manager.vue";
@@ -64,30 +63,41 @@ export interface Filters {
 }
 const FarmGatewayManager = useFarmGatewayManager();
 const props = defineProps({
-  modelValue: { type: Object as PropType<Farm> },
+  modelValue: { type: Object as PropType<FarmInterface> },
   country: String,
   filters: { default: () => ({} as Filters), type: Object as PropType<Filters> },
   exclusiveFor: String,
   loading: Boolean,
 });
 const emits = defineEmits<{
-  (event: "update:modelValue", value?: Farm): void;
+  (event: "update:modelValue", value?: FarmInterface): void;
   (event: "update:loading", value: boolean): void;
+  (event: "update:search", value?: string): void;
 }>();
 
 const SIZE = 20;
-const page = ref(1);
-
+const page = ref();
 const farmInput = useInputRef();
 const profileManager = useProfileManager();
 const country = ref<string>();
-
-const farm = ref<Farm>();
+const search = ref<string>();
+const searchInput = ref<string>();
+const farm = ref<FarmInterface>();
 const farmManager = useFarm();
 watch([farm, country], ([f, c]) => {
   farmManager?.setFarmId(f?.farmID);
   emits("update:modelValue", f ? { farmID: f.farmID, name: f.name, country: c ?? undefined } : undefined);
 });
+
+watch(
+  search,
+  debounce(async (value, oldValue) => {
+    if (value !== oldValue && value && value?.length > 2 && oldValue != undefined && oldValue !== "") {
+      await resetPages();
+    }
+  }, 2000),
+);
+
 const loading = ref(false);
 const loadingNodes = ref(farmManager?.getLoading());
 const delay = ref();
@@ -107,40 +117,56 @@ watch(
   },
   { immediate: true },
 );
+const selectedPages = ref([]) as Ref<number[]>;
 
-const farms = ref<Farm[]>([]);
+const farms = ref<FarmInterface[]>([]);
 let initialized = false;
+const shouldBeUpdated = ref(false);
+const pagesCount = ref();
+
+function prepareFilters(filters: Filters, twinId: number): FarmFilterOptions {
+  return {
+    size: SIZE,
+    page: page.value,
+    country: country.value,
+    nodeMRU: filters.memory ? Math.round(filters.memory / 1024) : undefined,
+    nodeHRU: filters.disk,
+    nodeSRU: filters.ssd,
+    publicIp: filters.publicIp,
+    availableFor: twinId,
+    nodeCertified: filters.certified,
+    nodeRentedBy: filters.rentedBy ? filters.rentedBy : undefined,
+    nodeHasGPU: filters.hasGPU ? filters.hasGPU : undefined,
+  };
+}
+
 async function loadFarms() {
   farmInput.value?.setStatus(ValidatorStatus.Pending);
-
   loading.value = true;
   const oldFarm = farm.value;
-
   const grid = await getGrid(profileManager.profile!);
-  const filters = props.filters;
-  const _farms = await getFarms(
-    grid!,
-    {
-      size: SIZE,
-      page: page.value,
-      country: country.value,
-      nodeMRU: filters.memory ? Math.round(filters.memory / 1024) : undefined,
-      nodeHRU: filters.disk,
-      nodeSRU: filters.ssd,
-      publicIp: filters.publicIp,
-      availableFor: grid!.twinId,
-      nodeCertified: filters.certified,
-      nodeRentedBy: filters.rentedBy ? filters.rentedBy : undefined,
-      nodeHasGPU: filters.hasGPU ? filters.hasGPU : undefined,
-    },
-    { exclusiveFor: props.exclusiveFor },
-  );
-
-  if (page.value === 1) {
-    farms.value = _farms;
+  let _farms: FarmInterface[] = [];
+  if (searchInput.value && searchInput.value?.length > 0) {
+    const { data } = await gridProxyClient.farms.list({ nameContains: searchInput.value });
+    _farms = data.map((_farm: any) => {
+      return {
+        name: _farm.name,
+        farmID: _farm.farmId,
+        country: _farm.country,
+      };
+    });
   } else {
-    farms.value = farms.value.concat(_farms);
+    _farms = await getFarms(grid!, prepareFilters(props.filters, grid!.twinId), {
+      exclusiveFor: props.exclusiveFor,
+    });
+  }
+  selectedPages.value.push(page.value);
+  if (!_farms.length && selectedPages.value.length !== pagesCount.value) {
+    page.value = setRandomPage();
+    await loadFarms();
+    return;
   }
+  farms.value = farms.value.concat(_farms);
 
   if (oldFarm) {
     farm.value = undefined;
@@ -150,25 +176,44 @@ async function loadFarms() {
 
   if (!farm.value) {
     farm.value = farms.value[0];
-  }
-
-  if (!farm.value) {
     farmInput.value.setStatus(initialized ? ValidatorStatus.Invalid : ValidatorStatus.Init);
     if (!initialized) {
       initialized = true;
     }
   }
 
-  page.value = _farms.length < SIZE ? -1 : page.value + 1;
+  page.value = selectedPages.value.length === pagesCount.value ? -1 : setRandomPage();
   loading.value = false;
 }
-onMounted(loadFarms);
+
+function setRandomPage() {
+  let randPage = Math.floor(Math.random() * pagesCount.value) + 1;
+  while (selectedPages.value.includes(randPage)) randPage = Math.floor(Math.random() * pagesCount.value) + 1;
+  return randPage;
+}
+async function resetPages() {
+  farms.value = [];
+  loading.value = true;
+  farmInput.value?.setStatus(ValidatorStatus.Pending);
+  selectedPages.value = [];
+  searchInput.value = search.value;
+  const grid = await getGrid(profileManager.profile!);
+  if (!grid) {
+    console.log("can't get the grid");
+    pagesCount.value = 1;
+  } else {
+    pagesCount.value = await getFarmsPages(grid, prepareFilters(props.filters, grid.twinId), SIZE);
+  }
+  page.value = setRandomPage();
+  await loadFarms();
+}
+
+onMounted(resetPages);
 onUnmounted(() => FarmGatewayManager?.unregister());
 
-const shouldBeUpdated = ref(false);
 watch(
   () => ({ ...props.filters, country: country.value }),
-  (value, oldValue) => {
+  async (value, oldValue) => {
     if (
       value.cpu === oldValue.cpu &&
       value.memory === oldValue.memory &&
@@ -181,7 +226,6 @@ watch(
       value.hasGPU === oldValue.hasGPU
     )
       return;
-
     shouldBeUpdated.value = true;
   },
 );
@@ -191,15 +235,23 @@ watch([loading, shouldBeUpdated], async ([l, s]) => {
   shouldBeUpdated.value = false;
   clearTimeout(delay.value);
   delay.value = setTimeout(async () => {
-    page.value = 1;
-    await loadFarms();
+    await resetPages();
   }, 2000);
 });
+
+async function resetSearch() {
+  search.value = "";
+  await resetPages();
+  search.value = farm.value?.name;
+  emits("update:search", search.value ?? undefined);
+}
 </script>
 
 <script lang="ts">
-import { nextTick } from "vue";
+import type { FarmFilterOptions } from "@threefold/grid_client";
+import { debounce } from "lodash";
 
+import { gridProxyClient } from "@/clients";
 import { ValidatorStatus } from "@/hooks/form_validator";
 
 import SelectCountry from "./select_country.vue";
diff --git a/packages/playground/src/components/select_gateway_node.vue b/packages/playground/src/components/select_gateway_node.vue
index 7ea77e69f5..38b21a3fdf 100644
--- a/packages/playground/src/components/select_gateway_node.vue
+++ b/packages/playground/src/components/select_gateway_node.vue
@@ -52,13 +52,13 @@ import { ValidatorStatus } from "@/hooks/form_validator";
 
 import { useProfileManager } from "../stores";
 import type { GatewayNode } from "../types";
-import type { Farm } from "../types";
+import type { FarmInterface } from "../types";
 import { loadGatewayNodes } from "../utils/gateway";
 import { getGrid } from "../utils/grid";
 
 const props = defineProps<{
   modelValue?: GatewayNode;
-  farmData?: Farm;
+  farmData?: FarmInterface;
   customDomain?: boolean;
   availableFor?: number;
 }>();
diff --git a/packages/playground/src/components/select_node.vue b/packages/playground/src/components/select_node.vue
index ab3495a8a9..41575a388e 100644
--- a/packages/playground/src/components/select_node.vue
+++ b/packages/playground/src/components/select_node.vue
@@ -42,9 +42,19 @@
                 <v-list-item-title>
                   {{ item.raw.nodeId }}
                 </v-list-item-title>
-                <v-chip v-bind="props" :color="getChipColor(item.raw.state)" class="ml-3">
-                  {{ item.raw.state }}
-                </v-chip>
+                <div>
+                  <v-chip
+                    v-if="item.raw.certified === 'Certified'"
+                    v-bind="props"
+                    :color="getChipColor(item.raw.certified)"
+                    class="ml-3"
+                  >
+                    {{ item.raw.certified }}
+                  </v-chip>
+                  <v-chip v-bind="props" :color="getChipColor(item.raw.state)" class="ml-3">
+                    {{ item.raw.state }}
+                  </v-chip>
+                </div>
               </v-list-item-content>
             </v-list-item>
           </template>
@@ -150,7 +160,11 @@ watch(selectedCards, async () => {
     }
   }
   if (selectedNode.value && selectedCards.value) {
-    emits("update:modelValue", { nodeId: selectedNode.value.nodeId, cards: cards });
+    emits("update:modelValue", {
+      nodeId: selectedNode.value.nodeId,
+      cards: cards,
+      certified: selectedNode.value.certified,
+    });
   }
 });
 
@@ -208,9 +222,8 @@ watch([loadingNodes, shouldBeUpdated], async ([l, s]) => {
 });
 
 function getChipColor(item: any) {
-  return item === "Dedicated" ? "success" : "secondary";
+  return item === "Dedicated" ? "success" : item === "Certified" ? "primary" : "secondary";
 }
-
 async function loadNodes(farmId: number) {
   availableNodes.value = [];
   selectedNode.value = undefined;
@@ -218,9 +231,9 @@ async function loadNodes(farmId: number) {
   errorMessage.value = "";
   const filters = props.filters;
   farmManager?.setLoading(true);
-  const grid = await getGrid(profileManager.profile!);
-  if (grid) {
-    try {
+  try {
+    const grid = await getGrid(profileManager.profile!);
+    if (grid) {
       const res = await getFilteredNodes(grid, {
         farmId: farmId,
         cpu: filters.cpu,
@@ -247,6 +260,7 @@ async function loadNodes(farmId: number) {
             nodesArr.value.push({
               nodeId: node.nodeId,
               state: node.rentedByTwinId ? "Dedicated" : "Shared",
+              certified: node.certificationType,
             });
           }
         }
@@ -254,15 +268,16 @@ async function loadNodes(farmId: number) {
       } else {
         availableNodes.value = [];
       }
-    } catch (e) {
-      errorMessage.value = normalizeError(e, "Something went wrong while fetching nodes.");
-    } finally {
-      validator.value?.setStatus(ValidatorStatus.Init);
-      loadingNodes.value = false;
-      farmManager?.setLoading(false);
     }
+  } catch (e) {
+    errorMessage.value = normalizeError(e, "Something went wrong while fetching nodes.");
+  } finally {
+    validator.value?.setStatus(ValidatorStatus.Init);
+    loadingNodes.value = false;
+    farmManager?.setLoading(false);
   }
 }
+
 async function validateNodeStoragePool(validatingNode: INode | undefined) {
   if (!validatingNode) return { message: "Node id is required." };
   farmManager?.setLoading(true);
@@ -281,14 +296,22 @@ async function validateNodeStoragePool(validatingNode: INode | undefined) {
     emits("update:modelValue", {
       nodeId: validatingNode.nodeId,
       cards: cards,
+      certified: validatingNode.certified,
     });
   } catch (e) {
     availableNodes.value = availableNodes.value.filter(node => node.nodeId !== validatingNode.nodeId);
     validator.value?.setStatus(ValidatorStatus.Invalid);
     emptyResult.value = true;
-    return {
-      message: `Couldn't fit the required disks in Node ${validatingNode.nodeId} storage pools, please select another node`,
-    };
+
+    if (e?.toString().includes("Cannot fit the required SSD disk with size")) {
+      return {
+        message: `Although node ${validatingNode.nodeId} appears to have sufficient storage capacity for your workload, it lacks a single internal partition capable of accommodating it. Please select a different node.`,
+      };
+    } else {
+      return {
+        message: "Something went wrong while checking status of the node. Please check your connection and try again.",
+      };
+    }
   } finally {
     pingingNode.value = false;
     farmManager?.setLoading(false);
diff --git a/packages/playground/src/components/select_solution_flavor.vue b/packages/playground/src/components/select_solution_flavor.vue
index 10ce0b002b..b7407c9bf8 100644
--- a/packages/playground/src/components/select_solution_flavor.vue
+++ b/packages/playground/src/components/select_solution_flavor.vue
@@ -72,30 +72,30 @@ import type { solutionFlavor } from "../types";
 type Package = PropType<solutionFlavor>;
 
 const props = defineProps({
-  minimum: { type: Object as Package, default: () => ({ cpu: 1, memory: 1024 * 2, disk: 15 }) },
-  standard: { type: Object as Package, default: () => ({ cpu: 2, memory: 1024 * 2, disk: 100 }) },
-  recommended: {
+  small: { type: Object as Package, default: () => ({ cpu: 1, memory: 2, disk: 15 }) },
+  medium: { type: Object as Package, default: () => ({ cpu: 2, memory: 4, disk: 100 }) },
+  large: {
     type: Object as Package,
-    default: () => ({ cpu: 4, memory: 1024 * 4, disk: 250 }),
+    default: () => ({ cpu: 4, memory: 16, disk: 250 }),
   },
   disabled: { type: Boolean },
 });
 const emits = defineEmits<{ (event: "update:model-value", value?: solutionFlavor): void }>();
 
 const packages = computed(() => {
-  const { minimum, standard, recommended } = props;
+  const { small, medium, large } = props;
   return [
     {
-      title: `Minimum(CPU: ${minimum.cpu} vCores, Memory: ${minimum.memory} MB, SSD: ${minimum.disk} GB)`,
-      value: minimum,
+      title: `Small(CPU: ${small.cpu} vCores, Memory: ${small.memory} GB, SSD: ${small.disk} GB)`,
+      value: small,
     },
     {
-      title: `Standard(CPU: ${standard.cpu} vCores, Memory: ${standard.memory} MB, SSD: ${standard.disk} GB)`,
-      value: standard,
+      title: `Medium(CPU: ${medium.cpu} vCores, Memory: ${medium.memory} GB, SSD: ${medium.disk} GB)`,
+      value: medium,
     },
     {
-      title: `Recommended(CPU: ${recommended.cpu} vCores, Memory: ${recommended.memory} MB, SSD: ${recommended.disk} GB)`,
-      value: recommended,
+      title: `Large(CPU: ${large.cpu} vCores, Memory: ${large.memory} GB, SSD: ${large.disk} GB)`,
+      value: large,
     },
     { title: "Custom", value: "custom" },
   ];
@@ -111,7 +111,7 @@ watch(
   value => {
     if (value === "custom" || typeof value === "string") return;
     cpu.value = value.cpu;
-    memory.value = value.memory;
+    memory.value = value.memory * 1024;
     disk.value = value.disk;
   },
   { immediate: true },
diff --git a/packages/playground/src/components/simulator.vue b/packages/playground/src/components/simulator.vue
new file mode 100644
index 0000000000..73c2e6aab6
--- /dev/null
+++ b/packages/playground/src/components/simulator.vue
@@ -0,0 +1,413 @@
+<template>
+  <div class="d-flex flex-wrap space-between mt-3">
+    <v-card width="40%" class="my-3 mr-5 pa-3">
+      <v-row class="mt-1 px-4">
+        <div class="d-flex align-center">
+          <label class="label mr-2 mb-0">Basic</label>
+          <v-switch hide-details color="primary" v-model="isAdvanced" inset />
+          <span class="slider" />
+          <label class="label ml-2">Advanced</label>
+        </div>
+      </v-row>
+      <v-row>
+        <v-card-text v-if="!isAdvanced">
+          <b>Note:</b> Make sure to use base 1024 while filling in the simulator, otherwise there might be a different
+          payout.
+        </v-card-text>
+      </v-row>
+      <div class="mt-3 px-3">
+        <input-validator
+          :value="activeProfile.memory"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field label="Memory (GB)" type="number" v-model.number="activeProfile.memory" v-bind="props" />
+        </input-validator>
+
+        <input-validator
+          :value="activeProfile.cpu"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field label="vCPU (Threads)" type="number" v-model.number="activeProfile.cpu" v-bind="props" />
+        </input-validator>
+        <input-validator
+          v-if="props.chosenConfig == 'DIY'"
+          :value="activeProfile.hdd"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field label="HDD (GB)" type="number" v-model.number="activeProfile.hdd" v-bind="props" />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.ssd"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field label="SSD (GB)" type="number" v-model.number="activeProfile.ssd" v-bind="props" />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.nuRequiredPerCu"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="NU Required Per CU"
+            type="number"
+            v-model.number="activeProfile.nuRequiredPerCu"
+            v-bind="props"
+          />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.investmentCostHW"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="Hardware Cost (USD)"
+            type="number"
+            v-model.number="activeProfile.investmentCostHW"
+            v-bind="props"
+          />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.price"
+          :rules="[validators.min('Minimum TFT price allowed is 0.08 USD.', 0.08)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="Price of TFT at point of registration on blockchain (USD)"
+            type="number"
+            v-model.number="activeProfile.price"
+            v-bind="props"
+          />
+        </input-validator>
+        <input-validator
+          v-if="!isAdvanced"
+          :value="activeProfile.maximumTokenPrice"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="Maximum Token Price"
+            type="number"
+            v-model.number="activeProfile.maximumTokenPrice"
+            v-bind="props"
+          />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.powerUtilization"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="Power Utilization (Watt)"
+            type="number"
+            v-model.number="activeProfile.powerUtilization"
+            v-bind="props"
+          />
+        </input-validator>
+        <input-validator
+          :value="activeProfile.powerCost"
+          :rules="[validators.min('Value must be positive.', 0)]"
+          #="{ props }"
+        >
+          <v-text-field
+            label="Power Cost (USD)"
+            type="number"
+            v-model.number="activeProfile.powerCost"
+            v-bind="props"
+          />
+        </input-validator>
+        <v-checkbox color="title" v-model="activeProfile.publicIp" label="Public IP" />
+
+        <v-autocomplete
+          v-if="props.chosenConfig == 'Titan v2.1'"
+          label="Certified"
+          :items="[...certifications]"
+          return-object
+          item-title="name"
+          v-model="certified"
+        />
+      </div>
+    </v-card>
+
+    <v-card width="58%" class="my-3 pa-3">
+      <v-card-text>
+        <v-row class="mt-1 px-4" v-if="!isAdvanced">
+          <div class="d-flex align-center">
+            <label class="label mr-2 mb-0">Net Profit</label>
+            <v-switch hide-details color="primary" v-model="isProfit" inset />
+            <span class="slider" />
+            <label class="label ml-2">Return On Investment</label>
+          </div>
+        </v-row>
+        <v-row v-show="!isAdvanced">
+          <v-col>
+            <LineChart :xs="xs" :isProfit="isProfit" :getTotalReward="getTotalReward" :getRoi="getRoi" />
+          </v-col>
+        </v-row>
+        <v-row v-show="isAdvanced">
+          <v-col cols="6">
+            <PieChart :chartdata="chartdata" />
+          </v-col>
+          <v-col cols="6" v-if="isAdvanced">
+            <input-validator
+              :value="activeProfile.powerCost"
+              :rules="[validators.min('Value must be positive.', 0)]"
+              #="{ props }"
+            >
+              <v-text-field
+                label="Token price after 5 years (USD)"
+                type="number"
+                v-model.number="activeProfile.priceAfter5Years"
+                v-bind="props"
+              />
+            </input-validator>
+
+            <v-text-field disabled label="Return On Investment" v-model.number="ROI" />
+            <v-text-field disabled label="Net Profit" type="number" v-model.number="netProfit" />
+            <v-text-field disabled label="Gross Profit" type="number" v-model.number="grossProfit" />
+            <v-text-field disabled label="Total Costs" type="number" v-model.number="totalCosts" />
+          </v-col>
+        </v-row>
+        <v-row class="mt-3 px-3" v-if="isAdvanced">
+          <v-text-field
+            disabled
+            label="Total Monthly Farming Reward In TFT"
+            type="number"
+            v-model.number="totalFarmingRewardInTft"
+          />
+        </v-row>
+        <v-row class="mt-3 px-0">
+          <v-col cols="4">
+            <v-text-field disabled label="CU" type="number" v-model.number="cu" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="SU" type="number" v-model.number="su" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="NU" type="number" v-model.number="nu" />
+          </v-col>
+        </v-row>
+
+        <v-row class="mt-3 px-0">
+          <v-col cols="4">
+            <v-text-field disabled label="USD reward per CU" type="number" v-model.number="rewardPerCu" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="USD reward per SU" type="number" v-model.number="rewardPerSu" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="USD reward per NU" type="number" v-model.number="rewardPerNu" />
+          </v-col>
+        </v-row>
+
+        <v-row class="mt-3 px-0" v-if="isAdvanced">
+          <v-col cols="4">
+            <v-text-field disabled label="TFT Reward Per CU" type="number" v-model.number="tftRewardPerCu" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="TFT Reward Per SU" type="number" v-model.number="tftRewardPerSu" />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field disabled label="TFT Reward Per NU" type="number" v-model.number="tftRewardPerNu" />
+          </v-col>
+        </v-row>
+
+        <v-row class="mt-3 px-0" v-if="isAdvanced">
+          <v-col cols="4">
+            <v-text-field
+              disabled
+              label="CU Farming Reward In TFT"
+              type="number"
+              v-model.number="cuFarmingRewardInTft"
+            />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field
+              disabled
+              label="SU Farming Reward In TFT"
+              type="number"
+              v-model.number="suFarmingRewardInTft"
+            />
+          </v-col>
+          <v-col cols="4">
+            <v-text-field
+              disabled
+              label="NU Farming Reward In TFT"
+              type="number"
+              v-model.number="nuFarmingRewardInTft"
+            />
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from "vue";
+
+import { Certification, type FarmingProfileOptions, ProfileTypes } from "@/types/index";
+
+import LineChart from "./line_chart.vue";
+import PieChart from "./pie_chart.vue";
+
+const props = defineProps<{
+  chosenConfig: string;
+  profile: FarmingProfileOptions;
+}>();
+
+const certifications = ["No Certification", "Certified Node"];
+const certified = ref();
+
+const isAdvanced = ref(false);
+const isProfit = ref(false);
+const xs = ref<number[]>([]);
+const activeProfile = ref(props.profile);
+
+const chartdata = ref();
+const rewardPerCu = ref(2.4);
+const rewardPerSu = ref(1);
+const rewardPerNu = ref(0.03);
+
+const _max = (val: number, max = 0): number => {
+  val = val ?? 0;
+  return Math.max(val, max);
+};
+
+const cu = computed(() => {
+  const x = (activeProfile.value.memory - 1) / 4;
+  const y = activeProfile.value.cpu * 2;
+  const z = activeProfile.value.ssd / 50;
+  return _max(Math.min(x, y, z));
+});
+
+const nu = computed(() => _max(cu.value * activeProfile.value.nuRequiredPerCu));
+
+const su = computed(() => {
+  const x = activeProfile.value.hdd / 1200;
+  const y = activeProfile.value.ssd * 0.8;
+  return x + y / 200;
+});
+
+const averageTokenPrice = computed(() => (activeProfile.value.price + activeProfile.value.priceAfter5Years) / 2);
+
+const tftRewardPer = computed(() => (activeProfile.value.certified ? 1 : 0) * 0.25 + 1);
+
+const tftRewardPerCu = computed(() => {
+  if (activeProfile.value.price < 0.08) return NaN;
+  return (rewardPerCu.value / activeProfile.value.price) * tftRewardPer.value;
+});
+
+const tftRewardPerSu = computed(() => {
+  if (activeProfile.value.price < 0.08) return NaN;
+  return (rewardPerSu.value / activeProfile.value.price) * tftRewardPer.value;
+});
+
+const tftRewardPerNu = computed(() => rewardPerNu.value / averageTokenPrice.value);
+
+const cuFarmingRewardInTft = computed(() => tftRewardPerCu.value * cu.value);
+const suFarmingRewardInTft = computed(() => tftRewardPerSu.value * su.value);
+
+const nuFarmingRewardInTft = computed(() => (activeProfile.value.publicIp ? tftRewardPerNu.value * nu.value : 0));
+
+const totalFarmingRewardInTft = computed(
+  () => cuFarmingRewardInTft.value + suFarmingRewardInTft.value + nuFarmingRewardInTft.value,
+);
+const getTotalReward = (currentPrice: number): number => {
+  const tft = totalFarmingRewardInTft.value * 60;
+  const grossProfit = tft * currentPrice;
+  return grossProfit - totalCosts.value;
+};
+
+const getRoi = (price: number = activeProfile.value.priceAfter5Years): number => {
+  const tft = totalFarmingRewardInTft.value * 60;
+  const usd = tft * price;
+  const powerCostOver5Years = activeProfile.value.powerUtilization * 24 * 0.365 * 5 * activeProfile.value.powerCost;
+  const roiX = usd - (activeProfile.value.investmentCostHW + powerCostOver5Years);
+  const roiY = activeProfile.value.investmentCostHW + powerCostOver5Years;
+  const roi = roiX / roiY;
+  return roi * 100;
+};
+
+const ROI = computed(() => getRoi().toFixed(0) + "%");
+
+const grossProfit = computed(() => {
+  const tft = totalFarmingRewardInTft.value * 60;
+  return tft * activeProfile.value.priceAfter5Years;
+});
+
+const totalCosts = computed(() => {
+  if (activeProfile.value.price < 0.08) return NaN;
+  const powerCostOver5Years = activeProfile.value.powerUtilization * 24 * 0.365 * 5 * activeProfile.value.powerCost;
+  return powerCostOver5Years + activeProfile.value.investmentCostHW;
+});
+
+const netProfit = computed(() => grossProfit.value - totalCosts.value);
+
+watch([activeProfile.value, isProfit, isAdvanced, certified], () => {
+  console.log("ROI", ROI.value);
+  if (certified.value == "Certified Node") {
+    activeProfile.value.certified = Certification.CERTIFIED;
+  } else {
+    activeProfile.value.certified = Certification.NONE;
+  }
+
+  updatePieChart();
+  updateLineChart();
+});
+
+onMounted(() => {
+  updateLineChart();
+  updatePieChart();
+});
+
+const updateLineChart = () => {
+  const price = activeProfile.value
+    ? isProfit.value
+      ? activeProfile.value.priceAfter5Years
+      : activeProfile.value.maximumTokenPrice
+    : 0;
+
+  if (activeProfile.value) {
+    const X = (price - 0.01) / 19;
+    xs.value = [...Array.from({ length: 10 }).map((_, i) => 0.01 + X * i)];
+  }
+};
+function updatePieChart() {
+  chartdata.value = [nuFarmingRewardInTft.value, cuFarmingRewardInTft.value, suFarmingRewardInTft.value];
+}
+</script>
+
+<script lang="ts">
+export function createFarmingProfile(options: Partial<FarmingProfileOptions> = {}): FarmingProfileOptions {
+  return {
+    type: options.type || ProfileTypes.DIY,
+    name: options.name || "DIY",
+    memory: options.memory || 0,
+    cpu: options.cpu || 0,
+    hdd: options.hdd || 0,
+    ssd: options.ssd || 0,
+    price: options.price || 0.09,
+    priceAfter5Years: options.priceAfter5Years || 1,
+    maximumTokenPrice: options.maximumTokenPrice || 2,
+    powerUtilization: options.powerUtilization || 40,
+    powerCost: options.powerCost || 0.15,
+    certified: options.certified || Certification.NONE,
+    publicIp: options.publicIp || false,
+    investmentCostHW: options.investmentCostHW || 2200,
+    nuRequiredPerCu: options.nuRequiredPerCu || 30,
+  };
+}
+export default {
+  name: "SimulatorFarming",
+};
+</script>
+
+<style>
+.label {
+  font-size: 0.875rem;
+}
+</style>
diff --git a/packages/playground/src/components/statistics_card.vue b/packages/playground/src/components/statistics_card.vue
new file mode 100644
index 0000000000..8bcb75cd0b
--- /dev/null
+++ b/packages/playground/src/components/statistics_card.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="my-2 mx-2 text-center">
+    <v-card color="primary" class="py-2">
+      <div class="d-flex align-center justify-center items-center font-weight-medium">
+        <v-icon class="mr-2" size="small">{{ item.icon }} </v-icon>
+        <span>
+          {{ item.title }}
+        </span>
+      </div>
+
+      <v-divider class="mt-1 text-red-700" />
+
+      <v-card-text class="card-body"> {{ item.data }} </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { IStatistics as IStatistics } from "../types";
+
+defineProps<{
+  item: IStatistics;
+}>();
+</script>
+<script lang="ts">
+export default {
+  name: "StatisticsCard",
+};
+</script>
+
+<style>
+.card-body {
+  font-size: 0.875rem !important;
+}
+.v-card-text {
+  padding: 0.6em;
+}
+.v-divider {
+  opacity: 0.5;
+}
+</style>
diff --git a/packages/playground/src/components/swap_price.vue b/packages/playground/src/components/swap_price.vue
new file mode 100644
index 0000000000..4d67faef8f
--- /dev/null
+++ b/packages/playground/src/components/swap_price.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="d-flex w-auto">
+    <div v-if="!loading" class="d-flex" style="align-items: center">
+      <p>{{ prices[0].amount }} {{ prices[0].currency }}</p>
+      <v-tooltip>
+        <template v-slot:activator="{ isActive, props }">
+          <v-btn @click="priceSwap" icon v-bind="props" v-on="isActive" class="d-flex align-center">
+            <v-icon>mdi-swap-horizontal</v-icon>
+          </v-btn>
+        </template>
+        <span>TFT Exchange Rate</span>
+      </v-tooltip>
+      <p>{{ prices[1].amount }} {{ prices[1].currency }}</p>
+      <v-tooltip>
+        <template v-slot:activator="{ isActive, props }">
+          <v-btn @click="openInfoLink" icon v-bind="props" v-on="isActive" class="d-flex align-center">
+            <v-icon>mdi-information</v-icon>
+          </v-btn>
+        </template>
+        <span>More information</span>
+      </v-tooltip>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { QueryClient } from "@threefold/tfchain_client";
+import { onMounted, ref } from "vue";
+
+type SwapPrice = {
+  currency: string;
+  amount: number;
+};
+
+const loading = ref<boolean>(false);
+const swapped = ref(false);
+const prices = ref<SwapPrice[]>([
+  {
+    currency: "TFT",
+    amount: 1,
+  },
+  {
+    currency: "USD",
+    amount: 1,
+  },
+]);
+
+onMounted(async () => {
+  loading.value = true;
+  prices.value[1].amount = (await getTFTPrice()) ?? 1;
+  loading.value = false;
+});
+
+async function getTFTPrice(): Promise<number> {
+  try {
+    const client = new QueryClient(window.env.SUBSTRATE_URL);
+    const res = await client.tftPrice.get();
+    return res / 1000;
+  } catch (e) {
+    console.log(e);
+    return 0;
+  }
+}
+
+async function priceSwap() {
+  swapped.value = !swapped.value;
+  if (swapped.value) {
+    prices.value = [
+      {
+        currency: "USD",
+        amount: 1,
+      },
+      { currency: "TFT", amount: Math.floor((1 / (await getTFTPrice())) * 1000) / 1000 },
+    ];
+  } else {
+    prices.value = [
+      { currency: "TFT", amount: 1 },
+      { currency: "USD", amount: await getTFTPrice() },
+    ];
+  }
+}
+
+function openInfoLink() {
+  window.open(
+    "https://stellar.expert/explorer/public/asset/TFT-GBOVQKJYHXRR3DX6NOX2RRYFRCUMSADGDESTDNBDS6CDVLGVESRTAC47-1?asset[]=TFT-GBOVQKJYHXRR3DX6NOX2RRYFRCUMSADGDESTDNBDS6CDVLGVESRTAC47-1&filter=markets&market=USDC-GA5ZSEJYB37JRC5AVCIA5MOP4RHTM335X2KGX3IHOJAPP5RE34K4KZVN-1",
+    "_blank",
+  );
+}
+</script>
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index 0c3b7b089a..088740e7a9 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -38,39 +38,40 @@
       @update:model-value="$emit('update:model-value', $event)"
       :no-data-text="`No ${projectName} deployments found on this account.`"
       @click:row="$attrs['onClick:row']"
+      :sort-by="sortBy"
     >
       <template #[`item.name`]="{ item }">
-        {{ item.value[0].name }}
+        {{ item.value.name }}
       </template>
 
       <template #[`item.ipv4`]="{ item }">
-        {{ item.value[0].publicIP?.ip?.split("/")?.[0] || item.value[0].publicIP?.ip || "-" }}
+        {{ item.value.publicIP?.ip?.split("/")?.[0] || item.value.publicIP?.ip || "-" }}
       </template>
 
       <template #[`item.ipv6`]="{ item }">
-        {{ item.value[0].publicIP?.ip6 || "-" }}
+        {{ item.value.publicIP?.ip6 || "-" }}
       </template>
 
       <template #[`item.planetary`]="{ item }">
-        {{ item.value[0].planetary || "-" }}
+        {{ item.value.planetary || "-" }}
       </template>
 
       <template #[`item.wireguard`]="{ item }">
-        {{ item.value[0].interfaces[0].ip || "-" }}
+        {{ item.value.interfaces.ip || "-" }}
       </template>
 
       <template #[`item.flist`]="{ item }">
-        <v-tooltip :text="item.value[0].flist" location="bottom right">
+        <v-tooltip :text="item.value.flist" location="bottom right">
           <template #activator="{ props }">
             <p v-bind="props">
-              {{ item.value[0].flist.replace("https://hub.grid.tf/", "").replace(".flist", "") }}
+              {{ item.value.flist.replace("https://hub.grid.tf/", "").replace(".flist", "") }}
             </p>
           </template>
         </v-tooltip>
       </template>
 
       <template #[`item.billing`]="{ item }">
-        {{ item.value[0].billing }}
+        {{ item.value.billing }}
       </template>
       <template #[`item.actions`]="{ item }">
         <v-chip color="error" variant="tonal" v-if="deleting && ($props.modelValue || []).includes(item.value)">
@@ -114,6 +115,7 @@ const failedDeployments = ref<
 >([]);
 
 onMounted(loadDeployments);
+
 async function loadDeployments() {
   const migrateGateways = props.projectName.toLowerCase() !== "fullvm" && props.projectName.toLowerCase() !== "vm";
 
@@ -151,7 +153,7 @@ async function loadDeployments() {
   ];
 
   count.value = vms.count;
-  items.value = vms.items;
+  items.value = vms.items.flat(1);
 
   loading.value = false;
 }
@@ -160,13 +162,13 @@ const filteredHeaders = computed(() => {
   let headers = [
     { title: "PLACEHOLDER", key: "data-table-select" },
     { title: "Name", key: "name" },
-    { title: "Public IPv4", key: "ipv4" },
-    { title: "Public IPv6", key: "ipv6" },
-    { title: "Planetary Network IP", key: "planetary" },
-    { title: "WireGuard", key: "wireguard" },
+    { title: "Public IPv4", key: "ipv4", sortable: false },
+    { title: "Public IPv6", key: "ipv6", sortable: false },
+    { title: "Planetary Network IP", key: "planetary", sortable: false },
+    { title: "WireGuard", key: "wireguard", sortable: false },
     { title: "Flist", key: "flist" },
     { title: "Cost", key: "billing" },
-    { title: "Actions", key: "actions" },
+    { title: "Actions", key: "actions", sortable: false },
   ];
 
   const IPV6Solutions = [ProjectName.VM, ProjectName.Fullvm] as string[];
@@ -247,6 +249,15 @@ export default {
   components: {
     ListTable,
   },
+  data() {
+    return {
+      sortBy: [
+        { key: "name", order: "asc" },
+        { key: "flist", order: "asc" },
+        { key: "billing", order: "asc" },
+      ],
+    };
+  },
 };
 </script>
 
diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index d07bf482bb..fbe2eb5373 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -20,9 +20,6 @@
         <slot name="header-actions" :hasProfile="!!profileManager.profile" />
       </div>
     </section>
-
-    <v-divider :class="{ 'mb-2': true, 'mt-5': !!$slots.subtitle, 'mt-2': !$slots.subtitle }" />
-
     <v-card-text>
       <slot v-if="disableAlerts" />
       <template v-else>
@@ -40,8 +37,8 @@
 
     <template v-if="dedicated && !status">
       <v-alert class="mb-4 mx-4" type="info" variant="tonal">
-        You need to rent a dedicated node from our
-        <a :href="dashboardURL" target="_blank" class="app-link"> Dashboard </a>
+        You need to rent a node from the
+        <router-link to="/dashboard/dedicated-nodes" class="app-link">Dedicated Nodes page</router-link>
         before deploying on it.
       </v-alert>
     </template>
@@ -82,6 +79,9 @@
           approximately
           <span class="font-weight-black">{{ costLoading ? "Calculating..." : normalizeBalance(usd) }}</span> USD per
           month.
+          <div v-if="certificationType === 'Certified'">
+            You selected a certified node. Please note that this deployment costs more TFT.
+          </div>
         </div>
 
         <a href="https://manual.grid.tf/cloud/cloudunits_pricing.html" target="_blank" class="app-link">
@@ -112,6 +112,7 @@ import debounce from "lodash/debounce.js";
 import { computed, ref, watch } from "vue";
 
 import { useProfileManager } from "../stores";
+import type { INode } from "../utils/filter_nodes";
 import { getGrid, loadBalance } from "../utils/grid";
 import { getDashboardURL, normalizeBalance } from "../utils/helpers";
 
@@ -152,6 +153,10 @@ const props = defineProps({
     required: false,
     default: () => false,
   },
+  SelectedNode: {
+    type: Object as () => INode,
+    required: false,
+  },
 });
 const emits = defineEmits<{ (event: "mount"): void; (event: "back"): void }>();
 const baseUrl = import.meta.env.BASE_URL;
@@ -159,6 +164,7 @@ const profileManager = useProfileManager();
 
 const status = ref<WebletStatus>();
 const message = ref<string>();
+const certificationType = ref<string>();
 function onLogMessage(msg: string) {
   if (typeof msg === "string") {
     message.value = msg;
@@ -252,8 +258,11 @@ const onlyIPV4TftPrice = ref<number>();
 const onlyIPV4UsdPrice = ref<number>();
 
 watch(
-  () => [props.cpu, props.memory, props.disk, props.ipv4, props.certified, props.dedicated],
+  () => [props.cpu, props.memory, props.disk, props.ipv4, props.certified, props.dedicated, props.SelectedNode],
   debounce((value, oldValue) => {
+    if (value[6]) {
+      certificationType.value = value[6].certified;
+    }
     if (
       oldValue &&
       value[0] === oldValue[0] &&
@@ -261,7 +270,8 @@ watch(
       value[2] === oldValue[2] &&
       value[3] === oldValue[3] &&
       value[4] === oldValue[4] &&
-      value[5] === oldValue[5]
+      value[5] === oldValue[5] &&
+      value[6] === oldValue[6]
     )
       return;
     shouldUpdateCost.value = true;
@@ -300,7 +310,7 @@ async function loadCost(profile: { mnemonic: string }) {
     mru: typeof props.disk === "number" ? (props.memory ?? 0) / 1024 : 0,
     hru: 0,
     ipv4u: props.ipv4,
-    certified: props.certified,
+    certified: !props.certified && props.SelectedNode?.certified === "Certified" ? true : props.certified,
   });
   await getIPv1Price(grid!);
   usd.value = props.dedicated ? dedicatedPrice : sharedPrice;
diff --git a/packages/playground/src/config.ts b/packages/playground/src/config.ts
index 165b32b1e3..2386dd0ff0 100644
--- a/packages/playground/src/config.ts
+++ b/packages/playground/src/config.ts
@@ -3,6 +3,7 @@ import type { App, Component } from "vue";
 
 import CopyInputWrapper from "./components/copy_input_wrapper.vue";
 import DTabs from "./components/dynamic_tabs.vue";
+import Filters from "./components/filter.vue";
 import FormValidator from "./components/form_validator.vue";
 import InputTooltip from "./components/input_tooltip.vue";
 import InputValidator from "./components/input_validator.vue";
@@ -20,6 +21,7 @@ const GLOBAL_COMPONENTS: { [key: string]: Component } = {
   FormValidator,
   ViewLayout,
   InputTooltip,
+  Filters,
 };
 
 export function defineGlobals(app: App<Element>): void {
diff --git a/packages/playground/src/dashboard/bridge_view.vue b/packages/playground/src/dashboard/bridge_view.vue
new file mode 100644
index 0000000000..a0469c652c
--- /dev/null
+++ b/packages/playground/src/dashboard/bridge_view.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="border px-4 pb-4 rounded position-relative mt-2">
+    <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-swap-horizontal</v-icon>
+      <v-card-title class="pa-0">Transfer TFT Across Chains</v-card-title>
+    </v-card>
+    <v-card class="pa-5 white--text">
+      <v-row class="pa-5 text-center">
+        <v-col cols="12">
+          <v-select
+            :items="items"
+            label="Please select a chain:"
+            item-title="name"
+            item-value="id"
+            v-model="selectedItem"
+          ></v-select>
+        </v-col>
+      </v-row>
+      <v-row class="pa-4 px-8">
+        <v-btn color="primary" class="mr-2" @click="openDepositDialog = true">Deposit</v-btn>
+        <v-btn variant="outlined" color="secondary" class="mr-2" @click="openWithdrawDialog = true">Withdraw</v-btn>
+        <v-btn color="blue" class="ml-auto" @click="navigation">Learn How?</v-btn>
+      </v-row>
+    </v-card>
+  </div>
+
+  <!-- Deposit Dialog -->
+  <deposit-dialog
+    v-if="openDepositDialog"
+    :selectedName="selectedName"
+    :depositWallet="depositWallet"
+    :qrCodeText="qrCodeText"
+    :depositFee="depositFee"
+    :openDepositDialog="openDepositDialog"
+    :twinId="profileManager.profile?.twinId"
+    @close="openDepositDialog = false"
+  ></deposit-dialog>
+
+  <!-- Withdraw Dialog -->
+  <v-container v-if="openWithdrawDialog">
+    <v-dialog transition="dialog-bottom-transition" max-width="1000" v-model="openWithdrawDialog">
+      <v-card>
+        <v-toolbar color="primary" dark class="bold-text justify-center"> Withdraw TFT </v-toolbar>
+        <v-card-text>
+          Interact with the bridge in order to withdraw your TFT to
+          {{ selectedName.charAt(0).toUpperCase() + selectedName.slice(1) }} (withdraw fee is: {{ withdrawFee }} TFT)
+        </v-card-text>
+        <v-card-text>
+          <v-form v-model="isValidSwap">
+            <v-text-field
+              v-model="target"
+              :label="selectedName.charAt(0).toUpperCase() + selectedName.slice(1) + ' Target Wallet Address'"
+              :error-messages="targetError"
+              :disabled="validatingAddress"
+              :loading="validatingAddress"
+              :rules="[() => !!target || 'This field is required', swapAddressCheck]"
+            >
+            </v-text-field>
+            <v-text-field
+              @paste.prevent
+              label="Amount (TFT)"
+              v-model="amount"
+              type="number"
+              onkeydown="javascript: return event.keyCode == 69 || /^\+$/.test(event.key) ? false : true"
+              :rules="[
+                () => !!amount || 'This field is required',
+                () =>
+                  (amount.toString().split('.').length > 1 ? amount.toString().split('.')[1].length <= 3 : true) ||
+                  'Amount must have 3 decimals only',
+                () => amount >= 2 || 'Amount should be at least 2 TFT',
+                () => amount < freeBalance || 'Amount cannot exceed balance',
+              ]"
+            >
+            </v-text-field>
+          </v-form>
+        </v-card-text>
+        <v-card-actions class="justify-end pb-4 px-6">
+          <v-btn
+            class="white--text"
+            @click="withdrawTFT(target, amount)"
+            :disabled="!isValidSwap || validatingAddress"
+            :loading="loadingWithdraw"
+            >Send</v-btn
+          >
+          <v-btn variant="outlined" color="anchor" class="bold-text" @click="openWithdrawDialog = false"> Close </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+import { default as StellarSdk, StrKey } from "stellar-sdk";
+import { onMounted, ref } from "vue";
+
+import { useProfileManagerController } from "../components/profile_manager_controller.vue";
+import { useProfileManager } from "../stores";
+import { createCustomToast, ToastType } from "../utils/custom_toast";
+import { getGrid, loadBalance } from "../utils/grid";
+
+const profileManager = useProfileManager();
+const items = ref([{ id: 1, name: "stellar" }]);
+const selectedItem = ref(items.value[0]);
+const openDepositDialog = ref(false);
+const openWithdrawDialog = ref(false);
+const selectedName = ref("");
+const withdrawFee = ref(0);
+const isValidSwap = ref(false);
+const target = ref("");
+const targetError = ref("");
+const validatingAddress = ref(false);
+const server = new StellarSdk.Server(window.env.STELLAR_HORIZON_URL);
+const amount = ref(2);
+const freeBalance = ref(0);
+const loadingWithdraw = ref(false);
+const depositWallet = ref("");
+const qrCodeText = ref("");
+const depositFee = ref(0);
+const ProfileManagerController = useProfileManagerController();
+
+onMounted(async () => {
+  selectedName.value = items.value.filter(item => item.id === selectedItem.value.id)[0].name;
+  depositWallet.value = window.env.BRIDGE_TFT_ADDRESS;
+  qrCodeText.value = `TFT:${depositWallet.value}?message=twin_${profileManager.profile?.twinId}&sender=me`;
+  try {
+    const grid = await getGrid(profileManager.profile!);
+    if (grid) {
+      const WithdrawFee = await grid.bridge.getWithdrawFee();
+      withdrawFee.value = WithdrawFee;
+
+      const DepositFee = await grid.bridge.getDepositFee();
+      depositFee.value = DepositFee;
+
+      const balance = await loadBalance(grid);
+      freeBalance.value = balance.free;
+    }
+  } catch (e) {
+    console.log(e);
+  }
+});
+
+function navigation() {
+  window.open(
+    "https://manual.grid.tf/threefold_token/tft_bridges/tfchain_stellar_bridge.html#how-to-use-the-tfchain-stellar-bridge",
+    "_blank",
+  );
+}
+
+function swapAddressCheck() {
+  targetError.value = "";
+  if (!target.value) return true;
+  const isValid = StrKey.isValidEd25519PublicKey(target.value);
+  const blockedAddresses = [
+    "GBNOTAYUMXVO5QDYWYO2SOCOYIJ3XFIP65GKOQN7H65ZZSO6BK4SLWSC",
+    "GA2CWNBUHX7NZ3B5GR4I23FMU7VY5RPA77IUJTIXTTTGKYSKDSV6LUA4",
+  ];
+  if (blockedAddresses.includes(target.value)) {
+    targetError.value = "Blocked Address";
+    return false;
+  }
+  if (!isValid || target.value.match(/\W/)) {
+    targetError.value = "invalid address";
+    return false;
+  }
+  targetError.value = "";
+  validatingAddress.value = true;
+  isValidSwap.value = false;
+  if (selectedName.value == "stellar") validateAddress();
+  return true;
+}
+
+async function validateAddress() {
+  try {
+    // check if the account provided exists on stellar
+    const account = await server.loadAccount(target.value);
+    // check if the account provided has the appropriate trustlines
+    const includes = account.balances.find(
+      (b: { asset_code: string; asset_issuer: string }) =>
+        b.asset_code === "TFT" && b.asset_issuer === window.env.TFT_ASSET_ISSUER,
+    );
+    if (!includes) throw new Error("invalid trustline");
+  } catch (e) {
+    targetError.value =
+      (e as Error).message === "invalid trustline"
+        ? "Address does not have a valid trustline to TFT"
+        : "Address not found";
+    validatingAddress.value = false;
+    isValidSwap.value = false;
+    return;
+  }
+
+  validatingAddress.value = false;
+  return;
+}
+
+async function withdrawTFT(targetAddress: string, withdrawAmount: number) {
+  loadingWithdraw.value = true;
+  try {
+    const grid = await getGrid(profileManager.profile!);
+    await grid?.bridge.swapToStellar({ amount: +withdrawAmount, target: targetAddress });
+
+    openWithdrawDialog.value = false;
+    target.value = "";
+    amount.value = 2;
+    loadingWithdraw.value = false;
+    await ProfileManagerController.reloadBalance();
+    createCustomToast("Transaction Succeeded", ToastType.success);
+  } catch (e) {
+    console.log("Error withdrawing, Error: ", e);
+    openWithdrawDialog.value = false;
+    target.value = "";
+    amount.value = 2;
+    loadingWithdraw.value = false;
+    createCustomToast("Withdraw Failed!", ToastType.danger);
+  }
+}
+</script>
+
+<script lang="ts">
+import DepositDialog from "@/components/deposit_dialog.vue";
+
+export default {
+  name: "Bridge",
+  components: {
+    DepositDialog,
+  },
+};
+</script>
+
+<style>
+.custom-container {
+  width: 80%;
+}
+
+.bold-text {
+  font-weight: 500;
+  padding-left: 1rem;
+}
+</style>
diff --git a/packages/playground/src/dashboard/components/NodeMintingDetails.vue b/packages/playground/src/dashboard/components/NodeMintingDetails.vue
new file mode 100644
index 0000000000..7db8921b0f
--- /dev/null
+++ b/packages/playground/src/dashboard/components/NodeMintingDetails.vue
@@ -0,0 +1,143 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="3">
+        <v-menu ref="menu" v-model="showMenu" :close-on-content-click="false" transition="scale-transition">
+          <template v-slot:activator="{ props }">
+            <v-text-field v-bind="props" label="Select Month and Year" readonly :model-value="selectedData" />
+          </template>
+
+          <v-card>
+            <v-card-text class="d-flex">
+              <v-select v-model="selectedMonth" :items="months" label="Month"></v-select>
+
+              <v-select v-model="selectedYear" :items="years" label="Year"></v-select>
+            </v-card-text>
+          </v-card>
+        </v-menu>
+      </v-col>
+      <v-col cols="9">
+        <v-card outlined>
+          <v-card-title>
+            <span class="headline">Minting Details</span>
+          </v-card-title>
+          <div class="receipt-body" v-if="receipts?.length">
+            <v-card outlined v-for="receipt in receipts" :key="receipt.hash">
+              <v-container>
+                <v-row>
+                  <v-col cols="10">
+                    <v-card-text>
+                      <span class="font-weight-bold">Date of Payout :</span>
+                      {{ getDateFromTimestamp(receipt.endPeriodTimestamp) }}
+                      <br />
+                      <span class="font-weight-bold">Node TFT Amount :</span> {{ receipt.tft || 0 }} TFT
+                      <span v-if="receipt.fixupReward">+ {{ receipt.fixupReward || 0 }} TFT FixedUp</span>
+                      <br />
+                      <span class="font-weight-bold">Cloud Units :</span>
+                      <ul>
+                        <li inset v-for="(val, key) in receipt.cloud_units" :key="key">
+                          <b style="text-transform: uppercase">{{ key }}:</b> {{ val }}
+                        </li>
+                      </ul>
+                    </v-card-text>
+                  </v-col>
+                  <v-col cols="2">
+                    <v-chip class="ma-4 me-auto" small :color="getChipColor(receipt.type)">{{ receipt.type }} </v-chip>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card>
+          </div>
+          <div v-else>
+            <v-card-text class="font-weight-bold">No receipts found for this month</v-card-text>
+          </div>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="blue" @click="downloadNodeReceipt" :disabled="!node.receipts">Download Node Receipt</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { jsPDF } from "jspdf";
+import moment from "moment";
+import { computed, type PropType, ref } from "vue";
+
+import { generateReceipt, type NodeInterface, type receiptInterface } from "@/utils/node";
+
+export default {
+  name: "NodeMintingDetails",
+  props: {
+    node: {
+      type: Object as PropType<NodeInterface>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const showMenu = ref(false);
+    const menu = ref(false);
+    const minDate = ref();
+    const maxDate = ref();
+    const selectedMonth = ref(moment().format("MMMM"));
+    const selectedYear = ref(+moment().format("YYYY"));
+    const receipts = computed(() => {
+      return filterReceiptsByMonth(
+        props.node.receipts,
+        selectedYear.value,
+        moment.months().indexOf(selectedMonth.value),
+      );
+    });
+    const years = Array.from({ length: 10 }, (_, index) => new Date().getFullYear() - 5 + index);
+    const months = ref(moment.months());
+    const selectedData = computed(() => [selectedMonth.value, selectedYear.value].filter(Boolean).join(", "));
+
+    async function downloadNodeReceipt() {
+      let doc = new jsPDF();
+      doc = await generateReceipt(doc, props.node);
+      doc.save(`node_${props.node.nodeId}_receipts.pdf`);
+    }
+
+    function getChipColor(type: string) {
+      switch (type) {
+        case "MINTING":
+          return "primary";
+        case "FIXUP":
+          return "red";
+        default:
+          return "grey";
+      }
+    }
+
+    function getDateFromTimestamp(timestamp: number) {
+      return new Date(timestamp * 1000);
+    }
+
+    function filterReceiptsByMonth(receipts: receiptInterface[], year: number, month: number): receiptInterface[] {
+      const filteredReceipts = receipts.filter(receipt => {
+        const date = moment(receipt.endPeriodTimestamp * 1000);
+        return date.month() === month && date.year() === year;
+      });
+
+      return filteredReceipts;
+    }
+    return {
+      showMenu,
+      minDate,
+      maxDate,
+      receipts,
+      years,
+      months,
+      selectedMonth,
+      selectedYear,
+      menu,
+      selectedData,
+      getDateFromTimestamp,
+      downloadNodeReceipt,
+      getChipColor,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/dashboard/components/add_ip.vue b/packages/playground/src/dashboard/components/add_ip.vue
new file mode 100644
index 0000000000..4486fdfbc6
--- /dev/null
+++ b/packages/playground/src/dashboard/components/add_ip.vue
@@ -0,0 +1,299 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-btn color="blue" class="ml-auto bold-text" @click="showDialogue = true" :loading="loading">Add IP</v-btn>
+    </v-row>
+
+    <v-container v-if="showDialogue">
+      <v-dialog v-model="showDialogue" max-width="600">
+        <v-card>
+          <v-toolbar color="primary" class="custom-toolbar">
+            <p class="mb-5">Add Public IP to Farm</p>
+          </v-toolbar>
+          <div class="pa-6">
+            <form-validator v-model="valid">
+              <v-select
+                :items="items"
+                label="Choose how to enter IP"
+                v-model="selectedItem"
+                @update:model-value="$emit('update:type', $event)"
+              ></v-select>
+              <input-validator
+                :value="$props.publicIP"
+                :rules="[validators.required('IP is required.'), validators.isIPRange('Not a valid IP'), ipcheck]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="IP address in CIDR format xxx.xxx.xxx.xxx/xx">
+                  <v-text-field
+                    :model-value="$props.publicIP"
+                    v-bind:="props"
+                    @update:model-value="$emit('update:publicIP', $event)"
+                    outlined
+                    :label="type === IPType.single ? 'IP' : 'From IP'"
+                  ></v-text-field>
+                </input-tooltip>
+              </input-validator>
+              <input-validator
+                v-if="type === IPType.range"
+                :value="$props.toPublicIP"
+                :rules="[validators.required('IP is required.'), validators.isIPRange('Not a valid IP'), toIpCheck]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="IP address in CIDR format xxx.xxx.xxx.xxx/xx">
+                  <v-text-field
+                    :model-value="$props.toPublicIP"
+                    v-bind:="props"
+                    @update:model-value="$emit('update:toPublicIP', $event)"
+                    outlined
+                    label="To IP"
+                  ></v-text-field>
+                </input-tooltip>
+              </input-validator>
+              <input-validator
+                :value="$props.gateway"
+                :rules="[
+                  validators.required('Gateway is required.'),
+                  validators.isIP('Gateway is not valid.'),
+                  gatewayCheck,
+                ]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="Gateway for the IP in ipv4 format">
+                  <v-text-field
+                    :model-value="$props.gateway"
+                    v-bind:="props"
+                    @update:model-value="$emit('update:gateway', $event)"
+                    outlined
+                    label="Gateway"
+                  ></v-text-field>
+                </input-tooltip>
+              </input-validator>
+            </form-validator>
+          </div>
+          <v-dialog v-model="showIPs" max-width="500">
+            <v-card>
+              <v-card-title class="text-h5">IPs range</v-card-title>
+              <v-card-text v-for="(IP, i) in IPs" :key="IP">{{ i + 1 }}- {{ IP }}</v-card-text>
+              <v-card-actions> </v-card-actions>
+            </v-card>
+          </v-dialog>
+
+          <v-card-actions class="justify-end pa-5">
+            <v-btn
+              variant="tonal"
+              color="primary"
+              @click="addFarmIp($props.farmId, $props.gateway)"
+              @update:modelValue="$emit('update:isAdded', $event)"
+              :loading="isAdding"
+              :disabled="!valid || isAdding"
+              >Add</v-btn
+            >
+            <v-btn
+              variant="tonal"
+              @click="showRange"
+              :disabled="!valid || $props.type === IPType.single || !$props.toPublicIP"
+              >Show IPs Range</v-btn
+            >
+            <v-btn @click="showDialogue = false" class="grey lighten-2 black--text">Close</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-container>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { contains } from "cidr-tools";
+import { getIPRange } from "get-ip-range";
+import { default as PrivateIp } from "private-ip";
+import { ref, watch } from "vue";
+
+import { IPType } from "@/utils/types";
+
+import { useGrid } from "../../stores";
+import { createCustomToast, ToastType } from "../../utils/custom_toast";
+export default {
+  name: "AddIP",
+  props: {
+    farmId: {
+      type: Number,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    publicIP: {
+      type: String,
+      required: true,
+    },
+    toPublicIP: {
+      type: String,
+      required: true,
+    },
+    gateway: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props, context) {
+    const showDialogue = ref(false);
+    const gridStore = useGrid();
+    const valid = ref(false);
+    const IPs = ref<string[]>();
+    const items = ref<string[]>([IPType.single, IPType.range]);
+    const selectedItem = ref(props.type);
+    const loading = ref(false);
+    const isAdded = ref(false);
+    const isAdding = ref(false);
+    const inRange = ref<boolean>();
+    const showIPs = ref(false);
+
+    watch(
+      [() => props.publicIP, () => props.gateway],
+      ([newPublicIP, newGateway], [_, _2]) => {
+        try {
+          inRange.value = contains(newPublicIP, newGateway);
+        } catch (e) {
+          inRange.value = false;
+        }
+        gatewayCheck();
+      },
+      { immediate: true },
+    );
+
+    function ipcheck() {
+      if (PrivateIp(props.publicIP.split("/")[0])) {
+        return {
+          message: "IP is not public",
+        };
+      }
+      return undefined;
+    }
+
+    function toIpCheck() {
+      if (props.toPublicIP.split("/")[1] !== props.publicIP.split("/")[1]) {
+        return {
+          message: "Subnet is different.",
+        };
+      }
+
+      if (
+        parseInt(props.toPublicIP.split("/")[0].split(".")[3]) <= parseInt(props.publicIP.split("/")[0].split(".")[3])
+      ) {
+        return {
+          message: "To IP must be bigger than From IP.",
+        };
+      }
+
+      if (
+        props.toPublicIP.substring(0, props.toPublicIP.lastIndexOf(".")) !=
+        props.publicIP.substring(0, props.publicIP.lastIndexOf("."))
+      ) {
+        return {
+          message: "IPs are not the same.",
+        };
+      }
+      if (
+        parseInt(props.toPublicIP.split("/")[0].split(".")[3]) - parseInt(props.publicIP.split("/")[0].split(".")[3]) >
+        16
+      ) {
+        return {
+          message: "Range must not exceed 16.",
+        };
+      }
+      if (PrivateIp(props.publicIP.split("/")[0])) {
+        return {
+          message: "IP is not public.",
+        };
+      }
+      return undefined;
+    }
+
+    function gatewayCheck() {
+      if (!inRange.value) {
+        return {
+          message: "Gateway IP not in the provided IP range.",
+        };
+      }
+      if (props.publicIP?.split("/")[0] === props.gateway || props.toPublicIP?.split("/")[0] === props.gateway) {
+        return {
+          message: "IPs cannot be the same.",
+        };
+      }
+      return undefined;
+    }
+
+    function showRange() {
+      addIPs();
+      showIPs.value = true;
+    }
+
+    function addIPs() {
+      const sub = props.publicIP.split("/")[1];
+      const start = props.publicIP.split("/")[0];
+      let end = props.toPublicIP.split("/")[0];
+
+      if (props.type === IPType.single) end = start;
+
+      IPs.value = getIPRange(start, end);
+      IPs.value.forEach((ip, i) => {
+        IPs.value![i] = ip + "/" + sub;
+      });
+    }
+
+    async function addFarmIp(farmId: number, gw: string) {
+      try {
+        isAdding.value = true;
+        if (props.type === IPType.range) {
+          addIPs();
+        }
+        if (IPs.value && IPs.value.length > 1) {
+          const extrinsics: any[] = [];
+          for (const ip in IPs.value) {
+            extrinsics.push(await gridStore.grid.tfchain.tfClient.farms.addFarmIp({ farmId, ip: IPs.value[ip], gw }));
+
+            context.emit("add-publicIPs", [{ ip: IPs.value[ip], gateway: gw }]);
+          }
+          await gridStore.grid.utility.batchAll({ extrinsics });
+        } else {
+          await gridStore.grid.farms.addFarmIp({ farmId, ip: props.publicIP, gw });
+          context.emit("add-publicIPs", [{ ip: props.publicIP, gateway: gw }]);
+        }
+        createCustomToast("IP is added successfully.", ToastType.success);
+      } catch (error) {
+        console.log(error);
+        createCustomToast(`Failed to add IP. ${error}`, ToastType.danger);
+      } finally {
+        isAdding.value = false;
+      }
+    }
+    return {
+      showDialogue,
+      valid,
+      IPs,
+      items,
+      selectedItem,
+      loading,
+      isAdded,
+      isAdding,
+      inRange,
+      showIPs,
+      IPType,
+      showRange,
+      addIPs,
+      addFarmIp,
+      ipcheck,
+      toIpCheck,
+      gatewayCheck,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.custom-toolbar {
+  height: 2.5rem !important;
+  padding-left: 10px;
+}
+</style>
diff --git a/packages/playground/src/dashboard/components/create_farm.vue b/packages/playground/src/dashboard/components/create_farm.vue
new file mode 100644
index 0000000000..8cdd84e8b3
--- /dev/null
+++ b/packages/playground/src/dashboard/components/create_farm.vue
@@ -0,0 +1,109 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-btn color="blue" class="ml-auto bold-text" @click="showDialogue = true" :disabled="isCreating"
+        >Create Farm</v-btn
+      >
+    </v-row>
+
+    <v-container v-if="showDialogue">
+      <v-dialog v-model="showDialogue" max-width="600">
+        <v-card>
+          <v-toolbar color="primary" dark class="custom-toolbar">
+            <p class="mb-5">Create Farm</p>
+          </v-toolbar>
+          <div class="pt-6 px-6">
+            <form-validator v-model="valid">
+              <input-validator
+                :value="$props.name"
+                :rules="[
+                  validators.required('Farm name is required.'),
+                  name => validators.isAlpha('Farm name must start with an alphabet char.')(name[0]),
+                  validators.minLength('Farm name minimum length is 2 chars.', 2),
+                  validators.maxLength('Farm name maximum length is 15 chars.', 15),
+                  validators.pattern('Farm name  should not contain whitespaces.', {
+                    pattern: /^[^\s]+$/,
+                  }),
+                ]"
+                #="{ props }"
+              >
+                <v-text-field
+                  :model-value="$props.name"
+                  v-bind:="props"
+                  @update:model-value="$emit('update:name', $event)"
+                  outlined
+                  label="Farm name"
+                ></v-text-field>
+              </input-validator>
+            </form-validator>
+          </div>
+          <v-card-actions class="justify-end px-5 pb-5 pt-0">
+            <v-btn
+              color="primary"
+              variant="tonal"
+              @click="createFarm"
+              :loading="isCreating"
+              :disabled="!valid || isCreating"
+              >Create</v-btn
+            >
+            <v-btn @click="showDialogue = false" class="grey lighten-2 black--text">Close</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-container>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+
+import { useGrid } from "../../stores";
+import { createCustomToast, ToastType } from "../../utils/custom_toast";
+
+export default {
+  name: "CreateFarm",
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    userFarms: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup(props) {
+    const showDialogue = ref(false);
+    const isCreating = ref(false);
+    const gridStore = useGrid();
+    const valid = ref(false);
+    async function createFarm() {
+      try {
+        isCreating.value = true;
+        await gridStore.grid.farms.create({ name: props.name });
+        createCustomToast("Farm created successfully.", ToastType.success);
+        createCustomToast("Table may take sometime to update the changes.", ToastType.info);
+        await props.userFarms.reloadFarms();
+      } catch (error) {
+        console.log(error);
+        createCustomToast("Failed to create farm.", ToastType.danger);
+      } finally {
+        isCreating.value = false;
+      }
+    }
+    return {
+      showDialogue,
+      isCreating,
+      valid,
+      createFarm,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.custom-toolbar {
+  height: 2.5rem !important;
+  padding-left: 10px;
+}
+</style>
diff --git a/packages/playground/src/dashboard/components/dedicated_nodes_table.vue b/packages/playground/src/dashboard/components/dedicated_nodes_table.vue
new file mode 100644
index 0000000000..e26d99a81f
--- /dev/null
+++ b/packages/playground/src/dashboard/components/dedicated_nodes_table.vue
@@ -0,0 +1,308 @@
+<template>
+  <!-- Filters -->
+  <div class="pt-5">
+    <filters
+      @update:model-value="inputFiltersReset"
+      :model-value="filterInputs"
+      :valid="isValidForm"
+      :form-disabled="isFormLoading"
+    />
+  </div>
+  <div>
+    <input-tooltip inline tooltip="Enable filtering the nodes that have GPU card supported only.">
+      <v-switch
+        color="primary"
+        inset
+        label="GPU Node (Only)"
+        v-model="gpuFilter"
+        hide-details
+        :disabled="isFormLoading"
+      />
+    </input-tooltip>
+  </div>
+  <div class="pt-5">
+    <v-card>
+      <v-tabs v-model="activeTab" align-tabs="center">
+        <v-tab v-for="(tab, index) in tabs" :key="index" :value="index" color="info">
+          {{ tab.label }}
+        </v-tab>
+      </v-tabs>
+    </v-card>
+  </div>
+  <div>
+    <v-card class="pa-5">
+      <v-data-table-server
+        :loading="loading"
+        :items-length="nodesCount"
+        loading-text="Loading nodes..."
+        :headers="headers"
+        :items="nodes"
+        v-model:items-per-page="pageSize"
+        v-model:expanded="expanded"
+        show-expand
+        :hide-no-data="false"
+        :disable-sort="true"
+        class="elevation-1"
+        :hover="true"
+        :items-per-page-options="[
+          { value: 5, title: '5' },
+          { value: 10, title: '10' },
+          { value: 15, title: '15' },
+          { value: 50, title: '50' },
+        ]"
+        v-model:page="page"
+        return-object
+      >
+        <template v-slot:[`item.actions`]="{ item }">
+          <reserve-btn :node="(item.raw as unknown as GridNode)" @updateTable="reloadTable" />
+        </template>
+
+        <template v-slot:[`item.price`]="{ item }">
+          <v-tooltip bottom color="primary" close-delay="1000">
+            <template v-slot:activator="{ isActive, props }">
+              <span v-bind="props" v-on="isActive">{{ item.raw.price }} *</span>
+            </template>
+            <span>
+              Discounts: <v-spacer />
+              <ul class="pl-2">
+                <li>
+                  You receive 50% discount if you reserve an entire
+                  <a
+                    target="_blank"
+                    href="https://manual.grid.tf/dashboard/portal/dashboard_portal_dedicated_nodes.html#billing--pricing"
+                  >
+                    node
+                  </a>
+                </li>
+                <li>
+                  You're receiving {{ item.raw.discount }}% discount as per the
+                  <a target="_blank" href="https://manual.grid.tf/cloud/cloudunits_pricing.html#staking-discount">
+                    <p style="display: inline">discount levels</p>
+                  </a>
+                </li>
+              </ul>
+            </span>
+          </v-tooltip>
+        </template>
+
+        <template v-slot:expanded-row="{ columns, item }">
+          <node-details :node="(item.raw as unknown as GridNode)" :columns-len="columns.length" />
+        </template>
+      </v-data-table-server>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { GridNode } from "@threefold/gridproxy_client";
+import { NodeStatus } from "@threefold/gridproxy_client";
+import { CertificationType } from "@threefold/gridproxy_client";
+import { onMounted, ref, watch } from "vue";
+import type { VDataTable } from "vuetify/labs/VDataTable";
+import { VDataTableServer } from "vuetify/labs/VDataTable";
+
+import { gridProxyClient } from "@/clients";
+import { useProfileManager } from "@/stores";
+import { toBytes } from "@/utils/get_nodes";
+import { getGrid } from "@/utils/grid";
+import { toGigaBytes } from "@/utils/helpers";
+import toTeraOrGigaOrPeta from "@/utils/toTeraOrGegaOrPeta";
+
+const headers: VDataTable["headers"] = [
+  { title: "Node ID", key: "nodeId", sortable: false },
+  { title: "Location", key: "location.country", sortable: false },
+  { title: "CPU", key: "total_resources.cru", sortable: false },
+  {
+    title: "RAM",
+    key: "total_resources.mru",
+    value: item => toTeraOrGigaOrPeta(item.total_resources.mru),
+    sortable: false,
+  },
+  {
+    title: "SSD",
+    key: "total_resources.sru",
+    value: item => toTeraOrGigaOrPeta(item.total_resources.sru),
+    sortable: false,
+  },
+  {
+    title: "HDD",
+    key: "total_resources.hru",
+    value: item => toTeraOrGigaOrPeta(item.total_resources.hru),
+    sortable: false,
+  },
+  { title: "GPU", key: "num_gpu", sortable: false },
+  {
+    title: "Price (USD)",
+    key: "price",
+    sortable: false,
+  },
+  {
+    title: "Actions",
+    key: "actions",
+    sortable: false,
+  },
+];
+const profileManager = useProfileManager();
+const pageSize = ref(10);
+const page = ref(1);
+const expanded = ref([]);
+const tabs = [{ label: "Rentable" }, { label: "Mine" }];
+const activeTab = ref(0);
+const loading = ref(false);
+const nodes = ref<any[]>();
+const nodesCount = ref(0);
+const filterInputs = ref<DedicatedNodeFilters>(DedicatedNodeInitializer());
+const isValidForm = ref<boolean>(false);
+const isFormLoading = ref<boolean>(true);
+const gpuFilter = ref<boolean | undefined>();
+const tabParams = {
+  0: {
+    rentable: true,
+    status: NodeStatus.Up,
+    retCount: true,
+  },
+  1: {
+    rented: true,
+    rentedBy: profileManager.profile?.twinId,
+    retCount: true,
+  },
+};
+
+// The mixed filters should reset to the default value again..
+const inputFiltersReset = (filtersInputValues: DedicatedNodeFilters) => {
+  filterInputs.value = filtersInputValues;
+  gpuFilter.value = undefined;
+};
+
+onMounted(async () => {
+  await loadData();
+});
+
+const _loadData = async () => {
+  const params = tabParams[activeTab.value as keyof typeof tabParams];
+
+  if (!params) {
+    return;
+  }
+
+  loading.value = true;
+  isFormLoading.value = true;
+  try {
+    const data = await gridProxyClient.nodes.list({
+      ...params,
+      size: pageSize.value,
+      page: page.value,
+      totalSru: filterInputs.value.total_sru.value ? toBytes(+filterInputs.value.total_sru.value) : undefined,
+      totalMru: filterInputs.value.total_mru.value ? toBytes(+filterInputs.value.total_mru.value) : undefined,
+      totalHru: filterInputs.value.total_hru.value ? toBytes(+filterInputs.value.total_hru.value) : undefined,
+      totalCru: filterInputs.value.total_cru.value ? +filterInputs.value.total_cru.value : undefined,
+      gpuVendorName: filterInputs.value.gpu_vendor_name.value ? filterInputs.value.gpu_vendor_name.value : "",
+      gpuDeviceName: filterInputs.value.gpu_device_name.value ? filterInputs.value.gpu_device_name.value : "",
+      hasGpu: gpuFilter.value,
+    });
+
+    if (data.count === 0) {
+      loading.value = false;
+      nodes.value = [];
+      nodesCount.value = 0;
+      isFormLoading.value = false;
+      return;
+    }
+
+    const grid = await getGrid(profileManager.profile!);
+
+    const pricePromises = data.data.map(async item => {
+      const fee = await grid?.contracts.getDedicatedNodeExtraFee({ nodeId: item.nodeId });
+      const price = await grid?.calculator.calculateWithMyBalance({
+        cru: item.total_resources.cru,
+        hru: toGigaBytes(item.total_resources.hru),
+        mru: toGigaBytes(item.total_resources.mru),
+        sru: toGigaBytes(item.total_resources.sru),
+        ipv4u: false,
+        certified: item.certificationType === CertificationType.Certified,
+      });
+      return {
+        ...item,
+        price: (price?.dedicatedPrice ?? 0 + (fee || 0)).toFixed(3),
+        discount: price?.sharedPackage.discount ?? 0,
+      };
+    });
+
+    const pricedNodes = await Promise.all(pricePromises);
+    nodes.value = pricedNodes;
+
+    nodesCount.value = data.count ?? 0;
+    loading.value = false;
+    isFormLoading.value = false;
+  } catch (e) {
+    console.log("Error: ", e);
+    loading.value = false;
+    isFormLoading.value = false;
+  }
+};
+
+const loadData = debounce(_loadData, 1000);
+
+watch(
+  [filterInputs, gpuFilter, activeTab],
+  async () => {
+    if (!gpuFilter.value) {
+      gpuFilter.value = undefined;
+    }
+    await loadData();
+  },
+  { deep: true },
+);
+
+watch(
+  [page, pageSize, isValidForm, filterInputs, gpuFilter],
+  async ([newPage, newPageSize, newIsValidForm]) => {
+    if (!gpuFilter.value) {
+      gpuFilter.value = undefined;
+    }
+    page.value = newPage;
+    pageSize.value = newPageSize;
+    if (newIsValidForm) {
+      await loadData();
+    }
+  },
+  { immediate: true },
+);
+
+async function reloadTable() {
+  await new Promise(resolve => {
+    setTimeout(resolve, 20000);
+  });
+  await loadData();
+}
+</script>
+
+<script lang="ts">
+import { debounce } from "lodash";
+
+import Filters from "@/components/filter.vue";
+import type { FilterInputs } from "@/types";
+import { type DedicatedNodeFilters, DedicatedNodeInitializer } from "@/utils/filter_nodes";
+
+import NodeDetails from "./node_details.vue";
+import ReserveBtn from "./reserve_action_btn.vue";
+
+export default {
+  name: "Dedicated Node",
+  components: {
+    ReserveBtn,
+    NodeDetails,
+    Filters,
+  },
+};
+</script>
+
+<style>
+.v-table__wrapper {
+  min-height: 100px;
+}
+
+.v-tooltip > .v-overlay__content {
+  pointer-events: initial !important;
+}
+</style>
diff --git a/packages/playground/src/dashboard/components/node_details.vue b/packages/playground/src/dashboard/components/node_details.vue
new file mode 100644
index 0000000000..bb4fdf198f
--- /dev/null
+++ b/packages/playground/src/dashboard/components/node_details.vue
@@ -0,0 +1,227 @@
+<template>
+  <td :colspan="columnsLen" v-if="dNodeLoading" style="text-align: center">
+    <div class="pa-1">
+      <v-progress-circular indeterminate model-value="20" :width="3"></v-progress-circular>
+    </div>
+  </td>
+  <td :colspan="columnsLen" v-else-if="dNodeError" style="text-align: center">
+    <div class="pt-4">
+      <v-alert variant="tonal" class="d-flex justify-between" dense outlined type="error" style="text-align: center">
+        <div style="display: flex; align-items: center">Failed to retrieve Node details.</div>
+        <template v-slot:append>
+          <v-icon @click="reloadNodeDetails" style="cursor: pointer">mdi-reload</v-icon>
+        </template>
+      </v-alert>
+    </div>
+  </td>
+
+  <td :colspan="columnsLen" v-else>
+    <v-row class="ma-2">
+      <v-col :cols="getColSize">
+        <div class="mt-3">
+          <card-details
+            :loading="false"
+            title="Node Resources"
+            icon="mdi-harddisk"
+            :items="getNodeResourceCard()"
+          ></card-details>
+        </div>
+      </v-col>
+
+      <v-col :cols="getColSize">
+        <div class="mt-3">
+          <card-details
+            :loading="false"
+            title="Location"
+            icon="mdi-map-marker"
+            :items="getCountryResourceCard()"
+          ></card-details>
+        </div>
+      </v-col>
+
+      <v-col :cols="getColSize" class="{ 'mt-n8': getColSize() === 6 }">
+        <div class="mt-3">
+          <card-details
+            :loading="false"
+            title="Farm details"
+            icon="mdi-silo"
+            :items="getFarmResourceCard()"
+          ></card-details>
+        </div>
+      </v-col>
+    </v-row>
+    <v-row class="d-flex" style="justify-content: center">
+      <div class="pa-1 pb-4" v-if="gpuLoading">
+        <div style="bottom: 10rem; top: 10rem">
+          <p :style="{ paddingBottom: '3rem', color: '#7de3c8', fontSize: '1.25rem' }">
+            Loading Node gpu details{{ dots }}
+          </p>
+        </div>
+      </div>
+      <v-row v-if="gpuError" style="justify-content: center; align-items: center; margin-bottom: 2rem">
+        <div>
+          <v-alert
+            variant="tonal"
+            class="d-flex justify-between"
+            color="#f44336"
+            dense
+            outlined
+            type="error"
+            style="text-align: center"
+          >
+            <div style="display: flex; align-items: center">Failed to receive node GPUs information</div>
+            <template v-slot:append>
+              <v-icon @click="getGpuDetails" style="cursor: pointer">mdi-reload</v-icon>
+            </template>
+          </v-alert>
+        </div>
+      </v-row>
+      <v-col
+        v-if="node.num_gpu > 0"
+        cols="getColSize"
+        style="max-width: 93rem; min-height: 400px; justify-content: center"
+      >
+        <div class="mt-3">
+          <GPUDetailsCard :node="node" />
+        </div> </v-col
+    ></v-row>
+  </td>
+</template>
+
+<script setup lang="ts">
+import type { GridNode } from "@threefold/gridproxy_client";
+import { onMounted, type PropType, ref } from "vue";
+
+import { gridProxyClient } from "@/clients";
+import type { NodeDetailsCard } from "@/types";
+import { nodeInitializer } from "@/types";
+import { getNode } from "@/utils/get_nodes";
+import toTeraOrGigaOrPeta from "@/utils/toTeraOrGegaOrPeta";
+
+const dNodeError = ref(false);
+const dNodeLoading = ref(true);
+const gpuLoading = ref(false);
+const gpuError = ref(false);
+const farmName = ref("");
+const publicIps = ref(0);
+const node = ref<GridNode>(nodeInitializer);
+const dots = ref(".");
+const interval = ref<number | null>(null);
+
+const props = defineProps({
+  node: {
+    required: true,
+    type: Object as PropType<GridNode>,
+  },
+  columnsLen: {
+    required: true,
+    type: Number,
+  },
+});
+
+onMounted(async () => {
+  reloadNodeDetails();
+});
+
+async function reloadNodeDetails() {
+  await getNodeDetails();
+  await getGpuDetails();
+}
+
+async function getNodeDetails() {
+  try {
+    dNodeLoading.value = true;
+    const res = await gridProxyClient.farms.list({ farmId: props.node.farmId });
+    farmName.value = res.data[0].name;
+    publicIps.value = res.data[0].publicIps.length;
+    if (Array.isArray(res) && !res.length) throw new Error("Can't resolve farm data");
+    dNodeLoading.value = true;
+    dNodeError.value = false;
+  } catch (e) {
+    console.log("Error retrieving node details: ", e);
+    dNodeError.value = true;
+    dNodeLoading.value = false;
+  }
+  dNodeLoading.value = false;
+}
+
+async function getGpuDetails() {
+  try {
+    if (props.node.num_gpu > 0) {
+      gpuLoading.value = true;
+      if (interval.value !== null) {
+        window.clearInterval(interval.value);
+      }
+      interval.value = window.setInterval(loadingDots, 500);
+
+      gpuError.value = false;
+      const _node: GridNode = await getNode(props.node.nodeId, {
+        loadGpu: true,
+      });
+      console.log(_node);
+      node.value = _node;
+    }
+    gpuLoading.value = false;
+  } catch (e) {
+    console.log("Error retrieving gpu node details: ", e);
+    gpuLoading.value = false;
+    gpuError.value = true;
+  }
+}
+
+const getFarmResourceCard = (): NodeDetailsCard[] => {
+  return [
+    { name: "ID", value: props.node.farmId.toString() },
+    { name: "Name", value: farmName.value },
+    { name: "Certification type", value: props.node.certificationType },
+    { name: "Public ips", value: publicIps.value.toString() },
+  ];
+};
+
+const getCountryResourceCard = (): NodeDetailsCard[] => {
+  return [
+    { name: "Country", value: props.node.location.country },
+    { name: "City", value: props.node.location.city },
+    { name: "Latitude", value: props.node.location.latitude.toString() },
+    { name: "Longitude", value: props.node.location.longitude.toString() },
+  ];
+};
+
+const getNodeResourceCard = (): NodeDetailsCard[] => {
+  return [
+    { name: "CPU", value: props.node.total_resources.cru.toString() + " CPU" },
+    { name: "Memory", value: toTeraOrGigaOrPeta(props.node.total_resources.mru.toString()) },
+    { name: "Disk(SSD)", value: toTeraOrGigaOrPeta(props.node.total_resources.sru.toString()) },
+    { name: "Disk(HDD)", value: toTeraOrGigaOrPeta(props.node.total_resources.hru.toString()) },
+  ];
+};
+
+function getColSize() {
+  if (props.node.num_gpu > 0) {
+    return 6;
+  } else {
+    return 4;
+  }
+}
+
+function loadingDots() {
+  if (dots.value === "...") {
+    dots.value = ".";
+  } else {
+    dots.value += ".";
+  }
+}
+</script>
+
+<script lang="ts">
+import CardDetails from "@/components/node_details_cards/card_details.vue";
+import GPUDetailsCard from "@/components/node_details_cards/gpu_details_card.vue";
+
+export default {
+  name: "Node Details",
+  components: {
+    CardDetails,
+    GPUDetailsCard,
+  },
+};
+</script>
diff --git a/packages/playground/src/dashboard/components/public_config.vue b/packages/playground/src/dashboard/components/public_config.vue
new file mode 100644
index 0000000000..67a54539fb
--- /dev/null
+++ b/packages/playground/src/dashboard/components/public_config.vue
@@ -0,0 +1,271 @@
+<template>
+  <span>
+    <v-tooltip text="Add a public config">
+      <template #activator="{ props }">
+        <v-icon v-bind="props" size="small" :disabled="isAdding" :loading="isAdding" @click="showDialogue = true">
+          mdi-earth
+        </v-icon>
+      </template>
+    </v-tooltip>
+
+    <template v-if="showDialogue">
+      <v-dialog v-model="showDialogue" max-width="600">
+        <v-card>
+          <v-toolbar color="primary" dark class="custom-toolbar">
+            <p class="mb-5">Add a public config to your node with ID: {{ $props.nodeId }}</p>
+          </v-toolbar>
+          <div class="pt-6 px-6">
+            <form-validator v-model="valid" ref="formRef">
+              <input-validator
+                :value="$props.modelValue.ipv4"
+                :rules="[validators.required('IPv4 is required.'), validators.isIPRange('IP is not valid.', 4)]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="IPV4 address in CIDR format xx.xx.xx.xx/xx">
+                  <v-text-field v-model="$props.modelValue.ipv4" v-bind="props" outlined label="IPv4"></v-text-field>
+                </input-tooltip>
+              </input-validator>
+
+              <input-validator
+                :value="$props.modelValue.gw4"
+                :rules="[validators.required('Gateway is required.'), validators.isIP('Gateway is not valid.', 4)]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="Gateway for the IP in ipv4 format">
+                  <v-text-field
+                    v-model="$props.modelValue.gw4"
+                    v-bind:="props"
+                    outlined
+                    label="Gateway IPv4"
+                  ></v-text-field>
+                </input-tooltip>
+              </input-validator>
+              <input-validator
+                :value="$props.modelValue.ipv6"
+                :rules="[value => validators.isIPRange('IP is not valid.', 6)(value)]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="IPV6 address in format x:x:x:x:x:x:x:x">
+                  <v-text-field v-model="$props.modelValue.ipv6" v-bind:="props" outlined label="IPv6"></v-text-field>
+                </input-tooltip>
+              </input-validator>
+
+              <input-validator
+                :value="$props.modelValue.gw6"
+                :rules="[value => validators.isIP('Gateway is not valid.', 6)(value)]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="Gateway for the IP in ipv6 format">
+                  <v-text-field
+                    v-model="$props.modelValue.gw6"
+                    v-bind:="props"
+                    outlined
+                    label="Gateway IPv6"
+                  ></v-text-field>
+                </input-tooltip>
+              </input-validator>
+
+              <input-validator
+                :value="$props.modelValue.domain"
+                :rules="[domain => validators.isURL('Wrong domain format.')(domain)]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="Domain for web gateway">
+                  <v-text-field
+                    v-model="$props.modelValue.domain"
+                    v-bind:="props"
+                    outlined
+                    label="Domain"
+                  ></v-text-field>
+                </input-tooltip>
+              </input-validator>
+            </form-validator>
+          </div>
+          <v-card-actions class="justify-space-between px-5 pb-5 pt-0">
+            <v-btn
+              @click="showClearDialogue = true"
+              color="white"
+              class="bg-red-lighten-1"
+              :disabled="isRemoving || Object.values(config).every(value => value == '')"
+              >Remove Config</v-btn
+            >
+            <div>
+              <v-btn
+                color="primary"
+                variant="tonal"
+                @click="AddConfig"
+                :loading="isSaving"
+                :disabled="isSaving || !valid || (valid && !isConfigChanged)"
+              >
+                Save
+              </v-btn>
+              <v-btn @click="showDialogue = false" class="grey lighten-2 black--text">Close</v-btn>
+            </div>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </template>
+
+    <template v-if="showClearDialogue">
+      <v-dialog v-model="showClearDialogue" width="650">
+        <v-card>
+          <v-toolbar color="primary" dark class="custom-toolbar">
+            <p class="mb-5">Remove Public Config</p>
+          </v-toolbar>
+          <v-card-text> Are you certain you want to remove this node's public config? </v-card-text>
+          <v-alert variant="tonal" type="warning" class="ma-4">
+            <p>This action is reversible!</p>
+          </v-alert>
+          <v-card-actions class="justify-end px-5 pb-5 pt-0">
+            <v-btn
+              text="Remove"
+              color="white"
+              :loading="isRemoving"
+              :disabled="isRemoving"
+              class="bg-red-lighten-1"
+              @click="removeConfig()"
+            ></v-btn>
+            <v-btn text="Close" @click="showClearDialogue = false"></v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </template>
+  </span>
+</template>
+
+<script lang="ts">
+import type { GridNode } from "@threefold/gridproxy_client";
+import _ from "lodash";
+import { onMounted, type PropType, ref, watch } from "vue";
+
+import { gridProxyClient } from "@/clients";
+import { useFormRef } from "@/hooks/form_validator";
+import type { IPublicConfig } from "@/utils/types";
+
+import { useGrid } from "../../stores";
+import { createCustomToast, ToastType } from "../../utils/custom_toast";
+
+export default {
+  name: "AddPublicConfig",
+  props: {
+    nodeId: {
+      type: Number,
+      required: true,
+    },
+    farmId: {
+      type: Number,
+      required: true,
+    },
+    modelValue: {
+      type: Object as PropType<IPublicConfig>,
+      required: true,
+    },
+  },
+
+  setup(props, context) {
+    const showDialogue = ref(false);
+    const isAdding = ref(false);
+    const gridStore = useGrid();
+    const valid = ref(false);
+    const showClearDialogue = ref(false);
+    const isRemoving = ref(false);
+    const isSaving = ref(false);
+    const config = ref();
+    const isConfigChanged = ref(false);
+    const formRef = useFormRef();
+
+    onMounted(async () => {
+      config.value = await getPublicConfig();
+    });
+
+    watch(
+      () => ({ ...props.modelValue }),
+      (old, newValue) => {
+        isConfigChanged.value = !_.isEqual(old, newValue) && !_.isEqual(props.modelValue, config.value);
+        formRef.value?.validate();
+      },
+    );
+
+    async function getPublicConfig() {
+      try {
+        const node: GridNode = await gridProxyClient.nodes.byId(props.nodeId);
+        const config = node.publicConfig;
+        return config;
+      } catch (error) {
+        console.log(`Failed to get node: ${error}`);
+      }
+    }
+
+    async function AddConfig() {
+      try {
+        isSaving.value = true;
+        await gridStore.grid.nodes.addNodePublicConfig({
+          farmId: props.farmId,
+          nodeId: props.nodeId,
+          publicConfig: {
+            ip4: { ip: props.modelValue.ipv4, gw: props.modelValue.gw4 },
+            ip6:
+              props.modelValue.ipv6 && props.modelValue.gw6
+                ? { ip: props.modelValue.ipv6 as string, gw: props.modelValue.gw6 as string }
+                : null,
+            domain: props.modelValue.domain || null,
+          },
+        });
+        createCustomToast("Public config saved successfully.", ToastType.success);
+        context.emit("add-config", props.modelValue);
+        showDialogue.value = false;
+      } catch (error) {
+        console.log(error);
+        createCustomToast(`Failed to save config. ${error}.`, ToastType.danger);
+      } finally {
+        isSaving.value = false;
+      }
+    }
+
+    async function removeConfig() {
+      try {
+        isRemoving.value = true;
+        await gridStore.grid.nodes.addNodePublicConfig({
+          farmId: props.farmId,
+          nodeId: props.nodeId,
+        });
+        createCustomToast("Public config removed successfully.", ToastType.success);
+        context.emit("remove-config", {
+          ipv4: "",
+          gw4: "",
+          ipv6: "",
+          gw6: "",
+          domain: "",
+        });
+        showDialogue.value = false;
+      } catch (error) {
+        console.log(error);
+        createCustomToast(`Failed to remove config. ${error}`, ToastType.danger);
+      } finally {
+        isRemoving.value = false;
+        showClearDialogue.value = false;
+      }
+    }
+    return {
+      showDialogue,
+      isAdding,
+      valid,
+      showClearDialogue,
+      isRemoving,
+      isSaving,
+      config,
+      isConfigChanged,
+      formRef,
+      AddConfig,
+      removeConfig,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.custom-toolbar {
+  height: 2.5rem !important;
+  padding-left: 10px;
+}
+</style>
diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
new file mode 100644
index 0000000000..b002ea95cd
--- /dev/null
+++ b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="my-6">
+    <AddIP
+      v-model:farmId="$props.farmId"
+      v-model:type="type"
+      v-model:publicIP="publicIP"
+      v-model:toPublicIP="toPublicIP"
+      v-model:gateway="gateway"
+      @add-publicIPs="publicIps.push(...$event)"
+    />
+    <v-data-table v-if="publicIps?.length > 0" :headers="headers" :items="publicIps" class="elevation-1">
+      <template v-slot:top>
+        <p class="text-subtitle-1 font-weight-bold pa-4 ma-4 w-50">Public IPs</p>
+      </template>
+      <template #[`item.ip`]="{ item }">
+        {{ item.value.ip || "-" }}
+      </template>
+      <template #[`item.gateway`]="{ item }">
+        {{ item.value.gateway || "-" }}
+      </template>
+
+      <template #[`item.contract_id`]="{ item }">
+        {{ item.value.contract_id || "-" }}
+      </template>
+      <template #[`item.actions`]="{ item, index }">
+        <v-btn
+          color="red-darken-1"
+          @click="
+            () => {
+              showDialogue = true;
+              itemToDelete = { ip: item.raw.ip, index };
+            }
+          "
+          :disabled="loading"
+          :loading="loading"
+        >
+          Delete IP
+        </v-btn>
+      </template>
+      <template #bottom></template>
+    </v-data-table>
+    <v-dialog v-model="showDialogue" max-width="600">
+      <v-card>
+        <v-toolbar color="primary" class="custom-toolbar">
+          <p class="mb-5">Delete IP</p>
+        </v-toolbar>
+        <v-card-text> Are you sure you want to delete IP {{ itemToDelete?.ip }}? </v-card-text>
+        <v-card-actions class="justify-end px-5 pb-5 pt-0">
+          <v-btn
+            text="Delete"
+            color="white"
+            :loading="isRemoving"
+            :disabled="isRemoving"
+            class="bg-red-lighten-1"
+            @click="removeFarmIp({ farmId: $props.farmId, ip: itemToDelete?.ip }, itemToDelete?.index)"
+          ></v-btn>
+          <v-btn @click="showDialogue = false" class="grey lighten-2 black--text">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+<script lang="ts">
+import type { RemoveFarmIPModel } from "@threefold/grid_client";
+import { onMounted, ref } from "vue";
+
+import { useGrid } from "@/stores";
+import { IPType } from "@/utils/types";
+
+import { createCustomToast, ToastType } from "../../utils/custom_toast";
+import AddIP from "./add_ip.vue";
+
+export default {
+  name: "PublicIPsTable",
+  props: {
+    farmId: {
+      type: Number,
+      required: true,
+    },
+  },
+  components: {
+    AddIP,
+  },
+  setup(props) {
+    const gridStore = useGrid();
+    const headers = [
+      {
+        title: "IP",
+        align: "center",
+        key: "ip",
+      },
+      {
+        title: "Gateway",
+        align: "center",
+        key: "gateway",
+      },
+      {
+        title: "Deployed Contract ID",
+        align: "center",
+        key: "contract_id",
+      },
+      { title: "Actions", align: "center", sortable: false, key: "actions" },
+    ] as any;
+    const publicIps = ref();
+    const loading = ref(false);
+    const showDialogue = ref(false);
+    const type = ref(IPType.single);
+    const publicIP = ref();
+    const toPublicIP = ref();
+    const gateway = ref();
+    const isRemoving = ref(false);
+    const itemToDelete = ref();
+
+    onMounted(async () => {
+      await getFarmByID(props.farmId);
+    });
+    async function getFarmByID(id: number) {
+      try {
+        const farm = await gridStore.grid.farms.getFarmByID({ id });
+        publicIps.value = farm.publicIps;
+      } catch (error) {
+        createCustomToast(`Failed to get public IPs! ${error}`, ToastType.danger);
+      }
+    }
+    async function removeFarmIp(options: RemoveFarmIPModel, index: number) {
+      try {
+        isRemoving.value = true;
+        await gridStore.grid.farms.removeFarmIp({ ip: options.ip, farmId: options.farmId });
+        createCustomToast("IP is deleted successfully!", ToastType.success);
+        publicIps.value.splice(index, 1);
+      } catch (error) {
+        console.log(error);
+        createCustomToast("Failed to delete IP!", ToastType.danger);
+      } finally {
+        isRemoving.value = false;
+        showDialogue.value = false;
+        itemToDelete.value = undefined;
+      }
+    }
+    return {
+      gridStore,
+      headers,
+      publicIps,
+      type,
+      publicIP,
+      toPublicIP,
+      gateway,
+      loading,
+      showDialogue,
+      isRemoving,
+      itemToDelete,
+      removeFarmIp,
+    };
+  },
+};
+</script>
+<style scoped>
+.custom-toolbar {
+  height: 2.5rem !important;
+  padding-left: 10px;
+}
+</style>
diff --git a/packages/playground/src/dashboard/components/reserve_action_btn.vue b/packages/playground/src/dashboard/components/reserve_action_btn.vue
new file mode 100644
index 0000000000..6e987d546b
--- /dev/null
+++ b/packages/playground/src/dashboard/components/reserve_action_btn.vue
@@ -0,0 +1,141 @@
+<template>
+  <container>
+    <v-dialog v-model="openUnreserveDialog" max-width="600" class="custom-dialog">
+      <v-card>
+        <v-card-title class="pt-4">
+          <span style="display: flex; align-items: center">
+            <v-icon color="warning" style="mr-1: 15">mdi-alert</v-icon>
+            Are you sure you want to unreserve this dedicated node?
+          </span>
+        </v-card-title>
+        <v-divider style="color: #1aa18f" />
+        <v-card-text>This will free up the node for others on the chain</v-card-text>
+        <v-card-actions class="justify-end">
+          <v-btn variant="outlined" color="primary" @click="unReserveNode" :loading="loadingUnreserveNode">Yes</v-btn>
+          <v-btn variant="outlined" color="primary" @click="openUnreserveDialog = false">No</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-btn
+      small
+      outlined
+      :loading="loadingReserveNode"
+      :disabled="disableButton"
+      v-if="node.rentedByTwinId === 0"
+      color="primary"
+      @click="reserveNode"
+    >
+      Reserve
+    </v-btn>
+
+    <v-btn
+      small
+      outlined
+      color="red"
+      :loading="loadingUnreserveBtn"
+      :disabled="disableButton"
+      v-if="node.rentedByTwinId === profileManager.profile?.twinId"
+      @click="removeReserve"
+    >
+      Unreserve
+    </v-btn>
+  </container>
+</template>
+
+<script lang="ts">
+import type { GridNode } from "@threefold/gridproxy_client";
+import { type PropType, ref } from "vue";
+
+import { useProfileManager } from "@/stores";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
+import { getGrid } from "@/utils/grid";
+
+const profileManager = useProfileManager();
+
+export default {
+  name: "ReserveBtn",
+  props: {
+    node: {
+      required: true,
+      type: Object as PropType<GridNode>,
+    },
+  },
+  setup(props, { emit }) {
+    const openUnreserveDialog = ref(false);
+    const loadingUnreserveNode = ref(false);
+    const loadingUnreserveBtn = ref(false);
+    const loadingReserveNode = ref(false);
+    const disableButton = ref(false);
+
+    function removeReserve() {
+      openUnreserveDialog.value = true;
+    }
+
+    async function unReserveNode() {
+      loadingUnreserveNode.value = true;
+      try {
+        const grid = await getGrid(profileManager.profile!);
+        createCustomToast(`Verify contracts for node ${props.node.nodeId}`, ToastType.info);
+
+        const result = (await grid?.contracts.getActiveContracts({ nodeId: +props.node.nodeId })) as any;
+        if (result.length > 0) {
+          createCustomToast(`node ${props.node.nodeId} has active contracts`, ToastType.info);
+          loadingUnreserveNode.value = false;
+          openUnreserveDialog.value = false;
+        } else {
+          createCustomToast(`unreserving node ${props.node.nodeId}`, ToastType.info);
+          await grid?.nodes.unreserve({ nodeId: +props.node.nodeId });
+          createCustomToast(`Transaction succeeded node ${props.node.nodeId} Unreserved`, ToastType.success);
+          loadingUnreserveNode.value = false;
+          openUnreserveDialog.value = false;
+          loadingUnreserveBtn.value = true;
+          createCustomToast("Table may take sometime to update the changes", ToastType.info);
+          emit("updateTable");
+          disableButton.value = true;
+          setTimeout(() => {
+            disableButton.value = false;
+            loadingUnreserveBtn.value = false;
+          }, 20000);
+        }
+      } catch (e) {
+        console.log("Error: ", e);
+        createCustomToast(e as string, ToastType.danger);
+        loadingUnreserveNode.value = false;
+        openUnreserveDialog.value = false;
+      }
+    }
+
+    async function reserveNode() {
+      loadingReserveNode.value = true;
+      try {
+        const grid = await getGrid(profileManager.profile!);
+        createCustomToast("Transaction Submitted", ToastType.info);
+        await grid?.nodes.reserve({ nodeId: +props.node.nodeId });
+        createCustomToast(`Transaction succeeded node ${props.node.nodeId} Reserved`, ToastType.success);
+        createCustomToast("Table may take sometime to update the changes", ToastType.info);
+        emit("updateTable");
+        disableButton.value = true;
+        setTimeout(() => {
+          disableButton.value = false;
+          loadingReserveNode.value = false;
+        }, 20000);
+      } catch (e) {
+        console.log("Error: ", e);
+        createCustomToast(e as string, ToastType.danger);
+        loadingReserveNode.value = false;
+      }
+    }
+    return {
+      openUnreserveDialog,
+      loadingUnreserveNode,
+      unReserveNode,
+      loadingReserveNode,
+      reserveNode,
+      removeReserve,
+      disableButton,
+      loadingUnreserveBtn,
+      profileManager,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/dashboard/components/set_extra_fee.vue b/packages/playground/src/dashboard/components/set_extra_fee.vue
new file mode 100644
index 0000000000..615cba8437
--- /dev/null
+++ b/packages/playground/src/dashboard/components/set_extra_fee.vue
@@ -0,0 +1,141 @@
+<template>
+  <span>
+    <v-tooltip text="Set Additional Fees">
+      <template #activator="{ props }">
+        <v-icon v-bind="props" size="small" :disabled="isAdding" :loading="isAdding" @click="showDialogue = true">
+          mdi-code-string
+        </v-icon>
+      </template>
+    </v-tooltip>
+
+    <span v-if="showDialogue">
+      <v-dialog v-model="showDialogue" max-width="600">
+        <v-card>
+          <v-toolbar color="primary" dark class="custom-toolbar">
+            <p class="mb-5">Set Additional Fees</p>
+          </v-toolbar>
+          <v-card-text>
+            Additional fees will be added to your node {{ $props.nodeId }} (for the special hardware you’re providing
+            e.g. GPUs) while renting.
+          </v-card-text>
+          <div class="pt-6 px-6">
+            <form-validator v-model="valid">
+              <input-validator
+                :value="fee"
+                :rules="[
+                  validators.required('Fee is required.'),
+                  validators.isNumeric('Fee must be a valid number.'),
+                  validators.min('Fee must be a 0 or more.', 0),
+                ]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="Fee is in USD/month">
+                  <v-text-field
+                    v-model="fee"
+                    v-bind:="props"
+                    suffix="USD/month"
+                    outlined
+                    label="Additional Fees"
+                    :disabled="isSetting"
+                  ></v-text-field>
+                </input-tooltip>
+              </input-validator>
+            </form-validator>
+          </div>
+          <v-card-actions class="justify-end px-5 pb-5 pt-0">
+            <v-btn
+              color="primary"
+              variant="tonal"
+              @click="setExtraFee()"
+              :loading="isSetting"
+              :disabled="!valid || isSetting || isDisabled"
+              >Save</v-btn
+            >
+            <v-btn @click="showDialogue = false" class="grey lighten-2 black--text">Close</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import { onMounted, ref, watch } from "vue";
+
+import { useGrid } from "../../stores";
+import { createCustomToast, ToastType } from "../../utils/custom_toast";
+
+export default {
+  name: "SetExtraFee",
+  props: {
+    nodeId: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const showDialogue = ref(false);
+    const isAdding = ref(false);
+    const gridStore = useGrid();
+    const valid = ref(false);
+    const isSetting = ref(false);
+    const fee = ref<number>(0);
+    const isDisabled = ref(false);
+
+    onMounted(async () => {
+      fee.value = (await getExtraFee()) as unknown as number;
+    });
+
+    async function getExtraFee() {
+      try {
+        const extraFee = await gridStore.grid.contracts.getDedicatedNodeExtraFee({ nodeId: props.nodeId });
+        return extraFee;
+      } catch (error) {
+        console.log(error);
+      }
+    }
+
+    watch(fee, async (value, _) => {
+      const currentFee = await getExtraFee();
+      if (value == currentFee || value === null) {
+        isDisabled.value = true;
+      } else {
+        isDisabled.value = false;
+      }
+    });
+
+    async function setExtraFee() {
+      try {
+        isSetting.value = true;
+        await gridStore.grid.contracts.setDedicatedNodeExtraFee({
+          nodeId: props.nodeId,
+          extraFee: +fee.value,
+        });
+        createCustomToast("Additional fee is set successfully.", ToastType.success);
+        await getExtraFee();
+      } catch (error) {
+        createCustomToast("Failed to set additional fees!", ToastType.danger);
+      } finally {
+        isSetting.value = false;
+      }
+    }
+
+    return {
+      showDialogue,
+      isAdding,
+      valid,
+      fee,
+      isSetting,
+      isDisabled,
+      setExtraFee,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.custom-toolbar {
+  height: 2.5rem !important;
+  padding-left: 10px;
+}
+</style>
diff --git a/packages/playground/src/dashboard/components/user_farms.vue b/packages/playground/src/dashboard/components/user_farms.vue
new file mode 100644
index 0000000000..bd48575510
--- /dev/null
+++ b/packages/playground/src/dashboard/components/user_farms.vue
@@ -0,0 +1,345 @@
+<template v-if="farms">
+  <div class="my-6">
+    <v-text-field
+      class="mb-6"
+      v-model="search"
+      label="Search farm by ID or farm name"
+      single-line
+      hide-details
+    ></v-text-field>
+    <v-data-table-server
+      :loading="loading"
+      :items-length="farmsCount"
+      :search="search"
+      :headers="headers"
+      :items="farms"
+      v-model:items-per-page="pageSize"
+      v-model:page="page"
+      show-expand
+      :expanded="expanded"
+      @update:expanded="
+        $event => {
+          if ($event.length > 0) {
+            expanded = [$event.pop()];
+          } else {
+            expanded = [];
+          }
+        }
+      "
+      expand-on-click
+      @update:options="getUserFarms"
+      :hover="true"
+      :items-per-page-options="[
+        { value: 5, title: '5' },
+        { value: 10, title: '10' },
+        { value: 15, title: '15' },
+        { value: 50, title: '50' },
+      ]"
+      return-object
+    >
+      <template v-slot:top>
+        <v-toolbar flat color="primary">
+          <v-toolbar-title class="mb-6 text-subtitle-1">Your Farms</v-toolbar-title>
+        </v-toolbar>
+      </template>
+      <template v-slot:expanded-row="{ columns, item }">
+        <tr>
+          <td :colspan="columns.length">
+            <v-row>
+              <v-col cols="12" class="mt-4">
+                <card-details
+                  :loading="false"
+                  title="Farm Details"
+                  icon="mdi-silo"
+                  :items="getFarmDetails(item.raw)"
+                ></card-details>
+              </v-col>
+            </v-row>
+            <PublicIPsTable :farmId="item.raw.farmId" />
+            <v-row class="d-flex justify-center pb-5">
+              <v-card-actions>
+                <v-btn class="bg-primary" v-bind:href="'https://v3.bootstrap.grid.tf/'" target="blank"
+                  >Bootstrap Node Image</v-btn
+                >
+                <v-btn class="bg-primary" @click="showDialogue = true">Add/Edit Stellar Payout Address</v-btn>
+                <v-btn v-if="network == 'main'" class="bg-primary" @click="downloadFarmReceipts(item.value.farmId)"
+                  >Download Minting Receipts</v-btn
+                >
+              </v-card-actions>
+            </v-row>
+          </td>
+        </tr>
+
+        <v-container v-if="showDialogue">
+          <v-dialog v-model="showDialogue" max-width="600">
+            <v-card>
+              <v-toolbar color="primary" dark>
+                <v-toolbar-title class="custom-toolbar_title mb-6"> Add/Edit Stellar V2 Address </v-toolbar-title>
+              </v-toolbar>
+              <div class="pt-6 px-6">
+                <form-validator v-model="valid">
+                  <input-validator
+                    :value="address"
+                    :rules="[validators.required('Address is required.'), customStellarValidation]"
+                    #="{ props }"
+                  >
+                    <v-text-field
+                      v-model="address"
+                      v-bind="props"
+                      outlined
+                      label="Stellar Wallet Address"
+                    ></v-text-field>
+                  </input-validator>
+                </form-validator>
+              </div>
+              <v-card-actions class="justify-end px-5 pb-5 pt-0">
+                <v-btn
+                  color="primary"
+                  variant="tonal"
+                  @click="setStellarAddress(item.raw.farmId, address)"
+                  :loading="isAdding"
+                  :disabled="!valid || isAdding"
+                  >Submit</v-btn
+                >
+                <v-btn @click="showDialogue = false" class="grey lighten-2 black--text">Close</v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-dialog>
+        </v-container>
+      </template>
+    </v-data-table-server>
+  </div>
+</template>
+
+<script lang="ts">
+import type { Farm } from "@threefold/gridproxy_client";
+import { jsPDF } from "jspdf";
+import { debounce } from "lodash";
+import { StrKey } from "stellar-sdk";
+import { onMounted, ref } from "vue";
+
+import { gridProxyClient } from "@/clients";
+import CardDetails from "@/components/node_details_cards/card_details.vue";
+import { useGrid, useProfileManager } from "@/stores";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
+import {
+  generateNodeSummary,
+  generateReceipt,
+  getNodeAvailability,
+  getNodeMintingFixupReceipts,
+  type NodeInterface,
+} from "@/utils/node";
+
+import PublicIPsTable from "./public_ips_table.vue";
+
+export default {
+  name: "UserFarms",
+  components: {
+    PublicIPsTable,
+    CardDetails,
+  },
+  setup(_, context) {
+    const gridStore = useGrid();
+    const profile = useProfileManager().profile;
+    const twinId = profile!.twinId;
+    const search = ref<string>();
+    const headers = [
+      {
+        title: "Farm ID",
+        align: "center",
+        key: "farmId",
+        sortable: false,
+      },
+      {
+        title: "Farm Name",
+        align: "center",
+        key: "name",
+        sortable: false,
+      },
+      {
+        title: "Linked Twin ID",
+        align: "center",
+        key: "twinId",
+        sortable: false,
+      },
+      {
+        title: "Certification Type",
+        align: "center",
+        key: "certificationType",
+        sortable: false,
+      },
+    ] as any[];
+    const loading = ref(false);
+    const page = ref<number>(1);
+    const pageSize = ref(10);
+    const expanded = ref<any[]>();
+    const farms = ref<Farm[]>();
+    const farmsCount = ref();
+    const showDialogue = ref(false);
+    const valid = ref(false);
+    const address = ref();
+    const isValidAddress = ref(false);
+    const isAdding = ref(false);
+    const network = process.env.NETWORK || (window as any).env.NETWORK;
+
+    onMounted(async () => {
+      await getUserFarms();
+    });
+
+    const reloadFarms = debounce(getUserFarms, 20000);
+    context.expose({ reloadFarms });
+    function filter(items: Farm[]) {
+      const start = (page.value - 1) * pageSize.value;
+      const end = start + pageSize.value;
+
+      let filteredItems;
+      if (search.value) {
+        filteredItems = items.filter(
+          item => item.name.toLowerCase().includes(search.value!.toLowerCase()) || item.farmId == +search.value!,
+        );
+      }
+
+      const paginated = filteredItems ? filteredItems.slice(start, end) : items;
+
+      return paginated;
+    }
+
+    async function getUserFarms() {
+      try {
+        const { data } = await gridProxyClient.farms.list({
+          twinId,
+          page: page.value,
+          size: pageSize.value,
+        });
+
+        const filteredFarms = filter(data);
+        farms.value = filteredFarms as unknown as Farm[];
+        farmsCount.value = filteredFarms.length;
+      } catch (error) {
+        console.log(error);
+        createCustomToast("Failed to get user farms!", ToastType.danger);
+      } finally {
+        loading.value = false;
+      }
+    }
+
+    async function setStellarAddress(farmId: number, stellarAddress: string) {
+      try {
+        isAdding.value = true;
+        await gridStore.grid.farms.addStellarAddress({ farmId, stellarAddress });
+        createCustomToast("Address Added successfully!", ToastType.success);
+        showDialogue.value = false;
+        createCustomToast("Table may take sometime to update the changes.", ToastType.info);
+        await reloadFarms();
+      } catch (error) {
+        console.log(error);
+        createCustomToast("Failed to add address!", ToastType.danger);
+      } finally {
+        isAdding.value = false;
+      }
+    }
+
+    function customStellarValidation() {
+      isValidAddress.value = StrKey.isValidEd25519PublicKey(address.value);
+      if (!isValidAddress.value) {
+        return {
+          message: "Address is not valid.",
+        };
+      }
+      return undefined;
+    }
+
+    const copy = (address: string) => {
+      navigator.clipboard.writeText(address);
+      createCustomToast("Copied!", ToastType.success);
+    };
+
+    function getFarmDetails(item: any) {
+      return [
+        {
+          name: "Stellar Address",
+          value: item.stellarAddress || "-",
+          icon: item.stellarAddress ? "mdi-content-copy" : undefined,
+          callback: copy,
+          hint: "Copy the stellar address to the clipboard.",
+        },
+        { name: "Dedicated", value: item.dedicated },
+        { name: "Pricing Policy", value: item.pricingPolicyId },
+      ];
+    }
+
+    async function downloadFarmReceipts(farmId: number) {
+      // farm summary receipt
+      const docSum = new jsPDF();
+      const { data, count } = await gridProxyClient.nodes.list({
+        farmIds: farmId.toString(),
+        retCount: true,
+      });
+
+      // show toast & return if farm has no nodes
+      if (count === 0) {
+        createCustomToast("Farm has no nodes.", ToastType.info);
+        return;
+      }
+      const _nodes = data as unknown as NodeInterface[];
+      const nodesWithReceipts = _nodes.map(async (node: NodeInterface) => {
+        try {
+          node.receipts = [];
+          node.receipts = await getNodeMintingFixupReceipts(node.nodeId);
+          node.availability = await getNodeAvailability(node.nodeId);
+          console.log("node.availability", node.availability);
+        } catch (error) {
+          createCustomToast(`Couldn't download farm reciepts. ${error}`, ToastType.danger);
+        }
+
+        return node;
+      });
+      const nodes = await Promise.all(nodesWithReceipts);
+      generateNodeSummary(docSum, nodes);
+      docSum.addPage();
+
+      // each node receipt
+      nodes.map((node: any, i: number) => {
+        generateReceipt(docSum, node);
+        docSum.text(`${i + 1}`, 185, docSum.internal.pageSize.height - 10);
+        docSum.addPage();
+      });
+
+      // download the full receipts
+      docSum.save(`farm_${farmId}_receipt.pdf`);
+    }
+
+    return {
+      gridStore,
+      headers,
+      farms,
+      loading,
+      page,
+      pageSize,
+      expanded,
+      search,
+      showDialogue,
+      address,
+      valid,
+      isValidAddress,
+      isAdding,
+      farmsCount,
+      network,
+      getUserFarms,
+      setStellarAddress,
+      customStellarValidation,
+      getFarmDetails,
+      downloadFarmReceipts,
+    };
+  },
+};
+</script>
+<style scoped>
+.v-toolbar {
+  height: 2.5rem !important;
+}
+
+.custom-toolbar_title {
+  font-size: 1rem !important;
+}
+</style>
diff --git a/packages/playground/src/dashboard/components/user_nodes.vue b/packages/playground/src/dashboard/components/user_nodes.vue
new file mode 100644
index 0000000000..97106d2e09
--- /dev/null
+++ b/packages/playground/src/dashboard/components/user_nodes.vue
@@ -0,0 +1,324 @@
+<template v-if="nodes">
+  <div class="my-6">
+    <v-card color="primary rounded-0">
+      <v-card-title class="py-1 text-subtitle-1">Your Nodes</v-card-title>
+    </v-card>
+    <v-data-table-server
+      :loading="loading"
+      :items="nodes"
+      :items-length="nodesCount"
+      :items-per-page-options="[
+        { value: 5, title: '5' },
+        { value: 10, title: '10' },
+        { value: 15, title: '15' },
+        { value: 50, title: '50' },
+      ]"
+      :headers="headers"
+      v-model:page="page"
+      v-model:items-per-page="pageSize"
+      show-expand
+      :expanded="expanded"
+      @update:expanded="
+        $event => {
+          if ($event.length > 0) {
+            expanded = [$event.pop()];
+          } else {
+            expanded = [];
+          }
+        }
+      "
+      @update:options="getUserNodes"
+      :hover="true"
+      expand-on-click
+      return-object
+    >
+      <template v-slot:expanded-row="{ columns, item }">
+        <tr>
+          <td :colspan="columns.length" key="item.id">
+            <v-container>
+              <card-details
+                :loading="false"
+                title="Node Details"
+                icon="mdi-resistor-nodes"
+                :items="getNodeDetails(item.raw)"
+              ></card-details>
+            </v-container>
+            <v-expansion-panels v-model="resourcesPanel" :disabled="false" focusable>
+              <v-expansion-panel>
+                <v-expansion-panel-title class="bg-primary"> Resource Units Reserved </v-expansion-panel-title>
+                <v-expansion-panel-text>
+                  <v-row class="mt-5 mb-5">
+                    <v-col v-for="(value, key) in item.raw.total_resources" :key="key" align="center">
+                      <p class="text-center">{{ getKey(key) }}</p>
+                      <v-flex class="text-truncate">
+                        <v-tooltip bottom class="d-none">
+                          <template v-slot:activator="{ props }">
+                            <v-progress-circular
+                              v-bind="props"
+                              :rotate="-90"
+                              :size="150"
+                              :width="12"
+                              :model-value="getPercentage(item.raw, key)"
+                              class="my-3"
+                              color="primary"
+                            />
+                            <template v-if="item.raw.used_resources">
+                              <p v-if="item.raw.total_resources[key] > 1000">
+                                {{ byteToGB(item.raw.used_resources[key]) }} /
+                                {{ byteToGB(item.raw.total_resources[key]) }} GB
+                              </p>
+
+                              <p v-else-if="item.raw.total_resources[key] == 0">NA</p>
+                              <p v-else>
+                                {{ item.raw.used_resources[key] }} /
+                                {{ item.raw.total_resources[key] }}
+                              </p>
+                            </template>
+                          </template>
+                        </v-tooltip>
+                      </v-flex>
+                    </v-col>
+                  </v-row>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+            <v-expansion-panels v-if="network == 'main'" :disabled="false" focusable single model-value>
+              <v-expansion-panel class="my-3">
+                <v-expansion-panel-title class="bg-primary"> Node Statistics </v-expansion-panel-title>
+                <v-expansion-panel-text>
+                  <NodeMintingDetails :node="item.value" />
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </td>
+        </tr>
+      </template>
+
+      <template #[`item.status`]="{ item }">
+        <v-chip :color="getNodeStatusColor(item.raw.status as string).color">
+          {{ capitalize(item.raw.status as string) }}
+        </v-chip>
+      </template>
+
+      <template #[`item.actions`]="{ item }">
+        <PublicConfig
+          class="me-2"
+          :nodeId="item.raw.nodeId"
+          :farmId="item.raw.farmId"
+          v-model="item.raw.publicConfig"
+          @remove-config="(item.raw.publicConfig = $event), reloadNodes()"
+          @add-config="(item.raw.publicConfig = $event), reloadNodes()"
+        />
+        <SetExtraFee class="me-2" :nodeId="item.raw.nodeId" />
+      </template>
+    </v-data-table-server>
+  </div>
+</template>
+
+<script lang="ts">
+import moment from "moment";
+import { onMounted, ref } from "vue";
+import { capitalize } from "vue";
+
+import { gridProxyClient } from "@/clients";
+import CardDetails from "@/components/node_details_cards/card_details.vue";
+import { useProfileManager } from "@/stores";
+import type { NodeDetailsCard } from "@/types";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
+import { getNodeStatusColor } from "@/utils/get_nodes";
+import { calculateUptime, getNodeAvailability, getNodeMintingFixupReceipts, type NodeInterface } from "@/utils/node";
+
+import NodeMintingDetails from "./NodeMintingDetails.vue";
+import PublicConfig from "./public_config.vue";
+import SetExtraFee from "./set_extra_fee.vue";
+
+export default {
+  name: "UserNodes",
+  components: {
+    NodeMintingDetails,
+    PublicConfig,
+    SetExtraFee,
+    CardDetails,
+  },
+  setup() {
+    const profileManager = useProfileManager();
+    const loading = ref(false);
+    const page = ref<number>(1);
+    const pageSize = ref(10);
+    const nodes = ref<NodeInterface[]>();
+    const headers = [
+      {
+        title: "Node ID",
+        align: "center",
+        key: "nodeId",
+        sortable: false,
+      },
+      {
+        title: "Farm ID",
+        align: "center",
+        key: "farmId",
+        sortable: false,
+      },
+      {
+        title: "Country",
+        align: "center",
+        key: "country",
+        sortable: false,
+      },
+      {
+        title: "Serial Number",
+        align: "center",
+        key: "serialNumber",
+        sortable: false,
+      },
+      {
+        title: "Status",
+        align: "center",
+        key: "status",
+        sortable: false,
+      },
+      {
+        title: "Actions",
+        align: "center",
+        key: "actions",
+        sortable: false,
+      },
+    ] as any[];
+
+    const expanded = ref<string[]>();
+    const network = process.env.NETWORK || window.env.NETWORK;
+    const resourcesPanel = ref([]);
+    const receiptsPanel = ref([]);
+    const uptime = ref();
+    const nodesCount = ref();
+
+    onMounted(getUserNodes);
+
+    async function reloadNodes() {
+      setTimeout(async () => {
+        await getUserNodes();
+      }, 10000);
+    }
+
+    async function getUserNodes() {
+      try {
+        loading.value = true;
+        const twinId = profileManager.profile!.twinId;
+        const farms = await gridProxyClient.farms.list({ twinId });
+        if (!farms.data.length) {
+          nodesCount.value = 0;
+          return [];
+        }
+        const farmIds = farms.data.map(farm => farm.farmId).join(",");
+        const { data, count } = await gridProxyClient.nodes.list({
+          farmIds,
+          retCount: true,
+          page: page.value,
+          size: pageSize.value,
+        });
+
+        const _nodes = data as unknown as NodeInterface[];
+        nodesCount.value = count ?? 0;
+        const nodesWithReceipts = _nodes.map(async (node: NodeInterface) => {
+          try {
+            const network = process.env.NETWORK || (window as any).env.NETWORK;
+            node.receipts = [];
+            if (network == "main") node.receipts = await getNodeMintingFixupReceipts(node.nodeId);
+            node.availability = await getNodeAvailability(node.nodeId);
+            node.uptime = +calculateUptime(node.availability.currentPeriod, node.availability.downtime);
+          } catch (error) {
+            node.receipts = [];
+            node.used_resources = {
+              sru: 0,
+              hru: 0,
+              mru: 0,
+              cru: 0,
+            };
+            node.availability = { downtime: 0, currentPeriod: 0 };
+            node.uptime = 0;
+          }
+
+          return node;
+        });
+
+        nodes.value = await Promise.all(nodesWithReceipts);
+        return nodes.value;
+      } catch (error) {
+        console.log(error);
+        createCustomToast("Failed to get user nodes!", ToastType.danger);
+      } finally {
+        loading.value = false;
+      }
+    }
+
+    function getPercentage(item: any, type: any) {
+      if (!item.used_resources) return 0;
+      const reservedResources = item.used_resources[type];
+      const totalResources = item.total_resources[type];
+      if (reservedResources === 0 && totalResources === 0) return 0;
+      return (reservedResources / totalResources) * 100;
+    }
+
+    function byteToGB(capacity: number) {
+      return (capacity / 1024 / 1024 / 1024).toFixed(2);
+    }
+
+    function getNodeDetails(item: any): NodeDetailsCard[] {
+      return [
+        { name: "Node ID", value: item.nodeId },
+        { name: "Farm ID", value: item.farmId },
+        { name: "Twin ID", value: item.twinId },
+        { name: "Certification", value: item.certificationType },
+        { name: "First Boot at", value: moment(item.created * 1000).format("MM-DD-YY, HH:mm A") },
+        { name: "Updated at", value: moment(item.updatedAt * 1000).format("MM-DD-YY, HH:mm A") },
+        { name: "Country", value: item.country },
+        { name: "City", value: item.city },
+        { name: "Serial Number", value: item.serialNumber },
+        { name: "Pricing Policy", value: item.farmingPolicyId },
+        { name: "Uptime", value: item.uptime + "%" },
+      ];
+    }
+
+    function getKey(key: any) {
+      switch (key) {
+        case "mru":
+          return "RAM";
+        case "sru":
+          return "SSD";
+        case "hru":
+          return "HDD";
+        case "cru":
+          return "CPU";
+      }
+    }
+
+    return {
+      loading,
+      page,
+      pageSize,
+      nodes,
+      headers,
+      expanded,
+      network,
+      resourcesPanel,
+      receiptsPanel,
+      uptime,
+      nodesCount,
+      getUserNodes,
+      getNodeStatusColor,
+      getPercentage,
+      byteToGB,
+      getNodeDetails,
+      getKey,
+      capitalize,
+      reloadNodes,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.v-table .v-table__wrapper > table > tbody > tr:not(:last-child) > td {
+  border-bottom: none;
+}
+</style>
diff --git a/packages/playground/src/views/contracts_list.vue b/packages/playground/src/dashboard/contracts_list.vue
similarity index 100%
rename from packages/playground/src/views/contracts_list.vue
rename to packages/playground/src/dashboard/contracts_list.vue
diff --git a/packages/playground/src/dashboard/dao_view.vue b/packages/playground/src/dashboard/dao_view.vue
new file mode 100644
index 0000000000..ee2f793aea
--- /dev/null
+++ b/packages/playground/src/dashboard/dao_view.vue
@@ -0,0 +1,347 @@
+<template>
+  <div class="border px-4 pb-4 rounded position-relative mt-2">
+    <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-note-check-outline</v-icon>
+      <v-card-title class="pa-0">DAO</v-card-title>
+    </v-card>
+    <div class="d-flex my-12 align-center justify-center" v-if="loadingProposals">
+      <v-progress-circular :size="70" :width="7" indeterminate color="primary"></v-progress-circular>
+    </div>
+
+    <div v-else-if="proposals?.active?.length == 0 && proposals?.inactive?.length == 0">
+      <v-card class="my-3 pa-3 d-flex justify-center">
+        <h3>No proposals at this time</h3>
+      </v-card>
+    </div>
+    <div v-else>
+      <v-card>
+        <h4 class="d-flex justify-center pa-4">
+          User, you can now vote on proposals!
+          <v-icon @click="openInfoModal = true" class="mx-3"> mdi-information-outline </v-icon>
+        </h4>
+        <v-tabs v-model="activeTab" align-tabs="center">
+          <v-tab color="secondary" v-for="(tab, index) in tabs" :key="index" :value="`${index}`">{{ tab.title }}</v-tab>
+        </v-tabs>
+      </v-card>
+      <v-window v-model="activeTab">
+        <!--Active-->
+        <v-window-item v-for="(tab, index) in tabs" :key="index" :value="`${index}`">
+          <v-card>
+            <v-text-field
+              v-model="searchTerm"
+              variant="underlined"
+              label="Search by proposal description"
+              class="pa-5"
+            ></v-text-field>
+          </v-card>
+
+          <v-card class="my-3 pa-5" v-for="(proposal, i) in filteredProposals(tab.content.value)" :key="i">
+            <v-card-title class="pa-0 mb-5" v-if="proposal.action">
+              {{ proposal.action }}
+            </v-card-title>
+            <!-- <v-card-subtitle class="pb-0">
+              <p class="font-weight-bold">
+                Proposal hash: <span class="text--secondary">{{ proposal.hash }}</span>
+              </p>
+            </v-card-subtitle> -->
+            <v-card-text class="pb-0">
+              <v-row>
+                <p class="font-weight-medium mr-3">Description:</p>
+                <span class="text--secondary">
+                  {{ proposal.description }}
+                  <a v-bind:href="proposal.link" v-bind:target="'blank'">More details</a>
+                </span>
+              </v-row>
+              <v-row v-if="expired(proposal.end)">
+                <p class="font-weight-medium mr-3">You can vote until:</p>
+                <span class="text--secondary">{{ proposal.end }}</span>
+              </v-row>
+              <v-row v-else>
+                <p class="font-weight-medium mr-3">Voting ended on:</p>
+                <span class="text--secondary">{{ proposal.end }}</span>
+              </v-row>
+            </v-card-text>
+            <v-row class="my-3">
+              <v-col class="votes">
+                <v-container class="" :style="{}">
+                  <v-row v-if="expired(proposal.end)" class="d-flex justify-space-between">
+                    <v-btn
+                      :style="{ backgroundColor: '#1AA18F' }"
+                      @click="openVoteDialog(proposal.hash, true)"
+                      :disabled="loadingVote"
+                      class="text-white"
+                      >Yes <v-divider class="mx-3" vertical />{{ proposal.ayes.length }}
+                    </v-btn>
+                    <div class="d-flex align-center text-center pr-2">
+                      <span class="px-1"
+                        >Threshold: {{ proposal.nayes.length + proposal.ayes.length }}/{{ proposal.threshold }}
+                      </span>
+                    </div>
+                    <v-btn
+                      color="grey lighten-2 text-black"
+                      @click="openVoteDialog(proposal.hash, false)"
+                      :disabled="loadingVote"
+                      >No <v-divider class="mx-3" vertical />{{ proposal.nayes.length }}
+                    </v-btn>
+                  </v-row>
+                </v-container>
+                <v-container :style="{ width: '100%' }" v-if="proposal.ayesProgress > 0 || proposal.nayesProgress > 0">
+                  <v-row v-if="expired(proposal.end)" class="">
+                    <div :style="{ width: `${proposal.ayesProgress}%` }">
+                      <v-progress-linear
+                        :height="24"
+                        color="primary"
+                        v-model="proposal.ayesProgress"
+                        :style="{
+                          backgroundColor: '#1AA18F',
+                          marginRight: 'auto',
+                        }"
+                      >
+                        <span class=""
+                          >{{
+                            !!(proposal.ayesProgress % 1) ? proposal.ayesProgress.toFixed(2) : proposal.ayesProgress
+                          }}%</span
+                        >
+                      </v-progress-linear>
+                    </div>
+                    <div :style="{ width: `${proposal.nayesProgress}%` }">
+                      <v-progress-linear
+                        :height="24"
+                        color="#9e9e9e"
+                        v-model="proposal.nayesProgress"
+                        :style="{
+                          backgroundColor: '#9e9e9e',
+                          marginRight: 'auto',
+                        }"
+                      >
+                        <v-row class="d-flex justify-center">
+                          <span class="text-black"
+                            >{{
+                              !!(proposal.nayesProgress % 1)
+                                ? proposal.nayesProgress.toFixed(2)
+                                : proposal.nayesProgress
+                            }}%</span
+                          >
+                        </v-row>
+                      </v-progress-linear>
+                    </div>
+                  </v-row>
+                  <v-row v-else justify="center" class="">
+                    <v-progress-linear
+                      v-if="proposal.ayesProgress > proposal.nayesProgress"
+                      rounded
+                      v-model="proposal.ayesProgress"
+                      color="primary"
+                      height="24"
+                      :style="{
+                        width: '100%',
+                        color: '#fff',
+                      }"
+                    >
+                      <template v-slot:default="{ value }">
+                        <strong class="mx-3">Accepted </strong>
+                        <span>{{ !!(value % 1) ? value.toFixed(2) : value }}%</span>
+                      </template>
+                    </v-progress-linear>
+                    <v-progress-linear
+                      v-else
+                      rounded
+                      v-model="proposal.nayesProgress"
+                      color="grey lighten-2"
+                      backgroundColor="#e0e0e0"
+                      height="24"
+                      :style="{
+                        width: '100%',
+                        color: '#333',
+                      }"
+                    >
+                      <template v-slot:default="{ value }">
+                        <strong class="mx-3">Rejected </strong>
+                        <span>{{ !!(value % 1) ? value.toFixed(2) : value }}%</span>
+                      </template>
+                    </v-progress-linear>
+                  </v-row>
+                </v-container>
+              </v-col>
+            </v-row>
+          </v-card>
+        </v-window-item>
+      </v-window>
+      <v-dialog v-model="openVDialog" max-width="600" scrollable>
+        <v-card>
+          <v-card-title>Cast Vote</v-card-title>
+          <v-card-text>
+            <form-validator v-model="isValidFarm">
+              <input-validator :value="selectedFarm" :rules="[validators.required('Required field')]" #="{ props }">
+                <input-tooltip tooltip="Select farm you wish to vote with">
+                  <v-select
+                    :items="userFarms"
+                    :item-title="item => `${item.name}`"
+                    :item-value="item => item.farmID"
+                    label="Select a farm"
+                    v-model="selectedFarm"
+                    v-bind="props"
+                  >
+                  </v-select>
+                </input-tooltip>
+              </input-validator>
+            </form-validator>
+          </v-card-text>
+          <v-card-actions class="justify-end">
+            <v-btn @click="castVote" :loading="loadingVote" color="primary white--text" :disabled="!isValidFarm"
+              >Vote</v-btn
+            >
+            <v-btn @click="openVDialog = false" color="grey lighten-2 black--text">Close</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+      <v-dialog v-model="openInfoModal" width="50vw">
+        <v-card>
+          <v-card-title class="text-h5"> Proposals Information </v-card-title>
+
+          <v-card-text>
+            <div class="textContainer">
+              <h2>General</h2>
+              <span>A proposal can be created by one of the council members of tfchain.</span>
+              <span> Once a proposal has reached it's timelimit, voting stops and a proposal can be closed.</span>
+              <span>
+                A proposal is either approved or dissapproved based on the majority of the weights of yes / no votes
+                (50%).</span
+              >
+              <span>
+                A minimal participation threshold must be met. If there are not enough votes and the timelimit is
+                reached, the proposal is dissapproved.</span
+              >
+              <br />
+              <br />
+              <h2>How do we count weight:</h2>
+              <span
+                >Votes are weighted based on the farmers stake in the network. One vote by default is 1 weight.</span
+              >
+              <span> If the farmers has nodes, the weight of the vote is calulcated as following:</span>
+              <span
+                ><b>
+                  The farmer's vote weight is the sum of all the farmer's nodes weight. A node's weight is calculated
+                  as: node CU * 2 + node SU.</b
+                ></span
+              >
+            </div>
+          </v-card-text>
+
+          <v-divider></v-divider>
+
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn @click="openInfoModal = false"> Close </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { Proposal, Proposals } from "@threefold/tfchain_client";
+import type moment from "moment";
+import { createToast } from "mosha-vue-toastify";
+import { onMounted, ref } from "vue";
+
+import { useProfileManager } from "../stores";
+import type { FarmInterface } from "../types";
+import { getFarms } from "../utils/get_farms";
+import { getGrid } from "../utils/grid";
+
+const loadingProposals = ref(true);
+const activeTab = ref(0);
+const activeProposals = ref<Proposal[]>();
+const inactiveProposals = ref<Proposal[]>();
+const proposals = ref<Proposals>();
+const searchTerm = ref("");
+const openInfoModal = ref(false);
+const openVDialog = ref(false);
+const castedVote = ref(false);
+const loadingVote = ref(false);
+const isValidFarm = ref(false);
+const selectedProposal = ref("");
+const selectedFarm = ref();
+const userFarms = ref<FarmInterface[]>();
+
+const profileManager = useProfileManager();
+const profile = ref(profileManager.profile!);
+const tabs = [
+  { title: "Active", content: activeProposals },
+  { title: "Executable", content: inactiveProposals },
+];
+
+onMounted(async () => {
+  const grid = await getGrid(profile.value);
+
+  if (grid) {
+    proposals.value = await grid?.dao.get();
+    activeProposals.value = proposals.value.active.filter(proposal => proposal.hash);
+    inactiveProposals.value = proposals.value.inactive.filter(proposal => proposal.hash);
+
+    userFarms.value = await getFarms(grid, { ownedBy: profile.value.twinId }, {});
+    loadingProposals.value = false;
+  }
+});
+function expired(proposalEnd: moment.Moment) {
+  return proposalEnd.isAfter(Date.now());
+}
+function openVoteDialog(hash: any, vote: boolean) {
+  openVDialog.value = true;
+  castedVote.value = vote;
+  selectedProposal.value = hash;
+}
+function filteredProposals(proposals: Proposal[] | undefined) {
+  if (searchTerm.value.length) {
+    if (proposals) {
+      return proposals.filter(proposal => proposal.description.includes(searchTerm.value));
+    }
+  }
+  return proposals;
+}
+async function castVote() {
+  loadingVote.value = true;
+  const grid = await getGrid(profile.value);
+
+  if (grid) {
+    try {
+      await grid.dao.vote({
+        address: profile.value.address,
+        farmId: selectedFarm.value,
+        approve: castedVote.value,
+        hash: selectedProposal.value,
+      });
+      createToast("Voted for proposal!", {
+        position: "top-right",
+        hideProgressBar: true,
+        toastBackgroundColor: "#1aa18f",
+        timeout: 5000,
+        showIcon: true,
+        type: "success",
+      });
+    } catch (err) {
+      createToast(`Vote Failed!`, {
+        position: "top-right",
+        hideProgressBar: true,
+        toastBackgroundColor: "#FF5252",
+        timeout: 5000,
+        showIcon: true,
+        type: "danger",
+      });
+    }
+  }
+  loadingVote.value = false;
+}
+</script>
+<style scoped>
+.custom-container {
+  width: 80%;
+}
+.votes {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/packages/playground/src/dashboard/dedicated_nodes_view.vue b/packages/playground/src/dashboard/dedicated_nodes_view.vue
new file mode 100644
index 0000000000..97c789cb15
--- /dev/null
+++ b/packages/playground/src/dashboard/dedicated_nodes_view.vue
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <div class="border px-4 pb-4 rounded position-relative mt-2">
+      <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+        <v-icon size="30" class="pr-3">mdi-resistor-nodes</v-icon>
+        <v-card-title class="pa-0" color="white">Dedicated Nodes</v-card-title>
+      </v-card>
+
+      <!-- Table -->
+      <nodes-table />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import NodesTable from "@/dashboard/components/dedicated_nodes_table.vue";
+
+export default {
+  name: "Dedicated Node",
+  components: {
+    NodesTable,
+  },
+};
+</script>
+
+<style>
+.v-data-table__td {
+  font-size: 0.875rem;
+}
+
+.v-table .v-btn {
+  font-size: 0.875rem !important;
+}
+</style>
diff --git a/packages/playground/src/dashboard/farms_view.vue b/packages/playground/src/dashboard/farms_view.vue
new file mode 100644
index 0000000000..26a5fa5ce3
--- /dev/null
+++ b/packages/playground/src/dashboard/farms_view.vue
@@ -0,0 +1,37 @@
+<template>
+  <v-container>
+    <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-silo</v-icon>
+      <v-card-title class="pa-0 font-weight-bold">Farms</v-card-title>
+    </v-card>
+
+    <CreateFarm v-model:name="name" class="mt-4" :userFarms="userFarms" />
+    <UserFarms ref="userFarms" />
+    <UserNodes />
+  </v-container>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+
+import CreateFarm from "./components/create_farm.vue";
+import UserFarms from "./components/user_farms.vue";
+import UserNodes from "./components/user_nodes.vue";
+
+export default {
+  name: "DashboardFarms",
+  components: {
+    UserNodes,
+    UserFarms,
+    CreateFarm,
+  },
+  setup() {
+    const name = ref<string>("");
+    const userFarms = ref();
+    return {
+      name,
+      userFarms,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/dashboard/simulator_view.vue b/packages/playground/src/dashboard/simulator_view.vue
new file mode 100644
index 0000000000..a9b84f581f
--- /dev/null
+++ b/packages/playground/src/dashboard/simulator_view.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="border px-4 pb-4 rounded position-relative mt-2">
+    <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-chart-line</v-icon>
+      <v-card-title class="pa-0">Farming Calculator</v-card-title>
+    </v-card>
+
+    <v-card class="my-3 pa-2">
+      <v-card-title class="font-weight-bold">Disclaimer</v-card-title>
+      <v-card-text>
+        Simulations are NOT investment advice nor should they be looked at in this way. The scenarios shown are by no
+        means a guarantee and no one can predict the future of yields exactly as they are heavily dependent on factors
+        beyond anyone’s control. The DAO could also decide to change parameters or farming, which could have a different
+        result. We invite the community to review and give feedback and make proposals for necessary changes here
+      </v-card-text>
+    </v-card>
+    <v-row>
+      <v-col cols="12">
+        <v-autocomplete
+          label="Choose Configuration"
+          :items="[...configuration]"
+          return-object
+          item-title="name"
+          v-model="chosenConfig"
+        />
+      </v-col>
+    </v-row>
+    <SimulatorFarming :profile="activeProfile" :chosenConfig="chosenConfig" v-if="chosenConfig != ''" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+
+import { ProfileTypes } from "@/types";
+
+import SimulatorFarming, { createFarmingProfile } from "../components/simulator.vue";
+const activeProfile = ref(createFarmingProfile());
+
+const configuration = ["DIY", "Titan v2.1"];
+const chosenConfig = ref("");
+
+watch([chosenConfig], () => {
+  if (chosenConfig.value == "Titan v2.1") {
+    // activeProfile.value = { type:ProfileTypes.TITAN, name: "Titan v2.1", memory: 32,cpu:8, hdd: 0, ssd: 1000, price: 0.08, priceAfter5Years: 1, investmentCostHW: 800};
+    activeProfile.value.type = ProfileTypes.TITAN;
+    activeProfile.value.name = "Titan v2.1";
+    activeProfile.value.memory = 32;
+    activeProfile.value.cpu = 8;
+    activeProfile.value.hdd = 0;
+    activeProfile.value.ssd = 1000;
+    activeProfile.value.price = 0.08;
+    activeProfile.value.priceAfter5Years = 1;
+    activeProfile.value.investmentCostHW = 800;
+  } else {
+    activeProfile.value.type = ProfileTypes.DIY;
+    activeProfile.value.name = "DIY";
+    activeProfile.value.memory = 32;
+    activeProfile.value.cpu = 8;
+    activeProfile.value.hdd = 10000;
+    activeProfile.value.ssd = 1000;
+    activeProfile.value.price = 0.08;
+    activeProfile.value.priceAfter5Years = 1;
+  }
+});
+</script>
diff --git a/packages/playground/src/dashboard/transfer_view.vue b/packages/playground/src/dashboard/transfer_view.vue
new file mode 100644
index 0000000000..834e741165
--- /dev/null
+++ b/packages/playground/src/dashboard/transfer_view.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="border px-4 pb-4 rounded position-relative mt-2">
+    <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+      <v-icon size="30" class="pr-3">mdi-account-arrow-right-outline</v-icon>
+      <v-card-title class="pa-0">Transfer TFTs on the TFChain</v-card-title>
+    </v-card>
+    <v-card>
+      <v-tabs v-model="activeTab" align-tabs="center">
+        <v-tab :value="0" color="secondary">By Twin ID</v-tab>
+        <v-tab :value="1" color="secondary">By Address</v-tab>
+      </v-tabs>
+      <v-window v-model="activeTab">
+        <!-- TwinID Transfer -->
+        <v-window-item :value="0">
+          <v-card class="pa-5 my-5" flat>
+            <form-validator v-model="isValidTwinIDTransfer">
+              <input-validator
+                :value="recipientTwinId"
+                :rules="[
+                  validators.required('Recipient Twin ID is required'),
+                  validators.isNotEmpty('Invalid Twin ID'),
+                  validators.isNumeric('Twin ID should be a number'),
+                  validators.min('Twin ID should be more than 0', 1),
+                  isSameTwinID,
+                ]"
+                :async-rules="[isValidTwinID]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="Twin ID of Recipient Account">
+                  <v-text-field label="Recipient Twin ID:" v-bind="props" v-model="recipientTwinId"></v-text-field>
+                </input-tooltip>
+              </input-validator>
+
+              <input-validator
+                v-if="!loadingBalance"
+                :value="transferAmount"
+                :rules="[
+                  validators.required('Transfer amount is required '),
+                  validators.isNumeric('Amount should be a number.'),
+                  validators.min('Amount must be greater than 0', 0.00000000001),
+                  validators.max('Insufficient funds', freeBalance),
+                ]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="0.01 transaction fee will be deducted">
+                  <v-text-field label="Transfer Amount:" v-bind="props" v-model.number="transferAmount"></v-text-field>
+                </input-tooltip>
+              </input-validator>
+              <strong v-else>Loading...</strong>
+            </form-validator>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn @click="clearInput" class="primary white--text">Clear</v-btn>
+              <v-btn
+                color="primary"
+                variant="tonal"
+                :loading="loadingTwinIDTransfer"
+                :disabled="!isValidTwinIDTransfer"
+                @click="submitFormTwinID"
+                >Send</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-window-item>
+        <!-- Address Transfer -->
+
+        <v-window-item :value="1">
+          <v-card class="pa-5 my-5" flat>
+            <form-validator v-model="isValidAddressTransfer">
+              <input-validator
+                :value="recipientAddress"
+                :rules="[
+                  validators.required('Recipient address is required '),
+                  validators.isAlphanumeric('Invalid Address'),
+                  isSameAddress,
+                ]"
+                :async-rules="[isValidAddress]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="Address of Recipient Account">
+                  <v-text-field label="Recipient Address:" v-model="recipientAddress" v-bind="props"> </v-text-field>
+                </input-tooltip>
+              </input-validator>
+              <input-validator
+                v-if="!loadingBalance"
+                :value="transferAmount"
+                :rules="[
+                  validators.required('Transfer amount is required '),
+                  validators.isNumeric('Amount should be a number.'),
+                  validators.min('Amount must be greater than 0', 0.00000000001),
+                  validators.max('Insufficient funds', freeBalance),
+                ]"
+                #="{ props }"
+              >
+                <input-tooltip tooltip="0.01 transaction fee will be deducted">
+                  <v-text-field label="Transfer Amount:" v-bind="props" v-model.number="transferAmount"></v-text-field>
+                </input-tooltip>
+              </input-validator>
+              <strong v-else>Loading...</strong>
+            </form-validator>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn @click="clearInput" class="primary white--text">Clear</v-btn>
+
+              <v-btn
+                color="primary"
+                variant="tonal"
+                :loading="loadingAddressTransfer"
+                :disabled="!isValidAddressTransfer"
+                @click="submitFormAddress"
+                >Send</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-window-item>
+      </v-window>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Keyring } from "@polkadot/keyring";
+import type { Twin } from "@threefold/tfchain_client";
+import { onMounted, ref } from "vue";
+
+import { useProfileManagerController } from "../components/profile_manager_controller.vue";
+import { useProfileManager } from "../stores";
+import { createCustomToast, ToastType } from "../utils/custom_toast";
+import { getGrid, loadBalance } from "../utils/grid";
+
+const profileManagerController = useProfileManagerController();
+const activeTab = ref(0);
+const recipientTwinId = ref("");
+const isValidTwinIDTransfer = ref(false);
+const transferAmount = ref(1);
+const loadingTwinIDTransfer = ref(false);
+const loadingAddressTransfer = ref(false);
+const isValidAddressTransfer = ref(false);
+const recipientAddress = ref("");
+const profileManager = useProfileManager();
+const profile = ref(profileManager.profile!);
+const loadingBalance = ref(true);
+const recepTwinFromAddress = ref<Twin>();
+const receptTwinFromTwinID = ref<Twin>();
+const freeBalance = ref(0);
+onMounted(async () => {
+  await getFreeBalance();
+});
+function isSameTwinID(value: string) {
+  if (parseInt(value.trim()) == profile.value?.twinId) {
+    return { message: "Cannot transfer to yourself" };
+  }
+}
+async function isValidTwinID(value: string) {
+  const grid = await getGrid(profile.value);
+  try {
+    if (grid) {
+      receptTwinFromTwinID.value = await grid.twins.get({ id: parseInt(value.trim()) });
+      if (receptTwinFromTwinID.value == null) {
+        return { message: "Invalid Twin ID. This ID has no Twin." };
+      }
+    }
+  } catch (err) {
+    return { message: "Invalid Twin ID. This ID has no Twin." };
+  }
+}
+function isSameAddress(value: string) {
+  if (value.trim() == profile.value?.address) {
+    return { message: "Cannot transfer to yourself" };
+  }
+}
+async function isValidAddress() {
+  const grid = await getGrid(profile.value);
+  const keyring = new Keyring({ type: "sr25519" });
+  try {
+    keyring.addFromAddress(recipientAddress.value.trim());
+  } catch (error) {
+    return { message: "Invalid address." };
+  }
+  try {
+    if (grid) {
+      const twinId = await grid.twins.get_twin_id_by_account_id({
+        public_key: recipientAddress.value.trim(),
+      });
+      recepTwinFromAddress.value = await grid.twins.get({ id: twinId });
+      if (recepTwinFromAddress.value == null) {
+        return { message: "Twin ID doesn't exist" };
+      }
+    }
+  } catch (err) {
+    return { message: "Invalid address. Twin ID doesn't exist" };
+  }
+}
+function clearInput() {
+  transferAmount.value = 1;
+  recipientTwinId.value = "";
+  recipientAddress.value = "";
+}
+async function getFreeBalance() {
+  const grid = await getGrid(profile.value);
+  if (grid) {
+    loadingBalance.value = true;
+    const balance = await loadBalance(grid);
+    freeBalance.value = balance.free;
+    loadingBalance.value = false;
+  }
+}
+async function transfer(recipientTwin: Twin) {
+  const grid = await getGrid(profile.value);
+  try {
+    if (grid) {
+      await grid.balance.transfer({ address: recipientTwin.accountId, amount: transferAmount.value });
+      createCustomToast("Transaction Complete!", ToastType.success);
+      profileManagerController.reloadBalance();
+      await getFreeBalance();
+    }
+  } catch (err) {
+    createInvalidTransferToast("transfer failed!");
+  }
+}
+async function submitFormAddress() {
+  loadingAddressTransfer.value = true;
+  await transfer(recepTwinFromAddress.value!);
+  loadingAddressTransfer.value = false;
+}
+function createInvalidTransferToast(message: string) {
+  createCustomToast(message, ToastType.danger);
+}
+async function submitFormTwinID() {
+  const grid = await getGrid(profile.value);
+  if (grid) {
+    const twinDetails = await grid.twins.get({ id: parseInt(recipientTwinId.value.trim()) });
+    if (twinDetails != null) {
+      loadingTwinIDTransfer.value = true;
+      await transfer(twinDetails);
+      loadingTwinIDTransfer.value = false;
+    } else {
+      createInvalidTransferToast("twin ID doesn't exist");
+      loadingTwinIDTransfer.value = false;
+    }
+  }
+}
+</script>
diff --git a/packages/playground/src/dashboard/twin_view.vue b/packages/playground/src/dashboard/twin_view.vue
new file mode 100644
index 0000000000..f3592f3c74
--- /dev/null
+++ b/packages/playground/src/dashboard/twin_view.vue
@@ -0,0 +1,219 @@
+<template>
+  <div>
+    <v-container v-if="editingTwin">
+      <v-dialog v-model="editingTwin" max-width="600">
+        <v-card>
+          <v-toolbar color="primary" dark class="custom-toolbar">Edit Twin</v-toolbar>
+          <div class="text-h2 pa-10">
+            <v-text-field v-model="relay" outlined label="Relay" :error-messages="errorMsg"></v-text-field>
+          </div>
+          <v-card-actions class="justify-end pa-5">
+            <v-btn @click="editingTwin = false" class="grey lighten-2 black--text">Close</v-btn>
+            <v-btn @click="UpdateRelay" class="primary white--text">Save</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-container>
+
+    <v-dialog v-model="openVotePopup" max-width="600">
+      <v-card>
+        <v-toolbar color="primary" dark class="custom-toolbar bold-text">Vote Reminder</v-toolbar>
+        <v-card-text>There are {{ numberOfProposalsToVoteOn }} active proposals you can vote on now</v-card-text>
+        <v-card-actions class="justify-end pa-5">
+          <v-btn @click="redirectToDao" variant="elevated" color="primary" class="mr-2 text-subtitle-2">Vote</v-btn>
+          <v-btn @click="openVotePopup = false" variant="outlined" color="anchor" class="mr-2 text-subtitle-2"
+            >Close</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <div class="border px-4 pb-4 rounded position-relative mt-2">
+      <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+        <v-icon size="30" class="pr-3">mdi-account-supervisor-outline</v-icon>
+        <v-card-title class="pa-0">Twin Details</v-card-title>
+      </v-card>
+
+      <v-card>
+        <v-list class="custom-list">
+          <v-row>
+            <v-col cols="1" sm="2" class="column-style my-4">
+              <input-tooltip
+                tooltip="Your unique identifier for your twin on the ThreeFold chain."
+                :align-center="true"
+                :class="'d-flex align-center'"
+                location="right center"
+              >
+                <v-list-item class="mr-auto"> ID </v-list-item>
+              </input-tooltip>
+              <v-divider></v-divider>
+              <input-tooltip
+                tooltip="Your public address on the ThreeFold chain."
+                :align-center="true"
+                :class="'d-flex align-center'"
+                location="right center"
+              >
+                <v-list-item class="mr-auto"> Address </v-list-item>
+              </input-tooltip>
+              <v-divider></v-divider>
+              <input-tooltip
+                tooltip="A relay is a component that facilitates the reliable and secure transfer of messages between different entities within the ThreeFold ecosystem."
+                :align-center="true"
+                :class="'d-flex align-center'"
+                location="bottom end"
+              >
+                <v-list-item class="mr-auto"> Relay </v-list-item>
+              </input-tooltip>
+            </v-col>
+            <v-col cols="1" sm="10" class="my-4">
+              <v-list-item> {{ profileManager.profile?.twinId.toString() }} </v-list-item>
+              <v-divider></v-divider>
+              <v-list-item>
+                <div style="display: flex; justify-content: space-between; align-items: center">
+                  <span>{{ profileManager.profile?.address }}</span>
+                  <v-icon @click="copy(profileManager.profile?.address as string)"> mdi-content-copy </v-icon>
+                </div>
+              </v-list-item>
+              <v-divider></v-divider>
+              <v-list-item> {{ profileManager.profile?.relay }} </v-list-item>
+            </v-col>
+          </v-row>
+        </v-list>
+        <v-card-actions v-if="updateRelay" class="justify-end mx-4 mb-4">
+          <v-btn class="custom-button bg-primary" @click="editTwin">Edit</v-btn>
+        </v-card-actions>
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { generatePublicKey } from "@threefold/rmb_direct_client";
+import { onMounted, ref } from "vue";
+
+import router from "../router";
+import { useProfileManager } from "../stores";
+import type { FarmInterface } from "../types";
+import { createCustomToast, ToastType } from "../utils/custom_toast";
+import { getFarms } from "../utils/get_farms";
+import { getGrid } from "../utils/grid";
+const profileManager = useProfileManager();
+
+const editingTwin = ref(false);
+const relay = ref(profileManager.profile?.relay || "");
+const updateRelay = ref(false);
+const errorMsg = ref("");
+const openVotePopup = ref(false);
+const numberOfProposalsToVoteOn = ref(0);
+const userFarms = ref<FarmInterface[]>();
+const activeProposalsUserHasVotedOn = ref(0);
+onMounted(async () => {
+  const profile = profileManager.profile!;
+  const grid = await getGrid(profile);
+  if (!grid) {
+    createCustomToast("Fetch Grid Failed", ToastType.danger);
+
+    return;
+  }
+  userFarms.value = await getFarms(grid, { ownedBy: profile.twinId }, {});
+  if (!userFarms.value.length) {
+    return;
+  }
+  const proposals = grid.dao.get();
+  const userFarmId = userFarms.value.map(farm => farm.farmID);
+
+  const activeProposals = (await proposals)?.active;
+  const numberOfActiveProposals = activeProposals ? activeProposals.length : 0;
+
+  if (!numberOfActiveProposals) {
+    return;
+  }
+  activeProposals.forEach(proposal => {
+    if (proposal.nayes.filter(naye => userFarmId.includes(naye.farmId)).length) {
+      activeProposalsUserHasVotedOn.value++;
+    } else if (proposal.ayes.filter(aye => userFarmId.includes(aye.farmId)).length) {
+      activeProposalsUserHasVotedOn.value++;
+    }
+  });
+
+  if (activeProposalsUserHasVotedOn.value == numberOfActiveProposals) {
+    return;
+  }
+  numberOfProposalsToVoteOn.value = numberOfActiveProposals - activeProposalsUserHasVotedOn.value;
+  openVotePopup.value = true;
+});
+
+function redirectToDao() {
+  router.push({ path: "/dashboard/dao" });
+}
+onMounted(validateEdit);
+async function validateEdit() {
+  try {
+    const pk = await generatePublicKey(profileManager.profile!.mnemonic);
+    if (profileManager.profile?.relay !== window.env.RELAY_DOMAIN.replace("wss://", "")) {
+      updateRelay.value = true;
+    }
+
+    if (profileManager.profile?.pk !== pk) {
+      UpdateRelay();
+    }
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+function editTwin() {
+  console.log("editing twin");
+  editingTwin.value = true;
+}
+
+async function UpdateRelay() {
+  try {
+    const pk = await generatePublicKey(profileManager.profile!.mnemonic);
+    const grid = await getGrid(profileManager.profile!);
+    await grid?.twins.update({ relay: relay.value });
+    profileManager.updateRelay(relay.value);
+    profileManager.updatePk(pk);
+    updateRelay.value = false;
+  } catch (e) {
+    errorMsg.value = (e as any).message;
+    console.log("could not update relay or pk, Error: ", e);
+  }
+}
+
+function copy(id: string) {
+  navigator.clipboard.writeText(id);
+  createCustomToast("Address copied to clipboard", ToastType.success);
+}
+</script>
+
+<style>
+.custom-container {
+  width: 80%;
+}
+
+.custom-list {
+  overflow: hidden;
+  font-size: 1rem;
+  padding: 10px;
+}
+
+.column-style {
+  border-right: 0.1px solid #8a8a8a;
+}
+
+.custom-button {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.custom-toolbar {
+  font-size: 16px;
+  font-weight: bold;
+  padding-left: 10px;
+}
+
+.bold-text {
+  font-weight: 500;
+  padding-left: 1rem;
+}
+</style>
diff --git a/packages/playground/src/global-components.d.ts b/packages/playground/src/global-components.d.ts
index 32543d4d44..89c7a958d0 100644
--- a/packages/playground/src/global-components.d.ts
+++ b/packages/playground/src/global-components.d.ts
@@ -2,6 +2,7 @@ import type { NetworkEnv } from "@threefold/grid_client";
 
 import CopyInputWrapper from "./components/copy_input_wrapper.vue";
 import DTabs from "./components/dynamic_tabs.vue";
+import Filters from "./components/filter.vue";
 import FormValidator from "./components/form_validator.vue";
 import InputTooltip from "./components/input_tooltip.vue";
 import InputValidator from "./components/input_validator.vue";
@@ -20,6 +21,7 @@ declare module "@vue/runtime-core" {
     FormValidator: typeof FormValidator;
     ViewLayout: typeof ViewLayout;
     InputTooltip: typeof InputTooltip;
+    Filters: typeof Filters;
   }
 
   interface ComponentCustomProperties {
@@ -40,6 +42,7 @@ declare global {
       STELLAR_NETWORK: string;
       STELLAR_HORIZON_URL: string;
       TFT_ASSET_ISSUER: string;
+      MINTING_URL: string;
       TIMEOUT: number;
     };
   }
diff --git a/packages/playground/src/global.css b/packages/playground/src/global.css
new file mode 100644
index 0000000000..10447cd989
--- /dev/null
+++ b/packages/playground/src/global.css
@@ -0,0 +1,119 @@
+:root {
+  --link-color: #5695ff;
+}
+
+.app-link {
+  text-decoration: none;
+  font-weight: bold;
+  color: var(--link-color);
+  cursor: pointer;
+}
+
+.fade-leave-active,
+.fade-enter-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  pointer-events: none;
+
+  transition: opacity 1s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.capitalize {
+  text-transform: capitalize !important;
+}
+
+.v-btn {
+  text-transform: capitalize !important;
+  font-size: 1rem !important;
+}
+
+.version {
+  position: absolute;
+  bottom: 15px;
+  right: 25px;
+}
+
+.v-tooltip > .v-overlay__content {
+  /* background: var(--v-theme-surface); */
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  border-width: thin !important;
+  border-style: solid !important;
+  z-index: 99;
+  background-color: rgb(var(--v-theme-background));
+  color: var(--v-theme-text);
+  font-weight: 900;
+}
+
+a {
+  color: #5695ff !important;
+}
+
+.v-list-item__prepend {
+  width: 35px !important;
+}
+
+.v-list-item-title {
+  font-size: 0.875rem;
+}
+
+.v-list-item--density-default.v-list-item--one-line {
+  min-height: 40px;
+}
+
+.custom-toolbar-title {
+  max-width: 17rem !important;
+}
+.mosha__toast__content-wrapper {
+  margin-bottom: -2px;
+}
+.mosha__toast__slot-wrapper {
+  margin-bottom: -2px;
+}
+.mosha__icon {
+  margin-right: 6px !important;
+  margin-top: 2px;
+}
+
+.mosha__icon__dark__warning {
+  fill: #5d5d5d !important;
+}
+
+.mosha__icon__light__warning {
+  fill: #5d5d5d !important;
+}
+
+.mosha__toast__content.dark__warning {
+  color: #5d5d5d;
+}
+
+.mosha__toast__content.light__warning {
+  color: #5d5d5d;
+}
+
+.mosha__toast__close-icon.dark__warning::before {
+  color: #5d5d5d !important;
+}
+
+.mosha__toast__close-icon.light__warning::before {
+  color: #5d5d5d !important;
+}
+
+.mosha__toast {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+}
+
+.font-14 {
+  font-size: 14px !important;
+}
+
+.v-breadcrumbs-item--disabled {
+  opacity: 1;
+}
diff --git a/packages/playground/src/hooks/form_validator.ts b/packages/playground/src/hooks/form_validator.ts
index 24faec78c2..12aae3bd6c 100644
--- a/packages/playground/src/hooks/form_validator.ts
+++ b/packages/playground/src/hooks/form_validator.ts
@@ -30,8 +30,8 @@ export function useForm(): FormValidatorService | null {
   return inject(formValidatorKey, null);
 }
 
+export function useFormRef(): Ref<FormValidatorService>;
 export function useFormRef(isArray: true): Ref<FormValidatorService[]>;
-export function useFormRef(isArray: false): Ref<FormValidatorService>;
-export function useFormRef(isArray = false) {
+export function useFormRef(isArray?: true) {
   return isArray ? (ref([]) as Ref<FormValidatorService[]>) : (ref() as Ref<FormValidatorService>);
 }
diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
index 92dcf40d9e..afbf338d48 100644
--- a/packages/playground/src/main.ts
+++ b/packages/playground/src/main.ts
@@ -1,4 +1,5 @@
 import "mosha-vue-toastify/dist/style.css";
+import "./global.css";
 
 import { createPinia } from "pinia";
 import { createApp } from "vue";
diff --git a/packages/playground/src/plugins/vuetify.ts b/packages/playground/src/plugins/vuetify.ts
index 9ab93c7d4c..6c8d07e387 100644
--- a/packages/playground/src/plugins/vuetify.ts
+++ b/packages/playground/src/plugins/vuetify.ts
@@ -4,12 +4,12 @@ import "vuetify/styles";
 import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
-import { VDataTable } from "vuetify/labs/VDataTable";
-
+import { VDataTable, VDataTableServer } from "vuetify/labs/VDataTable";
 const vuetify = createVuetify({
   components: {
     ...components,
     VDataTable,
+    VDataTableServer,
   },
   directives,
   theme: {
@@ -18,17 +18,20 @@ const vuetify = createVuetify({
       dark: {
         dark: true,
         colors: {
-          primary: "#7de3c8",
-          secondary: "#14A1B8",
+          primary: "#1aa18f",
+          secondary: "#74DDC3",
+          title: "#1AA18F",
+          disclaimer: "#4D776D",
           info: "#7de3c8",
           warning: "#FFCC00",
           link: "#5695ff",
-          anchor: "#ffffff",
+          anchor: "#9e9e9e",
         },
       },
       light: {
         dark: false,
         colors: {
+          background: "#f6f6f6",
           primary: "#1AA18F",
           info: "#1AA18F",
           secondary: "#14A1B8",
diff --git a/packages/playground/src/router/index.ts b/packages/playground/src/router/index.ts
index d6f8414181..01e8691b77 100644
--- a/packages/playground/src/router/index.ts
+++ b/packages/playground/src/router/index.ts
@@ -1,3 +1,4 @@
+import { NetworkEnv } from "@threefold/grid_client";
 import { createRouter, createWebHashHistory } from "vue-router";
 
 export interface InfoMeta {
@@ -18,104 +19,495 @@ const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
-      path: "/",
-      component: () => import("../views/full_virtual_machine.vue"),
-      meta: { title: "Full Virtual Machine", info: { page: "info/full_vm.md" } },
-    },
-    {
-      path: "/vm",
-      component: () => import("../views/micro_virtual_machine.vue"),
-      meta: { title: "Micro Virtual Machine", info: { page: "info/vm.md" } },
-    },
-    {
-      path: "/kubernetes",
-      component: () => import("../views/kubernetes_view.vue"),
-      meta: { title: "Kubernetes", info: { page: "info/kubernetes.md" } },
-    },
-    {
-      path: "/caprover",
-      component: () => import("../views/caprover_view.vue"),
-      meta: { title: "Caprover", info: { page: "info/caprover.md" } },
-    },
-    {
-      path: "/peertube",
-      component: () => import("../views/peertube_view.vue"),
-      meta: { title: "Peertube", info: { page: "info/peertube.md" } },
-    },
-    {
-      path: "/funkwhale",
-      component: () => import("../views/funkwhale_view.vue"),
-      meta: { title: "Funkwhale", info: { page: "info/funkwhale.md" } },
-    },
-    {
-      path: "/mattermost",
-      component: () => import("../views/mattermost_view.vue"),
-      meta: { title: "Mattermost", info: { page: "info/mattermost.md" } },
-    },
-    {
-      path: "/discourse",
-      component: () => import("../views/discourse_view.vue"),
-      meta: { title: "Discourse", info: { page: "info/discourse.md" } },
-    },
-    {
-      path: "/taiga",
-      component: () => import("../views/taiga_view.vue"),
-      meta: { title: "Taiga", info: { page: "info/taiga.md" } },
-    },
-    {
-      path: "/owncloud",
-      component: () => import("../views/owncloud_view.vue"),
-      meta: { title: "Owncloud", info: { page: "info/owncloud.md" } },
-    },
-    {
-      path: "/nextcloud",
-      component: () => import("../views/nextcloud_view.vue"),
-      meta: { title: "Nextcloud", info: { page: "info/nextcloud.md" } },
-    },
-    {
-      path: "/presearch",
-      component: () => import("../views/presearch_view.vue"),
-      meta: { title: "Presearch", info: { page: "info/presearch.md" } },
-    },
-    {
-      path: "/subsquid",
-      component: () => import("../views/subsquid_view.vue"),
-      meta: { title: "Subsquid", info: { page: "info/subsquid.md" } },
-    },
-    {
-      path: "/casperlabs",
-      component: () => import("../views/casperlabs_view.vue"),
-      meta: { title: "Casperlabs", info: { page: "info/casperlabs.md" } },
+      path: "/dashboard",
+      children: [
+        {
+          name: "Twin",
+          path: "twin",
+          component: () => import("../dashboard/twin_view.vue"),
+          meta: { title: "Twin" },
+        },
+        {
+          path: "dao",
+          component: () => import("../dashboard/dao_view.vue"),
+          meta: { title: "Dao" },
+        },
+        {
+          path: "bridge",
+          component: () => import("../dashboard/bridge_view.vue"),
+          meta: { title: "Bridge" },
+        },
+        {
+          path: "transfer",
+          component: () => import("../dashboard/transfer_view.vue"),
+          meta: { title: "Transfer" },
+        },
+        {
+          path: "farms",
+          component: () => import("../dashboard/farms_view.vue"),
+          meta: { title: "Farms" },
+        },
+        {
+          path: "dedicated-nodes",
+          component: () => import("../dashboard/dedicated_nodes_view.vue"),
+          meta: { title: "Dedicated Nodes" },
+        },
+        {
+          path: "contracts-list",
+          component: () => import("../dashboard/contracts_list.vue"),
+          meta: {
+            title: "Contracts List",
+            info: { page: "info/contracts_list.md" },
+          },
+        },
+      ],
     },
+
     {
-      path: "/algorand",
-      component: () => import("../views/algorand_view.vue"),
-      meta: { title: "Algorand", info: { page: "info/algorand.md" } },
+      path: "/calculator",
+      children: [
+        {
+          path: "pricing",
+          component: () => import("../calculator/resource_pricing.vue"),
+          meta: { title: "Resource Pricing" },
+        },
+
+        {
+          path: "simulator",
+          component: () => import("../dashboard/simulator_view.vue"),
+          meta: { title: "Twin" },
+        },
+      ],
     },
+
     {
-      path: "/nodepilot",
-      component: () => import("../views/node_pilot.vue"),
-      meta: { title: "Node Pilot", info: { page: "info/nodepilot.md" } },
+      path: "/solutions",
+      children: [
+        {
+          path: "",
+          component: () => import("../views/solutions_view.vue"),
+        },
+        {
+          path: "fullvm",
+          component: () => import("../views/full_virtual_machine.vue"),
+          meta: {
+            title: "Full Virtual Machine",
+            info: { page: "info/full_vm.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Full Virtual Machine",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "vm",
+          component: () => import("../views/micro_virtual_machine.vue"),
+          meta: {
+            title: "Micro Virtual Machine",
+            info: { page: "info/vm.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Micro Virtual Machine",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "kubernetes",
+          component: () => import("../views/kubernetes_view.vue"),
+          meta: {
+            title: "Kubernetes",
+            info: { page: "info/kubernetes.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Kubernetes",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "caprover",
+          component: () => import("../views/caprover_view.vue"),
+          meta: {
+            title: "Caprover",
+            info: { page: "info/caprover.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Caprover",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "peertube",
+          component: () => import("../views/peertube_view.vue"),
+          meta: {
+            title: "Peertube",
+            info: { page: "info/peertube.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Peertube",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "funkwhale",
+          component: () => import("../views/funkwhale_view.vue"),
+          meta: {
+            title: "Funkwhale",
+            info: { page: "info/funkwhale.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Funkwhale",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "mattermost",
+          component: () => import("../views/mattermost_view.vue"),
+          meta: {
+            title: "Mattermost",
+            info: { page: "info/mattermost.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Mattermost",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "discourse",
+          component: () => import("../views/discourse_view.vue"),
+          meta: {
+            title: "Discourse",
+            info: { page: "info/discourse.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Discourse",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "taiga",
+          component: () => import("../views/taiga_view.vue"),
+          meta: {
+            title: "Taiga",
+            info: { page: "info/taiga.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Taiga",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "owncloud",
+          component: () => import("../views/owncloud_view.vue"),
+          meta: {
+            title: "Owncloud",
+            info: { page: "info/owncloud.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Owncloud",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "nextcloud",
+          component: () => import("../views/nextcloud_view.vue"),
+          meta: {
+            title: "Nextcloud",
+            info: { page: "info/nextcloud.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Nextcloud",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "presearch",
+          component: () => import("../views/presearch_view.vue"),
+          meta: {
+            title: "Presearch",
+            info: { page: "info/presearch.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Presearch",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "subsquid",
+          component: () => import("../views/subsquid_view.vue"),
+          meta: {
+            title: "Subsquid",
+            info: { page: "info/subsquid.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Subsquid",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "casperlabs",
+          component: () => import("../views/casperlabs_view.vue"),
+          meta: {
+            title: "Casperlabs",
+            info: { page: "info/casperlabs.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Casperlabs",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "algorand",
+          component: () => import("../views/algorand_view.vue"),
+          meta: {
+            title: "Algorand",
+            info: { page: "info/algorand.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Algorand",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "nodepilot",
+          component: () => import("../views/node_pilot.vue"),
+          meta: {
+            title: "Node Pilot",
+            info: { page: "info/nodepilot.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Node Pilot",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "wordpress",
+          component: () => import("../views/wordpress_view.vue"),
+          meta: {
+            title: "Wordpress",
+            info: { page: "info/wordpress.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Wordpress",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "umbrel",
+          component: () => import("../views/umbrel_view.vue"),
+          meta: {
+            title: "Umbrel",
+            info: { page: "info/umbrel.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Umbrel",
+                },
+              ],
+            },
+          },
+        },
+        {
+          path: "freeflow",
+          component: () => import("../views/freeflow_view.vue"),
+          meta: {
+            title: "Freeflow",
+            info: { page: "info/freeflow.md" },
+            navbarConfig: {
+              back: true,
+              path: [
+                {
+                  title: "Solutions",
+                  disabled: false,
+                  to: "/solutions",
+                },
+                {
+                  title: "Freeflow",
+                },
+              ],
+            },
+          },
+        },
+      ],
     },
+
     {
-      path: "/wordpress",
-      component: () => import("../views/wordpress_view.vue"),
-      meta: { title: "Wordpress", info: { page: "info/wordpress.md" } },
+      path: "/minting",
+      component: () => import("../views/minting_view.vue"),
+      meta: { title: "Minting" },
     },
     {
-      path: "/umbrel",
-      component: () => import("../views/umbrel_view.vue"),
-      meta: { title: "Umbrel", info: { page: "info/umbrel.md" } },
+      path: "/nodes",
+      component: () => import("@/views/nodes.vue"),
+      meta: { title: "Nodes" },
     },
     {
-      path: "/freeflow",
-      component: () => import("../views/freeflow_view.vue"),
-      meta: { title: "Freeflow", info: { page: "info/freeflow.md" } },
+      path: "/farms",
+      component: () => import("@/views/farms.vue"),
+      meta: { title: "Farms" },
     },
     {
-      path: "/contractslist",
-      component: () => import("../views/contracts_list.vue"),
-      meta: { title: "Contracts List", info: { page: "info/contracts_list.md" } },
+      path: "/stats",
+      component: () => import("@/views/stats.vue"),
+      meta: { title: "Statistics" },
     },
     {
       path: "/:pathMatch(.*)*",
diff --git a/packages/playground/src/stores/grid.ts b/packages/playground/src/stores/grid.ts
new file mode 100644
index 0000000000..0be9263423
--- /dev/null
+++ b/packages/playground/src/stores/grid.ts
@@ -0,0 +1,24 @@
+import type { GridClient } from "@threefold/grid_client";
+import { defineStore } from "pinia";
+
+import { getGrid } from "@/utils/grid";
+
+import type { Profile } from "./profile_manager";
+
+interface IGrid {
+  grid: GridClient;
+}
+
+const useGrid = defineStore("grid-client", {
+  state: (): IGrid => {
+    return { grid: null as any };
+  },
+
+  actions: {
+    async set(profile: Profile | null) {
+      this.grid = profile ? ((await getGrid(profile)) as any) : null;
+    },
+  },
+});
+
+export { useGrid };
diff --git a/packages/playground/src/stores/index.ts b/packages/playground/src/stores/index.ts
index 9dd3c8e953..538dd04ac0 100644
--- a/packages/playground/src/stores/index.ts
+++ b/packages/playground/src/stores/index.ts
@@ -1 +1,2 @@
 export { useProfileManager } from "./profile_manager";
+export { useGrid } from "./grid";
diff --git a/packages/playground/src/stores/profile_manager.ts b/packages/playground/src/stores/profile_manager.ts
index 09ca548953..8bb993379e 100644
--- a/packages/playground/src/stores/profile_manager.ts
+++ b/packages/playground/src/stores/profile_manager.ts
@@ -1,10 +1,14 @@
 import { defineStore } from "pinia";
 
+import { useGrid } from "./grid";
+
 export interface Profile {
   mnemonic: string;
   ssh: string;
   twinId: number;
   address: string;
+  relay: string;
+  pk: string;
 }
 
 interface State {
@@ -19,12 +23,23 @@ const useProfileManager = defineStore("profile-manager", {
   actions: {
     set(profile: Profile | null) {
       this.profile = profile;
+      useGrid().set(profile);
     },
     updateSSH(ssh: string) {
       if (this.profile) {
         this.profile.ssh = ssh;
       }
     },
+    updateRelay(relay: string) {
+      if (this.profile) {
+        this.profile.relay = relay;
+      }
+    },
+    updatePk(pk: string) {
+      if (this.profile) {
+        this.profile.pk = pk;
+      }
+    },
     clear() {
       this.profile = null;
     },
diff --git a/packages/playground/src/types/index.ts b/packages/playground/src/types/index.ts
index 8e575509a4..8a00754871 100644
--- a/packages/playground/src/types/index.ts
+++ b/packages/playground/src/types/index.ts
@@ -1,9 +1,49 @@
+import { CertificationType, type GridNode, type NodeStats, NodeStatus } from "@threefold/gridproxy_client";
+import { capitalize } from "vue";
 import type { VDataTable } from "vuetify/lib/labs/components";
 
+import type { AsyncRule, SyncRule } from "@/components/input_validator.vue";
 import type { INode } from "@/utils/filter_nodes";
 
 import type * as validators from "../utils/validators";
+// Input attrs
+export type InputFilterType = {
+  label: string;
+  placeholder: string;
+  value?: string;
+  rules?: [syncRules: SyncRule[], asyncRules?: AsyncRule[]];
+  error?: string;
+  type: string;
+};
+
+export enum ProfileTypes {
+  DIY,
+  TITAN,
+}
 
+export enum Certification {
+  NONE = 0,
+  CERTIFIED = 1,
+  GOLD_CERTIFIED = 2,
+}
+
+export interface FarmingProfileOptions {
+  type: ProfileTypes;
+  name: string;
+  memory: number;
+  cpu: number;
+  hdd: number;
+  ssd: number;
+  price: number;
+  priceAfter5Years: number;
+  maximumTokenPrice: number;
+  powerUtilization: number;
+  powerCost: number;
+  certified: Certification;
+  publicIp: boolean;
+  investmentCostHW: number;
+  nuRequiredPerCu: number;
+}
 export interface K8SWorker {
   name: string;
   cpu: number;
@@ -13,7 +53,7 @@ export interface K8SWorker {
   ipv6: boolean;
   planetary: boolean;
   rootFsSize: number;
-  farm?: Farm;
+  farm?: FarmInterface;
   selectedNode?: INode;
   rentedBy?: number;
   dedicated: boolean;
@@ -23,13 +63,13 @@ export interface K8SWorker {
 export interface CaproverWorker {
   selectedNode?: INode;
   name: string;
-  farm?: Farm;
+  farm?: FarmInterface;
   solution?: solutionFlavor;
   dedicated?: boolean;
   certified?: boolean;
 }
 
-export interface Farm {
+export interface FarmInterface {
   name: string;
   farmID: number;
   country?: string;
@@ -129,6 +169,12 @@ export interface GatewayNode {
   ip?: string;
 }
 
+export interface IStatistics {
+  data: number | string;
+  title: string;
+  icon: string;
+}
+
 export interface SMTPServer {
   enabled: boolean;
   username: string;
@@ -141,3 +187,168 @@ export interface SMTPServer {
 }
 
 export type Validators = typeof validators;
+
+export type NodeInputFilterType = {
+  label: string;
+  placeholder: string;
+  value?: string | undefined;
+  rules?: [syncRules: SyncRule[], asyncRules?: AsyncRule[]];
+  error?: string;
+  type: string;
+};
+
+// The input filters<nodeId, farmIds..etc> and the option filters<status, gpu...etc>
+export type MixedFilter = {
+  inputs: FilterInputs;
+  options: FilterOptions;
+};
+
+// Status, GPU, Gateway, and any other option should be add here.
+export type FilterOptions = {
+  status: NodeStatus;
+  gpu: boolean | undefined;
+  gateway: boolean | undefined;
+  page: number;
+  size: number;
+};
+
+// Input fields
+export type FilterInputs = {
+  nodeId: NodeInputFilterType;
+  farmIds: NodeInputFilterType;
+  farmName: NodeInputFilterType;
+  country: NodeInputFilterType;
+  freeSru: NodeInputFilterType;
+  freeHru: NodeInputFilterType;
+  freeMru: NodeInputFilterType;
+};
+
+export const optionsInitializer: () => FilterOptions = () => ({
+  gateway: undefined,
+  gpu: undefined,
+  page: 1,
+  size: 10,
+  status: capitalize(NodeStatus.Up) as NodeStatus,
+});
+
+import type { FilterFarmInputs } from "@/utils/filter_farms";
+import type { FilterNodeInputs } from "@/utils/filter_nodes";
+
+// The input filters<nodeId, farmIds..etc> and the option filters<status, gpu...etc>
+
+// Status, GPU, Gateway, and any other option should be add here.
+export type NodeFilterOptions = {
+  status: NodeStatus;
+  gpu: boolean | undefined;
+  gateway: boolean | undefined;
+  page: number;
+  size: number;
+};
+type TableSortOption = {
+  key: string | undefined;
+  order: boolean | "desc" | "asc" | undefined;
+};
+export type FarmFilterOptions = {
+  page?: number;
+  size?: number;
+  sortBy?: TableSortOption[];
+};
+
+export const nodeOptionsInitializer: NodeFilterOptions = {
+  gateway: undefined,
+  gpu: undefined,
+  page: 1,
+  size: 10,
+  status: capitalize(NodeStatus.Up) as NodeStatus,
+};
+
+export type ResourceWrapper = {
+  name: string;
+  value: string;
+};
+
+export type NodeDetailsCard = {
+  name: string;
+  value?: string;
+  imgSrc?: string;
+  hint?: string;
+  icon?: string;
+  callback?: (value: string) => void;
+  nameHint?: string; // v-chip hint beside the item name.
+  nameHintColor?: string; // The v-chip color
+};
+
+export type GridProxyRequestConfig = {
+  loadFarm?: boolean;
+  loadTwin?: boolean;
+  loadStats?: boolean;
+  loadGpu?: boolean;
+};
+
+export type NodeStatusColor = {
+  color: string;
+  status: string;
+};
+
+export type NodeTypeColor = {
+  color: string;
+  type: string;
+};
+
+export const nodeStatsInitializer: NodeStats = {
+  system: { cru: 0, hru: 0, ipv4u: 0, mru: 0, sru: 0 },
+  total: { cru: 0, hru: 0, ipv4u: 0, mru: 0, sru: 0 },
+  used: { cru: 0, hru: 0, ipv4u: 0, mru: 0, sru: 0 },
+  users: {
+    deployments: 0,
+    workloads: 0,
+  },
+};
+
+export const nodeInitializer: GridNode = {
+  id: "",
+  nodeId: 0,
+  farmId: 0,
+  twinId: 0,
+  country: "",
+  gridVersion: 0,
+  city: "",
+  uptime: 0,
+  created: 0,
+  farmingPolicyId: 0,
+  updatedAt: 0,
+  total_resources: { mru: 0, sru: 0, hru: 0, cru: 0 },
+  used_resources: { mru: 0, sru: 0, hru: 0, cru: 0 },
+  location: { city: "", country: "", latitude: 0, longitude: 0 },
+  publicConfig: { domain: "", gw4: "", ipv6: "", gw6: "", ipv4: "" },
+  status: NodeStatus.Up,
+  certificationType: CertificationType.Diy,
+  dedicated: false,
+  rentContractId: 0,
+  rentedByTwinId: 0,
+  farm: {
+    certificationType: CertificationType.Diy,
+    dedicated: false,
+    farmId: 0,
+    name: "",
+    pricingPolicyId: 0,
+    publicIps: [],
+    twinId: 0,
+    stellarAddress: "",
+  },
+  publicIps: { free: 0, total: 0, used: 0 },
+  twin: { twinId: 0, accountId: "", publicKey: "", relay: "" },
+  stats: nodeStatsInitializer,
+  cards: [],
+  num_gpu: 0,
+};
+// The input filters<nodeId, farmIds..etc> and the option filters<status, gpu...etc>
+export type MixedNodeFilter = {
+  inputs: FilterNodeInputs;
+  options: NodeFilterOptions;
+};
+
+export type MixedFarmFilter = {
+  inputs?: FilterFarmInputs;
+  options?: FarmFilterOptions;
+};
diff --git a/packages/playground/src/utils/app_theme.ts b/packages/playground/src/utils/app_theme.ts
new file mode 100644
index 0000000000..2a5568b4f2
--- /dev/null
+++ b/packages/playground/src/utils/app_theme.ts
@@ -0,0 +1,4 @@
+export enum AppThemeSelection {
+  dark = "dark",
+  light = "light",
+}
diff --git a/packages/playground/src/utils/background_color.ts b/packages/playground/src/utils/background_color.ts
new file mode 100644
index 0000000000..161ab87d4e
--- /dev/null
+++ b/packages/playground/src/utils/background_color.ts
@@ -0,0 +1,22 @@
+export function color(pkg: string): string {
+  let color = "";
+
+  switch (pkg) {
+    case "default":
+      color = "#3b3b3b";
+      break;
+    case "bronze":
+      color = "linear-gradient(270deg, #AF6114 0%, #ffc58b 25%, #DC8E41 49.83%, #f9d1a9 77.32%, #AF6114 100%)";
+      break;
+    case "silver":
+      color = "linear-gradient(270deg, #7d7d7d 0%, #f9f9f9 25%, #adadad 49.83%, #ffffff 77.32%, #a0a0a0 100%)";
+      break;
+    case "gold":
+      color = "linear-gradient(270deg, #bf953f 0%, #fffce0 25%, #d7ae56 49.83%, #fffce0 77.32%, #aa771c 100%)";
+      break;
+    default:
+      color = "#CCCCCC";
+      break;
+  }
+  return color;
+}
diff --git a/packages/playground/src/utils/contracts.ts b/packages/playground/src/utils/contracts.ts
index e82a1fd08e..113e4f8e00 100644
--- a/packages/playground/src/utils/contracts.ts
+++ b/packages/playground/src/utils/contracts.ts
@@ -34,11 +34,11 @@ async function normalizeContract(
     expiration = new Date(exp).toLocaleString();
   }
 
-  let consumption: string;
+  let consumption: number;
   try {
-    consumption = formatConsumption(await grid.contracts.getConsumption({ id }));
+    consumption = await grid.contracts.getConsumption({ id });
   } catch {
-    consumption = formatConsumption(0);
+    consumption = 0;
   }
 
   return {
@@ -71,7 +71,7 @@ export interface NormalizedContract {
   solutionName?: string;
   solutionType?: string;
   expiration?: string;
-  consumption: string;
+  consumption: number;
   solutionProviderID: number;
   twinID: number;
 }
diff --git a/packages/playground/src/utils/custom_toast.ts b/packages/playground/src/utils/custom_toast.ts
index bddb7a164d..7df683376e 100644
--- a/packages/playground/src/utils/custom_toast.ts
+++ b/packages/playground/src/utils/custom_toast.ts
@@ -14,7 +14,7 @@ const darkModeColors = {
   default: "#313131",
   info: "#2196F3",
   success: "#1AA18F",
-  warning: "#3C351D",
+  warning: "#FFCC00",
 };
 
 const lightModeColors = {
@@ -22,7 +22,7 @@ const lightModeColors = {
   default: "#313131",
   info: "#2196F3",
   success: "#1AA18F",
-  warning: "#FEF1E0",
+  warning: "#FFCC00",
 };
 
 /**
diff --git a/packages/playground/src/utils/date.ts b/packages/playground/src/utils/date.ts
new file mode 100644
index 0000000000..849f97ca84
--- /dev/null
+++ b/packages/playground/src/utils/date.ts
@@ -0,0 +1,5 @@
+import moment from "moment";
+
+export default function toHumanDate(timeInSeconds: number): string {
+  return moment(timeInSeconds * 1000).format("M/D/YY, h:m A");
+}
diff --git a/packages/playground/src/utils/filter_farms.ts b/packages/playground/src/utils/filter_farms.ts
new file mode 100644
index 0000000000..befdf75134
--- /dev/null
+++ b/packages/playground/src/utils/filter_farms.ts
@@ -0,0 +1,45 @@
+import type { InputFilterType } from "../types";
+import { isInt, isNumeric, isString, min, validateResourceMaxNumber } from "./validators";
+
+export type FilterFarmInputs = {
+  farmId: InputFilterType;
+  name: InputFilterType;
+  freeIps: InputFilterType;
+};
+
+export const inputsInitializer: () => FilterFarmInputs = () => ({
+  farmId: {
+    label: "Farm ID",
+    placeholder: "Filter by farm id",
+    rules: [
+      [
+        isNumeric("This field accepts numbers only.", { no_symbols: true }),
+        min("The ID should be larger than zero.", 1),
+        isInt("should be an integer"),
+        validateResourceMaxNumber("This is not a valid ID."),
+      ],
+    ],
+    type: "text",
+  },
+
+  name: {
+    label: "Farm Name",
+    placeholder: "Farm name, e.g myfarm",
+    rules: [[isString("Farm name should be made of either numbers or letters")]],
+    type: "text",
+  },
+
+  freeIps: {
+    label: "Free PubIPs",
+    placeholder: "Filter by free public IPs",
+    rules: [
+      [
+        isNumeric("This field accepts numbers only.", { no_symbols: true }),
+        min("Free Public IP should be larger than zero.", 1),
+        isInt("should be an integer"),
+        validateResourceMaxNumber("This is not a valid public IP."),
+      ],
+    ],
+    type: "text",
+  },
+});
diff --git a/packages/playground/src/utils/filter_nodes.ts b/packages/playground/src/utils/filter_nodes.ts
index 7ae2799c5c..e2e9aeb405 100644
--- a/packages/playground/src/utils/filter_nodes.ts
+++ b/packages/playground/src/utils/filter_nodes.ts
@@ -2,6 +2,8 @@ import type { FilterOptions, GridClient, NodeInfo } from "@threefold/grid_client
 
 import type { NodeFilters } from "@/components/select_node.vue";
 
+import type { InputFilterType } from "../types";
+import { isAlphanumeric, isNumeric, min, startsWith, validateResourceMaxNumber } from "./validators";
 export interface NodeGPUCardType {
   id: string;
   vendor: string;
@@ -12,6 +14,7 @@ export interface INode {
   nodeId: number;
   state?: string;
   cards?: NodeGPUCardType[];
+  certified: string;
 }
 
 export async function getNodeCards(grid: GridClient, nodeId: number): Promise<NodeGPUCardType[]> {
@@ -33,3 +36,197 @@ export async function getFilteredNodes(grid: GridClient, options: NodeFilters):
   const nodes = await grid.capacity.filterNodes(filters);
   return nodes;
 }
+
+// Node filters used in #Explorer, #Dedicated Nodes...
+
+// Input fields
+export type FilterNodeInputs = {
+  nodeId: InputFilterType;
+  farmIds: InputFilterType;
+  farmName: InputFilterType;
+  country: InputFilterType;
+  freeSru: InputFilterType;
+  freeHru: InputFilterType;
+  freeMru: InputFilterType;
+};
+
+// Input fields for dedicated nodes
+export type DedicatedNodeFilters = {
+  total_sru: InputFilterType;
+  total_hru: InputFilterType;
+  total_mru: InputFilterType;
+  total_cru: InputFilterType;
+  gpu_vendor_name: InputFilterType;
+  gpu_device_name: InputFilterType;
+};
+
+// Default input Initialization
+export const inputsInitializer: () => FilterNodeInputs = () => ({
+  nodeId: {
+    label: "Node ID",
+    placeholder: "Filter by node id.",
+    rules: [
+      [
+        isNumeric("This field accepts numbers only.", { no_symbols: true }),
+        min("The node id should be larger then zero.", 1),
+        startsWith("The node id start with zero.", "0"),
+        validateResourceMaxNumber("This is not a valid ID."),
+      ],
+    ],
+    type: "text",
+  },
+  farmIds: {
+    label: "Farm IDs",
+    placeholder: "e.g. 1,2,3.",
+    rules: [
+      [
+        (value: string) => {
+          if (value.endsWith(",") || value.includes(" ")) {
+            return { message: "Invalid farm ids format." };
+          }
+
+          const ids = value.split(",").map(parseFloat);
+          const visNumeric = isNumeric("This field accepts numbers only.", { no_symbols: true });
+          const vMin = min("The farm ids should be larger then zero.", 1);
+
+          for (const id of ids) {
+            const err1 = visNumeric(String(id));
+            const err2 = vMin(String(id));
+            if (err1) return err1;
+            if (err2) return err2;
+          }
+        },
+      ],
+    ],
+    type: "text",
+  },
+  farmName: {
+    label: "Farm Name",
+    placeholder: "Filter by farm name.",
+    type: "text",
+  },
+  country: {
+    label: "Country Full Name",
+    placeholder: "Filter by country.",
+    type: "text",
+  },
+  freeSru: {
+    label: "Free SSD (GB)",
+    placeholder: "Filter by free SSD.",
+    rules: [
+      [
+        isNumeric("This field accepts numbers only.", { no_symbols: true }),
+        min("The free ssd should be larger then zero.", 1),
+        validateResourceMaxNumber("This value is out of range."),
+      ],
+    ],
+    type: "text",
+  },
+  freeHru: {
+    label: "Free HDD (GB)",
+    placeholder: "Filter by free HDD.",
+    rules: [
+      [
+        isNumeric("This field accepts numbers only.", { no_symbols: true }),
+        min("The free hdd should be larger then zero.", 1),
+        validateResourceMaxNumber("This value is out of range."),
+      ],
+    ],
+    type: "text",
+  },
+  freeMru: {
+    label: "Free RAM (GB)",
+    placeholder: "Filter by free RAM.",
+    value: undefined,
+    rules: [
+      [
+        isNumeric("This field accepts numbers only.", { no_symbols: true }),
+        min("The free ram should be larger then zero.", 1),
+        validateResourceMaxNumber("This value is out of range."),
+      ],
+    ],
+    type: "text",
+  },
+});
+
+export const DedicatedNodeInitializer: () => DedicatedNodeFilters = () => ({
+  total_cru: {
+    label: "Total CPU (Cores)",
+    placeholder: "Filter by total Cores.",
+    type: "text",
+    rules: [
+      [
+        isNumeric("This Field accepts only a valid number."),
+        min("This Field must be a number larger than 0.", 1),
+        validateResourceMaxNumber("This value is out of range."),
+      ],
+    ],
+  },
+  total_mru: {
+    label: "Total RAM (GB)",
+    placeholder: "Filter by total Memory.",
+    type: "text",
+    rules: [
+      [
+        isNumeric("This Field accepts only a valid number."),
+        min("This Field must be a number larger than 0.", 1),
+        validateResourceMaxNumber("This value is out of range."),
+      ],
+    ],
+  },
+  total_sru: {
+    label: "Total SSD (GB)",
+    placeholder: "Filter by total SSD.",
+    type: "text",
+    rules: [
+      [
+        isNumeric("This Field accepts only a valid number."),
+        min("This Field must be a number larger than 0.", 1),
+        validateResourceMaxNumber("This value is out of range."),
+      ],
+    ],
+  },
+  total_hru: {
+    label: "Total HDD (GB)",
+    placeholder: "Filter by total HDD.",
+    type: "text",
+    rules: [
+      [
+        isNumeric("This Field accepts only a valid number."),
+        min("This Field must be a number larger than 0.", 1),
+        validateResourceMaxNumber("This value is out of range."),
+      ],
+    ],
+  },
+
+  gpu_device_name: {
+    label: "GPU's device name",
+    placeholder: "Filter by GPU's device name.",
+    rules: [
+      [
+        (value: string) => {
+          const allowedPattern = /^[A-Za-z0-9[\]/,.]+$/;
+          if (!allowedPattern.test(value)) {
+            isAlphanumeric("This Field accepts only letters and numbers.");
+          }
+        },
+      ],
+    ],
+    type: "text",
+  },
+  gpu_vendor_name: {
+    label: "GPU's vendor name",
+    placeholder: "Filter by GPU's vendor name.",
+    type: "text",
+    rules: [
+      [
+        (value: string) => {
+          const allowedPattern = /^[A-Za-z0-9[\]/,.]+$/;
+          if (!allowedPattern.test(value)) {
+            isAlphanumeric("This Field accepts only letters and numbers.");
+          }
+        },
+      ],
+    ],
+  },
+});
diff --git a/packages/playground/src/utils/format_resource_size.ts b/packages/playground/src/utils/format_resource_size.ts
new file mode 100644
index 0000000000..fb1fdb98c9
--- /dev/null
+++ b/packages/playground/src/utils/format_resource_size.ts
@@ -0,0 +1,31 @@
+/**
+ * Formats the size of a resource in a human-readable format.
+ * @param sizeInBytes - The size of the resource in bytes.
+ * @returns A formatted string representing the size of the resource.
+ */
+export default function formatResourceSize(sizeInBytes?: number): string {
+  if (sizeInBytes === undefined || sizeInBytes === null || isNaN(sizeInBytes) || sizeInBytes === 0) {
+    return "0 Bytes";
+  }
+
+  const giga = 1024 ** 3; // One gigabyte in bytes
+  const tera = 1024 ** 4; // One terabyte in bytes
+  const peta = 1024 ** 5; // One petabyte in bytes
+
+  if (sizeInBytes < giga) {
+    return sizeInBytes.toString() + " Bytes";
+  }
+
+  if (sizeInBytes < tera) {
+    const sizeInGB = sizeInBytes / giga;
+    return sizeInGB.toFixed(2) + " GB";
+  }
+
+  if (sizeInBytes < peta) {
+    const sizeInTB = sizeInBytes / tera;
+    return sizeInTB.toFixed(2) + " TB";
+  }
+
+  const sizeInPB = sizeInBytes / peta;
+  return sizeInPB.toFixed(2) + " PB";
+}
diff --git a/packages/playground/src/utils/getMetricsUrl.ts b/packages/playground/src/utils/getMetricsUrl.ts
deleted file mode 100644
index 3cb041461a..0000000000
--- a/packages/playground/src/utils/getMetricsUrl.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { GridClient } from "@threefold/grid_client";
-
-export interface IGrafanaArgs {
-  orgID: number;
-  farmID: number;
-  network: string;
-  accountID: string;
-}
-
-export class GrafanaStatistics implements IGrafanaArgs {
-  public orgID = 2;
-  public network = "";
-  public accountID = "";
-  public grid: GridClient;
-  public deployment: any;
-  public farmID: number;
-
-  constructor(grid: GridClient, deployment: any) {
-    this.grid = grid;
-    this.deployment = deployment;
-    this.network = grid.clientOptions?.network || "dev";
-    this.farmID = 0;
-  }
-
-  async setNodeAccountID() {
-    if (this.deployment.length && this.deployment[0]["nodeId"]) {
-      const node = await this.grid.nodes.get({ id: this.deployment[0].nodeId });
-      if (node) {
-        await this.grid.twins.get({ id: node.twinId }).then(res => {
-          this.accountID = res.accountId;
-          this.farmID = node.farmId;
-        });
-      }
-    }
-  }
-
-  async getUrl() {
-    await this.setNodeAccountID();
-    this.updateNetwork();
-    const orgId = `orgId=${this.orgID}`;
-    const network = `var-network=${this.network}`;
-    const farmID = `var-farm=${this.farmID}`;
-    const nodeID = `var-node=${this.accountID}`;
-
-    const urlArgs = `${orgId}&refresh=30s&${network}&${farmID}&${nodeID}`;
-    const url = `https://metrics.grid.tf/d/rYdddlPWkfqwf/zos-host-metrics?${urlArgs}`;
-    return url;
-  }
-
-  public updateNetwork() {
-    if (this.network.length) {
-      switch (this.network) {
-        case "dev":
-          this.network = "development";
-          break;
-        case "qa":
-          this.network = "qa";
-          break;
-        case "test":
-          this.network = "testing";
-          break;
-        case "main":
-          this.network = "production";
-          break;
-      }
-    } else {
-      throw Error("Can not get the network from the GridClient Options");
-    }
-  }
-}
diff --git a/packages/playground/src/utils/get_farms.ts b/packages/playground/src/utils/get_farms.ts
index e7c3abfe38..ac79c46d0f 100644
--- a/packages/playground/src/utils/get_farms.ts
+++ b/packages/playground/src/utils/get_farms.ts
@@ -1,18 +1,79 @@
-import type { FarmFilterOptions, FarmInfo, GridClient } from "@threefold/grid_client";
+import type { FarmFilterOptions, GridClient } from "@threefold/grid_client";
+import type { Farm, FarmsQuery, Pagination, Twin, TwinsQuery } from "@threefold/gridproxy_client";
 
-import type { Farm } from "@/types";
+import type { MixedFarmFilter } from "@/types";
+import type { FarmInterface } from "@/types";
 
 import { gqlClient, gridProxyClient } from "../clients";
+import { createCustomToast, ToastType } from "./custom_toast";
 
 export interface GetFarmsOptions {
   exclusiveFor?: string;
 }
+export const getFarmQueries = (mixedFilters: MixedFarmFilter): Partial<FarmsQuery> => {
+  let farmId, name, page, size, freeIps;
+  if (mixedFilters.inputs) {
+    if (mixedFilters.inputs.farmId.value) {
+      farmId = Number(mixedFilters.inputs.farmId.value);
+    }
+    if (mixedFilters.inputs.name.value) {
+      name = mixedFilters.inputs.name.value.toLowerCase().trim();
+    }
+
+    if (mixedFilters.inputs.freeIps.value) {
+      freeIps = Number(mixedFilters.inputs.freeIps.value);
+    }
+  }
+
+  if (mixedFilters.options) {
+    if (mixedFilters.options.page) {
+      page = +mixedFilters.options.page;
+    }
+    if (mixedFilters.options.size) {
+      size = +mixedFilters.options.size;
+    }
+  }
+  const options: Partial<FarmsQuery> = {
+    retCount: true,
+    farmId: farmId,
+    nameContains: name,
+    freeIps: freeIps,
+    page: page,
+    size: size,
+  };
+
+  return options;
+};
+export async function getAllFarms(queries: Partial<FarmsQuery>): Promise<Pagination<Farm[]>> {
+  try {
+    const farms = await gridProxyClient.farms.list(queries);
+    return farms;
+  } catch (error) {
+    console.error("An error occurred while requesting farms:", error);
+    createCustomToast("Failed to get farms!", ToastType.danger);
+    throw error;
+  }
+}
+export async function getFarmsPages(grid: GridClient, filters: FarmFilterOptions, pageSize: number): Promise<number> {
+  try {
+    const count = (await grid.capacity.getFarmsCount(filters)) || 1;
+    return Math.ceil(count / pageSize);
+  } catch {
+    return 1;
+  }
+}
+
 export async function getFarms(
   grid: GridClient,
   filters: FarmFilterOptions,
   options: GetFarmsOptions = {},
-): Promise<Farm[]> {
-  let farms = await grid.capacity.filterFarms({ ...filters }).catch(() => []);
+): Promise<FarmInterface[]> {
+  let farms;
+  if (filters) {
+    farms = await grid.capacity.filterFarms({ ...filters }).catch(() => []);
+  } else {
+    farms = await grid.capacity.getAllFarms().catch(() => []);
+  }
 
   if (options.exclusiveFor && !filters.publicIp) {
     const blockedFarms = await getBlockedFarmSet(options.exclusiveFor);
@@ -27,7 +88,11 @@ export async function getBlockedFarmSet(exclusiveFor: string): Promise<Set<numbe
     { totalCount: true },
     {
       orderBy: ["id_ASC"],
-      where: { deploymentData_contains: exclusiveFor, state_eq: "Created", numberOfPublicIPs_eq: 0 },
+      where: {
+        deploymentData_contains: exclusiveFor,
+        state_eq: "Created",
+        numberOfPublicIPs_eq: 0,
+      },
     },
   );
 
@@ -35,7 +100,11 @@ export async function getBlockedFarmSet(exclusiveFor: string): Promise<Set<numbe
     { nodeID: true },
     {
       limit: totalCount,
-      where: { deploymentData_contains: exclusiveFor, state_eq: "Created", numberOfPublicIPs_eq: 0 },
+      where: {
+        deploymentData_contains: exclusiveFor,
+        state_eq: "Created",
+        numberOfPublicIPs_eq: 0,
+      },
     },
   );
 
@@ -44,3 +113,13 @@ export async function getBlockedFarmSet(exclusiveFor: string): Promise<Set<numbe
   );
   return new Set(farms.map(farm => farm.farmId));
 }
+export async function getFarmTwinByTwinId(queries: Partial<TwinsQuery> = {}): Promise<Twin> {
+  try {
+    const twins = await gridProxyClient.twins.list(queries);
+
+    return twins.data[0] as Twin;
+  } catch (error) {
+    console.error("An error occurred while requesting twins:", error);
+    throw error;
+  }
+}
diff --git a/packages/playground/src/utils/get_metrics_url.ts b/packages/playground/src/utils/get_metrics_url.ts
new file mode 100644
index 0000000000..ccbf9d5a3e
--- /dev/null
+++ b/packages/playground/src/utils/get_metrics_url.ts
@@ -0,0 +1,76 @@
+import GridProxyClient, { type GridNode, type TwinsQuery } from "@threefold/gridproxy_client";
+
+export interface IGrafanaArgs {
+  farmID: number;
+  twinID: number;
+  accountID: string;
+}
+
+export class GrafanaStatistics {
+  private client: GridProxyClient;
+  private network: string;
+  public farmID: number;
+  public twinID: number;
+  public accountID: string;
+  private orgID: number;
+  private node: GridNode;
+
+  constructor(node: GridNode, orgID = 2) {
+    this.node = node;
+    const network = process.env.NETWORK || (window as any).env.NETWORK;
+    const client = new GridProxyClient(network);
+    this.client = client;
+    this.twinID = node.twinId;
+    this.farmID = node.farmId;
+    this.network = process.env.NETWORK || (window as any).env.NETWORK;
+    this.updateNetwork();
+    this.orgID = orgID;
+    this.accountID = "";
+  }
+
+  private async getAccountID() {
+    const twinsListParams: Partial<TwinsQuery> = {
+      twinId: this.node.twinId,
+    };
+
+    const twins = await this.client.twins.list(twinsListParams);
+    if (twins.data.length > 0) {
+      this.accountID = twins.data[0].accountId;
+    }
+  }
+
+  private updateNetwork() {
+    switch (this.network) {
+      case "dev":
+        this.network = "development";
+        break;
+      case "qa":
+        this.network = "qa";
+        break;
+      case "test":
+        this.network = "testing";
+        break;
+      case "main":
+        this.network = "production";
+        break;
+      // Add a default case to handle other network values
+      default:
+        break;
+    }
+  }
+
+  public async getUrl(): Promise<string> {
+    await this.getAccountID();
+    const url = new URL("https://metrics.grid.tf/d/rYdddlPWkfqwf/zos-host-metrics");
+    const params = new URLSearchParams();
+    params.set("orgId", this.orgID.toString());
+    params.set("refresh", "30s");
+    params.set("var-network", this.network);
+    params.set("var-farm", this.farmID.toString());
+    params.set("var-node", this.accountID);
+    params.set("var-diskdevices", "[a-z]+|nvme[0-9]+n[0-9]+|mmcblk[0-9]+");
+
+    url.search = params.toString();
+    return url.toString();
+  }
+}
diff --git a/packages/playground/src/utils/get_nodes.ts b/packages/playground/src/utils/get_nodes.ts
index c2e54cabe8..9baa2c0e8d 100644
--- a/packages/playground/src/utils/get_nodes.ts
+++ b/packages/playground/src/utils/get_nodes.ts
@@ -1,6 +1,17 @@
 import type { FilterOptions, GridClient, NodeInfo } from "@threefold/grid_client";
+import {
+  type GridNode,
+  type NodesExtractOptions,
+  type NodesQuery,
+  type NodeStats,
+  NodeStatus,
+  type Pagination,
+} from "@threefold/gridproxy_client";
+import { byCountry } from "country-code-lookup";
 import { ref } from "vue";
 
+import { gridProxyClient } from "@/clients";
+import type { MixedFilter, NodeStatusColor, NodeTypeColor } from "@/types";
 const requestPageNumber = ref<number>(1);
 const offlineNodes = ref<NodeInfo[]>([]);
 type NodeFilters = FilterOptions & {
@@ -45,3 +56,137 @@ export async function getAllNodes(grid: GridClient | null, options?: NodeFilters
   }
   return getAllNodes(grid, options);
 }
+
+export const getCountryCode = (node: GridNode): string => {
+  if (!node) {
+    return "";
+  }
+  if (!node.country) {
+    return "";
+  }
+  if (node.country.length && node.country.length > 2) {
+    const country = byCountry(node.country);
+    if (!country) {
+      return node.country;
+    }
+    const countryCode = country.internet;
+    if (countryCode !== null && countryCode !== undefined) {
+      return countryCode;
+    }
+  }
+  return node.country;
+};
+
+/**
+ * Get the node status then return the color based on the status type.
+ * @param {string} status - the ststus of the node, it should be match one of these statuses [up, standby, down].
+ * @returns {NodeStatusColor} - return type of the node status color and status
+ */
+export const getNodeStatusColor = (status: string): NodeStatusColor => {
+  if (status === NodeStatus.Up) {
+    return { color: "primary", status: NodeStatus.Up };
+  } else if (status === NodeStatus.Standby) {
+    return { color: "warning", status: NodeStatus.Standby };
+  } else {
+    return { color: "error", status: NodeStatus.Down };
+  }
+};
+
+export const getNodeTypeColor = (dedicated: boolean): NodeTypeColor => {
+  if (dedicated) {
+    return { color: "primary", type: "dedicated" };
+  } else {
+    return { color: "success", type: "shared" };
+  }
+};
+
+/**
+ * Requests a list of nodes from the GridProxyClient.
+ *
+ * @param {Partial<NodesQuery>} options - The options for querying the nodes.
+ * @param {NodeRequestConfig} config - The configuration for the node request.
+ * @returns {Promise<Pagination<GridNode[]>>} - A promise that resolves to a pagination object containing the list of nodes.
+ */
+export async function requestNodes(
+  options: Partial<NodesQuery>,
+  config: NodesExtractOptions,
+): Promise<Pagination<GridNode[]>> {
+  try {
+    const nodes: Pagination<GridNode[]> = await gridProxyClient.nodes.list(options, config);
+    return nodes;
+  } catch (error) {
+    console.error("An error occurred while requesting nodes:", error);
+    throw error;
+  }
+}
+
+/**
+ * Requests a node from GridProxyClient to get its stats.
+ * @param {number} nodeId - The node id.
+ * @returns {Promise<NodeStats>} - A promise that resolves to an object containing the node stats details.
+ */
+export async function getNodeStates(nodeId: number): Promise<NodeStats> {
+  if (typeof nodeId !== "number" || isNaN(nodeId)) {
+    throw new Error("Invalid nodeId");
+  }
+  const nodeStats: NodeStats = await gridProxyClient.nodes.statsById(nodeId);
+  if (nodeStats.system) {
+    return nodeStats;
+  } else {
+    throw new Error(`Failed to retrieve node stats`);
+  }
+}
+
+/**
+ * Requests a node from GridProxyClient.
+ * @param {number} nodeId - The node id.
+ * @param {NodesExtractOptions} config - The configuration for the node request.
+ * @returns {Promise<GridNode>} - A promise that resolves to an object containing the node details.
+ */
+export async function getNode(nodeId: number, config: NodesExtractOptions): Promise<GridNode> {
+  if (typeof nodeId !== "number" || nodeId <= 0) {
+    throw new Error("Invalid nodeId. Expected a positive integer.");
+  }
+
+  if (typeof config !== "object" || config === null) {
+    throw new Error("Invalid config parameter. Expected an object.");
+  }
+
+  try {
+    const node: GridNode = await gridProxyClient.nodes.byId(nodeId, config);
+    return node;
+  } catch (error: any) {
+    throw new Error(`Failed to get node: ${error.message}`);
+  }
+}
+
+/**
+ * Convert into bytes.
+ * @param {number} resource - The resource in GB.
+ * @returns {number} - The resource in Bytes.
+ */
+export const toBytes = (resource: number | undefined): number => {
+  return resource ? resource * 1024 * 1024 * 1024 : 0;
+};
+
+export const getQueries = (mixedFilters: MixedFilter): Partial<NodesQuery> => {
+  const options: Partial<NodesQuery> = {
+    retCount: true,
+    nodeId: +mixedFilters.inputs.nodeId.value! || undefined,
+    farmIds: mixedFilters.inputs.farmIds.value,
+    farmName: mixedFilters.inputs.farmName.value,
+    country: mixedFilters.inputs.country.value,
+    status: mixedFilters.options.status ? (mixedFilters.options.status.toLocaleLowerCase() as NodeStatus) : undefined,
+    page: mixedFilters.options.page,
+    size: mixedFilters.options.size,
+    freeHru: mixedFilters.inputs.freeHru.value ? toBytes(+mixedFilters.inputs.freeHru.value!) : undefined,
+    freeMru: mixedFilters.inputs.freeMru.value ? toBytes(+mixedFilters.inputs.freeMru.value!) : undefined,
+    freeSru: mixedFilters.inputs.freeSru.value ? toBytes(+mixedFilters.inputs.freeSru.value!) : undefined,
+    hasGpu: mixedFilters.options.gpu ? mixedFilters.options.gpu : undefined,
+  };
+  if (mixedFilters.options.gateway) {
+    options.domain = mixedFilters.options.gateway;
+    options.ipv4 = mixedFilters.options.gateway;
+  }
+  return options;
+};
diff --git a/packages/playground/src/utils/get_offline_nodes.ts b/packages/playground/src/utils/get_offline_nodes.ts
new file mode 100644
index 0000000000..9ee73ae54b
--- /dev/null
+++ b/packages/playground/src/utils/get_offline_nodes.ts
@@ -0,0 +1,47 @@
+import { type FilterOptions, type GridClient, type NodeInfo, NodeStatus } from "@threefold/grid_client";
+import { ref } from "vue";
+
+const requestPageNumber = ref<number>(1);
+const offlineNodes = ref<NodeInfo[]>([]);
+type NodeFilters = FilterOptions & {
+  /**
+   * The flat option used to return a list of the ids of the nodes, it'll be like [1, 2, 3] where is the 1, 2 and 3 represent the ids of the nodes.
+   * @returns {Promise<number[]>} A Promise that resolves to an array of offline NodeInfo ids.
+   */
+  flat?: boolean;
+};
+
+/**
+ * Retrieves offline nodes from the grid proxy using the grid client.
+ * If requestPageNumber is 0, returns the existing offline nodes data,
+ * otherwise fetches the next page of offline nodes and appends it to the result.
+ * @param {GridClient | null} grid - The GridClient instance to fetch nodes from.
+ * @returns {Promise<NodeInfo[]>} A Promise that resolves to an array of offline NodeInfo objects.
+ */
+export async function getOfflineNodes(grid: GridClient | null, options?: NodeFilters): Promise<NodeInfo[] | number[]> {
+  const isFlat = options?.flat || false;
+
+  const isLastPage = requestPageNumber.value === 0;
+
+  if (isLastPage) {
+    if (isFlat) {
+      return offlineNodes.value.map(node => node.nodeId);
+    }
+    return offlineNodes.value;
+  } else {
+    const offNodes: NodeInfo[] = await grid!.nodes.filter({
+      ...options,
+      status: NodeStatus.down,
+      page: requestPageNumber.value,
+    });
+
+    if (offNodes.length) {
+      offlineNodes.value.push(...offNodes);
+      requestPageNumber.value += 1;
+    } else {
+      // needs to be last page.
+      requestPageNumber.value = 0;
+    }
+  }
+  return getOfflineNodes(grid, options);
+}
diff --git a/packages/playground/src/utils/grid.ts b/packages/playground/src/utils/grid.ts
index 021bbaa901..c49e11fe55 100644
--- a/packages/playground/src/utils/grid.ts
+++ b/packages/playground/src/utils/grid.ts
@@ -1,4 +1,4 @@
-import { BackendStorageType, GridClient, type NetworkEnv } from "@threefold/grid_client";
+import { BackendStorageType, GridClient, NetworkEnv } from "@threefold/grid_client";
 
 import type { Profile } from "../stores/profile_manager";
 
@@ -12,7 +12,7 @@ export async function getGrid(profile: Pick<Profile, "mnemonic">, projectName?:
     backendStorageType: BackendStorageType.tfkvstore,
     projectName,
 
-    ...(import.meta.env.DEV
+    ...(import.meta.env.DEV && network !== NetworkEnv.custom
       ? {}
       : {
           substrateURL: window.env.SUBSTRATE_URL,
@@ -40,6 +40,15 @@ export function createAccount() {
     network,
     mnemonic: "",
     storeSecret: "test",
+    ...(import.meta.env.DEV && network !== NetworkEnv.custom
+      ? {}
+      : {
+          substrateURL: window.env.SUBSTRATE_URL,
+          proxyURL: window.env.GRIDPROXY_URL,
+          graphqlURL: window.env.GRAPHQL_URL,
+          activationURL: window.env.ACTIVATION_SERVICE_URL,
+          relayURL: window.env.RELAY_DOMAIN,
+        }),
   });
   grid._connect();
   const relay = grid.getDefaultUrls(network).relay.slice(6);
@@ -51,6 +60,15 @@ export function activateAccountAndCreateTwin(mnemonic: string) {
     network,
     mnemonic,
     storeSecret: mnemonic,
+    ...(import.meta.env.DEV && network !== NetworkEnv.custom
+      ? {}
+      : {
+          substrateURL: window.env.SUBSTRATE_URL,
+          proxyURL: window.env.GRIDPROXY_URL,
+          graphqlURL: window.env.GRAPHQL_URL,
+          activationURL: window.env.ACTIVATION_SERVICE_URL,
+          relayURL: window.env.RELAY_DOMAIN,
+        }),
   });
   grid._connect();
   const relay = grid.getDefaultUrls(network).relay.slice(6);
@@ -75,6 +93,8 @@ export async function loadProfile(grid: GridClient): Promise<Profile> {
     ssh: await readSSH(grid),
     twinId: grid!.twinId,
     address: grid.tfclient.address,
+    relay: grid.getDefaultUrls(network).relay.slice(6),
+    pk: (await grid.twins.get({ id: grid!.twinId })).pk,
   };
 }
 
diff --git a/packages/playground/src/utils/helpers.ts b/packages/playground/src/utils/helpers.ts
index be8d9454f6..a5e9027aae 100644
--- a/packages/playground/src/utils/helpers.ts
+++ b/packages/playground/src/utils/helpers.ts
@@ -57,3 +57,14 @@ export function getDashboardURL(network: string) {
 export function getCardName(card: NodeGPUCardType): string {
   return card.vendor + " - " + card.device;
 }
+
+export function toGigaBytes(value?: number) {
+  const giga = 1024 ** 3;
+
+  if (value === undefined || value === null || isNaN(value) || value === 0) {
+    return 0;
+  }
+
+  const gb = value / giga;
+  return parseFloat(gb.toFixed(2));
+}
diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index db9ee12b4c..c0d53369df 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -45,8 +45,16 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
   )) as GridClient[];
 
   const promises = machines.map(async (name, index) => {
-    const contracts = await getDeploymentContracts(grids[index], name, projectName).catch(() => []);
-    const nodeIds = await grids[index].machines._getDeploymentNodeIds(name).catch(() => []);
+    let contracts: any[] = [];
+    let nodeIds: number[] = [];
+
+    try {
+      contracts = await getDeploymentContracts(grids[index], name, projectName);
+      nodeIds = await grids[index].machines._getDeploymentNodeIds(name);
+    } catch {
+      failedDeployments.push({ name, contracts: [], nodes: [] });
+      return;
+    }
 
     if (contracts.length === 0) {
       count--;
@@ -139,6 +147,7 @@ export async function loadK8s(grid: GridClient) {
   await migrateModule(grid.k8s);
 
   const clusters = await grid.k8s.list();
+  const failedK8s: string[] = [];
 
   const projectName = grid.clientOptions.projectName;
   const grids = (await Promise.all(
@@ -147,8 +156,16 @@ export async function loadK8s(grid: GridClient) {
   const failedDeployments: FailedDeployment[] = [];
 
   const promises = clusters.map(async (name, index) => {
-    const contracts = await grids[index].k8s.getDeploymentContracts(name).catch(() => []);
-    const nodeIds = await grids[index].k8s._getDeploymentNodeIds(name).catch(() => []);
+    let contracts: any[] = [];
+    let nodeIds: number[] = [];
+
+    try {
+      contracts = await grids[index].k8s.getDeploymentContracts(name);
+      nodeIds = await grids[index].k8s._getDeploymentNodeIds(name);
+    } catch {
+      failedDeployments.push({ name, contracts: [], nodes: [] });
+      return;
+    }
 
     try {
       const clusterPromise = grids[index].k8s.getObj(name);
diff --git a/packages/playground/src/utils/mintings.ts b/packages/playground/src/utils/mintings.ts
new file mode 100644
index 0000000000..28ac7be85e
--- /dev/null
+++ b/packages/playground/src/utils/mintings.ts
@@ -0,0 +1,62 @@
+export interface Period {
+  start: number;
+  end: number;
+}
+
+export interface CloudUnits {
+  cu: number;
+  su: number;
+  nu: number;
+}
+
+export interface Reward {
+  tft: number;
+  musd: number;
+}
+
+export interface ResourcesUnits {
+  cru: number;
+  mru: number;
+  hru: number;
+  sru: number;
+}
+export interface Receipt {
+  farm_id: number;
+  node_id: number;
+  period: Period;
+  stellar_payout_address: string;
+}
+
+export interface Minting extends Receipt {
+  cloud_units: CloudUnits;
+  farm_name: string;
+  measured_uptime: number;
+  node_type: string;
+  resource_units: ResourcesUnits;
+  reward: Reward;
+  tft_connection_price: number;
+}
+
+export interface Fixup extends Receipt {
+  correct_cloud_units: CloudUnits;
+  correct_reward: Reward;
+  fixup_cloud_units: CloudUnits;
+  fixup_reward: Reward;
+  minted_cloud_units: CloudUnits;
+  minted_reward: Reward;
+}
+
+export async function getMintingData(hash: number) {
+  const hashReceipts = await fetch(`${window.env.MINTING_URL}/api/v1/receipt/${hash}`).then(async res => {
+    if (res.ok) {
+      const receipt = await res.json();
+      if (receipt.Minting) {
+        return receipt as unknown as Minting;
+      } else {
+        return receipt as unknown as Fixup;
+      }
+    } else throw new Error(`Receipt with hash ${hash} not found`);
+  });
+
+  return hashReceipts;
+}
diff --git a/packages/playground/src/utils/node.ts b/packages/playground/src/utils/node.ts
new file mode 100644
index 0000000000..1d0dd31097
--- /dev/null
+++ b/packages/playground/src/utils/node.ts
@@ -0,0 +1,326 @@
+import "jspdf-autotable";
+
+import type { GridNode } from "@threefold/gridproxy_client";
+import axios from "axios";
+import type { jsPDF } from "jspdf";
+import moment from "moment";
+
+import { gqlClient } from "@/clients";
+
+import type { CloudUnits, Fixup, Minting } from "./mintings";
+
+export interface NodeInterface extends GridNode {
+  extraFee: number;
+  rentContractId: number;
+  rentedByTwinId: number;
+  receipts: receiptInterface[];
+  serialNumber: string;
+  availability: NodeAvailability;
+}
+
+export interface receiptInterface {
+  type: "MINTING" | "FIXUP";
+  hash: string;
+  mintingStart?: number;
+  mintingEnd?: number;
+  fixupStart?: number;
+  fixupEnd?: number;
+  tft?: number;
+  cloud_units: CloudUnits;
+  fixup_cloud_units?: CloudUnits;
+  correct_cloud_units?: CloudUnits;
+  startPeriodTimestamp: number;
+  endPeriodTimestamp: number;
+  fixupReward?: number;
+}
+interface UptimeEvent {
+  uptime: number;
+  timestamp: number;
+}
+
+export interface NodeAvailability {
+  downtime: number;
+  currentPeriod: number;
+}
+
+export async function getNodeAvailability(nodeId: number) {
+  /**
+   * Return Node availability over the current minting period
+   *
+   * @param nodeId - The node id
+   * @returns node downtime and elapsed time in seconds since current minting period started (which the downtime was calculated over)
+   * */
+
+  // The duration of a standard period, as used by the minting payouts, in seconds
+  // https://github.com/threefoldtech/minting_v3/blob/master/src/period.rs
+  const STANDARD_PERIOD_DURATION = (24 * 60 * 60 * (365 * 3 + 366 * 2)) / 60;
+  // Timestamp of the start of the first period in seconds
+  const FIRST_PERIOD_START_TIMESTAMP = 1522501000;
+  // uptime events are supposed to happen every 40 minutes.
+  // here we set this to one hour (3600 sec) to allow some room.
+  const UPTIME_EVENTS_INTERVAL = 3600;
+  const secondsSinceEpoch = Math.round(Date.now() / 1000);
+  const secondsSinceCurrentPeriodStart = (secondsSinceEpoch - FIRST_PERIOD_START_TIMESTAMP) % STANDARD_PERIOD_DURATION;
+  const currentPeriodStartTimestamp = secondsSinceEpoch - secondsSinceCurrentPeriodStart;
+
+  const res = await gqlClient.uptimeEvents(
+    { timestamp: true, uptime: true },
+    {
+      orderBy: ["timestamp_ASC"],
+      where: { nodeID_eq: nodeId, timestamp_gt: currentPeriodStartTimestamp as unknown as bigint },
+    },
+  );
+
+  const uptimeEvents: Array<UptimeEvent> = res.map((item: any) => {
+    return { timestamp: +item.timestamp, uptime: +item.uptime };
+  });
+  // if there are no uptimeEvents (i.e node was never up in the current period), return the time elapsed since the period start as downtime
+  if (uptimeEvents.length == 0) {
+    console.log(
+      `getNodeAvailability: Node ${nodeId} didn't send uptime events for the last ${secondsSinceCurrentPeriodStart} seconds.`,
+    );
+    return { downtime: secondsSinceCurrentPeriodStart, currentPeriod: secondsSinceCurrentPeriodStart };
+  }
+
+  const fakeDataPoint = { timestamp: currentPeriodStartTimestamp, uptime: 0 };
+  uptimeEvents.unshift(fakeDataPoint);
+
+  let downtime = 0;
+  for (let i = 0; i < uptimeEvents.length - 1; i++) {
+    // if uptime decreases with time, then node was down in that time period, so add time period to node downtime
+    if (
+      uptimeEvents[i].uptime > uptimeEvents[i + 1].uptime ||
+      uptimeEvents[i + 1].uptime < uptimeEvents[i + 1].timestamp - uptimeEvents[i].timestamp
+    ) {
+      downtime += uptimeEvents[i + 1].timestamp - uptimeEvents[i].timestamp - uptimeEvents[i + 1].uptime;
+    }
+  }
+
+  const elapsedSinceLastUptimeEvent = secondsSinceEpoch - uptimeEvents[uptimeEvents.length - 1].timestamp;
+  if (elapsedSinceLastUptimeEvent >= UPTIME_EVENTS_INTERVAL) {
+    downtime += elapsedSinceLastUptimeEvent;
+  }
+  console.log(
+    `getNodeAvailability: Node ${nodeId} was down for ${downtime} seconds in the last ${secondsSinceCurrentPeriodStart} seconds.`,
+  );
+  return { downtime: downtime, currentPeriod: secondsSinceCurrentPeriodStart };
+}
+
+export async function getFarmUptimePercentage(farm: NodeInterface[]) {
+  let uptime = 0;
+  for (let i = 0; i < farm.length; i++) {
+    uptime += +(await getNodeUptimePercentage(farm[i].nodeId));
+  }
+  return (uptime / farm.length).toFixed(2);
+}
+
+export function calculateUptime(currentPeriod = 0, downtime = 0) {
+  return (((currentPeriod - downtime) / currentPeriod) * 100).toFixed(2);
+}
+export async function getNodeUptimePercentage(nodeId: number) {
+  const availability = await getNodeAvailability(nodeId);
+  return calculateUptime(availability.currentPeriod, availability.downtime);
+}
+export function getTime(num: number | undefined) {
+  if (num) {
+    return new Date(num);
+  }
+  return new Date();
+}
+export async function generateNodeSummary(doc: jsPDF, nodes: NodeInterface[]) {
+  doc.setFontSize(15);
+  const topY = 20;
+  const topX = 60;
+  const lineOffset = 10;
+  const cellOffset = 40;
+  const cellX = 15;
+  const cellY = topY + lineOffset;
+
+  doc.text(`Farm ${nodes[0].farmId} Nodes Minting Summary`, topX, topY);
+  doc.setFontSize(10);
+
+  doc.text(`Nodes: ${nodes.length}`, cellX, cellY);
+  doc.text(`Receipts: ${nodes.reduce((total, node) => (total += node.receipts.length), 0)}`, cellX, cellY + lineOffset);
+  doc.text(
+    `Minting Receipts: ${nodes.reduce(
+      (total, node) => (total += node.receipts.filter(receipt => receipt.type == "MINTING").length),
+      0,
+    )}`,
+    cellX,
+    cellY + lineOffset * 2,
+  );
+  doc.text(
+    `Fixup Receipts: ${nodes.reduce(
+      (total, node) => (total += node.receipts.filter(receipt => receipt.fixupStart).length),
+      0,
+    )}`,
+    cellX,
+    cellY + lineOffset * 3,
+  );
+  doc.text(
+    `TFT: ${nodes
+      .reduce(
+        (total, node) => (total += node.receipts.reduce((totalTFT, receipt) => (totalTFT += receipt.tft || 0), 0)),
+        0,
+      )
+      .toFixed(2)}`,
+    cellX,
+    cellY + lineOffset * 4,
+  );
+  doc.text(`Uptime: ${await getFarmUptimePercentage(nodes)}%`, cellX, cellY + lineOffset * 5);
+}
+
+export function generatePage(doc: jsPDF, receiptsBatch: receiptInterface[], page: number) {
+  const lineOffset = 5;
+  const topY = 20 + lineOffset * 6;
+  const cellOffset = lineOffset * 12;
+  const cellX = 15;
+  const cellY = topY + lineOffset * 2;
+
+  if (page > 1) {
+    doc.addPage();
+  }
+  for (let i = 0; i < receiptsBatch.length; i++) {
+    if (receiptsBatch[i].type === "MINTING") {
+      doc.text(`Minting: ${receiptsBatch[i].hash}`, cellX, cellY + cellOffset * i);
+      doc.text(`start: ${getTime(receiptsBatch[i].mintingStart)}`, cellX, cellY + cellOffset * i + lineOffset);
+      doc.text(`end: ${getTime(receiptsBatch[i].mintingEnd)}`, cellX, cellY + cellOffset * i + lineOffset * 2);
+      doc.text(`TFT: ${receiptsBatch[i].tft?.toFixed(2)}`, cellX, cellY + cellOffset * i + lineOffset * 3);
+      doc.text(
+        `Cloud Units: ${receiptsBatch[i].cloud_units.cu} CU, ${receiptsBatch[i].cloud_units.nu} NU, ${receiptsBatch[i].cloud_units.su} SU`,
+        cellX,
+        cellY + cellOffset * i + lineOffset * 4,
+      );
+    } else {
+      doc.text(`Fixup: ${receiptsBatch[i].hash}`, cellX, cellY + cellOffset * i);
+      doc.text(`start: ${getTime(receiptsBatch[i].fixupStart)}`, cellX, cellY + cellOffset * i + lineOffset);
+      doc.text(`end: ${getTime(receiptsBatch[i].fixupEnd)}`, cellX, cellY + cellOffset * i + lineOffset * 2);
+      doc.text(`TFT: ${receiptsBatch[i].tft?.toFixed(2)}`, cellX, cellY + cellOffset * i + lineOffset * 3);
+      doc.text(
+        `Fixup TFT: ${receiptsBatch[i].fixupReward?.toFixed(2) || 0}`,
+        cellX,
+        cellY + cellOffset * i + lineOffset * 4,
+      );
+      doc.text(
+        `CU (Minted|Actual|FixedUp):   (${receiptsBatch[i].cloud_units.cu} | ${
+          receiptsBatch[i].correct_cloud_units?.cu || 0
+        } | ${receiptsBatch[i].fixup_cloud_units?.cu || 0})`,
+        cellX,
+        cellY + cellOffset * i + lineOffset * 5,
+      );
+      doc.text(
+        `NU (Minted|Actual|FixedUp):   (${receiptsBatch[i].cloud_units.nu} | ${
+          receiptsBatch[i].correct_cloud_units?.nu || 0
+        } | ${receiptsBatch[i].fixup_cloud_units?.nu || 0})`,
+        cellX,
+        cellY + cellOffset * i + lineOffset * 6,
+      );
+      doc.text(
+        `SU (Minted|Actual|FixedUp):   (${receiptsBatch[i].cloud_units.su} | ${
+          receiptsBatch[i].correct_cloud_units?.su || 0
+        } | ${receiptsBatch[i].fixup_cloud_units?.su || 0})`,
+        cellX,
+        cellY + cellOffset * i + lineOffset * 7,
+      );
+    }
+    if (i !== receiptsBatch.length - 1) {
+      doc.line(cellX, cellY + cellOffset * i + lineOffset * 8, cellX + 175, cellY + cellOffset * i + lineOffset * 8);
+    }
+  }
+
+  return doc;
+}
+
+export async function generateReceipt(doc: jsPDF, node: NodeInterface) {
+  // Set font size and initial positioning
+  doc.setFontSize(15);
+  const topY = 20;
+  const lineOffset = 5;
+  const cellOffset = 30;
+  const cellX = 15;
+  const cellY = topY + lineOffset * 8;
+
+  // Add header information on the first page
+  doc.text(`Node ${node.nodeId} Summary`, 80, topY);
+  doc.setFontSize(10);
+  doc.text(`Receipts total: ${node.receipts?.length}`, cellX, topY + lineOffset);
+  doc.text(
+    `Minting total: ${node.receipts.filter(receipt => receipt.type == "MINTING").length}`,
+    cellX,
+    topY + lineOffset * 2,
+  );
+  doc.text(`Fixup total: ${node.receipts.filter(receipt => receipt.fixupStart).length}`, cellX, topY + lineOffset * 3);
+
+  doc.text(
+    `TFT total: ${node.receipts.reduce((total, receipt) => (total += receipt.tft || 0), 0).toFixed(2)}`,
+    cellX,
+    topY + lineOffset * 4,
+  );
+  doc.text(
+    node.uptime === 0
+      ? `Uptime: 0%`
+      : `Uptime: ${+(await getNodeUptimePercentage(node.nodeId))}% - ${Math.floor(
+          moment.duration(node.uptime, "seconds").asDays(),
+        )} days`,
+    cellX,
+    topY + lineOffset * 5,
+  );
+
+  // Draw a line after the header information
+  doc.line(cellX, topY + lineOffset * 6, cellX + 175, topY + lineOffset * 6);
+
+  const size = 4;
+  let page = 0;
+  for (let i = 0; i < node.receipts.length - 1; i += size) {
+    page++;
+    doc = generatePage(doc, node.receipts.slice(i, i + size), page);
+  }
+
+  return doc;
+}
+
+export async function getNodeMintingFixupReceipts(nodeId: number) {
+  let nodeReceipts: receiptInterface[] = [];
+  await axios.get(`${window.env.MINTING_URL}/api/v1/node/${nodeId}`).then(res =>
+    res.data.map(
+      (rec: {
+        hash: any;
+        receipt: {
+          Minting: Minting;
+          Fixup: Fixup;
+        };
+      }) => {
+        if (rec.receipt.Minting) {
+          nodeReceipts.push({
+            type: "MINTING",
+            hash: rec.hash,
+            cloud_units: rec.receipt.Minting.cloud_units,
+            mintingStart: rec.receipt.Minting.period.start * 1000,
+            mintingEnd: rec.receipt.Minting.period.end * 1000,
+            tft: rec.receipt.Minting.reward.tft / 1e7,
+            startPeriodTimestamp: rec.receipt.Minting.period.start,
+            endPeriodTimestamp: rec.receipt.Minting.period.end,
+          });
+        } else {
+          nodeReceipts.push({
+            type: "FIXUP",
+            hash: rec.hash,
+            cloud_units: rec.receipt.Fixup.minted_cloud_units,
+            fixup_cloud_units: rec.receipt.Fixup.fixup_cloud_units,
+            correct_cloud_units: rec.receipt.Fixup.correct_cloud_units,
+            fixupStart: rec.receipt.Fixup.period.start * 1000 || 0,
+            fixupEnd: rec.receipt.Fixup.period.end * 1000 || 0,
+            startPeriodTimestamp: rec.receipt.Fixup.period.start,
+            endPeriodTimestamp: rec.receipt.Fixup.period.end,
+            tft: rec.receipt.Fixup.minted_reward.tft / 1e7,
+            fixupReward: rec.receipt.Fixup.fixup_reward.tft / 1e7,
+          });
+        }
+      },
+    ),
+  );
+
+  // sort based on the start date
+  nodeReceipts = nodeReceipts.sort((a, b) => b.startPeriodTimestamp - a.startPeriodTimestamp);
+  return nodeReceipts;
+}
diff --git a/packages/playground/src/utils/toTeraOrGegaOrPeta.ts b/packages/playground/src/utils/toTeraOrGegaOrPeta.ts
new file mode 100644
index 0000000000..a03d29f835
--- /dev/null
+++ b/packages/playground/src/utils/toTeraOrGegaOrPeta.ts
@@ -0,0 +1,21 @@
+export default function toTeraOrGiga(value?: string) {
+  const giga = 1024 ** 3;
+
+  if (!value) return "0";
+
+  const val = +value;
+  if (val === 0 || isNaN(val)) return "0";
+
+  if (val < giga) return val.toString();
+
+  let gb = val / giga;
+
+  if (gb < 1024) return `${gb.toFixed(2)} GB`;
+
+  gb = gb / 1024;
+
+  if (gb < 1024) return `${gb.toFixed(2)} TB`;
+
+  gb = gb / 1024;
+  return `${gb.toFixed(2)} PB`;
+}
diff --git a/packages/playground/src/utils/to_readable_data.ts b/packages/playground/src/utils/to_readable_data.ts
new file mode 100644
index 0000000000..0e9963c6c3
--- /dev/null
+++ b/packages/playground/src/utils/to_readable_data.ts
@@ -0,0 +1,26 @@
+import moment from "moment";
+
+const formatTimeUnit = (unit: string, value: number) => (value > 0 ? `${value} ${unit}${value === 1 ? "" : "s"}` : "");
+
+export default function toReadableDate(timeInSeconds: number): string {
+  if (timeInSeconds === 0) {
+    return "No time";
+  }
+
+  const duration = moment.duration(timeInSeconds * 1000);
+  const years = duration.years();
+  const months = duration.months();
+  const days = duration.days();
+
+  const dateParts = [
+    formatTimeUnit("year", years),
+    formatTimeUnit("month", months),
+    formatTimeUnit("day", days),
+  ].filter(Boolean);
+
+  if (dateParts.length === 0) {
+    return "Less than a day";
+  }
+
+  return dateParts.join(" and ");
+}
diff --git a/packages/playground/src/utils/types.ts b/packages/playground/src/utils/types.ts
new file mode 100644
index 0000000000..341d70683b
--- /dev/null
+++ b/packages/playground/src/utils/types.ts
@@ -0,0 +1,12 @@
+export enum IPType {
+  single = "Single",
+  range = "Range",
+}
+
+export interface IPublicConfig {
+  ipv4: string;
+  gw4: string;
+  ipv6?: string;
+  gw6?: string;
+  domain?: string;
+}
diff --git a/packages/playground/src/utils/validators.ts b/packages/playground/src/utils/validators.ts
index eb1ca7f0b3..8f241278a3 100644
--- a/packages/playground/src/utils/validators.ts
+++ b/packages/playground/src/utils/validators.ts
@@ -4,6 +4,8 @@ import type { IsEmailOptions } from "validator/lib/isEmail";
 import type { IsFQDNOptions } from "validator/lib/isFQDN";
 import type { IsURLOptions } from "validator/lib/isURL";
 
+import { toBytes } from "@/utils/get_nodes";
+
 export function required(msg: string) {
   return (value: string) => {
     if (value === "" || value === undefined || value === null) {
@@ -68,6 +70,22 @@ export function min(msg: string, min: number) {
   };
 }
 
+export function startsWith(msg: string, char: string) {
+  return (value: string) => {
+    if (value.startsWith(char)) {
+      return { message: msg };
+    }
+  };
+}
+
+export function validateResourceMaxNumber(msg: string) {
+  return (value: string) => {
+    if (+value > BigInt(2 ** 32 - 1)) {
+      return { message: msg };
+    }
+  };
+}
+
 export function max(msg: string, max: number) {
   return (value: string) => {
     if (+value > max) {
diff --git a/packages/playground/src/views/farms.vue b/packages/playground/src/views/farms.vue
new file mode 100644
index 0000000000..de71331249
--- /dev/null
+++ b/packages/playground/src/views/farms.vue
@@ -0,0 +1,242 @@
+<template>
+  <view-layout>
+    <v-row>
+      <v-col>
+        <filters
+          v-model="filterFarmInputs"
+          @update:model-value="inputFiltersReset"
+          :form-disabled="isFormLoading"
+          v-model:valid="isValidForm"
+        />
+
+        <v-data-table-server
+          :loading="loading"
+          :headers="headers"
+          :items="farms"
+          :items-length="totalFarms"
+          :items-per-page-options="[
+            { value: 5, title: '5' },
+            { value: 10, title: '10' },
+            { value: 15, title: '15' },
+          ]"
+          v-model:items-per-page="size"
+          v-model:page="page"
+          v-model:sort-by="sortBy"
+          class="elevation-1"
+          @update:options="updateQueries"
+          @click:row="openSheet"
+        >
+          <template #loading />
+        </v-data-table-server>
+      </v-col>
+    </v-row>
+    <farmDialog
+      v-if="selectedFarm"
+      :openDialog="isDialogOpened"
+      :farm="selectedFarm"
+      @update:model-value="closeDialog"
+      @close-dialog="closeDialog"
+    />
+  </view-layout>
+</template>
+
+<script lang="ts" setup>
+import type { Farm } from "@threefold/gridproxy_client";
+import debounce from "lodash/debounce.js";
+import { computed, onMounted, ref, watch } from "vue";
+
+import type { VDataTableHeader } from "@/types";
+import type { FarmFilterOptions, MixedFarmFilter } from "@/types";
+import type { FilterFarmInputs } from "@/utils/filter_farms";
+import { inputsInitializer } from "@/utils/filter_farms";
+import { getAllFarms, getFarmQueries } from "@/utils/get_farms";
+const loading = ref<boolean>(false);
+const farms = ref<Farm[]>();
+const isDialogOpened = ref<boolean>(false);
+const selectedFarm = ref<Farm>();
+const filterFarmInputs = ref<FilterFarmInputs>(inputsInitializer());
+const size = ref(10);
+const page = ref(1);
+
+const sortBy = ref([{ key: "", order: undefined }]);
+const filterOptions = ref<FarmFilterOptions>({
+  size: size.value,
+  page: page.value,
+  sortBy: sortBy.value,
+});
+
+const mixedFarmFilters = computed<MixedFarmFilter>(() => ({
+  inputs: filterFarmInputs.value,
+  options: filterOptions.value,
+}));
+
+const isFormLoading = ref<boolean>(true);
+const isValidForm = ref<boolean>(false);
+const totalFarms = ref(0);
+
+const _getFarms = async (queries: Partial<FarmsQuery>) => {
+  if (isValidForm.value) {
+    loading.value = true;
+    isFormLoading.value = true;
+    try {
+      const { count, data } = await getAllFarms(queries);
+
+      if (data) {
+        totalFarms.value = count || 0;
+        farms.value = data.map(farm => {
+          const ips = farm.publicIps;
+          const total = ips.length;
+          const used = ips.filter(x => x.contract_id !== 0).length;
+          return {
+            ...farm,
+            totalPublicIp: total,
+            freePublicIp: total - used,
+          };
+        });
+        if (sortBy.value[0]) {
+          updateSorting();
+        }
+      }
+    } catch (err) {
+      console.log("could not get farms:", err);
+      createCustomToast("Failed to get farms!", ToastType.danger);
+    } finally {
+      isFormLoading.value = false;
+      loading.value = false;
+    }
+  }
+};
+onMounted(async () => {
+  await updateFarms();
+});
+
+const request = debounce(_getFarms, 1000);
+
+const updateFarms = async () => {
+  const queries = await getFarmQueries(mixedFarmFilters.value);
+
+  await request(queries);
+};
+
+const updateSorting = () => {
+  if (mixedFarmFilters.value.options) {
+    if (mixedFarmFilters.value.options.sortBy?.length) {
+      if (sortBy.value[0] && sortBy.value[0]) {
+        const sortKey = sortBy.value[0].key;
+        const sortOrder = sortBy.value[0].order;
+        if (sortKey && sortOrder && farms.value) {
+          farms.value.sort((a, b) => {
+            let aValue: any, bValue: any;
+            if (sortKey == "farmId") {
+              aValue = a.farmId;
+              bValue = b.farmId;
+            } else {
+              aValue = a.name;
+              bValue = b.name;
+            }
+
+            if (typeof aValue == "string" && typeof bValue == "string") {
+              return sortOrder === "desc" ? bValue.localeCompare(aValue) : aValue.localeCompare(bValue);
+            }
+            return sortOrder === "desc" ? bValue - aValue : aValue - bValue;
+          });
+        }
+      }
+    }
+  }
+};
+const updateQueries = async () => {
+  const inputs = mixedFarmFilters.value.inputs;
+  if (inputs && filterFarmInputs.value) {
+    const filtersInputValues = filterFarmInputs.value;
+    if (filtersInputValues.farmId) {
+      inputs.farmId.value = filtersInputValues.farmId.value;
+    }
+    if (filtersInputValues.name) {
+      inputs.name.value = filtersInputValues.name.value;
+    }
+    if (filtersInputValues.freeIps) {
+      inputs.freeIps.value = filtersInputValues.freeIps.value;
+    }
+  }
+  const options = mixedFarmFilters.value.options;
+  if (options) {
+    options.page = page.value;
+    options.size = size.value;
+    options.sortBy = sortBy.value;
+  }
+  await updateFarms();
+};
+
+watch(mixedFarmFilters, updateFarms, { deep: true });
+watch(filterFarmInputs, updateQueries, { deep: true });
+watch(page, updateQueries);
+watch(size, updateQueries);
+
+// The filters should reset to the default value again..
+const inputFiltersReset = (filtersInputValues: FilterFarmInputs) => {
+  filterFarmInputs.value = filtersInputValues;
+  filterOptions.value = {
+    page: 1,
+    size: 10,
+    sortBy: [{ key: "", order: undefined }],
+  };
+};
+
+const openSheet = (_e: any, { item }: any) => {
+  openDialog(item.value);
+};
+const openDialog = (item: Farm) => {
+  selectedFarm.value = item;
+  isDialogOpened.value = true;
+};
+
+const closeDialog = () => {
+  isDialogOpened.value = false;
+};
+
+const headers: VDataTableHeader = [
+  { title: "ID", key: "farmId" },
+  { title: "Name", key: "name" },
+  {
+    title: "Total Public IPs",
+    key: "totalPublicIp",
+    align: "start",
+    sortable: false,
+  },
+  {
+    title: "Available Public IPs",
+    key: "freePublicIp",
+    align: "start",
+    sortable: false,
+  },
+  {
+    title: "Certification Type",
+    key: "certificationType",
+    align: "start",
+    sortable: false,
+  },
+  {
+    title: "Pricing Policy",
+    key: "pricingPolicyId",
+    align: "start",
+    sortable: false,
+  },
+];
+</script>
+
+<script lang="ts">
+import type { FarmsQuery } from "@threefold/gridproxy_client";
+
+import Filters from "@/components/filter.vue";
+import { createCustomToast, ToastType } from "@/utils/custom_toast";
+
+import FarmDialog from "../components/farm_dialog.vue";
+export default {
+  name: "Farms",
+  components: {
+    FarmDialog,
+    Filters,
+  },
+};
+</script>
diff --git a/packages/playground/src/views/minting_view.vue b/packages/playground/src/views/minting_view.vue
new file mode 100644
index 0000000000..a45095d0b6
--- /dev/null
+++ b/packages/playground/src/views/minting_view.vue
@@ -0,0 +1,238 @@
+<template>
+  <view-layout>
+    <h2 class="mb-5 text-capitalize">Alpha software - all data subject to change</h2>
+    <v-form @submit.prevent="mintingHash()" class="d-inline-flex w-100">
+      <FormValidator v-model="isValidForm">
+        <InputValidator
+          :value="receiptHash"
+          :rules="[
+            validators.required('Receipt hash is required.'),
+            validators.equal('Receipt hash must be 64 characters long.', 64),
+            validators.isHash('Invalid hash', 'sha256'),
+          ]"
+          valid-message="Receipt hash is valid."
+          #="{ props: validationProps }"
+          ref="hashInput"
+        >
+          <VTextField
+            class="mr-5"
+            placeholder="Please insert your receipt hash"
+            v-model="receiptHash"
+            v-bind="{ ...validationProps }"
+            :loading="loading"
+        /></InputValidator>
+
+        <VBtn
+          type="submit"
+          color="primary"
+          variant="tonal"
+          :disabled="!isValidForm"
+          :loading="loading"
+          size="x-large"
+          rounded="lg"
+        >
+          View
+        </VBtn>
+      </FormValidator>
+    </v-form>
+    <v-container class="mt-8" v-if="item && item.Minting">
+      <v-card>
+        <v-card-title class="font-weight-bold bg-primary">Node Info</v-card-title>
+        <v-list class="custom-list">
+          <v-row>
+            <v-col cols="2" class="column-style">
+              <v-list-item v-for="header in mintNodeInfoHeaders" :key="header">
+                {{ header }}
+              </v-list-item>
+            </v-col>
+            <v-col cols="10">
+              <v-list-item> {{ item.Minting.node_id }} ({{ item.Minting.node_type }})</v-list-item>
+              <v-list-item> {{ item.Minting.farm_name }} ({{ item.Minting.farm_id }})</v-list-item>
+              <v-list-item>
+                {{ (item.Minting.measured_uptime / (3600 * 24)).toFixed(2) }}
+                days ({{
+                  (
+                    (100 * item.Minting.measured_uptime) /
+                    (item.Minting.period.end - item.Minting.period.start)
+                  ).toFixed(2)
+                }}%)
+              </v-list-item>
+            </v-col>
+          </v-row>
+        </v-list>
+      </v-card>
+      <!-- Node Resources -->
+      <v-card class="mt-3">
+        <v-card-title class="font-weight-bold bg-primary" color="primary">Node Resources</v-card-title>
+        <v-list class="custom-list">
+          <v-row>
+            <v-col cols="2" class="column-style">
+              <v-list-item v-for="header in mintResourcesHeaders" :key="header">
+                {{ header }}
+              </v-list-item>
+            </v-col>
+            <v-col cols="10">
+              <v-list-item> {{ item.Minting.cloud_units.cu.toFixed(2) }}</v-list-item>
+              <v-list-item> {{ item.Minting.cloud_units.su.toFixed(2) }}</v-list-item>
+              <v-list-item>
+                {{ item.Minting.cloud_units.nu.toFixed(2) }}
+              </v-list-item>
+              <v-list-item v-if="item.Minting.resource_units.cru && item.Minting.resource_units.cru < 0.1">
+                {{ (item.Minting.resource_units.cru * 1024 ** 3).toFixed(0) }}
+                vCPU
+              </v-list-item>
+              <v-list-item v-else> {{ item.Minting.resource_units.cru }} vCPU </v-list-item>
+
+              <v-list-item> {{ item.Minting.resource_units.mru.toFixed(3) }} GB </v-list-item>
+              <v-list-item> {{ item.Minting.resource_units.sru.toFixed(3) }} GB </v-list-item>
+              <v-list-item> {{ item.Minting.resource_units.hru.toFixed(3) }} GB </v-list-item>
+            </v-col>
+          </v-row>
+        </v-list>
+      </v-card>
+
+      <v-card class="mt-3">
+        <v-card-title class="font-weight-bold bg-primary">Payout Info</v-card-title>
+        <v-list class="custom-list">
+          <v-row>
+            <v-col cols="2" class="column-style">
+              <v-list-item v-for="header in mintPayoutHeaders" :key="header">
+                {{ header }}
+              </v-list-item>
+            </v-col>
+            <v-col cols="10">
+              <v-list-item>
+                {{ item.Minting.reward.tft.toFixed(7) }} TFT ({{ item.Minting.reward.musd.toFixed(3) }}$ at
+                {{ item.Minting.tft_connection_price.toFixed(3) }}$/TFT)</v-list-item
+              >
+              <v-list-item> {{ item.Minting.stellar_payout_address }}</v-list-item>
+            </v-col>
+          </v-row>
+        </v-list>
+      </v-card>
+    </v-container>
+
+    <v-container class="mt-8" v-else-if="item">
+      <v-card>
+        <v-card-title class="font-weight-bold bg-primary">Node Info</v-card-title>
+        <v-list class="custom-list">
+          <v-row>
+            <v-col cols="2" class="column-style">
+              <v-list-item v-for="header in fixupNodeInfoHeaders" :key="header">
+                {{ header }}
+              </v-list-item>
+            </v-col>
+            <v-col cols="10">
+              <v-list-item> {{ item.Fixup.node_id }}</v-list-item>
+              <v-list-item> {{ item.Fixup.farm_id }}</v-list-item>
+            </v-col>
+          </v-row>
+        </v-list>
+      </v-card>
+
+      <v-card class="mt-3">
+        <v-card-title class="font-weight-bold bg-primary" color="primary">Node Resources</v-card-title>
+        <v-list class="custom-list">
+          <v-row>
+            <v-col cols="2" class="column-style">
+              <v-list-item v-for="header in fixupResourcesHeaders" :key="header">
+                {{ header }}
+              </v-list-item>
+            </v-col>
+            <v-col cols="10">
+              <v-list-item>
+                {{ item.Fixup.minted_cloud_units.cu.toFixed(2) }} | {{ item.Fixup.correct_cloud_units.cu.toFixed(2) }} |
+                {{ item.Fixup.fixup_cloud_units.cu.toFixed(2) }}</v-list-item
+              >
+              <v-list-item>
+                {{ item.Fixup.minted_cloud_units.su.toFixed(2) }} | {{ item.Fixup.correct_cloud_units.su.toFixed(2) }} |
+                {{ item.Fixup.fixup_cloud_units.cu.toFixed(2) }}</v-list-item
+              >
+              <v-list-item>
+                {{ item.Fixup.minted_cloud_units.nu.toFixed(2) }} | {{ item.Fixup.correct_cloud_units.nu.toFixed(2) }} |
+                {{ item.Fixup.fixup_cloud_units.cu.toFixed(2) }}</v-list-item
+              >
+            </v-col>
+          </v-row>
+        </v-list>
+      </v-card>
+      <v-card class="mt-3">
+        <v-card-title class="font-weight-bold bg-primary">Payout Info</v-card-title>
+        <v-list class="custom-list">
+          <v-row>
+            <v-col cols="2" class="column-style">
+              <v-list-item v-for="header in fixupPayoutHeaders" :key="header">
+                {{ header }}
+              </v-list-item>
+            </v-col>
+            <v-col cols="10">
+              <v-list-item> {{ item.Fixup.minted_reward.tft.toFixed(7) }} TFT</v-list-item>
+              <v-list-item> {{ item.Fixup.correct_reward.tft.toFixed(7) }} TFT</v-list-item>
+              <v-list-item> {{ item.Fixup.fixup_reward.tft.toFixed(7) }} TFT</v-list-item>
+              <v-list-item> {{ item.Fixup.stellar_payout_address }}</v-list-item>
+            </v-col>
+          </v-row>
+        </v-list>
+      </v-card>
+    </v-container>
+
+    <v-alert type="error" variant="tonal" class="mt-2 mb-4" v-if="noData">
+      {{ noData }}
+    </v-alert>
+  </view-layout>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+import { useInputRef } from "@/hooks/input_validator";
+
+import { normalizeError } from "../utils/helpers";
+import { getMintingData } from "../utils/mintings";
+
+const receiptHash = ref();
+const isValidForm = ref(false);
+const hashInput = useInputRef();
+const loading = ref(false);
+const noData = ref<string | null>(null);
+const item = ref();
+const mintNodeInfoHeaders = ["ID", "Farm", "Measured Uptime"];
+const fixupNodeInfoHeaders = ["ID", "Farm"];
+const mintResourcesHeaders = ["CU", "SU", "NU", "CRU", "MRU", "SRU", "HRU"];
+const fixupResourcesHeaders = ["CU", "SU", "NU"];
+const mintPayoutHeaders = ["TFT Farmed", "Payout Address"];
+const fixupPayoutHeaders = ["TFT Received", "TFT Owed", "Additional TFT Minted", "Payout Address"];
+
+function reset() {
+  item.value = null;
+  noData.value = null;
+}
+async function mintingHash() {
+  loading.value = true;
+  reset();
+  try {
+    item.value = await getMintingData(receiptHash.value);
+  } catch (e) {
+    noData.value = normalizeError(e, "Something went wrong while fetching data.");
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.custom-list {
+  overflow: hidden;
+  font-size: 0.875rem;
+}
+
+.v-list-item {
+  border-bottom: 0.1px solid #8a8a8a;
+}
+.column-style {
+  border-right: 0.1px solid #8a8a8a;
+}
+.v-list-item:last-child {
+  border-bottom: none;
+}
+</style>
diff --git a/packages/playground/src/views/nodes.vue b/packages/playground/src/views/nodes.vue
new file mode 100644
index 0000000000..e223bb8500
--- /dev/null
+++ b/packages/playground/src/views/nodes.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="hint">
+    <v-alert type="info" variant="tonal">
+      Node statuses are updated every 90 minutes. For a realtime status, please click on the row.
+    </v-alert>
+  </div>
+
+  <view-layout>
+    <filters
+      :form-disabled="isFormLoading"
+      :model-value="filterInputs"
+      v-model:valid="isValidForm"
+      @update:model-value="inputFiltersReset"
+    />
+    <div class="nodes mt-5">
+      <div class="nodes-inner">
+        <v-row>
+          <v-col cols="12">
+            <div class="table">
+              <div class="table-filters">
+                <v-row>
+                  <v-col>
+                    <v-row>
+                      <v-col cols="12" sm="6" md="6" lg="4">
+                        <input-tooltip inline tooltip="Enable filtering the nodes that have Gateway supported only.">
+                          <v-switch
+                            color="primary"
+                            inset
+                            label="Gateways (Only)"
+                            v-model="filterOptions.gateway"
+                            hide-details
+                            :disabled="isFormLoading"
+                          />
+                        </input-tooltip>
+                      </v-col>
+                      <v-col cols="12" sm="6" md="6" lg="4">
+                        <input-tooltip inline tooltip="Enable filtering the nodes that have GPU card supported only.">
+                          <v-switch
+                            color="primary"
+                            inset
+                            label="GPU Node (Only)"
+                            v-model="filterOptions.gpu"
+                            hide-details
+                            :disabled="isFormLoading"
+                          />
+                        </input-tooltip>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                  <v-col cols="12" sm="12" md="12" lg="4">
+                    <v-row
+                      justify="start"
+                      justify-md="start"
+                      justify-sm="start"
+                      justify-lg="end"
+                      justify-xl="end"
+                      justify-xxl="end"
+                    >
+                      <v-col cols="7">
+                        <v-select
+                          class="p-4"
+                          v-model="filterOptions.status"
+                          :items="nodeStatusOptions"
+                          label="Select Nodes Status"
+                          variant="underlined"
+                          :disabled="isFormLoading"
+                          open-on-clear
+                          clearable
+                        ></v-select>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+              </div>
+              <div class="hint mb-2">
+                <v-alert type="info" variant="tonal">
+                  The nodes will be filtered and displayed after you enter the value by 1 second.
+                </v-alert>
+              </div>
+              <nodes-table
+                v-model="nodes"
+                v-model:size="filterOptions.size"
+                v-model:page="filterOptions.page"
+                :count="nodesCount"
+                :loading="loading"
+                v-model:selectedNode="selectedNodeId"
+                @open-dialog="openDialog"
+              />
+            </div>
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+    <node-details
+      :options="selectedNodeoptions"
+      :nodeId="selectedNodeId"
+      :openDialog="isDialogOpened"
+      @close-dialog="closeDialog"
+    />
+  </view-layout>
+</template>
+
+<script lang="ts">
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type GridNode, type NodesQuery, NodeStatus } from "@threefold/gridproxy_client";
+import debounce from "lodash/debounce.js";
+import { capitalize, onMounted, ref, watch } from "vue";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+
+import NodeDetails from "@/components/node_details.vue";
+import NodesTable from "@/components/nodes_table.vue";
+import router from "@/router";
+import {
+  type FilterInputs,
+  type FilterOptions,
+  type GridProxyRequestConfig,
+  type MixedFilter,
+  optionsInitializer,
+} from "@/types";
+import { inputsInitializer } from "@/utils/filter_nodes";
+import { getQueries, requestNodes } from "@/utils/get_nodes";
+
+export default {
+  components: {
+    NodesTable,
+    NodeDetails,
+  },
+  setup() {
+    const filterInputs = ref<FilterInputs>(inputsInitializer());
+    const filterOptions = ref<FilterOptions>(optionsInitializer());
+    const mixedFilters = computed<MixedFilter>(() => ({ inputs: filterInputs.value, options: filterOptions.value }));
+
+    const loading = ref<boolean>(true);
+    const isFormLoading = ref<boolean>(true);
+    const nodes = ref<GridNode[]>([]);
+    const nodesCount = ref<number>(0);
+
+    const selectedNodeId = ref<number>(0);
+    const selectedNodeoptions = ref<GridProxyRequestConfig>({
+      loadFarm: true,
+      loadTwin: true,
+      loadStats: true,
+      loadGpu: true,
+    });
+
+    const isDialogOpened = ref<boolean>(false);
+    const isValidForm = ref<boolean>(false);
+
+    const nodeStatusOptions = [capitalize(NodeStatus.Up), capitalize(NodeStatus.Standby), capitalize(NodeStatus.Down)];
+    const route = useRoute();
+
+    const _requestNodes = async (queries: Partial<NodesQuery> = {}, config: GridProxyRequestConfig) => {
+      if (isValidForm.value) {
+        loading.value = true;
+        isFormLoading.value = true;
+        try {
+          const { count, data } = await requestNodes(queries, config);
+          nodes.value = data;
+          if (count) {
+            nodesCount.value = count;
+          }
+        } catch (err) {
+          console.log(err);
+        } finally {
+          loading.value = false;
+          isFormLoading.value = false;
+        }
+      }
+    };
+
+    const request = debounce(_requestNodes, 1000);
+
+    watch(
+      mixedFilters,
+      async () => {
+        const queries = getQueries(mixedFilters.value);
+        await request(queries, { loadFarm: true });
+      },
+      { deep: true },
+    );
+
+    // The filters should reset to the default value again..
+    const inputFiltersReset = (filtersInputValues: FilterInputs) => {
+      filterInputs.value = filtersInputValues;
+      filterOptions.value = {
+        ...filterOptions.value,
+        status: NodeStatus.Up,
+        gpu: undefined,
+        gateway: undefined,
+        page: 1,
+        size: 10,
+      };
+    };
+
+    const checkSelectedNode = async () => {
+      if (route.query.nodeId) {
+        selectedNodeId.value = +route.query.nodeId;
+        isDialogOpened.value = true;
+      }
+    };
+
+    const closeDialog = () => {
+      if (route.query.nodeId) {
+        router.replace(route.path);
+      }
+      isDialogOpened.value = false;
+      selectedNodeId.value = 0;
+    };
+
+    const openDialog = async (item: { props: { title: GridNode } }) => {
+      selectedNodeId.value = item.props.title.nodeId;
+      isDialogOpened.value = true;
+    };
+
+    onMounted(async () => {
+      await checkSelectedNode();
+      const queries = getQueries(mixedFilters.value);
+      await request(queries, { loadFarm: true });
+    });
+
+    return {
+      loading,
+      isFormLoading,
+
+      nodes,
+      nodesCount,
+
+      selectedNodeId,
+      selectedNodeoptions,
+      nodeStatusOptions,
+
+      filterInputs,
+      filterOptions,
+      isDialogOpened,
+      isValidForm,
+
+      openDialog,
+      closeDialog,
+      requestNodes,
+      inputFiltersReset,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/views/page_not_found.vue b/packages/playground/src/views/page_not_found.vue
index 91c0065c78..5a7ab182df 100644
--- a/packages/playground/src/views/page_not_found.vue
+++ b/packages/playground/src/views/page_not_found.vue
@@ -1,9 +1,11 @@
 <template>
   <img class="centered-img" :src="baseUrl + 'images/404.png'" />
-  <p class="text1">Oops. The page you were looking for doesn't exist.</p>
-  <p class="text2">You may have mistyped address or the page may have been moved</p>
+  <p class="text1">Oops! The page you were looking for doesn't exist.</p>
+  <p class="text2">You may have mistyped address or the page may have been moved.</p>
   <div style="text-align: center">
-    <v-btn color="primary" variant="text" @click="$router.push('/')"> Take me back to the home page</v-btn>
+    <v-btn color="primary" variant="text" @click="$router.push({ name: 'Twin' })">
+      Take me back to the Home page.</v-btn
+    >
   </div>
 </template>
 
@@ -30,14 +32,14 @@ export default {
 }
 
 .text1 {
-  font-size: 30px;
+  font-size: 20px;
   text-align: center;
-  font-weight: 500;
-  margin-top: 50px;
+  font-weight: 400;
+  margin-top: 10px;
 }
 
 .text2 {
-  font-size: 20px;
+  font-size: 16px;
   text-align: center;
   font-weight: 400;
 }
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
new file mode 100644
index 0000000000..8bf7c3d4b7
--- /dev/null
+++ b/packages/playground/src/views/solutions_view.vue
@@ -0,0 +1,195 @@
+<template>
+  <view-layout>
+    <v-row>
+      <v-col cols="4" v-for="card in cards" :key="card.title">
+        <router-link :to="'/solutions' + card.route">
+          <v-hover>
+            <template v-slot:default="{ isHovering, props }">
+              <v-card class="pa-3 pt-6" height="200" v-bind="props" :class="isHovering ? 'card-opacity' : undefined">
+                <v-img
+                  class="d-inline-block ml-3 mb-2"
+                  width="35"
+                  :src="baseURL + 'images/icons/' + card.icon"
+                  :alt="card.title"
+                  :style="{
+                    filter: `brightness(${$vuetify.theme.global.name === 'light' ? 0.2 : 1})`,
+                    lineHeight: 1,
+                  }"
+                />
+                <v-card-title class="d-inline-block">
+                  {{ card.title }}
+                </v-card-title>
+                <v-card-text class="mt-2"> {{ card.excerpt }} </v-card-text>
+              </v-card>
+            </template></v-hover
+          >
+        </router-link>
+      </v-col>
+    </v-row>
+  </view-layout>
+</template>
+
+<script lang="ts">
+interface Card {
+  title: string;
+  excerpt: string;
+  icon: string;
+  route: string;
+}
+
+export default {
+  name: "SolutionsView",
+  setup() {
+    const cards: Card[] = [
+      {
+        title: "Full Virtual Machine",
+        excerpt:
+          "Deploy a full virtual machine on Threefold Grid. Full VM allows you to have a complete image with a custom kernel optimized for your own usecase.",
+        icon: "vm.png",
+        route: "/fullvm",
+      },
+      {
+        title: "Micro Virtual Machine",
+        excerpt:
+          "Deploy a micro virtual machine on Threefold Grid. We provide few images managed by Threefold like Ubuntu 22.04, and NixOS, but you can still use a custom one.",
+        icon: "vm.png",
+        route: "/vm",
+      },
+      {
+        title: "Kubernetes",
+        excerpt:
+          "Kubernetes is the standard container orchestration tool. On the TF grid, Kubernetes clusters can be deployed out of the box. We have implemented K3S, a full-blown Kubernetes offering that uses only half of the memory footprint.",
+        icon: "kubernetes.png",
+        route: "/kubernetes",
+      },
+      {
+        title: "CapRover",
+        excerpt:
+          "CapRover is an extremely easy to use app/database deployment & web server manager for your NodeJS, Python, PHP, ASP.NET, Ruby, MySQL, MongoDB, Postgres, WordPress (and etc…) applications!",
+        icon: "caprover.png",
+        route: "/caprover",
+      },
+      {
+        title: "Peertube",
+        excerpt: "Peertube aspires to be a decentralized and free/libre alternative to video broadcasting services.",
+        icon: "peertube.png",
+        route: "/peertube",
+      },
+      {
+        title: "Funkwhale",
+        excerpt:
+          "Funkwhale is social platform to enjoy and share music. Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.",
+        icon: "funkwhale.png",
+        route: "/funkwhale",
+      },
+      {
+        title: "Mattermost",
+        excerpt:
+          "Mattermost is an open-source, self-hostable online chat service with file sharing, search, and integrations. It is designed as an internal chat for organisations and companies.",
+        icon: "mattermost.png",
+        route: "/mattermost",
+      },
+      {
+        title: "Discourse",
+        excerpt:
+          "Discourse is the 100% open source discussion platform built for the next decade of the Internet. Use it as a mailing list, discussion forum, long-form chat room, and more!",
+        icon: "discourse.png",
+        route: "/discourse",
+      },
+      {
+        title: "Taiga",
+        excerpt:
+          "Taiga is a project management application that can handle both simple and complex projects for startups, software developers, and other target teams. It tracks the progress of a project.",
+        icon: "taiga.png",
+        route: "/taiga",
+      },
+      {
+        title: "Owncloud",
+        excerpt:
+          "ownCloud develops and provides open-source software for content collaboration, allowing teams to easily share and work on files seamlessly regardless of device or location.",
+        icon: "owncloud.png",
+        route: "/owncloud",
+      },
+      // {
+      //   title: "Nextcloud",
+      //   excerpt:
+      //     "Nextcloud is a suite of client-server software for creating and using file hosting services. Nextcloud provides functionality similar to Dropbox, Office 365 or Google Drive.",
+      //   icon: "nextcloud.png",
+      //   route: "/nextcloud",
+      // },
+      {
+        title: "Presearch",
+        excerpt:
+          "Presearch is a community-powered, decentralized search engine that provides better results while protecting your privacy and rewarding you when you search. This weblet deploys a Presearch node. ",
+        icon: "presearch.png",
+        route: "/presearch",
+      },
+      {
+        title: "Subsquid",
+        excerpt:
+          "Subsquid indexer is a piece of software that reads all the blocks from a Substrate based blockchain, decodes and stores them for processing in a later stage.",
+        icon: "subsquid.png",
+        route: "/subsquid",
+      },
+      {
+        title: "Casperlabs",
+        excerpt:
+          "Casper Network is a blockchain protocol built from the ground up to remain true to core Web3 principles and adapt to the needs of our evolving world.",
+        icon: "casperlabs.png",
+        route: "/casperlabs",
+      },
+      {
+        title: "Algorand",
+        excerpt:
+          "Algorand builds technology that accelerates the convergence between decentralized and traditional finance by enabling the simple creation of next-generation financial products, protocols, and exchange of value.",
+        icon: "algorand.png",
+        route: "/algorand",
+      },
+      {
+        title: "Node Pilot",
+        excerpt:
+          "Deploy, manage, and monetize crypto nodes with a few clicks. Seamless Docker integration brings enterprise-level security and scalability.",
+        icon: "vm.png",
+        route: "/nodepilot",
+      },
+      {
+        title: "Umbrel",
+        excerpt:
+          "Umbrel is an OS for running a personal server in your home. Self-host open source apps like Nextcloud, Bitcoin node, and more.",
+        icon: "umbrel.png",
+        route: "/umbrel",
+      },
+      //       {
+      //         title: "Freeflow",
+      //         excerpt: `Freeflow is a convenient ecosystem on top of a resilient internet grid. We bring you a new internet with a set of
+      // productivity tools so you can enhance collaboration within your country, your company, your community.`,
+      //         icon: "freeflow.png",
+      //         route: "/freeflow",
+      //       },
+      {
+        title: "Wordpress",
+        excerpt:
+          "Wordpress is the most popular CMS on the market, powering 65.2% of websites whose CMS we know. That translates to 42.4% of all websites – nearly half of the internet. It is a popular option for those who want to build a website or blog.",
+        icon: "wordpress.png",
+        route: "/wordpress",
+      },
+    ];
+    const baseURL = import.meta.env.BASE_URL;
+
+    return {
+      cards,
+      baseURL,
+    };
+  },
+};
+</script>
+
+<style scoped>
+a {
+  text-decoration: none !important;
+}
+
+.card-opacity {
+  background-color: rgba(125, 227, 200, 0.12);
+}
+</style>
diff --git a/packages/playground/src/views/stats.vue b/packages/playground/src/views/stats.vue
new file mode 100644
index 0000000000..75f4ad8ffc
--- /dev/null
+++ b/packages/playground/src/views/stats.vue
@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div class="border px-4 pb-4 rounded position-relative mt-2">
+      <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+        <v-icon size="30" class="pr-3" color="white">mdi-chart-scatter-plot</v-icon>
+        <v-card-title class="pa-0">Statistics</v-card-title>
+      </v-card>
+      <div class="text-center">
+        <v-row align="center" justify="center">
+          <v-col cols="12" sm="6" md="4">
+            <section class="loader" v-if="loading">
+              <v-progress-circular size="150" indeterminate />
+            </section>
+          </v-col>
+        </v-row>
+      </div>
+      <v-card class="pa-5">
+        <v-row>
+          <v-col color="red" v-if="failed">
+            <v-alert type="error" variant="tonal">
+              Failed to get stats data after 3 attempts, Feel free to contact the support team or try again later.
+              <v-btn @click="fetchData" color="transparent">
+                <v-icon> mdi-refresh</v-icon>
+              </v-btn>
+            </v-alert>
+          </v-col>
+          <v-col cols="7" class="mx-auto mt-15 pr-2">
+            <tf-map r="125" g="227" b="200" :nodes="nodesDistribution" />
+          </v-col>
+          <v-divider class="v-divider--vertical mx-2 my-4" sm="0" />
+          <v-col v-if="Istats.length !== 0" class="d-flex flex-wrap justify-center">
+            <v-col v-for="item of Istats" :key="item.title" xl="4" lg="6" md="12" sm="12" cols="12" class="px-2 py-2">
+              <StatisticsCard :item="item" />
+            </v-col>
+          </v-col>
+        </v-row>
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NodeStatus, type Stats } from "@threefold/gridproxy_client";
+import { onMounted, ref } from "vue";
+
+import { gridProxyClient } from "../clients";
+import StatisticsCard from "../components/statistics_card.vue";
+import type { IStatistics as IStatistics } from "../types";
+import toTeraOrGigaOrPeta from "../utils/toTeraOrGegaOrPeta";
+
+const loading = ref(true);
+const failed = ref(false);
+
+const Istats = ref<IStatistics[]>([]);
+const nodesDistribution = ref<string>("");
+
+let stats: Stats | null | undefined = null;
+
+const fetchStats = async () => {
+  let retryCount = 0;
+
+  const fetchDataWithRetry = async (): Promise<Stats | undefined> => {
+    try {
+      loading.value = true;
+      failed.value = false;
+      const data = await gridProxyClient.stats.get({ status: NodeStatus.Up });
+
+      return data;
+    } catch (error) {
+      if (retryCount < 3) {
+        console.log("Error fetching stats:", error);
+        retryCount++;
+        console.log(`Retrying in 1 second...`);
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        return fetchDataWithRetry();
+      } else {
+        loading.value = false;
+        failed.value = true;
+      }
+    }
+  };
+
+  return fetchDataWithRetry();
+};
+
+const fetchData = async () => {
+  try {
+    stats = await fetchStats();
+    if (!loading.value || stats != null) {
+      nodesDistribution.value = JSON.stringify(stats!.nodesDistribution);
+      Istats.value = [
+        { data: stats!.nodes, title: "Nodes Online", icon: "mdi-laptop" },
+        { data: stats!.dedicatedNodes, title: "Dedicated Nodes", icon: "mdi-resistor-nodes" },
+        { data: stats!.farms, title: "Farms", icon: "mdi-tractor" },
+        { data: stats!.countries, title: "Countries", icon: "mdi-earth" },
+        { data: stats!.totalCru, title: "CPUs", icon: "mdi-cpu-64-bit" },
+        { data: toTeraOrGigaOrPeta(stats!.totalSru.toString()), title: "SSD Storage", icon: "mdi-nas" },
+        { data: toTeraOrGigaOrPeta(stats!.totalHru.toString()), title: "HDD Storage", icon: "mdi-harddisk" },
+        { data: toTeraOrGigaOrPeta(stats!.totalMru.toString()), title: "RAM", icon: "mdi-memory" },
+        { data: stats!.gpus, title: "GPUs", icon: "mdi-memory" },
+        { data: stats!.accessNodes, title: "Access Nodes", icon: "mdi-gate" },
+        { data: stats!.gateways, title: "Gateways", icon: "mdi-boom-gate-outline" },
+        { data: stats!.twins, title: "Twins", icon: "mdi-brain" },
+        { data: stats!.publicIps, title: "Public IPs", icon: "mdi-access-point" },
+        { data: stats!.contracts, title: "Contracts", icon: "mdi-file-document-edit-outline" },
+      ];
+
+      loading.value = false;
+    }
+  } catch (error) {
+    console.error("Error in fetchData:", error);
+  }
+};
+
+onMounted(fetchData);
+</script>
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index 01e52d16aa..0328005b0f 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -7,6 +7,7 @@
     :certified="certified"
     :dedicated="dedicated"
     :ipv4="ipv4"
+    :SelectedNode="selectedNode"
     title-image="images/icons/freeflow.png"
   >
     <template #title>Deploy a Freeflow Instance </template>
@@ -39,9 +40,9 @@
 
       <SelectSolutionFlavor
         v-model="solution"
-        :minimum="{ cpu: 1, memory: 1024 * 4, disk: 100 }"
-        :standard="{ cpu: 2, memory: 1024 * 16, disk: 500 }"
-        :recommended="{ cpu: 4, memory: 1024 * 32, disk: 1000 }"
+        :small="{ cpu: 1, memory: 4, disk: 100 }"
+        :medium="{ cpu: 2, memory: 16, disk: 500 }"
+        :large="{ cpu: 4, memory: 32, disk: 1000 }"
         :disabled="loadingFarm"
       />
       <Networks v-model:ipv4="ipv4" :disabled="loadingFarm"></Networks>
@@ -70,6 +71,7 @@
             }"
             v-model="farm"
             v-model:loading="loadingFarm"
+            v-model:search="farmName"
           />
 
           <SelectNode
@@ -108,7 +110,7 @@ import { computed, onMounted, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM, type Disk } from "../utils/deploy_vm";
 import { deployGatewayName, rollbackDeployment } from "../utils/gateway";
@@ -121,7 +123,8 @@ const profileManager = useProfileManager();
 
 const threebotName = ref<string>("");
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const flist = ref<Flist>();
 const disks = ref<Disk[]>([]);
 const dedicated = ref(false);
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index 615adc2c4a..02b19f301f 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/vm.png"
   >
     <template #title> Deploy a Full Virtual Machine </template>
@@ -38,9 +39,9 @@
 
         <SelectVmImage :images="images" v-model="flist" />
         <SelectSolutionFlavor
-          :minimum="{ cpu: 1, memory: 1024 * 1, disk: 25 }"
-          :standard="{ cpu: 2, memory: 1024 * 4, disk: 50 }"
-          :recommended="{ cpu: 4, memory: 1024 * 4, disk: 100 }"
+          :small="{ cpu: 1, memory: 2, disk: 25 }"
+          :medium="{ cpu: 2, memory: 4, disk: 50 }"
+          :large="{ cpu: 4, memory: 16, disk: 100 }"
           :disabled="loadingFarm"
           v-model="solution"
         />
@@ -88,6 +89,7 @@
             }"
             v-model="farm"
             v-model:loading="loadingFarm"
+            v-model:search="farmName"
           />
           <SelectNode
             v-model="selectedNode"
@@ -163,7 +165,7 @@ import SelectFarmManager from "../components/select_farm_manager.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
 import type { solutionFlavor as SolutionFlavor } from "../types";
-import { type Farm, type Flist, ProjectName } from "../types";
+import { type FarmInterface, type Flist, ProjectName } from "../types";
 import { deployVM, type Disk } from "../utils/deploy_vm";
 import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
@@ -173,7 +175,7 @@ const layout = useLayout();
 const tabs = ref();
 const profileManager = useProfileManager();
 const solution = ref() as Ref<SolutionFlavor>;
-
+const farmName = ref();
 const images: VmImage[] = [
   {
     name: "Ubuntu-22.04",
@@ -205,7 +207,7 @@ const planetary = ref(true);
 const wireguard = ref(false);
 const dedicated = ref(false);
 const certified = ref(false);
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
 const loadingFarm = ref(false);
 const disks = ref<Disk[]>([]);
 const network = ref();
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index a99e98efb0..707f6a5147 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -8,6 +8,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/vm.png"
   >
     <template #title>Deploy a Micro Virtual Machine </template>
@@ -40,9 +41,9 @@
 
         <SelectVmImage :images="images" v-model="flist" />
         <SelectSolutionFlavor
-          :minimum="{ cpu: 1, memory: 1024 * 1, disk: 25 }"
-          :standard="{ cpu: 2, memory: 1024 * 4, disk: 50 }"
-          :recommended="{ cpu: 4, memory: 1024 * 4, disk: 100 }"
+          :small="{ cpu: 1, memory: 2, disk: 25 }"
+          :medium="{ cpu: 2, memory: 4, disk: 50 }"
+          :large="{ cpu: 4, memory: 16, disk: 100 }"
           v-model="solution"
           :disabled="loadingFarm"
         />
@@ -80,6 +81,7 @@
             }"
             v-model="farm"
             v-model:loading="loadingFarm"
+            v-model:search="farmName"
           />
           <SelectNode
             v-model="selectedNode"
@@ -189,7 +191,7 @@ import Network from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import { type Farm, type Flist, ProjectName } from "../types";
+import { type FarmInterface, type Flist, ProjectName } from "../types";
 import { deployVM, type Disk, type Env } from "../utils/deploy_vm";
 import { getGrid } from "../utils/grid";
 import { generateName } from "../utils/strings";
@@ -232,7 +234,8 @@ const ipv4 = ref(false);
 const ipv6 = ref(false);
 const planetary = ref(true);
 const wireguard = ref(false);
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const envs = ref<Env[]>([]);
 const disks = ref<Disk[]>([]);
 const network = ref();
diff --git a/packages/playground/src/weblets/profile_manager.vue b/packages/playground/src/weblets/profile_manager.vue
index 399e21aee1..4888dd85e6 100644
--- a/packages/playground/src/weblets/profile_manager.vue
+++ b/packages/playground/src/weblets/profile_manager.vue
@@ -1,7 +1,7 @@
 <template>
   <VDialog
     scrollable
-    width="80%"
+    width="60%"
     :model-value="$props.modelValue"
     @update:model-value="$emit('update:model-value', $event)"
   >
@@ -18,17 +18,22 @@
           </p>
           <template v-else-if="balance">
             <p>
-              Balance: <strong :style="{ color: '#76e2c8' }">{{ normalizeBalance(balance.free, true) }} TFT</strong>
+              Balance:
+              <strong :class="theme.name.value === AppThemeSelection.light ? 'text-primary' : 'text-info'">
+                {{ normalizeBalance(balance.free, true) }} TFT
+              </strong>
             </p>
             <p>
               Locked:
-              <strong :style="{ color: '#76e2c8' }">{{ normalizeBalance(balance.locked, true) || 0 }} TFT</strong>
+              <strong :class="theme.name.value === AppThemeSelection.light ? 'text-primary' : 'text-info'">
+                {{ normalizeBalance(balance.locked, true) || 0 }} TFT
+              </strong>
               <v-tooltip text="Locked balance documentation" location="bottom right">
                 <template #activator="{ props }">
                   <v-btn
                     @click.stop
                     v-bind="props"
-                    color="white"
+                    :color="theme.name.value === AppThemeSelection.light ? 'black' : 'white'"
                     icon="mdi-information-outline"
                     height="24px"
                     width="24px"
@@ -57,16 +62,19 @@
         </v-tooltip>
       </VCard>
     </template>
-
+    <v-card color="primary" class="d-flex justify-center items-center mt-3 pa-3 text-center">
+      <v-card-title class="pa-0">TFChain Wallet</v-card-title>
+    </v-card>
     <WebletLayout disable-alerts>
-      <template #title> Connect your TFChain Wallet </template>
-      <template #subtitle>
-        Please visit
-        <a class="app-link" href="https://manual.grid.tf/playground/wallet_connector.html" target="_blank">
-          the manual
-        </a>
-        get started.
-      </template>
+      <v-alert variant="tonal" class="mb-6" v-if="activeTab === 0">
+        <p :style="{ maxWidth: '880px' }">
+          Please visit
+          <a class="app-link" href="https://manual.grid.tf/playground/wallet_connector.html" target="_blank">
+            the manual
+          </a>
+          get started.
+        </p>
+      </v-alert>
 
       <DTabs
         v-if="!profileManager.profile"
@@ -85,13 +93,13 @@
             <FormValidator v-model="isValidForm">
               <v-alert type="warning" variant="tonal" class="mb-6" v-if="activeTab === 1">
                 <p :style="{ maxWidth: '880px' }">
-                  To connect your wallet, you will need to enter your mnemonic which will be encrypted using the
-                  password. Mnemonic will never be shared outside of this device.
+                  To connect your wallet, you will need to enter your Mnemonic or Hex Seed which will be encrypted using
+                  the password. Mnemonic or Hex Seed will never be shared outside of this device.
                 </p>
               </v-alert>
               <VTooltip
                 v-if="activeTab === 1"
-                text="Mnemonic are your private key. They are used to represent you on the ThreeFold Grid. You can paste existing mnemonic or click the 'Create Account' button to create an account and generate mnemonic."
+                text="Mnemonic or Hex Seed are your private key. They are used to represent you on the ThreeFold Grid. You can paste existing (Mnemonic or Hex Seed) or click the 'Create Account' button to create an account and generate mnemonic."
                 location="bottom"
                 max-width="700px"
               >
@@ -100,19 +108,29 @@
                     <InputValidator
                       :value="mnemonic"
                       :rules="[
-                        validators.required('Mnemonic is required.'),
-                        v => (validateMnemonic(v) ? undefined : { message: `Mnemonic doesn't seem to be valid.` }),
+                        validators.required('Mnemonic or Hex Seed is required.'),
+                        v => {
+                          clearError();
+                          if (
+                            validateMnemonic(v) ||
+                            ((v.length === 64 || v.length === 66) && isAddress(v.length === 66 ? v : `0x${v}`))
+                          ) {
+                            return;
+                          }
+
+                          return { message: 'Mnemonic or Hex Seed doesn\'t seem to be valid.' };
+                        },
                       ]"
                       :async-rules="[validateMnInput]"
-                      valid-message="Mnemonic is valid."
+                      valid-message="Mnemonic or Hex Seed is valid."
                       #="{ props: validationProps }"
                       ref="mnemonicInput"
                       :disable-validation="creatingAccount || activatingAccount || activating"
                     >
                       <div v-bind="tooltipProps">
                         <VTextField
-                          label="Mnemonic"
-                          placeholder="Please insert your mnemonic"
+                          label="Mnemonic or Hex Seed"
+                          placeholder="Please insert your Mnemonic or Hex Seed"
                           v-model="mnemonic"
                           v-bind="{ ...passwordInputProps, ...validationProps }"
                           :disabled="creatingAccount || activatingAccount || activating"
@@ -137,7 +155,7 @@
                           :loading="creatingAccount"
                           @click="openAcceptTerms = termsLoading = true"
                         >
-                          generate account
+                          create account
                         </VBtn>
                       </div>
                     </InputValidator>
@@ -174,7 +192,7 @@
                 {{ createAccountError || activatingAccountError }}
               </v-alert>
 
-              <v-alert type="warning" variant="tonal" class="mb-6" v-if="activeTab === 0">
+              <v-alert type="info" variant="tonal" class="mb-6" v-if="activeTab === 0">
                 <p :style="{ maxWidth: '880px' }">
                   You will need to provide the password used while connecting your wallet.
                 </p>
@@ -191,7 +209,7 @@
                   ref="passwordInput"
                 >
                   <v-tooltip
-                    location="bottom"
+                    location="top right"
                     text="Used to encrypt your mnemonic on your local system, and is used to login from the same device."
                   >
                     <template #activator="{ props: tooltipProps }">
@@ -228,10 +246,11 @@
               </v-alert>
             </FormValidator>
 
-            <div class="d-flex justify-center">
+            <div class="d-flex justify-center mt-2">
               <VBtn
+                class="mr-2"
                 type="submit"
-                color="primary"
+                color="secondary"
                 variant="tonal"
                 :loading="activating"
                 :disabled="
@@ -240,112 +259,120 @@
                   activatingAccount ||
                   (activeTab === 1 && isValidConnectConfirmationPassword)
                 "
-                size="large"
               >
                 {{ activeTab === 0 ? "Login" : "Connect" }}
               </VBtn>
+              <VBtn color="anchor" variant="outlined" @click="$emit('update:modelValue', false)"> Close </VBtn>
             </div>
           </form>
         </VContainer>
       </DTabs>
 
       <template v-if="profileManager.profile">
-        <PasswordInputWrapper #="{ props }">
-          <VTextField
-            label="Mnemonic"
-            readonly
-            v-model="profileManager.profile.mnemonic"
-            v-bind="props"
-            :disabled="activating || creatingAccount || activatingAccount"
-          />
-        </PasswordInputWrapper>
-
-        <section class="d-flex flex-column align-center">
-          <p class="font-weight-bold mb-4">
-            Scan the QRcode using
-            <a class="app-link" href="https://manual.grid.tf/getstarted/TF_Connect/TF_Connect.html" target="_blank">
-              ThreeFold Connect
-            </a>
-            to fund your account
-          </p>
-          <QrcodeGenerator
-            :data="'TFT:' + bridge + '?message=twin_' + profileManager.profile.twinId + '&sender=me&amount=100'"
-          />
-          <div class="d-flex justify-center my-4">
-            <a
-              v-for="(app, index) in apps"
-              :key="app.alt"
-              :style="{ cursor: 'pointer', width: '150px' }"
-              :class="{ 'mr-2': index === 0 }"
-              :title="app.alt"
-              v-html="app.src"
-              :href="app.url"
-              target="_blank"
-            />
-          </div>
-        </section>
-
-        <VTooltip
-          text="SSH Keys are used to authenticate you to the deployment instance for management purposes. If you don't have an SSH Key or are not familiar, we can generate one for you."
-          location="bottom"
-          max-width="700px"
-        >
-          <template #activator="{ props }">
-            <CopyInputWrapper :data="profileManager.profile.ssh" #="{ props: copyInputProps }">
-              <VTextarea
-                label="Public SSH Key"
-                no-resize
-                :spellcheck="false"
-                v-model.trim="ssh"
-                v-bind="{ ...props, ...copyInputProps }"
-                :disabled="updatingSSH || generatingSSH"
-                :hint="
-                  updatingSSH
-                    ? 'Updating your public ssh key.'
-                    : generatingSSH
-                    ? 'Generating a new public ssh key.'
-                    : SSHKeyHint
-                "
-                :persistent-hint="updatingSSH || generatingSSH || !!SSHKeyHint"
-                :rules="[value => !!value || 'SSH key is required']"
+        <v-row class="py-2 pb-5">
+          <v-col cols="7" sm="12" md="6" lg="7">
+            <PasswordInputWrapper #="{ props }">
+              <VTextField
+                label="Your Hex Seed"
+                readonly
+                v-model="profileManager.profile.mnemonic"
+                v-bind="props"
+                :disabled="activating || creatingAccount || activatingAccount"
               />
+            </PasswordInputWrapper>
+            <VTooltip
+              text="SSH Keys are used to authenticate you to the deployment instance for management purposes. If you don't have an SSH Key or are not familiar, we can generate one for you."
+              location="bottom"
+              max-width="600px"
+            >
+              <template #activator="{ props }">
+                <CopyInputWrapper :data="profileManager.profile.ssh" #="{ props: copyInputProps }">
+                  <VTextarea
+                    label="Public SSH Key"
+                    no-resize
+                    :spellcheck="false"
+                    v-model.trim="ssh"
+                    v-bind="{ ...props, ...copyInputProps }"
+                    :disabled="updatingSSH || generatingSSH"
+                    :hint="
+                      updatingSSH
+                        ? 'Updating your public ssh key.'
+                        : generatingSSH
+                        ? 'Generating a new public ssh key.'
+                        : SSHKeyHint
+                    "
+                    :persistent-hint="updatingSSH || generatingSSH || !!SSHKeyHint"
+                    :rules="[value => !!value || 'SSH key is required']"
+                  />
+                </CopyInputWrapper>
+              </template>
+            </VTooltip>
+
+            <div class="d-flex justify-end mb-5">
+              <VBtn
+                class="mr-2 text-subtitle-2"
+                color="secondary"
+                variant="tonal"
+                :disabled="!!ssh || updatingSSH || generatingSSH || !isEnoughBalance(balance)"
+                :loading="generatingSSH"
+                @click="generateSSH"
+              >
+                Generate SSH Keys
+              </VBtn>
+              <VBtn
+                class="text-subtitle-2"
+                color="secondary"
+                variant="outlined"
+                @click="updateSSH"
+                :disabled="!ssh || profileManager.profile.ssh === ssh || updatingSSH || !isEnoughBalance(balance)"
+                :loading="updatingSSH"
+              >
+                Update Public SSH Key
+              </VBtn>
+            </div>
+
+            <CopyInputWrapper :data="profileManager.profile.twinId.toString()" #="{ props }">
+              <VTextField label="Twin ID" readonly v-model="profileManager.profile.twinId" v-bind="props" />
             </CopyInputWrapper>
-          </template>
-        </VTooltip>
-
-        <VRow class="mb-3">
-          <VSpacer />
-          <VBtn
-            color="secondary"
-            variant="text"
-            :disabled="!!ssh || updatingSSH || generatingSSH || !isEnoughBalance(balance)"
-            :loading="generatingSSH"
-            @click="generateSSH"
-          >
-            Generate SSH Keys
-          </VBtn>
-          <VBtn
-            color="primary"
-            variant="text"
-            @click="updateSSH"
-            :disabled="!ssh || profileManager.profile.ssh === ssh || updatingSSH || !isEnoughBalance(balance)"
-            :loading="updatingSSH"
-          >
-            Update Public SSH Key
-          </VBtn>
-        </VRow>
-
-        <CopyInputWrapper :data="profileManager.profile.twinId.toString()" #="{ props }">
-          <VTextField label="Twin ID" readonly v-model="profileManager.profile.twinId" v-bind="props" />
-        </CopyInputWrapper>
-
-        <CopyInputWrapper :data="profileManager.profile.address" #="{ props }">
-          <VTextField label="Address" readonly v-model="profileManager.profile.address" v-bind="props" />
-        </CopyInputWrapper>
-      </template>
 
-      <template #footer-actions>
+            <CopyInputWrapper :data="profileManager.profile.address" #="{ props }">
+              <VTextField label="Address" readonly v-model="profileManager.profile.address" v-bind="props" />
+            </CopyInputWrapper>
+          </v-col>
+          <v-divider class="mx-4" vertical></v-divider>
+
+          <v-col>
+            <section class="d-flex flex-column align-center">
+              <p class="mb-4 text-center">
+                Scan the QR code using
+                <a class="app-link" href="https://manual.grid.tf/getstarted/TF_Connect/TF_Connect.html" target="_blank">
+                  ThreeFold Connect
+                </a>
+                to fund your account
+              </p>
+              <QrcodeGenerator
+                :data="'TFT:' + bridge + '?message=twin_' + profileManager.profile.twinId + '&sender=me&amount=100'"
+              />
+              <div class="d-flex justify-center my-4">
+                <a
+                  v-for="(app, index) in apps"
+                  :key="app.alt"
+                  :style="{ cursor: 'pointer', width: '150px' }"
+                  :class="{ 'mr-2': index === 0 }"
+                  :title="app.alt"
+                  v-html="app.src"
+                  :href="app.url"
+                  target="_blank"
+                />
+              </div>
+            </section>
+          </v-col>
+        </v-row>
+      </template>
+      <!-- <v-divider horizontal></v-divider> -->
+      <div class="d-flex justify-end mt-4 mb-2">
         <VBtn
+          class="mr-2"
           color="error"
           variant="tonal"
           @click="logout"
@@ -354,20 +381,32 @@
         >
           Logout
         </VBtn>
-        <VBtn color="error" variant="outlined" @click="$emit('update:modelValue', false)"> Close </VBtn>
-      </template>
+        <VBtn
+          v-if="profileManager.profile"
+          color="anchor"
+          variant="outlined"
+          @click="$emit('update:modelValue', false)"
+        >
+          Close
+        </VBtn>
+      </div>
     </WebletLayout>
   </VDialog>
 </template>
 
 <script lang="ts" setup>
+import { isAddress } from "@polkadot/util-crypto";
 import { validateMnemonic } from "bip39";
 import Cryptr from "cryptr";
 import md5 from "md5";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 import { nextTick } from "vue";
+import { useTheme } from "vuetify";
 import { generateKeyPair } from "web-ssh-keygen";
 
+import { AppThemeSelection } from "@/utils/app_theme";
+
+import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useInputRef } from "../hooks/input_validator";
 import { useProfileManager } from "../stores";
 import {
@@ -387,6 +426,8 @@ interface Credentials {
   mnemonicHash?: string;
 }
 
+const theme = useTheme();
+
 const props = defineProps({
   modelValue: {
     required: false,
@@ -640,7 +681,10 @@ async function generateSSH() {
 }
 
 const loadingBalance = ref(false);
-async function __loadBalance(profile: Profile) {
+async function __loadBalance(profile?: Profile) {
+  profile = profile || profileManager.profile!;
+  if (!profile) return;
+
   try {
     loadingBalance.value = true;
     const grid = await getGrid(profile);
@@ -651,6 +695,9 @@ async function __loadBalance(profile: Profile) {
   }
 }
 
+const profileManagerController = useProfileManagerController();
+profileManagerController.set({ loadBalance: __loadBalance });
+
 function login() {
   const credentials: Credentials = getCredentials();
   if (credentials.mnemonicHash && credentials.passwordHash) {
@@ -713,3 +760,8 @@ export default {
   },
 };
 </script>
+<style>
+.v-field__input {
+  font-size: small;
+}
+</style>
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index 68346c4717..95363f0fea 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/algorand.png"
   >
     <template #title>Deploy a Algorand Instance </template>
@@ -164,6 +165,7 @@
           }"
           v-model="farm"
           v-model:loading="loadingFarm"
+          v-model:search="farmName"
         />
         <SelectNode
           v-model="selectedNode"
@@ -191,10 +193,9 @@
 <script lang="ts" setup>
 import { computed, type Ref, ref, watch } from "vue";
 
-import Network from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import { type Farm, type Flist, ProjectName, type Validators } from "../types";
+import { type FarmInterface, type Flist, ProjectName, type Validators } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { getGrid } from "../utils/grid";
 import { generateName } from "../utils/strings";
@@ -218,7 +219,8 @@ const account = ref("");
 const wordsLength = computed(() => (account.value ? account.value.split(" ").length : 0));
 const firstRound = ref(24000000);
 const lastRound = ref(26000000);
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const dedicated = ref(false);
 const certified = ref(false);
 const loadingFarm = ref(false);
diff --git a/packages/playground/src/weblets/tf_caprover.vue b/packages/playground/src/weblets/tf_caprover.vue
index 505108001a..e67167a04e 100644
--- a/packages/playground/src/weblets/tf_caprover.vue
+++ b/packages/playground/src/weblets/tf_caprover.vue
@@ -13,6 +13,7 @@
     :ipv4="true"
     :certified="leader.certified"
     :dedicated="leader.dedicated"
+    :SelectedNode="leader.selectedNode"
     title-image="images/icons/caprover.png"
   >
     <template #title>Deploy a Caprover Instance</template>
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 21da542463..d20ec5588d 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/casperlabs.png"
   >
     <template #title>Deploy a Casperlabs Instance </template>
@@ -31,9 +32,9 @@
 
       <SelectSolutionFlavor
         v-model="solution"
-        :minimum="{ cpu: 1, memory: 1024 * 4, disk: 100 }"
-        :standard="{ cpu: 2, memory: 1024 * 16, disk: 500 }"
-        :recommended="{ cpu: 4, memory: 1024 * 32, disk: 1000 }"
+        :small="{ cpu: 2, memory: 4, disk: 100 }"
+        :medium="{ cpu: 4, memory: 16, disk: 500 }"
+        :large="{ cpu: 8, memory: 32, disk: 1000 }"
         :disabled="loadingFarm"
       />
       <Networks v-model:ipv4="ipv4" :disabled="loadingFarm" />
@@ -63,6 +64,7 @@
             }"
             v-model="farm"
             v-model:loading="loadingFarm"
+            v-model:search="farmName"
           />
           <SelectNode
             v-model="selectedNode"
@@ -100,7 +102,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
@@ -114,7 +116,8 @@ const profileManager = useProfileManager();
 
 const name = ref(generateName({ prefix: "cl" }));
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/casperlabs-latest.flist",
   entryPoint: "/sbin/zinit init",
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index fc21001475..325badaabe 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -13,7 +13,11 @@
         refresh
       </v-btn>
     </template>
+    <v-alert type="error" variant="tonal" class="mt-2 mb-4" v-if="loadingError">
+      Failed to list your contracts: {{ loadingError }}
+    </v-alert>
     <ListTable
+      v-else
       :headers="headers"
       :items="contracts"
       :loading="loading"
@@ -22,6 +26,11 @@
       no-data-text="No contracts found on this account."
       v-bind:onClick:row="loading || deleting ? undefined : onClickRow"
     >
+      <template #[`item.consumption`]="{ item }">
+        <p v-if="item.raw.consumption !== 0">{{ item.raw.consumption.toFixed(3) }} TFT/hour</p>
+        <p v-else>No Data Available</p>
+      </template>
+
       <template #[`item.state`]="{ item }">
         <v-tooltip
           v-if="item && item.value.state === ContractStates.GracePeriod"
@@ -76,6 +85,11 @@
         </v-tooltip>
       </template>
     </ListTable>
+    <div class="pt-4">
+      <v-alert variant="tonal" color="secondary" class="pt-4" v-if="contracts.length && totalCost"
+        >Total Cost: {{ totalCost }} TFT/hour ≈ {{ (totalCost * 24 * 30).toFixed(3) }} TFT/month</v-alert
+      >
+    </div>
 
     <template #footer-actions>
       <v-btn
@@ -85,7 +99,7 @@
         :disabled="isExporting || contracts.length === 0"
         @click="exportData"
       >
-        Export My Data
+        Export
       </v-btn>
       <v-btn
         variant="outlined"
@@ -149,6 +163,7 @@
 
 <script lang="ts" setup>
 import { ContractStates, type GridClient } from "@threefold/grid_client";
+import { Decimal } from "decimal.js";
 import { computed, type Ref, ref } from "vue";
 
 import { useProfileManager } from "../stores";
@@ -164,6 +179,7 @@ const isExporting = ref(false);
 const grid = ref<GridClient | null>();
 const selectedContracts = ref<NormalizedContract[]>([]);
 const nodeStatus = ref() as Ref<{ [x: number]: NodeStatus }>;
+const totalCost = ref(0);
 const headers: VDataTableHeader = [
   { title: "PLACEHOLDER", key: "data-table-select" },
   { title: "ID", key: "contractId" },
@@ -178,15 +194,23 @@ const headers: VDataTableHeader = [
   { title: "Node Status", key: "nodeStatus", sortable: false },
   { title: "Details", key: "actions", sortable: false },
 ];
-
+const loadingError = ref("");
 async function onMount() {
+  loadingError.value = "";
   loading.value = true;
-  failedContractId.value = undefined;
   contracts.value = [];
-  grid.value = await getGrid(profileManager.profile!);
-  contracts.value = await getUserContracts(grid.value!);
-  nodeStatus.value = await getNodeStatus(nodeIDs.value);
-  loading.value = false;
+  try {
+    grid.value = await getGrid(profileManager.profile!);
+    contracts.value = await getUserContracts(grid.value!);
+    totalCost.value = getTotalCost(contracts.value);
+    nodeStatus.value = await getNodeStatus(nodeIDs.value);
+  } catch (e) {
+    loadingError.value = (e as Error).message;
+  } finally {
+    failedContractId.value = undefined;
+    selectedContracts.value = [];
+    loading.value = false;
+  }
 }
 
 const nodeIDs = computed(() => {
@@ -272,6 +296,7 @@ async function onDelete() {
       });
     }
     contracts.value = contracts.value!.filter(c => !selectedContracts.value.includes(c));
+    totalCost.value = getTotalCost(contracts.value);
     selectedContracts.value = [];
   } catch (e) {
     if ((e as Error).message.includes("Inability to pay some fees")) {
@@ -306,6 +331,14 @@ function getNodeStateColor(state: NodeStatus): string {
       return "warning";
   }
 }
+
+function getTotalCost(contracts: NormalizedContract[]) {
+  totalCost.value = 0;
+  for (const contract of contracts) {
+    totalCost.value = +new Decimal(totalCost.value).add(contract.consumption);
+  }
+  return +totalCost.value.toFixed(3);
+}
 </script>
 
 <script lang="ts">
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index 4c2f124f48..574a0fe92b 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -408,22 +408,28 @@ watch(activeTab, () => (selectedItems.value = []));
 async function onDelete(k8s = false) {
   deletingDialog.value = false;
   deleting.value = true;
-  const grid = await getGrid(profileManager.profile!);
-  for (const item of selectedItems.value) {
-    try {
-      await deleteDeployment(updateGrid(grid!, { projectName: item.projectName }), {
-        name: item.deploymentName,
-        projectName: item.projectName,
-        k8s,
-      });
-    } catch (e: any) {
-      console.log("Error while deleting deployment", e.message);
+  try {
+    const grid = await getGrid(profileManager.profile!);
+    for (const item of selectedItems.value) {
+      try {
+        await deleteDeployment(updateGrid(grid!, { projectName: item.projectName }), {
+          name: item.deploymentName,
+          projectName: item.projectName,
+          k8s,
+        });
+      } catch (e: any) {
+        createCustomToast(`Failed to delete deployment with name: ${item.deploymentName}`, ToastType.danger);
+        console.log("Error while deleting deployment", e.message);
+        continue;
+      }
+      table.value?.loadDeployments();
     }
+  } catch (e) {
+    createCustomToast((e as Error).message, ToastType.danger);
+  } finally {
+    selectedItems.value = [];
+    deleting.value = false;
   }
-
-  selectedItems.value = [];
-  table.value?.loadDeployments();
-  deleting.value = false;
 }
 
 const VMS: string[] = [ProjectName.Fullvm, ProjectName.VM, ProjectName.NodePilot];
@@ -460,6 +466,7 @@ import ManageGatewayDialog from "../components/manage_gateway_dialog.vue";
 import ManageK8SWorkerDialog from "../components/manage_k8s_worker_dialog.vue";
 import VmDeploymentTable from "../components/vm_deployment_table.vue";
 import { ProjectName } from "../types";
+import { createCustomToast, ToastType } from "../utils/custom_toast";
 
 export default {
   name: "TfDeploymentList",
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index 1a66135fb1..96ccc66cdc 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -7,6 +7,7 @@
     :certified="certified"
     :dedicated="dedicated"
     :ipv4="ipv4"
+    :SelectedNode="selectedNode"
     title-image="images/icons/discourse.png"
   >
     <template #title> Deploy a Discourse Instance </template>
@@ -54,8 +55,8 @@
 
         <SelectSolutionFlavor
           v-model="solution"
-          :standard="{ cpu: 2, memory: 1024 * 2, disk: 50 }"
-          :recommended="{ cpu: 4, memory: 1024 * 4, disk: 100 }"
+          :medium="{ cpu: 2, memory: 4, disk: 50 }"
+          :large="{ cpu: 4, memory: 16, disk: 100 }"
           :disabled="loadingFarm"
         />
         <!-- <Networks v-model:ipv4="ipv4" /> -->
@@ -98,6 +99,7 @@
               }"
               v-model="farm"
               v-model:loading="loadingFarm"
+              v-model:search="farmName"
             />
 
             <SelectNode
@@ -144,7 +146,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
@@ -160,7 +162,8 @@ const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "dc" }));
 const email = ref("");
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const ipv4 = ref(false);
 const domainNameCmp = ref();
 const smtp = ref(createSMTPServer());
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 0d9da6794c..52585c4b43 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/funkwhale.png"
   >
     <template #title>Deploy a Funkwhale Instance </template>
@@ -85,8 +86,8 @@
 
       <SelectSolutionFlavor
         v-model="solution"
-        :minimum="{ cpu: 2, memory: 1024, disk: 50 }"
-        :standard="{ cpu: 2, memory: 1024 * 2, disk: 100 }"
+        :small="{ cpu: 1, memory: 2, disk: 50 }"
+        :medium="{ cpu: 2, memory: 4, disk: 100 }"
         :disabled="loadingFarm"
       />
       <Networks v-model:ipv4="ipv4" :disabled="loadingFarm" />
@@ -114,6 +115,7 @@
             }"
             v-model="farm"
             v-model:loading="loadingFarm"
+            v-model:search="farmName"
           />
 
           <SelectNode
@@ -152,7 +154,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
@@ -169,7 +171,8 @@ const username = ref("admin");
 const email = ref("");
 const password = ref(generatePassword(12));
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const rootFilesystemSize = computed(() => rootFs(solution.value?.cpu ?? 0, solution.value?.memory ?? 0));
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/funkwhale-dec21.flist",
diff --git a/packages/playground/src/weblets/tf_kubernetes.vue b/packages/playground/src/weblets/tf_kubernetes.vue
index 69134768ef..1feff7a90d 100644
--- a/packages/playground/src/weblets/tf_kubernetes.vue
+++ b/packages/playground/src/weblets/tf_kubernetes.vue
@@ -9,6 +9,7 @@
     :ipv4="master.ipv4"
     :certified="master.certified"
     :dedicated="master.dedicated"
+    :SelectedNode="master.selectedNode"
     title-image="images/icons/kubernetes.png"
   >
     <template #title>Deploy a Kubernetes cluster</template>
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index b061be58ef..c1a0661a83 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/mattermost.png"
   >
     <template #title>Deploy a Mattermost Instance </template>
@@ -38,8 +39,8 @@
 
         <SelectSolutionFlavor
           v-model="solution"
-          :standard="{ cpu: 2, memory: 1024 * 4, disk: 50 }"
-          :recommended="{ cpu: 4, memory: 1024 * 4, disk: 100 }"
+          :medium="{ cpu: 2, memory: 4, disk: 50 }"
+          :large="{ cpu: 4, memory: 16, disk: 100 }"
           :disabled="loadingFarm"
         />
         <!-- <Networks v-model:ipv4="ipv4" /> -->
@@ -81,6 +82,7 @@
               }"
               v-model="farm"
               v-model:loading="loadingFarm"
+              v-model:search="farmName"
             />
 
             <SelectNode
@@ -125,7 +127,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
@@ -138,7 +140,8 @@ const profileManager = useProfileManager();
 
 const name = ref(generateName({ prefix: "mm" }));
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const loadingFarm = ref(false);
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/mattermost-latest.flist",
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index b859a34255..905801810f 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/nextcloud.png"
   >
     <template #title>Deploy a Nextcloud All-in-One Instance </template>
@@ -30,11 +31,10 @@
       </input-validator>
 
       <SelectSolutionFlavor
+        :small="{ cpu: 2, memory: 4, disk: 50 }"
+        :medium="{ cpu: 4, memory: 8, disk: 500 }"
+        :large="{ cpu: 4, memory: 16, disk: 1000 }"
         v-model="solution"
-        :minimum="{ cpu: 2, memory: 1024 * 4, disk: 50 }"
-        :standard="{ cpu: 4, memory: 1024 * 8, disk: 500 }"
-        :recommended="{ cpu: 4, memory: 1024 * 16, disk: 1000 }"
-        :disabled="loadingFarm"
       />
       <Networks v-model:ipv4="ipv4" :disabled="loadingFarm" />
 
@@ -63,6 +63,7 @@
             }"
             v-model="farm"
             v-model:loading="loadingFarm"
+            v-model:search="farmName"
           />
           <SelectNode
             v-model="selectedNode"
@@ -100,7 +101,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
@@ -114,7 +115,8 @@ const profileManager = useProfileManager();
 
 const name = ref(generateName({ prefix: "nc" }));
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/threefoldtech-nextcloudaio-latest.flist",
   entryPoint: "/sbin/zinit init",
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index c63b090971..ecff4150c9 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -7,6 +7,7 @@
     :certified="certified"
     :dedicated="dedicated"
     ipv4
+    :SelectedNode="selectedNode"
     title-image="images/icons/vm.png"
   >
     <template #title>Deploy a Node Pilot</template>
@@ -87,6 +88,7 @@
           }"
           v-model="farm"
           v-model:loading="loadingFarm"
+          v-model:search="farmName"
         />
 
         <SelectNode
@@ -116,7 +118,7 @@ import { type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import { type Farm, type Flist, ProjectName } from "../types";
+import { type FarmInterface, type Flist, ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { getGrid } from "../utils/grid";
 import { generateName } from "../utils/strings";
@@ -128,7 +130,8 @@ const loadingFarm = ref(false);
 const name = ref(generateName({ prefix: "np" }));
 const cpu = ref(8);
 const memory = ref(8192);
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-vms/node-pilot-zdbfs.flist",
   entryPoint: "/",
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index 3280317b23..d153c07c8f 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/owncloud.png"
   >
     <template #title>Deploy an OwnCloud Instance </template>
@@ -74,9 +75,9 @@
 
         <SelectSolutionFlavor
           v-model="solution"
-          :minimum="{ cpu: 2, memory: 1024 * 16, disk: 250 }"
-          :standard="{ cpu: 2, memory: 1024 * 16, disk: 500 }"
-          :recommended="{ cpu: 4, memory: 1024 * 16, disk: 1000 }"
+          :small="{ cpu: 2, memory: 8, disk: 250 }"
+          :medium="{ cpu: 4, memory: 16, disk: 500 }"
+          :large="{ cpu: 8, memory: 32, disk: 1000 }"
           :disabled="loadingFarm"
         />
         <Networks v-model:ipv4="ipv4" :disabled="loadingFarm" />
@@ -118,6 +119,7 @@
               }"
               v-model="farm"
               v-model:loading="loadingFarm"
+              v-model:search="farmName"
             />
             <SelectNode
               v-model="selectedNode"
@@ -162,7 +164,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
@@ -177,7 +179,8 @@ const name = ref(generateName({ prefix: "oc" }));
 const username = ref("admin");
 const password = ref(generatePassword());
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const loadingFarm = ref(false);
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/owncloud-10.9.1.flist",
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index a3f8382055..0396107d2c 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/peertube.png"
   >
     <template #title>Deploy a Peertube Instance</template>
@@ -86,6 +87,7 @@
             }"
             v-model="farm"
             v-model:loading="loadingFarm"
+            v-model:search="farmName"
           />
 
           <SelectNode
@@ -124,7 +126,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
@@ -138,7 +140,8 @@ const name = ref(generateName({ prefix: "pt" }));
 const email = ref("");
 const password = ref(generatePassword());
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const loadingFarm = ref(false);
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/peertube-v3.1.1.flist",
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index ec371c474d..6ca4ad3360 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/presearch.png"
   >
     <template #title>Deploy a Presearch Instance</template>
@@ -81,6 +82,7 @@
             exclusive-for="research"
             v-model="farm"
             v-model:loading="loadingFarm"
+            v-model:search="farmName"
           />
 
           <SelectNode
@@ -128,7 +130,7 @@ import { type Ref, ref } from "vue";
 import Network from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import { type Farm, type Flist, ProjectName } from "../types";
+import { type FarmInterface, type Flist, ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { getGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
@@ -148,7 +150,8 @@ const memory = 512;
 const rootFilesystemSize = rootFs(cpu, memory);
 const loadingFarm = ref(false);
 const dockerDiskSize = 10;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const privateRestoreKey = ref("");
 const publicRestoreKey = ref("");
 const network = ref();
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index bc3f2ca3e5..7e5bf7383e 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/subsquid.png"
   >
     <template #title>Deploy a Subsquid Instance </template>
@@ -37,15 +38,15 @@
         ]"
         #="{ props }"
       >
-        <input-tooltip tooltip="Subsquid websockt endpoint.">
-          <v-text-field label="Websockt Endpoint" v-model="endpoint" v-bind="props" />
+        <input-tooltip tooltip="Subsquid websocket endpoint.">
+          <v-text-field label="Websocket Endpoint" v-model="endpoint" v-bind="props" />
         </input-tooltip>
       </input-validator>
 
       <SelectSolutionFlavor
         v-model="solution"
-        :minimum="{ cpu: 1, memory: 1024, disk: 50 }"
-        :standard="{ cpu: 2, memory: 1024 * 2, disk: 100 }"
+        :small="{ cpu: 1, memory: 2, disk: 50 }"
+        :medium="{ cpu: 2, memory: 4, disk: 100 }"
         :disabled="loadingFarm"
       />
       <!-- <Networks v-model:ipv4="ipv4" /> -->
@@ -73,6 +74,7 @@
             }"
             v-model="farm"
             v-model:loading="loadingFarm"
+            v-model:search="farmName"
           />
 
           <SelectNode
@@ -111,7 +113,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
@@ -126,7 +128,8 @@ const name = ref(generateName({ prefix: "ss" }));
 const endpoint = ref("");
 const ipv4 = ref(false);
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/subsquid-latest.flist",
   entryPoint: "/sbin/zinit init",
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index ad16c8f011..46325e4f7b 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/taiga.png"
   >
     <template #title>Deploy a Taiga Instance</template>
@@ -86,8 +87,8 @@
 
         <SelectSolutionFlavor
           v-model="solution"
-          :minimum="{ cpu: 2, memory: 1024 * 2, disk: 100 }"
-          :standard="{ cpu: 2, memory: 1024 * 4, disk: 150 }"
+          :small="{ cpu: 2, memory: 4, disk: 100 }"
+          :medium="{ cpu: 4, memory: 8, disk: 150 }"
           :disabled="loadingFarm"
         />
         <!-- <Networks v-model:ipv4="ipv4" /> -->
@@ -129,6 +130,7 @@
               }"
               v-model="farm"
               v-model:loading="loadingFarm"
+              v-model:search="farmName"
             />
 
             <SelectNode
@@ -174,7 +176,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
@@ -190,7 +192,8 @@ const username = ref("admin");
 const password = ref(generatePassword());
 const email = ref("");
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const loadingFarm = ref(false);
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/grid3_taiga_docker-latest.flist",
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 7b9e6c84d6..b2a16b0a9b 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/umbrel.png"
   >
     <template #title>Deploy an Umbrel Instance </template>
@@ -76,9 +77,9 @@
 
       <SelectSolutionFlavor
         v-model="solution"
-        :minimum="{ cpu: 2, memory: 1024 * 2, disk: 10 }"
-        :standard="{ cpu: 2, memory: 1024 * 4, disk: 50 }"
-        :recommended="{ cpu: 4, memory: 1024 * 4, disk: 100 }"
+        :small="{ cpu: 1, memory: 2, disk: 10 }"
+        :medium="{ cpu: 2, memory: 4, disk: 50 }"
+        :large="{ cpu: 4, memory: 16, disk: 100 }"
         :disabled="loadingFarm"
       />
 
@@ -105,6 +106,7 @@
           }"
           v-model="farm"
           v-model:loading="loadingFarm"
+          v-model:search="farmName"
         />
 
         <SelectNode
@@ -134,7 +136,7 @@ import { computed, type Ref, ref } from "vue";
 import Network from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { getGrid } from "../utils/grid";
@@ -154,7 +156,8 @@ const planetary = ref(true);
 const wireguard = ref(false);
 const network = ref();
 const solution = ref() as Ref<SolutionFlavor>;
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const loadingFarm = ref(false);
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/umbrel-latest.flist",
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index 17baa42183..8333e70f27 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -7,6 +7,7 @@
     :ipv4="ipv4"
     :certified="certified"
     :dedicated="dedicated"
+    :SelectedNode="selectedNode"
     title-image="images/icons/wordpress.png"
   >
     <template #title>Deploy a Wordpress Instance </template>
@@ -85,8 +86,8 @@
 
       <SelectSolutionFlavor
         v-model="solution"
-        :standard="{ cpu: 2, memory: 1024 * 2, disk: 50 }"
-        :recommended="{ cpu: 4, memory: 1024 * 4, disk: 100 }"
+        :medium="{ cpu: 2, memory: 4, disk: 50 }"
+        :large="{ cpu: 4, memory: 16, disk: 100 }"
         :disabled="loadingFarm"
       />
       <Networks v-model:ipv4="ipv4" />
@@ -115,6 +116,7 @@
             }"
             v-model="farm"
             v-model:loading="loadingFarm"
+            v-model:search="farmName"
           />
 
           <SelectNode
@@ -153,7 +155,7 @@ import { computed, type Ref, ref } from "vue";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useProfileManager } from "../stores";
-import type { Farm, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
+import type { FarmInterface, Flist, GatewayNode, solutionFlavor as SolutionFlavor } from "../types";
 import { ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
@@ -171,7 +173,8 @@ const email = ref("");
 const password = ref(generatePassword());
 const solution = ref() as Ref<SolutionFlavor>;
 const domainNameCmp = ref();
-const farm = ref() as Ref<Farm>;
+const farm = ref() as Ref<FarmInterface>;
+const farmName = ref();
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/tf-wordpress-latest.flist",
   entryPoint: "/sbin/zinit init",
diff --git a/packages/playground/tsconfig.app.json b/packages/playground/tsconfig.app.json
index 0d8dce57ab..fc5064c576 100644
--- a/packages/playground/tsconfig.app.json
+++ b/packages/playground/tsconfig.app.json
@@ -4,7 +4,6 @@
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "ignoreDeprecations": "5.0",
-    "composite": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
diff --git a/packages/rmb_direct_client/examples/direct/node.ts b/packages/rmb_direct_client/examples/direct/node.ts
index 8655cf3599..a32e3cfe24 100644
--- a/packages/rmb_direct_client/examples/direct/node.ts
+++ b/packages/rmb_direct_client/examples/direct/node.ts
@@ -1,3 +1,5 @@
+import { ConnectionError } from "@threefold/types";
+
 import { Client } from "../../lib/client";
 
 async function main() {
@@ -23,7 +25,7 @@ async function main() {
     // print response
     console.log({ response });
   } catch (err) {
-    throw new Error(`RMB Client connection failed due to ${err}`);
+    throw new ConnectionError(`RMB Client connection failed due to ${err}`);
   } finally {
     client.close();
   }
diff --git a/packages/rmb_direct_client/lib/client.ts b/packages/rmb_direct_client/lib/client.ts
index 74ab5bef32..e9b5b1f287 100644
--- a/packages/rmb_direct_client/lib/client.ts
+++ b/packages/rmb_direct_client/lib/client.ts
@@ -3,6 +3,7 @@ import { KeyringPair } from "@polkadot/keyring/types";
 import { KeypairType } from "@polkadot/util-crypto/types";
 import { waitReady } from "@polkadot/wasm-crypto";
 import { Client as TFClient } from "@threefold/tfchain_client";
+import { ConnectionError, InvalidResponse, RMBError, TimeoutError, ValidationError } from "@threefold/types";
 import base64url from "base64url";
 import { Buffer } from "buffer";
 import { v4 as uuidv4 } from "uuid";
@@ -41,7 +42,7 @@ class Client {
     }
 
     if (!(keypairType.toLowerCase().trim() in KPType)) {
-      throw new Error({ message: "Unsupported Keypair type" });
+      throw new ValidationError("Unsupported Keypair type");
     }
 
     Client.connections.set(key, this);
@@ -91,28 +92,23 @@ class Client {
         }
       };
     } catch (err) {
-      throw new Error({ message: `Unable to create websocket connection due to ${err}` });
+      throw new ConnectionError(`Unable to create websocket connection due to ${err}`);
     }
   }
   async connect() {
     if (this.con) return;
 
-    try {
-      await this.tfclient.connect();
-      await this.createSigner();
-      const twinId = await this.tfclient.twins.getTwinIdByAccountId({ accountId: this.signer.address });
-      this.twin = await this.tfclient.twins.get({ id: twinId });
-      if (!twinId) {
-        throw new Error({ message: `Couldn't find a user for the provided mnemonic on this network.` });
-      }
-    } catch (e) {
-      console.log(e);
-      throw new Error({ message: `Couldn't find a user for the provided mnemonic on this network.` });
+    await this.tfclient.connect();
+    await this.createSigner();
+    const twinId = await this.tfclient.twins.getTwinIdByAccountId({ accountId: this.signer.address });
+    this.twin = await this.tfclient.twins.get({ id: twinId });
+    if (!twinId) {
+      throw new ValidationError(`Couldn't find a user for the provided mnemonic on this network.`);
     }
 
     try {
       if (!this.twin) {
-        throw new Error({ message: "twin does not exist, please create a twin first" });
+        throw new ValidationError("twin does not exist, please create a twin first");
       }
       const relayHostName = this.relayUrl.replace("wss://", "").replace("/", "");
       const pk = generatePublicKey(this.mnemonics);
@@ -143,9 +139,12 @@ class Client {
         c.close();
       }
       console.log(err);
-      throw new Error({
-        message: `Unable to establish a connection with the RMB server. Please check your internet connection and try again. If the problem persists, please contact our support.`,
-      });
+      throw new ConnectionError(
+        `Unable to establish a connection with the RMB server ${this.relayUrl.replace(
+          "wss://",
+          "",
+        )}. Please check your internet connection and try again. If the problem persists, please contact our support.`,
+      );
     }
   }
 
@@ -178,7 +177,7 @@ class Client {
       const interval = setInterval(() => {
         if (currentAttempt > maxNumberOfAttempts - 1) {
           clearInterval(interval);
-          reject(new Error({ message: "Maximum number of attempts exceeded" }));
+          reject(new ConnectionError("Maximum number of attempts exceeded"));
         } else if (this.con && this.con.readyState === this.con.OPEN) {
           clearInterval(interval);
           resolve("connected");
@@ -209,9 +208,7 @@ class Client {
           await this.waitForOpenConnection();
         } catch (er) {
           if (retries === retriesCount) {
-            const e = new Error();
-            e.message = `Failed to open connection after try for ${retriesCount} times.`;
-            throw e;
+            throw new ConnectionError(`Failed to open connection after try for ${retriesCount} times.`);
           }
           this.createConnection();
         }
@@ -224,7 +221,7 @@ class Client {
 
       return clientEnvelope.uid;
     } catch (err) {
-      throw new Error({ message: `Unable to send due to ${err}` });
+      throw new RMBError(`Unable to send due to ${err}`);
     }
   }
 
@@ -236,6 +233,9 @@ class Client {
     retries: number = this.retries,
   ) {
     try {
+      // need to check if destination twinId exists by fetching dest twin from chain first
+      this.destTwin = await this.tfclient.twins.get({ id: destinationTwinId });
+
       // create new envelope with given data and destination
       const envelope = new Envelope({
         uid: uuidv4(),
@@ -243,8 +243,6 @@ class Client {
         expiration: expirationMinutes * 60,
         source: this.source,
       });
-      // need to check if destination twinId exists by fetching dest twin from chain first
-      this.destTwin = await this.tfclient.twins.get({ id: destinationTwinId });
       envelope.destination = new Address({ twin: this.destTwin.id });
 
       if (requestCommand) {
@@ -271,9 +269,7 @@ class Client {
           await this.waitForOpenConnection();
         } catch (er) {
           if (retries === retriesCount) {
-            const e = new Error();
-            e.message = `Failed to open connection after try for ${retriesCount} times.`;
-            throw e;
+            throw new ConnectionError(`Failed to open connection after try for ${retriesCount} times.`);
           }
           this.createConnection();
         }
@@ -286,7 +282,7 @@ class Client {
 
       return clientEnvelope.uid;
     } catch (err) {
-      throw new Error({ message: `Unable to send due to ${err}` });
+      throw new RMBError(`Unable to send due to ${err}`);
     }
   }
   // if pong is received reset timer (40 seconds)
@@ -320,7 +316,7 @@ class Client {
             }
           } else {
             this.responses.delete(requestID);
-            reject("invalid signature, discarding response");
+            reject(new InvalidResponse("invalid signature, discarding response"));
             break;
           }
         }
@@ -329,7 +325,7 @@ class Client {
           const err = envelope.error;
           if (err) {
             this.responses.delete(requestID);
-            reject(`${err.code} ${err.message}`);
+            reject(new RMBError(`${err.code} ${err.message}`));
             break;
           }
         } else if (envelope && envelope.pong) {
@@ -341,7 +337,7 @@ class Client {
       }
       if (envelope && envelope.expiration) {
         this.responses.delete(requestID);
-        reject(`Didn't get a response after ${envelope.expiration} seconds`);
+        reject(new TimeoutError(`Didn't get a response after ${envelope.expiration} seconds`));
       }
     });
   }
@@ -357,7 +353,7 @@ class Client {
   async createSigner() {
     await waitReady();
     const keyring = new Keyring({ type: this.keypairType });
-    this.signer = keyring.addFromMnemonic(this.mnemonics);
+    this.signer = keyring.addFromUri(this.mnemonics);
   }
   updateSource() {
     this.source.twin = this.twin.id;
diff --git a/packages/rmb_direct_client/lib/sign.ts b/packages/rmb_direct_client/lib/sign.ts
index e14b9c2839..55fca3e6cc 100644
--- a/packages/rmb_direct_client/lib/sign.ts
+++ b/packages/rmb_direct_client/lib/sign.ts
@@ -1,8 +1,9 @@
-import * as secp from "@noble/secp256k1";
+import { getSharedSecret, utils } from "@noble/secp256k1";
 import { KeyringPair } from "@polkadot/keyring/types";
-import * as bip39 from "bip39";
+import { isAddress } from "@polkadot/util-crypto";
+import { ValidationError } from "@threefold/types";
+import { mnemonicToSeedSync, validateMnemonic } from "bip39";
 import { Buffer } from "buffer";
-
 export enum KPType {
   sr25519 = "sr25519",
   ed25519 = "ed25519",
@@ -16,10 +17,20 @@ export function sign(payload: string | Uint8Array, signer: KeyringPair) {
   return sigPrefixed;
 }
 
-export async function createShared(pubKey: Uint8Array, mnemonic: string) {
-  const seed = await bip39.mnemonicToSeed(mnemonic);
-  const privateKey = new Uint8Array(seed).slice(0, 32);
-  const pointX = secp.getSharedSecret(privateKey, pubKey);
-  const key = await secp.utils.sha256(pointX.slice(1, 33));
-  return key;
+export function createShared(pubKey: Uint8Array, hexSeedOrMnemonic: string) {
+  let privateKey: Uint8Array | string;
+
+  if (hexSeedOrMnemonic.length === 66 && isAddress(hexSeedOrMnemonic)) {
+    privateKey = hexSeedOrMnemonic.slice(2);
+  } else if (hexSeedOrMnemonic.length === 64 && isAddress(`0x${hexSeedOrMnemonic}`)) {
+    privateKey = hexSeedOrMnemonic;
+  } else if (validateMnemonic(hexSeedOrMnemonic)) {
+    const seed = mnemonicToSeedSync(hexSeedOrMnemonic);
+    privateKey = new Uint8Array(seed).slice(0, 32);
+  } else {
+    throw new ValidationError(`Expected a valid mnemonic or hexSeed in "createShared" but got "${hexSeedOrMnemonic}".`);
+  }
+
+  const pointX = getSharedSecret(privateKey, pubKey);
+  return utils.sha256(pointX.slice(1, 33));
 }
diff --git a/packages/rmb_direct_client/lib/util.ts b/packages/rmb_direct_client/lib/util.ts
index e92d5698e1..7edea94a7c 100644
--- a/packages/rmb_direct_client/lib/util.ts
+++ b/packages/rmb_direct_client/lib/util.ts
@@ -1,4 +1,5 @@
 import * as secp from "@noble/secp256k1";
+import { ValidationError } from "@threefold/types";
 import * as bip39 from "bip39";
 import { Buffer } from "buffer";
 import * as cryptoJs from "crypto-js";
@@ -25,7 +26,7 @@ export function generatePublicKey(secret: string) {
     }
 
     if (!isValidSeed(privKey) || privKey.length !== 64) {
-      throw new Error("Invalid seed. Couldn't get public key from the provided seed.");
+      throw new ValidationError("Invalid seed. Couldn't get public key from the provided seed.");
     }
   }
 
diff --git a/packages/rmb_direct_client/package.json b/packages/rmb_direct_client/package.json
index 4d687a81f4..72755b2972 100644
--- a/packages/rmb_direct_client/package.json
+++ b/packages/rmb_direct_client/package.json
@@ -31,7 +31,8 @@
     "google-protobuf": "^3.21.2",
     "js-crypto-aes": "^1.0.4",
     "uuid": "^8.3.2",
-    "ws": "^8.12.0"
+    "ws": "^8.12.0",
+    "@threefold/types" : "1.0.0"
   },
   "devDependencies": {
     "@types/crypto-js": "^4.1.1",
diff --git a/packages/tfchain_client/package.json b/packages/tfchain_client/package.json
index ec9f5f4c0a..498620a3d3 100644
--- a/packages/tfchain_client/package.json
+++ b/packages/tfchain_client/package.json
@@ -47,6 +47,7 @@
   "dependencies": {
     "@polkadot/api": "^8.9.1",
     "await-lock": "^2.2.2",
-    "bip39": "^3.1.0"
+    "bip39": "^3.1.0",
+    "@threefold/types": "^1.0.0"
   }
 }
diff --git a/packages/tfchain_client/src/balances.ts b/packages/tfchain_client/src/balances.ts
index 8b5163b8ad..d7b27a820d 100644
--- a/packages/tfchain_client/src/balances.ts
+++ b/packages/tfchain_client/src/balances.ts
@@ -1,3 +1,5 @@
+import { ValidationError } from "@threefold/types";
+
 import { Client, QueryClient } from "./client";
 import { checkConnection } from "./utils";
 
@@ -42,7 +44,7 @@ class Balances extends QueryBalances {
   @checkConnection
   async transfer(options: BalanceTransferOptions) {
     if (isNaN(options.amount) || options.amount <= 0) {
-      throw Error("Amount must be a positive numeric value");
+      throw new ValidationError("Amount must be a positive numeric value");
     }
 
     const extrinsic = await this.client.api.tx.balances.transfer(options.address, options.amount);
diff --git a/packages/tfchain_client/src/client.ts b/packages/tfchain_client/src/client.ts
index d9e2674422..4aae46cf11 100644
--- a/packages/tfchain_client/src/client.ts
+++ b/packages/tfchain_client/src/client.ts
@@ -6,18 +6,20 @@ import { KeyringPair } from "@polkadot/keyring/types";
 import { ISubmittableResult } from "@polkadot/types/types";
 import { KeypairType } from "@polkadot/util-crypto/types";
 import { waitReady } from "@polkadot/wasm-crypto";
+import { TFChainError, TFChainErrors, TimeoutError, ValidationError } from "@threefold/types";
 import AwaitLock from "await-lock";
 import { validateMnemonic } from "bip39";
 
 import { Balances, QueryBalances } from "./balances";
 import { Contracts, QueryContracts } from "./contracts";
-import { QueryFarms } from "./farms";
+import { Dao, QueryDao } from "./dao";
+import { Farms, QueryFarms } from "./farms";
 import { KVStore } from "./kvstore";
 import { Nodes, QueryNodes } from "./nodes";
 import { QueryPricingPolicies } from "./pricing_policies";
 import { TermsAndConditions } from "./terms_and_conditions";
+import { Bridge, QueryBridge } from "./tft_bridge";
 import { QueryTFTPrice } from "./tft_price";
-import { QueryTFTBridge } from "./tftBridge";
 import { QueryTwins, Twins } from "./twins";
 import type { Extrinsic, ExtrinsicResult, PatchExtrinsicOptions, validatorFunctionType } from "./types";
 import { Utility } from "./utility";
@@ -44,8 +46,9 @@ class QueryClient {
   api: ApiPromise;
   contracts: QueryContracts = new QueryContracts(this);
   balances: QueryBalances = new QueryBalances(this);
+  dao: QueryDao = new QueryDao(this);
   farms: QueryFarms = new QueryFarms(this);
-  tftBridge: QueryTFTBridge = new QueryTFTBridge(this);
+  tftBridge: QueryBridge = new QueryBridge(this);
   tftPrice: QueryTFTPrice = new QueryTFTPrice(this);
   pricingPolicies: QueryPricingPolicies = new QueryPricingPolicies(this);
   twins: QueryTwins = new QueryTwins(this);
@@ -57,7 +60,7 @@ class QueryClient {
   async loadKeyPairOrSigner(): Promise<void> {} // to be overridden in the full client
   checkInputs(): void {
     if (!this.url) {
-      throw Error("url should be provided");
+      throw new ValidationError("url should be provided");
     }
   }
   private async wait(connection = true): Promise<void> {
@@ -67,7 +70,7 @@ class QueryClient {
       if (!connection && !this.api.isConnected) return;
       await new Promise(f => setTimeout(f, 100));
     }
-    if (connection) throw Error(`Client couldn't connect to ${this.url} after 10 seconds`);
+    if (connection) throw new TimeoutError(`Client couldn't connect to ${this.url} after 10 seconds`);
   }
 
   async newProvider() {
@@ -176,10 +179,10 @@ class QueryClient {
   ): Promise<T> {
     await this.connect();
     if (!this.checkSection(section)) {
-      throw new Error(`<${section}> is not defined on the chain`);
+      throw new ValidationError(`<${section}> is not defined on the chain`);
     }
     if (!this.checkMethod(section, method)) {
-      throw new Error(`<${method}> is not defined on the chain under ${section}`);
+      throw new ValidationError(`<${method}> is not defined on the chain under ${section}`);
     }
 
     return new Promise<T>(async (resolve, reject) => {
@@ -228,7 +231,9 @@ class Client extends QueryClient {
   termsAndConditions: TermsAndConditions = new TermsAndConditions(this);
   kvStore: KVStore = new KVStore(this);
   twins: Twins = new Twins(this);
-
+  farms: Farms = new Farms(this);
+  dao: Dao = new Dao(this);
+  tftBridge: Bridge = new Bridge(this);
   declare url: string;
   mnemonicOrSecret?: string;
   keypairType: KeypairType;
@@ -242,27 +247,29 @@ class Client extends QueryClient {
   }
 
   checkInputs(): void {
-    if (!this.url) throw Error("url should be provided");
+    if (!this.url) throw new ValidationError("url should be provided");
     if (!SUPPORTED_KEYPAIR_TYPES.includes(this.keypairType)) {
-      throw Error(
+      throw new ValidationError(
         `Keypair type ${this.keypairType} is not a valid type. Should be either of: ${SUPPORTED_KEYPAIR_TYPES}`,
       );
     }
 
     if ((this.mnemonicOrSecret && this.extSigner) || !(this.mnemonicOrSecret || this.extSigner)) {
-      throw Error("mnemonicOrSecret or extension signer should be provided");
+      throw new ValidationError("mnemonicOrSecret or extension signer should be provided");
     }
     if (this.mnemonicOrSecret) {
-      if (!validateMnemonic(this.mnemonicOrSecret)) {
+      if (this.mnemonicOrSecret === "//Alice") {
+        return;
+      } else if (!validateMnemonic(this.mnemonicOrSecret)) {
         if (this.mnemonicOrSecret.includes(" "))
           // seed shouldn't have spaces
-          throw Error("Invalid mnemonic! Must be bip39 compliant");
+          throw new ValidationError("Invalid mnemonic! Must be bip39 compliant");
 
         if (!this.mnemonicOrSecret.startsWith("0x"))
-          throw Error("Invalid secret seed. secret seed should starts with 0x");
+          throw new ValidationError("Invalid secret seed. secret seed should starts with 0x");
         const secret = this.mnemonicOrSecret.substring(2);
-        if (secret.length !== 64) throw Error("Invalid secret length. Secret length should be 64");
-        if (!isValidSeed(secret)) throw Error("Invalid secret seed");
+        if (secret.length !== 64) throw new ValidationError("Invalid secret length. Secret length should be 64");
+        if (!isValidSeed(secret)) throw new ValidationError("Invalid secret seed");
       }
     }
   }
@@ -276,7 +283,7 @@ class Client extends QueryClient {
         this.keypair = keyring.addFromUri(this.mnemonicOrSecret);
         this.address = this.keypair.address;
       } catch (error) {
-        throw Error("Invalid mnemonic or secret seed! Please check your input.");
+        throw new ValidationError("Invalid mnemonic or secret seed! Please check your input.");
       }
     }
     if (this.extSigner && !this.address) {
@@ -346,11 +353,16 @@ class Client extends QueryClient {
           resultSections.length > 0
         )
           section = resultSections[0];
-        throw Error(
-          `Failed to apply ${JSON.stringify(extrinsic.method.toHuman())} due to error: ${
-            Object.keys(this.api.errors[section])[+e] ?? e
-          }`,
-        );
+        const errorName = TFChainErrors[section].Errors[+e];
+        if (errorName) {
+          throw new TFChainErrors[section][errorName](`Failed to apply ${JSON.stringify(extrinsic.method.toHuman())}`);
+        } else {
+          throw new TFChainError(
+            `Failed to apply ${JSON.stringify(extrinsic.method.toHuman())} due to error: ${
+              Object.keys(this.api.errors[section])[+e] ?? e
+            }`,
+          );
+        }
       });
   }
   async applyExtrinsic<T>(
diff --git a/packages/tfchain_client/src/contracts.ts b/packages/tfchain_client/src/contracts.ts
index 5f3188bac5..3efbea0f14 100644
--- a/packages/tfchain_client/src/contracts.ts
+++ b/packages/tfchain_client/src/contracts.ts
@@ -1,3 +1,5 @@
+import { TFChainError } from "@threefold/types";
+
 import { Client, QueryClient } from "./client";
 import { PublicIp } from "./types";
 import { checkConnection } from "./utils";
@@ -70,6 +72,10 @@ interface QueryContractsGetOptions {
   id: number;
 }
 
+interface ActiveContractsOptions {
+  nodeId: number;
+}
+
 interface QueryContractsGetContractByActiveRentOptions {
   nodeId: number;
 }
@@ -104,6 +110,12 @@ class QueryContracts {
     return res.toPrimitive() as number;
   }
 
+  @checkConnection
+  async getActiveContracts(options: ActiveContractsOptions): Promise<number[]> {
+    const res = await this.client.api.query.smartContractModule.activeNodeContracts(options.nodeId);
+    return res.toPrimitive() as number[];
+  }
+
   @checkConnection
   async getContractIdByName(options: QueryContractGetContractByNameOptions): Promise<number> {
     const res = await this.client.api.query.smartContractModule.contractIDByNameRegistration(options.name);
@@ -137,7 +149,7 @@ class QueryContracts {
 
       return gracePeriodStartTime + TWO_WEEKS;
     } catch (err) {
-      throw Error(`Error getting current block number for contract ${options.id} deletion: ${err}`);
+      throw new TFChainError(`Error getting current block number for contract ${options.id} deletion: ${err}`);
     }
   }
 
diff --git a/packages/tfchain_client/src/dao.ts b/packages/tfchain_client/src/dao.ts
new file mode 100644
index 0000000000..776af3290a
--- /dev/null
+++ b/packages/tfchain_client/src/dao.ts
@@ -0,0 +1,151 @@
+import moment from "moment";
+
+import { Client, QueryClient } from "./client";
+import { checkConnection } from "./utils";
+export interface Proposal {
+  threshold: number;
+  ayes: AyesAndNayes[];
+  nayes: AyesAndNayes[];
+  vetos: number;
+  end: moment.Moment;
+  hash: string;
+  action: string;
+  description: string;
+  link: string;
+  ayesProgress: number;
+  nayesProgress: number;
+}
+interface AyesAndNayes {
+  farmId: number;
+  weight: number;
+}
+interface ProposalRemark {
+  args: { remark: string };
+}
+interface DaoProposal {
+  description: string;
+  link: string;
+}
+interface ProposalVotes {
+  ayes: AyesAndNayes[];
+  nays: AyesAndNayes[];
+  threshold: number;
+  vetos: number;
+  end: number;
+}
+export interface Proposals {
+  active: Proposal[];
+  inactive: Proposal[];
+}
+export interface DaoVoteOptions {
+  address: string;
+  farmId: number;
+  hash: string;
+  approve: boolean;
+}
+
+class QueryDao {
+  constructor(public client: QueryClient) {
+    this.client = client;
+  }
+
+  @checkConnection
+  async get(): Promise<Proposals> {
+    const hashesJson = await this.client.api.query.dao.proposalList();
+    const hashes = hashesJson.toPrimitive() as string[];
+    const activeProposals: Proposal[] = [];
+    const inactiveProposals: Proposal[] = [];
+    for await (const hash of hashes) {
+      const daoProposal = await this.getDaoProposal(hash);
+      const proposal = await this.getProposal(hash);
+      const proposalVotes = await this.getProposalVotes(hash);
+
+      const nowBlock: number = +(await this.client.api.query.system.number());
+      const timeUntilEnd = (proposalVotes.end - nowBlock) * 6;
+      if (proposal && daoProposal) {
+        if (proposalVotes.end < nowBlock) {
+          inactiveProposals.push({
+            threshold: proposalVotes.threshold,
+            ayes: proposalVotes.ayes, //[{farmId: number, weight: number}]
+            nayes: proposalVotes.nays,
+            vetos: proposalVotes.vetos,
+            end: moment().add(timeUntilEnd, "second"),
+            hash: hash,
+            action: proposal.args.remark,
+            description: daoProposal.description,
+            link: daoProposal.link,
+            ayesProgress: this.getProgress(proposalVotes.ayes, proposalVotes.nays, true),
+            nayesProgress: this.getProgress(proposalVotes.ayes, proposalVotes.nays, false),
+          });
+        } else {
+          activeProposals.push({
+            threshold: proposalVotes.threshold,
+            ayes: proposalVotes.ayes, //[{farmId: number, weight: number}]
+            nayes: proposalVotes.nays,
+            vetos: proposalVotes.vetos,
+            end: moment().add(timeUntilEnd, "second"),
+            hash: hash,
+            action: proposal.args.remark,
+            description: daoProposal.description,
+            link: daoProposal.link,
+            ayesProgress: this.getProgress(proposalVotes.ayes, proposalVotes.nays, true),
+            nayesProgress: this.getProgress(proposalVotes.ayes, proposalVotes.nays, false),
+          });
+        }
+      }
+    }
+    return { active: activeProposals, inactive: inactiveProposals };
+  }
+  private getVotesWithWeights(votes: AyesAndNayes[]): number {
+    return votes.reduce((total: number, vote: AyesAndNayes) => {
+      return total + vote.weight;
+    }, 0);
+  }
+  private getProgress(ayes: AyesAndNayes[], nayes: AyesAndNayes[], typeAye: boolean): number {
+    const totalAyeWeight = ayes ? this.getVotesWithWeights(ayes) : 0;
+    const totalNayeWeight = nayes ? this.getVotesWithWeights(nayes) : 0;
+    const total = totalAyeWeight + totalNayeWeight;
+    if (total > 0) {
+      if (typeAye) {
+        return (totalAyeWeight / total) * 100;
+      }
+      return (totalNayeWeight / total) * 100;
+    }
+    return 0;
+  }
+  @checkConnection
+  private async getDaoProposal(hash: string): Promise<DaoProposal> {
+    const proposalJson = await this.client.api.query.dao.proposals(hash);
+    const proposal: DaoProposal = proposalJson.toPrimitive() as unknown as DaoProposal;
+    return proposal;
+  }
+
+  @checkConnection
+  private async getProposal(hash: string): Promise<ProposalRemark | undefined> {
+    try {
+      const proposalJson = await this.client.api.query.dao.proposalOf(hash);
+      const proposalRemark: ProposalRemark = proposalJson.toPrimitive() as unknown as ProposalRemark;
+      return proposalRemark;
+    } catch (error) {
+      console.warn("Couldn't decode a proposal");
+    }
+  }
+  @checkConnection
+  private async getProposalVotes(hash: string): Promise<ProposalVotes> {
+    const votesJson = await this.client.api.query.dao.voting(hash);
+    const proposalVotes: ProposalVotes = votesJson.toPrimitive() as unknown as ProposalVotes;
+    return proposalVotes;
+  }
+}
+class Dao extends QueryDao {
+  constructor(public client: Client) {
+    super(client);
+    this.client = client;
+  }
+  @checkConnection
+  async vote(options: DaoVoteOptions) {
+    const extrinsic = this.client.api.tx.dao.vote(options.farmId, options.hash, options.approve);
+    return this.client.patchExtrinsic(extrinsic);
+  }
+}
+export { Dao, QueryDao };
diff --git a/packages/tfchain_client/src/farms.ts b/packages/tfchain_client/src/farms.ts
index be497ab285..5194a4fdb4 100644
--- a/packages/tfchain_client/src/farms.ts
+++ b/packages/tfchain_client/src/farms.ts
@@ -1,5 +1,4 @@
-import { QueryClient } from "./client";
-import { PublicIp } from "./types";
+import { Client, QueryClient } from "./client";
 import { checkConnection } from "./utils";
 
 enum Certification {
@@ -32,6 +31,31 @@ interface QueryFarmsGetOptions {
   id: number;
 }
 
+interface PublicIp {
+  ip: string;
+  gw: string;
+  contractId?: number;
+}
+
+interface CreateFarmOptions {
+  name: string;
+  publicIps?: PublicIp[];
+}
+interface AddFarmIPOptions {
+  farmId: number;
+  ip: string;
+  gw: string;
+}
+
+interface RemoveFarmIPOptions {
+  farmId: number;
+  ip: string;
+}
+
+interface AddStellarOptions {
+  farmId: number;
+  stellarAddress: string;
+}
 class QueryFarms {
   constructor(public client: QueryClient) {
     this.client = client;
@@ -44,4 +68,35 @@ class QueryFarms {
   }
 }
 
-export { QueryFarms, Farm, Certification, FarmingPolicyLimits };
+class Farms extends QueryFarms {
+  constructor(public client: Client) {
+    super(client);
+    this.client = client;
+  }
+
+  @checkConnection
+  async create(options: CreateFarmOptions) {
+    const extrinsic = this.client.api.tx.tfgridModule.createFarm(options.name, options.publicIps);
+    return this.client.patchExtrinsic<Farm>(extrinsic);
+  }
+
+  @checkConnection
+  async addFarmIp(options: AddFarmIPOptions) {
+    const extrinsic = this.client.api.tx.tfgridModule.addFarmIp(options.farmId, options.ip, options.gw);
+    return this.client.patchExtrinsic(extrinsic);
+  }
+
+  @checkConnection
+  async removeFarmIp(options: RemoveFarmIPOptions) {
+    const extrinsic = this.client.api.tx.tfgridModule.removeFarmIp(options.farmId, options.ip);
+    return this.client.patchExtrinsic(extrinsic);
+  }
+
+  @checkConnection
+  async addStellarAddress(options: AddStellarOptions) {
+    const extrinsic = this.client.api.tx.tfgridModule.addStellarPayoutV2address(options.farmId, options.stellarAddress);
+    return this.client.patchExtrinsic(extrinsic);
+  }
+}
+
+export { QueryFarms, Farms, Farm, Certification, FarmingPolicyLimits };
diff --git a/packages/tfchain_client/src/index.ts b/packages/tfchain_client/src/index.ts
index 4b170d9b05..0b780cc085 100644
--- a/packages/tfchain_client/src/index.ts
+++ b/packages/tfchain_client/src/index.ts
@@ -1,4 +1,5 @@
 export * from "./balances";
+export * from "./dao";
 export * from "./client";
 export * from "./contracts";
 export * from "./farms";
@@ -10,3 +11,4 @@ export * from "./tft_price";
 export * from "./twins";
 export * from "./types";
 export * from "./utility";
+export * from "./tft_bridge";
diff --git a/packages/tfchain_client/src/nodes.ts b/packages/tfchain_client/src/nodes.ts
index ca0cb88113..8eef8da7de 100644
--- a/packages/tfchain_client/src/nodes.ts
+++ b/packages/tfchain_client/src/nodes.ts
@@ -1,3 +1,5 @@
+import { ValidationError } from "@threefold/types";
+
 import { Client, QueryClient } from "./client";
 import { checkConnection } from "./utils";
 
@@ -53,6 +55,21 @@ interface NodeLocation {
   longitude: number;
 }
 
+interface NodePublicConfigOptions {
+  farmId: number;
+  nodeId: number;
+  publicConfig?: {
+    ip4: {
+      ip: string;
+      gw: string;
+    };
+    ip6?: {
+      ip: string;
+      gw: string;
+    } | null;
+    domain?: string | null;
+  } | null;
+}
 export interface QueryNodesGetOptions {
   id: number;
 }
@@ -65,7 +82,7 @@ class QueryNodes {
   @checkConnection
   async get(options: QueryNodesGetOptions): Promise<Node> {
     if (isNaN(options.id) || options.id <= 0) {
-      throw Error("Invalid node id. Node id must be positive integer");
+      throw new ValidationError("Invalid node id. Node id must be positive integer");
     }
     const res = await this.client.api.query.tfgridModule.nodes(options.id);
     return res.toPrimitive() as unknown as Node;
@@ -93,6 +110,16 @@ class Nodes extends QueryNodes {
     const extrinsic = await this.client.api.tx.tfgridModule.changePowerTarget(options.nodeId, powerTarget);
     return this.client.patchExtrinsic<void>(extrinsic);
   }
+
+  @checkConnection
+  async addNodePublicConfig(options: NodePublicConfigOptions) {
+    const extrinsic = this.client.api.tx.tfgridModule.addNodePublicConfig(
+      options.farmId,
+      options.nodeId,
+      options.publicConfig,
+    );
+    return this.client.patchExtrinsic<void>(extrinsic);
+  }
 }
 
 export { Nodes, QueryNodes };
diff --git a/packages/tfchain_client/src/tftBridge.ts b/packages/tfchain_client/src/tft_bridge.ts
similarity index 59%
rename from packages/tfchain_client/src/tftBridge.ts
rename to packages/tfchain_client/src/tft_bridge.ts
index 6e30b40183..c73f900b5b 100644
--- a/packages/tfchain_client/src/tftBridge.ts
+++ b/packages/tfchain_client/src/tft_bridge.ts
@@ -1,6 +1,12 @@
-import { QueryClient } from "./client";
+import { Client, QueryClient } from "./client";
 import { checkConnection } from "./utils";
-class QueryTFTBridge {
+
+export interface SwapToStellarOptions {
+  target: string;
+  amount: number;
+}
+
+class QueryBridge {
   constructor(public client: QueryClient) {
     this.client = client;
   }
@@ -29,5 +35,30 @@ class QueryTFTBridge {
     );
     return eventData[0].amount.toPrimitive();
   }
+
+  @checkConnection
+  async getWithdrawFee(): Promise<number> {
+    const fee = await this.client.api.query.tftBridgeModule.withdrawFee();
+    return fee.toPrimitive() as number;
+  }
+
+  @checkConnection
+  async getDepositFee(): Promise<number> {
+    const fee = await this.client.api.query.tftBridgeModule.depositFee();
+    return fee.toPrimitive() as number;
+  }
+}
+
+class Bridge extends QueryBridge {
+  constructor(public client: Client) {
+    super(client);
+    this.client = client;
+  }
+
+  @checkConnection
+  async swapToStellar(options: SwapToStellarOptions) {
+    const extrinsic = await this.client.api.tx.tftBridgeModule.swapToStellar(options.target, options.amount);
+    return this.client.patchExtrinsic<void>(extrinsic);
+  }
 }
-export { QueryTFTBridge };
+export { QueryBridge, Bridge };
diff --git a/packages/tfchain_client/src/twins.ts b/packages/tfchain_client/src/twins.ts
index 9866d2cace..67a0f72223 100644
--- a/packages/tfchain_client/src/twins.ts
+++ b/packages/tfchain_client/src/twins.ts
@@ -1,3 +1,5 @@
+import { ValidationError } from "@threefold/types";
+
 import { Client, QueryClient } from "./client";
 import { checkConnection } from "./utils";
 
@@ -25,7 +27,7 @@ class QueryTwins {
   @checkConnection
   async get(options: QueryTwinsGetOptions): Promise<Twin> {
     if (isNaN(options.id) || options.id <= 0) {
-      throw Error("Invalid twin id. Twin id must be positive integer");
+      throw new ValidationError("Invalid twin id. Twin id must be positive integer");
     }
     const res = await this.client.api.query.tfgridModule.twins(options.id);
     return res.toPrimitive() as unknown as Twin;
diff --git a/packages/types/package.json b/packages/types/package.json
new file mode 100644
index 0000000000..526f46c958
--- /dev/null
+++ b/packages/types/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@threefold/types",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc --build tsconfig.json"
+  },
+  "license": "MIT",
+    "devDependencies": {
+    "@types/node": "^18.11.9",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.3"
+  }
+}
diff --git a/packages/types/src/errors/base_error.ts b/packages/types/src/errors/base_error.ts
new file mode 100644
index 0000000000..0368e51f3f
--- /dev/null
+++ b/packages/types/src/errors/base_error.ts
@@ -0,0 +1,53 @@
+import { ErrorModules } from "./modules";
+
+export enum Generic {
+  TFChainError,
+  GridClientError,
+  ValidationError,
+  TimeoutError,
+  ConnectionError,
+  RMBError,
+  InvalidResponse,
+  RequestError,
+}
+export class BaseError extends Error {
+  constructor(public code: number, message: string, public module: ErrorModules) {
+    super(message);
+    this.name = this.constructor.name;
+  }
+}
+
+export class ValidationError extends BaseError {
+  constructor(message: string) {
+    super(Generic.ValidationError, message, ErrorModules.Generic);
+  }
+}
+export class TimeoutError extends BaseError {
+  constructor(message: string) {
+    super(Generic.TimeoutError, message, ErrorModules.Generic);
+  }
+}
+
+export class ConnectionError extends BaseError {
+  constructor(message: string) {
+    super(Generic.ConnectionError, message, ErrorModules.Generic);
+  }
+}
+
+export class RMBError extends BaseError {
+  constructor(message: string) {
+    super(Generic.RMBError, message, ErrorModules.Generic);
+  }
+}
+
+export class InvalidResponse extends BaseError {
+  constructor(message: string) {
+    super(Generic.InvalidResponse, message, ErrorModules.Generic);
+  }
+}
+
+export class RequestError extends BaseError {
+  constructor(message: string, public statusCode = -1) {
+    super(Generic.RequestError, message, ErrorModules.Generic);
+  }
+}
diff --git a/packages/types/src/errors/grid_client/farms.ts b/packages/types/src/errors/grid_client/farms.ts
new file mode 100644
index 0000000000..12a6ef0605
--- /dev/null
+++ b/packages/types/src/errors/grid_client/farms.ts
@@ -0,0 +1,31 @@
+import { BaseError } from "../base_error";
+import { ErrorModules } from "../modules";
+
+export enum Errors {
+  InvalidResourcesError,
+  FarmerBotError,
+  NodeSelectionError,
+}
+class TFGridFarmsError extends BaseError {
+  constructor(code: number, message: string) {
+    super(code, message, ErrorModules.Farm);
+  }
+}
+
+export class InvalidResourcesError extends TFGridFarmsError {
+  constructor(message: string) {
+    super(Errors.InvalidResourcesError, message);
+  }
+}
+
+export class FarmerBotError extends TFGridFarmsError {
+  constructor(message: string) {
+    super(Errors.FarmerBotError, message);
+  }
+}
+
+export class NodeSelectionError extends TFGridFarmsError {
+  constructor(message: string) {
+    super(Errors.NodeSelectionError, message);
+  }
+}
diff --git a/packages/types/src/errors/grid_client/grid_client_error.ts b/packages/types/src/errors/grid_client/grid_client_error.ts
new file mode 100644
index 0000000000..be2b53b116
--- /dev/null
+++ b/packages/types/src/errors/grid_client/grid_client_error.ts
@@ -0,0 +1,8 @@
+import { BaseError, Generic } from "../base_error";
+import { ErrorModules } from "../modules";
+
+export class GridClientError extends BaseError {
+  constructor(message: string) {
+    super(Generic.GridClientError, message, ErrorModules.Generic);
+  }
+}
diff --git a/packages/types/src/errors/grid_client/index.ts b/packages/types/src/errors/grid_client/index.ts
new file mode 100644
index 0000000000..a0deed1bbf
--- /dev/null
+++ b/packages/types/src/errors/grid_client/index.ts
@@ -0,0 +1,3 @@
+export * as Nodes from "./nodes";
+export * as Workloads from "./workloads";
+export * as Farms from "./farms";
diff --git a/packages/types/src/errors/grid_client/nodes.ts b/packages/types/src/errors/grid_client/nodes.ts
new file mode 100644
index 0000000000..28b44dd61d
--- /dev/null
+++ b/packages/types/src/errors/grid_client/nodes.ts
@@ -0,0 +1,52 @@
+import { BaseError } from "../base_error";
+import { ErrorModules } from "../modules";
+
+export enum Errors {
+  UnavailableNodeError,
+  InvalidResourcesError,
+  DiskAllocationError,
+  AccessNodeError,
+  GPUNotFoundError,
+  GPULockedError,
+}
+class TFGridNodesError extends BaseError {
+  constructor(code: number, message: string) {
+    super(code, message, ErrorModules.Node);
+  }
+}
+
+export class InvalidResourcesError extends TFGridNodesError {
+  constructor(message: string) {
+    super(Errors.InvalidResourcesError, message);
+  }
+}
+
+export class DiskAllocationError extends TFGridNodesError {
+  constructor(message: string) {
+    super(Errors.DiskAllocationError, message);
+  }
+}
+
+export class AccessNodeError extends TFGridNodesError {
+  constructor(message: string) {
+    super(Errors.AccessNodeError, message);
+  }
+}
+
+export class UnavailableNodeError extends TFGridNodesError {
+  constructor(message: string) {
+    super(Errors.UnavailableNodeError, message);
+  }
+}
+
+export class GPUNotFoundError extends TFGridNodesError {
+  constructor(message: string) {
+    super(Errors.GPUNotFoundError, message);
+  }
+}
+
+export class GPULockedError extends TFGridNodesError {
+  constructor(message: string) {
+    super(Errors.GPULockedError, message);
+  }
+}
diff --git a/packages/types/src/errors/grid_client/workloads.ts b/packages/types/src/errors/grid_client/workloads.ts
new file mode 100644
index 0000000000..d899f84eff
--- /dev/null
+++ b/packages/types/src/errors/grid_client/workloads.ts
@@ -0,0 +1,38 @@
+import { BaseError } from "../base_error";
+import { ErrorModules } from "../modules";
+
+export enum Errors {
+  WorkloadDeleteError,
+  WorkloadDeployError,
+  WorkloadUpdateError,
+  WorkloadCreateError,
+}
+class TFGridWorkloadError extends BaseError {
+  constructor(code: number, message: string) {
+    super(code, message, ErrorModules.Workloads);
+  }
+}
+
+export class WorkloadDeleteError extends TFGridWorkloadError {
+  constructor(message: string) {
+    super(Errors.WorkloadDeleteError, message);
+  }
+}
+
+export class WorkloadDeployError extends TFGridWorkloadError {
+  constructor(message: string) {
+    super(Errors.WorkloadDeployError, message);
+  }
+}
+
+export class WorkloadUpdateError extends TFGridWorkloadError {
+  constructor(message: string) {
+    super(Errors.WorkloadUpdateError, message);
+  }
+}
+
+export class WorkloadCreateError extends TFGridWorkloadError {
+  constructor(message: string) {
+    super(Errors.WorkloadCreateError, message);
+  }
+}
diff --git a/packages/types/src/errors/index.ts b/packages/types/src/errors/index.ts
new file mode 100755
index 0000000000..fe41b0ba6e
--- /dev/null
+++ b/packages/types/src/errors/index.ts
@@ -0,0 +1,6 @@
+export * from "./base_error";
+export { GridClientError } from "./grid_client/grid_client_error";
+export { TFChainError } from "./tfchain/tfchain_error";
+export * as GridClientErrors from "./grid_client/index";
+export { ErrorModules } from "./modules";
+export * as TFChainErrors from "./tfchain/index";
diff --git a/packages/types/src/errors/modules.ts b/packages/types/src/errors/modules.ts
new file mode 100644
index 0000000000..147ec60a2d
--- /dev/null
+++ b/packages/types/src/errors/modules.ts
@@ -0,0 +1,12 @@
+export enum ErrorModules {
+  Generic = "Generic",
+  Farm = "tfGridFarm",
+  Node = "tfGridNode",
+  Workloads = "tfGridWorkloads",
+  Dao = "dao",
+  TFKVStore = "tfkvStore",
+  SmartContract = "smartContractModule",
+  TFGrid = "tfgridModule",
+  TFTBridge = "tfgridModule",
+  TFTPrice = "tftPriceModule",
+}
diff --git a/packages/types/src/errors/readme.md b/packages/types/src/errors/readme.md
new file mode 100644
index 0000000000..8bef15d17b
--- /dev/null
+++ b/packages/types/src/errors/readme.md
@@ -0,0 +1,105 @@
+# TS SDK Errors
+
+Errors in this package are divided into 11 [modules](./modules.ts) each module has its own specified errors.
+
+## BaseError class
+
+The `BaseError` class is our starting point, this class extends the `Error` class.
+`BaseError` has three main properties `code`, `message`, `module`.
+
+- code: is the index of the error class in it's module `Error` enum.
+  - If you have a module and error code you can find the error class easily.
+  - for example, the `Generic` module has `Errors` enum and the class of `RequestError` a code 7.
+- message: describes what happened and it comes from the class constructor.
+- module: it is the error category.
+
+In each module we create a private class that only sets the module value in the extended `ErrorBase` class, then all sub-category error classes extends this class.
+
+### Build
+
+```ts
+yarn build
+```
+
+### Usage
+
+you can use errors by adding `@threefold/types` to your project
+
+```bash
+yarn add @threefold/types
+```
+
+Then import the needed error class and throw your new error
+for example:
+
+```ts
+import { ValidationError, GridClientErrors } from "@threefold/types";
+....
+
+throw new ValidationError("error message")
+....
+
+throw new GridClientErrors.Farms.InvalidResourcesError("error message")
+```
+
+## Error Modules
+
+### Generic
+
+This module contains the generic errors like Validation and TimeOut.
+
+Also, in some cases, we have an error that comes from one of the clients, but we don't know what the error is exactly; in this case, we use a generic error like `RMBError` to mention that this error comes from the RMB client.
+
+#### Generic Errors
+
+0. TFChainError
+1. GridClientError
+2. ValidationError
+3. TimeoutError
+4. ConnectionError
+5. RMBError
+6. InvalidResponse
+7. RequestError
+
+### Grid Client Errors
+
+This section will have all errors that are related to GridClient
+
+#### Farm `tfGridFarm`
+
+For Errors that come from farms or are related to farms resources and farmer bot, we are using this module
+
+0. InvalidResourcesError
+1. FarmerBotError
+2. NodeSelectionError
+
+#### Node `tfGridNode`
+
+For Errors that come from node or are related to node resources and node network
+
+0. UnavailableNodeError
+1. InvalidResourcesError
+2. DiskAllocationError
+3. AccessNodeError
+4. GPUNotFoundError
+5. GPULockedError
+
+#### Workloads `tfGridWorkloads`
+
+For Errors that are related to workloads and deployments operations
+
+0. WorkloadDeleteError
+1. WorkloadDeployError
+2. WorkloadUpdateError
+3. WorkloadCreateError
+
+### TFChain Errors
+
+This section includes all errors in the used [TF Chain pallets](https://github.com/threefoldtech/tfchain/tree/development/substrate-node/pallets)
+
+- [Dao](./tfchain/dao.ts) `dao`
+- [TFKVStore](./tfchain/kvstore.ts) `tfkvStore`
+- [SmartContract](./tfchain/smart_contract.ts) `smartContractModule`
+- [TFGrid](./tfchain/tfgrid.ts) `tfgridModule`
+- [TFTBridge](./tfchain/tft_bridge.ts) `tfgridModule`
+- [TFTPrice](./tfchain/tft_price.ts) `tftPriceModule`
diff --git a/packages/types/src/errors/tfchain/dao.ts b/packages/types/src/errors/tfchain/dao.ts
new file mode 100644
index 0000000000..4f8c0d1ca0
--- /dev/null
+++ b/packages/types/src/errors/tfchain/dao.ts
@@ -0,0 +1,129 @@
+import { BaseError } from "../base_error";
+import { ErrorModules } from "../modules";
+
+export enum Errors {
+  NoneValue,
+  StorageOverflow,
+  FarmNotExists,
+  NotCouncilMember,
+  WrongProposalLength,
+  DuplicateProposal,
+  NotAuthorizedToVote,
+  ProposalMissing,
+  WrongIndex,
+  DuplicateVote,
+  DuplicateVeto,
+  WrongProposalWeight,
+  TooEarly,
+  TimeLimitReached,
+  OngoingVoteAndTresholdStillNotMet,
+  FarmHasNoNodes,
+  InvalidProposalDuration,
+}
+
+class DaoError extends BaseError {
+  constructor(code: number, message: string) {
+    super(code, message, ErrorModules.Dao);
+  }
+}
+export class NoneValue extends DaoError {
+  constructor(message: string) {
+    super(Errors.NoneValue, message);
+  }
+}
+
+export class StorageOverflow extends DaoError {
+  constructor(message: string) {
+    super(Errors.StorageOverflow, message);
+  }
+}
+
+export class FarmNotExists extends DaoError {
+  constructor(message: string) {
+    super(Errors.FarmNotExists, message);
+  }
+}
+
+export class NotCouncilMember extends DaoError {
+  constructor(message: string) {
+    super(Errors.NotCouncilMember, message);
+  }
+}
+
+export class WrongProposalLength extends DaoError {
+  constructor(message: string) {
+    super(Errors.WrongProposalLength, message);
+  }
+}
+
+export class DuplicateProposal extends DaoError {
+  constructor(message: string) {
+    super(Errors.DuplicateProposal, message);
+  }
+}
+
+export class NotAuthorizedToVote extends DaoError {
+  constructor(message: string) {
+    super(Errors.NotAuthorizedToVote, message);
+  }
+}
+
+export class ProposalMissing extends DaoError {
+  constructor(message: string) {
+    super(Errors.ProposalMissing, message);
+  }
+}
+
+export class WrongIndex extends DaoError {
+  constructor(message: string) {
+    super(Errors.WrongIndex, message);
+  }
+}
+
+export class DuplicateVote extends DaoError {
+  constructor(message: string) {
+    super(Errors.DuplicateVote, message);
+  }
+}
+
+export class DuplicateVeto extends DaoError {
+  constructor(message: string) {
+    super(Errors.DuplicateVeto, message);
+  }
+}
+
+export class WrongProposalWeight extends DaoError {
+  constructor(message: string) {
+    super(Errors.WrongProposalWeight, message);
+  }
+}
+
+export class TooEarly extends DaoError {
+  constructor(message: string) {
+    super(Errors.TooEarly, message);
+  }
+}
+
+export class TimeLimitReached extends DaoError {
+  constructor(message: string) {
+    super(Errors.TimeLimitReached, message);
+  }
+}
+
+export class OngoingVoteAndTresholdStillNotMet extends DaoError {
+  constructor(message: string) {
+    super(Errors.OngoingVoteAndTresholdStillNotMet, message);
+  }
+}
+
+export class FarmHasNoNodes extends DaoError {
+  constructor(message: string) {
+    super(Errors.FarmHasNoNodes, message);
+  }
+}
+
+export class InvalidProposalDuration extends DaoError {
+  constructor(message: string) {
+    super(Errors.InvalidProposalDuration, message);
+  }
+}
diff --git a/packages/types/src/errors/tfchain/index.ts b/packages/types/src/errors/tfchain/index.ts
new file mode 100644
index 0000000000..f1cafc154d
--- /dev/null
+++ b/packages/types/src/errors/tfchain/index.ts
@@ -0,0 +1,6 @@
+export * as dao from "./dao";
+export * as tfkvStore from "./kvstore";
+export * as smartContractModule from "./smart_contract";
+export * as tfgridModule from "./tfgrid";
+export * as tftBridgeModule from "./tft_bridge";
+export * as tftPriceModule from "./tft_price";
diff --git a/packages/types/src/errors/tfchain/kvstore.ts b/packages/types/src/errors/tfchain/kvstore.ts
new file mode 100644
index 0000000000..0f5b071152
--- /dev/null
+++ b/packages/types/src/errors/tfchain/kvstore.ts
@@ -0,0 +1,30 @@
+import { BaseError } from "../base_error";
+import { ErrorModules } from "../modules";
+export enum Errors {
+  NoValueStored,
+  KeyIsTooLarge,
+  ValueIsTooLarge,
+}
+
+class KVStoreError extends BaseError {
+  constructor(code: number, message: string) {
+    super(code, message, ErrorModules.TFKVStore);
+  }
+}
+export class NoValueStored extends KVStoreError {
+  constructor(message: string) {
+    super(Errors.NoValueStored, message);
+  }
+}
+
+export class KeyIsTooLarge extends KVStoreError {
+  constructor(message: string) {
+    super(Errors.NoValueStored, message);
+  }
+}
+
+export class ValueIsTooLarge extends KVStoreError {
+  constructor(message: string) {
+    super(Errors.ValueIsTooLarge, message);
+  }
+}
diff --git a/packages/types/src/errors/tfchain/smart_contract.ts b/packages/types/src/errors/tfchain/smart_contract.ts
new file mode 100644
index 0000000000..c57b5f6f64
--- /dev/null
+++ b/packages/types/src/errors/tfchain/smart_contract.ts
@@ -0,0 +1,372 @@
+import { BaseError } from "../base_error";
+import { ErrorModules } from "../modules";
+export enum Errors {
+  TwinNotExists,
+  NodeNotExists,
+  FarmNotExists,
+  FarmHasNotEnoughPublicIPs,
+  FarmHasNotEnoughPublicIPsFree,
+  FailedToReserveIP,
+  FailedToFreeIPs,
+  ContractNotExists,
+  TwinNotAuthorizedToUpdateContract,
+  TwinNotAuthorizedToCancelContract,
+  NodeNotAuthorizedToDeployContract,
+  NodeNotAuthorizedToComputeReport,
+  PricingPolicyNotExists,
+  ContractIsNotUnique,
+  ContractWrongBillingLoopIndex,
+  NameExists,
+  NameNotValid,
+  InvalidContractType,
+  TFTPriceValueError,
+  NotEnoughResourcesOnNode,
+  NodeNotAuthorizedToReportResources,
+  MethodIsDeprecated,
+  NodeHasActiveContracts,
+  NodeHasRentContract,
+  FarmIsNotDedicated,
+  NodeNotAvailableToDeploy,
+  CannotUpdateContractInGraceState,
+  NumOverflow,
+  OffchainSignedTxCannotSign,
+  OffchainSignedTxAlreadySent,
+  OffchainSignedTxNoLocalAccountAvailable,
+  NameContractNameTooShort,
+  NameContractNameTooLong,
+  InvalidProviderConfiguration,
+  NoSuchSolutionProvider,
+  SolutionProviderNotApproved,
+  TwinNotAuthorized,
+  ServiceContractNotExists,
+  ServiceContractCreationNotAllowed,
+  ServiceContractModificationNotAllowed,
+  ServiceContractApprovalNotAllowed,
+  ServiceContractRejectionNotAllowed,
+  ServiceContractBillingNotApprovedByBoth,
+  ServiceContractBillingVariableAmountTooHigh,
+  ServiceContractBillMetadataTooLong,
+  ServiceContractMetadataTooLong,
+  ServiceContractNotEnoughFundsToPayBill,
+  CanOnlyIncreaseFrequency,
+  IsNotAnAuthority,
+  WrongAuthority,
+  UnauthorizedToChangeSolutionProviderId,
+  UnauthorizedToSetExtraFee,
+}
+class SmartContractError extends BaseError {
+  constructor(code: number, message: string) {
+    super(code, message, ErrorModules.SmartContract);
+  }
+}
+export class TwinNotExists extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.TwinNotExists, message);
+  }
+}
+
+export class NodeNotExists extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NodeNotExists, message);
+  }
+}
+
+export class FarmNotExists extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.FarmNotExists, message);
+  }
+}
+
+export class FarmHasNotEnoughPublicIPs extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.FarmHasNotEnoughPublicIPs, message);
+  }
+}
+
+export class FarmHasNotEnoughPublicIPsFree extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.FarmHasNotEnoughPublicIPsFree, message);
+  }
+}
+
+export class FailedToReserveIP extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.FailedToReserveIP, message);
+  }
+}
+
+export class FailedToFreeIPs extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.FailedToFreeIPs, message);
+  }
+}
+
+export class ContractNotExists extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ContractNotExists, message);
+  }
+}
+
+export class TwinNotAuthorizedToUpdateContract extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.TwinNotAuthorizedToUpdateContract, message);
+  }
+}
+
+export class TwinNotAuthorizedToCancelContract extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.TwinNotAuthorizedToCancelContract, message);
+  }
+}
+
+export class NodeNotAuthorizedToDeployContract extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NodeNotAuthorizedToDeployContract, message);
+  }
+}
+
+export class NodeNotAuthorizedToComputeReport extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NodeNotAuthorizedToComputeReport, message);
+  }
+}
+
+export class PricingPolicyNotExists extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.PricingPolicyNotExists, message);
+  }
+}
+
+export class ContractIsNotUnique extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ContractIsNotUnique, message);
+  }
+}
+
+export class ContractWrongBillingLoopIndex extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ContractWrongBillingLoopIndex, message);
+  }
+}
+
+export class NameExists extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NameExists, message);
+  }
+}
+
+export class NameNotValid extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NameNotValid, message);
+  }
+}
+
+export class InvalidContractType extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.InvalidContractType, message);
+  }
+}
+
+export class TFTPriceValueError extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.TFTPriceValueError, message);
+  }
+}
+
+export class NotEnoughResourcesOnNode extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NotEnoughResourcesOnNode, message);
+  }
+}
+
+export class NodeNotAuthorizedToReportResources extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NodeNotAuthorizedToReportResources, message);
+  }
+}
+
+export class MethodIsDeprecated extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.MethodIsDeprecated, message);
+  }
+}
+
+export class NodeHasActiveContracts extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NodeHasActiveContracts, message);
+  }
+}
+
+export class NodeHasRentContract extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NodeHasRentContract, message);
+  }
+}
+
+export class FarmIsNotDedicated extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.FarmIsNotDedicated, message);
+  }
+}
+
+export class NodeNotAvailableToDeploy extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NodeNotAvailableToDeploy, message);
+  }
+}
+
+export class CannotUpdateContractInGraceState extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.CannotUpdateContractInGraceState, message);
+  }
+}
+
+export class NumOverflow extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NumOverflow, message);
+  }
+}
+
+export class OffchainSignedTxCannotSign extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.OffchainSignedTxCannotSign, message);
+  }
+}
+
+export class OffchainSignedTxAlreadySent extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.OffchainSignedTxAlreadySent, message);
+  }
+}
+
+export class OffchainSignedTxNoLocalAccountAvailable extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.OffchainSignedTxNoLocalAccountAvailable, message);
+  }
+}
+
+export class NameContractNameTooShort extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NameContractNameTooShort, message);
+  }
+}
+
+export class NameContractNameTooLong extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NameContractNameTooLong, message);
+  }
+}
+
+export class InvalidProviderConfiguration extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.InvalidProviderConfiguration, message);
+  }
+}
+
+export class NoSuchSolutionProvider extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.NoSuchSolutionProvider, message);
+  }
+}
+
+export class SolutionProviderNotApproved extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.SolutionProviderNotApproved, message);
+  }
+}
+
+export class TwinNotAuthorized extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.TwinNotAuthorized, message);
+  }
+}
+
+export class ServiceContractNotExists extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ServiceContractNotExists, message);
+  }
+}
+
+export class ServiceContractCreationNotAllowed extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ServiceContractCreationNotAllowed, message);
+  }
+}
+
+export class ServiceContractModificationNotAllowed extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ServiceContractModificationNotAllowed, message);
+  }
+}
+
+export class ServiceContractApprovalNotAllowed extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ServiceContractApprovalNotAllowed, message);
+  }
+}
+
+export class ServiceContractRejectionNotAllowed extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ServiceContractRejectionNotAllowed, message);
+  }
+}
+
+export class ServiceContractBillingNotApprovedByBoth extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ServiceContractBillingNotApprovedByBoth, message);
+  }
+}
+
+export class ServiceContractBillingVariableAmountTooHigh extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ServiceContractBillingVariableAmountTooHigh, message);
+  }
+}
+
+export class ServiceContractBillMetadataTooLong extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ServiceContractBillMetadataTooLong, message);
+  }
+}
+
+export class ServiceContractMetadataTooLong extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ServiceContractMetadataTooLong, message);
+  }
+}
+
+export class ServiceContractNotEnoughFundsToPayBill extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.ServiceContractNotEnoughFundsToPayBill, message);
+  }
+}
+
+export class CanOnlyIncreaseFrequency extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.CanOnlyIncreaseFrequency, message);
+  }
+}
+
+export class IsNotAnAuthority extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.IsNotAnAuthority, message);
+  }
+}
+
+export class WrongAuthority extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.WrongAuthority, message);
+  }
+}
+
+export class UnauthorizedToChangeSolutionProviderId extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.UnauthorizedToChangeSolutionProviderId, message);
+  }
+}
+
+export class UnauthorizedToSetExtraFee extends SmartContractError {
+  constructor(message: string) {
+    super(Errors.UnauthorizedToSetExtraFee, message);
+  }
+}
diff --git a/packages/types/src/errors/tfchain/tfchain_error.ts b/packages/types/src/errors/tfchain/tfchain_error.ts
new file mode 100644
index 0000000000..cfd3f16dbd
--- /dev/null
+++ b/packages/types/src/errors/tfchain/tfchain_error.ts
@@ -0,0 +1,8 @@
+import { BaseError, Generic } from "../base_error";
+import { ErrorModules } from "../modules";
+
+export class TFChainError extends BaseError {
+  constructor(message: string) {
+    super(Generic.TFChainError, message, ErrorModules.Generic);
+  }
+}
diff --git a/packages/types/src/errors/tfchain/tfgrid.ts b/packages/types/src/errors/tfchain/tfgrid.ts
new file mode 100644
index 0000000000..4671b6af2a
--- /dev/null
+++ b/packages/types/src/errors/tfchain/tfgrid.ts
@@ -0,0 +1,823 @@
+import { BaseError } from "../base_error";
+import { ErrorModules } from "../modules";
+
+export enum Errors {
+  NoneValue,
+  StorageOverflow,
+
+  CannotCreateNode,
+  NodeNotExists,
+  NodeWithTwinIdExists,
+  CannotDeleteNode,
+  NodeDeleteNotAuthorized,
+  NodeUpdateNotAuthorized,
+
+  FarmExists,
+  FarmNotExists,
+  CannotCreateFarmWrongTwin,
+  CannotUpdateFarmWrongTwin,
+  CannotDeleteFarm,
+  CannotDeleteFarmWithPublicIPs,
+  CannotDeleteFarmWithNodesAssigned,
+  CannotDeleteFarmWrongTwin,
+  IpExists,
+  IpNotExists,
+
+  EntityWithNameExists,
+  EntityWithPubkeyExists,
+  EntityNotExists,
+  EntitySignatureDoesNotMatch,
+  EntityWithSignatureAlreadyExists,
+  CannotUpdateEntity,
+  CannotDeleteEntity,
+  SignatureLengthIsIncorrect,
+
+  TwinExists,
+  TwinNotExists,
+  TwinWithPubkeyExists,
+  CannotCreateTwin,
+  UnauthorizedToUpdateTwin,
+  TwinCannotBoundToItself,
+
+  PricingPolicyExists,
+  PricingPolicyNotExists,
+  PricingPolicyWithDifferentIdExists,
+  CertificationCodeExists,
+  FarmingPolicyAlreadyExists,
+  FarmPayoutAdressAlreadyRegistered,
+  FarmerDoesNotHaveEnoughFunds,
+  UserDidNotSignTermsAndConditions,
+  FarmerDidNotSignTermsAndConditions,
+  FarmerNotAuthorized,
+  InvalidFarmName,
+
+  AlreadyCertifier,
+  NotCertifier,
+  NotAllowedToCertifyNode,
+
+  FarmingPolicyNotExists,
+
+  RelayTooShort,
+  RelayTooLong,
+  InvalidRelay,
+
+  FarmNameTooShort,
+  FarmNameTooLong,
+  InvalidPublicIP,
+  PublicIPTooShort,
+  PublicIPTooLong,
+  GatewayIPTooShort,
+  GatewayIPTooLong,
+
+  IP4TooShort,
+  IP4TooLong,
+  InvalidIP4,
+  GW4TooShort,
+  GW4TooLong,
+  InvalidGW4,
+  IP6TooShort,
+  IP6TooLong,
+  InvalidIP6,
+  GW6TooShort,
+  GW6TooLong,
+  InvalidGW6,
+  DomainTooShort,
+  DomainTooLong,
+  InvalidDomain,
+  MethodIsDeprecated,
+  InterfaceNameTooShort,
+  InterfaceNameTooLong,
+  InvalidInterfaceName,
+  InterfaceMacTooShort,
+  InterfaceMacTooLong,
+  InvalidMacAddress,
+  InterfaceIpTooShort,
+  InterfaceIpTooLong,
+  InvalidInterfaceIP,
+  InvalidZosVersion,
+  FarmingPolicyExpired,
+
+  InvalidHRUInput,
+  InvalidSRUInput,
+  InvalidCRUInput,
+  InvalidMRUInput,
+
+  LatitudeInputTooShort,
+  LatitudeInputTooLong,
+  InvalidLatitudeInput,
+  LongitudeInputTooShort,
+  LongitudeInputTooLong,
+  InvalidLongitudeInput,
+  CountryNameTooShort,
+  CountryNameTooLong,
+  InvalidCountryName,
+  CityNameTooShort,
+  CityNameTooLong,
+  InvalidCityName,
+  InvalidCountryCityPair,
+
+  SerialNumberTooShort,
+  SerialNumberTooLong,
+  InvalidSerialNumber,
+
+  DocumentLinkInputTooShort,
+  DocumentLinkInputTooLong,
+  InvalidDocumentLinkInput,
+  DocumentHashInputTooShort,
+  DocumentHashInputTooLong,
+  InvalidDocumentHashInput,
+
+  InvalidPublicConfig,
+  UnauthorizedToChangePowerTarget,
+  InvalidRelayAddress,
+  InvalidTimestampHint,
+}
+
+class TFGridErrors extends BaseError {
+  constructor(code: number, message: string) {
+    super(code, message, ErrorModules.TFGrid);
+  }
+}
+export class NoneValue extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.NoneValue, message);
+  }
+}
+
+export class StorageOverflow extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.StorageOverflow, message);
+  }
+}
+
+export class CannotCreateNode extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotCreateNode, message);
+  }
+}
+
+export class NodeNotExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.NodeNotExists, message);
+  }
+}
+
+export class NodeWithTwinIdExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.NodeWithTwinIdExists, message);
+  }
+}
+
+export class CannotDeleteNode extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotDeleteNode, message);
+  }
+}
+
+export class NodeDeleteNotAuthorized extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.NodeDeleteNotAuthorized, message);
+  }
+}
+
+export class NodeUpdateNotAuthorized extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.NodeUpdateNotAuthorized, message);
+  }
+}
+
+export class FarmExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmExists, message);
+  }
+}
+
+export class FarmNotExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmNotExists, message);
+  }
+}
+
+export class CannotCreateFarmWrongTwin extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotCreateFarmWrongTwin, message);
+  }
+}
+
+export class CannotUpdateFarmWrongTwin extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotUpdateFarmWrongTwin, message);
+  }
+}
+
+export class CannotDeleteFarm extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotDeleteFarm, message);
+  }
+}
+
+export class CannotDeleteFarmWithPublicIPs extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotDeleteFarmWithPublicIPs, message);
+  }
+}
+
+export class CannotDeleteFarmWithNodesAssigned extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotDeleteFarmWithNodesAssigned, message);
+  }
+}
+
+export class CannotDeleteFarmWrongTwin extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotDeleteFarmWrongTwin, message);
+  }
+}
+
+export class IpExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.IpExists, message);
+  }
+}
+
+export class IpNotExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.IpNotExists, message);
+  }
+}
+
+export class EntityWithNameExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.EntityWithNameExists, message);
+  }
+}
+
+export class EntityWithPubkeyExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.EntityWithPubkeyExists, message);
+  }
+}
+
+export class EntityNotExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.EntityNotExists, message);
+  }
+}
+
+export class EntitySignatureDoesNotMatch extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.EntitySignatureDoesNotMatch, message);
+  }
+}
+
+export class EntityWithSignatureAlreadyExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.EntityWithSignatureAlreadyExists, message);
+  }
+}
+
+export class CannotUpdateEntity extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotUpdateEntity, message);
+  }
+}
+
+export class CannotDeleteEntity extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotDeleteEntity, message);
+  }
+}
+
+export class SignatureLengthIsIncorrect extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.SignatureLengthIsIncorrect, message);
+  }
+}
+
+export class TwinExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.TwinExists, message);
+  }
+}
+
+export class TwinNotExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.TwinNotExists, message);
+  }
+}
+
+export class TwinWithPubkeyExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.TwinWithPubkeyExists, message);
+  }
+}
+
+export class CannotCreateTwin extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CannotCreateTwin, message);
+  }
+}
+
+export class UnauthorizedToUpdateTwin extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.UnauthorizedToUpdateTwin, message);
+  }
+}
+
+export class TwinCannotBoundToItself extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.TwinCannotBoundToItself, message);
+  }
+}
+
+export class PricingPolicyExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.PricingPolicyExists, message);
+  }
+}
+
+export class PricingPolicyNotExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.PricingPolicyNotExists, message);
+  }
+}
+
+export class PricingPolicyWithDifferentIdExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.PricingPolicyWithDifferentIdExists, message);
+  }
+}
+
+export class CertificationCodeExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CertificationCodeExists, message);
+  }
+}
+
+export class FarmingPolicyAlreadyExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmingPolicyAlreadyExists, message);
+  }
+}
+
+export class FarmPayoutAdressAlreadyRegistered extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmPayoutAdressAlreadyRegistered, message);
+  }
+}
+
+export class FarmerDoesNotHaveEnoughFunds extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmerDoesNotHaveEnoughFunds, message);
+  }
+}
+
+export class UserDidNotSignTermsAndConditions extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.UserDidNotSignTermsAndConditions, message);
+  }
+}
+
+export class FarmerDidNotSignTermsAndConditions extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmerDidNotSignTermsAndConditions, message);
+  }
+}
+
+export class FarmerNotAuthorized extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmerNotAuthorized, message);
+  }
+}
+
+export class InvalidFarmName extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidFarmName, message);
+  }
+}
+
+export class AlreadyCertifier extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.AlreadyCertifier, message);
+  }
+}
+
+export class NotCertifier extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.NotCertifier, message);
+  }
+}
+
+export class NotAllowedToCertifyNode extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.NotAllowedToCertifyNode, message);
+  }
+}
+
+export class FarmingPolicyNotExists extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmingPolicyNotExists, message);
+  }
+}
+
+export class RelayTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.RelayTooShort, message);
+  }
+}
+
+export class RelayTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.RelayTooLong, message);
+  }
+}
+
+export class InvalidRelay extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidRelay, message);
+  }
+}
+
+export class FarmNameTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmNameTooShort, message);
+  }
+}
+
+export class FarmNameTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmNameTooLong, message);
+  }
+}
+
+export class InvalidPublicIP extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidPublicIP, message);
+  }
+}
+
+export class PublicIPTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.PublicIPTooShort, message);
+  }
+}
+
+export class PublicIPTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.PublicIPTooLong, message);
+  }
+}
+
+export class GatewayIPTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.GatewayIPTooShort, message);
+  }
+}
+
+export class GatewayIPTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.GatewayIPTooLong, message);
+  }
+}
+
+export class IP4TooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.IP4TooShort, message);
+  }
+}
+
+export class IP4TooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.IP4TooLong, message);
+  }
+}
+
+export class InvalidIP4 extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidIP4, message);
+  }
+}
+
+export class GW4TooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.GW4TooShort, message);
+  }
+}
+
+export class GW4TooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.GW4TooLong, message);
+  }
+}
+
+export class InvalidGW4 extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidGW4, message);
+  }
+}
+
+export class IP6TooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.IP6TooShort, message);
+  }
+}
+
+export class IP6TooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.IP6TooLong, message);
+  }
+}
+
+export class InvalidIP6 extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidIP6, message);
+  }
+}
+
+export class GW6TooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.GW6TooShort, message);
+  }
+}
+
+export class GW6TooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.GW6TooLong, message);
+  }
+}
+
+export class InvalidGW6 extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidGW6, message);
+  }
+}
+
+export class DomainTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.DomainTooShort, message);
+  }
+}
+
+export class DomainTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.DomainTooLong, message);
+  }
+}
+
+export class InvalidDomain extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidDomain, message);
+  }
+}
+
+export class MethodIsDeprecated extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.MethodIsDeprecated, message);
+  }
+}
+
+export class InterfaceNameTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InterfaceNameTooShort, message);
+  }
+}
+
+export class InterfaceNameTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InterfaceNameTooLong, message);
+  }
+}
+
+export class InvalidInterfaceName extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidInterfaceName, message);
+  }
+}
+
+export class InterfaceMacTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InterfaceMacTooShort, message);
+  }
+}
+
+export class InterfaceMacTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InterfaceMacTooLong, message);
+  }
+}
+
+export class InvalidMacAddress extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidMacAddress, message);
+  }
+}
+
+export class InterfaceIpTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InterfaceIpTooShort, message);
+  }
+}
+
+export class InterfaceIpTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InterfaceIpTooLong, message);
+  }
+}
+
+export class InvalidInterfaceIP extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidInterfaceIP, message);
+  }
+}
+
+export class InvalidZosVersion extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidZosVersion, message);
+  }
+}
+
+export class FarmingPolicyExpired extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.FarmingPolicyExpired, message);
+  }
+}
+
+export class InvalidHRUInput extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidHRUInput, message);
+  }
+}
+
+export class InvalidSRUInput extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidSRUInput, message);
+  }
+}
+
+export class InvalidCRUInput extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidCRUInput, message);
+  }
+}
+
+export class InvalidMRUInput extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidMRUInput, message);
+  }
+}
+
+export class LatitudeInputTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.LatitudeInputTooShort, message);
+  }
+}
+
+export class LatitudeInputTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.LatitudeInputTooLong, message);
+  }
+}
+
+export class InvalidLatitudeInput extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidLatitudeInput, message);
+  }
+}
+
+export class LongitudeInputTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.LongitudeInputTooShort, message);
+  }
+}
+
+export class LongitudeInputTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.LongitudeInputTooLong, message);
+  }
+}
+
+export class InvalidLongitudeInput extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidLongitudeInput, message);
+  }
+}
+
+export class CountryNameTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CountryNameTooShort, message);
+  }
+}
+
+export class CountryNameTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CountryNameTooLong, message);
+  }
+}
+
+export class InvalidCountryName extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidCountryName, message);
+  }
+}
+
+export class CityNameTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CityNameTooShort, message);
+  }
+}
+
+export class CityNameTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.CityNameTooLong, message);
+  }
+}
+
+export class InvalidCityName extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidCityName, message);
+  }
+}
+
+export class InvalidCountryCityPair extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidCountryCityPair, message);
+  }
+}
+
+export class SerialNumberTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.SerialNumberTooShort, message);
+  }
+}
+
+export class SerialNumberTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.SerialNumberTooLong, message);
+  }
+}
+
+export class InvalidSerialNumber extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidSerialNumber, message);
+  }
+}
+
+export class DocumentLinkInputTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.DocumentLinkInputTooShort, message);
+  }
+}
+
+export class DocumentLinkInputTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.DocumentLinkInputTooLong, message);
+  }
+}
+
+export class InvalidDocumentLinkInput extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidDocumentLinkInput, message);
+  }
+}
+
+export class DocumentHashInputTooShort extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.DocumentHashInputTooShort, message);
+  }
+}
+
+export class DocumentHashInputTooLong extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.DocumentHashInputTooLong, message);
+  }
+}
+
+export class InvalidDocumentHashInput extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidDocumentHashInput, message);
+  }
+}
+
+export class InvalidPublicConfig extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidPublicConfig, message);
+  }
+}
+
+export class UnauthorizedToChangePowerTarget extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.UnauthorizedToChangePowerTarget, message);
+  }
+}
+
+export class InvalidRelayAddress extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidRelayAddress, message);
+  }
+}
+
+export class InvalidTimestampHint extends TFGridErrors {
+  constructor(message: string) {
+    super(Errors.InvalidTimestampHint, message);
+  }
+}
diff --git a/packages/types/src/errors/tfchain/tft_bridge.ts b/packages/types/src/errors/tfchain/tft_bridge.ts
new file mode 100644
index 0000000000..6102a726b7
--- /dev/null
+++ b/packages/types/src/errors/tfchain/tft_bridge.ts
@@ -0,0 +1,158 @@
+import { BaseError } from "../base_error";
+import { ErrorModules } from "../modules";
+
+export enum Errors {
+  ValidatorExists,
+  ValidatorNotExists,
+  TransactionValidatorExists,
+  TransactionValidatorNotExists,
+  MintTransactionExists,
+  MintTransactionAlreadyExecuted,
+  MintTransactionNotExists,
+  BurnTransactionExists,
+  BurnTransactionNotExists,
+  BurnSignatureExists,
+  EnoughBurnSignaturesPresent,
+  RefundSignatureExists,
+  BurnTransactionAlreadyExecuted,
+  RefundTransactionNotExists,
+  RefundTransactionAlreadyExecuted,
+  EnoughRefundSignaturesPresent,
+  NotEnoughBalanceToSwap,
+  AmountIsLessThanWithdrawFee,
+  AmountIsLessThanDepositFee,
+  WrongParametersProvided,
+  InvalidStellarPublicKey,
+}
+
+class TFTBridge extends BaseError {
+  constructor(code: number, message: string) {
+    super(code, message, ErrorModules.TFTBridge);
+  }
+}
+
+export class ValidatorExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.ValidatorExists, message);
+  }
+}
+
+export class ValidatorNotExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.ValidatorNotExists, message);
+  }
+}
+
+export class TransactionValidatorExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.TransactionValidatorExists, message);
+  }
+}
+
+export class TransactionValidatorNotExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.TransactionValidatorNotExists, message);
+  }
+}
+
+export class MintTransactionExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.MintTransactionExists, message);
+  }
+}
+
+export class MintTransactionAlreadyExecuted extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.MintTransactionAlreadyExecuted, message);
+  }
+}
+
+export class MintTransactionNotExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.MintTransactionNotExists, message);
+  }
+}
+
+export class BurnTransactionExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.BurnTransactionExists, message);
+  }
+}
+
+export class BurnTransactionNotExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.BurnTransactionNotExists, message);
+  }
+}
+
+export class BurnSignatureExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.BurnSignatureExists, message);
+  }
+}
+
+export class EnoughBurnSignaturesPresent extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.EnoughBurnSignaturesPresent, message);
+  }
+}
+
+export class RefundSignatureExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.RefundSignatureExists, message);
+  }
+}
+
+export class BurnTransactionAlreadyExecuted extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.BurnTransactionAlreadyExecuted, message);
+  }
+}
+
+export class RefundTransactionNotExists extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.RefundTransactionNotExists, message);
+  }
+}
+
+export class RefundTransactionAlreadyExecuted extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.RefundTransactionAlreadyExecuted, message);
+  }
+}
+
+export class EnoughRefundSignaturesPresent extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.EnoughRefundSignaturesPresent, message);
+  }
+}
+
+export class NotEnoughBalanceToSwap extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.NotEnoughBalanceToSwap, message);
+  }
+}
+
+export class AmountIsLessThanWithdrawFee extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.AmountIsLessThanWithdrawFee, message);
+  }
+}
+
+export class AmountIsLessThanDepositFee extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.AmountIsLessThanDepositFee, message);
+  }
+}
+
+export class WrongParametersProvided extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.WrongParametersProvided, message);
+  }
+}
+
+export class InvalidStellarPublicKey extends TFTBridge {
+  constructor(message: string) {
+    super(Errors.InvalidStellarPublicKey, message);
+  }
+}
diff --git a/packages/types/src/errors/tfchain/tft_price.ts b/packages/types/src/errors/tfchain/tft_price.ts
new file mode 100644
index 0000000000..ae67b82c90
--- /dev/null
+++ b/packages/types/src/errors/tfchain/tft_price.ts
@@ -0,0 +1,66 @@
+import { BaseError } from "../base_error";
+import { ErrorModules } from "../modules";
+
+export enum Errors {
+  ErrFetchingPrice,
+  OffchainSignedTxError,
+  NoLocalAcctForSigning,
+  AccountUnauthorizedToSetPrice,
+  MaxPriceBelowMinPriceError,
+  MinPriceAboveMaxPriceError,
+  IsNotAnAuthority,
+  WrongAuthority,
+}
+
+class TFTPrice extends BaseError {
+  constructor(code: number, message: string) {
+    super(code, message, ErrorModules.TFTPrice);
+  }
+}
+export class ErrFetchingPrice extends TFTPrice {
+  constructor(message: string) {
+    super(Errors.ErrFetchingPrice, message);
+  }
+}
+
+export class OffchainSignedTxError extends TFTPrice {
+  constructor(message: string) {
+    super(Errors.OffchainSignedTxError, message);
+  }
+}
+
+export class NoLocalAcctForSigning extends TFTPrice {
+  constructor(message: string) {
+    super(Errors.NoLocalAcctForSigning, message);
+  }
+}
+
+export class AccountUnauthorizedToSetPrice extends TFTPrice {
+  constructor(message: string) {
+    super(Errors.AccountUnauthorizedToSetPrice, message);
+  }
+}
+
+export class MaxPriceBelowMinPriceError extends TFTPrice {
+  constructor(message: string) {
+    super(Errors.MaxPriceBelowMinPriceError, message);
+  }
+}
+
+export class MinPriceAboveMaxPriceError extends TFTPrice {
+  constructor(message: string) {
+    super(Errors.MinPriceAboveMaxPriceError, message);
+  }
+}
+
+export class IsNotAnAuthority extends TFTPrice {
+  constructor(message: string) {
+    super(Errors.IsNotAnAuthority, message);
+  }
+}
+
+export class WrongAuthority extends TFTPrice {
+  constructor(message: string) {
+    super(Errors.WrongAuthority, message);
+  }
+}
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
new file mode 100644
index 0000000000..49bbc161a4
--- /dev/null
+++ b/packages/types/src/index.ts
@@ -0,0 +1 @@
+export * from "./errors";
diff --git a/packages/types/tsconfig.json b/packages/types/tsconfig.json
new file mode 100644
index 0000000000..ff2c20809c
--- /dev/null
+++ b/packages/types/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "module": "ES6",
+    "target": "esnext",
+    "lib": ["ESNext", "DOM"],
+    "types": ["node", "jest"],
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "moduleResolution": "Node",
+    "allowJs": true,
+    "baseUrl": ".",
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  },
+  "include": ["src/**/*"]
+}
diff --git a/yarn.lock b/yarn.lock
index 175b5310b4..3c5385331c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -50,6 +50,14 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/code-frame@^7.22.13":
+  version "7.22.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
+  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
+  dependencies:
+    "@babel/highlight" "^7.22.13"
+    chalk "^2.4.2"
+
 "@babel/compat-data@^7.17.7", "@babel/compat-data@^7.21.4":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.21.4.tgz#457ffe647c480dff59c2be092fc3acf71195c87f"
@@ -60,6 +68,11 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.0.tgz"
   integrity sha512-gMuZsmsgxk/ENC3O/fRw5QY8A9/uxQbbCEypnLIiYYc/qVJtEV7ouxC3EllIIwNzMqAQee5tanFabWsUOutS7g==
 
+"@babel/compat-data@^7.22.9":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.2.tgz#6a12ced93455827037bfb5ed8492820d60fc32cc"
+  integrity sha512-0S9TQMmDHlqAZ2ITT95irXKfxN9bncq8ZCoJhun3nHL/lLUxd2NKBJYoNGWH7S0hz6fRQwWlAWn/ILM0C70KZQ==
+
 "@babel/core@^7.11.6", "@babel/core@^7.12.3":
   version "7.21.3"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.21.3.tgz"
@@ -102,6 +115,27 @@
     json5 "^2.2.2"
     semver "^6.3.0"
 
+"@babel/core@^7.22.10":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.2.tgz#ed10df0d580fff67c5f3ee70fd22e2e4c90a9f94"
+  integrity sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-module-transforms" "^7.23.0"
+    "@babel/helpers" "^7.23.2"
+    "@babel/parser" "^7.23.0"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
 "@babel/generator@^7.21.3", "@babel/generator@^7.7.2":
   version "7.21.3"
   resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.21.3.tgz"
@@ -122,6 +156,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
+  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
+  dependencies:
+    "@babel/types" "^7.23.0"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@@ -129,6 +173,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-annotate-as-pure@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
+  integrity sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz#acd4edfd7a566d1d51ea975dff38fd52906981bb"
@@ -159,6 +210,17 @@
     lru-cache "^5.1.1"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52"
+  integrity sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==
+  dependencies:
+    "@babel/compat-data" "^7.22.9"
+    "@babel/helper-validator-option" "^7.22.15"
+    browserslist "^4.21.9"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
 "@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.4.tgz#3a017163dc3c2ba7deb9a7950849a9586ea24c18"
@@ -173,6 +235,21 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.20.0"
     "@babel/helper-split-export-declaration" "^7.18.6"
 
+"@babel/helper-create-class-features-plugin@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.15.tgz#97a61b385e57fe458496fad19f8e63b63c867de4"
+  integrity sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/helper-member-expression-to-functions" "^7.22.15"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    semver "^6.3.1"
+
 "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.20.5":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.21.4.tgz#40411a8ab134258ad2cf3a3d987ec6aa0723cee5"
@@ -198,6 +275,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz"
   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
+"@babel/helper-environment-visitor@^7.22.20", "@babel/helper-environment-visitor@^7.22.5":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
 "@babel/helper-explode-assignable-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
@@ -213,6 +295,14 @@
     "@babel/template" "^7.20.7"
     "@babel/types" "^7.21.0"
 
+"@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz"
@@ -220,6 +310,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-member-expression-to-functions@^7.20.7", "@babel/helper-member-expression-to-functions@^7.21.0":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz#319c6a940431a133897148515877d2f3269c3ba5"
@@ -227,6 +324,13 @@
   dependencies:
     "@babel/types" "^7.21.0"
 
+"@babel/helper-member-expression-to-functions@^7.22.15":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
+  integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==
+  dependencies:
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.21.4":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz#ac88b2f76093637489e718a90cec6cf8a9b029af"
@@ -241,6 +345,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+  dependencies:
+    "@babel/types" "^7.22.15"
+
 "@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.20.11", "@babel/helper-module-transforms@^7.21.2":
   version "7.21.2"
   resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz"
@@ -255,6 +366,17 @@
     "@babel/traverse" "^7.21.2"
     "@babel/types" "^7.21.2"
 
+"@babel/helper-module-transforms@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz#3ec246457f6c842c0aee62a01f60739906f7047e"
+  integrity sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/helper-validator-identifier" "^7.22.20"
+
 "@babel/helper-optimise-call-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
@@ -262,11 +384,23 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-optimise-call-expression@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
+  integrity sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.19.0", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.20.2"
   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz"
   integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==
 
+"@babel/helper-plugin-utils@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
+  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
+
 "@babel/helper-remap-async-to-generator@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
@@ -289,6 +423,15 @@
     "@babel/traverse" "^7.20.7"
     "@babel/types" "^7.20.7"
 
+"@babel/helper-replace-supers@^7.22.9":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
+  integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-member-expression-to-functions" "^7.22.15"
+    "@babel/helper-optimise-call-expression" "^7.22.5"
+
 "@babel/helper-simple-access@^7.20.2":
   version "7.20.2"
   resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.20.2.tgz"
@@ -296,6 +439,13 @@
   dependencies:
     "@babel/types" "^7.20.2"
 
+"@babel/helper-simple-access@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
+  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.20.0":
   version "7.20.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz#fbe4c52f60518cab8140d77101f0e63a8a230684"
@@ -303,6 +453,13 @@
   dependencies:
     "@babel/types" "^7.20.0"
 
+"@babel/helper-skip-transparent-expression-wrappers@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz#007f15240b5751c537c40e77abb4e89eeaaa8847"
+  integrity sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-split-export-declaration@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz"
@@ -310,21 +467,43 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-string-parser@^7.19.4":
   version "7.19.4"
   resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz"
   integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
 
+"@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
 "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1":
   version "7.19.1"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-option@^7.18.6", "@babel/helper-validator-option@^7.21.0":
   version "7.21.0"
   resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz"
   integrity sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==
 
+"@babel/helper-validator-option@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040"
+  integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==
+
 "@babel/helper-wrap-function@^7.18.9":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz#75e2d84d499a0ab3b31c33bcfe59d6b8a45f62e3"
@@ -344,6 +523,15 @@
     "@babel/traverse" "^7.21.0"
     "@babel/types" "^7.21.0"
 
+"@babel/helpers@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.2.tgz#2832549a6e37d484286e15ba36a5330483cac767"
+  integrity sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz"
@@ -353,6 +541,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.22.13":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
+  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.21.3":
   version "7.21.3"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.21.3.tgz"
@@ -368,6 +565,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.8.tgz#642af7d0333eab9c0ad70b14ac5e76dbde7bfdf8"
   integrity sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==
 
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
+  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -601,6 +803,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.20.2"
 
+"@babel/plugin-syntax-jsx@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz#a6b68e84fb76e759fc3b93e901876ffabbe1d918"
+  integrity sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-syntax-jsx@^7.7.2":
   version "7.18.6"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz"
@@ -664,6 +873,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-syntax-typescript@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.22.5.tgz#aac8d383b062c5072c647a31ef990c1d0af90272"
+  integrity sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-syntax-typescript@^7.7.2":
   version "7.20.0"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz"
@@ -919,6 +1135,16 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
+"@babel/plugin-transform-typescript@^7.22.10":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.15.tgz#15adef906451d86349eb4b8764865c960eb54127"
+  integrity sha512-1uirS0TnijxvQLnlv5wQBwOX3E1wCFX7ITv+9pBV2wKEk4K+M5tqDaoNXnTH8tjEIYHLO98MwiTWO04Ggz4XuA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-create-class-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-typescript" "^7.22.5"
+
 "@babel/plugin-transform-unicode-escapes@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
@@ -1047,6 +1273,15 @@
     "@babel/parser" "^7.20.7"
     "@babel/types" "^7.20.7"
 
+"@babel/template@^7.22.15", "@babel/template@^7.22.5":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.20.5", "@babel/traverse@^7.20.7", "@babel/traverse@^7.21.4":
   version "7.21.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.21.4.tgz#a836aca7b116634e97a6ed99976236b3282c9d36"
@@ -1079,6 +1314,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.22.5", "@babel/traverse@^7.23.2":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
+  integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.0"
+    "@babel/types" "^7.23.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.20.2", "@babel/types@^7.20.7", "@babel/types@^7.21.0", "@babel/types@^7.21.2", "@babel/types@^7.21.3", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
   version "7.21.3"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.21.3.tgz"
@@ -1097,6 +1348,15 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
+  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
@@ -2285,6 +2545,11 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@leichtgewicht/ip-codec@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
@@ -3912,11 +4177,6 @@
   resolved "https://registry.yarnpkg.com/@threefold/extension_api/-/extension_api-0.0.1-rc6.tgz#9271ac014f8cfc5b0351f75bc7bee6f9e5e744a2"
   integrity sha512-rICTgNT7NuAlJCi9PcQ4l5q4jh0aQ/9nilXu9SHHo4toSYd9NxeI4HxF+Vmk1vR8O7iA101SoRhJrJCAqjtROw==
 
-"@threefold/gridproxy_client@^2.1.1-rc1":
-  version "2.1.1-rc1"
-  resolved "https://registry.yarnpkg.com/@threefold/gridproxy_client/-/gridproxy_client-2.1.1-rc1.tgz#3e79b375d8bb5bcd598d2248308cce2841f78913"
-  integrity sha512-IPT3irRQ4MzBUK1BRBCMeagU8JO5RhpIjt+TzgrQJMYfgTzoo597uirfdsnzXoAiHK/oJhokQx9wr5mBOcFgRQ==
-
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz"
@@ -3947,7 +4207,7 @@
   resolved "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz"
   integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
 
-"@tsconfig/node18@^18.2.0":
+"@tsconfig/node18@^18.2.0", "@tsconfig/node18@^18.2.2":
   version "18.2.2"
   resolved "https://registry.yarnpkg.com/@tsconfig/node18/-/node18-18.2.2.tgz#81fb16ecff0d400b1cbadbf76713b50f331029ce"
   integrity sha512-d6McJeGsuoRlwWZmVIeE8CUA27lu6jLjvv1JzqmpsytOYYbVi1tHZEnwCNVOXnj4pyLvneZlFlpXUK+X9wBWyw==
@@ -4036,6 +4296,13 @@
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.6.tgz#7b489e8baf393d5dd1266fb203ddd4ea941259e6"
   integrity sha512-VOVRLM1mBxIRxydiViqPcKn6MIxZytrbMpd6RJLIWKxUNr3zux8no0Oc7kJx0WAPIitgZ0gkrDS+btlqQpubpw==
 
+"@types/chart.js@^2.9.38":
+  version "2.9.38"
+  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.9.38.tgz#b73309767b0b3ce692f0e1cf9ce084107581c614"
+  integrity sha512-rLoHHprkVEDpAXqke/xHalyXR+5Nv+3tfViwT/UnJZ41Wp/XPaSRlJKw2PU3S3tTCqKKyjkYai+VpeHoti79XQ==
+  dependencies:
+    moment "^2.10.2"
+
 "@types/connect-history-api-fallback@^1.3.5":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
@@ -4056,6 +4323,11 @@
   resolved "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz"
   integrity sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==
 
+"@types/crypto-js@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-4.2.1.tgz#480edd76991a63050cb88db1a8840758c55a7135"
+  integrity sha512-FSPGd9+OcSok3RsM0UZ/9fcvMOXJ1ENE/ZbLfOPlBWj7BgXtEAM8VYfTtT760GiLbQIMoVozwVuisjvsVwqYWw==
+
 "@types/debounce@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.1.tgz#79b65710bc8b6d44094d286aecf38e44f9627852"
@@ -4196,7 +4468,7 @@
     "@types/tough-cookie" "*"
     parse5 "^7.0.0"
 
-"@types/jsdom@^21.1.1":
+"@types/jsdom@^21.1.1", "@types/jsdom@^21.1.3":
   version "21.1.3"
   resolved "https://registry.yarnpkg.com/@types/jsdom/-/jsdom-21.1.3.tgz#a88c5dc65703e1b10b2a7839c12db49662b43ff0"
   integrity sha512-1zzqSP+iHJYV4lB3lZhNBa012pubABkj9yG/GuXuf6LZH1cSPIJBqFDrm5JX65HHt6VOnNYdTui/0ySerRbMgA==
@@ -4293,11 +4565,23 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.52.tgz#70c56b55d0d7e15fafa875127e95a92605c59c9b"
   integrity sha512-sm2aph6cRSsTMFYFgI+RpPLunXO9ClJkpizUVdT7KmGeyfQ14xnjTMT/f3MHcfKqevXqGT6BgVFzW8wcEoDUtA==
 
+"@types/node@^18.11.9":
+  version "18.18.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.10.tgz#4971bffdf3a43977c4c8166aa714b2c0b05b3256"
+  integrity sha512-luANqZxPmjTll8bduz4ACs/lNTCLuWssCyjqTY9yLdsv1xnViQp3ISKwsEWOIecO13JWUqjVdig/Vjjc09o8uA==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/node@^18.14.2":
   version "18.16.12"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.16.12.tgz#f11e19055c5b3daeb79dc6eb7ccdd3d036313034"
   integrity sha512-tIRrjbY9C277MOfP8M3zjMIhtMlUJ6YVqkGgLjz+74jVsdf4/UjC6Hku4+1N0BS0qyC0JAS6tJLUk9H6JUKviQ==
 
+"@types/node@^18.17.17":
+  version "18.18.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.5.tgz#afc0fd975df946d6e1add5bbf98264225b212244"
+  integrity sha512-4slmbtwV59ZxitY4ixUZdy1uRLf9eSIvBWPQxNjhHYWEtn0FryfKpyS2cvADYXTayWdKEIsJengncrVvkI4I6A==
+
 "@types/node@^18.17.5":
   version "18.17.17"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.17.17.tgz#53cc07ce582c9d7c5850702a3c2cb0af0d7b0ca1"
@@ -4308,6 +4592,11 @@
   resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
+"@types/normalize-package-data@^2.4.1":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.2.tgz#9b0e3e8533fe5024ad32d6637eb9589988b6fdca"
+  integrity sha512-lqa4UEhhv/2sjjIQgjX8B+RBjj47eo0mzGasklVJ78UKGQY1r0VpB9XHDaZZO9qzEFDdy4MrXLuEaSmPrPSe/A==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
@@ -4614,6 +4903,15 @@
     "@typescript-eslint/types" "5.58.0"
     eslint-visitor-keys "^3.3.0"
 
+"@vitejs/plugin-vue-jsx@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-3.0.2.tgz#f071274f78ea8132c6731986893b7c5c5231af24"
+  integrity sha512-obF26P2Z4Ogy3cPp07B4VaW6rpiu0ue4OT2Y15UxT5BZZ76haUY9guOsZV3uWh/I6xc+VeiW+ZVabRE82FyzWw==
+  dependencies:
+    "@babel/core" "^7.22.10"
+    "@babel/plugin-transform-typescript" "^7.22.10"
+    "@vue/babel-plugin-jsx" "^1.1.5"
+
 "@vitejs/plugin-vue@^4.0.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz#ee0b6dfcc62fe65364e6395bf38fa2ba10bb44b6"
@@ -4624,6 +4922,11 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.3.4.tgz#a289dff38e01949fe7be581d5542cabaeb961dec"
   integrity sha512-ciXNIHKPriERBisHFBvnTbfKa6r9SAesOYXeGDzgegcvy9Q4xdScSHAmKbNT0M3O0S9LKhIf5/G+UYG4NnnzYw==
 
+"@vitejs/plugin-vue@^4.3.4":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.4.0.tgz#8ae96573236cdb12de6850a6d929b5537ec85390"
+  integrity sha512-xdguqb+VUwiRpSg+nsc2HtbAUSGak25DXYvpQQi4RVU1Xq1uworyoH/md9Rfd8zMmPR/pSghr309QNcftUVseg==
+
 "@vitest/expect@0.29.8":
   version "0.29.8"
   resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-0.29.8.tgz#6ecdd031b4ea8414717d10b65ccd800908384612"
@@ -4642,6 +4945,15 @@
     "@vitest/utils" "0.34.4"
     chai "^4.3.7"
 
+"@vitest/expect@0.34.6":
+  version "0.34.6"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-0.34.6.tgz#608a7b7a9aa3de0919db99b4cc087340a03ea77e"
+  integrity sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==
+  dependencies:
+    "@vitest/spy" "0.34.6"
+    "@vitest/utils" "0.34.6"
+    chai "^4.3.10"
+
 "@vitest/runner@0.29.8":
   version "0.29.8"
   resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-0.29.8.tgz#ede8a7be8a074ea1180bc1d1595bd879ed15971c"
@@ -4660,6 +4972,15 @@
     p-limit "^4.0.0"
     pathe "^1.1.1"
 
+"@vitest/runner@0.34.6":
+  version "0.34.6"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-0.34.6.tgz#6f43ca241fc96b2edf230db58bcde5b974b8dcaf"
+  integrity sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==
+  dependencies:
+    "@vitest/utils" "0.34.6"
+    p-limit "^4.0.0"
+    pathe "^1.1.1"
+
 "@vitest/snapshot@0.34.4":
   version "0.34.4"
   resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-0.34.4.tgz#ee2c732e5978438f96c669aabb9eb66eb7f3ff46"
@@ -4669,6 +4990,15 @@
     pathe "^1.1.1"
     pretty-format "^29.5.0"
 
+"@vitest/snapshot@0.34.6":
+  version "0.34.6"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-0.34.6.tgz#b4528cf683b60a3e8071cacbcb97d18b9d5e1d8b"
+  integrity sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==
+  dependencies:
+    magic-string "^0.30.1"
+    pathe "^1.1.1"
+    pretty-format "^29.5.0"
+
 "@vitest/spy@0.29.8":
   version "0.29.8"
   resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-0.29.8.tgz#2e0c3b30e04d317b2197e3356234448aa432e131"
@@ -4683,6 +5013,13 @@
   dependencies:
     tinyspy "^2.1.1"
 
+"@vitest/spy@0.34.6":
+  version "0.34.6"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-0.34.6.tgz#b5e8642a84aad12896c915bce9b3cc8cdaf821df"
+  integrity sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==
+  dependencies:
+    tinyspy "^2.1.1"
+
 "@vitest/utils@0.29.8":
   version "0.29.8"
   resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-0.29.8.tgz#423da85fd0c6633f3ab496cf7d2fc0119b850df8"
@@ -4702,6 +5039,15 @@
     loupe "^2.3.6"
     pretty-format "^29.5.0"
 
+"@vitest/utils@0.34.6":
+  version "0.34.6"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-0.34.6.tgz#38a0a7eedddb8e7291af09a2409cb8a189516968"
+  integrity sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==
+  dependencies:
+    diff-sequences "^29.4.3"
+    loupe "^2.3.6"
+    pretty-format "^29.5.0"
+
 "@volar/language-core@1.10.1", "@volar/language-core@~1.10.0":
   version "1.10.1"
   resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.10.1.tgz#76789c5b0c214eeff8add29cbff0333d89b6fc4a"
@@ -4709,6 +5055,13 @@
   dependencies:
     "@volar/source-map" "1.10.1"
 
+"@volar/language-core@1.10.4", "@volar/language-core@~1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.10.4.tgz#0340dbbb152fa375978f6af57153ad02f57de752"
+  integrity sha512-Na69qA6uwVIdA0rHuOc2W3pHtVQQO8hCNim7FOaKNpRJh0oAFnu5r9i7Oopo5C4cnELZkPNjTrbmpcCTiW+CMQ==
+  dependencies:
+    "@volar/source-map" "1.10.4"
+
 "@volar/language-core@1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.4.1.tgz#66b5758252e35c4e5e71197ca7fa0344d306442c"
@@ -4723,6 +5076,13 @@
   dependencies:
     muggle-string "^0.3.1"
 
+"@volar/source-map@1.10.4", "@volar/source-map@~1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-1.10.4.tgz#1d5d0daf9c6bbecec4d1ec103f1bb6ed699b143d"
+  integrity sha512-RxZdUEL+pV8p+SMqnhVjzy5zpb1QRZTlcwSk4bdcBO7yOu4rtEWqDGahVCEj4CcXour+0yJUMrMczfSCpP9Uxg==
+  dependencies:
+    muggle-string "^0.3.1"
+
 "@volar/source-map@1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-1.4.1.tgz#e3b561775c742508e5e1f28609a4787c98056715"
@@ -4744,6 +5104,13 @@
   dependencies:
     "@volar/language-core" "1.10.1"
 
+"@volar/typescript@~1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-1.10.4.tgz#78c8b56c1a4cc406fed50fc88d92874f947f82d6"
+  integrity sha512-BCCUEBASBEMCrz7qmNSi2hBEWYsXD0doaktRKpmmhvb6XntM2sAWYu6gbyK/MluLDgluGLFiFRpWgobgzUqolg==
+  dependencies:
+    "@volar/language-core" "1.10.4"
+
 "@volar/vue-language-core@1.6.5":
   version "1.6.5"
   resolved "https://registry.yarnpkg.com/@volar/vue-language-core/-/vue-language-core-1.6.5.tgz#db42520f1a29737c7e40fbb3e6aead8def85ba75"
@@ -4777,6 +5144,11 @@
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
   integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
 
+"@vue/babel-helper-vue-transform-on@^1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz#a976486b21e108e545524fe41ffe3fc9bbc28c7f"
+  integrity sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==
+
 "@vue/babel-plugin-jsx@^1.0.3":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.1.tgz#0c5bac27880d23f89894cd036a37b55ef61ddfc1"
@@ -4792,6 +5164,21 @@
     html-tags "^3.1.0"
     svg-tags "^1.0.0"
 
+"@vue/babel-plugin-jsx@^1.1.5":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz#5088bae7dbb83531d94df3742ff650c12fd54973"
+  integrity sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==
+  dependencies:
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/plugin-syntax-jsx" "^7.22.5"
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+    "@vue/babel-helper-vue-transform-on" "^1.1.5"
+    camelcase "^6.3.0"
+    html-tags "^3.3.1"
+    svg-tags "^1.0.0"
+
 "@vue/babel-plugin-transform-vue-jsx@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.4.0.tgz#4d4b3d46a39ea62b7467dd6e26ce47f7ceafb2fe"
@@ -5157,6 +5544,20 @@
     muggle-string "^0.3.1"
     vue-template-compiler "^2.7.14"
 
+"@vue/language-core@1.8.19":
+  version "1.8.19"
+  resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-1.8.19.tgz#c52cef2f89ad4b74caa29e97fd07a71d35ac9e60"
+  integrity sha512-nt3dodGs97UM6fnxeQBazO50yYCKBK53waFWB3qMbLmR6eL3aUryZgQtZoBe1pye17Wl8fs9HysV3si6xMgndQ==
+  dependencies:
+    "@volar/language-core" "~1.10.4"
+    "@volar/source-map" "~1.10.4"
+    "@vue/compiler-dom" "^3.3.0"
+    "@vue/reactivity" "^3.3.0"
+    "@vue/shared" "^3.3.0"
+    minimatch "^9.0.3"
+    muggle-string "^0.3.1"
+    vue-template-compiler "^2.7.14"
+
 "@vue/reactivity-transform@3.3.2":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.3.2.tgz#e1991d52d7ecefb65b214d8a3385a9dbe2cca74c"
@@ -5298,6 +5699,14 @@
     "@volar/typescript" "~1.10.0"
     "@vue/language-core" "1.8.11"
 
+"@vue/typescript@1.8.19":
+  version "1.8.19"
+  resolved "https://registry.yarnpkg.com/@vue/typescript/-/typescript-1.8.19.tgz#e17b7f60080b280fe2e42e584e4a2c230efcb9bc"
+  integrity sha512-k/SHeeQROUgqsxyHQ8Cs3Zz5TnX57p7BcBDVYR2E0c61QL2DJ2G8CsaBremmNGuGE6o1R5D50IHIxFmroMz8iw==
+  dependencies:
+    "@volar/typescript" "~1.10.4"
+    "@vue/language-core" "1.8.19"
+
 "@vue/vue-loader-v15@npm:vue-loader@^15.9.7":
   version "15.10.1"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.10.1.tgz#c451c4cd05a911aae7b5dbbbc09fb913fb3cca18"
@@ -5777,7 +6186,7 @@ ansi-styles@^5.0.0:
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-ansi-styles@^6.0.0:
+ansi-styles@^6.0.0, ansi-styles@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
@@ -6683,6 +7092,16 @@ browserslist@^4.21.10:
     node-releases "^2.0.13"
     update-browserslist-db "^1.0.11"
 
+browserslist@^4.21.9:
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619"
+  integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==
+  dependencies:
+    caniuse-lite "^1.0.30001541"
+    electron-to-chromium "^1.4.535"
+    node-releases "^2.0.13"
+    update-browserslist-db "^1.0.13"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz"
@@ -6910,7 +7329,7 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelcase@^6.0.0, camelcase@^6.2.0:
+camelcase@^6.0.0, camelcase@^6.2.0, camelcase@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
@@ -6940,6 +7359,11 @@ caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001520:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz#f24a9b2a6d39630bac5c132b5dff89b39a12e7dd"
   integrity sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==
 
+caniuse-lite@^1.0.30001541:
+  version "1.0.30001549"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001549.tgz#7d1a3dce7ea78c06ed72c32c2743ea364b3615aa"
+  integrity sha512-qRp48dPYSCYaP+KurZLhDYdVE+yEyht/3NlmcJgVQ2VMGt6JL36ndQ/7rgspdZsJuxDPFIo/OzBT2+GmIJ53BA==
+
 canvas@^2.11.2:
   version "2.11.2"
   resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.11.2.tgz#553d87b1e0228c7ac0fc72887c3adbac4abbd860"
@@ -6973,6 +7397,19 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
+chai@^4.3.10:
+  version "4.3.10"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.10.tgz#d784cec635e3b7e2ffb66446a63b4e33bd390384"
+  integrity sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==
+  dependencies:
+    assertion-error "^1.1.0"
+    check-error "^1.0.3"
+    deep-eql "^4.1.3"
+    get-func-name "^2.0.2"
+    loupe "^2.3.6"
+    pathval "^1.1.1"
+    type-detect "^4.0.8"
+
 chai@^4.3.7:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.7.tgz#ec63f6df01829088e8bf55fca839bcd464a8ec51"
@@ -7053,11 +7490,25 @@ chart.js@^3.6.0, chart.js@^3.8.0:
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.9.1.tgz#3abf2c775169c4c71217a107163ac708515924b8"
   integrity sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==
 
+chart.js@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.0.tgz#df843fdd9ec6bd88d7f07e2b95348d221bd2698c"
+  integrity sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 check-error@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==
 
+check-error@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.3.tgz#a6502e4312a7ee969f646e83bb3ddd56281bd694"
+  integrity sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==
+  dependencies:
+    get-func-name "^2.0.2"
+
 check-more-types@2.24.0, check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
@@ -7923,6 +8374,11 @@ crypto-js@^4.1.1:
   resolved "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz"
   integrity sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==
 
+crypto-js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
+  integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
+
 crypto-random-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz"
@@ -8386,7 +8842,7 @@ dedent@0.7.0, dedent@^0.7.0:
   resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz"
   integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
-deep-eql@^4.1.2:
+deep-eql@^4.1.2, deep-eql@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.3.tgz#7c7775513092f7df98d8df9996dd085eb668cc6d"
   integrity sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==
@@ -8834,6 +9290,11 @@ electron-to-chromium@^1.4.477:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.523.tgz#f82f99243c827df05c26776d49712cb284972df6"
   integrity sha512-9AreocSUWnzNtvLcbpng6N+GkXnCcBR80IQkxRC9Dfdyg4gaWNUPBujAHUpKkiUkoSoR9UlhA4zD/IgBklmhzg==
 
+electron-to-chromium@^1.4.535:
+  version "1.4.556"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.556.tgz#97385917eb6ea3ac6a3378cf87bb39ee1db96e76"
+  integrity sha512-6RPN0hHfzDU8D56E72YkDvnLw5Cj2NMXZGg3UkgyoHxjVhG99KZpsKgBWMmTy0Ei89xwan+rbRsVB9yzATmYzQ==
+
 elliptic@6.5.4, elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -8943,7 +9404,7 @@ errno@^0.1.1, errno@^0.1.3, errno@~0.1.1:
   dependencies:
     prr "~1.0.1"
 
-error-ex@^1.3.1:
+error-ex@^1.3.1, error-ex@^1.3.2:
   version "1.3.2"
   resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
@@ -10324,6 +10785,11 @@ get-func-name@^2.0.0:
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
   integrity sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==
 
+get-func-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41"
+  integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
+
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz"
@@ -10838,6 +11304,13 @@ hosted-git-info@^6.0.0, hosted-git-info@^6.1.1:
   dependencies:
     lru-cache "^7.5.1"
 
+hosted-git-info@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-7.0.1.tgz#9985fcb2700467fecf7f33a4d4874e30680b5322"
+  integrity sha512-+K84LB1DYwMHoHSgaOY/Jfhw3ucPmSET5v98Ke/HdNSw4a0UktWzyW1mjhjpuxxTqOOsfWT/7iVshHmVZ4IpOA==
+  dependencies:
+    lru-cache "^10.0.1"
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -10893,7 +11366,7 @@ html-tags@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
   integrity sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g==
 
-html-tags@^3.1.0:
+html-tags@^3.1.0, html-tags@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
   integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
@@ -12951,7 +13424,7 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-lines-and-columns@~2.0.3:
+lines-and-columns@^2.0.3, lines-and-columns@~2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-2.0.3.tgz"
   integrity sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==
@@ -13256,6 +13729,11 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lru-cache@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.0.1.tgz#0a3be479df549cca0e5d693ac402ff19537a6b7a"
+  integrity sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==
+
 lru-cache@^4.1.2, lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -13704,6 +14182,13 @@ minimatch@^9.0.0:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^9.0.3:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist-options@4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz"
@@ -13865,7 +14350,7 @@ module-alias@^2.2.2:
   resolved "https://registry.yarnpkg.com/module-alias/-/module-alias-2.2.2.tgz#151cdcecc24e25739ff0aa6e51e1c5716974c0e0"
   integrity sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==
 
-moment@^2.29.3:
+moment@^2.10.2, moment@^2.29.3, moment@^2.29.4:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
@@ -14315,6 +14800,16 @@ normalize-package-data@^5.0.0:
     semver "^7.3.5"
     validate-npm-package-license "^3.0.4"
 
+normalize-package-data@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-6.0.0.tgz#68a96b3c11edd462af7189c837b6b1064a484196"
+  integrity sha512-UL7ELRVxYBHBgYEtZCXjxuD5vPxnmvMGq0jp/dGPKKrN7tfsBh2IY7TlJ15WWwdjRWD3RJbnsygUurTK3xkPkg==
+  dependencies:
+    hosted-git-info "^7.0.0"
+    is-core-module "^2.8.1"
+    semver "^7.3.5"
+    validate-npm-package-license "^3.0.4"
+
 normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -14489,6 +14984,19 @@ npm-registry-fetch@^13.0.0, npm-registry-fetch@^13.0.1:
     npm-package-arg "^9.0.1"
     proc-log "^2.0.0"
 
+npm-run-all2@^6.0.6:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/npm-run-all2/-/npm-run-all2-6.1.1.tgz#afb58a18a4de1e226b2f4b5b44aaef0782ed81ce"
+  integrity sha512-lWLbkPZ5BSdXtN8lR+0rc8caKoPdymycpZksyDEC9MOBvfdwTXZ0uVhb7bMcGeXv2/BKtfQuo6Zn3zfc8rxNXA==
+  dependencies:
+    ansi-styles "^6.2.1"
+    cross-spawn "^7.0.3"
+    memorystream "^0.3.1"
+    minimatch "^9.0.0"
+    pidtree "^0.6.0"
+    read-pkg "^8.0.0"
+    shell-quote "^1.7.3"
+
 npm-run-all@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
@@ -15110,6 +15618,17 @@ parse-json@^5.0.0, parse-json@^5.2.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-json@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-7.1.0.tgz#4cffd0ee00ffa597b995fd70a9811993c4f95023"
+  integrity sha512-ihtdrgbqdONYD156Ap6qTcaGcGdkdAxodO1wLqQ/j7HP1u2sFYppINiq4jyC8F+Nm+4fVufylCV00QmkTHkSUg==
+  dependencies:
+    "@babel/code-frame" "^7.21.4"
+    error-ex "^1.3.2"
+    json-parse-even-better-errors "^3.0.0"
+    lines-and-columns "^2.0.3"
+    type-fest "^3.8.0"
+
 parse-path@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/parse-path/-/parse-path-7.0.0.tgz"
@@ -16337,6 +16856,16 @@ read-pkg@^5.1.1, read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
+read-pkg@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-8.1.0.tgz#6cf560b91d90df68bce658527e7e3eee75f7c4c7"
+  integrity sha512-PORM8AgzXeskHO/WEv312k9U03B8K9JSiWF/8N9sUuFjBa+9SF2u6K7VClzXwDXab51jCd8Nd36CNM+zR97ScQ==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.1"
+    normalize-package-data "^6.0.0"
+    parse-json "^7.0.0"
+    type-fest "^4.2.0"
+
 read@1, read@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/read/-/read-1.0.7.tgz"
@@ -17026,6 +17555,11 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
 semver@^7.1.2, semver@^7.2.1, semver@^7.3.2, semver@^7.3.6:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.4.0.tgz#8481c92feffc531ab1e012a8ffc15bdd3a0f4318"
@@ -17033,7 +17567,7 @@ semver@^7.1.2, semver@^7.2.1, semver@^7.3.2, semver@^7.3.6:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^7.5.3:
+semver@^7.5.3, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -18324,13 +18858,6 @@ tf-svelte-rx-forms@^1.0.3:
     "@types/validator" "^13.7.7"
     validator "^13.7.0"
 
-tfgrid-gql@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tfgrid-gql/-/tfgrid-gql-1.0.1.tgz#9c93c2d409badac2cec417e3719b78665617fea7"
-  integrity sha512-y3kouojhe+ky3/8ET+iCPPQcfSZgBDkzfFaY61wYM2IzmAPWV/3c1fAEhL6zbWT/7uTKZFuhyOsnmCXpxGCS4Q==
-  dependencies:
-    ts-mixer "^6.0.2"
-
 thenify-all@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
@@ -18735,7 +19262,7 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5:
+type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5, type-detect@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
@@ -18780,6 +19307,16 @@ type-fest@^2.14.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
 
+type-fest@^3.8.0:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
+  integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
+
+type-fest@^4.2.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-4.4.0.tgz#061cd10ff55664bb7174218cdf78c28c48f71c69"
+  integrity sha512-HT3RRs7sTfY22KuPQJkD/XjbTbxgP2Je5HPt6H6JEGvcjHd5Lqru75EbrP3tb4FYjNJ+DjLp+MNQTFQU0mhXNw==
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz"
@@ -18850,7 +19387,7 @@ typescript@*, typescript@^5.0.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"
   integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==
 
-"typescript@^3 || ^4", typescript@^4.0.0, typescript@^4.4.4, typescript@^4.7.4:
+"typescript@^3 || ^4", typescript@^4.0.0, typescript@^4.4.4, typescript@^4.7.4, typescript@^4.8.4, typescript@^4.9.3:
   version "4.9.5"
   resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
@@ -18870,6 +19407,11 @@ typescript@~5.1.6:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274"
   integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
 
+typescript@~5.2.0:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
+  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
+
 ufo@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.1.2.tgz#d0d9e0fa09dece0c31ffd57bd363f030a35cfe76"
@@ -18900,6 +19442,11 @@ undefsafe@^2.0.5:
   resolved "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz"
   integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
 
+undici-types@~5.26.4:
+  version "5.26.5"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -19034,6 +19581,14 @@ update-browserslist-db@^1.0.11:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-check@1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/update-check/-/update-check-1.5.2.tgz#2fe09f725c543440b3d7dabe8971f2d5caaedc28"
@@ -19236,6 +19791,18 @@ vite-node@0.34.4:
     picocolors "^1.0.0"
     vite "^3.0.0 || ^4.0.0"
 
+vite-node@0.34.6:
+  version "0.34.6"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.34.6.tgz#34d19795de1498562bf21541a58edcd106328a17"
+  integrity sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==
+  dependencies:
+    cac "^6.7.14"
+    debug "^4.3.4"
+    mlly "^1.4.0"
+    pathe "^1.1.1"
+    picocolors "^1.0.0"
+    vite "^3.0.0 || ^4.0.0 || ^5.0.0-0"
+
 vite-plugin-node-polyfills@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/vite-plugin-node-polyfills/-/vite-plugin-node-polyfills-0.7.0.tgz#004f400cfae791338c6f0a46d4ddf559c331c899"
@@ -19255,6 +19822,17 @@ vite-plugin-node-polyfills@^0.7.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+"vite@^3.0.0 || ^4.0.0 || ^5.0.0-0":
+  version "4.4.11"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.4.11.tgz#babdb055b08c69cfc4c468072a2e6c9ca62102b0"
+  integrity sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==
+  dependencies:
+    esbuild "^0.18.10"
+    postcss "^8.4.27"
+    rollup "^3.27.1"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 "vite@^3.1.0 || ^4.0.0 || ^5.0.0-0", vite@^4.4.9:
   version "4.4.9"
   resolved "https://registry.yarnpkg.com/vite/-/vite-4.4.9.tgz#1402423f1a2f8d66fd8d15e351127c7236d29d3d"
@@ -19326,6 +19904,36 @@ vitest@^0.34.2:
     vite-node "0.34.4"
     why-is-node-running "^2.2.2"
 
+vitest@^0.34.4:
+  version "0.34.6"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.34.6.tgz#44880feeeef493c04b7f795ed268f24a543250d7"
+  integrity sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==
+  dependencies:
+    "@types/chai" "^4.3.5"
+    "@types/chai-subset" "^1.3.3"
+    "@types/node" "*"
+    "@vitest/expect" "0.34.6"
+    "@vitest/runner" "0.34.6"
+    "@vitest/snapshot" "0.34.6"
+    "@vitest/spy" "0.34.6"
+    "@vitest/utils" "0.34.6"
+    acorn "^8.9.0"
+    acorn-walk "^8.2.0"
+    cac "^6.7.14"
+    chai "^4.3.10"
+    debug "^4.3.4"
+    local-pkg "^0.4.3"
+    magic-string "^0.30.1"
+    pathe "^1.1.1"
+    picocolors "^1.0.0"
+    std-env "^3.3.3"
+    strip-literal "^1.0.1"
+    tinybench "^2.5.0"
+    tinypool "^0.7.0"
+    vite "^3.1.0 || ^4.0.0 || ^5.0.0-0"
+    vite-node "0.34.6"
+    why-is-node-running "^2.2.2"
+
 vlq@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/vlq/-/vlq-2.0.4.tgz"
@@ -19365,6 +19973,11 @@ vue-chartjs@^4.1.1:
   resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-4.1.2.tgz#f899ba14f3b80660f8d2c610a015341806dfc437"
   integrity sha512-QSggYjeFv/L4jFSBQpX8NzrAvX0B+Ha6nDgxkTG8tEXxYOOTwKI4phRLe+B4f+REnkmg7hgPY24R0cixZJyXBg==
 
+vue-chartjs@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-5.2.0.tgz#3d0076ccf8016d1bf8fab5ccd837e7fb81005ded"
+  integrity sha512-d3zpKmGZr2OWHQ1xmxBcAn5ShTG917+/UCLaSpaCDDqT0U7DBsvFzTs69ZnHCgKoXT55GZDW8YEj9Av+dlONLA==
+
 vue-class-component@^7.2.3:
   version "7.2.6"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
@@ -19480,6 +20093,15 @@ vue-tsc@^1.2.0:
     "@volar/vue-typescript" "1.6.5"
     semver "^7.3.8"
 
+vue-tsc@^1.8.11:
+  version "1.8.19"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.8.19.tgz#313481444e87aa2840b02644134c2fc2f3c92ba2"
+  integrity sha512-tacMQLQ0CXAfbhRycCL5sWIy1qujXaIEtP1hIQpzHWOUuICbtTj9gJyFf91PvzG5KCNIkA5Eg7k2Fmgt28l5DQ==
+  dependencies:
+    "@vue/language-core" "1.8.19"
+    "@vue/typescript" "1.8.19"
+    semver "^7.5.4"
+
 vue-tsc@^1.8.8:
   version "1.8.11"
   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.8.11.tgz#4a972e58a9eaae72d73e63e0bedacb56391b7cb4"
@@ -19546,6 +20168,11 @@ vuetify@^3.1.15:
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.2.5.tgz#b37cb4d6decafd5be7b5c29346555d6161ea9972"
   integrity sha512-HuLIydRkigGIfqDbwEjFw5LEtWCw8lV4K1isMv/7vAt8n5fns+8kKqVnktIQkfzSxQgPD6Lve/58j4dEKA/vTA==
 
+vuetify@^3.3.21:
+  version "3.3.21"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.3.21.tgz#b5798ed092e019214bbc9d89461e203e525e02d5"
+  integrity sha512-CVC6MDC45H+IY8Nq5QO/lBhbSd/dg+IV46GKd+LIndriLoQXG+tFv31NQY++tOQgrKeZr6w2SUBMBxSZyHErfg==
+
 vuex@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"