diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html
new file mode 100644
index 0000000..1b140da
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html
@@ -0,0 +1,50 @@
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../shared/gr-button/gr-button.html">
+<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+
+<dom-module id="gr-diff-mode-selector">
+  <template>
+    <style include="shared-styles">
+      gr-button.selected iron-icon {
+        color: var(--color-link);
+      }
+    </style>
+    <gr-button
+        id="sideBySideBtn"
+        link
+        has-tooltip
+        class$="[[_computeSelectedClass(mode, _VIEW_MODES.SIDE_BY_SIDE)]]"
+        title="Side-by-side diff"
+        on-tap="_handleSideBySideTap"><!--
+   --><iron-icon icon="gr-icons:side-by-side"></iron-icon><!--
+ --></gr-button>
+    <gr-button
+        id="unifiedBtn"
+        link
+        has-tooltip
+        title="Unified diff"
+        class$="[[_computeSelectedClass(mode, _VIEW_MODES.UNIFIED)]]"
+        on-tap="_handleUnifiedTap"><!--
+   --><iron-icon icon="gr-icons:unified"></iron-icon><!--
+ --></gr-button>
+    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+  </template>
+  <script src="gr-diff-mode-selector.js"></script>
+</dom-module>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.js b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.js
new file mode 100644
index 0000000..6c3a713
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.js
@@ -0,0 +1,68 @@
+// Copyright (C) 2018 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function() {
+  'use strict';
+
+  Polymer({
+    is: 'gr-diff-mode-selector',
+
+    properties: {
+      mode: {
+        type: String,
+        notify: true,
+      },
+
+      /**
+       * If set to true, the user's preference will be updated every time a
+       * button is tapped. Don't set to true if there is no user.
+       */
+      saveOnChange: {
+        type: Boolean,
+        value: false,
+      },
+
+      /** @type {?} */
+      _VIEW_MODES: {
+        type: Object,
+        readOnly: true,
+        value: {
+          SIDE_BY_SIDE: 'SIDE_BY_SIDE',
+          UNIFIED: 'UNIFIED_DIFF',
+        },
+      },
+    },
+
+    /**
+     * Set the mode. If save on change is enabled also update the preference.
+     */
+    setMode(newMode) {
+      if (this.saveOnChange && this.mode && this.mode !== newMode) {
+        this.$.restAPI.savePreferences({diff_view: newMode});
+      }
+      this.mode = newMode;
+    },
+
+    _computeSelectedClass(diffViewMode, buttonViewMode) {
+      return buttonViewMode === diffViewMode ? 'selected' : '';
+    },
+
+    _handleSideBySideTap() {
+      this.setMode(this._VIEW_MODES.SIDE_BY_SIDE);
+    },
+
+    _handleUnifiedTap() {
+      this.setMode(this._VIEW_MODES.UNIFIED);
+    },
+  });
+})();
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_test.html b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_test.html
new file mode 100644
index 0000000..c791091
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_test.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>gr-diff-mode-selector</title>
+
+<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../../../bower_components/web-component-tester/browser.js"></script>
+<link rel="import" href="../../../test/common-test-setup.html"/>
+<script src="../../../bower_components/page/page.js"></script>
+<script src="../../../scripts/util.js"></script>
+
+<link rel="import" href="gr-diff-mode-selector.html">
+
+<script>void(0);</script>
+
+<test-fixture id="basic">
+  <template>
+    <gr-diff-mode-selector></gr-diff-mode-selector>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-diff-mode-selector tests', () => {
+    let element;
+    let sandbox;
+
+    setup(() => {
+      sandbox = sinon.sandbox.create();
+      element = fixture('basic');
+    });
+
+    teardown(() => {
+      sandbox.restore();
+    });
+
+    test('_computeSelectedClass', () => {
+      assert.equal(
+          element._computeSelectedClass('SIDE_BY_SIDE', 'SIDE_BY_SIDE'),
+          'selected');
+      assert.equal(
+          element._computeSelectedClass('SIDE_BY_SIDE', 'UNIFIED_DIFF'), '');
+    });
+
+    test('setMode', () => {
+      const saveStub = sandbox.stub(element.$.restAPI, 'savePreferences');
+
+      // Setting the mode initially does not save prefs.
+      element.saveOnChange = true;
+      element.setMode('SIDE_BY_SIDE');
+      assert.isFalse(saveStub.called);
+
+      // Setting the mode to itself does not save prefs.
+      element.setMode('SIDE_BY_SIDE');
+      assert.isFalse(saveStub.called);
+
+      // Setting the mode to something else does not save prefs if saveOnChange
+      // is false.
+      element.saveOnChange = false;
+      element.setMode('UNIFIED_DIFF');
+      assert.isFalse(saveStub.called);
+
+      // Setting the mode to something else does not save prefs if saveOnChange
+      // is false.
+      element.saveOnChange = true;
+      element.setMode('SIDE_BY_SIDE');
+      assert.isTrue(saveStub.calledOnce);
+    });
+  });
+</script>
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', () => {