diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx
index c32704d0a..928d7287f 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx
@@ -125,10 +125,16 @@ export const ChangeFailureRateCard = () => {
             <Line white huge bold py={1}>
               Change Failure Rate
             </Line>
-            <MetricExternalRead
-              link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#change-failure-rate`}
-              label="Change Failure Rate"
-            />
+            <FlexBox
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <MetricExternalRead
+                link={`https://www.middlewarehq.com/blog/how-to-reduce-change-failure-rate-build-bulletproof-software-delivery-process`}
+                label="Change Failure Rate"
+              />
+            </FlexBox>
           </FlexBox>
           <FlexBox
             title={
diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx
index dc214f076..edf27dcba 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx
@@ -1,15 +1,7 @@
 import { ArrowForwardRounded, WarningAmberRounded } from '@mui/icons-material';
 import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
 import ErrorOutlineRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
-import {
-  alpha,
-  Button,
-  Chip,
-  darken,
-  List,
-  ListItem,
-  useTheme
-} from '@mui/material';
+import { alpha, Button, Chip, darken, List, ListItem } from '@mui/material';
 import Link from 'next/link';
 import pluralize from 'pluralize';
 import { useMemo } from 'react';
@@ -62,7 +54,6 @@ const chartOptions = {
 
 export const ChangeTimeCard = () => {
   const { addPage } = useOverlayPage();
-  const theme = useTheme();
   const { role } = useAuth();
   const isEng = isRoleLessThanEM(role);
 
@@ -134,109 +125,115 @@ export const ChangeTimeCard = () => {
               <Line white huge bold py={1}>
                 Lead Time for Changes
               </Line>
-              <MetricExternalRead
-                link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#lead-time-for-changes`}
-                label={'Lead Time for Changes'}
+              <FlexBox
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
               >
-                {isSufficientDataAvailable &&
-                  !isAllAssignedReposHaveDeploymentsConfigured && (
-                    <FlexBox
-                      color="white"
-                      title={
-                        <FlexBox col gap={1}>
-                          <Line medium bold white>
-                            Insight based on data from{' '}
-                            {reposCountWithWorkflowConfigured} out of{' '}
-                            {allAssignedRepos.length}{' '}
-                            {pluralize('repo', allAssignedRepos.length)} which
-                            have workflow configured.
-                          </Line>
-                          <Line medium>
-                            Following{' '}
-                            {pluralize(
-                              'repo',
-                              reposWithNoDeploymentsConfigured.length
-                            )}{' '}
-                            {reposWithNoDeploymentsConfigured.length > 1
-                              ? "don't"
-                              : "doesn't"}{' '}
-                            have any workflow assigned :
-                            <List sx={{ listStyleType: 'disc' }}>
-                              {reposWithNoDeploymentsConfigured.map((r) => (
-                                <ListItem
-                                  key={r.id}
-                                  sx={{
-                                    color: darken('#FFF', 0.25),
-                                    display: 'list-item',
-                                    padding: '0px',
-                                    marginLeft: '6px'
-                                  }}
+                <MetricExternalRead
+                  link={`https://www.middlewarehq.com/blog/lead-time-optimization-101-unlock-software-engineering-efficiency`}
+                  label={'Lead Time for Changes'}
+                >
+                  {isSufficientDataAvailable &&
+                    !isAllAssignedReposHaveDeploymentsConfigured && (
+                      <FlexBox
+                        color="white"
+                        title={
+                          <FlexBox col gap={1}>
+                            <Line medium bold white>
+                              Insight based on data from{' '}
+                              {reposCountWithWorkflowConfigured} out of{' '}
+                              {allAssignedRepos.length}{' '}
+                              {pluralize('repo', allAssignedRepos.length)} which
+                              have workflow configured.
+                            </Line>
+                            <Line medium>
+                              Following{' '}
+                              {pluralize(
+                                'repo',
+                                reposWithNoDeploymentsConfigured.length
+                              )}{' '}
+                              {reposWithNoDeploymentsConfigured.length > 1
+                                ? "don't"
+                                : "doesn't"}{' '}
+                              have any workflow assigned :
+                              <List sx={{ listStyleType: 'disc' }}>
+                                {reposWithNoDeploymentsConfigured.map((r) => (
+                                  <ListItem
+                                    key={r.id}
+                                    sx={{
+                                      color: darken('#FFF', 0.25),
+                                      display: 'list-item',
+                                      padding: '0px',
+                                      marginLeft: '6px'
+                                    }}
+                                  >
+                                    {r.name}
+                                  </ListItem>
+                                ))}
+                              </List>
+                            </Line>
+                            {!isEng && (
+                              <Link passHref href={ROUTES.INTEGRATIONS.PATH}>
+                                <Button
+                                  size="small"
+                                  endIcon={
+                                    <ArrowForwardRounded fontSize="inherit" />
+                                  }
+                                  variant="outlined"
+                                  sx={{ width: 'fit-content' }}
                                 >
-                                  {r.name}
-                                </ListItem>
-                              ))}
-                            </List>
-                          </Line>
-                          {!isEng && (
-                            <Link passHref href={ROUTES.INTEGRATIONS.PATH}>
-                              <Button
-                                size="small"
-                                endIcon={
-                                  <ArrowForwardRounded fontSize="inherit" />
-                                }
-                                variant="outlined"
-                                sx={{ width: 'fit-content' }}
-                              >
-                                Configure deployment workflows here
-                              </Button>
-                            </Link>
-                          )}
-                        </FlexBox>
-                      }
-                      darkTip
-                    >
-                      <WarningAmberRounded
-                        sx={{ fontSize: '1.4em' }}
-                        color="warning"
-                      />
-                    </FlexBox>
-                  )}
-                {isSufficientDataAvailable &&
-                  isAllAssignedReposHaveDeploymentsConfigured && (
-                    <FlexBox
-                      color="white"
-                      title={
-                        <FlexBox col gap={1}>
-                          <Line small bold white>
-                            All assigned{' '}
-                            {pluralize('repo', allAssignedRepos.length)} have
-                            deployment configured.
-                          </Line>
-                          {!isEng && (
-                            <Link passHref href={ROUTES.INTEGRATIONS.PATH}>
-                              <Button
-                                size="small"
-                                endIcon={
-                                  <ArrowForwardRounded fontSize="inherit" />
-                                }
-                                variant="outlined"
-                                sx={{ width: 'fit-content' }}
-                              >
-                                Modify deployment workflows here
-                              </Button>
-                            </Link>
-                          )}
-                        </FlexBox>
-                      }
-                      darkTip
-                    >
-                      <CheckCircleOutlineRoundedIcon
-                        sx={{ fontSize: '1.4em' }}
-                        color="success"
-                      />
-                    </FlexBox>
-                  )}
-              </MetricExternalRead>
+                                  Configure deployment workflows here
+                                </Button>
+                              </Link>
+                            )}
+                          </FlexBox>
+                        }
+                        darkTip
+                      >
+                        <WarningAmberRounded
+                          sx={{ fontSize: '1.4em' }}
+                          color="warning"
+                        />
+                      </FlexBox>
+                    )}
+                  {isSufficientDataAvailable &&
+                    isAllAssignedReposHaveDeploymentsConfigured && (
+                      <FlexBox
+                        color="white"
+                        title={
+                          <FlexBox col gap={1}>
+                            <Line small bold white>
+                              All assigned{' '}
+                              {pluralize('repo', allAssignedRepos.length)} have
+                              deployment configured.
+                            </Line>
+                            {!isEng && (
+                              <Link passHref href={ROUTES.INTEGRATIONS.PATH}>
+                                <Button
+                                  size="small"
+                                  endIcon={
+                                    <ArrowForwardRounded fontSize="inherit" />
+                                  }
+                                  variant="outlined"
+                                  sx={{ width: 'fit-content' }}
+                                >
+                                  Modify deployment workflows here
+                                </Button>
+                              </Link>
+                            )}
+                          </FlexBox>
+                        }
+                        darkTip
+                      >
+                        <CheckCircleOutlineRoundedIcon
+                          sx={{ fontSize: '1.4em' }}
+                          color="success"
+                        />
+                      </FlexBox>
+                    )}
+                </MetricExternalRead>
+              </FlexBox>
             </FlexBox>
           </FlexBox>
 
diff --git a/web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx
index fecbb1b9b..1814cf1c4 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx
@@ -98,10 +98,16 @@ export const MeanTimeToRestoreCard = () => {
             <Line white huge bold py={1}>
               Mean Time to Recovery
             </Line>
-            <MetricExternalRead
-              link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#time-to-restore-service`}
-              label="Mean Time to Recovery"
-            />
+            <FlexBox
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <MetricExternalRead
+                link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#time-to-restore-service`}
+                label="Mean Time to Recovery"
+              />
+            </FlexBox>
           </FlexBox>
           <FlexBox
             title={
diff --git a/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx
index 099bf2c57..82d6793d0 100644
--- a/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx
+++ b/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx
@@ -115,10 +115,16 @@ export const WeeklyDeliveryVolumeCard = () => {
             <Line white huge bold py={1}>
               Deployment Frequency
             </Line>
-            <MetricExternalRead
-              link={`https://docs.gitlab.com/ee/user/analytics/dora_metrics.html#deployment-frequency`}
-              label="Delivery Volume"
-            />
+            <FlexBox
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <MetricExternalRead
+                link={`https://www.middlewarehq.com/blog/is-deployment-frequency-the-goldilocks-zone-for-software-delivery`}
+                label="Delivery Volume"
+              />
+            </FlexBox>
           </FlexBox>
           {isCodeProviderIntegrationEnabled && (
             <FlexBox