diff --git a/packages/playground/src/components/caprover_worker.vue b/packages/playground/src/components/caprover_worker.vue
index 93283b0ccc..d256579796 100644
--- a/packages/playground/src/components/caprover_worker.vue
+++ b/packages/playground/src/components/caprover_worker.vue
@@ -31,18 +31,12 @@
       required
       :ipv4="$props.modelValue.ipv4"
     />
-    <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-    <v-switch v-model="$props.modelValue.rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-    <!-- </input-tooltip> -->
-    <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-      <v-switch v-model="$props.modelValue.dedicated" color="primary" inset label="Rentable" hide-details />
-    </input-tooltip>
-    <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-      <v-switch v-model="$props.modelValue.certified" color="primary" inset label="Certified" hide-details />
-    </input-tooltip>
 
     <TfSelectionDetails
       v-model="$props.modelValue.selectionDetails"
+      v-model:rented-by-me="$props.modelValue.rentedByMe"
+      v-model:dedicated="$props.modelValue.dedicated"
+      v-model:certified="$props.modelValue.certified"
       :selected-machines="selectedMachines"
       :nodes-lock="nodesLock"
       :filters="{
@@ -70,7 +64,6 @@ import { computed, type PropType } from "vue";
 
 import { useGrid } from "@/stores";
 import type { SelectedMachine } from "@/types/nodeSelector";
-import { manual } from "@/utils/manual";
 
 import Networks from "../components/networks.vue";
 import type { CaproverWorker } from "../types";
@@ -142,7 +135,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..2bd5c295f9
--- /dev/null
+++ b/packages/playground/src/components/filters/TfRentalFilterSwitches.vue
@@ -0,0 +1,71 @@
+<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 v-model="hasGPUModel" color="primary" inset label="GPU" hide-details />
+    </input-tooltip>
+
+    <v-switch v-model="rentedByMeModel" color="primary" inset label="Rented By Me" hide-details />
+
+    <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual?.dedicated_machines">
+      <v-switch v-model="dedicatedModel" color="primary" inset label="Rentable" hide-details />
+    </input-tooltip>
+
+    <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
+      <v-switch v-model="certifiedModel" color="primary" inset label="Certified" hide-details />
+    </input-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { manual } from "@/utils/manual";
+import { solutionType } from "@/types";
+
+import { useRoute } from "vue-router";
+
+const props = defineProps({
+  rentedByMe: Boolean,
+  dedicated: Boolean,
+  certified: Boolean,
+  hasGPU: Boolean,
+});
+const emit = defineEmits(["update:rentedByMe", "update:dedicated", "update:certified", "update:hasGPU"]);
+
+const route = useRoute();
+
+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),
+});
+
+const showGPU = computed(() => route.meta.title == solutionType.fullvm || route.meta.title == solutionType.openwebui);
+</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 bfa3a8d1b6..62984ef6d8 100644
--- a/packages/playground/src/components/k8s_worker.vue
+++ b/packages/playground/src/components/k8s_worker.vue
@@ -76,19 +76,11 @@
       :memory="$props.modelValue.memory"
     />
 
-    <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-    <v-switch v-model="$props.modelValue.rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-    <!-- </input-tooltip> -->
-    <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-      <v-switch v-model="$props.modelValue.dedicated" color="primary" inset label="Rentable" hide-details />
-    </input-tooltip>
-
-    <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-      <v-switch v-model="$props.modelValue.certified" color="primary" inset label="Certified" hide-details />
-    </input-tooltip>
-
     <TfSelectionDetails
       v-model="$props.modelValue.selectionDetails"
+      v-model:rented-by-me="$props.modelValue.rentedByMe"
+      v-model:dedicated="$props.modelValue.dedicated"
+      v-model:certified="$props.modelValue.certified"
       :selected-machines="selectedMachines"
       :nodes-lock="nodesLock"
       :filters-validators="{
@@ -124,7 +116,6 @@ import { computed, type PropType } from "vue";
 
 import { useGrid } from "@/stores";
 import type { SelectedMachine } from "@/types/nodeSelector";
-import { manual } from "@/utils/manual";
 
 import Networks from "../components/networks.vue";
 import type { K8SWorker } from "../types";
