fix: add missing semicolon

* fix: semantic token issues in aws refactor

* fix: semantic token issues in aws refactor

* chore: remove unnecessary light mode styles

docs/contributing/go/readme.md

@@ -20,3 +20,4 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`
 - [SQL](sql.md) - Database and SQL patterns
+- [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`

docs/contributing/go/types.md

@@ -0,0 +1,152 @@
+# Types
+
+Domain types in `pkg/types/<domain>/` live on three serialization boundaries — inbound HTTP, outbound HTTP, and SQL — on top of an in-memory domain representation. SigNoz's convention is **core-type-first**: every domain defines a single canonical type `X`, and specialized flavors (`PostableX`, `GettableX`, `UpdatableX`, `StorableX`) are introduced **only when they actually differ from `X`**. This guide spells out when each flavor is warranted and how they relate to each other.
+
+Before reading, make sure you have read [abstractions.md](abstractions.md) — the rules here build on its guidance that every new type must earn its place.
+
+## The core type is required
+
+Every domain package in `pkg/types/<domain>/` defines exactly one core type `X`: `AuthDomain`, `Channel`, `Rule`, `Dashboard`, `Role`, `PlannedMaintenance`. This is the canonical in-memory representation of the domain object. Domain methods, validation invariants, and business logic hang off `X` — not off the flavor types.
+
+Two rules shape how the core type behaves:
+
+- **Conversions can be either `New<Output>From<Input>` or a receiver-style `(x *X) ToY()` method.** Either form is fine; pick whichever reads best at the call site:
+
+    ```go
+    // Constructor form
+    func NewGettableAuthDomainFromAuthDomain(d *AuthDomain, info *AuthNProviderInfo) *GettableAuthDomain
+
+    // Receiver form
+    func (m *PlannedMaintenanceWithRules) ToPlannedMaintenance() *PlannedMaintenance
+    ```
+- **`X` can double as the storage row** when the DB shape would be identical. `Channel` embeds `bun.BaseModel` directly, and there is no `StorableChannel`. This is the preferred shape when it works.
+
+Domain packages under `pkg/types/` must not import from other `pkg/` packages. Keep the core type's methods lightweight and push orchestration out to the module layer.
+
+## Add a flavor only when it differs
+
+For each of the four flavors, create it only if its shape diverges from `X`. If a flavor would have the same fields and tags as `X`, reuse `X` directly, or declare a type alias. Every flavor must earn its place per [abstractions.md](abstractions.md) rule 6 ("Wrappers must add semantics, not just rename").
+
+| Flavor       | Create it when it differs in…                                                                                                                                                                                                     |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `PostableX`  | JSON shape differs from `X` — typically no `Id`, no audit fields, no server-computed fields. Often owns input validation via `Validate()` or a custom `UnmarshalJSON`.                                                            |
+| `GettableX`  | Response shape adds server-computed fields that are not persisted — e.g., `GettableAuthDomain` adds `AuthNProviderInfo`, which is resolved at read time.                                                                          |
+| `UpdatableX` | Only a strict subset of `PostableX` is replaceable on PUT. If the updatable shape equals `PostableX`, reuse `PostableX`.                                                                                                          |
+| `StorableX`  | DB row shape differs from `X` — usually `X` carries nested typed config while `StorableX` carries a flat `Data string` JSON column, plus bun tags, audit mixins, and an `OrgID`. If `X` already has those, skip the flavor.       |
+
+The failure mode this rule exists to prevent: minting all four flavors on reflex for every new resource, even when two or three are structurally identical. Each unnecessary flavor is another type contributors must understand and another conversion that can drift.
+
+## Worked examples
+
+### Channel — core type only
+
+```go
+type Channels         = []*Channel
+type GettableChannels = []*Channel
+
+type Channel struct {
+    bun.BaseModel `bun:"table:notification_channel"`
+    types.Identifiable
+    types.TimeAuditable
+    Name  string `json:"name"  required:"true" bun:"name"`
+    Type  string `json:"type"  required:"true" bun:"type"`
+    Data  string `json:"data"  required:"true" bun:"data"`
+    OrgID string `json:"orgId" required:"true" bun:"org_id"`
+}
+```
+
+`Channel` is both the domain type and the bun row. `GettableChannels` is a **type alias** because `*Channel` already serializes correctly as a response. There is no `StorableChannel`, `PostableChannel`, or `UpdatableChannel` — those would be identical to `Channel` and so do not exist. Prefer this shape when it works.
+
+### AuthDomain — all four flavors
+
+```go
+type AuthDomain struct {
+    storableAuthDomain *StorableAuthDomain
+    authDomainConfig   *AuthDomainConfig
+}
+
+type StorableAuthDomain struct {
+    bun.BaseModel `bun:"table:auth_domain"`
+    types.Identifiable
+    Name  string      `bun:"name"`
+    Data  string      `bun:"data"`  // AuthDomainConfig serialized as JSON
+    OrgID valuer.UUID `bun:"org_id"`
+    types.TimeAuditable
+}
+
+type PostableAuthDomain struct {
+    Config AuthDomainConfig `json:"config"`
+    Name   string           `json:"name"`
+}
+
+type UpdateableAuthDomain struct {
+    Config AuthDomainConfig `json:"config"` // Name intentionally absent
+}
+
+type GettableAuthDomain struct {
+    *StorableAuthDomain
+    *AuthDomainConfig
+    AuthNProviderInfo *AuthNProviderInfo `json:"authNProviderInfo"`
+}
+```
+
+Each flavor exists for a concrete reason:
+
+- `StorableAuthDomain` stores the typed config as an opaque `Data string` column, so the schema does not need to migrate every time a config field is added.
+- `PostableAuthDomain` carries the config as a structured object (not a string) for the request.
+- `UpdateableAuthDomain` excludes `Name` because a domain's name cannot change after creation.
+- `GettableAuthDomain` adds `AuthNProviderInfo`, which is derived at read time and never persisted.
+
+The core `AuthDomain` holds the two live halves — `storableAuthDomain` and `authDomainConfig` — and owns business methods such as `Update(config)`. Conversions use the `New<Output>From<Input>` form: `NewAuthDomainFromConfig`, `NewAuthDomainFromStorableAuthDomain`, `NewGettableAuthDomainFromAuthDomain`.
+
+## Conventions that tie the flavors together
+
+- **Conversions** use either a `New<Output>From<Input>` constructor — e.g. `NewChannelFromReceiver`, `NewGettableAuthDomainFromAuthDomain` — or a receiver-style `ToY()` method. Both forms coexist in the codebase; use whichever fits the call site.
+- **Validation belongs on the core type `X`.** Putting it on `X` means every write path — HTTP create, HTTP update, in-process migration, replay — runs the same checks. `Validate()` on `PostableX` is reserved for checks that are specific to the request shape and do not apply to `X`. `UnmarshalJSON` on `PostableX` is a separate tool that lives there because decoding only happens at the HTTP boundary — `PostableAuthDomain.UnmarshalJSON` rejecting a malformed domain name at decode time is the canonical example.
+
+    ```go
+    // Domain invariants: every write path re-runs these.
+    func (x *X) Validate() error { ... }
+
+    // Request-shape-only: checks that do not apply once the value is persisted.
+    func (p *PostableX) Validate() error { ... }
+    ```
+- **Type aliases, not wrappers**, when two shapes are identical. `type GettableChannels = []*Channel` is correct because it adds no semantics beyond the underlying type.
+- **Serialization tags** follow [handler.md](handler.md): `required:"true"` means the JSON key must be present, `nullable:"true"` is required on any slice or map that may serialize as `null`, and types with a fixed value set must implement `Enum() []any`.
+
+## A note on `UpdatableX` and `PatchableX`
+
+- `UpdatableX` — the body for PUT (full replace) when the shape is a strict subset of `PostableX`. If the updatable shape equals `PostableX`, reuse `PostableX`.
+- `PatchableX` — the body for PATCH (partial update); only the fields a client is allowed to patch. For example, `PatchableRole` carries a single `Description` field even though `Role` has many — clients may patch the description but not anything else.
+
+    ```go
+    type PatchableRole struct {
+        Description string `json:"description"`
+    }
+    ```
+
+Both are optional. Do not introduce them if `PostableX` already covers the case.
+
+## What to avoid
+
+- **Do not mint a flavor that mirrors the core type.** If `StorableX` would have the same fields as `X`, use `X` directly with `bun.BaseModel` embedded. `Channel` is the canonical example.
+- **Do not bolt domain methods onto `StorableX`.** Storage types are data carriers. Domain methods live on `X`.
+- **Do not invent new suffixes** (`Creatable`, `Fetchable`, `Savable`). The core type plus `Postable` / `Gettable` / `Updatable` / `Patchable` / `Storable` covers every case that exists today.
+- **Spelling — `Updatable`, not `Updateable`.** `Updateable` is a common typo. Prefer the shorter form when introducing new types, and rename any stragglers you come across.
+- **Spelling — `Storable`, not `Storeable`.** `Storeable` is a common typo. Prefer the shorter form when introducing new types, and rename any stragglers you come across.
+
+## What should I remember?
+
+- Every domain package defines the core type `X`. Only `X` is mandatory.
+- Add `PostableX` / `GettableX` / `UpdatableX` / `StorableX` one at a time, only when the shape actually diverges from `X`.
+- Domain logic lives on `X`, not on the flavor types.
+- Conversions can be a `New<Output>From<Input>` constructor or a receiver-style `ToY()` method — pick whichever reads best at the call site.
+- Use a type alias when two shapes are truly identical.
+- `pkg/types/<domain>/` must not import from other `pkg/` packages.
+
+## Further reading
+
+- [abstractions.md](abstractions.md) — when to introduce a new type at all.
+- [handler.md](handler.md) — struct tag rules at the HTTP boundary.
+- [packages.md](packages.md) — where types live under `pkg/types/`.
+- [sql.md](sql.md) — star-schema requirements for `StorableX`.

ee/modules/cloudintegration/implcloudintegration/implcloudprovider/awscloudprovider.go

@@ -19,11 +19,11 @@ func NewAWSCloudProvider(defStore cloudintegrationtypes.ServiceDefinitionStore)
 }
 
 func (provider *awscloudprovider) GetConnectionArtifact(ctx context.Context, account *cloudintegrationtypes.Account, req *cloudintegrationtypes.GetConnectionArtifactRequest) (*cloudintegrationtypes.ConnectionArtifact, error) {
-	baseURL := fmt.Sprintf(cloudintegrationtypes.CloudFormationQuickCreateBaseURL.StringValue(), req.Config.Aws.DeploymentRegion)
+	baseURL := fmt.Sprintf(cloudintegrationtypes.CloudFormationQuickCreateBaseURL.StringValue(), req.Config.AWS.DeploymentRegion)
 	u, _ := url.Parse(baseURL)
 
 	q := u.Query()
-	q.Set("region", req.Config.Aws.DeploymentRegion)
+	q.Set("region", req.Config.AWS.DeploymentRegion)
 	u.Fragment = "/stacks/quickcreate"
 
 	u.RawQuery = q.Encode()
@@ -39,9 +39,7 @@ func (provider *awscloudprovider) GetConnectionArtifact(ctx context.Context, acc
 	q.Set("param_IngestionKey", req.Credentials.IngestionKey)
 
 	return &cloudintegrationtypes.ConnectionArtifact{
-		Aws: &cloudintegrationtypes.AWSConnectionArtifact{
-			ConnectionURL: u.String() + "?&" + q.Encode(), // this format is required by AWS
-		},
+		AWS: cloudintegrationtypes.NewAWSConnectionArtifact(u.String() + "?&" + q.Encode()), // this format is required by AWS
 	}, nil
 }
 
@@ -124,9 +122,6 @@ func (provider *awscloudprovider) BuildIntegrationConfig(
 	}
 
 	return &cloudintegrationtypes.ProviderIntegrationConfig{
-		AWS: &cloudintegrationtypes.AWSIntegrationConfig{
-			EnabledRegions:              account.Config.AWS.Regions,
-			TelemetryCollectionStrategy: collectionStrategy,
-		},
+		AWS: cloudintegrationtypes.NewAWSIntegrationConfig(account.Config.AWS.Regions, collectionStrategy),
 	}, nil
 }

frontend/jest.config.ts

@@ -45,7 +45,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/jest.setup.ts

@@ -24,6 +24,10 @@ window.matchMedia =
 		};
 	};
 
+if (!HTMLElement.prototype.scrollIntoView) {
+	HTMLElement.prototype.scrollIntoView = function (): void {};
+}
+
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/package.json

@@ -48,23 +48,9 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
-    "@signozhq/button": "0.0.5",
-    "@signozhq/calendar": "0.1.1",
-    "@signozhq/callout": "0.0.4",
-    "@signozhq/checkbox": "0.0.4",
-    "@signozhq/combobox": "0.0.4",
-    "@signozhq/command": "0.0.2",
     "@signozhq/design-tokens": "2.1.4",
-    "@signozhq/dialog": "0.0.4",
-    "@signozhq/drawer": "0.0.6",
     "@signozhq/icons": "0.1.0",
-    "@signozhq/input": "0.0.4",
-    "@signozhq/popover": "0.1.2",
-    "@signozhq/radio-group": "0.0.4",
-    "@signozhq/resizable": "0.0.2",
-    "@signozhq/table": "0.3.7",
-    "@signozhq/toggle-group": "0.0.3",
-    "@signozhq/ui": "0.0.5",
+    "@signozhq/ui": "0.0.9",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/src/AppRoutes/pageComponents.ts

@@ -244,12 +244,18 @@ export const ShortcutsPage = Loadable(
 	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Settings'),
 );
 
