diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index d4ca692fe8..7d90dd7e56 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -202,7 +202,7 @@ function validateBeforeDeploy(fn: () => void) {
     const inputs = form.inputs as unknown as InputValidatorService[];
 
     for (const input of inputs) {
-      const status = input.status;
+      const status = typeof input.status === "string" ? input.status : (input.status as any)?.value;
       if (status === ValidatorStatus.Invalid) {
         errorInput = [i, input.$el];
         break out;
@@ -217,7 +217,14 @@ function validateBeforeDeploy(fn: () => void) {
   }
 
   if (errorInput) {
-    const [tab, input] = errorInput;
+    const [tab, __input] = errorInput;
+
+    const input =
+      __input && typeof __input === "object" && "value" in __input && __input.value instanceof HTMLElement
+        ? __input.value
+        : __input instanceof HTMLElement
+        ? __input
+        : null;
 
     if (!input || !__setTab) {
       return;
@@ -227,7 +234,11 @@ function validateBeforeDeploy(fn: () => void) {
 
     // Timeout so the ui gets render before scroll
     setTimeout(() => {
-      const _input = input.querySelector("textarea") || input.querySelector("input") || input;
+      const _input = input.querySelector("textarea") || input.querySelector("input") || null;
+      if (!(_input instanceof HTMLElement)) {
+        return;
+      }
+
       document.addEventListener("scrollend", () => _input.focus(), { once: true });
       _input.scrollIntoView({ behavior: "smooth", block: "center" });
     }, 250);
diff --git a/packages/playground/src/weblets/freeflow.vue b/packages/playground/src/weblets/freeflow.vue
index 09808f48fc..4b51bccaec 100644
--- a/packages/playground/src/weblets/freeflow.vue
+++ b/packages/playground/src/weblets/freeflow.vue
@@ -13,7 +13,7 @@
   >
     <template #title>Deploy a Freeflow Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="threebotName"
         :rules="[
@@ -72,7 +72,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -95,7 +95,6 @@ import { deployGatewayName, rollbackDeployment } from "../utils/gateway";
 import { normalizeError } from "../utils/helpers";
 
 const layout = useLayout();
-const valid = ref(false);
 
 const threebotName = ref<string>("");
 const solution = ref() as Ref<SolutionFlavor>;
diff --git a/packages/playground/src/weblets/tf_algorand.vue b/packages/playground/src/weblets/tf_algorand.vue
index 163df53942..50e495309f 100644
--- a/packages/playground/src/weblets/tf_algorand.vue
+++ b/packages/playground/src/weblets/tf_algorand.vue
@@ -11,7 +11,7 @@
     title-image="images/icons/algorand.png"
   >
     <template #title>Deploy a Algorand Instance </template>
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -97,7 +97,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
     </template>
@@ -116,7 +116,6 @@ import { deployVM } from "../utils/deploy_vm";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const lastRoundInput = ref();
 const flist: Flist = {
   value: "https://hub.grid.tf/tf-official-apps/algorand-latest.flist",
diff --git a/packages/playground/src/weblets/tf_casperlabs.vue b/packages/playground/src/weblets/tf_casperlabs.vue
index 88dbfb659a..1fb732fa13 100644
--- a/packages/playground/src/weblets/tf_casperlabs.vue
+++ b/packages/playground/src/weblets/tf_casperlabs.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Casperlabs Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -62,7 +62,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -86,7 +86,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 
 const name = ref(generateName({ prefix: "cl" }));
diff --git a/packages/playground/src/weblets/tf_funkwhale.vue b/packages/playground/src/weblets/tf_funkwhale.vue
index 1d4ae6a8ce..8826e483e0 100644
--- a/packages/playground/src/weblets/tf_funkwhale.vue
+++ b/packages/playground/src/weblets/tf_funkwhale.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Funkwhale Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -114,7 +114,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -138,7 +138,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "fw" }));
 const username = ref("admin");
diff --git a/packages/playground/src/weblets/tf_nextcloud.vue b/packages/playground/src/weblets/tf_nextcloud.vue
index 6c711a035f..a058f835bf 100644
--- a/packages/playground/src/weblets/tf_nextcloud.vue
+++ b/packages/playground/src/weblets/tf_nextcloud.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Nextcloud All-in-One Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -61,7 +61,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -85,7 +85,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 
 const name = ref(generateName({ prefix: "nc" }));
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index cd344575cc..1732013166 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -11,7 +11,7 @@
     title-image="images/icons/vm.png"
   >
     <template #title>Deploy a Node Pilot</template>
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -58,7 +58,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -77,7 +77,6 @@ import { type Flist, ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { generateName } from "../utils/strings";
 const layout = useLayout();
-const valid = ref(false);
 const name = ref(generateName({ prefix: "np" }));
 const solution = ref() as Ref<SolutionFlavor>;
 const flist: Flist = {
diff --git a/packages/playground/src/weblets/tf_peertube.vue b/packages/playground/src/weblets/tf_peertube.vue
index ca75c06f3d..28039475a2 100644
--- a/packages/playground/src/weblets/tf_peertube.vue
+++ b/packages/playground/src/weblets/tf_peertube.vue
@@ -12,7 +12,7 @@
     title-image="images/icons/peertube.png"
   >
     <template #title>Deploy a Peertube Instance</template>
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -88,7 +88,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -111,7 +111,6 @@ import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/ga
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "pt" }));
 const email = ref(profileManager.profile?.email || "");
diff --git a/packages/playground/src/weblets/tf_staticwebsite.vue b/packages/playground/src/weblets/tf_staticwebsite.vue
index 4e123ab7d2..006b415e8a 100644
--- a/packages/playground/src/weblets/tf_staticwebsite.vue
+++ b/packages/playground/src/weblets/tf_staticwebsite.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Static Website Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -90,7 +90,7 @@
         v-model="selectionDetails"
       />
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -113,7 +113,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "sw" }));
 const gitUrl = ref("");
