diff --git a/src/utils/config/api-response.js b/src/utils/config/api-response.js
index 73821f47..d7f3242f 100644
--- a/src/utils/config/api-response.js
+++ b/src/utils/config/api-response.js
@@ -10,6 +10,7 @@ import {
   servicesFromDocker,
   cleanServiceGroups,
   servicesFromKubernetes,
+  findGroupByName,
 } from "utils/config/service-helpers";
 import { cleanWidgetGroups, widgetsFromConfig } from "utils/config/widget-helpers";
 
@@ -84,6 +85,16 @@ export async function widgetsResponse() {
   return configuredWidgets;
 }
 
+function mergeSubgroups(configuredGroups, mergedGroup) {
+  configuredGroups.forEach((group) => {
+    if (group.name === mergedGroup.name) {
+      group.services = mergedGroup.services;
+    } else if (group.groups) {
+      mergeSubgroups(group.groups, mergedGroup);
+    }
+  });
+}
+
 export async function servicesResponse() {
   let discoveredDockerServices;
   let discoveredKubernetesServices;
@@ -140,26 +151,29 @@ export async function servicesResponse() {
   const definedLayouts = initialSettings.layout ? Object.keys(initialSettings.layout) : null;
 
   mergedGroupsNames.forEach((groupName) => {
-    const discoveredDockerGroup = discoveredDockerServices.find((group) => group.name === groupName) || {
+    const discoveredDockerGroup = findGroupByName(discoveredDockerServices, groupName) || {
       services: [],
     };
-    const discoveredKubernetesGroup = discoveredKubernetesServices.find((group) => group.name === groupName) || {
+    const discoveredKubernetesGroup = findGroupByName(discoveredKubernetesServices, groupName) || {
       services: [],
     };
-    const configuredGroup = configuredServices.find((group) => group.name === groupName) || { services: [] };
+    const configuredGroup = findGroupByName(configuredServices, groupName) || { services: [] };
 
     const mergedGroup = {
       name: groupName,
       services: [...discoveredDockerGroup.services, ...discoveredKubernetesGroup.services, ...configuredGroup.services]
         .filter((service) => service)
         .sort(compareServices),
-      groups: [...configuredGroup.groups], // TODO: do this properly
+      groups: [...configuredGroup.groups],
     };
 
     if (definedLayouts) {
       const layoutIndex = definedLayouts.findIndex((layout) => layout === mergedGroup.name);
       if (layoutIndex > -1) sortedGroups[layoutIndex] = mergedGroup;
-      else unsortedGroups.push(mergedGroup);
+      else if (configuredGroup.name) {
+        // this is a nested group, so find the parent group and merge the services
+        mergeSubgroups(configuredServices, mergedGroup);
+      } else unsortedGroups.push(mergedGroup);
     } else {
       unsortedGroups.push(mergedGroup);
     }
diff --git a/src/utils/config/service-helpers.js b/src/utils/config/service-helpers.js
index 6ef89b4d..71664b1d 100644
--- a/src/utils/config/service-helpers.js
+++ b/src/utils/config/service-helpers.js
@@ -675,12 +675,12 @@ export function cleanServiceGroups(groups) {
       });
       return cleanedService;
     }),
-    type: serviceGroup.type,
-    groups: cleanServiceGroups(serviceGroup.groups),
+    type: serviceGroup.type || "group",
+    groups: serviceGroup.groups ? cleanServiceGroups(serviceGroup.groups) : [],
   }));
 }
 
-function findGroupByName(groups, name) {
+export function findGroupByName(groups, name) {
   for (const group of groups) {
     if (group.name === name) {
       return group;