diff --git a/src/api/billingApi.ts b/src/api/billingApi.ts
index cc05e44..8094658 100644
--- a/src/api/billingApi.ts
+++ b/src/api/billingApi.ts
@@ -36,6 +36,29 @@ export interface BillingTransaction {
   userName?: string;
 }
 
+/** Pagination request for GET /api/billing/transactions with `pagination` JSON (table + grouping). */
+export interface BillingTransactionsPaginationParams {
+  page?: number;
+  pageSize?: number;
+  sort?: Array<{ field: string; direction: 'asc' | 'desc' }>;
+  filters?: Record<string, any>;
+  search?: string;
+  viewKey?: string;
+  groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: 'asc' | 'desc' }>;
+}
+
+export interface BillingTransactionsPaginatedResponse {
+  items: BillingTransaction[];
+  pagination?: {
+    currentPage: number;
+    pageSize: number;
+    totalItems: number;
+    totalPages: number;
+  };
+  groupLayout?: import('./connectionApi').GroupLayout;
+  appliedView?: { viewKey?: string; displayName?: string };
+}
+
 export interface BillingSettings {
   id: string;
   mandateId: string;
@@ -135,7 +158,31 @@ export async function fetchBalanceForMandate(
 }
 
 /**
- * Fetch transaction history
+ * Fetch transaction history (table UI: pagination, filters, sort, saved views, grouping).
+ * Endpoint: GET /api/billing/transactions?pagination=...
+ */
+export async function fetchTransactionsPaginated(
+  request: ApiRequestFunction,
+  params?: BillingTransactionsPaginationParams
+): Promise<BillingTransactionsPaginatedResponse> {
+  const paginationObj: Record<string, unknown> = {};
+  if (params?.page !== undefined) paginationObj.page = params.page;
+  if (params?.pageSize !== undefined) paginationObj.pageSize = params.pageSize;
+  if (params?.sort?.length) paginationObj.sort = params.sort;
+  if (params?.filters && Object.keys(params.filters).length > 0) paginationObj.filters = params.filters;
+  if (params?.search) paginationObj.search = params.search;
+  if (params?.viewKey) paginationObj.viewKey = params.viewKey;
+  if (params?.groupByLevels !== undefined) paginationObj.groupByLevels = params.groupByLevels;
+
+  return await request({
+    url: '/api/billing/transactions',
+    method: 'get',
+    params: { pagination: JSON.stringify(paginationObj) },
+  });
+}
+
+/**
+ * Fetch transaction history (legacy array window)
  * Endpoint: GET /api/billing/transactions
  */
 export async function fetchTransactions(
diff --git a/src/api/connectionApi.ts b/src/api/connectionApi.ts
index 41a79e4..8c47c6d 100644
--- a/src/api/connectionApi.ts
+++ b/src/api/connectionApi.ts
@@ -55,19 +55,22 @@ export interface PaginationParams {
   sort?: Array<{ field: string; direction: 'asc' | 'desc' }>;
   filters?: Record<string, any>;
   search?: string;
-  /** Scope request to items of this group (resolved server-side to itemIds IN-filter). */
-  groupId?: string;
-  /** If set, persist this group tree on the backend before fetching (optimistic save). */
-  saveGroupTree?: TableGroupNode[];
+  /** Key of a saved view to apply (server loads groupByLevels, filters, sort from DB). */
+  viewKey?: string;
+  /** Explicit grouping levels; when sent (incl. []), overrides the view for this request. */
+  groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: 'asc' | 'desc' }>;
 }
 
-export interface TableGroupNode {
-  id: string;
-  name: string;
-  itemIds: string[];
-  subGroups: TableGroupNode[];
-  order: number;
-  isExpanded: boolean;
+export interface GroupBand {
+  path: string[];
+  label: string;
+  startRowIndex: number;
+  rowCount: number;
+}
+
+export interface GroupLayout {
+  levels: string[];
+  bands: GroupBand[];
 }
 
 export interface PaginatedResponse<T> {
@@ -78,8 +81,8 @@ export interface PaginatedResponse<T> {
     totalItems: number;
     totalPages: number;
   };
-  /** Current group tree for this (user, contextKey) pair — undefined if no grouping configured. */
-  groupTree?: TableGroupNode[];
+  groupLayout?: GroupLayout;
+  appliedView?: { viewKey?: string; displayName?: string };
 }
 
 export interface CreateConnectionData {
@@ -138,8 +141,8 @@ export async function fetchConnections(
     if (params.sort) paginationObj.sort = params.sort;
     if (params.filters) paginationObj.filters = params.filters;
     if (params.search) paginationObj.search = params.search;
-    if (params.groupId) paginationObj.groupId = params.groupId;
-    if (params.saveGroupTree !== undefined) paginationObj.saveGroupTree = params.saveGroupTree;
+    if (params.viewKey) paginationObj.viewKey = params.viewKey;
+    if (params.groupByLevels !== undefined) paginationObj.groupByLevels = params.groupByLevels;
     
     if (Object.keys(paginationObj).length > 0) {
       requestParams.pagination = JSON.stringify(paginationObj);
diff --git a/src/api/fileApi.ts b/src/api/fileApi.ts
index 7e2c67a..75151c3 100644
--- a/src/api/fileApi.ts
+++ b/src/api/fileApi.ts
@@ -34,8 +34,8 @@ export interface PaginationParams {
   sort?: Array<{ field: string; direction: 'asc' | 'desc' }>;
   filters?: Record<string, any>;
   search?: string;
-  groupId?: string;
-  saveGroupTree?: any[];
+  viewKey?: string;
+  groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: 'asc' | 'desc' }>;
 }
 
 export interface PaginatedResponse<T> {
@@ -46,6 +46,8 @@ export interface PaginatedResponse<T> {
     totalItems: number;
     totalPages: number;
   };
+  groupLayout?: import('./connectionApi').GroupLayout;
+  appliedView?: { viewKey?: string; displayName?: string };
 }
 
 // Type for the request function passed to API functions
@@ -105,9 +107,9 @@ export async function fetchFiles(
     if (params.sort) paginationObj.sort = params.sort;
     if (params.filters) paginationObj.filters = params.filters;
     if (params.search) paginationObj.search = params.search;
-    if (params.groupId) paginationObj.groupId = params.groupId;
-    if (params.saveGroupTree !== undefined) paginationObj.saveGroupTree = params.saveGroupTree;
-    
+    if (params.viewKey) paginationObj.viewKey = params.viewKey;
+    if (params.groupByLevels !== undefined) paginationObj.groupByLevels = params.groupByLevels;
+
     if (Object.keys(paginationObj).length > 0) {
       requestParams.pagination = JSON.stringify(paginationObj);
     }
@@ -249,28 +251,13 @@ export async function deleteGroup(
   });
 }
 
-/** Collect all file IDs belonging to a group recursively (client-side, from known groupTree) */
+/** @deprecated Group tree removed — use view-based grouping (viewKey). Returns empty array. */
 export function collectGroupItemIds(
-  groupTree: Array<{ id: string; itemIds: string[]; subGroups: any[] }>,
-  groupId: string
+  _groupTree: Array<{ id: string; itemIds: string[]; subGroups: any[] }>,
+  _groupId: string
 ): string[] {
-  const collect = (nodes: Array<{ id: string; itemIds: string[]; subGroups: any[] }>): string[] | null => {
-    for (const node of nodes) {
-      if (node.id === groupId) {
-        const ids: string[] = [...node.itemIds];
-        const sub = (n: { id: string; itemIds: string[]; subGroups: any[] }) => {
-          ids.push(...n.itemIds);
-          n.subGroups.forEach(sub);
-        };
-        node.subGroups.forEach(sub);
-        return ids;
-      }
-      const found = collect(node.subGroups);
-      if (found) return found;
-    }
-    return null;
-  };
-  return collect(groupTree) ?? [];
+  const collect = (): string[] | null => null;
+  return collect() ?? [];
 }
 
 // Note: The following operations require special handling (FormData, blob responses)
diff --git a/src/api/mandateApi.ts b/src/api/mandateApi.ts
index 7946395..24aee62 100644
--- a/src/api/mandateApi.ts
+++ b/src/api/mandateApi.ts
@@ -46,8 +46,7 @@ export interface PaginationParams {
   sort?: Array<{ field: string; direction: 'asc' | 'desc' }>;
   filters?: Record<string, any>;
   search?: string;
-  groupId?: string;
-  saveGroupTree?: any[];
+  viewKey?: string;
 }
 
 export interface PaginatedResponse<T> {
@@ -86,8 +85,7 @@ export async function fetchMandates(
     if (params.sort) paginationObj.sort = params.sort;
     if (params.filters) paginationObj.filters = params.filters;
     if (params.search) paginationObj.search = params.search;
-    if (params.groupId) paginationObj.groupId = params.groupId;
-    if (params.saveGroupTree !== undefined) paginationObj.saveGroupTree = params.saveGroupTree;
+    if (params.viewKey) paginationObj.viewKey = params.viewKey;
     
     if (Object.keys(paginationObj).length > 0) {
       requestParams.pagination = JSON.stringify(paginationObj);
diff --git a/src/api/promptApi.ts b/src/api/promptApi.ts
index e735ae0..164a633 100644
--- a/src/api/promptApi.ts
+++ b/src/api/promptApi.ts
@@ -49,8 +49,8 @@ export interface PaginationParams {
   sort?: Array<{ field: string; direction: 'asc' | 'desc' }>;
   filters?: Record<string, any>;
   search?: string;
-  groupId?: string;
-  saveGroupTree?: any[];
+  viewKey?: string;
+  groupByLevels?: Array<{ field: string; nullLabel?: string; direction?: 'asc' | 'desc' }>;
 }
 
 export interface PaginatedResponse<T> {
@@ -61,6 +61,8 @@ export interface PaginatedResponse<T> {
     totalItems: number;
     totalPages: number;
   };
+  groupLayout?: import('./connectionApi').GroupLayout;
+  appliedView?: { viewKey?: string; displayName?: string };
 }
 
 export interface CreatePromptData {
@@ -112,9 +114,9 @@ export async function fetchPrompts(
     if (params.sort) paginationObj.sort = params.sort;
     if (params.filters) paginationObj.filters = params.filters;
     if (params.search) paginationObj.search = params.search;
-    if (params.groupId) paginationObj.groupId = params.groupId;
-    if (params.saveGroupTree !== undefined) paginationObj.saveGroupTree = params.saveGroupTree;
-    
+    if (params.viewKey) paginationObj.viewKey = params.viewKey;
+    if (params.groupByLevels !== undefined) paginationObj.groupByLevels = params.groupByLevels;
+
     if (Object.keys(paginationObj).length > 0) {
       requestParams.pagination = JSON.stringify(paginationObj);
     }
diff --git a/src/api/tableViewApi.ts b/src/api/tableViewApi.ts
new file mode 100644
index 0000000..08039e8
--- /dev/null
+++ b/src/api/tableViewApi.ts
@@ -0,0 +1,59 @@
+import api from '../api';
+
+export interface TableListViewRow {
+  id: string;
+  userId?: string;
+  mandateId?: string | null;
+  contextKey: string;
+  viewKey: string;
+  displayName: string;
+  config: TableViewConfig;
+  updatedAt?: number;
+}
+
+export interface TableViewConfig {
+  schemaVersion?: number;
+  filters?: Record<string, unknown>;
+  sort?: Array<{ field: string; direction: 'asc' | 'desc' }>;
+  groupByLevels?: Array<{ field: string; nullLabel?: string }>;
+  /** Section mode (`tableGroupLayoutMode="sections"`): stable keys (`sk`) of collapsed sections. */
+  collapsedSectionKeys?: string[];
+  /** Inline `groupLayout` bands: keys are `band.path.join('///')`. */
+  collapsedGroupKeys?: string[];
+}
+
+export async function listTableViews(contextKey: string): Promise<TableListViewRow[]> {
+  const { data } = await api.get<TableListViewRow[]>('/api/table-views', {
+    params: { contextKey },
+  });
+  return Array.isArray(data) ? data : [];
+}
+
+export async function getTableView(contextKey: string, viewKey: string): Promise<TableListViewRow> {
+  const { data } = await api.get<TableListViewRow>(`/api/table-views/${encodeURIComponent(viewKey)}`, {
+    params: { contextKey },
+  });
+  return data;
+}
+
+export async function createTableView(payload: {
+  contextKey: string;
+  viewKey: string;
+  displayName: string;
+  config: TableViewConfig;
+}): Promise<TableListViewRow> {
+  const { data } = await api.post<TableListViewRow>('/api/table-views', payload);
+  return data;
+}
+
+export async function updateTableView(
+  viewId: string,
+  updates: { displayName?: string; viewKey?: string; config?: TableViewConfig },
+): Promise<TableListViewRow> {
+  const { data } = await api.put<TableListViewRow>(`/api/table-views/${encodeURIComponent(viewId)}`, updates);
+  return data;
+}
+
+export async function deleteTableView(viewId: string): Promise<void> {
+  await api.delete(`/api/table-views/${encodeURIComponent(viewId)}`);
+}
diff --git a/src/api/userApi.ts b/src/api/userApi.ts
index 98dd7a2..3615375 100644
--- a/src/api/userApi.ts
+++ b/src/api/userApi.ts
@@ -48,8 +48,7 @@ export interface PaginationParams {
   sort?: Array<{ field: string; direction: 'asc' | 'desc' }>;
   filters?: Record<string, any>;
   search?: string;
-  groupId?: string;
-  saveGroupTree?: any[];
+  viewKey?: string;
 }
 
 export interface PaginatedResponse<T> {
@@ -154,8 +153,7 @@ export async function fetchUsers(
     if (params.sort) paginationObj.sort = params.sort;
     if (params.filters) paginationObj.filters = params.filters;
     if (params.search) paginationObj.search = params.search;
-    if (params.groupId) paginationObj.groupId = params.groupId;
-    if (params.saveGroupTree !== undefined) paginationObj.saveGroupTree = params.saveGroupTree;
+    if (params.viewKey) paginationObj.viewKey = params.viewKey;
     
     if (Object.keys(paginationObj).length > 0) {
       requestParams.pagination = JSON.stringify(paginationObj);
diff --git a/src/api/workflowApi.ts b/src/api/workflowApi.ts
index 26e2367..7a03b4e 100644
--- a/src/api/workflowApi.ts
+++ b/src/api/workflowApi.ts
@@ -30,6 +30,8 @@ export interface PortField {
   description: string | Record<string, string>;
   required: boolean;
   enumValues?: string[] | null;
+  /** When true, surface at the top of the DataPicker as the most common/recommended pick. */
+  recommended?: boolean;
 }
 
 export interface PortSchema {
@@ -85,11 +87,19 @@ export interface SystemVariable {
   description: string;
 }
 
+/** Single form field type with its canonical port primitive. Delivered by GET /node-types. */
+export interface FormFieldType {
+  id: string;
+  label: string;
+  portType: string;
+}
+
 export interface NodeTypesResponse {
   nodeTypes: NodeType[];
   categories: NodeTypeCategory[];
   portTypeCatalog?: Record<string, PortSchema>;
   systemVariables?: Record<string, SystemVariable>;
+  formFieldTypes?: FormFieldType[];
 }
 
 export interface Automation2GraphNode {
@@ -279,12 +289,14 @@ export async function fetchNodeTypes(
   const categories = data?.categories ?? [];
   const portTypeCatalog = data?.portTypeCatalog ?? undefined;
   const systemVariables = data?.systemVariables ?? undefined;
+  const formFieldTypes = data?.formFieldTypes ?? undefined;
   console.log(
     `${LOG} fetchNodeTypes response: ${nodeTypes.length} nodeTypes, ${categories.length} categories, ` +
       `${portTypeCatalog ? Object.keys(portTypeCatalog).length : 0} portTypes, ` +
-      `${systemVariables ? Object.keys(systemVariables).length : 0} sysVars`
+      `${systemVariables ? Object.keys(systemVariables).length : 0} sysVars, ` +
+      `${formFieldTypes ? formFieldTypes.length : 0} formFieldTypes`
   );
-  return { nodeTypes, categories, portTypeCatalog, systemVariables };
+  return { nodeTypes, categories, portTypeCatalog, systemVariables, formFieldTypes };
 }
 
 export interface UpstreamPathEntry {
diff --git a/src/components/FlowEditor/context/Automation2DataFlowContext.tsx b/src/components/FlowEditor/context/Automation2DataFlowContext.tsx
index 8be4ea9..f36f87c 100644
--- a/src/components/FlowEditor/context/Automation2DataFlowContext.tsx
+++ b/src/components/FlowEditor/context/Automation2DataFlowContext.tsx
@@ -6,7 +6,7 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import type { CanvasNode, CanvasConnection } from '../editor/FlowCanvas';
 import { getAvailableSources } from '../nodes/shared/dataFlowGraph';
-import type { ApiRequestFunction, NodeType, PortField, PortSchema, SystemVariable } from '../../../api/workflowApi';
+import type { ApiRequestFunction, FormFieldType, NodeType, PortField, PortSchema, SystemVariable } from '../../../api/workflowApi';
 
 export interface Automation2DataFlowContextValue {
   currentNodeId: string;
@@ -17,6 +17,8 @@ export interface Automation2DataFlowContextValue {
   language: string;
   portTypeCatalog: Record<string, PortSchema>;
   systemVariables: Record<string, SystemVariable>;
+  /** Canonical form field types from the API — maps UI type id to portType primitive. */
+  formFieldTypes: FormFieldType[];
   getNodeLabel: (node: { id: string; title?: string; label?: string; type?: string }) => string;
   getAvailableSourceIds: () => string[];
   /** Present when rendered inside the flow editor (ConnectionPicker / tools). */
@@ -41,6 +43,7 @@ interface Automation2DataFlowProviderProps {
   language: string;
   portTypeCatalog?: Record<string, PortSchema>;
   systemVariables?: Record<string, SystemVariable>;
+  formFieldTypes?: FormFieldType[];
   instanceId?: string;
   request?: ApiRequestFunction;
   children: React.ReactNode;
@@ -55,12 +58,18 @@ export const Automation2DataFlowProvider: React.FC<Automation2DataFlowProviderPr
   language,
   portTypeCatalog = {},
   systemVariables = {},
+  formFieldTypes = [],
   instanceId,
   request,
   children,
 }) => {
   const value = useMemo((): Automation2DataFlowContextValue | null => {
     if (!node) return null;
+    const formTypeToPort: Record<string, string> = Object.fromEntries(
+      formFieldTypes.map((f) => [f.id, f.portType])
+    );
+    const resolvePortType = (rawType: string): string => formTypeToPort[rawType] ?? rawType;
+
     const parseGraphDefinedSchema = (parameterKey: string): PortSchema | null => {
       const raw = node.parameters?.[parameterKey];
       if (!Array.isArray(raw)) return null;
@@ -72,8 +81,8 @@ export const Automation2DataFlowProvider: React.FC<Automation2DataFlowProviderPr
         const lab = rec.label;
         const desc =
           typeof lab === 'string' ? lab : typeof lab === 'object' && lab !== null ? String((lab as Record<string, string>).de ?? '') : '';
-        const ftype = typeof rec.type === 'string' ? rec.type : 'str';
-        if (ftype === 'group' && Array.isArray(rec.fields)) {
+        const rawType = typeof rec.type === 'string' ? rec.type : 'str';
+        if (rawType === 'group' && Array.isArray(rec.fields)) {
           for (const sub of rec.fields as Record<string, unknown>[]) {
             if (!sub || typeof sub.name !== 'string') continue;
             const sl = sub.label;
@@ -85,7 +94,7 @@ export const Automation2DataFlowProvider: React.FC<Automation2DataFlowProviderPr
                   : '';
             fields.push({
               name: `${rec.name}.${sub.name}`,
-              type: typeof sub.type === 'string' ? sub.type : 'str',
+              type: resolvePortType(typeof sub.type === 'string' ? sub.type : 'str'),
               description: (sdesc && sdesc.trim()) || `${rec.name}.${sub.name}`,
               required: Boolean(sub.required),
             });
@@ -94,7 +103,7 @@ export const Automation2DataFlowProvider: React.FC<Automation2DataFlowProviderPr
         }
         fields.push({
           name: rec.name,
-          type: ftype,
+          type: resolvePortType(rawType),
           description: (desc && desc.trim()) || rec.name,
           required: Boolean(rec.required),
         });
@@ -110,6 +119,7 @@ export const Automation2DataFlowProvider: React.FC<Automation2DataFlowProviderPr
       language,
       portTypeCatalog,
       systemVariables,
+      formFieldTypes,
       getNodeLabel: (n: { id: string; title?: string; label?: string; type?: string }) =>
         n.title ?? n.label ?? n.type ?? n.id,
       getAvailableSourceIds: () => getAvailableSources(node.id, nodes, connections),
@@ -117,7 +127,7 @@ export const Automation2DataFlowProvider: React.FC<Automation2DataFlowProviderPr
       request,
       parseGraphDefinedSchema,
     };
-  }, [node, nodes, connections, nodeOutputsPreview, nodeTypes, language, portTypeCatalog, systemVariables, instanceId, request]);
+  }, [node, nodes, connections, nodeOutputsPreview, nodeTypes, language, portTypeCatalog, systemVariables, formFieldTypes, instanceId, request]);
 
   return (
     <Automation2DataFlowContext.Provider value={value}>
diff --git a/src/components/FlowEditor/editor/Automation2FlowEditor.module.css b/src/components/FlowEditor/editor/Automation2FlowEditor.module.css
index 67a4261..1b32bfb 100644
--- a/src/components/FlowEditor/editor/Automation2FlowEditor.module.css
+++ b/src/components/FlowEditor/editor/Automation2FlowEditor.module.css
@@ -1725,6 +1725,35 @@
   margin-left: 4px;
 }
 
+/* Type-mismatch warning badge (⚠) — shown instead of hiding incompatible fields. */
+.dataPickerMismatchBadge {
+  font-size: 10px;
+  margin-left: 4px;
+  color: var(--color-warning, #f59e0b);
+  flex-shrink: 0;
+}
+
+/* Recommended pick: subtle highlight on the row */
+.dataPickerLeafRecommended {
+  font-weight: 500;
+}
+
+/* "Empfohlen" pill shown on recommended entries */
+.dataPickerRecommendedPill {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 1px 5px;
+  border-radius: 10px;
+  margin-left: 5px;
+  background: var(--color-primary-light, #dbeafe);
+  color: var(--color-primary, #2563eb);
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
 /* "iterieren" affordance — visually distinct (subtle accent), readable on
  * the picker's white background and on the leaf's blue hover background. */
 .dataPickerIterateBtn {
diff --git a/src/components/FlowEditor/editor/Automation2FlowEditor.tsx b/src/components/FlowEditor/editor/Automation2FlowEditor.tsx
index f2ddf7a..772e9df 100644
--- a/src/components/FlowEditor/editor/Automation2FlowEditor.tsx
+++ b/src/components/FlowEditor/editor/Automation2FlowEditor.tsx
@@ -99,6 +99,7 @@ export const Automation2FlowEditor: React.FC<Automation2FlowEditorProps> = ({ in
   const [categories, setCategories] = useState<NodeTypeCategory[]>([]);
   const [portTypeCatalog, setPortTypeCatalog] = useState<Record<string, unknown>>({});
   const [systemVariables, setSystemVariables] = useState<Record<string, unknown>>({});
+  const [formFieldTypes, setFormFieldTypes] = useState<import('../../../api/workflowApi').FormFieldType[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [filter, setFilter] = useState('');
@@ -459,6 +460,7 @@ export const Automation2FlowEditor: React.FC<Automation2FlowEditorProps> = ({ in
         setRegistryCatalog(data.portTypeCatalog as never);
       }
       if (data.systemVariables) setSystemVariables(data.systemVariables);
+      if (data.formFieldTypes) setFormFieldTypes(data.formFieldTypes);
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : String(err));
       setNodeTypes([]);
@@ -904,6 +906,7 @@ export const Automation2FlowEditor: React.FC<Automation2FlowEditorProps> = ({ in
               language={language}
               portTypeCatalog={portTypeCatalog as Record<string, never>}
               systemVariables={systemVariables as Record<string, never>}
+              formFieldTypes={formFieldTypes}
               instanceId={instanceId}
               request={request}
             >
diff --git a/src/components/FlowEditor/nodes/form/FormNodeConfig.tsx b/src/components/FlowEditor/nodes/form/FormNodeConfig.tsx
index fbb8dc3..d0a07f6 100644
--- a/src/components/FlowEditor/nodes/form/FormNodeConfig.tsx
+++ b/src/components/FlowEditor/nodes/form/FormNodeConfig.tsx
@@ -7,11 +7,16 @@ import { FaGripVertical, FaTimes } from 'react-icons/fa';
 import type { FormField, NodeConfigRendererProps } from '../shared/types';
 import { FORM_FIELD_TYPES, FORM_FIELD_TYPE_LABELS } from '../../../../utils/attributeTypeMapper';
 import styles from '../../editor/Automation2FlowEditor.module.css';
+import { useAutomation2DataFlow } from '../../context/Automation2DataFlowContext';
 
 import { useLanguage } from '../../../../providers/language/LanguageContext';
 
 export const FormNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => {
   const { t } = useLanguage();
+  const ctx = useAutomation2DataFlow();
+  const fieldTypeOptions = ctx?.formFieldTypes?.length
+    ? ctx.formFieldTypes
+    : FORM_FIELD_TYPES.map((ft) => ({ id: ft, label: FORM_FIELD_TYPE_LABELS[ft] ?? ft, portType: 'str' }));
   const fields = (params.fields as FormField[]) ?? [];
 
   const moveField = (fromIndex: number, toIndex: number) => {
@@ -88,8 +93,8 @@ export const FormNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, upda
                 }}
                 style={{ width: 'auto', minWidth: 90 }}
               >
-                {FORM_FIELD_TYPES.map(ft => (
-                  <option key={ft} value={ft}>{t(FORM_FIELD_TYPE_LABELS[ft])}</option>
+                {fieldTypeOptions.map((ft) => (
+                  <option key={ft.id} value={ft.id}>{t(ft.label)}</option>
                 ))}
               </select>
               <label className={styles.formFieldRequiredLabel}>
diff --git a/src/components/FlowEditor/nodes/frontendTypeRenderers/ContextBuilderRenderer.tsx b/src/components/FlowEditor/nodes/frontendTypeRenderers/ContextBuilderRenderer.tsx
new file mode 100644
index 0000000..1785ee1
--- /dev/null
+++ b/src/components/FlowEditor/nodes/frontendTypeRenderers/ContextBuilderRenderer.tsx
@@ -0,0 +1,181 @@
+/**
+ * ContextBuilderRenderer — multi-select context binding for AI nodes.
+ *
+ * Renders a list of DataRef entries (each pointing to an upstream node's output
+ * path). On execution the backend serialises each ref, joins them with double
+ * newlines and prepends the result to the AI prompt.
+ *
+ * Stored value shape:
+ *   [ { type: "ref", nodeId: "...", path: [...], expectedType: "..." }, … ]
+ */
+
+import React from 'react';
+import { useLanguage } from '../../../../providers/language/LanguageContext';
+import { useAutomation2DataFlow } from '../../context/Automation2DataFlowContext';
+import { DataPicker } from '../shared/DataPicker';
+import { isRef, type DataRef, type SystemVarRef } from '../shared/dataRef';
+import type { FieldRendererProps } from './index';
+
+function isRefEntry(v: unknown): v is DataRef {
+  return isRef(v);
+}
+
+function toRefList(raw: unknown): DataRef[] {
+  if (!raw) return [];
+  if (Array.isArray(raw)) return raw.filter(isRefEntry);
+  if (isRefEntry(raw)) return [raw];
+  return [];
+}
+
+const CHIP_STYLE: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+  padding: '3px 6px 3px 10px',
+  background: '#eaf6e8',
+  border: '1px solid #5cb85c',
+  borderRadius: 4,
+  fontSize: 12,
+  marginBottom: 4,
+};
+
+const REMOVE_BTN: React.CSSProperties = {
+  padding: '0 5px',
+  border: '1px solid #5cb85c',
+  borderRadius: 3,
+  background: '#fff',
+  color: '#3c763d',
+  cursor: 'pointer',
+  fontSize: 11,
+  marginLeft: 'auto',
+};
+
+export const ContextBuilderRenderer: React.FC<FieldRendererProps> = ({ param, value, onChange }) => {
+  const { t } = useLanguage();
+  const dataFlow = useAutomation2DataFlow();
+  const [pickerOpen, setPickerOpen] = React.useState(false);
+  const dragIndex = React.useRef<number | null>(null);
+
+  const entries = toRefList(value);
+  const sourceIds = dataFlow?.getAvailableSourceIds() ?? [];
+  const hasSources = sourceIds.some((id) => {
+    const n = dataFlow?.nodes.find((x) => x.id === id);
+    return n?.type !== 'trigger.manual';
+  });
+
+  const getRefLabel = (ref: DataRef): string => {
+    const nodeLabel =
+      dataFlow?.getNodeLabel(
+        dataFlow.nodes.find((n) => n.id === ref.nodeId) ?? { id: ref.nodeId },
+      ) ?? ref.nodeId;
+    const pathStr = ref.path.length > 0 ? ref.path.map(String).join('.') : null;
+    return pathStr ? `${nodeLabel} → ${pathStr}` : nodeLabel;
+  };
+
+  const addRef = (picked: DataRef | SystemVarRef) => {
+    if (!isRefEntry(picked)) return;
+    const alreadyIn = entries.some(
+      (e) => e.nodeId === picked.nodeId && e.path.join('.') === picked.path.join('.'),
+    );
+    if (!alreadyIn) {
+      onChange([...entries, picked]);
+    }
+    setPickerOpen(false);
+  };
+
+  const removeRef = (index: number) => {
+    const next = entries.filter((_, i) => i !== index);
+    onChange(next.length ? next : undefined);
+  };
+
+  const moveRef = (fromIndex: number, toIndex: number) => {
+    if (fromIndex === toIndex) return;
+    const next = [...entries];
+    const [moved] = next.splice(fromIndex, 1);
+    next.splice(toIndex, 0, moved);
+    onChange(next);
+  };
+
+  return (
+    <div style={{ marginBottom: 8 }}>
+      <label style={{ display: 'block', fontSize: 12, marginBottom: 4, fontWeight: 600 }}>
+        {param.description || param.name}
+        {param.required && <span style={{ color: '#d9534f', marginLeft: 4 }}>*</span>}
+      </label>
+
+      {entries.length > 0 && (
+        <div style={{ marginBottom: 4 }}>
+          {entries.map((ref, i) => (
+            <div
+              key={`${ref.nodeId}-${ref.path.join('.')}`}
+              style={{ ...CHIP_STYLE, cursor: 'grab' }}
+              draggable
+              onDragStart={() => { dragIndex.current = i; }}
+              onDragOver={(e) => { e.preventDefault(); }}
+              onDrop={() => {
+                if (dragIndex.current != null) moveRef(dragIndex.current, i);
+                dragIndex.current = null;
+              }}
+              onDragEnd={() => { dragIndex.current = null; }}
+            >
+              <span style={{ flex: 1, color: '#2d6a2d' }}>
+                {getRefLabel(ref)}
+              </span>
+              <button type="button" style={REMOVE_BTN} onClick={() => removeRef(i)} title={t('Entfernen')}>
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {entries.length === 0 && (
+        <div
+          style={{
+            padding: '4px 8px',
+            background: '#f8f8f8',
+            border: '1px dashed #ccc',
+            borderRadius: 4,
+            fontSize: 11,
+            color: '#888',
+            marginBottom: 4,
+          }}
+        >
+          {t('Noch keine Quellen gewählt — wähle Daten aus vorherigen Schritten.')}
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={() => setPickerOpen(true)}
+        disabled={!hasSources}
+        style={{
+          width: '100%',
+          padding: '4px 8px',
+          borderRadius: 4,
+          border: `1px solid #1c5fb5`,
+          background: hasSources ? '#fff' : '#f5f5f5',
+          color: hasSources ? '#1c5fb5' : '#999',
+          cursor: hasSources ? 'pointer' : 'not-allowed',
+          fontSize: 12,
+          textAlign: 'left',
+        }}
+      >
+        {hasSources ? t('+ Datenquelle hinzufügen …') : t('Keine vorherigen Nodes verfügbar')}
+      </button>
+
+      {dataFlow && (
+        <DataPicker
+          open={pickerOpen}
+          onClose={() => setPickerOpen(false)}
+          onPick={addRef}
+          availableSourceIds={sourceIds}
+          nodes={dataFlow.nodes}
+          nodeOutputsPreview={dataFlow.nodeOutputsPreview}
+          getNodeLabel={dataFlow.getNodeLabel}
+          expectedParamType={param.type}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/src/components/FlowEditor/nodes/frontendTypeRenderers/index.tsx b/src/components/FlowEditor/nodes/frontendTypeRenderers/index.tsx
index 6da5d8d..7ac9d92 100644
--- a/src/components/FlowEditor/nodes/frontendTypeRenderers/index.tsx
+++ b/src/components/FlowEditor/nodes/frontendTypeRenderers/index.tsx
@@ -7,6 +7,7 @@ import type { ComponentType } from 'react';
 import type { NodeTypeParameter } from '../../../../api/workflowApi';
 import type { ApiRequestFunction } from '../../../../api/workflowApi';
 import { FORM_FIELD_TYPES, FORM_FIELD_TYPE_LABELS } from '../../../../utils/attributeTypeMapper';
+import { useAutomation2DataFlow } from '../../context/Automation2DataFlowContext';
 
 export interface FieldRendererProps {
   param: NodeTypeParameter;
@@ -27,11 +28,11 @@ export type FieldRendererComponent = ComponentType<FieldRendererProps>;
 import React from 'react';
 
 import { useLanguage } from '../../../../providers/language/LanguageContext';
-import { useAutomation2DataFlow } from '../../context/Automation2DataFlowContext';
 import { toApiGraph } from '../shared/graphUtils';
 import { postUpstreamPaths } from '../../../../api/workflowApi';
 import type { CanvasNode } from '../../editor/FlowCanvas';
 import { DataRefRenderer } from './DataRefRenderer';
+import { ContextBuilderRenderer } from './ContextBuilderRenderer';
 import { FeatureInstancePicker } from './FeatureInstancePicker';
 import { TemplateTextareaRenderer } from './TemplateTextareaRenderer';
 import { getApiBaseUrl } from '../../../../../config/config';
@@ -535,6 +536,10 @@ const CaseListEditor: React.FC<FieldRendererProps> = ({ param, value, onChange }
 
 const FieldBuilderEditor: React.FC<FieldRendererProps> = ({ param, value, onChange }) => {
   const { t } = useLanguage();
+  const ctx = useAutomation2DataFlow();
+  const fieldTypeOptions = ctx?.formFieldTypes?.length
+    ? ctx.formFieldTypes
+    : FORM_FIELD_TYPES.map((ft) => ({ id: ft, label: FORM_FIELD_TYPE_LABELS[ft] ?? ft, portType: 'str' }));
   const fields = Array.isArray(value) ? value : [];
   const addField = () => onChange([...fields, { name: '', type: 'text', label: '', required: false }]);
   const removeField = (idx: number) => onChange(fields.filter((_: unknown, i: number) => i !== idx));
@@ -543,62 +548,98 @@ const FieldBuilderEditor: React.FC<FieldRendererProps> = ({ param, value, onChan
     next[idx] = { ...(next[idx] as Record<string, unknown>), [field]: val };
     onChange(next);
   };
+  const inputStyle: React.CSSProperties = {
+    width: '100%', padding: '5px 7px', borderRadius: 4, border: '1px solid #ddd',
+    fontSize: 12, boxSizing: 'border-box', background: '#fff',
+  };
+  const selectStyle: React.CSSProperties = { ...inputStyle };
+
   return (
     <div style={{ marginBottom: 8 }}>
-      <label style={{ display: 'block', fontSize: 12, marginBottom: 2 }}>{param.description || param.name}</label>
+      <label style={{ display: 'block', fontSize: 12, marginBottom: 4, fontWeight: 600 }}>{param.description || param.name}</label>
       {fields.map((f: Record<string, unknown>, i: number) => (
-        <div key={i} style={{ display: 'flex', gap: 4, marginBottom: 4, alignItems: 'center' }}>
-          <input type="text" placeholder={t('Name')} value={String(f.name ?? '')} onChange={(e) => updateField(i, 'name', e.target.value)} style={{ flex: 1, padding: '2px 4px', borderRadius: 4, border: '1px solid #ccc' }} />
-          <select value={String(f.type ?? 'text')} onChange={(e) => updateField(i, 'type', e.target.value)} style={{ flex: 1, padding: '2px 4px', borderRadius: 4, border: '1px solid #ccc' }}>
-            {FORM_FIELD_TYPES.map(ft => (
-              <option key={ft} value={ft}>{t(FORM_FIELD_TYPE_LABELS[ft])}</option>
-            ))}
-            <option value="group">{t('Gruppe')}</option>
-          </select>
-          <input type="text" placeholder={t('Bezeichnung')} value={String(f.label ?? '')} onChange={(e) => updateField(i, 'label', e.target.value)} style={{ flex: 1, padding: '2px 4px', borderRadius: 4, border: '1px solid #ccc' }} />
-          <label style={{ fontSize: 11, display: 'flex', alignItems: 'center', gap: 2 }}>
-            <input type="checkbox" checked={Boolean(f.required)} onChange={(e) => updateField(i, 'required', e.target.checked)} /> {t('Pflicht')}
-          </label>
-          <button onClick={() => removeField(i)} style={{ padding: '2px 8px', borderRadius: 4, border: '1px solid #ccc', cursor: 'pointer' }}>×</button>
+        <div key={i} style={{ background: '#f9f9f9', border: '1px solid #e0e0e0', borderRadius: 6, padding: '8px 10px', marginBottom: 6 }}>
+          {/* Row 1: Bezeichnung + delete */}
+          <div style={{ display: 'flex', gap: 6, marginBottom: 6, alignItems: 'center' }}>
+            <input
+              type="text"
+              placeholder={t('Bezeichnung (Anzeigename)')}
+              value={String(f.label ?? '')}
+              onChange={(e) => updateField(i, 'label', e.target.value)}
+              style={{ ...inputStyle, flex: 1, fontWeight: 500 }}
+            />
+            <button
+              type="button"
+              onClick={() => removeField(i)}
+              title={t('Feld entfernen')}
+              style={{ padding: '4px 8px', borderRadius: 4, border: '1px solid #ccc', cursor: 'pointer', background: '#fff', color: '#999', fontSize: 13, lineHeight: 1, flexShrink: 0 }}
+            >×</button>
+          </div>
+          {/* Row 2: Name + Typ + Pflicht */}
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 6, alignItems: 'end' }}>
+            <div>
+              <div style={{ fontSize: 10, color: '#888', marginBottom: 2 }}>Name (intern)</div>
+              <input
+                type="text"
+                placeholder="z.B. customerName"
+                value={String(f.name ?? '')}
+                onChange={(e) => updateField(i, 'name', e.target.value)}
+                style={inputStyle}
+              />
+            </div>
+            <div>
+              <div style={{ fontSize: 10, color: '#888', marginBottom: 2 }}>Typ</div>
+              <select value={String(f.type ?? 'text')} onChange={(e) => updateField(i, 'type', e.target.value)} style={selectStyle}>
+                {fieldTypeOptions.map((ft) => (
+                  <option key={ft.id} value={ft.id}>{t(ft.label)}</option>
+                ))}
+                <option value="group">{t('Gruppe')}</option>
+              </select>
+            </div>
+            <label style={{ fontSize: 11, display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer', paddingBottom: 5, whiteSpace: 'nowrap' }}>
+              <input type="checkbox" checked={Boolean(f.required)} onChange={(e) => updateField(i, 'required', e.target.checked)} />
+              Pflicht
+            </label>
+          </div>
           {String(f.type) === 'group' && (
-            <div style={{ width: '100%', marginTop: 6, marginLeft: 8, borderLeft: '2px solid #ddd', paddingLeft: 8 }}>
-              <div style={{ fontSize: 11, color: '#666', marginBottom: 4 }}>{t('Unterfelder')}</div>
+            <div style={{ marginTop: 8, borderTop: '1px solid #e0e0e0', paddingTop: 8 }}>
+              <div style={{ fontSize: 11, color: '#666', marginBottom: 6, fontWeight: 600 }}>{t('Unterfelder')}</div>
               {(Array.isArray(f.fields) ? f.fields : []).map((sub: Record<string, unknown>, j: number) => (
-                <div key={j} style={{ display: 'flex', gap: 4, marginBottom: 4, flexWrap: 'wrap' }}>
-                  <input
-                    type="text"
-                    placeholder={t('Name')}
-                    value={String(sub.name ?? '')}
-                    onChange={(e) => {
-                      const nextFields = [...(Array.isArray(f.fields) ? f.fields : [])];
-                      nextFields[j] = { ...sub, name: e.target.value };
-                      updateField(i, 'fields', nextFields);
-                    }}
-                    style={{ flex: 1, minWidth: 80, padding: '2px 4px', borderRadius: 4, border: '1px solid #ccc' }}
-                  />
-                  <select
-                    value={String(sub.type ?? 'text')}
-                    onChange={(e) => {
-                      const nextFields = [...(Array.isArray(f.fields) ? f.fields : [])];
-                      nextFields[j] = { ...sub, type: e.target.value };
-                      updateField(i, 'fields', nextFields);
-                    }}
-                    style={{ flex: 1, minWidth: 80, padding: '2px 4px', borderRadius: 4, border: '1px solid #ccc' }}
-                  >
-                    {FORM_FIELD_TYPES.map(ft => (
-                      <option key={ft} value={ft}>{t(FORM_FIELD_TYPE_LABELS[ft])}</option>
-                    ))}
-                  </select>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      const nextFields = (Array.isArray(f.fields) ? f.fields : []).filter((_: unknown, k: number) => k !== j);
-                      updateField(i, 'fields', nextFields);
-                    }}
-                    style={{ padding: '2px 8px', borderRadius: 4, border: '1px solid #ccc', cursor: 'pointer' }}
-                  >
-                    ×
-                  </button>
+                <div key={j} style={{ background: '#fff', border: '1px solid #e8e8e8', borderRadius: 4, padding: '6px 8px', marginBottom: 4 }}>
+                  <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+                    <input
+                      type="text"
+                      placeholder={t('Name')}
+                      value={String(sub.name ?? '')}
+                      onChange={(e) => {
+                        const nextFields = [...(Array.isArray(f.fields) ? f.fields : [])];
+                        nextFields[j] = { ...sub, name: e.target.value };
+                        updateField(i, 'fields', nextFields);
+                      }}
+                      style={{ ...inputStyle, flex: 1 }}
+                    />
+                    <select
+                      value={String(sub.type ?? 'text')}
+                      onChange={(e) => {
+                        const nextFields = [...(Array.isArray(f.fields) ? f.fields : [])];
+                        nextFields[j] = { ...sub, type: e.target.value };
+                        updateField(i, 'fields', nextFields);
+                      }}
+                      style={{ ...selectStyle, flex: 1 }}
+                    >
+                      {fieldTypeOptions.map((ft) => (
+                        <option key={ft.id} value={ft.id}>{t(ft.label)}</option>
+                      ))}
+                    </select>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const nextFields = (Array.isArray(f.fields) ? f.fields : []).filter((_: unknown, k: number) => k !== j);
+                        updateField(i, 'fields', nextFields);
+                      }}
+                      style={{ padding: '4px 8px', borderRadius: 4, border: '1px solid #ccc', cursor: 'pointer', background: '#fff', color: '#999', flexShrink: 0 }}
+                    >×</button>
+                  </div>
                 </div>
               ))}
               <button
@@ -607,15 +648,21 @@ const FieldBuilderEditor: React.FC<FieldRendererProps> = ({ param, value, onChan
                   const nextFields = [...(Array.isArray(f.fields) ? f.fields : []), { name: '', type: 'text', label: '', required: false }];
                   updateField(i, 'fields', nextFields);
                 }}
-                style={{ padding: '2px 8px', borderRadius: 4, border: '1px solid #ccc', cursor: 'pointer', fontSize: 11 }}
+                style={{ marginTop: 4, padding: '3px 10px', borderRadius: 4, border: '1px dashed #bbb', cursor: 'pointer', fontSize: 11, background: '#fff', color: '#666' }}
               >
-                {t('Unterfeld hinzufügen')}
+                + {t('Unterfeld hinzufügen')}
               </button>
             </div>
           )}
         </div>
       ))}
-      <button onClick={addField} style={{ padding: '2px 8px', borderRadius: 4, border: '1px solid #ccc', cursor: 'pointer', fontSize: 12 }}>{t('Feld hinzufügen')}</button>
+      <button
+        type="button"
+        onClick={addField}
+        style={{ width: '100%', padding: '6px', borderRadius: 4, border: '1px dashed #bbb', cursor: 'pointer', fontSize: 12, background: '#fff', color: '#555' }}
+      >
+        + {t('Feld hinzufügen')}
+      </button>
     </div>
   );
 };
@@ -865,6 +912,7 @@ export const FRONTEND_TYPE_RENDERERS: Record<string, FieldRendererComponent> = {
   file: TextInput,
   hidden: HiddenInput,
   dataRef: DataRefRenderer,
+  contextBuilder: ContextBuilderRenderer,
   userConnection: ConnectionPicker,
   featureInstance: FeatureInstancePicker,
   sharepointFolder: SharepointPathPicker,
diff --git a/src/components/FlowEditor/nodes/shared/DataPicker.tsx b/src/components/FlowEditor/nodes/shared/DataPicker.tsx
index 4edadc7..b4637fb 100644
--- a/src/components/FlowEditor/nodes/shared/DataPicker.tsx
+++ b/src/components/FlowEditor/nodes/shared/DataPicker.tsx
@@ -35,6 +35,10 @@ interface PickablePath {
   /** True iff this path produces `List[X]` and the consumer expects `X` —
    *  picking with iterate=true appends the wildcard segment. */
   iterable?: boolean;
+  /** Annotated after strict-filter pass: type exists but doesn't match the expected param type. */
+  typeMismatch?: boolean;
+  /** Surfaced at the top of the list as the most common / recommended pick. */
+  recommended?: boolean;
 }
 
 const _LIST_INNER_RE = /^List\[(.+)\]$/;
@@ -47,10 +51,22 @@ function _buildPathsFromSchema(
 ): PickablePath[] {
   if (!schema || !schema.fields || depth > 8) return [];
   const result: PickablePath[] = [];
+
+  // For form schemas (kind=fromGraph), expose the whole `payload` object as a
+  // top-level pickable entry so the user can pass the entire form at once.
+  if (depth === 0 && schema.name?.startsWith('FormPayload')) {
+    result.push({
+      path: ['payload'],
+      label: 'Gesamtes Formular',
+      type: 'object',
+      recommended: true,
+    });
+  }
+
   for (const field of schema.fields) {
     const fieldPath = [...basePath, field.name];
     const label = fieldPath.map(String).join(' → ');
-    result.push({ path: fieldPath, label, type: field.type });
+    result.push({ path: fieldPath, label, type: field.type, recommended: field.recommended ?? false });
     const m = typeof field.type === 'string' ? field.type.match(_LIST_INNER_RE) : null;
     const inner = m?.[1]?.trim();
     if (inner && catalog[inner]) {
@@ -78,7 +94,9 @@ function _markIterableCandidates(paths: PickablePath[], expectedParamType?: stri
 function _deriveFormPortSchemaFromParams(
   node: { parameters?: Record<string, unknown> },
   paramKey: string,
+  formTypeToPort: Record<string, string> = {},
 ): PortSchema | undefined {
+  const resolvePortType = (rawType: string) => formTypeToPort[rawType] ?? rawType;
   const raw = node.parameters?.[paramKey];
   if (!Array.isArray(raw)) return undefined;
   const fields: Array<{ name: string; type: string; description: string | Record<string, string>; required: boolean }> = [];
@@ -90,8 +108,8 @@ function _deriveFormPortSchemaFromParams(
     let description: string | Record<string, string> = rec.name;
     if (typeof lab === 'string') description = lab;
     else if (lab && typeof lab === 'object') description = lab as Record<string, string>;
-    const ftype = typeof rec.type === 'string' ? rec.type : 'str';
-    if (ftype === 'group' && Array.isArray(rec.fields)) {
+    const rawType = typeof rec.type === 'string' ? rec.type : 'str';
+    if (rawType === 'group' && Array.isArray(rec.fields)) {
       for (const sub of rec.fields as Record<string, unknown>[]) {
         if (!sub || typeof sub.name !== 'string') continue;
         const sl = sub.label;
@@ -100,7 +118,7 @@ function _deriveFormPortSchemaFromParams(
         else if (sl && typeof sl === 'object') sdesc = sl as Record<string, string>;
         fields.push({
           name: `${rec.name}.${sub.name}`,
-          type: typeof sub.type === 'string' ? sub.type : 'str',
+          type: resolvePortType(typeof sub.type === 'string' ? sub.type : 'str'),
           description: sdesc,
           required: Boolean(sub.required),
         });
@@ -109,7 +127,7 @@ function _deriveFormPortSchemaFromParams(
     }
     fields.push({
       name: rec.name,
-      type: ftype,
+      type: resolvePortType(rawType),
       description,
       required: Boolean(rec.required),
     });
@@ -151,6 +169,7 @@ function _resolveSchemaForNode(
   connections: Array<{ source: string; target: string; sourceOutput?: number }>,
   catalog: Record<string, PortSchema>,
   visited: Set<string> = new Set(),
+  formTypeToPort: Record<string, string> = {},
 ): PortSchema | undefined {
   if (visited.has(nodeId)) return undefined;
   visited.add(nodeId);
@@ -170,10 +189,10 @@ function _resolveSchemaForNode(
   const schemaSpec = port0.schema;
   if (typeof schemaSpec === 'object' && schemaSpec !== null && schemaSpec.kind === 'fromGraph') {
     const paramKey = schemaSpec.parameter ?? 'fields';
-    return _deriveFormPortSchemaFromParams(node, paramKey);
+    return _deriveFormPortSchemaFromParams(node, paramKey, formTypeToPort);
   }
   if (port0.dynamic && port0.deriveFrom) {
-    return _deriveFormPortSchemaFromParams(node, port0.deriveFrom);
+    return _deriveFormPortSchemaFromParams(node, port0.deriveFrom, formTypeToPort);
   }
   if (typeof schemaSpec === 'string' && schemaSpec !== 'Transit') {
     return catalog[schemaSpec];
@@ -182,7 +201,7 @@ function _resolveSchemaForNode(
   // Transit: follow the incoming connection to find the real producer
   const incoming = connections.find((c) => c.target === nodeId);
   if (!incoming) return undefined;
-  return _resolveSchemaForNode(incoming.source, nodes, nodeTypes, connections, catalog, visited);
+  return _resolveSchemaForNode(incoming.source, nodes, nodeTypes, connections, catalog, visited, formTypeToPort);
 }
 
 export const DataPicker: React.FC<DataPickerProps> = ({ open,
@@ -228,6 +247,9 @@ export const DataPicker: React.FC<DataPickerProps> = ({ open,
   const catalog = ctx?.portTypeCatalog ?? {};
   const systemVars = ctx?.systemVariables ?? {};
   const nodeTypes = ctx?.nodeTypes ?? [];
+  const formTypeToPort: Record<string, string> = Object.fromEntries(
+    (ctx?.formFieldTypes ?? []).map((f) => [f.id, f.portType])
+  );
 
   const toggleExpand = (nodeId: string) => {
     setExpandedNodes((prev) => {
@@ -320,15 +342,15 @@ export const DataPicker: React.FC<DataPickerProps> = ({ open,
                     <div key={loopId} style={{ marginBottom: 6 }}>
                       <div style={{ fontSize: 11, color: 'var(--text-secondary)', marginBottom: 2 }}>{loopLabel}</div>
                       {loopPaths.map((p, i) => {
-                        const compat = expectedParamType && p.type
-                          ? isCompatible(p.type, expectedParamType)
-                          : 'ok';
+                        const mismatch =
+                          Boolean(expectedParamType) &&
+                          Boolean(p.type) &&
+                          isCompatible(p.type!, expectedParamType!) === 'mismatch';
                         return (
                           <button
                             key={`${loopId}-${p.path.join('.')}-${i}`}
                             type="button"
                             className={styles.dataPickerLeaf}
-                            style={{ opacity: compat === 'mismatch' ? 0.45 : 1 }}
                             onClick={() => handlePick(loopId, p.path, p.type)}
                           >
                             {p.label}
@@ -337,6 +359,14 @@ export const DataPicker: React.FC<DataPickerProps> = ({ open,
                                 ({p.type})
                               </span>
                             )}
+                            {mismatch && (
+                              <span
+                                className={styles.dataPickerMismatchBadge}
+                                title={t('Typ weicht ab — wird beim Ausführen konvertiert')}
+                              >
+                                ⚠
+                              </span>
+                            )}
                           </button>
                         );
                       })}
@@ -386,7 +416,11 @@ export const DataPicker: React.FC<DataPickerProps> = ({ open,
             }
             return filteredIds.map((nodeId) => {
               const node = nodes.find((n) => n.id === nodeId);
-              const label = node ? getNodeLabel(node) : nodeId;
+              // User-defined step title (or node-type label as fallback)
+              const stepTitle = node ? getNodeLabel(node) : nodeId;
+              const nodeTypeDef = node?.type ? nodeTypes.find((nt) => nt.id === node.type) : undefined;
+              // Human-readable type label (e.g. "Formular", "Web-Recherche")
+              const typeLabel = nodeTypeDef?.label ?? node?.type ?? '';
               const isExpanded = expandedNodes.has(nodeId);
 
               const resolvedSchema = _resolveSchemaForNode(
@@ -395,6 +429,8 @@ export const DataPicker: React.FC<DataPickerProps> = ({ open,
                 nodeTypes,
                 connections,
                 catalog,
+                new Set(),
+                formTypeToPort,
               );
               const schemaPaths = _buildPathsFromSchema(resolvedSchema, catalog);
               const annotated = _markIterableCandidates(
@@ -403,13 +439,21 @@ export const DataPicker: React.FC<DataPickerProps> = ({ open,
                   : _buildPathsFromPreview(nodeOutputsPreview[nodeId], [], t('(ganze Ausgabe)')),
                 expectedParamType,
               );
-              const paths = strictFilter && expectedParamType
-                ? annotated.filter((p) => {
-                    if (p.iterable) return true;
-                    if (!p.type) return false;
-                    return isCompatible(p.type, expectedParamType) !== 'mismatch';
-                  })
-                : annotated;
+              // Always show all paths; mark mismatches as a visual warning instead of hiding them.
+              // Recommended entries bubble to the top.
+              const markedPaths = annotated.map((p) => ({
+                ...p,
+                typeMismatch:
+                  strictFilter &&
+                  Boolean(expectedParamType) &&
+                  Boolean(p.type) &&
+                  !p.iterable &&
+                  isCompatible(p.type!, expectedParamType!) === 'mismatch',
+              }));
+              const paths = [
+                ...markedPaths.filter((p) => p.recommended),
+                ...markedPaths.filter((p) => !p.recommended),
+              ];
 
               return (
                 <div key={nodeId} className={styles.dataPickerNodeSection}>
@@ -419,10 +463,10 @@ export const DataPicker: React.FC<DataPickerProps> = ({ open,
                     onClick={() => toggleExpand(nodeId)}
                   >
                     <span className={styles.dataPickerExpandIcon}>{isExpanded ? '▼' : '▶'}</span>
-                    <span className={styles.dataPickerNodeLabel}>{label}</span>
-                    {resolvedSchema && (
+                    <span className={styles.dataPickerNodeLabel}>{stepTitle}</span>
+                    {typeLabel && (
                       <span className={styles.dataPickerNodeSchemaHint}>
-                        ({resolvedSchema.name})
+                        {typeLabel}
                       </span>
                     )}
                   </button>
@@ -430,12 +474,10 @@ export const DataPicker: React.FC<DataPickerProps> = ({ open,
                     <div className={styles.dataPickerTree}>
                       {paths.length === 0 && (
                         <div style={{ fontSize: 11, color: 'var(--text-secondary)', padding: '4px 8px' }}>
-                          {t('(keine kompatiblen Felder — Filter „Nur kompatible“ deaktivieren)')}
+                          {t('(keine Felder verfügbar)')}
                         </div>
                       )}
                       {paths.map((p, i) => {
-                        const compat =
-                          expectedParamType && p.type ? isCompatible(p.type, expectedParamType) : 'ok';
                         return (
                           <div
                             key={`${p.path.join('.')}-${i}`}
@@ -443,16 +485,29 @@ export const DataPicker: React.FC<DataPickerProps> = ({ open,
                           >
                             <button
                               type="button"
-                              className={styles.dataPickerLeaf}
-                              style={{ opacity: compat === 'mismatch' && !p.iterable ? 0.45 : 1, flex: 1 }}
+                              className={`${styles.dataPickerLeaf}${p.recommended ? ` ${styles.dataPickerLeafRecommended}` : ''}`}
+                              style={{ flex: 1 }}
                               onClick={() => handlePick(nodeId, p.path, p.type)}
                             >
                               {p.label}
+                              {p.recommended && (
+                                <span className={styles.dataPickerRecommendedPill}>
+                                  {t('Empfohlen')}
+                                </span>
+                              )}
                               {p.type && (
                                 <span className={styles.dataPickerLeafType}>
                                   ({p.type})
                                 </span>
                               )}
+                              {p.typeMismatch && (
+                                <span
+                                  className={styles.dataPickerMismatchBadge}
+                                  title={t('Typ weicht ab — wird beim Ausführen konvertiert')}
+                                >
+                                  ⚠
+                                </span>
+                              )}
                             </button>
                             {p.iterable && (
                               <button
diff --git a/src/components/FlowEditor/nodes/shared/dataRef.ts b/src/components/FlowEditor/nodes/shared/dataRef.ts
index 097fbe2..f089a65 100644
--- a/src/components/FlowEditor/nodes/shared/dataRef.ts
+++ b/src/components/FlowEditor/nodes/shared/dataRef.ts
@@ -69,13 +69,26 @@ export function createRef(nodeId: string, path: (string | number)[] = [], expect
   return { type: 'ref', nodeId, path, ...(expectedType ? { expectedType } : {}) };
 }
 
-/** Structural type compatibility (best-effort; same as gateway soft rules). */
+/**
+ * Structural type compatibility using the canonical type vocabulary: str / int / float / bool / Any.
+ * All node parameters and form field schemas must use these types (no `string`, `number`, `boolean`
+ * aliases) so no alias-mapping is needed here.
+ *
+ * `Any` as expected type accepts everything.
+ * `Any`, `object`, or `dict` as produced type coerces to `str` (backend serializes via json.dumps).
+ */
 export function isCompatible(producedType: string, expectedType: string): 'ok' | 'coerce' | 'mismatch' {
   if (!expectedType || !producedType) return 'ok';
   if (producedType === expectedType) return 'ok';
-  if (expectedType === 'Any' || producedType === 'Any') return 'ok';
+  // Any-expected: accept all sources
+  if (expectedType === 'Any') return 'ok';
+  // Any-produced: compatible with everything (coerce where needed)
+  if (producedType === 'Any') return 'coerce';
+  // Numeric coercion
   if (expectedType === 'str' && (producedType === 'int' || producedType === 'float')) return 'coerce';
   if (expectedType === 'int' && producedType === 'str') return 'coerce';
+  // Object/dict → str: backend serializes to JSON text
+  if (expectedType === 'str' && (producedType === 'object' || producedType === 'dict')) return 'coerce';
   return 'mismatch';
 }
 
diff --git a/src/components/FlowEditor/nodes/shared/utils.ts b/src/components/FlowEditor/nodes/shared/utils.ts
index f6d51da..ec7392c 100644
--- a/src/components/FlowEditor/nodes/shared/utils.ts
+++ b/src/components/FlowEditor/nodes/shared/utils.ts
@@ -24,11 +24,110 @@ export function getCategoryIcon(categoryId: string): React.ReactNode {
 /** Function type for resolving localized labels */
 export type GetLabelFn = (text: string | Record<string, string> | undefined, lang?: string) => string;
 
-/** Build an HTML accept attribute from an upload node config's allowedTypes array. */
-export function getAcceptStringFromConfig(
-  config: Record<string, unknown>
-): string {
-  const types = config.allowedTypes;
-  if (!Array.isArray(types) || types.length === 0) return '*';
-  return types.join(',');
+/** Extension → MIME when the browser leaves ``File.type`` empty (common on Windows). */
+const _EXT_TO_MIME: Record<string, string> = {
+  '.pdf': 'application/pdf',
+  '.doc': 'application/msword',
+  '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  '.xls': 'application/vnd.ms-excel',
+  '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  '.ppt': 'application/vnd.ms-powerpoint',
+  '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  '.txt': 'text/plain',
+  '.csv': 'text/csv',
+  '.json': 'application/json',
+  '.xml': 'application/xml',
+  '.zip': 'application/zip',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.jpe': 'image/jpeg',
+  '.png': 'image/png',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+};
+
+function _extensionVariants(ext: string): string[] {
+  const e = ext.toLowerCase();
+  if (e === '.jpeg' || e === '.jpe') return ['.jpeg', '.jpe', '.jpg'];
+  if (e === '.jpg') return ['.jpg', '.jpeg', '.jpe'];
+  return [e];
+}
+
+/**
+ * True if ``file`` satisfies an HTML-style ``accept`` string (extensions, MIME types, ``image/*``).
+ * - ``*`` or empty → allow all
+ * - Normalizes gateway multiselect tokens ``pdf`` → ``.pdf`` (via {@link getAcceptStringFromConfig})
+ * - Infers MIME from extension when ``file.type`` is empty
+ */
+export function fileMatchesAccept(file: File, accept: string): boolean {
+  const trimmed = (accept ?? '').trim();
+  if (!trimmed || trimmed === '*') return true;
+  const parts = trimmed.split(',').map((s) => s.trim()).filter(Boolean);
+  if (parts.length === 0) return true;
+
+  const name = file.name ?? '';
+  const ext =
+    name.includes('.') && !name.endsWith('.')
+      ? '.' + (name.split('.').pop() ?? '').toLowerCase()
+      : '';
+  let mime = (file.type ?? '').trim().toLowerCase();
+  if (!mime && ext && _EXT_TO_MIME[ext]) {
+    mime = _EXT_TO_MIME[ext];
+  }
+  const extVariants = ext ? _extensionVariants(ext) : [];
+
+  for (const rawPart of parts) {
+    for (const p of rawPart.split(',').map((s) => s.trim()).filter(Boolean)) {
+      const pp = p.toLowerCase();
+      if (pp === '*') return true;
+      if (pp.startsWith('.')) {
+        if (extVariants.some((e) => e === pp)) return true;
+        continue;
+      }
+      if (pp.endsWith('/*')) {
+        const prefix = pp.slice(0, -2);
+        if (mime.startsWith(prefix + '/')) return true;
+        continue;
+      }
+      if (pp.includes('/')) {
+        if (mime === pp) return true;
+        continue;
+      }
+      // Bare token left from legacy configs, e.g. "pdf" without dot
+      if (/^[a-z0-9]{2,16}$/.test(pp)) {
+        const dotted = '.' + pp;
+        if (extVariants.includes(dotted)) return true;
+        if (extVariants.some((e) => _extensionVariants(e).includes(dotted))) return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Build a combined accept list from ``allowedTypes`` (multiselect: pdf, docx, …) and optional
+ * manual ``accept`` string on the node.
+ */
+export function getAcceptStringFromConfig(config: Record<string, unknown>): string {
+  const fromParam =
+    typeof config.accept === 'string' && config.accept.trim() ? config.accept.trim() : '';
+  const types = config.allowedTypes;
+  let fromAllowed = '';
+  if (Array.isArray(types) && types.length > 0) {
+    fromAllowed = types
+      .map((t) => {
+        const s = String(t).trim().toLowerCase();
+        if (!s) return '';
+        if (s === '*') return '*';
+        if (s.includes('/') || s.endsWith('/*')) return s;
+        if (s.startsWith('.')) return s;
+        return `.${s.replace(/^\.+/, '')}`;
+      })
+      .filter(Boolean)
+      .join(',');
+  }
+  if (fromParam && fromAllowed) return `${fromParam},${fromAllowed}`;
+  if (fromParam) return fromParam;
+  if (fromAllowed) return fromAllowed;
+  return '*';
 }
diff --git a/src/components/FlowEditor/nodes/start/FormStartNodeConfig.tsx b/src/components/FlowEditor/nodes/start/FormStartNodeConfig.tsx
index 44cccdc..94e25c2 100644
--- a/src/components/FlowEditor/nodes/start/FormStartNodeConfig.tsx
+++ b/src/components/FlowEditor/nodes/start/FormStartNodeConfig.tsx
@@ -7,6 +7,7 @@ import type { NodeConfigRendererProps } from '../shared/types';
 import type { FormField } from '../shared/types';
 import { FORM_FIELD_TYPES, FORM_FIELD_TYPE_LABELS } from '../../../../utils/attributeTypeMapper';
 import styles from '../../editor/Automation2FlowEditor.module.css';
+import { useAutomation2DataFlow } from '../../context/Automation2DataFlowContext';
 
 import { useLanguage } from '../../../../providers/language/LanguageContext';
 
@@ -28,6 +29,10 @@ function _parseFields(params: Record<string, unknown>, t: (key: string) => strin
 
 export const FormStartNodeConfig: React.FC<NodeConfigRendererProps> = ({ params, updateParam }) => {
   const { t } = useLanguage();
+  const ctx = useAutomation2DataFlow();
+  const fieldTypeOptions = ctx?.formFieldTypes?.length
+    ? ctx.formFieldTypes
+    : FORM_FIELD_TYPES.map((ft) => ({ id: ft, label: FORM_FIELD_TYPE_LABELS[ft] ?? ft, portType: 'str' }));
   const fields = useMemo(() => _parseFields(params, t), [params, t]);
 
   const setFields = (next: FormField[]) => {
@@ -73,8 +78,8 @@ export const FormStartNodeConfig: React.FC<NodeConfigRendererProps> = ({ params,
                 setFields(next);
               }}
             >
-              {FORM_FIELD_TYPES.map(ft => (
-                <option key={ft} value={ft}>{t(FORM_FIELD_TYPE_LABELS[ft])}</option>
+              {fieldTypeOptions.map((ft) => (
+                <option key={ft.id} value={ft.id}>{t(ft.label)}</option>
               ))}
             </select>
             <button
diff --git a/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.tsx b/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.tsx
index 8b43b01..e57fce2 100644
--- a/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.tsx
+++ b/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.tsx
@@ -4,7 +4,7 @@ import { useLanguage } from '../../../providers/language/LanguageContext';
 import styles from './FormGeneratorControls.module.css';
 import { Button } from '../../UiComponents/Button';
 import { IoIosRefresh } from "react-icons/io";
-import { FaTrash, FaDownload, FaLayerGroup } from "react-icons/fa";
+import { FaTrash, FaDownload } from "react-icons/fa";
 import type { AttributeType } from '../../../utils/attributeTypeMapper';
 
 // Generic field/column config interface
@@ -77,10 +77,6 @@ export interface FormGeneratorControlsProps {
   onSelectAllFiltered?: () => void;
   selectAllFilteredActive?: boolean;
   selectAllFilteredLoading?: boolean;
-  // Grouping
-  groupingEnabled?: boolean;
-  onCreateGroup?: () => void;
-  activeGroupId?: string | null;
 }
 
 export function FormGeneratorControls({
@@ -114,9 +110,6 @@ export function FormGeneratorControls({
   onSelectAllFiltered,
   selectAllFilteredActive = false,
   selectAllFilteredLoading = false,
-  groupingEnabled = false,
-  onCreateGroup,
-  activeGroupId,
 }: FormGeneratorControlsProps) {
   const { t } = useLanguage();
   
@@ -186,9 +179,15 @@ export function FormGeneratorControls({
         </div>
       )}
 
-      {/* Search Controls with Pagination - Hide when items are selected */}
-      {searchable && selectedCount === 0 && (
+      {/* Toolbar: optional search + filters badge + CSV + pagination (search is optional) */}
+      {selectedCount === 0 &&
+        (searchable ||
+          (pagination && supportsBackendPagination) ||
+          !!onCsvExport ||
+          !!onRefresh ||
+          activeFiltersCount > 0) && (
         <div className={styles.searchContainer}>
+          {searchable && (
           <div className={styles.floatingLabelInput}>
             <input
               type="text"
@@ -203,6 +202,7 @@ export function FormGeneratorControls({
               {t('Suchen...')}
             </label>
           </div>
+          )}
           {activeFiltersCount > 0 && (
             <span className={styles.activeFiltersCount}>
               {activeFiltersCount} {t('Filter')}
@@ -219,16 +219,6 @@ export function FormGeneratorControls({
               {csvExporting ? t('Exportiere...') : 'CSV'}
             </button>
           )}
-          {groupingEnabled && onCreateGroup && (
-            <button
-              onClick={onCreateGroup}
-              className={styles.refreshButton}
-              title={t('Neue Gruppe erstellen')}
-              style={{ color: activeGroupId ? 'var(--color-primary, #4a6fa5)' : undefined }}
-            >
-              <span className={styles.refreshIcon}><FaLayerGroup /></span>
-            </button>
-          )}
           {onRefresh && (
             <button
               onClick={onRefresh}
diff --git a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
index 305b068..3c1ab0f 100644
--- a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
+++ b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
@@ -12,6 +12,12 @@
   position: relative;
 }
 
+/* Outer table in “sections” mode: fill flex parent (e.g. billing transactions tab) */
+.formGeneratorTableSectionsRoot {
+  flex: 1;
+  min-height: 0;
+}
+
 .title {
   font-size: 1.5rem;
   font-weight: 400;
@@ -79,6 +85,93 @@
   padding: 40px 20px;
 }
 
+/* ── Group sections layout (one table per category) ───────────────────── */
+.groupSections {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.groupSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+  /* Share remaining viewport among expanded groups; scroll when many groups */
+  flex: 1 1 280px;
+  min-height: 0;
+}
+
+.groupSectionCollapsed {
+  flex: 0 0 auto;
+  min-height: unset;
+}
+
+.groupSectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  margin: 0;
+  padding: 8px 4px 4px;
+  border: none;
+  border-bottom: 1px solid var(--color-border, #e2e8f0);
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+  border-radius: 4px 4px 0 0;
+}
+
+.groupSectionHeader:hover {
+  background: color-mix(in srgb, var(--color-bg, #fff) 92%, var(--color-border, #e2e8f0) 8%);
+}
+
+.groupSectionHeaderLeft {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.groupSectionCaret {
+  font-size: 11px;
+  opacity: 0.65;
+  width: 14px;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.groupSectionTitle {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--color-text, inherit);
+}
+
+.groupSectionMeta {
+  font-size: 0.875rem;
+  color: var(--text-muted, #64748b);
+}
+
+.groupSectionsLoading {
+  padding: 12px 4px;
+  color: var(--text-muted, #64748b);
+}
+
+.groupSectionTableWrap {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .emptyMessage {
   text-align: center;
   padding: 20px;
@@ -1237,3 +1330,69 @@ tbody .actionsColumn {
   font-size: 11px;
   padding: 4px 8px;
 }
+
+/* Group bands (server-side view grouping — ClickUp-style) */
+.groupBandHeaderRow {
+  cursor: pointer;
+  user-select: none;
+  background: color-mix(in srgb, var(--color-bg, #fff) 88%, var(--color-border, #e2e8f0) 12%);
+}
+
+.groupBandHeaderCell {
+  padding: 8px 14px !important;
+  border-bottom: 1px solid var(--color-border, #e2e8f0);
+  vertical-align: middle;
+}
+
+.groupBandInner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text, #0f172a);
+}
+
+.groupBandCaret {
+  font-size: 11px;
+  opacity: 0.65;
+  width: 14px;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.groupBandPill {
+  display: inline-flex;
+  align-items: center;
+  max-width: min(420px, 72%);
+  padding: 5px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1.25;
+  background: color-mix(in srgb, var(--color-primary, #4a6fa5) 16%, transparent);
+  color: color-mix(in srgb, var(--color-primary, #2f4364) 95%, #fff);
+  border: 1px solid color-mix(in srgb, var(--color-primary, #4a6fa5) 32%, transparent);
+}
+
+.groupBandPath {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  opacity: 0.92;
+}
+
+.groupBandPathSep {
+  opacity: 0.45;
+  font-weight: 500;
+}
+
+.groupBandCount {
+  margin-left: auto;
+  font-weight: 500;
+  font-size: 12px;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
diff --git a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
index 2259db4..737cd26 100644
--- a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
+++ b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
@@ -76,157 +76,115 @@ import {
   isNumberType,
 } from '../../../utils/attributeTypeMapper';
 import type { AttributeType } from '../../../utils/attributeTypeMapper';
-import { FaFilter, FaTrash } from 'react-icons/fa';
+import { FaFilter } from 'react-icons/fa';
 import api from '../../../api';
 import { PeriodPicker } from '../../PeriodPicker';
 import type { PeriodValue } from '../../PeriodPicker';
+import { TableViewsBar, groupLevelsToApiPayload, type GroupByLevelSpec } from '../TableViewsBar';
+
+function groupLevelsFromViewConfig(raw: unknown): GroupByLevelSpec[] {
+  if (!Array.isArray(raw)) return [];
+  return raw
+    .map((g: any) => ({
+      field: typeof g?.field === 'string' ? g.field : '',
+      direction: (g?.direction === 'desc' ? 'desc' : 'asc') as 'asc' | 'desc',
+    }))
+    .filter((l) => l.field);
+}
 import {
-  GroupFolderRow,
-  BreadcrumbRow,
-  GROUP_TREE_INDENT_STEP_PX,
-  type GroupBulkAction,
-} from '../GroupingManager/GroupRow';
+  listTableViews,
+  getTableView,
+  createTableView,
+  updateTableView,
+  deleteTableView,
+  type TableListViewRow,
+  type TableViewConfig,
+} from '../../../api/tableViewApi';
+
+function collapseLocalStorageKey(contextKey: string) {
+  return `porta_table_collapse_${contextKey}`;
+}
+
+/** Serializes grouping levels so LS / restore matches the current definition. */
+function groupLevelsSignature(levels: GroupByLevelSpec[]): string {
+  return levels
+    .filter((l) => l.field)
+    .map((l) => `${l.field}:${l.direction}`)
+    .join('|');
+}
+
+function readCollapsedStateFromLs(
+  contextKey: string,
+  groupSig: string,
+): { sections: Set<string>; groups: Set<string> } {
+  if (!groupSig) return { sections: new Set(), groups: new Set() };
+  try {
+    const raw = localStorage.getItem(collapseLocalStorageKey(contextKey));
+    if (!raw) return { sections: new Set(), groups: new Set() };
+    const o = JSON.parse(raw) as {
+      groupSig?: string;
+      collapsedSectionKeys?: string[];
+      collapsedGroupKeys?: string[];
+    };
+    if (o?.groupSig !== groupSig) return { sections: new Set(), groups: new Set() };
+    return {
+      sections: new Set(Array.isArray(o.collapsedSectionKeys) ? o.collapsedSectionKeys : []),
+      groups: new Set(Array.isArray(o.collapsedGroupKeys) ? o.collapsedGroupKeys : []),
+    };
+  } catch {
+    return { sections: new Set(), groups: new Set() };
+  }
+}
+
+function writeCollapsedStateToLs(
+  contextKey: string,
+  groupSig: string,
+  sections: Set<string>,
+  groups: Set<string>,
+) {
+  if (!groupSig) return;
+  try {
+    localStorage.setItem(
+      collapseLocalStorageKey(contextKey),
+      JSON.stringify({
+        groupSig,
+        collapsedSectionKeys: [...sections],
+        collapsedGroupKeys: [...groups],
+      }),
+    );
+  } catch {
+    /* ignore */
+  }
+}
 
 /** A filter value can be a plain string, null (for empty/missing), or a
  *  {value, label} object returned by FK-aware filter-values endpoints. */
 type FilterValue = string | null | { value: string | null; label: string };
 
 // ---------------------------------------------------------------------------
-// Table Grouping types (mirrors backend datamodelPagination.TableGroupNode)
+// View-based grouping types (mirrors backend GroupBand / GroupLayout)
 // ---------------------------------------------------------------------------
 
-export interface TableGroupNode {
-  id: string;
-  name: string;
-  itemIds: string[];
-  subGroups: TableGroupNode[];
-  order: number;
-  isExpanded: boolean;
+export interface GroupBand {
+  /** Hierarchical group key — one entry per grouping level */
+  path: string[];
+  /** Display label (last path element) */
+  label: string;
+  /** 0-based start index within the current page's items[] */
+  startRowIndex: number;
+  /** Number of rows in this band on the current page */
+  rowCount: number;
 }
 
-export interface GroupingConfig {
-  /** Unique key identifying this table's group storage on the backend.
-   *  Mirrors the API path segment, e.g. "connections", "prompts", "files/list". */
-  contextKey: string;
-  enabled: boolean;
+export interface GroupLayout {
+  /** Ordered field keys that define the grouping hierarchy */
+  levels: string[];
+  /** Bands intersecting the current page */
+  bands: GroupBand[];
 }
 
 const _EMPTY_FILTER_SENTINEL = '__EMPTY__';
 
-// ---------------------------------------------------------------------------
-// Pure tree-manipulation helpers (no React dependencies)
-// ---------------------------------------------------------------------------
-
-function _genGroupId(): string {
-  return `g-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
-}
-
-/** All direct file IDs in this group subtree (nested subgroups included). */
-function _collectAllItemIdsUnderGroup(node: TableGroupNode): string[] {
-  return [...node.itemIds, ...node.subGroups.flatMap(_collectAllItemIdsUnderGroup)];
-}
-function _treeAddRoot(tree: TableGroupNode[], node: TableGroupNode): TableGroupNode[] {
-  return [...tree, node];
-}
-function _treeAddSub(tree: TableGroupNode[], parentId: string, node: TableGroupNode): TableGroupNode[] {
-  return tree.map(n =>
-    n.id === parentId
-      ? { ...n, subGroups: [...n.subGroups, node] }
-      : { ...n, subGroups: _treeAddSub(n.subGroups, parentId, node) }
-  );
-}
-function _treeUpdate(tree: TableGroupNode[], groupId: string, fn: (n: TableGroupNode) => TableGroupNode): TableGroupNode[] {
-  return tree.map(n =>
-    n.id === groupId ? fn(n) : { ...n, subGroups: _treeUpdate(n.subGroups, groupId, fn) }
-  );
-}
-function _treeRemove(tree: TableGroupNode[], groupId: string): TableGroupNode[] {
-  return tree
-    .filter(n => n.id !== groupId)
-    .map(n => ({ ...n, subGroups: _treeRemove(n.subGroups, groupId) }));
-}
-function _treeRemoveItemFromAll(tree: TableGroupNode[], itemId: string): TableGroupNode[] {
-  return tree.map(n => ({
-    ...n,
-    itemIds: n.itemIds.filter(id => id !== itemId),
-    subGroups: _treeRemoveItemFromAll(n.subGroups, itemId),
-  }));
-}
-function _treeAddItemToGroup(tree: TableGroupNode[], groupId: string, itemId: string): TableGroupNode[] {
-  return _treeUpdate(tree, groupId, n => ({
-    ...n,
-    itemIds: n.itemIds.includes(itemId) ? n.itemIds : [...n.itemIds, itemId],
-  }));
-}
-function _treeMoveItemsToGroup(tree: TableGroupNode[], itemIds: string[], groupId: string | null): TableGroupNode[] {
-  let t = tree;
-  for (const id of itemIds) t = _treeRemoveItemFromAll(t, id);
-  if (groupId) for (const id of itemIds) t = _treeAddItemToGroup(t, groupId, id);
-  return t;
-}
-/** Returns the id of the group that directly contains `itemId`, or null. */
-function _treeGetItemDirectGroupId(tree: TableGroupNode[], itemId: string): string | null {
-  for (const n of tree) {
-    if (n.itemIds.includes(itemId)) return n.id;
-    const found = _treeGetItemDirectGroupId(n.subGroups, itemId);
-    if (found !== null) return found;
-  }
-  return null;
-}
-/** Returns the parent group id of `groupId` (null = root level). Returns null if not found. */
-function _treeGetGroupParentId(tree: TableGroupNode[], groupId: string): string | null {
-  const _search = (nodes: TableGroupNode[], parentId: string | null): string | null | undefined => {
-    for (const n of nodes) {
-      if (n.id === groupId) return parentId;
-      const found = _search(n.subGroups, n.id);
-      if (found !== undefined) return found;
-    }
-    return undefined;
-  };
-  const result = _search(tree, null);
-  return result === undefined ? null : result;
-}
-/** Returns true if `ancestorId` is an ancestor of (or equal to) `nodeId`. */
-function _treeIsAncestor(tree: TableGroupNode[], ancestorId: string, nodeId: string): boolean {
-  const _check = (nodes: TableGroupNode[]): boolean => {
-    for (const n of nodes) {
-      if (n.id === ancestorId) {
-        const _inSubtree = (subs: TableGroupNode[]): boolean => {
-          for (const s of subs) {
-            if (s.id === nodeId) return true;
-            if (_inSubtree(s.subGroups)) return true;
-          }
-          return false;
-        };
-        return n.id === nodeId || _inSubtree(n.subGroups);
-      }
-      if (_check(n.subGroups)) return true;
-    }
-    return false;
-  };
-  return _check(tree);
-}
-/** Extract a group node and re-insert it under a new parent (or at root). */
-function _treeMoveGroupToParent(
-  tree: TableGroupNode[],
-  groupId: string,
-  newParentId: string | null,
-): TableGroupNode[] {
-  let extracted: TableGroupNode | null = null;
-  const _extract = (nodes: TableGroupNode[]): TableGroupNode[] =>
-    nodes
-      .filter(n => { if (n.id === groupId) { extracted = { ...n }; return false; } return true; })
-      .map(n => ({ ...n, subGroups: _extract(n.subGroups) }));
-
-  const newTree = _extract(tree);
-  if (!extracted) return tree;
-
-  if (newParentId === null) return [...newTree, extracted];
-  return _treeUpdate(newTree, newParentId, n => ({
-    ...n,
-    subGroups: [...n.subGroups, extracted!],
-  }));
-}
 
 /**
  * Stringify any cell value for display.
@@ -355,7 +313,7 @@ export interface FormGeneratorTableProps<T = any> {
   emptyMessage?: React.ReactNode;
   // API endpoint for CSV export (e.g. "/api/users/"). If provided, the CSV export button is shown.
   apiEndpoint?: string;
-  // Grouping configuration
+  // Client-side grouping by a single field key (presentational, no backend needed)
   groupBy?: string;
   groupRenderer?: (groupKey: string, groupRows: T[], isExpanded: boolean) => React.ReactNode;
   groupRowData?: (groupKey: string, groupRows: T[]) => Record<string, React.ReactNode>;
@@ -367,13 +325,35 @@ export interface FormGeneratorTableProps<T = any> {
   initialFilters?: Record<string, any>;
   rowDraggable?: boolean;
   onRowDragStart?: (e: React.DragEvent<HTMLTableRowElement>, row: T) => void;
-  /** Enable persistent user-defined grouping for this table instance. */
-  groupingConfig?: GroupingConfig;
-  /** Provide additional bulk actions rendered on each group row (e.g. scope/neutralize/download).
-   * Receives the groupId and all itemIds (recursive) for that group. */
-  groupBulkActionsProvider?: (groupId: string, itemIds: string[]) => import('../GroupingManager/GroupRow').GroupBulkAction[];
   /** Render component in compact sidebar mode */
   compact?: boolean;
+  /**
+   * When set, shows ClickUp-style saved views + grouping. Uses `/api/table-views`
+   * and sends `viewKey` in list pagination. Examples: `files/list`, `connections`, `prompts`.
+   */
+  tableContextKey?: string;
+  /**
+   * `sections`: one level of grouping → one paginated table per group below the category header
+   * (requires hookData.fetchGroupSectionSummaries + refetchForSection).
+   * `inline`: group bands inside a single table (legacy).
+   */
+  tableGroupLayoutMode?: 'inline' | 'sections';
+  /** If true, refetch() should resolve to { items, pagination? }; rows are stored in this instance. */
+  localDataMode?: boolean;
+  /** Injected viewKey for API calls when this instance has no TableViewsBar (nested group tables). */
+  viewKeyForQueries?: string | null;
+  /**
+   * Extra query params for CSV export GET (e.g. billing `scope` / `mandateId`).
+   * Falls back to `hookData.csvExportQueryParams` when unset.
+   */
+  csvExportQueryParams?: Record<string, string>;
+  /**
+   * Filters merged last into CSV export pagination (e.g. section group `{ aicoreProvider: "openai" }`).
+   * Omit on the parent table so CSV covers all groups.
+   */
+  csvExportContextFilters?: Record<string, unknown>;
+  /** Optional download filename token (sanitized), e.g. group key for nested exports. */
+  csvExportFilenameSuffix?: string;
 }
 
 const _FILTER_PAGE_SIZE = 100;
@@ -734,36 +714,59 @@ export function FormGeneratorTable<T extends Record<string, any>>({
   initialFilters,
   rowDraggable = false,
   onRowDragStart,
-  groupingConfig,
-  groupBulkActionsProvider,
   compact = false,
+  tableContextKey,
+  tableGroupLayoutMode = 'inline',
+  localDataMode = false,
+  viewKeyForQueries,
+  csvExportQueryParams,
+  csvExportContextFilters,
+  csvExportFilenameSuffix,
 }: FormGeneratorTableProps<T>) {
   const { t, currentLanguage: contextLanguage } = useLanguage();
   // When only onDelete is provided, use it for multi-delete too so Delete stays visible with 2+ selected
   const onDeleteMultiple = onDeleteMultipleProp ?? (onDelete ? (rows: T[]) => rows.forEach((r) => onDelete(r)) : undefined);
   const currentLanguage = useMemo(() => contextLanguage || 'en', [contextLanguage]);
 
-  // ── Grouping state ────────────────────────────────────────────────────────
-  // groupTree: authoritative tree from the last backend response
-  // activeGroupId: when set, table is in "group scope" (refetch uses groupId filter)
-  // pendingGroupTree: local mutations not yet confirmed by backend
-  const [groupTree, setGroupTree] = useState<TableGroupNode[]>([]);
-  const [activeGroupId, setActiveGroupId] = useState<string | null>(null);
-  const pendingGroupTreeRef = useRef<TableGroupNode[] | null>(null);
-  // Debounce timer ref for saving group tree changes
-  const _groupSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // ── View-based groupLayout from backend response ──────────────────────────
+  // groupLayout is set whenever the active view has groupByLevels configured.
+  // It describes how to render collapsible group header rows in items[].
+  const groupLayout: GroupLayout | null = hookDataProp?.groupLayout ?? null;
+  // Track which group paths are collapsed (by path key = path.join('///'))
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(() => new Set());
 
-  const groupingEnabled = groupingConfig?.enabled === true;
+  const [savedViews, setSavedViews] = useState<TableListViewRow[]>([]);
+  const [viewsLoading, setViewsLoading] = useState(false);
+  const [activeViewKey, setActiveViewKey] = useState<string | null>(null);
+  const [activeViewId, setActiveViewId] = useState<string | null>(null);
+  const [groupByLevels, setGroupByLevels] = useState<GroupByLevelSpec[]>([]);
+  const useSectionsGroupLayout =
+    tableGroupLayoutMode === 'sections' &&
+    !!tableContextKey &&
+    groupByLevels.length === 1 &&
+    typeof hookDataProp?.fetchGroupSectionSummaries === 'function' &&
+    typeof hookDataProp?.refetchForSection === 'function';
 
-  // Sync groupTree from hookData whenever a fresh response arrives
-  useEffect(() => {
-    if (!groupingEnabled) return;
-    const tree = hookDataProp?.groupTree;
-    if (Array.isArray(tree)) {
-      setGroupTree(tree);
-      pendingGroupTreeRef.current = null;
-    }
-  }, [hookDataProp?.groupTree, groupingEnabled]);
+  const [sectionSummaries, setSectionSummaries] = useState<
+    Array<{ value: string | null; label: string; totalCount: number }>
+  >([]);
+  const [sectionSummariesLoading, setSectionSummariesLoading] = useState(false);
+  /** Section layout: collapsed group keys (`sk` — stable id per group value). */
+  const [collapsedSectionKeys, setCollapsedSectionKeys] = useState<Set<string>>(() => new Set());
+  const groupSig = useMemo(() => groupLevelsSignature(groupByLevels), [groupByLevels]);
+
+  const [localFeedData, setLocalFeedData] = useState<T[]>(() => data);
+  const [localPaginationState, setLocalPaginationState] = useState<any>(null);
+  const viewRestoreDoneRef = useRef(false);
+  const skipCollapsePersistRef = useRef(false);
+  const bumpSkipCollapsePersist = useCallback(() => {
+    skipCollapsePersistRef.current = true;
+    window.setTimeout(() => {
+      skipCollapsePersistRef.current = false;
+    }, 400);
+  }, []);
+
+  const effectiveGroupLayout: GroupLayout | null = useSectionsGroupLayout ? null : groupLayout;
 
   // ── Optimistic row hiding + adjusted header count ───────────────────────
   // We synthesize `removeOptimistically` at the FormGenerator layer so every
@@ -796,6 +799,8 @@ export function FormGeneratorTable<T extends Record<string, any>>({
     search: '',
     filters: {} as Record<string, any>,
     sort: [] as Array<{ key: string; direction: 'asc' | 'desc' }>,
+    viewKey: null as string | null,
+    groupByLevels: [] as GroupByLevelSpec[],
   });
 
   const hookData = useMemo(() => {
@@ -814,31 +819,57 @@ export function FormGeneratorTable<T extends Record<string, any>>({
 
     const wrappedRefetch = hookDataProp.refetch
       ? async (params?: any) => {
+          let result: any;
           const hasPaginationInfo =
             params && (params.page !== undefined || params.pageSize !== undefined);
           if (hasPaginationInfo) {
-            return await hookDataProp.refetch(params);
+            const merged: any = { ...(params || {}) };
+            if (tableStateRef.current.viewKey && merged.viewKey === undefined) {
+              merged.viewKey = tableStateRef.current.viewKey;
+            }
+            if (tableContextKey && merged.groupByLevels === undefined && !useSectionsGroupLayout) {
+              merged.groupByLevels = groupLevelsToApiPayload(tableStateRef.current.groupByLevels);
+            }
+            result = await hookDataProp.refetch(merged);
+          } else {
+            const s = tableStateRef.current;
+            const finalParams: any = {
+              page: s.page,
+              pageSize: s.pageSize,
+              ...(params || {}),
+            };
+            if (s.search && s.search.trim()) finalParams.search = s.search.trim();
+            const activeFilters: Record<string, any> = {};
+            Object.entries(s.filters).forEach(([k, v]) => {
+              if (v !== undefined && v !== '') activeFilters[k] = v;
+            });
+            if (Object.keys(activeFilters).length) finalParams.filters = activeFilters;
+            if (s.sort.length) {
+              finalParams.sort = s.sort.map(sc => ({ field: sc.key, direction: sc.direction }));
+            }
+            if (s.viewKey) finalParams.viewKey = s.viewKey;
+            if (tableContextKey && !useSectionsGroupLayout) {
+              finalParams.groupByLevels = groupLevelsToApiPayload(s.groupByLevels);
+            }
+            result = await hookDataProp.refetch(finalParams);
           }
-          const s = tableStateRef.current;
-          const finalParams: any = {
-            page: s.page,
-            pageSize: s.pageSize,
-            ...(params || {}),
-          };
-          if (s.search && s.search.trim()) finalParams.search = s.search.trim();
-          const activeFilters: Record<string, any> = {};
-          Object.entries(s.filters).forEach(([k, v]) => {
-            if (v !== undefined && v !== '') activeFilters[k] = v;
-          });
-          if (Object.keys(activeFilters).length) finalParams.filters = activeFilters;
-          if (s.sort.length) {
-            finalParams.sort = s.sort.map(sc => ({ field: sc.key, direction: sc.direction }));
+          if (
+            localDataMode &&
+            result &&
+            typeof result === 'object' &&
+            Array.isArray((result as any).items)
+          ) {
+            setLocalFeedData((result as any).items);
+            setLocalPaginationState((result as any).pagination ?? null);
           }
-          return await hookDataProp.refetch(finalParams);
+          return result;
         }
       : hookDataProp.refetch;
 
-    const origPagination = hookDataProp.pagination;
+    const origPagination =
+      localDataMode && localPaginationState != null
+        ? localPaginationState
+        : hookDataProp.pagination;
     const hasNumericTotal =
       origPagination && typeof origPagination.totalItems === 'number';
     const delta = -optimisticallyDeletedIds.size;
@@ -865,189 +896,10 @@ export function FormGeneratorTable<T extends Record<string, any>>({
       refetch: wrappedRefetch,
       pagination: adjustedPagination,
     };
-  }, [hookDataProp, optimisticallyDeletedIds]);
+  }, [hookDataProp, optimisticallyDeletedIds, tableContextKey, useSectionsGroupLayout, localDataMode, localPaginationState]);
 
-  // ── Grouping helpers ──────────────────────────────────────────────────────
-
-  /** Mutate the local group tree immediately and schedule a debounced backend save. */
-  const _mutateGroupTree = useCallback((newTree: TableGroupNode[]) => {
-    setGroupTree(newTree);
-    pendingGroupTreeRef.current = newTree;
-    if (_groupSaveTimerRef.current) clearTimeout(_groupSaveTimerRef.current);
-    _groupSaveTimerRef.current = setTimeout(() => {
-      if (!hookData?.refetch) return;
-      const s = tableStateRef.current;
-      const params: Record<string, any> = {
-        page: s.page,
-        pageSize: s.pageSize,
-        saveGroupTree: pendingGroupTreeRef.current,
-      };
-      if (activeGroupId) params.groupId = activeGroupId;
-      if (s.search?.trim()) params.search = s.search.trim();
-      hookData.refetch(params);
-    }, 500);
-  }, [hookData, activeGroupId]);
-
-  /** Exit group scope — refetch without groupId. */
-  const _exitGroup = useCallback(() => {
-    setActiveGroupId(null);
-    if (!hookData?.refetch) return;
-    const s = tableStateRef.current;
-    hookData.refetch({ page: 1, pageSize: s.pageSize });
-  }, [hookData]);
-
-  // Cleanup debounce timer on unmount
-  useEffect(() => {
-    return () => { if (_groupSaveTimerRef.current) clearTimeout(_groupSaveTimerRef.current); };
-  }, []);
-
-  // Inline editing: which group's name is currently being edited
-  const [editingGroupId, setEditingGroupId] = useState<string | null>(null);
-  // Drag-and-drop: item drag
-  const [draggedRowId, setDraggedRowId] = useState<string | null>(null);
-  const [dragOverGroupId, setDragOverGroupId] = useState<string | null>(null);
-  // Drag-and-drop: group drag (dragging a whole group folder)
-  const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);
-  const [dragOverGroupIdFromGroup, setDragOverGroupIdFromGroup] = useState<string | null>(null);
-  // Visual feedback: item/group is being dragged left past threshold
-  const [dragWillUngroup, setDragWillUngroup] = useState(false);
-  // Auto-collapse source group while dragging; hover over a group temporarily expands it
-  const [dragCollapsedId, setDragCollapsedId] = useState<string | null>(null);
-  const [dragHoverExpandedId, setDragHoverExpandedId] = useState<string | null>(null);
-  // Timer to delay the source-group collapse so the drag ghost is captured first
-  const dragCollapseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Refs for stable document-level handlers (avoid stale closures)
-  const dragStartXRef      = useRef<number>(0);
-  const dragCurXRef        = useRef<number>(0);  // updated via document dragover
-  const draggedRowIdRef    = useRef<string | null>(null);
-  const draggedGroupIdRef  = useRef<string | null>(null);
-  const dragSourceDepthRef = useRef<number>(0);
-  // True when cursor crossed the left-ungroup threshold AND no onItemDrop/onGroupDrop was called.
-  // onItemDrop sets this to false (user dropped INTO a group → don't ungroup)
-  const willUngroupRef = useRef(false);
-  // Always-current copies of tree + actions for the document-level dragend handler
-  const groupTreeRef           = useRef<TableGroupNode[]>(groupTree);
-  const groupingActionsRef     = useRef<typeof groupingActions | null>(null);
-  const setExpandedGroupsRef   = useRef<((u: (prev: Set<string>) => Set<string>) => void) | null>(null);
-
-  const createGroupAndEdit = useCallback((parentId?: string) => {
-    const id = _genGroupId();
-    const node: TableGroupNode = { id, name: '', itemIds: [], subGroups: [], order: 0, isExpanded: true };
-    _mutateGroupTree(parentId ? _treeAddSub(groupTree, parentId, node) : _treeAddRoot(groupTree, node));
-    setEditingGroupId(id);
-  }, [groupTree, _mutateGroupTree]);
-
-  /** All tree mutations go through here — instant local update + debounced backend save. */
-  const groupingActions = useMemo(() => ({
-    renameGroup: (groupId: string, name: string) => {
-      _mutateGroupTree(_treeUpdate(groupTree, groupId, n => ({ ...n, name })));
-    },
-    deleteGroup: (groupId: string) => {
-      _mutateGroupTree(_treeRemove(groupTree, groupId));
-    },
-    moveItemsToGroup: (itemIds: string[], targetGroupId: string | null) => {
-      _mutateGroupTree(_treeMoveItemsToGroup(groupTree, itemIds, targetGroupId));
-    },
-    moveGroupToParent: (groupId: string, newParentId: string | null) => {
-      // Prevent moving a group into itself or one of its own descendants
-      if (newParentId && _treeIsAncestor(groupTree, groupId, newParentId)) return;
-      if (newParentId === groupId) return;
-      _mutateGroupTree(_treeMoveGroupToParent(groupTree, groupId, newParentId));
-    },
-  }), [groupTree, _mutateGroupTree]);
-
-  // Keep refs current on every render (no useEffect needed — direct assignment is fine for refs)
-  groupTreeRef.current       = groupTree;
-  groupingActionsRef.current = groupingActions;
-
-  // Document-level drag handlers — run once on mount, use refs for always-fresh values
-  useEffect(() => {
-    // Track cursor X while dragging (fires even after source element leaves DOM)
-    const trackCursorX = (e: DragEvent) => {
-      if (e.clientX !== 0) {
-        dragCurXRef.current = e.clientX;
-        if (draggedRowIdRef.current || draggedGroupIdRef.current) {
-          // Update the ref AND the visual state
-          const crossed = dragSourceDepthRef.current > 0 &&
-            e.clientX < dragStartXRef.current - 50;
-          // Only set to true here; onItemDrop/onGroupDrop can set it back to false
-          if (crossed) willUngroupRef.current = true;
-          else willUngroupRef.current = false;
-          setDragWillUngroup(crossed);
-        }
-      }
-    };
-
-    // On drag end: execute the ungroup move if willUngroupRef is still true.
-    // willUngroupRef is set to false when user drops INTO a group (onItemDrop/onGroupDrop),
-    // so this only fires when the item was released outside any group.
-    const handleDragEnd = () => {
-      const rowId       = draggedRowIdRef.current;
-      const gId         = draggedGroupIdRef.current;
-      const willUngroup = willUngroupRef.current;
-
-      // Clear visual drag state FIRST so the item renders at full opacity in its new position
-      draggedRowIdRef.current    = null;
-      draggedGroupIdRef.current  = null;
-      dragCurXRef.current        = 0;
-      dragStartXRef.current      = 0;
-      dragSourceDepthRef.current = 0;
-      willUngroupRef.current     = false;
-      if (dragCollapseTimerRef.current) {
-        clearTimeout(dragCollapseTimerRef.current);
-        dragCollapseTimerRef.current = null;
-      }
-      setDraggedRowId(null);
-      setDraggedGroupId(null);
-      setDragWillUngroup(false);
-      setDragCollapsedId(null);
-      setDragHoverExpandedId(null);
-      setDragOverGroupId(null);
-      setDragOverGroupIdFromGroup(null);
-
-      // Then execute the move action (re-render will see draggedRowId=null → no grey)
-      if (willUngroup && rowId) {
-        const tree     = groupTreeRef.current;
-        const actions  = groupingActionsRef.current!;
-        const curGroup = _treeGetItemDirectGroupId(tree, rowId);
-        if (curGroup !== null) {
-          const parentGroup = _treeGetGroupParentId(tree, curGroup);
-          actions.moveItemsToGroup([rowId], parentGroup);
-          // Keep the source group collapsed after the move
-          setExpandedGroupsRef.current?.(prev => {
-            const next = new Set(prev);
-            next.add(`collapsed-${curGroup}`);
-            return next;
-          });
-        }
-      }
-      if (willUngroup && gId) {
-        const tree    = groupTreeRef.current;
-        const actions = groupingActionsRef.current!;
-        const parentId = _treeGetGroupParentId(tree, gId);
-        const grandParentId = parentId !== null ? _treeGetGroupParentId(tree, parentId) : null;
-        actions.moveGroupToParent(gId, grandParentId);
-        // Keep the parent group collapsed after the move
-        if (parentId) {
-          setExpandedGroupsRef.current?.(prev => {
-            const next = new Set(prev);
-            next.add(`collapsed-${parentId}`);
-            return next;
-          });
-        }
-      }
-    };
-
-    // dragover bubbles → regular listener is fine for cursor tracking
-    // dragend does NOT bubble → must use capture phase to catch it from child elements
-    document.addEventListener('dragover', trackCursorX);
-    document.addEventListener('dragend',  handleDragEnd, true);
-    return () => {
-      document.removeEventListener('dragover', trackCursorX);
-      document.removeEventListener('dragend',  handleDragEnd, true);
-    };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // intentionally empty — all mutable values accessed via refs
+  const csvExportQueryParamsResolved =
+    csvExportQueryParams ?? hookDataProp?.csvExportQueryParams;
 
   // Use provided columns from Pydantic attribute definitions
   // NO AUTO-DETECTION - columns must come from backend attribute definitions
@@ -1098,6 +950,211 @@ export function FormGeneratorTable<T extends Record<string, any>>({
   const [openFilterColumn, setOpenFilterColumn] = useState<string | null>(null);
   const filterDropdownRef = useRef<HTMLDivElement>(null);
 
+  const reloadViews = useCallback(async () => {
+    if (!tableContextKey) return;
+    setViewsLoading(true);
+    try {
+      setSavedViews(await listTableViews(tableContextKey));
+    } catch (e) {
+      console.error('Table views load failed', e);
+      setSavedViews([]);
+    } finally {
+      setViewsLoading(false);
+    }
+  }, [tableContextKey]);
+
+  useEffect(() => {
+    viewRestoreDoneRef.current = false;
+    setActiveViewKey(null);
+    setActiveViewId(null);
+    setGroupByLevels([]);
+    setCollapsedSectionKeys(new Set());
+    setCollapsedGroups(new Set());
+    bumpSkipCollapsePersist();
+    if (tableContextKey) {
+      void reloadViews();
+    } else {
+      setSavedViews([]);
+    }
+  }, [tableContextKey, reloadViews, bumpSkipCollapsePersist]);
+
+  const handleSelectViewKey = useCallback(
+    async (viewKey: string | null) => {
+      setActiveViewKey(viewKey);
+      setActiveViewId(null);
+      setCollapsedGroups(new Set());
+      if (!viewKey) {
+        setGroupByLevels([]);
+        setCollapsedSectionKeys(new Set());
+        setFilters({});
+        setSortConfigs([]);
+        setCurrentPage(1);
+        if (tableContextKey) {
+          try {
+            localStorage.removeItem(`porta_table_view_${tableContextKey}`);
+            localStorage.removeItem(collapseLocalStorageKey(tableContextKey));
+          } catch {
+            /* ignore */
+          }
+        }
+        return;
+      }
+      if (!tableContextKey) return;
+      try {
+        const v = await getTableView(tableContextKey, viewKey);
+        setActiveViewId(v.id);
+        setFilters((v.config?.filters as Record<string, any>) || {});
+        setSortConfigs(
+          (v.config?.sort || []).map((s) => ({
+            key: s.field,
+            direction: s.direction as 'asc' | 'desc',
+          })),
+        );
+        setGroupByLevels(groupLevelsFromViewConfig(v.config?.groupByLevels));
+        const cfg = (v.config || {}) as TableViewConfig;
+        bumpSkipCollapsePersist();
+        setCollapsedGroups(new Set(Array.isArray(cfg.collapsedGroupKeys) ? cfg.collapsedGroupKeys : []));
+        setCollapsedSectionKeys(
+          new Set(Array.isArray(cfg.collapsedSectionKeys) ? cfg.collapsedSectionKeys : []),
+        );
+        setCurrentPage(1);
+        try {
+          localStorage.setItem(`porta_table_view_${tableContextKey}`, viewKey);
+        } catch {
+          /* ignore */
+        }
+      } catch (e) {
+        console.error(e);
+        setActiveViewKey(null);
+      }
+    },
+    [tableContextKey, bumpSkipCollapsePersist],
+  );
+
+  const handleCreateView = useCallback(
+    async (displayName: string, viewKey: string) => {
+      if (!tableContextKey) return;
+      const config: TableViewConfig = {
+        schemaVersion: 1,
+        filters: { ...filters },
+        sort: sortConfigs.map((sc) => ({ field: sc.key, direction: sc.direction })),
+        groupByLevels: groupLevelsToApiPayload(groupByLevels),
+        collapsedSectionKeys: [...collapsedSectionKeys],
+        collapsedGroupKeys: [...collapsedGroups],
+      };
+      const row = await createTableView({
+        contextKey: tableContextKey,
+        viewKey,
+        displayName,
+        config,
+      });
+      setSavedViews(await listTableViews(tableContextKey));
+      setActiveViewKey(row.viewKey);
+      setActiveViewId(row.id);
+      setGroupByLevels(groupLevelsFromViewConfig(row.config?.groupByLevels));
+      try {
+        localStorage.setItem(`porta_table_view_${tableContextKey}`, row.viewKey);
+      } catch {
+        /* ignore */
+      }
+      setCurrentPage(1);
+    },
+    [tableContextKey, filters, sortConfigs, groupByLevels, collapsedSectionKeys, collapsedGroups],
+  );
+
+  const handleDeleteView = useCallback(
+    async (viewId: string) => {
+      if (!tableContextKey) return;
+      await deleteTableView(viewId);
+      setActiveViewKey(null);
+      setActiveViewId(null);
+      setGroupByLevels([]);
+      setCollapsedSectionKeys(new Set());
+      setCollapsedGroups(new Set());
+      setFilters({});
+      setSortConfigs([]);
+      try {
+        localStorage.removeItem(`porta_table_view_${tableContextKey}`);
+        localStorage.removeItem(collapseLocalStorageKey(tableContextKey));
+      } catch {
+        /* ignore */
+      }
+      setSavedViews(await listTableViews(tableContextKey));
+      setCurrentPage(1);
+    },
+    [tableContextKey],
+  );
+
+  /** Standard (no saved view): restore fold state from localStorage for this grouping signature. */
+  useEffect(() => {
+    if (!tableContextKey) return;
+    if (activeViewKey) return;
+    if (!groupSig) return;
+    bumpSkipCollapsePersist();
+    const { sections, groups } = readCollapsedStateFromLs(tableContextKey, groupSig);
+    setCollapsedSectionKeys(sections);
+    setCollapsedGroups(groups);
+  }, [tableContextKey, activeViewKey, groupSig, bumpSkipCollapsePersist]);
+
+  /** Persist fold state: saved views → API config; standard + ad-hoc grouping → localStorage. */
+  useEffect(() => {
+    if (!tableContextKey) return;
+    if (!groupSig) return;
+    const t = window.setTimeout(() => {
+      if (skipCollapsePersistRef.current) return;
+      if (activeViewId) {
+        const row = savedViews.find((x) => x.id === activeViewId);
+        if (!row) return;
+        const prev = (row.config || {}) as TableViewConfig;
+        const nextS = [...collapsedSectionKeys].sort();
+        const nextG = [...collapsedGroups].sort();
+        const prevS = JSON.stringify([...(prev.collapsedSectionKeys || [])].sort());
+        const prevG = JSON.stringify([...(prev.collapsedGroupKeys || [])].sort());
+        if (JSON.stringify(nextS) === prevS && JSON.stringify(nextG) === prevG) return;
+        const nextConfig: TableViewConfig = {
+          ...prev,
+          schemaVersion: 1,
+          collapsedSectionKeys: nextS,
+          collapsedGroupKeys: nextG,
+        };
+        void updateTableView(activeViewId, { config: nextConfig }).then((updated) => {
+          setSavedViews((p) => p.map((x) => (x.id === activeViewId ? { ...x, config: updated.config } : x)));
+        });
+      } else if (!activeViewKey) {
+        writeCollapsedStateToLs(tableContextKey, groupSig, collapsedSectionKeys, collapsedGroups);
+      }
+    }, 350);
+    return () => clearTimeout(t);
+  }, [
+    tableContextKey,
+    groupSig,
+    activeViewId,
+    activeViewKey,
+    collapsedSectionKeys,
+    collapsedGroups,
+    savedViews,
+  ]);
+
+  useEffect(() => {
+    if (!tableContextKey || savedViews.length === 0 || viewRestoreDoneRef.current) return;
+    try {
+      const k = localStorage.getItem(`porta_table_view_${tableContextKey}`);
+      if (k && savedViews.some((v) => v.viewKey === k)) {
+        viewRestoreDoneRef.current = true;
+        void handleSelectViewKey(k);
+      } else {
+        viewRestoreDoneRef.current = true;
+      }
+    } catch {
+      viewRestoreDoneRef.current = true;
+    }
+  }, [tableContextKey, savedViews, handleSelectViewKey]);
+
+  const columnOptionsForViews = useMemo(
+    () => detectedColumns.map((c) => ({ key: c.key, label: c.label || c.key })),
+    [detectedColumns],
+  );
+
   useLayoutEffect(() => {
     if (!openFilterColumn) return;
     const dd = filterDropdownRef.current;
@@ -1133,34 +1190,10 @@ export function FormGeneratorTable<T extends Record<string, any>>({
     return () => cancelAnimationFrame(id);
   }, [openFilterColumn]);
   
-  // Grouping: Track expanded/collapsed groups — persisted in localStorage
-  const _groupExpandKey = groupingConfig?.contextKey
-    ? `porta_group_expanded_${groupingConfig.contextKey}`
-    : null;
-
-  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(() => {
-    if (!groupingConfig?.contextKey) return new Set();
-    try {
-      const raw = localStorage.getItem(`porta_group_expanded_${groupingConfig.contextKey}`);
-      return raw ? new Set<string>(JSON.parse(raw)) : new Set();
-    } catch {
-      return new Set();
-    }
-  });
-
-  // Persist on every change
-  const _setExpandedGroups = useCallback((updater: (prev: Set<string>) => Set<string>) => {
-    setExpandedGroups(prev => {
-      const next = updater(prev);
-      if (_groupExpandKey) {
-        try { localStorage.setItem(_groupExpandKey, JSON.stringify([...next])); } catch { /* quota */ }
-      }
-      return next;
-    });
-  }, [_groupExpandKey]);
-  setExpandedGroupsRef.current = _setExpandedGroups;
+  // Expanded groups for client-side groupBy rendering
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
   const [groupsInitialized, setGroupsInitialized] = useState(false);
-  
+
   // Generate a storage key based on column names for localStorage persistence
   const storageKey = useMemo(() => {
     if (detectedColumns.length === 0) return null;
@@ -1180,8 +1213,52 @@ export function FormGeneratorTable<T extends Record<string, any>>({
   // Bumped by the refresh button so the backend-refetch useEffect re-runs even
   // when no other state (page/filters/sort/search) changed.
   const [refreshNonce, setRefreshNonce] = useState(0);
+
+  const handleUpdateViewGrouping = useCallback(
+    async (viewId: string, levels: GroupByLevelSpec[]) => {
+      const row = savedViews.find((x) => x.id === viewId);
+      if (!row) return;
+      const nextConfig: TableViewConfig = {
+        ...(row.config || {}),
+        schemaVersion: 1,
+        groupByLevels: groupLevelsToApiPayload(levels),
+        collapsedSectionKeys: [],
+        collapsedGroupKeys: [],
+      };
+      await updateTableView(viewId, { config: nextConfig });
+      setSavedViews((prev) => prev.map((x) => (x.id === viewId ? { ...x, config: nextConfig } : x)));
+      setRefreshNonce((n) => n + 1);
+    },
+    [savedViews],
+  );
+
+  const handleSaveActiveView = useCallback(async () => {
+    if (!tableContextKey || !activeViewId) return;
+    const config: TableViewConfig = {
+      schemaVersion: 1,
+      filters: { ...filters },
+      sort: sortConfigs.map((sc) => ({ field: sc.key, direction: sc.direction })),
+      groupByLevels: groupLevelsToApiPayload(groupByLevels),
+      collapsedSectionKeys: [...collapsedSectionKeys].sort(),
+      collapsedGroupKeys: [...collapsedGroups].sort(),
+    };
+    bumpSkipCollapsePersist();
+    const updated = await updateTableView(activeViewId, { config });
+    setSavedViews((prev) => prev.map((x) => (x.id === activeViewId ? { ...x, config: updated.config } : x)));
+    setRefreshNonce((n) => n + 1);
+  }, [
+    tableContextKey,
+    activeViewId,
+    filters,
+    sortConfigs,
+    groupByLevels,
+    collapsedSectionKeys,
+    collapsedGroups,
+    bumpSkipCollapsePersist,
+  ]);
   
   useEffect(() => {
+    if (localDataMode && !searchable) return;
     const timer = setTimeout(() => {
       setDebouncedSearchTerm(prev => {
         if (prev !== searchTerm) setCurrentPage(1);
@@ -1190,7 +1267,18 @@ export function FormGeneratorTable<T extends Record<string, any>>({
     }, 300);
     
     return () => clearTimeout(timer);
-  }, [searchTerm]);
+  }, [searchTerm, localDataMode, searchable]);
+
+  /** Parent-driven search (section nested tables): skip second debounce — parent already debounced. */
+  useEffect(() => {
+    if (!localDataMode || searchable) return;
+    const next = initialSearchTerm ?? '';
+    setSearchTerm((prev) => {
+      if (prev !== next) setCurrentPage(1);
+      return next;
+    });
+    setDebouncedSearchTerm(next);
+  }, [localDataMode, searchable, initialSearchTerm]);
 
   // Keep tableStateRef in sync so a "naked" refetch() call (from e.g.
   // DeleteActionButton) can inject the current page/pageSize/filters/sort.
@@ -1201,13 +1289,16 @@ export function FormGeneratorTable<T extends Record<string, any>>({
       search: debouncedSearchTerm,
       filters,
       sort: sortConfigs,
+      viewKey: viewKeyForQueries !== undefined ? viewKeyForQueries : activeViewKey,
+      groupByLevels,
     };
-  }, [currentPage, currentPageSize, debouncedSearchTerm, filters, sortConfigs]);
+  }, [currentPage, currentPageSize, debouncedSearchTerm, filters, sortConfigs, activeViewKey, viewKeyForQueries, groupByLevels]);
   
   // Call backend when filters/search/sort/pagination change
   useEffect(() => {
     if (!supportsBackendPagination || !hookData?.refetch) return;
-    
+    if (useSectionsGroupLayout) return;
+
     // Build pagination parameters
     const paginationParams: any = {
       page: currentPage,
@@ -1239,9 +1330,13 @@ export function FormGeneratorTable<T extends Record<string, any>>({
       }));
     }
 
-    // Preserve active group scope so filter/sort/page changes stay within the group
-    if (groupingEnabled && activeGroupId) {
-      paginationParams.groupId = activeGroupId;
+    const viewKeyEffective = viewKeyForQueries !== undefined ? viewKeyForQueries : activeViewKey;
+    if (viewKeyEffective) {
+      paginationParams.viewKey = viewKeyEffective;
+    }
+
+    if (tableContextKey && !useSectionsGroupLayout) {
+      paginationParams.groupByLevels = groupLevelsToApiPayload(groupByLevels);
     }
 
     // Call backend refetch with parameters
@@ -1249,7 +1344,46 @@ export function FormGeneratorTable<T extends Record<string, any>>({
       console.error('❌ FormGeneratorTable: Backend refetch failed:', error);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedSearchTerm, filters, sortConfigs, currentPage, currentPageSize, supportsBackendPagination, refreshNonce, activeGroupId]);
+  }, [debouncedSearchTerm, filters, sortConfigs, currentPage, currentPageSize, supportsBackendPagination, refreshNonce, activeViewKey, viewKeyForQueries, groupByLevels, tableContextKey, useSectionsGroupLayout]);
+
+  useEffect(() => {
+    if (!useSectionsGroupLayout || !hookDataProp?.fetchGroupSectionSummaries) return;
+    let cancelled = false;
+    const run = async () => {
+      setSectionSummariesLoading(true);
+      try {
+        const spec = groupByLevels[0];
+        const list = await hookDataProp.fetchGroupSectionSummaries!({
+          search: debouncedSearchTerm,
+          filters,
+          sort: sortConfigs.map((sc) => ({ field: sc.key, direction: sc.direction })),
+          viewKey: activeViewKey,
+          groupField: spec.field,
+          groupDirection: spec.direction || 'asc',
+        });
+        if (!cancelled) setSectionSummaries(Array.isArray(list) ? list : []);
+      } catch (e) {
+        console.error('FormGeneratorTable: group section summaries failed', e);
+        if (!cancelled) setSectionSummaries([]);
+      } finally {
+        if (!cancelled) setSectionSummariesLoading(false);
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    useSectionsGroupLayout,
+    debouncedSearchTerm,
+    filters,
+    sortConfigs,
+    activeViewKey,
+    groupByLevels,
+    refreshNonce,
+    hookDataProp?.fetchGroupSectionSummaries,
+  ]);
   
   // Refs for action buttons containers to detect clicks outside
   const actionButtonsRefs = useRef<Map<number, HTMLDivElement>>(new Map());
@@ -1372,9 +1506,10 @@ export function FormGeneratorTable<T extends Record<string, any>>({
   // Client-side only filters out rows that were just optimistically deleted
   // so the UI updates instantly before the server's next refetch response.
   const displayData = useMemo(() => {
-    if (optimisticallyDeletedIds.size === 0) return data;
-    return data.filter(row => !optimisticallyDeletedIds.has(String(row?.[_idField])));
-  }, [data, optimisticallyDeletedIds, _idField]);
+    const base = localDataMode ? localFeedData : data;
+    if (optimisticallyDeletedIds.size === 0) return base;
+    return base.filter(row => !optimisticallyDeletedIds.has(String(row?.[_idField])));
+  }, [data, localDataMode, localFeedData, optimisticallyDeletedIds, _idField]);
 
   // Grouping: Group data by groupBy field if specified
   const groupedData = useMemo(() => {
@@ -1952,8 +2087,7 @@ export function FormGeneratorTable<T extends Record<string, any>>({
   // CSV Export state
   const [csvExporting, setCsvExporting] = useState(false);
 
-  // CSV Export: fetch ALL data via direct API call (no state update, no table flicker)
-  // Fetches in batches of 1000 (backend max pageSize) until all data is loaded.
+  // CSV Export: paginated fetch with same filters/search/sort as the table; optional scope query params + section filters.
   const handleCsvExport = useCallback(async () => {
     if (csvExporting || detectedColumns.length === 0 || !apiEndpoint) return;
     setCsvExporting(true);
@@ -1961,33 +2095,64 @@ export function FormGeneratorTable<T extends Record<string, any>>({
     try {
       const batchSize = 1000; // Backend max pageSize
       let allData: T[] = [];
-      let currentPage = 1;
+      let page = 1;
       let hasMore = true;
+      const s = tableStateRef.current;
 
       while (hasMore) {
-        const response = await api.get(apiEndpoint, {
-          params: { pagination: JSON.stringify({ page: currentPage, pageSize: batchSize }) }
+        const paginationParams: Record<string, unknown> = {
+          page,
+          pageSize: batchSize,
+        };
+        if (s.search?.trim()) {
+          paginationParams.search = s.search.trim();
+        }
+        const activeFilters: Record<string, unknown> = {};
+        Object.entries(filters).forEach(([key, value]) => {
+          if (value !== undefined) {
+            activeFilters[key] = value;
+          }
         });
+        if (csvExportContextFilters) {
+          Object.assign(activeFilters, csvExportContextFilters);
+        }
+        if (Object.keys(activeFilters).length > 0) {
+          paginationParams.filters = activeFilters;
+        }
+        if (sortConfigs.length > 0) {
+          paginationParams.sort = sortConfigs.map((sc) => ({
+            field: sc.key,
+            direction: sc.direction,
+          }));
+        }
+        if (s.viewKey) {
+          paginationParams.viewKey = s.viewKey;
+        }
+
+        const params: Record<string, string> = {
+          ...(csvExportQueryParamsResolved || {}),
+          pagination: JSON.stringify(paginationParams),
+        };
+
+        const response = await api.get(apiEndpoint, { params });
 
         let batchItems: T[];
         if (response.data && typeof response.data === 'object' && 'items' in response.data) {
           batchItems = Array.isArray(response.data.items) ? response.data.items : [];
-          // Use pagination metadata to determine if more pages exist
           const totalPages = response.data.pagination?.totalPages || 1;
-          hasMore = currentPage < totalPages;
+          hasMore = page < totalPages;
         } else if (Array.isArray(response.data)) {
           batchItems = response.data;
-          hasMore = false; // Non-paginated response — all data in one shot
+          hasMore = false;
         } else {
           batchItems = [];
           hasMore = false;
         }
 
         allData = allData.concat(batchItems);
-        currentPage++;
+        page++;
 
-        // Safety: stop after 100 pages (100k records)
-        if (currentPage > 100) {
+        if (page > 100) {
           hasMore = false;
         }
       }
@@ -2009,17 +2174,14 @@ export function FormGeneratorTable<T extends Record<string, any>>({
         } else {
           str = String(val);
         }
-        // Escape quotes and wrap in quotes if needed
         if (str.includes(separator) || str.includes('"') || str.includes('\n') || str.includes('\r')) {
           str = '"' + str.replace(/"/g, '""') + '"';
         }
         return str;
       };
 
-      // Header row
       const headerRow = detectedColumns.map(col => _escapeCsvValue(col.label)).join(separator);
 
-      // Data rows
       const dataRows = allData.map(row => {
         return detectedColumns.map(col => {
           let cellValue = row[col.key];
@@ -2031,7 +2193,6 @@ export function FormGeneratorTable<T extends Record<string, any>>({
             }
           }
 
-          // Timestamp formatting
           const isTimestampField = /(at|date|time|timestamp|created|updated|expires|checked|valuta)$/i.test(col.key);
           const isExplicitDateType = col.type && isDateTimeType(col.type);
           if ((isTimestampField || isExplicitDateType) && typeof cellValue === 'number') {
@@ -2049,14 +2210,18 @@ export function FormGeneratorTable<T extends Record<string, any>>({
         }).join(separator);
       });
 
-      const csvContent = '\ufeff' + [headerRow, ...dataRows].join('\r\n'); // BOM for Excel
+      const csvContent = '\ufeff' + [headerRow, ...dataRows].join('\r\n');
 
-      // Trigger download
       const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
       link.href = url;
-      link.download = `export_${new Date().toISOString().slice(0, 10)}.csv`;
+      const safeSuffix = csvExportFilenameSuffix
+        ? String(csvExportFilenameSuffix).replace(/[^a-zA-Z0-9._-]+/g, '_').slice(0, 80)
+        : '';
+      link.download = safeSuffix
+        ? `export_${safeSuffix}_${new Date().toISOString().slice(0, 10)}.csv`
+        : `export_${new Date().toISOString().slice(0, 10)}.csv`;
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
@@ -2066,7 +2231,16 @@ export function FormGeneratorTable<T extends Record<string, any>>({
     } finally {
       setCsvExporting(false);
     }
-  }, [csvExporting, detectedColumns, apiEndpoint, currentLanguage]);
+  }, [
+    csvExporting,
+    detectedColumns,
+    apiEndpoint,
+    filters,
+    sortConfigs,
+    csvExportContextFilters,
+    csvExportFilenameSuffix,
+    csvExportQueryParamsResolved,
+  ]);
 
   // Check if inline editing is allowed for a column (based on RBAC permissions)
   const canInlineEdit = useMemo(() => {
@@ -2467,10 +2641,44 @@ export function FormGeneratorTable<T extends Record<string, any>>({
     }
   };
 
+  const showControlsToolbar =
+    searchable ||
+    activeFiltersCount > 0 ||
+    (pagination && supportsBackendPagination) ||
+    !!apiEndpoint ||
+    !!onRefresh ||
+    batchActions.length > 0 ||
+    (selectable && selectedIds.size > 0);
+
   return (
-    <div className={`${styles.formGeneratorTable} ${compact ? styles.compactMode : ''} ${className}`}>
-      
-      {!compact && (searchable || (selectable && selectedIds.size > 0)) && (
+    <div
+      className={`${styles.formGeneratorTable} ${compact ? styles.compactMode : ''} ${useSectionsGroupLayout ? styles.formGeneratorTableSectionsRoot : ''} ${className}`}
+    >
+      {tableContextKey && !compact && (
+        <TableViewsBar
+          views={savedViews.map((v) => ({ id: v.id, viewKey: v.viewKey, displayName: v.displayName }))}
+          loadingViews={viewsLoading}
+          activeViewKey={activeViewKey}
+          activeViewId={activeViewId}
+          groupByLevels={groupByLevels}
+          onGroupByLevelsChange={(levels) => {
+            bumpSkipCollapsePersist();
+            setGroupByLevels(levels);
+            setCollapsedGroups(new Set());
+            setCollapsedSectionKeys(new Set());
+            setCurrentPage(1);
+          }}
+          onSelectView={(k) => void handleSelectViewKey(k)}
+          columnOptions={columnOptionsForViews}
+          onCreateView={(name, slug) => void handleCreateView(name, slug)}
+          onSaveActiveView={() => void handleSaveActiveView()}
+          onUpdateViewGrouping={(id, levels) => void handleUpdateViewGrouping(id, levels)}
+          onDeleteView={(id) => void handleDeleteView(id)}
+          onReloadViews={() => void reloadViews()}
+        />
+      )}
+
+      {!compact && showControlsToolbar && (
         <FormGeneratorControls
           fields={detectedColumns}
           searchTerm={searchTerm}
@@ -2544,7 +2752,7 @@ export function FormGeneratorTable<T extends Record<string, any>>({
           selectable={selectable}
           loading={loading}
           activeFiltersCount={activeFiltersCount}
-          pagination={pagination}
+          pagination={pagination && !useSectionsGroupLayout}
           currentPage={currentPage}
           totalPages={totalPages}
           currentPageSize={currentPageSize}
@@ -2560,13 +2768,10 @@ export function FormGeneratorTable<T extends Record<string, any>>({
           onSelectAllFiltered={apiEndpoint && supportsBackendPagination && selectable ? handleSelectAllFiltered : undefined}
           selectAllFilteredActive={selectAllFilteredActive}
           selectAllFilteredLoading={selectAllFilteredLoading}
-          groupingEnabled={groupingEnabled}
-          onCreateGroup={groupingEnabled ? () => createGroupAndEdit() : undefined}
-          activeGroupId={activeGroupId}
         />
       )}
 
-      {/* Table Wrapper - contains top scrollbar and table container */}
+      {!useSectionsGroupLayout && (
       <div className={`${styles.tableWrapper} ${displayData.length === 0 && !loading ? styles.emptyTable : ''}`}>
         {/* Top horizontal scrollbar - hidden in compact mode */}
         {!compact && (
@@ -3072,85 +3277,20 @@ export function FormGeneratorTable<T extends Record<string, any>>({
                     const _totalColSpan = (selectable ? 1 : 0) + (hasActionColumn ? 1 : 0) + detectedColumns.length;
 
                     // ── Helper: render a single data row ──────────────────
-                    // indentLevel: visual nesting depth inside a group (0 = ungrouped)
-                    const _renderDataRow = (row: T, index: number, indentLevel = 0, hiddenByDrag = false) => {
+                    const _renderDataRow = (row: T, index: number) => {
                       const dataAttributes = getRowDataAttributes ? getRowDataAttributes(row, index) : {};
                       const rowId = _getRowId(row);
-                      const isDragging = draggedRowId === rowId;
-                      const willUngroup = isDragging && dragWillUngroup;
-                      const isGrouped = indentLevel > 0;
-                      const rowBgStyle: React.CSSProperties = isGrouped
-                        ? { background: 'color-mix(in srgb, var(--color-primary, #4a6fa5) 4%, transparent)' }
-                        : {};
-                      const ungroupStyle: React.CSSProperties = willUngroup
-                        ? { outline: '2px solid #d69e2e', opacity: 0.5 }
-                        : {};
-                      /** Visual depth inside group tree (= folder depth + 1 for direct children — see `_renderGroup`). */
-                      const leadingIndentPx = isGrouped ? indentLevel * GROUP_TREE_INDENT_STEP_PX : 0;
-                      const treeIndentCss: React.CSSProperties | undefined =
-                        isGrouped ? { ['--row-tree-indent' as string]: `${leadingIndentPx}px` } : undefined;
 
                       return (
                         <tr
                           key={rowId || index}
-                          className={`${styles.tr} ${selectedIds.has(rowId) ? styles.selected : ''} ${onRowClick ? styles.clickable : ''} ${isGrouped ? styles.groupedItem : ''} ${isGrouped ? styles.treeRowIndented : ''}`}
-                          style={{ ...rowBgStyle, ...ungroupStyle, ...(treeIndentCss ?? {}), display: hiddenByDrag ? 'none' : undefined }}
+                          className={`${styles.tr} ${selectedIds.has(rowId) ? styles.selected : ''} ${onRowClick ? styles.clickable : ''}`}
                           onClick={() => onRowClick?.(row, index)}
-                          draggable={groupingEnabled || rowDraggable}
+                          draggable={rowDraggable}
                           onDragStart={(e) => {
-                            if (groupingEnabled) {
-                              dragStartXRef.current    = e.clientX;
-                              dragCurXRef.current      = e.clientX;
-                              draggedRowIdRef.current  = rowId;
-                              dragSourceDepthRef.current = indentLevel;
-                              setDragWillUngroup(false);
-                              setDraggedRowId(rowId);
-                              e.dataTransfer.effectAllowed = 'copyMove';
-                              e.dataTransfer.setData('text/plain', rowId);
-                              // External drop targets (Workspace, Teamsbot): same shapes as FolderTree /
-                              // FilesPage drag protocol. Keep ``text/plain`` as row id UUID so in-table
-                              // drop fallback still resolves the row.
-                              if (!(rowDraggable && onRowDragStart)) {
-                                const rf = row as { fileName?: string; name?: string };
-                                const rowLabel =
-                                  typeof rf.fileName === 'string' && rf.fileName
-                                    ? rf.fileName
-                                    : typeof rf.name === 'string' && rf.name
-                                      ? rf.name
-                                      : rowId;
-                                e.dataTransfer.setData('application/file-id', rowId);
-                                e.dataTransfer.setData(
-                                  'application/tree-items',
-                                  JSON.stringify([{ id: rowId, type: 'file' as const, name: rowLabel }]),
-                                );
-                              }
-                              // Delay source-group collapse: browser needs one frame to
-                              // capture the drag ghost before we remove the element from DOM.
-                              if (indentLevel > 0) {
-                                const srcGroup = _treeGetItemDirectGroupId(groupTree, rowId);
-                                if (srcGroup) {
-                                  if (dragCollapseTimerRef.current) clearTimeout(dragCollapseTimerRef.current);
-                                  dragCollapseTimerRef.current = setTimeout(() => {
-                                    setDragCollapsedId(srcGroup);
-                                    dragCollapseTimerRef.current = null;
-                                  }, 200);
-                                }
-                              }
-                            }
                             if (rowDraggable && onRowDragStart) onRowDragStart(e, row);
                           }}
-                          onDragEnd={() => {
-                            // Direct element handler — clears the grey opacity immediately.
-                            // The document capture handler fires first and handles the ungroup action.
-                            setDraggedRowId(null);
-                            setDragWillUngroup(false);
-                            setDragCollapsedId(null);
-                            setDragHoverExpandedId(null);
-                            if (dragCollapseTimerRef.current) {
-                              clearTimeout(dragCollapseTimerRef.current);
-                              dragCollapseTimerRef.current = null;
-                            }
-                          }}
+                          onDragEnd={() => {}}
                           {...Object.fromEntries(Object.entries(dataAttributes).map(([k, v]) => [`data-${k}`, v]))}
                         >
                           {selectable && (
@@ -3227,289 +3367,77 @@ export function FormGeneratorTable<T extends Record<string, any>>({
                       );
                     };
 
-                    // ── Grouped root-view: file-browser folder layout ──────
-                    if (groupingEnabled && groupTree.length > 0 && !activeGroupId) {
-                      const _groupedIds = new Set<string>();
-                      const _collectIds = (nodes: typeof groupTree) => {
-                        nodes.forEach(n => { n.itemIds.forEach(id => _groupedIds.add(id)); _collectIds(n.subGroups); });
-                      };
-                      _collectIds(groupTree);
-
-                      const _visibleById = new Map<string, T>();
-                      displayData.forEach(row => _visibleById.set(_getRowId(row), row));
-
-                      const _collectSelectableSubtreeIds = (n: typeof groupTree[0]): string[] => {
-                        const acc: string[] = [];
-                        for (const id of n.itemIds) {
-                          const r = _visibleById.get(id);
-                          if (!r) continue;
-                          if (isRowSelectable && !isRowSelectable(r)) continue;
-                          acc.push(id);
-                        }
-                        for (const sg of n.subGroups) acc.push(..._collectSelectableSubtreeIds(sg));
-                        return acc;
-                      };
-
-                      const _renderGroup = (node: typeof groupTree[0], depth: number, inheritedHidden = false): React.ReactNode => {
-                        const visibleIds = node.itemIds.filter(id => _visibleById.has(id));
-                        const groupItems = visibleIds.map(id => _visibleById.get(id)!);
-                        const subtreeSelectableIds = _collectSelectableSubtreeIds(node);
-                        const subtreeSelectedCount = subtreeSelectableIds.filter(id => selectedIds.has(id)).length;
-                        const subtreeAllSelected = subtreeSelectableIds.length > 0 && subtreeSelectedCount === subtreeSelectableIds.length;
-                        const subtreePartial = subtreeSelectedCount > 0 && subtreeSelectedCount < subtreeSelectableIds.length;
-                        const userCollapsed = expandedGroups.has(`collapsed-${node.id}`);
-
-                        // Visual expanded state (chevron icon, hover-expand override, drag-collapse override)
-                        const isExp = dragHoverExpandedId === node.id
-                          ? true
-                          : (dragCollapsedId === node.id)
-                            ? false
-                            : !userCollapsed;
-
-                        // Whether children should exist in DOM (never remove during drag — it kills drag ops)
-                        // When drag-collapsed: render children but hide with display:none
-                        const shouldRenderChildren = !userCollapsed || dragHoverExpandedId === node.id;
-                        const childrenHiddenByDrag = (dragCollapsedId === node.id && dragHoverExpandedId !== node.id) || inheritedHidden;
-
-                        // Build bulk actions — same buttons as per-row, wired to all group items
-                        const _bulkActions: GroupBulkAction[] = [];
-                        const _hasDeleteBtn = actionButtons.some(ab => ab.type === 'delete');
-                        if (_hasDeleteBtn && (onDeleteMultiple || onDelete)) {
-                          // Collect all item ids recursively in this group
-                          const _collectAll = (n: typeof node): string[] => [
-                            ...n.itemIds,
-                            ...n.subGroups.flatMap(_collectAll),
-                          ];
-                          const allItemIds = _collectAll(node);
-                          const allVisibleItems = allItemIds
-                            .filter(id => _visibleById.has(id))
-                            .map(id => _visibleById.get(id)!);
-
-                          _bulkActions.push({
-                            icon: <FaTrash />,
-                            title: t('Alle {n} löschen + Gruppe', { n: String(allItemIds.length) }),
-                            variant: 'danger',
-                            onClick: () => {
-                              if (allVisibleItems.length > 0) {
-                                (onDeleteMultiple ?? ((rows) => rows.forEach(r => onDelete!(r))))(allVisibleItems);
-                              }
-                              // Also remove the group itself
-                              groupingActions.deleteGroup(node.id);
-                            },
-                            disabled: false,
-                          });
-                        }
-                        batchActions.forEach(ba => {
-                          const applicable = ba.isApplicable ? groupItems.filter(ba.isApplicable) : groupItems;
-                          _bulkActions.push({
-                            icon: ba.icon ? React.createElement(ba.icon) : undefined,
-                            title: `${ba.label} (${applicable.length})`,
-                            onClick: () => ba.onClick(applicable),
-                            disabled: applicable.length === 0,
-                          });
-                        });
-                        // Inject domain-specific group bulk actions from caller
-                        if (groupBulkActionsProvider) {
-                          const _collectAll2 = (n: typeof node): string[] => [
-                            ...n.itemIds,
-                            ...n.subGroups.flatMap(_collectAll2),
-                          ];
-                          const domainActions = groupBulkActionsProvider(node.id, _collectAll2(node));
-                          _bulkActions.push(...domainActions);
-                        }
-
-                        return (
-                          <React.Fragment key={`g-${node.id}`}>
-                            <GroupFolderRow
-                              node={node}
-                              depth={depth}
-                              tableCells={{
-                                showSelect: selectable,
-                                dataColumnsCount: detectedColumns.length + (hasActionColumn ? 1 : 0),
-                                selectClassName: styles.selectColumn,
-                                selectTdStyle: { width: '40px', minWidth: '40px', maxWidth: '40px' },
-                              }}
-                              subtreeSelect={selectable ? {
-                                checked: subtreeAllSelected,
-                                indeterminate: subtreePartial,
-                                disabled: subtreeSelectableIds.length === 0,
-                                onToggle: () => {
-                                  if (subtreeSelectableIds.length === 0) return;
-                                  const next = new Set(selectedIds);
-                                  if (subtreeAllSelected) subtreeSelectableIds.forEach(id => next.delete(id));
-                                  else subtreeSelectableIds.forEach(id => next.add(id));
-                                  _notifySelection(next);
-                                },
-                              } : undefined}
-                              visibleCount={visibleIds.length}
-                              isExpanded={isExp}
-                              isEditing={editingGroupId === node.id}
-                              isDragOver={dragOverGroupId === node.id}
-                              isDragOverFromGroup={dragOverGroupIdFromGroup === node.id}
-                              bulkActions={_bulkActions}
-                              onToggle={() => {
-                                // Clear any stuck drag-state for this group so the button
-                                // always responds, even if a drag was cancelled mid-way.
-                                if (dragCollapsedId === node.id) setDragCollapsedId(null);
-                                if (dragHoverExpandedId === node.id) setDragHoverExpandedId(null);
-                                _setExpandedGroups(prev => {
-                                  const next = new Set(prev);
-                                  // Toggle purely on persistent state, not on `isExp`
-                                  // (which can be overridden by drag state).
-                                  if (prev.has(`collapsed-${node.id}`)) {
-                                    next.delete(`collapsed-${node.id}`); // expand
-                                  } else {
-                                    next.add(`collapsed-${node.id}`);    // collapse
-                                  }
-                                  return next;
-                                });
-                              }}
-                              onEditCommit={(name) => {
-                                if (name.trim()) {
-                                  groupingActions.renameGroup(node.id, name.trim());
-                                } else {
-                                  groupingActions.deleteGroup(node.id);
-                                }
-                                setEditingGroupId(null);
-                              }}
-                              onEditCancel={() => {
-                                if (!node.name) groupingActions.deleteGroup(node.id);
-                                setEditingGroupId(null);
-                              }}
-                              onRename={() => setEditingGroupId(node.id)}
-                              onAddSub={() => createGroupAndEdit(node.id)}
-                              // Item drag handlers
-                              onItemDragOver={(e) => {
-                                e.preventDefault();
-                                setDragOverGroupId(node.id);
-                                // Hover-expand: open this group while dragging over it
-                                setDragHoverExpandedId(node.id);
-                              }}
-                              onItemDrop={(e) => {
-                                e.preventDefault();
-                                // Cancel ungroup: user explicitly dropped INTO a group
-                                willUngroupRef.current = false;
-                                setDragWillUngroup(false);
-                                const id = draggedRowId ?? e.dataTransfer.getData('text/plain');
-                                if (id) groupingActions.moveItemsToGroup([id], node.id);
-                                // The document dragend capture handler will reset state
-                              }}
-                              onItemDragLeave={() => {
-                                if (dragOverGroupId === node.id) setDragOverGroupId(null);
-                                // Collapse again when pointer leaves this group
-                                if (dragHoverExpandedId === node.id) setDragHoverExpandedId(null);
-                              }}
-                              // Group drag handlers (this row is draggable)
-                              onGroupDragStart={(e) => {
-                                dragStartXRef.current      = e.clientX;
-                                dragCurXRef.current        = e.clientX;
-                                draggedGroupIdRef.current  = node.id;
-                                dragSourceDepthRef.current = depth;
-                                setDragWillUngroup(false);
-                                e.dataTransfer.setData('application/porta-group', node.id);
-                                const groupLabel = node.name?.trim() || node.id;
-                                // Snapshot of membership at drag time — survives debounced persistence lag
-                                // so Workspace/other drop targets attach files immediately.
-                                e.dataTransfer.setData(
-                                  'application/group-file-ids',
-                                  JSON.stringify(_collectAllItemIdsUnderGroup(node)),
-                                );
-                                // WorkspaceInput / Teamsbot / FlowCanvas (attach to chat) — expects these:
-                                e.dataTransfer.setData('application/group-id', node.id);
-                                e.dataTransfer.setData('text/plain', groupLabel);
-                                e.dataTransfer.setData(
-                                  'application/tree-items',
-                                  JSON.stringify([{ id: node.id, type: 'group' as const, name: groupLabel }]),
-                                );
-                                e.dataTransfer.effectAllowed = 'copyMove';
-                                setDraggedGroupId(node.id);
-                                // Delay parent-group collapse to let the drag ghost be captured first
-                                if (depth > 0) {
-                                  const parentId = _treeGetGroupParentId(groupTree, node.id);
-                                  if (parentId) {
-                                    if (dragCollapseTimerRef.current) clearTimeout(dragCollapseTimerRef.current);
-                                    dragCollapseTimerRef.current = setTimeout(() => {
-                                      setDragCollapsedId(parentId);
-                                      dragCollapseTimerRef.current = null;
-                                    }, 200);
-                                  }
-                                }
-                              }}
-                              onGroupDragEnd={() => { /* handled by document dragend */ }}
-                              onGroupDragOver={(e) => {
-                                // Don't highlight self or own descendants
-                                const gId = draggedGroupId ?? e.dataTransfer.getData('application/porta-group');
-                                if (gId && !_treeIsAncestor(groupTree, gId, node.id) && gId !== node.id) {
-                                  e.preventDefault();
-                                  setDragOverGroupIdFromGroup(node.id);
-                                  setDragHoverExpandedId(node.id);
-                                }
-                              }}
-                              onGroupDrop={(e) => {
-                                e.preventDefault();
-                                // Cancel ungroup: user explicitly dropped INTO a group
-                                willUngroupRef.current = false;
-                                setDragWillUngroup(false);
-                                const gId = draggedGroupId ?? e.dataTransfer.getData('application/porta-group');
-                                if (gId) groupingActions.moveGroupToParent(gId, node.id);
-                                // The document dragend capture handler will reset state
-                              }}
-                              onGroupDrag={undefined}
-                              onGroupDragLeave={() => {
-                                if (dragOverGroupIdFromGroup === node.id) setDragOverGroupIdFromGroup(null);
-                                if (dragHoverExpandedId === node.id) setDragHoverExpandedId(null);
-                              }}
-                              isDraggingOut={draggedGroupId === node.id && dragWillUngroup}
-                              hidden={inheritedHidden}
-                            />
-                            {shouldRenderChildren && visibleIds.map(id => {
-                              const row = _visibleById.get(id);
-                              if (!row) return null;
-                              return _renderDataRow(row, displayData.indexOf(row), depth + 1, childrenHiddenByDrag);
-                            })}
-                            {shouldRenderChildren && node.subGroups.map(sub => _renderGroup(sub, depth + 1, childrenHiddenByDrag))}
-                          </React.Fragment>
+                    // ── Strategy B view grouping: insert collapsible group headers ──
+                    if (effectiveGroupLayout && effectiveGroupLayout.bands.length > 0) {
+                      const rows: React.ReactNode[] = [];
+                      let dataIdx = 0;
+                      for (const band of effectiveGroupLayout.bands) {
+                        const bandKey = band.path.join('///');
+                        const isCollapsed = collapsedGroups.has(bandKey);
+                        // Group header row
+                        rows.push(
+                          <tr
+                            key={`gh-${bandKey}`}
+                            className={styles.groupBandHeaderRow}
+                            onClick={() =>
+                              setCollapsedGroups((prev) => {
+                                const next = new Set(prev);
+                                if (next.has(bandKey)) next.delete(bandKey);
+                                else next.add(bandKey);
+                                return next;
+                              })
+                            }
+                          >
+                            <td colSpan={_totalColSpan} className={styles.groupBandHeaderCell}>
+                              <div className={styles.groupBandInner}>
+                                <span
+                                  className={styles.groupBandCaret}
+                                  style={{ transform: isCollapsed ? 'rotate(-90deg)' : undefined }}
+                                >
+                                  ▼
+                                </span>
+                                <span className={styles.groupBandPill}>
+                                  {band.path.length > 1 ? (
+                                    <span className={styles.groupBandPath}>
+                                      {band.path.map((seg, i) => (
+                                        <React.Fragment key={i}>
+                                          {i > 0 && <span className={styles.groupBandPathSep}>/</span>}
+                                          <span
+                                            style={{
+                                              opacity: i < band.path.length - 1 ? 0.65 : 1,
+                                            }}
+                                          >
+                                            {seg || '—'}
+                                          </span>
+                                        </React.Fragment>
+                                      ))}
+                                    </span>
+                                  ) : (
+                                    band.label || band.path[0] || '—'
+                                  )}
+                                </span>
+                                <span className={styles.groupBandCount}>{band.rowCount}</span>
+                              </div>
+                            </td>
+                          </tr>
                         );
-                      };
-
-                      const _ungroupedRows = displayData.filter(row => !_groupedIds.has(_getRowId(row)));
-
-                      return (
-                        <>
-                          {groupTree.map(node => _renderGroup(node, 0))}
-                          {_ungroupedRows.map((row, idx) => _renderDataRow(row, displayData.indexOf(row) !== -1 ? displayData.indexOf(row) : idx))}
-                        </>
-                      );
-                    }
-
-                    // ── Scope view (activeGroupId set) — breadcrumb + flat rows ──
-                    if (groupingEnabled && activeGroupId) {
-                      const _activeGroup = (() => {
-                        const _find = (nodes: typeof groupTree): typeof groupTree[0] | null => {
-                          for (const n of nodes) {
-                            if (n.id === activeGroupId) return n;
-                            const found = _find(n.subGroups);
-                            if (found) return found;
+                        // Data rows for this band
+                        if (!isCollapsed) {
+                          for (let r = 0; r < band.rowCount; r++) {
+                            const row = displayData[band.startRowIndex + r];
+                            if (row) rows.push(_renderDataRow(row, band.startRowIndex + r));
                           }
-                          return null;
-                        };
-                        return _find(groupTree);
-                      })();
-                      const _totalScopeItems = hookData?.pagination?.totalItems ?? displayData.length;
-                      return (
-                        <>
-                          <BreadcrumbRow
-                            groupName={_activeGroup?.name ?? activeGroupId}
-                            totalItems={_totalScopeItems}
-                            colSpan={_totalColSpan}
-                            onBack={_exitGroup}
-                          />
-                          {displayData.map((row, idx) => _renderDataRow(row, idx))}
-                        </>
-                      );
+                        }
+                        dataIdx = band.startRowIndex + band.rowCount;
+                      }
+                      // Any trailing rows not covered by a band
+                      for (let i = dataIdx; i < displayData.length; i++) {
+                        rows.push(_renderDataRow(displayData[i], i));
+                      }
+                      return <>{rows}</>;
                     }
 
-                    // ── Default: no grouping or empty group tree ───────────
+                    // ── Default: no grouping ──────────────────────────────
                     return displayData.map((row, index) => _renderDataRow(row, index));
                   })()
                 )}
@@ -3527,6 +3455,125 @@ export function FormGeneratorTable<T extends Record<string, any>>({
           </table>
         </div>
       </div>
+      )}
+
+      {useSectionsGroupLayout && (
+        <>
+          {sectionSummariesLoading && (
+            <div className={styles.groupSectionsLoading}>{t('Gruppen laden…')}</div>
+          )}
+          <div className={styles.groupSections}>
+            {sectionSummaries.map((g) => {
+              const field = groupByLevels[0].field;
+              const sectionFilter: Record<string, unknown> = {
+                [field]: g.value === null || g.value === undefined ? null : g.value,
+              };
+              const sk =
+                g.value === null || g.value === undefined ? '__empty__' : String(g.value);
+              const sectionCollapsed = collapsedSectionKeys.has(sk);
+              return (
+                <section
+                  key={sk}
+                  className={`${styles.groupSection} ${sectionCollapsed ? styles.groupSectionCollapsed : ''}`}
+                >
+                  <button
+                    type="button"
+                    className={styles.groupSectionHeader}
+                    aria-expanded={!sectionCollapsed}
+                    onClick={() => {
+                      setCollapsedSectionKeys((prev) => {
+                        const next = new Set(prev);
+                        if (next.has(sk)) next.delete(sk);
+                        else next.add(sk);
+                        return next;
+                      });
+                    }}
+                  >
+                    <span className={styles.groupSectionHeaderLeft}>
+                      <span
+                        className={styles.groupSectionCaret}
+                        style={{ transform: sectionCollapsed ? 'rotate(-90deg)' : undefined }}
+                        aria-hidden
+                      >
+                        ▼
+                      </span>
+                      <span className={styles.groupSectionTitle}>{g.label}</span>
+                    </span>
+                    <span className={styles.groupSectionMeta}>
+                      {g.totalCount} {t('Einträge')}
+                    </span>
+                  </button>
+                  {!sectionCollapsed && (
+                  <FormGeneratorTable<T>
+                    key={`${sk}-r${refreshNonce}-${JSON.stringify(filters)}-${JSON.stringify(sortConfigs)}-${activeViewKey ?? ''}`}
+                    className={styles.groupSectionTableWrap}
+                    columns={providedColumns}
+                    data={[]}
+                    searchable={false}
+                    filterable={filterable}
+                    sortable={sortable}
+                    resizable={resizable}
+                    pagination={pagination}
+                    pageSize={pageSize}
+                    pageSizeOptions={pageSizeOptions}
+                    showPageSizeSelector={showPageSizeSelector}
+                    selectable={selectable}
+                    isRowSelectable={isRowSelectable}
+                    inlineEditable={inlineEditable}
+                    onInlineUpdate={onInlineUpdate}
+                    inlineEditingRows={inlineEditingRows}
+                    idField={idField}
+                    actionButtons={actionButtons}
+                    customActions={customActions}
+                    onDelete={onDelete}
+                    onDeleteMultiple={onDeleteMultiple}
+                    batchActions={batchActions}
+                    onRowClick={onRowClick}
+                    onRowSelect={onRowSelect}
+                    onSelectionChange={onSelectionChange}
+                    getRowDataAttributes={getRowDataAttributes}
+                    rowDraggable={rowDraggable}
+                    onRowDragStart={onRowDragStart}
+                    compact={compact}
+                    localDataMode
+                    viewKeyForQueries={activeViewKey}
+                    initialSearchTerm={debouncedSearchTerm}
+                    initialFilters={filters}
+                    initialSort={sortConfigs}
+                    apiEndpoint={apiEndpoint}
+                    csvExportQueryParams={hookDataProp?.csvExportQueryParams}
+                    csvExportContextFilters={sectionFilter}
+                    csvExportFilenameSuffix={sk}
+                    hookData={{
+                      ...hookDataProp,
+                      refetch: async (p: any) => {
+                        if (!hookDataProp?.refetchForSection) {
+                          return { items: [], pagination: null };
+                        }
+                        return hookDataProp.refetchForSection(p, sectionFilter, filters);
+                      },
+                      ...(hookDataProp?.fetchFilterValues && typeof hookDataProp.fetchFilterValues === 'function'
+                        ? {
+                            fetchFilterValues: async (columnKey: string, crossFilters?: Record<string, any>) => {
+                              const merged: Record<string, any> = {
+                                ...filters,
+                                ...(crossFilters || {}),
+                                ...sectionFilter,
+                              };
+                              return hookDataProp.fetchFilterValues(columnKey, merged);
+                            },
+                          }
+                        : {}),
+                    }}
+                    emptyMessage={emptyMessage}
+                  />
+                  )}
+                </section>
+              );
+            })}
+          </div>
+        </>
+      )}
 
     </div>
   );
diff --git a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx
index 189a0f0..8e31414 100644
--- a/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx
+++ b/src/components/FormGenerator/FormGeneratorTree/FormGeneratorTree.tsx
@@ -3,7 +3,9 @@ import {
   FaChevronRight,
   FaUnlink,
   FaSyncAlt,
+  FaFolderPlus,
 } from 'react-icons/fa';
+import { usePrompt } from '../../../hooks/usePrompt';
 import type {
   TreeNode,
   TreeNodeProvider,
@@ -83,6 +85,15 @@ function _flatten<T>(
   return result;
 }
 
+function _resolveNewFolderParentId<T>(selectedIds: Set<string>, nodes: TreeNode<T>[]): string | null {
+  if (selectedIds.size !== 1) return null;
+  const id = [...selectedIds][0];
+  const node = nodes.find((n) => n.id === id);
+  if (!node) return null;
+  if (node.type === 'folder') return node.id;
+  return node.parentId ?? null;
+}
+
 function _collectDescendantIds<T>(nodeId: string, nodes: TreeNode<T>[]): string[] {
   const childMap = _buildChildMap(nodes);
   const result: string[] = [];
@@ -583,6 +594,32 @@ export function FormGeneratorTree<T = any>({
     onRefresh?.();
   }, [_loadRoot, _updateSelection, onRefresh]);
 
+  const _handleNewFolder = useCallback(async () => {
+    if (ownership !== 'own' || !provider.createChild || !allowCreateFolder) return;
+    const parentId = _resolveNewFolderParentId(selectedIds, nodes);
+    if (provider.canCreate && !provider.canCreate(parentId)) return;
+    const name = await prompt('Neuer Ordnername:', { title: 'Neuer Ordner', placeholder: 'Ordnername' });
+    const trimmed = name?.trim();
+    if (!trimmed) return;
+    try {
+      const newNode = await provider.createChild(parentId, trimmed);
+      setNodes((prev) => [...prev, newNode]);
+      if (parentId) {
+        setExpandedIds((prev) => new Set(prev).add(parentId));
+      }
+    } catch {
+      await _handleRefresh();
+    }
+  }, [
+    ownership,
+    provider,
+    allowCreateFolder,
+    selectedIds,
+    nodes,
+    prompt,
+    _handleRefresh,
+  ]);
+
   const _handleDelete = useCallback(
     async (id: string) => {
       const node = nodes.find((n) => n.id === id);
@@ -811,6 +848,13 @@ export function FormGeneratorTree<T = any>({
 
   const totalNodeCount = nodes.filter((n) => n.parentId === null).length;
 
+  const showNewFolderButton =
+    Boolean(title) &&
+    ownership === 'own' &&
+    allowCreateFolder &&
+    Boolean(provider.createChild) &&
+    (provider.canCreate?.(_resolveNewFolderParentId(selectedIds, nodes)) ?? true);
+
   const wrapperClasses = [
     styles.formGeneratorTree,
     compact && styles.compactMode,
@@ -821,7 +865,6 @@ export function FormGeneratorTree<T = any>({
 
   return (
     <div className={wrapperClasses}>
-      <ConfirmDialog />
       {title && (
         <div
           className={`${styles.sectionHeader} ${collapsible ? '' : styles.sectionHeaderNonCollapsible}`}
@@ -836,6 +879,20 @@ export function FormGeneratorTree<T = any>({
           )}
           <span className={styles.sectionTitle}>{title}</span>
           <span className={styles.sectionCount}>{totalNodeCount}</span>
+          {showNewFolderButton && (
+            <button
+              className={styles.refreshBtn}
+              onClick={(e) => {
+                e.stopPropagation();
+                _handleNewFolder();
+              }}
+              title="Neuer Ordner"
+              type="button"
+              tabIndex={-1}
+            >
+              <FaFolderPlus />
+            </button>
+          )}
           <button
             className={styles.refreshBtn}
             onClick={(e) => {
@@ -843,6 +900,7 @@ export function FormGeneratorTree<T = any>({
               _handleRefresh();
             }}
             title="Aktualisieren"
+            type="button"
             tabIndex={-1}
           >
             <FaSyncAlt />
@@ -956,6 +1014,7 @@ export function FormGeneratorTree<T = any>({
           </div>
         </div>
       )}
+      <PromptDialog />
     </div>
   );
 }
diff --git a/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx b/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx
index 1835c9e..11a8252 100644
--- a/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx
+++ b/src/components/FormGenerator/FormGeneratorTree/__tests__/FormGeneratorTree.test.tsx
@@ -2,11 +2,21 @@
 // All rights reserved.
 
 import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, waitFor, within } from '@testing-library/react';
+import { render, screen, waitFor, within, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FormGeneratorTree } from '../FormGeneratorTree';
 import type { TreeNode, TreeNodeProvider, TreeBatchAction } from '../types';
 
+const { mockPrompt } = vi.hoisted(() => ({
+  mockPrompt: vi.fn(() => Promise.resolve('NeuOrdner')),
+}));
+
+vi.mock('../../../../hooks/usePrompt', () => ({
+  usePrompt: () => ({
+    prompt: mockPrompt,
+    PromptDialog: () => null,
+  }),
+}));
 // ---------------------------------------------------------------------------
 // Fixtures
 // ---------------------------------------------------------------------------
@@ -90,6 +100,11 @@ function _createMockProvider(nodes: TreeNode[]): TreeNodeProvider {
 
 describe('FormGeneratorTree', () => {
   describe('Rendering', () => {
+    beforeEach(() => {
+      mockPrompt.mockClear();
+      mockPrompt.mockResolvedValue('NeuOrdner');
+    });
+
     it('renders tree with title and node count', async () => {
       const provider = _createMockProvider([_ownFolder]);
       render(
@@ -174,6 +189,85 @@ describe('FormGeneratorTree', () => {
     });
   });
 
+  // ---------------------------------------------------------------------------
+  // New folder
+  // ---------------------------------------------------------------------------
+
+  describe('New folder', () => {
+    beforeEach(() => {
+      mockPrompt.mockClear();
+      mockPrompt.mockResolvedValue('NeuOrdner');
+    });
+
+    it('shows header button when titled own tree has createChild', async () => {
+      const provider = _createMockProvider([_ownFolder]);
+      render(<FormGeneratorTree provider={provider} ownership="own" title="Documents" />);
+
+      await waitFor(() => {
+        expect(screen.getByText('My Folder')).toBeInTheDocument();
+      });
+      expect(screen.getByTitle('Neuer Ordner')).toBeInTheDocument();
+    });
+
+    it('does not show new folder for shared tree', async () => {
+      const provider = _createMockProvider([_sharedFolder]);
+      render(<FormGeneratorTree provider={provider} ownership="shared" title="Shared" />);
+
+      await waitFor(() => {
+        expect(screen.getByText('Shared Folder')).toBeInTheDocument();
+      });
+      expect(screen.queryByTitle('Neuer Ordner')).not.toBeInTheDocument();
+    });
+
+    it('calls createChild at root when nothing selected', async () => {
+      const user = userEvent.setup();
+      const provider = _createMockProvider([_ownFolder]);
+      render(<FormGeneratorTree provider={provider} ownership="own" title="Docs" />);
+
+      await waitFor(() => {
+        expect(screen.getByText('My Folder')).toBeInTheDocument();
+      });
+      await user.click(screen.getByTitle('Neuer Ordner'));
+
+      await waitFor(() => {
+        expect(provider.createChild).toHaveBeenCalledWith(null, 'NeuOrdner');
+      });
+    });
+
+    it('calls createChild under selected folder', async () => {
+      const user = userEvent.setup();
+      const provider = _createMockProvider([_ownFolder]);
+      render(<FormGeneratorTree provider={provider} ownership="own" title="Docs" />);
+
+      await waitFor(() => {
+        expect(screen.getByText('My Folder')).toBeInTheDocument();
+      });
+      await user.click(screen.getByRole('treeitem', { name: /My Folder/i }));
+      await user.click(screen.getByTitle('Neuer Ordner'));
+
+      await waitFor(() => {
+        expect(provider.createChild).toHaveBeenCalledWith('f1', 'NeuOrdner');
+      });
+    });
+
+    it('hides button when allowCreateFolder is false', async () => {
+      const provider = _createMockProvider([_ownFolder]);
+      render(
+        <FormGeneratorTree
+          provider={provider}
+          ownership="own"
+          title="Docs"
+          allowCreateFolder={false}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('My Folder')).toBeInTheDocument();
+      });
+      expect(screen.queryByTitle('Neuer Ordner')).not.toBeInTheDocument();
+    });
+  });
+
   // ---------------------------------------------------------------------------
   // Selection
   // ---------------------------------------------------------------------------
@@ -228,8 +322,8 @@ describe('FormGeneratorTree', () => {
         expect(screen.getByText('My Folder')).toBeInTheDocument();
       });
 
-      await user.click(screen.getByRole('treeitem', { name: /My Folder/i }));
-      await user.click(screen.getByRole('treeitem', { name: /Other Folder/i }), {
+      fireEvent.click(screen.getByRole('treeitem', { name: /My Folder/i }));
+      fireEvent.click(screen.getByRole('treeitem', { name: /Other Folder/i }), {
         ctrlKey: true,
       });
 
@@ -238,7 +332,7 @@ describe('FormGeneratorTree', () => {
       expect(lastCall.has('f2')).toBe(true);
     });
 
-    it('click on selected folder cascades deselect of descendants (own)', async () => {
+    it('second click on folder with cascaded child selection keeps cascaded selection (own)', async () => {
       const user = userEvent.setup();
       const onSelectionChange = vi.fn();
       const provider = _createMockProvider([_ownFolder, _ownFile]);
@@ -270,12 +364,11 @@ describe('FormGeneratorTree', () => {
       expect(lastCall.has('f1')).toBe(true);
       expect(lastCall.has('file1')).toBe(true);
 
-      // Click again to deselect
       await user.click(screen.getByRole('treeitem', { name: /My Folder/i }));
 
       lastCall = onSelectionChange.mock.calls.at(-1)![0] as Set<string>;
-      expect(lastCall.has('f1')).toBe(false);
-      expect(lastCall.has('file1')).toBe(false);
+      expect(lastCall.has('f1')).toBe(true);
+      expect(lastCall.has('file1')).toBe(true);
     });
 
     it('selection in shared tree does NOT cascade to children', async () => {
@@ -455,6 +548,13 @@ describe('FormGeneratorTree', () => {
   // ---------------------------------------------------------------------------
 
   describe('Delete', () => {
+    beforeEach(() => {
+      vi.spyOn(window, 'confirm').mockReturnValue(true);
+    });
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
     it('delete button calls provider.deleteNodes', async () => {
       const user = userEvent.setup();
       const provider = _createMockProvider([_ownFolder]);
@@ -465,7 +565,7 @@ describe('FormGeneratorTree', () => {
       });
 
       const row = screen.getByRole('treeitem', { name: /My Folder/i });
-      const deleteBtn = within(row).getByTitle('Delete');
+      const deleteBtn = within(row).getByTitle('Loeschen');
       await user.click(deleteBtn);
 
       await waitFor(() => {
@@ -482,7 +582,7 @@ describe('FormGeneratorTree', () => {
       });
 
       const row = screen.getByRole('treeitem', { name: /Shared Folder/i });
-      expect(within(row).queryByTitle('Delete')).not.toBeInTheDocument();
+      expect(within(row).queryByTitle('Loeschen')).not.toBeInTheDocument();
     });
   });
 
@@ -541,7 +641,7 @@ describe('FormGeneratorTree', () => {
         expect(screen.getByText('My Folder')).toBeInTheDocument();
       });
 
-      const neutralizeBtn = screen.getByTitle('Not neutralized');
+      const neutralizeBtn = screen.getByTitle('Nicht neutralisiert');
       await user.click(neutralizeBtn);
 
       await waitFor(() => {
@@ -562,7 +662,7 @@ describe('FormGeneratorTree', () => {
         expect(screen.getByText('Shared Folder')).toBeInTheDocument();
       });
 
-      const neutralizeBtn = screen.getByTitle('Not neutralized');
+      const neutralizeBtn = screen.getByTitle('Nicht neutralisiert');
       await user.click(neutralizeBtn);
 
       expect(provider.patchNeutralize).not.toHaveBeenCalled();
diff --git a/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx b/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx
index d40ff0c..b15e01d 100644
--- a/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx
+++ b/src/components/FormGenerator/FormGeneratorTree/__tests__/dnd.test.tsx
@@ -6,6 +6,12 @@ import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import { FormGeneratorTree } from '../FormGeneratorTree';
 import type { TreeNode, TreeNodeProvider } from '../types';
 
+vi.mock('../../../../hooks/usePrompt', () => ({
+  usePrompt: () => ({
+    prompt: vi.fn(() => Promise.resolve('x')),
+    PromptDialog: () => null,
+  }),
+}));
 // ---------------------------------------------------------------------------
 // Fixtures
 // ---------------------------------------------------------------------------
diff --git a/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx b/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx
index ad8899b..d120c6f 100644
--- a/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx
+++ b/src/components/FormGenerator/FormGeneratorTree/providers/FolderFileProvider.tsx
@@ -108,7 +108,7 @@ export function createFolderFileProvider(): TreeNodeProvider {
       return nodes;
     },
 
-    canCreate() {
+    canCreate(_parentId: string | null) {
       return true;
     },
 
diff --git a/src/components/FormGenerator/FormGeneratorTree/types.ts b/src/components/FormGenerator/FormGeneratorTree/types.ts
index 12c1d47..d715033 100644
--- a/src/components/FormGenerator/FormGeneratorTree/types.ts
+++ b/src/components/FormGenerator/FormGeneratorTree/types.ts
@@ -60,5 +60,7 @@ export interface FormGeneratorTreeProps<T = any> {
   onSelectionChange?: (selectedIds: Set<string>) => void;
   onRefresh?: () => void;
   onSendToChat?: (node: TreeNode<T>) => void;
+  /** When false, hides "Neuer Ordner" (e.g. map from table file permissions). Default true. */
+  allowCreateFolder?: boolean;
   className?: string;
 }
diff --git a/src/components/FormGenerator/GroupingManager/GroupRow.tsx b/src/components/FormGenerator/GroupingManager/GroupRow.tsx
index 10f77ca..f48da2e 100644
--- a/src/components/FormGenerator/GroupingManager/GroupRow.tsx
+++ b/src/components/FormGenerator/GroupingManager/GroupRow.tsx
@@ -4,7 +4,12 @@ import { useLanguage } from '../../../providers/language/LanguageContext';
 import { useConfirm } from '../../../hooks/useConfirm';
 import styles from './GroupRow.module.css';
 import fgTableCss from '../FormGeneratorTable/FormGeneratorTable.module.css';
-import type { TableGroupNode } from '../FormGeneratorTable/FormGeneratorTable';
+
+/** Legacy folder-tree row model (client-side group tree); kept for GroupFolderRow typings. */
+export interface TableGroupNode {
+  name: string;
+  itemIds: string[];
+}
 import { FaFolder, FaFolderOpen, FaList, FaPen, FaPlus } from 'react-icons/fa';
 
 // ---------------------------------------------------------------------------
diff --git a/src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css b/src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css
new file mode 100644
index 0000000..090715d
--- /dev/null
+++ b/src/components/FormGenerator/TableViewsBar/TableViewsBar.module.css
@@ -0,0 +1,286 @@
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 14px;
+  padding: 8px 0 12px;
+  border-bottom: 1px solid var(--color-border, #e2e8f0);
+  margin-bottom: 8px;
+}
+
+.popoverAnchor {
+  position: relative;
+}
+
+.groupTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border, #cbd5e1);
+  background: var(--color-bg, #fff);
+  color: var(--color-text, #0f172a);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+
+.groupIcon {
+  display: block;
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+.groupTrigger:hover {
+  background: var(--bg-hover, rgba(15, 23, 42, 0.04));
+  border-color: var(--color-primary, #64748b);
+}
+
+.groupTriggerOpen {
+  border-color: var(--color-primary, #4a6fa5);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #4a6fa5) 25%, transparent);
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 4200;
+  min-width: min(360px, calc(100vw - 24px));
+  padding: 14px 14px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--color-border, #e2e8f0);
+  background: var(--color-bg, #ffffff);
+  color: var(--color-text, #0f172a);
+  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
+}
+
+.popoverTitle {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary, #94a3b8);
+  margin: 0 0 6px;
+}
+
+.popoverHint {
+  margin: 0 0 12px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--text-muted, #64748b);
+}
+
+.levelList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.levelRow {
+  display: grid;
+  grid-template-columns: 1fr 118px 36px;
+  gap: 8px;
+  align-items: center;
+}
+
+.select,
+.selectOrder {
+  padding: 8px 10px;
+  font-size: 13px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border, #cbd5e1);
+  background: var(--color-bg, #fff);
+  color: var(--color-text, #0f172a);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+.select:disabled,
+.selectOrder:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.iconBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-secondary, #94a3b8);
+  cursor: pointer;
+}
+
+.iconBtn:hover:not(:disabled) {
+  color: #fecaca;
+  background: rgba(239, 68, 68, 0.12);
+}
+
+.iconBtn:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
+.addLevelBtn {
+  margin-top: 12px;
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 8px;
+  border: 1px dashed var(--color-border, #475569);
+  background: transparent;
+  color: var(--text-secondary, #94a3b8);
+  cursor: pointer;
+}
+
+.addLevelBtn:hover {
+  border-color: var(--color-primary, #4a6fa5);
+  color: var(--color-primary, #7dd3fc);
+}
+
+.activeSummary {
+  font-size: 12px;
+  color: var(--text-secondary, #64748b);
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viewBlock {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.viewLabel {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-secondary, #64748b);
+}
+
+.viewSelect {
+  min-width: 160px;
+  padding: 6px 10px;
+  font-size: 13px;
+  border-radius: 8px;
+  border: 1px solid var(--color-border, #cbd5e1);
+  background: var(--color-bg, #fff);
+  color: var(--color-text, #0f172a);
+}
+
+.btnGhost {
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 8px;
+  border: 1px solid var(--color-border, #cbd5e1);
+  background: transparent;
+  color: var(--color-text, #334155);
+  cursor: pointer;
+}
+
+.btnGhost:hover {
+  background: var(--bg-hover, #f1f5f9);
+}
+
+.btnDangerGhost {
+  padding: 6px 12px;
+  font-size: 12px;
+  border-radius: 8px;
+  border: 1px solid #fecaca;
+  background: transparent;
+  color: #b91c1c;
+  cursor: pointer;
+}
+
+.btnDangerGhost:hover {
+  background: #fef2f2;
+}
+
+.btnPrimary {
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 8px;
+  border: none;
+  background: var(--color-primary, #4a6fa5);
+  color: #fff;
+  cursor: pointer;
+}
+
+.btnPrimary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.modalBackdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.5);
+  z-index: 4500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+}
+
+.modal {
+  background: var(--color-bg, #fff);
+  color: var(--color-text, #0f172a);
+  border-radius: 12px;
+  padding: 20px 22px;
+  max-width: 420px;
+  width: 100%;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
+}
+
+.modal h3 {
+  margin: 0 0 8px;
+  font-size: 17px;
+}
+
+.modalHint {
+  margin: 0 0 14px;
+  font-size: 13px;
+  color: var(--text-secondary, #64748b);
+  line-height: 1.45;
+}
+
+.modalField {
+  margin-bottom: 12px;
+}
+
+.modalField label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  color: var(--text-secondary, #64748b);
+}
+
+.modalField input {
+  width: 100%;
+  padding: 8px 10px;
+  font-size: 14px;
+  border: 1px solid var(--color-border, #cbd5e1);
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.modalActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 18px;
+}
diff --git a/src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx b/src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx
new file mode 100644
index 0000000..e59743c
--- /dev/null
+++ b/src/components/FormGenerator/TableViewsBar/TableViewsBar.tsx
@@ -0,0 +1,337 @@
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { FaLayerGroup, FaTrash } from 'react-icons/fa';
+import { useLanguage } from '../../../providers/language/LanguageContext';
+import styles from './TableViewsBar.module.css';
+
+export interface TableViewOption {
+  id: string;
+  viewKey: string;
+  displayName: string;
+}
+
+/** One grouping level (ClickUp-style): column + band order for that level. */
+export interface GroupByLevelSpec {
+  field: string;
+  direction: 'asc' | 'desc';
+}
+
+export interface TableViewsBarProps {
+  views: TableViewOption[];
+  loadingViews: boolean;
+  activeViewKey: string | null;
+  activeViewId: string | null;
+  groupByLevels: GroupByLevelSpec[];
+  onGroupByLevelsChange: (levels: GroupByLevelSpec[]) => void;
+  onSelectView: (viewKey: string | null) => void;
+  columnOptions: Array<{ key: string; label: string }>;
+  onCreateView: (displayName: string, viewKey: string) => void | Promise<void>;
+  /** When a saved view is active, overwrite its config (filters, sort, grouping, folds). Optional. */
+  onSaveActiveView?: () => void | Promise<void>;
+  onUpdateViewGrouping: (viewId: string, levels: GroupByLevelSpec[]) => void | Promise<void>;
+  onDeleteView?: (viewId: string) => void | Promise<void>;
+  onReloadViews: () => void;
+}
+
+function slugify(name: string): string {
+  return name
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-_]/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '') || 'view';
+}
+
+export function groupLevelsToApiPayload(levels: GroupByLevelSpec[]) {
+  return levels
+    .filter((l) => l.field)
+    .map((l) => ({ field: l.field, nullLabel: '—', direction: l.direction }));
+}
+
+function commitLevels(
+  next: GroupByLevelSpec[],
+  activeViewId: string | null,
+  onGroupByLevelsChange: (l: GroupByLevelSpec[]) => void,
+  onUpdateViewGrouping: (id: string, l: GroupByLevelSpec[]) => void | Promise<void>,
+) {
+  onGroupByLevelsChange(next);
+  if (activeViewId) {
+    void Promise.resolve(onUpdateViewGrouping(activeViewId, next));
+  }
+}
+
+export function TableViewsBar({
+  views,
+  loadingViews,
+  activeViewKey,
+  activeViewId,
+  groupByLevels,
+  onGroupByLevelsChange,
+  onSelectView,
+  columnOptions,
+  onCreateView,
+  onSaveActiveView,
+  onUpdateViewGrouping,
+  onDeleteView,
+  onReloadViews,
+}: TableViewsBarProps) {
+  const { t } = useLanguage();
+  const [groupMenuOpen, setGroupMenuOpen] = useState(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [saveOpen, setSaveOpen] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!groupMenuOpen) return;
+    const onDoc = (e: MouseEvent) => {
+      const el = wrapRef.current;
+      if (el && !el.contains(e.target as Node)) setGroupMenuOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setGroupMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [groupMenuOpen]);
+
+  const levelsForUi = useMemo(
+    () => (groupByLevels.length > 0 ? groupByLevels : [{ field: '', direction: 'asc' as const }]),
+    [groupByLevels],
+  );
+
+  const usedFields = useMemo(
+    () => new Set(groupByLevels.map((l) => l.field).filter(Boolean)),
+    [groupByLevels],
+  );
+
+  const columnsForRow = useCallback(
+    (_rowIdx: number, currentField: string) =>
+      columnOptions.filter((c) => c.key === currentField || !usedFields.has(c.key) || !c.key),
+    [columnOptions, usedFields],
+  );
+
+  const [overwriteSaving, setOverwriteSaving] = useState(false);
+
+  const _onClickSave = useCallback(async () => {
+    if (activeViewId && onSaveActiveView) {
+      setOverwriteSaving(true);
+      try {
+        await onSaveActiveView();
+        await onReloadViews();
+      } catch (e) {
+        console.error('Save active view failed', e);
+      } finally {
+        setOverwriteSaving(false);
+      }
+      return;
+    }
+    setSaveOpen(true);
+    setNewName('');
+  }, [activeViewId, onSaveActiveView, onReloadViews]);
+
+  const _saveNew = async () => {
+    const name = newName.trim();
+    const slug = slugify(name);
+    if (!name || !slug) return;
+    setSaving(true);
+    try {
+      await onCreateView(name, slug);
+      setSaveOpen(false);
+      setNewName('');
+      await onReloadViews();
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const updateLevel = (idx: number, patch: Partial<GroupByLevelSpec>) => {
+    const working = levelsForUi.map((l, i) => (i === idx ? { ...l, ...patch } : l));
+    const normalized = working.filter((l) => l.field);
+    commitLevels(normalized, activeViewId, onGroupByLevelsChange, onUpdateViewGrouping);
+  };
+
+  const addLevelRow = () => {
+    commitLevels(
+      [...groupByLevels, { field: '', direction: 'asc' }],
+      activeViewId,
+      onGroupByLevelsChange,
+      onUpdateViewGrouping,
+    );
+  };
+
+  const removeLevel = (idx: number) => {
+    const working = levelsForUi.filter((_, i) => i !== idx);
+    const normalized = working.filter((l) => l.field);
+    commitLevels(normalized, activeViewId, onGroupByLevelsChange, onUpdateViewGrouping);
+  };
+
+  const summary =
+    groupByLevels.length === 0
+      ? t('Keine')
+      : groupByLevels
+          .filter((l) => l.field)
+          .map((l) => columnOptions.find((c) => c.key === l.field)?.label ?? l.field)
+          .join(' › ');
+
+  return (
+    <div className={styles.toolbar}>
+      <div ref={wrapRef} className={styles.popoverAnchor}>
+        <button
+          type="button"
+          className={`${styles.groupTrigger} ${groupMenuOpen ? styles.groupTriggerOpen : ''}`}
+          onClick={() => setGroupMenuOpen((o) => !o)}
+          aria-expanded={groupMenuOpen}
+          aria-label={t('Gruppieren')}
+          title={t('Gruppieren')}
+        >
+          <FaLayerGroup className={styles.groupIcon} aria-hidden />
+        </button>
+        {groupMenuOpen && (
+          <div className={styles.popover} role="dialog" aria-label={t('Gruppieren nach')}>
+            <div className={styles.popoverTitle}>{t('Gruppieren nach')}</div>
+            <p className={styles.popoverHint}>{t('Wählen Sie eine Spalte und die Reihenfolge der Gruppen.')}</p>
+            <div className={styles.levelList}>
+              {levelsForUi.map((level, idx) => (
+                <div key={idx} className={styles.levelRow}>
+                  <select
+                    className={styles.select}
+                    aria-label={t('Spalte')}
+                    value={level.field}
+                    onChange={(e) => updateLevel(idx, { field: e.target.value })}
+                  >
+                    <option value="">{t('Spalte wählen')}</option>
+                    {columnsForRow(idx, level.field).map((c) => (
+                      <option key={c.key} value={c.key}>
+                        {c.label || c.key}
+                      </option>
+                    ))}
+                  </select>
+                  <select
+                    className={styles.selectOrder}
+                    aria-label={t('Sortierung')}
+                    value={level.direction}
+                    disabled={!level.field}
+                    onChange={(e) =>
+                      updateLevel(idx, { direction: e.target.value === 'desc' ? 'desc' : 'asc' })
+                    }
+                  >
+                    <option value="asc">{t('Aufsteigend')}</option>
+                    <option value="desc">{t('Absteigend')}</option>
+                  </select>
+                  <button
+                    type="button"
+                    className={styles.iconBtn}
+                    title={t('Ebene entfernen')}
+                    aria-label={t('Ebene entfernen')}
+                    disabled={levelsForUi.length <= 1 && !level.field}
+                    onClick={() => removeLevel(idx)}
+                  >
+                    <FaTrash />
+                  </button>
+                </div>
+              ))}
+            </div>
+            <button type="button" className={styles.addLevelBtn} onClick={addLevelRow}>
+              {t('+ Weitere Ebene')}
+            </button>
+          </div>
+        )}
+      </div>
+
+      <span className={styles.activeSummary} title={summary}>
+        {groupByLevels.filter((l) => l.field).length === 0
+          ? t('Nicht gruppiert')
+          : `${t('Aktiv')}: ${summary}`}
+      </span>
+
+      <div className={styles.viewBlock}>
+        <span className={styles.viewLabel}>{t('Ansicht')}</span>
+        <select
+          className={styles.viewSelect}
+          value={activeViewKey ?? ''}
+          disabled={loadingViews}
+          onChange={(e) => {
+            const v = e.target.value;
+            onSelectView(v === '' ? null : v);
+          }}
+        >
+          <option value="">{t('Standard')}</option>
+          {views.map((v) => (
+            <option key={v.id} value={v.viewKey}>
+              {v.displayName}
+            </option>
+          ))}
+        </select>
+        <button
+          type="button"
+          className={styles.btnGhost}
+          disabled={loadingViews || overwriteSaving}
+          title={
+            activeViewId
+              ? t('Aktuelle Ansicht mit Filter, Sortierung und Gruppierung überschreiben')
+              : t('Neue Ansicht speichern')
+          }
+          onClick={() => void _onClickSave()}
+        >
+          {overwriteSaving ? t('Wird gespeichert…') : t('Speichern…')}
+        </button>
+        {activeViewId && onDeleteView && (
+          <button
+            type="button"
+            className={styles.btnDangerGhost}
+            onClick={() => {
+              if (window.confirm(t('Diese Ansicht wirklich löschen?'))) {
+                void Promise.resolve(onDeleteView(activeViewId)).then(() => onReloadViews());
+              }
+            }}
+          >
+            {t('Löschen')}
+          </button>
+        )}
+      </div>
+
+      {saveOpen && (
+        <div
+          className={styles.modalBackdrop}
+          role="presentation"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setSaveOpen(false);
+          }}
+        >
+          <div className={styles.modal} role="dialog" aria-labelledby="new-view-title" onClick={(e) => e.stopPropagation()}>
+            <h3 id="new-view-title">{t('Neue Ansicht')}</h3>
+            <p className={styles.modalHint}>{t('Übernimmt Filter, Sortierung und Gruppierung.')}</p>
+            <div className={styles.modalField}>
+              <label htmlFor="nv-name">{t('Anzeigename')}</label>
+              <input
+                id="nv-name"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                placeholder={t('z. B. Nach Status')}
+                autoFocus
+              />
+            </div>
+            <div className={styles.modalActions}>
+              <button type="button" className={styles.btnGhost} onClick={() => setSaveOpen(false)}>
+                {t('Abbrechen')}
+              </button>
+              <button
+                type="button"
+                className={styles.btnPrimary}
+                disabled={saving || !newName.trim()}
+                onClick={() => void _saveNew()}
+              >
+                {saving ? t('Speichern…') : t('Erstellen')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/FormGenerator/TableViewsBar/index.ts b/src/components/FormGenerator/TableViewsBar/index.ts
new file mode 100644
index 0000000..da9924b
--- /dev/null
+++ b/src/components/FormGenerator/TableViewsBar/index.ts
@@ -0,0 +1 @@
+export { TableViewsBar, groupLevelsToApiPayload, type TableViewsBarProps, type TableViewOption, type GroupByLevelSpec } from './TableViewsBar';
diff --git a/src/hooks/useBilling.ts b/src/hooks/useBilling.ts
index de8eb7d..8be65d9 100644
--- a/src/hooks/useBilling.ts
+++ b/src/hooks/useBilling.ts
@@ -11,6 +11,7 @@ import {
   fetchBalances,
   fetchBalanceForMandate,
   fetchTransactions,
+  fetchTransactionsPaginated,
   fetchStatistics,
   fetchAllowedProviders,
   fetchSettingsAdmin,
@@ -31,7 +32,9 @@ import {
   type MandateUserSummary,
   type StatisticsRangeRequest,
   type BillingBucketSize,
+  type BillingTransactionsPaginationParams,
 } from '../api/billingApi';
+import type { GroupLayout } from '../api/connectionApi';
 
 // Re-export types
 export type {
@@ -47,7 +50,7 @@ export type {
   BillingBucketSize,
 };
 
-export type { TransactionType, ReferenceType } from '../api/billingApi';
+export type { TransactionType, ReferenceType, BillingTransactionsPaginationParams } from '../api/billingApi';
 
 /**
  * Hook for user billing operations
@@ -55,6 +58,17 @@ export type { TransactionType, ReferenceType } from '../api/billingApi';
 export function useBilling() {
   const [balances, setBalances] = useState<BillingBalance[]>([]);
   const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
+  const [transactionsPagination, setTransactionsPagination] = useState<{
+    currentPage: number;
+    pageSize: number;
+    totalItems: number;
+    totalPages: number;
+  } | null>(null);
+  const [transactionsGroupLayout, setTransactionsGroupLayout] = useState<GroupLayout | null>(null);
+  const [transactionsAppliedView, setTransactionsAppliedView] = useState<{
+    viewKey?: string;
+    displayName?: string;
+  } | null>(null);
   const [statistics, setStatistics] = useState<UsageReport | null>(null);
   const [allowedProviders, setAllowedProviders] = useState<string[]>([]);
   const { request, isLoading: loading, error } = useApiRequest();
@@ -87,14 +101,38 @@ export function useBilling() {
     try {
       const data = await fetchTransactions(request, limit, offset);
       setTransactions(Array.isArray(data) ? data : []);
+      setTransactionsPagination(null);
+      setTransactionsGroupLayout(null);
+      setTransactionsAppliedView(null);
       return data;
     } catch (err) {
       console.error('Error loading transactions:', err);
       setTransactions([]);
+      setTransactionsPagination(null);
+      setTransactionsGroupLayout(null);
+      setTransactionsAppliedView(null);
       return [];
     }
   }, [request]);
 
+  const refetchTransactions = useCallback(async (params?: BillingTransactionsPaginationParams) => {
+    try {
+      const data = await fetchTransactionsPaginated(request, params);
+      setTransactions(Array.isArray(data.items) ? data.items : []);
+      setTransactionsPagination(data.pagination ?? null);
+      setTransactionsGroupLayout(data.groupLayout ?? null);
+      setTransactionsAppliedView(data.appliedView ?? null);
+      return data;
+    } catch (err) {
+      console.error('Error loading transactions:', err);
+      setTransactions([]);
+      setTransactionsPagination(null);
+      setTransactionsGroupLayout(null);
+      setTransactionsAppliedView(null);
+      return null;
+    }
+  }, [request]);
+
   const loadStatistics = useCallback(async (range: StatisticsRangeRequest) => {
     try {
       const data = await fetchStatistics(request, range);
@@ -129,6 +167,9 @@ export function useBilling() {
   return {
     balances,
     transactions,
+    transactionsPagination,
+    transactionsGroupLayout,
+    transactionsAppliedView,
     statistics,
     allowedProviders,
     loading,
@@ -136,6 +177,7 @@ export function useBilling() {
     loadBalances,
     loadBalanceForMandate,
     loadTransactions,
+    refetchTransactions,
     loadStatistics,
     loadAllowedProviders,
     refetch: loadBalances,
diff --git a/src/hooks/useConnections.ts b/src/hooks/useConnections.ts
index b3b43d7..299480c 100644
--- a/src/hooks/useConnections.ts
+++ b/src/hooks/useConnections.ts
@@ -17,12 +17,13 @@ import {
   type AttributeDefinition,
   type PaginationParams,
   type CreateConnectionData,
-  type ConnectResponse
+  type ConnectResponse,
+  type PaginatedResponse,
+  type GroupLayout,
 } from '../api/connectionApi';
 
 // Re-export types for backward compatibility
 export type { Connection, AttributeDefinition, PaginationParams, CreateConnectionData, ConnectResponse };
-export type { TableGroupNode } from '../api/connectionApi';
 
 // Hook for managing connections
 export function useConnections() {
@@ -35,7 +36,8 @@ export function useConnections() {
     totalItems: number;
     totalPages: number;
   } | null>(null);
-  const [groupTree, setGroupTree] = useState<import('../api/connectionApi').TableGroupNode[]>([]);
+  const [groupLayout, setGroupLayout] = useState<GroupLayout | null>(null);
+  const [appliedView, setAppliedView] = useState<{ viewKey?: string; displayName?: string } | null>(null);
   const [isConnecting, setIsConnecting] = useState(false);
   const [connectError, setConnectError] = useState<string | null>(null);
   const { request, isLoading, error } = useApiRequest<any, any>();
@@ -91,6 +93,69 @@ export function useConnections() {
     }
   }, [checkPermission]);
 
+  const fetchGroupSectionSummaries = useCallback(
+    async (base: {
+      search?: string;
+      filters?: Record<string, any>;
+      sort?: Array<{ field: string; direction: string }>;
+      viewKey?: string | null;
+      groupField: string;
+      groupDirection?: 'asc' | 'desc';
+    }) => {
+      const pObj: Record<string, unknown> = {
+        page: 1,
+        pageSize: 25,
+        groupByLevels: [
+          {
+            field: base.groupField,
+            nullLabel: '—',
+            direction: base.groupDirection || 'asc',
+          },
+        ],
+      };
+      if (base.search) (pObj as { search?: string }).search = base.search;
+      if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters;
+      if (base.sort?.length) (pObj as { sort: typeof base.sort }).sort = base.sort;
+      if (base.viewKey) (pObj as { viewKey: string }).viewKey = base.viewKey;
+      const { data } = await api.get('/api/connections/', {
+        params: { mode: 'groupSummary', pagination: JSON.stringify(pObj) },
+      });
+      return Array.isArray(data?.groups) ? data.groups : [];
+    },
+    [],
+  );
+
+  const refetchForSection = useCallback(
+    async (
+      paginationParams: any,
+      sectionFilter: Record<string, unknown>,
+      parentColumnFilters?: Record<string, unknown>,
+    ) => {
+      const mergedFilters = {
+        ...(parentColumnFilters || {}),
+        ...(paginationParams.filters || {}),
+        ...sectionFilter,
+      };
+      const pObj: Record<string, unknown> = {
+        page: paginationParams.page,
+        pageSize: paginationParams.pageSize,
+        filters: mergedFilters,
+        groupByLevels: [],
+      };
+      if (paginationParams.sort) (pObj as { sort: unknown }).sort = paginationParams.sort;
+      if (paginationParams.search) (pObj as { search: string }).search = paginationParams.search;
+      if (paginationParams.viewKey) (pObj as { viewKey: string }).viewKey = paginationParams.viewKey;
+      const { data } = await api.get('/api/connections/', {
+        params: { pagination: JSON.stringify(pObj) },
+      });
+      if (data && typeof data === 'object' && 'items' in data) {
+        return { items: data.items, pagination: data.pagination };
+      }
+      return { items: [], pagination: null };
+    },
+    [],
+  );
+
   // Fetch connections with pagination support
   const fetchConnections = useCallback(async (params?: PaginationParams): Promise<Connection[]> => {
     try {
@@ -103,14 +168,15 @@ export function useConnections() {
         if (data.pagination) {
           setPagination(data.pagination);
         }
-        if (Array.isArray(data.groupTree)) {
-          setGroupTree(data.groupTree);
-        }
+        setGroupLayout((data as PaginatedResponse<Connection>).groupLayout ?? null);
+        setAppliedView((data as PaginatedResponse<Connection>).appliedView ?? null);
       } else {
         // Handle non-paginated response (backward compatibility)
         const items = Array.isArray(data) ? data : [];
         setConnections(items);
         setPagination(null);
+        setGroupLayout(null);
+        setAppliedView(null);
       }
       
       return Array.isArray(data) ? data : (data?.items || []);
@@ -118,6 +184,8 @@ export function useConnections() {
       console.error('Error fetching connections:', error);
       setConnections([]);
       setPagination(null);
+      setGroupLayout(null);
+      setAppliedView(null);
       throw error;
     }
   }, [request]);
@@ -824,6 +892,8 @@ export function useConnections() {
     attributes,
     permissions,
     pagination,
+    groupLayout,
+    appliedView,
     generateEditFieldsFromAttributes,
     ensureAttributesLoaded,
     fetchAttributes,
@@ -832,7 +902,8 @@ export function useConnections() {
     updateOptimistically,
     handleInlineUpdate,
     fetchConnectionById,
-    groupTree,
+    fetchGroupSectionSummaries,
+    refetchForSection,
   };
 }
 
diff --git a/src/hooks/useFiles.ts b/src/hooks/useFiles.ts
index 72d390d..a770388 100644
--- a/src/hooks/useFiles.ts
+++ b/src/hooks/useFiles.ts
@@ -22,7 +22,6 @@ import {
   moveFiles as moveFilesApi,
   type FolderInfo,
 } from '../api/fileApi';
-import type { TableGroupNode } from '../api/connectionApi';
 
 export interface FilePreviewResult {
   success: boolean;
@@ -69,6 +68,7 @@ export interface PaginationParams {
   sort?: Array<{ field: string; direction: 'asc' | 'desc' }>;
   filters?: Record<string, any>;
   search?: string;
+  viewKey?: string;
 }
 
 // Files list hook
@@ -82,7 +82,8 @@ export function useUserFiles() {
     totalItems: number;
     totalPages: number;
   } | null>(null);
-  const [groupTree, setGroupTree] = useState<TableGroupNode[]>([]);
+  const [groupLayout, setGroupLayout] = useState<import('../api/connectionApi').GroupLayout | null>(null);
+  const [appliedView, setAppliedView] = useState<{ viewKey?: string; displayName?: string } | null>(null);
   const { request, isLoading: loading, error } = useApiRequest<null, UserFile[]>();
   const { checkPermission } = usePermissions();
   
@@ -140,6 +141,69 @@ export function useUserFiles() {
     }
   }, [checkPermission]);
 
+  const fetchGroupSectionSummaries = useCallback(
+    async (base: {
+      search?: string;
+      filters?: Record<string, any>;
+      sort?: Array<{ field: string; direction: string }>;
+      viewKey?: string | null;
+      groupField: string;
+      groupDirection?: 'asc' | 'desc';
+    }) => {
+      const pObj: Record<string, unknown> = {
+        page: 1,
+        pageSize: 25,
+        groupByLevels: [
+          {
+            field: base.groupField,
+            nullLabel: '—',
+            direction: base.groupDirection || 'asc',
+          },
+        ],
+      };
+      if (base.search) (pObj as { search?: string }).search = base.search;
+      if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters;
+      if (base.sort?.length) (pObj as { sort: typeof base.sort }).sort = base.sort;
+      if (base.viewKey) (pObj as { viewKey: string }).viewKey = base.viewKey;
+      const { data } = await api.get('/api/files/list', {
+        params: { mode: 'groupSummary', pagination: JSON.stringify(pObj) },
+      });
+      return Array.isArray(data?.groups) ? data.groups : [];
+    },
+    [],
+  );
+
+  const refetchForSection = useCallback(
+    async (
+      paginationParams: PaginationParams & { page: number; pageSize: number },
+      sectionFilter: Record<string, unknown>,
+      parentColumnFilters?: Record<string, unknown>,
+    ) => {
+      const mergedFilters = {
+        ...(parentColumnFilters || {}),
+        ...(paginationParams.filters || {}),
+        ...sectionFilter,
+      };
+      const pObj: Record<string, unknown> = {
+        page: paginationParams.page,
+        pageSize: paginationParams.pageSize,
+        filters: mergedFilters,
+        groupByLevels: [],
+      };
+      if (paginationParams.sort) (pObj as { sort: unknown }).sort = paginationParams.sort;
+      if (paginationParams.search) (pObj as { search: string }).search = paginationParams.search;
+      if (paginationParams.viewKey) (pObj as { viewKey: string }).viewKey = paginationParams.viewKey;
+      const { data } = await api.get('/api/files/list', {
+        params: { pagination: JSON.stringify(pObj) },
+      });
+      if (data && typeof data === 'object' && 'items' in data) {
+        return { items: data.items, pagination: data.pagination };
+      }
+      return { items: [], pagination: null };
+    },
+    [],
+  );
+
   const fetchFiles = useCallback(async (params?: PaginationParams) => {
     // Check if user is authenticated before fetching files
     const cachedUser = getUserDataCache();
@@ -182,28 +246,20 @@ export function useUserFiles() {
         if (data.pagination) {
           setPagination(data.pagination);
         }
-        if (Array.isArray((data as any).groupTree)) {
-          setGroupTree((data as any).groupTree);
-        }
+        setGroupLayout((data as any).groupLayout ?? null);
+        setAppliedView((data as any).appliedView ?? null);
       } else {
-        // Handle non-paginated response (backward compatibility)
-        console.log('📋 Processing non-paginated response:', {
-          isArray: Array.isArray(data),
-          dataLength: Array.isArray(data) ? data.length : 'not an array',
-          firstItemRaw: Array.isArray(data) && data.length > 0 ? data[0] : null,
-          allDataRaw: data
-        });
-        
-        // Use backend data directly - no mapping needed, just like prompts
         const items = Array.isArray(data) ? data : [];
-        console.log('📊 Final files array (non-paginated, using backend data directly):', items);
         setFiles(items);
         setPagination(null);
+        setGroupLayout(null);
+        setAppliedView(null);
       }
     } catch (error: any) {
-      // Error is already handled by useApiRequest
       setFiles([]);
       setPagination(null);
+      setGroupLayout(null);
+      setAppliedView(null);
     }
   }, [request]);
 
@@ -338,10 +394,13 @@ export function useUserFiles() {
     attributes,
     permissions,
     pagination,
-    groupTree,
+    groupLayout,
+    appliedView,
     fetchFileById,
     generateEditFieldsFromAttributes,
-    ensureAttributesLoaded
+    ensureAttributesLoaded,
+    fetchGroupSectionSummaries,
+    refetchForSection,
   };
 }
 
diff --git a/src/hooks/usePrompts.ts b/src/hooks/usePrompts.ts
index 20870e7..26cef0b 100644
--- a/src/hooks/usePrompts.ts
+++ b/src/hooks/usePrompts.ts
@@ -13,7 +13,6 @@ import {
   type AttributeDefinition,
   type PaginationParams
 } from '../api/promptApi';
-import type { TableGroupNode } from '../api/connectionApi';
 
 // Re-export types for backward compatibility
 export type { Prompt, AttributeDefinition, PaginationParams };
@@ -35,7 +34,8 @@ export function usePrompts() {
     totalItems: number;
     totalPages: number;
   } | null>(null);
-  const [groupTree, setGroupTree] = useState<TableGroupNode[]>([]);
+  const [groupLayout, setGroupLayout] = useState<import('../api/connectionApi').GroupLayout | null>(null);
+  const [appliedView, setAppliedView] = useState<{ viewKey?: string; displayName?: string } | null>(null);
   const { request, isLoading: loading, error } = useApiRequest<null, Prompt[]>();
   const { checkPermission } = usePermissions();
 
@@ -90,6 +90,69 @@ export function usePrompts() {
     }
   }, [checkPermission]);
 
+  const fetchGroupSectionSummaries = useCallback(
+    async (base: {
+      search?: string;
+      filters?: Record<string, any>;
+      sort?: Array<{ field: string; direction: string }>;
+      viewKey?: string | null;
+      groupField: string;
+      groupDirection?: 'asc' | 'desc';
+    }) => {
+      const pObj: Record<string, unknown> = {
+        page: 1,
+        pageSize: 25,
+        groupByLevels: [
+          {
+            field: base.groupField,
+            nullLabel: '—',
+            direction: base.groupDirection || 'asc',
+          },
+        ],
+      };
+      if (base.search) (pObj as { search?: string }).search = base.search;
+      if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters;
+      if (base.sort?.length) (pObj as { sort: typeof base.sort }).sort = base.sort;
+      if (base.viewKey) (pObj as { viewKey: string }).viewKey = base.viewKey;
+      const { data } = await api.get('/api/prompts', {
+        params: { mode: 'groupSummary', pagination: JSON.stringify(pObj) },
+      });
+      return Array.isArray(data?.groups) ? data.groups : [];
+    },
+    [],
+  );
+
+  const refetchForSection = useCallback(
+    async (
+      paginationParams: any,
+      sectionFilter: Record<string, unknown>,
+      parentColumnFilters?: Record<string, unknown>,
+    ) => {
+      const mergedFilters = {
+        ...(parentColumnFilters || {}),
+        ...(paginationParams.filters || {}),
+        ...sectionFilter,
+      };
+      const pObj: Record<string, unknown> = {
+        page: paginationParams.page,
+        pageSize: paginationParams.pageSize,
+        filters: mergedFilters,
+        groupByLevels: [],
+      };
+      if (paginationParams.sort) (pObj as { sort: unknown }).sort = paginationParams.sort;
+      if (paginationParams.search) (pObj as { search: string }).search = paginationParams.search;
+      if (paginationParams.viewKey) (pObj as { viewKey: string }).viewKey = paginationParams.viewKey;
+      const { data } = await api.get('/api/prompts', {
+        params: { pagination: JSON.stringify(pObj) },
+      });
+      if (data && typeof data === 'object' && 'items' in data) {
+        return { items: data.items, pagination: data.pagination };
+      }
+      return { items: [], pagination: null };
+    },
+    [],
+  );
+
   const fetchPrompts = useCallback(async (params?: PaginationParams) => {
     try {
       const data = await fetchPromptsApi(request, params);
@@ -101,19 +164,22 @@ export function usePrompts() {
         if (data.pagination) {
           setPagination(data.pagination);
         }
-        if (Array.isArray((data as any).groupTree)) {
-          setGroupTree((data as any).groupTree);
-        }
+        setGroupLayout(data.groupLayout ?? null);
+        setAppliedView(data.appliedView ?? null);
       } else {
         // Handle non-paginated response (backward compatibility)
         const items = Array.isArray(data) ? data : [];
         setPrompts(items);
         setPagination(null);
+        setGroupLayout(null);
+        setAppliedView(null);
       }
     } catch (error: any) {
       // Error is already handled by useApiRequest
       setPrompts([]);
       setPagination(null);
+      setGroupLayout(null);
+      setAppliedView(null);
     }
   }, [request]);
 
@@ -459,11 +525,14 @@ export function usePrompts() {
     attributes,
     permissions,
     pagination,
-    groupTree,
+    groupLayout,
+    appliedView,
     fetchPromptById,
     generateEditFieldsFromAttributes,
     generateCreateFieldsFromAttributes,
-    ensureAttributesLoaded
+    ensureAttributesLoaded,
+    fetchGroupSectionSummaries,
+    refetchForSection,
   };
 }
 
diff --git a/src/pages/basedata/ConnectionsPage.tsx b/src/pages/basedata/ConnectionsPage.tsx
index 39673ca..64e7826 100644
--- a/src/pages/basedata/ConnectionsPage.tsx
+++ b/src/pages/basedata/ConnectionsPage.tsx
@@ -30,11 +30,15 @@ export const ConnectionsPage: React.FC = () => {
     attributes,
     permissions,
     pagination,
+    groupLayout,
+    appliedView,
     loading,
     error,
     refetch,
     fetchConnectionById,
     updateOptimistically,
+    fetchGroupSectionSummaries,
+    refetchForSection,
     deleteConnection,
     handleInlineUpdate,
     createConnectionAndAuth,
@@ -44,7 +48,6 @@ export const ConnectionsPage: React.FC = () => {
     refreshMicrosoftToken,
     refreshGoogleToken,
     isConnecting,
-    groupTree,
   } = useConnections();
 
   const [editingConnection, setEditingConnection] = useState<Connection | null>(null);
@@ -415,6 +418,8 @@ export const ConnectionsPage: React.FC = () => {
             data={connections}
             columns={columns}
             apiEndpoint="/api/connections/"
+            tableContextKey="connections"
+            tableGroupLayoutMode="sections"
             loading={loading}
             pagination={true}
             pageSize={25}
@@ -467,12 +472,14 @@ export const ConnectionsPage: React.FC = () => {
               refetch,
               permissions,
               pagination,
+              groupLayout,
+              appliedView,
               handleDelete: deleteConnection,
               handleInlineUpdate,
               updateOptimistically,
-              groupTree,
+              fetchGroupSectionSummaries,
+              refetchForSection,
             }}
-            groupingConfig={{ contextKey: 'connections', enabled: true }}
             emptyMessage={t('Keine Verbindungen gefunden')}
           />
       </div>
diff --git a/src/pages/basedata/FilesPage.tsx b/src/pages/basedata/FilesPage.tsx
index d1d019e..5e69bd1 100644
--- a/src/pages/basedata/FilesPage.tsx
+++ b/src/pages/basedata/FilesPage.tsx
@@ -8,7 +8,7 @@
  */
 
 import React, { useState, useMemo, useEffect, useRef, useCallback, type PointerEvent as RPointerEvent } from 'react';
-import { useUserFiles, useFileOperations } from '../../hooks/useFiles';
+import { useUserFiles, useFileOperations, type PaginationParams } from '../../hooks/useFiles';
 import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
 import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
 import { FormGeneratorTree } from '../../components/FormGenerator/FormGeneratorTree';
@@ -50,8 +50,12 @@ export const FilesPage: React.FC = () => {
     error,
     refetch: tableRefetch,
     pagination,
+    groupLayout,
+    appliedView,
     fetchFileById,
     updateFileOptimistically,
+    fetchGroupSectionSummaries: fetchGroupSectionSummariesFromHook,
+    refetchForSection: refetchForSectionFromHook,
   } = useUserFiles();
 
   const {
@@ -108,6 +112,39 @@ export const FilesPage: React.FC = () => {
     await tableRefetch(nextParams);
   }, [tableRefetch, selectedFolderId, viewMode]);
 
+  const fetchGroupSectionSummaries = useCallback(
+    async (base: {
+      search?: string;
+      filters?: Record<string, unknown>;
+      sort?: Array<{ field: string; direction: string }>;
+      viewKey?: string | null;
+      groupField: string;
+      groupDirection?: 'asc' | 'desc';
+    }) => {
+      const filters = { ...(base.filters || {}) };
+      if (viewMode === 'folder' && selectedFolderId) {
+        filters.folderId = selectedFolderId;
+      }
+      return fetchGroupSectionSummariesFromHook({ ...base, filters });
+    },
+    [fetchGroupSectionSummariesFromHook, viewMode, selectedFolderId],
+  );
+
+  const refetchForSection = useCallback(
+    async (
+      paginationParams: PaginationParams & { page: number; pageSize: number },
+      sectionFilter: Record<string, unknown>,
+      parentColumnFilters?: Record<string, unknown>,
+    ) => {
+      const merged = { ...(parentColumnFilters || {}) };
+      if (viewMode === 'folder' && selectedFolderId) {
+        merged.folderId = selectedFolderId;
+      }
+      return refetchForSectionFromHook(paginationParams, sectionFilter, merged);
+    },
+    [refetchForSectionFromHook, viewMode, selectedFolderId],
+  );
+
   const _refreshAll = useCallback(async () => {
     await _tableRefetch({ page: 1, pageSize: 25 });
     setTreeKey(k => k + 1);
@@ -333,6 +370,7 @@ export const FilesPage: React.FC = () => {
               ownership="own"
               title={t('Eigene')}
               showFilter={true}
+              allowCreateFolder={canCreate}
               onNodeClick={_handleTreeNodeClick}
               onRefresh={() => _tableRefetch()}
             />
@@ -409,6 +447,8 @@ export const FilesPage: React.FC = () => {
               data={tableFiles || []}
               columns={columns}
               apiEndpoint="/api/files/list"
+              tableContextKey="files/list"
+              tableGroupLayoutMode="sections"
               loading={tableLoading}
               pagination={true}
               pageSize={25}
@@ -459,11 +499,15 @@ export const FilesPage: React.FC = () => {
               hookData={{
                 refetch: _tableRefetch,
                 pagination,
+                groupLayout,
+                appliedView,
                 permissions,
                 handleDelete: handleFileDelete,
                 handleInlineUpdate,
                 updateOptimistically: updateFileOptimistically,
                 previewingFiles,
+                fetchGroupSectionSummaries,
+                refetchForSection,
               }}
               emptyMessage={t('Keine Dateien gefunden')}
             />
diff --git a/src/pages/basedata/PromptsPage.tsx b/src/pages/basedata/PromptsPage.tsx
index 86eba34..3cbc1fa 100644
--- a/src/pages/basedata/PromptsPage.tsx
+++ b/src/pages/basedata/PromptsPage.tsx
@@ -31,12 +31,15 @@ export const PromptsPage: React.FC = () => {
     attributes,
     permissions,
     pagination,
+    groupLayout,
+    appliedView,
     loading,
     error,
     refetch,
-    groupTree,
     fetchPromptById,
     updateOptimistically,
+    fetchGroupSectionSummaries,
+    refetchForSection,
   } = usePrompts();
   
   // Operations hook
@@ -205,6 +208,8 @@ export const PromptsPage: React.FC = () => {
           data={prompts}
           columns={columns}
           apiEndpoint="/api/prompts"
+          tableContextKey="prompts"
+          tableGroupLayoutMode="sections"
           loading={loading}
           pagination={true}
           pageSize={25}
@@ -234,12 +239,14 @@ export const PromptsPage: React.FC = () => {
             refetch: _tableRefetch,
             permissions,
             pagination,
+            groupLayout,
+            appliedView,
             handleDelete: handlePromptDelete,
             handleInlineUpdate,
             updateOptimistically,
-            groupTree,
+            fetchGroupSectionSummaries,
+            refetchForSection,
           }}
-          groupingConfig={{ contextKey: 'prompts', enabled: true }}
           emptyMessage={t('Keine Prompts gefunden')}
         />
       </div>
diff --git a/src/pages/billing/Billing.module.css b/src/pages/billing/Billing.module.css
index 23bb649..de49b0a 100644
--- a/src/pages/billing/Billing.module.css
+++ b/src/pages/billing/Billing.module.css
@@ -6,13 +6,36 @@
 
 .billingDashboard {
   padding: 1.5rem;
-  height: 100%;
+  /* Fill MainLayout outletShell (flex column); height:100% alone does not grow the flex item */
+  flex: 1;
+  min-height: 0;
   width: 100%;
   display: flex;
   flex-direction: column;
+  overflow-x: hidden;
   overflow-y: auto;
 }
 
+/* Flex host for tab panels so the transactions tab can grow to the viewport */
+.billingTabBody {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  /* Overview/Diagramme: scroll; Transaktionen: single flex child fills height */
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* Transactions tab: consume remaining viewport so nested tables can flex */
+.transactionsTabLayout {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .pageHeader {
   margin-bottom: 2rem;
 }
diff --git a/src/pages/billing/BillingDataView.tsx b/src/pages/billing/BillingDataView.tsx
index 0dd3caf..ade7771 100644
--- a/src/pages/billing/BillingDataView.tsx
+++ b/src/pages/billing/BillingDataView.tsx
@@ -19,6 +19,7 @@ import type { AttributeDefinition } from '../../api/attributesApi';
 import { resolveColumnTypes } from '../../utils/columnTypeResolver';
 import { useBilling, type BillingBucketSize } from '../../hooks/useBilling';
 import { UserTransaction } from '../../api/billingApi';
+import type { GroupLayout } from '../../api/connectionApi';
 import { formatBinaryDataSizeFromMebibytes } from '../../utils/formatDataSize';
 import { useLanguage } from '../../providers/language/LanguageContext';
 import {
@@ -343,6 +344,11 @@ export const BillingDataView: React.FC = () => {
   const [transactionsLoading, setTransactionsLoading] = useState(false);
   const [transactionsError, setTransactionsError] = useState<string | null>(null);
   const [transactionsPagination, setTransactionsPagination] = useState<any>(null);
+  const [transactionsGroupLayout, setTransactionsGroupLayout] = useState<GroupLayout | null>(null);
+  const [transactionsAppliedView, setTransactionsAppliedView] = useState<{
+    viewKey?: string;
+    displayName?: string;
+  } | null>(null);
 
   useEffect(() => {
     fetchAttributes(request, 'BillingTransactionView')
@@ -479,6 +485,8 @@ export const BillingDataView: React.FC = () => {
         if (paginationParams.sort) pObj.sort = paginationParams.sort;
         if (paginationParams.filters) pObj.filters = paginationParams.filters;
         if (paginationParams.search) pObj.search = paginationParams.search;
+        if (paginationParams.viewKey) pObj.viewKey = paginationParams.viewKey;
+        if (paginationParams.groupByLevels !== undefined) pObj.groupByLevels = paginationParams.groupByLevels;
         if (Object.keys(pObj).length > 0) {
           params.pagination = JSON.stringify(pObj);
         }
@@ -489,20 +497,96 @@ export const BillingDataView: React.FC = () => {
       
       if (data && typeof data === 'object' && 'items' in data) {
         setTransactions(Array.isArray(data.items) ? data.items : []);
-        if (data.pagination) {
-          setTransactionsPagination(data.pagination);
-        }
+        setTransactionsPagination(data.pagination ?? null);
+        setTransactionsGroupLayout(data.groupLayout ?? null);
+        setTransactionsAppliedView(data.appliedView ?? null);
+        return data;
       } else {
         setTransactions(Array.isArray(data) ? data : []);
+        setTransactionsPagination(null);
+        setTransactionsGroupLayout(null);
+        setTransactionsAppliedView(null);
+        return data;
       }
     } catch (err: any) {
       console.error('Failed to load transactions:', err);
       setTransactionsError(err.response?.data?.detail || err.message || t('Fehler beim Laden der Transaktionen'));
+      setTransactionsGroupLayout(null);
+      setTransactionsAppliedView(null);
     } finally {
       setTransactionsLoading(false);
     }
+    return null;
   }, [_scopeParams, t]);
 
+  const fetchGroupSectionSummaries = useCallback(
+    async (base: {
+      search?: string;
+      filters?: Record<string, any>;
+      sort?: Array<{ field: string; direction: string }>;
+      viewKey?: string | null;
+      groupField: string;
+      groupDirection?: 'asc' | 'desc';
+    }) => {
+      const pObj: Record<string, unknown> = {
+        page: 1,
+        pageSize: 25,
+        groupByLevels: [
+          {
+            field: base.groupField,
+            nullLabel: '—',
+            direction: base.groupDirection || 'asc',
+          },
+        ],
+      };
+      if (base.search) (pObj as { search?: string }).search = base.search;
+      if (base.filters && Object.keys(base.filters).length) (pObj as { filters: typeof base.filters }).filters = base.filters;
+      if (base.sort?.length) (pObj as { sort: typeof base.sort }).sort = base.sort;
+      if (base.viewKey) (pObj as { viewKey: string }).viewKey = base.viewKey;
+      const params: Record<string, string> = {
+        ..._scopeParams,
+        mode: 'groupSummary',
+        pagination: JSON.stringify(pObj),
+      };
+      const { data } = await api.get('/api/billing/view/users/transactions', { params });
+      return Array.isArray(data?.groups) ? data.groups : [];
+    },
+    [_scopeParams],
+  );
+
+  const refetchForSection = useCallback(
+    async (
+      paginationParams: any,
+      sectionFilter: Record<string, unknown>,
+      parentColumnFilters?: Record<string, unknown>,
+    ) => {
+      const mergedFilters = {
+        ...(parentColumnFilters || {}),
+        ...(paginationParams.filters || {}),
+        ...sectionFilter,
+      };
+      const pObj: Record<string, unknown> = {
+        page: paginationParams.page,
+        pageSize: paginationParams.pageSize,
+        filters: mergedFilters,
+        groupByLevels: [],
+      };
+      if (paginationParams.sort) (pObj as { sort: unknown }).sort = paginationParams.sort;
+      if (paginationParams.search) (pObj as { search: string }).search = paginationParams.search;
+      if (paginationParams.viewKey) (pObj as { viewKey: string }).viewKey = paginationParams.viewKey;
+      const params: Record<string, string> = {
+        ..._scopeParams,
+        pagination: JSON.stringify(pObj),
+      };
+      const { data } = await api.get('/api/billing/view/users/transactions', { params });
+      if (data && typeof data === 'object' && 'items' in data) {
+        return { items: data.items, pagination: data.pagination };
+      }
+      return { items: [], pagination: null };
+    },
+    [_scopeParams],
+  );
+
   const _fetchTransactionFilterValues = useCallback(async (
     columnKey: string,
     crossFilters?: Record<string, any>,
@@ -518,11 +602,28 @@ export const BillingDataView: React.FC = () => {
     return Array.isArray(resp.data) ? resp.data : [];
   }, [_scopeParams]);
 
-  const transactionsHookData = useMemo(() => ({
-    refetch: _loadTransactions,
-    pagination: transactionsPagination || undefined,
-    fetchFilterValues: _fetchTransactionFilterValues,
-  }), [_loadTransactions, transactionsPagination, _fetchTransactionFilterValues]);
+  const transactionsHookData = useMemo(
+    () => ({
+      refetch: _loadTransactions,
+      pagination: transactionsPagination || undefined,
+      groupLayout: transactionsGroupLayout ?? undefined,
+      appliedView: transactionsAppliedView ?? undefined,
+      fetchFilterValues: _fetchTransactionFilterValues,
+      fetchGroupSectionSummaries,
+      refetchForSection,
+      csvExportQueryParams: _scopeParams,
+    }),
+    [
+      _loadTransactions,
+      transactionsPagination,
+      transactionsGroupLayout,
+      transactionsAppliedView,
+      _fetchTransactionFilterValues,
+      fetchGroupSectionSummaries,
+      refetchForSection,
+      _scopeParams,
+    ],
+  );
 
   const _rawTransactionColumns: ColumnConfig[] = useMemo(() => [
     { key: 'sysCreatedAt', label: t('Datum'), sortable: true, width: 160 },
@@ -635,6 +736,7 @@ export const BillingDataView: React.FC = () => {
         </div>
       )}
 
+      <div className={styles.billingTabBody}>
       {/* ================================================================ */}
       {/* Tab: Übersicht (KPI overview) */}
       {/* ================================================================ */}
@@ -722,7 +824,7 @@ export const BillingDataView: React.FC = () => {
       {/* Tab: Transaktionen */}
       {/* ================================================================ */}
       {activeTab === 'transactions' && (
-        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '500px' }}>
+        <div className={styles.transactionsTabLayout}>
           {transactionsError && (
             <div className={styles.errorMessage}>
               {transactionsError}
@@ -734,6 +836,8 @@ export const BillingDataView: React.FC = () => {
             data={transactions}
             columns={columns}
             apiEndpoint="/api/billing/view/users/transactions"
+            tableContextKey="billing/view/users/transactions"
+            tableGroupLayoutMode="sections"
             loading={transactionsLoading}
             pagination={true}
             pageSize={25}
@@ -742,12 +846,13 @@ export const BillingDataView: React.FC = () => {
             sortable={true}
             selectable={false}
             emptyMessage={t('Keine Transaktionen vorhanden')}
-            onRefresh={_loadTransactions}
             hookData={transactionsHookData}
           />
         </div>
       )}
 
+      </div>
+
     </div>
   );
 };
diff --git a/src/pages/billing/BillingTransactions.tsx b/src/pages/billing/BillingTransactions.tsx
index b176ff8..3e862cf 100644
--- a/src/pages/billing/BillingTransactions.tsx
+++ b/src/pages/billing/BillingTransactions.tsx
@@ -1,149 +1,178 @@
 /**
  * Billing Transactions Page
- * 
- * Zeigt die Transaktionshistorie für den Benutzer.
+ *
+ * Transaktionshistorie mit FormGeneratorTable (Suche, Filter, Sortierung, Ansichten, Gruppierung).
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import { useBilling, type BillingTransaction } from '../../hooks/useBilling';
 import { BillingNav } from './BillingNav';
 import styles from './Billing.module.css';
-
+import { FormGeneratorTable, type ColumnConfig } from '../../components/FormGenerator/FormGeneratorTable';
 import { useLanguage } from '../../providers/language/LanguageContext';
 
-// ============================================================================
-// TRANSACTION ROW COMPONENT
-// ============================================================================
-
-interface TransactionRowProps {
-  transaction: BillingTransaction;
+function typePillClass(type: string): string {
+  switch (type) {
+    case 'CREDIT':
+      return styles.credit;
+    case 'DEBIT':
+      return styles.debit;
+    case 'ADJUSTMENT':
+      return styles.adjustment;
+    default:
+      return '';
+  }
 }
 
-const TransactionRow: React.FC<TransactionRowProps> = ({ transaction }) => {
-  const formatCurrency = (amount: number) => {
-    return new Intl.NumberFormat('de-CH', {
-      style: 'currency',
-      currency: 'CHF'
-    }).format(amount);
-  };
-  
-  const formatDate = (dateString?: string) => {
-    if (!dateString) return '-';
-    return new Date(dateString).toLocaleString('de-CH', {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-  };
-  
-  const getTypeClass = (type: string) => {
-    switch (type) {
-      case 'CREDIT': return styles.credit;
-      case 'DEBIT': return styles.debit;
-      case 'ADJUSTMENT': return styles.adjustment;
-      default: return '';
-    }
-  };
-  
-  const getTypeLabel = (type: string) => {
-    switch (type) {
-      case 'CREDIT': return 'Gutschrift';
-      case 'DEBIT': return 'Belastung';
-      case 'ADJUSTMENT': return 'Korrektur';
-      default: return type;
-    }
-  };
-  
-  return (
-    <tr>
-      <td>{formatDate(transaction.sysCreatedAt)}</td>
-      <td>{transaction.mandateName || '-'}</td>
-      <td>
-        <span className={`${styles.transactionType} ${getTypeClass(transaction.transactionType)}`}>
-          {getTypeLabel(transaction.transactionType)}
-        </span>
-      </td>
-      <td>{transaction.description}</td>
-      <td>{transaction.aicoreProvider || '-'}</td>
-      <td>{transaction.aicoreModel || '-'}</td>
-      <td>{transaction.featureCode || '-'}</td>
-      <td style={{ textAlign: 'right' }}>
-        {transaction.transactionType === 'DEBIT' ? '-' : '+'}{formatCurrency(transaction.amount)}
-      </td>
-    </tr>
-  );
-};
-
-// ============================================================================
-// MAIN COMPONENT
-// ============================================================================
+function typeLabel(type: string, t: (k: string) => string): string {
+  switch (type) {
+    case 'CREDIT':
+      return t('Gutschrift');
+    case 'DEBIT':
+      return t('Belastung');
+    case 'ADJUSTMENT':
+      return t('Korrektur');
+    default:
+      return type;
+  }
+}
 
 export const BillingTransactions: React.FC = () => {
   const { t } = useLanguage();
-  const { transactions, loading, loadTransactions } = useBilling();
-  const [limit, setLimit] = useState(50);
-  
-  useEffect(() => {
-    loadTransactions(limit);
-  }, [limit, loadTransactions]);
-  
-  const handleLoadMore = () => {
-    setLimit(prev => prev + 50);
-  };
-  
+  const {
+    transactions,
+    loading,
+    refetchTransactions,
+    transactionsPagination,
+    transactionsGroupLayout,
+    transactionsAppliedView,
+  } = useBilling();
+
+  const columns = useMemo((): ColumnConfig[] => {
+    const fmtChf = (amount: number) =>
+      new Intl.NumberFormat('de-CH', { style: 'currency', currency: 'CHF' }).format(amount);
+
+    return [
+      {
+        key: 'sysCreatedAt',
+        label: t('Datum'),
+        type: 'date',
+        sortable: true,
+        filterable: false,
+        searchable: true,
+        width: 170,
+      },
+      {
+        key: 'mandateName',
+        label: t('Mandant'),
+        type: 'string',
+        sortable: true,
+        filterable: true,
+        searchable: true,
+        width: 160,
+      },
+      {
+        key: 'transactionType',
+        label: t('Typ'),
+        type: 'string',
+        sortable: true,
+        filterable: true,
+        searchable: true,
+        width: 130,
+        formatter: (_v, row: BillingTransaction) => (
+          <span className={`${styles.transactionType} ${typePillClass(row.transactionType)}`}>
+            {typeLabel(row.transactionType, t)}
+          </span>
+        ),
+      },
+      {
+        key: 'description',
+        label: t('Beschreibung'),
+        type: 'string',
+        sortable: true,
+        filterable: true,
+        searchable: true,
+        minWidth: 180,
+      },
+      {
+        key: 'aicoreProvider',
+        label: t('Anbieter'),
+        type: 'string',
+        sortable: true,
+        filterable: true,
+        searchable: true,
+        width: 120,
+      },
+      {
+        key: 'aicoreModel',
+        label: t('Modell'),
+        type: 'string',
+        sortable: true,
+        filterable: true,
+        searchable: true,
+        width: 120,
+      },
+      {
+        key: 'featureCode',
+        label: t('Feature'),
+        type: 'string',
+        sortable: true,
+        filterable: true,
+        searchable: true,
+        width: 110,
+      },
+      {
+        key: 'amount',
+        label: t('Betrag'),
+        type: 'number',
+        sortable: true,
+        filterable: true,
+        width: 120,
+        formatter: (v, row: BillingTransaction) => {
+          const n = Number(v);
+          const abs = fmtChf(Math.abs(n));
+          const prefix = row.transactionType === 'DEBIT' ? '-' : '+';
+          return (
+            <span style={{ display: 'block', textAlign: 'right' }}>
+              {prefix}
+              {abs}
+            </span>
+          );
+        },
+      },
+    ];
+  }, [t]);
+
   return (
     <div className={styles.billingDashboard}>
       <header className={styles.pageHeader}>
         <h1>{t('Transaktionen')}</h1>
         <p className={styles.subtitle}>{t('Übersicht aller Kontobewegungen')}</p>
       </header>
-      
+
       <BillingNav />
-      
+
       <section className={styles.section}>
-        {loading && transactions.length === 0 ? (
-          <div className={styles.loadingPlaceholder}>{t('Transaktionen laden')}</div>
-        ) : transactions.length === 0 ? (
-          <div className={styles.noData}>{t('Keine Transaktionen vorhanden')}</div>
-        ) : (
-          <>
-            <div style={{ overflowX: 'auto' }}>
-              <table className={styles.transactionsTable}>
-                <thead>
-                  <tr>
-                    <th>Datum</th>
-                    <th>{t('Mandant')}</th>
-                    <th>Typ</th>
-                    <th>{t('Beschreibung')}</th>
-                    <th>Anbieter</th>
-                    <th>Modell</th>
-                    <th>Feature</th>
-                    <th style={{ textAlign: 'right' }}>{t('Betrag')}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {transactions.map((transaction) => (
-                    <TransactionRow key={transaction.id} transaction={transaction} />
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            
-            {transactions.length >= limit && (
-              <div style={{ textAlign: 'center', marginTop: 'var(--spacing-md)' }}>
-                <button 
-                  className={`${styles.button} ${styles.buttonSecondary}`}
-                  onClick={handleLoadMore}
-                  disabled={loading}
-                >
-                  {loading ? t('Laden') : t('Mehr laden')}
-                </button>
-              </div>
-            )}
-          </>
-        )}
+        <FormGeneratorTable<BillingTransaction>
+          data={transactions}
+          columns={columns}
+          apiEndpoint="/api/billing/transactions"
+          tableContextKey="billing/transactions"
+          loading={loading}
+          pagination={true}
+          pageSize={25}
+          searchable={true}
+          filterable={true}
+          sortable={true}
+          selectable={false}
+          hookData={{
+            refetch: refetchTransactions,
+            pagination: transactionsPagination ?? undefined,
+            groupLayout: transactionsGroupLayout ?? undefined,
+            appliedView: transactionsAppliedView ?? undefined,
+          }}
+          emptyMessage={t('Keine Transaktionen vorhanden')}
+        />
       </section>
     </div>
   );
diff --git a/src/pages/views/graphicalEditor/GraphicalEditorWorkflowsTasksPage.tsx b/src/pages/views/graphicalEditor/GraphicalEditorWorkflowsTasksPage.tsx
index bbf2427..574ff25 100644
--- a/src/pages/views/graphicalEditor/GraphicalEditorWorkflowsTasksPage.tsx
+++ b/src/pages/views/graphicalEditor/GraphicalEditorWorkflowsTasksPage.tsx
@@ -24,7 +24,7 @@ import {
 } from '../../../api/workflowApi';
 import { useToast } from '../../../contexts/ToastContext';
 import { Popup } from '../../../components/UiComponents/Popup';
-import { getAcceptStringFromConfig } from '../../../components/FlowEditor';
+import { getAcceptStringFromConfig, fileMatchesAccept } from '../../../components/FlowEditor';
 import { useFileOperations } from '../../../hooks/useFiles';
 import styles from './Automation2WorkflowsTasks.module.css';
 
@@ -501,25 +501,6 @@ function InputFormClickupTaskField({
   );
 }
 
-function fileMatchesAccept(file: File, accept: string): boolean {
-  if (!accept || !accept.trim()) return true;
-  const parts = accept.split(',').map((s) => s.trim()).filter(Boolean);
-  const ext = '.' + (file.name.split('.').pop() ?? '').toLowerCase();
-  const mime = (file.type ?? '').toLowerCase();
-  for (const p of parts) {
-    const pp = p.toLowerCase();
-    if (pp.startsWith('.')) {
-      if (ext === pp) return true;
-      const exts = pp.split(',').map((x) => (x.trim().startsWith('.') ? x.trim() : '.' + x.trim()));
-      if (exts.some((e) => e === ext)) return true;
-    } else if (pp.endsWith('/*')) {
-      const prefix = pp.slice(0, -2);
-      if (mime.startsWith(prefix)) return true;
-    } else if (mime === pp || mime.startsWith(pp + '/')) return true;
-  }
-  return false;
-}
-
 const TaskCard: React.FC<TaskCardProps> = ({
   task,
   instanceId,
@@ -787,8 +768,10 @@ const TaskCard: React.FC<TaskCardProps> = ({
               e.target.value = '';
               return;
             }
-            if (acceptStr && !fileMatchesAccept(file, acceptStr)) {
-              setUploadError(`Dateityp von "${file.name}" nicht erlaubt.`);
+            if (acceptStr && acceptStr !== '*' && !fileMatchesAccept(file, acceptStr)) {
+              setUploadError(
+                `Die Datei „${file.name}“ hat ein nicht erlaubtes Format. Bitte eine Datei mit passender Endung verwenden (laut Upload-Schritt im Workflow).`,
+              );
               setUploading(false);
               e.target.value = '';
               return;
@@ -848,7 +831,7 @@ const TaskCard: React.FC<TaskCardProps> = ({
             <input
               ref={fileInputRef}
               type="file"
-              accept={acceptStr || undefined}
+              accept={acceptStr === '*' ? undefined : acceptStr || undefined}
               multiple={allowMultiple}
               onChange={handleFileSelect}
               style={{ display: 'none' }}
diff --git a/src/pages/views/workspace/WorkspacePage.tsx b/src/pages/views/workspace/WorkspacePage.tsx
index 05f526a..bda2dba 100644
--- a/src/pages/views/workspace/WorkspacePage.tsx
+++ b/src/pages/views/workspace/WorkspacePage.tsx
@@ -20,8 +20,6 @@ import { ToolActivityLog } from './ToolActivityLog';
 import { UnifiedDataBar } from '../../../components/UnifiedDataBar';
 import type { UdbContext, UdbTab, AddToChat_FileItem, AddToChat_FeatureSource } from '../../../components/UnifiedDataBar';
 import api from '../../../api';
-import { collectGroupItemIds } from '../../../api/fileApi';
-import type { TableGroupNode } from '../../../api/connectionApi';
 import { _defaultProviderSelection, _toBackendProviders } from '../../../components/ProviderSelector';
 import type { ProviderSelection } from '../../../components/ProviderSelector';
 import { useBilling } from '../../../hooks/useBilling';
@@ -83,8 +81,6 @@ export const WorkspacePage: React.FC<WorkspacePageProps> = ({ persistentInstance
   const [udbTab, setUdbTab] = useState<UdbTab>('chats');
   const [selectedFileId, setSelectedFileId] = useState<string | null>(null);
   const workspaceInputRef = useRef<WorkspaceInputHandle>(null);
-  /** Persisted grouping tree from /api/files/list — resolves dropped groups → file IDs */
-  const [filesListGroupTree, setFilesListGroupTree] = useState<TableGroupNode[]>([]);
   const [providerSelection, setProviderSelection] = useState<ProviderSelection>(_defaultProviderSelection());
   const { allowedProviders } = useBilling();
   const [isDragOver, setIsDragOver] = useState(false);
@@ -115,27 +111,6 @@ export const WorkspacePage: React.FC<WorkspacePageProps> = ({ persistentInstance
     }
   }, [isMobile]);
 
-  const _pullFilesGroupTree = useCallback(async (): Promise<TableGroupNode[]> => {
-    if (!instanceId) return [];
-    try {
-      const res = await api.get<{ groupTree?: TableGroupNode[] }>('/api/files/list', {
-        params: { page: 1, pageSize: 1 },
-      });
-      const gt = res.data?.groupTree;
-      const list = Array.isArray(gt) ? gt : [];
-      setFilesListGroupTree(list);
-      return list;
-    } catch {
-      setFilesListGroupTree([]);
-      return [];
-    }
-  }, [instanceId]);
-
-  useEffect(() => {
-    _pullFilesGroupTree();
-  }, [_pullFilesGroupTree]);
-
-
   useEffect(() => {
     if (autoStartHandled.current || !instanceId || workspace.isProcessing) return;
     const prompt = searchParams.get('prompt');
@@ -153,20 +128,15 @@ export const WorkspacePage: React.FC<WorkspacePageProps> = ({ persistentInstance
   }, [instanceId, searchParams, setSearchParams, workspace, providerSelection, allowedProviders]);
 
   const _resolveTreeItemsToFileIds = useCallback(async (items: TreeItemDrop[]) => {
-    let tree = filesListGroupTree;
-    if (items.some(i => i.type === 'group')) {
-      tree = await _pullFilesGroupTree();
-    }
     const out: string[] = [];
     for (const it of items) {
-      if (it.type === 'group') {
-        out.push(...collectGroupItemIds(tree, it.id));
-      } else {
+      // Group drops are no longer supported — groups are now presentation-only (view-based)
+      if (it.type !== 'group') {
         out.push(it.id);
       }
     }
     return [...new Set(out)];
-  }, [filesListGroupTree, _pullFilesGroupTree]);
+  }, []);
 
   const _uploadAndAttach = useCallback(async (file: File) => {
     const result = await fileOps.handleFileUpload(file, undefined, instanceId);