diff --git a/packages/playground/src/weblets/tf_subsquid.vue b/packages/playground/src/weblets/tf_subsquid.vue
index 6a12be674b..757a36824e 100644
--- a/packages/playground/src/weblets/tf_subsquid.vue
+++ b/packages/playground/src/weblets/tf_subsquid.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Subsquid Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -74,7 +74,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -98,7 +98,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "ss" }));
 const endpoint = ref("");
diff --git a/packages/playground/src/weblets/tf_umbrel.vue b/packages/playground/src/weblets/tf_umbrel.vue
index 56acaa44db..dc866d3c7e 100644
--- a/packages/playground/src/weblets/tf_umbrel.vue
+++ b/packages/playground/src/weblets/tf_umbrel.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy an Umbrel Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -108,7 +108,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -132,7 +132,6 @@ import rootFs from "../utils/root_fs";
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const name = ref(generateName({ prefix: "um" }));
 const username = ref("admin");
 const password = ref(generatePassword());
diff --git a/packages/playground/src/weblets/tf_wordpress.vue b/packages/playground/src/weblets/tf_wordpress.vue
index e4f7ce353c..24aab1346c 100644
--- a/packages/playground/src/weblets/tf_wordpress.vue
+++ b/packages/playground/src/weblets/tf_wordpress.vue
@@ -12,7 +12,7 @@
   >
     <template #title>Deploy a Wordpress Instance </template>
 
-    <form-validator v-model="valid">
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
       <input-validator
         :value="name"
         :rules="[
@@ -115,7 +115,7 @@
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
-    </form-validator>
+    </d-tabs>
 
     <template #footer-actions="{ validateBeforeDeploy }">
       <v-btn color="secondary" variant="outlined" @click="validateBeforeDeploy(deploy)" text="Deploy" />
@@ -140,7 +140,6 @@ import { normalizeError } from "../utils/helpers";
 import { generateName, generatePassword } from "../utils/strings";
 
 const layout = useLayout();
-const valid = ref(false);
 const profileManager = useProfileManager();
 const name = ref(generateName({ prefix: "wp" }));
 const username = ref("admin");