diff --git a/composer.json b/composer.json
index 6fca6f0..67f3785 100644
--- a/composer.json
+++ b/composer.json
@@ -7,10 +7,11 @@
     ],
     "license": "MIT",
     "require": {
-        "php": ">=7.1.0",
+        "php": ">=8.0.0",
         "bacon/bacon-qr-code": "^2.0",
-        "pragmarx/recovery": "^0.1.0",
-        "pragmarx/google2fa-laravel": "^0.2.0"
+        "pragmarx/google2fa-laravel": "^2.0.1",
+        "pragmarx/google2fa-qrcode": "^3.0",
+        "pragmarx/recovery": "^0.2.0"
     },
     "autoload": {
         "psr-4": {
diff --git a/config/lifeonscreen2fa.php b/config/lifeonscreen2fa.php
index d40dd13..6ae6413 100644
--- a/config/lifeonscreen2fa.php
+++ b/config/lifeonscreen2fa.php
@@ -41,13 +41,5 @@
          * Number of characters in each block in recovery code.
          */
         'chars_in_block'    => 16,
-
-        /**
-         * The following algorithms are currently supported:
-         *  - PASSWORD_DEFAULT
-         *  - PASSWORD_BCRYPT
-         *  - PASSWORD_ARGON2I // available from php 7.2
-         */
-        'hashing_algorithm' => PASSWORD_BCRYPT,
     ],
-];
\ No newline at end of file
+];
diff --git a/dist/css/tool.css b/dist/css/tool.css
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/dist/css/tool.css
@@ -0,0 +1 @@
+
diff --git a/dist/js/tool.js b/dist/js/tool.js
new file mode 100644
index 0000000..947b2e9
--- /dev/null
+++ b/dist/js/tool.js
@@ -0,0 +1,1297 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/RecoveryCodesModal.vue?vue&type=script&lang=js&":
+/*!*************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/RecoveryCodesModal.vue?vue&type=script&lang=js& ***!
+  \*************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  name: "RecoveryCodesModal",
+  data: function data() {
+    return {
+      codes: null,
+      confirming: false,
+      password: '',
+      errors: {}
+    };
+  },
+  methods: {
+    handleClose: function handleClose() {
+      this.$emit('close');
+    },
+    handleConfirm: function handleConfirm() {
+      this.$emit('confirm');
+    },
+    handleSubmit: function handleSubmit() {
+      var _this = this;
+
+      this.confirming = true;
+      this.errors = {};
+      Nova.request().post('/los/2fa/unlocked-recovery-codes', {
+        password: this.password
+      }).then(function (_ref) {
+        var data = _ref.data;
+        _this.codes = data.recovery_codes;
+      })["catch"](function (_ref2) {
+        var response = _ref2.response;
+        _this.errors = response.data.errors;
+      })["finally"](function () {
+        _this.confirming = false;
+      });
+    },
+    hideCodes: function hideCodes() {
+      this.codes = null;
+      this.handleClose();
+    }
+  },
+  computed: {
+    codesText: function codesText() {
+      return this.codes.join("\n");
+    }
+  },
+  mounted: function mounted() {
+    this.$refs.passwordInput.focus();
+  }
+});
+
+/***/ }),
+
+/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=script&lang=js&":
+/*!***********************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=script&lang=js& ***!
+  \***********************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _RecoveryCodesModal_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./RecoveryCodesModal.vue */ "./resources/js/components/RecoveryCodesModal.vue");
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  components: {
+    RecoveryCodesModal: _RecoveryCodesModal_vue__WEBPACK_IMPORTED_MODULE_0__["default"]
+  },
+  metaInfo: function metaInfo() {
+    return {
+      title: 'Nova Two Factor'
+    };
+  },
+  data: function data() {
+    return {
+      showRecoveryCodesModal: false
+    };
+  },
+  mounted: function mounted() {//
+  },
+  methods: {
+    openModal: function openModal() {
+      this.showRecoveryCodesModal = true;
+    },
+    closeModal: function closeModal() {
+      this.showRecoveryCodesModal = false;
+    },
+    confirmModal: function confirmModal() {
+      this.closeModal();
+    }
+  }
+});
+
+/***/ }),
+
+/***/ "./resources/js/tool.js":
+/*!******************************!*\
+  !*** ./resources/js/tool.js ***!
+  \******************************/
+/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
+
+Nova.booting(function (Vue, router, store) {
+  router.addRoutes([{
+    name: '2fa-recovery-codes',
+    path: '/recovery-codes',
+    component: (__webpack_require__(/*! ./components/Tool.vue */ "./resources/js/components/Tool.vue")["default"])
+  }]);
+});
+
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=style&index=0&lang=css&":
+/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=style&index=0&lang=css& ***!
+  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
+// Imports
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* Scoped Styles */\n", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ "./node_modules/css-loader/dist/runtime/api.js":
+/*!*****************************************************!*\
+  !*** ./node_modules/css-loader/dist/runtime/api.js ***!
+  \*****************************************************/
+/***/ ((module) => {
+
+"use strict";
+
+
+/*
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
+*/
+// css base code, injected by the css-loader
+// eslint-disable-next-line func-names
+module.exports = function (cssWithMappingToString) {
+  var list = []; // return the list of modules as css string
+
+  list.toString = function toString() {
+    return this.map(function (item) {
+      var content = cssWithMappingToString(item);
+
+      if (item[2]) {
+        return "@media ".concat(item[2], " {").concat(content, "}");
+      }
+
+      return content;
+    }).join("");
+  }; // import a list of modules into the list
+  // eslint-disable-next-line func-names
+
+
+  list.i = function (modules, mediaQuery, dedupe) {
+    if (typeof modules === "string") {
+      // eslint-disable-next-line no-param-reassign
+      modules = [[null, modules, ""]];
+    }
+
+    var alreadyImportedModules = {};
+
+    if (dedupe) {
+      for (var i = 0; i < this.length; i++) {
+        // eslint-disable-next-line prefer-destructuring
+        var id = this[i][0];
+
+        if (id != null) {
+          alreadyImportedModules[id] = true;
+        }
+      }
+    }
+
+    for (var _i = 0; _i < modules.length; _i++) {
+      var item = [].concat(modules[_i]);
+
+      if (dedupe && alreadyImportedModules[item[0]]) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      if (mediaQuery) {
+        if (!item[2]) {
+          item[2] = mediaQuery;
+        } else {
+          item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
+        }
+      }
+
+      list.push(item);
+    }
+  };
+
+  return list;
+};
+
+/***/ }),
+
+/***/ "./resources/sass/tool.scss":
+/*!**********************************!*\
+  !*** ./resources/sass/tool.scss ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+// extracted by mini-css-extract-plugin
+
+
+/***/ }),
+
+/***/ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=style&index=0&lang=css&":
+/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=style&index=0&lang=css& ***!
+  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_0_rules_0_use_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_0_rules_0_use_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Tool_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !!../../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[1]!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[2]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Tool.vue?vue&type=style&index=0&lang=css& */ "./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=style&index=0&lang=css&");
+
+            
+
+var options = {};
+
+options.insert = "head";
+options.singleton = false;
+
+var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_0_rules_0_use_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_0_rules_0_use_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Tool_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_1__["default"], options);
+
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_0_rules_0_use_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_0_rules_0_use_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Tool_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_1__["default"].locals || {});
+
+/***/ }),
+
+/***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
+/*!****************************************************************************!*\
+  !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
+  \****************************************************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+var isOldIE = function isOldIE() {
+  var memo;
+  return function memorize() {
+    if (typeof memo === 'undefined') {
+      // Test for IE <= 9 as proposed by Browserhacks
+      // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
+      // Tests for existence of standard globals is to allow style-loader
+      // to operate correctly into non-standard environments
+      // @see https://github.com/webpack-contrib/style-loader/issues/177
+      memo = Boolean(window && document && document.all && !window.atob);
+    }
+
+    return memo;
+  };
+}();
+
+var getTarget = function getTarget() {
+  var memo = {};
+  return function memorize(target) {
+    if (typeof memo[target] === 'undefined') {
+      var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
+
+      if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
+        try {
+          // This will throw an exception if access to iframe is blocked
+          // due to cross-origin restrictions
+          styleTarget = styleTarget.contentDocument.head;
+        } catch (e) {
+          // istanbul ignore next
+          styleTarget = null;
+        }
+      }
+
+      memo[target] = styleTarget;
+    }
+
+    return memo[target];
+  };
+}();
+
+var stylesInDom = [];
+
+function getIndexByIdentifier(identifier) {
+  var result = -1;
+
+  for (var i = 0; i < stylesInDom.length; i++) {
+    if (stylesInDom[i].identifier === identifier) {
+      result = i;
+      break;
+    }
+  }
+
+  return result;
+}
+
+function modulesToDom(list, options) {
+  var idCountMap = {};
+  var identifiers = [];
+
+  for (var i = 0; i < list.length; i++) {
+    var item = list[i];
+    var id = options.base ? item[0] + options.base : item[0];
+    var count = idCountMap[id] || 0;
+    var identifier = "".concat(id, " ").concat(count);
+    idCountMap[id] = count + 1;
+    var index = getIndexByIdentifier(identifier);
+    var obj = {
+      css: item[1],
+      media: item[2],
+      sourceMap: item[3]
+    };
+
+    if (index !== -1) {
+      stylesInDom[index].references++;
+      stylesInDom[index].updater(obj);
+    } else {
+      stylesInDom.push({
+        identifier: identifier,
+        updater: addStyle(obj, options),
+        references: 1
+      });
+    }
+
+    identifiers.push(identifier);
+  }
+
+  return identifiers;
+}
+
+function insertStyleElement(options) {
+  var style = document.createElement('style');
+  var attributes = options.attributes || {};
+
+  if (typeof attributes.nonce === 'undefined') {
+    var nonce =  true ? __webpack_require__.nc : 0;
+
+    if (nonce) {
+      attributes.nonce = nonce;
+    }
+  }
+
+  Object.keys(attributes).forEach(function (key) {
+    style.setAttribute(key, attributes[key]);
+  });
+
+  if (typeof options.insert === 'function') {
+    options.insert(style);
+  } else {
+    var target = getTarget(options.insert || 'head');
+
+    if (!target) {
+      throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
+    }
+
+    target.appendChild(style);
+  }
+
+  return style;
+}
+
+function removeStyleElement(style) {
+  // istanbul ignore if
+  if (style.parentNode === null) {
+    return false;
+  }
+
+  style.parentNode.removeChild(style);
+}
+/* istanbul ignore next  */
+
+
+var replaceText = function replaceText() {
+  var textStore = [];
+  return function replace(index, replacement) {
+    textStore[index] = replacement;
+    return textStore.filter(Boolean).join('\n');
+  };
+}();
+
+function applyToSingletonTag(style, index, remove, obj) {
+  var css = remove ? '' : obj.media ? "@media ".concat(obj.media, " {").concat(obj.css, "}") : obj.css; // For old IE
+
+  /* istanbul ignore if  */
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = replaceText(index, css);
+  } else {
+    var cssNode = document.createTextNode(css);
+    var childNodes = style.childNodes;
+
+    if (childNodes[index]) {
+      style.removeChild(childNodes[index]);
+    }
+
+    if (childNodes.length) {
+      style.insertBefore(cssNode, childNodes[index]);
+    } else {
+      style.appendChild(cssNode);
+    }
+  }
+}
+
+function applyToTag(style, options, obj) {
+  var css = obj.css;
+  var media = obj.media;
+  var sourceMap = obj.sourceMap;
+
+  if (media) {
+    style.setAttribute('media', media);
+  } else {
+    style.removeAttribute('media');
+  }
+
+  if (sourceMap && typeof btoa !== 'undefined') {
+    css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
+  } // For old IE
+
+  /* istanbul ignore if  */
+
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    while (style.firstChild) {
+      style.removeChild(style.firstChild);
+    }
+
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var singleton = null;
+var singletonCounter = 0;
+
+function addStyle(obj, options) {
+  var style;
+  var update;
+  var remove;
+
+  if (options.singleton) {
+    var styleIndex = singletonCounter++;
+    style = singleton || (singleton = insertStyleElement(options));
+    update = applyToSingletonTag.bind(null, style, styleIndex, false);
+    remove = applyToSingletonTag.bind(null, style, styleIndex, true);
+  } else {
+    style = insertStyleElement(options);
+    update = applyToTag.bind(null, style, options);
+
+    remove = function remove() {
+      removeStyleElement(style);
+    };
+  }
+
+  update(obj);
+  return function updateStyle(newObj) {
+    if (newObj) {
+      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {
+        return;
+      }
+
+      update(obj = newObj);
+    } else {
+      remove();
+    }
+  };
+}
+
+module.exports = function (list, options) {
+  options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
+  // tags it will allow on a page
+
+  if (!options.singleton && typeof options.singleton !== 'boolean') {
+    options.singleton = isOldIE();
+  }
+
+  list = list || [];
+  var lastIdentifiers = modulesToDom(list, options);
+  return function update(newList) {
+    newList = newList || [];
+
+    if (Object.prototype.toString.call(newList) !== '[object Array]') {
+      return;
+    }
+
+    for (var i = 0; i < lastIdentifiers.length; i++) {
+      var identifier = lastIdentifiers[i];
+      var index = getIndexByIdentifier(identifier);
+      stylesInDom[index].references--;
+    }
+
+    var newLastIdentifiers = modulesToDom(newList, options);
+
+    for (var _i = 0; _i < lastIdentifiers.length; _i++) {
+      var _identifier = lastIdentifiers[_i];
+
+      var _index = getIndexByIdentifier(_identifier);
+
+      if (stylesInDom[_index].references === 0) {
+        stylesInDom[_index].updater();
+
+        stylesInDom.splice(_index, 1);
+      }
+    }
+
+    lastIdentifiers = newLastIdentifiers;
+  };
+};
+
+/***/ }),
+
+/***/ "./resources/js/components/RecoveryCodesModal.vue":
+/*!********************************************************!*\
+  !*** ./resources/js/components/RecoveryCodesModal.vue ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _RecoveryCodesModal_vue_vue_type_template_id_f2b6f972_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./RecoveryCodesModal.vue?vue&type=template&id=f2b6f972&scoped=true& */ "./resources/js/components/RecoveryCodesModal.vue?vue&type=template&id=f2b6f972&scoped=true&");
+/* harmony import */ var _RecoveryCodesModal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./RecoveryCodesModal.vue?vue&type=script&lang=js& */ "./resources/js/components/RecoveryCodesModal.vue?vue&type=script&lang=js&");
+/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+
+
+/* normalize component */
+;
+var component = (0,_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
+  _RecoveryCodesModal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _RecoveryCodesModal_vue_vue_type_template_id_f2b6f972_scoped_true___WEBPACK_IMPORTED_MODULE_0__.render,
+  _RecoveryCodesModal_vue_vue_type_template_id_f2b6f972_scoped_true___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,
+  false,
+  null,
+  "f2b6f972",
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/RecoveryCodesModal.vue"
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/Tool.vue":
+/*!******************************************!*\
+  !*** ./resources/js/components/Tool.vue ***!
+  \******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _Tool_vue_vue_type_template_id_68ff5483___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Tool.vue?vue&type=template&id=68ff5483& */ "./resources/js/components/Tool.vue?vue&type=template&id=68ff5483&");
+/* harmony import */ var _Tool_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Tool.vue?vue&type=script&lang=js& */ "./resources/js/components/Tool.vue?vue&type=script&lang=js&");
+/* harmony import */ var _Tool_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Tool.vue?vue&type=style&index=0&lang=css& */ "./resources/js/components/Tool.vue?vue&type=style&index=0&lang=css&");
+/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
+
+
+
+;
+
+
+/* normalize component */
+
+var component = (0,_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_3__["default"])(
+  _Tool_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
+  _Tool_vue_vue_type_template_id_68ff5483___WEBPACK_IMPORTED_MODULE_0__.render,
+  _Tool_vue_vue_type_template_id_68ff5483___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* hot reload */
+if (false) { var api; }
+component.options.__file = "resources/js/components/Tool.vue"
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);
+
+/***/ }),
+
+/***/ "./resources/js/components/RecoveryCodesModal.vue?vue&type=script&lang=js&":
+/*!*********************************************************************************!*\
+  !*** ./resources/js/components/RecoveryCodesModal.vue?vue&type=script&lang=js& ***!
+  \*********************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_0_rules_0_use_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RecoveryCodesModal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RecoveryCodesModal.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/RecoveryCodesModal.vue?vue&type=script&lang=js&");
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_babel_loader_lib_index_js_clonedRuleSet_5_0_rules_0_use_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RecoveryCodesModal_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/Tool.vue?vue&type=script&lang=js&":
+/*!*******************************************************************!*\
+  !*** ./resources/js/components/Tool.vue?vue&type=script&lang=js& ***!
+  \*******************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_0_rules_0_use_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Tool_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Tool.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=script&lang=js&");
+ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_babel_loader_lib_index_js_clonedRuleSet_5_0_rules_0_use_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Tool_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
+
+/***/ }),
+
+/***/ "./resources/js/components/Tool.vue?vue&type=style&index=0&lang=css&":
+/*!***************************************************************************!*\
+  !*** ./resources/js/components/Tool.vue?vue&type=style&index=0&lang=css& ***!
+  \***************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _node_modules_style_loader_dist_cjs_js_node_modules_css_loader_dist_cjs_js_clonedRuleSet_9_0_rules_0_use_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_dist_cjs_js_clonedRuleSet_9_0_rules_0_use_2_node_modules_vue_loader_lib_index_js_vue_loader_options_Tool_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/style-loader/dist/cjs.js!../../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[1]!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[2]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Tool.vue?vue&type=style&index=0&lang=css& */ "./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9[0].rules[0].use[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=style&index=0&lang=css&");
+
+
+/***/ }),
+
+/***/ "./resources/js/components/RecoveryCodesModal.vue?vue&type=template&id=f2b6f972&scoped=true&":
+/*!***************************************************************************************************!*\
+  !*** ./resources/js/components/RecoveryCodesModal.vue?vue&type=template&id=f2b6f972&scoped=true& ***!
+  \***************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_RecoveryCodesModal_vue_vue_type_template_id_f2b6f972_scoped_true___WEBPACK_IMPORTED_MODULE_0__.render),
+/* harmony export */   "staticRenderFns": () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_RecoveryCodesModal_vue_vue_type_template_id_f2b6f972_scoped_true___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)
+/* harmony export */ });
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_RecoveryCodesModal_vue_vue_type_template_id_f2b6f972_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./RecoveryCodesModal.vue?vue&type=template&id=f2b6f972&scoped=true& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/RecoveryCodesModal.vue?vue&type=template&id=f2b6f972&scoped=true&");
+
+
+/***/ }),
+
+/***/ "./resources/js/components/Tool.vue?vue&type=template&id=68ff5483&":
+/*!*************************************************************************!*\
+  !*** ./resources/js/components/Tool.vue?vue&type=template&id=68ff5483& ***!
+  \*************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Tool_vue_vue_type_template_id_68ff5483___WEBPACK_IMPORTED_MODULE_0__.render),
+/* harmony export */   "staticRenderFns": () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Tool_vue_vue_type_template_id_68ff5483___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)
+/* harmony export */ });
+/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Tool_vue_vue_type_template_id_68ff5483___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Tool.vue?vue&type=template&id=68ff5483& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=template&id=68ff5483&");
+
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/RecoveryCodesModal.vue?vue&type=template&id=f2b6f972&scoped=true&":
+/*!******************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/RecoveryCodesModal.vue?vue&type=template&id=f2b6f972&scoped=true& ***!
+  \******************************************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render),
+/* harmony export */   "staticRenderFns": () => (/* binding */ staticRenderFns)
+/* harmony export */ });
+var render = function () {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "modal",
+    { attrs: { role: "dialog" }, on: { "modal-close": _vm.handleClose } },
+    [
+      _c(
+        "div",
+        { staticClass: "bg-white max-w-md mx-auto my-10 rounded shadow z-10" },
+        [
+          _c("div", { staticClass: "p-8" }, [
+            _c(
+              "h2",
+              { staticClass: "text-2xl font-semibold text-gray-900 mb-6" },
+              [_vm._v("View Recovery Codes")]
+            ),
+            _vm._v(" "),
+            _vm.codes
+              ? _c("div", [
+                  _c("p", { staticClass: "mb-6" }, [
+                    _vm._v("Here are your recovery codes, keep them safe:"),
+                  ]),
+                  _vm._v(" "),
+                  _c("textarea", {
+                    ref: "codes",
+                    staticClass:
+                      "mb-6 text-white bg-90 border border-gray-100 rounded p-4 text-center",
+                    attrs: { disabled: true, rows: "8", cols: "30" },
+                    domProps: { textContent: _vm._s(_vm.codesText) },
+                  }),
+                  _vm._v(" "),
+                  _c("div", { staticClass: "text-center" }, [
+                    _c(
+                      "button",
+                      {
+                        staticClass: "btn btn-default btn-primary",
+                        attrs: { type: "button" },
+                        on: {
+                          click: function ($event) {
+                            $event.preventDefault()
+                            return _vm.hideCodes.apply(null, arguments)
+                          },
+                        },
+                      },
+                      [_vm._v("I'm done. Hide them.")]
+                    ),
+                  ]),
+                ])
+              : _c("div", [
+                  _c("p", { staticClass: "mb-6" }, [
+                    _vm._v(
+                      "To view your recovery codes, we need you to confirm your password."
+                    ),
+                  ]),
+                  _vm._v(" "),
+                  _c(
+                    "form",
+                    {
+                      on: {
+                        submit: function ($event) {
+                          $event.preventDefault()
+                          return _vm.handleSubmit.apply(null, arguments)
+                        },
+                      },
+                    },
+                    [
+                      _c("div", { staticClass: "mb-6" }, [
+                        _c("div", [
+                          _c(
+                            "label",
+                            {
+                              staticClass: "block font-bold mb-2",
+                              attrs: { for: "password" },
+                            },
+                            [_vm._v("Password")]
+                          ),
+                          _vm._v(" "),
+                          _c("input", {
+                            directives: [
+                              {
+                                name: "model",
+                                rawName: "v-model",
+                                value: _vm.password,
+                                expression: "password",
+                              },
+                            ],
+                            ref: "passwordInput",
+                            staticClass:
+                              "w-full form-control form-input form-input-bordered",
+                            class: {
+                              "border-danger": Boolean(_vm.errors.password),
+                            },
+                            attrs: {
+                              id: "password",
+                              type: "password",
+                              placeholder: _vm.__("Enter your password..."),
+                              autofocus: "",
+                            },
+                            domProps: { value: _vm.password },
+                            on: {
+                              input: function ($event) {
+                                if ($event.target.composing) {
+                                  return
+                                }
+                                _vm.password = $event.target.value
+                              },
+                            },
+                          }),
+                          _vm._v(" "),
+                          _vm.errors.password
+                            ? _c("p", { staticClass: "mt-2 text-danger" }, [
+                                _vm._v(_vm._s(_vm.errors.password[0])),
+                              ])
+                            : _vm._e(),
+                        ]),
+                      ]),
+                      _vm._v(" "),
+                      _c("div", { staticClass: "text-center" }, [
+                        _c(
+                          "button",
+                          {
+                            staticClass: "btn btn-default btn-primary",
+                            attrs: { disabled: _vm.confirming, type: "submit" },
+                          },
+                          [_vm._v("Confirm & View Codes")]
+                        ),
+                      ]),
+                    ]
+                  ),
+                ]),
+          ]),
+        ]
+      ),
+    ]
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=template&id=68ff5483&":
+/*!****************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tool.vue?vue&type=template&id=68ff5483& ***!
+  \****************************************************************************************************************************************************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "render": () => (/* binding */ render),
+/* harmony export */   "staticRenderFns": () => (/* binding */ staticRenderFns)
+/* harmony export */ });
+var render = function () {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "div",
+    [
+      _c("heading", { staticClass: "mb-6" }, [_vm._v("Nova Two Factor")]),
+      _vm._v(" "),
+      _c(
+        "card",
+        {
+          staticClass:
+            "bg-white flex flex-col items-center justify-center px-2",
+          staticStyle: { "min-height": "300px" },
+        },
+        [
+          _c(
+            "h1",
+            { staticClass: "text-gray-900 text-4xl text-90 font-light mb-6" },
+            [_vm._v("\n            Recovery Codes\n        ")]
+          ),
+          _vm._v(" "),
+          _c("p", { staticClass: "text-gray-800 text-lg mb-6" }, [
+            _vm._v(
+              "\n            Every time you use a recovery code, that one gets removed from your list of recovery codes and a new one is generated to take its place.\n        "
+            ),
+          ]),
+          _vm._v(" "),
+          _c(
+            "button",
+            {
+              staticClass: "btn btn-default btn-primary",
+              on: {
+                click: function ($event) {
+                  $event.preventDefault()
+                  return _vm.openModal.apply(null, arguments)
+                },
+              },
+            },
+            [_vm._v("View Recovery Codes")]
+          ),
+        ]
+      ),
+      _vm._v(" "),
+      _c(
+        "portal",
+        { attrs: { to: "modals" } },
+        [
+          _c(
+            "transition",
+            { attrs: { name: "fade" } },
+            [
+              _vm.showRecoveryCodesModal
+                ? _c("recovery-codes-modal", {
+                    on: { confirm: _vm.confirmModal, close: _vm.closeModal },
+                  })
+                : _vm._e(),
+            ],
+            1
+          ),
+        ],
+        1
+      ),
+    ],
+    1
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+
+
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js":
+/*!********************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/runtime/componentNormalizer.js ***!
+  \********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ normalizeComponent)
+/* harmony export */ });
+/* globals __VUE_SSR_CONTEXT__ */
+
+// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
+// This module is a runtime utility for cleaner component module output and will
+// be included in the final webpack user bundle.
+
+function normalizeComponent (
+  scriptExports,
+  render,
+  staticRenderFns,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier, /* server only */
+  shadowMode /* vue-cli only */
+) {
+  // Vue.extend constructor export interop
+  var options = typeof scriptExports === 'function'
+    ? scriptExports.options
+    : scriptExports
+
+  // render functions
+  if (render) {
+    options.render = render
+    options.staticRenderFns = staticRenderFns
+    options._compiled = true
+  }
+
+  // functional template
+  if (functionalTemplate) {
+    options.functional = true
+  }
+
+  // scopedId
+  if (scopeId) {
+    options._scopeId = 'data-v-' + scopeId
+  }
+
+  var hook
+  if (moduleIdentifier) { // server build
+    hook = function (context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      // inject component styles
+      if (injectStyles) {
+        injectStyles.call(this, context)
+      }
+      // register component module identifier for async chunk inferrence
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier)
+      }
+    }
+    // used by ssr in case component is cached and beforeCreate
+    // never gets called
+    options._ssrRegister = hook
+  } else if (injectStyles) {
+    hook = shadowMode
+      ? function () {
+        injectStyles.call(
+          this,
+          (options.functional ? this.parent : this).$root.$options.shadowRoot
+        )
+      }
+      : injectStyles
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // for template-only hot-reload because in that case the render fn doesn't
+      // go through the normalizer
+      options._injectStyles = hook
+      // register for functional component in vue file
+      var originalRender = options.render
+      options.render = function renderWithStyleInjection (h, context) {
+        hook.call(context)
+        return originalRender(h, context)
+      }
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate
+      options.beforeCreate = existing
+        ? [].concat(existing, hook)
+        : [hook]
+    }
+  }
+
+  return {
+    exports: scriptExports,
+    options: options
+  }
+}
+
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			id: moduleId,
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = __webpack_modules__;
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/chunk loaded */
+/******/ 	(() => {
+/******/ 		var deferred = [];
+/******/ 		__webpack_require__.O = (result, chunkIds, fn, priority) => {
+/******/ 			if(chunkIds) {
+/******/ 				priority = priority || 0;
+/******/ 				for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ 				deferred[i] = [chunkIds, fn, priority];
+/******/ 				return;
+/******/ 			}
+/******/ 			var notFulfilled = Infinity;
+/******/ 			for (var i = 0; i < deferred.length; i++) {
+/******/ 				var [chunkIds, fn, priority] = deferred[i];
+/******/ 				var fulfilled = true;
+/******/ 				for (var j = 0; j < chunkIds.length; j++) {
+/******/ 					if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
+/******/ 						chunkIds.splice(j--, 1);
+/******/ 					} else {
+/******/ 						fulfilled = false;
+/******/ 						if(priority < notFulfilled) notFulfilled = priority;
+/******/ 					}
+/******/ 				}
+/******/ 				if(fulfilled) {
+/******/ 					deferred.splice(i--, 1)
+/******/ 					var r = fn();
+/******/ 					if (r !== undefined) result = r;
+/******/ 				}
+/******/ 			}
+/******/ 			return result;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/jsonp chunk loading */
+/******/ 	(() => {
+/******/ 		// no baseURI
+/******/ 		
+/******/ 		// object to store loaded and loading chunks
+/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
+/******/ 		var installedChunks = {
+/******/ 			"/js/tool": 0,
+/******/ 			"css/tool": 0
+/******/ 		};
+/******/ 		
+/******/ 		// no chunk on demand loading
+/******/ 		
+/******/ 		// no prefetching
+/******/ 		
+/******/ 		// no preloaded
+/******/ 		
+/******/ 		// no HMR
+/******/ 		
+/******/ 		// no HMR manifest
+/******/ 		
+/******/ 		__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/ 		
+/******/ 		// install a JSONP callback for chunk loading
+/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
+/******/ 			var [chunkIds, moreModules, runtime] = data;
+/******/ 			// add "moreModules" to the modules object,
+/******/ 			// then flag all "chunkIds" as loaded and fire callback
+/******/ 			var moduleId, chunkId, i = 0;
+/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
+/******/ 				for(moduleId in moreModules) {
+/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 					}
+/******/ 				}
+/******/ 				if(runtime) var result = runtime(__webpack_require__);
+/******/ 			}
+/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
+/******/ 			for(;i < chunkIds.length; i++) {
+/******/ 				chunkId = chunkIds[i];
+/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 					installedChunks[chunkId][0]();
+/******/ 				}
+/******/ 				installedChunks[chunkId] = 0;
+/******/ 			}
+/******/ 			return __webpack_require__.O(result);
+/******/ 		}
+/******/ 		
+/******/ 		var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
+/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
+/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
+/******/ 	__webpack_require__.O(undefined, ["css/tool"], () => (__webpack_require__("./resources/js/tool.js")))
+/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["css/tool"], () => (__webpack_require__("./resources/sass/tool.scss")))
+/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
+/******/ 	
+/******/ })()
+;
\ No newline at end of file
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
new file mode 100644
index 0000000..4eb9813
--- /dev/null
+++ b/dist/mix-manifest.json
@@ -0,0 +1,4 @@
+{
+    "/js/tool.js": "/js/tool.js",
+    "/css/tool.css": "/css/tool.css"
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..b64c94b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
+        "prod": "npm run production",
+        "production": "mix --production"
+    },
+    "devDependencies": {
+        "cross-env": "^7.0",
+        "laravel-mix": "^6.0.41",
+        "resolve-url-loader": "^5.0.0",
+        "sass": "^1.49.0",
+        "sass-loader": "^12.4.0",
+        "vue-loader": "^15.9.8"
+    },
+    "dependencies": {
+        "vue": "^2.5.0",
+        "vue-template-compiler": "^2.6.14"
+    }
+}
diff --git a/resources/js/components/RecoveryCodesModal.vue b/resources/js/components/RecoveryCodesModal.vue
new file mode 100644
index 0000000..9ac5339
--- /dev/null
+++ b/resources/js/components/RecoveryCodesModal.vue
@@ -0,0 +1,86 @@
+<template>
+    <modal
+        role="dialog"
+        @modal-close="handleClose"
+    >
+        <div class="bg-white max-w-md mx-auto my-10 rounded shadow z-10">
+            <div class="p-8">
+                <h2 class="text-2xl font-semibold text-gray-900 mb-6">View Recovery Codes</h2>
+
+                <div v-if="codes">
+                    <p class="mb-6">Here are your recovery codes, keep them safe:</p>
+
+                    <textarea :disabled="true" rows="8" cols="30" v-text="codesText" ref="codes" class="mb-6 text-white bg-90 border border-gray-100 rounded p-4 text-center"></textarea>
+
+                    <div class="text-center"><button type="button" @click.prevent="hideCodes" class="btn btn-default btn-primary">I'm done. Hide them.</button></div>
+                </div>
+
+                <div v-else>
+                    <p class="mb-6">To view your recovery codes, we need you to confirm your password.</p>
+                    <form @submit.prevent="handleSubmit">
+                        <div class="mb-6">
+                            <div>
+                                <label class="block font-bold mb-2" for="password">Password</label>
+                                <input ref="passwordInput" class="w-full form-control form-input form-input-bordered" :class="{'border-danger': Boolean(errors.password)}" id="password" type="password"
+                                     v-model="password" :placeholder="__('Enter your password...')" autofocus="">
+                                <p class="mt-2 text-danger" v-if="errors.password">{{ errors.password[0] }}</p>
+                            </div>
+                        </div>
+                        <div class="text-center"><button :disabled="confirming" type="submit" class="btn btn-default btn-primary">Confirm & View Codes</button></div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </modal>
+</template>
+
+<script>
+    export default {
+        name: "RecoveryCodesModal",
+        data() {
+            return {
+                codes: null,
+                confirming: false,
+                password: '',
+                errors: {},
+            }
+        },
+        methods: {
+            handleClose() {
+                this.$emit('close')
+            },
+            handleConfirm() {
+                this.$emit('confirm')
+            },
+            handleSubmit() {
+                this.confirming = true
+                this.errors = {}
+
+                Nova.request().post('/los/2fa/unlocked-recovery-codes', {
+                    password: this.password,
+                }).then(({ data }) => {
+                    this.codes = data.recovery_codes
+                }).catch(({ response }) => {
+                    this.errors = response.data.errors
+                }).finally(() => {
+                    this.confirming = false
+                })
+            },
+            hideCodes() {
+                this.codes = null
+                this.handleClose()
+            },
+        },
+        computed: {
+            codesText() {
+                return this.codes.join("\n")
+            },
+        },
+        mounted() {
+            this.$refs.passwordInput.focus()
+        },
+    }
+</script>
+
+<style scoped>
+</style>
diff --git a/resources/js/components/Tool.vue b/resources/js/components/Tool.vue
new file mode 100644
index 0000000..fde2224
--- /dev/null
+++ b/resources/js/components/Tool.vue
@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <heading class="mb-6">Nova Two Factor</heading>
+
+        <card
+            class="bg-white flex flex-col items-center justify-center px-2"
+            style="min-height: 300px"
+        >
+            <h1 class="text-gray-900 text-4xl text-90 font-light mb-6">
+                Recovery Codes
+            </h1>
+
+            <p class="text-gray-800 text-lg mb-6">
+                Every time you use a recovery code, that one gets removed from your list of recovery codes and a new one is generated to take its place.
+            </p>
+
+            <button @click.prevent="openModal" class="btn btn-default btn-primary">View Recovery Codes</button>
+        </card>
+
+        <portal to="modals">
+            <transition name="fade">
+                <recovery-codes-modal
+                    v-if="showRecoveryCodesModal"
+                    @confirm="confirmModal"
+                    @close="closeModal"
+                />
+            </transition>
+        </portal>
+    </div>
+</template>
+
+<script>
+import RecoveryCodesModal from './RecoveryCodesModal.vue'
+
+export default {
+    components: {
+        RecoveryCodesModal,
+    },
+    metaInfo() {
+        return {
+          title: 'Nova Two Factor',
+        }
+    },
+    data() {
+        return {
+            showRecoveryCodesModal: false,
+        }
+    },
+    mounted() {
+        //
+    },
+    methods: {
+        openModal() {
+            this.showRecoveryCodesModal = true;
+        },
+        closeModal() {
+            this.showRecoveryCodesModal = false;
+        },
+        confirmModal() {
+            this.closeModal();
+        },
+    },
+}
+</script>
+
+<style>
+/* Scoped Styles */
+</style>
diff --git a/resources/js/tool.js b/resources/js/tool.js
new file mode 100644
index 0000000..48aeb70
--- /dev/null
+++ b/resources/js/tool.js
@@ -0,0 +1,9 @@
+Nova.booting((Vue, router, store) => {
+  router.addRoutes([
+    {
+      name: '2fa-recovery-codes',
+      path: '/recovery-codes',
+      component: require('./components/Tool.vue').default,
+    },
+  ])
+})
diff --git a/resources/sass/tool.scss b/resources/sass/tool.scss
new file mode 100644
index 0000000..f85ad40
--- /dev/null
+++ b/resources/sass/tool.scss
@@ -0,0 +1 @@
+// Nova Tool CSS
diff --git a/resources/views/authenticate.blade.php b/resources/views/authenticate.blade.php
index b93f525..38b2493 100644
--- a/resources/views/authenticate.blade.php
+++ b/resources/views/authenticate.blade.php
@@ -10,24 +10,32 @@
     <!-- Styles -->
     <link rel="stylesheet" href="{{ mix('app.css', 'vendor/nova') }}">
 
