diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index bcca8f23..c4d690b7 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,8 +1,8 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
-  schedule:
-    interval: daily
-    time: "20:00"
-  open-pull-requests-limit: 10
+  - package-ecosystem: npm
+    directory: '/'
+    schedule:
+      interval: daily
+      time: '20:00'
+    open-pull-requests-limit: 10
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..6e942806
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,8 @@
+# Generated files which we would not like to format
+.next/
+dist/
+config/
+
+# assets
+src/assets/
+public/
diff --git a/overseerr-api.yml b/overseerr-api.yml
index ea487740..37797c9e 100644
--- a/overseerr-api.yml
+++ b/overseerr-api.yml
@@ -1866,7 +1866,7 @@ paths:
                     example: 2020
                   url:
                     type: string
-                    example: "http://www.rottentomatoes.com/m/mulan_2020/"
+                    example: 'http://www.rottentomatoes.com/m/mulan_2020/'
                   criticsScore:
                     type: number
                     example: 85
@@ -2054,7 +2054,7 @@ paths:
                     example: 2019
                   url:
                     type: string
-                    example: "http://www.rottentomatoes.com/m/mulan_2020/"
+                    example: 'http://www.rottentomatoes.com/m/mulan_2020/'
                   criticsScore:
                     type: number
                     example: 85
diff --git a/package.json b/package.json
index 9b70ecfb..1f947354 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,11 @@
     "start": "NODE_ENV=production node dist/index.js",
     "i18n:extract": "extract-messages -l=en,ja -o src/i18n/locale -d en --flat true './src/**/!(*.test).{ts,tsx}'",
     "migration:generate": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:generate",
-    "migration:run": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:run"
+    "migration:run": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:run",
+    "format": "prettier --write ."
   },
   "dependencies": {
     "@svgr/webpack": "^5.4.0",
-    "@tailwindcss/ui": "^0.6.2",
     "axios": "^0.20.0",
     "body-parser": "^1.19.0",
     "bowser": "^2.11.0",
@@ -53,6 +53,9 @@
     "@babel/cli": "^7.11.6",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@tailwindcss/aspect-ratio": "^0.2.0",
+    "@tailwindcss/forms": "^0.2.1",
+    "@tailwindcss/typography": "^0.3.1",
     "@types/body-parser": "^1.19.0",
     "@types/cookie-parser": "^1.4.2",
     "@types/express": "^4.17.8",
@@ -71,6 +74,7 @@
     "@types/yup": "^0.29.9",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^3.10.1",
+    "autoprefixer": "^9",
     "babel-plugin-react-intl": "^8.2.2",
     "babel-plugin-react-intl-auto": "^3.3.0",
     "commitizen": "^4.2.1",
@@ -86,9 +90,10 @@
     "husky": "^4.3.0",
     "lint-staged": "^10.4.0",
     "nodemon": "^2.0.4",
+    "postcss": "^7",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.1.2",
-    "tailwindcss": "^1.8.12",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-node": "^9.0.0",
     "typescript": "^4.0.2"
   },
