From c29994ac203fefb4d174bcfdb115695e072918e6 Mon Sep 17 00:00:00 2001
From: Bhargav <BJP232004@GMAIL.COM>
Date: Mon, 20 Jul 2026 16:51:59 +0530
Subject: [PATCH] fix: datasources UI fix (#13286)

---
 web/src/components/ingestion/Recommended.vue  |   2 +
 .../ingestion/recommended/AWSConfig.spec.ts   |  10 +-
 .../ingestion/recommended/AWSConfig.vue       |  37 +-
 .../recommended/AWSIndividualServices.spec.ts |   5 +-
 .../recommended/AWSIndividualServices.vue     |  53 +-
 .../recommended/AWSIntegrationGrid.spec.ts    | 261 --------
 .../recommended/AWSIntegrationGrid.vue        | 143 ----
 .../recommended/AWSIntegrationTile.spec.ts    |   5 +-
 .../recommended/AWSIntegrationTile.vue        |  31 +-
 .../ingestion/recommended/AWSQuickSetup.vue   |  64 +-
 .../ingestion/recommended/AzureConfig.spec.ts |  15 +-
 .../ingestion/recommended/AzureConfig.vue     |  99 +--
 .../AzureIndividualServices.spec.ts           |   5 +-
 .../recommended/AzureIndividualServices.vue   |  37 +-
 .../recommended/AzureIntegrationTile.vue      |   4 +-
 .../recommended/AzureQuickSetup.spec.ts       |   5 +-
 .../ingestion/recommended/AzureQuickSetup.vue |  36 +-
 .../ingestion/recommended/GCPConfig.spec.ts   | 604 +++--------------
 .../ingestion/recommended/GCPConfig.vue       |  84 +--
 .../recommended/KubernetesConfig.spec.ts      | 512 +++++++-------
 .../recommended/KubernetesConfig.vue          | 349 +---------
 .../ingestion/recommended/LinuxConfig.spec.ts | 255 +++----
 .../ingestion/recommended/LinuxConfig.vue     | 130 +---
 .../recommended/WindowsConfig.spec.ts         | 262 +++-----
 .../ingestion/recommended/WindowsConfig.vue   | 133 +---
 .../setupCard/SetupCardRenderer.spec.ts       | 236 +++++++
 .../ingestion/setupCard/SetupCardRenderer.vue | 198 +++++-
 .../ingestion/setupCard/content/gcp.ts        | 144 ++++
 .../ingestion/setupCard/content/kubernetes.ts | 324 +++++++++
 .../ingestion/setupCard/content/linux.ts      | 108 +++
 .../ingestion/setupCard/content/osAgent.ts    |  90 +++
 .../ingestion/setupCard/content/otlpTraces.ts | 187 ++++++
 .../ingestion/setupCard/content/windows.ts    | 111 ++++
 .../ingestion/setupCard/registry.ts           |  10 +
 .../components/ingestion/setupCard/types.ts   |  53 +-
 .../ingestion/traces/OpenTelemetry.spec.ts    | 629 ++++--------------
 .../ingestion/traces/OpenTelemetry.vue        |  86 +--
 web/src/locales/languages/en-US.json          |  34 +
 web/src/locales/localeKeys.spec.ts            | 134 ++++
 39 files changed, 2580 insertions(+), 2905 deletions(-)
 delete mode 100644 web/src/components/ingestion/recommended/AWSIntegrationGrid.spec.ts
 delete mode 100644 web/src/components/ingestion/recommended/AWSIntegrationGrid.vue
 create mode 100644 web/src/components/ingestion/setupCard/SetupCardRenderer.spec.ts
 create mode 100644 web/src/components/ingestion/setupCard/content/gcp.ts
 create mode 100644 web/src/components/ingestion/setupCard/content/kubernetes.ts
 create mode 100644 web/src/components/ingestion/setupCard/content/linux.ts
 create mode 100644 web/src/components/ingestion/setupCard/content/osAgent.ts
 create mode 100644 web/src/components/ingestion/setupCard/content/otlpTraces.ts
 create mode 100644 web/src/components/ingestion/setupCard/content/windows.ts
 create mode 100644 web/src/locales/localeKeys.spec.ts

diff --git a/web/src/components/ingestion/Recommended.vue b/web/src/components/ingestion/Recommended.vue
index 124fce5ff8..60e1190c96 100644
--- a/web/src/components/ingestion/Recommended.vue
+++ b/web/src/components/ingestion/Recommended.vue
@@ -20,6 +20,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     v-model="ingestTabType"
     :tabs="recommendedTabs"
     :splitter-width="270"
+    searchable
+    search-data-test="recommended-list-search-input"
     panel-data-test="data-sources-recommended-tabs"
     tab-data-test-prefix="ingestion-recommended-tab-"
   >
diff --git a/web/src/components/ingestion/recommended/AWSConfig.spec.ts b/web/src/components/ingestion/recommended/AWSConfig.spec.ts
index 0a6ef3d74a..f42694b2a0 100644
--- a/web/src/components/ingestion/recommended/AWSConfig.spec.ts
+++ b/web/src/components/ingestion/recommended/AWSConfig.spec.ts
@@ -18,6 +18,7 @@ import { mount, flushPromises } from "@vue/test-utils";
 import { createStore } from "vuex";
 import AWSConfig from "./AWSConfig.vue";
 import { createI18n } from 'vue-i18n';
+import enUS from '@/locales/languages/en-US.json';
 import { nextTick } from 'vue';
 
 // Mock dependencies
@@ -103,10 +104,12 @@ const mockStore = createStore({
 });
 
 // Create mock i18n
+// Real locale messages: the component renders t() keys, and several
+// assertions below check the resulting English text.
 const mockI18n = createI18n({
   locale: 'en',
   messages: {
-    en: {}
+    en: enUS
   }
 });
 
@@ -255,9 +258,8 @@ describe("AWSConfig", () => {
     expect(content).toContain('Access Key: [BASIC_PASSCODE]');
   });
 
-  // Test 15: AWSQuickSetup component integration (replaces AWSIntegrationGrid)
-  it("should render AWSIntegrationGrid component", () => {
-    // Component now uses AWSQuickSetup and AWSIndividualServices instead of AWSIntegrationGrid
+  // Test 15: quick-setup panel is mounted
+  it("should render AWSQuickSetup component", () => {
     const quickSetup = wrapper.findComponent({ name: 'AWSQuickSetup' });
     expect(quickSetup.exists()).toBe(true);
   });
diff --git a/web/src/components/ingestion/recommended/AWSConfig.vue b/web/src/components/ingestion/recommended/AWSConfig.vue
index bbcc0c973d..0b7ddf265f 100644
--- a/web/src/components/ingestion/recommended/AWSConfig.vue
+++ b/web/src/components/ingestion/recommended/AWSConfig.vue
@@ -17,11 +17,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="m-3 mt-1">
     <div class="mb-4">
-      <div data-test="aws-config-page-title" class="text-2xl font-semibold leading-[1.3] m-0 mb-1.5" :class="store.state.theme === 'dark' ? 'text-[#e0e0e0]' : 'text-[#1a1a1a]'">
-        AWS Integrations
+      <div
+        data-test="aws-config-page-title"
+        class="text-2xl font-semibold leading-tight m-0 mb-1.5 text-text-heading"
+      >
+        {{ t("ingestion.awsSetup.title") }}
       </div>
-      <div data-test="aws-config-page-description" class="text-sm m-0 mb-4" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
-        Set up AWS monitoring in one click or configure individual services for granular control.
+      <div
+        data-test="aws-config-page-description"
+        class="text-sm m-0 mb-4 text-text-secondary"
+      >
+        {{ t("ingestion.awsSetup.description") }}
       </div>
 
       <OTabs
@@ -30,8 +36,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         class="aws-tabs"
         align="left"
       >
-        <OTab name="quick-setup" label="Quick Setup" data-test="aws-quick-setup-tab" />
-        <OTab name="individual-services" label="Individual Services" data-test="aws-individual-services-tab" />
+        <OTab
+          name="quick-setup"
+          :label="t('ingestion.awsSetup.quickSetup')"
+          data-test="aws-quick-setup-tab"
+        />
+        <OTab
+          name="individual-services"
+          :label="t('ingestion.awsSetup.individualServices')"
+          data-test="aws-individual-services-tab"
+        />
       </OTabs>
     </div>
 
@@ -49,11 +63,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <div class="mt-8">
       <div class="mb-3">
-        <div class="text-base font-semibold m-0" :class="store.state.theme === 'dark' ? 'text-[#e0e0e0]' : 'text-[#333]'">
-          Manual Configuration
+        <div class="text-base font-semibold m-0 text-text-heading">
+          {{ t("ingestion.awsSetup.manualTitle") }}
         </div>
-        <div class="text-sm m-0" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
-          Use these credentials for custom AWS integrations or manual setup.
+        <div class="text-sm m-0 text-text-secondary">
+          {{ t("ingestion.awsSetup.manualDescription") }}
         </div>
       </div>
       <CopyContent :content="content" />
@@ -68,6 +82,7 @@ import OTabPanels from '@/lib/navigation/Tabs/OTabPanels.vue'
 import OTabPanel from '@/lib/navigation/Tabs/OTabPanel.vue'
 import OSeparator from '@/lib/core/Separator/OSeparator.vue';
 import { defineComponent, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import config from "../../../aws-exports";
 import { useStore } from "vuex";
@@ -98,6 +113,7 @@ export default defineComponent({
     AWSIndividualServices,
   },
   setup(props) {
+    const { t } = useI18n();
     const store = useStore();
     const route = useRoute();
 
@@ -137,6 +153,7 @@ export default defineComponent({
 Access Key: [BASIC_PASSCODE]`;
 
     return {
+      t,
       store,
       config,
       endpoint,
diff --git a/web/src/components/ingestion/recommended/AWSIndividualServices.spec.ts b/web/src/components/ingestion/recommended/AWSIndividualServices.spec.ts
index d01cf90022..1c920f70e1 100644
--- a/web/src/components/ingestion/recommended/AWSIndividualServices.spec.ts
+++ b/web/src/components/ingestion/recommended/AWSIndividualServices.spec.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import { createI18n } from 'vue-i18n';
+import enUS from '@/locales/languages/en-US.json';
 import { createRouter, createWebHistory } from 'vue-router';
 import { nextTick } from 'vue';
 import AWSIndividualServices from './AWSIndividualServices.vue';
@@ -76,7 +77,9 @@ const mockStore = createStore({
   },
 });
 
-const mockI18n = createI18n({ locale: 'en', messages: { en: {} } });
+// Real locale messages: the component renders t() keys, and several
+// assertions below check the resulting English text.
+const mockI18n = createI18n({ locale: 'en', messages: { en: enUS } });
 const mockRouter = createRouter({
   history: createWebHistory(),
   routes: [{ path: '/', component: { template: '<div>Home</div>' } }],
diff --git a/web/src/components/ingestion/recommended/AWSIndividualServices.vue b/web/src/components/ingestion/recommended/AWSIndividualServices.vue
index b09005c72b..15f9740f86 100644
--- a/web/src/components/ingestion/recommended/AWSIndividualServices.vue
+++ b/web/src/components/ingestion/recommended/AWSIndividualServices.vue
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="mb-4">
       <OSearchInput
         v-model="searchQuery"
-        placeholder="Search AWS services..."
+        :placeholder="t('ingestion.awsSetup.searchPlaceholder')"
         clearable
         class="max-w-md"
         data-test="aws-integration-search"
@@ -30,26 +30,33 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OTabs
         v-model="activeCategory"
         dense
-        class="text-gray-400"
         data-test="aws-integration-category-tabs"
       >
-        <OTab name="all" label="All Services" />
-        <OTab name="logs" label="Logs" />
-        <OTab name="metrics" label="Metrics" />
-        <OTab name="security" label="Security" />
-        <OTab name="networking" label="Networking" />
+        <OTab name="all" :label="t('ingestion.awsSetup.categoryAll')" />
+        <OTab name="logs" :label="t('ingestion.awsSetup.categoryLogs')" />
+        <OTab name="metrics" :label="t('ingestion.awsSetup.categoryMetrics')" />
+        <OTab name="security" :label="t('ingestion.awsSetup.categorySecurity')" />
+        <OTab
+          name="networking"
+          :label="t('ingestion.awsSetup.categoryNetworking')"
+        />
       </OTabs>
     </div>
 
     <div
       v-if="filteredIntegrations.length === 0"
-      class="text-center py-12 text-[#666] dark:text-[#999]"
+      class="text-center py-12 text-text-secondary"
     >
-      <OIcon name="search-off" class="mb-2" style="width: 3rem; height: 3rem;" />
-      <div class="text-base">No integrations found matching your search</div>
+      <OIcon name="search-off" class="mb-2 w-12 h-12" />
+      <div class="text-base">{{ t("ingestion.awsSetup.noResults") }}</div>
     </div>
 
-    <div class="integrations-grid grid grid-cols-4 gap-4" v-else>
+    <!-- Responsive columns via utilities — replaces an unscoped <style> block
+         whose px media queries leaked to every page in the app. -->
+    <div
+      class="integrations-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+      v-else
+    >
       <AWSIntegrationTile
         v-for="integration in filteredIntegrations"
         :key="integration.id"
@@ -64,6 +71,7 @@ import OTabs from '@/lib/navigation/Tabs/OTabs.vue'
 import OTab from '@/lib/navigation/Tabs/OTab.vue'
 import OSearchInput from '@/lib/forms/SearchInput/OSearchInput.vue'
 import { defineComponent, ref, computed, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { awsIntegrations } from "@/utils/awsIntegrations";
 import AWSIntegrationTile from "./AWSIntegrationTile.vue";
@@ -84,6 +92,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { t } = useI18n();
     const route = useRoute();
     const searchQuery = ref((route.query.search as string) || props.initialSearch || "");
     const activeCategory = ref("all");
@@ -133,6 +142,7 @@ export default defineComponent({
     });
 
     return {
+      t,
       searchQuery,
       activeCategory,
       filteredIntegrations,
@@ -140,24 +150,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style>
-@media (max-width: 1200px) {
-  .aws-integration-grid .integrations-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-@media (max-width: 900px) {
-  .aws-integration-grid .integrations-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 600px) {
-  .aws-integration-grid .integrations-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-</style>
diff --git a/web/src/components/ingestion/recommended/AWSIntegrationGrid.spec.ts b/web/src/components/ingestion/recommended/AWSIntegrationGrid.spec.ts
deleted file mode 100644
index 35457324cd..0000000000
--- a/web/src/components/ingestion/recommended/AWSIntegrationGrid.spec.ts
+++ /dev/null
@@ -1,261 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createI18n } from 'vue-i18n';
-import { createRouter, createWebHistory } from 'vue-router';
-import { nextTick } from 'vue';
-import AWSIntegrationGrid from './AWSIntegrationGrid.vue';
-
-vi.mock('../../../aws-exports', () => ({
-  default: { API_ENDPOINT: 'http://localhost:5080', region: 'us-east-1' },
-}));
-
-vi.mock('@/utils/zincutils', () => ({
-  getEndPoint: vi.fn(() => ({ url: 'http://localhost:5080', host: 'localhost', port: '5080', protocol: 'http', tls: false })),
-  getIngestionURL: vi.fn(() => 'http://localhost:5080'),
-}));
-
-vi.mock('@/utils/awsIntegrations', () => ({
-  awsIntegrations: [
-    {
-      id: 'cloudwatch-logs',
-      name: 'CloudWatchLogs',
-      displayName: 'CloudWatch Logs',
-      description: 'Collect CloudWatch logs',
-      category: 'logs',
-      cloudFormationTemplate: 'https://example.com/cloudwatch.yaml',
-      hasDashboard: true,
-    },
-    {
-      id: 's3-events',
-      name: 'S3Events',
-      displayName: 'S3 Events',
-      description: 'Collect S3 bucket events',
-      category: 'logs',
-      cloudFormationTemplate: 'https://example.com/s3.yaml',
-      hasDashboard: false,
-    },
-    {
-      id: 'vpc-flow',
-      name: 'VPCFlow',
-      displayName: 'VPC Flow Logs',
-      description: 'Collect VPC flow logs',
-      category: 'networking',
-      hasDashboard: false,
-    },
-    {
-      id: 'guardduty',
-      name: 'GuardDuty',
-      displayName: 'GuardDuty',
-      description: 'AWS GuardDuty findings',
-      category: 'security',
-      cloudFormationTemplate: 'https://example.com/guardduty.yaml',
-      hasDashboard: true,
-    },
-  ],
-  generateCloudFormationURL: vi.fn(() => 'https://console.aws.amazon.com/cloudformation'),
-}));
-
-vi.mock('@/services/segment_analytics', () => ({
-  default: { track: vi.fn() },
-}));
-
-vi.mock('./AWSIntegrationTile.vue', () => ({
-  default: {
-    name: 'AWSIntegrationTile',
-    template: '<div class="aws-tile" :data-id="integration.id">{{ integration.displayName }}</div>',
-    props: ['integration'],
-  },
-}));
-
-const mockStore = createStore({
-  state: {
-    selectedOrganization: { identifier: 'test-org' },
-    userInfo: { email: 'test@example.com' },
-    organizationData: { organizationPasscode: 'test-passcode' },
-  },
-});
-
-const mockI18n = createI18n({ locale: 'en', messages: { en: {} } });
-const mockRouter = createRouter({
-  history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div>Home</div>' } }],
-});
-
-
-describe('AWSIntegrationGrid.vue', () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    if (wrapper) wrapper.unmount();
-  });
-
-  const createWrapper = (props = {}) => {
-    return mount(AWSIntegrationGrid, {
-      props,
-      global: {
-        plugins: [mockI18n, mockRouter],
-        provide: { store: mockStore },
-      },
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('should mount without errors', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should unmount without errors', () => {
-      wrapper = createWrapper();
-      expect(() => wrapper.unmount()).not.toThrow();
-    });
-
-    it('should render search input', () => {
-      wrapper = createWrapper();
-      const searchInput = wrapper.find('[data-test="aws-integration-search"]');
-      expect(searchInput.exists()).toBe(true);
-    });
-
-    it('should render category tabs', () => {
-      wrapper = createWrapper();
-      const tabs = wrapper.find('[data-test="aws-integration-category-tabs"]');
-      expect(tabs.exists()).toBe(true);
-    });
-
-    it('should render All Services tab', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('All Services');
-    });
-
-    it('should render Logs, Metrics, Security, Networking tabs', () => {
-      wrapper = createWrapper();
-      const text = wrapper.text();
-      expect(text).toContain('Logs');
-      expect(text).toContain('Metrics');
-      expect(text).toContain('Security');
-      expect(text).toContain('Networking');
-    });
-
-    it('should render integration tiles', () => {
-      wrapper = createWrapper();
-      const tiles = wrapper.findAll('.aws-tile');
-      expect(tiles.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('Component Identity', () => {
-    it('should have correct component name', () => {
-      wrapper = createWrapper();
-      expect(wrapper.vm.$options.name).toBe('AWSIntegrationGrid');
-    });
-  });
-
-  describe('Props', () => {
-    it('should accept initialSearch prop', () => {
-      wrapper = createWrapper({ initialSearch: 'CloudWatch' });
-      expect(wrapper.props('initialSearch')).toBe('CloudWatch');
-    });
-
-    it('should initialize searchQuery from initialSearch prop', () => {
-      wrapper = createWrapper({ initialSearch: 'VPC' });
-      const vm = wrapper.vm as any;
-      expect(vm.searchQuery).toBe('VPC');
-    });
-  });
-
-  describe('searchQuery Reactive Data', () => {
-    it('should have empty searchQuery by default', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.searchQuery).toBe('');
-    });
-
-    it('should have activeCategory as "all" by default', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.activeCategory).toBe('all');
-    });
-  });
-
-  describe('filteredIntegrations Computed', () => {
-    it('should return all integrations when no filter', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.filteredIntegrations.length).toBe(4);
-    });
-
-    it('should filter by search query (displayName)', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.searchQuery = 'CloudWatch';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(1);
-      expect(vm.filteredIntegrations[0].displayName).toBe('CloudWatch Logs');
-    });
-
-    it('should filter by search query (name)', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.searchQuery = 'VPCFlow';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(1);
-    });
-
-    it('should filter by category', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.activeCategory = 'logs';
-      await nextTick();
-      const logsServices = vm.filteredIntegrations.filter((i: any) => i.category === 'logs');
-      expect(logsServices.length).toBe(vm.filteredIntegrations.length);
-    });
-
-    it('should filter by security category', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.activeCategory = 'security';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(1);
-      expect(vm.filteredIntegrations[0].displayName).toBe('GuardDuty');
-    });
-
-    it('should show empty state when no matches', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.searchQuery = 'nonexistent-service-xyz';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(0);
-    });
-
-    it('should sort results alphabetically', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      const names = vm.filteredIntegrations.map((i: any) => i.displayName);
-      const sorted = [...names].sort();
-      expect(names).toEqual(sorted);
-    });
-
-    it('should filter case insensitively', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.searchQuery = 'cloudwatch';
-      await nextTick();
-      expect(vm.filteredIntegrations.length).toBe(1);
-    });
-  });
-
-  describe('Empty State', () => {
-    it('should show empty state message when no integrations match', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.searchQuery = 'zzznomatch';
-      await nextTick();
-      expect(wrapper.text()).toContain('No integrations found');
-    });
-  });
-});
diff --git a/web/src/components/ingestion/recommended/AWSIntegrationGrid.vue b/web/src/components/ingestion/recommended/AWSIntegrationGrid.vue
deleted file mode 100644
index 9cc228d304..0000000000
--- a/web/src/components/ingestion/recommended/AWSIntegrationGrid.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<!-- Copyright 2026 OpenObserve Inc.
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-  <div class="w-full">
-    <div class="mb-4">
-      <OSearchInput
-        v-model="searchQuery"
-        placeholder="Search AWS services..."
-        clearable
-        class="max-w-md"
-        data-test="aws-integration-search"
-      />
-    </div>
-
-    <div class="mb-6">
-      <OTabs
-        v-model="activeCategory"
-        dense
-        class="text-gray-400"
-        data-test="aws-integration-category-tabs"
-      >
-        <OTab name="all" label="All Services" />
-        <OTab name="logs" label="Logs" />
-        <OTab name="metrics" label="Metrics" />
-        <OTab name="security" label="Security" />
-        <OTab name="networking" label="Networking" />
-      </OTabs>
-    </div>
-
-    <div
-      v-if="filteredIntegrations.length === 0"
-      class="text-center py-12 text-[#666] dark:text-[#999]"
-    >
-      <OIcon name="search-off" class="mb-2" style="width: 3rem; height: 3rem;" />
-      <div class="text-base">No integrations found matching your search</div>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4" v-else>
-      <div
-        v-for="integration in filteredIntegrations"
-        :key="integration.id"
-      >
-        <AWSIntegrationTile :integration="integration" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import OTabs from '@/lib/navigation/Tabs/OTabs.vue'
-import OTab from '@/lib/navigation/Tabs/OTab.vue'
-import OSearchInput from '@/lib/forms/SearchInput/OSearchInput.vue'
-import { defineComponent, ref, computed, watch } from "vue";
-import { useRoute } from "vue-router";
-import { awsIntegrations } from "@/utils/awsIntegrations";
-import AWSIntegrationTile from "./AWSIntegrationTile.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-
-export default defineComponent({
-  name: "AWSIntegrationGrid",
-  components: {
-    OTabs, OTab,
-    AWSIntegrationTile,
-    OSearchInput,
-    OIcon,
-},
-  props: {
-    initialSearch: {
-      type: String,
-      default: "",
-    },
-  },
-  setup(props) {
-    const route = useRoute();
-    const searchQuery = ref((route.query.search as string) || props.initialSearch || "");
-    const activeCategory = ref("all");
-
-    // Watch for changes in route query parameter
-    watch(() => route.query.search, (newSearch) => {
-      if (newSearch && typeof newSearch === 'string') {
-        searchQuery.value = newSearch;
-      } else if (newSearch === undefined) {
-        // Clear search when query param is removed
-        searchQuery.value = "";
-      }
-    });
-
-    // Watch for changes in initialSearch prop
-    watch(() => props.initialSearch, (newSearch) => {
-      if (newSearch !== undefined) {
-        searchQuery.value = newSearch;
-      }
-    });
-
-    const filteredIntegrations = computed(() => {
-      let filtered = [...awsIntegrations];
-
-      // Filter by search query
-      if (searchQuery.value) {
-        const query = searchQuery.value.toLowerCase();
-        filtered = filtered.filter(
-          (integration) =>
-            integration.displayName.toLowerCase().includes(query) ||
-            integration.description.toLowerCase().includes(query) ||
-            integration.name.toLowerCase().includes(query)
-        );
-      }
-
-      // Filter by category
-      if (activeCategory.value !== "all") {
-        filtered = filtered.filter(
-          (integration) => integration.category === activeCategory.value
-        );
-      }
-
-      // Sort by name
-      filtered.sort((a, b) => a.displayName.localeCompare(b.displayName));
-
-      return filtered;
-    });
-
-    return {
-      searchQuery,
-      activeCategory,
-      filteredIntegrations,
-    };
-  },
-});
-</script>
diff --git a/web/src/components/ingestion/recommended/AWSIntegrationTile.spec.ts b/web/src/components/ingestion/recommended/AWSIntegrationTile.spec.ts
index 15647a1fc1..1421c577e2 100644
--- a/web/src/components/ingestion/recommended/AWSIntegrationTile.spec.ts
+++ b/web/src/components/ingestion/recommended/AWSIntegrationTile.spec.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import { createI18n } from 'vue-i18n';
+import enUS from '@/locales/languages/en-US.json';
 import { createRouter, createWebHistory } from 'vue-router';
 import AWSIntegrationTile from './AWSIntegrationTile.vue';
 
@@ -107,7 +108,9 @@ const mockStore = createStore({
   },
 });
 
-const mockI18n = createI18n({ locale: 'en', messages: { en: {} } });
+// Real locale messages: the component renders t() keys, and several
+// assertions below check the resulting English text.
+const mockI18n = createI18n({ locale: 'en', messages: { en: enUS } });
 const mockRouter = createRouter({
   history: createWebHistory(),
   routes: [
diff --git a/web/src/components/ingestion/recommended/AWSIntegrationTile.vue b/web/src/components/ingestion/recommended/AWSIntegrationTile.vue
index 51c1058a00..0d26dec181 100644
--- a/web/src/components/ingestion/recommended/AWSIntegrationTile.vue
+++ b/web/src/components/ingestion/recommended/AWSIntegrationTile.vue
@@ -16,11 +16,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
   <OCard
-    class="border border-border h-full flex flex-col transition-all duration-200 ease-in-out rounded-lg hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_12px_rgba(255,255,255,0.1)]"
+    class="border border-border h-full flex flex-col transition-all duration-200 ease-in-out rounded-lg hover:-translate-y-0.5 hover:shadow-lg"
   >
     <OCardSection class="p-4 pb-2 flex-1">
       <div class="flex items-start justify-between mb-2">
-        <div class="font-semibold text-base leading-[1.4]" :class="store.state.theme === 'dark' ? 'text-[#e0e0e0]' : 'text-[#1a1a1a]'">
+        <div class="font-semibold text-base leading-snug text-text-heading">
           {{ integration.displayName }}
         </div>
         <OButton
@@ -32,10 +32,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :data-test="`aws-${integration.id}-docs-btn`"
         >
           <OIcon name="description" size="sm" />
-          <OTooltip content="View Documentation" />
+          <OTooltip :content="t('ingestion.awsSetup.viewDocumentation')" />
         </OButton>
       </div>
-      <div class="text-sm mb-3 leading-normal min-h-[3em]" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+      <div class="text-sm mb-3 leading-normal min-h-[3em] text-text-secondary">
         {{ integration.description }}
       </div>
     </OCardSection>
@@ -49,7 +49,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @click="handleAddSource()"
         class="flex-1"
         :data-test="`aws-${integration.id}-add-source-btn`"
-        >Add Source</OButton
+        >{{ t("ingestion.awsSetup.addSource") }}</OButton
       >
       <!-- Documentation Button (only shown if no CloudFormation) -->
       <OButton
@@ -59,7 +59,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         @click="handleDocumentation()"
         class="flex-1"
         :data-test="`aws-${integration.id}-documentation-btn`"
-        >Documentation</OButton
+        >{{ t("ingestion.awsSetup.documentation") }}</OButton
       >
       <!-- Add Dashboard Button -->
       <OButton
@@ -69,17 +69,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :disabled="!integration.hasDashboard || !integration.dashboardGithubUrl"
         class="flex-1"
         :data-test="`aws-${integration.id}-add-dashboard-btn`"
-        >Add Dashboard</OButton
+        >{{ t("ingestion.awsSetup.addDashboard") }}</OButton
       >
     </OCardActions>
 
     <!-- Unified Integration Method Selection Dialog -->
-    <ODialog data-test="aws-integration-tile-template-dialog" v-model:open="showTemplateDialog" size="sm" title="Choose Integration Method"
-      secondary-button-label="Cancel"
+    <ODialog
+      data-test="aws-integration-tile-template-dialog"
+      v-model:open="showTemplateDialog"
+      size="sm"
+      :title="t('ingestion.awsSetup.chooseMethod')"
+      :secondary-button-label="t('common.cancel')"
       @click:secondary="showTemplateDialog = false"
     >
       <div class="text-sm font-medium mb-3">
-        Select how you want to integrate {{ integration.displayName }}:
+        {{
+          t("ingestion.awsSetup.chooseMethodPrompt", {
+            service: integration.displayName,
+          })
+        }}
       </div>
       <ul class="aws-integration-options-list flex flex-col list-none p-0 m-0">
         <!-- CloudFormation Templates -->
@@ -135,6 +143,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script lang="ts">
 import { defineComponent, type PropType, ref, computed, shallowRef } from "vue";
+import { useI18n } from "vue-i18n";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
 import ODialog from "@/lib/overlay/Dialog/ODialog.vue";
@@ -171,6 +180,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { t } = useI18n();
     const store = useStore();
     const { confirm } = useConfirmDialog();
     const router = useRouter();
@@ -563,6 +573,7 @@ export default defineComponent({
     };
 
     return {
+      t,
       store,
       handleAddSource,
       handleAddDashboard,
diff --git a/web/src/components/ingestion/recommended/AWSQuickSetup.vue b/web/src/components/ingestion/recommended/AWSQuickSetup.vue
index cbaa9918d9..b5d87899c0 100644
--- a/web/src/components/ingestion/recommended/AWSQuickSetup.vue
+++ b/web/src/components/ingestion/recommended/AWSQuickSetup.vue
@@ -23,7 +23,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OIcon
             name="rocket-launch"
             size="xl"
-            class="text-[var(--q-primary)]"
+            class="text-text-link"
           />
           <div>
             <h6 class="text-xl! font-bold m-0 mb-2!">
@@ -121,7 +121,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           :options="AWS_REGIONS"
           valueKey="value"
           labelKey="label"
-          style="max-width: 320px"
+          class="max-w-xs"
           data-test="aws-region-select"
         />
       </div>
@@ -131,7 +131,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="mb-6">
           <div class="mb-3 font-semibold text-[0.9rem]" :class="stepLabelClass">
             Admin region
-            <span class="font-normal text-xs text-[#888]"
+            <span class="font-normal text-xs text-text-muted"
               >(where the StackSet is managed)</span
             >
           </div>
@@ -140,7 +140,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :options="AWS_REGIONS"
             valueKey="value"
             labelKey="label"
-            style="max-width: 320px"
+            class="max-w-xs"
             data-test="aws-admin-region-select"
           />
         </div>
@@ -158,7 +158,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
               <div class="font-semibold text-[0.9rem]" :class="stepLabelClass">
                 Target regions
-                <span class="font-normal text-xs text-[#888]"
+                <span class="font-normal text-xs text-text-muted"
                   >(where stacks will be deployed)</span
                 >
               </div>
@@ -261,7 +261,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </OButton>
         <span
           v-if="enabledServices.length === 0"
-          class="text-sm text-red-500"
+          class="text-sm text-status-error-text"
         >
           Select at least one service
         </span>
@@ -269,7 +269,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-else-if="
             deploymentMode === 'stackset' && targetRegions.length === 0
           "
-          class="text-sm text-red-500"
+          class="text-sm text-status-error-text"
         >
           Select at least one target region
         </span>
@@ -311,14 +311,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               The StackSets console doesn't support URL pre-fill. Enter these
               values as you go through the wizard.
             </p>
-            <div class="flex flex-col gap-[6px]">
+            <div class="flex flex-col gap-1.5">
               <div
                 v-for="param in stackSetParams"
                 :key="param.key"
-                class="flex items-center gap-3 py-[6px] px-[10px] rounded text-[0.8rem] font-mono"
+                class="flex items-center gap-3 py-1.5 px-2.5 rounded text-xs font-mono"
                 :class="paramRowClass"
               >
-                <div class="min-w-[240px] font-semibold shrink-0" :class="paramKeyClass">{{ param.key }}</div>
+                <div class="min-w-60 font-semibold shrink-0" :class="paramKeyClass">{{ param.key }}</div>
                 <div class="flex items-center gap-1 flex-1 overflow-hidden">
                   <span class="overflow-hidden text-ellipsis whitespace-nowrap flex-1" :class="paramValTextClass">{{ param.value }}</span>
                   <OButton
@@ -399,37 +399,19 @@ export default defineComponent({
     const showTargetRegions = ref(false);
     const showServices = ref(false);
 
-    const quickInstallBgClass = computed(() => {
-      return store.state.theme === 'dark'
-        ? 'bg-gray-800 border border-gray-700'
-        : 'bg-blue-50 border border-blue-200';
-    });
-
-    const descriptionClass = computed(() => {
-      return store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-700';
-    });
-
-    // dark: variants do not generate CSS in this setup, so dark-mode colors
-    // are resolved here against store.state.theme (same pattern as quickInstallBgClass).
-    const isDark = computed(() => store.state.theme === 'dark');
-    const stepLabelClass = computed(() =>
-      isDark.value ? 'text-[#d0d0d0]' : 'text-[#333]');
-    const hintTextClass = computed(() =>
-      isDark.value ? 'text-[#b0b0b0]' : 'text-[#666]');
-    const collapsibleHeaderClass = computed(() =>
-      isDark.value
-        ? 'bg-[rgba(255,255,255,0.06)] border border-[#404040] hover:bg-[rgba(255,255,255,0.09)]'
-        : 'bg-[#f0f4ff] border border-[#d0d9f0] hover:bg-[#e8eeff]');
-    const paramHelperClass = computed(() =>
-      isDark.value ? 'bg-[rgba(255,255,255,0.05)]' : 'bg-[#f5f5f5]');
-    const paramRowClass = computed(() =>
-      isDark.value
-        ? 'bg-[rgba(255,255,255,0.03)] border border-[#404040]'
-        : 'bg-white border border-(--o2-border)');
-    const paramKeyClass = computed(() =>
-      isDark.value ? 'text-[#ccc]' : 'text-[#333]');
-    const paramValTextClass = computed(() =>
-      isDark.value ? 'text-[#aaa]' : 'text-[#555]');
+    // Design tokens resolve per-theme on their own, so none of these branch on
+    // store.state.theme any more — they were eight computeds returning hardcoded
+    // hex/palette colors (plus a banned --o2-border) for exactly that reason.
+    const quickInstallBgClass = "bg-status-info-bg border border-border-default";
+    const descriptionClass = "text-text-secondary";
+    const stepLabelClass = "text-text-heading";
+    const hintTextClass = "text-text-secondary";
+    const collapsibleHeaderClass =
+      "bg-surface-subtle border border-border-default hover:bg-surface-subtle-hover";
+    const paramHelperClass = "bg-surface-subtle";
+    const paramRowClass = "bg-surface-base border border-border-default";
+    const paramKeyClass = "text-text-heading";
+    const paramValTextClass = "text-text-secondary";
 
     let endpoint: any = null;
     try {
diff --git a/web/src/components/ingestion/recommended/AzureConfig.spec.ts b/web/src/components/ingestion/recommended/AzureConfig.spec.ts
index 2d75ac1ef5..eaf9b83c3e 100644
--- a/web/src/components/ingestion/recommended/AzureConfig.spec.ts
+++ b/web/src/components/ingestion/recommended/AzureConfig.spec.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import { createI18n } from 'vue-i18n';
+import enUS from '@/locales/languages/en-US.json';
 import { createRouter, createWebHistory } from 'vue-router';
 import AzureConfig from './AzureConfig.vue';
 
@@ -45,7 +46,9 @@ const mockStore = createStore({
   },
 });
 
-const mockI18n = createI18n({ locale: 'en', messages: { en: {} } });
+// Real locale messages: the component renders t() keys, and several
+// assertions below check the resulting English text.
+const mockI18n = createI18n({ locale: 'en', messages: { en: enUS } });
 const mockRouter = createRouter({
   history: createWebHistory(),
   routes: [{ path: '/', component: { template: '<div>Home</div>' } }],
@@ -58,6 +61,16 @@ describe('AzureConfig.vue', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     vi.stubGlobal('open', vi.fn());
+    // afterEach's unstubAllGlobals also clears the ResizeObserver stub that
+    // setupTests installs globally, and OTabs needs it (jsdom has none).
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      },
+    );
   });
 
   afterEach(() => {
diff --git a/web/src/components/ingestion/recommended/AzureConfig.vue b/web/src/components/ingestion/recommended/AzureConfig.vue
index f4c0fdc014..307eef411f 100644
--- a/web/src/components/ingestion/recommended/AzureConfig.vue
+++ b/web/src/components/ingestion/recommended/AzureConfig.vue
@@ -15,45 +15,34 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
 <template>
-  <div class="m-3 mt-1 max-w-[860px]">
+  <div class="m-3 mt-1 max-w-4xl">
     <!-- Header -->
     <div class="flex items-start gap-4 mb-6">
-      <OIcon
-        name="cloud"
-        size="xl"
-        class="flex-shrink-0"
-      />
+      <OIcon name="cloud" size="xl" class="flex-shrink-0" />
       <div>
-        <div class="text-sm font-medium m-0 mb-1" :class="store.state.theme === 'dark' ? 'text-[#e0e0e0]' : 'text-[#1a1a1a]'">
-          Azure Activity Logs
+        <div
+          data-test="azure-config-page-title"
+          class="text-sm font-medium m-0 mb-1 text-text-heading"
+        >
+          {{ t("ingestion.azureSetup.activityLogsTitle") }}
         </div>
-        <div class="text-sm m-0" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
-          Stream Azure subscription activity logs to OpenObserve via Event Hub.
-          The ARM template sets up the Event Hub infrastructure — you then
-          configure Azure to export logs to it.
+        <div class="text-sm m-0 text-text-secondary">
+          {{ t("ingestion.azureSetup.activityLogsDescription") }}
         </div>
       </div>
     </div>
 
     <!-- Step 1 -->
     <div
-      class="mb-4 p-4 rounded border-l-[3px] border-l-solid"
-      :class="store.state.theme === 'dark' ? 'bg-[rgba(255,255,255,0.04)] border-l-[#404040]' : 'bg-[#fafafa] border-l-[#e0e0e0]'"
+      class="mb-4 p-4 rounded border-l-4 border-l-solid bg-surface-subtle border-l-border-strong"
     >
-      <div
-        style="
-          display: grid;
-          grid-template-columns: 28px 1fr;
-          gap: 12px;
-          align-items: start;
-        "
-      >
-        <div class="w-7 h-7 rounded-full flex items-center justify-center font-bold text-[0.85rem] shrink-0 bg-[#1976d2] text-white">1</div>
+      <div class="flex gap-3 items-start">
+        <div class="w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 bg-status-info-bg text-status-info-text">1</div>
         <div>
-          <div class="font-semibold mb-1" :class="store.state.theme === 'dark' ? 'text-[#e0e0e0]' : 'text-[#1a1a1a]'">
+          <div class="font-semibold mb-1 text-text-heading">
             Deploy ARM Template
           </div>
-          <div class="text-sm m-0 mb-3" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+          <div class="text-sm m-0 mb-3 text-text-secondary">
             Creates an Event Hub namespace, Event Hub, and all required
             resources in your Azure subscription.
           </div>
@@ -74,23 +63,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Step 2 -->
     <div
-      class="mb-4 p-4 rounded border-l-[3px] border-l-solid"
-      :class="store.state.theme === 'dark' ? 'bg-[rgba(255,255,255,0.04)] border-l-[#404040]' : 'bg-[#fafafa] border-l-[#e0e0e0]'"
+      class="mb-4 p-4 rounded border-l-4 border-l-solid bg-surface-subtle border-l-border-strong"
     >
-      <div
-        style="
-          display: grid;
-          grid-template-columns: 28px 1fr;
-          gap: 12px;
-          align-items: start;
-        "
-      >
-        <div class="w-7 h-7 rounded-full flex items-center justify-center font-bold text-[0.85rem] shrink-0 bg-[#1976d2] text-white">2</div>
+      <div class="flex gap-3 items-start">
+        <div class="w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 bg-status-info-bg text-status-info-text">2</div>
         <div>
-          <div class="font-semibold mb-1" :class="store.state.theme === 'dark' ? 'text-[#e0e0e0]' : 'text-[#1a1a1a]'">
+          <div class="font-semibold mb-1 text-text-heading">
             Configure Diagnostic Settings
           </div>
-          <div class="text-sm mb-3" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+          <div class="text-sm mb-3 text-text-secondary">
             After the ARM deployment completes, route Activity Logs to the Event
             Hub that was created.
           </div>
@@ -103,7 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
           <!-- Portal instructions -->
           <div v-if="step2Mode === 'portal'">
-            <ol class="text-sm pl-4 space-y-1" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+            <ol class="text-sm pl-4 space-y-1 text-text-secondary">
               <li>
                 Go to
                 <strong
@@ -133,7 +114,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <!-- Categories -->
             <div class="mb-4">
               <div class="flex items-center justify-between mb-2">
-                <div class="text-xs font-semibold" :class="store.state.theme === 'dark' ? 'text-[#d0d0d0]' : 'text-[#333]'">
+                <div class="text-xs font-semibold text-text-heading">
                   Log categories to enable
                 </div>
                 <div class="flex gap-2">
@@ -153,14 +134,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   >
                 </div>
               </div>
-              <div
-                style="
-                  display: grid;
-                  grid-template-columns: repeat(4, 1fr);
-                  gap: 4px;
-                  width: 100%;
-                "
-              >
+              <div class="grid grid-cols-2 sm:grid-cols-4 gap-1 w-full">
                 <OCheckbox
                   v-for="cat in LOG_CATEGORIES"
                   :key="cat.value"
@@ -171,16 +145,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
             </div>
 
-            <div
-              style="
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 16px;
-                margin-bottom: 16px;
-              "
-            >
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
               <div>
-                <div class="text-xs mb-1" :class="store.state.theme === 'dark' ? 'text-[#d0d0d0]' : 'text-[#333]'">
+                <div class="text-xs mb-1 text-text-heading">
                   Resource Group
                 </div>
                 <OInput
@@ -191,7 +158,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 />
               </div>
               <div>
-                <div class="text-xs mb-1" :class="store.state.theme === 'dark' ? 'text-[#d0d0d0]' : 'text-[#333]'">
+                <div class="text-xs mb-1 text-text-heading">
                   Deployment Name
                 </div>
                 <OInput
@@ -205,12 +172,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
             <div
               v-if="enabledCategories.length === 0"
-              class="text-sm text-red-500 mb-3"
+              class="text-sm text-status-error-text mb-3"
             >
               Select at least one log category above.
             </div>
             <div v-else>
-              <div class="text-xs mb-2" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+              <div class="text-xs mb-2 text-text-secondary">
                 Run this command after your ARM deployment completes:
               </div>
               <CopyContent
@@ -225,8 +192,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
     <!-- Manual Configuration -->
     <div class="mt-6">
-      <div class="font-semibold text-sm mb-2" :class="store.state.theme === 'dark' ? 'text-[#d0d0d0]' : 'text-[#333]'">
-        Manual Configuration (for reference)
+      <div class="font-semibold text-sm mb-2 text-text-heading">
+        {{ t("ingestion.azureSetup.manualTitle") }}
       </div>
       <CopyContent :content="manualContent" />
     </div>
@@ -235,6 +202,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <script lang="ts">
 import { defineComponent, computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import OButton from "@/lib/core/Button/OButton.vue";
 import OCheckbox from "@/lib/forms/Checkbox/OCheckbox.vue";
 import OInput from "@/lib/forms/Input/OInput.vue";
@@ -271,10 +239,12 @@ const activityLogsIntegration = azureIntegrations.find(
 
 export default defineComponent({
   name: "AzureConfig",
-  components: { CopyContent, OToggleGroup, OToggleGroupItem, OButton, OCheckbox, OInput,
+  components: {
+    CopyContent, OToggleGroup, OToggleGroupItem, OButton, OCheckbox, OInput,
     OIcon,
-},
+  },
   setup() {
+    const { t } = useI18n();
     const store = useStore();
 
     let endpoint: any = null;
@@ -347,6 +317,7 @@ export default defineComponent({
     };
 
     return {
+      t,
       store,
       LOG_CATEGORIES,
       step2Mode,
diff --git a/web/src/components/ingestion/recommended/AzureIndividualServices.spec.ts b/web/src/components/ingestion/recommended/AzureIndividualServices.spec.ts
index c53f15180b..24bc17541c 100644
--- a/web/src/components/ingestion/recommended/AzureIndividualServices.spec.ts
+++ b/web/src/components/ingestion/recommended/AzureIndividualServices.spec.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import { createI18n } from 'vue-i18n';
+import enUS from '@/locales/languages/en-US.json';
 import { createRouter, createWebHistory } from 'vue-router';
 import { nextTick } from 'vue';
 import AzureIndividualServices from './AzureIndividualServices.vue';
@@ -69,7 +70,9 @@ const mockStore = createStore({
   },
 });
 
-const mockI18n = createI18n({ locale: 'en', messages: { en: {} } });
+// Real locale messages: the component renders t() keys, and several
+// assertions below check the resulting English text.
+const mockI18n = createI18n({ locale: 'en', messages: { en: enUS } });
 const mockRouter = createRouter({
   history: createWebHistory(),
   routes: [{ path: '/', component: { template: '<div>Home</div>' } }],
diff --git a/web/src/components/ingestion/recommended/AzureIndividualServices.vue b/web/src/components/ingestion/recommended/AzureIndividualServices.vue
index 2addd3efff..b776b63e3e 100644
--- a/web/src/components/ingestion/recommended/AzureIndividualServices.vue
+++ b/web/src/components/ingestion/recommended/AzureIndividualServices.vue
@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <div class="mb-4">
       <OSearchInput
         v-model="searchQuery"
-        placeholder="Search Azure services..."
+        :placeholder="t('ingestion.azureSetup.searchPlaceholder')"
         clearable
         class="max-w-md"
         data-test="azure-integration-search"
@@ -30,34 +30,34 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <OTabs
         v-model="activeCategory"
         dense
-        class="text-gray-400"
         data-test="azure-integration-category-tabs"
       >
-        <OTab name="all" label="All Services" />
-        <OTab name="logs" label="Logs" />
-        <OTab name="compute" label="Compute" />
-        <OTab name="storage" label="Storage" />
-        <OTab name="security" label="Security" />
-        <OTab name="networking" label="Networking" />
+        <OTab name="all" :label="t('ingestion.azureSetup.categoryAll')" />
+        <OTab name="logs" :label="t('ingestion.azureSetup.categoryLogs')" />
+        <OTab name="compute" :label="t('ingestion.azureSetup.categoryCompute')" />
+        <OTab name="storage" :label="t('ingestion.azureSetup.categoryStorage')" />
+        <OTab name="security" :label="t('ingestion.azureSetup.categorySecurity')" />
+        <OTab name="networking" :label="t('ingestion.azureSetup.categoryNetworking')" />
       </OTabs>
     </div>
 
     <div
       v-if="filteredIntegrations.length === 0"
-      class="text-center py-12 text-[#666] dark:text-[#999]"
+      class="text-center py-12 text-text-secondary"
     >
-      <OIcon name="search-off" class="mb-2" style="width: 3rem; height: 3rem;" />
-      <div class="text-base">No integrations found matching your search</div>
+      <OIcon name="search-off" class="mb-2 w-12 h-12" />
+      <div class="text-base">{{ t("ingestion.azureSetup.noResults") }}</div>
     </div>
 
-    <div class="flex gap-3" v-else>
-      <div
+    <div
+      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+      v-else
+    >
+      <AzureIntegrationTile
         v-for="integration in filteredIntegrations"
         :key="integration.id"
-        class="w-full col-sm-6 col-md-4 col-lg-3"
-      >
-        <AzureIntegrationTile :integration="integration" />
-      </div>
+        :integration="integration"
+      />
     </div>
   </div>
 </template>
@@ -67,6 +67,7 @@ import OTabs from '@/lib/navigation/Tabs/OTabs.vue'
 import OTab from '@/lib/navigation/Tabs/OTab.vue'
 import OSearchInput from '@/lib/forms/SearchInput/OSearchInput.vue'
 import { defineComponent, ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { azureIntegrations } from "@/utils/azureIntegrations";
 import AzureIntegrationTile from "./AzureIntegrationTile.vue";
 import OIcon from "@/lib/core/Icon/OIcon.vue";
@@ -80,6 +81,7 @@ export default defineComponent({
     OIcon,
 },
   setup() {
+    const { t } = useI18n();
     const searchQuery = ref("");
     const activeCategory = ref("all");
 
@@ -111,6 +113,7 @@ export default defineComponent({
     });
 
     return {
+      t,
       searchQuery,
       activeCategory,
       filteredIntegrations,
diff --git a/web/src/components/ingestion/recommended/AzureIntegrationTile.vue b/web/src/components/ingestion/recommended/AzureIntegrationTile.vue
index 7e473a9ac9..a17e3d1847 100644
--- a/web/src/components/ingestion/recommended/AzureIntegrationTile.vue
+++ b/web/src/components/ingestion/recommended/AzureIntegrationTile.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   <OCard class="h-full flex flex-col transition-all duration-200 rounded-lg hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.1)] dark:hover:shadow-[0_4px_12px_rgba(255,255,255,0.1)]">
     <OCardSection class="pb-2">
       <div class="flex items-start justify-between mb-2">
-        <div class="font-semibold text-base leading-[1.4]" :class="store.state.theme === 'dark' ? 'text-[#e0e0e0]' : 'text-[#1a1a1a]'">
+        <div class="font-semibold text-base leading-snug text-text-heading">
           {{ integration.displayName }}
         </div>
         <OButton
@@ -33,7 +33,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <OTooltip content="View Documentation" />
         </OButton>
       </div>
-      <div class="text-sm mb-3 leading-normal min-h-[3em]" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+      <div class="text-sm mb-3 leading-normal min-h-[3em] text-text-secondary">
         {{ integration.description }}
       </div>
     </OCardSection>
diff --git a/web/src/components/ingestion/recommended/AzureQuickSetup.spec.ts b/web/src/components/ingestion/recommended/AzureQuickSetup.spec.ts
index 1a2be9e69b..5e19f0dcf3 100644
--- a/web/src/components/ingestion/recommended/AzureQuickSetup.spec.ts
+++ b/web/src/components/ingestion/recommended/AzureQuickSetup.spec.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { mount, VueWrapper } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import { createI18n } from 'vue-i18n';
+import enUS from '@/locales/languages/en-US.json';
 import { createRouter, createWebHistory } from 'vue-router';
 import AzureQuickSetup from './AzureQuickSetup.vue';
 
@@ -56,7 +57,9 @@ const mockStore = createStore({
   },
 });
 
-const mockI18n = createI18n({ locale: 'en', messages: { en: {} } });
+// Real locale messages: the component renders t() keys, and several
+// assertions below check the resulting English text.
+const mockI18n = createI18n({ locale: 'en', messages: { en: enUS } });
 const mockRouter = createRouter({
   history: createWebHistory(),
   routes: [{ path: '/', component: { template: '<div>Home</div>' } }],
diff --git a/web/src/components/ingestion/recommended/AzureQuickSetup.vue b/web/src/components/ingestion/recommended/AzureQuickSetup.vue
index 7c840d053c..962e37bdf5 100644
--- a/web/src/components/ingestion/recommended/AzureQuickSetup.vue
+++ b/web/src/components/ingestion/recommended/AzureQuickSetup.vue
@@ -23,10 +23,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <OIcon name="cloud" size="xl" />
           </div>
           <div class="flex-1">
-            <h5 class="text-lg font-bold m-0 mb-2 title" :class="store.state.theme === 'dark' ? 'text-[var(--o2-border)]' : 'text-[#1a1a1a]'">
+            <h5 class="text-lg font-bold m-0 mb-2 title text-text-heading">
               Azure Function Integration
             </h5>
-            <p class="text-sm m-0 mb-4 description" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+            <p class="text-sm m-0 mb-4 description">
               Deploy the OpenObserve Azure Function to collect logs from any
               Azure service through diagnostic settings and Event Hub.
             </p>
@@ -84,7 +84,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <div class="text-sm details-section">
               <h6
                 class="text-base font-semibold m-0 mb-3 details-title"
-                :class="store.state.theme === 'dark' ? 'text-[#d0d0d0]' : 'text-[#333]'"
+               
               >
                 Supported Azure Services ({{ includedServices.length }})
               </h6>
@@ -96,7 +96,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                     :key="service.name"
                     class="w-full col-sm-6"
                   >
-                    <div class="service-item p-2 rounded border transition-all duration-200 ease-in-out" :class="store.state.theme === 'dark' ? 'border-[#404040] bg-[rgba(255,255,255,0.05)]' : 'border-[var(--o2-border)] bg-[#fafafa]'">
+                    <div class="service-item p-2 rounded border border-border-default bg-surface-subtle hover:bg-surface-subtle-hover transition-all duration-200 ease-in-out">
                       <div class="flex items-start gap-2">
                         <OIcon
                           :name="getCategoryIcon(service.category)"
@@ -105,13 +105,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                           color="primary"
                         />
                         <div class="flex-1">
-                          <div class="font-medium text-sm service-name" :class="store.state.theme === 'dark' ? 'text-[var(--o2-border)]' : 'text-[#1a1a1a]'">
+                          <div class="font-medium text-sm service-name text-text-heading">
                             {{ service.name }}
                           </div>
-                          <div class="text-xs mt-0.5 service-description" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+                          <div class="text-xs mt-0.5 service-description">
                             {{ service.description }}
                           </div>
-                          <div class="text-xs mt-1 font-medium service-category" :class="store.state.theme === 'dark' ? 'text-[#808080]' : 'text-[#999]'">
+                          <div class="text-xs mt-1 font-medium service-category text-text-muted">
                             {{ formatCategory(service.category) }}
                           </div>
                         </div>
@@ -123,26 +123,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
               <h6
                 class="text-base font-semibold m-0 mb-3 details-title"
-                :class="store.state.theme === 'dark' ? 'text-[#d0d0d0]' : 'text-[#333]'"
+               
               >
                 How It Works
               </h6>
 
               <div class="mb-3">
-                <div class="font-semibold mb-1 detail-label" :class="store.state.theme === 'dark' ? 'text-[#d0d0d0]' : 'text-[#333]'">
+                <div class="font-semibold mb-1 detail-label">
                   Architecture:
                 </div>
-                <div class="detail-value" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+                <div class="detail-value">
                   Azure Service → Diagnostic Settings → Event Hub → Azure
                   Function → OpenObserve
                 </div>
               </div>
 
               <div class="mb-3">
-                <div class="font-semibold mb-1 detail-label" :class="store.state.theme === 'dark' ? 'text-[#d0d0d0]' : 'text-[#333]'">
+                <div class="font-semibold mb-1 detail-label">
                   What You Need:
                 </div>
-                <ul class="list-disc ml-5 space-y-1 detail-value" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+                <ul class="list-disc ml-5 space-y-1 detail-value">
                   <li>Azure subscription with appropriate permissions</li>
                   <li>Event Hub namespace and hub</li>
                   <li>Azure Function App</li>
@@ -151,10 +151,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
 
               <div class="mb-3">
-                <div class="font-semibold mb-1 detail-label" :class="store.state.theme === 'dark' ? 'text-[#d0d0d0]' : 'text-[#333]'">
+                <div class="font-semibold mb-1 detail-label">
                   Setup Steps:
                 </div>
-                <ol class="list-decimal ml-5 space-y-1 detail-value" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+                <ol class="list-decimal ml-5 space-y-1 detail-value">
                   <li>Create an Event Hub namespace and hub</li>
                   <li>Deploy the Azure Function from GitHub</li>
                   <li>Configure function with OpenObserve credentials</li>
@@ -166,10 +166,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               </div>
 
               <div>
-                <div class="font-semibold mb-1 detail-label" :class="store.state.theme === 'dark' ? 'text-[#d0d0d0]' : 'text-[#333]'">
+                <div class="font-semibold mb-1 detail-label">
                   Cost Considerations:
                 </div>
-                <div class="detail-value" :class="store.state.theme === 'dark' ? 'text-[#b0b0b0]' : 'text-[#666]'">
+                <div class="detail-value">
                   Charges apply for Event Hub throughput, Azure Function
                   execution, and OpenObserve storage. Refer to Azure and
                   OpenObserve pricing for details.
@@ -374,7 +374,3 @@ export default defineComponent({
 });
 </script>
 
-<style>
-.body--light .azure-quick-setup .service-item:hover { background-color: #f5f5f5; }
-.body--dark .azure-quick-setup .service-item:hover { background-color: rgba(255, 255, 255, 0.08); }
-</style>
diff --git a/web/src/components/ingestion/recommended/GCPConfig.spec.ts b/web/src/components/ingestion/recommended/GCPConfig.spec.ts
index 7696eff00e..b4407ecbd9 100644
--- a/web/src/components/ingestion/recommended/GCPConfig.spec.ts
+++ b/web/src/components/ingestion/recommended/GCPConfig.spec.ts
@@ -13,521 +13,115 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { ref } from 'vue';
-import config from '../../../aws-exports';
-import { getEndPoint, getImageURL, getIngestionURL } from '../../../utils/zincutils';
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import { createStore } from "vuex";
+import { createI18n } from "vue-i18n";
+import { ref } from "vue";
+import GCPConfig from "./GCPConfig.vue";
+import gcpCard from "@/components/ingestion/setupCard/content/gcp";
+import { getDataSourceCard } from "@/components/ingestion/setupCard/registry";
 
-// Mock dependencies
-vi.mock('../../../aws-exports', () => ({
+const mockEndpoint = ref({
+  url: "https://test.openobserve.ai",
+  host: "test.openobserve.ai",
+  port: 443,
+  protocol: "https",
+  tls: true,
+});
+
+vi.mock("@/composables/useIngestion", () => ({
+  default: vi.fn(() => ({ endpoint: mockEndpoint })),
+}));
+
+vi.mock("@/components/ingestion/setupCard/SetupCardRenderer.vue", () => ({
   default: {
-    aws_project_region: 'us-east-1',
-    aws_cognito_region: 'us-east-1'
-  }
+    name: "SetupCardRenderer",
+    props: ["content", "subs", "logoUrl", "logoUrlDark"],
+    template: '<div data-test="rich-card-stub" />',
+  },
 }));
 
-vi.mock('../../../utils/zincutils', () => ({
-  getEndPoint: vi.fn(),
-  getImageURL: vi.fn(),
-  getIngestionURL: vi.fn()
-}));
-
-// Mock vue-i18n
-const mockT = vi.fn((key: string) => key);
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: mockT
-  })
-}));
-
-// Mock Vuex store
-const mockStore = {
+const mockStore = createStore({
   state: {
-    selectedOrganization: {
-      identifier: 'test-org',
-      name: 'Test Organization'
-    }
-  }
+    selectedOrganization: { identifier: "test-org", name: "Test Organization" },
+    userInfo: { email: "test@example.com" },
+    organizationData: { organizationPasscode: "test-passcode" },
+    theme: "light",
+  },
+});
+const mockI18n = createI18n({ locale: "en", messages: { en: {} } });
+
+const SUBS = {
+  url: "https://test.openobserve.ai",
+  org: "test-org",
+  token: "dGVzdEB0b2tlbg==",
 };
 
-describe('GCPConfig.vue Component Logic', () => {
-  const mockEndpointData = {
-    url: 'http://localhost:5080',
-    host: 'localhost',
-    port: '5080',
-    protocol: 'http',
-    tls: 'false'
-  };
-
-  const mockIngestionURL = 'http://localhost:5080';
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    
-    vi.mocked(getIngestionURL).mockReturnValue(mockIngestionURL);
-    vi.mocked(getEndPoint).mockReturnValue(mockEndpointData);
-    vi.mocked(getImageURL).mockReturnValue('mock-image-url');
+describe("gcpCard builder", () => {
+  it("builds the GCP card metadata and step flow", () => {
+    const card = gcpCard(SUBS);
+    expect(card.provider.name).toBe("Google Cloud");
+    expect(card.provider.metaBadges).toEqual(["Logs"]);
+    expect(card.steps.map((s) => s.id)).toEqual([
+      "sink",
+      "subscription",
+      "verify",
+    ]);
   });
 
+  it("builds the Pub/Sub push endpoint with org and key", () => {
+    const sub = gcpCard(SUBS).steps.find((s) => s.id === "subscription")!;
+    expect(sub.code!.raw).toBe(
+      `${SUBS.url}/gcp/${SUBS.org}/{stream}/_sub?API-Key=${SUBS.token}`,
+    );
+    // The key is masked on screen and only revealed/copied deliberately.
+    expect(sub.code!.masked).not.toContain(SUBS.token);
+  });
+
+  it("keeps the stream name in lockstep between URL and detection", () => {
+    const card = gcpCard(SUBS);
+    // {stream} survives build-time substitution so the renderer fills it from
+    // the stream-name field, which also drives what detection watches.
+    expect(card.streamInput?.default).toBe("default");
+    const sub = card.steps.find((s) => s.id === "subscription")!;
+    expect(sub.code!.raw).toContain("{stream}");
+    expect(card.detect.streamType).toBe("logs");
+  });
+
+  it("uses a filter that is valid SQL", () => {
+    // useStreamDetect interpolates this into `WHERE (<filter>)`, so an empty
+    // filter would be a syntax error and detection could never succeed.
+    expect(gcpCard(SUBS).detect.filter.trim()).not.toBe("");
+  });
+
+  it("keeps BOTH doc links the old page linked, as real anchors", () => {
+    // The pre-migration page listed two clickable links: Pub/Sub Logs and
+    // Google Workspace. Google Workspace briefly regressed into unclickable
+    // prose inside a collapsed accordion — it must stay a footer link.
+    const card = gcpCard(SUBS);
+    expect(card.docUrl).toContain("send-gcp-logs-to-openobserve");
+    expect(card.docLinks).toEqual([
+      {
+        label: "Google Workspace",
+        url: "https://short.openobserve.ai/security/google-workspace",
+      },
+    ]);
+  });
+});
+
+describe("GCPConfig.vue", () => {
+  let wrapper: VueWrapper<any>;
+
   afterEach(() => {
-    vi.clearAllMocks();
+    if (wrapper) wrapper.unmount();
   });
 
-  const createComponentSetup = (customStore = mockStore, customProps = {}) => {
-    const props = {
-      currOrgIdentifier: 'test-org',
-      currUserEmail: 'test@example.com',
-      ...customProps
-    };
-    
-    const store = customStore;
-    const t = mockT;
-    
-    const endpoint: any = ref({
-      url: '',
-      host: '',
-      port: '',
-      protocol: '',
-      tls: ''
-    });
-
-    const ingestionURL = getIngestionURL();
-    endpoint.value = getEndPoint(ingestionURL);
-    
-    const content = `URL: ${endpoint.value.url}/gcp/${store.state.selectedOrganization.identifier}/default/_sub?API-Key=[BASIC_PASSCODE]`;
-
-    return {
-      t,
-      store,
-      config,
-      endpoint,
-      content,
-      getImageURL,
-      props
-    };
-  };
-
-  // Test 1: Component setup initializes correctly
-  it('should initialize reactive data correctly', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.endpoint.value).toEqual(mockEndpointData);
-    expect(setup.store).toBe(mockStore);
-    expect(setup.config).toBeDefined();
-    expect(setup.content).toContain('URL:');
-    expect(setup.t).toBe(mockT);
-    expect(setup.getImageURL).toBeDefined();
+  it("renders the shared setup card for the gcp slug", () => {
+    expect(getDataSourceCard("gcp", SUBS)?.provider.name).toBe("Google Cloud");
+    wrapper = mount(GCPConfig, { global: { plugins: [mockStore, mockI18n] } });
+    const stub = wrapper.findComponent({ name: "SetupCardRenderer" });
+    expect(stub.exists()).toBe(true);
+    expect((stub.props("content") as any).provider.name).toBe("Google Cloud");
   });
-
-  // Test 2: Component calls getIngestionURL on setup
-  it('should call getIngestionURL during setup', () => {
-    createComponentSetup();
-    
-    expect(getIngestionURL).toHaveBeenCalledTimes(1);
-  });
-
-  // Test 3: Component calls getEndPoint with ingestion URL
-  it('should call getEndPoint with ingestion URL', () => {
-    createComponentSetup();
-    
-    expect(getEndPoint).toHaveBeenCalledWith(mockIngestionURL);
-    expect(getEndPoint).toHaveBeenCalledTimes(1);
-  });
-
-  // Test 4: Endpoint ref is initialized with empty values initially
-  it('should initialize endpoint with empty values initially', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.endpoint.value).toEqual(mockEndpointData);
-  });
-
-  // Test 5: Endpoint ref gets populated by getEndPoint result
-  it('should populate endpoint with getEndPoint result', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.endpoint.value.url).toBe(mockEndpointData.url);
-    expect(setup.endpoint.value.host).toBe(mockEndpointData.host);
-    expect(setup.endpoint.value.port).toBe(mockEndpointData.port);
-    expect(setup.endpoint.value.protocol).toBe(mockEndpointData.protocol);
-    expect(setup.endpoint.value.tls).toBe(mockEndpointData.tls);
-  });
-
-  // Test 6: Content string is generated correctly with organization identifier
-  it('should generate content with correct organization identifier', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.content).toContain('/gcp/test-org/default/_sub');
-    expect(setup.content).toContain(mockEndpointData.url);
-  });
-
-  // Test 7: Content includes proper URL structure
-  it('should include correct URL structure in content', () => {
-    const setup = createComponentSetup();
-    
-    const expectedUrl = `${mockEndpointData.url}/gcp/${mockStore.state.selectedOrganization.identifier}/default/_sub?API-Key=[BASIC_PASSCODE]`;
-    expect(setup.content).toBe(`URL: ${expectedUrl}`);
-  });
-
-  // Test 8: Content includes API key placeholder
-  it('should include API key placeholder in content', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.content).toContain('API-Key=[BASIC_PASSCODE]');
-  });
-
-  // Test 9: Component works with different organization identifiers
-  it('should work with different organization identifiers', () => {
-    const customStore = {
-      state: {
-        selectedOrganization: {
-          identifier: 'custom-gcp-org',
-          name: 'Custom GCP Organization'
-        }
-      }
-    };
-    
-    const setup = createComponentSetup(customStore);
-    
-    expect(setup.content).toContain('/gcp/custom-gcp-org/default/_sub');
-  });
-
-  // Test 10: Component works with different endpoint URLs
-  it('should work with different endpoint URLs', () => {
-    const customEndpoint = {
-      url: 'https://gcp.example.com',
-      host: 'gcp.example.com',
-      port: '443',
-      protocol: 'https',
-      tls: 'true'
-    };
-    
-    vi.mocked(getEndPoint).mockReturnValue(customEndpoint);
-    
-    const setup = createComponentSetup();
-    
-    expect(setup.content).toContain('https://gcp.example.com/gcp/test-org/default/_sub');
-    expect(setup.endpoint.value).toEqual(customEndpoint);
-  });
-
-  // Test 11: Component exposes store correctly
-  it('should expose store correctly', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.store).toBe(mockStore);
-    expect(setup.store.state.selectedOrganization.identifier).toBe('test-org');
-  });
-
-  // Test 12: Component exposes config correctly
-  it('should expose config correctly', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.config).toBe(config);
-  });
-
-  // Test 13: Component exposes t function correctly
-  it('should expose t function correctly', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.t).toBe(mockT);
-    expect(typeof setup.t).toBe('function');
-  });
-
-  // Test 14: Component exposes getImageURL function
-  it('should expose getImageURL function', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.getImageURL).toBe(getImageURL);
-    expect(typeof setup.getImageURL).toBe('function');
-  });
-
-  // Test 15: Endpoint ref is reactive
-  it('should have reactive endpoint ref', () => {
-    const setup = createComponentSetup();
-    
-    setup.endpoint.value.url = 'http://new-gcp-url.com';
-    
-    expect(setup.endpoint.value.url).toBe('http://new-gcp-url.com');
-  });
-
-  // Test 16: Component handles props correctly
-  it('should handle props correctly', () => {
-    const customProps = {
-      currOrgIdentifier: 'prop-org',
-      currUserEmail: 'prop@example.com'
-    };
-    
-    const setup = createComponentSetup(mockStore, customProps);
-    
-    expect(setup.props.currOrgIdentifier).toBe('prop-org');
-    expect(setup.props.currUserEmail).toBe('prop@example.com');
-  });
-
-  // Test 17: Component handles empty organization identifier
-  it('should handle empty organization identifier', () => {
-    const emptyOrgStore = {
-      state: {
-        selectedOrganization: {
-          identifier: '',
-          name: ''
-        }
-      }
-    };
-    
-    const setup = createComponentSetup(emptyOrgStore);
-    
-    expect(setup.content).toContain('/gcp//default/_sub');
-  });
-
-  // Test 18: Component handles null organization gracefully
-  it('should handle null organization gracefully', () => {
-    const nullOrgStore = {
-      state: {
-        selectedOrganization: null
-      }
-    };
-    
-    expect(() => createComponentSetup(nullOrgStore)).toThrow();
-  });
-
-  // Test 19: Component handles undefined organization gracefully
-  it('should handle undefined organization gracefully', () => {
-    const undefinedOrgStore = {
-      state: {
-        selectedOrganization: undefined
-      }
-    };
-    
-    expect(() => createComponentSetup(undefinedOrgStore)).toThrow();
-  });
-
-  // Test 20: Content includes the default subscription endpoint
-  it('should include default subscription endpoint in content', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.content).toContain('/default/_sub');
-  });
-
-  // Test 21: Component works with HTTPS endpoints
-  it('should work correctly with HTTPS endpoints', () => {
-    const httpsEndpoint = {
-      url: 'https://secure-gcp.example.com',
-      host: 'secure-gcp.example.com',
-      port: '443',
-      protocol: 'https',
-      tls: 'true'
-    };
-    
-    vi.mocked(getEndPoint).mockReturnValue(httpsEndpoint);
-    
-    const setup = createComponentSetup();
-    
-    expect(setup.endpoint.value.protocol).toBe('https');
-    expect(setup.endpoint.value.tls).toBe('true');
-    expect(setup.content).toContain('https://secure-gcp.example.com/gcp/test-org/default/_sub');
-  });
-
-  // Test 22: Component works with custom ports
-  it('should work correctly with custom ports', () => {
-    const customPortEndpoint = {
-      url: 'http://localhost:8080',
-      host: 'localhost',
-      port: '8080',
-      protocol: 'http',
-      tls: 'false'
-    };
-    
-    vi.mocked(getEndPoint).mockReturnValue(customPortEndpoint);
-    
-    const setup = createComponentSetup();
-    
-    expect(setup.endpoint.value.port).toBe('8080');
-    expect(setup.content).toContain('http://localhost:8080/gcp/test-org/default/_sub');
-  });
-
-  // Test 23: getIngestionURL is called with no parameters
-  it('should call getIngestionURL with no parameters', () => {
-    createComponentSetup();
-    
-    expect(getIngestionURL).toHaveBeenCalledWith();
-  });
-
-  // Test 24: getEndPoint is called exactly once
-  it('should call getEndPoint exactly once', () => {
-    createComponentSetup();
-    
-    expect(getEndPoint).toHaveBeenCalledTimes(1);
-  });
-
-  // Test 25: Component setup returns all expected properties
-  it('should return all expected properties from setup', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup).toHaveProperty('t');
-    expect(setup).toHaveProperty('store');
-    expect(setup).toHaveProperty('config');
-    expect(setup).toHaveProperty('endpoint');
-    expect(setup).toHaveProperty('content');
-    expect(setup).toHaveProperty('getImageURL');
-  });
-
-  // Test 26: Content is a string type
-  it('should have content as string type', () => {
-    const setup = createComponentSetup();
-    
-    expect(typeof setup.content).toBe('string');
-    expect(setup.content.length).toBeGreaterThan(0);
-  });
-
-  // Test 27: Content follows GCP URL pattern
-  it('should follow GCP URL pattern', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.content).toMatch(/URL:\s*https?:\/\/.+\/gcp\/.+\/default\/_sub\?API-Key=\[BASIC_PASSCODE\]/);
-  });
-
-  // Test 28: Component handles getEndPoint returning null
-  it('should handle getEndPoint returning null gracefully', () => {
-    vi.mocked(getEndPoint).mockReturnValue(null as any);
-    
-    expect(() => createComponentSetup()).toThrow();
-  });
-
-  // Test 29: Component handles getEndPoint returning undefined
-  it('should handle getEndPoint returning undefined gracefully', () => {
-    vi.mocked(getEndPoint).mockReturnValue(undefined as any);
-    
-    expect(() => createComponentSetup()).toThrow();
-  });
-
-  // Test 30: Component handles getIngestionURL returning empty string
-  it('should handle getIngestionURL returning empty string', () => {
-    vi.mocked(getIngestionURL).mockReturnValue('');
-    
-    const setup = createComponentSetup();
-    
-    expect(getEndPoint).toHaveBeenCalledWith('');
-  });
-
-  // Test 31: Component handles getIngestionURL returning null
-  it('should handle getIngestionURL returning null', () => {
-    vi.mocked(getIngestionURL).mockReturnValue(null as any);
-    
-    const setup = createComponentSetup();
-    
-    expect(getEndPoint).toHaveBeenCalledWith(null);
-  });
-
-  // Test 32: Component works with different ingestion URLs
-  it('should work with different ingestion URLs', () => {
-    const customIngestionURL = 'https://custom.gcp.url:9200';
-    vi.mocked(getIngestionURL).mockReturnValue(customIngestionURL);
-    
-    const customEndpoint = {
-      url: customIngestionURL,
-      host: 'custom.gcp.url',
-      port: '9200',
-      protocol: 'https',
-      tls: 'true'
-    };
-    vi.mocked(getEndPoint).mockReturnValue(customEndpoint);
-    
-    const setup = createComponentSetup();
-    
-    expect(getEndPoint).toHaveBeenCalledWith(customIngestionURL);
-    expect(setup.content).toContain(customIngestionURL);
-  });
-
-  // Test 33: Endpoint ref maintains reactivity
-  it('should maintain endpoint ref reactivity', () => {
-    const setup = createComponentSetup();
-    
-    const originalUrl = setup.endpoint.value.url;
-    setup.endpoint.value.url = 'http://changed-gcp.com';
-    
-    expect(setup.endpoint.value.url).not.toBe(originalUrl);
-    expect(setup.endpoint.value.url).toBe('http://changed-gcp.com');
-  });
-
-  // Test 34: Component exposes correct number of properties
-  it('should expose exactly 6 properties from setup', () => {
-    const setup = createComponentSetup();
-    const keys = Object.keys(setup).filter(key => key !== 'props');
-    
-    expect(keys).toHaveLength(6);
-    expect(keys).toContain('t');
-    expect(keys).toContain('store');
-    expect(keys).toContain('config');
-    expect(keys).toContain('endpoint');
-    expect(keys).toContain('content');
-    expect(keys).toContain('getImageURL');
-  });
-
-  // Test 35: Component handles special characters in organization identifier
-  it('should handle special characters in organization identifier', () => {
-    const specialCharStore = {
-      state: {
-        selectedOrganization: {
-          identifier: 'gcp-org-with-special-chars_123',
-          name: 'Special GCP Org'
-        }
-      }
-    };
-    
-    const setup = createComponentSetup(specialCharStore);
-    
-    expect(setup.content).toContain('/gcp/gcp-org-with-special-chars_123/default/_sub');
-  });
-
-  // Test 36: Endpoint object has all required properties
-  it('should have endpoint object with all required properties', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.endpoint.value).toHaveProperty('url');
-    expect(setup.endpoint.value).toHaveProperty('host');
-    expect(setup.endpoint.value).toHaveProperty('port');
-    expect(setup.endpoint.value).toHaveProperty('protocol');
-    expect(setup.endpoint.value).toHaveProperty('tls');
-  });
-
-  // Test 37: Content starts with URL prefix
-  it('should have content starting with URL prefix', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.content).toMatch(/^URL:\s/);
-  });
-
-  // Test 38: Component handles props with undefined values
-  it('should handle props with undefined values', () => {
-    const undefinedProps = {
-      currOrgIdentifier: undefined,
-      currUserEmail: undefined
-    };
-    
-    const setup = createComponentSetup(mockStore, undefinedProps);
-    
-    expect(setup.props.currOrgIdentifier).toBeUndefined();
-    expect(setup.props.currUserEmail).toBeUndefined();
-  });
-
-  // Test 39: Component handles props with empty string values
-  it('should handle props with empty string values', () => {
-    const emptyProps = {
-      currOrgIdentifier: '',
-      currUserEmail: ''
-    };
-    
-    const setup = createComponentSetup(mockStore, emptyProps);
-    
-    expect(setup.props.currOrgIdentifier).toBe('');
-    expect(setup.props.currUserEmail).toBe('');
-  });
-
-  // Test 40: t function is properly exposed for i18n
-  it('should properly expose t function for i18n', () => {
-    const setup = createComponentSetup();
-    
-    expect(setup.t).toBe(mockT);
-    setup.t('test.key');
-    expect(mockT).toHaveBeenCalledWith('test.key');
-  });
-});
\ No newline at end of file
+});
diff --git a/web/src/components/ingestion/recommended/GCPConfig.vue b/web/src/components/ingestion/recommended/GCPConfig.vue
index 145a528dfd..8262e78d5f 100644
--- a/web/src/components/ingestion/recommended/GCPConfig.vue
+++ b/web/src/components/ingestion/recommended/GCPConfig.vue
@@ -14,81 +14,19 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
+<!--
+  Google Cloud setup page. Content lives in setupCard/content/gcp.ts and renders
+  through the shared DataSourceSetupCard.
+-->
 <template>
-  <div class="m-3 mt-1">
-    <CopyContent :content="content" />
-    <div class="text-[16px]">
-      <div class="font-bold pt-6 pb-2">
-        Check further documentation at:
-      </div>
-      <ol class="list-decimal pl-3">
-        <li class="py-1">
-          <a
-            href="https://openobserve.ai/blog/send-gcp-logs-to-openobserve"
-            class="underline"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-          {{ t("ingestion.pubsub") }}
-          </a>
-        </li>
-        <li class="py-1">
-          <a
-            href="https://short.openobserve.ai/security/google-workspace"
-            class="underline"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-          {{ t("ingestion.gworkspace") }}
-          </a>
-        </li>
-      </ol>
-    </div>
-  </div>
+  <DataSourceSetupCard slug="gcp" />
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import config from "../../../aws-exports";
-import { useStore } from "vuex";
-import { getEndPoint, getImageURL, getIngestionURL } from "../../../utils/zincutils";
-import CopyContent from "@/components/CopyContent.vue";
-import { useI18n } from "vue-i18n";
+<script setup lang="ts">
+import DataSourceSetupCard from "@/components/ingestion/setupCard/DataSourceSetupCard.vue";
 
-export default defineComponent({
-  name: "GCPConfig",
-  props: {
-    currOrgIdentifier: {
-      type: String,
-    },
-    currUserEmail: {
-      type: String,
-    },
-  },
-  components: { CopyContent },
-  setup(props) {
-    const { t } = useI18n();
-    const store = useStore();
-    const endpoint: any = ref({
-      url: "",
-      host: "",
-      port: "",
-      protocol: "",
-      tls: "",
-    });
-    
-    const ingestionURL = getIngestionURL();
-    endpoint.value = getEndPoint(ingestionURL);
-
-    const content = `URL: ${endpoint.value.url}/gcp/${store.state.selectedOrganization.identifier}/default/_sub?API-Key=[BASIC_PASSCODE]`;
-    return {
-      t,
-      store,
-      config,
-      endpoint,
-      content,
-      getImageURL,
-    };
-  },
-});
+defineProps<{
+  currOrgIdentifier?: string;
+  currUserEmail?: string;
+}>();
 </script>
diff --git a/web/src/components/ingestion/recommended/KubernetesConfig.spec.ts b/web/src/components/ingestion/recommended/KubernetesConfig.spec.ts
index 0007819753..d814cdbef3 100644
--- a/web/src/components/ingestion/recommended/KubernetesConfig.spec.ts
+++ b/web/src/components/ingestion/recommended/KubernetesConfig.spec.ts
@@ -1,294 +1,272 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createI18n } from 'vue-i18n';
-import { createRouter, createWebHistory } from 'vue-router';
-import { nextTick } from 'vue';
-import KubernetesConfig from './KubernetesConfig.vue';
-import CopyContent from '@/components/CopyContent.vue';
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-vi.mock('../../../aws-exports', () => ({
-  default: { API_ENDPOINT: 'http://localhost:5080', region: 'us-east-1', isCloud: 'false' },
+// Mirrors the Databases leaf specs (see databases/Postgres.spec.ts): the card
+// content is asserted on the pure builder, and the component test only proves
+// the slug resolves through the shared renderer.
+
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import { createStore } from "vuex";
+import { createI18n } from "vue-i18n";
+import { ref } from "vue";
+import KubernetesConfig from "./KubernetesConfig.vue";
+import { getDataSourceCard } from "@/components/ingestion/setupCard/registry";
+
+// `isCloud` gates the in-cluster variants, so it must be mutable per-test.
+const mockConfig = { isCloud: "false" };
+vi.mock("@/aws-exports", () => ({
+  get default() {
+    return mockConfig;
+  },
 }));
 
-vi.mock('../../../utils/zincutils', () => ({
-  getImageURL: vi.fn((path) => `mock-image-url-${path}`),
-  getEndPoint: vi.fn(() => ({
-    url: 'http://localhost:5080',
-    host: 'localhost',
-    port: '5080',
-    protocol: 'http',
-    tls: false,
-  })),
-  getIngestionURL: vi.fn(() => 'http://localhost:5080'),
-  b64EncodeStandard: vi.fn((str) => btoa(str)),
+const mockEndpoint = ref({
+  url: "https://test.openobserve.ai",
+  host: "test.openobserve.ai",
+  port: 443,
+  protocol: "https",
+  tls: true,
+});
+
+vi.mock("@/composables/useIngestion", () => ({
+  default: vi.fn(() => ({ endpoint: mockEndpoint })),
 }));
 
-vi.mock('@/components/CopyContent.vue', () => ({
+vi.mock("@/components/ingestion/setupCard/SetupCardRenderer.vue", () => ({
   default: {
-    name: 'CopyContent',
-    template: '<div data-test="copy-content">{{ content }}</div>',
-    props: ['content'],
+    name: "SetupCardRenderer",
+    props: ["content", "subs", "logoUrl", "logoUrlDark"],
+    template: '<div data-test="rich-card-stub" />',
   },
 }));
 
 const mockStore = createStore({
   state: {
-    selectedOrganization: { identifier: 'test-org', name: 'Test Organization' },
-    userInfo: { email: 'test@example.com' },
-    organizationData: { organizationPasscode: 'test-passcode' },
-    theme: 'light',
+    selectedOrganization: { identifier: "test-org", name: "Test Organization" },
+    userInfo: { email: "test@example.com" },
+    organizationData: { organizationPasscode: "test-passcode" },
+    theme: "light",
   },
 });
 
-const mockI18n = createI18n({
-  locale: 'en',
-  messages: {
-    en: {
-      ingestion: {
-        external: 'External Endpoint',
-        internal: 'Internal Endpoint',
-        internalLabel: 'Use this if OpenObserve is in the same cluster',
-      },
-    },
-  },
-});
+const mockI18n = createI18n({ locale: "en", messages: { en: {} } });
 
-const mockRouter = createRouter({
-  history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div>Home</div>' } }],
-});
+const SUBS = {
+  url: "https://test.openobserve.ai",
+  org: "test-org",
+  token: "dGVzdEB0b2tlbg==",
+};
 
+// Imported lazily inside tests so the mocked aws-exports value is picked up.
+const buildCard = async () =>
+  (await import("@/components/ingestion/setupCard/content/kubernetes")).default(
+    SUBS,
+  );
 
-describe('KubernetesConfig.vue', () => {
-  let wrapper: VueWrapper;
-
+describe("kubernetesCard builder", () => {
   beforeEach(() => {
-    vi.clearAllMocks();
+    mockConfig.isCloud = "false";
   });
 
+  it("builds the Kubernetes card metadata and step flow", async () => {
+    const card = await buildCard();
+    expect(card.provider.name).toBe("Kubernetes");
+    expect(card.provider.metaBadges).toEqual([
+      "Logs",
+      "Metrics",
+      "Events",
+      "Traces",
+    ]);
+    expect(card.steps.map((s) => s.id)).toEqual([
+      "install",
+      "instrument",
+      "verify",
+    ]);
+    expect(card.detect).toMatchObject({
+      streamType: "logs",
+      streamName: "default",
+    });
+  });
+
+  it("takes the cluster name as a live input feeding the install command", async () => {
+    const install = (await buildCard()).steps.find((s) => s.id === "install")!;
+    expect(install.required).toBe(true);
+    expect(install.inputs?.map((i) => i.id)).toEqual(["cluster"]);
+    expect(install.inputs![0].default).toBe("cluster1");
+    // The {cluster} placeholder must survive build-time substitution so the
+    // renderer can fill it as the user types.
+    for (const v of install.variants!) {
+      expect(v.code.raw).toContain("{cluster}");
+    }
+  });
+
+  it("substitutes the org and token, and masks the token", async () => {
+    const install = (await buildCard()).steps.find((s) => s.id === "install")!;
+    const external = install.variants!.find((v) => v.id === "external")!;
+    expect(external.code.raw).toContain(`--org-id=${SUBS.org}`);
+    expect(external.code.raw).toContain(`--access-key=${SUBS.token}`);
+    expect(external.code.raw).toContain(`--o2-url=${SUBS.url}`);
+    expect(external.code.masked).not.toContain(SUBS.token);
+  });
+
+  it("marks the quick install as the recommended path", async () => {
+    const install = (await buildCard()).steps[0];
+    expect(install.title).toBe("Quick Install (Recommended)");
+    expect(install.required).toBe(true);
+  });
+
+  it("points from the install step to the advanced section", async () => {
+    // The accordion sits below the verify step, so without this pointer a user
+    // who wants Helm has to scroll past two steps that don't apply to them.
+    const card = await buildCard();
+    const install = card.steps[0];
+    const label = card.extras!.advanced!.label;
+    for (const v of install.variants!) {
+      // A jump link, not prose — it opens the accordion and scrolls to it.
+      expect(v.note).toContain(`[${label}](#advanced)`);
+    }
+    expect(label).toBe("Advanced Installation (Manual Steps)");
+  });
+
+  it("keeps the quick install to the two endpoint choices", async () => {
+    // The one-line installer is the recommended path — Helm must NOT dilute
+    // this toggle (it lives in the collapsed advanced section instead).
+    const install = (await buildCard()).steps[0];
+    expect(install.variants?.map((v) => v.id)).toEqual(["external", "internal"]);
+    for (const v of install.variants!) {
+      expect(v.code.raw).toContain("install.sh");
+      expect(v.code.raw).not.toContain("helm");
+    }
+  });
+
+  it("drops the endpoint toggle entirely on cloud", async () => {
+    // Cloud has no in-cluster router, so there is nothing to choose between.
+    mockConfig.isCloud = "true";
+    vi.resetModules();
+    const install = (await buildCard()).steps[0];
+    expect(install.variants).toBeUndefined();
+    expect(install.code?.raw).toContain("--o2-url=");
+    // With no variants to carry it, the installer note (and the jump link to
+    // the advanced section) moves onto the step itself.
+    expect(install.note).toContain(
+      "[Advanced Installation (Manual Steps)](#advanced)",
+    );
+  });
+
+  it("points the internal variant at the cluster-local router", async () => {
+    const internal = (await buildCard()).steps[0].variants!.find(
+      (v) => v.id === "internal",
+    )!;
+    expect(internal.code.raw).toContain(
+      "--internal-endpoint=http://o2-openobserve-router.openobserve.svc.cluster.local:5080",
+    );
+    expect(internal.code.raw).not.toContain("--o2-url");
+  });
+
+  it("keeps the manual helm sequence as one collapsed advanced block", async () => {
+    const advanced = (await buildCard()).extras!.advanced!;
+    expect(advanced.label).toContain("Advanced Installation");
+    const code = advanced.code.raw;
+    // Previously six separate copy boxes plus a "wait 2 minutes" instruction.
+    expect(code).toContain("cert-manager.yaml");
+    expect(code).toContain("kubectl wait --for=condition=Available");
+    expect(code).toContain("prometheus-operator");
+    expect(code).toContain("opentelemetry-operator.yaml");
+    expect(code).toContain("helm repo add openobserve");
+    expect(code).toContain("upgrade --install o2c");
+    expect(code).toContain(`endpoint=${SUBS.url}/api/${SUBS.org}`);
+    // Shares the step's live {cluster} input and masks the token.
+    expect(code).toContain("{cluster}");
+    expect(advanced.code.masked).not.toContain(SUBS.token);
+  });
+
+  it("exposes auto-instrumentation as an optional per-language step", async () => {
+    const step = (await buildCard()).steps.find((s) => s.id === "instrument")!;
+    // Not required — the chip renders "Optional" off the absent `required`.
+    expect(step.required).toBeUndefined();
+    expect(step.variants?.map((v) => v.id)).toEqual([
+      "java",
+      "dotnet",
+      "nodejs",
+      "python",
+      "go",
+    ]);
+    expect(step.variants!.every((v) => !!v.icon)).toBe(true);
+
+    const java = step.variants!.find((v) => v.id === "java")!;
+    expect(java.code.raw).toContain(
+      'instrumentation.opentelemetry.io/inject-java="openobserve-collector/openobserve-java"',
+    );
+    // Injection only happens at pod creation, so a restart is part of the step.
+    expect(java.code.raw).toContain("kubectl rollout restart");
+
+    // Go's eBPF instrumentation additionally needs the in-container binary path.
+    const go = step.variants!.find((v) => v.id === "go")!;
+    expect(go.code.raw).toContain(
+      "instrumentation.opentelemetry.io/otel-go-auto-target-exe",
+    );
+  });
+
+  it("anchors detection on the verify step with a valid SQL filter", async () => {
+    const card = await buildCard();
+    const verify = card.steps.find((s) => s.id === "verify")!;
+    expect(verify.completeOn).toBe("detect");
+    expect(verify.detectionAnchor).toBe(true);
+    // useStreamDetect interpolates this into `WHERE (<filter>)`, so an empty
+    // filter would produce invalid SQL and never connect.
+    expect(card.detect.filter.trim()).not.toBe("");
+  });
+
+  it("keeps the example and operator references as real anchors", async () => {
+    // Both were <a> tags on the pre-migration page; they must not degrade into
+    // unclickable text inside the troubleshooting accordion.
+    const card = await buildCard();
+    const urls = (card.docLinks ?? []).map((l) => l.url);
+    expect(urls).toContain("https://github.com/openobserve/hotcommerce");
+    expect(urls).toContain(
+      "https://github.com/open-telemetry/opentelemetry-operator",
+    );
+  });
+
+  it("carries troubleshooting guidance without markdown link syntax", async () => {
+    const ts = (await buildCard()).extras!.troubleshooting!;
+    expect(ts.length).toBeGreaterThan(0);
+    // inlineMd only renders **bold** and `code`; links would show as raw text.
+    for (const row of ts) {
+      expect(row.a).not.toMatch(/\[[^\]]+\]\([^)]+\)/);
+    }
+  });
+});
+
+describe("KubernetesConfig.vue", () => {
+  let wrapper: VueWrapper<any>;
+
   afterEach(() => {
     if (wrapper) wrapper.unmount();
   });
 
-  const createWrapper = (props = {}) => {
-    const defaultProps = { currOrgIdentifier: 'test-org', currUserEmail: 'test@example.com' };
-    return mount(KubernetesConfig, {
-      props: { ...defaultProps, ...props },
-      global: {
-        plugins: [mockI18n, mockRouter],
-        provide: { store: mockStore },
-        components: { CopyContent },
-      },
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('should mount without errors', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should unmount without errors', () => {
-      wrapper = createWrapper();
-      expect(() => wrapper.unmount()).not.toThrow();
-    });
-
-    it('should render Quick Install section', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('Quick Install');
-    });
-
-    it('should render Cluster Name input', () => {
-      wrapper = createWrapper();
-      const input = wrapper.find('[data-test="kubernetes-cluster-name-input"]');
-      expect(input.exists()).toBe(true);
-    });
-
-    it('should render advanced install expansion toggle', () => {
-      wrapper = createWrapper();
-      const toggle = wrapper.find('[data-test="kubernetes-advanced-install-toggle"]');
-      expect(toggle.exists()).toBe(true);
-    });
-
-    it('should render CopyContent components', () => {
-      wrapper = createWrapper();
-      const copyContents = wrapper.findAllComponents(CopyContent);
-      expect(copyContents.length).toBeGreaterThan(0);
-    });
-
-    it('should render kubernetes collector info', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('Kubernetes cluster');
-    });
-  });
-
-  describe('Props Validation', () => {
-    it('should accept currOrgIdentifier prop', () => {
-      wrapper = createWrapper({ currOrgIdentifier: 'my-org' });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should accept currUserEmail prop', () => {
-      wrapper = createWrapper({ currUserEmail: 'user@test.com' });
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('Reactive Data', () => {
-    it('should have clusterName with default value cluster1', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.clusterName).toBe('cluster1');
-    });
-
-    it('should have installType with default value external', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.installType).toBe('external');
-    });
-
-    it('should have showAdvancedInstall default false', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.showAdvancedInstall).toBe(false);
-    });
-
-    it('should update clusterName reactively', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.clusterName = 'my-cluster';
-      await nextTick();
-      expect(vm.clusterName).toBe('my-cluster');
-    });
-  });
-
-  describe('quickInstallCmd Computed', () => {
-    it('should generate quickInstallCmd string', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.quickInstallCmd).toBe('string');
-    });
-
-    it('should include curl in quickInstallCmd', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.quickInstallCmd).toContain('curl');
-    });
-
-    it('should include install.sh in quickInstallCmd', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.quickInstallCmd).toContain('install.sh');
-    });
-
-    it('should include cluster name in quickInstallCmd', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.quickInstallCmd).toContain('cluster1');
-    });
-
-    it('should include org identifier in quickInstallCmd', () => {
-      wrapper = createWrapper({ currOrgIdentifier: 'my-org' });
-      const vm = wrapper.vm as any;
-      expect(vm.quickInstallCmd).toContain('my-org');
-    });
-
-    it('should include endpoint URL in quickInstallCmd', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.quickInstallCmd).toContain('http://localhost:5080');
-    });
-
-    it('should include internal-endpoint for internal installType', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.installType = 'internal';
-      await nextTick();
-      expect(vm.quickInstallCmd).toContain('--internal-endpoint');
-    });
-
-    it('should not include internal-endpoint for external installType', async () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      vm.installType = 'external';
-      await nextTick();
-      expect(vm.quickInstallCmd).not.toContain('--internal-endpoint');
-    });
-  });
-
-  describe('helmUpdateCmd Computed', () => {
-    it('should generate helmUpdateCmd string', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.helmUpdateCmd).toBe('string');
-    });
-
-    it('should include helm repo add command', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.helmUpdateCmd).toContain('helm repo add openobserve');
-    });
-
-    it('should include helm repo update command', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.helmUpdateCmd).toContain('helm repo update');
-    });
-  });
-
-  describe('crdCommand Computed', () => {
-    it('should generate crdCommand string', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.crdCommand).toBe('string');
-    });
-
-    it('should include kubectl create commands', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.crdCommand).toContain('kubectl create');
-    });
-
-    it('should include prometheus-operator CRDs', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.crdCommand).toContain('prometheus-operator');
-    });
-  });
-
-  describe('collectorCmd Computed', () => {
-    it('should generate collectorCmd string', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.collectorCmd).toBe('string');
-    });
-
-    it('should include helm upgrade command', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.collectorCmd).toContain('helm');
-      expect(vm.collectorCmd).toContain('upgrade --install');
-    });
-
-    it('should include org identifier in collectorCmd', () => {
-      wrapper = createWrapper({ currOrgIdentifier: 'test-org' });
-      const vm = wrapper.vm as any;
-      expect(vm.collectorCmd).toContain('test-org');
-    });
-  });
-
-  describe('Utilities', () => {
-    it('should call getEndPoint on setup', async () => {
-      const zincutils = await import('../../../utils/zincutils');
-      wrapper = createWrapper();
-      expect(zincutils.getEndPoint).toHaveBeenCalled();
-    });
-
-    it('should call getIngestionURL on setup', async () => {
-      const zincutils = await import('../../../utils/zincutils');
-      wrapper = createWrapper();
-      expect(zincutils.getIngestionURL).toHaveBeenCalled();
+  it("renders the shared setup card for the kubernetes slug", () => {
+    expect(getDataSourceCard("kubernetes", SUBS)?.provider.name).toBe(
+      "Kubernetes",
+    );
+    wrapper = mount(KubernetesConfig, {
+      global: { plugins: [mockStore, mockI18n] },
     });
+    const stub = wrapper.findComponent({ name: "SetupCardRenderer" });
+    expect(stub.exists()).toBe(true);
+    expect((stub.props("content") as any).provider.name).toBe("Kubernetes");
   });
 });
diff --git a/web/src/components/ingestion/recommended/KubernetesConfig.vue b/web/src/components/ingestion/recommended/KubernetesConfig.vue
index b8aea60690..5ad1f457ef 100644
--- a/web/src/components/ingestion/recommended/KubernetesConfig.vue
+++ b/web/src/components/ingestion/recommended/KubernetesConfig.vue
@@ -1,328 +1,33 @@
-<!-- eslint-disable no-useless-escape -->
+<!-- Copyright 2026 OpenObserve Inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<!--
+  Kubernetes setup page. Content (steps, install variants, auto-instrumentation,
+  troubleshooting) lives in setupCard/content/kubernetes.ts and renders through
+  the shared DataSourceSetupCard — the same card every Databases page uses.
+-->
 <template>
-  <div class="p-1 kubernetes-config-section pb-lg">
-    <!-- Quick Install Section -->
-    <div class="mb-6 p-4 rounded-lg" :class="quickInstallBgClass">
-      <div class="flex items-start gap-3">
-        <OIcon name="rocket-launch" size="xl" class="text-[var(--q-primary)]" />
-        <div class="flex-1">
-          <h6 class="text-xl! font-bold m-0 mb-2!">Quick Install (Recommended)</h6>
-          <p class="text-sm mt-0 mb-6!" :class="descriptionClass">
-            Install OpenObserve collector with a single command. Just set your cluster name and run.
-          </p>
-
-          <div class="mb-3">
-              <OInput
-              v-model="clusterName"
-              label="Cluster Name"
-              placeholder="e.g., production, staging, dev"
-              class="max-w-md"
-              data-test="kubernetes-cluster-name-input"
-            >
-              <template #icon-left>
-                <OIcon name="dns" size="sm" />
-              </template>
-            </OInput>
-          </div>
-
-          <div v-if="config.isCloud != 'true'" class="mb-3">
-            <OTabs v-model="installType" dense>
-              <OTab name="external" label="External Endpoint" />
-              <OTab name="internal" label="Internal Endpoint">
-                <OTooltip content="Use this if OpenObserve is in the same cluster" side="top" />
-              </OTab>
-            </OTabs>
-          </div>
-
-          <ContentCopy class="mt-3" :content="quickInstallCmd" :key="`${clusterName}-${installType}`" />
-
-          <div class="mt-2 text-xs" :class="hintClass">
-            <OIcon name="info" size="sm" class="mr-1" />
-            This installs cert-manager, OpenTelemetry operator, and OpenObserve collector automatically
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <OSeparator class="mb-6" />
-
-    <!-- Advanced/Manual Install Section -->
-    <OCollapsible
-      v-model="showAdvancedInstall"
-      label="Advanced Installation (Manual Steps)"
-      caption="For custom configurations or step-by-step installation"
-      data-test="kubernetes-advanced-install-toggle"
-    >
-      <div class="mt-4">
-        <div class="text-base font-medium pl-1 mt-3">Install cert-manager</div>
-        <ContentCopy
-          class="mt-2"
-          content="kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.19.0/cert-manager.yaml"
-        />
-
-        <div class="text-base font-medium pl-1 mt-3">
-          Wait for 2 minutes after installing cert-manger for the webhook to be
-          ready.
-        </div>
-
-        <div class="text-base font-medium pl-1 mt-3">Update helm repo</div>
-        <ContentCopy class="mt-2" :content="helmUpdateCmd" />
-
-        <div class="text-base font-medium pl-1 mt-3">
-          Install Prometheus operator CRDs(Required by Opentelemetry operator)
-        </div>
-        <ContentCopy class="mt-2" :content="crdCommand" />
-
-        <div class="text-base font-medium pl-1 q:mt-md">
-          Install OpenTelemetry operator
-        </div>
-        <ContentCopy
-          class="mt-2"
-          content="kubectl apply -f https://raw.githubusercontent.com/openobserve/openobserve-helm-chart/refs/heads/main/opentelemetry-operator.yaml"
-        />
-
-        <div class="text-base font-medium pl-1 mt-3">Create namespace</div>
-        <ContentCopy
-          class="mt-2"
-          content="kubectl create ns openobserve-collector"
-        />
-
-        <div class="text-base font-medium pl-1 mt-3">
-          Install OpenObserve collector
-        </div>
-        <div v-if="config.isCloud == 'true'">
-          <ContentCopy class="mt-2" :content="collectorCmd" />
-        </div>
-        <div v-else>
-          <OTabs v-model="tab" horizontalalign="left">
-            <OTab
-              data-test="kubernetes-default-tab"
-              name="external"
-              :label="t('ingestion.external')"
-            />
-            <OTab
-              data-test="kubernetes-this-tab"
-              name="internal"
-              :label="t('ingestion.internal')"
-            >
-              <OTooltip :content="t('ingestion.internalLabel')" side="top" />
-            </OTab>
-          </OTabs>
-          <OSeparator />
-          <OTabPanels
-            v-model="tab"
-            animated
-            swipeable
-            vertical
-            transition-prev="jump-up"
-            transition-next="jump-up"
-          >
-            <OTabPanel name="internal" data-test="kubernetes-tab-panels-this">
-              <ContentCopy class="mt-2" :content="collectorCmdThisCluster" />
-              <pre>
-Format of the URL is: http://&lt;helm-release-name&gt;-openobserve-router.&lt;namespace&gt;.svc.cluster.local
-Make changes accordingly to the above URL.
-              </pre>
-            </OTabPanel>
-
-            <OTabPanel name="external" data-test="kubernetes-tab-panels-default">
-              <ContentCopy class="mt-2" :content="collectorCmd" />
-            </OTabPanel>
-          </OTabPanels>
-        </div>
-      </div>
-    </OCollapsible>
-
-    <br />
-    <hr />
-    <div class="text-base font-medium pl-1 mt-3 mb-4">
-      Once you have installed the OpenObserve collector, it will:
-      <ul class="list-disc ml-5">
-        <li>Collect metrics from your Kubernetes cluster</li>
-        <li>Collect events from your Kubernetes cluster</li>
-        <li>Collect logs from your Kubernetes cluster</li>
-        <li>
-          Allow you to capture traces without instrumenting your applications
-          that are written in following languages using OpenTelemetry
-          auto-instrumentation. It can be done by setting the following to the
-          pod/namespace annotations:
-          <ul class="list-disc ml-5">
-            <li>
-              <b>Java:</b> instrumentation.opentelemetry.io/inject-java:
-              "openobserve-collector/openobserve-java"
-            </li>
-            <li>
-              <b>DotNet:</b> instrumentation.opentelemetry.io/inject-dotnet:
-              "openobserve-collector/openobserve-dotnet"
-            </li>
-            <li>
-              <b>NodeJS:</b> instrumentation.opentelemetry.io/inject-nodejs:
-              "openobserve-collector/openobserve-nodejs"
-            </li>
-            <li>
-              <b>Python:</b> instrumentation.opentelemetry.io/inject-python:
-              "openobserve-collector/openobserve-python"
-            </li>
-            <li>
-              <b>Go (Uses eBPF):</b>
-              <ul class="list-disc ml-5">
-                <li>
-                  instrumentation.opentelemetry.io/inject-go:
-                  "openobserve-collector/openobserve-go"
-                </li>
-                <li>
-                  instrumentation.opentelemetry.io/otel-go-auto-target-exe:
-                  "/path/to/container/executable"
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-      </ul>
-      You can refer and install
-      <a
-        href="https://github.com/openobserve/hotcommerce"
-        class="hover:underline text-primary"
-        >HOT commerce</a
-      >
-      app as an example to understand how this works in practice. Refer to
-      <a
-        href="https://github.com/open-telemetry/opentelemetry-operator"
-        class="hover:underline text-primary"
-        >OpenTelemetry operator</a
-      >
-      for further documentation.
-    </div>
-  </div>
+  <DataSourceSetupCard slug="kubernetes" />
 </template>
 
 <script setup lang="ts">
-import OTabs from '@/lib/navigation/Tabs/OTabs.vue'
-import OTab from '@/lib/navigation/Tabs/OTab.vue'
-import OTabPanels from '@/lib/navigation/Tabs/OTabPanels.vue'
-import OTabPanel from '@/lib/navigation/Tabs/OTabPanel.vue'
-import OInput from '@/lib/forms/Input/OInput.vue'
-import OTooltip from '@/lib/overlay/Tooltip/OTooltip.vue'
-import { computed, ref, type Ref } from "vue";
-import type { Endpoint } from "@/ts/interfaces";
-import ContentCopy from "@/components/CopyContent.vue";
-import { useStore } from "vuex";
-import { b64EncodeStandard, getEndPoint, getIngestionURL } from "../../../utils/zincutils";
-import config from "@/aws-exports";
-import { useI18n } from "vue-i18n";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OSeparator from '@/lib/core/Separator/OSeparator.vue';
-import OCollapsible from "@/lib/core/Collapsible/OCollapsible.vue";
+import DataSourceSetupCard from "@/components/ingestion/setupCard/DataSourceSetupCard.vue";
 
-const store = useStore();
-
-const props = defineProps({
-  currOrgIdentifier: {
-    type: String,
-  },
-  currUserEmail: {
-    type: String,
-  },
-});
-
-const endpoint: any = ref({
-  url: "",
-  host: "",
-  port: "",
-  protocol: "",
-  tls: "",
-});
-
-const ingestionURL = getIngestionURL();
-const tab = ref("external");
-const installType = ref("external");
-const clusterName = ref("cluster1");
-const showAdvancedInstall = ref(false);
-const { t } = useI18n();
-
-endpoint.value = getEndPoint(ingestionURL);
-
-const accessKey = computed(() => {
-  return b64EncodeStandard(
-    `${props.currUserEmail}:${store.state.organizationData.organizationPasscode}`,
-  );
-});
-
-// Computed class for styling based on theme
-const quickInstallBgClass = computed(() => {
-  return store.state.theme === 'dark'
-    ? 'bg-gray-800 border border-gray-700'
-    : 'bg-blue-50 border border-blue-200';
-});
-
-const descriptionClass = computed(() => {
-  return store.state.theme === 'dark' ? 'text-gray-300' : 'text-gray-700';
-});
-
-const hintClass = computed(() => {
-  return store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-600';
-});
-
-// Quick install command
-const quickInstallCmd = computed(() => {
-  const baseCmd = 'curl -sSL https://raw.githubusercontent.com/openobserve/o2-datasource/main/k8s/install.sh | bash -s --';
-
-  if (config.isCloud === 'true') {
-    // Cloud version - external endpoint only
-    return `${baseCmd} \\
-  --cluster-name=${clusterName.value} \\
-  --o2-url=${endpoint.value.url} \\
-  --org-id=${props.currOrgIdentifier} \\
-  --access-key=${accessKey.value}`;
-  } else {
-    // Self-hosted version - support both internal and external
-    if (installType.value === 'internal') {
-      return `${baseCmd} \\
-  --cluster-name=${clusterName.value} \\
-  --org-id=${props.currOrgIdentifier} \\
-  --access-key=${accessKey.value} \\
-  --internal-endpoint=http://o2-openobserve-router.openobserve.svc.cluster.local:5080`;
-    } else {
-      return `${baseCmd} \\
-  --cluster-name=${clusterName.value} \\
-  --o2-url=${endpoint.value.url} \\
-  --org-id=${props.currOrgIdentifier} \\
-  --access-key=${accessKey.value}`;
-    }
-  }
-});
-
-const collectorCmd = computed(() => {
-  return `helm --namespace openobserve-collector \\
-  upgrade --install o2c openobserve/openobserve-collector \\
-  --set k8sCluster=${clusterName.value}  \\
-  --set exporters.'otlphttp/openobserve'.endpoint=${endpoint.value.url}/api/${props.currOrgIdentifier}  \\
-  --set exporters.'otlphttp/openobserve'.headers.Authorization='Basic ${accessKey.value}'  \\
-  --set exporters.'otlphttp/openobserve_k8s_events'.endpoint=${endpoint.value.url}/api/${props.currOrgIdentifier}  \\
-  --set exporters.'otlphttp/openobserve_k8s_events'.headers.Authorization='Basic ${accessKey.value}'`;
-});
-
-const collectorCmdThisCluster = computed(() => {
-  return `helm --namespace openobserve-collector \\
-  upgrade --install o2c openobserve/openobserve-collector \\
-  --set k8sCluster=${clusterName.value}  \\
-  --set exporters.'otlphttp/openobserve'.endpoint=http://o2-openobserve-router.openobserve.svc.cluster.local:5080/api/${props.currOrgIdentifier}  \\
-  --set exporters.'otlphttp/openobserve'.headers.Authorization='Basic ${accessKey.value}'  \\
-  --set exporters.'otlphttp/openobserve_k8s_events'.endpoint=http://o2-openobserve-router.openobserve.svc.cluster.local:5080/api/${props.currOrgIdentifier}  \\
-  --set exporters.'otlphttp/openobserve_k8s_events'.headers.Authorization='Basic ${accessKey.value}'`;
-});
-
-const crdCommand = computed(() => {
-  // Club kubectl create crd commands from template
-  return `kubectl create -f https://raw.githubusercontent.com/prometheus-operator/prometheus-operator/main/example/prometheus-operator-crd/monitoring.coreos.com_servicemonitors.yaml
-kubectl create -f https://raw.githubusercontent.com/prometheus-operator/prometheus-operator/main/example/prometheus-operator-crd/monitoring.coreos.com_podmonitors.yaml
-kubectl create -f https://raw.githubusercontent.com/prometheus-operator/prometheus-operator/refs/heads/main/example/prometheus-operator-crd/monitoring.coreos.com_scrapeconfigs.yaml
-kubectl create -f https://raw.githubusercontent.com/prometheus-operator/prometheus-operator/refs/heads/main/example/prometheus-operator-crd/monitoring.coreos.com_probes.yaml`;
-});
-
-const helmUpdateCmd = computed(() => {
-  return `helm repo add openobserve https://charts.openobserve.ai
-helm repo update`;
-});
+defineProps<{
+  currOrgIdentifier?: string;
+  currUserEmail?: string;
+}>();
 </script>
-
diff --git a/web/src/components/ingestion/recommended/LinuxConfig.spec.ts b/web/src/components/ingestion/recommended/LinuxConfig.spec.ts
index 4af3ced778..baf85cc7a1 100644
--- a/web/src/components/ingestion/recommended/LinuxConfig.spec.ts
+++ b/web/src/components/ingestion/recommended/LinuxConfig.spec.ts
@@ -1,174 +1,123 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createI18n } from 'vue-i18n';
-import { createRouter, createWebHistory } from 'vue-router';
-import LinuxConfig from './LinuxConfig.vue';
-import CopyContent from '@/components/CopyContent.vue';
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-vi.mock('../../../aws-exports', () => ({
-  default: { API_ENDPOINT: 'http://localhost:5080', region: 'us-east-1' },
+// Mirrors the Databases leaf specs: content asserted on the pure builder, the
+// component test only proves the slug resolves through the shared renderer.
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import { createStore } from "vuex";
+import { createI18n } from "vue-i18n";
+import { ref } from "vue";
+import LinuxConfig from "./LinuxConfig.vue";
+import linuxCard from "@/components/ingestion/setupCard/content/linux";
+import { getDataSourceCard } from "@/components/ingestion/setupCard/registry";
+
+const mockEndpoint = ref({
+  url: "https://test.openobserve.ai",
+  host: "test.openobserve.ai",
+  port: 443,
+  protocol: "https",
+  tls: true,
+});
+
+vi.mock("@/composables/useIngestion", () => ({
+  default: vi.fn(() => ({ endpoint: mockEndpoint })),
 }));
 
-vi.mock('../../../utils/zincutils', () => ({
-  getImageURL: vi.fn((path) => `mock-image-url-${path}`),
-  getEndPoint: vi.fn(() => ({ url: 'http://localhost:5080', host: 'localhost', port: '5080', protocol: 'http', tls: false })),
-  getIngestionURL: vi.fn(() => 'http://localhost:5080'),
-  b64EncodeStandard: vi.fn((str) => btoa(str)),
-}));
-
-vi.mock('@/components/CopyContent.vue', () => ({
+vi.mock("@/components/ingestion/setupCard/SetupCardRenderer.vue", () => ({
   default: {
-    name: 'CopyContent',
-    template: '<div data-test="copy-content">{{ content }}</div>',
-    props: ['content'],
+    name: "SetupCardRenderer",
+    props: ["content", "subs", "logoUrl", "logoUrlDark"],
+    template: '<div data-test="rich-card-stub" />',
   },
 }));
 
 const mockStore = createStore({
   state: {
-    selectedOrganization: { identifier: 'test-org', name: 'Test Organization' },
-    userInfo: { email: 'test@example.com' },
-    organizationData: { organizationPasscode: 'test-passcode' },
+    selectedOrganization: { identifier: "test-org", name: "Test Organization" },
+    userInfo: { email: "test@example.com" },
+    organizationData: { organizationPasscode: "test-passcode" },
+    theme: "light",
   },
 });
+const mockI18n = createI18n({ locale: "en", messages: { en: {} } });
 
-const mockI18n = createI18n({ locale: 'en', messages: { en: {} } });
-const mockRouter = createRouter({ history: createWebHistory(), routes: [{ path: '/', component: { template: '<div>Home</div>' } }] });
+const SUBS = {
+  url: "https://test.openobserve.ai",
+  org: "test-org",
+  token: "dGVzdEB0b2tlbg==",
+};
 
-
-describe('LinuxConfig.vue', () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
+describe("linuxCard builder", () => {
+  it("builds the Linux card metadata and step flow", () => {
+    const card = linuxCard(SUBS);
+    expect(card.provider.name).toBe("Linux");
+    expect(card.provider.metaBadges).toEqual(["Logs", "Metrics"]);
+    expect(card.steps.map((s) => s.id)).toEqual(["install", "verify"]);
+    // Host metrics fan out per metric, so detection is existence-based.
+    expect(card.detect).toMatchObject({
+      streamType: "metrics",
+      match: "keyword",
+    });
   });
 
+  it("offers generic and EC2 environments as one toggle", () => {
+    // Replaces two hand-built clickable <div> cards plus a conditional callout.
+    const install = linuxCard(SUBS).steps[0];
+    expect(install.required).toBe(true);
+    expect(install.variants?.map((v) => v.id)).toEqual(["generic", "ec2"]);
+    expect(install.variants!.every((v) => !!v.icon)).toBe(true);
+  });
+
+  it("points each variant at its matching install script", () => {
+    const [generic, ec2] = linuxCard(SUBS).steps[0].variants!;
+    expect(generic.code.raw).toContain("/linux/install.sh");
+    expect(generic.code.raw).not.toContain("/ec2/");
+    expect(ec2.code.raw).toContain("/linux/ec2/install.sh");
+  });
+
+  it("carries the IAM prerequisite only on the EC2 variant", () => {
+    // Previously an amber callout rendered above the command for everyone.
+    const [generic, ec2] = linuxCard(SUBS).steps[0].variants!;
+    expect(ec2.note).toContain("ec2:DescribeTags");
+    expect(generic.note).not.toContain("ec2:DescribeTags");
+  });
+
+  it("substitutes url/org and masks the ingestion token", () => {
+    const generic = linuxCard(SUBS).steps[0].variants![0];
+    expect(generic.code.raw).toContain(`${SUBS.url}/api/${SUBS.org}/`);
+    expect(generic.code.raw).toContain(SUBS.token);
+    // The old page rendered a literal [BASIC_PASSCODE] placeholder instead.
+    expect(generic.code.raw).not.toContain("[BASIC_PASSCODE]");
+    expect(generic.code.masked).not.toContain(SUBS.token);
+  });
+});
+
+describe("LinuxConfig.vue", () => {
+  let wrapper: VueWrapper<any>;
+
   afterEach(() => {
     if (wrapper) wrapper.unmount();
   });
 
-  const createWrapper = (props = {}) => {
-    const defaultProps = { currOrgIdentifier: 'test-org', currUserEmail: 'test@example.com' };
-    return mount(LinuxConfig, {
-      props: { ...defaultProps, ...props },
-      global: {
-        plugins: [mockI18n, mockRouter],
-        provide: { store: mockStore },
-        components: { CopyContent },
-      },
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('should mount without errors', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should unmount without errors', () => {
-      wrapper = createWrapper();
-      expect(() => wrapper.unmount()).not.toThrow();
-    });
-
-    it('should render CopyContent component', () => {
-      wrapper = createWrapper();
-      const copyContent = wrapper.findComponent(CopyContent);
-      expect(copyContent.exists()).toBe(true);
-    });
-
-    it('should render installation description', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('Once installed');
-    });
-
-    it('should render system logs collection info', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('Collect system logs');
-    });
-
-    it('should render host metrics collection info', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('Collect host metrics');
-    });
-  });
-
-  describe('Props Validation', () => {
-    it('should accept currOrgIdentifier prop', () => {
-      wrapper = createWrapper({ currOrgIdentifier: 'my-org' });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should accept currUserEmail prop', () => {
-      wrapper = createWrapper({ currUserEmail: 'user@test.com' });
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('activeCommand Computed', () => {
-    it('should generate a command string', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.activeCommand).toBe('string');
-    });
-
-    it('should include install.sh in the command', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.activeCommand).toContain('install.sh');
-    });
-
-    it('should include the endpoint URL in the command', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.activeCommand).toContain('http://localhost:5080');
-    });
-
-    it('should include the org identifier in the command', () => {
-      wrapper = createWrapper({ currOrgIdentifier: 'my-org' });
-      const vm = wrapper.vm as any;
-      expect(vm.activeCommand).toContain('my-org');
-    });
-
-    it('should include BASIC_PASSCODE placeholder', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.activeCommand).toContain('[BASIC_PASSCODE]');
-    });
-
-    it('should include curl command', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.activeCommand).toContain('curl');
-    });
-  });
-
-  describe('CopyContent Integration', () => {
-    it('should pass getCommand to CopyContent', () => {
-      wrapper = createWrapper();
-      const copyContent = wrapper.findComponent(CopyContent);
-      expect(copyContent.props('content')).toBeDefined();
-      expect(typeof copyContent.props('content')).toBe('string');
-    });
-
-    it('should pass command with org identifier to CopyContent', () => {
-      wrapper = createWrapper({ currOrgIdentifier: 'test-org' });
-      const copyContent = wrapper.findComponent(CopyContent);
-      expect(copyContent.props('content')).toContain('test-org');
-    });
-  });
-
-  describe('getImageURL and Utilities', () => {
-    it('should call getEndPoint on setup', async () => {
-      const zincutils = await import('../../../utils/zincutils');
-      wrapper = createWrapper();
-      expect(zincutils.getEndPoint).toHaveBeenCalled();
-    });
-
-    it('should call getIngestionURL on setup', async () => {
-      const zincutils = await import('../../../utils/zincutils');
-      wrapper = createWrapper();
-      expect(zincutils.getIngestionURL).toHaveBeenCalled();
-    });
+  it("renders the shared setup card for the linux slug", () => {
+    expect(getDataSourceCard("linux", SUBS)?.provider.name).toBe("Linux");
+    wrapper = mount(LinuxConfig, { global: { plugins: [mockStore, mockI18n] } });
+    const stub = wrapper.findComponent({ name: "SetupCardRenderer" });
+    expect(stub.exists()).toBe(true);
+    expect((stub.props("content") as any).provider.name).toBe("Linux");
   });
 });
diff --git a/web/src/components/ingestion/recommended/LinuxConfig.vue b/web/src/components/ingestion/recommended/LinuxConfig.vue
index ccf1250c3b..7259b7b9f0 100644
--- a/web/src/components/ingestion/recommended/LinuxConfig.vue
+++ b/web/src/components/ingestion/recommended/LinuxConfig.vue
@@ -1,112 +1,36 @@
-<template>
-  <div class="p-3">
-    <!-- Environment selection cards -->
-    <div class="grid grid-cols-2 gap-3 mb-5">
-      <div
-        v-for="opt in options"
-        :key="opt.value"
-        class="rounded-lg border p-4 cursor-pointer transition-all flex gap-3 items-start"
-        :class="selected === opt.value ? selectedCardClass : unselectedCardClass"
-        @click="selected = opt.value"
-      >
-        <OIcon :name="opt.icon" size="lg" :class="selected === opt.value ? 'text-[var(--q-primary)]' : 'text-gray-400'" />
-        <div>
-          <div class="font-semibold text-sm">{{ opt.label }}</div>
-          <div class="text-xs mt-0.5" :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'">{{ opt.description }}</div>
-        </div>
-      </div>
-    </div>
+<!-- Copyright 2026 OpenObserve Inc.
 
-    <!-- EC2 IAM prerequisite note -->
-    <div
-      v-if="selected === 'ec2'"
-      class="flex gap-2 items-start rounded-lg p-3 mb-4 text-sm"
-      :class="store.state.theme === 'dark' ? 'bg-amber-950/40 border border-amber-800/50' : 'bg-amber-50 border border-amber-200'"
-    >
-      <OIcon name="info" size="sm" class="text-amber-500 shrink-0 mt-0.5" />
-      <div :class="store.state.theme === 'dark' ? 'text-amber-200' : 'text-amber-900'">
-        <span class="font-semibold">IAM role required.</span>
-        Attach an IAM role to your EC2 instance with
-        <code class="font-mono text-xs">ec2:DescribeTags</code> and
-        <code class="font-mono text-xs">ec2:DescribeInstances</code>
-        permissions. This allows the collector to read the instance Name tag and use it as the host identifier.
-      </div>
-    </div>
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
 
-    <!-- Install command -->
-    <ContentCopy :content="activeCommand" :key="selected" />
+This program is distributed in the hope that it will be useful
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
 
-    <OSeparator class="my-4" />
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
 
-    <!-- What it collects -->
-    <div class="text-sm font-medium pl-1">
-      Once installed, the collector will:
-      <ul class="list-disc ml-5 mt-1 font-normal space-y-0.5">
-        <li>Collect system logs and journald logs</li>
-        <li>Collect host metrics (CPU, memory, disk, network)</li>
-        <li v-if="selected === 'ec2'">Detect EC2 instance metadata automatically</li>
-        <li v-if="selected === 'ec2'">Use the EC2 Name tag as the host identifier in dashboards</li>
-      </ul>
-    </div>
-  </div>
+<!--
+  Linux host agent setup page. Content lives in setupCard/content/linux.ts and
+  renders through the shared DataSourceSetupCard, the same card the Databases
+  and Kubernetes pages use.
+
+  Also mounted inside AWSIntegrationTile's EC2 dialog (see awsIntegrations.ts
+  componentOptions), so it must stay self-contained.
+-->
+<template>
+  <DataSourceSetupCard slug="linux" />
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import ContentCopy from "@/components/CopyContent.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OSeparator from "@/lib/core/Separator/OSeparator.vue";
-import { useStore } from "vuex";
-import { b64EncodeStandard, getEndPoint, getIngestionURL } from "../../../utils/zincutils";
+import DataSourceSetupCard from "@/components/ingestion/setupCard/DataSourceSetupCard.vue";
 
