diff --git a/client/less/main.less b/client/less/main.less
index db9a804e05..bbf9249e6b 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -35,14 +35,46 @@ pre.wrappable {
   word-wrap: break-word;      /* IE 5+ */
 }
 
-//input[type=checkbox] {
-//  /* Double-sized Checkboxes */
-//  -ms-transform: scale(2); /* IE */
-//  -moz-transform: scale(2); /* FF */
-//  -webkit-transform: scale(2); /* Safari and Chrome */
-//  -o-transform: scale(2); /* Opera */
-//  padding: 10px;
-//}
+.checkbox label:after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.checkbox .cr {
+  position: relative;
+  display: inline-block;
+  border: 1px solid #a9a9a9;
+  border-radius: .25em;
+  width: 1.3em;
+  height: 1.3em;
+  float: left;
+  margin-right: .5em;
+}
+
+.checkbox .cr .cr-icon {
+  position: absolute;
+  font-size: .8em;
+  line-height: 0;
+  top: 50%;
+  left: 15%;
+}
+
+.checkbox label input[type="checkbox"] {
+  display: none;
+}
+
+.checkbox label input[type="checkbox"]+.cr>.cr-icon {
+  opacity: 0;
+}
+
+.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
+  opacity: 1;
+}
+
+.checkbox label input[type="checkbox"]:disabled+.cr {
+  opacity: .5;
+}
 
 .btn-group {
   border-color: @brand-primary;
diff --git a/common/models/User-Identity.js b/common/models/User-Identity.js
index 3fb7c30a40..eeaa59f6a6 100644
--- a/common/models/User-Identity.js
+++ b/common/models/User-Identity.js
@@ -4,8 +4,7 @@ import dedent from 'dedent';
 
 import {
   getSocialProvider,
-  getUsernameFromProvider,
-  createUserUpdatesFromProfile
+  getUsernameFromProvider
 } from '../../server/utils/auth';
 import { observeMethod, observeQuery } from '../../server/utils/rx';
 import { wrapHandledError } from '../../server/utils/create-handled-error.js';
@@ -48,84 +47,100 @@ export default function(UserIdent) {
       },
       include: 'user'
     };
-    return UserIdent.findOne$(query)
-      .flatMap(identity => {
-        if (!identity) {
-          throw wrapHandledError(
-            new Error('user identity account not found'),
-            {
-              message: dedent`
-                New accounts can only be created using an email address.
-                Please create an account below
-              `,
-              type: 'info',
-              redirectTo: '/signup'
-            }
-          );
-        }
-        const modified = new Date();
-        const user = identity.user();
-        if (!user) {
-          const username = getUsernameFromProvider(provider, profile);
-          return observeQuery(
+
+    if (provider === 'auth0') {
+
+      const email = profile.emails[0].value;
+      return User.findOne$({ where: { email } })
+        .flatMap(user => {
+          if (!user) {
+            return User.create$({ email });
+          }
+          return Observable.of(user);
+        })
+        .subscribe(
+          ( user ) => cb(null, user, null, null),
+          cb
+        );
+
+    } else {
+
+      return UserIdent.findOne$(query)
+        .flatMap(identity => {
+          if (!identity) {
+            throw wrapHandledError(
+              new Error('user identity account not found'),
+              {
+                message: dedent`
+                  New accounts can only be created using an email address.
+                  Please create an account below
+                `,
+                type: 'info',
+                redirectTo: '/signup'
+              }
+            );
+          }
+          const modified = new Date();
+          const user = identity.user();
+          if (!user) {
+            const username = getUsernameFromProvider(provider, profile);
+            return observeQuery(
+              identity,
+              'updateAttributes',
+              {
+                isOrphaned: username || true
+              }
+            )
+              .do(() => {
+                throw wrapHandledError(
+                  new Error('user identity is not associated with a user'),
+                  {
+                    type: 'info',
+                    redirectTo: '/signup',
+                    message: dedent`
+    The user account associated with the ${provider} user ${username || 'Anon'}
+    no longer exists.
+                    `
+                  }
+                );
+              });
+          }
+
+          // identity already exists
+          // find user and log them in
+          identity.credentials = credentials;
+          const attributes = {
+            // we no longer want to keep the profile
+            // this is information we do not need or use
+            profile: null,
+            credentials: credentials,
+            modified
+          };
+          const updateIdentity = observeQuery(
             identity,
             'updateAttributes',
+            attributes
+          );
+          const createToken = observeQuery(
+            AccessToken,
+            'create',
             {
-              isOrphaned: username || true
+              userId: user.id,
+              created: new Date(),
+              ttl: user.constructor.settings.ttl
             }
-          )
-            .do(() => {
-              throw wrapHandledError(
-                new Error('user identity is not associated with a user'),
-                {
-                  type: 'info',
-                  redirectTo: '/signup',
-                  message: dedent`
-  The user account associated with the ${provider} user ${username || 'Anon'}
-  no longer exists.
-                  `
-                }
-              );
-            });
-        }
-        const updateUser = User.update$(
-          { id: user.id },
-          createUserUpdatesFromProfile(provider, profile)
-        ).map(() => user);
-        // identity already exists
-        // find user and log them in
-        identity.credentials = credentials;
-        const attributes = {
-          // we no longer want to keep the profile
-          // this is information we do not need or use
-          profile: null,
-          credentials: credentials,
-          modified
-        };
-        const updateIdentity = observeQuery(
-          identity,
-          'updateAttributes',
-          attributes
+          );
+          return Observable.combineLatest(
+            Observable.of(user),
+            updateIdentity,
+            createToken,
+            (user, identity, token) => ({ user, identity, token })
+          );
+        })
+        .subscribe(
+          ({ user, identity, token }) => cb(null, user, identity, token),
+          cb
         );
-        const createToken = observeQuery(
-          AccessToken,
-          'create',
-          {
-            userId: user.id,
-            created: new Date(),
-            ttl: user.constructor.settings.ttl
-          }
-        );
-        return Observable.combineLatest(
-          updateUser,
-          updateIdentity,
-          createToken,
-          (user, identity, token) => ({ user, identity, token })
-        );
-      })
-      .subscribe(
-        ({ user, identity, token }) => cb(null, user, identity, token),
-        cb
-      );
+    }
   };
 }
