Merge branch 'main' into chore/uplot-builder-restructure

chore: fixed tsc + test
2026-02-28 19:22:26 +00:00 · 2026-02-28 18:55:41 +05:30 · 2026-02-28 18:08:39 +05:30 · 2026-02-28 17:53:44 +05:30 · 2026-02-28 15:51:58 +05:30 · 2026-02-28 15:20:24 +05:30
40 changed files with 823 additions and 1504 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -52,7 +52,6 @@
 		"@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 +289,4 @@
 		"on-headers": "^1.1.0",
 		"tmp": "0.2.4"
 	}
-}
+}
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -165,6 +165,11 @@ 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,7 +18,6 @@ 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/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -38,6 +38,7 @@ 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
@@ -1,200 +0,0 @@
-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,460 +1,262 @@
-.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 {
+.custom-domain-settings-container {
+	margin-top: 24px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 24px;
 	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-settings-content {
+		width: calc(100% - 30px);
+		max-width: 736px;
+
+		.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;
+		}
+
+		.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-card-top {
-		display: flex;
-		align-items: flex-start;
-		justify-content: space-between;
-		padding: var(--padding-3);
-		gap: var(--spacing-6);
+	.custom-domain-settings-card {
+		border-radius: 4px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-400);

-		.custom-domain-edit-button {
-			border: 1px solid var(--l3-border);
-			background: var(--l3-background);
+		.ant-card-body {
+			padding: 12px;

-			&:hover {
-				background: var(--l3-background-hover);
+			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-card-info {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-6);
-	}
+			.custom-domain-settings-content-body {
+				margin-top: 12px;
+				display: flex;
+				gap: 12px;

-	.custom-domain-card-name-row {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-5);
-	}
+				align-items: flex-end;
+				justify-content: space-between;

-	.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-url-edit-btn {
+					.periscope-btn {
+						border-radius: 2px;
+						border: 1px solid var(--Slate-200, #2c3140);
+						background: var(--Ink-200, #23262e);
+					}
+				}
+			}

-	.custom-domain-card-meta-row {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-10);
-		padding-left: 26px;
-	}
+			.custom-domain-urls {
+				display: flex;
+				flex-direction: column;
+				flex: 1;
+			}

-	.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;
+			.custom-domain-url {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				cursor: pointer;

-		svg {
-			flex-shrink: 0;
-			color: var(--l1-foreground);
-		}
-	}
+				line-height: 24px;
+				padding: 4px 0;
+			}

-	.custom-domain-callout {
-		margin: 0 var(--margin-3) var(--margin-3);
-		font-size: 13px;
-		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-update-status {
+				margin-top: 12px;

-	.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: 13px;
-		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: 13px;
-		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;
-}
-
-.workspace-url-dropdown-header {
-	color: var(--l2-foreground);
-	font-size: 13px;
-	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;
-	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: 13px;
-	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: 13px;
-	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: 13px;
-			line-height: var(--line-height-20);
-			padding: 0;
-
-			&:focus,
-			&:focus-visible {
-				outline: none;
-				box-shadow: none;
+				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);
 			}
 		}
 	}
 }

-.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: 13px;
-	line-height: var(--line-height-20);
-	white-space: nowrap;
-}
+.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;

-.edit-modal-helper {
-	color: var(--l2-foreground);
-	font-size: var(--font-size-xs);
-	line-height: var(--line-height-20);
+		.ant-modal-header {
+			background: none;
+			border-bottom: 1px solid var(--bg-slate-500);
+			padding: 16px;
+			margin-bottom: 0;
+		}

-	&--error {
-		color: var(--destructive);
-	}
-}
+		.ant-modal-close-x {
+			font-size: 12px;
+		}

-.edit-modal-status-icon {
-	color: var(--l2-foreground);
-}
+		.ant-modal-body {
+			padding: 12px 16px;

-.edit-modal-note {
-	display: flex;
-	gap: var(--spacing-6);
-	align-items: flex-start;
-	padding: var(--padding-3);
-	border-radius: 4px;
-	background: var(--l2-background);
-}
+			.custom-domain-settings-modal-body {
+				margin-bottom: 48px;

-.edit-modal-note-emoji {
-	font-size: 16px;
-	line-height: var(--line-height-20);
-	flex-shrink: 0;
-	margin-top: 2px;
-}
+				font-size: 13px;
+				font-style: normal;
+				font-weight: var(--font-weight-normal);
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}

-.edit-modal-note-text {
-	color: var(--l2-foreground);
-	font-size: 13px;
-	line-height: var(--line-height-20);
-	letter-spacing: -0.07px;
-}
+		.custom-domain-settings-modal-error {
+			display: flex;
+			flex-direction: column;
+			gap: 24px;

-.edit-modal-footer {
-	.facing-issue-button {
-		width: 100%;
+			.update-limit-reached-error {
+				display: flex;
+				padding: 20px 24px 24px 24px;
+				flex-direction: column;
+				align-items: center;
+				gap: 24px;
+				align-self: stretch;

-		.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;
+				border-radius: 4px;
+				border: 1px solid rgba(255, 205, 86, 0.2);
+				background: rgba(255, 205, 86, 0.1);

-			.ant-btn-icon {
-				display: none;
+				color: var(--bg-amber-400);
+				font-size: 13px;
+				font-style: normal;
+				line-height: 20px; /* 142.857% */
 			}

-			&:hover {
-				background: var(--primary) !important;
-				border: none !important;
-				color: var(--primary-foreground) !important;
+			.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;
+					}
+				}
 			}
 		}
 	}
 }

-.edit-modal-apply-btn {
-	width: 100%;
-}
+.lightMode {
+	.custom-domain-settings-container {
+		.custom-domain-settings-content {
+			.title {
+				color: var(--bg-ink-400);
+			}

-.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);
+			.subtitle {
+				color: var(--bg-vanilla-400);
+			}
+		}

-	.custom-domain-toast-message {
-		font-size: 13px;
-		line-height: var(--line-height-20);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		flex: 1;
-	}
+		.custom-domain-settings-card {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-100);

-	.custom-domain-toast-actions {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-4);
-		flex-shrink: 0;
-	}
+			.ant-card-body {
+				.custom-domain-settings-content-header {
+					color: var(--bg-ink-100);
+				}

-	.custom-domain-toast-visit-btn {
-		text-decoration: none;
-		background: var(--bg-robin-600);
+				.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);
+				}

-		&:hover {
-			background: var(--primary-background-hover);
+				.custom-domain-url-edit-btn {
+					.periscope-btn {
+						border: 1px solid var(--bg-vanilla-300);
+						background: var(--bg-vanilla-100);
+						box-shadow: none;
+					}
+				}
+			}
 		}
 	}

