diff --git a/packages/playground/public/images/icons/domains.png b/packages/playground/public/images/icons/domains.png
new file mode 100644
index 0000000000..dfe4b7b6ce
Binary files /dev/null and b/packages/playground/public/images/icons/domains.png differ
diff --git a/packages/playground/public/info/domains.md b/packages/playground/public/info/domains.md
new file mode 100644
index 0000000000..7b1e41555b
--- /dev/null
+++ b/packages/playground/public/info/domains.md
@@ -0,0 +1,5 @@
+---
+title: Domains
+---
+
+Domains allows users to securely expose servers hosted on local machines or VMs to the public internet. Users are required to specify the machine's IP, which can be a Mycelium IP, Yggdrasil IP, or a public IP (IPv4 or IPv6). For more details, check the [Domains documentation](https://www.manual.grid.tf/documentation/dashboard/solutions/domains.html).
diff --git a/packages/playground/src/components/deployment_data_dialog.vue b/packages/playground/src/components/deployment_data_dialog.vue
index c7473e9d15..453c14e320 100644
--- a/packages/playground/src/components/deployment_data_dialog.vue
+++ b/packages/playground/src/components/deployment_data_dialog.vue
@@ -20,7 +20,9 @@
             >
               <v-tooltip location="bottom" :text="getTooltipText(item, index)" :disabled="!hasMaster(item)">
                 <template #activator="{ props }">
-                  <span v-bind="props" class="text-lowercase">{{ item.name }}</span>
+                  <span v-bind="props" class="text-lowercase">{{
+                    contracts && contracts.length === 1 && "name" in contracts ? (contracts as any).name : item.name
+                  }}</span>
                 </template>
               </v-tooltip>
             </v-tab>
@@ -28,7 +30,10 @@
         </v-card-title>
         <v-card-text>
           <template v-if="showType === 0">
-            <v-form readonly v-if="contract">
+            <v-form
+              readonly
+              v-if="contract && !['gateway-name-proxy', 'gateway-fqdn-proxy'].includes(data?.[0]?.workloads?.[0]?.type)"
+            >
               <v-alert class="my-4" variant="tonal" v-if="contract.customDomain" type="info">
                 Make sure to create an A record on your name provider with
                 <span class="font-weight-bold">{{ contract.customDomain }}</span>
@@ -102,6 +107,20 @@
               <CopyReadonlyInput label="GPU Cards" :data="gpuInfo" :loading="loadingCard" v-if="showGpuCard" />
               <CopyReadonlyInput label="Monitoring URL" :data="grafanaURL" :loading="isLoading" />
             </v-form>
+            <v-form readonly v-else>
+              <CopyReadonlyInput label="Name" :data="data.name" />
+              <CopyReadonlyInput label="IP" :data="data[0].workloads[0].data.backends.join(', ')" />
+              <CopyReadonlyInput
+                label="Domain"
+                :data="data[0].workloads[0].result.data.fqdn || data[0].workloads[0].data.fqdn"
+              />
+              <v-switch
+                inset
+                color="primary"
+                :model-value="data[0].workloads[0].data.tls_passthrough"
+                label="TLS Passthrough"
+              />
+            </v-form>
           </template>
           <template v-else>
             <HighlightDark v-if="$vuetify.theme.name === 'dark'" />
diff --git a/packages/playground/src/components/node_selector/TfDomainName.vue b/packages/playground/src/components/node_selector/TfDomainName.vue
index 13c708b621..b5863adfec 100644
--- a/packages/playground/src/components/node_selector/TfDomainName.vue
+++ b/packages/playground/src/components/node_selector/TfDomainName.vue
@@ -11,7 +11,7 @@
     <div ref="input">
       <VForm v-model="domainNameValid">
         <VExpandTransition>
-          <input-tooltip tooltip="Domain Name that will points to this instance" v-if="enableCustomDomain">
+          <input-tooltip tooltip="Domain Name that will point to this instance" v-if="enableCustomDomain">
             <VTextField
               ref="customDomainInput"
               label="Custom Domain"
diff --git a/packages/playground/src/components/vm_deployment_table.vue b/packages/playground/src/components/vm_deployment_table.vue
index a769f3592c..8db6cf4704 100644
--- a/packages/playground/src/components/vm_deployment_table.vue
+++ b/packages/playground/src/components/vm_deployment_table.vue
@@ -155,7 +155,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from "vue";
+import { capitalize, computed, onMounted, ref } from "vue";
 
 import { getNodeHealthColor, NodeHealth } from "@/utils/get_nodes";
 
