diff --git a/jupyterlab_git/git.py b/jupyterlab_git/git.py
index 9975a009e..9e27650a8 100644
--- a/jupyterlab_git/git.py
+++ b/jupyterlab_git/git.py
@@ -616,11 +616,17 @@ async def detailed_log(self, selected_hash, path):
             "modified_files": result,
         }
 
-    async def diff(self, path):
+    async def diff(self, path, previous=None, current=None):
         """
         Execute git diff command & return the result.
         """
         cmd = ["git", "diff", "--numstat", "-z"]
+
+        if previous:
+            cmd.append(previous)
+            if current:
+                cmd.append(current)
+
         code, my_output, my_error = await execute(cmd, cwd=path)
 
         if code != 0:
diff --git a/jupyterlab_git/handlers.py b/jupyterlab_git/handlers.py
index 7b16ef009..769f93516 100644
--- a/jupyterlab_git/handlers.py
+++ b/jupyterlab_git/handlers.py
@@ -255,10 +255,19 @@ class GitDiffHandler(GitHandler):
     @tornado.web.authenticated
     async def post(self, path: str = ""):
         """
-        POST request handler, fetches differences between commits & current working
+        POST request handler, fetches differences between two states
         tree.
         """
-        my_output = await self.git.diff(self.url2localpath(path))
+        data = self.get_json_body()
+
+        if data:
+            my_output = await self.git.diff(
+                self.url2localpath(path),
+                data.get("previous"),
+                data.get("current"),
+            )
+        else:
+            my_output = await self.git.diff(self.url2localpath(path))
 
         if my_output["code"] != 0:
             self.set_status(500)
