diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
index 3538632d71..09a7e603da 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js
@@ -4,7 +4,7 @@
   /**
    * A component to render the content type tab
    */
-  
+
   function umbContentTypeTabController() {
 
     const vm = this;
@@ -48,7 +48,7 @@
 
     function changeName () {
       if (vm.onChangeName) {
-        vm.onChangeName({ name: vm.tab.name });
+        vm.onChangeName({ key: vm.tab.key, name: vm.tab.name });
       }
     }
 
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
index ed0823a495..6f05aadf0f 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
@@ -21,7 +21,7 @@
             scope.compositionsButtonState = "init";
             scope.tabs = [];
             scope.genericGroups = [];
-            scope.openTabAlias = null;
+            scope.openTabAlias = "";
             scope.hasGenericTab = false;
             scope.genericTab = {
                 key: null,
@@ -46,7 +46,7 @@
                 checkGenericTabVisibility();
 
                 if (!scope.openTabAlias && scope.hasGenericTab) {
-                    scope.openTabAlias = null;
+                    scope.openTabAlias = "";
                 } else if (!scope.openTabAlias && scope.tabs.length > 0) {
                     scope.openTabAlias = scope.tabs[0].alias;
                 }
@@ -126,7 +126,7 @@
                     accept: '.umb-group-builder__property-sortable, .umb-group-builder__group-sortable',
                     tolerance : 'pointer',
                     over: function (evt, ui) {
-                        scope.openTabKey = evt.target.dataset.tabKey || null;
+                        scope.openTabAlias = evt.target.dataset.tabAlias || "";
                         scope.$evalAsync();
                     }
                 };
@@ -416,7 +416,7 @@
                 const tab = {
                     key: String.CreateGuid(),
                     name: "",
-                    parentKey: null,
+                    parentAlias: "",
                     type: TYPE_TAB,
                     sortOrder,
                     properties: []
@@ -425,14 +425,14 @@
                 if (newTabIndex === 0) {
                     scope.model.groups.forEach(group => {
                         if (!group.inherited) {
-                            group.parentKey = tab.key;
+                            group.parentAlias = tab.alias;
                         }
                     });
                 }
 
                 scope.model.groups = [...scope.model.groups, tab];
 
-                scope.openTabKey = tab.key;
+                scope.openTabAlias = tab.alias;
 
                 scope.$broadcast('umbOverflowChecker.scrollTo', { position: 'end' });
                 scope.$broadcast('umbOverflowChecker.checkOverflow');
@@ -449,14 +449,14 @@
                             scope.model.groups.splice(tab.indexInGroups, 1);
 
                             // remove all child groups
-                            scope.model.groups = scope.model.groups.filter(group => group.parentKey !== tab.key);
+                            scope.model.groups = scope.model.groups.filter(group => group.parentAlias !== tab.alias);
 
                             // we need a timeout because the filter hasn't updated the tabs collection
                             $timeout(() => {
                                 if (scope.tabs.length > 0) {
-                                    scope.openTabKey = indexInTabs > 0 ? scope.tabs[indexInTabs - 1].key : scope.tabs[0].key;
+                                    scope.openTabAlias = indexInTabs > 0 ? scope.tabs[indexInTabs - 1].alias : scope.tabs[0].alias;
                                 } else {
-                                    scope.openTabKey = null;
+                                    scope.openTabAlias = "";
                                 }
                             });
 
@@ -480,12 +480,38 @@
                 scope.tabs = $filter('orderBy')(scope.tabs, 'sortOrder');
             };
 
-            scope.onChangeTabName = function () {
+            scope.onChangeTabName = function (key) {
+                const changedTab = scope.model.groups.find(group => group.key === key);
+                updateGroupAlias(changedTab)
                 scope.$broadcast('umbOverflowChecker.checkOverflow');
             };
 
-            scope.ungroupedPropertiesAreVisible = function({key, properties}) {
-                const isOpenTab = key === scope.openTabKey;
+            /** Universal method for updating group alias (for tabs, field-sets etc.) */
+            function updateGroupAlias(changedGroup) {
+                console.log(changedGroup)
+                const newAlias = contentEditingHelper.generateTabAlias(changedGroup.parentAlias, changedGroup.name);
+                updateDescendingAliases(newAlias, changedGroup.alias);
+                changedGroup.alias = newAlias;
+            }
+
+            function updateDescendingAliases(oldAlias, newAlias) {
+
+                /** current code will replace old alias no matter how deep/nested the groups matching are.
+                 * Meaning no need for recursive code.
+                 * Recursive code could be problematic as we only want to change alias of groups we own, not inherited ones.
+                */
+                const replaceAliasStr = oldAlias + "/";
+                const replaceAliasLength = replaceAliasStr.length;
+                scope.model.groups.forEach(tab => {
+                    if(tab.parentAlias.indexOf(replaceAliasStr) === 0) {
+                        tab.alias = newAlias + "/" + tab.alias.substr(replaceAliasLength)
+                        tab.parentAlias = contentEditingHelper.getParentAliasFromAlias(tab.alias);
+                    }
+                });
+            }
+
+            scope.ungroupedPropertiesAreVisible = function({alias, properties}) {
+                const isOpenTab = alias === scope.openTabAlias;
 
                 if (isOpenTab && properties.length > 0) {
                     return true;
@@ -495,7 +521,7 @@
                     return true;
                 }
 
-                const tabHasGroups = scope.model.groups.filter(group => group.parentKey === key).length > 0;
+                const tabHasGroups = scope.model.groups.filter(group => group.parentAlias === alias).length > 0;
 
                 if (isOpenTab && !tabHasGroups) {
                     return true;
@@ -503,7 +529,7 @@
             };
 
             function checkGenericTabVisibility () {
-                const hasRootGroups = scope.model.groups.filter(group => group.type === TYPE_GROUP && group.parentKey === null).length > 0;
+                const hasRootGroups = scope.model.groups.filter(group => group.type === TYPE_GROUP && group.parentAlias === "").length > 0;
                 scope.hasGenericTab = (hasRootGroups && scope.tabs.length > 0) || scope.sortingMode;
             }
 
@@ -550,10 +576,10 @@
 
             /* ---------- GROUPS ---------- */
 
-            scope.addGroup = function (tabKey) {
+            scope.addGroup = function (tabAlias) {
                 scope.model.groups = scope.model.groups || [];
 
-                const groupsInTab = scope.model.groups.filter(group => group.parentKey === tabKey);
+                const groupsInTab = scope.model.groups.filter(group => group.parentAlias === tabAlias);
                 const lastGroupSortOrder = groupsInTab.length > 0 ? groupsInTab[groupsInTab.length - 1].sortOrder + 1 : 0;
 
                 const group = {
@@ -562,7 +588,8 @@
                     parentTabContentTypes: [],
                     parentTabContentTypeNames: [],
                     name: "",
-                    parentKey: tabKey || null,
+                    alias: "",
+                    parentAlias: tabAlias || "",
                     type: TYPE_GROUP,
                     sortOrder: lastGroupSortOrder
                 };
@@ -588,6 +615,10 @@
                 selectedGroup.tabState = "active";
             };
 
+            scope.onChangeGroupName = function(group) {
+                updateGroupAlias(group);
+            }
+
             scope.canRemoveGroup = function (group) {
                 return group.inherited !== true && _.find(group.properties, function (property) { return property.locked === true; }) == null;
             };
@@ -610,7 +641,7 @@
             };
 
             scope.addGroupToActiveTab = function () {
-                scope.addGroup(scope.openTabKey);
+                scope.addGroup(scope.openTabAlias);
             };
 
             scope.changeSortOrderValue = function (group) {
@@ -623,8 +654,8 @@
             };
 
             scope.onChangeGroupSortOrderValue = function (sortedGroup) {
-                const groupsInTab = scope.model.groups.filter(group => group.parentKey === sortedGroup.parentKey);
-                const otherGroups = scope.model.groups.filter(group => group.parentKey !== sortedGroup.parentKey);
+                const groupsInTab = scope.model.groups.filter(group => group.parentAlias === sortedGroup.parentAlias);
+                const otherGroups = scope.model.groups.filter(group => group.parentAlias !== sortedGroup.parentAlias);
                 const sortedGroups = $filter('orderBy')(groupsInTab, 'sortOrder');
                 scope.model.groups = [...otherGroups, ...sortedGroups];
             };
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
index e087268dd5..c848166197 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/contenteditinghelper.service.js
@@ -182,8 +182,8 @@ function contentEditingHelper(fileManager, $q, $location, $routeParams, editorSt
 
         genericTabAlias: "_umb_genericTab",
 
-        generateTabAlias: function(alias, parentAlias) {
-            return (parentAlias !== "" && parentAlias != null ? parentAlias + "/" : "" ) + alias;
+        generateTabAlias: function(parentAlias, name) {
+            return (parentAlias !== "" && parentAlias != null ? parentAlias + "/" : "" ) + name.toUmbracoAlias();
         },
 
         getParentAliasFromAlias: function(alias) {
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/umbdataformatter.service.js b/src/Umbraco.Web.UI.Client/src/common/services/umbdataformatter.service.js
index 3ebe79e947..226fabeae4 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/umbdataformatter.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/umbdataformatter.service.js
@@ -75,7 +75,7 @@
                 });
                 saveModel.groups = _.map(realGroups, function (g) {
 
-                    var saveGroup = _.pick(g, 'inherited', 'id', 'sortOrder', 'name', 'key', 'parentKey', 'type');
+                    var saveGroup = _.pick(g, 'inherited', 'id', 'sortOrder', 'name', 'key', 'alias', 'type');
 
                     var realProperties = _.reject(g.properties, function (p) {
                         //do not include these properties
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index a44d402c7c..d36fe4cfa7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -12,7 +12,7 @@
                     <li ng-if="hasGenericTab" umb-droppable="droppableOptionsTab" data-tab-key="{{genericTab.key}}">
                         <umb-content-type-tab
                             tab="genericTab"
-                            is-open="!openTabKey"
+                            is-open="!openTabAlias"
                             on-click="changeTab(genericTab)"
                             allow-change-name="false">
                         </umb-content-type-tab>
@@ -20,14 +20,14 @@
                     <li ng-repeat="(tabIndex, tab) in tabs track by tab.key" ng-class="{'umb-group-builder__tab-sortable': sortingMode}" umb-droppable="droppableOptionsTab" data-tab-key="{{tab.key}}">
                         <umb-content-type-tab
                             tab="tab"
-                            is-open="tab.key === openTabKey"
+                            is-open="tab.alias === openTabAlias"
                             on-click="changeTab(tab)"
                             sorting="sortingMode"
                             allow-remove="canRemoveTab(tab) && !sortingMode"
                             on-remove="removeTab(tab, tabIndex)"
                             val-server-field-name="{{'Groups[' + tab.indexInGroups + '].Name'}}"
                             on-change-sort-order-value="onChangeTabSortOrderValue(tab)"
-                            on-change-name="onChangeTabName(name)">
+                            on-change-name="onChangeTabName(key)">
                         </umb-content-type-tab>
                     </li>
                     <li>
@@ -131,6 +131,7 @@
                 group="group"
                 allow-remove="canRemoveGroup(group) && !sortingMode"
                 on-remove="removeGroup(group)"
+                on-update-name="onChangeGroupName(group)"
                 sorting="sortingMode"
                 on-change-sort-order-value="onChangeGroupSortOrderValue(group)"
                 val-server-field-name="{{'Groups[' + $index + '].Name'}}"
@@ -166,7 +167,7 @@
         ng-if="!sortingMode"
         type="button"
         class="umb-group-builder__group -placeholder"
-        ng-click="addGroup(openTabKey)"
+        ng-click="addGroupToActiveTab()"
         data-element="group-add">
         <localize key="contentTypeEditor_addGroup"></localize>
     </button>