Merge branch 'main' into SIG-1709-custom-domain

feat: removed the sso auth announcement banner (#10471 )
* feat: removed the sso auth announcement banner * feat: updated icon to use signozhq icons
2026-03-02 20:12:08 +00:00 · 2026-03-02 19:08:44 +05:30 · 2026-03-02 19:00:03 +05:30 · 2026-03-02 18:04:15 +05:30 · 2026-03-02 11:52:50 +00:00 · 2026-03-02 12:26:16 +05:30
41 changed files with 2197 additions and 1185 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -53,6 +53,7 @@
 		"@signozhq/combobox": "0.0.2",
 		"@signozhq/command": "0.0.0",
 		"@signozhq/design-tokens": "2.1.1",
+		"@signozhq/dialog": "0.0.2",
 		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
@@ -290,4 +291,4 @@
 		"on-headers": "^1.1.0",
 		"tmp": "0.2.4"
 	}
-}
+}
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -165,11 +165,6 @@ export const MySettings = Loadable(
 	() => import(/* webpackChunkName: "All MySettings" */ 'pages/Settings'),
 );

-export const CustomDomainSettings = Loadable(
-	() =>
-		import(/* webpackChunkName: "Custom Domain Settings" */ 'pages/Settings'),
-);
-
 export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
--- a/frontend/src/auto-import-registry.d.ts
+++ b/frontend/src/auto-import-registry.d.ts
@@ -18,6 +18,7 @@ import '@signozhq/checkbox';
 import '@signozhq/combobox';
 import '@signozhq/command';
 import '@signozhq/design-tokens';
+import '@signozhq/dialog';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -29,7 +29,6 @@ export enum LOCALSTORAGE {
 	DONT_SHOW_SLOW_API_WARNING = 'DONT_SHOW_SLOW_API_WARNING',
 	METRICS_LIST_OPTIONS = 'METRICS_LIST_OPTIONS',
 	SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS',
-	BANNER_DISMISSED = 'BANNER_DISMISSED',
 	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
 	FUNNEL_STEPS = 'FUNNEL_STEPS',
 	SPAN_DETAILS_PINNED_ATTRIBUTES = 'SPAN_DETAILS_PINNED_ATTRIBUTES',
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -38,7 +38,6 @@ const ROUTES = {
 	SETTINGS: '/settings',
 	MY_SETTINGS: '/settings/my-settings',
 	ORG_SETTINGS: '/settings/org-settings',
-	CUSTOM_DOMAIN_SETTINGS: '/settings/custom-domain-settings',
 	API_KEYS: '/settings/api-keys',
 	INGESTION_SETTINGS: '/settings/ingestion-settings',
 	SOMETHING_WENT_WRONG: '/something-went-wrong',
--- a/frontend/src/container/CustomDomainSettings/CustomDomainEditModal.tsx
+++ b/frontend/src/container/CustomDomainSettings/CustomDomainEditModal.tsx
@@ -0,0 +1,200 @@
+import { useEffect, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Color } from '@signozhq/design-tokens';
+import { DialogWrapper } from '@signozhq/dialog';
+import { Input } from '@signozhq/input';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
+import { AlertCircle, CheckCircle2, Loader2 } from 'lucide-react';
+
+interface CustomDomainEditModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+	customDomainSubdomain?: string;
+	dnsSuffix: string;
+	isLoading: boolean;
+	updateDomainError: AxiosError<RenderErrorResponseDTO> | null;
+	onClearError: () => void;
+	onSubmit: (subdomain: string) => void;
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export default function CustomDomainEditModal({
+	isOpen,
+	onClose,
+	customDomainSubdomain,
+	dnsSuffix,
+	isLoading,
+	updateDomainError,
+	onClearError,
+	onSubmit,
+}: CustomDomainEditModalProps): JSX.Element {
+	const [value, setValue] = useState(customDomainSubdomain ?? '');
+	const [validationError, setValidationError] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (isOpen) {
+			setValue(customDomainSubdomain ?? '');
+		}
+	}, [isOpen, customDomainSubdomain]);
+
+	const handleClose = (): void => {
+		setValidationError(null);
+		onClearError();
+		onClose();
+	};
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+		setValue(e.target.value);
+		setValidationError(null);
+		onClearError();
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+		if (e.key === 'Enter') {
+			handleSubmit();
+		}
+	};
+
+	const handleSubmit = (): void => {
+		if (!value) {
+			setValidationError('This field is required');
+			return;
+		}
+		if (value.length < 3) {
+			setValidationError('Minimum 3 characters required');
+			return;
+		}
+		onSubmit(value);
+	};
+
+	const is409 = updateDomainError?.status === 409;
+
+	const apiErrorMessage =
+		(updateDomainError?.response?.data as RenderErrorResponseDTO)?.error
+			?.message ?? null;
+
+	const errorMessage =
+		validationError ??
+		(is409
+			? apiErrorMessage ??
+			  "You've already updated the custom domain once today. Please contact support."
+			: apiErrorMessage);
+
+	const hasError = Boolean(errorMessage);
+
+	const statusIcon = ((): JSX.Element => {
+		if (isLoading) {
+			return <Loader2 size={16} className="animate-spin edit-modal-status-icon" />;
+		}
+
+		if (hasError) {
+			return <AlertCircle size={16} color={Color.BG_CHERRY_500} />;
+		}
+
+		return <CheckCircle2 size={16} color={Color.BG_FOREST_500} />;
+	})();
+
+	return (
+		<DialogWrapper
+			className="edit-workspace-modal"
+			title="Edit Workspace Link"
+			open={isOpen}
+			onOpenChange={(open: boolean): void => {
+				if (!open) {
+					handleClose();
+				}
+			}}
+			width="base"
+		>
+			<div className="edit-workspace-modal-content">
+				<p className="edit-modal-description">
+					Enter your preferred subdomain to create a unique URL for your team. Need
+					help?{' '}
+					<a
+						href="https://signoz.io/support"
+						target="_blank"
+						rel="noreferrer"
+						className="edit-modal-link"
+					>
+						Contact support.
+					</a>
+				</p>
+
+				<div className="edit-modal-field">
+					<label
+						htmlFor="workspace-url-input"
+						className={`edit-modal-label${
+							hasError ? ' edit-modal-label--error' : ''
+						}`}
+					>
+						Workspace URL
+					</label>
+
+					<div
+						className={`edit-modal-input-wrapper${
+							hasError ? ' edit-modal-input-wrapper--error' : ''
+						}`}
+					>
+						<div className="edit-modal-input-field">
+							{statusIcon}
+							<Input
+								id="workspace-url-input"
+								aria-describedby="workspace-url-helper"
+								aria-invalid={hasError}
+								value={value}
+								onChange={handleChange}
+								onKeyDown={handleKeyDown}
+								autoFocus
+							/>
+						</div>
+						<div className="edit-modal-input-suffix">{dnsSuffix}</div>
+					</div>
+
+					<span
+						id="workspace-url-helper"
+						className={`edit-modal-helper${
+							hasError ? ' edit-modal-helper--error' : ''
+						}`}
+					>
+						{hasError
+							? errorMessage
+							: "To help you easily explore SigNoz, we've selected a tenant sub domain name for you."}
+					</span>
+				</div>
+
+				<div className="edit-modal-note">
+					<span className="edit-modal-note-emoji">🚧</span>
+					<span className="edit-modal-note-text">
+						Note that your previous URL still remains accessible. Your access
+						credentials for the new URL remain the same.
+					</span>
+				</div>
+
+				<div className="edit-modal-footer">
+					{is409 ? (
+						<LaunchChatSupport
+							attributes={{ screen: 'Custom Domain Settings' }}
+							eventName="Custom Domain Settings: Facing Issues Updating Custom Domain"
+							message="Hi Team, I need help with updating custom domain"
+							buttonText="Contact Support"
+						/>
+					) : (
+						<Button
+							variant="solid"
+							size="md"
+							color="primary"
+							className="edit-modal-apply-btn"
+							onClick={handleSubmit}
+							disabled={isLoading}
+							loading={isLoading}
+						>
+							Apply Changes
+						</Button>
+					)}
+				</div>
+			</div>
+		</DialogWrapper>
+	);
+}
--- a/frontend/src/container/CustomDomainSettings/CustomDomainSettings.styles.scss
+++ b/frontend/src/container/CustomDomainSettings/CustomDomainSettings.styles.scss
@@ -1,262 +1,460 @@
-.custom-domain-settings-container {
-	margin-top: 24px;
+.beacon {
+	position: relative;
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset: 1px;
+		border-radius: 50%;
+		background: rgba(78, 116, 248, 0.2);
+	}
+
+	&::after {
+		content: '';
+		position: absolute;
+		left: 5px;
+		top: 5px;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background: var(--primary);
+	}
+}
+
+.custom-domain-card {
+	width: 100%;
+	max-width: 768px;
+	border-radius: 4px;
+	border: 1px solid var(--l2-border);
+	background: var(--l2-background);
+	overflow: hidden;
+
+	&--loading {
+		padding: var(--padding-3);
+	}
+
+	.custom-domain-card-top {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		padding: var(--padding-3);
+		gap: var(--spacing-6);
+
+		.custom-domain-edit-button {
+			border: 1px solid var(--l3-border);
+			background: var(--l3-background);
+
+			&:hover {
+				background: var(--l3-background-hover);
+			}
+		}
+	}
+
+	.custom-domain-card-info {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-6);
+	}
+
+	.custom-domain-card-name-row {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-5);
+	}
+
+	.custom-domain-card-org-name {
+		color: var(--l1-foreground);
+		font-size: var(--paragraph-base-500-font-size);
+		font-weight: var(--paragraph-base-500-font-weight);
+		line-height: var(--paragraph-base-500-line-height);
+		letter-spacing: var(--paragraph-base-500-letter-spacing);
+	}
+
+	.custom-domain-card-meta-row {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-10);
+		padding-left: 26px;
+	}
+
+	.custom-domain-card-meta-timezone {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--spacing-3);
+		color: var(--l1-foreground);
+		font-variant-numeric: lining-nums tabular-nums slashed-zero;
+		font-feature-settings: 'dlig' on, 'salt' on;
+		font-family: Inter;
+		font-size: var(--paragraph-small-400-font-size);
+		font-style: normal;
+		font-weight: var(--paragraph-small-400-font-weight);
+		line-height: var(--paragraph-small-400-line-height);
+		letter-spacing: var(--paragraph-small-400-letter-spacing);
+		text-transform: uppercase;
+
+		svg {
+			flex-shrink: 0;
+			color: var(--l1-foreground);
+		}
+	}
+
+	.custom-domain-callout {
+		margin: 0 var(--margin-3) var(--margin-3);
+		font-size: var(--paragraph-base-400-font-size);
+		max-width: 742px;
+		--callout-background: var(--primary);
+		--callout-border-color: var(--callout-primary-border);
+		--callout-icon-color: var(--primary);
+		--callout-title-color: var(--callout-primary-title);
+	}
+
+	.custom-domain-card-divider {
+		height: 1px;
+		background: var(--l2-border);
+		margin: 0;
+	}
+
+	.custom-domain-card-bottom {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-5);
+		padding: var(--padding-3);
+	}
+
+	.custom-domain-card-license {
+		color: var(--l1-foreground);
+		font-size: var(--paragraph-base-400-font-size);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+	}
+
+	.custom-domain-plan-badge {
+		display: inline-flex;
+		align-items: center;
+		padding: 0 2px;
+		border-radius: 2px;
+		background: var(--l2-background);
+		color: var(--l2-foreground);
+		font-family: 'SF Mono', 'Fira Code', monospace;
+		font-size: var(--paragraph-base-400-font-size);
+		line-height: var(--line-height-20);
+	}
+}
+
+.workspace-url-trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	background: none;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	color: var(--l1-foreground);
+	font-size: var(--font-size-xs);
+	line-height: var(--line-height-18);
+	letter-spacing: -0.06px;
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	svg {
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+	}
+}
+
+.workspace-url-dropdown {
+	border-radius: 4px;
+	border: 1px solid var(--l1-border);
+	background: var(--l1-background);
+	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	padding: var(--padding-2) 0;
+	min-width: 200px;
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
+}
+
+.workspace-url-dropdown-header {
+	color: var(--l2-foreground);
+	font-size: var(--paragraph-base-400-font-size);
+	line-height: var(--line-height-20);
+	letter-spacing: -0.07px;
+	padding: 0 var(--padding-3) var(--padding-2);
+}
+
+.workspace-url-dropdown-divider {
+	height: 1px;
+	background: var(--l1-border);
+	margin-bottom: var(--margin-1);
+}
+
+.workspace-url-dropdown-item {
+	display: flex;
 	align-items: center;
-	gap: 24px;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+	padding: 5px var(--padding-3);
+	cursor: pointer;
+	text-decoration: none;
+	transition: background 0.15s ease;
+
+	&:hover {
+		background: var(--l1-background-hover);
+
+		.workspace-url-dropdown-item-label {
+			text-decoration: underline;
+		}
+
+		.workspace-url-dropdown-item-external {
+			opacity: 1;
+		}
+	}
+
+	&--active {
+		background: var(--l1-background-hover);
+	}
+}
+
+.workspace-url-dropdown-item-external {
+	color: var(--l2-foreground);
+	flex-shrink: 0;
+	opacity: 0.5;
+	transition: opacity 0.15s ease;
+}
+
+.workspace-url-dropdown-item-label {
+	font-size: var(--paragraph-base-400-font-size);
+	line-height: var(--line-height-20);
+	letter-spacing: -0.07px;
+	color: var(--l2-foreground);
+
+	.workspace-url-dropdown-item--active & {
+		color: var(--l1-foreground);
+	}
+}
+
+.workspace-url-dropdown-item-check {
+	color: var(--l1-foreground);
+	flex-shrink: 0;
+}
+
+.edit-workspace-modal-content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-12);
+}
+
+// Description
+.edit-modal-description {
+	margin: 0;
+	color: var(--l1-foreground);
+	font-size: var(--paragraph-base-400-font-size);
+	line-height: var(--line-height-20);
+	letter-spacing: -0.07px;
+}
+
+.edit-modal-link {
+	color: var(--primary);
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+// Input field group
+.edit-modal-field {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+}
+
+.edit-modal-label {
+	color: var(--l2-foreground);
+	font-size: var(--paragraph-base-500-font-size);
+	font-weight: var(--paragraph-base-500-font-weight);
+	line-height: var(--paragraph-base-500-line-height);
+
+	&--error {
+		color: var(--destructive);
+	}
+}
+
+.edit-modal-input-wrapper {
+	display: flex;
+	align-items: stretch;
+
+	.edit-modal-input-field {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-3);
+		height: 44px;
+		padding: 6px var(--padding-3);
+		background: var(--l1-background);
+		border: 1px solid var(--l1-border);
+		border-right: none;
+		border-radius: 2px 0 0 2px;
+
+		svg {
+			flex-shrink: 0;
+		}
+
+		input {
+			flex: 1;
+			width: 100%;
+			height: auto;
+			background: transparent;
+			border: none;
+			border-radius: 0;
+			outline: none;
+			box-shadow: none;
+			color: var(--l1-foreground);
+			font-size: var(--paragraph-base-400-font-size);
+			line-height: var(--line-height-20);
+			padding: 0;
+
+			&:focus,
+			&:focus-visible {
+				outline: none;
+				box-shadow: none;
+			}
+		}
+	}
+}
+
+.edit-modal-input-suffix {
+	display: flex;
+	align-items: center;
+	padding: 6px var(--padding-3);
+	background: var(--l2-background);
+	border: 1px solid var(--l1-border);
+	border-left: none;
+	border-radius: 0 2px 2px 0;
+	color: var(--l2-foreground);
+	font-size: var(--paragraph-base-400-font-size);
+	line-height: var(--line-height-20);
+	white-space: nowrap;
+}
+
+.edit-modal-helper {
+	color: var(--l2-foreground);
+	font-size: var(--font-size-xs);
+	line-height: var(--line-height-20);
+
+	&--error {
+		color: var(--destructive);
+	}
+}
+
+.edit-modal-status-icon {
+	color: var(--l2-foreground);
+}
+
+.edit-modal-note {
+	display: flex;
+	gap: var(--spacing-6);
+	align-items: flex-start;
+	padding: var(--padding-3);
+	border-radius: 4px;
+	background: var(--l2-background);
+}
+
+.edit-modal-note-emoji {
+	font-size: 16px;
+	line-height: var(--line-height-20);
+	flex-shrink: 0;
+	margin-top: 2px;
+}
+
+.edit-modal-note-text {
+	color: var(--l2-foreground);
+	font-size: var(--paragraph-base-400-font-size);
+	line-height: var(--line-height-20);
+	letter-spacing: -0.07px;
+}
+
+.edit-modal-footer {
+	.facing-issue-button {
+		width: 100%;
+
+		.periscope-btn {
+			width: 100%;
+			border-radius: 2px;
+			background: var(--primary);
+			border: none;
+			color: var(--primary-foreground);
+			font-size: var(--paragraph-base-500-font-size);
+			font-weight: var(--paragraph-base-500-font-weight);
+			line-height: var(--paragraph-base-500-line-height);
+			height: 36px;
+
+			.ant-btn-icon {
+				display: none;
+			}
+
+			&:hover {
+				background: var(--primary) !important;
+				border: none !important;
+				color: var(--primary-foreground) !important;
+			}
+		}
+	}
+}
+
+.edit-modal-apply-btn {
 	width: 100%;
+}