-	.custom-domain-toast-dismiss-btn {
-		color: var(--callout-primary-icon);
-		height: 24px;
-		width: 24px;
+	.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);

-		&:hover {
-			background: var(--primary-background-hover);
+			.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);
+				}
+			}
 		}
 	}
 }
--- a/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
+++ b/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
@@ -1,88 +1,59 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
+import { useCopyToClipboard } from 'react-use';
+import { Color } from '@signozhq/design-tokens';
 import {
-	Check,
-	ChevronDown,
-	Clock,
-	ExternalLink,
-	FilePenLine,
-	Link2,
-	SolidAlertCircle,
-	X,
-} from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { Dropdown, Skeleton } from 'antd';
+	Alert,
+	Button,
+	Card,
+	Form,
+	Input,
+	Modal,
+	Skeleton,
+	Tag,
+	Typography,
+} 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';

-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>
-	);
+interface CustomDomainSettingsProps {
+	subdomain: string;
 }

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

-	const [
-		updateDomainError,
-		setUpdateDomainError,
-	] = useState<AxiosError<RenderErrorResponseDTO> | null>(null);
+	const [updateDomainError, setUpdateDomainError] = useState<AxiosError | null>(
+		null,
+	);

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

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

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

 	const dnsSuffix = useMemo(() => {
 		const defaultHost = hosts?.find((h) => h.is_default);
@@ -105,11 +78,6 @@ 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;
@@ -117,14 +85,22 @@ export default function CustomDomainSettings(): JSX.Element {

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

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

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

-	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
+	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);
+							},
+						},
 					);
-				},
-				onError: (error: AxiosError<RenderErrorResponseDTO>) => {
-					setUpdateDomainError(error as AxiosError<RenderErrorResponseDTO>);
-					setIsPollingEnabled(false);
-				},
-			},
-		);
+
+					setCustomDomainDetails({
+						subdomain: values.subdomain,
+					});
+				}
+			})
+			.catch((errorInfo) => {
+				console.error('error info', errorInfo);
+			});
 	};

