diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx
index ada827115d..dfca528716 100644
--- a/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx
+++ b/plugins/catalog/src/components/AboutCard/AboutCard.test.tsx
@@ -123,3 +123,41 @@ describe('<AboutCard /> BitBucket', () => {
     );
   });
 });
+
+describe('<AboutCard /> custom links', () => {
+  it('renders info and "view source" link', () => {
+    const entity = {
+      apiVersion: 'v1',
+      kind: 'Component',
+      metadata: {
+        name: 'software',
+        annotations: {
+          'backstage.io/managed-by-location':
+            'bitbucket:https://bitbucket.org/backstage/backstage/src/master/software.yaml',
+          'backstage.io/browser-edit-url': 'https://another.place',
+          'backstage.io/browser-source-url':
+            'https://another.place/backstage.git',
+        },
+      },
+      spec: {
+        owner: 'guest',
+        type: 'service',
+        lifecycle: 'production',
+      },
+    };
+    const { getByText } = render(
+      <EntityProvider entity={entity}>
+        <AboutCard />
+      </EntityProvider>,
+    );
+    expect(getByText('service')).toBeInTheDocument();
+    expect(getByText('View Source').closest('a')).toHaveAttribute(
+      'href',
+      'https://another.place/backstage.git',
+    );
+    expect(getByText('View Source').closest('a')).toHaveAttribute(
+      'edithref',
+      'https://another.place',
+    );
+  });
+});
diff --git a/plugins/catalog/src/components/AboutCard/AboutCard.tsx b/plugins/catalog/src/components/AboutCard/AboutCard.tsx
index 0f2d55295b..ee42281d31 100644
--- a/plugins/catalog/src/components/AboutCard/AboutCard.tsx
+++ b/plugins/catalog/src/components/AboutCard/AboutCard.tsx
@@ -35,7 +35,7 @@ import ExtensionIcon from '@material-ui/icons/Extension';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import React from 'react';
 import { findLocationForEntityMeta } from '../../data/utils';
-import { createEditLink, determineUrlType } from '../actions';
+import { findEditUrl, determineUrlType } from '../actions';
 import { AboutContent } from './AboutContent';
 
 const useStyles = makeStyles({
@@ -61,19 +61,22 @@ type CodeLinkInfo = {
 };
 
 function getCodeLinkInfo(entity: Entity): CodeLinkInfo {
+  let sourceUrl =
+    entity.metadata?.annotations?.['backstage.io/browser-source-url'];
   const location = findLocationForEntityMeta(entity?.metadata);
+  const editUrl = findEditUrl(entity, location);
+
   if (location) {
+    sourceUrl = sourceUrl || location.target;
     const type =
-      location.type === 'url'
-        ? determineUrlType(location.target)
-        : location.type;
+      location.type === 'url' ? determineUrlType(sourceUrl) : location.type;
     return {
+      edithref: editUrl,
       icon: iconMap[type],
-      edithref: createEditLink(location),
-      href: location.target,
+      href: sourceUrl,
     };
   }
-  return {};
+  return { edithref: editUrl, href: sourceUrl };
 }
 
 type AboutCardProps = {