diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 3ea2a2fbaee8b10f09d486baff448bc075935b0a..73c95416f2b5c14021250ef0bd12a47ca52c4721 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -126,7 +126,6 @@ export default {
     targetBranch() {
       return {
         branchName: this.targetBranchName,
-        versionIndex: -1,
         path: '',
       };
     },
diff --git a/app/assets/javascripts/diffs/components/compare_dropdown_template.vue b/app/assets/javascripts/diffs/components/compare_dropdown_template.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5cb9d2e911da633cf01689fe7f0d3e8cfaf840aa
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/compare_dropdown_template.vue
@@ -0,0 +1,79 @@
+<script>
+import { n__ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    Icon,
+    TimeAgo,
+  },
+  props: {
+    versions: {
+      type: Array,
+      required: true,
+    },
+    isActive: {
+      type: Function,
+      required: true,
+    },
+  },
+  computed: {
+    selectedVersionName() {
+      const selectedVersion = this.versions.find(x => this.isActive(x));
+      if (!selectedVersion) return '';
+
+      return selectedVersion.versionName;
+    },
+  },
+  methods: {
+    commitsText(version) {
+      return n__(`%d commit,`, `%d commits,`, version.commits_count);
+    },
+  },
+};
+</script>
+
+<template>
+  <span class="dropdown inline">
+    <a
+      class="dropdown-menu-toggle btn btn-default w-100"
+      data-toggle="dropdown"
+      aria-expanded="false"
+    >
+      <span> {{ selectedVersionName }} </span>
+      <icon :size="12" name="angle-down" class="position-absolute" />
+    </a>
+    <div class="dropdown-menu dropdown-select dropdown-menu-selectable">
+      <div class="dropdown-content">
+        <ul>
+          <li v-for="version in versions" :key="version.id">
+            <a :class="{ 'is-active': isActive(version) }" :href="version.href">
+              <div>
+                <strong>
+                  {{ version.versionName }}
+                </strong>
+              </div>
+              <div>
+                <small class="commit-sha"> {{ version.short_commit_sha }} </small>
+              </div>
+              <div>
+                <small v-if="version.created_at">
+                  {{ commitsText(version) }}
+                  <time-ago :time="version.created_at" class="js-timeago" />
+                </small>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </span>
+</template>
+
+<style>
+.dropdown {
+  min-width: 0;
+  max-height: 170px;
+}
+</style>
diff --git a/app/assets/javascripts/diffs/components/compare_source_dropdown.vue b/app/assets/javascripts/diffs/components/compare_source_dropdown.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fb335bce5244ac7c5490bad75a3f2c60309e3f20
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/compare_source_dropdown.vue
@@ -0,0 +1,40 @@
+<script>
+import { __, sprintf } from '~/locale';
+import CompareDropdownTemplate from './compare_dropdown_template.vue';
+
+export default {
+  components: {
+    CompareDropdownTemplate,
+  },
+  props: {
+    versions: {
+      type: Array,
+      required: true,
+    },
+    mergeRequestVersion: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    sourceVersions() {
+      return this.versions.map((v, i) => ({
+        ...v,
+        href: v.version_path,
+        versionName: i
+          ? sprintf(__(`version %{versionIndex}`), { versionIndex: v.version_index })
+          : __('latest version'),
+      }));
+    },
+  },
+  methods: {
+    isActive(version) {
+      return version.version_index === this.mergeRequestVersion.version_index;
+    },
+  },
+};
+</script>
+
+<template>
+  <compare-dropdown-template :versions="sourceVersions" :is-active="isActive" />
+</template>
diff --git a/app/assets/javascripts/diffs/components/compare_target_dropdown.vue b/app/assets/javascripts/diffs/components/compare_target_dropdown.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4b64e72e0468697415ac74a0fadf577d6e08dafa
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/compare_target_dropdown.vue
@@ -0,0 +1,92 @@
+<script>
+import { sprintf, s__, __ } from '~/locale';
+import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
+import { DIFF_BASE_INDEX, DIFF_HEAD_INDEX } from '../constants';
+import CompareDropdownTemplate from './compare_dropdown_template.vue';
+
+export default {
+  components: {
+    CompareDropdownTemplate,
+  },
+  props: {
+    versions: {
+      type: Array,
+      required: true,
+    },
+    startVersion: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    targetBranch: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    baseVersionPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    headVersionPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    targetVersions() {
+      const versions = [
+        {
+          ...this.targetBranch,
+          id: '_target_base',
+          version_index: DIFF_BASE_INDEX,
+          href: this.baseVersionPath,
+          versionName: sprintf(s__('DiffsCompareBaseBranch|%{branchName} (base)'), {
+            branchName: this.targetBranch.branchName,
+          }),
+        },
+      ];
+
+      if (this.headVersionPath) {
+        versions.push({
+          ...this.targetBranch,
+          id: '_target_head',
+          version_index: DIFF_HEAD_INDEX,
+          href: this.headVersionPath,
+          versionName: sprintf(s__('DiffsCompareBaseBranch|%{branchName} (HEAD)'), {
+            branchName: this.targetBranch.branchName,
+          }),
+        });
+      }
+
+      return [
+        ...this.versions.map(v => ({
+          ...v,
+          href: v.compare_path,
+          versionName: sprintf(__(`version %{versionIndex}`), { versionIndex: v.version_index }),
+        })),
+        ...versions,
+      ];
+    },
+    selectedVersionIndex() {
+      if (this.startVersion) {
+        return this.startVersion.version_index;
+      }
+
+      const diffHead = parseBoolean(getParameterByName('diff_head'));
+
+      return diffHead ? DIFF_HEAD_INDEX : DIFF_BASE_INDEX;
+    },
+  },
+  methods: {
+    isActive(version) {
+      return version.version_index === this.selectedVersionIndex;
+    },
+  },
+};
+</script>
+
+<template>
+  <compare-dropdown-template :versions="targetVersions" :is-active="isActive" />
+</template>
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index 3a2146147cc97cba605496e4fc165530bc60d24a..cd231db241df3b1b04a0b7c695846b50c3b1bb5a 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -5,6 +5,8 @@ import { __ } from '~/locale';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import Icon from '~/vue_shared/components/icon.vue';
 import CompareVersionsDropdown from './compare_versions_dropdown.vue';