-export const InstalledIntegrations = Loadable(
+export const Integrations = Loadable(
 	() =>
 		import(
 			/* webpackChunkName: "InstalledIntegrations" */ 'pages/IntegrationsModulePage'
 		),
 );
+export const IntegrationsDetailsPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "IntegrationsDetailsPage" */ 'pages/IntegrationsDetailsPage'
+		),
+);
 
 export const MessagingQueuesMainPage = Loadable(
 	() =>

frontend/src/AppRoutes/routes.ts

@@ -18,7 +18,8 @@ import {
 	ForgotPassword,
 	Home,
 	InfrastructureMonitoring,
-	InstalledIntegrations,
+	Integrations,
+	IntegrationsDetailsPage,
 	LicensePage,
 	ListAllALertsPage,
 	LiveLogs,
@@ -389,10 +390,17 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
+	{
+		path: ROUTES.INTEGRATIONS_DETAIL,
+		exact: true,
+		component: IntegrationsDetailsPage,
+		isPrivate: true,
+		key: 'INTEGRATIONS_DETAIL',
+	},
 	{
 		path: ROUTES.INTEGRATIONS,
 		exact: true,
-		component: InstalledIntegrations,
+		component: Integrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},

frontend/src/api/Integrations/removeAwsIntegrationAccount.ts

@@ -1,19 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-const removeAwsIntegrationAccount = async (
-	accountId: string,
-): Promise<SuccessResponse<Record<string, never>> | ErrorResponse> => {
-	const response = await axios.post(
-		`/cloud-integrations/aws/accounts/${accountId}/disconnect`,
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default removeAwsIntegrationAccount;

frontend/src/api/integration/aws/index.ts

@@ -1,88 +0,0 @@
-import axios from 'api';
-import {
-	CloudAccount,
-	Service,
-	ServiceData,
-	UpdateServiceConfigPayload,
-	UpdateServiceConfigResponse,
-} from 'container/CloudIntegrationPage/ServicesSection/types';
-import {
-	AccountConfigPayload,
-	AccountConfigResponse,
-	ConnectionParams,
-	ConnectionUrlResponse,
-} from 'types/api/integrations/aws';
-
-export const getAwsAccounts = async (): Promise<CloudAccount[]> => {
-	const response = await axios.get('/cloud-integrations/aws/accounts');
-
-	return response.data.data.accounts;
-};
-
-export const getAwsServices = async (
-	cloudAccountId?: string,
-): Promise<Service[]> => {
-	const params = cloudAccountId
-		? { cloud_account_id: cloudAccountId }
-		: undefined;
-	const response = await axios.get('/cloud-integrations/aws/services', {
-		params,
-	});
-
-	return response.data.data.services;
-};
-
-export const getServiceDetails = async (
-	serviceId: string,
-	cloudAccountId?: string,
-): Promise<ServiceData> => {
-	const params = cloudAccountId
-		? { cloud_account_id: cloudAccountId }
-		: undefined;
-	const response = await axios.get(
-		`/cloud-integrations/aws/services/${serviceId}`,
-		{ params },
-	);
-	return response.data.data;
-};
-
-export const generateConnectionUrl = async (params: {
-	agent_config: { region: string };
-	account_config: { regions: string[] };
-	account_id?: string;
-}): Promise<ConnectionUrlResponse> => {
-	const response = await axios.post(
-		'/cloud-integrations/aws/accounts/generate-connection-url',
-		params,
-	);
-	return response.data.data;
-};
-
-export const updateAccountConfig = async (
-	accountId: string,
-	payload: AccountConfigPayload,
-): Promise<AccountConfigResponse> => {
-	const response = await axios.post<AccountConfigResponse>(
-		`/cloud-integrations/aws/accounts/${accountId}/config`,
-		payload,
-	);
-	return response.data;
-};
-
-export const updateServiceConfig = async (
-	serviceId: string,
-	payload: UpdateServiceConfigPayload,
-): Promise<UpdateServiceConfigResponse> => {
-	const response = await axios.post<UpdateServiceConfigResponse>(
-		`/cloud-integrations/aws/services/${serviceId}/config`,
-		payload,
-	);
-	return response.data;
-};
-
-export const getConnectionParams = async (): Promise<ConnectionParams> => {
-	const response = await axios.get(
-		'/cloud-integrations/aws/accounts/generate-connection-params',
-	);
-	return response.data.data;
-};

frontend/src/assets/svgs/dotted-double-line.svg

@@ -0,0 +1,9 @@
+<svg width="929" height="8" viewBox="0 0 929 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="dotted-double-line-pattern" x="0" y="0" width="6" height="8" patternUnits="userSpaceOnUse">
+      <rect width="2" height="2" rx="1" fill="#242834" />
+      <rect y="6" width="2" height="2" rx="1" fill="#242834" />
+    </pattern>
+  </defs>
+  <rect width="929" height="8" fill="url(#dotted-double-line-pattern)" />
+</svg>

frontend/src/auto-import-registry.d.ts

@@ -10,20 +10,6 @@
 // PR for reference: https://github.com/SigNoz/signoz/pull/9694
 // -------------------------------------------------------------------------
 
-import '@signozhq/button';
-import '@signozhq/calendar';
-import '@signozhq/callout';
-import '@signozhq/checkbox';
-import '@signozhq/combobox';
-import '@signozhq/command';
 import '@signozhq/design-tokens';
-import '@signozhq/dialog';
-import '@signozhq/drawer';
 import '@signozhq/icons';
-import '@signozhq/input';
-import '@signozhq/popover';
-import '@signozhq/radio-group';
-import '@signozhq/resizable';
-import '@signozhq/table';
-import '@signozhq/toggle-group';
 import '@signozhq/ui';

frontend/src/components/AppLoading/AppLoading.styles.scss

@@ -80,12 +80,12 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
 		transparent 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
 		transparent 100%
 	);
 }

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Button } from '@signozhq/button';
+import { Button } from '@signozhq/ui';
 import { LifeBuoy } from 'lucide-react';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
@@ -23,8 +23,10 @@ function AuthHeader(): JSX.Element {
 			</div>
 			<Button
 				className="auth-header-help-button"
-				prefixIcon={<LifeBuoy size={12} />}
+				prefix={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
+				variant="solid"
+				color="none"
 			>
 				Get Help
 			</Button>

frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss

@@ -43,12 +43,12 @@
 .masked-dots {
 	mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--background) 10%, transparent) 0%,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0%,
 		transparent 56.77%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--background) 10%, transparent) 0%,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0%,
 		transparent 56.77%
 	);
 }

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss

@@ -0,0 +1,34 @@
+.cloud-service-data-collected {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.cloud-service-data-collected-table {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		.cloud-service-data-collected-table-heading {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+
+			color: var(--l2-foreground);
+
+			/* Bifrost (Ancient)/Content/sm */
+			font-family: Inter;
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+			letter-spacing: -0.07px;
+		}
+
+		.cloud-service-data-collected-table-logs {
+			border-radius: 6px;
+			border: 1px solid var(--l3-background);
+			background: var(--l1-background);
+		}
+	}
+}

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -1,13 +1,18 @@
 import { Table } from 'antd';