-	const sortedHosts = useMemo(
-		() =>
-			[...(hosts ?? [])].sort((a, b) => {
-				if (a.name === activeHost?.name) {
-					return -1;
-				}
-				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 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>
-		);
-	}
+	const onCopyUrlHandler = (url: string): void => {
+		setCopyUrl(stripProtocol(url));
+		notifications.success({
+			message: 'Copied to clipboard',
+		});
+	};

 	return (
-		<>
-			<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-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>
-								)}
-							>
-								<Button
-									type="button"
-									size="xs"
-									className="workspace-url-trigger"
-									disabled={isFetchingHosts}
-								>
-									<Link2 size={12} />
-									<span>{stripProtocol(activeHost?.url ?? '')}</span>
-									<ChevronDown size={12} />
-								</Button>
-							</Dropdown>
-							<span className="custom-domain-card-meta-timezone">
-								<Clock size={11} />
-								{timezone.offset}
-							</span>
-						</div>
-					</div>
-
-					<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.`}
-					/>
-				)}
-
-				<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 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>

-			<CustomDomainEditModal
-				isOpen={isEditModalOpen}
-				onClose={(): void => setIsEditModalOpen(false)}
-				customDomainSubdomain={customDomainSubdomain}
-				dnsSuffix={dnsSuffix}
-				isLoading={isLoadingUpdateCustomDomain}
-				updateDomainError={updateDomainError}
-				onClearError={(): void => setUpdateDomainError(null)}
-				onSubmit={handleSubmit}
-			/>
-		</>
+			<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>
+
+						<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>
+								))}
+							</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)}
+								>
+									Customize team’s URL
+								</Button>
+							</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>
+				)}
+
+				{isLoadingHosts && (
+					<Card className="custom-domain-settings-card">
+						<Skeleton
+							className="custom-domain-settings-skeleton"
+							active
+							paragraph={{ rows: 2 }}
+						/>
+					</Card>
+				)}
+			</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>
 	);
 }
--- a/frontend/src/container/CustomDomainSettings/tests/CustomDomainSettings.test.tsx
+++ b/frontend/src/container/CustomDomainSettings/tests/CustomDomainSettings.test.tsx
@@ -4,14 +4,6 @@ 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 = {
@@ -36,12 +28,9 @@ const mockHostsResponse: GetHosts200 = {
 };

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

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

 		render(<CustomDomainSettings />);

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

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

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

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

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

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

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

-		await screen.findByText(/custom-host\.test\.cloud/i);
+		await screen.findByText(/accepted-starfish\.test\.cloud/i);
 		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
+			screen.getByRole('button', { name: /customize team['’]s url/i }),
 		);
-
-		const input = screen.getByRole('textbox');
-		await user.clear(input);
-		await user.type(input, 'myteam');
+		await user.type(screen.getByPlaceholderText(/enter domain/i), '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/DashboardContainer/visualization/charts/types.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/types.ts
@@ -1,3 +1,4 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import { LegendConfig, TooltipRenderArgs } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
@@ -8,7 +9,7 @@ interface BaseChartProps {
 	height: number;
 	showTooltip?: boolean;
 	showLegend?: boolean;
-	timezone: string;
+	timezone?: Timezone;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
--- a/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
@@ -129,12 +129,12 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					onDestroy={onPlotDestroy}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					isStackedBarChart={widget.stackedBarChart ?? false}
+					timezone={timezone}
 				>
 					<ContextMenu
 						coordinates={coordinates}
--- a/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/utils.ts
@@ -5,12 +5,7 @@ import { getInitialStackedBands } from 'container/DashboardContainer/visualizati
 import { getLegend } from 'lib/dashboard/getQueryResults';
 import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	LineInterpolation,
-	LineStyle,
-	VisibilityMode,
-} from 'lib/uPlotV2/config/types';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { get } from 'lodash-es';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -63,7 +58,12 @@ export function prepareBarPanelConfig({
 	const minStepInterval = Math.min(...Object.values(stepIntervals));

 	const builder = buildBaseConfig({
-		widget,
+		widgetId: widget.id,
+		thresholds: widget.thresholds,
+		yAxisUnit: widget.yAxisUnit,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
+		isLogScale: widget.isLogScale,
 		isDarkMode,
 		onClick,
 		onDragSelect,
@@ -98,14 +98,8 @@ export function prepareBarPanelConfig({
 		builder.addSeries({
 			scaleKey: 'y',
 			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.BAR,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
-			lineStyle: LineStyle.Solid,
-			lineInterpolation: LineInterpolation.Spline,
-			showPoints: VisibilityMode.Never,
-			pointSize: 5,
 			isDarkMode,
 			stepInterval: currentStepInterval,
 		});
--- a/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx
@@ -100,7 +100,7 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
 					syncMode={DashboardCursorSync.Crosshair}
-					timezone={timezone.value}
+					timezone={timezone}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
--- a/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts
@@ -154,7 +154,12 @@ export function prepareHistogramPanelConfig({
 	isDarkMode: boolean;
 }): UPlotConfigBuilder {
 	const builder = buildBaseConfig({
-		widget,
+		widgetId: widget.id,
+		thresholds: widget.thresholds,
+		yAxisUnit: widget.yAxisUnit,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
+		isLogScale: widget.isLogScale,
 		isDarkMode,
 		apiResponse,
 		panelMode,
@@ -191,10 +196,8 @@ export function prepareHistogramPanelConfig({
 		builder.addSeries({
 			label: '',
 			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			panelType: PANEL_TYPES.HISTOGRAM,
+			drawStyle: DrawStyle.Histogram,
 			colorMapping: widget.customLegendColors ?? {},
-			spanGaps: false,
 			barWidthFactor: 1,
 			pointSize: 5,
 			lineColor: '#3f5ecc',
@@ -216,10 +219,8 @@ export function prepareHistogramPanelConfig({
 			builder.addSeries({
 				label: label,
 				scaleKey: 'y',
-				drawStyle: DrawStyle.Bar,
-				panelType: PANEL_TYPES.HISTOGRAM,
+				drawStyle: DrawStyle.Histogram,
 				colorMapping: widget.customLegendColors ?? {},
-				spanGaps: false,
 				barWidthFactor: 1,
 				pointSize: 5,
 				isDarkMode,
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
@@ -118,7 +118,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 					}}
 					yAxisUnit={widget.yAxisUnit}
 					decimalPrecision={widget.decimalPrecision}
-					timezone={timezone.value}
+					timezone={timezone}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts
@@ -82,7 +82,12 @@ export const prepareUPlotConfig = ({
 	const minStepInterval = Math.min(...Object.values(stepIntervals));

 	const builder = buildBaseConfig({
-		widget,
+		widgetId: widget.id,
+		thresholds: widget.thresholds,
+		yAxisUnit: widget.yAxisUnit,
+		softMin: widget.softMin ?? undefined,
+		softMax: widget.softMax ?? undefined,
+		isLogScale: widget.isLogScale,
 		isDarkMode,
 		onClick,
 		onDragSelect,
@@ -120,7 +125,6 @@ export const prepareUPlotConfig = ({
 				: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
-			panelType: PANEL_TYPES.TIME_SERIES,
 		});
 	});

--- a/frontend/src/container/DashboardContainer/visualization/panels/utils/tests/baseConfigBuilder.test.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/utils/tests/baseConfigBuilder.test.ts
@@ -1,11 +1,11 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { STEP_INTERVAL_MULTIPLIER } from 'lib/uPlotV2/constants';
-import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';

 import { PanelMode } from '../../types';
-import { buildBaseConfig } from '../baseConfigBuilder';
+import { BaseConfigBuilderProps, buildBaseConfig } from '../baseConfigBuilder';

 jest.mock(
 	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
@@ -27,16 +27,17 @@ jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
 	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
 }));

-const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
-	({
-		id: 'widget-1',
-		yAxisUnit: 'ms',
-		isLogScale: false,
-		softMin: undefined,
-		softMax: undefined,
-		thresholds: [],
-		...overrides,
-	} as Widgets);
+const createBaseConfigBuilderProps = (
+	overrides: Partial<BaseConfigBuilderProps> = {},
+): Partial<BaseConfigBuilderProps> => ({
+	widgetId: 'widget-1',
+	yAxisUnit: 'ms',
+	isLogScale: false,
+	softMin: undefined,
+	softMax: undefined,
+	thresholds: [],
+	...overrides,
+});

 const createApiResponse = (
 	overrides: Partial<MetricRangePayloadProps> = {},
@@ -47,7 +48,7 @@ const createApiResponse = (
 	} as MetricRangePayloadProps);

 const baseProps = {
-	widget: createWidget(),
+	...createBaseConfigBuilderProps(),
 	apiResponse: createApiResponse(),
 	isDarkMode: true,
 	panelMode: PanelMode.DASHBOARD_VIEW,
@@ -67,7 +68,7 @@ describe('buildBaseConfig', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
 			panelMode: PanelMode.DASHBOARD_VIEW,
-			widget: createWidget({ id: 'my-widget' }),
+			...createBaseConfigBuilderProps({ widgetId: 'my-widget' }),
 		});

 		expect(builder.getWidgetId()).toBe('my-widget');
@@ -127,7 +128,7 @@ describe('buildBaseConfig', () => {
 	it('configures log scale on y axis when widget.isLogScale is true', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
-			widget: createWidget({ isLogScale: true }),
+			...createBaseConfigBuilderProps({ isLogScale: true }),
 		});

 		const config = builder.getConfig();
@@ -171,7 +172,7 @@ describe('buildBaseConfig', () => {
 	it('adds thresholds from widget', () => {
 		const builder = buildBaseConfig({
 			...baseProps,
-			widget: createWidget({
+			...createBaseConfigBuilderProps({
 				thresholds: [
 					{
 						thresholdValue: 80,
@@ -179,7 +180,7 @@ describe('buildBaseConfig', () => {
 						thresholdUnit: 'ms',
 						thresholdLabel: 'High',
 					},
-				] as Widgets['thresholds'],
+				] as ThresholdProps[],
 			}),
 		});

--- a/frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts
+++ b/frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts
@@ -1,5 +1,6 @@
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import onClickPlugin, {
 	OnClickPluginOpts,
 } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -9,28 +10,32 @@ import {
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
-import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';

 import { PanelMode } from '../types';

 export interface BaseConfigBuilderProps {
-	widget: Widgets;
+	widgetId?: string;
+	thresholds?: ThresholdProps[];
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
 	onClick?: OnClickPluginOpts['onClick'];
 	onDragSelect?: (startTime: number, endTime: number) => void;
 	timezone?: Timezone;
-	panelMode: PanelMode;
+	panelMode?: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
 	maxTimeScale?: number;
 	stepInterval?: number;
+	isLogScale?: boolean;
+	yAxisUnit?: string;
+	softMin?: number;
+	softMax?: number;
 }

 export function buildBaseConfig({
-	widget,
+	widgetId,
 	isDarkMode,
 	onClick,
 	onDragSelect,
@@ -38,9 +43,14 @@ export function buildBaseConfig({
 	timezone,
 	panelMode,
 	panelType,
+	thresholds,
 	minTimeScale,
 	maxTimeScale,
 	stepInterval,
+	isLogScale,
+	yAxisUnit,
+	softMin,
+	softMax,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
 	const tzDate = timezone
 		? (timestamp: number): Date =>
@@ -49,27 +59,26 @@ export function buildBaseConfig({

 	const builder = new UPlotConfigBuilder({
 		onDragSelect,
-		widgetId: widget.id,
+		widgetId: widgetId,
 		tzDate,
 		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: [
-			PanelMode.DASHBOARD_VIEW,
-			PanelMode.STANDALONE_VIEW,
-		].includes(panelMode)
-			? SelectionPreferencesSource.LOCAL_STORAGE
+		selectionPreferencesSource: panelMode
+			? [PanelMode.DASHBOARD_VIEW, PanelMode.STANDALONE_VIEW].includes(panelMode)
+				? SelectionPreferencesSource.LOCAL_STORAGE
+				: SelectionPreferencesSource.IN_MEMORY
 			: SelectionPreferencesSource.IN_MEMORY,
 		stepInterval,
 	});

 	const thresholdOptions: ThresholdsDrawHookOptions = {
 		scaleKey: 'y',
-		thresholds: (widget.thresholds || []).map((threshold) => ({
+		thresholds: (thresholds || []).map((threshold) => ({
 			thresholdValue: threshold.thresholdValue ?? 0,
 			thresholdColor: threshold.thresholdColor,
 			thresholdUnit: threshold.thresholdUnit,
 			thresholdLabel: threshold.thresholdLabel,
 		})),
-		yAxisUnit: widget.yAxisUnit,
+		yAxisUnit: yAxisUnit,
 	};

 	builder.addThresholds(thresholdOptions);
@@ -79,8 +88,8 @@ export function buildBaseConfig({
 		time: true,
 		min: minTimeScale,
 		max: maxTimeScale,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
 			? DistributionType.Logarithmic
 			: DistributionType.Linear,
 	});
@@ -91,11 +100,11 @@ export function buildBaseConfig({
 		time: false,
 		min: undefined,
 		max: undefined,
-		softMin: widget.softMin ?? undefined,
-		softMax: widget.softMax ?? undefined,
+		softMin: softMin,
+		softMax: softMax,
 		thresholds: thresholdOptions,
-		logBase: widget.isLogScale ? 10 : undefined,
-		distribution: widget.isLogScale
+		logBase: isLogScale ? 10 : undefined,
+		distribution: isLogScale
 			? DistributionType.Logarithmic
 			: DistributionType.Linear,
 	});
@@ -114,7 +123,7 @@ export function buildBaseConfig({
 		show: true,
 		side: 2,
 		isDarkMode,
-		isLogScale: widget.isLogScale,
+		isLogScale: isLogScale,
 		panelType,
 	});

@@ -123,8 +132,8 @@ export function buildBaseConfig({
 		show: true,
 		side: 3,
 		isDarkMode,
-		isLogScale: widget.isLogScale,
-		yAxisUnit: widget.yAxisUnit,
+		isLogScale: isLogScale,
+		yAxisUnit: yAxisUnit,
 		panelType,
 	});

--- a/frontend/src/container/GeneralSettings/GeneralSettings.styles.scss
+++ b/frontend/src/container/GeneralSettings/GeneralSettings.styles.scss
@@ -1,152 +0,0 @@
-.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,20 +3,16 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { useInterval } from 'react-use';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Button } from '@signozhq/button';
-import { Compass, ScrollText } from '@signozhq/icons';
-import { Modal, Spin } from 'antd';
+import { Button, Card, Col, Divider, Modal, Row, Spin, Typography } 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,
@@ -35,17 +31,13 @@ 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,
@@ -463,20 +455,12 @@ function GeneralSettings({
 		onModalToggleHandler(type);
 	};

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

 	const renderConfig = [
 		{
 			name: 'Metrics',
 			type: 'metrics',
-			icon: <BarChart2 size={14} />,
 			retentionFields: [
 				{
 					name: t('total_retention_period'),
@@ -519,7 +503,6 @@ function GeneralSettings({
 		{
 			name: 'Traces',
 			type: 'traces',
-			icon: <Compass size={14} />,
 			retentionFields: [
 				{
 					name: t('total_retention_period'),
@@ -560,7 +543,6 @@ function GeneralSettings({
 		{
 			name: 'Logs',
 			type: 'logs',
-			icon: <ScrollText size={14} />,
 			retentionFields: [
 				{
 					name: t('total_retention_period'),
@@ -605,66 +587,69 @@ function GeneralSettings({
 		) {
 			return (
 				<Fragment key={category.name}>
-					<div className="retention-row">
-						<span className="retention-row-label">
-							{category.icon}
-							{category.name}
-						</span>
-						<div className="retention-row-controls">
-							{category.retentionFields.map((field) => (
+					<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) => (
 								<Retention
-									key={field.name}
 									type={category.type as TTTLType}
-									text={field.name}
-									retentionValue={field.value}
-									setRetentionValue={field.setValue}
-									hide={!!field.hide}
-									isS3Field={'isS3Field' in field && !!field.isS3Field}
-									compact
+									key={retentionField.name}
+									text={retentionField.name}
+									retentionValue={retentionField.value}
+									setRetentionValue={retentionField.setValue}
+									hide={!!retentionField.hide}
+									isS3Field={'isS3Field' in retentionField && retentionField.isS3Field}
 								/>
 							))}
+
 							{!isCloudUserVal && (
-								<Button
-									variant="solid"
-									size="sm"
-									color="primary"
-									onClick={category.save.modalOpen}
-									disabled={category.save.isDisabled}
-								>
-									{category.save.saveButtonText}
-								</Button>
+								<>
+									<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>
+								</>
 							)}
-						</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>
-					)}
+						</Card>
+					</Col>
 				</Fragment>
 			);
 		}
@@ -672,24 +657,9 @@ function GeneralSettings({
 	});

 	return (
-		<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) && (
+		<>
+			{Element}
+			<Col xs={24} md={22} xl={20} xxl={18} style={{ margin: 'auto' }}>
 				<ErrorTextContainer>
 					{!isCloudUserVal && (
 						<TextToolTip
@@ -701,10 +671,12 @@ function GeneralSettings({
 					)}
 					{errorText && <ErrorText>{errorText}</ErrorText>}
 				</ErrorTextContainer>
-			)}

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

--- a/frontend/src/container/GeneralSettings/Retention.tsx
+++ b/frontend/src/container/GeneralSettings/Retention.tsx
@@ -7,7 +7,6 @@ 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';
@@ -35,7 +34,6 @@ function Retention({
 	text,
 	hide,
 	isS3Field = false,
-	compact = false,
 }: RetentionProps): JSX.Element | null {
 	// Filter available units based on type and field
 	const availableUnits = useMemo(
@@ -128,27 +126,6 @@ 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">
@@ -185,11 +162,9 @@ 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,5 +1,4 @@
 import setRetentionApiV2 from 'api/settings/setRetentionV2';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import {
 	fireEvent,
 	render,
@@ -36,20 +35,14 @@ jest.mock('hooks/useComponentPermission', () => ({
 }));

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

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

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

-const getLogsRow = (): HTMLElement => {
-	const logsLabel = screen.getByText('Logs');
-	return logsLabel.closest('.retention-row') as HTMLElement;
-};
-
 describe('GeneralSettings - S3 Logs Retention', () => {
+	const BUTTON_SELECTOR = 'button[type="button"]';
+	const PRIMARY_BUTTON_CLASS = 'ant-btn-primary';
+
 	beforeEach(() => {
 		jest.clearAllMocks();
 		(setRetentionApiV2 as jest.Mock).mockResolvedValue({
@@ -130,20 +121,21 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 				/>,
 			);

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

-			// Find all inputs in the Logs row - there should be 2 (total retention + S3)
-			const inputs = logsRow.querySelectorAll('input[type="number"]');
+			// Find all inputs in the Logs card - there should be 2 (total retention + S3)
+			const inputs = logsCard?.querySelectorAll('input[type="text"]');
 			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
-				?.closest('.retention-row-controls')
-				?.querySelectorAll('.ant-select-selector')[1] as HTMLElement;
+			const s3Dropdown = s3Input?.nextElementSibling?.querySelector(
+				'.ant-select-selector',
+			) as HTMLElement;
 			expect(s3Dropdown).toBeInTheDocument();

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

-			// Find the save button in the Logs row
-			const saveButton = logsRow.querySelector(
-				'button:not([disabled])',
+			// 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),
 			) as HTMLButtonElement;
+
 			expect(saveButton).toBeInTheDocument();

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

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

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

 			// Only 1 input should be visible (total retention, no S3)
-			const inputs = logsRow.querySelectorAll('input[type="number"]');
+			const inputs = logsCard?.querySelectorAll('input[type="text"]');
 			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 = logsRow.querySelector(
+			const totalDropdown = totalInput?.nextElementSibling?.querySelector(
 				'.ant-select-selector',
 			) as HTMLElement;
 			await user.click(totalDropdown);
@@ -267,12 +263,14 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			await user.type(totalInput, '60');

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

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

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

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

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

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

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

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

-			// 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),
+			// Find the save button
+			const buttons = logsCard?.querySelectorAll(BUTTON_SELECTOR);
+			const saveButton = Array.from(buttons || []).find((btn) =>
+				btn.className.includes(PRIMARY_BUTTON_CLASS),
 			) as HTMLButtonElement;
+
 			expect(saveButton).toBeInTheDocument();

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

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

 			// Change total retention value to trigger button enable
 			await user.clear(totalInput);
@@ -384,62 +385,4 @@ 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,5 +1,5 @@
 .general-settings-container {
-	margin: 16px 0px;
+	margin: 16px 8px;

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

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

-	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');
+	useEffect(() => {
+		if (hostsData) {
+			const defaultHost = hostsData?.data.hosts?.find((h) => h.is_default);
+			if (defaultHost?.url) {
+				const url = defaultHost?.url?.split('://')[1] ?? '';
+				setUrl(url);
+			}
 		}
-	};
+	}, [hostsData]);

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

-			<p className="welcome-description">
+			<Typography 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.
-			</p>
+			</Typography>

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

 							<Button
-								variant="solid"
-								color="primary"
-								size="sm"
+								type="primary"
 								className="periscope-btn primary"
-								prefixIcon={<img src="/Icons/container-plus.svg" alt="plus" />}
-								onClick={handleConnect}
+								icon={<img src="/Icons/container-plus.svg" alt="plus" />}
 								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') {
-										handleConnect();
+										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',
+											);
+										}
 									}
 								}}
 							>
@@ -96,7 +112,13 @@ function DataSourceInfo({
 								<div className="workspace-url">
 									<Link2 size={12} />

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

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

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

-									<span className="workspace-url-text">{url}</span>
+									<Typography className="workspace-url-text">
+										{url}
+
+										<Tag color="default" className="workspace-url-tag">
+											default
+										</Tag>
+									</Typography>
 								</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 active workspace URL with protocol stripped', async () => {
+	it('renders the default 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(/custom-host\.test\.cloud/i);
+		await screen.findByText(/accepted-starfish\.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 active workspace URL in the data-received view when telemetry is flowing', async () => {
+	it('renders 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(/custom-host\.test\.cloud/i);
+		await screen.findByText(/accepted-starfish\.test\.cloud/i);
 	});
 });
--- a/frontend/src/container/Home/Home.styles.scss
+++ b/frontend/src/container/Home/Home.styles.scss
@@ -296,11 +296,19 @@
 				flex-direction: row;
 				align-items: center;
 				gap: 8px;
-				font-size: 11px;
-				font-weight: 400;
-				line-height: 18px;
-				letter-spacing: 0.12px;
-				color: var(--foreground);
+
+				.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);
+				}
 			}
 		}

--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -13,6 +13,7 @@ import {
 	DraftingCompass,
 	FileKey2,
 	Github,
+	Globe,
 	HardDrive,
 	Home,
 	Key,
@@ -325,7 +326,13 @@ 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,6 +19,7 @@ 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,6 +154,7 @@ 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/lib/uPlotV2/components/Tooltip/Tooltip.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.tsx
@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useTimezone } from 'providers/Timezone';

 import { TooltipProps } from '../types';

@@ -22,6 +23,14 @@ export default function Tooltip({
 	const isDarkMode = useIsDarkMode();
 	const [listHeight, setListHeight] = useState(0);
 	const tooltipContent = content ?? [];
+	const { timezone: userTimezone } = useTimezone();
+
+	const resolvedTimezone = useMemo(() => {
+		if (!timezone) {
+			return userTimezone.value;
+		}
+		return timezone.value;
+	}, [timezone, userTimezone]);

 	const headerTitle = useMemo(() => {
 		if (!showTooltipHeader) {
@@ -33,10 +42,10 @@ export default function Tooltip({
 			return null;
 		}
 		return dayjs(data[0][cursorIdx] * 1000)
-			.tz(timezone)
+			.tz(resolvedTimezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
-		timezone,
+		resolvedTimezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,
--- a/frontend/src/lib/uPlotV2/components/Tooltip/tests/Tooltip.test.tsx
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/tests/Tooltip.test.tsx
@@ -83,7 +83,7 @@ function createUPlotInstance(cursorIdx: number | null): uPlot {
 function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
 	const defaultProps: TooltipTestProps = {
 		uPlotInstance: createUPlotInstance(null),
-		timezone: 'UTC',
+		timezone: { value: 'UTC', name: 'UTC', offset: '0', searchIndex: '0' },
 		content: [],
 		showTooltipHeader: true,
 		// TooltipRenderArgs (not used directly in component but required by type)
--- a/frontend/src/lib/uPlotV2/components/types.ts
+++ b/frontend/src/lib/uPlotV2/components/types.ts
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';

@@ -61,7 +62,7 @@ export interface TooltipRenderArgs {

 export interface BaseTooltipProps {
 	showTooltipHeader?: boolean;
-	timezone: string;
+	timezone?: Timezone;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
 	content?: TooltipContentItem[];
--- a/frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts
+++ b/frontend/src/lib/uPlotV2/config/UPlotSeriesBuilder.ts
@@ -1,4 +1,3 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
@@ -23,6 +22,9 @@ import {
 * Path builders are static and shared across all instances of UPlotSeriesBuilder
 */
 let builders: PathBuilders | null = null;
+
+const DEFAULT_LINE_WIDTH = 2;
+export const POINT_SIZE_FACTOR = 2.5;
 export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	constructor(props: SeriesProps) {
 		super(props);
@@ -53,7 +55,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 		const { lineWidth, lineStyle, lineCap, fillColor } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
-			width: lineWidth ?? 2,
+			width: lineWidth ?? DEFAULT_LINE_WIDTH,
 		};

 		if (lineStyle === LineStyle.Dashed) {
@@ -66,9 +68,9 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {

 		if (fillColor) {
 			lineConfig.fill = fillColor;
-		} else if (this.props.panelType === PANEL_TYPES.BAR) {
+		} else if (this.props.drawStyle === DrawStyle.Bar) {
 			lineConfig.fill = resolvedLineColor;
-		} else if (this.props.panelType === PANEL_TYPES.HISTOGRAM) {
+		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${resolvedLineColor}40`;
 		}

