diff --git a/.nvmrc b/.nvmrc
index 73bffb039..4a4116705 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-10.17.0
+12.20.0
diff --git a/index.html b/index.html
index f5386a20c..56c1a1580 100644
--- a/index.html
+++ b/index.html
@@ -13,4 +13,51 @@
   </body>
 
   <script src="./build/js/app.js"></script>
+
+  <style>
+    html,
+    body {
+      height: 100%;
+      -webkit-user-select: none;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+        'Helvetica Neue', sans-serif;
+      margin: 0;
+      cursor: default;
+    }
+
+    #gitify {
+      height: 100%;
+    }
+
+    .notification-exit {
+      transform: translate3d(0px, 0, 0);
+      opacity: 1;
+      transition-duration: 250ms;
+      transition-timing-function: cubic-bezier(0.175, 0.665, 0.32, 1), linear;
+    }
+
+    .notification-exit.notification-exit-active {
+      transform: translate3d(350px, 0, 0);
+      opacity: 0;
+    }
+
+    #nprogress {
+      pointer-events: none;
+    }
+
+    #nprogress .bar {
+      position: fixed;
+      top: 0;
+      left: 50px;
+      z-index: 1031;
+      background: #203354;
+
+      width: 100%;
+      height: 2px;
+    }
+  </style>
 </html>
diff --git a/package.json b/package.json
index 8d189c4a8..54d4f6806 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^11.1.0",
+    "autoprefixer": "^10.1.0",
     "axios": "=0.21.0",
     "date-fns": "^2.16.1",
     "electron-updater": "^4.3.5",
@@ -114,6 +115,7 @@
     "lodash": "^4.17.20",
     "menubar": "^9.0.1",
     "nprogress": "=0.2.0",
+    "postcss": "^8.2.1",
     "react": "=16.13.1",
     "react-dom": "=16.13.1",
     "react-emojione": "=5.0.1",
@@ -128,7 +130,7 @@
     "redux-storage-decorator-filter": "=1.1.8",
     "redux-storage-engine-localstorage": "=1.1.4",
     "redux-thunk": "=2.3.0",
-    "styled-components": "^5.0.1",
+    "tailwindcss": "^2.0.2",
     "ts-loader": "^8.0.11",
     "typescript": "^4.1.2"
   },
@@ -141,14 +143,17 @@
     "@types/react-redux": "^7.1.7",
     "@types/react-transition-group": "^4.2.4",
     "@types/styled-components": "^5.0.1",
+    "css-loader": "^5.0.1",
     "electron": "^11.0.2",
     "electron-builder": "^22.9.1",
     "electron-notarize": "^1.0.0",
     "jest": "^26.6.3",
     "nock": "^12.0.3",
+    "postcss-loader": "^4.1.0",
     "prettier": "=2.2.0",
     "react-test-renderer": "=16.13.1",
     "redux-mock-store": "=1.5.4",
+    "style-loader": "^2.0.0",
     "ts-jest": "^26.4.4",
     "webpack": "^5.6.0",
     "webpack-cli": "^4.2.0",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 000000000..12a703d90
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/js/app.tsx b/src/js/app.tsx
index cd5869944..f6223fb53 100644
--- a/src/js/app.tsx
+++ b/src/js/app.tsx
@@ -6,15 +6,10 @@ import {
   Switch,
 } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import styled, {
-  ThemeProvider,
-  createGlobalStyle,
-  DefaultTheme,
-} from 'styled-components';
 
 import configureStore from './store/configureStore';
 import Loading from './components/loading';
-import Sidebar, { SIDEBAR_WIDTH } from './components/sidebar';
+import Sidebar from './components/sidebar';
 
 import EnterpriseLoginRoute from './routes/enterprise-login';
 import LoginRoute from './routes/login';
@@ -46,100 +41,22 @@ export const PrivateRoute = ({ component: Component, ...rest }) => {
   );
 };
 
-const theme: DefaultTheme = {
-  borderRadius: '3px',
-
-  primary: '#203354',
-  success: '#2CC966',
-  info: '#8BA9C6',
-  warning: '#FCAA67',
-  danger: '#B7524F',
-
-  grayLighter: '#f9fafa',
-  grayLight: '#eceeef',
-  grayDarker: '#3d3f41',
-  grayDark: '#55595C',
-
-  primaryDark: '#071A3B',
-};
-
-const GlobalStyle = createGlobalStyle`
-  html,
-  body {
-    height: 100%;
-    -webkit-user-select: none;
-  }
-
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-      sans-serif;
-    margin: 0;
-    cursor: default;
-  }
-
-  #gitify {
-    height: 100%;
-  }
-
-  button {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  #nprogress {
-    pointer-events: none;
-  
-    .bar {
-      position: fixed;
-      top: 0;
-      left: ${SIDEBAR_WIDTH};
-      z-index: 1031;
-      background: ${(props) => props.theme.primary};
-  
-      width: 100%;
-      height: 2px;
-    }
-  }
-
-  .notification-exit {
-    transform: translate3d(0px, 0, 0);
-    opacity: 1;
-    transition-duration: 250ms;
-    transition-timing-function: cubic-bezier(0.175, 0.665, 0.32, 1), linear;
-  
-    &.notification-exit-active {
-      transform: translate3d(350px, 0, 0);
-      opacity: 0;
-    }
-  }
-`;
-
-const Wrapper = styled.div`
-  height: 100%;
-  padding-left: ${SIDEBAR_WIDTH};
-`;
-
 export const App = () => {
   return (
     <Provider store={store}>
-      <ThemeProvider theme={theme}>
-        <Router>
-          <GlobalStyle />
-          <Wrapper>
-            <Loading />
-            <Sidebar />
-
-            <Switch>
-              <PrivateRoute path="/" exact component={NotificationsRoute} />
-              <PrivateRoute path="/settings" exact component={SettingsRoute} />
-              <Route path="/login" component={LoginRoute} />
-              <Route path="/enterpriselogin" component={EnterpriseLoginRoute} />
-            </Switch>
-          </Wrapper>
-        </Router>
-      </ThemeProvider>
+      <Router>
+        <div className="flex flex-col pl-14 h-full">
+          <Loading />
+          <Sidebar />
+
+          <Switch>
+            <PrivateRoute path="/" exact component={NotificationsRoute} />
+            <PrivateRoute path="/settings" exact component={SettingsRoute} />
+            <Route path="/login" component={LoginRoute} />
+            <Route path="/enterpriselogin" component={EnterpriseLoginRoute} />
+          </Switch>
+        </div>
+      </Router>
     </Provider>
   );
 };
diff --git a/src/js/components/__snapshots__/account-notifications.test.tsx.snap b/src/js/components/__snapshots__/account-notifications.test.tsx.snap
index 0384c411a..cf17f2e83 100644
--- a/src/js/components/__snapshots__/account-notifications.test.tsx.snap
+++ b/src/js/components/__snapshots__/account-notifications.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/account-notifications.tsx should render itself (github.com with notifications) 1`] = `
 <div
-  className="sc-AxjAm hCwqHM"
+  className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 text-sm"
 >
   github.com
   <svg
@@ -31,7 +31,7 @@ exports[`components/account-notifications.tsx should render itself (github.com w
 
 exports[`components/account-notifications.tsx should render itself (github.com without notifications) 1`] = `
 <div
-  className="sc-AxjAm hCwqHM"
+  className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 text-sm"
 >
   github.com
   <svg
diff --git a/src/js/components/__snapshots__/all-read.test.tsx.snap b/src/js/components/__snapshots__/all-read.test.tsx.snap
index 956b3aa25..4aa2a2ca1 100644
--- a/src/js/components/__snapshots__/all-read.test.tsx.snap
+++ b/src/js/components/__snapshots__/all-read.test.tsx.snap
@@ -2,20 +2,18 @@
 
 exports[`components/all-read.tsx should render itself & its children 1`] = `
 <div
-  className="sc-AxjAm bVUrJb"
+  className="flex flex-1 flex-col justify-center items-center p-4"
 >
-  <div
-    className="sc-AxirZ joxCwg"
+  <h1
+    className="text-5xl mb-5"
   >
     😉
-  </div>
+  </h1>
   <h2
-    className="sc-AxiKw dlazZW"
+    className="font-semibold text-xl mb-2 text-semibold"
   />
-  <h4
-    className="sc-AxhCb jUqlrV"
-  >
+  <div>
     No new notifications.
-  </h4>
+  </div>
 </div>
 `;
diff --git a/src/js/components/__snapshots__/notification.test.tsx.snap b/src/js/components/__snapshots__/notification.test.tsx.snap
index 1f3b1c1c2..6affc739b 100644
--- a/src/js/components/__snapshots__/notification.test.tsx.snap
+++ b/src/js/components/__snapshots__/notification.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`components/notification.js should render itself & its children 1`] = `
 <div
-  className="sc-AxjAm esvKhw"
+  className="flex space-x-2 p-2 bg-white hover:bg-gray-100 border-b border-gray-100"
 >
   <div
-    className="sc-AxhUy cNkvzS"
+    className="flex justify-center items-center w-8"
   >
     <svg
       aria-hidden="false"
@@ -17,7 +17,7 @@ exports[`components/notification.js should render itself & its children 1`] = `
         }
       }
       fill="currentColor"
