diff --git a/src/_h5ai/client/js/inc/view/viewmode.js b/src/_h5ai/client/js/inc/view/viewmode.js
index 1cc66149..5ff9da6a 100644
--- a/src/_h5ai/client/js/inc/view/viewmode.js
+++ b/src/_h5ai/client/js/inc/view/viewmode.js
@@ -1,13 +1,13 @@
 modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'view/sidebar', 'view/topbar', 'view/view'], function (_, $, event, resource, sidebar, topbar, view) {
 
     var tplSettings =
-            '<div id="settings-viewmode" class="block"><h1 class="l10n-view">View</h1></div>';
+            '<div id="viewmode-settings" class="block"><h1 class="l10n-view">View</h1></div>';
     var tplMode =
-            '<div id="view-[MODE]" class="button view">' +
-                '<img src="' + resource.image('view-[MODE]') + '" alt="view-[MODE]"/>' +
+            '<div id="viewmode-[MODE]" class="button mode">' +
+                '<img src="' + resource.image('view-[MODE]') + '" alt="viewmode-[MODE]"/>' +
             '</div>';
     var tplSize =
-            '<input id="view-size" type="range" min="0" max="0" value="0">';
+            '<input id="viewmode-size" type="range" min="0" max="0" value="0">';
     var tplToggle =
             '<div id="viewmode-toggle" class="tool">' +
                 '<img alt="viewmode"/>' +
@@ -18,16 +18,9 @@ modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'view
 
     function onChanged(mode, size) {
 
-        _.each(modes, function (m) {
-            if (m === mode) {
-                $('#view-' + m).addClass('active');
-            } else {
-                $('#view-' + m).removeClass('active');
-            }
-        });
-
-        $('#view-size').val(_.indexOf(sizes, size));
-
+        $('#viewmode-settings .mode').removeClass('active');
+        $('#viewmode-' + mode).addClass('active');
+        $('#viewmode-size').val(_.indexOf(sizes, size));
         $('#viewmode-toggle img').attr('src', resource.image('view-' + mode));
     }
 
@@ -64,18 +57,20 @@ modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'view
         $viewBlock.appendTo(sidebar.$el);
     }
 
+    function onToggle() {
+
+        var mode = view.getMode();
+        var nextIdx = (modes.indexOf(mode) + 1) % modes.length;
+        var nextMode = modes[nextIdx];
+
+        view.setMode(nextMode);
+    }
+
     function addToggle() {
 
         if (modes.length > 1) {
             $(tplToggle)
-                .on('click', function () {
-
-                    var mode = view.getMode();
-                    var nextIdx = (modes.indexOf(mode) + 1) % modes.length;
-                    var nextMode = modes[nextIdx];
-
-                    view.setMode(nextMode);
-                })
+                .on('click', onToggle)
                 .appendTo(topbar.$toolbar);
         }
     }
diff --git a/test/tests/integration/view.js b/test/tests/integration/view.js
index 5ce88946..50585c2d 100644
--- a/test/tests/integration/view.js
+++ b/test/tests/integration/view.js
@@ -111,10 +111,10 @@ describe('view', function () {
             assert.lengthOf($('#toolbar > #sidebar-toggle'), 1);
         });
 
