diff --git a/dashboard/nodes/locales/en-US/soop_tab.html b/dashboard/nodes/locales/en-US/soop_tab.html
deleted file mode 100644
index 2ffe2068..00000000
--- a/dashboard/nodes/locales/en-US/soop_tab.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<script type="text/html" data-help-name="soop_tab">
-    <p>The default name is given as
-        <b>"Tab # number"</b>.It doesn't matter if the name is duplicated.
-    </p>
-</script>
\ No newline at end of file
diff --git a/dashboard/nodes/locales/en-US/soop_tab.json b/dashboard/nodes/locales/en-US/soop_tab.json
deleted file mode 100644
index 13296fd7..00000000
--- a/dashboard/nodes/locales/en-US/soop_tab.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "soop_tab": {
-        "label": {
-            "tab": "Tab ",
-            "name": "Name"
-        }
-
-    }
-}
\ No newline at end of file
diff --git a/dashboard/nodes/soop_group.html b/dashboard/nodes/soop_group.html
index f9f7b22a..f9cea069 100644
--- a/dashboard/nodes/soop_group.html
+++ b/dashboard/nodes/soop_group.html
@@ -1,96 +1,122 @@
 <script type="text/javascript">
-    // convert to i18 text
-
-    function c_soop_group(x) {
-        return RED._("soopsasm-dashboard/soop_group:soop_group." + x);
-    }
-    RED.nodes.registerType('soop_group', {
-        category: 'config',
+    RED.nodes.registerType("soop_group", {
+        category: "config",
         defaults: {
             name: {
-                value: c_soop_group("label.default")
+                value: "Default",
             },
             tab: {
                 type: "soop_tab",
-                required: true
+                required: true,
             },
             order: {
-                value: 0
+                value: 0,
             },
             displayVisible: {
-                value: true
+                value: true,
             },
             width: {
-                value: 3
+                value: 3,
             },
             height: {
-                value: 2
+                value: 2,
             },
             groupX: {
-                value: 0
+                value: 0,
             },
             groupY: {
-                value: 0
+                value: 0,
             },
-
             disabled: {
-                value: false
+                value: false,
             },
             hidden: {
-                value: false
+                value: false,
             },
             groupState: {
-                value: new Array()
+                value: new Array(),
             },
             includedNodesId: {
-                value: new Array()
-            }
+                value: new Array(),
+            },
         },
-        paletteLabel: 'SOOPSASM GROUP',
+        paletteLabel: "SOOPSASM GROUP",
         label: function() {
             var tabNode = RED.nodes.node(this.tab);
             if (tabNode) {
-                return "[" + (tabNode.name || c_soop_group("label.tab")) + "] " + (this.name || c_soop_group("label.group"));
+                return "[" + (tabNode.name || "Tab") + "] " + (this.name || "Group");
             }
-            return "[" + c_soop_group("label.unassigned") + "] " + (this.name || c_soop_group("label.group"));
+            return "[Unassigned] " + (this.name || "Group");
         },
         labelStyle: function() {
             return this.name ? "node_label_italic" : "";
         },
+        reflectEdit: function(gNode, nodeId) {
+            var groupNode = RED.nodes.node(gNode);
+            groupNode.includedNodesId = new Array();
+            RED.nodes.eachNode(function(node) {
+                if (groupNode.id == node.group && groupNode.includedNodesId.indexOf(node.id) < 0 && node.id !== nodeId) {
+                    groupNode.includedNodesId.push(node.id);
+                }
+            });
+            groupNode.groupState = new Array(groupNode.height);
+            for (var i = 0; i < groupNode.height; i++) {
+                groupNode.groupState[i] = Array.from({
+                        length: groupNode.width,
+                    },
+                    () => false,
+                );
+            }
+            for (var i = 0; i < groupNode.includedNodesId.length; i++) {
+                var tmpNode = RED.nodes.node(groupNode.includedNodesId[i]);
+                var tmpW = parseInt(tmpNode.width);
+                var tmpH = parseInt(tmpNode.height);
+                var tmpX = parseInt(tmpNode.widgetX);
+                var tmpY = parseInt(tmpNode.widgetY);
+                for (var j = tmpX; j < tmpX + tmpW; j++) {
+                    for (var k = tmpY; k < tmpY + tmpH; k++) {
+                        groupNode.groupState[k][j] = true;
+                    }
+                }
+            }
+            return groupNode;
+        },
         oneditprepare: function() {
-            console.log('oneditprepare');
-            groupLoc.groupLocationDefaultSetting(this.tab);
-        }
-
+            tabNode = RED.nodes.node(this.tab);
+            var tmpValueXY = tabNode._def.groupLocationDefaultSetting(this.tab, this.id);
+            this.groupX = tmpValueXY.gX;
+            this.groupY = tmpValueXY.gY;
+            document.getElementById("node-config-input-groupX").value = this.groupX;
+            document.getElementById("node-config-input-groupY").value = this.groupY;
+        },
     });
 </script>
 <script type="text/html" data-template-name="soop_group">
     <div class="form-row">
