diff --git a/src/js/components/AddedFrom.js b/src/js/components/AddedFrom.js
new file mode 100644
index 00000000..9077a972
--- /dev/null
+++ b/src/js/components/AddedFrom.js
@@ -0,0 +1,90 @@
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import URILink from './URILink';
+import { I18n, i18n } from '../locale';
+import {
+  getFromUri,
+  titleCase,
+  uriType,
+} from '../util/helpers';
+import {
+  makeItemSelector,
+  makeLoadingSelector,
+} from '../util/selectors';
+import { loadUri } from '../services/core/actions';
+
+export default ({
+  by,
+  uri,
+  className = '',
+  inline,
+}) => {
+  if (!uri) return null;
+
+  const dispatch = useDispatch();
+  const from = useSelector(makeItemSelector(uri));
+  const loading = useSelector(makeLoadingSelector([`(.*)${uri}(.*)`]));
+
+  useEffect(() => {
+    if (uri && !from && !loading) {
+      dispatch(loadUri(uri));
+    }
+  }, []);
+
+  const type = from?.type || uriType(uri);
+  let link = null;
+  switch (type) {
+    case 'discover':
+      link = (
+        <URILink type="recommendations" uri={getFromUri('seeds', uri)}>
+          <I18n path="discover.title" />
+        </URILink>
+      );
+      break;
+
+    case 'browse':
+      link = (
+        <URILink type={from?.type} uri={uri}>
+          <I18n path="library.browse.title" />
+        </URILink>
+      );
+      break;
+
+    case 'search':
+      link = (
+        <URILink type={from?.type} uri={uri}>
+          <I18n path="search.title" />
+        </URILink>
+      );
+      break;
+
+    case 'radio':
+      link = <I18n path="modal.edit_radio.title" />;
+      break;
+
+    case 'queue-history':
+      link = <I18n path="queue_history.title" />;
+      break;
+
+    default:
+      link = <URILink type={type} uri={uri}>{from?.name || titleCase(type)}</URILink>;
+  }
+
+  if (inline) {
+    return (
+      <div className={className}>
+        {i18n('specs.added_from')}
+        {link}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${className} tooltip`}>
+      {link}
+      <span className="tooltip__content">
+        {i18n('specs.added_from_by', { by, name: type })}
+      </span>
+    </div>
+  );
+};
diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js
index dad6dbde..cd7d4477 100755
--- a/src/js/components/ContextMenu.js
+++ b/src/js/components/ContextMenu.js
@@ -34,6 +34,7 @@ import {
   makeProvidersSelector,
   makeLibrarySelector,
 } from '../util/selectors';
+import AddedFrom from './AddedFrom';
 
 const processKeys = [
   'MOPIDY_GET_LIBRARY_PLAYLISTS',
@@ -696,49 +697,20 @@ class ContextMenu extends React.Component {
 
     if (context.items_count === 1 && context.name === 'queue-track' && context.item !== undefined) {
       if (queue_metadata[`tlid_${context.item.tlid}`] !== undefined) {
-        const metadata = queue_metadata[`tlid_${context.item.tlid}`];
-
-        if (metadata.added_from && metadata.added_by) {
-          const type = (metadata.added_from ? uriType(metadata.added_from) : null);
-
-          switch (type) {
-            case 'discover':
-              var link = (
-                <URILink type="recommendations" uri={getFromUri('seeds', metadata.added_from)}>
-                  <I18n path="discover.title" transform="lower" />
-                </URILink>
-              );
-              break;
-
-            case 'browse':
-              var link = (
-                <URILink type="browse" uri={metadata.added_from.replace('iris:browse:', '')}>
-                  <I18n path="library.browse.title" transform="lower" />
-                </URILink>
-              );
-              break;
-
-            case 'search':
-              var link = (
-                <URILink type="search" uri={metadata.added_from.replace('iris:', '')}>
-                  <I18n path="search.title" transform="lower" />
-                </URILink>
-              );
-              break;
-
-            default:
-              var link = <URILink type={type} uri={metadata.added_from}>{type}</URILink>;
-          }
-
-          return (
-            <div className="context-menu__title">
-              <div className="context-menu__title__text">
-                {`${metadata.added_by} added from `}
-                {link}
-              </div>
-            </div>
-          );
-        }
+        const {
+          added_from,
+          added_by,
+        } = queue_metadata[`tlid_${context.item.tlid}`] || {};
+        return (
+          <div className="context-menu__title">
+            <AddedFrom
+              uri={added_from}
+              by={added_by}
+              className="context-menu__title__text"
+              inline
+            />
+          </div>
+        );
       }
     }
 
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index ceeea19d..dbc3964d 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -5,13 +5,9 @@ import { Dater, dater } from './Dater';
 import URILink from './URILink';
 import ContextMenuTrigger from './ContextMenuTrigger';
 import ErrorBoundary from './ErrorBoundary';
-import {
-  getFromUri,
-  titleCase,
-  isTouchDevice,
-  uriType,
-} from '../util/helpers';
+import { isTouchDevice } from '../util/helpers';
 import { I18n, i18n } from '../locale';
+import AddedFrom from './AddedFrom';
 
 const MiddleColumn = ({
   track_context,
@@ -36,71 +32,16 @@ const MiddleColumn = ({
       );
       break;
     }
-
     case 'queue': {
-      if (added_from) {
-        const type = (added_from ? uriType(added_from) : null);
-        let link = null;
-
-        switch (type) {
-          case 'discover':
-            link = (
-              <URILink type="recommendations" uri={getFromUri('seeds', added_from)}>
-                <I18n path="discover.title" />
-              </URILink>
-            );
-            break;
-
-          case 'browse':
-            link = (
-              <URILink type={type} uri={added_from}>
-                <I18n path="library.browse.title" />
-              </URILink>
-            );
-            break;
-
-          case 'search':
-            link = (
-              <URILink type={type} uri={added_from}>
-                <I18n path="search.title" />
-              </URILink>
-            );
-            break;
-
-          case 'radio':
-            link = <I18n path="modal.edit_radio.title" />;
-            break;
-
-          case 'queue-history':
-            link = <I18n path="queue_history.title" />;
-            break;
-
-          default:
-            link = <URILink type={type} uri={added_from}>{titleCase(type)}</URILink>;
-        }
-
-        content = (
-          <div className="list__item__column__item list__item__column__item--added">
-            <span className="from">
-              {link}
-            </span>
-            {added_by && (
-              <span className="by by--with-spacing">
-                {`${added_by}`}
-              </span>
-            )}
-          </div>
-        );
-      } else if (added_by) {
-        content = (
-          <div className="list__item__column__item list__item__column__item--added">
-            <span className="by">{added_by}</span>
-          </div>
-        );
-      }
+      content = (
+        <AddedFrom
+          uri={added_from}
+          by={added_by}
+          className="list__item__column__item list__item__column__item--added"
+        />
+      );
       break;
     }
-
     default:
       return null;
   }
diff --git a/src/js/locale/en.yaml b/src/js/locale/en.yaml
index b89d14c4..7e5bb3b1 100755
--- a/src/js/locale/en.yaml
+++ b/src/js/locale/en.yaml
@@ -117,7 +117,8 @@ specs:
   playlists: '%{count} playlists'
   plays: '%{count} plays'
   popularity: '%{percent}% popularity'
-  added: 'Added '
+  added_from: 'Added from '
+  added_from_by: 'Added from %{name} by %{by}'
   added_ago: 'Added %{time} ago'
   edited: 'Edited '
   edited_ago: 'Edited %{time} ago'