chore: remove unused var

* fix: add references in waterfall response

* chore: update openapi specs

* chore: mark reference a non nullable field

docs/api/openapi.yml

@@ -6525,6 +6525,15 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableTraceAggregations:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregationResult'
+          type: array
+      required:
+      - aggregations
+      type: object
     SpantypesGettableWaterfallTrace:
       properties:
         aggregations:
@@ -6563,6 +6572,15 @@ components:
           nullable: true
           type: array
       type: object
+    SpantypesOtelSpanRef:
+      properties:
+        refType:
+          type: string
+        spanId:
+          type: string
+        traceId:
+          type: string
+      type: object
     SpantypesPostableSpanMapper:
       properties:
         config:
@@ -6590,6 +6608,15 @@ components:
       - name
       - condition
       type: object
+    SpantypesPostableTraceAggregations:
+      properties:
+        aggregations:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanAggregation'
+          type: array
+      required:
+      - aggregations
+      type: object
     SpantypesPostableWaterfall:
       properties:
         aggregations:
@@ -6614,6 +6641,9 @@ components:
           $ref: '#/components/schemas/SpantypesSpanAggregationType'
         field:
           $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+      required:
+      - field
+      - aggregation
       type: object
     SpantypesSpanAggregationResult:
       properties:
@@ -6627,6 +6657,10 @@ components:
             type: integer
           nullable: true
           type: object
+      required:
+      - field
+      - aggregation
+      - value
       type: object
     SpantypesSpanAggregationType:
       enum:
@@ -6810,6 +6844,10 @@ components:
           type: string
         parent_span_id:
           type: string
+        references:
+          items:
+            $ref: '#/components/schemas/SpantypesOtelSpanRef'
+          type: array
         resource:
           additionalProperties:
             type: string
@@ -6835,6 +6873,8 @@ components:
           type: string
         trace_state:
           type: string
+      required:
+      - references
       type: object
     TagtypesPostableTag:
       properties:
@@ -12265,6 +12305,75 @@ paths:
       summary: Test notification channel (deprecated)
       tags:
       - channels