+import {
+	CloudintegrationtypesCollectedLogAttributeDTO,
+	CloudintegrationtypesCollectedMetricDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { BarChart2, ScrollText } from 'lucide-react';
 
-import { ServiceData } from './types';
+import './CloudServiceDataCollected.styles.scss';
 
 function CloudServiceDataCollected({
 	logsData,
 	metricsData,
 }: {
-	logsData: ServiceData['data_collected']['logs'];
-	metricsData: ServiceData['data_collected']['metrics'];
+	logsData: CloudintegrationtypesCollectedLogAttributeDTO[] | null | undefined;
+	metricsData: CloudintegrationtypesCollectedMetricDTO[] | null | undefined;
 }): JSX.Element {
 	const logsColumns = [
 		{
@@ -61,24 +66,30 @@ function CloudServiceDataCollected({
 	return (
 		<div className="cloud-service-data-collected">
 			{logsData && logsData.length > 0 && (
-				<div className="cloud-service-data-collected__table">
-					<div className="cloud-service-data-collected__table-heading">Logs</div>
+				<div className="cloud-service-data-collected-table">
+					<div className="cloud-service-data-collected-table-heading">
+						<ScrollText size={14} />
+						Logs
+					</div>
 					<Table
 						columns={logsColumns}
 						dataSource={logsData}
 						{...tableProps}
-						className="cloud-service-data-collected__table-logs"
+						className="cloud-service-data-collected-table-logs"
 					/>
 				</div>
 			)}
 			{metricsData && metricsData.length > 0 && (
-				<div className="cloud-service-data-collected__table">
-					<div className="cloud-service-data-collected__table-heading">Metrics</div>
+				<div className="cloud-service-data-collected-table">
+					<div className="cloud-service-data-collected-table-heading">
+						<BarChart2 size={14} />
+						Metrics
+					</div>
 					<Table
 						columns={metricsColumns}
 						dataSource={metricsData}
 						{...tableProps}
-						className="cloud-service-data-collected__table-metrics"
+						className="cloud-service-data-collected-table-metrics"
 					/>
 				</div>
 			)}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -1,10 +1,13 @@
 import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/ui';
+import {
+	Button,
+	DialogFooter,
+	DialogWrapper,
+	Input,
+	toast,
+} from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,
@@ -137,6 +140,7 @@ function CreateServiceAccountModal(): JSX.Element {
 
 				<Button
 					type="submit"
+					// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 					form="create-sa-form"
 					variant="solid"
 					color="primary"

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

@@ -1,7 +1,13 @@
 import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import {
+	render,
+	screen,
+	userEvent,
+	waitFor,
+	waitForElementToBeRemoved,
+} from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
@@ -121,12 +127,12 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await screen.findByRole('dialog', { name: /New Service Account/i });
+		const dialog = await screen.findByRole('dialog', {
+			name: /New Service Account/i,
+		});
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		expect(
-			screen.queryByRole('dialog', { name: /New Service Account/i }),
-		).not.toBeInTheDocument();
+		await waitForElementToBeRemoved(dialog);
 	});
 
 	it('shows "Name is required" after clearing the name field', async () => {

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,4 +1,4 @@
-import { Calendar } from '@signozhq/calendar';
+import { Calendar } from '@signozhq/ui';
 import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,7 +7,7 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/button';
+import { Button } from '@signozhq/ui';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -661,7 +661,9 @@ function CustomTimePicker({
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
 						data-testid="zoom-out-btn"
-						prefixIcon={<ZoomOut size={14} />}
+						prefix={<ZoomOut size={14} />}
+						variant="solid"
+						color="none"
 					/>
 				</Tooltip>
 			)}

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
+import { Button, DialogFooter, DialogWrapper } from '@signozhq/ui';
 import { MemberRow } from 'components/MembersTable/MembersTable';
 
 interface DeleteMemberDialogProps {

frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -1,17 +1,10 @@
 .edit-member-drawer {
-	&__layout {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh - 48px);
-	}
-
 	&__body {
 		flex: 1;
 		overflow-y: auto;
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-8);
-		padding: var(--padding-5) var(--padding-4);
 	}
 
 	&__field {
@@ -120,11 +113,6 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		height: 56px;
-		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--l1-border);
-		flex-shrink: 0;
-		background: var(--card);
 	}
 
 	&__footer-left {

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,10 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button } from '@signozhq/button';
-import { DrawerWrapper } from '@signozhq/drawer';
 import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { Badge, toast } from '@signozhq/ui';
+import { Badge, Button, DrawerWrapper, Input, toast } from '@signozhq/ui';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
@@ -596,65 +593,69 @@ function EditMemberDrawer({
 	const drawerContent = (
 		<div className="edit-member-drawer__layout">
 			<div className="edit-member-drawer__body">{drawerBody}</div>
+		</div>
+	);
 
-			{!isDeleted && (
-				<div className="edit-member-drawer__footer">
-					<div className="edit-member-drawer__footer-left">
-						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
-							<span className="edit-member-drawer__tooltip-wrapper">
-								<Button
-									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
-									onClick={(): void => setShowDeleteConfirm(true)}
-									disabled={isRootUser || isSelf}
-								>
-									<Trash2 size={12} />
-									{isInvited ? 'Revoke Invite' : 'Delete Member'}
-								</Button>
-							</span>
-						</Tooltip>
-
-						<div className="edit-member-drawer__footer-divider" />
-						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
-							<span className="edit-member-drawer__tooltip-wrapper">
-								<Button
-									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-									onClick={handleGenerateResetLink}
-									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
-								>
-									<RefreshCw size={12} />
-									{isGeneratingLink
-										? 'Generating...'
-										: isInvited
-										? getInviteButtonLabel(
-												isLoadingTokenStatus,
-												existingToken,
-												isTokenExpired,
-												tokenNotFound,
-										  )
-										: 'Generate Password Reset Link'}
-								</Button>
-							</span>
-						</Tooltip>
-					</div>
-
-					<div className="edit-member-drawer__footer-right">
-						<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
-							<X size={14} />
-							Cancel
-						</Button>
-
+	const footer = (
+		<div className="edit-member-drawer__footer">
+			<div className="edit-member-drawer__footer-left">
+				<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
+					<span className="edit-member-drawer__tooltip-wrapper">
 						<Button
+							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
+							onClick={(): void => setShowDeleteConfirm(true)}
+							disabled={isRootUser || isSelf}
 							variant="solid"
-							color="primary"
-							size="sm"
-							disabled={!isDirty || isSaving || isRootUser}
-							onClick={handleSave}
+							color="none"
 						>
-							{isSaving ? 'Saving...' : 'Save Member Details'}
+							<Trash2 size={12} />
+							{isInvited ? 'Revoke Invite' : 'Delete Member'}
 						</Button>
-					</div>
-				</div>
-			)}
+					</span>
+				</Tooltip>
+
+				<div className="edit-member-drawer__footer-divider" />
+				<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+					<span className="edit-member-drawer__tooltip-wrapper">
+						<Button
+							className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
+							onClick={handleGenerateResetLink}
+							disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
+							variant="solid"
+							color="none"
+						>
+							<RefreshCw size={12} />
+							{isGeneratingLink
+								? 'Generating...'
+								: isInvited
+								? getInviteButtonLabel(
+										isLoadingTokenStatus,
+										existingToken,
+										isTokenExpired,
+										tokenNotFound,
+								  )
+								: 'Generate Password Reset Link'}
+						</Button>
+					</span>
+				</Tooltip>
+			</div>
+
+			<div className="edit-member-drawer__footer-right">
+				<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
+					<X size={14} />
+					Cancel
+				</Button>
+
+				<Button
+					variant="solid"
+					color="primary"
+					size="sm"
+					disabled={!isDirty || isSaving || isRootUser}
+					onClick={handleSave}
+				>
+					{isSaving ? 'Saving...' : 'Save Member Details'}
+				</Button>
+			</div>
 		</div>
 	);
 
@@ -668,14 +669,14 @@ function EditMemberDrawer({
 					}
 				}}
 				direction="right"
-				type="panel"
 				showCloseButton
 				showOverlay={false}
-				allowOutsideClick
-				header={{ title: 'Member Details' }}
-				content={drawerContent}
-				className="edit-member-drawer"
-			/>
+				title="Member Details"
+				footer={footer}
+				width="wide"
+			>
+				{drawerContent}
+			</DrawerWrapper>
 
 			<ResetLinkDialog
 				open={showResetLinkDialog}

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@signozhq/button';
-import { DialogWrapper } from '@signozhq/dialog';
 import { Check, Copy } from '@signozhq/icons';
+import { Button, DialogWrapper } from '@signozhq/ui';
 
 interface ResetLinkDialogProps {
 	open: boolean;
@@ -49,7 +48,7 @@ function ResetLinkDialog({
 						color="secondary"
 						size="sm"
 						onClick={onCopy}
-						prefixIcon={hasCopied ? <Check size={12} /> : <Copy size={12} />}
+						prefix={hasCopied ? <Check size={12} /> : <Copy size={12} />}
 						className="reset-link-dialog__copy-btn"
 					>
 						{hasCopied ? 'Copied!' : 'Copy'}

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

@@ -20,17 +20,29 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 
-jest.mock('@signozhq/drawer', () => ({
-	DrawerWrapper: ({
-		content,
-		open,
-	}: {
-		content?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null => (open ? <div>{content}</div> : null),
+jest.mock('api/generated/services/users', () => ({
+	useDeleteUser: jest.fn(),
+	useGetUser: jest.fn(),
+	useUpdateUser: jest.fn(),
+	useUpdateMyUserV2: jest.fn(),
+	useSetRoleByUserID: jest.fn(),
+	useGetResetPasswordToken: jest.fn(),
+	useCreateResetPasswordToken: jest.fn(),
 }));
 
-jest.mock('@signozhq/dialog', () => ({
+jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
+	convertToApiError: jest.fn(),
+}));
+
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
+	DrawerWrapper: ({
+		children,
+		open,
+	}: {
+		children?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null => (open ? <div>{children}</div> : null),
 	DialogWrapper: ({
 		children,
 		open,
@@ -48,24 +60,6 @@ jest.mock('@signozhq/dialog', () => ({
 	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
 		<div>{children}</div>
 	),
-}));
-
-jest.mock('api/generated/services/users', () => ({
-	useDeleteUser: jest.fn(),
-	useGetUser: jest.fn(),
-	useUpdateUser: jest.fn(),
-	useUpdateMyUserV2: jest.fn(),
-	useSetRoleByUserID: jest.fn(),
-	useGetResetPasswordToken: jest.fn(),
-	useCreateResetPasswordToken: jest.fn(),
-}));
-
-jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
-	convertToApiError: jest.fn(),
-}));
-
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/ErrorModal/ErrorModal.styles.scss

@@ -21,7 +21,7 @@
 	&__wrap {
 		background: linear-gradient(
 			180deg,
-			color-mix(in srgb, var(--background) 12%, transparent) 0.07%,
+			color-mix(in srgb, var(--l1-background) 12%, transparent) 0.07%,
 			color-mix(in srgb, var(--bg-sakura-950) 24%, transparent) 50.04%,
 			color-mix(in srgb, var(--bg-sakura-800) 36%, transparent) 75.02%,
 			color-mix(in srgb, var(--bg-sakura-600) 48%, transparent) 87.51%,
@@ -40,15 +40,17 @@
 			margin: auto;
 		}
 	}
+
 	&__body {
 		padding: 0;
-		background: var(--l2-background);
 		overflow: hidden;
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
 	}
+
 	&__header {
 		background: none !important;
+
 		.ant-modal-title {
 			display: flex;
 			justify-content: space-between;
@@ -80,6 +82,7 @@
 				pointer-events: none;
 			}
 		}
+
 		.close-button {
 			padding: 3px 7px;
 			background: var(--l2-background);
@@ -90,15 +93,15 @@
 			box-shadow: none;
 		}
 	}
+
 	&__footer {
 		margin: 0 !important;
 		height: 6px;
-		background: var(--bg-sakura-500);
 	}
+
 	&__content {
 		padding: 0 !important;
 		border-radius: 4px;
 		overflow: hidden;
-		background: none !important;
 	}
 }

frontend/src/components/ErrorModal/components/ErrorContent.styles.scss

@@ -5,7 +5,6 @@
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
-		border-bottom: 1px solid var(--l1-border);
 	}
 
 	&__summary {

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui';
 import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { handleContactSupport } from 'pages/Integrations/utils';
 
 function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	const [activeTab, setActiveTab] = useState('feedback');

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -4,8 +4,8 @@ import { toast } from '@signozhq/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
+import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { handleContactSupport } from 'pages/Integrations/utils';
 
 import FeedbackModal from '../FeedbackModal';
 
@@ -31,7 +31,7 @@ jest.mock('hooks/useGetTenantLicense', () => ({
 	useGetTenantLicense: jest.fn(),
 }));
 
-jest.mock('pages/Integrations/utils', () => ({
+jest.mock('container/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));
 

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -5,7 +5,6 @@
 	border-radius: 2px 0px 0px 2px;
 
 	.label {
-		color: var(--l2-foreground);
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
@@ -21,8 +20,9 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		color: var(--l2-foreground);
 
 		display: flex;
 		justify-content: flex-start;
@@ -37,6 +37,7 @@
 
 		border-radius: 2px 0px 0px 2px;
 		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
 
 		border-right: none;
 		border-left: none;
@@ -46,6 +47,7 @@
 		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
 		line-height: 27px;
+
 		&::placeholder {
 			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
@@ -61,8 +63,8 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
 		height: 38px;
 		width: 38px;
 	}
@@ -71,7 +73,7 @@
 		.input {
 			border-radius: 0px 2px 2px 0px;
 			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			background: var(--l2-background);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,11 +1,14 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
 import { Style } from '@signozhq/design-tokens';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/ui';
+import {
+	Button,
+	Callout,
+	DialogFooter,
+	DialogWrapper,
+	Input,
+	toast,
+} from '@signozhq/ui';
 import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
@@ -295,8 +298,9 @@ function InviteMembersModal({
 						showIcon
 						icon={<CircleAlert size={12} />}
 						className="invite-team-members-error-callout"
-						description={getValidationErrorMessage()}
-					/>
+					>
+						{getValidationErrorMessage()}
+					</Callout>
 				)}
 			</div>
 
@@ -306,7 +310,7 @@ function InviteMembersModal({
 					color="secondary"
 					size="sm"
 					className="add-another-member-button"
-					prefixIcon={<Plus size={12} color={Style.L1_FOREGROUND} />}
+					prefix={<Plus size={12} color={Style.L1_FOREGROUND} />}
 					onClick={addRow}
 				>
 					Add another

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -100,16 +100,19 @@ function MarkdownRenderer({
 	variables,
 	trackCopyAction,
 	elementDetails,
+	className,
 }: {
 	markdownContent: any;
 	variables: any;
 	trackCopyAction?: boolean;
 	elementDetails?: Record<string, unknown>;
+	className?: string;
 }): JSX.Element {
 	const interpolatedMarkdown = interpolateMarkdown(markdownContent, variables);
 
 	return (
 		<ReactMarkdown
+			className={className}
 			rehypePlugins={[rehypeRaw as any]}
 			components={{
 				// @ts-ignore

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -21,7 +21,7 @@
 	.ant-table-thead {
 		> tr > th,
 		> tr > td {
-			background: var(--background);
+			background: var(--l1-background);
 			font-size: var(--paragraph-small-600-font-size);
 			font-weight: var(--paragraph-small-600-font-weight);
 			line-height: var(--paragraph-small-600-line-height);

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -1,3 +1,5 @@
+// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
+
 .query-builder-v2 {
 	display: flex;
 	flex-direction: row;
@@ -274,7 +276,7 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--l3-background);
+						background: var(--l2-background);
 						color: var(--l2-foreground);
 						font-size: 12px;
 						font-weight: 300;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -1,3 +1,5 @@
+// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
+
 .query-add-ons {
 	width: 100%;
 }
@@ -102,7 +104,7 @@
 					border-top-right-radius: 0px;
 					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: var(--card) !important;
+					background-color: var(--l2-background) !important;
 
 					&:focus-within {
 						border-color: var(--l1-border);
@@ -211,7 +213,7 @@
 				.cm-line {
 					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(--card) !important;
+					background-color: var(--l2-background) !important;
 
 					::-moz-selection {
 						background: var(--l3-background) !important;
@@ -249,8 +251,8 @@
 
 		.close-btn {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
 			height: 38px;
 			width: 38px;
 
@@ -284,108 +286,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.add-ons-list {
-		.add-ons-tabs {
-			.add-on-tab-title {
-				color: var(--l1-foreground) !important;
-			}
-
-			.tab {
-				border: 1px solid var(--l1-border) !important;
-				background: var(--l1-background) !important;
-
-				&:first-child {
-					border-left: 1px solid var(--l1-border) !important;
-				}
-			}
-
-			.tab::before {
-				background: var(--l3-background) !important;
-			}
-
-			.selected-view {
-				color: var(--primary-background) !important;
-				border: 1px solid var(--l1-border) !important;
-			}
-
-			.selected-view::before {
-				background: var(--l3-background) !important;
-			}
-		}
-
-		.compass-button {
-			border: 1px solid var(--l1-border) !important;
-			background: var(--l1-background) !important;
-		}
-	}
-
-	.having-filter-container {
-		.having-filter-select-container {
-			.having-filter-select-editor {
-				.cm-editor {
-					&:focus-within {
-						border-color: var(--l1-border) !important;
-					}
-
-					.cm-content {
-						border: 1px solid var(--l1-border) !important;
-						background: var(--l1-background) !important;
-
-						&:focus-within {
-							border-color: var(--l1-border) !important;
-						}
-					}
-
-					.cm-tooltip-autocomplete {
-						background: var(--l1-background) !important;
-						border: 1px solid var(--l1-border) !important;
-						color: var(--l1-foreground) !important;
-						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
-
-						ul {
-							li {
-								color: var(--l1-foreground) !important;
-								&:hover {
-									background: var(--l3-background) !important;
-								}
-
-								&[aria-selected='true'] {
-									background: var(--l3-background) !important;
-									font-weight: 600 !important;
-								}
-							}
-						}
-					}
-
-					.cm-line {
-						background-color: var(--l1-background) !important;
-
-						::-moz-selection {
-							background: var(--l1-background) !important;
-						}
-
-						::selection {
-							background: var(--l3-background) !important;
-						}
-
-						.chip-decorator {
-							background: var(--l3-background) !important;
-							color: var(--l1-foreground) !important;
-						}
-					}
-
-					.cm-selectionBackground {
-						background: var(--l1-background) !important;
-					}
-				}
-			}
-
-			.close-btn {
-				border: 1px solid var(--l1-border) !important;
-				background: var(--l1-background) !important;
-			}
-		}
-	}
-}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -1,3 +1,5 @@
+// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
+
 .query-aggregation-container {
 	display: block;
 
@@ -140,7 +142,7 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(--l1-background) !important;
+						background-color: var(--l2-background) !important;
 
 						::-moz-selection {
 							background: var(--l3-background) !important;
@@ -196,6 +198,7 @@
 					min-width: auto;
 				}
 			}
+
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
 				border: 1px solid var(--l1-border);
@@ -270,7 +273,7 @@
 
 						.cm-line {
 							::-moz-selection {
-								background: var(--l1-background) !important;
+								background: var(--l2-background) !important;
 								opacity: 0.5 !important;
 							}
 

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -1,3 +1,5 @@
+// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
+
 .code-mirror-where-clause {
 	width: 100%;
 	display: flex;
@@ -156,7 +158,7 @@
 		.cm-line {
 			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(--l1-background) !important;
+			background-color: var(--l2-background) !important;
 
 			::-moz-selection {
 				background: var(--l3-background) !important;
@@ -454,30 +456,3 @@
 		margin-top: -6px !important;
 	}
 }
-
-.lightMode {
-	.code-mirror-where-clause {
-		.cm-editor {
-			.cm-tooltip-autocomplete {
-				background: var(--l1-background) !important;
-				border: 1px solid var(--l1-border);
-				backdrop-filter: blur(20px);
-				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
-			}
-
-			.cm-line {
-				::-moz-selection {
-					background: var(--bg-robin-200) !important;
-				}
-
-				::selection {
-					background: var(--bg-robin-200) !important;
-				}
-			}
-
-			.cm-selectionBackground {
-				background: var(--bg-robin-200) !important;
-			}
-		}
-	}
-}

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -158,12 +158,12 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
 		transparent 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
 		transparent 100%
 	);
 }

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -11,7 +11,7 @@ import {
 	ComboboxItem,
 	ComboboxList,
 	ComboboxTrigger,
-} from '@signozhq/combobox';
+} from '@signozhq/ui';
 import { Skeleton, Switch, Tooltip, Typography } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
@@ -200,7 +200,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 												setOpen(false);
 											}}
 											isSelected={validQueryIndex === option.value}
-											showCheck={false}
 										>
 											{option.label}
 										</ComboboxItem>

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx

@@ -1,7 +1,5 @@
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
 import { Check, Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui';
+import { Badge, Button, Callout } from '@signozhq/ui';
 import type { ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO } from 'api/generated/services/sigNoz.schemas';
 
 export interface KeyCreatedPhaseProps {
@@ -43,7 +41,7 @@ function KeyCreatedPhase({
 			<Callout
 				type="info"
 				showIcon
-				message="Store the key securely. This is the only time it will be displayed."
+				title="Store the key securely. This is the only time it will be displayed."
 			/>
 		</div>
 	);

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -1,8 +1,6 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
-import { Button } from '@signozhq/button';
-import { Input } from '@signozhq/input';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Button, Input, ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
 import { DatePicker } from 'antd';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -56,7 +54,7 @@ function KeyFormPhase({
 							<ToggleGroup
 								type="single"
 								value={field.value}
-								onValueChange={(val): void => {
+								onChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
@@ -112,6 +110,7 @@ function KeyFormPhase({
 					</Button>
 					<Button
 						type="submit"
+						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form={FORM_ID}
 						variant="solid"
 						color="primary"

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -2,8 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
-import { DialogWrapper } from '@signozhq/dialog';
-import { toast } from '@signozhq/ui';
+import { DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,8 +1,6 @@
 import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/ui';
+import { Button, DialogFooter, DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getGetServiceAccountQueryKey,

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -1,10 +1,13 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
-import { Button } from '@signozhq/button';
 import { LockKeyhole, Trash2, X } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Badge } from '@signozhq/ui';
+import {
+	Badge,
+	Button,
+	Input,
+	ToggleGroup,
+	ToggleGroupItem,
+} from '@signozhq/ui';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -72,7 +75,7 @@ function EditKeyForm({
 							<ToggleGroup
 								type="single"
 								value={field.value}
-								onValueChange={(val): void => {
+								onChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
@@ -147,6 +150,7 @@ function EditKeyForm({
 					</Button>
 					<Button
 						type="submit"
+						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form={FORM_ID}
 						variant="solid"
 						color="primary"

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
-import { DialogWrapper } from '@signozhq/dialog';
-import { toast } from '@signozhq/ui';
+import { DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { Button } from '@signozhq/button';
 import { KeyRound, X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui';
 import { Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
@@ -96,7 +96,7 @@ function buildColumns({
 				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
 					<Button
 						variant="ghost"
-						size="xs"
+						size="sm"
 						color="destructive"
 						disabled={isDisabled}
 						onClick={(e): void => {

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { LockKeyhole } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
-import { Badge } from '@signozhq/ui';
+import { Badge, Input } from '@signozhq/ui';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,8 +1,6 @@
 import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/ui';
+import { Button, DialogFooter, DialogWrapper, toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountKeysQueryKey,

frontend/src/components/ServiceAccountDrawer/SaveErrorItem.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
 import { ChevronDown, ChevronUp, CircleAlert, RotateCw } from '@signozhq/icons';
+import { Button } from '@signozhq/ui';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
 
@@ -42,7 +42,7 @@ function SaveErrorItem({
 					<Button
 						type="button"
 						aria-label="Retry"
-						size="xs"
+						size="sm"
 						onClick={async (e): Promise<void> => {
 							e.stopPropagation();
 							setIsRetrying(true);

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -5,31 +5,21 @@
 		margin-left: var(--margin-2);
 	}
 
-	&__layout {
-		display: flex;
-		flex-direction: column;
-		height: calc(100vh - 48px);
-	}
-
 	&__tabs {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: var(--padding-3) var(--padding-4) var(--padding-2) var(--padding-4);
 		flex-shrink: 0;
 	}
 
 	&__tab-group {
 		[data-slot='toggle-group'] {
-			height: 32px;
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
 			background: var(--l2-background);
 			gap: 0;
 		}
 
 		[data-slot='toggle-group-item'] {
-			height: 32px;
 			border-radius: 0;
 			border-left: 1px solid var(--l1-border);
 			background: transparent;
@@ -40,6 +30,7 @@
 			padding: 0 var(--padding-7);
 			gap: var(--spacing-3);
 			box-shadow: none;
+			border: none;
 
 			&:first-child {
 				border-left: none;
@@ -88,7 +79,7 @@
 	&__body {
 		flex: 1;
 		overflow-y: auto;
-		padding: var(--padding-5) var(--padding-4);
+		padding-top: var(--padding-5);
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-8);
@@ -112,14 +103,11 @@
 	}
 
 	&__footer {
-		height: 56px;
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--secondary);
-		background: var(--card);
+		width: 100%;
 	}
 
 	&__keys-pagination {

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,10 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import { DrawerWrapper } from '@signozhq/drawer';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { toast } from '@signozhq/ui';
+import {
+	Button,
+	DrawerWrapper,
+	toast,
+	ToggleGroup,
+	ToggleGroupItem,
+} from '@signozhq/ui';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -379,7 +382,7 @@ function ServiceAccountDrawer({
 				<ToggleGroup
 					type="single"
 					value={activeTab}
-					onValueChange={(val): void => {
+					onChange={(val): void => {
 						if (val) {
 							setActiveTab(val as ServiceAccountDrawerTab);
 							if (val !== ServiceAccountDrawerTab.Keys) {
@@ -471,69 +474,71 @@ function ServiceAccountDrawer({
 					</>
 				)}
 			</div>
+		</div>
+	);
 
-			<div className="sa-drawer__footer">
-				{activeTab === ServiceAccountDrawerTab.Keys ? (
-					<Pagination
-						current={keysPage}
-						pageSize={PAGE_SIZE}
-						total={keys.length}
-						showTotal={(total: number, range: number[]): JSX.Element => (
-							<>
-								<span className="sa-drawer__pagination-range">
-									{range[0]} &#8212; {range[1]}
-								</span>
-								<span className="sa-drawer__pagination-total"> of {total}</span>
-							</>
-						)}
-						showSizeChanger={false}
-						hideOnSinglePage
-						onChange={(page): void => {
-							void setKeysPage(page);
-						}}
-						className="sa-drawer__keys-pagination"
-					/>
-				) : (
-					<>
-						{!isDeleted && (
+	const footer = (
+		<div className="sa-drawer__footer">
+			{activeTab === ServiceAccountDrawerTab.Keys ? (
+				<Pagination
+					current={keysPage}
+					pageSize={PAGE_SIZE}
+					total={keys.length}
+					showTotal={(total: number, range: number[]): JSX.Element => (
+						<>
+							<span className="sa-drawer__pagination-range">
+								{range[0]} &#8212; {range[1]}
+							</span>
+							<span className="sa-drawer__pagination-total"> of {total}</span>
+						</>
+					)}
+					showSizeChanger={false}
+					hideOnSinglePage
+					onChange={(page): void => {
+						void setKeysPage(page);
+					}}
+					className="sa-drawer__keys-pagination"
+				/>
+			) : (
+				<>
+					{!isDeleted && (
+						<Button
+							variant="ghost"
+							color="destructive"
+							className="sa-drawer__footer-btn"
+							onClick={(): void => {
+								setIsDeleteOpen(true);
+							}}
+						>
+							<Trash2 size={12} />
+							Delete Service Account
+						</Button>
+					)}
+					{!isDeleted && (
+						<div className="sa-drawer__footer-right">
 							<Button
-								variant="ghost"
-								color="destructive"
-								className="sa-drawer__footer-btn"
-								onClick={(): void => {
-									setIsDeleteOpen(true);
-								}}
+								variant="solid"
+								color="secondary"
+								size="sm"
+								onClick={handleClose}
 							>
-								<Trash2 size={12} />
-								Delete Service Account
+								<X size={14} />
+								Cancel
 							</Button>
-						)}
-						{!isDeleted && (
-							<div className="sa-drawer__footer-right">
-								<Button
-									variant="solid"
-									color="secondary"
-									size="sm"
-									onClick={handleClose}
-								>
-									<X size={14} />
-									Cancel
-								</Button>
-								<Button
-									variant="solid"
-									color="primary"
-									size="sm"
-									loading={isSaving}
-									disabled={!isDirty}
-									onClick={handleSave}
-								>
-									Save Changes
-								</Button>
-							</div>
-						)}
-					</>
-				)}
-			</div>
+							<Button
+								variant="solid"
+								color="primary"
+								size="sm"
+								loading={isSaving}
+								disabled={!isDirty}
+								onClick={handleSave}
+							>
+								Save Changes
+							</Button>
+						</div>
+					)}
+				</>
+			)}
 		</div>
 	);
 
@@ -547,14 +552,15 @@ function ServiceAccountDrawer({
 					}
 				}}
 				direction="right"
-				type="panel"
 				showCloseButton
 				showOverlay={false}
-				allowOutsideClick
-				header={{ title: 'Service Account Details' }}
-				content={drawerContent}
+				title="Service Account Details"
 				className="sa-drawer"
-			/>
+				width="wide"
+				footer={footer}
+			>
+				{drawerContent}
+			</DrawerWrapper>
 
 			<DeleteAccountModal />
 

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -1,7 +1,13 @@
 import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import {
+	render,
+	screen,
+	userEvent,
+	waitFor,
+	waitForElementToBeRemoved,
+} from 'tests/test-utils';
 
 import AddKeyModal from '../AddKeyModal';
 
@@ -128,11 +134,9 @@ describe('AddKeyModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		await screen.findByRole('dialog', { name: /Add a New Key/i });
+		const dialog = await screen.findByRole('dialog', { name: /Add a New Key/i });
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		expect(
-			screen.queryByRole('dialog', { name: /Add a New Key/i }),
-		).not.toBeInTheDocument();
+		await waitForElementToBeRemoved(dialog);
 	});
 });

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -29,9 +29,14 @@ function renderModal(
 		account: 'sa-1',
 		'edit-key': 'key-1',
 	},
+	onUrlUpdate?: jest.Mock,
 ): ReturnType<typeof render> {
 	return render(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
+		<NuqsTestingAdapter
+			searchParams={searchParams}
+			hasMemory
+			onUrlUpdate={onUrlUpdate}
+		>
 			<EditKeyModal keyItem={keyItem} />
 		</NuqsTestingAdapter>,
 	);
@@ -97,14 +102,31 @@ describe('EditKeyModal (URL-controlled)', () => {
 
 	it('cancel clears edit-key param and closes modal', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		renderModal();
+		const onUrlUpdate = jest.fn();
+		renderModal(mockKey, undefined, onUrlUpdate);
 
 		await screen.findByDisplayValue('Original Key Name');
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		expect(
-			screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-		).not.toBeInTheDocument();
+		await waitFor(() => {
+			expect(onUrlUpdate).toHaveBeenCalled();
+		});
+
+		const latestUrlUpdate =
+			onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1]?.[0];
+		expect(latestUrlUpdate).toEqual(
+			expect.objectContaining({
+				queryString: expect.any(String),
+			}),
+		);
+		expect(latestUrlUpdate.queryString).toContain('account=sa-1');
+		expect(latestUrlUpdate.queryString).not.toContain('edit-key=');
+
+		await waitFor(() => {
+			expect(
+				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
+			).not.toBeInTheDocument();
+		});
 	});
 
 	it('revoke flow: clicking Revoke Key shows confirmation inside same dialog', async () => {

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

@@ -6,18 +6,15 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
-jest.mock('@signozhq/drawer', () => ({
-	DrawerWrapper: ({
-		content,
-		open,
-	}: {
-		content?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null => (open ? <div>{content}</div> : null),
-}));
-
 jest.mock('@signozhq/ui', () => ({
 	...jest.requireActual('@signozhq/ui'),
+	DrawerWrapper: ({
+		children,
+		open,
+	}: {
+		children?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null => (open ? <div>{children}</div> : null),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -21,7 +21,7 @@
 	.ant-table-thead {
 		> tr > th,
 		> tr > td {
-			background: var(--background);
+			background: var(--l1-background);
 			font-size: var(--paragraph-small-600-font-size);
 			font-weight: var(--paragraph-small-600-font-weight);
 			line-height: var(--paragraph-small-600-line-height);

frontend/src/components/ShiftOverlay/shiftOverlay.scss

@@ -11,7 +11,7 @@
 		gap: 20px;
 		padding: 8px 12px;
 
-		background: var(--background);
+		background: var(--l1-background);
 		color: var(--l2-foreground);
 
 		border-radius: 8px;

frontend/src/components/WarningPopover/WarningPopover.styles.scss

@@ -1,11 +1,11 @@
 .warning-content {
 	display: flex;
 	flex-direction: column;
+
 	// === SECTION: Summary (Top)
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
-		border-bottom: 1px solid var(--l1-border);
 	}
 
 	&__summary {

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -161,10 +161,11 @@ describe('CmdKPalette', () => {
 	});
 
 	test('clicking a navigation item calls history.push with correct route', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CmdKPalette userRole="ADMIN" />);
 
 		const homeItem = screen.getByText(HOME_LABEL);
-		await userEvent.click(homeItem);
+		await user.click(homeItem);
 
 		expect(history.push).toHaveBeenCalledWith(ROUTES.HOME);
 	});
@@ -194,10 +195,11 @@ describe('CmdKPalette', () => {
 	});
 
 	test('closing the palette via handleInvoke sets open to false', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CmdKPalette userRole="ADMIN" />);
 
 		const dashItem = screen.getByText('Go to Dashboards');
-		await userEvent.click(dashItem);
+		await user.click(dashItem);
 
 		// last call from handleInvoke should set open to false
 		expect(mockSetOpen).toHaveBeenCalledWith(false);

frontend/src/components/cmdKPalette/cmdKPalette.scss

@@ -7,6 +7,14 @@
 [data-slot='dialog-content'] {
 	position: fixed;
 	z-index: 60;
+	background: var(--l1-background);
+	color: var(--l1-foreground);
+
+	/* Override the background and color of the dialog content from the theme */
+	> div {
+		background: var(--l1-background);
+		color: var(--l1-foreground);
+	}
 }
 
 .cmdk-section-heading [cmdk-group-heading] {
@@ -33,7 +41,7 @@
 
 .cmdk-item-light:hover {
 	cursor: pointer;
-	background-color: var(--background) !important;
+	background-color: var(--l1-background) !important;
 }
 
 .cmdk-item-light[data-selected='true'] {
@@ -43,6 +51,22 @@
 
 .cmdk-item {
 	cursor: pointer;
+	color: var(--l1-foreground);
+
+	font-family: Inter;
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px;
+
+	&:hover {
+		background: var(--l1-background-hover);
+	}
+
+	&[data-selected='true'] {
+		background: var(--l3-background);
+		color: var(--l1-foreground);
+	}
 }
 
 [cmdk-item] svg {

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -7,7 +7,7 @@ import {
 	CommandItem,
 	CommandList,
 	CommandShortcut,
-} from '@signozhq/command';
+} from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import { useThemeMode } from 'hooks/useDarkMode';
 import history from 'lib/history';

frontend/src/constants/routes.ts

@@ -65,6 +65,7 @@ const ROUTES = {
 	WORKSPACE_SUSPENDED: '/workspace-suspended',
 	SHORTCUTS: '/settings/shortcuts',
 	INTEGRATIONS: '/integrations',
+	INTEGRATIONS_DETAIL: '/integrations/:integrationId',
 	MESSAGING_QUEUES_BASE: '/messaging-queues',
 	MESSAGING_QUEUES_KAFKA: '/messaging-queues/kafka',
 	MESSAGING_QUEUES_KAFKA_DETAIL: '/messaging-queues/kafka/detail',

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -50,6 +50,7 @@
 	.app-content {
 		width: calc(100% - 54px); // width of the sidebar
 		z-index: 0;
+		background: var(--l1-background);
 
 		margin: 0 auto;
 
@@ -139,22 +140,6 @@
 	}
 }
 
-.isDarkMode {
-	.app-layout {
-		.app-content {
-			background: var(--background);
-		}
-	}
-}
-
-.isLightMode {
-	.app-layout {
-		.app-content {
-			background: var(--card);
-		}
-	}
-}
-
 .trial-expiry-banner,
 .slow-api-warning-banner,
 .workspace-restricted-banner {

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

@@ -1,24 +0,0 @@
-import {
-	IntegrationType,
-	RequestIntegrationBtn,
-} from 'pages/Integrations/RequestIntegrationBtn';
-
-import Header from './Header/Header';
-import HeroSection from './HeroSection/HeroSection';
-import ServicesTabs from './ServicesSection/ServicesTabs';
-
-function CloudIntegrationPage(): JSX.Element {
-	return (
-		<div>
-			<Header />
-			<HeroSection />
-			<RequestIntegrationBtn
-				type={IntegrationType.AWS_SERVICES}
-				message="Can't find the AWS service you're looking for? Request more integrations"
-			/>
-			<ServicesTabs />
-		</div>
-	);
-}
-
-export default CloudIntegrationPage;

frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx

@@ -1,37 +0,0 @@
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import integrationsHeroBgUrl from '@/assets/Images/integrations-hero-bg.png';
-import awsDarkUrl from '@/assets/Logos/aws-dark.svg';
-
-import AccountActions from './components/AccountActions';
-
-import './HeroSection.style.scss';
-
-function HeroSection(): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	return (
-		<div
-			className="hero-section"
-			style={
-				isDarkMode
-					? {
-							backgroundImage: `url('${integrationsHeroBgUrl}')`,
-					  }
-					: {}
-			}
-		>
-			<div className="hero-section__icon">
-				<img src={awsDarkUrl} alt="aws-logo" />
-			</div>
-			<div className="hero-section__details">
-				<div className="title">Amazon Web Services</div>
-				<div className="description">
-					One-click setup for AWS monitoring with SigNoz
-				</div>
-				<AccountActions />
-			</div>
-		</div>
-	);
-}
-
-export default HeroSection;

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx

@@ -1,213 +0,0 @@
-import { Dispatch, SetStateAction, useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { Form, Select, Switch } from 'antd';
-import SignozModal from 'components/SignozModal/SignozModal';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import {
-	getRegionPreviewText,
-	useAccountSettingsModal,
-} from 'hooks/integration/aws/useAccountSettingsModal';
-import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
-
-import logEvent from '../../../../api/common/logEvent';
-import { CloudAccount } from '../../ServicesSection/types';
-import { RegionSelector } from './RegionSelector';
-import RemoveIntegrationAccount from './RemoveIntegrationAccount';
-
-import './AccountSettingsModal.style.scss';
-
-interface AccountSettingsModalProps {
-	onClose: () => void;
-	account: CloudAccount;
-	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
-}
-
-function AccountSettingsModal({
-	onClose,
-	account,
-	setActiveAccount,
-}: AccountSettingsModalProps): JSX.Element {
-	const {
-		form,
-		isLoading,
-		selectedRegions,
-		includeAllRegions,
-		isRegionSelectOpen,
-		isSaveDisabled,
-		setSelectedRegions,
-		setIncludeAllRegions,
-		setIsRegionSelectOpen,
-		handleIncludeAllRegionsChange,
-		handleSubmit,
-		handleClose,
-	} = useAccountSettingsModal({ onClose, account, setActiveAccount });
-
-	const queryClient = useQueryClient();
-	const urlQuery = useUrlQuery();
-
-	const handleRemoveIntegrationAccountSuccess = (): void => {
-		queryClient.invalidateQueries([REACT_QUERY_KEY.AWS_ACCOUNTS]);
-		urlQuery.delete('cloudAccountId');
-		handleClose();
-		history.replace({ search: urlQuery.toString() });
-
-		logEvent('AWS Integration: Account removed', {
-			id: account?.id,
-			cloudAccountId: account?.cloud_account_id,
-		});
-	};
-
-	const handleRegionDeselect = useCallback(
-		(item: string): void => {
-			if (selectedRegions.includes(item)) {
-				setSelectedRegions(selectedRegions.filter((region) => region !== item));
-				if (includeAllRegions) {
-					setIncludeAllRegions(false);
-				}
-			}
-		},
-		[
-			selectedRegions,
-			includeAllRegions,
-			setSelectedRegions,
-			setIncludeAllRegions,
-		],
-	);
-
-	const renderRegionSelector = useCallback(() => {
-		if (isRegionSelectOpen) {
-			return (
-				<RegionSelector
-					selectedRegions={selectedRegions}
-					setSelectedRegions={setSelectedRegions}
-					setIncludeAllRegions={setIncludeAllRegions}
-				/>
-			);
-		}
-
-		return (
-			<>
-				<div className="account-settings-modal__body-regions-switch-switch ">
-					<Switch
-						checked={includeAllRegions}
-						onChange={handleIncludeAllRegionsChange}
-					/>
-					<button
-						className="account-settings-modal__body-regions-switch-switch-label"
-						type="button"
-						onClick={(): void => handleIncludeAllRegionsChange(!includeAllRegions)}
-					>
-						Include all regions
-					</button>
-				</div>
-				<Select
-					suffixIcon={null}
-					placeholder="Select Region(s)"
-					className="cloud-account-setup-form__select account-settings-modal__body-regions-select integrations-select"
-					onClick={(): void => setIsRegionSelectOpen(true)}
-					mode="multiple"
-					maxTagCount={3}
-					value={getRegionPreviewText(selectedRegions)}
-					open={false}
-					onDeselect={handleRegionDeselect}
-				/>
-			</>
-		);
-	}, [
-		isRegionSelectOpen,
-		includeAllRegions,
-		handleIncludeAllRegionsChange,
-		selectedRegions,
-		handleRegionDeselect,
-		setSelectedRegions,
-		setIncludeAllRegions,
-		setIsRegionSelectOpen,
-	]);
-
-	const renderAccountDetails = useCallback(
-		() => (
-			<div className="account-settings-modal__body-account-info">
-				<div className="account-settings-modal__body-account-info-connected-account-details">
-					<div className="account-settings-modal__body-account-info-connected-account-details-title">
-						Connected Account details
-					</div>
-					<div className="account-settings-modal__body-account-info-connected-account-details-account-id">
-						AWS Account:{' '}
-						<span className="account-settings-modal__body-account-info-connected-account-details-account-id-account-id">
-							{account?.id}
-						</span>
-					</div>
-				</div>
-			</div>
-		),
-		[account?.id],
-	);
-
-	const modalTitle = (
-		<div className="account-settings-modal__title">
-			Account settings for{' '}
-			<span className="account-settings-modal__title-account-id">
-				{account?.id}
-			</span>
-		</div>
-	);
-
-	return (
-		<SignozModal
-			open
-			title={modalTitle}
-			onCancel={handleClose}
-			onOk={handleSubmit}
-			okText="Save"
-			okButtonProps={{
-				disabled: isSaveDisabled,
-				className: 'account-settings-modal__footer-save-button',
-				loading: isLoading,
-			}}
-			cancelButtonProps={{
-				className: 'account-settings-modal__footer-close-button',
-			}}
-			width={672}
-			rootClassName="account-settings-modal"
-		>
-			<Form
-				form={form}
-				layout="vertical"
-				initialValues={{
-					selectedRegions,
-					includeAllRegions,
-				}}
-			>
-				<div className="account-settings-modal__body">
-					{renderAccountDetails()}
-
-					<Form.Item
-						name="selectedRegions"
-						rules={[
-							{
-								validator: async (): Promise<void> => {
-									if (selectedRegions.length === 0) {
-										throw new Error('Please select at least one region to monitor');
-									}
-								},
-								message: 'Please select at least one region to monitor',
-							},
-						]}
-					>
-						{renderRegionSelector()}
-					</Form.Item>
-
-					<div className="integration-detail-content">
-						<RemoveIntegrationAccount
-							accountId={account?.id}
-							onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
-						/>
-					</div>
-				</div>
-			</Form>
-		</SignozModal>
-	);
-}
-
-export default AccountSettingsModal;

frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionForm.tsx

@@ -1,109 +0,0 @@
-import { useRef } from 'react';
-import { Form } from 'antd';
-import cx from 'classnames';
-import { useAccountStatus } from 'hooks/integration/aws/useAccountStatus';
-import { AccountStatusResponse } from 'types/api/integrations/aws';
-import { regions } from 'utils/regions';
-
-import logEvent from '../../../../api/common/logEvent';
-import { ModalStateEnum, RegionFormProps } from '../types';
-import AlertMessage from './AlertMessage';
-import {
-	ComplianceNote,
-	MonitoringRegionsSection,
-	RegionDeploymentSection,
-} from './IntegrateNowFormSections';
-import RenderConnectionFields from './RenderConnectionParams';
-
-const allRegions = (): string[] =>
-	regions.flatMap((r) => r.subRegions.map((sr) => sr.name));
-
-const getRegionPreviewText = (regions: string[]): string[] => {
-	if (regions.includes('all')) {
-		return allRegions();
-	}
-	return regions;
-};
-
-export function RegionForm({
-	form,
-	modalState,
-	setModalState,
-	selectedRegions,
-	includeAllRegions,
-	onIncludeAllRegionsChange,
-	onRegionSelect,
-	onSubmit,
-	accountId,
-	selectedDeploymentRegion,
-	handleRegionChange,
-	connectionParams,
-	isConnectionParamsLoading,
-}: RegionFormProps): JSX.Element {
-	const startTimeRef = useRef(Date.now());
-	const refetchInterval = 10 * 1000;
-	const errorTimeout = 10 * 60 * 1000;
-
-	const { isLoading: isAccountStatusLoading } = useAccountStatus(accountId, {
-		refetchInterval,
-		enabled: !!accountId && modalState === ModalStateEnum.WAITING,
-		onSuccess: (data: AccountStatusResponse) => {
-			if (data.data.status.integration.last_heartbeat_ts_ms !== null) {
-				setModalState(ModalStateEnum.SUCCESS);
-				logEvent('AWS Integration: Account connected', {
-					cloudAccountId: data?.data?.cloud_account_id,
-					status: data?.data?.status,
-				});
-			} else if (Date.now() - startTimeRef.current >= errorTimeout) {
-				setModalState(ModalStateEnum.ERROR);
-				logEvent('AWS Integration: Account connection attempt timed out', {
-					id: accountId,
-				});
-			}
-		},
-		onError: () => {
-			setModalState(ModalStateEnum.ERROR);
-		},
-	});
-
-	const isFormDisabled =
-		modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
-
-	return (
-		<Form
-			form={form}
-			className="cloud-account-setup-form"
-			layout="vertical"
-			onFinish={onSubmit}
-		>
-			<AlertMessage modalState={modalState} />
-
-			<div
-				className={cx(`cloud-account-setup-form__content`, {
-					disabled: isFormDisabled,
-				})}
-			>
-				<RegionDeploymentSection
-					regions={regions}
-					handleRegionChange={handleRegionChange}
-					isFormDisabled={isFormDisabled}
-					selectedDeploymentRegion={selectedDeploymentRegion}
-				/>
-				<MonitoringRegionsSection
-					includeAllRegions={includeAllRegions}
-					selectedRegions={selectedRegions}
-					onIncludeAllRegionsChange={onIncludeAllRegionsChange}
-					getRegionPreviewText={getRegionPreviewText}
-					onRegionSelect={onRegionSelect}
-					isFormDisabled={isFormDisabled}
-				/>
-				<ComplianceNote />
-				<RenderConnectionFields
-					isConnectionParamsLoading={isConnectionParamsLoading}
-					connectionParams={connectionParams}
-					isFormDisabled={isFormDisabled}
-				/>
-			</div>
-		</Form>
-	);
-}

frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.scss

@@ -1,47 +0,0 @@
-.remove-integration-account {
-	display: flex;
-	justify-content: space-between;
-	padding: 16px;
-	border-radius: 4px;
-	border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
-	background: color-mix(in srgb, var(--bg-sakura-500) 6%, transparent);
-	&__header {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-	}
-
-	&__title {
-		color: var(--bg-cherry-500);
-		font-size: 14px;
-		letter-spacing: -0.07px;
-	}
-
-	&__subtitle {
-		color: var(--bg-cherry-300);
-		font-size: 14px;
-		line-height: 22px;
-		letter-spacing: -0.07px;
-	}
-
-	&__button {
-		display: flex;
-		align-items: center;
-		background: var(--bg-cherry-500);
-		border: none;
-		color: var(--l1-foreground);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 13.3px; /* 110.833% */
-		padding: 9px 13px;
-		.ant-btn-icon {
-			margin-inline-end: 4px !important;
-		}
-
-		&:hover {
-			&.ant-btn-default {
-				color: var(--l2-foreground) !important;
-			}
-		}
-	}
-}

frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.tsx

@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { useMutation } from 'react-query';
-import { Button, Modal } from 'antd';
-import logEvent from 'api/common/logEvent';
-import removeAwsIntegrationAccount from 'api/Integrations/removeAwsIntegrationAccount';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { useNotifications } from 'hooks/useNotifications';
-import { X } from 'lucide-react';
-import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils';
-
-import './RemoveIntegrationAccount.scss';
-
-function RemoveIntegrationAccount({
-	accountId,
-	onRemoveIntegrationAccountSuccess,
-}: {
-	accountId: string;
-	onRemoveIntegrationAccountSuccess: () => void;
-}): JSX.Element {
-	const { notifications } = useNotifications();
-	const [isModalOpen, setIsModalOpen] = useState(false);
-
-	const showModal = (): void => {
-		setIsModalOpen(true);
-	};
-
-	const {
-		mutate: removeIntegration,
-		isLoading: isRemoveIntegrationLoading,
-	} = useMutation(removeAwsIntegrationAccount, {
-		onSuccess: () => {
-			onRemoveIntegrationAccountSuccess?.();
-			setIsModalOpen(false);
-		},
-		onError: () => {
-			notifications.error({
-				message: SOMETHING_WENT_WRONG,
-			});
-		},
-	});
-	const handleOk = (): void => {
-		logEvent(INTEGRATION_TELEMETRY_EVENTS.AWS_INTEGRATION_ACCOUNT_REMOVED, {
-			accountId,
-		});
-		removeIntegration(accountId);
-	};
-
-	const handleCancel = (): void => {
-		setIsModalOpen(false);
-	};
-
-	return (
-		<div className="remove-integration-account">
-			<div className="remove-integration-account__header">
-				<div className="remove-integration-account__title">Remove Integration</div>
-				<div className="remove-integration-account__subtitle">
-					Removing this integration won&apos;t delete any existing data but will stop
-					collecting new data from AWS.
-				</div>
-			</div>
-			<Button
-				className="remove-integration-account__button"
-				icon={<X size={14} />}
-				onClick={(): void => showModal()}
-			>
-				Remove
-			</Button>
-			<Modal
-				className="remove-integration-modal"
-				open={isModalOpen}
-				title="Remove integration"
-				onOk={handleOk}
-				onCancel={handleCancel}
-				okText="Remove Integration"
-				okButtonProps={{
-					danger: true,
-					disabled: isRemoveIntegrationLoading,
-				}}
-			>
-				<div className="remove-integration-modal__text">
-					Removing this account will remove all components created for sending
-					telemetry to SigNoz in your AWS account within the next ~15 minutes
-					(cloudformation stacks named signoz-integration-telemetry-collection in
-					enabled regions). <br />
-					<br />
-					After that, you can delete the cloudformation stack that was created
-					manually when connecting this account.
-				</div>
-			</Modal>
-		</div>
-	);
-}
-
-export default RemoveIntegrationAccount;

frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.style.scss

@@ -1,162 +0,0 @@
-.cloud-account-setup-success-view {
-	display: flex;
-	flex-direction: column;
-	gap: 40px;
-	text-align: center;
-	padding-top: 34px;
-	p,
-	h3,
-	h4 {
-		margin: 0;
-	}
-	&__content {
-		display: flex;
-		flex-direction: column;
-		gap: 14px;
-		.cloud-account-setup-success-view {
-			&__title {
-				h3 {
-					color: var(--l1-foreground);
-					font-size: 20px;
-					font-weight: 500;
-					line-height: 32px;
-				}
-			}
-			&__description {
-				color: var(--l2-foreground);
-				font-size: 14px;
-				font-weight: 400;
-				line-height: 20px;
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-	&__what-next {
-		display: flex;
-		flex-direction: column;
-		gap: 18px;
-		text-align: left;
-		&-title {
-			color: var(--muted-foreground);
-			font-size: 11px;
-			font-weight: 500;
-			line-height: 18px;
-			letter-spacing: 0.88px;
-			text-transform: uppercase;
-		}
-		.what-next-items-wrapper {
-			display: flex;
-			flex-direction: column;
-			gap: 12px;
-			&__item {
-				display: flex;
-				gap: 10px;
-				align-items: baseline;
-
-				&.ant-alert {
-					padding: 14px;
-					border-radius: 8px;
-					font-size: 14px;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.21px;
-				}
-
-				&.ant-alert-info {
-					border: 1px solid color-mix(in srgb, var(--bg-robin-600) 50%, transparent);
-					background: color-mix(in srgb, var(--primary-background) 20%, transparent);
-					color: var(--primary-foreground);
-				}
-
-				.what-next-item {
-					color: var(--bg-robin-400);
-					&-bullet-icon {
-						font-size: 20px;
-						line-height: 20px;
-					}
-					&-text {
-						font-size: 14px;
-						font-weight: 500;
-						line-height: 20px;
-						letter-spacing: -0.21px;
-					}
-				}
-			}
-		}
-	}
-	&__footer {
-		padding-top: 18px;
-		.ant-btn {
-			background: var(--primary-background);
-			color: var(--primary-foreground);
-			font-size: 14px;
-			font-weight: 500;
-			line-height: 20px;
-			height: 36px;
-		}
-	}
-}
-.lottie-container {
-	position: absolute;
-	width: 743.5px;
-	height: 990.342px;
-	top: -100px;
-	left: -36px;
-	z-index: 1;
-}
-
-.lightMode {
-	.cloud-account-setup-success-view {
-		&__content {
-			.cloud-account-setup-success-view {
-				&__title {
-					h3 {
-						color: var(--l1-foreground);
-					}
-				}
-
-				&__description {
-					color: var(--l1-foreground);
-				}
-			}
-		}
-
-		&__what-next {
-			&-title {
-				color: var(--l1-foreground);
-			}
-
-			.what-next-items-wrapper {
-				&__item {
-					&.ant-alert-info {
-						border: 1px solid color-mix(in srgb, var(--bg-robin-600) 20%, transparent);
-						background: color-mix(
-							in srgb,
-							var(--primary-background) 10%,
-							transparent
-						);
-						color: var(--primary-foreground);
-					}
-
-					.what-next-item {
-						color: var(--primary-foreground);
-
-						&-text {
-							color: var(--primary-foreground);
-						}
-					}
-				}
-			}
-		}
-
-		&__footer {
-			.ant-btn {
-				background: var(--primary-background);
-				color: var(--primary-foreground);
-
-				&:hover {
-					background: var(--primary-background-hover);
-				}
-			}
-		}
-	}
-}

frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.tsx

@@ -1,75 +0,0 @@
-import { useState } from 'react';
-import Lottie from 'react-lottie';
-import { Alert } from 'antd';
-import integrationsSuccess from 'assets/Lotties/integrations-success.json';
-
-import solidCheckCircleUrl from '@/assets/Icons/solid-check-circle.svg';
-
-import './SuccessView.style.scss';
-
-export function SuccessView(): JSX.Element {
-	const [isAnimationComplete, setIsAnimationComplete] = useState(false);
-
-	const defaultOptions = {
-		loop: false,
-		autoplay: true,
-		animationData: integrationsSuccess,
-		rendererSettings: {
-			preserveAspectRatio: 'xMidYMid slice',
-		},
-	};
-
-	return (
-		<>
-			{!isAnimationComplete && (
-				<div className="lottie-container">
-					<Lottie
-						options={defaultOptions}
-						height={990.342}
-						width={743.5}
-						eventListeners={[
-							{
-								eventName: 'complete',
-								callback: (): void => setIsAnimationComplete(true),
-							},
-						]}
-					/>
-				</div>
-			)}
-			<div className="cloud-account-setup-success-view">
-				<div className="cloud-account-setup-success-view__icon">
-					<img src={solidCheckCircleUrl} alt="Success" />
-				</div>
-				<div className="cloud-account-setup-success-view__content">
-					<div className="cloud-account-setup-success-view__title">
-						<h3>🎉 Success! </h3>
-						<h3>Your AWS Web Service integration is all set.</h3>
-					</div>
-					<div className="cloud-account-setup-success-view__description">
-						<p>Your observability journey is off to a great start. </p>
-						<p>Now that your data is flowing, here’s what you can do next:</p>
-					</div>
-				</div>
-				<div className="cloud-account-setup-success-view__what-next">
-					<h4 className="cloud-account-setup-success-view__what-next-title">
-						WHAT NEXT
-					</h4>
-					<div className="what-next-items-wrapper">
-						<Alert
-							message={
-								<div className="what-next-items-wrapper__item">
-									<div className="what-next-item-bullet-icon">•</div>
-									<div className="what-next-item-text">
-										Set up your AWS services effortlessly under your enabled account.
-									</div>
-								</div>
-							}
-							type="info"
-							className="what-next-items-wrapper__item"
-						/>
-					</div>
-				</div>
-			</div>
-		</>
-	);
-}

frontend/src/container/CloudIntegrationPage/ServicesSection/CloudServiceDashboards.tsx

@@ -1,50 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import { ServiceData } from './types';
-
-function DashboardItem({
-	dashboard,
-}: {
-	dashboard: ServiceData['assets']['dashboards'][number];
-}): JSX.Element {
-	const content = (
-		<>
-			<div className="cloud-service-dashboard-item__title">{dashboard.title}</div>
-			<div className="cloud-service-dashboard-item__preview">
-				<img
-					src={dashboard.image}
-					alt={dashboard.title}
-					className="cloud-service-dashboard-item__preview-image"
-				/>
-			</div>
-		</>
-	);
-
-	return (
-		<div className="cloud-service-dashboard-item">
-			{dashboard.url ? (
-				<Link to={dashboard.url} className="cloud-service-dashboard-item__link">
-					{content}
-				</Link>
-			) : (
-				content
-			)}
-		</div>
-	);
-}
-
-function CloudServiceDashboards({
-	service,
-}: {
-	service: ServiceData;
-}): JSX.Element {
-	return (
-		<>
-			{service.assets.dashboards.map((dashboard) => (
-				<DashboardItem key={dashboard.id} dashboard={dashboard} />
-			))}
-		</>
-	);
-}
-
-export default CloudServiceDashboards;

frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.styles.scss

@@ -1,89 +0,0 @@
-.configure-service-modal {
-	&__body {
-		display: flex;
-		flex-direction: column;
-		border-radius: 3px;
-		border: 1px solid var(--l1-border);
-		padding: 14px;
-
-		&-regions-switch-switch {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-
-			&-label {
-				color: var(--l1-foreground);
-				font-size: 14px;
-				font-weight: 500;
-				line-height: 20px;
-				letter-spacing: -0.07px;
-			}
-		}
-
-		&-switch-description {
-			margin-top: 4px;
-			color: var(--l2-foreground);
-			font-size: 12px;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.06px;
-		}
-		&-form-item {
-			&:last-child {
-				margin-bottom: 0px;
-			}
-		}
-	}
-	.ant-modal-body {
-		padding-bottom: 0;
-	}
-	.ant-modal-footer {
-		margin: 0;
-		padding-bottom: 12px;
-	}
-}
-
-.lightMode {
-	.configure-service-modal {
-		&__body {
-			border-color: var(--l1-border);
-
-			&-regions-switch-switch {
-				&-label {
-					color: var(--l1-foreground);
-				}
-			}
-
-			&-switch-description {
-				color: var(--l1-foreground);
-			}
-		}
-
-		.ant-btn {
-			&.ant-btn-default {
-				background: var(--l1-background);
-				border: 1px solid var(--l1-border);
-				color: var(--l1-foreground);
-
-				&:hover {
-					border-color: var(--l1-border);
-					color: var(--l1-foreground);
-				}
-			}
-
-			&.ant-btn-primary {
-				// Keep primary button same as dark mode
-				background: var(--primary-background);
-				color: var(--l1-background);
-
-				&:hover {
-					background: var(--bg-robin-400);
-				}
-
-				&:disabled {
-					opacity: 0.6;
-				}
-			}
-		}
-	}
-}

frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx

@@ -1,243 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useQueryClient } from 'react-query';
-import { Form, Switch } from 'antd';
-import SignozModal from 'components/SignozModal/SignozModal';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import {
-	ServiceConfig,
-	SupportedSignals,
-} from 'container/CloudIntegrationPage/ServicesSection/types';
-import { useUpdateServiceConfig } from 'hooks/integration/aws/useUpdateServiceConfig';
-import { isEqual } from 'lodash-es';
-
-import logEvent from '../../../api/common/logEvent';
-import S3BucketsSelector from './S3BucketsSelector';
-
-import './ConfigureServiceModal.styles.scss';
-
-export interface IConfigureServiceModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-	serviceName: string;
-	serviceId: string;
-	cloudAccountId: string;
-	supportedSignals: SupportedSignals;
-	initialConfig?: ServiceConfig;
-}
-
-function ConfigureServiceModal({
-	isOpen,
-	onClose,
-	serviceName,
-	serviceId,
-	cloudAccountId,
-	initialConfig,
-	supportedSignals,
-}: IConfigureServiceModalProps): JSX.Element {
-	const [form] = Form.useForm();
-	const [isLoading, setIsLoading] = useState(false);
-
-	// Track current form values
-	const initialValues = useMemo(
-		() => ({
-			metrics: initialConfig?.metrics?.enabled || false,
-			logs: initialConfig?.logs?.enabled || false,
-			s3Buckets: initialConfig?.logs?.s3_buckets || {},
-		}),
-		[initialConfig],
-	);
-	const [currentValues, setCurrentValues] = useState(initialValues);
-
-	const isSaveDisabled = useMemo(
-		() =>
-			// disable only if current values are same as the initial config
-			currentValues.metrics === initialValues.metrics &&
-			currentValues.logs === initialValues.logs &&
-			isEqual(currentValues.s3Buckets, initialValues.s3Buckets),
-		[currentValues, initialValues],
-	);
-
-	const handleS3BucketsChange = useCallback(
-		(bucketsByRegion: Record<string, string[]>) => {
-			setCurrentValues((prev) => ({
-				...prev,
-				s3Buckets: bucketsByRegion,
-			}));
-			form.setFieldsValue({ s3Buckets: bucketsByRegion });
-		},
-		[form],
-	);
-
-	const {
-		mutate: updateServiceConfig,
-		isLoading: isUpdating,
-	} = useUpdateServiceConfig();
-
-	const queryClient = useQueryClient();
-
-	const handleSubmit = useCallback(async (): Promise<void> => {
-		try {
-			const values = await form.validateFields();
-			setIsLoading(true);
-
-			updateServiceConfig(
-				{
-					serviceId,
-					payload: {
-						cloud_account_id: cloudAccountId,
-						config: {
-							logs: {
-								enabled: values.logs,
-								s3_buckets: values.s3Buckets,
-							},
-							metrics: {
-								enabled: values.metrics,
-							},
-						},
-					},
-				},
-				{
-					onSuccess: () => {
-						queryClient.invalidateQueries([
-							REACT_QUERY_KEY.AWS_SERVICE_DETAILS,
-							serviceId,
-						]);
-						onClose();
-
-						logEvent('AWS Integration: Service settings saved', {
-							cloudAccountId,
-							serviceId,
-							logsEnabled: values?.logs,
-							metricsEnabled: values?.metrics,
-						});
-					},
-					onError: (error) => {
-						console.error('Failed to update service config:', error);
-					},
-				},
-			);
-		} catch (error) {
-			console.error('Form submission failed:', error);
-		} finally {
-			setIsLoading(false);
-		}
-	}, [
-		form,
-		updateServiceConfig,
-		serviceId,
-		cloudAccountId,
-		queryClient,
-		onClose,
-	]);
-
-	const handleClose = useCallback(() => {
-		form.resetFields();
-		onClose();
-	}, [form, onClose]);
-
-	return (
-		<SignozModal
-			title={
-				<div className="account-settings-modal__title">Configure {serviceName}</div>
-			}
-			centered
-			open={isOpen}
-			okText="Save"
-			okButtonProps={{
-				disabled: isSaveDisabled,
-				className: 'account-settings-modal__footer-save-button',
-				loading: isLoading || isUpdating,
-			}}
-			onCancel={handleClose}
-			onOk={handleSubmit}
-			cancelText="Close"
-			cancelButtonProps={{
-				className: 'account-settings-modal__footer-close-button',
-			}}
-			width={672}
-			rootClassName=" configure-service-modal"
-		>
-			<Form
-				form={form}
-				layout="vertical"
-				initialValues={{
-					metrics: initialConfig?.metrics?.enabled || false,
-					logs: initialConfig?.logs?.enabled || false,
-					s3Buckets: initialConfig?.logs?.s3_buckets || {},
-				}}
-			>
-				<div className=" configure-service-modal__body">
-					{supportedSignals.metrics && (
-						<Form.Item
-							name="metrics"
-							valuePropName="checked"
-							className="configure-service-modal__body-form-item"
-						>
-							<div className="configure-service-modal__body-regions-switch-switch">
-								<Switch
-									checked={currentValues.metrics}
-									onChange={(checked): void => {
-										setCurrentValues((prev) => ({ ...prev, metrics: checked }));
-										form.setFieldsValue({ metrics: checked });
-									}}
-								/>
-								<span className="configure-service-modal__body-regions-switch-switch-label">
-									Metric Collection
-								</span>
-							</div>
-							<div className="configure-service-modal__body-switch-description">
-								Metric Collection is enabled for this AWS account. We recommend keeping
-								this enabled, but you can disable metric collection if you do not want
-								to monitor your AWS infrastructure.
-							</div>
-						</Form.Item>
-					)}
-
-					{supportedSignals.logs && (
-						<>
-							<Form.Item
-								name="logs"
-								valuePropName="checked"
-								className="configure-service-modal__body-form-item"
-							>
-								<div className="configure-service-modal__body-regions-switch-switch">
-									<Switch
-										checked={currentValues.logs}
-										onChange={(checked): void => {
-											setCurrentValues((prev) => ({ ...prev, logs: checked }));
-											form.setFieldsValue({ logs: checked });
-										}}
-									/>
-									<span className="configure-service-modal__body-regions-switch-switch-label">
-										Log Collection
-									</span>
-								</div>
-								<div className="configure-service-modal__body-switch-description">
-									To ingest logs from your AWS services, you must complete several steps
-								</div>
-							</Form.Item>
-
-							{currentValues.logs && serviceId === 's3sync' && (
-								<Form.Item name="s3Buckets" noStyle>
-									<S3BucketsSelector
-										initialBucketsByRegion={currentValues.s3Buckets}
-										onChange={handleS3BucketsChange}
-									/>
-								</Form.Item>
-							)}
-						</>
-					)}
-				</div>
-			</Form>
-		</SignozModal>
-	);
-}
-
-ConfigureServiceModal.defaultProps = {
-	initialConfig: {
-		metrics: { enabled: false },
-		logs: { enabled: false },
-	},
-};
-
-export default ConfigureServiceModal;

frontend/src/container/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx

@@ -1,189 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Button, Tabs, TabsProps } from 'antd';
-import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
-import Spinner from 'components/Spinner';
-import CloudServiceDashboards from 'container/CloudIntegrationPage/ServicesSection/CloudServiceDashboards';
-import CloudServiceDataCollected from 'container/CloudIntegrationPage/ServicesSection/CloudServiceDataCollected';
-import { IServiceStatus } from 'container/CloudIntegrationPage/ServicesSection/types';
-import dayjs from 'dayjs';
-import { useServiceDetails } from 'hooks/integration/aws/useServiceDetails';
-import useUrlQuery from 'hooks/useUrlQuery';
-
-import logEvent from '../../../api/common/logEvent';
-import ConfigureServiceModal from './ConfigureServiceModal';
-
-const getStatus = (
-	logsLastReceivedTimestamp: number | undefined,
-	metricsLastReceivedTimestamp: number | undefined,
-): { text: string; className: string } => {
-	if (!logsLastReceivedTimestamp && !metricsLastReceivedTimestamp) {
-		return { text: 'No Data Yet', className: 'service-status--no-data' };
-	}
-
-	const latestTimestamp = Math.max(
-		logsLastReceivedTimestamp || 0,
-		metricsLastReceivedTimestamp || 0,
-	);
-
-	const isStale = dayjs().diff(dayjs(latestTimestamp), 'minute') > 30;
-
-	if (isStale) {
-		return { text: 'Stale Data', className: 'service-status--stale-data' };
-	}
-
-	return { text: 'Connected', className: 'service-status--connected' };
-};
-
-function ServiceStatus({
-	serviceStatus,
-}: {
-	serviceStatus: IServiceStatus | undefined;
-}): JSX.Element {
-	const logsLastReceivedTimestamp = serviceStatus?.logs?.last_received_ts_ms;
-	const metricsLastReceivedTimestamp =
-		serviceStatus?.metrics?.last_received_ts_ms;
-
-	const { text, className } = getStatus(
-		logsLastReceivedTimestamp,
-		metricsLastReceivedTimestamp,
-	);
-
-	return <div className={`service-status ${className}`}>{text}</div>;
-}
-
-function getTabItems(serviceDetailsData: any): TabsProps['items'] {
-	const dashboards = serviceDetailsData?.assets.dashboards || [];
-	const dataCollected = serviceDetailsData?.data_collected || {};
-	const items: TabsProps['items'] = [];
-
-	if (dashboards.length) {
-		items.push({
-			key: 'dashboards',
-			label: `Dashboards (${dashboards.length})`,
-			children: <CloudServiceDashboards service={serviceDetailsData} />,
-		});
-	}
-
-	items.push({
-		key: 'data-collected',
-		label: 'Data Collected',
-		children: (
-			<CloudServiceDataCollected
-				logsData={dataCollected.logs || []}
-				metricsData={dataCollected.metrics || []}
-			/>
-		),
-	});
-
-	return items;
-}
-
-function ServiceDetails(): JSX.Element | null {
-	const urlQuery = useUrlQuery();
-	const cloudAccountId = urlQuery.get('cloudAccountId');
-	const serviceId = urlQuery.get('service');
-	const [isConfigureServiceModalOpen, setIsConfigureServiceModalOpen] = useState(
-		false,
-	);
-	const openServiceConfigModal = (): void => {
-		setIsConfigureServiceModalOpen(true);
-		logEvent('AWS Integration: Service settings viewed', {
-			cloudAccountId,
-			serviceId,
-		});
-	};
-
-	const { data: serviceDetailsData, isLoading } = useServiceDetails(
-		serviceId || '',
-		cloudAccountId || undefined,
-	);
-
-	const { config, supported_signals } = serviceDetailsData ?? {};
-
-	const totalSupportedSignals = Object.entries(supported_signals || {}).filter(
-		([, value]) => !!value,
-	).length;
-	const enabledSignals = useMemo(
-		() =>
-			Object.values(config || {}).filter((item) => item && item.enabled).length,
-		[config],
-	);
-
-	const isAnySignalConfigured = useMemo(
-		() => !!config?.logs?.enabled || !!config?.metrics?.enabled,
-		[config],
-	);
-
-	// log telemetry event on visiting details of a service.
-	useEffect(() => {
-		if (serviceId) {
-			logEvent('AWS Integration: Service viewed', {
-				cloudAccountId,
-				serviceId,
-			});
-		}
-	}, [cloudAccountId, serviceId]);
-
-	if (isLoading) {
-		return <Spinner size="large" height="50vh" />;
-	}
-
-	if (!serviceDetailsData) {
-		return null;
-	}
-
-	const tabItems = getTabItems(serviceDetailsData);
-
-	return (
-		<div className="service-details">
-			<div className="service-details__title-bar">
-				<div className="service-details__details-title">Details</div>
-				<div className="service-details__right-actions">
-					{isAnySignalConfigured && (
-						<ServiceStatus serviceStatus={serviceDetailsData.status} />
-					)}
-
-					{!!cloudAccountId &&
-						(isAnySignalConfigured ? (
-							<Button
-								className="configure-button configure-button--default"
-								onClick={openServiceConfigModal}
-							>
-								Configure ({enabledSignals}/{totalSupportedSignals})
-							</Button>
-						) : (
-							<Button
-								type="primary"
-								className="configure-button configure-button--primary"
-								onClick={openServiceConfigModal}
-							>
-								Enable Service
-							</Button>
-						))}
-				</div>
-			</div>
-			<div className="service-details__overview">
-				<MarkdownRenderer
-					variables={{}}
-					markdownContent={serviceDetailsData?.overview}
-				/>
-			</div>
-			<div className="service-details__tabs">
-				<Tabs items={tabItems} />
-			</div>
-			{isConfigureServiceModalOpen && (
-				<ConfigureServiceModal
-					isOpen
-					onClose={(): void => setIsConfigureServiceModalOpen(false)}
-					serviceName={serviceDetailsData.title}
-					serviceId={serviceId || ''}
-					cloudAccountId={cloudAccountId || ''}
-					initialConfig={serviceDetailsData.config}
-					supportedSignals={serviceDetailsData.supported_signals || {}}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default ServiceDetails;

frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx

@@ -1,75 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
-import Spinner from 'components/Spinner';
-import { useGetAccountServices } from 'hooks/integration/aws/useGetAccountServices';
-import useUrlQuery from 'hooks/useUrlQuery';
-
-import ServiceItem from './ServiceItem';
-
-interface ServicesListProps {
-	cloudAccountId: string;
-	filter: 'all_services' | 'enabled' | 'available';
-}
-
-function ServicesList({
-	cloudAccountId,
-	filter,
-}: ServicesListProps): JSX.Element {
-	const urlQuery = useUrlQuery();
-	const navigate = useNavigate();
-	const { data: services = [], isLoading } = useGetAccountServices(
-		cloudAccountId,
-	);
-	const activeService = urlQuery.get('service');
-
-	const handleActiveService = useCallback(
-		(serviceId: string): void => {
-			const latestUrlQuery = new URLSearchParams(window.location.search);
-			latestUrlQuery.set('service', serviceId);
-			navigate({ search: latestUrlQuery.toString() });
-		},
-		[navigate],
-	);
-
-	const filteredServices = useMemo(() => {
-		if (filter === 'all_services') {
-			return services;
-		}
-
-		return services.filter((service) => {
-			const isEnabled =
-				service?.config?.logs?.enabled || service?.config?.metrics?.enabled;
-			return filter === 'enabled' ? isEnabled : !isEnabled;
-		});
-	}, [services, filter]);
-
-	useEffect(() => {
-		if (activeService || !services?.length) {
-			return;
-		}
-
-		handleActiveService(services[0].id);
-	}, [services, activeService, handleActiveService]);
-
-	if (isLoading) {
-		return <Spinner size="large" height="25vh" />;
-	}
-	if (!services) {
-		return <div>No services found</div>;
-	}
-
-	return (
-		<div className="services-list">
-			{filteredServices.map((service) => (
-				<ServiceItem
-					key={service.id}
-					service={service}
-					onClick={handleActiveService}
-					isActive={service.id === activeService}
-				/>
-			))}
-		</div>
-	);
-}
-
-export default ServicesList;

frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.tsx

@@ -1,124 +0,0 @@
-import { useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { Color } from '@signozhq/design-tokens';
-import type { SelectProps, TabsProps } from 'antd';
-import { Select, Tabs } from 'antd';
-import { getAwsServices } from 'api/integration/aws';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { ChevronDown } from 'lucide-react';
-
-import ServiceDetails from './ServiceDetails';
-import ServicesList from './ServicesList';
-
-import './ServicesTabs.style.scss';
-
-export enum ServiceFilterType {
-	ALL_SERVICES = 'all_services',
-	ENABLED = 'enabled',
-	AVAILABLE = 'available',
-}
-
-interface ServicesFilterProps {
-	cloudAccountId: string;
-	onFilterChange: (value: ServiceFilterType) => void;
-}
-
-function ServicesFilter({
-	cloudAccountId,
-	onFilterChange,
-}: ServicesFilterProps): JSX.Element | null {
-	const { data: services, isLoading } = useQuery(
-		[REACT_QUERY_KEY.AWS_SERVICES, cloudAccountId],
-		() => getAwsServices(cloudAccountId),
-	);
-
-	const { enabledCount, availableCount } = useMemo(() => {
-		if (!services) {
-			return { enabledCount: 0, availableCount: 0 };
-		}
-
-		return services.reduce(
-			(acc, service) => {
-				const isEnabled =
-					service?.config?.logs?.enabled || service?.config?.metrics?.enabled;
-				return {
-					enabledCount: acc.enabledCount + (isEnabled ? 1 : 0),
-					availableCount: acc.availableCount + (isEnabled ? 0 : 1),
-				};
-			},
-			{ enabledCount: 0, availableCount: 0 },
-		);
-	}, [services]);
-
-	const selectOptions: SelectProps['options'] = useMemo(
-		() => [
-			{ value: 'all_services', label: `All Services (${services?.length || 0})` },
-			{ value: 'enabled', label: `Enabled (${enabledCount})` },
-			{ value: 'available', label: `Available (${availableCount})` },
-		],
-		[services, enabledCount, availableCount],
-	);
-
-	if (isLoading) {
-		return null;
-	}
-	if (!services?.length) {
-		return null;
-	}
-
-	return (
-		<div className="services-filter">
-			<Select
-				style={{ width: '100%' }}
-				defaultValue={ServiceFilterType.ALL_SERVICES}
-				options={selectOptions}
-				className="services-sidebar__select"
-				suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
-				onChange={onFilterChange}
-			/>
-		</div>
-	);
-}
-
-function ServicesSection(): JSX.Element {
-	const urlQuery = useUrlQuery();
-	const cloudAccountId = urlQuery.get('cloudAccountId') || '';
-
-	const [activeFilter, setActiveFilter] = useState<
-		'all_services' | 'enabled' | 'available'
-	>('all_services');
-
-	return (
-		<div className="services-section">
-			<div className="services-section__sidebar">
-				<ServicesFilter
-					cloudAccountId={cloudAccountId}
-					onFilterChange={setActiveFilter}
-				/>
-				<ServicesList cloudAccountId={cloudAccountId} filter={activeFilter} />
-			</div>
-			<div className="services-section__content">
-				<ServiceDetails />
-			</div>
-		</div>
-	);
-}
-
-function ServicesTabs(): JSX.Element {
-	const tabItems: TabsProps['items'] = [
-		{
-			key: 'services',
-			label: 'Services For Integration',
-			children: <ServicesSection />,
-		},
-	];
-
-	return (
-		<div className="services-tabs">
-			<Tabs defaultActiveKey="services" items={tabItems} />
-		</div>
-	);
-}
-
-export default ServicesTabs;

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/ConfigureServiceModalS3Sync.test.tsx

@@ -1,161 +0,0 @@
-import { act, fireEvent, screen, waitFor } from '@testing-library/react';
-import { server } from 'mocks-server/server';
-import { rest, RestRequest } from 'msw'; // Import RestRequest for req.json() typing
-
-import { UpdateServiceConfigPayload } from '../types';
-import { accountsResponse, CLOUD_ACCOUNT_ID, initialBuckets } from './mockData';
-import {
-	assertGenericModalElements,
-	assertS3SyncSpecificElements,
-	renderModal,
-} from './utils';
-
-// --- MOCKS ---
-jest.mock('hooks/useUrlQuery', () => ({
-	__esModule: true,
-	default: jest.fn(() => ({
-		get: jest.fn((paramName: string) => {
-			if (paramName === 'cloudAccountId') {
-				return CLOUD_ACCOUNT_ID;
-			}
-			return null;
-		}),
-	})),
-}));
-
-// --- TEST SUITE ---
-describe('ConfigureServiceModal for S3 Sync service', () => {
-	jest.setTimeout(10000);
-	beforeEach(() => {
-		server.use(
-			rest.get(
-				'http://localhost/api/v1/cloud-integrations/aws/accounts',
-				(req, res, ctx) => res(ctx.json(accountsResponse)),
-			),
-		);
-	});
-
-	it('should render with logs collection switch and bucket selectors (no buckets initially selected)', async () => {
-		act(() => {
-			renderModal({}); // No initial S3 buckets, defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements(); // Use new generic assertion
-		await assertS3SyncSpecificElements({}); // Use new S3-specific assertion
-	});
-
-	it('should render with logs collection switch and bucket selectors (some buckets initially selected)', async () => {
-		act(() => {
-			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements(); // Use new generic assertion
-		await assertS3SyncSpecificElements(initialBuckets); // Use new S3-specific assertion
-	});
-
-	it('should enable save button after adding a new bucket via combobox', async () => {
-		act(() => {
-			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements();
-		await assertS3SyncSpecificElements(initialBuckets);
-
-		expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
-
-		const targetCombobox = screen.getAllByRole('combobox')[0];
-		const newBucketName = 'a-newly-added-bucket';
-
-		act(() => {
-			fireEvent.change(targetCombobox, { target: { value: newBucketName } });
-			fireEvent.keyDown(targetCombobox, {
-				key: 'Enter',
-				code: 'Enter',
-				keyCode: 13,
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
-			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
-		});
-	});
-
-	it('should send updated bucket configuration on save', async () => {
-		let capturedPayload: UpdateServiceConfigPayload | null = null;
-		const mockUpdateConfigUrl =
-			'http://localhost/api/v1/cloud-integrations/aws/services/s3sync/config';
-
-		// Override POST handler specifically for this test to capture payload
-		server.use(
-			rest.post(mockUpdateConfigUrl, async (req: RestRequest, res, ctx) => {
-				capturedPayload = await req.json();
-				return res(ctx.status(200), ctx.json({ message: 'Config updated' }));
-			}),
-		);
-		act(() => {
-			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
-		});
-		await assertGenericModalElements();
-		await assertS3SyncSpecificElements(initialBuckets);
-
-		expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
-
-		const newBucketName = 'another-new-bucket';
-		// As before, targeting the first combobox, assumed to be for 'ap-south-1'.
-		const targetCombobox = screen.getAllByRole('combobox')[0];
-
-		act(() => {
-			fireEvent.change(targetCombobox, { target: { value: newBucketName } });
-			fireEvent.keyDown(targetCombobox, {
-				key: 'Enter',
-				code: 'Enter',
-				keyCode: 13,
-			});
-		});
-
-		await waitFor(() => {
-			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
-			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
-			act(() => {
-				fireEvent.click(screen.getByRole('button', { name: /save/i }));
-			});
-		});
-
-		await waitFor(() => {
-			expect(capturedPayload).not.toBeNull();
-		});
-
-		expect(capturedPayload).toEqual({
-			cloud_account_id: CLOUD_ACCOUNT_ID,
-			config: {
-				logs: {
-					enabled: true,
-					s3_buckets: {
-						'us-east-2': ['first-bucket', 'second-bucket'], // Existing buckets
-						'ap-south-1': [newBucketName], // Newly added bucket for the first region
-					},
-				},
-				metrics: {},
-			},
-		});
-	});
-
-	it('should not render S3 bucket region selector UI for services other than s3sync', async () => {
-		const otherServiceId = 'cloudwatch';
-		act(() => {
-			renderModal({}, otherServiceId);
-		});
-		await assertGenericModalElements();
-
-		await waitFor(() => {
-			expect(
-				screen.queryByRole('heading', { name: /select s3 buckets by region/i }),
-			).not.toBeInTheDocument();
-
-			const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
-			regions.forEach((region) => {
-				expect(
-					screen.queryByText(`Enter S3 bucket names for ${region}`),
-				).not.toBeInTheDocument();
-			});
-		});
-	});
-});

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/mockData.ts

@@ -1,44 +0,0 @@
-import { IConfigureServiceModalProps } from '../ConfigureServiceModal';
-
-const CLOUD_ACCOUNT_ID = '123456789012';
-
-const initialBuckets = { 'us-east-2': ['first-bucket', 'second-bucket'] };
-
-const accountsResponse = {
-	status: 'success',
-	data: {
-		accounts: [
-			{
-				id: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
-				cloud_account_id: CLOUD_ACCOUNT_ID,
-				config: {
-					regions: ['ap-south-1', 'ap-south-2', 'us-east-1', 'us-east-2'],
-				},
-				status: {
-					integration: {
-						last_heartbeat_ts_ms: 1747114366214,
-					},
-				},
-			},
-		],
-	},
-};
-
-const defaultModalProps: Omit<IConfigureServiceModalProps, 'initialConfig'> = {
-	isOpen: true,
-	onClose: jest.fn(),
-	serviceName: 'S3 Sync',
-	serviceId: 's3sync',
-	cloudAccountId: CLOUD_ACCOUNT_ID,
-	supportedSignals: {
-		logs: true,
-		metrics: false,
-	},
-};
-
-export {
-	accountsResponse,
-	CLOUD_ACCOUNT_ID,
-	defaultModalProps,
-	initialBuckets,
-};

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/utils.tsx

@@ -1,78 +0,0 @@
-import { render, RenderResult, screen, waitFor } from '@testing-library/react';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-
-import ConfigureServiceModal from '../ConfigureServiceModal';
-import { accountsResponse, defaultModalProps } from './mockData';
-
-/**
- * Renders the ConfigureServiceModal with specified S3 bucket initial configurations.
- */
-const renderModal = (
-	initialConfigLogsS3Buckets: Record<string, string[]> = {},
-	serviceId = 's3sync',
-): RenderResult => {
-	const initialConfig = {
-		logs: { enabled: true, s3_buckets: initialConfigLogsS3Buckets },
-		metrics: { enabled: false },
-	};
-
-	return render(
-		<MockQueryClientProvider>
-			<ConfigureServiceModal
-				{...defaultModalProps}
-				serviceId={serviceId}
-				initialConfig={initialConfig}
-			/>
-		</MockQueryClientProvider>,
-	);
-};
-
-/**
- * Asserts that generic UI elements of the modal are present.
- */
-const assertGenericModalElements = async (): Promise<void> => {
-	await waitFor(() => {
-		expect(screen.getByRole('switch')).toBeInTheDocument();
-		expect(screen.getByText(/log collection/i)).toBeInTheDocument();
-		expect(
-			screen.getByText(
-				/to ingest logs from your aws services, you must complete several steps/i,
-			),
-		).toBeInTheDocument();
-	});
-};
-
-/**
- * Asserts the state of S3 bucket selectors for each region, specific to S3 Sync.
- */
-const assertS3SyncSpecificElements = async (
-	expectedBucketsByRegion: Record<string, string[]> = {},
-): Promise<void> => {
-	const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
-
-	await waitFor(() => {
-		expect(
-			screen.getByRole('heading', { name: /select s3 buckets by region/i }),
-		).toBeInTheDocument();
-
-		regions.forEach((region) => {
-			expect(screen.getByText(region)).toBeInTheDocument();
-			const bucketsForRegion = expectedBucketsByRegion[region] || [];
-			if (bucketsForRegion.length > 0) {
-				bucketsForRegion.forEach((bucket) => {
-					expect(screen.getByText(bucket)).toBeInTheDocument();
-				});
-			} else {
-				expect(
-					screen.getByText(`Enter S3 bucket names for ${region}`),
-				).toBeInTheDocument();
-			}
-		});
-	});
-};
-
-export {
-	assertGenericModalElements,
-	assertS3SyncSpecificElements,
-	renderModal,
-};

frontend/src/container/CloudIntegrationPage/__tests__/RequestIntegration.test.tsx

@@ -1,64 +0,0 @@
-import { I18nextProvider } from 'react-i18next';
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import {
-	IntegrationType,
-	RequestIntegrationBtn,
-} from 'pages/Integrations/RequestIntegrationBtn';
-import i18n from 'ReactI18';
-
-describe('Request AWS integration', () => {
-	it('should render the request integration button', async () => {
-		let capturedPayload: any;
-		server.use(
-			rest.post('http://localhost/api/v1/event', async (req, res, ctx) => {
-				capturedPayload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json({
-						statusCode: 200,
-						error: null,
-						payload: 'Event Processed Successfully',
-					}),
-				);
-			}),
-		);
-		act(() => {
-			render(
-				<I18nextProvider i18n={i18n}>
-					<RequestIntegrationBtn type={IntegrationType.AWS_SERVICES} />{' '}
-				</I18nextProvider>,
-			);
-		});
-
-		expect(
-			screen.getByText(
-				/can't find what you’re looking for\? request more integrations/i,
-			),
-		).toBeInTheDocument();
-
-		await act(() => {
-			fireEvent.change(screen.getByPlaceholderText(/Enter integration name/i), {
-				target: { value: 's3 sync' },
-			});
-
-			const submitButton = screen.getByRole('button', { name: /submit/i });
-
-			expect(submitButton).toBeEnabled();
-
-			fireEvent.click(submitButton);
-		});
-
-		expect(capturedPayload.eventName).toBeDefined();
-		expect(capturedPayload.attributes).toBeDefined();
-
-		expect(capturedPayload.eventName).toBe('AWS service integration requested');
-		expect(capturedPayload.attributes).toEqual({
-			screen: 'AWS integration details',
-			integration: 's3 sync',
-			deployment_url: 'localhost',
-			user_email: null,
-		});
-	});
-});

frontend/src/container/CreateAlertV2/AlertCondition/styles.scss

@@ -82,7 +82,7 @@
 
 			.sentence-text {
 				color: var(--l2-foreground);
-				font-size: 14px;
+				font-size: 13px;
 				line-height: 1.5;
 				display: flex;
 				align-items: center;

frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { Button } from 'antd';
+import { Button, Input } from '@signozhq/ui';
 import logEvent from 'api/common/logEvent';
 import classNames from 'classnames';
 import { QueryParams } from 'constants/query';
@@ -59,15 +59,18 @@ function CreateAlertHeader(): JSX.Element {
 				<div className="alert-header__tab-bar">
 					<div className="alert-header__tab">New Alert Rule</div>
 					<Button
-						icon={<RotateCcw size={16} />}
+						prefix={<RotateCcw size={12} />}
 						onClick={handleSwitchToClassicExperience}
+						variant="solid"
+						color="secondary"
+						size="sm"
 					>
 						Switch to Classic Experience
 					</Button>
 				</div>
 			)}
 			<div className="alert-header__content">
-				<input
+				<Input
 					type="text"
 					value={alertState.name}
 					onChange={(e): void =>

frontend/src/container/CreateAlertV2/CreateAlertHeader/styles.scss

@@ -2,6 +2,7 @@
 	background-color: var(--l1-background);
 	font-family: inherit;
 	color: var(--l1-foreground);
+	padding: 12px 16px;
 
 	&__tab-bar {
 		display: flex;
@@ -14,23 +15,20 @@
 		display: flex;
 		align-items: center;
 		background-color: var(--l1-background);
-		padding: 0 12px;
 		height: 32px;
 		font-size: 13px;
 		color: var(--l1-foreground);
-		margin-left: 12px;
-		margin-top: 12px;
 	}
 
 	&__tab::before {
 		content: '•';
 		margin-right: 6px;
-		font-size: 14px;
+		font-size: 13px;
 		color: var(--l3-foreground);
 	}
 
 	&__content {
-		padding: 16px;
+		padding: 8px 0;
 		background: var(--l1-background);
 		display: flex;
 		flex-direction: column;
@@ -40,22 +38,14 @@
 	}
 
 	&__input.title {
-		font-size: 18px;
-		font-weight: 500;
 		background-color: transparent;
 		color: var(--l1-foreground);
 		width: 100%;
 		min-width: 300px;
 	}
 
-	&__input:focus,
-	&__input:active {
-		border: none;
-		outline: none;
-	}
-
 	&__input.description {
-		font-size: 14px;
+		font-size: 13px;
 		background-color: transparent;
 		color: var(--l2-foreground);
 	}

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/styles.scss

@@ -13,7 +13,7 @@
 		.advanced-option-item-title {
 			color: var(--l2-foreground);
 			font-family: Inter;
-			font-size: 14px;
+			font-size: 13px;
 			font-weight: 500;
 			display: flex;
 			align-items: center;
@@ -23,7 +23,7 @@
 		.advanced-option-item-description {
 			color: var(--muted-foreground);
 			font-family: Inter;
-			font-size: 14px;
+			font-size: 13px;
 			font-weight: 400;
 		}
 

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/styles.scss

@@ -22,7 +22,7 @@
 				color: var(--l2-foreground);
 				font-weight: 500;
 				margin: 0 4px;
-				font-size: 14px;
+				font-size: 13px;
 			}
 		}
 
@@ -30,7 +30,7 @@
 			.ant-btn {
 				border: 1px solid var(--l1-border);
 				color: var(--l2-foreground);
-				font-size: 14px;
+				font-size: 13px;
 				display: flex;
 				align-items: center;
 				gap: 8px;
@@ -48,7 +48,7 @@
 
 	.evaluation-cadence-details-title {
 		color: var(--l1-foreground);
-		font-size: 14px;
+		font-size: 13px;
 		font-weight: 500;
 		padding-left: 16px;
 		padding-top: 16px;
@@ -138,7 +138,7 @@
 					border-radius: 4px;
 					color: var(--l2-foreground) !important;
 					font-family: 'Space Mono';
-					font-size: 14px;
+					font-size: 13px;
 
 					&::placeholder {
 						font-family: 'Space Mono';
@@ -202,7 +202,7 @@
 				gap: 8px;
 				height: 100%;
 				color: var(--l1-foreground);
-				font-size: 14px;
+				font-size: 13px;
 			}
 
 			.schedule-preview {
@@ -225,7 +225,7 @@
 
 					.schedule-preview-title {
 						color: var(--l2-foreground);
-						font-size: 14px;
+						font-size: 13px;
 						font-weight: 500;
 					}
 				}
@@ -281,7 +281,7 @@
 
 							.schedule-preview-date {
 								color: var(--l2-foreground);
-								font-size: 14px;
+								font-size: 13px;
 								font-weight: 400;
 								white-space: nowrap;
 							}
@@ -396,7 +396,7 @@
 
 						.schedule-preview-title {
 							color: var(--l1-foreground);
-							font-size: 14px;
+							font-size: 13px;
 							font-weight: 500;
 						}
 					}
@@ -422,7 +422,7 @@
 							.schedule-preview-content {
 								.schedule-preview-date {
 									color: var(--l1-foreground);
-									font-size: 14px;
+									font-size: 13px;
 									font-weight: 500;
 								}
 

frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.scss

@@ -10,7 +10,7 @@
 		border: 1px solid var(--l1-border);
 		color: var(--l1-foreground);
 		font-family: 'Space Mono', monospace;
-		font-size: 14px;
+		font-size: 13px;
 		font-weight: 600;
 		text-align: center;
 		border-radius: 4px;
@@ -43,7 +43,7 @@
 
 	.time-input-separator {
 		color: var(--l2-foreground);
-		font-size: 14px;
+		font-size: 13px;
 		font-weight: 600;
 		margin: 0 4px;
 		user-select: none;

frontend/src/container/CreateAlertV2/EvaluationSettings/styles.scss

@@ -13,7 +13,7 @@
 
 		.ant-typography {
 			color: var(--l2-foreground);
-			font-size: 14px;
+			font-size: 13px;
 		}
 
 		.evaluate-alert-conditions-separator {
@@ -175,7 +175,7 @@
 				background-color: var(--l3-background);
 				border: 1px solid var(--l1-border);
 				color: var(--l2-foreground);
-				font-size: 14px;
+				font-size: 13px;
 			}
 		}
 	}

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { toast } from '@signozhq/ui';
-import { Button, Tooltip, Typography } from 'antd';
+import { Button, toast } from '@signozhq/ui';
+import { Tooltip } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Check, Loader, Send, X } from 'lucide-react';
@@ -147,7 +147,8 @@ function Footer(): JSX.Element {
 	const saveAlertButton = useMemo(() => {
 		let button = (
 			<Button
-				type="primary"
+				variant="solid"
+				color="primary"
 				onClick={handleSaveAlert}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
 			>
@@ -156,7 +157,7 @@ function Footer(): JSX.Element {
 				) : (
 					<Check size={14} />
 				)}
-				<Typography.Text>Save Alert Rule</Typography.Text>
+				Save Alert Rule
 			</Button>
 		);
 		if (alertValidationMessage) {
@@ -174,12 +175,13 @@ function Footer(): JSX.Element {
 	const testAlertButton = useMemo(() => {
 		let button = (
 			<Button
-				type="default"
+				variant="solid"
+				color="secondary"
 				onClick={handleTestNotification}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
 			>
 				{isTestingAlertRule ? <Loader size={14} /> : <Send size={14} />}
-				<Typography.Text>Test Notification</Typography.Text>
+				Test Notification
 			</Button>
 		);
 		if (alertValidationMessage) {
@@ -195,7 +197,12 @@ function Footer(): JSX.Element {
 
 	return (
 		<div className="create-alert-v2-footer">
-			<Button type="default" onClick={handleDiscard} disabled={disableButtons}>
+			<Button
+				variant="solid"
+				color="secondary"
+				onClick={handleDiscard}
+				disabled={disableButtons}
+			>
 				<X size={14} /> Discard
 			</Button>
 			<div className="button-group">

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -4,9 +4,8 @@
 	left: 63px;
 	right: 0;
 	background-color: var(--l1-background);
-	height: 70px;
 	border-top: 1px solid var(--l1-border);
-	padding: 16px 24px;
+	padding: 12px;
 	z-index: 1000;
 	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
 	display: flex;

frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss

@@ -29,14 +29,14 @@
 					align-items: center;
 					color: var(--l1-foreground);
 					font-family: Inter;
-					font-size: 14px;
+					font-size: 13px;
 					font-weight: 500;
 				}
 
 				.notification-message-header-description {
 					color: var(--l2-foreground);
 					font-family: Inter;
-					font-size: 14px;
+					font-size: 13px;
 					font-weight: 400;
 				}
 			}
@@ -59,7 +59,7 @@
 			border-radius: 4px;
 			color: var(--l2-foreground) !important;
 			font-family: Inter;
-			font-size: 14px;
+			font-size: 13px;
 		}
 	}
 
@@ -130,7 +130,7 @@
 				.multiple-notifications-header-title {
 					color: var(--l1-foreground);
 					font-family: Inter;
-					font-size: 14px;
+					font-size: 13px;
 					font-weight: 500;
 					display: flex;
 					align-items: center;
@@ -140,7 +140,7 @@
 				.multiple-notifications-header-description {
 					color: var(--l2-foreground);
 					font-family: Inter;
-					font-size: 14px;
+					font-size: 13px;
 					font-weight: 400;
 				}
 			}
@@ -179,14 +179,14 @@
 					.advanced-option-item-title {
 						color: var(--l2-foreground);
 						font-family: Inter;
-						font-size: 14px;
+						font-size: 13px;
 						font-weight: 500;
 					}
 
 					.advanced-option-item-description {
 						color: var(--muted-foreground);
 						font-family: Inter;
-						font-size: 14px;
+						font-size: 13px;
 						font-weight: 400;
 					}
 				}
@@ -206,7 +206,7 @@
 				flex-wrap: nowrap;
 
 				.ant-typography {
-					font-size: 14px;
+					font-size: 13px;
 					font-weight: 400;
 					color: var(--l2-foreground);
 					white-space: nowrap;

frontend/src/container/CreateAlertV2/QuerySection/styles.scss

@@ -16,8 +16,8 @@
 			margin-bottom: -1px;
 
 			.prom-ql-icon {
-				height: 14px;
-				width: 14px;
+				height: 13px;
+				width: 13px;
 			}
 
 			.explorer-view-option {

frontend/src/container/CreateAlertV2/Stepper/styles.scss

@@ -17,7 +17,7 @@
 	align-items: center;
 	justify-content: center;
 	font-weight: 600;
-	font-size: 14px;
+	font-size: 13px;
 	flex-shrink: 0;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }

frontend/src/container/CustomDomainSettings/CustomDomainEditModal.tsx

@@ -1,9 +1,7 @@
 import { useEffect, useState } from 'react';
-import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { DialogWrapper } from '@signozhq/dialog';
 import { CircleAlert, CircleCheck, LoaderCircle } from '@signozhq/icons';
-import { Input } from '@signozhq/input';
+import { Button, DialogWrapper, Input } from '@signozhq/ui';
 import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -1,6 +1,4 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
 import {
 	Check,
 	ChevronDown,
@@ -11,7 +9,7 @@ import {
 	SolidAlertCircle,
 	X,
 } from '@signozhq/icons';
-import { toast } from '@signozhq/ui';
+import { Button, Callout, toast } from '@signozhq/ui';
 import { Dropdown, Skeleton } from 'antd';
 import {
 	RenderErrorResponseDTO,
@@ -44,9 +42,9 @@ function DomainUpdateToast({
 			<div className="custom-domain-toast-actions">
 				<Button
 					variant="ghost"
-					size="xs"
+					size="sm"
 					className="custom-domain-toast-visit-btn"
-					suffixIcon={<ExternalLink size={12} />}
+					suffix={<ExternalLink size={12} />}
 					onClick={(): void => {
 						window.open(url, '_blank', 'noopener,noreferrer');
 					}}
@@ -61,7 +59,7 @@ function DomainUpdateToast({
 						toast.dismiss(toastId);
 					}}
 					aria-label="Dismiss"
-					prefixIcon={<X size={14} />}
+					prefix={<X size={14} />}
 				/>
 			</div>
 		</div>
@@ -246,7 +244,7 @@ export default function CustomDomainSettings(): JSX.Element {
 						>
 							<Button
 								type="button"
-								size="xs"
+								size="sm"
 								className="workspace-url-trigger"
 								disabled={isFetchingHosts}
 							>
@@ -266,7 +264,7 @@ export default function CustomDomainSettings(): JSX.Element {
 					variant="solid"
 					size="sm"
 					className="custom-domain-edit-button"
-					prefixIcon={<FilePenLine size={12} />}
+					prefix={<FilePenLine size={12} />}
 					disabled={isFetchingHosts || isPollingEnabled}
 					onClick={(): void => setIsEditModalOpen(true)}
 				>
@@ -281,7 +279,7 @@ export default function CustomDomainSettings(): JSX.Element {
 					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.`}
+					title={`Updating your URL to ⎯ ${customDomainSubdomain}.${dnsSuffix}. This may take a few mins.`}
 				/>
 			)}
 

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
-import { Checkbox } from '@signozhq/checkbox';
-import { toast } from '@signozhq/ui';
+import { Checkbox, toast } from '@signozhq/ui';
 import { Button, Select, Typography } from 'antd';
 import createPublicDashboardAPI from 'api/dashboard/public/createPublicDashboard';
 import revokePublicDashboardAccessAPI from 'api/dashboard/public/revokePublicDashboardAccess';
@@ -247,10 +246,11 @@ function PublicDashboardSetting(): JSX.Element {
 				<div className="timerange-enabled-checkbox">
 					<Checkbox
 						id="enable-time-range"
-						checked={timeRangeEnabled}
-						onCheckedChange={handleTimeRangeEnabled}
-						labelName="Enable time range"
-					/>
+						value={timeRangeEnabled}
+						onChange={handleTimeRangeEnabled}
+					>
+						Enable time range
+					</Checkbox>
 				</div>
 
 				<div className="default-time-range-select">

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
 import Legend from 'lib/uPlotV2/components/Legend/Legend';
 import {
@@ -30,7 +30,6 @@ export default function ChartWrapper({
 	onDestroy = noop,
 	children,
 	layoutChildren,
-	yAxisUnit,
 	customTooltip,
 	pinnedTooltipElement,
 	'data-testid': testId,
@@ -63,13 +62,6 @@ export default function ChartWrapper({
 		[customTooltip],
 	);
 
-	const syncMetadata = useMemo(
-		() => ({
-			yAxisUnit,
-		}),
-		[yAxisUnit],
-	);
-
 	return (
 		<PlotContextProvider>
 			<ChartLayout
@@ -107,7 +99,6 @@ export default function ChartWrapper({
 									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
 								)}
 								syncKey={syncKey}
-								syncMetadata={syncMetadata}
 								render={renderTooltipCallback}
 								pinnedTooltipElement={pinnedTooltipElement}
 							/>

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -24,12 +24,13 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 			}
 			const tooltipProps: HistogramTooltipProps = {
 				...props,
+				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},
-		[customTooltip, rest.yAxisUnit, rest.decimalPrecision],
+		[customTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
 	);
 
 	return (

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -12,7 +12,10 @@ interface BaseChartProps {
 	height: number;
 	showTooltip?: boolean;
 	showLegend?: boolean;
+	timezone?: Timezone;
 	canPinTooltip?: boolean;
+	yAxisUnit?: string;
+	decimalPrecision?: PrecisionOption;
 	pinnedTooltipElement?: (clickData: TooltipClickData) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	'data-testid'?: string;
@@ -29,31 +32,18 @@ interface UPlotBasedChartProps {
 	layoutChildren?: React.ReactNode;
 }
 
-interface UPlotChartDataProps {
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-}
-
 export interface TimeSeriesChartProps
 	extends BaseChartProps,
-		UPlotBasedChartProps,
-		UPlotChartDataProps {
-	timezone?: Timezone;
-}
+		UPlotBasedChartProps {}
 
 export interface HistogramChartProps
 	extends BaseChartProps,
-		UPlotBasedChartProps,
-		UPlotChartDataProps {
+		UPlotBasedChartProps {
 	isQueriesMerged?: boolean;
 }
 
-export interface BarChartProps
-	extends BaseChartProps,
-		UPlotBasedChartProps,
-		UPlotChartDataProps {
+export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
 	isStackedBarChart?: boolean;
-	timezone?: Timezone;
 }
 
 export type ChartProps =

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -123,13 +123,13 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 					}}
 					plotRef={onPlotRef}
 					onDestroy={onPlotDestroy}
+					yAxisUnit={widget.yAxisUnit}
+					decimalPrecision={widget.decimalPrecision}
 					data={chartData as uPlot.AlignedData}
 					width={containerDimensions.width}
 					height={containerDimensions.height}
 					layoutChildren={layoutChildren}
 					isStackedBarChart={widget.stackedBarChart ?? false}
-					yAxisUnit={widget.yAxisUnit}
-					decimalPrecision={widget.decimalPrecision}
 					timezone={timezone}
 				>
 					<ContextMenu