diff --git a/.eslintrc b/.eslintrc
index b6a3abf2..8eee0d1b 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,22 +1,3 @@
 {
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:react/recommended",
-    "plugin:import/recommended",
-    "plugin:import/typescript",
-    "plugin:prettier/recommended"
-  ],
-  "rules": {
-    "@typescript-eslint/consistent-type-imports": "error"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
+  "extends": ["@verypossible/eslint-config/react"]
 }
diff --git a/README.md b/README.md
index ac27b250..aa6d233a 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Meshtastic.js
+# Meshtastic Web
 
 [![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/meshtastic/meshtastic-web)
 
diff --git a/package.json b/package.json
index 62231119..727a9b0c 100644
--- a/package.json
+++ b/package.json
@@ -11,14 +11,10 @@
     "lint": "eslint 'src/**/*.{ts,tsx}'"
   },
   "dependencies": {
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@headlessui/react": "^1.3.0",
+    "@headlessui/react": "^1.4.0",
     "@heroicons/react": "^1.0.1",
-    "@material-ui/core": "^5.0.0-beta.3",
     "@meshtastic/meshtasticjs": "^0.6.16",
     "@reduxjs/toolkit": "^1.6.0",
-    "add": "^2.0.6",
     "boring-avatars": "^1.5.8",
     "i18next": "^20.3.5",
     "i18next-browser-languagedetector": "^6.1.2",
@@ -28,8 +24,8 @@
     "react-hook-form": "^7.9.0",
     "react-i18next": "^11.11.4",
     "react-redux": "^7.2.4",
-    "react-select": "^5.0.0-beta.0",
     "type-route": "^0.6.0",
+    "use-breakpoint": "^2.0.1",
     "yarn": "^1.22.11"
   },
   "devDependencies": {
@@ -37,23 +33,24 @@
     "@snowpack/plugin-postcss": "^1.4.3",
     "@snowpack/plugin-react-refresh": "^2.5.0",
     "@snowpack/plugin-typescript": "^1.2.0",
-    "@types/eslint": "^7.2.13",
     "@types/react": "^17.0.13",
     "@types/react-dom": "^17.0.8",
     "@types/react-redux": "^7.1.16",
     "@types/snowpack-env": "^2.3.3",
-    "@typescript-eslint/eslint-plugin": "^4.28.1",
-    "@typescript-eslint/parser": "^4.28.1",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
+    "@verypossible/eslint-config": "^1.6.0",
     "autoprefixer": "^10.2.6",
-    "eslint": "^7.29.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "gzipper": "^5.0.0",
     "postcss": "^8.3.5",
-    "postcss-cli": "^8.3.1",
     "prettier": "^2.3.2",
     "snowpack": "^3.7.1",
     "tailwindcss": "^2.2.4",
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091d..12a703d9 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/snowpack.config.mjs b/snowpack.config.mjs
index 388dbafd..9f212c34 100644
--- a/snowpack.config.mjs
+++ b/snowpack.config.mjs
@@ -16,6 +16,16 @@ export default {
       },
     ],
   ],
