diff --git a/assets/fonts/kolidecons/kolidecons.woff b/assets/fonts/kolidecons/kolidecons.woff
index 0343901297..0cd13cc0b0 100644
Binary files a/assets/fonts/kolidecons/kolidecons.woff and b/assets/fonts/kolidecons/kolidecons.woff differ
diff --git a/frontend/components/buttons/Rocker/Rocker.jsx b/frontend/components/buttons/Rocker/Rocker.jsx
new file mode 100644
index 0000000000..e0de2a5dcf
--- /dev/null
+++ b/frontend/components/buttons/Rocker/Rocker.jsx
@@ -0,0 +1,51 @@
+import React, { Component, PropTypes } from 'react';
+import { noop } from 'lodash';
+import classnames from 'classnames';
+
+class Rocker extends Component {
+
+  static propTypes = {
+    className: PropTypes.string,
+    handleChange: PropTypes.func,
+    name: PropTypes.string,
+    options: PropTypes.shape({
+      aText: PropTypes.string,
+      aIcon: PropTypes.string,
+      bText: PropTypes.string,
+      bIcon: PropTypes.string,
+    }),
+    value: PropTypes.string,
+  };
+
+  static defaultProps = {
+    handleChange: noop,
+  };
+
+  render () {
+    const { className, handleChange, name, options, value } = this.props;
+    const { aText, aIcon, bText, bIcon } = options;
+    const baseClass = 'kolide-rocker';
+
+    const rockerClasses = classnames(baseClass, className);
+
+    return (
+      <div className={rockerClasses}>
+        <label className={`${baseClass}__label`} htmlFor={name}>
+          <input className={`${baseClass}__checkbox`} type="checkbox" value={value} name={name} id={name} onChange={handleChange} />
+          <span className={`${baseClass}__switch ${baseClass}__switch--opt-b`}>
+            <span className={`${baseClass}__text`}>
+              <i className={`kolidecon kolidecon-${bIcon}`} /> {bText}
+            </span>
+          </span>
+          <span className={`${baseClass}__switch ${baseClass}__switch--opt-a`}>
+            <span className={`${baseClass}__text`}>
+              <i className={`kolidecon kolidecon-${aIcon}`} /> {aText}
+            </span>
+          </span>
+        </label>
+      </div>
+    );
+  }
+}
+
+export default Rocker;
diff --git a/frontend/components/buttons/Rocker/_styles.scss b/frontend/components/buttons/Rocker/_styles.scss
new file mode 100644
index 0000000000..fedb38edea
--- /dev/null
+++ b/frontend/components/buttons/Rocker/_styles.scss
@@ -0,0 +1,132 @@
+.kolide-rocker {
+  &__label {
+    position: relative;
+    cursor: pointer;
+    width: 180px;
+    height: 36px;
+    border-radius: 2px;
+    background-color: #9fa5ab;
+    display: block;
+    padding: 0 2px;
+    box-shadow: inset 0 -3px 3px #aab3bd;
+  }
+
+  &__checkbox {
+    display: none;
+
+    &:checked ~ .kolide-rocker__switch--opt-b {
+      span {
+        @include transform(skewX(0) rotateZ(0));
+        top: 3px;
+      }
+
+      &::after {
+        @include transform(skewX(0) rotateZ(0) translate(0, 0));
+        left: 0;
+        width: 90px;
+        height: 35px;
+        bottom: 3px;
+      }
+    }
+
+    &:checked ~ .kolide-rocker__switch--opt-a {
+      span {
+        @include transform(skewX(-6deg) rotateZ(-6deg));
+        top: -6px;
+      }
+
+      &::after {
+        @include transform(skewX(-6deg) rotateZ(-6deg) translate(-1px, -3px));
+        right: -1px;
+        width: 90px;
+        height: 35px;
+        bottom: 5px;
+      }
+    }
+  }
+
+  &__switch {
+    @include user-select(none);
+    @include position(absolute, auto auto auto auto);
+    font-family: 'Oxygen', $helvetica;
+    font-weight: 600;
+    font-style: normal;
+    box-sizing: border-box;
+    text-transform: uppercase;
+    display: block;
+    width: 90px;
+    height: 35px;
+
+    &::after {
+      @include transition(transform 50ms ease-in-out, bottom 50ms ease-in-out);
+      bottom: 3px;
+      border-radius: 2px;
+      content: attr(data-content);
+      width: 90px;
+      height: 33px;
+      position: absolute;
+      box-sizing: border-box;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    span {
+      @include transition(transform 50ms ease-in-out, top 50ms ease-in-out);
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      font-size: 15px;
+      color: #fff;
+      letter-spacing: 0.6px;
+      display: block;
+      text-align: center;
+      width: 100%;
+
+      .kolidecon {
+        margin-right: 5px;
+      }
+    }
+
+    &--opt-b {
+      @include linear-gradient(-180deg, #eaedfb 81%, #aab3bd 100%);
+      left: 2px;
+
+      span {
+        @include transform(skewX(6deg) rotateZ(6deg));
+        color: #b8c2e3;
+        transform-origin: left top;
+        top: -6px;
+      }
+
+      &::after {
+        @include transform(skewX(6deg) rotateZ(6deg) translate(-1px, -3px));
+        background-color: #fff;
+        border: solid 1px #d4d8df;
+        border-radius: 2px 1px 1px 2px;
+        left: 1px;
+        bottom: 5px;
+      }
+    }
+
+    &--opt-a {
+      @include linear-gradient(-180deg, #9651ca 81%, #6e3c93 100%);
+      right: 2px;
+
+      span {
+        transform-origin: right top;
+        top: 4px;
+      }
+
+      &::after {
+        background-color: #ae6ddf;
+        border: solid 1px #9651ca;
+        border-radius: 1px 2px 2px 1px;
+        right: 0;
+        bottom: 3px;
+      }
+    }
+  }
+}
diff --git a/frontend/components/buttons/Rocker/index.js b/frontend/components/buttons/Rocker/index.js
new file mode 100644
index 0000000000..c19ce0e5f3
--- /dev/null
+++ b/frontend/components/buttons/Rocker/index.js
@@ -0,0 +1 @@
+export default from './Rocker';
diff --git a/frontend/pages/HomePage/HomePage.jsx b/frontend/pages/HomePage/HomePage.jsx
index c5ac14b499..5da65bf56e 100644
--- a/frontend/pages/HomePage/HomePage.jsx
+++ b/frontend/pages/HomePage/HomePage.jsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router';
 
 import Avatar from '../../components/Avatar';
+import Rocker from '../../components/buttons/Rocker';
 import paths from '../../router/paths';
 import userInterface from '../../interfaces/user';
 
@@ -15,12 +16,19 @@ export class HomePage extends Component {
     const { user } = this.props;
     const { LOGOUT } = paths;
     const baseClass = 'home-page';
+    const rockerOpts = {
+      aText: 'List',
+      aIcon: 'list-select',
+      bText: 'Grid',
+      bIcon: 'grid-select',
+    };
 
     return (
       <div className={baseClass}>
         {user && <Avatar size="small" className={`${baseClass}__avatar`} user={user} />}
         <span>You are successfully logged in! </span>
         {user && <Link to={LOGOUT}>Logout</Link>}
+        <Rocker name="view-type" value="grid" options={rockerOpts} />
       </div>
     );
   }
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index f3a16b56ba..03606a975b 100644
--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@@ -1,6 +1,9 @@
 html {
   position: relative;
   min-height: 100%;
+  // Because iOS hates us we must fight to the death!
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  // End Apple War
 }
 
 body {
diff --git a/frontend/styles/global/_icons.scss b/frontend/styles/global/_icons.scss
index 2649fe6fdb..4110086fee 100644
--- a/frontend/styles/global/_icons.scss
+++ b/frontend/styles/global/_icons.scss
@@ -1,228 +1,236 @@
-[class^="kolidecon-"],
-[class*=" kolidecon-"],
+[class^='kolidecon-'],
+[class*=' kolidecon-'],
 .kolidecon {
-    display: inline-block;
-    font: normal normal normal 14px/1 'kolidecons';
-    font-size: inherit;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  font: normal normal normal 14px/1 'kolidecons';
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
- .kolidecon-lg {
-    font-size: 1.33333333em;
-    line-height: 0.75em;
-    vertical-align: -15%;
+.kolidecon-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
 }
 
 .kolidecon-2x {
-    font-size: 2em;
+  font-size: 2em;
 }
 
 .kolidecon-3x {
-    font-size: 3em;
+  font-size: 3em;
 }
 
 .kolidecon-4x {
-    font-size: 4em;
+  font-size: 4em;
 }
 
 .kolidecon-5x {
-    font-size: 5em;
+  font-size: 5em;
 }
 
-  .kolidecon-fw {
-    width: 1.28571429em;
-    text-align: center;
+.kolidecon-fw {
+  width: 1.28571429em;
+  text-align: center;
 }
 
-       .kolidecon-kolide-logo-flat:before {
-    content: '\f000';
+.kolidecon-kolide-logo-flat:before {
+  content: '\f000';
 }
 
- .kolidecon-chevrondown:before {
-    content: '\f004';
+.kolidecon-chevrondown:before {
+  content: '\f004';
 }
 
- .kolidecon-chevronleft:before {
-    content: '\f006';
+.kolidecon-chevronleft:before {
+  content: '\f006';
 }
 
- .kolidecon-chevronright:before {
-    content: '\f008';
+.kolidecon-chevronright:before {
+  content: '\f008';
 }
 
- .kolidecon-chevronup:before {
-    content: '\f00a';
+.kolidecon-chevronup:before {
+  content: '\f00a';
 }
 
- .kolidecon-cpu:before {
-    content: '\f00c';
+.kolidecon-cpu:before {
+  content: '\f00c';
 }
 
- .kolidecon-downcarat:before {
-    content: '\f00d';
+.kolidecon-downcarat:before {
+  content: '\f00d';
 }
 
- .kolidecon-filter:before {
-    content: '\f00f';
+.kolidecon-filter:before {
+  content: '\f00f';
 }
 
- .kolidecon-mac:before {
-    content: '\f012';
+.kolidecon-mac:before {
+  content: '\f012';
 }
 
- .kolidecon-memory:before {
-    content: '\f013';
+.kolidecon-memory:before {
+  content: '\f013';
 }
 
- .kolidecon-penciledit:before {
-    content: '\f015';
+.kolidecon-penciledit:before {
+  content: '\f015';
 }
 
- .kolidecon-storage:before {
-    content: '\f019';
+.kolidecon-storage:before {
+  content: '\f019';
 }
 
- .kolidecon-upcarat:before {
-    content: '\f01b';
+.kolidecon-upcarat:before {
+  content: '\f01b';
 }
 
- .kolidecon-uptime:before {
-    content: '\f01c';
+.kolidecon-uptime:before {
+  content: '\f01c';
 }
 
- .kolidecon-world:before {
-    content: '\f01d';
+.kolidecon-world:before {
+  content: '\f01d';
 }
 
- .kolidecon-osquery:before {
-    content: '\f021';
+.kolidecon-osquery:before {
+  content: '\f021';
 }
 
- .kolidecon-join:before {
-    content: '\f022';
+.kolidecon-join:before {
+  content: '\f022';
 }
 
- .kolidecon-add-button:before {
-    content: '\f029';
+.kolidecon-add-button:before {
+  content: '\f029';
 }
 
- .kolidecon-username:before {
-    content: '\f02a';
+.kolidecon-username:before {
+  content: '\f02a';
 }
 
- .kolidecon-password:before {
-    content: '\f02b';
+.kolidecon-password:before {
+  content: '\f02b';
 }
 
- .kolidecon-email:before {
-    content: '\f02c';
+.kolidecon-email:before {
+  content: '\f02c';
 }
 
- .kolidecon-query:before {
-    content: '\f02d';
+.kolidecon-query:before {
+  content: '\f02d';
 }
 
- .kolidecon-hosts:before {
-    content: '\f02e';
+.kolidecon-hosts:before {
+  content: '\f02e';
 }
 
- .kolidecon-packs:before {
-    content: '\f02f';
+.kolidecon-packs:before {
+  content: '\f02f';
 }
 
- .kolidecon-help:before {
-    content: '\f030';
+.kolidecon-help:before {
+  content: '\f030';
 }
 
- .kolidecon-admin:before {
-    content: '\f031';
+.kolidecon-admin:before {
+  content: '\f031';
 }
 
- .kolidecon-config:before {
-    content: '\f032';
+.kolidecon-config:before {
+  content: '\f032';
 }
 
- .kolidecon-label:before {
-    content: '\f033';
+.kolidecon-mia:before {
+  content: '\f034';
 }
 
- .kolidecon-mia:before {
-    content: '\f034';
+.kolidecon-success-check:before {
+  content: '\f035';
 }
 
- .kolidecon-success-check:before {
-    content: '\f035';
+.kolidecon-offline:before {
+  content: '\f036';
 }
 
- .kolidecon-offline:before {
-    content: '\f036';
+.kolidecon-windows:before {
+  content: '\f037';
 }
 
- .kolidecon-windows:before {
-    content: '\f037';
+.kolidecon-centos:before {
+  content: '\f038';
 }
 
- .kolidecon-centos:before {
-    content: '\f038';
+.kolidecon-ubuntu:before {
+  content: '\f039';
 }
 
- .kolidecon-ubuntu:before {
-    content: '\f039';
+.kolidecon-apple:before {
+  content: '\f03a';
 }
 
- .kolidecon-apple:before {
-    content: '\f03a';
+.kolidecon-search:before {
+  content: '\f03b';
 }
 
- .kolidecon-search:before {
-    content: '\f03b';
+.kolidecon-all-hosts:before {
+  content: '\f03c';
 }
 
- .kolidecon-all-hosts:before {
-    content: '\f03c';
+.kolidecon-single-host:before {
+  content: '\f03d';
 }
 
- .kolidecon-single-host:before {
-    content: '\f03d';
+.kolidecon-alerts:before {
+  content: '\f03e';
 }
 
- .kolidecon-alerts:before {
-    content: '\f03e';
+.kolidecon-logout:before {
+  content: '\f03f';
 }
 
- .kolidecon-logout:before {
-    content: '\f03f';
+.kolidecon-user-settings:before {
+  content: '\f040';
 }
 
- .kolidecon-user-settings:before {
-    content: '\f040';
+.kolidecon-clipboard:before {
+  content: '\f043';
 }
 
- .kolidecon-clipboard:before {
-    content: '\f043';
+.kolidecon-list-select:before {
+  content: '\f044';
+}
+
+.kolidecon-grid-select:before {
+  content: '\f045';
+}
+
+.kolidecon-label:before {
+  content: '\f033';
 }
 
 
 .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    border: 0
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0
 }
 
 .sr-only-focusable:active,
 .sr-only-focusable:focus {
-    position: static;
-    width: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    clip: auto
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto
 }
 
diff --git a/frontend/templates/react.tmpl b/frontend/templates/react.tmpl
index 84252d3469..77716a9ee8 100644
--- a/frontend/templates/react.tmpl
+++ b/frontend/templates/react.tmpl
@@ -8,5 +8,8 @@
   <body>
     <div id="app"></div>
     <script async defer src="/assets/bundle.js" onload="this.parentElement.removeChild(this)"></script>
+    <!-- Because iOS hates interactive stuff, we have to kill it with fire -->
+    <script>document.addEventListener("touchstart", function() {},false);</script>
+    <!-- End Apple Hate -->
   </body>
 </html>