diff --git a/packages/grid_client/scripts/applications/nostr.ts b/packages/grid_client/scripts/applications/nostr.ts
new file mode 100644
index 0000000000..16b8089a95
--- /dev/null
+++ b/packages/grid_client/scripts/applications/nostr.ts
@@ -0,0 +1,139 @@
+import { Features, FilterOptions, GatewayNameModel, GridClient, MachinesModel, NodeInfo } from "../../src";
+import { config, getClient } from "../client_loader";
+import { log, pingNodes } from "../utils";
+
+async function deploy(client: GridClient, vms: MachinesModel, subdomain: string, gatewayNode: NodeInfo) {
+  // Deploy VM
+  const resultVM = await client.machines.deploy(vms);
+  log("================= Deploying VM =================");
+  log(resultVM);
+  log("================= Deploying VM =================");
+
+  // Get WG interface details
+  const wgnet = (await client.machines.getObj(vms.name))[0].interfaces[0];
+
+  // Deploy Gateway
+  const gateway: GatewayNameModel = {
+    name: subdomain,
+    network: wgnet.network,
+    node_id: gatewayNode.nodeId,
+    tls_passthrough: false,
+    backends: [`http://${wgnet.ip}:8080`],
+  };
+
+  const resultGateway = await client.gateway.deploy_name(gateway);
+  log("================= Deploying Gateway =================");
+  log(resultGateway);
+  log("================= Deploying Gateway =================");
+}
+
+async function getDeployment(client: GridClient, name: string, subdomain: string) {
+  // Get VM deployment
+  const resultVM = await client.machines.getObj(name);
+  log("================= Getting VM Deployment =================");
+  log(resultVM);
+  log("================= Getting VM Deployment =================");
+
+  // Get Gateway deployment
+  const resultGateway = await client.gateway.getObj(subdomain);
+  log("================= Getting Gateway Deployment =================");
+  log(resultGateway);
+  log(`https://${resultGateway[0].domain}`);
+  log("================= Getting Gateway Deployment =================");
+}
+
+async function cancel(client: GridClient, name: string, subdomain: string) {
+  // Cancel VM deployment
+  const resultVM = await client.machines.delete({ name });
+  log("================= Canceling VM Deployment =================");
+  log(resultVM);
+  log("================= Canceling VM Deployment =================");
+
+  // Cancel Gateway deployment
+  const resultGateway = await client.gateway.delete_name({ name: subdomain });
+  log("================= Canceling Gateway Deployment =================");
+  log(resultGateway);
+  log("================= Canceling Gateway Deployment =================");
+}
+
+async function main() {
+  const name = "newnostr1";
+  const grid3 = await getClient(`nostr/${name}`);
+  const subdomain = `ntt${grid3.twinId}${name}`;
+  const instanceCapacity = { cru: 2, mru: 4, sru: 50 };
+
+  // VM Query Options
+  const vmQueryOptions: FilterOptions = {
+    features: [Features.wireguard, Features.mycelium],
+    cru: instanceCapacity.cru,
+    mru: instanceCapacity.mru,
+    sru: instanceCapacity.sru,
+    availableFor: grid3.twinId,
+    farmId: 1,
+  };
+
+  // Gateway Query Options
+  const gatewayQueryOptions: FilterOptions = {
+    features: [Features.wireguard, Features.mycelium],
+    gateway: true,
+    availableFor: grid3.twinId,
+  };
+
+  const gatewayNodes = await grid3.capacity.filterNodes(gatewayQueryOptions);
+  const gatewayNodeId = await pingNodes(grid3, gatewayNodes);
+  const gatewayNode = gatewayNodes.find(node => node.nodeId == gatewayNodeId);
+  const nodes = await grid3.capacity.filterNodes(vmQueryOptions);
+  const vmNode = await pingNodes(grid3, nodes);
+  const domain = `${subdomain}.${gatewayNode!.publicConfig.domain}`;
+
+  const vms: MachinesModel = {
+    name,
+    network: {
+      name: "nostrnet",
+      ip_range: "10.252.0.0/16",
+      addAccess: true,
+      accessNodeId: gatewayNode!.nodeId,
+    },
+    machines: [
+      {
+        name: "nostr",
+        node_id: vmNode,
+        disks: [
+          {
+            name: "nsDisk",
+            size: instanceCapacity.sru,
+            mountpoint: "/mnt/data",
+          },
+        ],
+        planetary: true,
+        public_ip: false,
+        public_ip6: false,
+        mycelium: true,
+        cpu: instanceCapacity.cru,
+        memory: 1024 * instanceCapacity.mru,
+        rootfs_size: 0,
+        flist: "https://hub.grid.tf/tf-official-apps/nostr_relay-mycelium.flist",
+        entrypoint: "/sbin/zinit init",
+        env: {
+          SSH_KEY: config.ssh_key,
+          NOSTR_HOSTNAME: domain,
+        },
+      },
+    ],
+    metadata: "",
+    description: "Deploying Nostr instance via TS Grid3 client",
+  };
+
+  // Deploy VM and Gateway
+  await deploy(grid3, vms, subdomain, gatewayNode!);
+
+  // Get the deployment details
+  await getDeployment(grid3, name, subdomain);
+
+  // Uncomment the line below to cancel the deployment
+  // await cancel(grid3, name, subdomain);
+
+  await grid3.disconnect();
+}
+
+main();
diff --git a/packages/grid_client/src/clients/tf-grid/contracts.ts b/packages/grid_client/src/clients/tf-grid/contracts.ts
index 715eaa07af..3d599e3773 100644
--- a/packages/grid_client/src/clients/tf-grid/contracts.ts
+++ b/packages/grid_client/src/clients/tf-grid/contracts.ts
@@ -109,6 +109,10 @@ export interface GetConsumptionOptions {
   graphqlURL: string;
   id: number;
 }