diff --git a/src/components/CommitComparisonBox.tsx b/src/components/CommitComparisonBox.tsx
new file mode 100644
index 000000000..2bbec46b2
--- /dev/null
+++ b/src/components/CommitComparisonBox.tsx
@@ -0,0 +1,308 @@
+import { TranslationBundle } from '@jupyterlab/translation';
+import {
+  caretDownIcon,
+  caretRightIcon,
+  fileIcon
+} from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+import * as React from 'react';
+import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { classes } from 'typestyle';
+import { getDiffProvider } from '../model';
+import {
+  clickableSpanStyle,
+  commitComparisonBoxChangedFileListStyle,
+  commitComparisonBoxDetailStyle
+} from '../style/CommitComparisonBox';
+import {
+  changeStageButtonStyle,
+  sectionAreaStyle,
+  sectionHeaderLabelStyle
+} from '../style/GitStageStyle';
+import {
+  deletionsMadeIcon,
+  diffIcon,
+  insertionsMadeIcon
+} from '../style/icons';
+import {
+  commitClass,
+  commitDetailFileClass,
+  commitDetailHeaderClass,
+  commitOverviewNumbersClass,
+  deletionsIconClass,
+  fileListClass,
+  iconClass,
+  insertionsIconClass
+} from '../style/SinglePastCommitInfo';
+import { Git, IGitExtension } from '../tokens';
+import { ActionButton } from './ActionButton';
+import { FilePath } from './FilePath';
+
+const ITEM_HEIGHT = 24; // File list item height
+
+interface ICommitComparisonBoxHeaderProps {
+  collapsible: boolean;
+  collapsed?: boolean;
+  label?: string;
+  trans: TranslationBundle;
+  onCollapseExpand?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  onClickCancel?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+
+const CommitComparisonBoxHeader: React.VFC<ICommitComparisonBoxHeaderProps> = (
+  props: ICommitComparisonBoxHeaderProps
+) => {
+  return (
+    <div className={sectionAreaStyle} onClick={props.onCollapseExpand}>
+      {props.collapsible && (
+        <button className={changeStageButtonStyle}>
+          {props.collapsed ? <caretRightIcon.react /> : <caretDownIcon.react />}
+        </button>
+      )}
+      <span className={sectionHeaderLabelStyle}>{props.label}</span>
+      {props.onClickCancel && (
+        <span className={clickableSpanStyle} onClick={props.onClickCancel}>
+          {props.trans.__('Cancel')}
+        </span>
+      )}
+    </div>
+  );
+};
+
+interface ICommitComparisonBoxOverviewProps {
+  totalFiles: number;
+  totalInsertions: number;
+  totalDeletions: number;
+  trans: TranslationBundle;
+}
+
+const CommitComparisonBoxOverview: React.VFC<ICommitComparisonBoxOverviewProps> =
+  (props: ICommitComparisonBoxOverviewProps) => {
+    return (
+      <div className={commitClass}>
+        <div className={commitOverviewNumbersClass}>
+          <span title={props.trans.__('# Files Changed')}>
+            <fileIcon.react className={iconClass} tag="span" />
+            {props.totalFiles}
+          </span>
+          <span title={props.trans.__('# Insertions')}>
+            <insertionsMadeIcon.react
+              className={classes(iconClass, insertionsIconClass)}
+              tag="span"
+            />
+            {props.totalInsertions}
+          </span>
+          <span title={props.trans.__('# Deletions')}>
+            <deletionsMadeIcon.react
+              className={classes(iconClass, deletionsIconClass)}
+              tag="span"
+            />
+            {props.totalDeletions}
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+interface ICommitComparisonBoxChangedFileListProps {
+  files: Git.ICommitModifiedFile[];
+  trans: TranslationBundle;
+  onOpenDiff?: (
+    filePath: string,
+    isText: boolean,
+    previousFilePath?: string
+  ) => (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+}
+
+class CommitComparisonBoxChangedFileList extends React.Component<ICommitComparisonBoxChangedFileListProps> {
+  render() {
+    return (
+      <div className={commitComparisonBoxDetailStyle}>
+        <div className={commitDetailHeaderClass}>
+          {this.props.trans.__('Changed')}
+        </div>
+        {this.props.files.length > 0 && (
+          <FixedSizeList
+            className={classes(
+              commitComparisonBoxChangedFileListStyle,
+              fileListClass
+            )}
+            height={this.props.files.length * ITEM_HEIGHT}
+            innerElementType={'ul'}
+            itemCount={this.props.files.length}
+            itemData={this.props.files}
+            itemKey={(index, data) => data[index].modified_file_path}
+            itemSize={ITEM_HEIGHT}
+            style={{ overflowX: 'hidden' }}
+            width={'auto'}
+          >
+            {this._renderFile}
+          </FixedSizeList>
+        )}
+      </div>
+    );
+  }
+  /**
+   * Renders a modified file.
+   *
+   * @param props Row properties
+   * @returns React element
+   */
+  private _renderFile = (
+    props: ListChildComponentProps<Git.ICommitModifiedFile[]>
+  ): JSX.Element => {
+    const { data, index, style } = props;
+    const file = data[index];
+    const path = file.modified_file_path;
+    const previous = file.previous_file_path;
+    const flg = !!getDiffProvider(path) || !file.is_binary;
+    return (
+      <li
+        className={commitDetailFileClass}
+        onClick={this.props.onOpenDiff(path, flg, previous)}
+        style={style}
+        title={path}
+      >
+        <FilePath filepath={path} filetype={file.type} />
+        {flg ? (
+          <ActionButton
+            icon={diffIcon}
+            title={this.props.trans.__('View file changes')}
+          />
+        ) : null}
+      </li>
+    );
+  };
+}
+
+interface ICommitComparisonBoxBodyProps {
+  files: Git.ICommitModifiedFile[];
+  show: boolean;
+  trans: TranslationBundle;
+  onOpenDiff?: (
+    filePath: string,
+    isText: boolean,
+    previousFilePath?: string
+  ) => (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+}
+
+const CommitComparisonBoxBody: React.VFC<ICommitComparisonBoxBodyProps> = (
+  props: ICommitComparisonBoxBodyProps
+) => {
+  const totalInsertions = props.files.reduce((acc, file) => {
+    const insertions = Number.parseInt(file.insertion, 10);
+    return acc + (Number.isNaN(insertions) ? 0 : insertions);
+  }, 0);
+  const totalDeletions = props.files.reduce((acc, file) => {
+    const deletions = Number.parseInt(file.deletion, 10);
+    return acc + (Number.isNaN(deletions) ? 0 : deletions);
+  }, 0);
+  return (
+    <React.Fragment>
+      <CommitComparisonBoxOverview
+        totalDeletions={totalDeletions}
+        totalFiles={props.files.length}
+        totalInsertions={totalInsertions}
+        trans={props.trans}
+      />
+      <CommitComparisonBoxChangedFileList
+        files={props.files}
+        onOpenDiff={props.onOpenDiff}
+        trans={props.trans}
+      />
+    </React.Fragment>
+  );
+};
+
+/**
+ * Interface describing ComparisonBox component properties.
+ */
+export interface ICommitComparisonBoxProps {
+  /**
+   * Is this collapsible?
+   */
+  collapsible: boolean;
+
+  /**
+   * Jupyter App commands registry.
+   */
+  commands: CommandRegistry;
+
+  /**
+   * The commit to compare against.
+   */
+  referenceCommit: Git.ISingleCommitInfo | null;
+
+  /**
+   * The commit to compare.
+   */
+  challengerCommit: Git.ISingleCommitInfo | null;
+
+  /**
+   * The commit comparison result.
+   */
+  changedFiles: Git.ICommitModifiedFile[] | null;
+
+  /**
+   * Header text.
+   */
+  header: string;
+
+  /**
+   * Extension data model.
+   */
+  model: IGitExtension;
+
+  /**
+   * The application language translator.
+   */
+  trans: TranslationBundle;
+
+  /**
+   * Returns a callback to be invoked on clicking cancel.
+   */
+  onCancel?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+
+  /**
+   * Returns a callback to be invoked on click to display a file diff.
+   *
+   * @param filePath file path
+   * @param isText indicates whether the file supports displaying a diff
+   * @param previousFilePath when file has been relocated
+   * @returns callback
+   */
+  onOpenDiff?: (
+    filePath: string,
+    isText: boolean,
+    previousFilePath?: string
+  ) => (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+}
+
+/**
+ * A component which displays a comparison between two commits.
+ */
+export const CommitComparisonBox: React.VFC<ICommitComparisonBoxProps> = (
+  props: ICommitComparisonBoxProps
+) => {
+  const [collapsed, setCollapsed] = React.useState<boolean>(false);
+  return (
+    <React.Fragment>
+      <CommitComparisonBoxHeader
+        collapsible={props.collapsible}
+        collapsed={collapsed}
+        label={props.header}
+        onCollapseExpand={() => setCollapsed(!collapsed)}
+        onClickCancel={props.onCancel}
+        trans={props.trans}
+      />
+      {!collapsed && props.changedFiles && (
+        <CommitComparisonBoxBody
+          files={props.changedFiles}
+          onOpenDiff={props.onOpenDiff}
+          show={!collapsed}
+          trans={props.trans}
+        />
+      )}
+    </React.Fragment>
+  );
+};
diff --git a/src/components/GitPanel.tsx b/src/components/GitPanel.tsx
index 6b6818e4e..c79440b0e 100644
--- a/src/components/GitPanel.tsx
+++ b/src/components/GitPanel.tsx
@@ -21,8 +21,10 @@ import {
   warningTextClass
 } from '../style/GitPanel';
 import { CommandIDs, Git, ILogMessage, Level } from '../tokens';
+import { openFileDiff } from '../utils';
 import { GitAuthorForm } from '../widgets/AuthorBox';
 import { CommitBox } from './CommitBox';
+import { CommitComparisonBox } from './CommitComparisonBox';
 import { FileList } from './FileList';
 import { HistorySideBar } from './HistorySideBar';
 import { Toolbar } from './Toolbar';
@@ -130,6 +132,21 @@ export interface IGitPanelState {
    * Whether there are dirty (e.g., unsaved) staged files.
    */
   hasDirtyStagedFiles: boolean;
+
+  /**
+   * The commit to compare against
+   */
+  referenceCommit: Git.ISingleCommitInfo | null;
+
+  /**
+   * The commit to compare
+   */
+  challengerCommit: Git.ISingleCommitInfo | null;
+
+  /**
+   * The commit comparison result
+   */
+  comparedFiles: Git.ICommitModifiedFile[] | null;
 }
 
 /**
@@ -160,7 +177,10 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
       commitSummary: '',
       commitDescription: '',
       commitAmend: false,
-      hasDirtyStagedFiles: hasDirtyStagedFiles
+      hasDirtyStagedFiles: hasDirtyStagedFiles,
+      referenceCommit: null,
+      challengerCommit: null,
+      comparedFiles: null
     };
   }
 
@@ -213,6 +233,29 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
     });
   }
 
+  async componentDidUpdate(
+    _: Readonly<IGitPanelProps>,
+    {
+      referenceCommit: prevReferenceCommit,
+      challengerCommit: prevChallengerCommit,
+      comparedFiles: prevComparedFiles
+    }: Readonly<IGitPanelState>
+  ): Promise<void> {
+    const {
+      referenceCommit: currReferenceCommit,
+      challengerCommit: currChallengerCommit
+    } = this.state;
+
+    const commitsReady = currReferenceCommit && currChallengerCommit;
+    const commitChanged =
+      prevReferenceCommit !== currReferenceCommit ||
+      prevChallengerCommit !== currChallengerCommit;
+
+    if (commitsReady && (!!prevComparedFiles || commitChanged)) {
+      await this._doCommitComparsion();
+    }
+  }
+
   componentWillUnmount(): void {
     // Clear all signal connections
     Signal.clearData(this);
@@ -228,7 +271,10 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
     const { currentBranch } = this.props.model;
 
     this.setState({
-      currentBranch: currentBranch ? currentBranch.name : 'master'
+      currentBranch: currentBranch ? currentBranch.name : 'master',
+      referenceCommit: null,
+      challengerCommit: null,
+      comparedFiles: null
     });
   };
 
@@ -448,13 +494,66 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
    */
   private _renderHistory(): React.ReactElement {
     return (
-      <HistorySideBar
-        branches={this.state.branches}
-        commits={this.state.pastCommits}
-        model={this.props.model}
-        commands={this.props.commands}
-        trans={this.props.trans}
-      />
+      <React.Fragment>
+        <HistorySideBar
+          branches={this.state.branches}
+          commits={this.state.pastCommits}
+          model={this.props.model}
+          commands={this.props.commands}
+          trans={this.props.trans}
+          referenceCommit={this.state.referenceCommit}
+          challengerCommit={this.state.challengerCommit}
+          onSelectForCompare={commit => async event => {
+            event.stopPropagation();
+            this._setCommitComparisonState({ reference: commit });
+          }}
+          onCompareWithSelected={commit => async event => {
+            event.stopPropagation();
+            this._setCommitComparisonState({ challenger: commit });
+          }}
+        />
+        {(this.state.referenceCommit || this.state.challengerCommit) && (
+          <CommitComparisonBox
+            referenceCommit={this.state.referenceCommit}
+            challengerCommit={this.state.challengerCommit}
+            changedFiles={this.state.comparedFiles}
+            model={this.props.model}
+            collapsible={true}
+            commands={this.props.commands}
+            header={`
+              Compare
+              ${
+                this.state.referenceCommit
+                  ? this.state.referenceCommit.commit.substring(0, 7)
+                  : '...'
+              }
+              and
+              ${
+                this.state.challengerCommit
+                  ? this.state.challengerCommit.commit.substring(0, 7)
+                  : '...'
+              }
+            `}
+            trans={this.props.trans}
+            onCancel={event => {
+              event.stopPropagation();
+              this._setCommitComparisonState({
+                reference: null,
+                challenger: null,
+                comparedFiles: null
+              });
+            }}
+            onOpenDiff={
+              this.state.referenceCommit && this.state.challengerCommit
+                ? openFileDiff(this.props.commands)(
+                    this.state.challengerCommit,
+                    this.state.referenceCommit
+                  )
+                : undefined
+            }
+          />
+        )}
+      </React.Fragment>
     );
   }
 
@@ -760,4 +859,73 @@ export class GitPanel extends React.Component<IGitPanelProps, IGitPanelState> {
     }
     return <div>{elem}</div>;
   }
+
+  private _setCommitComparisonState(state: {
+    reference?: Git.ISingleCommitInfo;
+    challenger?: Git.ISingleCommitInfo;
+    comparedFiles?: Git.ICommitModifiedFile[];
+  }): void {
+    this.setState(currentState => ({
+      referenceCommit:
+        typeof state.reference !== 'undefined'
+          ? state.reference
+          : currentState.referenceCommit,
+      challengerCommit:
+        typeof state.challenger !== 'undefined'
+          ? state.challenger
+          : currentState.challengerCommit,
+      comparedFiles:
+        typeof state.comparedFiles !== 'undefined'
+          ? state.comparedFiles
+          : currentState.comparedFiles
+    }));
+  }
+
+  private async _doCommitComparsion(): Promise<void> {
+    let diffResult: Git.IDiffResult = null;
+    try {
+      diffResult = await this.props.model.diff(
+        this.state.referenceCommit.commit,
+        this.state.challengerCommit.commit
+      );
+      if (diffResult.code !== 0) {
+        throw new Error(diffResult.message);
+      }
+    } catch (err) {
+      console.error(
+        `Error while getting the diff for commit ${this.state.referenceCommit} and commit ${this.state.challengerCommit}!`,
+        err
+      );
+      this.props.logger.log({
+        level: Level.ERROR,
+        message: `Error while getting the diff for commit ${this.state.referenceCommit} and commit ${this.state.challengerCommit}!`,
+        error: err
+      });
+      return;
+    }
+    if (diffResult) {
+      this.setState({
+        comparedFiles: diffResult.result.map(changedFile => {
+          const pathParts = changedFile.filename.split('/');
+          const fileName = pathParts[pathParts.length - 1];
+          const filePath = changedFile.filename;
+          return {
+            deletion: changedFile.deletions,
+            insertion: changedFile.insertions,
+            is_binary:
+              changedFile.deletions === '-' || changedFile.insertions === '-',
+            modified_file_name: fileName,
+            modified_file_path: filePath,
+            type: changedFile.filetype
+          } as Git.ICommitModifiedFile;
+        })
+      });
+    } else {
+      this.setState({
+        referenceCommit: null,
+        challengerCommit: null,
+        comparedFiles: null
+      });
+    }
+  }
 }
diff --git a/src/components/HistorySideBar.tsx b/src/components/HistorySideBar.tsx
index b13913e56..78aa01446 100644
--- a/src/components/HistorySideBar.tsx
+++ b/src/components/HistorySideBar.tsx
@@ -2,7 +2,6 @@ import { TranslationBundle } from '@jupyterlab/translation';
 import { closeIcon } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import * as React from 'react';
-import { CommandArguments } from '../commandsAndMenu';
 import { GitExtension } from '../model';
 import { hiddenButtonStyle } from '../style/ActionButtonStyle';
 import {
@@ -10,7 +9,8 @@ import {
   noHistoryFoundStyle,
   selectedHistoryFileStyle
 } from '../style/HistorySideBarStyle';
-import { ContextCommandIDs, Git } from '../tokens';
+import { Git } from '../tokens';
+import { openFileDiff } from '../utils';
 import { ActionButton } from './ActionButton';
 import { FileItem } from './FileItem';
 import { PastCommitNode } from './PastCommitNode';
@@ -44,6 +44,32 @@ export interface IHistorySideBarProps {
    * The application language translator.
    */
   trans: TranslationBundle;
+
+  /**
+   * The commit to compare against.
+   */
+  referenceCommit?: Git.ISingleCommitInfo;
+
+  /**
+   * The commit to compare.
+   */
+  challengerCommit?: Git.ISingleCommitInfo;
+
+  /**
+   * Callback invoked upon clicking to select a commit for comparison.
+   * @param event - event object
+   */
+  onSelectForCompare?: (
+    commit: Git.ISingleCommitInfo
+  ) => (event: React.MouseEvent<HTMLElement, MouseEvent>) => Promise<void>;
+
+  /**
+   * Callback invoked upon clicking to compare a commit against the selected.
+   * @param event - event object
+   */
+  onCompareWithSelected?: (
+    commit: Git.ISingleCommitInfo
+  ) => (event: React.MouseEvent<HTMLElement, MouseEvent>) => Promise<void>;
 }
 
 /**
@@ -62,52 +88,6 @@ export const HistorySideBar: React.FunctionComponent<IHistorySideBarProps> = (
     props.model.selectedHistoryFile = null;
   };
 
-  /**
-   * Curried callback function to display a file diff.
-   *
-   * @param commit Commit data.
-   */
-  const openDiff =
-    (commit: Git.ISingleCommitInfo) =>
-    /**
-     * Returns a callback to be invoked on click to display a file diff.
-     *
-     * @param filePath file path
-     * @param isText indicates whether the file supports displaying a diff
-     * @param previousFilePath when file has been relocated
-     * @returns callback
-     */
-    (filePath: string, isText: boolean, previousFilePath?: string) =>
-    /**
-     * Callback invoked upon clicking to display a file diff.
-     *
-     * @param event - event object
-     */
-    async (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
-      // Prevent the commit component from being collapsed:
-      event.stopPropagation();
-
-      if (isText) {
-        try {
-          props.commands.execute(ContextCommandIDs.gitFileDiff, {
-            files: [
-              {
-                filePath,
-                previousFilePath,
-                isText,
-                context: {
-                  previousRef: commit.pre_commit,
-                  currentRef: commit.commit
-                }
-              }
-            ]
-          } as CommandArguments.IGitFileDiff as any);
-        } catch (err) {
-          console.error(`Failed to open diff view for ${filePath}.\n${err}`);
-        }
-      }
-    };
-
   /**
    * Commit info for 'Uncommitted Changes' history.
    */
@@ -165,7 +145,7 @@ export const HistorySideBar: React.FunctionComponent<IHistorySideBarProps> = (
           // and its diff is viewable
           const onOpenDiff =
             props.model.selectedHistoryFile && !commit.is_binary
-              ? openDiff(commit)(
+              ? openFileDiff(props.commands)(commit)(
                   commit.file_path ?? props.model.selectedHistoryFile.to,
                   !commit.is_binary,
                   commit.previous_file_path
@@ -176,12 +156,20 @@ export const HistorySideBar: React.FunctionComponent<IHistorySideBarProps> = (
             <PastCommitNode
               key={commit.commit}
               {...commonProps}
+              isReferenceCommit={
+                commit.commit === props.referenceCommit?.commit
+              }
+              isChallengerCommit={
+                commit.commit === props.challengerCommit?.commit
+              }
               onOpenDiff={onOpenDiff}
+              onSelectForCompare={props.onSelectForCompare(commit)}
+              onCompareWithSelected={props.onCompareWithSelected(commit)}
             >
               {!props.model.selectedHistoryFile && (
                 <SinglePastCommitInfo
                   {...commonProps}
-                  onOpenDiff={openDiff(commit)}
+                  onOpenDiff={openFileDiff(props.commands)(commit)}
                 />
               )}
             </PastCommitNode>
diff --git a/src/components/PastCommitNode.tsx b/src/components/PastCommitNode.tsx
index f9cb2eaa2..6b3cd455e 100644
--- a/src/components/PastCommitNode.tsx
+++ b/src/components/PastCommitNode.tsx
@@ -4,11 +4,17 @@ import { CommandRegistry } from '@lumino/commands';
 import * as React from 'react';
 import { classes } from 'typestyle';
 import { GitExtension } from '../model';
-import { diffIcon } from '../style/icons';
+import {
+  compareWithSelectedIcon,
+  diffIcon,
+  selectForCompareIcon
+} from '../style/icons';
 import {
   branchClass,
   branchWrapperClass,
   commitBodyClass,
+  referenceCommitNodeClass,
+  challengerCommitNodeClass,
   commitExpandedClass,
   commitHeaderClass,
   commitHeaderItemClass,
@@ -20,6 +26,7 @@ import {
   workingBranchClass
 } from '../style/PastCommitNode';
 import { Git } from '../tokens';
+import { ActionButton } from './ActionButton';
 
 /**
  * Interface describing component properties.
@@ -50,6 +57,16 @@ export interface IPastCommitNodeProps {
    */
   trans: TranslationBundle;
 
+  /**
+   * The commit to compare against.
+   */
+  isReferenceCommit?: boolean;
+
+  /**
+   * The commit to compare.
+   */
+  isChallengerCommit?: boolean;
+
   /**
    * Callback invoked upon clicking to display a file diff.
    *
@@ -58,6 +75,22 @@ export interface IPastCommitNodeProps {
   onOpenDiff?: (
     event: React.MouseEvent<HTMLLIElement, MouseEvent>
   ) => Promise<void>;
+
+  /**
+   * Callback invoked upon clicking to select a commit for comparison.
+   * @param event - event object
+   */
+  onSelectForCompare?: (
+    event: React.MouseEvent<HTMLElement, MouseEvent>
+  ) => Promise<void>;
+
+  /**
+   * Callback invoked upon clicking to compare a commit against the selected.
+   * @param event - event object
+   */
+  onCompareWithSelected?: (
+    event: React.MouseEvent<HTMLElement, MouseEvent>
+  ) => Promise<void>;
 }
 
 /**
@@ -104,7 +137,9 @@ export class PastCommitNode extends React.Component<
             ? singleFileCommitClass
             : this.state.expanded
             ? commitExpandedClass
-            : null
+            : null,
+          this.props.isReferenceCommit && referenceCommitNodeClass,
+          this.props.isChallengerCommit && challengerCommitNodeClass
         )}
         title={
           this.props.children
@@ -125,6 +160,22 @@ export class PastCommitNode extends React.Component<
           <span className={commitHeaderItemClass}>
             {this.props.commit.date}
           </span>
+          {!this.props.commit.is_binary && (
+            <React.Fragment>
+              <ActionButton
+                className={iconButtonClass}
+                icon={selectForCompareIcon}
+                title={this.props.trans.__('Select for compare')}
+                onClick={this.props.onSelectForCompare}
+              />
+              <ActionButton
+                className={iconButtonClass}
+                icon={compareWithSelectedIcon}
+                title={this.props.trans.__('Compare with selected')}
+                onClick={this.props.onCompareWithSelected}
+              />
+            </React.Fragment>
+          )}
           {this.props.children ? (
             this.state.expanded ? (
               <caretUpIcon.react className={iconButtonClass} tag="span" />
diff --git a/src/model.ts b/src/model.ts
index f7f100c94..b1f7fe5ae 100644
--- a/src/model.ts
+++ b/src/model.ts
@@ -728,6 +728,42 @@ export class GitExtension implements IGitExtension {
     return data;
   }
 
+  /**
+   * Get the diff of two commits.
+   * If no commit is provided, the diff of HEAD and INDEX is returned.
+   * If the current commit (the commit to compare) is not provided,
+   * the diff of the previous commit and INDEX is returned.
+   *
+   * @param previous - the commit to compare against
+   * @param current - the commit to compare
+   * @returns promise which resolves upon retrieving the diff
+   *
+   * @throws {Git.NotInRepository} If the current path is not a Git repository
+   * @throws {Git.GitResponseError} If the server response is not ok
+   * @throws {ServerConnection.NetworkError} If the request cannot be made
+   */
+  async diff(previous?: string, current?: string): Promise<Git.IDiffResult> {
+    const path = await this._getPathRepository();
+    const data = await this._taskHandler.execute<Git.IDiffResult>(
+      'git:diff',
+      async () => {
+        return await requestAPI<Git.IDiffResult>(
+          URLExt.join(path, 'diff'),
+          'POST',
+          {
+            previous,
+            current
+          }
+        );
+      }
+    );
+    data.result = data.result.map(f => {
+      f.filetype = this._resolveFileType(f.filename);
+      return f;
+    });
+    return data;
+  }
+
   /**
    * Dispose of model resources.
    */
diff --git a/src/style/CommitComparisonBox.ts b/src/style/CommitComparisonBox.ts
new file mode 100644
index 000000000..18a032827
--- /dev/null
+++ b/src/style/CommitComparisonBox.ts
@@ -0,0 +1,33 @@
+import { style } from 'typestyle';
+
+export const clickableSpanStyle = style({
+  cursor: 'pointer'
+});
+
+export const commitComparisonBoxStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+
+  minHeight: '200px',
+
+  marginBlockStart: 0,
+  marginBlockEnd: 0,
+  paddingLeft: 0,
+
+  overflowY: 'auto',
+
+  $nest: {
+    '& button:disabled': {
+      opacity: 0.5
+    }
+  }
+});
+
+export const commitComparisonBoxDetailStyle = style({
+  maxHeight: '25%',
+  overflowY: 'hidden'
+});
+
+export const commitComparisonBoxChangedFileListStyle = style({
+  maxHeight: '100%'
+});
diff --git a/src/style/PastCommitNode.ts b/src/style/PastCommitNode.ts
index 33cea04a1..2b81b82c7 100644
--- a/src/style/PastCommitNode.ts
+++ b/src/style/PastCommitNode.ts
@@ -83,3 +83,11 @@ export const singleFileCommitClass = style({
     }
   }
 });
+
+export const referenceCommitNodeClass = style({
+  borderLeft: '6px solid var(--jp-git-diff-deleted-color)'
+});
+
+export const challengerCommitNodeClass = style({
+  borderLeft: '6px solid var(--jp-git-diff-added-color)'
+});
diff --git a/src/style/icons.ts b/src/style/icons.ts
index 690b5d795..0af7070a3 100644
--- a/src/style/icons.ts
+++ b/src/style/icons.ts
@@ -5,6 +5,7 @@ import addSvg from '../../style/icons/add.svg';
 import branchSvg from '../../style/icons/branch.svg';
 import clockSvg from '../../style/icons/clock.svg';
 import cloneSvg from '../../style/icons/clone.svg';
+import compareWithSelectedSvg from '../../style/icons/compare-with-selected.svg';
 import deletionsMadeSvg from '../../style/icons/deletions.svg';
 import desktopSvg from '../../style/icons/desktop.svg';
 import diffSvg from '../../style/icons/diff.svg';
@@ -17,6 +18,7 @@ import pullSvg from '../../style/icons/pull.svg';
 import pushSvg from '../../style/icons/push.svg';
 import removeSvg from '../../style/icons/remove.svg';
 import rewindSvg from '../../style/icons/rewind.svg';
+import selectForCompareSvg from '../../style/icons/select-for-compare.svg';
 import tagSvg from '../../style/icons/tag.svg';
 import trashSvg from '../../style/icons/trash.svg';
 import verticalMoreSvg from '../../style/icons/vertical-more.svg';
@@ -34,6 +36,10 @@ export const cloneIcon = new LabIcon({
   name: 'git:clone',
   svgstr: cloneSvg
 });
+export const compareWithSelectedIcon = new LabIcon({
+  name: 'git:compare-with-selected',
+  svgstr: compareWithSelectedSvg
+});
 export const deletionsMadeIcon = new LabIcon({
   name: 'git:deletions',
   svgstr: deletionsMadeSvg
@@ -82,6 +88,10 @@ export const rewindIcon = new LabIcon({
   name: 'git:rewind',
   svgstr: rewindSvg
 });
+export const selectForCompareIcon = new LabIcon({
+  name: 'git:select-for-compare',
+  svgstr: selectForCompareSvg
+});
 export const tagIcon = new LabIcon({
   name: 'git:tag',
   svgstr: tagSvg
diff --git a/src/tokens.ts b/src/tokens.ts
index f82d3ed3d..740f34c27 100644
--- a/src/tokens.ts
+++ b/src/tokens.ts
@@ -291,6 +291,22 @@ export interface IGitExtension extends IDisposable {
    */
   detailedLog(hash: string): Promise<Git.ISingleCommitFilePathInfo>;
 
+  /**
+   * Get the diff of two commits.
+   * If no commit is provided, the diff of HEAD and INDEX is returned.
+   * If the current commit (the commit to compare) is not provided,
+   * the diff of the previous commit and INDEX is returned.
+   *
+   * @param previous - the commit to compare against
+   * @param current - the commit to compare
+   * @returns promise which resolves upon retrieving the diff
+   *
+   * @throws {Git.NotInRepository} If the current path is not a Git repository
+   * @throws {Git.GitResponseError} If the server response is not ok
+   * @throws {ServerConnection.NetworkError} If the request cannot be made
+   */
+  diff(previous?: string, current?: string): Promise<Git.IDiffResult>;
+
   /**
    * Ensure a .gitignore file exists
    *
@@ -813,6 +829,21 @@ export namespace Git {
     content: string;
   }
 
+  /**
+   * Interface for GitDiff request result
+   */
+  export interface IDiffResult {
+    code: number;
+    command?: string;
+    message?: string;
+    result?: {
+      insertions: string;
+      deletions: string;
+      filename: string;
+      filetype?: DocumentRegistry.IFileType;
+    }[];
+  }
+
   /**
    * Git repository status
    */
diff --git a/src/utils.ts b/src/utils.ts
index 0d1818842..f4c0a9f17 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,5 +1,7 @@
 import { PathExt } from '@jupyterlab/coreutils';
-import { Git } from './tokens';
+import { CommandRegistry } from '@lumino/commands';
+import { CommandArguments } from './commandsAndMenu';
+import { ContextCommandIDs, Git } from './tokens';
 
 /** Get the filename from a path */
 export function extractFilename(path: string): string {
@@ -52,3 +54,58 @@ export function decodeStage(x: string, y: string): Git.Status {
 export function sleep(ms: number): Promise<void> {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
+
+/**
+ * A callback function to display a file diff between two commits.
+ * @param commands the command registry.
+ * @returns a callback function to display a file diff.
+ */
+export const openFileDiff =
+  (commands: CommandRegistry) =>
+  /**
+   * A callback function to display a file diff between two commits.
+   *
+   * @param commit Commit data.
+   * @param previousCommit Previous commit data to display the diff against. If not specified, the diff will be against the preceding commit.
+   *
+   * @returns A callback function.
+   */
+  (commit: Git.ISingleCommitInfo, previousCommit?: Git.ISingleCommitInfo) =>
+  /**
+   * Returns a callback to be invoked on click to display a file diff.
+   *
+   * @param filePath file path.
+   * @param isText indicates whether the file supports displaying a diff.
+   * @param previousFilePath when file has been relocated.
+   * @returns callback.
+   */
+  (filePath: string, isText: boolean, previousFilePath?: string) =>
+  /**
+   * Callback invoked upon clicking to display a file diff.
+   *
+   * @param event - event object
+   */
+  async (event: React.MouseEvent<HTMLLIElement, MouseEvent>): Promise<void> => {
+    // Prevent the commit component from being collapsed:
+    event.stopPropagation();
+
+    if (isText) {
+      try {
+        commands.execute(ContextCommandIDs.gitFileDiff, {
+          files: [
+            {
+              filePath,
+              previousFilePath,
+              isText,
+              context: {
+                previousRef: previousCommit?.commit ?? commit.pre_commit,
+                currentRef: commit.commit
+              }
+            }
+          ]
+        } as CommandArguments.IGitFileDiff as any);
+      } catch (err) {
+        console.error(`Failed to open diff view for ${filePath}.\n${err}`);
+      }
+    }
+  };
diff --git a/style/icons/compare-with-selected.svg b/style/icons/compare-with-selected.svg
new file mode 100644
index 000000000..8ace65ea2
--- /dev/null
+++ b/style/icons/compare-with-selected.svg
@@ -0,0 +1,6 @@
+<svg width="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g class="jp-icon3 jp-icon-selectable" fill="#4F4F4F">
+    <path d="M9.5 1H3.5C2.675 1 2.0075 1.63 2.0075 2.4L2 13.6C2 14.37 2.6675 15 3.4925 15H12.5C13.325 15 14 14.37 14 13.6V5.2L9.5 1ZM3.5 13.6V2.4H8.75L12.5 5.9V13.6H3.5Z" />
+    <path d="M5,8 L5,9 L7,9 L7,11 L11,8 L7,5 L7,7 L5,7 z" transform="rotate(180 7.75 8)" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/style/icons/select-for-compare.svg b/style/icons/select-for-compare.svg
new file mode 100644
index 000000000..a46860636
--- /dev/null
+++ b/style/icons/select-for-compare.svg
@@ -0,0 +1,6 @@
+<svg width="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g class="jp-icon3 jp-icon-selectable" fill="#4F4F4F">
+    <path d="M9.5 1H3.5C2.675 1 2.0075 1.63 2.0075 2.4L2 13.6C2 14.37 2.6675 15 3.4925 15H12.5C13.325 15 14 14.37 14 13.6V5.2L9.5 1ZM3.5 13.6V2.4H8.75L12.5 5.9V13.6H3.5Z" />
+    <path d="M5,8 L5,9 L7,9 L7,11 L11,8 L7,5 L7,7 L5,7 z" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/tests/test-components/HistorySideBar.spec.tsx b/tests/test-components/HistorySideBar.spec.tsx
index c7e78e6eb..1654edd19 100644
--- a/tests/test-components/HistorySideBar.spec.tsx
+++ b/tests/test-components/HistorySideBar.spec.tsx
@@ -23,7 +23,7 @@ describe('HistorySideBar', () => {
         author: null,
         date: null,
         commit_msg: null,
-        pre_commit: null
+        pre_commit: null,
       }
     ],
     branches: [],
@@ -31,7 +31,11 @@ describe('HistorySideBar', () => {
       selectedHistoryFile: null
     } as GitExtension,
     commands: null,
-    trans
+    trans,
+    referenceCommit: null,
+    challengerCommit: null,
+    onSelectForCompare: _ => async _ => null,
+    onCompareWithSelected: _ => async _ => null
   };
 
   it('renders the commit nodes', () => {