refactor(dashboard-v2): memoize prop-passed handlers with useCallback

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardActions/DashboardActions.tsx

@@ -16,14 +16,17 @@ import { Button } from '@signozhq/ui/button';
 import { toast } from '@signozhq/ui/sonner';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
+import DashboardSettings from '../../DashboardSettings';
+import SettingsDrawer from '../SettingsDrawer';
 import styles from '../DashboardDescription.module.scss';
 
-interface Props {
+interface DashboardActionsProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	handle: FullScreenHandle;
 	isDashboardLocked: boolean;
@@ -45,7 +48,7 @@ function DashboardActions({
 	onAddPanel,
 	onLockToggle,
 	onOpenRename,
-}: Props): JSX.Element {
+}: DashboardActionsProps): JSX.Element {
 	const { user } = useAppContext();
 	const { t } = useTranslation(['dashboard', 'common']);
 
@@ -55,6 +58,9 @@ function DashboardActions({
 	const [isDashboardSettingsOpen, setIsDashboardSettingsOpen] =
 		useState<boolean>(false);
 
+	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
+		useState<boolean>(false);
+
 	const [state, setCopy] = useCopyToClipboard();
 
 	useEffect(() => {
@@ -179,6 +185,26 @@ function DashboardActions({
 					testId="options"
 				/>
 			</Popover>
+			{!isDashboardLocked && editDashboard && (
+				<>
+					<Button
+						variant="ghost"
+						className={styles.configureButton}
+						prefix={<ConfigureIcon />}
+						testId="show-drawer"
+						onClick={(): void => setIsSettingsDrawerOpen(true)}
+					>
+						Configure
+					</Button>
+					<SettingsDrawer
+						drawerTitle="Dashboard Configuration"
+						isOpen={isSettingsDrawerOpen}
+						onClose={(): void => setIsSettingsDrawerOpen(false)}
+					>
+						<DashboardSettings dashboard={dashboard} />
+					</SettingsDrawer>
+				</>
+			)}
 			{!isDashboardLocked && addPanelPermission && (
 				<Button
 					variant="solid"

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardDescription.module.scss

@@ -42,6 +42,14 @@
 				overflow: hidden;
 			}
 
+			.clickableTitle {
+				cursor: pointer;
+			}
+
+			.titleInput {
+				max-width: 80%;
+			}
+
 			.publicDashboardIcon {
 				margin-right: 4px;
 			}
@@ -208,96 +216,3 @@
 		}
 	}
 }
-
-.renameDashboard {
-	:global(.ant-modal-content) {
-		width: 384px;
-		flex-shrink: 0;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		padding: 0px;
-
-		:global(.ant-modal-header) {
-			height: 52px;
-			padding: 16px;
-			background: var(--l2-background);
-			border-bottom: 1px solid var(--l1-border);
-			margin-bottom: 0px;
-
-			:global(.ant-modal-title) {
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				width: 349px;
-				height: 20px;
-			}
-		}
-
-		:global(.ant-modal-body) {
-			padding: 16px;
-
-			.dashboardContent {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-
-				.nameText {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 500;
-					line-height: 20px; /* 142.857% */
-				}
-
-				.dashboardNameInput {
-					display: flex;
-					padding: 6px 6px 6px 8px;
-					align-items: center;
-					gap: 4px;
-					align-self: stretch;
-					border-radius: 0px 2px 2px 0px;
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
-				}
-			}
-		}
-
-		:global(.ant-modal-footer) {
-			padding: 16px;
-			margin-top: 0px;
-
-			.dashboardRename {
-				display: flex;
-				flex-direction: row-reverse;
-				gap: 12px;
-
-				.cancelBtn {
-					display: flex;
-					padding: 4px 8px;
-					justify-content: center;
-					align-items: center;
-					gap: 4px;
-					border-radius: 2px;
-					background: var(--l1-border);
-				}
-
-				.renameBtn {
-					display: flex;
-					align-items: center;
-					width: 169px;
-					padding: 4px 8px;
-					justify-content: center;
-					gap: 4px;
-					border-radius: 2px;
-					background: var(--primary-background);
-				}
-			}
-		}
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardMeta/DashboardMeta.tsx

@@ -3,12 +3,12 @@ import { isEmpty } from 'lodash-es';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface Props {
+interface DashboardMetaProps {
 	tags: string[];
 	description: string;
 }
 
-function DashboardMeta({ tags, description }: Props): JSX.Element {
+function DashboardMeta({ tags, description }: DashboardMetaProps): JSX.Element {
 	return (
 		<>
 			{tags.length > 0 && (

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/DashboardTitle.tsx

@@ -1,14 +1,24 @@
+import { KeyboardEvent } from 'react';
 import { Globe, LockKeyhole } from '@signozhq/icons';
+import { Input } from '@signozhq/ui/input';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
 
 import styles from '../DashboardDescription.module.scss';
 
-interface Props {
+interface DashboardTitleProps {
 	title: string;
 	image: string;
 	isPublicDashboard: boolean;
 	isDashboardLocked: boolean;
+	isEditable: boolean;
+	isEditing: boolean;
+	draft: string;
+	onDraftChange: (value: string) => void;
+	onStartEdit: () => void;
+	onCommit: () => void;
+	onCancel: () => void;
 }
 
 function DashboardTitle({
@@ -16,18 +26,52 @@ function DashboardTitle({
 	image,
 	isPublicDashboard,
 	isDashboardLocked,
-}: Props): JSX.Element {
+	isEditable,
+	isEditing,
+	draft,
+	onDraftChange,
+	onStartEdit,
+	onCommit,
+	onCancel,
+}: DashboardTitleProps): JSX.Element {
+	const canEdit = isEditable && !isDashboardLocked;
+
+	const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+		if (event.key === 'Enter') {
+			event.preventDefault();
+			onCommit();
+		} else if (event.key === 'Escape') {
+			onCancel();
+		}
+	};
+
 	return (
 		<div className={styles.leftSection}>
 			<img src={image} alt="dashboard-img" className={styles.dashboardImg} />
-			<TooltipSimple title={title.length > 30 ? title : ''}>
-				<Typography.Text
-					className={styles.dashboardTitle}
-					data-testid="dashboard-title"
-				>
-					{title}
-				</Typography.Text>
-			</TooltipSimple>
+			{isEditing ? (
+				<Input
+					autoFocus
+					value={draft}
+					testId="dashboard-title-input"
+					maxLength={120}
+					className={styles.titleInput}
+					onChange={(e): void => onDraftChange(e.target.value)}
+					onBlur={onCommit}
+					onKeyDown={onKeyDown}
+				/>
+			) : (
+				<TooltipSimple title={title.length > 30 ? title : ''}>
+					<Typography.Text
+						className={cx(styles.dashboardTitle, {
+							[styles.clickableTitle]: canEdit,
+						})}
+						data-testid="dashboard-title"
+						onClick={canEdit ? onStartEdit : undefined}
+					>
+						{title}
+					</Typography.Text>
+				</TooltipSimple>
+			)}
 
 			{isPublicDashboard && (
 				<TooltipSimple title="This dashboard is publicly accessible">

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/DashboardTitle/useEditableTitle.ts

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UseEditableTitleArgs {
+	value: string;
+	onSave: (next: string) => void;
+}
+
+interface UseEditableTitleResult {
+	isEditing: boolean;
+	draft: string;
+	setDraft: (next: string) => void;
+	startEdit: () => void;
+	cancel: () => void;
+	commit: () => void;
+}
+
+/**
+ * Drives an inline-editable title. The parent owns the canonical `value`; this
+ * hook tracks the in-flight `draft` and whether we're editing. `commit` saves
+ * only when the trimmed draft is non-empty and actually changed. A `cancelled`
+ * ref guards against a blur firing right after Escape from also committing.
+ */
+export function useEditableTitle({
+	value,
+	onSave,
+}: UseEditableTitleArgs): UseEditableTitleResult {
+	const [isEditing, setIsEditing] = useState<boolean>(false);
+	const [draft, setDraft] = useState<string>(value);
+	const cancelled = useRef<boolean>(false);
+
+	// Keep the draft in sync with the canonical value while not editing (e.g.
+	// after a refetch updates the title).
+	useEffect(() => {
+		if (!isEditing) {
+			setDraft(value);
+		}
+	}, [value, isEditing]);
+
+	const startEdit = (): void => {
+		cancelled.current = false;
+		setDraft(value);
+		setIsEditing(true);
+	};
+
+	const cancel = (): void => {
+		cancelled.current = true;
+		setIsEditing(false);
+	};
+
+	const commit = (): void => {
+		if (cancelled.current) {
+			cancelled.current = false;
+			return;
+		}
+		const trimmed = draft.trim();
+		if (trimmed && trimmed !== value) {
+			onSave(trimmed);
+		}
+		setIsEditing(false);
+	};
+
+	return { isEditing, draft, setDraft, startEdit, cancel, commit };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/RenameDashboardModal/RenameDashboardModal.tsx

@@ -1,70 +0,0 @@
-import { Input, Modal } from 'antd';
-import { Button } from '@signozhq/ui/button';
-import { Check, X } from '@signozhq/icons';
-import { Typography } from '@signozhq/ui/typography';
-
-import styles from '../DashboardDescription.module.scss';
-
-interface Props {
-	open: boolean;
-	value: string;
-	isLoading: boolean;
-	onChange: (value: string) => void;
-	onRename: () => void;
-	onClose: () => void;
-}
-
-function RenameDashboardModal({
-	open,
-	value,
-	isLoading,
-	onChange,
-	onRename,
-	onClose,
-}: Props): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Rename Dashboard"
-			onOk={onRename}
-			onCancel={onClose}
-			rootClassName={styles.renameDashboard}
-			footer={
-				<div className={styles.dashboardRename}>
-					<Button
-						variant="solid"
-						color="primary"
-						prefix={<Check size={14} />}
-						className={styles.renameBtn}
-						onClick={onRename}
-						disabled={isLoading}
-					>
-						Rename Dashboard
-					</Button>
-					<Button
-						variant="ghost"
-						prefix={<X size={14} />}
-						className={styles.cancelBtn}
-						onClick={onClose}
-					>
-						Cancel
-					</Button>
-				</div>
-			}
-		>
-			<div className={styles.dashboardContent}>
-				<Typography.Text className={styles.nameText}>
-					Enter a new name
-				</Typography.Text>
-				<Input
-					data-testid="dashboard-name"
-					className={styles.dashboardNameInput}
-					value={value}
-					onChange={(e): void => onChange(e.target.value)}
-				/>
-			</div>
-		</Modal>
-	);
-}
-
-export default RenameDashboardModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/SettingsDrawer/SettingsDrawer.module.scss

@@ -0,0 +1,43 @@
+.settingsContainerRoot {
+	:global(.ant-drawer-wrapper-body) {
+		border-left: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+
+		:global(.ant-drawer-header) {
+			height: 48px;
+			border-bottom: 1px solid var(--l1-border);
+			padding: 14px 14px 14px 11px;
+
+			:global(.ant-drawer-header-title) {
+				gap: 16px;
+
+				:global(.ant-drawer-title) {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+					padding-left: 16px;
+					border-left: 1px solid var(--l1-border);
+				}
+
+				:global(.ant-drawer-close) {
+					height: 16px;
+					width: 16px;
+					margin-inline-end: 0px !important;
+				}
+			}
+		}
+
+		:global(.ant-drawer-body) {
+			padding: 16px;
+
+			&::-webkit-scrollbar {
+				width: 0.1rem;
+			}
+		}
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/SettingsDrawer/index.tsx

@@ -0,0 +1,34 @@
+import { memo, PropsWithChildren, ReactElement } from 'react';
+import { Drawer } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+
+import styles from './SettingsDrawer.module.scss';
+
+type SettingsDrawerProps = PropsWithChildren<{
+	drawerTitle: string;
+	isOpen: boolean;
+	onClose: () => void;
+}>;
+
+function SettingsDrawer({
+	children,
+	drawerTitle,
+	isOpen,
+	onClose,
+}: SettingsDrawerProps): JSX.Element {
+	return (
+		<Drawer
+			title={drawerTitle}
+			placement="right"
+			width="50%"
+			onClose={onClose}
+			open={isOpen}
+			rootClassName={styles.settingsContainerRoot}
+		>
+			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
+			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
+		</Drawer>
+	);
+}
+
+export default memo(SettingsDrawer);

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardDescription/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { Card } from 'antd';
 import { toast } from '@signozhq/ui/sonner';
@@ -22,7 +22,7 @@ import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardActions from './DashboardActions/DashboardActions';
 import DashboardMeta from './DashboardMeta/DashboardMeta';
 import DashboardTitle from './DashboardTitle/DashboardTitle';
-import RenameDashboardModal from './RenameDashboardModal/RenameDashboardModal';
+import { useEditableTitle } from './DashboardTitle/useEditableTitle';
 
 import styles from './DashboardDescription.module.scss';
 
@@ -59,16 +59,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
 	const isPublicDashboard = false;
 
-	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
-		useState<boolean>(false);
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
-
-	useEffect(() => {
-		setUpdatedTitle(title);
-	}, [title]);
-
-	const handleLockDashboardToggle = async (): Promise<void> => {
+	const handleLockDashboardToggle = useCallback(async (): Promise<void> => {
 		if (!id) {
 			return;
 		}
@@ -84,41 +75,43 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		} catch (error) {
 			showErrorModal(error as APIError);
 		}
-	};
+	}, [id, isDashboardLocked, refetch, showErrorModal]);
 
-	const onNameChangeHandler = async (): Promise<void> => {
-		const trimmed = updatedTitle.trim();
-		if (!id || !trimmed || trimmed === title) {
-			setIsRenameDashboardOpen(false);
-			return;
-		}
-		try {
-			setIsRenameLoading(true);
-			const patch: DashboardtypesJSONPatchOperationDTO[] = [
-				{
-					op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-					path: '/spec/display/name',
-					value: trimmed,
-				},
-			];
-			await patchDashboardV2({ id }, patch);
-			toast.success('Dashboard renamed successfully');
-			setIsRenameDashboardOpen(false);
-			refetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-			setIsRenameDashboardOpen(true);
-		} finally {
-			setIsRenameLoading(false);
-		}
-	};
+	const onNameSave = useCallback(
+		async (next: string): Promise<void> => {
+			if (!id) {
+				return;
+			}
+			try {
+				const patch: DashboardtypesJSONPatchOperationDTO[] = [
+					{
+						op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+						path: '/spec/display/name',
+						value: next,
+					},
+				];
+				await patchDashboardV2({ id }, patch);
+				toast.success('Dashboard renamed successfully');
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[id, refetch, showErrorModal],
+	);
 
-	const onEmptyWidgetHandler = (): void => {
+	const { isEditing, draft, setDraft, startEdit, cancel, commit } =
+		useEditableTitle({
+			value: title,
+			onSave: onNameSave,
+		});
+
+	const onEmptyWidgetHandler = useCallback((): void => {
 		void logEvent('Dashboard Detail V2: Add new panel clicked', {
 			dashboardId: id,
 		});
 		toast.info('V2 panel editor coming next');
-	};
+	}, [id]);
 
 	return (
 		<Card className={styles.dashboardDescriptionContainer}>
@@ -129,6 +122,13 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					image={image}
 					isPublicDashboard={isPublicDashboard}
 					isDashboardLocked={isDashboardLocked}
+					isEditable={editDashboard}
+					isEditing={isEditing}
+					draft={draft}
+					onDraftChange={setDraft}
+					onStartEdit={startEdit}
+					onCommit={commit}
+					onCancel={cancel}
 				/>
 				<DashboardActions
 					dashboard={dashboard}
@@ -139,19 +139,10 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 					addPanelPermission={addPanelPermission}
 					onAddPanel={onEmptyWidgetHandler}
 					onLockToggle={handleLockDashboardToggle}
-					onOpenRename={(): void => setIsRenameDashboardOpen(true)}
+					onOpenRename={startEdit}
 				/>
 			</section>
 			<DashboardMeta tags={tags} description={description} />
-
-			<RenameDashboardModal
-				open={isRenameDashboardOpen}
-				value={updatedTitle}
-				isLoading={isRenameLoading}
-				onChange={setUpdatedTitle}
-				onRename={onNameChangeHandler}
-				onClose={(): void => setIsRenameDashboardOpen(false)}
-			/>
 		</Card>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/DashboardSettings.module.scss

@@ -0,0 +1,3 @@
+.placeholder {
+	padding: 24px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/CrossPanelSync/CrossPanelSync.tsx

@@ -0,0 +1,114 @@
+// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
+import { Col, Radio, Tooltip } from 'antd';
+import { ExternalLink, SolidInfoCircle } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import { Events } from 'constants/events';
+import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
+import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
+import {
+	DashboardCursorSync,
+	SyncTooltipFilterMode,
+} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { getAbsoluteUrl } from 'utils/basePath';
+import cx from 'classnames';
+
+import styles from '../GeneralSettings.module.scss';
+
+interface CrossPanelSyncProps {
+	dashboardId: string;
+}
+
+function CrossPanelSync({ dashboardId }: CrossPanelSyncProps): JSX.Element {
+	const [cursorSyncMode, setCursorSyncMode] =
+		useDashboardCursorSyncMode(dashboardId);
+	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
+		useSyncTooltipFilterMode(dashboardId);
+
+	return (
+		<Col className={cx(styles.overviewSettings, styles.crossPanelSyncGroup)}>
+			<div className={styles.crossPanelSyncSectionHeader}>
+				<Typography.Text className={styles.crossPanelSyncSectionTitle}>
+					Cross-Panel Sync
+				</Typography.Text>
+				<Tooltip
+					title={
+						<div className={styles.crossPanelSyncTooltipContent}>
+							<strong className={styles.crossPanelSyncTooltipTitle}>
+								Cross-Panel Sync
+							</strong>
+							<span className={styles.crossPanelSyncTooltipDescription}>
+								Sync crosshair and tooltip across all the dashboard panels
+							</span>
+							<a
+								href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
+								target="_blank"
+								rel="noopener noreferrer"
+								className={styles.crossPanelSyncTooltipDocLink}
+							>
+								Learn more
+								<ExternalLink size={12} />
+							</a>
+						</div>
+					}
+					placement="top"
+					mouseEnterDelay={0.5}
+				>
+					<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
+				</Tooltip>
+			</div>
+			<div className={styles.crossPanelSyncRow}>
+				<div className={styles.crossPanelSyncInfo}>
+					<Typography.Text className={styles.crossPanelSyncTitle}>
+						Sync Mode
+					</Typography.Text>
+					<Typography.Text className={styles.crossPanelSyncDescription}>
+						Sync crosshair and tooltip across all the dashboard panels
+					</Typography.Text>
+				</div>
+				<Radio.Group
+					value={cursorSyncMode}
+					onChange={(e): void => {
+						setCursorSyncMode(e.target.value as DashboardCursorSync);
+					}}
+				>
+					<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
+					<Radio.Button value={DashboardCursorSync.Crosshair}>
+						Crosshair
+					</Radio.Button>
+					<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
+				</Radio.Group>
+			</div>
+			{cursorSyncMode === DashboardCursorSync.Tooltip && (
+				<div className={styles.crossPanelSyncRow}>
+					<div className={styles.crossPanelSyncInfo}>
+						<Typography.Text className={styles.crossPanelSyncTitle}>
+							Synced Tooltip Series
+						</Typography.Text>
+						<Typography.Text className={styles.crossPanelSyncDescription}>
+							Show only series that intersect on group-by, or every series with the
+							matching ones highlighted
+						</Typography.Text>
+					</div>
+					<Radio.Group
+						value={syncTooltipFilterMode}
+						onChange={(e): void => {
+							void logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
+								path: getAbsoluteUrl(window.location.pathname),
+								mode: e.target.value,
+							});
+							setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
+						}}
+					>
+						<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
+						<Radio.Button value={SyncTooltipFilterMode.Filtered}>
+							Filtered
+						</Radio.Button>
+					</Radio.Group>
+				</div>
+			)}
+		</Col>
+	);
+}
+
+export default CrossPanelSync;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralForm/GeneralForm.tsx

@@ -0,0 +1,85 @@
+import { Dispatch, SetStateAction } from 'react';
+// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Select/Input to @signozhq/ui
+import { Col, Input, Select, Space } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
+
+import { Base64Icons } from '../utils';
+import styles from '../GeneralSettings.module.scss';
+
+const { Option } = Select;
+
+interface GeneralFormProps {
+	title: string;
+	description: string;
+	image: string;
+	tags: string[];
+	onTitleChange: (value: string) => void;
+	onDescriptionChange: (value: string) => void;
+	onImageChange: (value: string) => void;
+	onTagsChange: Dispatch<SetStateAction<string[]>>;
+}
+
+function GeneralForm({
+	title,
+	description,
+	image,
+	tags,
+	onTitleChange,
+	onDescriptionChange,
+	onImageChange,
+	onTagsChange,
+}: GeneralFormProps): JSX.Element {
+	return (
+		<Col className={styles.overviewSettings}>
+			<Space direction="vertical" className={styles.formSpace}>
+				<div>
+					<Typography className={styles.dashboardName}>Dashboard Name</Typography>
+					<section className={styles.nameIconInput}>
+						<Select
+							defaultActiveFirstOption
+							data-testid="dashboard-image"
+							suffixIcon={null}
+							rootClassName={styles.dashboardImageInput}
+							value={image}
+							onChange={onImageChange}
+						>
+							{Base64Icons.map((icon) => (
+								<Option value={icon} key={icon}>
+									<img
+										src={icon}
+										alt="dashboard-icon"
+										className={styles.listItemImage}
+									/>
+								</Option>
+							))}
+						</Select>
+						<Input
+							data-testid="dashboard-name"
+							className={styles.dashboardNameInput}
+							value={title}
+							onChange={(e): void => onTitleChange(e.target.value)}
+						/>
+					</section>
+				</div>
+
+				<div>
+					<Typography className={styles.dashboardName}>Description</Typography>
+					<Input.TextArea
+						data-testid="dashboard-desc"
+						rows={6}
+						value={description}
+						className={styles.descriptionTextArea}
+						onChange={(e): void => onDescriptionChange(e.target.value)}
+					/>
+				</div>
+				<div>
+					<Typography className={styles.dashboardName}>Tags</Typography>
+					<AddTags tags={tags} setTags={onTagsChange} />
+				</div>
+			</Space>
+		</Col>
+	);
+}
+
+export default GeneralForm;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/GeneralSettings.module.scss

@@ -0,0 +1,237 @@
+.overviewContent {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.overviewSettings {
+	border-radius: 3px;
+	border: 1px solid var(--l1-border);
+	padding: 16px !important;
+}
+
+.crossPanelSyncGroup {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}
+
+.formSpace {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 21px;
+}
+
+.crossPanelSyncSectionTitle {
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+}
+
+.crossPanelSyncSectionHeader {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	align-self: flex-start;
+}
+
+.crossPanelSyncInfoIcon {
+	cursor: help;
+	color: var(--l3-foreground);
+}
+
+.crossPanelSyncTooltipContent {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	max-width: 300px;
+}
+
+.crossPanelSyncTooltipTitle {
+	font-size: 14px;
+}
+
+.crossPanelSyncTooltipDescription {
+	font-size: 12px;
+	line-height: 1.5;
+}
+
+.crossPanelSyncTooltipDocLink {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	color: var(--primary-background);
+	font-size: 12px;
+	margin-top: 4px;
+}
+
+.crossPanelSyncRow {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	gap: 16px;
+
+	& + & {
+		padding-top: 16px;
+		border-top: 1px solid var(--l1-border);
+	}
+}
+
+.crossPanelSyncInfo {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.crossPanelSyncTitle {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.crossPanelSyncDescription {
+	color: var(--l3-foreground);
+	font-family: Inter;
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 20px;
+}
+
+.nameIconInput {
+	display: flex;
+}
+
+.dashboardImageInput {
+	:global(.ant-select-selector) {
+		display: flex;
+		width: 32px;
+		height: 32px;
+		padding: 6px;
+		justify-content: center;
+		align-items: center;
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l3-background) !important;
+
+		:global(.ant-select-selection-item) {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	&:global(.ant-select-dropdown) {
+		padding: 0px !important;
+	}
+
+	:global(.ant-select-item) {
+		padding: 0px;
+		align-items: center;
+		justify-content: center;
+
+		:global(.ant-select-item-option-content) {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+}
+
+.listItemImage {
+	height: 16px;
+	width: 16px;
+}
+
+.dashboardNameInput {
+	border-radius: 0px 2px 2px 0px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+}
+
+.dashboardName {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px;
+	margin-bottom: 0.5rem;
+}
+
+.descriptionTextArea {
+	padding: 6px 6px 6px 8px;
+	border-radius: 2px;
+	border: 1px solid var(--l1-border);
+	background: var(--l3-background);
+}
+
+.overviewSettingsFooter {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: -webkit-fill-available;
+	padding: 12px 16px 12px 0px;
+	position: fixed;
+	bottom: 0;
+	height: 32px;
+	border-top: 1px solid var(--l1-border);
+	background: var(--l2-background);
+}
+
+.unsaved {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.unsavedDot {
+	width: 6px;
+	height: 6px;
+	border-radius: 50px;
+	background: var(--primary-background);
+	box-shadow: 0px 0px 6px 0px
+		color-mix(in srgb, var(--primary-background) 40%, transparent);
+}
+
+.unsavedChanges {
+	color: var(--bg-robin-400);
+	font-family: Inter;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 24px;
+	letter-spacing: -0.07px;
+}
+
+.footerActionBtns {
+	display: flex;
+	gap: 8px;
+}
+
+.discardBtn {
+	display: flex;
+	align-items: center;
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}
+
+.saveBtn {
+	display: flex;
+	align-items: center;
+	margin: 0px !important;
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 24px;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/UnsavedChangesFooter/UnsavedChangesFooter.tsx

@@ -0,0 +1,59 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@signozhq/ui/button';
+import { Check, X } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from '../GeneralSettings.module.scss';
+
+interface UnsavedChangesFooterProps {
+	count: number;
+	isSaving: boolean;
+	onDiscard: () => void;
+	onSave: () => void;
+}
+
+function UnsavedChangesFooter({
+	count,
+	isSaving,
+	onDiscard,
+	onSave,
+}: UnsavedChangesFooterProps): JSX.Element {
+	const { t } = useTranslation('common');
+
+	return (
+		<div className={styles.overviewSettingsFooter}>
+			<div className={styles.unsaved}>
+				<div className={styles.unsavedDot} />
+				<Typography.Text className={styles.unsavedChanges}>
+					{count} unsaved change
+					{count > 1 && 's'}
+				</Typography.Text>
+			</div>
+			<div className={styles.footerActionBtns}>
+				<Button
+					variant="ghost"
+					disabled={isSaving}
+					prefix={<X size={14} />}
+					onClick={onDiscard}
+					className={styles.discardBtn}
+				>
+					Discard
+				</Button>
+				<Button
+					variant="solid"
+					color="primary"
+					disabled={isSaving}
+					loading={isSaving}
+					prefix={<Check size={14} />}
+					testId="save-dashboard-config"
+					onClick={onSave}
+					className={styles.saveBtn}
+				>
+					{t('save')}
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default UnsavedChangesFooter;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/index.tsx

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type {
+	DashboardtypesGettableDashboardV2DTO,
+	DashboardtypesJSONPatchOperationDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { toast } from '@signozhq/ui/sonner';
+import { isEqual } from 'lodash-es';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { useDashboardStore } from '../../store/useDashboardStore';
+import CrossPanelSync from './CrossPanelSync/CrossPanelSync';
+import GeneralForm from './GeneralForm/GeneralForm';
+import UnsavedChangesFooter from './UnsavedChangesFooter/UnsavedChangesFooter';
+import { Base64Icons, stringsToTags, tagsToStrings } from './utils';
+import styles from './GeneralSettings.module.scss';
+
+interface GeneralSettingsProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+function GeneralSettings({ dashboard }: GeneralSettingsProps): JSX.Element {
+	const id = dashboard.id;
+
+	const refetch = useDashboardStore((s) => s.refetch);
+
+	const title = dashboard.spec?.display?.name ?? '';
+	const description = dashboard.spec?.display?.description ?? '';
+	const image = dashboard.image || Base64Icons[0];
+	const tagsAsStrings = useMemo(
+		() => tagsToStrings(dashboard.tags ?? []),
+		[dashboard.tags],
+	);
+
+	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
+	const [updatedTags, setUpdatedTags] = useState<string[]>(tagsAsStrings);
+	const [updatedDescription, setUpdatedDescription] =
+		useState<string>(description);
+	const [updatedImage, setUpdatedImage] = useState<string>(image);
+	const [isSaving, setIsSaving] = useState<boolean>(false);
+	const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] =
+		useState<number>(0);
+
+	const { showErrorModal } = useErrorModal();
+
+	// Sync state when dashboard refetches after a save
+	useEffect(() => {
+		setUpdatedTitle(title);
+		setUpdatedDescription(description);
+		setUpdatedImage(image);
+		setUpdatedTags(tagsAsStrings);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dashboard.updatedAt]);
+
+	const buildPatch = useCallback((): DashboardtypesJSONPatchOperationDTO[] => {
+		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
+		const replace = (
+			path: string,
+			value: unknown,
+		): DashboardtypesJSONPatchOperationDTO => ({
+			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
+			path,
+			value,
+		});
+
+		if (updatedTitle !== title) {
+			ops.push(replace('/spec/display/name', updatedTitle));
+		}
+		if (updatedDescription !== description) {
+			ops.push(replace('/spec/display/description', updatedDescription));
+		}
+		if (updatedImage !== image) {
+			ops.push(replace('/image', updatedImage));
+		}
+		if (!isEqual(updatedTags, tagsAsStrings)) {
+			ops.push(replace('/tags', stringsToTags(updatedTags)));
+		}
+		return ops;
+	}, [
+		updatedTitle,
+		title,
+		updatedDescription,
+		description,
+		updatedImage,
+		image,
+		updatedTags,
+		tagsAsStrings,
+	]);
+
+	const onSaveHandler = useCallback(async (): Promise<void> => {
+		if (!id) {
+			return;
+		}
+		const ops = buildPatch();
+		if (ops.length === 0) {
+			return;
+		}
+
+		try {
+			setIsSaving(true);
+			await patchDashboardV2({ id }, ops);
+			toast.success('Dashboard updated');
+			refetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [id, buildPatch, refetch, showErrorModal]);
+
+	useEffect(() => {
+		let n = 0;
+		const initialValues = [title, description, tagsAsStrings, image];
+		const updatedValues = [
+			updatedTitle,
+			updatedDescription,
+			updatedTags,
+			updatedImage,
+		];
+		initialValues.forEach((val, index) => {
+			if (!isEqual(val, updatedValues[index])) {
+				n += 1;
+			}
+		});
+		setNumberOfUnsavedChanges(n);
+	}, [
+		description,
+		image,
+		tagsAsStrings,
+		title,
+		updatedDescription,
+		updatedImage,
+		updatedTags,
+		updatedTitle,
+	]);
+
+	const discardHandler = useCallback((): void => {
+		setUpdatedTitle(title);
+		setUpdatedImage(image);
+		setUpdatedTags(tagsAsStrings);
+		setUpdatedDescription(description);
+	}, [title, image, tagsAsStrings, description]);
+
+	return (
+		<div className={styles.overviewContent}>
+			<GeneralForm
+				title={updatedTitle}
+				description={updatedDescription}
+				image={updatedImage}
+				tags={updatedTags}
+				onTitleChange={setUpdatedTitle}
+				onDescriptionChange={setUpdatedDescription}
+				onImageChange={setUpdatedImage}
+				onTagsChange={setUpdatedTags}
+			/>
+			<CrossPanelSync dashboardId={id} />
+			{numberOfUnsavedChanges > 0 && (
+				<UnsavedChangesFooter
+					count={numberOfUnsavedChanges}
+					isSaving={isSaving}
+					onDiscard={discardHandler}
+					onSave={onSaveHandler}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default GeneralSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/General/utils.ts

@@ -0,0 +1,24 @@
+import type { TagtypesPostableTagDTO } from 'api/generated/services/sigNoz.schemas';
+
+export { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+
+// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
+// collapsed back to just `x` for display.
+export function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
+	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
+}
+
+export function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {
+	return tagStrings
+		.map((s) => {
+			const trimmed = s.trim();
+			const idx = trimmed.indexOf(':');
+			if (idx === -1) {
+				return { key: trimmed, value: trimmed };
+			}
+			const key = trimmed.slice(0, idx).trim();
+			const value = trimmed.slice(idx + 1).trim();
+			return { key, value: value || key };
+		})
+		.filter((t) => t.key.length > 0);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/index.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+import { Braces, Globe, Table } from '@signozhq/icons';
+import { Tabs } from '@signozhq/ui/tabs';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+
+import GeneralSettings from './General';
+import { SettingsTabPlaceholder } from './utils';
+
+interface DashboardSettingsProps {
+	dashboard: DashboardtypesGettableDashboardV2DTO;
+}
+
+function DashboardSettings({ dashboard }: DashboardSettingsProps): JSX.Element {
+	const items = useMemo(
+		() => [
+			{
+				key: 'general',
+				label: 'General',
+				prefixIcon: <Table size={14} />,
+				children: <GeneralSettings dashboard={dashboard} />,
+			},
+			{
+				key: 'variables',
+				label: 'Variables',
+				prefixIcon: <Braces size={14} />,
+				children: (
+					<SettingsTabPlaceholder message="V2 dashboard variables coming next." />
+				),
+			},
+			{
+				key: 'public-dashboard',
+				label: 'Publish',
+				prefixIcon: <Globe size={14} />,
+				children: (
+					<SettingsTabPlaceholder message="V2 public dashboard publishing coming next." />
+				),
+			},
+		],
+		[dashboard],
+	);
+
+	return <Tabs defaultValue="general" items={items} />;
+}
+
+export default DashboardSettings;

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/utils.tsx

@@ -0,0 +1,23 @@
+import { Empty } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './DashboardSettings.module.scss';
+
+/**
+ * TEMPORARY: stand-in for the not-yet-built Variables / Publish settings tabs.
+ * Will be cleaned up later once those tabs ship their real content.
+ */
+export function SettingsTabPlaceholder({
+	message,
+}: {
+	message: string;
+}): JSX.Element {
+	return (
+		<div className={styles.placeholder}>
+			<Empty
+				image={Empty.PRESENTED_IMAGE_SIMPLE}
+				description={<Typography.Text>{message}</Typography.Text>}
+			/>
+		</div>
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -6,9 +6,13 @@ import { EllipsisVertical } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 
+import type { DashboardSection } from '../../utils';
+import type { DeletePanelArgs } from './hooks/useDeletePanel';
+import type { MovePanelArgs } from './hooks/useMovePanelToSection';
+import PanelActionsMenu from './PanelActionsMenu/PanelActionsMenu';
 import styles from './Panel.module.scss';
 
-interface Props {
+interface PanelProps {
 	panel: DashboardtypesPanelDTO | undefined;
 	panelId: string;
 	/**
@@ -17,9 +21,22 @@ interface Props {
 	 * data. Currently unused on purpose.
 	 */
 	isVisible?: boolean;
+	/** Section actions — present only in editable sectioned mode. */
+	currentLayoutIndex?: number;
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
-function Panel({ panel, panelId, isVisible }: Props): JSX.Element {
+function Panel({
+	panel,
+	panelId,
+	isVisible,
+	currentLayoutIndex,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: PanelProps): JSX.Element {
 	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
 	const description = panel?.spec?.display?.description;
 	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
@@ -48,7 +65,17 @@ function Panel({ panel, panelId, isVisible }: Props): JSX.Element {
 					</Typography.Text>
 					<Badge className={styles.badge}>{kind}</Badge>
 				</div>
-				<EllipsisVertical size={14} />
+				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
+					<PanelActionsMenu
+						panelId={panelId}
+						currentLayoutIndex={currentLayoutIndex}
+						sections={sections ?? []}
+						onMovePanel={onMovePanel}
+						onDeletePanel={onDeletePanel}
+					/>
+				) : (
+					<EllipsisVertical size={14} />
+				)}
 			</div>
 
 			<div className={styles.body}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.module.scss

@@ -0,0 +1,16 @@
+.trigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px;
+	background: transparent;
+	border: none;
+	border-radius: 2px;
+	color: var(--bg-vanilla-400, #8993ae);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--bg-vanilla-100, #fff);
+		background: var(--bg-slate-400, #1d212d);
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx

@@ -0,0 +1,98 @@
+import { useMemo } from 'react';
+import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import type { DashboardSection } from '../../../utils';
+import type { DeletePanelArgs } from '../hooks/useDeletePanel';
+import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
+import styles from './PanelActionsMenu.module.scss';
+
+interface PanelActionsMenuProps {
+	panelId: string;
+	currentLayoutIndex: number;
+	sections: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
+}
+
+function PanelActionsMenu({
+	panelId,
+	currentLayoutIndex,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: PanelActionsMenuProps): JSX.Element {
+	const items = useMemo<MenuItem[]>(() => {
+		const result: MenuItem[] = [];
+
+		if (onMovePanel) {
+			const targets = sections.filter(
+				(s) => s.title && s.layoutIndex !== currentLayoutIndex,
+			);
+			if (targets.length === 0) {
+				result.push({
+					key: 'move',
+					label: 'Move to section',
+					icon: <FolderInput size={14} />,
+					disabled: true,
+				});
+			} else {
+				result.push({
+					key: 'move',
+					label: 'Move to section',
+					icon: <FolderInput size={14} />,
+					children: targets.map((s) => ({
+						key: `move-${s.layoutIndex}`,
+						label: s.title,
+						onClick: (): void =>
+							onMovePanel({
+								panelId,
+								fromLayoutIndex: currentLayoutIndex,
+								toLayoutIndex: s.layoutIndex,
+							}),
+					})),
+				});
+			}
+		}
+
+		if (onDeletePanel) {
+			if (result.length > 0) {
+				result.push({ type: 'divider' });
+			}
+			result.push({
+				key: 'delete-panel',
+				danger: true,
+				icon: <Trash2 size={14} />,
+				label: 'Delete panel',
+				onClick: (): void =>
+					onDeletePanel({ panelId, layoutIndex: currentLayoutIndex }),
+			});
+		}
+
+		return result;
+	}, [sections, currentLayoutIndex, panelId, onMovePanel, onDeletePanel]);
+
+	return (
+		<DropdownMenuSimple menu={{ items }}>
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				className={styles.trigger}
+				aria-label="Panel actions"
+				data-testid={`panel-actions-${panelId}`}
+				// Stop pointer/mouse down from reaching the RGL drag handle this
+				// button lives inside, so opening the menu never starts a panel drag.
+				onPointerDown={(e): void => e.stopPropagation()}
+				onMouseDown={(e): void => e.stopPropagation()}
+				onClick={(e): void => e.stopPropagation()}
+			>
+				<EllipsisVertical size={14} />
+			</Button>
+		</DropdownMenuSimple>
+	);
+}
+
+export default PanelActionsMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -0,0 +1,22 @@
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 8px;
+}
+
+.typeButton {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px;
+	background: var(--bg-ink-400, #0b0c0e);
+	border: 1px solid var(--bg-slate-400, #1d212d);
+	border-radius: 4px;
+	color: var(--bg-vanilla-100, #fff);
+	cursor: pointer;
+	text-align: left;
+
+	&:hover {
+		border-color: var(--bg-robin-500);
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -0,0 +1,84 @@
+import { Modal } from 'antd';
+import {
+	BarChart,
+	ChartLine,
+	ChartPie,
+	Hash,
+	List,
+	Table,
+} from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+
+import styles from './PanelTypeSelectionModal.module.scss';
+
+interface PanelType {
+	pluginKind: string;
+	label: string;
+	icon: JSX.Element;
+}
+
+const PANEL_TYPES: PanelType[] = [
+	{
+		pluginKind: 'signoz/TimeSeriesPanel',
+		label: 'Time Series',
+		icon: <ChartLine size={16} />,
+	},
+	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
+	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
+	{
+		pluginKind: 'signoz/BarChartPanel',
+		label: 'Bar Chart',
+		icon: <BarChart size={16} />,
+	},
+	{
+		pluginKind: 'signoz/PieChartPanel',
+		label: 'Pie Chart',
+		icon: <ChartPie size={16} />,
+	},
+	{
+		pluginKind: 'signoz/HistogramPanel',
+		label: 'Histogram',
+		icon: <BarChart size={16} />,
+	},
+	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
+];
+
+interface PanelTypeSelectionModalProps {
+	open: boolean;
+	onClose: () => void;
+	onSelect: (pluginKind: string) => void;
+}
+
+function PanelTypeSelectionModal({
+	open,
+	onClose,
+	onSelect,
+}: PanelTypeSelectionModalProps): JSX.Element {
+	return (
+		<Modal
+			open={open}
+			title="Select a panel type"
+			onCancel={onClose}
+			footer={null}
+			destroyOnClose
+		>
+			<div className={styles.grid}>
+				{PANEL_TYPES.map((type) => (
+					<Button
+						key={type.pluginKind}
+						type="button"
+						variant="ghost"
+						className={styles.typeButton}
+						data-testid={`panel-type-${type.pluginKind}`}
+						onClick={(): void => onSelect(type.pluginKind)}
+					>
+						{type.icon}
+						{type.label}
+					</Button>
+				))}
+			</div>
+		</Modal>
+	);
+}
+
+export default PanelTypeSelectionModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useAddPanelToSection.ts

@@ -0,0 +1,76 @@
+import { useCallback } from 'react';
+import { v4 as uuid } from 'uuid';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import {
+	addPanelToSectionOps,
+	createDefaultPanel,
+	panelRef,
+} from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+export interface AddPanelArgs {
+	layoutIndex: number;
+	pluginKind: string;
+}
+
+/**
+ * Creates a new panel and places its item ref at the bottom of the target
+ * section, as one atomic patch. Structure-only: the panel is a valid minimal
+ * placeholder (its query is filled in once the panel editor lands).
+ */
+export function useAddPanelToSection({
+	sections,
+}: Params): (args: AddPanelArgs) => Promise<void> {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+
+	return useCallback(
+		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
+			const target = sections.find((s) => s.layoutIndex === layoutIndex);
+			if (!target) {
+				return;
+			}
+
+			const panelId = uuid();
+			const nextY = target.items.reduce(
+				(max, i) => Math.max(max, i.y + i.height),
+				0,
+			);
+
+			try {
+				await patchDashboardV2(
+					{ id: dashboardId },
+					addPanelToSectionOps({
+						panelId,
+						panel: createDefaultPanel(pluginKind),
+						layoutIndex,
+						item: {
+							x: 0,
+							y: nextY,
+							width: 6,
+							height: 6,
+							content: { $ref: panelRef(panelId) },
+						},
+					}),
+				);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDeletePanel.ts

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { removePanelOp, replaceSectionItemsOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+export interface DeletePanelArgs {
+	panelId: string;
+	layoutIndex: number;
+}
+
+/**
+ * Removes a panel: drops its item ref from the section's items and deletes the
+ * panel from `spec.panels`, as one atomic patch.
+ */
+export function useDeletePanel({
+	sections,
+}: Params): (args: DeletePanelArgs) => Promise<void> {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+
+	return useCallback(
+		async ({ panelId, layoutIndex }: DeletePanelArgs): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
+			const section = sections.find((s) => s.layoutIndex === layoutIndex);
+			if (!section) {
+				return;
+			}
+
+			const nextItems = section.items.filter((i) => i.id !== panelId);
+			try {
+				await patchDashboardV2({ id: dashboardId }, [
+					replaceSectionItemsOp(layoutIndex, nextItems),
+					removePanelOp(panelId),
+				]);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useMovePanelToSection.ts

@@ -0,0 +1,79 @@
+import { useCallback } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { movePanelBetweenSectionsOps } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+export interface MovePanelArgs {
+	panelId: string;
+	fromLayoutIndex: number;
+	toLayoutIndex: number;
+}
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+/**
+ * Relocates a panel's item ref from one section to another. The panel itself
+ * stays in `spec.panels`; only the grid item moves, dropped into a free row at
+ * the bottom of the target section. Persisted as one atomic patch.
+ */
+export function useMovePanelToSection({
+	sections,
+}: Params): (args: MovePanelArgs) => Promise<void> {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const { showErrorModal } = useErrorModal();
+
+	return useCallback(
+		async ({
+			panelId,
+			fromLayoutIndex,
+			toLayoutIndex,
+		}: MovePanelArgs): Promise<void> => {
+			if (!dashboardId || fromLayoutIndex === toLayoutIndex) {
+				return;
+			}
+
+			const source = sections.find((s) => s.layoutIndex === fromLayoutIndex);
+			const target = sections.find((s) => s.layoutIndex === toLayoutIndex);
+			if (!source || !target) {
+				return;
+			}
+
+			const moved = source.items.find((i) => i.id === panelId);
+			if (!moved) {
+				return;
+			}
+
+			const sourceItems = source.items.filter((i) => i.id !== panelId);
+			// Place at a fresh row at the bottom of the target section.
+			const nextY = target.items.reduce(
+				(max, i) => Math.max(max, i.y + i.height),
+				0,
+			);
+			const targetItems = [...target.items, { ...moved, x: 0, y: nextY }];
+
+			try {
+				await patchDashboardV2(
+					{ id: dashboardId },
+					movePanelBetweenSectionsOps({
+						sourceIndex: fromLayoutIndex,
+						sourceItems,
+						targetIndex: toLayoutIndex,
+						targetItems,
+					}),
+				);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.module.scss

@@ -0,0 +1,17 @@
+.addButton {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	margin-top: 8px;
+	padding: 8px 12px;
+	background: transparent;
+	border: 1px dashed var(--bg-slate-400, #1d212d);
+	border-radius: 4px;
+	color: var(--bg-vanilla-400, #8993ae);
+	cursor: pointer;
+
+	&:hover {
+		border-color: var(--bg-robin-500);
+		color: var(--bg-vanilla-100, #fff);
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.tsx

@@ -0,0 +1,69 @@
+import { useCallback, useState } from 'react';
+import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { DashboardSection } from '../../../utils';
+import { useAddSection } from '../hooks/useAddSection';
+import { useFirstSectionMigration } from '../hooks/useFirstSectionMigration';
+import FirstSectionMigrationModal from '../FirstSectionMigrationModal';
+import styles from './AddSectionControl.module.scss';
+
+const DEFAULT_SECTION_TITLE = 'New section';
+
+interface AddSectionControlProps {
+	sections: DashboardSection[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+	isSectioned: boolean;
+}
+
+function AddSectionControl({
+	sections,
+	layouts,
+	isSectioned,
+}: AddSectionControlProps): JSX.Element {
+	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
+	const { addSection } = useAddSection({ layouts });
+	const { migrate, isSaving } = useFirstSectionMigration({ sections });
+
+	// Free-flowing dashboard with existing panels → must migrate before sections
+	// can coexist (every panel must belong to a section once any exists).
+	const needsMigration =
+		!isSectioned && sections.some((s) => s.items.length > 0);
+
+	const handleClick = useCallback((): void => {
+		if (needsMigration) {
+			setIsMigrationOpen(true);
+			return;
+		}
+		void addSection(DEFAULT_SECTION_TITLE);
+	}, [needsMigration, addSection]);
+
+	const handleConfirmMigration = useCallback(async (): Promise<void> => {
+		await migrate(DEFAULT_SECTION_TITLE);
+		setIsMigrationOpen(false);
+	}, [migrate]);
+
+	return (
+		<>
+			<Button
+				type="button"
+				variant="ghost"
+				className={styles.addButton}
+				onClick={handleClick}
+				data-testid="add-section"
+			>
+				<Plus size={14} />
+				Add section
+			</Button>
+			<FirstSectionMigrationModal
+				open={isMigrationOpen}
+				isSaving={isSaving}
+				onClose={(): void => setIsMigrationOpen(false)}
+				onConfirm={handleConfirmMigration}
+			/>
+		</>
+	);
+}
+
+export default AddSectionControl;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/FirstSectionMigrationModal.tsx

@@ -0,0 +1,41 @@
+import { Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+interface FirstSectionMigrationModalProps {
+	open: boolean;
+	isSaving: boolean;
+	onClose: () => void;
+	onConfirm: () => void;
+}
+
+/**
+ * Shown when the user adds the first section to a free-flowing dashboard that
+ * already has panels. Confirms grouping the existing panels into a section
+ * before proceeding.
+ */
+function FirstSectionMigrationModal({
+	open,
+	isSaving,
+	onClose,
+	onConfirm,
+}: FirstSectionMigrationModalProps): JSX.Element {
+	return (
+		<Modal
+			open={open}
+			title="Group panels into sections?"
+			onCancel={onClose}
+			onOk={onConfirm}
+			okText="Continue"
+			okButtonProps={{ disabled: isSaving, 'data-testid': 'confirm-migration' }}
+			destroyOnClose
+		>
+			<Typography.Text>
+				This dashboard&apos;s panels are currently free-flowing. Adding a section
+				will move the existing panels into their own section, and a new empty
+				section will be added below. You can rename sections afterwards.
+			</Typography.Text>
+		</Modal>
+	);
+}
+
+export default FirstSectionMigrationModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/RenameSectionModal.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import { Modal } from 'antd';
+import { Input } from '@signozhq/ui/input';
+
+interface RenameSectionModalProps {
+	open: boolean;
+	initialValue: string;
+	isSaving: boolean;
+	onClose: () => void;
+	onSubmit: (title: string) => void;
+}
+
+function RenameSectionModal({
+	open,
+	initialValue,
+	isSaving,
+	onClose,
+	onSubmit,
+}: RenameSectionModalProps): JSX.Element {
+	const [value, setValue] = useState<string>(initialValue);
+
+	// Reseed the field each time the modal opens.
+	useEffect(() => {
+		if (open) {
+			setValue(initialValue);
+		}
+	}, [open, initialValue]);
+
+	const submit = (): void => {
+		const trimmed = value.trim();
+		if (trimmed) {
+			onSubmit(trimmed);
+		}
+	};
+
+	return (
+		<Modal
+			open={open}
+			title="Rename section"
+			onCancel={onClose}
+			onOk={submit}
+			okText="Rename"
+			okButtonProps={{ disabled: isSaving || !value.trim() }}
+			destroyOnClose
+		>
+			<Input
+				testId="rename-section-input"
+				autoFocus
+				value={value}
+				maxLength={120}
+				placeholder="Section name"
+				onChange={(e): void => setValue(e.target.value)}
+				onKeyDown={(e): void => {
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						submit();
+					}
+				}}
+			/>
+		</Modal>
+	);
+}
+
+export default RenameSectionModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -1,17 +1,45 @@
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { Modal } from 'antd';
 
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 
 import type { DashboardSection } from '../../../utils';
+import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
+import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
+import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
+import PanelTypeSelectionModal from '../../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import { useDeleteSection } from '../hooks/useDeleteSection';
+import { useRenameSection } from '../hooks/useRenameSection';
+import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
+import RenameSectionModal from '../RenameSectionModal';
 import SectionGrid from '../SectionGrid/SectionGrid';
-import SectionHeader from '../SectionHeader/SectionHeader';
+import SectionHeader, {
+	type SectionDragHandle,
+} from '../SectionHeader/SectionHeader';
 import styles from './Section.module.scss';
 
-interface Props {
+interface SectionProps {
 	section: DashboardSection;
+	/** Adds a panel to this section; present only in editable sectioned mode. */
+	onAddPanel?: (args: AddPanelArgs) => void;
+	/** All sections + per-panel handlers, for the panel "Move to section" / delete actions. */
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
+	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
+	dragHandle?: SectionDragHandle;
 }
 
-function Section({ section }: Props): JSX.Element {
+function Section({
+	section,
+	onAddPanel,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+	dragHandle,
+}: SectionProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
 	// true once the section scrolls into (or near) the viewport.
@@ -19,10 +47,54 @@ function Section({ section }: Props): JSX.Element {
 		rootMargin: '200px',
 	});
 
-	const [open, setOpen] = useState<boolean>(section.open);
-	const toggle = (): void => setOpen((prev) => !prev);
+	const { open, toggle } = useToggleSectionCollapse({ sectionId: section.id });
 
-	const grid = <SectionGrid items={section.items} isVisible={isVisible} />;
+	const [isRenaming, setIsRenaming] = useState(false);
+	const { rename, isSaving } = useRenameSection({
+		layoutIndex: section.layoutIndex,
+	});
+
+	const handleRenameSubmit = useCallback(
+		async (title: string): Promise<void> => {
+			const ok = await rename(title);
+			if (ok) {
+				setIsRenaming(false);
+			}
+		},
+		[rename],
+	);
+
+	const [isAddingPanel, setIsAddingPanel] = useState(false);
+	const handleSelectPanelType = useCallback(
+		(pluginKind: string): void => {
+			onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
+			setIsAddingPanel(false);
+		},
+		[onAddPanel, section.layoutIndex],
+	);
+
+	const { deleteSection } = useDeleteSection({ section });
+	const confirmDeleteSection = useCallback((): void => {
+		Modal.confirm({
+			title: `Delete section "${section.title ?? ''}"?`,
+			content: 'Panels in this section will be removed.',
+			okText: 'Delete',
+			okButtonProps: { danger: true },
+			centered: true,
+			onOk: () => deleteSection(),
+		});
+	}, [section.title, deleteSection]);
+
+	const grid = (
+		<SectionGrid
+			items={section.items}
+			layoutIndex={section.layoutIndex}
+			isVisible={isVisible}
+			sections={sections}
+			onMovePanel={onMovePanel}
+			onDeletePanel={onDeletePanel}
+		/>
+	);
 
 	if (!section.title) {
 		// Untitled section — just the grid (no header chrome), but still observed
@@ -51,8 +123,26 @@ function Section({ section }: Props): JSX.Element {
 				open={open}
 				onToggle={toggle}
 				repeatVariable={section.repeatVariable}
+				dragHandle={dragHandle}
+				onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
+				onAddPanel={
+					isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
+				}
+				onDeleteSection={isEditable ? confirmDeleteSection : undefined}
 			/>
 			{open ? grid : null}
+			<RenameSectionModal
+				open={isRenaming}
+				initialValue={section.title}
+				isSaving={isSaving}
+				onClose={(): void => setIsRenaming(false)}
+				onSubmit={handleRenameSubmit}
+			/>
+			<PanelTypeSelectionModal
+				open={isAddingPanel}
+				onClose={(): void => setIsAddingPanel(false)}
+				onSelect={handleSelectPanelType}
+			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.module.scss

@@ -0,0 +1,16 @@
+.trigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px;
+	background: transparent;
+	border: none;
+	border-radius: 2px;
+	color: var(--bg-vanilla-400, #8993ae);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--bg-vanilla-100, #fff);
+		background: var(--bg-slate-400, #1d212d);
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import type { MenuItem } from '@signozhq/ui/dropdown-menu';
+
+import styles from './SectionActionsMenu.module.scss';
+
+interface SectionActionsMenuProps {
+	sectionId: string;
+	onAddPanel?: () => void;
+	onRename?: () => void;
+	onDeleteSection?: () => void;
+}
+
+function SectionActionsMenu({
+	sectionId,
+	onAddPanel,
+	onRename,
+	onDeleteSection,
+}: SectionActionsMenuProps): JSX.Element {
+	const items = useMemo<MenuItem[]>(() => {
+		const result: MenuItem[] = [];
+		if (onAddPanel) {
+			result.push({
+				key: 'add-panel',
+				icon: <Plus size={14} />,
+				label: 'Add panel',
+				onClick: onAddPanel,
+			});
+		}
+		if (onRename) {
+			result.push({
+				key: 'rename',
+				icon: <PenLine size={14} />,
+				label: 'Rename section',
+				onClick: onRename,
+			});
+		}
+		if (onDeleteSection) {
+			result.push(
+				{ type: 'divider' },
+				{
+					key: 'delete-section',
+					danger: true,
+					icon: <Trash2 size={14} />,
+					label: 'Delete section',
+					onClick: onDeleteSection,
+				},
+			);
+		}
+		return result;
+	}, [onAddPanel, onRename, onDeleteSection]);
+
+	return (
+		<DropdownMenuSimple menu={{ items }}>
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				className={styles.trigger}
+				aria-label="Section actions"
+				data-testid={`dashboard-section-actions-${sectionId}`}
+			>
+				<EllipsisVertical size={14} />
+			</Button>
+		</DropdownMenuSimple>
+	);
+}
+
+export default SectionActionsMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.module.scss

@@ -0,0 +1,7 @@
+.preview {
+	border: 1px solid var(--bg-robin-500);
+	border-radius: 4px;
+	background: var(--bg-ink-400, #0b0c0e);
+	box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
+	cursor: grabbing;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.tsx

@@ -0,0 +1,32 @@
+import type { DashboardSection } from '../../../utils';
+import SectionHeader from '../SectionHeader/SectionHeader';
+import styles from './SectionDragPreview.module.scss';
+
+interface SectionDragPreviewProps {
+	section: DashboardSection;
+}
+
+/**
+ * Lightweight preview rendered inside the DragOverlay while a section is being
+ * dragged. Deliberately header-only (no react-grid-layout) so the overlay is
+ * cheap and never triggers RGL width re-measurement.
+ */
+function SectionDragPreview({ section }: SectionDragPreviewProps): JSX.Element {
+	const panelCount = section.items.length;
+	const title = `${section.title ?? ''} · ${panelCount} ${
+		panelCount === 1 ? 'panel' : 'panels'
+	}`;
+
+	return (
+		<div className={styles.preview}>
+			<SectionHeader
+				sectionId={`${section.id}-preview`}
+				title={title}
+				open={false}
+				onToggle={(): void => undefined}
+			/>
+		</div>
+	);
+}
+
+export default SectionDragPreview;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.tsx

@@ -2,18 +2,35 @@ import { useMemo } from 'react';
 import GridLayout, { WidthProvider, type Layout } from 'react-grid-layout';
 
 import type { DashboardSection } from '../../../utils';
+import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
+import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
 import Panel from '../../Panel/Panel';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import { usePersistLayout } from '../hooks/usePersistLayout';
 import styles from './SectionGrid.module.scss';
 
 const ResponsiveGridLayout = WidthProvider(GridLayout);
 
-interface Props {
+interface SectionGridProps {
 	items: DashboardSection['items'];
+	layoutIndex: number;
 	/** Forwarded to panels — true when the parent section is in the viewport. */
 	isVisible?: boolean;
+	/** All sections + handlers — present only in editable sectioned mode (panel "Move to section" / delete). */
+	sections?: DashboardSection[];
+	onMovePanel?: (args: MovePanelArgs) => void;
+	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
-function SectionGrid({ items, isVisible }: Props): JSX.Element {
+function SectionGrid({
+	items,
+	layoutIndex,
+	isVisible,
+	sections,
+	onMovePanel,
+	onDeletePanel,
+}: SectionGridProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
 	const rglLayout = useMemo<Layout[]>(
 		() =>
 			items.map((item) => ({
@@ -26,6 +43,8 @@ function SectionGrid({ items, isVisible }: Props): JSX.Element {
 		[items],
 	);
 
+	const { handleLayoutChange } = usePersistLayout({ layoutIndex, items });
+
 	return (
 		<ResponsiveGridLayout
 			className={styles.grid}
@@ -34,13 +53,24 @@ function SectionGrid({ items, isVisible }: Props): JSX.Element {
 			autoSize
 			useCSSTransforms
 			layout={rglLayout}
-			isDraggable={false}
-			isResizable={false}
+			draggableHandle=".panel-drag-handle"
+			isDraggable={isEditable}
+			isResizable={isEditable}
+			onDragStop={handleLayoutChange}
+			onResizeStop={handleLayoutChange}
 			margin={[8, 8]}
 		>
 			{items.map((item) => (
 				<div key={item.id}>
-					<Panel panel={item.panel} panelId={item.id} isVisible={isVisible} />
+					<Panel
+						panel={item.panel}
+						panelId={item.id}
+						isVisible={isVisible}
+						currentLayoutIndex={layoutIndex}
+						sections={isEditable ? sections : undefined}
+						onMovePanel={isEditable ? onMovePanel : undefined}
+						onDeletePanel={isEditable ? onDeletePanel : undefined}
+					/>
 				</div>
 			))}
 		</ResponsiveGridLayout>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx

@@ -1,15 +1,30 @@
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import type { DraggableAttributes } from '@dnd-kit/core';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import { ChevronDown, ChevronRight, GripVertical } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
+import SectionActionsMenu from '../SectionActionsMenu/SectionActionsMenu';
 import styles from './SectionHeader.module.scss';
 
-interface Props {
+export interface SectionDragHandle {
+	attributes: DraggableAttributes;
+	listeners: SyntheticListenerMap | undefined;
+	setActivatorNodeRef: (element: HTMLElement | null) => void;
+}
+
+interface SectionHeaderProps {
 	sectionId: string;
 	title: string;
 	open: boolean;
 	onToggle: () => void;
 	repeatVariable?: string;
+	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
+	dragHandle?: SectionDragHandle;
+	onRename?: () => void;
+	onAddPanel?: () => void;
+	onDeleteSection?: () => void;
 }
 
 function SectionHeader({
@@ -18,11 +33,32 @@ function SectionHeader({
 	open,
 	onToggle,
 	repeatVariable,
-}: Props): JSX.Element {
+	dragHandle,
+	onRename,
+	onAddPanel,
+	onDeleteSection,
+}: SectionHeaderProps): JSX.Element {
+	const hasActions = !!(onAddPanel || onRename || onDeleteSection);
 	return (
 		<div className={cx(styles.header, { [styles.headerOpen]: open })}>
-			<button
+			{dragHandle ? (
+				<Button
+					type="button"
+					variant="ghost"
+					size="icon"
+					className={styles.dragHandle}
+					ref={dragHandle.setActivatorNodeRef}
+					aria-label="Drag to reorder section"
+					data-testid={`dashboard-section-drag-${sectionId}`}
+					{...dragHandle.attributes}
+					{...dragHandle.listeners}
+				>
+					<GripVertical size={14} />
+				</Button>
+			) : null}
+			<Button
 				type="button"
+				variant="ghost"
 				className={styles.toggle}
 				onClick={onToggle}
 				data-testid={`dashboard-section-toggle-${sectionId}`}
@@ -34,7 +70,15 @@ function SectionHeader({
 						(repeats per ${repeatVariable})
 					</Typography.Text>
 				) : null}
-			</button>
+			</Button>
+			{hasActions ? (
+				<SectionActionsMenu
+					sectionId={sectionId}
+					onAddPanel={onAddPanel}
+					onRename={onRename}
+					onDeleteSection={onDeleteSection}
+				/>
+			) : null}
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionList.tsx

@@ -0,0 +1,102 @@
+import { useMemo } from 'react';
+import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
+import {
+	restrictToParentElement,
+	restrictToVerticalAxis,
+} from '@dnd-kit/modifiers';
+import {
+	SortableContext,
+	verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { DashboardSection } from '../../utils';
+import { useAddPanelToSection } from '../Panel/hooks/useAddPanelToSection';
+import { useDeletePanel } from '../Panel/hooks/useDeletePanel';
+import { useMovePanelToSection } from '../Panel/hooks/useMovePanelToSection';
+import { useDashboardStore } from '../../store/useDashboardStore';
+import { useSectionDragReorder } from './hooks/useSectionDragReorder';
+import Section from './Section/Section';
+import SectionDragPreview from './SectionDragPreview/SectionDragPreview';
+import SortableSection from './SortableSection';
+
+interface SectionListProps {
+	sections: DashboardSection[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+}
+
+function SectionList({ sections, layouts }: SectionListProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
+
+	const {
+		sensors,
+		orderedSections,
+		activeSection,
+		onDragStart,
+		onDragEnd,
+		onDragCancel,
+	} = useSectionDragReorder({ sections, layouts });
+
+	const onAddPanel = useAddPanelToSection({ sections });
+	const onMovePanel = useMovePanelToSection({ sections });
+	const onDeletePanel = useDeletePanel({ sections });
+
+	// Only titled sections participate in reordering; untitled (free-flow)
+	// blocks render in place without a drag handle.
+	const sortableIds = useMemo(
+		() => orderedSections.filter((s) => s.title).map((s) => s.id),
+		[orderedSections],
+	);
+
+	if (!isEditable) {
+		return (
+			<>
+				{sections.map((section) => (
+					<Section key={section.id} section={section} />
+				))}
+			</>
+		);
+	}
+
+	return (
+		<DndContext
+			sensors={sensors}
+			collisionDetection={closestCenter}
+			modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+			onDragStart={onDragStart}
+			onDragEnd={onDragEnd}
+			onDragCancel={onDragCancel}
+		>
+			<SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
+				{orderedSections.map((section) =>
+					section.title ? (
+						<SortableSection
+							key={section.id}
+							section={section}
+							sections={sections}
+							onAddPanel={onAddPanel}
+							onMovePanel={onMovePanel}
+							onDeletePanel={onDeletePanel}
+						/>
+					) : (
+						<Section
+							key={section.id}
+							section={section}
+							sections={sections}
+							onAddPanel={onAddPanel}
+							onMovePanel={onMovePanel}
+							onDeletePanel={onDeletePanel}
+						/>
+					),
+				)}
+			</SortableContext>
+			{/* dropAnimation disabled: optimistic reorder already places the section,
+			    so animating the overlay back would cause a visible snap/shake. */}
+			<DragOverlay dropAnimation={null}>
+				{activeSection ? <SectionDragPreview section={activeSection} /> : null}
+			</DragOverlay>
+		</DndContext>
+	);
+}
+
+export default SectionList;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SortableSection.tsx

@@ -0,0 +1,59 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import type { DashboardSection } from '../../utils';
+import type { AddPanelArgs } from '../Panel/hooks/useAddPanelToSection';
+import type { DeletePanelArgs } from '../Panel/hooks/useDeletePanel';
+import type { MovePanelArgs } from '../Panel/hooks/useMovePanelToSection';
+import Section from './Section/Section';
+
+interface SortableSectionProps {
+	section: DashboardSection;
+	sections: DashboardSection[];
+	onAddPanel: (args: AddPanelArgs) => void;
+	onMovePanel: (args: MovePanelArgs) => void;
+	onDeletePanel: (args: DeletePanelArgs) => void;
+}
+
+function SortableSection({
+	section,
+	sections,
+	onAddPanel,
+	onMovePanel,
+	onDeletePanel,
+}: SortableSectionProps): JSX.Element {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		setActivatorNodeRef,
+		transform,
+		transition,
+		isDragging,
+	} = useSortable({ id: section.id });
+
+	// dnd-kit drives the drag transform per-frame, so this must be an inline
+	// style — there is no static-stylesheet equivalent for a live transform.
+	// While dragging, the original is hidden (the DragOverlay renders the moving
+	// preview); keeping it in place preserves the gap and lets siblings animate.
+	const style: React.CSSProperties = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+		opacity: isDragging ? 0 : undefined,
+	};
+
+	return (
+		<div ref={setNodeRef} style={style}>
+			<Section
+				section={section}
+				sections={sections}
+				onAddPanel={onAddPanel}
+				onMovePanel={onMovePanel}
+				onDeletePanel={onDeletePanel}
+				dragHandle={{ attributes, listeners, setActivatorNodeRef }}
+			/>
+		</div>
+	);
+}
+
+export default SortableSection;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useAddSection.ts

@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import {
+	addSectionOp,
+	newGridLayout,
+	reorderLayoutsOp,
+} from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+
+interface Params {
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+}
+
+interface Result {
+	addSection: (title: string) => Promise<void>;
+	isSaving: boolean;
+}
+
+/**
+ * Appends an empty titled section. When the dashboard has no layouts yet, the
+ * layouts array is created via a `replace` (an `add` to a missing/empty array
+ * pointer is unreliable); otherwise a new Grid is appended.
+ */
+export function useAddSection({ layouts }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const addSection = useCallback(
+		async (title: string): Promise<void> => {
+			const trimmed = title.trim();
+			if (!dashboardId || !trimmed) {
+				return;
+			}
+			const op =
+				!layouts || layouts.length === 0
+					? reorderLayoutsOp([newGridLayout(trimmed)])
+					: addSectionOp(trimmed);
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, [op]);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[layouts, dashboardId, refetch, showErrorModal],
+	);
+
+	return { addSection, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useDeleteSection.ts

@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { removePanelOp, removeSectionOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	section: DashboardSection;
+}
+
+interface Result {
+	deleteSection: () => Promise<void>;
+	isSaving: boolean;
+}
+
+/**
+ * Deletes a section: removes its Grid layout and deletes every panel it
+ * contained from `spec.panels` (orphan cleanup), as one atomic patch.
+ */
+export function useDeleteSection({ section }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const deleteSection = useCallback(async (): Promise<void> => {
+		if (!dashboardId) {
+			return;
+		}
+		const ops: DashboardtypesJSONPatchOperationDTO[] = section.items.map((i) =>
+			removePanelOp(i.id),
+		);
+		ops.push(removeSectionOp(section.layoutIndex));
+		try {
+			setIsSaving(true);
+			await patchDashboardV2({ id: dashboardId }, ops);
+			refetch();
+		} catch (error) {
+			showErrorModal(error as APIError);
+		} finally {
+			setIsSaving(false);
+		}
+	}, [section, dashboardId, refetch, showErrorModal]);
+
+	return { deleteSection, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useFirstSectionMigration.ts

@@ -0,0 +1,64 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { addSectionOp, titleUntitledSectionOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+}
+
+interface Result {
+	migrate: (newSectionTitle: string) => Promise<void>;
+	isSaving: boolean;
+}
+
+/**
+ * Converts a free-flowing dashboard into a sectioned one: every existing
+ * untitled layout that holds panels is titled in place ("Section 1", "Section
+ * 2", …), then the brand-new section the user asked for is appended — all in one
+ * atomic patch. Used once the user confirms the migration prompt.
+ */
+export function useFirstSectionMigration({ sections }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const migrate = useCallback(
+		async (newSectionTitle: string): Promise<void> => {
+			const trimmed = newSectionTitle.trim();
+			if (!dashboardId || !trimmed) {
+				return;
+			}
+
+			const ops: DashboardtypesJSONPatchOperationDTO[] = [];
+			let counter = 1;
+			sections.forEach((s) => {
+				if (!s.title && s.items.length > 0) {
+					ops.push(titleUntitledSectionOp(s.layoutIndex, `Section ${counter}`));
+					counter += 1;
+				}
+			});
+			ops.push(addSectionOp(trimmed));
+
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, ops);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[sections, dashboardId, refetch, showErrorModal],
+	);
+
+	return { migrate, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/usePersistLayout.ts

@@ -0,0 +1,97 @@
+import { useCallback, useState } from 'react';
+import type { Layout } from 'react-grid-layout';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { replaceSectionItemsOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { GridItem } from '../../../utils';
+
+interface Params {
+	layoutIndex: number;
+	items: GridItem[];
+}
+
+interface Result {
+	handleLayoutChange: (rglLayout: Layout[]) => void;
+	isSaving: boolean;
+}
+
+/** Maps an RGL layout back onto the section's grid items, preserving panel refs. */
+function mergeRglLayout(rglLayout: Layout[], items: GridItem[]): GridItem[] {
+	const byId = new Map(items.map((item) => [item.id, item]));
+	return rglLayout
+		.map((entry) => {
+			const existing = byId.get(entry.i);
+			if (!existing) {
+				return null;
+			}
+			return {
+				...existing,
+				x: entry.x,
+				y: entry.y,
+				width: entry.w,
+				height: entry.h,
+			};
+		})
+		.filter((item): item is GridItem => item !== null);
+}
+
+function hasGeometryChanged(next: GridItem[], prev: GridItem[]): boolean {
+	if (next.length !== prev.length) {
+		return true;
+	}
+	const prevById = new Map(prev.map((item) => [item.id, item]));
+	return next.some((item) => {
+		const before = prevById.get(item.id);
+		if (!before) {
+			return true;
+		}
+		return (
+			before.x !== item.x ||
+			before.y !== item.y ||
+			before.width !== item.width ||
+			before.height !== item.height
+		);
+	});
+}
+
+/**
+ * Persists panel geometry within a single section. Call the returned handler
+ * from RGL's `onDragStop`/`onResizeStop` (stop events only — not continuous
+ * `onLayoutChange`) to limit network churn.
+ */
+export function usePersistLayout({ layoutIndex, items }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const handleLayoutChange = useCallback(
+		async (rglLayout: Layout[]): Promise<void> => {
+			if (!dashboardId) {
+				return;
+			}
+			const nextItems = mergeRglLayout(rglLayout, items);
+			if (!hasGeometryChanged(nextItems, items)) {
+				return;
+			}
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, [
+					replaceSectionItemsOp(layoutIndex, nextItems),
+				]);
+				refetch();
+			} catch (error) {
+				showErrorModal(error as APIError);
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, items, layoutIndex, refetch, showErrorModal],
+	);
+
+	return { handleLayoutChange, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useRenameSection.ts

@@ -0,0 +1,50 @@
+import { useCallback, useState } from 'react';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { renameSectionOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+
+interface Params {
+	layoutIndex: number;
+}
+
+interface Result {
+	rename: (title: string) => Promise<boolean>;
+	isSaving: boolean;
+}
+
+/** Renames a section's title via `replace /spec/layouts/<i>/spec/display/title`. */
+export function useRenameSection({ layoutIndex }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [isSaving, setIsSaving] = useState(false);
+	const { showErrorModal } = useErrorModal();
+
+	const rename = useCallback(
+		async (title: string): Promise<boolean> => {
+			const trimmed = title.trim();
+			if (!dashboardId || !trimmed) {
+				return false;
+			}
+			try {
+				setIsSaving(true);
+				await patchDashboardV2({ id: dashboardId }, [
+					renameSectionOp(layoutIndex, trimmed),
+				]);
+				refetch();
+				return true;
+			} catch (error) {
+				showErrorModal(error as APIError);
+				return false;
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[dashboardId, layoutIndex, refetch, showErrorModal],
+	);
+
+	return { rename, isSaving };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useSectionDragReorder.ts

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	type DragEndEvent,
+	type DragStartEvent,
+	KeyboardSensor,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+
+import { patchDashboardV2 } from 'api/generated/services/dashboard';
+import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { reorderLayoutsOp } from '../../../patchOps';
+import { useDashboardStore } from '../../../store/useDashboardStore';
+import type { DashboardSection } from '../../../utils';
+
+interface Params {
+	sections: DashboardSection[];
+	layouts: DashboardtypesLayoutDTO[] | undefined | null;
+}
+
+interface Result {
+	sensors: ReturnType<typeof useSensors>;
+	/** Display order — optimistically reordered on drop so the UI doesn't wait on refetch. */
+	orderedSections: DashboardSection[];
+	/** The section currently being dragged (for the DragOverlay preview), or null. */
+	activeSection: DashboardSection | null;
+	onDragStart: (event: DragStartEvent) => void;
+	onDragEnd: (event: DragEndEvent) => void;
+	onDragCancel: () => void;
+}
+
+/**
+ * Owns section-reorder drag state. Reorders happen optimistically in local
+ * state (keyed by stable section id) and persist via a single
+ * `replace /spec/layouts` patch; the optimistic order is cleared once fresh
+ * server data arrives. Each section maps 1:1 to a Grid layout via `layoutIndex`,
+ * so the new layouts array is rebuilt by mapping the reordered sections back.
+ */
+export function useSectionDragReorder({ sections, layouts }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const refetch = useDashboardStore((s) => s.refetch);
+	const [activeId, setActiveId] = useState<string | null>(null);
+	const [localOrderIds, setLocalOrderIds] = useState<string[] | null>(null);
+	const { showErrorModal } = useErrorModal();
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+		useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+	);
+
+	// Server data is the source of truth — drop optimistic order whenever it changes.
+	useEffect(() => {
+		setLocalOrderIds(null);
+	}, [sections]);
+
+	const orderedSections = useMemo<DashboardSection[]>(() => {
+		if (!localOrderIds) {
+			return sections;
+		}
+		const byId = new Map(sections.map((s) => [s.id, s]));
+		const ordered = localOrderIds
+			.map((id) => byId.get(id))
+			.filter((s): s is DashboardSection => s !== undefined);
+		return ordered.length === sections.length ? ordered : sections;
+	}, [sections, localOrderIds]);
+
+	const onDragStart = useCallback((event: DragStartEvent): void => {
+		setActiveId(String(event.active.id));
+	}, []);
+
+	const onDragCancel = useCallback((): void => {
+		setActiveId(null);
+	}, []);
+
+	const onDragEnd = useCallback(
+		async (event: DragEndEvent): Promise<void> => {
+			setActiveId(null);
+			const { active, over } = event;
+			if (!over || active.id === over.id || !dashboardId || !layouts) {
+				return;
+			}
+
+			const oldIndex = orderedSections.findIndex((s) => s.id === active.id);
+			const newIndex = orderedSections.findIndex((s) => s.id === over.id);
+			if (oldIndex < 0 || newIndex < 0) {
+				return;
+			}
+
+			const newOrdered = arrayMove(orderedSections, oldIndex, newIndex);
+			setLocalOrderIds(newOrdered.map((s) => s.id));
+
+			const newLayouts = newOrdered
+				.map((s) => layouts[s.layoutIndex])
+				.filter((l): l is DashboardtypesLayoutDTO => l !== undefined);
+
+			try {
+				await patchDashboardV2({ id: dashboardId }, [reorderLayoutsOp(newLayouts)]);
+				refetch();
+			} catch (error) {
+				setLocalOrderIds(null); // revert optimistic order on failure
+				showErrorModal(error as APIError);
+			}
+		},
+		[orderedSections, layouts, dashboardId, refetch, showErrorModal],
+	);
+
+	const activeSection = useMemo(
+		() => orderedSections.find((s) => s.id === activeId) ?? null,
+		[orderedSections, activeId],
+	);
+
+	return {
+		sensors,
+		orderedSections,
+		activeSection,
+		onDragStart,
+		onDragEnd,
+		onDragCancel,
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useToggleSectionCollapse.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+
+import {
+	selectIsSectionOpen,
+	useDashboardStore,
+} from '../../../store/useDashboardStore';
+
+interface Params {
+	sectionId: string;
+}
+
+interface Result {
+	open: boolean;
+	toggle: () => void;
+}
+
+/**
+ * Owns a section's expand/collapse state. Collapse is a frontend-only, per-user
+ * preference (not in the dashboard spec): it lives in the persisted zustand
+ * store, keyed by dashboardId + section id, and survives reloads. Default open.
+ */
+export function useToggleSectionCollapse({ sectionId }: Params): Result {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const open = useDashboardStore(selectIsSectionOpen(dashboardId, sectionId));
+	const toggleSectionCollapse = useDashboardStore(
+		(s) => s.toggleSectionCollapse,
+	);
+
+	const toggle = useCallback((): void => {
+		if (dashboardId) {
+			toggleSectionCollapse(dashboardId, sectionId);
+		}
+	}, [dashboardId, sectionId, toggleSectionCollapse]);
+
+	return { open, toggle };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/index.tsx

@@ -7,19 +7,27 @@ import type {
 	DashboardtypesPanelDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
+import { useDashboardStore } from '../store/useDashboardStore';
 import { layoutsToSections } from '../utils';
+import AddSectionControl from './Section/AddSectionControl/AddSectionControl';
 import Section from './Section/Section/Section';
+import SectionList from './Section/SectionList';
 import styles from './PanelsAndSectionsLayout.module.scss';
 
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
-interface Props {
+interface PanelsAndSectionsLayoutProps {
 	layouts: DashboardtypesLayoutDTO[];
 	panels: Record<string, DashboardtypesPanelDTO | undefined>;
 }
 
-function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
+function PanelsAndSectionsLayout({
+	layouts,
+	panels,
+}: PanelsAndSectionsLayoutProps): JSX.Element {
+	const isEditable = useDashboardStore((s) => s.isEditable);
+
 	const sections = useMemo(
 		() => layoutsToSections(layouts, panels),
 		[layouts, panels],
@@ -28,6 +36,11 @@ function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 	const isEmpty =
 		sections.length === 0 || sections.every((s) => s.items.length === 0);
 
+	// Sectioned mode = at least one titled layout. Sections then become a
+	// reorderable list; otherwise the dashboard is a single free-flowing grid
+	// with no section chrome or reordering.
+	const isSectioned = useMemo(() => sections.some((s) => !!s.title), [sections]);
+
 	const renderContent = (): ReactNode => {
 		if (isEmpty) {
 			return (
@@ -42,12 +55,27 @@ function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 			);
 		}
 
+		if (isSectioned) {
+			return <SectionList sections={sections} layouts={layouts} />;
+		}
+
 		return sections.map((section) => (
 			<Section key={section.id} section={section} />
 		));
 	};
 
-	return <div className={styles.body}>{renderContent()}</div>;
+	return (
+		<div className={styles.body}>
+			{renderContent()}
+			{isEditable ? (
+				<AddSectionControl
+					sections={sections}
+					layouts={layouts}
+					isSectioned={isSectioned}
+				/>
+			) : null}
+		</div>
+	);
 }
 
 export default PanelsAndSectionsLayout;

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -8,12 +8,15 @@ import { LayoutGrid } from '@signozhq/icons';
 
 import styles from './DashboardBreadcrumbs.module.scss';
 
-interface Props {
+interface DashboardBreadcrumbsProps {
 	title: string;
 	image: string;
 }
 
-function DashboardBreadcrumbs({ title, image }: Props): JSX.Element {
+function DashboardBreadcrumbs({
+	title,
+	image,
+}: DashboardBreadcrumbsProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 
 	const goToListPage = useCallback(() => {

frontend/src/pages/DashboardPageV2/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

@@ -5,12 +5,12 @@ import DashboardBreadcrumbs from './DashboardBreadcrumbs';
 
 import styles from './DashboardHeader.module.scss';
 
-interface Props {
+interface DashboardHeaderProps {
 	title: string;
 	image: string;
 }
 
-function DashboardHeader({ title, image }: Props): JSX.Element {
+function DashboardHeader({ title, image }: DashboardHeaderProps): JSX.Element {
 	return (
 		<div className={styles.dashboardHeader}>
 			<DashboardBreadcrumbs title={title} image={image} />

frontend/src/pages/DashboardPageV2/DashboardContainer/index.tsx

@@ -1,20 +1,37 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useAppContext } from 'providers/App/App';
 
 import DashboardDescription from './DashboardDescription';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
+import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 
-interface Props {
+interface DashboardContainerProps {
 	dashboard: DashboardtypesGettableDashboardV2DTO;
 	refetch: () => void;
 }
 
-function DashboardContainer({ dashboard, refetch }: Props): JSX.Element {
+function DashboardContainer({
+	dashboard,
+	refetch,
+}: DashboardContainerProps): JSX.Element {
 	const fullScreenHandle = useFullScreenHandle();
 
+	const { user } = useAppContext();
+	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
+	const isEditable = !dashboard.locked && editDashboard;
+
+	// Publish edit context to the store so hooks/components read it from there
+	// instead of receiving dashboardId/isEditable/refetch as props down the tree.
+	const setEditContext = useDashboardStore((s) => s.setEditContext);
+	useEffect(() => {
+		setEditContext({ dashboardId: dashboard.id ?? '', isEditable, refetch });
+	}, [dashboard.id, isEditable, refetch, setEditContext]);
+
 	const { spec } = dashboard;
 	const layouts = useMemo(() => spec?.layouts ?? [], [spec?.layouts]);
 	const panels = useMemo(() => spec?.panels ?? {}, [spec?.panels]);

frontend/src/pages/DashboardPageV2/DashboardContainer/patchOps.ts

@@ -0,0 +1,177 @@
+import type {
+	DashboardGridItemDTO,
+	DashboardtypesJSONPatchOperationDTO,
+	DashboardtypesLayoutDTO,
+	DashboardtypesPanelDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
+
+import type { GridItem } from './utils';
+
+/**
+ * Pure RFC-6902 JSON-Patch builders for the V2 dashboard spec. These are
+ * intentionally side-effect-free (no React, no network) so they can be unit
+ * tested and reused by the layout hooks. JSON pointers target the postable
+ * shape: `/spec/layouts/...`, `/spec/panels/...` (matches the existing V2
+ * patches in DashboardSettings/General and DashboardDescription).
+ */
+
+const { add, replace, remove } = DashboardtypesJSONPatchOperationDTOOp;
+
+const PANEL_REF_PREFIX = '#/spec/panels/';
+
+export function panelRef(panelId: string): string {
+	return `${PANEL_REF_PREFIX}${panelId}`;
+}
+
+/**
+ * Builds a minimal, backend-valid panel for a given plugin kind. The spec
+ * requires exactly one query whose plugin kind is allowed for the panel;
+ * `signoz/BuilderQuery` is allowed for every panel kind and its contents are not
+ * validated, so an empty builder query is the safe default. The real query is
+ * filled in once the panel editor lands.
+ */
+export function createDefaultPanel(pluginKind: string): DashboardtypesPanelDTO {
+	// The DTO types plugin/query kinds as large generated enum unions; the kind
+	// here is chosen dynamically by the user, so we build the structurally-valid
+	// shape and assert the type.
+	return {
+		kind: 'Panel',
+		spec: {
+			display: { name: 'New panel' },
+			plugin: { kind: pluginKind, spec: {} },
+			queries: [
+				{
+					kind: 'TimeSeriesQuery',
+					spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { name: 'A' } } },
+				},
+			],
+		},
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+/** Converts a UI grid item back into the spec's grid-item DTO shape. */
+export function gridItemToDTO(item: GridItem): DashboardGridItemDTO {
+	return {
+		x: item.x,
+		y: item.y,
+		width: item.width,
+		height: item.height,
+		content: { $ref: panelRef(item.id) },
+	};
+}
+
+/** Replace the entire items array of one section (used on panel move/resize). */
+export function replaceSectionItemsOp(
+	layoutIndex: number,
+	items: GridItem[],
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: replace,
+		path: `/spec/layouts/${layoutIndex}/spec/items`,
+		value: items.map(gridItemToDTO),
+	};
+}
+
+/** Replace the whole layouts array (used on section reorder — avoids move-index ambiguity). */
+export function reorderLayoutsOp(
+	layouts: DashboardtypesLayoutDTO[],
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: replace, path: '/spec/layouts', value: layouts };
+}
+
+/** An empty titled Grid layout (one section). */
+export function newGridLayout(title: string): DashboardtypesLayoutDTO {
+	return {
+		kind: 'Grid' as DashboardtypesLayoutDTO['kind'],
+		spec: { display: { title }, items: [] },
+	};
+}
+
+/** Append a new, empty titled Grid section. */
+export function addSectionOp(
+	title: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: add, path: '/spec/layouts/-', value: newGridLayout(title) };
+}
+
+interface AddPanelToSectionArgs {
+	panelId: string;
+	panel: DashboardtypesPanelDTO;
+	layoutIndex: number;
+	item: DashboardGridItemDTO;
+}
+
+/** Add a panel to `spec.panels` and an item ref into a section, as one atomic patch. */
+export function addPanelToSectionOps({
+	panelId,
+	panel,
+	layoutIndex,
+	item,
+}: AddPanelToSectionArgs): DashboardtypesJSONPatchOperationDTO[] {
+	return [
+		{ op: add, path: `/spec/panels/${panelId}`, value: panel },
+		{ op: add, path: `/spec/layouts/${layoutIndex}/spec/items/-`, value: item },
+	];
+}
+
+interface MovePanelArgs {
+	sourceIndex: number;
+	sourceItems: GridItem[];
+	targetIndex: number;
+	targetItems: GridItem[];
+}
+
+/** Move a panel's item ref from one section to another (panel stays in spec.panels). */
+export function movePanelBetweenSectionsOps({
+	sourceIndex,
+	sourceItems,
+	targetIndex,
+	targetItems,
+}: MovePanelArgs): DashboardtypesJSONPatchOperationDTO[] {
+	return [
+		replaceSectionItemsOp(sourceIndex, sourceItems),
+		replaceSectionItemsOp(targetIndex, targetItems),
+	];
+}
+
+/** Rename an existing section's title. */
+export function renameSectionOp(
+	layoutIndex: number,
+	title: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: replace,
+		path: `/spec/layouts/${layoutIndex}/spec/display/title`,
+		value: title,
+	};
+}
+
+/**
+ * First-section migration: give an existing untitled (free-flowing) layout a
+ * title, turning it into a section in place while preserving its panels.
+ */
+export function titleUntitledSectionOp(
+	layoutIndex: number,
+	title: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return {
+		op: add,
+		path: `/spec/layouts/${layoutIndex}/spec/display`,
+		value: { title },
+	};
+}
+
+/** Remove a section. Panel cleanup (orphaned refs) is handled by the caller. */
+export function removeSectionOp(
+	layoutIndex: number,
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: remove, path: `/spec/layouts/${layoutIndex}` };
+}
+
+/** Remove a panel definition from `spec.panels`. */
+export function removePanelOp(
+	panelId: string,
+): DashboardtypesJSONPatchOperationDTO {
+	return { op: remove, path: `/spec/panels/${panelId}` };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/collapseSlice.ts

@@ -0,0 +1,35 @@
+import type { StateCreator } from 'zustand';
+
+import type { DashboardStore } from '../useDashboardStore';
+
+/**
+ * Section collapse state — frontend-only and persisted to localStorage. Keyed by
+ * dashboardId → section stable id → open. An absent entry means "open" (the
+ * default). This is intentionally NOT server state: collapse is a per-user UI
+ * preference, so it lives here instead of in the dashboard spec.
+ */
+export interface CollapseSlice {
+	collapsed: Record<string, Record<string, boolean>>;
+	toggleSectionCollapse: (dashboardId: string, sectionId: string) => void;
+}
+
+export const createCollapseSlice: StateCreator<
+	DashboardStore,
+	[['zustand/persist', unknown]],
+	[],
+	CollapseSlice
+> = (set, get) => ({
+	collapsed: {},
+	toggleSectionCollapse: (dashboardId, sectionId): void => {
+		const { collapsed } = get();
+		const current = collapsed[dashboardId]?.[sectionId];
+		// Absent → open by default, so the first toggle closes it.
+		const next = current === undefined ? false : !current;
+		set({
+			collapsed: {
+				...collapsed,
+				[dashboardId]: { ...collapsed[dashboardId], [sectionId]: next },
+			},
+		});
+	},
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/editContextSlice.ts

@@ -0,0 +1,38 @@
+import type { StateCreator } from 'zustand';
+
+import type { DashboardStore } from '../useDashboardStore';
+
+/**
+ * Edit context shared across the V2 dashboard tree — the dashboard id, whether
+ * the user can edit, and the react-query refetch. Set once by DashboardContainer
+ * so hooks/components read it from the store instead of receiving it as props
+ * through every layer. Not persisted.
+ */
+export interface EditContextSlice {
+	dashboardId: string;
+	isEditable: boolean;
+	refetch: () => void;
+	setEditContext: (ctx: {
+		dashboardId: string;
+		isEditable: boolean;
+		refetch: () => void;
+	}) => void;
+}
+
+export const createEditContextSlice: StateCreator<
+	DashboardStore,
+	[['zustand/persist', unknown]],
+	[],
+	EditContextSlice
+> = (set) => ({
+	dashboardId: '',
+	isEditable: false,
+	refetch: (): void => undefined,
+	setEditContext: (ctx): void => {
+		set({
+			dashboardId: ctx.dashboardId,
+			isEditable: ctx.isEditable,
+			refetch: ctx.refetch,
+		});
+	},
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/store/useDashboardStore.ts

@@ -0,0 +1,44 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import {
+	createEditContextSlice,
+	type EditContextSlice,
+} from './slices/editContextSlice';
+import {
+	createCollapseSlice,
+	type CollapseSlice,
+} from './slices/collapseSlice';
+
+export type DashboardStore = EditContextSlice & CollapseSlice;
+
+/**
+ * V2 dashboard session store. Holds cross-cutting client state only — never the
+ * dashboard spec (that stays in react-query via useGetDashboardV2). Two slices:
+ * - edit-context: dashboardId / isEditable / refetch (set once, not persisted).
+ * - collapse: per-section open state (frontend-only, persisted to localStorage).
+ */
+export const useDashboardStore = create<DashboardStore>()(
+	persist(
+		(...a) => ({
+			...createEditContextSlice(...a),
+			...createCollapseSlice(...a),
+		}),
+		{
+			name: '@signoz/dashboard-v2',
+			// Persist only the collapse map — context (incl. the refetch fn) is transient.
+			partialize: (state) => ({ collapsed: state.collapsed }),
+		},
+	),
+);
+
+/** Selector: is a section open? Absent entry (or no dashboard) → open by default. */
+export const selectIsSectionOpen =
+	(dashboardId: string, sectionId: string) =>
+	(state: DashboardStore): boolean => {
+		if (!dashboardId) {
+			return true;
+		}
+		const value = state.collapsed[dashboardId]?.[sectionId];
+		return value === undefined ? true : value;
+	};

frontend/src/pages/DashboardPageV2/DashboardContainer/utils.ts

@@ -72,7 +72,6 @@ export interface DashboardSection {
 	/** Position of this section's Grid in `spec.layouts`. All JSON-Patch ops target by this. */
 	layoutIndex: number;
 	title: string | undefined;
-	open: boolean;
 	items: GridItem[];
 	repeatVariable: string | undefined;
 }
@@ -127,15 +126,11 @@ export function layoutsToSections(
 				.filter((it): it is GridItem => it !== null);
 
 			const title = spec?.display?.title;
-			// `open` defaults to true when no collapse field is set (the section
-			// is expanded by default).
-			const open = spec?.display?.collapse?.open !== false;
 
 			return {
 				id: getSectionStableId(items, idx),
 				layoutIndex: idx,
 				title,
-				open,
 				items,
 				repeatVariable: spec?.repeatVariable,
 			};