diff --git a/web/src/collection/components/FileBrowserPage/FileLinearList/FileLinearListItem.js b/web/src/collection/components/FileBrowserPage/FileLinearList/FileLinearListItem.js
index 6cb9ddf6..970ff82e 100644
--- a/web/src/collection/components/FileBrowserPage/FileLinearList/FileLinearListItem.js
+++ b/web/src/collection/components/FileBrowserPage/FileLinearList/FileLinearListItem.js
@@ -3,162 +3,91 @@ import clsx from "clsx";
 import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/styles";
 import { FileType } from "../FileType";
-import VideocamOutlinedIcon from "@material-ui/icons/VideocamOutlined";
-import ScheduleOutlinedIcon from "@material-ui/icons/ScheduleOutlined";
-import EventAvailableOutlinedIcon from "@material-ui/icons/EventAvailableOutlined";
-import VolumeOffOutlinedIcon from "@material-ui/icons/VolumeOffOutlined";
 import MoreHorizOutlinedIcon from "@material-ui/icons/MoreHorizOutlined";
-import AttributeText from "../../../../common/components/AttributeText";
 import IconButton from "@material-ui/core/IconButton";
-import {
-  formatBool,
-  formatDate,
-  formatDuration,
-} from "../../../../common/helpers/format";
 import { useIntl } from "react-intl";