@@ -137,10 +139,19 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			drawStyle,
 			showPoints,
 		} = this.props;
+
+		/**
+		 * If pointSize is not provided, use the lineWidth * POINT_SIZE_FACTOR
+		 * to determine the point size.
+		 * POINT_SIZE_FACTOR is 2, so the point size will be 2x the line width.
+		 */
+		const resolvedPointSize =
+			pointSize ?? (lineWidth ?? DEFAULT_LINE_WIDTH) * POINT_SIZE_FACTOR;
+
 		const pointsConfig: Partial<Series.Points> = {
 			stroke: resolvedLineColor,
 			fill: resolvedLineColor,
-			size: !pointSize || pointSize < (lineWidth ?? 2) ? undefined : pointSize,
+			size: resolvedPointSize,
 			filter: pointsFilter || undefined,
 		};

@@ -231,7 +242,7 @@ function getPathBuilder({
 		throw new Error('Required uPlot path builders are not available');
 	}

-	if (drawStyle === DrawStyle.Bar) {
+	if (drawStyle === DrawStyle.Bar || drawStyle === DrawStyle.Histogram) {
 		const pathBuilders = uPlot.paths;
 		return getBarPathBuilder({
 			pathBuilders,
--- a/frontend/src/lib/uPlotV2/config/tests/UPlotConfigBuilder.test.ts
+++ b/frontend/src/lib/uPlotV2/config/tests/UPlotConfigBuilder.test.ts
@@ -1,4 +1,3 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import uPlot from 'uplot';

 import {
@@ -43,7 +42,6 @@ describe('UPlotConfigBuilder', () => {
 		label: 'Requests',
 		colorMapping: {},
 		drawStyle: DrawStyle.Line,
-		panelType: PANEL_TYPES.TIME_SERIES,
 		...overrides,
 	});

--- a/frontend/src/lib/uPlotV2/config/tests/UPlotSeriesBuilder.test.ts
+++ b/frontend/src/lib/uPlotV2/config/tests/UPlotSeriesBuilder.test.ts
@@ -1,4 +1,3 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import uPlot from 'uplot';

@@ -9,7 +8,7 @@ import {
 	LineStyle,
 	VisibilityMode,
 } from '../types';
-import { UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
+import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';

 const createBaseProps = (
 	overrides: Partial<SeriesProps> = {},
@@ -19,7 +18,6 @@ const createBaseProps = (
 	colorMapping: {},
 	drawStyle: DrawStyle.Line,
 	isDarkMode: false,
-	panelType: PANEL_TYPES.TIME_SERIES,
 	...overrides,
 });

@@ -137,7 +135,6 @@ describe('UPlotSeriesBuilder', () => {
 		const smallPointsBuilder = new UPlotSeriesBuilder(
 			createBaseProps({
 				lineWidth: 4,
-				pointSize: 2,
 			}),
 		);
 		const largePointsBuilder = new UPlotSeriesBuilder(
@@ -150,7 +147,7 @@ describe('UPlotSeriesBuilder', () => {
 		const smallConfig = smallPointsBuilder.getConfig();
 		const largeConfig = largePointsBuilder.getConfig();

-		expect(smallConfig.points?.size).toBeUndefined();
+		expect(smallConfig.points?.size).toBe(4 * POINT_SIZE_FACTOR); // should be lineWidth * POINT_SIZE_FACTOR, when pointSize is not provided
 		expect(largeConfig.points?.size).toBe(4);
 	});

--- a/frontend/src/lib/uPlotV2/config/types.ts
+++ b/frontend/src/lib/uPlotV2/config/types.ts
@@ -112,6 +112,7 @@ export enum DrawStyle {
 	Line = 'line',
 	Points = 'points',
 	Bar = 'bar',
+	Histogram = 'histogram',
 }

 export enum LineInterpolation {
@@ -168,7 +169,6 @@ export interface PointsConfig {
 export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	scaleKey: string;
 	label?: string;
-	panelType: PANEL_TYPES;
 	colorMapping: Record<string, string>;
 	drawStyle: DrawStyle;
 	pathBuilder?: Series.PathBuilder;
--- a/frontend/src/pages/Settings/Settings.tsx
+++ b/frontend/src/pages/Settings/Settings.tsx
@@ -79,6 +79,7 @@ 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,6 +5,7 @@ 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';
@@ -19,6 +20,7 @@ import {
 	Building,
 	Cpu,
 	CreditCard,
+	Globe,
 	Keyboard,
 	KeySquare,
 	Pencil,
@@ -122,6 +124,19 @@ 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,6 +7,7 @@ import {
 	apiKeys,
 	billingSettings,
 	createAlertChannels,
+	customDomainSettings,
 	editAlertChannels,
 	generalSettings,
 	ingestionSettings,
@@ -63,7 +64,7 @@ export const getRoutes = (
 	}

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

 	if (isAdmin) {
--- a/frontend/src/utils/permission/index.ts
+++ b/frontend/src/utils/permission/index.ts
@@ -106,6 +106,7 @@ 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,20 +5066,6 @@
  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
Abhi kumar	f11153cdec	Merge branch 'main' into chore/uplot-builder-restructure	2026-02-28 18:55:41 +05:30
Abhi Kumar	a380c4d6be	chore: fixed tsc + test	2026-02-28 18:08:39 +05:30
Abhi Kumar	a0f576e5fb	chore: fixed tsc + test	2026-02-28 17:53:44 +05:30
Abhi Kumar	98013ee3b9	chore: fixed tsc + test	2026-02-28 15:51:58 +05:30
Abhi Kumar	97b94fc4f5	chore: updated timezone types	2026-02-28 15:20:24 +05:30
Abhi Kumar	0f3f49b96a	chore: updated baseconfigbuilder test	2026-02-28 15:15:21 +05:30
Abhi Kumar	0928a30863	chore: made baseconfigbuilder generic to be used across different charts	2026-02-28 15:10:16 +05:30