-        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="soop_group.label.name"></span></label>
-        <input type="text" id="node-config-input-name">
-    </div>
-    <div class="form-row">
-        <label for="node-config-input-tab"><i class="fa fa-table"></i> <span data-i18n="soop_group.label.tab"></span></label>
-        <input type="text" id="node-config-input-tab">
-    </div>
-
-    <div class="form-row">
-        <label for="node-config-input-height"><span data-i18n="soop_group.label.height"></span></label>
-        <input id="node-input-height" />
-    </div>
-    <div class="form-row">
-        <label for="node-config-input-width"><span data-i18n="soop_group.label.width"></span></label>
-        <input id="node-input-width" />
+        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
+        <input type="text" id="node-config-input-name" />
     </div>
     <div class="form-row">
-        <label for="node-config-input-groupX"><span data-i18n="soop_group.label.x"></span></label>
-        <input id="node-input-groupY" />
+        <label for="node-config-input-tab"><i class="fa fa-table"></i> <span>Tab</span></label>
+        <input type="text" id="node-config-input-tab" />
     </div>
     <div class="form-row">
-        <label for="node-config-input-groupY"><span data-i18n="soop_group.label.y"></span></label>
-        <input id="node-input-groupY" />
+        <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-config-input-groupX" style="width:auto;">x</label>
+                <input type="text" id="node-config-input-groupX" value="0" style="width:30px; margin-right:10px;" />
+                <label for="node-config-input-groupY" style="width:auto;">y </label>
+                <input type="text" id="node-config-input-groupY" value="0" style="width:30px; margin-right:10px;" />
+                <label for="node-config-input-height" style="width:auto;">w</label>
+                <input type="text" id="node-config-input-height" value="1" style="width:30px; margin-right:10px;" />
+                <label for="node-config-input-width" style="width:auto;">h</label>
+                <input type="text" id="node-config-input-width" value="1" style="width:30px; margin-right:10px;" />
+            </div>
+        </div>
     </div>
     <div class="form-row">
-        <input style="margin:10px 0px 10px 102px; width:20px;" type="checkbox" checked id="node-config-input-disp"> <label style="width:auto" for="node-config-input-disp"><span data-i18n="soop_group.display-name"></span></label>
+        <input style="margin:10px 0px 10px 102px; width:20px;" type="checkbox" checked id="node-config-input-disp" />
+        <label style="width:auto" for="node-config-input-displayVisible"><span>Display group name</span></label>
     </div>
 </script>