@@ -193,7 +184,7 @@ export default {
       }, [] as SelectedMachine[]);
     });
 
-    return { calculateRootFileSystem, manual, selectedMachines, rentedBy };
+    return { calculateRootFileSystem, selectedMachines, rentedBy };
   },
 };
 </script>
diff --git a/packages/playground/src/components/node_selector/TfSelectionDetails.vue b/packages/playground/src/components/node_selector/TfSelectionDetails.vue
index a77fbf3b88..4f5d284f97 100644
--- a/packages/playground/src/components/node_selector/TfSelectionDetails.vue
+++ b/packages/playground/src/components/node_selector/TfSelectionDetails.vue
@@ -4,26 +4,62 @@
       <h3 class="bg-primary pa-2 text-h6 rounded">
         Node Selection
       </h3>
-      <p class="text-h6 mb-4 mt-2 ml-2">
+
+      <TfRentalFilterSwitches
+        :rented-by-me="rentedByMe"
+        :dedicated="dedicated"
+        :certified="certified"
+        :has-g-p-u="hasGPU"
+        class="my-2"
+        @update:rented-by-me="$emit('update:rentedByMe', $event)"
+        @update:dedicated="$emit('update:dedicated', $event)"
+        @update:certified="$emit('update:certified', $event)"
+        @update:has-g-p-u="$emit('update:hasGPU', $event)"
+      />
+
+      <p class="text-h6 mb-4 ml-2">
         Choose a way to select Node
       </p>
 
-      <v-radio-group v-model="wayToSelect" color="primary" inline>
+      <v-radio-group
+        v-model="wayToSelect"
+        color="primary"
+        inline
+      >
         <InputTooltip
           align-center
           tooltip="Automatically select your node by filtering with Region, country, or farm name"
         >
-          <v-radio label="Automated" value="automated" />
+          <v-radio
+            label="Automated"
+            value="automated"
+          />
         </InputTooltip>
-        <InputTooltip align-center tooltip="Manually select your node by entering its id">
-          <v-radio label="Manual" value="manual" class="ml-5" />
+        <InputTooltip
+          align-center
+          tooltip="Manually select your node by entering its id"
+        >
+          <v-radio
+            label="Manual"
+            value="manual"
+            class="ml-5"
+          />
         </InputTooltip>
       </v-radio-group>
 
       <div ref="input">
         <template v-if="wayToSelect === 'automated'">
-          <TfSelectLocation v-model="location" title="Choose a Location" :status="NodeStatus.Up" />
-          <TfSelectFarm v-model="farm" :valid-filters="validFilters" :filters="filters" :location="location" />
+          <TfSelectLocation
+            v-model="location"
+            title="Choose a Location"
+            :status="NodeStatus.Up"
+          />
+          <TfSelectFarm
+            v-model="farm"
+            :valid-filters="validFilters"
+            :filters="filters"
+            :location="location"
+          />
           <TfAutoNodeSelector
             v-model="node"
             v-model:status="nodeStatus"
