diff --git a/common/app/routes/Settings/Toggle-Button/Toggle-Button.jsx b/common/app/routes/Settings/Toggle-Button/Toggle-Button.jsx
new file mode 100644
index 0000000000..81513ca022
--- /dev/null
+++ b/common/app/routes/Settings/Toggle-Button/Toggle-Button.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ToggleButtonGroup as BSBG, ToggleButton as TB } from 'react-bootstrap';
+
+import ns from './ns.json';
+
+const propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.bool.isRequired
+};
+
+export default function ToggleButton({
+  onChange,
+  value
+}) {
+  return (
+    <div className={ `${ns}-container` }>
+      <BSBG
+        name='monthly-email'
+        onChange={ onChange }
+        type='radio'
+        >
+        <TB
+          bsSize='lg'
+          bsStyle='primary'
+          className={ value && 'active' }
+          disabled={ value }
+          type='radio'
+          value={ 1 }
+          >
+          On
+        </TB>
+        <TB
+          bsSize='lg'
+          bsStyle='primary'
+          className={ !value && 'active' }
+          disabled={ !value }
+          type='radio'
+          value={ 2 }
+          >
+          Off
+        </TB>
+      </BSBG>
+    </div>
+  );
+}
+
+ToggleButton.displayName = 'ToggleButton';
+ToggleButton.propTypes = propTypes;
diff --git a/common/app/routes/Settings/Toggle-Button/index.js b/common/app/routes/Settings/Toggle-Button/index.js
new file mode 100644
index 0000000000..1428299d5f
--- /dev/null
+++ b/common/app/routes/Settings/Toggle-Button/index.js
@@ -0,0 +1 @@
+export { default } from './Toggle-Button.jsx';
diff --git a/common/app/routes/Settings/Toggle-Button/ns.json b/common/app/routes/Settings/Toggle-Button/ns.json
new file mode 100644
index 0000000000..d2fa2a0525
--- /dev/null
+++ b/common/app/routes/Settings/Toggle-Button/ns.json
@@ -0,0 +1 @@
+"toggle"
diff --git a/common/app/routes/Settings/Toggle-Button/toggle.less b/common/app/routes/Settings/Toggle-Button/toggle.less
new file mode 100644
index 0000000000..c08d8d970f
--- /dev/null
+++ b/common/app/routes/Settings/Toggle-Button/toggle.less
@@ -0,0 +1,20 @@
+@ns: toggle;
+
+.@{ns}-container > .btn-group {
+  float: right;
+  .btn {
+    margin-top: 20px;
+  }
+  .btn[disabled] {
+    opacity: 1;
+  }
+  @media (max-width: 768px) {
+    float: none;
+    .btn {
+      margin-top: 10px;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+
diff --git a/common/app/routes/Settings/index.less b/common/app/routes/Settings/index.less
new file mode 100644
index 0000000000..80c7de4d1f
--- /dev/null
+++ b/common/app/routes/Settings/index.less
@@ -0,0 +1,2 @@
+&{ @import "./settings.less"; }
+&{ @import "./Toggle-Button/toggle.less"; }
diff --git a/common/app/routes/index.less b/common/app/routes/index.less
index 6a049183c3..ae31c119f1 100644
--- a/common/app/routes/index.less
+++ b/common/app/routes/index.less
@@ -1,2 +1,2 @@
 &{ @import "./Challenges/challenges.less"; }
-&{ @import "./Settings/settings.less"; }
+&{ @import "./Settings/index.less"; }