From 3f7cce205c1b61dca347288ff178cb3378eb14dc Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 21 May 2025 15:24:18 +0300
Subject: [PATCH 01/10] Group all toggles in one component

---
 .../src/components/caprover_worker.vue        | 21 ++---
 .../filters/TfRentalFilterSwitches.vue        | 94 +++++++++++++++++++
 .../playground/src/components/k8s_worker.vue  | 21 ++---
 .../playground/src/weblets/tf_algorand.vue    | 20 ++--
 .../playground/src/weblets/tf_caprover.vue    |  2 -
 .../playground/src/weblets/tf_casperlabs.vue  | 20 ++--
 .../playground/src/weblets/tf_discourse.vue   | 19 ++--
 .../playground/src/weblets/tf_freeflow.vue    | 19 ++--
 .../playground/src/weblets/tf_full_vm.vue     | 29 ++----
 .../playground/src/weblets/tf_funkwhale.vue   | 20 ++--
 packages/playground/src/weblets/tf_gitea.vue  | 19 ++--
 .../playground/src/weblets/tf_jenkins.vue     | 20 ++--
 packages/playground/src/weblets/tf_jitsi.vue  | 20 ++--
 .../playground/src/weblets/tf_mattermost.vue  | 19 ++--
 .../playground/src/weblets/tf_micro_vm.vue    | 21 ++---
 .../playground/src/weblets/tf_nextcloud.vue   | 20 ++--
 .../playground/src/weblets/tf_node_pilot.vue  | 20 ++--
 packages/playground/src/weblets/tf_nostr.vue  | 18 ++--
 .../playground/src/weblets/tf_openwebui.vue   | 30 ++----
 .../playground/src/weblets/tf_owncloud.vue    | 18 ++--
 .../playground/src/weblets/tf_peertube.vue    | 20 ++--
 .../playground/src/weblets/tf_presearch.vue   | 19 ++--
 .../src/weblets/tf_staticwebsite.vue          | 20 ++--
 .../playground/src/weblets/tf_subsquid.vue    | 20 ++--
 packages/playground/src/weblets/tf_taiga.vue  | 19 ++--
 .../playground/src/weblets/tf_tfrobot.vue     | 18 ++--
 packages/playground/src/weblets/tf_umbrel.vue | 20 ++--
 .../playground/src/weblets/tf_wordpress.vue   | 19 ++--
 28 files changed, 283 insertions(+), 342 deletions(-)
 create mode 100644 packages/playground/src/components/filters/TfRentalFilterSwitches.vue

diff --git a/packages/playground/src/components/caprover_worker.vue b/packages/playground/src/components/caprover_worker.vue
index 3c05c5dde7..044403e6ca 100644
--- a/packages/playground/src/components/caprover_worker.vue
+++ b/packages/playground/src/components/caprover_worker.vue
@@ -31,15 +31,12 @@
       v-model:mycelium="$props.modelValue.mycelium"
       v-model:wireguard="$props.modelValue.wireguard"
     />
-    <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-    <v-switch color="primary" inset label="Rented By Me" v-model="$props.modelValue.rentedByMe" hide-details />
-    <!-- </input-tooltip> -->
-    <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-      <v-switch color="primary" inset label="Rentable" v-model="$props.modelValue.dedicated" hide-details />
-    </input-tooltip>
-    <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-      <v-switch color="primary" inset label="Certified" v-model="$props.modelValue.certified" hide-details />
-    </input-tooltip>
+
+    <TfRentalFilterSwitches
+      v-model:rentedByMe="$props.modelValue.rentedByMe"
+      v-model:dedicated="$props.modelValue.dedicated"
+      v-model:certified="$props.modelValue.certified"
+    />
 
     <TfSelectionDetails
       :selected-machines="selectedMachines"
@@ -70,8 +67,8 @@ import { computed, type PropType } from "vue";
 
 import { useGrid } from "@/stores";
 import type { SelectedMachine } from "@/types/nodeSelector";
-import { manual } from "@/utils/manual";
 
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks from "../components/networks.vue";
 import type { CaproverWorker } from "../types";
 import { generateName } from "../utils/strings";
@@ -107,7 +104,7 @@ function toMachine(rootFilesystemSize: number, worker?: CaproverWorker): Selecte
 
 export default {
   name: "CaproverWorker",
-  components: { SelectSolutionFlavor, Networks },
+  components: { SelectSolutionFlavor, Networks, TfRentalFilterSwitches },
   props: {
     modelValue: {
       type: Object as PropType<CaproverWorker>,
@@ -142,7 +139,7 @@ export default {
       }, [] as SelectedMachine[]);
     });
 
-    return { rootFilesystemSize, manual, selectedMachines, rentedBy };
+    return { rootFilesystemSize, selectedMachines, rentedBy };
   },
 };
 </script>