diff --git a/hosted-templates/hosted-pages/login.html b/hosted-templates/hosted-pages/login.html
new file mode 100644
index 0000000000..4d1b4e6381
--- /dev/null
+++ b/hosted-templates/hosted-pages/login.html
@@ -0,0 +1,462 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+
+  <title>Sign in to freeCodeCamp</title>
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+  <style>
+    html,
+    body,
+    div,
+    span,
+    a,
+    li,
+    td,
+    th {
+      font-family: 'Lato', sans-serif;
+    }
+
+    bold {
+      font-family: 'Lato-Bold', sans-serif;
+      font-weight: Bold;
+    }
+
+    .checkbox label:after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+
+    .checkbox .cr {
+      position: relative;
+      display: inline-block;
+      border: 1px solid #a9a9a9;
+      border-radius: .25em;
+      width: 1.3em;
+      height: 1.3em;
+      float: left;
+      margin-right: .5em;
+    }
+
+    .checkbox .cr .cr-icon {
+      position: absolute;
+      font-size: .8em;
+      line-height: 0;
+      top: 50%;
+      left: 15%;
+    }
+
+    .checkbox label input[type="checkbox"] {
+      display: none;
+    }
+
+    .checkbox label input[type="checkbox"]+.cr>.cr-icon {
+      opacity: 0;
+    }
+
+    .checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
+      opacity: 1;
+    }
+
+    .checkbox label input[type="checkbox"]:disabled+.cr {
+      opacity: .5;
+    }
+
+    .btn-social {
+      width: 100%;
+      max-width: 260px;
+      margin: auto;
+    }
+
+    .btn-link-social {
+      max-width: 400px;
+      margin: auto;
+      margin-bottom: 10px;
+    }
+
+    a {
+      font-weight: bold;
+      font-size: 15px;
+    }
+
+    p {
+      font-size: 15px;
+    }
+
+    h1,
+    h2 {
+      font-weight: 400;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    li {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+
+    .fa,
+    [class^='ion-'] {
+      margin-right: 5px;
+    }
+
+    .fa:hover {
+      text-decoration: none;
+    }
+
+    a {
+      color: darkgreen;
+      text-decoration: none;
+    }
+
+    a:hover {
+      color: darkgreen;
+    }
+
+    .img-center {
+      margin: 0 auto;
+    }
+
+    .button-spacer {
+      padding: 5px 0;
+    }
+
+    .spacer {
+      padding: 15px 0 15px 0;
+    }
+
+    .btn-primary {
+      color: darkgreen;
+      background-color: darkgreen;
+      border-color: #004a00;
+    }
+
+    .btn-lg,
+    .btn-group-lg>.btn {
+      padding: 10px 16px;
+      font-size: 19px;
+      line-height: 1.33;
+      border-radius: 6px;
+    }
+
+    .btn-block {
+      display: block;
+      width: 100%;
+    }
+
+    .btn {
+      font-weight: 400;
+      white-space: normal;
+      background: transparent;
+      -webkit-transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
+      -moz-transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
+      -ms-transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
+      -o-transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
+      transition: background 0.2s ease-in-out, border 0.2s ease-in-out;
+    }
+
+    .btn:hover,
+    .btn:focus,
+    .btn.focus {
+      color: #eeeeee;
+      text-decoration: none;
+    }
+
+    .btn-primary:hover,
+    .btn-primary:focus,
+    .btn-primary.focus,
+    .btn-primary:active,
+    .btn-primary:active:hover,
+    .btn-primary.active,
+    .open>.dropdown-toggle.btn-primary {
+      color: #eeeeee;
+      background-color: darkgreen;
+      border-color: #000d00;
+    }
+
+    .btn.disabled,
+    .btn[disabled],
+    fieldset[disabled] .btn {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.65;
+      filter: alpha(opacity=65);
+      -webkit-box-shadow: none;
+      box-shadow: none;
+    }
+
+    .btn-primary.disabled,
+    .btn-primary[disabled],
+    fieldset[disabled] .btn-primary,
+    .btn-primary.disabled:hover,
+    .btn-primary[disabled]:hover,
+    fieldset[disabled] .btn-primary:hover,
+    .btn-primary.disabled:focus,
+    .btn-primary[disabled]:focus,
+    fieldset[disabled] .btn-primary:focus,
+    .btn-primary.disabled.focus,
+    .btn-primary[disabled].focus,
+    fieldset[disabled] .btn-primary.focus,
+    .btn-primary.disabled:active,
+    .btn-primary[disabled]:active,
+    fieldset[disabled] .btn-primary:active,
+    .btn-primary.disabled.active,
+    .btn-primary[disabled].active,
+    fieldset[disabled] .btn-primary.active {
+      background-color: darkgreen;
+      border-color: #004a00;
+    }
+
+    h4 {
+      font-size: 22px;
+    }
+
+    .navbar-default .navbar-collapse,
+    .navbar-default .navbar-form {
+      border-color: #e7e7e7;
+      background: darkgreen;
+    }
+
+    .navbar {
+      white-space: nowrap;
+      border: none;
+      line-height: 1;
+      background: darkgreen;
+    }
+
+    @media (min-width: 767px) {
+      .navbar {
+        padding-left: 15px;
+        padding-right: 30px;
+      }
+    }
+
+    .navbar-default .navbar-nav>li>a {
+      color: #eeeeee;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="navbar navbar-default navbar-static-top nav-height">
+    <div class="navbar-header">
+      <button class="hamburger navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
+      <div class="col-xs-12">
+        <span class="hamburger-text">Menu</span>
+      </div></button> <a class="navbar-brand" href="http://freecodecamp.org"><img alt=
+      "learn to code javascript at freeCodeCamp logo" class=
+      "img-responsive nav-logo" src=
+      "https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg"></a>
+    </div>
+
+
+    <div class="collapse navbar-collapse">
+      <ul class="nav navbar-nav navbar-right hamburger-dropdown">
+        <li>
+          <a href="https://learn.freecodecamp.org" rel="noopener" target="_blank">Learn</a>
+        </li>
+
+
+        <li>
+          <a href="https://forum.freecodecamp.org" rel="noopener" target="_blank">Forum</a>
+        </li>
+
+
+        <li>
+          <a href="https://freecodecamp.org/">Home</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="container">
+    <div class="container">
+      <div class="col-xs-12">
+
+        <div class="row">
+          <div class="text-center">
+            <h2>Sign up (or sign in with your existing account)</h2>
+            <div class="button-spacer"></div>
+          </div>
+
+          <div class="col-sm-6 col-sm-offset-3">
+            <div class="form-group">
+              <div class="enter-email">
+
+                <input autofocus="" class="input-lg form-control" id="email" name="email" oninput="setCustomValidity('')" oninvalid="this.setCustomValidity('Enter your email address')" placeholder="Enter your email address" required="" type="email">
+
+                <div class="button-spacer">
+                </div>
+
+
+                <div class="checkbox">
+                  <label><input name="quincy-emails" type="checkbox">
+                    <span class="cr"><i class="cr-icon fa fa-check"></i></span> I
+                    want weekly emails from Quincy, freeCodeCamp.org's
+                    founder.</label>
+                </div>
+
+
+                <div class="checkbox">
+                  <label><input id="terms-privacy" name="terms-privacy" type=
+                      "checkbox"> <span class="cr"><i class=
+                        "cr-icon fa fa-check"></i></span> I accept the <a href=
+                        "/terms" target="_blank">Terms of Service</a> and <a href=
+                        "/privacy" target="_blank">Privacy Policy</a>
+                        (required)</label>
+                </div>
+
+
+                <div class="button-spacer">
+                </div>
+                <button id="send-email-btn" class="btn btn-primary btn-lg btn-block">Get a code on your email</button>
+              </div>
+
+
+              <div class="enter-code" style="display: none;">
+                <input name="code" id="code" value="" class="input-lg form-control" placeholder="Enter the code you recieved on your email">
+
+                <div class="button-spacer">
+                </div>
+                <button id="send-code-btn" class="btn btn-primary btn-lg btn-block">Submit Code</button>
+              </div>
+
+
+            </div>
+          </div>
+        </div>
+
+
+        <div class="row">
+          <div class="col-sm-6 col-sm-offset-3">
+            <br>
+            <p class="text-center"><br>
+              <br>
+              <a href="https://freecodecamp.org/deprecated-signin">Continute with
+                      old sign in methods</a>
+            </p>
+          </div>
+        </div>
+
+
+      </div>
+    </div>
+  </div>
+
+  <!--[if IE 8]>
+          <script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
+          <![endif]-->
+  <!--[if lte IE 9]>
+          <script src="https://cdn.auth0.com/js/polyfills/1.0/base64.min.js"></script>
+          <script src="https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js"></script>
+          <![endif]-->
+          <!-- Latest compiled and minified JavaScript -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
+  </script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+  <script src="https://use.fontawesome.com/ae11c47b27.js">
+  </script>
+  <script src="https://cdn.auth0.com/js/auth0/9.2/auth0.min.js">
+  </script>
+  <script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js">
+  </script>
+  <script>
+    $(document).ready(function() {
+
+      var config = JSON.parse(
+        decodeURIComponent(escape(window.atob('@@config@@')))
+      );
+
+      var params = Object.assign({
+        domain: config.auth0Domain,
+        clientID: config.clientID,
+        redirectUri: config.callbackURL,
+        scope: 'openid email',
+        audience: 'https://' + config.auth0Domain + '/userinfo',
+        responseType: 'code'
+      }, config.internalOptions);
+
+      var webAuth = new auth0.WebAuth(params);
+
+      function disableMagicButtonForAgreement(isLaunched) {
+        if (isLaunched) {
+          $('#send-email-btn').prop('disabled', true).html(
+            '<span style="color:#E0E0E0;">Get a code on your email<\/span>');
+          return;
+        } else {
+          $('#send-email-btn').prop('disabled', false).html(
+            '<span>Get a code on your email<\/span>');
+        }
+      }
+
+      function sendEmail() {
+
+        var email = $('input#email').val();
+        webAuth.passwordlessStart({
+          connection: 'email',
+          send: 'code',
+          email: email
+        }, function(err, res) {
+          if (err) {
+            // Handle error
+            console.log('err', err);
+          }
+          console.log('res', res);
+          // Hide the input and show the code entry screen
+          $('.enter-email').hide();
+          $('.enter-code').show();
+        });
+      }
+
+      function login() {
+        console.log('logging in...');
+        var email = $('input#email').val();
+        var code = $('input#code').val();
+        webAuth.passwordlessLogin({
+          connection: 'email',
+          email: email,
+          verificationCode: code
+        }, function(err, res) {
+          if (err) {
+            console.log('error logging-in', err);
+            alert('Couldn\'t login ' + err.message);
+          }
+        });
+      };
+
+      disableMagicButtonForAgreement(true);
+
+      $('#terms-privacy').click(function() {
+        if (this.checked) {
+          disableMagicButtonForAgreement(false);
+        } else {
+          disableMagicButtonForAgreement(true);
+        }
+      });
+
+      $('#send-email-btn').click(function(){
+        sendEmail();
+      });
+
+      $('#send-code-btn').click(function(){
+        login();
+      });
+
+    });
+  </script>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
index 4710aa2848..a5233aa023 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -721,6 +721,32 @@
       "integrity": "sha1-lfE2KbEsOlGl0hWr3OKqnzL4B3M=",
       "dev": true
     },
+    "auth0-js": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/auth0-js/-/auth0-js-9.5.1.tgz",
+      "integrity": "sha1-NN6msPEbXl7hOWBWEfSbHA8V27E=",
+      "requires": {
+        "base64-js": "1.3.0",
+        "idtoken-verifier": "1.2.0",
+        "js-cookie": "2.2.0",
+        "qs": "6.5.1",
+        "superagent": "3.8.3",
+        "url-join": "1.1.0",
+        "winchan": "0.2.0"
+      },
+      "dependencies": {
+        "base64-js": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
+          "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw=="
+        },
+        "url-join": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/url-join/-/url-join-1.1.0.tgz",
+          "integrity": "sha1-dBxsL0WWxIMNZxhGCSDQySIC3Hg="
+        }
+      }
+    },
     "aws-sdk": {
       "version": "2.141.0",
       "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.141.0.tgz",
@@ -3889,6 +3915,11 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "cookiejar": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.1.tgz",
+      "integrity": "sha1-Qa1XsbVVlR7BcUEqgZQrHoIA00o="
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -4225,6 +4256,11 @@
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-1.0.9.tgz",
       "integrity": "sha1-zFRJaF37hesRyYKKzHy4erW7/MA="
     },
+    "crypto-js": {
+      "version": "3.1.9-1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz",
+      "integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg="
+    },
     "crypto-random-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
@@ -8806,6 +8842,30 @@
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
       "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
     },
+    "idtoken-verifier": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/idtoken-verifier/-/idtoken-verifier-1.2.0.tgz",
+      "integrity": "sha512-8jmmFHwdPz8L73zGNAXHHOV9yXNC+Z0TUBN5rafpoaFaLFltlIFr1JkQa3FYAETP23eSsulVw0sBiwrE8jqbUg==",
+      "requires": {
+        "base64-js": "1.3.0",
+        "crypto-js": "3.1.9-1",
+        "jsbn": "0.1.1",
+        "superagent": "3.8.3",
+        "url-join": "1.1.0"
+      },
+      "dependencies": {
+        "base64-js": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
+          "integrity": "sha512-ccav/yGvoa80BQDljCxsmmQ3Xvx60/UpBIij5QN21W3wBi/hhIC9OoO+KLpu9IJTS9j4DRVJ3aDDF9cMSoa2lw=="
+        },
+        "url-join": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/url-join/-/url-join-1.1.0.tgz",
+          "integrity": "sha1-dBxsL0WWxIMNZxhGCSDQySIC3Hg="
+        }
+      }
+    },
     "ieee754": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.8.tgz",
@@ -9628,6 +9688,11 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.1.1.tgz",
       "integrity": "sha1-NHwcIcfgBBFeCk2jLOzgQfrTyKM="
     },
+    "js-cookie": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
+      "integrity": "sha1-Gywnmm7s44ChIWi5JIUmWzWx7/s="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -9656,8 +9721,7 @@
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "optional": true
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
     },
     "jschardet": {
       "version": "1.6.0",
@@ -13935,6 +13999,16 @@
         "pause": "0.0.1"
       }
     },
+    "passport-auth0": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/passport-auth0/-/passport-auth0-0.6.1.tgz",
+      "integrity": "sha512-JJzb7BhR7eH19h9awD1+rZQbo0FCPMH1Wf6cGcSnw+boGYaIWc+A3ID0KDd6A8eFwqDEZgy+NEuYhIGOpngFuA==",
+      "requires": {
+        "passport-oauth": "1.0.0",
+        "request": "2.83.0",
+        "xtend": "4.0.1"
+      }
+    },
     "passport-facebook": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/passport-facebook/-/passport-facebook-2.1.1.tgz",
@@ -18143,6 +18217,70 @@
         "chalk": "1.1.3"
       }
     },
+    "superagent": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/superagent/-/superagent-3.8.3.tgz",
+      "integrity": "sha512-GLQtLMCoEIK4eDv6OGtkOoSMt3D+oq0y3dsxMuYuDvaNUvuT8eFBuLmfR0iYYzHC1e8hpzC6ZsxbuP6DIalMFA==",
+      "requires": {
+        "component-emitter": "1.2.1",
+        "cookiejar": "2.1.1",
+        "debug": "3.1.0",
+        "extend": "3.0.1",
+        "form-data": "2.3.1",
+        "formidable": "1.2.1",
+        "methods": "1.1.2",
+        "mime": "1.4.1",
+        "qs": "6.5.1",
+        "readable-stream": "2.3.6"
+      },
+      "dependencies": {
+        "component-emitter": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+          "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+        },
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "formidable": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.1.tgz",
+          "integrity": "sha512-Fs9VRguL0gqGHkXS5GQiMCr1VhZBxz0JnJs4JmMp/2jL18Fmbzvv7vOFRU+U8TBkHEE/CX1qDXzJplVULgsLeg=="
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
+        },
+        "readable-stream": {
+          "version": "2.3.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
@@ -20339,6 +20477,11 @@
         "semver": "5.4.1"
       }
     },
+    "winchan": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/winchan/-/winchan-0.2.0.tgz",
+      "integrity": "sha1-OGMCjn+XSw2hQS8oQXukJJcqvZQ="
+    },
     "window-size": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