-	.custom-domain-settings-content {
-		width: calc(100% - 30px);
-		max-width: 736px;
+.custom-domain-toast {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	padding: 0 16px;
+	height: 40px;
+	width: min(942px, calc(100vw - 32px));
+	border-radius: 4px;
+	background: var(--primary-background);
+	color: var(--bg-base-white);

-		.title {
-			color: var(--bg-vanilla-100);
-			font-size: var(--font-size-lg);
-			font-style: normal;
-			font-weight: var(--font-weight-normal);
-			line-height: 28px; /* 155.556% */
-			letter-spacing: -0.09px;
-		}
+	.custom-domain-toast-message {
+		font-size: var(--paragraph-base-400-font-size);
+		line-height: var(--line-height-20);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex: 1;
+	}

-		.subtitle {
-			color: var(--bg-vanilla-400);
-			font-size: var(--font-size-sm);
-			font-style: normal;
-			font-weight: var(--font-weight-normal);
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
+	.custom-domain-toast-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+		flex-shrink: 0;
+	}
+
+	.custom-domain-toast-visit-btn {
+		text-decoration: none;
+		background: var(--bg-robin-600);
+
+		&:hover {
+			background: var(--primary-background-hover);
 		}
 	}

-	.custom-domain-settings-card {
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-400);
+	.custom-domain-toast-dismiss-btn {
+		color: var(--callout-primary-icon);
+		height: 24px;
+		width: 24px;

-		.ant-card-body {
-			padding: 12px;
-
-			display: flex;
-			flex-direction: column;
-
-			.custom-domain-settings-content-header {
-				color: var(--bg-vanilla-100);
-				font-size: var(--font-size-sm);
-				font-style: normal;
-				font-weight: var(--font-weight-medium);
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-
-			.custom-domain-settings-content-body {
-				margin-top: 12px;
-				display: flex;
-				gap: 12px;
-
-				align-items: flex-end;
-				justify-content: space-between;
-
-				.custom-domain-url-edit-btn {
-					.periscope-btn {
-						border-radius: 2px;
-						border: 1px solid var(--Slate-200, #2c3140);
-						background: var(--Ink-200, #23262e);
-					}
-				}
-			}
-
-			.custom-domain-urls {
-				display: flex;
-				flex-direction: column;
-				flex: 1;
-			}
-
-			.custom-domain-url {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-				cursor: pointer;
-
-				line-height: 24px;
-				padding: 4px 0;
-			}
-
-			.custom-domain-update-status {
-				margin-top: 12px;
-
-				color: var(--bg-robin-400);
-				font-size: 13px;
-				font-style: normal;
-				font-weight: var(--font-weight-medium);
-				line-height: 20px;
-				letter-spacing: -0.07px;
-				border-radius: 4px;
-				border: 1px solid rgba(78, 116, 248, 0.1);
-				background: rgba(78, 116, 248, 0.1);
-			}
-		}
-	}
-}
-
-.custom-domain-settings-modal {
-	.ant-modal-content {
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-500);
-		background: var(--bg-ink-400);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		padding: 0;
-
-		.ant-modal-header {
-			background: none;
-			border-bottom: 1px solid var(--bg-slate-500);
-			padding: 16px;
-			margin-bottom: 0;
-		}
-
-		.ant-modal-close-x {
-			font-size: 12px;
-		}
-
-		.ant-modal-body {
-			padding: 12px 16px;
-
-			.custom-domain-settings-modal-body {
-				margin-bottom: 48px;
-
-				font-size: 13px;
-				font-style: normal;
-				font-weight: var(--font-weight-normal);
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-
-		.custom-domain-settings-modal-error {
-			display: flex;
-			flex-direction: column;
-			gap: 24px;
-
-			.update-limit-reached-error {
-				display: flex;
-				padding: 20px 24px 24px 24px;
-				flex-direction: column;
-				align-items: center;
-				gap: 24px;
-				align-self: stretch;
-
-				border-radius: 4px;
-				border: 1px solid rgba(255, 205, 86, 0.2);
-				background: rgba(255, 205, 86, 0.1);
-
-				color: var(--bg-amber-400);
-				font-size: 13px;
-				font-style: normal;
-				line-height: 20px; /* 142.857% */
-			}
-
-			.ant-alert-message::first-letter {
-				text-transform: capitalize;
-			}
-		}
-
-		.custom-domain-settings-modal-footer {
-			padding: 16px 0;
-			margin-top: 0;
-
-			display: flex;
-			justify-content: flex-end;
-
-			.apply-changes-btn {
-				width: 100%;
-			}
-
-			.facing-issue-button {
-				width: 100%;
-
-				.periscope-btn {
-					width: 100%;
-
-					border-radius: 2px;
-					background: var(--bg-robin-500);
-					border: none;
-
-					color: var(--bg-vanilla-100);
-					line-height: 20px;
-
-					.ant-btn-icon {
-						display: none;
-					}
-
-					&:hover {
-						background: var(--bg-robin-500) !important;
-						border: none !important;
-						color: var(--bg-vanilla-100) !important;
-						line-height: 20px !important;
-					}
-				}
-			}
-		}
-	}
-}
-
-.lightMode {
-	.custom-domain-settings-container {
-		.custom-domain-settings-content {
-			.title {
-				color: var(--bg-ink-400);
-			}
-
-			.subtitle {
-				color: var(--bg-vanilla-400);
-			}
-		}
-
-		.custom-domain-settings-card {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-100);
-
-			.ant-card-body {
-				.custom-domain-settings-content-header {
-					color: var(--bg-ink-100);
-				}
-
-				.custom-domain-update-status {
-					color: var(--bg-robin-400);
-					border: 1px solid rgba(78, 116, 248, 0.1);
-					background: rgba(78, 116, 248, 0.1);
-				}
-
-				.custom-domain-url-edit-btn {
-					.periscope-btn {
-						border: 1px solid var(--bg-vanilla-300);
-						background: var(--bg-vanilla-100);
-						box-shadow: none;
-					}
-				}
-			}
-		}
-	}
-
-	.custom-domain-settings-modal {
-		.ant-modal-content {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-100);
-			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-
-			.ant-modal-header {
-				border-bottom: 1px solid var(--bg-vanilla-300);
-			}
-
-			.custom-domain-settings-modal-error {
-				.update-limit-reached-error {
-					border: 1px solid rgba(255, 205, 86, 0.2);
-					background: rgba(255, 205, 86, 0.1);
-
-					color: var(--bg-amber-500);
-				}
-			}
+		&:hover {
+			background: var(--primary-background-hover);
 		}
 	}
 }
--- a/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
+++ b/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
@@ -1,59 +1,88 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
-import { Color } from '@signozhq/design-tokens';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
 import {
-	Alert,
-	Button,
-	Card,
-	Form,
-	Input,
-	Modal,
-	Skeleton,
-	Tag,
-	Typography,
-} from 'antd';
+	Check,
+	ChevronDown,
+	Clock,
+	ExternalLink,
+	FilePenLine,
+	Link2,
+	SolidAlertCircle,
+	X,
+} from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { Dropdown, Skeleton } from 'antd';
 import {
 	RenderErrorResponseDTO,
 	ZeustypesHostDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { useGetHosts, usePutHost } from 'api/generated/services/zeus';
 import { AxiosError } from 'axios';
-import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
-import { useNotifications } from 'hooks/useNotifications';
-import { InfoIcon, Link2, Pencil } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
+import { useTimezone } from 'providers/Timezone';
+
+import CustomDomainEditModal from './CustomDomainEditModal';

 import './CustomDomainSettings.styles.scss';

-interface CustomDomainSettingsProps {
-	subdomain: string;
+function DomainUpdateToast({
+	toastId,
+	url,
+}: {
+	toastId: string | number;
+	url: string;
+}): JSX.Element {
+	const displayUrl = url?.split('://')[1] ?? url;
+
+	return (
+		<div className="custom-domain-toast">
+			<span className="custom-domain-toast-message">
+				Your workspace URL is being updated to <strong>{displayUrl}</strong>. This
+				may take a few minutes.
+			</span>
+			<div className="custom-domain-toast-actions">
+				<Button
+					variant="ghost"
+					size="xs"
+					className="custom-domain-toast-visit-btn"
+					suffixIcon={<ExternalLink size={12} />}
+					onClick={(): void => {
+						window.open(url, '_blank', 'noopener,noreferrer');
+					}}
+				>
+					Visit new URL
+				</Button>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="custom-domain-toast-dismiss-btn"
+					onClick={(): void => {
+						toast.dismiss(toastId);
+					}}
+					aria-label="Dismiss"
+					prefixIcon={<X size={14} />}
+				/>
+			</div>
+		</div>
+	);
 }

 export default function CustomDomainSettings(): JSX.Element {
-	const { org } = useAppContext();
-	const { notifications } = useNotifications();
+	const { org, activeLicense } = useAppContext();
+	const { timezone } = useTimezone();
 	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 	const [isPollingEnabled, setIsPollingEnabled] = useState(false);
 	const [hosts, setHosts] = useState<ZeustypesHostDTO[] | null>(null);

-	const [updateDomainError, setUpdateDomainError] = useState<AxiosError | null>(
-		null,
-	);
-
-	const [, setCopyUrl] = useCopyToClipboard();
-
 	const [
-		customDomainDetails,
-		setCustomDomainDetails,
-	] = useState<CustomDomainSettingsProps | null>();
+		updateDomainError,
+		setUpdateDomainError,
+	] = useState<AxiosError<RenderErrorResponseDTO> | null>(null);

-	const [editForm] = Form.useForm();
-
-	const handleModalClose = (): void => {
-		setIsEditModalOpen(false);
-		editForm.resetFields();
-		setUpdateDomainError(null);
-	};
+	const [customDomainSubdomain, setCustomDomainSubdomain] = useState<
+		string | undefined
+	>();

 	const {
 		data: hostsData,
@@ -67,9 +96,7 @@ export default function CustomDomainSettings(): JSX.Element {
 		isLoading: isLoadingUpdateCustomDomain,
 	} = usePutHost<AxiosError<RenderErrorResponseDTO>>();

-	const stripProtocol = (url: string): string => {
-		return url?.split('://')[1] ?? url;
-	};
+	const stripProtocol = (url: string): string => url?.split('://')[1] ?? url;

 	const dnsSuffix = useMemo(() => {
 		const defaultHost = hosts?.find((h) => h.is_default);
@@ -78,6 +105,11 @@ export default function CustomDomainSettings(): JSX.Element {
 			: '';
 	}, [hosts]);

+	const activeHost = useMemo(
+		() => hosts?.find((h) => !h.is_default) ?? hosts?.find((h) => h.is_default),
+		[hosts],
+	);
+
 	useEffect(() => {
 		if (isFetchingHosts || !hostsData) {
 			return;
@@ -85,22 +117,14 @@ export default function CustomDomainSettings(): JSX.Element {

 		if (hostsData.status === 'success') {
 			setHosts(hostsData.data.hosts ?? null);
-
-			const activeCustomDomain = hostsData.data.hosts?.find(
-				(host) => !host.is_default,
-			);
-
-			if (activeCustomDomain) {
-				setCustomDomainDetails({
-					subdomain: activeCustomDomain?.name || '',
-				});
+			const customHost = hostsData.data.hosts?.find((h) => !h.is_default);
+			if (customHost) {
+				setCustomDomainSubdomain(customHost.name || '');
 			}
 		}

 		if (hostsData.data.state !== 'HEALTHY' && isPollingEnabled) {
-			setTimeout(() => {
-				refetchHosts();
-			}, 3000);
+			setTimeout(() => refetchHosts(), 3000);
 		}

 		if (hostsData.data.state === 'HEALTHY') {
@@ -108,206 +132,175 @@ export default function CustomDomainSettings(): JSX.Element {
 		}
 	}, [hostsData, refetchHosts, isPollingEnabled, isFetchingHosts]);

-	const onUpdateCustomDomainSettings = (): void => {
-		editForm
-			.validateFields()
-			.then((values) => {
-				if (values.subdomain) {
-					updateSubDomain(
-						{ data: { name: values.subdomain } },
-						{
-							onSuccess: () => {
-								setIsPollingEnabled(true);
-								refetchHosts();
-								setIsEditModalOpen(false);
-							},
-							onError: (error: AxiosError<RenderErrorResponseDTO>) => {
-								setUpdateDomainError(error as AxiosError);
-								setIsPollingEnabled(false);
-							},
-						},
+	const handleSubmit = (subdomain: string): void => {
+		updateSubDomain(
+			{ data: { name: subdomain } },
+			{
+				onSuccess: () => {
+					setIsPollingEnabled(true);
+					refetchHosts();
+					setIsEditModalOpen(false);
+					setCustomDomainSubdomain(subdomain);
+					const newUrl = `https://${subdomain}.${dnsSuffix}`;
+					toast.custom(
+						(toastId) => <DomainUpdateToast toastId={toastId} url={newUrl} />,
+						{ duration: 5000, position: 'bottom-right' }, // this 5 sec is as per design
 					);
+				},
+				onError: (error: AxiosError<RenderErrorResponseDTO>) => {
+					setUpdateDomainError(error as AxiosError<RenderErrorResponseDTO>);
+					setIsPollingEnabled(false);
+				},
+			},
+		);
+	};

-					setCustomDomainDetails({
-						subdomain: values.subdomain,
-					});
+	const sortedHosts = useMemo(
+		() =>
+			[...(hosts ?? [])].sort((a, b) => {
+				if (a.name === activeHost?.name) {
+					return -1;
 				}
-			})
-			.catch((errorInfo) => {
-				console.error('error info', errorInfo);
-			});
-	};
+				if (b.name === activeHost?.name) {
+					return 1;
+				}
+				if (a.is_default && !b.is_default) {
+					return 1;
+				}
+				if (!a.is_default && b.is_default) {
+					return -1;
+				}
+				return 0;
+			}),
+		[hosts, activeHost],
+	);

-	const onCopyUrlHandler = (url: string): void => {
-		setCopyUrl(stripProtocol(url));
-		notifications.success({
-			message: 'Copied to clipboard',
-		});
-	};
+	const planName = activeLicense?.plan?.name;
+
+	if (isLoadingHosts) {
+		return (
+			<div className="custom-domain-card custom-domain-card--loading">
+				<Skeleton
+					active
+					title={{ width: '40%' }}
+					paragraph={{ rows: 1, width: '60%' }}
+				/>
+			</div>
+		);
+	}

 	return (
-		<div className="custom-domain-settings-container">
-			<div className="custom-domain-settings-content">
-				<header>
-					<Typography.Title className="title">
-						Custom Domain Settings
-					</Typography.Title>
-					<Typography.Text className="subtitle">
-						Personalize your workspace domain effortlessly.
-					</Typography.Text>
-				</header>
-			</div>
-
-			<div className="custom-domain-settings-content">
-				{!isLoadingHosts && (
-					<Card className="custom-domain-settings-card">
-						<div className="custom-domain-settings-content-header">
-							Team {org?.[0]?.displayName} Information
+		<>
+			<div className="custom-domain-card">
+				<div className="custom-domain-card-top">
+					<div className="custom-domain-card-info">
+						<div className="custom-domain-card-name-row">
+							<span className="beacon" />
+							<span className="custom-domain-card-org-name">
+								{org?.[0]?.displayName ? org?.[0]?.displayName : customDomainSubdomain}
+							</span>
 						</div>

-						<div className="custom-domain-settings-content-body">
-							<div className="custom-domain-urls">
-								{hosts?.map((host) => (
-									<div
-										className="custom-domain-url"
-										key={host.name}
-										onClick={(): void => onCopyUrlHandler(host.url || '')}
-									>
-										<Link2 size={12} /> {stripProtocol(host.url || '')}
-										{host.is_default && <Tag color={Color.BG_ROBIN_500}>Default</Tag>}
+						<div className="custom-domain-card-meta-row">
+							<Dropdown
+								trigger={['click']}
+								dropdownRender={(): JSX.Element => (
+									<div className="workspace-url-dropdown">
+										<span className="workspace-url-dropdown-header">
+											All Workspace URLs
+										</span>
+										<div className="workspace-url-dropdown-divider" />
+										{sortedHosts.map((host) => {
+											const isActive = host.name === activeHost?.name;
+											return (
+												<a
+													key={host.name}
+													href={host.url}
+													target="_blank"
+													rel="noopener noreferrer"
+													className={`workspace-url-dropdown-item${
+														isActive ? ' workspace-url-dropdown-item--active' : ''
+													}`}
+												>
+													<span className="workspace-url-dropdown-item-label">
+														{stripProtocol(host.url ?? '')}
+													</span>
+													{isActive ? (
+														<Check size={14} className="workspace-url-dropdown-item-check" />
+													) : (
+														<ExternalLink
+															size={12}
+															className="workspace-url-dropdown-item-external"
+														/>
+													)}
+												</a>
+											);
+										})}
 									</div>
-								))}
-							</div>
-
-							<div className="custom-domain-url-edit-btn">
+								)}
+							>
 								<Button
-									className="periscope-btn"
-									disabled={isLoadingHosts || isFetchingHosts || isPollingEnabled}
-									type="default"
-									icon={<Pencil size={10} />}
-									onClick={(): void => setIsEditModalOpen(true)}
+									type="button"
+									size="xs"
+									className="workspace-url-trigger"
+									disabled={isFetchingHosts}
 								>
-									Customize team’s URL
+									<Link2 size={12} />
+									<span>{stripProtocol(activeHost?.url ?? '')}</span>
+									<ChevronDown size={12} />
 								</Button>
-							</div>
+							</Dropdown>
+							<span className="custom-domain-card-meta-timezone">
+								<Clock size={11} />
+								{timezone.offset}
+							</span>
 						</div>
+					</div>

-						{isPollingEnabled && (
-							<Alert
-								className="custom-domain-update-status"
-								message={`Updating your URL to ⎯ ${customDomainDetails?.subdomain}.${dnsSuffix}. This may take a few mins.`}
-								type="info"
-								icon={<InfoIcon size={12} />}
-							/>
-						)}
-					</Card>
+					<Button
+						variant="solid"
+						size="sm"
+						className="custom-domain-edit-button"
+						prefixIcon={<FilePenLine size={12} />}
+						disabled={isFetchingHosts || isPollingEnabled}
+						onClick={(): void => setIsEditModalOpen(true)}
+					>
+						Edit workspace link
+					</Button>
+				</div>
+
+				{isPollingEnabled && (
+					<Callout
+						type="info"
+						showIcon
+						className="custom-domain-callout"
+						size="small"
+						icon={<SolidAlertCircle size={13} color="primary" />}
+						message={`Updating your URL to ⎯ ${customDomainSubdomain}.${dnsSuffix}. This may take a few mins.`}
+					/>
 				)}

-				{isLoadingHosts && (
-					<Card className="custom-domain-settings-card">
-						<Skeleton
-							className="custom-domain-settings-skeleton"
-							active
-							paragraph={{ rows: 2 }}
-						/>
-					</Card>
-				)}
+				<div className="custom-domain-card-divider" />
+
+				<div className="custom-domain-card-bottom">
+					<span className="beacon" />
+					<span className="custom-domain-card-license">
+						{planName && <code className="custom-domain-plan-badge">{planName}</code>}{' '}
+						license is currently active
+					</span>
+				</div>
 			</div>

-			{/* Update Custom Domain Modal */}
-			<Modal
-				className="custom-domain-settings-modal"
-				title="Customize your team’s URL"
-				open={isEditModalOpen}
-				key="edit-custom-domain-settings-modal"
-				afterClose={handleModalClose}
-				// closable
-				onCancel={handleModalClose}
-				destroyOnClose
-				footer={null}
-			>
-				<Form
-					name="edit-custom-domain-settings-form"
-					key={customDomainDetails?.subdomain}
-					form={editForm}
-					layout="vertical"
-					autoComplete="off"
-					initialValues={{
-						subdomain: customDomainDetails?.subdomain,
-					}}
-				>
-					{updateDomainError?.status !== 409 && (
-						<>
-							<div className="custom-domain-settings-modal-body">
-								Enter your preferred subdomain to create a unique URL for your team.
-								Need help? Contact support.
-							</div>
-
-							<Form.Item
-								name="subdomain"
-								label="Team’s URL subdomain"
-								rules={[{ required: true }, { type: 'string', min: 3 }]}
-							>
-								<Input
-									addonBefore={updateDomainError && <InfoIcon size={12} color="red" />}
-									placeholder="Enter Domain"
-									onChange={(): void => setUpdateDomainError(null)}
-									addonAfter={dnsSuffix}
-									autoFocus
-								/>
-							</Form.Item>
-						</>
-					)}
-
-					{updateDomainError && (
-						<div className="custom-domain-settings-modal-error">
-							{updateDomainError.status === 409 ? (
-								<Alert
-									message={
-										(updateDomainError?.response?.data as RenderErrorResponseDTO)?.error
-											?.message ||
-										'You’ve already updated the custom domain once today. To make further changes, please contact our support team for assistance.'
-									}
-									type="warning"
-									className="update-limit-reached-error"
-								/>
-							) : (
-								<Typography.Text type="danger">
-									{
-										(updateDomainError?.response?.data as RenderErrorResponseDTO)?.error
-											?.message
-									}
-								</Typography.Text>
-							)}
-						</div>
-					)}
-
-					{updateDomainError?.status !== 409 && (
-						<div className="custom-domain-settings-modal-footer">
-							<Button
-								className="periscope-btn primary apply-changes-btn"
-								onClick={onUpdateCustomDomainSettings}
-								loading={isLoadingUpdateCustomDomain}
-							>
-								Apply Changes
-							</Button>
-						</div>
-					)}
-
-					{updateDomainError?.status === 409 && (
-						<div className="custom-domain-settings-modal-footer">
-							<LaunchChatSupport
-								attributes={{
-									screen: 'Custom Domain Settings',
-								}}
-								eventName="Custom Domain Settings: Facing Issues Updating Custom Domain"
-								message="Hi Team, I need help with updating custom domain"
-								buttonText="Contact Support"
-							/>
-						</div>
-					)}
-				</Form>
-			</Modal>
-		</div>
+			<CustomDomainEditModal
+				isOpen={isEditModalOpen}
+				onClose={(): void => setIsEditModalOpen(false)}
+				customDomainSubdomain={customDomainSubdomain}
+				dnsSuffix={dnsSuffix}
+				isLoading={isLoadingUpdateCustomDomain}
+				updateDomainError={updateDomainError}
+				onClearError={(): void => setUpdateDomainError(null)}
+				onSubmit={handleSubmit}
+			/>
+		</>
 	);
 }
--- a/frontend/src/container/CustomDomainSettings/tests/CustomDomainSettings.test.tsx
+++ b/frontend/src/container/CustomDomainSettings/tests/CustomDomainSettings.test.tsx
@@ -4,6 +4,14 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';

 import CustomDomainSettings from '../CustomDomainSettings';

+const mockToastCustom = jest.fn();
+jest.mock('@signozhq/sonner', () => ({
+	toast: {
+		custom: (...args: unknown[]): unknown => mockToastCustom(...args),
+		dismiss: jest.fn(),
+	},
+}));
+
 const ZEUS_HOSTS_ENDPOINT = '*/api/v2/zeus/hosts';

 const mockHostsResponse: GetHosts200 = {
@@ -28,9 +36,12 @@ const mockHostsResponse: GetHosts200 = {
 };

 describe('CustomDomainSettings', () => {
-	afterEach(() => server.resetHandlers());
+	afterEach(() => {
+		server.resetHandlers();
+		mockToastCustom.mockClear();
+	});

-	it('renders host URLs with protocol stripped and marks the default host', async () => {
+	it('renders active host URL in the trigger button', async () => {
 		server.use(
 			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json(mockHostsResponse)),
@@ -39,12 +50,11 @@ describe('CustomDomainSettings', () => {

 		render(<CustomDomainSettings />);

-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
+		// The active host is the non-default one (custom-host)
 		await screen.findByText(/custom-host\.test\.cloud/i);
-		expect(screen.getByText('Default')).toBeInTheDocument();
 	});

-	it('opens edit modal with DNS suffix derived from the default host', async () => {
+	it('opens edit modal when clicking the edit button', async () => {
 		server.use(
 			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json(mockHostsResponse)),
@@ -54,14 +64,14 @@ describe('CustomDomainSettings', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);

-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
+		await screen.findByText(/custom-host\.test\.cloud/i);

 		await user.click(
-			screen.getByRole('button', { name: /customize team['’]s url/i }),
+			screen.getByRole('button', { name: /edit workspace link/i }),
 		);

 		expect(
-			screen.getByRole('dialog', { name: /customize your team['’]s url/i }),
+			screen.getByRole('dialog', { name: /edit workspace link/i }),
 		).toBeInTheDocument();
 		// DNS suffix is the part of the default host URL after the name prefix
 		expect(screen.getByText('test.cloud')).toBeInTheDocument();
@@ -83,12 +93,13 @@ describe('CustomDomainSettings', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);

-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
+		await screen.findByText(/custom-host\.test\.cloud/i);
 		await user.click(
-			screen.getByRole('button', { name: /customize team['’]s url/i }),
+			screen.getByRole('button', { name: /edit workspace link/i }),
 		);

-		const input = screen.getByPlaceholderText(/enter domain/i);
+		// The input is inside the modal — find it by its role
+		const input = screen.getByRole('textbox');
 		await user.clear(input);
 		await user.type(input, 'myteam');
 		await user.click(screen.getByRole('button', { name: /apply changes/i }));
@@ -114,15 +125,111 @@ describe('CustomDomainSettings', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);

-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
+		await screen.findByText(/custom-host\.test\.cloud/i);
 		await user.click(
-			screen.getByRole('button', { name: /customize team['’]s url/i }),
+			screen.getByRole('button', { name: /edit workspace link/i }),
 		);
-		await user.type(screen.getByPlaceholderText(/enter domain/i), 'myteam');
+
+		const input = screen.getByRole('textbox');
+		await user.clear(input);
+		await user.type(input, 'myteam');
 		await user.click(screen.getByRole('button', { name: /apply changes/i }));

 		expect(
 			await screen.findByRole('button', { name: /contact support/i }),
 		).toBeInTheDocument();
 	});
+
+	it('shows validation error when subdomain is less than 3 characters', async () => {
+		server.use(
+			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(mockHostsResponse)),
+			),
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<CustomDomainSettings />);
+
+		await screen.findByText(/custom-host\.test\.cloud/i);
+		await user.click(
+			screen.getByRole('button', { name: /edit workspace link/i }),
+		);
+
+		const input = screen.getByRole('textbox');
+		await user.clear(input);
+		await user.type(input, 'ab');
+		await user.click(screen.getByRole('button', { name: /apply changes/i }));
+
+		expect(
+			screen.getByText(/minimum 3 characters required/i),
+		).toBeInTheDocument();
+	});
+
+	it('shows all workspace URLs as links in the dropdown', async () => {
+		server.use(
+			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(mockHostsResponse)),
+			),
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<CustomDomainSettings />);
+
+		await screen.findByText(/custom-host\.test\.cloud/i);
+
+		// Open the URL dropdown
+		await user.click(
+			screen.getByRole('button', { name: /custom-host\.test\.cloud/i }),
+		);
+
+		// Both host URLs should appear as links in the dropdown
+		const links = await screen.findAllByRole('link');
+		const hostLinks = links.filter(
+			(link) =>
+				link.getAttribute('href')?.includes('test.cloud') &&
+				link.getAttribute('target') === '_blank',
+		);
+		expect(hostLinks).toHaveLength(2);
+
+		// Verify the URLs
+		const hrefs = hostLinks.map((link) => link.getAttribute('href'));
+		expect(hrefs).toContain('https://accepted-starfish.test.cloud');
+		expect(hrefs).toContain('https://custom-host.test.cloud');
+	});
+
+	it('calls toast.custom with new URL after successful domain update', async () => {
+		server.use(
+			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(mockHostsResponse)),
+			),
+			rest.put(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({})),
+			),
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<CustomDomainSettings />);
+
+		await screen.findByText(/custom-host\.test\.cloud/i);
+		await user.click(
+			screen.getByRole('button', { name: /edit workspace link/i }),
+		);
+
+		const input = screen.getByRole('textbox');
+		await user.clear(input);
+		await user.type(input, 'myteam');
+		await user.click(screen.getByRole('button', { name: /apply changes/i }));
+
+		// Verify toast.custom was called
+		await waitFor(() => {
+			expect(mockToastCustom).toHaveBeenCalledTimes(1);
+		});
+
+		// Render the toast element to verify its content
+		const toastRenderer = mockToastCustom.mock.calls[0][0] as (
+			id: string,
+		) => JSX.Element;
+		const { container } = render(toastRenderer('test-id'));
+		expect(container).toHaveTextContent(/myteam\.test\.cloud/i);
+	});
 });
--- a/frontend/src/container/GeneralSettings/GeneralSettings.styles.scss
+++ b/frontend/src/container/GeneralSettings/GeneralSettings.styles.scss
@@ -0,0 +1,152 @@
+.general-settings-page {
+	max-width: 768px;
+	margin: 0 auto;
+	padding: var(--padding-8) 0 var(--padding-16);
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-12);
+}
+
+.general-settings-header {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.general-settings-title {
+	font-size: var(--paragraph-medium-500-font-size);
+	font-weight: var(--paragraph-medium-500-font-weight);
+	line-height: 32px;
+	letter-spacing: -0.08px;
+	color: var(--l1-foreground);
+}
+
+.general-settings-subtitle {
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-20);
+	letter-spacing: -0.07px;
+	color: var(--l2-foreground);
+}
+
+.retention-controls-container {
+	border: 1px solid var(--l2-border);
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.retention-controls-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 var(--padding-4);
+	height: 50px;
+	background: var(--l2-background);
+	border-bottom: 1px solid var(--l2-border);
+}
+
+.retention-controls-header-label {
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-24);
+	letter-spacing: 0.48px;
+	text-transform: uppercase;
+	color: var(--l2-foreground);
+}
+
+.retention-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 var(--padding-4);
+	height: 52px;
+	background: var(--l2-background);
+
+	& + & {
+		border-top: 1px solid var(--l1-border);
+	}
+}
+
+.retention-row-label {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-20);
+	letter-spacing: -0.07px;
+	color: var(--l1-foreground);
+
+	svg {
+		color: var(--l2-foreground);
+		flex-shrink: 0;
+	}
+}
+
+.retention-row-controls {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+}
+
+.retention-input-group {
+	display: flex;
+	align-items: flex-start;
+
+	// todo: https://github.com/SigNoz/components/issues/116
+	input[type='number'] {
+		display: flex;
+		width: 120px;
+		height: 32px;
+		align-items: center;
+		gap: var(--spacing-2);
+		border-radius: 2px 0 0 2px;
+		border: 1px solid var(--l2-border);
+		background: transparent;
+		text-align: left;
+		-moz-appearance: textfield;
+		appearance: textfield;
+		color: var(--l1-foreground);
+		font-size: var(--font-size-xs);
+		font-weight: var(--font-weight-normal);
+		line-height: 16px;
+		box-shadow: none;
+
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+
+		&:disabled {
+			opacity: 0.8;
+			cursor: not-allowed;
+		}
+	}
+
+	.ant-select {
+		.ant-select-selector {
+			display: flex;
+			height: 32px;
+			padding: 6px 6px 6px 8px;
+			align-items: center;
+			gap: var(--spacing-2);
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
+			width: 80px;
+			border-left: none;
+		}
+	}
+}
+
+.retention-error-text {
+	font-size: var(--font-size-xs);
+	color: var(--accent-amber);
+	font-style: italic;
+}
+
+.retention-modal-description {
+	margin: 0;
+	color: var(--l1-foreground);
+	font-size: var(--font-size-sm);
+	line-height: 22px;
+}
--- a/frontend/src/container/GeneralSettings/GeneralSettings.tsx
+++ b/frontend/src/container/GeneralSettings/GeneralSettings.tsx
@@ -3,16 +3,20 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { useInterval } from 'react-use';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Button, Card, Col, Divider, Modal, Row, Spin, Typography } from 'antd';
+import { Button } from '@signozhq/button';
+import { Compass, ScrollText } from '@signozhq/icons';
+import { Modal, Spin } from 'antd';
 import setRetentionApi from 'api/settings/setRetention';
 import setRetentionApiV2 from 'api/settings/setRetentionV2';
 import TextToolTip from 'components/TextToolTip';
+import CustomDomainSettings from 'container/CustomDomainSettings';
 import GeneralSettingsCloud from 'container/GeneralSettingsCloud';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { StatusCodes } from 'http-status-codes';
 import find from 'lodash-es/find';
+import { BarChart2 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import {
 	ErrorResponse,
@@ -31,13 +35,17 @@ import {
 	PayloadPropsMetrics as GetRetentionPeriodMetricsPayload,
 	PayloadPropsTraces as GetRetentionPeriodTracesPayload,
 } from 'types/api/settings/getRetention';
+import { USER_ROLES } from 'types/roles';

 import Retention from './Retention';
 import StatusMessage from './StatusMessage';
 import { ActionItemsContainer, ErrorText, ErrorTextContainer } from './styles';

+import './GeneralSettings.styles.scss';
+
 type NumberOrNull = number | null;

+// eslint-disable-next-line sonarjs/cognitive-complexity
 function GeneralSettings({
 	metricsTtlValuesPayload,
 	tracesTtlValuesPayload,
@@ -455,12 +463,20 @@ function GeneralSettings({
 		onModalToggleHandler(type);
 	};

-	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
+	const {
+		isCloudUser: isCloudUserVal,
+		isEnterpriseSelfHostedUser,
+	} = useGetTenantLicense();
+
+	const isAdmin = user.role === USER_ROLES.ADMIN;
+	const showCustomDomainSettings =
+		(isCloudUserVal || isEnterpriseSelfHostedUser) && isAdmin;

 	const renderConfig = [
 		{
 			name: 'Metrics',
 			type: 'metrics',
+			icon: <BarChart2 size={14} />,
 			retentionFields: [
 				{
 					name: t('total_retention_period'),
@@ -503,6 +519,7 @@ function GeneralSettings({
 		{
 			name: 'Traces',
 			type: 'traces',
+			icon: <Compass size={14} />,
 			retentionFields: [
 				{
 					name: t('total_retention_period'),
@@ -543,6 +560,7 @@ function GeneralSettings({
 		{
 			name: 'Logs',
 			type: 'logs',
+			icon: <ScrollText size={14} />,
 			retentionFields: [
 				{
 					name: t('total_retention_period'),
@@ -587,69 +605,66 @@ function GeneralSettings({
 		) {
 			return (
 				<Fragment key={category.name}>
-					<Col xs={22} xl={11} key={category.name} style={{ margin: '0.5rem' }}>
-						<Card style={{ height: '100%' }}>
-							<Typography.Title style={{ margin: 0 }} level={3}>
-								{category.name}
-							</Typography.Title>
-							<Divider
-								style={{
-									margin: '0.5rem 0',
-									padding: 0,
-									opacity: 0.5,
-									marginBottom: '1rem',
-								}}
-							/>
-							{category.retentionFields.map((retentionField) => (
+					<div className="retention-row">
+						<span className="retention-row-label">
+							{category.icon}
+							{category.name}
+						</span>
+						<div className="retention-row-controls">
+							{category.retentionFields.map((field) => (
 								<Retention
+									key={field.name}
 									type={category.type as TTTLType}
-									key={retentionField.name}
-									text={retentionField.name}
-									retentionValue={retentionField.value}
-									setRetentionValue={retentionField.setValue}
-									hide={!!retentionField.hide}
-									isS3Field={'isS3Field' in retentionField && retentionField.isS3Field}
+									text={field.name}
+									retentionValue={field.value}
+									setRetentionValue={field.setValue}
+									hide={!!field.hide}
+									isS3Field={'isS3Field' in field && !!field.isS3Field}
+									compact
 								/>
 							))}
-
 							{!isCloudUserVal && (
-								<>
-									<ActionItemsContainer>
-										<Button
-											type="primary"
-											onClick={category.save.modalOpen}
-											disabled={category.save.isDisabled}
-										>
-											{category.save.saveButtonText}
-										</Button>
-										{category.statusComponent}
-									</ActionItemsContainer>
-									<Modal
-										title={t('retention_confirmation')}
-										focusTriggerAfterClose
-										forceRender
-										destroyOnClose
-										closable
-										onCancel={(): void =>
-											onModalToggleHandler(category.name.toLowerCase() as TTTLType)
-										}
-										onOk={(): Promise<void> =>
-											onOkHandler(category.name.toLowerCase() as TTTLType)
-										}
-										centered
-										open={category.save.modal}
-										confirmLoading={category.save.apiLoading}
-									>
-										<Typography>
-											{t('retention_confirmation_description', {
-												name: category.name.toLowerCase(),
-											})}
-										</Typography>
-									</Modal>
-								</>
+								<Button
+									variant="solid"
+									size="sm"
+									color="primary"
+									onClick={category.save.modalOpen}
+									disabled={category.save.isDisabled}
+								>
+									{category.save.saveButtonText}
+								</Button>
 							)}
-						</Card>
-					</Col>
+						</div>
+					</div>
+
+					{!isCloudUserVal && (
+						<ActionItemsContainer>{category.statusComponent}</ActionItemsContainer>
+					)}
+
+					{!isCloudUserVal && (
+						<Modal
+							title={t('retention_confirmation')}
+							focusTriggerAfterClose
+							forceRender
+							destroyOnClose
+							closable
+							onCancel={(): void =>
+								onModalToggleHandler(category.name.toLowerCase() as TTTLType)
+							}
+							onOk={(): Promise<void> =>
+								onOkHandler(category.name.toLowerCase() as TTTLType)
+							}
+							centered
+							open={category.save.modal}
+							confirmLoading={category.save.apiLoading}
+						>
+							<p className="retention-modal-description">
+								{t('retention_confirmation_description', {
+									name: category.name.toLowerCase(),
+								})}
+							</p>
+						</Modal>
+					)}
 				</Fragment>
 			);
 		}
@@ -657,9 +672,24 @@ function GeneralSettings({
 	});

 	return (
-		<>
-			{Element}
-			<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
+		<div className="general-settings-page">
+			<div className="general-settings-header">
+				<span className="general-settings-title">General</span>
+				<span className="general-settings-subtitle">
+					Manage your workspace settings.
+				</span>
+			</div>
+
+			{showCustomDomainSettings && <CustomDomainSettings />}
+
+			<div className="retention-controls-container">
+				<div className="retention-controls-header">
+					<span className="retention-controls-header-label">Retention Controls</span>
+				</div>
+				{renderConfig}
+			</div>
+
+			{(!isCloudUserVal || errorText) && (
 				<ErrorTextContainer>
 					{!isCloudUserVal && (
 						<TextToolTip
@@ -671,12 +701,10 @@ function GeneralSettings({
 					)}
 					{errorText && <ErrorText>{errorText}</ErrorText>}
 				</ErrorTextContainer>
+			)}

-				<Row justify="start">{renderConfig}</Row>
-
-				{isCloudUserVal && <GeneralSettingsCloud />}
-			</Col>
-		</>
+			{isCloudUserVal && <GeneralSettingsCloud />}
+		</div>
 	);
 }

--- a/frontend/src/container/GeneralSettings/Retention.tsx
+++ b/frontend/src/container/GeneralSettings/Retention.tsx
@@ -7,6 +7,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
+import { Input as SignozInput } from '@signozhq/input';
 import { Col, Row, Select } from 'antd';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { find } from 'lodash-es';
@@ -34,6 +35,7 @@ function Retention({
 	text,
 	hide,
 	isS3Field = false,
+	compact = false,
 }: RetentionProps): JSX.Element | null {
 	// Filter available units based on type and field
 	const availableUnits = useMemo(
@@ -126,6 +128,27 @@ function Retention({
 		return null;
 	}

+	if (compact) {
+		return (
+			<div className="retention-input-group">
+				<SignozInput
+					type="number"
+					min={0}
+					value={selectedValue && selectedValue >= 0 ? selectedValue : ''}
+					disabled={isCloudUserVal}
+					onChange={(e): void => onChangeHandler(e, setSelectedValue)}
+				/>
+				<Select
+					value={selectedTimeUnit}
+					onChange={currentSelectedOption}
+					disabled={isCloudUserVal}
+				>
+					{menuItems}
+				</Select>
+			</div>
+		);
+	}
+
 	return (
 		<RetentionContainer>
 			<Row justify="space-between">
@@ -162,9 +185,11 @@ interface RetentionProps {
 	setRetentionValue: Dispatch<SetStateAction<number | null>>;
 	hide: boolean;
 	isS3Field?: boolean;
+	compact?: boolean;
 }

 Retention.defaultProps = {
 	isS3Field: false,
+	compact: false,
 };
 export default Retention;
--- a/frontend/src/container/GeneralSettings/tests/GeneralSettings.test.tsx
+++ b/frontend/src/container/GeneralSettings/tests/GeneralSettings.test.tsx
@@ -1,4 +1,5 @@
 import setRetentionApiV2 from 'api/settings/setRetentionV2';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import {
 	fireEvent,
 	render,
@@ -35,14 +36,20 @@ jest.mock('hooks/useComponentPermission', () => ({
 }));

 jest.mock('hooks/useGetTenantLicense', () => ({
-	useGetTenantLicense: (): { isCloudUser: boolean } => ({
+	useGetTenantLicense: jest.fn(() => ({
 		isCloudUser: false,
-	}),
+		isEnterpriseSelfHostedUser: false,
+	})),
 }));

 jest.mock('container/GeneralSettingsCloud', () => ({
 	__esModule: true,
-	default: (): null => null,
+	default: (): JSX.Element => <div data-testid="general-settings-cloud" />,
+}));
+
+jest.mock('container/CustomDomainSettings', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="custom-domain-settings" />,
 }));

 // Mock data
@@ -93,10 +100,12 @@ const mockDisksWithoutS3: IDiskType[] = [
 	},
 ];

-describe('GeneralSettings - S3 Logs Retention', () => {
-	const BUTTON_SELECTOR = 'button[type="button"]';
-	const PRIMARY_BUTTON_CLASS = 'ant-btn-primary';
+const getLogsRow = (): HTMLElement => {
+	const logsLabel = screen.getByText('Logs');
+	return logsLabel.closest('.retention-row') as HTMLElement;
+};

+describe('GeneralSettings - S3 Logs Retention', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		(setRetentionApiV2 as jest.Mock).mockResolvedValue({
@@ -121,21 +130,20 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 				/>,
 			);

-			// Find the Logs card
-			const logsCard = screen.getByText('Logs').closest('.ant-card');
-			expect(logsCard).toBeInTheDocument();
+			const logsRow = getLogsRow();
+			expect(logsRow).toBeInTheDocument();

-			// Find all inputs in the Logs card - there should be 2 (total retention + S3)
-			const inputs = logsCard?.querySelectorAll('input[type="text"]');
+			// Find all inputs in the Logs row - there should be 2 (total retention + S3)
+			const inputs = logsRow.querySelectorAll('input[type="number"]');
 			expect(inputs).toHaveLength(2);

 			// The second input is the S3 retention field
-			const s3Input = inputs?.[1] as HTMLInputElement;
+			const s3Input = inputs[1] as HTMLInputElement;

 			// Find the S3 dropdown (next sibling of the S3 input)
-			const s3Dropdown = s3Input?.nextElementSibling?.querySelector(
-				'.ant-select-selector',
-			) as HTMLElement;
+			const s3Dropdown = s3Input
+				?.closest('.retention-row-controls')
+				?.querySelectorAll('.ant-select-selector')[1] as HTMLElement;
 			expect(s3Dropdown).toBeInTheDocument();

 			// Click the S3 dropdown to open it
@@ -155,16 +163,13 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			await user.clear(s3Input);
 			await user.type(s3Input, '5');

-			// Find the save button in the Logs card
-			const buttons = logsCard?.querySelectorAll(BUTTON_SELECTOR);
-			// The primary button should be the save button
-			const saveButton = Array.from(buttons || []).find((btn) =>
-				btn.className.includes(PRIMARY_BUTTON_CLASS),
+			// Find the save button in the Logs row
+			const saveButton = logsRow.querySelector(
+				'button:not([disabled])',
 			) as HTMLButtonElement;
-
 			expect(saveButton).toBeInTheDocument();

-			// Wait for button to be enabled (it should enable after value changes)
+			// Wait for button to be enabled
 			await waitFor(() => {
 				expect(saveButton).not.toBeDisabled();
 			});
@@ -205,8 +210,8 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			);

 			// Verify S3 field is visible
-			const logsCard = screen.getByText('Logs').closest('.ant-card');
-			const inputs = logsCard?.querySelectorAll('input[type="text"]');
+			const logsRow = getLogsRow();
+			const inputs = logsRow.querySelectorAll('input[type="number"]');
 			expect(inputs).toHaveLength(2); // Total + S3
 		});
 	});
@@ -227,19 +232,18 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 				/>,
 			);

-			// Find the Logs card
-			const logsCard = screen.getByText('Logs').closest('.ant-card');
-			expect(logsCard).toBeInTheDocument();
+			const logsRow = getLogsRow();
+			expect(logsRow).toBeInTheDocument();

 			// Only 1 input should be visible (total retention, no S3)
-			const inputs = logsCard?.querySelectorAll('input[type="text"]');
+			const inputs = logsRow.querySelectorAll('input[type="number"]');
 			expect(inputs).toHaveLength(1);

 			// Change total retention value
-			const totalInput = inputs?.[0] as HTMLInputElement;
+			const totalInput = inputs[0] as HTMLInputElement;

 			// First, change the dropdown to Days (it defaults to Months)
-			const totalDropdown = totalInput?.nextElementSibling?.querySelector(
+			const totalDropdown = logsRow.querySelector(
 				'.ant-select-selector',
 			) as HTMLElement;
 			await user.click(totalDropdown);
@@ -263,14 +267,12 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			await user.type(totalInput, '60');

 			// Find the save button
-			const buttons = logsCard?.querySelectorAll(BUTTON_SELECTOR);
-			const saveButton = Array.from(buttons || []).find((btn) =>
-				btn.className.includes(PRIMARY_BUTTON_CLASS),
+			const saveButton = logsRow.querySelector(
+				'button:not([disabled])',
 			) as HTMLButtonElement;
-
 			expect(saveButton).toBeInTheDocument();

-			// Wait for button to be enabled (ensures all state updates have settled)
+			// Wait for button to be enabled
 			await waitFor(() => {
 				expect(saveButton).not.toBeDisabled();
 			});
@@ -312,22 +314,21 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 				/>,
 			);

-			// Find the Logs card
-			const logsCard = screen.getByText('Logs').closest('.ant-card');
-			const inputs = logsCard?.querySelectorAll('input[type="text"]');
+			const logsRow = getLogsRow();
+			const inputs = logsRow.querySelectorAll('input[type="number"]');

-			// Total retention: 720 hours = 30 days = 1 month (displays as 1 Month)
-			const totalInput = inputs?.[0] as HTMLInputElement;
+			// Total retention: 30 days = 1 month (displays as 1 Month)
+			const totalInput = inputs[0] as HTMLInputElement;
 			expect(totalInput.value).toBe('1');

-			// S3 retention: 24 day
-			const s3Input = inputs?.[1] as HTMLInputElement;
+			// S3 retention: 24 days
+			const s3Input = inputs[1] as HTMLInputElement;
 			expect(s3Input.value).toBe('24');

 			// Verify dropdowns: total shows Months, S3 shows Days
-			const dropdowns = logsCard?.querySelectorAll('.ant-select-selection-item');
-			expect(dropdowns?.[0]).toHaveTextContent('Months');
-			expect(dropdowns?.[1]).toHaveTextContent('Days');
+			const dropdowns = logsRow.querySelectorAll('.ant-select-selection-item');
+			expect(dropdowns[0]).toHaveTextContent('Months');
+			expect(dropdowns[1]).toHaveTextContent('Days');
 		});
 	});

@@ -347,24 +348,22 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 				/>,
 			);

-			// Find the Logs card
-			const logsCard = screen.getByText('Logs').closest('.ant-card');
-			expect(logsCard).toBeInTheDocument();
+			const logsRow = getLogsRow();
+			expect(logsRow).toBeInTheDocument();

-			// Find the save button
-			const buttons = logsCard?.querySelectorAll(BUTTON_SELECTOR);
-			const saveButton = Array.from(buttons || []).find((btn) =>
-				btn.className.includes(PRIMARY_BUTTON_CLASS),
+			// Find the save button by accessible name within the Logs row
+			const allSaveButtons = screen.getAllByRole('button', { name: /save/i });
+			const saveButton = allSaveButtons.find((btn) =>
+				logsRow.contains(btn),
 			) as HTMLButtonElement;
-
 			expect(saveButton).toBeInTheDocument();

-			// Verify save button is disabled on initial load (no changes, S3 disabled with -1)
+			// Verify save button is disabled on initial load
 			expect(saveButton).toBeDisabled();

 			// Find the total retention input
-			const inputs = logsCard?.querySelectorAll('input[type="text"]');
-			const totalInput = inputs?.[0] as HTMLInputElement;
+			const inputs = logsRow.querySelectorAll('input[type="number"]');
+			const totalInput = inputs[0] as HTMLInputElement;

 			// Change total retention value to trigger button enable
 			await user.clear(totalInput);
@@ -385,4 +384,62 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			});
 		});
 	});
+
+	describe('Cloud User Rendering', () => {
+		beforeEach(() => {
+			(useGetTenantLicense as jest.Mock).mockReturnValue({
+				isCloudUser: true,
+				isEnterpriseSelfHostedUser: false,
+			});
+		});
+
+		it('should render CustomDomainSettings and GeneralSettingsCloud for cloud admin', () => {
+			render(
+				<GeneralSettings
+					metricsTtlValuesPayload={mockMetricsRetention}
+					tracesTtlValuesPayload={mockTracesRetention}
+					logsTtlValuesPayload={mockLogsRetentionWithS3}
+					getAvailableDiskPayload={mockDisksWithS3}
+					metricsTtlValuesRefetch={jest.fn()}
+					tracesTtlValuesRefetch={jest.fn()}
+					logsTtlValuesRefetch={jest.fn()}
+				/>,
+			);
+
+			expect(screen.getByTestId('custom-domain-settings')).toBeInTheDocument();
+			expect(screen.getByTestId('general-settings-cloud')).toBeInTheDocument();
+		});
+	});
+
+	describe('Enterprise Self-Hosted User Rendering', () => {
+		beforeEach(() => {
+			(useGetTenantLicense as jest.Mock).mockReturnValue({
+				isCloudUser: false,
+				isEnterpriseSelfHostedUser: true,
+			});
+		});
+
+		it('should render CustomDomainSettings but not GeneralSettingsCloud', () => {
+			render(
+				<GeneralSettings
+					metricsTtlValuesPayload={mockMetricsRetention}
+					tracesTtlValuesPayload={mockTracesRetention}
+					logsTtlValuesPayload={mockLogsRetentionWithS3}
+					getAvailableDiskPayload={mockDisksWithS3}
+					metricsTtlValuesRefetch={jest.fn()}
+					tracesTtlValuesRefetch={jest.fn()}
+					logsTtlValuesRefetch={jest.fn()}
+				/>,
+			);
+
+			expect(screen.getByTestId('custom-domain-settings')).toBeInTheDocument();
+			expect(
+				screen.queryByTestId('general-settings-cloud'),
+			).not.toBeInTheDocument();
+
+			// Save buttons should be visible for self-hosted
+			const saveButtons = screen.getAllByRole('button', { name: /save/i });
+			expect(saveButtons.length).toBeGreaterThan(0);
+		});
+	});
 });
--- a/frontend/src/container/GeneralSettingsCloud/GeneralSettingsCloud.styles.scss
+++ b/frontend/src/container/GeneralSettingsCloud/GeneralSettingsCloud.styles.scss
@@ -1,11 +1,11 @@
 .general-settings-container {
-	margin: 16px 8px;
+	margin: var(--spacing-8) 0px;

 	.ant-card-body {
 		display: flex;
 		align-items: center;
-		gap: 16px;
+		gap: var(--spacing-8);
 		padding: 8px;
-		margin: 16px 0;
+		margin: var(--spacing-8) 0;
 	}
 }
--- a/frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx
+++ b/frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx
@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
-import { Button, Skeleton, Tag, Typography } from 'antd';
+import { useMemo } from 'react';
+import { Button } from '@signozhq/button';
+import { Skeleton } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetHosts } from 'api/generated/services/zeus';
 import ROUTES from 'constants/routes';
@@ -29,77 +30,60 @@ function DataSourceInfo({
 		query: { enabled: isEnabled || false },
 	});

-	const [url, setUrl] = useState<string>('');
+	const activeHost = useMemo(
+		() =>
+			hostsData?.data?.hosts?.find((h) => !h.is_default) ??
+			hostsData?.data?.hosts?.find((h) => h.is_default),
+		[hostsData],
+	);

-	useEffect(() => {
-		if (hostsData) {
-			const defaultHost = hostsData?.data.hosts?.find((h) => h.is_default);
-			if (defaultHost?.url) {
-				const url = defaultHost?.url?.split('://')[1] ?? '';
-				setUrl(url);
-			}
+	const url = useMemo(() => activeHost?.url?.split('://')[1] ?? '', [
+		activeHost,
+	]);
+
+	const handleConnect = (): void => {
+		logEvent('Homepage: Connect dataSource clicked', {});
+
+		if (activeLicense && activeLicense.platform === LicensePlatform.CLOUD) {
+			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+		} else {
+			window?.open(DOCS_LINKS.ADD_DATA_SOURCE, '_blank', 'noopener noreferrer');
 		}
-	}, [hostsData]);
+	};

 	const renderNotSendingData = (): JSX.Element => (
 		<>
-			<Typography className="welcome-title">
+			<h2 className="welcome-title">
 				Hello there, Welcome to your SigNoz workspace
-			</Typography>
+			</h2>

-			<Typography className="welcome-description">
+			<p className="welcome-description">
 				You’re not sending any data yet. <br />
 				SigNoz is so much better with your data ⎯ start by sending your telemetry
 				data to SigNoz.
-			</Typography>
+			</p>

 			<Card className="welcome-card">
 				<Card.Content>
 					<div className="workspace-ready-container">
 						<div className="workspace-ready-header">
-							<Typography className="workspace-ready-title">
+							<span className="workspace-ready-title">
 								<img src="/Icons/hurray.svg" alt="hurray" />
 								Your workspace is ready
-							</Typography>
+							</span>

 							<Button
-								type="primary"
+								variant="solid"
+								color="primary"
+								size="sm"
 								className="periscope-btn primary"
-								icon={<img src="/Icons/container-plus.svg" alt="plus" />}
+								prefixIcon={<img src="/Icons/container-plus.svg" alt="plus" />}
+								onClick={handleConnect}
 								role="button"
 								tabIndex={0}
-								onClick={(): void => {
-									logEvent('Homepage: Connect dataSource clicked', {});
-
-									if (
-										activeLicense &&
-										activeLicense.platform === LicensePlatform.CLOUD
-									) {
-										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
-									} else {
-										window?.open(
-											DOCS_LINKS.ADD_DATA_SOURCE,
-											'_blank',
-											'noopener noreferrer',
-										);
-									}
-								}}
 								onKeyDown={(e): void => {
 									if (e.key === 'Enter') {
-										logEvent('Homepage: Connect dataSource clicked', {});
-
-										if (
-											activeLicense &&
-											activeLicense.platform === LicensePlatform.CLOUD
-										) {
-											history.push(ROUTES.GET_STARTED_WITH_CLOUD);
-										} else {
-											window?.open(
-												DOCS_LINKS.ADD_DATA_SOURCE,
-												'_blank',
-												'noopener noreferrer',
-											);
-										}
+										handleConnect();
 									}
 								}}
 							>
@@ -112,13 +96,7 @@ function DataSourceInfo({
 								<div className="workspace-url">
 									<Link2 size={12} />

-									<Typography className="workspace-url-text">
-										{url}
-
-										<Tag color="default" className="workspace-url-tag">
-											default
-										</Tag>
-									</Typography>
+									<span className="workspace-url-text">{url}</span>
 								</div>
 							</div>
 						)}
@@ -130,9 +108,9 @@ function DataSourceInfo({

 	const renderDataReceived = (): JSX.Element => (
 		<>
-			<Typography className="welcome-title">
+			<h2 className="welcome-title">
 				Hello there, Welcome to your SigNoz workspace
-			</Typography>
+			</h2>

 			{!isError && hostsData && (
 				<Card className="welcome-card">
@@ -142,13 +120,7 @@ function DataSourceInfo({
 								<div className="workspace-url">
 									<Link2 size={12} />

-									<Typography className="workspace-url-text">
-										{url}
-
-										<Tag color="default" className="workspace-url-tag">
-											default
-										</Tag>
-									</Typography>
+									<span className="workspace-url-text">{url}</span>
 								</div>
 							</div>
 						</div>
--- a/frontend/src/container/Home/DataSourceInfo/tests/DataSourceInfo.test.tsx
+++ b/frontend/src/container/Home/DataSourceInfo/tests/DataSourceInfo.test.tsx
@@ -30,7 +30,7 @@ const mockHostsResponse: GetHosts200 = {
 describe('DataSourceInfo', () => {
 	afterEach(() => server.resetHandlers());

-	it('renders the default workspace URL with protocol stripped', async () => {
+	it('renders the active workspace URL with protocol stripped', async () => {
 		server.use(
 			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json(mockHostsResponse)),
@@ -39,7 +39,7 @@ describe('DataSourceInfo', () => {

 		render(<DataSourceInfo dataSentToSigNoz={false} isLoading={false} />);

-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
+		await screen.findByText(/custom-host\.test\.cloud/i);
 	});

 	it('does not render workspace URL when GET /zeus/hosts fails', async () => {
@@ -55,7 +55,7 @@ describe('DataSourceInfo', () => {
 		expect(screen.queryByText(/signoz\.cloud/i)).not.toBeInTheDocument();
 	});

-	it('renders workspace URL in the data-received view when telemetry is flowing', async () => {
+	it('renders active workspace URL in the data-received view when telemetry is flowing', async () => {
 		server.use(
 			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json(mockHostsResponse)),
@@ -64,6 +64,6 @@ describe('DataSourceInfo', () => {

 		render(<DataSourceInfo dataSentToSigNoz={true} isLoading={false} />);

-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
+		await screen.findByText(/custom-host\.test\.cloud/i);
 	});
 });
--- a/frontend/src/container/Home/Home.styles.scss
+++ b/frontend/src/container/Home/Home.styles.scss
@@ -25,51 +25,6 @@
 		background: var(--bg-slate-500);
 	}

-	.home-container-banner {
-		position: relative;
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		padding: 8px 12px;
-		width: 100%;
-		background-color: var(--bg-robin-500);
-
-		.home-container-banner-close {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			cursor: pointer;
-			color: var(--bg-vanilla-100);
-
-			position: absolute;
-			right: 12px;
-		}
-
-		.home-container-banner-content {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			gap: 4px;
-			color: var(--bg-vanilla-100);
-			font-family: Inter;
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px;
-
-			.home-container-banner-link {
-				color: var(--bg-vanilla-100);
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px;
-				letter-spacing: -0.07px;
-				text-decoration: underline;
-			}
-		}
-	}
-
 	.home-header-left {
 		display: flex;
 		align-items: center;
@@ -296,19 +251,11 @@
 				flex-direction: row;
 				align-items: center;
 				gap: 8px;
-
-				.workspace-url-tag {
-					font-size: 10px;
-					font-weight: 400;
-					line-height: 18px; /* 150% */
-					letter-spacing: 0.12px;
-
-					border-radius: 3px;
-
-					border: 1px solid var(--Slate-400, #1d212d);
-					background: var(--Ink-400, #121317);
-					color: var(--Vanilla-400, #c0c1c3);
-				}
+				font-size: var(--paragraph-small-400-font-size);
+				font-weight: var(--paragraph-small-400-font-weight);
+				line-height: var(--paragraph-small-400-line-height);
+				letter-spacing: 0.12px;
+				color: var(--foreground);
 			}
 		}

--- a/frontend/src/container/Home/Home.tsx
+++ b/frontend/src/container/Home/Home.tsx
@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
+import { Compass, Dot, House, Plus, Wrench } from '@signozhq/icons';
 import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import listUserPreferences from 'api/v1/user/preferences/list';
 import updateUserPreferenceAPI from 'api/v1/user/preferences/name/update';
 import Header from 'components/Header/Header';
 import { ENTITY_VERSION_V5 } from 'constants/app';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -15,10 +15,8 @@ import ROUTES from 'constants/routes';
 import { getMetricsListQuery } from 'container/MetricsExplorer/Summary/utils';
 import { useGetMetricsList } from 'hooks/metricsExplorer/useGetMetricsList';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import history from 'lib/history';
 import cloneDeep from 'lodash-es/cloneDeep';
-import { CompassIcon, DotIcon, HomeIcon, Plus, Wrench, X } from 'lucide-react';
 import { AnimatePresence } from 'motion/react';
 import * as motion from 'motion/react-client';
 import Card from 'periscope/components/Card/Card';
@@ -51,8 +49,6 @@ export default function Home(): JSX.Element {
 	const [updatingUserPreferences, setUpdatingUserPreferences] = useState(false);
 	const [loadingUserPreferences, setLoadingUserPreferences] = useState(true);

-	const { isCommunityUser, isCommunityEnterpriseUser } = useGetTenantLicense();
-
 	const [checklistItems, setChecklistItems] = useState<ChecklistItem[]>(
 		defaultChecklistItemsState,
 	);
@@ -61,13 +57,6 @@ export default function Home(): JSX.Element {
 		false,
 	);

-	const [isBannerDismissed, setIsBannerDismissed] = useState(false);
-
-	useEffect(() => {
-		const bannerDismissed = localStorage.getItem(LOCALSTORAGE.BANNER_DISMISSED);
-		setIsBannerDismissed(bannerDismissed === 'true');
-	}, []);
-
 	useEffect(() => {
 		const now = new Date();
 		const startTime = new Date(now.getTime() - homeInterval);
@@ -298,44 +287,13 @@ export default function Home(): JSX.Element {
 		logEvent('Homepage: Visited', {});
 	}, []);

-	const hideBanner = (): void => {
-		localStorage.setItem(LOCALSTORAGE.BANNER_DISMISSED, 'true');
-		setIsBannerDismissed(true);
-	};
-
-	const showBanner = useMemo(
-		() => !isBannerDismissed && (isCommunityUser || isCommunityEnterpriseUser),
-		[isBannerDismissed, isCommunityUser, isCommunityEnterpriseUser],
-	);
-
 	return (
 		<div className="home-container">
 			<div className="sticky-header">
-				{showBanner && (
-					<div className="home-container-banner">
-						<div className="home-container-banner-content">
-							Big News: SigNoz Community Edition now available with SSO (Google OAuth)
-							and API keys -
-							<a
-								href="https://signoz.io/blog/open-source-signoz-now-available-with-sso-and-api-keys/"
-								target="_blank"
-								rel="noreferrer"
-								className="home-container-banner-link"
-							>
-								<i>read more</i>
-							</a>
-						</div>
-
-						<div className="home-container-banner-close">
-							<X size={16} onClick={hideBanner} />
-						</div>
-					</div>
-				)}
-
 				<Header
 					leftComponent={
 						<div className="home-header-left">
-							<HomeIcon size={14} /> Home
+							<House size={14} /> Home
 						</div>
 					}
 					rightComponent={
@@ -400,7 +358,7 @@ export default function Home(): JSX.Element {
 									<div className="active-ingestion-card-content-container">
 										<div className="active-ingestion-card-content">
 											<div className="active-ingestion-card-content-icon">
-												<DotIcon size={16} color={Color.BG_FOREST_500} />
+												<Dot size={16} color={Color.BG_FOREST_500} />
 											</div>

 											<div className="active-ingestion-card-content-description">
@@ -427,7 +385,7 @@ export default function Home(): JSX.Element {
 												}
 											}}
 										>
-											<CompassIcon size={12} />
+											<Compass size={12} />
 											Explore Logs
 										</div>
 									</div>
@@ -441,7 +399,7 @@ export default function Home(): JSX.Element {
 									<div className="active-ingestion-card-content-container">
 										<div className="active-ingestion-card-content">
 											<div className="active-ingestion-card-content-icon">
-												<DotIcon size={16} color={Color.BG_FOREST_500} />
+												<Dot size={16} color={Color.BG_FOREST_500} />
 											</div>

 											<div className="active-ingestion-card-content-description">
@@ -468,7 +426,7 @@ export default function Home(): JSX.Element {
 												}
 											}}
 										>
-											<CompassIcon size={12} />
+											<Compass size={12} />
 											Explore Traces
 										</div>
 									</div>
@@ -482,7 +440,7 @@ export default function Home(): JSX.Element {
 									<div className="active-ingestion-card-content-container">
 										<div className="active-ingestion-card-content">
 											<div className="active-ingestion-card-content-icon">
-												<DotIcon size={16} color={Color.BG_FOREST_500} />
+												<Dot size={16} color={Color.BG_FOREST_500} />
 											</div>

 											<div className="active-ingestion-card-content-description">
@@ -509,7 +467,7 @@ export default function Home(): JSX.Element {
 												}
 											}}
 										>
-											<CompassIcon size={12} />
+											<Compass size={12} />
 											Explore Metrics
 										</div>
 									</div>
--- a/frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import {
 	Button,
@@ -6,7 +6,7 @@ import {
 	Input,
 	Menu,
 	Popover,
-	Skeleton,
+	Tooltip,
 	Typography,
 } from 'antd';
 import { ColumnsType } from 'antd/es/table';
@@ -14,148 +14,49 @@ import logEvent from 'api/common/logEvent';
 import { useGetMetricAttributes } from 'api/generated/services/metrics';
 import { ResizeTable } from 'components/ResizeTable';
 import { DataType } from 'container/LogDetailedView/TableView';
-import { useNotifications } from 'hooks/useNotifications';
-import { Compass, Copy, Search } from 'lucide-react';
+import { Check, Copy, Info, Search, SquareArrowOutUpRight } from 'lucide-react';

 import { PANEL_TYPES } from '../../../constants/queryBuilder';
 import ROUTES from '../../../constants/routes';
 import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
-import MetricDetailsErrorState from './MetricDetailsErrorState';
 import {
-	AllAttributesEmptyTextProps,
-	AllAttributesProps,
-	AllAttributesValueProps,
-} from './types';
+	AllAttributesEmptyText,
+	AllAttributesValue,
+} from './AllAttributesValue';
+import { AllAttributesProps } from './types';
 import { getMetricDetailsQuery } from './utils';

 const ALL_ATTRIBUTES_KEY = 'all-attributes';
-
-function AllAttributesEmptyText({
-	isErrorAttributes,
-	refetchAttributes,
-}: AllAttributesEmptyTextProps): JSX.Element {
-	if (isErrorAttributes) {
-		return (
-			<div className="all-attributes-error-state">
-				<MetricDetailsErrorState
-					refetch={refetchAttributes}
-					errorMessage="Something went wrong while fetching attributes"
-				/>
-			</div>
-		);
-	}
-	return <Typography.Text>No attributes found</Typography.Text>;
-}
-
-export function AllAttributesValue({
-	filterKey,
-	filterValue,
-	goToMetricsExploreWithAppliedAttribute,
-}: AllAttributesValueProps): JSX.Element {
-	const [visibleIndex, setVisibleIndex] = useState(5);
-	const [attributePopoverKey, setAttributePopoverKey] = useState<string | null>(
-		null,
-	);
-	const [, copyToClipboard] = useCopyToClipboard();
-	const { notifications } = useNotifications();
-
-	const handleShowMore = (): void => {
-		setVisibleIndex(visibleIndex + 5);
-	};
-
-	const handleMenuItemClick = useCallback(
-		(key: string, attribute: string): void => {
-			switch (key) {
-				case 'open-in-explorer':
-					goToMetricsExploreWithAppliedAttribute(filterKey, attribute);
-					break;
-				case 'copy-attribute':
-					copyToClipboard(attribute);
-					notifications.success({
-						message: 'Attribute copied!',
-					});
-					break;
-				default:
-					break;
-			}
-			setAttributePopoverKey(null);
-		},
-		[
-			goToMetricsExploreWithAppliedAttribute,
-			filterKey,
-			copyToClipboard,
-			notifications,
-		],
-	);
-
-	const attributePopoverContent = useCallback(
-		(attribute: string) => (
-			<Menu
-				items={[
-					{
-						icon: <Compass size={16} />,
-						label: 'Open in Explorer',
-						key: 'open-in-explorer',
-					},
-					{
-						icon: <Copy size={16} />,
-						label: 'Copy Attribute',
-						key: 'copy-attribute',
-					},
-				]}
-				onClick={(info): void => {
-					handleMenuItemClick(info.key, attribute);
-				}}
-			/>
-		),
-		[handleMenuItemClick],
-	);
-	return (
-		<div className="all-attributes-value">
-			{filterValue.slice(0, visibleIndex).map((attribute) => (
-				<Popover
-					key={attribute}
-					content={attributePopoverContent(attribute)}
-					trigger="click"
-					open={attributePopoverKey === `${filterKey}-${attribute}`}
-					onOpenChange={(open): void => {
-						if (!open) {
-							setAttributePopoverKey(null);
-						} else {
-							setAttributePopoverKey(`${filterKey}-${attribute}`);
-						}
-					}}
-				>
-					<Button key={attribute} type="text">
-						<Typography.Text>{attribute}</Typography.Text>
-					</Button>
-				</Popover>
-			))}
-			{visibleIndex < filterValue.length && (
-				<Button type="text" onClick={handleShowMore}>
-					Show More
-				</Button>
-			)}
-		</div>
-	);
-}
+const COPY_FEEDBACK_DURATION_MS = 1500;

 function AllAttributes({
 	metricName,
 	metricType,
+	minTime,
+	maxTime,
 }: AllAttributesProps): JSX.Element {
 	const [searchString, setSearchString] = useState('');
 	const [activeKey, setActiveKey] = useState<string[]>([ALL_ATTRIBUTES_KEY]);
+	const [keyPopoverOpen, setKeyPopoverOpen] = useState<string | null>(null);
+	const [copiedKey, setCopiedKey] = useState<string | null>(null);
+	const [, copyToClipboard] = useCopyToClipboard();
+	const copyTimerRef = useRef<ReturnType<typeof setTimeout>>();

 	const {
 		data: attributesData,
 		isLoading: isLoadingAttributes,
 		isError: isErrorAttributes,
 		refetch: refetchAttributes,
-	} = useGetMetricAttributes({
-		metricName,
-	});
+	} = useGetMetricAttributes(
+		{
+			metricName,
+		},
+		{
+			start: minTime ? Math.floor(minTime / 1000000) : undefined,
+			end: maxTime ? Math.floor(maxTime / 1000000) : undefined,
+		},
+	);

 	const attributes = useMemo(() => attributesData?.data.attributes ?? [], [
 		attributesData,
@@ -164,12 +65,14 @@ function AllAttributes({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();

 	const goToMetricsExplorerwithAppliedSpaceAggregation = useCallback(
-		(groupBy: string) => {
+		(groupBy: string, valueCount?: number) => {
+			const limit = valueCount && valueCount > 250 ? 100 : undefined;
 			const compositeQuery = getMetricDetailsQuery(
 				metricName,
 				metricType,
 				undefined,
 				groupBy,
+				limit,
 			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
@@ -216,6 +119,28 @@ function AllAttributes({
 		[metricName, metricType, handleExplorerTabChange],
 	);

+	const handleKeyMenuItemClick = useCallback(
+		(menuKey: string, attributeKey: string, valueCount?: number): void => {
+			switch (menuKey) {
+				case 'open-in-explorer':
+					goToMetricsExplorerwithAppliedSpaceAggregation(attributeKey, valueCount);
+					break;
+				case 'copy-key':
+					copyToClipboard(attributeKey);
+					setCopiedKey(attributeKey);
+					clearTimeout(copyTimerRef.current);
+					copyTimerRef.current = setTimeout(() => {
+						setCopiedKey(null);
+					}, COPY_FEEDBACK_DURATION_MS);
+					break;
+				default:
+					break;
+			}
+			setKeyPopoverOpen(null);
+		},
+		[goToMetricsExplorerwithAppliedSpaceAggregation, copyToClipboard],
+	);
+
 	const filteredAttributes = useMemo(
 		() =>
 			attributes.filter(
@@ -254,21 +179,57 @@ function AllAttributes({
 				width: 50,
 				align: 'left',
 				className: 'metric-metadata-key',
-				render: (field: { label: string; contribution: number }): JSX.Element => (
-					<div className="all-attributes-key">
-						<Button
-							type="text"
-							onClick={(): void =>
-								goToMetricsExplorerwithAppliedSpaceAggregation(field.label)
-							}
-						>
-							<Typography.Text>{field.label}</Typography.Text>
-						</Button>
-						<Typography.Text className="all-attributes-contribution">
-							{field.contribution}
-						</Typography.Text>
-					</div>
-				),
+				render: (field: { label: string; contribution: number }): JSX.Element => {
+					const isCopied = copiedKey === field.label;
+					return (
+						<div className="all-attributes-key">
+							<Popover
+								content={
+									<Menu
+										items={[
+											{
+												icon: <SquareArrowOutUpRight size={14} />,
+												label: 'Open in Metric Explorer',
+												key: 'open-in-explorer',
+											},
+											{
+												icon: <Copy size={14} />,
+												label: 'Copy Key',
+												key: 'copy-key',
+											},
+										]}
+										onClick={(info): void => {
+											handleKeyMenuItemClick(info.key, field.label, field.contribution);
+										}}
+									/>
+								}
+								trigger="click"
+								placement="right"
+								overlayClassName="metric-details-popover attribute-key-popover-overlay"
+								open={keyPopoverOpen === field.label}
+								onOpenChange={(open): void => {
+									if (!open) {
+										setKeyPopoverOpen(null);
+									} else {
+										setKeyPopoverOpen(field.label);
+									}
+								}}
+							>
+								<Button type="text">
+									<Typography.Text>{field.label}</Typography.Text>
+								</Button>
+							</Popover>
+							{isCopied && (
+								<span className="copy-feedback">
+									<Check size={12} />
+								</span>
+							)}
+							<Typography.Text className="all-attributes-contribution">
+								{field.contribution}
+							</Typography.Text>
+						</div>
+					);
+				},
 			},
 			{
 				title: 'Value',
@@ -291,7 +252,9 @@ function AllAttributes({
 		],
 		[
 			goToMetricsExploreWithAppliedAttribute,
-			goToMetricsExplorerwithAppliedSpaceAggregation,
+			handleKeyMenuItemClick,
+			keyPopoverOpen,
+			copiedKey,
 		],
 	);

@@ -300,7 +263,12 @@ function AllAttributes({
 			{
 				label: (
 					<div className="metrics-accordion-header">
-						<Typography.Text>All Attributes</Typography.Text>
+						<div className="all-attributes-header-title">
+							<Typography.Text>All Attributes</Typography.Text>
+							<Tooltip title="Showing attributes for the selected time range">
+								<Info size={14} />
+							</Tooltip>
+						</div>
 						<Input
 							className="all-attributes-search-input"
 							placeholder="Search"
@@ -329,7 +297,9 @@ function AllAttributes({
 						className="metrics-accordion-content all-attributes-content"
 						scroll={{ y: 600 }}
 						locale={{
-							emptyText: (
+							emptyText: isLoadingAttributes ? (
+								' '
+							) : (
 								<AllAttributesEmptyText
 									isErrorAttributes={isErrorAttributes}
 									refetchAttributes={refetchAttributes}
@@ -350,14 +320,6 @@ function AllAttributes({
 		],
 	);

-	if (isLoadingAttributes) {
-		return (
-			<div className="all-attributes-skeleton-container">
-				<Skeleton active paragraph={{ rows: 8 }} />
-			</div>
-		);
-	}
-
 	return (
 		<Collapse
 			bordered
--- a/frontend/src/container/MetricsExplorer/MetricDetails/AllAttributesValue.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/AllAttributesValue.tsx
@@ -0,0 +1,213 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { Button, Input, Menu, Popover, Tooltip, Typography } from 'antd';
+import { useNotifications } from 'hooks/useNotifications';
+import { Check, Copy, Search, SquareArrowOutUpRight } from 'lucide-react';
+
+import MetricDetailsErrorState from './MetricDetailsErrorState';
+import { AllAttributesEmptyTextProps, AllAttributesValueProps } from './types';
+
+const INITIAL_VISIBLE_COUNT = 5;
+const COPY_FEEDBACK_DURATION_MS = 1500;
+
+export function AllAttributesEmptyText({
+	isErrorAttributes,
+	refetchAttributes,
+}: AllAttributesEmptyTextProps): JSX.Element {
+	if (isErrorAttributes) {
+		return (
+			<div className="all-attributes-error-state">
+				<MetricDetailsErrorState
+					refetch={refetchAttributes}
+					errorMessage="Something went wrong while fetching attributes"
+				/>
+			</div>
+		);
+	}
+	return <Typography.Text>No attributes found</Typography.Text>;
+}
+
+export function AllAttributesValue({
+	filterKey,
+	filterValue,
+	goToMetricsExploreWithAppliedAttribute,
+}: AllAttributesValueProps): JSX.Element {
+	const [attributePopoverKey, setAttributePopoverKey] = useState<string | null>(
+		null,
+	);
+	const [allValuesOpen, setAllValuesOpen] = useState(false);
+	const [allValuesSearch, setAllValuesSearch] = useState('');
+	const [copiedValue, setCopiedValue] = useState<string | null>(null);
+	const [, copyToClipboard] = useCopyToClipboard();
+	const { notifications } = useNotifications();
+	const copyTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+	const handleCopyWithFeedback = useCallback(
+		(value: string): void => {
+			copyToClipboard(value);
+			setCopiedValue(value);
+			clearTimeout(copyTimerRef.current);
+			copyTimerRef.current = setTimeout(() => {
+				setCopiedValue(null);
+			}, COPY_FEEDBACK_DURATION_MS);
+		},
+		[copyToClipboard],
+	);
+
+	const handleMenuItemClick = useCallback(
+		(key: string, attribute: string): void => {
+			switch (key) {
+				case 'open-in-explorer':
+					goToMetricsExploreWithAppliedAttribute(filterKey, attribute);
+					break;
+				case 'copy-value':
+					handleCopyWithFeedback(attribute);
+					notifications.success({
+						message: 'Value copied!',
+					});
+					break;
+				default:
+					break;
+			}
+			setAttributePopoverKey(null);
+		},
+		[
+			goToMetricsExploreWithAppliedAttribute,
+			filterKey,
+			handleCopyWithFeedback,
+			notifications,
+		],
+	);
+
+	const attributePopoverContent = useCallback(
+		(attribute: string) => (
+			<Menu
+				items={[
+					{
+						icon: <SquareArrowOutUpRight size={14} />,
+						label: 'Open in Metric Explorer',
+						key: 'open-in-explorer',
+					},
+					{
+						icon: <Copy size={14} />,
+						label: 'Copy Value',
+						key: 'copy-value',
+					},
+				]}
+				onClick={(info): void => {
+					handleMenuItemClick(info.key, attribute);
+				}}
+			/>
+		),
+		[handleMenuItemClick],
+	);
+
+	const filteredAllValues = useMemo(
+		() =>
+			allValuesSearch
+				? filterValue.filter((v) =>
+						v.toLowerCase().includes(allValuesSearch.toLowerCase()),
+				  )
+				: filterValue,
+		[filterValue, allValuesSearch],
+	);
+
+	const allValuesPopoverContent = (
+		<div className="all-values-popover">
+			<Input
+				placeholder="Search values"
+				size="small"
+				prefix={<Search size={12} />}
+				value={allValuesSearch}
+				onChange={(e): void => setAllValuesSearch(e.target.value)}
+				allowClear
+			/>
+			<div className="all-values-list">
+				{allValuesOpen &&
+					filteredAllValues.map((attribute) => {
+						const isCopied = copiedValue === attribute;
+						return (
+							<div key={attribute} className="all-values-item">
+								<Typography.Text ellipsis className="all-values-item-text">
+									{attribute}
+								</Typography.Text>
+								<div className="all-values-item-actions">
+									<Tooltip title={isCopied ? 'Copied!' : 'Copy value'}>
+										<Button
+											type="text"
+											size="small"
+											className={isCopied ? 'copy-success' : ''}
+											icon={isCopied ? <Check size={12} /> : <Copy size={12} />}
+											onClick={(): void => {
+												handleCopyWithFeedback(attribute);
+											}}
+										/>
+									</Tooltip>
+									<Tooltip title="Open in Metric Explorer">
+										<Button
+											type="text"
+											size="small"
+											icon={<SquareArrowOutUpRight size={12} />}
+											onClick={(): void => {
+												goToMetricsExploreWithAppliedAttribute(filterKey, attribute);
+												setAllValuesOpen(false);
+											}}
+										/>
+									</Tooltip>
+								</div>
+							</div>
+						);
+					})}
+				{allValuesOpen && filteredAllValues.length === 0 && (
+					<Typography.Text type="secondary" className="all-values-empty">
+						No values found
+					</Typography.Text>
+				)}
+			</div>
+		</div>
+	);
+
+	return (
+		<div className="all-attributes-value">
+			{filterValue.slice(0, INITIAL_VISIBLE_COUNT).map((attribute) => (
+				<Popover
+					key={attribute}
+					content={attributePopoverContent(attribute)}
+					trigger="click"
+					overlayClassName="metric-details-popover attribute-value-popover-overlay"
+					open={attributePopoverKey === `${filterKey}-${attribute}`}
+					onOpenChange={(open): void => {
+						if (!open) {
+							setAttributePopoverKey(null);
+						} else {
+							setAttributePopoverKey(`${filterKey}-${attribute}`);
+						}
+					}}
+				>
+					<Button key={attribute} type="text">
+						<Typography.Text>{attribute}</Typography.Text>
+					</Button>
+				</Popover>
+			))}
+			{filterValue.length > INITIAL_VISIBLE_COUNT && (
+				<Popover
+					content={allValuesPopoverContent}
+					trigger="click"
+					open={allValuesOpen}
+					onOpenChange={(open): void => {
+						setAllValuesOpen(open);
+						if (!open) {
+							setAllValuesSearch('');
+							setCopiedValue(null);
+						}
+					}}
+					overlayClassName="metric-details-popover all-values-popover-overlay"
+				>
+					<Button type="text" className="all-values-button">
+						All values ({filterValue.length})
+					</Button>
+				</Popover>
+			)}
+		</div>
+	);
+}
--- a/frontend/src/container/MetricsExplorer/MetricDetails/Highlights.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/Highlights.tsx
@@ -1,5 +1,5 @@
 import { Color } from '@signozhq/design-tokens';
-import { Button, Skeleton, Tooltip, Typography } from 'antd';
+import { Button, Spin, Tooltip, Typography } from 'antd';
 import { useGetMetricHighlights } from 'api/generated/services/metrics';
 import { InfoIcon } from 'lucide-react';

@@ -39,17 +39,6 @@ function Highlights({ metricName }: HighlightsProps): JSX.Element {
 		metricHighlights?.lastReceived,
 	);

-	if (isLoadingMetricHighlights) {
-		return (
-			<div
-				className="metric-details-content-grid"
-				data-testid="metric-highlights-loading-state"
-			>
-				<Skeleton title={false} paragraph={{ rows: 2 }} active />
-			</div>
-		);
-	}
-
 	if (isErrorMetricHighlights) {
 		return (
 			<div className="metric-details-content-grid">
@@ -89,32 +78,41 @@ function Highlights({ metricName }: HighlightsProps): JSX.Element {
 				</Typography.Text>
 			</div>
 			<div className="values-row">
-				<Typography.Text
-					className="metric-details-grid-value"
-					data-testid="metric-highlights-data-points"
-				>
-					<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
-						{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
-					</Tooltip>
-				</Typography.Text>
-				<Typography.Text
-					className="metric-details-grid-value"
-					data-testid="metric-highlights-time-series-total"
-				>
-					<Tooltip
-						title="Active time series are those that have received data points in the last 1
-					hour."
-						placement="top"
-					>
-						<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
-					</Tooltip>
-				</Typography.Text>
-				<Typography.Text
-					className="metric-details-grid-value"
-					data-testid="metric-highlights-last-received"
-				>
-					<Tooltip title={lastReceivedText}>{lastReceivedText}</Tooltip>
-				</Typography.Text>
+				{isLoadingMetricHighlights ? (
+					<div className="metric-highlights-loading-inline">
+						<Spin size="small" />
+						<Typography.Text type="secondary">Loading metric stats</Typography.Text>
+					</div>
+				) : (
+					<>
+						<Typography.Text
+							className="metric-details-grid-value"
+							data-testid="metric-highlights-data-points"
+						>
+							<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
+								{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
+							</Tooltip>
+						</Typography.Text>
+						<Typography.Text
+							className="metric-details-grid-value"
+							data-testid="metric-highlights-time-series-total"
+						>
+							<Tooltip
+								title="Active time series are those that have received data points in the last 1
+							hour."
+								placement="top"
+							>
+								<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
+							</Tooltip>
+						</Typography.Text>
+						<Typography.Text
+							className="metric-details-grid-value"
+							data-testid="metric-highlights-last-received"
+						>
+							<Tooltip title={lastReceivedText}>{lastReceivedText}</Tooltip>
+						</Typography.Text>
+					</>
+				)}
 			</div>
 		</div>
 	);
--- a/frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button, Collapse, Input, Select, Skeleton, Typography } from 'antd';
+import { Button, Collapse, Input, Select, Spin, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
 import {
@@ -334,7 +334,7 @@ function Metadata({
 						e.stopPropagation();
 						setIsEditing(true);
 					}}
-					disabled={isUpdatingMetricsMetadata}
+					disabled={isUpdatingMetricsMetadata || isLoadingMetricMetadata}
 				>
 					<Edit2 size={14} />
 					<Typography.Text>Edit</Typography.Text>
@@ -345,6 +345,7 @@ function Metadata({
 		isEditing,
 		isErrorMetricMetadata,
 		isUpdatingMetricsMetadata,
+		isLoadingMetricMetadata,
 		cancelEdit,
 		handleSave,
 	]);
@@ -359,7 +360,11 @@ function Metadata({
 					</div>
 				),
 				key: 'metric-metadata',
-				children: isErrorMetricMetadata ? (
+				children: isLoadingMetricMetadata ? (
+					<div className="metrics-accordion-loading-state">
+						<Spin size="small" />
+					</div>
+				) : isErrorMetricMetadata ? (
 					<div className="metric-metadata-error-state">
 						<MetricDetailsErrorState
 							refetch={refetchMetricMetadata}
@@ -381,20 +386,13 @@ function Metadata({
 		[
 			actionButton,
 			columns,
+			isLoadingMetricMetadata,
 			isErrorMetricMetadata,
 			refetchMetricMetadata,
 			tableData,
 		],
 	);

-	if (isLoadingMetricMetadata) {
-		return (
-			<div className="metrics-metadata-skeleton-container">
-				<Skeleton active paragraph={{ rows: 8 }} />
-			</div>
-		);
-	}
-
 	return (
 		<Collapse
 			bordered
--- a/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss
@@ -52,6 +52,13 @@
 				align-items: center;
 			}

+			.metric-highlights-loading-inline {
+				grid-column: 1 / -1;
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
 			.metric-highlights-error-state {
 				display: flex;
 				gap: 8px;
@@ -120,12 +127,11 @@
 			}
 		}

-		.metrics-metadata-skeleton-container {
-			height: 330px;
-		}
-
-		.all-attributes-skeleton-container {
-			height: 600px;
+		.metrics-accordion-loading-state {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 24px;
 		}

 		.metrics-accordion {
@@ -153,6 +159,18 @@
 				justify-content: space-between;
 				align-items: center;
 				height: 36px;
+
+				.all-attributes-header-title {
+					display: flex;
+					align-items: center;
+					gap: 6px;
+
+					.lucide-info {
+						cursor: pointer;
+						color: var(--bg-vanilla-400);
+					}
+				}
+
 				.ant-typography {
 					font-family: 'Geist Mono';
 					color: var(--bg-robin-400);
@@ -186,6 +204,7 @@
 					.all-attributes-key {
 						display: flex;
 						justify-content: space-between;
+						align-items: center;
 						.ant-btn {
 							.ant-typography:first-child {
 								font-family: 'Geist Mono';
@@ -193,17 +212,15 @@
 								background-color: transparent;
 							}
 						}
+						.copy-feedback {
+							display: inline-flex;
+							align-items: center;
+							color: var(--bg-forest-500);
+							animation: fade-in-out 1.5s ease-in-out;
+						}
 						.all-attributes-contribution {
 							font-family: 'Geist Mono';
 							color: var(--bg-vanilla-400);
-							background-color: rgba(171, 189, 255, 0.1);
-							height: 24px;
-							min-width: 24px;
-							border-radius: 50%;
-							text-align: center;
-							display: flex;
-							align-items: center;
-							justify-content: center;
 						}
 					}
 				}
@@ -259,10 +276,8 @@
 			}

 			.metric-metadata-key {
-				cursor: pointer;
 				padding-left: 10px;
 				vertical-align: middle;
-				text-align: center;
 				.field-renderer-container {
 					.label {
 						color: var(--bg-vanilla-400);
@@ -448,3 +463,138 @@
 	height: 100%;
 	width: 100%;
 }
+
+.attribute-key-popover-overlay {
+	.ant-popover-inner {
+		padding: 0 !important;
+		border-radius: 4px;
+		border: 1px solid var(--bg-slate-400);
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+	}
+
+	.ant-menu {
+		font-size: 12px;
+		background: transparent;
+
+		.ant-menu-item {
+			height: 32px;
+			line-height: 32px;
+			padding: 0 12px;
+			font-size: 12px;
+		}
+	}
+}
+
+.all-values-popover-overlay {
+	.ant-popover-inner {
+		padding: 0 !important;
+		border-radius: 4px;
+		border: 1px solid var(--bg-slate-400);
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+	}
+}
+
+.all-values-popover {
+	width: 320px;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 12px;
+
+	.all-values-list {
+		max-height: 300px;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		&::-webkit-scrollbar {
+			width: 2px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-300);
+			border-radius: 1px;
+		}
+	}
+
+	.all-values-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 4px 8px;
+		border-radius: 4px;
+		gap: 8px;
+
+		&:hover {
+			background: rgba(255, 255, 255, 0.04);
+		}
+
+		.all-values-item-text {
+			flex: 1;
+			min-width: 0;
+			font-family: 'Geist Mono';
+			font-size: 12px;
+		}
+
+		.all-values-item-actions {
+			display: flex;
+			gap: 2px;
+			flex-shrink: 0;
+
+			.copy-success {
+				color: var(--bg-forest-500);
+			}
+		}
+	}
+
+	.all-values-empty {
+		padding: 8px;
+		text-align: center;
+	}
+}
+
+.all-values-button {
+	color: var(--bg-robin-400) !important;
+}
+
+.lightMode {
+	.attribute-key-popover-overlay,
+	.all-values-popover-overlay {
+		.ant-popover-inner {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-100) !important;
+		}
+	}
+}
+
+@keyframes fade-in-out {
+	0% {
+		opacity: 0;
+	}
+	15% {
+		opacity: 1;
+	}
+	85% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
--- a/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx
@@ -1,10 +1,14 @@
 import { useCallback, useEffect, useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Divider, Drawer, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricMetadata } from 'api/generated/services/metrics';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass, Crosshair, X } from 'lucide-react';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';

 import { PANEL_TYPES } from '../../../constants/queryBuilder';
 import ROUTES from '../../../constants/routes';
@@ -29,6 +33,9 @@ function MetricDetails({
 }: MetricDetailsProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);

 	const {
 		data: metricMetadataResponse,
@@ -100,6 +107,21 @@ function MetricDetails({
 	const isActionButtonDisabled =
 		!metricName || isLoadingMetricMetadata || isErrorMetricMetadata;

+	const handleDrawerClose = useCallback(
+		(e: React.MouseEvent | React.KeyboardEvent): void => {
+			if ('key' in e && e.key === 'Escape') {
+				const openPopover = document.querySelector(
+					'.metric-details-popover:not(.ant-popover-hidden)',
+				);
+				if (openPopover) {
+					return;
+				}
+			}
+			onClose();
+		},
+		[onClose],
+	);
+
 	return (
 		<Drawer
 			width="60%"
@@ -137,7 +159,7 @@ function MetricDetails({
 				</div>
 			}
 			placement="right"
-			onClose={onClose}
+			onClose={handleDrawerClose}
 			open={isOpen}
 			style={{
 				overscrollBehavior: 'contain',
@@ -157,7 +179,12 @@ function MetricDetails({
 					isLoadingMetricMetadata={isLoadingMetricMetadata}
 					refetchMetricMetadata={refetchMetricMetadata}
 				/>
-				<AllAttributes metricName={metricName} metricType={metadata?.type} />
+				<AllAttributes
+					metricName={metricName}
+					metricType={metadata?.type}
+					minTime={minTime}
+					maxTime={maxTime}
+				/>
 			</div>
 		</Drawer>
 	);
--- a/frontend/src/container/MetricsExplorer/MetricDetails/tests/AllAttributes.test.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/tests/AllAttributes.test.tsx
@@ -1,12 +1,11 @@
-import * as reactUseHooks from 'react-use';
 import { render, screen } from '@testing-library/react';
 import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
-import * as useHandleExplorerTabChange from 'hooks/useHandleExplorerTabChange';
 import { userEvent } from 'tests/test-utils';

 import ROUTES from '../../../../constants/routes';
-import AllAttributes, { AllAttributesValue } from '../AllAttributes';
+import AllAttributes from '../AllAttributes';
+import { AllAttributesValue } from '../AllAttributesValue';
 import { getMockMetricAttributesData, MOCK_METRIC_NAME } from './testUtlls';

 jest.mock('react-router-dom', () => ({
@@ -15,17 +14,6 @@ jest.mock('react-router-dom', () => ({
 		pathname: `${ROUTES.METRICS_EXPLORER}`,
 	}),
 }));
-const mockHandleExplorerTabChange = jest.fn();
-jest
-	.spyOn(useHandleExplorerTabChange, 'useHandleExplorerTabChange')
-	.mockReturnValue({
-		handleExplorerTabChange: mockHandleExplorerTabChange,
-	});
-
-const mockUseCopyToClipboard = jest.fn();
-jest
-	.spyOn(reactUseHooks, 'useCopyToClipboard')
-	.mockReturnValue([{ value: 'value1' }, mockUseCopyToClipboard] as any);

 const useGetMetricAttributesMock = jest.spyOn(
 	metricsExplorerHooks,
@@ -34,12 +22,13 @@ const useGetMetricAttributesMock = jest.spyOn(

 describe('AllAttributes', () => {
 	beforeEach(() => {
+		jest.clearAllMocks();
 		useGetMetricAttributesMock.mockReturnValue({
 			...getMockMetricAttributesData(),
 		});
 	});

-	it('renders attributes section with title', () => {
+	it('renders attribute keys, values, and value counts from API data', () => {
 		render(
 			<AllAttributes
 				metricName={MOCK_METRIC_NAME}
@@ -47,39 +36,13 @@ describe('AllAttributes', () => {
 			/>,
 		);

-		expect(screen.getByText('All Attributes')).toBeInTheDocument();
-	});
-
-	it('renders all attribute keys and values', () => {
-		render(
-			<AllAttributes
-				metricName={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
-			/>,
-		);
-
-		// Check attribute keys are rendered
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 		expect(screen.getByText('attribute2')).toBeInTheDocument();
-
-		// Check attribute values are rendered
 		expect(screen.getByText('value1')).toBeInTheDocument();
 		expect(screen.getByText('value2')).toBeInTheDocument();
 		expect(screen.getByText('value3')).toBeInTheDocument();
 	});

-	it('renders value counts correctly', () => {
-		render(
-			<AllAttributes
-				metricName={MOCK_METRIC_NAME}
-				metricType={MetrictypesTypeDTO.gauge}
-			/>,
-		);
-
-		expect(screen.getByText('2')).toBeInTheDocument(); // For attribute1
-		expect(screen.getByText('1')).toBeInTheDocument(); // For attribute2
-	});
-
 	it('handles empty attributes array', () => {
 		useGetMetricAttributesMock.mockReturnValue({
 			...getMockMetricAttributesData({
@@ -100,7 +63,7 @@ describe('AllAttributes', () => {
 		expect(screen.getByText('No attributes found')).toBeInTheDocument();
 	});

-	it('clicking on an attribute key opens the explorer with the attribute filter applied', async () => {
+	it('clicking on an attribute key shows popover with Open in Metric Explorer option', async () => {
 		render(
 			<AllAttributes
 				metricName={MOCK_METRIC_NAME}
@@ -108,7 +71,8 @@ describe('AllAttributes', () => {
 			/>,
 		);
 		await userEvent.click(screen.getByText('attribute1'));
-		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
+		expect(screen.getByText('Open in Metric Explorer')).toBeInTheDocument();
+		expect(screen.getByText('Copy Key')).toBeInTheDocument();
 	});

 	it('filters attributes based on search input', async () => {
@@ -123,26 +87,66 @@ describe('AllAttributes', () => {
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 		expect(screen.getByText('value1')).toBeInTheDocument();
 	});
+
+	it('shows error state when attribute fetching fails', () => {
+		useGetMetricAttributesMock.mockReturnValue({
+			...getMockMetricAttributesData(
+				{
+					data: {
+						attributes: [],
+						totalKeys: 0,
+					},
+				},
+				{
+					isError: true,
+				},
+			),
+		});
+		render(
+			<AllAttributes
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
+			/>,
+		);
+
+		expect(
+			screen.getByText('Something went wrong while fetching attributes'),
+		).toBeInTheDocument();
+	});
+
+	it('does not show misleading empty text while loading', () => {
+		useGetMetricAttributesMock.mockReturnValue({
+			...getMockMetricAttributesData(
+				{
+					data: {
+						attributes: [],
+						totalKeys: 0,
+					},
+				},
+				{
+					isLoading: true,
+				},
+			),
+		});
+		render(
+			<AllAttributes
+				metricName={MOCK_METRIC_NAME}
+				metricType={MetrictypesTypeDTO.gauge}
+			/>,
+		);
+
+		expect(screen.queryByText('No attributes found')).not.toBeInTheDocument();
+	});
 });

 describe('AllAttributesValue', () => {
 	const mockGoToMetricsExploreWithAppliedAttribute = jest.fn();

-	it('renders all attribute values', () => {
-		render(
-			<AllAttributesValue
-				filterKey="attribute1"
-				filterValue={['value1', 'value2']}
-				goToMetricsExploreWithAppliedAttribute={
-					mockGoToMetricsExploreWithAppliedAttribute
-				}
-			/>,
-		);
-		expect(screen.getByText('value1')).toBeInTheDocument();
-		expect(screen.getByText('value2')).toBeInTheDocument();
+	beforeEach(() => {
+		jest.clearAllMocks();
 	});

-	it('loads more attributes when show more button is clicked', async () => {
+	it('shows All values button when there are more than 5 values', () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -153,58 +157,59 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.queryByText('value6')).not.toBeInTheDocument();
-		await userEvent.click(screen.getByText('Show More'));
-		expect(screen.getByText('value6')).toBeInTheDocument();
+		expect(screen.getByText('All values (6)')).toBeInTheDocument();
 	});

-	it('does not render show more button when there are no more attributes to show', () => {
-		render(
-			<AllAttributesValue
-				filterKey="attribute1"
-				filterValue={['value1', 'value2']}
-				goToMetricsExploreWithAppliedAttribute={
-					mockGoToMetricsExploreWithAppliedAttribute
-				}
-			/>,
-		);
-		expect(screen.queryByText('Show More')).not.toBeInTheDocument();
-	});
-
-	it('copy button should copy the attribute value to the clipboard', async () => {
-		render(
-			<AllAttributesValue
-				filterKey="attribute1"
-				filterValue={['value1', 'value2']}
-				goToMetricsExploreWithAppliedAttribute={
-					mockGoToMetricsExploreWithAppliedAttribute
-				}
-			/>,
-		);
-		expect(screen.getByText('value1')).toBeInTheDocument();
-		await userEvent.click(screen.getByText('value1'));
-		expect(screen.getByText('Copy Attribute')).toBeInTheDocument();
-		await userEvent.click(screen.getByText('Copy Attribute'));
-		expect(mockUseCopyToClipboard).toHaveBeenCalledWith('value1');
-	});
-
-	it('explorer button should go to metrics explore with the attribute filter applied', async () => {
-		render(
-			<AllAttributesValue
-				filterKey="attribute1"
-				filterValue={['value1', 'value2']}
-				goToMetricsExploreWithAppliedAttribute={
-					mockGoToMetricsExploreWithAppliedAttribute
-				}
-			/>,
-		);
-		expect(screen.getByText('value1')).toBeInTheDocument();
-		await userEvent.click(screen.getByText('value1'));
-
-		expect(screen.getByText('Open in Explorer')).toBeInTheDocument();
-		await userEvent.click(screen.getByText('Open in Explorer'));
-		expect(mockGoToMetricsExploreWithAppliedAttribute).toHaveBeenCalledWith(
-			'attribute1',
+	it('All values popover shows values beyond the initial 5', async () => {
+		const values = [
 			'value1',
+			'value2',
+			'value3',
+			'value4',
+			'value5',
+			'value6',
+			'value7',
+		];
+		render(
+			<AllAttributesValue
+				filterKey="attribute1"
+				filterValue={values}
+				goToMetricsExploreWithAppliedAttribute={
+					mockGoToMetricsExploreWithAppliedAttribute
+				}
+			/>,
 		);
+
+		await userEvent.click(screen.getByText('All values (7)'));
+
+		expect(screen.getByText('value6')).toBeInTheDocument();
+		expect(screen.getByText('value7')).toBeInTheDocument();
+	});
+
+	it('All values popover search filters the value list', async () => {
+		const values = [
+			'alpha',
+			'bravo',
+			'charlie',
+			'delta',
+			'echo',
+			'fig-special',
+			'golf-target',
+		];
+		render(
+			<AllAttributesValue
+				filterKey="attribute1"
+				filterValue={values}
+				goToMetricsExploreWithAppliedAttribute={
+					mockGoToMetricsExploreWithAppliedAttribute
+				}
+			/>,
+		);
+
+		await userEvent.click(screen.getByText('All values (7)'));
+		await userEvent.type(screen.getByPlaceholderText('Search values'), 'golf');
+
+		expect(screen.getByText('golf-target')).toBeInTheDocument();
+		expect(screen.queryByText('fig-special')).not.toBeInTheDocument();
 	});
 });
--- a/frontend/src/container/MetricsExplorer/MetricDetails/tests/Highlights.test.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/tests/Highlights.test.tsx
@@ -48,7 +48,7 @@ describe('Highlights', () => {
 		).toBeInTheDocument();
 	});

-	it('should render loading state when data is loading', () => {
+	it('should show labels and loading text but not stale data values while loading', () => {
 		useGetMetricHighlightsMock.mockReturnValue(
 			getMockMetricHighlightsData(
 				{},
@@ -60,8 +60,19 @@ describe('Highlights', () => {

 		render(<Highlights metricName={MOCK_METRIC_NAME} />);

+		expect(screen.getByText('SAMPLES')).toBeInTheDocument();
+		expect(screen.getByText('TIME SERIES')).toBeInTheDocument();
+		expect(screen.getByText('LAST RECEIVED')).toBeInTheDocument();
+		expect(screen.getByText('Loading metric stats')).toBeInTheDocument();
+
 		expect(
-			screen.getByTestId('metric-highlights-loading-state'),
-		).toBeInTheDocument();
+			screen.queryByTestId('metric-highlights-data-points'),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByTestId('metric-highlights-time-series-total'),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByTestId('metric-highlights-last-received'),
+		).not.toBeInTheDocument();
 	});
 });
--- a/frontend/src/container/MetricsExplorer/MetricDetails/tests/Metadata.test.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/tests/Metadata.test.tsx
@@ -324,6 +324,22 @@ describe('Metadata', () => {
 		expect(editButton2).toBeInTheDocument();
 	});

+	it('should show section header with disabled edit while loading', () => {
+		render(
+			<Metadata
+				metricName={MOCK_METRIC_NAME}
+				metadata={null}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata
+				refetchMetricMetadata={mockRefetchMetricMetadata}
+			/>,
+		);
+
+		expect(screen.getByText('Metadata')).toBeInTheDocument();
+		const editButton = screen.getByText('Edit').closest('button');
+		expect(editButton).toBeDisabled();
+	});
+
 	it('should not allow editing of unit if it is already set', async () => {
 		render(
 			<Metadata
--- a/frontend/src/container/MetricsExplorer/MetricDetails/tests/MetricDetails.test.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/tests/MetricDetails.test.tsx
@@ -24,6 +24,13 @@ jest.mock('react-router-dom', () => ({
 		pathname: `${ROUTES.METRICS_EXPLORER}`,
 	}),
 }));
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useSelector: jest.fn().mockReturnValue({
+		maxTime: 1700000000000000000,
+		minTime: 1699900000000000000,
+	}),
+}));
 jest.mock('hooks/useSafeNavigate', () => ({
 	useSafeNavigate: (): any => ({
 		safeNavigate: jest.fn(),
--- a/frontend/src/container/MetricsExplorer/MetricDetails/types.ts
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/types.ts
@@ -34,6 +34,8 @@ export interface MetadataProps {
 export interface AllAttributesProps {
 	metricName: string;
 	metricType: MetrictypesTypeDTO | undefined;
+	minTime?: number;
+	maxTime?: number;
 }

 export interface AllAttributesValueProps {
--- a/frontend/src/container/MetricsExplorer/MetricDetails/utils.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/utils.tsx
@@ -87,6 +87,7 @@ export function getMetricDetailsQuery(
 	metricType: MetrictypesTypeDTO | undefined,
 	filter?: { key: string; value: string },
 	groupBy?: string,
+	limit?: number,
 ): Query {
 	let timeAggregation;
 	let spaceAggregation;
@@ -170,6 +171,7 @@ export function getMetricDetailsQuery(
 								},
 						  ]
 						: [],
+					...(limit ? { limit } : {}),
 				},
 			],
 			queryFormulas: [],
--- a/frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx
@@ -1,9 +1,7 @@
 import { useCallback } from 'react';
-import { Tooltip } from 'antd';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import { Info } from 'lucide-react';
 import { DataSource } from 'types/common/queryBuilder';

 import { MetricsSearchProps } from './types';
@@ -26,15 +24,17 @@ function MetricsSearch({
 		onChange(currentQueryFilterExpression);
 	}, [currentQueryFilterExpression, onChange]);

+	const handleRunQuery = useCallback(
+		(expression: string): void => {
+			setCurrentQueryFilterExpression(expression);
+			onChange(expression);
+		},
+		[setCurrentQueryFilterExpression, onChange],
+	);
+
 	return (
 		<div className="metrics-search-container">
 			<div data-testid="qb-search-container" className="qb-search-container">
-				<Tooltip
-					title="Use filters to refine metrics based on attributes. Example: service_name=api - Shows all metrics associated with the API service"
-					placement="right"
-				>
-					<Info size={16} />
-				</Tooltip>
 				<QuerySearch
 					onChange={handleOnChange}
 					dataSource={DataSource.METRICS}
@@ -45,8 +45,9 @@ function MetricsSearch({
 							expression: currentQueryFilterExpression,
 						},
 					}}
-					onRun={handleOnChange}
+					onRun={handleRunQuery}
 					showFilterSuggestionsWithoutMetric
+					placeholder="Try metric_name CONTAINS 'http.server' to view all HTTP Server metrics being sent"
 				/>
 			</div>
 			<RunQueryBtn
--- a/frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss
+++ b/frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss
@@ -37,7 +37,7 @@

 	.metrics-search-container {
 		display: flex;
-		gap: 16px;
+		gap: 8px;
 		align-items: center;

 		.metrics-search-options {
@@ -51,10 +51,6 @@
 			gap: 8px;
 			flex: 1;

-			.lucide-info {
-				cursor: pointer;
-			}
-
 			.query-builder-search-container {
 				width: 100%;
 			}
@@ -66,8 +62,6 @@
 			margin-left: -16px;
 			margin-right: -16px;

-			max-height: 500px;
-			overflow-y: auto;
 			.ant-table-thead > tr > th {
 				padding: 12px;
 				font-weight: 500;
--- a/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
@@ -15,13 +15,12 @@ import {
 	Querybuildertypesv5OrderByDTO,
 	Querybuildertypesv5OrderDirectionDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import {
-	convertExpressionToFilters,
-	convertFiltersToExpression,
-} from 'components/QueryBuilderV2/utils';
+import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
+import { initialQueriesMap } from 'constants/queryBuilder';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import NoLogs from 'container/NoLogs/NoLogs';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { AppState } from 'store/reducers';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -61,10 +60,13 @@ function Summary(): JSX.Element {
 		heatmapView,
 		setHeatmapView,
 	] = useState<MetricsexplorertypesTreemapModeDTO>(
-		MetricsexplorertypesTreemapModeDTO.timeseries,
+		MetricsexplorertypesTreemapModeDTO.samples,
 	);

 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
+
+	useShareBuilderUrl({ defaultValue: initialQueriesMap[DataSource.METRICS] });
+
 	const query = useMemo(() => currentQuery?.builder?.queryData[0], [
 		currentQuery,
 	]);
@@ -89,6 +91,15 @@ function Summary(): JSX.Element {
 		setCurrentQueryFilterExpression,
 	] = useState<string>(query?.filter?.expression || '');

+	const [appliedFilterExpression, setAppliedFilterExpression] = useState(
+		query?.filter?.expression || '',
+	);
+
+	const queryFilterExpression = useMemo(
+		() => ({ expression: appliedFilterExpression }),
+		[appliedFilterExpression],
+	);
+
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.TabChanged, {
 			[MetricsExplorerEventKeys.Tab]: 'summary',
@@ -100,11 +111,6 @@ function Summary(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);

-	const queryFilterExpression = useMemo(() => {
-		const filters = query.filters || { items: [], op: 'AND' };
-		return convertFiltersToExpression(filters);
-	}, [query.filters]);
-
 	const metricsListQuery: MetricsexplorertypesStatsRequestDTO = useMemo(() => {
 		return {
 			start: convertNanoToMilliseconds(minTime),
@@ -187,6 +193,7 @@ function Summary(): JSX.Element {
 				},
 			});
 			setCurrentQueryFilterExpression(expression);
+			setAppliedFilterExpression(expression);
 			setCurrentPage(1);
 			if (expression) {
 				logEvent(MetricsExplorerEvents.FilterApplied, {
--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -13,7 +13,6 @@ import {
 	DraftingCompass,
 	FileKey2,
 	Github,
-	Globe,
 	HardDrive,
 	Home,
 	Key,
@@ -326,13 +325,7 @@ export const settingsMenuItems: SidebarItem[] = [
 		isEnabled: false,
 		itemKey: 'members-sso',
 	},
-	{
-		key: ROUTES.CUSTOM_DOMAIN_SETTINGS,
-		label: 'Custom Domain',
-		icon: <Globe size={16} />,
-		isEnabled: false,
-		itemKey: 'custom-domain',
-	},
+
 	{
 		key: ROUTES.INTEGRATIONS,
 		label: 'Integrations',
--- a/frontend/src/container/TopNav/Breadcrumbs/index.tsx
+++ b/frontend/src/container/TopNav/Breadcrumbs/index.tsx
@@ -19,7 +19,6 @@ const breadcrumbNameMap: Record<string, string> = {
 	[ROUTES.ORG_SETTINGS]: 'Organization Settings',
 	[ROUTES.INGESTION_SETTINGS]: 'Ingestion Settings',
 	[ROUTES.MY_SETTINGS]: 'My Settings',
-	[ROUTES.CUSTOM_DOMAIN_SETTINGS]: 'Custom Domain Settings',
 	[ROUTES.ERROR_DETAIL]: 'Exceptions',
 	[ROUTES.LIST_ALL_ALERT]: 'Alerts',
 	[ROUTES.ALL_DASHBOARD]: 'Dashboard',
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts
@@ -154,7 +154,6 @@ export const routesToSkip = [
 	ROUTES.ALL_DASHBOARD,
 	ROUTES.ORG_SETTINGS,
 	ROUTES.INGESTION_SETTINGS,
-	ROUTES.CUSTOM_DOMAIN_SETTINGS,
 	ROUTES.API_KEYS,
 	ROUTES.ERROR_DETAIL,
 	ROUTES.LOGS_PIPELINES,
--- a/frontend/src/pages/Settings/Settings.tsx
+++ b/frontend/src/pages/Settings/Settings.tsx
@@ -79,7 +79,6 @@ function SettingsPage(): JSX.Element {
 							item.key === ROUTES.BILLING ||
 							item.key === ROUTES.ROLES_SETTINGS ||
 							item.key === ROUTES.INTEGRATIONS ||
-							item.key === ROUTES.CUSTOM_DOMAIN_SETTINGS ||
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.ORG_SETTINGS ||
--- a/frontend/src/pages/Settings/config.tsx
+++ b/frontend/src/pages/Settings/config.tsx
@@ -5,7 +5,6 @@ import APIKeys from 'container/APIKeys/APIKeys';
 import BillingContainer from 'container/BillingContainer/BillingContainer';
 import CreateAlertChannels from 'container/CreateAlertChannels';
 import { ChannelType } from 'container/CreateAlertChannels/config';
-import CustomDomainSettings from 'container/CustomDomainSettings';
 import GeneralSettings from 'container/GeneralSettings';
 import GeneralSettingsCloud from 'container/GeneralSettingsCloud';
 import IngestionSettings from 'container/IngestionSettings/IngestionSettings';
@@ -20,7 +19,6 @@ import {
 	Building,
 	Cpu,
 	CreditCard,
-	Globe,
 	Keyboard,
 	KeySquare,
 	Pencil,
@@ -124,19 +122,6 @@ export const apiKeys = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];

-export const customDomainSettings = (t: TFunction): RouteTabProps['routes'] => [
-	{
-		Component: CustomDomainSettings,
-		name: (
-			<div className="periscope-tab">
-				<Globe size={16} /> {t('routes:custom_domain_settings').toString()}
-			</div>
-		),
-		route: ROUTES.CUSTOM_DOMAIN_SETTINGS,
-		key: ROUTES.CUSTOM_DOMAIN_SETTINGS,
-	},
-];
-
 export const billingSettings = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: BillingContainer,
--- a/frontend/src/pages/Settings/utils.ts
+++ b/frontend/src/pages/Settings/utils.ts
@@ -7,7 +7,6 @@ import {
 	apiKeys,
 	billingSettings,
 	createAlertChannels,
-	customDomainSettings,
 	editAlertChannels,
 	generalSettings,
 	ingestionSettings,
@@ -64,7 +63,7 @@ export const getRoutes = (
 	}

 	if ((isCloudUser || isEnterpriseSelfHostedUser) && isAdmin) {
-		settings.push(...customDomainSettings(t), ...billingSettings(t));
+		settings.push(...billingSettings(t));
 	}

 	if (isAdmin) {
--- a/frontend/src/utils/permission/index.ts
+++ b/frontend/src/utils/permission/index.ts
@@ -106,7 +106,6 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	TRACES_FUNNELS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	TRACES_FUNNELS_DETAIL: ['ADMIN', 'EDITOR', 'VIEWER'],
 	API_KEYS: ['ADMIN'],
-	CUSTOM_DOMAIN_SETTINGS: ['ADMIN'],
 	LOGS_BASE: ['ADMIN', 'EDITOR', 'VIEWER'],
 	OLD_LOGS_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SHORTCUTS: ['ADMIN', 'EDITOR', 'VIEWER'],
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5066,6 +5066,20 @@
  resolved "https://registry.yarnpkg.com/@signozhq/design-tokens/-/design-tokens-2.1.1.tgz#9c36d433fd264410713cc0c5ebdd75ce0ebecba3"
  integrity sha512-SdziCHg5Lwj+6oY6IRUPplaKZ+kTHjbrlhNj//UoAJ8aQLnRdR2F/miPzfSi4vrYw88LtXxNA9J9iJyacCp37A==

+"@signozhq/dialog@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@signozhq/dialog/-/dialog-0.0.2.tgz#55bd8e693f76325fda9aabe3197350e0adc163c4"
+  integrity sha512-YT5t3oZpGkAuWptTqhCgVtLjxsRQrEIrQHFoXpP9elM1+O4TS9WHr+07BLQutOVg6u9n9pCvW3OYf0SCETkDVQ==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.11"
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
 "@signozhq/icons@0.1.0", "@signozhq/icons@^0.1.0":
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/@signozhq/icons/-/icons-0.1.0.tgz#00dfb430dbac423bfff715876f91a7b8a72509e4"
Author	SHA1	Message	Date
SagarRajput-7	38bf834be6	Merge branch 'main' into SIG-1709-custom-domain	2026-03-02 19:08:44 +05:30
SagarRajput-7	4b84b715b4	feat: removed the sso auth announcement banner (#10471 ) * feat: removed the sso auth announcement banner * feat: updated icon to use signozhq icons	2026-03-02 19:00:03 +05:30
SagarRajput-7	4a5e21e4c3	Merge branch 'main' into SIG-1709-custom-domain	2026-03-02 18:04:15 +05:30
Srikanth Chekuri	b3c08ec417	chore: address gaps in summary tab (#10462 ) Some checks failed build-staging / staging (push) Has been cancelled Details build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details	2026-03-02 11:52:50 +00:00
SagarRajput-7	138dd6da3c	Merge branch 'main' into SIG-1709-custom-domain	2026-03-02 12:26:16 +05:30
SagarRajput-7	a5e410f3cc	feat: scss refactoring with semantic tokens	2026-03-02 10:42:52 +05:30
SagarRajput-7	a3dcdca45f	Merge branch 'main' into SIG-1709-custom-domain	2026-02-28 19:19:32 +05:30
SagarRajput-7	870df96302	feat: comment addressed	2026-02-28 19:12:37 +05:30
SagarRajput-7	4e7530b359	Merge branch 'main' into SIG-1709-custom-domain	2026-02-27 14:33:09 +05:30
SagarRajput-7	b439413c21	feat: comment addressed	2026-02-27 14:10:52 +05:30
SagarRajput-7	e5c7f0b636	feat: cleanup and refactor	2026-02-27 14:10:52 +05:30
SagarRajput-7	07f0332900	feat: updated home page data source info section	2026-02-27 14:10:49 +05:30
SagarRajput-7	728557fbff	feat: updated and added test cases	2026-02-27 14:10:10 +05:30
SagarRajput-7	21c0192536	feat: cleanup and refactor	2026-02-27 14:09:01 +05:30
SagarRajput-7	a238614738	feat: redesign the custom domain and moved it to general settings	2026-02-27 14:09:01 +05:30