diff --git a/frontend/src/components/FolderField.tsx b/frontend/src/components/FolderField.tsx
new file mode 100644
index 0000000000..6a82584b73
--- /dev/null
+++ b/frontend/src/components/FolderField.tsx
@@ -0,0 +1,52 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useField } from "formik";
+import { useMemo } from "react";
+import type { ActionMeta, SingleValue } from "react-select";
+import CreatableSelect from "react-select/creatable";
+import { intl, T } from "src/locale";
+
+type FolderOption = {
+	label: string;
+	value: string;
+};
+
+interface Props {
+	queryKey: string;
+	metaPath?: string;
+}
+
+export function FolderField({ queryKey, metaPath = "meta.folder" }: Props) {
+	const queryClient = useQueryClient();
+	const [field, , helpers] = useField(metaPath);
+
+	const options: FolderOption[] = useMemo(() => {
+		const allData = queryClient.getQueriesData<any[]>({ queryKey: [queryKey] }).flatMap(([, data]) => data ?? []);
+		return [...new Set(allData.map((h: any) => h.meta?.folder).filter(Boolean) as string[])]
+			.sort()
+			.map((f) => ({ label: f, value: f }));
+	}, [queryClient, queryKey]);
+
+	const currentValue: FolderOption | null = field.value ? { label: field.value, value: field.value } : null;
+
+	const handleChange = (newValue: SingleValue<FolderOption>, _actionMeta: ActionMeta<FolderOption>) => {
+		helpers.setValue(newValue?.value || undefined);
+	};
+
+	return (
+		<div className="mb-3">
+			<label htmlFor="folder-select" className="form-label">
+				<T id="folder" />
+			</label>
+			<CreatableSelect
+				inputId="folder-select"
+				className="react-select-container"
+				classNamePrefix="react-select"
+				isClearable
+				options={options}
+				value={currentValue}
+				onChange={handleChange}
+				placeholder={intl.formatMessage({ id: "folder.placeholder" })}
+			/>
+		</div>
+	);
+}
diff --git a/frontend/src/components/Table/TableBody.tsx b/frontend/src/components/Table/TableBody.tsx
index d8fe9bf3a4..7e495cc246 100644
--- a/frontend/src/components/Table/TableBody.tsx
+++ b/frontend/src/components/Table/TableBody.tsx
@@ -1,9 +1,10 @@
 import { flexRender } from "@tanstack/react-table";
