diff --git a/packages/playground/src/constants/deployment_list.ts b/packages/playground/src/constants/deployment_list.ts
index 45fa7c37ec..3b0cab13ac 100644
--- a/packages/playground/src/constants/deployment_list.ts
+++ b/packages/playground/src/constants/deployment_list.ts
@@ -169,4 +169,9 @@ export const deploymentListEnvironments = {
   nostr: {
     SSH_KEY: _ssh,
   },
+
+  nodepilot: {
+    SSH_KEY: _ssh,
+    NODE_PILOT_HOSTNAME: "Node Pilot Hostname",
+  },
 };
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index 8b98883e0d..db7ec2069f 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -249,7 +249,7 @@
             tooltip="Visit"
             icon="mdi-web"
             color="anchor"
-            :href="'http://' + (item.publicIP?.ip ? item.publicIP.ip.slice(0, -3) : '[' + item.planetary + ']')"
+            :href="'https://' + item.env.NODE_PILOT_HOSTNAME"
           />
         </template>
 
diff --git a/packages/playground/src/weblets/tf_node_pilot.vue b/packages/playground/src/weblets/tf_node_pilot.vue
index 1f9e927c31..a3a74f7ed9 100644
--- a/packages/playground/src/weblets/tf_node_pilot.vue
+++ b/packages/playground/src/weblets/tf_node_pilot.vue
@@ -62,6 +62,7 @@
           rootFilesystemSize,
         }"
         v-model="selectionDetails"
+        require-domain
       />
 
       <manage-ssh-deployemnt @selected-keys="updateSSHkeyEnv($event)" />
@@ -80,7 +81,7 @@ import { manual } from "@/utils/manual";
 
 import Network from "../components/networks.vue";
 import { useLayout } from "../components/weblet_layout.vue";
-import { useGrid } from "../stores";
+import { useGrid, useProfileManager } from "../stores";
 import { type Flist, ProjectName } from "../types";
 import { deployVM } from "../utils/deploy_vm";
 import { generateName } from "../utils/strings";
@@ -102,20 +103,41 @@ const selectionDetails = ref<SelectionDetails>();
 const selectedSSHKeys = ref("");
 const gridStore = useGrid();
 const grid = gridStore.client as GridClient;
+const profileManager = useProfileManager();
 
+function finalize(deployment: any) {
+  layout.value.reloadDeploymentsList();
+  layout.value.setStatus("success", "Successfully deployed a Node Pilot instance.");
+  layout.value.openDialog(deployment, deploymentListEnvironments.nodepilot);
+}
 async function deploy() {
   layout.value.setStatus("deploy");
 
   const projectName = ProjectName.NodePilot.toLowerCase() + "/" + name.value;
 
+  const subdomain = getSubdomain({
+    deploymentName: name.value,
+    projectName,
+    twinId: profileManager.profile!.twinId,
+  });
+
+  const domain = selectionDetails.value?.domain?.enabledCustomDomain
+    ? selectionDetails.value.domain.customDomain
+    : subdomain + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
+
+  let vm: any;
+
   try {
     layout.value?.validateSSH();
     updateGrid(grid, { projectName });
 
     await layout.value.validateBalance(grid!);
-
-    const vm = await deployVM(grid!, {
+    vm = await deployVM(grid!, {
       name: name.value,
+      network: {
+        addAccess: selectionDetails.value!.domain!.enableSelectedDomain,
+        accessNodeId: selectionDetails.value!.domain?.selectedDomain?.nodeId,
+      },
       machines: [
         {
           name: name.value,
@@ -127,7 +149,10 @@ async function deploy() {
           publicIpv6: ipv6.value,
           planetary: planetary.value,
           mycelium: mycelium.value,
-          envs: [{ key: "SSH_KEY", value: selectedSSHKeys.value }],
+          envs: [
+            { key: "SSH_KEY", value: selectedSSHKeys.value },
+            { key: "NODE_PILOT_HOSTNAME", value: domain },
+          ],
           rootFilesystemSize,
           disks: [
             {
@@ -141,13 +166,34 @@ async function deploy() {
         },
       ],
     });
-
-    layout.value.reloadDeploymentsList();
-    layout.value.setStatus("success", "Successfully deployed a node pilot instance.");
-    layout.value.openDialog(vm, deploymentListEnvironments.vm);
   } catch (e) {
     layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Node Pilot instance."));
   }
+
+  if (!selectionDetails.value?.domain?.enableSelectedDomain) {
+    vm[0].customDomain = selectionDetails.value?.domain?.customDomain;
+    finalize(vm);
+    return;
+  }
+
+  try {
+    layout.value.setStatus("deploy", "Preparing to deploy gateway...");
+    console.log("vm[0]", vm[0]);
+
+    await deployGatewayName(grid, selectionDetails.value.domain, {
+      subdomain,
+      ip: vm[0].interfaces[0].ip,
+      port: 34416,
+      network: vm[0].interfaces[0].network,
+    });
+
+    finalize(vm);
+  } catch (e) {
+    layout.value.setStatus("deploy", "Rollbacking back due to fail to deploy gateway...");
+
+    await rollbackDeployment(grid!, name.value);
+    layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Casperlabs instance."));
+  }
 }
 
 function updateSSHkeyEnv(selectedKeys: string) {
@@ -163,6 +209,7 @@ import ManageSshDeployemnt from "../components/ssh_keys/ManageSshDeployemnt.vue"
 import { deploymentListEnvironments } from "../constants";
 import type { solutionFlavor as SolutionFlavor } from "../types";
 import type { SelectionDetails } from "../types/nodeSelector";
+import { deployGatewayName, getSubdomain, rollbackDeployment } from "../utils/gateway";
 import { updateGrid } from "../utils/grid";
 import { normalizeError } from "../utils/helpers";