diff --git a/src/renderer/components/ChordNameLink/ChordNameLink.module.scss b/src/renderer/components/ChordNameLink/ChordNameLink.module.scss
new file mode 100644
index 0000000..6d7b3d2
--- /dev/null
+++ b/src/renderer/components/ChordNameLink/ChordNameLink.module.scss
@@ -0,0 +1,5 @@
+@import 'tokens';
+
+.base {
+  color: currentcolor;
+}
diff --git a/src/renderer/components/ChordNameLink/ChordNameLink.tsx b/src/renderer/components/ChordNameLink/ChordNameLink.tsx
new file mode 100644
index 0000000..742bec3
--- /dev/null
+++ b/src/renderer/components/ChordNameLink/ChordNameLink.tsx
@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import classnames from 'classnames/bind';
+
+import { NavLink } from 'react-router-dom';
+import { Link } from '@la-jarre-a-son/ui';
+import { ChordNameLinkProps } from './types';
+
+import { ChordName } from '../ChordName/ChordName';
+
+import styles from './ChordNameLink.module.scss';
+
+const cx = classnames.bind(styles);
+
+export const ChordNameLink: React.FC<ChordNameLinkProps> = ({
+  className,
+  chord,
+  dictionaryUrl,
+  ...rest
+}) => {
+  const to = useMemo(
+    () => (chord ? `${dictionaryUrl}${encodeURIComponent(chord.tonic + chord.aliases[0])}` : ''),
+    [chord, dictionaryUrl]
+  );
+
+  if (!chord) return null;
+
+  return (
+    <Link as={NavLink} className={cx('base', className)} to={to}>
+      <ChordName chord={chord} {...rest} />
+    </Link>
+  );
+};
+
+ChordNameLink.defaultProps = {
+  dictionaryUrl: '/chord-dictionary/',
+};
+
+export default ChordNameLink;
diff --git a/src/renderer/components/ChordNameLink/index.ts b/src/renderer/components/ChordNameLink/index.ts
new file mode 100644
index 0000000..dcd77ec
--- /dev/null
+++ b/src/renderer/components/ChordNameLink/index.ts
@@ -0,0 +1 @@
+export { default, ChordNameLink } from './ChordNameLink';
diff --git a/src/renderer/components/ChordNameLink/types.ts b/src/renderer/components/ChordNameLink/types.ts
new file mode 100644
index 0000000..d915b5b
--- /dev/null
+++ b/src/renderer/components/ChordNameLink/types.ts
@@ -0,0 +1,5 @@
+import { ChordNameProps } from '../ChordName';
+
+export type ChordNameLinkProps = ChordNameProps & {
+  dictionaryUrl?: string;
+};
diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
index 9f27af7..17120f5 100644
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@@ -12,6 +12,7 @@ export * from './InputNumber';
 
 export * from './ChordIntervals';
 export * from './ChordName';
+export * from './ChordNameLink';
 export * from './CircleFifths';
 export * from './Notation';
 export * from './PianoKeyboard';
diff --git a/src/renderer/views/ChordDisplay/ChordDisplay.module.scss b/src/renderer/views/ChordDisplay/ChordDisplay.module.scss
index cb15390..eebb8a8 100644
--- a/src/renderer/views/ChordDisplay/ChordDisplay.module.scss
+++ b/src/renderer/views/ChordDisplay/ChordDisplay.module.scss
@@ -38,7 +38,7 @@ $View_ChordDisplay_textShadow: 0 0.05em 0.1em rgba($color-black, 0.6) !default;
 
 .display {
   position: relative;
-  z-index: 2;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -68,7 +68,7 @@ $View_ChordDisplay_textShadow: 0 0.05em 0.1em rgba($color-black, 0.6) !default;
 
 .alternativeChords {
   position: absolute;
-  z-index: 1;
+  z-index: 2;
   top: 0;
   right: 0;
   padding: 1vw;
diff --git a/src/renderer/views/ChordDisplay/ChordDisplayModule.tsx b/src/renderer/views/ChordDisplay/ChordDisplayModule.tsx
index f3c95fc..cb78a52 100644
--- a/src/renderer/views/ChordDisplay/ChordDisplayModule.tsx
+++ b/src/renderer/views/ChordDisplay/ChordDisplayModule.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames/bind';
 
 import { useModuleSettings, useSettings } from 'renderer/contexts/Settings';
 import useNotes from 'renderer/hooks/useNotes';
-import { ChordName, Notation, PianoKeyboard, ChordIntervals } from 'renderer/components';
+import { Notation, PianoKeyboard, ChordIntervals, ChordNameLink } from 'renderer/components';
 
 import styles from './ChordDisplay.module.scss';
 
@@ -51,20 +51,6 @@ const ChordDisplayModule: React.FC<Props> = ({ moduleId }) => {
 
   return (
     <div id="chordDisplay" className={cx('base')}>
-      {displayAltChords && (
-        <div id="alternativeChords" className={cx('alternativeChords')}>
-          {chords.map((chord, index) =>
-            index > 0 ? (
-              <ChordName
-                key={index}
-                chord={chord}
-                notation={chordNotation}
-                highlightAlterations={highlightAlterations}
-              />
-            ) : null
-          )}
-        </div>
-      )}
       <div id="container" className={cx('container')}>
         {displayNotation && (
           <Notation
@@ -79,7 +65,7 @@ const ChordDisplayModule: React.FC<Props> = ({ moduleId }) => {
         <div id="display" className={cx('display')}>
           {displayChord && (
             <div id="chord" className={cx('chord', { 'chord--withNotation': displayNotation })}>
-              <ChordName
+              <ChordNameLink
                 chord={chords[0]}
                 notation={chordNotation}
                 highlightAlterations={highlightAlterations}
@@ -100,6 +86,20 @@ const ChordDisplayModule: React.FC<Props> = ({ moduleId }) => {
               />
             </div>
           )}
+          {displayAltChords && (
+            <div id="alternativeChords" className={cx('alternativeChords')}>
+              {chords.map((chord, index) =>
+                index > 0 ? (
+                  <ChordNameLink
+                    key={index}
+                    chord={chord}
+                    notation={chordNotation}
+                    highlightAlterations={highlightAlterations}
+                  />
+                ) : null
+              )}
+            </div>
+          )}
         </div>
       </div>
       {displayKeyboard && (