@@ -190,7 +190,28 @@ const failedDeployments = ref<
 
 onMounted(loadDeployments);
 
+async function loadDomains() {
+  try {
+    loading.value = true;
+    const grid = await getGrid(profileManager.profile!, props.projectName.toLowerCase());
+    const gateways = await grid!.gateway.list();
+    const gws = await Promise.all(gateways.map(name => grid!.gateway.get_name({ name })));
+    items.value = gws.map(gw => {
+      (gw as any).name = gw[0].workloads[0].name;
+      return gw;
+    });
+  } catch (e) {
+    errorMessage.value = `Failed to load Deployments: ${e}`;
+  } finally {
+    loading.value = false;
+  }
+}
+
 async function loadDeployments() {
+  if (props.projectName.toLowerCase() === ProjectName.Domains.toLowerCase()) {
+    return loadDomains();
+  }
+
   const migrateGateways = props.projectName.toLowerCase() !== "fullvm" && props.projectName.toLowerCase() !== "vm";
 
   items.value = [];
@@ -245,6 +266,43 @@ async function loadDeployments() {
 }
 
 const filteredHeaders = computed(() => {
+  if (props.projectName.toLowerCase() === ProjectName.Domains.toLowerCase()) {
+    return [
+      {
+        title: "Name",
+        key: "domain-name",
+        value(item: any) {
+          const [workload] = item[0].workloads;
+          return workload.data.name || workload.name;
+        },
+      },
+      {
+        title: "Backends",
+        key: "0.workloads.0.data.backends",
+        value(item: any) {
+          return item[0].workloads[0].data.backends.join(", ");
+        },
+      },
+      {
+        title: "Domain",
+        key: "fqdn",
+        value(item: any) {
+          const [workload] = item[0].workloads;
+          return workload.result.data.fqdn || workload.data.fqdn;
+        },
+      },
+      {
+        title: "Health",
+        key: "health",
+        value(item: any) {
+          return capitalize(item[0].workloads[0].result.state);
+        },
+        sortable: false,
+      },
+      { title: "Actions", key: "actions", sortable: false },
+    ];
+  }
+
   let headers = [
     { title: "PLACEHOLDER", key: "data-table-select" },
     { title: "Name", key: "name" },
diff --git a/packages/playground/src/components/weblet_layout.vue b/packages/playground/src/components/weblet_layout.vue
index 475f3ea9f0..faa5d96685 100644
--- a/packages/playground/src/components/weblet_layout.vue
+++ b/packages/playground/src/components/weblet_layout.vue
@@ -196,7 +196,7 @@ provideService({
   },
 });
 
-function validateBeforeDeploy(fn: () => void, documentScrollend = true) {
+function validateBeforeDeploy(fn: () => void, documentScrollend = false) {
   const forms = __forms;
 
   let errorInput: [number, any, boolean] | null = null;
diff --git a/packages/playground/src/constants/deployment_list.ts b/packages/playground/src/constants/deployment_list.ts
index c1a4303818..2f5ac80b6e 100644
--- a/packages/playground/src/constants/deployment_list.ts
+++ b/packages/playground/src/constants/deployment_list.ts
@@ -124,6 +124,11 @@ export const deploymentListEnvironments = {
     CHAIN_ENDPOINT: "Chain Endpoint",
   },
 
+  expose: {
+    SSH_KEY: _ssh,
+    EXPOSE_WEBSERVER_HOSTNAME: "Expose Webserver Hostname",
+  },
+
   static_website: {
     SSH_KEY: _ssh,
     GITHUB_URL: "HTTPS URL for git repository",
diff --git a/packages/playground/src/router/index.ts b/packages/playground/src/router/index.ts
index 871cb175f3..49715a4892 100644
--- a/packages/playground/src/router/index.ts
+++ b/packages/playground/src/router/index.ts
@@ -364,6 +364,28 @@ function createApplicationsRoutes(): RouteRecordRaw[] {
         },
       },
     },
+    {
+      path: DashboardRoutes.Applications.Domains,
+      component: () => import("../views/domains_view.vue"),
+      meta: {
+        title: "Domains",
+        info: { page: "info/domains.md" },
+        navbarConfig: {
+          back: true,
+          path: [
+            { title: "Deploy" },
+            {
+              title: "Applications",
+              disabled: false,
+              to: DashboardRoutes.Deploy.Applications,
+            },
+            {
+              title: "Domains",
+            },
+          ],
+        },
+      },
+    },
     // Commented for now and will be user later.
     // {
     //   path: DashboardRoutes.Applications.Freeflow,
diff --git a/packages/playground/src/router/routes.ts b/packages/playground/src/router/routes.ts
index 5e19560906..96a5582b85 100644
--- a/packages/playground/src/router/routes.ts
+++ b/packages/playground/src/router/routes.ts
@@ -70,6 +70,7 @@ enum ApplicationRoutes {
   TFRobot = "/deploy/applications/tfrobot/",
   Gitea = "/deploy/applications/gitea/",
   Nostr = "/deploy/applications/nostr/",
+  Domains = "/deploy/applications/domains/",
 }
 
 const DashboardRoutes = {
diff --git a/packages/playground/src/types/index.ts b/packages/playground/src/types/index.ts
index ce0370857b..ed522e1546 100644
--- a/packages/playground/src/types/index.ts
+++ b/packages/playground/src/types/index.ts
@@ -126,6 +126,7 @@ export enum ProjectName {
   TFRobot = "TFRobot",
   Gitea = "Gitea",
   Nostr = "Nostr",
+  Domains = "Domains",
 }
 
 export enum SolutionCode {
@@ -155,6 +156,7 @@ export enum SolutionCode {
   tfrobot = "tfr",
   gitea = "gt",
   nostr = "nt",
+  Domains = "dm",
 }
 
 export const solutionType: { [key: string]: string } = {
@@ -181,6 +183,7 @@ export const solutionType: { [key: string]: string } = {
   tfrobot: "TFRobot",
   Gitea: "Gitea",
   nostr: "Nostr",
+  domains: "Domains",
 };
 
 export interface solutionFlavor {
diff --git a/packages/playground/src/utils/delete_deployment.ts b/packages/playground/src/utils/delete_deployment.ts
index 732e40185b..08aab5c208 100644
--- a/packages/playground/src/utils/delete_deployment.ts
+++ b/packages/playground/src/utils/delete_deployment.ts
@@ -68,6 +68,9 @@ export async function deleteGateway(grid: GridClient, name: string) {
   const { deleted } = await grid.gateway.delete_name({ name });
   return deleted.length > 0;
 }
+export async function deleteGatewayDeployment(grid: GridClient, name: string) {
+  return await grid.gateway.delete_name({ name });
+}
 
 export function solutionHasGateway(projectName: ProjectName) {
   const solutions = [
diff --git a/packages/playground/src/utils/gateway.ts b/packages/playground/src/utils/gateway.ts
index f3eb74975d..2e37201f18 100644
--- a/packages/playground/src/utils/gateway.ts
+++ b/packages/playground/src/utils/gateway.ts
@@ -79,6 +79,10 @@ export async function rollbackDeployment(grid: GridClient, name: string) {
 
   return result;
 }
+export async function rollbackGateway(grid: GridClient, name: string) {
+  const result = await grid.gateway.delete_name({ name });
+  return result;
+}
 
 export type GridGateway = Awaited<ReturnType<GridClient["gateway"]["getObj"]>>[0];
 interface LoadDeploymentGatewaysOptions {
diff --git a/packages/playground/src/views/domains_view.vue b/packages/playground/src/views/domains_view.vue
new file mode 100644
index 0000000000..fd15cd8c66
--- /dev/null
+++ b/packages/playground/src/views/domains_view.vue
@@ -0,0 +1,26 @@
+<template>
+  <view-layout>
+    <TfDomains />
+
+    <template #list>
+      <TfDeploymentList title="Domains" :project-name="name" />
+    </template>
+  </view-layout>
+</template>
+
+<script lang="ts">
+import { ProjectName } from "../types";
+import TfDeploymentList from "../weblets/tf_deployment_list.vue";
+import TfDomains from "../weblets/tf_domains.vue";
+
+export default {
+  name: "DomainsView",
+  components: {
+    TfDomains,
+    TfDeploymentList,
+  },
+  setup() {
+    return { name: ProjectName.Domains };
+  },
+};
+</script>
diff --git a/packages/playground/src/views/solutions_view.vue b/packages/playground/src/views/solutions_view.vue
index 00e297f78b..2bcb5997b9 100644
--- a/packages/playground/src/views/solutions_view.vue
+++ b/packages/playground/src/views/solutions_view.vue
@@ -144,6 +144,13 @@ export default {
         icon: "wordpress.png",
         route: DashboardRoutes.Applications.Wordpress,
       },
+      {
+        title: "Domains",
+        excerpt:
+          "Domains allow users to securely expose servers hosted on local machines or VMs to the public internet.",
+        icon: "domains.png",
+        route: DashboardRoutes.Applications.Domains,
+      },
     ];
     cards = cards.sort((a, b) => a.title.localeCompare(b.title));
 
diff --git a/packages/playground/src/weblets/tf_deployment_list.vue b/packages/playground/src/weblets/tf_deployment_list.vue
index 7243f2391f..d5344d9297 100644
--- a/packages/playground/src/weblets/tf_deployment_list.vue
+++ b/packages/playground/src/weblets/tf_deployment_list.vue
@@ -217,6 +217,21 @@
           />
         </template>
 
+        <template #Domains-actions="{ item }">
+          <IconActionBtn
+            tooltip="Show Details"
+            icon="mdi-eye-outline"
+            @click="openDialog(tabs[activeTab].value, item)"
+          />
+
+          <IconActionBtn
+            tooltip="Visit"
+            icon="mdi-web"
+            color="anchor"
+            :href="'https://' + (item[0].workloads[0].result.data.fqdn || item[0].workloads[0].data.fqdn)"
+          />
+        </template>
+
         <template #StaticWebsite-actions="{ item }">
           <IconActionBtn
             tooltip="Show Details"
@@ -396,7 +411,7 @@ import type { Tab } from "../components/dynamic_tabs.vue";
 import { useLayout } from "../components/weblet_layout.vue";
 import { deploymentListEnvironments } from "../constants/deployment_list";
 import { useGrid } from "../stores";
-import { deleteDeployment } from "../utils/delete_deployment";
+import { deleteDeployment, deleteGatewayDeployment } from "../utils/delete_deployment";
 import { updateGrid } from "../utils/grid";
 
 const props = defineProps<{
@@ -428,6 +443,7 @@ const tabs: Tab[] = [
   { title: "TFRobot", value: "TFRobot", imgPath: "images/icons/tfrobot.png" },
   { title: "Gitea", value: "Gitea", imgPath: "images/icons/gitea.png" },
   { title: "Nostr", value: "Nostr", imgPath: "images/icons/nostr.png" },
+  { title: "Domains", value: "Domains", imgPath: "images/icons/domains.png" },
 ];
 
 const layout = useLayout();
@@ -449,13 +465,20 @@ async function onDelete(k8s = false) {
   try {
     for (const item of selectedItems.value) {
       try {
-        await deleteDeployment(updateGrid(grid!, { projectName: item.projectName }), {
-          deploymentName: item.deploymentName,
-          name: k8s ? item.deploymentName : item.name,
-          projectName: item.projectName,
-          ip: item.interfaces?.[0]?.ip,
-          k8s,
-        });
+        if (props.projectName?.toLowerCase() === ProjectName.Domains.toLowerCase()) {
+          await deleteGatewayDeployment(
+            updateGrid(grid, { projectName: props.projectName.toLocaleLowerCase() }),
+            item[0].workloads[0].name as string,
+          );
+        } else {
+          await deleteDeployment(updateGrid(grid!, { projectName: item.projectName }), {
+            deploymentName: item.deploymentName,
+            name: k8s ? item.deploymentName : item.name,
+            projectName: item.projectName,
+            ip: item.interfaces?.[0]?.ip,
+            k8s,
+          });
+        }
       } catch (e: any) {
         createCustomToast(`Failed to delete deployment with name: ${item.name}`, ToastType.danger);
         console.log("Error while deleting deployment", e.message);
diff --git a/packages/playground/src/weblets/tf_domains.vue b/packages/playground/src/weblets/tf_domains.vue
new file mode 100644
index 0000000000..50f0e09c78
--- /dev/null
+++ b/packages/playground/src/weblets/tf_domains.vue
@@ -0,0 +1,143 @@
+<template>
+  <weblet-layout ref="layout" title-image="images/icons/domains.png">
+    <template #title>Deploy a Domains Instance </template>
+
+    <d-tabs :tabs="[{ title: 'Config', value: 'config' }]">
+      <template #config>
+        <input-tooltip tooltip="Selecting Custom Domain sets the subdomain as the gateway name.">
+          <input-validator
+            :value="subdomain"
+            :rules="[
+              validators.required('Subdomain is required.'),
+              validators.isLowercase('Subdomain should consist of lowercase letters only.'),
+              validators.isAlphanumeric('Subdomain should consist of letters and numbers only.'),
+              subdomain => validators.isAlpha('Subdomain must start with alphabet char.')(subdomain[0]),
+              validators.minLength('Subdomain must be at least 4 characters.', 4),
+              subdomain => validators.maxLength('Subdomain cannot exceed 50 characters.', 50)(subdomain),
+            ]"
+            :async-rules="[validateSubdomain]"
+            #="{ props }"
+          >
+            <v-text-field label="Subdomain" v-model.trim="subdomain" v-bind="props" />
+          </input-validator>
+        </input-tooltip>
+
+        <div :style="{ marginTop: '-10px' }">
+          <TfSelectionDetails disable-node-selection require-domain use-fqdn v-model="selectionDetails" />
+        </div>
+
+        <input-tooltip tooltip="The port used to access the machine.">
+          <input-validator
+            :value="port"
+            :rules="[validators.required('Port is required.'), validators.isPort('Please provide a valid port.')]"
+            #="{ props }"
+          >
+            <v-text-field label="Port" v-model.number="port" type="number" v-bind="props" />
+          </input-validator>
+        </input-tooltip>
+
+        <input-tooltip
+          tooltip="User's machine's IP: It could be Mycelium IP, Yggdrasil IP, or a public IP (IPv4 or IPv6)."
+        >
+          <input-validator
+            :value="ip"
+            :rules="[
+              validators.required('IP is required.'),
+              validators.isIP('Public IP is not valid.'),
+              validators.startsWith('Public IP is not valid.', '127.'),
+            ]"
+            #="{ props }"
+          >
+            <v-text-field label="IP" v-model="ip" v-bind="props" />
+          </input-validator>
+        </input-tooltip>
+
+        <input-tooltip
+          tooltip="When enabled, the backend service will terminate the TLS traffic, otherwise the gateway service will do the TLS traffic termination."
+          inline
+        >
+          <v-switch label="TLS Passthrough" hide-details inset variant="tonal" color="primary" v-model="passThrough" />
+        </input-tooltip>
+      </template>
+    </d-tabs>
+
+    <template #footer-actions="{ validateBeforeDeploy }">
+      <v-btn color="secondary" @click="validateBeforeDeploy(deploy)" text="Deploy" />
+    </template>
+  </weblet-layout>
+</template>
+
+<script lang="ts" setup>
+import type { GridClient } from "@threefold/grid_client";
+import { ref } from "vue";
+
+import { useLayout } from "../components/weblet_layout.vue";
+import { useGrid } from "../stores";
+import { ProjectName } from "../types";
+import { deployGatewayName, rollbackGateway } from "../utils/gateway";
+import { normalizeError } from "../utils/helpers";
+import { generateName } from "../utils/strings";
+
+const layout = useLayout();
+const ip = ref();
+const name = ref(generateName({ prefix: "dm" }));
+const subdomain = ref(generateName({ prefix: "dm" }));
+const port = ref(80);
+const passThrough = ref(false);
+const selectionDetails = ref<SelectionDetails>();
+
+const gridStore = useGrid();
+const grid = gridStore.client as GridClient;
+
+function finalize(deployment: any) {
+  layout.value.reloadDeploymentsList();
+  layout.value.setStatus("success", "Successfully deployed a Domains instance.");
+  layout.value.openDialog(deployment);
+}
+
+async function deploy() {
+  layout.value.setStatus("deploy");
+
+  const projectName = ProjectName.Domains.toLowerCase() + "/" + name.value;
+  const domain = selectionDetails.value?.domain?.enabledCustomDomain
+    ? selectionDetails.value.domain.customDomain
+    : subdomain.value + "." + selectionDetails.value?.domain?.selectedDomain?.publicConfig.domain;
+
+  try {
+    updateGrid(grid, { projectName });
+    await layout.value.validateBalance(grid!);
+
+    layout.value.setStatus("deploy", "Preparing to deploy gateway...");
+
+    const gateway: any = await deployGatewayName(grid, selectionDetails.value?.domain, {
+      subdomain: subdomain.value,
+      ip: ip.value,
+      port: port.value,
+      tlsPassthrough: passThrough.value,
+    });
+    const gw = await grid.gateway.get_name({ name: subdomain.value });
+    (gw as any).name = gw[0].workloads[0].name;
+
+    finalize(gw);
+  } catch (e) {
+    layout.value.setStatus("deploy", "Rollbacking back due to fail to deploy gateway...");
+    await rollbackGateway(grid!, subdomain.value);
+    layout.value.setStatus("failed", normalizeError(e, "Failed to deploy a Domains instance."));
+  }
+}
+async function validateSubdomain() {
+  return await isAvailableName(grid, subdomain.value);
+}
+</script>
+
+<script lang="ts">
+import { deploymentListEnvironments } from "@/constants";
+import { isAvailableName } from "@/utils/validators";
+
+import type { SelectionDetails } from "../types/nodeSelector";
+import { updateGrid } from "../utils/grid";
+
+export default {
+  name: "TfDomains",
+};
+</script>