-      height={20}
+      height={18}
       role="img"
       style={
         Object {
@@ -27,21 +27,21 @@ exports[`components/notification.js should render itself & its children 1`] = `
         }
       }
       viewBox="0 0 16 16"
-      width={20}
+      width={18}
     />
   </div>
   <div
-    className="sc-AxirZ ibrlFv"
+    className="flex-1 overflow-hidden"
     onClick={[Function]}
     role="main"
   >
-    <h6
-      className="sc-AxiKw fXbfXY"
+    <div
+      className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden"
     >
       I am a robot and this is a test!
-    </h6>
+    </div>
     <div
-      className="sc-AxhCb fqclhB"
+      className="text-xs text-capitalize"
     >
       <span
         title="You're watching the repository."
@@ -52,14 +52,14 @@ exports[`components/notification.js should render itself & its children 1`] = `
        
       in over 3 years
       <button
-        className="sc-AxheI hMkKFy"
+        className="border-0 bg-none float-right"
         onClick={[Function]}
         title="Unsubscribe"
       >
         <svg
           aria-hidden="false"
           aria-label="Unsubscribe"
-          className="octicon"
+          className="hover:text-red-500"
           dangerouslySetInnerHTML={
             Object {
               "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 2.75a.75.75 0 00-1.238-.57L3.472 5H1.75A1.75 1.75 0 000 6.75v2.5C0 10.216.784 11 1.75 11h1.723l3.289 2.82A.75.75 0 008 13.25V2.75zM4.238 6.32L6.5 4.38v7.24L4.238 9.68a.75.75 0 00-.488-.18h-2a.25.25 0 01-.25-.25v-2.5a.25.25 0 01.25-.25h2a.75.75 0 00.488-.18zm7.042-1.1a.75.75 0 10-1.06 1.06L11.94 8l-1.72 1.72a.75.75 0 101.06 1.06L13 9.06l1.72 1.72a.75.75 0 101.06-1.06L14.06 8l1.72-1.72a.75.75 0 00-1.06-1.06L13 6.94l-1.72-1.72z\\"></path>",
@@ -82,17 +82,17 @@ exports[`components/notification.js should render itself & its children 1`] = `
     </div>
   </div>
   <div
-    className="sc-AxhUy cNkvzS"
+    className="flex justify-center items-center w-8"
   >
     <button
-      className="sc-AxgMl beGRRX"
+      className="focus:outline-none"
       onClick={[Function]}
       title="Mark as Read"
     >
       <svg
         aria-hidden="false"
         aria-label="Mark as Read"
-        className="octicon"
+        className="hover:text-green-500"
         dangerouslySetInnerHTML={
           Object {
             "__html": "<path fill-rule=\\"evenodd\\" d=\\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\\"></path>",
diff --git a/src/js/components/__snapshots__/oops.test.tsx.snap b/src/js/components/__snapshots__/oops.test.tsx.snap
index f844b22c4..25db30eea 100644
--- a/src/js/components/__snapshots__/oops.test.tsx.snap
+++ b/src/js/components/__snapshots__/oops.test.tsx.snap
@@ -2,22 +2,20 @@
 
 exports[`components/oops.tsx should render itself & its children 1`] = `
 <div
-  className="sc-AxjAm bVUrJb"
+  className="flex flex-1 flex-col justify-center items-center p-4"
 >
-  <div
-    className="sc-AxirZ joxCwg"
+  <h1
+    className="text-5xl mb-5"
   >
     😔
-  </div>
+  </h1>
   <h2
-    className="sc-AxiKw dlazZW"
+    className="font-semibold text-xl mb-2 text-semibold"
   >
     Something went wrong.
   </h2>
-  <h4
-    className="sc-AxhCb jUqlrV"
-  >
+  <div>
     Couldn't get your notifications.
-  </h4>
+  </div>
 </div>
 `;
diff --git a/src/js/components/__snapshots__/repository.test.tsx.snap b/src/js/components/__snapshots__/repository.test.tsx.snap
index 52be3ef3f..72302d685 100644
--- a/src/js/components/__snapshots__/repository.test.tsx.snap
+++ b/src/js/components/__snapshots__/repository.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`components/repository.tsx should render itself & its children 1`] = `
 Array [
   <div
-    className="sc-AxjAm jxuASs"
+    className="flex flex-1 p-2 bg-gray-100"
   >
     <div
-      className="sc-AxirZ jclJC"
+      className="flex flex-1 p-0.5 items-center mt-0 text-base font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
     >
       <img
-        className="sc-AxiKw cUAnsn"
+        className="rounded w-5 h-5 ml-1 mr-3"
         src="https://avatars0.githubusercontent.com/u/6333409?v=3"
       />
       <span
@@ -19,16 +19,16 @@ Array [
       </span>
     </div>
     <div
-      className="sc-AxhCb hLzOhr"
+      className="flex w-8 justify-center items-center"
     >
       <button
-        className="sc-AxhUy hwudQN"
+        className="focus:outline-none"
         onClick={[Function]}
       >
         <svg
           aria-hidden="false"
           aria-label="Mark Repository as Read"
-          className="octicon"
+          className="hover:text-green-500"
           dangerouslySetInnerHTML={
             Object {
               "__html": "<path fill-rule=\\"evenodd\\" d=\\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\\"></path>",
diff --git a/src/js/components/__snapshots__/sidebar.test.tsx.snap b/src/js/components/__snapshots__/sidebar.test.tsx.snap
index 4de0ea123..728fdf8c4 100644
--- a/src/js/components/__snapshots__/sidebar.test.tsx.snap
+++ b/src/js/components/__snapshots__/sidebar.test.tsx.snap
@@ -2,13 +2,13 @@
 
 exports[`components/Sidebar.tsx should render itself & its children (logged in) 1`] = `
 <div
-  className="sc-AxjAm hvGyhy"
+  className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-primary overflow-y-auto	"
 >
   <div
-    className="sc-AxirZ gZzKjG"
+    className="flex flex-col flex-1 items-center py-4"
   >
     <svg
-      className="logo"
+      className="w-5 my-3 mx-auto cursor-pointer"
       onClick={[Function]}
       role="logo"
       viewBox="0 0 500 500"
@@ -52,7 +52,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
       </g>
     </svg>
     <div
-      className="sc-AxiKw cRGLZg"
+      className="flex justify-around	self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold"
     >
       <svg
         aria-hidden="true"
@@ -79,11 +79,11 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
     </div>
   </div>
   <div
-    className="sc-AxhCb iiUgpz"
+    className="py-4 px-3"
   >
-    <button
+    <div
       aria-label="Refresh Notifications"
-      className="sc-AxhUy dubEsv"
+      className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
       onClick={[Function]}
     >
       <svg
@@ -107,10 +107,10 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         viewBox="0 0 16 16"
         width={16}
       />
-    </button>
-    <button
+    </div>
+    <div
       aria-label="Settings"
-      className="sc-AxhUy dubEsv"
+      className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
       onClick={[Function]}
     >
       <svg
@@ -134,10 +134,10 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         viewBox="0 0 16 16"
         width={16}
       />
-    </button>
-    <button
+    </div>
+    <div
       aria-label="View project on GitHub"
-      className="sc-AxhUy dubEsv"
+      className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
       onClick={[Function]}
     >
       <svg
@@ -161,20 +161,20 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         viewBox="0 0 16 16"
         width={14}
       />
-    </button>
+    </div>
   </div>
 </div>
 `;
 
 exports[`components/Sidebar.tsx should render itself & its children (logged out) 1`] = `
 <div
-  className="sc-AxjAm hvGyhy"
+  className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-primary overflow-y-auto	"
 >
   <div
-    className="sc-AxirZ gZzKjG"
+    className="flex flex-col flex-1 items-center py-4"
   >
     <svg
-      className="logo"
+      className="w-5 my-3 mx-auto cursor-pointer"
       onClick={[Function]}
       role="logo"
       viewBox="0 0 500 500"
@@ -218,7 +218,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
       </g>
     </svg>
     <div
-      className="sc-AxiKw cRGLZg"
+      className="flex justify-around	self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold"
     >
       <svg
         aria-hidden="true"
@@ -245,11 +245,11 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
     </div>
   </div>
   <div
-    className="sc-AxhCb iiUgpz"
+    className="py-4 px-3"
   >
-    <button
+    <div
       aria-label="View project on GitHub"
-      className="sc-AxhUy dubEsv"
+      className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
       onClick={[Function]}
     >
       <svg
@@ -273,7 +273,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         viewBox="0 0 16 16"
         width={14}
       />
-    </button>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/js/components/account-notifications.tsx b/src/js/components/account-notifications.tsx
index 60dec29d9..6270a12fa 100644
--- a/src/js/components/account-notifications.tsx
+++ b/src/js/components/account-notifications.tsx
@@ -1,25 +1,10 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import styled from 'styled-components';
 import { ChevronDownIcon, ChevronLeftIcon } from '@primer/octicons-react';
 
 import { Notification } from '../../types/github';
 import RepositoryNotifications from './repository';
 
-const Account = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  background-color: ${(props) => props.theme.primaryDark};
-  color: white;
-  font-size: 0.9rem;
-
-  .octicon {
-    margin-left: 1rem;
-  }
-`;
-
 interface IProps {
   hostname: string;
   notifications: Notification[];
@@ -39,11 +24,11 @@ export const AccountNotifications = (props: IProps) => {
   return (
     <>
       {showAccountHostname && (
-        <Account>
+        <div className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 text-sm">
           {hostname}
 
           <Chevron size={20} />
-        </Account>
+        </div>
       )}
 
       {Object.values(groupedNotifications).map((repoNotifications) => {
diff --git a/src/js/components/all-read.tsx b/src/js/components/all-read.tsx
index 232a5f58f..1d7491ac7 100644
--- a/src/js/components/all-read.tsx
+++ b/src/js/components/all-read.tsx
@@ -1,54 +1,35 @@
 import * as React from 'react';
 import Typist from 'react-typist';
-import styled from 'styled-components';
 import { emojify } from 'react-emojione';
 
 import constants from '../utils/constants';
 
-const Wrapper = styled.div`
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Emoji = styled.div`
-  margin-top: 2rem;
-  font-size: 4rem;
-  font-weight: 400;
-`;
-
-const Title = styled.h2`
-  margin: 0.5rem 0 0;
-  padding: 10px 5px;
-  font-weight: 600;
-  line-height: 40px;
-`;
-
-const Desc = styled.h4`
-  font-weight: 400;
-`;
-
 export const AllRead = () => {
-  const message =
-    constants.ALLREAD_MESSAGES[
-      Math.floor(Math.random() * constants.ALLREAD_MESSAGES.length)
-    ];
+  const message = React.useMemo(
+    () =>
+      constants.ALLREAD_MESSAGES[
+        Math.floor(Math.random() * constants.ALLREAD_MESSAGES.length)
+      ],
+    []
+  );
 
-  const emoji =
-    constants.ALLREAD_EMOJIS[
-      Math.floor(Math.random() * constants.ALLREAD_EMOJIS.length)
-    ];
+  const emoji = React.useMemo(
+    () =>
+      constants.ALLREAD_EMOJIS[
+        Math.floor(Math.random() * constants.ALLREAD_EMOJIS.length)
+      ],
+    []
+  );
 
   return (
-    <Wrapper>
-      <Emoji>{emojify(emoji, { output: 'unicode' })}</Emoji>
+    <div className="flex flex-1 flex-col justify-center items-center p-4">
+      <h1 className="text-5xl mb-5">{emojify(emoji, { output: 'unicode' })}</h1>
 
-      <Title>
+      <h2 className="font-semibold text-xl mb-2 text-semibold">
         <Typist>{message}</Typist>
-      </Title>
+      </h2>
 
-      <Desc>No new notifications.</Desc>
-    </Wrapper>
+      <div>No new notifications.</div>
+    </div>
   );
 };
diff --git a/src/js/components/fields/input.tsx b/src/js/components/fields/input.tsx
index 5419ec478..7847727a9 100644
--- a/src/js/components/fields/input.tsx
+++ b/src/js/components/fields/input.tsx
@@ -1,38 +1,5 @@
 import * as React from 'react';
 import { Field } from 'react-final-form';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  margin-bottom: 1rem;
-`;
-
-const Label = styled.label`
-  display: inline-block;
-  margin-bottom: 0.5rem;
-`;
-
-const Input = styled.input`
-  display: block;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  font-size: 1rem;
-  line-height: 1.25;
-  color: #55595c;
-  background-color: #fff;
-  background-image: none;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.25rem;
-  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-  outline: none;
-  box-sizing: border-box;
-`;
-
-const ErrorMessage = styled.div`
-  margin-top: 0.5rem;
-  font-size: 90%;
-  color: ${(props) => props.theme.danger};
-`;
 
 export interface IProps {
   name: string;
@@ -55,17 +22,26 @@ export class FieldInput extends React.PureComponent<IProps> {
     return (
       <Field name={name}>
         {({ input, meta: { touched, error } }) => (
-          <Wrapper>
-            <Label htmlFor={input.name}>{label}</Label>
-            <Input
+          <div className="mt-2">
+            <label
+              className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+              htmlFor={input.name}
+            >
+              {label}
+            </label>
+
+            <input
               type="text"
+              className="appearance-none block w-full bg-gray-100 text-grey-darker border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200"
               id={input.name}
-              {...input}
               placeholder={placeholder}
+              {...input}
             />
 
-            {touched && error && <ErrorMessage>{error}</ErrorMessage>}
-          </Wrapper>
+            {touched && error && (
+              <div className="text-red-500 text-xs italic">{error}</div>
+            )}
+          </div>
         )}
       </Field>
     );
diff --git a/src/js/components/loading.tsx b/src/js/components/loading.tsx
index 1e4b1cfec..b377145c8 100644
--- a/src/js/components/loading.tsx
+++ b/src/js/components/loading.tsx
@@ -3,37 +3,27 @@ import * as NProgress from 'nprogress';
 import { AppState } from '../../types/reducers';
 import { connect } from 'react-redux';
 
-interface IProps {
-  isLoading: boolean;
-}
-
-export class Loading extends React.PureComponent<IProps> {
-  state = {};
-
-  componentDidMount() {
+export const Loading = ({ isLoading }: { isLoading: boolean }) => {
+  React.useEffect(() => {
     NProgress.configure({
       showSpinner: false,
     });
-  }
 
-  static getDerivedStateFromProps(props, state) {
-    if (props.isLoading) {
+    return () => {
+      NProgress.remove();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (isLoading) {
       NProgress.start();
     } else {
       NProgress.done();
     }
+  }, [isLoading]);
 
-    return {};
-  }
-
-  componentWillUnmount() {
-    NProgress.remove();
-  }
-
-  render() {
-    return null;
-  }
-}
+  return null;
+};
 
 export function mapStateToProps(state: AppState) {
   return {
diff --git a/src/js/components/notification.tsx b/src/js/components/notification.tsx
index f6bd3202e..f3f1c18f6 100644
--- a/src/js/components/notification.tsx
+++ b/src/js/components/notification.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import { formatDistanceToNow, parseISO } from 'date-fns';
 import { CheckIcon, MuteIcon } from '@primer/octicons-react';
-import styled from 'styled-components';
 
 import { AppState } from '../../types/reducers';
 import { formatReason, getNotificationTypeIcon } from '../utils/github-api';
@@ -12,67 +11,6 @@ import { generateGitHubWebUrl } from '../utils/helpers';
 import { markNotification, unsubscribeNotification } from '../actions';
 import { Notification } from '../../types/github';
 
-const Wrapper = styled.div`
-  display: flex;
-  margin: 0;
-  padding: 0.5rem 0.5rem;
-  border-bottom: 1px solid ${(props) => props.theme.grayLight};
-
-  &:hover {
-    background-color: ${(props) => props.theme.grayLighter};
-  }
-`;
-
-const Main = styled.div`
-  flex: 1;
-  padding: 0 0.5rem;
-  overflow: hidden;
-`;
-
-const Title = styled.h6`
-  margin-top: 0;
-  margin-bottom: 0.25rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  font-size: 0.9rem;
-  font-weight: 400;
-  line-height: 1rem;
-`;
-
-const Details = styled.div`
-  font-size: 0.75rem;
-  text-transform: text-capitalize;
-`;
-
-const IconWrapper = styled.div`
-  width: 2rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const PrimaryButton = styled.button`
-  background: none;
-  border: none;
-
-  .octicon:hover {
-    color: ${(props) => props.theme.success};
-    cursor: pointer;
-  }
-`;
-
-const SecondaryButton = styled.button`
-  background: none;
-  border: none;
-  float: right;
-
-  .octicon:hover {
-    color: ${(props) => props.theme.danger};
-    cursor: pointer;
-  }
-`;
-
 interface IProps {
   hostname: string;
   notification: Notification;
@@ -119,27 +57,51 @@ export const NotificationItem: React.FC<IProps> = (props) => {
   });
 
   return (
-    <Wrapper>
-      <IconWrapper>
-        <NotificationIcon size={20} aria-label={notification.subject.type} />
-      </IconWrapper>
-      <Main onClick={() => pressTitle()} role="main">
-        <Title>{notification.subject.title}</Title>
-
-        <Details>
+    <div className="flex space-x-2 p-2 bg-white hover:bg-gray-100 border-b border-gray-100">
+      <div className="flex justify-center items-center w-8">
+        <NotificationIcon size={18} aria-label={notification.subject.type} />
+      </div>
+
+      <div
+        className="flex-1 overflow-hidden"
+        onClick={() => pressTitle()}
+        role="main"
+      >
+        <div className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden">
+          {notification.subject.title}
+        </div>
+
+        <div className="text-xs text-capitalize">
           <span title={reason.description}>{reason.type}</span> - Updated{' '}
           {updatedAt}
-          <SecondaryButton title="Unsubscribe" onClick={(e) => unsubscribe(e)}>
-            <MuteIcon size={13} aria-label="Unsubscribe" />
-          </SecondaryButton>
-        </Details>
-      </Main>
-      <IconWrapper>
-        <PrimaryButton title="Mark as Read" onClick={() => markAsRead()}>
-          <CheckIcon size={20} aria-label="Mark as Read" />
-        </PrimaryButton>
-      </IconWrapper>
-    </Wrapper>
+          <button
+            className="border-0 bg-none float-right"
+            title="Unsubscribe"
+            onClick={(e) => unsubscribe(e)}
+          >
+            <MuteIcon
+              className="hover:text-red-500"
+              size={13}
+              aria-label="Unsubscribe"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex justify-center items-center w-8">
+        <button
+          className="focus:outline-none"
+          title="Mark as Read"
+          onClick={() => markAsRead()}
+        >
+          <CheckIcon
+            className="hover:text-green-500"
+            size={20}
+            aria-label="Mark as Read"
+          />
+        </button>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/js/components/oops.tsx b/src/js/components/oops.tsx
index e37294252..30255426b 100644
--- a/src/js/components/oops.tsx
+++ b/src/js/components/oops.tsx
@@ -1,44 +1,25 @@
 import * as React from 'react';
 import { emojify } from 'react-emojione';
-import styled from 'styled-components';
 
 import constants from '../utils/constants';
 
-const Wrapper = styled.div`
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const Emoji = styled.div`
-  margin-top: 2rem;
-  font-size: 4rem;
-  font-weight: 400;
-`;
-
-const Title = styled.h2`
-  margin: 0.5rem 0 0;
-  padding: 10px 5px;
-  font-weight: 600;
-  line-height: 40px;
-`;
-
-const Desc = styled.h4`
-  font-weight: 400;
-`;
-
 export const Oops = () => {
-  const emoji =
-    constants.ERROR_EMOJIS[
-      Math.floor(Math.random() * constants.ERROR_EMOJIS.length)
-    ];
+  const emoji = React.useMemo(
+    () =>
+      constants.ERROR_EMOJIS[
+        Math.floor(Math.random() * constants.ERROR_EMOJIS.length)
+      ],
+    []
+  );
 
   return (
-    <Wrapper>
-      <Emoji>{emojify(emoji, { output: 'unicode' })}</Emoji>
-      <Title>Something went wrong.</Title>
-      <Desc>Couldn&apos;t get your notifications.</Desc>
-    </Wrapper>
+    <div className="flex flex-1 flex-col justify-center items-center p-4">
+      <h1 className="text-5xl mb-5">{emojify(emoji, { output: 'unicode' })}</h1>
+
+      <h2 className="font-semibold text-xl mb-2 text-semibold">
+        Something went wrong.
+      </h2>
+      <div>Couldn&apos;t get your notifications.</div>
+    </div>
   );
 };
diff --git a/src/js/components/repository.tsx b/src/js/components/repository.tsx
index 473e158df..d822cd741 100644
--- a/src/js/components/repository.tsx
+++ b/src/js/components/repository.tsx
@@ -1,7 +1,6 @@
 const { shell } = require('electron');
 
 import * as React from 'react';
-import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { CheckIcon } from '@primer/octicons-react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
@@ -10,48 +9,6 @@ import { markRepoNotifications } from '../actions';
 import { Notification } from '../../types/github';
 import NotificationItem from './notification';
 
-const Wrapper = styled.div`
-  display: flex;
-  background-color: ${(props) => props.theme.grayLight};
-  padding: 0.55rem 0.5rem;
-`;
-
-const TitleBar = styled.div`
-  flex: 1;
-  padding: 0 0.5rem;
-  margin-top: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.95rem;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-`;
-
-const Avatar = styled.img`
-  border-radius: 50%;
-  margin-right: 0.75rem;
-  width: 20px;
-`;
-
-const IconWrapper = styled.div`
-  width: 2rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Button = styled.button`
-  background: none;
-  border: none;
-
-  .octicon:hover {
-    color: ${(props) => props.theme.success};
-    cursor: pointer;
-  }
-`;
-
 interface IProps {
   hostname: string;
   repoNotifications: Notification[];
@@ -76,18 +33,22 @@ export const RepositoryNotifications: React.FC<IProps> = (props) => {
 
   return (
     <>
-      <Wrapper>
-        <TitleBar>
-          <Avatar src={avatarUrl} />
+      <div className="flex flex-1 p-2 bg-gray-100">
+        <div className="flex flex-1 p-0.5 items-center mt-0 text-base font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
+          <img className="rounded w-5 h-5 ml-1 mr-3" src={avatarUrl} />
           <span onClick={openBrowser}>{props.repoName}</span>
-        </TitleBar>
-
-        <IconWrapper>
-          <Button onClick={markRepoAsRead}>
-            <CheckIcon size={20} aria-label="Mark Repository as Read" />
-          </Button>
-        </IconWrapper>
-      </Wrapper>
+        </div>
+
+        <div className="flex w-8 justify-center items-center">
+          <button className="focus:outline-none" onClick={markRepoAsRead}>
+            <CheckIcon
+              className="hover:text-green-500"
+              size={20}
+              aria-label="Mark Repository as Read"
+            />
+          </button>
+        </div>
+      </div>
 
       <TransitionGroup>
         {repoNotifications.map((obj) => (
diff --git a/src/js/components/sidebar.tsx b/src/js/components/sidebar.tsx
index 8cf520519..17fc6b552 100644
--- a/src/js/components/sidebar.tsx
+++ b/src/js/components/sidebar.tsx
@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { shell } from 'electron';
 import * as Octicons from '@primer/octicons-react';
-import styled from 'styled-components';
 
 import { AppState } from '../../types/reducers';
 import { fetchNotifications, logout } from '../actions';
@@ -12,81 +11,6 @@ import { isUserEitherLoggedIn } from '../utils/helpers';
 import { Logo } from './ui/logo';
 import Constants from '../utils/constants';
 
-export const SIDEBAR_WIDTH = '50px';
-
-const Wrapper = styled.div`
-  position: fixed;
-  left: ${SIDEBAR_WIDTH};
-  margin-left: -${SIDEBAR_WIDTH};
-  background-color: ${(props) => props.theme.primary};
-  width: ${SIDEBAR_WIDTH};
-  height: 100%;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-
-  .logo {
-    width: 1.25rem;
-    margin: 0.75rem auto;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-`;
-
-const Main = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1rem 0;
-`;
-
-const Status = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  align-self: stretch;
-  align-items: center;
-  margin: 0.25rem 0;
-  padding: 0.25rem 0.55rem;
-  color: ${(props) => props.theme.success};
-  font-size: 75%;
-  font-weight: 700;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  text-transform: uppercase;
-`;
-
-const Footer = styled.div`
-  padding: 1rem 0.75rem;
-`;
-
-const FooterButton = styled.button`
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-
-  background-color: transparent;
-  border: 0;
-  width: 100%;
-
-  font-size: 0.8rem;
-  margin-top: 0.25rem;
-  padding: 0.35rem 0;
-  color: white;
-
-  &:focus {
-    outline: 0;
-  }
-
-  .octicon:hover {
-    color: ${(props) => props.theme.info};
-  }
-`;
-
 interface IProps {
   fetchNotifications: () => void;
 
@@ -148,46 +72,55 @@ export class Sidebar extends React.Component<IProps> {
   render() {
     const { isEitherLoggedIn, notificationsCount } = this.props;
 
+    const footerButtonClasses =
+      'flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none';
+
     return (
-      <Wrapper>
-        <Main>
-          <Logo onClick={this.onOpenBrowser} />
+      <div className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-primary overflow-y-auto	">
+        <div className="flex flex-col flex-1 items-center py-4">
+          <Logo
+            className="w-5 my-3 mx-auto cursor-pointer"
+            onClick={this.onOpenBrowser}
+          />
 
           {notificationsCount > 0 && (
-            <Status>
+            <div className="flex justify-around	self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold">
               <Octicons.BellIcon size={12} />
               {notificationsCount}
-            </Status>
+            </div>
           )}
-        </Main>
+        </div>
 
-        <Footer>
+        <div className="py-4 px-3">
           {isEitherLoggedIn && (
             <>
-              <FooterButton
+              <div
+                className={footerButtonClasses}
                 onClick={this.refreshNotifications.bind(this)}
                 aria-label="Refresh Notifications"
               >
                 <Octicons.SyncIcon size={16} />
-              </FooterButton>
+              </div>
 
-              <FooterButton
+              <div
+                className={footerButtonClasses}
                 onClick={this.goToSettings.bind(this)}
                 aria-label="Settings"
               >
                 <Octicons.GearIcon size={16} />
-              </FooterButton>
+              </div>
             </>
           )}
 
-          <FooterButton
+          <div
+            className={footerButtonClasses}
             onClick={this.onOpenBrowser}
             aria-label="View project on GitHub"
           >
             <Octicons.MarkGithubIcon size={14} />
-          </FooterButton>
-        </Footer>
-      </Wrapper>
+          </div>
+        </div>
+      </div>
     );
   }
 }
diff --git a/src/js/components/ui/__snapshots__/logo.test.tsx.snap b/src/js/components/ui/__snapshots__/logo.test.tsx.snap
index c1005d3e2..96060c7d0 100644
--- a/src/js/components/ui/__snapshots__/logo.test.tsx.snap
+++ b/src/js/components/ui/__snapshots__/logo.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/ui/logo.tsx renders correctly (light) 1`] = `
 <svg
-  className="logo"
+  className=""
   onClick={[Function]}
   role="logo"
   viewBox="0 0 500 500"
@@ -49,7 +49,7 @@ exports[`components/ui/logo.tsx renders correctly (light) 1`] = `
 
 exports[`components/ui/logo.tsx renders correctly(dark) 1`] = `
 <svg
-  className="logo"
+  className=""
   onClick={[Function]}
   role="logo"
   viewBox="0 0 500 500"
diff --git a/src/js/components/ui/checkbox.tsx b/src/js/components/ui/checkbox.tsx
index 30f2c8edd..f41b28004 100644
--- a/src/js/components/ui/checkbox.tsx
+++ b/src/js/components/ui/checkbox.tsx
@@ -1,53 +1,4 @@
 import * as React from 'react';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  margin-bottom: 0.5rem;
-`;
-
-const CheckboxContainer = styled.div`
-  display: inline-block;
-  vertical-align: middle;
-`;
-
-const Icon = styled.svg`
-  fill: none;
-  stroke: white;
-  stroke-width: 2px;
-`;
-
-// Hide checkbox visually but remain accessible to screen readers.
-// Source: https://polished.js.org/docs/#hidevisually
-const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
-  border: 0;
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-`;
-
-const StyledCheckbox = styled.div`
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  background: ${(props) =>
-    // @ts-ignore
-    props.isChecked ? props.theme.primaryDark : props.theme.primary};
-  border-radius: 3px;
-  transition: all 150ms;
-
-  ${HiddenCheckbox}:focus + & {
-    box-shadow: 0 0 0 3px ${(props) => props.theme.info};
-  }
-
-  ${Icon} {
-    visibility: ${(props) => ((props as any).isChecked ? 'visible' : 'hidden')};
-  }
-`;
 
 interface IFieldCheckbox {
   name: string;
@@ -58,36 +9,17 @@ interface IFieldCheckbox {
 
 export const FieldCheckbox = (props: IFieldCheckbox) => {
   return (
-    <Wrapper>
-      <label>
-        <CheckboxContainer>
-          <HiddenCheckbox checked={props.checked} {...props} />
-          {/* 
-            // @ts-ignore */}
-          <StyledCheckbox isChecked={props.checked}>
-            <Icon viewBox="0 0 24 24">
-              <g
-                stroke="none"
-                strokeWidth="1"
-                fill="none"
-                fillRule="evenodd"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <g
-                  transform="translate(6.000000, 7.000000)"
-                  stroke="#FFFFFF"
-                  strokeWidth="3"
-                >
-                  <polyline points="13 0 4.0625 9 0 4.90909091"></polyline>
-                </g>
-              </g>
-            </Icon>
-          </StyledCheckbox>
-        </CheckboxContainer>
-
-        <span style={{ marginLeft: '1rem' }}>{props.label}</span>
+    <div className="mt-1 mb-2">
+      <label className="inline-flex items-center mt-2">
+        <input
+          type="checkbox"
+          className="form-checkbox h-5 w-5 text-red-600"
+          checked={props.checked}
+          onChange={props.onChange}
+        />
+
+        <span className="ml-2 text-gray-700">{props.label}</span>
       </label>
-    </Wrapper>
+    </div>
   );
 };
diff --git a/src/js/components/ui/logo.tsx b/src/js/components/ui/logo.tsx
index de259ae29..3afa0ffd4 100644
--- a/src/js/components/ui/logo.tsx
+++ b/src/js/components/ui/logo.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 interface IProps {
   isDark?: boolean;
   onClick?: () => void;
+  className?: string;
 }
 
 const LIGHT_GRADIENT_START = '#CCCCCC';
@@ -11,9 +12,9 @@ const LIGHT_GRADIENT_END = '#FFFFFF';
 const DARK_GRADIENT_START = '#22283B';
 const DARK_GRADIENT_END = '#555B6E';
 
-export const Logo = ({ isDark, onClick }: IProps) => (
+export const Logo = ({ isDark, onClick, className = '' }: IProps) => (
   <svg
-    className="logo"
+    className={className}
     onClick={() => onClick && onClick()}
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
diff --git a/src/js/index.tsx b/src/js/index.tsx
index aa9c79b45..877d941cf 100644
--- a/src/js/index.tsx
+++ b/src/js/index.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
+import 'tailwindcss/tailwind.css';
+
 import { App } from './app';
 
 ReactDOM.render(<App />, document.getElementById('gitify'));
diff --git a/src/js/routes/__snapshots__/enterprise-login.test.tsx.snap b/src/js/routes/__snapshots__/enterprise-login.test.tsx.snap
index 23f7e8373..552c20c73 100644
--- a/src/js/routes/__snapshots__/enterprise-login.test.tsx.snap
+++ b/src/js/routes/__snapshots__/enterprise-login.test.tsx.snap
@@ -3,38 +3,58 @@
 exports[`routes/enterprise-login.js renders correctly 1`] = `
 <div>
   <div
-    className="sc-Axmtr ebMSwT"
+    className="flex justify-between items-center mt-4 py-2 mx-8"
   >
-    <h3
-      className="sc-fzozJi jqfsXz"
-    >
-      Login to GitHub Enterprise
-    </h3>
     <button
       aria-label="Go Back"
-      className="sc-fzoLsD cUlvxj"
+      className="focus:outline-none"
       onClick={[Function]}
     >
-      ×
+      <svg
+        aria-hidden="true"
+        className="hover:text-gray-400"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z\\"></path>",
+          }
+        }
+        fill="currentColor"
+        height={20}
+        role="img"
+        style={
+          Object {
+            "display": "inline-block",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={20}
+      />
     </button>
+    <h3
+      className="text-lg font-semibold"
+    >
+      Login with GitHub Enterprise
+    </h3>
   </div>
   <div
-    className="sc-AxmLO hfTlrw"
+    className="flex-1 px-8"
   >
     <form
       onSubmit={[Function]}
     >
       <div
-        className="sc-AxjAm euTnqr"
+        className="mt-2"
       >
         <label
-          className="sc-AxirZ iDECDC"
+          className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
           htmlFor="hostname"
         >
           Hostname
         </label>
         <input
-          className="sc-AxiKw gyFGja"
+          className="appearance-none block w-full bg-gray-100 text-grey-darker border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200"
           id="hostname"
           name="hostname"
           onBlur={[Function]}
@@ -46,16 +66,16 @@ exports[`routes/enterprise-login.js renders correctly 1`] = `
         />
       </div>
       <div
-        className="sc-AxjAm euTnqr"
+        className="mt-2"
       >
         <label
-          className="sc-AxirZ iDECDC"
+          className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
           htmlFor="clientId"
         >
           Client ID
         </label>
         <input
-          className="sc-AxiKw gyFGja"
+          className="appearance-none block w-full bg-gray-100 text-grey-darker border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200"
           id="clientId"
           name="clientId"
           onBlur={[Function]}
@@ -67,16 +87,16 @@ exports[`routes/enterprise-login.js renders correctly 1`] = `
         />
       </div>
       <div
-        className="sc-AxjAm euTnqr"
+        className="mt-2"
       >
         <label
-          className="sc-AxirZ iDECDC"
+          className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
           htmlFor="clientSecret"
         >
           Client Secret
         </label>
         <input
-          className="sc-AxiKw gyFGja"
+          className="appearance-none block w-full bg-gray-100 text-grey-darker border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200"
           id="clientSecret"
           name="clientSecret"
           onBlur={[Function]}
@@ -88,34 +108,13 @@ exports[`routes/enterprise-login.js renders correctly 1`] = `
         />
       </div>
       <button
-        className="sc-AxheI dRrlwj"
+        className="float-right px-4 py-2 mt-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white focus:outline-none"
         disabled={true}
         title="Login Button"
         type="submit"
       >
-        <svg
-          aria-hidden="true"
-          className="octicon"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
-            }
-          }
-          fill="currentColor"
-          height={16}
-          role="img"
-          style={
-            Object {
-              "display": "inline-block",
-              "userSelect": "none",
-              "verticalAlign": "text-bottom",
-            }
-          }
-          viewBox="0 0 16 16"
-          width={16}
-        />
         <span>
-          Login to GitHub Enterprise
+          Login
         </span>
       </button>
     </form>
diff --git a/src/js/routes/__snapshots__/login.test.tsx.snap b/src/js/routes/__snapshots__/login.test.tsx.snap
index fd5811652..21ccac5ac 100644
--- a/src/js/routes/__snapshots__/login.test.tsx.snap
+++ b/src/js/routes/__snapshots__/login.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`routes/login.tsx should render itself & its children 1`] = `
 <div
-  className="sc-AxjAm jdFkYF"
+  className="flex flex-1 flex-col justify-center items-center p-4"
 >
   <svg
-    className="logo"
+    className="w-16 h-16"
     onClick={[Function]}
     role="logo"
     viewBox="0 0 500 500"
@@ -48,16 +48,16 @@ exports[`routes/login.tsx should render itself & its children 1`] = `
       </g>
     </g>
   </svg>
-  <h3
-    className="sc-AxirZ kwBko"
+  <div
+    className="my-4 px-2.5 py-1.5 font-semibold text-center"
   >
     GitHub Notifications 
     <br />
      in your menu bar.
-  </h3>
+  </div>
   <button
     aria-label="Login with GitHub"
-    className="sc-AxiKw emcOUi"
+    className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center hover:bg-gray-500 hover:text-white focus:outline-none"
     onClick={[Function]}
   >
     <span>
@@ -66,7 +66,7 @@ exports[`routes/login.tsx should render itself & its children 1`] = `
   </button>
   <button
     aria-label="Login with GitHub Enterprise"
-    className="sc-AxiKw emcOUi"
+    className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center hover:bg-gray-500 hover:text-white focus:outline-none"
     onClick={[Function]}
   >
     <span>
diff --git a/src/js/routes/__snapshots__/notifications.test.tsx.snap b/src/js/routes/__snapshots__/notifications.test.tsx.snap
index d5326ea7a..a100146a5 100644
--- a/src/js/routes/__snapshots__/notifications.test.tsx.snap
+++ b/src/js/routes/__snapshots__/notifications.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`routes/notifications.ts should render itself & its children (all read n
 exports[`routes/notifications.ts should render itself & its children (error page - oops) 1`] = `<Oops />`;
 
 exports[`routes/notifications.ts should render itself & its children (with notifications) 1`] = `
-<div>
+Array [
   <AccountNotifications
     hostname="github.com"
     notifications={
@@ -138,7 +138,7 @@ exports[`routes/notifications.ts should render itself & its children (with notif
       ]
     }
     showAccountHostname={true}
-  />
+  />,
   <AccountNotifications
     hostname="github.gitify.io"
     notifications={
@@ -232,6 +232,6 @@ exports[`routes/notifications.ts should render itself & its children (with notif
       ]
     }
     showAccountHostname={true}
-  />
-</div>
+  />,
+]
 `;
diff --git a/src/js/routes/__snapshots__/settings.test.tsx.snap b/src/js/routes/__snapshots__/settings.test.tsx.snap
index e34ecf5ba..3f7d61bf6 100644
--- a/src/js/routes/__snapshots__/settings.test.tsx.snap
+++ b/src/js/routes/__snapshots__/settings.test.tsx.snap
@@ -2,292 +2,137 @@
 
 exports[`routes/settings.tsx should render itself & its children 1`] = `
 <div
-  className="sc-AxgMl daWoeP"
+  className="flex flex-1 flex-col"
 >
   <div
-    className="sc-AxheI OvSkc"
+    className="flex justify-between items-center mt-4 py-2 mx-8"
   >
+    <button
+      aria-label="Go Back"
+      className="focus:outline-none"
+      onClick={[Function]}
+    >
+      <svg
+        aria-hidden="true"
+        className="hover:text-gray-400"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z\\"></path>",
+          }
+        }
+        fill="currentColor"
+        height={20}
+        role="img"
+        style={
+          Object {
+            "display": "inline-block",
+            "userSelect": "none",
+            "verticalAlign": "text-bottom",
+          }
+        }
+        viewBox="0 0 16 16"
+        width={20}
+      />
+    </button>
     <h3
-      className="sc-fzozJi jqfsXz"
+      className="text-lg font-semibold"
     >
       Settings
     </h3>
-    <a
-      aria-label="Close Settings"
-      className="sc-fzoLsD cUlvxj"
-      onClick={[Function]}
-    >
-      ×
-    </a>
   </div>
   <div
-    className="sc-Axmtr fLAtpJ"
+    className="flex-1 px-8"
   >
     <div
-      className="sc-AxjAm dnDkHN"
+      className="mt-1 mb-2"
     >
-      <label>
-        <div
-          className="sc-AxirZ gtlEvo"
-        >
-          <input
-            checked={false}
-            className="sc-AxhCb bORWEo"
-            label="Show only participating"
-            name="showOnlyParticipating"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <div
-            className="sc-AxhUy juIZhB"
-          >
-            <svg
-              className="sc-AxiKw bCXYxk"
-              viewBox="0 0 24 24"
-            >
-              <g
-                fill="none"
-                fillRule="evenodd"
-                stroke="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="1"
-              >
-                <g
-                  stroke="#FFFFFF"
-                  strokeWidth="3"
-                  transform="translate(6.000000, 7.000000)"
-                >
-                  <polyline
-                    points="13 0 4.0625 9 0 4.90909091"
-                  />
-                </g>
-              </g>
-            </svg>
-          </div>
-        </div>
+      <label
+        className="inline-flex items-center mt-2"
+      >
+        <input
+          checked={false}
+          className="form-checkbox h-5 w-5 text-red-600"
+          onChange={[Function]}
+          type="checkbox"
+        />
         <span
-          style={
-            Object {
-              "marginLeft": "1rem",
-            }
-          }
+          className="ml-2 text-gray-700"
         >
           Show only participating
         </span>
       </label>
     </div>
     <div
-      className="sc-AxjAm dnDkHN"
+      className="mt-1 mb-2"
     >
-      <label>
-        <div
-          className="sc-AxirZ gtlEvo"
-        >
-          <input
-            checked={true}
-            className="sc-AxhCb bORWEo"
-            label="Play sound"
-            name="playSound"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <div
-            className="sc-AxhUy gbfYbF"
-          >
-            <svg
-              className="sc-AxiKw bCXYxk"
-              viewBox="0 0 24 24"
-            >
-              <g
-                fill="none"
-                fillRule="evenodd"
-                stroke="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="1"
-              >
-                <g
-                  stroke="#FFFFFF"
-                  strokeWidth="3"
-                  transform="translate(6.000000, 7.000000)"
-                >
-                  <polyline
-                    points="13 0 4.0625 9 0 4.90909091"
-                  />
-                </g>
-              </g>
-            </svg>
-          </div>
-        </div>
+      <label
+        className="inline-flex items-center mt-2"
+      >
+        <input
+          checked={true}
+          className="form-checkbox h-5 w-5 text-red-600"
+          onChange={[Function]}
+          type="checkbox"
+        />
         <span
-          style={
-            Object {
-              "marginLeft": "1rem",
-            }
-          }
+          className="ml-2 text-gray-700"
         >
           Play sound
         </span>
       </label>
     </div>
     <div
-      className="sc-AxjAm dnDkHN"
+      className="mt-1 mb-2"
     >
-      <label>
-        <div
-          className="sc-AxirZ gtlEvo"
-        >
-          <input
-            checked={true}
-            className="sc-AxhCb bORWEo"
-            label="Show notifications"
-            name="showNotifications"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <div
-            className="sc-AxhUy gbfYbF"
-          >
-            <svg
-              className="sc-AxiKw bCXYxk"
-              viewBox="0 0 24 24"
-            >
-              <g
-                fill="none"
-                fillRule="evenodd"
-                stroke="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="1"
-              >
-                <g
-                  stroke="#FFFFFF"
-                  strokeWidth="3"
-                  transform="translate(6.000000, 7.000000)"
-                >
-                  <polyline
-                    points="13 0 4.0625 9 0 4.90909091"
-                  />
-                </g>
-              </g>
-            </svg>
-          </div>
-        </div>
+      <label
+        className="inline-flex items-center mt-2"
+      >
+        <input
+          checked={true}
+          className="form-checkbox h-5 w-5 text-red-600"
+          onChange={[Function]}
+          type="checkbox"
+        />
         <span
-          style={
-            Object {
-              "marginLeft": "1rem",
-            }
-          }
+          className="ml-2 text-gray-700"
         >
           Show notifications
         </span>
       </label>
     </div>
     <div
-      className="sc-AxjAm dnDkHN"
+      className="mt-1 mb-2"
     >
-      <label>
-        <div
-          className="sc-AxirZ gtlEvo"
-        >
-          <input
-            checked={false}
-            className="sc-AxhCb bORWEo"
-            label="On Click, Mark as Read"
-            name="onClickMarkAsRead"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <div
-            className="sc-AxhUy juIZhB"
-          >
-            <svg
-              className="sc-AxiKw bCXYxk"
-              viewBox="0 0 24 24"
-            >
-              <g
-                fill="none"
-                fillRule="evenodd"
-                stroke="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="1"
-              >
-                <g
-                  stroke="#FFFFFF"
-                  strokeWidth="3"
-                  transform="translate(6.000000, 7.000000)"
-                >
-                  <polyline
-                    points="13 0 4.0625 9 0 4.90909091"
-                  />
-                </g>
-              </g>
-            </svg>
-          </div>
-        </div>
+      <label
+        className="inline-flex items-center mt-2"
+      >
+        <input
+          checked={false}
+          className="form-checkbox h-5 w-5 text-red-600"
+          onChange={[Function]}
+          type="checkbox"
+        />
         <span
-          style={
-            Object {
-              "marginLeft": "1rem",
-            }
-          }
+          className="ml-2 text-gray-700"
         >
           On Click, Mark as Read
         </span>
       </label>
     </div>
     <div
-      className="sc-AxjAm dnDkHN"
+      className="mt-1 mb-2"
     >
-      <label>
-        <div
-          className="sc-AxirZ gtlEvo"
-        >
-          <input
-            checked={false}
-            className="sc-AxhCb bORWEo"
-            label="Open at startup"
-            name="openAtStartUp"
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <div
-            className="sc-AxhUy juIZhB"
-          >
-            <svg
-              className="sc-AxiKw bCXYxk"
-              viewBox="0 0 24 24"
-            >
-              <g
-                fill="none"
-                fillRule="evenodd"
-                stroke="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="1"
-              >
-                <g
-                  stroke="#FFFFFF"
-                  strokeWidth="3"
-                  transform="translate(6.000000, 7.000000)"
-                >
-                  <polyline
-                    points="13 0 4.0625 9 0 4.90909091"
-                  />
-                </g>
-              </g>
-            </svg>
-          </div>
-        </div>
+      <label
+        className="inline-flex items-center mt-2"
+      >
+        <input
+          checked={false}
+          className="form-checkbox h-5 w-5 text-red-600"
+          onChange={[Function]}
+          type="checkbox"
+        />
         <span
-          style={
-            Object {
-              "marginLeft": "1rem",
-            }
-          }
+          className="ml-2 text-gray-700"
         >
           Open at startup
         </span>
@@ -295,30 +140,32 @@ exports[`routes/settings.tsx should render itself & its children 1`] = `
     </div>
   </div>
   <div
-    className="sc-AxmLO dZFIDb"
+    className="flex justify-between items-center bg-gray-300 py-4 px-8"
   >
-    <small>
+    <small
+      className="font-semibold"
+    >
       Gitify v
       0.0.1
     </small>
     <div>
       <button
         aria-label="Login with GitHub Enterprise"
-        className="sc-fzpans fjToeN"
+        className="bg-gray-400 hover:bg-gray-500 hover:text-white rounded py-1 px-2 my-1 mx-2 text-sm focus:outline-none"
         onClick={[Function]}
       >
         Add Enterprise
       </button>
       <button
         aria-label="Logout"
-        className="sc-fzpans fjToeN"
+        className="bg-gray-400 hover:bg-gray-500 hover:text-white rounded py-1 px-2 my-1 mx-2 text-sm focus:outline-none"
         onClick={[Function]}
       >
         Logout
       </button>
       <button
         aria-label="Quit Gitify"
-        className="sc-fzpans fjToeN"
+        className="bg-gray-400 hover:bg-gray-500 hover:text-white rounded py-1 px-2 my-1 mx-2 text-sm focus:outline-none mr-0"
         onClick={[Function]}
       >
         Quit
diff --git a/src/js/routes/enterprise-login.tsx b/src/js/routes/enterprise-login.tsx
index 099dc2f1f..19cb538e5 100644
--- a/src/js/routes/enterprise-login.tsx
+++ b/src/js/routes/enterprise-login.tsx
@@ -3,43 +3,11 @@ const ipcRenderer = require('electron').ipcRenderer;
 import * as React from 'react';
 import { Form, FormRenderProps } from 'react-final-form';
 import { connect } from 'react-redux';
-import { MarkGithubIcon } from '@primer/octicons-react';
-import styled from 'styled-components';
+import { ArrowLeftIcon } from '@primer/octicons-react';
 
 import { AppState } from '../../types/reducers';
 import { authGithub } from '../utils/helpers';
 import { FieldInput } from '../components/fields/input';
-import { LoginButton } from './login';
-
-const Header = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 0 1rem;
-  padding: 1rem 2rem 0;
-`;
-
-const Main = styled.div`
-  flex: 1;
-  padding: 0 2rem;
-`;
-
-const Title = styled.h3`
-  margin: 0;
-  font-weight: 500;
-`;
-
-const ButtonClose = styled.button`
-  border: 0;
-  padding: 0.25rem;
-  font-size: 2rem;
-  font-weight: 500;
-
-  &:hover {
-    cursor: pointer;
-    color: ${(props) => props.theme.primary};
-  }
-`;
 
 interface IValues {
   hostname?: string;
@@ -127,14 +95,14 @@ export class EnterpriseLogin extends React.Component<IProps, IState> {
           placeholder="ABC123DEF456"
         />
 
-        <LoginButton
+        <button
+          className="float-right px-4 py-2 mt-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white focus:outline-none"
           disabled={submitting || pristine}
           type="submit"
           title="Login Button"
         >
-          <MarkGithubIcon size={16} />
-          <span>Login to GitHub Enterprise</span>
-        </LoginButton>
+          <span>Login</span>
+        </button>
       </form>
     );
   };
@@ -146,18 +114,21 @@ export class EnterpriseLogin extends React.Component<IProps, IState> {
   render() {
     return (
       <div>
-        <Header>
-          <Title>Login to GitHub Enterprise</Title>
-
-          <ButtonClose
+        <div className="flex justify-between items-center mt-4 py-2 mx-8">
+          <button
+            className="focus:outline-none"
             aria-label="Go Back"
             onClick={() => this.props.history.goBack()}
           >
-            &times;
-          </ButtonClose>
-        </Header>
+            <ArrowLeftIcon size={20} className="hover:text-gray-400" />
+          </button>
+
+          <h3 className="text-lg font-semibold">
+            Login with GitHub Enterprise
+          </h3>
+        </div>
 
-        <Main>
+        <div className="flex-1 px-8">
           <Form
             initialValues={{
               hostname: '',
@@ -169,7 +140,7 @@ export class EnterpriseLogin extends React.Component<IProps, IState> {
           >
             {this.renderForm}
           </Form>
-        </Main>
+        </div>
       </div>
     );
   }
diff --git a/src/js/routes/login.tsx b/src/js/routes/login.tsx
index 94cb2fa56..43c06ec79 100644
--- a/src/js/routes/login.tsx
+++ b/src/js/routes/login.tsx
@@ -3,55 +3,11 @@ const { ipcRenderer } = require('electron');
 import * as React from 'react';
 import { Redirect } from 'react-router-dom';
 import { connect } from 'react-redux';
-import styled from 'styled-components';
 
 import { AppState } from '../../types/reducers';
 import { authGithub, isUserEitherLoggedIn } from '../utils/helpers';
 import { Logo } from '../components/ui/logo';
 
-const Wrapper = styled.div`
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .logo {
-    max-width: 5rem;
-    margin-top: 1rem;
-  }
-`;
-
-const Title = styled.h3`
-  margin: 1rem 0;
-  padding: 10px 5px;
-  font-weight: 400;
-  text-align: center;
-`;
-
-export const LoginButton = styled.button`
-  font-size: 0.85rem;
-  border-radius: 5px;
-  border: 1px solid ${(props) => props.theme.primary};
-
-  padding: 0.5rem 1rem;
-  margin: 0.5rem 0;
-  min-width: 16rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  background-color: ${(props) => props.theme.grayDark};
-  color: white;
-
-  &:hover {
-    background-color: ${(props) => props.theme.grayDarker};
-  }
-
-  span {
-    margin-left: 0.5rem;
-  }
-`;
-
 interface IProps {
   isEitherLoggedIn: boolean;
   dispatch: any;
@@ -81,28 +37,33 @@ export class LoginPage extends React.Component<IProps> {
       return <Redirect to="/" />;
     }
 
+    const loginButtonClass =
+      'w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center hover:bg-gray-500 hover:text-white focus:outline-none';
+
     return (
-      <Wrapper>
-        <Logo isDark />
+      <div className="flex flex-1 flex-col justify-center items-center p-4">
+        <Logo className="w-16 h-16" isDark />
 
-        <Title>
+        <div className="my-4 px-2.5 py-1.5 font-semibold text-center">
           GitHub Notifications <br /> in your menu bar.
-        </Title>
+        </div>
 
-        <LoginButton
+        <button
+          className={loginButtonClass}
           onClick={() => authGithub(undefined, this.props.dispatch)}
           aria-label="Login with GitHub"
         >
           <span>Login to GitHub</span>
-        </LoginButton>
+        </button>
 
-        <LoginButton
+        <button
+          className={loginButtonClass}
           onClick={() => this.props.history.push('/enterpriselogin')}
           aria-label="Login with GitHub Enterprise"
         >
           <span>Login to GitHub Enterprise</span>
-        </LoginButton>
-      </Wrapper>
+        </button>
+      </div>
     );
   }
 }
diff --git a/src/js/routes/notifications.tsx b/src/js/routes/notifications.tsx
index 3517eee23..e290e99c8 100644
--- a/src/js/routes/notifications.tsx
+++ b/src/js/routes/notifications.tsx
@@ -26,7 +26,7 @@ export const NotificationsRoute = (props: IProps) => {
   }
 
   return (
-    <div>
+    <>
       {accountNotifications.map((account) => (
         <Account
           key={account.hostname}
@@ -35,7 +35,7 @@ export const NotificationsRoute = (props: IProps) => {
           showAccountHostname={hasMultipleAccounts}
         />
       ))}
-    </div>
+    </>
   );
 };
 
diff --git a/src/js/routes/settings.test.tsx b/src/js/routes/settings.test.tsx
index 79479fdc2..38eccfb3c 100644
--- a/src/js/routes/settings.test.tsx
+++ b/src/js/routes/settings.test.tsx
@@ -110,7 +110,7 @@ describe('routes/settings.tsx', () => {
 
   it('should go back by pressing the icon', () => {
     const { getByLabelText } = render(<SettingsRoute {...props} />);
-    fireEvent.click(getByLabelText('Close Settings'));
+    fireEvent.click(getByLabelText('Go Back'));
     expect(props.history.goBack).toHaveBeenCalledTimes(1);
   });
 
diff --git a/src/js/routes/settings.tsx b/src/js/routes/settings.tsx
index c522d0287..a90c1d3ab 100644
--- a/src/js/routes/settings.tsx
+++ b/src/js/routes/settings.tsx
@@ -2,7 +2,7 @@ const { ipcRenderer, remote } = require('electron');
 
 import * as React from 'react';
 import { connect } from 'react-redux';
-import styled from 'styled-components';
+import { ArrowLeftIcon } from '@primer/octicons-react';
 
 import { AppState, SettingsState } from '../../types/reducers';
 import { fetchNotifications, updateSetting, logout } from '../actions';
@@ -11,72 +11,6 @@ import { updateTrayIcon } from '../utils/comms';
 
 const isLinux = remote.process.platform === 'linux';
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-const Header = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 0 1rem;
-  padding: 1rem 2rem 0;
-`;
-
-const Main = styled.div`
-  flex: 1;
-  padding: 0 2rem;
-`;
-
-const Footer = styled.div`
-  margin: 1rem 0 0;
-  padding: 0.5rem 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: ${(props) => props.theme.grayLight};
-  font-size: 0.85rem;
-`;
-
-const Title = styled.h3`
-  margin: 0;
-  font-weight: 500;
-`;
-
-const ButtonClose = styled.a`
-  border: 0;
-  padding: 0.25rem;
-  font-size: 2rem;
-  font-weight: 500;
-
-  &:hover {
-    cursor: pointer;
-    color: ${(props) => props.theme.primary};
-  }
-`;
-
-const ButtonFooter = styled.button`
-  border: 0;
-  padding: 0.25rem 0.5rem;
-  margin: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  background-color: ${(props) => props.theme.primary};
-  border: 0x solid ${(props) => props.theme.danger};
-  border-radius: ${(props) => props.theme.borderRadius};
-  color: white;
-
-  &:hover {
-    background-color: ${(props) => props.theme.primaryDark};
-    color: white;
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-`;
-
 interface IProps {
   hasMultipleAccounts: boolean;
   fetchNotifications: () => any;
@@ -122,19 +56,24 @@ export class SettingsRoute extends React.Component<IProps> {
   render() {
     const { hasMultipleAccounts, settings } = this.props;
 
-    return (
-      <Wrapper>
-        <Header>
-          <Title>Settings</Title>
+    const footerButtonClass =
+      'bg-gray-400 hover:bg-gray-500 hover:text-white rounded py-1 px-2 my-1 mx-2 text-sm focus:outline-none';
 
-          <ButtonClose
-            aria-label="Close Settings"
+    return (
+      <div className="flex flex-1 flex-col">
+        <div className="flex justify-between items-center mt-4 py-2 mx-8">
+          <button
+            className="focus:outline-none"
+            aria-label="Go Back"
             onClick={() => this.props.history.goBack()}
           >
-            &times;
-          </ButtonClose>
-        </Header>
-        <Main>
+            <ArrowLeftIcon size={20} className="hover:text-gray-400" />
+          </button>
+
+          <h3 className="text-lg font-semibold">Settings</h3>
+        </div>
+
+        <div className="flex-1 px-8">
           <FieldCheckbox
             name="showOnlyParticipating"
             label="Show only participating"
@@ -177,29 +116,40 @@ export class SettingsRoute extends React.Component<IProps> {
               }
             />
           )}
-        </Main>
+        </div>
 
-        <Footer>
-          <small>Gitify v{remote.app.getVersion()}</small>
+        <div className="flex justify-between items-center bg-gray-300 py-4 px-8">
+          <small className="font-semibold">
+            Gitify v{remote.app.getVersion()}
+          </small>
 
           <div>
-            <ButtonFooter
+            <button
+              className={footerButtonClass}
               aria-label="Login with GitHub Enterprise"
               onClick={this.goToEnterprise.bind(this)}
             >
               Add Enterprise
-            </ButtonFooter>
+            </button>
 
-            <ButtonFooter aria-label="Logout" onClick={this.logout.bind(this)}>
+            <button
+              className={footerButtonClass}
+              aria-label="Logout"
+              onClick={this.logout.bind(this)}
+            >
               {hasMultipleAccounts ? 'Logout from all accounts' : 'Logout'}
-            </ButtonFooter>
+            </button>
 
-            <ButtonFooter aria-label="Quit Gitify" onClick={this.quitApp}>
+            <button
+              className={`${footerButtonClass} mr-0`}
+              aria-label="Quit Gitify"
+              onClick={this.quitApp}
+            >
               Quit
-            </ButtonFooter>
+            </button>
           </div>
-        </Footer>
-      </Wrapper>
+        </div>
+      </div>
     );
   }
 }
diff --git a/src/types/styled.d.ts b/src/types/styled.d.ts
deleted file mode 100644
index ca1161871..000000000
--- a/src/types/styled.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// import original module declaration
-import 'styled-components';
-
-// and extend it
-declare module 'styled-components' {
-  export interface DefaultTheme {
-    borderRadius: string;
-
-    primary: string;
-    success: string;
-    info: string;
-    warning: string;
-    danger: string;
-
-    grayLighter: string;
-    grayLight: string;
-
-    grayDarker: string;
-    grayDark: string;
-
-    primaryDark: string;
-  }
-}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..dbe3a3088
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  purge: ['./src/**/*.js', './src/**/*.ts', './src/**/*.tsx'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      colors: {
+        primary: '#203354',
+        success: '#2CC966',
+        info: '#8BA9C6',
+        warning: '#FCAA67',
+        danger: '#B7524F',
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/webpack.common.js b/webpack.common.js
index dcc2a111d..bf5b66b7f 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -13,6 +13,10 @@ module.exports = {
         use: 'ts-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
+      },
     ],
   },
   plugins: [
diff --git a/yarn.lock b/yarn.lock
index 558d20541..927ee4cc9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -46,13 +46,6 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.0.0":
-  version "7.10.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.1.tgz#f6d08acc6f70bbd59b436262553fb2e259a1a268"
-  integrity sha512-ewp3rvJEwLaHgyWGe4wQssC2vjks3E80WiUe2BpMb0KhreTjMROCbxXcEovTrbeGVdQct5VjQfrv9EgC+xMzCw==
-  dependencies:
-    "@babel/types" "^7.10.1"
-
 "@babel/helper-function-name@^7.10.3":
   version "7.10.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.3.tgz#79316cd75a9fa25ba9787ff54544307ed444f197"
@@ -76,7 +69,7 @@
   dependencies:
     "@babel/types" "^7.10.3"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.1":
+"@babel/helper-module-imports@^7.10.1":
   version "7.10.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.3.tgz#766fa1d57608e53e5676f23ae498ec7a95e1b11a"
   integrity sha512-Jtqw5M9pahLSUWA+76nhK9OG8nwYXzhQzVIGFoNaHnXF/r4l7kz4Fl0UAW7B6mqC5myoJiBP5/YQlXQTMfHI9w==
@@ -274,7 +267,7 @@
     "@babel/parser" "^7.10.3"
     "@babel/types" "^7.10.3"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.1", "@babel/traverse@^7.10.3", "@babel/traverse@^7.4.5":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.1", "@babel/traverse@^7.10.3":
   version "7.10.3"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.3.tgz#0b01731794aa7b77b214bcd96661f18281155d7e"
   integrity sha512-qO6623eBFhuPm0TmmrUFMT1FulCmsSeJuVGhiLodk2raUDFhhTECLd9E9jC4LBIWziqt4wgF6KuXE4d+Jz9yug==
@@ -335,27 +328,13 @@
     global-agent "^2.0.2"
     global-tunnel-ng "^2.7.1"
 
-"@emotion/is-prop-valid@^0.8.8":
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+"@fullhuman/postcss-purgecss@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.0.0.tgz#e39bf7a7d2a2c664ed151b639785b2efcbca33ff"
+  integrity sha512-cvuOgMwIVlfgWcUMqg5p33NbGUxLwMrKtDKkm3QRfOo4PRVNR6+y/xd9OyXTVZiB1bIpKNJ0ZObYPWD3DRQDtw==
   dependencies:
-    "@emotion/memoize" "0.7.4"
-
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
-
-"@emotion/stylis@^0.8.4":
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
-
-"@emotion/unitless@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+    postcss "7.0.32"
+    purgecss "^3.0.0"
 
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
@@ -777,6 +756,11 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
+"@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/prettier@^2.0.0":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.5.tgz#b6ab3bba29e16b821d84e09ecfaded462b816b00"
@@ -1031,12 +1015,21 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-walk@^7.1.1:
+acorn-node@^1.6.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn@^7.1.1:
+acorn@^7.0.0, acorn@^7.1.1:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -1251,6 +1244,18 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+autoprefixer@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.1.0.tgz#b19fd8524edef8c85c9db3bdb0c998de84e172fb"
+  integrity sha512-0/lBNwN+ZUnb5su18NZo5MBIjDaq6boQKZcxwy86Gip/CmXA2zZqUoFQLCNAGI5P25ZWSP2RWdhDJ8osfKEjoQ==
+  dependencies:
+    browserslist "^4.15.0"
+    caniuse-lite "^1.0.30001165"
+    colorette "^1.2.1"
+    fraction.js "^4.0.12"
+    normalize-range "^0.1.2"
+    postcss-value-parser "^4.1.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -1303,21 +1308,6 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-"babel-plugin-styled-components@>= 1":
-  version "1.10.7"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c"
-  integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.0.0"
-    "@babel/helper-module-imports" "^7.0.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    lodash "^4.17.11"
-
-babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.0.tgz#cf5feef29551253471cfa82fc8e0f5063df07a77"
@@ -1452,6 +1442,17 @@ browserslist@^4.14.5:
     escalade "^3.1.1"
     node-releases "^1.1.66"
 
+browserslist@^4.15.0:
+  version "4.16.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.0.tgz#410277627500be3cb28a1bfe037586fbedf9488b"
+  integrity sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==
+  dependencies:
+    caniuse-lite "^1.0.30001165"
+    colorette "^1.2.1"
+    electron-to-chromium "^1.3.621"
+    escalade "^3.1.1"
+    node-releases "^1.1.67"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -1504,6 +1505,11 @@ builder-util@22.9.1:
     stat-mode "^1.0.0"
     temp-file "^3.3.7"
 
+bytes@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -1537,26 +1543,31 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
 camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelcase@^6.0.0:
+camelcase@^6.0.0, camelcase@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
-camelize@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
-  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
-
 caniuse-lite@^1.0.30001157:
   version "1.0.30001159"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001159.tgz#bebde28f893fa9594dadcaa7d6b8e2aa0299df20"
   integrity sha512-w9Ph56jOsS8RL20K9cLND3u/+5WASWdhC/PPrf+V3/HsM3uHOavWOR1Xzakbv4Puo/srmPHudkmCRWM7Aq+/UA==
 
+caniuse-lite@^1.0.30001165:
+  version "1.0.30001165"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz#32955490d2f60290bb186bb754f2981917fa744f"
+  integrity sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -1569,7 +1580,7 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -1688,7 +1699,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -1707,11 +1718,27 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
+  integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
+  integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.4"
+
 colorette@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
@@ -1739,7 +1766,7 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^6.2.0:
+commander@^6.0.0, commander@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.0.tgz#b990bfb8ac030aedc6d11bc04d1488ffef56db75"
   integrity sha512-zP4jEKbe8SHzKJYQmq8Y9gYjtO/POJLgIdKgV7B9qNmABVFVc+ctqSX6iXh4mCpJfRBOabiZ2YKPg8ciDw6C+Q==
@@ -1811,6 +1838,17 @@ 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@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
+  integrity sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -1836,19 +1874,33 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-color-keywords@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
-  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+css-loader@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.0.1.tgz#9e4de0d6636a6266a585bd0900b422c85539d25f"
+  integrity sha512-cXc2ti9V234cq7rJzFKhirb2L2iPy8ZjALeVJAozXYz9te3r4eqLSixNAbMDJSgJEQywqXzs8gonxaboeKqwiw==
+  dependencies:
+    camelcase "^6.2.0"
+    cssesc "^3.0.0"
+    icss-utils "^5.0.0"
+    loader-utils "^2.0.0"
+    postcss "^8.1.4"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.0"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.1.0"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
+
+css-unit-converter@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
 
-css-to-react-native@^3.0.0:
+cssesc@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
-  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
-  dependencies:
-    camelize "^1.0.0"
-    css-color-keywords "^1.0.0"
-    postcss-value-parser "^4.0.2"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
 cssom@^0.4.4:
   version "0.4.4"
@@ -1985,6 +2037,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -2000,6 +2057,20 @@ detect-node@^2.0.4:
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
   integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
 
+detective@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
+  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
+  dependencies:
+    acorn-node "^1.6.1"
+    defined "^1.0.0"
+    minimist "^1.1.1"
+
+didyoumean@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff"
+  integrity sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=
+
 diff-sequences@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
@@ -2126,6 +2197,11 @@ electron-to-chromium@^1.3.591:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.603.tgz#1b71bec27fb940eccd79245f6824c63d5f7e8abf"
   integrity sha512-J8OHxOeJkoSLgBXfV9BHgKccgfLMHh+CoeRo6wJsi6m0k3otaxS/5vrHpMNSEYY4MISwewqanPOuhAtuE8riQQ==
 
+electron-to-chromium@^1.3.621:
+  version "1.3.623"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.623.tgz#b61ba1d94b27031554ea2768bb9b823501a918a0"
+  integrity sha512-CgbWTyPmJ4f9pqtqR+HPL3O0ay6BRhnpFD52TqBB2K8kTAcmAar2e93Vo1q651E4vnCHuTDuZDdbj0sTMP2QQw==
+
 electron-updater@^4.3.5:
   version "4.3.5"
   resolved "https://registry.yarnpkg.com/electron-updater/-/electron-updater-4.3.5.tgz#4fb36f593a031c87ea07ee141c9f064d5deffb15"
@@ -2520,6 +2596,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+fraction.js@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.12.tgz#0526d47c65a5fb4854df78bc77f7bec708d7b8c3"
+  integrity sha512-8Z1K0VTG4hzYY7kA/1sj4/r1/RWLBD3xwReT/RCrUCbzPszjNQCCsy3ktkU/eaEqX3MYa4pY37a52eiBlPMlhA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -2607,7 +2688,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -2766,7 +2847,7 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   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==
@@ -2797,6 +2878,11 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
+html-tags@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
+  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
+
 http-cache-semantics@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
@@ -2830,6 +2916,19 @@ iconv-lite@^0.6.2:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+icss-utils@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
+import-fresh@^3.2.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.2.tgz#fc129c160c5d68235507f4331a6baad186bdbc3e"
+  integrity sha512-cTPNrlvJT6twpYy+YmKUKrTSjWFs3bjYjAhCwm+z4EOCubZxAuO+hHpRN64TqjEaYSHs7tJAE0w1CKMGmsG/lw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
@@ -2848,6 +2947,11 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -2895,6 +2999,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3674,6 +3783,11 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+klona@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.4.tgz#7bb1e3affb0cb8624547ef7e8f6708ea2e39dfc0"
+  integrity sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==
+
 latest-version@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
@@ -3718,6 +3832,15 @@ loader-utils@^1.0.2:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -3775,12 +3898,17 @@ lodash.sortby@^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.unset@^4.1.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.unset/-/lodash.unset-4.5.2.tgz#370d1d3e85b72a7e1b0cdf2d272121306f23e4ed"
   integrity sha1-Nw0dPoW3Kn4bDN8tJyEhMG8j5O0=
 
-lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.15:
+lodash@^4.17.10, lodash@^4.17.13, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -3966,6 +4094,11 @@ mkdirp@^0.5.4:
   dependencies:
     minimist "^1.2.5"
 
+modern-normalize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.0.0.tgz#539d84a1e141338b01b346f3e27396d0ed17601e"
+  integrity sha512-1lM+BMLGuDfsdwf3rsgBSrxJwAZHFIrQ8YR61xIqdHo0uNKI9M52wNpHSrliZATJp51On6JD0AfRxd4YGSU0lw==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -3976,6 +4109,11 @@ ms@2.1.2, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+nanoid@^3.1.20:
+  version "3.1.20"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
+  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -4018,6 +4156,13 @@ nock@^12.0.3:
     lodash "^4.17.13"
     propagate "^2.0.0"
 
+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==
+  dependencies:
+    lodash.toarray "^4.4.0"
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -4040,7 +4185,7 @@ node-notifier@^8.0.0:
     uuid "^8.3.0"
     which "^2.0.2"
 
-node-releases@^1.1.66:
+node-releases@^1.1.66, node-releases@^1.1.67:
   version "1.1.67"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
   integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==
@@ -4067,6 +4212,11 @@ normalize-path@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
 normalize-url@^4.1.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
@@ -4123,6 +4273,11 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
+object-hash@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.0.3.tgz#d12db044e03cd2ca3d77c0570d87225b02e1e6ea"
+  integrity sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==
+
 object-keys@^1.0.12:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -4219,6 +4374,13 @@ package-json@^6.3.0:
     registry-url "^5.0.0"
     semver "^6.2.0"
 
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
 parse-json@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.0.0.tgz#73e5114c986d143efa3712d4ea24db9a4266f60f"
@@ -4271,6 +4433,11 @@ path-to-regexp@^1.7.0:
   dependencies:
     isarray "0.0.1"
 
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -4310,11 +4477,117 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-value-parser@^4.0.2:
+postcss-functions@^3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
+  integrity sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=
+  dependencies:
+    glob "^7.1.2"
+    object-assign "^4.1.1"
+    postcss "^6.0.9"
+    postcss-value-parser "^3.3.0"
+
+postcss-js@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
+  integrity sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==
+  dependencies:
+    camelcase-css "^2.0.1"
+    postcss "^8.1.6"
+
+postcss-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.1.0.tgz#4647a6c8dad3cb6b253fbfaa21d62201086f6e39"
+  integrity sha512-vbCkP70F3Q9PIk6d47aBwjqAMI4LfkXCoyxj+7NPNuVIwfTGdzv2KVQes59/RuxMniIgsYQCFSY42P3+ykJfaw==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
+
+postcss-modules-extract-imports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
+  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+
+postcss-modules-local-by-default@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
+  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
+postcss-modules-scope@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
+  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
+postcss-nested@^5.0.1:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.3.tgz#2f46d77a06fc98d9c22344fd097396f5431386db"
+  integrity sha512-R2LHPw+u5hFfDgJG748KpGbJyTv7Yr33/2tIMWxquYuHTd9EXu27PYnKi7BxMXLtzKC0a0WVsqHtd7qIluQu/g==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
+  integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
+  dependencies:
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
+postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
+postcss@7.0.32:
+  version "7.0.32"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
+  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+postcss@^6.0.9:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@^8.1.4, postcss@^8.1.6, postcss@^8.2.1:
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.1.tgz#eabc5557c4558059b9d9e5b15bce7ffa9089c2a8"
+  integrity sha512-RhsqOOAQzTgh1UB/IZdca7F9WDb7SUCR2Vnv1x7DbvuuggQIpoDwjK+q0rzoPffhYvWNKX5JSwS4so4K3UC6vA==
+  dependencies:
+    colorette "^1.2.1"
+    nanoid "^3.1.20"
+    source-map "^0.6.1"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -4350,6 +4623,11 @@ pretty-format@^26.0.0, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+pretty-hrtime@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -4417,6 +4695,16 @@ pupa@^2.0.1:
   dependencies:
     escape-goat "^2.0.0"
 
+purgecss@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-3.0.0.tgz#039c191871bb999894222a00c4c8b179fccdb043"
+  integrity sha512-t3FGCwyX9XWV3ffvnAXTw6Y3Z9kNlcgm14VImNK66xKi5sdqxSA2I0SFYxtmZbAKuIZVckPdazw5iKL/oY/2TA==
+  dependencies:
+    commander "^6.0.0"
+    glob "^7.0.0"
+    postcss "7.0.32"
+    postcss-selector-parser "^6.0.2"
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -4599,6 +4887,14 @@ rechoir@^0.7.0:
   dependencies:
     resolve "^1.9.0"
 
+reduce-css-calc@^2.1.6:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
+  integrity sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 reduce-flatten@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-2.0.0.tgz#734fd84e65f375d7ca4465c69798c25c9d10ae27"
@@ -4773,6 +5069,11 @@ resolve-cwd@^3.0.0:
   dependencies:
     resolve-from "^5.0.0"
 
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
 resolve-from@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
@@ -4795,7 +5096,7 @@ resolve@^1.10.0, resolve@^1.3.2:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.18.1, resolve@^1.9.0:
+resolve@^1.18.1, resolve@^1.19.0, resolve@^1.9.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
   integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
@@ -4975,11 +5276,6 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -5014,6 +5310,13 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
+  dependencies:
+    is-arrayish "^0.3.1"
+
 sisteransi@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -5248,21 +5551,13 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-styled-components@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.1.tgz#96dfb02a8025794960863b9e8e365e3b6be5518d"
-  integrity sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^0.8.8"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
+style-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c"
+  integrity sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
 
 sumchecker@^3.0.1:
   version "3.0.1"
@@ -5271,13 +5566,20 @@ sumchecker@^3.0.1:
   dependencies:
     debug "^4.1.0"
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
@@ -5313,6 +5615,32 @@ table-layout@^1.0.1:
     typical "^5.2.0"
     wordwrapjs "^4.0.0"
 
+tailwindcss@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.0.2.tgz#28e1573d29dd4547b26782facb05bcfaa92be366"
+  integrity sha512-nO9JRE1pO7SF9RnYAl6g7uzeHdrmKAFqNjT9NtZUfxqimJZAOOLOEyIEUiMq12+xIc7mC2Ey3Vf90XjHpWKfbw==
+  dependencies:
+    "@fullhuman/postcss-purgecss" "^3.0.0"
+    bytes "^3.0.0"
+    chalk "^4.1.0"
+    color "^3.1.3"
+    detective "^5.2.0"
+    didyoumean "^1.2.1"
+    fs-extra "^9.0.1"
+    html-tags "^3.1.0"
+    lodash "^4.17.20"
+    modern-normalize "^1.0.0"
+    node-emoji "^1.8.1"
+    object-hash "^2.0.3"
+    postcss-functions "^3"
+    postcss-js "^3.0.3"
+    postcss-nested "^5.0.1"
+    postcss-selector-parser "^6.0.4"
+    postcss-value-parser "^4.1.0"
+    pretty-hrtime "^1.0.3"
+    reduce-css-calc "^2.1.6"
+    resolve "^1.19.0"
+
 tapable@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -5586,6 +5914,11 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
 unique-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
@@ -5659,7 +5992,7 @@ utf8-byte-length@^1.0.1:
   resolved "https://registry.yarnpkg.com/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz#f45f150c4c66eee968186505ab93fcbb8ad6bf61"
   integrity sha1-9F8VDExm7uloGGUFq5P8u4rWv2E=
 
-util-deprecate@~1.0.1:
+util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -5939,6 +6272,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xtend@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 y18n@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
@@ -5954,6 +6292,11 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
+
 yargs-parser@20.x, yargs-parser@^20.2.2:
   version "20.2.4"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"