diff --git a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
new file mode 100644
index 0000000000..fb0b694008
--- /dev/null
+++ b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <input-tooltip
+      v-if="showGPU"
+      inline
+      tooltip="
+    Selecting a Node with GPU.
+    When selecting a node with GPU resources, please make sure that you have a rented node. To rent a node and gain access to GPU capabilities, you can use our dashboard.
+  "
+    >
+      <v-switch
+        color="primary"
+        inset
+        label="GPU"
+        :model-value="hasGPUModel"
+        @update:model-value="hasGPUModel = $event"
+        hide-details
+      />
+    </input-tooltip>
+
+    <v-switch
+      color="primary"
+      inset
+      label="Rented By Me"
+      :model-value="rentedByMeModel"
+      @update:model-value="rentedByMeModel = $event"
+      hide-details
+    />
+
+    <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual?.dedicated_machines">
+      <v-switch
+        color="primary"
+        inset
+        label="Rentable"
+        :model-value="dedicatedModel"
+        @update:model-value="dedicatedModel = $event"
+        hide-details
+      />
+    </input-tooltip>
+
+    <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
+      <v-switch
+        color="primary"
+        inset
+        label="Certified"
+        :model-value="certifiedModel"
+        @update:model-value="certifiedModel = $event"
+        hide-details
+      />
+    </input-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { manual } from "@/utils/manual";
+
+const props = defineProps({
+  rentedByMe: Boolean,
+  dedicated: Boolean,
+  certified: Boolean,
+  hasGPU: Boolean,
+  showGPU: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update:rentedByMe", "update:dedicated", "update:certified", "update:hasGPU"]);
+
+const rentedByMeModel = computed({
+  get: () => props.rentedByMe,
+  set: val => emit("update:rentedByMe", val),
+});
+
+const dedicatedModel = computed({
+  get: () => props.dedicated,
+  set: val => emit("update:dedicated", val),
+});
+
+const certifiedModel = computed({
+  get: () => props.certified,
+  set: val => emit("update:certified", val),
+});
+
+const hasGPUModel = computed({
+  get: () => props.hasGPU,
+  set: val => emit("update:hasGPU", val),
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: "RentalFilterSwitches",
+};
+</script>
diff --git a/packages/playground/src/components/k8s_worker.vue b/packages/playground/src/components/k8s_worker.vue
index c164317464..a71cfc1fd1 100644
--- a/packages/playground/src/components/k8s_worker.vue
+++ b/packages/playground/src/components/k8s_worker.vue
@@ -76,16 +76,11 @@
       v-model.number="$props.modelValue.rootFsSize"
     />
 
-    <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-    <v-switch color="primary" inset label="Rented By Me" v-model="$props.modelValue.rentedByMe" hide-details />
-    <!-- </input-tooltip> -->
-    <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-      <v-switch color="primary" inset label="Rentable" v-model="$props.modelValue.dedicated" hide-details />
-    </input-tooltip>
-
-    <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-      <v-switch color="primary" inset label="Certified" v-model="$props.modelValue.certified" hide-details />
-    </input-tooltip>
+    <TfRentalFilterSwitches
+      v-model:rentedByMe="$props.modelValue.rentedByMe"
+      v-model:dedicated="$props.modelValue.dedicated"
+      v-model:certified="$props.modelValue.certified"
+    />
 
     <TfSelectionDetails
       :selected-machines="selectedMachines"
@@ -124,8 +119,8 @@ import { computed, type PropType } from "vue";
 
 import { useGrid } from "@/stores";
 import type { SelectedMachine } from "@/types/nodeSelector";
-import { manual } from "@/utils/manual";
 
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks from "../components/networks.vue";
 import type { K8SWorker } from "../types";
 import { generateName } from "../utils/strings";
@@ -167,7 +162,7 @@ function toMachine(worker?: K8SWorker): SelectedMachine | undefined {
 
 export default {
   name: "K8SWorker",
-  components: { RootFsSize, Networks },
+  components: { RootFsSize, Networks, TfRentalFilterSwitches },
   props: {
     modelValue: {
       type: Object as PropType<K8SWorker>,
@@ -193,7 +188,7 @@ export default {
       }, [] as SelectedMachine[]);
     });
 
-    return { calculateRootFileSystem, manual, selectedMachines, rentedBy };
+    return { calculateRootFileSystem, selectedMachines, rentedBy };
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index e3b6d4133f..348f93db56 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -68,16 +68,11 @@
         </input-tooltip>
       </AlgorandCapacity>
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters-validators="{
@@ -124,8 +119,6 @@
 <script lang="ts" setup>
 import { computed, type Ref, ref, watch } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
 import { type Flist, ProjectName } from "../types";
@@ -223,6 +216,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import { FLISTS, type GridClient } from "@threefold/grid_client";
 
 import AlgorandCapacity from "../components/algorand_capacity.vue";
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -232,6 +226,6 @@ import { normalizeError } from "../utils/helpers";
 
 export default {
   name: "TfAlgorand",
-  components: { AlgorandCapacity, Networks, ManageSshDeployemnt },
+  components: { AlgorandCapacity, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_caprover.vue b/packages/playground/src/weblets/tf_caprover.vue
index 49bb707784..9f35e07505 100644
--- a/packages/playground/src/weblets/tf_caprover.vue
+++ b/packages/playground/src/weblets/tf_caprover.vue
@@ -115,8 +115,6 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import { type CaproverWorker as CW, ProjectName } from "../types";
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 0ca757e2b8..1ef3dd9d2d 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -47,16 +47,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -95,8 +90,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -218,6 +211,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -227,6 +221,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFCasperlabs",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index 0b48f5d726..d7eda05713 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -69,16 +69,11 @@
           :has-smtp="true"
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -126,8 +121,6 @@ import { Buffer } from "buffer";
 import TweetNACL from "tweetnacl";
 import { computed, type Ref, ref, watch } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -279,6 +272,7 @@ watch(
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
@@ -294,6 +288,7 @@ export default {
     SelectSolutionFlavor,
     Networks,
     ManageSshDeployemnt,
+    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_freeflow.vue b/packages/playground/src/weblets/tf_freeflow.vue
index f3b8a666db..1a4555e0d7 100644
--- a/packages/playground/src/weblets/tf_freeflow.vue
+++ b/packages/playground/src/weblets/tf_freeflow.vue
@@ -57,16 +57,12 @@
         :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
 
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -101,8 +97,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, onMounted, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -227,6 +221,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -236,6 +231,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFFreeflow",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_full_vm.vue b/packages/playground/src/weblets/tf_full_vm.vue
index ef587dafb7..76ff9c3c9b 100644
--- a/packages/playground/src/weblets/tf_full_vm.vue
+++ b/packages/playground/src/weblets/tf_full_vm.vue
@@ -53,25 +53,14 @@
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
         />
-        <input-tooltip
-          inline
-          tooltip="
-          Selecting a Node with GPU.
-          When selecting a node with GPU resources, please make sure that you have a rented node. To rent a node and gain access to GPU capabilities, you can use our dashboard.
-          "
-        >
-          <v-switch color="primary" inset label="GPU" v-model="hasGPU" hide-details />
-        </input-tooltip>
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
 
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+          v-model:hasGPU="hasGPU"
+          :show-GPU="true"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -152,8 +141,6 @@
 <script lang="ts" setup>
 import { computed, type Ref, ref, watch } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
@@ -280,6 +267,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import { FLISTS, type GridClient } from "@threefold/grid_client";
 
 import ExpandableLayout from "../components/expandable_layout.vue";
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SelectVmImage, { type VmImage } from "../components/select_vm_image.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -294,6 +282,7 @@ export default {
     SelectSolutionFlavor,
     ExpandableLayout,
     ManageSshDeployemnt,
+    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 6f81a4d57f..93974d2aea 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -99,16 +99,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -147,8 +142,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -280,6 +273,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -289,6 +283,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TfFunkwhale",
-  components: { SelectSolutionFlavor, Networks },
+  components: { SelectSolutionFlavor, Networks, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_gitea.vue b/packages/playground/src/weblets/tf_gitea.vue
index 3a6213aecb..6297ecfe01 100644
--- a/packages/playground/src/weblets/tf_gitea.vue
+++ b/packages/playground/src/weblets/tf_gitea.vue
@@ -57,16 +57,11 @@
           :has-smtp="smtp.enabled"
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -106,8 +101,6 @@
 <script lang="ts" setup>
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
@@ -241,6 +234,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import type { GridClient, VM } from "@threefold/grid_client";
 import { FLISTS } from "@threefold/grid_client";
 
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -258,6 +252,7 @@ export default {
     ManageSshDeployemnt,
     SelectSolutionFlavor,
     SmtpServer,
+    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_jenkins.vue b/packages/playground/src/weblets/tf_jenkins.vue
index bd5ffdac43..11f03bf532 100644
--- a/packages/playground/src/weblets/tf_jenkins.vue
+++ b/packages/playground/src/weblets/tf_jenkins.vue
@@ -79,16 +79,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -127,8 +122,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -256,6 +249,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -265,6 +259,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "Jenkins",
-  components: { SelectSolutionFlavor, Networks },
+  components: { SelectSolutionFlavor, Networks, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_jitsi.vue b/packages/playground/src/weblets/tf_jitsi.vue
index 9d4292172a..4ed7e0dea1 100644
--- a/packages/playground/src/weblets/tf_jitsi.vue
+++ b/packages/playground/src/weblets/tf_jitsi.vue
@@ -48,16 +48,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -96,8 +91,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -218,6 +211,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -227,6 +221,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFJitsi",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 2cefcd4189..87b897580a 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -53,16 +53,11 @@
           :required-ipv4="smtp.enabled"
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -105,8 +100,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -245,6 +238,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 <script lang="ts">
 import { updateGrid } from "@/utils/grid";
 
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
@@ -260,6 +254,7 @@ export default {
     SelectSolutionFlavor,
     Networks,
     ManageSshDeployemnt,
+    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_micro_vm.vue b/packages/playground/src/weblets/tf_micro_vm.vue
index e13d06d170..c1e89d93d9 100644
--- a/packages/playground/src/weblets/tf_micro_vm.vue
+++ b/packages/playground/src/weblets/tf_micro_vm.vue
@@ -56,17 +56,11 @@
           v-model:wireguard="wireguard"
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        <!-- </input-tooltip> -->
-
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -194,8 +188,6 @@
 <script lang="ts" setup>
 import { computed, type Ref, ref, watch } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
@@ -307,6 +299,7 @@ watch(selectedSSHKeys, layoutMount, { deep: true });
 import { FLISTS, type GridClient } from "@threefold/grid_client";
 
 import ExpandableLayout from "../components/expandable_layout.vue";
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import type { VmImage } from "../components/select_vm_image.vue";
 import SelectVmImage from "../components/select_vm_image.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -315,7 +308,6 @@ import type { solutionFlavor as SolutionFlavor } from "../types";
 import type { SelectionDetails } from "../types/nodeSelector";
 import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";
-
 const solution = ref() as Ref<SolutionFlavor>;
 
 export default {
@@ -324,6 +316,7 @@ export default {
     SelectVmImage,
     SelectSolutionFlavor,
     ExpandableLayout,
+    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 4a726d234b..8482723500 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -46,16 +46,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -94,8 +89,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -231,6 +224,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -240,6 +234,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFNextcloud",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 3b678dea58..02989d38eb 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -47,16 +47,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -93,8 +88,6 @@
 <script lang="ts" setup>
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
@@ -215,6 +208,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import type { GridClient, VM } from "@threefold/grid_client";
 import { FLISTS } from "@threefold/grid_client";
 
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -226,6 +220,6 @@ import { normalizeError } from "../utils/helpers";
 
 export default {
   name: "NodePilot",
-  components: { ManageSshDeployemnt, SelectSolutionFlavor },
+  components: { ManageSshDeployemnt, SelectSolutionFlavor, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_nostr.vue b/packages/playground/src/weblets/tf_nostr.vue
index 9c1eb4d121..d0e460b3ef 100644
--- a/packages/playground/src/weblets/tf_nostr.vue
+++ b/packages/playground/src/weblets/tf_nostr.vue
@@ -48,16 +48,12 @@
           :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
 
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -92,8 +88,6 @@
 <script lang="ts" setup>
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
@@ -216,6 +210,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import type { GridClient, VM } from "@threefold/grid_client";
 import { FLISTS } from "@threefold/grid_client";
 
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -231,6 +226,7 @@ export default {
   components: {
     ManageSshDeployemnt,
     SelectSolutionFlavor,
+    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_openwebui.vue b/packages/playground/src/weblets/tf_openwebui.vue
index 72ab2cf789..5867f133eb 100644
--- a/packages/playground/src/weblets/tf_openwebui.vue
+++ b/packages/playground/src/weblets/tf_openwebui.vue
@@ -48,25 +48,14 @@
           :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
-        <input-tooltip
-          inline
-          tooltip="
-            Selecting a Node with GPU.
-            When selecting a node with GPU resources, please make sure that you have a rented node. To rent a node and gain access to GPU capabilities, you can use our dashboard.
-            "
-        >
-          <v-switch color="primary" inset label="GPU" v-model="hasGPU" hide-details />
-        </input-tooltip>
-        
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
 
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+          v-model:hasGPU="hasGPU"
+          :show-GPU="true"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -89,7 +78,6 @@
           v-model="selectionDetails"
         />
 
-        
         <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
       </template>
     </d-tabs>
@@ -108,8 +96,6 @@
 <script lang="ts" setup>
 import { computed, type Ref, ref, watch } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
@@ -262,6 +248,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 <script lang="ts">
 import type { GridClient } from "@threefold/grid_client";
 
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -273,6 +260,7 @@ export default {
   components: {
     SelectSolutionFlavor,
     ManageSshDeployemnt,
+    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index c3eaab886b..5e5f3b37f4 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -89,16 +89,12 @@
           require-domain
           :has-smtp="smtp.enabled"
         />
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
 
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -144,8 +140,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -289,6 +283,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
@@ -305,6 +300,7 @@ export default {
     SelectSolutionFlavor,
     Networks,
     ManageSshDeployemnt,
+    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index 734a2e4cfc..4c47c35f95 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -73,16 +73,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -121,8 +116,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -250,6 +243,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -260,6 +254,6 @@ import { normalizeError } from "../utils/helpers";
 
 export default {
   name: "TfPeertube",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 30750f0be4..102572bd19 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -66,15 +66,11 @@
           v-model:wireguard="wireguard"
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -127,8 +123,6 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
@@ -231,6 +225,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 <script lang="ts">
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
@@ -238,6 +233,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFPresearch",
-  component: { ManageSshDeployemnt },
+  component: { ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index fff210a037..fadc133ec1 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -72,16 +72,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -119,8 +114,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -277,6 +270,7 @@ async function isGithubRepoExist(gitUrl: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -285,6 +279,6 @@ import type { SelectionDetails } from "../types/nodeSelector";
 
 export default {
   name: "TfStaticWebsite",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 5628ee540d..0baa583cfd 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -61,16 +61,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -109,8 +104,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -238,6 +231,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -247,6 +241,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TfSubsquid",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index c01a8fa13e..992e76e49e 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -102,16 +102,11 @@
           :has-smtp="smtp.enabled"
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -157,8 +152,6 @@
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -301,6 +294,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
@@ -317,6 +311,7 @@ export default {
     SelectSolutionFlavor,
     Networks,
     ManageSshDeployemnt,
+    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_tfrobot.vue b/packages/playground/src/weblets/tf_tfrobot.vue
index 2d6082a68d..2d32bc320f 100644
--- a/packages/playground/src/weblets/tf_tfrobot.vue
+++ b/packages/playground/src/weblets/tf_tfrobot.vue
@@ -54,16 +54,12 @@
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
         />
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-        </input-tooltip>
 
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-        </input-tooltip>
+        <TfRentalFilterSwitches
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+        />
 
         <TfSelectionDetails
           :filters="{
@@ -187,8 +183,6 @@
 <script lang="ts" setup>
 import { computed, type Ref, ref, watch } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
@@ -290,6 +284,7 @@ watch(selectedSSHKeys, layoutMount, { deep: true });
 import { FLISTS, type GridClient } from "@threefold/grid_client";
 
 import ExpandableLayout from "../components/expandable_layout.vue";
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -304,6 +299,7 @@ export default {
   components: {
     SelectSolutionFlavor,
     ExpandableLayout,
+    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 420ca98d67..4277250580 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -83,16 +83,11 @@
         :large="{ cpu: 4, memory: 16, disk: 100 }"
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters-validators="{
@@ -133,8 +128,6 @@
 <script lang="ts" setup>
 import { computed, type Ref, ref } from "vue";
 
-import { manual } from "@/utils/manual";
-
 import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
@@ -233,6 +226,7 @@ import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/gri
 
 import { updateGrid } from "@/utils/grid";
 
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -240,6 +234,6 @@ import type { SelectionDetails } from "../types/nodeSelector";
 
 export default {
   name: "TfUmbrel",
-  components: { SelectSolutionFlavor, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index 022180e232..d78351813e 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -100,16 +100,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch color="primary" inset label="Rented By Me" v-model="rentedByMe" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch color="primary" inset label="Rentable" v-model="dedicated" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch color="primary" inset label="Certified" v-model="certified" hide-details />
-      </input-tooltip>
+      <TfRentalFilterSwitches
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
+      />
 
       <TfSelectionDetails
         :filters="{
@@ -149,7 +144,6 @@ import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/gri
 import { computed, type Ref, ref } from "vue";
 
 import { updateGrid } from "@/utils/grid";
-import { manual } from "@/utils/manual";
 
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
@@ -279,6 +273,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
+import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -287,6 +282,6 @@ import type { SelectionDetails } from "../types/nodeSelector";
 
 export default {
   name: "TFWordpress",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
 };
 </script>

From fa4f269d57d3481e9368ef6cdddfd2c80b16297f Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 21 May 2025 15:36:47 +0300
Subject: [PATCH 02/10] - Fix type check - Fix manual import in caprover

---
 .../src/components/filters/TfRentalFilterSwitches.vue     | 8 ++++----
 packages/playground/src/weblets/tf_caprover.vue           | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
index fb0b694008..c49b555488 100644
--- a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
+++ b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
@@ -67,22 +67,22 @@ const props = defineProps({
 const emit = defineEmits(["update:rentedByMe", "update:dedicated", "update:certified", "update:hasGPU"]);
 
 const rentedByMeModel = computed({
-  get: () => props.rentedByMe,
+  get: () => !!props.rentedByMe,
   set: val => emit("update:rentedByMe", val),
 });
 
 const dedicatedModel = computed({
-  get: () => props.dedicated,
+  get: () => !!props.dedicated,
   set: val => emit("update:dedicated", val),
 });
 
 const certifiedModel = computed({
-  get: () => props.certified,
+  get: () => !!props.certified,
   set: val => emit("update:certified", val),
 });
 
 const hasGPUModel = computed({
-  get: () => props.hasGPU,
+  get: () => !!props.hasGPU,
   set: val => emit("update:hasGPU", val),
 });
 </script>
diff --git a/packages/playground/src/weblets/tf_caprover.vue b/packages/playground/src/weblets/tf_caprover.vue
index 9f35e07505..49bb707784 100644
--- a/packages/playground/src/weblets/tf_caprover.vue
+++ b/packages/playground/src/weblets/tf_caprover.vue
@@ -115,6 +115,8 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
+import { manual } from "@/utils/manual";
+
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import { type CaproverWorker as CW, ProjectName } from "../types";

From 760518e241c8ea246f1d11100ef9169f33412abd Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 21 May 2025 15:44:58 +0300
Subject: [PATCH 03/10] Set default values for props

---
 .../src/components/filters/TfRentalFilterSwitches.vue     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
index c49b555488..089d0587db 100644
--- a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
+++ b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
@@ -57,10 +57,10 @@ import { computed } from "vue";
 import { manual } from "@/utils/manual";
 
 const props = defineProps({
-  rentedByMe: Boolean,
-  dedicated: Boolean,
-  certified: Boolean,
-  hasGPU: Boolean,
+  rentedByMe: { type: Boolean, default: false },
+  dedicated: { type: Boolean, default: false },
+  certified: { type: Boolean, default: false },
+  hasGPU: { type: Boolean, default: false },
   showGPU: { type: Boolean, default: false },
 });
 

From 6204356bddf5c1368edcbb223d08f3f386c2988d Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 21 May 2025 15:53:19 +0300
Subject: [PATCH 04/10] Verify passed value type

---
 .../src/components/filters/TfRentalFilterSwitches.vue     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
index 089d0587db..1271b40e06 100644
--- a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
+++ b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
@@ -68,22 +68,22 @@ const emit = defineEmits(["update:rentedByMe", "update:dedicated", "update:certi
 
 const rentedByMeModel = computed({
   get: () => !!props.rentedByMe,
-  set: val => emit("update:rentedByMe", val),
+  set: (val: boolean) => emit("update:rentedByMe", val),
 });
 
 const dedicatedModel = computed({
   get: () => !!props.dedicated,
-  set: val => emit("update:dedicated", val),
+  set: (val: boolean) => emit("update:dedicated", val),
 });
 
 const certifiedModel = computed({
   get: () => !!props.certified,
-  set: val => emit("update:certified", val),
+  set: (val: boolean) => emit("update:certified", val),
 });
 
 const hasGPUModel = computed({
   get: () => !!props.hasGPU,
-  set: val => emit("update:hasGPU", val),
+  set: (val: boolean) => emit("update:hasGPU", val),
 });
 </script>
 

From 41d3b58617263d55675c2032fa780d5c5dc240d7 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 21 May 2025 16:03:22 +0300
Subject: [PATCH 05/10] Avoid inline assignments

---
 .../filters/TfRentalFilterSwitches.vue        | 46 +++++++++++++------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
index 1271b40e06..d2f35892f6 100644
--- a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
+++ b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
@@ -4,16 +4,16 @@
       v-if="showGPU"
       inline
       tooltip="
-    Selecting a Node with GPU.
-    When selecting a node with GPU resources, please make sure that you have a rented node. To rent a node and gain access to GPU capabilities, you can use our dashboard.
-  "
+        Selecting a Node with GPU.
+        When selecting a node with GPU resources, please make sure that you have a rented node. To rent a node and gain access to GPU capabilities, you can use our dashboard.
+      "
     >
       <v-switch
         color="primary"
         inset
         label="GPU"
         :model-value="hasGPUModel"
-        @update:model-value="hasGPUModel = $event"
+        @update:model-value="onUpdateHasGPU"
         hide-details
       />
     </input-tooltip>
@@ -23,7 +23,7 @@
       inset
       label="Rented By Me"
       :model-value="rentedByMeModel"
-      @update:model-value="rentedByMeModel = $event"
+      @update:model-value="onUpdateRentedByMe"
       hide-details
     />
 
@@ -33,7 +33,7 @@
         inset
         label="Rentable"
         :model-value="dedicatedModel"
-        @update:model-value="dedicatedModel = $event"
+        @update:model-value="onUpdateDedicated"
         hide-details
       />
     </input-tooltip>
@@ -44,7 +44,7 @@
         inset
         label="Certified"
         :model-value="certifiedModel"
-        @update:model-value="certifiedModel = $event"
+        @update:model-value="onUpdateCertified"
         hide-details
       />
     </input-tooltip>
@@ -57,10 +57,10 @@ import { computed } from "vue";
 import { manual } from "@/utils/manual";
 
 const props = defineProps({
-  rentedByMe: { type: Boolean, default: false },
-  dedicated: { type: Boolean, default: false },
-  certified: { type: Boolean, default: false },
-  hasGPU: { type: Boolean, default: false },
+  rentedByMe: Boolean,
+  dedicated: Boolean,
+  certified: Boolean,
+  hasGPU: Boolean,
   showGPU: { type: Boolean, default: false },
 });
 
@@ -68,23 +68,39 @@ const emit = defineEmits(["update:rentedByMe", "update:dedicated", "update:certi
 
 const rentedByMeModel = computed({
   get: () => !!props.rentedByMe,
-  set: (val: boolean) => emit("update:rentedByMe", val),
+  set: val => emit("update:rentedByMe", val),
 });
 
 const dedicatedModel = computed({
   get: () => !!props.dedicated,
-  set: (val: boolean) => emit("update:dedicated", val),
+  set: val => emit("update:dedicated", val),
 });
 
 const certifiedModel = computed({
   get: () => !!props.certified,
-  set: (val: boolean) => emit("update:certified", val),
+  set: val => emit("update:certified", val),
 });
 
 const hasGPUModel = computed({
   get: () => !!props.hasGPU,
-  set: (val: boolean) => emit("update:hasGPU", val),
+  set: val => emit("update:hasGPU", val),
 });
+
+function onUpdateRentedByMe(val: boolean) {
+  rentedByMeModel.value = val;
+}
+
+function onUpdateDedicated(val: boolean) {
+  dedicatedModel.value = val;
+}
+
+function onUpdateCertified(val: boolean) {
+  certifiedModel.value = val;
+}
+
+function onUpdateHasGPU(val: boolean) {
+  hasGPUModel.value = val;
+}
 </script>
 
 <script lang="ts">

From f611dfe807da294664801cd4818e7d1f083b429e Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 21 May 2025 16:07:58 +0300
Subject: [PATCH 06/10] Handle null values

---
 .../filters/TfRentalFilterSwitches.vue           | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
index d2f35892f6..efc86dfc7f 100644
--- a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
+++ b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
@@ -86,20 +86,20 @@ const hasGPUModel = computed({
   set: val => emit("update:hasGPU", val),
 });
 
-function onUpdateRentedByMe(val: boolean) {
-  rentedByMeModel.value = val;
+function onUpdateRentedByMe(val: boolean | null) {
+  rentedByMeModel.value = !!val;
 }
 
-function onUpdateDedicated(val: boolean) {
-  dedicatedModel.value = val;
+function onUpdateDedicated(val: boolean | null) {
+  dedicatedModel.value = !!val;
 }
 
-function onUpdateCertified(val: boolean) {
-  certifiedModel.value = val;
+function onUpdateCertified(val: boolean | null) {
+  certifiedModel.value = !!val;
 }
 
-function onUpdateHasGPU(val: boolean) {
-  hasGPUModel.value = val;
+function onUpdateHasGPU(val: boolean | null) {
+  hasGPUModel.value = !!val;
 }
 </script>
 

From 2d45b5fed3ac2404ec26a819b83da16aefda9318 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 22 May 2025 17:02:12 +0300
Subject: [PATCH 07/10] Removed the onUpdated functions

---
 .../filters/TfRentalFilterSwitches.vue        | 28 +++----------------
 1 file changed, 4 insertions(+), 24 deletions(-)

diff --git a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
index efc86dfc7f..f34c395333 100644
--- a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
+++ b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
@@ -12,8 +12,7 @@
         color="primary"
         inset
         label="GPU"
-        :model-value="hasGPUModel"
-        @update:model-value="onUpdateHasGPU"
+        @update:model-value="(val: boolean )=> hasGPUModel = val"
         hide-details
       />
     </input-tooltip>
@@ -22,8 +21,7 @@
       color="primary"
       inset
       label="Rented By Me"
-      :model-value="rentedByMeModel"
-      @update:model-value="onUpdateRentedByMe"
+      @update:model-value="(val: boolean )=> rentedByMeModel = val"
       hide-details
     />
 
@@ -32,8 +30,7 @@
         color="primary"
         inset
         label="Rentable"
-        :model-value="dedicatedModel"
-        @update:model-value="onUpdateDedicated"
+        @update:model-value="(val: boolean )=> dedicatedModel = val"
         hide-details
       />
     </input-tooltip>
@@ -43,8 +40,7 @@
         color="primary"
         inset
         label="Certified"
-        :model-value="certifiedModel"
-        @update:model-value="onUpdateCertified"
+        @update:model-value="(val: boolean )=> certifiedModel = val"
         hide-details
       />
     </input-tooltip>
@@ -85,22 +81,6 @@ const hasGPUModel = computed({
   get: () => !!props.hasGPU,
   set: val => emit("update:hasGPU", val),
 });
-
-function onUpdateRentedByMe(val: boolean | null) {
-  rentedByMeModel.value = !!val;
-}
-
-function onUpdateDedicated(val: boolean | null) {
-  dedicatedModel.value = !!val;
-}
-
-function onUpdateCertified(val: boolean | null) {
-  certifiedModel.value = !!val;
-}
-
-function onUpdateHasGPU(val: boolean | null) {
-  hasGPUModel.value = !!val;
-}
 </script>
 
 <script lang="ts">

From 14684efd551a8c7a6f1a29b873aa85686c6298df Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 22 May 2025 17:12:48 +0300
Subject: [PATCH 08/10] Fix types

---
 .../src/components/filters/TfRentalFilterSwitches.vue     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
index f34c395333..b544f61f4a 100644
--- a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
+++ b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
@@ -12,7 +12,7 @@
         color="primary"
         inset
         label="GPU"
-        @update:model-value="(val: boolean )=> hasGPUModel = val"
+        @update:model-value="(val: boolean | null) => { hasGPUModel = !!val }"
         hide-details
       />
     </input-tooltip>
@@ -21,7 +21,7 @@
       color="primary"
       inset
       label="Rented By Me"
-      @update:model-value="(val: boolean )=> rentedByMeModel = val"
+      @update:model-value="(val: boolean | null) => { rentedByMeModel = !!val }"
       hide-details
     />
 
@@ -30,7 +30,7 @@
         color="primary"
         inset
         label="Rentable"
-        @update:model-value="(val: boolean )=> dedicatedModel = val"
+        @update:model-value="(val: boolean | null) => { dedicatedModel = !!val }"
         hide-details
       />
     </input-tooltip>
@@ -40,7 +40,7 @@
         color="primary"
         inset
         label="Certified"
-        @update:model-value="(val: boolean )=> certifiedModel = val"
+        @update:model-value="(val: boolean | null) => { certifiedModel = !!val }"
         hide-details
       />
     </input-tooltip>

From e5d8373a98fb143402c557c885bb58825af79ff9 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 22 May 2025 17:25:23 +0300
Subject: [PATCH 09/10] Get the old changes back

---
 .../filters/TfRentalFilterSwitches.vue        | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
index b544f61f4a..efc86dfc7f 100644
--- a/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
+++ b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
@@ -12,7 +12,8 @@
         color="primary"
         inset
         label="GPU"
-        @update:model-value="(val: boolean | null) => { hasGPUModel = !!val }"
+        :model-value="hasGPUModel"
+        @update:model-value="onUpdateHasGPU"
         hide-details
       />
     </input-tooltip>
@@ -21,7 +22,8 @@
       color="primary"
       inset
       label="Rented By Me"
-      @update:model-value="(val: boolean | null) => { rentedByMeModel = !!val }"
+      :model-value="rentedByMeModel"
+      @update:model-value="onUpdateRentedByMe"
       hide-details
     />
 
@@ -30,7 +32,8 @@
         color="primary"
         inset
         label="Rentable"
-        @update:model-value="(val: boolean | null) => { dedicatedModel = !!val }"
+        :model-value="dedicatedModel"
+        @update:model-value="onUpdateDedicated"
         hide-details
       />
     </input-tooltip>
@@ -40,7 +43,8 @@
         color="primary"
         inset
         label="Certified"
-        @update:model-value="(val: boolean | null) => { certifiedModel = !!val }"
+        :model-value="certifiedModel"
+        @update:model-value="onUpdateCertified"
         hide-details
       />
     </input-tooltip>
@@ -81,6 +85,22 @@ const hasGPUModel = computed({
   get: () => !!props.hasGPU,
   set: val => emit("update:hasGPU", val),
 });
+
+function onUpdateRentedByMe(val: boolean | null) {
+  rentedByMeModel.value = !!val;
+}
+
+function onUpdateDedicated(val: boolean | null) {
+  dedicatedModel.value = !!val;
+}
+
+function onUpdateCertified(val: boolean | null) {
+  certifiedModel.value = !!val;
+}
+
+function onUpdateHasGPU(val: boolean | null) {
+  hasGPUModel.value = !!val;
+}
 </script>
 
 <script lang="ts">

From 8aa1d505c6d90fcadc3c461c776df87bb24aec74 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Wed, 28 May 2025 08:34:20 +0300
Subject: [PATCH 10/10] Move rental switchs component inside selection details
 component

---
 .../src/components/caprover_worker.vue        | 12 +++----
 .../playground/src/components/k8s_worker.vue  | 12 +++----
 .../node_selector/TfSelectionDetails.vue      | 36 +++++++++++++++++--
 .../playground/src/weblets/tf_algorand.vue    | 12 +++----
 .../playground/src/weblets/tf_casperlabs.vue  | 12 +++----
 .../playground/src/weblets/tf_discourse.vue   | 11 ++----
 .../playground/src/weblets/tf_freeflow.vue    | 12 +++----
 .../playground/src/weblets/tf_full_vm.vue     | 15 +++-----
 .../playground/src/weblets/tf_funkwhale.vue   | 12 +++----
 packages/playground/src/weblets/tf_gitea.vue  | 11 ++----
 .../playground/src/weblets/tf_jenkins.vue     | 12 +++----
 packages/playground/src/weblets/tf_jitsi.vue  | 12 +++----
 .../playground/src/weblets/tf_mattermost.vue  | 11 ++----
 .../playground/src/weblets/tf_micro_vm.vue    | 11 ++----
 .../playground/src/weblets/tf_nextcloud.vue   | 12 +++----
 .../playground/src/weblets/tf_node_pilot.vue  | 12 +++----
 packages/playground/src/weblets/tf_nostr.vue  | 11 ++----
 .../playground/src/weblets/tf_openwebui.vue   | 15 +++-----
 .../playground/src/weblets/tf_owncloud.vue    | 11 ++----
 .../playground/src/weblets/tf_peertube.vue    | 12 +++----
 .../playground/src/weblets/tf_presearch.vue   | 12 +++----
 .../src/weblets/tf_staticwebsite.vue          | 12 +++----
 .../playground/src/weblets/tf_subsquid.vue    | 12 +++----
 packages/playground/src/weblets/tf_taiga.vue  | 11 ++----
 .../playground/src/weblets/tf_tfrobot.vue     | 11 ++----
 packages/playground/src/weblets/tf_umbrel.vue | 12 +++----
 .../playground/src/weblets/tf_wordpress.vue   | 12 +++----
 27 files changed, 132 insertions(+), 214 deletions(-)

diff --git a/packages/playground/src/components/caprover_worker.vue b/packages/playground/src/components/caprover_worker.vue
index 044403e6ca..33614271ff 100644
--- a/packages/playground/src/components/caprover_worker.vue
+++ b/packages/playground/src/components/caprover_worker.vue
@@ -32,12 +32,6 @@
       v-model:wireguard="$props.modelValue.wireguard"
     />
 
-    <TfRentalFilterSwitches
-      v-model:rentedByMe="$props.modelValue.rentedByMe"
-      v-model:dedicated="$props.modelValue.dedicated"
-      v-model:certified="$props.modelValue.certified"
-    />
-
     <TfSelectionDetails
       :selected-machines="selectedMachines"
       :nodes-lock="nodesLock"
@@ -56,6 +50,9 @@
         wireguard: $props.modelValue.wireguard,
       }"
       v-model="$props.modelValue.selectionDetails"
+      v-model:rentedByMe="$props.modelValue.rentedByMe"
+      v-model:dedicated="$props.modelValue.dedicated"
+      v-model:certified="$props.modelValue.certified"
     />
   </div>
 </template>
@@ -68,7 +65,6 @@ import { computed, type PropType } from "vue";
 import { useGrid } from "@/stores";
 import type { SelectedMachine } from "@/types/nodeSelector";
 
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks from "../components/networks.vue";
 import type { CaproverWorker } from "../types";
 import { generateName } from "../utils/strings";
@@ -104,7 +100,7 @@ function toMachine(rootFilesystemSize: number, worker?: CaproverWorker): Selecte
 
 export default {
   name: "CaproverWorker",
-  components: { SelectSolutionFlavor, Networks, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks },
   props: {
     modelValue: {
       type: Object as PropType<CaproverWorker>,
diff --git a/packages/playground/src/components/k8s_worker.vue b/packages/playground/src/components/k8s_worker.vue
index a71cfc1fd1..94b198545d 100644
--- a/packages/playground/src/components/k8s_worker.vue
+++ b/packages/playground/src/components/k8s_worker.vue
@@ -76,12 +76,6 @@
       v-model.number="$props.modelValue.rootFsSize"
     />
 
-    <TfRentalFilterSwitches
-      v-model:rentedByMe="$props.modelValue.rentedByMe"
-      v-model:dedicated="$props.modelValue.dedicated"
-      v-model:certified="$props.modelValue.certified"
-    />
-
     <TfSelectionDetails
       :selected-machines="selectedMachines"
       :nodes-lock="nodesLock"
@@ -108,6 +102,9 @@
         wireguard: $props.modelValue.wireguard,
       }"
       v-model="$props.modelValue.selectionDetails"
+      v-model:rentedByMe="$props.modelValue.rentedByMe"
+      v-model:dedicated="$props.modelValue.dedicated"
+      v-model:certified="$props.modelValue.certified"
     />
   </div>
 </template>
@@ -120,7 +117,6 @@ import { computed, type PropType } from "vue";
 import { useGrid } from "@/stores";
 import type { SelectedMachine } from "@/types/nodeSelector";
 
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks from "../components/networks.vue";
 import type { K8SWorker } from "../types";
 import { generateName } from "../utils/strings";
@@ -162,7 +158,7 @@ function toMachine(worker?: K8SWorker): SelectedMachine | undefined {
 
 export default {
   name: "K8SWorker",
-  components: { RootFsSize, Networks, TfRentalFilterSwitches },
+  components: { RootFsSize, Networks },
   props: {
     modelValue: {
       type: Object as PropType<K8SWorker>,
diff --git a/packages/playground/src/components/node_selector/TfSelectionDetails.vue b/packages/playground/src/components/node_selector/TfSelectionDetails.vue
index 93bf36ac04..d5a9921d73 100644
--- a/packages/playground/src/components/node_selector/TfSelectionDetails.vue
+++ b/packages/playground/src/components/node_selector/TfSelectionDetails.vue
@@ -2,7 +2,21 @@
   <section class="mt-4">
     <template v-if="!disableNodeSelection">
       <h3 class="bg-primary pa-2 text-h6 rounded">Node Selection</h3>
-      <p class="text-h6 mb-4 mt-2 ml-2">Choose a way to select Node</p>
+
+      <TfRentalFilterSwitches
+        :rentedByMe="rentedByMe"
+        :dedicated="dedicated"
+        :certified="certified"
+        :hasGPU="hasGPU"
+        :showGPU="showGPU"
+        @update:rentedByMe="$emit('update:rentedByMe', $event)"
+        @update:dedicated="$emit('update:dedicated', $event)"
+        @update:certified="$emit('update:certified', $event)"
+        @update:hasGPU="$emit('update:hasGPU', $event)"
+        class="my-2"
+      />
+
+      <p class="text-h6 mb-4 ml-2">Choose a way to select Node</p>
 
       <v-radio-group v-model="wayToSelect" color="primary" inline>
         <InputTooltip
@@ -95,6 +109,7 @@ import type {
   SelectionDetailsFiltersValidators,
 } from "../../types/nodeSelector";
 import { createSelectionDetailsFiltersValidator } from "../../utils/nodeSelector";
+import TfRentalFilterSwitches from "../filters/TfRentalFilterSwitches.vue";
 import TfAutoNodeSelector from "./TfAutoNodeSelector.vue";
 import TfDomainName from "./TfDomainName.vue";
 import TfManualNodeSelector from "./TfManualNodeSelector.vue";
@@ -104,7 +119,15 @@ import TfSelectLocation from "./TfSelectLocation.vue";
 
 export default {
   name: "TfSelectionDetails",
-  components: { TfSelectLocation, TfSelectFarm, TfAutoNodeSelector, TfManualNodeSelector, TfSelectGpu, TfDomainName },
+  components: {
+    TfRentalFilterSwitches,
+    TfSelectLocation,
+    TfSelectFarm,
+    TfAutoNodeSelector,
+    TfManualNodeSelector,
+    TfSelectGpu,
+    TfDomainName,
+  },
   props: {
     modelValue: Object as PropType<SelectionDetails>,
     filters: {
@@ -128,10 +151,19 @@ export default {
       default: () => [],
     },
     nodesLock: Object as PropType<AwaitLock>,
+    rentedByMe: Boolean,
+    dedicated: Boolean,
+    certified: Boolean,
+    hasGPU: Boolean,
+    showGPU: Boolean,
   },
   emits: {
     "update:model-value": (value: SelectionDetails) => true || value,
     "update:status": (value: ValidatorStatus) => true || value,
+    "update:rentedByMe": (value: boolean) => true || value,
+    "update:dedicated": (value: boolean) => true || value,
+    "update:certified": (value: boolean) => true || value,
+    "update:hasGPU": (value: boolean) => true || value,
   },
   setup(props, ctx) {
     const input = ref<HTMLElement>();
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index 348f93db56..f0d75432eb 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -68,12 +68,6 @@
         </input-tooltip>
       </AlgorandCapacity>
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters-validators="{
           cpu: { min: type === 'relay' || type === 'indexer' ? 4 : 2 },
@@ -101,6 +95,9 @@
           wireguard,
         }"
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -216,7 +213,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import { FLISTS, type GridClient } from "@threefold/grid_client";
 
 import AlgorandCapacity from "../components/algorand_capacity.vue";
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -226,6 +222,6 @@ import { normalizeError } from "../utils/helpers";
 
 export default {
   name: "TfAlgorand",
-  components: { AlgorandCapacity, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
+  components: { AlgorandCapacity, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 1ef3dd9d2d..2ecc733194 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -47,12 +47,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4,
@@ -70,6 +64,9 @@
         }"
         require-domain
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -211,7 +208,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -221,6 +217,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFCasperlabs",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index d7eda05713..0f66c10a77 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -69,12 +69,6 @@
           :has-smtp="true"
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -92,6 +86,9 @@
           }"
           require-domain
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
         />
 
         <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -272,7 +269,6 @@ watch(
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
@@ -288,7 +284,6 @@ export default {
     SelectSolutionFlavor,
     Networks,
     ManageSshDeployemnt,
-    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_freeflow.vue b/packages/playground/src/weblets/tf_freeflow.vue
index 1a4555e0d7..e5036023ed 100644
--- a/packages/playground/src/weblets/tf_freeflow.vue
+++ b/packages/playground/src/weblets/tf_freeflow.vue
@@ -58,12 +58,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4,
@@ -82,6 +76,9 @@
         }"
         require-domain
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -221,7 +218,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -231,6 +227,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFFreeflow",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_full_vm.vue b/packages/playground/src/weblets/tf_full_vm.vue
index 76ff9c3c9b..b774c5ed24 100644
--- a/packages/playground/src/weblets/tf_full_vm.vue
+++ b/packages/playground/src/weblets/tf_full_vm.vue
@@ -54,14 +54,6 @@
           v-model:wireguard="wireguard"
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-          v-model:hasGPU="hasGPU"
-          :show-GPU="true"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -80,6 +72,11 @@
             wireguard,
           }"
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+          v-model:hasGPU="hasGPU"
+          :showGPU="true"
         />
 
         <!-- Manage the selected keys and send them to the deployment as env var -->
@@ -267,7 +264,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import { FLISTS, type GridClient } from "@threefold/grid_client";
 
 import ExpandableLayout from "../components/expandable_layout.vue";
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SelectVmImage, { type VmImage } from "../components/select_vm_image.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -282,7 +278,6 @@ export default {
     SelectSolutionFlavor,
     ExpandableLayout,
     ManageSshDeployemnt,
-    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 93974d2aea..da1cada16f 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -99,12 +99,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4,
@@ -122,6 +116,9 @@
         }"
         require-domain
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -273,7 +270,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -283,6 +279,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TfFunkwhale",
-  components: { SelectSolutionFlavor, Networks, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_gitea.vue b/packages/playground/src/weblets/tf_gitea.vue
index 6297ecfe01..0ab640a47a 100644
--- a/packages/playground/src/weblets/tf_gitea.vue
+++ b/packages/playground/src/weblets/tf_gitea.vue
@@ -57,12 +57,6 @@
           :has-smtp="smtp.enabled"
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -80,6 +74,9 @@
             wireguard,
           }"
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           require-domain
         />
 
@@ -234,7 +231,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import type { GridClient, VM } from "@threefold/grid_client";
 import { FLISTS } from "@threefold/grid_client";
 
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -252,7 +248,6 @@ export default {
     ManageSshDeployemnt,
     SelectSolutionFlavor,
     SmtpServer,
-    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_jenkins.vue b/packages/playground/src/weblets/tf_jenkins.vue
index 11f03bf532..309dbbcd6e 100644
--- a/packages/playground/src/weblets/tf_jenkins.vue
+++ b/packages/playground/src/weblets/tf_jenkins.vue
@@ -79,12 +79,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4,
@@ -102,6 +96,9 @@
         }"
         require-domain
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -249,7 +246,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -259,6 +255,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "Jenkins",
-  components: { SelectSolutionFlavor, Networks, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_jitsi.vue b/packages/playground/src/weblets/tf_jitsi.vue
index 4ed7e0dea1..de80810920 100644
--- a/packages/playground/src/weblets/tf_jitsi.vue
+++ b/packages/playground/src/weblets/tf_jitsi.vue
@@ -48,12 +48,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4,
@@ -71,6 +65,9 @@
         }"
         require-domain
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -211,7 +208,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -221,6 +217,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFJitsi",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 87b897580a..dc056a6ed2 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -53,12 +53,6 @@
           :required-ipv4="smtp.enabled"
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -76,6 +70,9 @@
           }"
           require-domain
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
         />
 
         <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -238,7 +235,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 <script lang="ts">
 import { updateGrid } from "@/utils/grid";
 
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
@@ -254,7 +250,6 @@ export default {
     SelectSolutionFlavor,
     Networks,
     ManageSshDeployemnt,
-    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_micro_vm.vue b/packages/playground/src/weblets/tf_micro_vm.vue
index c1e89d93d9..503392009a 100644
--- a/packages/playground/src/weblets/tf_micro_vm.vue
+++ b/packages/playground/src/weblets/tf_micro_vm.vue
@@ -56,12 +56,6 @@
           v-model:wireguard="wireguard"
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -78,6 +72,9 @@
             wireguard,
           }"
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
         />
 
         <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -299,7 +296,6 @@ watch(selectedSSHKeys, layoutMount, { deep: true });
 import { FLISTS, type GridClient } from "@threefold/grid_client";
 
 import ExpandableLayout from "../components/expandable_layout.vue";
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import type { VmImage } from "../components/select_vm_image.vue";
 import SelectVmImage from "../components/select_vm_image.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -316,7 +312,6 @@ export default {
     SelectVmImage,
     SelectSolutionFlavor,
     ExpandableLayout,
-    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 8482723500..b7d08621d8 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -46,12 +46,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4,
@@ -69,6 +63,9 @@
         }"
         require-domain
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -224,7 +221,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -234,6 +230,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFNextcloud",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 02989d38eb..5bec864d3d 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -47,12 +47,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4: ipv4,
@@ -68,6 +62,9 @@
           wireguard,
         }"
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         require-domain
       />
 
@@ -208,7 +205,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import type { GridClient, VM } from "@threefold/grid_client";
 import { FLISTS } from "@threefold/grid_client";
 
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -220,6 +216,6 @@ import { normalizeError } from "../utils/helpers";
 
 export default {
   name: "NodePilot",
-  components: { ManageSshDeployemnt, SelectSolutionFlavor, TfRentalFilterSwitches },
+  components: { ManageSshDeployemnt, SelectSolutionFlavor },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_nostr.vue b/packages/playground/src/weblets/tf_nostr.vue
index d0e460b3ef..707851761b 100644
--- a/packages/playground/src/weblets/tf_nostr.vue
+++ b/packages/playground/src/weblets/tf_nostr.vue
@@ -49,12 +49,6 @@
           require-domain
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -72,6 +66,9 @@
             wireguard,
           }"
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           require-domain
         />
 
@@ -210,7 +207,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import type { GridClient, VM } from "@threefold/grid_client";
 import { FLISTS } from "@threefold/grid_client";
 
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -226,7 +222,6 @@ export default {
   components: {
     ManageSshDeployemnt,
     SelectSolutionFlavor,
-    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_openwebui.vue b/packages/playground/src/weblets/tf_openwebui.vue
index 5867f133eb..bf63063993 100644
--- a/packages/playground/src/weblets/tf_openwebui.vue
+++ b/packages/playground/src/weblets/tf_openwebui.vue
@@ -49,14 +49,6 @@
           require-domain
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-          v-model:hasGPU="hasGPU"
-          :show-GPU="true"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -76,6 +68,11 @@
           }"
           require-domain
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+          v-model:hasGPU="hasGPU"
+          :showGPU="true"
         />
 
         <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -248,7 +245,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 <script lang="ts">
 import type { GridClient } from "@threefold/grid_client";
 
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -260,7 +256,6 @@ export default {
   components: {
     SelectSolutionFlavor,
     ManageSshDeployemnt,
-    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index 5e5f3b37f4..f24bb4ae87 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -90,12 +90,6 @@
           :has-smtp="smtp.enabled"
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -113,6 +107,9 @@
           }"
           require-domain
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
         />
 
         <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -283,7 +280,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
@@ -300,7 +296,6 @@ export default {
     SelectSolutionFlavor,
     Networks,
     ManageSshDeployemnt,
-    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index 4c47c35f95..c2322e775d 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -73,12 +73,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4,
@@ -96,6 +90,9 @@
         }"
         require-domain
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -243,7 +240,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -254,6 +250,6 @@ import { normalizeError } from "../utils/helpers";
 
 export default {
   name: "TfPeertube",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 102572bd19..56c49772f2 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -66,12 +66,6 @@
           v-model:wireguard="wireguard"
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -89,6 +83,9 @@
             wireguard,
           }"
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
         />
 
         <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -225,7 +222,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 <script lang="ts">
 import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/grid_client";
 
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
@@ -233,6 +229,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFPresearch",
-  component: { ManageSshDeployemnt, TfRentalFilterSwitches },
+  component: { ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index fadc133ec1..3a3874c6c9 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -72,12 +72,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4,
@@ -95,6 +89,9 @@
         }"
         require-domain
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
     </d-tabs>
@@ -270,7 +267,6 @@ async function isGithubRepoExist(gitUrl: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -279,6 +275,6 @@ import type { SelectionDetails } from "../types/nodeSelector";
 
 export default {
   name: "TfStaticWebsite",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 0baa583cfd..ed4caa992d 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -61,12 +61,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4,
@@ -84,6 +78,9 @@
         }"
         require-domain
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -231,7 +228,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -241,6 +237,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TfSubsquid",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 992e76e49e..8466055e3e 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -102,12 +102,6 @@
           :has-smtp="smtp.enabled"
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -125,6 +119,9 @@
           }"
           require-domain
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
         />
 
         <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -294,7 +291,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
@@ -311,7 +307,6 @@ export default {
     SelectSolutionFlavor,
     Networks,
     ManageSshDeployemnt,
-    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_tfrobot.vue b/packages/playground/src/weblets/tf_tfrobot.vue
index 2d32bc320f..8916010098 100644
--- a/packages/playground/src/weblets/tf_tfrobot.vue
+++ b/packages/playground/src/weblets/tf_tfrobot.vue
@@ -55,12 +55,6 @@
           v-model:wireguard="wireguard"
         />
 
-        <TfRentalFilterSwitches
-          v-model:rentedByMe="rentedByMe"
-          v-model:dedicated="dedicated"
-          v-model:certified="certified"
-        />
-
         <TfSelectionDetails
           :filters="{
             ipv4,
@@ -78,6 +72,9 @@
             wireguard,
           }"
           v-model="selectionDetails"
+          v-model:rentedByMe="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
         />
 
         <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -284,7 +281,6 @@ watch(selectedSSHKeys, layoutMount, { deep: true });
 import { FLISTS, type GridClient } from "@threefold/grid_client";
 
 import ExpandableLayout from "../components/expandable_layout.vue";
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -299,7 +295,6 @@ export default {
   components: {
     SelectSolutionFlavor,
     ExpandableLayout,
-    TfRentalFilterSwitches,
   },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 4277250580..3bbf5dfe62 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -83,12 +83,6 @@
         :large="{ cpu: 4, memory: 16, disk: 100 }"
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters-validators="{
           solutionDisk: { min: 10 },
@@ -109,6 +103,9 @@
           wireguard,
         }"
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -226,7 +223,6 @@ import { calculateRootFileSystem, FLISTS, type GridClient } from "@threefold/gri
 
 import { updateGrid } from "@/utils/grid";
 
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -234,6 +230,6 @@ import type { SelectionDetails } from "../types/nodeSelector";
 
 export default {
   name: "TfUmbrel",
-  components: { SelectSolutionFlavor, ManageSshDeployemnt, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index d78351813e..b243a6eb34 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -100,12 +100,6 @@
         require-domain
       />
 
-      <TfRentalFilterSwitches
-        v-model:rentedByMe="rentedByMe"
-        v-model:dedicated="dedicated"
-        v-model:certified="certified"
-      />
-
       <TfSelectionDetails
         :filters="{
           ipv4,
@@ -123,6 +117,9 @@
         }"
         require-domain
         v-model="selectionDetails"
+        v-model:rentedByMe="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -273,7 +270,6 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import TfRentalFilterSwitches from "../components/filters/TfRentalFilterSwitches.vue";
 import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
@@ -282,6 +278,6 @@ import type { SelectionDetails } from "../types/nodeSelector";
 
 export default {
   name: "TFWordpress",
-  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt, TfRentalFilterSwitches },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>