diff --git a/public/components/getting_started/components/getting_started_integrationCards.tsx b/public/components/getting_started/components/getting_started_integrationCards.tsx
index 4d52b53c2..0ed6e8e98 100644
--- a/public/components/getting_started/components/getting_started_integrationCards.tsx
+++ b/public/components/getting_started/components/getting_started_integrationCards.tsx
@@ -3,21 +3,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect } from 'react';
 import {
+  EuiBadge,
+  EuiCard,
   EuiFieldSearch,
   EuiFilterButton,
   EuiFilterGroup,
   EuiFilterSelectItem,
-  EuiPopover,
-  EuiPopoverTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiCard,
-  EuiText,
-  EuiBadge,
+  EuiPopover,
+  EuiPopoverTitle,
   EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+import { observabilityIntegrationsID } from '../../../../common/constants/shared';
 import { coreRefs } from '../../../../public/framework/core_refs';
 
 export const IntegrationCards = () => {
@@ -148,7 +149,11 @@ export const IntegrationCards = () => {
               description={integration.description}
               data-test-subj={`integration_card_${integration.name.toLowerCase()}`}
               titleElement="span"
-              href={`/app/integrations#/available/${integration.name}`}
+              onClick={() =>
+                coreRefs?.application?.navigateToApp(observabilityIntegrationsID, {
+                  path: `#/available/${integration.name}`,
+                })
+              }
               footer={
                 <div>
                   {integration.labels &&