+  alias: {
+    // Type 1: Package Import Alias
+    // "lodash": "lodash-es",
+    // Type 2: Local Directory Import Alias (relative to cwd)
+    '@app': './src',
+    '@pages': './src/pages',
+    '@components': './src/components',
+    '@core': './src/core',
+    '@static': './src/static',
+  },
   routes: [
     /* Enable an SPA Fallback in development: */
     // {"match": "routes", "src": ".*", "dest": "/index.html"},
diff --git a/src/App.tsx b/src/App.tsx
index 0eeb5466..efe4bbc7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,17 +1,14 @@
 import React from 'react';
 
-import { ThemeProvider } from '@material-ui/system';
-import { Protobuf, SettingsManager, Types } from '@meshtastic/meshtasticjs';
-
-import { DeviceStatusDropdown } from './components/menu/buttons/DeviceStatusDropdown';
-import { LanguageDropdown } from './components/menu/buttons/LanguageDropdown';
-import { MobileNavToggle } from './components/menu/buttons/MobileNavToggle';
-import { ThemeToggle } from './components/menu/buttons/ThemeToggle';
-import { Logo } from './components/menu/Logo';
-import { MobileNav } from './components/menu/MobileNav';
-import { Navigation } from './components/menu/Navigation';
-import { connection } from './core/connection';
-import { useRoute } from './core/router';
+import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
+import { DeviceStatusDropdown } from '@components/menu/buttons/DeviceStatusDropdown';
+import { MobileNavToggle } from '@components/menu/buttons/MobileNavToggle';
+import { ThemeToggle } from '@components/menu/buttons/ThemeToggle';
+import { Logo } from '@components/menu/Logo';
+import { MobileNav } from '@components/menu/MobileNav';
+import { Navigation } from '@components/menu/Navigation';
+import { connection } from '@core/connection';
+import { useRoute } from '@core/router';
 import {
   ackMessage,
   addChannel,
@@ -22,13 +19,12 @@ import {
   setMyNodeInfo,
   setPreferences,
   setReady,
-} from './core/slices/meshtasticSlice';
-import { theme } from './core/theme';
-import { useAppDispatch, useAppSelector } from './hooks/redux';
-import { About } from './pages/About';
-import { Messages } from './pages/Messages';
-import { Nodes } from './pages/Nodes';
-import { Settings } from './pages/Settings';
+} from '@core/slices/meshtasticSlice';
+import { Protobuf, SettingsManager, Types } from '@meshtastic/meshtasticjs';
+import { About } from '@pages/About';
+import { Messages } from '@pages/Messages';
+import { Nodes } from '@pages/Nodes/Index';
+import { Settings } from '@pages/settings/Index';
 
 const App = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -44,12 +40,14 @@ const App = (): JSX.Element => {
   React.useEffect(() => {
     SettingsManager.debugMode = Protobuf.LogRecord_Level.TRACE;
 
-    connection.connect({
+    void connection.connect({
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       address: hostOverrideEnabled
         ? hostOverride
         : import.meta.env.NODE_ENV === 'production'
         ? window.location.hostname
-        : import.meta.env.SNOWPACK_PUBLIC_DEVICE_IP,
+        : import.meta.env.SNOWPACK_PUBLIC_DEVICE_IP ??
+          'http://meshtastic.local',
       receiveBatchRequests: false,
       tls: false,
       fetchInterval: 2000,
@@ -116,7 +114,7 @@ const App = (): JSX.Element => {
       }
     });
 
-    return () => {
+    return (): void => {
       connection.onDeviceStatus.cancelAll();
       connection.onMyNodeInfo.cancelAll();
       connection.onNodeInfoPacket.cancelAll();
@@ -128,41 +126,40 @@ const App = (): JSX.Element => {
   }, [dispatch, myNodeInfo.myNodeNum]);
 
   return (
-    <ThemeProvider theme={theme(darkMode)}>
-      <div className={`h-screen w-screen  ${darkMode ? 'dark' : ''}`}>
-        <div className="flex flex-col h-full w-full bg-gray-200 dark:bg-primaryDark">
-          <div className="flex flex-shrink-0 w-full overflow-hidden bg-primary dark:bg-primary">
-            <div className="w-full sm:py-3 sm:m-8 sm:mb-0 md:mt-12 md:mx-8 md:pt-4 md:pb-3 sm:rounded-t-xl border-b dark:border-gray-600 sm:shadow-md overflow-hidden bg-white dark:bg-primaryDark">
-              <div className="flex items-center justify-between h-16 px-4 md:px-6">
-                <div className="hidden md:flex">
-                  <Logo />
-                </div>
-
-                <MobileNavToggle />
-                <div className="flex items-center space-x-2">
-                  <DeviceStatusDropdown />
-                  <LanguageDropdown />
-                  <ThemeToggle />
-                </div>
+    <div
+      className={`h-screen w-screen ${darkMode ? 'dark rs-theme-dark' : ''}`}
+    >
+      <div className="flex flex-col h-full bg-gray-200 dark:bg-primaryDark">
+        <div className="flex flex-shrink-0 overflow-hidden bg-primary dark:bg-primary">
+          <div className="w-full overflow-hidden bg-white border-b md:mt-12 md:mx-8 md:pt-4 md:pb-3 md:rounded-t-xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
+            <div className="flex items-center justify-between h-16 px-4 md:px-6">
+              <div className="hidden md:flex">
+                <Logo />
               </div>
-              <Navigation />
-            </div>
-          </div>
 
-          <MobileNav />
-
-          <div className="flex flex-grow min-h-0 w-full sm:px-8 sm:mb-8">
-            <div className="flex w-full sm:shadow-xl sm:overflow-hidden bg-gray-100  dark:bg-secondaryDark sm:rounded-b-xl">
-              {route.name === 'messages' && <Messages />}
-              {route.name === 'nodes' && <Nodes />}
-              {route.name === 'settings' && <Settings />}
-              {route.name === 'about' && <About />}
-              {route.name === false && 'Not Found'}
+              <MobileNavToggle />
+              <div className="flex items-center space-x-2">
+                <DeviceStatusDropdown />
+                {/* <LanguageDropdown /> */}
+                <ThemeToggle />
+              </div>
             </div>
+            <Navigation className="hidden md:flex" />
+          </div>
+        </div>
+        <MobileNav />
+
+        <div className="flex flex-grow w-full min-h-0 md:px-8 md:mb-8">
+          <div className="flex w-full bg-gray-100 md:shadow-xl md:overflow-hidden dark:bg-secondaryDark md:rounded-b-xl">
+            {route.name === 'messages' && <Messages />}
+            {route.name === 'nodes' && <Nodes />}
+            {route.name === 'settings' && <Settings />}
+            {route.name === 'about' && <About />}
+            {route.name === false && 'Not Found'}
           </div>
         </div>
       </div>
-    </ThemeProvider>
+    </div>
   );
 };
 
diff --git a/src/components/TestForm.tsx b/src/components/TestForm.tsx
deleted file mode 100644
index aca81872..00000000
--- a/src/components/TestForm.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import React from 'react';
-
-import { Controller, useForm } from 'react-hook-form';
-
-import Button from '@material-ui/core/Button';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Radio from '@material-ui/core/Radio';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import Switch from '@material-ui/core/Switch';
-import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
-
-let renderCount = 0;
-
-const options = [
-  {
-    value: 'chocolate',
-    label: 'Chocolate',
-  },
-  {
-    value: 'strawberry',
-    label: 'Strawberry',
-  },
-  {
-    value: 'vanilla',
-    label: 'Vanilla',
-  },
-];
-
-const defaultValues = {
-  Native: '',
-  TextField: '',
-  Select: '',
-  ReactSelect: '',
-  Checkbox: false,
-  switch: false,
-  RadioGroup: '',
-};
-
-export const TestForm = () => {
-  const { handleSubmit, register, reset, control, watch } = useForm({
-    defaultValues,
-    mode: 'onChange',
-  });
-  renderCount++;
-
-  const data = watch();
-
-  return (
-    <div className="flex w-full max-w-screen-md justify-start items-start">
-      <form
-        className="w-1/2"
-        onSubmit={handleSubmit((data) => console.info(data))}
-      >
-        <div className="mt-48 mb-16">
-          <Typography className="mb-24 font-medium text-14">
-            Native Input:
-          </Typography>
-          <input
-            className="border-1 outline-none rounded-8 p-8"
-            {...register('Native')}
-          />
-        </div>
-
-        <div className="mt-48 mb-16">
-          <Typography className="mb-24 font-medium text-14">
-            MUI Checkbox
-          </Typography>
-          <Controller
-            name="Checkbox"
-            control={control}
-            defaultValue={false}
-            render={({ field: { onChange, value } }) => (
-              <Checkbox
-                checked={value}
-                onChange={(ev) => onChange(ev.target.checked)}
-              />
-            )}
-          />
-        </div>
-
-        <div className="mt-48 mb-16">
-          <Typography className="mb-24 font-medium text-14">
-            Radio Group
-          </Typography>
-          <Controller
-            render={({ field }) => (
-              <RadioGroup {...field} aria-label="gender" name="gender1">
-                <FormControlLabel
-                  value="female"
-                  control={<Radio />}
-                  label="Female"
-                />
-                <FormControlLabel
-                  value="male"
-                  control={<Radio />}
-                  label="Male"
-                />
-              </RadioGroup>
-            )}
-            name="RadioGroup"
-            control={control}
-          />
-        </div>
-
-        <div className="mt-48 mb-16">
-          <Typography className="mb-24 font-medium text-14">
-            MUI TextField
-          </Typography>
-          <Controller
-            render={({ field }) => <TextField {...field} variant="outlined" />}
-            name="TextField"
-            control={control}
-          />
-        </div>
-
-        {/* <div className="mt-48 mb-16">
-          <Typography className="mb-24 font-medium text-14">
-            MUI Select
-          </Typography>
-          <Controller
-            render={({ field }) => (
-              <Select {...field} variant="outlined">
-                <MenuItem value={10}>Ten</MenuItem>
-                <MenuItem value={20}>Twenty</MenuItem>
-                <MenuItem value={30}>Thirty</MenuItem>
-              </Select>
-            )}
-            name="Select"
-            control={control}
-          />
-        </div> */}
-
-        <div className="mt-48 mb-16">
-          <Typography className="mb-24 font-medium text-14">
-            MUI Switch
-          </Typography>
-          <Controller
-            name="switch"
-            control={control}
-            defaultValue={false}
-            render={({ field: { onChange, value } }) => (
-              <Switch
-                checked={value}
-                onChange={(ev) => onChange(ev.target.checked)}
-              />
-            )}
-          />
-        </div>
-
-        <div className="mt-48 mb-16">
-          <Typography className="mb-24 font-medium text-14">
-            React Select
-          </Typography>
-          {/* <Controller
-            render={({ field }) => <ReactSelect {...field} />}
-            options={options}
-            name="ReactSelect"
-            isClearable
-            control={control}
-            onChange={([selected]) => {
-              return { value: selected };
-            }}
-          /> */}
-        </div>
-
-        <div className="flex my-48 items-center">
-          <Button
-            className="mx-8"
-            variant="contained"
-            color="secondary"
-            type="submit"
-          >
-            Submit
-          </Button>
-
-          <Button
-            className="mx-8"
-            type="button"
-            onClick={() => {
-              reset(defaultValues);
-            }}
-          >
-            Reset Form
-          </Button>
-        </div>
-      </form>
-
-      <div className="w-1/2 my-48 p-24">
-        <pre className="language-js p-24 w-400">
-          {JSON.stringify(data, null, 2)}
-        </pre>
-
-        <Typography
-          className="mt-16 font-medium text-12 italic"
-          color="textSecondary"
-        >
-          Render Count: {renderCount}
-        </Typography>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/chat/Message.tsx b/src/components/chat/Message.tsx
index 3a418220..9c15b1cb 100644
--- a/src/components/chat/Message.tsx
+++ b/src/components/chat/Message.tsx
@@ -19,9 +19,13 @@ export const Message = ({
 }: MessageProps): JSX.Element => {
   return (
     <div
-      className={`flex space-x-2 ${!isSender && 'ml-auto flex-row-reverse'}`}
+      className={`flex space-x-2 ${
+        !isSender ? 'ml-auto flex-row-reverse' : ''
+      }`}
     >
-      <div className={`shadow-md rounded-full mt-auto ${!isSender && 'ml-2'}`}>
+      <div
+        className={`shadow-md rounded-full mt-auto ${!isSender ? 'ml-2' : ''}`}
+      >
         <Avatar
           size={30}
           name={senderName ?? 'UNK'}
@@ -37,11 +41,11 @@ export const Message = ({
               : 'bg-primary text-blue-50 rounded-bl-lg'
           } ${ack ? 'animate-none' : 'animate-pulse'}`}
         >
-          <div className="min-w-4 leading-5">{message}</div>
+          <div className="leading-5 min-w-4">{message}</div>
         </div>
         <div className="text-xs text-gray-600">{senderName}</div>
       </div>
-      <div className="mt-auto mb-4 text-xs font-medium text-secondary mr-3 dark:text-gray-200">
+      <div className="mt-auto mb-4 mr-3 text-xs font-medium text-secondary dark:text-gray-200">
         {rxTime.toLocaleTimeString(undefined, {
           hour: '2-digit',
           minute: '2-digit',
diff --git a/src/components/chat/MessageBar.tsx b/src/components/chat/MessageBar.tsx
index 1eb8dff2..307db01a 100644
--- a/src/components/chat/MessageBar.tsx
+++ b/src/components/chat/MessageBar.tsx
@@ -2,59 +2,57 @@ import React from 'react';
 
 import { useTranslation } from 'react-i18next';
 
+import { useAppSelector } from '@app/hooks/redux';
+import { Button } from '@components/generic/Button';
+import { Input } from '@components/generic/Input';
+import { connection } from '@core/connection';
 import {
   EmojiHappyIcon,
   PaperAirplaneIcon,
   PaperClipIcon,
 } from '@heroicons/react/outline';
 
-import { connection } from '../../core/connection';
-import { useAppSelector } from '../../hooks/redux';
-import { IconButton } from '../generic/IconButton';
-
 export const MessageBar = (): JSX.Element => {
   const ready = useAppSelector((state) => state.meshtastic.ready);
   const [currentMessage, setCurrentMessage] = React.useState('');
-  const sendMessage = () => {
+  const sendMessage = (): void => {
     if (ready) {
-      connection.sendText(currentMessage, undefined, true);
+      void connection.sendText(currentMessage, undefined, true);
       setCurrentMessage('');
     }
   };
   const { t } = useTranslation();
   return (
-    <div className="flex p-4 bg-gray-50 dark:bg-transparent space-x-2 text-gray-500 dark:text-gray-400">
-      <div className="flex">
-        <IconButton>
-          <EmojiHappyIcon className="w-6 h-6" />
-        </IconButton>
-
-        <IconButton>
-          <PaperClipIcon className="w-6 h-6" />
-        </IconButton>
-      </div>
-      <form
-        className="flex w-full space-x-2"
-        onSubmit={(e) => {
-          e.preventDefault();
-          sendMessage();
-        }}
-      >
-        <input
-          type="text"
-          minLength={2}
-          placeholder={`${t('placeholder.message')}...`}
-          disabled={!ready}
-          value={currentMessage}
-          onChange={(e) => {
-            setCurrentMessage(e.target.value);
+    <div className="flex w-full p-4 mx-auto space-x-2 text-gray-500 bg-gray-50 dark:bg-transparent dark:text-gray-400">
+      <div className="flex w-full max-w-4xl">
+        <div className="flex">
+          <Button icon={<EmojiHappyIcon className="w-5 h-5" />} circle />
+          <Button icon={<PaperClipIcon className="w-5 h-5" />} circle />
+        </div>
+        <form
+          className="flex w-full space-x-2"
+          onSubmit={(e): void => {
+            e.preventDefault();
+            sendMessage();
           }}
-          className="focus:outline-none h-10 w-full resize-none rounded-full border border-gray-300 dark:bg-gray-900 px-4"
-        />
-        <IconButton type="submit">
-          <PaperAirplaneIcon className="w-6 h-6 rotate-90" />
-        </IconButton>
-      </form>
+        >
+          <Input
+            type="text"
+            minLength={2}
+            placeholder={`${t('placeholder.message')}...`}
+            disabled={!ready}
+            value={currentMessage}
+            onChange={(e): void => {
+              setCurrentMessage(e.target.value);
+            }}
+          />
+          <Button
+            icon={<PaperAirplaneIcon className="w-5 h-5" />}
+            type="submit"
+            circle
+          />
+        </form>
+      </div>
     </div>
   );
 };
diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx
deleted file mode 100644
index 4a02d27d..00000000
--- a/src/components/form/Input.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-
-type DefaultInputProps = JSX.IntrinsicElements['input'];
-
-export interface InputProps {
-  valid?: boolean;
-  validationMessage?: string;
-  icon?: JSX.Element;
-  label: string;
-}
-
-export const Input = React.forwardRef<
-  HTMLInputElement,
-  InputProps & DefaultInputProps
->(function Input(
-  {
-    valid,
-    validationMessage,
-    icon,
-    label,
-    id,
-    ...props
-  }: InputProps & DefaultInputProps,
-  ref,
-) {
-  return (
-    <div className="space-y-1">
-      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
-        {label}
-      </label>
-      <div className="relative">
-        {icon && (
-          <div className="flex absolute inset-y-0 left-0 px-3 items-center pointer-events-none">
-            {React.cloneElement(icon, {
-              className: 'w-5 h-5 text-gray-500 dark:text-gray-600',
-            })}
-          </div>
-        )}
-        <input
-          ref={ref}
-          {...props}
-          className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white ${
-            icon ? 'pl-9' : 'pl-2'
-          }`}
-        />
-      </div>
-      {!valid && (
-        <div className="text-sm text-gray-600">{validationMessage}</div>
-      )}
-    </div>
-  );
-});
diff --git a/src/components/form/Select.tsx b/src/components/form/Select.tsx
deleted file mode 100644
index ba89734e..00000000
--- a/src/components/form/Select.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-import type { FieldValues, UseControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-import ReactSelect from 'react-select';
-
-interface SelectProps<T> extends UseControllerProps<T> {
-  label: string;
-  options: {
-    value: string;
-    label: string;
-  }[];
-}
-
-export const Select = <T extends FieldValues>({
-  name,
-  control,
-  label,
-  options,
-}: SelectProps<T>): JSX.Element => {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      rules={{
-        required: 'This is required',
-      }}
-      render={({ field: { onChange, value, name } }) => (
-        <div className="space-y-1">
-          <span className="block text-sm font-medium dark:text-white">
-            {label}
-          </span>
-          <ReactSelect options={options} />
-        </div>
-      )}
-    />
-  );
-};
diff --git a/src/components/form/Switch.tsx b/src/components/form/Switch.tsx
deleted file mode 100644
index 86ee6e98..00000000
--- a/src/components/form/Switch.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-
-import type { FieldValues, UseControllerProps } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
-
-import MaterialSwitch from '@material-ui/core/Switch';
-
-interface SwitchProps<T> extends UseControllerProps<T> {
-  label: string;
-}
-
-export const Switch = <T extends FieldValues>({
-  name,
-  control,
-  label,
-}: SwitchProps<T>): JSX.Element => {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      rules={{
-        required: 'This is required',
-      }}
-      render={({ field: { onChange, value, name } }) => (
-        <div className="flex flex-col">
-          <span className="block text-sm font-medium dark:text-white">
-            {label}
-          </span>
-          <div className="relative w-14 mr-2 ml-auto select-none">
-            <MaterialSwitch
-              id={name}
-              checked={value}
-              onChange={(ev) => onChange(ev.target.checked)}
-            />
-          </div>
-        </div>
-      )}
-    />
-  );
-};
diff --git a/src/components/generic/Blur.tsx b/src/components/generic/Blur.tsx
new file mode 100644
index 00000000..17937709
--- /dev/null
+++ b/src/components/generic/Blur.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+type DefaultDivProps = JSX.IntrinsicElements['div'];
+
+interface LocalBlurProps {
+  disableOnMd?: boolean;
+}
+
+export type BlurProps = LocalBlurProps & DefaultDivProps;
+
+export const Blur = ({
+  disableOnMd,
+  className,
+  onClick,
+  ...props
+}: BlurProps): JSX.Element => {
+  return (
+    <div
+      className={`absolute inset-0 z-10 w-full h-full transition-opacity ${
+        disableOnMd ? 'md:hidden' : 'test'
+      } ${className}`}
+      {...props}
+    >
+      <div
+        onClick={onClick}
+        className={`absolute inset-0 w-full h-full backdrop-filter backdrop-blur-sm ${
+          disableOnMd ? 'md:hidden' : 'test'
+        }`}
+        tabIndex={0}
+      ></div>
+    </div>
+  );
+};
diff --git a/src/components/generic/Button.tsx b/src/components/generic/Button.tsx
index 74aab5f5..5c7f5000 100644
--- a/src/components/generic/Button.tsx
+++ b/src/components/generic/Button.tsx
@@ -1,28 +1,50 @@
 import React from 'react';
 
-import MaterialButton from '@material-ui/core/Button';
-import type { ButtonProps as MaterialButtonProps } from '@material-ui/core/Button/Button';
+type DefaultButtonProps = JSX.IntrinsicElements['button'];
 
 interface LocalButtonProps {
-  text: string;
   icon?: JSX.Element;
+  circle?: boolean;
+  active?: boolean;
+  border?: boolean;
 }
 
-export type ButtonProps = MaterialButtonProps & LocalButtonProps;
+export type ButtonProps = LocalButtonProps & DefaultButtonProps;
 
-export const Button = ({ text, icon, ...props }: ButtonProps): JSX.Element => {
+export const Button = ({
+  icon,
+  circle,
+  className,
+  active,
+  border,
+  disabled,
+  children,
+  ...props
+}: ButtonProps): JSX.Element => {
   return (
-    <MaterialButton
+    <button
+      className={`items-center  select-none flex dark:text-white ${
+        active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
+      } ${
+        circle ? 'rounded-full h-10 w-10' : 'rounded-md p-3 space-x-3 text-sm'
+      } ${
+        disabled
+          ? 'cursor-not-allowed dark:bg-primaryDark bg-white'
+          : 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 hover:shadow-md'
+      } ${border ? 'border dark:border-gray-600' : ''} ${className}`}
       {...props}
-      className="dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
     >
-      <div className="flex p-3">
-        {icon &&
-          React.cloneElement(icon, {
-            className: 'h-6 w-6 mr-3 text-gray-500 dark:text-gray-400',
-          })}
-        <span>{text}</span>
-      </div>
-    </MaterialButton>
+      {icon && (
+        <div
+          className={`text-gray-500 dark:text-gray-400 ${
+            circle ? 'mx-auto' : ''
+          }`}
+        >
+          {icon}
+        </div>
+      )}
+
+      <span>{children}</span>
+    </button>
   );
 };
diff --git a/src/components/generic/Drawer.tsx b/src/components/generic/Drawer.tsx
new file mode 100644
index 00000000..0aa6e8df
--- /dev/null
+++ b/src/components/generic/Drawer.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Blur } from '@components/generic/Blur';
+
+type DefaultAsideProps = JSX.IntrinsicElements['aside'];
+
+interface LocalDrawerProps {
+  open: boolean;
+  permenant?: boolean;
+  onClose: () => void;
+}
+export type DrawerProps = LocalDrawerProps & DefaultAsideProps;
+
+export const Drawer = ({
+  open,
+  permenant,
+  onClose,
+  children,
+  ...props
+}: DrawerProps): JSX.Element => {
+  return (
+    <>
+      {open && <Blur disableOnMd={true} onClick={onClose} />}
+
+      <aside
+        className={`transform top-0 left-0 bg-white dark:bg-secondaryDark shadow-md max-w-xs w-full border-r dark:border-gray-600 h-full overflow-auto ease-in-out transition-all duration-300 z-30 ${
+          permenant ? '' : 'absolute'
+        } ${open ? 'translate-x-0' : '-translate-x-full'}`}
+        {...props}
+      >
+        {children}
+      </aside>
+    </>
+  );
+};
diff --git a/src/components/generic/IconButton.tsx b/src/components/generic/IconButton.tsx
deleted file mode 100644
index 2fbb61ce..00000000
--- a/src/components/generic/IconButton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import MaterialIconButton from '@material-ui/core/IconButton';
-import type { IconButtonProps } from '@material-ui/core/IconButton/IconButton';
-
-export const IconButton = ({
-  children,
-  ...props
-}: IconButtonProps): JSX.Element => {
-  return (
-    <MaterialIconButton {...props} className="text-gray-500 dark:text-gray-400">
-      {children}
-    </MaterialIconButton>
-  );
-};
diff --git a/src/components/generic/Input.tsx b/src/components/generic/Input.tsx
new file mode 100644
index 00000000..5f404341
--- /dev/null
+++ b/src/components/generic/Input.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+type DefaultInputProps = JSX.IntrinsicElements['input'];
+
+interface LocalInputProps {
+  icon?: JSX.Element;
+  label?: string;
+  valid?: boolean;
+  validationMessage?: string;
+}
+
+export type InputProps = LocalInputProps & DefaultInputProps;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  function Input(
+    { icon, label, valid, validationMessage, id, ...props }: InputProps,
+    ref,
+  ) {
+    return (
+      <div className="w-full">
+        <label
+          htmlFor={id}
+          className="block text-sm font-medium dark:text-white"
+        >
+          {label}
+        </label>
+        <div className="relative">
+          {icon && (
+            <div className="absolute inset-y-0 left-0 flex items-center px-3 pointer-events-none">
+              {React.cloneElement(icon, {
+                className: 'w-5 h-5 text-gray-500 dark:text-gray-600',
+              })}
+            </div>
+          )}
+          <input
+            id={id}
+            ref={ref}
+            {...props}
+            className={`block w-full h-11 rounded-md border shadow-sm focus:outline-none focus:border-primary dark:focus:border-primary bg-white dark:bg-secondaryDark dark:border-gray-600 dark:text-white ${
+              icon ? 'pl-9' : 'pl-2'
+            }`}
+          />
+        </div>
+        {!valid && (
+          <div className="text-sm text-gray-600">{validationMessage}</div>
+        )}
+      </div>
+    );
+  },
+);
diff --git a/src/components/generic/Select.tsx b/src/components/generic/Select.tsx
new file mode 100644
index 00000000..f2da5be8
--- /dev/null
+++ b/src/components/generic/Select.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { Listbox } from '@headlessui/react';
+import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
+
+export interface SelectProps {
+  label: string;
+  options: {
+    name: string;
+    value: string;
+    icon: JSX.Element;
+  }[];
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const Select = ({
+  label,
+  options,
+  id,
+  value,
+  onChange,
+}: SelectProps): JSX.Element => {
+  return (
+    <div className="w-full">
+      <label htmlFor={id} className="block text-sm font-medium dark:text-white">
+        {label}
+      </label>
+
+      <Listbox value={value} onChange={onChange}>
+        <div className="relative mt-1">
+          <Listbox.Button className="relative w-full text-left bg-white border rounded-md shadow-sm h-11 focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white">
+            <span className="block truncate">{value}</span>
+            <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+              <SelectorIcon
+                className="w-5 h-5 text-gray-400"
+                aria-hidden="true"
+              />
+            </span>
+          </Listbox.Button>
+
+          <Listbox.Options className="absolute w-full bg-white border rounded-md shadow-sm focus:outline-none dark:bg-secondaryDark dark:border-gray-600 dark:text-white">
+            {options.map((option) => (
+              <Listbox.Option
+                key={option.value}
+                className={({ active }): string =>
+                  `cursor-default select-none relative py-2 pl-10 pr-4 first:rounded-t-md last:rounded-b-md dark:text-white ${
+                    active ? 'bg-gray-200 dark:bg-primaryDark' : 'text-gray-900'
+                  }`
+                }
+                value={option.value}
+              >
+                {({ selected, active }): JSX.Element => (
+                  <>
+                    <span
+                      className={`${
+                        selected ? 'font-medium' : 'font-normal'
+                      } block truncate`}
+                    >
+                      {option.name}
+                    </span>
+                    {selected ? (
+                      <span
+                        className={`${
+                          active ? 'text-amber-600' : 'text-amber-600'
+                        }
+                                absolute inset-y-0 left-0 flex items-center pl-3`}
+                      >
+                        <CheckIcon className="w-5 h-5" aria-hidden="true" />
+                      </span>
+                    ) : null}
+                  </>
+                )}
+              </Listbox.Option>
+            ))}
+          </Listbox.Options>
+        </div>
+      </Listbox>
+    </div>
+  );
+};
diff --git a/src/components/generic/SidebarItem.tsx b/src/components/generic/SidebarItem.tsx
new file mode 100644
index 00000000..8d97ec90
--- /dev/null
+++ b/src/components/generic/SidebarItem.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+type DefaultDivProps = JSX.IntrinsicElements['div'];
+
+interface LocalSidebarItemProps {
+  title: string;
+  description: string;
+  selected: boolean;
+  icon: JSX.Element;
+}
+
+export type SidebarItemProps = LocalSidebarItemProps & DefaultDivProps;
+
+export const SidebarItem = ({
+  title,
+  description,
+  selected,
+  icon,
+}: SidebarItemProps): JSX.Element => {
+  return (
+    <div
+      className={`flex p-5 cursor-pointer select-none dark:hover:bg-primaryDark ${
+        selected ? 'bg-gray-200 dark:bg-primaryDark' : 'dark:bg-secondaryDark'
+      }`}
+    >
+      <div className="text-gray-500 dark:text-gray-400">{icon}</div>
+      <div className="ml-3 text-left">
+        <div className="font-medium text-left">{title}</div>
+        <div className="mt-0.5 text-gray-400 text-sm">{description}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/menu/Logo.tsx b/src/components/menu/Logo.tsx
index a86e1b41..c9233690 100644
--- a/src/components/menu/Logo.tsx
+++ b/src/components/menu/Logo.tsx
@@ -3,8 +3,16 @@ import React from 'react';
 export const Logo = (): JSX.Element => {
   return (
     <>
-      <img className="w-16 dark:hidden" src="Mesh_Logo_Black.svg" />
-      <img className="hidden dark:flex w-16" src="Mesh_Logo_White.svg" />
+      <img
+        title="Logo"
+        className="w-16 dark:hidden"
+        src="Mesh_Logo_Black.svg"
+      />
+      <img
+        title="Logo"
+        className="hidden w-16 dark:flex"
+        src="Mesh_Logo_White.svg"
+      />
     </>
   );
 };
diff --git a/src/components/menu/MenuButton.tsx b/src/components/menu/MenuButton.tsx
deleted file mode 100644
index 9e8ab580..00000000
--- a/src/components/menu/MenuButton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-import type { Link } from 'type-route';
-
-interface MenuButtonProps {
-  icon: JSX.Element;
-  text: string;
-  link: Link;
-  clickAction?: () => void;
-}
-
-export const MenuButton = ({
-  icon,
-  text,
-  link,
-  clickAction,
-}: MenuButtonProps): JSX.Element => {
-  return (
-    <div
-      onClick={() => {
-        if (clickAction) {
-          clickAction();
-        }
-      }}
-    >
-      <a
-        {...link}
-        className="flex text-sm h-12 items-center dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md cursor-pointer px-3 select-none"
-      >
-        {React.cloneElement(icon, {
-          className: 'h-6 w-6 mr-3 text-gray-500 dark:text-gray-400',
-        })}
-        <span className="">{text}</span>
-      </a>
-    </div>
-  );
-};
diff --git a/src/components/menu/MobileNav.tsx b/src/components/menu/MobileNav.tsx
index cb84c596..b0fc1301 100644
--- a/src/components/menu/MobileNav.tsx
+++ b/src/components/menu/MobileNav.tsx
@@ -1,18 +1,11 @@
 import React from 'react';
 
-import {
-  AnnotationIcon,
-  CogIcon,
-  InformationCircleIcon,
-  ViewGridIcon,
-} from '@heroicons/react/outline';
-import SwipeableDrawer from '@material-ui/core/SwipeableDrawer/SwipeableDrawer';
+import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
+import { Drawer } from '@components/generic/Drawer';
+import { closeMobileNav } from '@core/slices/appSlice';
 
-import { routes } from '../../core/router';
-import { closeMobileNav, openMobileNav } from '../../core/slices/appSlice';
-import { useAppDispatch, useAppSelector } from '../../hooks/redux';
-import { Button } from '../generic/Button';
 import { Logo } from './Logo';
+import { Navigation } from './Navigation';
 
 export const MobileNav = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -20,41 +13,22 @@ export const MobileNav = (): JSX.Element => {
   const mobileNavOpen = useAppSelector((state) => state.app.mobileNavOpen);
 
   return (
-    <SwipeableDrawer
+    <Drawer
       open={mobileNavOpen}
-      anchor="left"
-      onClose={() => {
+      onClose={(): void => {
         dispatch(closeMobileNav());
       }}
-      onOpen={() => {
-        dispatch(openMobileNav());
-      }}
     >
-      <div className="flex flex-col dark:bg-secondaryDark h-full">
+      <div className="flex flex-col w-64">
         <div className="m-auto my-6">
           <Logo />
         </div>
-        <Button
-          icon={<AnnotationIcon />}
-          text={'Messages'}
-          {...routes.messages().link}
-        />
-        <Button
-          icon={<ViewGridIcon />}
-          text={'Nodes'}
-          {...routes.nodes().link}
-        />
-        <Button
-          icon={<CogIcon />}
-          text={'Settings'}
-          {...routes.settings().link}
-        />
-        <Button
-          icon={<InformationCircleIcon />}
-          text={'About'}
-          {...routes.about().link}
+        <Navigation
+          onClick={(): void => {
+            dispatch(closeMobileNav());
+          }}
         />
       </div>
-    </SwipeableDrawer>
+    </Drawer>
   );
 };
diff --git a/src/components/menu/Navigation.tsx b/src/components/menu/Navigation.tsx
index a3700328..c0cdec14 100644
--- a/src/components/menu/Navigation.tsx
+++ b/src/components/menu/Navigation.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Button } from '@components/generic/Button';
+import { routes, useRoute } from '@core/router';
 import {
   AnnotationIcon,
   CogIcon,
@@ -7,33 +9,60 @@ import {
   ViewGridIcon,
 } from '@heroicons/react/outline';
 
-import { routes } from '../../core/router';
-import { Button } from '../generic/Button';
+type DefaultDivProps = JSX.IntrinsicElements['div'];
 
-export const Navigation = (): JSX.Element => {
+export type NavigationProps = DefaultDivProps;
+
+export const Navigation = ({
+  onClick,
+  className,
+  ...props
+}: NavigationProps): JSX.Element => {
+  const route = useRoute();
   return (
-    <div className="hidden md:flex flex-auto flex-0 relative items-center h-16 px-4 ">
-      <div className="flex items-center">
+    <div
+      className={`h-16 px-4 md:space-x-2 space-y-2 md:space-y-0 ${className}`}
+      {...props}
+    >
+      <div onClick={onClick}>
         <Button
-          icon={<AnnotationIcon />}
-          text={'Messages'}
+          icon={<AnnotationIcon className="w-6 h-6" />}
+          active={route.name === 'messages'}
+          className="w-full md:w-auto"
           {...routes.messages().link}
-        />
+        >
+          Messages
+        </Button>
+      </div>
+      <div onClick={onClick}>
         <Button
-          icon={<ViewGridIcon />}
-          text={'Nodes'}
+          icon={<ViewGridIcon className="w-6 h-6" />}
+          className="w-full md:w-auto"
+          active={route.name === 'nodes'}
           {...routes.nodes().link}
-        />
+        >
+          Nodes
+        </Button>
+      </div>
+      <div onClick={onClick}>
         <Button
-          icon={<CogIcon />}
-          text={'Settings'}
+          icon={<CogIcon className="w-6 h-6" />}
+          className="w-full md:w-auto"
+          active={route.name === 'settings'}
           {...routes.settings().link}
-        />
+        >
+          Settings
+        </Button>
+      </div>
+      <div onClick={onClick}>
         <Button
-          icon={<InformationCircleIcon />}
-          text={'About'}
+          icon={<InformationCircleIcon className="w-6 h-6" />}
+          className="w-full md:w-auto"
+          active={route.name === 'about'}
           {...routes.about().link}
-        />
+        >
+          About
+        </Button>
       </div>
     </div>
   );
diff --git a/src/components/menu/buttons/DeviceStatusDropdown.tsx b/src/components/menu/buttons/DeviceStatusDropdown.tsx
index eed595fa..061f67f4 100644
--- a/src/components/menu/buttons/DeviceStatusDropdown.tsx
+++ b/src/components/menu/buttons/DeviceStatusDropdown.tsx
@@ -1,29 +1,20 @@
 import React from 'react';
 
+import { useAppSelector } from '@app/hooks/redux';
+import { Button } from '@components/generic/Button';
 import { SwitchVerticalIcon } from '@heroicons/react/outline';
 
-import { useAppSelector } from '../../../hooks/redux';
-import { IconButton } from '../../generic/IconButton';
-
 export const DeviceStatusDropdown = (): JSX.Element => {
   const ready = useAppSelector((state) => state.meshtastic.ready);
-  const deviceStatus = useAppSelector((state) => state.meshtastic.deviceStatus);
 
   return (
-    <IconButton>
-      <SwitchVerticalIcon className={`h-6 w-6 ${!ready && 'animate-pulse'}`} />
-      {/* <div
-        className={`flex w-6 h-6 rounded-full animate-pulse shadow-md ${
-          deviceStatus <= Types.DeviceStatusEnum.DEVICE_DISCONNECTED
-            ? 'bg-red-400 animate-pulse'
-            : deviceStatus <= Types.DeviceStatusEnum.DEVICE_CONFIGURING &&
-              !ready
-            ? 'bg-yellow-400 animate-pulse'
-            : ready
-            ? 'bg-green-400'
-            : 'bg-gray-400'
-        }`}
-      ></div> */}
-    </IconButton>
+    <Button
+      icon={
+        <SwitchVerticalIcon
+          className={`h-6 w-6 ${!ready ? 'animate-pulse' : ''}`}
+        />
+      }
+      circle
+    />
   );
 };
diff --git a/src/components/menu/buttons/LanguageDropdown.tsx b/src/components/menu/buttons/LanguageDropdown.tsx
deleted file mode 100644
index 48ce2ad8..00000000
--- a/src/components/menu/buttons/LanguageDropdown.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-
-import { Jp, Pt, Us } from 'react-flags-select';
-
-import { Menu } from '@headlessui/react';
-
-import i18n from '../../../core/translation';
-import { useAppDispatch } from '../../../hooks/redux';
-import { IconButton } from '../../generic/IconButton';
-
-export const LanguageDropdown = (): JSX.Element => {
-  const dispatch = useAppDispatch();
-
-  const languages = [
-    {
-      name: 'English',
-      value: 'en',
-      flag: <Us className="w-6" />,
-    },
-    {
-      name: 'Português',
-      value: 'pt',
-      flag: <Pt className="w-6" />,
-    },
-    {
-      name: 'Japanese',
-      value: 'jp',
-      flag: <Jp className="w-6" />,
-    },
-  ];
-
-  return (
-    <Menu as="div" className="w-10 h-10">
-      <div className="absolute">
-        <IconButton>
-          <Menu.Button as="div">
-            <Us className="w-6 shadow rounded-sm" />
-          </Menu.Button>
-        </IconButton>
-
-        <Menu.Items className="z-20 absolute right-0 bg-white dark:bg-secondaryDark border dark:border-gray-600 divide-y divide-gray-200 dark:divide-gray-600 rounded-md shadow-md focus:outline-none">
-          {languages.map((language, index) => (
-            <Menu.Item
-              key={index}
-              onClick={() => {
-                i18n.changeLanguage(language.value);
-              }}
-            >
-              {({ active }) => (
-                <button
-                  className={`dark:text-white first:rounded-t-md last:rounded-b-md space-x-2 group flex items-center w-full px-2 py-2 text-sm ${
-                    active && 'bg-gray-200 dark:bg-gray-800'
-                  }`}
-                >
-                  {language.flag}
-                  <p className="font-medium">{language.name}</p>
-                </button>
-              )}
-            </Menu.Item>
-          ))}
-          {/* ... */}
-        </Menu.Items>
-      </div>
-    </Menu>
-  );
-};
diff --git a/src/components/menu/buttons/MobileNavToggle.tsx b/src/components/menu/buttons/MobileNavToggle.tsx
index 1231b235..59fde9f5 100644
--- a/src/components/menu/buttons/MobileNavToggle.tsx
+++ b/src/components/menu/buttons/MobileNavToggle.tsx
@@ -1,23 +1,23 @@
 import React from 'react';
 
+import { Button } from '@components/generic/Button';
+import { openMobileNav } from '@core/slices/appSlice';
 import { MenuIcon } from '@heroicons/react/outline';
 
-import { openMobileNav } from '../../../core/slices/appSlice';
 import { useAppDispatch } from '../../../hooks/redux';
-import { IconButton } from '../../generic/IconButton';
 
 export const MobileNavToggle = (): JSX.Element => {
   const dispatch = useAppDispatch();
 
   return (
     <div className="md:hidden">
-      <IconButton
-        onClick={() => {
+      <Button
+        icon={<MenuIcon className="w-5 h-5" />}
+        onClick={(): void => {
           dispatch(openMobileNav());
         }}
-      >
-        <MenuIcon className="h-6 w-6" />
-      </IconButton>
+        circle
+      />
     </div>
   );
 };
diff --git a/src/components/menu/buttons/ThemeToggle.tsx b/src/components/menu/buttons/ThemeToggle.tsx
index 5eb21c80..ce75c4e3 100644
--- a/src/components/menu/buttons/ThemeToggle.tsx
+++ b/src/components/menu/buttons/ThemeToggle.tsx
@@ -1,26 +1,27 @@
 import React from 'react';
 
+import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
+import { Button } from '@components/generic/Button';
+import { setDarkModeEnabled } from '@core/slices/appSlice';
 import { MoonIcon, SunIcon } from '@heroicons/react/outline';
 
-import { setDarkModeEnabled } from '../../../core/slices/appSlice';
-import { useAppDispatch, useAppSelector } from '../../../hooks/redux';
-import { IconButton } from '../../generic/IconButton';
-
 export const ThemeToggle = (): JSX.Element => {
   const dispatch = useAppDispatch();
   const darkMode = useAppSelector((state) => state.app.darkMode);
 
   return (
-    <IconButton
-      onClick={() => {
+    <Button
+      icon={
+        darkMode ? (
+          <SunIcon className="w-5 h-5" />
+        ) : (
+          <MoonIcon className="w-5 h-5" />
+        )
+      }
+      circle
+      onClick={(): void => {
         dispatch(setDarkModeEnabled(!darkMode));
       }}
-    >
-      {darkMode ? (
-        <SunIcon className="h-6 w-6" />
-      ) : (
-        <MoonIcon className="h-6 w-6" />
-      )}
-    </IconButton>
+    />
   );
 };
diff --git a/src/components/nodes/NodeDetails.tsx b/src/components/nodes/NodeDetails.tsx
deleted file mode 100644
index 50c17012..00000000
--- a/src/components/nodes/NodeDetails.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-
-import { useForm } from 'react-hook-form';
-
-import { XCircleIcon } from '@heroicons/react/outline';
-import type { Protobuf } from '@meshtastic/meshtasticjs';
-
-import { connection } from '../../core/connection';
-
-export interface NodeProps {
-  node: Protobuf.NodeInfo;
-  onClose: () => void;
-}
-
-export const NodeDetails = ({ node }: NodeProps): JSX.Element => {
-  const { register, handleSubmit } = useForm<Protobuf.User>({
-    defaultValues: node.user,
-  });
-
-  const onSubmit = handleSubmit((data) => {
-    console.log(data);
-    connection.setOwner(data);
-  });
-
-  return (
-    <div>
-      <div className="flex dark:bg-primaryDark p-2 rounded-t-md justify-between border-b dark:border-gray-600 dark:text-white">
-        <div>{node.user?.longName ?? node.num}</div>
-        <XCircleIcon className="h-5 w-5 dark:text-white my-auto" />
-      </div>
-      <div>
-        <form onSubmit={onSubmit}>
-          {/* <Input label="Node Name" {...register('longName', {})} /> */}
-          <button
-            type="submit"
-            className="w-full rounded-md dark:bg-primaryDark shadow-md border dark:border-gray-600 p-2 mt-6 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
-          >
-            Save
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-};
diff --git a/src/components/templates/PrimaryTemplate.tsx b/src/components/templates/PrimaryTemplate.tsx
index 86ecdfd5..1179a11e 100644
--- a/src/components/templates/PrimaryTemplate.tsx
+++ b/src/components/templates/PrimaryTemplate.tsx
@@ -4,16 +4,21 @@ export interface PrimaryTemplateProps {
   children: React.ReactNode;
   title: string;
   tagline: string;
+  button?: JSX.Element;
+  footer?: JSX.Element;
 }
 
 export const PrimaryTemplate = ({
   children,
   title,
   tagline,
+  button,
+  footer,
 }: PrimaryTemplateProps): JSX.Element => {
   return (
     <div className="flex flex-col flex-auto min-w-0">
-      <div className="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b dark:border-gray-600  bg-white dark:bg-secondaryDark">
+      <div className="flex p-6 bg-white border-b md:flex-row flex-0 md:items-center md:justify-between md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
+        {button && <div className="pr-2 m-auto md:hidden">{button}</div>}
         <div className="flex-1 min-w-0">
           <div className="flex flex-wrap items-center font-medium">
             <div>
@@ -21,13 +26,20 @@ export const PrimaryTemplate = ({
             </div>
           </div>
           <div className="mt-2">
-            <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate dark:text-white">
+            <h2 className="text-3xl font-extrabold leading-7 tracking-tight truncate md:text-4xl md:leading-10 dark:text-white">
               {title}
             </h2>
           </div>
         </div>
       </div>
-      <div className="flex-auto p-6 sm:p-10 ">{children}</div>
+      <div className="flex-auto flex-grow p-6 md:p-10">{children}</div>
+
+      {footer && (
+        <div className="flex p-6 bg-white border-t md:flex-row flex-0 md:items-center md:justify-between md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
+          {button && <div className="pr-2 m-auto md:hidden">{button}</div>}
+          <div className="flex-1 min-w-0">{footer}</div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/core/theme.ts b/src/core/theme.ts
deleted file mode 100644
index faa3797f..00000000
--- a/src/core/theme.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { Theme } from '@material-ui/core';
-import { createTheme } from '@material-ui/core/styles';
-
-export const theme = (darkMode: boolean): Theme => {
-  return createTheme(
-    darkMode
-      ? {
-          palette: {
-            mode: 'dark',
-            primary: {
-              main: '#67ea94',
-            },
-            background: {
-              default: '#0F172A',
-              paper: '#0F172A',
-            },
-          },
-        }
-      : {
-          palette: {
-            mode: 'light',
-            primary: {
-              main: '#67ea94',
-            },
-          },
-        },
-  );
-};
diff --git a/src/core/translation.ts b/src/core/translation.ts
index cd99a95c..10f0dc7f 100644
--- a/src/core/translation.ts
+++ b/src/core/translation.ts
@@ -6,7 +6,7 @@ import { en } from '../translations/en';
 import { jp } from '../translations/jp';
 import { pt } from '../translations/pt';
 
-i18n
+void i18n
   .use(detector)
   .use(initReactI18next)
   .init({
diff --git a/src/hooks/breakpoint.ts b/src/hooks/breakpoint.ts
new file mode 100644
index 00000000..eccfc39f
--- /dev/null
+++ b/src/hooks/breakpoint.ts
@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import useBreakpointHook from 'use-breakpoint';
+
+const BREAKPOINTS = {
+  sm: 640,
+  // => @media (min-width: 640px) { ... }
+
+  md: 768,
+  // => @media (min-width: 768px) { ... }
+
+  lg: 1024,
+  // => @media (min-width: 1024px) { ... }
+
+  xl: 1280,
+  // => @media (min-width: 1280px) { ... }
+
+  '2xl': 1536,
+  // => @media (min-width: 1536px) { ... }
+};
+export const useBreakpoint = () => useBreakpointHook(BREAKPOINTS);
diff --git a/src/hooks/redux.ts b/src/hooks/redux.ts
index 1579525b..404c34cf 100644
--- a/src/hooks/redux.ts
+++ b/src/hooks/redux.ts
@@ -1,7 +1,9 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import type { TypedUseSelectorHook } from 'react-redux';
 import { useDispatch, useSelector } from 'react-redux';
 
-import type { AppDispatch, RootState } from '../core/store';
+import type { AppDispatch, RootState } from '@core/store';
 
 export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/src/index.tsx b/src/index.tsx
index 50fd75c0..83435f8f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,14 +1,15 @@
-import './index.css';
-import './core/translation';
+import '@app/index.css';
+import '@core/translation';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { Provider } from 'react-redux';
 
+import { RouteProvider } from '@core/router';
+import { store } from '@core/store';
+
 import App from './App';
-import { RouteProvider } from './core/router';
-import { store } from './core/store';
 
 ReactDOM.render(
   <React.StrictMode>
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 8b48c746..be8b2f82 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
 
-import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
-import { TestForm } from '../components/TestForm';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
 
 export const About = (): JSX.Element => {
   return (
     <PrimaryTemplate title="meshtastic-web" tagline="About">
       <p>Content</p>
-      <TestForm />
     </PrimaryTemplate>
   );
 };
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index faffa10a..c038dd0a 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
+import { Message } from '@components/chat/Message';
+import { MessageBar } from '@components/chat/MessageBar';
+import { Button } from '@components/generic/Button';
 import { HashtagIcon, MapIcon, UsersIcon } from '@heroicons/react/outline';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
-import { Message } from '../components/chat/Message';
-import { MessageBar } from '../components/chat/MessageBar';
-import { IconButton } from '../components/generic/IconButton';
 import { useAppSelector } from '../hooks/redux';
 
 export const Messages = (): JSX.Element => {
@@ -13,7 +13,7 @@ export const Messages = (): JSX.Element => {
   const nodes = useAppSelector((state) => state.meshtastic.nodes);
   const channels = useAppSelector((state) => state.meshtastic.channels);
 
-  const channelName = () => {
+  const channelName = (): string => {
     const name =
       channels.find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)
         ?.settings?.name ?? 'Unknown';
@@ -23,21 +23,18 @@ export const Messages = (): JSX.Element => {
 
   return (
     <div className="flex flex-col w-full">
-      <div className="flex justify-between w-full border-b dark:border-gray-600 dark:text-gray-300 px-2">
+      <div className="flex justify-between w-full px-2 border-b dark:border-gray-600 dark:text-gray-300">
         <div className="flex my-auto text-sm">
-          <HashtagIcon className="h-4 w-4 my-auto" />
+          <HashtagIcon className="w-4 h-4 my-auto" />
           {channelName()}
         </div>
         <div className="flex">
-          <IconButton>
-            <MapIcon className="w-6 h-6" />
-          </IconButton>
-          <IconButton>
-            <UsersIcon className="w-6 h-6" />
-          </IconButton>
+          <Button icon={<MapIcon className="w-5 h-5" />} circle />
+
+          <Button icon={<UsersIcon className="w-5 h-5" />} circle />
         </div>
       </div>
-      <div className="flex flex-col p-6 sm:py-8 sm:px-10 border-b dark:border-gray-600 bg-white dark:bg-secondaryDark flex-grow overflow-y-auto space-y-2">
+      <div className="flex flex-col flex-grow p-6 space-y-2 overflow-y-auto bg-white border-b md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
         {messages.map((message, index) => (
           <Message
             key={index}
@@ -56,6 +53,3 @@ export const Messages = (): JSX.Element => {
     </div>
   );
 };
-<IconButton>
-  <UsersIcon className="w-6 h-6" />
-</IconButton>;
diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx
deleted file mode 100644
index f9f12a0d..00000000
--- a/src/pages/Nodes.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-
-import type { Protobuf } from '@meshtastic/meshtasticjs';
-
-import { Node } from '../components/nodes/Node';
-import { NodeDetails } from '../components/nodes/NodeDetails';
-import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
-import { useAppSelector } from '../hooks/redux';
-
-export const Nodes = (): JSX.Element => {
-  const nodes = useAppSelector((state) => state.meshtastic.nodes);
-  const [currentNode, setCurrentNode] = React.useState<
-    Protobuf.NodeInfo | undefined
-  >();
-
-  return (
-    <PrimaryTemplate title="Administration" tagline="Node">
-      <div className="flex w-full space-x-5">
-        <div className="w-1/3">
-          {nodes.map((node) => (
-            <Node
-              key={node.num}
-              node={node}
-              onClick={() => {
-                setCurrentNode(node);
-              }}
-            />
-          ))}
-        </div>
-        <div className="w-2/3">
-          {currentNode ? (
-            <NodeDetails
-              onClose={() => {
-                setCurrentNode(undefined);
-              }}
-              node={currentNode}
-            />
-          ) : (
-            <div>Node not selected</div>
-          )}
-        </div>
-      </div>
-    </PrimaryTemplate>
-  );
-};
diff --git a/src/pages/Nodes/Index.tsx b/src/pages/Nodes/Index.tsx
new file mode 100644
index 00000000..6dbea95d
--- /dev/null
+++ b/src/pages/Nodes/Index.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import Avatar from 'boring-avatars';
+
+import { useBreakpoint } from '@app/hooks/breakpoint';
+import { useAppSelector } from '@app/hooks/redux';
+import { Button } from '@components/generic/Button';
+import { Drawer } from '@components/generic/Drawer';
+import { SidebarItem } from '@components/generic/SidebarItem';
+import { Tab } from '@headlessui/react';
+import { XCircleIcon } from '@heroicons/react/outline';
+
+import { Node } from './Node';
+
+export const Nodes = (): JSX.Element => {
+  const [navOpen, setNavOpen] = React.useState(false);
+
+  const { breakpoint } = useBreakpoint();
+
+  const nodes = useAppSelector((state) => state.meshtastic.nodes);
+
+  return (
+    <Tab.Group>
+      <div className="relative flex w-full dark:text-white">
+        <Drawer
+          open={breakpoint === 'sm' ? navOpen : true}
+          permenant={breakpoint !== 'sm'}
+          onClose={(): void => {
+            setNavOpen(!navOpen);
+          }}
+        >
+          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
+            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
+              <div className="text-4xl font-extrabold leading-none tracking-tight">
+                Nodes
+              </div>
+              <div className="md:hidden">
+                <Button
+                  icon={<XCircleIcon className="w-5 h-5" />}
+                  circle
+                  onClick={(): void => {
+                    setNavOpen(false);
+                  }}
+                />
+              </div>
+            </div>
+
+            {nodes.map((node) => (
+              <Tab
+                onClick={(): void => {
+                  setNavOpen(false);
+                }}
+                key={node.num}
+              >
+                {({ selected }): JSX.Element => (
+                  <SidebarItem
+                    title={node.user?.longName ?? node.num.toString()}
+                    description="Node info"
+                    selected={selected}
+                    icon={
+                      <Avatar
+                        size={30}
+                        name={node.user?.longName ?? node.num.toString()}
+                        variant="beam"
+                        colors={[
+                          '#213435',
+                          '#46685B',
+                          '#648A64',
+                          '#A6B985',
+                          '#E1E3AC',
+                        ]}
+                      />
+                    }
+                  />
+                )}
+              </Tab>
+            ))}
+          </Tab.List>
+        </Drawer>
+        <div className="w-full">
+          <Tab.Panels>
+            {nodes.map((node) => (
+              <Tab.Panel key={node.num}>
+                <Node navOpen={navOpen} setNavOpen={setNavOpen} node={node} />
+              </Tab.Panel>
+            ))}
+          </Tab.Panels>
+        </div>
+      </div>
+    </Tab.Group>
+  );
+};
diff --git a/src/pages/Nodes/Node.tsx b/src/pages/Nodes/Node.tsx
new file mode 100644
index 00000000..0e7371c1
--- /dev/null
+++ b/src/pages/Nodes/Node.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Button } from '@components/generic/Button';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon } from '@heroicons/react/outline';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+export interface NodeProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  node: Protobuf.NodeInfo;
+}
+
+export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
+  return (
+    <PrimaryTemplate
+      title={node.user?.longName ?? node.num.toString()}
+      tagline="Node"
+      button={
+        <Button
+          icon={<MenuIcon className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen(!navOpen);
+          }}
+          circle
+        />
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">Content</div>
+    </PrimaryTemplate>
+  );
+};
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
deleted file mode 100644
index f70a0e21..00000000
--- a/src/pages/Settings.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import React from 'react';
-
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-
-import { Protobuf } from '@meshtastic/meshtasticjs';
-
-import { Input } from '../components/form/Input';
-import { Select } from '../components/form/Select';
-import { Switch } from '../components/form/Switch';
-import { PrimaryTemplate } from '../components/templates/PrimaryTemplate';
-import { connection } from '../core/connection';
-import {
-  setHostOverride,
-  setHostOverrideEnabled,
-} from '../core/slices/meshtasticSlice';
-import { useAppDispatch, useAppSelector } from '../hooks/redux';
-
-export const Settings = (): JSX.Element => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-
-  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
-  const hostOverride = useAppSelector((state) => state.meshtastic.hostOverride);
-  const hostOverrideEnabled = useAppSelector(
-    (state) => state.meshtastic.hostOverrideEnabled,
-  );
-
-  const { register, handleSubmit, control } =
-    useForm<Protobuf.RadioConfig_UserPreferences>({
-      defaultValues: radioConfig,
-    });
-
-  const onSubmit = handleSubmit((data) => {
-    console.log(data);
-    connection.setPreferences(data);
-  });
-
-  const [localHostOverride, setLocalHostOverride] =
-    React.useState(hostOverride);
-  const [localHostOverrideEnabled, setLocalHostOverrideEnabled] =
-    React.useState(hostOverrideEnabled);
-
-  return (
-    <PrimaryTemplate title="Settings" tagline="Device">
-      <form onSubmit={onSubmit}>
-        <div className="space-y-4">
-          <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
-            <div className="w-1/3 text-lg">WiFi</div>
-            <div className="space-y-2 w-full max-w-xs">
-              <Input
-                label={t('strings.wifi_ssid')}
-                {...register('wifiSsid', {})}
-                type="text"
-                valid={true}
-              />
-              <Input
-                label={t('strings.wifi_psk')}
-                {...register('wifiPassword', {})}
-                type="password"
-                valid={true}
-              />
-            </div>
-          </div>
-          <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
-            <div className="w-1/3 text-lg">Node</div>
-            <div className="space-y-2 w-full max-w-xs">
-              <Switch
-                name={'isRouter'}
-                control={control}
-                label={'Is Router Node?'}
-              />
-
-              <Switch
-                name={'isLowPower'}
-                control={control}
-                label={'Is Low Power?'}
-              />
-
-              <Switch
-                name={'fixedPosition'}
-                control={control}
-                label={'Has Fixed Position?'}
-              />
-
-              <Switch
-                name={'serialDisabled'}
-                control={control}
-                label={'Is Serial Disabled?'}
-              />
-
-              <Switch
-                name={'mqttDisabled'}
-                control={control}
-                label={'Is MQTT Disabled?'}
-              />
-
-              <Switch
-                name={'debugLogEnabled'}
-                control={control}
-                label={'Is Debug Log Enabled?'}
-              />
-
-              <Select
-                name={'region'}
-                control={control}
-                label="Region"
-                options={(() => {
-                  return Object.keys(Protobuf.RegionCode)
-                    .filter((value) => isNaN(Number(value)) === false)
-                    .map((key) => {
-                      return {
-                        value: key,
-                        label: Protobuf.RegionCode[parseInt(key)],
-                      };
-                    });
-                })()}
-              />
-            </div>
-          </div>
-          <div className="flex pb-2 dark:text-white border-b dark:border-gray-600">
-            <div className="w-1/3 text-lg">Client</div>
-            <div className="space-y-2 w-full max-w-xs">
-              {/* <Toggle
-                label={'Enable host override'}
-                checked={localHostOverrideEnabled}
-                onChange={(event) => {
-                  console.log(event.target.checked);
-                  setLocalHostOverrideEnabled(event.target.checked);
-                }}
-              /> */}
-              <Input
-                label={'Host override'}
-                placeholder={'meshtastic.local'}
-                value={localHostOverride}
-                onChange={(event) => {
-                  setLocalHostOverride(event.target.value);
-                }}
-                type="text"
-                valid={true}
-                disabled={!localHostOverrideEnabled}
-              />
-            </div>
-          </div>
-        </div>
-
-        <button
-          type="submit"
-          onClick={() => {
-            dispatch(setHostOverride(localHostOverride));
-            dispatch(setHostOverrideEnabled(localHostOverrideEnabled));
-          }}
-          className="w-full rounded-md dark:bg-primaryDark shadow-md border dark:border-gray-600 p-2 mt-6 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
-        >
-          {t('strings.save_changes')}
-        </button>
-      </form>
-    </PrimaryTemplate>
-  );
-};
diff --git a/src/pages/settings/Device.tsx b/src/pages/settings/Device.tsx
new file mode 100644
index 00000000..d7f261a5
--- /dev/null
+++ b/src/pages/settings/Device.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { connection } from '@app/core/connection';
+import { useAppSelector } from '@app/hooks/redux';
+import { Button } from '@components/generic/Button';
+import { Input } from '@components/generic/Input';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+import type { Protobuf } from '@meshtastic/meshtasticjs';
+
+export interface DeviceProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
+  const { t } = useTranslation();
+  const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
+
+  const { register, handleSubmit, formState } =
+    useForm<Protobuf.RadioConfig_UserPreferences>({
+      defaultValues: radioConfig,
+    });
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setPreferences(data);
+  });
+
+  return (
+    <PrimaryTemplate
+      title="Device"
+      tagline="Settings"
+      button={
+        <Button
+          icon={<MenuIcon className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen(!navOpen);
+          }}
+          circle
+        />
+      }
+      footer={
+        <Button
+          className="px-10 ml-auto"
+          icon={<SaveIcon className="w-5 h-5" />}
+          disabled={!formState.isDirty}
+          active
+          border
+        >
+          {t('strings.save_changes')}
+        </Button>
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
+        <form onSubmit={onSubmit}>
+          <Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
+          <Input
+            type="password"
+            label={t('strings.wifi_psk')}
+            {...register('wifiPassword')}
+          />
+        </form>
+      </div>
+    </PrimaryTemplate>
+  );
+};
diff --git a/src/pages/settings/Index.tsx b/src/pages/settings/Index.tsx
new file mode 100644
index 00000000..3c5fdc01
--- /dev/null
+++ b/src/pages/settings/Index.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { useBreakpoint } from '@app/hooks/breakpoint';
+import { Button } from '@components/generic/Button';
+import { Drawer } from '@components/generic/Drawer';
+import { SidebarItem } from '@components/generic/SidebarItem';
+import { Tab } from '@headlessui/react';
+import {
+  CollectionIcon,
+  DeviceMobileIcon,
+  WifiIcon,
+  XCircleIcon,
+} from '@heroicons/react/outline';
+
+import { Device } from './Device';
+import { Interface } from './Interface';
+import { Radio } from './Radio';
+
+export const Settings = (): JSX.Element => {
+  const [navOpen, setNavOpen] = React.useState(false);
+
+  const { breakpoint } = useBreakpoint();
+
+  return (
+    <Tab.Group>
+      <div className="relative flex w-full dark:text-white">
+        <Drawer
+          open={breakpoint === 'sm' ? navOpen : true}
+          permenant={breakpoint !== 'sm'}
+          onClose={(): void => {
+            setNavOpen(!navOpen);
+          }}
+        >
+          <Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
+            <div className="flex items-center justify-between m-8 mr-6 md:my-10">
+              <div className="text-4xl font-extrabold leading-none tracking-tight">
+                Settings
+              </div>
+              <div className="md:hidden">
+                <Button
+                  icon={<XCircleIcon className="w-5 h-5" />}
+                  circle
+                  onClick={(): void => {
+                    setNavOpen(false);
+                  }}
+                />
+              </div>
+            </div>
+            <Tab
+              onClick={(): void => {
+                setNavOpen(false);
+              }}
+            >
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Device"
+                  description="Device settings, such as device name and wifi settings"
+                  selected={selected}
+                  icon={<DeviceMobileIcon className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
+            <Tab>
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Radio"
+                  description="Adjust radio power and frequency settings"
+                  selected={selected}
+                  icon={<WifiIcon className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
+            <Tab>
+              {({ selected }): JSX.Element => (
+                <SidebarItem
+                  title="Interface"
+                  description="Change language and other UI settings"
+                  selected={selected}
+                  icon={<CollectionIcon className="flex-shrink-0 w-6 h-6" />}
+                />
+              )}
+            </Tab>
+          </Tab.List>
+        </Drawer>
+        <div className="flex w-full">
+          <Tab.Panels className="flex w-full">
+            <Tab.Panel className="flex w-full">
+              <Device navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
+            <Tab.Panel className="flex w-full">
+              <Radio navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
+            <Tab.Panel className="flex w-full">
+              <Interface navOpen={navOpen} setNavOpen={setNavOpen} />
+            </Tab.Panel>
+          </Tab.Panels>
+        </div>
+      </div>
+    </Tab.Group>
+  );
+};
diff --git a/src/pages/settings/Interface.tsx b/src/pages/settings/Interface.tsx
new file mode 100644
index 00000000..9c093fab
--- /dev/null
+++ b/src/pages/settings/Interface.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { Jp, Pt, Us } from 'react-flags-select';
+import { useTranslation } from 'react-i18next';
+
+import { Select } from '@app/components/generic/Select';
+import i18n from '@app/core/translation';
+import { Button } from '@components/generic/Button';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+
+export interface InterfaceProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Interface = ({
+  navOpen,
+  setNavOpen,
+}: InterfaceProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <PrimaryTemplate
+      title="Interface"
+      tagline="Settings"
+      button={
+        <Button
+          icon={<MenuIcon className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen(!navOpen);
+          }}
+          circle
+        />
+      }
+      footer={
+        <Button
+          className="px-10 ml-auto"
+          icon={<SaveIcon className="w-5 h-5" />}
+          active
+          border
+        >
+          {t('strings.save_changes')}
+        </Button>
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
+        <Select
+          label="Language"
+          value={i18n.language}
+          onChange={(value): void => {
+            void i18n.changeLanguage(value);
+          }}
+          id="aaa"
+          options={[
+            {
+              name: 'English',
+              value: 'en',
+              icon: <Us className="w-6" />,
+            },
+            {
+              name: 'Português',
+              value: 'pt',
+              icon: <Pt className="w-6" />,
+            },
+            {
+              name: 'Japanese',
+              value: 'jp',
+              icon: <Jp className="w-6" />,
+            },
+          ]}
+        />
+      </div>
+    </PrimaryTemplate>
+  );
+};
diff --git a/src/pages/settings/Radio.tsx b/src/pages/settings/Radio.tsx
new file mode 100644
index 00000000..a0e2e961
--- /dev/null
+++ b/src/pages/settings/Radio.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@components/generic/Button';
+import { Input } from '@components/generic/Input';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
+
+export interface RadioProps {
+  navOpen: boolean;
+  setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <PrimaryTemplate
+      title="Radio"
+      tagline="Settings"
+      button={
+        <Button
+          icon={<MenuIcon className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen(!navOpen);
+          }}
+          circle
+        />
+      }
+      footer={
+        <Button
+          className="px-10 ml-auto"
+          icon={<SaveIcon className="w-5 h-5" />}
+          active
+          border
+        >
+          {t('strings.save_changes')}
+        </Button>
+      }
+    >
+      <div className="w-full max-w-3xl space-y-2 md:max-w-xl">
+        <Input label="test" />
+      </div>
+    </PrimaryTemplate>
+  );
+};
diff --git a/tsconfig.json b/tsconfig.json
index 47ad03e7..99909538 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,10 +12,17 @@
       // Add this line to get types for streaming imports (packageOptions.source="remote"):
       //     "*": [".snowpack/types/*"]
       // More info: https://www.snowpack.dev/guides/streaming-imports
+      "@app/*": ["./src/*"],
+      "@pages/*": ["./src/pages/*"],
+      "@components/*": ["./src/components/*"],
+      "@core/*": ["./src/core/*"],
+      "@static/*": ["./src/static/*"]
     },
     /* noEmit - Snowpack builds (emits) files, not tsc. */
     "noEmit": true,
     /* Additional Options */
+    "importHelpers": true,
+    "removeComments": true,
     "strict": true,
     "strictNullChecks": true,
     "skipLibCheck": true,
diff --git a/yarn.lock b/yarn.lock
index 8edf7ef8..19093d79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -91,7 +91,7 @@
   dependencies:
     "@babel/types" "^7.15.0"
 
-"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.14.5":
+"@babel/helper-module-imports@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
   integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==
@@ -119,7 +119,7 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5":
+"@babel/helper-plugin-utils@^7.12.13":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
   integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
@@ -159,13 +159,13 @@
   integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
 
 "@babel/helpers@^7.14.8":
-  version "7.14.8"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.8.tgz#839f88f463025886cff7f85a35297007e2da1b77"
-  integrity sha512-ZRDmI56pnV+p1dH6d+UN6GINGz7Krps3+270qqI9UJ4wxYThfAIcI5i7j5vXC4FJ3Wap+S9qcebxeYiqn87DZw==
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.15.3.tgz#c96838b752b95dcd525b4e741ed40bb1dc2a1357"
+  integrity sha512-HwJiz52XaS96lX+28Tnbu31VeFSQJGOeKHJeaEPQlTl7PnlhFElWPj8tUXtqFIzeN86XxXoBr+WFAyK2PPVz6g==
   dependencies:
     "@babel/template" "^7.14.5"
-    "@babel/traverse" "^7.14.8"
-    "@babel/types" "^7.14.8"
+    "@babel/traverse" "^7.15.0"
+    "@babel/types" "^7.15.0"
 
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.14.5":
   version "7.14.5"
@@ -177,9 +177,9 @@
     js-tokens "^4.0.0"
 
 "@babel/parser@^7.14.5", "@babel/parser@^7.15.0":
-  version "7.15.2"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.2.tgz#08d4ffcf90d211bf77e7cc7154c6f02d468d2b1d"
-  integrity sha512-bMJXql1Ss8lFnvr11TZDH4ArtwlAS5NG9qBmdiFW2UHHm6MVoR+GDc5XE2b9K938cyjc9O6/+vjjcffLDtfuDg==
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.3.tgz#3416d9bea748052cfcb63dbcc27368105b1ed862"
+  integrity sha512-O0L6v/HvqbdJawj0iBEfVQMc3/6WP+AeOsovsIgBFyJaG+W2w7eqvZB7puddATmWuARlm1SX7DwxJ/JJUnDpEA==
 
 "@babel/plugin-syntax-class-properties@^7.10.0":
   version "7.12.13"
@@ -188,17 +188,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-syntax-jsx@^7.12.13":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
-  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
-"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.14.8"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
-  integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.7.6", "@babel/runtime@^7.9.2":
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
+  integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -211,7 +204,7 @@
     "@babel/parser" "^7.14.5"
     "@babel/types" "^7.14.5"
 
-"@babel/traverse@^7.14.8", "@babel/traverse@^7.15.0":
+"@babel/traverse@^7.15.0":
   version "7.15.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.0.tgz#4cca838fd1b2a03283c1f38e141f639d60b3fc98"
   integrity sha512-392d8BN0C9eVxVWd8H6x9WfipgVH5IaIoLp23334Sc1vbKKWINnvwRpb4us0xtPaCumlwbTtIYNA0Dv/32sVFw==
@@ -234,107 +227,6 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@emotion/babel-plugin@^11.3.0":
-  version "11.3.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
-  integrity sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/plugin-syntax-jsx" "^7.12.13"
-    "@babel/runtime" "^7.13.10"
-    "@emotion/hash" "^0.8.0"
-    "@emotion/memoize" "^0.7.5"
-    "@emotion/serialize" "^1.0.2"
-    babel-plugin-macros "^2.6.1"
-    convert-source-map "^1.5.0"
-    escape-string-regexp "^4.0.0"
-    find-root "^1.1.0"
-    source-map "^0.5.7"
-    stylis "^4.0.3"
-
-"@emotion/cache@^11.0.0", "@emotion/cache@^11.4.0":
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
-  integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
-  dependencies:
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/sheet" "^1.0.0"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    stylis "^4.0.3"
-
-"@emotion/hash@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
-
-"@emotion/is-prop-valid@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz#29ef6be1e946fb4739f9707def860f316f668cde"
-  integrity sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==
-  dependencies:
-    "@emotion/memoize" "^0.7.4"
-
-"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
-  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
-
-"@emotion/react@^11.1.1", "@emotion/react@^11.4.1":
-  version "11.4.1"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.1.tgz#a1b0b767b5bad57515ffb0cad9349614d27f4d57"
-  integrity sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/cache" "^11.4.0"
-    "@emotion/serialize" "^1.0.2"
-    "@emotion/sheet" "^1.0.2"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    hoist-non-react-statics "^3.3.1"
-
-"@emotion/serialize@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
-  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
-  dependencies:
-    "@emotion/hash" "^0.8.0"
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/unitless" "^0.7.5"
-    "@emotion/utils" "^1.0.0"
-    csstype "^3.0.2"
-
-"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.2.tgz#1d9ffde531714ba28e62dac6a996a8b1089719d0"
-  integrity sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw==
-
-"@emotion/styled@^11.3.0":
-  version "11.3.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.3.0.tgz#d63ee00537dfb6ff612e31b0e915c5cf9925a207"
-  integrity sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/babel-plugin" "^11.3.0"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/serialize" "^1.0.2"
-    "@emotion/utils" "^1.0.0"
-
-"@emotion/unitless@^0.7.5":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
-"@emotion/utils@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
-  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
-
-"@emotion/weak-memoize@^0.2.5":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
-  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
-
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -350,7 +242,7 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@headlessui/react@^1.3.0":
+"@headlessui/react@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.4.0.tgz#c6d424d8ab10ac925e4423d7f3cbab02c30d736a"
   integrity sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw==
@@ -374,85 +266,6 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
-"@material-ui/core@^5.0.0-beta.3":
-  version "5.0.0-beta.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-5.0.0-beta.3.tgz#5b461df6024133622d73b784e82d35a5ff84d962"
-  integrity sha512-yIa6aQcjO+R+iRbCveYhis4uEsl0YQqOxKcJDsb1q9NxdOPSrS26UvxSVfSxO6nYhs8HknL5rlplwSyyPZkwRw==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/system" "5.0.0-beta.3"
-    "@material-ui/types" "6.0.2"
-    "@material-ui/unstyled" "5.0.0-alpha.42"
-    "@material-ui/utils" "5.0.0-beta.1"
-    "@popperjs/core" "^2.4.4"
-    "@types/react-transition-group" "^4.2.0"
-    clsx "^1.0.4"
-    csstype "^3.0.2"
-    hoist-non-react-statics "^3.3.2"
-    prop-types "^15.7.2"
-    react-is "^17.0.0"
-    react-transition-group "^4.4.0"
-
-"@material-ui/private-theming@5.0.0-beta.2":
-  version "5.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/private-theming/-/private-theming-5.0.0-beta.2.tgz#eefd95f25865a8bf7ec8987f2c7fd194f4168f5c"
-  integrity sha512-qLlUeRdiLCT57sgVWprtPPENU4ZSVlUK6C/aERzlgu+oN7VdKzkz9r07K7bcUau/wHXusP+u1UKNp6TpPr2XVg==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "5.0.0-beta.1"
-    prop-types "^15.7.2"
-
-"@material-ui/styled-engine@5.0.0-beta.1":
-  version "5.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/styled-engine/-/styled-engine-5.0.0-beta.1.tgz#27e257c1bbe58abdce8073332fc3c10e8449db27"
-  integrity sha512-BSVsgVQ1cv+Eaf2FFhVahaEw7UeBaLBn0yAM8uWbLxi+LhuNN+HVv/Echv70MDMLW4fna3L2S6u1NXUoGd+7Hw==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/cache" "^11.0.0"
-    prop-types "^15.7.2"
-
-"@material-ui/system@5.0.0-beta.3":
-  version "5.0.0-beta.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-5.0.0-beta.3.tgz#b106e152a3c92de08ee3faa30bac027a8f5a13d5"
-  integrity sha512-gch4yt38XUe+WO2+4uomIMRTCK6bfmnTjCrGkYgkb4FuH0Ubk07ZHCSXdY+bmmCaHzwceCfEm9wa7BkM+tNbZQ==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/private-theming" "5.0.0-beta.2"
-    "@material-ui/styled-engine" "5.0.0-beta.1"
-    "@material-ui/types" "6.0.2"
-    "@material-ui/utils" "5.0.0-beta.1"
-    clsx "^1.0.4"
-    csstype "^3.0.2"
-    prop-types "^15.7.2"
-
-"@material-ui/types@6.0.2":
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-6.0.2.tgz#a6d384196c6e2e130eb2765b62d944c0b1ea1015"
-  integrity sha512-/XUca4wUb9pWimLLdM1PE8KS8rTbDEGohSGkGtk3WST7lm23m+8RYv9uOmrvOg/VSsl4bMiOv4t2/LCb+RLbTg==
-
-"@material-ui/unstyled@5.0.0-alpha.42":
-  version "5.0.0-alpha.42"
-  resolved "https://registry.yarnpkg.com/@material-ui/unstyled/-/unstyled-5.0.0-alpha.42.tgz#e230266036bd54a41ce7140687b7b070413bae55"
-  integrity sha512-vwzb4kQbkpntBGE4EQcbnk6eitjPIDM3176WY/Ea7l4o/b95NTVsPlDvIntyRr+lcxkGtJCD7X5rUCZug6aoHw==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@material-ui/utils" "5.0.0-beta.1"
-    clsx "^1.0.4"
-    prop-types "^15.7.2"
-    react-is "^17.0.0"
-
-"@material-ui/utils@5.0.0-beta.1":
-  version "5.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-5.0.0-beta.1.tgz#ed8fa3f9143feb051b894215b6cf3d69c71fe571"
-  integrity sha512-63E5b1iW79T6dga7Ao1turX4s5P8jipCMVw1tDjKHMiauILb8C6TmUPde+NoM+fQ6OTppC9JxdOXzuotxNRWNA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@types/prop-types" "^15.7.3"
-    "@types/react-is" "^16.7.1 || ^17.0.0"
-    prop-types "^15.7.2"
-    react-is "^17.0.0"
-
 "@meshtastic/meshtasticjs@^0.6.16":
   version "0.6.16"
   resolved "https://registry.yarnpkg.com/@meshtastic/meshtasticjs/-/meshtasticjs-0.6.16.tgz#aa2fe3808af90b4c4aa43d2e2223dbf420977c65"
@@ -483,9 +296,9 @@
     fastq "^1.6.0"
 
 "@npmcli/arborist@^2.6.4":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@npmcli/arborist/-/arborist-2.8.0.tgz#ff078287eba44595383eb58ad8aa8540bc8aae9e"
-  integrity sha512-R9rTyak1rGdmVTyiU14dgBb+qMllY3B6I8hp7FB4xXsU9dJDrYZJR8I+191CMo5Y1941jTDCtNcXXW9TldPEFQ==
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/@npmcli/arborist/-/arborist-2.8.1.tgz#ee7e9128e48aba735d45d2184542dfbefd4346ff"
+  integrity sha512-kbBWllN4CcdeN032Rw6b+TIsyoxWcv4YNN5gzkMCe8cCu0llwlq5P7uAD2oyL24QdmGlrlg/Yp0L1JF+HD8g9Q==
   dependencies:
     "@npmcli/installed-package-contents" "^1.0.7"
     "@npmcli/map-workspaces" "^1.0.2"
@@ -543,9 +356,9 @@
     npm-normalize-package-bin "^1.0.1"
 
 "@npmcli/map-workspaces@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@npmcli/map-workspaces/-/map-workspaces-1.0.3.tgz#6072a0794762cf8f572e6080fa66d1bbefa991d5"
-  integrity sha512-SdlRlOoQw4WKD4vtb/n5gUkobEABYBEOo8fRE4L8CtBkyWDSvIrReTfKvQ/Jc/LQqDaaZ5iv1iMSQzKCUr1n1A==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@npmcli/map-workspaces/-/map-workspaces-1.0.4.tgz#915708b55afa25e20bc2c14a766c124c2c5d4cab"
+  integrity sha512-wVR8QxhyXsFcD/cORtJwGQodeeaDf0OxcHie8ema4VgFeqwYkFsDPnSrIRSytX8xR6nKPAH89WnwTcaU608b/Q==
   dependencies:
     "@npmcli/name-from-folder" "^1.0.1"
     glob "^7.1.6"
@@ -604,11 +417,6 @@
     node-gyp "^7.1.0"
     read-package-json-fast "^2.0.1"
 
-"@popperjs/core@^2.4.4":
-  version "2.9.3"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.3.tgz#8b68da1ebd7fc603999cf6ebee34a4899a14b88e"
-  integrity sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ==
-
 "@protobuf-ts/runtime@^1.0.13":
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/@protobuf-ts/runtime/-/runtime-1.0.13.tgz#42d6d84ea6f0ded68d6642ab64ca49f7c17f6e71"
@@ -744,14 +552,6 @@
     "@types/node" "*"
     "@types/responselike" "*"
 
-"@types/eslint@^7.2.13":
-  version "7.28.0"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.28.0.tgz#7e41f2481d301c68e14f483fe10b017753ce8d5a"
-  integrity sha512-07XlgzX0YJUn4iG1ocY4IX9DzKSmMGUs6ESKlxWhZRaa0fatIWaHWUVapcuGa8r5HFnTqzj+4OCjd5f7EZ/i/A==
-  dependencies:
-    "@types/estree" "*"
-    "@types/json-schema" "*"
-
 "@types/estree@*":
   version "0.0.50"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
@@ -775,7 +575,7 @@
   resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz#0ea7b61496902b95890dc4c3a116b60cb8dae812"
   integrity sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==
 
-"@types/json-schema@*", "@types/json-schema@^7.0.7":
+"@types/json-schema@^7.0.7":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
@@ -788,16 +588,16 @@
     "@types/node" "*"
 
 "@types/node@*":
-  version "16.4.13"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.13.tgz#7dfd9c14661edc65cccd43a29eb454174642370d"
-  integrity sha512-bLL69sKtd25w7p1nvg9pigE4gtKVpGTPojBFLMkGHXuUgap2sLqQt2qUnqmVCDfzGUL0DRNZP+1prIZJbMeAXg==
+  version "16.6.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.6.1.tgz#aee62c7b966f55fc66c7b6dfa1d58db2a616da61"
+  integrity sha512-Sr7BhXEAer9xyGuCN3Ek9eg9xPviCF2gfu9kTfuU2HkTVAMYSDeX40fvpmo72n5nansg3nsBjuQBrsS28r+NUw==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/prop-types@*", "@types/prop-types@^15.7.3":
+"@types/prop-types@*":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
@@ -809,13 +609,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-is@^16.7.1 || ^17.0.0":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.2.tgz#abc4d910bff5b0bc6b3e1bec57575f6b63fd4e05"
-  integrity sha512-2+L0ilcAEG8udkDnvx8B0upwXFBbNnVwOsSCTxW3SDOkmar9NyEeLG0ZLa3uOEw9zyYf/fQapcnfXAVmDKlyHw==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-redux@^7.1.16":
   version "7.1.18"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.18.tgz#2bf8fd56ebaae679a90ebffe48ff73717c438e04"
@@ -826,17 +619,10 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.0":
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.2.tgz#38890fd9db68bf1f2252b99a942998dc7877c5b3"
-  integrity sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*", "@types/react@^17.0.13":
-  version "17.0.16"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.16.tgz#056f40c45645761527baeb7d89d842a6abdf285a"
-  integrity sha512-3kCUiOOlQTwUUvjNFkbBTWMTxdTGybz/PfjCw9JmaRGcEDBQh+nGMg7/E9P2rklhJuYVd25IYLNcvqgSPCPksg==
+  version "17.0.18"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.18.tgz#4109cbbd901be9582e5e39e3d77acd7b66bb7fbe"
+  integrity sha512-YTLgu7oS5zvSqq49X5Iue5oAbVGhgPc5Au29SJC4VeE17V6gASoOxVkUDy9pXFMRFxCWCD9fLeweNFizo3UzOg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -866,7 +652,7 @@
   resolved "https://registry.yarnpkg.com/@types/snowpack-env/-/snowpack-env-2.3.4.tgz#79073fd98a47a5f1ba83326b75cb433dc31a7c36"
   integrity sha512-zYzMb2aMyzXW5VgOQHy+FgI8N5tLFb+tIsUqk35CIgSr9pT4pji2GR8BCOTMdniusVuRHIp/DaYQNQGYGLVZHQ==
 
-"@typescript-eslint/eslint-plugin@^4.28.1":
+"@typescript-eslint/eslint-plugin@^4.28.0", "@typescript-eslint/eslint-plugin@^4.29.1":
   version "4.29.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.1.tgz#808d206e2278e809292b5de752a91105da85860b"
   integrity sha512-AHqIU+SqZZgBEiWOrtN94ldR3ZUABV5dUG94j8Nms9rQnHFc8fvDOue/58K4CFz6r8OtDDc35Pw9NQPWo0Ayrw==
@@ -891,7 +677,7 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/parser@^4.28.1":
+"@typescript-eslint/parser@^4.28.0", "@typescript-eslint/parser@^4.29.1":
   version "4.29.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.29.1.tgz#17dfbb45c9032ffa0fe15881d20fbc2a4bdeb02d"
   integrity sha512-3fL5iN20hzX3Q4OkG7QEPFjZV2qsVGiDhEwwh+EkmE/w7oteiOvUNzmpu5eSwGJX/anCryONltJ3WDmAzAoCMg==
@@ -935,6 +721,23 @@
     "@typescript-eslint/types" "4.29.1"
     eslint-visitor-keys "^2.0.0"
 
+"@verypossible/eslint-config@^1.6.0":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@verypossible/eslint-config/-/eslint-config-1.6.1.tgz#4360627af7e247890026abc5b0ead13c4d638294"
+  integrity sha512-3qf2FSag49zqI6rZlwKcF8RryLX0RJ3W+koJuhDhdQNyelSEeTxiijQ+Y/Xss4ILFzyqpBnzqiphmABGcOgj1Q==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "^4.28.0"
+    "@typescript-eslint/parser" "^4.28.0"
+    babel-plugin-module-resolver "^4.1.0"
+    eslint "^7.29.0"
+    eslint-config-prettier "^8.3.0"
+    eslint-import-resolver-babel-module "^5.3.1"
+    eslint-import-resolver-typescript "^2.4.0"
+    eslint-plugin-import "^2.23.4"
+    eslint-plugin-react "^7.24.0"
+    eslint-plugin-react-hooks "^4.2.0"
+    prettier "^2.3.2"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -964,11 +767,6 @@ acorn@^7.0.0, acorn@^7.4.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-add@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
-  integrity sha1-JI8Kn25aUo7yKV2+7DBTITCuIjU=
-
 address@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -1155,11 +953,6 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
 
-at-least-node@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
-  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
-
 autoprefixer@^10.2.6:
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.3.1.tgz#954214821d3aa06692406c6a0a9e9d401eafbed2"
@@ -1187,14 +980,16 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
-babel-plugin-macros@^2.6.1:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
-  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+babel-plugin-module-resolver@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.1.0.tgz#22a4f32f7441727ec1fbf4967b863e1e3e9f33e2"
+  integrity sha512-MlX10UDheRr3lb3P0WcaIdtCSRlxdQsB1sBqL7W0raF070bGl1HQQq5K3T2vf2XAYie+ww+5AKC/WrkjRO2knA==
   dependencies:
-    "@babel/runtime" "^7.7.2"
-    cosmiconfig "^6.0.0"
-    resolve "^1.12.0"
+    find-babel-config "^1.2.0"
+    glob "^7.1.6"
+    pkg-up "^3.1.0"
+    reselect "^4.0.0"
+    resolve "^1.13.1"
 
 balanced-match@^1.0.0:
   version "1.0.2"
@@ -1365,9 +1160,9 @@ camelcase-css@^2.0.1:
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 caniuse-lite@^1.0.30001243, caniuse-lite@^1.0.30001248:
-  version "1.0.30001249"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001249.tgz#90a330057f8ff75bfe97a94d047d5e14fabb2ee8"
-  integrity sha512-vcX4U8lwVXPdqzPWi6cAJ3FnQaqXbBqy/GZseKNQzRj37J7qZdGcBtxq/QLFNLLlfsoXLUdHw8Iwenri86Tagw==
+  version "1.0.30001251"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001251.tgz#6853a606ec50893115db660f82c094d18f096d85"
+  integrity sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -1415,7 +1210,7 @@ cheerio@1.0.0-rc.10:
     parse5-htmlparser2-tree-adapter "^6.0.1"
     tslib "^2.2.0"
 
-chokidar@^3.3.0, chokidar@^3.4.0, chokidar@^3.5.2:
+chokidar@^3.4.0, chokidar@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
   integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
@@ -1455,15 +1250,6 @@ cli-spinners@^2.5.0:
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.6.0.tgz#36c7dc98fb6a9a76bd6238ec3f77e2425627e939"
   integrity sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==
 
-cliui@^7.0.2:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
-  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
-  dependencies:
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-    wrap-ansi "^7.0.0"
-
 clone-response@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
@@ -1471,11 +1257,6 @@ clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
-clsx@^1.0.4:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
-  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
-
 cmd-shim@^4.0.1:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd"
@@ -1528,10 +1309,10 @@ color@^3.2.0:
     color-convert "^1.9.3"
     color-string "^1.6.0"
 
-colorette@^1.2.1, colorette@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
-  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
+colorette@^1.2.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.3.0.tgz#ff45d2f0edb244069d3b772adeb04fed38d0a0af"
+  integrity sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==
 
 combined-stream@^1.0.6, combined-stream@~1.0.6:
   version "1.0.8"
@@ -1577,7 +1358,7 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
   integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
 
-convert-source-map@^1.5.0, convert-source-map@^1.7.0:
+convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -1589,17 +1370,6 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
-cosmiconfig@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
-  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.1.0"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.7.2"
-
 cosmiconfig@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
@@ -1768,11 +1538,6 @@ depd@^1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
-dependency-graph@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.9.0.tgz#11aed7e203bc8b00f48356d92db27b265c445318"
-  integrity sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==
-
 detect-port@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/detect-port/-/detect-port-1.3.0.tgz#d9c40e9accadd4df5cac6a782aefd014d573d1f1"
@@ -1829,14 +1594,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-helpers@^5.0.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-serializer@^1.0.1, dom-serializer@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
@@ -1886,9 +1643,9 @@ ecc-jsbn@~0.1.1:
     safer-buffer "^2.1.0"
 
 electron-to-chromium@^1.3.793:
-  version "1.3.800"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.800.tgz#8efbb11e88b0a072d5c0250e6249123d3a76cb9a"
-  integrity sha512-qagikPjZJSDWP85uWoxs32oK/xk/y3MhDZELfKRCWI7pBc0ZFlmjnXb+3+aNMaiqboeDJJa0v7CJd5cO1HKwEQ==
+  version "1.3.806"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.806.tgz#21502100f11aead6c501d1cd7f2504f16c936642"
+  integrity sha512-AH/otJLAAecgyrYp0XK1DPiGVWcOgwPeJBOLeuFQ5l//vhQhwC9u6d+GijClqJAmsHG4XDue81ndSQPohUu0xA==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -2050,6 +1807,14 @@ eslint-config-prettier@^8.3.0:
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
   integrity sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==
 
+eslint-import-resolver-babel-module@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-babel-module/-/eslint-import-resolver-babel-module-5.3.1.tgz#808a42f311a6c33d473f9f4c846d1d487d29eff4"
+  integrity sha512-WomQAkjO7lUNOdU3FG2zgNgylkoAVUmaw04bHgSpM9QrMWuOLLWa2qcP6CrsBd4VWuLRbUPyzrgBc9ZQIx9agw==
+  dependencies:
+    pkg-up "^3.1.0"
+    resolve "^1.20.0"
+
 eslint-import-resolver-node@^0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.5.tgz#939bbb0f74e179e757ca87f7a4a890dabed18ac4"
@@ -2058,6 +1823,17 @@ eslint-import-resolver-node@^0.3.5:
     debug "^3.2.7"
     resolve "^1.20.0"
 
+eslint-import-resolver-typescript@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.4.0.tgz#ec1e7063ebe807f0362a7320543aaed6fe1100e1"
+  integrity sha512-useJKURidCcldRLCNKWemr1fFQL1SzB3G4a0li6lFGvlc5xGe1hY343bvG07cbpCzPuM/lK19FIJB3XGFSkplA==
+  dependencies:
+    debug "^4.1.1"
+    glob "^7.1.6"
+    is-glob "^4.0.1"
+    resolve "^1.17.0"
+    tsconfig-paths "^3.9.0"
+
 eslint-module-utils@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.2.tgz#94e5540dd15fe1522e8ffa3ec8db3b7fa7e7a534"
@@ -2066,7 +1842,7 @@ eslint-module-utils@^2.6.2:
     debug "^3.2.7"
     pkg-dir "^2.0.0"
 
-eslint-plugin-import@^2.23.4:
+eslint-plugin-import@^2.23.4, eslint-plugin-import@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.24.0.tgz#697ffd263e24da5e84e03b282f5fb62251777177"
   integrity sha512-Kc6xqT9hiYi2cgybOc0I2vC9OgAYga5o/rAFinam/yF/t5uBqxQbauNPMC6fgb640T/89P0gFoO27FOilJ/Cqg==
@@ -2087,13 +1863,6 @@ eslint-plugin-import@^2.23.4:
     resolve "^1.20.0"
     tsconfig-paths "^3.9.0"
 
-eslint-plugin-prettier@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz#cdbad3bf1dbd2b177e9825737fe63b476a08f0c7"
-  integrity sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==
-  dependencies:
-    prettier-linter-helpers "^1.0.0"
-
 eslint-plugin-react-hooks@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
@@ -2149,7 +1918,7 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint@^7.29.0:
+eslint@^7.29.0, eslint@^7.32.0:
   version "7.32.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
   integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
@@ -2293,11 +2062,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-diff@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
-  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
-
 fast-glob@^3.1.1, fast-glob@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
@@ -2345,6 +2109,14 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+find-babel-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.2.0.tgz#a9b7b317eb5b9860cda9d54740a8c8337a2283a2"
+  integrity sha512-jB2CHJeqy6a820ssiqwrKMeyC6nNdmrcgkKWJWmpoxpE8RKciYJXCcXRq1h2AzCo5I5BJeN2tkGEO3hLTuePRA==
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-cache-dir@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
@@ -2354,11 +2126,6 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
-find-root@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
-  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-
 find-up@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -2366,6 +2133,13 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+  dependencies:
+    locate-path "^3.0.0"
+
 find-up@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -2428,16 +2202,6 @@ fs-extra@^10.0.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
-fs-extra@^9.0.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
-  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
-  dependencies:
-    at-least-node "^1.0.0"
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
 fs-minipass@^2.0.0, fs-minipass@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
@@ -2496,11 +2260,6 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-caller-file@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
-  integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-
 get-intrinsic@^1.0.1, get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
@@ -2510,11 +2269,6 @@ get-intrinsic@^1.0.1, get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-get-stdin@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
-  integrity sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==
-
 get-stream@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
@@ -2566,13 +2320,13 @@ globals@^11.1.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.6.0, globals@^13.9.0:
-  version "13.10.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.10.0.tgz#60ba56c3ac2ca845cfbf4faeca727ad9dd204676"
-  integrity sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g==
+  version "13.11.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.11.0.tgz#40ef678da117fe7bd2e28f1fab24951bd0255be7"
+  integrity sha512-08/xrJ7wQjK9kkkRoI3OFUBbLx4f+6x3SGwcPvQ0QH6goFDrOU2oyAWrmh3dJezu65buo+HBMzAMQy6rovVC3g==
   dependencies:
     type-fest "^0.20.2"
 
-globby@^11.0.0, globby@^11.0.3:
+globby@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
   integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
@@ -2668,13 +2422,13 @@ has@^1.0.3:
     function-bind "^1.1.1"
 
 history@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.0.0.tgz#0cabbb6c4bbf835addb874f8259f6d25101efd08"
-  integrity sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.0.1.tgz#de35025ed08bce0db62364b47ebbf9d97b5eb06a"
+  integrity sha512-5qC/tFUKfVci5kzgRxZxN5Mf1CV8NmJx9ByaPX0YTLx5Vz3Svh7NYp6eA4CpDq4iA9D0C1t8BNIfvQIrUI3mVw==
   dependencies:
     "@babel/runtime" "^7.7.6"
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -2779,9 +2533,9 @@ i18next-browser-languagedetector@^6.1.2:
     "@babel/runtime" "^7.14.6"
 
 i18next@^20.3.5:
-  version "20.3.5"
-  resolved "https://registry.yarnpkg.com/i18next/-/i18next-20.3.5.tgz#14308b79a3f1cafb24fdcd8e182d3673baf1e979"
-  integrity sha512-//MGeU6n4TencJmCgG+TCrpdgAD/NDEU/KfKQekYbJX6QV7sD/NjWQdVdBi+bkT0snegnSoB7QhjSeatrk3a0w==
+  version "20.4.0"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-20.4.0.tgz#6897229a7898e23f3c4885f10315c978b594d3b9"
+  integrity sha512-89iWWJudmaHJwzIdJ/1eu98GtsJnwBhOUWwlAre70itPMuTE/NTPtgVeaS1CGaB8Q3XrYBGpEqlq4jsScDx9kg==
   dependencies:
     "@babel/runtime" "^7.12.0"
 
@@ -2831,7 +2585,7 @@ import-cwd@^3.0.0:
   dependencies:
     import-from "^3.0.0"
 
-import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -2912,9 +2666,11 @@ is-arrayish@^0.3.1:
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
 is-bigint@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.3.tgz#fc9d9e364210480675653ddaea0518528d49a581"
-  integrity sha512-ZU538ajmYJmzysE5yU4Y7uIrPQ2j704u+hXFiIPQExpqzzUbpe5jCPdTfmz7jXRxZdvjY3KZ3ZNenoXQovX+Dg==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
 
 is-binary-path@~2.1.0:
   version "2.1.0"
@@ -3193,6 +2949,11 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -3311,6 +3072,14 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+locate-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
+  dependencies:
+    p-locate "^3.0.0"
+    path-exists "^3.0.0"
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -3335,41 +3104,11 @@ lodash.clonedeep@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
-lodash.difference@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.difference/-/lodash.difference-4.5.0.tgz#9ccb4e505d486b91651345772885a2df27fd017c"
-  integrity sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=
-
-lodash.forown@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.forown/-/lodash.forown-4.4.0.tgz#85115cf04f73ef966eced52511d3893cc46683af"
-  integrity sha1-hRFc8E9z75ZuztUlEdOJPMRmg68=
-
-lodash.get@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
-  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
-
-lodash.groupby@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/lodash.groupby/-/lodash.groupby-4.6.0.tgz#0b08a1dcf68397c397855c3239783832df7403d1"
-  integrity sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=
-
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.sortby@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
-  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
-
-lodash.toarray@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
-  integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
-
 lodash.topath@^4.5.2:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
@@ -3440,11 +3179,6 @@ make-fetch-happen@^9.0.1:
     socks-proxy-agent "^5.0.0"
     ssri "^8.0.0"
 
-memoize-one@^5.0.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
-  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -3604,9 +3338,9 @@ ms@^2.0.0, ms@^2.1.1:
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
 nanoid@^3.1.23:
-  version "3.1.23"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
-  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
+  version "3.1.25"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152"
+  integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -3619,11 +3353,11 @@ negotiator@^0.6.2:
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
 node-emoji@^1.8.1:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
-  integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
+  integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
   dependencies:
-    lodash.toarray "^4.4.0"
+    lodash "^4.17.21"
 
 node-gyp-build@^4.2.0:
   version "4.2.3"
@@ -3647,9 +3381,9 @@ node-gyp@^7.1.0:
     which "^2.0.2"
 
 node-releases@^1.1.73:
-  version "1.1.73"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
-  integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
+  version "1.1.74"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.74.tgz#e5866488080ebaa70a93b91144ccde06f3c3463e"
+  integrity sha512-caJBVempXZPepZoZAPCWRTNxYQ+xtG/KAi4ozTA5A+nJ7IU+kLQCbqaUjb5Rwy14M9upBWiQ4NutcmW04LJSRw==
 
 nopt@^5.0.0:
   version "5.0.0"
@@ -3900,7 +3634,7 @@ p-limit@^1.1.0:
   dependencies:
     p-try "^1.0.0"
 
-p-limit@^2.2.0:
+p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
   integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
@@ -3921,6 +3655,13 @@ p-locate@^2.0.0:
   dependencies:
     p-limit "^1.1.0"
 
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
+  dependencies:
+    p-limit "^2.0.0"
+
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
@@ -4124,23 +3865,12 @@ pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-postcss-cli@^8.3.1:
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-8.3.1.tgz#865dad08300ac59ae9cecb7066780aa81c767a77"
-  integrity sha512-leHXsQRq89S3JC9zw/tKyiVV2jAhnfQe0J8VI4eQQbUjwIe0XxVqLrR+7UsahF1s9wi4GlqP6SJ8ydf44cgF2Q==
+pkg-up@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
   dependencies:
-    chalk "^4.0.0"
-    chokidar "^3.3.0"
-    dependency-graph "^0.9.0"
-    fs-extra "^9.0.0"
-    get-stdin "^8.0.0"
-    globby "^11.0.0"
-    postcss-load-config "^3.0.0"
-    postcss-reporter "^7.0.0"
-    pretty-hrtime "^1.0.3"
-    read-cache "^1.0.0"
-    slash "^3.0.0"
-    yargs "^16.0.0"
+    find-up "^3.0.0"
 
 postcss-js@^3.0.3:
   version "3.0.3"
@@ -4150,7 +3880,7 @@ postcss-js@^3.0.3:
     camelcase-css "^2.0.1"
     postcss "^8.1.6"
 
-postcss-load-config@^3.0.0, postcss-load-config@^3.0.1, postcss-load-config@^3.1.0:
+postcss-load-config@^3.0.1, postcss-load-config@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.0.tgz#d39c47091c4aec37f50272373a6a648ef5e97829"
   integrity sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==
@@ -4208,18 +3938,6 @@ postcss-nested@5.0.5:
   dependencies:
     postcss-selector-parser "^6.0.4"
 
-postcss-reporter@^7.0.0:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-reporter/-/postcss-reporter-7.0.2.tgz#03e9e7381c1afe40646f9c22e7aeeb860e051065"
-  integrity sha512-JyQ96NTQQsso42y6L1H1RqHfWH1C3Jr0pt91mVv5IdYddZAE9DUZxuferNgk6q0o6vBVOrfVJb10X1FgDzjmDw==
-  dependencies:
-    colorette "^1.2.1"
-    lodash.difference "^4.5.0"
-    lodash.forown "^4.4.0"
-    lodash.get "^4.4.2"
-    lodash.groupby "^4.6.0"
-    lodash.sortby "^4.7.0"
-
 postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6:
   version "6.0.6"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
@@ -4252,13 +3970,6 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-linter-helpers@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
-  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
-  dependencies:
-    fast-diff "^1.1.2"
-
 prettier@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
@@ -4307,7 +4018,7 @@ promise-retry@^2.0.1:
     err-code "^2.0.2"
     retry "^0.12.0"
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -4393,11 +4104,6 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.0:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
 react-redux@^7.2.4:
   version "7.2.4"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
@@ -4415,29 +4121,6 @@ react-refresh@^0.9.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf"
   integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==
 
-react-select@^5.0.0-beta.0:
-  version "5.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.0.0-beta.0.tgz#fcb6f2a5c15cb5702446db68c4d78369e50a19d1"
-  integrity sha512-++fesS5HKxH0nbbDJDIaoupJlJzcItGJXxR29Q5y2FK37PRTpTKN8X0tfnmL5KvdTE2wLRw1qiL5dAiAPgM4tA==
-  dependencies:
-    "@babel/runtime" "^7.12.0"
-    "@emotion/cache" "^11.4.0"
-    "@emotion/react" "^11.1.1"
-    "@types/react-transition-group" "^4.4.0"
-    memoize-one "^5.0.0"
-    prop-types "^15.6.0"
-    react-transition-group "^4.3.0"
-
-react-transition-group@^4.3.0, react-transition-group@^4.4.0:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -4446,13 +4129,6 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
-  dependencies:
-    pify "^2.3.0"
-
 read-cmd-shim@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9"
@@ -4577,11 +4253,6 @@ request@^2.88.2:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-require-directory@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
-
 require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
@@ -4607,7 +4278,7 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.20.0:
+resolve@^1.10.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -4753,7 +4424,7 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
-skypack@^0.3.0:
+skypack@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/skypack/-/skypack-0.3.2.tgz#9df9fde1ed73ae6874d15111f0636e16f2cab1b9"
   integrity sha512-je1pix0QYER6iHuUGbgcafRJT5TI+EGUIBfzBLMqo3Wi22I2SzB9TVHQqwKCw8pzJMuHqhVTFEHc3Ey+ra25Sw==
@@ -4791,9 +4462,9 @@ smart-buffer@^4.1.0:
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
 snowpack@^3.7.1:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/snowpack/-/snowpack-3.8.3.tgz#5f136dcbe051189ce20092acd36759d03e6cbf87"
-  integrity sha512-nD699xWIDk9nGH4V9xKjgIVPA8jXWp/crUG46mu3/11rrdEv94v4xV/j373w3EvegGVQ3JdA5mlNpxDU8wk5uw==
+  version "3.8.6"
+  resolved "https://registry.yarnpkg.com/snowpack/-/snowpack-3.8.6.tgz#0bef5c071caef86a2f91aa5c3d5b70d0c2e2793c"
+  integrity sha512-EZ3Y7RtTiPvxnVFTKPfkvi2PKBrprXCvOHKWQQLBkHonf+xdtG51RiNjtrRLJeCjislAlD6OoeGHUxz76ToGHw==
   dependencies:
     "@npmcli/arborist" "^2.6.4"
     bufferutil "^4.0.2"
@@ -4837,7 +4508,7 @@ snowpack@^3.7.1:
     rimraf "^3.0.0"
     rollup "~2.37.1"
     signal-exit "^3.0.3"
-    skypack "^0.3.0"
+    skypack "^0.3.2"
     slash "~3.0.0"
     source-map "^0.7.3"
     strip-ansi "^6.0.0"
@@ -4870,7 +4541,7 @@ source-map-js@^0.6.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
   integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
 
-source-map@^0.5.0, source-map@^0.5.7:
+source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -4960,7 +4631,7 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^4.1.0, string-width@^4.2.0:
+string-width@^4.2.0:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
   integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
@@ -5047,11 +4718,6 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-stylis@^4.0.3:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
-  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
-
 sub-events@^1.8.9:
   version "1.8.9"
   resolved "https://registry.yarnpkg.com/sub-events/-/sub-events-1.8.9.tgz#57b332134ae1ded738f7c2ddbcd9c1bc81ca8c2e"
@@ -5121,9 +4787,9 @@ tailwindcss@^2.2.4:
     tmp "^0.2.1"
 
 tar@^6.0.2, tar@^6.1.0:
-  version "6.1.7"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.7.tgz#c566d1107d38b09e92983a68db5534fc7f6cab42"
-  integrity sha512-PBoRkOJU0X3lejJ8GaRCsobjXTgFofRDSPdSUhRSdlwJfifRlQBwGXitDItdGFu0/h0XDMCkig0RN1iT7DBxhA==
+  version "6.1.8"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.8.tgz#4fc50cfe56511c538ce15b71e05eebe66530cbd4"
+  integrity sha512-sb9b0cp855NbkMJcskdSYA7b11Q8JsX4qe4pyUAfHp+Y6jBjJeek2ZVlwEfWayshEIwlIzXx0Fain3QG9JPm2A==
   dependencies:
     chownr "^2.0.0"
     fs-minipass "^2.0.0"
@@ -5184,9 +4850,9 @@ tslib@^1.8.1:
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
 tslib@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
-  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
+  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
 
 tsutils@^3.21.0:
   version "3.21.0"
@@ -5281,6 +4947,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-breakpoint@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/use-breakpoint/-/use-breakpoint-2.0.1.tgz#0e98cd55a6b0173147b84837a8cdecc63eabfcd7"
+  integrity sha512-f9PuRHzPsCIBW6oizdGpTAuH+49Tt9hMvByWQYpqI95tUN8k6qDX5WhL5s3b6cQfbubtIHCd1bw/8s5CzSbXpA==
+
 utf-8-validate@^5.0.3:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.5.tgz#dd32c2e82c72002dc9f02eb67ba6761f43456ca1"
@@ -5411,15 +5082,6 @@ workerpool@^6.1.2:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.1.5.tgz#0f7cf076b6215fd7e1da903ff6f22ddd1886b581"
   integrity sha512-XdKkCK0Zqc6w3iTxLckiuJ81tiD/o5rBE/m+nXpRCB+/Sq4DqkfXZ/x0jW02DG1tGsfUGXbTJyZDP+eu67haSw==
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -5445,39 +5107,21 @@ xtend@^4.0.2:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-y18n@^5.0.5:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
-  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yargs-parser@^20.0.0, yargs-parser@^20.2.2:
+yargs-parser@^20.0.0:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
-yargs@^16.0.0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
-  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
-
 yarn@^1.22.11:
   version "1.22.11"
   resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.11.tgz#d0104043e7349046e0e2aec977c24be106925ed6"