diff --git a/client/less/main.less b/client/less/main.less
index 010dafeb59..c4075778fd 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -1129,7 +1129,7 @@ code {
   }
   .btn-primary {
     background-color: @brand-primary;
-    border-color: #292929;
+    border-color: #777;
     color:#CCC;
     transition: color 0.2s, background-color 0.2s;
     &:hover {
@@ -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..76b940bb70 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..c1065c3570 100644
--- a/common/app/routes/settings/components/Locked-Settings.jsx
+++ b/common/app/routes/settings/components/Locked-Settings.jsx
@@ -5,7 +5,8 @@ import classnames from 'classnames';
 export default function LockSettings({ isLocked, toggle }) {
   const className = classnames({
     'positive-20': true,
-    active: isLocked
+    active: isLocked,
+    'btn-toggle': true
   });
   return (
     <Row>