diff --git a/package.json b/package.json
index e3099a89b8..f9cfb30183 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
   "dependencies": {
     "@freecodecamp/loopback-component-passport": "^1.0.0",
     "accepts": "^1.3.0",
+    "auth0-js": "^9.5.1",
     "babel-core": "^6.18.1",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
@@ -101,6 +102,7 @@
     "normalizr": "2.2.1",
     "opbeat": "^4.14.0",
     "passport": "^0.4.0",
+    "passport-auth0": "^0.6.1",
     "passport-facebook": "^2.0.0",
     "passport-github": "^1.0.0",
     "passport-google-oauth2": "~0.1.6",
diff --git a/public/css/Vimeo.css b/public/css/Vimeo.css
deleted file mode 100644
index 1bdb4b99bd..0000000000
--- a/public/css/Vimeo.css
+++ /dev/null
@@ -1,97 +0,0 @@
-.vimeo-image,
-.vimeo-image:after,
-.vimeo-embed {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.vimeo {
-  position: relative;
-  padding-bottom: 56.25%;
-  background: #e2e2e2;
-}
-.vimeo iframe {
-  border: 0;
-}
-.vimeo-image {
-  background-position: center center;
-  background-size: 100% auto;
-}
-.vimeo-image:after {
-  z-index: 1;
-  display: block;
-  content: '';
-  background: rgba(0,0,0,0.3);
-}
-.vimeo-play-button,
-.vimeo-loading {
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-.vimeo-play-button {
-  z-index: 2;
-  position: absolute;
-  padding: 0;
-  width: 70px;
-  border: 0;
-  background: none;
-}
-.vimeo-play-button:focus {
-  outline: none;
-}
-.vimeo-play-button svg {
-  fill: #fff;
-  -webkit-filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
-  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
-}
-.vimeo-loading {
-  z-index: 4;
-  position: absolute;
-  width: 32px;
-  height: 32px;
-}
-.vimeo-loading svg {
-  fill: #000;
-  transform-origin: 50% 50%;
-  -webkit-animation: spinner 0.8s infinite linear;
-  animation: spinner 0.8s infinite linear;
-}
-.vimeo-embed iframe {
-  width: 100%;
-  height: 100%;
-}
-@-moz-keyframes spinner {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes spinner {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-@-o-keyframes spinner {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes spinner {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/public/css/themes/flatly.less b/public/css/themes/flatly.less
deleted file mode 100644
index 41eb6e716c..0000000000
--- a/public/css/themes/flatly.less
+++ /dev/null
@@ -1,1167 +0,0 @@
-// Flatly 3.3.0
-// Variables
-// --------------------------------------------------
-
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
-
-@gray-base:              #000;
-@gray-darker:            lighten(@gray-base, 13.5%); // #222
-@gray-dark:              #7b8a8b;   // #333
-@gray:                   #95a5a6; // #555
-@gray-light:             #b4bcc2;   // #999
-@gray-lighter:           #ecf0f1; // #eee
-
-@brand-primary:         #2C3E50;
-@brand-success:         #18BC9C;
-@brand-info:            #3498DB;
-@brand-warning:         #F39C12;
-@brand-danger:          #E74C3C;
-
-
-//== Scaffolding
-//
-//## Settings for some of the most global styles.
-
-//** Background color for `<body>`.
-@body-bg:               #fff;
-//** Global text color on `<body>`.
-@text-color:            @brand-primary;
-
-//** Global textual link color.
-@link-color:            @brand-success;
-//** Link hover color set via `darken()` function.
-@link-hover-color:      @link-color;
-//** Link hover decoration.
-@link-hover-decoration: underline;
-
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
-@font-family-sans-serif:  "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-family-serif:       Georgia, "Times New Roman", Times, serif;
-//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
-@font-family-base:        @font-family-sans-serif;
-
-@font-size-base:          15px;
-@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
-
-@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
-@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
-@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
-@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
-@font-size-h5:            @font-size-base;
-@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
-
-//** Unit-less `line-height` for use in components like buttons.
-@line-height-base:        1.428571429; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
-
-//** By default, this inherits from the `<body>`.
-@headings-font-family:    @font-family-base;
-@headings-font-weight:    400;
-@headings-line-height:    1.1;
-@headings-color:          inherit;
-
-
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via npm.
-
-//** Load fonts from this directory.
-@icon-font-path:          "../fonts/";
-//** File name for all font files.
-@icon-font-name:          "glyphicons-halflings-regular";
-//** Element ID within SVG icon file.
-@icon-font-svg-id:        "glyphicons_halflingsregular";
-
-
-//== Components
-//
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-
-@padding-base-vertical:     10px;
-@padding-base-horizontal:   15px;
-
-@padding-large-vertical:    18px;
-@padding-large-horizontal:  27px;
-
-@padding-small-vertical:    6px;
-@padding-small-horizontal:  9px;
-
-@padding-xs-vertical:       1px;
-@padding-xs-horizontal:     5px;
-
-@line-height-large:         1.33;
-@line-height-small:         1.5;
-
-@border-radius-base:        4px;
-@border-radius-large:       6px;
-@border-radius-small:       3px;
-
-//** Global color for active items (e.g., navs or dropdowns).
-@component-active-color:    #fff;
-//** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg:       @brand-primary;
-
-//** Width of the `border` for generating carets that indicator dropdowns.
-@caret-width-base:          4px;
-//** Carets increase slightly in size for larger components.
-@caret-width-large:         5px;
-
-
-//== Tables
-//
-//## Customizes the `.table` component with basic values, each used across all table variations.
-
-//** Padding for `<th>`s and `<td>`s.
-@table-cell-padding:            8px;
-//** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding:  5px;
-
-//** Default background color used for all tables.
-@table-bg:                      transparent;
-//** Background color used for `.table-striped`.
-@table-bg-accent:               #f9f9f9;
-//** Background color used for `.table-hover`.
-@table-bg-hover:                @gray-lighter;
-@table-bg-active:               @table-bg-hover;
-
-//** Border color for table and cell borders.
-@table-border-color:            @gray-lighter;
-
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-@btn-font-weight:                normal;
-
-@btn-default-color:              #fff;
-@btn-default-bg:                 @gray;
-@btn-default-border:             @btn-default-bg;
-
-@btn-primary-color:              @btn-default-color;
-@btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             @btn-primary-bg;
-
-@btn-success-color:              @btn-default-color;
-@btn-success-bg:                 @brand-success;
-@btn-success-border:             @btn-success-bg;
-
-@btn-info-color:                 @btn-default-color;
-@btn-info-bg:                    @brand-info;
-@btn-info-border:                @btn-info-bg;
-
-@btn-warning-color:              @btn-default-color;
-@btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             @btn-warning-bg;
-
-@btn-danger-color:               @btn-default-color;
-@btn-danger-bg:                  @brand-danger;
-@btn-danger-border:              @btn-danger-bg;
-
-@btn-link-disabled-color:        @gray-light;
-
-
-//== Forms
-//
-//##
-
-//** `<input>` background color
-@input-bg:                       #fff;
-//** `<input disabled>` background color
-@input-bg-disabled:              @gray-lighter;
-
-//** Text color for `<input>`s
-@input-color:                    @text-color;
-//** `<input>` border color
-@input-border:                   #dce4ec;
-
-// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
-//** Default `.form-control` border radius
-@input-border-radius:            @border-radius-base;
-//** Large `.form-control` border radius
-@input-border-radius-large:      @border-radius-large;
-//** Small `.form-control` border radius
-@input-border-radius-small:      @border-radius-small;
-
-//** Border color for inputs on focus
-@input-border-focus:             @brand-primary;
-
-//** Placeholder text color
-@input-color-placeholder:        #acb6c0;
-
-//** Default `.form-control` height
-@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-//** Large `.form-control` height
-@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
-//** Small `.form-control` height
-@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
-
-@legend-color:                   @text-color;
-@legend-border-color:            transparent;
-
-//** Background color for textual input addons
-@input-group-addon-bg:           @gray-lighter;
-//** Border color for textual input addons
-@input-group-addon-border-color: @input-border;
-
-//** Disabled cursor for form controls and buttons.
-@cursor-disabled:                not-allowed;
-
-
-//== Dropdowns
-//
-//## Dropdown menu container and contents.
-
-//** Background for the dropdown menu.
-@dropdown-bg:                    #fff;
-//** Dropdown menu `border-color`.
-@dropdown-border:                rgba(0,0,0,.15);
-//** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border:       #ccc;
-//** Divider color for between dropdown items.
-@dropdown-divider-bg:            #e5e5e5;
-
-//** Dropdown link text color.
-@dropdown-link-color:            @gray-dark;
-//** Hover color for dropdown links.
-@dropdown-link-hover-color:      #fff;
-//** Hover background for dropdown links.
-@dropdown-link-hover-bg:         @dropdown-link-active-bg;
-
-//** Active dropdown menu item text color.
-@dropdown-link-active-color:     #fff;
-//** Active dropdown menu item background color.
-@dropdown-link-active-bg:        @component-active-bg;
-
-//** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color:   @text-muted;
-
-//** Text color for headers within dropdown menus.
-@dropdown-header-color:          @text-muted;
-
-//** Deprecated `@dropdown-caret-color` as of v3.1.0
-@dropdown-caret-color:           #000;
-
-
-//-- Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
-
-@zindex-navbar:            1000;
-@zindex-dropdown:          1000;
-@zindex-popover:           1060;
-@zindex-tooltip:           1070;
-@zindex-navbar-fixed:      1030;
-@zindex-modal:             1040;
-
-
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs:                  480px;
-//** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min:              @screen-xs;
-//** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone:               @screen-xs-min;
-
-// Small screen / tablet
-//** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm:                  768px;
-@screen-sm-min:              @screen-sm;
-//** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet:              @screen-sm-min;
-
-// Medium screen / desktop
-//** Deprecated `@screen-md` as of v3.0.1
-@screen-md:                  992px;
-@screen-md-min:              @screen-md;
-//** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop:             @screen-md-min;
-
-// Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg:                  1200px;
-@screen-lg-min:              @screen-lg;
-//** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop:          @screen-lg-min;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-xs-max:              (@screen-sm-min - 1);
-@screen-sm-max:              (@screen-md-min - 1);
-@screen-md-max:              (@screen-lg-min - 1);
-
-
-//== Grid system
-//
-//## Define your custom responsive grid.
-
-//** Number of columns in the grid.
-@grid-columns:              12;
-//** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width:         30px;
-// Navbar collapse
-//** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint:     @screen-sm-min;
-//** Point at which the navbar begins collapsing.
-@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
-
-
-//== Container sizes
-//
-//## Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / tablet
-@container-tablet:             (720px + @grid-gutter-width);
-//** For `@screen-sm-min` and up.
-@container-sm:                 @container-tablet;
-
-// Medium screen / desktop
-@container-desktop:            (940px + @grid-gutter-width);
-//** For `@screen-md-min` and up.
-@container-md:                 @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop:      (1140px + @grid-gutter-width);
-//** For `@screen-lg-min` and up.
-@container-lg:                 @container-large-desktop;
-
-
-//== Navbar
-//
-//##
-
-// Basics of a navbar
-@navbar-height:                    60px;
-@navbar-margin-bottom:             @line-height-computed;
-@navbar-border-radius:             @border-radius-base;
-@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
-@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height:       340px;
-
-@navbar-default-color:             #777;
-@navbar-default-bg:                @brand-primary;
-@navbar-default-border:            transparent;
-
-// Navbar links
-@navbar-default-link-color:                #fff;
-@navbar-default-link-hover-color:          @brand-success;
-@navbar-default-link-hover-bg:             transparent;
-@navbar-default-link-active-color:         #fff;
-@navbar-default-link-active-bg:            darken(@navbar-default-bg, 10%);
-@navbar-default-link-disabled-color:       #ccc;
-@navbar-default-link-disabled-bg:          transparent;
-
-// Navbar brand label
-@navbar-default-brand-color:               @navbar-default-link-color;
-@navbar-default-brand-hover-color:         @navbar-default-link-hover-color;
-@navbar-default-brand-hover-bg:            transparent;
-
-// Navbar toggle
-@navbar-default-toggle-hover-bg:           darken(@navbar-default-bg, 10%);
-@navbar-default-toggle-icon-bar-bg:        #fff;
-@navbar-default-toggle-border-color:       darken(@navbar-default-bg, 10%);
-
-
-// Inverted navbar
-// Reset inverted navbar basics
-@navbar-inverse-color:                      #fff;
-@navbar-inverse-bg:                         @brand-success;
-@navbar-inverse-border:                     transparent;
-
-// Inverted navbar links
-@navbar-inverse-link-color:                 #fff;
-@navbar-inverse-link-hover-color:           @brand-primary;
-@navbar-inverse-link-hover-bg:              transparent;
-@navbar-inverse-link-active-color:          #fff;
-@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 5%);
-@navbar-inverse-link-disabled-color:        #ccc;
-@navbar-inverse-link-disabled-bg:           transparent;
-
-// Inverted navbar brand label
-@navbar-inverse-brand-color:                @navbar-inverse-link-color;
-@navbar-inverse-brand-hover-color:          @navbar-inverse-link-hover-color;
-@navbar-inverse-brand-hover-bg:             transparent;
-
-// Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg:            darken(@navbar-inverse-bg, 10%);
-@navbar-inverse-toggle-icon-bar-bg:         #fff;
-@navbar-inverse-toggle-border-color:        darken(@navbar-inverse-bg, 10%);
-
-
-//== Navs
-//
-//##
-
-//=== Shared nav styles
-@nav-link-padding:                          10px 15px;
-@nav-link-hover-bg:                         @gray-lighter;
-
-@nav-disabled-link-color:                   @gray-light;
-@nav-disabled-link-hover-color:             @gray-light;
-
-//== Tabs
-@nav-tabs-border-color:                     @gray-lighter;
-
-@nav-tabs-link-hover-border-color:          @gray-lighter;
-
-@nav-tabs-active-link-hover-bg:             @body-bg;
-@nav-tabs-active-link-hover-color:          @brand-primary;
-@nav-tabs-active-link-hover-border-color:   @gray-lighter;
-
-@nav-tabs-justified-link-border-color:            @gray-lighter;
-@nav-tabs-justified-active-link-border-color:     @body-bg;
-
-//== Pills
-@nav-pills-border-radius:                   @border-radius-base;
-@nav-pills-active-link-hover-bg:            @component-active-bg;
-@nav-pills-active-link-hover-color:         @component-active-color;
-
-
-//== Pagination
-//
-//##
-
-@pagination-color:                     #fff;
-@pagination-bg:                        @brand-success;
-@pagination-border:                    transparent;
-
-@pagination-hover-color:               #fff;
-@pagination-hover-bg:                  darken(@brand-success, 15%);
-@pagination-hover-border:              transparent;
-
-@pagination-active-color:              #fff;
-@pagination-active-bg:                 darken(@brand-success, 15%);
-@pagination-active-border:             transparent;
-
-@pagination-disabled-color:            @gray-lighter;
-@pagination-disabled-bg:               lighten(@brand-success, 15%);;
-@pagination-disabled-border:           transparent;
-
-
-//== Pager
-//
-//##
-
-@pager-bg:                             @pagination-bg;
-@pager-border:                         @pagination-border;
-@pager-border-radius:                  15px;
-
-@pager-hover-bg:                       @pagination-hover-bg;
-
-@pager-active-bg:                      @pagination-active-bg;
-@pager-active-color:                   @pagination-active-color;
-
-@pager-disabled-color:                 #fff;
-
-
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding:              30px;
-@jumbotron-color:                inherit;
-@jumbotron-bg:                   @gray-lighter;
-@jumbotron-heading-color:        inherit;
-@jumbotron-font-size:            ceil((@font-size-base * 1.5));
-
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-@state-success-text:             #fff;
-@state-success-bg:               @brand-success;
-@state-success-border:           @brand-success;
-
-@state-info-text:                #fff;
-@state-info-bg:                  @brand-info;
-@state-info-border:              @brand-info;
-
-@state-warning-text:             #fff;
-@state-warning-bg:               @brand-warning;
-@state-warning-border:           @brand-warning;
-
-@state-danger-text:              #fff;
-@state-danger-bg:                @brand-danger;
-@state-danger-border:            @brand-danger;
-
-
-//== Tooltips
-//
-//##
-
-//** Tooltip max width
-@tooltip-max-width:           200px;
-//** Tooltip text color
-@tooltip-color:               #fff;
-//** Tooltip background color
-@tooltip-bg:                  rgba(0,0,0,.9);
-@tooltip-opacity:             .9;
-
-//** Tooltip arrow width
-@tooltip-arrow-width:         5px;
-//** Tooltip arrow color
-@tooltip-arrow-color:         @tooltip-bg;
-
-
-//== Popovers
-//
-//##
-
-//** Popover body background color
-@popover-bg:                          #fff;
-//** Popover maximum width
-@popover-max-width:                   276px;
-//** Popover border color
-@popover-border-color:                rgba(0,0,0,.2);
-//** Popover fallback border color
-@popover-fallback-border-color:       #ccc;
-
-//** Popover title background color
-@popover-title-bg:                    darken(@popover-bg, 3%);
-
-//** Popover arrow width
-@popover-arrow-width:                 10px;
-//** Popover arrow color
-@popover-arrow-color:                 @popover-bg;
-
-//** Popover outer arrow width
-@popover-arrow-outer-width:           (@popover-arrow-width + 1);
-//** Popover outer arrow color
-@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
-//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
-
-
-//== Labels
-//
-//##
-
-//** Default label background color
-@label-default-bg:            @btn-default-bg;
-//** Primary label background color
-@label-primary-bg:            @brand-primary;
-//** Success label background color
-@label-success-bg:            @brand-success;
-//** Info label background color
-@label-info-bg:               @brand-info;
-//** Warning label background color
-@label-warning-bg:            @brand-warning;
-//** Danger label background color
-@label-danger-bg:             @brand-danger;
-
-//** Default label text color
-@label-color:                 #fff;
-//** Default text color of a linked label
-@label-link-hover-color:      #fff;
-
-
-//== Modals
-//
-//##
-
-//** Padding applied to the modal body
-@modal-inner-padding:         20px;
-
-//** Padding applied to the modal title
-@modal-title-padding:         15px;
-//** Modal title line-height
-@modal-title-line-height:     @line-height-base;
-
-//** Background color of modal content area
-@modal-content-bg:                             #fff;
-//** Modal content border color
-@modal-content-border-color:                   rgba(0,0,0,.2);
-//** Modal content border color **for IE8**
-@modal-content-fallback-border-color:          #999;
-
-//** Modal backdrop background color
-@modal-backdrop-bg:           #000;
-//** Modal backdrop opacity
-@modal-backdrop-opacity:      .5;
-//** Modal header border color
-@modal-header-border-color:   #e5e5e5;
-//** Modal footer border color
-@modal-footer-border-color:   @modal-header-border-color;
-
-@modal-lg:                    900px;
-@modal-md:                    600px;
-@modal-sm:                    300px;
-
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-@alert-padding:               15px;
-@alert-border-radius:         @border-radius-base;
-@alert-link-font-weight:      bold;
-
-@alert-success-bg:            @state-success-bg;
-@alert-success-text:          @state-success-text;
-@alert-success-border:        @state-success-border;
-
-@alert-info-bg:               @state-info-bg;
-@alert-info-text:             @state-info-text;
-@alert-info-border:           @state-info-border;
-
-@alert-warning-bg:            @state-warning-bg;
-@alert-warning-text:          @state-warning-text;
-@alert-warning-border:        @state-warning-border;
-
-@alert-danger-bg:             @state-danger-bg;
-@alert-danger-text:           @state-danger-text;
-@alert-danger-border:         @state-danger-border;
-
-
-//== Progress bars
-//
-//##
-
-//** Background color of the whole progress component
-@progress-bg:                 @gray-lighter;
-//** Progress bar text color
-@progress-bar-color:          #fff;
-//** Variable for setting rounded corners on progress bar.
-@progress-border-radius:      @border-radius-base;
-
-//** Default progress bar color
-@progress-bar-bg:             @brand-primary;
-//** Success progress bar color
-@progress-bar-success-bg:     @brand-success;
-//** Warning progress bar color
-@progress-bar-warning-bg:     @brand-warning;
-//** Danger progress bar color
-@progress-bar-danger-bg:      @brand-danger;
-//** Info progress bar color
-@progress-bar-info-bg:        @brand-info;
-
-
-//== List group
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-group-bg:                 #fff;
-//** `.list-group-item` border color
-@list-group-border:             @gray-lighter;
-//** List group border radius
-@list-group-border-radius:      @border-radius-base;
-
-//** Background color of single list items on hover
-@list-group-hover-bg:           @gray-lighter;
-//** Text color of active list items
-@list-group-active-color:       @component-active-color;
-//** Background color of active list items
-@list-group-active-bg:          @component-active-bg;
-//** Border color of active list elements
-@list-group-active-border:      @list-group-active-bg;
-//** Text color for content within active list items
-@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
-
-//** Text color of disabled list items
-@list-group-disabled-color:      @gray-light;
-//** Background color of disabled list items
-@list-group-disabled-bg:         @gray-lighter;
-//** Text color for content within disabled list items
-@list-group-disabled-text-color: @list-group-disabled-color;
-
-@list-group-link-color:         #555;
-@list-group-link-hover-color:   @list-group-link-color;
-@list-group-link-heading-color: #333;
-
-
-//== Panels
-//
-//##
-
-@panel-bg:                    #fff;
-@panel-body-padding:          15px;
-@panel-heading-padding:       10px 15px;
-@panel-footer-padding:        @panel-heading-padding;
-@panel-border-radius:         @border-radius-base;
-
-//** Border color for elements within panels
-@panel-inner-border:          @gray-lighter;
-@panel-footer-bg:             @gray-lighter;
-
-@panel-default-text:          @text-color;
-@panel-default-border:        @gray-lighter;
-@panel-default-heading-bg:    @gray-lighter;
-
-@panel-primary-text:          #fff;
-@panel-primary-border:        @brand-primary;
-@panel-primary-heading-bg:    @brand-primary;
-
-@panel-success-text:          @state-success-text;
-@panel-success-border:        @state-success-border;
-@panel-success-heading-bg:    @state-success-bg;
-
-@panel-info-text:             @state-info-text;
-@panel-info-border:           @state-info-border;
-@panel-info-heading-bg:       @state-info-bg;
-
-@panel-warning-text:          @state-warning-text;
-@panel-warning-border:        @state-warning-border;
-@panel-warning-heading-bg:    @state-warning-bg;
-
-@panel-danger-text:           @state-danger-text;
-@panel-danger-border:         @state-danger-border;
-@panel-danger-heading-bg:     @state-danger-bg;
-
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-@thumbnail-padding:           4px;
-//** Thumbnail background color
-@thumbnail-bg:                @body-bg;
-//** Thumbnail border color
-@thumbnail-border:            @gray-lighter;
-//** Thumbnail border radius
-@thumbnail-border-radius:     @border-radius-base;
-
-//** Custom text color for thumbnail captions
-@thumbnail-caption-color:     @text-color;
-//** Padding around the thumbnail caption
-@thumbnail-caption-padding:   9px;
-
-
-//== Wells
-//
-//##
-
-@well-bg:                     @gray-lighter;
-@well-border:                 transparent;
-
-
-//== Badges
-//
-//##
-
-@badge-color:                 #fff;
-//** Linked badge text color on hover
-@badge-link-hover-color:      #fff;
-@badge-bg:                    @brand-primary;
-
-//** Badge text color in active nav link
-@badge-active-color:          @brand-primary;
-//** Badge background color in active nav link
-@badge-active-bg:             #fff;
-
-@badge-font-weight:           bold;
-@badge-line-height:           1;
-@badge-border-radius:         10px;
-
-
-//== Breadcrumbs
-//
-//##
-
-@breadcrumb-padding-vertical:   8px;
-@breadcrumb-padding-horizontal: 15px;
-//** Breadcrumb background color
-@breadcrumb-bg:                 @gray-lighter;
-//** Breadcrumb text color
-@breadcrumb-color:              #ccc;
-//** Text color of current page in the breadcrumb
-@breadcrumb-active-color:       @gray;
-//** Textual separator for between breadcrumb elements
-@breadcrumb-separator:          "/";
-
-
-//== Carousel
-//
-//##
-
-@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
-
-@carousel-control-color:                      #fff;
-@carousel-control-width:                      15%;
-@carousel-control-opacity:                    .5;
-@carousel-control-font-size:                  20px;
-
-@carousel-indicator-active-bg:                #fff;
-@carousel-indicator-border-color:             #fff;
-
-@carousel-caption-color:                      #fff;
-
-
-//== Close
-//
-//##
-
-@close-font-weight:           bold;
-@close-color:                 #000;
-@close-text-shadow:           none;
-
-
-//== Code
-//
-//##
-
-@code-color:                  #c7254e;
-@code-bg:                     #f9f2f4;
-
-@kbd-color:                   #fff;
-@kbd-bg:                      #333;
-
-@pre-bg:                      @gray-lighter;
-@pre-color:                   @gray-dark;
-@pre-border-color:            #ccc;
-@pre-scrollable-max-height:   340px;
-
-
-//== Type
-//
-//##
-
-//** Horizontal offset for forms and lists.
-@component-offset-horizontal: 180px;
-//** Text muted color
-@text-muted:                  @gray-light;
-//** Abbreviations and acronyms border color
-@abbr-border-color:           @gray-light;
-//** Headings small color
-@headings-small-color:        @gray-light;
-//** Blockquote small color
-@blockquote-small-color:      @gray-light;
-//** Blockquote font size
-@blockquote-font-size:        (@font-size-base * 1.25);
-//** Blockquote border color
-@blockquote-border-color:     @gray-lighter;
-//** Page header border color
-@page-header-border-color:    transparent;
-//** Width of horizontal description list titles
-@dl-horizontal-offset:        @component-offset-horizontal;
-//** Horizontal line color.
-@hr-border:                   @gray-lighter;
-
-// Flatly 3.3.0
-// Bootswatch
-// -----------------------------------------------------
-
-@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
-
-// Navbar =====================================================================
-
-.navbar {
-  border-width: 0;
-
-  &-default {
-
-    .badge {
-      background-color: #fff;
-      color: @navbar-default-bg;
-    }
-  }
-
-  &-inverse {
-
-    .badge {
-      background-color: #fff;
-      color: @navbar-inverse-bg;
-    }
-  }
-
-  &-brand {
-    padding: 18.5px 15px 20.5px;
-  }
-}
-
-// Buttons ====================================================================
-
-.btn:active {
-  .box-shadow(none);
-}
-
-.btn-group.open .dropdown-toggle {
-  .box-shadow(none);
-}
-
-// Typography =================================================================
-
-.text-primary,
-.text-primary:hover {
-  color: @brand-primary;
-}
-
-.text-success,
-.text-success:hover {
-  color: @brand-success;
-}
-
-.text-danger,
-.text-danger:hover {
-  color: @brand-danger;
-}
-
-.text-warning,
-.text-warning:hover {
-  color: @brand-warning;
-}
-
-.text-info,
-.text-info:hover {
-  color: @brand-info;
-}
-
-// Tables =====================================================================
-
-table,
-.table {
-
-  a:not(.btn) {
-    text-decoration: underline;
-  }
-
-  .dropdown-menu a {
-    text-decoration: none;
-  }
-
-  .success,
-  .warning,
-  .danger,
-  .info {
-    color: #fff;
-
-    a {
-      color: #fff;
-    }
-  }
-
-  > thead > tr > th,
-  > tbody > tr > th,
-  > tfoot > tr > th,
-  > thead > tr > td,
-  > tbody > tr > td,
-  > tfoot > tr > td {
-    border: none;
-  }
-
-  &-bordered > thead > tr > th,
-  &-bordered > tbody > tr > th,
-  &-bordered > tfoot > tr > th,
-  &-bordered > thead > tr > td,
-  &-bordered > tbody > tr > td,
-  &-bordered > tfoot > tr > td {
-    border: 1px solid @table-border-color;
-  }
-}
-
-// Forms ======================================================================
-
-.form-control,
-input, {
-  border-width: 2px;
-  .box-shadow(none);
-
-  &:focus {
-    .box-shadow(none);
-  }
-}
-
-.has-warning {
-  .help-block,
-  .control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  .form-control-feedback {
-    color: @brand-warning;
-  }
-
-  .form-control,
-  .form-control:focus {
-    border: 2px solid @brand-warning;
-  }
-
-  .input-group-addon {
-    border-color: @brand-warning;
-  }
-}
-
-.has-error {
-  .help-block,
-  .control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  .form-control-feedback {
-    color: @brand-danger;
-  }
-
-  .form-control,
-  .form-control:focus {
-    border: 2px solid @brand-danger;
-  }
-
-  .input-group-addon {
-    border-color: @brand-danger;
-  }
-}
-
-.has-success {
-  .help-block,
-  .control-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  .form-control-feedback {
-    color: @brand-success;
-  }
-
-  .form-control,
-  .form-control:focus {
-    border: 2px solid @brand-success;
-  }
-
-  .input-group-addon {
-    border-color: @brand-success;
-  }
-}
-
-// Navs =======================================================================
-
-.nav {
-  .open > a,
-  .open > a:hover,
-  .open > a:focus {
-    border-color: transparent;
-  }
-}
-
-.pager {
-  a,
-  a:hover {
-    color: #fff;
-  }
-
-  .disabled {
-    &>a,
-    &>a:hover,
-    &>a:focus,
-    &>span {
-      background-color: @pagination-disabled-bg;
-    }
-  }
-}
-
-// Indicators =================================================================
-
-.close {
-  color: #fff;
-  text-decoration: none;
-  opacity: 0.4;
-
-  &:hover,
-  &:focus {
-    color: #fff;
-    opacity: 1;
-  }
-}
-
-.alert {
-
-  .alert-link {
-    color: #fff;
-    text-decoration: underline;
-  }
-}
-
-// Progress bars ==============================================================
-
-.progress {
-  height: 10px;
-  .box-shadow(none);
-  .progress-bar {
-    font-size: 10px;
-    line-height: 10px;
-  }
-}
-
-// Containers =================================================================
-
-.well {
-  .box-shadow(none);
-}
-
-a.list-group-item {
-
-  &.active,
-  &.active:hover,
-  &.active:focus {
-    border-color: @list-group-border;
-  }
-
-  &-success {
-    &.active {
-      background-color: @state-success-bg;
-    }
-
-    &.active:hover,
-    &.active:focus {
-      background-color: darken(@state-success-bg, 5%);
-    }
-  }
-
-  &-warning {
-    &.active {
-      background-color: @state-warning-bg;
-    }
-
-    &.active:hover,
-    &.active:focus {
-      background-color: darken(@state-warning-bg, 5%);
-    }
-  }
-
-  &-danger {
-    &.active {
-      background-color: @state-danger-bg;
-    }
-
-    &.active:hover,
-    &.active:focus {
-      background-color: darken(@state-danger-bg, 5%);
-    }
-  }
-}
-
-.panel {
-  &-default {
-    .close {
-      color: @text-color;
-    }
-  }
-}
-
-.modal {
-  .close {
-    color: @text-color;
-  }
-}
-
-.popover {
-  color: @text-color;
-}
diff --git a/public/css/themes/modern.less b/public/css/themes/modern.less
deleted file mode 100644
index f9e6d8b25f..0000000000
--- a/public/css/themes/modern.less
+++ /dev/null
@@ -1,151 +0,0 @@
-@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
-@import url("http://fonts.googleapis.com/css?family=Raleway:400,300");
-
-// Colors
-// -------------------------
-
-@gray-lighter: #f5f5f5;
-@gray-light: #e0e0e0;
-@gray: #737373;
-@gray-dark: #404040;
-@gray-darker: #121212;
-
-@brand-primary: #2ac5ee;
-@brand-success: #0f9d58;
-@brand-warning: #f4b400;
-@brand-danger: #d80017;
-@brand-info: #5bc0dd;
-
-// Footer
-// -------------------------
-
-footer {
-  color: #fff;
-  background-color: @gray-darker;
-
-  a:hover {
-    color: #fff;
-  }
-}
-
-// Typography
-// -------------------------
-
-@font-size-base: 13px;
-@font-family-base: 'Montserrat', sans-serif;
-@headings-font-family: 'Montserrat', sans-serif;
-@headings-font-weight: 700;
-@text-color: @gray-darker;
-@link-color: @brand-primary;
-@link-hover-color: @gray-darker;
-
-a {
-  transition: all .4s cubic-bezier(.24,.45,.46,.92);
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-ul,
-p {
-  font-family: 'Raleway', sans-serif;
-  font-size: 14px;
-  font-weight: 300;
-}
-
-.text-danger {
-  color: @brand-danger;
-}
-
-// Dropdowns
-// -------------------------
-
-@dropdown-link-color: @gray-darker;
-
-.dropdown-menu > li > a {
-  font-weight: 300;
-}
-
-// Buttons
-// -------------------------
-
-@btn-default-bg: @gray-lighter;
-@btn-default-color: @gray-darker;
-
-.btn {
-  padding: 10px 16px;
-  border: 0;
-  border-radius: 3px;
-  transition: all .4s cubic-bezier(.24,.45,.46,.92);
-
-  &:hover {
-    color: #fff;
-    background-color: @gray-darker;
-  }
-}
-
-.btn-social {
-  padding: 10px 50px;
-
-  :first-child {
-    width: 38px;
-    line-height: 38px;
-  }
-}
-
-.btn-link {
-
-  &:hover {
-    color: @gray-darker;
-    text-decoration: none;
-    background-color: transparent;
-  }
-}
-
-// Forms
-// -------------------------
-
-@input-border-radius: 2px;
-@input-border-focus: #999;
-@input-border: #f0f0f0;
-@input-color: #444;
-@input-color-placeholder: #999;
-@input-height-base: 44px;
-
-// Form states and alerts
-// -------------------------
-
-@state-success-bg: @brand-success;
-@state-info-bg: @brand-primary;
-@state-warning-bg: @brand-warning;
-@state-danger-bg: @brand-danger;
-
-.alert {
-  font-family: 'Raleway', sans-serif;
-  color: #fff;
-}
-
-// Navbar
-// -------------------------
-
-@navbar-height: 50px;
-@navbar-default-bg: rgba(255,255,255,0.95);
-@navbar-default-link-color: @gray-darker;
-@navbar-default-link-active-color: @brand-primary;
-@navbar-default-link-active-bg: transparent;
-@navbar-default-link-hover-color: @brand-primary;
-@navbar-default-link-hover-bg: transparent;
-@navbar-default-brand-color: @gray-darker;
-@navbar-default-brand-hover-color: @brand-primary;
-
-.navbar-default {
-  border: 0;
-  box-shadow: 0 1px 5px rgba(0,0,0,.15);
-
-  .navbar-nav {
-    > li > a {
-      transition: color .4s cubic-bezier(.24,.45,.46,.92);
-    }
-  }
-}
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
index 3ec62dd50c..60054e1992 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicons.html b/public/favicons.html
deleted file mode 100644
index ba348ed7db..0000000000
--- a/public/favicons.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
-<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
-<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
-<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
-<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
-<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
-<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
-<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
-<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
-<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
-<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
-<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
-<link rel="manifest" href="/android-chrome-manifest.json">
-<meta name="msapplication-TileColor" content="#492c14">
-<meta name="msapplication-TileImage" content="/mstile-144x144.png">
-<meta name="theme-color" content="#ffffff">
diff --git a/public/images/freeCodeCamp-puck.svg b/public/images/freeCodeCamp-puck.svg
new file mode 100644
index 0000000000..f2572ed38b
--- /dev/null
+++ b/public/images/freeCodeCamp-puck.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="600.000000pt" height="600.000000pt" viewBox="0 0 600.000000 600.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)"
+fill="#006400" stroke="none">
+<path d="M0 3000 l0 -3000 3000 0 3000 0 0 3000 0 3000 -3000 0 -3000 0 0
+-3000z m1565 1504 c13 -8 28 -29 34 -46 16 -46 -6 -83 -142 -226 -143 -152
+-228 -268 -301 -411 -122 -241 -176 -471 -176 -761 0 -319 54 -567 180 -825
+75 -154 157 -269 299 -418 118 -125 157 -186 145 -232 -8 -34 -59 -75 -93 -75
+-83 0 -215 113 -367 316 -199 264 -305 511 -366 851 -20 112 -23 161 -22 383
+0 239 1 263 26 381 66 306 188 557 396 816 176 217 305 301 387 247z m2840 -3
+c64 -29 145 -102 236 -211 287 -347 421 -684 460 -1158 41 -503 -98 -959 -414
+-1352 -137 -171 -269 -280 -337 -280 -29 0 -77 27 -90 49 -29 54 -7 92 137
+243 168 176 267 319 344 497 194 452 178 1048 -40 1496 -85 174 -168 288 -343
+472 -49 51 -93 104 -98 118 -22 57 -5 106 45 133 28 16 54 14 100 -7z m-1729
+-165 c162 -43 314 -169 383 -317 38 -82 48 -118 91 -344 25 -128 48 -187 84
+-210 45 -30 114 3 129 62 7 33 -10 100 -44 167 -16 33 -29 67 -29 78 0 56 115
+-21 230 -153 161 -187 217 -361 208 -644 -6 -162 -29 -250 -100 -369 -73 -123
+-291 -316 -357 -316 -18 0 -51 24 -51 37 0 3 28 35 61 71 122 133 168 222 176
+340 8 121 -31 247 -100 320 -17 17 -39 32 -49 32 -16 0 -16 -3 -4 -38 7 -20
+17 -56 21 -80 6 -39 4 -45 -28 -77 -32 -32 -40 -35 -92 -35 -112 0 -130 32
+-121 210 6 118 5 128 -17 175 -39 81 -133 165 -184 165 -26 0 -32 -33 -10 -47
+32 -20 47 -58 47 -123 0 -101 -32 -155 -152 -260 -153 -134 -188 -194 -188
+-324 0 -174 84 -328 208 -383 39 -17 52 -28 50 -41 -6 -30 -70 -19 -171 30
+-161 78 -280 190 -356 338 -53 101 -74 185 -75 300 -1 159 38 253 240 576 178
+286 221 392 212 531 -7 109 -81 238 -159 279 -30 15 -39 48 -16 57 24 10 113
+6 163 -7z m1435 -2395 c32 -32 39 -46 39 -77 0 -51 -18 -83 -59 -111 l-34 -23
+-1049 0 c-1143 0 -1080 -3 -1127 56 -14 18 -21 41 -21 72 0 38 5 50 39 83 l39
+39 1067 0 1067 0 39 -39z"/>
+</g>
+</svg>
diff --git a/public/images/freecodecamp_logo.svg b/public/images/freecodecamp_logo.svg
deleted file mode 100644
index 2c24007979..0000000000
--- a/public/images/freecodecamp_logo.svg
+++ /dev/null
@@ -1,199 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   id="Layer_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 498.8 72"
-   enable-background="new 0 0 498.8 72"
-   xml:space="preserve"
-   inkscape:version="0.48.5 r10040"
-   width="100%"
-   height="100%"
-   sodipodi:docname="freeCodeCamp.svg"><metadata
-   id="metadata47"><rdf:RDF><cc:Work
-       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
-   id="defs45">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-</defs><sodipodi:namedview
-   pagecolor="#ffffff"
-   bordercolor="#666666"
-   borderopacity="1"
-   objecttolerance="10"
-   gridtolerance="10"
-   guidetolerance="10"
-   inkscape:pageopacity="0"
-   inkscape:pageshadow="2"
-   inkscape:window-width="1366"
-   inkscape:window-height="705"
-   id="namedview43"
-   showgrid="false"
-   inkscape:zoom="1"
-   inkscape:cx="215.72458"
-   inkscape:cy="-163.56938"
-   inkscape:window-x="-4"
-   inkscape:window-y="-4"
-   inkscape:window-maximized="1"
-   inkscape:current-layer="Layer_1" />
-<rect
-   style="fill:#502d16;fill-opacity:1;stroke:none"
-   id="rect3038"
-   width="493"
-   height="72.63604"
-   x="3.0000002"
-   y="-0.75736016"
-   ry="9.0263624"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path5"
-   d="m 27.2,28.5 h -4 c -1.4,0 -2.1,-0.6 -2.1,-1.8 0,-1.2 0.7,-1.8 2.1,-1.8 h 4 v -3.5 c 0,-6.1 3.1,-9.1 9.3,-9.1 2.5,0 4.6,0.5 6.3,1.4 2.1,1.3 3.2,3.2 3.2,5.6 0,1.6 -0.6,2.3 -1.8,2.3 -0.8,0 -1.5,-0.5 -1.9,-1.4 -0.5,-1.6 -1,-2.5 -1.3,-2.9 -0.7,-0.9 -2.2,-1.4 -4.4,-1.4 -3.8,0 -5.6,1.9 -5.6,5.6 v 3.4 h 7.3 c 1.6,0 2.4,0.6 2.4,1.8 0,1.2 -0.8,1.8 -2.4,1.8 H 31 v 22.9 c 0,1.4 -0.6,2.1 -1.8,2.1 -1.2,0 -1.8,-0.7 -1.8,-2.1 V 28.5 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path7"
-   d="M 59.7,49.4 V 28.5 h -5.4 c -1.5,0 -2.2,-0.6 -2.2,-1.8 0,-1.2 0.7,-1.8 2.2,-1.8 h 7.2 c 1.2,0 1.9,1.1 1.9,3.1 2.2,-2.4 4.6,-3.7 7.1,-3.7 2.1,0 3.7,0.6 4.9,1.9 1.2,1.3 1.8,3 1.8,5 0,1.4 -0.6,2.1 -1.8,2.1 -0.7,0 -1.2,-0.5 -1.5,-1.4 -0.5,-1.7 -0.8,-2.6 -0.9,-2.7 -0.5,-0.9 -1.5,-1.4 -2.8,-1.4 -1.4,0 -2.7,0.5 -3.9,1.5 -0.7,0.5 -1.7,1.6 -3,3.2 v 16.7 h 6.8 c 1.5,0 2.2,0.6 2.2,1.7 0,1.2 -0.7,1.9 -2.2,1.9 H 54.2 C 52.7,52.8 52,52.2 52,51 c 0,-1.2 0.7,-1.8 2.2,-1.8 h 5.5 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path9"
-   d="m 87,39.6 v 4 c 0,4.3 3,6.4 9.1,6.4 2.2,0 4,-0.2 5.4,-0.7 0.7,-0.2 2,-0.9 3.7,-2.1 1.1,-1 1.9,-1.5 2.2,-1.5 1,0 1.5,0.5 1.5,1.6 0,1.1 -0.7,2.2 -2.2,3.4 -2.4,1.9 -6,2.9 -10.8,2.9 -8.4,0 -12.6,-3.3 -12.6,-9.9 v -10 c 0,-2.3 0.9,-4.3 2.6,-5.9 2.3,-2.2 5.7,-3.2 10.3,-3.2 8.2,0 12.3,4.1 12.3,12.2 0,2 -0.8,3 -2.3,3 H 87 z M 87,36 h 17.9 c 0,-5.4 -3,-8.1 -9.1,-8.1 -2.2,0 -4.2,0.5 -6,1.5 C 88,30.7 87,32.2 87,33.9 V 36 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path11"
-   d="m 118.4,39.6 v 4 c 0,4.3 3,6.4 9.1,6.4 2.2,0 4,-0.2 5.4,-0.7 0.7,-0.2 2,-0.9 3.7,-2.1 1.1,-1 1.9,-1.5 2.2,-1.5 1,0 1.5,0.5 1.5,1.6 0,1.1 -0.7,2.2 -2.2,3.4 -2.4,1.9 -6,2.9 -10.8,2.9 -8.4,0 -12.6,-3.3 -12.6,-9.9 v -10 c 0,-2.3 0.9,-4.3 2.6,-5.9 2.3,-2.2 5.7,-3.2 10.3,-3.2 8.2,0 12.3,4.1 12.3,12.2 0,2 -0.8,3 -2.3,3 h -19.2 z m 0,-3.6 h 17.9 c 0,-5.4 -3,-8.1 -9.1,-8.1 -2.2,0 -4.2,0.5 -6,1.5 -1.9,1.3 -2.8,2.8 -2.8,4.5 V 36 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path13"
-   d="M 146.5,41.9 V 26.3 c 0,-8.2 4.3,-12.2 13,-12.2 3.5,0 6.3,0.8 8.5,2.3 2.5,1.9 3.7,4.5 3.7,7.7 0,1.5 -0.6,2.3 -1.9,2.3 -0.9,0 -1.5,-0.7 -1.9,-2.2 -0.2,-1.2 -0.7,-2.4 -1.4,-3.5 -1.1,-2 -3.5,-2.9 -7.3,-2.9 -3.2,0 -5.5,0.8 -6.9,2.4 -1.3,1.5 -2,3.8 -2,7.1 v 13 c 0,3.4 0.7,5.8 2.1,7.3 1.5,1.6 3.8,2.5 7,2.5 4.9,0 7.7,-1.7 8.4,-5.1 0.3,-1.3 0.4,-1.9 0.4,-2 0.3,-0.7 0.8,-1.1 1.5,-1.1 1.2,0 1.9,0.8 1.9,2.3 0,3.1 -1.3,5.5 -3.9,7.4 -2.1,1.4 -4.8,2.1 -8.2,2.1 -4,0 -7.1,-0.9 -9.4,-2.8 -2.4,-2.1 -3.6,-5.1 -3.6,-9 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path15"
-   d="M 177.5,44.1 V 33.8 c 0,-6.3 4.2,-9.4 12.6,-9.4 8.4,0 12.6,3.1 12.6,9.4 v 10.3 c 0,6.3 -4.1,9.4 -12.4,9.4 -8.6,0 -12.8,-3.1 -12.8,-9.4 z m 21.5,0 V 33.8 c 0,-3.9 -3,-5.9 -9.1,-5.9 -5.8,0 -8.8,2 -8.8,5.9 v 10.3 c 0,3.9 3,5.9 9,5.8 6,0 8.9,-1.9 8.9,-5.8 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path17"
-   d="m 230.2,50.1 c -1.7,1.3 -3.2,2.1 -4.5,2.6 -1.4,0.5 -3.1,0.8 -5.1,0.8 -3.4,0 -6.1,-0.7 -8.2,-2.1 -2.4,-1.6 -3.6,-4 -3.6,-7.3 V 33.6 c 0,-3.1 1.2,-5.5 3.5,-7.1 2,-1.4 4.7,-2.1 7.9,-2.1 2.1,0 3.9,0.2 5.3,0.7 1.4,0.5 2.9,1.4 4.5,2.7 V 14.9 c 0,-1.7 0.6,-2.6 1.7,-2.6 1.2,0 1.9,0.9 1.9,2.6 v 36.7 c 0,1.3 -0.6,1.9 -1.7,1.9 -0.7,0 -1.2,-0.4 -1.4,-1.2 -0.2,-0.6 -0.3,-1.3 -0.3,-2.2 z M 230,45.9 V 31.5 c -1.8,-1.3 -3.2,-2.2 -4.3,-2.6 -1.5,-0.6 -3.1,-0.9 -4.9,-0.9 -2.3,0 -4.2,0.4 -5.6,1.3 -1.8,1.1 -2.7,2.7 -2.7,4.7 v 9.9 c 0,2.1 0.9,3.7 2.8,4.8 1.5,0.8 3.4,1.3 5.7,1.3 1.9,0 3.6,-0.3 5,-0.9 1.2,-0.8 2.5,-1.8 4,-3.2 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path19"
-   d="m 243.8,39.6 v 4 c 0,4.3 3,6.4 9.1,6.4 2.2,0 4,-0.2 5.4,-0.7 0.7,-0.2 2,-0.9 3.7,-2.1 1.1,-1 1.9,-1.5 2.2,-1.5 1,0 1.5,0.5 1.5,1.6 0,1.1 -0.7,2.2 -2.2,3.4 -2.4,1.9 -6,2.9 -10.8,2.9 -8.4,0 -12.6,-3.3 -12.6,-9.9 v -10 c 0,-2.3 0.9,-4.3 2.6,-5.9 2.3,-2.2 5.7,-3.2 10.3,-3.2 8.2,0 12.3,4.1 12.3,12.2 0,2 -0.8,3 -2.3,3 h -19.2 z m 0,-3.6 h 17.9 c 0,-5.4 -3,-8.1 -9.1,-8.1 -2.2,0 -4.2,0.5 -6,1.5 -1.9,1.3 -2.8,2.8 -2.8,4.5 V 36 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path21"
-   d="M 271.9,41.9 V 26.3 c 0,-8.2 4.3,-12.2 13,-12.2 3.5,0 6.3,0.8 8.5,2.3 2.5,1.9 3.7,4.5 3.7,7.7 0,1.5 -0.6,2.3 -1.9,2.3 -0.9,0 -1.5,-0.7 -1.9,-2.2 -0.2,-1.2 -0.7,-2.4 -1.4,-3.5 -1.1,-2 -3.5,-2.9 -7.3,-2.9 -3.2,0 -5.5,0.8 -6.9,2.4 -1.3,1.5 -2,3.8 -2,7.1 v 13 c 0,3.4 0.7,5.8 2.1,7.3 1.5,1.6 3.8,2.5 7,2.5 4.9,0 7.7,-1.7 8.4,-5.1 0.3,-1.3 0.4,-1.9 0.4,-2 0.3,-0.7 0.8,-1.1 1.5,-1.1 1.2,0 1.9,0.8 1.9,2.3 0,3.1 -1.3,5.5 -3.9,7.4 -2.1,1.4 -4.8,2.1 -8.2,2.1 -4,0 -7.1,-0.9 -9.4,-2.8 -2.3,-2.1 -3.6,-5.1 -3.6,-9 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path23"
-   d="m 323.1,50.1 c -1.8,1.3 -3.2,2.2 -4.2,2.6 -1.3,0.5 -2.9,0.8 -4.9,0.8 -3,0 -5.5,-0.6 -7.4,-1.9 -2.2,-1.5 -3.4,-3.7 -3.4,-6.6 0,-2.9 1.2,-5.2 3.5,-6.8 2,-1.5 4.6,-2.2 7.6,-2.2 2.5,0 5.3,0.6 8.5,1.7 v -4.4 c 0,-2.1 -1,-3.6 -3,-4.5 -1.4,-0.6 -3.1,-0.9 -5.1,-0.9 -4.7,0 -7.2,1.3 -7.7,3.9 -0.2,1.2 -0.4,1.8 -0.4,1.9 -0.3,0.6 -0.8,0.9 -1.5,0.9 -1.3,0 -2,-0.7 -2,-2.1 0,-1.9 0.7,-3.6 2.2,-5.2 1.8,-2 5.1,-3 9.7,-3 3.7,0 6.4,0.6 8.2,1.8 2.1,1.5 3.2,4 3.2,7.5 v 12.8 c 0,1.5 0.3,2.5 0.9,3 0.1,0.1 0.7,0.4 1.7,0.8 0.6,0.3 0.9,0.8 0.9,1.7 0,1 -0.5,1.5 -1.6,1.5 -0.3,0 -0.8,-0.1 -1.6,-0.4 -1.4,-0.5 -2.3,-0.8 -2.5,-0.9 -0.5,-0.3 -0.9,-1 -1.1,-2 z m -0.2,-3.8 V 41 c -2.8,-0.9 -5.5,-1.4 -7.9,-1.4 -5.4,0 -8.1,1.7 -8.1,5.2 0,1.8 0.8,3.2 2.4,4 1.3,0.7 2.9,1.1 4.9,1.1 1.7,0 3.3,-0.3 4.7,-1 1.1,-0.4 2.4,-1.3 4,-2.6 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path25"
-   d="m 337.1,27.4 c 0.9,-1.1 1.7,-1.9 2.3,-2.2 0.8,-0.5 1.8,-0.8 3.1,-0.8 2,0 3.7,1 5.2,3.1 1,-1.2 1.9,-2 2.7,-2.4 0.9,-0.5 2.1,-0.7 3.5,-0.7 4.3,0 6.5,2.1 6.5,6.3 V 51 c 0,1.7 -0.6,2.5 -1.9,2.5 -1.2,0 -1.8,-0.8 -1.8,-2.5 V 31.9 c 0,-2.6 -1.1,-4 -3.2,-4 -1.6,0 -3.2,1 -4.6,2.9 V 51 c 0,1.7 -0.6,2.5 -1.8,2.5 -1.2,0 -1.8,-0.8 -1.8,-2.5 V 32.3 c 0,-2.9 -1.2,-4.3 -3.5,-4.3 -1.5,0 -2.9,1 -4.4,2.9 V 51 c 0,1.7 -0.6,2.5 -1.9,2.5 -1.2,0 -1.8,-0.8 -1.8,-2.5 V 26.2 c 0,-1.2 0.5,-1.8 1.5,-1.8 0.5,0 1,0.4 1.3,1.1 0.4,0.5 0.6,1.2 0.6,1.9 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path27"
-   d="m 369.6,27.4 c 2.8,-2 6.1,-3 9.7,-3 7.6,0 11.4,3.2 11.4,9.5 v 10.4 c 0,3 -1.1,5.3 -3.2,7 -1.9,1.5 -4.5,2.3 -7.8,2.3 -3.9,0 -7.2,-1 -10.1,-3.1 v 11.8 c 0,1.8 -0.6,2.7 -1.8,2.7 -1.2,0 -1.8,-0.9 -1.8,-2.7 V 27.1 c 0,-1.8 0.5,-2.7 1.5,-2.7 0.5,0 1,0.4 1.4,1.1 0.2,0.6 0.5,1.3 0.7,1.9 z m 0,19 c 2.6,2.3 5.8,3.5 9.5,3.5 2.3,0 4.1,-0.4 5.5,-1.3 1.7,-1 2.5,-2.5 2.5,-4.4 V 33.8 c 0,-2.2 -0.9,-3.7 -2.7,-4.7 -1.4,-0.7 -3.3,-1.1 -5.6,-1.1 -2.1,0 -3.8,0.3 -5.1,0.9 -1.2,0.5 -2.5,1.6 -4.1,3.2 v 14.3 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path29"
-   d="m 403.1,36.5 c 0,-7.9 2.7,-14.9 8.2,-21.1 2,-2.3 3.6,-3.4 4.7,-3.4 0.4,0 0.8,0.1 1.1,0.4 0.3,0.3 0.5,0.6 0.5,1 0,0.6 -0.7,1.5 -2.1,2.9 -5.7,5.5 -8.6,12.3 -8.6,20.4 0,9 3,16.3 8.9,21.9 1.2,1.1 1.8,2 1.8,2.7 0,0.4 -0.2,0.8 -0.5,1.1 -0.3,0.3 -0.7,0.5 -1.1,0.5 -1.4,0 -3.3,-1.6 -5.8,-4.8 -4.8,-5.9 -7.1,-13.1 -7.1,-21.6 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /><path
-   style="fill:#ffffff"
-   inkscape:connector-curvature="0"
-   id="path31"
-   d="m 478.8,38.5 c 0,7.9 -2.7,14.9 -8.2,21.1 -2,2.3 -3.6,3.4 -4.7,3.4 -0.4,0 -0.8,-0.1 -1.1,-0.4 -0.3,-0.3 -0.5,-0.7 -0.5,-1.1 0,-0.6 0.7,-1.5 2.1,-2.8 5.7,-5.5 8.6,-12.3 8.6,-20.4 0,-9 -3,-16.3 -8.9,-21.9 -1.2,-1.1 -1.8,-2 -1.8,-2.7 0,-0.4 0.2,-0.8 0.5,-1.1 0.3,-0.3 0.7,-0.5 1.1,-0.5 1.3,0 3.3,1.6 5.8,4.8 4.7,6 7.1,13.2 7.1,21.6 z"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" />
-<g
-   id="g33"
-   style="fill:#f9f9f9"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90"
-   transform="translate(-4.8945596e-8,2)">
-	<line
-   x1="424.39999"
-   y1="54.099998"
-   x2="459.10001"
-   y2="54.099998"
-   id="line35"
-   style="fill:#f9f9f9" />
-	<path
-   d="m 459,56.2 h -34.7 c -1.1,0 -2.1,-0.9 -2.1,-2.1 0,-1.2 0.9,-2.1 2.1,-2.1 H 459 c 1.1,0 2.1,0.9 2.1,2.1 0,1.2 -0.9,2.1 -2.1,2.1 z"
-   id="path37"
-   style="fill:#f9f9f9"
-   inkscape:connector-curvature="0" />
-</g>
-
-
-<path
-   id="path3081"
-   d="m 452.3464,28.078901 c -0.56036,-1.883074 -1.43977,-3.650779 -2.80221,-5.059704 -0.3609,-0.373149 -0.74714,-0.721366 -1.13213,-1.069159 -0.30173,-0.272573 -1.04972,-0.714182 -1.20565,-1.080993 0.79404,1.868705 1.58979,3.807139 0.99013,5.855869 -0.27089,0.926746 -1.29609,3.146204 -2.63148,2.580351 -1.26313,-0.535425 -1.11607,-3.182546 -1.22468,-4.252128 -0.26708,-2.624301 -0.84687,-5.243532 -2.2465,-7.514969 -0.76236,-1.237353 -1.76095,-2.337784 -3.01816,-3.084083 -1.65107,-0.979993 -3.36342,-1.638815 -5.24226,-0.928437 0.41371,-0.156359 1.50316,1.095783 1.70642,1.337084 0.65841,0.780529 1.20693,1.703895 1.50063,2.685578 0.59671,1.994639 0.0761,4.266075 -0.62079,6.16732 -1.4423,3.934762 -3.84855,7.473554 -5.00349,11.51988 -0.40274,1.410192 -0.67911,2.859686 -0.75476,4.326083 -0.23749,4.619363 2.16072,8.850785 5.95941,11.434517 0.86209,0.586136 2.39483,1.32018 3.48639,0.942382 -3.18846,-1.705162 -4.24875,-3.106057 -4.74107,-5.11295 -1.14142,-4.652748 3.21255,-7.607094 5.09563,-11.287455 0.50119,-0.97957 0.86504,-2.055914 0.73826,-3.166911 -0.0473,-0.414141 -0.51894,-2.451038 -1.14438,-2.350883 1.89576,-0.303845 3.13014,0.958018 3.77883,2.60444 0.68333,1.73432 1.08944,3.515971 0.78771,5.36059 -0.101,0.616985 -0.56501,2.544431 0.32836,2.669518 1.22974,0.172841 2.28538,-1.458791 2.03309,-3.032949 -0.12974,-0.723901 -0.25905,-1.852646 -0.25905,-1.85307 1.30666,1.609657 1.89913,3.22058 2.09099,4.987441 0.34315,3.162263 -1.00408,7.318463 -3.53837,9.899238 1.06536,-1.085219 2.42146,-1.835322 3.45005,-2.994071 1.05056,-1.182837 1.85222,-2.551193 2.47893,-3.999419 1.403,-3.241286 2.22241,-6.905166 1.99421,-10.444382 -0.10818,-1.68868 -0.35413,-3.459344 -0.85406,-5.138728 z"
-   inkscape:connector-curvature="0"
-   style="fill:#ffffff"
-   inkscape:export-filename="C:\Users\anon\Desktop\logo4.0.png"
-   inkscape:export-xdpi="90"
-   inkscape:export-ydpi="90" /></svg>
\ No newline at end of file
diff --git a/server/boot/authentication.js b/server/boot/authentication.js
index 100880e0a4..546bf6c755 100644
--- a/server/boot/authentication.js
+++ b/server/boot/authentication.js
@@ -29,25 +29,26 @@ module.exports = function enableAuthentication(app) {
   const api = app.loopback.Router();
   const { AuthToken, User } = app.models;
 
-  router.get('/login', (req, res) => res.redirect(301, '/signin'));
-  router.get('/logout', (req, res) => res.redirect(301, '/signout'));
-  router.get('/signup', (req, res) => res.redirect(301, '/signin'));
-  router.get('/email-signin', (req, res) => res.redirect(301, '/signin'));
+  router.get('/email-signin', (req, res) => res.redirect(301, '/login'));
+  router.get('/signin', (req, res) => res.redirect(301, '/signup'));
+  router.get('/signout', (req, res) => res.redirect(301, '/logout'));
 
-  function getEmailSignin(req, res) {
+  function getLegacySignUp(req, res) {
     if (isSignUpDisabled) {
       return res.render('account/beta', {
         title: 'New sign ups are disabled'
       });
     }
-    return res.render('account/email-signin', {
+    return res.render('account/deprecated-signup', {
       title: 'Sign in to freeCodeCamp using your Email Address'
     });
   }
+  router.get('/signup', ifUserRedirect, getLegacySignUp);
+  router.get('/login',
+  ifUserRedirect,
+  (req, res) => res.redirect(301, '/auth/auth0'));
 
-  router.get('/signin', ifUserRedirect, getEmailSignin);
-
-  router.get('/signout', (req, res) => {
+  router.get('/logout', (req, res) => {
     req.logout();
     res.redirect('/');
   });
diff --git a/server/component-passport.js b/server/component-passport.js
index f08305a4f2..63104737ff 100644
--- a/server/component-passport.js
+++ b/server/component-passport.js
@@ -2,6 +2,7 @@ import passport from 'passport';
 import { PassportConfigurator } from
  '@freecodecamp/loopback-component-passport';
 import passportProviders from './passport-providers';
+import url from 'url';
 
 const passportOptions = {
   emailOptional: true,
@@ -90,8 +91,58 @@ export default function setupPassport(app) {
   configurator.init();
 
   Object.keys(passportProviders).map(function(strategy) {
-    var config = passportProviders[strategy];
+    let config = passportProviders[strategy];
     config.session = config.session !== false;
+
+    // https://stackoverflow.com/q/37430452
+    let successRedirect = (req) => {
+      if (!!req && req.session && req.session.returnTo) {
+        let returnTo = req.session.returnTo;
+        delete req.session.returnTo;
+        return returnTo;
+      }
+      return config.successRedirect || '';
+    };
+
+    config.customCallback = !config.useCustomCallback
+      ? null
+      : (req, res, next) => {
+
+        passport.authenticate(
+          strategy,
+          { session: false },
+          (err, user) => {
+            if (err) {
+              return next(err);
+            }
+
+            if (!user) {
+              return res.redirect(config.failureRedirect);
+            }
+            let redirect = url.parse(successRedirect(req), true);
+
+            delete redirect.search;
+
+            req.flash(
+              'success',
+              'Success! You have signed in to your account. Happy Coding!'
+            );
+
+            // redirect.query = {
+            //   /* eslint-disable camelcase */
+            //   access_token: info.accessToken.id,
+            //   /* eslint-enable camelcase */
+            //   userId: user.id.toString()
+            // };
+
+            user.loginByRequest(req, res);
+
+            redirect = url.format(redirect);
+            return res.redirect(redirect);
+          }
+        )(req, res, next);
+    };
+
     configurator.configureProvider(
       strategy,
       {
diff --git a/server/middlewares/error-reporter.js b/server/middlewares/error-reporter.js
index 5b3aaba86b..2eb8455e2c 100644
--- a/server/middlewares/error-reporter.js
+++ b/server/middlewares/error-reporter.js
@@ -10,7 +10,7 @@ const log = debug('fcc:middlewares:error-reporter');
 
 const isOpbeatDisabled = !opbeat.appId;
 export default function errrorReporter() {
-  if (process.env.NODE_ENV !== 'production') {
+  if (process.env.NODE_ENV !== 'production' && process.env.ERROR_REPORTER) {
     return (err, req, res, next) => {
       if (isHandledError(err)) {
         // log out user messages in development
diff --git a/server/passport-providers.js b/server/passport-providers.js
index 733d1b845c..bab270396b 100644
--- a/server/passport-providers.js
+++ b/server/passport-providers.js
@@ -1,5 +1,5 @@
 const successRedirect = '/';
-const failureRedirect = '/signin';
+const failureRedirect = '/';
 const linkSuccessRedirect = '/settings';
 const linkFailureRedirect = '/settings';
 
@@ -165,5 +165,21 @@ export default {
       'We\'ve updated your profile based ',
       'on your your GitHub account.'
     ].join('')
+  },
+  'auth0-login': {
+    provider: 'auth0',
+    module: 'passport-auth0',
+    clientID: process.env.AUTH0_CLIENT_ID,
+    clientSecret: process.env.AUTH0_CLIENT_SECRET,
+    domain: process.env.AUTH0_DOMAIN,
+    cookieDomain: 'freeCodeCamp.org',
+    callbackURL: '/auth/auth0/callback',
+    authPath: '/auth/auth0',
+    callbackPath: '/auth/auth0/callback',
+    useCustomCallback: true,
+    successRedirect: successRedirect,
+    failureRedirect: failureRedirect,
+    scope: ['openid email'],
+    failureFlash: true
   }
 };
diff --git a/server/views/account/deprecated-signin.jade b/server/views/account/deprecated-signin.jade
index 0cb67ef558..9d51f4f018 100644
--- a/server/views/account/deprecated-signin.jade
+++ b/server/views/account/deprecated-signin.jade
@@ -1,26 +1,34 @@
 extends ../layout
 block content
-    .text-center
-        h2 If you originally signed up using one of these methods, you can sign in and add your email address to your account:
-        br
-        a.btn.btn-lg.btn-block.btn-social.btn-github(href='/auth/github')
-            i.fa.fa-github
-            | Sign in with GitHub
-        a.btn.btn-lg.btn-block.btn-social.btn-facebook(href='/auth/facebook')
-            i.fa.fa-facebook
-            | Sign in with Facebook
-        a.btn.btn-lg.btn-block.btn-social.btn-google(href='/auth/google')
-            i.fa.fa-google
-            | Sign in with Google
-        a.btn.btn-lg.btn-block.btn-social.btn-linkedin(href='/auth/linkedin')
-            i.fa.fa-linkedin
-            | Sign in with LinkedIn
-        a.btn.btn-lg.btn-block.btn-social.btn-twitter(href='/auth/twitter')
-            i.fa.fa-twitter
-            | Sign in with Twitter
-        br
-        p
-          a(href="/signin") Or click here to go back.
+  .container
+    .col-xs-12
+      .row
+        .text-center
+            h3 Sign in with one of these options if you used them as your original sign up methods :
+            br
+            a.btn.btn-lg.btn-block.btn-social.btn-github(href='/auth/github')
+                i.fa.fa-github
+                | Sign in with GitHub
+            a.btn.btn-lg.btn-block.btn-social.btn-facebook(href='/auth/facebook')
+                i.fa.fa-facebook
+                | Sign in with Facebook
+            a.btn.btn-lg.btn-block.btn-social.btn-google(href='/auth/google')
+                i.fa.fa-google
+                | Sign in with Google
+            a.btn.btn-lg.btn-block.btn-social.btn-linkedin(href='/auth/linkedin')
+                i.fa.fa-linkedin
+                | Sign in with LinkedIn
+            a.btn.btn-lg.btn-block.btn-social.btn-twitter(href='/auth/twitter')
+                i.fa.fa-twitter
+                | Sign in with Twitter
+            br
+            h3
+             | We are unable to create new accounts using these methods
+            h4 If you haven't updated your email with us, you should do that as soon as possible,
+             | after you login here, to avoid losing access to your account.
+            br
+            p
+              a(href="/signin") Or click here to go back.
 
     script.
       $(document).ready(function() {
diff --git a/server/views/account/deprecated-signup.jade b/server/views/account/deprecated-signup.jade
new file mode 100644
index 0000000000..b46594a565
--- /dev/null
+++ b/server/views/account/deprecated-signup.jade
@@ -0,0 +1,20 @@
+extends ../layout
+block content
+    .container
+      .col-xs-12
+        .row
+          .text-center
+            h2 Sign up (or sign in with your existing account)
+            br
+            br
+            br
+            a.btn.btn-lg.btn-primary(href='/auth/auth0')
+              | Continue with your email
+        .row
+          .text-center
+            br
+            br
+            br
+            br
+            a(href="/deprecated-signin")
+              | Continute with an old sign in method, that you used previously.
diff --git a/server/views/account/email-signin.jade b/server/views/account/email-signin.jade
deleted file mode 100644
index cf1fb37390..0000000000
--- a/server/views/account/email-signin.jade
+++ /dev/null
@@ -1,100 +0,0 @@
-extends ../layout
-block content
-    .container
-      .col-xs-12
-        .row
-          .col-sm-6.col-sm-offset-3.flashMessage.negative-30
-                #flash-board.alert.fade.in(style='display: none;')
-                    button.close(type='button', data-dismiss='alert')
-                        span.ion-close-circled#flash-close
-                    #flash-content
-        .row
-          .text-center
-            h2 Sign up (or sign in with your existing account)
-              .button-spacer
-          .col-sm-6.col-sm-offset-3
-              form(method='POST', action='/passwordless-auth')
-                  input(type='hidden', name='_csrf', value=_csrf)
-                  .form-group
-                      input.input-lg.form-control(type='email', name='email', id='email', placeholder='Enter your email address', autofocus=true, required, oninvalid="this.setCustomValidity('Enter your email address')", oninput="setCustomValidity('')")
-                  .button-spacer
-                  button#magic-btn.btn.btn-primary.btn-lg.btn-block(type='submit')
-                    | Get a sign in link
-        .row
-          .col-sm-6.col-sm-offset-3
-              br
-              p.text-center
-                br
-                br
-                a(href="/deprecated-signin") Try old sign in methods
-
-        script.
-          $(document).ready(function() {
-            function disableMagicButton (isDisabled) {
-                if (isDisabled) {
-                  $('#magic-btn')
-                    .prop('disabled', true)
-                    .html('<span style="color:#E0E0E0;"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i>OK - we\'re sending you an email. Open it and click sign in link.</span>');
-                } else {
-                  $('#magic-btn')
-                    .prop('disabled', true)
-                    .html('<span style="color:#E0E0E0;">If you didn\'t get the email, check your spam folder, or reload the page to try again.</span>');
-                }
-            }
-
-            $('form').submit(function(event){
-              event.preventDefault();
-              $('#flash-board').hide();
-              disableMagicButton(true);
-              var $form = $(event.target);
-              $.ajax({
-                type        : 'POST',
-                url         : $form.attr('action'),
-                data        : $form.serialize(),
-                dataType    : 'json',
-                encode      : true,
-                xhrFields   : { withCredentials:  true }
-              })
-              .fail(error => {
-                if (error.responseText){
-                  var data = JSON.parse(error.responseText);
-                  if(data.error && data.error.message) {
-                    $('#flash-content').html(data.error.message);
-                    $('#flash-board')
-                      .removeClass('alert-success')
-                      .addClass('alert-info')
-                      .slideDown(400)
-                      .delay(800)
-                      .fadeIn();
-                    disableMagicButton(false);
-                  }
-                }
-              })
-              .done(data => {
-                if(data && data.message) {
-                  var alertType = 'alert-';
-                  switch (data.type) {
-                    case 'errors': {
-                      alertType += 'danger';
-                      break
-                    }
-                    case 'success': {
-                      alertType += 'success';
-                      break
-                    }
-                    default: {
-                      alertType += 'info';
-                    }
-                  }
-                  $('#flash-content').html(data.message);
-                  $('#flash-board')
-                    .removeClass('alert-info alert-success alert-danger')
-                    .addClass(alertType)
-                    .slideDown(400)
-                    .delay(800)
-                    .fadeIn();
-                  disableMagicButton(false);
-                }
-              });
-            });
-          });