@@ -99,6 +135,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";
@@ -108,7 +145,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: {
@@ -132,10 +177,18 @@ export default {
       default: () => [],
     },
     nodesLock: Object as PropType<AwaitLock>,
+    rentedByMe: Boolean,
+    dedicated: Boolean,
+    certified: Boolean,
+    hasGPU: Boolean,
   },
   emits: {
     "update:model-value": (value: SelectionDetails) => true || value,
     "update:status": (value: ValidatorStatus) => true || value,
+    "update:rentedByMe": (value: boolean) => value,
+    "update:dedicated": (value: boolean) => value,
+    "update:certified": (value: boolean) => value,
+    "update:hasGPU": (value: boolean) => 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 7cb478ae1a..47b75dc4df 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -68,19 +68,11 @@
         </input-tooltip>
       </AlgorandCapacity>
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters-validators="{
           cpu: { min: type === 'relay' || type === 'indexer' ? 4 : 2 },
           memory: { min: type === 'relay' || type === 'indexer' ? 8192 : 4096 },
@@ -124,8 +116,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";
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 1f69b1de86..eace5a447a 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -47,19 +47,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4,
           ipv6,
@@ -95,8 +87,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";
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index eeabb50caf..b7833a5999 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -69,19 +69,11 @@
           :has-smtp="true"
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
-
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           :filters="{
             ipv4,
             ipv6,
@@ -126,8 +118,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";
diff --git a/packages/playground/src/weblets/tf_freeflow.vue b/packages/playground/src/weblets/tf_freeflow.vue
index 4ac228789f..08c501a2ab 100644
--- a/packages/playground/src/weblets/tf_freeflow.vue
+++ b/packages/playground/src/weblets/tf_freeflow.vue
@@ -57,19 +57,12 @@
         :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
         require-domain
       />
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
 
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4,
           ipv6,
@@ -101,8 +94,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";
diff --git a/packages/playground/src/weblets/tf_full_vm.vue b/packages/playground/src/weblets/tf_full_vm.vue
index 15e4bd8f2a..1eac7329e4 100644
--- a/packages/playground/src/weblets/tf_full_vm.vue
+++ b/packages/playground/src/weblets/tf_full_vm.vue
@@ -53,28 +53,13 @@
           v-model:wireguard="wireguard"
           required
         />
-        <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 v-model="hasGPU" color="primary" inset label="GPU" hide-details />
-        </input-tooltip>
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
 
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+          v-model:has-g-p-u="hasGPU"
           :filters="{
             ipv4,
             ipv6,
@@ -152,8 +137,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";
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 80d97af521..3b72b54e1a 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -99,19 +99,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4,
           ipv6,
@@ -147,8 +139,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";
diff --git a/packages/playground/src/weblets/tf_gitea.vue b/packages/playground/src/weblets/tf_gitea.vue
index 7516d41917..60d07f9ab1 100644
--- a/packages/playground/src/weblets/tf_gitea.vue
+++ b/packages/playground/src/weblets/tf_gitea.vue
@@ -57,19 +57,11 @@
           :has-smtp="smtp.enabled"
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
-
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           :filters="{
             ipv4,
             ipv6,
@@ -111,8 +103,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";
diff --git a/packages/playground/src/weblets/tf_jenkins.vue b/packages/playground/src/weblets/tf_jenkins.vue
index c74a889043..1b58cfc2f3 100644
--- a/packages/playground/src/weblets/tf_jenkins.vue
+++ b/packages/playground/src/weblets/tf_jenkins.vue
@@ -79,19 +79,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4,
           ipv6,
@@ -127,8 +119,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";
diff --git a/packages/playground/src/weblets/tf_jitsi.vue b/packages/playground/src/weblets/tf_jitsi.vue
index a3982ca280..250d6fbfff 100644
--- a/packages/playground/src/weblets/tf_jitsi.vue
+++ b/packages/playground/src/weblets/tf_jitsi.vue
@@ -48,19 +48,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4,
           ipv6,
@@ -96,8 +88,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";
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 9be5f10236..94920a49a8 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -53,19 +53,11 @@
           :required-ipv4="smtp.enabled"
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
-
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           :filters="{
             ipv4,
             ipv6,
@@ -105,8 +97,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";
diff --git a/packages/playground/src/weblets/tf_micro_vm.vue b/packages/playground/src/weblets/tf_micro_vm.vue
index a2959a6c15..3f3735dca6 100644
--- a/packages/playground/src/weblets/tf_micro_vm.vue
+++ b/packages/playground/src/weblets/tf_micro_vm.vue
@@ -56,20 +56,11 @@
           required
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-        <!-- </input-tooltip> -->
-
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
-
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           :filters="{
             ipv4,
             ipv6,
@@ -194,8 +185,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";
@@ -314,7 +303,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 {
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 47de579a9d..40cf1b4f10 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -46,19 +46,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4,
           ipv6,
@@ -94,8 +86,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";
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index e8ea57d0dc..bbb542c5eb 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -47,19 +47,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4: ipv4,
           certified,
@@ -93,8 +85,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";
diff --git a/packages/playground/src/weblets/tf_nostr.vue b/packages/playground/src/weblets/tf_nostr.vue
index 19d41f9f37..1861ba8026 100644
--- a/packages/playground/src/weblets/tf_nostr.vue
+++ b/packages/playground/src/weblets/tf_nostr.vue
@@ -48,19 +48,12 @@
           :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
           require-domain
         />
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
 
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           :filters="{
             ipv4,
             ipv6,
@@ -97,8 +90,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";
diff --git a/packages/playground/src/weblets/tf_openwebui.vue b/packages/playground/src/weblets/tf_openwebui.vue
index f0d9323f68..478e0bf2e0 100644
--- a/packages/playground/src/weblets/tf_openwebui.vue
+++ b/packages/playground/src/weblets/tf_openwebui.vue
@@ -48,28 +48,13 @@
           :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 v-model="hasGPU" color="primary" inset label="GPU" hide-details />
-        </input-tooltip>
-
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
 
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
+          v-model:has-g-p-u="hasGPU"
           :filters="{
             ipv4,
             ipv6,
@@ -107,8 +92,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";
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index fc4c8529c7..83817d92b1 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -89,19 +89,12 @@
           require-domain
           :has-smtp="smtp.enabled"
         />
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
 
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           :filters="{
             ipv4,
             ipv6,
@@ -144,8 +137,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";
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index 27b8c4b706..36445f9f7e 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -73,19 +73,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4,
           ipv6,
@@ -121,8 +113,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";
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 384e3890e9..30228c32ed 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -66,18 +66,11 @@
           required
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
-
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           :filters="{
             ipv4,
             ipv6,
@@ -127,8 +120,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";
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index 6798359e62..3183fb45a2 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -72,19 +72,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4,
           ipv6,
@@ -119,8 +111,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";
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 257f9ff5fa..2acfb0fa6c 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -61,19 +61,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4,
           ipv6,
@@ -109,8 +101,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";
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index 1641990bbb..ad8d022a40 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -102,19 +102,11 @@
           :has-smtp="smtp.enabled"
         />
 
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
-
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           :filters="{
             ipv4,
             ipv6,
@@ -157,8 +149,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";
diff --git a/packages/playground/src/weblets/tf_tfrobot.vue b/packages/playground/src/weblets/tf_tfrobot.vue
index 4f1372a59a..e518e9edd4 100644
--- a/packages/playground/src/weblets/tf_tfrobot.vue
+++ b/packages/playground/src/weblets/tf_tfrobot.vue
@@ -54,19 +54,12 @@
           v-model:wireguard="wireguard"
           required
         />
-        <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-        <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-        <!-- </input-tooltip> -->
-        <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-          <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-        </input-tooltip>
-
-        <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-          <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-        </input-tooltip>
 
         <TfSelectionDetails
           v-model="selectionDetails"
+          v-model:rented-by-me="rentedByMe"
+          v-model:dedicated="dedicated"
+          v-model:certified="certified"
           :filters="{
             ipv4,
             ipv6,
@@ -192,8 +185,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";
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index b2c4ae02a9..4de0dd7afb 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -83,19 +83,11 @@
         :large="{ cpu: 4, memory: 16, disk: 100 }"
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters-validators="{
           solutionDisk: { min: 10 },
         }"
@@ -133,8 +125,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";
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index 64dbe70128..3e47618222 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -100,19 +100,11 @@
         require-domain
       />
 
-      <!-- <input-tooltip inline tooltip="" :href="manual"> -->
-      <v-switch v-model="rentedByMe" color="primary" inset label="Rented By Me" hide-details />
-      <!-- </input-tooltip> -->
-      <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
-        <v-switch v-model="dedicated" color="primary" inset label="Rentable" hide-details />
-      </input-tooltip>
-
-      <input-tooltip inline tooltip="Renting capacity on certified nodes is charged 25% extra.">
-        <v-switch v-model="certified" color="primary" inset label="Certified" hide-details />
-      </input-tooltip>
-
       <TfSelectionDetails
         v-model="selectionDetails"
+        v-model:rented-by-me="rentedByMe"
+        v-model:dedicated="dedicated"
+        v-model:certified="certified"
         :filters="{
           ipv4,
           ipv6,
@@ -149,7 +141,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";