diff --git a/frontend-modern/src/components/Docker/DockerHosts.tsx b/frontend-modern/src/components/Docker/DockerHosts.tsx
index 6890eede5..2fbf8e0ef 100644
--- a/frontend-modern/src/components/Docker/DockerHosts.tsx
+++ b/frontend-modern/src/components/Docker/DockerHosts.tsx
@@ -623,6 +623,7 @@ export const DockerHosts: Component<DockerHostsProps> = (props) => {
                 dockerHostMetadata={dockerHostMetadata()}
                 onCustomUrlUpdate={handleCustomUrlUpdate}
                 batchUpdateState={batchUpdateState}
+                groupingMode={groupingMode() === 'flat' ? 'flat' : 'grouped'}
               />
             }
           >
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index ca46b0d1f..0dbfcfad6 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -76,6 +76,7 @@ interface DockerUnifiedTableProps {
   dockerHostMetadata?: Record<string, DockerHostMetadata>;
   onCustomUrlUpdate?: (resourceId: string, url: string) => void;
   batchUpdateState?: Record<string, 'updating' | 'queued' | 'error'>;
+  groupingMode?: 'grouped' | 'flat';
 }
 
 type SortKey =
@@ -2481,6 +2482,17 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
 
   const isGroupedView = createMemo(() => sortKey() === 'host');
 
+  // Sync external groupingMode prop with internal sort state
+  createEffect(() => {
+    const mode = props.groupingMode;
+    if (mode === 'grouped' && sortKey() !== 'host') {
+      setSortKey('host');
+    } else if (mode === 'flat' && sortKey() === 'host') {
+      // Switch to resource sort for flat view
+      setSortKey('resource');
+    }
+  });
+
   const handleSort = (key: SortKey) => {
     if (sortKey() === key) {
       setSortDirection(sortDirection() === 'asc' ? 'desc' : 'asc');