fix(row): missing active styles

fix(tests): use find by text
fix(styles): minor fixes on styles
2026-04-14 16:00:27 +01:00 · 2026-04-13 19:37:13 -03:00 · 2026-04-13 19:17:34 -03:00 · 2026-04-13 19:15:43 -03:00 · 2026-04-13 18:57:30 -03:00 · 2026-04-13 18:36:45 -03:00
267 changed files with 7022 additions and 15065 deletions
--- a/cmd/community/server.go
+++ b/cmd/community/server.go
@@ -8,7 +8,6 @@ import (

 	"github.com/SigNoz/signoz/cmd"
 	"github.com/SigNoz/signoz/pkg/analytics"
-	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authn"
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/authz/openfgaauthz"
@@ -94,9 +93,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()
 		},
-		func(_ licensing.Licensing) factory.NamedMap[factory.ProviderFactory[auditor.Auditor, auditor.Config]] {
-			return signoz.NewAuditorProviderFactories()
-		},
 		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
 			return querier.NewHandler(ps, q, a)
 		},
--- a/cmd/enterprise/server.go
+++ b/cmd/enterprise/server.go
@@ -8,7 +8,6 @@ import (
 	"github.com/spf13/cobra"

 	"github.com/SigNoz/signoz/cmd"
-	"github.com/SigNoz/signoz/ee/auditor/otlphttpauditor"
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/oidccallbackauthn"
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/samlcallbackauthn"
 	"github.com/SigNoz/signoz/ee/authz/openfgaauthz"
@@ -25,7 +24,6 @@ import (
 	enterprisezeus "github.com/SigNoz/signoz/ee/zeus"
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
 	"github.com/SigNoz/signoz/pkg/analytics"
-	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authn"
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -135,13 +133,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)
 		},
-		func(licensing licensing.Licensing) factory.NamedMap[factory.ProviderFactory[auditor.Auditor, auditor.Config]] {
-			factories := signoz.NewAuditorProviderFactories()
-			if err := factories.Add(otlphttpauditor.NewFactory(licensing, version.Info)); err != nil {
-				panic(err)
-			}
-			return factories
-		},
 		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
 			communityHandler := querier.NewHandler(ps, q, a)
 			return eequerier.NewHandler(ps, q, communityHandler)
--- a/conf/example.yaml
+++ b/conf/example.yaml
@@ -364,34 +364,3 @@ serviceaccount:
  analytics:
    # toggle service account analytics
    enabled: true
-
-##################### Auditor #####################
-auditor:
-  # Specifies the auditor provider to use.
-  # noop: discards all audit events (community default).
-  # otlphttp: exports audit events via OTLP HTTP (enterprise).
-  provider: noop
-  # The async channel capacity for audit events. Events are dropped when full (fail-open).
-  buffer_size: 1000
-  # The maximum number of events per export batch.
-  batch_size: 100
-  # The maximum time between export flushes.
-  flush_interval: 1s
-  otlphttp:
-    # The target scheme://host:port/path of the OTLP HTTP endpoint.
-    endpoint: http://localhost:4318/v1/logs
-    # Whether to use HTTP instead of HTTPS.
-    insecure: false
-    # The maximum duration for an export attempt.
-    timeout: 10s
-    # Additional HTTP headers sent with every export request.
-    headers: {}
-    retry:
-      # Whether to retry on transient failures.
-      enabled: true
-      # The initial wait time before the first retry.
-      initial_interval: 5s
-      # The upper bound on backoff interval.
-      max_interval: 30s
-      # The total maximum time spent retrying.
-      max_elapsed_time: 60s
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -403,65 +403,27 @@ components:
      required:
      - regions
      type: object
-    CloudintegrationtypesAWSCloudWatchLogsSubscription:
+    CloudintegrationtypesAWSCollectionStrategy:
      properties:
-        filterPattern:
-          type: string
-        logGroupNamePrefix:
-          type: string
-      required:
-      - logGroupNamePrefix
-      - filterPattern
-      type: object
-    CloudintegrationtypesAWSCloudWatchMetricStreamFilter:
-      properties:
-        metricNames:
-          items:
-            type: string
-          type: array
-        namespace:
-          type: string
-      required:
-      - namespace
+        aws_logs:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSLogsStrategy'
+        aws_metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSMetricsStrategy'
+        s3_buckets:
+          additionalProperties:
+            items:
+              type: string
+            type: array
+          type: object
      type: object
    CloudintegrationtypesAWSConnectionArtifact:
      properties:
-        connectionUrl:
+        connectionURL:
          type: string
      required:
-      - connectionUrl
+      - connectionURL
      type: object
-    CloudintegrationtypesAWSIntegrationConfig:
-      properties:
-        enabledRegions:
-          items:
-            type: string
-          type: array
-        telemetryCollectionStrategy:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
-      required:
-      - enabledRegions
-      - telemetryCollectionStrategy
-      type: object
-    CloudintegrationtypesAWSLogsCollectionStrategy:
-      properties:
-        subscriptions:
-          items:
-            $ref: '#/components/schemas/CloudintegrationtypesAWSCloudWatchLogsSubscription'
-          type: array
-      required:
-      - subscriptions
-      type: object
-    CloudintegrationtypesAWSMetricsCollectionStrategy:
-      properties:
-        streamFilters:
-          items:
-            $ref: '#/components/schemas/CloudintegrationtypesAWSCloudWatchMetricStreamFilter'
-          type: array
-      required:
-      - streamFilters
-      type: object
-    CloudintegrationtypesAWSPostableAccountConfig:
+    CloudintegrationtypesAWSConnectionArtifactRequest:
      properties:
        deploymentRegion:
          type: string
@@ -473,6 +435,46 @@ components:
      - deploymentRegion
      - regions
      type: object
+    CloudintegrationtypesAWSIntegrationConfig:
+      properties:
+        enabledRegions:
+          items:
+            type: string
+          type: array
+        telemetry:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
+      required:
+      - enabledRegions
+      - telemetry
+      type: object
+    CloudintegrationtypesAWSLogsStrategy:
+      properties:
+        cloudwatch_logs_subscriptions:
+          items:
+            properties:
+              filter_pattern:
+                type: string
+              log_group_name_prefix:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
+    CloudintegrationtypesAWSMetricsStrategy:
+      properties:
+        cloudwatch_metric_stream_filters:
+          items:
+            properties:
+              MetricNames:
+                items:
+                  type: string
+                type: array
+              Namespace:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
    CloudintegrationtypesAWSServiceConfig:
      properties:
        logs:
@@ -484,7 +486,7 @@ components:
      properties:
        enabled:
          type: boolean
-        s3Buckets:
+        s3_buckets:
          additionalProperties:
            items:
              type: string
@@ -496,19 +498,6 @@ components:
        enabled:
          type: boolean
      type: object
-    CloudintegrationtypesAWSTelemetryCollectionStrategy:
-      properties:
-        logs:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSLogsCollectionStrategy'
-        metrics:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSMetricsCollectionStrategy'
-        s3Buckets:
-          additionalProperties:
-            items:
-              type: string
-            type: array
-          type: object
-      type: object
    CloudintegrationtypesAccount:
      properties:
        agentReport:
@@ -572,26 +561,6 @@ components:
          nullable: true
          type: array
      type: object
-    CloudintegrationtypesCloudIntegrationService:
-      nullable: true
-      properties:
-        cloudIntegrationId:
-          type: string
-        config:
-          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
-        createdAt:
-          format: date-time
-          type: string
-        id:
-          type: string
-        type:
-          $ref: '#/components/schemas/CloudintegrationtypesServiceID'
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      type: object
    CloudintegrationtypesCollectedLogAttribute:
      properties:
        name:
@@ -612,6 +581,13 @@ components:
        unit:
          type: string
      type: object
+    CloudintegrationtypesCollectionStrategy:
+      properties:
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
+      required:
+      - aws
+      type: object
    CloudintegrationtypesConnectionArtifact:
      properties:
        aws:
@@ -619,21 +595,12 @@ components:
      required:
      - aws
      type: object
-    CloudintegrationtypesCredentials:
+    CloudintegrationtypesConnectionArtifactRequest:
      properties:
-        ingestionKey:
-          type: string
-        ingestionUrl:
-          type: string
-        sigNozApiKey:
-          type: string
-        sigNozApiUrl:
-          type: string
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSConnectionArtifactRequest'
      required:
-      - sigNozApiUrl
-      - sigNozApiKey
-      - ingestionUrl
-      - ingestionKey
+      - aws
      type: object
    CloudintegrationtypesDashboard:
      properties:
@@ -659,7 +626,7 @@ components:
          nullable: true
          type: array
      type: object
-    CloudintegrationtypesGettableAccountWithConnectionArtifact:
+    CloudintegrationtypesGettableAccountWithArtifact:
      properties:
        connectionArtifact:
          $ref: '#/components/schemas/CloudintegrationtypesConnectionArtifact'
@@ -678,7 +645,7 @@ components:
      required:
      - accounts
      type: object
-    CloudintegrationtypesGettableAgentCheckIn:
+    CloudintegrationtypesGettableAgentCheckInResponse:
      properties:
        account_id:
          type: string
@@ -727,72 +694,12 @@ components:
            type: string
          type: array
        telemetry:
-          $ref: '#/components/schemas/CloudintegrationtypesOldAWSCollectionStrategy'
+          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
      required:
      - enabled_regions
      - telemetry
      type: object
-    CloudintegrationtypesOldAWSCollectionStrategy:
-      properties:
-        aws_logs:
-          $ref: '#/components/schemas/CloudintegrationtypesOldAWSLogsStrategy'
-        aws_metrics:
-          $ref: '#/components/schemas/CloudintegrationtypesOldAWSMetricsStrategy'
-        provider:
-          type: string
-        s3_buckets:
-          additionalProperties:
-            items:
-              type: string
-            type: array
-          type: object
-      type: object
-    CloudintegrationtypesOldAWSLogsStrategy:
-      properties:
-        cloudwatch_logs_subscriptions:
-          items:
-            properties:
-              filter_pattern:
-                type: string
-              log_group_name_prefix:
-                type: string
-            type: object
-          nullable: true
-          type: array
-      type: object
-    CloudintegrationtypesOldAWSMetricsStrategy:
-      properties:
-        cloudwatch_metric_stream_filters:
-          items:
-            properties:
-              MetricNames:
-                items:
-                  type: string
-                type: array
-              Namespace:
-                type: string
-            type: object
-          nullable: true
-          type: array
-      type: object
-    CloudintegrationtypesPostableAccount:
-      properties:
-        config:
-          $ref: '#/components/schemas/CloudintegrationtypesPostableAccountConfig'
-        credentials:
-          $ref: '#/components/schemas/CloudintegrationtypesCredentials'
-      required:
-      - config
-      - credentials
-      type: object
-    CloudintegrationtypesPostableAccountConfig:
-      properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSPostableAccountConfig'
-      required:
-      - aws
-      type: object
-    CloudintegrationtypesPostableAgentCheckIn:
+    CloudintegrationtypesPostableAgentCheckInRequest:
      properties:
        account_id:
          type: string
@@ -820,8 +727,6 @@ components:
      properties:
        assets:
          $ref: '#/components/schemas/CloudintegrationtypesAssets'
-        cloudIntegrationService:
-          $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
        dataCollected:
          $ref: '#/components/schemas/CloudintegrationtypesDataCollected'
        icon:
@@ -830,10 +735,12 @@ components:
          type: string
        overview:
          type: string
-        supportedSignals:
+        serviceConfig:
+          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
+        supported_signals:
          $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
        telemetryCollectionStrategy:
-          $ref: '#/components/schemas/CloudintegrationtypesTelemetryCollectionStrategy'
+          $ref: '#/components/schemas/CloudintegrationtypesCollectionStrategy'
        title:
          type: string
      required:
@@ -842,10 +749,9 @@ components:
      - icon
      - overview
      - assets
-      - supportedSignals
+      - supported_signals
      - dataCollected
      - telemetryCollectionStrategy
-      - cloudIntegrationService
      type: object
    CloudintegrationtypesServiceConfig:
      properties:
@@ -854,22 +760,6 @@ components:
      required:
      - aws
      type: object
-    CloudintegrationtypesServiceID:
-      enum:
-      - alb
-      - api-gateway
-      - dynamodb
-      - ec2
-      - ecs
-      - eks
-      - elasticache
-      - lambda
-      - msk
-      - rds
-      - s3sync
-      - sns
-      - sqs
-      type: string
    CloudintegrationtypesServiceMetadata:
      properties:
        enabled:
@@ -893,13 +783,6 @@ components:
        metrics:
          type: boolean
      type: object
-    CloudintegrationtypesTelemetryCollectionStrategy:
-      properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
-      required:
-      - aws
-      type: object
    CloudintegrationtypesUpdatableAccount:
      properties:
        config:
@@ -3198,7 +3081,7 @@ paths:
        content:
          application/json:
            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckIn'
+              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckInRequest'
      responses:
        "200":
          content:
@@ -3206,7 +3089,7 @@ paths:
              schema:
                properties:
                  data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckIn'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckInResponse'
                  status:
                    type: string
                required:
@@ -3307,22 +3190,22 @@ paths:
        content:
          application/json:
            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesPostableAccount'
+              $ref: '#/components/schemas/CloudintegrationtypesConnectionArtifactRequest'
      responses:
-        "201":
+        "200":
          content:
            application/json:
              schema:
                properties:
                  data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAccountWithConnectionArtifact'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAccountWithArtifact'
                  status:
                    type: string
                required:
                - status
                - data
                type: object
-          description: Created
+          description: OK
        "401":
          content:
            application/json:
@@ -3511,61 +3394,6 @@ paths:
      summary: Update account
      tags:
      - cloudintegration
-  /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
-    put:
-      deprecated: false
-      description: This endpoint updates a service for the specified cloud provider
-      operationId: UpdateService
-      parameters:
-      - in: path
-        name: cloud_provider
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: service_id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Update service
-      tags:
-      - cloudintegration
  /api/v1/cloud_integrations/{cloud_provider}/accounts/check_in:
    post:
      deprecated: false
@@ -3581,7 +3409,7 @@ paths:
        content:
          application/json:
            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckIn'
+              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckInRequest'
      responses:
        "200":
          content:
@@ -3589,7 +3417,7 @@ paths:
              schema:
                properties:
                  data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckIn'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckInResponse'
                  status:
                    type: string
                required:
@@ -3623,59 +3451,6 @@ paths:
      summary: Agent check-in
      tags:
      - cloudintegration
-  /api/v1/cloud_integrations/{cloud_provider}/credentials:
-    get:
-      deprecated: false
-      description: This endpoint retrieves the connection credentials required for
-        integration
-      operationId: GetConnectionCredentials
-      parameters:
-      - in: path
-        name: cloud_provider
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/CloudintegrationtypesCredentials'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Get connection credentials
-      tags:
-      - cloudintegration
  /api/v1/cloud_integrations/{cloud_provider}/services:
    get:
      deprecated: false
@@ -3683,11 +3458,6 @@ paths:
        provider
      operationId: ListServicesMetadata
      parameters:
-      - in: query
-        name: cloud_integration_id
-        required: false
-        schema:
-          type: string
      - in: path
        name: cloud_provider
        required: true
@@ -3740,11 +3510,6 @@ paths:
      description: This endpoint gets a service for the specified cloud provider
      operationId: GetService
      parameters:
-      - in: query
-        name: cloud_integration_id
-        required: false
-        schema:
-          type: string
      - in: path
        name: cloud_provider
        required: true
@@ -3796,6 +3561,55 @@ paths:
      summary: Get service
      tags:
      - cloudintegration
+    put:
+      deprecated: false
+      description: This endpoint updates a service for the specified cloud provider
+      operationId: UpdateService
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: service_id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
+      responses:
+        "204":
+          description: No Content
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Update service
+      tags:
+      - cloudintegration
  /api/v1/complete/google:
    get:
      deprecated: false
--- a/ee/query-service/app/server.go
+++ b/ee/query-service/app/server.go
@@ -227,7 +227,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		s.config.APIServer.Timeout.Default,
 		s.config.APIServer.Timeout.Max,
 	).Wrap)
-	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, s.signoz.Auditor).Wrap)
+	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, nil).Wrap)
 	r.Use(middleware.NewComment().Wrap)

 	apiHandler.RegisterRoutes(r, am)