+import CompareSourceDropdown from './compare_source_dropdown.vue';
+import CompareTargetDropdown from './compare_target_dropdown.vue';
 import SettingsDropdown from './settings_dropdown.vue';
 import DiffStats from './diff_stats.vue';
 import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants';
@@ -12,6 +14,8 @@ import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants';
 export default {
   components: {
     CompareVersionsDropdown,
+    CompareSourceDropdown,
+    CompareTargetDropdown,
     Icon,
     GlLink,
     GlButton,
@@ -69,6 +73,9 @@ export default {
     baseVersionPath() {
       return this.mergeRequestDiff.base_version_path;
     },
+    headVersionPath() {
+      return this.mergeRequestDiff.head_version_path;
+    },
   },
   created() {
     this.CENTERED_LIMITED_CONTAINER_CLASSES = CENTERED_LIMITED_CONTAINER_CLASSES;
@@ -113,17 +120,31 @@ export default {
         :message="s__('MergeRequest|Compare %{source} and %{target}')"
       >
         <template #source>
-          <compare-versions-dropdown
+          <!-- <compare-versions-dropdown
             :other-versions="mergeRequestDiffs"
             :merge-request-version="mergeRequestDiff"
             :show-commit-count="true"
             class="mr-version-dropdown"
+          /> -->
+          <compare-source-dropdown
+            :versions="mergeRequestDiffs"
+            :merge-request-version="mergeRequestDiff"
+            class="mr-version-dropdown"
           />
         </template>
         <template #target>
-          <compare-versions-dropdown
+          <!-- <compare-versions-dropdown
             :other-versions="comparableDiffs"
             :base-version-path="baseVersionPath"
+            :head-version-path="headVersionPath"
+            :start-version="startVersion"
+            :target-branch="targetBranch"
+            class="mr-version-compare-dropdown"
+          /> -->
+          <compare-target-dropdown
+            :versions="comparableDiffs"
+            :base-version-path="baseVersionPath"
+            :head-version-path="headVersionPath"
             :start-version="startVersion"
             :target-branch="targetBranch"
             class="mr-version-compare-dropdown"
diff --git a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
index cc4b2dacab32ece049f4578f4fd85d22608dd569..91ff6506c9b88efc9dfea15cc03579e0c67b23c9 100644
--- a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
@@ -1,8 +1,9 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
-import { n__, __, sprintf } from '~/locale';
+import { n__, __, sprintf, s__ } from '~/locale';
 import { getParameterByName, parseBoolean } from '~/lib/utils/common_utils';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import { DIFF_BASE_INDEX, DIFF_HEAD_INDEX } from '../constants';
 
 export default {
   components: {
@@ -40,16 +41,63 @@ export default {
       required: false,
       default: null,
     },
+    headVersionPath: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
+    targetBranchVersions() {
+      if (this.mergeRequestVersion) {
+        return [];
+      }
+
+      const versions = [
+        {
+          ...this.targetBranch,
+          id: '_target_base',
+          version_index: DIFF_BASE_INDEX,
+          targetHref: this.baseVersionPath,
+          targetName: sprintf(s__('DiffsCompareBaseBranch|%{branchName} (base)'), {
+            branchName: this.targetBranch.branchName,
+          }),
+        },
+      ];
+
+      if (this.headVersionPath) {
+        versions.push({
+          ...this.targetBranch,
+          id: '_target_head',
+          version_index: DIFF_HEAD_INDEX,
+          targetHref: this.headVersionPath,
+          targetName: sprintf(s__('DiffsCompareBaseBranch|%{branchName} (HEAD)'), {
+            branchName: this.targetBranch.branchName,
+          }),
+        });
+      }
+
+      return versions;
+    },
     targetVersions() {
+      return [...this.otherVersions, ...this.targetBranchVersions];
+    },
+    selectedVersionIndex() {
       if (this.mergeRequestVersion) {
-        return this.otherVersions;
+        return this.mergeRequestVersion.version_index;
+      }
+
+      if (this.startVersion) {
+        return this.startVersion.version_index;
       }
-      return [...this.otherVersions, this.targetBranch];
+
+      const diffHead = parseBoolean(getParameterByName('diff_head'));
+
+      return diffHead ? DIFF_HEAD_INDEX : DIFF_BASE_INDEX;
     },
     selectedVersionName() {
-      const selectedVersion = this.startVersion || this.targetBranch || this.mergeRequestVersion;
+      const selectedVersion = this.targetVersions.find(x => this.isActive(x));
+
       return this.versionName(selectedVersion);
     },
   },
@@ -58,8 +106,8 @@ export default {
       return n__(`%d commit,`, `%d commits,`, version.commits_count);
     },
     href(version) {
-      if (this.isBase(version)) {
-        return this.baseVersionPath;
+      if (version.targetHref) {
+        return version.targetHref;
       }
       if (this.showCommitCount) {
         return version.version_path;
@@ -67,12 +115,14 @@ export default {
       return version.compare_path;
     },
     versionName(version) {
-      if (this.isLatest(version)) {
+      if (!version) {
+        return '';
+      } else if (this.isLatest(version)) {
         return __('latest version');
+      } else if (version.targetName) {
+        return version.targetName;
       }
-      if (this.targetBranch && (this.isBase(version) || !version)) {
-        return this.targetBranch.branchName;
-      }
+
       return sprintf(__(`version %{versionIndex}`), { versionIndex: version.version_index });
     },
     isActive(version) {
@@ -80,23 +130,7 @@ export default {
         return false;
       }
 
-      if (this.targetBranch) {
-        return (
-          (this.isBase(version) && !this.startVersion) ||
-          (this.startVersion && this.startVersion.version_index === version.version_index)
-        );
-      }
-
-      return version.version_index === this.mergeRequestVersion.version_index;
-    },
-    isBase(version) {
-      if (!version || !this.targetBranch) {
-        return false;
-      }
-      return version.versionIndex === -1;
-    },
-    isHead() {
-      return parseBoolean(getParameterByName('diff_head'));
+      return version.version_index === this.selectedVersionIndex;
     },
     isLatest(version) {
       return (
@@ -125,10 +159,6 @@ export default {
               <div>
                 <strong>
                   {{ versionName(version) }}
-                  <template v-if="isHead()">{{ s__('DiffsCompareBaseBranch|(HEAD)') }}</template>
-                  <template v-else-if="isBase(version)">{{
-                    s__('DiffsCompareBaseBranch|(base)')
-                  }}</template>
                 </strong>
               </div>
               <div>
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index 7521f3c950aa7a3271d8e8815da1b3c93bc0ca95..9e34f4a99c34854211cd27cf4fc98602d2c1c1e9 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -58,3 +58,6 @@ export const START_RENDERING_INDEX = 200;
 export const INLINE_DIFF_LINES_KEY = 'highlighted_diff_lines';
 export const PARALLEL_DIFF_LINES_KEY = 'parallel_diff_lines';
 export const DIFFS_PER_PAGE = 20;
+
+export const DIFF_BASE_INDEX = -1;
+export const DIFF_HEAD_INDEX = -2;
diff --git a/changelogs/unreleased/id-display-master-head-in-dropdown.yml b/changelogs/unreleased/id-display-master-head-in-dropdown.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e8842c300c804ebd23a2a38611e1a2a76c949c8a
--- /dev/null
+++ b/changelogs/unreleased/id-display-master-head-in-dropdown.yml
@@ -0,0 +1,5 @@
+---
+title: Display master(HEAD) in compare versions dropdown
+merge_request: 26918
+author:
+type: fixed
diff --git a/doc/user/project/merge_requests/img/versions_compare_head_v12_9.png b/doc/user/project/merge_requests/img/versions_compare_head_v12_9.png
new file mode 100644
index 0000000000000000000000000000000000000000..353cf458243d7ca4bde51be8cb78c99aecc4aa32
Binary files /dev/null and b/doc/user/project/merge_requests/img/versions_compare_head_v12_9.png differ
diff --git a/doc/user/project/merge_requests/versions.md b/doc/user/project/merge_requests/versions.md
index ffd0efb365a76fa4167cc5de5e33ae97291092be..53351933b05edaf46dd9d2dee2dde850865d10bf 100644
--- a/doc/user/project/merge_requests/versions.md
+++ b/doc/user/project/merge_requests/versions.md
@@ -46,6 +46,27 @@ This only applies to commits that are in the most recent version of a merge
 request - if a commit was in a merge request, then rebased out of that merge
 request, they will not be linked.
 
+## `HEAD` comparison mode for Merge Requests
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/issues/27008) in GitLab 12.9.
+
+Merge Requests, particularly the **Changes** tab, is where source code
+is reviewed and discussed. In circumstances where the target branch was
+merged into the source branch of the merge request, the changes in the
+source and target branch can be shown mixed together making it hard to
+understand which changes are being added and which already exist in the
+target branch.
+
+In GitLab 12.9, we added an **experimental** comparison mode, which
+shows a diff calculated by simulating how it would look like once merged - a more accurate
+representation of the changes rather than using the base of the two
+branches. The new mode is available from the comparison target drop down
+by selecting **master (HEAD)**. In the future it will
+[replace](https://gitlab.com/gitlab-org/gitlab/issues/198458) the
+current default comparison.
+
+![Merge request versions compare HEAD](img/versions_compare_head_v12_9.png)
+
 <!-- ## Troubleshooting
 
 Include any troubleshooting steps that you can foresee. If you know beforehand what issues
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 48874a6c489c89977c31f4afa9c229fce4f68e31..cacfa73b3a213ca278144f5d1b3e957dc3c1e810 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -6901,10 +6901,10 @@ msgstr ""
 msgid "Difference between start date and now"
 msgstr ""
 
-msgid "DiffsCompareBaseBranch|(HEAD)"
+msgid "DiffsCompareBaseBranch|%{branchName} (HEAD)"
 msgstr ""
 
-msgid "DiffsCompareBaseBranch|(base)"
+msgid "DiffsCompareBaseBranch|%{branchName} (base)"
 msgstr ""
 
 msgid "Diffs|No file name available"
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index 78e3ff4a60c2cb527dff0654c4d02076566182a5..7e0c55fc0c954e9dcb0166bc5e501c97833c7a92 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -11,7 +11,12 @@ import CompareVersions from '~/diffs/components/compare_versions.vue';
 import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue';
 import CommitWidget from '~/diffs/components/commit_widget.vue';
 import TreeList from '~/diffs/components/tree_list.vue';
-import { INLINE_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE } from '~/diffs/constants';
+import {
+  INLINE_DIFF_VIEW_TYPE,
+  PARALLEL_DIFF_VIEW_TYPE,
+  DIFF_BASE_INDEX,
+  DIFF_HEAD_INDEX,
+} from '~/diffs/constants';
 import createDiffsStore from '../create_diffs_store';
 import axios from '~/lib/utils/axios_utils';
 import diffsMockData from '../mock_data/merge_request_diffs';
@@ -615,7 +620,6 @@ describe('diffs/components/app', () => {
         expect.objectContaining({
           targetBranch: {
             branchName: 'target-branch',
-            versionIndex: -1,
             path: '',
           },
           mergeRequestDiffs: diffsMockData,
diff --git a/spec/frontend/diffs/components/compare_versions_dropdown_spec.js b/spec/frontend/diffs/components/compare_versions_dropdown_spec.js
index 5033bdd9044ade78e2dbe93b2fae304ffd6fba0b..0e12fd404c3809931f24cf08001bc64824e8a189 100644
--- a/spec/frontend/diffs/components/compare_versions_dropdown_spec.js
+++ b/spec/frontend/diffs/components/compare_versions_dropdown_spec.js
@@ -1,15 +1,19 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import CompareVersionsDropdown from '~/diffs/components/compare_versions_dropdown.vue';
+import { DIFF_BASE_INDEX, DIFF_HEAD_INDEX } from '~/diffs/constants';
 import diffsMockData from '../mock_data/merge_request_diffs';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 
 const localVue = createLocalVue();
-const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 };
-const startVersion = { version_index: 4 };
-const mergeRequestVersion = {
-  version_path: '123',
+const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: DIFF_BASE_INDEX };
+const targetHeadBranch = {
+  branchName: 'tmp-wine-head',
+  versionIndex: DIFF_HEAD_INDEX,
+  head_version_path: '/gnuwget/wget2/merge_requests/6/diffs?diff_head=true',
 };
+const startVersion = { version_index: 4 };
+const mergeRequestVersion = diffsMockData[0];
 const baseVersionPath = '/gnuwget/wget2/-/merge_requests/6/diffs?diff_id=37';
 
 describe('CompareVersionsDropdown', () => {
@@ -50,13 +54,14 @@ describe('CompareVersionsDropdown', () => {
         targetBranch,
       });
 
-      expect(findSelectedVersion().text()).toBe('tmp-wine-dev');
+      expect(findSelectedVersion().text()).toBe('tmp-wine-dev (base)');
     });
 
     it('shows correct version for non-base and non-latest branches', () => {
       createComponent({
         startVersion,
         targetBranch,
+        otherVersions: diffsMockData,
       });
 
       expect(findSelectedVersion().text()).toBe(`version ${startVersion.version_index}`);
@@ -110,7 +115,6 @@ describe('CompareVersionsDropdown', () => {
 
       expect(findLastLink().attributes('href')).toEqual(baseVersionPath);
       expect(findLastLink().text()).toContain('(base)');
-      expect(findLastLink().text()).not.toContain('(HEAD)');
     });
 
     it('should render a correct head version link', () => {
@@ -120,13 +124,13 @@ describe('CompareVersionsDropdown', () => {
       });
 
       createComponent({
-        baseVersionPath,
         otherVersions: diffsMockData.slice(1),
         targetBranch,
+        targetHeadBranch,
+        headVersionPath: targetHeadBranch.head_version_path,
       });
 
-      expect(findLastLink().attributes('href')).toEqual(baseVersionPath);
-      expect(findLastLink().text()).not.toContain('(base)');
+      expect(findLastLink().attributes('href')).toEqual(targetHeadBranch.head_version_path);
       expect(findLastLink().text()).toContain('(HEAD)');
     });