diff --git a/.eslintignore b/.eslintignore
index 7a3d61558..1e484b986 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 node_modules
 built
 healthcheck.js
+tailwind.config.js
\ No newline at end of file
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
index 4a19aa4c9..94133eee3 100644
--- a/frontend/.storybook/preview.js
+++ b/frontend/.storybook/preview.js
@@ -1,3 +1,4 @@
+import { themes } from '@storybook/theming';
 import '../src/styles/globals.css';
 
 export const parameters = {
@@ -7,5 +8,8 @@ export const parameters = {
       color: /(background|color)$/i,
       date: /Date$/
     }
+  },
+  darkMode: {
+    dark: { ...themes.dark, appContentBg: '#0e1014', appBg: '#0e1014' }
   }
 };
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 44d791bb0..1348fbdc3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,6 +7,7 @@
       "dependencies": {
         "@emotion/css": "^11.10.0",
         "@emotion/server": "^11.10.0",
+        "@fontsource/inter": "^4.5.15",
         "@fortawesome/fontawesome-svg-core": "^6.1.2",
         "@fortawesome/free-brands-svg-icons": "^6.1.2",
         "@fortawesome/free-regular-svg-icons": "^6.1.1",
@@ -15,7 +16,9 @@
         "@headlessui/react": "^1.6.6",
         "@radix-ui/react-accordion": "^1.1.0",
         "@radix-ui/react-alert-dialog": "^1.0.2",
+        "@radix-ui/react-checkbox": "^1.0.1",
         "@radix-ui/react-dialog": "^1.0.2",
+        "@radix-ui/react-dropdown-menu": "^2.0.2",
         "@radix-ui/react-label": "^2.0.0",
         "@radix-ui/react-popover": "^1.0.3",
         "@radix-ui/react-progress": "^1.0.1",
@@ -30,6 +33,7 @@
         "axios-auth-refresh": "^3.3.3",
         "classnames": "^2.3.1",
         "cookies": "^0.8.0",
+        "cva": "npm:class-variance-authority@^0.4.0",
         "fs": "^0.0.1-security",
         "gray-matter": "^4.0.3",
         "http-proxy": "^1.18.1",
@@ -94,7 +98,7 @@
         "prettier": "^2.8.3",
         "storybook": "^7.0.0-beta.30",
         "storybook-dark-mode": "^2.0.5",
-        "tailwindcss": "^3.1.4",
+        "tailwindcss": "3.2",
         "typescript": "^4.9.3"
       }
     },
@@ -2790,6 +2794,11 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@fontsource/inter": {
+      "version": "4.5.15",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.15.tgz",
+      "integrity": "sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q=="
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz",
@@ -3659,6 +3668,26 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.1.tgz",
+      "integrity": "sha512-TisH0B8hWmYP3ONRduYCyN04rR9yLPIw/Rwyn1RoC1suSoGCa8Wn+YPdSSSarSszeIbcg3p2lBkDp2XXit4sZw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-use-previous": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-collapsible": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.1.tgz",
@@ -3771,6 +3800,25 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.2.tgz",
+      "integrity": "sha512-r0kN0fstrSi+uAdK2GkLxnnbhqVBy/9Q4o4PvGOYipW0BldQlYBMSmZprvCNj2i2mAATx16kvzIn12GnaGjbMw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-menu": "2.0.2",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
@@ -3822,6 +3870,36 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.2.tgz",
+      "integrity": "sha512-H5dtBi/k3tc45IMd2Pu+Q2PyONFlsYJ5sWUlflSs8BQRghh5GhJHLRuB1yb88VOywuzzvGkaR/HUJJ65Jf2POA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-collection": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.2",
+        "@radix-ui/react-focus-guards": "1.0.0",
+        "@radix-ui/react-focus-scope": "1.0.1",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-popper": "1.1.0",
+        "@radix-ui/react-portal": "1.0.1",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-roving-focus": "1.0.2",
+        "@radix-ui/react-slot": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.3.tgz",
@@ -3925,6 +4003,27 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz",
+      "integrity": "sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-collection": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-controllable-state": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.0.tgz",
@@ -9938,6 +10037,23 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
       "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
+    "node_modules/cva": {
+      "name": "class-variance-authority",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.4.0.tgz",
+      "integrity": "sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ==",
+      "funding": {
+        "url": "https://joebell.co.uk"
+      },
+      "peerDependencies": {
+        "typescript": ">= 4.5.5 < 5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -11993,9 +12109,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -17168,12 +17284,12 @@
       }
     },
     "node_modules/postcss-nested": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
-      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
       "dev": true,
       "dependencies": {
-        "postcss-selector-parser": "^6.0.6"
+        "postcss-selector-parser": "^6.0.10"
       },
       "engines": {
         "node": ">=12.0"
@@ -20385,9 +20501,9 @@
       "integrity": "sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww=="
     },
     "node_modules/tailwindcss": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.7.tgz",
-      "integrity": "sha512-r7mgumZ3k0InfVPpGWcX8X/Ut4xBfv+1O/+C73ar/m01LxGVzWvPxF/w6xIUPEztrCoz7axfx0SMdh8FH8ZvRQ==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
+      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
       "dev": true,
       "dependencies": {
         "arg": "^5.0.2",
@@ -20396,18 +20512,19 @@
         "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.11",
+        "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
         "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.18",
         "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
-        "postcss-nested": "5.0.6",
+        "postcss-nested": "6.0.0",
         "postcss-selector-parser": "^6.0.10",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
@@ -20424,6 +20541,30 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/tailwindcss/node_modules/postcss": {
+      "version": "8.4.21",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -21135,7 +21276,7 @@
       "version": "4.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
       "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -24029,6 +24170,11 @@
         "use-isomorphic-layout-effect": "^1.1.1"
       }
     },
+    "@fontsource/inter": {
+      "version": "4.5.15",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.15.tgz",
+      "integrity": "sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q=="
+    },
     "@fortawesome/fontawesome-common-types": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz",
@@ -24592,6 +24738,22 @@
         "@radix-ui/react-primitive": "1.0.1"
       }
     },
+    "@radix-ui/react-checkbox": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.1.tgz",
+      "integrity": "sha512-TisH0B8hWmYP3ONRduYCyN04rR9yLPIw/Rwyn1RoC1suSoGCa8Wn+YPdSSSarSszeIbcg3p2lBkDp2XXit4sZw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "@radix-ui/react-use-previous": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0"
+      }
+    },
     "@radix-ui/react-collapsible": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.1.tgz",
@@ -24679,6 +24841,21 @@
         "@radix-ui/react-use-escape-keydown": "1.0.2"
       }
     },
+    "@radix-ui/react-dropdown-menu": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.2.tgz",
+      "integrity": "sha512-r0kN0fstrSi+uAdK2GkLxnnbhqVBy/9Q4o4PvGOYipW0BldQlYBMSmZprvCNj2i2mAATx16kvzIn12GnaGjbMw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-menu": "2.0.2",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0"
+      }
+    },
     "@radix-ui/react-focus-guards": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
@@ -24716,6 +24893,32 @@
         "@radix-ui/react-primitive": "1.0.1"
       }
     },
+    "@radix-ui/react-menu": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.2.tgz",
+      "integrity": "sha512-H5dtBi/k3tc45IMd2Pu+Q2PyONFlsYJ5sWUlflSs8BQRghh5GhJHLRuB1yb88VOywuzzvGkaR/HUJJ65Jf2POA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-collection": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.2",
+        "@radix-ui/react-focus-guards": "1.0.0",
+        "@radix-ui/react-focus-scope": "1.0.1",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-popper": "1.1.0",
+        "@radix-ui/react-portal": "1.0.1",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-roving-focus": "1.0.2",
+        "@radix-ui/react-slot": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      }
+    },
     "@radix-ui/react-popover": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.3.tgz",
@@ -24795,6 +24998,23 @@
         "@radix-ui/react-primitive": "1.0.1"
       }
     },
+    "@radix-ui/react-roving-focus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.2.tgz",
+      "integrity": "sha512-HLK+CqD/8pN6GfJm3U+cqpqhSKYAWiOJDe+A+8MfxBnOue39QEeMa43csUn2CXCHQT0/mewh1LrrG4tfkM9DMA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-collection": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.1",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-controllable-state": "1.0.0"
+      }
+    },
     "@radix-ui/react-select": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.0.tgz",
@@ -29292,6 +29512,12 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
       "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
     },
+    "cva": {
+      "version": "npm:class-variance-authority@0.4.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.4.0.tgz",
+      "integrity": "sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ==",
+      "requires": {}
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -30880,9 +31106,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.2.12",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
+      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -34590,12 +34816,12 @@
       }
     },
     "postcss-nested": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
-      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+      "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
       "dev": true,
       "requires": {
-        "postcss-selector-parser": "^6.0.6"
+        "postcss-selector-parser": "^6.0.10"
       }
     },
     "postcss-selector-parser": {
@@ -36960,9 +37186,9 @@
       "integrity": "sha512-+fflfPxvHFr81hTJpQ3MIwtqgvefHZFUHFiIHpVIRXvG/nX9+gu2P7JNlFu2bfDMJ+uHhi/pUgzaYacMoXv+Ww=="
     },
     "tailwindcss": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.7.tgz",
-      "integrity": "sha512-r7mgumZ3k0InfVPpGWcX8X/Ut4xBfv+1O/+C73ar/m01LxGVzWvPxF/w6xIUPEztrCoz7axfx0SMdh8FH8ZvRQ==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
+      "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
       "dev": true,
       "requires": {
         "arg": "^5.0.2",
@@ -36971,22 +37197,36 @@
         "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.11",
+        "fast-glob": "^3.2.12",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
         "lilconfig": "^2.0.6",
+        "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.18",
         "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
-        "postcss-nested": "5.0.6",
+        "postcss-nested": "6.0.0",
         "postcss-selector-parser": "^6.0.10",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
         "resolve": "^1.22.1"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.4.21",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+          "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+          "dev": true,
+          "requires": {
+            "nanoid": "^3.3.4",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        }
       }
     },
     "tapable": {
@@ -37538,7 +37778,7 @@
       "version": "4.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
       "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
-      "dev": true
+      "devOptional": true
     },
     "uc.micro": {
       "version": "1.0.6",
diff --git a/frontend/package.json b/frontend/package.json
index 8c30f749e..70e2f2358 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,12 +8,13 @@
     "start:docker": "next build && next start",
     "lint": "eslint --fix --ext js,ts,tsx ./src",
     "type-check": "tsc --project tsconfig.json",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 -s ./public",
     "build-storybook": "storybook build"
   },
   "dependencies": {
     "@emotion/css": "^11.10.0",
     "@emotion/server": "^11.10.0",
+    "@fontsource/inter": "^4.5.15",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-brands-svg-icons": "^6.1.2",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
@@ -22,7 +23,9 @@
     "@headlessui/react": "^1.6.6",
     "@radix-ui/react-accordion": "^1.1.0",
     "@radix-ui/react-alert-dialog": "^1.0.2",
+    "@radix-ui/react-checkbox": "^1.0.1",
     "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-dropdown-menu": "^2.0.2",
     "@radix-ui/react-label": "^2.0.0",
     "@radix-ui/react-popover": "^1.0.3",
     "@radix-ui/react-progress": "^1.0.1",
@@ -37,6 +40,7 @@
     "axios-auth-refresh": "^3.3.3",
     "classnames": "^2.3.1",
     "cookies": "^0.8.0",
+    "cva": "npm:class-variance-authority@^0.4.0",
     "fs": "^0.0.1-security",
     "gray-matter": "^4.0.3",
     "http-proxy": "^1.18.1",
@@ -101,7 +105,7 @@
     "prettier": "^2.8.3",
     "storybook": "^7.0.0-beta.30",
     "storybook-dark-mode": "^2.0.5",
-    "tailwindcss": "^3.1.4",
+    "tailwindcss": "3.2",
     "typescript": "^4.9.3"
   }
 }
diff --git a/frontend/src/components/v2/Button/Button.stories.tsx b/frontend/src/components/v2/Button/Button.stories.tsx
index 0e78b9649..51e58d0da 100644
--- a/frontend/src/components/v2/Button/Button.stories.tsx
+++ b/frontend/src/components/v2/Button/Button.stories.tsx
@@ -1,3 +1,5 @@
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -6,7 +8,16 @@ const meta: Meta<typeof Button> = {
   title: 'Components/Button',
   component: Button,
   tags: ['v2'],
-  argTypes: {}
+  argTypes: {
+    isRounded: {
+      defaultValue: true,
+      type: 'boolean'
+    },
+    isFullWidth: {
+      defaultValue: false,
+      type: 'boolean'
+    }
+  }
 };
 
 export default meta;
@@ -18,3 +29,61 @@ export const Primary: Story = {
     children: 'Hello Infisical'
   }
 };
+
+export const Secondary: Story = {
+  args: {
+    children: 'Hello Infisical',
+    colorSchema: 'secondary',
+    variant: 'outline'
+  }
+};
+
+export const Danger: Story = {
+  args: {
+    children: 'Hello Infisical',
+    colorSchema: 'danger',
+    variant: 'solid'
+  }
+};
+
+export const Plain: Story = {
+  args: {
+    children: 'Hello Infisical',
+    variant: 'plain'
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Hello Infisical',
+    disabled: true
+  }
+};
+
+export const FullWidth: Story = {
+  args: {
+    children: 'Hello Infisical',
+    isFullWidth: true
+  }
+};
+
+export const Loading: Story = {
+  args: {
+    children: 'Hello Infisical',
+    isLoading: true
+  }
+};
+
+export const LeftIcon: Story = {
+  args: {
+    children: 'Hello Infisical',
+    leftIcon: <FontAwesomeIcon icon={faPlus} className="pr-0.5" />
+  }
+};
+
+export const RightIcon: Story = {
+  args: {
+    children: 'Hello Infisical',
+    rightIcon: <FontAwesomeIcon icon={faPlus} className="pr-0.5" />
+  }
+};
diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx
index a1edb26bf..21548d0e3 100644
--- a/frontend/src/components/v2/Button/Button.tsx
+++ b/frontend/src/components/v2/Button/Button.tsx
@@ -1,32 +1,166 @@
 import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react';