--- a/frontend/.cursor/rules/jest-mocking-strategy.mdc
+++ b/frontend/.cursor/rules/jest-mocking-strategy.mdc
@@ -1,77 +0,0 @@
---
-description: Global vs local mock strategy for Jest tests
-globs:
-  - "**/*.test.ts"
-  - "**/*.test.tsx"
-  - "**/__tests__/**/*.ts"
-  - "**/__tests__/**/*.tsx"
-alwaysApply: false
---
-
-# Mock Decision Strategy
-
-## Global Mocks (20+ test files)
-
- Core infrastructure: react-router-dom, react-query, antd
- Browser APIs: ResizeObserver, matchMedia, localStorage
- Utility libraries: date-fns, lodash
- Available: `uplot` → `__mocks__/uplotMock.ts`
-
-## Local Mocks (5–15 test files)
-
- Business logic dependencies
- API endpoints with specific responses
- Domain-specific components
- Error scenarios and edge cases
-
-## Decision Tree
-
-```
-Is it used in 20+ test files?
-├─ YES → Use Global Mock
-│   ├─ react-router-dom
-│   ├─ react-query
-│   ├─ antd components
-│   └─ browser APIs
-│
-└─ NO → Is it business logic?
-    ├─ YES → Use Local Mock
-    │   ├─ API endpoints
-    │   ├─ Custom hooks
-    │   └─ Domain components
-    │
-    └─ NO → Is it test-specific?
-        ├─ YES → Use Local Mock
-        │   ├─ Error scenarios
-        │   ├─ Loading states
-        │   └─ Specific data
-        │
-        └─ NO → Consider Global Mock
-            └─ If it becomes frequently used
-```
-
-## Anti-patterns
-
-❌ Don't mock global dependencies locally:
-```ts
-jest.mock('react-router-dom', () => ({ ... }));  // Already globally mocked
-```
-
-❌ Don't create global mocks for test-specific data:
-```ts
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => specificTestData)  // BAD - should be local
-}));
-```
-
-✅ Do use global mocks for infrastructure:
-```ts
-import { useLocation } from 'react-router-dom';
-```
-
-✅ Do create local mocks for business logic:
-```ts
-jest.mock('../api/tracesService', () => ({
-  getTraces: jest.fn(() => mockTracesData)
-}));
-```
--- a/frontend/.cursor/rules/jest-test-conventions.mdc
+++ b/frontend/.cursor/rules/jest-test-conventions.mdc
@@ -1,124 +0,0 @@
---
-description: Core Jest/React Testing Library conventions - harness, MSW, interactions, timers
-globs:
-  - "**/*.test.ts"
-  - "**/*.test.tsx"
-  - "**/__tests__/**/*.ts"
-  - "**/__tests__/**/*.tsx"
-alwaysApply: false
---
-
-# Jest Test Conventions
-
-Expert developer with Jest, React Testing Library, MSW, and TypeScript. Focus on critical functionality, mock dependencies before imports, test multiple scenarios, write maintainable tests.
-
-**Auto-detect TypeScript**: Check for TypeScript in the project through tsconfig.json or package.json dependencies. Adjust syntax based on this detection.
-
-## Imports
-
-Always import from our harness:
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-```
-For API mocks:
-```ts
-import { server, rest } from 'mocks-server/server';
-```
-❌ Do not import directly from `@testing-library/react`.
-
-## Router
-
-Use the router built into render:
-```ts
-render(<Page />, undefined, { initialRoute: '/traces-explorer' });
-```
-Only mock `useLocation` / `useParams` if the test depends on them.
-
-## Hook Mocks
-
-```ts
-import useFoo from 'hooks/useFoo';
-jest.mock('hooks/useFoo');
-const mockUseFoo = jest.mocked(useFoo);
-mockUseFoo.mockReturnValue(/* minimal shape */ as any);
-```
-Prefer helpers (`rqSuccess`, `rqLoading`, `rqError`) for React Query results.
-
-## MSW
-
-Global MSW server runs automatically. Override per-test:
-```ts
-server.use(
-  rest.get('*/api/v1/foo', (_req, res, ctx) => res(ctx.status(200), ctx.json({ ok: true })))
-);
-```
-Keep large responses in `mocks-server/__mockdata__/`.
-
-## Interactions
-
- Prefer `userEvent` for real user interactions (click, type, select, tab).
- Use `fireEvent` only for low-level/programmatic events not covered by `userEvent` (e.g., scroll, resize, setting `element.scrollTop` for virtualization). Wrap in `act(...)` if needed.
- Always await interactions:
-```ts
-const user = userEvent.setup({ pointerEventsCheck: 0 });
-await user.click(screen.getByRole('button', { name: /save/i }));
-```
-
-```ts
-// Example: virtualized list scroll (no userEvent helper)
-const scroller = container.querySelector('[data-test-id="virtuoso-scroller"]') as HTMLElement;
-scroller.scrollTop = targetScrollTop;
-act(() => { fireEvent.scroll(scroller); });
-```
-
-## Timers
-
-❌ No global fake timers. ✅ Per-test only:
-```ts
-jest.useFakeTimers();
-const user = userEvent.setup({ advanceTimers: (ms) => jest.advanceTimersByTime(ms) });
-await user.type(screen.getByRole('textbox'), 'query');
-jest.advanceTimersByTime(400);
-jest.useRealTimers();
-```
-
-## Queries
-
-Prefer accessible queries (`getByRole`, `findByRole`, `getByLabelText`). Fallback: visible text. Last resort: `data-testid`.
-
-## Best Practices
-
- **Critical Functionality**: Prioritize testing business logic and utilities
- **Dependency Mocking**: Global mocks for infra, local mocks for business logic
- **Data Scenarios**: Always test valid, invalid, and edge cases
- **Descriptive Names**: Make test intent clear
- **Organization**: Group related tests in describe
- **Consistency**: Match repo conventions
- **Edge Cases**: Test null, undefined, unexpected values
- **Limit Scope**: 3–5 focused tests per file
- **Use Helpers**: `rqSuccess`, `makeUser`, etc.
- **No Any**: Enforce type safety
-
-## Anti-patterns
-
-❌ Importing RTL directly | ❌ Global fake timers | ❌ Wrapping render in `act(...)` | ❌ Mocking infra locally
-✅ Use harness | ✅ MSW for API | ✅ userEvent + await | ✅ Pin time only for relative-date tests
-
-## Example
-
-```ts
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-import MyComponent from '../MyComponent';
-
-describe('MyComponent', () => {
-  it('renders and interacts', async () => {
-    const user = userEvent.setup({ pointerEventsCheck: 0 });
-    server.use(rest.get('*/api/v1/example', (_req, res, ctx) => res(ctx.status(200), ctx.json({ value: 42 }))));
-    render(<MyComponent />, undefined, { initialRoute: '/foo' });
-    expect(await screen.findByText(/value: 42/i)).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: /refresh/i }));
-    await waitFor(() => expect(screen.getByText(/loading/i)).toBeInTheDocument());
-  });
-});
-```
--- a/frontend/.cursor/rules/jest-typescript-type-safety.mdc
+++ b/frontend/.cursor/rules/jest-typescript-type-safety.mdc
@@ -1,168 +0,0 @@
---
-description: TypeScript type safety for Jest tests - mocks, interfaces, no any
-globs:
-  - "**/*.test.ts"
-  - "**/*.test.tsx"
-  - "**/__tests__/**/*.ts"
-  - "**/__tests__/**/*.tsx"
-alwaysApply: false
---
-
-# TypeScript Type Safety for Jest Tests
-
-**CRITICAL**: All Jest tests MUST be fully type-safe.
-
-## Requirements
-
- Use proper TypeScript interfaces for all mock data
- Type all Jest mock functions with `jest.MockedFunction<T>`
- Use generic types for React components and hooks
- Define proper return types for mock functions
- Use `as const` for literal types when needed
- Avoid `any` type – use proper typing instead
-
-## Mock Function Typing
-
-```ts
-// ✅ GOOD
-const mockFetchUser = jest.fn() as jest.MockedFunction<(id: number) => Promise<ApiResponse<User>>>;
-const mockEventHandler = jest.fn() as jest.MockedFunction<(event: Event) => void>;
-
-// ❌ BAD
-const mockFetchUser = jest.fn() as any;
-```
-
-## Mock Data with Interfaces
-
-```ts
-interface User { id: number; name: string; email: string; }
-interface ApiResponse<T> { data: T; status: number; message: string; }
-
-const mockUser: User = { id: 1, name: 'John Doe', email: 'john@example.com' };
-mockFetchUser.mockResolvedValue({ data: mockUser, status: 200, message: 'Success' });
-```
-
-## Component Props Typing
-
-```ts
-interface ComponentProps { title: string; data: User[]; onUserSelect: (user: User) => void; }
-
-const mockProps: ComponentProps = {
-  title: 'Test',
-  data: [{ id: 1, name: 'John', email: 'john@example.com' }],
-  onUserSelect: jest.fn() as jest.MockedFunction<(user: User) => void>,
-};
-render(<TestComponent {...mockProps} />);
-```
-
-## Hook Testing with Types
-
-```ts
-interface UseUserDataReturn {
-  user: User | null;
-  loading: boolean;
-  error: string | null;
-  refetch: () => void;
-}
-
-describe('useUserData', () => {
-  it('should return user data with proper typing', () => {
-    const mockUser: User = { id: 1, name: 'John', email: 'john@example.com' };
-    mockFetchUser.mockResolvedValue({ data: mockUser, status: 200, message: 'Success' });
-    const { result } = renderHook(() => useUserData(1));
-    expect(result.current.user).toEqual(mockUser);
-    expect(result.current.loading).toBe(false);
-    expect(result.current.error).toBeNull();
-  });
-});
-```
-
-## Generic Mock Typing
-
-```ts
-interface MockApiResponse<T> { data: T; status: number; }
-
-const mockFetchData = jest.fn() as jest.MockedFunction<
-  <T>(endpoint: string) => Promise<MockApiResponse<T>>
->;
-mockFetchData<User>('/users').mockResolvedValue({ data: { id: 1, name: 'John' }, status: 200 });
-```
-
-## React Testing Library with Types
-
-```ts
-type TestComponentProps = ComponentProps<typeof TestComponent>;
-
-const renderTestComponent = (props: Partial<TestComponentProps> = {}): RenderResult => {
-  const defaultProps: TestComponentProps = { title: 'Test', data: [], onSelect: jest.fn(), ...props };
-  return render(<TestComponent {...defaultProps} />);
-};
-```
-
-## Error Handling with Types
-
-```ts
-interface ApiError { message: string; code: number; details?: Record<string, unknown>; }
-const mockApiError: ApiError = { message: 'API Error', code: 500, details: { endpoint: '/users' } };
-mockFetchUser.mockRejectedValue(new Error(JSON.stringify(mockApiError)));
-```
-
-## Global Mock Type Safety
-
-```ts
-// In __mocks__/routerMock.ts
-export const mockUseLocation = (overrides: Partial<Location> = {}): Location => ({
-  pathname: '/traces',
-  search: '',
-  hash: '',
-  state: null,
-  key: 'test-key',
-  ...overrides,
-});
-// In test files: const location = useLocation(); // Properly typed from global mock
-```
-
-## TypeScript Configuration for Jest
-
-```json
-// jest.config.ts
-{
-  "preset": "ts-jest/presets/js-with-ts-esm",
-  "globals": {
-    "ts-jest": {
-      "useESM": true,
-      "isolatedModules": true,
-      "tsconfig": "<rootDir>/tsconfig.jest.json"
-    }
-  },
-  "extensionsToTreatAsEsm": [".ts", ".tsx"],
-  "moduleFileExtensions": ["ts", "tsx", "js", "json"]
-}
-```
-
-```json
-// tsconfig.jest.json
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "types": ["jest", "@testing-library/jest-dom"],
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node"
-  },
-  "include": ["src/**/*", "**/*.test.ts", "**/*.test.tsx", "__mocks__/**/*"]
-}
-```
-
-## Type Safety Checklist
-
- [ ] All mock functions use `jest.MockedFunction<T>`
- [ ] All mock data has proper interfaces
- [ ] No `any` types in test files
- [ ] Generic types are used where appropriate
- [ ] Error types are properly defined
- [ ] Component props are typed
- [ ] Hook return types are defined
- [ ] API response types are defined
- [ ] Global mocks are type-safe
- [ ] Test utilities are properly typed
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -65,14 +65,12 @@
    "@signozhq/sonner": "0.1.0",
    "@signozhq/switch": "0.0.2",
    "@signozhq/table": "0.3.7",
-    "@signozhq/tabs": "0.0.11",
    "@signozhq/toggle-group": "0.0.1",
    "@signozhq/tooltip": "0.0.2",
    "@signozhq/ui": "0.0.5",
    "@tanstack/react-table": "8.21.3",
    "@tanstack/react-virtual": "3.13.22",
    "@uiw/codemirror-theme-copilot": "4.23.11",
-    "@uiw/codemirror-theme-dracula": "4.25.9",
    "@uiw/codemirror-theme-github": "4.24.1",
    "@uiw/react-codemirror": "4.23.10",
    "@uiw/react-md-editor": "3.23.5",
--- a/frontend/public/svgs/dotted-double-line.svg
+++ b/frontend/public/svgs/dotted-double-line.svg
@@ -1,312 +0,0 @@
-<svg width="929" height="8" viewBox="0 0 929 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="2" height="2" rx="1" fill="#242834"/>
-<rect x="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="12" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="18" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="24" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="30" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="36" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="42" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="48" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="54" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="60" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="66" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="72" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="78" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="84" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="90" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="96" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="102" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="108" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="114" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="120" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="126" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="132" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="138" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="144" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="150" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="156" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="162" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="168" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="174" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="180" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="186" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="192" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="198" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="204" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="210" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="216" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="222" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="228" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="234" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="240" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="246" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="252" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="258" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="264" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="270" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="276" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="282" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="288" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="294" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="300" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="306" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="312" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="318" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="324" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="330" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="336" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="342" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="348" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="354" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="360" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="366" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="372" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="378" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="384" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="390" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="396" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="402" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="408" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="414" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="420" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="426" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="432" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="438" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="444" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="450" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="456" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="462" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="468" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="474" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="480" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="486" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="492" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="498" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="504" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="510" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="516" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="522" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="528" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="534" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="540" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="546" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="552" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="558" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="564" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="570" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="576" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="582" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="588" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="594" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="600" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="606" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="612" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="618" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="624" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="630" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="636" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="642" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="648" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="654" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="660" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="666" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="672" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="678" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="684" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="690" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="696" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="702" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="708" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="714" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="720" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="726" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="732" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="738" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="744" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="750" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="756" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="762" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="768" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="774" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="780" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="786" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="792" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="798" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="804" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="810" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="816" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="822" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="828" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="834" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="840" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="846" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="852" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="858" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="864" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="870" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="876" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="882" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="888" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="894" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="900" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="906" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="912" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="918" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="924" width="2" height="2" rx="1" fill="#242834"/>
-<rect y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="6" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="12" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="18" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="24" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="30" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="36" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="42" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="48" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="54" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="60" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="66" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="72" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="78" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="84" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="90" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="96" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="102" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="108" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="114" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="120" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="126" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="132" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="138" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="144" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="150" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="156" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="162" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="168" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="174" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="180" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="186" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="192" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="198" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="204" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="210" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="216" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="222" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="228" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="234" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="240" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="246" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="252" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="258" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="264" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="270" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="276" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="282" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="288" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="294" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="300" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="306" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="312" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="318" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="324" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="330" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="336" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="342" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="348" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="354" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="360" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="366" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="372" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="378" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="384" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="390" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="396" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="402" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="408" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="414" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="420" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="426" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="432" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="438" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="444" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="450" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="456" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="462" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="468" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="474" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="480" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="486" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="492" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="498" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="504" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="510" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="516" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="522" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="528" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="534" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="540" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="546" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="552" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="558" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="564" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="570" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="576" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="582" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="588" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="594" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="600" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="606" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="612" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="618" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="624" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="630" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="636" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="642" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="648" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="654" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="660" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="666" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="672" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="678" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="684" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="690" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="696" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="702" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="708" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="714" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="720" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="726" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="732" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="738" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="744" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="750" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="756" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="762" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="768" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="774" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="780" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="786" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="792" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="798" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="804" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="810" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="816" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="822" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="828" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="834" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="840" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="846" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="852" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="858" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="864" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="870" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="876" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="882" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="888" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="894" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="900" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="906" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="912" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="918" y="6" width="2" height="2" rx="1" fill="#242834"/>
-<rect x="924" y="6" width="2" height="2" rx="1" fill="#242834"/>
-</svg>
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -244,18 +244,12 @@ export const ShortcutsPage = Loadable(
 	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Settings'),
 );

-export const Integrations = Loadable(
+export const InstalledIntegrations = Loadable(
 	() =>
 		import(
 			/* webpackChunkName: "InstalledIntegrations" */ 'pages/IntegrationsModulePage'
 		),
 );
-export const IntegrationsDetailsPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "IntegrationsDetailsPage" */ 'pages/IntegrationsDetailsPage'
-		),
-);

 export const MessagingQueuesMainPage = Loadable(
 	() =>
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -18,8 +18,7 @@ import {
 	ForgotPassword,
 	Home,
 	InfrastructureMonitoring,
-	Integrations,
-	IntegrationsDetailsPage,
+	InstalledIntegrations,
 	LicensePage,
 	ListAllALertsPage,
 	LiveLogs,
@@ -390,17 +389,10 @@ 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: Integrations,
+		component: InstalledIntegrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},
--- a/frontend/src/api/integration/aws/removeAwsIntegrationAccount.ts
+++ b/frontend/src/api/integration/aws/removeAwsIntegrationAccount.ts
--- a/frontend/src/api/generated/services/cloudintegration/index.ts
+++ b/frontend/src/api/generated/services/cloudintegration/index.ts
@@ -24,24 +24,20 @@ import type {
 	AgentCheckInDeprecated200,
 	AgentCheckInDeprecatedPathParameters,
 	AgentCheckInPathParameters,
-	CloudintegrationtypesPostableAccountDTO,
-	CloudintegrationtypesPostableAgentCheckInDTO,
+	CloudintegrationtypesConnectionArtifactRequestDTO,
+	CloudintegrationtypesPostableAgentCheckInRequestDTO,
 	CloudintegrationtypesUpdatableAccountDTO,
 	CloudintegrationtypesUpdatableServiceDTO,
-	CreateAccount201,
+	CreateAccount200,
 	CreateAccountPathParameters,
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
-	GetConnectionCredentials200,
-	GetConnectionCredentialsPathParameters,
 	GetService200,
-	GetServiceParams,
 	GetServicePathParameters,
 	ListAccounts200,
 	ListAccountsPathParameters,
 	ListServicesMetadata200,
-	ListServicesMetadataParams,
 	ListServicesMetadataPathParameters,
 	RenderErrorResponseDTO,
 	UpdateAccountPathParameters,
@@ -55,14 +51,14 @@ import type {
 */
 export const agentCheckInDeprecated = (
 	{ cloudProvider }: AgentCheckInDeprecatedPathParameters,
-	cloudintegrationtypesPostableAgentCheckInDTO: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>,
+	cloudintegrationtypesPostableAgentCheckInRequestDTO: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<AgentCheckInDeprecated200>({
 		url: `/api/v1/cloud-integrations/${cloudProvider}/agent-check-in`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesPostableAgentCheckInDTO,
+		data: cloudintegrationtypesPostableAgentCheckInRequestDTO,
 		signal,
 	});
 };
@@ -76,7 +72,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 		TError,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 		},
 		TContext
 	>;
@@ -85,7 +81,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 	TError,
 	{
 		pathParams: AgentCheckInDeprecatedPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 	},
 	TContext
 > => {
@@ -102,7 +98,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 		Awaited<ReturnType<typeof agentCheckInDeprecated>>,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -116,7 +112,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 export type AgentCheckInDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckInDeprecated>>
 >;
-export type AgentCheckInDeprecatedMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+export type AgentCheckInDeprecatedMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 export type AgentCheckInDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -132,7 +128,7 @@ export const useAgentCheckInDeprecated = <
 		TError,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 		},
 		TContext
 	>;
@@ -141,7 +137,7 @@ export const useAgentCheckInDeprecated = <
 	TError,
 	{
 		pathParams: AgentCheckInDeprecatedPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
 	},
 	TContext
 > => {
@@ -259,14 +255,14 @@ export const invalidateListAccounts = async (
 */
 export const createAccount = (
 	{ cloudProvider }: CreateAccountPathParameters,
-	cloudintegrationtypesPostableAccountDTO: BodyType<CloudintegrationtypesPostableAccountDTO>,
+	cloudintegrationtypesConnectionArtifactRequestDTO: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<CreateAccount201>({
+	return GeneratedAPIInstance<CreateAccount200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesPostableAccountDTO,
+		data: cloudintegrationtypesConnectionArtifactRequestDTO,
 		signal,
 	});
 };
@@ -280,7 +276,7 @@ export const getCreateAccountMutationOptions = <
 		TError,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
+			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 		},
 		TContext
 	>;
@@ -289,7 +285,7 @@ export const getCreateAccountMutationOptions = <
 	TError,
 	{
 		pathParams: CreateAccountPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAccountDTO>;
+		data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 	},
 	TContext
 > => {
@@ -306,7 +302,7 @@ export const getCreateAccountMutationOptions = <
 		Awaited<ReturnType<typeof createAccount>>,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
+			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -320,7 +316,7 @@ export const getCreateAccountMutationOptions = <
 export type CreateAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createAccount>>
 >;
-export type CreateAccountMutationBody = BodyType<CloudintegrationtypesPostableAccountDTO>;
+export type CreateAccountMutationBody = BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 export type CreateAccountMutationError = ErrorType<RenderErrorResponseDTO>;

 /**
@@ -335,7 +331,7 @@ export const useCreateAccount = <
 		TError,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
+			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 		},
 		TContext
 	>;
@@ -344,7 +340,7 @@ export const useCreateAccount = <
 	TError,
 	{
 		pathParams: CreateAccountPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAccountDTO>;
+		data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
 	},
 	TContext
 > => {
@@ -632,16 +628,330 @@ export const useUpdateAccount = <

 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint is called by the deployed agent to check in
+ * @summary Agent check-in
+ */
+export const agentCheckIn = (
+	{ cloudProvider }: AgentCheckInPathParameters,
+	cloudintegrationtypesPostableAgentCheckInRequestDTO: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<AgentCheckIn200>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/check_in`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: cloudintegrationtypesPostableAgentCheckInRequestDTO,
+		signal,
+	});
+};
+
+export const getAgentCheckInMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof agentCheckIn>>,
+		TError,
+		{
+			pathParams: AgentCheckInPathParameters;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof agentCheckIn>>,
+	TError,
+	{
+		pathParams: AgentCheckInPathParameters;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['agentCheckIn'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+		  'mutationKey' in options.mutation &&
+		  options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof agentCheckIn>>,
+		{
+			pathParams: AgentCheckInPathParameters;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return agentCheckIn(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type AgentCheckInMutationResult = NonNullable<
+	Awaited<ReturnType<typeof agentCheckIn>>
+>;
+export type AgentCheckInMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+export type AgentCheckInMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Agent check-in
+ */
+export const useAgentCheckIn = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof agentCheckIn>>,
+		TError,
+		{
+			pathParams: AgentCheckInPathParameters;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof agentCheckIn>>,
+	TError,
+	{
+		pathParams: AgentCheckInPathParameters;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getAgentCheckInMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint lists the services metadata for the specified cloud provider
+ * @summary List services metadata
+ */
+export const listServicesMetadata = (
+	{ cloudProvider }: ListServicesMetadataPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListServicesMetadata200>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/services`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListServicesMetadataQueryKey = ({
+	cloudProvider,
+}: ListServicesMetadataPathParameters) => {
+	return [`/api/v1/cloud_integrations/${cloudProvider}/services`] as const;
+};
+
+export const getListServicesMetadataQueryOptions = <
+	TData = Awaited<ReturnType<typeof listServicesMetadata>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ cloudProvider }: ListServicesMetadataPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listServicesMetadata>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getListServicesMetadataQueryKey({ cloudProvider });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listServicesMetadata>>
+	> = ({ signal }) => listServicesMetadata({ cloudProvider }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!cloudProvider,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof listServicesMetadata>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListServicesMetadataQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listServicesMetadata>>
+>;
+export type ListServicesMetadataQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List services metadata
+ */
+
+export function useListServicesMetadata<
+	TData = Awaited<ReturnType<typeof listServicesMetadata>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ cloudProvider }: ListServicesMetadataPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listServicesMetadata>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListServicesMetadataQueryOptions(
+		{ cloudProvider },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary List services metadata
+ */
+export const invalidateListServicesMetadata = async (
+	queryClient: QueryClient,
+	{ cloudProvider }: ListServicesMetadataPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListServicesMetadataQueryKey({ cloudProvider }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint gets a service for the specified cloud provider
+ * @summary Get service
+ */
+export const getService = (
+	{ cloudProvider, serviceId }: GetServicePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetService200>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetServiceQueryKey = ({
+	cloudProvider,
+	serviceId,
+}: GetServicePathParameters) => {
+	return [
+		`/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
+	] as const;
+};
+
+export const getGetServiceQueryOptions = <
+	TData = Awaited<ReturnType<typeof getService>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ cloudProvider, serviceId }: GetServicePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getService>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetServiceQueryKey({ cloudProvider, serviceId });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getService>>> = ({
+		signal,
+	}) => getService({ cloudProvider, serviceId }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!(cloudProvider && serviceId),
+		...queryOptions,
+	} as UseQueryOptions<Awaited<ReturnType<typeof getService>>, TError, TData> & {
+		queryKey: QueryKey;
+	};
+};
+
+export type GetServiceQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getService>>
+>;
+export type GetServiceQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get service
+ */
+
+export function useGetService<
+	TData = Awaited<ReturnType<typeof getService>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ cloudProvider, serviceId }: GetServicePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getService>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetServiceQueryOptions(
+		{ cloudProvider, serviceId },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get service
+ */
+export const invalidateGetService = async (
+	queryClient: QueryClient,
+	{ cloudProvider, serviceId }: GetServicePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetServiceQueryKey({ cloudProvider, serviceId }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
 * This endpoint updates a service for the specified cloud provider
 * @summary Update service
 */
 export const updateService = (
-	{ cloudProvider, id, serviceId }: UpdateServicePathParameters,
+	{ cloudProvider, serviceId }: UpdateServicePathParameters,
 	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
 ) => {
 	return GeneratedAPIInstance<void>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
 		data: cloudintegrationtypesUpdatableServiceDTO,
@@ -729,443 +1039,3 @@ export const useUpdateService = <

 	return useMutation(mutationOptions);
 };
-/**
- * This endpoint is called by the deployed agent to check in
- * @summary Agent check-in
- */
-export const agentCheckIn = (
-	{ cloudProvider }: AgentCheckInPathParameters,
-	cloudintegrationtypesPostableAgentCheckInDTO: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<AgentCheckIn200>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/check_in`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesPostableAgentCheckInDTO,
-		signal,
-	});
-};
-
-export const getAgentCheckInMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof agentCheckIn>>,
-		TError,
-		{
-			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof agentCheckIn>>,
-	TError,
-	{
-		pathParams: AgentCheckInPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['agentCheckIn'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof agentCheckIn>>,
-		{
-			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return agentCheckIn(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type AgentCheckInMutationResult = NonNullable<
-	Awaited<ReturnType<typeof agentCheckIn>>
->;
-export type AgentCheckInMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
-export type AgentCheckInMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Agent check-in
- */
-export const useAgentCheckIn = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof agentCheckIn>>,
-		TError,
-		{
-			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof agentCheckIn>>,
-	TError,
-	{
-		pathParams: AgentCheckInPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getAgentCheckInMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint retrieves the connection credentials required for integration
- * @summary Get connection credentials
- */
-export const getConnectionCredentials = (
-	{ cloudProvider }: GetConnectionCredentialsPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetConnectionCredentials200>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/credentials`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetConnectionCredentialsQueryKey = ({
-	cloudProvider,
-}: GetConnectionCredentialsPathParameters) => {
-	return [`/api/v1/cloud_integrations/${cloudProvider}/credentials`] as const;
-};
-
-export const getGetConnectionCredentialsQueryOptions = <
-	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ cloudProvider }: GetConnectionCredentialsPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getConnectionCredentials>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getGetConnectionCredentialsQueryKey({ cloudProvider });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getConnectionCredentials>>
-	> = ({ signal }) => getConnectionCredentials({ cloudProvider }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!cloudProvider,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getConnectionCredentials>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetConnectionCredentialsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getConnectionCredentials>>
->;
-export type GetConnectionCredentialsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get connection credentials
- */
-
-export function useGetConnectionCredentials<
-	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ cloudProvider }: GetConnectionCredentialsPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getConnectionCredentials>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetConnectionCredentialsQueryOptions(
-		{ cloudProvider },
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get connection credentials
- */
-export const invalidateGetConnectionCredentials = async (
-	queryClient: QueryClient,
-	{ cloudProvider }: GetConnectionCredentialsPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetConnectionCredentialsQueryKey({ cloudProvider }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint lists the services metadata for the specified cloud provider
- * @summary List services metadata
- */
-export const listServicesMetadata = (
-	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListServicesMetadata200>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/services`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListServicesMetadataQueryKey = (
-	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
-) => {
-	return [
-		`/api/v1/cloud_integrations/${cloudProvider}/services`,
-		...(params ? [params] : []),
-	] as const;
-};
-
-export const getListServicesMetadataQueryOptions = <
-	TData = Awaited<ReturnType<typeof listServicesMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listServicesMetadata>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getListServicesMetadataQueryKey({ cloudProvider }, params);
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof listServicesMetadata>>
-	> = ({ signal }) => listServicesMetadata({ cloudProvider }, params, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!cloudProvider,
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof listServicesMetadata>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListServicesMetadataQueryResult = NonNullable<
-	Awaited<ReturnType<typeof listServicesMetadata>>
->;
-export type ListServicesMetadataQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List services metadata
- */
-
-export function useListServicesMetadata<
-	TData = Awaited<ReturnType<typeof listServicesMetadata>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listServicesMetadata>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListServicesMetadataQueryOptions(
-		{ cloudProvider },
-		params,
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary List services metadata
- */
-export const invalidateListServicesMetadata = async (
-	queryClient: QueryClient,
-	{ cloudProvider }: ListServicesMetadataPathParameters,
-	params?: ListServicesMetadataParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListServicesMetadataQueryKey({ cloudProvider }, params) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint gets a service for the specified cloud provider
- * @summary Get service
- */
-export const getService = (
-	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetService200>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getGetServiceQueryKey = (
-	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
-) => {
-	return [
-		`/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
-		...(params ? [params] : []),
-	] as const;
-};
-
-export const getGetServiceQueryOptions = <
-	TData = Awaited<ReturnType<typeof getService>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getService>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getGetServiceQueryKey({ cloudProvider, serviceId }, params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getService>>> = ({
-		signal,
-	}) => getService({ cloudProvider, serviceId }, params, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!(cloudProvider && serviceId),
-		...queryOptions,
-	} as UseQueryOptions<Awaited<ReturnType<typeof getService>>, TError, TData> & {
-		queryKey: QueryKey;
-	};
-};
-
-export type GetServiceQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getService>>
->;
-export type GetServiceQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get service
- */
-
-export function useGetService<
-	TData = Awaited<ReturnType<typeof getService>>,
-	TError = ErrorType<RenderErrorResponseDTO>
->(
-	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getService>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetServiceQueryOptions(
-		{ cloudProvider, serviceId },
-		params,
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get service
- */
-export const invalidateGetService = async (
-	queryClient: QueryClient,
-	{ cloudProvider, serviceId }: GetServicePathParameters,
-	params?: GetServiceParams,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetServiceQueryKey({ cloudProvider, serviceId }, params) },
-		options,
-	);
-
-	return queryClient;
-};
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -512,58 +512,27 @@ export interface CloudintegrationtypesAWSAccountConfigDTO {
 	regions: string[];
 }

-export interface CloudintegrationtypesAWSCloudWatchLogsSubscriptionDTO {
-	/**
-	 * @type string
-	 */
-	filterPattern: string;
-	/**
-	 * @type string
-	 */
-	logGroupNamePrefix: string;
-}
+export type CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets = {
+	[key: string]: string[];
+};

-export interface CloudintegrationtypesAWSCloudWatchMetricStreamFilterDTO {
+export interface CloudintegrationtypesAWSCollectionStrategyDTO {
+	aws_logs?: CloudintegrationtypesAWSLogsStrategyDTO;
+	aws_metrics?: CloudintegrationtypesAWSMetricsStrategyDTO;
 	/**
-	 * @type array
+	 * @type object
 	 */
-	metricNames?: string[];
-	/**
-	 * @type string
-	 */
-	namespace: string;
+	s3_buckets?: CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets;
 }

 export interface CloudintegrationtypesAWSConnectionArtifactDTO {
 	/**
 	 * @type string
 	 */
-	connectionUrl: string;
+	connectionURL: string;
 }

-export interface CloudintegrationtypesAWSIntegrationConfigDTO {
-	/**
-	 * @type array
-	 */
-	enabledRegions: string[];
-	telemetryCollectionStrategy: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
-}
-
-export interface CloudintegrationtypesAWSLogsCollectionStrategyDTO {
-	/**
-	 * @type array
-	 */
-	subscriptions: CloudintegrationtypesAWSCloudWatchLogsSubscriptionDTO[];
-}
-
-export interface CloudintegrationtypesAWSMetricsCollectionStrategyDTO {
-	/**
-	 * @type array
-	 */
-	streamFilters: CloudintegrationtypesAWSCloudWatchMetricStreamFilterDTO[];
-}
-
-export interface CloudintegrationtypesAWSPostableAccountConfigDTO {
+export interface CloudintegrationtypesAWSConnectionArtifactRequestDTO {
 	/**
 	 * @type string
 	 */
@@ -574,6 +543,56 @@ export interface CloudintegrationtypesAWSPostableAccountConfigDTO {
 	regions: string[];
 }

+export interface CloudintegrationtypesAWSIntegrationConfigDTO {
+	/**
+	 * @type array
+	 */
+	enabledRegions: string[];
+	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
+}
+
+export type CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
+	/**
+	 * @type string
+	 */
+	filter_pattern?: string;
+	/**
+	 * @type string
+	 */
+	log_group_name_prefix?: string;
+};
+
+export interface CloudintegrationtypesAWSLogsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_logs_subscriptions?:
+		| CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
+		| null;
+}
+
+export type CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
+	/**
+	 * @type array
+	 */
+	MetricNames?: string[];
+	/**
+	 * @type string
+	 */
+	Namespace?: string;
+};
+
+export interface CloudintegrationtypesAWSMetricsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_metric_stream_filters?:
+		| CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
+		| null;
+}
+
 export interface CloudintegrationtypesAWSServiceConfigDTO {
 	logs?: CloudintegrationtypesAWSServiceLogsConfigDTO;
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
@@ -591,7 +610,7 @@ export interface CloudintegrationtypesAWSServiceLogsConfigDTO {
 	/**
 	 * @type object
 	 */
-	s3Buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
+	s3_buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
 }

 export interface CloudintegrationtypesAWSServiceMetricsConfigDTO {
@@ -601,19 +620,6 @@ export interface CloudintegrationtypesAWSServiceMetricsConfigDTO {
 	enabled?: boolean;
 }

-export type CloudintegrationtypesAWSTelemetryCollectionStrategyDTOS3Buckets = {
-	[key: string]: string[];
-};
-
-export interface CloudintegrationtypesAWSTelemetryCollectionStrategyDTO {
-	logs?: CloudintegrationtypesAWSLogsCollectionStrategyDTO;
-	metrics?: CloudintegrationtypesAWSMetricsCollectionStrategyDTO;
-	/**
-	 * @type object
-	 */
-	s3Buckets?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTOS3Buckets;
-}
-
 export interface CloudintegrationtypesAccountDTO {
 	agentReport: CloudintegrationtypesAgentReportDTO;
 	config: CloudintegrationtypesAccountConfigDTO;
@@ -687,32 +693,6 @@ export interface CloudintegrationtypesAssetsDTO {
 	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
 }

-/**
- * @nullable
- */
-export type CloudintegrationtypesCloudIntegrationServiceDTO = {
-	/**
-	 * @type string
-	 */
-	cloudIntegrationId?: string;
-	config?: CloudintegrationtypesServiceConfigDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: Date;
-	/**
-	 * @type string
-	 */
-	id: string;
-	type?: CloudintegrationtypesServiceIDDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: Date;
-} | null;
-
 export interface CloudintegrationtypesCollectedLogAttributeDTO {
 	/**
 	 * @type string
@@ -747,27 +727,16 @@ export interface CloudintegrationtypesCollectedMetricDTO {
 	unit?: string;
 }

+export interface CloudintegrationtypesCollectionStrategyDTO {
+	aws: CloudintegrationtypesAWSCollectionStrategyDTO;
+}
+
 export interface CloudintegrationtypesConnectionArtifactDTO {
 	aws: CloudintegrationtypesAWSConnectionArtifactDTO;
 }

-export interface CloudintegrationtypesCredentialsDTO {
-	/**
-	 * @type string
-	 */
-	ingestionKey: string;
-	/**
-	 * @type string
-	 */
-	ingestionUrl: string;
-	/**
-	 * @type string
-	 */
-	sigNozApiKey: string;
-	/**
-	 * @type string
-	 */
-	sigNozApiUrl: string;
+export interface CloudintegrationtypesConnectionArtifactRequestDTO {
+	aws: CloudintegrationtypesAWSConnectionArtifactRequestDTO;
 }

 export interface CloudintegrationtypesDashboardDTO {
@@ -799,7 +768,7 @@ export interface CloudintegrationtypesDataCollectedDTO {
 	metrics?: CloudintegrationtypesCollectedMetricDTO[] | null;
 }

-export interface CloudintegrationtypesGettableAccountWithConnectionArtifactDTO {
+export interface CloudintegrationtypesGettableAccountWithArtifactDTO {
 	connectionArtifact: CloudintegrationtypesConnectionArtifactDTO;
 	/**
 	 * @type string
@@ -814,7 +783,7 @@ export interface CloudintegrationtypesGettableAccountsDTO {
 	accounts: CloudintegrationtypesAccountDTO[];
 }

-export interface CloudintegrationtypesGettableAgentCheckInDTO {
+export interface CloudintegrationtypesGettableAgentCheckInResponseDTO {
 	/**
 	 * @type string
 	 */
@@ -862,85 +831,17 @@ export type CloudintegrationtypesIntegrationConfigDTO = {
 	 * @type array
 	 */
 	enabled_regions: string[];
-	telemetry: CloudintegrationtypesOldAWSCollectionStrategyDTO;
+	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
 } | null;

-export type CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets = {
-	[key: string]: string[];
-};
-
-export interface CloudintegrationtypesOldAWSCollectionStrategyDTO {
-	aws_logs?: CloudintegrationtypesOldAWSLogsStrategyDTO;
-	aws_metrics?: CloudintegrationtypesOldAWSMetricsStrategyDTO;
-	/**
-	 * @type string
-	 */
-	provider?: string;
-	/**
-	 * @type object
-	 */
-	s3_buckets?: CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets;
-}
-
-export type CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
-	/**
-	 * @type string
-	 */
-	filter_pattern?: string;
-	/**
-	 * @type string
-	 */
-	log_group_name_prefix?: string;
-};
-
-export interface CloudintegrationtypesOldAWSLogsStrategyDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	cloudwatch_logs_subscriptions?:
-		| CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
-		| null;
-}
-
-export type CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
-	/**
-	 * @type array
-	 */
-	MetricNames?: string[];
-	/**
-	 * @type string
-	 */
-	Namespace?: string;
-};
-
-export interface CloudintegrationtypesOldAWSMetricsStrategyDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	cloudwatch_metric_stream_filters?:
-		| CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
-		| null;
-}
-
-export interface CloudintegrationtypesPostableAccountDTO {
-	config: CloudintegrationtypesPostableAccountConfigDTO;
-	credentials: CloudintegrationtypesCredentialsDTO;
-}
-
-export interface CloudintegrationtypesPostableAccountConfigDTO {
-	aws: CloudintegrationtypesAWSPostableAccountConfigDTO;
-}
-
 /**
 * @nullable
 */
-export type CloudintegrationtypesPostableAgentCheckInDTOData = {
+export type CloudintegrationtypesPostableAgentCheckInRequestDTOData = {
 	[key: string]: unknown;
 } | null;

-export interface CloudintegrationtypesPostableAgentCheckInDTO {
+export interface CloudintegrationtypesPostableAgentCheckInRequestDTO {
 	/**
 	 * @type string
 	 */
@@ -957,7 +858,7 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	 * @type object
 	 * @nullable true
 	 */
-	data: CloudintegrationtypesPostableAgentCheckInDTOData;
+	data: CloudintegrationtypesPostableAgentCheckInRequestDTOData;
 	/**
 	 * @type string
 	 */
@@ -970,7 +871,6 @@ export interface CloudintegrationtypesProviderIntegrationConfigDTO {

 export interface CloudintegrationtypesServiceDTO {
 	assets: CloudintegrationtypesAssetsDTO;
-	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
 	 * @type string
@@ -984,8 +884,9 @@ export interface CloudintegrationtypesServiceDTO {
 	 * @type string
 	 */
 	overview: string;
-	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
-	telemetryCollectionStrategy: CloudintegrationtypesTelemetryCollectionStrategyDTO;
+	serviceConfig?: CloudintegrationtypesServiceConfigDTO;
+	supported_signals: CloudintegrationtypesSupportedSignalsDTO;
+	telemetryCollectionStrategy: CloudintegrationtypesCollectionStrategyDTO;
 	/**
 	 * @type string
 	 */
@@ -996,21 +897,6 @@ export interface CloudintegrationtypesServiceConfigDTO {
 	aws: CloudintegrationtypesAWSServiceConfigDTO;
 }

-export enum CloudintegrationtypesServiceIDDTO {
-	alb = 'alb',
-	'api-gateway' = 'api-gateway',
-	dynamodb = 'dynamodb',
-	ec2 = 'ec2',
-	ecs = 'ecs',
-	eks = 'eks',
-	elasticache = 'elasticache',
-	lambda = 'lambda',
-	msk = 'msk',
-	rds = 'rds',
-	s3sync = 's3sync',
-	sns = 'sns',
-	sqs = 'sqs',
-}
 export interface CloudintegrationtypesServiceMetadataDTO {
 	/**
 	 * @type boolean
@@ -1041,10 +927,6 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 	metrics?: boolean;
 }

-export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
-	aws: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
-}
-
 export interface CloudintegrationtypesUpdatableAccountDTO {
 	config: CloudintegrationtypesAccountConfigDTO;
 }
@@ -3568,7 +3450,7 @@ export type AgentCheckInDeprecatedPathParameters = {
 	cloudProvider: string;
 };
 export type AgentCheckInDeprecated200 = {
-	data: CloudintegrationtypesGettableAgentCheckInDTO;
+	data: CloudintegrationtypesGettableAgentCheckInResponseDTO;
 	/**
 	 * @type string
 	 */
@@ -3589,8 +3471,8 @@ export type ListAccounts200 = {
 export type CreateAccountPathParameters = {
 	cloudProvider: string;
 };
-export type CreateAccount201 = {
-	data: CloudintegrationtypesGettableAccountWithConnectionArtifactDTO;
+export type CreateAccount200 = {
+	data: CloudintegrationtypesGettableAccountWithArtifactDTO;
 	/**
 	 * @type string
 	 */
@@ -3617,27 +3499,11 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: string;
 };
-export type UpdateServicePathParameters = {
-	cloudProvider: string;
-	id: string;
-	serviceId: string;
-};
 export type AgentCheckInPathParameters = {
 	cloudProvider: string;
 };
 export type AgentCheckIn200 = {
-	data: CloudintegrationtypesGettableAgentCheckInDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type GetConnectionCredentialsPathParameters = {
-	cloudProvider: string;
-};
-export type GetConnectionCredentials200 = {
-	data: CloudintegrationtypesCredentialsDTO;
+	data: CloudintegrationtypesGettableAgentCheckInResponseDTO;
 	/**
 	 * @type string
 	 */
@@ -3647,14 +3513,6 @@ export type GetConnectionCredentials200 = {
 export type ListServicesMetadataPathParameters = {
 	cloudProvider: string;
 };
-export type ListServicesMetadataParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	cloud_integration_id?: string;
-};
-
 export type ListServicesMetadata200 = {
 	data: CloudintegrationtypesGettableServicesMetadataDTO;
 	/**
@@ -3667,14 +3525,6 @@ export type GetServicePathParameters = {
 	cloudProvider: string;
 	serviceId: string;
 };
-export type GetServiceParams = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	cloud_integration_id?: string;
-};
-
 export type GetService200 = {
 	data: CloudintegrationtypesServiceDTO;
 	/**
@@ -3683,6 +3533,10 @@ export type GetService200 = {
 	status: string;
 };

+export type UpdateServicePathParameters = {
+	cloudProvider: string;
+	serviceId: string;
+};
 export type CreateSessionByGoogleCallback303 = {
 	data: AuthtypesGettableTokenDTO;
 	/**
--- a/frontend/src/api/integration/aws/index.ts
+++ b/frontend/src/api/integration/aws/index.ts
@@ -5,10 +5,11 @@ import {
 	ServiceData,
 	UpdateServiceConfigPayload,
 	UpdateServiceConfigResponse,
-} from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
+} from 'container/CloudIntegrationPage/ServicesSection/types';
 import {
+	AccountConfigPayload,
 	AccountConfigResponse,
-	AWSAccountConfigPayload,
+	ConnectionParams,
 	ConnectionUrlResponse,
 } from 'types/api/integrations/aws';

@@ -59,7 +60,7 @@ export const generateConnectionUrl = async (params: {

 export const updateAccountConfig = async (
 	accountId: string,
-	payload: AWSAccountConfigPayload,
+	payload: AccountConfigPayload,
 ): Promise<AccountConfigResponse> => {
 	const response = await axios.post<AccountConfigResponse>(
 		`/cloud-integrations/aws/accounts/${accountId}/config`,
@@ -78,3 +79,10 @@ export const updateServiceConfig = async (
 	);
 	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;
+};
--- a/frontend/src/api/integration/index.ts
+++ b/frontend/src/api/integration/index.ts
@@ -1,113 +0,0 @@
-import axios from 'api';
-import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
-import {
-	CloudAccount,
-	ServiceData,
-} from 'container/Integrations/CloudIntegration/AmazonWebServices/types';
-import {
-	AzureCloudAccountConfig,
-	AzureService,
-	AzureServiceConfigPayload,
-} from 'container/Integrations/types';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	AccountConfigResponse,
-	AWSAccountConfigPayload,
-} from 'types/api/integrations/aws';
-import {
-	AzureAccountConfig,
-	IAzureDeploymentCommands,
-} from 'types/api/integrations/types';
-
-export const getCloudIntegrationAccounts = async (
-	cloudServiceId: string,
-): Promise<CloudAccount[]> => {
-	const response = await axios.get(
-		`/cloud-integrations/${cloudServiceId}/accounts`,
-	);
-
-	return response.data.data.accounts;
-};
-
-export const getCloudIntegrationServices = async (
-	cloudServiceId: string,
-	cloudAccountId?: string,
-): Promise<AzureService[]> => {
-	const params = cloudAccountId
-		? { cloud_account_id: cloudAccountId }
-		: undefined;
-
-	const response = await axios.get(
-		`/cloud-integrations/${cloudServiceId}/services`,
-		{
-			params,
-		},
-	);
-
-	return response.data.data.services;
-};
-
-export const getCloudIntegrationServiceDetails = async (
-	cloudServiceId: string,
-	serviceId: string,
-	cloudAccountId?: string,
-): Promise<ServiceData> => {
-	const params = cloudAccountId
-		? { cloud_account_id: cloudAccountId }
-		: undefined;
-	const response = await axios.get(
-		`/cloud-integrations/${cloudServiceId}/services/${serviceId}`,
-		{ params },
-	);
-	return response.data.data;
-};
-
-export const updateAccountConfig = async (
-	cloudServiceId: string,
-	accountId: string,
-	payload: AWSAccountConfigPayload | AzureAccountConfig,
-): Promise<AccountConfigResponse> => {
-	const response = await axios.post<AccountConfigResponse>(
-		`/cloud-integrations/${cloudServiceId}/accounts/${accountId}/config`,
-		payload,
-	);
-	return response.data;
-};
-
-export const updateServiceConfig = async (
-	cloudServiceId: string,
-	serviceId: string,
-	payload: AzureServiceConfigPayload,
-): Promise<AzureServiceConfigPayload> => {
-	const response = await axios.post<AzureServiceConfigPayload>(
-		`/cloud-integrations/${cloudServiceId}/services/${serviceId}/config`,
-		payload,
-	);
-	return response.data;
-};
-
-export const getAzureDeploymentCommands = async (params: {
-	agent_config: CloudintegrationtypesCredentialsDTO;
-	account_config: AzureCloudAccountConfig;
-}): Promise<IAzureDeploymentCommands> => {
-	const response = await axios.post(
-		`/cloud-integrations/azure/accounts/generate-connection-url`,
-		params,
-	);
-
-	return response.data.data;
-};
-
-export const removeIntegrationAccount = async ({
-	cloudServiceId,
-	accountId,
-}: {
-	cloudServiceId: string;
-	accountId: string;
-}): Promise<SuccessResponse<Record<string, never>> | ErrorResponse> => {
-	const response = await axios.post(
-		`/cloud-integrations/${cloudServiceId}/accounts/${accountId}/disconnect`,
-	);
-
-	return response.data;
-};
--- a/frontend/src/auto-import-registry.d.ts
+++ b/frontend/src/auto-import-registry.d.ts
@@ -28,7 +28,6 @@ import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/switch';
 import '@signozhq/table';
-import '@signozhq/tabs';
 import '@signozhq/toggle-group';
 import '@signozhq/tooltip';
 import '@signozhq/ui';
--- a/frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/CloudIntegrationAccounts.styles.scss
+++ b/frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/CloudIntegrationAccounts.styles.scss
@@ -1,109 +0,0 @@
-.cloud-integration-accounts {
-	padding: 0px 16px;
-
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-
-	.selected-cloud-integration-account-section {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-
-		.selected-cloud-integration-account-section-header {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-
-			border-radius: 4px;
-			border: 1px solid var(--l3-background);
-			background: var(--l1-background);
-
-			.selected-cloud-integration-account-section-header-title {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				gap: 8px;
-
-				.selected-cloud-integration-account-status {
-					display: flex;
-					border-right: 1px solid var(--l3-background);
-					border-radius: none;
-					width: 32px;
-					height: 32px;
-
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					border-radius: 4px;
-					line-height: 32px;
-				}
-
-				.selected-cloud-integration-account-section-header-title-text {
-					display: flex;
-					flex-direction: row;
-					align-items: center;
-					gap: 16px;
-
-					.azure-cloud-account-selector {
-						.ant-select {
-							background-color: transparent !important;
-							border: none !important;
-							box-shadow: none !important;
-
-							.ant-select-selector {
-								background: transparent !important;
-								border: none !important;
-								box-shadow: none !important;
-							}
-						}
-					}
-				}
-			}
-
-			.selected-cloud-integration-account-settings {
-				display: flex;
-				flex-direction: row;
-				gap: 16px;
-				line-height: 32px;
-				margin-right: 8px;
-				cursor: pointer;
-			}
-		}
-
-		.account-settings-container {
-			display: flex;
-			flex-direction: column;
-			gap: 16px;
-		}
-
-		.add-new-cloud-integration-account-button {
-			display: flex;
-			flex-direction: row;
-			gap: 16px;
-			line-height: 32px;
-			margin-right: 8px;
-			cursor: pointer;
-		}
-	}
-}
-
-.cloud-integration-accounts-drawer-content {
-	height: 100%;
-	max-height: calc(100vh - 120px); // Account for drawer header and padding
-	overflow-y: auto;
-	overflow-x: hidden;
-	display: flex;
-	flex-direction: column;
-
-	&::-webkit-scrollbar {
-		width: 0.2rem;
-	}
-
-	.edit-account-content,
-	.add-new-account-content {
-		flex: 1;
-		min-height: 0; // Allows flex children to shrink below content size
-	}
-}
--- a/frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/CloudIntegrationAccounts.tsx
+++ b/frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/CloudIntegrationAccounts.tsx
@@ -1,169 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Color } from '@signozhq/design-tokens';
-import { DrawerWrapper } from '@signozhq/drawer';
-import { Select } from 'antd';
-import {
-	GetConnectionCredentialsQueryResult,
-	useGetConnectionCredentials,
-} from 'api/generated/services/cloudintegration';
-import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
-import ConnectNewAzureAccount from 'container/Integrations/CloudIntegration/AzureServices/AzureAccount/ConnectNewAzureAccount';
-import EditAzureAccount from 'container/Integrations/CloudIntegration/AzureServices/AzureAccount/EditAzureAccount';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
-import { CloudAccount } from 'container/Integrations/types';
-import { Dot, PencilLine, Plus } from 'lucide-react';
-
-import './CloudIntegrationAccounts.styles.scss';
-
-export type DrawerMode = 'edit' | 'add';
-
-export default function CloudIntegrationAccounts({
-	selectedAccount,
-	accounts,
-	isLoadingAccounts,
-	onSelectAccount,
-	refetchAccounts,
-}: {
-	selectedAccount: CloudAccount | null;
-	accounts: CloudAccount[];
-	isLoadingAccounts: boolean;
-	onSelectAccount: (account: CloudAccount) => void;
-	refetchAccounts: () => void;
-}): JSX.Element {
-	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-	const [mode, setMode] = useState<DrawerMode>('add');
-
-	const handleDrawerOpenChange = (open: boolean): void => {
-		setIsDrawerOpen(open);
-	};
-
-	const handleEditAccount = (): void => {
-		setMode('edit');
-		setIsDrawerOpen(true);
-	};
-
-	const handleAddNewAccount = (): void => {
-		setMode('add');
-		setIsDrawerOpen(true);
-	};
-
-	const {
-		data: connectionParams,
-		isLoading: isConnectionParamsLoading,
-	} = useGetConnectionCredentials<GetConnectionCredentialsQueryResult>({
-		cloudProvider: INTEGRATION_TYPES.AZURE,
-	});
-
-	const handleSelectAccount = (value: string): void => {
-		const account = accounts.find(
-			(account) => account.cloud_account_id === value,
-		);
-
-		if (account) {
-			onSelectAccount(account);
-		}
-	};
-
-	const handleAccountConnected = (): void => {
-		refetchAccounts();
-	};
-
-	const handleAccountUpdated = (): void => {
-		refetchAccounts();
-	};
-
-	const renderDrawerContent = (): JSX.Element => {
-		return (
-			<div className="cloud-integration-accounts-drawer-content">
-				{mode === 'edit' ? (
-					<div className="edit-account-content">
-						<EditAzureAccount
-							selectedAccount={selectedAccount as CloudAccount}
-							connectionParams={
-								connectionParams?.data as CloudintegrationtypesCredentialsDTO
-							}
-							isConnectionParamsLoading={isConnectionParamsLoading}
-							onAccountUpdated={handleAccountUpdated}
-						/>
-					</div>
-				) : (
-					<div className="add-new-account-content">
-						<ConnectNewAzureAccount
-							connectionParams={
-								connectionParams?.data as CloudintegrationtypesCredentialsDTO
-							}
-							isConnectionParamsLoading={isConnectionParamsLoading}
-							onAccountConnected={handleAccountConnected}
-						/>
-					</div>
-				)}
-			</div>
-		);
-	};
-
-	return (
-		<div className="cloud-integration-accounts">
-			{selectedAccount && (
-				<div className="selected-cloud-integration-account-section">
-					<div className="selected-cloud-integration-account-section-header">
-						<div className="selected-cloud-integration-account-section-header-title">
-							<div className="selected-cloud-integration-account-status">
-								<Dot size={24} color={Color.BG_FOREST_500} />
-							</div>
-							<div className="selected-cloud-integration-account-section-header-title-text">
-								Subscription ID :
-								<span className="azure-cloud-account-selector">
-									<Select
-										value={selectedAccount?.cloud_account_id}
-										options={accounts.map((account) => ({
-											label: account.cloud_account_id,
-											value: account.cloud_account_id,
-										}))}
-										onChange={handleSelectAccount}
-										loading={isLoadingAccounts}
-										placeholder="Select Account"
-									/>
-								</span>
-							</div>
-						</div>
-						<div className="selected-cloud-integration-account-settings">
-							<Button
-								variant="link"
-								color="secondary"
-								prefixIcon={<PencilLine size={14} />}
-								onClick={handleEditAccount}
-							>
-								Edit Account
-							</Button>
-
-							<Button
-								variant="link"
-								color="secondary"
-								prefixIcon={<Plus size={14} />}
-								onClick={handleAddNewAccount}
-							>
-								Add New Account
-							</Button>
-						</div>
-					</div>
-				</div>
-			)}
-
-			<div className="account-settings-container">
-				<DrawerWrapper
-					open={isDrawerOpen}
-					onOpenChange={handleDrawerOpenChange}
-					type="panel"
-					header={{
-						title: mode === 'add' ? 'Connect with Azure' : 'Edit Azure Account',
-					}}
-					content={renderDrawerContent()}
-					showCloseButton
-					allowOutsideClick={mode === 'edit'}
-					direction="right"
-				/>
-			</div>
-		</div>
-	);
-}
--- a/frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/index.tsx
+++ b/frontend/src/components/CloudIntegrations/CloudIntegrationAccounts/index.tsx
@@ -1,3 +0,0 @@
-import CloudIntegrationAccounts from './CloudIntegrationAccounts';
-
-export default CloudIntegrationAccounts;
--- a/frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/CloudIntegrationsHeader.styles.scss
+++ b/frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/CloudIntegrationsHeader.styles.scss
@@ -1,50 +0,0 @@
-.cloud-integrations-header-section {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	border-bottom: 1px solid var(--l3-background);
-
-	.cloud-integrations-header {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		padding: 16px;
-		padding-bottom: 0px;
-		gap: 16px;
-
-		.cloud-integrations-title-section {
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-
-			.cloud-integrations-title {
-				display: flex;
-				align-items: center;
-				gap: 16px;
-
-				.cloud-integrations-icon {
-					width: 40px;
-					height: 40px;
-				}
-
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 16px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 32px; /* 200% */
-				letter-spacing: -0.08px;
-			}
-
-			.cloud-integrations-description {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-}
--- a/frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/CloudIntegrationsHeader.tsx
+++ b/frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/CloudIntegrationsHeader.tsx
@@ -1,61 +0,0 @@
-import {
-	AWS_INTEGRATION,
-	AZURE_INTEGRATION,
-} from 'container/Integrations/constants';
-import { CloudAccount, IntegrationType } from 'container/Integrations/types';
-
-import CloudIntegrationAccounts from '../CloudIntegrationAccounts';
-
-import './CloudIntegrationsHeader.styles.scss';
-
-export default function CloudIntegrationsHeader({
-	cloudServiceId,
-	selectedAccount,
-	accounts,
-	isLoadingAccounts,
-	onSelectAccount,
-	refetchAccounts,
-}: {
-	selectedAccount: CloudAccount | null;
-	accounts: CloudAccount[] | [];
-	isLoadingAccounts: boolean;
-	onSelectAccount: (account: CloudAccount) => void;
-	cloudServiceId: IntegrationType;
-	refetchAccounts: () => void;
-}): JSX.Element {
-	const INTEGRATION_DATA =
-		cloudServiceId === IntegrationType.AWS_SERVICES
-			? AWS_INTEGRATION
-			: AZURE_INTEGRATION;
-
-	return (
-		<div className="cloud-integrations-header-section">
-			<div className="cloud-integrations-header">
-				<div className="cloud-integrations-title-section">
-					<div className="cloud-integrations-title">
-						<img
-							className="cloud-integrations-icon"
-							src={INTEGRATION_DATA.icon}
-							alt={INTEGRATION_DATA.icon_alt}
-						/>
-
-						{INTEGRATION_DATA.title}
-					</div>
-					<div className="cloud-integrations-description">
-						{INTEGRATION_DATA.description}
-					</div>
-				</div>
-			</div>
-
-			<div className="cloud-integrations-accounts-list">
-				<CloudIntegrationAccounts
-					selectedAccount={selectedAccount}
-					accounts={accounts}
-					isLoadingAccounts={isLoadingAccounts}
-					onSelectAccount={onSelectAccount}
-					refetchAccounts={refetchAccounts}
-				/>
-			</div>
-		</div>
-	);
-}
--- a/frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/index.tsx
+++ b/frontend/src/components/CloudIntegrations/CloudIntegrationsHeader/index.tsx
@@ -1,3 +0,0 @@
-import CloudIntegrationsHeader from './CloudIntegrationsHeader';
-
-export default CloudIntegrationsHeader;
--- a/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss
+++ b/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss
@@ -1,34 +0,0 @@
-.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);
-		}
-	}
-}
--- a/frontend/src/components/CodeBlock/CodeBlock.styles.scss
+++ b/frontend/src/components/CodeBlock/CodeBlock.styles.scss
@@ -1,39 +0,0 @@
-.code-block-container {
-	position: relative;
-	border-radius: 4px;
-	overflow: hidden;
-
-	.code-block-copy-btn {
-		position: absolute;
-		top: 50%;
-		right: 8px;
-		transform: translateY(-50%);
-		z-index: 10;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 6px 8px;
-		color: var(--bg-vanilla-100);
-		transition: color 0.15s ease;
-
-		&.copied {
-			background-color: var(--bg-robin-500);
-		}
-	}
-
-	// CodeMirror wrapper
-	.code-block-editor {
-		border-radius: 4px;
-
-		.cm-editor {
-			border-radius: 4px;
-			font-size: 13px;
-			line-height: 1.5;
-			font-family: 'Space Mono', monospace;
-		}
-
-		.cm-scroller {
-			font-family: 'Space Mono', monospace;
-		}
-	}
-}
--- a/frontend/src/components/CodeBlock/CodeBlock.tsx
+++ b/frontend/src/components/CodeBlock/CodeBlock.tsx
@@ -1,146 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
-import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
-import { javascript } from '@codemirror/lang-javascript';
-import { Button } from '@signozhq/button';
-import { dracula } from '@uiw/codemirror-theme-dracula';
-import { githubLight } from '@uiw/codemirror-theme-github';
-import CodeMirror, {
-	EditorState,
-	EditorView,
-	Extension,
-} from '@uiw/react-codemirror';
-import cx from 'classnames';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import './CodeBlock.styles.scss';
-
-export type CodeBlockLanguage =
-	| 'javascript'
-	| 'typescript'
-	| 'js'
-	| 'ts'
-	| 'json'
-	| 'bash'
-	| 'shell'
-	| 'text';
-
-export type CodeBlockTheme = 'light' | 'dark' | 'auto';
-
-interface CodeBlockProps {
-	/** The code content to display */
-	value: string;
-	/** Language for syntax highlighting */
-	language?: CodeBlockLanguage;
-	/** Theme: 'light' | 'dark' | 'auto' (follows app dark mode when 'auto') */
-	theme?: CodeBlockTheme;
-	/** Show line numbers */
-	lineNumbers?: boolean;
-	/** Show copy button */
-	showCopyButton?: boolean;
-	/** Custom class name for the container */
-	className?: string;
-	/** Max height in pixels - enables scrolling when content exceeds */
-	maxHeight?: number | string;
-	/** Callback when copy is clicked */
-	onCopy?: (copiedText: string) => void;
-}
-
-const LANGUAGE_EXTENSION_MAP: Record<
-	CodeBlockLanguage,
-	ReturnType<typeof javascript> | undefined
-> = {
-	javascript: javascript({ jsx: true }),
-	typescript: javascript({ jsx: true }),
-	js: javascript({ jsx: true }),
-	ts: javascript({ jsx: true }),
-	json: javascript(), // JSON is valid JS; proper json() would require @codemirror/lang-json
-	bash: undefined,
-	shell: undefined,
-	text: undefined,
-};
-
-function CodeBlock({
-	value,
-	language = 'text',
-	theme: themeProp = 'auto',
-	lineNumbers = true,
-	showCopyButton = true,
-	className,
-	maxHeight,
-	onCopy,
-}: CodeBlockProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const [isCopied, setIsCopied] = useState(false);
-	const [, copyToClipboard] = useCopyToClipboard();
-
-	const resolvedDark = themeProp === 'auto' ? isDarkMode : themeProp === 'dark';
-	const theme = resolvedDark ? dracula : githubLight;
-
-	const extensions = useMemo((): Extension[] => {
-		const langExtension = LANGUAGE_EXTENSION_MAP[language];
-		return [
-			EditorState.readOnly.of(true),
-			EditorView.editable.of(false),
-			EditorView.lineWrapping,
-			...(langExtension ? [langExtension] : []),
-		];
-	}, [language]);
-
-	const handleCopy = useCallback((): void => {
-		copyToClipboard(value);
-		setIsCopied(true);
-		onCopy?.(value);
-		setTimeout(() => setIsCopied(false), 2000);
-	}, [value, onCopy, copyToClipboard]);
-
-	return (
-		<div className={cx('code-block-container', className)}>
-			{showCopyButton && (
-				<Button
-					variant="solid"
-					size="xs"
-					color="secondary"
-					className={cx('code-block-copy-btn', { copied: isCopied })}
-					onClick={handleCopy}
-					aria-label={isCopied ? 'Copied' : 'Copy code'}
-					title={isCopied ? 'Copied' : 'Copy code'}
-				>
-					{isCopied ? <CheckOutlined /> : <CopyOutlined />}
-				</Button>
-			)}
-			<CodeMirror
-				className="code-block-editor"
-				value={value}
-				theme={theme}
-				readOnly
-				editable={false}
-				extensions={extensions}
-				basicSetup={{
-					lineNumbers,
-					highlightActiveLineGutter: false,
-					highlightActiveLine: false,
-					highlightSelectionMatches: true,
-					drawSelection: true,
-					syntaxHighlighting: true,
-					bracketMatching: true,
-					history: false,
-					foldGutter: false,
-					autocompletion: false,
-					defaultKeymap: false,
-					searchKeymap: true,
-					historyKeymap: false,
-					foldKeymap: false,
-					completionKeymap: false,
-					closeBrackets: false,
-					indentOnInput: false,
-				}}
-				style={{
-					maxHeight: maxHeight ?? 'auto',
-				}}
-			/>
-		</div>
-	);
-}
-
-export default CodeBlock;
--- a/frontend/src/components/CodeBlock/index.ts
+++ b/frontend/src/components/CodeBlock/index.ts
@@ -1,2 +0,0 @@
-export type { CodeBlockLanguage, CodeBlockTheme } from './CodeBlock';
-export { default as CodeBlock } from './CodeBlock';
--- a/frontend/src/components/HeaderRightSection/FeedbackModal.tsx
+++ b/frontend/src/components/HeaderRightSection/FeedbackModal.tsx
@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/sonner';
 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');
--- a/frontend/src/components/HeaderRightSection/tests/FeedbackModal.test.tsx
+++ b/frontend/src/components/HeaderRightSection/tests/FeedbackModal.test.tsx
@@ -4,8 +4,8 @@ import { toast } from '@signozhq/sonner';
 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';

@@ -30,7 +30,7 @@ jest.mock('hooks/useGetTenantLicense', () => ({
 	useGetTenantLicense: jest.fn(),
 }));

-jest.mock('container/Integrations/utils', () => ({
+jest.mock('pages/Integrations/utils', () => ({
 	handleContactSupport: jest.fn(),
 }));

--- a/frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss
+++ b/frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss
@@ -28,17 +28,6 @@
 	}
 }

-// In table/column view, keep action buttons visible at the viewport's right edge
-.log-line-action-buttons.table-view-log-actions {
-	position: absolute;
-	top: 50%;
-	right: 8px;
-	left: auto;
-	transform: translateY(-50%);
-	margin: 0;
-	z-index: 5;
-}
-
 .lightMode {
 	.log-line-action-buttons {
 		border: 1px solid var(--bg-vanilla-400);
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
@@ -1,6 +1,4 @@
 .log-state-indicator {
-	padding-left: 8px;
-
 	.line {
 		margin: 0 8px;
 		min-height: 24px;
--- a/frontend/src/components/Logs/LogStateIndicator/getRowBackgroundColor.ts
+++ b/frontend/src/components/Logs/LogStateIndicator/getRowBackgroundColor.ts
@@ -0,0 +1,43 @@
+import { Color } from '@signozhq/design-tokens';
+
+import { LogType } from './LogStateIndicator';
+
+export function getRowBackgroundColor(
+	isDarkMode: boolean,
+	logType?: string,
+): string {
+	if (isDarkMode) {
+		switch (logType) {
+			case LogType.INFO:
+				return `${Color.BG_ROBIN_500}40`;
+			case LogType.WARN:
+				return `${Color.BG_AMBER_500}40`;
+			case LogType.ERROR:
+				return `${Color.BG_CHERRY_500}40`;
+			case LogType.TRACE:
+				return `${Color.BG_FOREST_400}40`;
+			case LogType.DEBUG:
+				return `${Color.BG_AQUA_500}40`;
+			case LogType.FATAL:
+				return `${Color.BG_SAKURA_500}40`;
+			default:
+				return `${Color.BG_ROBIN_500}40`;
+		}
+	}
+	switch (logType) {
+		case LogType.INFO:
+			return Color.BG_ROBIN_100;
+		case LogType.WARN:
+			return Color.BG_AMBER_100;
+		case LogType.ERROR:
+			return Color.BG_CHERRY_100;
+		case LogType.TRACE:
+			return Color.BG_FOREST_200;
+		case LogType.DEBUG:
+			return Color.BG_AQUA_100;
+		case LogType.FATAL:
+			return Color.BG_SAKURA_100;
+		default:
+			return Color.BG_VANILLA_300;
+	}
+}
--- a/frontend/src/components/Logs/TableView/useLogsTableColumns.module.scss
+++ b/frontend/src/components/Logs/TableView/useLogsTableColumns.module.scss
@@ -0,0 +1,12 @@
+.logBodyCell {
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	color: var(--l2-foreground);
+}
--- a/frontend/src/components/Logs/TableView/useLogsTableColumns.tsx
+++ b/frontend/src/components/Logs/TableView/useLogsTableColumns.tsx
@@ -0,0 +1,117 @@
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+import TanStackTable from 'components/TanStackTableView';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import { FontSize } from 'container/OptionsMenu/types';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { useTimezone } from 'providers/Timezone';
+import { IField } from 'types/api/logs/fields';
+import { ILog } from 'types/api/logs/log';
+
+import type { TableColumnDef } from '../../TanStackTableView/types';
+import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
+
+import styles from './useLogsTableColumns.module.scss';
+
+type UseLogsTableColumnsProps = {
+	fields: IField[];
+	linesPerRow: number;
+	fontSize: FontSize;
+	appendTo?: 'center' | 'end';
+};
+
+export function useLogsTableColumns({
+	fields,
+	fontSize,
+	appendTo = 'center',
+}: UseLogsTableColumnsProps): TableColumnDef<ILog>[] {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	return useMemo<TableColumnDef<ILog>[]>(() => {
+		const stateIndicatorCol: TableColumnDef<ILog> = {
+			id: 'state-indicator',
+			header: '',
+			pin: 'left',
+			enableMove: false,
+			enableResize: false,
+			enableRemove: false,
+			width: { fixed: 32 },
+			cell: ({ row }): ReactElement => (
+				<LogStateIndicator
+					fontSize={fontSize}
+					severityText={row.severity_text as string}
+					severityNumber={row.severity_number as number}
+				/>
+			),
+		};
+
+		const fieldColumns: TableColumnDef<ILog>[] = fields
+			.filter((f): boolean => !['id', 'body', 'timestamp'].includes(f.name))
+			.map(
+				(f): TableColumnDef<ILog> => ({
+					id: f.name,
+					header: f.name,
+					accessorFn: (log): unknown => FlatLogData(log)[f.name],
+					enableRemove: true,
+					width: { min: 192 },
+					cell: ({ value }): ReactElement => (
+						<TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>
+					),
+				}),
+			);
+
+		const timestampCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'timestamp',
+		)
+			? {
+					id: 'timestamp',
+					header: 'Timestamp',
+					accessorFn: (log): unknown => log.timestamp,
+					width: { min: 200 },
+					cell: ({ value }): ReactElement => {
+						const ts = value as string | number;
+						const formatted =
+							typeof ts === 'string'
+								? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
+								: formatTimezoneAdjustedTimestamp(
+										ts / 1e6,
+										DATE_TIME_FORMATS.ISO_DATETIME_MS,
+								  );
+						return <TanStackTable.Text>{formatted}</TanStackTable.Text>;
+					},
+			  }
+			: null;
+
+		const bodyCol: TableColumnDef<ILog> | null = fields.some(
+			(f) => f.name === 'body',
+		)
+			? {
+					id: 'body',
+					header: 'Body',
+					accessorFn: (log): string => log.body,
+					width: { min: 640 },
+					cell: ({ value, isActive }): ReactElement => (
+						<div
+							// eslint-disable-next-line react/no-danger
+							dangerouslySetInnerHTML={{
+								__html: getSanitizedLogBody(value as string, {
+									shouldEscapeHtml: true,
+								}),
+							}}
+							data-active={isActive}
+							className={styles.logBodyCell}
+						/>
+					),
+			  }
+			: null;
+
+		return [
+			stateIndicatorCol,
+			...(timestampCol ? [timestampCol] : []),
+			...(appendTo === 'center' ? fieldColumns : []),
+			...(bodyCol ? [bodyCol] : []),
+			...(appendTo === 'end' ? fieldColumns : []),
+		];
+	}, [fields, appendTo, fontSize, formatTimezoneAdjustedTimestamp]);
+}
--- a/frontend/src/components/TanStackTableView/RowHoverContext.tsx
+++ b/frontend/src/components/TanStackTableView/RowHoverContext.tsx
@@ -0,0 +1,101 @@
+/* eslint-disable no-restricted-imports */
+import {
+	createContext,
+	ReactNode,
+	useCallback,
+	useContext,
+	useRef,
+} from 'react';
+/* eslint-enable no-restricted-imports */
+import { createStore, StoreApi, useStore } from 'zustand';
+
+const CLEAR_HOVER_DELAY_MS = 100;
+
+type RowHoverState = {
+	hoveredRowId: string | null;
+	clearTimeoutId: ReturnType<typeof setTimeout> | null;
+	setHoveredRowId: (id: string | null) => void;
+	scheduleClearHover: (rowId: string) => void;
+};
+
+const createRowHoverStore = (): StoreApi<RowHoverState> =>
+	createStore<RowHoverState>((set, get) => ({
+		hoveredRowId: null,
+		clearTimeoutId: null,
+		setHoveredRowId: (id: string | null): void => {
+			const { clearTimeoutId } = get();
+			if (clearTimeoutId) {
+				clearTimeout(clearTimeoutId);
+				set({ clearTimeoutId: null });
+			}
+			set({ hoveredRowId: id });
+		},
+		scheduleClearHover: (rowId: string): void => {
+			const { clearTimeoutId } = get();
+			if (clearTimeoutId) {
+				clearTimeout(clearTimeoutId);
+			}
+			const timeoutId = setTimeout(() => {
+				const current = get().hoveredRowId;
+				if (current === rowId) {
+					set({ hoveredRowId: null, clearTimeoutId: null });
+				}
+			}, CLEAR_HOVER_DELAY_MS);
+			set({ clearTimeoutId: timeoutId });
+		},
+	}));
+
+type RowHoverStore = StoreApi<RowHoverState>;
+
+const RowHoverContext = createContext<RowHoverStore | null>(null);
+
+export function RowHoverProvider({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	const storeRef = useRef<RowHoverStore | null>(null);
+	if (!storeRef.current) {
+		storeRef.current = createRowHoverStore();
+	}
+	return (
+		<RowHoverContext.Provider value={storeRef.current}>
+			{children}
+		</RowHoverContext.Provider>
+	);
+}
+
+const defaultStore = createRowHoverStore();
+
+export const useIsRowHovered = (rowId: string): boolean => {
+	const store = useContext(RowHoverContext);
+	// Selector returns true only if this specific row is hovered
+	const isHovered = useStore(
+		store ?? defaultStore,
+		(s) => s.hoveredRowId === rowId,
+	);
+	return store ? isHovered : false;
+};
+
+export const useSetRowHovered = (rowId: string): (() => void) => {
+	const store = useContext(RowHoverContext);
+	return useCallback(() => {
+		if (store) {
+			const current = store.getState().hoveredRowId;
+			if (current !== rowId) {
+				store.getState().setHoveredRowId(rowId);
+			}
+		}
+	}, [store, rowId]);
+};
+
+export const useClearRowHovered = (rowId: string): (() => void) => {
+	const store = useContext(RowHoverContext);
+	return useCallback(() => {
+		if (store) {
+			store.getState().scheduleClearHover(rowId);
+		}
+	}, [store, rowId]);
+};
+
+export default RowHoverContext;
--- a/frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx
@@ -0,0 +1,111 @@
+import { ComponentProps, memo } from 'react';
+import { TableComponents } from 'react-virtuoso';
+import cx from 'classnames';
+
+import { useClearRowHovered, useSetRowHovered } from './RowHoverContext';
+import { FlatItem, TableRowContext } from './types';
+
+import tableStyles from './TanStackTable.module.scss';
+
+type VirtuosoTableRowProps<TData> = ComponentProps<
+	NonNullable<
+		TableComponents<FlatItem<TData>, TableRowContext<TData>>['TableRow']
+	>
+>;
+
+function TanStackCustomTableRow<TData>({
+	children,
+	item,
+	context,
+	...props
+}: VirtuosoTableRowProps<TData>): JSX.Element {
+	const rowId = item.row.id;
+	const rowData = item.row.original;
+
+	// Stable callbacks for hover state management
+	const setHovered = useSetRowHovered(rowId);
+	const clearHovered = useClearRowHovered(rowId);
+
+	if (item.kind === 'expansion') {
+		return (
+			<tr {...props} className={tableStyles.tableRowExpansion}>
+				{children}
+			</tr>
+		);
+	}
+
+	const isActive = context?.isRowActive?.(rowData) ?? false;
+	const extraClass = context?.getRowClassName?.(rowData) ?? '';
+	const rowStyle = context?.getRowStyle?.(rowData);
+
+	const rowClassName = cx(
+		tableStyles.tableRow,
+		isActive && tableStyles.tableRowActive,
+		extraClass,
+	);
+
+	return (
+		<tr
+			{...props}
+			className={rowClassName}
+			style={rowStyle}
+			onMouseEnter={setHovered}
+			onMouseLeave={clearHovered}
+		>
+			{children}
+		</tr>
+	);
+}
+
+// Custom comparison - only re-render when row identity or computed values change
+function areTableRowPropsEqual<TData>(
+	prev: Readonly<VirtuosoTableRowProps<TData>>,
+	next: Readonly<VirtuosoTableRowProps<TData>>,
+): boolean {
+	// Different row = must re-render
+	if (prev.item.row.id !== next.item.row.id) {
+		return false;
+	}
+	// Different kind (row vs expansion) = must re-render
+	if (prev.item.kind !== next.item.kind) {
+		return false;
+	}
+	// Same row, same kind - check if computed values would differ
+	// We compare the context callbacks and row data to determine this
+	const prevData = prev.item.row.original;
+	const nextData = next.item.row.original;
+
+	// Row data reference changed = potential re-render needed
+	if (prevData !== nextData) {
+		return false;
+	}
+
+	// Context callbacks changed = computed values may differ
+	if (prev.context !== next.context) {
+		// If context changed, check if the actual computed values differ
+		const prevActive = prev.context?.isRowActive?.(prevData) ?? false;
+		const nextActive = next.context?.isRowActive?.(nextData) ?? false;
+		if (prevActive !== nextActive) {
+			return false;
+		}
+
+		const prevClass = prev.context?.getRowClassName?.(prevData) ?? '';
+		const nextClass = next.context?.getRowClassName?.(nextData) ?? '';
+		if (prevClass !== nextClass) {
+			return false;
+		}
+
+		const prevStyle = prev.context?.getRowStyle?.(prevData);
+		const nextStyle = next.context?.getRowStyle?.(nextData);
+		if (prevStyle !== nextStyle) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
+export default memo(
+	TanStackCustomTableRow,
+	areTableRowPropsEqual,
+) as typeof TanStackCustomTableRow;
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/styles/TanStackHeaderRow.styles.scss
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/styles/TanStackHeaderRow.styles.scss
@@ -1,4 +1,4 @@
-.tanstack-header-cell {
+.tanstackHeaderCell {
 	position: sticky;
 	top: 0;
 	z-index: 2;
@@ -10,16 +10,21 @@
 	);
 	transition: var(--tanstack-header-transition, none);

-	&.is-dragging {
+	&.isDragging {
 		opacity: 0.85;
 	}

-	&.is-resizing {
+	&.isResizing {
 		background: var(--l2-background-hover);
 	}
+
+	&:last-child .cursorColResize {
+		display: none;
+		border-right: 1px solid var(--l2-border);
+	}
 }

-.tanstack-header-content {
+.tanstackHeaderContent {
 	display: flex;
 	align-items: center;
 	height: 100%;
@@ -28,20 +33,20 @@
 	cursor: default;
 	max-width: 100%;

-	&.has-resize-control {
+	&.hasResizeControl {
 		max-width: calc(100% - 5px);
 	}

-	&.has-action-control {
+	&.hasActionControl {
 		max-width: calc(100% - 5px);
 	}

-	&.has-resize-control.has-action-control {
+	&.hasResizeControl.hasActionControl {
 		max-width: calc(100% - 10px);
 	}
 }

-.tanstack-grip-slot {
+.tanstackGripSlot {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -51,7 +56,7 @@
 	flex-shrink: 0;
 }

-.tanstack-grip-activator {
+.tanstackGripActivator {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -63,7 +68,7 @@
 	touch-action: none;
 }

-.tanstack-header-action-trigger {
+.tanstackHeaderActionTrigger {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -72,9 +77,11 @@
 	cursor: pointer;
 	flex-shrink: 0;
 	color: var(--l2-foreground);
+
+	margin-left: auto;
 }

-.tanstack-column-actions-content {
+.tanstackColumnActionsContent {
 	width: 140px;
 	padding: 0;
 	background: var(--l2-background);
@@ -83,7 +90,7 @@
 	box-shadow: none;
 }

-.tanstack-remove-column-action {
+.tanstackRemoveColumnAction {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -105,19 +112,19 @@
 		background: var(--l2-background-hover);
 		color: var(--l2-foreground);

-		.tanstack-remove-column-action-icon {
+		.tanstackRemoveColumnActionIcon {
 			color: var(--l2-foreground);
 		}
 	}
 }

-.tanstack-remove-column-action-icon {
+.tanstackRemoveColumnActionIcon {
 	font-size: 11px;
 	color: var(--l2-foreground);
 	opacity: 0.95;
 }

-.tanstack-header-cell .cursor-col-resize {
+.tanstackHeaderCell .cursorColResize {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -129,11 +136,11 @@
 	background: transparent;
 }

-.tanstack-header-cell.is-resizing .cursor-col-resize {
+.tanstackHeaderCell.isResizing .cursorColResize {
 	background: var(--bg-robin-300);
 }

-.tanstack-resize-handle-line {
+.tanstackResizeHandleLine {
 	position: absolute;
 	top: 0;
 	bottom: 0;
@@ -146,7 +153,7 @@
 	transition: background 120ms ease, width 120ms ease;
 }

-.tanstack-header-cell.is-resizing .tanstack-resize-handle-line {
+.tanstackHeaderCell.isResizing .tanstackResizeHandleLine {
 	width: 2px;
 	background: var(--bg-robin-500);
 	transition: none;
--- a/frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.tsx
+++ b/frontend/src/container/LogsExplorerList/TanStackTableView/TanStackHeaderRow.tsx
@@ -8,51 +8,46 @@ import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
 import { useSortable } from '@dnd-kit/sortable';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/popover';
 import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
+import cx from 'classnames';
 import { GripVertical } from 'lucide-react';

-import { TableHeaderCellStyled } from '../InfinityTableView/styles';
-import { InfinityTableProps } from '../InfinityTableView/types';
-import { OrderedColumn, TanStackTableRowData } from './types';
-import { getColumnId } from './utils';
+import { TableColumnDef } from './types';

-import './styles/TanStackHeaderRow.styles.scss';
+import headerStyles from './TanStackHeaderRow.module.scss';
+import tableStyles from './TanStackTable.module.scss';

-type TanStackHeaderRowProps = {
-	column: OrderedColumn;
-	header?: TanStackHeader<TanStackTableRowData, unknown>;
+type TanStackHeaderRowProps<TData = unknown> = {
+	column: TableColumnDef<TData>;
+	header?: TanStackHeader<TData, unknown>;
 	isDarkMode: boolean;
-	fontSize: InfinityTableProps['tableViewProps']['fontSize'];
 	hasSingleColumn: boolean;
 	canRemoveColumn?: boolean;
-	onRemoveColumn?: (columnKey: string) => void;
+	onRemoveColumn?: (columnId: string) => void;
 };

 const GRIP_ICON_SIZE = 12;
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackHeaderRow({
+function TanStackHeaderRow<TData>({
 	column,
 	header,
 	isDarkMode,
-	fontSize,
 	hasSingleColumn,
 	canRemoveColumn = false,
 	onRemoveColumn,
-}: TanStackHeaderRowProps): JSX.Element {
-	const columnId = getColumnId(column);
-	const isDragColumn =
-		column.key !== 'expand' && column.key !== 'state-indicator';
-	const isResizableColumn = Boolean(header?.column.getCanResize());
+}: TanStackHeaderRowProps<TData>): JSX.Element {
+	const columnId = column.id;
+	const isDragColumn = column.enableMove !== false && column.pin == null;
+	const isResizableColumn =
+		column.enableResize !== false && Boolean(header?.column.getCanResize());
 	const isColumnRemovable = Boolean(
-		canRemoveColumn &&
-			onRemoveColumn &&
-			column.key !== 'expand' &&
-			column.key !== 'state-indicator',
+		canRemoveColumn && onRemoveColumn && column.enableRemove,
 	);
 	const isResizing = Boolean(header?.column.getIsResizing());
 	const resizeHandler = header?.getResizeHandler();
 	const headerText =
-		typeof column.title === 'string' && column.title
-			? column.title
+		typeof column.header === 'string' && column.header
+			? column.header
 			: String(header?.id ?? columnId);
 	const headerTitleAttr = headerText.replace(/^\w/, (c) => c.toUpperCase());
 	const handleResizeStart = (
@@ -83,54 +78,57 @@ function TanStackHeaderRow({
 			} as CSSProperties),
 		[isResizing, transform?.x, transform?.y, transition],
 	);
-	const headerCellClassName = [
-		'tanstack-header-cell',
-		isDragging ? 'is-dragging' : '',
-		isResizing ? 'is-resizing' : '',
-	]
-		.filter(Boolean)
-		.join(' ');
-	const headerContentClassName = [
-		'tanstack-header-content',
-		isResizableColumn ? 'has-resize-control' : '',
-		isColumnRemovable ? 'has-action-control' : '',
-	]
-		.filter(Boolean)
-		.join(' ');
+	const headerCellClassName = cx(
+		headerStyles.tanstackHeaderCell,
+		isDragging && headerStyles.isDragging,
+		isResizing && headerStyles.isResizing,
+	);
+	const headerContentClassName = cx(
+		headerStyles.tanstackHeaderContent,
+		isResizableColumn && headerStyles.hasResizeControl,
+		isColumnRemovable && headerStyles.hasActionControl,
+	);
+
+	const thClassName = cx(
+		tableStyles.tableHeaderCell,
+		headerCellClassName,
+		column.id,
+	);

 	return (
-		<TableHeaderCellStyled
+		<th
 			ref={setNodeRef}
-			$isLogIndicator={column.key === 'state-indicator'}
-			$isDarkMode={isDarkMode}
-			$isDragColumn={false}
-			className={headerCellClassName}
+			className={thClassName}
 			key={columnId}
-			fontSize={fontSize}
-			$hasSingleColumn={hasSingleColumn}
 			style={headerCellStyle}
+			data-dark-mode={isDarkMode}
+			data-single-column={hasSingleColumn || undefined}
 		>
 			<span className={headerContentClassName}>
 				{isDragColumn ? (
-					<span className="tanstack-grip-slot">
+					<span className={headerStyles.tanstackGripSlot}>
 						<span
 							ref={setActivatorNodeRef}
 							{...attributes}
 							{...listeners}
 							role="button"
 							aria-label={`Drag ${String(
-								column.title || header?.id || columnId,
+								(typeof column.header === 'string' && column.header) ||
+									header?.id ||
+									columnId,
 							)} column`}
-							className="tanstack-grip-activator"
+							className={headerStyles.tanstackGripActivator}
 						>
 							<GripVertical size={GRIP_ICON_SIZE} />
 						</span>
 					</span>
 				) : null}
 				<span className="tanstack-header-title" title={headerTitleAttr}>
-					{header
+					{header?.column?.columnDef
 						? flexRender(header.column.columnDef.header, header.getContext())
-						: String(column.title || '').replace(/^\w/, (c) => c.toUpperCase())}
+						: typeof column.header === 'function'
+						? column.header()
+						: String(column.header || '').replace(/^\w/, (c) => c.toUpperCase())}
 				</span>
 				{isColumnRemovable && (
 					<Popover>
@@ -138,7 +136,7 @@ function TanStackHeaderRow({
 							<span
 								role="button"
 								aria-label={`Column actions for ${headerTitleAttr}`}
-								className="tanstack-header-action-trigger"
+								className={headerStyles.tanstackHeaderActionTrigger}
 								onMouseDown={(event): void => {
 									event.stopPropagation();
 								}}
@@ -149,18 +147,20 @@ function TanStackHeaderRow({
 						<PopoverContent
 							align="end"
 							sideOffset={6}
-							className="tanstack-column-actions-content"
+							className={headerStyles.tanstackColumnActionsContent}
 						>
 							<button
 								type="button"
-								className="tanstack-remove-column-action"
+								className={headerStyles.tanstackRemoveColumnAction}
 								onClick={(event): void => {
 									event.preventDefault();
 									event.stopPropagation();
-									onRemoveColumn?.(String(column.key));
+									onRemoveColumn?.(column.id);
 								}}
 							>
-								<CloseOutlined className="tanstack-remove-column-action-icon" />
+								<CloseOutlined
+									className={headerStyles.tanstackRemoveColumnActionIcon}
+								/>
 								Remove column
 							</button>
 						</PopoverContent>
@@ -170,7 +170,7 @@ function TanStackHeaderRow({
 			{isResizableColumn && (
 				<span
 					role="presentation"
-					className="cursor-col-resize"
+					className={headerStyles.cursorColResize}
 					title="Drag to resize column"
 					onClick={(event): void => {
 						event.preventDefault();
@@ -183,10 +183,10 @@ function TanStackHeaderRow({
 						handleResizeStart(event);
 					}}
 				>
-					<span className="tanstack-resize-handle-line" />
+					<span className={headerStyles.tanstackResizeHandleLine} />
 				</span>
 			)}
-		</TableHeaderCellStyled>
+		</th>
 	);
 }

--- a/frontend/src/components/TanStackTableView/TanStackRow.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackRow.tsx
@@ -0,0 +1,105 @@
+import { memo, useCallback } from 'react';
+import { Row as TanStackRowModel } from '@tanstack/react-table';
+
+import { useIsRowHovered } from './RowHoverContext';
+import { TanStackRowCell } from './TanStackRowCell';
+import { TableRowContext } from './types';
+
+import tableStyles from './TanStackTable.module.scss';
+
+type TanStackRowCellsProps<TData> = {
+	row: TanStackRowModel<TData>;
+	context: TableRowContext<TData> | undefined;
+	itemKind: 'row' | 'expansion';
+	hasSingleColumn: boolean;
+};
+
+function TanStackRowCellsInner<TData>({
+	row,
+	context,
+	itemKind,
+	hasSingleColumn,
+}: TanStackRowCellsProps<TData>): JSX.Element {
+	// Only re-render this row when ITS hover state changes
+	const hasHovered = useIsRowHovered(row.id);
+	const rowData = row.original;
+	const visibleCells = row.getVisibleCells();
+	const lastCellIndex = visibleCells.length - 1;
+
+	// Stable references via destructuring
+	const onRowClick = context?.onRowClick;
+	const onRowDeactivate = context?.onRowDeactivate;
+	const isRowActive = context?.isRowActive;
+
+	const handleClick = useCallback(() => {
+		const isActive = isRowActive?.(rowData) ?? false;
+		if (isActive && onRowDeactivate) {
+			onRowDeactivate();
+		} else {
+			onRowClick?.(rowData);
+		}
+	}, [isRowActive, onRowDeactivate, onRowClick, rowData]);
+
+	if (itemKind === 'expansion') {
+		return (
+			<td
+				colSpan={context?.colCount ?? 1}
+				className={tableStyles.tableCellExpansion}
+			>
+				{context?.renderExpandedRow?.(rowData)}
+			</td>
+		);
+	}
+
+	return (
+		<>
+			{visibleCells.map((cell, index) => {
+				const isLastCell = index === lastCellIndex;
+				return (
+					<TanStackRowCell
+						key={cell.id}
+						cell={cell}
+						hasSingleColumn={hasSingleColumn}
+						isLastCell={isLastCell}
+						hasHovered={hasHovered}
+						rowData={rowData}
+						onClick={handleClick}
+						renderRowActions={context?.renderRowActions}
+					/>
+				);
+			})}
+		</>
+	);
+}
+
+// Custom comparison - only re-render when row data changes
+function areRowCellsPropsEqual<TData>(
+	prev: Readonly<TanStackRowCellsProps<TData>>,
+	next: Readonly<TanStackRowCellsProps<TData>>,
+): boolean {
+	return (
+		// Row identity
+		prev.row.id === next.row.id &&
+		// Row kind (row vs expansion)
+		prev.itemKind === next.itemKind &&
+		// Row data reference
+		prev.row.original === next.row.original &&
+		// Layout
+		prev.hasSingleColumn === next.hasSingleColumn &&
+		// Context callbacks for click handlers and row actions
+		prev.context?.onRowClick === next.context?.onRowClick &&
+		prev.context?.onRowDeactivate === next.context?.onRowDeactivate &&
+		prev.context?.isRowActive === next.context?.isRowActive &&
+		prev.context?.renderRowActions === next.context?.renderRowActions &&
+		prev.context?.renderExpandedRow === next.context?.renderExpandedRow &&
+		prev.context?.colCount === next.context?.colCount
+	);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TanStackRowCells = memo(
+	TanStackRowCellsInner,
+	areRowCellsPropsEqual as any,
+) as <T>(props: TanStackRowCellsProps<T>) => JSX.Element;
+
+export default TanStackRowCells;
--- a/frontend/src/components/TanStackTableView/TanStackRowCell.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackRowCell.tsx
@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+import type { Cell } from '@tanstack/react-table';
+import { flexRender } from '@tanstack/react-table';
+import cx from 'classnames';
+
+import tableStyles from './TanStackTable.module.scss';
+
+export type TanStackRowCellProps<TData> = {
+	cell: Cell<TData, unknown>;
+	hasSingleColumn: boolean;
+	isLastCell: boolean;
+	hasHovered: boolean;
+	rowData: TData;
+	onClick: () => void;
+	renderRowActions?: (row: TData) => ReactNode;
+};
+
+function TanStackRowCellInner<TData>({
+	cell,
+	hasSingleColumn,
+	isLastCell,
+	hasHovered,
+	rowData,
+	onClick,
+	renderRowActions,
+}: TanStackRowCellProps<TData>): JSX.Element {
+	return (
+		<td
+			className={cx(tableStyles.tableCell, 'tanstack-cell-' + cell.column.id)}
+			data-single-column={hasSingleColumn || undefined}
+			onClick={onClick}
+		>
+			{flexRender(cell.column.columnDef.cell, cell.getContext())}
+			{isLastCell && hasHovered && renderRowActions && (
+				<span className={tableStyles.tableViewRowActions}>
+					{renderRowActions(rowData)}
+				</span>
+			)}
+		</td>
+	);
+}
+
+function areTanStackRowCellPropsEqual<TData>(
+	prev: Readonly<TanStackRowCellProps<TData>>,
+	next: Readonly<TanStackRowCellProps<TData>>,
+): boolean {
+	return (
+		prev.cell.id === next.cell.id &&
+		prev.cell.column.id === next.cell.column.id &&
+		Object.is(prev.cell.getValue(), next.cell.getValue()) &&
+		prev.hasSingleColumn === next.hasSingleColumn &&
+		prev.isLastCell === next.isLastCell &&
+		prev.hasHovered === next.hasHovered &&
+		prev.onClick === next.onClick &&
+		prev.renderRowActions === next.renderRowActions &&
+		prev.rowData === next.rowData
+	);
+}
+
+const TanStackRowCellMemo = memo(
+	TanStackRowCellInner,
+	areTanStackRowCellPropsEqual,
+);
+
+TanStackRowCellMemo.displayName = 'TanStackRowCell';
+
+export const TanStackRowCell = TanStackRowCellMemo as typeof TanStackRowCellInner;
--- a/frontend/src/components/TanStackTableView/TanStackTable.module.scss
+++ b/frontend/src/components/TanStackTableView/TanStackTable.module.scss
@@ -0,0 +1,105 @@
+.tanStackTable {
+	width: 100%;
+	border-collapse: separate;
+	border-spacing: 0;
+	table-layout: fixed;
+	min-width: 100%;
+	max-width: 100%;
+
+	& td,
+	& th {
+		overflow: hidden;
+		min-width: 0;
+		box-sizing: border-box;
+		vertical-align: middle;
+	}
+}
+
+.tableCellText {
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	width: auto;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	color: var(--l2-foreground);
+	max-width: 100%;
+	word-break: break-all;
+}
+
+.tableViewRowActions {
+	position: absolute;
+	top: 50%;
+	right: 8px;
+	left: auto;
+	transform: translateY(-50%);
+	margin: 0;
+	z-index: 5;
+}
+
+.tableCell {
+	padding: 0.3rem;
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: -0.07px;
+	font-size: var(--tanstack-plain-cell-font-size, 14px);
+	line-height: var(--tanstack-plain-cell-line-height, 18px);
+	color: var(--l2-foreground);
+}
+
+.tableRow {
+	cursor: pointer;
+	position: relative;
+
+	&:hover {
+		.tableCell {
+			background-color: var(--row-hover-bg) !important;
+		}
+	}
+
+	&.tableRowActive {
+		.tableCell {
+			background-color: var(--row-active-bg) !important;
+		}
+	}
+}
+
+.tableHeaderCell {
+	padding: 0.3rem;
+	height: 36px;
+	text-align: left;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px;
+	letter-spacing: -0.07px;
+	border-top: 1px solid var(--l2-border);
+	border-bottom: 1px solid var(--l2-border);
+	border-left: 1px solid var(--l2-border);
+	box-shadow: inset 0 -1px 0 var(--l2-border);
+	color: var(--l1-foreground);
+
+	// TODO: Remove this once background color (l1) is matching the actual background color of the page
+	&[data-dark-mode='true'] {
+		background: #0b0c0d;
+	}
+
+	&[data-dark-mode='false'] {
+		background: #fdfdfd;
+	}
+}
+
+.tableRowExpansion {
+	display: table-row;
+}
+
+.tableCellExpansion {
+	padding: 0.5rem;
+	vertical-align: top;
+}
--- a/frontend/src/components/TanStackTableView/TanStackTableText.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackTableText.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+
+import tableStyles from './TanStackTable.module.scss';
+
+export type TanStackTableTextProps = {
+	children?: ReactNode;
+	className?: string;
+};
+
+function TanStackTableText({
+	children,
+	className,
+}: TanStackTableTextProps): JSX.Element {
+	return (
+		<span className={cx(tableStyles.tableCellText, className)}>{children}</span>
+	);
+}
+
+export default TanStackTableText;
--- a/frontend/src/components/TanStackTableView/TanStackTableView.module.scss
+++ b/frontend/src/components/TanStackTableView/TanStackTableView.module.scss
@@ -0,0 +1,135 @@
+.tanstackTableViewWrapper {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	position: relative;
+	min-height: 0;
+}
+
+.tanstackFixedCol {
+	width: 32px;
+	min-width: 32px;
+	max-width: 32px;
+}
+
+.tanstackFillerCol {
+	width: 100%;
+	min-width: 0;
+}
+
+.tanstackActionsCol {
+	width: 0;
+	min-width: 0;
+	max-width: 0;
+}
+
+.tanstackLoadMoreContainer {
+	width: 100%;
+	min-height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 8px 0 12px;
+	flex-shrink: 0;
+}
+
+.tanstackTableVirtuoso {
+	width: 100%;
+	overflow-x: scroll;
+}
+
+.tanstackTableFootLoaderCell {
+	text-align: center;
+	padding: 8px 0;
+}
+
+.tanstackTableVirtuosoScroll {
+	width: 100%;
+	overflow-x: scroll;
+	scrollbar-width: thin;
+	scrollbar-color: var(--bg-slate-300) transparent;
+
+	&::-webkit-scrollbar {
+		width: 4px;
+		height: 4px;
+	}
+
+	&::-webkit-scrollbar-corner {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--bg-slate-300);
+		border-radius: 9999px;
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--bg-slate-200);
+	}
+
+	&.cellTypographySmall {
+		--tanstack-plain-cell-font-size: 11px;
+		--tanstack-plain-cell-line-height: 16px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 11px;
+			line-height: 16px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	&.cellTypographyMedium {
+		--tanstack-plain-cell-font-size: 13px;
+		--tanstack-plain-cell-line-height: 20px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 13px;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	&.cellTypographyLarge {
+		--tanstack-plain-cell-font-size: 14px;
+		--tanstack-plain-cell-line-height: 24px;
+
+		:global(table tr td),
+		:global(table thead th) {
+			font-size: 14px;
+			line-height: 24px;
+			letter-spacing: -0.07px;
+		}
+	}
+}
+
+.tanstackLoadingOverlay {
+	position: absolute;
+	left: 50%;
+	bottom: 2rem;
+	transform: translateX(-50%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+	z-index: 3;
+	border-radius: 8px;
+	padding: 8px 16px;
+}
+
+:global(.lightMode) .tanstackTableVirtuosoScroll {
+	scrollbar-color: var(--bg-vanilla-300) transparent;
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--bg-vanilla-300);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--bg-vanilla-100);
+	}
+}
--- a/frontend/src/components/TanStackTableView/VirtuosoTableColGroup.tsx
+++ b/frontend/src/components/TanStackTableView/VirtuosoTableColGroup.tsx
@@ -0,0 +1,52 @@
+import type { Table } from '@tanstack/react-table';
+
+import type { TableColumnDef, TanStackTableProps } from './types';
+import { getColumnMinWidthPx } from './utils';
+
+import viewStyles from './TanStackTableView.module.scss';
+
+export function VirtuosoTableColGroup<TData>({
+	columns,
+	columnSizingProp,
+	table,
+}: {
+	columns: TableColumnDef<TData>[];
+	columnSizingProp: TanStackTableProps<TData>['columnSizing'];
+	table: Table<TData>;
+}): JSX.Element {
+	return (
+		<colgroup>
+			{columns.map((column, colIndex) => {
+				const columnId = column.id;
+				const isFixedColumn = column.width?.fixed != null;
+				const minWidthPx = getColumnMinWidthPx(column);
+				const persistedWidth = columnSizingProp?.[columnId];
+				const computedWidth = table.getColumn(columnId)?.getSize();
+				const effectiveWidth = persistedWidth ?? computedWidth;
+				if (isFixedColumn) {
+					return <col key={columnId} className={viewStyles.tanstackFixedCol} />;
+				}
+				const isLastColumn = colIndex === columns.length - 1;
+				if (isLastColumn) {
+					return (
+						<col
+							key={columnId}
+							style={{ width: '100%', minWidth: `${minWidthPx}px` }}
+						/>
+					);
+				}
+				const widthPx =
+					effectiveWidth != null ? Math.max(effectiveWidth, minWidthPx) : minWidthPx;
+				return (
+					<col
+						key={columnId}
+						style={{
+							width: `${widthPx}px`,
+							minWidth: `${minWidthPx}px`,
+						}}
+					/>
+				);
+			})}
+		</colgroup>
+	);
+}
--- a/frontend/src/components/TanStackTableView/tests/TanStackCustomTableRow.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackCustomTableRow.test.tsx
@@ -0,0 +1,102 @@
+jest.mock('../TanStackTable.module.scss', () => ({
+	__esModule: true,
+	default: {
+		tableRow: 'tableRow',
+		tableRowActive: 'tableRowActive',
+		tableRowExpansion: 'tableRowExpansion',
+	},
+}));
+
+import { render, screen } from '@testing-library/react';
+
+import TanStackCustomTableRow from '../TanStackCustomTableRow';
+import type { FlatItem, TableRowContext } from '../types';
+
+const makeItem = (id: string): FlatItem<{ id: string }> => ({
+	kind: 'row',
+	row: { original: { id } } as never,
+});
+
+const virtuosoAttrs = {
+	'data-index': 0,
+	'data-item-index': 0,
+	'data-known-size': 40,
+} as const;
+
+describe('TanStackCustomTableRow', () => {
+	it('renders children', async () => {
+		render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={undefined}
+					>
+						<td>cell</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(await screen.findByText('cell')).toBeInTheDocument();
+	});
+
+	it('applies active class when isRowActive returns true', () => {
+		const ctx: TableRowContext<{ id: string }> = {
+			isRowActive: (row) => row.id === '1',
+			colCount: 1,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={ctx as never}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).toHaveClass('tableRowActive');
+	});
+
+	it('does not apply active class when isRowActive returns false', () => {
+		const ctx: TableRowContext<{ id: string }> = {
+			isRowActive: (row) => row.id === 'other',
+			colCount: 1,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow
+						{...virtuosoAttrs}
+						item={makeItem('1')}
+						context={ctx as never}
+					>
+						<td>x</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).not.toHaveClass('tableRowActive');
+	});
+
+	it('renders expansion row without RowHoverContext when kind is expansion', () => {
+		const item: FlatItem<{ id: string }> = {
+			kind: 'expansion',
+			row: { original: { id: '1' } } as never,
+		};
+		const { container } = render(
+			<table>
+				<tbody>
+					<TanStackCustomTableRow {...virtuosoAttrs} item={item} context={undefined}>
+						<td>expanded content</td>
+					</TanStackCustomTableRow>
+				</tbody>
+			</table>,
+		);
+		expect(container.querySelector('tr')).toHaveClass('tableRowExpansion');
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/TanStackHeaderRow.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackHeaderRow.test.tsx
@@ -0,0 +1,144 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TanStackHeaderRow from '../TanStackHeaderRow';
+import type { TableColumnDef } from '../types';
+
+jest.mock('@dnd-kit/sortable', () => ({
+	useSortable: (): any => ({
+		attributes: {},
+		listeners: {},
+		setNodeRef: jest.fn(),
+		setActivatorNodeRef: jest.fn(),
+		transform: null,
+		transition: null,
+		isDragging: false,
+	}),
+}));
+
+const col = (
+	id: string,
+	overrides?: Partial<TableColumnDef<unknown>>,
+): TableColumnDef<unknown> => ({
+	id,
+	header: id,
+	cell: (): null => null,
+	...overrides,
+});
+
+const header = {
+	id: 'col',
+	column: {
+		getCanResize: () => true,
+		getIsResizing: () => false,
+		columnDef: { header: 'col' },
+	},
+	getResizeHandler: () => jest.fn(),
+	getContext: () => ({}),
+} as never;
+
+describe('TanStackHeaderRow', () => {
+	it('renders column title', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('timestamp', { header: 'timestamp' })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(screen.getByTitle('Timestamp')).toBeInTheDocument();
+	});
+
+	it('shows grip icon when enableMove is not false and pin is not set', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('body')}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.getByRole('button', { name: /drag body/i }),
+		).toBeInTheDocument();
+	});
+
+	it('does NOT show grip icon when pin is set', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('indicator', { pin: 'left' })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.queryByRole('button', { name: /drag/i }),
+		).not.toBeInTheDocument();
+	});
+
+	it('shows remove button when enableRemove and canRemoveColumn are true', async () => {
+		const user = userEvent.setup();
+		const onRemoveColumn = jest.fn();
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('name', { enableRemove: true })}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+							canRemoveColumn
+							onRemoveColumn={onRemoveColumn}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		await user.click(screen.getByRole('button', { name: /column actions/i }));
+		await user.click(await screen.findByText(/remove column/i));
+		expect(onRemoveColumn).toHaveBeenCalledWith('name');
+	});
+
+	it('does NOT show remove button when enableRemove is absent', () => {
+		render(
+			<table>
+				<thead>
+					<tr>
+						<TanStackHeaderRow
+							column={col('name')}
+							header={header}
+							isDarkMode={false}
+							hasSingleColumn={false}
+							canRemoveColumn
+							onRemoveColumn={jest.fn()}
+						/>
+					</tr>
+				</thead>
+			</table>,
+		);
+		expect(
+			screen.queryByRole('button', { name: /column actions/i }),
+		).not.toBeInTheDocument();
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/TanStackRow.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackRow.test.tsx
@@ -0,0 +1,162 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TanStackRowCells from '../TanStackRow';
+import type { TableRowContext } from '../types';
+
+const flexRenderMock = jest.fn((def: unknown) =>
+	typeof def === 'function' ? def({}) : def,
+);
+jest.mock('@tanstack/react-table', () => ({
+	flexRender: (def: unknown, _ctx?: unknown): unknown => flexRenderMock(def),
+}));
+
+type Row = { id: string };
+
+function buildMockRow(
+	cells: { id: string }[],
+	rowData: Row = { id: 'r1' },
+): Parameters<typeof TanStackRowCells>[0]['row'] {
+	return {
+		original: rowData,
+		getVisibleCells: () =>
+			cells.map((c, i) => ({
+				id: `cell-${i}`,
+				column: {
+					id: c.id,
+					columnDef: { cell: (): string => `content-${c.id}` },
+				},
+				getContext: (): Record<string, unknown> => ({}),
+				getValue: (): string => `content-${c.id}`,
+			})),
+	} as never;
+}
+
+describe('TanStackRowCells', () => {
+	beforeEach(() => flexRenderMock.mockClear());
+
+	it('renders a cell per visible column', () => {
+		const row = buildMockRow([{ id: 'col-a' }, { id: 'col-b' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={undefined}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		expect(screen.getAllByRole('cell')).toHaveLength(2);
+	});
+
+	it('calls onRowClick when a cell is clicked', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const ctx: TableRowContext<Row> = { colCount: 1, onRowClick };
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' });
+	});
+
+	it('calls onRowDeactivate instead of onRowClick when row is active', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const onRowDeactivate = jest.fn();
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			onRowClick,
+			onRowDeactivate,
+			isRowActive: () => true,
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowDeactivate).toHaveBeenCalled();
+		expect(onRowClick).not.toHaveBeenCalled();
+	});
+
+	it('does not render renderRowActions before hover', () => {
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			renderRowActions: () => <button type="button">action</button>,
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		// Row actions are not rendered until hover (useIsRowHovered returns false by default)
+		expect(
+			screen.queryByRole('button', { name: 'action' }),
+		).not.toBeInTheDocument();
+	});
+
+	it('renders expansion cell with renderExpandedRow content', async () => {
+		const row = {
+			original: { id: 'r1' },
+			getVisibleCells: () => [],
+		} as never;
+		const ctx: TableRowContext<Row> = {
+			colCount: 3,
+			renderExpandedRow: (r) => <div>expanded-{r.id}</div>,
+		};
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="expansion"
+							hasSingleColumn={false}
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		expect(await screen.findByText('expanded-r1')).toBeInTheDocument();
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/TanStackTableView.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackTableView.test.tsx
@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+import { render, screen } from '@testing-library/react';
+
+import TanStackTable from '../index';
+import type { TableColumnDef, TanStackTableProps } from '../types';
+
+jest.mock('react-virtuoso', () => ({
+	TableVirtuoso: forwardRef<unknown, { fixedHeaderContent?: () => JSX.Element }>(
+		function MockVirtuoso({ fixedHeaderContent }, _ref) {
+			return <div data-testid="virtuoso">{fixedHeaderContent?.()}</div>;
+		},
+	),
+}));
+
+jest.mock('../useTableParams', () => ({
+	useTableParams: (): Record<string, unknown> => ({
+		page: 1,
+		limit: 50,
+		orderBy: null,
+		setPage: jest.fn(),
+		setLimit: jest.fn(),
+		setOrderBy: jest.fn(),
+	}),
+}));
+
+jest.mock('../../Spinner', () => ({
+	__esModule: true,
+	default: ({ tip }: { tip: string }): JSX.Element => (
+		<div data-testid="spinner">{tip}</div>
+	),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+type Row = { id: string };
+
+const col = (): TableColumnDef<Row> => ({
+	id: 'id',
+	header: 'ID',
+	cell: ({ row }): string => row.id,
+	accessorKey: 'id',
+});
+
+const baseProps: TanStackTableProps<Row> = {
+	data: [{ id: '1' }],
+	columns: [col()],
+};
+
+describe('TanStackTable', () => {
+	it('renders virtuoso when not loading', () => {
+		render(<TanStackTable {...baseProps} />);
+		expect(screen.getByTestId('virtuoso')).toBeInTheDocument();
+	});
+
+	it('shows loading spinner overlay when isLoading is true', () => {
+		render(<TanStackTable {...baseProps} isLoading />);
+		expect(screen.getByTestId('spinner')).toBeInTheDocument();
+	});
+
+	it('passes loadingTip to spinner', () => {
+		render(
+			<TanStackTable {...baseProps} isLoading loadingTip="Fetching hosts" />,
+		);
+		expect(screen.getByTestId('spinner')).toHaveTextContent('Fetching hosts');
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/useTableColumns.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/useTableColumns.test.tsx
@@ -0,0 +1,194 @@
+import { act, renderHook } from '@testing-library/react';
+
+import type { TableColumnDef } from '../types';
+import { useTableColumns } from '../useTableColumns';
+
+const mockGet = jest.fn();
+const mockSet = jest.fn();
+
+jest.mock('api/browser/localstorage/get', () => ({
+	__esModule: true,
+	default: (key: string): string | null => mockGet(key),
+}));
+
+jest.mock('api/browser/localstorage/set', () => ({
+	__esModule: true,
+	default: (key: string, value: string): void => mockSet(key, value),
+}));
+
+type Row = { id: string; name: string };
+
+const col = (id: string, pin?: 'left' | 'right'): TableColumnDef<Row> => ({
+	id,
+	header: id,
+	cell: ({ value }): string => String(value),
+	...(pin ? { pin } : {}),
+});
+
+describe('useTableColumns', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGet.mockReturnValue(null);
+		jest.useFakeTimers();
+	});
+	afterEach(() => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	});
+
+	it('returns definitions in original order when no persisted state', () => {
+		const defs = [col('timestamp'), col('body'), col('name')];
+		const { result } = renderHook(() => useTableColumns(defs));
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'timestamp',
+			'body',
+			'name',
+		]);
+	});
+
+	it('restores column order from localStorage', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: ['name', 'body', 'timestamp'],
+				columnSizing: {},
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('timestamp'), col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'name',
+			'body',
+			'timestamp',
+		]);
+	});
+
+	it('pinned columns always stay first regardless of persisted order', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: ['body', 'indicator'],
+				columnSizing: {},
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('indicator', 'left'), col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns[0].id).toBe('indicator');
+	});
+
+	it('excludes removed columns from tableProps.columns', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: [],
+				columnSizing: {},
+				removedColumnIds: ['name'],
+			}),
+		);
+		const defs = [col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual(['body']);
+		expect(result.current.activeColumnIds).toEqual(['body']);
+	});
+
+	it('activeColumnIds reflects only currently visible columns', () => {
+		const defs = [col('body'), col('timestamp'), col('name')];
+		const { result } = renderHook(() => useTableColumns(defs));
+		expect(result.current.activeColumnIds).toEqual(['body', 'timestamp', 'name']);
+	});
+
+	it('onRemoveColumn removes column and persists after debounce', () => {
+		const defs = [col('body'), col('name')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+
+		act(() => {
+			result.current.tableProps.onRemoveColumn('body');
+		});
+
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual(['name']);
+
+		act(() => {
+			jest.advanceTimersByTime(250);
+		});
+
+		expect(mockSet).toHaveBeenCalledWith(
+			'test_table',
+			expect.stringContaining('"removedColumnIds":["body"]'),
+		);
+	});
+
+	it('onColumnOrderChange updates column order', () => {
+		const defs = [col('a'), col('b'), col('c')];
+		const { result } = renderHook(() => useTableColumns(defs));
+
+		act(() => {
+			result.current.tableProps.onColumnOrderChange([
+				col('c'),
+				col('b'),
+				col('a'),
+			]);
+		});
+
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'c',
+			'b',
+			'a',
+		]);
+	});
+
+	it('restores column sizing from localStorage', () => {
+		mockGet.mockReturnValue(
+			JSON.stringify({
+				columnOrder: [],
+				columnSizing: { body: 400 },
+				removedColumnIds: [],
+			}),
+		);
+		const defs = [col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columnSizing).toEqual({ body: 400 });
+	});
+
+	it('debounces sizing writes to localStorage', () => {
+		const defs = [col('body')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+
+		act(() => {
+			result.current.tableProps.onColumnSizingChange({ body: 500 });
+		});
+		expect(mockSet).not.toHaveBeenCalled();
+
+		act(() => {
+			jest.advanceTimersByTime(250);
+		});
+		expect(mockSet).toHaveBeenCalledWith(
+			'test_table',
+			expect.stringContaining('"body":500'),
+		);
+	});
+
+	it('falls back to definitions order when localStorage is corrupt', () => {
+		const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+		mockGet.mockReturnValue('not-json');
+		const defs = [col('a'), col('b')];
+		const { result } = renderHook(() =>
+			useTableColumns(defs, { storageKey: 'test_table' }),
+		);
+		expect(result.current.tableProps.columns.map((c) => c.id)).toEqual([
+			'a',
+			'b',
+		]);
+		spy.mockRestore();
+	});
+});
--- a/frontend/src/components/TanStackTableView/tests/useTableParams.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/useTableParams.test.tsx
@@ -0,0 +1,105 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useTableParams } from '../useTableParams';
+
+jest.mock('utils/nuqsParsers', () => ({
+	parseAsJsonNoValidate: (): any => ({
+		withDefault: (d: unknown): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	}),
+}));
+
+jest.mock('nuqs', () => ({
+	parseAsInteger: {
+		withDefault: (d: number): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	},
+	parseAsJson: (): any => ({
+		withDefault: (d: unknown): any => ({
+			withOptions: (): any => ({ _default: d }),
+			_default: d,
+		}),
+	}),
+	useQueryState: jest
+		.fn()
+		.mockImplementation((_key: string, parser: { _default: unknown }) => {
+			const [val, setVal] = (jest.requireActual(
+				'react',
+			) as typeof import('react')).useState(parser?._default);
+			return [val, setVal];
+		}),
+}));
+
+describe('useTableParams (local mode — enableQueryParams not set)', () => {
+	it('returns default page=1 and limit=50', () => {
+		const { result } = renderHook(() => useTableParams());
+		expect(result.current.page).toBe(1);
+		expect(result.current.limit).toBe(50);
+		expect(result.current.orderBy).toBeNull();
+	});
+
+	it('respects custom defaults', () => {
+		const { result } = renderHook(() =>
+			useTableParams(undefined, { page: 2, limit: 25 }),
+		);
+		expect(result.current.page).toBe(2);
+		expect(result.current.limit).toBe(25);
+	});
+
+	it('setPage updates page', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setPage(3);
+		});
+		expect(result.current.page).toBe(3);
+	});
+
+	it('setLimit updates limit', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setLimit(100);
+		});
+		expect(result.current.limit).toBe(100);
+	});
+
+	it('setOrderBy updates orderBy', () => {
+		const { result } = renderHook(() => useTableParams());
+		act(() => {
+			result.current.setOrderBy({ columnId: 'cpu', desc: true });
+		});
+		expect(result.current.orderBy).toEqual({ columnId: 'cpu', desc: true });
+	});
+});
+
+describe('useTableParams (URL mode — enableQueryParams set)', () => {
+	it('uses nuqs state when enableQueryParams=true', () => {
+		const { result } = renderHook(() => useTableParams(true));
+		expect(result.current.page).toBe(1);
+		act(() => {
+			result.current.setPage(5);
+		});
+		expect(result.current.page).toBe(5);
+	});
+
+	it('uses prefixed keys when enableQueryParams is a string', () => {
+		const { result } = renderHook(() => useTableParams('pods', { page: 2 }));
+		expect(result.current.page).toBe(2);
+		act(() => {
+			result.current.setPage(4);
+		});
+		expect(result.current.page).toBe(4);
+	});
+
+	it('local state is ignored when enableQueryParams is set', () => {
+		const { result: local } = renderHook(() => useTableParams());
+		const { result: url } = renderHook(() => useTableParams(true));
+		act(() => {
+			local.current.setPage(99);
+		});
+		expect(url.current.page).toBe(1);
+	});
+});
--- a/frontend/src/components/TanStackTableView/index.tsx
+++ b/frontend/src/components/TanStackTableView/index.tsx
@@ -0,0 +1,618 @@
+import type { ComponentProps, CSSProperties, Ref } from 'react';
+import {
+	forwardRef,
+	memo,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import type { TableComponents } from 'react-virtuoso';
+import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso';
+import {
+	DndContext,
+	DragEndEvent,
+	PointerSensor,
+	pointerWithin,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import {
+	arrayMove,
+	horizontalListSortingStrategy,
+	SortableContext,
+} from '@dnd-kit/sortable';
+import { TooltipProvider } from '@signozhq/ui';
+import type { Row } from '@tanstack/react-table';
+import {
+	ColumnDef,
+	ColumnPinningState,
+	ExpandedState,
+	getCoreRowModel,
+	useReactTable,
+} from '@tanstack/react-table';
+import { Pagination } from 'antd';
+import cx from 'classnames';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import Spinner from '../Spinner';
+import { RowHoverProvider } from './RowHoverContext';
+import TanStackCustomTableRow from './TanStackCustomTableRow';
+import TanStackHeaderRow from './TanStackHeaderRow';
+import TanStackRowCells from './TanStackRow';
+import TanStackTableText from './TanStackTableText';
+import {
+	FlatItem,
+	TableRowContext,
+	TanStackTableHandle,
+	TanStackTableProps,
+} from './types';
+import { useTableParams } from './useTableParams';
+import { buildTanstackColumnDef } from './utils';
+import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
+
+import tableStyles from './TanStackTable.module.scss';
+import viewStyles from './TanStackTableView.module.scss';
+
+const COLUMN_DND_AUTO_SCROLL = {
+	layoutShiftCompensation: false as const,
+	threshold: { x: 0.2, y: 0 },
+};
+
+const INCREASE_VIEWPORT_BY = { top: 500, bottom: 500 };
+
+const PAGINATION_STYLE: CSSProperties = { marginTop: 12, textAlign: 'right' };
+
+const noopColumnSizing = (): void => {};
+
+function TanStackTableInner<TData>(
+	{
+		data,
+		columns,
+		columnSizing: columnSizingProp,
+		onColumnSizingChange,
+		onColumnOrderChange,
+		onRemoveColumn,
+		isLoading = false,
+		loadingTip = 'Loading',
+		enableQueryParams,
+		pagination,
+		onEndReached,
+		getRowStyle,
+		getRowClassName,
+		isRowActive,
+		renderRowActions,
+		onRowClick,
+		onRowDeactivate,
+		activeRowIndex,
+		renderExpandedRow,
+		getRowCanExpand,
+		tableScrollerProps,
+		plainTextCellLineClamp,
+		cellTypographySize,
+	}: TanStackTableProps<TData>,
+	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
+): JSX.Element {
+	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
+	const isDarkMode = useIsDarkMode();
+
+	const { page, limit, setPage, setLimit } = useTableParams(enableQueryParams, {
+		page: pagination?.defaultPage,
+		limit: pagination?.defaultLimit,
+	});
+
+	const [expanded, setExpanded] = useState<ExpandedState>({});
+
+	const columnPinning = useMemo<ColumnPinningState>(
+		() => ({
+			left: columns.filter((c) => c.pin === 'left').map((c) => c.id),
+			right: columns.filter((c) => c.pin === 'right').map((c) => c.id),
+		}),
+		[columns],
+	);
+
+	const tanstackColumns = useMemo<ColumnDef<TData>[]>(
+		() => columns.map((colDef) => buildTanstackColumnDef(colDef, isRowActive)),
+		[columns, isRowActive],
+	);
+
+	const getRowId = useCallback((row: TData, index: number): string => {
+		const r = row as Record<string, unknown>;
+		if (r != null && typeof r.id !== 'undefined') {
+			return String(r.id);
+		}
+		return String(index);
+	}, []);
+
+	const tableGetRowCanExpand = useCallback(
+		(row: Row<TData>): boolean =>
+			getRowCanExpand ? getRowCanExpand(row.original) : true,
+		[getRowCanExpand],
+	);
+
+	const table = useReactTable({
+		data,
+		columns: tanstackColumns,
+		enableColumnResizing: true,
+		enableColumnPinning: true,
+		columnResizeMode: 'onChange',
+		getCoreRowModel: getCoreRowModel(),
+		getRowId,
+		enableExpanding: Boolean(renderExpandedRow),
+		getRowCanExpand: renderExpandedRow ? tableGetRowCanExpand : undefined,
+		onColumnSizingChange: onColumnSizingChange ?? noopColumnSizing,
+		onExpandedChange: setExpanded,
+		state: {
+			columnSizing: columnSizingProp ?? {},
+			columnPinning,
+			expanded,
+		},
+	});
+
+	const tableRows = table.getRowModel().rows;
+
+	const flatItems = useMemo<FlatItem<TData>[]>(() => {
+		const result: FlatItem<TData>[] = [];
+		for (const row of tableRows) {
+			result.push({ kind: 'row', row });
+			if (renderExpandedRow && row.getIsExpanded()) {
+				result.push({ kind: 'expansion', row });
+			}
+		}
+		return result;
+	}, [tableRows, renderExpandedRow]);
+
+	const flatIndexForActiveRow = useMemo(() => {
+		if (activeRowIndex == null || activeRowIndex < 0) {
+			return -1;
+		}
+		for (let i = 0; i < flatItems.length; i++) {
+			const item = flatItems[i];
+			if (item.kind === 'row' && item.row.index === activeRowIndex) {
+				return i;
+			}
+		}
+		return -1;
+	}, [activeRowIndex, flatItems]);
+
+	useEffect(() => {
+		if (flatIndexForActiveRow < 0) {
+			return;
+		}
+		virtuosoRef.current?.scrollToIndex({
+			index: flatIndexForActiveRow,
+			align: 'center',
+			behavior: 'auto',
+		});
+	}, [flatIndexForActiveRow]);
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+	);
+
+	const columnIds = useMemo(() => columns.map((c) => c.id), [columns]);
+
+	const handleDragEnd = useCallback(
+		(event: DragEndEvent): void => {
+			const { active, over } = event;
+			if (!over || active.id === over.id || !onColumnOrderChange) {
+				return;
+			}
+			const activeCol = columns.find((c) => c.id === String(active.id));
+			const overCol = columns.find((c) => c.id === String(over.id));
+			if (
+				!activeCol ||
+				!overCol ||
+				activeCol.pin != null ||
+				overCol.pin != null ||
+				activeCol.enableMove === false
+			) {
+				return;
+			}
+			const oldIndex = columns.findIndex((c) => c.id === String(active.id));
+			const newIndex = columns.findIndex((c) => c.id === String(over.id));
+			if (oldIndex === -1 || newIndex === -1) {
+				return;
+			}
+			onColumnOrderChange(arrayMove(columns, oldIndex, newIndex));
+		},
+		[columns, onColumnOrderChange],
+	);
+
+	const hasSingleColumn = useMemo(
+		() => columns.filter((c) => !c.pin && c.enableRemove !== false).length <= 1,
+		[columns],
+	);
+
+	const canRemoveColumn = !hasSingleColumn;
+
+	const flatHeaders = useMemo(
+		() => table.getFlatHeaders().filter((header) => !header.isPlaceholder),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[tanstackColumns, columnPinning],
+	);
+
+	const columnsById = useMemo(
+		() => new Map(columns.map((c) => [c.id, c] as const)),
+		[columns],
+	);
+
+	const virtuosoContext = useMemo<TableRowContext<TData>>(
+		() => ({
+			getRowStyle,
+			getRowClassName,
+			isRowActive,
+			renderRowActions,
+			onRowClick,
+			onRowDeactivate,
+			renderExpandedRow,
+			colCount: columns.length,
+			isDarkMode,
+			plainTextCellLineClamp,
+		}),
+		[
+			getRowStyle,
+			getRowClassName,
+			isRowActive,
+			renderRowActions,
+			onRowClick,
+			onRowDeactivate,
+			renderExpandedRow,
+			columns.length,
+			isDarkMode,
+			plainTextCellLineClamp,
+		],
+	);
+
+	const itemContent = useCallback(
+		(_index: number, item: FlatItem<TData>): JSX.Element => (
+			<TanStackRowCells
+				row={item.row}
+				itemKind={item.kind}
+				context={virtuosoContext}
+				hasSingleColumn={hasSingleColumn}
+			/>
+		),
+		[virtuosoContext, hasSingleColumn],
+	);
+
+	const tableHeader = useCallback(() => {
+		return (
+			<DndContext
+				sensors={sensors}
+				collisionDetection={pointerWithin}
+				onDragEnd={handleDragEnd}
+				autoScroll={COLUMN_DND_AUTO_SCROLL}
+			>
+				<SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>
+					<tr>
+						{flatHeaders.map((header) => {
+							const column = columnsById.get(header.id);
+							if (!column) {
+								return null;
+							}
+							return (
+								<TanStackHeaderRow
+									key={header.id}
+									column={column}
+									header={header}
+									isDarkMode={isDarkMode}
+									hasSingleColumn={hasSingleColumn}
+									onRemoveColumn={onRemoveColumn}
+									canRemoveColumn={canRemoveColumn}
+								/>
+							);
+						})}
+					</tr>
+				</SortableContext>
+			</DndContext>
+		);
+	}, [
+		sensors,
+		handleDragEnd,
+		columnIds,
+		flatHeaders,
+		columnsById,
+		isDarkMode,
+		hasSingleColumn,
+		onRemoveColumn,
+		canRemoveColumn,
+	]);
+
+	const handleEndReached = useCallback(
+		(index: number): void => {
+			onEndReached?.(index);
+		},
+		[onEndReached],
+	);
+
+	useImperativeHandle(
+		forwardedRef,
+		(): TanStackTableHandle =>
+			new Proxy(
+				{
+					goToPage: (p: number): void => {
+						setPage(p);
+						virtuosoRef.current?.scrollToIndex({
+							index: 0,
+							align: 'start',
+						});
+					},
+				} as TanStackTableHandle,
+				{
+					get(target, prop): unknown {
+						if (prop in target) {
+							return Reflect.get(target, prop);
+						}
+						const v = (virtuosoRef.current as unknown) as Record<string, unknown>;
+						const value = v?.[prop as string];
+						if (typeof value === 'function') {
+							return (value as (...a: unknown[]) => unknown).bind(virtuosoRef.current);
+						}
+						return value;
+					},
+				},
+			),
+		[setPage],
+	);
+
+	const showPagination = Boolean(pagination && !onEndReached);
+
+	const { className: tableScrollerClassName, ...restTableScrollerProps } =
+		tableScrollerProps ?? {};
+
+	const cellTypographyClass = useMemo((): string | undefined => {
+		if (cellTypographySize === 'small') {
+			return viewStyles.cellTypographySmall;
+		}
+		if (cellTypographySize === 'medium') {
+			return viewStyles.cellTypographyMedium;
+		}
+		if (cellTypographySize === 'large') {
+			return viewStyles.cellTypographyLarge;
+		}
+		return undefined;
+	}, [cellTypographySize]);
+
+	const virtuosoClassName = useMemo(
+		() =>
+			cx(
+				viewStyles.tanstackTableVirtuosoScroll,
+				cellTypographyClass,
+				tableScrollerClassName,
+			),
+		[cellTypographyClass, tableScrollerClassName],
+	);
+
+	const virtuosoTableStyle = useMemo(
+		() =>
+			({
+				'--tanstack-plain-body-line-clamp': plainTextCellLineClamp,
+			} as CSSProperties),
+		[plainTextCellLineClamp],
+	);
+
+	type VirtuosoTableComponentProps = ComponentProps<
+		NonNullable<TableComponents<FlatItem<TData>, TableRowContext<TData>>['Table']>
+	>;
+
+	const virtuosoComponents = useMemo(
+		() => ({
+			Table: ({ style, children }: VirtuosoTableComponentProps): JSX.Element => (
+				<table className={tableStyles.tanStackTable} style={style}>
+					<VirtuosoTableColGroup
+						columns={columns}
+						columnSizingProp={columnSizingProp}
+						table={table}
+					/>
+					{children}
+				</table>
+			),
+			TableRow: TanStackCustomTableRow,
+		}),
+		[columns, columnSizingProp, table],
+	);
+
+	return (
+		<div className={viewStyles.tanstackTableViewWrapper}>
+			<RowHoverProvider>
+				<TooltipProvider>
+					<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
+						className={virtuosoClassName}
+						ref={virtuosoRef}
+						{...restTableScrollerProps}
+						data={flatItems}
+						totalCount={flatItems.length}
+						context={virtuosoContext}
+						increaseViewportBy={INCREASE_VIEWPORT_BY}
+						initialTopMostItemIndex={
+							flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
+						}
+						fixedHeaderContent={tableHeader}
+						itemContent={itemContent}
+						style={virtuosoTableStyle}
+						components={virtuosoComponents}
+						endReached={onEndReached ? handleEndReached : undefined}
+					/>
+					{isLoading && (
+						<div className={viewStyles.tanstackLoadingOverlay}>
+							<Spinner height="35px" tip={loadingTip} />
+						</div>
+					)}
+					{showPagination && pagination && (
+						<Pagination
+							style={PAGINATION_STYLE}
+							current={page}
+							pageSize={limit}
+							total={pagination.total}
+							showSizeChanger
+							onChange={(p, ps): void => {
+								setPage(p);
+								if (ps != null && ps !== limit) {
+									setLimit(ps);
+								}
+							}}
+						/>
+					)}
+				</TooltipProvider>
+			</RowHoverProvider>
+		</div>
+	);
+}
+
+const TanStackTableForward = forwardRef(TanStackTableInner) as <TData>(
+	props: TanStackTableProps<TData> & {
+		ref?: React.Ref<TanStackTableHandle>;
+	},
+) => JSX.Element;
+
+const TanStackTableBase = memo(
+	TanStackTableForward,
+) as typeof TanStackTableForward;
+
+/**
+ * Virtualized data table built on TanStack Table and `react-virtuoso`: resizable and pinnable columns,
+ * optional drag-to-reorder headers, expandable rows, and Ant Design pagination or infinite scroll.
+ *
+ * @example Minimal usage
+ * ```tsx
+ * import TanStackTable from 'components/TanStackTableView';
+ * import type { TableColumnDef } from 'components/TanStackTableView/types';
+ *
+ * type Row = { id: string; name: string };
+ *
+ * const columns: TableColumnDef<Row>[] = [
+ *   {
+ *     id: 'name',
+ *     header: 'Name',
+ *     accessorKey: 'name',
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value ?? '')}</TanStackTable.Text>,
+ *   },
+ * ];
+ *
+ * function Example(): JSX.Element {
+ *   return <TanStackTable<Row> data={rows} columns={columns} />;
+ * }
+ * ```
+ *
+ * @example Column definitions — `accessorFn`, custom header, pinned column
+ * ```tsx
+ * const columns: TableColumnDef<Row>[] = [
+ *   {
+ *     id: 'id',
+ *     header: 'ID',
+ *     accessorKey: 'id',
+ *     pin: 'left',
+ *     width: { min: 80, default: 120 },
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
+ *   },
+ *   {
+ *     id: 'computed',
+ *     header: () => <span>Computed</span>,
+ *     accessorFn: (row) => row.first + row.last,
+ *     enableMove: false,
+ *     cell: ({ value }) => <TanStackTable.Text>{String(value)}</TanStackTable.Text>,
+ *   },
+ * ];
+ * ```
+ *
+ * @example Controlled column sizing and reorder (persist in parent state)
+ * ```tsx
+ * import type { ColumnSizingState } from '@tanstack/react-table';
+ *
+ * const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
+ *
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   columnSizing={columnSizing}
+ *   onColumnSizingChange={setColumnSizing}
+ *   onColumnOrderChange={setColumns}
+ *   onRemoveColumn={(id) => setColumns((cols) => cols.filter((c) => c.id !== id))}
+ * />
+ * ```
+ *
+ * @example Pagination (Ant Design). Omit `onEndReached` so the footer pager is shown.
+ * ```tsx
+ * <TanStackTable
+ *   data={pageRows}
+ *   columns={columns}
+ *   pagination={{ total: totalCount, defaultPage: 1, defaultLimit: 20 }}
+ *   enableQueryParams
+ * />
+ * ```
+ *
+ * @example Infinite scroll — use `onEndReached` instead of `pagination` (pagination UI is hidden when `onEndReached` is set).
+ * ```tsx
+ * <TanStackTable
+ *   data={accumulatedRows}
+ *   columns={columns}
+ *   onEndReached={(lastIndex) => fetchMore(lastIndex)}
+ * />
+ * ```
+ *
+ * @example Loading overlay and typography for plain string/number cells
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   isLoading={isFetching}
+ *   loadingTip="Loading logs…"
+ *   cellTypographySize="small"
+ *   plainTextCellLineClamp={2}
+ * />
+ * ```
+ *
+ * @example Row styling, selection, and actions
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   isRowActive={(row) => row.id === selectedId}
+ *   activeRowIndex={selectedIndex}
+ *   onRowClick={(row) => setSelectedId(row.id)}
+ *   onRowDeactivate={() => setSelectedId(undefined)}
+ *   getRowClassName={(row) => (row.severity === 'error' ? 'row-error' : '')}
+ *   getRowStyle={(row) => (row.dimmed ? { opacity: 0.5 } : {})}
+ *   renderRowActions={(row) => <Button size="small">Open</Button>}
+ * />
+ * ```
+ *
+ * @example Expandable rows
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   renderExpandedRow={(row) => <pre>{JSON.stringify(row.raw, null, 2)}</pre>}
+ *   getRowCanExpand={(row) => Boolean(row.raw)}
+ * />
+ * ```
+ *
+ * @example Imperative handle — `goToPage` plus Virtuoso methods (e.g. `scrollToIndex`)
+ * ```tsx
+ * import type { TanStackTableHandle } from 'components/TanStackTableView/types';
+ *
+ * const ref = useRef<TanStackTableHandle>(null);
+ *
+ * <TanStackTable ref={ref} data={data} columns={columns} pagination={{ total, defaultLimit: 20 }} />;
+ *
+ * ref.current?.goToPage(2);
+ * ref.current?.scrollToIndex({ index: 0, align: 'start' });
+ * ```
+ *
+ * @example Scroll container props (className, `data-testid`, etc.). `data` is reserved by Virtuoso and cannot be passed here.
+ * ```tsx
+ * <TanStackTable
+ *   data={data}
+ *   columns={columns}
+ *   tableScrollerProps={{ className: 'my-table-scroll', 'data-testid': 'logs-table' }}
+ * />
+ * ```
+ */
+const TanStackTable = Object.assign(TanStackTableBase, {
+	Text: TanStackTableText,
+});
+
+export default TanStackTable;
--- a/frontend/src/components/TanStackTableView/types.ts
+++ b/frontend/src/components/TanStackTableView/types.ts
@@ -0,0 +1,112 @@
+import {
+	CSSProperties,
+	Dispatch,
+	HTMLAttributes,
+	ReactNode,
+	SetStateAction,
+} from 'react';
+import type { TableVirtuosoHandle } from 'react-virtuoso';
+import type {
+	ColumnSizingState,
+	Row as TanStackRowType,
+} from '@tanstack/react-table';
+
+export type SortState = { columnId: string; desc: boolean };
+
+/** Sets `--tanstack-plain-cell-*` on the scroll root via CSS module classes (no data attributes). */
+export type CellTypographySize = 'small' | 'medium' | 'large';
+
+export type TableCellContext<TData> = {
+	row: TData;
+	value: unknown;
+	isActive: boolean;
+	rowIndex: number;
+	isExpanded: boolean;
+	canExpand: boolean;
+	toggleExpanded: () => void;
+};
+
+export type TableColumnDef<TData> = {
+	id: string;
+	header: string | (() => ReactNode);
+	cell: (context: TableCellContext<TData>) => ReactNode;
+	accessorKey?: keyof TData & string;
+	accessorFn?: (row: TData) => unknown;
+	pin?: 'left' | 'right';
+	enableMove?: boolean;
+	enableResize?: boolean;
+	enableRemove?: boolean;
+	enableSort?: boolean;
+	width?: {
+		fixed?: number;
+		min?: number;
+		default?: number;
+	};
+};
+
+export type FlatItem<TData> =
+	| { kind: 'row'; row: TanStackRowType<TData> }
+	| { kind: 'expansion'; row: TanStackRowType<TData> };
+
+export type TableRowContext<TData> = {
+	getRowStyle?: (row: TData) => CSSProperties;
+	getRowClassName?: (row: TData) => string;
+	isRowActive?: (row: TData) => boolean;
+	renderRowActions?: (row: TData) => ReactNode;
+	onRowClick?: (row: TData) => void;
+	onRowDeactivate?: () => void;
+	renderExpandedRow?: (row: TData) => ReactNode;
+	colCount: number;
+	isDarkMode?: boolean;
+	/** When set, primitive cell output (string/number/boolean) is wrapped with typography + line-clamp (see `plainTextCellLineClamp` on the table). */
+	plainTextCellLineClamp?: number;
+};
+
+export type PaginationProps = {
+	total: number;
+	defaultPage?: number;
+	defaultLimit?: number;
+};
+
+export type TanStackTableProps<TData> = {
+	data: TData[];
+	columns: TableColumnDef<TData>[];
+	columnSizing?: ColumnSizingState;
+	onColumnSizingChange?: Dispatch<SetStateAction<ColumnSizingState>>;
+	onColumnOrderChange?: (cols: TableColumnDef<TData>[]) => void;
+	onRemoveColumn?: (id: string) => void;
+	isLoading?: boolean;
+	loadingTip?: string;
+	enableQueryParams?: boolean | string;
+	pagination?: PaginationProps;
+	onEndReached?: (index: number) => void;
+	getRowStyle?: (row: TData) => CSSProperties;
+	getRowClassName?: (row: TData) => string;
+	isRowActive?: (row: TData) => boolean;
+	renderRowActions?: (row: TData) => ReactNode;
+	onRowClick?: (row: TData) => void;
+	onRowDeactivate?: () => void;
+	activeRowIndex?: number;
+	renderExpandedRow?: (row: TData) => ReactNode;
+	getRowCanExpand?: (row: TData) => boolean;
+	/**
+	 * Primitive cell values use `--tanstack-plain-cell-*` from the scroll container when `cellTypographySize` is set.
+	 */
+	plainTextCellLineClamp?: number;
+	/** Optional CSS-module typography tier for the scroll root (`--tanstack-plain-cell-font-size` / line-height + header `th`). */
+	cellTypographySize?: CellTypographySize;
+	/** Spread onto the Virtuoso scroll container. `data` is omitted — reserved by Virtuoso. */
+	tableScrollerProps?: Omit<HTMLAttributes<HTMLDivElement>, 'data'>;
+};
+
+export type TanStackTableHandle = TableVirtuosoHandle & {
+	goToPage: (page: number) => void;
+};
+
+export type TableColumnsState<TData> = {
+	columns: TableColumnDef<TData>[];
+	columnSizing: ColumnSizingState;
+	onColumnSizingChange: Dispatch<SetStateAction<ColumnSizingState>>;
+	onColumnOrderChange: (cols: TableColumnDef<TData>[]) => void;
+	onRemoveColumn: (id: string) => void;
+};
--- a/frontend/src/components/TanStackTableView/useTableColumns.ts
+++ b/frontend/src/components/TanStackTableView/useTableColumns.ts
@@ -0,0 +1,200 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { ColumnSizingState } from '@tanstack/react-table';
+import getFromLocalstorage from 'api/browser/localstorage/get';
+import setToLocalstorage from 'api/browser/localstorage/set';
+
+import { TableColumnDef, TableColumnsState } from './types';
+
+const DEBOUNCE_MS = 250;
+
+type PersistedState = {
+	columnOrder: string[];
+	columnSizing: ColumnSizingState;
+	removedColumnIds: string[];
+};
+
+const EMPTY: PersistedState = {
+	columnOrder: [],
+	columnSizing: {},
+	removedColumnIds: [],
+};
+
+function readStorage(storageKey: string): PersistedState {
+	const raw = getFromLocalstorage(storageKey);
+	if (!raw) {
+		return EMPTY;
+	}
+	try {
+		const parsed = JSON.parse(raw) as PersistedState;
+		return {
+			columnOrder: Array.isArray(parsed.columnOrder) ? parsed.columnOrder : [],
+			columnSizing:
+				parsed.columnSizing && typeof parsed.columnSizing === 'object'
+					? Object.fromEntries(
+							Object.entries(parsed.columnSizing).filter(
+								([, v]) => typeof v === 'number' && Number.isFinite(v) && v > 0,
+							),
+					  )
+					: {},
+			removedColumnIds: Array.isArray(parsed.removedColumnIds)
+				? parsed.removedColumnIds
+				: [],
+		};
+	} catch (e) {
+		console.error('useTableColumns: failed to parse storage', e);
+		return EMPTY;
+	}
+}
+
+type UseTableColumnsOptions = { storageKey?: string };
+
+type UseTableColumnsResult<TData> = {
+	tableProps: TableColumnsState<TData>;
+	activeColumnIds: string[];
+};
+
+export function useTableColumns<TData>(
+	definitions: TableColumnDef<TData>[],
+	options?: UseTableColumnsOptions,
+): UseTableColumnsResult<TData> {
+	const { storageKey } = options ?? {};
+
+	const [persisted, setPersisted] = useState<PersistedState>(() =>
+		storageKey ? readStorage(storageKey) : EMPTY,
+	);
+
+	const [columnSizing, setColumnSizing] = useState<ColumnSizingState>(
+		() => persisted.columnSizing,
+	);
+
+	const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const persistedRef = useRef(persisted);
+	persistedRef.current = persisted;
+	const columnSizingRef = useRef(columnSizing);
+	columnSizingRef.current = columnSizing;
+
+	const scheduleWrite = useCallback(() => {
+		if (!storageKey) {
+			return;
+		}
+		if (pendingRef.current !== null) {
+			clearTimeout(pendingRef.current);
+		}
+		pendingRef.current = setTimeout(() => {
+			setToLocalstorage(
+				storageKey,
+				JSON.stringify({
+					...persistedRef.current,
+					columnSizing: columnSizingRef.current,
+				}),
+			);
+		}, DEBOUNCE_MS);
+	}, [storageKey]);
+
+	useEffect(() => {
+		scheduleWrite();
+		return (): void => {
+			if (pendingRef.current !== null) {
+				clearTimeout(pendingRef.current);
+			}
+		};
+	}, [columnSizing, scheduleWrite]);
+
+	const handleColumnSizingChange: Dispatch<
+		SetStateAction<ColumnSizingState>
+	> = useCallback((updater) => {
+		setColumnSizing((prev) =>
+			typeof updater === 'function' ? updater(prev) : updater,
+		);
+	}, []);
+
+	const handleColumnOrderChange = useCallback(
+		(updated: TableColumnDef<TData>[]) => {
+			const newOrder = updated.map((c) => c.id);
+			setPersisted((prev) => {
+				const next = { ...prev, columnOrder: newOrder };
+				if (storageKey) {
+					setToLocalstorage(
+						storageKey,
+						JSON.stringify({
+							...next,
+							columnSizing: columnSizingRef.current,
+						}),
+					);
+				}
+				return next;
+			});
+		},
+		[storageKey],
+	);
+
+	const handleRemoveColumn = useCallback(
+		(id: string) => {
+			setPersisted((prev) => {
+				if (prev.removedColumnIds.includes(id)) {
+					return prev;
+				}
+				const next = {
+					...prev,
+					removedColumnIds: [...prev.removedColumnIds, id],
+				};
+				if (storageKey) {
+					if (pendingRef.current !== null) {
+						clearTimeout(pendingRef.current);
+					}
+					pendingRef.current = setTimeout(() => {
+						setToLocalstorage(
+							storageKey,
+							JSON.stringify({
+								...next,
+								columnSizing: columnSizingRef.current,
+							}),
+						);
+					}, DEBOUNCE_MS);
+				}
+				return next;
+			});
+		},
+		[storageKey],
+	);
+
+	const columns = useMemo<TableColumnDef<TData>[]>(() => {
+		const removedSet = new Set(persisted.removedColumnIds);
+		const active = definitions.filter((d) => !removedSet.has(d.id));
+
+		if (persisted.columnOrder.length === 0) {
+			return active;
+		}
+
+		const orderMap = new Map(persisted.columnOrder.map((id, i) => [id, i]));
+		const pinned = active.filter((c) => c.pin != null);
+		const rest = active.filter((c) => c.pin == null);
+		const sortedRest = [...rest].sort((a, b) => {
+			const ai = orderMap.get(a.id) ?? Infinity;
+			const bi = orderMap.get(b.id) ?? Infinity;
+			return ai - bi;
+		});
+		return [...pinned, ...sortedRest];
+	}, [definitions, persisted]);
+
+	const activeColumnIds = useMemo(() => columns.map((c) => c.id), [columns]);
+
+	return {
+		tableProps: {
+			columns,
+			columnSizing,
+			onColumnSizingChange: handleColumnSizingChange,
+			onColumnOrderChange: handleColumnOrderChange,
+			onRemoveColumn: handleRemoveColumn,
+		},
+		activeColumnIds,
+	};
+}
--- a/frontend/src/components/TanStackTableView/useTableParams.ts
+++ b/frontend/src/components/TanStackTableView/useTableParams.ts
@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { parseAsInteger, useQueryState } from 'nuqs';
+import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
+
+import { SortState } from './types';
+
+const NUQS_OPTIONS = { history: 'push' as const };
+const DEFAULT_PAGE = 1;
+const DEFAULT_LIMIT = 50;
+
+type Defaults = { page?: number; limit?: number; orderBy?: SortState | null };
+
+type TableParamsResult = {
+	page: number;
+	limit: number;
+	orderBy: SortState | null;
+	setPage: (p: number) => void;
+	setLimit: (l: number) => void;
+	setOrderBy: (s: SortState | null) => void;
+};
+
+export function useTableParams(
+	enableQueryParams?: boolean | string,
+	defaults?: Defaults,
+): TableParamsResult {
+	const prefix = typeof enableQueryParams === 'string' ? enableQueryParams : '';
+	const sep = prefix ? '_' : '';
+	const pageDefault = defaults?.page ?? DEFAULT_PAGE;
+	const limitDefault = defaults?.limit ?? DEFAULT_LIMIT;
+	const orderByDefault = defaults?.orderBy ?? null;
+
+	const [localPage, setLocalPage] = useState(pageDefault);
+	const [localLimit, setLocalLimit] = useState(limitDefault);
+	const [localOrderBy, setLocalOrderBy] = useState<SortState | null>(
+		orderByDefault,
+	);
+
+	const [urlPage, setUrlPage] = useQueryState(
+		`${prefix}${sep}page`,
+		parseAsInteger.withDefault(pageDefault).withOptions(NUQS_OPTIONS),
+	);
+	const [urlLimit, setUrlLimit] = useQueryState(
+		`${prefix}${sep}limit`,
+		parseAsInteger.withDefault(limitDefault).withOptions(NUQS_OPTIONS),
+	);
+	const [urlOrderBy, setUrlOrderBy] = useQueryState(
+		`${prefix}${sep}order_by`,
+		parseAsJsonNoValidate<SortState | null>()
+			.withDefault(orderByDefault as never)
+			.withOptions(NUQS_OPTIONS),
+	);
+
+	if (enableQueryParams) {
+		return {
+			page: urlPage,
+			limit: urlLimit,
+			orderBy: urlOrderBy as SortState | null,
+			setPage: setUrlPage,
+			setLimit: setUrlLimit,
+			setOrderBy: setUrlOrderBy,
+		};
+	}
+
+	return {
+		page: localPage,
+		limit: localLimit,
+		orderBy: localOrderBy,
+		setPage: setLocalPage,
+		setLimit: setLocalLimit,
+		setOrderBy: setLocalOrderBy,
+	};
+}
--- a/frontend/src/components/TanStackTableView/utils.ts
+++ b/frontend/src/components/TanStackTableView/utils.ts
@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { TableColumnDef } from './types';
+
+export const getColumnId = <TData>(column: TableColumnDef<TData>): string =>
+	column.id;
+
+const REM_PX = 16;
+const MIN_WIDTH_DEFAULT_REM = 12;
+
+export const getColumnMinWidthPx = <TData>(
+	column: TableColumnDef<TData>,
+): number => {
+	if (column.width?.fixed != null) {
+		return column.width.fixed;
+	}
+	if (column.width?.min != null) {
+		return column.width.min;
+	}
+	return MIN_WIDTH_DEFAULT_REM * REM_PX;
+};
+
+export function buildTanstackColumnDef<TData>(
+	colDef: TableColumnDef<TData>,
+	isRowActive?: (row: TData) => boolean,
+): ColumnDef<TData> {
+	const isFixed = colDef.width?.fixed != null;
+	const fixedWidth = colDef.width?.fixed;
+	const minWidthPx = getColumnMinWidthPx(colDef);
+	return {
+		id: colDef.id,
+		header:
+			typeof colDef.header === 'string'
+				? colDef.header
+				: (): ReactNode =>
+						typeof colDef.header === 'function' ? colDef.header() : null,
+		accessorFn: (row: TData): unknown => {
+			if (colDef.accessorFn) {
+				return colDef.accessorFn(row);
+			}
+			if (colDef.accessorKey) {
+				return (row as Record<string, unknown>)[colDef.accessorKey];
+			}
+			return undefined;
+		},
+		enableResizing: colDef.enableResize !== false && !isFixed,
+		enableSorting: colDef.enableSort === true,
+		minSize: fixedWidth ?? minWidthPx,
+		size: colDef.width?.default ?? fixedWidth,
+		maxSize: fixedWidth,
+		cell: ({ row, getValue }): ReactNode => {
+			const rowData = row.original;
+			return colDef.cell({
+				row: rowData,
+				value: getValue(),
+				isActive: isRowActive?.(rowData) ?? false,
+				rowIndex: row.index,
+				isExpanded: row.getIsExpanded(),
+				canExpand: row.getCanExpand(),
+				toggleExpanded: (): void => {
+					row.toggleExpanded();
+				},
+			});
+		},
+	};
+}
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -1,19 +1,4 @@
 export const REACT_QUERY_KEY = {
-	// Cloud Integration Query Keys
-	CLOUD_INTEGRATION_ACCOUNTS: 'CLOUD_INTEGRATION_ACCOUNTS',
-	CLOUD_INTEGRATION_SERVICES: 'CLOUD_INTEGRATION_SERVICES',
-	CLOUD_INTEGRATION_SERVICE_DETAILS: 'CLOUD_INTEGRATION_SERVICE_DETAILS',
-	CLOUD_INTEGRATION_ACCOUNT_STATUS: 'CLOUD_INTEGRATION_ACCOUNT_STATUS',
-	CLOUD_INTEGRATION_UPDATE_ACCOUNT_CONFIG:
-		'CLOUD_INTEGRATION_UPDATE_ACCOUNT_CONFIG',
-	CLOUD_INTEGRATION_UPDATE_SERVICE_CONFIG:
-		'CLOUD_INTEGRATION_UPDATE_SERVICE_CONFIG',
-	CLOUD_INTEGRATION_GENERATE_CONNECTION_URL:
-		'CLOUD_INTEGRATION_GENERATE_CONNECTION_URL',
-	CLOUD_INTEGRATION_GET_CONNECTION_PARAMS:
-		'CLOUD_INTEGRATION_GET_CONNECTION_PARAMS',
-	CLOUD_INTEGRATION_GET_DEPLOYMENT_COMMANDS:
-		'CLOUD_INTEGRATION_GET_DEPLOYMENT_COMMANDS',
 	/**
 	 * For any query that should support AutoRefresh and min/max time is from DateTimeSelectionV2
 	 * You can prefix the query with this KEY, it will allow the queries to be automatically refreshed
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -65,7 +65,6 @@ 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',
--- a/frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx
+++ b/frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx
@@ -0,0 +1,24 @@
+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;
--- a/frontend/src/container/Integrations/CloudIntegration/Header/Header.styles.scss
+++ b/frontend/src/container/Integrations/CloudIntegration/Header/Header.styles.scss
@@ -48,7 +48,7 @@

 .lightMode {
 	.cloud-header {
-		border-bottom: 1px solid var(--bg-vanilla-300);
+		border-bottom: 1px solid var(--bg-slate-300);

 		&__breadcrumb-title {
 			color: var(--bg-ink-400);
--- a/frontend/src/container/Integrations/CloudIntegration/Header/Header.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/Header/Header.tsx
@@ -1,13 +1,11 @@
 import { Link } from 'react-router-dom';
-import { Button } from '@signozhq/button';
-import Breadcrumb from 'antd/es/breadcrumb';
+import { Breadcrumb } from 'antd';
 import ROUTES from 'constants/routes';
-import { IntegrationType } from 'container/Integrations/types';
 import { Blocks, LifeBuoy } from 'lucide-react';

 import './Header.styles.scss';

-function Header({ title }: { title: IntegrationType }): JSX.Element {
+function Header(): JSX.Element {
 	return (
 		<div className="cloud-header">
 			<div className="cloud-header__navigation">
@@ -25,26 +23,25 @@ function Header({ title }: { title: IntegrationType }): JSX.Element {
 							),
 						},
 						{
-							title: <div className="cloud-header__breadcrumb-title">{title}</div>,
+							title: (
+								<div className="cloud-header__breadcrumb-title">
+									Amazon Web Services
+								</div>
+							),
 						},
 					]}
 				/>
 			</div>
 			<div className="cloud-header__actions">
-				<Button
-					variant="solid"
-					size="sm"
-					color="secondary"
-					onClick={(): void => {
-						window.open(
-							'https://signoz.io/blog/native-aws-integrations-with-autodiscovery/',
-							'_blank',
-						);
-					}}
-					prefixIcon={<LifeBuoy size={12} />}
+				<a
+					href="https://signoz.io/blog/native-aws-integrations-with-autodiscovery/"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="cloud-header__help"
 				>
+					<LifeBuoy size={12} />
 					Get Help
-				</Button>
+				</a>
 			</div>
 		</div>
 	);
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/HeroSection.style.scss
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/HeroSection.style.scss
@@ -1,10 +1,8 @@
 .hero-section {
-	padding: 16px;
-
+	height: 308px;
+	padding: 26px 16px;
 	display: flex;
-	flex-direction: column;
-	gap: 16px;
-
+	gap: 24px;
 	position: relative;
 	overflow: hidden;
 	background-position: right;
@@ -12,37 +10,35 @@
 	background-repeat: no-repeat;
 	border-bottom: 1px solid var(--bg-slate-500);

+	&__icon {
+		height: fit-content;
+		background-color: var(--bg-ink-400);
+		padding: 12px;
+		border: 1px solid var(--bg-ink-300);
+		border-radius: 6px;
+		width: 60px;
+		height: 60px;
+		display: flex;
+		align-items: center;
+		img {
+			width: 100%;
+		}
+	}
+
 	&__details {
 		display: flex;
 		flex-direction: column;
 		gap: 12px;

-		&-header {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			gap: 16px;
-
-			&__icon {
-				height: fit-content;
-				background-color: var(--bg-ink-400);
-				padding: 12px;
-				border: 1px solid var(--bg-ink-300);
-				border-radius: 6px;
-				width: 60px;
-				height: 60px;
-			}
-
-			&__title {
-				color: var(--bg-vanilla-100);
-				font-size: 24px;
-				font-weight: 500;
-				line-height: 20px;
-				letter-spacing: -0.12px;
-			}
+		.title {
+			color: var(--bg-vanilla-100);
+			font-size: 24px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: -0.12px;
 		}

-		&__description {
+		.description {
 			color: var(--bg-vanilla-400);
 			font-size: 12px;
 			font-weight: 400;
--- a/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx
@@ -0,0 +1,34 @@
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+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('/Images/integrations-hero-bg.png')`,
+					  }
+					: {}
+			}
+		>
+			<div className="hero-section__icon">
+				<img src="/Logos/aws-dark.svg" 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;
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountActions.style.scss
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountActions.style.scss
@@ -4,57 +4,14 @@

 		&-with-account {
 			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			flex-wrap: wrap;
-			gap: 16px;
-
-			border-radius: 4px;
-			border: 1px solid var(--l3-background);
-			background: var(--l1-background);
-
-			.selected-cloud-integration-account-status {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				border-right: 1px solid var(--l3-background);
-				border-radius: none;
-				width: 32px;
-			}
-
-			&-selector-container {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-
-				.account-selector-label {
-					color: var(--bg-vanilla-400);
-					font-size: 12px;
-					font-weight: 400;
-					line-height: 16px;
-					padding: 8px 16px;
-				}
-
-				.account-selector {
-					.ant-select {
-						background-color: transparent !important;
-						border: none !important;
-						box-shadow: none !important;
-
-						.ant-select-selector {
-							background: transparent !important;
-							border: none !important;
-							box-shadow: none !important;
-						}
-					}
-				}
-			}
+			flex-direction: column;
+			gap: 10px;
 		}
 	}

 	&__input-skeleton {
 		width: 300px;
+		margin-bottom: 16px;
 	}

 	&__new-account-button-skeleton {
@@ -65,13 +22,11 @@
 	&__account-settings-button-skeleton {
 		width: 140px;
 	}
-
 	&__action-buttons {
 		display: flex;
 		align-items: center;
 		gap: 8px;
 	}
-
 	&__action-button {
 		font-family: 'Inter';
 		border-radius: 2px;
@@ -99,6 +54,44 @@
 	}
 }

+.cloud-account-selector {
+	border-radius: 2px;
+	border: 1px solid var(--bg-ink-300);
+	background: linear-gradient(
+		139deg,
+		rgba(18, 19, 23, 0.8) 0%,
+		rgba(18, 19, 23, 0.9) 98.68%
+	);
+	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	.ant-select-selector {
+		border-color: var(--bg-slate-400) !important;
+		background: var(--bg-ink-300) !important;
+		padding: 6px 8px !important;
+	}
+	.ant-select-selection-item {
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+	}
+
+	.account-option-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		&__selected {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 14px;
+			width: 14px;
+			background-color: rgba(192, 193, 195, 0.2); /* #C0C1C3 with 0.2 opacity */
+			border-radius: 2px;
+		}
+	}
+}
 .lightMode {
 	.hero-section__action-button {
 		&.primary {
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountActions.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountActions.tsx
@@ -1,21 +1,58 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
-import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { Select, Skeleton } from 'antd';
-import { SelectProps } from 'antd/lib';
+import { Button, Select, Skeleton } from 'antd';
+import type { SelectProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
-import { getAccountById } from 'container/Integrations/CloudIntegration/utils';
-import { useGetCloudIntegrationAccounts } from 'hooks/integration/useGetCloudIntegrationAccounts';
+import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { ChevronDown, Dot, PencilLine, Plug, Plus } from 'lucide-react';
+import { Check, ChevronDown } from 'lucide-react';

-import { CloudAccount } from '../../types';
+import { CloudAccount } from '../../ServicesSection/types';
 import AccountSettingsModal from './AccountSettingsModal';
 import CloudAccountSetupModal from './CloudAccountSetupModal';

 import './AccountActions.style.scss';

+interface AccountOptionItemProps {
+	label: React.ReactNode;
+	isSelected: boolean;
+}
+
+function AccountOptionItem({
+	label,
+	isSelected,
+}: AccountOptionItemProps): JSX.Element {
+	return (
+		<div className="account-option-item">
+			{label}
+			{isSelected && (
+				<div className="account-option-item__selected">
+					<Check size={12} color={Color.BG_VANILLA_100} />
+				</div>
+			)}
+		</div>
+	);
+}
+
+function renderOption(
+	option: any,
+	activeAccountId: string | undefined,
+): JSX.Element {
+	return (
+		<AccountOptionItem
+			label={option.label}
+			isSelected={option.value === activeAccountId}
+		/>
+	);
+}
+
+const getAccountById = (
+	accounts: CloudAccount[],
+	accountId: string,
+): CloudAccount | null =>
+	accounts.find((account) => account.cloud_account_id === accountId) || null;
+
 function AccountActionsRenderer({
 	accounts,
 	isLoading,
@@ -36,51 +73,55 @@ function AccountActionsRenderer({
 	if (isLoading) {
 		return (
 			<div className="hero-section__actions-with-account">
-				<Skeleton.Input active block className="hero-section__input-skeleton" />
+				<Skeleton.Input
+					active
+					size="large"
+					block
+					className="hero-section__input-skeleton"
+				/>
+				<div className="hero-section__action-buttons">
+					<Skeleton.Button
+						active
+						size="large"
+						className="hero-section__new-account-button-skeleton"
+					/>
+					<Skeleton.Button
+						active
+						size="large"
+						className="hero-section__account-settings-button-skeleton"
+					/>
+				</div>
 			</div>
 		);
 	}
-
 	if (accounts?.length) {
 		return (
 			<div className="hero-section__actions-with-account">
-				<div className="hero-section__actions-with-account-selector-container">
-					<div className="selected-cloud-integration-account-status">
-						<Dot size={24} color={Color.BG_FOREST_500} />
-					</div>
-
-					<div className="account-selector-label">Account:</div>
-
-					<span className="account-selector">
-						<Select
-							value={activeAccount?.cloud_account_id}
-							options={selectOptions}
-							rootClassName="cloud-account-selector"
-							placeholder="Select AWS Account"
-							suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
-							onChange={onAccountChange}
-						/>
-					</span>
-				</div>
+				<Select
+					value={`Account: ${activeAccount?.cloud_account_id}`}
+					options={selectOptions}
+					rootClassName="cloud-account-selector"
+					placeholder="Select AWS Account"
+					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
+					optionRender={(option): JSX.Element =>
+						renderOption(option, activeAccount?.cloud_account_id)
+					}
+					onChange={onAccountChange}
+				/>
 				<div className="hero-section__action-buttons">
 					<Button
-						variant="link"
-						size="sm"
-						color="secondary"
-						prefixIcon={<PencilLine size={14} />}
+						type="primary"
+						className="hero-section__action-button primary"
+						onClick={onIntegrationModalOpen}
+					>
+						Add New AWS Account
+					</Button>
+					<Button
+						type="default"
+						className="hero-section__action-button secondary"
 						onClick={onAccountSettingsModalOpen}
 					>
-						Edit Account
-					</Button>
-
-					<Button
-						variant="link"
-						size="sm"
-						color="secondary"
-						onClick={onIntegrationModalOpen}
-						prefixIcon={<Plus size={14} />}
-					>
-						Add New Account
+						Account Settings
 					</Button>
 				</div>
 			</div>
@@ -88,11 +129,8 @@ function AccountActionsRenderer({
 	}
 	return (
 		<Button
-			variant="solid"
-			color="primary"
-			prefixIcon={<Plug size={14} />}
+			className="hero-section__action-button primary"
 			onClick={onIntegrationModalOpen}
-			size="sm"
 		>
 			Integrate Now
 		</Button>
@@ -102,7 +140,7 @@ function AccountActionsRenderer({
 function AccountActions(): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
-	const { data: accounts, isLoading } = useGetCloudIntegrationAccounts('aws');
+	const { data: accounts, isLoading } = useAwsAccounts();

 	const initialAccount = useMemo(
 		() =>
@@ -124,13 +162,7 @@ function AccountActions(): JSX.Element {
 			const latestUrlQuery = new URLSearchParams(window.location.search);
 			latestUrlQuery.set('cloudAccountId', initialAccount.cloud_account_id);
 			navigate({ search: latestUrlQuery.toString() });
-			return;
 		}
-
-		setActiveAccount(null);
-		const latestUrlQuery = new URLSearchParams(window.location.search);
-		latestUrlQuery.delete('cloudAccountId');
-		navigate({ search: latestUrlQuery.toString() });
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [initialAccount]);

--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountSettingsModal.style.scss
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountSettingsModal.style.scss
@@ -14,13 +14,8 @@
 		border-radius: 3px;
 		border: 1px solid var(--bg-slate-500);
 		padding: 14px;
-
 		&-account-info {
 			&-connected-account-details {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-
 				&-title {
 					color: var(--bg-vanilla-100);
 					font-size: 14px;
@@ -43,36 +38,40 @@
 				}
 			}
 		}
-
-		&-region-selector {
+		&-regions-switch {
 			display: flex;
 			flex-direction: column;
-			gap: 4px;
-
+			gap: 10px;
 			&-title {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				font-size: 14px;
 				font-weight: 500;
 				line-height: 20px;
 				letter-spacing: -0.07px;
 			}
-
-			&-description {
-				color: var(--l2-foreground);
-				font-size: 12px;
-				line-height: 18px;
-				letter-spacing: -0.06px;
+			&-switch {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				&-label {
+					color: var(--bg-vanilla-400);
+					background-color: transparent;
+					border: none;
+					font-family: Inter;
+					font-size: 12px;
+					font-weight: 400;
+					line-height: 18px;
+					letter-spacing: -0.005em;
+					cursor: pointer;
+				}
 			}
 		}
+		&-regions-select {
+			margin-top: 8px;
+		}
 	}

 	&__footer {
-		padding: 16px;
-		display: flex;
-		flex-direction: row;
-		gap: 10px;
-		justify-content: space-between;
-
 		&-close-button,
 		&-save-button {
 			color: var(--bg-vanilla-100);
--- a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx
@@ -0,0 +1,213 @@
+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;
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AlertMessage.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AlertMessage.tsx
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.style.scss
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.style.scss
@@ -1,26 +1,4 @@
 .cloud-account-setup-modal {
-	> div {
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-	}
-
-	&__content {
-		flex: 1;
-		overflow-y: auto;
-		min-height: 0;
-		scrollbar-width: thin;
-
-		&::-webkit-scrollbar {
-			width: 2px;
-		}
-	}
-
-	&__footer {
-		padding: 16px;
-		margin-bottom: 16px;
-	}
-
 	.account-setup-modal-footer {
 		&__confirm-button {
 			background: var(--bg-robin-500);
@@ -42,8 +20,6 @@
 	}

 	.cloud-account-setup-form {
-		padding: 16px;
-
 		.disabled {
 			opacity: 0.4;
 		}
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.tsx
@@ -1,8 +1,7 @@
 import { useCallback } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
-import { DrawerWrapper } from '@signozhq/drawer';
+import SignozModal from 'components/SignozModal/SignozModal';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useIntegrationModal } from 'hooks/integration/aws/useIntegrationModal';
 import { SquareArrowOutUpRight } from 'lucide-react';
@@ -13,6 +12,7 @@ import {
 	ModalStateEnum,
 } from '../types';
 import { RegionForm } from './RegionForm';
+import { RegionSelector } from './RegionSelector';
 import { SuccessView } from './SuccessView';

 import './CloudAccountSetupModal.style.scss';
@@ -32,11 +32,14 @@ function CloudAccountSetupModal({
 		isGeneratingUrl,
 		setSelectedRegions,
 		setIncludeAllRegions,
+		handleIncludeAllRegionsChange,
 		handleRegionSelect,
 		handleSubmit,
 		handleClose,
 		setActiveView,
+		allRegions,
 		accountId,
+		selectedDeploymentRegion,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
@@ -47,47 +50,45 @@ function CloudAccountSetupModal({
 			return <SuccessView />;
 		}

-		return (
-			<div className="cloud-account-setup-modal__content">
-				<RegionForm
-					form={form}
-					modalState={modalState}
-					setModalState={setModalState}
+		if (activeView === ActiveViewEnum.SELECT_REGIONS) {
+			return (
+				<RegionSelector
 					selectedRegions={selectedRegions}
-					includeAllRegions={includeAllRegions}
-					onRegionSelect={handleRegionSelect}
-					onSubmit={handleSubmit}
-					accountId={accountId}
-					handleRegionChange={handleRegionChange}
-					connectionParams={connectionParams}
-					isConnectionParamsLoading={isConnectionParamsLoading}
 					setSelectedRegions={setSelectedRegions}
 					setIncludeAllRegions={setIncludeAllRegions}
 				/>
+			);
+		}

-				<div className="cloud-account-setup-modal__footer">
-					<Button
-						variant="solid"
-						color="primary"
-						prefixIcon={
-							<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />
-						}
-						onClick={handleSubmit}
-					>
-						Launch Cloud Formation Template
-					</Button>
-				</div>
-			</div>
+		return (
+			<RegionForm
+				form={form}
+				modalState={modalState}
+				setModalState={setModalState}
+				selectedRegions={selectedRegions}
+				includeAllRegions={includeAllRegions}
+				onIncludeAllRegionsChange={handleIncludeAllRegionsChange}
+				onRegionSelect={handleRegionSelect}
+				onSubmit={handleSubmit}
+				accountId={accountId}
+				selectedDeploymentRegion={selectedDeploymentRegion}
+				handleRegionChange={handleRegionChange}
+				connectionParams={connectionParams}
+				isConnectionParamsLoading={isConnectionParamsLoading}
+			/>
 		);
 	}, [
 		modalState,
+		activeView,
 		form,
 		setModalState,
 		selectedRegions,
 		includeAllRegions,
+		handleIncludeAllRegionsChange,
 		handleRegionSelect,
 		handleSubmit,
 		accountId,
+		selectedDeploymentRegion,
 		handleRegionChange,
 		connectionParams,
 		isConnectionParamsLoading,
@@ -96,8 +97,9 @@ function CloudAccountSetupModal({
 	]);

 	const getSelectedRegionsCount = useCallback(
-		(): number => selectedRegions.length,
-		[selectedRegions],
+		(): number =>
+			selectedRegions.includes('all') ? allRegions.length : selectedRegions.length,
+		[selectedRegions, allRegions],
 	);

 	const getModalConfig = useCallback(() => {
@@ -160,39 +162,28 @@ function CloudAccountSetupModal({

 	const modalConfig = getModalConfig();

-	const handleDrawerOpenChange = (open: boolean): void => {
-		if (!open) {
-			handleClose();
-		}
-	};
-
 	return (
-		<DrawerWrapper
-			open={true}
-			type="panel"
+		<SignozModal
+			open
 			className="cloud-account-setup-modal"
-			// allowOutsideClick={false}
-			content={renderContent()}
-			onOpenChange={handleDrawerOpenChange}
-			direction="right"
-			showCloseButton
-			header={{
-				title: modalConfig.title,
+			title={modalConfig.title}
+			onCancel={handleClose}
+			onOk={modalConfig.onOk}
+			okText={modalConfig.okText}
+			okButtonProps={{
+				loading: isLoading,
+				disabled: selectedRegions.length === 0 || modalConfig.disabled,
+				className:
+					activeView === ActiveViewEnum.FORM
+						? 'cloud-account-setup-form__submit-button'
+						: 'account-setup-modal-footer__confirm-button',
+				block: activeView === ActiveViewEnum.FORM,
 			}}
-			// onCancel={handleClose}
-			// onOk={modalConfig.onOk}
-			// okText={modalConfig.okText}
-			// okButtonProps={{
-			// 	loading: isLoading,
-			// 	disabled: selectedRegions.length === 0 || modalConfig.disabled,
-			// 	className:
-			// 		activeView === ActiveViewEnum.FORM
-			// 			? 'cloud-account-setup-form__submit-button'
-			// 			: 'account-setup-modal-footer__confirm-button',
-			// 	block: activeView === ActiveViewEnum.FORM,
-			// }}
-			// cancelButtonProps={modalConfig.cancelButtonProps}
-		/>
+			cancelButtonProps={modalConfig.cancelButtonProps}
+			width={672}
+		>
+			{renderContent()}
+		</SignozModal>
 	);
 }

--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/IntegrateNowFormSections.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/IntegrateNowFormSections.tsx
@@ -1,19 +1,17 @@
-import { Dispatch, SetStateAction } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Form, Select } from 'antd';
+import { Form, Select, Switch } from 'antd';
 import { ChevronDown } from 'lucide-react';
 import { Region } from 'utils/regions';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { RegionSelector } from './RegionSelector';

 // Form section components
 function RegionDeploymentSection({
 	regions,
+	selectedDeploymentRegion,
 	handleRegionChange,
 	isFormDisabled,
 }: {
 	regions: Region[];
+	selectedDeploymentRegion: string | undefined;
 	handleRegionChange: (value: string) => void;
 	isFormDisabled: boolean;
 }): JSX.Element {
@@ -35,8 +33,8 @@ function RegionDeploymentSection({
 					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
 					className="cloud-account-setup-form__select integrations-select"
 					onChange={handleRegionChange}
+					value={selectedDeploymentRegion}
 					disabled={isFormDisabled}
-					getPopupContainer={popupContainer}
 				>
 					{regions.flatMap((region) =>
 						region.subRegions.map((subRegion) => (
@@ -52,13 +50,19 @@ function RegionDeploymentSection({
 }

 function MonitoringRegionsSection({
+	includeAllRegions,
 	selectedRegions,
-	setSelectedRegions,
-	setIncludeAllRegions,
+	onIncludeAllRegionsChange,
+	getRegionPreviewText,
+	onRegionSelect,
+	isFormDisabled,
 }: {
+	includeAllRegions: boolean;
 	selectedRegions: string[];
-	setSelectedRegions: Dispatch<SetStateAction<string[]>>;
-	setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
+	onIncludeAllRegionsChange: (checked: boolean) => void;
+	getRegionPreviewText: (regions: string[]) => string[];
+	onRegionSelect: () => void;
+	isFormDisabled: boolean;
 }): JSX.Element {
 	return (
 		<div className="cloud-account-setup-form__form-group">
@@ -69,12 +73,51 @@ function MonitoringRegionsSection({
 				Choose only the regions you want SigNoz to monitor. You can enable all at
 				once, or pick specific ones:
 			</div>
-
-			<RegionSelector
-				selectedRegions={selectedRegions}
-				setSelectedRegions={setSelectedRegions}
-				setIncludeAllRegions={setIncludeAllRegions}
-			/>
+			<Form.Item
+				name="monitorRegions"
+				rules={[
+					{
+						validator: async (): Promise<void> => {
+							if (selectedRegions.length === 0) {
+								return Promise.reject();
+							}
+							return Promise.resolve();
+						},
+						message: 'Please select at least one region to monitor',
+					},
+				]}
+				className="cloud-account-setup-form__form-item"
+			>
+				<div className="cloud-account-setup-form__include-all-regions-switch">
+					<Switch
+						size="small"
+						checked={includeAllRegions}
+						onChange={onIncludeAllRegionsChange}
+						disabled={isFormDisabled}
+					/>
+					<button
+						className="cloud-account-setup-form__include-all-regions-switch-label"
+						type="button"
+						onClick={(): void =>
+							!isFormDisabled
+								? onIncludeAllRegionsChange(!includeAllRegions)
+								: undefined
+						}
+					>
+						Include all regions
+					</button>
+				</div>
+				<Select
+					suffixIcon={null}
+					placeholder="Select Region(s)"
+					className="cloud-account-setup-form__select integrations-select"
+					onClick={!isFormDisabled ? onRegionSelect : undefined}
+					mode="multiple"
+					maxTagCount={3}
+					value={getRegionPreviewText(selectedRegions)}
+					open={false}
+				/>
+			</Form.Item>
 		</div>
 	);
 }
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RegionForm.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RegionForm.tsx
@@ -1,11 +1,11 @@
 import { useRef } from 'react';
 import { Form } from 'antd';
-import { useGetAccount } from 'api/generated/services/cloudintegration';
 import cx from 'classnames';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+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 logEvent from '../../../../api/common/logEvent';
 import { ModalStateEnum, RegionFormProps } from '../types';
 import AlertMessage from './AlertMessage';
 import {
@@ -15,59 +15,56 @@ import {
 } 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,
-	setSelectedRegions,
-	setIncludeAllRegions,
 }: RegionFormProps): JSX.Element {
 	const startTimeRef = useRef(Date.now());
 	const refetchInterval = 10 * 1000;
 	const errorTimeout = 10 * 60 * 1000;

-	const { isLoading: isAccountStatusLoading } = useGetAccount(
-		{
-			cloudProvider: INTEGRATION_TYPES.AWS,
-			id: accountId ?? '',
+	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,
+				});
+			}
 		},
-		{
-			query: {
-				refetchInterval,
-				enabled: !!accountId && modalState === ModalStateEnum.WAITING,
-				onSuccess: (response) => {
-					const isConnected =
-						Boolean(response.data.providerAccountId) &&
-						response.data.removedAt === null;
-
-					if (isConnected) {
-						const cloudAccountId =
-							response.data.providerAccountId ?? response.data.id;
-
-						setModalState(ModalStateEnum.SUCCESS);
-						logEvent('AWS Integration: Account connected', {
-							cloudAccountId,
-							status: response.data.agentReport,
-						});
-					} else if (Date.now() - startTimeRef.current >= errorTimeout) {
-						setModalState(ModalStateEnum.ERROR);
-						logEvent('AWS Integration: Account connection attempt timed out', {
-							id: accountId,
-						});
-					}
-				},
-				onError: () => {
-					setModalState(ModalStateEnum.ERROR);
-				},
-			},
+		onError: () => {
+			setModalState(ModalStateEnum.ERROR);
 		},
-	);
+	});

 	const isFormDisabled =
 		modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
@@ -90,11 +87,15 @@ export function RegionForm({
 					regions={regions}
 					handleRegionChange={handleRegionChange}
 					isFormDisabled={isFormDisabled}
+					selectedDeploymentRegion={selectedDeploymentRegion}
 				/>
 				<MonitoringRegionsSection
+					includeAllRegions={includeAllRegions}
 					selectedRegions={selectedRegions}
-					setSelectedRegions={setSelectedRegions}
-					setIncludeAllRegions={setIncludeAllRegions}
+					onIncludeAllRegionsChange={onIncludeAllRegionsChange}
+					getRegionPreviewText={getRegionPreviewText}
+					onRegionSelect={onRegionSelect}
+					isFormDisabled={isFormDisabled}
 				/>
 				<ComplianceNote />
 				<RenderConnectionFields
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RegionSelector.style.scss
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RegionSelector.style.scss
@@ -1,6 +1,5 @@
 .select-all {
-	margin-top: 16px;
-	margin-bottom: 16px;
+	margin-bottom: 20px;
 }

 .regions-grid {
@@ -20,11 +19,3 @@
 	gap: 10px;
 	align-items: center;
 }
-
-.region-selector-footer {
-	margin-top: 36px;
-
-	display: flex;
-	justify-content: flex-end;
-	gap: 8px;
-}
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RegionSelector.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RegionSelector.tsx
@@ -28,12 +28,10 @@ export function RegionSelector({
 		<div className="region-selector">
 			<div className="select-all">
 				<Checkbox
-					checked={
-						allRegionIds.length > 0 &&
-						allRegionIds.every((regionId) => selectedRegions.includes(regionId))
-					}
+					checked={selectedRegions.includes('all')}
 					indeterminate={
-						selectedRegions.length > 0 && selectedRegions.length < allRegionIds.length
+						selectedRegions.length > 20 &&
+						selectedRegions.length < allRegionIds.length
 					}
 					onChange={(e): void => handleSelectAll(e.target.checked)}
 				>
@@ -48,7 +46,10 @@ export function RegionSelector({
 						{region.subRegions.map((subRegion) => (
 							<Checkbox
 								key={subRegion.id}
-								checked={selectedRegions.includes(subRegion.id)}
+								checked={
+									selectedRegions.includes('all') ||
+									selectedRegions.includes(subRegion.id)
+								}
 								onChange={(): void => handleRegionSelect(subRegion.id)}
 							>
 								{subRegion.name}
--- a/frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.scss
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.scss
@@ -0,0 +1,47 @@
+.remove-integration-account {
+	display: flex;
+	justify-content: space-between;
+	padding: 16px;
+	border-radius: 4px;
+	border: 1px solid rgba(218, 85, 101, 0.2);
+	background: rgba(218, 85, 101, 0.06);
+	&__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(--bg-vanilla-100);
+		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(--bg-vanilla-300) !important;
+			}
+		}
+	}
+}
--- a/frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.tsx
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.tsx
@@ -0,0 +1,94 @@
+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;
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RenderConnectionParams.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RenderConnectionParams.tsx
@@ -1,5 +1,5 @@
 import { Form, Input } from 'antd';
-import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
+import { ConnectionParams } from 'types/api/integrations/aws';

 function RenderConnectionFields({
 	isConnectionParamsLoading,
@@ -7,51 +7,51 @@ function RenderConnectionFields({
 	isFormDisabled,
 }: {
 	isConnectionParamsLoading?: boolean;
-	connectionParams?: CloudintegrationtypesCredentialsDTO | null;
+	connectionParams?: ConnectionParams | null;
 	isFormDisabled?: boolean;
 }): JSX.Element | null {
 	if (
 		isConnectionParamsLoading ||
-		(!!connectionParams?.ingestionUrl &&
-			!!connectionParams?.ingestionKey &&
-			!!connectionParams?.sigNozApiUrl &&
-			!!connectionParams?.sigNozApiKey)
+		(!!connectionParams?.ingestion_url &&
+			!!connectionParams?.ingestion_key &&
+			!!connectionParams?.signoz_api_url &&
+			!!connectionParams?.signoz_api_key)
 	) {
 		return null;
 	}

 	return (
-		<Form.Item name="connectionParams">
-			{!connectionParams?.ingestionUrl && (
+		<Form.Item name="connection_params">
+			{!connectionParams?.ingestion_url && (
 				<Form.Item
-					name="ingestionUrl"
+					name="ingestion_url"
 					label="Ingestion URL"
 					rules={[{ required: true, message: 'Please enter ingestion URL' }]}
 				>
 					<Input placeholder="Enter ingestion URL" disabled={isFormDisabled} />
 				</Form.Item>
 			)}
-			{!connectionParams?.ingestionKey && (
+			{!connectionParams?.ingestion_key && (
 				<Form.Item
-					name="ingestionKey"
+					name="ingestion_key"
 					label="Ingestion Key"
 					rules={[{ required: true, message: 'Please enter ingestion key' }]}
 				>
 					<Input placeholder="Enter ingestion key" disabled={isFormDisabled} />
 				</Form.Item>
 			)}
-			{!connectionParams?.sigNozApiUrl && (
+			{!connectionParams?.signoz_api_url && (
 				<Form.Item
-					name="sigNozApiUrl"
+					name="signoz_api_url"
 					label="SigNoz API URL"
 					rules={[{ required: true, message: 'Please enter SigNoz API URL' }]}
 				>
 					<Input placeholder="Enter SigNoz API URL" disabled={isFormDisabled} />
 				</Form.Item>
 			)}
-			{!connectionParams?.sigNozApiKey && (
+			{!connectionParams?.signoz_api_key && (
 				<Form.Item
-					name="sigNozApiKey"
+					name="signoz_api_key"
 					label="SigNoz API KEY"
 					rules={[{ required: true, message: 'Please enter SigNoz API Key' }]}
 				>
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/SuccessView.style.scss
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/SuccessView.style.scss
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/SuccessView.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/SuccessView.tsx
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/types.ts
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/types.ts
@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { FormInstance } from 'antd';
-import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
+import { ConnectionParams } from 'types/api/integrations/aws';

 export enum ActiveViewEnum {
 	SELECT_REGIONS = 'select-regions',
@@ -20,14 +20,14 @@ export interface RegionFormProps {
 	setModalState: Dispatch<SetStateAction<ModalStateEnum>>;
 	selectedRegions: string[];
 	includeAllRegions: boolean;
+	onIncludeAllRegionsChange: (checked: boolean) => void;
 	onRegionSelect: () => void;
 	onSubmit: () => Promise<void>;
 	accountId?: string;
+	selectedDeploymentRegion: string | undefined;
 	handleRegionChange: (value: string) => void;
-	connectionParams?: CloudintegrationtypesCredentialsDTO;
+	connectionParams?: ConnectionParams;
 	isConnectionParamsLoading?: boolean;
-	setSelectedRegions: Dispatch<SetStateAction<string[]>>;
-	setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
 }

 export interface IntegrationModalProps {
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/CloudServiceDashboards.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/CloudServiceDashboards.tsx
@@ -0,0 +1,50 @@
+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;
--- a/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx
+++ b/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx
@@ -1,18 +1,13 @@
 import { Table } from 'antd';
-import {
-	CloudintegrationtypesCollectedLogAttributeDTO,
-	CloudintegrationtypesCollectedMetricDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { BarChart2, ScrollText } from 'lucide-react';

-import './CloudServiceDataCollected.styles.scss';
+import { ServiceData } from './types';

 function CloudServiceDataCollected({
 	logsData,
 	metricsData,
 }: {
-	logsData: CloudintegrationtypesCollectedLogAttributeDTO[] | null | undefined;
-	metricsData: CloudintegrationtypesCollectedMetricDTO[] | null | undefined;
+	logsData: ServiceData['data_collected']['logs'];
+	metricsData: ServiceData['data_collected']['metrics'];
 }): JSX.Element {
 	const logsColumns = [
 		{
@@ -66,30 +61,24 @@ 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">
-						<ScrollText size={14} />
-						Logs
-					</div>
+				<div className="cloud-service-data-collected__table">
+					<div className="cloud-service-data-collected__table-heading">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">
-						<BarChart2 size={14} />
-						Metrics
-					</div>
+				<div className="cloud-service-data-collected__table">
+					<div className="cloud-service-data-collected__table-heading">Metrics</div>
 					<Table
 						columns={metricsColumns}
 						dataSource={metricsData}
 						{...tableProps}
-						className="cloud-service-data-collected-table-metrics"
+						className="cloud-service-data-collected__table-metrics"
 					/>
 				</div>
 			)}
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.styles.scss
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.styles.scss
@@ -0,0 +1,89 @@
+.configure-service-modal {
+	&__body {
+		display: flex;
+		flex-direction: column;
+		border-radius: 3px;
+		border: 1px solid var(--bg-slate-500);
+		padding: 14px;
+
+		&-regions-switch-switch {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			&-label {
+				color: var(--bg-vanilla-100);
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+		}
+
+		&-switch-description {
+			margin-top: 4px;
+			color: var(--bg-vanilla-400);
+			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(--bg-vanilla-300);
+
+			&-regions-switch-switch {
+				&-label {
+					color: var(--bg-ink-500);
+				}
+			}
+
+			&-switch-description {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		.ant-btn {
+			&.ant-btn-default {
+				background: var(--bg-vanilla-100);
+				border: 1px solid var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+
+				&:hover {
+					border-color: var(--bg-vanilla-400);
+					color: var(--bg-ink-500);
+				}
+			}
+
+			&.ant-btn-primary {
+				// Keep primary button same as dark mode
+				background: var(--bg-robin-500);
+				color: var(--bg-vanilla-100);
+
+				&:hover {
+					background: var(--bg-robin-400);
+				}
+
+				&:disabled {
+					opacity: 0.6;
+				}
+			}
+		}
+	}
+}
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx
@@ -0,0 +1,243 @@
+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;
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/S3BucketsSelector/S3BucketsSelector.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/S3BucketsSelector/S3BucketsSelector.tsx
@@ -1,14 +1,13 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Select, Skeleton } from 'antd';
-import { useGetCloudIntegrationAccounts } from 'hooks/integration/useGetCloudIntegrationAccounts';
+import { useCallback, useMemo, useState } from 'react';
+import { Form, Select, Skeleton, Typography } from 'antd';
+import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
 import useUrlQuery from 'hooks/useUrlQuery';

-import './S3BucketsSelector.styles.scss';
+const { Title } = Typography;

 interface S3BucketsSelectorProps {
 	onChange?: (bucketsByRegion: Record<string, string[]>) => void;
 	initialBucketsByRegion?: Record<string, string[]>;
-	disabled?: boolean;
 }

 /**
@@ -18,18 +17,13 @@ interface S3BucketsSelectorProps {
 function S3BucketsSelector({
 	onChange,
 	initialBucketsByRegion = {},
-	disabled: isSelectorDisabled = false,
 }: S3BucketsSelectorProps): JSX.Element {
 	const cloudAccountId = useUrlQuery().get('cloudAccountId');
-	const { data: accounts, isLoading } = useGetCloudIntegrationAccounts('aws');
+	const { data: accounts, isLoading } = useAwsAccounts();
 	const [bucketsByRegion, setBucketsByRegion] = useState<
 		Record<string, string[]>
 	>(initialBucketsByRegion);

-	useEffect(() => {
-		setBucketsByRegion(initialBucketsByRegion);
-	}, [initialBucketsByRegion]);
-
 	// Find the active AWS account based on the URL query parameter
 	const activeAccount = useMemo(
 		() =>
@@ -87,41 +81,37 @@ function S3BucketsSelector({

 	return (
 		<div className="s3-buckets-selector">
-			<div className="s3-buckets-selector-title">Select S3 Buckets by Region</div>
-			<div className="s3-buckets-selector-content">
-				{allRegions.map((region) => {
-					const isRegionUnavailable = isRegionDisabled(region);
+			<Title level={5}>Select S3 Buckets by Region</Title>

-					return (
-						<div key={region} className="s3-buckets-selector-region">
-							<div className="s3-buckets-selector-region-header">
-								<div className="s3-buckets-selector-region-label">{region}</div>
-								{isRegionUnavailable && (
-									<div className="s3-buckets-selector-region-help">
-										Region disabled in account settings; S3 buckets here will not be
-										synced.
-									</div>
-								)}
-							</div>
-							<div className="s3-buckets-selector-region-select">
-								<Select
-									mode="tags"
-									placeholder={`Enter S3 bucket names for ${region}`}
-									value={bucketsByRegion[region] || []}
-									onChange={(value): void => handleRegionBucketsChange(region, value)}
-									tokenSeparators={[',']}
-									allowClear
-									disabled={isSelectorDisabled || isRegionUnavailable}
-									suffixIcon={null}
-									notFoundContent={null}
-									filterOption={false}
-									showSearch
-								/>
-							</div>
-						</div>
-					);
-				})}
-			</div>
+			{allRegions.map((region) => {
+				const disabled = isRegionDisabled(region);
+
+				return (
+					<Form.Item
+						key={region}
+						label={region}
+						{...(disabled && {
+							help:
+								'Region disabled in account settings; S3 buckets here will not be synced.',
+							validateStatus: 'warning',
+						})}
+					>
+						<Select
+							mode="tags"
+							placeholder={`Enter S3 bucket names for ${region}`}
+							value={bucketsByRegion[region] || []}
+							onChange={(value): void => handleRegionBucketsChange(region, value)}
+							tokenSeparators={[',']}
+							allowClear
+							disabled={disabled}
+							suffixIcon={null}
+							notFoundContent={null}
+							filterOption={false}
+							showSearch
+						/>
+					</Form.Item>
+				);
+			})}
 		</div>
 	);
 }
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx
@@ -0,0 +1,189 @@
+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;
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceItem.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceItem.tsx
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx
@@ -0,0 +1,75 @@
+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;
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServicesTabs.style.scss
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServicesTabs.style.scss
@@ -1,8 +1,4 @@
 .services-tabs {
-	display: flex;
-	flex-direction: column;
-	height: calc(100% - 54px); /* 54px is the height of the header */
-
 	.ant-tabs-tab {
 		font-family: 'Inter';
 		padding: 16px 4px 14px;
@@ -22,42 +18,21 @@
 		background: var(--bg-robin-500);
 	}
 }
-
 .services-section {
 	display: flex;
-	flex: 1;
-	min-height: 0;
-
+	gap: 10px;
 	&__sidebar {
-		width: 240px;
-		border-right: 1px solid var(--bg-slate-400);
-		height: 100%;
+		width: 16%;
+		padding: 0 16px;
 	}

 	&__content {
-		flex: 1;
-		height: 100%;
+		width: 84%;
+		padding: 16px;
 	}
 }
-
-.service-details-loading,
-.services-list-loading {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-	width: 100%;
-	padding: 12px;
-
-	.service-details-loading-item {
-		width: 100%;
-		height: 100%;
-		background-color: var(--bg-slate-400);
-	}
-}
-
 .services-filter {
-	padding: 12px;
-
+	padding: 16px 0;
 	.ant-select-selector {
 		background-color: var(--bg-ink-300) !important;
 		border: 1px solid var(--bg-slate-400) !important;
@@ -71,101 +46,6 @@
 	}
 }

-.aws-services-list-view {
-	height: 100%;
-
-	.aws-services-list-view-sidebar {
-		width: 240px;
-		height: 100%;
-		border-right: 1px solid var(--l3-background);
-		padding: 12px;
-
-		.aws-services-list-view-sidebar-content {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-
-			.aws-services-enabled {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-				margin-bottom: 12px;
-			}
-
-			.aws-services-not-enabled {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-			}
-
-			.aws-services-list-view-sidebar-content-header {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 600;
-				line-height: 18px; /* 163.636% */
-				letter-spacing: 0.44px;
-				text-transform: uppercase;
-			}
-
-			.aws-services-list-view-sidebar-content-item {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				gap: 10px;
-				padding: 4px 12px;
-				border-radius: 4px;
-
-				cursor: pointer;
-
-				.aws-services-list-view-sidebar-content-item-icon {
-					width: 20px;
-					height: 20px;
-				}
-
-				.aws-services-list-view-sidebar-content-item-title {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 18px; /* 128.571% */
-				}
-
-				&:hover {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 18px; /* 128.571% */
-				}
-
-				&.active {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 18px; /* 128.571% */
-
-					background-color: var(--l3-background);
-
-					.aws-services-list-view-sidebar-content-item-title {
-						color: var(--l1-foreground);
-					}
-				}
-			}
-		}
-	}
-
-	.aws-services-list-view-main {
-		flex: 1;
-		padding: 12px;
-	}
-}
-
 .service-item {
 	display: flex;
 	gap: 12px;
@@ -183,19 +63,17 @@
 		background-color: var(--bg-ink-100);
 	}
 	&__icon-wrapper {
-		height: 32px;
-		width: 32px;
+		height: 40px;
+		width: 40px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		background-color: var(--bg-ink-300);
 		border: 1px solid var(--bg-slate-400);
 		border-radius: 4px;
-
 		.service-item__icon {
-			width: 16px;
-			height: 16px;
-			object-fit: contain;
+			width: 24px;
+			height: 24px;
 		}
 	}
 	&__title {
@@ -212,13 +90,11 @@
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
-
 	&__title-bar {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		height: 48px;
-		padding: 8px 12px;
 		border-bottom: 1px solid var(--bg-slate-400);

 		.service-details__details-title {
@@ -229,7 +105,6 @@
 			letter-spacing: -0.07px;
 			text-align: left;
 		}
-
 		.service-details__right-actions {
 			display: flex;
 			align-items: center;
@@ -282,28 +157,21 @@
 			}
 		}
 	}
-
 	&__overview {
 		color: var(--bg-vanilla-400);
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px; /* 142.857% */
 		letter-spacing: -0.07px;
-		width: 100%;
-
-		padding: 8px 12px;
+		width: 800px;
 	}
-
 	&__tabs {
-		padding: 0px 12px 12px 8px;
-
 		.ant-tabs {
 			&-ink-bar {
 				background-color: transparent;
 			}
 			&-nav {
-				padding: 0;
-
+				padding: 8px 0 18px;
 				&-wrap {
 					padding: 0;
 				}
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesTabs.tsx
@@ -0,0 +1,124 @@
+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;
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/tests/ConfigureServiceModalS3Sync.test.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/tests/ConfigureServiceModalS3Sync.test.tsx
@@ -0,0 +1,161 @@
+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();
+			});
+		});
+	});
+});
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/tests/mockData.ts
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/tests/mockData.ts
@@ -0,0 +1,44 @@
+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,
+};
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/tests/utils.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/tests/utils.tsx
@@ -0,0 +1,78 @@
+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,
+};
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/types.ts
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/types.ts
@@ -1,40 +1,90 @@
-import { ServiceData } from 'container/Integrations/types';
-
 interface Service {
 	id: string;
 	title: string;
 	icon: string;
-	config: AWSServiceConfig;
+	config: ServiceConfig;
 }

-interface S3BucketsByRegion {
-	[region: string]: string[];
+interface Dashboard {
+	id: string;
+	url: string;
+	title: string;
+	description: string;
+	image: string;
+}
+
+interface LogField {
+	name: string;
+	path: string;
+	type: string;
+}
+
+interface Metric {
+	name: string;
+	type: string;
+	unit: string;
 }

 interface ConfigStatus {
 	enabled: boolean;
 }

+interface DataStatus {
+	last_received_ts_ms: number;
+	last_received_from: string;
+}
+
+interface S3BucketsByRegion {
+	[region: string]: string[];
+}
+
 interface LogsConfig extends ConfigStatus {
 	s3_buckets?: S3BucketsByRegion;
 }

-interface AWSServiceConfig {
+interface ServiceConfig {
 	logs: LogsConfig;
 	metrics: ConfigStatus;
 	s3_sync?: LogsConfig;
 }

+interface IServiceStatus {
+	logs: DataStatus | null;
+	metrics: DataStatus | null;
+}
+
+interface SupportedSignals {
+	metrics: boolean;
+	logs: boolean;
+}
+
+interface ServiceData {
+	id: string;
+	title: string;
+	icon: string;
+	overview: string;
+	supported_signals: SupportedSignals;
+	assets: {
+		dashboards: Dashboard[];
+	};
+	data_collected: {
+		logs?: LogField[];
+		metrics: Metric[];
+	};
+	config?: ServiceConfig;
+	status?: IServiceStatus;
+}
+
 interface ServiceDetailsResponse {
 	status: 'success';
 	data: ServiceData;
 }

-export interface AWSCloudAccountConfig {
+interface CloudAccountConfig {
 	regions: string[];
 }

-export interface IntegrationStatus {
+interface IntegrationStatus {
 	last_heartbeat_ts_ms: number;
 }

@@ -45,7 +95,7 @@ interface AccountStatus {
 interface CloudAccount {
 	id: string;
 	cloud_account_id: string;
-	config: AWSCloudAccountConfig;
+	config: CloudAccountConfig;
 	status: AccountStatus;
 }

@@ -83,13 +133,15 @@ interface UpdateServiceConfigResponse {
 }

 export type {
-	AWSServiceConfig,
 	CloudAccount,
 	CloudAccountsData,
+	IServiceStatus,
 	S3BucketsByRegion,
 	Service,
+	ServiceConfig,
 	ServiceData,
 	ServiceDetailsResponse,
+	SupportedSignals,
 	UpdateServiceConfigPayload,
 	UpdateServiceConfigResponse,
 };
--- a/frontend/src/container/Integrations/CloudIntegration/tests/RequestIntegration.test.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/tests/RequestIntegration.test.tsx
@@ -1,12 +1,14 @@
 import { I18nextProvider } from 'react-i18next';
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import { RequestIntegrationBtn } from 'container/Integrations/RequestIntegrationBtn';
-import { IntegrationType } from 'container/Integrations/types';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
+import {
+	IntegrationType,
+	RequestIntegrationBtn,
+} from 'pages/Integrations/RequestIntegrationBtn';
 import i18n from 'ReactI18';

-describe.skip('Request AWS integration', () => {
+describe('Request AWS integration', () => {
 	it('should render the request integration button', async () => {
 		let capturedPayload: any;
 		server.use(
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/HeroSection.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/HeroSection.tsx
@@ -1,26 +0,0 @@
-import AccountActions from './components/AccountActions';
-
-import './HeroSection.style.scss';
-
-function HeroSection(): JSX.Element {
-	return (
-		<div className="hero-section">
-			<div className="hero-section__details">
-				<div className="hero-section__details-header">
-					<div className="hero-section__icon">
-						<img src="/Logos/aws-dark.svg" alt="AWS" />
-					</div>
-
-					<div className="hero-section__details-title">AWS</div>
-				</div>
-				<div className="hero-section__details-description">
-					AWS is a cloud computing platform that provides a range of services for
-					building and running applications.
-				</div>
-			</div>
-			<AccountActions />
-		</div>
-	);
-}
-
-export default HeroSection;
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountSettingsModal.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/AccountSettingsModal.tsx
@@ -1,174 +0,0 @@
-import { Dispatch, SetStateAction, useCallback } from 'react';
-import { useQueryClient } from 'react-query';
-import { Button } from '@signozhq/button';
-import { DrawerWrapper } from '@signozhq/drawer';
-import { Form } from 'antd';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useAccountSettingsModal } from 'hooks/integration/aws/useAccountSettingsModal';
-import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
-import { Save } from 'lucide-react';
-
-import logEvent from '../../../../../../api/common/logEvent';
-import { CloudAccount } from '../../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,
-		isSaveDisabled,
-		setSelectedRegions,
-		setIncludeAllRegions,
-		handleSubmit,
-		handleClose,
-	} = useAccountSettingsModal({ onClose, account, setActiveAccount });
-
-	const queryClient = useQueryClient();
-	const urlQuery = useUrlQuery();
-
-	const handleRemoveIntegrationAccountSuccess = useCallback((): void => {
-		queryClient.invalidateQueries([REACT_QUERY_KEY.CLOUD_INTEGRATION_ACCOUNTS]);
-		urlQuery.delete('cloudAccountId');
-		setActiveAccount(null);
-		handleClose();
-		history.replace({ search: urlQuery.toString() });
-
-		logEvent('AWS Integration: Account removed', {
-			id: account?.id,
-			cloudAccountId: account?.cloud_account_id,
-		});
-	}, [
-		queryClient,
-		urlQuery,
-		setActiveAccount,
-		handleClose,
-		account?.id,
-		account?.cloud_account_id,
-	]);
-
-	const renderAccountDetails = useCallback(() => {
-		return (
-			<Form
-				form={form}
-				layout="vertical"
-				initialValues={{
-					selectedRegions,
-					includeAllRegions,
-				}}
-			>
-				<div className="account-settings-modal__body">
-					<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>
-
-					<div className="account-settings-modal__body-region-selector">
-						<div className="account-settings-modal__body-region-selector-title">
-							Which regions do you want to monitor?
-						</div>
-						<div className="account-settings-modal__body-region-selector-description">
-							Choose only the regions you want SigNoz to monitor.
-						</div>
-
-						<RegionSelector
-							selectedRegions={selectedRegions}
-							setSelectedRegions={setSelectedRegions}
-							setIncludeAllRegions={setIncludeAllRegions}
-						/>
-					</div>
-				</div>
-
-				<div className="account-settings-modal__footer">
-					<RemoveIntegrationAccount
-						accountId={account?.id}
-						onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
-					/>
-
-					<Button
-						variant="solid"
-						color="secondary"
-						disabled={isSaveDisabled}
-						onClick={handleSubmit}
-						loading={isLoading}
-						prefixIcon={<Save size={14} />}
-					>
-						Update Changes
-					</Button>
-				</div>
-			</Form>
-		);
-	}, [
-		form,
-		selectedRegions,
-		includeAllRegions,
-		account?.id,
-		handleRemoveIntegrationAccountSuccess,
-		isSaveDisabled,
-		handleSubmit,
-		isLoading,
-		setSelectedRegions,
-		setIncludeAllRegions,
-	]);
-
-	const handleDrawerOpenChange = useCallback(
-		(open: boolean): void => {
-			if (!open) {
-				handleClose();
-			}
-		},
-		[handleClose],
-	);
-
-	return (
-		<DrawerWrapper
-			open={true}
-			type="panel"
-			className="account-settings-modal"
-			header={{
-				title: 'Account Settings',
-			}}
-			// 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',
-			// }}
-			direction="right"
-			showCloseButton
-			content={renderAccountDetails()}
-			onOpenChange={handleDrawerOpenChange}
-		/>
-	);
-}
-
-export default AccountSettingsModal;
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RemoveIntegrationAccount.scss
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RemoveIntegrationAccount.scss
@@ -1,32 +0,0 @@
-.remove-integration-account-modal {
-	.ant-modal-content {
-		background-color: var(--l1-background);
-		border: 1px solid var(--l3-background);
-		border-radius: 4px;
-		padding: 12px;
-	}
-
-	.ant-modal-close {
-		color: var(--l1-foreground);
-	}
-
-	.ant-modal-header {
-		background-color: var(--l1-background);
-		color: var(--l1-foreground);
-
-		.ant-modal-title {
-			color: var(--l1-foreground);
-		}
-	}
-
-	.ant-modal-body {
-		margin-top: 16px;
-		color: var(--l1-foreground);
-		background-color: var(--l1-background);
-	}
-
-	.ant-modal-footer {
-		margin-top: 16px;
-		background-color: var(--l1-background);
-	}
-}
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RemoveIntegrationAccount.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RemoveIntegrationAccount.tsx
@@ -1,96 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/button';
-import { Modal } from 'antd/lib';
-import logEvent from 'api/common/logEvent';
-import { useDisconnectAccount } from 'api/generated/services/cloudintegration';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { INTEGRATION_TELEMETRY_EVENTS } from 'container/Integrations/constants';
-import { useNotifications } from 'hooks/useNotifications';
-import { Unlink } from 'lucide-react';
-
-import './RemoveIntegrationAccount.scss';
-
-function RemoveIntegrationAccount({
-	accountId,
-	onRemoveIntegrationAccountSuccess,
-}: {
-	accountId: string;
-	onRemoveIntegrationAccountSuccess: () => void;
-}): JSX.Element {
-	const { notifications } = useNotifications();
-	const [isModalOpen, setIsModalOpen] = useState(false);
-
-	const handleDisconnect = (): void => {
-		setIsModalOpen(true);
-	};
-
-	const {
-		mutate: disconnectAccount,
-		isLoading: isRemoveIntegrationLoading,
-	} = useDisconnectAccount({
-		mutation: {
-			onSuccess: () => {
-				onRemoveIntegrationAccountSuccess?.();
-				setIsModalOpen(false);
-			},
-			onError: () => {
-				notifications.error({
-					message: SOMETHING_WENT_WRONG,
-				});
-			},
-		},
-	});
-	const handleOk = (): void => {
-		logEvent(INTEGRATION_TELEMETRY_EVENTS.AWS_INTEGRATION_ACCOUNT_REMOVED, {
-			accountId,
-		});
-		disconnectAccount({
-			pathParams: {
-				cloudProvider: 'aws',
-				id: accountId,
-			},
-		});
-	};
-
-	const handleCancel = (): void => {
-		setIsModalOpen(false);
-	};
-
-	return (
-		<div className="remove-integration-account-container">
-			<Button
-				variant="solid"
-				color="destructive"
-				prefixIcon={<Unlink size={14} />}
-				size="sm"
-				onClick={handleDisconnect}
-				disabled={isRemoveIntegrationLoading}
-			>
-				Disconnect
-			</Button>
-
-			<Modal
-				className="remove-integration-account-modal"
-				open={isModalOpen}
-				title="Remove integration"
-				onOk={handleOk}
-				onCancel={handleCancel}
-				okText="Remove Account"
-				okButtonProps={{
-					danger: true,
-					loading: isRemoveIntegrationLoading,
-				}}
-			>
-				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.
-			</Modal>
-		</div>
-	);
-}
-
-export default RemoveIntegrationAccount;
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/S3BucketsSelector/S3BucketsSelector.styles.scss
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/S3BucketsSelector/S3BucketsSelector.styles.scss
@@ -1,53 +0,0 @@
-.s3-buckets-selector {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 12px;
-	background: var(--l2-background);
-	border-radius: 4px;
-
-	.s3-buckets-selector-title {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-		gap: 8px;
-		font-size: 12px;
-		color: var(--l2-foreground);
-	}
-
-	.s3-buckets-selector-content {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-
-		.s3-buckets-selector-region {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			gap: 8px;
-
-			.s3-buckets-selector-region-header {
-				display: flex;
-				flex-direction: column;
-				gap: 4px;
-			}
-
-			.s3-buckets-selector-region-help {
-				color: var(--l2-foreground);
-				font-size: 12px;
-				line-height: 18px;
-				letter-spacing: -0.06px;
-			}
-
-			.s3-buckets-selector-region-select {
-				flex: 1;
-
-				.ant-select {
-					width: 100%;
-				}
-			}
-		}
-	}
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Vinícius Lourenço	7d8c8e3d7d	fix(row): missing active styles	2026-04-13 19:37:13 -03:00
Vinícius Lourenço	5eae936ab4	fix(tests): use find by text	2026-04-13 19:17:34 -03:00
Vinícius Lourenço	091d61045a	fix(styles): minor fixes on styles	2026-04-13 19:15:43 -03:00
Vinícius Lourenço	ed1217e5d0	chore(tests): cleanup tests and components	2026-04-13 18:57:30 -03:00
Vinícius Lourenço	0389b46836	refactor(table): optimize	2026-04-13 18:36:45 -03:00
Vinícius Lourenço	284d6f72d4	refactor(table): extract table to own component	2026-04-13 15:49:33 -03:00
Vinícius Lourenço	66abfa3be4	refactor(tanstack): move table to components & convert to css modules	2026-04-08 15:27:59 -03:00