-    <style>
-        body {
-            font-family: "Montserrat", sans-serif !important;
-        }
-
-        .btn,
-        .form-input,
-        .rounded-lg {
-            border-radius: 0 !important;
-        }
-    </style>
     <script>
-        function checkAutoSubmit(el) {
+        window.checkAutoSubmit = function checkAutoSubmit(el) {
             if (el.value.length === 6) {
                 document.getElementById('authenticate_form').submit();
             }
         }
 
+        window.showRecoveryInput = function showRecoveryInput(el) {
+            document.getElementById('secret_div').style.display = 'none';
+            if (document.getElementById('error_text')) {
+                document.getElementById('error_text').style.display = 'none';
+            }
+            document.getElementById('recover_div').style.display = null;
+            document.getElementById('cancel-recover-button').style.display = null;
+            el.style.display = 'none';
+        };
+
+        window.cancelRecoveryInput = function cancelRecoveryInput(el) {
+            document.getElementById('secret_div').style.display = null;
+            if (document.getElementById('error_text')) {
+                document.getElementById('error_text').style.display = null;
+            }
+            document.getElementById('recover_div').style.display = 'none';
+            document.getElementById('recover-button').style.display = null;
+            el.style.display = 'none';
+        };
     </script>
 </head>
 <body class="bg-40 text-black h-full">
@@ -48,38 +56,55 @@ function checkAutoSubmit(el) {
                 Two factor authentication protects against phishing, social engineering and password brute force attacks
                 and secures your logins from attackers
                 exploiting weak or stolen credentials.</p>
-            <p class="p-2"><strong>Enter the pin from Google Authenticator Enable 2FA</strong></p>
+            <p class="p-2"><strong>Enter the pin from your Authenticator app</strong></p>
 
             <div class="text-center pt-3">
                 <div class="mb-6 w-1/2" style="display:inline-block">
                     @if (isset($error))
                         <p id="error_text" class="text-center font-semibold text-danger my-3">
                             {{  $error }}
-                            <button
-                                    onclick="
-                                        document.getElementById('secret_div').style.display = 'none';
-                                        document.getElementById('error_text').style.display = 'none';
-                                        document.getElementById('recover_div').style.display = 'block';
-                                    "
-                                    class="w-1/4 btn btn-default btn-primary hover:bg-primary-dark" type="button">
-                                Recover
-                            </button>
                         </p>
                     @endif
+
                     <div id="secret_div">
                         <label class="block font-bold mb-2" for="co">One Time Password</label>
-                        <input class="form-control form-input form-input-bordered w-full" id="secret" type="number"
-                               name="secret" value="" onkeyup="checkAutoSubmit(this)" autofocus="">
+                        <input class="w-full form-control form-input form-input-bordered" id="secret" type="number"
+                               name="{{ config('google2fa.otp_input') }}" value="" onkeyup="checkAutoSubmit(this)" placeholder="{{ __('Enter the code...') }}" autofocus="">
                     </div>
+
                     <div id="recover_div" style="display: none;">
                         <label class="block font-bold mb-2" for="co">Recovery code</label>
-                        <input class="form-control form-input form-input-bordered w-full" id="recover" type="text"
+                        <input class="w-full form-control form-input form-input-bordered" placeholder="{{ __('Enter the recovery code...') }}" id="recover" type="text"
                                name="recover" value="" autofocus="">
                     </div>
                 </div>
-                <button class="w-1/2 btn btn-default btn-primary hover:bg-primary-dark" type="submit">
+                <button class="mb-6 w-1/2 btn btn-default btn-primary hover:bg-primary-dark" type="submit">
                     Authenticate
                 </button>
+                <div>
+                    <button
+                        id="recover-button"
+                        onclick="
+                            showRecoveryInput(this);
+                            return false;
+                        "
+                        class="font-bold no-underline text-primary dim"
+                    >
+                        Recover
+                    </button>
+
+                    <button
+                        style="display: none;"
+                        id="cancel-recover-button"
+                        onclick="
+                            cancelRecoveryInput(this);
+                            return false;
+                        "
+                        class="font-bold no-underline text-primary dim"
+                    >
+                        Cancel Recover
+                    </button>
+                </div>
             </div>
         </form>
     </div>
diff --git a/resources/views/navigation.blade.php b/resources/views/navigation.blade.php
new file mode 100644
index 0000000..2fdca84
--- /dev/null
+++ b/resources/views/navigation.blade.php
@@ -0,0 +1,6 @@
+<router-link tag="h3" :to="{name: '2fa-recovery-codes'}" class="cursor-pointer flex items-center font-normal dim text-white mb-6 text-base no-underline">
+    <svg class="sidebar-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
+    <span class="sidebar-label">
+        Recovery Codes
+    </span>
+</router-link>
diff --git a/resources/views/recovery.blade.php b/resources/views/recovery.blade.php
index 40f9e33..f1d54dd 100644
--- a/resources/views/recovery.blade.php
+++ b/resources/views/recovery.blade.php
@@ -9,25 +9,6 @@
 
     <!-- Styles -->
     <link rel="stylesheet" href="{{ mix('app.css', 'vendor/nova') }}">
-
-    <style>
-        body {
-            font-family: "Montserrat", sans-serif !important;
-        }
-
-        .btn,
-        .form-input,
-        .rounded-lg {
-            border-radius: 0 !important;
-        }
-        @media print
-        {
-            .no-print, .no-print *
-            {
-                display: none !important;
-            }
-        }
-    </style>
 </head>
 <body class="bg-40 text-black h-full">
 <div class="h-full">
diff --git a/resources/views/register.blade.php b/resources/views/register.blade.php
index 6b7ba8a..0200970 100644
--- a/resources/views/register.blade.php
+++ b/resources/views/register.blade.php
@@ -10,17 +10,6 @@
     <!-- Styles -->
     <link rel="stylesheet" href="{{ mix('app.css', 'vendor/nova') }}">
 
-    <style>
-        body {
-            font-family: "Montserrat", sans-serif !important;
-        }
-
-        .btn,
-        .form-input,
-        .rounded-lg {
-            border-radius: 0 !important;
-        }
-    </style>
     <script>
         function checkAutoSubmit(el) {
             if (el.value.length === 6) {
@@ -65,7 +54,7 @@ function checkAutoSubmit(el) {
                     @endif
                     <label class="block font-bold mb-2" for="co">Secret</label>
                     <input class="form-control form-input form-input-bordered w-full" id="secret" type="number"
-                           name="secret" value="" required="required" onkeyup="checkAutoSubmit(this)" autofocus="">
+                           name="{{ config('google2fa.otp_input') }}" value="" required="required" onkeyup="checkAutoSubmit(this)" autofocus="">
                 </div>
                 <button class="w-1/2 btn btn-default btn-primary hover:bg-primary-dark" type="submit">
                     Confirm
diff --git a/routes/api.php b/routes/api.php
index 45f2626..11b99f5 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -15,4 +15,6 @@
 /**
  * This route is called to verify users secret
  */
-Route::post('authenticate', 'Lifeonscreen\Google2fa\Google2fa@authenticate');
\ No newline at end of file
+Route::post('authenticate', 'Lifeonscreen\Google2fa\Google2fa@authenticate');
+
+Route::post('unlocked-recovery-codes', 'Lifeonscreen\Google2fa\Http\Controllers\UnlockedRecoveryCodesController@store');
diff --git a/src/Google2FAAuthenticator.php b/src/Google2FAAuthenticator.php
index 652ad0d..957e5ce 100644
--- a/src/Google2FAAuthenticator.php
+++ b/src/Google2FAAuthenticator.php
@@ -32,4 +32,4 @@ protected function getGoogle2FASecretKey()
 
         return $secret;
     }
-}
\ No newline at end of file
+}
diff --git a/src/Google2fa.php b/src/Google2fa.php
index f2b6ba2..4e7acfb 100644
--- a/src/Google2fa.php
+++ b/src/Google2fa.php
@@ -3,9 +3,10 @@
 namespace Lifeonscreen\Google2fa;
 
 use Laravel\Nova\Tool;
-use PragmaRX\Google2FA\Google2FA as G2fa;
+use PragmaRX\Google2FALaravel\Google2FA as Google2FALaravelGoogle2FA;
+use PragmaRX\Google2FAQRCode\Google2FA as G2fa;
 use PragmaRX\Recovery\Recovery;
-use Request;
+use Illuminate\Support\Facades\Request;
 
 class Google2fa extends Tool
 {
@@ -32,9 +33,8 @@ public function confirm()
         }
 
         $google2fa = new G2fa();
-        $google2fa->setAllowInsecureCallToGoogleApis(true);
 
-        $google2fa_url = $google2fa->getQRCodeGoogleUrl(
+        $google2fa_url = $google2fa->getQRCodeInline(
             config('app.name'),
             auth()->user()->email,
             auth()->user()->user2fa->google2fa_secret
@@ -53,9 +53,8 @@ public function confirm()
     public function register()
     {
         $google2fa = new G2fa();
-        $google2fa->setAllowInsecureCallToGoogleApis(true);
 
-        $google2fa_url = $google2fa->getQRCodeGoogleUrl(
+        $google2fa_url = $google2fa->getQRCodeInline(
             config('app.name'),
             auth()->user()->email,
             auth()->user()->user2fa->google2fa_secret
@@ -69,13 +68,7 @@ public function register()
 
     private function isRecoveryValid($recover, $recoveryHashes)
     {
-        foreach ($recoveryHashes as $recoveryHash) {
-            if (password_verify($recover, $recoveryHash)) {
-                return true;
-            }
-        }
-
-        return false;
+        return in_array($recover, $recoveryHashes);
     }
 
     /**
@@ -84,36 +77,35 @@ private function isRecoveryValid($recover, $recoveryHashes)
     public function authenticate()
     {
         if ($recover = Request::get('recover')) {
-            if ($this->isRecoveryValid($recover, json_decode(auth()->user()->user2fa->recovery, true)) === false) {
+            if ($this->isRecoveryValid($recover, json_decode(decrypt(auth()->user()->user2fa->recovery), true)) === false) {
                 $data['error'] = 'Recovery key is invalid.';
 
                 return view('google2fa::authenticate', $data);
             }
 
-            $google2fa = new G2fa();
-            $recovery = new Recovery();
-            $secretKey = $google2fa->generateSecretKey();
-            $data['recovery'] = $recovery
-                ->setCount(config('lifeonscreen2fa.recovery_codes.count'))
+            // When the user uses a recovery code, we're going to replace that single code with
+            // a new one. There's no need to reconfigure the Authenticator app.
+
+            $newCode = (new Recovery())
+                ->setCount(1)
                 ->setBlocks(config('lifeonscreen2fa.recovery_codes.blocks'))
                 ->setChars(config('lifeonscreen2fa.recovery_codes.chars_in_block'))
-                ->toArray();
+                ->toArray()[0];
 
-            $recoveryHashes = $data['recovery'];
-            array_walk($recoveryHashes, function (&$value) {
-                $value = password_hash($value, config('lifeonscreen2fa.recovery_codes.hashing_algorithm'));
-            });
+            auth()->user()->user2fa->forceFill([
+                'recovery' => encrypt(str_replace(
+                    $recover,
+                    $newCode,
+                    decrypt(auth()->user()->user2fa->recovery)
+                )),
+            ])->save();
 
-            $user2faModel = config('lifeonscreen2fa.models.user2fa');
+            // If the user has authenticated with a recovery code,
+            // we can go ahead and authorize their session.
 
-            $user2faModel::where('user_id', auth()->user()->id)->delete();
-            $user2fa = new $user2faModel();
-            $user2fa->user_id = auth()->user()->id;
-            $user2fa->google2fa_secret = $secretKey;
-            $user2fa->recovery = json_encode($recoveryHashes);
-            $user2fa->save();
+            (new Google2FALaravelGoogle2FA(Request::instance()))->login();
 
-            return response(view('google2fa::recovery', $data));
+            return response()->redirectTo(config('nova.path'));
         }
 
         if (app(Google2FAAuthenticator::class)->isAuthenticated()) {
diff --git a/src/Http/Controllers/UnlockedRecoveryCodesController.php b/src/Http/Controllers/UnlockedRecoveryCodesController.php
new file mode 100644
index 0000000..287a041
--- /dev/null
+++ b/src/Http/Controllers/UnlockedRecoveryCodesController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace Lifeonscreen\Google2fa\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\ValidationException;
+
+class UnlockedRecoveryCodesController extends Controller
+{
+    public function store(Request $request)
+    {
+        $request->validate([
+            'password' => ['required', 'string'],
+        ]);
+
+        if (! Hash::check($request->input('password'), $request->user()->password)) {
+            throw ValidationException::withMessages([
+                'password' => ['Invalid Password.'],
+            ]);
+        }
+
+        return [
+            'success' => true,
+            'recovery_codes' => json_decode(decrypt($request->user()->user2fa->recovery), true),
+        ];
+    }
+}
diff --git a/src/Http/Middleware/Google2fa.php b/src/Http/Middleware/Google2fa.php
index 605f42a..bd586c5 100644
--- a/src/Http/Middleware/Google2fa.php
+++ b/src/Http/Middleware/Google2fa.php
@@ -51,7 +51,7 @@ public function handle($request, Closure $next)
             $user2fa = new $user2faModel();
             $user2fa->user_id = auth()->user()->id;
             $user2fa->google2fa_secret = $secretKey;
-            $user2fa->recovery = json_encode($data['recovery']);
+            $user2fa->recovery = encrypt(json_encode($data['recovery']));
             $user2fa->save();
 
             return response(view('google2fa::recovery', $data));
@@ -59,4 +59,4 @@ public function handle($request, Closure $next)
 
         return response(view('google2fa::authenticate'));
     }
-}
\ No newline at end of file
+}
diff --git a/src/RecoveryCodes.php b/src/RecoveryCodes.php
new file mode 100644
index 0000000..da8847c
--- /dev/null
+++ b/src/RecoveryCodes.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Lifeonscreen\Google2fa;
+
+use Laravel\Nova\Nova;
+use Laravel\Nova\Tool;
+
+class RecoveryCodes extends Tool
+{
+    /**
+     * Perform any tasks that need to happen when the tool is booted.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        Nova::script('google2fa', __DIR__.'/../dist/js/tool.js');
+        Nova::style('google2fa', __DIR__.'/../dist/css/tool.css');
+    }
+
+    /**
+     * Build the view that renders the navigation links for the tool.
+     *
+     * @return \Illuminate\View\View
+     */
+    public function renderNavigation()
+    {
+        return view('google2fa::navigation');
+    }
+}
diff --git a/webpack.mix.js b/webpack.mix.js
new file mode 100644
index 0000000..285438a
--- /dev/null
+++ b/webpack.mix.js
@@ -0,0 +1,7 @@
+let mix = require('laravel-mix')
+
+mix
+  .setPublicPath('dist')
+  .js('resources/js/tool.js', 'js')
+  .vue({ version: 2})
+  .sass('resources/sass/tool.scss', 'css')