+import { cva, VariantProps } from 'cva';
 import { twMerge } from 'tailwind-merge';
 
 type Props = {
   children: ReactNode;
   isDisabled?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
   // loading state
   isLoading?: boolean;
-  // various button sizes
-  size: 'sm' | 'md' | 'lg';
 };
 
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & Props;
+const buttonVariants = cva(
+  [
+    'button',
+    'transition-all',
+    'font-inter font-medium',
+    'cursor-pointer',
+    'inline-flex items-center justify-center',
+    'relative'
+  ],
+  {
+    variants: {
+      colorSchema: {
+        primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
+        secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
+        danger: ['bg-red', 'text-white', 'border-red']
+      },
+      variant: {
+        solid: '',
+        outline: ['bg-transparent', 'border-2', 'border-solid'],
+        plain: ''
+      },
+      isDisabled: {
+        true: 'bg-opacity-70 cursor-not-allowed',
+        false: ''
+      },
+      isFullWidth: {
+        true: 'w-full',
+        false: ''
+      },
+      isRounded: {
+        true: 'rounded-md',
+        false: ''
+      },
+      size: {
+        xs: ['text-xs', 'py-1', 'px-2'],
+        sm: ['text-sm', 'py-2', 'px-4'],
+        md: ['text-md', 'py-2', 'px-6'],
+        lg: ['text-lg', 'py-2', 'px-8']
+      }
+    },
+    compoundVariants: [
+      {
+        colorSchema: 'primary',
+        variant: 'outline',
+        className: 'text-primary hover:bg-primary hover:text-black'
+      },
+      {
+        colorSchema: 'secondary',
+        variant: 'outline',
+        className: 'hover:bg-mineshaft'
+      },
+      {
+        colorSchema: 'danger',
+        variant: 'outline',
+        className: 'text-red hover:bg-red hover:text-black'
+      },
+      {
+        colorSchema: 'primary',
+        variant: 'plain',
+        className: 'text-primary'
+      },
+      {
+        colorSchema: 'secondary',
+        variant: 'plain',
+        className: 'text-mineshaft'
+      },
+      {
+        colorSchema: 'danger',
+        variant: 'plain',
+        className: 'text-red'
+      },
+      {
+        colorSchema: ['danger', 'primary', 'secondary'],
+        variant: ['plain'],
+        className: 'bg-transparent py-1 px-1'
+      }
+    ]
+  }
+);
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> &
+  Props;
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, isDisabled = false, className, ...props }, ref): JSX.Element => {
+  (
+    {
+      children,
+      isDisabled = false,
+      className = '',
+      size = 'md',
+      variant = 'solid',
+      isFullWidth,
+      isRounded = true,
+      leftIcon,
+      rightIcon,
+      isLoading,
+      colorSchema = 'primary',
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    const loadingToggleClass = isLoading ? 'opacity-0' : 'opacity-100';
+
     return (
       <button
         ref={ref}
         aria-disabled={isDisabled}
         type="button"
         className={twMerge(
-          'bg-primary hover:opacity-80 transition-all text-sm px-4 py-2 font-bold rounded',
-          className
+          buttonVariants({
+            className,
+            colorSchema,
+            size,
+            variant,
+            isRounded,
+            isDisabled,
+            isFullWidth
+          })
         )}
         disabled={isDisabled}
         {...props}
       >
-        {children}
+        {isLoading && (
+          <img
+            src="/images/loading/loadingblack.gif"
+            width={36}
+            alt="loading animation"
+            className="absolute rounded-xl"
+          />
+        )}
+        <span
+          className={twMerge(
+            'transition-all shrink-0 cursor-pointer',
+            loadingToggleClass,
+            size === 'xs' ? 'mr-1' : 'mr-2'
+          )}
+        >
+          {leftIcon}
+        </span>
+        <span className={twMerge('transition-all', loadingToggleClass)}>{children}</span>
+        <span
+          className={twMerge(
+            'transition-all shrink-0 cursor-pointer',
+            loadingToggleClass,
+            size === 'xs' ? 'ml-1' : 'ml-2'
+          )}
+        >
+          {rightIcon}
+        </span>
       </button>
     );
   }
diff --git a/frontend/src/components/v2/Button/index.tsx b/frontend/src/components/v2/Button/index.tsx
index fe9c53c51..9cad84da1 100644
--- a/frontend/src/components/v2/Button/index.tsx
+++ b/frontend/src/components/v2/Button/index.tsx
@@ -1 +1,2 @@
+export type { ButtonProps } from './Button';
 export { Button } from './Button';
diff --git a/frontend/src/components/v2/Card/Card.stories.tsx b/frontend/src/components/v2/Card/Card.stories.tsx
new file mode 100644
index 000000000..e21625cb4
--- /dev/null
+++ b/frontend/src/components/v2/Card/Card.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Card, CardBody, CardFooter, CardProps, CardTitle } from './Card';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  tags: ['v2'],
+  argTypes: {
+    isRounded: {
+      type: 'boolean',
+      defaultValue: true
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+const Template = (args: CardProps) => (
+  <div className="w-96">
+    <Card {...args}>
+      <CardTitle subTitle="Please add your subtitle here">Title</CardTitle>
+      <CardBody>Content</CardBody>
+      <CardFooter>Footer</CardFooter>
+    </Card>
+  </div>
+);
+
+export const Basic: Story = {
+  render: (args) => <Template {...args} />
+};
+
+export const Hoverable: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    isHoverable: true
+  }
+};
diff --git a/frontend/src/components/v2/Card/Card.tsx b/frontend/src/components/v2/Card/Card.tsx
new file mode 100644
index 000000000..9e658aaf7
--- /dev/null
+++ b/frontend/src/components/v2/Card/Card.tsx
@@ -0,0 +1,64 @@
+import { forwardRef, ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export type CardTitleProps = {
+  children: ReactNode;
+  subTitle?: string;
+  className?: string;
+};
+
+export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
+  <div className={twMerge('p-6 pb-4 font-sans text-xl font-medium', className)}>
+    {children}
+    {subTitle && <p className="py-1 text-sm font-normal text-gray-400">{subTitle}</p>}
+  </div>
+);
+
+export type CardFooterProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const CardFooter = ({ children, className }: CardFooterProps) => (
+  <div className={twMerge('p-6 pt-0', className)}>{children}</div>
+);
+
+export type CardBodyProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const CardBody = ({ children, className }: CardBodyProps) => (
+  <div className={twMerge('p-6 pt-0', className)}>{children}</div>
+);
+
+export type CardProps = {
+  children: ReactNode;
+  className?: string;
+  isFullHeight?: boolean;
+  isRounded?: boolean;
+  isPlain?: boolean;
+  isHoverable?: boolean;
+};
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ children, isFullHeight, isRounded, isHoverable, isPlain, className }, ref): JSX.Element => {
+    return (
+      <div
+        ref={ref}
+        className={twMerge(
+          'flex flex-col w-full font-inter text-gray-200 bg-mineshaft-700 shadow-md',
+          isFullHeight && 'h-full',
+          isRounded && 'rounded-md',
+          isPlain && 'shadow-none',
+          isHoverable && 'hover:shadow-xl',
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = 'Card';
diff --git a/frontend/src/components/v2/Card/index.tsx b/frontend/src/components/v2/Card/index.tsx
new file mode 100644
index 000000000..35276dda6
--- /dev/null
+++ b/frontend/src/components/v2/Card/index.tsx
@@ -0,0 +1,2 @@
+export type { CardBodyProps, CardFooterProps, CardProps, CardTitleProps } from './Card';
+export { Card, CardBody, CardFooter, CardTitle } from './Card';
diff --git a/frontend/src/components/v2/Checkbox/Checkbox.stories.tsx b/frontend/src/components/v2/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 000000000..0dfe1b4a1
--- /dev/null
+++ b/frontend/src/components/v2/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Checkbox } from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Simple: Story = {
+  args: {
+    children: 'Accept the condition'
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Accept the condition',
+    isDisabled: true
+  }
+};
+
+export const Required: Story = {
+  args: {
+    children: 'Accept the condition',
+    isRequired: true
+  }
+};
diff --git a/frontend/src/components/v2/Checkbox/Checkbox.tsx b/frontend/src/components/v2/Checkbox/Checkbox.tsx
new file mode 100644
index 000000000..5b30fb458
--- /dev/null
+++ b/frontend/src/components/v2/Checkbox/Checkbox.tsx
@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { twMerge } from 'tailwind-merge';
+
+export type CheckboxProps = Omit<
+  CheckboxPrimitive.CheckboxProps,
+  'checked' | 'disabled' | 'required'
+> & {
+  children: ReactNode;
+  id: string;
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  isRequired?: boolean;
+};
+
+export const Checkbox = ({
+  children,
+  className,
+  id,
+  isChecked,
+  isDisabled,
+  isRequired,
+  ...props
+}: CheckboxProps): JSX.Element => {
+  return (
+    <div className="flex items-center font-inter text-bunker-300">
+      <CheckboxPrimitive.Root
+        className={twMerge(
+          'flex items-center justify-center w-5 h-5 mr-3 transition-all rounded shadow hover:bg-bunker-200 bg-bunker-300',
+          isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
+          className
+        )}
+        required={isRequired}
+        checked={isChecked}
+        disabled={isDisabled}
+        {...props}
+        id={id}
+      >
+        <CheckboxPrimitive.Indicator className="text-bunker-800">
+          <FontAwesomeIcon icon={faCheck} size="sm" />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+      <label className="text-sm" htmlFor={id}>
+        {children}
+        {isRequired && <span className="pl-1 text-red">*</span>}
+      </label>
+    </div>
+  );
+};
diff --git a/frontend/src/components/v2/Checkbox/index.tsx b/frontend/src/components/v2/Checkbox/index.tsx
new file mode 100644
index 000000000..fcd016662
--- /dev/null
+++ b/frontend/src/components/v2/Checkbox/index.tsx
@@ -0,0 +1,2 @@
+export type { CheckboxProps } from './Checkbox';
+export { Checkbox } from './Checkbox';
diff --git a/frontend/src/components/v2/Dropdown/Dropdown.stories.tsx b/frontend/src/components/v2/Dropdown/Dropdown.stories.tsx
new file mode 100644
index 000000000..35e7fd664
--- /dev/null
+++ b/frontend/src/components/v2/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,111 @@
+import { faPlus, faTrash, faUndo } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { IconButton } from '../IconButton';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from './Dropdown';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownMenuContent>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton ariaLabel="add">
+            <FontAwesomeIcon icon={faPlus} />
+          </IconButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" {...args}>
+          <DropdownMenuItem>Delete</DropdownMenuItem>
+          <DropdownMenuItem>Undo</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+};
+
+export const Icons: Story = {
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton ariaLabel="add">
+            <FontAwesomeIcon icon={faPlus} />
+          </IconButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" {...args}>
+          <DropdownMenuItem icon={<FontAwesomeIcon icon={faTrash} size="sm" />}>
+            Delete
+          </DropdownMenuItem>
+          <DropdownMenuItem icon={<FontAwesomeIcon icon={faUndo} size="sm" />}>
+            Undo
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+};
+
+export const WithDivider: Story = {
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton ariaLabel="add">
+            <FontAwesomeIcon icon={faPlus} />
+          </IconButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" {...args}>
+          <DropdownMenuItem>Delete</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Undo</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Redo</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+};
+
+export const Group: Story = {
+  render: (args) => (
+    <div className="flex justify-center w-full">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton ariaLabel="add">
+            <FontAwesomeIcon icon={faPlus} />
+          </IconButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" {...args}>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Group</DropdownMenuLabel>
+            <DropdownMenuItem>Undo</DropdownMenuItem>
+            <DropdownMenuItem>Delete</DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Group#2</DropdownMenuLabel>
+            <DropdownMenuItem>Undo</DropdownMenuItem>
+            <DropdownMenuItem>Delete</DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+};
diff --git a/frontend/src/components/v2/Dropdown/Dropdown.tsx b/frontend/src/components/v2/Dropdown/Dropdown.tsx
new file mode 100644
index 000000000..57a206493
--- /dev/null
+++ b/frontend/src/components/v2/Dropdown/Dropdown.tsx
@@ -0,0 +1,97 @@
+import { ComponentPropsWithRef, ElementType, forwardRef, ReactNode, Ref } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { twMerge } from 'tailwind-merge';
+
+// Main menu or parent container
+export type DropdownMenuProps = DropdownMenuPrimitive.DropdownMenuProps;
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+
+// trigger
+export type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+// item container
+export type DropdownMenuContentProps = DropdownMenuPrimitive.MenuContentProps;
+export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+  ({ children, className, ...props }, forwardedRef) => {
+    return (
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+          sideOffset={10}
+          {...props}
+          ref={forwardedRef}
+          className={twMerge(
+            'min-w-[220px] bg-bunker will-change-auto text-bunker-300 rounded-md shadow data-[side=top]:animate-slideDownAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade',
+            className
+          )}
+        >
+          {children}
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Portal>
+    );
+  }
+);
+
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+// item label component
+export type DropdownLabelProps = DropdownMenuPrimitive.MenuLabelProps;
+export const DropdownMenuLabel = ({ className, ...props }: DropdownLabelProps) => (
+  <DropdownMenuPrimitive.Label
+    {...props}
+    className={twMerge('text-xs text-bunker-400 px-4 pt-2 pb-1', className)}
+  />
+);
+
+// dropdown items
+export type DropdownMenuItemProps<T extends ElementType> =
+  DropdownMenuPrimitive.MenuContentProps & {
+    icon?: ReactNode;
+    as?: T;
+    inputRef?: Ref<T>;
+  };
+
+export const DropdownMenuItem = <T extends ElementType = 'button'>({
+  children,
+  inputRef,
+  className,
+  icon,
+  as: Item = 'button',
+  ...props
+}: DropdownMenuItemProps<T> & ComponentPropsWithRef<T>) => (
+  <DropdownMenuPrimitive.Item
+    {...props}
+    className={twMerge(
+      'text-sm block font-inter px-4 py-2 data-[highlighted]:bg-gray-700 outline-none cursor-pointer',
+      className
+    )}
+  >
+    <Item type="button" role="menuitem" class="flex w-full items-center" ref={inputRef}>
+      {icon && <span className="flex items-center mr-2">{icon}</span>}
+      <span className="flex-grow text-left">{children}</span>
+    </Item>
+  </DropdownMenuPrimitive.Item>
+);
+
+// grouping items into 1
+export type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
+
+export const DropdownMenuGroup = forwardRef<HTMLDivElement, DropdownMenuGroupProps>(
+  ({ ...props }, ref) => <DropdownMenuPrimitive.Group {...props} ref={ref} />
+);
+
+DropdownMenuGroup.displayName = 'DropdownMenuGroup';
+
+// Divider
+export const DropdownMenuSeparator = forwardRef<
+  HTMLDivElement,
+  DropdownMenuPrimitive.DropdownMenuSeparatorProps
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    {...props}
+    className={twMerge('h-[1px] bg-gray-700 m-1', className)}
+  />
+));
+
+DropdownMenuSeparator.displayName = 'DropdownMenuSeperator';
diff --git a/frontend/src/components/v2/Dropdown/index.tsx b/frontend/src/components/v2/Dropdown/index.tsx
new file mode 100644
index 000000000..15a77a417
--- /dev/null
+++ b/frontend/src/components/v2/Dropdown/index.tsx
@@ -0,0 +1,17 @@
+export type {
+  DropdownLabelProps,
+  DropdownMenuContentProps,
+  DropdownMenuGroupProps,
+  DropdownMenuItemProps,
+  DropdownMenuProps,
+  DropdownMenuTriggerProps
+} from './Dropdown';
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from './Dropdown';
diff --git a/frontend/src/components/v2/FormControl/FormControl.stories.tsx b/frontend/src/components/v2/FormControl/FormControl.stories.tsx
new file mode 100644
index 000000000..2e3692228
--- /dev/null
+++ b/frontend/src/components/v2/FormControl/FormControl.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+// Be careful on dep cycle
+import { Input } from '../Input/Input';
+import { FormControl } from './FormControl';
+
+const meta: Meta<typeof FormControl> = {
+  title: 'Components/FormControl',
+  component: FormControl,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof FormControl>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Basic: Story = {
+  args: {
+    children: <Input />,
+    label: 'Email',
+    id: 'email',
+    helperText: 'Type something..'
+  }
+};
+
+export const RequiredInput: Story = {
+  args: {
+    ...Basic.args,
+    isRequired: true
+  }
+};
+
+export const ErrorInput: Story = {
+  args: {
+    ...Basic.args,
+    errorText: 'Some random error',
+    isError: true
+  }
+};
diff --git a/frontend/src/components/v2/FormControl/FormControl.tsx b/frontend/src/components/v2/FormControl/FormControl.tsx
new file mode 100644
index 000000000..14e58d5be
--- /dev/null
+++ b/frontend/src/components/v2/FormControl/FormControl.tsx
@@ -0,0 +1,72 @@
+import { cloneElement, ReactNode } from 'react';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as Label from '@radix-ui/react-label';
+import { twMerge } from 'tailwind-merge';
+
+export type FormLabelProps = {
+  id?: string;
+  isRequired?: boolean;
+  label?: ReactNode;
+};
+
+export const FormLabel = ({ id, label, isRequired }: FormLabelProps) => (
+  <Label.Root className="text-mineshaft-300 text-sm font-medium block mb-1 ml-0.5" htmlFor={id}>
+    {label}
+    {isRequired && <span className="ml-1 text-red">*</span>}
+  </Label.Root>
+);
+
+export type FormHelperTextProps = {
+  isError?: boolean;
+  text?: ReactNode;
+};
+
+export const FormHelperText = ({ isError, text }: FormHelperTextProps) => (
+  <div
+    className={twMerge(
+      'text-xs font-inter flex items-center opacity-90 text-mineshaft-300 mt-2',
+      isError && 'text-red-600'
+    )}
+  >
+    {isError && (
+      <span>
+        <FontAwesomeIcon icon={faExclamationTriangle} size="sm" className="mr-1" />
+      </span>
+    )}
+    <span>{text}</span>
+  </div>
+);
+
+export type FormControlProps = {
+  id?: string;
+  isRequired?: boolean;
+  isError?: boolean;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  errorText?: ReactNode;
+  children: JSX.Element;
+};
+
+export const FormControl = ({
+  children,
+  isRequired,
+  label,
+  helperText,
+  errorText,
+  id,
+  isError
+}: FormControlProps): JSX.Element => {
+  return (
+    <div>
+      {typeof label === 'string' ? (
+        <FormLabel label={label} isRequired={isRequired} id={id} />
+      ) : (
+        label
+      )}
+      {cloneElement(children, { isRequired, 'data-required': isRequired, isError })}
+      {!isError && helperText && <FormHelperText isError={isError} text={helperText} />}
+      {isError && errorText && <FormHelperText isError={isError} text={errorText} />}
+    </div>
+  );
+};
diff --git a/frontend/src/components/v2/FormControl/index.tsx b/frontend/src/components/v2/FormControl/index.tsx
new file mode 100644
index 000000000..806103759
--- /dev/null
+++ b/frontend/src/components/v2/FormControl/index.tsx
@@ -0,0 +1,2 @@
+export type { FormControlProps, FormHelperTextProps, FormLabelProps } from './FormControl';
+export { FormControl, FormHelperText, FormLabel } from './FormControl';
diff --git a/frontend/src/components/v2/IconButton/IconButton.stories.tsx b/frontend/src/components/v2/IconButton/IconButton.stories.tsx
new file mode 100644
index 000000000..d9abf35ec
--- /dev/null
+++ b/frontend/src/components/v2/IconButton/IconButton.stories.tsx
@@ -0,0 +1,60 @@
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { IconButton } from './IconButton';
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  tags: ['v2'],
+  argTypes: {
+    isRounded: {
+      defaultValue: true,
+      type: 'boolean'
+    },
+    ariaLabel: {
+      defaultValue: 'Some buttons...'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    children: <FontAwesomeIcon icon={faPlus} />
+  }
+};
+
+export const Secondary: Story = {
+  args: {
+    children: <FontAwesomeIcon icon={faPlus} />,
+    colorSchema: 'secondary',
+    variant: 'outline'
+  }
+};
+
+export const Danger: Story = {
+  args: {
+    children: <FontAwesomeIcon icon={faPlus} />,
+    colorSchema: 'danger',
+    variant: 'solid'
+  }
+};
+
+export const Plain: Story = {
+  args: {
+    children: <FontAwesomeIcon icon={faPlus} />,
+    variant: 'plain'
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    children: <FontAwesomeIcon icon={faPlus} />,
+    disabled: true
+  }
+};
diff --git a/frontend/src/components/v2/IconButton/IconButton.tsx b/frontend/src/components/v2/IconButton/IconButton.tsx
new file mode 100644
index 000000000..b1a1f4813
--- /dev/null
+++ b/frontend/src/components/v2/IconButton/IconButton.tsx
@@ -0,0 +1,131 @@
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from 'react';
+import { cva, VariantProps } from 'cva';
+import { twMerge } from 'tailwind-merge';
+
+type Props = {
+  children: ReactNode;
+  // This is kept as required because by accessibility convention and eslint
+  // when button doesn't have text an aria-label needs to be passed
+  ariaLabel: string;
+  isDisabled?: boolean;
+};
+
+const iconButtonVariants = cva(
+  [
+    'button',
+    'transition-all',
+    'font-inter font-medium',
+    'cursor-pointer',
+    'inline-flex items-center justify-center',
+    'relative'
+  ],
+  {
+    variants: {
+      colorSchema: {
+        primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
+        secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
+        danger: ['bg-red', 'text-white', 'border-red']
+      },
+      variant: {
+        solid: '',
+        outline: ['bg-transparent', 'border-2', 'border-solid'],
+        plain: ''
+      },
+      isDisabled: {
+        true: 'bg-opacity-70 cursor-not-allowed',
+        false: ''
+      },
+      isRounded: {
+        true: 'rounded-md',
+        false: ''
+      },
+      size: {
+        xs: ['text-xs', 'py-1', 'px-2'],
+        sm: ['text-sm', 'py-2', 'px-3'],
+        md: ['text-md', 'py-3', 'px-4'],
+        lg: ['text-lg', 'py-3', 'px-6']
+      }
+    },
+    compoundVariants: [
+      {
+        colorSchema: 'primary',
+        variant: 'outline',
+        className: 'text-primary hover:bg-primary hover:text-black'
+      },
+      {
+        colorSchema: 'secondary',
+        variant: 'outline',
+        className: 'hover:bg-mineshaft'
+      },
+      {
+        colorSchema: 'danger',
+        variant: 'outline',
+        className: 'text-red hover:bg-red hover:text-black'
+      },
+      {
+        colorSchema: 'primary',
+        variant: 'plain',
+        className: 'text-primary'
+      },
+      {
+        colorSchema: 'secondary',
+        variant: 'plain',
+        className: 'text-mineshaft'
+      },
+      {
+        colorSchema: 'danger',
+        variant: 'plain',
+        className: 'text-red'
+      },
+      {
+        colorSchema: ['danger', 'primary', 'secondary'],
+        variant: ['plain'],
+        className: 'bg-transparent py-1 px-1'
+      }
+    ]
+  }
+);
+
+export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> &
+  VariantProps<typeof iconButtonVariants> &
+  Props;
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      children,
+      ariaLabel,
+      isDisabled = false,
+      className,
+      size = 'md',
+      variant = 'solid',
+      isRounded = true,
+      colorSchema = 'primary',
+      ...props
+    },
+    ref
+  ): JSX.Element => (
+    <button
+      ref={ref}
+      aria-disabled={isDisabled}
+      type="button"
+      aria-label={ariaLabel}
+      className={twMerge(
+        iconButtonVariants({
+          className,
+          colorSchema,
+          size,
+          variant,
+          isRounded,
+          isDisabled
+        })
+      )}
+      disabled={isDisabled}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+);
+
+IconButton.displayName = 'IconButton';
diff --git a/frontend/src/components/v2/IconButton/index.tsx b/frontend/src/components/v2/IconButton/index.tsx
new file mode 100644
index 000000000..e920c3d6a
--- /dev/null
+++ b/frontend/src/components/v2/IconButton/index.tsx
@@ -0,0 +1,2 @@
+export type { IconButtonProps } from './IconButton';
+export { IconButton } from './IconButton';
diff --git a/frontend/src/components/v2/Input/Input.stories.tsx b/frontend/src/components/v2/Input/Input.stories.tsx
new file mode 100644
index 000000000..288805b21
--- /dev/null
+++ b/frontend/src/components/v2/Input/Input.stories.tsx
@@ -0,0 +1,66 @@
+import { faEye, faMailBulk } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Input } from './Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['v2'],
+  argTypes: {
+    isRounded: {
+      defaultValue: true,
+      type: 'boolean'
+    },
+    placeholder: {
+      defaultValue: 'Type anything',
+      type: 'string'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Filled: Story = {
+  args: {}
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline'
+  }
+};
+
+export const Plain: Story = {
+  args: {
+    variant: 'plain'
+  }
+};
+
+export const Error: Story = {
+  args: {
+    isError: true
+  }
+};
+
+export const AutoWidth: Story = {
+  args: {
+    isFullWidth: false,
+    className: 'w-auto'
+  }
+};
+
+export const RightIcon: Story = {
+  args: {
+    rightIcon: <FontAwesomeIcon icon={faEye} />
+  }
+};
+
+export const LeftIcon: Story = {
+  args: {
+    leftIcon: <FontAwesomeIcon icon={faMailBulk} />
+  }
+};
diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
new file mode 100644
index 000000000..4f502e31d
--- /dev/null
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -0,0 +1,102 @@
+import { forwardRef, InputHTMLAttributes, ReactNode } from 'react';
+import { cva, VariantProps } from 'cva';
+import { twMerge } from 'tailwind-merge';
+
+type Props = {
+  placeholder?: string;
+  isFullWidth?: boolean;
+  isRequired?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+};
+
+const inputVariants = cva(
+  'input w-full py-2 text-gray-400 placeholder-gray-500 placeholder-opacity-50',
+  {
+    variants: {
+      size: {
+        xs: ['text-xs'],
+        sm: ['text-sm'],
+        md: ['text-md'],
+        lg: ['text-lg']
+      },
+      isRounded: {
+        true: ['rounded-md'],
+        false: ''
+      },
+      variant: {
+        filled: ['bg-bunker-800', 'text-gray-400'],
+        outline: ['bg-transparent'],
+        plain: 'bg-transparent outline-none'
+      },
+      isError: {
+        true: 'focus:ring-red/50 placeholder-red-300',
+        false: 'focus:ring-primary/50'
+      }
+    },
+    compoundVariants: []
+  }
+);
+
+const inputParentContainerVariants = cva('inline-flex font-inter items-center border relative', {
+  variants: {
+    isRounded: {
+      true: ['rounded-md'],
+      false: ''
+    },
+    isError: {
+      true: 'border-red',
+      false: 'border-mineshaft-400'
+    },
+    isFullWidth: {
+      true: 'w-full',
+      false: ''
+    },
+    variant: {
+      filled: ['bg-bunker-800', 'text-gray-400'],
+      outline: ['bg-transparent'],
+      plain: 'border-none'
+    }
+  }
+});
+
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> &
+  VariantProps<typeof inputVariants> &
+  Props;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      className,
+      isRounded = true,
+      isFullWidth = true,
+      isError = false,
+      isRequired,
+      leftIcon,
+      rightIcon,
+      variant = 'filled',
+      size = 'md',
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    return (
+      <div className={inputParentContainerVariants({ isRounded, isError, isFullWidth, variant })}>
+        {leftIcon && <span className="absolute left-0 ml-2">{leftIcon}</span>}
+        <input
+          {...props}
+          required={isRequired}
+          ref={ref}
+          className={twMerge(
+            leftIcon ? 'pl-9' : 'pl-4',
+            rightIcon ? 'pr-9' : 'pr-4',
+            inputVariants({ className, isError, size, isRounded, variant })
+          )}
+        />
+        {rightIcon && <span className="absolute right-0 mr-2">{rightIcon}</span>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
diff --git a/frontend/src/components/v2/Input/index.tsx b/frontend/src/components/v2/Input/index.tsx
new file mode 100644
index 000000000..803d2fbab
--- /dev/null
+++ b/frontend/src/components/v2/Input/index.tsx
@@ -0,0 +1,2 @@
+export type { InputProps } from './Input';
+export { Input } from './Input';
diff --git a/frontend/src/components/v2/Menu/Menu.stories.tsx b/frontend/src/components/v2/Menu/Menu.stories.tsx
new file mode 100644
index 000000000..1523426e8
--- /dev/null
+++ b/frontend/src/components/v2/Menu/Menu.stories.tsx
@@ -0,0 +1,107 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { faKey, faUser } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Menu, MenuGroup, MenuItem } from './Menu';
+
+const meta: Meta<typeof Menu> = {
+  title: 'Components/Menu',
+  component: Menu,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Menu>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <MenuItem>Secrets</MenuItem>
+      <MenuItem>Members</MenuItem>
+      <MenuItem>Integrations</MenuItem>
+    </Menu>
+  ),
+  args: {}
+};
+
+export const SelectedItem: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <MenuItem isSelected>Secrets</MenuItem>
+      <MenuItem>Members</MenuItem>
+      <MenuItem>Integrations</MenuItem>
+    </Menu>
+  ),
+  args: {}
+};
+
+export const GroupedItem: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <MenuGroup title="Group 1">
+        <MenuItem>Secrets</MenuItem>
+        <MenuItem>Members</MenuItem>
+      </MenuGroup>
+      <MenuGroup title="Group 2">
+        <MenuItem>Secrets</MenuItem>
+        <MenuItem>Members</MenuItem>
+      </MenuGroup>
+    </Menu>
+  ),
+  args: {}
+};
+
+export const DisabledItem: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <MenuGroup title="Group 1">
+        <MenuItem isDisabled>Secrets</MenuItem>
+        <MenuItem>Members</MenuItem>
+      </MenuGroup>
+      <MenuGroup title="Group 2">
+        <MenuItem>Secrets</MenuItem>
+        <MenuItem>Members</MenuItem>
+      </MenuGroup>
+    </Menu>
+  ),
+  args: {}
+};
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <MenuGroup title="Group 1">
+        <MenuItem isDisabled icon={<FontAwesomeIcon icon={faKey} />}>
+          Secrets
+        </MenuItem>
+        <MenuItem icon={<FontAwesomeIcon icon={faUser} />}>Members</MenuItem>
+      </MenuGroup>
+      <MenuGroup title="Group 2">
+        <MenuItem icon={<FontAwesomeIcon icon={faKey} />}>Secrets</MenuItem>
+        <MenuItem icon={<FontAwesomeIcon icon={faKey} />}>Members</MenuItem>
+      </MenuGroup>
+    </Menu>
+  ),
+  args: {}
+};
+
+export const WithDescription: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <MenuItem
+        isDisabled
+        icon={<FontAwesomeIcon icon={faKey} />}
+        description="Some random description"
+      >
+        Secrets
+      </MenuItem>
+      <MenuItem icon={<FontAwesomeIcon icon={faUser} />} description="Some random description">
+        Members
+      </MenuItem>
+    </Menu>
+  ),
+  args: {}
+};
diff --git a/frontend/src/components/v2/Menu/Menu.tsx b/frontend/src/components/v2/Menu/Menu.tsx
new file mode 100644
index 000000000..1497b01fa
--- /dev/null
+++ b/frontend/src/components/v2/Menu/Menu.tsx
@@ -0,0 +1,64 @@
+import { ComponentPropsWithRef, ElementType, ReactNode, Ref } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export type MenuProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const Menu = ({ children, className }: MenuProps): JSX.Element => {
+  return <ul className={twMerge('p-2', className)}>{children}</ul>;
+};
+
+export type MenuItemProps<T extends ElementType> = {
+  // Kudos to https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2
+  as?: T;
+  children: ReactNode;
+  icon?: ReactNode;
+  description?: ReactNode;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  className?: string;
+  inputRef?: Ref<T>;
+};
+
+export const MenuItem = <T extends ElementType = 'button'>({
+  children,
+  icon,
+  className,
+  isDisabled,
+  isSelected,
+  as: Item = 'button',
+  description,
+  // wrapping in forward ref with generic component causes the loss of ts definitions on props
+  inputRef
+}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
+  <li
+    className={twMerge(
+      'px-2 py-3 font-inter flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
+      isSelected && 'text-primary',
+      isDisabled && 'text-gray-500 hover:bg-transparent cursor-not-allowed',
+      className
+    )}
+  >
+    <Item type="button" role="menuitem" class="flex items-center" ref={inputRef}>
+      {icon && <span className="mr-2">{icon}</span>}
+      <span className="flex-grow text-left">{children}</span>
+    </Item>
+    {description && <span className="mt-2 text-xs">{description}</span>}
+  </li>
+);
+
+MenuItem.displayName = 'MenuItem';
+
+export type MenuGroupProps = {
+  children: ReactNode;
+  title: ReactNode;
+};
+
+export const MenuGroup = ({ children, title }: MenuGroupProps): JSX.Element => (
+  <>
+    <li className="p-2 text-xs text-gray-400">{title}</li>
+    {children}
+  </>
+);
diff --git a/frontend/src/components/v2/Menu/index.tsx b/frontend/src/components/v2/Menu/index.tsx
new file mode 100644
index 000000000..09fed20fb
--- /dev/null
+++ b/frontend/src/components/v2/Menu/index.tsx
@@ -0,0 +1,2 @@
+export type { MenuGroupProps, MenuItemProps, MenuProps } from './Menu';
+export { Menu, MenuGroup, MenuItem } from './Menu';
diff --git a/frontend/src/components/v2/Modal/Modal.stories.tsx b/frontend/src/components/v2/Modal/Modal.stories.tsx
new file mode 100644
index 000000000..5cf19be79
--- /dev/null
+++ b/frontend/src/components/v2/Modal/Modal.stories.tsx
@@ -0,0 +1,33 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import { Modal, ModalContent, ModalContentProps, ModalTrigger } from './Modal';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Components/Modal',
+  component: Modal,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof ModalContent>;
+
+const Template = (args: ModalContentProps) => (
+  <Modal>
+    <ModalTrigger asChild>
+      <Button>Open</Button>
+    </ModalTrigger>
+    <ModalContent {...args}>Hello world</ModalContent>
+  </Modal>
+);
+
+export const Basic: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    title: 'Title',
+    subTitle: 'Something as subtitle',
+    footerContent: 'footer content'
+  }
+};
diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
new file mode 100644
index 000000000..c7d42541d
--- /dev/null
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -0,0 +1,57 @@
+import { forwardRef, ReactNode } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { twMerge } from 'tailwind-merge';
+
+import { Card, CardBody, CardFooter, CardTitle } from '../Card';
+import { IconButton } from '../IconButton';
+
+export type ModalContentProps = DialogPrimitive.DialogContentProps & {
+  title?: ReactNode;
+  subTitle?: string;
+  footerContent?: ReactNode;
+};
+
+export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
+  ({ children, title, subTitle, className, footerContent, ...props }, forwardedRef) => (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay
+        className="fixed inset-0 w-full h-full animate-fadeIn"
+        style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      />
+      <DialogPrimitive.Content {...props} ref={forwardedRef}>
+        <Card
+          isRounded
+          className={twMerge(
+            'fixed max-w-md animate-popIn top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4',
+            className
+          )}
+        >
+          {title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
+          <CardBody>{children}</CardBody>
+          {footerContent && <CardFooter>{footerContent}</CardFooter>}
+          <DialogPrimitive.Close aria-label="Close" asChild>
+            <IconButton
+              variant="plain"
+              ariaLabel="close"
+              className="absolute top-2.5 right-2.5 text-white hover:bg-gray-600 rounded"
+            >
+              <FontAwesomeIcon icon={faTimes} size="sm" className="cursor-pointer" />
+            </IconButton>
+          </DialogPrimitive.Close>
+        </Card>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  )
+);
+
+ModalContent.displayName = 'ModalContent';
+
+export type ModalProps = Omit<DialogPrimitive.DialogProps, 'open'> & { isOpen?: boolean };
+export const Modal = ({ isOpen, ...props }: ModalProps) => (
+  <DialogPrimitive.Root open={isOpen} {...props} />
+);
+
+export const ModalTrigger = DialogPrimitive.Trigger;
+export type ModalTriggerProps = DialogPrimitive.DialogTriggerProps;
diff --git a/frontend/src/components/v2/Modal/index.tsx b/frontend/src/components/v2/Modal/index.tsx
new file mode 100644
index 000000000..c97a564fb
--- /dev/null
+++ b/frontend/src/components/v2/Modal/index.tsx
@@ -0,0 +1,2 @@
+export type { ModalContentProps, ModalProps, ModalTriggerProps } from './Modal';
+export { Modal, ModalContent, ModalTrigger } from './Modal';
diff --git a/frontend/src/components/v2/Select/Select.stories.tsx b/frontend/src/components/v2/Select/Select.stories.tsx
new file mode 100644
index 000000000..51f75ae53
--- /dev/null
+++ b/frontend/src/components/v2/Select/Select.stories.tsx
@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import { SelectProps } from '@radix-ui/react-select';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Select, SelectItem } from './Select';
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['v2'],
+  argTypes: {
+    placeholder: {
+      defaultValue: 'Type something...'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <div className="">
+      <Select placeholder="Type anything..." className="w-72" {...args}>
+        <SelectItem value="1">John</SelectItem>
+        <SelectItem value="2">Peter</SelectItem>
+        <SelectItem value="3">Suzy</SelectItem>
+      </Select>
+    </div>
+  )
+};
+
+const Controlled = (args: SelectProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState('');
+
+  return (
+    <div className="">
+      <Select
+        defaultValue="1"
+        className="w-72"
+        open={isOpen}
+        onValueChange={(val) => setSelected(val)}
+        value={selected}
+        onOpenChange={(open) => setIsOpen(open)}
+        {...args}
+      >
+        <SelectItem value="1">John</SelectItem>
+        <SelectItem value="2">Peter</SelectItem>
+        <SelectItem value="3">Suzy</SelectItem>
+      </Select>
+    </div>
+  );
+};
+
+export const Control: Story = {
+  render: (args) => <Controlled {...args} />
+};
+
+export const Disabled: Story = {
+  render: (args) => (
+    <div className="">
+      <Select defaultValue="1" className="w-72" {...args}>
+        <SelectItem value="1">John</SelectItem>
+        <SelectItem value="2" isDisabled>
+          Peter
+        </SelectItem>
+        <SelectItem value="3">Suzy</SelectItem>
+      </Select>
+    </div>
+  )
+};
+
+export const Loading: Story = {
+  render: (args) => (
+    <div className="">
+      <Select defaultValue="1" className="w-72" isLoading {...args}>
+        <SelectItem value="1">John</SelectItem>
+        <SelectItem value="2">Peter</SelectItem>
+        <SelectItem value="3">Suzy</SelectItem>
+      </Select>
+    </div>
+  )
+};
+
+const AsyncSelectOptions = () => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // eslint-disable-next-line no-new
+    new Promise<void>((resolve): void => {
+      setTimeout(() => {
+        setIsLoading(false);
+        resolve();
+      }, 1000);
+    });
+  }, []);
+
+  return (
+    <div className="">
+      <Select placeholder="Hello" className="w-72" isLoading={isLoading}>
+        <SelectItem value="1">John</SelectItem>
+        <SelectItem value="2">Peter</SelectItem>
+        <SelectItem value="3">Suzy</SelectItem>
+      </Select>
+    </div>
+  );
+};
+
+export const Async: Story = {
+  render: (args) => <AsyncSelectOptions {...args} />
+};
diff --git a/frontend/src/components/v2/Select/Select.tsx b/frontend/src/components/v2/Select/Select.tsx
new file mode 100644
index 000000000..c00223e2b
--- /dev/null
+++ b/frontend/src/components/v2/Select/Select.tsx
@@ -0,0 +1,96 @@
+import { forwardRef, ReactNode } from 'react';
+import { faCheck, faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { twMerge } from 'tailwind-merge';
+
+import { Spinner } from '../Spinner';
+
+type Props = {
+  children: ReactNode;
+  placeholder?: string;
+  className?: string;
+  isLoading?: boolean;
+};
+
+export type SelectProps = SelectPrimitive.SelectProps & Props;
+
+export const Select = forwardRef<HTMLButtonElement, SelectProps>(
+  ({ children, placeholder, className, isLoading, ...props }, ref): JSX.Element => {
+    return (
+      <SelectPrimitive.Root {...props}>
+        <SelectPrimitive.Trigger
+          ref={ref}
+          className={twMerge(
+            `inline-flex items-center justify-between data-[placeholder]:text-gray-500
+            px-4 py-2.5 font-inter text-sm text-white rounded-md bg-mineshaft-800`,
+            className
+          )}
+        >
+          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Icon className="ml-3">
+            <FontAwesomeIcon icon={faChevronDown} size="sm" />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content
+            position="popper"
+            sideOffset={5}
+            className="overflow-hidden text-white rounded-md shadow-md font-inter bg-mineshaft-800"
+            style={{ width: 'var(--radix-select-trigger-width)' }}
+          >
+            <SelectPrimitive.ScrollUpButton>
+              <FontAwesomeIcon icon={faChevronUp} size="sm" />
+            </SelectPrimitive.ScrollUpButton>
+            <SelectPrimitive.Viewport className="p-2">
+              {isLoading ? (
+                <div className="flex items-center justify-center">
+                  <Spinner size="xs" />
+                  <span className="ml-2 text-xs text-gray-500">Loading...</span>
+                </div>
+              ) : (
+                children
+              )}
+            </SelectPrimitive.Viewport>
+            <SelectPrimitive.ScrollDownButton>
+              <FontAwesomeIcon icon={faChevronDown} size="sm" />
+            </SelectPrimitive.ScrollDownButton>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+    );
+  }
+);
+
+Select.displayName = 'Select';
+
+export type SelectItemProps = Omit<SelectPrimitive.SelectItemProps, 'disabled'> & {
+  isDisabled?: boolean;
+  isSelected?: boolean;
+};
+
+export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
+  ({ children, className, isSelected, isDisabled, ...props }, forwardedRef) => {
+    return (
+      <SelectPrimitive.Item
+        {...props}
+        className={twMerge(
+          `text-sm rounded-sm transition-all hover:text-primary 
+          hover:bg-mineshaft-700 flex items-center pl-10 pr-4 py-2 cursor-pointer 
+          select-none outline-none relative`,
+          isSelected && 'text-primary',
+          isDisabled && 'text-gray-600 hover:bg-transparent cursor-not-allowed hover:text-gray-600',
+          className
+        )}
+        ref={forwardedRef}
+      >
+        <SelectPrimitive.ItemIndicator className="absolute left-2">
+          <FontAwesomeIcon icon={faCheck} size="sm" />
+        </SelectPrimitive.ItemIndicator>
+        <SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
+      </SelectPrimitive.Item>
+    );
+  }
+);
+
+SelectItem.displayName = 'SelectItem';
diff --git a/frontend/src/components/v2/Select/index.tsx b/frontend/src/components/v2/Select/index.tsx
new file mode 100644
index 000000000..269099af6
--- /dev/null
+++ b/frontend/src/components/v2/Select/index.tsx
@@ -0,0 +1,2 @@
+export type { SelectItemProps, SelectProps } from './Select';
+export { Select, SelectItem } from './Select';
diff --git a/frontend/src/components/v2/Spinner/Spinner.tsx b/frontend/src/components/v2/Spinner/Spinner.tsx
new file mode 100644
index 000000000..0fcbf1ce0
--- /dev/null
+++ b/frontend/src/components/v2/Spinner/Spinner.tsx
@@ -0,0 +1,42 @@
+import { twMerge } from 'tailwind-merge';
+
+type SizeOptions = 'xs' | 'sm' | 'md' | 'lg';
+
+type Props = {
+  className?: string;
+  size?: SizeOptions;
+};
+
+const sizeChart: Record<SizeOptions, string> = {
+  xs: 'w-4 h-4',
+  sm: 'w-6 h-6',
+  md: 'w-8 h-8',
+  lg: 'w-12 h-12'
+};
+
+export const Spinner = ({ className, size = 'md' }: Props): JSX.Element => {
+  return (
+    <div role="status">
+      <svg
+        aria-hidden="true"
+        className={twMerge(
+          ' text-gray-200 animate-spin dark:text-gray-600 fill-primary m-1',
+          sizeChart[size],
+          className
+        )}
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+    </div>
+  );
+};
diff --git a/frontend/src/components/v2/Spinner/index.tsx b/frontend/src/components/v2/Spinner/index.tsx
new file mode 100644
index 000000000..1ce6cab2e
--- /dev/null
+++ b/frontend/src/components/v2/Spinner/index.tsx
@@ -0,0 +1 @@
+export { Spinner } from './Spinner';
diff --git a/frontend/src/components/v2/Switch/Switch.stories.tsx b/frontend/src/components/v2/Switch/Switch.stories.tsx
new file mode 100644
index 000000000..2f57c64fc
--- /dev/null
+++ b/frontend/src/components/v2/Switch/Switch.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Switch } from './Switch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Simple: Story = {
+  args: {
+    children: 'Dark mode'
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Dark mode',
+    isDisabled: true
+  }
+};
+
+export const Required: Story = {
+  args: {
+    children: 'Dark mode',
+    isRequired: true
+  }
+};
diff --git a/frontend/src/components/v2/Switch/Switch.tsx b/frontend/src/components/v2/Switch/Switch.tsx
new file mode 100644
index 000000000..70bbd29ca
--- /dev/null
+++ b/frontend/src/components/v2/Switch/Switch.tsx
@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { twMerge } from 'tailwind-merge';
+
+export type SwitchProps = Omit<SwitchPrimitive.SwitchProps, 'checked' | 'disabled' | 'required'> & {
+  children: ReactNode;
+  id: string;
+  isChecked?: boolean;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+};
+
+export const Switch = ({
+  children,
+  id,
+  className,
+  isChecked,
+  isDisabled,
+  isRequired,
+  ...props
+}: SwitchProps): JSX.Element => (
+  <div className="flex items-center text-bunker-300 font-inter">
+    <label className="text-sm" htmlFor={id}>
+      {children}
+      {isRequired && <span className="pl-1 text-red">*</span>}
+    </label>
+    <SwitchPrimitive.Root
+      {...props}
+      required={isRequired}
+      checked={isChecked}
+      disabled={isDisabled}
+      className={twMerge(
+        'h-5 ml-3 transition-all rounded-full w-9 bg-bunker-300 data-[state=checked]:bg-bunker-200',
+        isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
+        className
+      )}
+      id={id}
+    >
+      <SwitchPrimitive.Thumb className="w-4 h-4 border-none will-change-transform rounded-full shadow bg-black block transition-all translate-x-0.5 data-[state=checked]:translate-x-[18px]" />
+    </SwitchPrimitive.Root>
+  </div>
+);
diff --git a/frontend/src/components/v2/Switch/index.tsx b/frontend/src/components/v2/Switch/index.tsx
new file mode 100644
index 000000000..c912077dd
--- /dev/null
+++ b/frontend/src/components/v2/Switch/index.tsx
@@ -0,0 +1,2 @@
+export type { SwitchProps } from './Switch';
+export { Switch } from './Switch';
diff --git a/frontend/src/components/v2/Table/Table.stories.tsx b/frontend/src/components/v2/Table/Table.stories.tsx
new file mode 100644
index 000000000..666d43ed4
--- /dev/null
+++ b/frontend/src/components/v2/Table/Table.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Table, TableContainer, TBody, Td, Th, THead, Tr } from './Table';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <TableContainer>
+      <Table {...args}>
+        <THead>
+          <Tr>
+            <Th>Head#1</Th>
+            <Th>Head#2</Th>
+            <Th>Head#3</Th>
+          </Tr>
+        </THead>
+        <TBody>
+          <Tr>
+            <Td>Row#1</Td>
+            <Td>Row#2</Td>
+            <Td>Row#3</Td>
+          </Tr>
+          <Tr>
+            <Td>Row#1</Td>
+            <Td>Row#2</Td>
+            <Td>Row#3</Td>
+          </Tr>
+        </TBody>
+      </Table>
+    </TableContainer>
+  )
+};
diff --git a/frontend/src/components/v2/Table/Table.tsx b/frontend/src/components/v2/Table/Table.tsx
new file mode 100644
index 000000000..0c2b52eb8
--- /dev/null
+++ b/frontend/src/components/v2/Table/Table.tsx
@@ -0,0 +1,93 @@
+import { ReactNode } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export type TableContainerProps = {
+  children: ReactNode;
+  isRounded?: boolean;
+  className?: string;
+};
+
+export const TableContainer = ({
+  children,
+  className,
+  isRounded = true
+}: TableContainerProps): JSX.Element => (
+  <div
+    className={twMerge(
+      'overflow-x-auto font-inter shadow-md relative border border-solid border-mineshaft-700',
+      isRounded && 'rounded-md',
+      className
+    )}
+  >
+    {children}
+  </div>
+);
+
+// main parent table
+export type TableProps = {
+  className?: string;
+  children: ReactNode;
+};
+
+export const Table = ({ children, className }: TableProps): JSX.Element => (
+  <table
+    className={twMerge(
+      'bg-bunker-800 p-2 roun  text-gray-300 w-full text-sm text-left rounded-md',
+      className
+    )}
+  >
+    {children}
+  </table>
+);
+
+// table head
+export type THeadProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const THead = ({ children, className }: THeadProps): JSX.Element => (
+  <thead className={twMerge('text-xs bg-bunker text-bunker-300 uppercase', className)}>
+    {children}
+  </thead>
+);
+
+// table rows
+export type TrProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const Tr = ({ children, className }: TrProps): JSX.Element => (
+  <tr className={twMerge('border border-solid border-mineshaft-700', className)}>{children}</tr>
+);
+
+// table head columns
+export type ThProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const Th = ({ children, className }: ThProps): JSX.Element => (
+  <th className={twMerge('px-6 py-3 font-medium', className)}>{children}</th>
+);
+
+// table body
+export type TBodyProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const TBody = ({ children, className }: TBodyProps): JSX.Element => (
+  <tbody className={twMerge(className)}>{children}</tbody>
+);
+
+// table body columns
+export type TdProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export const Td = ({ children, className }: TdProps): JSX.Element => (
+  <td className={twMerge('text-left px-6 py-3', className)}>{children}</td>
+);
diff --git a/frontend/src/components/v2/Table/index.tsx b/frontend/src/components/v2/Table/index.tsx
new file mode 100644
index 000000000..ccf14665f
--- /dev/null
+++ b/frontend/src/components/v2/Table/index.tsx
@@ -0,0 +1,10 @@
+export type {
+  TableContainerProps,
+  TableProps,
+  TBodyProps,
+  TdProps,
+  THeadProps,
+  ThProps,
+  TrProps
+} from './Table';
+export { Table, TableContainer, TBody, Td, Th, THead, Tr } from './Table';
diff --git a/frontend/src/components/v2/TextArea/TextArea.stories.tsx b/frontend/src/components/v2/TextArea/TextArea.stories.tsx
new file mode 100644
index 000000000..9edff4789
--- /dev/null
+++ b/frontend/src/components/v2/TextArea/TextArea.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+  title: 'Components/TextArea',
+  component: TextArea,
+  tags: ['v2'],
+  argTypes: {
+    placeholder: {
+      defaultValue: 'Type anything',
+      type: 'string'
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Filled: Story = {
+  args: {}
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline'
+  }
+};
+
+export const Plain: Story = {
+  args: {
+    variant: 'plain'
+  }
+};
+
+export const Error: Story = {
+  args: {
+    isError: true
+  }
+};
+
+export const AutoWidth: Story = {
+  args: {
+    isFullWidth: false,
+    className: 'w-auto'
+  }
+};
diff --git a/frontend/src/components/v2/TextArea/TextArea.tsx b/frontend/src/components/v2/TextArea/TextArea.tsx
new file mode 100644
index 000000000..afd9078e9
--- /dev/null
+++ b/frontend/src/components/v2/TextArea/TextArea.tsx
@@ -0,0 +1,74 @@
+import { forwardRef, TextareaHTMLAttributes } from 'react';
+import { cva, VariantProps } from 'cva';
+import { twMerge } from 'tailwind-merge';
+
+type Props = {
+  placeholder?: string;
+  isFullWidth?: boolean;
+  isRequired?: boolean;
+  reSize?: 'none' | 'both' | 'vertical' | 'horizontal';
+};
+
+const textAreaVariants = cva(
+  'textarea w-full p-2 border border-solid text-gray-400 font-inter placeholder-gray-500 placeholder-opacity-50',
+  {
+    variants: {
+      size: {
+        xs: ['text-xs'],
+        sm: ['text-sm'],
+        md: ['text-md'],
+        lg: ['text-lg']
+      },
+      isRounded: {
+        true: ['rounded-md'],
+        false: ''
+      },
+      variant: {
+        filled: ['bg-bunker-800', 'text-gray-400'],
+        outline: ['bg-transparent'],
+        plain: 'bg-transparent outline-none'
+      },
+      isError: {
+        true: 'focus:ring-red/50 placeholder-red-300 border-red',
+        false: 'focus:ring-primary/50 border-mineshaft-400'
+      }
+    },
+    compoundVariants: [
+      {
+        variant: 'plain',
+        isError: [true, false],
+        className: 'border-none'
+      }
+    ]
+  }
+);
+
+export type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> &
+  VariantProps<typeof textAreaVariants> &
+  Props;
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      className,
+      isRounded = true,
+      isError = false,
+      isRequired,
+      variant = 'filled',
+      size = 'md',
+      reSize = 'both',
+      ...props
+    },
+    ref
+  ): JSX.Element => (
+    <textarea
+      {...props}
+      style={{ resize: reSize }}
+      required={isRequired}
+      ref={ref}
+      className={twMerge(textAreaVariants({ className, isError, size, isRounded, variant }))}
+    />
+  )
+);
+
+TextArea.displayName = 'TextArea';
diff --git a/frontend/src/components/v2/TextArea/index.tsx b/frontend/src/components/v2/TextArea/index.tsx
new file mode 100644
index 000000000..fd8e89534
--- /dev/null
+++ b/frontend/src/components/v2/TextArea/index.tsx
@@ -0,0 +1,2 @@
+export type { TextAreaProps } from './TextArea';
+export { TextArea } from './TextArea';
diff --git a/frontend/src/components/v2/index.tsx b/frontend/src/components/v2/index.tsx
new file mode 100644
index 000000000..437114047
--- /dev/null
+++ b/frontend/src/components/v2/index.tsx
@@ -0,0 +1,14 @@
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './Dropdown';
+export * from './FormControl';
+export * from './IconButton';
+export * from './Input';
+export * from './Menu';
+export * from './Modal';
+export * from './Select';
+export * from './Spinner';
+export * from './Switch';
+export * from './Table';
+export * from './TextArea';
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index b5c61c956..df32da8d0 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@import '@fontsource/inter/400.css';
+@import '@fontsource/inter/500.css';
+@import '@fontsource/inter/700.css';
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 0b9597a46..f2c832acc 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,12 +1,13 @@
-const colors = require("tailwindcss/colors");
+const colors = require('tailwindcss/colors');
 const round = (num) =>
   num
     .toFixed(7)