+  /api/v1/traces/{traceID}/aggregations:
+    post:
+      deprecated: false
+      description: Computes span aggregations grouped by requested field.
+      operationId: GetTraceAggregations
+      parameters:
+      - in: path
+        name: traceID
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableTraceAggregations'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableTraceAggregations'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get aggregations for a trace
+      tags:
+      - tracedetail
   /api/v1/user:
     get:
       deprecated: false

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -7753,12 +7753,34 @@ export type SpantypesSpanAggregationResultDTOValue =
 	SpantypesSpanAggregationResultDTOValueAnyOf | null;
 
 export interface SpantypesSpanAggregationResultDTO {
-	aggregation?: SpantypesSpanAggregationTypeDTO;
-	field?: TelemetrytypesTelemetryFieldKeyDTO;
+	aggregation: SpantypesSpanAggregationTypeDTO;
+	field: TelemetrytypesTelemetryFieldKeyDTO;
 	/**
 	 * @type object,null
 	 */
-	value?: SpantypesSpanAggregationResultDTOValue;
+	value: SpantypesSpanAggregationResultDTOValue;
+}
+
+export interface SpantypesGettableTraceAggregationsDTO {
+	/**
+	 * @type array
+	 */
+	aggregations: SpantypesSpanAggregationResultDTO[];
+}
+
+export interface SpantypesOtelSpanRefDTO {
+	/**
+	 * @type string
+	 */
+	refType?: string;
+	/**
+	 * @type string
+	 */
+	spanId?: string;
+	/**
+	 * @type string
+	 */
+	traceId?: string;
 }
 
 export type SpantypesWaterfallSpanDTOAttributesAnyOf = {
@@ -7855,6 +7877,10 @@ export interface SpantypesWaterfallSpanDTO {
 	 * @type string
 	 */
 	parent_span_id?: string;
+	/**
+	 * @type array
+	 */
+	references: SpantypesOtelSpanRefDTO[];
 	/**
 	 * @type object,null
 	 */
@@ -8000,8 +8026,15 @@ export interface SpantypesPostableSpanMapperGroupDTO {
 }
 
 export interface SpantypesSpanAggregationDTO {
-	aggregation?: SpantypesSpanAggregationTypeDTO;
-	field?: TelemetrytypesTelemetryFieldKeyDTO;
+	aggregation: SpantypesSpanAggregationTypeDTO;
+	field: TelemetrytypesTelemetryFieldKeyDTO;
+}
+
+export interface SpantypesPostableTraceAggregationsDTO {
+	/**
+	 * @type array
+	 */
+	aggregations: SpantypesSpanAggregationDTO[];
 }
 
 export interface SpantypesPostableWaterfallDTO {
@@ -9344,6 +9377,17 @@ export type UpdateSpanMapperPathParameters = {
 	groupId: string;
 	mapperId: string;
 };
+export type GetTraceAggregationsPathParameters = {
+	traceID: string;
+};
+export type GetTraceAggregations200 = {
+	data: SpantypesGettableTraceAggregationsDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListUsersDeprecated200 = {
 	/**
 	 * @type array

frontend/src/api/generated/services/tracedetail/index.ts

@@ -12,17 +12,120 @@ import type {
 } from 'react-query';
 
 import type {
+	GetTraceAggregations200,
+	GetTraceAggregationsPathParameters,
 	GetWaterfall200,
 	GetWaterfallPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
+	SpantypesPostableTraceAggregationsDTO,
 	SpantypesPostableWaterfallDTO,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
+/**
+ * Computes span aggregations grouped by requested field.
+ * @summary Get aggregations for a trace
+ */
+export const getTraceAggregations = (
+	{ traceID }: GetTraceAggregationsPathParameters,
+	spantypesPostableTraceAggregationsDTO?: BodyType<SpantypesPostableTraceAggregationsDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetTraceAggregations200>({
+		url: `/api/v1/traces/${traceID}/aggregations`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: spantypesPostableTraceAggregationsDTO,
+		signal,
+	});
+};
+
+export const getGetTraceAggregationsMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getTraceAggregations>>,
+		TError,
+		{
+			pathParams: GetTraceAggregationsPathParameters;
+			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof getTraceAggregations>>,
+	TError,
+	{
+		pathParams: GetTraceAggregationsPathParameters;
+		data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['getTraceAggregations'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof getTraceAggregations>>,
+		{
+			pathParams: GetTraceAggregationsPathParameters;
+			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return getTraceAggregations(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type GetTraceAggregationsMutationResult = NonNullable<
+	Awaited<ReturnType<typeof getTraceAggregations>>
+>;
+export type GetTraceAggregationsMutationBody =
+	| BodyType<SpantypesPostableTraceAggregationsDTO>
+	| undefined;
+export type GetTraceAggregationsMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get aggregations for a trace
+ */
+export const useGetTraceAggregations = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof getTraceAggregations>>,
+		TError,
+		{
+			pathParams: GetTraceAggregationsPathParameters;
+			data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof getTraceAggregations>>,
+	TError,
+	{
+		pathParams: GetTraceAggregationsPathParameters;
+		data?: BodyType<SpantypesPostableTraceAggregationsDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getGetTraceAggregationsMutationOptions(options));
+};
 /**
  * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
  * @summary Get waterfall view for a trace

frontend/src/components/ExplorerCard/constants.ts

@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';
 
 export const ExploreHeaderToolTip = {
-	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
+	url: 'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
 };
 

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -4,6 +4,7 @@ import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 import { Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { AIAssistantEvents } from 'container/AIAssistant/events';
@@ -109,7 +110,7 @@ function HeaderRightSection({
 						</span>
 					) : null}
 
-					<TooltipSimple title="Noz">
+					<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
 						<Button
 							variant="solid"
 							color="secondary"

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -69,6 +69,8 @@ export function useLogsTableColumns({
 					id: 'timestamp',
 					header: 'Timestamp',
 					accessorFn: (log): unknown => log.timestamp,
+					canBeHidden: false,
+					enableRemove: false,
 					width: { default: 170, min: 170 },
 					cell: ({ value }): ReactElement => {
 						const ts = value as string | number;
@@ -92,6 +94,7 @@ export function useLogsTableColumns({
 					header: 'Body',
 					accessorFn: (log): string => getBodyDisplayString(log.body),
 					canBeHidden: false,
+					enableRemove: false,
 					width: { default: '100%', min: 300 },
 					cell: ({ value, isActive }): ReactElement => (
 						<TanStackTable.Text

frontend/src/components/LogsFormatOptionsMenu/__tests__/LogsFormatOptionsMenu.test.tsx

@@ -62,6 +62,7 @@ describe('LogsFormatOptionsMenu (unit)', () => {
 						onSearch: jest.fn(),
 						onSelect: jest.fn(),
 						onRemove: jest.fn(),
+						onReorder: jest.fn(),
 					},
 				}}
 			/>,

frontend/src/components/Noz/Noz.constants.ts

@@ -0,0 +1,2 @@
+/** Shared hover copy for every Noz entry point (header, floating trigger, sidebar). */
+export const NOZ_TOOLTIP_TITLE = 'Noz, your AI teammate';

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx

@@ -131,7 +131,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 												Set the time interval for aggregation
 												<br />
 												<a
-													href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+													href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 													target="_blank"
 													rel="noopener noreferrer"
 													style={{ color: '#1890ff', textDecoration: 'underline' }}
@@ -254,7 +254,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										Set the time interval for aggregation
 										<br />
 										<a
-											href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+											href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 											target="_blank"
 											rel="noopener noreferrer"
 											style={{ color: '#1890ff', textDecoration: 'underline' }}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -52,7 +52,7 @@ const ADD_ONS = [
 		key: ADD_ONS_KEYS.GROUP_BY,
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
-		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
+		docLink: 'https://signoz.io/docs/userguide/query-builder-v5/#grouping',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -61,7 +61,7 @@ const ADD_ONS = [
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having',
+			'https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -70,7 +70,7 @@ const ADD_ONS = [
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#sorting--limiting',
+			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -79,7 +79,7 @@ const ADD_ONS = [
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
-			'https://signoz.io/docs/querying/result-manipulation/#how-limit-works-for-time-series',
+			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -88,7 +88,7 @@ const ADD_ONS = [
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
-			'https://signoz.io/docs/querying/aggregation-grouping/#legend-formatting',
+			'https://signoz.io/docs/userguide/query-builder-v5/#legend-formatting',
 	},
 ];
 
@@ -99,7 +99,7 @@ const REDUCE_TO = {
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
-		'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
+		'https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations',
 };
 
 const hasValue = (value: unknown): boolean =>
@@ -349,7 +349,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Group By"
 											description="Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments."
-											docLink="https://signoz.io/docs/querying/aggregation-grouping/#grouping"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#grouping"
 										/>
 									}
 									placement="top"
@@ -385,7 +385,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Having"
 											description="Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500"
-											docLink="https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having"
 										/>
 									}
 									placement="top"
@@ -434,7 +434,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Order By"
 											description="Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers."
-											docLink="https://signoz.io/docs/querying/result-manipulation/#sorting--limiting"
+											docLink="https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting"
 										/>
 									}
 									placement="top"
@@ -473,7 +473,7 @@ function QueryAddOns({
 											<TooltipContent
 												label="Reduce to"
 												description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
-												docLink="https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation"
+												docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
 											/>
 										}
 										placement="top"

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -65,7 +65,7 @@ function QueryAggregationOptions({
 									Set the time interval for aggregation
 									<br />
 									<a
-										href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+										href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
 										target="_blank"
 										rel="noopener noreferrer"
 										style={{ color: '#1890ff', textDecoration: 'underline' }}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -676,7 +676,7 @@ function QueryAggregationSelect({
 						</span>
 						<br />
 						<a
-							href="https://signoz.io/docs/querying/aggregation-grouping/#core-aggregation-functions-logs--traces"
+							href="https://signoz.io/docs/userguide/query-builder-v5/#core-aggregation-functions"
 							target="_blank"
 							rel="noopener noreferrer"
 							style={{ color: '#1890ff', textDecoration: 'underline' }}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -44,7 +44,7 @@ function TraceOperatorSection({
 					<div style={{ textAlign: 'center' }}>
 						Add Trace Matching
 						<Typography.Link
-							href="https://signoz.io/docs/querying/multi-query-analysis/#trace-matching"
+							href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-trace-operators"
 							target="_blank"
 							style={{ textDecoration: 'underline' }}
 						>
@@ -106,7 +106,7 @@ export default function QueryFooter({
 								<div style={{ textAlign: 'center' }}>
 									Add New Formula
 									<Typography.Link
-										href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
+										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
 										target="_blank"
 										style={{ textDecoration: 'underline' }}
 									>

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -322,9 +322,7 @@ function TanStackTableInner<TData>(
 	});
 
 	const hasSingleColumn = useMemo(
-		() =>
-			effectiveColumns.filter((c) => !c.pin && c.enableRemove !== false).length <=
-			1,
+		() => effectiveColumns.filter((c) => !c.pin).length <= 1,
 		[effectiveColumns],
 	);
 

frontend/src/constants/apDex.ts

@@ -1,5 +1,5 @@
 export const apDexToolTipText =
 	"Apdex is a way to measure your users' satisfaction with the response time of your web service. It's represented as a score from 0-1.";
 export const apDexToolTipUrl =
-	'https://signoz.io/docs/alerts-management/apdex-alerts/?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
+	'https://signoz.io/docs/userguide/metrics/#apdex?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
 export const apDexToolTipUrlText = 'Learn more about Apdex.';

frontend/src/constants/localStorage.ts

@@ -42,4 +42,5 @@ export enum LOCALSTORAGE {
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
+	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
 }

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -5,6 +5,7 @@ import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 
 import { AIAssistantEvents, AIAssistantOpenSource } from '../events';
 import { normalizePage } from '../hooks/useAIAssistantAnalyticsContext';
@@ -42,16 +43,15 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 	}
 
 	return (
-		<TooltipSimple title="Noz">
+		<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
 			<Button
 				variant="solid"
 				color="primary"
 				className={`${styles.trigger} noz-wave`}
 				onClick={handleOpen}
 				aria-label="Open Noz"
-			>
-				<Noz size={24} />
-			</Button>
+				prefix={<Noz size={24} />}
+			/>
 		</TooltipSimple>
 	);
 }

frontend/src/container/AllAlertChannels/index.tsx

@@ -68,7 +68,7 @@ function AlertChannels(): JSX.Element {
 				<RightActionContainer>
 					<TextToolTip
 						text={t('tooltip_notification_channels')}
-						url="https://signoz.io/docs/setup-alerts-notification/"
+						url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
 					/>
 
 					<Tooltip

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -29,7 +29,8 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 		let url = '';
 		switch (option) {
 			case AlertTypes.ANOMALY_BASED_ALERT:
-				url = 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/';
+				url =
+					'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
 				break;
 			case AlertTypes.METRICS_BASED_ALERT:
 				url =

frontend/src/container/CreateAlertRule/constants.ts

@@ -31,7 +31,8 @@ export const ALERT_TYPE_URL_MAP: Record<
 			'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},
 	[AlertTypes.ANOMALY_BASED_ALERT]: {
-		selection: 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/',
+		selection:
+			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples',
 		creation:
 			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -717,13 +717,13 @@ function ExplorerOptions({
 
 	const infoIconLink = useMemo(() => {
 		if (isLogsExplorer) {
-			return 'https://signoz.io/docs/userguide/logs_query_builder/?utm_source=product&utm_medium=logs-explorer-toolbar';
+			return 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar';
 		}
 		// TODO: Add metrics explorer info icon link
 		if (isMetricsExplorer) {
 			return '';
 		}
-		return 'https://signoz.io/docs/userguide/traces/?utm_source=product&utm_medium=trace-explorer-toolbar';
+		return 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar';
 	}, [isLogsExplorer, isMetricsExplorer]);
 
 	const getQueryName = (query: Query): string => {

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -201,7 +201,7 @@ export default function SavedViews({
 								});
 
 								window.open(
-									'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
+									'https://signoz.io/docs/product-features/saved-view/',
 									'_blank',
 									'noopener noreferrer',
 								);

frontend/src/container/Home/constants.ts

@@ -29,12 +29,12 @@ export const checkListStepToPreferenceKeyMap = {
 
 export const DOCS_LINKS = {
 	ADD_DATA_SOURCE: 'https://signoz.io/docs/instrumentation/overview/',
-	SEND_LOGS: 'https://signoz.io/docs/userguide/logs_query_builder/',
+	SEND_LOGS: 'https://signoz.io/docs/userguide/logs/',
 	SEND_TRACES: 'https://signoz.io/docs/userguide/traces/',
 	SEND_METRICS: 'https://signoz.io/docs/metrics-management/metrics-explorer/',
-	SETUP_ALERTS: 'https://signoz.io/docs/alerts/',
+	SETUP_ALERTS: 'https://signoz.io/docs/userguide/alerts-management/',
 	SETUP_SAVED_VIEWS:
-		'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
+		'https://signoz.io/docs/product-features/saved-view/#step-2-save-your-view',
 	SETUP_DASHBOARDS: 'https://signoz.io/docs/userguide/manage-dashboards/',
 };
 

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -121,11 +121,6 @@ function Hosts(): JSX.Element {
 		[dotMetricsEnabled],
 	);
 
-	const primaryFilterKeys = useMemo(
-		() => [dotMetricsEnabled ? 'host.name' : 'host_name'],
-		[dotMetricsEnabled],
-	);
-
 	const controlListPrefix = !showFilters ? (
 		<div className={styles.quickFiltersToggleContainer}>
 			<Button
@@ -188,7 +183,6 @@ function Hosts(): JSX.Element {
 				getEntityName={hostGetEntityName}
 				getInitialLogTracesFilters={getInitialLogTracesFilters}
 				getInitialEventsFilters={hostInitialEventsFilter}
-				primaryFilterKeys={primaryFilterKeys}
 				metadataConfig={hostDetailsMetadataConfig}
 				entityWidgetInfo={hostWidgetInfo}
 				getEntityQueryPayload={getHostMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx

@@ -101,10 +101,6 @@ export interface K8sBaseDetailsProps<T> {
 	getEntityName: (entity: T) => string;
 	getInitialLogTracesFilters: (entity: T) => TagFilterItem[];
 	getInitialEventsFilters: (entity: T) => TagFilterItem[];
-	/**
-	 * @deprecated It's not needed anymore, remove in the next PR
-	 */
-	primaryFilterKeys: string[];
 	metadataConfig: K8sDetailsMetadataConfig<T>[];
 	entityWidgetInfo: {
 		title: string;

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx

@@ -82,7 +82,7 @@ export function K8sEmptyState({
 						<span className={styles.message}>
 							Please refer to{' '}
 							<a
-								href="https://signoz.io/docs/infrastructure-monitoring/hostmetrics/"
+								href="https://signoz.io/docs/userguide/hostmetrics/"
 								target="_blank"
 								rel="noreferrer"
 							>

frontend/src/container/InfraMonitoringK8s/Base/__tests__/K8sBaseList.test.tsx

@@ -611,7 +611,7 @@ describe('K8sBaseList', () => {
 				expect(link).toBeInTheDocument();
 				expect(link).toHaveAttribute(
 					'href',
-					'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/',
+					'https://signoz.io/docs/userguide/hostmetrics/',
 				);
 			});
 		});

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sClusterGetEntityName,
 	k8sClusterGetSelectedItemFilters,
 	k8sClusterInitialEventsFilter,
-	k8sClusterInitialFilters,
 	k8sClusterInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sClustersList({
 				getEntityName={k8sClusterGetEntityName}
 				getInitialLogTracesFilters={k8sClusterInitialLogTracesFilter}
 				getInitialEventsFilters={k8sClusterInitialEventsFilter}
-				primaryFilterKeys={k8sClusterInitialFilters}
 				metadataConfig={k8sClusterDetailsMetadataConfig}
 				entityWidgetInfo={clusterWidgetInfo}
 				getEntityQueryPayload={getClusterMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Clusters/constants.ts

@@ -33,8 +33,6 @@ export const k8sClusterGetSelectedItemFilters = (
 export const k8sClusterDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sClusterData>[] =
 	[{ label: 'Cluster Name', getValue: (p): string => p.meta.k8s_cluster_name }];
 
-export const k8sClusterInitialFilters = [QUERY_KEYS.K8S_CLUSTER_NAME];
-
 export const k8sClusterInitialEventsFilter = (
 	item: K8sClusterData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sDaemonSetGetEntityName,
 	k8sDaemonSetGetSelectedItemFilters,
 	k8sDaemonSetInitialEventsFilter,
-	k8sDaemonSetInitialFilters,
 	k8sDaemonSetInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sDaemonSetsList({
 				getEntityName={k8sDaemonSetGetEntityName}
 				getInitialLogTracesFilters={k8sDaemonSetInitialLogTracesFilter}
 				getInitialEventsFilters={k8sDaemonSetInitialEventsFilter}
-				primaryFilterKeys={k8sDaemonSetInitialFilters}
 				metadataConfig={k8sDaemonSetDetailsMetadataConfig}
 				entityWidgetInfo={daemonSetWidgetInfo}
 				getEntityQueryPayload={getDaemonSetMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/DaemonSets/constants.ts

@@ -46,11 +46,6 @@ export const k8sDaemonSetDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sDaem
 		},
 	];
 
-export const k8sDaemonSetInitialFilters = [
-	QUERY_KEYS.K8S_DAEMON_SET_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sDaemonSetInitialEventsFilter = (
 	item: K8sDaemonSetsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sDeploymentGetEntityName,
 	k8sDeploymentGetSelectedItemFilters,
 	k8sDeploymentInitialEventsFilter,
-	k8sDeploymentInitialFilters,
 	k8sDeploymentInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sDeploymentsList({
 				getEntityName={k8sDeploymentGetEntityName}
 				getInitialLogTracesFilters={k8sDeploymentInitialLogTracesFilter}
 				getInitialEventsFilters={k8sDeploymentInitialEventsFilter}
-				primaryFilterKeys={k8sDeploymentInitialFilters}
 				metadataConfig={k8sDeploymentDetailsMetadataConfig}
 				entityWidgetInfo={deploymentWidgetInfo}
 				getEntityQueryPayload={getDeploymentMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Deployments/constants.ts

@@ -46,11 +46,6 @@ export const k8sDeploymentDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sDep
 		},
 	];
 
-export const k8sDeploymentInitialFilters = [
-	QUERY_KEYS.K8S_DEPLOYMENT_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sDeploymentInitialEventsFilter = (
 	item: K8sDeploymentsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -15,7 +15,6 @@ import {
 	k8sJobGetEntityName,
 	k8sJobGetSelectedItemFilters,
 	k8sJobInitialEventsFilter,
-	k8sJobInitialFilters,
 	k8sJobInitialLogTracesFilter,
 } from './constants';
 import {
@@ -106,7 +105,6 @@ function K8sJobsList({
 				getEntityName={k8sJobGetEntityName}
 				getInitialLogTracesFilters={k8sJobInitialLogTracesFilter}
 				getInitialEventsFilters={k8sJobInitialEventsFilter}
-				primaryFilterKeys={k8sJobInitialFilters}
 				metadataConfig={k8sJobDetailsMetadataConfig}
 				entityWidgetInfo={jobWidgetInfo}
 				getEntityQueryPayload={getJobMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Jobs/constants.ts

@@ -46,11 +46,6 @@ export const k8sJobDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sJobsData>[
 		},
 	];
 
-export const k8sJobInitialFilters = [
-	QUERY_KEYS.K8S_JOB_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sJobInitialEventsFilter = (
 	item: K8sJobsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -14,7 +14,6 @@ import {
 	k8sNamespaceGetEntityName,
 	k8sNamespaceGetSelectedItemFilters,
 	k8sNamespaceInitialEventsFilter,
-	k8sNamespaceInitialFilters,
 	k8sNamespaceInitialLogTracesFilter,
 	namespaceWidgetInfo,
 } from './constants';
@@ -106,7 +105,6 @@ function K8sNamespacesList({
 				getEntityName={k8sNamespaceGetEntityName}
 				getInitialLogTracesFilters={k8sNamespaceInitialLogTracesFilter}
 				getInitialEventsFilters={k8sNamespaceInitialEventsFilter}
-				primaryFilterKeys={k8sNamespaceInitialFilters}
 				metadataConfig={k8sNamespaceDetailsMetadataConfig}
 				entityWidgetInfo={namespaceWidgetInfo}
 				getEntityQueryPayload={getNamespaceMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -14,7 +14,6 @@ import {
 	k8sNodeGetEntityName,
 	k8sNodeGetSelectedItemFilters,
 	k8sNodeInitialEventsFilter,
-	k8sNodeInitialFilters,
 	k8sNodeInitialLogTracesFilter,
 	nodeWidgetInfo,
 } from './constants';
@@ -106,7 +105,6 @@ function K8sNodesList({
 				getEntityName={k8sNodeGetEntityName}
 				getInitialLogTracesFilters={k8sNodeInitialLogTracesFilter}
 				getInitialEventsFilters={k8sNodeInitialEventsFilter}
-				primaryFilterKeys={k8sNodeInitialFilters}
 				metadataConfig={k8sNodeDetailsMetadataConfig}
 				entityWidgetInfo={nodeWidgetInfo}
 				getEntityQueryPayload={getNodeMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -14,7 +14,6 @@ import {
 	k8sPodGetEntityName,
 	k8sPodGetSelectedItemFilters,
 	k8sPodInitialEventsFilter,
-	k8sPodInitialFilters,
 	k8sPodInitialLogTracesFilter,
 	podWidgetInfo,
 } from './constants';
@@ -106,7 +105,6 @@ function K8sPodsList({
 				getEntityName={k8sPodGetEntityName}
 				getInitialLogTracesFilters={k8sPodInitialLogTracesFilter}
 				getInitialEventsFilters={k8sPodInitialEventsFilter}
-				primaryFilterKeys={k8sPodInitialFilters}
 				metadataConfig={k8sPodDetailsMetadataConfig}
 				entityWidgetInfo={podWidgetInfo}
 				getEntityQueryPayload={getPodMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Pods/constants.ts

@@ -42,12 +42,6 @@ export const k8sPodDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sPodsData>[
 		{ label: 'Node', getValue: (p): string => p.meta.k8s_node_name },
 	];
 
-export const k8sPodInitialFilters = [
-	QUERY_KEYS.K8S_POD_NAME,
-	QUERY_KEYS.K8S_CLUSTER_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sPodInitialEventsFilter = (
 	pod: K8sPodsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -14,7 +14,6 @@ import {
 	k8sStatefulSetGetEntityName,
 	k8sStatefulSetGetSelectedItemFilters,
 	k8sStatefulSetInitialEventsFilter,
-	k8sStatefulSetInitialFilters,
 	k8sStatefulSetInitialLogTracesFilter,
 	statefulSetWidgetInfo,
 } from './constants';
@@ -106,7 +105,6 @@ function K8sStatefulSetsList({
 				getEntityName={k8sStatefulSetGetEntityName}
 				getInitialLogTracesFilters={k8sStatefulSetInitialLogTracesFilter}
 				getInitialEventsFilters={k8sStatefulSetInitialEventsFilter}
-				primaryFilterKeys={k8sStatefulSetInitialFilters}
 				metadataConfig={k8sStatefulSetDetailsMetadataConfig}
 				entityWidgetInfo={statefulSetWidgetInfo}
 				getEntityQueryPayload={getStatefulSetMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/StatefulSets/constants.ts

@@ -42,11 +42,6 @@ export const k8sStatefulSetDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sSt
 		},
 	];
 
-export const k8sStatefulSetInitialFilters = [
-	QUERY_KEYS.K8S_STATEFUL_SET_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sStatefulSetInitialEventsFilter = (
 	item: K8sStatefulSetsData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -14,7 +14,6 @@ import {
 	k8sVolumeGetEntityName,
 	k8sVolumeGetSelectedItemFilters,
 	k8sVolumeInitialEventsFilter,
-	k8sVolumeInitialFilters,
 	k8sVolumeInitialLogTracesFilter,
 	volumeWidgetInfo,
 } from './constants';
@@ -106,7 +105,6 @@ function K8sVolumesList({
 				getEntityName={k8sVolumeGetEntityName}
 				getInitialLogTracesFilters={k8sVolumeInitialLogTracesFilter}
 				getInitialEventsFilters={k8sVolumeInitialEventsFilter}
-				primaryFilterKeys={k8sVolumeInitialFilters}
 				metadataConfig={k8sVolumeDetailsMetadataConfig}
 				entityWidgetInfo={volumeWidgetInfo}
 				getEntityQueryPayload={getVolumeMetricsQueryPayload}

frontend/src/container/InfraMonitoringK8s/Volumes/constants.ts

@@ -46,11 +46,6 @@ export const k8sVolumeDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sVolumes
 		},
 	];
 
-export const k8sVolumeInitialFilters = [
-	QUERY_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
-	QUERY_KEYS.K8S_NAMESPACE_NAME,
-];
-
 export const k8sVolumeInitialEventsFilter = (
 	item: K8sVolumesData,
 ): ReturnType<typeof createFilterItem>[] => [

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -16,7 +16,6 @@ import { useLogsTableColumns } from 'components/Logs/TableView/useLogsTableColum
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import type { TanStackTableHandle } from 'components/TanStackTableView';
 import TanStackTable from 'components/TanStackTableView';
-import { useHiddenColumnIds } from 'components/TanStackTableView/useColumnStore';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
@@ -24,13 +23,11 @@ import { QueryParams } from 'constants/query';
 import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useEventSource } from 'providers/EventSource';
-import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
 // interfaces
 import { ILog } from 'types/api/logs/log';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -54,9 +51,6 @@ function LiveLogsList({
 	const { isConnectionLoading } = useEventSource();
 
 	const { activeLogId } = useCopyLogLink();
-	const { logs: logsPreferences } = usePreferenceContext();
-	const hiddenColumnIds = useHiddenColumnIds(LOCALSTORAGE.LOGS_LIST_COLUMNS);
-	const hasReconciledHiddenColumnsRef = useRef(false);
 
 	const {
 		activeLog,
@@ -72,7 +66,7 @@ function LiveLogsList({
 		[logs],
 	);
 
-	const { options } = useOptionsMenu({
+	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator: StringOperators.NOOP,
@@ -83,16 +77,7 @@ function LiveLogsList({
 		[formattedLogs, activeLogId],
 	);
 
-	const selectedFields = convertKeysToColumnFields([
-		...defaultLogsSelectedColumns,
-		...options.selectColumns,
-	]);
-
-	const syncedSelectedColumns = useMemo(
-		() =>
-			options.selectColumns.filter(({ name }) => !hiddenColumnIds.includes(name)),
-		[options.selectColumns, hiddenColumnIds],
-	);
+	const selectedFields = convertKeysToColumnFields(options.selectColumns);
 
 	const logsColumns = useLogsTableColumns({
 		fields: selectedFields,
@@ -100,30 +85,6 @@ function LiveLogsList({
 		appendTo: 'end',
 	});
 
-	useEffect(() => {
-		if (hasReconciledHiddenColumnsRef.current) {
-			return;
-		}
-
-		hasReconciledHiddenColumnsRef.current = true;
-
-		if (syncedSelectedColumns.length === options.selectColumns.length) {
-			return;
-		}
-
-		logsPreferences.updateColumns(syncedSelectedColumns);
-	}, [logsPreferences, options.selectColumns.length, syncedSelectedColumns]);
-
-	const handleColumnRemove = useCallback(
-		(columnId: string) => {
-			const updatedColumns = options.selectColumns.filter(
-				({ name }) => name !== columnId,
-			);
-			logsPreferences.updateColumns(updatedColumns);
-		},
-		[options.selectColumns, logsPreferences],
-	);
-
 	const makeOnLogCopy = useCallback(
 		(log: ILog) =>
 			(event: MouseEvent<HTMLElement>): void => {
@@ -237,7 +198,7 @@ function LiveLogsList({
 							ref={ref as React.Ref<TanStackTableHandle>}
 							columns={logsColumns}
 							columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-							onColumnRemove={handleColumnRemove}
+							onColumnRemove={config?.addColumn?.onRemove}
 							plainTextCellLineClamp={options.maxLines}
 							cellTypographySize={options.fontSize}
 							data={formattedLogs}

frontend/src/container/LogsExplorerList/index.tsx

@@ -18,21 +18,19 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import Spinner from 'components/Spinner';
 import type { TanStackTableHandle } from 'components/TanStackTableView';
 import TanStackTable from 'components/TanStackTableView';
-import { useHiddenColumnIds } from 'components/TanStackTableView/useColumnStore';
+import type { TableColumnDef } from 'components/TanStackTableView/types';
 import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { usePreferenceContext } from 'providers/preferences/context/PreferenceContextProvider';
 import APIError from 'types/api/error';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -69,10 +67,6 @@ function LogsExplorerList({
 	const [, setCopy] = useCopyToClipboard();
 	const isDarkMode = useIsDarkMode();
 	const { activeLogId } = useCopyLogLink();
-	const { logs: logsPreferences } = usePreferenceContext();
-	const hiddenColumnIds = useHiddenColumnIds(LOCALSTORAGE.LOGS_LIST_COLUMNS);
-	const hasReconciledHiddenColumnsRef = useRef(false);
-
 	const {
 		activeLog,
 		onAddToQuery,
@@ -81,7 +75,7 @@ function LogsExplorerList({
 		handleCloseLogDetail,
 	} = useLogDetailHandlers();
 
-	const { options } = useOptionsMenu({
+	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
 		aggregateOperator:
@@ -97,28 +91,15 @@ function LogsExplorerList({
 	);
 
 	const selectedFields = useMemo(
-		() =>
-			convertKeysToColumnFields([
-				...defaultLogsSelectedColumns,
-				...options.selectColumns,
-			]),
-		[options],
+		() => convertKeysToColumnFields(options.selectColumns),
+		[options.selectColumns],
 	);
 
-	const syncedSelectedColumns = useMemo(
-		() =>
-			options.selectColumns.filter(({ name }) => !hiddenColumnIds.includes(name)),
-		[options.selectColumns, hiddenColumnIds],
-	);
-
-	const handleColumnRemove = useCallback(
-		(columnId: string) => {
-			const updatedColumns = options.selectColumns.filter(
-				({ name }) => name !== columnId,
-			);
-			logsPreferences.updateColumns(updatedColumns);
+	const handleColumnOrderChange = useCallback(
+		(cols: TableColumnDef<ILog>[]): void => {
+			config?.addColumn?.onReorder(cols.map((c) => c.id));
 		},
-		[options.selectColumns, logsPreferences],
+		[config],
 	);
 
 	const logsColumns = useLogsTableColumns({
@@ -161,20 +142,6 @@ function LogsExplorerList({
 		}
 	}, [isLoading, isFetching, isError, logs.length]);
 
-	useEffect(() => {
-		if (hasReconciledHiddenColumnsRef.current) {
-			return;
-		}
-
-		hasReconciledHiddenColumnsRef.current = true;
-
-		if (syncedSelectedColumns.length === options.selectColumns.length) {
-			return;
-		}
-
-		logsPreferences.updateColumns(syncedSelectedColumns);
-	}, [logsPreferences, options.selectColumns.length, syncedSelectedColumns]);
-
 	const getItemContent = useCallback(
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
@@ -237,7 +204,8 @@ function LogsExplorerList({
 					ref={ref as React.Ref<TanStackTableHandle>}
 					columns={logsColumns}
 					columnStorageKey={LOCALSTORAGE.LOGS_LIST_COLUMNS}
-					onColumnRemove={handleColumnRemove}
+					onColumnRemove={config?.addColumn?.onRemove}
+					onColumnOrderChange={handleColumnOrderChange}
 					plainTextCellLineClamp={options.maxLines}
 					cellTypographySize={options.fontSize}
 					data={logs}

frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx

@@ -164,7 +164,7 @@ function BreakDown(): JSX.Element {
 								Meter metrics data is aggregated over 1 hour period. Please select time
 								range accordingly. 
 								<a
-									href="https://signoz.io/docs/cost-meter/overview/#get-started"
+									href="https://signoz.io/docs/cost-meter/overview/#accessing-cost-meter"
 									rel="noopener noreferrer"
 									target="_blank"
 									style={{ textDecoration: 'underline' }}

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -197,7 +197,7 @@ function TopOperationsTable({
 
 	const entryPointSpanInfo = {
 		text: 'Shows the spans where requests enter new services for the first time',
-		url: 'https://signoz.io/docs/apm-and-distributed-tracing/application-details/',
+		url: 'https://signoz.io/docs/traces-management/guides/entry-point-spans-service-overview/',
 		urlText: 'Learn more about Entrypoint Spans.',
 	};
 

frontend/src/container/OptionsMenu/__test__/ensureLogsRequiredColumns.test.ts

@@ -0,0 +1,79 @@
+import { TelemetryFieldKey } from 'api/v5/v5';
+
+import {
+	defaultLogsSelectedColumns,
+	ensureLogsRequiredColumns,
+} from '../constants';
+
+const TIMESTAMP = defaultLogsSelectedColumns.find(
+	(c) => c.name === 'timestamp',
+);
+const BODY = defaultLogsSelectedColumns.find((c) => c.name === 'body');
+
+if (!TIMESTAMP || !BODY) {
+	throw new Error('defaults missing timestamp/body — test fixture invalid');
+}
+
+const ATTR_A: TelemetryFieldKey = {
+	name: 'service.name',
+	signal: 'logs',
+	fieldContext: 'resource',
+	fieldDataType: 'string',
+};
+const ATTR_B: TelemetryFieldKey = {
+	name: 'severity_text',
+	signal: 'logs',
+	fieldContext: 'log',
+	fieldDataType: 'string',
+};
+
+describe('ensureLogsRequiredColumns', () => {
+	it('prepends both timestamp + body to an empty list', () => {
+		expect(ensureLogsRequiredColumns([])).toStrictEqual([TIMESTAMP, BODY]);
+	});
+
+	it('prepends only `body` when `timestamp` is already present', () => {
+		expect(ensureLogsRequiredColumns([TIMESTAMP, ATTR_A])).toStrictEqual([
+			BODY,
+			TIMESTAMP,
+			ATTR_A,
+		]);
+	});
+
+	it('prepends only `timestamp` when `body` is already present', () => {
+		expect(ensureLogsRequiredColumns([BODY, ATTR_A])).toStrictEqual([
+			TIMESTAMP,
+			BODY,
+			ATTR_A,
+		]);
+	});
+
+	it('returns the same array when both are present (no duplicates, original order preserved)', () => {
+		const input = [TIMESTAMP, BODY, ATTR_A, ATTR_B];
+		expect(ensureLogsRequiredColumns(input)).toBe(input);
+	});
+
+	it('preserves a non-default order when both are present', () => {
+		const input = [ATTR_A, BODY, ATTR_B, TIMESTAMP];
+		expect(ensureLogsRequiredColumns(input)).toStrictEqual(input);
+	});
+
+	it('prepends both when neither is present in a list of user attributes', () => {
+		expect(ensureLogsRequiredColumns([ATTR_A, ATTR_B])).toStrictEqual([
+			TIMESTAMP,
+			BODY,
+			ATTR_A,
+			ATTR_B,
+		]);
+	});
+
+	it('does not duplicate if a required column appears twice in the input', () => {
+		// Tolerant of malformed input — invariant only adds *missing* required
+		// columns; it does not deduplicate existing entries (that's a separate
+		// concern, not its job).
+		const input = [BODY, BODY, ATTR_A];
+		const result = ensureLogsRequiredColumns(input);
+		expect(result.filter((c) => c.name === 'timestamp')).toHaveLength(1);
+		expect(result[0]).toStrictEqual(TIMESTAMP);
+	});
+});

frontend/src/container/OptionsMenu/constants.ts

@@ -35,6 +35,32 @@ export const defaultLogsSelectedColumns: TelemetryFieldKey[] = [
 	},
 ];
 
+const LOGS_REQUIRED_COLUMNS = ['timestamp', 'body'] as const;
+
+/**
+ * Always-on invariant: every logs selectColumns array must contain `body` and
+ * `timestamp`. Applied at both loader and writer boundaries so the picker, the
+ * table, and persisted state can never diverge into a "missing required
+ * column" state.
+ */
+export function ensureLogsRequiredColumns(
+	columns: TelemetryFieldKey[],
+): TelemetryFieldKey[] {
+	const missing = LOGS_REQUIRED_COLUMNS.filter(
+		(name) => !columns.some((c) => c.name === name),
+	);
+	if (missing.length === 0) {
+		return columns;
+	}
+	const defaultsByName = new Map(
+		defaultLogsSelectedColumns.map((c) => [c.name, c]),
+	);
+	const prepended = missing
+		.map((name) => defaultsByName.get(name))
+		.filter((c): c is TelemetryFieldKey => c !== undefined);
+	return [...prepended, ...columns];
+}
+
 export const defaultTraceSelectedColumns: TelemetryFieldKey[] = [
 	{
 		name: 'service.name',

frontend/src/container/OptionsMenu/types.ts

@@ -40,5 +40,6 @@ export type OptionsMenuConfig = {
 		isFetching: boolean;
 		value: TelemetryFieldKey[];
 		onRemove: (key: string) => void;
+		onReorder: (orderedIds: string[]) => void;
 	};
 };

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -187,30 +187,6 @@ const useOptionsMenu = ({
 			searchedAttributesDataV5?.data.data.keys || {},
 		).flat();
 		if (searchedAttributesDataList.length) {
-			if (dataSource === DataSource.LOGS) {
-				const logsSelectedColumns: TelemetryFieldKey[] =
-					defaultLogsSelectedColumns.map((e) => ({
-						...e,
-						name: e.name,
-						signal: e.signal as SignalType,
-						fieldContext: e.fieldContext as FieldContext,
-						fieldDataType: e.fieldDataType as FieldDataType,
-					}));
-				return [
-					...logsSelectedColumns,
-					...searchedAttributesDataList
-						.filter((attribute) => attribute.name !== 'body')
-						// eslint-disable-next-line sonarjs/no-identical-functions
-						.map((e) => ({
-							...e,
-							name: e.name,
-							signal: e.signal as SignalType,
-							fieldContext: e.fieldContext as FieldContext,
-							fieldDataType: e.fieldDataType as FieldDataType,
-						})),
-				];
-			}
-			// eslint-disable-next-line sonarjs/no-identical-functions
 			return searchedAttributesDataList.map((e) => ({
 				...e,
 				name: e.name,
@@ -297,24 +273,9 @@ const useOptionsMenu = ({
 				return [...acc, column];
 			}, [] as TelemetryFieldKey[]);
 
-			const optionsData: OptionsQuery = {
-				...defaultOptionsQuery,
-				selectColumns: newSelectedColumns,
-				format: preferences?.formatting?.format || defaultOptionsQuery.format,
-				maxLines: preferences?.formatting?.maxLines || defaultOptionsQuery.maxLines,
-				fontSize: preferences?.formatting?.fontSize || defaultOptionsQuery.fontSize,
-			};
-
 			updateColumns(newSelectedColumns);
-			handleRedirectWithOptionsData(optionsData);
 		},
-		[
-			searchedAttributeKeys,
-			selectedColumnKeys,
-			preferences,
-			handleRedirectWithOptionsData,
-			updateColumns,
-		],
+		[searchedAttributeKeys, selectedColumnKeys, preferences, updateColumns],
 	);
 
 	const handleRemoveSelectedColumn = useCallback(
@@ -327,27 +288,12 @@ const useOptionsMenu = ({
 				notifications.error({
 					message: 'There must be at least one selected column',
 				});
-			} else {
-				const optionsData: OptionsQuery = {
-					...defaultOptionsQuery,
-					selectColumns: newSelectedColumns || [],
-					format: preferences?.formatting?.format || defaultOptionsQuery.format,
-					maxLines:
-						preferences?.formatting?.maxLines || defaultOptionsQuery.maxLines,
-					fontSize:
-						preferences?.formatting?.fontSize || defaultOptionsQuery.fontSize,
-				};
-				updateColumns(newSelectedColumns || []);
-				handleRedirectWithOptionsData(optionsData);
+				return;
 			}
+
+			updateColumns(newSelectedColumns || []);
 		},
-		[
-			dataSource,
-			notifications,
-			preferences,
-			handleRedirectWithOptionsData,
-			updateColumns,
-		],
+		[dataSource, notifications, preferences, updateColumns],
 	);
 
 	const handleFormatChange = useCallback(
@@ -414,6 +360,18 @@ const useOptionsMenu = ({
 		setSearchText(value);
 	}, []);
 
+	const reorderSelectColumns = useCallback(
+		(orderedIds: string[]): void => {
+			const current = preferences?.columns ?? [];
+			const byName = new Map(current.map((f) => [f.name, f]));
+			const reordered = orderedIds
+				.map((id) => byName.get(id))
+				.filter((f): f is TelemetryFieldKey => f !== undefined);
+			updateColumns(reordered);
+		},
+		[preferences, updateColumns],
+	);
+
 	const handleFocus = (): void => {
 		setIsFocused(true);
 	};
@@ -436,6 +394,7 @@ const useOptionsMenu = ({
 				onSelect: handleSelectColumns,
 				onRemove: handleRemoveSelectedColumn,
 				onSearch: handleSearchAttribute,
+				onReorder: reorderSelectColumns,
 			},
 			format: {
 				value: preferences?.formatting?.format || defaultOptionsQuery.format,
@@ -457,6 +416,7 @@ const useOptionsMenu = ({
 			handleSelectColumns,
 			handleRemoveSelectedColumn,
 			handleSearchAttribute,
+			reorderSelectColumns,
 			handleFormatChange,
 			handleMaxLinesChange,
 			handleFontSizeChange,

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx

@@ -64,7 +64,7 @@ function ConfigureGoogleAuthAuthnProvider({
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
-						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
+						href="https://signoz.io/docs/userguide/sso-authentication"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx

@@ -38,7 +38,7 @@ function ConfigureOIDCAuthnProvider({
 					Configure OpenID Connect Single Sign-On with your Identity Provider. Read
 					the{' '}
 					<a
-						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
+						href="https://signoz.io/docs/userguide/sso-authentication"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx

@@ -37,7 +37,7 @@ function ConfigureSAMLAuthnProvider({
 				<p className="authn-provider__description">
 					Configure SAML 2.0 Single Sign-On with your Identity Provider. Read the{' '}
 					<a
-						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
+						href="https://signoz.io/docs/userguide/sso-authentication"
 						target="_blank"
 						rel="noreferrer"
 					>

frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx

@@ -216,7 +216,7 @@ export default function QueryFunctions({
 							Add new function
 							<Typography.Link
 								style={{ textDecoration: 'underline' }}
-								href="https://signoz.io/docs/querying/functions-extended-analysis/?utm_source=product&utm_medium=query-builder"
+								href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#functions-for-extended-data-analysis"
 								target="_blank"
 							>
 								{' '}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer.styles.scss

@@ -9,6 +9,19 @@
 		width: 0.2rem;
 		height: 0.2rem;
 	}
+
+	.option-value {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+
+	.option-meta-data-container {
+		display: flex;
+		gap: 8px;
+		flex-shrink: 0;
+	}
 }
 
 .option-renderer-tooltip {

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts

@@ -24,7 +24,7 @@ export const StyledCheckOutlined = styled(Check)`
 
 export const TagContainer = styled(Badge)`
 	&&& {
-		display: inline-block;
+		display: flex;
 		border-radius: 3px;
 		padding: 0.1rem 0.2rem;
 		font-weight: 300;

frontend/src/container/SideNav/NavItem/NavItem.tsx

@@ -5,7 +5,6 @@ import { Pin, PinOff } from '@signozhq/icons';
 
 import { SidebarItem } from '../sideNav.types';
 
-import './NavItem.styles.scss';
 import './NavItem.styles.scss';
 
 export default function NavItem({
@@ -27,7 +26,7 @@ export default function NavItem({
 	showIcon?: boolean;
 	dataTestId?: string;
 }): JSX.Element {
-	const { label, icon, isBeta, isNew, isEarlyAccess } = item;
+	const { label, icon, isBeta, isNew, isEarlyAccess, tooltip } = item;
 
 	const handleTogglePinClick = (
 		event: React.MouseEvent<SVGSVGElement, MouseEvent>,
@@ -36,7 +35,7 @@ export default function NavItem({
 		onTogglePin?.(item);
 	};
 
-	return (
+	const navItem = (
 		<div
 			className={cx(
 				'nav-item',
@@ -107,6 +106,15 @@ export default function NavItem({
 			</div>
 		</div>
 	);
+
+	// Only non-pinnable items set `tooltip`; it would nest with the pin tooltip.
+	return tooltip ? (
+		<Tooltip title={tooltip} placement="right">
+			{navItem}
+		</Tooltip>
+	) : (
+		navItem
+	);
 }
 
 NavItem.defaultProps = {

frontend/src/container/SideNav/menuItems.tsx

@@ -45,6 +45,7 @@ import {
 } from './sideNav.types';
 import { Style } from '@signozhq/design-tokens';
 import Noz from 'components/Noz/Noz';
+import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 
 export const getStartedMenuItem = {
 	key: ROUTES.GET_STARTED,
@@ -97,6 +98,7 @@ export const aiAssistantMenuItem = {
 	icon: <Noz size={16} />,
 	itemKey: 'ai-assistant',
 	isEarlyAccess: true,
+	tooltip: NOZ_TOOLTIP_TITLE,
 };
 
 export const shortcutMenuItem = {

frontend/src/container/SideNav/sideNav.types.ts

@@ -15,6 +15,8 @@ export interface SidebarItem {
 	isBeta?: boolean;
 	isNew?: boolean;
 	isEarlyAccess?: boolean;
+	/** Hover copy for the whole item row (e.g. Noz's early-access tagline). */
+	tooltip?: ReactNode;
 	isPinned?: boolean;
 	children?: SidebarItem[];
 	isExternal?: boolean;

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -549,7 +549,7 @@ function Success(props: ISuccessProps): JSX.Element {
 						type="text"
 						onClick={(): WindowProxy | null =>
 							window.open(
-								'https://signoz.io/docs/traces-management/troubleshooting/faqs/#q-why-are-some-spans-missing-from-a-trace',
+								'https://signoz.io/docs/userguide/traces/#missing-spans',
 								'_blank',
 							)
 						}

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -30,10 +30,7 @@ import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import { getDefaultPaginationConfig } from 'hooks/queryPagination/utils';
-import useDragColumns from 'hooks/useDragColumns';
-import { getDraggedColumns } from 'hooks/useDragColumns/utils';
 import useUrlQueryData from 'hooks/useUrlQueryData';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { ArrowUp10, Minus } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import { AppState } from 'store/reducers';
@@ -85,10 +82,6 @@ function ListView({
 		},
 	});
 
-	const { draggedColumns, onDragColumns } = useDragColumns<RowData>(
-		LOCALSTORAGE.TRACES_LIST_COLUMNS,
-	);
-
 	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
 		QueryParams.pagination,
 	);
@@ -100,6 +93,19 @@ function ListView({
 		[stagedQuery, orderBy],
 	);
 
+	// TEMP — remove after traces moves to TanStack table.
+	// - Drag updates selectColumns; raw queryKey would churn on reorder.
+	// - Trace API fetches only listed columns → add/remove must refetch.
+	// - Sorted-name signature: stable on reorder, changes on add/remove.
+	const selectColumnsSignature = useMemo(
+		() =>
+			(options?.selectColumns ?? [])
+				.map((c) => c.name)
+				.sort()
+				.join(','),
+		[options?.selectColumns],
+	);
+
 	const queryKey = useMemo(
 		() => [
 			REACT_QUERY_KEY.GET_QUERY_RANGE,
@@ -109,7 +115,7 @@ function ListView({
 			stagedQuery,
 			panelType,
 			paginationConfig,
-			options?.selectColumns,
+			selectColumnsSignature,
 			orderBy,
 		],
 		[
@@ -117,7 +123,7 @@ function ListView({
 			panelType,
 			globalSelectedTime,
 			paginationConfig,
-			options?.selectColumns,
+			selectColumnsSignature,
 			maxTime,
 			minTime,
 			orderBy,
@@ -182,13 +188,14 @@ function ListView({
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	const columns = useMemo(() => {
-		const updatedColumns = getListColumns(
-			options?.selectColumns || [],
-			formatTimezoneAdjustedTimestamp,
-		);
-		return getDraggedColumns(updatedColumns, draggedColumns);
-	}, [options?.selectColumns, formatTimezoneAdjustedTimestamp, draggedColumns]);
+	const columns = useMemo(
+		() =>
+			getListColumns(
+				options?.selectColumns || [],
+				formatTimezoneAdjustedTimestamp,
+			),
+		[options?.selectColumns, formatTimezoneAdjustedTimestamp],
+	);
 
 	const transformedQueryTableData = useMemo(
 		() => transformDataWithDate(queryTableData) || [],
@@ -196,9 +203,16 @@ function ListView({
 	);
 
 	const handleDragColumn = useCallback(
-		(fromIndex: number, toIndex: number) =>
-			onDragColumns(columns, fromIndex, toIndex),
-		[columns, onDragColumns],
+		(fromIndex: number, toIndex: number): void => {
+			const reordered = [...columns];
+			const [moved] = reordered.splice(fromIndex, 1);
+			reordered.splice(toIndex, 0, moved);
+			const orderedIds = reordered
+				.map((c) => String(('dataIndex' in c && c.dataIndex) || c.key || ''))
+				.filter(Boolean);
+			config?.addColumn?.onReorder(orderedIds);
+		},
+		[columns, config],
 	);
 
 	const handleOrderChange = useCallback((value: string) => {

frontend/src/container/Version/index.tsx

@@ -100,7 +100,7 @@ function Version(): JSX.Element {
 					{!isError && !isLatestVersion && (
 						<div className="version-page-upgrade-container">
 							<Button
-								href="https://signoz.io/docs/opentelemetry-collection-agents/docker/overview/"
+								href="https://signoz.io/docs/operate/docker-standalone/#upgrade"
 								target="_blank"
 								type="primary"
 								className="periscope-btn primary"

frontend/src/hooks/useIsDashboardV2.ts

@@ -0,0 +1,10 @@
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
+
+export function useIsDashboardV2(): boolean {
+	const { featureFlags } = useAppContext();
+	return Boolean(
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_DASHBOARD_V2)
+			?.active,
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardPageV2.tsx

@@ -0,0 +1,5 @@
+function DashboardPageV2(): JSX.Element {
+	return <>DashboardPageV2</>;
+}
+
+export default DashboardPageV2;

frontend/src/pages/DashboardPageV2/index.tsx

@@ -1,8 +1,3 @@
-function DashboardPageV2(): JSX.Element {
-	return (
-		<div>
-			<h1>Dashboard Page V2</h1>
-		</div>
-	);
-}
+import DashboardPageV2 from './DashboardPageV2';
+
 export default DashboardPageV2;

frontend/src/pages/DashboardsListPageV2/DashboardsListPageV2.module.scss

@@ -0,0 +1,35 @@
+.page {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	width: 100%;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 8px;
+	gap: 8px;
+	height: 48px;
+}
+
+.headerLeft {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.icon {
+	color: var(--l2-foreground);
+}
+
+.text {
+	color: var(--muted-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}

frontend/src/pages/DashboardsListPageV2/DashboardsListPageV2.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { AnnouncementBanner } from '@signozhq/ui/announcement-banner';
+import { Typography } from '@signozhq/ui/typography';
+import { LayoutGrid } from '@signozhq/icons';
+
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import DashboardsList from './components/DashboardsList';
+
+import styles from './DashboardsListPageV2.module.scss';
+
+function DashboardsListPageV2(): JSX.Element {
+	const [showBanner, setShowBanner] = useState(true);
+
+	return (
+		<div className={styles.page}>
+			{showBanner && (
+				<AnnouncementBanner
+					type="warning"
+					onClose={(): void => setShowBanner(false)}
+				>
+					You&apos;re on the V2 dashboards page. If you landed here unintentionally,
+					please reach out to Ashwin.
+				</AnnouncementBanner>
+			)}
+			<div className={styles.header}>
+				<div className={styles.headerLeft}>
+					<LayoutGrid size={14} className={styles.icon} />
+					<Typography.Text className={styles.text}>Dashboards</Typography.Text>
+				</div>
+				<HeaderRightSection
+					enableAnnouncements={false}
+					enableShare
+					enableFeedback
+				/>
+			</div>
+			<DashboardsList />
+		</div>
+	);
+}
+
+export default DashboardsListPageV2;

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/ActionsPopover.module.scss

@@ -0,0 +1,28 @@
+.content {
+	display: flex;
+	flex-direction: column;
+}
+
+// Make signoz ghost-Button rows fill the popover and left-align their label.
+.menuItem {
+	width: 100%;
+	justify-content: flex-start;
+}
+
+:global(.dashboardActionsPopover) {
+	:global(.ant-popover-inner) {
+		width: 200px;
+		height: auto;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		padding: 0px;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/ActionsPopover.tsx

@@ -0,0 +1,103 @@
+import { Popover } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import {
+	Expand,
+	EllipsisVertical,
+	Link2,
+	SquareArrowOutUpRight,
+} from '@signozhq/icons';
+import { useCopyToClipboard } from 'react-use';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';
+
+import DeleteActionItem from './DeleteActionItem';
+import styles from './ActionsPopover.module.scss';
+
+interface Props {
+	link: string;
+	dashboardId: string;
+	dashboardName: string;
+	createdBy: string;
+	isLocked: boolean;
+	onView: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+function ActionsPopover({
+	link,
+	dashboardId,
+	dashboardName,
+	createdBy,
+	isLocked,
+	onView,
+}: Props): JSX.Element {
+	const [, setCopy] = useCopyToClipboard();
+
+	return (
+		<Popover
+			content={
+				<div className={styles.content}>
+					<Button
+						color="secondary"
+						className={styles.menuItem}
+						prefix={<Expand size={14} />}
+						onClick={onView}
+						testId="dashboard-action-view"
+					>
+						View
+					</Button>
+					<Button
+						color="secondary"
+						className={styles.menuItem}
+						prefix={<SquareArrowOutUpRight size={14} />}
+						onClick={(e): void => {
+							e.stopPropagation();
+							e.preventDefault();
+							openInNewTab(link);
+						}}
+						testId="dashboard-action-open-new-tab"
+					>
+						Open in New Tab
+					</Button>
+					<Button
+						color="secondary"
+						className={styles.menuItem}
+						prefix={<Link2 size={14} />}
+						onClick={(e): void => {
+							e.stopPropagation();
+							e.preventDefault();
+							setCopy(getAbsoluteUrl(link));
+						}}
+						testId="dashboard-action-copy-link"
+					>
+						Copy Link
+					</Button>
+					<DeleteActionItem
+						dashboardId={dashboardId}
+						dashboardName={dashboardName}
+						createdBy={createdBy}
+						isLocked={isLocked}
+					/>
+				</div>
+			}
+			placement="bottomRight"
+			arrow={false}
+			rootClassName="dashboardActionsPopover"
+			trigger="click"
+		>
+			<Button
+				size="icon"
+				variant="ghost"
+				color="secondary"
+				testId="dashboard-action-icon"
+				onClick={(e): void => {
+					e.stopPropagation();
+					e.preventDefault();
+				}}
+			>
+				<EllipsisVertical size={14} />
+			</Button>
+		</Popover>
+	);
+}
+
+export default ActionsPopover;

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/DeleteActionItem.tsx

@@ -0,0 +1,122 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQueryClient } from 'react-query';
+import { Modal, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { CircleAlert, Trash2 } from '@signozhq/icons';
+import { toast } from '@signozhq/ui/sonner';
+import { Divider } from '@signozhq/ui/divider';
+import { Typography } from '@signozhq/ui/typography';
+import deleteDashboard from 'api/v1/dashboards/id/delete';
+import { invalidateListDashboardsV2 } from 'api/generated/services/dashboard';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+import { USER_ROLES } from 'types/roles';
+
+import styles from './ActionsPopover.module.scss';
+
+interface Props {
+	dashboardId: string;
+	dashboardName: string;
+	createdBy: string;
+	isLocked: boolean;
+}
+
+function DeleteActionItem({
+	dashboardId,
+	dashboardName,
+	createdBy,
+	isLocked,
+}: Props): JSX.Element {
+	const { t } = useTranslation(['dashboard']);
+	const { user } = useAppContext();
+	const { showErrorModal } = useErrorModal();
+	const queryClient = useQueryClient();
+	const [modal, contextHolder] = Modal.useModal();
+
+	const isAuthor = user?.email === createdBy;
+	const isDisabled = isLocked || (user.role === USER_ROLES.VIEWER && !isAuthor);
+
+	const { mutate: runDelete } = useMutation({
+		mutationFn: () => deleteDashboard({ id: dashboardId }),
+		onSuccess: async () => {
+			toast.success(
+				t('dashboard:delete_dashboard_success', { name: dashboardName }),
+			);
+			await invalidateListDashboardsV2(queryClient);
+		},
+		onError: (error: APIError) => {
+			showErrorModal(error);
+		},
+	});
+
+	const openConfirm = useCallback((): void => {
+		const { destroy } = modal.confirm({
+			title: (
+				<Typography.Title level={5}>
+					Are you sure you want to delete the
+					<span style={{ color: 'var(--danger-background)', fontWeight: 500 }}>
+						{' '}
+						{dashboardName}{' '}
+					</span>
+					dashboard?
+				</Typography.Title>
+			),
+			icon: (
+				<CircleAlert
+					style={{ color: 'var(--danger-background)', marginInlineEnd: '12px' }}
+					size="3xl"
+				/>
+			),
+			okText: 'Delete',
+			okButtonProps: {
+				danger: true,
+				onClick: (e): void => {
+					e.preventDefault();
+					e.stopPropagation();
+					runDelete(undefined, { onSettled: () => destroy() });
+				},
+			},
+			centered: true,
+		});
+	}, [modal, dashboardName, runDelete]);
+
+	const tooltip = ((): string => {
+		if (!isLocked) {
+			return '';
+		}
+		if (user.role === USER_ROLES.ADMIN || isAuthor) {
+			return t('dashboard:locked_dashboard_delete_tooltip_admin_author');
+		}
+		return t('dashboard:locked_dashboard_delete_tooltip_editor');
+	})();
+
+	return (
+		<>
+			<Divider />
+			<Tooltip placement="left" title={tooltip}>
+				<Button
+					variant="ghost"
+					color="destructive"
+					className={styles.menuItem}
+					prefix={<Trash2 size={14} />}
+					disabled={isDisabled}
+					onClick={(e): void => {
+						e.preventDefault();
+						e.stopPropagation();
+						if (!isDisabled) {
+							openConfirm();
+						}
+					}}
+					testId="dashboard-action-delete"
+				>
+					Delete Dashboard
+				</Button>
+			</Tooltip>
+			{contextHolder}
+		</>
+	);
+}
+
+export default DeleteActionItem;

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/ConfigureMetadataModal.module.scss

@@ -0,0 +1,164 @@
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+
+.preview {
+	display: flex;
+	padding: 12px 14.634px;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 7.317px;
+	border-radius: 4px;
+	border: 0.915px solid var(--l1-border);
+	background: var(--l2-background);
+}
+
+.previewHeader {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+}
+
+.previewIcon {
+	height: 14px;
+	width: 14px;
+}
+
+.previewTitle {
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12.805px;
+	font-style: normal;
+	font-weight: var(--font-weight-medium);
+	line-height: 18.293px;
+	letter-spacing: -0.064px;
+}
+
+.previewDetails {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 100%;
+}
+
+.previewRow {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.formattedTime {
+	display: inline-flex;
+	gap: 8px;
+	align-items: center;
+	color: var(--l2-foreground);
+}
+
+.formattedTimeText {
+	font-family: Inter;
+	font-size: 12.805px;
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 16.463px;
+	letter-spacing: -0.064px;
+	color: var(--l2-foreground);
+}
+
+.user {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.userTag {
+	width: 12px;
+	height: 12px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: var(--l2-foreground);
+	font-size: 8px;
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: -0.05px;
+	border-radius: 12.805px;
+	background-color: var(--l1-background);
+}
+
+.userLabel {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 12.805px;
+	font-weight: var(--font-weight-normal);
+	line-height: 16.463px;
+	letter-spacing: -0.064px;
+}
+
+.action {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0px 0px 0px 14.634px;
+}
+
+.actionLeft {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+}
+
+.connectionLine {
+	border-top: 1px dashed var(--l1-border);
+	min-width: 20px;
+	flex-grow: 1;
+	margin: 0px 8px;
+}
+
+.actionRight {
+	display: flex;
+	align-items: center;
+}
+
+.saveChanges {
+	display: flex;
+	width: 100%;
+	height: 32px;
+	padding: 8px 16px;
+	justify-content: center;
+	align-items: center;
+	flex-shrink: 0;
+	border-radius: 2px;
+	border: 1px solid var(--l1-border);
+	background: var(--l1-border);
+}
+
+:global(.configureMetadataModalRoot) {
+	:global(.ant-modal-content) {
+		width: 500px;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--card);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0px;
+	}
+
+	:global(.ant-modal-header) {
+		background: var(--card);
+		padding: 16px;
+		border-bottom: 1px solid var(--l1-border);
+		margin-bottom: 0px;
+	}
+
+	:global(.ant-modal-body) {
+		padding: 14px 16px;
+	}
+
+	:global(.ant-modal-footer) {
+		margin-top: 0px;
+		padding: 4px 16px 16px 16px;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/ConfigureMetadataModal.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'react';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Switch } from '@signozhq/ui/switch';
+import { CalendarClock, Check, Clock4 } from '@signozhq/icons';
+import { get } from 'lodash-es';
+import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { useTimezone } from 'providers/Timezone';
+
+import { lastUpdatedLabel, type DashboardListItem } from '../../utils';
+import {
+	DynamicColumns,
+	useDashboardsListVisibleColumnsStore,
+	type DashboardDynamicColumns,
+} from './useDynamicColumns';
+
+import styles from './ConfigureMetadataModal.module.scss';
+
+interface Props {
+	open: boolean;
+	previewDashboard: DashboardListItem | undefined;
+	onClose: () => void;
+}
+
+function ConfigureMetadataModal({
+	open,
+	previewDashboard,
+	onClose,
+}: Props): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const storedColumns = useDashboardsListVisibleColumnsStore(
+		(s) => s.visibleColumns,
+	);
+	const setStoredColumns = useDashboardsListVisibleColumnsStore(
+		(s) => s.setVisibleColumns,
+	);
+	const [draftColumns, setDraftColumns] =
+		useState<DashboardDynamicColumns>(storedColumns);
+
+	useEffect(() => {
+		if (open) {
+			setDraftColumns(storedColumns);
+		}
+	}, [open, storedColumns]);
+
+	const handleSave = (): void => {
+		setStoredColumns(draftColumns);
+		onClose();
+	};
+
+	const previewImage = previewDashboard?.image || Base64Icons[0];
+	const previewName = previewDashboard?.spec?.display?.name;
+	const previewCreatedBy = previewDashboard?.createdBy;
+	const previewUpdatedBy = previewDashboard?.updatedBy;
+	const previewUpdatedAt = previewDashboard?.updatedAt;
+
+	const formattedCreatedAt = previewDashboard
+		? formatTimezoneAdjustedTimestamp(
+				get(previewDashboard, 'createdAt', '') as string,
+				DATE_TIME_FORMATS.DASH_DATETIME_UTC,
+			)
+		: '';
+
+	return (
+		<Modal
+			open={open}
+			onCancel={onClose}
+			title="Configure Metadata"
+			footer={
+				<Button
+					type="text"
+					icon={<Check size={14} />}
+					className={styles.saveChanges}
+					onClick={handleSave}
+				>
+					Save Changes
+				</Button>
+			}
+			rootClassName="configureMetadataModalRoot"
+		>
+			<div className={styles.content}>
+				<div className={styles.preview}>
+					<section className={styles.previewHeader}>
+						<img
+							src={previewImage}
+							alt="dashboard-image"
+							className={styles.previewIcon}
+						/>
+						<Typography.Text className={styles.previewTitle}>
+							{previewName}
+						</Typography.Text>
+					</section>
+					<section className={styles.previewDetails}>
+						<section className={styles.previewRow}>
+							{draftColumns.createdAt && (
+								<span className={styles.formattedTime}>
+									<CalendarClock size={14} />
+									<Typography.Text className={styles.formattedTimeText}>
+										{formattedCreatedAt}
+									</Typography.Text>
+								</span>
+							)}
+							{draftColumns.createdBy && (
+								<div className={styles.user}>
+									<Typography.Text className={styles.userTag}>
+										{previewCreatedBy?.substring(0, 1).toUpperCase()}
+									</Typography.Text>
+									<Typography.Text className={styles.userLabel}>
+										{previewCreatedBy}
+									</Typography.Text>
+								</div>
+							)}
+						</section>
+						<section className={styles.previewRow}>
+							{draftColumns.updatedAt && (
+								<span className={styles.formattedTime}>
+									<CalendarClock size={14} />
+									<Typography.Text className={styles.formattedTimeText}>
+										{lastUpdatedLabel(previewUpdatedAt)}
+									</Typography.Text>
+								</span>
+							)}
+							{draftColumns.updatedBy && (
+								<div className={styles.user}>
+									<Typography.Text className={styles.userTag}>
+										{previewUpdatedBy?.substring(0, 1).toUpperCase()}
+									</Typography.Text>
+									<Typography.Text className={styles.userLabel}>
+										{previewUpdatedBy}
+									</Typography.Text>
+								</div>
+							)}
+						</section>
+					</section>
+				</div>
+
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<CalendarClock size={14} />
+						<Typography.Text>Created at</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value
+							disabled
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.CREATED_AT]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<CalendarClock size={14} />
+						<Typography.Text>Created by</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value
+							disabled
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.CREATED_BY]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<Clock4 size={14} />
+						<Typography.Text>Updated at</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value={draftColumns.updatedAt}
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.UPDATED_AT]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<Clock4 size={14} />
+						<Typography.Text>Updated by</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value={draftColumns.updatedBy}
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.UPDATED_BY]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+			</div>
+		</Modal>
+	);
+}
+
+export default ConfigureMetadataModal;

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/useDynamicColumns.ts

@@ -0,0 +1,52 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+export interface DashboardDynamicColumns {
+	createdAt: boolean;
+	createdBy: boolean;
+	updatedAt: boolean;
+	updatedBy: boolean;
+}
+
+export enum DynamicColumns {
+	CREATED_AT = 'createdAt',
+	CREATED_BY = 'createdBy',
+	UPDATED_AT = 'updatedAt',
+	UPDATED_BY = 'updatedBy',
+}
+
+const DEFAULT_COLUMNS: DashboardDynamicColumns = {
+	createdAt: true,
+	createdBy: true,
+	updatedAt: false,
+	updatedBy: false,
+};
+
+interface DashboardsListVisibleColumnsState {
+	visibleColumns: DashboardDynamicColumns;
+	setVisibleColumns: (next: DashboardDynamicColumns) => void;
+}
+
+export const useDashboardsListVisibleColumnsStore =
+	create<DashboardsListVisibleColumnsState>()(
+		persist(
+			(set) => ({
+				visibleColumns: DEFAULT_COLUMNS,
+				setVisibleColumns: (next): void => {
+					set({ visibleColumns: next });
+				},
+			}),
+			{
+				name: LOCALSTORAGE.DASHBOARDS_LIST_VISIBLE_COLUMNS,
+				merge: (persisted, current) => ({
+					...current,
+					visibleColumns: {
+						...DEFAULT_COLUMNS,
+						...((persisted as Partial<DashboardsListVisibleColumnsState>)
+							?.visibleColumns ?? {}),
+					},
+				}),
+			},
+		),
+	);

frontend/src/pages/DashboardsListPageV2/components/CreateDashboardDropdown/CreateDashboardDropdown.module.scss

@@ -0,0 +1,34 @@
+.menuItem {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.templatesItem {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+}
+
+.primaryButton {
+	padding: 6px 12px;
+}
+
+.textButton {
+	display: flex;
+	width: 153px;
+	align-items: center;
+	height: 32px;
+	padding: 6px 12px;
+	justify-content: center;
+	gap: 6px;
+	border-radius: 2px;
+	background: var(--primary-background);
+	color: var(--l1-foreground);
+}
+
+:global(.createDashboardMenuOverlay) {
+	width: 200px;
+}

frontend/src/pages/DashboardsListPageV2/components/CreateDashboardDropdown/CreateDashboardDropdown.tsx

@@ -0,0 +1,119 @@
+import { useMemo } from 'react';
+// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Dropdown to @signozhq/ui/dropdown-menu
+import { Button, Dropdown, MenuProps } from 'antd';
+import cx from 'classnames';
+import logEvent from 'api/common/logEvent';
+import {
+	ExternalLink,
+	Github,
+	LayoutGrid,
+	Plus,
+	Radius,
+} from '@signozhq/icons';
+
+import styles from './CreateDashboardDropdown.module.scss';
+
+interface Props {
+	canCreate: boolean;
+	onCreate: () => void;
+	onImportJSON: () => void;
+	variant?: 'primary' | 'text';
+}
+
+const TEMPLATES_HREF =
+	'https://signoz.io/docs/dashboards/dashboard-templates/overview/';
+
+function CreateDashboardDropdown({
+	canCreate,
+	onCreate,
+	onImportJSON,
+	variant = 'primary',
+}: Props): JSX.Element {
+	const items: MenuProps['items'] = useMemo(() => {
+		const menuItems: MenuProps['items'] = [
+			{
+				key: 'import-json',
+				label: (
+					<div
+						className={styles.menuItem}
+						data-testid="import-json-menu-cta"
+						onClick={onImportJSON}
+					>
+						<Radius size={14} /> Import JSON
+					</div>
+				),
+			},
+			{
+				key: 'view-templates',
+				label: (
+					<a
+						href={TEMPLATES_HREF}
+						target="_blank"
+						rel="noopener noreferrer"
+						data-testid="view-templates-menu-cta"
+					>
+						<div className={styles.templatesItem}>
+							<div className={styles.menuItem}>
+								<Github size={14} /> View templates
+							</div>
+							<ExternalLink size={14} />
+						</div>
+					</a>
+				),
+			},
+		];
+
+		if (canCreate) {
+			menuItems.unshift({
+				key: 'create-dashboard',
+				label: (
+					<div
+						className={styles.menuItem}
+						data-testid="create-dashboard-menu-cta"
+						onClick={onCreate}
+					>
+						<LayoutGrid size={14} /> Create dashboard
+					</div>
+				),
+			});
+		}
+
+		return menuItems;
+	}, [canCreate, onCreate, onImportJSON]);
+
+	return (
+		<Dropdown
+			overlayClassName="createDashboardMenuOverlay"
+			menu={{ items }}
+			placement="bottomRight"
+			trigger={['click']}
+		>
+			{variant === 'primary' ? (
+				<Button
+					type="primary"
+					className={cx('periscope-btn primary', styles.primaryButton)}
+					icon={<Plus size={14} />}
+					data-testid="new-dashboard-cta"
+					onClick={(): void => {
+						logEvent('Dashboard List: New dashboard clicked', {});
+					}}
+				>
+					New dashboard
+				</Button>
+			) : (
+				<Button
+					type="text"
+					className={styles.textButton}
+					icon={<Plus size={14} />}
+					onClick={(): void => {
+						logEvent('Dashboard List: New dashboard clicked', {});
+					}}
+				>
+					New Dashboard
+				</Button>
+			)}
+		</Dropdown>
+	);
+}
+
+export default CreateDashboardDropdown;

frontend/src/pages/DashboardsListPageV2/components/DashboardRow/DashboardRow.module.scss

@@ -0,0 +1,152 @@
+.row {
+	padding: 12px 16px 16px 16px;
+	border: 1px solid var(--l1-border);
+	border-top: none;
+	background: var(--l2-background);
+	cursor: pointer;
+}
+
+.titleWithAction {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 8px;
+	min-height: 24px;
+}
+
+.titleBlock {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	line-height: 20px;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.titleLink {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.icon {
+	display: inline-block;
+	line-height: 20px;
+	height: 14px;
+	width: 14px;
+}
+
+.title {
+	color: var(--l1-foreground);
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-medium);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+.tagsWithActions {
+	display: flex;
+	align-items: center;
+	flex: 0 1 auto;
+	min-width: 0;
+	justify-content: flex-end;
+}
+
+.tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	justify-content: flex-end;
+}
+
+.tag {
+	display: flex;
+	padding: 4px 8px;
+	justify-content: center;
+	align-items: center;
+	gap: 4px;
+	height: 28px;
+	border-radius: 20px;
+	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+	color: var(--bg-sienna-400);
+	text-align: center;
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	margin-inline-end: 0px;
+}
+
+.details {
+	margin-top: 12px;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 12px 24px;
+}
+
+.createdAt {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-normal);
+	line-height: 18px;
+	letter-spacing: -0.07px;
+}
+
+.createdBy {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.avatar {
+	width: 14px;
+	height: 14px;
+	border-radius: 50px;
+	background: var(--l1-border);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.avatarText {
+	color: var(--l2-foreground);
+	font-size: 8px;
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: -0.05px;
+}
+
+.byLabel {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-normal);
+	line-height: 18px;
+	letter-spacing: -0.07px;
+}
+
+.updatedBy {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+:global(.titleTooltipOverlay) {
+	:global(.ant-tooltip-content) :global(.ant-tooltip-inner) {
+		max-height: 400px;
+		overflow: auto;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/DashboardRow/DashboardRow.tsx

@@ -0,0 +1,154 @@
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Badge } from '@signozhq/ui/badge';
+import { CalendarClock } from '@signozhq/icons';
+import logEvent from 'api/common/logEvent';
+import { generatePath } from 'react-router-dom';
+import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useTimezone } from 'providers/Timezone';
+import { isModifierKeyPressed } from 'utils/app';
+
+import type { DashboardListItem } from '../../utils';
+import { lastUpdatedLabel, tagsToStrings } from '../../utils';
+import ActionsPopover from '../ActionsPopover/ActionsPopover';
+
+import styles from './DashboardRow.module.scss';
+
+interface Props {
+	dashboard: DashboardListItem;
+	index: number;
+	canAct: boolean;
+	showUpdatedAt: boolean;
+	showUpdatedBy: boolean;
+}
+
+function DashboardRow({
+	dashboard,
+	index,
+	canAct,
+	showUpdatedAt,
+	showUpdatedBy,
+}: Props): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const id = dashboard.id;
+	const name = dashboard.spec?.display?.name ?? '';
+	const image = dashboard.image || Base64Icons[0];
+	const createdBy = dashboard.createdBy ?? '';
+	const updatedBy = dashboard.updatedBy ?? '';
+	const createdAt = dashboard.createdAt ?? '';
+	const updatedAt = dashboard.updatedAt ?? '';
+	const isLocked = !!dashboard.locked;
+	const tags = tagsToStrings(dashboard.tags);
+
+	const link = generatePath(ROUTES.DASHBOARD, { dashboardId: id });
+	const formattedCreatedAt = formatTimezoneAdjustedTimestamp(
+		createdAt,
+		DATE_TIME_FORMATS.DASH_DATETIME_UTC,
+	);
+
+	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
+		event.stopPropagation();
+		safeNavigate(link, { newTab: isModifierKeyPressed(event) });
+		logEvent('Dashboard List: Clicked on dashboard', {
+			dashboardId: id,
+			dashboardName: name,
+		});
+	};
+
+	return (
+		<div className={styles.row} onClick={onClickHandler}>
+			<div className={styles.titleWithAction}>
+				<div className={styles.titleBlock}>
+					<Tooltip
+						title={name.length > 50 ? name : ''}
+						placement="left"
+						overlayClassName="titleTooltipOverlay"
+					>
+						<div className={styles.titleLink} onClick={onClickHandler}>
+							<img src={image} alt="dashboard-image" className={styles.icon} />
+							<Typography.Text
+								data-testid={`dashboard-title-${index}`}
+								className={styles.title}
+							>
+								{name}
+							</Typography.Text>
+						</div>
+					</Tooltip>
+				</div>
+
+				<div className={styles.tagsWithActions}>
+					{tags.length > 0 && (
+						<div className={styles.tags}>
+							{tags.slice(0, 3).map((tag) => (
+								<Badge className={styles.tag} key={tag}>
+									{tag}
+								</Badge>
+							))}
+							{tags.length > 3 && (
+								<Badge className={styles.tag} key={tags[3]}>
+									+ <span> {tags.length - 3} </span>
+								</Badge>
+							)}
+						</div>
+					)}
+				</div>
+
+				{canAct && (
+					<ActionsPopover
+						link={link}
+						dashboardId={id}
+						dashboardName={name}
+						createdBy={createdBy}
+						isLocked={isLocked}
+						onView={onClickHandler}
+					/>
+				)}
+			</div>
+			<div className={styles.details}>
+				<div className={styles.createdAt}>
+					<CalendarClock size={14} />
+					<Typography.Text>{formattedCreatedAt}</Typography.Text>
+				</div>
+
+				{createdBy && (
+					<div className={styles.createdBy}>
+						<div className={styles.avatar}>
+							<Typography.Text className={styles.avatarText}>
+								{createdBy.substring(0, 1).toUpperCase()}
+							</Typography.Text>
+						</div>
+						<Typography.Text className={styles.byLabel}>{createdBy}</Typography.Text>
+					</div>
+				)}
+
+				{showUpdatedAt && (
+					<div className={styles.createdAt}>
+						<CalendarClock size={14} />
+						<Typography.Text>{lastUpdatedLabel(updatedAt)}</Typography.Text>
+					</div>
+				)}
+
+				{updatedBy && showUpdatedBy && (
+					<div className={styles.updatedBy}>
+						<Typography.Text className={styles.byLabel}>
+							Last Updated By -
+						</Typography.Text>
+						<div className={styles.avatar}>
+							<Typography.Text className={styles.avatarText}>
+								{updatedBy.substring(0, 1).toUpperCase()}
+							</Typography.Text>
+						</div>
+						<Typography.Text className={styles.byLabel}>{updatedBy}</Typography.Text>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default DashboardRow;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.module.scss

@@ -0,0 +1,96 @@
+.container {
+	margin-top: 30px;
+	margin-bottom: 30px;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+}
+
+.viewContent {
+	width: calc(100% - 30px);
+	max-width: 836px;
+
+	:global(.ant-table-wrapper) :global(.ant-table-cell) {
+		padding: 0 !important;
+		border: none !important;
+		background: var(--l1-background) !important;
+	}
+
+	:global(.ant-table-wrapper)
+		:global(.ant-table-tbody)
+		:global(.ant-table-row)
+		:global(.ant-table-cell)
+		> div {
+		// Row content is the only child of the td; it carries the borders.
+	}
+
+	:global(.ant-table-wrapper)
+		:global(.ant-table-tbody)
+		:global(.ant-table-row:last-child)
+		:global(.ant-table-cell)
+		> div {
+		border-radius: 0 0 6px 6px;
+	}
+
+	:global(.ant-pagination-item) {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	:global(.ant-pagination-item) > a {
+		color: var(--l2-foreground);
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		line-height: 20px;
+	}
+
+	:global(.ant-pagination-item-active) {
+		background-color: var(--primary-background);
+	}
+
+	:global(.ant-pagination-item-active) > a {
+		color: var(--foreground) !important;
+		font-weight: var(--font-weight-medium);
+	}
+}
+
+.titleContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.title {
+	color: var(--l1-foreground);
+	font-size: var(--font-size-lg);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 28px;
+	letter-spacing: -0.09px;
+}
+
+.subtitle {
+	color: var(--l2-foreground);
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.integrationsContainer {
+	margin: 16px 0;
+}
+
+.integrationsContent {
+	max-width: 100%;
+	width: 100%;
+}
+
+.toolbar {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 16px 0;
+}

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.tsx

@@ -0,0 +1,277 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { generatePath } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import logEvent from 'api/common/logEvent';
+import {
+	createDashboardV2,
+	useListDashboardsV2,
+} from 'api/generated/services/dashboard';
+import ROUTES from 'constants/routes';
+import { RequestDashboardBtn } from 'container/ListOfDashboard/RequestDashboardBtn';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { toast } from '@signozhq/ui/sonner';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
+
+import {
+	usePage,
+	useSearch,
+	useSortColumn,
+	useSortOrder,
+	type SortColumn,
+	type SortOrder,
+} from '../../hooks/useDashboardsListQueryParams';
+import type { DashboardListItem } from '../../utils';
+import ConfigureMetadataModal from '../ConfigureMetadataModal/ConfigureMetadataModal';
+import { useDashboardsListVisibleColumnsStore } from '../ConfigureMetadataModal/useDynamicColumns';
+import CreateDashboardDropdown from '../CreateDashboardDropdown/CreateDashboardDropdown';
+import ImportJSONModal from '../ImportJSONModal/ImportJSONModal';
+import ListHeader from '../ListHeader/ListHeader';
+import EmptyState from '../states/EmptyState/EmptyState';
+import ErrorState from '../states/ErrorState/ErrorState';
+import LoadingState from '../states/LoadingState/LoadingState';
+import NoResultsState from '../states/NoResultsState/NoResultsState';
+import SearchBar from '../SearchBar/SearchBar';
+import DashboardsListContent from './DashboardsListContent';
+
+import styles from './DashboardsList.module.scss';
+
+const PAGE_SIZE = 20;
+
+function DashboardsList(): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { t } = useTranslation('dashboard');
+	const { showErrorModal } = useErrorModal();
+	const { isCloudUser } = useGetTenantLicense();
+
+	const { user } = useAppContext();
+	const [action, canCreateNewDashboard] = useComponentPermission(
+		['action', 'create_new_dashboards'],
+		user.role,
+	);
+
+	const [searchString, setSearchString] = useSearch();
+	const [sortColumn, setSortColumn] = useSortColumn();
+	const [sortOrder, setSortOrder] = useSortOrder();
+	const [page, setPage] = usePage();
+
+	const [searchInput, setSearchInput] = useState(searchString);
+
+	// Keep the local input in sync with external searchString changes
+	// (browser back/forward, deep link). User typing only mutates
+	// searchInput, so this won't fight with in-flight edits.
+	useEffect(() => {
+		setSearchInput(searchString);
+	}, [searchString]);
+
+	const handleSubmitSearch = useCallback((): void => {
+		const next = searchInput.trim();
+		if (next === searchString) {
+			return;
+		}
+		void setSearchString(next);
+		void setPage(1);
+	}, [searchInput, searchString, setSearchString, setPage]);
+
+	const listParams = useMemo(
+		() => ({
+			query: searchString.trim() || undefined,
+			sort: sortColumn,
+			order: sortOrder,
+			limit: PAGE_SIZE,
+			offset: (page - 1) * PAGE_SIZE,
+		}),
+		[searchString, sortColumn, sortOrder, page],
+	);
+
+	const {
+		data: response,
+		isLoading,
+		isFetching,
+		error,
+		refetch,
+	} = useListDashboardsV2(listParams, { query: { keepPreviousData: true } });
+
+	const apiError = useMemo(
+		() => (error ? toAPIError(error) : undefined),
+		[error],
+	);
+	const errorHttpStatus = apiError?.getHttpStatusCode();
+	const errorMessage = apiError?.getErrorMessage();
+
+	const dashboards = useMemo<DashboardListItem[]>(
+		() => response?.data?.dashboards ?? [],
+		[response],
+	);
+	const total = response?.data?.total ?? 0;
+
+	const [isImportOpen, setIsImportOpen] = useState(false);
+	const [isConfigureOpen, setIsConfigureOpen] = useState(false);
+	const visibleColumns = useDashboardsListVisibleColumnsStore(
+		(s) => s.visibleColumns,
+	);
+
+	const [creating, setCreating] = useState(false);
+
+	const handleCreateNew = useCallback(async (): Promise<void> => {
+		try {
+			logEvent('Dashboard List: Create dashboard clicked', {});
+			setCreating(true);
+			const created = await createDashboardV2({
+				schemaVersion: 'v6',
+				// Backend requires `name` (immutable, server-side identifier);
+				// asking it to generate one keeps the UI's "new dashboard" flow.
+				generateName: true,
+				tags: null,
+				spec: {
+					display: { name: t('new_dashboard_title', { ns: 'dashboard' }) },
+				},
+			});
+			safeNavigate(
+				generatePath(ROUTES.DASHBOARD, { dashboardId: created.data.id }),
+			);
+		} catch (e) {
+			showErrorModal(e as APIError);
+			toast.error((e as AxiosError).toString() || 'Failed to create dashboard');
+		} finally {
+			setCreating(false);
+		}
+	}, [safeNavigate, showErrorModal, t]);
+
+	const handleImportToggle = useCallback((): void => {
+		logEvent('Dashboard List V2: Import JSON clicked', {});
+		setIsImportOpen((s) => !s);
+	}, []);
+
+	const onSortChange = useCallback(
+		(column: SortColumn): void => {
+			void setSortColumn(column);
+			void setPage(1);
+		},
+		[setSortColumn, setPage],
+	);
+
+	const onOrderChange = useCallback(
+		(order: SortOrder): void => {
+			void setSortOrder(order);
+			void setPage(1);
+		},
+		[setSortOrder, setPage],
+	);
+
+	const visitLoggedRef = useRef(false);
+	useEffect(() => {
+		if (!visitLoggedRef.current && !isLoading && response !== undefined) {
+			logEvent('Dashboard List V2: Page visited', { number: dashboards.length });
+			visitLoggedRef.current = true;
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isLoading]);
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.viewContent}>
+				<div className={styles.titleContainer}>
+					<Typography.Title className={styles.title}>Dashboards</Typography.Title>
+					<Typography.Text className={styles.subtitle}>
+						Create and manage dashboards for your workspace.
+					</Typography.Text>
+					{isCloudUser && (
+						<div className={styles.integrationsContainer}>
+							<div className={styles.integrationsContent}>
+								<RequestDashboardBtn />
+							</div>
+						</div>
+					)}
+				</div>
+
+				{isLoading ? (
+					<LoadingState />
+				) : !error && dashboards.length === 0 && !searchString && page === 1 ? (
+					<EmptyState
+						createDropdown={
+							canCreateNewDashboard ? (
+								<CreateDashboardDropdown
+									canCreate={!!canCreateNewDashboard}
+									onCreate={handleCreateNew}
+									onImportJSON={handleImportToggle}
+									variant="text"
+								/>
+							) : null
+						}
+					/>
+				) : (
+					<>
+						<div className={styles.toolbar}>
+							<SearchBar
+								value={searchInput}
+								onChange={setSearchInput}
+								onSubmit={handleSubmitSearch}
+							/>
+							{canCreateNewDashboard && (
+								<CreateDashboardDropdown
+									canCreate={!!canCreateNewDashboard}
+									onCreate={handleCreateNew}
+									onImportJSON={handleImportToggle}
+								/>
+							)}
+						</div>
+
+						{error ? (
+							<ErrorState
+								isCloudUser={!!isCloudUser}
+								onRetry={(): void => {
+									refetch();
+								}}
+								httpStatus={errorHttpStatus}
+								errorMessage={errorMessage}
+							/>
+						) : dashboards.length === 0 ? (
+							<NoResultsState searchString={searchInput} />
+						) : (
+							<>
+								<ListHeader
+									sortColumn={sortColumn}
+									onSortChange={onSortChange}
+									sortOrder={sortOrder}
+									onOrderChange={onOrderChange}
+									onConfigureMetadata={(): void => setIsConfigureOpen(true)}
+								/>
+								<DashboardsListContent
+									dashboards={dashboards}
+									page={page}
+									pageSize={PAGE_SIZE}
+									total={total}
+									onPageChange={setPage}
+									canAct={!!action}
+									showUpdatedAt={visibleColumns.updatedAt}
+									showUpdatedBy={visibleColumns.updatedBy}
+									loading={creating || isFetching}
+								/>
+							</>
+						)}
+					</>
+				)}
+
+				<ImportJSONModal
+					open={isImportOpen}
+					onClose={(): void => setIsImportOpen(false)}
+				/>
+
+				<ConfigureMetadataModal
+					open={isConfigureOpen}
+					previewDashboard={dashboards[0]}
+					onClose={(): void => setIsConfigureOpen(false)}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default DashboardsList;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsListContent.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { Table } from 'antd';
+import type { TableProps } from 'antd/lib';
+
+import type { DashboardListItem } from '../../utils';
+import DashboardRow from '../DashboardRow/DashboardRow';
+
+interface Props {
+	dashboards: DashboardListItem[];
+	page: number;
+	pageSize: number;
+	total: number;
+	onPageChange: (page: number) => void;
+	canAct: boolean;
+	showUpdatedAt: boolean;
+	showUpdatedBy: boolean;
+	loading: boolean;
+}
+
+function DashboardsListContent({
+	dashboards,
+	page,
+	pageSize,
+	total,
+	onPageChange,
+	canAct,
+	showUpdatedAt,
+	showUpdatedBy,
+	loading,
+}: Props): JSX.Element {
+	const columns: TableProps<DashboardListItem>['columns'] = useMemo(
+		() => [
+			{
+				title: 'Dashboards',
+				key: 'dashboard',
+				render: (_, dashboard, index): JSX.Element => (
+					<DashboardRow
+						dashboard={dashboard}
+						index={index}
+						canAct={canAct}
+						showUpdatedAt={showUpdatedAt}
+						showUpdatedBy={showUpdatedBy}
+					/>
+				),
+			},
+		],
+		[canAct, showUpdatedAt, showUpdatedBy],
+	);
+
+	const paginationConfig = total > pageSize && {
+		pageSize,
+		showSizeChanger: false,
+		onChange: onPageChange,
+		current: page,
+		total,
+		hideOnSinglePage: true,
+	};
+
+	return (
+		<Table
+			columns={columns}
+			dataSource={dashboards.map((d) => ({ ...d, key: d.id }))}
+			showSorterTooltip
+			loading={loading}
+			showHeader={false}
+			pagination={paginationConfig}
+		/>
+	);
+}
+
+export default DashboardsListContent;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/index.tsx

@@ -0,0 +1,3 @@
+import DashboardsList from './DashboardsList';
+
+export default DashboardsList;

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/ImportJSONModal.module.scss

@@ -0,0 +1,73 @@
+.contentContainer {
+	display: flex;
+	flex-direction: column;
+}
+
+.contentHeader {
+	padding: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.jsonError {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.errorText {
+	color: var(--warning-background);
+}
+
+.actions {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+:global(.importJsonModalWrapper) {
+	:global(.ant-modal-content) {
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		padding: 0;
+	}
+
+	:global(.margin) {
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		backdrop-filter: blur(20px);
+	}
+
+	:global(.view-lines) {
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		backdrop-filter: blur(20px);
+	}
+
+	:global(.ant-modal-footer) {
+		margin-top: 0;
+		padding: 16px;
+		border-top: 1px solid var(--l1-border);
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/ImportJSONModal.tsx

@@ -0,0 +1,223 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { generatePath } from 'react-router-dom';
+import { red } from '@ant-design/colors';
+import MEditor, { Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Flex, Modal, Upload, UploadProps } from 'antd';
+import { toast } from '@signozhq/ui/sonner';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	CircleAlert,
+	ExternalLink,
+	Github,
+	MonitorDot,
+	MoveRight,
+	Sparkles,
+} from '@signozhq/icons';
+import logEvent from 'api/common/logEvent';
+import { createDashboardV2 } from 'api/generated/services/dashboard';
+import ROUTES from 'constants/routes';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import sampleDashboard from './sampleDashboard.json';
+
+import styles from './ImportJSONModal.module.scss';
+import { normalizeToPostable } from './ImportJSONModalUtils';
+
+interface Props {
+	open: boolean;
+	onClose: () => void;
+}
+
+function ImportJSONModal({ open, onClose }: Props): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { t } = useTranslation(['dashboard', 'common']);
+	const [isUploadError, setIsUploadError] = useState(false);
+	const [isCreateError, setIsCreateError] = useState(false);
+	const [isCreating, setIsCreating] = useState(false);
+	const [editorValue, setEditorValue] = useState('');
+
+	const { showErrorModal } = useErrorModal();
+	const isDarkMode = useIsDarkMode();
+
+	const handleUpload: UploadProps['onChange'] = (info) => {
+		const lastFile = info.fileList[info.fileList.length - 1];
+		if (!lastFile?.originFileObj) {
+			return;
+		}
+		const reader = new FileReader();
+		reader.onload = (event): void => {
+			try {
+				const target = event.target?.result;
+				if (!target) {
+					return;
+				}
+				const parsed = JSON.parse(target.toString());
+				setEditorValue(JSON.stringify(parsed, null, 2));
+				setIsUploadError(false);
+			} catch {
+				setIsUploadError(true);
+			}
+		};
+		reader.readAsText(lastFile.originFileObj);
+	};
+
+	const handleImport = async (): Promise<void> => {
+		try {
+			setIsCreating(true);
+			logEvent('Dashboard List V2: Import and next clicked', {});
+			const parsed = JSON.parse(editorValue) as Record<string, unknown>;
+			const payload = normalizeToPostable(parsed);
+			const response = await createDashboardV2(payload);
+			safeNavigate(
+				generatePath(ROUTES.DASHBOARD, { dashboardId: response.data.id }),
+			);
+			logEvent('Dashboard List V2: New dashboard imported successfully', {
+				dashboardId: response.data?.id,
+			});
+		} catch (error) {
+			showErrorModal(error as APIError);
+			setIsCreateError(true);
+			toast.error(
+				error instanceof Error ? error.message : t('error_loading_json'),
+			);
+		} finally {
+			setIsCreating(false);
+		}
+	};
+
+	const handleClose = (): void => {
+		setIsUploadError(false);
+		setIsCreateError(false);
+		onClose();
+	};
+
+	const setEditorTheme = (monaco: Monaco): void => {
+		monaco.editor.defineTheme('my-theme', {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [
+				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+			],
+			colors: { 'editor.background': Color.BG_INK_300 },
+		});
+	};
+
+	const renderError = (msg: string): JSX.Element => (
+		<div className={styles.jsonError}>
+			<CircleAlert size="md" color={red[7]} />
+			<Typography className={styles.errorText}>{msg}</Typography>
+		</div>
+	);
+
+	return (
+		<Modal
+			wrapClassName="importJsonModalWrapper"
+			open={open}
+			centered
+			closable
+			keyboard
+			maskClosable
+			onCancel={handleClose}
+			destroyOnClose
+			width="60vw"
+			footer={
+				<div className={styles.footer}>
+					{isCreateError && renderError(t('error_loading_json'))}
+					{isUploadError && renderError(t('error_upload_json'))}
+
+					<div className={styles.actions}>
+						<Flex gap="small">
+							<Upload
+								accept=".json"
+								showUploadList={false}
+								multiple={false}
+								onChange={handleUpload}
+								beforeUpload={(): boolean => false}
+								action="none"
+							>
+								<Button
+									type="default"
+									className="periscope-btn"
+									icon={<MonitorDot size={14} />}
+									onClick={(): void => {
+										logEvent('Dashboard List V2: Upload JSON file clicked', {});
+									}}
+								>
+									{t('upload_json_file')}
+								</Button>
+							</Upload>
+							<Button
+								type="default"
+								className="periscope-btn"
+								icon={<Sparkles size={14} />}
+								onClick={(): void => {
+									setEditorValue(JSON.stringify(sampleDashboard, null, 2));
+									setIsUploadError(false);
+									logEvent('Dashboard List V2: Load sample clicked', {});
+								}}
+							>
+								Load sample
+							</Button>
+							<a
+								href="https://signoz.io/docs/dashboards/dashboard-templates/overview/"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<Button
+									type="default"
+									className="periscope-btn"
+									icon={<Github size={14} />}
+								>
+									{t('view_template')}&nbsp;
+									<ExternalLink size={14} />
+								</Button>
+							</a>
+						</Flex>
+
+						<Button
+							onClick={handleImport}
+							loading={isCreating}
+							className="periscope-btn primary"
+							type="primary"
+						>
+							{t('import_and_next')} &nbsp; <MoveRight size={14} />
+						</Button>
+					</div>
+				</div>
+			}
+		>
+			<div className={styles.contentContainer}>
+				<div className={styles.contentHeader}>
+					<Typography.Text>{t('import_json')}</Typography.Text>
+				</div>
+				<MEditor
+					language="json"
+					height="40vh"
+					onChange={(newValue): void => setEditorValue(newValue || '')}
+					value={editorValue}
+					options={{
+						scrollbar: { alwaysConsumeMouseWheel: false },
+						minimap: { enabled: false },
+						fontSize: 14,
+						fontFamily: 'Space Mono',
+					}}
+					theme={isDarkMode ? 'my-theme' : 'light'}
+					onMount={(_, monaco): void => {
+						document.fonts.ready.then(() => {
+							monaco.editor.remeasureFonts();
+						});
+					}}
+					beforeMount={setEditorTheme}
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+export default ImportJSONModal;

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/ImportJSONModalUtils.ts

@@ -0,0 +1,50 @@
+import {
+	DashboardtypesDashboardSpecDTO,
+	DashboardtypesPostableDashboardV2DTO,
+	TagtypesPostableTagDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+// Accept either a complete PostableDashboardV2 (flat shape with `spec` and
+// top-level `name` / `image` / `tags` / `schemaVersion`) or a bare spec — wrap
+// the latter with defaults so users can paste either shape that exists in the
+// wild (e.g. testdata/perses.json is a bare spec). The legacy nested
+// `{ metadata: { ... }, spec }` shape is also accepted and flattened.
+//
+// The backend requires `name` (immutable identifier); if the payload doesn't
+// carry one, fall back to `generateName: true` so the server assigns one.
+export function normalizeToPostable(
+	parsed: Record<string, unknown>,
+): DashboardtypesPostableDashboardV2DTO {
+	const hasSpec = 'spec' in parsed;
+	const legacyMeta = parsed.metadata as
+		| {
+				schemaVersion?: string;
+				name?: string;
+				image?: string;
+				tags?: TagtypesPostableTagDTO[] | null;
+		  }
+		| undefined;
+
+	const resolvedName = (parsed.name as string | undefined) ?? legacyMeta?.name;
+
+	if (hasSpec) {
+		return {
+			schemaVersion:
+				(parsed.schemaVersion as string) || legacyMeta?.schemaVersion || 'v6',
+			...(resolvedName ? { name: resolvedName } : { generateName: true }),
+			image: (parsed.image as string) ?? legacyMeta?.image,
+			tags:
+				(parsed.tags as TagtypesPostableTagDTO[] | null) ??
+				legacyMeta?.tags ??
+				null,
+			spec: parsed.spec as DashboardtypesDashboardSpecDTO,
+		};
+	}
+
+	return {
+		schemaVersion: 'v6',
+		generateName: true,
+		tags: null,
+		spec: parsed as unknown as DashboardtypesDashboardSpecDTO,
+	};
+}

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/sampleDashboard.json

@@ -0,0 +1,154 @@
+{
+    "display": {
+        "name": "NV dashboard with sections",
+        "description": ""
+    },
+    "datasources": {
+        "SigNozDatasource": {
+            "default": true,
+            "plugin": {
+                "kind": "signoz/Datasource",
+                "spec": {}
+            }
+        }
+    },
+    "panels": {
+        "b424e23b": {
+            "kind": "Panel",
+            "spec": {
+                "display": {
+                    "name": ""
+                },
+                "plugin": {
+                    "kind": "signoz/NumberPanel",
+                    "spec": {
+                        "formatting": {
+                            "unit": "s",
+                            "decimalPrecision": "2"
+                        }
+                    }
+                },
+                "queries": [
+                    {
+                        "kind": "TimeSeriesQuery",
+                        "spec": {
+                            "plugin": {
+                                "kind": "signoz/BuilderQuery",
+                                "spec": {
+                                    "name": "A",
+                                    "signal": "metrics",
+                                    "aggregations": [
+                                        {
+                                            "metricName": "container.cpu.time",
+                                            "reduceTo": "sum",
+                                            "spaceAggregation": "sum",
+                                            "timeAggregation": "rate"
+                                        }
+                                    ],
+                                    "filter": {
+                                        "expression": ""
+                                    }
+                                }
+                            }
+                        }
+                    }
+                ]
+            }
+        },
+        "251df4d5": {
+            "kind": "Panel",
+            "spec": {
+                "display": {
+                    "name": ""
+                },
+                "plugin": {
+                    "kind": "signoz/TimeSeriesPanel",
+                    "spec": {
+                        "visualization": {
+                            "fillSpans": false
+                        },
+                        "formatting": {
+                            "unit": "recommendations",
+                            "decimalPrecision": "2"
+                        },
+                        "chartAppearance": {
+                            "lineInterpolation": "spline",
+                            "showPoints": false,
+                            "lineStyle": "solid",
+                            "fillMode": "none",
+                            "spanGaps": {"fillOnlyBelow": true}
+                        },
+                        "legend": {
+                            "position": "bottom"
+                        }
+                    }
+                },
+                "queries": [
+                    {
+                        "kind": "TimeSeriesQuery",
+                        "spec": {
+                            "plugin": {
+                                "kind": "signoz/BuilderQuery",
+                                "spec": {
+                                    "name": "A",
+                                    "signal": "metrics",
+                                    "aggregations": [
+                                        {
+                                            "metricName": "app_recommendations_counter",
+                                            "reduceTo": "sum",
+                                            "spaceAggregation": "sum",
+                                            "timeAggregation": "rate"
+                                        }
+                                    ],
+                                    "filter": {
+                                        "expression": ""
+                                    }
+                                }
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "layouts": [
+        {
+            "kind": "Grid",
+            "spec": {
+                "display": {
+                    "title": "Bravo"
+                },
+                "items": [
+                    {
+                        "x": 0,
+                        "y": 0,
+                        "width": 6,
+                        "height": 6,
+                        "content": {
+                            "$ref": "#/spec/panels/b424e23b"
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            "kind": "Grid",
+            "spec": {
+                "display": {
+                    "title": "Alpha"
+                },
+                "items": [
+                    {
+                        "x": 0,
+                        "y": 0,
+                        "width": 6,
+                        "height": 6,
+                        "content": {
+                            "$ref": "#/spec/panels/251df4d5"
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+}

frontend/src/pages/DashboardsListPageV2/components/ListHeader/ListHeader.module.scss

@@ -0,0 +1,182 @@
+.wrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 16px;
+	height: 44px;
+	flex-shrink: 0;
+	border-radius: 6px 6px 0px 0px;
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
+	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+}
+
+.label {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.rightActions {
+	display: flex;
+	gap: 4px;
+	color: white;
+}
+
+// Shared trigger button for the sort + configure-group icons in the right
+// actions cluster. Provides a square hover/active background so users know
+// which icon they're targeting.
+.iconTrigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: 4px;
+	color: inherit;
+	cursor: pointer;
+	transition: background 120ms ease;
+
+	&:hover,
+	&:focus-visible {
+		background: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
+		outline: none;
+	}
+
+	&:active,
+	&[aria-expanded='true'] {
+		background: color-mix(in srgb, var(--l1-foreground) 20%, transparent);
+	}
+}
+
+.sortContent {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 140px;
+}
+
+.sortHeading {
+	color: var(--l3-foreground);
+	font-family: Inter;
+	font-size: 11px;
+	font-style: normal;
+	font-weight: var(--font-weight-semibold);
+	line-height: 18px;
+	letter-spacing: 0.88px;
+	text-transform: uppercase;
+	padding: 12px 18px 6px 14px;
+}
+
+.sortDivider {
+	width: 100%;
+	height: 1px;
+	background: var(--l1-border);
+	margin: 4px 0;
+}
+
+.sortButton {
+	text-align: start;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: 0.14px;
+	padding: 12px 18px 12px 14px;
+	height: auto;
+}
+
+.configureContent {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	padding: 4px;
+}
+
+.configureItem {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	padding: 8px 12px;
+	background: transparent;
+	border: none;
+	border-radius: 4px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: 0.14px;
+	text-align: left;
+	cursor: pointer;
+	transition: background 120ms ease;
+
+	&:hover,
+	&:focus-visible {
+		background: color-mix(in srgb, var(--l1-foreground) 10%, transparent);
+		outline: none;
+	}
+
+	&:active {
+		background: color-mix(in srgb, var(--l1-foreground) 18%, transparent);
+	}
+}
+
+.configureIcon {
+	display: inline-flex;
+	width: 16px;
+	height: 16px;
+	flex: 0 0 16px;
+	align-items: center;
+	justify-content: center;
+}
+
+:global(.sortDashboardsPopover) {
+	:global(.ant-popover-inner) {
+		display: flex;
+		padding: 0px;
+		align-items: center;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		gap: 16px;
+	}
+}
+
+:global(.configureGroupPopover) {
+	:global(.ant-popover-inner) {
+		display: flex;
+		align-items: center;
+		border-radius: 4px;
+		padding: 0px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		gap: 16px;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/ListHeader/ListHeader.tsx

@@ -0,0 +1,145 @@
+import { Button, Popover, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	ArrowDownWideNarrow,
+	Check,
+	Ellipsis,
+	HdmiPort,
+} from '@signozhq/icons';
+
+import type {
+	SortColumn,
+	SortOrder,
+} from '../../hooks/useDashboardsListQueryParams';
+
+import styles from './ListHeader.module.scss';
+
+interface Props {
+	sortColumn: SortColumn;
+	onSortChange: (column: SortColumn) => void;
+	sortOrder: SortOrder;
+	onOrderChange: (order: SortOrder) => void;
+	onConfigureMetadata: () => void;
+}
+
+function ListHeader({
+	sortColumn,
+	onSortChange,
+	sortOrder,
+	onOrderChange,
+	onConfigureMetadata,
+}: Props): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<Typography.Text className={styles.label}>All Dashboards</Typography.Text>
+			<section className={styles.rightActions}>
+				<Tooltip title="Sort">
+					<Popover
+						trigger="click"
+						content={
+							<div className={styles.sortContent}>
+								<Typography.Text className={styles.sortHeading}>
+									Sort By
+								</Typography.Text>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onSortChange('name')}
+									data-testid="sort-by-name"
+								>
+									Name
+									{sortColumn === 'name' && <Check size={14} />}
+								</Button>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onSortChange('created_at')}
+									data-testid="sort-by-last-created"
+								>
+									Last created
+									{sortColumn === 'created_at' && <Check size={14} />}
+								</Button>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onSortChange('updated_at')}
+									data-testid="sort-by-last-updated"
+								>
+									Last updated
+									{sortColumn === 'updated_at' && <Check size={14} />}
+								</Button>
+								<div className={styles.sortDivider} />
+								<Typography.Text className={styles.sortHeading}>Order</Typography.Text>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onOrderChange('asc')}
+									data-testid="sort-order-asc"
+								>
+									Ascending
+									{sortOrder === 'asc' && <Check size={14} />}
+								</Button>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onOrderChange('desc')}
+									data-testid="sort-order-desc"
+								>
+									Descending
+									{sortOrder === 'desc' && <Check size={14} />}
+								</Button>
+							</div>
+						}
+						rootClassName="sortDashboardsPopover"
+						placement="bottomRight"
+						arrow={false}
+					>
+						<button
+							type="button"
+							className={styles.iconTrigger}
+							data-testid="sort-by"
+							aria-label="Sort"
+						>
+							<ArrowDownWideNarrow size={14} />
+						</button>
+					</Popover>
+				</Tooltip>
+				<Popover
+					trigger="click"
+					content={
+						<div className={styles.configureContent}>
+							<button
+								type="button"
+								className={styles.configureItem}
+								onClick={(e): void => {
+									e.preventDefault();
+									e.stopPropagation();
+									onConfigureMetadata();
+								}}
+								data-testid="configure-metadata-trigger"
+							>
+								<span className={styles.configureIcon}>
+									<HdmiPort size={14} />
+								</span>
+								<span>Configure metadata</span>
+							</button>
+						</div>
+					}
+					rootClassName="configureGroupPopover"
+					placement="bottomRight"
+					arrow={false}
+				>
+					<button
+						type="button"
+						className={styles.iconTrigger}
+						aria-label="More options"
+					>
+						<Ellipsis size={14} />
+					</button>
+				</Popover>
+			</section>
+		</div>
+	);
+}
+
+export default ListHeader;

frontend/src/pages/DashboardsListPageV2/components/SearchBar/SearchBar.module.scss

@@ -0,0 +1,24 @@
+.submit {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: 3px;
+	color: inherit;
+	cursor: pointer;
+	transition: background 120ms ease;
+
+	&:hover,
+	&:focus-visible {
+		background: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
+		outline: none;
+	}
+
+	&:active {
+		background: color-mix(in srgb, var(--l1-foreground) 20%, transparent);
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,49 @@
+import { ChangeEvent, KeyboardEvent, MouseEvent } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Color } from '@signozhq/design-tokens';
+import { CornerDownLeft, Search } from '@signozhq/icons';
+
+import styles from './SearchBar.module.scss';
+
+interface Props {
+	value: string;
+	onChange: (value: string) => void;
+	onSubmit: () => void;
+}
+
+function SearchBar({ value, onChange, onSubmit }: Props): JSX.Element {
+	return (
+		<Input
+			placeholder="Search with DSL (e.g. name CONTAINS 'foo')"
+			prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
+			suffix={
+				<button
+					type="button"
+					className={styles.submit}
+					aria-label="Run search"
+					data-testid="dashboards-list-search-submit"
+					onMouseDown={(e: MouseEvent<HTMLButtonElement>): void => {
+						// Prevent the input's blur from firing first and double-submitting.
+						e.preventDefault();
+					}}
+					onClick={onSubmit}
+				>
+					<CornerDownLeft size={12} color={Color.BG_VANILLA_400} />
+				</button>
+			}
+			value={value}
+			testId="dashboards-list-search"
+			onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+				onChange(e.target.value)
+			}
+			onBlur={onSubmit}
+			onKeyDown={(e: KeyboardEvent<HTMLInputElement>): void => {
+				if (e.key === 'Enter') {
+					onSubmit();
+				}
+			}}
+		/>
+	);
+}
+
+export default SearchBar;

frontend/src/pages/DashboardsListPageV2/components/states/EmptyState/EmptyState.module.scss

@@ -0,0 +1,40 @@
+.wrapper {
+	composes: cardWrapper from '../states.module.scss';
+	padding: 105px 141px;
+}
+
+.image {
+	width: 32px;
+	height: 32px;
+}
+
+.copy {
+	margin-top: 4px;
+}
+
+.noDashboard {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l1-foreground);
+	font-weight: var(--font-weight-medium);
+}
+
+.info {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l2-foreground);
+	font-weight: var(--font-weight-normal);
+}
+
+.actions {
+	display: flex;
+	gap: 24px;
+	align-items: center;
+	margin-top: 24px;
+}
+
+.learnMore {
+	composes: learnMoreLink from '../states.module.scss';
+}
+
+.learnMoreArrow {
+	composes: learnMoreArrow from '../states.module.scss';
+}

frontend/src/pages/DashboardsListPageV2/components/states/EmptyState/EmptyState.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { ArrowUpRight } from '@signozhq/icons';
+import logEvent from 'api/common/logEvent';
+
+import dashboardsUrl from '@/assets/Icons/dashboards.svg';
+
+import styles from './EmptyState.module.scss';
+import { openInNewTab } from 'utils/navigation';
+
+interface Props {
+	createDropdown?: ReactNode;
+}
+
+const LEARN_MORE_HREF =
+	'https://signoz.io/docs/userguide/manage-dashboards?utm_source=product&utm_medium=dashboard-list-empty-state';
+
+function EmptyState({ createDropdown }: Props): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<img src={dashboardsUrl} alt="dashboards" className={styles.image} />
+			<section className={styles.copy}>
+				<Typography.Text className={styles.noDashboard}>
+					No dashboards yet.{' '}
+				</Typography.Text>
+				<Typography.Text className={styles.info}>
+					Create a dashboard to start visualizing your data
+				</Typography.Text>
+			</section>
+
+			{createDropdown ? (
+				<section className={styles.actions}>
+					{createDropdown}
+					<Button
+						variant="link"
+						color="primary"
+						className={styles.learnMore}
+						testId="learn-more"
+						onClick={(): void => {
+							logEvent('Dashboard List: Learn more clicked', {});
+							openInNewTab(LEARN_MORE_HREF);
+						}}
+					>
+						Learn more
+					</Button>
+					<ArrowUpRight size={16} className={styles.learnMoreArrow} />
+				</section>
+			) : null}
+		</div>
+	);
+}
+
+export default EmptyState;

frontend/src/pages/DashboardsListPageV2/components/states/ErrorState/ErrorState.module.scss

@@ -0,0 +1,36 @@
+.wrapper {
+	composes: cardWrapper from '../states.module.scss';
+	padding: 105px 141px;
+	gap: 4px;
+}
+
+.img {
+	max-width: 100%;
+}
+
+.errorText {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l1-foreground);
+	font-weight: var(--font-weight-medium);
+}
+
+.errorDetail {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l2-foreground);
+	font-weight: var(--font-weight-normal);
+}
+
+.actionButtons {
+	display: flex;
+	gap: 24px;
+	align-items: center;
+	margin-top: 20px;
+}
+
+.learnMore {
+	composes: learnMoreLink from '../states.module.scss';
+}
+
+.learnMoreArrow {
+	composes: learnMoreArrow from '../states.module.scss';
+}

frontend/src/pages/DashboardsListPageV2/components/states/ErrorState/ErrorState.tsx

@@ -0,0 +1,81 @@
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { ArrowUpRight, RotateCw } from '@signozhq/icons';
+import { handleContactSupport } from 'container/Integrations/utils';
+
+import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
+
+import { formatQueryErrorMessage } from '../../../utils';
+import styles from './ErrorState.module.scss';
+
+interface Props {
+	isCloudUser: boolean;
+	onRetry: () => void;
+	httpStatus?: number;
+	errorMessage?: string;
+}
+
+const GENERIC_MESSAGE =
+	'Something went wrong :/ Please retry or contact support.';
+const INVALID_QUERY_FALLBACK = 'Please review the syntax and try again.';
+
+function ErrorState({
+	isCloudUser,
+	onRetry,
+	httpStatus,
+	errorMessage,
+}: Props): JSX.Element {
+	// 4xx responses are client errors — the same request will keep failing.
+	// Surface the BE-provided detail (e.g. DSL parse errors) and skip Retry.
+	const isClientError =
+		httpStatus !== undefined && httpStatus >= 400 && httpStatus < 500;
+
+	const cleanedDetail = formatQueryErrorMessage(errorMessage);
+
+	return (
+		<div className={styles.wrapper}>
+			<img src={awwSnapUrl} alt="something went wrong" className={styles.img} />
+
+			{isClientError ? (
+				<>
+					<Typography.Text className={styles.errorText}>
+						Invalid query
+					</Typography.Text>
+					<Typography.Text className={styles.errorDetail}>
+						{cleanedDetail || INVALID_QUERY_FALLBACK}
+					</Typography.Text>
+				</>
+			) : (
+				<Typography.Text className={styles.errorText}>
+					{GENERIC_MESSAGE}
+				</Typography.Text>
+			)}
+
+			<section className={styles.actionButtons}>
+				{!isClientError && (
+					<Button
+						variant="outlined"
+						color="secondary"
+						prefix={<RotateCw size={16} />}
+						onClick={onRetry}
+						testId="dashboards-list-retry"
+					>
+						Retry
+					</Button>
+				)}
+				<Button
+					variant="link"
+					color="primary"
+					className={styles.learnMore}
+					onClick={(): void => handleContactSupport(isCloudUser)}
+					testId="dashboards-list-contact-support"
+				>
+					Contact Support
+				</Button>
+				<ArrowUpRight size={16} className={styles.learnMoreArrow} />
+			</section>
+		</div>
+	);
+}
+
+export default ErrorState;

frontend/src/pages/DashboardsListPageV2/components/states/LoadingState/LoadingState.module.scss

@@ -0,0 +1,11 @@
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	margin-top: 16px;
+}
+
+.skeleton {
+	height: 125px;
+	width: 100%;
+}

frontend/src/pages/DashboardsListPageV2/components/states/LoadingState/LoadingState.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from 'antd';
+
+import styles from './LoadingState.module.scss';
+
+function LoadingState(): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+		</div>
+	);
+}
+
+export default LoadingState;

frontend/src/pages/DashboardsListPageV2/components/states/NoResultsState/NoResultsState.module.scss

@@ -0,0 +1,5 @@
+.wrapper {
+	composes: cardWrapper from '../states.module.scss';
+	padding: 105px 190px;
+	gap: 8px;
+}

frontend/src/pages/DashboardsListPageV2/components/states/NoResultsState/NoResultsState.tsx

@@ -0,0 +1,22 @@
+import { Typography } from '@signozhq/ui/typography';
+
+import emptyStateUrl from '@/assets/Icons/emptyState.svg';
+
+import styles from './NoResultsState.module.scss';
+
+interface Props {
+	searchString: string;
+}
+
+function NoResultsState({ searchString }: Props): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<img src={emptyStateUrl} alt="img" height={32} width={32} />
+			<Typography.Text>
+				No dashboards found for {searchString}. Create a new dashboard?
+			</Typography.Text>
+		</div>
+	);
+}
+
+export default NoResultsState;

frontend/src/pages/DashboardsListPageV2/components/states/states.module.scss

@@ -0,0 +1,34 @@
+// Shared building blocks for the dashboards-list view states.
+// Composed via CSS-modules `composes:` from each state's own SCSS.
+
+.cardWrapper {
+	display: flex;
+	flex-direction: column;
+	height: 320px;
+	margin-top: 16px;
+	justify-content: center;
+	align-items: flex-start;
+	border-radius: 6px;
+	border: 1px dashed var(--l1-border);
+}
+
+.bodyText {
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	line-height: 18px;
+	letter-spacing: -0.07px;
+}
+
+.learnMoreLink {
+	composes: bodyText;
+	color: var(--bg-robin-400);
+	font-weight: var(--font-weight-medium);
+	padding: 0px;
+}
+
+.learnMoreArrow {
+	margin-left: -20px;
+	color: var(--bg-robin-400);
+	cursor: pointer;
+}

frontend/src/pages/DashboardsListPageV2/hooks/useDashboardsListQueryParams.ts

@@ -0,0 +1,36 @@
+import {
+	parseAsInteger,
+	parseAsString,
+	parseAsStringLiteral,
+	useQueryState,
+	type Options,
+	type UseQueryStateReturn,
+} from 'nuqs';
+
+export const SORT_COLUMNS = ['updated_at', 'created_at', 'name'] as const;
+export type SortColumn = (typeof SORT_COLUMNS)[number];
+
+export const SORT_ORDERS = ['asc', 'desc'] as const;
+export type SortOrder = (typeof SORT_ORDERS)[number];
+
+const opts: Options = { history: 'push' };
+
+export const useSortColumn = (): UseQueryStateReturn<SortColumn, SortColumn> =>
+	useQueryState(
+		'sort',
+		parseAsStringLiteral(SORT_COLUMNS)
+			.withDefault('updated_at')
+			.withOptions(opts),
+	);
+
+export const useSortOrder = (): UseQueryStateReturn<SortOrder, SortOrder> =>
+	useQueryState(
+		'order',
+		parseAsStringLiteral(SORT_ORDERS).withDefault('desc').withOptions(opts),
+	);
+
+export const usePage = (): UseQueryStateReturn<number, number> =>
+	useQueryState('page', parseAsInteger.withDefault(1).withOptions(opts));
+
+export const useSearch = (): UseQueryStateReturn<string, string> =>
+	useQueryState('search', parseAsString.withDefault('').withOptions(opts));