diff --git a/dashboard/nodes/soop_dropdown.html b/dashboard/nodes/soop_dropdown.html
index babc37bf..ef09fa48 100644
--- a/dashboard/nodes/soop_dropdown.html
+++ b/dashboard/nodes/soop_dropdown.html
@@ -1,16 +1,109 @@
-<style></style>
 <script type="text/javascript">
+  const dropdownPositionSelector = "#node-input-widgetX, #node-input-widgetY, #node-input-width, #node-input-height";
+  function getGroupGrid(nodeId) {
+    const groupId = $("#node-input-group").val();
+    const groupNode = RED.nodes.node(groupId);
+    groupNode._def.reflectEdit(groupId, nodeId);
+    return groupNode.groupState;
+  }
+  function getXYWH() {
+    const x = parseInt($("#node-input-widgetX").val());
+    const y = parseInt($("#node-input-widgetY").val());
+    const w = parseInt($("#node-input-width").val());
+    const h = parseInt($("#node-input-height").val());
+    return { x, y, w, h };
+  }
+  // Validate the widget to place on (x, y, w, h).
+  function validateXYWH(arr) {
+    const { x, y, w, h } = getXYWH();
+    // If x, y, w, h is under or over idx of arr -> return false
+    if (x < 0 || y < 0 || w <= 0 || h <= 0 || w > 12 || x + w > arr[0].length || y + h > arr.length) {
+      return false;
+    }
+    // If the space is alredy filled, return false
+    for (let i = x; i < x + w; i++) {
+      for (let j = y; j < y + h; j++) {
+        if (arr[j][i]) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  // Create a table with array
+  function newTable(arr) {
+    const row = arr.length;
+    const col = arr[0].length;
+    // Append a row for column header(1,2,....)
+    $("#group-table>tbody").append('<tr id="col-header"></tr>');
+    $("#col-header").append("<th></th>");
+    for (let j = 0; j < col; j++) {
+      $("#col-header").append(`<th scope="col">${j}</th>`);
+    }
+    // Append group row and col
+    for (let i = 0; i < row; i++) {
+      // append row
+      $("#group-table>tbody").append(`<tr id="row${i}"></tr>`);
+      // Append a col for row header(1,2,...)
+      $(`#row${i}`).append(`<th scope="row" class="row-header">${i}</th>`);
+      // Append col
+      for (let j = 0; j < col; j++) {
+        const tag = `<td id="col${j}" class="col ${arr[i][j] ? "filled" : "empty"}" ></td>`;
+        $(`#row${i}`).append(tag);
+      }
+    }
+    // Table Design
+    $(".col").css("border", "dotted black 1px");
+    $(".col").css("width", "20px");
+    $(".col").css("height", "20px");
+    $(".filled").css("background-color", "#DEDEDE");
+    $(".empty").css("background-color", "#FFFFFF");
+    $("th").css("border", "none");
+  }
+  // Remove color for new node and return the original color for filled or empty space
+  function removeColor(w, h) {
+    for (let i = 0; i < w; i++) {
+      for (let j = 0; j < h; j++) {
+        $(`#row${j}>#col${i}`).removeClass("new-node");
+      }
+    }
+    $(".filled").css("background-color", "#DEDEDE");
+    $(".empty").css("background-color", "#FFFFFF");
+  }
+  // Add color for new node
+  function addColor() {
+    const { x, y, w, h } = getXYWH();
+    for (let i = x; i < x + w; i++) {
+      for (let j = y; j < y + h; j++) {
+        $(`#row${j}>#col${i}`).addClass("new-node");
+      }
+    }
+    $(".new-node").css("background-color", "#D9E5FF");
+  }
+  // Add new node on group grid
+  function addNewNode(arr) {
+    // Remove 'new-node' class in every row-col
+    const { x, y, w, h } = getXYWH();
+    removeColor(arr[0].length, arr.length);
+    // if (x, y, w, h) is ok, then put. or error.
+    if (validateXYWH(arr)) {
+      addColor();
+      $(dropdownPositionSelector).removeClass("input-error");
+    } else {
+      $(dropdownPositionSelector).addClass("input-error");
+      console.log(`You can not put a node on (${y}, ${x})`);
+    }
+  }
   RED.nodes.registerType("soop_dropdown", {
     category: "soop-dashboard",
-    color: "rgb(255, 189, 27)",
+    color: "#1153FC",
     defaults: {
       name: { value: "" },
       label: { value: "dropdown" },
       tooltip: { value: "" },
       group: { type: "soop_group", required: true },
-      order: { value: 0 },
-      width: { value: 0 },
-      height: { value: 0 },
+      width: { value: 1, validate: RED.validators.number(), required: true },
+      height: { value: 1, validate: RED.validators.number(), required: true },
       widgetX: { value: 0, validate: RED.validators.number(), required: true },
       widgetY: { value: 0, validate: RED.validators.number(), required: true },
       options: {
@@ -30,14 +123,17 @@
     outputs: 1,
     icon: "ui_dropdown.png",
     oneditprepare: function () {
+      $.fn.groupTable = function (arr) {
+        $(this).append('<table border="1" id="group-table"><tbody></tbody></table>');
+        newTable(arr);
+        $(dropdownPositionSelector).on("change", () => addNewNode(arr));
+      };
+      $("#node-input-group-table").groupTable(getGroupGrid(this.id));
+
       if (this.multiple === undefined) {
         $("#node-input-multiple").prop("checked", false);
       }
-      $("#node-input-size").elementSizer({
-        width: "#node-input-width",
-        height: "#node-input-height",
-        group: "#node-input-group",
-      });
+
       var un = new Set(
         this.options.map(function (o) {
           return o.value;
diff --git a/dashboard/nodes/soop_dropdown.js b/dashboard/nodes/soop_dropdown.js
index 344dd45a..0434904d 100644
--- a/dashboard/nodes/soop_dropdown.js
+++ b/dashboard/nodes/soop_dropdown.js
@@ -6,26 +6,24 @@ module.exports = function (RED) {
     this.multiple = config.multiple || false;
     this.state = [" ", " "];
     var node = this;
-    node.status({});
 
-    var group = RED.nodes.getNode(config.group);
-    if (!group) {
-      return;
-    }
-    var tab = RED.nodes.getNode(group.config.tab);
-    if (!tab) {
-      return;
-    }
+    // var group = RED.nodes.getNode(config.group);
+    // if (!group) {
+    //   return;
+    // }
+    // var tab = RED.nodes.getNode(group.config.tab);
+    // if (!tab) {
+    //   return;
+    // }
 
+    const group = "";
     var control = {
       nodeId: node.id,
       nodeType: "dropdown",
       group: group,
-      size: [config.width || group.config.width || 3, config.height || 1],
+      size: [parseInt(config.width), parseInt(config.height), parseInt(config.widgetX), parseInt(config.widgetY)],
       label: config.label,
       tooltip: config.tooltip,
-      width: config.width || group.config.width || 3,
-      height: config.height || 1,
       name: config.name || "",
       time: "",
     };
@@ -37,7 +35,7 @@ module.exports = function (RED) {
 
     node.on("input", function (msg) {
       dashboard.emitState({
-        node_id: node.id,
+        nodeId: node.id,
         key: msg.payload,
       });
     });
diff --git a/dashboard/nodes/soop_gauge.html b/dashboard/nodes/soop_gauge.html
index 33b7d0bd..1e8bebcd 100644
--- a/dashboard/nodes/soop_gauge.html
+++ b/dashboard/nodes/soop_gauge.html
@@ -1,13 +1,110 @@
 <script type="text/javascript">
+  const gaugePositionSelector = "#node-input-widgetX, #node-input-widgetY, #node-input-width, #node-input-height";
+  function getGroupGrid(nodeId) {
+    const groupId = $("#node-input-group").val();
+    const groupNode = RED.nodes.node(groupId);
+    groupNode._def.reflectEdit(groupId, nodeId);
+    return groupNode.groupState;
+  }
+  function getXYWH() {
+    const x = parseInt($("#node-input-widgetX").val());
+    const y = parseInt($("#node-input-widgetY").val());
+    const w = parseInt($("#node-input-width").val());
+    const h = parseInt($("#node-input-height").val());
+    return { x, y, w, h };
+  }
+  // Validate the widget to place on (x, y, w, h).
+  function validateXYWH(arr) {
+    const { x, y, w, h } = getXYWH();
+    // If x, y, w, h is under or over idx of arr -> return false
+    if (x < 0 || y < 0 || w <= 0 || h <= 0 || w > 12 || x + w > arr[0].length || y + h > arr.length) {
+      return false;
+    }
+    // If the space is alredy filled, return false
+    for (let i = x; i < x + w; i++) {
+      for (let j = y; j < y + h; j++) {
+        if (arr[j][i]) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  // Create a table with array
+  function newTable(arr) {
+    const row = arr.length;
+    const col = arr[0].length;
+    // Append a row for column header(1,2,....)
+    $("#group-table>tbody").append('<tr id="col-header"></tr>');
+    $("#col-header").append("<th></th>");
+    for (let j = 0; j < col; j++) {
+      $("#col-header").append(`<th scope="col">${j}</th>`);
+    }
+    // Append group row and col
+    for (let i = 0; i < row; i++) {
+      // append row
+      $("#group-table>tbody").append(`<tr id="row${i}"></tr>`);
+      // Append a col for row header(1,2,...)
+      $(`#row${i}`).append(`<th scope="row" class="row-header">${i}</th>`);
+      // Append col
+      for (let j = 0; j < col; j++) {
+        const tag = `<td id="col${j}" class="col ${arr[i][j] ? "filled" : "empty"}" ></td>`;
+        $(`#row${i}`).append(tag);
+      }
+    }
+    // Table Design
+    $(".col").css("border", "dotted black 1px");
+    $(".col").css("width", "20px");
+    $(".col").css("height", "20px");
+    $(".filled").css("background-color", "#DEDEDE");
+    $(".empty").css("background-color", "#FFFFFF");
+    $("th").css("border", "none");
+  }
+  // Remove color for new node and return the original color for filled or empty space
+  function removeColor(w, h) {
+    for (let i = 0; i < w; i++) {
+      for (let j = 0; j < h; j++) {
+        $(`#row${j}>#col${i}`).removeClass("new-node");
+      }
+    }
+    $(".filled").css("background-color", "#DEDEDE");
+    $(".empty").css("background-color", "#FFFFFF");
+  }
+  // Add color for new node
+  function addColor() {
+    const { x, y, w, h } = getXYWH();
+    for (let i = x; i < x + w; i++) {
+      for (let j = y; j < y + h; j++) {
+        $(`#row${j}>#col${i}`).addClass("new-node");
+      }
+    }
+    $(".new-node").css("background-color", "#D9E5FF");
+  }
+  // Add new node on group grid
+  function addNewNode(arr) {
+    // Remove 'new-node' class in every row-col
+    const { x, y, w, h } = getXYWH();
+    removeColor(arr[0].length, arr.length);
+    // if (x, y, w, h) is ok, then put. or error.
+    if (validateXYWH(arr)) {
+      addColor();
+      $(gaugePositionSelector).removeClass("input-error");
+    } else {
+      $(gaugePositionSelector).addClass("input-error");
+      console.log(`You can not put a node on (${y}, ${x})`);
+    }
+  }
   RED.nodes.registerType("soop_gauge", {
     category: "soop-dashboard",
-    color: "rgb(255, 189, 27)",
+    color: "#5F86FE",
     defaults: {
       name: { value: "" },
       label: { value: "gauge_name" },
-      group: { type: "ui_group", required: true },
-      width: { value: 0 },
-      height: { value: 0 },
+      group: { type: "soop_group", required: true },
+      width: { value: 1, validate: RED.validators.number(), required: true },
+      height: { value: 1, validate: RED.validators.number(), required: true },
+      widgetX: { value: 0, validate: RED.validators.number(), required: true },
+      widgetY: { value: 0, validate: RED.validators.number(), required: true },
       gType: { value: "gauge" },
       format: { value: "{{msg.payload}}" },
       units: { value: "%" },
@@ -26,6 +123,13 @@
       return this.min + " - " + this.max;
     },
     oneditprepare: function () {
+      $.fn.groupTable = function (arr) {
+        $(this).append('<table border="1" id="group-table"><tbody></tbody></table>');
+        newTable(arr);
+        $(gaugePositionSelector).on("change", () => addNewNode(arr));
+      };
+      $("#node-input-group-table").groupTable(getGroupGrid(this.id));
+
       if (this.gType === undefined) {
         this.gType = "gauge";
         $("#node-input-gtype").val("gauge");
@@ -36,12 +140,6 @@
         $("input[type=radio][name=colorPicking]")[0].checked = true;
       }
 
-      $("#node-input-size").elementSizer({
-        width: "#node-input-width",
-        height: "#node-input-height",
-        group: "#node-input-group",
-      });
-
       let pickers = $("input[type=radio][name=colorPicking]");
       for (var i = 0; i < pickers.length; i++) {
         if (pickers[i].value == this.colorPicking) pickers[i].checked = true;
@@ -59,10 +157,19 @@
     <input type="text" id="node-input-group" />
   </div>
   <div class="form-row">
-    <label><i class="fa fa-object-group"></i> Size</label>
-    <input type="hidden" id="node-input-width" />
-    <input type="hidden" id="node-input-height" />
-    <button class="editor-button" id="node-input-size"></button>
+    <label for="node-input-group-table"><i class="fa fa-table"></i> Group table</label>
+    <div id="node-input-group-table" style="width:70%; display: inline-block;">
+      <div style="margin-bottom:10px">
+        <label for="node-input-widgetX" style="width:auto;">x</label>
+        <input type="text" id="node-input-widgetX" value="0" style="width:30px; margin-right:10px;" />
+        <label for="node-input-widgetY" style="width:auto;">y </label>
+        <input type="text" id="node-input-widgetY" value="0" style="width:30px; margin-right:10px;" />
+        <label for="node-input-width" style="width:auto;">w</label>
+        <input type="text" id="node-input-width" value="1" style="width:30px; margin-right:10px;" />
+        <label for="node-input-height" style="width:auto;">h</label>
+        <input type="text" id="node-input-height" value="1" style="width:30px; margin-right:10px;" />
+      </div>
+    </div>
   </div>
   <div class="form-row">
     <label for="node-input-gType"><i class="fa fa-list"></i> Type</label>
diff --git a/dashboard/nodes/soop_gauge.js b/dashboard/nodes/soop_gauge.js
index fb0e09b2..ffb34cc0 100644
--- a/dashboard/nodes/soop_gauge.js
+++ b/dashboard/nodes/soop_gauge.js
@@ -5,20 +5,21 @@ module.exports = function (RED) {
     RED.nodes.createNode(this, config);
     const node = this;
 
-    const group = RED.nodes.getNode(config.group);
-    if (!group) {
-      return;
-    }
-    const tab = RED.nodes.getNode(group.config.tab);
-    if (!tab) {
-      return;
-    }
+    // const group = RED.nodes.getNode(config.group);
+    // if (!group) {
+    //   return;
+    // }
+    // const tab = RED.nodes.getNode(group.config.tab);
+    // if (!tab) {
+    //   return;
+    // }
 
+    const group = "";
     let state = {
-      node_id: config.id,
+      nodeId: node.id,
       nodeType: config.type,
       group: config.group,
-      size: [config.width, config.height],
+      size: [parseInt(config.width), parseInt(config.height), parseInt(config.widgetX), parseInt(config.widgetY)],
       name: config.name,
       time: "",
       gType: config.gType,
diff --git a/dashboard/nodes/soop_list.html b/dashboard/nodes/soop_list.html
index be6719b5..ea3ca6c5 100644
--- a/dashboard/nodes/soop_list.html
+++ b/dashboard/nodes/soop_list.html
@@ -1,13 +1,108 @@
 <script type="text/javascript">
+  const listPositionSelector = "#node-input-widgetX, #node-input-widgetY, #node-input-width, #node-input-height";
+  function getGroupGrid(nodeId) {
+    const groupId = $("#node-input-group").val();
+    const groupNode = RED.nodes.node(groupId);
+    groupNode._def.reflectEdit(groupId, nodeId);
+    return groupNode.groupState;
+  }
+  function getXYWH() {
+    const x = parseInt($("#node-input-widgetX").val());
+    const y = parseInt($("#node-input-widgetY").val());
+    const w = parseInt($("#node-input-width").val());
+    const h = parseInt($("#node-input-height").val());
+    return { x, y, w, h };
+  }
+  // Validate the widget to place on (x, y, w, h).
+  function validateXYWH(arr) {
+    const { x, y, w, h } = getXYWH();
+    // If x, y, w, h is under or over idx of arr -> return false
+    if (x < 0 || y < 0 || w <= 0 || h <= 0 || w > 12 || x + w > arr[0].length || y + h > arr.length) {
+      return false;
+    }
+    // If the space is alredy filled, return false
+    for (let i = x; i < x + w; i++) {
+      for (let j = y; j < y + h; j++) {
+        if (arr[j][i]) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  // Create a table with array
+  function newTable(arr) {
+    const row = arr.length;
+    const col = arr[0].length;
+    // Append a row for column header(1,2,....)
+    $("#group-table>tbody").append('<tr id="col-header"></tr>');
+    $("#col-header").append("<th></th>");
+    for (let j = 0; j < col; j++) {
+      $("#col-header").append(`<th scope="col">${j}</th>`);
+    }
+    // Append group row and col
+    for (let i = 0; i < row; i++) {
+      // append row
+      $("#group-table>tbody").append(`<tr id="row${i}"></tr>`);
+      // Append a col for row header(1,2,...)
+      $(`#row${i}`).append(`<th scope="row" class="row-header">${i}</th>`);
+      // Append col
+      for (let j = 0; j < col; j++) {
+        const tag = `<td id="col${j}" class="col ${arr[i][j] ? "filled" : "empty"}" ></td>`;
+        $(`#row${i}`).append(tag);
+      }
+    }
+    // Table Design
+    $(".col").css("border", "dotted black 1px");
+    $(".col").css("width", "20px");
+    $(".col").css("height", "20px");
+    $(".filled").css("background-color", "#DEDEDE");
+    $(".empty").css("background-color", "#FFFFFF");
+    $("th").css("border", "none");
+  }
+  // Remove color for new node and return the original color for filled or empty space
+  function removeColor(w, h) {
+    for (let i = 0; i < w; i++) {
+      for (let j = 0; j < h; j++) {
+        $(`#row${j}>#col${i}`).removeClass("new-node");
+      }
+    }
+    $(".filled").css("background-color", "#DEDEDE");
+    $(".empty").css("background-color", "#FFFFFF");
+  }
+  // Add color for new node
+  function addColor() {
+    const { x, y, w, h } = getXYWH();
+    for (let i = x; i < x + w; i++) {
+      for (let j = y; j < y + h; j++) {
+        $(`#row${j}>#col${i}`).addClass("new-node");
+      }
+    }
+    $(".new-node").css("background-color", "#D9E5FF");
+  }
+  // Add new node on group grid
+  function addNewNode(arr) {
+    // Remove 'new-node' class in every row-col
+    const { x, y, w, h } = getXYWH();
+    removeColor(arr[0].length, arr.length);
+    // if (x, y, w, h) is ok, then put. or error.
+    if (validateXYWH(arr)) {
+      addColor();
+      $(listPositionSelector).removeClass("input-error");
+    } else {
+      $(listPositionSelector).addClass("input-error");
+      console.log(`You can not put a node on (${y}, ${x})`);
+    }
+  }
   RED.nodes.registerType("soop_list", {
     category: "soop-dashboard",
-    color: "rgb(255, 189, 27)",
+    color: "#5F86FE",
     defaults: {
       name: { value: "" },
       label: { value: "list_name" },
       group: { type: "soop_group", required: true },
-      width: { value: 0 },
-      height: { value: 0 },
+      width: { value: 1, validate: RED.validators.number(), required: true },
+      height: { value: 1, validate: RED.validators.number(), required: true },
       widgetX: { value: 0, validate: RED.validators.number(), required: true },
       widgetY: { value: 0, validate: RED.validators.number(), required: true },
       tooltip: { value: "list_node" },
@@ -17,17 +112,18 @@
     inputs: 1,
     icon: "ui_dropdown.png",
     oneditprepare: function () {
+      $.fn.groupTable = function (arr) {
+        $(this).append('<table border="1" id="group-table"><tbody></tbody></table>');
+        newTable(arr);
+        $(listPositionSelector).on("change", () => addNewNode(arr));
+      };
+      $("#node-input-group-table").groupTable(getGroupGrid(this.id));
+
       if (this.listType === undefined) {
         this.listType = "ol";
         $("#node-input-type").val("ol");
       }
 
-      $("#node-input-size").elementSizer({
-        width: "#node-input-width",
-        height: "#node-input-height",
-        group: "#node-input-group",
-      });
-
       function generateOption(i, option) {
         var container = $("<li/>", {
           style: "background: #fff; margin:0; padding:8px 0px 0px; border-bottom: 1px solid #ccc;",
@@ -178,7 +274,7 @@ <h3>Details</h3>
       List Type
       <dl class="message-properties">
         <dt>Ordered, Unordered, Checkbox <span class="property-type">String</span></dt>
-        <dd>The list has several modes. ordered list, unordered list, checkobx list</dd>
+        <dd>The list has several modes. ordered list, unordered list, checkbox list</dd>
       </dl>
     </li>
     <li>
diff --git a/dashboard/nodes/soop_list.js b/dashboard/nodes/soop_list.js
index 3f11ffa2..fe18319b 100644
--- a/dashboard/nodes/soop_list.js
+++ b/dashboard/nodes/soop_list.js
@@ -5,20 +5,21 @@ module.exports = function (RED) {
     RED.nodes.createNode(this, config);
     const node = this;
 
-    var group = RED.nodes.getNode(config.group);
-    if (!group) {
-      return;
-    }
-    var tab = RED.nodes.getNode(group.config.tab);
-    if (!tab) {
-      return;
-    }
+    // var group = RED.nodes.getNode(config.group);
+    // if (!group) {
+    //   return;
+    // }
+    // var tab = RED.nodes.getNode(group.config.tab);
+    // if (!tab) {
+    //   return;
+    // }
 
+    const group = "";
     let state = {
-      node_id: node.id,
+      nodeId: node.id,
       nodeType: config.type,
-      group: config.group,
-      size: [config.width, config.height],
+      group: group,
+      size: [parseInt(config.width), parseInt(config.height), parseInt(config.widgetX), parseInt(config.widgetY)],
       name: config.name,
       time: "",
       label: config.label,
diff --git a/dashboard/nodes/soop_text.html b/dashboard/nodes/soop_text.html
index 316192eb..b6a67a71 100644
--- a/dashboard/nodes/soop_text.html
+++ b/dashboard/nodes/soop_text.html
@@ -81,26 +81,113 @@
 </style>
 
 <script type="text/javascript">
+  const textPositionSelector = "#node-input-widgetX, #node-input-widgetY, #node-input-width, #node-input-height";
+  function getGroupGrid(nodeId) {
+    const groupId = $("#node-input-group").val();
+    const groupNode = RED.nodes.node(groupId);
+    groupNode._def.reflectEdit(groupId, nodeId);
+    return groupNode.groupState;
+  }
+  function getXYWH() {
+    const x = parseInt($("#node-input-widgetX").val());
+    const y = parseInt($("#node-input-widgetY").val());
+    const w = parseInt($("#node-input-width").val());
+    const h = parseInt($("#node-input-height").val());
+    return { x, y, w, h };
+  }
+  // Validate the widget to place on (x, y, w, h).
+  function validateXYWH(arr) {
+    const { x, y, w, h } = getXYWH();
+    // If x, y, w, h is under or over idx of arr -> return false
+    if (x < 0 || y < 0 || w <= 0 || h <= 0 || w > 12 || x + w > arr[0].length || y + h > arr.length) {
+      return false;
+    }
+    // If the space is alredy filled, return false
+    for (let i = x; i < x + w; i++) {
+      for (let j = y; j < y + h; j++) {
+        if (arr[j][i]) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  // Create a table with array
+  function newTable(arr) {
+    const row = arr.length;
+    const col = arr[0].length;
+    // Append a row for column header(1,2,....)
+    $("#group-table>tbody").append('<tr id="col-header"></tr>');
+    $("#col-header").append("<th></th>");
+    for (let j = 0; j < col; j++) {
+      $("#col-header").append(`<th scope="col">${j}</th>`);
+    }
+    // Append group row and col
+    for (let i = 0; i < row; i++) {
+      // append row
+      $("#group-table>tbody").append(`<tr id="row${i}"></tr>`);
+      // Append a col for row header(1,2,...)
+      $(`#row${i}`).append(`<th scope="row" class="row-header">${i}</th>`);
+      // Append col
+      for (let j = 0; j < col; j++) {
+        const tag = `<td id="col${j}" class="col ${arr[i][j] ? "filled" : "empty"}" ></td>`;
+        $(`#row${i}`).append(tag);
+      }
+    }
+    // Table Design
+    $(".col").css("border", "dotted black 1px");
+    $(".col").css("width", "20px");
+    $(".col").css("height", "20px");
+    $(".filled").css("background-color", "#DEDEDE");
+    $(".empty").css("background-color", "#FFFFFF");
+    $("th").css("border", "none");
+  }
+  // Remove color for new node and return the original color for filled or empty space
+  function removeColor(w, h) {
+    for (let i = 0; i < w; i++) {
+      for (let j = 0; j < h; j++) {
+        $(`#row${j}>#col${i}`).removeClass("new-node");
+      }
+    }
+    $(".filled").css("background-color", "#DEDEDE");
+    $(".empty").css("background-color", "#FFFFFF");
+  }
+  // Add color for new node
+  function addColor() {
+    const { x, y, w, h } = getXYWH();
+    for (let i = x; i < x + w; i++) {
+      for (let j = y; j < y + h; j++) {
+        $(`#row${j}>#col${i}`).addClass("new-node");
+      }
+    }
+    $(".new-node").css("background-color", "#D9E5FF");
+  }
+  // Add new node on group grid
+  function addNewNode(arr) {
+    // Remove 'new-node' class in every row-col
+    const { x, y, w, h } = getXYWH();
+    removeColor(arr[0].length, arr.length);
+    // if (x, y, w, h) is ok, then put. or error.
+    if (validateXYWH(arr)) {
+      addColor();
+      $(textPositionSelector).removeClass("input-error");
+    } else {
+      $(textPositionSelector).addClass("input-error");
+      console.log(`You can not put a node on (${y}, ${x})`);
+    }
+  }
   RED.nodes.registerType("soop_text", {
     category: "soop-dashboard",
-    color: "rgb(255, 189, 27)",
+    color: "#5F86FE",
     defaults: {
-      name: {
-        value: "",
-      },
-      label: {
-        value: "text_name",
-      },
-      group: {
-        type: "ui_group",
-        required: true,
-      },
-      width: {
-        value: 0,
-      },
-      height: {
-        value: 0,
-      },
+      name: { value: "" },
+      label: { value: "text_name" },
+      group: { type: "soop_group", required: true },
+      width: { value: 1, validate: RED.validators.number(), required: true },
+      height: { value: 1, validate: RED.validators.number(), required: true },
+      widgetX: { value: 0, validate: RED.validators.number(), required: true },
+      widgetY: { value: 0, validate: RED.validators.number(), required: true },
+      tooltip: { value: "list_node" },
       format: { value: "{{msg.payload}}" },
       layout: { value: "0" },
       fontSize: { value: "16", required: true, validate: RED.validators.number() },
@@ -108,12 +195,6 @@
     inputs: 1,
     icon: "text.png",
     oneditprepare: function () {
-      $("#node-input-size").elementSizer({
-        width: "#node-input-width",
-        height: "#node-input-height",
-        group: "#node-input-group",
-      });
-
       $(".nr-db-text-layout-" + (this.layout || "row-spread")).addClass("selected");
 
       [
@@ -140,10 +221,19 @@
     <input type="text" id="node-input-group" />
   </div>
   <div class="form-row">
-    <label><i class="fa fa-object-group"></i> Size</label>
-    <input type="hidden" id="node-input-width" />
-    <input type="hidden" id="node-input-height" />
-    <button class="editor-button" id="node-input-size"></button>
+    <label for="node-input-group-table"><i class="fa fa-table"></i> Group table</label>
+    <div id="node-input-group-table" style="width:70%; display: inline-block;">
+      <div style="margin-bottom:10px">
+        <label for="node-input-widgetX" style="width:auto;">x</label>
+        <input type="text" id="node-input-widgetX" value="0" style="width:30px; margin-right:10px;" />
+        <label for="node-input-widgetY" style="width:auto;">y </label>
+        <input type="text" id="node-input-widgetY" value="0" style="width:30px; margin-right:10px;" />
+        <label for="node-input-width" style="width:auto;">w</label>
+        <input type="text" id="node-input-width" value="1" style="width:30px; margin-right:10px;" />
+        <label for="node-input-height" style="width:auto;">h</label>
+        <input type="text" id="node-input-height" value="1" style="width:30px; margin-right:10px;" />
+      </div>
+    </div>
   </div>
   <div class="form-row">
     <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
diff --git a/dashboard/nodes/soop_text.js b/dashboard/nodes/soop_text.js
index cfaf6537..f43fcf86 100644
--- a/dashboard/nodes/soop_text.js
+++ b/dashboard/nodes/soop_text.js
@@ -5,20 +5,21 @@ module.exports = function (RED) {
     RED.nodes.createNode(this, config);
     const node = this;
 
-    const group = RED.nodes.getNode(config.group);
-    if (!group) {
-      return;
-    }
-    const tab = RED.nodes.getNode(group.config.tab);
-    if (!tab) {
-      return;
-    }
+    // const group = RED.nodes.getNode(config.group);
+    // if (!group) {
+    //   return;
+    // }
+    // const tab = RED.nodes.getNode(group.config.tab);
+    // if (!tab) {
+    //   return;
+    // }
 
+    const group = "";
     let state = {
-      node_id: config.id,
+      nodeId: config.id,
       nodeType: config.type,
-      group: config.group,
-      size: [config.width, config.height],
+      group: group,
+      size: [parseInt(config.width), parseInt(config.height), parseInt(config.widgetX), parseInt(config.widgetY)],
       name: config.name,
       time: "",
       label: config.label,