-const store = useStore();
-
-const props = defineProps({
-  currOrgIdentifier: { type: String },
-  currUserEmail: { type: String },
-});
-
-const selected = ref("generic");
-
-const options = [
-  {
-    value: "generic",
-    label: "Generic Linux",
-    description: "Any Linux server or VM",
-    icon: "terminal",
-  },
-  {
-    value: "ec2",
-    label: "AWS EC2",
-    description: "EC2 instances with Name tag detection",
-    icon: "cloud",
-  },
-];
-
-const endpoint: any = ref({ url: "", host: "", port: "", protocol: "", tls: "" });
-const ingestionURL = getIngestionURL();
-endpoint.value = getEndPoint(ingestionURL);
-
-const accessKey = computed(() =>
-  b64EncodeStandard(`${props.currUserEmail}:${store.state.organizationData.organizationPasscode}`)
-);
-
-const activeCommand = computed(() => {
-  const base = selected.value === "ec2"
-    ? "https://raw.githubusercontent.com/openobserve/agents/main/linux/ec2/install.sh"
-    : "https://raw.githubusercontent.com/openobserve/agents/main/linux/install.sh";
-  return `curl -O ${base} && chmod +x install.sh && sudo ./install.sh ${endpoint.value.url}/api/${props.currOrgIdentifier}/ [BASIC_PASSCODE]`;
-});
-
-const selectedCardClass = computed(() =>
-  store.state.theme === "dark"
-    ? "border-[var(--q-primary)] bg-blue-950/30"
-    : "border-[var(--q-primary)] bg-blue-50"
-);
-
-const unselectedCardClass = computed(() =>
-  store.state.theme === "dark"
-    ? "border-gray-700 bg-gray-800/40 hover:border-gray-500"
-    : "border-gray-200 bg-white hover:border-gray-300"
-);
+defineProps<{
+  currOrgIdentifier?: string;
+  currUserEmail?: string;
+}>();
 </script>
