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/models.ts b/packages/grid_client/src/modules/models.ts
index 6ff2a6a8b3..910514af54 100644
--- a/packages/grid_client/src/modules/models.ts
+++ b/packages/grid_client/src/modules/models.ts
@@ -658,6 +658,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;
 }
@@ -682,7 +727,7 @@ 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 {
@@ -812,6 +857,7 @@ export {
   ZOSNodeModel,
   NodePowerModel,
   FarmIdModel,
+  CreateFarmModel,
   pingFarmModel,
   CreateServiceContractModel,
   ServiceContractApproveModel,
@@ -828,5 +874,9 @@ export {
   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 af4631d976..3ee892c8c6 100644
--- a/packages/grid_client/src/modules/nodes.ts
+++ b/packages/grid_client/src/modules/nodes.ts
@@ -4,6 +4,7 @@ import { events, validateInput } from "../helpers";
 import { expose } from "../helpers/expose";
 import { capacity } from "./capacity";
 import {
+  AddPublicConfig,
   FilterOptions,
   NodeGetModel,
   NodePowerModel,
@@ -82,6 +83,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/playground/package.json b/packages/playground/package.json
index 2041414ee9..9c1d9c6444 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -31,6 +31,7 @@
     "vue-router": "^4.1.6",
     "vuetify": "^3.1.15",
     "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"
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index f080b6cd85..812de826a3 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -155,7 +155,7 @@
               <router-view v-slot="{ Component }">
                 <transition name="fade">
                   <div :key="$route.path">
-                    <component :is="Component" v-if="hasActiveProfile"></component>
+                    <component :is="Component" v-if="hasActiveProfile && hasGrid"></component>
                     <ConnectWalletLanding @openProfile="openProfile = true" v-else />
                   </div>
                 </transition>
@@ -179,6 +179,7 @@ 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);
@@ -186,6 +187,7 @@ const hasActiveProfile = computed(() => !!profileManager.profile);
 const theme = useTheme();
 const navbarConfig = ref();
 
+const hasGrid = computed(() => !!gridStore.grid);
 watch(
   () => $route.meta,
   meta => {
@@ -373,6 +375,7 @@ 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 {
@@ -404,125 +407,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" global>
-: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;
-}
-</style>
diff --git a/packages/playground/src/components/dashboard/portal/NodeMintingDetails.vue b/packages/playground/src/components/dashboard/portal/NodeMintingDetails.vue
new file mode 100644
index 0000000000..7db8921b0f
--- /dev/null
+++ b/packages/playground/src/components/dashboard/portal/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/components/dashboard/portal/add_ip.vue b/packages/playground/src/components/dashboard/portal/add_ip.vue
new file mode 100644
index 0000000000..5a4b806fdf
--- /dev/null
+++ b/packages/playground/src/components/dashboard/portal/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/components/dashboard/portal/create_farm.vue b/packages/playground/src/components/dashboard/portal/create_farm.vue
new file mode 100644
index 0000000000..57586b2ea6
--- /dev/null
+++ b/packages/playground/src/components/dashboard/portal/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/components/dashboard/portal/public_config.vue b/packages/playground/src/components/dashboard/portal/public_config.vue
new file mode 100644
index 0000000000..6fbf28bc84
--- /dev/null
+++ b/packages/playground/src/components/dashboard/portal/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/components/dashboard/portal/public_ips_table.vue b/packages/playground/src/components/dashboard/portal/public_ips_table.vue
new file mode 100644
index 0000000000..4c8452e270
--- /dev/null
+++ b/packages/playground/src/components/dashboard/portal/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/components/dashboard/portal/set_extra_fee.vue b/packages/playground/src/components/dashboard/portal/set_extra_fee.vue
new file mode 100644
index 0000000000..f0e166786d
--- /dev/null
+++ b/packages/playground/src/components/dashboard/portal/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/components/dashboard/portal/user_farms.vue b/packages/playground/src/components/dashboard/portal/user_farms.vue
new file mode 100644
index 0000000000..218e21a839
--- /dev/null
+++ b/packages/playground/src/components/dashboard/portal/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 "@/explorer/components/node_details_cards/card_details.vue";
+import {
+  generateNodeSummary,
+  generateReceipt,
+  getNodeAvailability,
+  getNodeMintingFixupReceipts,
+  type NodeInterface,
+} from "@/utils/node";
+
+import { useGrid, useProfileManager } from "../../../stores";
+import { createCustomToast, ToastType } from "../../../utils/custom_toast";
+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/components/dashboard/portal/user_nodes.vue b/packages/playground/src/components/dashboard/portal/user_nodes.vue
new file mode 100644
index 0000000000..16c384dc27
--- /dev/null
+++ b/packages/playground/src/components/dashboard/portal/user_nodes.vue
@@ -0,0 +1,331 @@
+<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 CardDetails from "@/explorer/components/node_details_cards/card_details.vue";
+import { getNodeStatusColor } from "@/explorer/utils/helpers";
+import type { NodeDetailsCard } from "@/explorer/utils/types";
+import {
+  getNodeAvailability,
+  getNodeMintingFixupReceipts,
+  getNodeUptimePercentage,
+  type NodeInterface,
+} from "@/utils/node";
+
+import { gridProxyClient } from "../../../clients";
+import { useProfileManager } from "../../../stores";
+import { createCustomToast, ToastType } from "../../../utils/custom_toast";
+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(async () => {
+      const nodes = await getUserNodes();
+      if (nodes) {
+        await Promise.all(
+          nodes.map(async (n, _) => {
+            n.uptime = +(await getNodeUptimePercentage(n.nodeId));
+            return n.uptime;
+          }),
+        );
+      }
+    });
+
+    const 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 });
+        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);
+          } catch (error) {
+            node.receipts = [];
+            node.used_resources = {
+              sru: 0,
+              hru: 0,
+              mru: 0,
+              cru: 0,
+            };
+            node.availability = { downtime: 0, currentPeriod: 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/explorer/components/node_details.vue b/packages/playground/src/explorer/components/node_details.vue
index 5c8e59171f..3b96bd5ea2 100644
--- a/packages/playground/src/explorer/components/node_details.vue
+++ b/packages/playground/src/explorer/components/node_details.vue
@@ -170,7 +170,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .v-list-item__prepend > .v-icon,
 .v-list-item__append > .v-icon {
   opacity: 1 !important;
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/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/portal/farms_view.vue b/packages/playground/src/portal/farms_view.vue
new file mode 100644
index 0000000000..7e1bab43bc
--- /dev/null
+++ b/packages/playground/src/portal/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/dashboard/portal/create_farm.vue";
+import UserFarms from "../components/dashboard/portal/user_farms.vue";
+import UserNodes from "../components/dashboard/portal/user_nodes.vue";
+
+export default {
+  name: "PortalFarms",
+  components: {
+    UserNodes,
+    UserFarms,
+    CreateFarm,
+  },
+  setup() {
+    const name = ref<string>("");
+    const userFarms = ref();
+    return {
+      name,
+      userFarms,
+    };
+  },
+};
+</script>
diff --git a/packages/playground/src/router/index.ts b/packages/playground/src/router/index.ts
index 20722b66e3..49da14db63 100644
--- a/packages/playground/src/router/index.ts
+++ b/packages/playground/src/router/index.ts
@@ -42,6 +42,11 @@ const router = createRouter({
           component: () => import("../portal/transfer_view.vue"),
           meta: { title: "Transfer" },
         },
+        {
+          path: "farms",
+          component: () => import("../portal/farms_view.vue"),
+          meta: { title: "Farms" },
+        },
         {
           path: "dedicated-nodes",
           component: () => import("../portal/dedicated_nodes_view.vue"),
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 ecab50cf82..8bb993379e 100644
--- a/packages/playground/src/stores/profile_manager.ts
+++ b/packages/playground/src/stores/profile_manager.ts
@@ -1,5 +1,7 @@
 import { defineStore } from "pinia";
 
+import { useGrid } from "./grid";
+
 export interface Profile {
   mnemonic: string;
   ssh: string;
@@ -21,6 +23,7 @@ const useProfileManager = defineStore("profile-manager", {
   actions: {
     set(profile: Profile | null) {
       this.profile = profile;
+      useGrid().set(profile);
     },
     updateSSH(ssh: string) {
       if (this.profile) {
diff --git a/packages/playground/src/utils/mintings.ts b/packages/playground/src/utils/mintings.ts
index f27645e916..28ac7be85e 100644
--- a/packages/playground/src/utils/mintings.ts
+++ b/packages/playground/src/utils/mintings.ts
@@ -1,20 +1,20 @@
-interface Period {
+export interface Period {
   start: number;
   end: number;
 }
 
-interface CloudUnits {
+export interface CloudUnits {
   cu: number;
   su: number;
   nu: number;
 }
 
-interface Reward {
+export interface Reward {
   tft: number;
   musd: number;
 }
 
-interface ResourcesUnits {
+export interface ResourcesUnits {
   cru: number;
   mru: number;
   hru: number;
@@ -27,7 +27,7 @@ export interface Receipt {
   stellar_payout_address: string;
 }
 
-interface Minting extends Receipt {
+export interface Minting extends Receipt {
   cloud_units: CloudUnits;
   farm_name: string;
   measured_uptime: number;
@@ -37,7 +37,7 @@ interface Minting extends Receipt {
   tft_connection_price: number;
 }
 
-interface Fixup extends Receipt {
+export interface Fixup extends Receipt {
   correct_cloud_units: CloudUnits;
   correct_reward: Reward;
   fixup_cloud_units: CloudUnits;
diff --git a/packages/playground/src/utils/node.ts b/packages/playground/src/utils/node.ts
new file mode 100644
index 0000000000..f5e739d1ea
--- /dev/null
+++ b/packages/playground/src/utils/node.ts
@@ -0,0 +1,323 @@
+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 async function getNodeUptimePercentage(nodeId: number) {
+  const availability = await getNodeAvailability(nodeId);
+  return (((availability?.currentPeriod - availability?.downtime) / availability?.currentPeriod) * 100).toFixed(2);
+}
+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/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/tfchain_client/src/client.ts b/packages/tfchain_client/src/client.ts
index 6e8d91649c..bc5885d981 100644
--- a/packages/tfchain_client/src/client.ts
+++ b/packages/tfchain_client/src/client.ts
@@ -12,7 +12,7 @@ import { validateMnemonic } from "bip39";
 import { Balances, QueryBalances } from "./balances";
 import { Contracts, QueryContracts } from "./contracts";
 import { Dao, QueryDao } from "./dao";
-import { QueryFarms } from "./farms";
+import { Farms, QueryFarms } from "./farms";
 import { KVStore } from "./kvstore";
 import { Nodes, QueryNodes } from "./nodes";
 import { QueryPricingPolicies } from "./pricing_policies";
@@ -230,6 +230,7 @@ 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;
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/nodes.ts b/packages/tfchain_client/src/nodes.ts
index ca0cb88113..82612e04bf 100644
--- a/packages/tfchain_client/src/nodes.ts
+++ b/packages/tfchain_client/src/nodes.ts
@@ -53,6 +53,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;
 }
@@ -93,6 +108,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 };