diff --git a/src/components/Common/Badge/index.tsx b/src/components/Common/Badge/index.tsx
index 7cabbd50..62fd9072 100644
--- a/src/components/Common/Badge/index.tsx
+++ b/src/components/Common/Badge/index.tsx
@@ -14,7 +14,7 @@ const Badge: React.FC<BadgeProps> = ({ badgeType = 'default', children }) => {
       badgeStyle.push('bg-red-600 text-red-100');
       break;
     case 'warning':
-      badgeStyle.push('bg-orange-500 text-orange-100');
+      badgeStyle.push('bg-yellow-500 text-yellow-100');
       break;
     case 'success':
       badgeStyle.push('bg-green-400 text-green-100');
diff --git a/src/components/Common/Button/index.tsx b/src/components/Common/Button/index.tsx
index 4af5e060..278ac771 100644
--- a/src/components/Common/Button/index.tsx
+++ b/src/components/Common/Button/index.tsx
@@ -26,32 +26,32 @@ const Button: React.FC<ButtonProps> = ({
   switch (buttonType) {
     case 'primary':
       buttonStyle.push(
-        'text-white bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 disabled:opacity-50'
+        'text-white bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 disabled:opacity-50'
       );
       break;
     case 'danger':
       buttonStyle.push(
-        'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 focus:shadow-outline-red active:bg-red-700 disabled:opacity-50'
+        'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 focus:ring-red active:bg-red-700 disabled:opacity-50'
       );
       break;
     case 'warning':
       buttonStyle.push(
-        'text-white bg-orange-500 hover:bg-orange-400 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700 disabled:opacity-50'
+        'text-white bg-yellow-500 hover:bg-yellow-400 focus:border-yellow-700 focus:ring-yellow active:bg-yellow-700 disabled:opacity-50'
       );
       break;
     case 'success':
       buttonStyle.push(
-        'text-white bg-green-400 hover:bg-green-300 focus:border-green-700 focus:shadow-outline-green active:bg-green-700 disabled:opacity-50'
+        'text-white bg-green-400 hover:bg-green-300 focus:border-green-700 focus:ring-green active:bg-green-700 disabled:opacity-50'
       );
       break;
     case 'ghost':
       buttonStyle.push(
-        'text-white bg-transaprent border border-cool-gray-600 hover:border-cool-gray-200 focus:border-cool-gray-100 active:border-cool-gray-100 disabled:opacity-50'
+        'text-white bg-transaprent border border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100 disabled:opacity-50'
       );
       break;
     default:
       buttonStyle.push(
-        'leading-5 font-medium rounded-md text-gray-200 bg-cool-gray-500 hover:bg-cool-gray-400 hover:text-white focus:border-blue-300 focus:shadow-outline-blue active:text-gray-200 active:bg-cool-gray-400 disabled:opacity-50'
+        'leading-5 font-medium rounded-md text-gray-200 bg-gray-500 hover:bg-gray-400 hover:text-white focus:border-blue-300 focus:ring-blue active:text-gray-200 active:bg-gray-400 disabled:opacity-50'
       );
   }
 
diff --git a/src/components/Common/ButtonWithDropdown/index.tsx b/src/components/Common/ButtonWithDropdown/index.tsx
index 51d2abd3..0219f0bf 100644
--- a/src/components/Common/ButtonWithDropdown/index.tsx
+++ b/src/components/Common/ButtonWithDropdown/index.tsx
@@ -41,7 +41,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
     <span className="relative z-0 inline-flex shadow-sm rounded-md">
       <button
         type="button"
-        className={`relative inline-flex items-center px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-500 text-sm leading-5 font-medium hover:text-white focus:shadow-outline-indigo active:bg-indigo-700 focus:z-10 focus:outline-none focus:shadow-outline-blue transition ease-in-out duration-150 ${
+        className={`relative inline-flex items-center px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-500 text-sm leading-5 font-medium hover:text-white focus:ring-indigo active:bg-indigo-700 focus:z-10 focus:outline-none focus:ring-blue transition ease-in-out duration-150 ${
           children ? 'rounded-l-md' : 'rounded-md'
         }`}
         ref={buttonRef}
@@ -53,7 +53,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
         {children && (
           <button
             type="button"
-            className="relative inline-flex items-center px-2 py-2 rounded-r-md bg-indigo-700 hover:bg-indigo-500 text-sm leading-5 font-medium text-white focus:z-10 focus:outline-none active:bg-indigo-700 border border-indigo-600 focus:shadow-outline-blue transition ease-in-out duration-150"
+            className="relative inline-flex items-center px-2 py-2 rounded-r-md bg-indigo-700 hover:bg-indigo-500 text-sm leading-5 font-medium text-white focus:z-10 focus:outline-none active:bg-indigo-700 border border-indigo-600 focus:ring-blue transition ease-in-out duration-150"
             aria-label="Expand"
             onClick={() => setIsOpen((state) => !state)}
           >
@@ -85,7 +85,7 @@ const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
           leaveTo="transform opacity-0 scale-95"
         >
           <div className="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg">
-            <div className="rounded-md bg-indigo-600 shadow-xs">
+            <div className="rounded-md bg-indigo-600 ring-1 ring-black ring-opacity-5">
               <div className="py-1">{children}</div>
             </div>
           </div>
diff --git a/src/components/Common/Header/index.tsx b/src/components/Common/Header/index.tsx
index 1c0ec55b..05f63c3b 100644
--- a/src/components/Common/Header/index.tsx
+++ b/src/components/Common/Header/index.tsx
@@ -13,12 +13,12 @@ const Header: React.FC<HeaderProps> = ({
   return (
     <div className="md:flex md:items-center md:justify-between mt-8 mb-8">
       <div className={`flex-1 min-w-0 mx-${extraMargin}`}>
-        <h2 className="text-2xl font-bold leading-7 text-cool-gray-100 sm:text-4xl sm:leading-9 truncate sm:overflow-visible">
+        <h2 className="text-2xl font-bold leading-7 text-gray-100 sm:text-4xl sm:leading-9 truncate sm:overflow-visible">
           <span className="bg-clip-text text-transparent bg-gradient-to-br from-indigo-400 to-purple-400">
             {children}
           </span>
         </h2>
-        {subtext && <div className="text-cool-gray-400 mt-2">{subtext}</div>}
+        {subtext && <div className="text-gray-400 mt-2">{subtext}</div>}
       </div>
     </div>
   );
diff --git a/src/components/Common/ListView/index.tsx b/src/components/Common/ListView/index.tsx
index f2fe94b7..890ff5da 100644
--- a/src/components/Common/ListView/index.tsx
+++ b/src/components/Common/ListView/index.tsx
@@ -27,7 +27,7 @@ const ListView: React.FC<ListViewProps> = ({
   return (
     <>
       {isEmpty && (
-        <div className="w-full mt-64 text-2xl text-center text-cool-gray-400">
+        <div className="w-full mt-64 text-2xl text-center text-gray-400">
           No Results
         </div>
       )}
diff --git a/src/components/Common/LoadingSpinner/index.tsx b/src/components/Common/LoadingSpinner/index.tsx
index 570de01a..3e3451bf 100644
--- a/src/components/Common/LoadingSpinner/index.tsx
+++ b/src/components/Common/LoadingSpinner/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const LoadingSpinner: React.FC = () => {
   return (
-    <div className="h-64 inset-0 flex justify-center items-center text-cool-gray-200">
+    <div className="h-64 inset-0 flex justify-center items-center text-gray-200">
       <svg
         className="w-16 h-16"
         viewBox="0 0 38 38"
diff --git a/src/components/Common/Modal/index.tsx b/src/components/Common/Modal/index.tsx
index bca4ac5a..3babc9b0 100644
--- a/src/components/Common/Modal/index.tsx
+++ b/src/components/Common/Modal/index.tsx
@@ -77,7 +77,7 @@ const Modal: React.FC<ModalProps> = ({
     <>
       {ReactDOM.createPortal(
         <animated.div
-          className="fixed top-0 left-0 right-0 bottom-0 bg-cool-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
+          className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
           style={props.style}
           onKeyDown={(e) => {
             if (e.key === 'Escape') {
@@ -103,7 +103,7 @@ const Modal: React.FC<ModalProps> = ({
               item && (
                 <animated.div
                   style={props}
-                  className="inline-block align-bottom bg-cool-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
+                  className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
                   role="dialog"
                   aria-modal="true"
                   aria-labelledby="modal-headline"
@@ -112,7 +112,7 @@ const Modal: React.FC<ModalProps> = ({
                 >
                   <div className="sm:flex sm:items-center">
                     {iconSvg && (
-                      <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-cool-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
+                      <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
                         {iconSvg}
                       </div>
                     )}
@@ -132,7 +132,7 @@ const Modal: React.FC<ModalProps> = ({
                     </div>
                   </div>
                   {children && (
-                    <div className="mt-4 text-sm leading-5 text-cool-gray-300">
+                    <div className="mt-4 text-sm leading-5 text-gray-300">
                       {children}
                     </div>
                   )}
diff --git a/src/components/Common/SlideOver/index.tsx b/src/components/Common/SlideOver/index.tsx
index 434031b1..97ee1a3f 100644
--- a/src/components/Common/SlideOver/index.tsx
+++ b/src/components/Common/SlideOver/index.tsx
@@ -46,7 +46,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
       leaveTo="opacity-0"
     >
       <div
-        className={`z-50 fixed inset-0 overflow-hidden bg-opacity-50 bg-cool-gray-800`}
+        className={`z-50 fixed inset-0 overflow-hidden bg-opacity-50 bg-gray-800`}
       >
         <div className="absolute inset-0 overflow-hidden">
           <section className="absolute inset-y-0 right-0 pl-10 max-w-full flex">
@@ -61,7 +61,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
               leaveTo="translate-x-full"
             >
               <div className="w-screen max-w-md" ref={slideoverRef}>
-                <div className="h-full flex flex-col bg-cool-gray-700 shadow-xl overflow-y-scroll">
+                <div className="h-full flex flex-col bg-gray-700 shadow-xl overflow-y-scroll">
                   <header className="space-y-1 py-6 px-4 bg-indigo-600 sm:px-6">
                     <div className="flex items-center justify-between space-x-3">
                       <h2 className="text-lg leading-7 font-medium text-white">
diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx
index 7d435c72..cdc76ee7 100644
--- a/src/components/Discover/index.tsx
+++ b/src/components/Discover/index.tsx
@@ -77,7 +77,7 @@ const Discover: React.FC = () => {
     <>
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
-          <div className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+          <div className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
             <span>
               <FormattedMessage {...messages.recentlyAdded} />
             </span>
@@ -99,7 +99,7 @@ const Discover: React.FC = () => {
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <Link href="/requests">
-            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
               <span>
                 <FormattedMessage {...messages.recentrequests} />
               </span>
@@ -137,7 +137,7 @@ const Discover: React.FC = () => {
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <Link href="/discover/movies/upcoming">
-            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
               <span>
                 <FormattedMessage {...messages.upcoming} />
               </span>
@@ -180,7 +180,7 @@ const Discover: React.FC = () => {
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <Link href="/discover/trending">
-            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
               <span>
                 <FormattedMessage {...messages.trending} />
               </span>
@@ -244,7 +244,7 @@ const Discover: React.FC = () => {
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <Link href="/discover/movies">
-            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
               <span>
                 <FormattedMessage {...messages.popularmovies} />
               </span>
@@ -287,7 +287,7 @@ const Discover: React.FC = () => {
       <div className="md:flex md:items-center md:justify-between mb-4 mt-4">
         <div className="flex-1 min-w-0">
           <Link href="/discover/tv">
-            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
               <span>
                 <FormattedMessage {...messages.populartv} />
               </span>
diff --git a/src/components/Layout/LanguagePicker/index.tsx b/src/components/Layout/LanguagePicker/index.tsx
index 1a8669a6..701fe030 100644
--- a/src/components/Layout/LanguagePicker/index.tsx
+++ b/src/components/Layout/LanguagePicker/index.tsx
@@ -37,7 +37,7 @@ const LanguagePicker: React.FC = () => {
     <div className="ml-3 relative">
       <div>
         <button
-          className="p-1 text-gray-400 rounded-full hover:bg-cool-gray-500 hover:text-white focus:outline-none focus:shadow-outline focus:text-white"
+          className="p-1 text-gray-400 rounded-full hover:bg-gray-500 hover:text-white focus:outline-none focus:ring focus:text-white"
           aria-label="Language Picker"
           onClick={() => setDropdownOpen(true)}
         >
@@ -68,17 +68,17 @@ const LanguagePicker: React.FC = () => {
           className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"
           ref={dropdownRef}
         >
-          <div className="py-2 px-2 rounded-md bg-cool-gray-700 shadow-xs">
+          <div className="py-2 px-2 rounded-md bg-gray-700 ring-1 ring-black ring-opacity-5">
             <div>
               <label
                 htmlFor="language"
-                className="block text-sm leading-5 font-medium text-cool-gray-300 pb-2"
+                className="block text-sm leading-5 font-medium text-gray-300 pb-2"
               >
                 <FormattedMessage {...messages.changelanguage} />
               </label>
               <select
                 id="language"
-                className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 text-white bg-cool-gray-700 border-cool-gray-600 focus:outline-none focus:shadow-outline-indigo focus:border-blue-800 sm:text-sm sm:leading-5"
+                className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 text-white bg-gray-700 border-gray-600 focus:outline-none focus:ring-indigo focus:border-blue-800 sm:text-sm sm:leading-5"
                 onChange={(e) =>
                   setLocale && setLocale(e.target.value as AvailableLocales)
                 }
diff --git a/src/components/Layout/Notifications/index.tsx b/src/components/Layout/Notifications/index.tsx
index 9a23529c..9e7b7f6f 100644
--- a/src/components/Layout/Notifications/index.tsx
+++ b/src/components/Layout/Notifications/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 const Notifications: React.FC = () => {
   return (
     <button
-      className="p-1 text-gray-400 rounded-full hover:bg-cool-gray-500 hover:text-white focus:outline-none focus:shadow-outline focus:text-white"
+      className="p-1 text-gray-400 rounded-full hover:bg-gray-500 hover:text-white focus:outline-none focus:ring focus:text-white"
       aria-label="Notifications"
     >
       <svg
diff --git a/src/components/Layout/SearchInput/index.tsx b/src/components/Layout/SearchInput/index.tsx
index 7d3a57dc..e485fa5a 100644
--- a/src/components/Layout/SearchInput/index.tsx
+++ b/src/components/Layout/SearchInput/index.tsx
@@ -27,7 +27,7 @@ const SearchInput: React.FC = () => {
           </div>
           <input
             id="search_field"
-            className="block w-full h-full pl-8 pr-3 py-2 rounded-md bg-cool-gray-600 text-white placeholder-gray-300 focus:outline-none focus:placeholder-gray-400 sm:text-base"
+            className="block w-full h-full pl-8 pr-3 py-2 rounded-md border-transparent focus:border-transparent bg-gray-600 text-white placeholder-gray-300 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             type="search"
             value={searchValue}
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index c27223ca..b5de5f2e 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -168,7 +168,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                   </div>
                   <div className="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
                     <div className="flex-shrink-0 flex items-center px-4">
-                      <span className="text-xl text-cool-gray-50">
+                      <span className="text-xl text-gray-50">
                         <Link href="/">
                           <a>
                             <img src="/logo.png" alt="Overseerr Logo" />
@@ -232,7 +232,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
           <div className="flex flex-col h-0 flex-1 bg-gray-800">
             <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
               <div className="flex items-center flex-shrink-0 px-4">
-                <span className="text-2xl text-cool-gray-50">
+                <span className="text-2xl text-gray-50">
                   <Link href="/">
                     <a>
                       <img src="/logo.png" alt="Overseerr Logo" />
diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx
index 2fe31863..a6e2287f 100644
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -22,7 +22,7 @@ const UserDropdown: React.FC = () => {
     <div className="ml-3 relative">
       <div>
         <button
-          className="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline"
+          className="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:ring"
           id="user-menu"
           aria-label="User menu"
           aria-haspopup="true"
@@ -45,7 +45,7 @@ const UserDropdown: React.FC = () => {
           ref={dropdownRef}
         >
           <div
-            className="py-1 rounded-md bg-cool-gray-700 shadow-xs"
+            className="py-1 rounded-md bg-gray-700 ring-1 ring-black ring-opacity-5"
             role="menu"
             aria-orientation="vertical"
             aria-labelledby="user-menu"
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 529861fd..b9eea581 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -11,11 +11,11 @@ const Layout: React.FC = ({ children }) => {
   const router = useRouter();
 
   return (
-    <div className="min-h-full h-full flex bg-cool-gray-900">
+    <div className="min-h-full h-full flex bg-gray-900">
       <Sidebar open={isSidebarOpen} setClosed={() => setSidebarOpen(false)} />
 
       <div className="flex flex-col w-0 flex-1 md:ml-64 relative mb-16">
-        <div className="z-10 flex-shrink-0 flex h-16 bg-cool-gray-600 shadow fixed right-0 left-0 md:left-64">
+        <div className="z-10 flex-shrink-0 flex h-16 bg-gray-600 shadow fixed right-0 left-0 md:left-64">
           <button
             className="px-4 border-r border-gray-800 text-gray-200 focus:outline-none focus:bg-gray-300 focus:text-gray-600 md:hidden"
             aria-label="Open sidebar"
@@ -77,7 +77,7 @@ const Layout: React.FC = ({ children }) => {
                       <p className="mt-3 text-sm leading-5 md:mt-0 md:ml-6">
                         <a
                           href="http://github.com/sct/overseerr"
-                          className="whitespace-no-wrap font-medium text-indigo-100 hover:text-white transition ease-in-out duration-150"
+                          className="whitespace-nowrap font-medium text-indigo-100 hover:text-white transition ease-in-out duration-150"
                           target="_blank"
                           rel="noreferrer"
                         >
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index 2d58ab82..f9864eb5 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -35,7 +35,7 @@ const Login: React.FC = () => {
   }, [user, router]);
 
   return (
-    <div className="min-h-screen bg-cool-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative">
+    <div className="min-h-screen bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative">
       <ImageFader
         backgroundImages={[
           '/images/rotate1.jpg',
@@ -50,13 +50,13 @@ const Login: React.FC = () => {
           className="mx-auto max-h-32 w-auto"
           alt="Overseerr Logo"
         />
-        <h2 className="mt-2 text-center text-3xl leading-9 font-extrabold text-cool-gray-100">
+        <h2 className="mt-2 text-center text-3xl leading-9 font-extrabold text-gray-100">
           Log in to continue
         </h2>
       </div>
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md relative z-50">
         <div
-          className="bg-cool-gray-800 bg-opacity-50 py-8 px-4 shadow sm:rounded-lg sm:px-10"
+          className="bg-gray-800 bg-opacity-50 py-8 px-4 shadow sm:rounded-lg sm:px-10"
           style={{ backdropFilter: 'blur(5px)' }}
         >
           <PlexLoginButton
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index 10d7311e..a9f9a516 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -125,7 +125,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
       className="bg-cover bg-center -mx-4 -mt-2 px-4 sm:px-8 pt-4 "
       style={{
         height: 493,
-        backgroundImage: `linear-gradient(180deg, rgba(45, 55, 72, 0.47) 0%, #1A202E 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,
+        backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,
       }}
     >
       <RequestModal
@@ -145,20 +145,18 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         subText={data.title}
       >
         <h3 className="text-xl mb-2">Requests</h3>
-        <div className="bg-cool-gray-600 shadow overflow-hidden rounded-md">
+        <div className="bg-gray-600 shadow overflow-hidden rounded-md">
           <ul>
             {data.mediaInfo?.requests?.map((request) => (
               <li
                 key={`manage-request-${request.id}`}
-                className="border-b last:border-b-0 border-cool-gray-700"
+                className="border-b last:border-b-0 border-gray-700"
               >
                 <RequestBlock request={request} onUpdate={() => revalidate()} />
               </li>
             ))}
             {(data.mediaInfo?.requests ?? []).length === 0 && (
-              <li className="text-center py-4 text-cool-gray-400">
-                No requests
-              </li>
+              <li className="text-center py-4 text-gray-400">No requests</li>
             )}
           </ul>
         </div>
@@ -171,7 +169,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             >
               Clear All Media Data
             </Button>
-            <div className="text-sm text-cool-gray-400 mt-2">
+            <div className="text-sm text-gray-400 mt-2">
               This will remove all media data including all requests for this
               item. This action is irreversible. If this item exists in your
               Plex library, the media information will be recreated next sync.
@@ -373,9 +371,9 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           </p>
         </div>
         <div className="w-full md:w-80 mt-8 md:mt-0">
-          <div className="bg-cool-gray-900 rounded-lg shadow border border-cool-gray-800">
+          <div className="bg-gray-900 rounded-lg shadow border border-gray-800">
             {(data.voteCount > 0 || ratingData) && (
-              <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0 items-center justify-center">
+              <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0 items-center justify-center">
                 {ratingData?.criticsRating && (
                   <>
                     <span className="text-sm">
@@ -385,7 +383,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                         <RTFresh className="w-6 mr-1" />
                       )}
                     </span>
-                    <span className="text-cool-gray-400 text-sm mr-4 last:mr-0">
+                    <span className="text-gray-400 text-sm mr-4 last:mr-0">
                       {ratingData.criticsScore}%
                     </span>
                   </>
@@ -399,7 +397,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                         <RTAudFresh className="w-6 mr-1" />
                       )}
                     </span>
-                    <span className="text-cool-gray-400 text-sm mr-4 last:mr-0">
+                    <span className="text-gray-400 text-sm mr-4 last:mr-0">
                       {ratingData.audienceScore}%
                     </span>
                   </>
@@ -409,18 +407,18 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                     <span className="text-sm">
                       <TmdbLogo className="w-6 mr-2" />
                     </span>
-                    <span className="text-cool-gray-400 text-sm">
+                    <span className="text-gray-400 text-sm">
                       {data.voteAverage}/10
                     </span>
                   </>
                 )}
               </div>
             )}