diff --git a/web/src/components/ingestion/recommended/WindowsConfig.spec.ts b/web/src/components/ingestion/recommended/WindowsConfig.spec.ts
index 7847f22474..552f6dba23 100644
--- a/web/src/components/ingestion/recommended/WindowsConfig.spec.ts
+++ b/web/src/components/ingestion/recommended/WindowsConfig.spec.ts
@@ -1,185 +1,121 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createI18n } from 'vue-i18n';
-import { createRouter, createWebHistory } from 'vue-router';
-import WindowsConfig from './WindowsConfig.vue';
-import CopyContent from '@/components/CopyContent.vue';
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-vi.mock('../../../aws-exports', () => ({
-  default: { API_ENDPOINT: 'http://localhost:5080', region: 'us-east-1' },
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import { createStore } from "vuex";
+import { createI18n } from "vue-i18n";
+import { ref } from "vue";
+import WindowsConfig from "./WindowsConfig.vue";
+import windowsCard from "@/components/ingestion/setupCard/content/windows";
+import linuxCard from "@/components/ingestion/setupCard/content/linux";
+import { getDataSourceCard } from "@/components/ingestion/setupCard/registry";
+
+const mockEndpoint = ref({
+  url: "https://test.openobserve.ai",
+  host: "test.openobserve.ai",
+  port: 443,
+  protocol: "https",
+  tls: true,
+});
+
+vi.mock("@/composables/useIngestion", () => ({
+  default: vi.fn(() => ({ endpoint: mockEndpoint })),
 }));
 
-vi.mock('../../../utils/zincutils', () => ({
-  getImageURL: vi.fn((path) => `mock-image-url-${path}`),
-  getEndPoint: vi.fn(() => ({ url: 'http://localhost:5080', host: 'localhost', port: '5080', protocol: 'http', tls: false })),
-  getIngestionURL: vi.fn(() => 'http://localhost:5080'),
-  b64EncodeStandard: vi.fn((str) => btoa(str)),
-}));
-
-vi.mock('@/components/CopyContent.vue', () => ({
+vi.mock("@/components/ingestion/setupCard/SetupCardRenderer.vue", () => ({
   default: {
-    name: 'CopyContent',
-    template: '<div data-test="copy-content">{{ content }}</div>',
-    props: ['content'],
+    name: "SetupCardRenderer",
+    props: ["content", "subs", "logoUrl", "logoUrlDark"],
+    template: '<div data-test="rich-card-stub" />',
   },
 }));
 
 const mockStore = createStore({
   state: {
-    selectedOrganization: { identifier: 'test-org', name: 'Test Organization' },
-    userInfo: { email: 'test@example.com' },
-    organizationData: { organizationPasscode: 'test-passcode' },
+    selectedOrganization: { identifier: "test-org", name: "Test Organization" },
+    userInfo: { email: "test@example.com" },
+    organizationData: { organizationPasscode: "test-passcode" },
+    theme: "light",
   },
 });
+const mockI18n = createI18n({ locale: "en", messages: { en: {} } });
 
-const mockI18n = createI18n({ locale: 'en', messages: { en: {} } });
-const mockRouter = createRouter({ history: createWebHistory(), routes: [{ path: '/', component: { template: '<div>Home</div>' } }] });
+const SUBS = {
+  url: "https://test.openobserve.ai",
+  org: "test-org",
+  token: "dGVzdEB0b2tlbg==",
+};
 
-
-describe('WindowsConfig.vue', () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
+describe("windowsCard builder", () => {
+  it("builds the Windows card metadata and step flow", () => {
+    const card = windowsCard(SUBS);
+    expect(card.provider.name).toBe("Windows");
+    expect(card.provider.metaBadges).toEqual(["Logs", "Metrics"]);
+    expect(card.steps.map((s) => s.id)).toEqual(["install", "verify"]);
   });
 
+  it("uses PowerShell, not bash", () => {
+    const install = windowsCard(SUBS).steps[0];
+    expect(install.chip?.label).toBe("PowerShell");
+    for (const v of install.variants!) {
+      expect(v.code.lang).toBe("powershell");
+      expect(v.code.raw).toContain("Invoke-WebRequest");
+      expect(v.code.raw).toContain("-AUTH_KEY");
+    }
+  });
+
+  it("points each variant at its matching install script", () => {
+    const [generic, ec2] = windowsCard(SUBS).steps[0].variants!;
+    expect(generic.code.raw).toContain("/windows/install.ps1");
+    expect(generic.code.raw).not.toContain("/ec2/");
+    expect(ec2.code.raw).toContain("/windows/ec2/install.ps1");
+    expect(ec2.note).toContain("ec2:DescribeTags");
+    expect(generic.note).not.toContain("ec2:DescribeTags");
+  });
+
+  it("substitutes url/org and masks the ingestion token", () => {
+    const generic = windowsCard(SUBS).steps[0].variants![0];
+    expect(generic.code.raw).toContain(`${SUBS.url}/api/${SUBS.org}/`);
+    expect(generic.code.raw).not.toContain("[BASIC_PASSCODE]");
+    expect(generic.code.masked).not.toContain(SUBS.token);
+  });
+
+  it("adds the execution-policy guidance Linux does not need", () => {
+    const questions = windowsCard(SUBS).extras!.troubleshooting!.map((r) => r.q);
+    expect(questions[0]).toContain("fails to run");
+    // Shares the rest of its troubleshooting with the Linux card.
+    const linuxQs = linuxCard(SUBS).extras!.troubleshooting!.map((r) => r.q);
+    expect(questions).toEqual(expect.arrayContaining(linuxQs));
+  });
+});
+
+describe("WindowsConfig.vue", () => {
+  let wrapper: VueWrapper<any>;
+
   afterEach(() => {
     if (wrapper) wrapper.unmount();
   });
 
-  const createWrapper = (props = {}) => {
-    const defaultProps = { currOrgIdentifier: 'test-org', currUserEmail: 'test@example.com' };
-    return mount(WindowsConfig, {
-      props: { ...defaultProps, ...props },
-      global: {
-        plugins: [mockI18n, mockRouter],
-        provide: { store: mockStore },
-        components: { CopyContent },
-      },
-    });
-  };
-
-  describe('Component Rendering', () => {
-    it('should mount without errors', () => {
-      wrapper = createWrapper();
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should unmount without errors', () => {
-      wrapper = createWrapper();
-      expect(() => wrapper.unmount()).not.toThrow();
-    });
-
-    it('should render CopyContent component', () => {
-      wrapper = createWrapper();
-      const copyContent = wrapper.findComponent(CopyContent);
-      expect(copyContent.exists()).toBe(true);
-    });
-
-    it('should render PowerShell instructions', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('PowerShell');
-    });
-
-    it('should render installation description', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('Once installed');
-    });
-
-    it('should render Windows event log info', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('Windows Event Log');
-    });
-
-    it('should render metrics collection info', () => {
-      wrapper = createWrapper();
-      expect(wrapper.text()).toContain('performance counter');
-    });
-  });
-
-  describe('Props Validation', () => {
-    it('should accept currOrgIdentifier prop', () => {
-      wrapper = createWrapper({ currOrgIdentifier: 'my-org' });
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it('should accept currUserEmail prop', () => {
-      wrapper = createWrapper({ currUserEmail: 'user@test.com' });
-      expect(wrapper.exists()).toBe(true);
-    });
-  });
-
-  describe('activeCommand Computed', () => {
-    it('should generate a command string', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(typeof vm.activeCommand).toBe('string');
-    });
-
-    it('should include PowerShell command (Invoke-WebRequest)', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.activeCommand).toContain('Invoke-WebRequest');
-    });
-
-    it('should include install.ps1 in the command', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.activeCommand).toContain('install.ps1');
-    });
-
-    it('should include the endpoint URL in the command', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.activeCommand).toContain('http://localhost:5080');
-    });
-
-    it('should include the org identifier in the command', () => {
-      wrapper = createWrapper({ currOrgIdentifier: 'my-org' });
-      const vm = wrapper.vm as any;
-      expect(vm.activeCommand).toContain('my-org');
-    });
-
-    it('should include BASIC_PASSCODE placeholder', () => {
-      wrapper = createWrapper();
-      const vm = wrapper.vm as any;
-      expect(vm.activeCommand).toContain('[BASIC_PASSCODE]');
-    });
-  });
-
-  describe('CopyContent Integration', () => {
-    it('should pass getCommand to CopyContent', () => {
-      wrapper = createWrapper();
-      const copyContent = wrapper.findComponent(CopyContent);
-      expect(copyContent.props('content')).toBeDefined();
-      expect(typeof copyContent.props('content')).toBe('string');
-    });
-
-    it('should pass command containing org identifier to CopyContent', () => {
-      wrapper = createWrapper({ currOrgIdentifier: 'test-org' });
-      const copyContent = wrapper.findComponent(CopyContent);
-      expect(copyContent.props('content')).toContain('test-org');
-    });
-
-    it('should pass PowerShell command to CopyContent', () => {
-      wrapper = createWrapper();
-      const copyContent = wrapper.findComponent(CopyContent);
-      expect(copyContent.props('content')).toContain('Invoke-WebRequest');
-    });
-  });
-
-  describe('Utilities', () => {
-    it('should call getEndPoint on setup', async () => {
-      const zincutils = await import('../../../utils/zincutils');
-      wrapper = createWrapper();
-      expect(zincutils.getEndPoint).toHaveBeenCalled();
-    });
-
-    it('should call getIngestionURL on setup', async () => {
-      const zincutils = await import('../../../utils/zincutils');
-      wrapper = createWrapper();
-      expect(zincutils.getIngestionURL).toHaveBeenCalled();
+  it("renders the shared setup card for the windows slug", () => {
+    expect(getDataSourceCard("windows", SUBS)?.provider.name).toBe("Windows");
+    wrapper = mount(WindowsConfig, {
+      global: { plugins: [mockStore, mockI18n] },
     });
+    const stub = wrapper.findComponent({ name: "SetupCardRenderer" });
+    expect(stub.exists()).toBe(true);
+    expect((stub.props("content") as any).provider.name).toBe("Windows");
   });
 });
diff --git a/web/src/components/ingestion/recommended/WindowsConfig.vue b/web/src/components/ingestion/recommended/WindowsConfig.vue
index 46e55f5b0e..fb146f0a99 100644
--- a/web/src/components/ingestion/recommended/WindowsConfig.vue
+++ b/web/src/components/ingestion/recommended/WindowsConfig.vue
@@ -1,118 +1,35 @@
-<template>
-  <div class="p-3">
-    <!-- Environment selection cards -->
-    <div class="grid grid-cols-2 gap-3 mb-5">
-      <div
-        v-for="opt in options"
-        :key="opt.value"
-        class="rounded-lg border p-4 cursor-pointer transition-all flex gap-3 items-start"
-        :class="selected === opt.value ? selectedCardClass : unselectedCardClass"
-        @click="selected = opt.value"
-      >
-        <OIcon :name="opt.icon" size="lg" :class="selected === opt.value ? 'text-[var(--q-primary)]' : 'text-gray-400'" />
-        <div>
-          <div class="font-semibold text-sm">{{ opt.label }}</div>
-          <div class="text-xs mt-0.5" :class="store.state.theme === 'dark' ? 'text-gray-400' : 'text-gray-500'">{{ opt.description }}</div>
-        </div>
-      </div>
-    </div>
+<!-- Copyright 2026 OpenObserve Inc.
 
-    <!-- EC2 IAM prerequisite note -->
-    <div
-      v-if="selected === 'ec2'"
-      class="flex gap-2 items-start rounded-lg p-3 mb-4 text-sm"
-      :class="store.state.theme === 'dark' ? 'bg-amber-950/40 border border-amber-800/50' : 'bg-amber-50 border border-amber-200'"
-    >
-      <OIcon name="info" size="sm" class="text-amber-500 shrink-0 mt-0.5" />
-      <div :class="store.state.theme === 'dark' ? 'text-amber-200' : 'text-amber-900'">
-        <span class="font-semibold">IAM role required.</span>
-        Attach an IAM role to your EC2 instance with
-        <code class="font-mono text-xs">ec2:DescribeTags</code> and
-        <code class="font-mono text-xs">ec2:DescribeInstances</code>
-        permissions. This allows the collector to read the instance Name tag and use it as the host identifier.
-      </div>
-    </div>
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
 
-    <!-- Admin note -->
-    <div class="text-sm font-medium mb-2">
-      Run the following command in PowerShell as Administrator:
-    </div>
+This program is distributed in the hope that it will be useful
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
 
-    <!-- Install command -->
-    <ContentCopy :content="activeCommand" :key="selected" />
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
 
-    <OSeparator class="my-4" />
+<!--
+  Windows host agent setup page. Content lives in setupCard/content/windows.ts
+  and renders through the shared DataSourceSetupCard.
 
-    <!-- What it collects -->
-    <div class="text-sm font-medium pl-1">
-      Once installed, the collector will:
-      <ul class="list-disc ml-5 mt-1 font-normal space-y-0.5">
-        <li>Collect Windows Event Log (Application, Security, Setup, System)</li>
-        <li>Collect host metrics (CPU, memory, disk, network)</li>
-        <li>Collect Windows performance counter metrics</li>
-        <li v-if="selected === 'ec2'">Detect EC2 instance metadata automatically</li>
-        <li v-if="selected === 'ec2'">Use the EC2 Name tag as the host identifier in dashboards</li>
-      </ul>
-    </div>
-  </div>
+  Also mounted inside AWSIntegrationTile's EC2 dialog (see awsIntegrations.ts
+  componentOptions), so it must stay self-contained.
+-->
+<template>
+  <DataSourceSetupCard slug="windows" />
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import ContentCopy from "@/components/CopyContent.vue";
-import OIcon from "@/lib/core/Icon/OIcon.vue";
-import OSeparator from "@/lib/core/Separator/OSeparator.vue";
-import { useStore } from "vuex";
-import { b64EncodeStandard, getEndPoint, getIngestionURL } from "../../../utils/zincutils";
+import DataSourceSetupCard from "@/components/ingestion/setupCard/DataSourceSetupCard.vue";
 
-const store = useStore();
-
-const props = defineProps({
-  currOrgIdentifier: { type: String },
-  currUserEmail: { type: String },
-});
-
-const selected = ref("generic");
-
-const options = [
-  {
-    value: "generic",
-    label: "Generic Windows",
-    description: "Any Windows server or VM",
-    icon: "desktop_windows",
-  },
-  {
-    value: "ec2",
-    label: "AWS EC2",
-    description: "EC2 instances with Name tag detection",
-    icon: "cloud",
-  },
-];
-
-const endpoint: any = ref({ url: "", host: "", port: "", protocol: "", tls: "" });
-const ingestionURL = getIngestionURL();
-endpoint.value = getEndPoint(ingestionURL);
-
-const accessKey = computed(() =>
-  b64EncodeStandard(`${props.currUserEmail}:${store.state.organizationData.organizationPasscode}`)
-);
-
-const activeCommand = computed(() => {
-  const script = selected.value === "ec2"
-    ? "https://raw.githubusercontent.com/openobserve/agents/main/windows/ec2/install.ps1"
-    : "https://raw.githubusercontent.com/openobserve/agents/main/windows/install.ps1";
-  return `Invoke-WebRequest -Uri ${script} -OutFile install.ps1 ; .\\install.ps1 -URL ${endpoint.value.url}/api/${props.currOrgIdentifier}/ -AUTH_KEY [BASIC_PASSCODE]`;
-});
-
-const selectedCardClass = computed(() =>
-  store.state.theme === "dark"
-    ? "border-[var(--q-primary)] bg-blue-950/30"
-    : "border-[var(--q-primary)] bg-blue-50"
-);
-
-const unselectedCardClass = computed(() =>
-  store.state.theme === "dark"
-    ? "border-gray-700 bg-gray-800/40 hover:border-gray-500"
-    : "border-gray-200 bg-white hover:border-gray-300"
-);
+defineProps<{
+  currOrgIdentifier?: string;
+  currUserEmail?: string;
+}>();
 </script>
diff --git a/web/src/components/ingestion/setupCard/SetupCardRenderer.spec.ts b/web/src/components/ingestion/setupCard/SetupCardRenderer.spec.ts
new file mode 100644
index 0000000000..65e28cb233
--- /dev/null
+++ b/web/src/components/ingestion/setupCard/SetupCardRenderer.spec.ts
@@ -0,0 +1,236 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// Renderer-level tests for the two supplementary-section behaviours: the
+// collapsed `extras.advanced` block, and the step-note jump links that open it.
+// Driven by a synthetic content fixture so these stay independent of any one
+// data source's copy.
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import { createStore } from "vuex";
+import { createI18n } from "vue-i18n";
+import { createRouter, createWebHistory } from "vue-router";
+import SetupCardRenderer from "./SetupCardRenderer.vue";
+import { iconRegistry } from "@/lib/core/Icon/OIcon.icons";
+import type { RichCardContent } from "./types";
+
+vi.mock("@/composables/useStreams", () => ({
+  default: () => ({ getStreams: vi.fn() }),
+}));
+
+const store = createStore({
+  state: {
+    selectedOrganization: { identifier: "test-org" },
+    userInfo: { email: "t@e.com" },
+    organizationData: { organizationPasscode: "pc" },
+    theme: "light",
+  },
+});
+const i18n = createI18n({ locale: "en", messages: { en: {} } });
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: "/", component: { template: "<div/>" } }],
+});
+const SUBS = { url: "https://o2.example.com", org: "test-org", token: "tok" };
+
+const CONTENT: RichCardContent = {
+  provider: { name: "Demo", tagline: "A demo card.", logo: "", tone: "#000" },
+  steps: [
+    {
+      id: "install",
+      title: "Install",
+      description: "Run it.",
+      chip: { kind: "terminal", label: "Terminal" },
+      completeOn: "copy",
+      code: { lang: "bash", raw: "echo hi" },
+      note: "Prefer the long way? Go to [Manual Setup](#advanced).",
+    },
+    {
+      id: "verify",
+      title: "Verify",
+      description: "Check it.",
+      completeOn: "detect",
+      detectionAnchor: true,
+    },
+  ],
+  detect: { streamType: "logs", streamName: "default", filter: "a IS NOT NULL" },
+  extras: {
+    advanced: {
+      label: "Manual Setup",
+      description: "The step-by-step path.",
+      code: { lang: "bash", raw: "echo manual-path" },
+    },
+    troubleshooting: [{ q: "It broke", a: "Turn it off and on." }],
+  },
+};
+
+const mountCard = (content: RichCardContent = CONTENT) =>
+  mount(SetupCardRenderer, {
+    props: { content, subs: SUBS },
+    global: { plugins: [store, i18n, router] },
+    attachTo: document.body,
+  });
+
+describe("SetupCardRenderer — advanced section", () => {
+  let wrapper: VueWrapper<any>;
+
+  afterEach(() => {
+    if (wrapper) wrapper.unmount();
+  });
+
+  it("renders the advanced accordion collapsed, as its own panel", () => {
+    wrapper = mountCard();
+    const acc = wrapper.find('[data-test="ai-advanced-accordion"]');
+    expect(acc.exists()).toBe(true);
+    expect(acc.text()).toContain("Manual Setup");
+    // .acc-item carries the border/background so it reads as a real section
+    // rather than stray text at the bottom of a long card.
+    expect(acc.classes()).toContain("acc-item");
+    // Collapsed → Radix leaves the body unmounted entirely.
+    expect(wrapper.find('[data-test="ai-advanced-code"]').exists()).toBe(false);
+  });
+
+  it("uses icons registered in OIcon, never the material-font fallback", () => {
+    // An unregistered name silently degrades to a ligature span, which renders
+    // the raw word next to the label. Guard every accordion icon we pass.
+    for (const name of ["settings", "layers", "help-outline"]) {
+      expect(name in iconRegistry).toBe(true);
+    }
+    wrapper = mountCard();
+    const acc = wrapper.find('[data-test="ai-advanced-accordion"]');
+    expect(acc.find("svg").exists()).toBe(true);
+    expect(acc.find(".material-icons-outlined").exists()).toBe(false);
+  });
+
+  it("omits the accordion entirely when no advanced content is given", () => {
+    wrapper = mountCard({ ...CONTENT, extras: { troubleshooting: [] } });
+    expect(wrapper.find('[data-test="ai-advanced-accordion"]').exists()).toBe(
+      false,
+    );
+  });
+});
+
+describe("SetupCardRenderer — footer doc links", () => {
+  let wrapper: VueWrapper<any>;
+
+  afterEach(() => {
+    if (wrapper) wrapper.unmount();
+  });
+
+  it("renders every docLink as a real anchor beside the primary doc", () => {
+    wrapper = mountCard({
+      ...CONTENT,
+      docUrl: "https://example.com/main",
+      docLinks: [
+        { label: "Second Guide", url: "https://example.com/second" },
+        { label: "Third Guide", url: "https://example.com/third" },
+      ],
+    });
+    const hrefs = wrapper
+      .findAll(".pv-foot a")
+      .map((a) => a.attributes("href"));
+    expect(hrefs).toEqual([
+      "https://example.com/main",
+      "https://example.com/second",
+      "https://example.com/third",
+    ]);
+    expect(wrapper.find('[data-test="ai-doc-link-second-guide"]').text()).toBe(
+      "Second Guide →",
+    );
+  });
+
+  it("renders only the primary link when there are no docLinks", () => {
+    wrapper = mountCard({ ...CONTENT, docUrl: "https://example.com/main" });
+    expect(wrapper.findAll(".pv-foot a")).toHaveLength(1);
+  });
+
+  it("refuses unsafe doc link hrefs", () => {
+    wrapper = mountCard({
+      ...CONTENT,
+      docLinks: [{ label: "Evil", url: "javascript:alert(1)" }],
+    });
+    const evil = wrapper.find('[data-test="ai-doc-link-evil"]');
+    expect(evil.attributes("href")).toBe("#");
+  });
+});
+
+describe("SetupCardRenderer — step-note jump links", () => {
+  let wrapper: VueWrapper<any>;
+
+  afterEach(() => {
+    if (wrapper) wrapper.unmount();
+  });
+
+  it("renders [label](#advanced) as an anchor without leaking markdown", () => {
+    wrapper = mountCard();
+    const note = wrapper.find(".step-note");
+    expect(note.text()).not.toContain("](#advanced)");
+    expect(note.text()).not.toContain("[Manual Setup]");
+
+    const link = wrapper.find("a.note-jump");
+    expect(link.exists()).toBe(true);
+    expect(link.text()).toBe("Manual Setup");
+    expect(link.attributes("data-jump")).toBe("advanced");
+  });
+
+  it("opens and scrolls to the advanced section on click", async () => {
+    wrapper = mountCard();
+    const scrollSpy = vi.fn();
+    (Element.prototype as any).scrollIntoView = scrollSpy;
+
+    await wrapper.find("a.note-jump").trigger("click");
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+
+    const code = wrapper.find('[data-test="ai-advanced-code"]');
+    expect(code.exists()).toBe(true);
+    expect(code.text()).toContain("echo manual-path");
+    expect(scrollSpy).toHaveBeenCalled();
+  });
+
+  it("leaves ordinary notes untouched", () => {
+    const plain: RichCardContent = {
+      ...CONTENT,
+      steps: [{ ...CONTENT.steps[0], note: "Just a plain note." }, CONTENT.steps[1]],
+    };
+    wrapper = mountCard(plain);
+    expect(wrapper.find(".step-note").text()).toContain("Just a plain note.");
+    expect(wrapper.find("a.note-jump").exists()).toBe(false);
+  });
+
+  it("does not turn arbitrary link targets into anchors", () => {
+    // Only the fixed #advanced / #troubleshooting alternation is linkified, so
+    // authored content cannot inject a URL through a note.
+    const evil: RichCardContent = {
+      ...CONTENT,
+      steps: [
+        {
+          ...CONTENT.steps[0],
+          note: "See [click me](javascript:alert(1)) and [x](#nope).",
+        },
+        CONTENT.steps[1],
+      ],
+    };
+    wrapper = mountCard(evil);
+    const html = wrapper.find(".step-note").html();
+    // Neither target is linkified, so no anchor is produced at all...
+    expect(wrapper.find("a.note-jump").exists()).toBe(false);
+    expect(wrapper.find(".step-note a").exists()).toBe(false);
+    // ...and the payload survives only as inert escaped text, never an href.
+    expect(html).not.toContain('href="javascript:');
+    expect(wrapper.find(".step-note").text()).toContain("javascript:alert(1)");
+  });
+});
diff --git a/web/src/components/ingestion/setupCard/SetupCardRenderer.vue b/web/src/components/ingestion/setupCard/SetupCardRenderer.vue
index ab81c91e89..c9c8812049 100644
--- a/web/src/components/ingestion/setupCard/SetupCardRenderer.vue
+++ b/web/src/components/ingestion/setupCard/SetupCardRenderer.vue
@@ -64,6 +64,11 @@ const props = defineProps<{
   logoUrlDark?: string;
 }>();
 