\ No newline at end of file
diff --git a/dashboard/nodes/soop_group.js b/dashboard/nodes/soop_group.js
index 712bd881..f445d312 100644
--- a/dashboard/nodes/soop_group.js
+++ b/dashboard/nodes/soop_group.js
@@ -1,24 +1,33 @@
 module.exports = function(RED) {
+    const dashboard = require("../dashboard")(RED);
 
     function GroupNode(config) {
+        const node = this;
         RED.nodes.createNode(this, config);
         this.config = {
             name: config.name,
             displayVisible: config.displayVisible,
-            groupX: config.x,
-            groupY: config.y,
+            groupX: config.groupX,
+            groupY: config.groupY,
             width: config.width,
             height: config.height,
             order: config.order,
             tab: config.tab,
             groupState: config.groupState,
-            includedNodesId: config.includedNodesId
+            includedNodesId: config.includedNodesId,
         };
-        if (!this.config.hasOwnProperty("displayVisible")) { this.config.displayVisible = true; }
-        if (this.config.displayVisible !== false) { this.config.displayVisible = true; }
+        if (!this.config.hasOwnProperty("displayVisible")) {
+            this.config.displayVisible = true;
+        }
+        if (this.config.displayVisible !== false) {
+            this.config.displayVisible = true;
+        }
         for (var i = 0; i < this.config.height; i++) {
             this.config.groupState[i] = new Array(this.config.width);
         }
+        dashboard.addNode({
+            node: node,
+        });
     }
 
     RED.nodes.registerType("soop_group", GroupNode);
diff --git a/dashboard/nodes/soop_tab.html b/dashboard/nodes/soop_tab.html
index b9346279..0775c071 100644
--- a/dashboard/nodes/soop_tab.html
+++ b/dashboard/nodes/soop_tab.html
@@ -1,18 +1,130 @@
 <script type="text/javascript">
     var tabCount = new Array();
+
+    function isConflict(x, y, w, h, mh, tbl) {
+        if (x + w <= 12 && y + h <= mh) {
+            for (var i = x; i < x + w; i++) {
+                for (var j = y; j < y + h; j++) {
+                    if (tbl[j][i] !== 0) {
+                        return false;
+                    }
+                }
+            }
+            return true;
+        }
+        return false;
+    };
+
+    function fillTable(x, y, w, h, mh, tbl) {
+        if (x + w <= 12 && y + h <= mh) {
+            for (var i = x; i < x + w; i++) {
+                for (var j = y; j < y + h; j++) {
+                    if (tbl[j][i] == 0) {
+                        tbl[j][i] = 1;
+                    }
+                }
+            }
+        }
+        return tbl;
+    };
+
     RED.nodes.registerType('soop_tab', {
         category: 'config',
         defaults: {
             name: {
-                value: RED._("soopsasm-dashboard/soop_tab:soop_tab.label.tab")
+                value: "Tab"
             },
             includedGroups: {
                 value: []
-            }
+            },
+            includedGroupsName: {
+                value: []
+            },
         },
         paletteLabel: 'SOOPSASM Tab',
         label: function() {
-            return this.name || RED._("soopsasm-dashboard/soop_tab:soop_tab.label.tab ");
+            return this.name || "Tab";
+        },
+        groupLocationDefaultSetting: function(tNode, gNode) {
+            var tabNode = RED.nodes.node(tNode);
+            var maxHeight = 0;
+            RED.nodes.eachConfig(function(node) {
+                if (node.type == 'soop_group') {
+                    if (node.tab == tabNode.id && tabNode.includedGroupsName.indexOf(node.id) < 0) {
+                        tabNode.includedGroups.push({
+                            id: node.id,
+                            width: node.width,
+                            height: node.height,
+                            groupX: node.groupX,
+                            groupY: node.groupY
+                        });
+                        tabNode.includedGroupsName.push(node.id)
+                    }
+                }
+            });
+            tabNode.includedGroups.sort(function(a, b) {
+                if (a.width > b.width) {
+                    return -1
+                } else {
+                    if (a.width == b.width && a.height > b.height) {
+                        return -1
+                    } else {
+                        return 1
+                    }
+                }
+            });
+            for (var i = 0; i < tabNode.includedGroups.length; i++) {
+                maxHeight += parseInt(tabNode.includedGroups[i].height);
+
+            }
+            tabGrid = new Array(maxHeight);
+            for (var i = 0; i < tabGrid.length; i++) {
+                tabGrid[i] = Array.from({
+                        length: 12,
+                    },
+                    () => 0,
+                );
+            }
+
+            var dataCheck = true;
+            for (var i = 0; i < tabGrid.length; i++) {
+                for (var j = 0; j < 12; j++) {
+                    tabGrid[i][j] = 0;
+                }
+            }
+
+
+            for (var i = 0; i < tabNode.includedGroups.length; i++) {
+                dataCheck = true;
+                for (var tmpY = 0; tmpY < maxHeight; tmpY++) {
+                    if (dataCheck) {
+                        for (var tmpX = 0; tmpX < 12; tmpX++) {
+                            if (dataCheck) {
+                                if (isConflict(tmpX, tmpY, parseInt(tabNode.includedGroups[i].width), parseInt(tabNode.includedGroups[i].height), maxHeight, tabGrid)) {
+                                    tabGrid = fillTable(tmpX, tmpY, parseInt(tabNode.includedGroups[i].width), parseInt(tabNode.includedGroups[i].height), maxHeight, tabGrid);
+                                    tabNode.includedGroups[i].groupX = tmpX;
+                                    tabNode.includedGroups[i].groupY = tmpY;
+                                    dataCheck = false;
+                                }
+                            } else {
+                                break;
+                            }
+                        }
+                    } else {
+                        break;
+                    }
+                }
+            }
+            for (var i = 0; i < tabNode.includedGroups.length; i++) {
+                if (gNode == tabNode.includedGroups[i].id) {
+                    var groupNode = RED.nodes.node(gNode);
+                    return {
+                        gX: tabNode.includedGroups[i].groupX,
+                        gY: tabNode.includedGroups[i].groupY
+                    };
+                };
+
+            }
         },
         oneditprepare: function() {
             RED.nodes.eachConfig(function(node) {
@@ -31,7 +143,7 @@
 
 <script type="text/html" data-template-name="soop_tab">
     <div class="form-row">
-        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="soop_tab.label.name"></span></label>
+        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
         <input type="text" id="node-config-input-name">
     </div>
 </script>
\ No newline at end of file
diff --git a/dashboard/nodes/soop_tab.js b/dashboard/nodes/soop_tab.js
index a7f004c0..5d0dd313 100644
--- a/dashboard/nodes/soop_tab.js
+++ b/dashboard/nodes/soop_tab.js
@@ -1,11 +1,17 @@
 module.exports = function(RED) {
+    const dashboard = require("../dashboard")(RED);
 
     function TabNode(config) {
+        const node = this;
         RED.nodes.createNode(this, config);
         this.config = {
             name: config.name,
-            includedGroups: config.includedGroups
+            includedGroups: config.includedGroups,
+            includedGroupsName: config.includedGroupsName
         };
+        dashboard.addNode({
+            node: node,
+        });
     }
 
     RED.nodes.registerType("soop_tab", TabNode);