-            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
               <span className="text-sm">
                 <FormattedMessage {...messages.releasedate} />
               </span>
-              <span className="flex-1 text-right text-cool-gray-400 text-sm">
+              <span className="flex-1 text-right text-gray-400 text-sm">
                 <FormattedDate
                   value={new Date(data.releaseDate)}
                   year="numeric"
@@ -429,20 +427,20 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 />
               </span>
             </div>
-            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
               <span className="text-sm">
                 <FormattedMessage {...messages.status} />
               </span>
-              <span className="flex-1 text-right text-cool-gray-400 text-sm">
+              <span className="flex-1 text-right text-gray-400 text-sm">
                 {data.status}
               </span>
             </div>
             {data.revenue > 0 && (
-              <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
+              <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
                 <span className="text-sm">
                   <FormattedMessage {...messages.revenue} />
                 </span>
-                <span className="flex-1 text-right text-cool-gray-400 text-sm">
+                <span className="flex-1 text-right text-gray-400 text-sm">
                   <FormattedNumber
                     currency="USD"
                     style="currency"
@@ -452,11 +450,11 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
               </div>
             )}
             {data.budget > 0 && (
-              <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
+              <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
                 <span className="text-sm">
                   <FormattedMessage {...messages.budget} />
                 </span>
-                <span className="flex-1 text-right text-cool-gray-400 text-sm">
+                <span className="flex-1 text-right text-gray-400 text-sm">
                   <FormattedNumber
                     currency="USD"
                     style="currency"
@@ -465,11 +463,11 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 </span>
               </div>
             )}
-            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
               <span className="text-sm">
                 <FormattedMessage {...messages.originallanguage} />
               </span>
-              <span className="flex-1 text-right text-cool-gray-400 text-sm">
+              <span className="flex-1 text-right text-gray-400 text-sm">
                 {data.originalLanguage}
               </span>
             </div>
@@ -479,7 +477,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <Link href="/movie/[movieId]/cast" as={`/movie/${data.id}/cast`}>
-            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
               <span>
                 <FormattedMessage {...messages.cast} />
               </span>
@@ -522,7 +520,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 href="/movie/[movieId]/recommendations"
                 as={`/movie/${data.id}/recommendations`}
               >
-                <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+                <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
                   <span>
                     <FormattedMessage {...messages.recommendations} />
                   </span>
@@ -572,7 +570,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 href="/movie/[movieId]/similar"
                 as={`/movie/${data.id}/similar`}
               >
-                <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+                <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
                   <span>
                     <FormattedMessage {...messages.similar} />
                   </span>