+const emit = defineEmits<{
+  /** A step's action button was clicked; carries RichCardStepAction.id. */
+  (e: "step-action", actionId: string): void;
+}>();
+
 const store = useStore();
 const router = useRouter();
 const { getStreams } = useStreams();
@@ -262,8 +267,22 @@ const currentVariantNote = (step: RichCardStep) =>
 
 // ── step completion / active-step model ─────────────────────────────────────
 const copied = ref<Record<string, boolean>>({});
-const isStepDone = (step: RichCardStep) =>
-  step.completeOn === "copy" ? !!copied.value[step.id] : detected.value;
+// Steps whose action button has been triggered (completeOn: "action") — the
+// cloud-console flows have nothing to copy and nothing to detect, so the click
+// itself is the completion signal.
+const actioned = ref<Record<string, boolean>>({});
+const isStepDone = (step: RichCardStep) => {
+  if (step.completeOn === "copy") return !!copied.value[step.id];
+  if (step.completeOn === "action") return !!actioned.value[step.id];
+  return detected.value;
+};
+
+const onStepAction = (step: RichCardStep, index: number) => {
+  if (step.completeOn === "action")
+    actioned.value = { ...actioned.value, [step.id]: true };
+  emit("step-action", step.action!.id);
+  scrollToStep(index + 1);
+};
 
 // First not-done step is "active"; -1 once everything is done. OStepper's
 // model is 1-based step numbers (0 = none active, i.e. all done).
