diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
index 2ce29db..c5a188c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@@ -31,6 +31,7 @@
 <link rel="import" href="../../shared/revision-info/revision-info.html">
 <link rel="import" href="../gr-comment-api/gr-comment-api.html">
 <link rel="import" href="../gr-diff-cursor/gr-diff-cursor.html">
+<link rel="import" href="../gr-diff-mode-selector/gr-diff-mode-selector.html">
 <link rel="import" href="../gr-diff-preferences/gr-diff-preferences.html">
 <link rel="import" href="../gr-diff/gr-diff.html">
 <link rel="import" href="../gr-patch-range-select/gr-patch-range-select.html">
@@ -132,6 +133,14 @@
         align-items: center;
         display: flex;
       }
+      .diffModeSelector {
+        align-items: center;
+        display: flex;
+      }
+      .diffModeSelector.hide,
+      .separator.hide {
+        display: none;
+      }
       gr-dropdown-list {
         --trigger-style: {
           text-transform: none;
@@ -259,19 +268,17 @@
           </span>
         </div>
         <div class="rightControls">
-          <gr-select
-              id="modeSelect"
-              bind-value="{{changeViewState.diffMode}}"
-              hidden$="[[_computeModeSelectHidden(_isImageDiff)]]">
-            <select>
-              <option value="SIDE_BY_SIDE">Side By Side</option>
-              <option value="UNIFIED_DIFF">Unified</option>
-            </select>
-          </gr-select>
+          <div class$="diffModeSelector [[_computeModeSelectHideClass(_isImageDiff)]]">
+            Diff view:
+            <gr-diff-mode-selector
+                id="modeSelect"
+                save-on-change="[[_loggedIn]]"
+                mode="{{changeViewState.diffMode}}"></gr-diff-mode-selector>
+          </div>
           <span id="diffPrefsContainer"
               hidden$="[[_computePrefsButtonHidden(_prefs, _loggedIn)]]" hidden>
             <span class="preferences desktop">
-              <span class="separator" hidden$="[[_computeModeSelectHidden(_isImageDiff)]]"></span>
+              <span class$="separator [[_computeModeSelectHideClass(_isImageDiff)]]"></span>
               <gr-button link
                   class="prefsButton"
                   on-tap="_handlePrefsTap">Preferences</gr-button>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
index f1cc83e..90a3913 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
@@ -437,9 +437,9 @@
 
       e.preventDefault();
       if (this._getDiffViewMode() === DiffViewMode.SIDE_BY_SIDE) {
-        this.set('changeViewState.diffMode', DiffViewMode.UNIFIED);
+        this.$.modeSelect.setMode(DiffViewMode.UNIFIED);
       } else {
-        this.set('changeViewState.diffMode', DiffViewMode.SIDE_BY_SIDE);
+        this.$.modeSelect.setMode(DiffViewMode.SIDE_BY_SIDE);
       }
     },
 
@@ -814,15 +814,15 @@
       if (this.changeViewState.diffMode) {
         return this.changeViewState.diffMode;
       } else if (this._userPrefs) {
-        return this.changeViewState.diffMode =
-            this._userPrefs.default_diff_view;
+        this.set('changeViewState.diffMode', this._userPrefs.default_diff_view);
+        return this._userPrefs.default_diff_view;
       } else {
         return 'SIDE_BY_SIDE';
       }
     },
 
-    _computeModeSelectHidden() {
-      return this._isImageDiff;
+    _computeModeSelectHideClass(isImageDiff) {
+      return isImageDiff ? 'hide' : '';
     },
 
     _onLineSelected(e, detail) {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
index ae98fe9..9776d4a 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
@@ -606,21 +606,21 @@
       element._userPrefs = {default_diff_view: 'SIDE_BY_SIDE'};
 
       // The mode selected in the view state reflects the selected option.
-      assert.equal(element._getDiffViewMode(), select.nativeSelect.value);
+      assert.equal(element._getDiffViewMode(), select.mode);
 
       // The mode selected in the view state reflects the view rednered in the
       // diff.
-      assert.equal(select.nativeSelect.value, diffDisplay.viewMode);
+      assert.equal(select.mode, diffDisplay.viewMode);
 
       // We will simulate a user change of the selected mode.
       const newMode = 'UNIFIED_DIFF';
-      // Set the actual value of the select, and simulate the change event.
-      select.nativeSelect.value = newMode;
-      element.fire('change', {}, {node: select.nativeSelect});
+
+      // Set the mode, and simulate the change event.
+      element.set('changeViewState.diffMode', newMode);
 
       // Make sure the handler was called and the state is still coherent.
       assert.equal(element._getDiffViewMode(), newMode);
-      assert.equal(element._getDiffViewMode(), select.nativeSelect.value);
+      assert.equal(element._getDiffViewMode(), select.mode);
       assert.equal(element._getDiffViewMode(), diffDisplay.viewMode);
     });
 
@@ -633,17 +633,16 @@
 
       // Attach a new gr-diff-view so we can intercept the preferences fetch.
       const view = document.createElement('gr-diff-view');
-      const select = view.$.modeSelect;
       fixture('blank').appendChild(view);
       flushAsynchronousOperations();
 
       // At this point the diff mode doesn't yet have the user's preference.
-      assert.equal(select.nativeSelect.value, 'SIDE_BY_SIDE');
+      assert.equal(view._getDiffViewMode(), 'SIDE_BY_SIDE');
 
       // Receive the overriding preference.
       resolvePrefs({default_diff_view: 'UNIFIED'});
       flushAsynchronousOperations();
-      assert.equal(select.nativeSelect.value, 'SIDE_BY_SIDE');
+      assert.equal(element._getDiffViewMode(), 'SIDE_BY_SIDE');
     });
 
     suite('_commitRange', () => {