diff --git a/src/components/PendingRequest/index.tsx b/src/components/PendingRequest/index.tsx
index b7bcb3b5..def70ac4 100644
--- a/src/components/PendingRequest/index.tsx
+++ b/src/components/PendingRequest/index.tsx
@@ -35,12 +35,12 @@ const PendingRequest: React.FC<PendingRequestProps> = ({
   };
 
   return (
-    <div className="bg-cool-gray-900 border border-cool-gray-800 sm:rounded-lg mb-6 shadow rounded-lg">
+    <div className="bg-gray-900 border border-gray-800 sm:rounded-lg mb-6 shadow rounded-lg">
       <div className="px-4 py-5 sm:p-6">
-        <h3 className="text-lg leading-6 font-medium text-cool-gray-100">
+        <h3 className="text-lg leading-6 font-medium text-gray-100">
           <FormattedMessage {...messages.pendingtitle} />
         </h3>
-        <div className="mt-2 max-w-xl text-sm leading-5 text-cool-gray-400">
+        <div className="mt-2 max-w-xl text-sm leading-5 text-gray-400">
           <p>
             <FormattedMessage
               {...messages.pendingdescription}
diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx
index ca57a948..2767e73a 100644
--- a/src/components/PersonCard/index.tsx
+++ b/src/components/PersonCard/index.tsx
@@ -17,7 +17,7 @@ const PersonCard: React.FC<PersonCardProps> = ({
     <div
       className={`relative ${
         canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'
-      } bg-cool-gray-600 rounded-lg text-white shadow-lg hover:bg-cool-gray-500 transition ease-in-out duration-150 cursor-pointer`}
+      } bg-gray-600 rounded-lg text-white shadow-lg hover:bg-gray-500 transition ease-in-out duration-150 cursor-pointer`}
     >
       <div style={{ paddingBottom: '150%' }}>
         <div className="absolute inset-0 flex flex-col items-center justify-center">
@@ -45,7 +45,7 @@ const PersonCard: React.FC<PersonCardProps> = ({
           )}
           <div className="whitespace-normal text-center">{name}</div>
           {subName && (
-            <div className="whitespace-normal text-center text-sm text-cool-gray-300">
+            <div className="whitespace-normal text-center text-sm text-gray-300">
               {subName}
             </div>
           )}
diff --git a/src/components/RequestModal/TvRequestModal.tsx b/src/components/RequestModal/TvRequestModal.tsx
index 549e3dd9..a78f852d 100644
--- a/src/components/RequestModal/TvRequestModal.tsx
+++ b/src/components/RequestModal/TvRequestModal.tsx
@@ -210,7 +210,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
               <table className="min-w-full">
                 <thead>
                   <tr>
-                    <th className="px-4 py-3 bg-cool-gray-500 w-16">
+                    <th className="px-4 py-3 bg-gray-500 w-16">
                       <span
                         role="checkbox"
                         tabIndex={0}
@@ -233,22 +233,22 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                           aria-hidden="true"
                           className={`${
                             isAllSeasons() ? 'translate-x-5' : 'translate-x-0'
-                          } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                          } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
                         ></span>
                       </span>
                     </th>
-                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                       Season
                     </th>
-                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                       # Of Episodes
                     </th>
-                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                       Status
                     </th>
                   </tr>
                 </thead>
-                <tbody className="bg-cool-gray-600 divide-y">
+                <tbody className="bg-gray-600 divide-y">
                   {data?.seasons
                     .filter((season) => season.seasonNumber !== 0)
                     .map((season) => {
@@ -260,7 +260,7 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                       );
                       return (
                         <tr key={`season-${season.id}`}>
-                          <td className="px-4 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-100">
+                          <td className="px-4 py-4 whitespace-nowrap text-sm leading-5 font-medium text-gray-100">
                             <span
                               role="checkbox"
                               tabIndex={0}
@@ -297,19 +297,19 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
                                   isSelectedSeason(season.seasonNumber)
                                     ? 'translate-x-5'
                                     : 'translate-x-0'
-                                } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:shadow-outline group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
+                                } absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform group-focus:ring group-focus:border-blue-300 transition-transform ease-in-out duration-200`}
                               ></span>
                             </span>
                           </td>
-                          <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-100">
+                          <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 font-medium text-gray-100">
                             {season.seasonNumber === 0
                               ? 'Extras'
                               : `Season ${season.seasonNumber}`}
                           </td>
-                          <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-200">
+                          <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-200">
                             {season.episodeCount}
                           </td>
-                          <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-200">
+                          <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-200">
                             {!seasonRequest && !mediaSeason && (
                               <Badge>Not Requested</Badge>
                             )}
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 47a4c77c..129a69b2 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -68,13 +68,13 @@ const Search: React.FC = () => {
           <span className="relative z-0 inline-flex shadow-sm rounded-md">
             <button
               type="button"
-              className="relative inline-flex items-center px-4 py-2 rounded-l-md border border-indigo-900 bg-indigo-500 hover:bg-indigo-400 text-sm leading-5 font-medium text-cool-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+              className="relative inline-flex items-center px-4 py-2 rounded-l-md border border-indigo-900 bg-indigo-500 hover:bg-indigo-400 text-sm leading-5 font-medium text-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
             >
               Movies
             </button>
             <button
               type="button"
-              className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-indigo-900 bg-indigo-500   text-sm leading-5 font-medium text-cool-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+              className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-indigo-900 bg-indigo-500   text-sm leading-5 font-medium text-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
             >
               TV Shows
             </button>
diff --git a/src/components/Settings/CopyButton.tsx b/src/components/Settings/CopyButton.tsx
index c4921a16..34a22a9e 100644
--- a/src/components/Settings/CopyButton.tsx
+++ b/src/components/Settings/CopyButton.tsx
@@ -20,7 +20,7 @@ const CopyButton: React.FC<{ textToCopy: string }> = ({ textToCopy }) => {
   return (
     <button
       onClick={setCopied}
-      className="-ml-px relative inline-flex items-center px-4 py-2 border border-cool-gray-500 text-sm leading-5 font-medium text-white bg-indigo-500  hover:bg-indigo-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+      className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-500 text-sm leading-5 font-medium text-white bg-indigo-500  hover:bg-indigo-400 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
     >
       <svg
         className="w-5 h-5 text-white"
diff --git a/src/components/Settings/LibraryItem.tsx b/src/components/Settings/LibraryItem.tsx
index 896d3343..d7586454 100644
--- a/src/components/Settings/LibraryItem.tsx
+++ b/src/components/Settings/LibraryItem.tsx
@@ -13,7 +13,7 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
 }) => {
   return (
     <li className="col-span-1 flex shadow-sm rounded-md">
-      <div className="flex-1 flex items-center justify-between border-t border-r border-b border-cool-gray-700 bg-cool-gray-600 rounded-md truncate">
+      <div className="flex-1 flex items-center justify-between border-t border-r border-b border-gray-700 bg-gray-600 rounded-md truncate">
         <div className="flex-1 px-4 py-6 text-sm leading-5 truncate cursor-default">
           {name}
         </div>
@@ -29,8 +29,8 @@ const LibraryItem: React.FC<LibraryItemProps> = ({
               }
             }}
             className={`${
-              isEnabled ? 'bg-indigo-600' : 'bg-cool-gray-700'
-            } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
+              isEnabled ? 'bg-indigo-600' : 'bg-gray-700'
+            } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring`}
           >
             <span
               aria-hidden="true"
diff --git a/src/components/Settings/RadarrModal.tsx b/src/components/Settings/RadarrModal.tsx
index 0dfa11e1..a97ce6b4 100644
--- a/src/components/Settings/RadarrModal.tsx
+++ b/src/components/Settings/RadarrModal.tsx
@@ -214,7 +214,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
                     htmlFor="isDefault"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Default Server
                   </label>
@@ -223,14 +223,14 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                       type="checkbox"
                       id="isDefault"
                       name="isDefault"
-                      className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
+                      className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out rounded-md"
                     />
                   </div>
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="name"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Server Name
                   </label>
@@ -239,13 +239,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                       <Field
                         id="name"
                         name="name"
-                        type="input"
+                        type="text"
                         placeholder="A Radarr Server"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('name', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.name && touched.name && (
@@ -256,7 +256,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="hostname"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Hostname
                   </label>
@@ -265,13 +265,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                       <Field
                         id="hostname"
                         name="hostname"
-                        type="input"
+                        type="text"
                         placeholder="127.0.0.1"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('hostname', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.hostname && touched.hostname && (
@@ -282,7 +282,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
                     htmlFor="port"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Port
                   </label>
@@ -290,13 +290,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     <Field
                       id="port"
                       name="port"
-                      type="input"
+                      type="text"
                       placeholder="7878"
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setIsValidated(false);
                         setFieldValue('port', e.target.value);
                       }}
-                      className="rounded-md shadow-sm form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                      className="rounded-md shadow-sm form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                     />
                     {errors.port && touched.port && (
                       <div className="text-red-500 mt-2">{errors.port}</div>
@@ -306,7 +306,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
                     htmlFor="ssl"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     SSL
                   </label>
@@ -319,14 +319,14 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                         setIsValidated(false);
                         setFieldValue('ssl', !values.ssl);
                       }}
-                      className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
+                      className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out"
                     />
                   </div>
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="apiKey"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     API Key
                   </label>
@@ -335,13 +335,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                       <Field
                         id="apiKey"
                         name="apiKey"
-                        type="input"
+                        type="text"
                         placeholder="Your Radarr API Key"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('apiKey', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.apiKey && touched.apiKey && (
@@ -352,7 +352,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="baseUrl"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Base URL
                   </label>
@@ -361,13 +361,13 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                       <Field
                         id="baseUrl"
                         name="baseUrl"
-                        type="input"
+                        type="text"
                         placeholder="Example: /radarr"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('baseUrl', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.baseUrl && touched.baseUrl && (
@@ -378,7 +378,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="activeProfileId"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Quality Profile
                   </label>
@@ -388,7 +388,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                         as="select"
                         id="activeProfileId"
                         name="activeProfileId"
-                        className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
+                        className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
                       >
                         {testResponse.profiles.length > 0 &&
                           testResponse.profiles.map((profile) => (
@@ -411,7 +411,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="rootFolder"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Root Folder
                   </label>
@@ -421,7 +421,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                         as="select"
                         id="rootFolder"
                         name="rootFolder"
-                        className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
+                        className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
                       >
                         {testResponse.rootFolders.length > 0 &&
                           testResponse.rootFolders.map((folder) => (
@@ -444,7 +444,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="minimumAvailability"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Minimum Availability
                   </label>
@@ -454,7 +454,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                         as="select"
                         id="minimumAvailability"
                         name="minimumAvailability"
-                        className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
+                        className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
                       >
                         <option value="announced">Announced</option>
                         <option value="inCinemas">In Cinemas</option>
@@ -467,7 +467,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
                     htmlFor="is4k"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Ultra HD Server
                   </label>
@@ -476,7 +476,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                       type="checkbox"
                       id="is4k"
                       name="is4k"
-                      className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
+                      className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out"
                     />
                   </div>
                 </div>
diff --git a/src/components/Settings/SettingsJobs.tsx b/src/components/Settings/SettingsJobs.tsx
index 9cfc92d6..38b4b62a 100644
--- a/src/components/Settings/SettingsJobs.tsx
+++ b/src/components/Settings/SettingsJobs.tsx
@@ -24,24 +24,24 @@ const SettingsJobs: React.FC = () => {
             <table className="min-w-full">
               <thead>
                 <tr>
-                  <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                  <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                     Job Name
                   </th>
-                  <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                  <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                     Next Execution
                   </th>
-                  <th className="px-6 py-3 bg-cool-gray-500"></th>
+                  <th className="px-6 py-3 bg-gray-500"></th>
                 </tr>
               </thead>
-              <tbody className="bg-cool-gray-600 divide-y divide-cool-gray-700">
+              <tbody className="bg-gray-600 divide-y divide-gray-700">
                 {data?.map((job, index) => (
                   <tr key={`job-list-${index}`}>
-                    <td className="px-6 py-4 whitespace-no-wrap">
+                    <td className="px-6 py-4 whitespace-nowrap">
                       <div className="text-sm leading-5 text-white">
                         {job.name}
                       </div>
                     </td>
-                    <td className="px-6 py-4 whitespace-no-wrap">
+                    <td className="px-6 py-4 whitespace-nowrap">
                       <div className="text-sm leading-5 text-white">
                         <FormattedRelativeTime
                           value={Math.floor(
@@ -53,7 +53,7 @@ const SettingsJobs: React.FC = () => {
                         />
                       </div>
                     </td>
-                    <td className="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
+                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm leading-5 font-medium">
                       <Button buttonType="primary">Run Now</Button>
                     </td>
                   </tr>
diff --git a/src/components/Settings/SettingsLayout.tsx b/src/components/Settings/SettingsLayout.tsx
index efd897e3..f42745de 100644
--- a/src/components/Settings/SettingsLayout.tsx
+++ b/src/components/Settings/SettingsLayout.tsx
@@ -47,7 +47,7 @@ const SettingsLayout: React.FC = ({ children }) => {
     'border-indigo-600 text-indigo-500 focus:outline-none focus:text-indigo-500 focus:border-indigo-500';
 
   const inactiveLinkColor =
-    'border-transparent text-cool-gray-500 hover:text-cool-gray-400 hover:border-cool-gray-300 focus:outline-none focus:text-cool-gray-4700 focus:border-cool-gray-300';
+    'border-transparent text-gray-500 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-4700 focus:border-gray-300';
 
   const SettingsLink: React.FC<{
     route: string;
@@ -61,7 +61,7 @@ const SettingsLayout: React.FC = ({ children }) => {
     return (
       <Link href={route}>
         <a
-          className={`whitespace-no-wrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
+          className={`whitespace-nowrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
             !!router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
           }`}
           aria-current="page"
@@ -88,7 +88,7 @@ const SettingsLayout: React.FC = ({ children }) => {
               )?.route
             }
             aria-label="Selected tab"
-            className="bg-cool-gray-800 text-white mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-cool-gray-700 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5 transition ease-in-out duration-150"
+            className="bg-gray-800 text-white mt-1 rounded-md form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-700 focus:outline-none focus:ring-blue focus:border-blue-300 sm:text-sm sm:leading-5 transition ease-in-out duration-150"
           >
             {settingsRoutes.map((route, index) => (
               <SettingsLink
@@ -103,7 +103,7 @@ const SettingsLayout: React.FC = ({ children }) => {
           </select>
         </div>
         <div className="hidden sm:block">
-          <div className="border-b border-cool-gray-600">
+          <div className="border-b border-gray-600">
             <nav className="-mb-px flex">
               {settingsRoutes.map((route, index) => (
                 <SettingsLink
diff --git a/src/components/Settings/SettingsMain.tsx b/src/components/Settings/SettingsMain.tsx
index fd1093bc..6eeb19da 100644
--- a/src/components/Settings/SettingsMain.tsx
+++ b/src/components/Settings/SettingsMain.tsx
@@ -14,10 +14,10 @@ const SettingsMain: React.FC = () => {
   return (
     <>
       <div>
-        <h3 className="text-lg leading-6 font-medium text-cool-gray-200">
+        <h3 className="text-lg leading-6 font-medium text-gray-200">
           General Settings
         </h3>
-        <p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
+        <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
           These are settings related to general Overseerr configuration.
         </p>
       </div>
@@ -25,20 +25,21 @@ const SettingsMain: React.FC = () => {
         <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
           <label
             htmlFor="username"
-            className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+            className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
           >
             API Key
           </label>
           <div className="mt-1 sm:mt-0 sm:col-span-2">
             <div className="max-w-lg flex rounded-md shadow-sm">
               <input
+                type="text"
                 id="username"
-                className="flex-1 form-input block w-full min-w-0 rounded-none rounded-l-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                className="flex-1 form-input block w-full min-w-0 rounded-none rounded-l-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                 value={data?.apiKey}
                 readOnly
               />
               <CopyButton textToCopy={data?.apiKey ?? ''} />
-              <button className="-ml-px relative inline-flex items-center px-4 py-2 border border-cool-gray-500 text-sm leading-5 font-medium rounded-r-md text-white bg-indigo-500  hover:bg-indigo-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+              <button className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-500 text-sm leading-5 font-medium rounded-r-md text-white bg-indigo-500  hover:bg-indigo-400 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                 <svg
                   className="w-5 h-5"
                   fill="currentColor"
diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx
index a1ef6f81..87d1fe39 100644
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -157,10 +157,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
   return (
     <>
       <div>
-        <h3 className="text-lg leading-6 font-medium text-cool-gray-200">
+        <h3 className="text-lg leading-6 font-medium text-gray-200">
           <FormattedMessage {...messages.plexsettings} />
         </h3>
-        <p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
+        <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
           <FormattedMessage {...messages.plexsettingsDescription} />
         </p>
       </div>
@@ -174,13 +174,14 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
           <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
             <label
               htmlFor="name"
-              className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+              className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
             >
               <FormattedMessage {...messages.servername} />
             </label>
             <div className="mt-1 sm:mt-0 sm:col-span-2">
               <div className="max-w-lg flex rounded-md shadow-sm">
                 <input
+                  type="text"
                   id="name"
                   name="name"
                   placeholder={intl.formatMessage(
@@ -188,7 +189,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                   )}
                   value={data?.name}
                   readOnly
-                  className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                  className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                 />
               </div>
             </div>
@@ -196,19 +197,20 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
           <div className="mt-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
             <label
               htmlFor="hostname"
-              className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+              className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
             >
               <FormattedMessage {...messages.hostname} />
             </label>
             <div className="mt-1 sm:mt-0 sm:col-span-2">
               <div className="max-w-lg flex rounded-md shadow-sm">
                 <input
+                  type="text"
                   id="hostname"
                   name="hostname"
                   placeholder="127.0.0.1"
                   value={formik.values.hostname}
                   onChange={formik.handleChange}
-                  className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                  className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                 />
               </div>
             </div>
@@ -216,25 +218,26 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
           <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
             <label
               htmlFor="port"
-              className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+              className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
             >
               <FormattedMessage {...messages.port} />
             </label>
             <div className="mt-1 sm:mt-0 sm:col-span-2">
               <div className="max-w-lg rounded-md shadow-sm sm:max-w-xs">
                 <input
+                  type="text"
                   id="port"
                   name="port"
                   placeholder="32400"
                   value={formik.values.port}
                   onChange={formik.handleChange}
-                  className="form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                  className="form-input block w-24 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                 />
               </div>
             </div>
           </div>
         </div>
-        <div className="mt-8 border-t border-cool-gray-700 pt-5">
+        <div className="mt-8 border-t border-gray-700 pt-5">
           <div className="flex justify-end">
             <span className="ml-3 inline-flex rounded-md shadow-sm">
               <Button buttonType="primary" type="submit" disabled={isUpdating}>
@@ -247,10 +250,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
         </div>
       </form>
       <div className="mt-10">
-        <h3 className="text-lg leading-6 font-medium text-cool-gray-200">
+        <h3 className="text-lg leading-6 font-medium text-gray-200">
           <FormattedMessage {...messages.plexlibraries} />
         </h3>
-        <p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
+        <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
           <FormattedMessage {...messages.plexlibrariesDescription} />
         </p>
         <div className="mt-6">
@@ -284,15 +287,15 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
         </ul>
       </div>
       <div className="mt-10">
-        <h3 className="text-lg leading-6 font-medium text-cool-gray-200">
+        <h3 className="text-lg leading-6 font-medium text-gray-200">
           <FormattedMessage {...messages.manualscan} />
         </h3>
-        <p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
+        <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
           <FormattedMessage {...messages.manualscanDescription} />
         </p>
         <div className="mt-6">
-          <div className="bg-cool-gray-800 p-4 rounded-md">
-            <div className="w-full h-8 rounded-full bg-cool-gray-600 mb-6 relative overflow-hidden">
+          <div className="bg-gray-800 p-4 rounded-md">
+            <div className="w-full h-8 rounded-full bg-gray-600 mb-6 relative overflow-hidden">
               {dataSync?.running && (
                 <div
                   className="h-8 bg-indigo-600 transition-all ease-in-out duration-200"
diff --git a/src/components/Settings/SettingsServices.tsx b/src/components/Settings/SettingsServices.tsx
index 0bbac1e3..c5ee50a1 100644
--- a/src/components/Settings/SettingsServices.tsx
+++ b/src/components/Settings/SettingsServices.tsx
@@ -38,7 +38,7 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
   onDelete,
 }) => {
   return (
-    <li className="col-span-1 bg-cool-gray-700 rounded-lg shadow">
+    <li className="col-span-1 bg-gray-700 rounded-lg shadow">
       <div className="w-full flex items-center justify-between p-6 space-x-6">
         <div className="flex-1 truncate">
           <div className="flex items-center space-x-3 mb-2">
@@ -49,11 +49,11 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
             {isDefault4K && <Badge badgeType="warning">Default 4K</Badge>}
             {isSSL && <Badge badgeType="success">SSL</Badge>}
           </div>
-          <p className="mt-1 text-cool-gray-300 text-sm leading-5 truncate">
+          <p className="mt-1 text-gray-300 text-sm leading-5 truncate">
             <span className="font-bold mr-2">Address</span>
             {address}
           </p>
-          <p className="mt-1 text-cool-gray-300 text-sm leading-5 truncate">
+          <p className="mt-1 text-gray-300 text-sm leading-5 truncate">
             <span className="font-bold mr-2">Active Profile</span> {profileName}
           </p>
         </div>
@@ -63,12 +63,12 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
           alt=""
         />
       </div>
-      <div className="border-t border-cool-gray-800">
+      <div className="border-t border-gray-800">
         <div className="-mt-px flex">
-          <div className="w-0 flex-1 flex border-r border-cool-gray-800">
+          <div className="w-0 flex-1 flex border-r border-gray-800">
             <button
               onClick={() => onEdit()}
-              className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-cool-gray-200 font-medium border border-transparent rounded-bl-lg hover:text-white focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 focus:z-10 transition ease-in-out duration-150"
+              className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-200 font-medium border border-transparent rounded-bl-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10 transition ease-in-out duration-150"
             >
               <svg
                 className="w-5 h-5"
@@ -84,7 +84,7 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
           <div className="-ml-px w-0 flex-1 flex">
             <button
               onClick={() => onDelete()}
-              className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-cool-gray-200 font-medium border border-transparent rounded-br-lg hover:text-white focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 focus:z-10 transition ease-in-out duration-150"
+              className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-200 font-medium border border-transparent rounded-br-lg hover:text-white focus:outline-none focus:ring-blue focus:border-gray-500 focus:z-10 transition ease-in-out duration-150"
             >
               <svg
                 className="w-5 h-5"
@@ -154,10 +154,10 @@ const SettingsServices: React.FC = () => {
   return (
     <>
       <div>
-        <h3 className="text-lg leading-6 font-medium text-cool-gray-200">
+        <h3 className="text-lg leading-6 font-medium text-gray-200">
           Radarr Settings
         </h3>
-        <p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
+        <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
           Configure your Radarr connection below. You can have multiple Radarr
           configurations but only two can be active as defaults at any time (one
           for standard HD and one for 4K). Administrations can override a titles
@@ -232,7 +232,7 @@ const SettingsServices: React.FC = () => {
                 }
               />
             ))}
-            <li className="col-span-1 border-2 border-dashed border-cool-gray-400 rounded-lg shadow h-32 sm:h-32">
+            <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
               <div className="flex items-center justify-center w-full h-full">
                 <Button
                   buttonType="ghost"
@@ -260,10 +260,10 @@ const SettingsServices: React.FC = () => {
         )}
       </div>
       <div className="mt-10">
-        <h3 className="text-lg leading-6 font-medium text-cool-gray-200">
+        <h3 className="text-lg leading-6 font-medium text-gray-200">
           Sonarr Settings
         </h3>
-        <p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
+        <p className="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
           Configure your Sonarr connection below. You can have multiple Sonarr
           configurations but only two can be active as defaults at any time (one
           for standard HD and one for 4K). Administrations can override a titles
@@ -294,7 +294,7 @@ const SettingsServices: React.FC = () => {
                 }
               />
             ))}
-            <li className="col-span-1 border-2 border-dashed border-cool-gray-400 rounded-lg shadow h-32 sm:h-32">
+            <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
               <div className="flex items-center justify-center w-full h-full">
                 <Button
                   buttonType="ghost"
diff --git a/src/components/Settings/SonarrModal.tsx b/src/components/Settings/SonarrModal.tsx
index cc4a4f4a..d5cadf9d 100644
--- a/src/components/Settings/SonarrModal.tsx
+++ b/src/components/Settings/SonarrModal.tsx
@@ -214,7 +214,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
                     htmlFor="isDefault"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Default Server
                   </label>
@@ -223,14 +223,14 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       type="checkbox"
                       id="isDefault"
                       name="isDefault"
-                      className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
+                      className="form-checkbox rounded-md h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
                     />
                   </div>
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="name"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Server Name
                   </label>
@@ -239,13 +239,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       <Field
                         id="name"
                         name="name"
-                        type="input"
+                        type="text"
                         placeholder="A Sonarr Server"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('name', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.name && touched.name && (
@@ -256,7 +256,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="hostname"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Hostname
                   </label>
@@ -265,13 +265,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       <Field
                         id="hostname"
                         name="hostname"
-                        type="input"
+                        type="text"
                         placeholder="127.0.0.1"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('hostname', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.hostname && touched.hostname && (
@@ -282,7 +282,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
                     htmlFor="port"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Port
                   </label>
@@ -290,13 +290,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     <Field
                       id="port"
                       name="port"
-                      type="input"
+                      type="text"
                       placeholder="8989"
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setIsValidated(false);
                         setFieldValue('port', e.target.value);
                       }}
-                      className="rounded-md shadow-sm form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                      className="rounded-md shadow-sm form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                     />
                     {errors.port && touched.port && (
                       <div className="text-red-500 mt-2">{errors.port}</div>
@@ -306,7 +306,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
                     htmlFor="ssl"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     SSL
                   </label>
@@ -319,14 +319,14 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                         setIsValidated(false);
                         setFieldValue('ssl', !values.ssl);
                       }}
-                      className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
+                      className="form-checkbox rounded-md h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
                     />
                   </div>
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="apiKey"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     API Key
                   </label>
@@ -335,13 +335,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       <Field
                         id="apiKey"
                         name="apiKey"
-                        type="input"
+                        type="text"
                         placeholder="Your Sonarr API Key"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('apiKey', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.apiKey && touched.apiKey && (
@@ -352,7 +352,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="baseUrl"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Base URL
                   </label>
@@ -361,13 +361,13 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       <Field
                         id="baseUrl"
                         name="baseUrl"
-                        type="input"
+                        type="text"
                         placeholder="Example: /sonarr"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                           setIsValidated(false);
                           setFieldValue('baseUrl', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.baseUrl && touched.baseUrl && (
@@ -378,7 +378,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="activeProfileId"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Quality Profile
                   </label>
@@ -388,7 +388,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                         as="select"
                         id="activeProfileId"
                         name="activeProfileId"
-                        className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
+                        className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
                       >
                         <option value="">Select a Quality Profile</option>
                         {testResponse.profiles.length > 0 &&
@@ -412,7 +412,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="rootFolder"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Root Folder
                   </label>
@@ -422,7 +422,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                         as="select"
                         id="rootFolder"
                         name="rootFolder"
-                        className="mt-1 form-select block w-full pl-3 pr-10 py-2 text-base leading-6 bg-cool-gray-700 border-cool-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-cool-gray-500 sm:text-sm sm:leading-5"
+                        className="mt-1 form-select block rounded-md w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
                       >
                         <option value="">Select a Root Folder</option>
                         {testResponse.rootFolders.length > 0 &&
@@ -446,7 +446,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
                     htmlFor="is4k"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Ultra HD Server
                   </label>
@@ -455,14 +455,14 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       type="checkbox"
                       id="is4k"
                       name="is4k"
-                      className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
+                      className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out"
                     />
                   </div>
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
                   <label
                     htmlFor="enableSeasonFolders"
-                    className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
                   >
                     Season Folders
                   </label>
@@ -471,7 +471,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                       type="checkbox"
                       id="enableSeasonFolders"
                       name="enableSeasonFolders"
-                      className="form-checkbox h-6 w-6 text-indigo-600 transition duration-150 ease-in-out"
+                      className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out"
                     />
                   </div>
                 </div>
diff --git a/src/components/Setup/SetupSteps.tsx b/src/components/Setup/SetupSteps.tsx
index 2cb198ce..2429e3ca 100644
--- a/src/components/Setup/SetupSteps.tsx
+++ b/src/components/Setup/SetupSteps.tsx
@@ -55,7 +55,7 @@ const SetupSteps: React.FC<CurrentStep> = ({
       {!isLastStep && (
         <div className="hidden md:block absolute top-0 right-0 h-full w-5">
           <svg
-            className="h-full w-full text-cool-gray-600"
+            className="h-full w-full text-gray-600"
             viewBox="0 0 22 80"
             fill="none"
             preserveAspectRatio="none"
diff --git a/src/components/Setup/index.tsx b/src/components/Setup/index.tsx
index c55677ec..7b65dcd4 100644
--- a/src/components/Setup/index.tsx
+++ b/src/components/Setup/index.tsx
@@ -34,7 +34,7 @@ const Setup: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen bg-cool-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative">
+    <div className="min-h-screen bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative">
       <ImageFader
         backgroundImages={[
           '/images/rotate1.jpg',
@@ -51,7 +51,7 @@ const Setup: React.FC = () => {
         />
         <nav className="relative z-50">
           <ul
-            className=" bg-cool-gray-800 bg-opacity-50 border border-cool-gray-600 rounded-md divide-y divide-cool-gray-600 md:flex md:divide-y-0"
+            className=" bg-gray-800 bg-opacity-50 border border-gray-600 rounded-md divide-y divide-gray-600 md:flex md:divide-y-0"
             style={{ backdropFilter: 'blur(5px)' }}
           >
             <SetupSteps
@@ -74,14 +74,14 @@ const Setup: React.FC = () => {
             />
           </ul>
         </nav>
-        <div className="w-full mt-10 p-4 text-white bg-cool-gray-800 bg-opacity-50 border border-cool-gray-600 rounded-md">
+        <div className="w-full mt-10 p-4 text-white bg-gray-800 bg-opacity-50 border border-gray-600 rounded-md">
           {currentStep === 1 && (
             <LoginWithPlex onComplete={() => setCurrentStep(2)} />
           )}
           {currentStep === 2 && (
             <div>
               <SettingsPlex onComplete={() => setPlexSettingsComplete(true)} />
-              <div className="mt-8 border-t border-cool-gray-700 pt-5">
+              <div className="mt-8 border-t border-gray-700 pt-5">
                 <div className="flex justify-end">
                   <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
@@ -99,7 +99,7 @@ const Setup: React.FC = () => {
           {currentStep === 3 && (
             <div>
               <SettingsServices />
-              <div className="mt-8 border-t border-cool-gray-700 pt-5">
+              <div className="mt-8 border-t border-gray-700 pt-5">
                 <div className="flex justify-end">
                   <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
index d97629b1..a43ad137 100644
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -199,7 +199,7 @@ const Slider: React.FC<SliderProps> = ({
         </button>
       </div>
       <div
-        className="overflow-x-scroll whitespace-no-wrap hide-scrollbar scrolling-touch overscroll-x-contain -ml-4 -mr-4 px-2"
+        className="overflow-x-scroll whitespace-nowrap hide-scrollbar overscroll-x-contain -ml-4 -mr-4 px-2"
         ref={containerRef}
         onScroll={onScroll}
       >
diff --git a/src/components/TitleCard/Placeholder.tsx b/src/components/TitleCard/Placeholder.tsx
index 524262d1..233add0f 100644
--- a/src/components/TitleCard/Placeholder.tsx
+++ b/src/components/TitleCard/Placeholder.tsx
@@ -7,7 +7,7 @@ interface PlaceholderProps {
 const Placeholder: React.FC<PlaceholderProps> = ({ canExpand = false }) => {
   return (
     <div
-      className={`relative animate-pulse rounded-lg bg-cool-gray-700 ${
+      className={`relative animate-pulse rounded-lg bg-gray-700 ${
         canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'
       }`}
     >
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 8d4d514c..799f442d 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -117,7 +117,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="absolute top-0 left-0 right-0 bottom-0 bg-cool-gray-800 bg-opacity-75 z-40 text-white flex items-center justify-center rounded-lg">
+            <div className="absolute top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-75 z-40 text-white flex items-center justify-center rounded-lg">
               <svg
                 className="w-10 h-10 animate-spin"
                 fill="none"
@@ -177,7 +177,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                     }
                     as={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
                   >
-                    <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
+                    <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150">
                       <svg
                         className="w-4 mx-auto"
                         fill="none"
@@ -203,7 +203,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                   {!currentStatus && (
                     <button
                       onClick={() => setShowRequestModal(true)}
-                      className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
+                      className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150"
                     >
                       <svg
                         className="w-4 mx-auto"
@@ -222,7 +222,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                     </button>
                   )}
                   {currentStatus === MediaStatus.PENDING && (
-                    <button className="w-full h-7 text-center text-white bg-orange-400 hover:bg-orange-300 rounded-sm ml-2 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700 transition ease-in-out duration-150">
+                    <button className="w-full h-7 text-center text-white bg-orange-400 hover:bg-orange-300 rounded-sm ml-2 focus:border-orange-700 focus:ring-orange active:bg-orange-700 transition ease-in-out duration-150">
                       <svg
                         className="w-4 mx-auto"
                         fill="none"
diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
index 2fb7e6c3..f932cb0e 100644
--- a/src/components/Toast/index.tsx
+++ b/src/components/Toast/index.tsx
@@ -4,8 +4,8 @@ import type { ToastProps } from 'react-toast-notifications';
 const Toast: React.FC<ToastProps> = ({ appearance, children, onDismiss }) => {
   return (
     <div className="toast flex items-end justify-center px-2 py-2 pointer-events-none sm:p-6 sm:items-start sm:justify-end">
-      <div className="max-w-sm w-full bg-cool-gray-700 shadow-lg rounded-lg pointer-events-auto">
-        <div className="rounded-lg shadow-xs overflow-hidden">
+      <div className="max-w-sm w-full bg-gray-700 shadow-lg rounded-lg pointer-events-auto">
+        <div className="rounded-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
           <div className="p-4">
             <div className="flex items-start">
               <div className="flex-shrink-0">
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 3f62c924..be199ee5 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -128,7 +128,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
       className="bg-cover bg-center -mx-4 -mt-2 px-4 sm:px-8 pt-4 "
       style={{
         height: 493,
-        backgroundImage: `linear-gradient(180deg, rgba(45, 55, 72, 0.47) 0%, #1A202E 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,
+        backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,
       }}
     >
       <RequestModal
@@ -148,20 +148,18 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         subText={data.name}
       >
         <h3 className="text-xl mb-2">Requests</h3>
-        <div className="bg-cool-gray-600 shadow overflow-hidden rounded-md">
+        <div className="bg-gray-600 shadow overflow-hidden rounded-md">
           <ul>
             {data.mediaInfo?.requests?.map((request) => (
               <li
                 key={`manage-request-${request.id}`}
-                className="border-b last:border-b-0 border-cool-gray-700"
+                className="border-b last:border-b-0 border-gray-700"
               >
                 <RequestBlock request={request} onUpdate={() => revalidate()} />
               </li>
             ))}
             {(data.mediaInfo?.requests ?? []).length === 0 && (
-              <li className="text-center py-4 text-cool-gray-400">
-                No requests
-              </li>
+              <li className="text-center py-4 text-gray-400">No requests</li>
             )}
           </ul>
         </div>
@@ -174,7 +172,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             >
               Clear All Media Data
             </Button>
-            <div className="text-sm text-cool-gray-400 mt-2">
+            <div className="text-sm text-gray-400 mt-2">
               This will remove all media data including all requests for this
               item. This action is irreversible. If this item exists in your
               Plex library, the media information will be recreated next sync.
@@ -363,9 +361,9 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
           </p>
         </div>
         <div className="w-full md:w-80 mt-8 md:mt-0">
-          <div className="bg-cool-gray-900 rounded-lg shadow border border-cool-gray-800">
+          <div className="bg-gray-900 rounded-lg shadow border border-gray-800">
             {(data.voteCount > 0 || ratingData) && (
-              <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0 items-center justify-center">
+              <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0 items-center justify-center">
                 {ratingData?.criticsRating && (
                   <>
                     <span className="text-sm">
@@ -375,7 +373,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                         <RTFresh className="w-6 mr-1" />
                       )}
                     </span>
-                    <span className="text-cool-gray-400 text-sm mr-4 last:mr-0">
+                    <span className="text-gray-400 text-sm mr-4 last:mr-0">
                       {ratingData.criticsScore}%
                     </span>
                   </>
@@ -389,7 +387,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                         <RTAudFresh className="w-6 mr-1" />
                       )}
                     </span>
-                    <span className="text-cool-gray-400 text-sm mr-4 last:mr-0">
+                    <span className="text-gray-400 text-sm mr-4 last:mr-0">
                       {ratingData.audienceScore}%
                     </span>
                   </>
@@ -399,26 +397,26 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                     <span className="text-sm">
                       <TmdbLogo className="w-6 mr-2" />
                     </span>
-                    <span className="text-cool-gray-400 text-sm">
+                    <span className="text-gray-400 text-sm">
                       {data.voteAverage}/10
                     </span>
                   </>
                 )}
               </div>
             )}
-            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
               <span className="text-sm">
                 <FormattedMessage {...messages.status} />
               </span>
-              <span className="flex-1 text-right text-cool-gray-400 text-sm">
+              <span className="flex-1 text-right text-gray-400 text-sm">
                 {data.status}
               </span>
             </div>
-            <div className="flex px-4 py-2 border-b border-cool-gray-800 last:border-b-0">
+            <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
               <span className="text-sm">
                 <FormattedMessage {...messages.originallanguage} />
               </span>
-              <span className="flex-1 text-right text-cool-gray-400 text-sm">
+              <span className="flex-1 text-right text-gray-400 text-sm">
                 {data.originalLanguage}
               </span>
             </div>
@@ -428,7 +426,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <Link href="/tv/[tvId]/cast" as={`/tv/${data.id}/cast`}>
-            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
               <span>
                 <FormattedMessage {...messages.cast} />
               </span>
@@ -471,7 +469,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
                 href="/tv/[tvId]/recommendations"
                 as={`/tv/${data.id}/recommendations`}
               >
-                <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+                <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
                   <span>
                     <FormattedMessage {...messages.recommendations} />
                   </span>
@@ -518,7 +516,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
           <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
             <div className="flex-1 min-w-0">
               <Link href="/tv/[tvId]/similar" as={`/tv/${data.id}/similar`}>
-                <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+                <a className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
                   <span>
                     <FormattedMessage {...messages.similar} />
                   </span>
diff --git a/src/components/UserEdit/index.tsx b/src/components/UserEdit/index.tsx
index 4272ecc7..f32d9f41 100644
--- a/src/components/UserEdit/index.tsx
+++ b/src/components/UserEdit/index.tsx
@@ -152,14 +152,15 @@ const UserEdit: React.FC = () => {
             <div className="space-y-1">
               <label
                 htmlFor="username"
-                className="block text-sm font-medium leading-5 text-cool-gray-400"
+                className="block text-sm font-medium leading-5 text-gray-400"
               >
                 <FormattedMessage {...messages.username} />
               </label>
               <div className="rounded-md shadow-sm flex">
                 <input
                   id="username"
-                  className="form-input flex-grow block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                  type="text"
+                  className="form-input flex-grow block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                   value={user?.username}
                   readOnly
                 />
@@ -168,14 +169,15 @@ const UserEdit: React.FC = () => {
             <div className="space-y-1">
               <label
                 htmlFor="email"
-                className="block text-sm font-medium leading-5 text-cool-gray-400"
+                className="block text-sm font-medium leading-5 text-gray-400"
               >
                 <FormattedMessage {...messages.email} />
               </label>
               <div className="rounded-md shadow-sm flex">
                 <input
                   id="email"
-                  className="form-input flex-grow block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
+                  type="text"
+                  className="form-input flex-grow block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                   value={user?.email}
                   readOnly
                 />
@@ -185,7 +187,7 @@ const UserEdit: React.FC = () => {
 
           <div className="flex-grow space-y-1 lg:flex-grow-0 lg:flex-shrink-0">
             <p
-              className="block text-sm leading-5 font-medium text-cool-gray-400"
+              className="block text-sm leading-5 font-medium text-gray-400"
               aria-hidden="true"
             >
               <FormattedMessage {...messages.avatar} />
@@ -251,7 +253,7 @@ const UserEdit: React.FC = () => {
                             id={permissionOption.id}
                             name="permissions"
                             type="checkbox"
-                            className="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
+                            className="form-checkbox h-4 w-4 rounded-md text-indigo-600 transition duration-150 ease-in-out"
                             disabled={
                               (permissionOption.permission !==
                                 Permission.ADMIN &&
@@ -302,7 +304,7 @@ const UserEdit: React.FC = () => {
               </div>
             </div>
           </div>
-          <div className="mt-8 border-t border-cool-gray-700 pt-5">
+          <div className="mt-8 border-t border-gray-700 pt-5">
             <div className="flex justify-end">
               <span className="ml-3 inline-flex rounded-md shadow-sm">
                 <Button
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index 86d6f048..293b662b 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -28,31 +28,31 @@ const UserList: React.FC = () => {
               <table className="min-w-full">
                 <thead>
                   <tr>
-                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                       Name
                     </th>
-                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                       Total Requests
                     </th>
-                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                       User Type
                     </th>
-                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                       Role
                     </th>
-                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                       Created
                     </th>
-                    <th className="px-6 py-3 bg-cool-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
+                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
                       Last Updated
                     </th>
-                    <th className="px-6 py-3 bg-cool-gray-500"></th>
+                    <th className="px-6 py-3 bg-gray-500"></th>
                   </tr>
                 </thead>
-                <tbody className="bg-cool-gray-600 divide-y divide-cool-gray-700">
+                <tbody className="bg-gray-600 divide-y divide-gray-700">
                   {data?.map((user) => (
                     <tr key={`user-list-${user.id}`}>
-                      <td className="px-6 py-4 whitespace-no-wrap">
+                      <td className="px-6 py-4 whitespace-nowrap">
                         <div className="flex items-center">
                           <div className="flex-shrink-0 h-10 w-10">
                             <img
@@ -71,26 +71,26 @@ const UserList: React.FC = () => {
                           </div>
                         </div>
                       </td>
-                      <td className="px-6 py-4 whitespace-no-wrap">
+                      <td className="px-6 py-4 whitespace-nowrap">
                         <div className="text-sm leading-5 text-white">
                           {user.requests.length}
                         </div>
                       </td>
-                      <td className="px-6 py-4 whitespace-no-wrap">
+                      <td className="px-6 py-4 whitespace-nowrap">
                         <Badge badgeType="warning">Plex User</Badge>
                       </td>
-                      <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-white">
+                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-white">
                         {hasPermission(Permission.ADMIN, user.permissions)
                           ? 'Admin'
                           : 'User'}
                       </td>
-                      <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-white">
+                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-white">
                         <FormattedDate value={user.createdAt} />
                       </td>
-                      <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-white">
+                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-white">
                         <FormattedDate value={user.updatedAt} />
                       </td>
-                      <td className="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
+                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm leading-5 font-medium">
                         <Button
                           buttonType="warning"
                           className="mr-2"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 939b18fc..30bbd22b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 body {
-  @apply bg-cool-gray-900;
+  @apply bg-gray-900;
 }
 
 .plex-button {
@@ -16,7 +16,7 @@ body {
 }
 
 .titleCard {
-  @apply relative bg-cover rounded-lg bg-cool-gray-800;
+  @apply relative bg-cover rounded-lg bg-gray-800;
   padding-bottom: 150%;
 }
 
diff --git a/stylelint.config.js b/stylelint.config.js
index e9565681..b5b8a6c1 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -1,18 +1,18 @@
 module.exports = {
   rules: {
-    "at-rule-no-unknown": [
+    'at-rule-no-unknown': [
       true,
       {
         ignoreAtRules: [
-          "tailwind",
-          "apply",
-          "variants",
-          "responsive",
-          "screen",
+          'tailwind',
+          'apply',
+          'variants',
+          'responsive',
+          'screen',
         ],
       },
     ],
-    "declaration-block-trailing-semicolon": null,
-    "no-descending-specificity": null,
+    'declaration-block-trailing-semicolon': null,
+    'no-descending-specificity': null,
   },
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 759b6a4d..0f721fc7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,8 +18,8 @@ module.exports = {
     opacity: ['disabled'],
   },
   plugins: [
-    require('@tailwindcss/ui')({
-      layout: 'sidebar',
-    }),
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/aspect-ratio'),
   ],
 };
diff --git a/yarn.lock b/yarn.lock
index 2bd52793..c6e65086 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1426,13 +1426,13 @@
     intl-messageformat-parser "^6.0.6"
     typescript "^4.0"
 
-"@fullhuman/postcss-purgecss@^2.1.2":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz#50a954757ec78696615d3e118e3fee2d9291882e"
-  integrity sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==
+"@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:
     postcss "7.0.32"
-    purgecss "^2.3.0"
+    purgecss "^3.0.0"
 
 "@jsdevtools/ono@7.1.3", "@jsdevtools/ono@^7.1.3":
   version "7.1.3"
@@ -1613,29 +1613,22 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@tailwindcss/custom-forms@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz#40e5ed1fff6d29d8ed1c508a0b2aaf8da96962e0"
-  integrity sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==
-  dependencies:
-    lodash "^4.17.11"
-    mini-svg-data-uri "^1.0.3"
-    traverse "^0.6.6"
-
-"@tailwindcss/typography@^0.2.0":
+"@tailwindcss/aspect-ratio@^0.2.0":
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.2.0.tgz#b597c83502e3c3c6641a8aaabda223cd494ab349"
-  integrity sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg==
+  resolved "https://registry.yarnpkg.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.2.0.tgz#bebd32b7d0756b695294d4db1ae658796ff72a2c"
+  integrity sha512-v5LyHkwXj/4lI74B06zUrmWEdmSqS43+jw717pkt3fAXqb7ALwu77A8t7j+Bej+ZbdlIIqNMYheGN7wSGV1A6w==
 
-"@tailwindcss/ui@^0.6.2":
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/ui/-/ui-0.6.2.tgz#4144aba86543bf79fefe0ea14a78a12fb315810e"
-  integrity sha512-i0sWpAgnF4VitNqaf4JVDuiaQ3MmREwn7gmNYR6lvX29avYLLNOHf0DgzhVEfwfB+CJ6WjZvPoJuDYExZgWlwQ==
+"@tailwindcss/forms@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.2.1.tgz#3244b185854fae1a7cbe8d2456314d8b2d98cf43"
+  integrity sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==
   dependencies:
-    "@tailwindcss/custom-forms" "^0.2.1"
-    "@tailwindcss/typography" "^0.2.0"
-    hex-rgb "^4.1.0"
-    postcss-selector-parser "^6.0.2"
+    mini-svg-data-uri "^1.2.3"
+
+"@tailwindcss/typography@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.3.1.tgz#253ce580c8e06b6163d9a288edd24f25e1d0dfee"
+  integrity sha512-HyZ+3Eay8SGaPq7kcFoANZLr4EjeXQ19yjjb9fp6B0PHHpvZoe00jdsnpnooMEbx9J5rQ93nxPUG3MQmXVxGMQ==
 
 "@types/babel__core@^7.1.7":
   version "7.1.9"
@@ -2223,7 +2216,12 @@ acorn@^6.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
 
-acorn@^7.0.0, acorn@^7.4.0:
+acorn@^7.0.0:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+acorn@^7.4.0:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.0.tgz#e1ad486e6c54501634c6c397c5c121daa383607c"
   integrity sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==
@@ -2565,7 +2563,7 @@ 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@^9.4.5, autoprefixer@^9.6.1:
+autoprefixer@^9, autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
   integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
@@ -3105,7 +3103,7 @@ chalk@4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@4.1.0, "chalk@^3.0.0 || ^4.0.0", chalk@^4.0.0, chalk@^4.1.0:
+chalk@4.1.0, chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
   integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
@@ -3364,6 +3362,14 @@ color-string@^1.5.2:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
+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.0.x:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
@@ -3372,13 +3378,13 @@ color@3.0.x:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
-color@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
-  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
+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.2"
+    color-string "^1.5.4"
 
 colorette@^1.2.1:
   version "1.2.1"
@@ -3415,11 +3421,6 @@ commander@^4.0.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
-commander@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
-  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
-
 commander@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.1.0.tgz#f8d722b78103141006b66f4c7ba1e97315ba75bc"
@@ -4162,6 +4163,11 @@ dicer@0.2.5:
     readable-stream "1.1.x"
     streamsearch "0.1.2"
 
+didyoumean@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff"
+  integrity sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=
+
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@@ -5176,7 +5182,7 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@8.1.0, fs-extra@^8.0.0:
+fs-extra@8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
   integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
@@ -5185,7 +5191,7 @@ fs-extra@8.1.0, fs-extra@^8.0.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^9.0.0:
+fs-extra@^9.0.0, fs-extra@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
   integrity sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==
@@ -5572,11 +5578,6 @@ he@1.1.1:
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
   integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
 
-hex-rgb@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-4.1.0.tgz#2d5d3a2943bd40e7dc9b0d5b98903d7d17035967"
-  integrity sha512-n7xsIfyBkFChITGPh6FLtxNzAt2HxZLcQIY9hYH4gm2gmMQJHMguMH3E+jnmvUbSTF5QrmFnGab5Ippi+D7e/g==
-
 highlight.js@^9.6.0:
   version "9.18.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.3.tgz#a1a0a2028d5e3149e2380f8a865ee8516703d634"
@@ -5926,6 +5927,13 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
+is-core-module@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.1.0.tgz#a4cc031d9b1aca63eecbd18a650e13cb4eeab946"
+  integrity sha512-YcV7BgVMRFRua2FqQzKtTDMz8iCuLEyGKjr70q8Zm1yy2qKcurbFEd79PAdHV77oL3NrAaOVQIbMmiHQCHB7ZA==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -6861,7 +6869,7 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-mini-svg-data-uri@^1.0.3:
+mini-svg-data-uri@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
   integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
@@ -6999,6 +7007,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+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==
+
 moment-timezone@^0.5.31:
   version "0.5.31"
   resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.31.tgz#9c40d8c5026f0c7ab46eda3d63e49c155148de05"
@@ -7388,11 +7401,6 @@ normalize-url@^4.1.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
-normalize.css@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
-  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
-
 npm-bundled@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
@@ -8039,7 +8047,7 @@ postcss-font-variant@^4.0.0:
   dependencies:
     postcss "^7.0.2"
 
-postcss-functions@^3.0.0:
+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=
@@ -8072,7 +8080,7 @@ postcss-initial@^3.0.0:
     lodash.template "^4.5.0"
     postcss "^7.0.2"
 
-postcss-js@^2.0.0:
+postcss-js@^2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9"
   integrity sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==
@@ -8136,7 +8144,7 @@ postcss-modules-values@^3.0.0:
     icss-utils "^4.0.0"
     postcss "^7.0.6"
 
-postcss-nested@^4.1.1:
+postcss-nested@^4:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
   integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==
@@ -8272,6 +8280,16 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+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"
@@ -8300,7 +8318,7 @@ postcss@7.0.21:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@7.0.32, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.18, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@7.0.32, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@@ -8318,6 +8336,15 @@ postcss@^6.0.9:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
+postcss@^7, postcss@^7.0.18:
+  version "7.0.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
+  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -8461,12 +8488,12 @@ pupa@^2.0.1:
   dependencies:
     escape-goat "^2.0.0"
 
-purgecss@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-2.3.0.tgz#5327587abf5795e6541517af8b190a6fb5488bb3"
-  integrity sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==
+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 "^5.0.0"
+    commander "^6.0.0"
     glob "^7.0.0"
     postcss "7.0.32"
     postcss-selector-parser "^6.0.2"
@@ -8929,13 +8956,21 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.8.1:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.19.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==
+  dependencies:
+    is-core-module "^2.1.0"
+    path-parse "^1.0.6"
+
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
@@ -9851,33 +9886,33 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-tailwindcss@^1.8.12:
-  version "1.8.12"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.8.12.tgz#5a33692b5eebd79836210db1449dcbd8d6ea9bd3"
-  integrity sha512-VChYp+4SduP8hHFAmf75P5Yf0qNQi3oSSnpEMKkC6kWW/9K+SizRgbmllqLJLnTZq+eM3TDwvn1jWXvvg+dfDA==
+"tailwindcss@npm:@tailwindcss/postcss7-compat":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.1.tgz#901b02546e537e85beddbc13443226f46929efc8"
+  integrity sha512-SdWGioSKNhCIuoX2gCYhfs9HhWnOf1dvIed5G2i/lbqReGA27LG5KpH4glDunHWevWAY7h/WISZblE6xDCC/UA==
   dependencies:
-    "@fullhuman/postcss-purgecss" "^2.1.2"
-    autoprefixer "^9.4.5"
-    browserslist "^4.12.0"
+    "@fullhuman/postcss-purgecss" "^3.0.0"
+    autoprefixer "^9"
     bytes "^3.0.0"
-    chalk "^3.0.0 || ^4.0.0"
-    color "^3.1.2"
+    chalk "^4.1.0"
+    color "^3.1.3"
     detective "^5.2.0"
-    fs-extra "^8.0.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"
-    normalize.css "^8.0.1"
     object-hash "^2.0.3"
-    postcss "^7.0.11"
-    postcss-functions "^3.0.0"
-    postcss-js "^2.0.0"
-    postcss-nested "^4.1.1"
-    postcss-selector-parser "^6.0.0"
+    postcss "^7"
+    postcss-functions "^3"
+    postcss-js "^2"
+    postcss-nested "^4"
+    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.14.2"
+    resolve "^1.19.0"
 
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
@@ -10100,7 +10135,7 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-traverse@0.6.6, traverse@^0.6.6:
+traverse@0.6.6:
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
   integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
@@ -10427,7 +10462,7 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+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=