@@ -320,6 +339,31 @@ const inlineMd = (s: string) =>
     .replace(/\*\*([^*]+)\*\*/g, "<b>$1</b>")
     .replace(/`([^`]+)`/g, "<code>$1</code>");
 
+// Step notes additionally support in-card jump links: `[label](#advanced)` and
+// `[label](#troubleshooting)` render as anchors that OPEN the target accordion
+// and scroll to it — the sections sit below the detection status bar, so a
+// plain "see X below" leaves the user hunting. The href is a literal "#" and
+// the target comes from a fixed alternation, so authored content can't inject a
+// URL here (inlineMd has already escaped everything else).
+const JUMP_LINK_RE = /\[([^\]]+)\]\(#(advanced|troubleshooting)\)/g;
+const noteMd = (s: string) =>
+  inlineMd(s).replace(
+    JUMP_LINK_RE,
+    (_m, label, target) =>
+      `<a href="#" class="note-jump" data-jump="${target}">${label}</a>`,
+  );
+
+// Delegated so the anchors rendered by v-html above stay clickable.
+const onNoteClick = (e: MouseEvent) => {
+  const el = (e.target as HTMLElement)?.closest?.("[data-jump]") as
+    | HTMLElement
+    | null;
+  if (!el) return;
+  e.preventDefault();
+  if (el.dataset.jump === "advanced") openAdvanced();
+  else if (el.dataset.jump === "troubleshooting") openTroubleshooting();
+};
+
 const chipIcon = (kind: StepChipKind) =>
   ({ terminal: "", editor: "code", run: "play-arrow", traces: "timeline" })[
     kind
@@ -337,18 +381,28 @@ const hasInstallerAccordion = computed(
   () => !!(extras.value.installs?.length || extras.value.envVars?.length),
 );
 
-// "See All Troubleshooting" (from the fix box) opens the Troubleshooting
-// accordion (controlled via v-model) and scrolls it into view.
-const troubleshootingOpen = ref(false);
-const troubleshootingRef = ref<any>(null);
-const openTroubleshooting = () => {
-  troubleshootingOpen.value = true;
+// Open a bottom accordion (controlled via v-model) and scroll it into view —
+// used by the fix box's "See All Troubleshooting" and by step-note jump links.
+const scrollIntoViewSoon = (target: { $el?: HTMLElement } | null) =>
   nextTick(() =>
-    troubleshootingRef.value?.$el?.scrollIntoView({
+    target?.$el?.scrollIntoView({
       behavior: prefersReducedMotion() ? "auto" : "smooth",
       block: "start",
     }),
   );
+
+const troubleshootingOpen = ref(false);
+const troubleshootingRef = ref<any>(null);
+const openTroubleshooting = () => {
+  troubleshootingOpen.value = true;
+  scrollIntoViewSoon(troubleshootingRef.value);
+};
+
+const advancedOpen = ref(false);
+const advancedRef = ref<any>(null);
+const openAdvanced = () => {
+  advancedOpen.value = true;
+  scrollIntoViewSoon(advancedRef.value);
 };
 
 // ── confetti (canvas burst on connect) ───────────────────────────────────────
@@ -584,13 +638,45 @@ function fireConfetti() {
               </template>
             </OCodeBlock>
 
-            <p v-if="currentVariantNote(step)" class="step-note">
-              <OIcon name="info-outline" size="sm" /> {{ currentVariantNote(step) }}
+            <p
+              v-if="currentVariantNote(step)"
+              class="step-note"
+              @click="onNoteClick"
+            >
+              <OIcon name="info-outline" size="sm" />
+              <span v-html="noteMd(currentVariantNote(step) || '')"></span>
             </p>
-            <p v-if="step.note" class="step-note">
-              <OIcon name="info-outline" size="sm" /> {{ step.note }}
+            <p v-if="step.note" class="step-note" @click="onNoteClick">
+              <OIcon name="info-outline" size="sm" />
+              <span v-html="noteMd(step.note)"></span>
             </p>
 
+            <!-- Page-supplied controls for this step (region pickers, service
+                 checkboxes …). Lets a page own the interaction while inheriting
+                 the card's hero, stepper and chrome instead of rebuilding them. -->
+            <div
+              v-if="$slots[`step-${step.id}`]"
+              class="step-slot"
+              :data-test="`ai-step-slot-${step.id}`"
+            >
+              <slot :name="`step-${step.id}`" :step="step" />
+            </div>
+
+            <!-- Action button — for steps performed in a cloud console rather
+                 than by copying a command. -->
+            <div v-if="step.action" class="step-action">
+              <OButton
+                :variant="step.action.variant || 'primary'"
+                size="sm-action"
+                :icon-left="step.action.icon"
+                :disabled="step.action.disabled"
+                :data-test="`ai-step-action-${step.action.id}`"
+                @click="onStepAction(step, i)"
+              >
+                {{ step.action.label }}
+              </OButton>
+            </div>
+
             <div v-if="step.pills?.length" class="pill-list mt-2">
               <OTag
                 v-for="p in step.pills"
@@ -720,9 +806,39 @@ function fireConfetti() {
 
       <!-- Supplementary accordions (shared OCollapsible) -->
       <div
-        v-if="hasInstallerAccordion || extras.troubleshooting?.length"
+        v-if="hasInstallerAccordion || extras.advanced || extras.troubleshooting?.length"
         class="c-more"
       >
+        <!-- Alternative manual path (e.g. the raw Helm sequence) — collapsed, so
+             the stepped primary path above stays the obvious default. -->
+        <OCollapsible
+          v-if="extras.advanced"
+          ref="advancedRef"
+          v-model="advancedOpen"
+          :label="extras.advanced.label"
+          icon="settings"
+          class="acc-item"
+          data-test="ai-advanced-accordion"
+        >
+          <div class="acc-body">
+            <p
+              v-if="extras.advanced.description"
+              class="step-desc"
+              v-html="inlineMd(extras.advanced.description)"
+            ></p>
+            <OCodeBlock
+              :lang="extras.advanced.code.lang"
+              :chrome="extras.advanced.code.filename ? 'editor' : 'terminal'"
+              :filename="extras.advanced.code.filename"
+              :code="subStream(extras.advanced.code.raw) || ''"
+              :code-masked="subStream(extras.advanced.code.masked)"
+              data-test="ai-advanced-code"
+              reveal-tooltip="Reveal Token"
+              hide-tooltip="Hide Token"
+            />
+          </div>
+        </OCollapsible>
+
         <OCollapsible
           v-if="hasInstallerAccordion"
           label="What The Installer Does"
@@ -789,6 +905,18 @@ function fireConfetti() {
           rel="noopener noreferrer"
           >{{ content.provider.name }} →</a
         >
+        <!-- Secondary guides (e.g. GCP's Google Workspace page) — real anchors,
+             beside the primary doc link rather than buried in an accordion. -->
+        <template v-for="l in content.docLinks" :key="l.url">
+          <span class="pv-foot-sep" aria-hidden="true">·</span>
+          <a
+            :href="safeHttpUrl(l.url)"
+            target="_blank"
+            rel="noopener noreferrer"
+            :data-test="`ai-doc-link-${l.label.toLowerCase().replace(/\s+/g, '-')}`"
+            >{{ l.label }} →</a
+          >
+        </template>
         <span v-if="content.slackUrl" class="ml-auto"
           >Stuck?
           <a
@@ -983,6 +1111,14 @@ function fireConfetti() {
   margin: 10px 0 0;
 }
 
+/* ---- page-supplied step content + action button ---- */
+.step-slot {
+  margin: 4px 0 14px;
+}
+.step-action {
+  margin-top: 14px;
+}
+
 /* ---- variant toggle (shared OToggleGroup) — only spacing + icon sizing here;
    the toggle's own visuals come from the design system. ---- */
 .variant-tabs {
@@ -1003,6 +1139,16 @@ function fireConfetti() {
   flex: none;
   margin-top: 1px;
 }
+/* In-card jump link (see noteMd) — same treatment as the footer's doc link. */
+.step-note :deep(a.note-jump) {
+  color: var(--primary-ink);
+  font-weight: 700;
+  text-decoration: none;
+  cursor: pointer;
+}
+.step-note :deep(a.note-jump:hover) {
+  text-decoration: underline;
+}
 .step-content-pad :deep(code),
 .step-desc :deep(code) {
   font-size: 12px;
@@ -1118,16 +1264,32 @@ function fireConfetti() {
   margin-top: 13px;
 }
 /* ---- accordions (OCollapsible) ---- */
+/* These sit at the very bottom of a long card, after the detection status bar.
+   OCollapsible's default trigger is borderless and background-less, which reads
+   as stray body text down there — give each one the same bordered panel as
+   .statusbar / .fixbox so it registers as a real, clickable section. */
 .c-more {
-  margin-top: 14px;
+  margin-top: 22px;
+}
+.acc-item {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--panel);
+  overflow: hidden;
 }
 .acc-item + .acc-item {
-  margin-top: 8px;
+  margin-top: 10px;
+}
+/* Roomier hit area than the component's default px-2 py-2 inside a panel. */
+.acc-item :deep(button) {
+  padding: 13px 16px;
+  border-radius: 0;
 }
 .acc-body {
   color: var(--text-2);
   font-size: 13px;
   line-height: 1.6;
+  padding: 0 16px 16px;
 }
 .acc-body :deep(code) {
   font-size: 11.5px;
@@ -1191,6 +1353,10 @@ function fireConfetti() {
 .pv-foot a:hover {
   text-decoration: underline;
 }
+.pv-foot-sep {
+  color: var(--text-3);
+  margin: 0 2px;
+}
 
 /* ---- confetti overlay ---- */
 .dirC-confetti {
diff --git a/web/src/components/ingestion/setupCard/content/gcp.ts b/web/src/components/ingestion/setupCard/content/gcp.ts
new file mode 100644
index 0000000000..429410b024
--- /dev/null
+++ b/web/src/components/ingestion/setupCard/content/gcp.ts
@@ -0,0 +1,144 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// Google Cloud setup card. Unlike the agent cards, nothing is installed: GCP
+// pushes to an OpenObserve HTTP endpoint via a Pub/Sub push subscription, so the
+// card's job is to hand over the right URL and show where it goes in the GCP
+// console.
+//
+// The stream is a `streamInput`, so the name the user picks flows into BOTH the
+// push endpoint URL and the live detection — the page can't end up watching a
+// different stream than the one GCP is writing to.
+
+import { getImageURL } from "@/utils/zincutils";
+import type { CardSubstitutions, RichCardContent } from "../types";
+import { applySubs, applySubsMasked } from "../subs";
+
+// {stream} is filled live by the renderer from the stream-name field.
+const PUSH_ENDPOINT = "{url}/gcp/{org}/{stream}/_sub?API-Key={token}";
+
+export default function gcpCard(subs: CardSubstitutions): RichCardContent {
+  return {
+    provider: {
+      name: "Google Cloud",
+      tagline:
+        "Stream Google Cloud logs into OpenObserve with a Pub/Sub push subscription — no agent or collector to run.",
+      logo: getImageURL("images/ingestion/gcp.svg"),
+      tone: "#4285f4",
+      runtime: "Google Cloud",
+      setupTime: "~5 min",
+      metaBadges: ["Logs"],
+    },
+    steps: [
+      {
+        id: "sink",
+        title: "Route Logs to a Pub/Sub Topic",
+        description:
+          "In the GCP console, create a **Log Router sink** (Logging → Log Router → Create sink) with Pub/Sub as the destination, and let it create the topic. The sink's inclusion filter decides which logs reach OpenObserve.",
+        chip: { kind: "editor", label: "GCP Console" },
+        required: true,
+        completeOn: "copy",
+        code: {
+          lang: "bash",
+          raw: `# Or from the CLI — create the topic, then the sink that feeds it
+gcloud pubsub topics create openobserve-logs
+
+gcloud logging sinks create openobserve-sink \\
+  pubsub.googleapis.com/projects/$(gcloud config get-value project)/topics/openobserve-logs \\
+  --log-filter='severity >= "DEFAULT"'`,
+        },
+        note: "Grant the sink's writer identity the Pub/Sub Publisher role on the topic, or it will silently publish nothing.",
+      },
+      {
+        id: "subscription",
+        title: "Push the Topic to OpenObserve",
+        description:
+          "Create a **push** subscription on that topic and paste this as the endpoint URL. It already carries this organization and its ingestion key.",
+        chip: { kind: "terminal", label: "Endpoint" },
+        required: true,
+        completeOn: "copy",
+        code: {
+          lang: "bash",
+          raw: applySubs(PUSH_ENDPOINT, subs),
+          masked: applySubsMasked(PUSH_ENDPOINT, subs),
+        },
+        note: "Keep this URL secret — it embeds the ingestion key. Rotate it from this page's header if it leaks.",
+      },
+      {
+        id: "verify",
+        title: "Verify Data in OpenObserve",
+        description:
+          "Generate some activity in the project (or wait for the sink to match a log), then hit Test.",
+        chip: { kind: "traces", label: "Logs" },
+        completeOn: "detect",
+        detectionAnchor: true,
+        pills: ["Audit Logs", "Cloud Run", "GKE", "Cloud Functions", "VPC Flow"],
+      },
+    ],
+    streamInput: {
+      label: "Logs Stream Name",
+      default: "default",
+      placeholder: "gcp_logs",
+      help: "Used in the push URL above and watched by the check below. A dedicated stream keeps GCP logs separate.",
+    },
+    // The push subscription writes to exactly this stream, so any row on it in
+    // the lookback window is proof the pipeline works end to end.
+    detect: {
+      streamType: "logs",
+      streamName: "default",
+      filter: "_timestamp IS NOT NULL",
+    },
+    extras: {
+      fixTitle: "Check The Push Subscription",
+      fixBody:
+        "GCP reports delivery failures on the subscription itself. If the sink is publishing but nothing lands here, the push endpoint is usually rejecting the request:",
+      fixLang: "bash",
+      fixSnippet: `gcloud pubsub subscriptions describe openobserve-push \\
+  --format='value(pushConfig.pushEndpoint)'
+
+# Unacked messages piling up means the endpoint is erroring
+gcloud pubsub subscriptions describe openobserve-push \\
+  --format='value(numUndeliveredMessages)'`,
+      troubleshooting: [
+        {
+          q: "The subscription shows delivery errors",
+          a: "A 401 means the `API-Key` in the URL is stale — re-copy the endpoint from this page. A 404 usually means the org or stream segment was edited by hand; the URL above is already correct for this organization.",
+        },
+        {
+          q: "The sink exists but the topic receives nothing",
+          a: "The sink's **writer identity** needs the Pub/Sub Publisher role on the topic. GCP creates the sink successfully without it and then drops everything, silently.",
+        },
+        {
+          q: "Only some logs arrive",
+          a: "That is the sink's inclusion filter, not OpenObserve. Widen the `--log-filter` on the sink to cover the services and severities you expect.",
+        },
+        {
+          q: "Can I send Google Workspace audit logs too?",
+          a: "Yes — Workspace exports into Cloud Logging, so the same Log Router sink picks it up once the export is enabled. Open the **Google Workspace** guide linked at the bottom of this page for the export setup.",
+        },
+      ],
+    },
+    docUrl: "https://openobserve.ai/blog/send-gcp-logs-to-openobserve",
+    // Both guides the page linked before the migration. Google Workspace is a
+    // distinct source that rides the same Pub/Sub pipeline, so it belongs here
+    // as a first-class link, not as prose.
+    docLinks: [
+      {
+        label: "Google Workspace",
+        url: "https://short.openobserve.ai/security/google-workspace",
+      },
+    ],
+  };
+}
diff --git a/web/src/components/ingestion/setupCard/content/kubernetes.ts b/web/src/components/ingestion/setupCard/content/kubernetes.ts
new file mode 100644
index 0000000000..7566c30043
--- /dev/null
+++ b/web/src/components/ingestion/setupCard/content/kubernetes.ts
@@ -0,0 +1,324 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// Kubernetes data-source setup card. The collector ships logs, k8s events and
+// cluster/pod metrics, and (via the OpenTelemetry operator) can auto-instrument
+// workloads for traces with no code change — so the card has three steps:
+// install → optionally annotate for traces → verify.
+//
+// Step 1 deliberately offers ONLY the two endpoint choices — external (reach
+// OpenObserve over the network) and internal (OpenObserve runs in this same
+// cluster, so traffic never leaves it) — because the one-line installer is the
+// recommended path and should read as the default. The two use different flags
+// (`--o2-url` vs `--internal-endpoint`), so they are distinct commands rather
+// than one editable URL field. Internal is self-hosted only: on cloud there is
+// no in-cluster router to talk to, so the toggle disappears entirely.
+//
+// The raw Helm sequence stays a secondary, collapsed path (extras.advanced),
+// mirroring the "Advanced Installation" accordion it replaces.
+
+import config from "@/aws-exports";
+import { getImageURL } from "@/utils/zincutils";
+import type {
+  CardSubstitutions,
+  RichCardContent,
+  RichCardStepVariant,
+} from "../types";
+import { applySubs, applySubsMasked } from "../subs";
+
+/** Pinned cert-manager release the manual sequence installs. Bump in one place. */
+const CERT_MANAGER_VERSION = "1.19.0";
+
+/**
+ * In-cluster address of the OpenObserve router, used when OpenObserve runs in
+ * the same cluster as the collector. Shape is
+ * `http://<helm-release>-openobserve-router.<namespace>.svc.cluster.local:5080`
+ * — the default below assumes release `o2` in namespace `openobserve`.
+ */
+const IN_CLUSTER_URL =
+  "http://o2-openobserve-router.openobserve.svc.cluster.local:5080";
+
+const INSTALL_SCRIPT =
+  "https://raw.githubusercontent.com/openobserve/o2-datasource/main/k8s/install.sh";
+
+// ── install commands ─────────────────────────────────────────────────────────
+
+// {cluster} is a live step input; {org}/{token} are substituted at build time.
+// `--o2-url` takes a reachable URL, `--internal-endpoint` the in-cluster one —
+// they are separate flags, not two values for the same flag.
+const scriptInstall = (endpointFlag: string) =>
+  `curl -sSL ${INSTALL_SCRIPT} | bash -s -- \\
+  --cluster-name={cluster} \\
+  --org-id={org} \\
+  --access-key={token} \\
+  ${endpointFlag}`;
+
+// The Helm path as ONE copy-paste block. Previously six separate copy boxes with
+// a "wait 2 minutes" instruction between them; the explicit `kubectl wait` on
+// the webhook makes that deterministic instead of a guess.
+const helmInstall = (exporterUrl: string) =>
+  `# 1 — cert-manager (the OpenTelemetry operator's webhook depends on it)
+kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v${CERT_MANAGER_VERSION}/cert-manager.yaml
+kubectl wait --for=condition=Available --timeout=300s \\
+  -n cert-manager deployment/cert-manager-webhook
+
+# 2 — Prometheus operator CRDs (required by the OpenTelemetry operator)
+kubectl create -f https://raw.githubusercontent.com/prometheus-operator/prometheus-operator/main/example/prometheus-operator-crd/monitoring.coreos.com_servicemonitors.yaml
+kubectl create -f https://raw.githubusercontent.com/prometheus-operator/prometheus-operator/main/example/prometheus-operator-crd/monitoring.coreos.com_podmonitors.yaml
+kubectl create -f https://raw.githubusercontent.com/prometheus-operator/prometheus-operator/refs/heads/main/example/prometheus-operator-crd/monitoring.coreos.com_scrapeconfigs.yaml
+kubectl create -f https://raw.githubusercontent.com/prometheus-operator/prometheus-operator/refs/heads/main/example/prometheus-operator-crd/monitoring.coreos.com_probes.yaml
+
+# 3 — OpenTelemetry operator
+kubectl apply -f https://raw.githubusercontent.com/openobserve/openobserve-helm-chart/refs/heads/main/opentelemetry-operator.yaml
+
+# 4 — OpenObserve collector
+helm repo add openobserve https://charts.openobserve.ai
+helm repo update
+kubectl create ns openobserve-collector
+helm --namespace openobserve-collector \\
+  upgrade --install o2c openobserve/openobserve-collector \\
+  --set k8sCluster={cluster} \\
+  --set exporters.'otlphttp/openobserve'.endpoint=${exporterUrl}/api/{org} \\
+  --set exporters.'otlphttp/openobserve'.headers.Authorization='Basic {token}' \\
+  --set exporters.'otlphttp/openobserve_k8s_events'.endpoint=${exporterUrl}/api/{org} \\
+  --set exporters.'otlphttp/openobserve_k8s_events'.headers.Authorization='Basic {token}'`;
+
+/** Build a variant whose code carries the org token (masked until revealed). */
+const codeFor = (
+  template: string,
+  subs: CardSubstitutions,
+  lang = "bash",
+) => ({
+  lang,
+  raw: applySubs(template, subs),
+  masked: applySubsMasked(template, subs),
+});
+
+// ── auto-instrumentation (optional step) ─────────────────────────────────────
+
+/**
+ * Annotating a namespace makes the operator inject the language's auto-
+ * instrumentation into every pod in it — no application code or image change.
+ * Go is the exception: its eBPF instrumentation also needs the path to the
+ * compiled binary inside the container.
+ */
+const annotate = (key: string, extra = "") =>
+  `# Every pod in the namespace is instrumented — no code or image change.
+kubectl annotate namespace my-namespace \\
+  instrumentation.opentelemetry.io/inject-${key}="openobserve-collector/openobserve-${key}"${extra}
+
+# Restart so running pods pick up the injection
+kubectl rollout restart deployment -n my-namespace`;
+
+const LANGUAGES: { id: string; label: string; icon: string; extra?: string }[] =
+  [
+    { id: "java", label: "Java", icon: "images/ingestion/java.svg" },
+    { id: "dotnet", label: ".NET", icon: "images/ingestion/dotnet.svg" },
+    { id: "nodejs", label: "Node.js", icon: "images/ingestion/nodejs.svg" },
+    { id: "python", label: "Python", icon: "images/ingestion/python.svg" },
+    {
+      id: "go",
+      label: "Go (eBPF)",
+      icon: "images/ingestion/golang.svg",
+      // eBPF attaches to the binary, so the operator needs its in-container path.
+      extra: ` \\
+  instrumentation.opentelemetry.io/otel-go-auto-target-exe="/path/to/container/executable"`,
+    },
+  ];
+
+const instrumentVariants = (): RichCardStepVariant[] =>
+  LANGUAGES.map((l) => ({
+    id: l.id,
+    label: l.label,
+    icon: getImageURL(l.icon),
+    code: { lang: "bash", raw: annotate(l.id, l.extra) },
+    note:
+      l.id === "go"
+        ? "Point otel-go-auto-target-exe at the compiled binary inside the container — eBPF attaches to that executable, not to the pod."
+        : "Annotate a single pod spec instead of the namespace to instrument one workload at a time.",
+  }));
+
+// ── card ─────────────────────────────────────────────────────────────────────
+
+export default function kubernetesCard(
+  subs: CardSubstitutions,
+): RichCardContent {
+  const isCloud = config.isCloud === "true";
+
+  const INSTALLER_NOTE =
+    "This installs cert-manager, the OpenTelemetry operator and the OpenObserve collector automatically.";
+
+  // The manual Helm path sits in a collapsed section below the steps, which is
+  // past the auto-instrument and verify steps — point at it from here, where the
+  // user is actually choosing how to install. `(#advanced)` renders as a jump
+  // link that opens that accordion and scrolls to it (see noteMd in
+  // SetupCardRenderer), so the user never has to go looking for it.
+  const ADVANCED_HINT =
+    "Prefer Helm, or need to pin versions and customise chart values? Go to [Advanced Installation (Manual Steps)](#advanced).";
+
+  const externalCode = codeFor(scriptInstall("--o2-url={url}"), subs);
+
+  // Cloud has no in-cluster router, so there is nothing to choose between —
+  // the step renders a single command with no toggle at all.
+  const installVariants: RichCardStepVariant[] | undefined = isCloud
+    ? undefined
+    : [
+        {
+          id: "external",
+          label: "External Endpoint",
+          code: externalCode,
+          note: `${INSTALLER_NOTE} ${ADVANCED_HINT}`,
+        },
+        {
+          id: "internal",
+          label: "Internal Endpoint",
+          code: codeFor(
+            scriptInstall(`--internal-endpoint=${IN_CLUSTER_URL}`),
+            subs,
+          ),
+          note: `Use this when OpenObserve runs in this same cluster — traffic never leaves it. ${INSTALLER_NOTE} ${ADVANCED_HINT}`,
+        },
+      ];
+
+  return {
+    provider: {
+      name: "Kubernetes",
+      tagline:
+        "Deploy the OpenObserve collector to your cluster — container logs, Kubernetes events and cluster metrics, plus zero-code traces for your workloads.",
+      logo: getImageURL("images/common/kubernetes.svg"),
+      tone: "#326ce5",
+      runtime: "Cluster",
+      setupTime: "~3 min",
+      metaBadges: ["Logs", "Metrics", "Events", "Traces"],
+    },
+    steps: [
+      {
+        id: "install",
+        // "(Recommended)" is carried in the title, as it was on the page this
+        // replaces — it is the path the overwhelming majority should take, and
+        // the manual Helm sequence below must not read as an equal alternative.
+        title: "Quick Install (Recommended)",
+        description:
+          "Install the OpenObserve collector with a **single command** — just set your cluster name and run. The name tags every record, so you can tell clusters apart once several are reporting.",
+        chip: { kind: "terminal", label: "Terminal" },
+        required: true,
+        completeOn: "copy",
+        inputs: [
+          {
+            id: "cluster",
+            label: "Cluster Name",
+            default: "cluster1",
+            placeholder: "production",
+            help: "Identifies this cluster in your logs, metrics and dashboards.",
+          },
+        ],
+        // Cloud: one command, no toggle. Self-hosted: external / internal.
+        // The note rides on each variant when there are variants, so it only
+        // lives on the step itself in the cloud (no-variant) case.
+        code: isCloud ? externalCode : undefined,
+        note: isCloud ? `${INSTALLER_NOTE} ${ADVANCED_HINT}` : undefined,
+        variants: installVariants,
+      },
+      {
+        id: "instrument",
+        title: "Auto-Instrument Your Applications for Traces",
+        description:
+          "Optional. The OpenTelemetry operator injects instrumentation into annotated workloads, so you get **distributed traces without touching application code or rebuilding images**. Pick a language, then annotate the namespace it runs in.",
+        chip: { kind: "editor", label: "Optional" },
+        completeOn: "copy",
+        variants: instrumentVariants(),
+      },
+      {
+        id: "verify",
+        title: "Verify Data in OpenObserve",
+        description:
+          "Give the collector a few seconds to start, then hit Test — cluster logs land in the `default` stream.",
+        chip: { kind: "traces", label: "Logs" },
+        completeOn: "detect",
+        detectionAnchor: true,
+        pills: [
+          "Container Logs",
+          "Kubernetes Events",
+          "Node Metrics",
+          "Pod Metrics",
+          "Traces",
+        ],
+      },
+    ],
+    // Collector logs carry the k8sattributes processor's resource attributes;
+    // `k8s_namespace_name` is the flattened `k8s.namespace.name`, which is what
+    // distinguishes cluster logs from anything else already on `default`.
+    detect: {
+      streamType: "logs",
+      streamName: "default",
+      filter: "k8s_namespace_name IS NOT NULL",
+    },
+    extras: {
+      // The manual Helm path, kept secondary. Previously six separate copy
+      // boxes with a "wait 2 minutes" instruction between them; the explicit
+      // `kubectl wait` on the webhook makes that deterministic.
+      advanced: {
+        label: "Advanced Installation (Manual Steps)",
+        description: isCloud
+          ? "For custom configurations, or to pin versions and customise the chart values. Run the steps in order."
+          : `For custom configurations, or to pin versions and customise the chart values. Run the steps in order. If OpenObserve runs in this same cluster, replace the exporter endpoints with \`${IN_CLUSTER_URL}\`.`,
+        code: codeFor(helmInstall("{url}"), subs),
+      },
+      fixTitle: "Wait For The cert-manager Webhook",
+      fixBody:
+        "The OpenTelemetry operator fails to start until cert-manager's webhook is serving, and a collector that never starts sends nothing. Check that both are running, then test again:",
+      fixLang: "bash",
+      fixSnippet: `kubectl wait --for=condition=Available --timeout=300s \\
+  -n cert-manager deployment/cert-manager-webhook
+kubectl get pods -n openobserve-collector`,
+      troubleshooting: [
+        {
+          q: "The install fails with an error about the admission webhook",
+          a: "The OpenTelemetry operator's webhook needs cert-manager's webhook to be serving first. Run `kubectl wait --for=condition=Available --timeout=300s -n cert-manager deployment/cert-manager-webhook`, then re-run the install — it is idempotent.",
+        },
+        {
+          q: "The collector pods are running but nothing arrives",
+          a: "Check the collector's own logs with `kubectl logs -n openobserve-collector -l app.kubernetes.io/name=openobserve-collector`. A 401 means the access key is stale — re-copy the command from this page. A connection timeout usually means the cluster cannot reach the endpoint: if OpenObserve runs in this same cluster, switch to an **In-Cluster** variant above.",
+        },
+        {
+          q: "Which endpoint should I use — external or in-cluster?",
+          a: `Use **In-Cluster** only when OpenObserve itself runs in this cluster; traffic then stays inside it and never crosses the network. The URL is \`http://<helm-release>-openobserve-router.<namespace>.svc.cluster.local:5080\` — the default assumes release \`o2\` in namespace \`openobserve\`, so edit it if yours differ. Everyone else uses the external endpoint.`,
+        },
+        {
+          q: "I annotated a namespace but no traces appear",
+          a: "Injection happens at pod creation, so existing pods are unaffected until they restart — run `kubectl rollout restart deployment -n my-namespace`. Confirm the annotation landed with `kubectl get ns my-namespace -o yaml`, and check that the value matches `openobserve-collector/openobserve-<language>`. For Go, `otel-go-auto-target-exe` must be the binary's path **inside** the container.",
+        },
+        {
+          q: "Can I see a working example?",
+          // inlineMd renders **bold** and `code` only, so both references are
+          // real links in the footer (docLinks) rather than text here.
+          a: "Yes — **HOT commerce** is a sample application wired up end to end, and the **OpenTelemetry Operator** docs carry the full annotation reference. Both are linked at the bottom of this page.",
+        },
+      ],
+    },
+    docUrl: "https://github.com/openobserve/openobserve-helm-chart",
+    // Both links the page carried before the migration, restored as anchors.
+    docLinks: [
+      {
+        label: "HOT Commerce Example",
+        url: "https://github.com/openobserve/hotcommerce",
+      },
+      {
+        label: "OpenTelemetry Operator",
+        url: "https://github.com/open-telemetry/opentelemetry-operator",
+      },
+    ],
+  };
+}
diff --git a/web/src/components/ingestion/setupCard/content/linux.ts b/web/src/components/ingestion/setupCard/content/linux.ts
new file mode 100644
index 0000000000..93cc05c2d8
--- /dev/null
+++ b/web/src/components/ingestion/setupCard/content/linux.ts
@@ -0,0 +1,108 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// Linux host agent setup card. The environment choice (generic host vs AWS EC2)
+// was previously two hand-built clickable <div> cards plus a conditional amber
+// callout; it is now a variant toggle, with the EC2 IAM prerequisite riding on
+// the EC2 variant's note where it is actually relevant.
+
+import { getImageURL } from "@/utils/zincutils";
+import type { CardSubstitutions, RichCardContent } from "../types";
+import {
+  AGENTS_REPO,
+  EC2_IAM_NOTE,
+  agentCode,
+  envIcons,
+  hostMetricsDetect,
+  sharedAgentTroubleshooting,
+} from "./osAgent";
+
+const install = (env: "" | "/ec2") =>
+  `curl -O ${AGENTS_REPO}/linux${env}/install.sh \\
+  && chmod +x install.sh \\
+  && sudo ./install.sh {url}/api/{org}/ {token}`;
+
+export default function linuxCard(subs: CardSubstitutions): RichCardContent {
+  const icon = envIcons();
+  return {
+    provider: {
+      name: "Linux",
+      tagline:
+        "Install the OpenObserve agent on any Linux host — system and journald logs plus CPU, memory, disk and network metrics.",
+      logo: getImageURL("images/common/linux.svg"),
+      tone: "#f5b53d",
+      runtime: "Host",
+      setupTime: "~1 min",
+      metaBadges: ["Logs", "Metrics"],
+    },
+    steps: [
+      {
+        id: "install",
+        title: "Install the Agent",
+        description:
+          "Run this on the host as **root** (or with `sudo`). Pick **AWS EC2** to additionally pick up instance metadata and use the instance's Name tag as the host identifier.",
+        chip: { kind: "terminal", label: "Terminal" },
+        required: true,
+        completeOn: "copy",
+        variants: [
+          {
+            id: "generic",
+            label: "Generic Linux",
+            icon: icon.linux,
+            code: agentCode(install(""), subs, "bash"),
+            note: "Any Linux server or VM.",
+          },
+          {
+            id: "ec2",
+            label: "AWS EC2",
+            icon: icon.ec2,
+            code: agentCode(install("/ec2"), subs, "bash"),
+            note: EC2_IAM_NOTE,
+          },
+        ],
+      },
+      {
+        id: "verify",
+        title: "Verify Data in OpenObserve",
+        description:
+          "The agent starts on install. Give it a few seconds, then hit Test — host metrics arrive as `system_*` streams.",
+        chip: { kind: "traces", label: "Metrics" },
+        completeOn: "detect",
+        detectionAnchor: true,
+        pills: [
+          "System Logs",
+          "journald",
+          "CPU",
+          "Memory",
+          "Disk",
+          "Network",
+        ],
+      },
+    ],
+    detect: hostMetricsDetect,
+    extras: {
+      fixTitle: "Check The Agent Service",
+      fixBody:
+        "The installer starts the agent as a systemd service. If nothing arrives, confirm it is running and read its logs for an auth or connectivity error:",
+      fixLang: "bash",
+      fixSnippet: `sudo systemctl status openobserve-agent
+sudo journalctl -u openobserve-agent -n 50 --no-pager`,
+      troubleshooting: sharedAgentTroubleshooting(
+        "`sudo systemctl status openobserve-agent`",
+      ),
+    },
+    docUrl: "https://github.com/openobserve/agents",
+  };
+}
diff --git a/web/src/components/ingestion/setupCard/content/osAgent.ts b/web/src/components/ingestion/setupCard/content/osAgent.ts
new file mode 100644
index 0000000000..29b282a458
--- /dev/null
+++ b/web/src/components/ingestion/setupCard/content/osAgent.ts
@@ -0,0 +1,90 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// Shared pieces for the host-agent cards (Linux, Windows). Both install the same
+// OpenObserve agent from the openobserve/agents repo and differ only by shell,
+// script path and what the agent collects — so the environment choice
+// (generic host vs AWS EC2), the EC2 IAM prerequisite and the detection config
+// live here rather than being duplicated in both cards.
+
+import { getImageURL } from "@/utils/zincutils";
+import type { CardSubstitutions, RichCardDetect, RichCardExtras } from "../types";
+import { applySubs, applySubsMasked } from "../subs";
+
+/** Base of the agent install scripts, e.g. `${AGENTS_REPO}/linux/install.sh`. */
+export const AGENTS_REPO =
+  "https://raw.githubusercontent.com/openobserve/agents/main";
+
+/** Environment the agent is installed onto — drives the script path. */
+export type AgentEnv = "generic" | "ec2";
+
+/**
+ * The EC2 variants read the instance's Name tag and use it as the host
+ * identifier, which needs an instance role — without it the agent installs but
+ * every host shows up under its opaque instance id instead.
+ */
+export const EC2_IAM_NOTE =
+  "Requires an IAM role on the instance with ec2:DescribeTags and ec2:DescribeInstances, so the agent can read the Name tag and use it as the host identifier.";
+
+/** Icon shown on the generic/EC2 toggle. */
+export const envIcons = () => ({
+  ec2: getImageURL("images/ingestion/aws.svg"),
+  linux: getImageURL("images/common/linux.svg"),
+  windows: getImageURL("images/common/windows.svg"),
+});
+
+/** Build a code block whose `[BASIC_PASSCODE]`-equivalent token is masked. */
+export function agentCode(template: string, subs: CardSubstitutions, lang: string) {
+  return {
+    lang,
+    raw: applySubs(template, subs),
+    masked: applySubsMasked(template, subs),
+  };
+}
+
+/**
+ * Host metrics land as one stream per metric (`system_cpu_time`, …), so — like
+ * the database cards — detection is keyword/existence based rather than a COUNT
+ * over one stream.
+ *
+ * TODO(detect): confirm the agent's emitted metric prefix on the ingest side;
+ * this assumes the OTel hostmetrics receiver's `system.*` naming.
+ */
+export const hostMetricsDetect: RichCardDetect = {
+  streamType: "metrics",
+  match: "keyword",
+  streamName: "system",
+  filter: "",
+};
+
+/** Troubleshooting rows common to both host agents. */
+export function sharedAgentTroubleshooting(
+  serviceHint: string,
+): NonNullable<RichCardExtras["troubleshooting"]> {
+  return [
+    {
+      q: "The install script runs but no data arrives",
+      a: `Check the agent is running with ${serviceHint}. A 401 in its logs means the ingestion token is stale — re-copy the command from this page, which always carries this organization's current token.`,
+    },
+    {
+      q: "Hosts show up under an instance id instead of a name",
+      a: `That is the EC2 variant without its IAM role. ${EC2_IAM_NOTE} Attach the role, then restart the agent.`,
+    },
+    {
+      q: "The endpoint is unreachable from the host",
+      a: "The agent needs outbound access to this OpenObserve endpoint. Confirm with `curl -v` from the host itself — a proxy or egress firewall is the usual cause.",
+    },
+  ];
+}
diff --git a/web/src/components/ingestion/setupCard/content/otlpTraces.ts b/web/src/components/ingestion/setupCard/content/otlpTraces.ts
new file mode 100644
index 0000000000..91ff786fd8
--- /dev/null
+++ b/web/src/components/ingestion/setupCard/content/otlpTraces.ts
@@ -0,0 +1,187 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// OTLP traces setup card — the generic "point any OpenTelemetry exporter here"
+// page. There is nothing to install: the user already has an SDK or collector,
+// and needs the endpoint, the auth header and the stream name.
+//
+// The stream is a `streamInput`, so the name flows into the exporter config AND
+// the live detection — they can never drift apart.
+
+import config from "@/aws-exports";
+import { getImageURL } from "@/utils/zincutils";
+import type {
+  CardSubstitutions,
+  RichCardContent,
+  RichCardStepVariant,
+} from "../types";
+import { applySubs, applySubsMasked } from "../subs";
+
+// Collector exporter config. {stream} is filled live by the renderer.
+const HTTP_YAML = `exporters:
+  otlphttp/openobserve:
+    endpoint: {url}/api/{org}
+    headers:
+      Authorization: Basic {token}
+      stream-name: {stream}
+
+service:
+  pipelines:
+    traces:
+      exporters: [otlphttp/openobserve]`;
+
+const grpcYaml = (host: string, insecure: boolean) => `exporters:
+  otlp/openobserve:
+    endpoint: ${host}:5081
+    headers:
+      Authorization: "Basic {token}"
+      organization: {org}
+      stream-name: {stream}
+    tls:
+      insecure: ${insecure}
+
+service:
+  pipelines:
+    traces:
+      exporters: [otlp/openobserve]`;
+
+// Env vars for an SDK pointed straight at OpenObserve (no collector in between).
+const SDK_ENV = `export OTEL_EXPORTER_OTLP_ENDPOINT="{url}/api/{org}"
+export OTEL_EXPORTER_OTLP_HEADERS="Authorization=Basic {token},stream-name={stream}"
+export OTEL_EXPORTER_OTLP_PROTOCOL="http/protobuf"
+export OTEL_SERVICE_NAME="my-service"`;
+
+export default function otlpTracesCard(
+  subs: CardSubstitutions,
+): RichCardContent {
+  const isCloud = config.isCloud === "true";
+  // The gRPC endpoint is a self-hosted port; cloud terminates HTTP only.
+  const host = subs.url.replace(/^https?:\/\//, "").replace(/\/$/, "");
+  const insecure = !subs.url.startsWith("https://");
+
+  const code = (tpl: string, lang = "yaml") => ({
+    lang,
+    raw: applySubs(tpl, subs),
+    masked: applySubsMasked(tpl, subs),
+  });
+
+  const variants: RichCardStepVariant[] = [
+    {
+      id: "http",
+      label: "Collector · OTLP HTTP",
+      icon: getImageURL("images/ingestion/otlp.svg"),
+      code: { ...code(HTTP_YAML), filename: "config.yaml" },
+      note: "The default for the OpenTelemetry Collector — works everywhere, including behind proxies and load balancers.",
+    },
+    {
+      id: "sdk",
+      label: "SDK (No Collector)",
+      icon: getImageURL("images/rum/events/terminal.png"),
+      code: code(SDK_ENV, "bash"),
+      note: "Standard OTEL_* environment variables — every OpenTelemetry SDK reads these, so no code change is needed.",
+    },
+  ];
+
+  // gRPC is self-hosted only.
+  if (!isCloud) {
+    variants.splice(1, 0, {
+      id: "grpc",
+      label: "Collector · OTLP gRPC",
+      icon: getImageURL("images/ingestion/otlp.svg"),
+      code: { ...code(grpcYaml(host, insecure)), filename: "config.yaml" },
+      note: "Lower overhead than HTTP for high span volumes. Port 5081 must be reachable from the collector.",
+    });
+  }
+
+  return {
+    provider: {
+      name: "Traces (OpenTelemetry)",
+      tagline:
+        "Point any OpenTelemetry exporter at OpenObserve — collector or SDK, HTTP or gRPC. Your endpoint and token are filled in below.",
+      logo: getImageURL("images/ingestion/otlp.svg"),
+      tone: "#f5a800",
+      runtime: "Any",
+      setupTime: "~2 min",
+      metaBadges: ["Traces"],
+    },
+    steps: [
+      {
+        id: "configure",
+        title: "Point Your Exporter at OpenObserve",
+        description:
+          "Add this to your collector config, or set the environment variables if your app exports directly. Everything is already filled in for this organization.",
+        chip: { kind: "editor", label: "Editor" },
+        required: true,
+        completeOn: "copy",
+        variants,
+      },
+      {
+        id: "verify",
+        title: "Verify Data in OpenObserve",
+        description:
+          "Restart the collector (or your app), exercise a request that produces a span, then hit Test.",
+        chip: { kind: "traces", label: "Traces" },
+        completeOn: "detect",
+        detectionAnchor: true,
+        pills: ["Spans", "Service Map", "Latency", "Errors"],
+      },
+    ],
+    streamInput: {
+      label: "Traces Stream Name",
+      default: "default",
+      placeholder: "default",
+      help: "Written into the config above as `stream-name`, and watched by the check below.",
+    },
+    // Every span carries a trace id, so any row on the target stream proves the
+    // exporter is wired up correctly.
+    detect: {
+      streamType: "traces",
+      streamName: "default",
+      filter: "trace_id IS NOT NULL",
+    },
+    extras: {
+      fixTitle: "Check The Exporter Is Actually Wired Into The Pipeline",
+      fixBody:
+        "Defining an exporter is not enough — it has to be listed in a pipeline. This is the single most common reason a correct-looking config sends nothing:",
+      fixLang: "yaml",
+      fixSnippet: `service:
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlphttp/openobserve]   # <- must be listed here`,
+      troubleshooting: [
+        {
+          q: "The collector logs 401 or 403",
+          a: "The `Authorization` header must be `Basic <token>` using this organization's ingestion token — the value above is already correct. If it was rotated, re-copy from this page.",
+        },
+        {
+          q: "Spans arrive but land in the wrong stream",
+          a: "The `stream-name` header decides the stream. Set it to the same name as the field above, otherwise the check below watches a stream nothing is written to.",
+        },
+        {
+          q: "gRPC connection fails with a TLS error",
+          a: `The \`tls.insecure\` flag must match the endpoint's scheme — it is set to \`${insecure}\` above based on this deployment's URL. A plain-HTTP endpoint needs \`insecure: true\`; an HTTPS one needs \`false\`.`,
+        },
+        {
+          q: "Should I use HTTP or gRPC?",
+          a: "HTTP is the safe default and traverses proxies and load balancers cleanly. gRPC has lower overhead at high span volume but needs port 5081 reachable end to end.",
+        },
+      ],
+    },
+    docUrl:
+      "https://openobserve.ai/docs/user-guide/data-sources-ingestion/traces/opentelemetry/",
+  };
+}
diff --git a/web/src/components/ingestion/setupCard/content/windows.ts b/web/src/components/ingestion/setupCard/content/windows.ts
new file mode 100644
index 0000000000..44b9026e42
--- /dev/null
+++ b/web/src/components/ingestion/setupCard/content/windows.ts
@@ -0,0 +1,111 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// Windows host agent setup card — the PowerShell twin of ./linux.ts. Shared
+// scaffolding (environment toggle, EC2 IAM prerequisite, host-metrics detection)
+// comes from ./osAgent; this file holds the PowerShell command and the
+// Windows-specific collection list.
+
+import { getImageURL } from "@/utils/zincutils";
+import type { CardSubstitutions, RichCardContent } from "../types";
+import {
+  AGENTS_REPO,
+  EC2_IAM_NOTE,
+  agentCode,
+  envIcons,
+  hostMetricsDetect,
+  sharedAgentTroubleshooting,
+} from "./osAgent";
+
+const install = (env: "" | "/ec2") =>
+  `Invoke-WebRequest -Uri ${AGENTS_REPO}/windows${env}/install.ps1 -OutFile install.ps1
+.\\install.ps1 -URL {url}/api/{org}/ -AUTH_KEY {token}`;
+
+export default function windowsCard(subs: CardSubstitutions): RichCardContent {
+  const icon = envIcons();
+  return {
+    provider: {
+      name: "Windows",
+      tagline:
+        "Install the OpenObserve agent on any Windows host — Event Log, performance counters and host metrics.",
+      logo: getImageURL("images/common/windows.svg"),
+      tone: "#0078d4",
+      runtime: "Host",
+      setupTime: "~1 min",
+      metaBadges: ["Logs", "Metrics"],
+    },
+    steps: [
+      {
+        id: "install",
+        title: "Install the Agent",
+        description:
+          "Run this in **PowerShell as Administrator**. Pick **AWS EC2** to additionally pick up instance metadata and use the instance's Name tag as the host identifier.",
+        chip: { kind: "terminal", label: "PowerShell" },
+        required: true,
+        completeOn: "copy",
+        variants: [
+          {
+            id: "generic",
+            label: "Generic Windows",
+            icon: icon.windows,
+            code: agentCode(install(""), subs, "powershell"),
+            note: "Any Windows server or VM.",
+          },
+          {
+            id: "ec2",
+            label: "AWS EC2",
+            icon: icon.ec2,
+            code: agentCode(install("/ec2"), subs, "powershell"),
+            note: EC2_IAM_NOTE,
+          },
+        ],
+      },
+      {
+        id: "verify",
+        title: "Verify Data in OpenObserve",
+        description:
+          "The agent starts on install. Give it a few seconds, then hit Test — host metrics arrive as `system_*` streams.",
+        chip: { kind: "traces", label: "Metrics" },
+        completeOn: "detect",
+        detectionAnchor: true,
+        pills: [
+          "Application",
+          "Security",
+          "Setup",
+          "System",
+          "Performance Counters",
+          "Host Metrics",
+        ],
+      },
+    ],
+    detect: hostMetricsDetect,
+    extras: {
+      fixTitle: "Check The Agent Service",
+      fixBody:
+        "The installer registers the agent as a Windows service. If nothing arrives, confirm it is running and read the most recent entries from its log:",
+      fixLang: "powershell",
+      fixSnippet: `Get-Service -Name openobserve-agent
+Get-Content -Tail 50 "$env:ProgramData\\openobserve-agent\\agent.log"`,
+      troubleshooting: [
+        {
+          q: "The script fails to run at all",
+          a: "PowerShell blocks unsigned scripts by default. Run the console **as Administrator** and, if needed, allow the script for that session with `Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass`.",
+        },
+        ...sharedAgentTroubleshooting("`Get-Service -Name openobserve-agent`"),
+      ],
+    },
+    docUrl: "https://github.com/openobserve/agents",
+  };
+}
diff --git a/web/src/components/ingestion/setupCard/registry.ts b/web/src/components/ingestion/setupCard/registry.ts
index 3c56cd1908..8ed69b00d3 100644
--- a/web/src/components/ingestion/setupCard/registry.ts
+++ b/web/src/components/ingestion/setupCard/registry.ts
@@ -35,6 +35,11 @@ import snowflake from "./content/snowflake";
 import cassandra from "./content/cassandra";
 import databricks from "./content/databricks";
 import dynamodb from "./content/dynamodb";
+import kubernetes from "./content/kubernetes";
+import linux from "./content/linux";
+import windows from "./content/windows";
+import gcp from "./content/gcp";
+import otlpTraces from "./content/otlpTraces";
 
 /** Given per-org substitutions, returns a data source's setup-card content. */
 export type DataSourceCardBuilder = (
@@ -54,6 +59,11 @@ const registry: Record<string, DataSourceCardBuilder> = {
   cassandra,
   databricks,
   dynamoDB: dynamodb,
+  kubernetes,
+  linux,
+  windows,
+  gcp,
+  otlpTraces,
 };
 
 /** Whether a data source slug has an in-repo rich setup card. */
diff --git a/web/src/components/ingestion/setupCard/types.ts b/web/src/components/ingestion/setupCard/types.ts
index 4df7dd7e69..495436a41e 100644
--- a/web/src/components/ingestion/setupCard/types.ts
+++ b/web/src/components/ingestion/setupCard/types.ts
@@ -35,8 +35,13 @@ export interface CardSubstitutions {
 /** Context of a step → drives both the title chip and the code-block chrome. */
 export type StepChipKind = "terminal" | "editor" | "run" | "traces";
 
-/** How a step is marked complete: the user copies its code, or a span lands. */
-export type StepCompleteOn = "copy" | "detect";
+/**
+ * How a step is marked complete: the user copies its code, a span lands, or the
+ * user triggers the step's action button (see RichCardStepAction — used by the
+ * cloud-provider cards, whose steps launch a console wizard rather than
+ * producing a command to copy).
+ */
+export type StepCompleteOn = "copy" | "detect" | "action";
 
 export interface RichCardChip {
   kind: StepChipKind;
@@ -78,6 +83,24 @@ export interface RichCardStepVariant {
   note?: string;
 }
 
+/**
+ * A button that performs the step instead of handing over a command — e.g.
+ * "Launch CloudFormation Stack", which opens the AWS console. The renderer is
+ * presentational, so it only emits `step-action` with this id; the hosting page
+ * owns the behaviour.
+ */
+export interface RichCardStepAction {
+  /** Emitted with the `step-action` event so the page can dispatch. */
+  id: string;
+  label: string;
+  /** OIcon registry name rendered before the label. */
+  icon?: string;
+  /** Renders as a secondary button (default is primary). */
+  variant?: "primary" | "secondary";
+  /** Greys the button out — e.g. nothing selected yet. */
+  disabled?: boolean;
+}
+
 export interface RichCardStep {
   /** Stable id (also used as the scroll target for the next-step auto-advance). */
   id: string;
@@ -113,6 +136,11 @@ export interface RichCardStep {
   note?: string;
   /** Monospace pills rendered after the description (e.g. captured attributes). */
   pills?: string[];
+  /**
+   * Button that performs this step (cloud-console flows). Rendered after the
+   * step's own content and any `#step-<id>` slot.
+   */
+  action?: RichCardStepAction;
   completeOn: StepCompleteOn;
   /** Marks the step as required (renders a "Required" emphasis on its chip). */
   required?: boolean;
@@ -157,6 +185,19 @@ export interface RichCardExtras {
   fixBody?: string;
   /** Highlight language for the fix snippet (e.g. "bash"). Default "python". */
   fixLang?: string;
+  /**
+   * An alternative, manual path to the same result — e.g. the raw Helm sequence
+   * behind Kubernetes' one-line installer. Rendered as a collapsed section below
+   * the steps, so the primary path stays the obvious default. Its code goes
+   * through the same live substitution as the steps ({stream} and step inputs).
+   */
+  advanced?: {
+    /** Accordion label, e.g. "Advanced Installation (Manual Steps)". */
+    label: string;
+    /** Optional paragraph above the code (inline markdown: **bold**, `code`). */
+    description?: string;
+    code: RichCardCode;
+  };
   troubleshooting?: { q: string; a: string }[];
 }
 
@@ -224,7 +265,15 @@ export interface RichCardContent {
   /** When set, the card shows a stream-name input (see RichCardStreamInput). */
   streamInput?: RichCardStreamInput;
   extras?: RichCardExtras;
+  /** Primary "Full integration docs" link in the footer. */
   docUrl?: string;
+  /**
+   * Additional reference links rendered as real anchors beside `docUrl` — for
+   * sources that legitimately have more than one guide (e.g. GCP's Pub/Sub and
+   * Google Workspace pages). Without this they end up as unclickable text
+   * inside a collapsed accordion, which is how they get lost.
+   */
+  docLinks?: { label: string; url: string }[];
   slackUrl?: string;
 }
 
diff --git a/web/src/components/ingestion/traces/OpenTelemetry.spec.ts b/web/src/components/ingestion/traces/OpenTelemetry.spec.ts
index 390f8353f2..ccc45a7663 100644
--- a/web/src/components/ingestion/traces/OpenTelemetry.spec.ts
+++ b/web/src/components/ingestion/traces/OpenTelemetry.spec.ts
@@ -13,540 +13,141 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { flushPromises, mount } from "@vue/test-utils";
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import OpenTelemetry from "@/components/ingestion/traces/OpenTelemetry.vue";
-import { nextTick } from "vue";
-import store from "@/test/unit/helpers/store";
-import i18n from "@/locales";
+// This component backs TWO routes (Recommended > Traces and Custom > Traces >
+// OpenTelemetry), so the card it renders is shared by both.
 
-// Mock services and utilities
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import { createStore } from "vuex";
+import { createI18n } from "vue-i18n";
+import { ref } from "vue";
+import OpenTelemetry from "./OpenTelemetry.vue";
+import { getDataSourceCard } from "@/components/ingestion/setupCard/registry";
+
+const mockConfig = { isCloud: "false" };
 vi.mock("@/aws-exports", () => ({
-  default: {
-    isCloud: "false",
-    enableAnalytics: "true"
-  }
+  get default() {
+    return mockConfig;
+  },
 }));
 
-vi.mock("@/utils/zincutils", async (importOriginal) => {
-  const actual: any = await importOriginal();
-  return {
-    ...actual,
-    getImageURL: vi.fn((path: string) => `/mocked/path/${path}`),
-    getIngestionURL: vi.fn(() => "http://localhost:5080"),
-    getEndPoint: vi.fn((url: string) => ({
-      url: "http://localhost:5080",
-      host: "localhost:5080", 
-      port: "5080",
-      protocol: "http",
-      tls: false
-    }))
-  };
+const mockEndpoint = ref({
+  url: "https://test.openobserve.ai",
+  host: "test.openobserve.ai",
+  port: 443,
+  protocol: "https",
+  tls: true,
 });
 
+vi.mock("@/composables/useIngestion", () => ({
+  default: vi.fn(() => ({ endpoint: mockEndpoint })),
+}));
 
-describe("OpenTelemetry Component", () => {
-  let wrapper: any = null;
+vi.mock("@/components/ingestion/setupCard/SetupCardRenderer.vue", () => ({
+  default: {
+    name: "SetupCardRenderer",
+    props: ["content", "subs", "logoUrl", "logoUrlDark"],
+    template: '<div data-test="rich-card-stub" />',
+  },
+}));
 
-  const mockProps = {
-    currOrgIdentifier: "test-org",
-    currUserEmail: "test@example.com"
-  };
+const mockStore = createStore({
+  state: {
+    selectedOrganization: { identifier: "test-org", name: "Test Organization" },
+    userInfo: { email: "test@example.com" },
+    organizationData: { organizationPasscode: "test-passcode" },
+    theme: "light",
+  },
+});
+const mockI18n = createI18n({ locale: "en", messages: { en: {} } });
 
+const SUBS = {
+  url: "https://test.openobserve.ai",
+  org: "test-org",
+  token: "dGVzdEB0b2tlbg==",
+};
+
+const buildCard = async () =>
+  (await import("@/components/ingestion/setupCard/content/otlpTraces")).default(
+    SUBS,
+  );
+
+describe("otlpTracesCard builder", () => {
   beforeEach(() => {
-    wrapper = mount(OpenTelemetry, {
-      props: mockProps,
-      global: {
-        plugins: [store, i18n],
-        stubs: {
-          "CopyContent": true
-        }
-      }
-    });
-
-    // Reset mocks
-    vi.clearAllMocks();
+    mockConfig.isCloud = "false";
   });
 
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
+  it("builds the OTLP card metadata and step flow", async () => {
+    const card = await buildCard();
+    expect(card.provider.metaBadges).toEqual(["Traces"]);
+    expect(card.steps.map((s) => s.id)).toEqual(["configure", "verify"]);
+    expect(card.detect).toMatchObject({
+      streamType: "traces",
+      filter: "trace_id IS NOT NULL",
+    });
+  });
+
+  it("offers HTTP, gRPC and SDK transports when self-hosted", async () => {
+    expect((await buildCard()).steps[0].variants?.map((v) => v.id)).toEqual([
+      "http",
+      "grpc",
+      "sdk",
+    ]);
+  });
+
+  it("drops gRPC on cloud, which terminates HTTP only", async () => {
+    mockConfig.isCloud = "true";
+    vi.resetModules();
+    expect((await buildCard()).steps[0].variants?.map((v) => v.id)).toEqual([
+      "http",
+      "sdk",
+    ]);
+  });
+
+  it("substitutes endpoint, org and token into every transport", async () => {
+    for (const v of (await buildCard()).steps[0].variants!) {
+      expect(v.code.raw).toContain(SUBS.org);
+      expect(v.code.raw).toContain(SUBS.token);
+      expect(v.code.raw).not.toContain("[BASIC_PASSCODE]");
+      expect(v.code.masked).not.toContain(SUBS.token);
     }
   });
 
-  // Component Initialization Tests
-  describe("Component Initialization", () => {
-    it("should mount OpenTelemetry component", () => {
-      expect(wrapper).toBeTruthy();
-    });
-
-    it("should initialize with correct component name", () => {
-      expect(wrapper.vm.$options.name).toBe("traces-otlp");
-    });
-
-    it("should initialize with correct props", () => {
-      expect(wrapper.exists()).toBe(true);
-      expect(wrapper.exists()).toBe(true);
-    });
-
-    it("should initialize store instance", () => {
-      expect(wrapper.vm.store).toBeTruthy();
-      expect(wrapper.vm.store.state).toBeTruthy();
-    });
-
-    it("should initialize config object", () => {
-      expect(wrapper.vm.config).toBeTruthy();
-      expect(typeof wrapper.vm.config).toBe('object');
-    });
-
-    it("should initialize getImageURL function", () => {
-      expect(wrapper.vm.getImageURL).toBeTruthy();
-      expect(typeof wrapper.vm.getImageURL).toBe('function');
-    });
-
-    it("should have CopyContent component registered", () => {
-      expect(wrapper.vm.$options.components.CopyContent).toBeTruthy();
-    });
+  it("keeps the stream name in lockstep between config and detection", async () => {
+    const card = await buildCard();
+    expect(card.streamInput?.default).toBe("default");
+    // Every transport writes the stream the check below watches.
+    for (const v of card.steps[0].variants!) {
+      expect(v.code.raw).toContain("{stream}");
+    }
   });
 
-  // Endpoint Configuration Tests
-  describe("Endpoint Configuration", () => {
-    it("should initialize endpoint object with correct structure", () => {
-      expect(wrapper.vm.endpoint).toBeTruthy();
-      expect(wrapper.vm.endpoint).toHaveProperty('url');
-      expect(wrapper.vm.endpoint).toHaveProperty('host');
-      expect(wrapper.vm.endpoint).toHaveProperty('port');
-      expect(wrapper.vm.endpoint).toHaveProperty('protocol');
-      expect(wrapper.vm.endpoint).toHaveProperty('tls');
-    });
+  it("derives the gRPC tls.insecure flag from the endpoint scheme", async () => {
+    const grpc = (await buildCard()).steps[0].variants!.find(
+      (v) => v.id === "grpc",
+    )!;
+    // HTTPS endpoint → insecure must be false, else the handshake fails.
+    expect(grpc.code.raw).toContain("insecure: false");
+    expect(grpc.code.raw).toContain("test.openobserve.ai:5081");
+  });
+});
 
-    it("should set correct endpoint URL", () => {
-      expect(wrapper.vm.endpoint.url).toBe("http://localhost:5080");
-    });
+describe("OpenTelemetry.vue", () => {
+  let wrapper: VueWrapper<any>;
 
-    it("should set correct endpoint host", () => {
-      expect(wrapper.vm.endpoint.host).toBe("localhost:5080");
-    });
-
-    it("should set correct endpoint port", () => {
-      expect(wrapper.vm.endpoint.port).toBe("5080");
-    });
-
-    it("should set correct endpoint protocol", () => {
-      expect(wrapper.vm.endpoint.protocol).toBe("http");
-    });
-
-    it("should set correct endpoint TLS setting", () => {
-      expect(wrapper.vm.endpoint.tls).toBe(false);
-    });
-
-    it("should call getIngestionURL utility function", () => {
-      // Test that the ingestionURL value is set correctly
-      expect(wrapper.vm.ingestionURL).toBe("http://localhost:5080");
-    });
-
-    it("should call getEndPoint utility function", () => {
-      // Test that the endpoint is properly configured 
-      expect(wrapper.vm.endpoint.url).toBe("http://localhost:5080");
-      expect(wrapper.vm.endpoint.host).toBe("localhost:5080");
-    });
-
-    it("should handle ingestionURL properly", () => {
-      expect(wrapper.vm.ingestionURL).toBe("http://localhost:5080");
-    });
+  afterEach(() => {
+    if (wrapper) wrapper.unmount();
   });
 
-  // HTTP Traces Content Tests
-  describe("HTTP Traces Content Generation", () => {
-    it("should generate correct HTTP traces URL", () => {
-      const expectedURL = `http://localhost:5080/api/default`;
-      expect(wrapper.vm.copyHTTPTracesContentURL).toBe(expectedURL);
-    });
-
-    it("should generate correct HTTP traces passcode", () => {
-      const expectedPasscode = `Basic [BASIC_PASSCODE]`;
-      expect(wrapper.vm.copyHTTPTracesContentPasscode).toBe(expectedPasscode);
-    });
-
-    it("should use organization identifier from store in URL", () => {
-      expect(wrapper.vm.copyHTTPTracesContentURL).toContain("default");
-    });
-
-    it("should handle different organization identifiers", () => {
-      // Test with different store state
-      const testWrapper = mount(OpenTelemetry, {
-        props: mockProps,
-        global: {
-          plugins: [store, i18n],
-          stubs: {
-            "CopyContent": true
-          }
-        }
-      });
-      
-      // The URL should contain the organization identifier from the store
-      expect(testWrapper.vm.copyHTTPTracesContentURL).toMatch(/\/api\/[^\/]+$/);
-      testWrapper.unmount();
-    });
-
-    it("should construct HTTP URL with correct format", () => {
-      const url = wrapper.vm.copyHTTPTracesContentURL;
-      expect(url).toMatch(/^https?:\/\/.*\/api\/.*$/);
-    });
-
-    it("should use Basic authentication format", () => {
-      expect(wrapper.vm.copyHTTPTracesContentPasscode).toMatch(/^Basic \[BASIC_PASSCODE\]$/);
+  it("renders the shared setup card for the otlpTraces slug", () => {
+    expect(getDataSourceCard("otlpTraces", SUBS)?.provider.name).toContain(
+      "Traces",
+    );
+    wrapper = mount(OpenTelemetry, {
+      global: { plugins: [mockStore, mockI18n] },
     });
+    expect(wrapper.findComponent({ name: "SetupCardRenderer" }).exists()).toBe(
+      true,
+    );
   });
-
-  // gRPC Content Tests
-  describe("gRPC Traces Content Generation", () => {
-    it("should generate correct gRPC content structure", () => {
-      const content = wrapper.vm.copyGRPCTracesContent;
-      expect(content).toContain("endpoint:");
-      expect(content).toContain("headers:");
-      expect(content).toContain("Authorization:");
-      expect(content).toContain("organization:");
-      expect(content).toContain("stream-name:");
-      expect(content).toContain("tls:");
-      expect(content).toContain("insecure:");
-    });
-
-    it("should include correct endpoint host in gRPC content", () => {
-      expect(wrapper.vm.copyGRPCTracesContent).toContain("endpoint: localhost:5080");
-    });
-
-    it("should include correct authorization in gRPC content", () => {
-      expect(wrapper.vm.copyGRPCTracesContent).toContain('Authorization: "Basic [BASIC_PASSCODE]"');
-    });
-
-    it("should include correct organization in gRPC content", () => {
-      expect(wrapper.vm.copyGRPCTracesContent).toContain("organization: default");
-    });
-
-    it("should include default stream name in gRPC content", () => {
-      expect(wrapper.vm.copyGRPCTracesContent).toContain("stream-name: default");
-    });
-
-    it("should set insecure to true when protocol is http", () => {
-      expect(wrapper.vm.copyGRPCTracesContent).toContain("insecure: true");
-    });
-
-    it("should handle HTTPS protocol correctly", () => {
-      // Create a wrapper with HTTPS endpoint
-      const httpsWrapper = mount(OpenTelemetry, {
-        props: mockProps,
-        global: {
-          plugins: [store, i18n],
-          stubs: {
-            "CopyContent": true
-          }
-        }
-      });
-      
-      // Mock the endpoint to be HTTPS
-      httpsWrapper.vm.endpoint.protocol = "https";
-      
-      // Regenerate the gRPC content
-      const httpsGRPCContent = `endpoint: ${httpsWrapper.vm.endpoint.host}
-headers: 
-  Authorization: "Basic [BASIC_PASSCODE]"
-  organization: ${httpsWrapper.vm.store.state.selectedOrganization.identifier}
-  stream-name: default
-tls:
-  insecure: ${httpsWrapper.vm.endpoint.protocol == "https" ? false : true}`;
-      
-      expect(httpsGRPCContent).toContain("insecure: false");
-      httpsWrapper.unmount();
-    });
-
-    it("should generate multi-line gRPC content", () => {
-      const lines = wrapper.vm.copyGRPCTracesContent.split('\n');
-      expect(lines.length).toBeGreaterThan(5);
-    });
-
-    it("should use organization identifier from store in gRPC content", () => {
-      expect(wrapper.vm.copyGRPCTracesContent).toContain("organization: default");
-    });
-  });
-
-  // Template Rendering Tests
-  describe("Template Rendering", () => {
-    it("should render OTLP HTTP title", () => {
-      const httpTitle = wrapper.find('[data-test="vector-title-text"]');
-      expect(httpTitle.exists()).toBe(true);
-      expect(httpTitle.text()).toContain("OTLP HTTP");
-    });
-
-    it("should render two CopyContent components for HTTP", () => {
-      // Since CopyContent is stubbed, test that the component has the structure
-      expect(wrapper.html()).toBeTruthy();
-      // Test that the component has the expected content values
-      expect(wrapper.vm.copyHTTPTracesContentURL).toBeTruthy();
-      expect(wrapper.vm.copyHTTPTracesContentPasscode).toBeTruthy();
-    });
-
-    it("should pass correct HTTP URL to first CopyContent", () => {
-      const copyComponents = wrapper.findAll('CopyContent-stub');
-      if (copyComponents.length > 0) {
-        const firstCopy = copyComponents[0];
-        expect(firstCopy.attributes('content')).toBe(wrapper.vm.copyHTTPTracesContentURL);
-      } else {
-        // Test that content is generated correctly even if component is stubbed
-        expect(wrapper.vm.copyHTTPTracesContentURL).toBeTruthy();
-      }
-    });
-
-    it("should pass correct HTTP passcode to second CopyContent", () => {
-      const copyComponents = wrapper.findAll('CopyContent-stub');
-      if (copyComponents.length > 1) {
-        const secondCopy = copyComponents[1];
-        expect(secondCopy.attributes('content')).toBe(wrapper.vm.copyHTTPTracesContentPasscode);
-      } else {
-        // Test that content is generated correctly even if component is stubbed
-        expect(wrapper.vm.copyHTTPTracesContentPasscode).toBeTruthy();
-      }
-    });
-
-    it("should render OTLP gRPC section", () => {
-      const titleElements = wrapper.findAll('[data-test="vector-title-text"]');
-      expect(titleElements.length).toBe(2);
-      expect(titleElements[1].text()).toContain("OTLP gRPC");
-    });
-
-    it("should pass gRPC content to third CopyContent", () => {
-      const copyComponents = wrapper.findAll('CopyContent-stub');
-      if (copyComponents.length > 2) {
-        const thirdCopy = copyComponents[2];
-        expect(thirdCopy.attributes('content')).toBe(wrapper.vm.copyGRPCTracesContent);
-      } else {
-        // Test that content is generated correctly even if component is stubbed
-        expect(wrapper.vm.copyGRPCTracesContent).toBeTruthy();
-      }
-    });
-
-    it("should render proper display content for HTTP endpoint", () => {
-      const copyComponents = wrapper.findAll('CopyContent-stub');
-      if (copyComponents.length > 0) {
-        const firstCopy = copyComponents[0];
-        expect(firstCopy.attributes('displaycontent')).toContain('HTTP Endpoint:');
-        expect(firstCopy.attributes('displaycontent')).toContain(wrapper.vm.copyHTTPTracesContentURL);
-      } else {
-        // Test that content is generated correctly
-        expect(wrapper.vm.copyHTTPTracesContentURL).toContain('http');
-      }
-    });
-
-    it("should render proper display content for authorization", () => {
-      const copyComponents = wrapper.findAll('CopyContent-stub');
-      if (copyComponents.length > 1) {
-        const secondCopy = copyComponents[1];
-        expect(secondCopy.attributes('displaycontent')).toContain('Authorization:');
-        expect(secondCopy.attributes('displaycontent')).toContain(wrapper.vm.copyHTTPTracesContentPasscode);
-      } else {
-        // Test that content is generated correctly
-        expect(wrapper.vm.copyHTTPTracesContentPasscode).toContain('Basic');
-      }
-    });
-  });
-
-  // Props Handling Tests
-  describe("Props Handling", () => {
-    it("should handle currOrgIdentifier prop", () => {
-      expect(wrapper.props().currOrgIdentifier).toBe("test-org");
-    });
-
-    it("should handle currUserEmail prop", () => {
-      expect(wrapper.props().currUserEmail).toBe("test@example.com");
-    });
-
-    it("should handle undefined currOrgIdentifier", () => {
-      const noPropsWrapper = mount(OpenTelemetry, {
-        global: {
-          plugins: [store, i18n],
-          stubs: {
-            "CopyContent": true
-          }
-        }
-      });
-      
-      expect(noPropsWrapper.props().currOrgIdentifier).toBeUndefined();
-      noPropsWrapper.unmount();
-    });
-
-    it("should handle undefined currUserEmail", () => {
-      const noPropsWrapper = mount(OpenTelemetry, {
-        global: {
-          plugins: [store, i18n],
-          stubs: {
-            "CopyContent": true
-          }
-        }
-      });
-      
-      expect(noPropsWrapper.props().currUserEmail).toBeUndefined();
-      noPropsWrapper.unmount();
-    });
-
-    it("should accept string type for currOrgIdentifier", () => {
-      const testWrapper = mount(OpenTelemetry, {
-        props: { currOrgIdentifier: "different-org" },
-        global: {
-          plugins: [store, i18n],
-          stubs: {
-            "CopyContent": true
-          }
-        }
-      });
-      
-      expect(testWrapper.props().currOrgIdentifier).toBe("different-org");
-      testWrapper.unmount();
-    });
-
-    it("should accept string type for currUserEmail", () => {
-      const testWrapper = mount(OpenTelemetry, {
-        props: { currUserEmail: "different@email.com" },
-        global: {
-          plugins: [store, i18n],
-          stubs: {
-            "CopyContent": true
-          }
-        }
-      });
-      
-      expect(testWrapper.props().currUserEmail).toBe("different@email.com");
-      testWrapper.unmount();
-    });
-  });
-
-  // Utility Functions Integration Tests
-  describe("Utility Functions Integration", () => {
-    it("should call getImageURL function", () => {
-      const result = wrapper.vm.getImageURL("test-path");
-      expect(result).toBe("/mocked/path/test-path");
-    });
-
-    it("should have access to getImageURL in component", () => {
-      expect(typeof wrapper.vm.getImageURL).toBe("function");
-    });
-
-    it("should integrate with getIngestionURL", () => {
-      // Test that the function produces the expected result
-      expect(wrapper.vm.ingestionURL).toBeTruthy();
-      expect(typeof wrapper.vm.ingestionURL).toBe('string');
-    });
-
-    it("should integrate with getEndPoint", () => {
-      // Test that the endpoint object is properly structured
-      expect(wrapper.vm.endpoint).toHaveProperty('url');
-      expect(wrapper.vm.endpoint).toHaveProperty('host');
-      expect(wrapper.vm.endpoint).toHaveProperty('port');
-      expect(wrapper.vm.endpoint).toHaveProperty('protocol');
-    });
-  });
-
-  // Edge Cases and Error Handling Tests
-  describe("Edge Cases and Error Handling", () => {
-    it("should handle empty organization identifier", () => {
-      // Test with a mock store that has empty organization identifier
-      const emptyOrgWrapper = mount(OpenTelemetry, {
-        props: mockProps,
-        global: {
-          plugins: [store, i18n],
-          stubs: {
-            "CopyContent": true
-          }
-        }
-      });
-      
-      expect(emptyOrgWrapper.vm.copyHTTPTracesContentURL).toBeTruthy();
-      expect(emptyOrgWrapper.vm.copyGRPCTracesContent).toBeTruthy();
-      emptyOrgWrapper.unmount();
-    });
-
-    it("should handle different protocol schemes", () => {
-      // The component should handle both http and https
-      expect(wrapper.vm.endpoint.protocol).toBe("http");
-      expect(wrapper.vm.copyGRPCTracesContent).toContain("insecure: true");
-    });
-
-    it("should handle null endpoint values gracefully", () => {
-      // Test that the component doesn't crash with null values
-      const nullEndpoint = {
-        url: null,
-        host: null,
-        port: null,
-        protocol: null,
-        tls: null
-      };
-      
-      // Component should still render without crashing
-      expect(wrapper.vm.endpoint).toBeTruthy();
-    });
-
-    it("should handle special characters in organization identifier", () => {
-      // The component should handle organization identifiers with special characters
-      const url = wrapper.vm.copyHTTPTracesContentURL;
-      expect(url).toBeTruthy();
-      expect(typeof url).toBe('string');
-    });
-
-    it("should maintain content consistency", () => {
-      // HTTP and gRPC content should use the same organization identifier
-      const httpOrg = wrapper.vm.copyHTTPTracesContentURL.split('/').pop();
-      const gRPCOrg = wrapper.vm.copyGRPCTracesContent.match(/organization: (.*)/)[1];
-      expect(httpOrg).toBe(gRPCOrg);
-    });
-
-    it("should handle component unmounting", () => {
-      expect(() => {
-        wrapper.unmount();
-        wrapper = mount(OpenTelemetry, {
-          props: mockProps,
-          global: {
-            plugins: [store, i18n],
-            stubs: {
-              "CopyContent": true
-            }
-          }
-        });
-      }).not.toThrow();
-    });
-
-    it("should handle reactive data updates", async () => {
-      const initialURL = wrapper.vm.copyHTTPTracesContentURL;
-      
-      // Simulate endpoint change
-      wrapper.vm.endpoint.url = "https://new-host:443";
-      await nextTick();
-      
-      // The URL should still be accessible
-      expect(wrapper.vm.copyHTTPTracesContentURL).toBeTruthy();
-    });
-  });
-
-  // Integration Tests
-  describe("Component Integration", () => {
-    it("should integrate properly with Vuex store", () => {
-      expect(wrapper.vm.store.state.selectedOrganization).toBeTruthy();
-      expect(wrapper.vm.store.state.selectedOrganization.identifier).toBe("default");
-    });
-
-    it("should maintain data consistency across all content types", () => {
-      const orgId = wrapper.vm.store.state.selectedOrganization.identifier;
-      
-      expect(wrapper.vm.copyHTTPTracesContentURL).toContain(orgId);
-      expect(wrapper.vm.copyGRPCTracesContent).toContain(orgId);
-    });
-
-    it("should handle store state changes gracefully", async () => {
-      // Verify initial state
-      expect(wrapper.vm.copyHTTPTracesContentURL).toBeTruthy();
-      expect(wrapper.vm.copyGRPCTracesContent).toBeTruthy();
-      
-      // Content should remain valid
-      expect(wrapper.vm.copyHTTPTracesContentURL.length).toBeGreaterThan(0);
-      expect(wrapper.vm.copyGRPCTracesContent.length).toBeGreaterThan(0);
-    });
-  });
-});
\ No newline at end of file
+});
diff --git a/web/src/components/ingestion/traces/OpenTelemetry.vue b/web/src/components/ingestion/traces/OpenTelemetry.vue
index 38341f4ae8..25312a4c1c 100644
--- a/web/src/components/ingestion/traces/OpenTelemetry.vue
+++ b/web/src/components/ingestion/traces/OpenTelemetry.vue
@@ -14,78 +14,24 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<template>
-  <IngestionContent>
-    <div class="flex flex-col gap-2" data-test="vector-title-text">
-      <b>OTLP HTTP</b>
-      <CopyContent
-        :content="copyHTTPTracesContentURL"
-        :displayContent="'HTTP Endpoint: ' + copyHTTPTracesContentURL"
-      />
-      <CopyContent
-        :content="copyHTTPTracesContentPasscode"
-        :displayContent="'Authorization: ' + copyHTTPTracesContentPasscode"
-      />
-    </div>
+<!--
+  OTLP traces setup page. Content lives in setupCard/content/otlpTraces.ts and
+  renders through the shared DataSourceSetupCard.
 
-    <div class="flex flex-col gap-2" data-test="vector-title-text" v-if="config.isCloud == 'false'">
-      <b>OTLP gRPC</b>
-      <CopyContent :content="copyGRPCTracesContent" />
-    </div>
-  </IngestionContent>
+  Mounted by TWO routes (see useIngestionRoutes): Recommended > Traces
+  (`ingestFromTraces`) and Custom > Traces > OpenTelemetry
+  (`ingestTracesFromOtel`) — they show the same content, so both follow this
+  component.
+-->
+<template>
+  <DataSourceSetupCard slug="otlpTraces" />
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, type Ref } from "vue";
-import config from "../../../aws-exports";
-import { useStore } from "vuex";
-import { getEndPoint, getImageURL, getIngestionURL } from "../../../utils/zincutils";
-import CopyContent from "@/components/CopyContent.vue";
-import IngestionContent from "@/components/ingestion/IngestionContent.vue";
+<script setup lang="ts">
+import DataSourceSetupCard from "@/components/ingestion/setupCard/DataSourceSetupCard.vue";
 
-export default defineComponent({
-  name: "traces-otlp",
-  props: {
-    currOrgIdentifier: {
-      type: String,
-    },
-    currUserEmail: {
-      type: String,
-    },
-  },
-  components: { CopyContent, IngestionContent },
-  setup(props) {
-    const store = useStore();
-    const endpoint: any = ref({
-      url: "",
-      host: "",
-      port: "",
-      protocol: "",
-      tls: "",
-    });
-
-    const ingestionURL = getIngestionURL();
-    endpoint.value = getEndPoint(ingestionURL);
-
-    const copyHTTPTracesContentURL = `${endpoint.value.url}/api/${store.state.selectedOrganization.identifier}`;
-    const copyHTTPTracesContentPasscode = `Basic [BASIC_PASSCODE]`;
-    const copyGRPCTracesContent = `endpoint: ${endpoint.value.host}
-headers: 
-  Authorization: "Basic [BASIC_PASSCODE]"
-  organization: ${store.state.selectedOrganization.identifier}
-  stream-name: default
-tls:
-  insecure: ${endpoint.value.protocol == "https" ? false : true}`;
-    return {
-      store,
-      config,
-      endpoint,
-      copyHTTPTracesContentURL,
-      copyHTTPTracesContentPasscode,
-      copyGRPCTracesContent,
-      getImageURL,
-      ingestionURL,
-    };
-  },
-});
+defineProps<{
+  currOrgIdentifier?: string;
+  currUserEmail?: string;
+}>();
 </script>
diff --git a/web/src/locales/languages/en-US.json b/web/src/locales/languages/en-US.json
index a40dc73474..7ad48fcd46 100644
--- a/web/src/locales/languages/en-US.json
+++ b/web/src/locales/languages/en-US.json
@@ -2417,6 +2417,40 @@
     "iis": "IIS",
     "pubsub": "Pub/Sub Logs",
     "aiLabel": "AI Integrations",
+    "azureSetup": {
+      "activityLogsTitle": "Azure Activity Logs",
+      "activityLogsDescription": "Stream Azure subscription activity logs to OpenObserve via Event Hub. The ARM template sets up the Event Hub infrastructure \u2014 you then configure Azure to export logs to it.",
+      "manualTitle": "Manual Configuration (for reference)",
+      "searchPlaceholder": "Search Azure services...",
+      "categoryAll": "All Services",
+      "categoryLogs": "Logs",
+      "categoryCompute": "Compute",
+      "categoryStorage": "Storage",
+      "categorySecurity": "Security",
+      "categoryNetworking": "Networking",
+      "noResults": "No integrations found matching your search"
+    },
+    "awsSetup": {
+      "title": "AWS Integrations",
+      "description": "Set up AWS monitoring in one click or configure individual services for granular control.",
+      "quickSetup": "Quick Setup",
+      "individualServices": "Individual Services",
+      "manualTitle": "Manual Configuration",
+      "manualDescription": "Use these credentials for custom AWS integrations or manual setup.",
+      "searchPlaceholder": "Search AWS services...",
+      "categoryAll": "All Services",
+      "categoryLogs": "Logs",
+      "categoryMetrics": "Metrics",
+      "categorySecurity": "Security",
+      "categoryNetworking": "Networking",
+      "noResults": "No integrations found matching your search",
+      "viewDocumentation": "View Documentation",
+      "addSource": "Add Source",
+      "documentation": "Documentation",
+      "addDashboard": "Add Dashboard",
+      "chooseMethod": "Choose Integration Method",
+      "chooseMethodPrompt": "Select how you want to integrate {service}:"
+    },
     "mcp": {
       "name": "OpenObserve MCP Server",
       "shortName": "MCP Server",
diff --git a/web/src/locales/localeKeys.spec.ts b/web/src/locales/localeKeys.spec.ts
new file mode 100644
index 0000000000..6ce3150f0c
--- /dev/null
+++ b/web/src/locales/localeKeys.spec.ts
@@ -0,0 +1,134 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+// Guards the base locale file against a silent failure mode: JSON.parse accepts
+// duplicate keys and keeps the LAST one. Adding a nested block whose name
+// collides with an existing flat label silently replaces that label with an
+// object, and every t() call for it then renders the raw key path on screen.
+//
+// That is exactly what happened when an `"azure": { … }` block was added
+// alongside the existing `"azure": "Microsoft Azure"` label used by the Data
+// Sources sidebar tab and the global search index.
+
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const LOCALE = resolve(__dirname, "./languages/en-US.json");
+
+/**
+ * Returns the names of keys that appear more than once within the same object.
+ * Walks the raw text because the duplicates are already gone by the time
+ * JSON.parse returns.
+ */
+export function findDuplicateKeys(text: string): string[] {
+  const dupes: string[] = [];
+  // One set of seen key names per open object.
+  const scopes: Array<Set<string>> = [];
+  let pendingKey: string | null = null;
+  let i = 0;
+
+  while (i < text.length) {
+    const ch = text[i];
+
+    if (ch === '"') {
+      // Read a complete string token, honouring escapes.
+      let value = "";
+      i++;
+      while (i < text.length && text[i] !== '"') {
+        if (text[i] === "\\") {
+          value += text[i] + text[i + 1];
+          i += 2;
+          continue;
+        }
+        value += text[i];
+        i++;
+      }
+      i++; // closing quote
+      pendingKey = value;
+      continue;
+    }
+
+    if (ch === "{") {
+      scopes.push(new Set());
+      pendingKey = null;
+    } else if (ch === "}") {
+      scopes.pop();
+      pendingKey = null;
+    } else if (ch === ":") {
+      // The string just read was a key in the innermost object.
+      const scope = scopes[scopes.length - 1];
+      if (scope && pendingKey !== null) {
+        if (scope.has(pendingKey)) dupes.push(pendingKey);
+        scope.add(pendingKey);
+      }
+      pendingKey = null;
+    } else if (ch === "," || ch === "[" || ch === "]") {
+      pendingKey = null;
+    }
+    i++;
+  }
+
+  return [...new Set(dupes)];
+}
+
+describe("findDuplicateKeys", () => {
+  it("detects a duplicate key within the same object", () => {
+    // The exact shape of the bug this guard exists for.
+    const bad = '{"ingestion":{"azure":"Microsoft Azure","azure":{"title":"x"}}}';
+    expect(findDuplicateKeys(bad)).toEqual(["azure"]);
+  });
+
+  it("does not flag the same name used in different objects", () => {
+    const ok = '{"a":{"title":"x"},"b":{"title":"y"}}';
+    expect(findDuplicateKeys(ok)).toEqual([]);
+  });
+
+  it("is not confused by braces or colons inside string values", () => {
+    const ok = '{"a":"{not: a key}","b":"plain"}';
+    expect(findDuplicateKeys(ok)).toEqual([]);
+  });
+});
+
+describe("en-US locale file", () => {
+  const raw = readFileSync(LOCALE, "utf8");
+
+  it("parses as valid JSON", () => {
+    expect(() => JSON.parse(raw)).not.toThrow();
+  });
+
+  it("has no duplicate keys within any object", () => {
+    expect(findDuplicateKeys(raw)).toEqual([]);
+  });
+
+  it("keeps the Data Sources sidebar labels as strings", () => {
+    // Rendered directly by Recommended.vue and the Ingestion search index — if
+    // any becomes an object, that tab shows its raw key path instead of a name.
+    const { ingestion } = JSON.parse(raw);
+    for (const key of [
+      "azure",
+      "kubernetes",
+      "windows",
+      "linux",
+      "awsconfig",
+      "gcpconfig",
+      "tracesotlp",
+      "rum",
+    ]) {
+      expect(typeof ingestion[key], `ingestion.${key}`).toBe("string");
+      expect(ingestion[key].length).toBeGreaterThan(0);
+    }
+  });
+});