diff --git a/client/less/main.less b/client/less/main.less
index 010dafeb59..1a491f0f98 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -1151,6 +1151,12 @@ code {
   .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
     border-color: @night-text-color;
   }
+  .btn-toggle {
+    background-color: transparent;
+  }
+  .btn-toggle.active {
+    background-color: @brand-primary;
+  }
 }
 
 //make about page contact table reponsive on small screens
diff --git a/common/app/routes/settings/components/Email-Setting.jsx b/common/app/routes/settings/components/Email-Setting.jsx
index 3e60efdb7a..1e9aaef08f 100644
--- a/common/app/routes/settings/components/Email-Setting.jsx
+++ b/common/app/routes/settings/components/Email-Setting.jsx
@@ -70,7 +70,11 @@ export default function EmailSettings({
             bsSize='lg'
             bsStyle='primary'
             className={
-              classnames('positive-20', { active: sendMonthlyEmail })
+              classnames(
+                  'positive-20',
+                  { active: sendMonthlyEmail },
+                  'btn-toggle'
+              )
             }
             onClick={ toggleMonthlyEmail }
             >
@@ -92,7 +96,11 @@ export default function EmailSettings({
             bsSize='lg'
             bsStyle='primary'
             className={
-              classnames('positive-20', { active: sendNotificationEmail })
+              classnames(
+                  'positive-20',
+                  { active: sendNotificationEmail },
+                  'btn-toggle'
+              )
             }
             onClick={ toggleNotificationEmail }
             >
@@ -114,7 +122,11 @@ export default function EmailSettings({
             bsSize='lg'
             bsStyle='primary'
             className={
-              classnames('positive-20', { active: sendQuincyEmail })
+              classnames(
+                  'positive-20',
+                  { active: sendQuincyEmail },
+                  'btn-toggle'
+              )
             }
             onClick={ toggleQuincyEmail }
             >
diff --git a/common/app/routes/settings/components/Locked-Settings.jsx b/common/app/routes/settings/components/Locked-Settings.jsx
index 077661d3f7..5fad5c2fb5 100644
--- a/common/app/routes/settings/components/Locked-Settings.jsx
+++ b/common/app/routes/settings/components/Locked-Settings.jsx
@@ -1,37 +1,38 @@
-import React, { PropTypes } from 'react';
-import { Button, Row, Col } from 'react-bootstrap';
+import React, {PropTypes} from 'react';
+import {Button, Row, Col} from 'react-bootstrap';
 import classnames from 'classnames';
 
-export default function LockSettings({ isLocked, toggle }) {
-  const className = classnames({
-    'positive-20': true,
-    active: isLocked
-  });
-  return (
-    <Row>
-      <Col xs={ 9 }>
-        <p className='large-p'>
-          Make all of my solutions private
-          <br />
-          (this disables your certificates)
-        </p>
-      </Col>
-      <Col xs={ 3 }>
-        <Button
-          block={ true }
-          bsSize='lg'
-          bsStyle='primary'
-          className={ className }
-          onClick={ toggle }
-          >
-          { isLocked ? 'On' : 'Off' }
-        </Button>
-      </Col>
-    </Row>
-  );
+export default function LockSettings({isLocked, toggle}) {
+    const className = classnames({
+        'positive-20': true,
+        active: isLocked,
+        'btn-toggle': true
+    });
+    return (
+        <Row>
+            <Col xs={ 9 }>
+                <p className='large-p'>
+                    Make all of my solutions private
+                    <br />
+                    (this disables your certificates)
+                </p>
+            </Col>
+            <Col xs={ 3 }>
+                <Button
+                    block={ true }
+                    bsSize='lg'
+                    bsStyle='primary'
+                    className={ className }
+                    onClick={ toggle }
+                    >
+                    { isLocked ? 'On' : 'Off' }
+                </Button>
+            </Col>
+        </Row>
+    );
 }
 
 LockSettings.propTypes = {
-  isLocked: PropTypes.bool,
-  toggle: PropTypes.func.isRequired
+    isLocked: PropTypes.bool,
+    toggle: PropTypes.func.isRequired
 };