Implement figma styles

2024-08-08 22:57:40 -05:00
42 changed files with 889 additions and 1416 deletions
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@ -0,0 +1,6 @@
+module.exports = {
+  trailingComma: 'all',
+  printWidth: 100,
+  tabWidth: 2,
+  arrowParens: 'always',
+}
--- a/README.md
+++ b/README.md
@ -1,42 +1,40 @@
 # testnet-onboarding-app
-
 React app for onboarding participants to laconicd chain with Nitro/Cosmos key attestation

 ## Setup for testnet-onboarding-app

 1. Clone the repository

-   ```zsh
+   ```
   git clone git@git.vdb.to:cerc-io/testnet-onboarding-app.git
   ```

 2. Enter the project directory

-   ```zsh
+   ```
   cd testnet-onboarding-app
   ```

 3. Install dependencies

-   ```zsh
+   ```
   yarn
   ```

 4. Setup .env
   - Copy and update `.env`

-     ```zsh
+     ```
     cp .env.example .env
     ```

   - In the `.env` file, add the  WalletConnect project ID used in your [laconic-wallet](https://git.vdb.to/cerc-io/laconic-wallet) setup.
-
-     ```zsh
+     ```
     WALLET_CONNECT_PROJECT_ID=39bc93c...
     ```

 5. Start the application

-   ```zsh
+   ```
   yarn start
   ```
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@ -1,56 +1,56 @@
-const fs = require("fs");
-const path = require("path");
-const webpack = require("webpack");
-const resolve = require("resolve");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
-const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
-const TerserPlugin = require("terser-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
-const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
-const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
-const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
-const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
-const ESLintPlugin = require("eslint-webpack-plugin");
-const paths = require("./paths");
-const modules = require("./modules");
-const getClientEnvironment = require("./env");
-const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const resolve = require('resolve');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+const ESLintPlugin = require('eslint-webpack-plugin');
+const paths = require('./paths');
+const modules = require('./modules');
+const getClientEnvironment = require('./env');
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin =
-  process.env.TSC_COMPILE_ON_ERROR === "true"
-    ? require("react-dev-utils/ForkTsCheckerWarningWebpackPlugin")
-    : require("react-dev-utils/ForkTsCheckerWebpackPlugin");
-const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+  process.env.TSC_COMPILE_ON_ERROR === 'true'
+    ? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
+    : require('react-dev-utils/ForkTsCheckerWebpackPlugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

-const createEnvironmentHash = require("./webpack/persistentCache/createEnvironmentHash");
+const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');

 // Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

-const reactRefreshRuntimeEntry = require.resolve("react-refresh/runtime");
+const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
 const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
-  "@pmmmwh/react-refresh-webpack-plugin"
+  '@pmmmwh/react-refresh-webpack-plugin'
 );
-const babelRuntimeEntry = require.resolve("babel-preset-react-app");
+const babelRuntimeEntry = require.resolve('babel-preset-react-app');
 const babelRuntimeEntryHelpers = require.resolve(
-  "@babel/runtime/helpers/esm/assertThisInitialized",
+  '@babel/runtime/helpers/esm/assertThisInitialized',
  { paths: [babelRuntimeEntry] }
 );
-const babelRuntimeRegenerator = require.resolve("@babel/runtime/regenerator", {
+const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
  paths: [babelRuntimeEntry],
 });

 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';

-const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === "true";
-const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === "true";
+const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
+const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';

 const imageInlineSizeLimit = parseInt(
-  process.env.IMAGE_INLINE_SIZE_LIMIT || "10000"
+  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );

 // Check if TypeScript is setup
@ -58,7 +58,7 @@ const useTypeScript = fs.existsSync(paths.appTsConfig);

 // Check if Tailwind config exists
 const useTailwind = fs.existsSync(
-  path.join(paths.appPath, "tailwind.config.ts")
+  path.join(paths.appPath, 'tailwind.config.js')
 );

 // Get the path to the uncompiled service worker (if it exists).
@ -71,12 +71,12 @@ const sassRegex = /\.(scss|sass)$/;
 const sassModuleRegex = /\.module\.(scss|sass)$/;

 const hasJsxRuntime = (() => {
-  if (process.env.DISABLE_NEW_JSX_TRANSFORM === "true") {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
    return false;
  }

  try {
-    require.resolve("react/jsx-runtime");
+    require.resolve('react/jsx-runtime');
    return true;
  } catch (e) {
    return false;
@ -86,13 +86,13 @@ const hasJsxRuntime = (() => {
 // This is the production and development configuration.
 // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 module.exports = function (webpackEnv) {
-  const isEnvDevelopment = webpackEnv === "development";
-  const isEnvProduction = webpackEnv === "production";
+  const isEnvDevelopment = webpackEnv === 'development';
+  const isEnvProduction = webpackEnv === 'production';

  // Variable used for enabling profiling in Production
  // passed into alias object. Uses a flag if passed into the build command
  const isEnvProductionProfile =
-    isEnvProduction && process.argv.includes("--profile");
+    isEnvProduction && process.argv.includes('--profile');

  // We will provide `paths.publicUrlOrPath` to our app
  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
@ -105,38 +105,38 @@ module.exports = function (webpackEnv) {
  // common function to get style loaders
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
-      isEnvDevelopment && require.resolve("style-loader"),
+      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
-        options: paths.publicUrlOrPath.startsWith(".")
-          ? { publicPath: "../../" }
+        options: paths.publicUrlOrPath.startsWith('.')
+          ? { publicPath: '../../' }
          : {},
      },
      {
-        loader: require.resolve("css-loader"),
+        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
-        loader: require.resolve("postcss-loader"),
+        loader: require.resolve('postcss-loader'),
        options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
-            ident: "postcss",
+            ident: 'postcss',
            config: false,
            plugins: !useTailwind
              ? [
-                "postcss-flexbugs-fixes",
+                'postcss-flexbugs-fixes',
                [
-                  "postcss-preset-env",
+                  'postcss-preset-env',
                  {
                    autoprefixer: {
-                      flexbox: "no-2009",
+                      flexbox: 'no-2009',
                    },
                    stage: 3,
                  },
@ -144,16 +144,16 @@ module.exports = function (webpackEnv) {
                // Adds PostCSS Normalize as the reset css with default options,
                // so that it honors browserslist config in package.json
                // which in turn let's users customize the target behavior as per their needs.
-                "postcss-normalize",
+                'postcss-normalize',
              ]
              : [
-                "tailwindcss",
-                "postcss-flexbugs-fixes",
+                'tailwindcss',
+                'postcss-flexbugs-fixes',
                [
-                  "postcss-preset-env",
+                  'postcss-preset-env',
                  {
                    autoprefixer: {
-                      flexbox: "no-2009",
+                      flexbox: 'no-2009',
                    },
                    stage: 3,
                  },
@ -167,7 +167,7 @@ module.exports = function (webpackEnv) {
    if (preProcessor) {
      loaders.push(
        {
-          loader: require.resolve("resolve-url-loader"),
+          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            root: paths.appSrc,
@ -185,17 +185,17 @@ module.exports = function (webpackEnv) {
  };

  return {
-    target: ["browserslist"],
+    target: ['browserslist'],
    // Webpack noise constrained to errors and warnings
-    stats: "errors-warnings",
-    mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
+    stats: 'errors-warnings',
+    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    // Stop compilation early in production
    bail: isEnvProduction,
    devtool: isEnvProduction
      ? shouldUseSourceMap
-        ? "source-map"
+        ? 'source-map'
        : false
-      : isEnvDevelopment && "cheap-module-source-map",
+      : isEnvDevelopment && 'cheap-module-source-map',
    // These are the "entry points" to our application.
    // This means they will be the "root" imports that are included in JS bundle.
    entry: paths.appIndexJs,
@ -207,42 +207,41 @@ module.exports = function (webpackEnv) {
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: isEnvProduction
-        ? "static/js/[name].[contenthash:8].js"
-        : isEnvDevelopment && "static/js/bundle.js",
+        ? 'static/js/[name].[contenthash:8].js'
+        : isEnvDevelopment && 'static/js/bundle.js',
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: isEnvProduction
-        ? "static/js/[name].[contenthash:8].chunk.js"
-        : isEnvDevelopment && "static/js/[name].chunk.js",
-      assetModuleFilename: "static/media/[name].[hash][ext]",
+        ? 'static/js/[name].[contenthash:8].chunk.js'
+        : isEnvDevelopment && 'static/js/[name].chunk.js',
+      assetModuleFilename: 'static/media/[name].[hash][ext]',
      // webpack uses `publicPath` to determine where the app is being served from.
      // It requires a trailing slash, or the file assets will get an incorrect path.
      // We inferred the "public path" (such as / or /my-project) from homepage.
      publicPath: paths.publicUrlOrPath,
      // Point sourcemap entries to original disk location (format as URL on Windows)
      devtoolModuleFilenameTemplate: isEnvProduction
-        ? (info) =>
+        ? info =>
          path
            .relative(paths.appSrc, info.absoluteResourcePath)
-            .replace(/\\/g, "/")
+            .replace(/\\/g, '/')
        : isEnvDevelopment &&
-          ((info) =>
-            path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
+          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
    },
    cache: {
-      type: "filesystem",
+      type: 'filesystem',
      version: createEnvironmentHash(env.raw),
      cacheDirectory: paths.appWebpackCache,
-      store: "pack",
+      store: 'pack',
      buildDependencies: {
-        defaultWebpack: ["webpack/lib/"],
+        defaultWebpack: ['webpack/lib/'],
        config: [__filename],
-        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter((f) =>
+        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
          fs.existsSync(f)
        ),
      },
    },
    infrastructureLogging: {
-      level: "none",
+      level: 'none',
    },
    optimization: {
      minimize: isEnvProduction,
@ -313,16 +312,16 @@ module.exports = function (webpackEnv) {
      // `web` extension prefixes have been added for better support
      // for React Native Web.
      extensions: paths.moduleFileExtensions
-        .map((ext) => `.${ext}`)
-        .filter((ext) => useTypeScript || !ext.includes("ts")),
+        .map(ext => `.${ext}`)
+        .filter(ext => useTypeScript || !ext.includes('ts')),
      alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        "react-native": "react-native-web",
+        'react-native': 'react-native-web',
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
-          "react-dom$": "react-dom/profiling",
-          "scheduler/tracing": "scheduler/tracing-profiling",
+          'react-dom$': 'react-dom/profiling',
+          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
      },
@ -347,10 +346,10 @@ module.exports = function (webpackEnv) {
      rules: [
        // Handle node_modules packages that contain sourcemaps
        shouldUseSourceMap && {
-          enforce: "pre",
+          enforce: 'pre',
          exclude: /@babel(?:\/|\\{1,2})runtime/,
          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
-          loader: require.resolve("source-map-loader"),
+          loader: require.resolve('source-map-loader'),
        },
        {
          // "oneOf" will traverse all following loaders until one will
@ -361,8 +360,8 @@ module.exports = function (webpackEnv) {
            // https://github.com/jshttp/mime-db
            {
              test: [/\.avif$/],
-              type: "asset",
-              mimetype: "image/avif",
+              type: 'asset',
+              mimetype: 'image/avif',
              parser: {
                dataUrlCondition: {
                  maxSize: imageInlineSizeLimit,
@ -374,7 +373,7 @@ module.exports = function (webpackEnv) {
            // A missing `test` is equivalent to a match.
            {
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              type: "asset",
+              type: 'asset',
              parser: {
                dataUrlCondition: {
                  maxSize: imageInlineSizeLimit,
@ -385,7 +384,7 @@ module.exports = function (webpackEnv) {
              test: /\.svg$/,
              use: [
                {
-                  loader: require.resolve("@svgr/webpack"),
+                  loader: require.resolve('@svgr/webpack'),
                  options: {
                    prettier: false,
                    svgo: false,
@ -397,9 +396,9 @@ module.exports = function (webpackEnv) {
                  },
                },
                {
-                  loader: require.resolve("file-loader"),
+                  loader: require.resolve('file-loader'),
                  options: {
-                    name: "static/media/[name].[hash].[ext]",
+                    name: 'static/media/[name].[hash].[ext]',
                  },
                },
              ],
@ -412,16 +411,16 @@ module.exports = function (webpackEnv) {
            {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
-              loader: require.resolve("babel-loader"),
+              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
-                  "babel-preset-react-app/webpack-overrides"
+                  'babel-preset-react-app/webpack-overrides'
                ),
                presets: [
                  [
-                    require.resolve("babel-preset-react-app"),
+                    require.resolve('babel-preset-react-app'),
                    {
-                      runtime: hasJsxRuntime ? "automatic" : "classic",
+                      runtime: hasJsxRuntime ? 'automatic' : 'classic',
                    },
                  ],
                ],
@ -429,7 +428,7 @@ module.exports = function (webpackEnv) {
                plugins: [
                  isEnvDevelopment &&
                    shouldUseReactRefresh &&
-                    require.resolve("react-refresh/babel"),
+                    require.resolve('react-refresh/babel'),
                ].filter(Boolean),
                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
@ -445,14 +444,14 @@ module.exports = function (webpackEnv) {
            {
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
-              loader: require.resolve("babel-loader"),
+              loader: require.resolve('babel-loader'),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                presets: [
                  [
-                    require.resolve("babel-preset-react-app/dependencies"),
+                    require.resolve('babel-preset-react-app/dependencies'),
                    { helpers: true },
                  ],
                ],
@ -483,7 +482,7 @@ module.exports = function (webpackEnv) {
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
-                  mode: "icss",
+                  mode: 'icss',
                },
              }),
              // Don't consider CSS imports dead code even if the
@ -502,7 +501,7 @@ module.exports = function (webpackEnv) {
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
-                  mode: "local",
+                  mode: 'local',
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }),
@ -520,10 +519,10 @@ module.exports = function (webpackEnv) {
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
-                    mode: "icss",
+                    mode: 'icss',
                  },
                },
-                "sass-loader"
+                'sass-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
@ -542,11 +541,11 @@ module.exports = function (webpackEnv) {
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
-                    mode: "local",
+                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
-                "sass-loader"
+                'sass-loader'
              ),
            },
            // "file" loader makes sure those assets get served by WebpackDevServer.
@ -560,7 +559,7 @@ module.exports = function (webpackEnv) {
              // Also exclude `html` and `json` extensions so they get processed
              // by webpacks internal loaders.
              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              type: "asset/resource",
+              type: 'asset/resource',
            },
            // ** STOP ** Are you adding a new loader?
            // Make sure to add the new loader(s) before the "file" loader.
@ -634,8 +633,8 @@ module.exports = function (webpackEnv) {
        new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
-          filename: "static/css/[name].[contenthash:8].css",
-          chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
+          filename: 'static/css/[name].[contenthash:8].css',
+          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
        }),
      // Generate an asset manifest file with the following content:
      // - "files" key: Mapping of all asset filenames to their corresponding
@ -644,7 +643,7 @@ module.exports = function (webpackEnv) {
      // - "entrypoints" key: Array of files which are included in `index.html`,
      //   can be used to reconstruct the HTML if necessary
      new WebpackManifestPlugin({
-        fileName: "asset-manifest.json",
+        fileName: 'asset-manifest.json',
        publicPath: paths.publicUrlOrPath,
        generate: (seed, files, entrypoints) => {
          const manifestFiles = files.reduce((manifest, file) => {
@ -652,7 +651,7 @@ module.exports = function (webpackEnv) {
            return manifest;
          }, seed);
          const entrypointFiles = entrypoints.main.filter(
-            (fileName) => !fileName.endsWith(".map")
+            fileName => !fileName.endsWith('.map')
          );

          return {
@ -688,7 +687,7 @@ module.exports = function (webpackEnv) {
        new ForkTsCheckerWebpackPlugin({
          async: isEnvDevelopment,
          typescript: {
-            typescriptPath: resolve.sync("typescript", {
+            typescriptPath: resolve.sync('typescript', {
              basedir: paths.appNodeModules,
            }),
            configOverwrite: {
@ -708,7 +707,7 @@ module.exports = function (webpackEnv) {
            diagnosticOptions: {
              syntactic: true,
            },
-            mode: "write-references",
+            mode: 'write-references',
            // profile: true,
          },
          issue: {
@ -717,41 +716,41 @@ module.exports = function (webpackEnv) {
            // '../cra-template-typescript/template/src/App.tsx'
            // otherwise.
            include: [
-              { file: "../**/src/**/*.{ts,tsx}" },
-              { file: "**/src/**/*.{ts,tsx}" },
+              { file: '../**/src/**/*.{ts,tsx}' },
+              { file: '**/src/**/*.{ts,tsx}' },
            ],
            exclude: [
-              { file: "**/src/**/__tests__/**" },
-              { file: "**/src/**/?(*.){spec|test}.*" },
-              { file: "**/src/setupProxy.*" },
-              { file: "**/src/setupTests.*" },
+              { file: '**/src/**/__tests__/**' },
+              { file: '**/src/**/?(*.){spec|test}.*' },
+              { file: '**/src/setupProxy.*' },
+              { file: '**/src/setupTests.*' },
            ],
          },
          logger: {
-            infrastructure: "silent",
+            infrastructure: 'silent',
          },
        }),
      !disableESLintPlugin &&
        new ESLintPlugin({
          // Plugin options
-          extensions: ["js", "mjs", "jsx", "ts", "tsx"],
-          formatter: require.resolve("react-dev-utils/eslintFormatter"),
-          eslintPath: require.resolve("eslint"),
+          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+          formatter: require.resolve('react-dev-utils/eslintFormatter'),
+          eslintPath: require.resolve('eslint'),
          failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
          context: paths.appSrc,
          cache: true,
          cacheLocation: path.resolve(
            paths.appNodeModules,
-            ".cache/.eslintcache"
+            '.cache/.eslintcache'
          ),
          // ESLint class options
          cwd: paths.appPath,
          resolvePluginsRelativeTo: __dirname,
          baseConfig: {
-            extends: [require.resolve("eslint-config-react-app/base")],
+            extends: [require.resolve('eslint-config-react-app/base')],
            rules: {
              ...(!hasJsxRuntime && {
-                "react/react-in-jsx-scope": "error",
+                'react/react-in-jsx-scope': 'error',
              }),
            },
          },
--- a/package.json
+++ b/package.json
@ -23,17 +23,16 @@
    "crypto-browserify": "^3.12.0",
    "ethers": "5.7.2",
    "https-browserify": "^1.0.0",
-    "jwt-decode": "^4.0.0",
    "notistack": "^3.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
-    "react-pdf": "^9.1.0",
    "react-refresh": "^0.11.0",
    "react-router-dom": "^6.22.3",
    "resolve": "^1.20.0",
    "semver": "^7.3.5",
    "stream-browserify": "^3.0.0",
-    "tailwindcss": "^3.4.9",
+    "tailwind-variants": "^0.2.1",
+    "tailwindcss": "^3.4.8",
    "typescript": "^4.9.5"
  },
  "scripts": {
@ -66,10 +65,8 @@
    "@types/node": "^16.18.90",
    "@types/react": "^18.2.67",
    "@types/react-dom": "^18.2.22",
-    "@types/tailwindcss": "^3.1.0",
    "@typescript-eslint/eslint-plugin": "^6.13.2",
    "@typescript-eslint/parser": "^6.13.2",
-    "autoprefixer": "^10.4.20",
    "babel-jest": "^27.4.2",
    "babel-loader": "^8.2.3",
    "babel-plugin-named-asset-import": "^0.3.8",
@ -94,7 +91,7 @@
    "jest-resolve": "^27.4.2",
    "jest-watch-typeahead": "^1.0.0",
    "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.4",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-loader": "^6.2.1",
    "postcss-normalize": "^10.0.1",
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
--- a/public/TermsAndConditions.pdf
+++ b/public/TermsAndConditions.pdf
--- a/public/img/logo.svg
+++ b/public/img/logo.svg
@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="116" height="20" viewBox="0 0 116 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.41155 10.5194C5.76482 8.19185 7.22144 4.97748 7.22079 1.42853C7.22166 0.94681 7.19477 0.470456 7.14132 0L0 0.000643078L0.000216722 13.5723C-0.0004338 15.2174 0.633716 16.863 1.90213 18.1175C3.17064 19.3721 4.83555 20.0001 6.49904 19.9993L6.49861 19.9997L20.2204 20L20.2199 12.9355C19.7453 12.8838 19.2637 12.857 18.7756 12.8569C15.1884 12.8574 11.9385 14.298 9.58522 16.6255C7.87283 18.2768 5.12731 18.2771 3.43606 16.6043C1.74589 14.9325 1.74513 12.2161 3.41155 10.5194ZM18.7392 1.46863C16.767 -0.481929 13.5629 -0.48268 11.5901 1.46863C9.61732 3.41984 9.61808 6.58895 11.5901 8.53941C13.5633 10.491 16.7663 10.4907 18.7392 8.53941C20.712 6.5882 20.7123 3.42016 18.7392 1.46863Z" fill="#0F0F0F"/>
+  <path d="M31.8223 18.5836H39.6891V16.33H34.4518V1.41333H31.8223V18.5836Z" fill="#0F0F0F"/>
+  <path d="M50.3602 1.41333H45.9994L41.4414 18.5836H44.1586L45.2981 14.2911H50.9299L52.0694 18.5836H54.9182L50.3602 1.41333ZM45.846 12.1448L48.125 3.25912H48.2126L50.404 12.1448H45.846Z" fill="#0F0F0F"/>
+  <path d="M63.6228 8.06818H66.6907C66.6907 3.17467 65.091 1.07129 61.3657 1.07129C57.4432 1.07129 55.7559 3.73274 55.7559 9.97842C55.7559 16.2456 57.4432 18.9284 61.3657 18.9284C65.091 18.9284 66.6907 16.8894 66.7126 12.1461H63.6447C63.6228 15.8593 63.1626 16.7822 61.3657 16.7822C59.3059 16.7822 58.8018 15.43 58.8237 9.97842C58.8237 4.54829 59.3278 3.19611 61.3657 3.21756C63.1626 3.21756 63.6228 4.18346 63.6228 8.06818Z" fill="#0F0F0F"/>
+  <path d="M74.5924 1.07142C78.5807 1.09297 80.2899 3.77576 80.2899 10C80.2899 16.2242 78.5807 18.9071 74.5924 18.9286C70.5823 18.95 68.873 16.2671 68.873 10C68.873 3.73286 70.5823 1.04997 74.5924 1.07142ZM71.9409 10C71.9409 15.4301 72.4669 16.7823 74.5924 16.7823C76.6961 16.7823 77.2221 15.4301 77.2221 10C77.2221 4.54841 76.6961 3.19624 74.5924 3.2178C72.4669 3.23924 71.9409 4.59142 71.9409 10Z" fill="#0F0F0F"/>
+  <path d="M86.0202 18.5622L83.3906 18.5836V1.41333H88.0144L92.3314 15.4071H92.3752V1.41333H95.0043V18.5836H90.666L86.0642 3.51671H86.0202V18.5622Z" fill="#0F0F0F"/>
+  <path d="M101.576 1.41333H98.9473V18.5836H101.576V1.41333Z" fill="#0F0F0F"/>
+  <path d="M112.365 8.06818H115.433C115.433 3.17467 113.833 1.07129 110.108 1.07129C106.186 1.07129 104.498 3.73274 104.498 9.97842C104.498 16.2456 106.186 18.9284 110.108 18.9284C113.833 18.9284 115.433 16.8894 115.455 12.1461H112.387C112.365 15.8593 111.905 16.7822 110.108 16.7822C108.048 16.7822 107.545 15.43 107.566 9.97842C107.566 4.54829 108.07 3.19611 110.108 3.21756C111.905 3.21756 112.365 4.18346 112.365 8.06818Z" fill="#0F0F0F"/>
+</svg>
--- a/public/img/logomark.svg
+++ b/public/img/logomark.svg
@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M2.6996 8.91554C4.56166 7.05349 5.71417 4.482 5.71371 1.6428C5.71446 1.25743 5.69309 0.876343 5.6508 0.5L0 0.500514L0.000228446 11.3578C-0.00028584 12.6739 0.501486 13.9904 1.5052 14.9941C2.50886 15.9977 3.82634 16.5001 5.14257 16.4994L5.14229 16.4997L16 16.5L15.9997 10.8485C15.6241 10.807 15.243 10.7857 14.8568 10.7856C12.0183 10.7859 9.44674 11.9385 7.58469 13.8005C6.22971 15.1214 4.0572 15.1217 2.71897 13.7835C1.38149 12.4461 1.38097 10.2729 2.6996 8.91554ZM14.8279 1.67491C13.2675 0.114457 10.7321 0.113886 9.17109 1.67491C7.61006 3.23589 7.61063 5.77114 9.17109 7.33154C10.7324 8.8928 13.2669 8.89257 14.8279 7.33154C16.389 5.77057 16.3893 3.23611 14.8279 1.67491Z" fill="#0F0F0F"/>
+</g>
+</svg>
--- a/public/index.html
+++ b/public/index.html
@ -5,10 +5,7 @@
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Testnet Onboarding App"
-    />
+    <meta name="description" content="Testnet Onboarding App" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
@ -24,51 +21,24 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      crossorigin="anonymous"
+      rel="preload"
+      href="https://laconic.com/fonts/tt-hoves/TTHoves-Regular.woff2"
+      as="font"
+    />
    <title>Testnet Onboarding App</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-        height: 100%;
-      }
-  
-      .loader-wrapper {
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
-        display: grid;
-        place-items: center;
-      }
-  
-      .loader {
-        border: 16px solid #e3e3e3;
-        border-top: 16px solid #1976d2;
-        border-radius: 50%;
-        width: 140px;
-        height: 140px;
-        animation: spin 1s linear infinite;
-      }
-  
-      @keyframes spin {
-        0% {
-          transform: rotate(0deg);
-        }
-  
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root">
-      <div class="loader-wrapper">
-        <div class="loader"></div>
-      </div>
-    </div>
+    <div id="root" class="flex flex-col h-screen"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
--- a/public/laconic_logo.svg
+++ b/public/laconic_logo.svg
@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.04924 12.6164C6.84238 9.85387 8.57128 6.03867 8.57051 1.82634C8.57154 1.25458 8.53962 0.689188 8.47618 0.130795L0 0.131558L0.000257231 16.2401C-0.000514887 18.1926 0.75217 20.1458 2.25767 21.6349C3.7633 23.124 5.73941 23.8693 7.71384 23.8683L7.71333 23.8688L24 23.8692L23.9994 15.4843C23.4361 15.4228 22.8645 15.3911 22.2851 15.391C18.0274 15.3915 14.17 17.1014 11.3769 19.864C9.34443 21.8239 6.08571 21.8243 4.07833 19.8388C2.07224 17.8545 2.07133 14.6303 4.04924 12.6164ZM22.2419 1.87395C19.9011 -0.441217 16.0981 -0.442108 13.7566 1.87395C11.415 4.18987 11.4159 7.95136 13.7566 10.2664C16.0985 12.5828 19.9003 12.5825 22.2419 10.2664C24.5835 7.95047 24.5838 4.19026 22.2419 1.87395Z" fill="#FBFBFB"/>
-</svg>
--- a/public/laconic_logo_with_text.svg
+++ b/public/laconic_logo_with_text.svg
@ -1,10 +0,0 @@
-<svg width="117" height="21" viewBox="0 0 117 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.22282 11.0194C6.57609 8.69185 8.03272 5.47748 8.03206 1.92852C8.03293 1.44681 8.00604 0.970455 7.95259 0.499999L0.811272 0.500642L0.811488 14.0723C0.810838 15.7174 1.44499 17.3629 2.7134 18.6175C3.98191 19.8721 5.64682 20.5001 7.31031 20.4992L7.30988 20.4997L21.0317 20.5L21.0311 13.4355C20.5566 13.3838 20.075 13.357 19.5869 13.3569C15.9997 13.3574 12.7498 14.798 10.3965 17.1255C8.6841 18.7768 5.93858 18.7771 4.24733 17.1043C2.55716 15.4325 2.5564 12.7161 4.22282 11.0194ZM19.5504 1.96863C17.5783 0.0180696 14.3742 0.017319 12.4014 1.96863C10.4286 3.91984 10.4293 7.08895 12.4014 9.03941C14.3745 10.991 17.5776 10.9907 19.5504 9.03941C21.5232 7.0882 21.5236 3.92016 19.5504 1.96863Z" fill="#FBFBFB"/>
-<path d="M32.6326 19.0836H40.4995V16.83H35.2622V1.91329H32.6326V19.0836Z" fill="#FBFBFB"/>
-<path d="M51.1715 1.91329H46.8108L42.2528 19.0836H44.97L46.1095 14.791H51.7413L52.8808 19.0836H55.7295L51.1715 1.91329ZM46.6574 12.6448L48.9363 3.75909H49.024L51.2153 12.6448H46.6574Z" fill="#FBFBFB"/>
-<path d="M64.4348 8.56823H67.5027C67.5027 3.67471 65.903 1.57134 62.1777 1.57134C58.2552 1.57134 56.5679 4.23278 56.5679 10.4785C56.5679 16.7456 58.2552 19.4285 62.1777 19.4285C65.903 19.4285 67.5027 17.3895 67.5246 12.6462H64.4567C64.4348 16.3593 63.9746 17.2822 62.1777 17.2822C60.1179 17.2822 59.6138 15.93 59.6357 10.4785C59.6357 5.04833 60.1398 3.69616 62.1777 3.71761C63.9746 3.71761 64.4348 4.68351 64.4348 8.56823Z" fill="#FBFBFB"/>
-<path d="M75.4027 1.57146C79.391 1.59302 81.1002 4.27581 81.1002 10.5C81.1002 16.7243 79.391 19.4072 75.4027 19.4286C71.3926 19.4501 69.6833 16.7672 69.6833 10.5C69.6833 4.23291 71.3926 1.55002 75.4027 1.57146ZM72.7512 10.5C72.7512 15.9302 73.2772 17.2823 75.4027 17.2823C77.5064 17.2823 78.0324 15.9302 78.0324 10.5C78.0324 5.04846 77.5064 3.69629 75.4027 3.71784C73.2772 3.73929 72.7512 5.09146 72.7512 10.5Z" fill="#FBFBFB"/>
-<path d="M86.8315 19.0621L84.2019 19.0836V1.91329H88.8257L93.1427 15.9071H93.1865V1.91329H95.8156V19.0836H91.4773L86.8755 4.01667H86.8315V19.0621Z" fill="#FBFBFB"/>
-<path d="M102.387 1.91329H99.7577V19.0836H102.387V1.91329Z" fill="#FBFBFB"/>
-<path d="M113.176 8.56823H116.244C116.244 3.67471 114.644 1.57134 110.919 1.57134C106.997 1.57134 105.309 4.23278 105.309 10.4785C105.309 16.7456 106.997 19.4285 110.919 19.4285C114.644 19.4285 116.244 17.3895 116.266 12.6462H113.198C113.176 16.3593 112.716 17.2822 110.919 17.2822C108.859 17.2822 108.355 15.93 108.377 10.4785C108.377 5.04833 108.881 3.69616 110.919 3.71761C112.716 3.71761 113.176 4.68351 113.176 8.56823Z" fill="#FBFBFB"/>
-</svg>
--- a/public/pdf.worker.min.mjs
+++ b/public/pdf.worker.min.mjs
--- a/src/App.css
+++ b/src/App.css
@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -11,11 +11,6 @@ import UserVerification from "./pages/UserVerification";
 import TermsAndConditions from "./pages/TermsAndConditions";
 import Header from "./components/Header";
 import { WalletConnectProvider } from "./context/WalletConnectContext";
-import VerifyEmail from "./pages/VerifyEmail";
-import Email from "./pages/Email";
-import Thanks from "./pages/Thanks";
-
-import "./App.css";

 function App() {
  return (
@ -24,10 +19,7 @@ function App() {
      <WalletConnectProvider>
        <Routes>
          <Route path="/" element={<TermsAndConditions />} />
-          <Route path="/verify-email" element={<VerifyEmail />} />
-          <Route path="/email" element={<Email />} />
          <Route path="/connect-wallet" element={<ConnectWallet />} />
-          <Route path="/thanks" element={<Thanks />} />
          <Route element={<SignPageLayout />}>
            <Route path="/sign-with-nitro-key" element={<SignWithNitroKey />} />
            <Route path="/user-verification" element={<UserVerification />} />
--- a/src/components/CustomIcon/CustomIcon.tsx
+++ b/src/components/CustomIcon/CustomIcon.tsx
@ -1,30 +0,0 @@
-import React, { ComponentPropsWithoutRef } from "react";
-
-export interface CustomIconProps extends ComponentPropsWithoutRef<"svg"> {
-  size?: number | string; // width and height will both be set as the same value
-  name?: string;
-}
-
-export const CustomIcon: React.FC<CustomIconProps> = ({
-  children,
-  width = 24,
-  height = 24,
-  size,
-  viewBox = "0 0 24 24",
-  name,
-  ...rest
-}: CustomIconProps) => {
-  return (
-    <svg
-      aria-labelledby={name}
-      height={size || height}
-      role="presentation"
-      viewBox={viewBox}
-      width={size || width}
-      xmlns="http://www.w3.org/2000/svg"
-      {...rest}
-    >
-      {children}
-    </svg>
-  );
-};
--- a/src/components/CustomIcon/README.md
+++ b/src/components/CustomIcon/README.md
@ -1,78 +0,0 @@
-# CustomIcon
-
-`CustomIcon` is a flexible and reusable React component for rendering SVG icons. It allows for easy customization of size, color, and other SVG properties.
-
- Viewbox "0 0 24 24": From where you're exporting from, please make sure the icon is using viewBox="0 0 24 24" before downloading/exporting. Not doing so will result in incorrect icon scaling
-
-## Create a Custom Icon
-
-1. Duplicate a current icon e.g. `LaconicIcon` and rename it accordingly.
-2. Rename the function inside the new file you duplicated too
-3. Replace the markup with your SVG markup (make sure it complies with the above section's rule)
-4. Depending on the svg you pasted...
-   A. If the `<svg>` has only 1 child, remove the `<svg>` parent entirely so you only have the path left
-   B. If your component has more than 1 paths, rename `<svg>` tag with the `<g>` tag. Then, remove all attributes of this `<g>` tag so that it's just `<g>`
-5. Usually, icons are single colored. If that's the case, replace all fill/stroke color with `currentColor`. E.g. `<path d="..." fill="currentColor">`. Leave the other attributes without removing them.
-6. If your icon has more than one color, then it's up to you to decide whether we want to use tailwind to help set the fill and stroke colors
-7. Lastly, export your icon in `index.ts` by following what was done for `LaconicIcon`
-8. Make sure to provide a `name` for the `<CustomIcon>` component for accessibility
-9. Done!
-
-Example:
-
-```tsx
-import { CustomIcon, CustomIconProps } from "../CustomIcon";
-
-export const LaconicIcon = (props: CustomIconProps) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      {...props}
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M4.04924 12.6164C6.84238 9.85387 8.57128 6.03867 8.57051 1.82634C8.57154 1.25458 8.53962 0.689188 8.47618 0.130795L0 0.131558L0.000257231 16.2401C-0.000514887 18.1926 0.75217 20.1458 2.25767 21.6349C3.7633 23.124 5.73941 23.8693 7.71384 23.8683L7.71333 23.8688L24 23.8692L23.9994 15.4843C23.4361 15.4228 22.8645 15.3911 22.2851 15.391C18.0274 15.3915 14.17 17.1014 11.3769 19.864C9.34443 21.8239 6.08571 21.8243 4.07833 19.8388C2.07224 17.8545 2.07133 14.6303 4.04924 12.6164ZM22.2419 1.87395C19.9011 -0.441217 16.0981 -0.442108 13.7566 1.87395C11.415 4.18987 11.4159 7.95136 13.7566 10.2664C16.0985 12.5828 19.9003 12.5825 22.2419 10.2664C24.5835 7.95047 24.5838 4.19026 22.2419 1.87395Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};
-```
-
-## Usage
-
-```tsx
-import { LaconicIcon } from './components/CustomIcon';
-
-...
-
-<LaconicIcon size={32} />
-```
-
-## Props
-
-The `CustomIcon` component accepts the following props:
-
- `children`: SVG content (paths, groups, etc.)
- `size`: Sets both width and height (number or string)
- `width`: SVG width (default: 24)
- `height`: SVG height (default: 24)
- `viewBox`: SVG viewBox (default: "0 0 24 24")
- `name`: Icon name for accessibility (sets aria-labelledby)
- ...other SVG props
-
-## Accessibility
-
-Always provide a `name` prop to the CustomIcon for improved accessibility. This sets the `aria-labelledby` attribute on the SVG.
-
-```tsx
-<CustomIcon name="laconic-logo-icon">
-  {/* SVG content */}
-</CustomIcon>
-```
-
-For icons that are purely decorative, the component sets `role="presentation"` by default.
--- a/src/components/CustomIcon/icons/LaconicIcon.tsx
+++ b/src/components/CustomIcon/icons/LaconicIcon.tsx
@ -1,23 +0,0 @@
-import React from "react";
-
-import { CustomIcon, CustomIconProps } from "../CustomIcon";
-
-export const LaconicIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      name="laconic-logo-icon"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.04924 12.6164C6.84238 9.85387 8.57128 6.03867 8.57051 1.82634C8.57154 1.25458 8.53962 0.689188 8.47618 0.130795L0 0.131558L0.000257231 16.2401C-0.000514887 18.1926 0.75217 20.1458 2.25767 21.6349C3.7633 23.124 5.73941 23.8693 7.71384 23.8683L7.71333 23.8688L24 23.8692L23.9994 15.4843C23.4361 15.4228 22.8645 15.3911 22.2851 15.391C18.0274 15.3915 14.17 17.1014 11.3769 19.864C9.34443 21.8239 6.08571 21.8243 4.07833 19.8388C2.07224 17.8545 2.07133 14.6303 4.04924 12.6164ZM22.2419 1.87395C19.9011 -0.441217 16.0981 -0.442108 13.7566 1.87395C11.415 4.18987 11.4159 7.95136 13.7566 10.2664C16.0985 12.5828 19.9003 12.5825 22.2419 10.2664C24.5835 7.95047 24.5838 4.19026 22.2419 1.87395Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};
--- a/src/components/CustomIcon/icons/LaconicWithTextIcon.tsx
+++ b/src/components/CustomIcon/icons/LaconicWithTextIcon.tsx
@ -1,50 +0,0 @@
-import React from "react";
-
-import { CustomIcon, CustomIconProps } from "../CustomIcon";
-
-export const LaconicWithTextIcon: React.FC<CustomIconProps> = (props) => {
-  return (
-    <CustomIcon
-      width="117"
-      height="21"
-      viewBox="0 0 117 21"
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M4.22282 11.0194C6.57609 8.69185 8.03272 5.47748 8.03206 1.92852C8.03293 1.44681 8.00604 0.970455 7.95259 0.499999L0.811272 0.500642L0.811488 14.0723C0.810838 15.7174 1.44499 17.3629 2.7134 18.6175C3.98191 19.8721 5.64682 20.5001 7.31031 20.4992L7.30988 20.4997L21.0317 20.5L21.0311 13.4355C20.5566 13.3838 20.075 13.357 19.5869 13.3569C15.9997 13.3574 12.7498 14.798 10.3965 17.1255C8.6841 18.7768 5.93858 18.7771 4.24733 17.1043C2.55716 15.4325 2.5564 12.7161 4.22282 11.0194ZM19.5504 1.96863C17.5783 0.0180696 14.3742 0.017319 12.4014 1.96863C10.4286 3.91984 10.4293 7.08895 12.4014 9.03941C14.3745 10.991 17.5776 10.9907 19.5504 9.03941C21.5232 7.0882 21.5236 3.92016 19.5504 1.96863Z"
-        fill="currentColor"
-      />
-      <path
-        d="M32.6326 19.0836H40.4995V16.83H35.2622V1.91329H32.6326V19.0836Z"
-        fill="currentColor"
-      />
-      <path
-        d="M51.1715 1.91329H46.8108L42.2528 19.0836H44.97L46.1095 14.791H51.7413L52.8808 19.0836H55.7295L51.1715 1.91329ZM46.6574 12.6448L48.9363 3.75909H49.024L51.2153 12.6448H46.6574Z"
-        fill="currentColor"
-      />
-      <path
-        d="M64.4348 8.56823H67.5027C67.5027 3.67471 65.903 1.57134 62.1777 1.57134C58.2552 1.57134 56.5679 4.23278 56.5679 10.4785C56.5679 16.7456 58.2552 19.4285 62.1777 19.4285C65.903 19.4285 67.5027 17.3895 67.5246 12.6462H64.4567C64.4348 16.3593 63.9746 17.2822 62.1777 17.2822C60.1179 17.2822 59.6138 15.93 59.6357 10.4785C59.6357 5.04833 60.1398 3.69616 62.1777 3.71761C63.9746 3.71761 64.4348 4.68351 64.4348 8.56823Z"
-        fill="currentColor"
-      />
-      <path
-        d="M75.4027 1.57146C79.391 1.59302 81.1002 4.27581 81.1002 10.5C81.1002 16.7243 79.391 19.4072 75.4027 19.4286C71.3926 19.4501 69.6833 16.7672 69.6833 10.5C69.6833 4.23291 71.3926 1.55002 75.4027 1.57146ZM72.7512 10.5C72.7512 15.9302 73.2772 17.2823 75.4027 17.2823C77.5064 17.2823 78.0324 15.9302 78.0324 10.5C78.0324 5.04846 77.5064 3.69629 75.4027 3.71784C73.2772 3.73929 72.7512 5.09146 72.7512 10.5Z"
-        fill="currentColor"
-      />
-      <path
-        d="M86.8315 19.0621L84.2019 19.0836V1.91329H88.8257L93.1427 15.9071H93.1865V1.91329H95.8156V19.0836H91.4773L86.8755 4.01667H86.8315V19.0621Z"
-        fill="currentColor"
-      />
-      <path
-        d="M102.387 1.91329H99.7577V19.0836H102.387V1.91329Z"
-        fill="currentColor"
-      />
-      <path
-        d="M113.176 8.56823H116.244C116.244 3.67471 114.644 1.57134 110.919 1.57134C106.997 1.57134 105.309 4.23278 105.309 10.4785C105.309 16.7456 106.997 19.4285 110.919 19.4285C114.644 19.4285 116.244 17.3895 116.266 12.6462H113.198C113.176 16.3593 112.716 17.2822 110.919 17.2822C108.859 17.2822 108.355 15.93 108.377 10.4785C108.377 5.04833 108.881 3.69616 110.919 3.71761C112.716 3.71761 113.176 4.68351 113.176 8.56823Z"
-        fill="currentColor"
-      />
-    </CustomIcon>
-  );
-};
--- a/src/components/CustomIcon/index.ts
+++ b/src/components/CustomIcon/index.ts
@ -1,2 +0,0 @@
-export { LaconicIcon } from "./icons/LaconicIcon";
-export { LaconicWithTextIcon } from "./icons/LaconicWithTextIcon";
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -1,32 +1,25 @@
-import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import React from "react";
+import { Link, useLocation } from "react-router-dom";

-import { AppBar, Toolbar, Avatar, Box, IconButton } from '@mui/material';
+import { BodyText } from "./ui/BodyText";

 const Header: React.FC = () => {
-  const location = useLocation()
+  const location = useLocation();

  return (
-    <AppBar position="static" color="inherit">
-      <Toolbar>
-        <Link to={location.pathname === "/" ? "/" : "/connect-wallet"} style={{ color: "inherit", textDecoration: "none" }}>
-          <Box sx={{ display: "flex", alignItems: "center" }}>
-            <Avatar
-              alt="Laconic logo"
-              src="https://avatars.githubusercontent.com/u/92608123"
-            />
-            <IconButton
-              edge="start"
-              color="inherit"
-              aria-label="menu"
-              sx={{ ml: 2, mr: 2 }}
-            >
-              Testnet Onboarding
-            </IconButton>
-          </Box>
-        </Link>
-      </Toolbar>
-    </AppBar>
+    <div className="px-6 py-2.5 bg-neutral-10">
+      <Link
+        to={location.pathname === "/" ? "/" : "/connect-wallet"}
+        style={{ color: "inherit", textDecoration: "none" }}
+      >
+        <div className="flex items-center gap-3">
+          <img alt="Laconic logomark" className="h-5 md:hidden" src="/img/logomark.svg" />
+          <img alt="Laconic logo" className="h-5 hidden md:block" src="/img/logo.svg" />
+          <div className="border-l border-black h-5"></div>
+          <BodyText>Testnet Onboarding</BodyText>
+        </div>
+      </Link>
+    </div>
  );
 };

--- a/src/components/SelectRoleCard.tsx
+++ b/src/components/SelectRoleCard.tsx
@ -1,83 +0,0 @@
-import React, { useState } from 'react';
-
-import { Typography, Button, Box, Paper, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, Link, Checkbox } from '@mui/material';
-
-import TermsAndConditionsDialog from './TermsAndConditionsDialog';
-
-export enum Role {
-  Validator = 'validator',
-  Participant = 'participant'
-}
-
-const SelectRoleCard = ({ handleAccept, handleRoleChange }: { handleAccept: () => void, handleRoleChange: (role: Role) => void }) => {
-  const [selectedRole, setSelectedRole] = useState<Role>(Role.Participant);
-  const [checked, setChecked] = useState(false);
-  const [isHidden, setIsHidden] = useState(false);
-
-  const [isDialogOpen, setisDialogOpen] = useState(false)
-
-  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setChecked(event.target.checked);
-  };
-
-  const handleContinue = () => {
-    handleAccept()
-    setIsHidden(true)
-  }
-
-  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedRole(event.target.value as Role);
-    handleRoleChange((event.target as HTMLInputElement).value === Role.Validator ? Role.Validator : Role.Participant);
-    setChecked(false);
-  };
-
-  return (
-    <Paper elevation={3} sx={{ padding: 2, marginTop: 2, display: isHidden ? "none" : "block", marginBottom: 3 }} >
-      <FormControl component="fieldset">
-        <FormLabel component="legend">Select your role</FormLabel>
-        <RadioGroup
-          aria-label="roles"
-          name="roles"
-          value={selectedRole}
-          onChange={handleRadioChange}
-        >
-          <FormControlLabel
-            value={Role.Validator}
-            control={<Radio />}
-            label="Validator"
-          />
-          <FormControlLabel
-            value={Role.Participant}
-            control={<Radio />}
-            label="Participant"
-          />
-        </RadioGroup>
-      </FormControl>
-      <Box mt={2} display="flex" alignItems="center">
-        <Checkbox
-          checked={checked}
-          onChange={handleCheckboxChange}
-          color="primary"
-        />
-        <Typography variant="body1">
-          I accept the <Link onClick={() => setisDialogOpen(true)} target="_blank" rel="noopener">
-            terms and conditions
-          </Link>
-        </Typography>
-      </Box>
-      <Box mt={4} display="flex" justifyContent="end">
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={handleContinue}
-          disabled={!checked}
-        >
-          Continue
-        </Button>
-      </Box>
-      <TermsAndConditionsDialog open={isDialogOpen} onClose={() => setisDialogOpen(false)}/>
-    </Paper>
-  );
-};
-
-export default SelectRoleCard;
--- a/src/components/TermsAndConditionsBox.tsx
+++ b/src/components/TermsAndConditionsBox.tsx
@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import { Document, Page, pdfjs } from 'react-pdf';
-
-import { Typography } from '@mui/material';
-
-// https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#copy-worker-to-public-directory
-pdfjs.GlobalWorkerOptions.workerSrc = process.env.PUBLIC_URL + '/pdf.worker.min.mjs'
-
-const TermsAndConditionsBox = ({height}: {height: string}) => {
-  const [numPages, setNumPages] = useState<number>();
-
-  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
-    setNumPages(numPages);
-  }
-
-  return (
-    <>
-      <Typography variant='h4' textAlign="center" gutterBottom>
-        Terms and Conditions
-      </Typography>
-      <div
-        style={{
-          height: height,
-          overflowY: 'auto',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center'
-        }}
-      >
-        <Document
-          file={process.env.PUBLIC_URL + '/TermsAndConditions.pdf'}
-          onLoadSuccess={onDocumentLoadSuccess}
-        >
-          {Array.apply(null, Array(numPages))
-            .map((x, i) => i + 1)
-            .map((page) => {
-              return (
-                <Page
-                  key={page}
-                  pageNumber={page}
-                  renderTextLayer={false}
-                  renderAnnotationLayer={false}
-                  width={1070}
-                />
-              );
-            })}
-        </Document>
-      </div>
-    </>
-  );
-};
-
-export default TermsAndConditionsBox;
--- a/src/components/TermsAndConditionsCard.tsx
+++ b/src/components/TermsAndConditionsCard.tsx
@ -0,0 +1,102 @@
+import React, { useState } from "react";
+
+import TermsAndConditionsDialog from "./TermsAndConditionsDialog";
+import { Card } from "./ui/Card";
+import { Button } from "./ui/Button";
+
+export enum Role {
+  Validator = "validator",
+  Participant = "participant",
+}
+
+type Props = {
+  className?: string;
+  handleAccept: () => void;
+  handleRoleChange: (role: Role) => void;
+};
+
+const TermsAndConditionsCard = ({ className, handleAccept, handleRoleChange }: Props) => {
+  const [selectedRole, setSelectedRole] = useState<Role>(Role.Participant);
+  const [checked, setChecked] = useState(false);
+
+  const [isDialogOpen, setisDialogOpen] = useState(false);
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+
+  const handleContinue = () => {
+    handleAccept();
+  };
+
+  const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedRole(event.target.value as Role);
+    handleRoleChange(
+      (event.target as HTMLInputElement).value === Role.Validator
+        ? Role.Validator
+        : Role.Participant,
+    );
+    setChecked(false);
+  };
+
+  return (
+    <Card className={`body-2 ${className || ""}`}>
+      <div>
+        <label className="block text-sm">Select your role</label>
+        <fieldset className="mt-2 flex flex-col">
+          <label className="inline-flex items-center">
+            <input
+              type="radio"
+              className="h-4 w-4 border-gray-300 text-primary-60 focus:primary-30"
+              value={Role.Validator}
+              checked={selectedRole === Role.Validator}
+              onChange={handleRadioChange}
+            />
+            <span className="ml-2">Validator</span>
+          </label>
+          <label className="inline-flex items-center">
+            <input
+              type="radio"
+              className="h-4 w-4 border-gray-300 text-primary-60 focus:primary-30"
+              value={Role.Participant}
+              checked={selectedRole === Role.Participant}
+              onChange={handleRadioChange}
+            />
+            <span className="ml-2">Participant</span>
+          </label>
+        </fieldset>
+      </div>
+      <fieldset className="flex items-center">
+        <input
+          id="toc-check"
+          type="checkbox"
+          className="form-checkbox"
+          checked={checked}
+          onChange={handleCheckboxChange}
+        />
+        <label htmlFor="toc-check" className="ml-2">
+          I accept the{" "}
+          <button
+            className="underline"
+            onClick={() => {
+              setisDialogOpen(true);
+            }}
+            rel="noopener noreferrer"
+          >
+            Terms &amp; Conditions
+          </button>
+        </label>
+      </fieldset>
+      <Button size="lg" className={`py-2 md:self-end`} onClick={handleContinue} disabled={!checked}>
+        Continue
+      </Button>
+      <TermsAndConditionsDialog
+        isValidator={selectedRole === Role.Validator}
+        open={isDialogOpen}
+        onClose={() => setisDialogOpen(false)}
+      />
+    </Card>
+  );
+};
+
+export default TermsAndConditionsCard;
--- a/src/components/TermsAndConditionsDialog.tsx
+++ b/src/components/TermsAndConditionsDialog.tsx
@ -1,22 +1,41 @@
-import React from 'react';
+import React from "react";

-import { Button, Dialog, DialogActions, DialogContent } from '@mui/material';
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";

-import TermsAndConditionsBox from './TermsAndConditionsBox';
+import { TNC_PARTICIPANT_CONTENT, TNC_VALIDATOR_CONTENT } from "../constants";
+import { Button } from "./ui/Button";

 interface TermsDialogProps {
+  isValidator: boolean;
  open: boolean;
  onClose: () => void;
 }

-const TermsAndConditionsDialog: React.FC<TermsDialogProps> = ({ open, onClose }) => {
+const TermsAndConditionsDialog: React.FC<TermsDialogProps> = ({ isValidator, open, onClose }) => {
  return (
-    <Dialog open={open} onClose={onClose} maxWidth="lg">
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>
+        <h3>Terms and Conditions</h3>
+      </DialogTitle>
      <DialogContent>
-        <TermsAndConditionsBox height='65vh' />
+        <h5 className="mb-4">Onboard as a {isValidator ? "validator" : "participant"}</h5>
+
+        <DialogContentText>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: isValidator ? TNC_VALIDATOR_CONTENT : TNC_PARTICIPANT_CONTENT,
+            }}
+          />
+        </DialogContentText>
      </DialogContent>
      <DialogActions>
-        <Button onClick={onClose} color="primary">
+        <Button onClick={onClose} className="px-3 py-1">
          Close
        </Button>
      </DialogActions>
@ -24,4 +43,4 @@ const TermsAndConditionsDialog: React.FC<TermsDialogProps> = ({ open, onClose })
  );
 };

-export default TermsAndConditionsDialog;
+export default TermsAndConditionsDialog;
--- a/src/components/ui/BodyText.tsx
+++ b/src/components/ui/BodyText.tsx
@ -0,0 +1,10 @@
+import React from "react";
+
+type Props = {
+  sizing?: 1 | 2 | 3;
+  className?: string;
+};
+
+export const BodyText = ({ sizing = 1, className, children }: React.PropsWithChildren<Props>) => {
+  return <div className={`body-${sizing} ${className}`}>{children}</div>;
+};
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@ -0,0 +1,100 @@
+import type { ComponentPropsWithoutRef } from "react";
+import React, { forwardRef } from "react";
+import { tv, VariantProps } from "tailwind-variants";
+
+type Props = {
+  loading?: boolean;
+  className?: string;
+} & ButtonTheme &
+  ComponentPropsWithoutRef<"button">;
+
+export const Button = forwardRef<HTMLButtonElement, Props>(
+  ({ loading, className, children, variant = "primary", size = "md", ...props }, ref) => {
+    return (
+      <button {...props} ref={ref} className={buttonTheme({ variant, size, className })}>
+        <span className={loading ? "invisible" : ""}>{children}</span>
+        {loading && (
+          <svg
+            aria-hidden="true"
+            className="w-4 h-4 text-primary-40 animate-spin fill-primary-20 absolute top-1/2 left-1/2 -mt-2 -ml-1.5"
+            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>
+        )}
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+/**
+ * Defines the theme for a button component.
+ */
+export const buttonTheme = tv({
+  base: [
+    "relative",
+    "h-fit",
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "whitespace-nowrap",
+    "focus-ring",
+    "disabled:cursor-not-allowed",
+    "transition-colors",
+    "duration-150",
+    "font-mono",
+    "rounded",
+    "antialiased",
+    "uppercase",
+  ],
+  variants: {
+    size: {
+      lg: ["px-6", "py-2.5", "text-[18px]"],
+      md: ["px-4", "py-2", "text-[16px]"],
+      sm: ["px-3", "py-1", "text-[16px]"],
+    },
+    variant: {
+      primary: [
+        "text-cream",
+        "bg-primary-60",
+        "hover:bg-primary-50",
+        "active:bg-primary-70",
+        "disabled:bg-neutral-40",
+        "disabled:text-neutral-70",
+      ],
+      success: [
+        "text-cream",
+        "bg-success-40",
+        "pointer-events-none", // Disable button; success state is not actionable
+      ],
+      "danger-outline": [
+        "text-danger-50",
+        "border",
+        "border-danger-50",
+        "hover:border-danger-40",
+        "hover:text-cream",
+        "hover:bg-danger-40",
+        "active:bg-danger-60",
+        "active:border-danger-60",
+      ],
+      unstyled: [],
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "primary",
+  },
+});
+
+type ButtonTheme = VariantProps<typeof buttonTheme>;
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@ -0,0 +1,46 @@
+import React, { ComponentPropsWithoutRef, forwardRef } from "react";
+import { tv, VariantProps } from "tailwind-variants";
+
+type Props = {} & Theme & ComponentPropsWithoutRef<"div">;
+
+export const Card = forwardRef<HTMLButtonElement, Props>(
+  ({ children, className, type = "generic", ...props }) => {
+    return (
+      <div {...props} className={"Card " + theme({ type, className })}>
+        {children}
+      </div>
+    );
+  },
+);
+Card.displayName = "Card";
+
+type Theme = VariantProps<typeof theme>;
+export const theme = tv({
+  base: [],
+  variants: {
+    type: {
+      page: [
+        "max-w-full",
+        "md:max-w-[752px]",
+        "mx-auto",
+        "p-4",
+        "md:p-8",
+        "flex",
+        "flex-col",
+        "gap-4",
+        "md:gap-8",
+      ],
+      generic: [
+        "px-4",
+        "md:px-6",
+        "py-6",
+        "md:py-8",
+        "flex",
+        "flex-col",
+        "gap-6",
+        "md:gap-8",
+        "bg-neutral-10",
+      ],
+    },
+  },
+});
--- a/src/constants.ts
+++ b/src/constants.ts
@ -30,6 +30,4 @@ export const TNC_PARTICIPANT_CONTENT = `Lorem ipsum dolor sit amet, consectetur

 export const WALLET_DISCLAIMER_MSG = 'You are connecting to an experimental wallet! It is not secure. Do not use it elsewhere and/or for managing real assets.'

-export const REDIRECT_EMAIL_MSG = 'Please check your inbox and click the link to verify your email address.'
-
 export const ENABLE_KYC = false;
--- a/src/index.css
+++ b/src/index.css
@ -1,17 +1,49 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
 }

-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+h1, h2, h3, h4, h5, h6 {
+  letter-spacing: -0.01em;
 }
+h1, h2, h3, h4 {
+  line-height: 1.2;
+}
+h5, h6 {
+  line-height: 1.3;
+}
+
+h1 { font-size: 36px; @apply md:text-[48px]; }
+h2 { font-size: 32px; @apply md:text-[40px]; }
+h3 { font-size: 24px; @apply md:text-[32px]; }
+h4 { font-size: 20px; @apply md:text-[28px]; }
+h5 { font-size: 18px; @apply md:text-[24px]; }
+h6 { @apply md:text-[20px]; }
+
+.body-1 { font-size: 16px; @apply md:text-[18px]; line-height: 1.5; }
+.body-2 { font-size: 14px; @apply md:text-[16px]; line-height: 1.5; }
+.body-3 { font-size: 14px; @apply md:text-[14px]; line-height: 1.5; }
+
+.font-mono {
+  letter-spacing: 0.01em;
+}
+
+/* Global helpers */
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+/* Fonts */
+@font-face {
+  font-family: 'TTHoves';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('https://laconic.com/fonts/tt-hoves/TTHoves-Regular.woff2') format('woff2');
+}
--- a/src/layout/SignPageLayout.tsx
+++ b/src/layout/SignPageLayout.tsx
@ -1,15 +1,9 @@
 import React from "react";
 import { Outlet, useNavigate } from "react-router-dom";

-import {
-  Toolbar,
-  Avatar,
-  Button,
-  Typography,
-  Container
-} from "@mui/material";
-
 import { useWalletConnectContext } from "../context/WalletConnectContext";
+import { Button } from "../components/ui/Button";
+import { Card } from "../components/ui/Card";

 const SignPageLayout = () => {
  const { disconnect, session } = useWalletConnectContext();
@ -22,52 +16,32 @@ const SignPageLayout = () => {

  return (
    <>
-      <Toolbar variant="dense">
-
-        <Button
-          variant="outlined"
-          style={{
-            marginLeft: "auto",
-          }}
-          color="error"
-          onClick={disconnectHandler}
-        >
-          Disconnect
-        </Button>
-      </Toolbar>
-
-      <Container maxWidth="md">
+      <Card type="page">
        {session && (
-          <div style={{ display: "flex", flexDirection: "column" }}>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "flex-end",
-              }}
-            >
-              <Typography variant="body2">
-                Connected to: <b> {session.peer.metadata.name}</b>{" "}
-              </Typography>
-              <Avatar
-                variant="square"
-                alt="Peer logo"
-                src={session.peer.metadata.icons[0]}
-                sx={{
-                  width: 20,
-                  height: 20,
-                  marginLeft: 1,
-                  paddingBottom: 0.5,
-                }}
-              />
+          <div className="p-4 flex flex-col md:flex-row md:items-center gap-4 bg-neutral-10 body-3">
+            <div className="min-w-0">
+              <div className="flex flex-row items-end">
+                <div>
+                  <span className="font-semibold">Connected to:</span> {session.peer.metadata.name}{" "}
+                </div>
+              </div>
+              <div className="mt-1 overflow-ellipsis overflow-hidden whitespace-nowrap">
+                <span className="font-semibold">Session ID:</span> {session.topic}
+              </div>
            </div>
-            <Typography variant="body2">
-              Session ID: <b>{session.topic} </b>
-            </Typography>
+            <Button
+              variant="danger-outline"
+              size="sm"
+              color="error"
+              onClick={disconnectHandler}
+              className="mr-auto"
+            >
+              Disconnect
+            </Button>
          </div>
        )}
        <Outlet />
-      </Container>
+      </Card>
    </>
  );
 };
--- a/src/pages/ConnectWallet.tsx
+++ b/src/pages/ConnectWallet.tsx
@ -1,66 +1,37 @@
 import React, { useEffect } from "react";
-import {useLocation, useNavigate } from "react-router-dom";
-
-import { Button, Box, Container, Typography, colors } from "@mui/material";
+import { useNavigate } from "react-router-dom";

 import { useWalletConnectContext } from "../context/WalletConnectContext";
 import { WALLET_DISCLAIMER_MSG } from "../constants";
+import { Button } from "../components/ui/Button";
+import { BodyText } from "../components/ui/BodyText";

 const ConnectWallet = () => {
  const { connect, session } = useWalletConnectContext();

  const navigate = useNavigate();
-  const location = useLocation();

  useEffect(() => {
-
    if (session) {
-      navigate("/sign-with-nitro-key", {
-        state: location.state
-      });
+      navigate("/sign-with-nitro-key");
    }
-  }, [session, navigate, location]);
+  }, [session, navigate]);

  const handler = async () => {
    await connect();
  };

  return (
-    <Container maxWidth="lg">
-      <Box
-        display="flex"
-        flexDirection="column"
-        alignItems="center"
-        justifyContent="center"
-        marginTop={10}
-        sx={{
-          border: 1,
-          borderColor: 'grey.500',
-        }}
-        padding={5}
-      >
-        <Typography variant="h5" component="h1" gutterBottom color={colors.red[400]}>
-          Disclaimer
-        </Typography>
-        <Typography variant="body1">
-          {WALLET_DISCLAIMER_MSG}
-        </Typography>
-      </Box>
-      <Box
-        display="flex"
-        flexDirection="column"
-        alignItems="center"
-        padding={5}
-        justifyContent="center"
-      >
-        <Button
-          variant="contained"
-          onClick={handler}
-        >
+    <div className="p-3 md:mt-8 max-w-md mx-auto">
+      <div className="p-6 flex-center gap-4 bg-neutral-10">
+        <h3 className="text-danger-50">Disclaimer</h3>
+        <BodyText>{WALLET_DISCLAIMER_MSG}</BodyText>
+
+        <Button size="lg" onClick={handler} className="w-full md:w-auto">
          Connect Wallet
        </Button>
-      </Box>
-    </Container>
+      </div>
+    </div>
  );
 };

--- a/src/pages/Email.tsx
+++ b/src/pages/Email.tsx
@ -1,33 +0,0 @@
-import React from 'react'
-
-import { Box, Typography } from '@mui/material'
-
-import { REDIRECT_EMAIL_MSG } from '../constants'
-
-const Email = () => {
-  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      justifyContent="center"
-      marginY={20}
-      marginX={50}
-      sx={{
-        border: 1,
-        borderColor: 'grey.500',
-      }}
-      padding={5}
-
-    >
-      <Typography variant="h4" component="h1" gutterBottom>
-        Thank you for registering!
-      </Typography>
-      <Typography variant="body1">
-        {REDIRECT_EMAIL_MSG}
-      </Typography>
-    </Box>
-  )
-}
-
-export default Email
--- a/src/pages/OnboardingSuccess.tsx
+++ b/src/pages/OnboardingSuccess.tsx
@ -7,8 +7,14 @@ import { Registry } from "@cerc-io/registry-sdk";
 import SumsubWebSdk from "@sumsub/websdk-react";
 import { MessageHandler } from "@sumsub/websdk";

-import { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from "../utils/sumsub";
+import {
+  config,
+  fetchAccessToken,
+  getAccessTokenExpirationHandler,
+  options,
+} from "../utils/sumsub";
 import { ENABLE_KYC } from "../constants";
+import { Card } from "../components/ui/Card";

 interface Participant {
  cosmosAddress: string;
@ -17,22 +23,20 @@ interface Participant {
  kycId: string;
 }

-const registry = new Registry(
-  process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!
-);
+const registry = new Registry(process.env.REACT_APP_REGISTRY_GQL_ENDPOINT!);

 const OnboardingSuccess = () => {
  const location = useLocation();
  const { cosmosAddress } = location.state as {
-    cosmosAddress?: string
-  }
+    cosmosAddress?: string;
+  };

  const [participant, setParticipant] = useState<Participant>();
-  const [token, setToken] = useState<string>('');
+  const [token, setToken] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(true);

  const messageHandler: MessageHandler = (event, payload) => {
-    console.log('sumsubEvent:', event, payload);
+    console.log("sumsubEvent:", event, payload);
  };

  useEffect(() => {
@ -65,7 +69,7 @@ const OnboardingSuccess = () => {
    };

    if (cosmosAddress && ENABLE_KYC) {
-      getToken(cosmosAddress).catch(error => {
+      getToken(cosmosAddress).catch((error) => {
        console.error(error);
        alert("Failed to fetch token");
      });
@ -73,38 +77,28 @@ const OnboardingSuccess = () => {
  }, [cosmosAddress]);

  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        marginTop: 6,
-        gap: 1,
-      }}
-    >
-      <Typography variant="h5">Transaction Successful</Typography>
-      <Typography variant="body1">
-        Participant onboarded: <br />
-      </Typography>
-      <Box
-        sx={{
-          backgroundColor: "lightgray",
-          padding: 3,
-          wordWrap: "break-word",
-          marginBottom: 6,
-        }}
-      >
-        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-          {participant && (
-            <div>
-              Cosmos Address: {participant.cosmosAddress} <br />
-              Nitro Address: {participant.nitroAddress} <br />
-              Role: {participant.role} <br />
-              KYC ID: {participant.kycId} <br />
-              <br />
+    <>
+      <section>
+        <h4>Transaction Successful</h4>
+        <Card className="mt-2">
+          <div>
+            <div className="body-2">Participant onboarded:</div>
+            <div className="mt-2 p-4 break-words bg-cream">
+              <pre style={{ whiteSpace: "pre-wrap" }}>
+                {participant && (
+                  <div>
+                    Cosmos Address: {participant.cosmosAddress} <br />
+                    Nitro Address: {participant.nitroAddress} <br />
+                    Role: {participant.role} <br />
+                    KYC ID: {participant.kycId} <br />
+                    <br />
+                  </div>
+                )}
+              </pre>
            </div>
-          )}
-        </pre>
-      </Box>
+          </div>
+        </Card>
+      </section>
      {ENABLE_KYC ? (
        <Box>
          <Typography variant="h5">KYC Status</Typography>
@ -118,9 +112,10 @@ const OnboardingSuccess = () => {
            />
          )}
        </Box>
-      ) : ''
-      }
-    </Box>
+      ) : (
+        ""
+      )}
+    </>
  );
 };

--- a/src/pages/SignWithCosmos.tsx
+++ b/src/pages/SignWithCosmos.tsx
@ -2,8 +2,6 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { enqueueSnackbar } from "notistack";

-import { Box, Card, CardContent, Grid, Typography } from "@mui/material";
-import LoadingButton from "@mui/lab/LoadingButton/LoadingButton";
 import {
  MsgOnboardParticipantEncodeObject,
  typeUrlMsgOnboardParticipant,
@ -11,7 +9,10 @@ import {
 import { StargateClient } from "@cosmjs/stargate";

 import { useWalletConnectContext } from "../context/WalletConnectContext";
-import SelectRoleCard, {Role} from "../components/SelectRoleCard";
+import TermsAndConditionsCard, { Role } from "../components/TermsAndConditionsCard";
+import { Button } from "../components/ui/Button";
+import { BodyText } from "../components/ui/BodyText";
+import { Card } from "../components/ui/Card";

 const SignWithCosmos = () => {
  const { session, signClient } = useWalletConnectContext();
@ -19,20 +20,20 @@ const SignWithCosmos = () => {
  const location = useLocation();
  const [isLoading, setIsLoading] = useState(false);
  const [balance, setBalance] = useState('');
-  const [isRequesting, setIsRequesting] = useState(false);
+  const [requestState, setRequestState] = useState<null | "pending" | "success">(null);
  const [isTncAccepted, setIsTncAccepted] = useState(false);
  const [role, setRole] = useState(Role.Participant);

  const navigate = useNavigate();

-  const {message: innerMessage, cosmosAddress, receivedEthSig: ethSignature, subscriberIdHash} = location.state as {
+  const {message: innerMessage, cosmosAddress, receivedEthSig: ethSignature, kycIdHash} = location.state as {
    message?: {
      msg: string;
      address: string;
    };
    cosmosAddress?: string;
    receivedEthSig?: string;
-    subscriberIdHash?: string;
+    kycIdHash?: string;
  };

  const ethAddress = innerMessage!.address;
@ -49,19 +50,19 @@ const SignWithCosmos = () => {
          participant: cosmosAddress!,
          ethPayload: innerMessage,
          ethSignature: ethSignature!,
-          kycId: subscriberIdHash!,
+          kycId: kycIdHash!,
          role
        },
      };
-    }, [cosmosAddress, innerMessage, ethSignature, subscriberIdHash, role]);
+    }, [cosmosAddress, innerMessage, ethSignature, kycIdHash, role]);

  const handleTokenRequest = async () => {
    try {
-      setIsRequesting(true);
+      setRequestState("pending");
      const response = await fetch(`${process.env.REACT_APP_FAUCET_ENDPOINT!}/faucet`, {
-        method: 'POST',
+        method: "POST",
        headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          address: cosmosAddress,
@ -69,7 +70,8 @@ const SignWithCosmos = () => {
      });

      if (response.ok) {
-        enqueueSnackbar('Tokens sent successfully',  { variant: "success" });
+        enqueueSnackbar("Tokens sent successfully", { variant: "success" });
+        setRequestState("success");
      } else {
        const errorResponse = await response.json();
        if (response.status === 429) {
@ -83,8 +85,7 @@ const SignWithCosmos = () => {
    } catch (error) {
      console.error(error);
      enqueueSnackbar("Error getting tokens from faucet", { variant: "error" });
-    } finally {
-      setIsRequesting(false);
+      setRequestState(null);
    }
  };

@ -115,8 +116,8 @@ const SignWithCosmos = () => {
      } else {
        navigate("/onboarding-success", {
          state: {
-            cosmosAddress
-          }
+            cosmosAddress,
+          },
        });
      }
    } catch (error) {
@ -133,7 +134,7 @@ const SignWithCosmos = () => {
      const balance = await cosmosClient.getBalance(cosmosAddress!, process.env.REACT_APP_LACONICD_DENOM!);
      setBalance(balance.amount);
    } catch (error) {
-      console.error('Error fetching balance:', error);
+      console.error("Error fetching balance:", error);
      throw error;
    }
  }, [cosmosAddress, createCosmosClient]);
@ -143,69 +144,77 @@ const SignWithCosmos = () => {
  }, [getBalances]);

  return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        marginTop: 6,
-        gap: 1,
-      }}
-    >
-      <Typography variant="h5" display={`${isTncAccepted ? "none" : "block"}`}>Please accept terms and conditions to continue</Typography>
-      <SelectRoleCard handleAccept={() => setIsTncAccepted(true)} handleRoleChange={setRole}/>
-      <Typography variant="h5">Send transaction to chain</Typography>
-      <Typography>Cosmos Account:</Typography>
-      <Card className='mt-1 mb-1'>
-        <CardContent>
-          <Grid container spacing={2}>
-            <Grid item xs={9}>
-              <Typography variant="body1">Address: {cosmosAddress}</Typography>
-              <Typography variant="body1">Balance: {balance} {process.env.REACT_APP_LACONICD_DENOM}</Typography>
-            </Grid>
-            <Grid item xs={3} container justifyContent="flex-end">
-              <LoadingButton
-                variant="contained"
-                onClick={handleTokenRequest}
-                disabled={isTncAccepted ? isRequesting : !isTncAccepted}
-                loading={isRequesting}
-              >
-                Request tokens from Faucet
-              </LoadingButton>
-            </Grid>
-          </Grid>
-        </CardContent>
-      </Card>
-      <Typography variant="body1">
-        Onboarding message: <br />
-      </Typography>
-      <Box
-        sx={{
-          backgroundColor: "lightgray",
-          padding: 3,
-          wordWrap: "break-word",
-        }}
-      >
-        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
-          {JSON.stringify(onboardParticipantMsg, null, 2)}{" "}
-        </pre>
-      </Box>
+    <>
+      {!isTncAccepted && (
+        <section>
+          <h4>Please accept terms and conditions to continue</h4>
+          <TermsAndConditionsCard
+            className="mt-2"
+            handleAccept={() => setIsTncAccepted(true)}
+            handleRoleChange={setRole}
+          />
+        </section>
+      )}

-      <Box
-        sx={{
-          paddingBottom: 2,
-        }}>
-        <LoadingButton
-          variant="contained"
-          onClick={async () => {
-            await sendTransaction(onboardParticipantMsg);
-          }}
-          loading={isLoading}
-          disabled={isTncAccepted ? (balance === '0') : !isTncAccepted}
-        >
-          Send transaction
-        </LoadingButton>
-      </Box>
-    </Box>
+      <section>
+        <h4>Send transaction to chain</h4>
+        <Card className="mt-2">
+          <div className="flex flex-col items-stretch">
+            <BodyText sizing={3}>Cosmos Account:</BodyText>
+            <pre
+              className="mt-2 px-4 py-3 bg-cream font-sans body-3"
+              style={{
+                whiteSpace: "pre-wrap",
+                wordWrap: "break-word",
+                overflowWrap: "break-word",
+              }}
+            >
+              {`Address: ${cosmosAddress}\nBalance: ${balance || "…"} ${
+                process.env.REACT_APP_LACONICD_DENOM
+              }`}
+            </pre>
+            <Button
+              variant={requestState === "success" ? "success" : "primary"}
+              onClick={handleTokenRequest}
+              disabled={isTncAccepted ? !!requestState : !isTncAccepted}
+              loading={requestState === "pending"}
+              className="mt-6 md:self-start"
+            >
+              {requestState === "success" ? "Tokens sent" : "Request tokens from Faucet"}
+            </Button>
+          </div>
+
+          <div className="border-t border-neutral-30"></div>
+
+          <div>
+            <BodyText sizing={3}>Onboarding message:</BodyText>
+            <div
+              className="mt-2 p-4 md:p-6 bg-neutral-30 body-3"
+              style={{
+                whiteSpace: "pre-wrap",
+                wordWrap: "break-word",
+                overflowWrap: "break-word",
+              }}
+            >
+              <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
+                {JSON.stringify(onboardParticipantMsg, null, 2)}{" "}
+              </pre>
+            </div>
+          </div>
+
+          <Button
+            onClick={async () => {
+              await sendTransaction(onboardParticipantMsg);
+            }}
+            loading={isLoading}
+            disabled={isTncAccepted ? balance === "0" : !isTncAccepted}
+            className="md:self-start"
+          >
+            Send transaction
+          </Button>
+        </Card>
+      </section>
+    </>
  );
 };

--- a/src/pages/SignWithNitroKey.tsx
+++ b/src/pages/SignWithNitroKey.tsx
@ -1,24 +1,19 @@
 import React, { useState, useMemo, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { enqueueSnackbar } from "notistack";
 import canonicalStringify from "canonical-json";
+import { ethers } from "ethers";

-import {
-  Select,
-  MenuItem,
-  Box,
-  Typography,
-} from "@mui/material";
-import LoadingButton from '@mui/lab/LoadingButton';
+import { Select, MenuItem } from "@mui/material";
 import { utf8ToHex } from "@walletconnect/encoding";

 import { useWalletConnectContext } from "../context/WalletConnectContext";
 import { ENABLE_KYC } from "../constants";
+import { Button } from "../components/ui/Button";
+import { Card } from "../components/ui/Card";

 const SignWithNitroKey = () => {
-
-  const { session, signClient, checkPersistedState } =
-    useWalletConnectContext();
+  const { session, signClient, checkPersistedState } = useWalletConnectContext();

  useEffect(() => {
    if (signClient && !session) {
@ -27,7 +22,6 @@ const SignWithNitroKey = () => {
  }, [session, signClient, checkPersistedState]);

  const navigate = useNavigate();
-  const location = useLocation();
  const [ethAddress, setEthAddress] = useState("");
  const [ethSignature, setEthSignature] = useState("");

@ -45,7 +39,7 @@ const SignWithNitroKey = () => {
  const signEth = async () => {
    if (session && signClient) {
      try {
-        setIsLoading(true)
+        setIsLoading(true);
        const jsonMessage = canonicalStringify(message);
        const hexMsg = utf8ToHex(jsonMessage, true);
        const receivedEthSig: string = await signClient!.request({
@ -56,7 +50,7 @@ const SignWithNitroKey = () => {
            params: [hexMsg, ethAddress],
          },
        });
-        setIsLoading(false)
+        setIsLoading(false);
        setEthSignature(ethSignature);

        if (ENABLE_KYC) {
@ -68,26 +62,20 @@ const SignWithNitroKey = () => {
            },
          });
        } else {
-          const state = location.state as {
-            subscriberIdHash?: string
-          }
-
-          if (!state.subscriberIdHash) {
-            throw new Error("Subscriber ID not found. Please verify your email and try again")
-          }
+          const kycIdHash = ethers.utils.sha256(ethers.utils.toUtf8Bytes(cosmosAddress));

          navigate("/sign-with-cosmos", {
            state: {
              message,
              cosmosAddress,
              receivedEthSig,
-              subscriberIdHash: state.subscriberIdHash,
+              kycIdHash,
            },
          });
        }
      } catch (error) {
        console.log("err in signing ", error);
-        setIsLoading(false)
+        setIsLoading(false);
        enqueueSnackbar("Error signing message", { variant: "error" });
      }
    }
@ -96,69 +84,74 @@ const SignWithNitroKey = () => {
  return (
    <div>
      {session ? (
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            marginTop: 6,
-            gap: 1,
-          }}
-        >
-          <Typography variant="h5">Sign with Nitro key</Typography>
-          <Typography variant="body1">Select Laconic account:</Typography>
-          <Select
-            labelId="demo-simple-select-label"
-            id="demo-simple-select"
-            value={cosmosAddress}
-            onChange={(e: any) => {
-              setCosmosAddress(e.target.value);
-            }}
-            style={{ maxWidth: "600px", display: "block" }}
-          >
-            {session?.namespaces.cosmos.accounts.map((address, index) => (
-              <MenuItem value={address.split(":")[2]} key={index}>
-                {address.split(":")[2]}
-              </MenuItem>
-            ))}
-          </Select>
-          <Typography variant="body1">Select Nitro account: </Typography>
-          <Select
-            labelId="demo-simple-select-label"
-            id="demo-simple-select"
-            value={ethAddress}
-            onChange={(e: any) => {
-              setEthAddress(e.target.value);
-            }}
-            style={{ maxWidth: "600px", display: "block" }}
-          >
-            {session?.namespaces.eip155.accounts.map((address, index) => (
-              <MenuItem value={address.split(":")[2]} key={index}>
-                {address.split(":")[2]}
-              </MenuItem>
-            ))}
-          </Select>
+        <div>
+          <h4>Sign with Nitro key</h4>

-          {(Boolean(ethAddress) && Boolean(cosmosAddress)) && (<Box
-            sx={{
-              backgroundColor: "lightgray",
-              padding: 3,
-              wordWrap: "break-word",
-            }}
-          >
-            <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>{canonicalStringify(message, null, 2)} </pre>
-          </Box>)}
-          <Box>
-            <LoadingButton
-              variant="contained"
+          <Card className="mt-2">
+            <div className="flex flex-col gap-4">
+              <div>
+                <div className="body-3">Select Laconic account:</div>
+                <Select
+                  labelId="demo-simple-select-label"
+                  id="demo-simple-select"
+                  value={cosmosAddress}
+                  onChange={(e: any) => {
+                    setCosmosAddress(e.target.value);
+                  }}
+                  className="mt-2 w-full"
+                  SelectDisplayProps={{
+                    className: "!bg-cream !py-2 !text-[14px] !font-light",
+                  }}
+                >
+                  {session?.namespaces.cosmos.accounts.map((address, index) => (
+                    <MenuItem value={address.split(":")[2]} key={index}>
+                      {address.split(":")[2]}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </div>
+
+              <div>
+                <div className="body-3">Select Nitro account:</div>
+                <Select
+                  labelId="demo-simple-select-label"
+                  id="demo-simple-select"
+                  value={ethAddress}
+                  onChange={(e: any) => {
+                    setEthAddress(e.target.value);
+                  }}
+                  className="mt-2 w-full"
+                  SelectDisplayProps={{
+                    className: "!bg-cream !py-2 !text-[14px] !font-light",
+                  }}
+                >
+                  {session?.namespaces.eip155.accounts.map((address, index) => (
+                    <MenuItem value={address.split(":")[2]} key={index}>
+                      {address.split(":")[2]}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </div>
+            </div>
+
+            {ethAddress && cosmosAddress && (
+              <div className="p-4 md:p-6 break-words body-3 bg-neutral-30">
+                <pre style={{ whiteSpace: "pre-wrap" }}>
+                  {canonicalStringify(message, null, 2)}{" "}
+                </pre>
+              </div>
+            )}
+
+            <Button
              onClick={signEth}
              disabled={!Boolean(ethAddress)}
-              sx={{ marginTop: 2 }}
              loading={isLoading}
+              className="md:self-start"
            >
              Sign using Nitro key
-            </LoadingButton>
-          </Box>
-        </Box>
+            </Button>
+          </Card>
+        </div>
      ) : (
        <>Loading...</>
      )}
--- a/src/pages/TermsAndConditions.tsx
+++ b/src/pages/TermsAndConditions.tsx
@ -1,28 +1,32 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useNavigate } from "react-router-dom";

-import { Container, Button, Box, Paper } from '@mui/material';
-
-import TermsAndConditionsBox from '../components/TermsAndConditionsBox';
+import { TNC_GENERIC_CONTENT } from "../constants";
+import { BodyText } from "../components/ui/BodyText";
+import { Button } from "../components/ui/Button";

 const TermsAndConditions = () => {
  const navigate = useNavigate();

  const handleAccept = () => {
-    navigate('/verify-email');
+    navigate("/connect-wallet");
  };

  return (
-    <Container maxWidth="lg">
-      <Paper elevation={3} style={{ padding: '2rem', marginTop: '2rem', height: '83vh', display: 'flex', flexDirection: 'column' }}>
-        <TermsAndConditionsBox height='80vh' />
-        <Box mt={2} display="flex" justifyContent="center">
-          <Button variant="contained" color="primary" onClick={handleAccept}>
-            Accept
-          </Button>
-        </Box>
-      </Paper>
-    </Container>
+    <div className="flex-1 min-h-0 p-3 md:p-8">
+      <div className="h-full md:mx-auto max-w-3xl px-4 md:px-6 py-6 md:py-8 flex flex-col gap-6 md:gap-8 bg-neutral-10">
+        <div className="flex-1 flex flex-col gap-6 min-h-0">
+          <h4>Terms and Conditions</h4>
+          <div className="flex-1 overflow-y-auto">
+            <BodyText sizing={2}>
+              <div dangerouslySetInnerHTML={{ __html: TNC_GENERIC_CONTENT }} />
+            </BodyText>
+          </div>
+        </div>
+        <div className="flex justify-center">
+          <Button onClick={handleAccept}>ACCEPT</Button>
+        </div>
+      </div>
+    </div>
  );
 };

--- a/src/pages/Thanks.tsx
+++ b/src/pages/Thanks.tsx
@ -1,72 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { jwtDecode } from "jwt-decode";
-import { ethers } from 'ethers';
-
-import { Box, colors, Typography } from '@mui/material';
-
-interface JwtPayload {
-  subscriber_id: string;
-  exp: number;
-  iss: string;
-  iat: number;
-}
-
-const Thanks: React.FC = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const [err, setErr] = useState<string>();
-
-  useEffect(() => {
-    const queryParams = new URLSearchParams(location.search);
-    const token = queryParams.get('jwt_token');
-
-    try {
-      if(!token){
-        throw new Error("Invalid JWT Token")
-      }
-
-      const decoded = jwtDecode(token) as JwtPayload;
-      const currentTime = Math.floor(Date.now() / 1000);
-
-      if (!decoded.subscriber_id) {
-        throw new Error("Subscriber ID not found")
-      }
-
-      if (decoded.exp < currentTime) {
-        throw new Error("Token has expired");
-      }
-
-      const subscriberIdBytes = ethers.utils.toUtf8Bytes(decoded.subscriber_id)
-      const subscriberIdHash = ethers.utils.sha256(subscriberIdBytes);
-
-      navigate('/connect-wallet', {
-        state:{
-          subscriberIdHash
-        }
-      });
-    } catch (error) {
-      setErr(String(error));
-    }
-
-  }, [location.search, navigate]);
-
-  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      alignItems="center"
-      justifyContent="center"
-      marginY={20}
-      marginX={50}
-      padding={5}
-    >
-      <Typography variant="h4" component="h1" gutterBottom color={colors.red[400]}>
-        {err ? err : "Loading..."}
-      </Typography>
-    </Box>
-  );
-};
-
-export default Thanks;
--- a/src/pages/UserVerification.tsx
+++ b/src/pages/UserVerification.tsx
@ -50,7 +50,7 @@ const UserVerification = () => {
          message,
          cosmosAddress,
          receivedEthSig,
-          subscriberIdHash: kycIdHash,
+          kycIdHash,
        }})
    }
  }, [applicationSubmitted, kycId, navigate, cosmosAddress, message, receivedEthSig]);
--- a/src/pages/VerifyEmail.tsx
+++ b/src/pages/VerifyEmail.tsx
@ -1,24 +0,0 @@
-import React from 'react'
-
-const VerifyEmail = () => {
-  return (
-    <div style={{ display: 'flex', justifyContent: 'center', margin: '20vh' }}>
-      <iframe
-        title="verify-email"
-        src="https://embeds.beehiiv.com/18aaa245-3652-4b0a-94a9-a87054df4914"
-        data-test-id="beehiiv-embed"
-        width="480"
-        height="320"
-        frameBorder="0"
-        scrolling="no"
-        style={{
-          borderRadius: '4px',
-          border: '2px solid #e5e7eb',
-          backgroundColor: 'transparent',
-        }}
-      ></iframe>
-    </div>
-  )
-}
-
-export default VerifyEmail
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,71 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.tsx',
+    './public/index.html',
+  ],
+  theme: {
+    colors: {
+      cream: '#FBFBFB',
+      black: '#0F0F0F', // Infinity Black
+      neutral: {
+        10: '#F1F1F2',
+        20: '#E6E6E8',
+        30: '#DADADE',
+        40: '#CCCBD0',
+        50: '#BDBCC3',
+        60: '#A7A6AF',
+        70: '#83828F',
+        80: '#48474F',
+        90: '#29292E',
+        100: '#18181A',
+      },
+      primary: {
+        10: '#F2F2FF',
+        20: '#CACAFF',
+        30: '#A2A2FF',
+        40: '#7A7AFF',
+        50: '#4545FF',
+        60: '#0000F4',
+        70: '#0000BE',
+        80: '#000088',
+        90: '#000051',
+        100: '#000036',
+      },
+      danger: {
+        10: '#FFF2F3',
+        20: '#FFC9CC',
+        30: '#FFA3A8',
+        40: '#FF7A81',
+        50: '#B20710',
+        60: '#870007',
+      },
+      success: {
+        10: '#F2FFF6',
+        20: '#C9FFD9',
+        30: '#7AFFA1',
+        40: '#24A148',
+      },
+      warning: {
+        10: '#FFFBF2',
+        20: '#FFEFC9',
+        30: '#E5AD29',
+        40: '#A17203',
+      },
+    },
+    fontFamily: {
+      sans: [`'TT Hoves', sans-serif`, {
+        fontFeatureSettings: `'liga' off, 'clig' off`,
+      }],
+      mono: `"DM Mono", monospace`,
+    },
+
+    extend: {
+      boxShadow: {
+        'button-primary': `0px 0px 20px 0px rgba(0, 0, 244, 0.50);`
+      }
+    }
+  },
+  plugins: [],
+}
+
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,15 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        snowball: "#0f86f5",
-      },
-    },
-  },
-  plugins: [],
-};
-
-export default config;
--- a/yarn.lock
+++ b/yarn.lock
@ -2418,21 +2418,6 @@
  dependencies:
    "@lit-labs/ssr-dom-shim" "^1.0.0"

-"@mapbox/node-pre-gyp@^1.0.0":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz#417db42b7f5323d79e93b34a6d7a2a12c0df43fa"
-  integrity sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==
-  dependencies:
-    detect-libc "^2.0.0"
-    https-proxy-agent "^5.0.0"
-    make-dir "^3.1.0"
-    node-fetch "^2.6.7"
-    nopt "^5.0.0"
-    npmlog "^5.0.1"
-    rimraf "^3.0.2"
-    semver "^7.3.5"
-    tar "^6.1.11"
-
 "@metamask/eth-sig-util@^4.0.0":
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/@metamask/eth-sig-util/-/eth-sig-util-4.0.1.tgz#3ad61f6ea9ad73ba5b19db780d40d9aae5157088"
@ -3629,13 +3614,6 @@
  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
  integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==

-"@types/tailwindcss@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@types/tailwindcss/-/tailwindcss-3.1.0.tgz#1185e4b3437c6e0f19d6cc8cd42738a94fd7b64f"
-  integrity sha512-JxPzrm609hzvF4nmOI3StLjbBEP3WWQxDDJESqR1nh94h7gyyy3XSl0hn5RBMJ9mPudlLjtaXs5YEBtLw7CnPA==
-  dependencies:
-    tailwindcss "*"
-
 "@types/testing-library__jest-dom@^5.9.1":
  version "5.14.9"
  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz#0fb1e6a0278d87b6737db55af5967570b67cb466"
@ -4222,11 +4200,6 @@ abab@^2.0.3, abab@^2.0.5:
  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==

-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
-
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
  version "1.3.8"
  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
@ -4391,19 +4364,6 @@ anymatch@^3.0.3, anymatch@^3.1.3, anymatch@~3.1.2:
    normalize-path "^3.0.0"
    picomatch "^2.0.4"

-"aproba@^1.0.3 || ^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
-  integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
-
-are-we-there-yet@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz#372e0e7bd279d8e94c653aaa1f67200884bf3e1c"
-  integrity sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==
-  dependencies:
-    delegates "^1.0.0"
-    readable-stream "^3.6.0"
-
 arg@^5.0.2:
  version "5.0.2"
  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
@ -4614,18 +4574,6 @@ autoprefixer@^10.4.13:
    picocolors "^1.0.0"
    postcss-value-parser "^4.2.0"

-autoprefixer@^10.4.20:
-  version "10.4.20"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
-  integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
-  dependencies:
-    browserslist "^4.23.3"
-    caniuse-lite "^1.0.30001646"
-    fraction.js "^4.3.7"
-    normalize-range "^0.1.2"
-    picocolors "^1.0.1"
-    postcss-value-parser "^4.2.0"
-
 available-typed-arrays@^1.0.7:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
@ -5036,16 +4984,6 @@ browserslist@^4.0.0, browserslist@^4.18.1, browserslist@^4.21.10, browserslist@^
    node-releases "^2.0.14"
    update-browserslist-db "^1.0.13"

-browserslist@^4.23.3:
-  version "4.23.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.3.tgz#debb029d3c93ebc97ffbc8d9cbb03403e227c800"
-  integrity sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==
-  dependencies:
-    caniuse-lite "^1.0.30001646"
-    electron-to-chromium "^1.5.4"
-    node-releases "^2.0.18"
-    update-browserslist-db "^1.1.0"
-
 bs58@^4.0.0, bs58@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
@ -5156,25 +5094,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001591:
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz#571cf4f3f1506df9bf41fcbb6d10d5d017817bce"
  integrity sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==

-caniuse-lite@^1.0.30001646:
-  version "1.0.30001651"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz#52de59529e8b02b1aedcaaf5c05d9e23c0c28138"
-  integrity sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==
-
 canonical-json@^0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/canonical-json/-/canonical-json-0.0.4.tgz#6579c072c3db5c477ec41dc978fbf2b8f41074a3"
  integrity sha512-2sW7x0m/P7dqEnO0O87U7RTVQAaa7MELcd+Jd9FA6CYgYtwJ1TlDWIYMD8nuMkH1KoThsJogqgLyklrt9d/Azw==

-canvas@^2.11.2:
-  version "2.11.2"
-  resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.11.2.tgz#553d87b1e0228c7ac0fc72887c3adbac4abbd860"
-  integrity sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==
-  dependencies:
-    "@mapbox/node-pre-gyp" "^1.0.0"
-    nan "^2.17.0"
-    simple-get "^3.0.3"
-
 case-sensitive-paths-webpack-plugin@^2.4.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
@ -5240,11 +5164,6 @@ chokidar@^3.4.2, chokidar@^3.5.3, chokidar@^3.6.0:
  optionalDependencies:
    fsevents "~2.3.2"

-chownr@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
-  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
-
 chrome-trace-event@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@ -5314,11 +5233,6 @@ clsx@^1.1.0:
  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==

-clsx@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
-  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
-
 clsx@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
@ -5367,11 +5281,6 @@ color-name@~1.1.4:
  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

-color-support@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
-  integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
-
 colord@^2.9.1:
  version "2.9.3"
  resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
@ -5464,11 +5373,6 @@ consola@^3.2.3:
  resolved "https://registry.yarnpkg.com/consola/-/consola-3.2.3.tgz#0741857aa88cfa0d6fd53f1cff0375136e98502f"
  integrity sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==

-console-control-strings@^1.0.0, console-control-strings@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
-
 content-disposition@0.5.4:
  version "0.5.4"
  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
@ -5907,13 +5811,6 @@ decode-uri-component@^0.2.2:
  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==

-decompress-response@^4.2.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-4.2.1.tgz#414023cc7a302da25ce2ec82d0d5238ccafd8986"
-  integrity sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==
-  dependencies:
-    mimic-response "^2.0.0"
-
 dedent@^0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
@ -5993,11 +5890,6 @@ delayed-stream@~1.0.0:
  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==

-delegates@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
-
 depd@2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@ -6041,11 +5933,6 @@ detect-libc@^1.0.3:
  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
  integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==

-detect-libc@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
-  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
-
 detect-newline@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@ -6259,11 +6146,6 @@ electron-to-chromium@^1.4.668:
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.710.tgz#d0ec4ea8a97df4c5eaeb8c69d45bf81f248b3855"
  integrity sha512-w+9yAVHoHhysCa+gln7AzbO9CdjFcL/wN/5dd+XW/Msl2d/4+WisEaCF1nty0xbAKaxdaJfgLB2296U7zZB7BA==

-electron-to-chromium@^1.5.4:
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.5.tgz#03bfdf422bdd2c05ee2657efedde21264a1a566b"
-  integrity sha512-QR7/A7ZkMS8tZuoftC/jfqNkZLQO779SSW3YuZHP4eXpj3EffGLFcB/Xu9AAZQzLccTiCV+EmUo3ha4mQ9wnlA==
-
 elliptic@6.5.4:
  version "6.5.4"
  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@ -6547,7 +6429,7 @@ es-to-primitive@^1.2.1:
    is-date-object "^1.0.1"
    is-symbol "^1.0.2"

-escalade@^3.1.1, escalade@^3.1.2:
+escalade@^3.1.1:
  version "3.1.2"
  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
@ -7314,13 +7196,6 @@ fs-extra@^9.0.0, fs-extra@^9.0.1:
    jsonfile "^6.0.1"
    universalify "^2.0.0"

-fs-minipass@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.0.0"
-
 fs-monkey@^1.0.4:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.5.tgz#fe450175f0db0d7ea758102e1d84096acb925788"
@ -7356,21 +7231,6 @@ functions-have-names@^1.2.3:
  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==

-gauge@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395"
-  integrity sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==
-  dependencies:
-    aproba "^1.0.3 || ^2.0.0"
-    color-support "^1.1.2"
-    console-control-strings "^1.0.0"
-    has-unicode "^2.0.1"
-    object-assign "^4.1.1"
-    signal-exit "^3.0.0"
-    string-width "^4.2.3"
-    strip-ansi "^6.0.1"
-    wide-align "^1.1.2"
-
 gensync@^1.0.0-beta.2:
  version "1.0.0-beta.2"
  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@ -7627,11 +7487,6 @@ has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
  dependencies:
    has-symbols "^1.0.3"

-has-unicode@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
-
 hash-base@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
@ -9071,11 +8926,6 @@ junk@3.1.0:
  resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
  integrity sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==

-jwt-decode@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-4.0.0.tgz#2270352425fd413785b2faf11f6e755c5151bd4b"
-  integrity sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==
-
 keccak@^3.0.0:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/keccak/-/keccak-3.0.4.tgz#edc09b89e633c0549da444432ecf062ffadee86d"
@ -9329,7 +9179,7 @@ long@^4.0.0:
  resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
  integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==

-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@ -9374,11 +9224,6 @@ magic-string@^0.25.0, magic-string@^0.25.7:
  dependencies:
    sourcemap-codec "^1.4.8"

-make-cancellable-promise@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/make-cancellable-promise/-/make-cancellable-promise-1.3.2.tgz#993c8c8b79cff13c74fa93de0bd8a17fe66685c1"
-  integrity sha512-GCXh3bq/WuMbS+Ky4JBPW1hYTOU+znU+Q5m9Pu+pI8EoUqIHk9+tviOKC6/qhHh8C4/As3tzJ69IF32kdz85ww==
-
 make-dir@^3.0.2, make-dir@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@ -9393,11 +9238,6 @@ make-dir@^4.0.0:
  dependencies:
    semver "^7.5.3"

-make-event-props@^1.6.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/make-event-props/-/make-event-props-1.6.2.tgz#c8e0e48eb28b9b808730de38359f6341de7ec5a2"
-  integrity sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==
-
 makeerror@1.0.12:
  version "1.0.12"
  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
@ -9441,11 +9281,6 @@ merge-descriptors@1.0.1:
  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==

-merge-refs@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/merge-refs/-/merge-refs-1.3.0.tgz#65d7f8c5058917b9d1fc204ae4b9a727614d0119"
-  integrity sha512-nqXPXbso+1dcKDpPCXvwZyJILz+vSLqGGOnDrYHQYE+B8n9JTCekVLC65AfCpR4ggVyA/45Y0iR9LDyS2iI+zA==
-
 merge-stream@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@ -9509,11 +9344,6 @@ mimic-fn@^4.0.0:
  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
  integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==

-mimic-response@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.1.0.tgz#d13763d35f613d09ec37ebb30bac0469c0ee8f43"
-  integrity sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==
-
 min-indent@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@ -9563,36 +9393,11 @@ minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6:
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==

-minipass@^3.0.0:
-  version "3.3.6"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.6.tgz#7bba384db3a1520d18c9c0e5251c3444e95dd94a"
-  integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==
-  dependencies:
-    yallist "^4.0.0"
-
-minipass@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-5.0.0.tgz#3e9788ffb90b694a5d0ec94479a45b5d8738133d"
-  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==
-
 "minipass@^5.0.0 || ^6.0.2 || ^7.0.0":
  version "7.0.4"
  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.0.4.tgz#dbce03740f50a4786ba994c1fb908844d27b038c"
  integrity sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==

-minizlib@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
-  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
-  dependencies:
-    minipass "^3.0.0"
-    yallist "^4.0.0"
-
-mkdirp@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
 mkdirp@~0.5.1:
  version "0.5.6"
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
@ -9664,7 +9469,7 @@ mz@^2.7.0:
    object-assign "^4.0.1"
    thenify-all "^1.0.0"

-nan@^2.13.2, nan@^2.17.0:
+nan@^2.13.2:
  version "2.20.0"
  resolved "https://registry.yarnpkg.com/nan/-/nan-2.20.0.tgz#08c5ea813dd54ed16e5bd6505bf42af4f7838ca3"
  integrity sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==
@ -9722,7 +9527,7 @@ node-fetch-native@^1.4.0, node-fetch-native@^1.6.1, node-fetch-native@^1.6.2:
  resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-1.6.2.tgz#f439000d972eb0c8a741b65dcda412322955e1c6"
  integrity sha512-69mtXOFZ6hSkYiXAVB5SqaRvrbITC/NPyqv7yuu/qw0nmgPyYbIMYYNIDhNtwPrzk0ptrimrLz/hhjvm4w5Z+w==

-node-fetch@^2.6.1, node-fetch@^2.6.7:
+node-fetch@^2.6.1:
  version "2.7.0"
  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
@ -9749,11 +9554,6 @@ node-releases@^2.0.14:
  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==

-node-releases@^2.0.18:
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
-  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
-
 node-yaml@^4.0.1:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/node-yaml/-/node-yaml-4.0.1.tgz#3675d27c275fbea9c02e2b0faa18bb1699444cb3"
@ -9763,13 +9563,6 @@ node-yaml@^4.0.1:
    junk "3.1.0"
    promise-fs "2.1.1"

-nopt@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
-  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
-  dependencies:
-    abbrev "1"
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@ -9807,16 +9600,6 @@ npm-run-path@^5.1.0:
  dependencies:
    path-key "^4.0.0"

-npmlog@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-5.0.1.tgz#f06678e80e29419ad67ab964e0fa69959c1eb8b0"
-  integrity sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==
-  dependencies:
-    are-we-there-yet "^2.0.0"
-    console-control-strings "^1.1.0"
-    gauge "^3.0.0"
-    set-blocking "^2.0.0"
-
 nth-check@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
@ -9966,7 +9749,7 @@ on-headers@~1.0.2:
  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==

-once@^1.3.0, once@^1.3.1, once@^1.4.0:
+once@^1.3.0, once@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
@ -10171,11 +9954,6 @@ path-type@^4.0.0:
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==

-path2d@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/path2d/-/path2d-0.2.1.tgz#faf98e5e2222541805a6ac232adc026332330765"
-  integrity sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==
-
 pathe@^1.1.0, pathe@^1.1.1, pathe@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec"
@ -10192,14 +9970,6 @@ pbkdf2@^3.0.17, pbkdf2@^3.0.3, pbkdf2@^3.1.2:
    safe-buffer "^5.0.1"
    sha.js "^2.4.8"

-pdfjs-dist@4.4.168:
-  version "4.4.168"
-  resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-4.4.168.tgz#4487716376a33c68753ed37f782ae91d1c9ef8fa"
-  integrity sha512-MbkAjpwka/dMHaCfQ75RY1FXX3IewBVu6NGZOcxerRFlaBiIkZmUoR0jotX5VUzYZEXAGzSFtknWs5xRKliXPA==
-  optionalDependencies:
-    canvas "^2.11.2"
-    path2d "^0.2.0"
-
 performance-now@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@ -10215,11 +9985,6 @@ picocolors@^1.0.0:
  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==

-picocolors@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
-  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
-
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@ -10841,7 +10606,7 @@ postcss@^7.0.35:
    picocolors "^0.2.1"
    source-map "^0.6.1"

-postcss@^8.3.5, postcss@^8.4.23, postcss@^8.4.33:
+postcss@^8.3.5, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.4:
  version "8.4.36"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.36.tgz#dba513c3c3733c44e0288a712894f8910bbaabc6"
  integrity sha512-/n7eumA6ZjFHAsbX30yhHup/IMkOmlmvtEi7P+6RMYf+bGJSUHc3geH4a0NSZxAz/RJfiS9tooCTs9LAVYUZKw==
@ -10850,15 +10615,6 @@ postcss@^8.3.5, postcss@^8.4.23, postcss@^8.4.33:
    picocolors "^1.0.0"
    source-map-js "^1.1.0"

-postcss@^8.4.41:
-  version "8.4.41"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
-  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.1"
-    source-map-js "^1.2.0"
-
 prelude-ls@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@ -11169,20 +10925,6 @@ react-is@^18.0.0, react-is@^18.2.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==

-react-pdf@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/react-pdf/-/react-pdf-9.1.0.tgz#2a1456646d2eb4e4a246e83121d195775bbfa5dc"
-  integrity sha512-KhPDQE3QshkLdS3b48S5Bldv0N5flob6qwvsiADWdZOS5TMDaIrkRtEs+Dyl6ubRf2jTf9jWmFb6RjWu46lSSg==
-  dependencies:
-    clsx "^2.0.0"
-    dequal "^2.0.3"
-    make-cancellable-promise "^1.3.1"
-    make-event-props "^1.6.0"
-    merge-refs "^1.3.0"
-    pdfjs-dist "4.4.168"
-    tiny-invariant "^1.0.0"
-    warning "^4.0.0"
-
 react-refresh@^0.11.0:
  version "0.11.0"
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@ -11816,7 +11558,7 @@ side-channel@^1.0.4:
    get-intrinsic "^1.2.4"
    object-inspect "^1.13.1"

-signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
+signal-exit@^3.0.2, signal-exit@^3.0.3:
  version "3.0.7"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@ -11826,20 +11568,6 @@ signal-exit@^4.0.1, signal-exit@^4.1.0:
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==

-simple-concat@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
-  integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
-
-simple-get@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-3.1.1.tgz#cc7ba77cfbe761036fbfce3d021af25fc5584d55"
-  integrity sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==
-  dependencies:
-    decompress-response "^4.2.0"
-    once "^1.3.1"
-    simple-concat "^1.0.0"
-
 sisteransi@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@ -11881,11 +11609,6 @@ source-map-js@^1.0.1, source-map-js@^1.1.0:
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.1.0.tgz#9e7d5cb46f0689fb6691b30f226937558d0fa94b"
  integrity sha512-9vC2SfsJzlej6MAaMPLu8HiBSHGdRAJ9hVFYN1ibZoNkeanmDmLUcIrj6G9DGL7XMJ54AKg/G75akXl1/izTOw==

-source-map-js@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
-  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
-
 source-map-loader@^3.0.0:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-3.0.2.tgz#af23192f9b344daa729f6772933194cc5fa54fee"
@ -12053,7 +11776,16 @@ string-natural-compare@^3.0.1:
  resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
  integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==

-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0:
  version "4.2.3"
  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@ -12137,7 +11869,14 @@ stringify-object@^3.3.0:
    is-obj "^1.0.1"
    is-regexp "^1.0.0"

-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@ -12312,10 +12051,22 @@ system-architecture@^0.1.0:
  resolved "https://registry.yarnpkg.com/system-architecture/-/system-architecture-0.1.0.tgz#71012b3ac141427d97c67c56bc7921af6bff122d"
  integrity sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==

-tailwindcss@*, tailwindcss@^3.4.9:
-  version "3.4.9"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.9.tgz#9e04cddce1924d530df62af37d3520f0e2a9d85e"
-  integrity sha512-1SEOvRr6sSdV5IDf9iC+NU4dhwdqzF4zKKq3sAbasUWHEM6lsMhX+eNN5gkPx1BvLFEnZQEUFbXnGj8Qlp83Pg==
+tailwind-merge@^2.2.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.4.0.tgz#1345209dc1f484f15159c9180610130587703042"
+  integrity sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==
+
+tailwind-variants@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tailwind-variants/-/tailwind-variants-0.2.1.tgz#132f2537b0150819036f6c4f47d5c50b929b758d"
+  integrity sha512-2xmhAf4UIc3PijOUcJPA1LP4AbxhpcHuHM2C26xM0k81r0maAO6uoUSHl3APmvHZcY5cZCY/bYuJdfFa4eGoaw==
+  dependencies:
+    tailwind-merge "^2.2.0"
+
+tailwindcss@^3.4.8:
+  version "3.4.8"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.8.tgz#74fdfc085732c244ad9ca4ee0d539bc5dddd58fd"
+  integrity sha512-GkP17r9GQkxgZ9FKHJQEnjJuKBcbFhMFzKu5slmN6NjlCuFnYJMQ8N4AZ6VrUyiRXlDtPKHkesuQ/MS913Nvdg==
  dependencies:
    "@alloc/quick-lru" "^5.2.0"
    arg "^5.0.2"
@ -12350,18 +12101,6 @@ tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==

-tar@^6.1.11:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
-  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
-  dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^5.0.0"
-    minizlib "^2.1.1"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
-
 temp-dir@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"
@ -12451,11 +12190,6 @@ thunky@^1.0.2:
  resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==

-tiny-invariant@^1.0.0:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
-  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
-
 tiny-secp256k1@^1.1.6:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/tiny-secp256k1/-/tiny-secp256k1-1.1.6.tgz#7e224d2bee8ab8283f284e40e6b4acb74ffe047c"
@ -12814,14 +12548,6 @@ update-browserslist-db@^1.0.13:
    escalade "^3.1.1"
    picocolors "^1.0.0"

-update-browserslist-db@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz#7ca61c0d8650766090728046e416a8cde682859e"
-  integrity sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==
-  dependencies:
-    escalade "^3.1.2"
-    picocolors "^1.0.1"
-
 uqr@^0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/uqr/-/uqr-0.1.2.tgz#5c6cd5dcff9581f9bb35b982cb89e2c483a41d7d"
@ -12931,13 +12657,6 @@ walker@^1.0.7:
  dependencies:
    makeerror "1.0.12"

-warning@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack@^2.4.0:
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.1.tgz#29308f2cac150fa8e4c92f90e0ec954a9fed7fff"
@ -13210,13 +12929,6 @@ which@^2.0.1:
  dependencies:
    isexe "^2.0.0"

-wide-align@^1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.5.tgz#df1d4c206854369ecf3c9a4898f1b23fbd9d15d3"
-  integrity sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==
-  dependencies:
-    string-width "^1.0.2 || 2 || 3 || 4"
-
 wif@^2.0.6:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/wif/-/wif-2.0.6.tgz#08d3f52056c66679299726fade0d432ae74b4704"
@ -13398,8 +13110,7 @@ workbox-window@6.6.1:
    "@types/trusted-types" "^2.0.2"
    workbox-core "6.6.1"

-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@ -13417,6 +13128,15 @@ wrap-ansi@^6.2.0:
    string-width "^4.1.0"
    strip-ansi "^6.0.0"

+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
  version "8.1.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"