+export interface Consumption {
+  amountBilled: number;
+  discountReceived: DiscountLevel;
+}
 
 export interface GetDiscountPackageOptions {
   graphqlURL: string;
@@ -268,7 +272,7 @@ class TFContracts extends Contracts {
     const gqlClient = new Graphql(options.graphqlURL);
 
     const body = `query getConsumption($contractId: BigInt!){
-            contractBillReports(where: {contractID_eq: $contractId} , orderBy: timestamp_DESC) {
+            contractBillReports(where: {contractID_eq: $contractId} , orderBy: timestamp_DESC, limit:1) {
                 discountReceived
 
             }
@@ -282,7 +286,7 @@ class TFContracts extends Contracts {
       if (billReports.length === 0) {
         return "None";
       } else {
-        const discountPackage = billReports[billReports.length - 1].discountReceived;
+        const discountPackage = billReports[0].discountReceived;
         return discountPackage;
       }
     } catch (err) {
@@ -291,17 +295,19 @@ class TFContracts extends Contracts {
     }
   }
   /**
-   * Get contract consumption per hour in TFT.
+   *  Get the contract consumption details per hour in TFT.
    *
    * @param  {GetConsumptionOptions} options
-   * @returns {Promise<number>}
+   * @returns {Promise<Consumption>} A promise resolving to the consumption details,
+   * including the amount billed and the discount received.
    */
-  async getConsumption(options: GetConsumptionOptions): Promise<number> {
+  async getConsumption(options: GetConsumptionOptions): Promise<Consumption> {
     const gqlClient = new Graphql(options.graphqlURL);
     const body = `query getConsumption($contractId: BigInt!){
             contractBillReports(where: {contractID_eq: $contractId}, limit: 2 , orderBy: timestamp_DESC) {
                 amountBilled
                 timestamp
+                discountReceived
             }
             nodeContracts(where: {contractID_eq: $contractId}) {
                 createdAt
@@ -318,7 +324,10 @@ class TFContracts extends Contracts {
       const gqlConsumption: GqlConsumption = response["data"] as GqlConsumption;
       const billReports = gqlConsumption.contractBillReports;
       if (billReports.length === 0) {
-        return 0;
+        return {
+          amountBilled: 0,
+          discountReceived: "None",
+        };
       } else {
         let duration = 1;
         const amountBilled = new Decimal(billReports[0].amountBilled);
@@ -338,10 +347,13 @@ class TFContracts extends Contracts {
             }
           }
         }
-        return amountBilled
-          .div(duration || 1)
-          .div(10 ** 7)
-          .toNumber();
+        return {
+          amountBilled: amountBilled
+            .div(duration || 1)
+            .div(10 ** 7)
+            .toNumber(),
+          discountReceived: billReports[0].discountReceived,
+        };
       }
     } catch (err) {
       (err as Error).message = formatErrorMessage(`Error getting consumption for contract ${options.id}.`, err);
diff --git a/packages/grid_client/src/modules/contracts.ts b/packages/grid_client/src/modules/contracts.ts
index 1dca479e2f..2728b55e7b 100644
--- a/packages/grid_client/src/modules/contracts.ts
+++ b/packages/grid_client/src/modules/contracts.ts
@@ -10,6 +10,7 @@ import { GridClientError } from "@threefold/types";
 import * as PATH from "path";
 
 import {
+  Consumption,
   ContractsOverdue,
   type DiscountLevel,
   GqlContracts,
@@ -539,17 +540,18 @@ class Contracts {
     return this.client.contracts.getDiscountPackage({ id: options.id, graphqlURL: this.config.graphqlURL });
   }
   /**
-   * Get contract consumption per hour in TFT.
+   * Get the contract consumption details per hour in TFT.
    *
-   * @param  {ContractConsumption} options
-   * @returns {Promise<number>}
+   * @param  {ContractConsumption} options - The contract consumption parameters.
+   * @returns {Promise<Consumption>} A promise resolving to the consumption details,
+   * including the amount billed and the discount received.
    * @decorators
    * - `@expose`: Exposes the method for external use.
    * - `@validateInput`: Validates the input options.
    */
   @expose
   @validateInput
-  async getConsumption(options: ContractConsumption): Promise<number> {
+  async getConsumption(options: ContractConsumption): Promise<Consumption> {
     return this.client.contracts.getConsumption({ id: options.id, graphqlURL: this.config.graphqlURL });
   }
 
diff --git a/packages/grid_client/src/modules/models.ts b/packages/grid_client/src/modules/models.ts
index 5be3172bb1..9f4f6c7525 100644
--- a/packages/grid_client/src/modules/models.ts
+++ b/packages/grid_client/src/modules/models.ts
@@ -624,6 +624,7 @@ class FilterOptions {
   @Expose() @IsOptional() @IsInt({ each: true }) @Min(1, { each: true }) nodeExclude?: number[];
   @Expose() @IsOptional() @IsInt({ each: true }) @Min(1, { each: true }) farmIds?: number[];
   @Expose() @IsOptional() @IsInt() @Min(1) farmId?: number;
+  @Expose() @IsOptional() @IsInt() @Min(1) nodeId?: number;
   @Expose() @IsOptional() @IsString() farmName?: string;
   @Expose() @IsOptional() @IsString() country?: string;
   @Expose() @IsOptional() @IsString() city?: string;
diff --git a/packages/grid_client/src/primitives/nodes.ts b/packages/grid_client/src/primitives/nodes.ts
index ebc4c4ead8..7efbb1cf95 100644
--- a/packages/grid_client/src/primitives/nodes.ts
+++ b/packages/grid_client/src/primitives/nodes.ts
@@ -466,6 +466,7 @@ class Nodes {
       healthy: options.healthy,
       sort_by: SortBy.FreeCRU,
       sort_order: SortOrder.Desc,
+      node_id: options.nodeId,
       rentable_or_rented_by: options.rentableOrRentedBy,
       features: options.features,
     };
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index b4eac015bf..193a59d245 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -89,41 +89,6 @@
 
         <div v-if="gatewayTab === 1">
           <form-validator v-model="valid">
-            <input-tooltip tooltip="Selecting custom domain sets subdomain as gateway name.">
-              <input-validator
-                :value="subdomain"
-                :rules="subdomainRules"
-                :async-rules="gatewayTab === 1 ? [validateSubdomain] : []"
-                #="{ props }"
-              >
-                <v-text-field label="Subdomain" v-model.trim="subdomain" v-bind="props" />
-              </input-validator>
-            </input-tooltip>
-
-            <div :style="{ marginTop: '-10px' }">
-              <TfSelectionDetails disable-node-selection require-domain use-fqdn v-model="selectionDetails" />
-            </div>
-
-            <input-validator :value="port" :rules="portRules" #="{ props }">
-              <v-text-field label="Port" v-model.number="port" type="number" v-bind="props" />
-            </input-validator>
-
-            <div :style="{ marginTop: '-10px' }">
-              <input-tooltip
-                tooltip="When enabled, the backend service will terminate the TLS traffic, otherwise the gateway service will do the TLS traffic termination."
-                inline
-              >
-                <v-switch
-                  label="TLS Passthrough"
-                  hide-details
-                  inset
-                  variant="tonal"
-                  color="primary"
-                  v-model="passThrough"
-                />
-              </input-tooltip>
-            </div>
-
             <v-select
               label="Select node"
               class="mt-4"
@@ -131,14 +96,54 @@
               v-model="selectedK8SNodeName"
               v-if="k8s"
             />
-            <v-select label="Supported Interfaces" class="mt-4" :items="networks" v-model="selectedIPAddress" />
-            <copy-input-wrapper #="{ props }" :data="(selectedIPAddress as any)">
-              <v-text-field :readonly="true" label="Selected IP Address" v-model="selectedIPAddress" v-bind="props" />
-            </copy-input-wrapper>
+
+            <v-select label="Supported Interfaces" :items="networks" v-model="selectedIPAddress" />
 
             <copy-input-wrapper #="{ props }" :data="networkName" v-if="isWireGuard">
               <v-text-field label="Network name" v-model="networkName" readonly v-bind="props" />
             </copy-input-wrapper>
+
+            <copy-input-wrapper #="{ props }" :data="(selectedIPAddress as any)">
+              <v-text-field :readonly="true" label="Selected IP Address" v-model="selectedIPAddress" v-bind="props" />
+            </copy-input-wrapper>
+
+            <input-validator :value="port" :rules="portRules" #="{ props }">
+              <v-text-field label="Port" v-model.number="port" type="number" v-bind="props" />
+            </input-validator>
+            <input-tooltip
+              tooltip="When enabled, the backend service will terminate the TLS traffic, otherwise the gateway service will do the TLS traffic termination."
+              :align-center="true"
+            >
+              <v-switch
+                label="TLS Passthrough"
+                hide-details
+                inset
+                density="compact"
+                variant="tonal"
+                color="primary"
+                v-model="passThrough"
+              />
+            </input-tooltip>
+            <div style="margin-top: -15px">
+              <TfSelectionDetails
+                :align-center="true"
+                disable-node-selection
+                require-domain
+                use-fqdn
+                :interfaces="interfaceFeature"
+                v-model="selectionDetails"
+              />
+            </div>
+            <input-tooltip tooltip="Selecting custom domain sets subdomain as gateway name.">
+              <input-validator
+                :value="subdomain"
+                :rules="subdomainRules"
+                :async-rules="gatewayTab === 1 ? [validateSubdomain] : []"
+                #="{ props }"
+              >
+                <v-text-field label="Subdomain" v-model.trim="subdomain" v-bind="props" />
+              </input-validator>
+            </input-tooltip>
           </form-validator>
         </div>
 
@@ -187,12 +192,12 @@
 </template>
 
 <script lang="ts">
-import { type GridClient, WorkloadTypes, type ZmachineData } from "@threefold/grid_client";
-import { onMounted, type PropType, ref, watch } from "vue";
+import { Features, type GridClient, WorkloadTypes, type ZmachineData } from "@threefold/grid_client";
+import { computed, onMounted, type PropType, ref, watch } from "vue";
 
 import { useGrid } from "../stores";
 import { ProjectName } from "../types";
-import type { SelectionDetails } from "../types/nodeSelector";
+import type { NetworkFeatures, SelectionDetails } from "../types/nodeSelector";
 import {
   type DeployGatewayConfig,
   deployGatewayName,
@@ -245,7 +250,7 @@ export default {
     const valid = ref(false);
     const selectionDetails = ref<SelectionDetails>();
     const networks = ref<VMNetwork[]>([]);
-    const selectedIPAddress = ref<VMNetwork | null>(null);
+    const selectedIPAddress = ref<string>();
     const networkName = props.vm
       ? (props.vm.interfaces[0].network as string)
       : (props.k8s?.masters[0].interfaces[0].network as string);
@@ -263,6 +268,21 @@ export default {
     const availableK8SNodesNames = availableK8SNodes.map(node => node.name);
     const selectedK8SNodeName = ref(availableK8SNodesNames[0]);
     const selectedNode = ref();
+    const interfaceFeature = computed<NetworkFeatures[]>(() => {
+      const net = networks.value.find(net => net.value == selectedIPAddress.value);
+      switch (net?.title) {
+        case NetworkInterfaces.PublicIPV6:
+          return [Features.ip];
+        case NetworkInterfaces.Planetary:
+          return [Features.yggdrasil];
+        case NetworkInterfaces.Mycelium:
+          return [Features.mycelium];
+        case NetworkInterfaces.WireGuard:
+          return [Features.wireguard];
+        default:
+          return [];
+      }
+    });
     const errorMessage = ref("");
 
     watch(selectedK8SNodeName, getSupportedNetworks, { deep: true });
@@ -346,7 +366,7 @@ export default {
     async function deployGateway() {
       layout.value.setStatus("deploy");
       try {
-        const IP = selectedIPAddress.value as unknown as string;
+        const IP = selectedIPAddress.value as string;
 
         const gwConfig: DeployGatewayConfig = {
           subdomain: subdomain.value,
@@ -425,18 +445,14 @@ export default {
       if (selectedNode.value.type === WorkloadTypes.zmachinelight) {
         addNetwork(NetworkInterfaces.Mycelium, myceliumIP);
       }
-      selectedIPAddress.value = networks.value[0];
+      selectedIPAddress.value = networks.value[0].value;
     }
 
     watch(
       selectedIPAddress,
       () => {
-        if (selectedIPAddress.value?.value) {
-          selectedIPAddress.value = selectedIPAddress.value.value as unknown as VMNetwork;
-        }
-
-        const IP = selectedIPAddress.value as unknown as string;
-        isWireGuard.value = networks.value.find(net => net.value === IP)?.title === NetworkInterfaces.WireGuard;
+        isWireGuard.value =
+          networks.value.find(net => net.value === selectedIPAddress.value)?.title === NetworkInterfaces.WireGuard;
       },
       { deep: true },
     );
@@ -498,6 +514,7 @@ export default {
       networkName,
       loadingGateways,
       gateways,
+      interfaceFeature,
       failedToListGws,
       failedDomainDialog,
       requestDelete,
diff --git a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
index b126f10e3a..66f310c773 100644
--- a/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
+++ b/packages/playground/src/components/node_selector/TfAutoNodeSelector.vue
@@ -43,7 +43,6 @@
 
             <VAlert v-else type="error" text="No Nodes were found!" />
           </VContainer>
-
           <div
             ref="nodesContainer"
             :style="{
@@ -61,6 +60,7 @@
                   v-model:node="loadedNodes[index]"
                   :selected="!validFilters || filtersUpdated ? false : $props.modelValue === node"
                   selectable
+                  @update:node="updateNode($event as NodeInfo)"
                   @node:select="bindModelValueAndValidate"
                   :status="
                     $props.modelValue === node
@@ -217,7 +217,10 @@ export default {
       },
       default: [],
     });
-
+    function updateNode(node: NodeInfo) {
+      _loadedNodes.value = loadedNodes.value.map(n => (n.nodeId === node.nodeId ? node : n));
+      _setValidNode(node.nodeId);
+    }
     async function _setValidNode(oldNodeId?: number) {
       const node = await selectValidNode(
         gridStore,
@@ -395,7 +398,7 @@ export default {
       loadingError,
       filtersUpdated,
       nodeInputValidateTask,
-
+      updateNode,
       touched,
       bindModelValueAndValidate,
       bindStatus,
diff --git a/packages/playground/src/components/node_selector/TfDomainName.vue b/packages/playground/src/components/node_selector/TfDomainName.vue
index c462fb0c81..d7c225ed0e 100644
--- a/packages/playground/src/components/node_selector/TfDomainName.vue
+++ b/packages/playground/src/components/node_selector/TfDomainName.vue
@@ -2,7 +2,7 @@
   <section>
     <h6 class="text-h5 mb-4 mt-2" v-if="!hideTitle">Domain Name</h6>
 
-    <input-tooltip tooltip="Use a custom domain">
+    <input-tooltip tooltip="Use a custom domain" align-center>
       <div>
         <VSwitch color="primary" inset label="Custom Domain" v-model="enableCustomDomain" hide-details />
       </div>
@@ -94,7 +94,7 @@
 </template>
 
 <script lang="ts">
-import type { FarmInfo, FilterOptions, NodeInfo } from "@threefold/grid_client";
+import { type FarmInfo, Features, type FilterOptions, type NodeInfo } from "@threefold/grid_client";
 import { noop } from "lodash";
 import { computed, getCurrentInstance, nextTick, onUnmounted, type PropType, ref, watch } from "vue";
 import { onMounted } from "vue";
@@ -106,7 +106,7 @@ import type { InputValidatorService } from "@/hooks/input_validator";
 import { useAsync, usePagination, useWatchDeep } from "../../hooks";
 import { useForm, ValidatorStatus } from "../../hooks/form_validator";
 import { useGrid } from "../../stores";
-import type { DomainInfo, SelectionDetailsFilters } from "../../types/nodeSelector";
+import type { DomainInfo, NetworkFeatures, SelectionDetailsFilters } from "../../types/nodeSelector";
 import { getNodePageCount, loadNodes } from "../../utils/nodeSelector";
 
 export default {
@@ -121,6 +121,11 @@ export default {
     hideTitle: Boolean,
     status: String as PropType<ValidatorStatus>,
     useFqdn: Boolean,
+    interfaces: {
+      type: Array as PropType<NetworkFeatures[]>,
+      required: false,
+      default: () => [],
+    },
   },
   emits: {
     "update:model-value": (domain?: DomainInfo) => true || domain,
@@ -148,6 +153,8 @@ export default {
       page: Math.max(1, pagination.value.page),
       farmId: enableCustomDomain.value ? props.farm?.farmId : undefined,
       availableFor: gridStore.client?.twinId,
+      features: props.interfaces.filter(i => i != Features.ip),
+      hasIPv6: props.interfaces.some(i => i === Features.ip) || undefined,
     }));
     const selectedDomain = ref<NodeInfo | null>(null);
     const loadDomains = () => domainsTask.value.run(gridStore, filters.value);
diff --git a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
index 52bebcc3e8..65c8a57cdd 100644
--- a/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
+++ b/packages/playground/src/components/node_selector/TfNodeDetailsCard.vue
@@ -284,7 +284,7 @@
           v-if="node?.dedicated && node?.status !== 'down'"
           class="ml-4"
           :node="(node as GridNode)"
-          @updateTable="onReserveChange"
+          @update:node="$emit('update:node', $event as NodeInfo)"
         />
       </div>
     </template>
@@ -506,25 +506,6 @@ export default {
       }
     }
 
-    function onReserveChange() {
-      if (!props.node) {
-        return;
-      }
-
-      const n = { ...props.node } as NodeInfo | GridNode;
-      const gotReserved = n.rentedByTwinId === 0;
-
-      if (gotReserved) {
-        n.rentedByTwinId = profileManager.profile!.twinId;
-        n.rented = true;
-      } else {
-        n.rentedByTwinId = 0;
-        n.rented = false;
-      }
-      n.rentable = !n.rented;
-      ctx.emit("update:node", n);
-    }
-
     function getNodeStatusColor(status: string): string {
       if (status === "up") {
         return "success";
@@ -635,7 +616,6 @@ export default {
       capitalize,
       formatResourceSize,
       formatSpeed,
-      onReserveChange,
       getNodeStatusColor,
       validateRentContract,
       discountTableItems,
diff --git a/packages/playground/src/components/node_selector/TfSelectionDetails.vue b/packages/playground/src/components/node_selector/TfSelectionDetails.vue
index c9b31c919a..93bf36ac04 100644
--- a/packages/playground/src/components/node_selector/TfSelectionDetails.vue
+++ b/packages/playground/src/components/node_selector/TfSelectionDetails.vue
@@ -67,13 +67,14 @@
         v-model:status="domainStatus"
         :use-fqdn="$props.useFqdn"
         v-if="requireDomain"
+        :interfaces="domainNameInterfaces"
       />
     </VExpandTransition>
   </section>
 </template>
 
 <script lang="ts">
-import type { FarmInfo, GPUCardInfo, NodeInfo } from "@threefold/grid_client";
+import { type FarmInfo, Features, type GPUCardInfo, type NodeInfo } from "@threefold/grid_client";
 import { type Farm, NodeStatus } from "@threefold/gridproxy_client";
 import type AwaitLock from "await-lock";
 import noop from "lodash/fp/noop.js";
@@ -86,6 +87,7 @@ import { useForm, ValidatorStatus } from "../../hooks/form_validator";
 import type { InputValidatorService } from "../../hooks/input_validator";
 import type {
   DomainInfo,
+  NetworkFeatures,
   SelectedLocation,
   SelectedMachine,
   SelectionDetails,
@@ -121,6 +123,10 @@ export default {
       type: Array as PropType<SelectedMachine[]>,
       default: () => [],
     },
+    interfaces: {
+      type: Array as PropType<NetworkFeatures[]>,
+      default: () => [],
+    },
     nodesLock: Object as PropType<AwaitLock>,
   },
   emits: {
@@ -145,6 +151,14 @@ export default {
     const domain = ref<DomainInfo>();
     const domainStatus = ref<ValidatorStatus>();
 
+    const domainNameInterfaces = computed((): NetworkFeatures[] => {
+      if (props.interfaces.length === 0) {
+        const interfaces: NetworkFeatures[] = [];
+        if (props.filters.wireguard) interfaces.push(Features.wireguard);
+        // only wireguard needed for now; we may add some other interfaces in the future
+        return interfaces;
+      } else return props.interfaces;
+    });
     const loadedFarms = new Map<number, Farm>();
     async function loadFarm(farmId: number) {
       if (loadedFarms.has(farmId)) {
@@ -254,6 +268,7 @@ export default {
       domain,
       domainStatus,
       selectionDetails,
+      domainNameInterfaces,
       NodeStatus,
       loadFarm,
       getFarm,
diff --git a/packages/playground/src/dashboard/components/reserve_action_btn.vue b/packages/playground/src/dashboard/components/reserve_action_btn.vue
index 6eabd839d3..74eb288349 100644
--- a/packages/playground/src/dashboard/components/reserve_action_btn.vue
+++ b/packages/playground/src/dashboard/components/reserve_action_btn.vue
@@ -99,7 +99,13 @@ export default {
     function removeReserve() {
       openUnreserveDialog.value = true;
     }
-
+    async function postActionHandler() {
+      notifyDelaying();
+      disableButton.value = true;
+      await new Promise(resolve => setTimeout(resolve, 20000));
+      const node = await gridStore.client.capacity.filterNodes({ nodeId: +props.node.nodeId });
+      emit("update:node", node[0]);
+    }
     async function unReserveNode() {
       loadingUnreserveNode.value = true;
       try {
@@ -118,13 +124,7 @@ export default {
           loadingUnreserveNode.value = false;
           openUnreserveDialog.value = false;
           loadingUnreserveBtn.value = true;
-          notifyDelaying();
-          disableButton.value = true;
-          setTimeout(() => {
-            disableButton.value = false;
-            loadingUnreserveBtn.value = false;
-            emit("updateTable");
-          }, 20000);
+          await postActionHandler();
         }
       } catch (e) {
         if (e instanceof InsufficientBalanceError) {
@@ -135,6 +135,9 @@ export default {
         }
         loadingUnreserveNode.value = false;
         openUnreserveDialog.value = false;
+      } finally {
+        disableButton.value = false;
+        loadingUnreserveNode.value = false;
       }
     }
 
@@ -148,13 +151,7 @@ export default {
           if (props.node.status === "standby") {
             createCustomToast(`It might take a while for node ${props.node.nodeId} status to be up`, ToastType.warning);
           }
-          notifyDelaying();
-          disableButton.value = true;
-          setTimeout(() => {
-            disableButton.value = false;
-            loadingReserveNode.value = false;
-            emit("updateTable");
-          }, 20000);
+          await postActionHandler();
         } else {
           createCustomToast("Please Login first to continue.", ToastType.danger);
         }
@@ -165,6 +162,8 @@ export default {
           console.log(e);
           createCustomToast("Failed to create rent contract.", ToastType.danger);
         }
+      } finally {
+        disableButton.value = false;
         loadingReserveNode.value = false;
       }
     }
diff --git a/packages/playground/src/types/nodeSelector.ts b/packages/playground/src/types/nodeSelector.ts
index 8c528254a4..a88ab13e7d 100644
--- a/packages/playground/src/types/nodeSelector.ts
+++ b/packages/playground/src/types/nodeSelector.ts
@@ -1,4 +1,4 @@
-import type { FarmInfo, GPUCardInfo, NodeInfo } from "@threefold/grid_client";
+import type { FarmInfo, Features, GPUCardInfo, NodeInfo } from "@threefold/grid_client";
 
 export type Locations = {
   [region: string]: string[];
@@ -86,3 +86,5 @@ export interface SelectedMachine {
   disk: number;
   publicIp: boolean;
 }
+
+export type NetworkFeatures = Features.ipv4 | Features.ip | Features.yggdrasil | Features.wireguard | Features.mycelium;
diff --git a/packages/playground/src/utils/contracts.ts b/packages/playground/src/utils/contracts.ts
index a05ccda980..b4a2a7cc58 100644
--- a/packages/playground/src/utils/contracts.ts
+++ b/packages/playground/src/utils/contracts.ts
@@ -1,4 +1,4 @@
-import { ContractStates, type DiscountLevel, type GridClient } from "@threefold/grid_client";
+import { type Consumption, ContractStates, type DiscountLevel, type GridClient } from "@threefold/grid_client";
 import { NodeStatus } from "@threefold/gridproxy_client";
 import type { Ref } from "vue";
 
@@ -53,15 +53,13 @@ export async function normalizeContract(
     expiration = new Date(exp).toLocaleString();
   }
 
-  let consumption: number;
+  let consumption: Consumption;
   try {
     consumption = await grid.contracts.getConsumption({ id });
   } catch {
-    consumption = 0;
+    consumption = { amountBilled: 0, discountReceived: "None" };
   }
 
-  const discountPackage = await grid.contracts.getDiscountPackage({ id });
-
   return {
     contract_id: id,
     twin_id: c.twin_id,
@@ -77,8 +75,8 @@ export async function normalizeContract(
     solutionName: data.name || "-",
     solutionType: data.projectName || data.type || "-",
     expiration,
-    consumption: consumption,
-    discountPackage: discountPackage,
+    consumption: consumption.amountBilled,
+    discountPackage: consumption.discountReceived,
   };
 }
 
diff --git a/packages/playground/src/utils/load_deployment.ts b/packages/playground/src/utils/load_deployment.ts
index 9a007bfbb9..963b40596c 100644
--- a/packages/playground/src/utils/load_deployment.ts
+++ b/packages/playground/src/utils/load_deployment.ts
@@ -128,7 +128,7 @@ export async function loadVms(grid: GridClient, options: LoadVMsOptions = {}) {
 
   const data = vms.map((vm, index) => {
     for (let i = 0; i < vm.length; i++) {
-      vm[i].billing = formatConsumption(consumptions[index] as number);
+      vm[i].billing = formatConsumption(consumptions[index]?.amountBilled as number);
       if (wireguards[index] && wireguards[index].length > 0) {
         vm[i].wireguard = wireguards[index][0];
       }
@@ -235,7 +235,7 @@ export async function loadK8s(grid: GridClient) {
     ),
   );
   const data = k8s.map((cluster, index) => {
-    cluster.masters[0].billing = formatConsumption(consumptions[index] as number);
+    cluster.masters[0].billing = formatConsumption(consumptions[index]?.amountBilled as number);
 
     if (wireguards && wireguards[index]) {
       cluster.wireguard = wireguards[index][0];
diff --git a/packages/playground/src/utils/nodeSelector.ts b/packages/playground/src/utils/nodeSelector.ts
index 448c2e21d7..aed6155fc2 100644
--- a/packages/playground/src/utils/nodeSelector.ts
+++ b/packages/playground/src/utils/nodeSelector.ts
@@ -226,7 +226,7 @@ export async function validateRentContract(
   }
 
   try {
-    if (node.dedicated && node.rentedByTwinId === 0) {
+    if (node.dedicated && node.rentedByTwinId === 0 && node.inDedicatedFarm) {
       throw `Node ${node.nodeId} is not rented`;
     }
     if (node.rentContractId !== 0) {