diff --git a/client/less/main.less b/client/less/main.less
index 923ee117c1..2020c32417 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -686,6 +686,26 @@ 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
 //* {
diff --git a/common/app/app.less b/common/app/app.less
index 5a90c57e1f..e49c32c903 100644
--- a/common/app/app.less
+++ b/common/app/app.less
@@ -8,7 +8,6 @@
   // they are painted using css so the
   // nav is on top again
   .grid(@direction: column-reverse);
-  width: 100vw;
 }
 
 .@{ns}-content {
diff --git a/common/app/routes/settings/Email-Setting.jsx b/common/app/routes/settings/Email-Setting.jsx
index e83a847103..0016f01945 100644
--- a/common/app/routes/settings/Email-Setting.jsx
+++ b/common/app/routes/settings/Email-Setting.jsx
@@ -1,6 +1,12 @@
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
-import { Button, Row, Col } from 'react-bootstrap';
+import {
+  ToggleButtonGroup,
+  ToggleButton,
+  Button,
+  Row,
+  Col
+} from 'react-bootstrap';
 import FA from 'react-fontawesome';
 import classnames from 'classnames';
 
@@ -57,7 +63,7 @@ export default function EmailSettings({
     );
   }
   return (
-    <div>
+    <div className='email-settings'>
       <Row>
         <p className='large-p text-center'>
           <em>{ email }</em>
@@ -67,81 +73,153 @@ export default function EmailSettings({
         <UpdateEmailButton />
       </Row>
       <Row>
-        <Col xs={ 9 }>
+        <Col sm={ 8 }>
           <p className='large-p'>
             Send me announcement emails
             <br />
             (we'll send you these every Thursday)
           </p>
         </Col>
-        <Col xs={ 3 }>
-          <Button
-            block={ true }
-            bsSize='lg'
-            bsStyle='primary'
-            className={
-              classnames(
-                'positive-20',
-                { active: sendMonthlyEmail },
-                'btn-toggle'
-              )
-            }
-            onClick={ toggleMonthlyEmail }
+        <Col sm={ 4 }>
+          <ToggleButtonGroup
+            className='toggle-btn-group'
+            name='monthly-email'
+            onChange={ toggleMonthlyEmail }
+            type='radio'
             >
-            { sendMonthlyEmail ? 'On' : 'Off' }
-          </Button>
+            <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>
         </Col>
       </Row>
       <Row>
-        <Col xs={ 9 }>
+        <Col sm={ 8 }>
           <p className='large-p'>
             Send me notification emails
             <br />
             (these will pertain to your account)
           </p>
         </Col>
-        <Col xs={ 3 }>
-          <Button
-            block={ true }
-            bsSize='lg'
-            bsStyle='primary'
-            className={
-              classnames(
-                'positive-20',
-                { active: sendNotificationEmail },
-                'btn-toggle'
-              )
-            }
-            onClick={ toggleNotificationEmail }
+        <Col sm={ 4 }>
+          <ToggleButtonGroup
+            className='toggle-btn-group'
+            name='notification-email'
+            onChange={ toggleNotificationEmail }
+            type='radio'
             >
-            { sendNotificationEmail ? 'On' : 'Off' }
-          </Button>
+            <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>
         </Col>
       </Row>
       <Row>
-        <Col xs={ 9 }>
+        <Col sm={ 8 }>
           <p className='large-p'>
             Send me Quincy's weekly email
             <br />
             (with new articles every Tuesday)
           </p>
         </Col>
-        <Col xs={ 3 }>
-          <Button
-            block={ true }
-            bsSize='lg'
-            bsStyle='primary'
-            className={
-              classnames(
-                'positive-20',
-                { active: sendQuincyEmail },
-                'btn-toggle'
-              )
-            }
-            onClick={ toggleQuincyEmail }
+        <Col sm={ 4 }>
+          <ToggleButtonGroup
+            className='toggle-btn-group'
+            name='quincy-email'
+            onChange={ toggleQuincyEmail }
+            type='radio'
             >
-            { sendQuincyEmail ? 'On' : 'Off' }
-          </Button>
+            <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>
         </Col>
       </Row>
     </div>
diff --git a/common/app/routes/settings/Settings.jsx b/common/app/routes/settings/Settings.jsx
index 38f9d5036a..da3dc8e0a5 100644
--- a/common/app/routes/settings/Settings.jsx
+++ b/common/app/routes/settings/Settings.jsx
@@ -138,173 +138,175 @@ export class Settings extends React.Component {
     }
     return (
       <ChildContainer>
-        <Row>
-          <Col xs={ 12 }>
-            <Button
-              block={ true }
-              bsSize='lg'
-              bsStyle='primary'
-              className='btn-link-social'
-              href={ `/${username}` }
+        <div className='container'>
+          <Row>
+            <Col xs={ 12 }>
+              <Button
+                block={ true }
+                bsSize='lg'
+                bsStyle='primary'
+                className='btn-link-social'
+                href={ `/${username}` }
+                >
+                <FA name='user' />
+                Show me my public profile
+              </Button>
+              <Button
+                block={ true }
+                bsSize='lg'
+                bsStyle='primary'
+                className='btn-link-social'
+                href={ '/signout' }
+                >
+                Sign me out of freeCodeCamp
+              </Button>
+              <Button
+                block={ true }
+                bsSize='lg'
+                bsStyle='primary'
+                className='btn-link-social'
+                href={ 'mail:team@freecodecamp.com' }
+                >
+                Email us at team@freecodecamp.com
+              </Button>
+            </Col>
+          </Row>
+          <h1 className='text-center'>Settings for your Account</h1>
+          <h2 className='text-center'>Actions</h2>
+          <Row>
+            <Col xs={ 12 }>
+              <Button
+                block={ true }
+                bsSize='lg'
+                bsStyle='primary'
+                className='btn-link-social'
+                onClick={ toggleNightMode }
+                >
+                NightMode
+              </Button>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={ 12 }>
+              <SocialSettings
+                isGithubCool={ isGithubCool }
+                isLinkedIn={ isLinkedIn }
+                isTwitter={ isTwitter }
+              />
+            </Col>
+          </Row>
+          <div className='spacer' />
+          <h2 className='text-center'>Account Settings</h2>
+          <Row>
+            <Col xs={ 12 }>
+              <Button
+                block={ true }
+                bsSize='lg'
+                bsStyle='primary'
+                className='btn-link-social'
+                href='/commit'
+                >
+                Edit my pledge
+              </Button>
+            </Col>
+          </Row>
+          <div className='spacer' />
+          <h2 className='text-center'>Privacy Settings</h2>
+          <Row>
+            <Col
+              md={ 6 }
+              mdOffset={ 3 }
+              sm={ 8 }
+              smOffset={ 2 }
+              xs={ 12 }
               >
-              <FA name='user' />
-              Show me my public profile
-            </Button>
-            <Button
-              block={ true }
-              bsSize='lg'
-              bsStyle='primary'
-              className='btn-link-social'
-              href={ '/signout' }
+              <LockedSettings
+                isLocked={ isLocked }
+                toggle={ toggleIsLocked }
+              />
+            </Col>
+          </Row>
+          <div className='spacer' />
+          <h2 className='text-center'>Job Search Settings</h2>
+          <Row>
+            <Col
+              md={ 6 }
+              mdOffset={ 3 }
+              sm={ 8 }
+              smOffset={ 2 }
+              xs={ 12 }
               >
-              Sign me out of freeCodeCamp
-            </Button>
-            <Button
-              block={ true }
-              bsSize='lg'
-              bsStyle='primary'
-              className='btn-link-social'
-              href={ 'mail:team@freecodecamp.org' }
+              <JobSettings
+                isAvailableForHire={ isAvailableForHire }
+                toggle={ toggleIsAvailableForHire }
+              />
+            </Col>
+          </Row>
+          <div className='spacer' />
+          <h2 className='text-center'>Email Settings</h2>
+          <Row>
+            <Col
+              md={ 6 }
+              mdOffset={ 3 }
+              sm={ 8 }
+              smOffset={ 2 }
+              xs={ 12 }
               >
-              Email us at team@freecodecamp.org
-            </Button>
-          </Col>
-        </Row>
-        <h1 className='text-center'>Settings for your Account</h1>
-        <h2 className='text-center'>Actions</h2>
-        <Row>
-          <Col xs={ 12 }>
-            <Button
-              block={ true }
-              bsSize='lg'
-              bsStyle='primary'
-              className='btn-link-social'
-              onClick={ toggleNightMode }
+              <EmailSettings
+                email={ email }
+                sendMonthlyEmail={ sendMonthlyEmail }
+                sendNotificationEmail={ sendNotificationEmail }
+                sendQuincyEmail={ sendQuincyEmail }
+                toggleMonthlyEmail={ toggleMonthlyEmail }
+                toggleNotificationEmail={ toggleNotificationEmail }
+                toggleQuincyEmail={ toggleQuincyEmail }
+              />
+            </Col>
+          </Row>
+          <div className='spacer' />
+          <h2 className='text-center'>Display challenges in:</h2>
+          <Row>
+            <Col
+              md={ 6 }
+              mdOffset={ 3 }
+              sm={ 8 }
+              smOffset={ 2 }
+              xs={ 12 }
               >
-              NightMode
-            </Button>
-          </Col>
-        </Row>
-        <Row>
-          <Col xs={ 12 }>
-            <SocialSettings
-              isGithubCool={ isGithubCool }
-              isLinkedIn={ isLinkedIn }
-              isTwitter={ isTwitter }
-            />
-          </Col>
-        </Row>
-        <div className='spacer' />
-        <h2 className='text-center'>Account Settings</h2>
-        <Row>
-          <Col xs={ 12 }>
-            <Button
-              block={ true }
-              bsSize='lg'
-              bsStyle='primary'
-              className='btn-link-social'
-              href='/commit'
+              <LanguageSettings />
+            </Col>
+          </Row>
+          <div className='spacer' />
+          <h2 className='text-center'>Danger Zone</h2>
+          <Row>
+            <Col
+              md={ 6 }
+              mdOffset={ 3 }
+              sm={ 8 }
+              smOffset={ 2 }
+              xs={ 12 }
               >
-              Edit my pledge
-            </Button>
-          </Col>
-        </Row>
-        <div className='spacer' />
-        <h2 className='text-center'>Privacy Settings</h2>
-        <Row>
-          <Col
-            md={ 6 }
-            mdOffset={ 3 }
-            sm={ 8 }
-            smOffset={ 2 }
-            xs={ 12 }
-            >
-            <LockedSettings
-              isLocked={ isLocked }
-              toggle={ toggleIsLocked }
-            />
-          </Col>
-        </Row>
-        <div className='spacer' />
-        <h2 className='text-center'>Job Search Settings</h2>
-        <Row>
-          <Col
-            md={ 6 }
-            mdOffset={ 3 }
-            sm={ 8 }
-            smOffset={ 2 }
-            xs={ 12 }
-            >
-            <JobSettings
-              isAvailableForHire={ isAvailableForHire }
-              toggle={ toggleIsAvailableForHire }
-            />
-          </Col>
-        </Row>
-        <div className='spacer' />
-        <h2 className='text-center'>Email Settings</h2>
-        <Row>
-          <Col
-            md={ 6 }
-            mdOffset={ 3 }
-            sm={ 8 }
-            smOffset={ 2 }
-            xs={ 12 }
-            >
-            <EmailSettings
-              email={ email }
-              sendMonthlyEmail={ sendMonthlyEmail }
-              sendNotificationEmail={ sendNotificationEmail }
-              sendQuincyEmail={ sendQuincyEmail }
-              toggleMonthlyEmail={ toggleMonthlyEmail }
-              toggleNotificationEmail={ toggleNotificationEmail }
-              toggleQuincyEmail={ toggleQuincyEmail }
-            />
-          </Col>
-        </Row>
-        <div className='spacer' />
-        <h2 className='text-center'>Display challenges in:</h2>
-        <Row>
-          <Col
-            md={ 6 }
-            mdOffset={ 3 }
-            sm={ 8 }
-            smOffset={ 2 }
-            xs={ 12 }
-            >
-            <LanguageSettings />
-          </Col>
-        </Row>
-        <div className='spacer' />
-        <h2 className='text-center'>Danger Zone</h2>
-        <Row>
-          <Col
-            md={ 6 }
-            mdOffset={ 3 }
-            sm={ 8 }
-            smOffset={ 2 }
-            xs={ 12 }
-            >
-            <Button
-              block={ true }
-              bsSize='lg'
-              bsStyle='danger'
-              className='btn-link-social'
-              href='/delete-my-account'
-              >
-              Delete my freeCodeCamp account
-            </Button>
-            <Button
-              block={ true }
-              bsSize='lg'
-              bsStyle='danger'
-              className='btn-link-social'
-              href='/reset-my-progress'
-              >
-              Reset all of my progress and brownie points
-            </Button>
-          </Col>
-        </Row>
+              <Button
+                block={ true }
+                bsSize='lg'
+                bsStyle='danger'
+                className='btn-link-social'
+                href='/delete-my-account'
+                >
+                Delete my freeCodeCamp account
+              </Button>
+              <Button
+                block={ true }
+                bsSize='lg'
+                bsStyle='danger'
+                className='btn-link-social'
+                href='/reset-my-progress'
+                >
+                Reset all of my progress and brownie points
+              </Button>
+            </Col>
+          </Row>
+      </div>
       </ChildContainer>
     );
   }