+import { cloneElement, isValidElement } from "react";
 import type { TableLayoutProps } from "src/components";
 import { EmptyRow } from "./EmptyRow";
 
 function TableBody<T>(props: TableLayoutProps<T>) {
-	const { tableInstance, extraStyles, emptyState } = props;
+	const { tableInstance, extraStyles, emptyState, renderRow } = props;
 	const rows = tableInstance.getRowModel().rows;
 
 	if (rows.length === 0) {
@@ -16,7 +17,11 @@ function TableBody<T>(props: TableLayoutProps<T>) {
 
 	return (
 		<tbody className="table-tbody">
-			{rows.map((row: any) => {
+			{rows.map((row) => {
+				if (renderRow) {
+					const node = renderRow(row);
+					return isValidElement(node) ? cloneElement(node, { key: row.id } as any) : node;
+				}
 				return (
 					<tr key={row.id} {...extraStyles?.row(row.original)}>
 						{row.getVisibleCells().map((cell: any) => {
diff --git a/frontend/src/components/Table/TableLayout.tsx b/frontend/src/components/Table/TableLayout.tsx
index 630340919d..62e85c8d63 100644
--- a/frontend/src/components/Table/TableLayout.tsx
+++ b/frontend/src/components/Table/TableLayout.tsx
@@ -1,4 +1,5 @@
-import type { Table as ReactTable } from "@tanstack/react-table";
+import type { Table as ReactTable, Row } from "@tanstack/react-table";
+import type { ReactNode } from "react";
 import { TableBody } from "./TableBody";
 import { TableHeader } from "./TableHeader";
 
@@ -8,6 +9,7 @@ interface TableLayoutProps<TFields> {
 	extraStyles?: {
 		row: (rowData: TFields) => any | undefined;
 	};
+	renderRow?: (row: Row<TFields>) => ReactNode;
 }
 function TableLayout<TFields>(props: TableLayoutProps<TFields>) {
 	const hasRows = props.tableInstance.getRowModel().rows.length > 0;
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 861f637e14..1e630b95b4 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -2,6 +2,7 @@ export * from "./Button";
 export * from "./EmptyData";
 export * from "./ErrorNotFound";
 export * from "./Flag";
+export * from "./FolderField";
 export * from "./Form";
 export * from "./HasPermission";
 export * from "./Loading";
diff --git a/frontend/src/locale/src/en.json b/frontend/src/locale/src/en.json
index bb00ac3322..ecc30004c7 100644
--- a/frontend/src/locale/src/en.json
+++ b/frontend/src/locale/src/en.json
@@ -419,6 +419,12 @@
 	"expires.on": {
 		"defaultMessage": "Expires: {date}"
 	},
+	"folder": {
+		"defaultMessage": "Folder"
+	},
+	"folder.placeholder": {
+		"defaultMessage": "e.g. Production (optional)"
+	},
 	"footer.github-fork": {
 		"defaultMessage": "Fork me on Github"
 	},
diff --git a/frontend/src/modals/DeadHostModal.tsx b/frontend/src/modals/DeadHostModal.tsx
index c9dce9a1c4..f117c197b6 100644
--- a/frontend/src/modals/DeadHostModal.tsx
+++ b/frontend/src/modals/DeadHostModal.tsx
@@ -7,6 +7,7 @@ import Modal from "react-bootstrap/Modal";
 import {
 	Button,
 	DomainNamesField,
+	FolderField,
 	Loading,
 	NginxConfigField,
 	SSLCertificateField,
@@ -132,6 +133,7 @@ const DeadHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
 										<div className="tab-content">
 											<div className="tab-pane active show" id="tab-details" role="tabpanel">
 												<DomainNamesField isWildcardPermitted dnsProviderWildcardSupported />
+												<FolderField queryKey="dead-hosts" />
 											</div>
 											<div className="tab-pane" id="tab-ssl" role="tabpanel">
 												<SSLCertificateField
diff --git a/frontend/src/modals/ProxyHostModal.tsx b/frontend/src/modals/ProxyHostModal.tsx
index 3227be51bb..3b4ca288bd 100644
--- a/frontend/src/modals/ProxyHostModal.tsx
+++ b/frontend/src/modals/ProxyHostModal.tsx
@@ -9,6 +9,7 @@ import {
 	AccessField,
 	Button,
 	DomainNamesField,
+	FolderField,
 	HasPermission,
 	Loading,
 	LocationsFields,
@@ -254,6 +255,7 @@ const ProxyHostModal = EasyModal.create(({ id, visible, remove }: Props) => {
 													</div>
 												</div>
 												<AccessField />
+												<FolderField queryKey="proxy-hosts" />
 												<div className="my-3">
 													<h4 className="py-2">
 														<T id="options" />
diff --git a/frontend/src/modals/RedirectionHostModal.tsx b/frontend/src/modals/RedirectionHostModal.tsx
index 1bd7877f4f..f7f3057f43 100644
--- a/frontend/src/modals/RedirectionHostModal.tsx
+++ b/frontend/src/modals/RedirectionHostModal.tsx
@@ -8,6 +8,7 @@ import Modal from "react-bootstrap/Modal";
 import {
 	Button,
 	DomainNamesField,
+	FolderField,
 	Loading,
 	NginxConfigField,
 	SSLCertificateField,
@@ -162,7 +163,9 @@ const RedirectionHostModal = EasyModal.create(({ id, visible, remove }: Props) =
 																		required
 																		{...field}
 																	>
-																		<option value="auto"><T id="auto" /></option>
+																		<option value="auto">
+																			<T id="auto" />
+																		</option>
 																		<option value="http">http</option>
 																		<option value="https">https</option>
 																	</select>
@@ -242,6 +245,7 @@ const RedirectionHostModal = EasyModal.create(({ id, visible, remove }: Props) =
 														</div>
 													)}
 												</Field>
+												<FolderField queryKey="redirection-hosts" />
 												<div className="my-3">
 													<h4 className="py-2">
 														<T id="options" />
diff --git a/frontend/src/modals/StreamModal.tsx b/frontend/src/modals/StreamModal.tsx
index 6d55348896..1323b7e032 100644
--- a/frontend/src/modals/StreamModal.tsx
+++ b/frontend/src/modals/StreamModal.tsx
@@ -3,7 +3,7 @@ import { Field, Form, Formik } from "formik";
 import { type ReactNode, useState } from "react";
 import { Alert } from "react-bootstrap";
 import Modal from "react-bootstrap/Modal";
-import { Button, Loading, SSLCertificateField, SSLOptionsFields } from "src/components";
+import { Button, FolderField, Loading, SSLCertificateField, SSLOptionsFields } from "src/components";
 import { useSetStream, useStream } from "src/hooks";
 import { intl, T } from "src/locale";
 import { validateNumber, validateString } from "src/modules/Validations";
@@ -280,6 +280,7 @@ const StreamModal = EasyModal.create(({ id, visible, remove }: Props) => {
 														</div>
 													</div>
 												</div>
+												<FolderField queryKey="streams" />
 											</div>
 											<div className="tab-pane" id="tab-ssl" role="tabpanel">
 												<SSLCertificateField
diff --git a/frontend/src/pages/Nginx/DeadHosts/Table.tsx b/frontend/src/pages/Nginx/DeadHosts/Table.tsx
index f8a1a27542..ebeb3ab0d8 100644
--- a/frontend/src/pages/Nginx/DeadHosts/Table.tsx
+++ b/frontend/src/pages/Nginx/DeadHosts/Table.tsx
@@ -1,5 +1,23 @@
-import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
-import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import {
+	IconChevronDown,
+	IconChevronRight,
+	IconDotsVertical,
+	IconEdit,
+	IconPower,
+	IconTrash,
+} from "@tabler/icons-react";
+import {
+	createColumnHelper,
+	type ExpandedState,
+	flexRender,
+	type GroupingState,
+	getCoreRowModel,
+	getExpandedRowModel,
+	getGroupedRowModel,
+	type Row,
+	useReactTable,
+} from "@tanstack/react-table";
+import type { ReactNode } from "react";
 import { useMemo } from "react";
 import type { DeadHost } from "src/api/backend";
 import {
@@ -18,15 +36,38 @@ interface Props {
 	data: DeadHost[];
 	isFiltered?: boolean;
 	isFetching?: boolean;
+	expanded: ExpandedState;
+	onExpandedChange: (expanded: ExpandedState) => void;
 	onEdit?: (id: number) => void;
 	onDelete?: (id: number) => void;
 	onDisableToggle?: (id: number, enabled: boolean) => void;
 	onNew?: () => void;
 }
-export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
+export default function Table({
+	data,
+	isFetching,
+	expanded,
+	onExpandedChange,
+	onEdit,
+	onDelete,
+	onDisableToggle,
+	onNew,
+	isFiltered,
+}: Props) {
 	const columnHelper = createColumnHelper<DeadHost>();
+
+	const grouping: GroupingState = useMemo(() => ["folder"], []);
+
 	const columns = useMemo(
 		() => [
+			// Hidden grouping column — drives TanStack grouping, never rendered
+			columnHelper.accessor((row) => row.meta?.folder ?? "", {
+				id: "folder",
+				enableGrouping: true,
+				enableSorting: false,
+				header: () => null,
+				cell: () => null,
+			}),
 			columnHelper.accessor((row: any) => row.owner, {
 				id: "owner",
 				cell: (info: any) => {
@@ -131,6 +172,16 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 	const tableInstance = useReactTable<DeadHost>({
 		columns,
 		data,
+		state: {
+			grouping,
+			expanded,
+			columnVisibility: { folder: false },
+		},
+		onExpandedChange: (updater) => {
+			onExpandedChange(typeof updater === "function" ? updater(expanded) : updater);
+		},
+		getGroupedRowModel: getGroupedRowModel(),
+		getExpandedRowModel: getExpandedRowModel(),
 		getCoreRowModel: getCoreRowModel(),
 		rowCount: data.length,
 		meta: {
@@ -139,9 +190,67 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 		enableSortingRemoval: false,
 	});
 
+	const visibleColumnCount = tableInstance.getVisibleLeafColumns().length;
+
+	const renderLeafRow = (row: Row<DeadHost>): ReactNode => (
+		<tr key={row.id}>
+			{row.getVisibleCells().map((cell) => {
+				const { className } = (cell.column.columnDef.meta as any) ?? {};
+				return (
+					<td key={cell.id} className={className}>
+						{flexRender(cell.column.columnDef.cell, cell.getContext())}
+					</td>
+				);
+			})}
+		</tr>
+	);
+
+	const renderRow = (row: Row<DeadHost>): ReactNode => {
+		if (row.getIsGrouped()) {
+			const folderName = row.groupingValue as string;
+			if (!folderName) {
+				// Ungrouped hosts: render leaf rows directly at the top, no folder header.
+				// Wrapped in a Fragment so TableBody's cloneElement can apply key={row.id}.
+				return <>{row.subRows.map((subRow) => renderLeafRow(subRow))}</>;
+			}
+			const enabledCount = row.subRows.filter((r) => r.original?.enabled).length;
+			const disabledCount = row.subRows.length - enabledCount;
+			return (
+				<tr
+					key={row.id}
+					style={{
+						backgroundColor: "var(--tblr-bg-surface-secondary, #f6f8fb)",
+						cursor: "pointer",
+						userSelect: "none",
+					}}
+					onClick={() => row.toggleExpanded()}
+				>
+					<td colSpan={visibleColumnCount} className="py-2 px-3">
+						<span className="me-2 text-muted">
+							{row.getIsExpanded() ? <IconChevronDown size={16} /> : <IconChevronRight size={16} />}
+						</span>
+						<strong>{folderName}</strong>
+						<span className="status status-lime ms-3">
+							<span className="status-dot status-dot-animated" />
+							{enabledCount}
+						</span>
+						{disabledCount > 0 && (
+							<span className="status status-red ms-2">
+								<span className="status-dot status-dot-animated" />
+								{disabledCount}
+							</span>
+						)}
+					</td>
+				</tr>
+			);
+		}
+		return renderLeafRow(row);
+	};
+
 	return (
 		<TableLayout
 			tableInstance={tableInstance}
+			renderRow={renderRow}
 			emptyState={
 				<EmptyData
 					object="dead-host"
diff --git a/frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx b/frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx
index 07dd1318ef..ca42e8d75c 100644
--- a/frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx
+++ b/frontend/src/pages/Nginx/DeadHosts/TableWrapper.tsx
@@ -1,5 +1,6 @@
 import { IconHelp, IconSearch } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
+import type { ExpandedState } from "@tanstack/react-table";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteDeadHost, toggleDeadHost } from "src/api/backend";
@@ -14,6 +15,7 @@ import Table from "./Table";
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
 	const [search, setSearch] = useState("");
+	const [expanded, setExpanded] = useState<ExpandedState>({});
 	const { isFetching, isLoading, isError, error, data } = useDeadHosts(["owner", "certificate"]);
 
 	if (isLoading) {
@@ -39,7 +41,10 @@ export default function TableWrapper() {
 	let filtered = null;
 	if (search && data) {
 		filtered = data?.filter((item) => {
-			return item.domainNames.some((domain: string) => domain.toLowerCase().includes(search));
+			return (
+				item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
+				(item.meta?.folder ?? "").toLowerCase().includes(search)
+			);
 		});
 	} else if (search !== "") {
 		// this can happen if someone deletes the last item while searching
@@ -92,6 +97,8 @@ export default function TableWrapper() {
 					data={filtered ?? data ?? []}
 					isFiltered={!!search}
 					isFetching={isFetching}
+					expanded={expanded}
+					onExpandedChange={setExpanded}
 					onEdit={(id: number) => showDeadHostModal(id)}
 					onDelete={(id: number) =>
 						showDeleteConfirmModal({
diff --git a/frontend/src/pages/Nginx/ProxyHosts/Table.tsx b/frontend/src/pages/Nginx/ProxyHosts/Table.tsx
index 9d58b26acd..870cab4e0c 100644
--- a/frontend/src/pages/Nginx/ProxyHosts/Table.tsx
+++ b/frontend/src/pages/Nginx/ProxyHosts/Table.tsx
@@ -1,5 +1,23 @@
-import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
-import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import {
+	IconChevronDown,
+	IconChevronRight,
+	IconDotsVertical,
+	IconEdit,
+	IconPower,
+	IconTrash,
+} from "@tabler/icons-react";
+import {
+	createColumnHelper,
+	type ExpandedState,
+	flexRender,
+	type GroupingState,
+	getCoreRowModel,
+	getExpandedRowModel,
+	getGroupedRowModel,
+	type Row,
+	useReactTable,
+} from "@tanstack/react-table";
+import type { ReactNode } from "react";
 import { useMemo } from "react";
 import type { ProxyHost } from "src/api/backend";
 import {
@@ -19,22 +37,46 @@ interface Props {
 	data: ProxyHost[];
 	isFiltered?: boolean;
 	isFetching?: boolean;
+	expanded: ExpandedState;
+	onExpandedChange: (expanded: ExpandedState) => void;
 	onEdit?: (id: number) => void;
 	onDelete?: (id: number) => void;
 	onDisableToggle?: (id: number, enabled: boolean) => void;
 	onNew?: () => void;
 }
-export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
+
+export default function Table({
+	data,
+	isFetching,
+	expanded,
+	onExpandedChange,
+	onEdit,
+	onDelete,
+	onDisableToggle,
+	onNew,
+	isFiltered,
+}: Props) {
 	const columnHelper = createColumnHelper<ProxyHost>();
+
+	const grouping: GroupingState = useMemo(() => ["folder"], []);
+
 	const columns = useMemo(
 		() => [
+			// Hidden grouping column — drives TanStack grouping, never rendered
+			columnHelper.accessor((row) => row.meta?.folder ?? "", {
+				id: "folder",
+				enableGrouping: true,
+				enableSorting: false,
+				header: () => null,
+				cell: () => null,
+			}),
 			columnHelper.accessor((row: any) => row.owner, {
 				id: "owner",
 				cell: (info: any) => {
 					const value = info.getValue();
 					return <GravatarFormatter url={value ? value.avatar : ""} name={value ? value.name : ""} />;
 				},
-				meta: {
+					meta: {
 					className: "w-1",
 				},
 			}),
@@ -77,68 +119,64 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 			}),
 			columnHelper.display({
 				id: "id",
-				cell: (info: any) => {
-					return (
-						<span className="dropdown">
-							<button
-								type="button"
-								className="btn dropdown-toggle btn-action btn-sm px-1"
-								data-bs-boundary="viewport"
-								data-bs-toggle="dropdown"
+				cell: (info: any) => (
+					<span className="dropdown">
+						<button
+							type="button"
+							className="btn dropdown-toggle btn-action btn-sm px-1"
+							data-bs-boundary="viewport"
+							data-bs-toggle="dropdown"
+						>
+							<IconDotsVertical />
+						</button>
+						<div className="dropdown-menu dropdown-menu-end">
+							<span className="dropdown-header">
+								<T
+									id="object.actions-title"
+									tData={{ object: "proxy-host" }}
+									data={{ id: info.row.original.id }}
+								/>
+							</span>
+							<a
+								className="dropdown-item"
+								href="#"
+								onClick={(e) => {
+									e.preventDefault();
+									onEdit?.(info.row.original.id);
+								}}
 							>
-								<IconDotsVertical />
-							</button>
-							<div className="dropdown-menu dropdown-menu-end">
-								<span className="dropdown-header">
-									<T
-										id="object.actions-title"
-										tData={{ object: "proxy-host" }}
-										data={{ id: info.row.original.id }}
-									/>
-								</span>
+								<IconEdit size={16} />
+								<T id="action.edit" />
+							</a>
+							<HasPermission section={PROXY_HOSTS} permission={MANAGE} hideError>
 								<a
 									className="dropdown-item"
 									href="#"
 									onClick={(e) => {
 										e.preventDefault();
-										onEdit?.(info.row.original.id);
+										onDisableToggle?.(info.row.original.id, !info.row.original.enabled);
 									}}
 								>
-									<IconEdit size={16} />
-									<T id="action.edit" />
+									<IconPower size={16} />
+									<T id={info.row.original.enabled ? "action.disable" : "action.enable"} />
 								</a>
-								<HasPermission section={PROXY_HOSTS} permission={MANAGE} hideError>
-									<a
-										className="dropdown-item"
-										href="#"
-										onClick={(e) => {
-											e.preventDefault();
-											onDisableToggle?.(info.row.original.id, !info.row.original.enabled);
-										}}
-									>
-										<IconPower size={16} />
-										<T id={info.row.original.enabled ? "action.disable" : "action.enable"} />
-									</a>
-									<div className="dropdown-divider" />
-									<a
-										className="dropdown-item"
-										href="#"
-										onClick={(e) => {
-											e.preventDefault();
-											onDelete?.(info.row.original.id);
-										}}
-									>
-										<IconTrash size={16} />
-										<T id="action.delete" />
-									</a>
-								</HasPermission>
-							</div>
-						</span>
-					);
-				},
-				meta: {
-					className: "text-end w-1",
-				},
+								<div className="dropdown-divider" />
+								<a
+									className="dropdown-item"
+									href="#"
+									onClick={(e) => {
+										e.preventDefault();
+										onDelete?.(info.row.original.id);
+									}}
+								>
+									<IconTrash size={16} />
+									<T id="action.delete" />
+								</a>
+							</HasPermission>
+						</div>
+					</span>
+				),
+				meta: { className: "text-end w-1" },
 			}),
 		],
 		[columnHelper, onEdit, onDisableToggle, onDelete],
@@ -147,17 +185,83 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 	const tableInstance = useReactTable<ProxyHost>({
 		columns,
 		data,
+		state: {
+			grouping,
+			expanded,
+			columnVisibility: { folder: false },
+		},
+		onExpandedChange: (updater) => {
+			onExpandedChange(typeof updater === "function" ? updater(expanded) : updater);
+		},
+		getGroupedRowModel: getGroupedRowModel(),
+		getExpandedRowModel: getExpandedRowModel(),
 		getCoreRowModel: getCoreRowModel(),
 		rowCount: data.length,
-		meta: {
-			isFetching,
-		},
+		meta: { isFetching },
 		enableSortingRemoval: false,
 	});
 
+	const visibleColumnCount = tableInstance.getVisibleLeafColumns().length;
+
+	const renderLeafRow = (row: Row<ProxyHost>): ReactNode => (
+		<tr key={row.id}>
+			{row.getVisibleCells().map((cell) => {
+				const { className } = (cell.column.columnDef.meta as any) ?? {};
+				return (
+					<td key={cell.id} className={className}>
+						{flexRender(cell.column.columnDef.cell, cell.getContext())}
+					</td>
+				);
+			})}
+		</tr>
+	);
+
+	const renderRow = (row: Row<ProxyHost>): ReactNode => {
+		if (row.getIsGrouped()) {
+			const folderName = row.groupingValue as string;
+			if (!folderName) {
+				// Ungrouped hosts: render leaf rows directly at the top, no folder header.
+				// Wrapped in a Fragment so TableBody's cloneElement can apply key={row.id}.
+				return <>{row.subRows.map((subRow) => renderLeafRow(subRow))}</>;
+			}
+			const enabledCount = row.subRows.filter((r) => r.original?.enabled).length;
+			const disabledCount = row.subRows.length - enabledCount;
+			return (
+				<tr
+					key={row.id}
+					style={{
+						backgroundColor: "var(--tblr-bg-surface-secondary, #f6f8fb)",
+						cursor: "pointer",
+						userSelect: "none",
+					}}
+					onClick={() => row.toggleExpanded()}
+				>
+					<td colSpan={visibleColumnCount} className="py-2 px-3">
+						<span className="me-2 text-muted">
+							{row.getIsExpanded() ? <IconChevronDown size={16} /> : <IconChevronRight size={16} />}
+						</span>
+						<strong>{folderName}</strong>
+						<span className="status status-lime ms-3">
+							<span className="status-dot status-dot-animated" />
+							{enabledCount}
+						</span>
+						{disabledCount > 0 && (
+							<span className="status status-red ms-2">
+								<span className="status-dot status-dot-animated" />
+								{disabledCount}
+							</span>
+						)}
+					</td>
+				</tr>
+			);
+		}
+		return renderLeafRow(row);
+	};
+
 	return (
 		<TableLayout
 			tableInstance={tableInstance}
+			renderRow={renderRow}
 			emptyState={
 				<EmptyData
 					object="proxy-host"
diff --git a/frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx b/frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx
index 68af43e10a..3c89a45191 100644
--- a/frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx
+++ b/frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx
@@ -1,5 +1,6 @@
 import { IconHelp, IconSearch } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
+import type { ExpandedState } from "@tanstack/react-table";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteProxyHost, toggleProxyHost } from "src/api/backend";
@@ -14,6 +15,7 @@ import Table from "./Table";
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
 	const [search, setSearch] = useState("");
+	const [expanded, setExpanded] = useState<ExpandedState>({});
 	const { isFetching, isLoading, isError, error, data } = useProxyHosts(["owner", "access_list", "certificate"]);
 
 	if (isLoading) {
@@ -42,7 +44,8 @@ export default function TableWrapper() {
 			(item) =>
 				item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
 				item.forwardHost.toLowerCase().includes(search) ||
-				`${item.forwardPort}`.includes(search),
+				`${item.forwardPort}`.includes(search) ||
+				(item.meta?.folder ?? "").toLowerCase().includes(search),
 		);
 	} else if (search !== "") {
 		// this can happen if someone deletes the last item while searching
@@ -98,6 +101,8 @@ export default function TableWrapper() {
 					data={filtered ?? data ?? []}
 					isFiltered={!!search}
 					isFetching={isFetching}
+					expanded={expanded}
+					onExpandedChange={setExpanded}
 					onEdit={(id: number) => showProxyHostModal(id)}
 					onDelete={(id: number) =>
 						showDeleteConfirmModal({
diff --git a/frontend/src/pages/Nginx/RedirectionHosts/Table.tsx b/frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
index 6ac4152348..1640f7bdaa 100644
--- a/frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
+++ b/frontend/src/pages/Nginx/RedirectionHosts/Table.tsx
@@ -1,5 +1,23 @@
-import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
-import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import {
+	IconChevronDown,
+	IconChevronRight,
+	IconDotsVertical,
+	IconEdit,
+	IconPower,
+	IconTrash,
+} from "@tabler/icons-react";
+import {
+	createColumnHelper,
+	type ExpandedState,
+	flexRender,
+	type GroupingState,
+	getCoreRowModel,
+	getExpandedRowModel,
+	getGroupedRowModel,
+	type Row,
+	useReactTable,
+} from "@tanstack/react-table";
+import type { ReactNode } from "react";
 import { useMemo } from "react";
 import type { RedirectionHost } from "src/api/backend";
 import {
@@ -18,15 +36,38 @@ interface Props {
 	data: RedirectionHost[];
 	isFiltered?: boolean;
 	isFetching?: boolean;
+	expanded: ExpandedState;
+	onExpandedChange: (expanded: ExpandedState) => void;
 	onEdit?: (id: number) => void;
 	onDelete?: (id: number) => void;
 	onDisableToggle?: (id: number, enabled: boolean) => void;
 	onNew?: () => void;
 }
-export default function Table({ data, isFetching, onEdit, onDelete, onDisableToggle, onNew, isFiltered }: Props) {
+export default function Table({
+	data,
+	isFetching,
+	expanded,
+	onExpandedChange,
+	onEdit,
+	onDelete,
+	onDisableToggle,
+	onNew,
+	isFiltered,
+}: Props) {
 	const columnHelper = createColumnHelper<RedirectionHost>();
+
+	const grouping: GroupingState = useMemo(() => ["folder"], []);
+
 	const columns = useMemo(
 		() => [
+			// Hidden grouping column — drives TanStack grouping, never rendered
+			columnHelper.accessor((row) => row.meta?.folder ?? "", {
+				id: "folder",
+				enableGrouping: true,
+				enableSorting: false,
+				header: () => null,
+				cell: () => null,
+			}),
 			columnHelper.accessor((row: any) => row.owner, {
 				id: "owner",
 				cell: (info: any) => {
@@ -152,6 +193,16 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 	const tableInstance = useReactTable<RedirectionHost>({
 		columns,
 		data,
+		state: {
+			grouping,
+			expanded,
+			columnVisibility: { folder: false },
+		},
+		onExpandedChange: (updater) => {
+			onExpandedChange(typeof updater === "function" ? updater(expanded) : updater);
+		},
+		getGroupedRowModel: getGroupedRowModel(),
+		getExpandedRowModel: getExpandedRowModel(),
 		getCoreRowModel: getCoreRowModel(),
 		rowCount: data.length,
 		meta: {
@@ -160,9 +211,67 @@ export default function Table({ data, isFetching, onEdit, onDelete, onDisableTog
 		enableSortingRemoval: false,
 	});
 
+	const visibleColumnCount = tableInstance.getVisibleLeafColumns().length;
+
+	const renderLeafRow = (row: Row<RedirectionHost>): ReactNode => (
+		<tr key={row.id}>
+			{row.getVisibleCells().map((cell) => {
+				const { className } = (cell.column.columnDef.meta as any) ?? {};
+				return (
+					<td key={cell.id} className={className}>
+						{flexRender(cell.column.columnDef.cell, cell.getContext())}
+					</td>
+				);
+			})}
+		</tr>
+	);
+
+	const renderRow = (row: Row<RedirectionHost>): ReactNode => {
+		if (row.getIsGrouped()) {
+			const folderName = row.groupingValue as string;
+			if (!folderName) {
+				// Ungrouped hosts: render leaf rows directly at the top, no folder header.
+				// Wrapped in a Fragment so TableBody's cloneElement can apply key={row.id}.
+				return <>{row.subRows.map((subRow) => renderLeafRow(subRow))}</>;
+			}
+			const enabledCount = row.subRows.filter((r) => r.original?.enabled).length;
+			const disabledCount = row.subRows.length - enabledCount;
+			return (
+				<tr
+					key={row.id}
+					style={{
+						backgroundColor: "var(--tblr-bg-surface-secondary, #f6f8fb)",
+						cursor: "pointer",
+						userSelect: "none",
+					}}
+					onClick={() => row.toggleExpanded()}
+				>
+					<td colSpan={visibleColumnCount} className="py-2 px-3">
+						<span className="me-2 text-muted">
+							{row.getIsExpanded() ? <IconChevronDown size={16} /> : <IconChevronRight size={16} />}
+						</span>
+						<strong>{folderName}</strong>
+						<span className="status status-lime ms-3">
+							<span className="status-dot status-dot-animated" />
+							{enabledCount}
+						</span>
+						{disabledCount > 0 && (
+							<span className="status status-red ms-2">
+								<span className="status-dot status-dot-animated" />
+								{disabledCount}
+							</span>
+						)}
+					</td>
+				</tr>
+			);
+		}
+		return renderLeafRow(row);
+	};
+
 	return (
 		<TableLayout
 			tableInstance={tableInstance}
+			renderRow={renderRow}
 			emptyState={
 				<EmptyData
 					object="redirection-host"
diff --git a/frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx b/frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx
index 382b733698..9c398868f1 100644
--- a/frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx
+++ b/frontend/src/pages/Nginx/RedirectionHosts/TableWrapper.tsx
@@ -1,5 +1,6 @@
 import { IconHelp, IconSearch } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
+import type { ExpandedState } from "@tanstack/react-table";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteRedirectionHost, toggleRedirectionHost } from "src/api/backend";
@@ -14,6 +15,7 @@ import Table from "./Table";
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
 	const [search, setSearch] = useState("");
+	const [expanded, setExpanded] = useState<ExpandedState>({});
 	const { isFetching, isLoading, isError, error, data } = useRedirectionHosts(["owner", "certificate"]);
 
 	if (isLoading) {
@@ -41,7 +43,8 @@ export default function TableWrapper() {
 		filtered = data?.filter((item) => {
 			return (
 				item.domainNames.some((domain: string) => domain.toLowerCase().includes(search)) ||
-				item.forwardDomainName.toLowerCase().includes(search)
+				item.forwardDomainName.toLowerCase().includes(search) ||
+				(item.meta?.folder ?? "").toLowerCase().includes(search)
 			);
 		});
 	} else if (search !== "") {
@@ -98,6 +101,8 @@ export default function TableWrapper() {
 					data={filtered ?? data ?? []}
 					isFiltered={!!search}
 					isFetching={isFetching}
+					expanded={expanded}
+					onExpandedChange={setExpanded}
 					onEdit={(id: number) => showRedirectionHostModal(id)}
 					onDelete={(id: number) =>
 						showDeleteConfirmModal({
diff --git a/frontend/src/pages/Nginx/Streams/Table.tsx b/frontend/src/pages/Nginx/Streams/Table.tsx
index 4b9ff7d600..402b3b1bc4 100644
--- a/frontend/src/pages/Nginx/Streams/Table.tsx
+++ b/frontend/src/pages/Nginx/Streams/Table.tsx
@@ -1,5 +1,23 @@
-import { IconDotsVertical, IconEdit, IconPower, IconTrash } from "@tabler/icons-react";
-import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import {
+	IconChevronDown,
+	IconChevronRight,
+	IconDotsVertical,
+	IconEdit,
+	IconPower,
+	IconTrash,
+} from "@tabler/icons-react";
+import {
+	createColumnHelper,
+	type ExpandedState,
+	flexRender,
+	type GroupingState,
+	getCoreRowModel,
+	getExpandedRowModel,
+	getGroupedRowModel,
+	type Row,
+	useReactTable,
+} from "@tanstack/react-table";
+import type { ReactNode } from "react";
 import { useMemo } from "react";
 import type { Stream } from "src/api/backend";
 import {
@@ -18,15 +36,38 @@ interface Props {
 	data: Stream[];
 	isFiltered?: boolean;
 	isFetching?: boolean;
+	expanded: ExpandedState;
+	onExpandedChange: (expanded: ExpandedState) => void;
 	onEdit?: (id: number) => void;
 	onDelete?: (id: number) => void;
 	onDisableToggle?: (id: number, enabled: boolean) => void;
 	onNew?: () => void;
 }
-export default function Table({ data, isFetching, isFiltered, onEdit, onDelete, onDisableToggle, onNew }: Props) {
+export default function Table({
+	data,
+	isFetching,
+	isFiltered,
+	expanded,
+	onExpandedChange,
+	onEdit,
+	onDelete,
+	onDisableToggle,
+	onNew,
+}: Props) {
 	const columnHelper = createColumnHelper<Stream>();
+
+	const grouping: GroupingState = useMemo(() => ["folder"], []);
+
 	const columns = useMemo(
 		() => [
+			// Hidden grouping column — drives TanStack grouping, never rendered
+			columnHelper.accessor((row) => row.meta?.folder ?? "", {
+				id: "folder",
+				enableGrouping: true,
+				enableSorting: false,
+				header: () => null,
+				cell: () => null,
+			}),
 			columnHelper.accessor((row: any) => row.owner, {
 				id: "owner",
 				cell: (info: any) => {
@@ -160,6 +201,16 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 	const tableInstance = useReactTable<Stream>({
 		columns,
 		data,
+		state: {
+			grouping,
+			expanded,
+			columnVisibility: { folder: false },
+		},
+		onExpandedChange: (updater) => {
+			onExpandedChange(typeof updater === "function" ? updater(expanded) : updater);
+		},
+		getGroupedRowModel: getGroupedRowModel(),
+		getExpandedRowModel: getExpandedRowModel(),
 		getCoreRowModel: getCoreRowModel(),
 		rowCount: data.length,
 		meta: {
@@ -168,9 +219,67 @@ export default function Table({ data, isFetching, isFiltered, onEdit, onDelete,
 		enableSortingRemoval: false,
 	});
 
+	const visibleColumnCount = tableInstance.getVisibleLeafColumns().length;
+
+	const renderLeafRow = (row: Row<Stream>): ReactNode => (
+		<tr key={row.id}>
+			{row.getVisibleCells().map((cell) => {
+				const { className } = (cell.column.columnDef.meta as any) ?? {};
+				return (
+					<td key={cell.id} className={className}>
+						{flexRender(cell.column.columnDef.cell, cell.getContext())}
+					</td>
+				);
+			})}
+		</tr>
+	);
+
+	const renderRow = (row: Row<Stream>): ReactNode => {
+		if (row.getIsGrouped()) {
+			const folderName = row.groupingValue as string;
+			if (!folderName) {
+				// Ungrouped streams: render leaf rows directly at the top, no folder header.
+				// Wrapped in a Fragment so TableBody's cloneElement can apply key={row.id}.
+				return <>{row.subRows.map((subRow) => renderLeafRow(subRow))}</>;
+			}
+			const enabledCount = row.subRows.filter((r) => r.original?.enabled).length;
+			const disabledCount = row.subRows.length - enabledCount;
+			return (
+				<tr
+					key={row.id}
+					style={{
+						backgroundColor: "var(--tblr-bg-surface-secondary, #f6f8fb)",
+						cursor: "pointer",
+						userSelect: "none",
+					}}
+					onClick={() => row.toggleExpanded()}
+				>
+					<td colSpan={visibleColumnCount} className="py-2 px-3">
+						<span className="me-2 text-muted">
+							{row.getIsExpanded() ? <IconChevronDown size={16} /> : <IconChevronRight size={16} />}
+						</span>
+						<strong>{folderName}</strong>
+						<span className="status status-lime ms-3">
+							<span className="status-dot status-dot-animated" />
+							{enabledCount}
+						</span>
+						{disabledCount > 0 && (
+							<span className="status status-red ms-2">
+								<span className="status-dot status-dot-animated" />
+								{disabledCount}
+							</span>
+						)}
+					</td>
+				</tr>
+			);
+		}
+		return renderLeafRow(row);
+	};
+
 	return (
 		<TableLayout
 			tableInstance={tableInstance}
+			renderRow={renderRow}
 			emptyState={
 				<EmptyData
 					object="stream"
diff --git a/frontend/src/pages/Nginx/Streams/TableWrapper.tsx b/frontend/src/pages/Nginx/Streams/TableWrapper.tsx
index ec9a8d4090..e832726c35 100644
--- a/frontend/src/pages/Nginx/Streams/TableWrapper.tsx
+++ b/frontend/src/pages/Nginx/Streams/TableWrapper.tsx
@@ -1,5 +1,6 @@
 import { IconHelp, IconSearch } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
+import type { ExpandedState } from "@tanstack/react-table";
 import { useState } from "react";
 import Alert from "react-bootstrap/Alert";
 import { deleteStream, toggleStream } from "src/api/backend";
@@ -14,7 +15,7 @@ import Table from "./Table";
 export default function TableWrapper() {
 	const queryClient = useQueryClient();
 	const [search, setSearch] = useState("");
-	const [_deleteId, _setDeleteIdd] = useState(0);
+	const [expanded, setExpanded] = useState<ExpandedState>({});
 	const { isFetching, isLoading, isError, error, data } = useStreams(["owner", "certificate"]);
 
 	if (isLoading) {
@@ -43,7 +44,8 @@ export default function TableWrapper() {
 			return (
 				`${item.incomingPort}`.includes(search) ||
 				`${item.forwardingPort}`.includes(search) ||
-				item.forwardingHost.includes(search)
+				item.forwardingHost.includes(search) ||
+				(item.meta?.folder ?? "").toLowerCase().includes(search)
 			);
 		});
 	} else if (search !== "") {
@@ -95,7 +97,9 @@ export default function TableWrapper() {
 				<Table
 					data={filtered ?? data ?? []}
 					isFetching={isFetching}
-					isFiltered={!!filtered}
+					isFiltered={!!search}
+					expanded={expanded}
+					onExpandedChange={setExpanded}
 					onEdit={(id: number) => showStreamModal(id)}
 					onDelete={(id: number) =>
 						showDeleteConfirmModal({