-    .replace(/(\.[0-9]+?)0+$/, "$1")
-    .replace(/\.0$/, "");
+    .replace(/(\.[0-9]+?)0+$/, '$1')
+    .replace(/\.0$/, '');
 const rem = (px) => `${round(px / 16)}rem`;
 const em = (px, base) => `${round(px / base)}em`;
 
+// TODO(akhilmhdh): Clean up this later
 let defaultModifiers = {
   sm: {
     css: [
@@ -15,71 +16,71 @@ let defaultModifiers = {
         lineHeight: round(24 / 14),
         p: {
           marginTop: em(16, 14),
-          marginBottom: em(16, 14),
+          marginBottom: em(16, 14)
         },
         '[class~="lead"]': {
           fontSize: em(18, 14),
           lineHeight: round(28 / 18),
           marginTop: em(16, 18),
-          marginBottom: em(16, 18),
+          marginBottom: em(16, 18)
         },
         blockquote: {
           marginTop: em(24, 18),
           marginBottom: em(24, 18),
-          paddingLeft: em(20, 18),
+          paddingLeft: em(20, 18)
         },
         h1: {
           fontSize: em(30, 14),
-          marginTop: "0",
+          marginTop: '0',
           marginBottom: em(24, 30),
-          lineHeight: round(36 / 30),
+          lineHeight: round(36 / 30)
         },
         h2: {
           fontSize: em(20, 14),
           marginTop: em(32, 20),
           marginBottom: em(16, 20),
-          lineHeight: round(28 / 20),
+          lineHeight: round(28 / 20)
         },
         h3: {
           fontSize: em(18, 14),
           marginTop: em(28, 18),
           marginBottom: em(8, 18),
-          lineHeight: round(28 / 18),
+          lineHeight: round(28 / 18)
         },
         h4: {
           marginTop: em(20, 14),
           marginBottom: em(8, 14),
-          lineHeight: round(20 / 14),
+          lineHeight: round(20 / 14)
         },
         img: {
           marginTop: em(24, 14),
-          marginBottom: em(24, 14),
+          marginBottom: em(24, 14)
         },
         video: {
           marginTop: em(24, 14),
-          marginBottom: em(24, 14),
+          marginBottom: em(24, 14)
         },
         figure: {
           marginTop: em(24, 14),
-          marginBottom: em(24, 14),
+          marginBottom: em(24, 14)
         },
-        "figure > *": {
-          marginTop: "0",
-          marginBottom: "0",
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0'
         },
         figcaption: {
           fontSize: em(12, 14),
           lineHeight: round(16 / 12),
-          marginTop: em(8, 12),
+          marginTop: em(8, 12)
         },
         code: {
-          fontSize: em(12, 14),
+          fontSize: em(12, 14)
         },
-        "h2 code": {
-          fontSize: em(18, 20),
+        'h2 code': {
+          fontSize: em(18, 20)
         },
-        "h3 code": {
-          fontSize: em(16, 18),
+        'h3 code': {
+          fontSize: em(16, 18)
         },
         pre: {
           fontSize: em(12, 14),
@@ -90,101 +91,101 @@ let defaultModifiers = {
           paddingTop: em(8, 12),
           paddingRight: em(12, 12),
           paddingBottom: em(8, 12),
-          paddingLeft: em(12, 12),
+          paddingLeft: em(12, 12)
         },
         ol: {
           marginTop: em(16, 14),
           marginBottom: em(16, 14),
-          paddingLeft: em(22, 14),
+          paddingLeft: em(22, 14)
         },
         ul: {
           marginTop: em(16, 14),
           marginBottom: em(16, 14),
-          paddingLeft: em(22, 14),
+          paddingLeft: em(22, 14)
         },
         li: {
           marginTop: em(4, 14),
-          marginBottom: em(4, 14),
+          marginBottom: em(4, 14)
         },
-        "ol > li": {
-          paddingLeft: em(6, 14),
+        'ol > li': {
+          paddingLeft: em(6, 14)
         },
-        "ul > li": {
-          paddingLeft: em(6, 14),
+        'ul > li': {
+          paddingLeft: em(6, 14)
         },
-        "> ul > li p": {
+        '> ul > li p': {
           marginTop: em(8, 14),
-          marginBottom: em(8, 14),
+          marginBottom: em(8, 14)
         },
-        "> ul > li > *:first-child": {
-          marginTop: em(16, 14),
+        '> ul > li > *:first-child': {
+          marginTop: em(16, 14)
         },
-        "> ul > li > *:last-child": {
-          marginBottom: em(16, 14),
+        '> ul > li > *:last-child': {
+          marginBottom: em(16, 14)
         },
-        "> ol > li > *:first-child": {
-          marginTop: em(16, 14),
+        '> ol > li > *:first-child': {
+          marginTop: em(16, 14)
         },
-        "> ol > li > *:last-child": {
-          marginBottom: em(16, 14),
+        '> ol > li > *:last-child': {
+          marginBottom: em(16, 14)
         },
-        "ul ul, ul ol, ol ul, ol ol": {
+        'ul ul, ul ol, ol ul, ol ol': {
           marginTop: em(8, 14),
-          marginBottom: em(8, 14),
+          marginBottom: em(8, 14)
         },
         hr: {
           marginTop: em(40, 14),
-          marginBottom: em(40, 14),
+          marginBottom: em(40, 14)
         },
-        "hr + *": {
-          marginTop: "0",
+        'hr + *': {
+          marginTop: '0'
         },
-        "h2 + *": {
-          marginTop: "0",
+        'h2 + *': {
+          marginTop: '0'
         },
-        "h3 + *": {
-          marginTop: "0",
+        'h3 + *': {
+          marginTop: '0'
         },
-        "h4 + *": {
-          marginTop: "0",
+        'h4 + *': {
+          marginTop: '0'
         },
         table: {
           fontSize: em(12, 14),
-          lineHeight: round(18 / 12),
+          lineHeight: round(18 / 12)
         },
-        "thead th": {
+        'thead th': {
           paddingRight: em(12, 12),
           paddingBottom: em(8, 12),
-          paddingLeft: em(12, 12),
+          paddingLeft: em(12, 12)
         },
-        "thead th:first-child": {
-          paddingLeft: "0",
+        'thead th:first-child': {
+          paddingLeft: '0'
         },
-        "thead th:last-child": {
-          paddingRight: "0",
+        'thead th:last-child': {
+          paddingRight: '0'
         },
-        "tbody td, tfoot td": {
+        'tbody td, tfoot td': {
           paddingTop: em(8, 12),
           paddingRight: em(12, 12),
           paddingBottom: em(8, 12),
-          paddingLeft: em(12, 12),
+          paddingLeft: em(12, 12)
         },
-        "tbody td:first-child, tfoot td:first-child": {
-          paddingLeft: "0",
-        },
-        "tbody td:last-child, tfoot td:last-child": {
-          paddingRight: "0",
+        'tbody td:first-child, tfoot td:first-child': {
+          paddingLeft: '0'
         },
+        'tbody td:last-child, tfoot td:last-child': {
+          paddingRight: '0'
+        }
       },
       {
-        "> :first-child": {
-          marginTop: "0",
+        '> :first-child': {
+          marginTop: '0'
         },
-        "> :last-child": {
-          marginBottom: "0",
-        },
-      },
-    ],
+        '> :last-child': {
+          marginBottom: '0'
+        }
+      }
+    ]
   },
   base: {
     css: [
@@ -193,71 +194,71 @@ let defaultModifiers = {
         lineHeight: round(28 / 16),
         p: {
           marginTop: em(20, 16),
-          marginBottom: em(20, 16),
+          marginBottom: em(20, 16)
         },
         '[class~="lead"]': {
           fontSize: em(20, 16),
           lineHeight: round(32 / 20),
           marginTop: em(24, 20),
-          marginBottom: em(24, 20),
+          marginBottom: em(24, 20)
         },
         blockquote: {
           marginTop: em(32, 20),
           marginBottom: em(32, 20),
-          paddingLeft: em(20, 20),
+          paddingLeft: em(20, 20)
         },
         h1: {
           fontSize: em(36, 16),
-          marginTop: "0",
+          marginTop: '0',
           marginBottom: em(32, 36),
-          lineHeight: round(40 / 36),
+          lineHeight: round(40 / 36)
         },
         h2: {
           fontSize: em(24, 16),
           marginTop: em(48, 24),
           marginBottom: em(24, 24),
-          lineHeight: round(32 / 24),
+          lineHeight: round(32 / 24)
         },
         h3: {
           fontSize: em(20, 16),
           marginTop: em(32, 20),
           marginBottom: em(12, 20),
-          lineHeight: round(32 / 20),
+          lineHeight: round(32 / 20)
         },
         h4: {
           marginTop: em(24, 16),
           marginBottom: em(8, 16),
-          lineHeight: round(24 / 16),
+          lineHeight: round(24 / 16)
         },
         img: {
           marginTop: em(32, 16),
-          marginBottom: em(32, 16),
+          marginBottom: em(32, 16)
         },
         video: {
           marginTop: em(32, 16),
-          marginBottom: em(32, 16),
+          marginBottom: em(32, 16)
         },
         figure: {
           marginTop: em(32, 16),
-          marginBottom: em(32, 16),
+          marginBottom: em(32, 16)
         },
-        "figure > *": {
-          marginTop: "0",
-          marginBottom: "0",
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0'
         },
         figcaption: {
           fontSize: em(14, 16),
           lineHeight: round(20 / 14),
-          marginTop: em(12, 14),
+          marginTop: em(12, 14)
         },
         code: {
-          fontSize: em(14, 16),
+          fontSize: em(14, 16)
         },
-        "h2 code": {
-          fontSize: em(21, 24),
+        'h2 code': {
+          fontSize: em(21, 24)
         },
-        "h3 code": {
-          fontSize: em(18, 20),
+        'h3 code': {
+          fontSize: em(18, 20)
         },
         pre: {
           fontSize: em(14, 16),
@@ -268,101 +269,101 @@ let defaultModifiers = {
           paddingTop: em(12, 14),
           paddingRight: em(16, 14),
           paddingBottom: em(12, 14),
-          paddingLeft: em(16, 14),
+          paddingLeft: em(16, 14)
         },
         ol: {
           marginTop: em(20, 16),
           marginBottom: em(20, 16),
-          paddingLeft: em(26, 16),
+          paddingLeft: em(26, 16)
         },
         ul: {
           marginTop: em(20, 16),
           marginBottom: em(20, 16),
-          paddingLeft: em(26, 16),
+          paddingLeft: em(26, 16)
         },
         li: {
           marginTop: em(8, 16),
-          marginBottom: em(8, 16),
+          marginBottom: em(8, 16)
         },
-        "ol > li": {
-          paddingLeft: em(6, 16),
+        'ol > li': {
+          paddingLeft: em(6, 16)
         },
-        "ul > li": {
-          paddingLeft: em(6, 16),
+        'ul > li': {
+          paddingLeft: em(6, 16)
         },
-        "> ul > li p": {
+        '> ul > li p': {
           marginTop: em(12, 16),
-          marginBottom: em(12, 16),
+          marginBottom: em(12, 16)
         },
-        "> ul > li > *:first-child": {
-          marginTop: em(20, 16),
+        '> ul > li > *:first-child': {
+          marginTop: em(20, 16)
         },
-        "> ul > li > *:last-child": {
-          marginBottom: em(20, 16),
+        '> ul > li > *:last-child': {
+          marginBottom: em(20, 16)
         },
-        "> ol > li > *:first-child": {
-          marginTop: em(20, 16),
+        '> ol > li > *:first-child': {
+          marginTop: em(20, 16)
         },
-        "> ol > li > *:last-child": {
-          marginBottom: em(20, 16),
+        '> ol > li > *:last-child': {
+          marginBottom: em(20, 16)
         },
-        "ul ul, ul ol, ol ul, ol ol": {
+        'ul ul, ul ol, ol ul, ol ol': {
           marginTop: em(12, 16),
-          marginBottom: em(12, 16),
+          marginBottom: em(12, 16)
         },
         hr: {
           marginTop: em(48, 16),
-          marginBottom: em(48, 16),
+          marginBottom: em(48, 16)
         },
-        "hr + *": {
-          marginTop: "0",
+        'hr + *': {
+          marginTop: '0'
         },
-        "h2 + *": {
-          marginTop: "0",
+        'h2 + *': {
+          marginTop: '0'
         },
-        "h3 + *": {
-          marginTop: "0",
+        'h3 + *': {
+          marginTop: '0'
         },
-        "h4 + *": {
-          marginTop: "0",
+        'h4 + *': {
+          marginTop: '0'
         },
         table: {
           fontSize: em(14, 16),
-          lineHeight: round(24 / 14),
+          lineHeight: round(24 / 14)
         },
-        "thead th": {
+        'thead th': {
           paddingRight: em(8, 14),
           paddingBottom: em(8, 14),
-          paddingLeft: em(8, 14),
+          paddingLeft: em(8, 14)
         },
-        "thead th:first-child": {
-          paddingLeft: "0",
+        'thead th:first-child': {
+          paddingLeft: '0'
         },
-        "thead th:last-child": {
-          paddingRight: "0",
+        'thead th:last-child': {
+          paddingRight: '0'
         },
-        "tbody td, tfoot td": {
+        'tbody td, tfoot td': {
           paddingTop: em(8, 14),
           paddingRight: em(8, 14),
           paddingBottom: em(8, 14),
-          paddingLeft: em(8, 14),
+          paddingLeft: em(8, 14)
         },
-        "tbody td:first-child, tfoot td:first-child": {
-          paddingLeft: "0",
-        },
-        "tbody td:last-child, tfoot td:last-child": {
-          paddingRight: "0",
+        'tbody td:first-child, tfoot td:first-child': {
+          paddingLeft: '0'
         },
+        'tbody td:last-child, tfoot td:last-child': {
+          paddingRight: '0'
+        }
       },
       {
-        "> :first-child": {
-          marginTop: "0",
+        '> :first-child': {
+          marginTop: '0'
         },
-        "> :last-child": {
-          marginBottom: "0",
-        },
-      },
-    ],
+        '> :last-child': {
+          marginBottom: '0'
+        }
+      }
+    ]
   },
   lg: {
     css: [
@@ -371,71 +372,71 @@ let defaultModifiers = {
         lineHeight: round(32 / 18),
         p: {
           marginTop: em(24, 18),
-          marginBottom: em(24, 18),
+          marginBottom: em(24, 18)
         },
         '[class~="lead"]': {
           fontSize: em(22, 18),
           lineHeight: round(32 / 22),
           marginTop: em(24, 22),
-          marginBottom: em(24, 22),
+          marginBottom: em(24, 22)
         },
         blockquote: {
           marginTop: em(40, 24),
           marginBottom: em(40, 24),
-          paddingLeft: em(24, 24),
+          paddingLeft: em(24, 24)
         },
         h1: {
           fontSize: em(48, 18),
-          marginTop: "0",
+          marginTop: '0',
           marginBottom: em(40, 48),
-          lineHeight: round(48 / 48),
+          lineHeight: round(48 / 48)
         },
         h2: {
           fontSize: em(30, 18),
           marginTop: em(56, 30),
           marginBottom: em(32, 30),
-          lineHeight: round(40 / 30),
+          lineHeight: round(40 / 30)
         },
         h3: {
           fontSize: em(24, 18),
           marginTop: em(40, 24),
           marginBottom: em(16, 24),
-          lineHeight: round(36 / 24),
+          lineHeight: round(36 / 24)
         },
         h4: {
           marginTop: em(32, 18),
           marginBottom: em(8, 18),
-          lineHeight: round(28 / 18),
+          lineHeight: round(28 / 18)
         },
         img: {
           marginTop: em(32, 18),
-          marginBottom: em(32, 18),
+          marginBottom: em(32, 18)
         },
         video: {
           marginTop: em(32, 18),
-          marginBottom: em(32, 18),
+          marginBottom: em(32, 18)
         },
         figure: {
           marginTop: em(32, 18),
-          marginBottom: em(32, 18),
+          marginBottom: em(32, 18)
         },
-        "figure > *": {
-          marginTop: "0",
-          marginBottom: "0",
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0'
         },
         figcaption: {
           fontSize: em(16, 18),
           lineHeight: round(24 / 16),
-          marginTop: em(16, 16),
+          marginTop: em(16, 16)
         },
         code: {
-          fontSize: em(16, 18),
+          fontSize: em(16, 18)
         },
-        "h2 code": {
-          fontSize: em(26, 30),
+        'h2 code': {
+          fontSize: em(26, 30)
         },
-        "h3 code": {
-          fontSize: em(21, 24),
+        'h3 code': {
+          fontSize: em(21, 24)
         },
         pre: {
           fontSize: em(16, 18),
@@ -446,101 +447,101 @@ let defaultModifiers = {
           paddingTop: em(16, 16),
           paddingRight: em(24, 16),
           paddingBottom: em(16, 16),
-          paddingLeft: em(24, 16),
+          paddingLeft: em(24, 16)
         },
         ol: {
           marginTop: em(24, 18),
           marginBottom: em(24, 18),
-          paddingLeft: em(28, 18),
+          paddingLeft: em(28, 18)
         },
         ul: {
           marginTop: em(24, 18),
           marginBottom: em(24, 18),
-          paddingLeft: em(28, 18),
+          paddingLeft: em(28, 18)
         },
         li: {
           marginTop: em(12, 18),
-          marginBottom: em(12, 18),
+          marginBottom: em(12, 18)
         },
-        "ol > li": {
-          paddingLeft: em(8, 18),
+        'ol > li': {
+          paddingLeft: em(8, 18)
         },
-        "ul > li": {
-          paddingLeft: em(8, 18),
+        'ul > li': {
+          paddingLeft: em(8, 18)
         },
-        "> ul > li p": {
+        '> ul > li p': {
           marginTop: em(16, 18),
-          marginBottom: em(16, 18),
+          marginBottom: em(16, 18)
         },
-        "> ul > li > *:first-child": {
-          marginTop: em(24, 18),
+        '> ul > li > *:first-child': {
+          marginTop: em(24, 18)
         },
-        "> ul > li > *:last-child": {
-          marginBottom: em(24, 18),
+        '> ul > li > *:last-child': {
+          marginBottom: em(24, 18)
         },
-        "> ol > li > *:first-child": {
-          marginTop: em(24, 18),
+        '> ol > li > *:first-child': {
+          marginTop: em(24, 18)
         },
-        "> ol > li > *:last-child": {
-          marginBottom: em(24, 18),
+        '> ol > li > *:last-child': {
+          marginBottom: em(24, 18)
         },
-        "ul ul, ul ol, ol ul, ol ol": {
+        'ul ul, ul ol, ol ul, ol ol': {
           marginTop: em(16, 18),
-          marginBottom: em(16, 18),
+          marginBottom: em(16, 18)
         },
         hr: {
           marginTop: em(56, 18),
-          marginBottom: em(56, 18),
+          marginBottom: em(56, 18)
         },
-        "hr + *": {
-          marginTop: "0",
+        'hr + *': {
+          marginTop: '0'
         },
-        "h2 + *": {
-          marginTop: "0",
+        'h2 + *': {
+          marginTop: '0'
         },
-        "h3 + *": {
-          marginTop: "0",
+        'h3 + *': {
+          marginTop: '0'
         },
-        "h4 + *": {
-          marginTop: "0",
+        'h4 + *': {
+          marginTop: '0'
         },
         table: {
           fontSize: em(16, 18),
-          lineHeight: round(24 / 16),
+          lineHeight: round(24 / 16)
         },
-        "thead th": {
+        'thead th': {
           paddingRight: em(12, 16),
           paddingBottom: em(12, 16),
-          paddingLeft: em(12, 16),
+          paddingLeft: em(12, 16)
         },
-        "thead th:first-child": {
-          paddingLeft: "0",
+        'thead th:first-child': {
+          paddingLeft: '0'
         },
-        "thead th:last-child": {
-          paddingRight: "0",
+        'thead th:last-child': {
+          paddingRight: '0'
         },
-        "tbody td, tfoot td": {
+        'tbody td, tfoot td': {
           paddingTop: em(12, 16),
           paddingRight: em(12, 16),
           paddingBottom: em(12, 16),
-          paddingLeft: em(12, 16),
+          paddingLeft: em(12, 16)
         },
-        "tbody td:first-child, tfoot td:first-child": {
-          paddingLeft: "0",
-        },
-        "tbody td:last-child, tfoot td:last-child": {
-          paddingRight: "0",
+        'tbody td:first-child, tfoot td:first-child': {
+          paddingLeft: '0'
         },
+        'tbody td:last-child, tfoot td:last-child': {
+          paddingRight: '0'
+        }
       },
       {
-        "> :first-child": {
-          marginTop: "0",
+        '> :first-child': {
+          marginTop: '0'
         },
-        "> :last-child": {
-          marginBottom: "0",
-        },
-      },
-    ],
+        '> :last-child': {
+          marginBottom: '0'
+        }
+      }
+    ]
   },
   xl: {
     css: [
@@ -549,71 +550,71 @@ let defaultModifiers = {
         lineHeight: round(36 / 20),
         p: {
           marginTop: em(24, 20),
-          marginBottom: em(24, 20),
+          marginBottom: em(24, 20)
         },
         '[class~="lead"]': {
           fontSize: em(24, 20),
           lineHeight: round(36 / 24),
           marginTop: em(24, 24),
-          marginBottom: em(24, 24),
+          marginBottom: em(24, 24)
         },
         blockquote: {
           marginTop: em(48, 30),
           marginBottom: em(48, 30),
-          paddingLeft: em(32, 30),
+          paddingLeft: em(32, 30)
         },
         h1: {
           fontSize: em(56, 20),
-          marginTop: "0",
+          marginTop: '0',
           marginBottom: em(48, 56),
-          lineHeight: round(56 / 56),
+          lineHeight: round(56 / 56)
         },
         h2: {
           fontSize: em(36, 20),
           marginTop: em(56, 36),
           marginBottom: em(32, 36),
-          lineHeight: round(40 / 36),
+          lineHeight: round(40 / 36)
         },
         h3: {
           fontSize: em(30, 20),
           marginTop: em(48, 30),
           marginBottom: em(20, 30),
-          lineHeight: round(40 / 30),
+          lineHeight: round(40 / 30)
         },
         h4: {
           marginTop: em(36, 20),
           marginBottom: em(12, 20),
-          lineHeight: round(32 / 20),
+          lineHeight: round(32 / 20)
         },
         img: {
           marginTop: em(40, 20),
-          marginBottom: em(40, 20),
+          marginBottom: em(40, 20)
         },
         video: {
           marginTop: em(40, 20),
-          marginBottom: em(40, 20),
+          marginBottom: em(40, 20)
         },
         figure: {
           marginTop: em(40, 20),
-          marginBottom: em(40, 20),
+          marginBottom: em(40, 20)
         },
-        "figure > *": {
-          marginTop: "0",
-          marginBottom: "0",
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0'
         },
         figcaption: {
           fontSize: em(18, 20),
           lineHeight: round(28 / 18),
-          marginTop: em(18, 18),
+          marginTop: em(18, 18)
         },
         code: {
-          fontSize: em(18, 20),
+          fontSize: em(18, 20)
         },
-        "h2 code": {
-          fontSize: em(31, 36),
+        'h2 code': {
+          fontSize: em(31, 36)
         },
-        "h3 code": {
-          fontSize: em(27, 30),
+        'h3 code': {
+          fontSize: em(27, 30)
         },
         pre: {
           fontSize: em(18, 20),
@@ -624,174 +625,174 @@ let defaultModifiers = {
           paddingTop: em(20, 18),
           paddingRight: em(24, 18),
           paddingBottom: em(20, 18),
-          paddingLeft: em(24, 18),
+          paddingLeft: em(24, 18)
         },
         ol: {
           marginTop: em(24, 20),
           marginBottom: em(24, 20),
-          paddingLeft: em(32, 20),
+          paddingLeft: em(32, 20)
         },
         ul: {
           marginTop: em(24, 20),
           marginBottom: em(24, 20),
-          paddingLeft: em(32, 20),
+          paddingLeft: em(32, 20)
         },
         li: {
           marginTop: em(12, 20),
-          marginBottom: em(12, 20),
+          marginBottom: em(12, 20)
         },
-        "ol > li": {
-          paddingLeft: em(8, 20),
+        'ol > li': {
+          paddingLeft: em(8, 20)
         },
-        "ul > li": {
-          paddingLeft: em(8, 20),
+        'ul > li': {
+          paddingLeft: em(8, 20)
         },
-        "> ul > li p": {
+        '> ul > li p': {
           marginTop: em(16, 20),
-          marginBottom: em(16, 20),
+          marginBottom: em(16, 20)
         },
-        "> ul > li > *:first-child": {
-          marginTop: em(24, 20),
+        '> ul > li > *:first-child': {
+          marginTop: em(24, 20)
         },
-        "> ul > li > *:last-child": {
-          marginBottom: em(24, 20),
+        '> ul > li > *:last-child': {
+          marginBottom: em(24, 20)
         },
-        "> ol > li > *:first-child": {
-          marginTop: em(24, 20),
+        '> ol > li > *:first-child': {
+          marginTop: em(24, 20)
         },
-        "> ol > li > *:last-child": {
-          marginBottom: em(24, 20),
+        '> ol > li > *:last-child': {
+          marginBottom: em(24, 20)
         },
-        "ul ul, ul ol, ol ul, ol ol": {
+        'ul ul, ul ol, ol ul, ol ol': {
           marginTop: em(16, 20),
-          marginBottom: em(16, 20),
+          marginBottom: em(16, 20)
         },
         hr: {
           marginTop: em(56, 20),
-          marginBottom: em(56, 20),
+          marginBottom: em(56, 20)
         },
-        "hr + *": {
-          marginTop: "0",
+        'hr + *': {
+          marginTop: '0'
         },
-        "h2 + *": {
-          marginTop: "0",
+        'h2 + *': {
+          marginTop: '0'
         },
-        "h3 + *": {
-          marginTop: "0",
+        'h3 + *': {
+          marginTop: '0'
         },
-        "h4 + *": {
-          marginTop: "0",
+        'h4 + *': {
+          marginTop: '0'
         },
         table: {
           fontSize: em(18, 20),
-          lineHeight: round(28 / 18),
+          lineHeight: round(28 / 18)
         },
-        "thead th": {
+        'thead th': {
           paddingRight: em(12, 18),
           paddingBottom: em(16, 18),
-          paddingLeft: em(12, 18),
+          paddingLeft: em(12, 18)
         },
-        "thead th:first-child": {
-          paddingLeft: "0",
+        'thead th:first-child': {
+          paddingLeft: '0'
         },
-        "thead th:last-child": {
-          paddingRight: "0",
+        'thead th:last-child': {
+          paddingRight: '0'
         },
-        "tbody td, tfoot td": {
+        'tbody td, tfoot td': {
           paddingTop: em(16, 18),
           paddingRight: em(12, 18),
           paddingBottom: em(16, 18),
-          paddingLeft: em(12, 18),
+          paddingLeft: em(12, 18)
         },
-        "tbody td:first-child, tfoot td:first-child": {
-          paddingLeft: "0",
-        },
-        "tbody td:last-child, tfoot td:last-child": {
-          paddingRight: "0",
+        'tbody td:first-child, tfoot td:first-child': {
+          paddingLeft: '0'
         },
+        'tbody td:last-child, tfoot td:last-child': {
+          paddingRight: '0'
+        }
       },
       {
-        "> :first-child": {
-          marginTop: "0",
+        '> :first-child': {
+          marginTop: '0'
         },
-        "> :last-child": {
-          marginBottom: "0",
-        },
-      },
-    ],
+        '> :last-child': {
+          marginBottom: '0'
+        }
+      }
+    ]
   },
-  "2xl": {
+  '2xl': {
     css: [
       {
         fontSize: rem(24),
         lineHeight: round(40 / 24),
         p: {
           marginTop: em(32, 24),
-          marginBottom: em(32, 24),
+          marginBottom: em(32, 24)
         },
         '[class~="lead"]': {
           fontSize: em(30, 24),
           lineHeight: round(44 / 30),
           marginTop: em(32, 30),
-          marginBottom: em(32, 30),
+          marginBottom: em(32, 30)
         },
         blockquote: {
           marginTop: em(64, 36),
           marginBottom: em(64, 36),
-          paddingLeft: em(40, 36),
+          paddingLeft: em(40, 36)
         },
         h1: {
           fontSize: em(64, 24),
-          marginTop: "0",
+          marginTop: '0',
           marginBottom: em(56, 64),
-          lineHeight: round(64 / 64),
+          lineHeight: round(64 / 64)
         },
         h2: {
           fontSize: em(48, 24),
           marginTop: em(72, 48),
           marginBottom: em(40, 48),
-          lineHeight: round(52 / 48),
+          lineHeight: round(52 / 48)
         },
         h3: {
           fontSize: em(36, 24),
           marginTop: em(56, 36),
           marginBottom: em(24, 36),
-          lineHeight: round(44 / 36),
+          lineHeight: round(44 / 36)
         },
         h4: {
           marginTop: em(40, 24),
           marginBottom: em(16, 24),
-          lineHeight: round(36 / 24),
+          lineHeight: round(36 / 24)
         },
         img: {
           marginTop: em(48, 24),
-          marginBottom: em(48, 24),
+          marginBottom: em(48, 24)
         },
         video: {
           marginTop: em(48, 24),
-          marginBottom: em(48, 24),
+          marginBottom: em(48, 24)
         },
         figure: {
           marginTop: em(48, 24),
-          marginBottom: em(48, 24),
+          marginBottom: em(48, 24)
         },
-        "figure > *": {
-          marginTop: "0",
-          marginBottom: "0",
+        'figure > *': {
+          marginTop: '0',
+          marginBottom: '0'
         },
         figcaption: {
           fontSize: em(20, 24),
           lineHeight: round(32 / 20),
-          marginTop: em(20, 20),
+          marginTop: em(20, 20)
         },
         code: {
-          fontSize: em(20, 24),
+          fontSize: em(20, 24)
         },
-        "h2 code": {
-          fontSize: em(42, 48),
+        'h2 code': {
+          fontSize: em(42, 48)
         },
-        "h3 code": {
-          fontSize: em(32, 36),
+        'h3 code': {
+          fontSize: em(32, 36)
         },
         pre: {
           fontSize: em(20, 24),
@@ -802,883 +803,947 @@ let defaultModifiers = {
           paddingTop: em(24, 20),
           paddingRight: em(32, 20),
           paddingBottom: em(24, 20),
-          paddingLeft: em(32, 20),
+          paddingLeft: em(32, 20)
         },
         ol: {
           marginTop: em(32, 24),
           marginBottom: em(32, 24),
-          paddingLeft: em(38, 24),
+          paddingLeft: em(38, 24)
         },
         ul: {
           marginTop: em(32, 24),
           marginBottom: em(32, 24),
-          paddingLeft: em(38, 24),
+          paddingLeft: em(38, 24)
         },
         li: {
           marginTop: em(12, 24),
-          marginBottom: em(12, 24),
+          marginBottom: em(12, 24)
         },
-        "ol > li": {
-          paddingLeft: em(10, 24),
+        'ol > li': {
+          paddingLeft: em(10, 24)
         },
-        "ul > li": {
-          paddingLeft: em(10, 24),
+        'ul > li': {
+          paddingLeft: em(10, 24)
         },
-        "> ul > li p": {
+        '> ul > li p': {
           marginTop: em(20, 24),
-          marginBottom: em(20, 24),
+          marginBottom: em(20, 24)
         },
-        "> ul > li > *:first-child": {
-          marginTop: em(32, 24),
+        '> ul > li > *:first-child': {
+          marginTop: em(32, 24)
         },
-        "> ul > li > *:last-child": {
-          marginBottom: em(32, 24),
+        '> ul > li > *:last-child': {
+          marginBottom: em(32, 24)
         },
-        "> ol > li > *:first-child": {
-          marginTop: em(32, 24),
+        '> ol > li > *:first-child': {
+          marginTop: em(32, 24)
         },
-        "> ol > li > *:last-child": {
-          marginBottom: em(32, 24),
+        '> ol > li > *:last-child': {
+          marginBottom: em(32, 24)
         },
-        "ul ul, ul ol, ol ul, ol ol": {
+        'ul ul, ul ol, ol ul, ol ol': {
           marginTop: em(16, 24),
-          marginBottom: em(16, 24),
+          marginBottom: em(16, 24)
         },
         hr: {
           marginTop: em(72, 24),
-          marginBottom: em(72, 24),
+          marginBottom: em(72, 24)
         },
-        "hr + *": {
-          marginTop: "0",
+        'hr + *': {
+          marginTop: '0'
         },
-        "h2 + *": {
-          marginTop: "0",
+        'h2 + *': {
+          marginTop: '0'
         },
-        "h3 + *": {
-          marginTop: "0",
+        'h3 + *': {
+          marginTop: '0'
         },
-        "h4 + *": {
-          marginTop: "0",
+        'h4 + *': {
+          marginTop: '0'
         },
         table: {
           fontSize: em(20, 24),
-          lineHeight: round(28 / 20),
+          lineHeight: round(28 / 20)
         },
-        "thead th": {
+        'thead th': {
           paddingRight: em(12, 20),
           paddingBottom: em(16, 20),
-          paddingLeft: em(12, 20),
+          paddingLeft: em(12, 20)
         },
-        "thead th:first-child": {
-          paddingLeft: "0",
+        'thead th:first-child': {
+          paddingLeft: '0'
         },
-        "thead th:last-child": {
-          paddingRight: "0",
+        'thead th:last-child': {
+          paddingRight: '0'
         },
-        "tbody td, tfoot td": {
+        'tbody td, tfoot td': {
           paddingTop: em(16, 20),
           paddingRight: em(12, 20),
           paddingBottom: em(16, 20),
-          paddingLeft: em(12, 20),
+          paddingLeft: em(12, 20)
         },
-        "tbody td:first-child, tfoot td:first-child": {
-          paddingLeft: "0",
-        },
-        "tbody td:last-child, tfoot td:last-child": {
-          paddingRight: "0",
+        'tbody td:first-child, tfoot td:first-child': {
+          paddingLeft: '0'
         },
+        'tbody td:last-child, tfoot td:last-child': {
+          paddingRight: '0'
+        }
       },
       {
-        "> :first-child": {
-          marginTop: "0",
+        '> :first-child': {
+          marginTop: '0'
         },
-        "> :last-child": {
-          marginBottom: "0",
-        },
-      },
-    ],
+        '> :last-child': {
+          marginBottom: '0'
+        }
+      }
+    ]
   },
 
   // Invert (for dark mode)
   invert: {
     css: {
-      "--tw-prose-body": "var(--tw-prose-invert-body)",
-      "--tw-prose-headings": "var(--tw-prose-invert-headings)",
-      "--tw-prose-lead": "var(--tw-prose-invert-lead)",
-      "--tw-prose-links": "var(--tw-prose-invert-links)",
-      "--tw-prose-bold": "var(--tw-prose-invert-bold)",
-      "--tw-prose-counters": "var(--tw-prose-invert-counters)",
-      "--tw-prose-bullets": "var(--tw-prose-invert-bullets)",
-      "--tw-prose-hr": "var(--tw-prose-invert-hr)",
-      "--tw-prose-quotes": "var(--tw-prose-invert-quotes)",
-      "--tw-prose-quote-borders": "var(--tw-prose-invert-quote-borders)",
-      "--tw-prose-captions": "var(--tw-prose-invert-captions)",
-      "--tw-prose-code": "var(--tw-prose-invert-code)",
-      "--tw-prose-pre-code": "var(--tw-prose-invert-pre-code)",
-      "--tw-prose-pre-bg": "var(--tw-prose-invert-pre-bg)",
-      "--tw-prose-th-borders": "var(--tw-prose-invert-th-borders)",
-      "--tw-prose-td-borders": "var(--tw-prose-invert-td-borders)",
-    },
+      '--tw-prose-body': 'var(--tw-prose-invert-body)',
+      '--tw-prose-headings': 'var(--tw-prose-invert-headings)',
+      '--tw-prose-lead': 'var(--tw-prose-invert-lead)',
+      '--tw-prose-links': 'var(--tw-prose-invert-links)',
+      '--tw-prose-bold': 'var(--tw-prose-invert-bold)',
+      '--tw-prose-counters': 'var(--tw-prose-invert-counters)',
+      '--tw-prose-bullets': 'var(--tw-prose-invert-bullets)',
+      '--tw-prose-hr': 'var(--tw-prose-invert-hr)',
+      '--tw-prose-quotes': 'var(--tw-prose-invert-quotes)',
+      '--tw-prose-quote-borders': 'var(--tw-prose-invert-quote-borders)',
+      '--tw-prose-captions': 'var(--tw-prose-invert-captions)',
+      '--tw-prose-code': 'var(--tw-prose-invert-code)',
+      '--tw-prose-pre-code': 'var(--tw-prose-invert-pre-code)',
+      '--tw-prose-pre-bg': 'var(--tw-prose-invert-pre-bg)',
+      '--tw-prose-th-borders': 'var(--tw-prose-invert-th-borders)',
+      '--tw-prose-td-borders': 'var(--tw-prose-invert-td-borders)'
+    }
   },
 
   // Gray color themes
 
   slate: {
     css: {
-      "--tw-prose-body": colors.slate[700],
-      "--tw-prose-headings": colors.slate[900],
-      "--tw-prose-lead": colors.slate[600],
-      "--tw-prose-links": colors.slate[900],
-      "--tw-prose-bold": colors.slate[900],
-      "--tw-prose-counters": colors.slate[500],
-      "--tw-prose-bullets": colors.slate[300],
-      "--tw-prose-hr": colors.slate[200],
-      "--tw-prose-quotes": colors.slate[900],
-      "--tw-prose-quote-borders": colors.slate[200],
-      "--tw-prose-captions": colors.slate[500],
-      "--tw-prose-code": colors.slate[900],
-      "--tw-prose-pre-code": colors.slate[200],
-      "--tw-prose-pre-bg": colors.slate[800],
-      "--tw-prose-th-borders": colors.slate[300],
-      "--tw-prose-td-borders": colors.slate[200],
-      "--tw-prose-invert-body": colors.slate[300],
-      "--tw-prose-invert-headings": colors.white,
-      "--tw-prose-invert-lead": colors.slate[400],
-      "--tw-prose-invert-links": colors.white,
-      "--tw-prose-invert-bold": colors.white,
-      "--tw-prose-invert-counters": colors.slate[400],
-      "--tw-prose-invert-bullets": colors.slate[600],
-      "--tw-prose-invert-hr": colors.slate[700],
-      "--tw-prose-invert-quotes": colors.slate[100],
-      "--tw-prose-invert-quote-borders": colors.slate[700],
-      "--tw-prose-invert-captions": colors.slate[400],
-      "--tw-prose-invert-code": colors.white,
-      "--tw-prose-invert-pre-code": colors.slate[300],
-      "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
-      "--tw-prose-invert-th-borders": colors.slate[600],
-      "--tw-prose-invert-td-borders": colors.slate[700],
-    },
+      '--tw-prose-body': colors.slate[700],
+      '--tw-prose-headings': colors.slate[900],
+      '--tw-prose-lead': colors.slate[600],
+      '--tw-prose-links': colors.slate[900],
+      '--tw-prose-bold': colors.slate[900],
+      '--tw-prose-counters': colors.slate[500],
+      '--tw-prose-bullets': colors.slate[300],
+      '--tw-prose-hr': colors.slate[200],
+      '--tw-prose-quotes': colors.slate[900],
+      '--tw-prose-quote-borders': colors.slate[200],
+      '--tw-prose-captions': colors.slate[500],
+      '--tw-prose-code': colors.slate[900],
+      '--tw-prose-pre-code': colors.slate[200],
+      '--tw-prose-pre-bg': colors.slate[800],
+      '--tw-prose-th-borders': colors.slate[300],
+      '--tw-prose-td-borders': colors.slate[200],
+      '--tw-prose-invert-body': colors.slate[300],
+      '--tw-prose-invert-headings': colors.white,
+      '--tw-prose-invert-lead': colors.slate[400],
+      '--tw-prose-invert-links': colors.white,
+      '--tw-prose-invert-bold': colors.white,
+      '--tw-prose-invert-counters': colors.slate[400],
+      '--tw-prose-invert-bullets': colors.slate[600],
+      '--tw-prose-invert-hr': colors.slate[700],
+      '--tw-prose-invert-quotes': colors.slate[100],
+      '--tw-prose-invert-quote-borders': colors.slate[700],
+      '--tw-prose-invert-captions': colors.slate[400],
+      '--tw-prose-invert-code': colors.white,
+      '--tw-prose-invert-pre-code': colors.slate[300],
+      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+      '--tw-prose-invert-th-borders': colors.slate[600],
+      '--tw-prose-invert-td-borders': colors.slate[700]
+    }
   },
 
   gray: {
     css: {
-      "--tw-prose-body": colors.gray[700],
-      "--tw-prose-headings": colors.gray[900],
-      "--tw-prose-lead": colors.gray[600],
-      "--tw-prose-links": colors.gray[900],
-      "--tw-prose-bold": colors.gray[900],
-      "--tw-prose-counters": colors.gray[500],
-      "--tw-prose-bullets": colors.gray[300],
-      "--tw-prose-hr": colors.gray[200],
-      "--tw-prose-quotes": colors.gray[900],
-      "--tw-prose-quote-borders": colors.gray[200],
-      "--tw-prose-captions": colors.gray[500],
-      "--tw-prose-code": colors.gray[900],
-      "--tw-prose-pre-code": colors.gray[200],
-      "--tw-prose-pre-bg": colors.gray[800],
-      "--tw-prose-th-borders": colors.gray[300],
-      "--tw-prose-td-borders": colors.gray[200],
-      "--tw-prose-invert-body": colors.gray[300],
-      "--tw-prose-invert-headings": colors.white,
-      "--tw-prose-invert-lead": colors.gray[400],
-      "--tw-prose-invert-links": colors.white,
-      "--tw-prose-invert-bold": colors.white,
-      "--tw-prose-invert-counters": colors.gray[400],
-      "--tw-prose-invert-bullets": colors.gray[600],
-      "--tw-prose-invert-hr": colors.gray[700],
-      "--tw-prose-invert-quotes": colors.gray[100],
-      "--tw-prose-invert-quote-borders": colors.gray[700],
-      "--tw-prose-invert-captions": colors.gray[400],
-      "--tw-prose-invert-code": colors.white,
-      "--tw-prose-invert-pre-code": colors.gray[300],
-      "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
-      "--tw-prose-invert-th-borders": colors.gray[600],
-      "--tw-prose-invert-td-borders": colors.gray[700],
-    },
+      '--tw-prose-body': colors.gray[700],
+      '--tw-prose-headings': colors.gray[900],
+      '--tw-prose-lead': colors.gray[600],
+      '--tw-prose-links': colors.gray[900],
+      '--tw-prose-bold': colors.gray[900],
+      '--tw-prose-counters': colors.gray[500],
+      '--tw-prose-bullets': colors.gray[300],
+      '--tw-prose-hr': colors.gray[200],
+      '--tw-prose-quotes': colors.gray[900],
+      '--tw-prose-quote-borders': colors.gray[200],
+      '--tw-prose-captions': colors.gray[500],
+      '--tw-prose-code': colors.gray[900],
+      '--tw-prose-pre-code': colors.gray[200],
+      '--tw-prose-pre-bg': colors.gray[800],
+      '--tw-prose-th-borders': colors.gray[300],
+      '--tw-prose-td-borders': colors.gray[200],
+      '--tw-prose-invert-body': colors.gray[300],
+      '--tw-prose-invert-headings': colors.white,
+      '--tw-prose-invert-lead': colors.gray[400],
+      '--tw-prose-invert-links': colors.white,
+      '--tw-prose-invert-bold': colors.white,
+      '--tw-prose-invert-counters': colors.gray[400],
+      '--tw-prose-invert-bullets': colors.gray[600],
+      '--tw-prose-invert-hr': colors.gray[700],
+      '--tw-prose-invert-quotes': colors.gray[100],
+      '--tw-prose-invert-quote-borders': colors.gray[700],
+      '--tw-prose-invert-captions': colors.gray[400],
+      '--tw-prose-invert-code': colors.white,
+      '--tw-prose-invert-pre-code': colors.gray[300],
+      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+      '--tw-prose-invert-th-borders': colors.gray[600],
+      '--tw-prose-invert-td-borders': colors.gray[700]
+    }
   },
 
   zinc: {
     css: {
-      "--tw-prose-body": colors.zinc[700],
-      "--tw-prose-headings": colors.zinc[900],
-      "--tw-prose-lead": colors.zinc[600],
-      "--tw-prose-links": colors.zinc[900],
-      "--tw-prose-bold": colors.zinc[900],
-      "--tw-prose-counters": colors.zinc[500],
-      "--tw-prose-bullets": colors.zinc[300],
-      "--tw-prose-hr": colors.zinc[200],
-      "--tw-prose-quotes": colors.zinc[900],
-      "--tw-prose-quote-borders": colors.zinc[200],
-      "--tw-prose-captions": colors.zinc[500],
-      "--tw-prose-code": colors.zinc[900],
-      "--tw-prose-pre-code": colors.zinc[200],
-      "--tw-prose-pre-bg": colors.zinc[800],
-      "--tw-prose-th-borders": colors.zinc[300],
-      "--tw-prose-td-borders": colors.zinc[200],
-      "--tw-prose-invert-body": colors.zinc[300],
-      "--tw-prose-invert-headings": colors.white,
-      "--tw-prose-invert-lead": colors.zinc[400],
-      "--tw-prose-invert-links": colors.white,
-      "--tw-prose-invert-bold": colors.white,
-      "--tw-prose-invert-counters": colors.zinc[400],
-      "--tw-prose-invert-bullets": colors.zinc[600],
-      "--tw-prose-invert-hr": colors.zinc[700],
-      "--tw-prose-invert-quotes": colors.zinc[100],
-      "--tw-prose-invert-quote-borders": colors.zinc[700],
-      "--tw-prose-invert-captions": colors.zinc[400],
-      "--tw-prose-invert-code": colors.white,
-      "--tw-prose-invert-pre-code": colors.zinc[300],
-      "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
-      "--tw-prose-invert-th-borders": colors.zinc[600],
-      "--tw-prose-invert-td-borders": colors.zinc[700],
-    },
+      '--tw-prose-body': colors.zinc[700],
+      '--tw-prose-headings': colors.zinc[900],
+      '--tw-prose-lead': colors.zinc[600],
+      '--tw-prose-links': colors.zinc[900],
+      '--tw-prose-bold': colors.zinc[900],
+      '--tw-prose-counters': colors.zinc[500],
+      '--tw-prose-bullets': colors.zinc[300],
+      '--tw-prose-hr': colors.zinc[200],
+      '--tw-prose-quotes': colors.zinc[900],
+      '--tw-prose-quote-borders': colors.zinc[200],
+      '--tw-prose-captions': colors.zinc[500],
+      '--tw-prose-code': colors.zinc[900],
+      '--tw-prose-pre-code': colors.zinc[200],
+      '--tw-prose-pre-bg': colors.zinc[800],
+      '--tw-prose-th-borders': colors.zinc[300],
+      '--tw-prose-td-borders': colors.zinc[200],
+      '--tw-prose-invert-body': colors.zinc[300],
+      '--tw-prose-invert-headings': colors.white,
+      '--tw-prose-invert-lead': colors.zinc[400],
+      '--tw-prose-invert-links': colors.white,
+      '--tw-prose-invert-bold': colors.white,
+      '--tw-prose-invert-counters': colors.zinc[400],
+      '--tw-prose-invert-bullets': colors.zinc[600],
+      '--tw-prose-invert-hr': colors.zinc[700],
+      '--tw-prose-invert-quotes': colors.zinc[100],
+      '--tw-prose-invert-quote-borders': colors.zinc[700],
+      '--tw-prose-invert-captions': colors.zinc[400],
+      '--tw-prose-invert-code': colors.white,
+      '--tw-prose-invert-pre-code': colors.zinc[300],
+      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+      '--tw-prose-invert-th-borders': colors.zinc[600],
+      '--tw-prose-invert-td-borders': colors.zinc[700]
+    }
   },
 
   neutral: {
     css: {
-      "--tw-prose-body": colors.neutral[700],
-      "--tw-prose-headings": colors.neutral[900],
-      "--tw-prose-lead": colors.neutral[600],
-      "--tw-prose-links": colors.neutral[900],
-      "--tw-prose-bold": colors.neutral[900],
-      "--tw-prose-counters": colors.neutral[500],
-      "--tw-prose-bullets": colors.neutral[300],
-      "--tw-prose-hr": colors.neutral[200],
-      "--tw-prose-quotes": colors.neutral[900],
-      "--tw-prose-quote-borders": colors.neutral[200],
-      "--tw-prose-captions": colors.neutral[500],
-      "--tw-prose-code": colors.neutral[900],
-      "--tw-prose-pre-code": colors.neutral[200],
-      "--tw-prose-pre-bg": colors.neutral[800],
-      "--tw-prose-th-borders": colors.neutral[300],
-      "--tw-prose-td-borders": colors.neutral[200],
-      "--tw-prose-invert-body": colors.neutral[300],
-      "--tw-prose-invert-headings": colors.white,
-      "--tw-prose-invert-lead": colors.neutral[400],
-      "--tw-prose-invert-links": colors.white,
-      "--tw-prose-invert-bold": colors.white,
-      "--tw-prose-invert-counters": colors.neutral[400],
-      "--tw-prose-invert-bullets": colors.neutral[600],
-      "--tw-prose-invert-hr": colors.neutral[700],
-      "--tw-prose-invert-quotes": colors.neutral[100],
-      "--tw-prose-invert-quote-borders": colors.neutral[700],
-      "--tw-prose-invert-captions": colors.neutral[400],
-      "--tw-prose-invert-code": colors.white,
-      "--tw-prose-invert-pre-code": colors.neutral[300],
-      "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
-      "--tw-prose-invert-th-borders": colors.neutral[600],
-      "--tw-prose-invert-td-borders": colors.neutral[700],
-    },
+      '--tw-prose-body': colors.neutral[700],
+      '--tw-prose-headings': colors.neutral[900],
+      '--tw-prose-lead': colors.neutral[600],
+      '--tw-prose-links': colors.neutral[900],
+      '--tw-prose-bold': colors.neutral[900],
+      '--tw-prose-counters': colors.neutral[500],
+      '--tw-prose-bullets': colors.neutral[300],
+      '--tw-prose-hr': colors.neutral[200],
+      '--tw-prose-quotes': colors.neutral[900],
+      '--tw-prose-quote-borders': colors.neutral[200],
+      '--tw-prose-captions': colors.neutral[500],
+      '--tw-prose-code': colors.neutral[900],
+      '--tw-prose-pre-code': colors.neutral[200],
+      '--tw-prose-pre-bg': colors.neutral[800],
+      '--tw-prose-th-borders': colors.neutral[300],
+      '--tw-prose-td-borders': colors.neutral[200],
+      '--tw-prose-invert-body': colors.neutral[300],
+      '--tw-prose-invert-headings': colors.white,
+      '--tw-prose-invert-lead': colors.neutral[400],
+      '--tw-prose-invert-links': colors.white,
+      '--tw-prose-invert-bold': colors.white,
+      '--tw-prose-invert-counters': colors.neutral[400],
+      '--tw-prose-invert-bullets': colors.neutral[600],
+      '--tw-prose-invert-hr': colors.neutral[700],
+      '--tw-prose-invert-quotes': colors.neutral[100],
+      '--tw-prose-invert-quote-borders': colors.neutral[700],
+      '--tw-prose-invert-captions': colors.neutral[400],
+      '--tw-prose-invert-code': colors.white,
+      '--tw-prose-invert-pre-code': colors.neutral[300],
+      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+      '--tw-prose-invert-th-borders': colors.neutral[600],
+      '--tw-prose-invert-td-borders': colors.neutral[700]
+    }
   },
 
   stone: {
     css: {
-      "--tw-prose-body": colors.stone[700],
-      "--tw-prose-headings": colors.stone[900],
-      "--tw-prose-lead": colors.stone[600],
-      "--tw-prose-links": colors.stone[900],
-      "--tw-prose-bold": colors.stone[900],
-      "--tw-prose-counters": colors.stone[500],
-      "--tw-prose-bullets": colors.stone[300],
-      "--tw-prose-hr": colors.stone[200],
-      "--tw-prose-quotes": colors.stone[900],
-      "--tw-prose-quote-borders": colors.stone[200],
-      "--tw-prose-captions": colors.stone[500],
-      "--tw-prose-code": colors.stone[900],
-      "--tw-prose-pre-code": colors.stone[200],
-      "--tw-prose-pre-bg": colors.stone[800],
-      "--tw-prose-th-borders": colors.stone[300],
-      "--tw-prose-td-borders": colors.stone[200],
-      "--tw-prose-invert-body": colors.stone[300],
-      "--tw-prose-invert-headings": colors.white,
-      "--tw-prose-invert-lead": colors.stone[400],
-      "--tw-prose-invert-links": colors.white,
-      "--tw-prose-invert-bold": colors.white,
-      "--tw-prose-invert-counters": colors.stone[400],
-      "--tw-prose-invert-bullets": colors.stone[600],
-      "--tw-prose-invert-hr": colors.stone[700],
-      "--tw-prose-invert-quotes": colors.stone[100],
-      "--tw-prose-invert-quote-borders": colors.stone[700],
-      "--tw-prose-invert-captions": colors.stone[400],
-      "--tw-prose-invert-code": colors.white,
-      "--tw-prose-invert-pre-code": colors.stone[300],
-      "--tw-prose-invert-pre-bg": "rgb(0 0 0 / 50%)",
-      "--tw-prose-invert-th-borders": colors.stone[600],
-      "--tw-prose-invert-td-borders": colors.stone[700],
-    },
+      '--tw-prose-body': colors.stone[700],
+      '--tw-prose-headings': colors.stone[900],
+      '--tw-prose-lead': colors.stone[600],
+      '--tw-prose-links': colors.stone[900],
+      '--tw-prose-bold': colors.stone[900],
+      '--tw-prose-counters': colors.stone[500],
+      '--tw-prose-bullets': colors.stone[300],
+      '--tw-prose-hr': colors.stone[200],
+      '--tw-prose-quotes': colors.stone[900],
+      '--tw-prose-quote-borders': colors.stone[200],
+      '--tw-prose-captions': colors.stone[500],
+      '--tw-prose-code': colors.stone[900],
+      '--tw-prose-pre-code': colors.stone[200],
+      '--tw-prose-pre-bg': colors.stone[800],
+      '--tw-prose-th-borders': colors.stone[300],
+      '--tw-prose-td-borders': colors.stone[200],
+      '--tw-prose-invert-body': colors.stone[300],
+      '--tw-prose-invert-headings': colors.white,
+      '--tw-prose-invert-lead': colors.stone[400],
+      '--tw-prose-invert-links': colors.white,
+      '--tw-prose-invert-bold': colors.white,
+      '--tw-prose-invert-counters': colors.stone[400],
+      '--tw-prose-invert-bullets': colors.stone[600],
+      '--tw-prose-invert-hr': colors.stone[700],
+      '--tw-prose-invert-quotes': colors.stone[100],
+      '--tw-prose-invert-quote-borders': colors.stone[700],
+      '--tw-prose-invert-captions': colors.stone[400],
+      '--tw-prose-invert-code': colors.white,
+      '--tw-prose-invert-pre-code': colors.stone[300],
+      '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
+      '--tw-prose-invert-th-borders': colors.stone[600],
+      '--tw-prose-invert-td-borders': colors.stone[700]
+    }
   },
 
   // Link-only themes (for backward compatibility)
 
   red: {
     css: {
-      "--tw-prose-links": colors.red[600],
-      "--tw-prose-invert-links": colors.red[500],
-    },
+      '--tw-prose-links': colors.red[600],
+      '--tw-prose-invert-links': colors.red[500]
+    }
   },
 
   orange: {
     css: {
-      "--tw-prose-links": colors.orange[600],
-      "--tw-prose-invert-links": colors.orange[500],
-    },
+      '--tw-prose-links': colors.orange[600],
+      '--tw-prose-invert-links': colors.orange[500]
+    }
   },
 
   amber: {
     css: {
-      "--tw-prose-links": colors.amber[600],
-      "--tw-prose-invert-links": colors.amber[500],
-    },
+      '--tw-prose-links': colors.amber[600],
+      '--tw-prose-invert-links': colors.amber[500]
+    }
   },
 
   yellow: {
     css: {
-      "--tw-prose-links": colors.yellow[600],
-      "--tw-prose-invert-links": colors.yellow[500],
-    },
+      '--tw-prose-links': colors.yellow[600],
+      '--tw-prose-invert-links': colors.yellow[500]
+    }
   },
 
   lime: {
     css: {
-      "--tw-prose-links": colors.lime[600],
-      "--tw-prose-invert-links": colors.lime[500],
-    },
+      '--tw-prose-links': colors.lime[600],
+      '--tw-prose-invert-links': colors.lime[500]
+    }
   },
 
   green: {
     css: {
-      "--tw-prose-links": colors.green[600],
-      "--tw-prose-invert-links": colors.green[500],
-    },
+      '--tw-prose-links': colors.green[600],
+      '--tw-prose-invert-links': colors.green[500]
+    }
   },
 
   emerald: {
     css: {
-      "--tw-prose-links": colors.emerald[600],
-      "--tw-prose-invert-links": colors.emerald[500],
-    },
+      '--tw-prose-links': colors.emerald[600],
+      '--tw-prose-invert-links': colors.emerald[500]
+    }
   },
 
   teal: {
     css: {
-      "--tw-prose-links": colors.teal[600],
-      "--tw-prose-invert-links": colors.teal[500],
-    },
+      '--tw-prose-links': colors.teal[600],
+      '--tw-prose-invert-links': colors.teal[500]
+    }
   },
 
   cyan: {
     css: {
-      "--tw-prose-links": colors.cyan[600],
-      "--tw-prose-invert-links": colors.cyan[500],
-    },
+      '--tw-prose-links': colors.cyan[600],
+      '--tw-prose-invert-links': colors.cyan[500]
+    }
   },
 
   sky: {
     css: {
-      "--tw-prose-links": colors.sky[600],
-      "--tw-prose-invert-links": colors.sky[500],
-    },
+      '--tw-prose-links': colors.sky[600],
+      '--tw-prose-invert-links': colors.sky[500]
+    }
   },
 
   blue: {
     css: {
-      "--tw-prose-links": colors.blue[600],
-      "--tw-prose-invert-links": colors.blue[500],
-    },
+      '--tw-prose-links': colors.blue[600],
+      '--tw-prose-invert-links': colors.blue[500]
+    }
   },
 
   indigo: {
     css: {
-      "--tw-prose-links": colors.indigo[600],
-      "--tw-prose-invert-links": colors.indigo[500],
-    },
+      '--tw-prose-links': colors.indigo[600],
+      '--tw-prose-invert-links': colors.indigo[500]
+    }
   },
 
   violet: {
     css: {
-      "--tw-prose-links": colors.violet[600],
-      "--tw-prose-invert-links": colors.violet[500],
-    },
+      '--tw-prose-links': colors.violet[600],
+      '--tw-prose-invert-links': colors.violet[500]
+    }
   },
 
   purple: {
     css: {
-      "--tw-prose-links": colors.purple[600],
-      "--tw-prose-invert-links": colors.purple[500],
-    },
+      '--tw-prose-links': colors.purple[600],
+      '--tw-prose-invert-links': colors.purple[500]
+    }
   },
 
   fuchsia: {
     css: {
-      "--tw-prose-links": colors.fuchsia[600],
-      "--tw-prose-invert-links": colors.fuchsia[500],
-    },
+      '--tw-prose-links': colors.fuchsia[600],
+      '--tw-prose-invert-links': colors.fuchsia[500]
+    }
   },
 
   pink: {
     css: {
-      "--tw-prose-links": colors.pink[600],
-      "--tw-prose-invert-links": colors.pink[500],
-    },
+      '--tw-prose-links': colors.pink[600],
+      '--tw-prose-invert-links': colors.pink[500]
+    }
   },
 
   rose: {
     css: {
-      "--tw-prose-links": colors.rose[600],
-      "--tw-prose-invert-links": colors.rose[500],
-    },
-  },
+      '--tw-prose-links': colors.rose[600],
+      '--tw-prose-invert-links': colors.rose[500]
+    }
+  }
 };
 
-const plugin = require("tailwindcss/plugin");
+const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: "class",
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  darkMode: 'class',
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
+      fontFamily: {
+        inter: ['Inter']
+      },
       colors: {
         // You can generate your own colors with this tool: https://javisperez.github.io/tailwindcolorshades/
         primary: {
-          50: "#fcfdf7",
-          100: "#f8fcee",
-          200: "#eef6d5",
-          300: "#e3f1bc",
-          400: "#cfe78a",
-          500: "#badc58",
-          600: "#a7c64f",
-          700: "#8ca542",
-          800: "#708435",
-          900: "#5b6c2b",
-          DEFAULT: "#badc58",
+          50: '#fcfdf7',
+          100: '#f8fcee',
+          200: '#eef6d5',
+          300: '#e3f1bc',
+          400: '#cfe78a',
+          500: '#badc58',
+          600: '#a7c64f',
+          700: '#8ca542',
+          800: '#708435',
+          900: '#5b6c2b',
+          DEFAULT: '#badc58'
         },
-        grey: "#0d1117",
+        grey: '#0d1117',
         mineshaft: {
-          50: "#f5f5f5",
-          100: "#ebebeb",
-          200: "#ccccce",
-          300: "#adaeb0",
-          400: "#707174",
-          500: "#323439",
-          600: "#2d2f33",
-          700: "#26272b",
-          800: "#1e1f22",
-          900: "#19191c",
-          DEFAULT: "#323439",
+          50: '#f5f5f5',
+          100: '#ebebeb',
+          200: '#ccccce',
+          300: '#adaeb0',
+          400: '#707174',
+          500: '#323439',
+          600: '#2d2f33',
+          700: '#26272b',
+          800: '#1e1f22',
+          900: '#19191c',
+          DEFAULT: '#323439'
         },
         chicago: {
-          50: "#f7f7f7",
-          100: "#efefef",
-          200: "#d6d6d7",
-          300: "#bdbebf",
-          400: "#8c8d8e",
-          500: "#5b5c5e",
-          600: "#525355",
-          700: "#444547",
-          800: "#373738",
-          900: "#2d2d2e",
-          DEFAULT: "#5b5c5e",
+          50: '#f7f7f7',
+          100: '#efefef',
+          200: '#d6d6d7',
+          300: '#bdbebf',
+          400: '#8c8d8e',
+          500: '#5b5c5e',
+          600: '#525355',
+          700: '#444547',
+          800: '#373738',
+          900: '#2d2d2e',
+          DEFAULT: '#5b5c5e'
         },
         bunker: {
-          50: "#f3f4f4",
-          100: "#e8e8e9",
-          200: "#c5c6c8",
-          300: "#a2a4a6",
-          400: "#5d5f64",
-          500: "#171b21",
-          600: "#15181e",
-          700: "#111419",
-          800: "#0e1014",
-          900: "#0b0d10",
-          DEFAULT: "#171B21",
+          50: '#f3f4f4',
+          100: '#e8e8e9',
+          200: '#c5c6c8',
+          300: '#a2a4a6',
+          400: '#5d5f64',
+          500: '#171b21',
+          600: '#15181e',
+          700: '#111419',
+          800: '#0e1014',
+          900: '#0b0d10',
+          DEFAULT: '#171B21'
         },
-        githubblack: "#020409",
-        blue2: "#130f40",
-        blue1: "#3498db",
+        githubblack: '#020409',
+        blue2: '#130f40',
+        blue1: '#3498db',
         yellow: {
-          50: "#fefcf3",
-          100: "#fef9e7",
-          200: "#fcf0c3",
-          300: "#f9e79f",
-          400: "#f5d657",
-          500: "#f1c40f",
-          600: "#d9b00e",
-          700: "#b5930b",
-          800: "#917609",
-          900: "#766007",
-          DEFAULT: "#f1c40f",
+          50: '#fefcf3',
+          100: '#fef9e7',
+          200: '#fcf0c3',
+          300: '#f9e79f',
+          400: '#f5d657',
+          500: '#f1c40f',
+          600: '#d9b00e',
+          700: '#b5930b',
+          800: '#917609',
+          900: '#766007',
+          DEFAULT: '#f1c40f'
         },
         red: {
-          50: "#fef6f5",
-          100: "#fdedec",
-          200: "#f9d2ce",
-          300: "#f5b7b1",
-          400: "#ee8277",
-          500: "#e74c3c",
-          600: "#d04436",
-          700: "#ad392d",
-          800: "#8b2e24",
-          900: "#71251d",
-          DEFAULT: "#e74c3c",
+          50: '#fef6f5',
+          100: '#fdedec',
+          200: '#f9d2ce',
+          300: '#f5b7b1',
+          400: '#ee8277',
+          500: '#e74c3c',
+          600: '#d04436',
+          700: '#ad392d',
+          800: '#8b2e24',
+          900: '#71251d',
+          DEFAULT: '#e74c3c'
         },
-        orange: "#f39c12",
+        orange: '#f39c12',
         green: {
-          50: "#f5fcf8",
-          100: "#eafaf1",
-          200: "#cbf2dc",
-          300: "#abebc6",
-          400: "#6ddb9c",
-          500: "#2ecc71",
-          600: "#29b866",
-          700: "#239955",
-          800: "#1c7a44",
-          900: "#176437",
-          DEFAULT: "#2ecc71",
-        },
-      },
+          50: '#f5fcf8',
+          100: '#eafaf1',
+          200: '#cbf2dc',
+          300: '#abebc6',
+          400: '#6ddb9c',
+          500: '#2ecc71',
+          600: '#29b866',
+          700: '#239955',
+          800: '#1c7a44',
+          900: '#176437',
+          DEFAULT: '#2ecc71'
+        }
+      }
     },
     keyframes: {
       type: {
-        "0%": { transform: "translateX(0ch)" },
-        "5%, 10%": { transform: "translateX(1ch)" },
-        "15%, 20%": { transform: "translateX(2ch)" },
-        "25%, 30%": { transform: "translateX(3ch)" },
-        "35%, 40%": { transform: "translateX(4ch)" },
-        "45%, 50%": { transform: "translateX(5ch)" },
-        "55%, 60%": { transform: "translateX(6ch)" },
-        "65%, 70%": { transform: "translateX(7ch)" },
-        "75%, 80%": { transform: "translateX(8ch)" },
-        "85%, 90%": { transform: "translateX(9ch)" },
-        "95%, 100%": { transform: "translateX(11ch)" },
+        '0%': { transform: 'translateX(0ch)' },
+        '5%, 10%': { transform: 'translateX(1ch)' },
+        '15%, 20%': { transform: 'translateX(2ch)' },
+        '25%, 30%': { transform: 'translateX(3ch)' },
+        '35%, 40%': { transform: 'translateX(4ch)' },
+        '45%, 50%': { transform: 'translateX(5ch)' },
+        '55%, 60%': { transform: 'translateX(6ch)' },
+        '65%, 70%': { transform: 'translateX(7ch)' },
+        '75%, 80%': { transform: 'translateX(8ch)' },
+        '85%, 90%': { transform: 'translateX(9ch)' },
+        '95%, 100%': { transform: 'translateX(11ch)' }
       },
+      // REQUIRED BY DEISGN COMPONENT
+      // MODAL
       fadeIn: {
-        "0%": { opacity: 0 },
-        "100%": { opacity: 1 },
+        '0%': { opacity: 0 },
+        '100%': { opacity: 1 }
       },
+      popIn: {
+        from: {
+          opacity: 0,
+          transform: 'translate(-50%, -48%) scale(0.96)'
+        },
+        to: {
+          opacity: 1,
+          transform: 'translate(-50%, -50%) scale(1)'
+        }
+      },
+      // Dropdown
+      slideUpAndFade: {
+        from: {
+          opacity: 0,
+          transform: ' translateY(2px)'
+        },
+        to: {
+          opacity: 1,
+          transform: ' translateY(0)'
+        }
+      },
+      slideRightAndFade: {
+        from: {
+          opacity: 0,
+          transform: ' translateX(-2px)'
+        },
+        to: {
+          opacity: 1,
+          transform: ' translateX(0)'
+        }
+      },
+      slideDownAndFade: {
+        from: {
+          opacity: 0,
+          transform: ' translateY(-2px)'
+        },
+        to: {
+          opacity: 1,
+          transform: ' translateY(0)'
+        }
+      },
+      slideLeftAndFade: {
+        from: {
+          opacity: 0,
+          transform: ' translateX(2px)'
+        },
+        to: {
+          opacity: 1,
+          transform: ' translateX(0)'
+        }
+      },
+      // END
       spin: {
-        "0%": { transform: "rotate(0deg)" },
-        "40%": { transform: "rotate(360deg)" },
-        "100%": { transform: "rotate(360deg)" },
+        '0%': { transform: 'rotate(0deg)' },
+        '40%': { transform: 'rotate(360deg)' },
+        '100%': { transform: 'rotate(360deg)' }
       },
       bounce: {
-        "0%": { transform: "translateY(-90%)" },
-        "100%": { transform: "translateY(-100%)" },
+        '0%': { transform: 'translateY(-90%)' },
+        '100%': { transform: 'translateY(-100%)' }
       },
       wiggle: {
-        "0%, 100%": { transform: "rotate(-3deg)" },
-        "50%": { transform: "rotate(3deg)" },
+        '0%, 100%': { transform: 'rotate(-3deg)' },
+        '50%': { transform: 'rotate(3deg)' }
       },
       ping: {
-        "75%, 100%": {
-          transform: "scale(2)",
-          opacity: 0,
-        },
+        '75%, 100%': {
+          transform: 'scale(2)',
+          opacity: 0
+        }
       },
       popup: {
-        "0%": {
-          transform: "scale(0.2)",
-          opacity: 0,
+        '0%': {
+          transform: 'scale(0.2)',
+          opacity: 0
           // transform: "translateY(120%)",
         },
-        "100%": {
-          transform: "scale(1)",
-          opacity: 1,
+        '100%': {
+          transform: 'scale(1)',
+          opacity: 1
           // transform: "translateY(100%)",
-        },
+        }
       },
       popright: {
-        "0%": {
-          transform: "translateX(-100%)",
-        },
-        "100%": {
-          transform: "translateX(0%)",
+        '0%': {
+          transform: 'translateX(-100%)'
         },
+        '100%': {
+          transform: 'translateX(0%)'
+        }
       },
       popleft: {
-        "0%": {
-          transform: "translateX(100%)",
-        },
-        "100%": {
-          transform: "translateX(0%)",
+        '0%': {
+          transform: 'translateX(100%)'
         },
+        '100%': {
+          transform: 'translateX(0%)'
+        }
       },
       popdown: {
-        "0%": {
-          transform: "scale(0.2)",
-          opacity: 0,
+        '0%': {
+          transform: 'scale(0.2)',
+          opacity: 0
           // transform: "translateY(80%)",
         },
-        "100%": {
-          transform: "scale(1)",
-          opacity: 1,
+        '100%': {
+          transform: 'scale(1)',
+          opacity: 1
           // transform: "translateY(100%)",
-        },
-      },
+        }
+      }
     },
     animation: {
-      fadeIn: "fadeIn 1000ms ease-in-out",
-      bounce: "bounce 1000ms ease-in-out infinite",
-      spin: "spin 4000ms ease-in-out infinite",
-      cursor: "cursor .6s linear infinite alternate",
-      type: "type 2.7s ease-out .8s infinite alternate both",
-      "type-reverse": "type 1.8s ease-out 0s infinite alternate-reverse both",
-      wiggle: "wiggle 200ms ease-in-out",
-      ping: "ping 1000ms ease-in-out infinite",
-      popup: "popup 300ms ease-in-out",
-      popdown: "popdown 300ms ease-in-out",
-      popright: "popright 100ms ease-in-out",
-      popleft: "popleft 100ms ease-in-out",
+      // Design Lib
+      // MODAL
+      fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)',
+      popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);',
+      // Dropdown
+      slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      // END
+      bounce: 'bounce 1000ms ease-in-out infinite',
+      spin: 'spin 4000ms ease-in-out infinite',
+      cursor: 'cursor .6s linear infinite alternate',
+      type: 'type 2.7s ease-out .8s infinite alternate both',
+      'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
+      wiggle: 'wiggle 200ms ease-in-out',
+      ping: 'ping 1000ms ease-in-out infinite',
+      popup: 'popup 300ms ease-in-out',
+      popdown: 'popdown 300ms ease-in-out',
+      popright: 'popright 100ms ease-in-out',
+      popleft: 'popleft 100ms ease-in-out'
     },
     fontSize: {
-      xxxs: ".23rem",
-      xxs: ".5rem",
-      xs: ".75rem",
-      sm: ".875rem",
-      base: "1rem",
-      lg: "1.125rem",
-      xl: "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem",
-      "5xl": "3rem",
-      "6xl": "4rem",
-      "7xl": "5rem",
-      "8xl": "6rem",
-      "9xl": "7rem",
+      xxxs: '.23rem',
+      xxs: '.5rem',
+      xs: '.75rem',
+      sm: '.875rem',
+      base: '1rem',
+      lg: '1.125rem',
+      xl: '1.25rem',
+      '2xl': '1.5rem',
+      '3xl': '1.875rem',
+      '4xl': '2.25rem',
+      '5xl': '3rem',
+      '6xl': '4rem',
+      '7xl': '5rem',
+      '8xl': '6rem',
+      '9xl': '7rem'
     },
     typography: (theme) => ({
       DEFAULT: {
         css: [
           {
-            color: "var(--tw-prose-body)",
-            maxWidth: "65ch",
+            color: 'var(--tw-prose-body)',
+            maxWidth: '65ch',
             '[class~="lead"]': {
-              color: "var(--tw-prose-lead)",
+              color: 'var(--tw-prose-lead)'
             },
             a: {
               color: colors.gray[200],
-              textDecoration: "underline",
-              fontWeight: "500",
+              textDecoration: 'underline',
+              fontWeight: '500'
             },
             strong: {
               color: colors.gray[200],
-              fontWeight: "600",
+              fontWeight: '600'
             },
-            "a strong": {
-              color: "inherit",
+            'a strong': {
+              color: 'inherit'
             },
-            "blockquote strong": {
-              color: "inherit",
+            'blockquote strong': {
+              color: 'inherit'
             },
-            "thead th strong": {
-              color: "inherit",
+            'thead th strong': {
+              color: 'inherit'
             },
             ol: {
-              listStyleType: "decimal",
+              listStyleType: 'decimal'
             },
             'ol[type="A"]': {
-              listStyleType: "upper-alpha",
+              listStyleType: 'upper-alpha'
             },
             'ol[type="a"]': {
-              listStyleType: "lower-alpha",
+              listStyleType: 'lower-alpha'
             },
             'ol[type="A" s]': {
-              listStyleType: "upper-alpha",
+              listStyleType: 'upper-alpha'
             },
             'ol[type="a" s]': {
-              listStyleType: "lower-alpha",
+              listStyleType: 'lower-alpha'
             },
             'ol[type="I"]': {
-              listStyleType: "upper-roman",
+              listStyleType: 'upper-roman'
             },
             'ol[type="i"]': {
-              listStyleType: "lower-roman",
+              listStyleType: 'lower-roman'
             },
             'ol[type="I" s]': {
-              listStyleType: "upper-roman",
+              listStyleType: 'upper-roman'
             },
             'ol[type="i" s]': {
-              listStyleType: "lower-roman",
+              listStyleType: 'lower-roman'
             },
             'ol[type="1"]': {
-              listStyleType: "decimal",
+              listStyleType: 'decimal'
             },
             ul: {
-              listStyleType: "disc",
+              listStyleType: 'disc'
             },
-            "ol > li::marker": {
-              fontWeight: "400",
-              color: "var(--tw-prose-counters)",
+            'ol > li::marker': {
+              fontWeight: '400',
+              color: 'var(--tw-prose-counters)'
             },
-            "ul > li::marker": {
-              color: "var(--tw-prose-bullets)",
+            'ul > li::marker': {
+              color: 'var(--tw-prose-bullets)'
             },
             hr: {
-              borderColor: "var(--tw-prose-hr)",
-              borderTopWidth: 1,
+              borderColor: 'var(--tw-prose-hr)',
+              borderTopWidth: 1
             },
             blockquote: {
-              fontWeight: "500",
-              fontStyle: "italic",
-              color: "var(--tw-prose-quotes)",
-              borderLeftWidth: "0.25rem",
-              borderLeftColor: "var(--tw-prose-quote-borders)",
-              quotes: '"\\201C""\\201D""\\2018""\\2019"',
+              fontWeight: '500',
+              fontStyle: 'italic',
+              color: 'var(--tw-prose-quotes)',
+              borderLeftWidth: '0.25rem',
+              borderLeftColor: 'var(--tw-prose-quote-borders)',
+              quotes: '"\\201C""\\201D""\\2018""\\2019"'
             },
-            "blockquote p:first-of-type::before": {
-              content: "open-quote",
+            'blockquote p:first-of-type::before': {
+              content: 'open-quote'
             },
-            "blockquote p:last-of-type::after": {
-              content: "close-quote",
+            'blockquote p:last-of-type::after': {
+              content: 'close-quote'
             },
             h1: {
               color: colors.gray[200],
-              fontWeight: "800",
+              fontWeight: '800'
             },
-            "h1 strong": {
-              fontWeight: "900",
-              color: "inherit",
+            'h1 strong': {
+              fontWeight: '900',
+              color: 'inherit'
             },
             h2: {
               color: colors.gray[200],
-              fontWeight: "700",
+              fontWeight: '700'
             },
-            "h2 strong": {
-              fontWeight: "800",
-              color: "inherit",
+            'h2 strong': {
+              fontWeight: '800',
+              color: 'inherit'
             },
             h3: {
               color: colors.gray[300],
-              fontWeight: "600",
+              fontWeight: '600'
             },
-            "h3 strong": {
-              fontWeight: "700",
-              color: "inherit",
+            'h3 strong': {
+              fontWeight: '700',
+              color: 'inherit'
             },
             h4: {
               color: colors.gray[400],
-              fontWeight: "600",
+              fontWeight: '600'
             },
-            "h4 strong": {
-              fontWeight: "700",
-              color: "inherit",
+            'h4 strong': {
+              fontWeight: '700',
+              color: 'inherit'
             },
             // TODO: Figure out how to not need these, it's a merging issue
             img: {},
-            "figure > *": {},
+            'figure > *': {},
             figcaption: {
-              color: "var(--tw-prose-captions)",
+              color: 'var(--tw-prose-captions)'
             },
             code: {
-              color: "var(--tw-prose-code)",
-              fontWeight: "600",
+              color: 'var(--tw-prose-code)',
+              fontWeight: '600'
             },
-            "code::before": {
-              content: '"`"',
+            'code::before': {
+              content: '"`"'
             },
-            "code::after": {
-              content: '"`"',
+            'code::after': {
+              content: '"`"'
             },
-            "a code": {
-              color: "inherit",
+            'a code': {
+              color: 'inherit'
             },
-            "h1 code": {
-              color: "inherit",
+            'h1 code': {
+              color: 'inherit'
             },
-            "h2 code": {
-              color: "inherit",
+            'h2 code': {
+              color: 'inherit'
             },
-            "h3 code": {
-              color: "inherit",
+            'h3 code': {
+              color: 'inherit'
             },
-            "h4 code": {
-              color: "inherit",
+            'h4 code': {
+              color: 'inherit'
             },
-            "blockquote code": {
-              color: "inherit",
+            'blockquote code': {
+              color: 'inherit'
             },
-            "thead th code": {
-              color: "inherit",
+            'thead th code': {
+              color: 'inherit'
             },
             pre: {
-              color: "var(--tw-prose-pre-code)",
+              color: 'var(--tw-prose-pre-code)',
               backgroundColor: colors.gray[800],
-              overflowX: "auto",
-              fontWeight: "400",
+              overflowX: 'auto',
+              fontWeight: '400'
             },
-            "pre code": {
-              backgroundColor: "transparent",
-              borderWidth: "0",
-              borderRadius: "0",
-              padding: "0",
-              fontWeight: "inherit",
-              color: "inherit",
-              fontSize: "inherit",
-              fontFamily: "inherit",
-              lineHeight: "inherit",
+            'pre code': {
+              backgroundColor: 'transparent',
+              borderWidth: '0',
+              borderRadius: '0',
+              padding: '0',
+              fontWeight: 'inherit',
+              color: 'inherit',
+              fontSize: 'inherit',
+              fontFamily: 'inherit',
+              lineHeight: 'inherit'
             },
-            "pre code::before": {
-              content: "none",
+            'pre code::before': {
+              content: 'none'
             },
-            "pre code::after": {
-              content: "none",
+            'pre code::after': {
+              content: 'none'
             },
             table: {
-              width: "100%",
-              tableLayout: "auto",
-              textAlign: "left",
+              width: '100%',
+              tableLayout: 'auto',
+              textAlign: 'left',
               marginTop: em(32, 16),
-              marginBottom: em(32, 16),
+              marginBottom: em(32, 16)
             },
             thead: {
-              borderBottomWidth: "1px",
-              borderBottomColor: "var(--tw-prose-th-borders)",
+              borderBottomWidth: '1px',
+              borderBottomColor: 'var(--tw-prose-th-borders)'
             },
-            "thead th": {
-              color: "var(--tw-prose-headings)",
-              fontWeight: "600",
-              verticalAlign: "bottom",
+            'thead th': {
+              color: 'var(--tw-prose-headings)',
+              fontWeight: '600',
+              verticalAlign: 'bottom'
             },
-            "tbody tr": {
-              borderBottomWidth: "1px",
-              borderBottomColor: "var(--tw-prose-td-borders)",
+            'tbody tr': {
+              borderBottomWidth: '1px',
+              borderBottomColor: 'var(--tw-prose-td-borders)'
             },
-            "tbody tr:last-child": {
-              borderBottomWidth: "0",
+            'tbody tr:last-child': {
+              borderBottomWidth: '0'
             },
-            "tbody td": {
-              verticalAlign: "baseline",
+            'tbody td': {
+              verticalAlign: 'baseline'
             },
             tfoot: {
-              borderTopWidth: "1px",
-              borderTopColor: "var(--tw-prose-th-borders)",
-            },
-            "tfoot td": {
-              verticalAlign: "top",
+              borderTopWidth: '1px',
+              borderTopColor: 'var(--tw-prose-th-borders)'
             },
+            'tfoot td': {
+              verticalAlign: 'top'
+            }
           },
           defaultModifiers.gray.css,
-          ...defaultModifiers.base.css,
-        ],
+          ...defaultModifiers.base.css
+        ]
       },
-      ...defaultModifiers,
-    }),
+      ...defaultModifiers
+    })
   },
   plugins: [
     plugin(function ({ addUtilities }) {
       addUtilities({
-        ".no-scrollbar::-webkit-scrollbar": {
-          display: "none",
-        },
-        ".no-scrollbar": {
-          "-ms-overflow-style": "none",
-          "scrollbar-width": "none",
+        '.no-scrollbar::-webkit-scrollbar': {
+          display: 'none'
         },
+        '.no-scrollbar': {
+          '-ms-overflow-style': 'none',
+          'scrollbar-width': 'none'
+        }
       });
     }),
-    require("@tailwindcss/typography"),
-  ],
+    require('@tailwindcss/typography')
+  ]
 };