diff --git a/packages/grid_client/tests/README.md b/packages/grid_client/tests/README.md
index d9fa640695..149bcaa896 100644
--- a/packages/grid_client/tests/README.md
+++ b/packages/grid_client/tests/README.md
@@ -42,5 +42,5 @@ yarn test --runInBand
 > `--coverage`: Collect and report coverage.
 > `--colors`: Force colorful output.
 > `--forceExit`: Force the process to exit after tests complete.
-> 
+>
 > **Note:** Some tests are using Mycelium for the SSH connection, which is why it is important for Mycelium to be running.
diff --git a/packages/playground/public/info/jenkins.md b/packages/playground/public/info/jenkins.md
index 30967363d3..7fe116ac44 100644
--- a/packages/playground/public/info/jenkins.md
+++ b/packages/playground/public/info/jenkins.md
@@ -2,4 +2,4 @@
 title: Jenkins
 ---
 
-Jenkins is a popular open-source automation server that enables developers to build, test, and deploy their applications continuously. For more details, check [Jenkins documentation](https://www.manual.grid.tf/documentation/dashboard/solutions/jenkins.html).
\ No newline at end of file
+Jenkins is a popular open-source automation server that enables developers to build, test, and deploy their applications continuously. For more details, check [Jenkins documentation](https://www.manual.grid.tf/documentation/dashboard/solutions/jenkins.html).
diff --git a/packages/playground/src/components/NetworkItem.vue b/packages/playground/src/components/NetworkItem.vue
new file mode 100644
index 0000000000..26ba750687
--- /dev/null
+++ b/packages/playground/src/components/NetworkItem.vue
@@ -0,0 +1,38 @@
+<template>
+  <input-tooltip v-if="value !== null" inline :tooltip="tooltipText">
+    <v-switch
+      hide-details
+      color="primary"
+      inset
+      :label="label"
+      :model-value="value"
+      @update:model-value="callEmitFunction($event ?? false)"
+      :readonly="readonly"
+      :style="{ opacity: readonly ? 0.5 : 1 }"
+    />
+  </input-tooltip>
+</template>
+
+<script lang="ts">
+import { computed, type PropType } from "vue";
+
+export default {
+  name: "NetworkItem",
+  props: {
+    tooltipText: { type: String, required: true },
+    label: { type: String, required: true },
+    value: Boolean as PropType<boolean | null | undefined>,
+    emitFunction: Function as PropType<any>,
+  },
+  setup(props) {
+    const readonly = computed(() => typeof props.emitFunction !== "function");
+    function callEmitFunction(value?: boolean): void {
+      if (typeof props.emitFunction === "function") {
+        props.emitFunction(value);
+      }
+    }
+
+    return { readonly, callEmitFunction };
+  },
+};
+</script>
diff --git a/packages/playground/src/components/applications/ApplicationCards.vue b/packages/playground/src/components/applications/ApplicationCards.vue
index 03c6295847..63edd33855 100644
--- a/packages/playground/src/components/applications/ApplicationCards.vue
+++ b/packages/playground/src/components/applications/ApplicationCards.vue
@@ -7,7 +7,7 @@
             <v-card
               :height="200"
               class="pa-3 pt-6"
-              style="width: 100%;" 
+              style="width: 100%"
               v-bind="props"
               :class="[
                 isHovering ? 'card-opacity' : undefined,
diff --git a/packages/playground/src/components/caprover_worker.vue b/packages/playground/src/components/caprover_worker.vue
index 705253bee5..9dd94ab18d 100644
--- a/packages/playground/src/components/caprover_worker.vue
+++ b/packages/playground/src/components/caprover_worker.vue
@@ -25,12 +25,11 @@
 
     <Networks
       required
-      v-model:ipv4="$props.modelValue.ipv4"
+      :ipv4="$props.modelValue.ipv4"
       v-model:ipv6="$props.modelValue.ipv6"
       v-model:planetary="$props.modelValue.planetary"
       v-model:mycelium="$props.modelValue.mycelium"
       v-model:wireguard="$props.modelValue.wireguard"
-      enableIpv4
     />
 
     <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
diff --git a/packages/playground/src/components/input_tooltip.vue b/packages/playground/src/components/input_tooltip.vue
index ea6c8bd83e..e2b536cc99 100644
--- a/packages/playground/src/components/input_tooltip.vue
+++ b/packages/playground/src/components/input_tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex" v-if="!disabled">
+  <div class="d-flex" v-if="!disabled" v-bind="$attrs">
     <v-tooltip :text="tooltip || 'None!'" :location="location" :width="width ? width : ''">
       <template #activator="{ props }">
         {{ getPropsRef(props) }}
diff --git a/packages/playground/src/components/networks.vue b/packages/playground/src/components/networks.vue
index ec32bce228..8fc92e0040 100644
--- a/packages/playground/src/components/networks.vue
+++ b/packages/playground/src/components/networks.vue
@@ -1,154 +1,110 @@
 <template>
-  <div ref="input">
-    <input-tooltip tooltip="Enable the network options to be able access your deployment">
-      <v-expansion-panels variant="inset" class="mb-4">
-        <v-expansion-panel expand-icon="mdi-menu-down" collapse-icon="mdi-menu-up" :disabled="$props.disabled">
-          <template v-slot:title>
-            <span class="text-h6">Network</span>
-            <v-chip v-if="error" variant="text">
-              <v-icon color="warning" icon="mdi-alert-circle" />
-            </v-chip>
-            <v-chip v-if="ipv4" variant="outlined" class="ml-2"> IPV4 </v-chip>
-            <v-chip v-if="ipv6" variant="outlined" class="ml-2"> IPV6 </v-chip>
-            <v-chip v-if="planetary" variant="outlined" class="ml-2"> Planetary </v-chip>
-            <v-chip v-if="mycelium" variant="outlined" class="ml-2"> Mycelium </v-chip>
-            <v-chip v-if="wireguard" variant="outlined" class="ml-2"> Wireguard </v-chip>
-          </template>
-          <v-expansion-panel-text>
-            <input-tooltip
-              v-if="ipv4 !== null"
-              inline
-              tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Public IPv4"
-                :readonly="enableIpv4"
-                :model-value="$props.ipv4"
-                @update:model-value="$emit('update:ipv4', $event ?? undefined)"
-                :style="enableIpv4 ? 'opacity: .5' : 'opacity: 1'"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="ipv6 !== null"
-              inline
-              tooltip="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Public IPv6"
-                :modelValue="$props.ipv6"
-                @update:modelValue="$emit('update:ipv6', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="planetary !== null"
-              inline
-              tooltip="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Planetary Network"
-                :modelValue="$props.planetary"
-                @update:modelValue="$emit('update:planetary', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <input-tooltip
-              v-if="mycelium !== null"
-              inline
-              tooltip="Mycelium is an IPv6 overlay network. Each node that joins the overlay network will receive an overlay network IP."
-            >
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Mycelium"
-                :modelValue="$props.mycelium"
-                @update:modelValue="$emit('update:mycelium', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <input-tooltip v-if="wireguard !== null" inline :tooltip="wireguardTooltip">
-              <v-switch
-                hide-details
-                color="primary"
-                inset
-                label="Add Wireguard Access"
-                :modelValue="$props.wireguard"
-                :readonly="$props.domain ? isWireguardReadOnly : false"
-                :style="$props.domain ? (isWireguardReadOnly ? 'opacity: .5' : 'opacity: 1') : 'opacity: 1'"
-                @update:modelValue="$emit('update:wireguard', $event ?? undefined)"
-              />
-            </input-tooltip>
-            <v-alert v-show="error" class="mb-2" type="warning" variant="tonal">
-              You must enable at least one of network options.
-            </v-alert>
-          </v-expansion-panel-text>
-        </v-expansion-panel>
-      </v-expansion-panels>
-    </input-tooltip>
-  </div>
+  <input-tooltip ref="input" tooltip="Enable the network options to be able access your deployment">
+    <v-expansion-panels variant="inset" class="mb-4">
+      <v-expansion-panel expand-icon="mdi-menu-down" collapse-icon="mdi-menu-up" :disabled="$props.disabled">
+        <v-expansion-panel-title>
+          <v-card-title class="py-0" v-text="'Network'" />
+          <v-icon v-if="error" color="warning" icon="mdi-alert-circle" class="ml-2" size="small" />
+          <v-chip v-if="ipv4" variant="outlined" class="ml-2" text="IPV4" />
+          <v-chip v-if="ipv6" variant="outlined" class="ml-2" text="IPV6" />
+          <v-chip v-if="planetary" variant="outlined" class="ml-2" text="Planetary" />
+          <v-chip v-if="mycelium" variant="outlined" class="ml-2" text="Mycelium" />
+          <v-chip v-if="wireguard" variant="outlined" class="ml-2" text="Wireguard" />
+        </v-expansion-panel-title>
+
+        <v-expansion-panel-text>
+          <NetworkItem
+            tooltip-text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
+            label="Public IPv4"
+            :value="$props.ipv4"
+            :emit-function="$attrs['onUpdate:ipv4']"
+          />
+
+          <NetworkItem
+            tooltip-text="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
+            label="Public IPv6"
+            :value="$props.ipv6"
+            :emit-function="$attrs['onUpdate:ipv6']"
+          />
+
+          <NetworkItem
+            tooltip-text="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
+            label="Planetary Network"
+            :value="$props.planetary"
+            :emit-function="$attrs['onUpdate:planetary']"
+          />
+
+          <NetworkItem
+            tooltip-text="Mycelium is an IPv6 overlay network. Each node that joins the overlay network will receive an overlay network IP."
+            label="Mycelium"
+            :value="$props.mycelium"
+            :emit-function="$attrs['onUpdate:mycelium']"
+          />
+
+          <NetworkItem
+            :tooltip-text="wireguardTooltip"
+            label="Add Wireguard Access"
+            :value="$props.wireguard"
+            :emit-function="readonlyWireguard ? undefined : $attrs['onUpdate:wireguard']"
+          />
+
+          <v-alert
+            v-if="error"
+            class="my-2"
+            type="warning"
+            variant="tonal"
+            text="You must enable at least one of network options."
+          />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </input-tooltip>
 </template>
 
 <script lang="ts">
 import { noop } from "lodash";
-import { computed, getCurrentInstance, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref, watch } from "vue";
 
 import { useForm, ValidatorStatus } from "@/hooks/form_validator";
 import type { InputValidatorService } from "@/hooks/input_validator";
-import type { DomainInfo } from "@/types/nodeSelector";
+
+import NetworkItem from "./NetworkItem.vue";
+
+interface CreateNetworksOptions {
+  ipv4: boolean;
+  ipv6: boolean;
+  planetary: boolean;
+  mycelium: boolean;
+  wireguard: boolean;
+}
+
+export function useNetworks(options: Partial<CreateNetworksOptions> = {}) {
+  return {
+    ipv4: ref(options.ipv4 ?? false),
+    ipv6: ref(options.ipv6 ?? false),
+    planetary: ref(options.planetary ?? false),
+    mycelium: ref(options.mycelium ?? true),
+    wireguard: ref(options.wireguard ?? false),
+  };
+}
 
 export default {
   name: "Network",
+  components: { NetworkItem },
   props: {
-    required: {
-      type: Boolean,
-      default: () => false,
-    },
-    ipv4: {
-      type: Boolean,
-      default: () => null,
-    },
-    ipv6: {
-      type: Boolean,
-      default: () => null,
-    },
-    planetary: {
-      type: Boolean,
-      default: () => null,
-    },
-    mycelium: {
-      type: Boolean,
-      default: () => null,
-    },
-    wireguard: {
-      type: Boolean,
-      default: () => null,
-    },
-    disabled: { type: Boolean },
-    enableIpv4: {
-      type: Boolean,
-      default: () => null,
-    },
-    domain: {
-      type: Object as PropType<DomainInfo>,
-      required: false,
-    },
-  },
-  emits: {
-    "update:ipv4": (value?: boolean) => value,
-    "update:ipv6": (value?: boolean) => value,
-    "update:planetary": (value?: boolean) => value,
-    "update:mycelium": (value?: boolean) => value,
-    "update:wireguard": (value?: boolean) => value,
+    required: { type: Boolean, default: () => false },
+    ipv4: { type: Boolean, default: () => null },
+    ipv6: { type: Boolean, default: () => null },
+    planetary: { type: Boolean, default: () => null },
+    mycelium: { type: Boolean, default: () => null },
+    wireguard: { type: Boolean, default: () => null },
+    requireDomain: { type: Boolean, default: () => false },
+    hasCustomDomain: { type: Boolean, default: () => false },
+    disabled: Boolean,
   },
-  setup(props, { expose, emit }) {
+  setup(props, { attrs }) {
     const input = ref();
+    const $el = computed(() => input.value?.$el);
 
     if (
       props.ipv4 === null &&
@@ -159,21 +115,13 @@ export default {
     ) {
       throw new Error("You must provide at least one network  option");
     }
-    const error = computed(
-      () => !(props.ipv4 || props.ipv6 || props.planetary || props.wireguard || props.mycelium) && props.required,
-    );
-    expose({
-      error,
+    const error = computed(() => {
+      return !(props.ipv4 || props.ipv6 || props.planetary || props.wireguard || props.mycelium) && props.required;
     });
 
     /* Adapter to work with old code validation */
     const { uid } = getCurrentInstance() as { uid: number };
     const form = useForm();
-    const wireguardTooltip = computed(() =>
-      props.domain
-        ? "Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections. Please note that this field will be read-only unless you use a custom domain with IPV4."
-        : "Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections.",
-    );
 
     const fakeService: InputValidatorService = {
       validate: () => Promise.resolve(true),
@@ -181,7 +129,7 @@ export default {
       reset: noop,
       status: ValidatorStatus.Valid,
       error: null,
-      $el: input,
+      $el,
       highlightOnError: true,
     };
 
@@ -193,26 +141,33 @@ export default {
       form?.updateStatus(uid.toString(), fakeService.status);
     });
 
-    const isWireguardReadOnly = computed(() => !(props.domain?.enabledCustomDomain && props.ipv4 === true));
+    const readonlyWireguard = computed(() => {
+      if (!props.requireDomain) return false;
+      return !(props.hasCustomDomain && props.ipv4);
+    });
+
+    const wireguardTooltip = computed(() =>
+      readonlyWireguard.value
+        ? "Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections. Please note that this field will be read-only unless you use a custom domain with IPV4."
+        : "Enabling WireGuard Access allows you to establish private, secure, and encrypted instance connections.",
+    );
 
     watch(
-      isWireguardReadOnly,
-      () => {
-        if (!props.wireguard) {
-          emit("update:wireguard", true);
-        }
-      },
-      {
-        immediate: true,
-        deep: true,
+      readonlyWireguard,
+      readonly => {
+        const fn = attrs["onUpdate:wireguard"];
+        if (readonly && !props.wireguard && typeof fn === "function") {
+          fn(true);
+        } else fn(false);
       },
+      { immediate: true },
     );
 
     return {
       error,
       input,
-      isWireguardReadOnly,
       wireguardTooltip,
+      readonlyWireguard,
     };
   },
 };
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index 322c591f19..83058900c6 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -46,14 +46,15 @@
         :large="{ cpu: 4, memory: 32, disk: 1000 }"
       />
 
-      <Network
+      <Networks
         required
         v-model:ipv4="ipv4"
         v-model:ipv6="ipv6"
         v-model:planetary="planetary"
         v-model:mycelium="mycelium"
         v-model:wireguard="wireguard"
-        :domain="selectionDetails?.domain"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -91,7 +92,7 @@
 
 <script lang="ts" setup>
 import { calculateRootFileSystem, type GridClient } from "@threefold/grid_client";
-import { computed, onMounted, type Ref, ref, watch } from "vue";
+import { computed, onMounted, type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
@@ -112,11 +113,7 @@ const flist = ref<Flist>();
 const disks = ref<Disk[]>([]);
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, wireguard, planetary, mycelium } = useNetworks();
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
 );
@@ -226,7 +223,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
@@ -235,6 +232,6 @@ import { updateGrid } from "../utils/grid";
 
 export default {
   name: "TFFreeflow",
-  components: { SelectSolutionFlavor, Network, ManageSshDeployemnt },
+  components: { SelectSolutionFlavor, Networks, ManageSshDeployemnt },
 };
 </script>
diff --git a/packages/playground/src/weblets/full_vm.vue b/packages/playground/src/weblets/full_vm.vue
index eb44042498..21bcb79df6 100644
--- a/packages/playground/src/weblets/full_vm.vue
+++ b/packages/playground/src/weblets/full_vm.vue
@@ -44,9 +44,8 @@
           v-model="solution"
         />
 
-        <Network
+        <Networks
           required
-          ref="network"
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:planetary="planetary"
@@ -142,9 +141,9 @@ import { computed, type Ref, ref, watch } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
-import { useGrid, useProfileManager } from "../stores";
+import { useGrid } from "../stores";
 import type { solutionFlavor as SolutionFlavor } from "../types";
 import { type Flist, ProjectName } from "../types";
 import { deployVM, type Disk } from "../utils/deploy_vm";
@@ -155,7 +154,6 @@ const selectionDetails = ref<SelectionDetails>();
 
 const layout = useLayout();
 const tabs = ref();
-const profileManager = useProfileManager();
 const solution = ref() as Ref<SolutionFlavor>;
 const images: VmImage[] = [
   {
@@ -188,15 +186,10 @@ const images: VmImage[] = [
 const selectedSSHKeys = ref("");
 const name = ref(generateName({ prefix: "vm" }));
 const flist = ref<Flist>();
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
-const wireguard = ref(false);
+const { ipv4, ipv6, mycelium, planetary, wireguard } = useNetworks();
 const dedicated = ref(false);
 const certified = ref(false);
 const disks = ref<Disk[]>([]);
-const network = ref();
 const hasGPU = ref(false);
 const rootFilesystemSize = computed(() =>
   flist.value?.name === "Ubuntu-24.04" || flist.value?.name === "Other" ? solution.value?.disk : 2,
diff --git a/packages/playground/src/weblets/jenkins.vue b/packages/playground/src/weblets/jenkins.vue
index 7b3f6b43a7..e33912e48b 100644
--- a/packages/playground/src/weblets/jenkins.vue
+++ b/packages/playground/src/weblets/jenkins.vue
@@ -68,7 +68,15 @@
         :large="{ cpu: 4, memory: 16, disk: 1000 }"
         v-model="solution"
       />
-      <Networks v-model:ipv4="ipv4" v-model:planetary="planetary" v-model:mycelium="mycelium" v-model:ipv6="ipv6" />
+      <Networks
+        v-model:ipv4="ipv4"
+        v-model:planetary="planetary"
+        v-model:mycelium="mycelium"
+        v-model:ipv6="ipv6"
+        v-model:wireguard="wireguard"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
+      />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
         <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
@@ -133,10 +141,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const mycelium = ref(true);
-const planetary = ref(true);
+const { ipv4, ipv6, mycelium, planetary, wireguard } = useNetworks();
 const selectionDetails = ref<SelectionDetails>();
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
@@ -173,7 +178,7 @@ async function deploy() {
     vm = await deployVM(grid!, {
       name: name.value,
       network: {
-        addAccess: selectionDetails.value!.domain!.enableSelectedDomain,
+        addAccess: wireguard.value || selectionDetails.value!.domain!.enableSelectedDomain,
         accessNodeId: selectionDetails.value?.domain?.selectedDomain?.nodeId,
       },
       machines: [
@@ -240,7 +245,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/micro_vm.vue b/packages/playground/src/weblets/micro_vm.vue
index c4359d016b..62eb3abfc9 100644
--- a/packages/playground/src/weblets/micro_vm.vue
+++ b/packages/playground/src/weblets/micro_vm.vue
@@ -46,14 +46,13 @@
           v-model="solution"
         />
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
-          ref="network"
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
@@ -182,7 +181,7 @@ import { type Ref, ref, watch } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
@@ -238,14 +237,9 @@ const images = [
 
 const name = ref(generateName({ prefix: "vm" }));
 const flist = ref<Flist>();
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
-const wireguard = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const envs = ref<Env[]>([]);
 const disks = ref<Disk[]>([]);
-const network = ref();
 const dedicated = ref(false);
 const certified = ref(false);
 const selectionDetails = ref<SelectionDetails>();
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index ca05ed8829..42912327d3 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -126,11 +126,7 @@ const flist: Flist = {
   entryPoint: "/sbin/zinit init",
 };
 const name = ref(generateName({ prefix: "al" }));
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const cpu = ref() as Ref<number>;
 const memory = ref() as Ref<number>;
 const storage = ref() as Ref<number>;
@@ -215,7 +211,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 import type { GridClient } from "@threefold/grid_client";
 
 import AlgorandCapacity from "../components/algorand_capacity.vue";
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
 import type { SelectionDetails } from "../types/nodeSelector";
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index d7d7ec22f1..569bbb4df3 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -42,7 +42,8 @@
         v-model:mycelium="mycelium"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
-        :domain="selectionDetails?.domain"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -79,7 +80,7 @@
 
 <script lang="ts" setup>
 import { calculateRootFileSystem, type GridClient } from "@threefold/grid_client";
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
@@ -104,11 +105,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
 );
@@ -209,7 +206,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_discourse.vue b/packages/playground/src/weblets/tf_discourse.vue
index 5496e05b40..ff4a2aa27f 100644
--- a/packages/playground/src/weblets/tf_discourse.vue
+++ b/packages/playground/src/weblets/tf_discourse.vue
@@ -60,11 +60,11 @@
         <Networks
           v-model:mycelium="mycelium"
           v-model:planetary="planetary"
-          v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
-          enableIpv4
-          :domain="selectionDetails?.domain"
+          :ipv4="ipv4"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -130,11 +130,7 @@ const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "dc" }));
 const email = ref(profileManager.profile?.email || "");
 const solution = ref() as Ref<SolutionFlavor>;
-const ipv4 = ref(true);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks({ ipv4: true });
 const smtp = ref(createSMTPServer());
 const dedicated = ref(false);
 const certified = ref(false);
@@ -270,7 +266,7 @@ watch(
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
diff --git a/packages/playground/src/weblets/tf_domains.vue b/packages/playground/src/weblets/tf_domains.vue
index cc546ca110..090ca17737 100644
--- a/packages/playground/src/weblets/tf_domains.vue
+++ b/packages/playground/src/weblets/tf_domains.vue
@@ -1,7 +1,9 @@
 <template>
   <weblet-layout ref="layout">
-    
-    <template #title><span><v-icon  class="pr-3">mdi-web-box</v-icon></span>Deploy Domains Instance </template>
+    <template #title
+      ><span><v-icon class="pr-3">mdi-web-box</v-icon></span
+      >Deploy Domains Instance
+    </template>
 
     <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <template #config>
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 10ed86dd84..4cc7aafe7e 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -94,7 +94,8 @@
         v-model:mycelium="mycelium"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
-        :domain="selectionDetails?.domain"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -162,11 +163,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
 const selectedSSHKeys = ref("");
@@ -271,7 +268,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_gitea.vue b/packages/playground/src/weblets/tf_gitea.vue
index 855436af24..785b5f54fc 100644
--- a/packages/playground/src/weblets/tf_gitea.vue
+++ b/packages/playground/src/weblets/tf_gitea.vue
@@ -44,14 +44,15 @@
           v-model="solution"
         />
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
-          :domain="selectionDetails?.domain"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -98,7 +99,7 @@ import { computed, type Ref, ref, watch } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
@@ -111,11 +112,7 @@ const tabs = ref();
 
 const selectionDetails = ref<SelectionDetails>();
 const name = ref(generateName({ prefix: "gt" }));
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const disks = ref<Disk[]>([]);
 const dedicated = ref(false);
 const certified = ref(false);
diff --git a/packages/playground/src/weblets/tf_mattermost.vue b/packages/playground/src/weblets/tf_mattermost.vue
index 0531b845e2..f539fe6104 100644
--- a/packages/playground/src/weblets/tf_mattermost.vue
+++ b/packages/playground/src/weblets/tf_mattermost.vue
@@ -47,7 +47,8 @@
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
-          :domain="selectionDetails?.domain"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -113,11 +114,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
@@ -252,7 +249,7 @@ watch(
 <script lang="ts">
 import { updateGrid } from "@/utils/grid";
 
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index dafaf866bd..2ee0911ab6 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -41,7 +41,8 @@
         v-model:planetary="planetary"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
-        :domain="selectionDetails?.domain"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -103,11 +104,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
 );
@@ -222,7 +219,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index b7d1b39c3b..e7cbc4835c 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -34,14 +34,15 @@
         :large="{ cpu: 8, memory: 32, disk: 2000 }"
         v-model="solution"
       />
-      <Network
+      <Networks
         required
         v-model:ipv4="ipv4"
         v-model:ipv6="ipv6"
         v-model:planetary="planetary"
         v-model:mycelium="mycelium"
         v-model:wireguard="wireguard"
-        :domain="selectionDetails?.domain"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -76,11 +77,11 @@
 </template>
 
 <script lang="ts" setup>
-import { type Ref, ref, watch } from "vue";
+import { type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
 import { type Flist, ProjectName } from "../types";
@@ -95,11 +96,7 @@ const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-vms/node-pilot-zdbfs.flist",
   entryPoint: "/",
 };
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const dedicated = ref(false);
 const certified = ref(false);
 const rootFilesystemSize = 2;
diff --git a/packages/playground/src/weblets/tf_nostr.vue b/packages/playground/src/weblets/tf_nostr.vue
index 02cb6fa082..2e8df05e12 100644
--- a/packages/playground/src/weblets/tf_nostr.vue
+++ b/packages/playground/src/weblets/tf_nostr.vue
@@ -37,14 +37,15 @@
           v-model="solution"
         />
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
-          :domain="selectionDetails?.domain"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
@@ -81,11 +82,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid, useProfileManager } from "../stores";
@@ -98,11 +99,7 @@ const tabs = ref();
 const selectionDetails = ref<SelectionDetails>();
 
 const name = ref(generateName({ prefix: "nt" }));
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const disks = ref<Disk[]>([]);
 const dedicated = ref(false);
 const certified = ref(false);
diff --git a/packages/playground/src/weblets/tf_owncloud.vue b/packages/playground/src/weblets/tf_owncloud.vue
index 4ecde0d422..efc91a42b4 100644
--- a/packages/playground/src/weblets/tf_owncloud.vue
+++ b/packages/playground/src/weblets/tf_owncloud.vue
@@ -84,7 +84,8 @@
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
           v-model:planetary="planetary"
-          :domain="selectionDetails?.domain"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
@@ -155,11 +156,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
@@ -297,7 +294,7 @@ watch(
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index 7d4487b390..62c32d729b 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -68,7 +68,8 @@
         v-model:ipv6="ipv6"
         v-model:ipv4="ipv4"
         v-model:wireguard="wireguard"
-        :domain="selectionDetails?.domain"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -105,7 +106,7 @@
 
 <script lang="ts" setup>
 import { calculateRootFileSystem, type GridClient } from "@threefold/grid_client";
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
@@ -131,14 +132,10 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
 );
-const mycelium = ref(true);
-const planetary = ref(false);
 const selectedSSHKeys = ref("");
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
@@ -241,7 +238,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_presearch.vue b/packages/playground/src/weblets/tf_presearch.vue
index 65c4392a2d..4bf38030d9 100644
--- a/packages/playground/src/weblets/tf_presearch.vue
+++ b/packages/playground/src/weblets/tf_presearch.vue
@@ -56,14 +56,13 @@
           </password-input-wrapper>
         </input-validator>
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
-          ref="network"
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -117,7 +116,7 @@ import { ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
 import { type Flist, ProjectName } from "../types";
@@ -129,18 +128,13 @@ const layout = useLayout();
 const tabs = ref();
 const name = ref(generateName({ prefix: "ps" }));
 const code = ref("");
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const cpu = 1;
 const memory = 512;
 const rootFilesystemSize = calculateRootFileSystem({ CPUCores: cpu, RAMInMegaBytes: memory });
 const dockerDiskSize = 10;
 const privateRestoreKey = ref("");
 const publicRestoreKey = ref("");
-const network = ref();
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/presearch-v2.3.flist",
   entryPoint: "/sbin/zinit init",
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index 6db03392dc..501b1e1a16 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -62,13 +62,13 @@
       />
 
       <Networks
-        ref="network"
         v-model:ipv4="ipv4"
         v-model:mycelium="mycelium"
         v-model:planetary="planetary"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
-        :domain="selectionDetails?.domain"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -128,11 +128,7 @@ const gitBranch = ref("");
 const root = ref("");
 const domain = ref();
 
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const solution = ref() as Ref<SolutionFlavor>;
 const flist: Flist = {
   // Should be upgraded to an oficial Flist
@@ -268,7 +264,7 @@ async function isGithubRepoExist(gitUrl: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 7bb34846dd..fda71ecf21 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -56,7 +56,8 @@
         v-model:ipv6="ipv6"
         v-model:ipv4="ipv4"
         v-model:wireguard="wireguard"
-        :domain="selectionDetails?.domain"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -93,7 +94,7 @@
 
 <script lang="ts" setup>
 import { calculateRootFileSystem, type GridClient } from "@threefold/grid_client";
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
@@ -112,11 +113,7 @@ const selectionDetails = ref<SelectionDetails>();
 
 const name = ref(generateName({ prefix: "ss" }));
 const endpoint = ref("");
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const solution = ref() as Ref<SolutionFlavor>;
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/subsquid-latest.flist",
@@ -229,7 +226,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tf_taiga.vue b/packages/playground/src/weblets/tf_taiga.vue
index a0a0cc563e..8034cdcb95 100644
--- a/packages/playground/src/weblets/tf_taiga.vue
+++ b/packages/playground/src/weblets/tf_taiga.vue
@@ -96,7 +96,8 @@
           v-model:planetary="planetary"
           v-model:ipv6="ipv6"
           v-model:wireguard="wireguard"
-          :domain="selectionDetails?.domain"
+          :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+          require-domain
         />
 
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -168,11 +169,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const smtp = ref(createSMTPServer());
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
@@ -309,7 +306,7 @@ watch(
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import SmtpServer, { createSMTPServer } from "../components/smtp_server.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 79ca5a932a..c708af7497 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -65,9 +65,8 @@
         </input-validator>
       </password-input-wrapper>
 
-      <Network
+      <Networks
         required
-        ref="network"
         v-model:ipv4="ipv4"
         v-model:planetary="planetary"
         v-model:wireguard="wireguard"
@@ -119,11 +118,11 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
 import type { Flist, solutionFlavor as SolutionFlavor } from "../types";
@@ -138,12 +137,7 @@ const selectionDetails = ref<SelectionDetails>();
 const name = ref(generateName({ prefix: "um" }));
 const username = ref("admin");
 const password = ref(generatePassword());
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
-const wireguard = ref(false);
-const network = ref();
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const solution = ref() as Ref<SolutionFlavor>;
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/umbrel-latest.flist",
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index ee80c60b9a..08a51ee7f3 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -95,7 +95,8 @@
         v-model:planetary="planetary"
         v-model:ipv6="ipv6"
         v-model:wireguard="wireguard"
-        :domain="selectionDetails?.domain"
+        :has-custom-domain="selectionDetails?.domain?.enabledCustomDomain"
+        require-domain
       />
 
       <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
@@ -132,7 +133,7 @@
 
 <script lang="ts" setup>
 import { calculateRootFileSystem, type GridClient } from "@threefold/grid_client";
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 
 import { updateGrid } from "@/utils/grid";
 import { manual } from "@/utils/manual";
@@ -161,11 +162,7 @@ const flist: Flist = {
 };
 const dedicated = ref(false);
 const certified = ref(false);
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const wireguard = ref(false);
-const mycelium = ref(true);
-const planetary = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const rootFilesystemSize = computed(() =>
   calculateRootFileSystem({ CPUCores: solution.value?.cpu ?? 0, RAMInMegaBytes: solution.value?.memory ?? 0 }),
 );
@@ -270,7 +267,7 @@ function updateSSHkeyEnv(selectedKeys: string) {
 </script>
 
 <script lang="ts">
-import Networks from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue";
 import { deploymentListEnvironments } from "../constants";
diff --git a/packages/playground/src/weblets/tfrobot.vue b/packages/playground/src/weblets/tfrobot.vue
index e3f895c194..5ff90c72ec 100644
--- a/packages/playground/src/weblets/tfrobot.vue
+++ b/packages/playground/src/weblets/tfrobot.vue
@@ -45,14 +45,13 @@
           v-model="solution"
         />
 
-        <Network
+        <Networks
           required
           v-model:ipv4="ipv4"
           v-model:ipv6="ipv6"
           v-model:planetary="planetary"
           v-model:mycelium="mycelium"
           v-model:wireguard="wireguard"
-          ref="network"
         />
         <input-tooltip inline tooltip="Click to know more about dedicated machines." :href="manual.dedicated_machines">
           <v-switch color="primary" inset label="Dedicated" v-model="dedicated" hide-details />
@@ -182,7 +181,7 @@ import { computed, type Ref, ref, watch } from "vue";
 
 import { manual } from "@/utils/manual";
 
-import Network from "../components/networks.vue";
+import Networks, { useNetworks } from "../components/networks.vue";
 import SelectSolutionFlavor from "../components/select_solution_flavor.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { useGrid } from "../stores";
@@ -194,14 +193,9 @@ const layout = useLayout();
 const tabs = ref();
 
 const name = ref(generateName({ prefix: "tfr" }));
-const ipv4 = ref(false);
-const ipv6 = ref(false);
-const planetary = ref(false);
-const mycelium = ref(true);
-const wireguard = ref(false);
+const { ipv4, ipv6, planetary, mycelium, wireguard } = useNetworks();
 const envs = ref<Env[]>([]);
 const disks = ref<Disk[]>([]);
-const network = ref();
 const dedicated = ref(false);
 const certified = ref(false);
 const rootFilesystemSize = computed(() => solution.value?.disk);