diff --git a/x-pack/plugins/serverless_search/public/application/components/overview.tsx b/x-pack/plugins/serverless_search/public/application/components/overview.tsx
index ffabf061dc274..ba9c65a93d6d4 100644
--- a/x-pack/plugins/serverless_search/public/application/components/overview.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/overview.tsx
@@ -9,17 +9,13 @@ import {
   EuiAvatar,
   EuiButtonEmpty,
   EuiCard,
-  EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
   EuiLink,
   EuiPageTemplate,
   EuiPanel,
-  EuiSpacer,
   EuiText,
-  EuiThemeProvider,
-  EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -57,6 +53,7 @@ import { ConnectorsCallout } from './connectors_callout';
 import { ConnectorIngestionPanel } from './connectors_ingestion';
 import { PipelineButtonOverview } from './pipeline_button_overview';
 import { PipelinePanel } from './pipeline_panel';
+import { CloudDetailsPanel } from './overview/cloud_details';
 
 export const ElasticsearchOverview = () => {
   const [selectedLanguage, setSelectedLanguage] = useState<LanguageDefinition>(javaDefinition);
@@ -152,63 +149,7 @@ export const ElasticsearchOverview = () => {
         bottomBorder="extended"
         data-test-subj="cloud-details-section"
       >
-        <OverviewPanel
-          description={i18n.translate('xpack.serverlessSearch.cloudIdDetails.description', {
-            defaultMessage:
-              "You'll need your Cloud ID and Elasticsearch endpoint to identify and connect to your project.",
-          })}
-          leftPanelContent={
-            <EuiFlexGroup direction="column" gutterSize="xl">
-              <EuiFlexItem>
-                <EuiTitle size="xxxs">
-                  <h6>
-                    {i18n.translate('xpack.serverlessSearch.cloudIdDetails.id.title', {
-                      defaultMessage: 'Cloud ID',
-                    })}
-                  </h6>
-                </EuiTitle>
-                <EuiSpacer size="xs" />
-                <EuiThemeProvider colorMode="dark">
-                  <EuiPanel paddingSize="xs">
-                    <EuiCodeBlock
-                      isCopyable
-                      fontSize="m"
-                      className="serverlessSearchCloudDetailsCopyPanel"
-                    >
-                      {cloud.cloudId}
-                    </EuiCodeBlock>
-                  </EuiPanel>
-                </EuiThemeProvider>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiTitle size="xxxs">
-                  <h6>
-                    {i18n.translate('xpack.serverlessSearch.cloudIdDetails.url.title', {
-                      defaultMessage: 'Elasticsearch Endpoint',
-                    })}
-                  </h6>
-                </EuiTitle>
-                <EuiSpacer size="xs" />
-                <EuiThemeProvider colorMode="dark">
-                  <EuiPanel paddingSize="xs">
-                    <EuiCodeBlock
-                      isCopyable
-                      transparentBackground
-                      fontSize="m"
-                      className="serverlessSearchCloudDetailsCopyPanel"
-                    >
-                      {cloud.elasticsearchUrl}
-                    </EuiCodeBlock>
-                  </EuiPanel>
-                </EuiThemeProvider>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          }
-          links={[]}
-          title={i18n.translate('xpack.serverlessSearch.cloudIdDetails.title', {
-            defaultMessage: 'Copy your connection details',
-          })}
-        />
+        <CloudDetailsPanel cloudId={cloud.cloudId} elasticsearchUrl={cloud.elasticsearchUrl} />
       </EuiPageTemplate.Section>
       <EuiPageTemplate.Section
         color="subdued"
diff --git a/x-pack/plugins/serverless_search/public/application/components/overview/cloud_details.tsx b/x-pack/plugins/serverless_search/public/application/components/overview/cloud_details.tsx
new file mode 100644
index 0000000000000..2b192d3f80520
--- /dev/null
+++ b/x-pack/plugins/serverless_search/public/application/components/overview/cloud_details.tsx
@@ -0,0 +1,127 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiCheckableCard,
+  EuiCodeBlock,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiThemeProvider,
+  EuiTitle,
+  EuiBadge,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { OverviewPanel } from '@kbn/search-api-panels';
+
+export interface CloudDetailsPanelProps {
+  cloudId?: string;
+  elasticsearchUrl?: string;
+}
+
+enum CloudDetail {
+  ElasticsearchEndpoint = 'es_url',
+  CloudId = 'cloud_id',
+}
+
+export const CloudDetailsPanel = ({ cloudId, elasticsearchUrl }: CloudDetailsPanelProps) => {
+  const [selectedDetail, setSelectedCloudDetail] = useState<CloudDetail>(
+    CloudDetail.ElasticsearchEndpoint
+  );
+  return (
+    <OverviewPanel
+      description={i18n.translate('xpack.serverlessSearch.cloudIdDetails.description', {
+        defaultMessage: 'Get ready to ingest and query your data by choosing a connection option:',
+      })}
+      leftPanelContent={
+        <EuiThemeProvider colorMode="dark">
+          <EuiPanel paddingSize="xs">
+            <EuiCodeBlock isCopyable fontSize="m" className="serverlessSearchCloudDetailsCopyPanel">
+              {selectedDetail === CloudDetail.CloudId && cloudId}
+              {selectedDetail === CloudDetail.ElasticsearchEndpoint && elasticsearchUrl}
+            </EuiCodeBlock>
+          </EuiPanel>
+        </EuiThemeProvider>
+      }
+      links={[]}
+      title={i18n.translate('xpack.serverlessSearch.cloudIdDetails.title', {
+        defaultMessage: 'Copy your connection details',
+      })}
+    >
+      <EuiSpacer size="l" />
+      <EuiCheckableCard
+        id={CloudDetail.ElasticsearchEndpoint}
+        name={CloudDetail.ElasticsearchEndpoint}
+        label={
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem>
+              <EuiTitle size="xxs">
+                <h5>
+                  <FormattedMessage
+                    id="xpack.serverlessSearch.cloudIdDetails.elasticsearchEndpoint.title"
+                    defaultMessage="Elasticsearch endpoint"
+                  />
+                </h5>
+              </EuiTitle>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <span>
+                <EuiBadge color="success">
+                  <FormattedMessage
+                    id="xpack.serverlessSearch.cloudIdDetails.elasticsearchEndpoint.recommendedBadge"
+                    defaultMessage="Recommended"
+                  />
+                </EuiBadge>
+              </span>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        }
+        checked={selectedDetail === CloudDetail.ElasticsearchEndpoint}
+        onChange={() => setSelectedCloudDetail(CloudDetail.ElasticsearchEndpoint)}
+      >
+        <EuiText size="s">
+          <p>
+            <FormattedMessage
+              id="xpack.serverlessSearch.cloudIdDetails.elasticsearchEndpoint.description"
+              defaultMessage="The most common method for establishing an Elasticsearch connection."
+            />
+          </p>
+        </EuiText>
+      </EuiCheckableCard>
+      <EuiSpacer />
+      <EuiCheckableCard
+        id={CloudDetail.CloudId}
+        name={CloudDetail.CloudId}
+        label={
+          <EuiTitle size="xxs">
+            <h5>
+              <FormattedMessage
+                id="xpack.serverlessSearch.cloudIdDetails.cloudId.title"
+                defaultMessage="Cloud ID"
+              />
+            </h5>
+          </EuiTitle>
+        }
+        checked={selectedDetail === CloudDetail.CloudId}
+        onChange={() => setSelectedCloudDetail(CloudDetail.CloudId)}
+      >
+        <EuiText size="s">
+          <p>
+            <FormattedMessage
+              id="xpack.serverlessSearch.cloudIdDetails.cloudId.description"
+              defaultMessage="Specific client libraries and connectors can use this unique identifier specific to Elastic Cloud."
+            />
+          </p>
+        </EuiText>
+      </EuiCheckableCard>
+    </OverviewPanel>
+  );
+};
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index 595e97e1b27d5..4149395492ce6 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -36905,9 +36905,7 @@
     "xpack.serverlessSearch.back": "Retour",
     "xpack.serverlessSearch.cancel": "Annuler",
     "xpack.serverlessSearch.cloudIdDetails.description": "Il vous faut l'identifiant et l'URL du cloud pour identifier votre projet et vous y connecter.",
-    "xpack.serverlessSearch.cloudIdDetails.id.title": "Identifiant du cloud",
     "xpack.serverlessSearch.cloudIdDetails.title": "Copiez vos informations de connexion",
-    "xpack.serverlessSearch.cloudIdDetails.url.title": "Point de terminaison Elasticsearch",
     "xpack.serverlessSearch.configureClient.basicConfigLabel": "Configuration de base",
     "xpack.serverlessSearch.configureClient.description": "Initialiser votre client avec votre clé d’API et votre identifiant de cloud uniques",
     "xpack.serverlessSearch.configureClient.title": "Configurer votre client",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 8dbb95896cc53..107a0c7e929b6 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -36904,9 +36904,7 @@
     "xpack.serverlessSearch.back": "戻る",
     "xpack.serverlessSearch.cancel": "キャンセル",
     "xpack.serverlessSearch.cloudIdDetails.description": "プロジェクトを識別して、それに接続するには、クラウドIDとクラウドURLが必要です。",
-    "xpack.serverlessSearch.cloudIdDetails.id.title": "クラウドID",
     "xpack.serverlessSearch.cloudIdDetails.title": "接続詳細情報をコピー",
-    "xpack.serverlessSearch.cloudIdDetails.url.title": "Elasticsearchエンドポイント",
     "xpack.serverlessSearch.configureClient.basicConfigLabel": "基本構成",
     "xpack.serverlessSearch.configureClient.description": "一意のAPIキーとCloud IDでクライアントを初期化",
     "xpack.serverlessSearch.configureClient.title": "クライアントを構成",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index aa3682adc2f04..0ed4a01b5d034 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -36899,9 +36899,7 @@
     "xpack.serverlessSearch.back": "返回",
     "xpack.serverlessSearch.cancel": "取消",
     "xpack.serverlessSearch.cloudIdDetails.description": "您需要云 ID 和云 URL 以标识并连接到您的项目。",
-    "xpack.serverlessSearch.cloudIdDetails.id.title": "云 ID",
     "xpack.serverlessSearch.cloudIdDetails.title": "复制连接详情",
-    "xpack.serverlessSearch.cloudIdDetails.url.title": "Elasticsearch 终端",
     "xpack.serverlessSearch.configureClient.basicConfigLabel": "基本配置",
     "xpack.serverlessSearch.configureClient.description": "使用唯一 API 密钥和云 ID 对客户端进行初始化",
     "xpack.serverlessSearch.configureClient.title": "配置客户端",