-        it('adds HTML #settings-viewmode to #sidebar', function () {
+        it('adds HTML #viewmode-settings to #sidebar', function () {
 
             modulejs.require('view/viewmode');
-            assert.lengthOf($('#sidebar > #settings-viewmode'), 1);
+            assert.lengthOf($('#sidebar > #viewmode-settings'), 1);
         });
 
         it('adds style to head', function () {
diff --git a/test/tests/unit/view/viewmode.js b/test/tests/unit/view/viewmode.js
index 34c61e60..fcf64c11 100644
--- a/test/tests/unit/view/viewmode.js
+++ b/test/tests/unit/view/viewmode.js
@@ -99,114 +99,114 @@ describe('module \'' + ID + '\'', function () {
             assert.isUndefined(instance);
         });
 
-        it('adds HTML #settings-viewmode to #sidebar', function () {
+        it('adds HTML #viewmode-settings to #sidebar', function () {
 
             this.applyFn();
-            assert.lengthOf($('#sidebar > #settings-viewmode'), 1);
+            assert.lengthOf($('#sidebar > #viewmode-settings'), 1);
         });
 
-        it('adds HTML #view-details to #settings-viewmode', function () {
+        it('adds HTML #viewmode-details to #viewmode-settings', function () {
 
             this.applyFn();
-            assert.lengthOf($('#settings-viewmode > #view-details'), 1);
+            assert.lengthOf($('#viewmode-settings > #viewmode-details'), 1);
         });
 
-        it('adds HTML #view-grid to #settings-viewmode', function () {
+        it('adds HTML #viewmode-grid to #viewmode-settings', function () {
 
             this.applyFn();
-            assert.lengthOf($('#settings-viewmode > #view-grid'), 1);
+            assert.lengthOf($('#viewmode-settings > #viewmode-grid'), 1);
         });
 
-        it('adds HTML #view-icons to #settings-viewmode', function () {
+        it('adds HTML #viewmode-icons to #viewmode-settings', function () {
 
             this.applyFn();
-            assert.lengthOf($('#settings-viewmode > #view-icons'), 1);
+            assert.lengthOf($('#viewmode-settings > #viewmode-icons'), 1);
         });
 
-        it('adds HTML #view-size to #settings-viewmode', function () {
+        it('adds HTML #viewmode-size to #viewmode-settings', function () {
 
             this.applyFn();
-            assert.lengthOf($('#settings-viewmode > #view-size'), 1);
+            assert.lengthOf($('#viewmode-settings > #viewmode-size'), 1);
         });
 
-        it('does not add HTML #view-details, #view-grid, #view-icons when only one mode', function () {
+        it('does not add HTML #viewmode-details, #viewmode-grid, #viewmode-icons when only one mode', function () {
 
             this.xView.getModes.returns(['details']);
             this.applyFn();
-            assert.lengthOf($('#view-details'), 0);
-            assert.lengthOf($('#view-grid'), 0);
-            assert.lengthOf($('#view-icons'), 0);
+            assert.lengthOf($('#viewmode-details'), 0);
+            assert.lengthOf($('#viewmode-grid'), 0);
+            assert.lengthOf($('#viewmode-icons'), 0);
         });
 
-        it('does not add HTML #view-size when only one size', function () {
+        it('does not add HTML #viewmode-size when only one size', function () {
 
             this.xView.getSizes.returns([20]);
             this.applyFn();
-            assert.lengthOf($('#view-size'), 0);
+            assert.lengthOf($('#viewmode-size'), 0);
         });
     });
 
     describe('works', function () {
 
-        it('clicking #view-details triggers view.setMode(\'details\')', function () {
+        it('clicking #viewmode-details triggers view.setMode(\'details\')', function () {
 
             this.xView.getModes.returns(['details', 'grid', 'icons']);
             this.applyFn();
-            $('#view-details').trigger('click');
+            $('#viewmode-details').trigger('click');
             assert.isTrue(this.xView.setMode.calledOnce);
             assert.deepEqual(this.xView.setMode.lastCall.args, ['details']);
         });
 
-        it('clicking #view-grid triggers view.setMode(\'grid\')', function () {
+        it('clicking #viewmode-grid triggers view.setMode(\'grid\')', function () {
 
             this.xView.getModes.returns(['details', 'grid', 'icons']);
             this.applyFn();
-            $('#view-grid').trigger('click');
+            $('#viewmode-grid').trigger('click');
             assert.isTrue(this.xView.setMode.calledOnce);
             assert.deepEqual(this.xView.setMode.lastCall.args, ['grid']);
         });
 
-        it('clicking #view-icons triggers view.setMode(\'icons\')', function () {
+        it('clicking #viewmode-icons triggers view.setMode(\'icons\')', function () {
 
             this.xView.getModes.returns(['details', 'grid', 'icons']);
             this.applyFn();
-            $('#view-icons').trigger('click');
+            $('#viewmode-icons').trigger('click');
             assert.isTrue(this.xView.setMode.calledOnce);
             assert.deepEqual(this.xView.setMode.lastCall.args, ['icons']);
         });
 
-        it('changing #view-size triggers view.setSize(*)', function () {
+        it('changing #viewmode-size triggers view.setSize(*)', function () {
 
             this.xView.getSizes.returns([20, 40, 60]);
             this.applyFn();
 
-            $('#view-size').val(0).trigger('change');
+            $('#viewmode-size').val(0).trigger('change');
             assert.isTrue(this.xView.setSize.calledOnce);
             assert.deepEqual(this.xView.setSize.lastCall.args, [20]);
 
-            $('#view-size').val(1).trigger('change');
+            $('#viewmode-size').val(1).trigger('change');
             assert.isTrue(this.xView.setSize.calledTwice);
             assert.deepEqual(this.xView.setSize.lastCall.args, [40]);
 
-            $('#view-size').val(2).trigger('change');
+            $('#viewmode-size').val(2).trigger('change');
             assert.isTrue(this.xView.setSize.calledThrice);
             assert.deepEqual(this.xView.setSize.lastCall.args, [60]);
         });
 
-        it('inputing #view-size triggers view.setSize(*)', function () {
+        it('inputing #viewmode-size triggers view.setSize(*)', function () {
 
             this.xView.getSizes.returns([20, 40, 60]);
             this.applyFn();
 
-            $('#view-size').val(0).trigger('input');
+            $('#viewmode-size').val(0).trigger('input');
             assert.isTrue(this.xView.setSize.calledOnce);
             assert.deepEqual(this.xView.setSize.lastCall.args, [20]);
 
-            $('#view-size').val(1).trigger('input');
+            $('#viewmode-size').val(1).trigger('input');
             assert.isTrue(this.xView.setSize.calledTwice);
             assert.deepEqual(this.xView.setSize.lastCall.args, [40]);
 
-            $('#view-size').val(2).trigger('input');
+            $('#viewmode-size').val(2).trigger('input');
             assert.isTrue(this.xView.setSize.calledThrice);
             assert.deepEqual(this.xView.setSize.lastCall.args, [60]);
         });