diff --git a/client/less/main.less b/client/less/main.less
index 814a479b8a..66e35cc8f8 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -695,27 +695,6 @@ code {
  z-index: 20000 !important;
 }
 
-.email-settings {
-  @media (max-width: 768px) {
-    text-align: center;
-  }
-}
-
-.toggle-btn-group {
-  float: right;
-  .btn[disabled] {
-    opacity: 1;
-  }
-  @media (max-width: 768px) {
-    float: none;
-    .btn-toggle {
-      margin-top: 10px;
-      margin-bottom: 20px;
-    }
-  }
-}
-
-
 //uncomment this to see the dimensions of all elements outlined in red
 //* {
 //  border-color: red;
diff --git a/common/app/routes/Settings/Email-Setting.jsx b/common/app/routes/Settings/Email-Setting.jsx
index 2cf9700d34..59e343d214 100644
--- a/common/app/routes/Settings/Email-Setting.jsx
+++ b/common/app/routes/Settings/Email-Setting.jsx
@@ -1,15 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {
-  ToggleButtonGroup,
-  ToggleButton,
-  Button,
-  Row,
-  Col
-} from 'react-bootstrap';
+import { Button, Row, Col } from 'react-bootstrap';
+import TB from './Toggle-Button';
 import FA from 'react-fontawesome';
-import classnames from 'classnames';
 
+import ns from './ns.json';
 import { onRouteUpdateEmail } from './redux';
 import { Link } from '../../Router';
 
@@ -66,7 +61,7 @@ export default function EmailSettings({
     );
   }
   return (
-    <div className='email-settings'>
+    <div className={ `${ns}-email-container` }>
       <Row>
         <p className='large-p text-center'>
           <em>{ email }</em>
@@ -84,45 +79,10 @@ export default function EmailSettings({
           </p>
         </Col>
         <Col sm={ 4 }>
-          <ToggleButtonGroup
-            className='toggle-btn-group'
-            name='monthly-email'
+          <TB
             onChange={ toggleMonthlyEmail }
-            type='radio'
-            >
-            <ToggleButton
-              bsSize='lg'
-              bsStyle='primary'
-              className={
-                classnames(
-                  'positive-20',
-                  { active: sendMonthlyEmail },
-                  'btn-toggle'
-                )
-              }
-              disabled={ sendMonthlyEmail }
-              type='radio'
-              value={ 1 }
-              >
-              On
-            </ToggleButton>
-            <ToggleButton
-              bsSize='lg'
-              bsStyle='primary'
-              className={
-                classnames(
-                  'positive-20',
-                  { active: !sendMonthlyEmail },
-                  'btn-toggle'
-                )
-              }
-              disabled={ !sendMonthlyEmail }
-              type='radio'
-              value={ 2 }
-              >
-              Off
-            </ToggleButton>
-          </ToggleButtonGroup>
+            value={ sendMonthlyEmail }
+          />
         </Col>
       </Row>
       <Row>
@@ -134,45 +94,10 @@ export default function EmailSettings({
           </p>
         </Col>
         <Col sm={ 4 }>
-          <ToggleButtonGroup
-            className='toggle-btn-group'
-            name='notification-email'
+          <TB
             onChange={ toggleNotificationEmail }
-            type='radio'
-            >
-            <ToggleButton
-              bsSize='lg'
-              bsStyle='primary'
-              className={
-                classnames(
-                  'positive-20',
-                  { active: sendNotificationEmail },
-                  'btn-toggle'
-                )
-              }
-              disabled={ sendNotificationEmail }
-              type='radio'
-              value={ 1 }
-              >
-              On
-            </ToggleButton>
-            <ToggleButton
-              bsSize='lg'
-              bsStyle='primary'
-              className={
-                classnames(
-                  'positive-20',
-                  { active: !sendNotificationEmail },
-                  'btn-toggle'
-                )
-              }
-              disabled={ !sendNotificationEmail }
-              type='radio'
-              value={ 2 }
-              >
-              Off
-            </ToggleButton>
-          </ToggleButtonGroup>
+            value={ sendNotificationEmail }
+          />
         </Col>
       </Row>
       <Row>
@@ -184,45 +109,10 @@ export default function EmailSettings({
           </p>
         </Col>
         <Col sm={ 4 }>
-          <ToggleButtonGroup
-            className='toggle-btn-group'
-            name='quincy-email'
+          <TB
             onChange={ toggleQuincyEmail }
-            type='radio'
-            >
-            <ToggleButton
-              bsSize='lg'
-              bsStyle='primary'
-              className={
-                classnames(
-                  'positive-20',
-                  { active: sendQuincyEmail },
-                  'btn-toggle'
-                )
-              }
-              disabled={ sendQuincyEmail }
-              type='radio'
-              value={ 1 }
-              >
-              On
-            </ToggleButton>
-            <ToggleButton
-              bsSize='lg'
-              bsStyle='primary'
-              className={
-                classnames(
-                  'positive-20',
-                  { active: !sendQuincyEmail },
-                  'btn-toggle'
-                )
-              }
-              disabled={ !sendQuincyEmail }
-              type='radio'
-              value={ 2 }
-              >
-              Off
-            </ToggleButton>
-          </ToggleButtonGroup>
+            value={ sendQuincyEmail }
+          />
         </Col>
       </Row>
     </div>
diff --git a/common/app/routes/Settings/index.js b/common/app/routes/Settings/index.js
index 2a1ea09b7f..2706328fa0 100644
--- a/common/app/routes/Settings/index.js
+++ b/common/app/routes/Settings/index.js
@@ -1,6 +1,6 @@
 import { types } from './redux';
 
-export { default } from './Settings.jsx';
+export { default } from './Show.jsx';
 
 export const routes = {
   [types.onRouteSettings]: '/settings',
diff --git a/common/app/routes/Settings/settings.less b/common/app/routes/Settings/settings.less
index cf021ebc08..41607d07a0 100644
--- a/common/app/routes/Settings/settings.less
+++ b/common/app/routes/Settings/settings.less
@@ -18,6 +18,13 @@
 .@{ns}-container {
   .center(@value: @container-xl, @padding: @grid-gutter-width);
 }
+
+.@{ns}-email-container {
+  .below(sm, {
+    text-align: center;
+  })
+}
+
 .@{ns}-skeleton {
   background-color: #fff;
   z-index: 10;