-import ExifIcon from "../../../../common/components/icons/ExifIcon";
+import FileSummary from "../../FileSummary";
+import { useMediaQuery } from "@material-ui/core";
+import useTheme from "@material-ui/styles/useTheme";
 
 const useStyles = makeStyles((theme) => ({
-  decor: {
+  container: {
     marginBottom: theme.spacing(2),
     backgroundColor: theme.palette.background.paper,
     borderRadius: 4,
     borderStyle: "solid",
     borderWidth: 1,
     borderColor: theme.palette.border.light,
-  },
-  layout: {
     display: "flex",
     alignItems: "center",
     padding: theme.spacing(3),
   },
-  buttonStyle: {
+  button: {
     cursor: "pointer",
     "&:hover": {
       borderColor: theme.palette.primary.light,
     },
   },
-  icon: {
-    color: theme.palette.primary.contrastText,
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-  },
-  iconContainer: {
-    backgroundColor: theme.palette.primary.main,
-    width: theme.spacing(4),
-    height: theme.spacing(4),
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  fileName: {
+  summary: {
     flexGrow: 1,
     minWidth: 0,
-    marginLeft: theme.spacing(3),
-  },
-  volume: {
-    color: theme.palette.action.textInactive,
-  },
-  attr: {
-    marginLeft: theme.spacing(3),
-    marginRight: theme.spacing(3),
-  },
-  divider: {
-    borderLeftStyle: "solid",
-    borderLeftColor: theme.palette.border.light,
-    borderLeftWidth: 1,
-    height: theme.spacing(4),
-  },
-  md: {
-    [theme.breakpoints.down("md")]: {
-      display: "none",
-    },
-  },
-  sm: {
-    [theme.breakpoints.down("sm")]: {
-      display: "none",
-    },
   },
 }));
 
-function useMessages(intl) {
+/**
+ * Get i18n text.
+ */
+function useMessages() {
+  const intl = useIntl();
   return {
-    attr: {
-      filename: intl.formatMessage({ id: "file.attr.name" }),
-      fingerprint: intl.formatMessage({ id: "file.attr.fingerprint" }),
-      quality: intl.formatMessage({ id: "file.attr.quality" }),
-    },
+    containerLabel: intl.formatMessage({ id: "actions.showFileDetails" }),
+    moreLabel: intl.formatMessage({ id: "actions.showMoreOptions" }),
   };
 }
 
+/**
+ * Get screen size.
+ */
+function useScreenSize() {
+  const theme = useTheme();
+  const medium = useMediaQuery(theme.breakpoints.up("md"));
+  const large = useMediaQuery(theme.breakpoints.up("lg"));
+  return { medium, large };
+}
+
 const FileLinearListItem = React.memo(function FpLinearListItem(props) {
-  const { file, button = false, highlight, onClick, className } = props;
-  const intl = useIntl();
-  const messages = useMessages(intl);
+  const {
+    file,
+    button = false,
+    highlight,
+    onClick,
+    className,
+    ...other
+  } = props;
+  const messages = useMessages();
+  const { large, medium } = useScreenSize();
 
   const handleClick = useCallback(() => onClick(file), [file, onClick]);
 
   const classes = useStyles();
   return (
     <div
-      className={clsx(
-        classes.decor,
-        classes.layout,
-        button && classes.buttonStyle,
-        className
-      )}
       onClick={handleClick}
-      aria-label={intl.formatMessage({ id: "actions.showFileDetails" })}
+      className={clsx(classes.container, button && classes.button, className)}
+      aria-label={messages.containerLabel}
+      {...other}
     >
-      <div className={classes.iconContainer}>
-        <VideocamOutlinedIcon className={classes.icon} />
-      </div>
-      <AttributeText
-        name={messages.attr.filename}
-        value={file.filename}
-        variant="title"
-        highlighted={highlight}
-        ellipsis
-        className={classes.fileName}
-      />
-      <AttributeText
-        name={messages.attr.fingerprint}
-        value={file.fingerprint && file.fingerprint.slice(0, 7)}
-        variant="primary"
-        className={clsx(classes.attr, classes.sm)}
-      />
-      <div className={clsx(classes.divider, classes.sm)} />
-      <AttributeText
-        value={formatDuration(file.metadata.length, intl)}
-        icon={ScheduleOutlinedIcon}
-        variant="normal"
-        className={classes.attr}
-      />
-      <div className={classes.divider} />
-      <AttributeText
-        value={formatDate(file.metadata.uploadDate, intl)}
-        icon={EventAvailableOutlinedIcon}
-        variant="normal"
-        defaultValue="Unknown"
-        className={clsx(classes.attr, classes.md)}
-      />
-      <div className={clsx(classes.divider, classes.md)} />
-      <AttributeText
-        value={formatBool(file.metadata.hasEXIF, intl)}
-        icon={ExifIcon}
-        variant="primary"
-        className={clsx(classes.attr, classes.md)}
-      />
-      <div className={clsx(classes.divider, classes.md)} />
-      <VolumeOffOutlinedIcon
-        className={clsx(classes.attr, classes.volume, classes.md)}
-      />
-      <div className={clsx(classes.divider, classes.md)} />
-      <IconButton
-        aria-label={intl.formatMessage({ id: "actions.showMoreOptions" })}
-      >
-        <MoreHorizOutlinedIcon />
-      </IconButton>
+      <FileSummary file={file} divider className={classes.summary}>
+        <FileSummary.Name highlight={highlight} />
+        {medium && <FileSummary.Fingerprint />}
+        <FileSummary.Duration />
+        {large && <FileSummary.CreationDate />}
+        {large && <FileSummary.HasExif />}
+        {large && <FileSummary.HasAudio />}
+        <IconButton aria-label={messages.moreLabel}>
+          <MoreHorizOutlinedIcon />
+        </IconButton>
+      </FileSummary>
     </div>
   );
 });
diff --git a/web/src/collection/components/FileComparisonPage/FileComparisonPage.js b/web/src/collection/components/FileComparisonPage/FileComparisonPage.js
index 4e14e328..2cc2b0e9 100644
--- a/web/src/collection/components/FileComparisonPage/FileComparisonPage.js
+++ b/web/src/collection/components/FileComparisonPage/FileComparisonPage.js
@@ -1,11 +1,12 @@
-import React from "react";
+import React, { useCallback } from "react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/styles";
 import Grid from "@material-ui/core/Grid";
 import MotherFile from "./MotherFile/MotherFile";
 import MatchFiles from "./MatchFiles/MatchFiles";
-import { useParams } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
+import { routes } from "../../../routing/routes";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -16,9 +17,16 @@ const useStyles = makeStyles((theme) => ({
 function FileComparisonPage(props) {
   const { className } = props;
   const classes = useStyles();
-  const { id: rawId } = useParams();
+  const history = useHistory();
+  const { id: rawId, matchFileId } = useParams();
   const id = Number(rawId);
 
+  const handleMatchFileChange = useCallback(
+    (newMatchFileId) =>
+      history.push(routes.collection.fileComparisonURL(id, newMatchFileId)),
+    [id]
+  );
+
   return (
     <div className={clsx(classes.root, className)}>
       <Grid container spacing={0}>
@@ -26,7 +34,11 @@ function FileComparisonPage(props) {
           <MotherFile motherFileId={id} />
         </Grid>
         <Grid item xs={12} lg={6}>
-          <MatchFiles motherFileId={id} />
+          <MatchFiles
+            motherFileId={id}
+            matchFileId={matchFileId != null ? Number(matchFileId) : null}
+            onMatchFileChange={handleMatchFileChange}
+          />
         </Grid>
       </Grid>
     </div>
diff --git a/web/src/collection/components/FileComparisonPage/MatchFiles/MatchFiles.js b/web/src/collection/components/FileComparisonPage/MatchFiles/MatchFiles.js
index a319b029..1faf7804 100644
--- a/web/src/collection/components/FileComparisonPage/MatchFiles/MatchFiles.js
+++ b/web/src/collection/components/FileComparisonPage/MatchFiles/MatchFiles.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect } from "react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/styles";
@@ -29,6 +29,14 @@ const useStyles = makeStyles((theme) => ({
     marginTop: 0,
     margin: theme.spacing(2),
   },
+  errorMessage: {
+    minHeight: 150,
+    ...theme.mixins.title2,
+    color: theme.palette.action.textInactive,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
 }));
 
 /**
@@ -39,14 +47,21 @@ function useMessages() {
   return {
     title: intl.formatMessage({ id: "file.match" }),
     loadError: intl.formatMessage({ id: "match.load.error" }),
+    notMatch: intl.formatMessage({ id: "match.notMatch" }),
+    noMatches: intl.formatMessage({ id: "match.noMatches" }),
   };
 }
 
 function MatchFiles(props) {
-  const { motherFileId, className, ...other } = props;
+  const {
+    motherFileId,
+    matchFileId,
+    onMatchFileChange,
+    className,
+    ...other
+  } = props;
   const classes = useStyles();
   const messages = useMessages();
-  const [selected, setSelected] = useState(0);
 
   const {
     matches,
@@ -56,6 +71,23 @@ function MatchFiles(props) {
     progress,
   } = useDirectMatches(motherFileId);
 
+  // Move to the first element when matches are loaded
+  useEffect(() => {
+    if (!hasMore && matches.length > 0 && matchFileId == null) {
+      onMatchFileChange(matches[0].file.id);
+    }
+  }, [hasMore, onMatchFileChange, motherFileId]);
+
+  // Get index of the selected match file
+  const selected = matches.findIndex((match) => match.file.id === matchFileId);
+
+  const handleSelectionChange = useCallback(
+    (index) => {
+      onMatchFileChange(matches[index].file.id);
+    },
+    [hasMore, onMatchFileChange, motherFileId]
+  );
+
   let content;
   if (hasMore) {
     content = (
@@ -67,7 +99,7 @@ function MatchFiles(props) {
         progress={progress}
       />
     );
-  } else if (matches.length > 0) {
+  } else if (matches.length > 0 && selected >= 0) {
     content = (
       <div>
         <FileMatchHeader
@@ -79,7 +111,9 @@ function MatchFiles(props) {
       </div>
     );
   } else {
-    content = null;
+    const errorMessage =
+      matches.length === 0 ? messages.noMatches : messages.notMatch;
+    content = <div className={classes.errorMessage}>{errorMessage}</div>;
   }
 
   return (
@@ -90,7 +124,7 @@ function MatchFiles(props) {
           <MatchSelector
             matches={matches}
             selected={selected}
-            onChange={setSelected}
+            onChange={handleSelectionChange}
           />
         )}
       </div>
@@ -104,6 +138,14 @@ MatchFiles.propTypes = {
    * Mother file id.
    */
   motherFileId: PropTypes.number.isRequired,
+  /**
+   * Match file id.
+   */
+  matchFileId: PropTypes.number,
+  /**
+   * Handle match file change.
+   */
+  onMatchFileChange: PropTypes.func.isRequired,
   className: PropTypes.string,
 };
 
diff --git a/web/src/collection/components/FileComparisonPage/MatchFiles/MatchSelector.js b/web/src/collection/components/FileComparisonPage/MatchFiles/MatchSelector.js
index 6b327716..2cb492f5 100644
--- a/web/src/collection/components/FileComparisonPage/MatchFiles/MatchSelector.js
+++ b/web/src/collection/components/FileComparisonPage/MatchFiles/MatchSelector.js
@@ -70,7 +70,7 @@ function MatchSelector(props) {
         <InputLabel id={labelId}>{messages.label}</InputLabel>
         <Select
           labelId={labelId}
-          value={matches.length > 0 ? selected : ""}
+          value={matches.length > 0 && selected >= 0 ? selected : ""}
           onChange={handleSelect}
           label={messages.label}
           disabled={matches.length === 0}
diff --git a/web/src/collection/components/FileMatchesPage/FileMatchesPage.js b/web/src/collection/components/FileMatchesPage/FileMatchesPage.js
index b6796634..a954fd68 100644
--- a/web/src/collection/components/FileMatchesPage/FileMatchesPage.js
+++ b/web/src/collection/components/FileMatchesPage/FileMatchesPage.js
@@ -93,7 +93,7 @@ function FileMatchesPage(props) {
   const history = useHistory();
 
   const handleCompare = useCallback(
-    () => history.push(routes.collection.fileComparisonURL(id)),
+    (file) => history.push(routes.collection.fileComparisonURL(id, file?.id)),
     [id]
   );
 
@@ -157,6 +157,7 @@ function FileMatchesPage(props) {
               <MatchPreview
                 distance={match.distance}
                 file={getMatchedFile(match, files, id)}
+                onCompare={handleCompare}
               />
             </Grid>
           ))}
diff --git a/web/src/collection/components/FileMatchesPage/MatchPreview/MatchPreview.js b/web/src/collection/components/FileMatchesPage/MatchPreview/MatchPreview.js
index dd5e15d5..d8ec2338 100644
--- a/web/src/collection/components/FileMatchesPage/MatchPreview/MatchPreview.js
+++ b/web/src/collection/components/FileMatchesPage/MatchPreview/MatchPreview.js
@@ -9,8 +9,6 @@ import MoreHorizOutlinedIcon from "@material-ui/icons/MoreHorizOutlined";
 import FileAttributes from "./FileAttributes";
 import { useIntl } from "react-intl";
 import ButtonBase from "@material-ui/core/ButtonBase";
-import { useHistory } from "react-router-dom";
-import { routes } from "../../../../routing/routes";
 import FileType from "../../FileBrowserPage/FileType";
 import Container from "./Container";
 import Distance from "../../../../common/components/Distance";
@@ -87,7 +85,7 @@ const useStyles = makeStyles((theme) => ({
 function useMessages(file) {
   const intl = useIntl();
   return {
-    moreInfo: intl.formatMessage({ id: "actions.moreInfo" }),
+    compare: intl.formatMessage({ id: "actions.compare" }),
     ariaLabel: intl.formatMessage(
       { id: "aria.label.matchedFile" },
       { name: file.filename }
@@ -97,16 +95,12 @@ function useMessages(file) {
 }
 
 function MatchPreview(props) {
-  const { file, distance, highlight, className } = props;
+  const { file, distance, highlight, onCompare, className } = props;
   const intl = useIntl();
   const classes = useStyles();
   const messages = useMessages(file);
-  const history = useHistory();
 
-  const handleMoreInfo = useCallback(
-    () => history.push(routes.collection.fileURL(file.id)),
-    [file.id]
-  );
+  const handleCompare = useCallback(() => onCompare(file), [file, onCompare]);
 
   return (
     <Container
@@ -138,12 +132,12 @@ function MatchPreview(props) {
       <div className={classes.more}>
         <ButtonBase
           className={classes.link}
-          onClick={handleMoreInfo}
+          onClick={handleCompare}
           focusRipple
           disableTouchRipple
-          aria-label={messages.moreInfo}
+          aria-label={messages.compare}
         >
-          {messages.moreInfo}
+          {messages.compare}
         </ButtonBase>
       </div>
     </Container>
@@ -155,6 +149,10 @@ MatchPreview.propTypes = {
    * Matched file
    */
   file: FileType.isRequired,
+  /**
+   * Handle compare
+   */
+  onCompare: PropTypes.func.isRequired,
   /**
    * Match distance
    */
diff --git a/web/src/collection/components/FileSummary/Name.js b/web/src/collection/components/FileSummary/Name.js
index f6b33439..397d3a98 100644
--- a/web/src/collection/components/FileSummary/Name.js
+++ b/web/src/collection/components/FileSummary/Name.js
@@ -47,7 +47,7 @@ function useMessages() {
 }
 
 function Name(props) {
-  const { file, className, ...other } = props;
+  const { file, highlight, className, ...other } = props;
   const classes = useStyles();
   const messages = useMessages();
 
@@ -59,6 +59,7 @@ function Name(props) {
       <AttributeText
         name={messages.filename}
         value={file.filename}
+        highlighted={highlight}
         variant="title"
         ellipsis
         className={classes.filename}
@@ -72,6 +73,10 @@ Name.propTypes = {
    * Video file to be summarized.
    */
   file: FileType,
+  /**
+   * Highlight substring.
+   */
+  highlight: PropTypes.string,
   className: PropTypes.string,
 };
 
diff --git a/web/src/collection/components/FileSummaryHeader/FileSummaryHeader.js b/web/src/collection/components/FileSummaryHeader/FileSummaryHeader.js
index 1065fae2..bb96c073 100644
--- a/web/src/collection/components/FileSummaryHeader/FileSummaryHeader.js
+++ b/web/src/collection/components/FileSummaryHeader/FileSummaryHeader.js
@@ -6,19 +6,11 @@ import Paper from "@material-ui/core/Paper";
 import { FileType } from "../FileBrowserPage/FileType";
 import IconButton from "@material-ui/core/IconButton";
 import ArrowBackOutlinedIcon from "@material-ui/icons/ArrowBackOutlined";
-import VideocamOutlinedIcon from "@material-ui/icons/VideocamOutlined";
-import AttributeText from "../../../common/components/AttributeText";
 import { useIntl } from "react-intl";
 import { useHistory } from "react-router";
-import {
-  formatBool,
-  formatDate,
-  formatDuration,
-} from "../../../common/helpers/format";
-import ScheduleOutlinedIcon from "@material-ui/icons/ScheduleOutlined";
-import EventAvailableOutlinedIcon from "@material-ui/icons/EventAvailableOutlined";
-import ExifIcon from "../../../common/components/icons/ExifIcon";
-import VolumeOffOutlinedIcon from "@material-ui/icons/VolumeOffOutlined";
+import FileSummary from "../FileSummary";
+import useTheme from "@material-ui/styles/useTheme";
+import { useMediaQuery } from "@material-ui/core";
 
 const useStyles = makeStyles((theme) => ({
   header: {
@@ -27,68 +19,37 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "center",
   },
-  titleGroup: {
+  summary: {
     flexGrow: 1,
-    flexShrink: 1,
-    display: "flex",
-    alignItems: "center",
-    minWidth: 0,
-  },
-  iconContainer: {
-    backgroundColor: theme.palette.primary.main,
-    width: theme.spacing(4.5),
-    height: theme.spacing(4.5),
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.spacing(0.5),
-    marginLeft: theme.spacing(1.5),
-    marginRight: theme.spacing(3),
-    flexShrink: 0,
-  },
-  icon: {
-    color: theme.palette.primary.contrastText,
-    width: theme.spacing(3.5),
-    height: theme.spacing(3.5),
-  },
-  filename: {
+    marginLeft: theme.spacing(2),
+    marginRight: theme.spacing(2),
     minWidth: 0,
   },
-  attrsGroup: {
-    display: "flex",
-    alignItems: "center",
-  },
-  attr: {
-    marginLeft: theme.spacing(3),
-    marginRight: theme.spacing(3),
-  },
-  divider: {
-    borderLeftStyle: "solid",
-    borderLeftColor: theme.palette.border.light,
-    borderLeftWidth: 1,
-    height: theme.spacing(4),
-  },
-  extra: {
-    [theme.breakpoints.down("md")]: {
-      display: "none",
-    },
-  },
 }));
 
+/**
+ * Get translated text.
+ */
 function getMessages(intl) {
   return {
-    filename: intl.formatMessage({ id: "file.attr.name" }),
-    fingerprint: intl.formatMessage({ id: "file.attr.fingerprint" }),
-    quality: intl.formatMessage({ id: "file.attr.quality" }),
     goBack: intl.formatMessage({ id: "actions.goBack" }),
   };
 }
 
+/**
+ * Check if the screen is small.
+ */
+function useSmallScreen() {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down("md"));
+}
+
 function FileSummaryHeader(props) {
   const { file, className } = props;
   const classes = useStyles();
   const history = useHistory();
   const intl = useIntl();
+  const small = useSmallScreen();
   const messages = getMessages(intl);
 
   const back = history.length > 0;
@@ -96,56 +57,19 @@ function FileSummaryHeader(props) {
 
   return (
     <Paper className={clsx(classes.header, className)}>
-      <div className={classes.titleGroup}>
-        {back && (
-          <IconButton onClick={handleBack} aria-label={messages.goBack}>
-            <ArrowBackOutlinedIcon />
-          </IconButton>
-        )}
-        <div className={classes.iconContainer}>
-          <VideocamOutlinedIcon className={classes.icon} />
-        </div>
-        <AttributeText
-          name={messages.filename}
-          value={file.filename}
-          variant="title"
-          ellipsis
-          className={classes.filename}
-        />
-      </div>
-      <div className={classes.attrsGroup}>
-        <AttributeText
-          name={messages.fingerprint}
-          value={file.fingerprint && file.fingerprint.slice(0, 7)}
-          variant="primary"
-          className={classes.attr}
-        />
-        <div className={classes.divider} />
-        <AttributeText
-          value={formatDuration(file.metadata.length, null, false)}
-          icon={ScheduleOutlinedIcon}
-          variant="normal"
-          className={classes.attr}
-        />
-        <div className={clsx(classes.divider, classes.extra)} />
-        <AttributeText
-          value={formatDate(file.metadata.created, intl)}
-          icon={EventAvailableOutlinedIcon}
-          variant="normal"
-          defaultValue="Unknown"
-          className={clsx(classes.attr, classes.extra)}
-        />
-        <div className={clsx(classes.divider, classes.extra)} />
-        <AttributeText
-          value={formatBool(file.metadata.hasEXIF, intl)}
-          icon={ExifIcon}
-          variant="primary"
-          className={clsx(classes.attr, classes.extra)}
-        />
-        <div className={clsx(classes.divider, classes.extra)} />
-        <VolumeOffOutlinedIcon className={clsx(classes.attr, classes.extra)} />
-        <div className={clsx(classes.divider, classes.extra)} />
-      </div>
+      {back && (
+        <IconButton onClick={handleBack} aria-label={messages.goBack}>
+          <ArrowBackOutlinedIcon />
+        </IconButton>
+      )}
+      <FileSummary file={file} divider className={classes.summary}>
+        <FileSummary.Name />
+        <FileSummary.Fingerprint />
+        <FileSummary.Duration />
+        {!small && <FileSummary.CreationDate />}
+        {!small && <FileSummary.HasExif />}
+        {!small && <FileSummary.HasAudio />}
+      </FileSummary>
     </Paper>
   );
 }
diff --git a/web/src/collection/components/MatchGraph/D3Graph.js b/web/src/collection/components/MatchGraph/D3Graph.js
index 2f67791b..61f59c2c 100644
--- a/web/src/collection/components/MatchGraph/D3Graph.js
+++ b/web/src/collection/components/MatchGraph/D3Graph.js
@@ -1,6 +1,6 @@
 import * as d3 from "d3";
-import { formatDuration } from "../../../common/helpers/format";
-import { basename } from "../../../common/helpers/paths";
+import { LinkTracker, NodeTracker } from "./tracking";
+import { getAdjacency } from "./prepareGraph";
 
 /**
  * Remove all element's children.
@@ -12,71 +12,63 @@ function removeChildren(element) {
 }
 
 const defaultOptions = {
-  nodeRadius: 15,
+  nodeRadius: 10,
+  highlightHover: false,
 };
 
-/**
- * Class to calculate position relative to node.
- */
-class NodeTracker {
-  constructor(node, indent) {
-    this.node = node;
-    this.indent = { x: 0, y: 0, ...indent };
-  }
-  track() {
-    return [this.node.x + this.indent.x, this.node.y + this.indent.y];
-  }
-}
-
-/**
- * Class to calculate position relative to mouse pointer.
- */
-class MouseTracker {
-  constructor(indent) {
-    this.indent = { x: 0, y: 0, ...indent };
-  }
-  track(event, element) {
-    if (event == null) {
-      return [undefined, undefined];
-    }
-    const [x, y] = d3.pointer(event, element);
-    return [x + this.indent.x, y + this.indent.y];
-  }
+function edgeWidth(edge) {
+  return Math.sqrt(50 * (1 - edge.distance));
 }
 
-class Tooltip {
-  constructor({ text, container, tracker }) {
-    this.tracker = tracker;
-    this.text = container.append("text").text(text);
-  }
+const colorScheme = {
+  normal: {
+    origin: "#000000",
+    child: "#F75537",
+    grandChild: "#FF846D",
+  },
+  inactive: {
+    origin: "#5F5F5F",
+    child: "#F9C8BF",
+    grandChild: "#FBD6CF",
+  },
+};
 
-  move(event) {
-    const [x, y] = this.tracker.track(event, this.text.node());
-    if (x != null && y != null) {
-      this.text.attr("x", x).attr("y", y);
+function nodeHoverPainter(hovered, adjacency, scheme) {
+  const adjacentColor = color(scheme.normal);
+  const nonAdjacentColor = color(scheme.inactive);
+  return (node) => {
+    if (node.id === hovered.id || adjacency.get(hovered.id).has(node.id)) {
+      return adjacentColor(node);
     }
-  }
-
-  remove() {
-    this.text.remove();
-  }
+    return nonAdjacentColor(node);
+  };
 }
 
-function edgeWidth(edge) {
-  return Math.sqrt(100 * (1 - edge.distance));
+function linkHoverPainter(hovered, scheme) {
+  const adjacentColor = color(scheme.normal);
+  const nonAdjacentColor = color(scheme.inactive);
+  return (node) => {
+    if (node.id === hovered.source.id || node.id === hovered.target.id) {
+      return adjacentColor(node);
+    }
+    return nonAdjacentColor(node);
+  };
 }
 
-function fileTooltip(file) {
-  const filename = basename(file.filename);
-  const duration = formatDuration(file.metadata.length, null, false);
-  return `${filename} - ${duration}`;
+function color(scheme) {
+  return (node) => {
+    switch (node.generation) {
+      case 0:
+        return scheme.origin;
+      case 1:
+        return scheme.child;
+      default:
+        return scheme.grandChild;
+    }
+  };
 }
 
-const colorScheme = {
-  1: "#2ca02c",
-  2: "#1f77b4",
-  3: "#ff7f0e",
-};
+const noop = () => {};
 
 export default class D3Graph {
   constructor({
@@ -84,7 +76,12 @@ export default class D3Graph {
     nodes,
     container,
     classes = {},
-    onClick = () => {},
+    onClickNode = noop,
+    onMouseOverNode = noop,
+    onMouseOutNode = noop,
+    onMouseOverLink = noop,
+    onMouseOutLink = noop,
+    onClickEdge = noop,
     options = {},
   }) {
     this.links = links.map(Object.create);
@@ -95,21 +92,24 @@ export default class D3Graph {
     this.classes = classes;
     this.updateSize = null;
     this.simulation = null;
-    this.onClick = onClick;
+    this.onClickNode = onClickNode;
+    this.onClickEdge = onClickEdge;
+    this.onMouseOverNode = onMouseOverNode;
+    this.onMouseOutNode = onMouseOutNode;
+    this.onMouseOverLink = onMouseOverLink;
+    this.onMouseOutLink = onMouseOutLink;
     this.options = {
       ...defaultOptions,
       ...options,
     };
-    this._tooltip = null;
+    this.adjacency = getAdjacency(links, nodes);
+    this._tracker = null;
   }
 
   /**
    * Display graph.
    */
   display() {
-    const scale = d3.scaleOrdinal(d3.schemeCategory10);
-    const color = (d) => colorScheme[d.group] || scale(d.group);
-
     this.simulation = this._createForceSimulation();
 
     removeChildren(this.container);
@@ -129,30 +129,21 @@ export default class D3Graph {
     // Bind this for legacy context handling
     const self = this;
 
-    const link = svg
+    const links = svg
       .append("g")
       .attr("stroke", "#999")
       .selectAll("line")
       .data(this.links)
       .join("line")
       .attr("stroke-opacity", (d) => 1 - d.distance)
+      .attr("opacity", 1.0)
       .attr("stroke-width", (d) => edgeWidth(d))
-      .on("mouseover", function (event, edge) {
-        d3.select(this).attr("stroke-width", (d) => 1.5 * edgeWidth(d));
-        self.tooltip = new Tooltip({
-          text: edge.distance.toFixed(4),
-          container: svg,
-          tracker: new MouseTracker({ x: 15 }),
-        });
-        self.tooltip.move(event);
-      })
-      .on("mouseout", function () {
-        d3.select(this).attr("stroke-width", (d) => edgeWidth(d));
-        self.tooltip = null;
+      .on("click", (_, edge) => {
+        this.onClickEdge({ source: edge.source.id, target: edge.target.id });
       })
       .style("cursor", "pointer");
 
-    const node = svg
+    const nodes = svg
       .append("g")
       .attr("stroke", "rgba(0,0,0,0)")
       .attr("stroke-width", 1.5)
@@ -160,48 +151,63 @@ export default class D3Graph {
       .data(this.nodes)
       .join("circle")
       .attr("r", this.options.nodeRadius)
-      .attr("fill", color)
+      .attr("fill", color(colorScheme.normal))
       .call(this._createDrag(this.simulation))
-      .on("click", (_, data) => {
-        const node = this.nodes[data.index];
-        this.onClick(node);
+      .on("click", (_, node) => {
+        this.onClickNode(node);
       })
-      .on("mouseover", function (event, node) {
-        d3.select(this).attr("r", self.options.nodeRadius * 1.5);
+      .style("cursor", "pointer");
 
-        self.tooltip = new Tooltip({
-          text: fileTooltip(node.file),
-          container: svg,
-          tracker: new NodeTracker(node, {
-            x: self.options.nodeRadius * 2,
-            y: self.options.nodeRadius * 0.25,
-          }),
-        });
-        self.tooltip.move(event);
-      })
-      .on("mouseout", function () {
-        self.tooltip = null;
-        d3.select(this).attr("r", self.options.nodeRadius);
+    // Define mouse hover listeners for links
+    links
+      .on("mouseenter", function (event, edge) {
+        self.tracker = self.makeLinkTracker(this, edge);
+        self.tracker.track(event);
+        if (self.options.highlightHover) {
+          nodes.attr("fill", linkHoverPainter(edge, colorScheme));
+          links.attr("opacity", (ln) => (ln === edge ? 1.0 : 0.4));
+        }
       })
-      .style("cursor", "pointer");
+      .on("mouseleave", function () {
+        self.tracker = null;
+        if (self.options.highlightHover) {
+          nodes.attr("fill", color(colorScheme.normal));
+          links.attr("opacity", 1.0);
+        }
+      });
 
-    // node.append("title").text((data) => {
-    //   const filename = basename(data.file.filename);
-    //   const duration = formatDuration(data.file.metadata.length, null, false);
-    //   return `${filename} ${duration}`;
-    // });
-    //
-    // link.append("title").text((data) => data.distance.toFixed(4));
+    // Define mouse hover listeners for links
+    nodes
+      .on("mouseenter", function (event, node) {
+        self.tracker = self.makeNodeTracker(this, node);
+        self.tracker.track(event);
+        if (self.options.highlightHover) {
+          nodes.attr(
+            "fill",
+            nodeHoverPainter(node, self.adjacency, colorScheme)
+          );
+          links.attr("opacity", (ln) =>
+            ln.source.id === node.id || ln.target.id === node.id ? 1.0 : 0.4
+          );
+        }
+      })
+      .on("mouseleave", function () {
+        self.tracker = null;
+        if (self.options.highlightHover) {
+          nodes.attr("fill", color(colorScheme.normal));
+          links.attr("opacity", 1.0);
+        }
+      });
 
     this.simulation.on("tick", () => {
-      link
+      links
         .attr("x1", (d) => d.source.x)
         .attr("y1", (d) => d.source.y)
         .attr("x2", (d) => d.target.x)
         .attr("y2", (d) => d.target.y);
 
-      node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
-      this.tooltip?.move();
+      nodes.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
+      this.tracker?.track();
     });
 
     this.updateSize = () => {
@@ -233,13 +239,13 @@ export default class D3Graph {
       }
       event.subject.fx = event.subject.x;
       event.subject.fy = event.subject.y;
-      this.tooltip?.move(event);
+      this.tracker?.track();
     };
 
     const dragged = (event) => {
       event.subject.fx = event.x;
       event.subject.fy = event.y;
-      this.tooltip?.move(event);
+      this.tracker?.track();
     };
 
     const dragEnded = (event) => {
@@ -248,7 +254,7 @@ export default class D3Graph {
       }
       event.subject.fx = null;
       event.subject.fy = null;
-      this.tooltip?.move(event);
+      this.tracker?.track();
     };
 
     return d3
@@ -271,21 +277,21 @@ export default class D3Graph {
         d3
           .forceLink(this.links)
           .id((d) => d.id)
-          .strength((d) => 0.1 * (1 - d.distance))
+          .strength((d) => 1 - d.distance)
       )
       .force("charge", d3.forceManyBody().strength(-400))
       .force("center", d3.forceCenter(this.width / 2, this.height / 2));
   }
 
-  get tooltip() {
-    return this._tooltip;
+  get tracker() {
+    return this._tracker;
   }
 
-  set tooltip(tooltip) {
-    if (this._tooltip != null) {
-      this._tooltip.remove();
+  set tracker(tracker) {
+    if (this._tracker != null) {
+      this._tracker.remove();
     }
-    this._tooltip = tooltip;
+    this._tracker = tracker;
   }
 
   /**
@@ -302,4 +308,22 @@ export default class D3Graph {
       this.simulation = null;
     }
   }
+
+  makeNodeTracker(element, node) {
+    return new NodeTracker(
+      element,
+      node,
+      this.onMouseOverNode,
+      this.onMouseOutNode
+    );
+  }
+
+  makeLinkTracker(element, link) {
+    return new LinkTracker(
+      element,
+      link,
+      this.onMouseOverLink,
+      this.onMouseOutLink
+    );
+  }
 }
diff --git a/web/src/collection/components/MatchGraph/LinkTooltip.js b/web/src/collection/components/MatchGraph/LinkTooltip.js
new file mode 100644
index 00000000..e1b394a8
--- /dev/null
+++ b/web/src/collection/components/MatchGraph/LinkTooltip.js
@@ -0,0 +1,99 @@
+import React from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/styles";
+import Distance from "../../../common/components/Distance";
+import Paper from "@material-ui/core/Paper";
+import VideocamOutlinedIcon from "@material-ui/icons/VideocamOutlined";
+import { basename } from "../../../common/helpers/paths";
+import { formatDuration } from "../../../common/helpers/format";
+import { useIntl } from "react-intl";
+import FileType from "../FileBrowserPage/FileType";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(1),
+  },
+  distance: {
+    minWidth: 200,
+  },
+  fileContainer: {
+    display: "flex",
+    alignItems: "center",
+    paddingBottom: theme.spacing(1),
+  },
+  name: {
+    ...theme.mixins.textEllipsis,
+    ...theme.mixins.title5,
+    flexGrow: 1,
+    maxWidth: 300,
+    marginRight: theme.spacing(1),
+  },
+  icon: {
+    color: theme.palette.primary.contrastText,
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+  },
+  iconContainer: {
+    backgroundColor: theme.palette.primary.main,
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    marginRight: theme.spacing(1),
+  },
+  duration: {
+    ...theme.mixins.valueNormal,
+    color: theme.palette.primary.main,
+  },
+}));
+
+function LinkTooltip(props) {
+  const { link, className, ...other } = props;
+  const classes = useStyles();
+  const intl = useIntl();
+
+  return (
+    <Paper className={clsx(classes.root, className)} {...other}>
+      <div className={classes.fileContainer}>
+        <div className={classes.iconContainer}>
+          <VideocamOutlinedIcon className={classes.icon} />
+        </div>
+        <div className={classes.name}>
+          {basename(link.source.file.filename)}
+        </div>
+        <div className={classes.duration}>
+          {formatDuration(link.source.file.metadata.length, intl)}
+        </div>
+      </div>
+      <div className={classes.fileContainer}>
+        <div className={classes.iconContainer}>
+          <VideocamOutlinedIcon className={classes.icon} />
+        </div>
+        <div className={classes.name}>
+          {basename(link.target.file.filename)}
+        </div>
+        <div className={classes.duration}>
+          {formatDuration(link.target.file.metadata.length, intl)}
+        </div>
+      </div>
+      <Distance value={link.distance} dense className={classes.distance} />
+    </Paper>
+  );
+}
+
+LinkTooltip.propTypes = {
+  /**
+   * Link being summarized.
+   */
+  link: PropTypes.shape({
+    distance: PropTypes.number.isRequired,
+    source: FileType.isRequired,
+    target: FileType.isRequired,
+  }),
+  className: PropTypes.string,
+};
+
+export default LinkTooltip;
diff --git a/web/src/collection/components/MatchGraph/MatchGraph.js b/web/src/collection/components/MatchGraph/MatchGraph.js
index dde0df67..f80e2a80 100644
--- a/web/src/collection/components/MatchGraph/MatchGraph.js
+++ b/web/src/collection/components/MatchGraph/MatchGraph.js
@@ -7,6 +7,11 @@ import MatchType from "../FileMatchesPage/MatchType";
 import FileType from "../FileBrowserPage/FileType";
 import { useHistory } from "react-router-dom";
 import { routes } from "../../../routing/routes";
+import prepareGraph from "./prepareGraph";
+import useTooltip from "./useTooltip";
+import NodeTooltip from "./NodeTooltip";
+import LinkTooltip from "./LinkTooltip";
+import comparisonURL from "./helpers";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -24,54 +29,19 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: theme.spacing(2),
     boxShadow: "0 12px 18px 0 rgba(0,0,0,0.08)",
   },
+  popover: {
+    position: "fixed",
+    marginLeft: theme.spacing(3),
+  },
 }));
 
-/**
- * Get collection of links compatible with D3Graph.
- */
-function getLinks(source, matches) {
-  return matches.map((match) => ({
-    source: match.source,
-    target: match.target,
-    distance: match.distance,
-  }));
-}
-
-/**
- * Get collection of nodes compatible with D3Graph
- */
-function getNodes(source, files, matches) {
-  const children = new Set();
-  for (const match of matches) {
-    if (match.source === source.id) {
-      children.add(match.target);
-    } else if (match.target === source.id) {
-      children.add(match.source);
-    }
-  }
-  const group = (file) => {
-    if (file.id === source.id) {
-      return 1;
-    } else if (children.has(file.id)) {
-      return 2;
-    }
-    return 3;
-  };
-  return [
-    ...Object.values(files).map((file) => ({
-      id: file.id,
-      group: group(file),
-      file: file,
-    })),
-  ];
-}
-
 function MatchGraph(props) {
   const { source, matches, files, className } = props;
   const classes = useStyles();
   const ref = useRef(null);
   const [graph, setGraph] = useState(null);
-
+  const nodeTooltip = useTooltip();
+  const linkTooltip = useTooltip();
   const history = useHistory();
 
   const handleClickFile = useCallback(
@@ -79,26 +49,54 @@ function MatchGraph(props) {
     []
   );
 
+  const handleClickMatch = useCallback(
+    (link) => history.push(comparisonURL(source.id, link)),
+    [source]
+  );
+
   useEffect(() => {
     if (ref.current != null) {
       if (graph != null) {
         graph.cleanup();
       }
+      const { nodes, links } = prepareGraph(source, matches, files);
       const newGraph = new D3Graph({
-        links: getLinks(source, matches),
-        nodes: getNodes(source, files, matches),
+        links,
+        nodes,
         container: ref.current,
         classes: { content: classes.content, tooltip: classes.tooltip },
-        onClick: handleClickFile,
+        onClickNode: handleClickFile,
+        onClickEdge: handleClickMatch,
+        onMouseOverNode: nodeTooltip.onMouseOver,
+        onMouseOutNode: nodeTooltip.onMouseOut,
+        onMouseOverLink: linkTooltip.onMouseOver,
+        onMouseOutLink: linkTooltip.onMouseOut,
+        options: {
+          highlightHover: true,
+        },
       });
       newGraph.display();
       setGraph(newGraph);
     }
-  }, [ref.current, source, matches]);
+  }, [ref.current, source.id]);
 
   return (
     <div className={clsx(classes.root, className)}>
       <svg ref={ref} />
+      {nodeTooltip.show && (
+        <NodeTooltip
+          file={nodeTooltip.data.file}
+          className={classes.popover}
+          style={{ ...nodeTooltip.position }}
+        />
+      )}
+      {linkTooltip.show && (
+        <LinkTooltip
+          link={linkTooltip.data}
+          className={classes.popover}
+          style={{ ...linkTooltip.position }}
+        />
+      )}
     </div>
   );
 }
diff --git a/web/src/collection/components/MatchGraph/NodeTooltip.js b/web/src/collection/components/MatchGraph/NodeTooltip.js
new file mode 100644
index 00000000..e7a4d08e
--- /dev/null
+++ b/web/src/collection/components/MatchGraph/NodeTooltip.js
@@ -0,0 +1,72 @@
+import React from "react";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/styles";
+import FileType from "../FileBrowserPage/FileType";
+import Paper from "@material-ui/core/Paper";
+import VideocamOutlinedIcon from "@material-ui/icons/VideocamOutlined";
+import { basename } from "../../../common/helpers/paths";
+import { formatDuration } from "../../../common/helpers/format";
+import { useIntl } from "react-intl";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(1),
+    display: "flex",
+    alignItems: "center",
+  },
+  name: {
+    ...theme.mixins.textEllipsis,
+    ...theme.mixins.title5,
+    flexGrow: 1,
+    maxWidth: 300,
+    marginRight: theme.spacing(1),
+  },
+  icon: {
+    color: theme.palette.primary.contrastText,
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+  },
+  iconContainer: {
+    backgroundColor: theme.palette.primary.main,
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    marginRight: theme.spacing(1),
+  },
+  duration: {
+    ...theme.mixins.valueNormal,
+    color: theme.palette.primary.main,
+  },
+}));
+
+function NodeTooltip(props) {
+  const { file, className, ...other } = props;
+  const classes = useStyles();
+  const intl = useIntl();
+
+  return (
+    <Paper className={clsx(classes.root, className)} {...other}>
+      <div className={classes.iconContainer}>
+        <VideocamOutlinedIcon className={classes.icon} />
+      </div>
+      <div className={classes.name}>{basename(file.filename)}</div>
+      <div className={classes.duration}>
+        {formatDuration(file.metadata.length, intl)}
+      </div>
+    </Paper>
+  );
+}
+
+NodeTooltip.propTypes = {
+  /**
+   * File to be summarized.
+   */
+  file: FileType.isRequired,
+  className: PropTypes.string,
+};
+
+export default NodeTooltip;
diff --git a/web/src/collection/components/MatchGraph/helpers.js b/web/src/collection/components/MatchGraph/helpers.js
new file mode 100644
index 00000000..328925e5
--- /dev/null
+++ b/web/src/collection/components/MatchGraph/helpers.js
@@ -0,0 +1,15 @@
+import { routes } from "../../../routing/routes";
+
+/**
+ * Get comparison page url for the given link.
+ *
+ * @param origin id of the mother file.
+ * @param link graph link between two related files.
+ */
+export default function comparisonURL(origin, link) {
+  const [source, target] =
+    link.source === origin
+      ? [link.source, link.target]
+      : [link.target, link.source];
+  return routes.collection.fileComparisonURL(source, target);
+}
diff --git a/web/src/collection/components/MatchGraph/prepareGraph.js b/web/src/collection/components/MatchGraph/prepareGraph.js
new file mode 100644
index 00000000..9097ad8f
--- /dev/null
+++ b/web/src/collection/components/MatchGraph/prepareGraph.js
@@ -0,0 +1,97 @@
+/**
+ * For each node create a data structure expected by the D3Graph
+ * and return nodes as an index (node.id => node).
+ */
+function createNodes(files) {
+  return Object.values(files).map((file) => ({
+    id: file.id,
+    file: file,
+  }));
+}
+
+/**
+ * Convert matches to links expected byt the D3Graph class.
+ */
+function createLinks(matches) {
+  return matches.map((match) => ({
+    source: match.source,
+    target: match.target,
+    distance: match.distance,
+  }));
+}
+
+/**
+ * Calculate adjacency table (node.id => set of adjacent node ids).
+ */
+export function getAdjacency(links, nodes) {
+  const adjacency = new Map();
+  for (let node of nodes) {
+    adjacency.set(node.id, new Set());
+  }
+  for (let link of links) {
+    adjacency.get(link.source).add(link.target);
+    adjacency.get(link.target).add(link.source);
+  }
+  return adjacency;
+}
+
+/**
+ * Calculate node generation for each node, where generation is a length
+ * of shortest path from the origin node to the given node.
+ *
+ * @param origin origin node id
+ * @param adjacency mapping: node.id => set of adjacent node ids.
+ * @returns {Map<number, number>} node generation by id.
+ */
+function getNodeGenerations(origin, adjacency) {
+  const generations = new Map();
+  generations.set(origin, 0);
+  const seen = new Set([origin]);
+
+  let generation = 0;
+  let currentGeneration = new Set([origin]);
+  let nextGeneration = new Set();
+  while (currentGeneration.size > 0) {
+    for (const parent of currentGeneration) {
+      for (const child of adjacency.get(parent)) {
+        if (!seen.has(child)) {
+          generations.set(child, generation + 1);
+          nextGeneration.add(child);
+          seen.add(child);
+        }
+      }
+      generation += 1;
+      currentGeneration = nextGeneration;
+      nextGeneration = new Set();
+    }
+  }
+  return generations;
+}
+
+/**
+ * Prepare nodes and links as expected by D3Graph class.
+ *
+ * @param originFile mother file.
+ * @param matches list of matches
+ * @param files list of related files
+ * @returns {{nodes: any[], links: any[]}}
+ */
+export default function prepareGraph(originFile, matches, files) {
+  const nodes = createNodes(files);
+  const links = createLinks(matches);
+  const adjacency = getAdjacency(links, nodes);
+  const nodeGenerations = getNodeGenerations(originFile.id, adjacency);
+
+  for (const node of nodes.values()) {
+    node.generation = nodeGenerations.get(node.id);
+  }
+
+  for (const link of links) {
+    link.generation = Math.min(
+      nodeGenerations.get(link.source),
+      nodeGenerations.get(link.target)
+    );
+  }
+
+  return { links, nodes };
+}
diff --git a/web/src/collection/components/MatchGraph/tracking.js b/web/src/collection/components/MatchGraph/tracking.js
new file mode 100644
index 00000000..b58e951c
--- /dev/null
+++ b/web/src/collection/components/MatchGraph/tracking.js
@@ -0,0 +1,57 @@
+/**
+ * Class to calculate position relative to node.
+ */
+export class NodeTracker {
+  constructor(element, node, onMove, onRemove) {
+    this.element = element;
+    this.node = node;
+    this.onMove = onMove;
+    this.onRemove = onRemove;
+  }
+
+  /**
+   * Call move listener.
+   */
+  track() {
+    const clientRect = this.element.getBoundingClientRect();
+    const position = {
+      top: clientRect.top,
+      left: clientRect.left + clientRect.width,
+    };
+    this.onMove(this.element, this.node, position);
+  }
+
+  remove() {
+    this.onRemove(this.element, this.node);
+  }
+}
+
+/**
+ * Class to calculate position relative to link.
+ */
+export class LinkTracker {
+  constructor(element, link, onMove, onRemove) {
+    this.element = element;
+    this.link = link;
+    this.onMove = onMove;
+    this.onRemove = onRemove;
+  }
+
+  /**
+   * Call move listener.
+   */
+  track(event) {
+    if (event == null) {
+      return;
+    }
+    const position = {
+      top: event.clientY,
+      left: event.clientX,
+    };
+    this.onMove(this.element, this.link, position);
+  }
+
+  remove() {
+    this.onRemove(this.element, this.link);
+  }
+}
diff --git a/web/src/collection/components/MatchGraph/useTooltip.js b/web/src/collection/components/MatchGraph/useTooltip.js
new file mode 100644
index 00000000..638e656b
--- /dev/null
+++ b/web/src/collection/components/MatchGraph/useTooltip.js
@@ -0,0 +1,33 @@
+import { useCallback, useState } from "react";
+
+/**
+ * Manage state and callbacks required for interactive tooltip.
+ */
+export default function useTooltip() {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [show, setShow] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const [data, setData] = useState(null);
+
+  const onMouseOver = useCallback((element, data, position) => {
+    setAnchorEl(element);
+    setPosition(position);
+    setData(data);
+    setShow(true);
+  }, []);
+
+  const onMouseOut = useCallback(() => {
+    setShow(false);
+    setAnchorEl(null);
+    setData(null);
+  }, []);
+
+  return {
+    data,
+    show,
+    anchorEl,
+    position,
+    onMouseOver,
+    onMouseOut,
+  };
+}
diff --git a/web/src/i18n/locales/default.en-US.json b/web/src/i18n/locales/default.en-US.json
index 94883021..97ef7f46 100644
--- a/web/src/i18n/locales/default.en-US.json
+++ b/web/src/i18n/locales/default.en-US.json
@@ -177,6 +177,8 @@
     "filter.creationDate.help": "Based on file creation date.",
     "preview.notAvailable": "Preview not available.",
     "match.load.error": "Error loading matches.",
+    "match.notMatch": "Match not found.",
+    "match.noMatches": "No matches found.",
     "video.error.missing": "File Missing",
     "video.error.load": "Loading Error",
     "video.error.playback": "Playback Error"
diff --git a/web/src/routing/routes.js b/web/src/routing/routes.js
index 58cf0d9a..31fa366c 100644
--- a/web/src/routing/routes.js
+++ b/web/src/routing/routes.js
@@ -18,7 +18,7 @@ export const routes = {
       return `${this.file}/cluster`;
     },
     get fileComparison() {
-      return `${this.file}/compare`;
+      return `${this.file}/compare/:matchFileId?`;
     },
     fileURL(id) {
       return `${this.fingerprints}/${id}`;
@@ -29,8 +29,8 @@ export const routes = {
     fileClusterURL(id) {
       return `${this.fileURL(id)}/cluster`;
     },
-    fileComparisonURL(id) {
-      return `${this.fileURL(id)}/compare`;
+    fileComparisonURL(id, matchFileId = "") {
+      return `${this.fileURL(id)}/compare/${matchFileId}`;
     },
   },
   database: {