diff --git a/frontend-v2/.editorconfig b/frontend-v2/.editorconfig
new file mode 100644
index 0000000..cddc074
--- /dev/null
+++ b/frontend-v2/.editorconfig
@@ -0,0 +1,11 @@
+# EditorConfig: http://editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/frontend-v2/.eslintrc.json b/frontend-v2/.eslintrc.json
new file mode 100644
index 0000000..4d765f2
--- /dev/null
+++ b/frontend-v2/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}
diff --git a/frontend-v2/.gitignore b/frontend-v2/.gitignore
new file mode 100644
index 0000000..c1d3d67
--- /dev/null
+++ b/frontend-v2/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.idea/*
diff --git a/frontend-v2/README.md b/frontend-v2/README.md
new file mode 100644
index 0000000..c8ec10c
--- /dev/null
+++ b/frontend-v2/README.md
@@ -0,0 +1,49 @@
+# Blockroma Frontend
+
+![Blockroma](https://tp-misc.b-cdn.net/blockroma-v0.1.png)
+
+## Getting Started
+
+Blockroma is a blockchain explorer. It is built with the modern web stack - TypeScript, KOA, React, SASS, Apollo GraphQL, TypeORM, and PostgreSQL. It is open-sourced under [GPL license](#license).
+
+![blockroma-v0.1-demo](https://tp-misc.b-cdn.net/blockroma-v0.1-2.gif)
+
+> The project is still in development with an unstable version 0.1.0. As a result, there might be breaking changes before 1.0.0.
+
+### Download the project
+
+```bash
+git clone git@github.com:blockedenhq/blockroma-frontend.git
+```
+
+### Run the project
+
+```bash
+cd blockroma-frontend
+
+yarn install
+```
+
+#### Development mode
+
+To run your project in development mode, run:
+
+```bash
+yarn dev
+```
+
+#### NPM scripts
+
+- `npm run test`: test the whole project and generate a test coverage
+- `npm run ava ./path/to/test-file.js`: run a specific test file
+- `npm run build`: build source code from `src` to `dist`
+- `npm run lint`: run the linter
+- `npm run kill`: kill the node server occupying the port 5000.
+
+## License
+
+Special thanks to the blockscout project. We are not fans of Elixir but we used its JS and style files, and thus comply with its GPL license.
+
+## Star and Fork the Project
+
+If you like the project or want to support its future development, please give it a star ⭐️ and fork it!
diff --git a/frontend-v2/next-i18next.config.js b/frontend-v2/next-i18next.config.js
new file mode 100644
index 0000000..dd9364b
--- /dev/null
+++ b/frontend-v2/next-i18next.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  debug: false,
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+  supportedLngs: ["en"],
+};
diff --git a/frontend-v2/next.config.js b/frontend-v2/next.config.js
new file mode 100644
index 0000000..5ad5c19
--- /dev/null
+++ b/frontend-v2/next.config.js
@@ -0,0 +1,21 @@
+const { i18n } = require("./next-i18next.config");
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "export",
+  distDir: "build",
+
+  reactStrictMode: true,
+  swcMinify: true,
+  // i18n,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
+};
+
+module.exports = nextConfig;
diff --git a/frontend-v2/package.json b/frontend-v2/package.json
new file mode 100644
index 0000000..c9c96fa
--- /dev/null
+++ b/frontend-v2/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "dash-v2",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "test": "yarn lint && yarn format",
+    "lint": "next lint",
+    "format": "pretty-quick --staged ./",
+    "schema:generate": "apollo client:codegen ./src/nft --no-addTypename --target=typescript --localSchemaFile=src/aptos-indexer.graphql"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.7.1",
+    "@fortawesome/fontawesome-free": "^6.2.1",
+    "@types/node": "18.11.9",
+    "@types/react": "18.0.25",
+    "@types/react-dom": "18.0.9",
+    "date-fns": "^2.29.3",
+    "eslint": "8.28.0",
+    "eslint-config-next": "^14.1.4",
+    "graphql": "^16.6.0",
+    "highlight.js": "^11.7.0",
+    "i18next": "^22.0.6",
+    "isomorphic-unfetch": "^3.1.0",
+    "next": "^14.1.4",
+    "next-i18next": "^13.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^12.0.0",
+    "react-outside-click-handler": "^1.3.0",
+    "react-redux": "^8.0.5",
+    "redux": "^4.2.0",
+    "redux-thunk": "^2.4.2",
+    "styletron-engine-atomic": "^1.5.0",
+    "styletron-react": "5.2.7",
+    "typescript": "4.9.3"
+  },
+  "devDependencies": {
+    "@tarekraafat/autocomplete.js": "^10.2.7",
+    "@types/react-outside-click-handler": "^1.3.1",
+    "@types/styletron-react": "^5.0.3",
+    "bootstrap": "^4.6.1",
+    "eslint-config-prettier": "^8.5.0",
+    "prettier": "^2.8.0",
+    "pretty-quick": "^3.1.3",
+    "sass": "^1.56.1"
+  }
+}
diff --git a/frontend-v2/pages/_app.tsx b/frontend-v2/pages/_app.tsx
new file mode 100644
index 0000000..af74585
--- /dev/null
+++ b/frontend-v2/pages/_app.tsx
@@ -0,0 +1,26 @@
+import { Provider as StyletronProvider } from "styletron-react";
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { styletron } from "../src/styletron";
+import "../src/stylesheets/app.scss";
+import { Provider as ReduxProvider } from "react-redux";
+import { configureStore } from "../src/common/configure-store";
+import { appWithTranslation } from "next-i18next";
+import { ApolloProvider } from "@apollo/client";
+import { apolloClient } from "@/shared/common/apollo-client";
+import nextI18NextConfig from "../next-i18next.config.js";
+
+export default appWithTranslation(function App({
+  Component,
+  pageProps,
+}: AppProps) {
+  return (
+    <ApolloProvider client={apolloClient}>
+      <ReduxProvider store={configureStore({ base: { theme: "dark" } })}>
+        <StyletronProvider value={styletron}>
+          <Component {...pageProps} />
+        </StyletronProvider>
+      </ReduxProvider>
+    </ApolloProvider>
+  );
+}, nextI18NextConfig);
diff --git a/frontend-v2/pages/_document.js b/frontend-v2/pages/_document.js
new file mode 100644
index 0000000..debd1a9
--- /dev/null
+++ b/frontend-v2/pages/_document.js
@@ -0,0 +1,74 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { Provider as StyletronProvider } from "styletron-react";
+import { styletron } from "../src/styletron";
+
+const beConfig = {
+  tagline: "tagline",
+  previewImageUrl: "https://tianpan.co/favicon.png",
+  title: `title`,
+  description: "title",
+  twitter: "@stargately",
+};
+
+class MyDocument extends Document {
+  static async getInitialProps(context) {
+    const renderPage = () =>
+      context.renderPage({
+        enhanceApp: (App) => (props) => (
+          <StyletronProvider value={styletron}>
+            <App {...props} />
+          </StyletronProvider>
+        ),
+      });
+
+    const initialProps = await Document.getInitialProps({
+      ...context,
+      renderPage,
+    });
+    const stylesheets = styletron.getStylesheets() || [];
+    return { ...initialProps, stylesheets };
+  }
+
+  render() {
+    return (
+      <Html className="dark-theme-applied">
+        <Head>
+          <meta name="twitter:site" content={beConfig.twitter} />
+          <meta name="twitter:image" content={beConfig.previewImageUrl} />
+          <meta name="twitter:title" content={beConfig.title} />
+          <meta name="twitter:description" content={beConfig.description} />
+          <meta property="twitter:card" content="summary_large_image" />
+          <meta property="og:title" content={beConfig.title} />
+          <meta property="og:description" content={beConfig.description} />
+          <meta
+            property="og:image"
+            name="og:image"
+            content={beConfig.previewImageUrl}
+          />
+          <meta charSet="utf-8" />
+
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
+          />
+
+          {this.props.stylesheets.map((sheet, i) => (
+            <style
+              className="_styletron_hydrate_"
+              dangerouslySetInnerHTML={{ __html: sheet.css }}
+              media={sheet.attrs.media}
+              data-hydrate={sheet.attrs["data-hydrate"]}
+              key={i}
+            />
+          ))}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;
diff --git a/frontend-v2/pages/address/[addressHash].tsx b/frontend-v2/pages/address/[addressHash].tsx
new file mode 100644
index 0000000..4e635d8
--- /dev/null
+++ b/frontend-v2/pages/address/[addressHash].tsx
@@ -0,0 +1,30 @@
+import { BlockDetailsContainer } from "@/shared/block-details-container/block-details-container";
+import { GetStaticProps } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { RawNav } from "@/shared/home/components/raw-nav";
+import React from "react";
+import nextI18NextConfig from "../../next-i18next.config.js";
+import { AddressDetailsContainer } from "@/shared/address-details-container/address-details-container";
+
+export default function AddressHashPage() {
+  return (
+    <>
+      <RawNav />
+      <AddressDetailsContainer />
+    </>
+  );
+}
+
+export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(
+      locale ?? "en",
+      ["common"],
+      nextI18NextConfig,
+    )),
+  },
+});
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: false };
+}
diff --git a/frontend-v2/pages/api/hello.ts b/frontend-v2/pages/api/hello.ts
new file mode 100644
index 0000000..ea77e8f
--- /dev/null
+++ b/frontend-v2/pages/api/hello.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+
+type Data = {
+  name: string;
+};
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>,
+) {
+  res.status(200).json({ name: "John Doe" });
+}
diff --git a/frontend-v2/pages/block/[blockNumber].tsx b/frontend-v2/pages/block/[blockNumber].tsx
new file mode 100644
index 0000000..78ad5ba
--- /dev/null
+++ b/frontend-v2/pages/block/[blockNumber].tsx
@@ -0,0 +1,29 @@
+import { BlockDetailsContainer } from "@/shared/block-details-container/block-details-container";
+import { GetStaticProps } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { RawNav } from "@/shared/home/components/raw-nav";
+import React from "react";
+import nextI18NextConfig from "../../next-i18next.config.js";
+
+export default function BlockDetailsPage() {
+  return (
+    <>
+      <RawNav />
+      <BlockDetailsContainer />
+    </>
+  );
+}
+
+export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(
+      locale ?? "en",
+      ["common"],
+      nextI18NextConfig,
+    )),
+  },
+});
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: false };
+}
diff --git a/frontend-v2/pages/blocks.tsx b/frontend-v2/pages/blocks.tsx
new file mode 100644
index 0000000..50db05b
--- /dev/null
+++ b/frontend-v2/pages/blocks.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import type { GetStaticProps, InferGetStaticPropsType } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { RawNav } from "@/shared/home/components/raw-nav";
+import { BlksTableContainer } from "@/shared/blks-table-container/blks-table-container";
+
+export default function BlocksPage() {
+  return (
+    <div>
+      <RawNav />
+      <BlksTableContainer />
+    </div>
+  );
+}
+
+// or getServerSideProps: GetServerSideProps<Props> = async ({ locale })
+export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale ?? "en", ["common"])),
+  },
+});
diff --git a/frontend-v2/pages/index.tsx b/frontend-v2/pages/index.tsx
new file mode 100644
index 0000000..877a816
--- /dev/null
+++ b/frontend-v2/pages/index.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { GetStaticProps, InferGetStaticPropsType } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { Home } from "@/shared/home";
+import { RawNav } from "@/shared/home/components/raw-nav";
+import { Footer } from "@/shared/common/footer";
+
+export default function Index() {
+  return (
+    <div>
+      <RawNav />
+      <Home />
+      <Footer />
+    </div>
+  );
+}
+
+// or getServerSideProps: GetServerSideProps<Props> = async ({ locale })
+export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale ?? "en", ["common"])),
+  },
+});
diff --git a/frontend-v2/pages/tokens.tsx b/frontend-v2/pages/tokens.tsx
new file mode 100644
index 0000000..0a0309c
--- /dev/null
+++ b/frontend-v2/pages/tokens.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import type { GetStaticProps, InferGetStaticPropsType } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { RawNav } from "@/shared/home/components/raw-nav";
+import { TokensContainer } from "@/shared/token-container/tokens-container";
+
+export default function TokensPage() {
+  return (
+    <div>
+      <RawNav />
+      <TokensContainer />
+    </div>
+  );
+}
+
+// or getServerSideProps: GetServerSideProps<Props> = async ({ locale })
+export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(locale ?? "en", ["common"])),
+  },
+});
diff --git a/frontend-v2/pages/tx/[txHash].tsx b/frontend-v2/pages/tx/[txHash].tsx
new file mode 100644
index 0000000..f8b7268
--- /dev/null
+++ b/frontend-v2/pages/tx/[txHash].tsx
@@ -0,0 +1,29 @@
+import { GetStaticProps } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { RawNav } from "@/shared/home/components/raw-nav";
+import React from "react";
+import nextI18NextConfig from "../../next-i18next.config.js";
+import { TxDetailsContainer } from "@/shared/tx-details-container/tx-details-container";
+
+export default function TxHashPage() {
+  return (
+    <>
+      <RawNav />
+      <TxDetailsContainer />
+    </>
+  );
+}
+
+export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(
+      locale ?? "en",
+      ["common"],
+      nextI18NextConfig,
+    )),
+  },
+});
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: false };
+}
diff --git a/frontend-v2/pages/txs/index.tsx b/frontend-v2/pages/txs/index.tsx
new file mode 100644
index 0000000..b68f10d
--- /dev/null
+++ b/frontend-v2/pages/txs/index.tsx
@@ -0,0 +1,26 @@
+import { BlockDetailsContainer } from "@/shared/block-details-container/block-details-container";
+import { GetStaticProps } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { RawNav } from "@/shared/home/components/raw-nav";
+import React from "react";
+import nextI18NextConfig from "../../next-i18next.config.js";
+import { TxsTableContainer } from "@/shared/txs-table-container/txs-table-container";
+
+export default function TxsPage() {
+  return (
+    <>
+      <RawNav />
+      <TxsTableContainer />
+    </>
+  );
+}
+
+export const getStaticProps: GetStaticProps<{}> = async ({ locale }) => ({
+  props: {
+    ...(await serverSideTranslations(
+      locale ?? "en",
+      ["common"],
+      nextI18NextConfig,
+    )),
+  },
+});
diff --git a/frontend-v2/public/favicon.ico b/frontend-v2/public/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/frontend-v2/public/favicon.ico differ
diff --git a/frontend-v2/public/favicon.svg b/frontend-v2/public/favicon.svg
new file mode 100644
index 0000000..f0a24b3
--- /dev/null
+++ b/frontend-v2/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><defs><style>.cls-1{fill:#fbb03b;}.cls-2{fill:#fff;}</style></defs><title>Asset 7</title><g id="Layer_2" data-name="Layer 2"><g id="App_Icon_Kit_A" data-name="App Icon Kit A"><rect class="cls-1" width="52" height="52"/><circle class="cls-2" cx="28.29" cy="11.21" r="5.08"/><path class="cls-2" d="M15.65,21.51c-.22.54,1.27,1.25,3.51,4A6.08,6.08,0,0,1,20.87,29a5,5,0,0,1-.19,1.56c-1.05,3.53-12.22,12.56-12,13s9.05-2.83,12.65-5.47c.33-.24,1.35-1,1.91-.68s.38,1.38.29,2c-.57,4.29-1.74,6.9-1.42,7.13.5.34,5.52-4.18,9.72-11.92,5.61-10.32,7.06-21,6-21.39-.38-.13-.78,1.16-3,3.18a17.24,17.24,0,0,1-5,3.32,18.48,18.48,0,0,1-5,1.22,36.2,36.2,0,0,1-4.59.29C17,21.35,15.84,21,15.65,21.51Z"/></g></g></svg>
diff --git a/frontend-v2/public/locales/en/common.json b/frontend-v2/public/locales/en/common.json
new file mode 100644
index 0000000..c138c0a
--- /dev/null
+++ b/frontend-v2/public/locales/en/common.json
@@ -0,0 +1,76 @@
+{
+  "bk.block": "Block",
+  "bk.block_details": "Block Details",
+  "bk.block_height": "Block Height",
+  "bk.block_height.tip": "The block height of a particular block is defined as the number of blocks preceding it in the blockchain.",
+  "bk.copy_address": "Copy address",
+  "bk.copy_hash": "Copy hash",
+  "bk.copy_parent_hash": "Copy Parent Hash",
+  "bk.difficulty": "Difficulty",
+  "bk.difficulty.tip": "Block difficulty for miner, used to calibrate block generation time.",
+  "bk.empty_txs": "There are no transactions for this block.",
+  "bk.gas_limit": "Gas Limit",
+  "bk.gas_limit.tip": "Total gas limit provided by all transactions in the block.",
+  "bk.gas_used": "Gas Used",
+  "bk.gas_used.tip": "The total gas amount used in the block and its percentage of gas filled in the block.",
+  "bk.hash": "Hash",
+  "bk.hash.tip": "The hash of the block from which this block was generated.",
+  "bk.once": "Nonce",
+  "bk.parent_hash": "Parent Hash",
+  "bk.parent_hash.tip": "The hash of the block from which this block was generated.",
+  "bk.size": "Size",
+  "bk.size.tip": "Size of the block in bytes.",
+  "bk.timestamp": "Timestamp",
+  "bk.timestamp.tip": "Date & time at which block was produced.",
+  "bk.total_difficulty": "Total Difficulty",
+  "bk.total_difficulty.tip": "Total difficulty of the chain until this block.",
+  "bk.txs": "Transactions",
+  "bk.txs.tip": "The number of transactions in the block.",
+  "bk.validator": "Validator",
+  "bk.validator.tip": "A block producer who successfully included the block onto the blockchain.",
+  "info.err": "Something went wrong, click to reload.",
+  "meta.description": "Blockroma is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.",
+  "meta.title": "Blockroma",
+  "nav.blocks": "Blocks",
+  "nav.search": "Search by address, token symbol name, transaction hash, or block number",
+  "nav.txs": "Transactions",
+  "not_found.bar": "Not Found",
+  "not_found.info": "We cannot find the page for you...",
+  "not_found.title": "Oops!",
+  "page.noscript": "We’re sorry, some parts of the website don’t work properly without JavaScript enabled.",
+  "tx.block": "Block",
+  "tx.block.tip": "Block number containing the transaction.",
+  "tx.copy_tx_hash": "Copy Transaction Hash",
+  "tx.fee": "Transaction Fee",
+  "tx.fee.tip": "Total transaction fee.",
+  "tx.from": "From",
+  "tx.from.tip": "Address (external or contract) sending the transaction.",
+  "tx.gas_limit": "Gas Limit",
+  "tx.gas_limit.tip": "Maximum gas amount approved for the transaction.",
+  "tx.gas_price": "Gas Price",
+  "tx.gas_price.tip": "Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage.",
+  "tx.gas_used": "Gas Used by Transaction",
+  "tx.gas_used.tip": "Actual gas amount used by the transaction.",
+  "tx.max_fee_per_gas": "Max Fee per Gas",
+  "tx.max_fee_per_gas.tip": "Maximum total amount per unit of gas a user is willing to pay for a transaction, including base fee and priority fee.",
+  "tx.nonce": "Nonce",
+  "tx.nonce.tip": "Transaction number from the sending address. Each transaction sent from an address increments the nonce by 1.",
+  "tx.pos": "Position",
+  "tx.raw_input": "Raw Input",
+  "tx.raw_input.tip": "Binary data included with the transaction. See input / logs below for additional info.",
+  "tx.result": "Result",
+  "tx.result.tip": "Current transaction state - Success, Failed (Error), or Pending (In Process)",
+  "tx.status": "Status",
+  "tx.status.tip": "The status of the transaction - Confirmed or Unconfirmed.",
+  "tx.timestamp": "Timestamp",
+  "tx.timestamp.tip": "Date & time of transaction inclusion, including length of time for confirmation.",
+  "tx.to": "To",
+  "tx.to.tip": "Address (external or contract) receiving the transaction.",
+  "tx.tx_details": "Transaction Details",
+  "tx.tx_hash": "Transaction Hash",
+  "tx.tx_hash.tip": "Unique character string (TxID) assigned to every verified transaction.",
+  "tx.tx_type": "Transaction Type",
+  "tx.tx_type.tip": "Transaction type, introduced in EIP-2718.",
+  "tx.value": "Value",
+  "tx.value.tip": "Value sent in the native token (and USD) if applicable."
+}
diff --git a/frontend-v2/public/webfonts/fa-brands-400.ttf b/frontend-v2/public/webfonts/fa-brands-400.ttf
new file mode 100644
index 0000000..430a02e
Binary files /dev/null and b/frontend-v2/public/webfonts/fa-brands-400.ttf differ
diff --git a/frontend-v2/public/webfonts/fa-brands-400.woff2 b/frontend-v2/public/webfonts/fa-brands-400.woff2
new file mode 100644
index 0000000..4d904aa
Binary files /dev/null and b/frontend-v2/public/webfonts/fa-brands-400.woff2 differ
diff --git a/frontend-v2/public/webfonts/fa-regular-400.ttf b/frontend-v2/public/webfonts/fa-regular-400.ttf
new file mode 100644
index 0000000..23e3feb
Binary files /dev/null and b/frontend-v2/public/webfonts/fa-regular-400.ttf differ
diff --git a/frontend-v2/public/webfonts/fa-regular-400.woff2 b/frontend-v2/public/webfonts/fa-regular-400.woff2
new file mode 100644
index 0000000..80e3b12
Binary files /dev/null and b/frontend-v2/public/webfonts/fa-regular-400.woff2 differ
diff --git a/frontend-v2/public/webfonts/fa-solid-900.ttf b/frontend-v2/public/webfonts/fa-solid-900.ttf
new file mode 100644
index 0000000..da90824
Binary files /dev/null and b/frontend-v2/public/webfonts/fa-solid-900.ttf differ
diff --git a/frontend-v2/public/webfonts/fa-solid-900.woff2 b/frontend-v2/public/webfonts/fa-solid-900.woff2
new file mode 100644
index 0000000..360ba11
Binary files /dev/null and b/frontend-v2/public/webfonts/fa-solid-900.woff2 differ
diff --git a/frontend-v2/public/webfonts/fa-v4compatibility.ttf b/frontend-v2/public/webfonts/fa-v4compatibility.ttf
new file mode 100644
index 0000000..e9545ed
Binary files /dev/null and b/frontend-v2/public/webfonts/fa-v4compatibility.ttf differ
diff --git a/frontend-v2/public/webfonts/fa-v4compatibility.woff2 b/frontend-v2/public/webfonts/fa-v4compatibility.woff2
new file mode 100644
index 0000000..db5b0b9
Binary files /dev/null and b/frontend-v2/public/webfonts/fa-v4compatibility.woff2 differ
diff --git a/frontend-v2/src/address-details-container/address-details-container.tsx b/frontend-v2/src/address-details-container/address-details-container.tsx
new file mode 100644
index 0000000..41b8245
--- /dev/null
+++ b/frontend-v2/src/address-details-container/address-details-container.tsx
@@ -0,0 +1,387 @@
+import React, { useState } from "react";
+import { normalizeTokenValue } from "@/shared/common/normalize-token-value";
+import { AddressTransactionsContainer } from "@/shared/address-details-container/address-transactions-container";
+import { useChainConfig } from "@/shared/common/use-chain-config";
+import { assetURL } from "@/shared/common/asset-url";
+import { useGetAddr } from "./hooks/use-get-addr";
+import { QrModal } from "./components/qr-modal";
+import { CopyAddress } from "../explorer-components/copy-address";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+
+export interface Addr {
+  fetchedCoinBalance?: string | null;
+  fetchedCoinBalanceBlockNumber?: number | null;
+  nonce?: number | null;
+  hash?: any;
+  hashQr?: string | null;
+  numTxs?: number | null;
+  gasUsed?: number | null;
+}
+
+export const AddressDetailsContainer: React.FC = () => {
+  const { t } = useTranslation("common");
+  const chainConfig = useChainConfig();
+  const router = useRouter();
+  const params = router.query;
+  const { addressHash: rawAddressHash } = params;
+  const addressHash = String(rawAddressHash).toLowerCase();
+  const [qrModalOpen, setQrModalOpen] = useState(false);
+
+  const { data, loading, error, refetch } = useGetAddr({
+    hash: addressHash,
+    first: 0,
+    after: 0,
+  });
+  if (loading) {
+    return <></>;
+  }
+  if (error && error.graphQLErrors[0]?.extensions?.code !== "NOT_FOUND") {
+    // TODO(dora):
+    return <button onClick={refetch}>error</button>;
+  }
+  const addr: Addr = data?.address ?? {};
+
+  return (
+    <main className="js-ad-dependant-pt pt-5">
+      <p className="alert alert-info" role="alert" />
+      <p className="alert alert-danger" role="alert" />
+      <section className="container">
+        <section
+          className="address-overview"
+          data-page="address-details"
+          data-page-address-hash={addressHash}
+          data-async-counters={`/address-counters?id=${addressHash}`}
+        >
+          <div className="row js-ad-dependant-mb-2 js-ad-dependant-mb-5-reverse mb-2">
+            <div className="col-md-12 js-ad-dependant-mb-2 mb-2">
+              <div className="card js-ad-dependant-mb-2 mb-2">
+                <div className="card-body fs-14" style={{ lineHeight: "31px" }}>
+                  <h1 className="card-title lg-card-title mb-2-desktop">
+                    <div className="title-with-label">Address Details</div>
+                    <span className="overview-title-buttons float-right">
+                      <CopyAddress addressHash={addr.hash} />
+                      <span
+                        className="overview-title-item"
+                        data-target="#qrModal"
+                        data-toggle="modal"
+                        onClick={() => setQrModalOpen(true)}
+                      >
+                        <span
+                          className="btn-qr-icon i-tooltip-2"
+                          data-toggle="tooltip"
+                          data-placement="top"
+                          title="QR Code"
+                          aria-label="Show QR Code"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 32.5 32.5"
+                            width={32}
+                            height={32}
+                          >
+                            <path
+                              fillRule="evenodd"
+                              d="M22.5 24.5v-2h2v2h-2zm-1-4v-1h1v1h-1zm1-3h2v2h-2v-2zm1-2h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm-1-5h-3v3h3v-3zm-8 14h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm-1-5h-3v3h3v-3zm1-4h-5a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1zm-1-5h-3v3h3v-3zm6 9h-2v-2h2v2zm1 1h-1v-1h1v1zm0 1v1h-1v-1h1zm-1 3h-2v-2h2v2z"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </span>
+                  </h1>
+                  <h3
+                    className="address-detail-hash-title mb-4 "
+                    data-test="address_detail_hash"
+                  >
+                    {addressHash}
+                  </h3>
+                  <dl className="row">
+                    <dt className="col-sm-4 col-md-4 col-lg-3 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={`Address balance in ${chainConfig.symbol} (doesn't include ERC20, ERC721, ERC1155 tokens).`}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      Balance
+                    </dt>
+                    <dd
+                      className="col-sm-8 col-md-8 col-lg-9"
+                      data-test="address_balance"
+                    >
+                      {normalizeTokenValue(addr.fetchedCoinBalance)}{" "}
+                      {chainConfig.symbol}
+                      {/*
+
+                      // TODO(dora) coin balance
+
+
+                                            <span className="address-current-balance">
+                        (
+                        <span
+                          data-wei-value={45253703500000000000}
+                          data-usd-exchange-rate="0.0188876"
+                          data-placement="top"
+                          data-toggle="tooltip"
+                          data-html="true"
+                          data-original-title="@ 0.0188876/BMO"
+                        >
+                          $0.854734 USD
+                        </span>
+                        )
+                      </span>
+                      */}
+                    </dd>
+                  </dl>
+                  <dl className="row" data-test="outside_of_dropdown">
+                    <dt className="col-sm-4 col-md-4 col-lg-3 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="All tokens in the account and total value."
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      Tokens
+                    </dt>
+                    <dd
+                      className="col-sm-8 col-md-8 col-lg-9"
+                      data-test="address_tokens"
+                      data-selector="balance-card"
+                    >
+                      <div
+                        className="address-current-balance"
+                        data-token-balance-dropdown
+                        data-api_path={`/address/${addressHash}/token-balances`}
+                      >
+                        <div className="d-flex">
+                          <span
+                            data-tokens-count
+                            style={{ lineHeight: "31px" }}
+                          >
+                            0 tokens
+                          </span>
+                          <div
+                            className="dropdown-menu dropdown-menu-right token-balance-dropdown p-0"
+                            aria-labelledby="dropdown-tokens"
+                          >
+                            <div data-dropdown-items className="dropdown-items">
+                              <div className="position-relative">
+                                <svg
+                                  className="position-absolute dropdown-search-icon"
+                                  viewBox="0 0 16 17"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width={16}
+                                  height={17}
+                                >
+                                  <path
+                                    fill="#7DD79F"
+                                    fillRule="evenodd"
+                                    d="M15.713 15.727a.982.982 0 0 1-1.388 0l-2.289-2.29C10.773 14.403 9.213 15 7.5 15A7.5 7.5 0 1 1 15 7.5c0 1.719-.602 3.284-1.575 4.55l2.288 2.288a.983.983 0 0 1 0 1.389zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z"
+                                  />
+                                </svg>
+                                <input
+                                  className="w-100 dropdown-search-field"
+                                  id="token_search_name"
+                                  name="token_search[name]"
+                                  placeholder="Search tokens"
+                                  type="text"
+                                  data-filter-dropdown-tokens
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </dd>
+                  </dl>
+                  <dl className="row address-transactions-count-item">
+                    <dt className="col-sm-4 col-md-4 col-lg-3 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="Number of transactions related to this address."
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("nav.txs")}
+                    </dt>
+                    <dd
+                      className="col-sm-8 col-md-8 col-lg-9"
+                      data-test="address_transaction_count"
+                    >
+                      <a
+                        href="#txs"
+                        className="page-link bs-label large btn-no-border-link-to-tems"
+                        data-selector="transaction-count"
+                      >
+                        {addr.numTxs ?? 0} {t("nav.txs")}
+                      </a>
+                    </dd>
+                  </dl>
+                  <dl className="row address-transfers-count-item">
+                    <dt className="col-sm-4 col-md-4 col-lg-3 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="Number of transfers to/from this address."
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      Transfers
+                    </dt>
+                    <dd
+                      className="col-sm-8 col-md-8 col-lg-9"
+                      data-test="address_transfer_count"
+                    >
+                      <a
+                        href={assetURL(
+                          `address/${addressHash}/token-transfers#transfers`,
+                        )}
+                        className="page-link bs-label large btn-no-border-link-to-tems"
+                        data-selector="transfer-count"
+                      >
+                        0 Transfers
+                      </a>
+                    </dd>
+                  </dl>
+                  <dl className="row address-nonce-item">
+                    <dt className="col-sm-4 col-md-4 col-lg-3 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="Nonce is transaction count of the account."
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      Nonce
+                    </dt>
+
+                    <dd
+                      className="col-sm-8 col-md-8 col-lg-9"
+                      data-test="address_transaction_count"
+                    >
+                      <span data-selector="Nonce">{addr.nonce ?? 0}</span>
+                    </dd>
+                  </dl>
+                  <dl className="row address-gas-used-item">
+                    <dt className="col-sm-4 col-md-4 col-lg-3 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="Gas used by the address."
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      Gas Used
+                    </dt>
+                    <dd
+                      className="col-sm-8 col-md-8 col-lg-9"
+                      data-test="address_gas_used"
+                    >
+                      <span data-selector="gas-usage-count">
+                        {addr.gasUsed ?? 0}
+                      </span>
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-4 col-md-4 col-lg-3 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="Block number in which the address was updated."
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      Last Balance Update
+                    </dt>
+                    <dd
+                      className="col-sm-8 col-md-8 col-lg-9"
+                      data-test="address_last_balance_update"
+                    >
+                      <a
+                        className="tile-title-lg"
+                        href={assetURL(
+                          `block/${addr.fetchedCoinBalanceBlockNumber}`,
+                        )}
+                      >
+                        {addr.fetchedCoinBalanceBlockNumber ?? 0}
+                      </a>
+                    </dd>
+                  </dl>
+                  <dl
+                    className="row address-validation-count-item"
+                    style={{ display: "none" }}
+                  >
+                    <dt className="col-sm-4 col-md-4 col-lg-3 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="Number of blocks validated by this validator."
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      Blocks Validated
+                    </dt>
+                    <dd
+                      className="col-sm-8 col-md-8 col-lg-9"
+                      data-test="address_blocks_validated"
+                    >
+                      <span data-selector="validation-count"></span>
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <QrModal
+          addressHash={addressHash}
+          open={qrModalOpen}
+          hashQr={addr.hashQr}
+          onClose={() => setQrModalOpen(false)}
+        />
+
+        <div className="ad-container mb-2" style={{}}>
+          <div className="coinzilla" data-zone="C-26660bf627543e46851" />
+        </div>
+
+        <AddressTransactionsContainer addressHash={addressHash} />
+      </section>
+    </main>
+  );
+};
diff --git a/frontend-v2/src/address-details-container/address-transactions-container.tsx b/frontend-v2/src/address-details-container/address-transactions-container.tsx
new file mode 100644
index 0000000..f33574b
--- /dev/null
+++ b/frontend-v2/src/address-details-container/address-transactions-container.tsx
@@ -0,0 +1,136 @@
+import React from "react";
+import { AdrTransactionItem } from "@/shared/explorer-components/adr-transaction.item";
+import { useGetAddr } from "@/shared/address-details-container/hooks/use-get-addr";
+
+import { assetURL } from "@/shared/common/asset-url";
+import { useTranslation } from "next-i18next";
+
+type Props = {
+  addressHash: string;
+};
+
+export const AddressTransactionsContainer: React.FC<Props> = ({
+  addressHash,
+}) => {
+  const { t } = useTranslation("common");
+  const { data, loading, error, refetch } = useGetAddr({
+    hash: addressHash,
+    first: 100,
+    after: 0,
+  });
+  if (loading) {
+    // TODO(dora):
+    return <></>;
+  }
+
+  const txs = data?.address?.transactions?.edges?.map((e) => e?.node);
+
+  return (
+    <section data-page="address-transactions" id="txs">
+      <div className="card">
+        <div className="card-tabs js-card-tabs">
+          <a
+            className="card-tab active"
+            href={assetURL(`address/${addressHash}/transactions`)}
+          >
+            Transactions
+          </a>
+        </div>
+        <div
+          className="card-body"
+          data-async-listing={assetURL(`address/${addressHash}/transactions`)}
+        >
+          <div
+            data-selector="channel-disconnected-message"
+            style={{ display: "none" }}
+          >
+            <div
+              data-selector="reload-button"
+              className="alert alert-danger"
+              style={{ padding: "0.75rem 0rem", cursor: "pointer" }}
+            >
+              <span className="alert alert-danger">
+                Connection Lost, click to load newer transactions
+              </span>
+            </div>
+          </div>
+          <div className="clearfix">
+            <h2 className="card-title float-left">{t("nav.txs")}</h2>
+          </div>
+          <div
+            data-selector="channel-batching-message"
+            style={{ display: "none" }}
+          >
+            <div
+              data-selector="reload-transactions-button"
+              className="alert alert-info"
+            >
+              <a href="#" className="alert-link">
+                <span data-selector="channel-batching-count" /> More
+                transactions have come in
+              </a>
+            </div>
+          </div>
+
+          {error &&
+            error.graphQLErrors[0]?.extensions?.code !== "NOT_FOUND" && (
+              <button
+                data-error-message
+                className="alert alert-danger col-12 text-left"
+                onClick={refetch}
+              >
+                <span className="alert-link">{t("info.err")}</span>
+              </button>
+            )}
+
+          {(!txs || !txs.length) && (
+            <div data-empty-response-message>
+              <div
+                className="tile tile-muted text-center"
+                data-selector="empty-transactions-list"
+              >
+                There are no transactions for this address.
+              </div>
+            </div>
+          )}
+
+          {!!txs && (
+            <div data-items>
+              {txs.map((tx) => (
+                <AdrTransactionItem
+                  key={tx?.hash}
+                  tx={tx}
+                  selfAddressHash={addressHash}
+                />
+              ))}
+            </div>
+          )}
+
+          {/*
+          TODO(dora): download csv
+
+                    <div className="transaction-bottom-panel">
+            <div csv-download className="download-all-transactions">
+              Download{" "}
+              <a
+                className="download-all-transactions-link"
+                href="/csv-export?address=0x11F3fb5677c84131377BD9762Ee2ef451eEF47DB&type=transactions"
+              >
+                CSV
+                <svg xmlns="http://www.w3.org/2000/svg" width={14} height={16}>
+                  <path
+                    fill="#333333"
+                    fillRule="evenodd"
+                    d="M13 16H1c-.999 0-1-1-1-1V1s-.004-1 1-1h6l7 7v8s-.032 1-1 1zm-1-8c0-.99-1-1-1-1H8s-1 .001-1-1V3c0-.999-1-1-1-1H2v12h10V8z"
+                  />
+                </svg>
+              </a>
+            </div>
+          </div>
+
+          */}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/frontend-v2/src/address-details-container/components/qr-modal.tsx b/frontend-v2/src/address-details-container/components/qr-modal.tsx
new file mode 100644
index 0000000..45db02a
--- /dev/null
+++ b/frontend-v2/src/address-details-container/components/qr-modal.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+import { useEffect } from "react";
+import OutsideClickHandler from "react-outside-click-handler";
+import { assetURL } from "@/shared/common/asset-url";
+
+type Props = {
+  addressHash: string;
+  open: boolean;
+  onClose: () => void;
+  hashQr?: string | null;
+};
+
+export function QrModal({
+  addressHash,
+  open,
+  onClose,
+  hashQr,
+}: Props): JSX.Element {
+  useEffect(() => {
+    const cl = window.document.getElementsByTagName("body")[0].classList;
+    if (open) {
+      cl.add("modal-open");
+    } else {
+      cl.remove("modal-open");
+    }
+
+    window.addEventListener("keyup", (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    });
+  }, [open]);
+  return (
+    <div
+      className={`modal fade${open ? " show" : ""}`}
+      id="qrModal"
+      tabIndex={-1}
+      role="dialog"
+      style={{ display: open ? "block" : "none" }}
+      aria-labelledby="qrModalLabel"
+      aria-hidden={open ? "false" : "true"}
+      aria-modal={open ? "true" : "false"}
+    >
+      <div className="modal-dialog modal-sm" role="document">
+        <OutsideClickHandler onOutsideClick={onClose}>
+          <div className="modal-content">
+            <div className="modal-header">
+              <h2 className="modal-title" id="qrModalLabel">
+                QR Code
+              </h2>
+              <button
+                type="button"
+                className="close"
+                data-dismiss="modal"
+                aria-label="Close"
+                onClick={onClose}
+              >
+                <span aria-hidden="true">×</span>
+              </button>
+            </div>
+            <div className="modal-body">
+              <img
+                src={
+                  hashQr || assetURL("images/errors-img/etc-tx-not-found.png")
+                }
+                className="qr-code"
+                alt="qr_code"
+                title={addressHash}
+              />
+            </div>
+            <div className="modal-footer">
+              <button
+                onClick={onClose}
+                type="button"
+                className="btn btn-primary"
+                data-dismiss="modal"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </OutsideClickHandler>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend-v2/src/address-details-container/data/queries.ts b/frontend-v2/src/address-details-container/data/queries.ts
new file mode 100644
index 0000000..c9644ff
--- /dev/null
+++ b/frontend-v2/src/address-details-container/data/queries.ts
@@ -0,0 +1,49 @@
+import { gql } from "@apollo/client";
+
+export const queryAddressByHash = gql`
+  query QueryAddressByHash($hash: Buffer!, $first: Float, $after: String) {
+    address(hash: $hash) {
+      fetchedCoinBalance
+      fetchedCoinBalanceBlockNumber
+      nonce
+      hash
+      gasUsed
+      hashQr
+      numTxs
+
+      transactions(first: $first, after: $after) {
+        pageInfo {
+          hasNextPage
+          startCursor
+
+          hasPreviousPage
+          endCursor
+        }
+        edges {
+          node {
+            id
+            timestamp
+            hash
+            blockNumber
+            value
+            gasUsed
+            cumulativeGasUsed
+            error
+            fromAddressHash
+            toAddressHash
+            status
+            gas
+            gasPrice
+            index
+            input
+            nonce
+            r
+            s
+            v
+          }
+          cursor
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend-v2/src/address-details-container/hooks/use-get-addr.ts b/frontend-v2/src/address-details-container/hooks/use-get-addr.ts
new file mode 100644
index 0000000..569956e
--- /dev/null
+++ b/frontend-v2/src/address-details-container/hooks/use-get-addr.ts
@@ -0,0 +1,26 @@
+import { useQuery } from "@apollo/client";
+import { queryAddressByHash } from "@/shared/address-details-container/data/queries";
+import { QueryAddressByHash } from "@/shared/address-details-container/data/__generated__/QueryAddressByHash";
+
+export const useGetAddr = ({
+  hash,
+  first,
+  after,
+}: {
+  hash?: string;
+  first: number;
+  after: number;
+}) => {
+  const { loading, data, error, refetch } = useQuery<QueryAddressByHash>(
+    queryAddressByHash,
+    {
+      ssr: false,
+      variables: {
+        hash,
+        first,
+        after: String(after),
+      },
+    },
+  );
+  return { loading, data, error, refetch };
+};
diff --git a/frontend-v2/src/blks-table-container/blks-table-container.tsx b/frontend-v2/src/blks-table-container/blks-table-container.tsx
new file mode 100644
index 0000000..b22397d
--- /dev/null
+++ b/frontend-v2/src/blks-table-container/blks-table-container.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { useQueryBlocks } from "@/shared/blks-table-container/hooks/use-query-blocks";
+import { BlkList } from "@/shared/explorer-components/blk-list";
+import { Pagination } from "@/shared/explorer-components/pagination";
+
+import { paginationProcessTotalNumPage } from "@/shared/common/functions/paginations";
+import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
+
+export const BlksTableContainer: React.FC = () => {
+  const { t } = useTranslation("common");
+  return (
+    <main className="js-ad-dependant-pt pt-5">
+      <p className="alert alert-info" role="alert" />
+      <p className="alert alert-danger" role="alert" />
+      <section className="container" data-page="block-list">
+        <div className="ad mb-3" style={{ display: "none" }}>
+          <span className="ad-prefix" />:{" "}
+          <img className="ad-img-url" width={20} height={20} />{" "}
+          <b>
+            <span className="ad-name" />
+          </b>{" "}
+          - <span className="ad-short-description" />{" "}
+          <a className="ad-url">
+            <b>
+              <span className="ad-cta-button" />
+            </b>
+          </a>
+        </div>
+        <div className="card">
+          <div className="card-body" data-async-listing="/poa/core/blocks">
+            <div
+              data-selector="channel-disconnected-message"
+              style={{ display: "none" }}
+            >
+              <div
+                data-selector="reload-button"
+                className="alert alert-danger"
+                style={{ padding: "0.75rem 0rem", cursor: "pointer" }}
+              >
+                <span className="alert alert-danger">
+                  Connection Lost, click to load newer blocks
+                </span>
+              </div>
+            </div>
+            <h1 className="card-title list-title-description">
+              {t("nav.blocks")}
+            </h1>
+
+            <TableWithPagination />
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+const TableWithPagination = () => {
+  const router = useRouter();
+  const search = router.query;
+  const initialPage = Number(search.page) || 1;
+  const [curPage, setCurPage] = useState(initialPage);
+  const pageSize = 20;
+  const { t } = useTranslation("common");
+
+  const setCurPageWithSideEffect = (p: number) => {
+    setCurPage(p);
+    router.push({ search: `?page=${p}` });
+  };
+  const { loading, data, error, refetch } = useQueryBlocks(
+    { first: pageSize, after: (curPage - 1) * pageSize },
+    {},
+  );
+  if (loading) {
+    // TODO(dora)
+    return <></>;
+  }
+
+  const blks = data?.blocks?.edges?.map((e) => e?.node);
+
+  const numPage = paginationProcessTotalNumPage(data?.blocks);
+
+  return (
+    <>
+      {error && (
+        <button
+          onClick={refetch}
+          data-error-message
+          className="alert alert-danger col-12 text-left"
+        >
+          <span className="alert-link">{t("info.err")}</span>
+        </button>
+      )}
+
+      {blks && blks?.length > 0 ? (
+        <>
+          <div className="list-top-pagination-container-wrapper">
+            <Pagination
+              setCurPage={setCurPageWithSideEffect}
+              curPage={curPage}
+              numPages={numPage}
+              position="top"
+            />
+          </div>
+          <BlkList blks={blks} />
+          <div className="list-bottom-pagination-container-wrapper">
+            <Pagination
+              position="bottom"
+              setCurPage={setCurPageWithSideEffect}
+              curPage={curPage}
+              numPages={numPage}
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          <div data-empty-response-message>
+            <span>There are no blocks.</span>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
diff --git a/frontend-v2/src/blks-table-container/data/queries.ts b/frontend-v2/src/blks-table-container/data/queries.ts
new file mode 100644
index 0000000..719fdc5
--- /dev/null
+++ b/frontend-v2/src/blks-table-container/data/queries.ts
@@ -0,0 +1,31 @@
+import { gql } from "@apollo/client";
+
+export const queryBlocks = gql`
+  query QueryBlocks($first: Float, $after: String) {
+    blocks(first: $first, after: $after) {
+      edges {
+        node {
+          consensus
+          difficulty
+          gasLimit
+          gasUsed
+          hash
+          miner
+          nonce
+          number
+          parentHash
+          size
+          timestamp
+          totalDifficulty
+          numTxs
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+        startCursor
+        hasPreviousPage
+      }
+    }
+  }
+`;
diff --git a/frontend-v2/src/blks-table-container/hooks/use-query-blocks.ts b/frontend-v2/src/blks-table-container/hooks/use-query-blocks.ts
new file mode 100644
index 0000000..87baeaa
--- /dev/null
+++ b/frontend-v2/src/blks-table-container/hooks/use-query-blocks.ts
@@ -0,0 +1,29 @@
+import { queryBlocks } from "@/shared/blks-table-container/data/queries";
+import { useQuery } from "@apollo/client";
+import { QueryBlocks } from "@/shared/blks-table-container/data/__generated__/QueryBlocks";
+
+export const useQueryBlocks = (
+  {
+    first,
+    after,
+  }: {
+    first: number;
+    after: number;
+  },
+  { pollInterval = undefined }: { pollInterval?: number },
+) => {
+  const { loading, data, error, refetch } = useQuery<QueryBlocks>(queryBlocks, {
+    ssr: false,
+    variables: {
+      first,
+      after: String(after),
+    },
+    pollInterval,
+    ...(pollInterval
+      ? {
+          fetchPolicy: "no-cache",
+        }
+      : {}),
+  });
+  return { loading, data, error, refetch };
+};
diff --git a/frontend-v2/src/block-details-container/block-details-container.tsx b/frontend-v2/src/block-details-container/block-details-container.tsx
new file mode 100644
index 0000000..e829382
--- /dev/null
+++ b/frontend-v2/src/block-details-container/block-details-container.tsx
@@ -0,0 +1,520 @@
+import * as React from "react";
+import { useQueryBlock } from "@/shared/block-details-container/hooks/use-query-block";
+import { CopyToClipboard } from "@/shared/explorer-components/copy-to-clipboard";
+import { TickingTs } from "@/shared/explorer-components/ticking-ts";
+import format from "date-fns/format";
+
+import { assetURL } from "@/shared/common/asset-url";
+import { BlockTransactions } from "./block-transactions";
+import { useTranslation } from "next-i18next";
+import Link from "next/link";
+import { getGasUsedPercent } from "../common/get-gas-used-percent";
+import { useRouter } from "next/router";
+
+export function BlockDetailsContainer(): JSX.Element {
+  const { t } = useTranslation("common");
+  const params = useRouter();
+  const blockNumber = parseInt((params.query.blockNumber as string) || "0", 10);
+  const { data, loading, error } = useQueryBlock(blockNumber);
+  if (loading) {
+    // TODO(dora)
+    return <></>;
+  }
+  if (error) {
+    // TODO(dora)
+    return <></>;
+  }
+  if (!data || !data.block) {
+    // TODO(dora)
+    return <></>;
+  }
+  const {
+    difficulty,
+    gasLimit,
+    gasUsed,
+    hash,
+    miner,
+    nonce,
+    parentHash,
+    size,
+    timestamp,
+    totalDifficulty,
+    numTxs,
+  } = data.block;
+  const gasUsedPercent = getGasUsedPercent(gasUsed, gasLimit);
+  return (
+    <main className="js-ad-dependant-pt pt-5">
+      <p className="alert alert-info" role="alert" />
+      <p className="alert alert-danger" role="alert" />
+      <section className="container">
+        <section>
+          <div className="ad mb-3" style={{ display: "none" }}>
+            <span className="ad-prefix" />:{" "}
+            <img className="ad-img-url" width={20} height={20} />{" "}
+            <b>
+              <span className="ad-name" />
+            </b>{" "}
+            - <span className="ad-short-description" />{" "}
+            <a className="ad-url">
+              <b>
+                <span className="ad-cta-button" />
+              </b>
+            </a>
+          </div>
+          <div className="row">
+            <div className="col-md-12 js-ad-dependant-mb-2 mb-2">
+              <div className="card js-ad-dependant-mb-2 mb-2">
+                <div className="card-body fs-14" style={{ lineHeight: "32px" }}>
+                  <dl className="pagination-container">
+                    <h1 className="card-title" data-test="detail_type">
+                      {t("bk.block_details")}
+                    </h1>
+                    <ul className="pagination">
+                      <li className="page-item">
+                        <Link
+                          className="page-link"
+                          href={`/block/${blockNumber - 1}`}
+                          data-prev-page-button
+                          data-placement="top"
+                          data-toggle="tooltip"
+                          title="View previous block"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width={6}
+                            height={10}
+                          >
+                            <path
+                              fillRule="evenodd"
+                              d="M2.358 5l3.357 3.358a.959.959 0 1 1-1.357 1.357L.502 5.859c-.076-.042-.153-.08-.217-.144A.949.949 0 0 1 .011 5a.949.949 0 0 1 .274-.715c.064-.064.142-.102.217-.145L4.358.285a.959.959 0 1 1 1.357 1.357L2.358 5z"
+                            />
+                          </svg>
+                        </Link>
+                      </li>
+                      <li className="page-item">
+                        <a
+                          className="page-link no-hover"
+                          href="#"
+                          data-page-number
+                        >
+                          {t("bk.block")} {blockNumber}
+                        </a>
+                      </li>
+                      <li className="page-item">
+                        <Link
+                          className="page-link"
+                          href={`/block/${blockNumber + 1}`}
+                          data-next-page-button
+                          data-placement="top"
+                          data-toggle="tooltip"
+                          title="View next block"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width={6}
+                            height={10}
+                          >
+                            <path
+                              fillRule="evenodd"
+                              d="M5.715 5.715c-.064.064-.141.102-.217.144L1.642 9.715A.959.959 0 1 1 .285 8.358L3.642 5 .285 1.642A.959.959 0 1 1 1.642.285L5.498 4.14c.075.043.153.081.217.145A.949.949 0 0 1 5.989 5a.949.949 0 0 1-.274.715z"
+                            />
+                          </svg>
+                        </Link>
+                      </li>
+                    </ul>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.block_height.tip") ?? ""}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.block_height")}
+                    </dt>
+                    <dd
+                      className="col-sm-9 col-lg-10"
+                      data-test="block_detail_number"
+                    >
+                      {blockNumber}
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.timestamp.tip") ?? ""}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.timestamp")}
+                    </dt>
+                    <dd
+                      className="col-sm-9 col-lg-10"
+                      data-from-now={timestamp}
+                    >
+                      <TickingTs timestamp={timestamp} /> |{" "}
+                      {format(new Date(timestamp), "MMM-d-y hh:mm:ss a x")} UTC
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.txs.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.txs")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      <a
+                        href="#txs"
+                        className="page-link bs-label large btn-no-border-link-to-tems"
+                      >
+                        {numTxs} {t("nav.txs")}
+                      </a>
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.validator.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.validator")}{" "}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      <span>
+                        <a
+                          data-test="address_hash_link"
+                          href={assetURL(`address/${miner}`)}
+                        >
+                          {miner}
+                        </a>
+                      </span>
+                      <CopyToClipboard
+                        value={miner}
+                        reason={t("bk.copy_address")}
+                      />
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.size.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.size")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {Number(size).toLocaleString()} bytes
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.hash.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.hash")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {hash}
+
+                      <CopyToClipboard
+                        value={hash}
+                        reason={t("bk.copy_hash")}
+                      />
+                    </dd>
+                  </dl>
+
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.parent_hash.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.parent_hash")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {blockNumber > 0 ? (
+                        <a
+                          className="transaction__link"
+                          href={assetURL(`block/${blockNumber - 1}`)}
+                        >
+                          {parentHash}
+                        </a>
+                      ) : (
+                        parentHash
+                      )}
+
+                      <CopyToClipboard
+                        value={parentHash}
+                        reason={t("bk.copy_parent_hash")}
+                      />
+                    </dd>
+                  </dl>
+
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.difficulty.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.difficulty")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {Number(difficulty).toLocaleString()}
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.total_difficulty.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.total_difficulty")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {Number(totalDifficulty).toLocaleString()}
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.gas_used.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.gas_used")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {Number(gasUsed).toLocaleString()} | {gasUsedPercent}%
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("bk.gas_limit.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.gas_limit")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {Number(gasLimit).toLocaleString()}
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="64-bit hash of value verifying proof-of-work (note: null for BMO chains)."
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("bk.once")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">{nonce}</dd>
+                  </dl>
+                  {/*
+                  TODO(dora): baseFeePerGas
+
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="Minimum fee required per unit of gas. Fee adjusts based on network congestion."
+                      >
+                        <i className="fa-solid fa-info-circle"/>
+                      </span>
+                      Base Fee per Gas
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">{0} Gwei</dd>
+                  </dl>
+
+                  TODO(dora): Burnt Fees
+<dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="BMO burned from transactions included in the block (Base fee (per unit of gas) * Gas Used)."
+                      >
+                        <i className="fa-solid fa-info-circle"/>
+                      </span>
+                      Burnt Fees
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      <i className="fa-solid fa-fire i-tooltip-2"/> 0 BMO
+                    </dd>
+                  </dl>
+
+                  // TODO(dora): Priority Fee / Tip
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="User-defined tips sent to validator for transaction priority/inclusion."
+                      >
+                        <i className="fa-solid fa-info-circle"/>
+                      </span>
+                      Priority Fee / Tip
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">0 BMO</dd>
+                  </dl>
+
+                  // TODO(dora): block reward
+                   <hr/>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees."
+                      >
+                        <i className="fa-solid fa-info-circle"/>
+                      </span>
+                      BMO Mania Reward
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">0.5 BMO</dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees."
+                      >
+                        <i className="fa-solid fa-info-circle"/>
+                      </span>
+                      Validator Reward
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">1.0175886759375 BMO</dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees."
+                      >
+                        <i className="fa-solid fa-info-circle"/>
+                      </span>
+                      Emission Reward
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">0.5 BMO</dd>
+                  </dl>
+                  */}
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <BlockTransactions blockNumber={blockNumber} />
+      </section>
+    </main>
+  );
+}
diff --git a/frontend-v2/src/block-details-container/block-transactions-list-container.tsx b/frontend-v2/src/block-details-container/block-transactions-list-container.tsx
new file mode 100644
index 0000000..0ec5daa
--- /dev/null
+++ b/frontend-v2/src/block-details-container/block-transactions-list-container.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { useGetTxs } from "@/shared/block-details-container/hooks/use-get-txs";
+import { TxsList } from "@/shared/explorer-components/txs-list";
+
+import { useTranslation } from "next-i18next";
+
+type Props = {
+  blockNumber: number;
+};
+
+export const BlockTransactionsListContainer: React.FC<Props> = ({
+  blockNumber,
+}) => {
+  const { t } = useTranslation("common");
+  const { loading, error, data, refetch } = useGetTxs(
+    {
+      blockNumber,
+      first: 1000,
+      after: 0,
+    },
+    {},
+  );
+  if (loading) {
+    // TODO(dora)
+    return <></>;
+  }
+
+  const txs = data?.transactions?.edges?.map((e) => e?.node);
+
+  return (
+    <div
+      className="card-body"
+      data-async-load
+      data-async-listing="/block/26559654/transactions"
+      id="txs"
+    >
+      {error && (
+        <button
+          data-error-message
+          className="alert alert-danger col-12 text-left"
+          onClick={refetch}
+        >
+          <span className="alert-link">{t("info.err")}</span>
+        </button>
+      )}
+
+      {!txs?.length && (
+        <div data-empty-response-message>
+          <div
+            className="tile tile-muted text-center"
+            data-selector="empty-transactions-list"
+          >
+            {t("bk.empty_txs")}
+          </div>
+        </div>
+      )}
+
+      {!!txs?.length && <TxsList txs={txs} />}
+    </div>
+  );
+};
diff --git a/frontend-v2/src/block-details-container/block-transactions.tsx b/frontend-v2/src/block-details-container/block-transactions.tsx
new file mode 100644
index 0000000..772f542
--- /dev/null
+++ b/frontend-v2/src/block-details-container/block-transactions.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { BlockTransactionsListContainer } from "@/shared/block-details-container/block-transactions-list-container";
+
+import { useTranslation } from "next-i18next";
+import Link from "next/link";
+
+export function BlockTransactions({
+  blockNumber,
+}: {
+  blockNumber: number;
+}): JSX.Element {
+  const { t } = useTranslation("common");
+  return (
+    <section>
+      <div className="card mb-3">
+        <div className="card-tabs js-card-tabs">
+          <Link
+            className="card-tab active noCaret"
+            href={`/block/${blockNumber}/transactions`}
+          >
+            {t("nav.txs")}
+          </Link>
+        </div>
+
+        <BlockTransactionsListContainer blockNumber={blockNumber} />
+      </div>
+    </section>
+  );
+}
diff --git a/frontend-v2/src/block-details-container/data/quries.ts b/frontend-v2/src/block-details-container/data/quries.ts
new file mode 100644
index 0000000..bc238a4
--- /dev/null
+++ b/frontend-v2/src/block-details-container/data/quries.ts
@@ -0,0 +1,57 @@
+import { gql } from "@apollo/client";
+
+export const queryBlock = gql`
+  query QueryBlock($blockNumber: Int!) {
+    block(number: $blockNumber) {
+      consensus
+      difficulty
+      gasLimit
+      gasUsed
+      hash
+      miner
+      nonce
+      number
+      parentHash
+      size
+      timestamp
+      totalDifficulty
+      numTxs
+    }
+  }
+`;
+
+export const getTxs = gql`
+  query GetTxs($blockNumber: Int, $first: Float, $after: String) {
+    transactions(blockNumber: $blockNumber, first: $first, after: $after) {
+      pageInfo {
+        hasNextPage
+        endCursor
+        startCursor
+        hasPreviousPage
+      }
+      edges {
+        node {
+          id
+          timestamp
+          hash
+          blockNumber
+          value
+          gasUsed
+          cumulativeGasUsed
+          error
+          fromAddressHash
+          toAddressHash
+          status
+          gas
+          gasPrice
+          index
+          input
+          nonce
+          r
+          s
+          v
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend-v2/src/block-details-container/hooks/use-get-txs.ts b/frontend-v2/src/block-details-container/hooks/use-get-txs.ts
new file mode 100644
index 0000000..aafaa3f
--- /dev/null
+++ b/frontend-v2/src/block-details-container/hooks/use-get-txs.ts
@@ -0,0 +1,27 @@
+import { getTxs } from "@/shared/block-details-container/data/quries";
+import { useQuery } from "@apollo/client";
+import { GetTxs } from "@/shared/block-details-container/data/__generated__/GetTxs";
+
+export const useGetTxs = (
+  filters: {
+    blockNumber?: number;
+    first: number;
+    after: number;
+  },
+  { pollInterval }: { pollInterval?: number },
+) => {
+  const { loading, data, error, refetch } = useQuery<GetTxs>(getTxs, {
+    ssr: false,
+    variables: {
+      ...filters,
+      after: String(filters.after),
+    },
+    pollInterval,
+    ...(pollInterval
+      ? {
+          fetchPolicy: "no-cache",
+        }
+      : {}),
+  });
+  return { loading, data, error, refetch };
+};
diff --git a/frontend-v2/src/block-details-container/hooks/use-query-block.ts b/frontend-v2/src/block-details-container/hooks/use-query-block.ts
new file mode 100644
index 0000000..46a492f
--- /dev/null
+++ b/frontend-v2/src/block-details-container/hooks/use-query-block.ts
@@ -0,0 +1,11 @@
+import { useQuery } from "@apollo/client";
+import { queryBlock } from "@/shared/block-details-container/data/quries";
+import { QueryBlock } from "../data/__generated__/QueryBlock";
+
+export const useQueryBlock = (blockNumber: number) => {
+  const { loading, data, error, refetch } = useQuery<QueryBlock>(queryBlock, {
+    ssr: false,
+    variables: { blockNumber },
+  });
+  return { loading, data, error, refetch };
+};
diff --git a/frontend-v2/src/blockscout-web-js-lib/add_chain_to_mm.js b/frontend-v2/src/blockscout-web-js-lib/add_chain_to_mm.js
new file mode 100644
index 0000000..37f541d
--- /dev/null
+++ b/frontend-v2/src/blockscout-web-js-lib/add_chain_to_mm.js
@@ -0,0 +1,31 @@
+module.exports = async function addChainToMM(mmCfg) {
+  try {
+    const chainID = await window.ethereum.request({ method: "eth_chainId" });
+    const chainIDFromEnvVar = mmCfg.chainId;
+    const chainIDHex =
+      chainIDFromEnvVar && `0x${chainIDFromEnvVar.toString(16)}`;
+    const blockscoutURL = `${window.location.protocol}//${window.location.host}${mmCfg.networkPath}`;
+    if (chainID !== chainIDHex) {
+      await window.ethereum.request({
+        method: "wallet_addEthereumChain",
+        params: [
+          {
+            chainId: chainIDHex,
+            chainName: mmCfg.chainName,
+            nativeCurrency: {
+              name: mmCfg.symbol,
+              symbol: mmCfg.symbol,
+              decimals: mmCfg.decimals,
+            },
+            rpcUrls: mmCfg.rpcUrls,
+            blockExplorerUrls: [blockscoutURL],
+          },
+        ],
+      });
+    }
+    return true;
+  } catch (error) {
+    console.error(`failed to add chain to metamask: ${error}`);
+    return false;
+  }
+};
diff --git a/frontend-v2/src/common/apollo-client.ts b/frontend-v2/src/common/apollo-client.ts
new file mode 100644
index 0000000..a3b1bfb
--- /dev/null
+++ b/frontend-v2/src/common/apollo-client.ts
@@ -0,0 +1,14 @@
+import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
+import fetch from "isomorphic-unfetch";
+
+const apiGatewayUrl = "https://blockroma.com/ethw/mainnet/api-gateway/";
+
+export const apolloClient = new ApolloClient({
+  ssrMode: false,
+  link: new HttpLink({
+    uri: apiGatewayUrl,
+    fetch,
+    credentials: "same-origin",
+  }),
+  cache: new InMemoryCache().restore({}),
+});
diff --git a/frontend-v2/src/common/asset-url.ts b/frontend-v2/src/common/asset-url.ts
new file mode 100644
index 0000000..596a6c2
--- /dev/null
+++ b/frontend-v2/src/common/asset-url.ts
@@ -0,0 +1,6 @@
+export const assetURL = (path: string): string => {
+  if (path[0] !== "/") {
+    return `/${path}`;
+  }
+  return path;
+};
diff --git a/frontend-v2/src/common/common-margin.tsx b/frontend-v2/src/common/common-margin.tsx
new file mode 100644
index 0000000..c8fa017
--- /dev/null
+++ b/frontend-v2/src/common/common-margin.tsx
@@ -0,0 +1,5 @@
+import { styled } from "styletron-react";
+
+export const CommonMargin = styled("div", () => ({
+  margin: "8px",
+}));
diff --git a/frontend-v2/src/common/configure-store.ts b/frontend-v2/src/common/configure-store.ts
new file mode 100644
index 0000000..10ff72a
--- /dev/null
+++ b/frontend-v2/src/common/configure-store.ts
@@ -0,0 +1,38 @@
+import { applyMiddleware, compose, createStore, Reducer, Store } from "redux";
+import thunk from "redux-thunk";
+import { combineReducers } from "redux";
+
+export function noopReducer(
+  state: Record<string, unknown> = {},
+  _: Record<string, unknown>,
+): Record<string, unknown> {
+  return state;
+}
+
+export const rootReducer = combineReducers({
+  base: noopReducer,
+});
+
+export function configureStore(
+  initialState: { base: Record<string, unknown> },
+  reducer: Reducer = rootReducer,
+): Store<{ base: Record<string, unknown> }> {
+  const middleware = [];
+  if (typeof window !== "undefined") {
+    middleware.push(thunk);
+  }
+
+  const enhancers = [applyMiddleware(...middleware)];
+
+  if (
+    typeof window !== "undefined" &&
+    window &&
+    // @ts-ignore
+    window.__REDUX_DEVTOOLS_EXTENSION__
+  ) {
+    // @ts-ignore
+    enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__());
+  }
+
+  return createStore(reducer, initialState, compose(...enhancers));
+}
diff --git a/frontend-v2/src/common/flex.tsx b/frontend-v2/src/common/flex.tsx
new file mode 100644
index 0000000..8f9c4b5
--- /dev/null
+++ b/frontend-v2/src/common/flex.tsx
@@ -0,0 +1,55 @@
+import { styled } from "styletron-react";
+import React, { ReactNode } from "react";
+
+type Element = ReactNode;
+
+type PropTypes = {
+  children?: Array<Element> | Element;
+  column?: boolean;
+  center?: boolean;
+  nowrap?: boolean;
+  alignItems?: string;
+  width?: string;
+  backgroundColor?: string;
+  justifyContent?: string;
+  height?: string;
+  media?: { [key: string]: { [key: string]: string } };
+  alignContent?: string;
+} & React.CSSProperties;
+
+const AUTO = "auto";
+
+export function Flex({
+  children,
+  column = false,
+  center,
+  nowrap,
+  alignItems,
+  width = AUTO,
+  height = AUTO,
+  media = {},
+  alignContent = AUTO,
+  backgroundColor = AUTO,
+  justifyContent,
+  ...otherProps
+}: PropTypes): JSX.Element {
+  // @ts-ignore
+  const StyledDiv = styled("div", {
+    display: "flex",
+    "-webkit-box-flex": 1,
+    flexDirection: column ? "column" : "row",
+    justifyContent: justifyContent || (center ? "center" : "space-between"),
+    "-webkit-justify-content": center ? "center" : "space-between",
+    boxSizing: "border-box",
+    flexWrap: nowrap ? "nowrap" : "wrap",
+    alignContent: alignContent || (center ? "center" : "space-between"),
+    alignItems: alignItems || "center",
+    width,
+    height,
+    ...media,
+    backgroundColor,
+    ...otherProps,
+  });
+
+  return <StyledDiv>{children}</StyledDiv>;
+}
diff --git a/frontend-v2/src/common/footer.tsx b/frontend-v2/src/common/footer.tsx
new file mode 100644
index 0000000..06ad277
--- /dev/null
+++ b/frontend-v2/src/common/footer.tsx
@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from "react";
+import { assetURL } from "@/shared/common/asset-url";
+import { useChainConfig } from "@/shared/common/use-chain-config";
+import { chainSwitchOpts } from "@/shared/home/components/multi-chain-dropdown";
+import { getGithubTmplUrl } from "@/shared/common/github-tmpl-url";
+import { TOP_BAR_HEIGHT } from "./top-bar";
+import { useTranslation } from "next-i18next";
+
+const addChainToMM = require("../blockscout-web-js-lib/add_chain_to_mm");
+
+export const FOOTER_HEIGHT = 0;
+
+export const FOOTER_ABOVE = {
+  minHeight: `calc(100vh - ${FOOTER_HEIGHT + TOP_BAR_HEIGHT}px)`,
+};
+
+export function Footer(): JSX.Element {
+  const { t } = useTranslation("common");
+  const [mmAdded, setMmAdded] = useState(false);
+  const chainConfig = useChainConfig();
+  const [githubTmplUrl, setGithubTmplUrl] = useState("");
+  useEffect(() => {
+    setGithubTmplUrl(getGithubTmplUrl({ symbol: chainConfig.symbol }));
+  }, [chainConfig.symbol]);
+  return (
+    <footer className="footer">
+      <div className="footer-body container">
+        <div className="row footer-logo-row">
+          <div className="col-md-12">
+            <a className="footer-brand" href={assetURL("")}>
+              <img
+                className="footer-logo"
+                src={assetURL("favicon.svg")}
+                alt="BMO"
+              />
+            </a>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-xs-12 col-lg-3">
+            <p className="footer-info-text">{t("meta.description")}</p>
+            <div className="footer-social-icons">
+              <a
+                href="https://github.com/stargately/blockroma"
+                rel="noreferrer"
+                target="_blank"
+                className="footer-social-icon"
+                title="Github"
+              >
+                <div className="footer-social-icon-container fontawesome-icon github" />
+              </a>
+              <a
+                href="https://www.twitter.com/puncsky/"
+                rel="noreferrer"
+                target="_blank"
+                className="footer-social-icon"
+                title="Twitter"
+              >
+                <div className="footer-social-icon-container fontawesome-icon twitter" />
+              </a>
+              <a
+                href="https://t.me/system_design_and_architecture"
+                rel="noreferrer"
+                target="_blank"
+                className="footer-social-icon"
+                title="Telegram"
+              >
+                <div className="footer-social-icon-container fontawesome-icon telegram" />
+              </a>
+            </div>
+          </div>
+          <div className="col-xs-12 col-md-4 col-lg-3 footer-list">
+            <h3>Blockroma</h3>
+            <ul>
+              <li>
+                <a
+                  href={githubTmplUrl}
+                  rel="noreferrer"
+                  className="footer-link"
+                  target="_blank"
+                >
+                  Submit an Issue
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/stargately/blockroma"
+                  rel="noreferrer"
+                  className="footer-link"
+                >
+                  Contribute
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://discord.gg/Pb5YbK3ykN"
+                  rel="noreferrer"
+                  className="footer-link"
+                >
+                  Chat (#blockroma)
+                </a>
+              </li>
+              <li>
+                <a
+                  onClick={async () => {
+                    await setMmAdded(await addChainToMM(chainConfig));
+                  }}
+                  className="footer-link js-btn-add-chain-to-mm btn-add-chain-to-mm in-footer"
+                  style={{ cursor: "pointer" }}
+                >
+                  {mmAdded
+                    ? `${chainConfig.symbol} Added to MetaMask`
+                    : `Add ${chainConfig.symbol} to MetaMask`}
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div className="col-xs-12 col-md-4 col-lg-3 footer-list">
+            <h3>Main Networks</h3>
+            <ul>
+              {chainSwitchOpts.mainnets.map((it) => (
+                <li key={it[0]}>
+                  <a href={it[0]} rel="norefferer" className="footer-link">
+                    {" "}
+                    {it[1]}{" "}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="col-xs-12 col-md-4 col-lg-3 footer-list">
+            <h3>Test Networks</h3>
+            <ul>
+              {chainSwitchOpts.testnets.map((it) => (
+                <li key={it[0]}>
+                  <a href={it[0]} rel="norefferer" className="footer-link">
+                    {" "}
+                    {it[1]}{" "}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/frontend-v2/src/common/functions/paginations.ts b/frontend-v2/src/common/functions/paginations.ts
new file mode 100644
index 0000000..1d243fe
--- /dev/null
+++ b/frontend-v2/src/common/functions/paginations.ts
@@ -0,0 +1,23 @@
+export interface PageInfo {
+  hasNextPage: boolean | null;
+  endCursor: string | null;
+  startCursor: string | null;
+  hasPreviousPage: boolean | null;
+}
+
+export interface WithPageInfo {
+  pageInfo: PageInfo | null;
+}
+
+export function paginationProcessTotalNumPage(
+  withPageInfo: WithPageInfo | undefined | null,
+): number {
+  if (!withPageInfo) {
+    return 1;
+  }
+  const { pageInfo } = withPageInfo;
+  const totalRecord =
+    parseInt(pageInfo?.endCursor || "20", 10) +
+    parseInt(pageInfo?.startCursor || "20", 10);
+  return Math.round(totalRecord / 20) - 1;
+}
diff --git a/frontend-v2/src/common/get-gas-used-percent.ts b/frontend-v2/src/common/get-gas-used-percent.ts
new file mode 100644
index 0000000..410fc99
--- /dev/null
+++ b/frontend-v2/src/common/get-gas-used-percent.ts
@@ -0,0 +1,10 @@
+export function getGasUsedPercent(
+  gasUsed: string | null | undefined,
+  gasLimit: string | null | undefined,
+): string {
+  const result =
+    (parseFloat(gasUsed ?? "0") / parseFloat(gasLimit ?? "0")) * 100;
+
+  // Check if result is NaN, return "0.0" if true, otherwise return the toFixed(1) value.
+  return Number.isNaN(result) ? "0.0" : result.toFixed(1);
+}
diff --git a/frontend-v2/src/common/github-tmpl-url.ts b/frontend-v2/src/common/github-tmpl-url.ts
new file mode 100644
index 0000000..3853f71
--- /dev/null
+++ b/frontend-v2/src/common/github-tmpl-url.ts
@@ -0,0 +1,72 @@
+function newGithubIssueUrl(options: Record<string, string> = {}) {
+  let repoUrl;
+  if (options.repoUrl) {
+    repoUrl = options.repoUrl;
+  } else if (options.user && options.repo) {
+    repoUrl = `https://github.com/${options.user}/${options.repo}`;
+  } else {
+    throw new Error(
+      "You need to specify either the `repoUrl` option or both the `user` and `repo` options",
+    );
+  }
+
+  const url = new URL(`${repoUrl}/issues/new`);
+
+  const types = [
+    "body",
+    "title",
+    "labels",
+    "template",
+    "milestone",
+    "assignee",
+    "projects",
+  ];
+
+  for (const type of types) {
+    let value = options[type];
+    if (value === undefined) {
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    if (type === "labels" || type === "projects") {
+      if (!Array.isArray(value)) {
+        throw new TypeError(`The \`${type}\` option should be an array`);
+      }
+
+      value = value.join(",");
+    }
+
+    url.searchParams.set(type, value);
+  }
+
+  return url.toString();
+}
+
+export const getGithubTmplUrl = ({ symbol }: { symbol: string }) => {
+  const ua = window?.navigator?.userAgent;
+  return newGithubIssueUrl({
+    user: "stargately",
+    repo: "blockroma",
+    title: `${symbol}: <Issue Title>`,
+    body: `*Describe your issue here.*
+
+### Environment
+* Blockroma Version: ${new Date().toISOString()}
+
+* User Agent: \`${ua}\`
+
+### Steps to reproduce
+
+*Tell us how to reproduce this issue. If possible, push up a branch to your fork with a regression test we can run to reproduce locally.*
+
+### Expected Behaviour
+
+*Tell us what should happen.*
+
+### Actual Behaviour
+
+*Tell us what happens instead.*
+  `,
+  });
+};
diff --git a/frontend-v2/src/common/gtag.tsx b/frontend-v2/src/common/gtag.tsx
new file mode 100644
index 0000000..600ac93
--- /dev/null
+++ b/frontend-v2/src/common/gtag.tsx
@@ -0,0 +1,22 @@
+import Script from "next/script";
+import React from "react";
+
+export const Gtag: React.FC = () => {
+  return (
+    <>
+      <Script
+        src="https://www.googletagmanager.com/gtag/js?id=G-VKPSYZ2K22"
+        strategy="afterInteractive"
+      />
+      <Script id="google-analytics" strategy="afterInteractive">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){window.dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'GA_MEASUREMENT_ID');
+        `}
+      </Script>
+    </>
+  );
+};
diff --git a/frontend-v2/src/common/icon.tsx b/frontend-v2/src/common/icon.tsx
new file mode 100644
index 0000000..af0520d
--- /dev/null
+++ b/frontend-v2/src/common/icon.tsx
@@ -0,0 +1,32 @@
+import { styled } from "styletron-react";
+import React from "react";
+
+const LEN = "32px";
+
+type PropTypes = {
+  url: string;
+
+  width?: string;
+  height?: string;
+  margin?: string;
+};
+
+export function Icon({
+  width = LEN,
+  height = LEN,
+  url,
+  margin = "0",
+}: PropTypes): JSX.Element {
+  const StyledDiv = styled("div", {
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "contain",
+    backgroundImage: `url("${url}")`,
+    boxSizing: "border-box",
+    width,
+    height,
+    margin,
+  });
+
+  return <StyledDiv />;
+}
diff --git a/frontend-v2/src/common/icons/cross.svg.tsx b/frontend-v2/src/common/icons/cross.svg.tsx
new file mode 100644
index 0000000..a9db756
--- /dev/null
+++ b/frontend-v2/src/common/icons/cross.svg.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+function Cross(): JSX.Element {
+  return (
+    <svg
+      height="20"
+      version="1.1"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <g
+        fill="none"
+        fillRule="evenodd"
+        id="Icons"
+        stroke="currentColor"
+        strokeWidth="1"
+      >
+        <g
+          fill="currentColor"
+          id="Utils"
+          transform="translate(-380.000000, -100.000000)"
+        >
+          <g id="icons" transform="translate(20.000000, 20.000000)">
+            <polygon
+              id="close-[#1511]"
+              points="371.4489 89.9997 380.0029 98.5537 378.5559 99.9997 370.0029 91.4457 361.4489 99.9997 360.0029 98.5537 368.5559 89.9997 360.0029 81.4457 361.4489 79.9997 370.0029 88.5537 378.5559 79.9997 380.0029 81.4457"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export { Cross };
diff --git a/frontend-v2/src/common/icons/hamburger.svg.tsx b/frontend-v2/src/common/icons/hamburger.svg.tsx
new file mode 100644
index 0000000..4b721b4
--- /dev/null
+++ b/frontend-v2/src/common/icons/hamburger.svg.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+function Hamburger(): JSX.Element {
+  return (
+    <svg
+      height="30"
+      viewBox="0 0 30 30"
+      width="30"
+      xmlns="https://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 7h22M4 15h22M4 23h22"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
+
+export { Hamburger };
diff --git a/frontend-v2/src/common/normalize-token-value.ts b/frontend-v2/src/common/normalize-token-value.ts
new file mode 100644
index 0000000..a960049
--- /dev/null
+++ b/frontend-v2/src/common/normalize-token-value.ts
@@ -0,0 +1,6 @@
+export function normalizeTokenValue(val?: string | null): string {
+  if (!val) {
+    return "0";
+  }
+  return (parseFloat(val) / 1000000000000000000).toString();
+}
diff --git a/frontend-v2/src/common/shorten-hash.ts b/frontend-v2/src/common/shorten-hash.ts
new file mode 100644
index 0000000..9401eb9
--- /dev/null
+++ b/frontend-v2/src/common/shorten-hash.ts
@@ -0,0 +1,7 @@
+export function shortenHash(addr: string): string {
+  try {
+    return `${addr.slice(0, 8)}-${addr.slice(addr.length - 6, addr.length)}`;
+  } catch (err) {
+    return "";
+  }
+}
diff --git a/frontend-v2/src/common/styled.tsx b/frontend-v2/src/common/styled.tsx
new file mode 100644
index 0000000..552909d
--- /dev/null
+++ b/frontend-v2/src/common/styled.tsx
@@ -0,0 +1,48 @@
+/* tslint:disable:no-any */
+import React, { PropsWithChildren } from "react";
+import {
+  createStyled,
+  StyletronComponent,
+  StyletronWrapper,
+} from "styletron-react";
+import { driver, getInitialStyle, StyleObject } from "styletron-standard";
+import { Theme } from "./theme-types";
+
+const wrapper: StyletronWrapper = (StyledComponent) =>
+  function withThemeHOC(props: PropsWithChildren<any>): JSX.Element {
+    return (
+      <>{($theme: any) => <StyledComponent {...props} $theme={$theme} />}</>
+    );
+  };
+
+export interface StyledFn {
+  <
+    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
+    P extends Record<string, unknown>,
+  >(
+    component: C,
+    style: (props: P & { $theme: Theme }) => StyleObject,
+  ): StyletronComponent<
+    Pick<
+      React.ComponentProps<C>,
+      Exclude<keyof React.ComponentProps<C>, { className: string }>
+    > &
+      P
+  >;
+
+  <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>>(
+    component: C,
+    style: StyleObject,
+  ): StyletronComponent<
+    Pick<
+      React.ComponentProps<C>,
+      Exclude<keyof React.ComponentProps<C>, { className: string }>
+    >
+  >;
+}
+
+export const styled: StyledFn = createStyled({
+  wrapper,
+  getInitialStyle,
+  driver,
+});
diff --git a/frontend-v2/src/common/styles/style-animation.tsx b/frontend-v2/src/common/styles/style-animation.tsx
new file mode 100644
index 0000000..59017b0
--- /dev/null
+++ b/frontend-v2/src/common/styles/style-animation.tsx
@@ -0,0 +1 @@
+export const transition = "all 0.2s ease";
diff --git a/frontend-v2/src/common/styles/style-font.tsx b/frontend-v2/src/common/styles/style-font.tsx
new file mode 100644
index 0000000..1ab6b6f
--- /dev/null
+++ b/frontend-v2/src/common/styles/style-font.tsx
@@ -0,0 +1,31 @@
+export const fontFamily =
+  "Inter,Helvetica Neue,sans-serif,Microsoft YaHei !important";
+
+export const fonts = {
+  body: {
+    fontFamily,
+  },
+  h1: {
+    fontSize: "3rem",
+    color: "#152935",
+    textTransform: "capitalize",
+    fontWeight: 700,
+    margin: "-1.15rem 0 0 -3px",
+    padding: 0,
+    transition: "250ms cubic-bezier(0.5, 0, 0.1, 1)",
+  },
+  textBox: {
+    fontFamily,
+    fontSize: "18px !important",
+    fontWeight: 300,
+  },
+  inputLabel: {
+    fontFamily,
+    fontSize: "14px",
+    fontWeight: 700,
+  },
+  inputError: {
+    fontFamily,
+    fontSize: "12px !important",
+  },
+};
diff --git a/frontend-v2/src/common/styles/style-media.tsx b/frontend-v2/src/common/styles/style-media.tsx
new file mode 100644
index 0000000..34f9899
--- /dev/null
+++ b/frontend-v2/src/common/styles/style-media.tsx
@@ -0,0 +1,14 @@
+export const PALM_WIDTH = 575;
+
+export const media = {
+  palm: `@media only screen and (max-width: ${PALM_WIDTH}px)`,
+  lap: `@media only screen and (min-width: ${PALM_WIDTH}px) and (max-width: 768px)`,
+  desk: "@media only screen and (min-width: 769px) and (max-width: 1280px)",
+  deskWide: "@media only screen and (min-width: 1281px)",
+};
+
+export const fullOnPalm = {
+  [media.palm]: {
+    width: "100%",
+  },
+};
diff --git a/frontend-v2/src/common/styles/style-padding.tsx b/frontend-v2/src/common/styles/style-padding.tsx
new file mode 100644
index 0000000..4cfedcd
--- /dev/null
+++ b/frontend-v2/src/common/styles/style-padding.tsx
@@ -0,0 +1,46 @@
+import { styled, StyleObject } from "styletron-react";
+import React, { CSSProperties } from "react";
+
+import { Flex } from "../flex";
+import { media } from "./style-media";
+
+export const wideContentPadding = {
+  paddingLeft: "16px",
+  paddingRight: "16px",
+};
+
+export const contentPadding = {
+  width: "100%",
+  [media.palm]: wideContentPadding,
+  paddingLeft: "6.6vw",
+  paddingRight: "6.6vw",
+  [media.deskWide]: {
+    paddingLeft: "16vw",
+    paddingRight: "16vw",
+  },
+};
+
+export const maxContentWidth = { maxWidth: "1320px", width: "100%" };
+
+export const topBottomContentPadding = {
+  paddingTop: "12px",
+  paddingBottom: "12px",
+};
+
+const Pd = styled("div", contentPadding);
+
+export function ContentPadding({
+  children,
+  style,
+}: {
+  children?: JSX.Element | null | Array<JSX.Element>;
+  style?: StyleObject;
+}): JSX.Element {
+  return (
+    <Pd style={style as CSSProperties}>
+      <Flex center width="100%">
+        <div style={maxContentWidth}>{children}</div>
+      </Flex>
+    </Pd>
+  );
+}
diff --git a/frontend-v2/src/common/theme-types.ts b/frontend-v2/src/common/theme-types.ts
new file mode 100644
index 0000000..a51c3d6
--- /dev/null
+++ b/frontend-v2/src/common/theme-types.ts
@@ -0,0 +1,37 @@
+type Font = {
+  fontSize: string | number;
+  lineHeight: string | number;
+  fontFamily?: string;
+  letterSpacing?: string | number;
+};
+
+export type Theme = {
+  colors: {
+    primary: string;
+    secondary: string;
+
+    black: string;
+    black10: string;
+    black20: string;
+    black40: string;
+    black60: string;
+    black80: string;
+    black95: string;
+
+    text01: string;
+    textReverse: string;
+
+    white: string;
+
+    error: string; //	Error
+    success: string; //	Success
+    warning: string; //	Warning
+    information: string; //	Information
+
+    nav01: string; //	Global top bar
+    nav02: string; //	CTA footer
+    nav03: string; //	Global footer
+  };
+  sizing: Array<string>;
+  fonts: Array<Font>;
+};
diff --git a/frontend-v2/src/common/top-bar.tsx b/frontend-v2/src/common/top-bar.tsx
new file mode 100644
index 0000000..4dcbcbb
--- /dev/null
+++ b/frontend-v2/src/common/top-bar.tsx
@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from "react";
+import { styled } from "./styled";
+import { contentPadding, maxContentWidth } from "./styles/style-padding";
+import { media, PALM_WIDTH } from "./styles/style-media";
+import { transition } from "./styles/style-animation";
+import OutsideClickHandler from "react-outside-click-handler";
+import { CommonMargin } from "./common-margin";
+import { Hamburger } from "./icons/hamburger.svg";
+import { Cross } from "./icons/cross.svg";
+import { Icon } from "./icon";
+import Link from "next/link";
+
+export const TOP_BAR_HEIGHT = 52;
+
+const Flex = styled("div", () => ({
+  flexDirection: "row",
+  display: "flex",
+  boxSizing: "border-box",
+}));
+
+const Menu = styled("div", {
+  display: "flex!important",
+  [media.palm]: {
+    display: "none!important",
+  },
+});
+
+const BarPlaceholder = styled("div", ({ $theme }) => {
+  const height = TOP_BAR_HEIGHT / 2;
+  return {
+    display: "block",
+    padding: `${height}px ${height}px ${height}px ${height}px`,
+    backgroundColor: $theme.colors.nav01,
+  };
+});
+
+const LogoWrapper = styled("a", {
+  height: `${TOP_BAR_HEIGHT}px`,
+  display: "flex",
+  alignItems: "center",
+});
+
+function Logo(): JSX.Element {
+  return (
+    <LogoWrapper href="/">
+      <Icon url={"/favicon.svg"} />
+    </LogoWrapper>
+  );
+}
+
+const MaxWidth = styled("div", () => ({
+  display: "flex",
+  flexDirection: "row",
+  ...maxContentWidth,
+  justifyContent: "space-between",
+  alignItems: "center",
+}));
+
+const A = styled(Link, ({ $theme }) => ({
+  marginLeft: "14px",
+  textDecoration: "none",
+  ":hover": {
+    color: $theme.colors.primary,
+  },
+  transition,
+  color: $theme.colors.text01,
+  [media.palm]: {
+    boxSizing: "border-box",
+    width: "100%",
+    padding: "16px 0 16px 0",
+    borderBottom: "1px #EDEDED solid",
+  },
+}));
+
+// @ts-ignore
+const Dropdown = styled("div", ({ $theme }) => ({
+  backgroundColor: $theme.colors.nav01,
+  display: "flex",
+  flexDirection: "column",
+  ...contentPadding,
+  position: "fixed",
+  top: TOP_BAR_HEIGHT,
+  "z-index": "1",
+  width: "100vw",
+  height: "100vh",
+  alignItems: "flex-end!important",
+  boxSizing: "border-box",
+}));
+
+function HamburgerBtn({
+  displayMobileMenu,
+  children,
+  onClick,
+}: {
+  displayMobileMenu: boolean;
+  children: Array<JSX.Element> | JSX.Element;
+  onClick: () => void;
+}): JSX.Element {
+  const Styled = styled("div", ({ $theme }) => ({
+    ":hover": {
+      color: $theme.colors.primary,
+    },
+    display: "none!important",
+    [media.palm]: {
+      display: "flex!important",
+      ...(displayMobileMenu ? { display: "none!important" } : {}),
+    },
+    cursor: "pointer",
+    justifyContent: "center",
+  }));
+  return <Styled onClick={onClick}>{children}</Styled>;
+}
+
+function CrossBtn({
+  displayMobileMenu,
+  children,
+}: {
+  displayMobileMenu: boolean;
+  children: Array<JSX.Element> | JSX.Element;
+}): JSX.Element {
+  const Styled = styled("div", ({ $theme }) => ({
+    ":hover": {
+      color: $theme.colors.primary,
+    },
+    display: "none!important",
+    [media.palm]: {
+      display: "none!important",
+      ...(displayMobileMenu ? { display: "flex!important" } : {}),
+    },
+    cursor: "pointer",
+    justifyContent: "center",
+    padding: "5px",
+  }));
+  return <Styled>{children}</Styled>;
+}
+
+const BrandText = styled("a", ({ $theme }) => ({
+  textDecoration: "none",
+  ":hover": {
+    color: $theme.colors.primary,
+  },
+  fontWeight: 700,
+  transition,
+  color: $theme.colors.text01,
+  marginLeft: 0,
+}));
+
+const Bar = styled("nav", ({ $theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "center",
+  alignItems: "center",
+  lineHeight: `${TOP_BAR_HEIGHT}px`,
+  height: `${TOP_BAR_HEIGHT}px`,
+  backgroundColor: $theme.colors.nav01,
+  color: $theme.colors.text01,
+  borderBottom: "1px solid rgb(238, 236, 236)",
+  position: "fixed",
+  top: "0px",
+  left: "0px",
+  "z-index": "70",
+  ...contentPadding,
+  boxSizing: "border-box",
+}));
+
+export const TopBar = (): JSX.Element => {
+  const routePrefix = "/";
+
+  const [displayMobileMenu, setDisplayMobileMenu] = useState(false);
+  useEffect(() => {
+    window.addEventListener("resize", () => {
+      if (
+        document.documentElement &&
+        document.documentElement.clientWidth > PALM_WIDTH
+      ) {
+        setDisplayMobileMenu(false);
+      }
+    });
+  }, []);
+
+  const hideMobileMenu = (): void => {
+    setDisplayMobileMenu(false);
+  };
+
+  const renderMenu = (): JSX.Element => (
+    <>
+      <A href={`${routePrefix}`} onClick={hideMobileMenu}>
+        Home
+      </A>
+      <A href={`${routePrefix}about-us`} onClick={hideMobileMenu}>
+        About Us
+      </A>
+    </>
+  );
+
+  const renderMobileMenu = (): JSX.Element | null => {
+    if (!displayMobileMenu) {
+      return null;
+    }
+
+    return (
+      <OutsideClickHandler onOutsideClick={hideMobileMenu}>
+        <Dropdown>{renderMenu()}</Dropdown>
+      </OutsideClickHandler>
+    );
+  };
+
+  return (
+    <div>
+      <Bar>
+        <MaxWidth>
+          <Flex>
+            <Logo />
+            <CommonMargin />
+            <BrandText href="/">OneFx</BrandText>
+          </Flex>
+          <Flex>
+            <Menu>{renderMenu()}</Menu>
+          </Flex>
+          <HamburgerBtn
+            displayMobileMenu={displayMobileMenu}
+            onClick={() => {
+              setDisplayMobileMenu(true);
+            }}
+          >
+            <Hamburger />
+          </HamburgerBtn>
+          <CrossBtn displayMobileMenu={displayMobileMenu}>
+            <Cross />
+          </CrossBtn>
+        </MaxWidth>
+      </Bar>
+      <BarPlaceholder />
+      {renderMobileMenu()}
+    </div>
+  );
+};
diff --git a/frontend-v2/src/common/use-chain-config.ts b/frontend-v2/src/common/use-chain-config.ts
new file mode 100644
index 0000000..4201606
--- /dev/null
+++ b/frontend-v2/src/common/use-chain-config.ts
@@ -0,0 +1,21 @@
+import { useSelector } from "react-redux";
+
+export type ChainConfig = {
+  chainId: number;
+  chainName: string;
+  symbol: string;
+  rpcUrls: string[];
+  decimals: number;
+  networkPath: string;
+};
+
+export function useChainConfig(): ChainConfig {
+  return {
+    chainId: 7778,
+    chainName: "Blockroma",
+    symbol: "BLO",
+    rpcUrls: ["https://example.com"],
+    decimals: 18,
+    networkPath: "",
+  };
+}
diff --git a/frontend-v2/src/explorer-components/adr-transaction.item.tsx b/frontend-v2/src/explorer-components/adr-transaction.item.tsx
new file mode 100644
index 0000000..819eccb
--- /dev/null
+++ b/frontend-v2/src/explorer-components/adr-transaction.item.tsx
@@ -0,0 +1,161 @@
+import React from "react";
+import { shortenHash } from "@/shared/common/shorten-hash";
+import { normalizeTokenValue } from "@/shared/common/normalize-token-value";
+import { TickingTs } from "@/shared/explorer-components/ticking-ts";
+import { useChainConfig } from "@/shared/common/use-chain-config";
+import { assetURL } from "@/shared/common/asset-url";
+import Link from "next/link";
+import { Status } from "@/shared/__generated__/globalTypes";
+
+type AdrTx = {
+  id: string;
+  timestamp: any | null;
+  hash: any | null;
+  blockNumber: number | null;
+  value: string | null;
+  gasUsed: string | null;
+  cumulativeGasUsed: string | null;
+  error: string | null;
+  fromAddressHash: any | null;
+  toAddressHash: any | null;
+  status: Status | null;
+  gas: string | null;
+  gasPrice: string | null;
+  index: number | null;
+  input: any | null;
+  nonce: number | null;
+  r: string | null;
+  s: string | null;
+  v: string | null;
+};
+
+type Props = {
+  tx?: AdrTx | null;
+  selfAddressHash: string;
+};
+
+export const AdrTransactionItem: React.FC<Props> = ({
+  tx,
+  selfAddressHash,
+}) => {
+  const chainConfig = useChainConfig();
+  if (!tx) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className="tile tile-type-transaction fade-in tile-status--success"
+      data-test="transaction"
+      data-identifier-hash={tx.hash}
+    >
+      <div
+        className="row tile-body"
+        data-selector="token-transfers-toggle"
+        data-test="chain_transaction"
+      >
+        {/* Color Block */}
+        <div className="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+          <div>
+            <span className="tile-label" data-test="transaction_type">
+              Transaction
+            </span>
+          </div>
+          <span
+            className="tile-status-label ml-2 ml-md-0"
+            data-test="transaction_status"
+          >
+            Success
+          </span>
+        </div>
+        {/* Content */}
+        <div className="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+          <div className="text-truncate d-flex">
+            <Link
+              className="text-truncate"
+              data-test="transaction_hash_link"
+              href={assetURL(`tx/${tx.hash}`)}
+            >
+              {tx.hash}
+            </Link>
+            <div className="bs-label method ml-1">Transfer</div>
+          </div>
+          <span>
+            <MaybeClickableAddress
+              hash={tx.fromAddressHash}
+              self={selfAddressHash}
+            />{" "}
+            →{" "}
+            <MaybeClickableAddress
+              hash={tx.toAddressHash}
+              self={selfAddressHash}
+            />
+          </span>
+          <span className="d-flex flex-md-row flex-column mt-3 mt-md-0">
+            <span className="tile-title">
+              {normalizeTokenValue(tx.value)} {chainConfig.symbol}
+            </span>
+            <span className="ml-0 ml-md-1 text-nowrap">
+              {tx.gasUsed} TX Fee
+            </span>
+          </span>
+          {/* Transfer */}
+        </div>
+        {/* Block info */}
+        <div className="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+          <span className="mr-2 mr-md-0 order-1">
+            <Link href={assetURL(`block/${tx.blockNumber}`)}>
+              Block #{tx.blockNumber}
+            </Link>
+          </span>
+          <TickingTs
+            className="mr-2 mr-md-0 order-2"
+            timestamp={tx.timestamp}
+            inTile={true}
+          />
+          <span className="mr-2 mr-md-0 order-0 order-md-3">
+            {tx.toAddressHash === selfAddressHash ? (
+              <span
+                data-test="transaction_type"
+                className="badge badge-success tile-badge"
+              >
+                IN
+              </span>
+            ) : (
+              <span
+                data-test="transaction_type"
+                className="badge badge-danger tile-badge"
+              >
+                OUT
+              </span>
+            )}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+function MaybeClickableAddress({
+  hash,
+  self,
+}: {
+  hash: string;
+  self: string;
+}): JSX.Element {
+  const addr = (
+    <span data-address-hash={hash}>
+      <span className="d-none d-md-none d-xl-inline">{hash}</span>
+      <span className="d-md-inline-block d-xl-none">{shortenHash(hash)}</span>
+    </span>
+  );
+  if (hash !== self) {
+    return (
+      <Link data-test="address_hash_link" href={assetURL(`address/${hash}`)}>
+        {addr}
+      </Link>
+    );
+  }
+
+  return addr;
+}
diff --git a/frontend-v2/src/explorer-components/blk-block-item.tsx b/frontend-v2/src/explorer-components/blk-block-item.tsx
new file mode 100644
index 0000000..c112632
--- /dev/null
+++ b/frontend-v2/src/explorer-components/blk-block-item.tsx
@@ -0,0 +1,126 @@
+import React from "react";
+import { shortenHash } from "@/shared/common/shorten-hash";
+import { assetURL } from "@/shared/common/asset-url";
+import { TickingTs } from "./ticking-ts";
+
+export type Blk = {
+  consensus: boolean | null;
+  difficulty: string | null;
+  gasLimit: string | null;
+  gasUsed: string | null;
+  hash: any | null;
+  miner: any | null;
+  nonce: any | null;
+  number: number | null;
+  parentHash: any | null;
+  size: number | null;
+  numTxs: number | null;
+  timestamp: any | null;
+  totalDifficulty: string | null;
+};
+
+type Props = {
+  blk: Blk;
+};
+
+export const BlkBlockItem: React.FC<Props> = ({ blk }) => {
+  const gasUsedPercent = (
+    (parseFloat(blk.gasUsed ?? "0") / parseFloat(blk.gasLimit ?? "0")) *
+    100
+  ).toFixed(1);
+
+  return (
+    <div
+      className="tile tile-type-block fade-up"
+      data-selector="block-tile"
+      data-block-number={blk.number}
+      data-block-hash={blk.hash}
+      style={{}}
+    >
+      <div className="row">
+        <div className="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+          <a
+            className="tile-label"
+            data-selector="block-number"
+            href={assetURL(`block/${blk.number}`)}
+          >
+            #{blk.number}
+          </a>
+          <span
+            className="tile-status-label font-weight-400"
+            data-test="transaction_type"
+          >
+            Block
+          </span>
+        </div>
+        <div className="col-md-6 col-lg-7">
+          <div>
+            {/* transactions */}
+            <span className="mr-2">{blk.numTxs} transactions</span>
+            {/* size */}
+            <span className="mr-2">
+              {" "}
+              {Number(blk.size).toLocaleString()} bytes{" "}
+            </span>
+            {/* age */}
+            <TickingTs timestamp={blk.timestamp} />
+          </div>
+          <div className="text-nowrap text-truncate mt-3 mt-md-0">
+            {/* validator */}
+            Validator{" "}
+            <a
+              data-test="address_hash_link"
+              href={assetURL(`address/${blk.miner}`)}
+            >
+              <span data-address-hash={blk.miner}>
+                <span
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  title={blk.miner}
+                  data-custom-class
+                >
+                  <span>{shortenHash(blk.miner)}</span>
+                </span>
+              </span>
+            </a>
+          </div>
+
+          {/*
+          TODO(dora): block reward
+
+          <div className="text-nowrap text-truncate mt-3 mt-md-0">
+            Reward
+            <span className="ml-2">2 BMO</span>
+          </div>
+          */}
+        </div>
+        <div className="col-md-4 col-lg-3 text-md-right d-flex flex-column align-items-md-end justify-content-md-end mt-3 mt-md-0">
+          {/* Priority Fee TODO(dora) */}
+          {/* <span> 0 BMO Priority Fees </span> */}
+          {/* Burnt Fees */}
+          {/* <span> 0 BMO Burnt Fees </span> */}
+          {/* Gas Limit */}
+          <span>
+            {" "}
+            {parseFloat(blk.gasLimit || "0").toLocaleString()} Gas Limit{" "}
+          </span>
+          {/* Gas Used */}
+          <div className="mr-3 mr-md-0">
+            {blk.gasUsed} ({gasUsedPercent}%) Gas Used
+          </div>
+          {/* Progress bar */}
+          <div className="progress">
+            <div
+              className="progress-bar"
+              role="progressbar"
+              style={{ width: "0%" }}
+              aria-valuenow={parseFloat(gasUsedPercent) * 100}
+              aria-valuemin={0}
+              aria-valuemax={100}
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend-v2/src/explorer-components/blk-list.tsx b/frontend-v2/src/explorer-components/blk-list.tsx
new file mode 100644
index 0000000..98ce8cc
--- /dev/null
+++ b/frontend-v2/src/explorer-components/blk-list.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Blk, BlkBlockItem } from "@/shared/explorer-components/blk-block-item";
+
+type Props = {
+  blks?: Array<Blk | null | undefined> | null | undefined;
+};
+
+export const BlkList: React.FC<Props> = ({ blks }) => {
+  if (!blks) {
+    return <></>;
+  }
+
+  return (
+    <div>
+      <div data-items="true">
+        {blks.map((blk) => blk && <BlkBlockItem key={blk.hash} blk={blk} />)}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend-v2/src/explorer-components/copy-address.tsx b/frontend-v2/src/explorer-components/copy-address.tsx
new file mode 100644
index 0000000..1e244d5
--- /dev/null
+++ b/frontend-v2/src/explorer-components/copy-address.tsx
@@ -0,0 +1,43 @@
+import React, { createRef, useEffect, useState } from "react";
+
+export function CopyAddress({ addressHash }: { addressHash: string }) {
+  const [copied, setCopied] = useState(false);
+  const text = copied ? "Copied!" : "Copy From Address";
+  const ref = createRef<HTMLSpanElement>();
+  useEffect(() => {
+    ref.current?.addEventListener("mouseleave", () => {
+      setCopied(false);
+    });
+    ref.current?.addEventListener("touchcancel", () => {
+      setCopied(false);
+    });
+  }, [ref]);
+  return (
+    <span
+      aria-label={text}
+      id="tx-raw-input"
+      className="btn-copy-icon overview-title-item i-tooltip-2"
+      data-placement="top"
+      data-toggle="tooltip"
+      title={text}
+      style={{}}
+      ref={ref}
+      onClick={() => {
+        navigator.clipboard.writeText(addressHash);
+        setCopied(true);
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32.5 32.5"
+        width={32}
+        height={32}
+      >
+        <path
+          fillRule="evenodd"
+          d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"
+        />
+      </svg>
+    </span>
+  );
+}
diff --git a/frontend-v2/src/explorer-components/copy-to-clipboard.tsx b/frontend-v2/src/explorer-components/copy-to-clipboard.tsx
new file mode 100644
index 0000000..cdd4aa9
--- /dev/null
+++ b/frontend-v2/src/explorer-components/copy-to-clipboard.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import { createRef, useEffect, useState } from "react";
+
+type Props = {
+  value: string;
+  reason: string;
+};
+
+export function CopyToClipboard({ value, reason }: Props): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  const text = copied ? "Copied!" : reason;
+  const ref = createRef<HTMLSpanElement>();
+  useEffect(() => {
+    ref.current?.addEventListener("mouseleave", () => {
+      setCopied(false);
+    });
+    ref.current?.addEventListener("touchcancel", () => {
+      setCopied(false);
+    });
+  }, [ref]);
+
+  return (
+    <span
+      aria-label={text}
+      data-clipboard-text={value}
+      className="btn-copy-icon btn-copy-icon-small btn-copy-icon-custom btn-copy-icon-no-borders i-tooltip-2"
+      data-placement="top"
+      data-toggle="tooltip"
+      title={text}
+      style={{}}
+      ref={ref}
+      onClick={() => {
+        setCopied(true);
+
+        navigator.clipboard.writeText(value);
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32.5 32.5"
+        width={32}
+        height={32}
+      >
+        <path
+          fillRule="evenodd"
+          d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"
+        />
+      </svg>
+    </span>
+  );
+}
diff --git a/frontend-v2/src/explorer-components/data-input.tsx b/frontend-v2/src/explorer-components/data-input.tsx
new file mode 100644
index 0000000..7cad469
--- /dev/null
+++ b/frontend-v2/src/explorer-components/data-input.tsx
@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from "react";
+import OutsideClickHandler from "react-outside-click-handler";
+import { CopyToClipboard } from "./copy-to-clipboard";
+
+export const DataInput: React.FC<{ input: string }> = ({ input }) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const [showUtf8, setShowUtf8] = useState(false);
+  useEffect(() => {
+    setShowMenu(false);
+  }, [showUtf8]);
+  useEffect(() => {
+    if (showUtf8) {
+      setCopy(hexToUtf8(input));
+    } else {
+      setCopy(input);
+    }
+  }, [showUtf8]);
+
+  const [copy, setCopy] = useState(input);
+
+  return (
+    <>
+      <div className="d-flex mb-3 justify-content-between">
+        <div className={`dropdown${showMenu ? " show" : ""}`}>
+          <button
+            className="btn-dropdown-line large dropdown-toggle"
+            type="button"
+            id="tx-input-decoding-button"
+            data-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+            onClick={() => setShowMenu(!showMenu)}
+          >
+            {showUtf8 ? "UTF-8" : "Hex (Default)"}
+          </button>
+          <OutsideClickHandler onOutsideClick={() => setShowMenu(false)}>
+            <div
+              className={`dropdown-menu${showMenu ? " show" : ""}`}
+              aria-labelledby="transaction-input-decoding-button"
+            >
+              <a
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setShowUtf8(false);
+                }}
+                className="dropdown-item large tx-input-dropdown"
+                data-target=".tx-raw-input"
+                data-target-to-hide=".tx-utf8-input"
+                id="tx-dropdown-raw"
+              >
+                Hex (Default)
+              </a>
+              <a
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setShowUtf8(true);
+                }}
+                className="dropdown-item large tx-input-dropdown"
+                data-target=".tx-utf8-input"
+                data-target-to-hide=".tx-raw-input"
+                id="tx-dropdown-utf8"
+              >
+                UTF-8
+              </a>
+            </div>
+          </OutsideClickHandler>
+        </div>
+        <div className="btn-copy-tx-raw-input-container">
+          <CopyToClipboard value={copy} reason="Copy Txn Input" />
+        </div>
+      </div>
+
+      <div className="tx-raw-input" style={{ display: showUtf8 ? "none" : "" }}>
+        <div className="tile tile-muted">
+          <pre className="pre-scrollable pre-scrollable-shorty pre-wrap mb-0">
+            <code>{input}</code>
+          </pre>
+        </div>
+      </div>
+
+      <div
+        className="tx-utf8-input"
+        style={{ display: showUtf8 ? "" : "none" }}
+      >
+        <div className="tile tile-muted">
+          <pre className="pre-scrollable pre-scrollable-shorty pre-wrap mb-0">
+            <code>{hexToUtf8(input.replace(/^0x/, ""))}</code>
+          </pre>
+        </div>
+      </div>
+    </>
+  );
+};
+
+function hexToUtf8(hex: string): string {
+  const result = [];
+  for (let i = 0; i < hex.length; i += 2) {
+    result.push(String.fromCharCode(parseInt(hex.substr(i, 2), 16)));
+  }
+  return result.join("");
+}
diff --git a/frontend-v2/src/explorer-components/pagination.tsx b/frontend-v2/src/explorer-components/pagination.tsx
new file mode 100644
index 0000000..6242f42
--- /dev/null
+++ b/frontend-v2/src/explorer-components/pagination.tsx
@@ -0,0 +1,125 @@
+import React, { FormEventHandler } from "react";
+
+type Props = {
+  position: "top" | "bottom";
+  numPages: number;
+  curPage: number;
+  setCurPage: (curPage: number) => void;
+};
+
+export const Pagination: React.FC<Props> = ({
+  curPage,
+  numPages,
+  setCurPage,
+  position,
+}) => {
+  const prev = curPage - 1;
+  const next = curPage + 1;
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    // @ts-ignore
+    const val = String(event?.target[0].value).trim();
+    setCurPage(parseInt(val, 10) || 1);
+  };
+
+  return (
+    <div className={`pagination-container mlm17 mrm18 position-${position}`}>
+      <ul className="pagination align-end">
+        {prev > 1 && (
+          <li className={`page-item${curPage === 1 ? " active" : ""}`}>
+            <a
+              className="page-link page-link-light-hover"
+              data-page-number="1"
+              onClick={() => setCurPage(1)}
+            >
+              1
+            </a>
+          </li>
+        )}
+
+        {prev > 3 && (
+          <li className="page-item disabled">
+            <a
+              className="page-link page-link-light-hover"
+              data-page-number="..."
+            >
+              ...
+            </a>
+          </li>
+        )}
+
+        {prev >= 1 && (
+          <li className="page-item">
+            <a
+              className="page-link page-link-light-hover"
+              data-page-number={prev}
+              onClick={() => setCurPage(prev)}
+            >
+              {prev}
+            </a>
+          </li>
+        )}
+
+        <li className="page-item active">
+          <a
+            className="page-link page-link-light-hover"
+            data-page-number={curPage}
+            onClick={() => setCurPage(curPage)}
+          >
+            {curPage}
+          </a>
+        </li>
+
+        {next <= numPages && (
+          <li className="page-item">
+            <a
+              className="page-link page-link-light-hover"
+              data-page-number={next}
+              onClick={() => setCurPage(next)}
+            >
+              {next}
+            </a>
+          </li>
+        )}
+
+        {next < numPages - 1 && (
+          <li className="page-item disabled">
+            <a
+              className="page-link page-link-light-hover"
+              data-page-number="..."
+            >
+              ...
+            </a>
+          </li>
+        )}
+
+        {next < numPages && (
+          <li className="page-item">
+            <a
+              className="page-link page-link-light-hover"
+              data-page-number="200"
+              onClick={() => setCurPage(numPages)}
+            >
+              {numPages}
+            </a>
+          </li>
+        )}
+      </ul>
+      <ul className="pagination fml5 go-to">
+        <li className="page-link no-hover tb ml10">Go to</li>
+        <li className="page-item">
+          <form onSubmit={onSubmit}>
+            <input
+              className="page-number"
+              id="page-number"
+              type="text"
+              size={3}
+            />
+            <input className="d-none" type="submit" />
+          </form>
+        </li>
+      </ul>
+    </div>
+  );
+};
diff --git a/frontend-v2/src/explorer-components/ticking-ts.tsx b/frontend-v2/src/explorer-components/ticking-ts.tsx
new file mode 100644
index 0000000..c8a7a39
--- /dev/null
+++ b/frontend-v2/src/explorer-components/ticking-ts.tsx
@@ -0,0 +1,32 @@
+import { formatDistanceToNowStrict } from "date-fns";
+import React, { useState } from "react";
+
+export function TickingTs({
+  timestamp,
+  className,
+  inTile,
+}: {
+  timestamp: string;
+  className?: string;
+  inTile?: boolean;
+}): JSX.Element {
+  const fromNow = formatDistanceToNowStrict(new Date(timestamp), {
+    addSuffix: true,
+  });
+  const [val, setVal] = useState(fromNow);
+  setInterval(() => {
+    const newNow = formatDistanceToNowStrict(new Date(timestamp), {
+      addSuffix: true,
+    });
+    setVal(newNow);
+  }, 1000);
+  return (
+    <span
+      className={className}
+      data-from-now={timestamp}
+      in-tile={String(Boolean(inTile))}
+    >
+      {val}
+    </span>
+  );
+}
diff --git a/frontend-v2/src/explorer-components/tx-contract-call-item.tsx b/frontend-v2/src/explorer-components/tx-contract-call-item.tsx
new file mode 100644
index 0000000..9949511
--- /dev/null
+++ b/frontend-v2/src/explorer-components/tx-contract-call-item.tsx
@@ -0,0 +1,102 @@
+import React from "react";
+import { assetURL } from "@/shared/common/asset-url";
+import Link from "next/link";
+
+export const TxContractCallItem: React.FC = () => {
+  const blockNumber = 123;
+  return (
+    <div
+      className="tile tile-type-contract-call fade-in tile-status--success"
+      data-test="contract-call"
+      data-identifier-hash="0x9fdc11e3189b0903c93efe9c0afaa01c2e1fcacb03e47db1de544ba409e0226a"
+    >
+      <div
+        className="row tile-body"
+        data-selector="token-transfers-toggle"
+        data-test="chain_transaction"
+      >
+        {/* Color Block */}
+        <div className="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+          <div>
+            <span className="tile-label" data-test="transaction_type">
+              Contract Call
+            </span>
+          </div>
+          <span
+            className="tile-status-label ml-2 ml-md-0"
+            data-test="transaction_status"
+          >
+            Success
+          </span>
+        </div>
+        {/* Content */}
+        <div className="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+          <span>
+            <div className="text-truncate d-flex">
+              <Link
+                className="text-truncate"
+                data-test="transaction_hash_link"
+                href="/poa/core/tx/0x9fdc11e3189b0903c93efe9c0afaa01c2e1fcacb03e47db1de544ba409e0226a"
+              >
+                0x9fdc11e3189b0903c93efe9c0afaa01c2e1fcacb03e47db1de544ba409e0226a
+              </Link>
+              <div className="bs-label method ml-1">0x344639b4</div>
+            </div>
+          </span>
+          <span>
+            <Link
+              data-test="address_hash_link"
+              href="/poa/core/address/0x0cdde70d140dd0928b21520162c3031caa0ceb5a"
+            >
+              <span data-address-hash="0x0cdDE70d140DD0928b21520162C3031Caa0cEb5a">
+                <span className="d-none d-md-none d-xl-inline">
+                  0x0cdDE70d140DD0928b21520162C3031Caa0cEb5a
+                </span>
+                <span className="d-md-inline-block d-xl-none">
+                  0x0cdde7–0ceb5a
+                </span>
+              </span>
+            </Link>{" "}
+            →{" "}
+            <Link
+              data-test="address_hash_link"
+              href="/poa/core/address/0x981c44040cb6150a2b8a7f63fb182760505bf666"
+            >
+              <span
+                className="contract-address"
+                data-address-hash="0x981C44040CB6150a2b8A7F63FB182760505bf666"
+              >
+                <span className="d-none d-md-none d-xl-inline">
+                  0x981C44040CB6150a2b8A7F63FB182760505bf666
+                </span>
+                <span className="d-md-inline-block d-xl-none">
+                  0x981c44–5bf666
+                </span>
+              </span>
+            </Link>
+          </span>
+          <span className="d-flex flex-md-row flex-column mt-3 mt-md-0">
+            <span className="tile-title">0 BMO</span>
+            <span className="ml-0 ml-md-1 text-nowrap">
+              0.003077109375 TX Fee
+            </span>
+          </span>
+          {/* Transfer */}
+        </div>
+        {/* Block info */}
+        <div className="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+          <span className="mr-2 mr-md-0 order-1">
+            <Link href={assetURL(`block/${blockNumber}`)}>Block #26559654</Link>
+          </span>
+          <span
+            className="mr-2 mr-md-0 order-2"
+            in-tile="true"
+            data-from-now="2022-03-27 07:15:05.000000Z"
+          >
+            38 seconds ago
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend-v2/src/explorer-components/tx-status.tsx b/frontend-v2/src/explorer-components/tx-status.tsx
new file mode 100644
index 0000000..fa8dd7e
--- /dev/null
+++ b/frontend-v2/src/explorer-components/tx-status.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+type Prosp = {
+  status: "ERROR" | "OK" | null | undefined;
+};
+
+export function TxStatus({ status }: Prosp): JSX.Element {
+  if (status === "OK") {
+    return (
+      <span className="mr-4" data-transaction-status="Success">
+        <i
+          style={{ color: "#20b760" }}
+          className="fa-regular fa-check-circle"
+        />{" "}
+        Success
+      </span>
+    );
+  }
+
+  return (
+    <span className="mr-4" data-transaction-status="Error: Reverted">
+      <i
+        style={{ color: "#dc3545" }}
+        className="fa-solid fa-exclamation-circle"
+      />{" "}
+      Error
+    </span>
+  );
+}
diff --git a/frontend-v2/src/explorer-components/tx-token-transfer-item.tsx b/frontend-v2/src/explorer-components/tx-token-transfer-item.tsx
new file mode 100644
index 0000000..18ed370
--- /dev/null
+++ b/frontend-v2/src/explorer-components/tx-token-transfer-item.tsx
@@ -0,0 +1,273 @@
+import React from "react";
+import { assetURL } from "@/shared/common/asset-url";
+import Link from "next/link";
+
+export const TxTokenTransferItem: React.FC = () => {
+  const blockNumber = 123;
+  return (
+    <div
+      className="tile tile-type-token-transfer fade-in tile-status--success"
+      data-test="token-transfer"
+      data-identifier-hash="0xa26665a77410800c96ee764adc2f0aa9cfa0c797c2c332ee73422777aa91a89b"
+    >
+      <div
+        className="row tile-body"
+        data-selector="token-transfers-toggle"
+        data-test="chain_transaction"
+      >
+        {/* Color Block */}
+        <div className="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+          <div>
+            <span className="tile-label" data-test="transaction_type">
+              Token Transfer
+            </span>
+          </div>
+          <span
+            className="tile-status-label ml-2 ml-md-0"
+            data-test="transaction_status"
+          >
+            Success
+          </span>
+        </div>
+        {/* Content */}
+        <div className="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+          <span>
+            <div className="text-truncate d-flex">
+              <a
+                className="text-truncate"
+                data-test="transaction_hash_link"
+                href="/poa/core/tx/0xa26665a77410800c96ee764adc2f0aa9cfa0c797c2c332ee73422777aa91a89b"
+              >
+                0xa26665a77410800c96ee764adc2f0aa9cfa0c797c2c332ee73422777aa91a89b
+              </a>
+              <div className="bs-label method ml-1">CreateEvent</div>
+            </div>
+          </span>
+          <span>
+            <Link
+              data-test="address_hash_link"
+              href="/poa/core/address/0x621c2a125ec4a6d8a7c7a655a18a2868d35eb43c"
+            >
+              <span data-address-hash="0x621C2a125ec4A6D8A7C7A655A18a2868d35eb43C">
+                <span className="d-none d-md-none d-xl-inline">
+                  0x621C2a125ec4A6D8A7C7A655A18a2868d35eb43C
+                </span>
+                <span className="d-md-inline-block d-xl-none">
+                  0x621c2a–5eb43c
+                </span>
+              </span>
+            </Link>{" "}
+            →{" "}
+            <Link
+              data-test="address_hash_link"
+              href="/poa/core/address/0xd789a607ceac2f0e14867de4eb15b15c9ffb5859"
+            >
+              <span
+                className="contract-address"
+                data-address-hash="0xd789a607CEac2f0E14867de4EB15b15C9FFB5859"
+              >
+                <span
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  title="0xd789a607CEac2f0E14867de4EB15b15C9FFB5859"
+                  data-custom-class
+                >
+                  <span className="d-none d-md-none d-lg-inline d-xl-inline">
+                    ArianeeStore
+                  </span>
+                  <span className="d-inline d-md-inline d-lg-none d-xl-none">
+                    ArianeeS..re
+                  </span>
+                  <span> (0xd789a6–fb5859)</span>
+                </span>
+              </span>
+            </Link>
+          </span>
+          <span className="d-flex flex-md-row flex-column mt-3 mt-md-0">
+            <span className="tile-title">0 BMO</span>
+            <span className="ml-0 ml-md-1 text-nowrap">0.003637884 TX Fee</span>
+          </span>
+          {/* Transfer */}
+          <div className="d-flex flex-column mt-2">
+            <div
+              className="text-nowrap-small-screen row mt-3 mt-sm-0"
+              data-test="token_transfer"
+            >
+              <span
+                className="col-xs-12 col-lg-5"
+                style={{ display: "inline-table" }}
+              >
+                <span className="d-inline-block tile-type-token-transfer-short-name">
+                  <Link
+                    data-test="address_hash_link"
+                    href="/poa/core/address/0xd789a607ceac2f0e14867de4eb15b15c9ffb5859"
+                  >
+                    <span
+                      className="contract-address"
+                      data-address-hash="0xd789a607CEac2f0E14867de4EB15b15C9FFB5859"
+                    >
+                      0xd789a6–fb5859
+                    </span>
+                  </Link>
+                </span>{" "}
+                →{" "}
+                <span className="d-inline-block tile-type-token-transfer-short-name">
+                  <Link
+                    data-test="address_hash_link"
+                    href="/poa/core/address/0x7d20a8d54f955b4483a66ab335635ab66e151c51"
+                  >
+                    <span
+                      className="contract-address"
+                      data-address-hash="0x7d20a8D54F955b4483A66aB335635ab66e151c51"
+                    >
+                      0x7d20a8–151c51
+                    </span>
+                  </Link>
+                </span>
+              </span>
+              <span className="col-xs-12 col-lg-4 ml-3 ml-sm-0">
+                0.02105596608669953
+                <a
+                  data-test="token_link"
+                  href="/poa/core/token/0x55d536e4d6c1993d8ef2e2a4ef77f02088419420"
+                >
+                  ARIA
+                </a>
+              </span>
+            </div>
+            <div
+              className="collapse token-transfer-toggle"
+              id="transaction-0xa26665a77410800c96ee764adc2f0aa9cfa0c797c2c332ee73422777aa91a89b"
+            >
+              <div
+                className="text-nowrap-small-screen row mt-3 mt-sm-0"
+                data-test="token_transfer"
+              >
+                <span
+                  className="col-xs-12 col-lg-5"
+                  style={{ display: "inline-table" }}
+                >
+                  <span className="d-inline-block tile-type-token-transfer-short-name">
+                    <Link
+                      data-test="address_hash_link"
+                      href="/poa/core/address/0xd789a607ceac2f0e14867de4eb15b15c9ffb5859"
+                    >
+                      <span
+                        className="contract-address"
+                        data-address-hash="0xd789a607CEac2f0E14867de4EB15b15C9FFB5859"
+                      >
+                        0xd789a6–fb5859
+                      </span>
+                    </Link>
+                  </span>{" "}
+                  →{" "}
+                  <span className="d-inline-block tile-type-token-transfer-short-name">
+                    <Link
+                      data-test="address_hash_link"
+                      href="/poa/core/address/0x3ae23695016bda778c24d62fb607b3d285eed4ae"
+                    >
+                      <span
+                        className="contract-address"
+                        data-address-hash="0x3ae23695016bDA778c24d62fB607B3D285eEd4Ae"
+                      >
+                        0x3ae236–eed4ae
+                      </span>
+                    </Link>
+                  </span>
+                </span>
+                <span className="col-xs-12 col-lg-4 ml-3 ml-sm-0">
+                  0.08422386434679812
+                  <a
+                    data-test="token_link"
+                    href="/poa/core/token/0x55d536e4d6c1993d8ef2e2a4ef77f02088419420"
+                  >
+                    ARIA
+                  </a>
+                </span>
+              </div>
+              <div
+                className="text-nowrap-small-screen row mt-3 mt-sm-0"
+                data-test="token_transfer"
+              >
+                <span
+                  className="col-xs-12 col-lg-5"
+                  style={{ display: "inline-table" }}
+                >
+                  <span className="d-inline-block tile-type-token-transfer-short-name">
+                    <Link
+                      data-test="address_hash_link"
+                      href="/poa/core/address/0xd789a607ceac2f0e14867de4eb15b15c9ffb5859"
+                    >
+                      <span
+                        className="contract-address"
+                        data-address-hash="0xd789a607CEac2f0E14867de4EB15b15C9FFB5859"
+                      >
+                        0xd789a6–fb5859
+                      </span>
+                    </Link>
+                  </span>{" "}
+                  →{" "}
+                  <span className="d-inline-block tile-type-token-transfer-short-name">
+                    <Link
+                      data-test="address_hash_link"
+                      href="/poa/core/address/0xa79b29ad7e0196c95b87f4663ded82fbf2e3add8"
+                    >
+                      <span
+                        className="contract-address"
+                        data-address-hash="0xA79B29AD7e0196C95B87f4663ded82Fbf2E3ADD8"
+                      >
+                        0xa79b29–e3add8
+                      </span>
+                    </Link>
+                  </span>
+                </span>
+                <span className="col-xs-12 col-lg-4 ml-3 ml-sm-0">
+                  0.04211193217339906
+                  <a
+                    data-test="token_link"
+                    href="/poa/core/token/0x55d536e4d6c1993d8ef2e2a4ef77f02088419420"
+                  >
+                    ARIA
+                  </a>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="token-tile-view-more">
+            <a
+              data-selector="token-transfer-open"
+              data-test="token_transfers_expansion"
+              data-toggle="collapse"
+              href="#transaction-0xa26665a77410800c96ee764adc2f0aa9cfa0c797c2c332ee73422777aa91a89b"
+            >
+              View More Transfers
+            </a>
+            <a
+              className="d-none"
+              data-selector="token-transfer-close"
+              data-toggle="collapse"
+              href="#transaction-0xa26665a77410800c96ee764adc2f0aa9cfa0c797c2c332ee73422777aa91a89b"
+            >
+              View Less Transfers
+            </a>
+          </div>
+        </div>
+        {/* Block info */}
+        <div className="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+          <span className="mr-2 mr-md-0 order-1">
+            <Link href={assetURL(`block/${blockNumber}`)}>
+              Block #{blockNumber}
+            </Link>
+          </span>
+          <span
+            className="mr-2 mr-md-0 order-2"
+            in-tile="true"
+            data-from-now="2022-03-27 07:15:05.000000Z"
+          >
+            38 seconds ago
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend-v2/src/explorer-components/tx-transaction-item.tsx b/frontend-v2/src/explorer-components/tx-transaction-item.tsx
new file mode 100644
index 0000000..522c480
--- /dev/null
+++ b/frontend-v2/src/explorer-components/tx-transaction-item.tsx
@@ -0,0 +1,134 @@
+import React from "react";
+import { shortenHash } from "@/shared/common/shorten-hash";
+import { normalizeTokenValue } from "@/shared/common/normalize-token-value";
+import { TickingTs } from "@/shared/explorer-components/ticking-ts";
+import { useChainConfig } from "@/shared/common/use-chain-config";
+import { assetURL } from "@/shared/common/asset-url";
+import Link from "next/link";
+
+export type Tx = {
+  id: string;
+  timestamp: any | null;
+  hash: any | null;
+  blockNumber: number | null;
+  value: string | null;
+  gasUsed: string | null;
+  cumulativeGasUsed: string | null;
+  error: string | null;
+  fromAddressHash: any | null;
+  toAddressHash: any | null;
+  status: any;
+  gas: string | null;
+  gasPrice: string | null;
+  index: number | null;
+  input: any | null;
+  nonce: number | null;
+  r: string | null;
+  s: string | null;
+  v: string | null;
+};
+
+type Props = {
+  tx?: Tx | undefined | null;
+};
+
+export const TxTransactionItem: React.FC<Props> = ({ tx }) => {
+  const chainConfig = useChainConfig();
+  if (!tx) {
+    return <></>;
+  }
+  return (
+    <div
+      className="tile tile-type-transaction fade-in tile-status--success"
+      data-test="transaction"
+      data-identifier-hash={tx.hash}
+    >
+      <div
+        className="row tile-body"
+        data-selector="token-transfers-toggle"
+        data-test="chain_transaction"
+      >
+        {/* Color Block */}
+        <div className="tile-transaction-type-block col-md-2 d-flex flex-row flex-md-column">
+          <div>
+            <span className="tile-label" data-test="transaction_type">
+              Transaction
+            </span>
+          </div>
+          <span
+            className="tile-status-label ml-2 ml-md-0"
+            data-test="transaction_status"
+          >
+            Success
+          </span>
+        </div>
+        {/* Content */}
+        <div className="col-md-7 col-lg-8 d-flex flex-column pr-2 pr-sm-2 pr-md-0">
+          <span>
+            <div className="text-truncate d-flex">
+              <Link
+                className="text-truncate"
+                data-test="transaction_hash_link"
+                href={assetURL(`tx/${tx.hash}`)}
+              >
+                {tx.hash}
+              </Link>
+              <div className="bs-label method ml-1">Transfer</div>
+            </div>
+          </span>
+          <span>
+            <Link
+              data-test="address_hash_link"
+              href={assetURL(`address/${tx.fromAddressHash}`)}
+            >
+              <span data-address-hash={tx.fromAddressHash}>
+                <span className="d-none d-md-none d-xl-inline">
+                  {tx.fromAddressHash}
+                </span>
+                <span className="d-md-inline-block d-xl-none">
+                  {shortenHash(tx.fromAddressHash)}
+                </span>
+              </span>
+            </Link>{" "}
+            →{" "}
+            <Link
+              data-test="address_hash_link"
+              href={assetURL(`address/${tx.toAddressHash}`)}
+            >
+              <span data-address-hash={tx.toAddressHash}>
+                <span className="d-none d-md-none d-xl-inline">
+                  {tx.toAddressHash}
+                </span>
+                <span className="d-md-inline-block d-xl-none">
+                  {shortenHash(tx.toAddressHash)}
+                </span>
+              </span>
+            </Link>
+          </span>
+          <span className="d-flex flex-md-row flex-column mt-3 mt-md-0">
+            <span className="tile-title">
+              {normalizeTokenValue(tx.value)} {chainConfig.symbol}
+            </span>
+            <span className="ml-0 ml-md-1 text-nowrap">
+              {tx.gasPrice} TX Fee
+            </span>
+          </span>
+          {/* Transfer */}
+        </div>
+        {/* Block info */}
+        <div className="col-md-3 col-lg-2 d-flex flex-row flex-md-column flex-nowrap justify-content-center text-md-right mt-3 mt-md-0 tile-bottom">
+          <span className="mr-2 mr-md-0 order-1">
+            <Link href={assetURL(`block/${tx.blockNumber}`)}>
+              Block #{tx.blockNumber}
+            </Link>
+          </span>
+          <TickingTs
+            className="mr-2 mr-md-0 order-2"
+            inTile={true}
+            timestamp={tx.timestamp}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend-v2/src/explorer-components/txs-list.tsx b/frontend-v2/src/explorer-components/txs-list.tsx
new file mode 100644
index 0000000..bafcaf4
--- /dev/null
+++ b/frontend-v2/src/explorer-components/txs-list.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import {
+  Tx,
+  TxTransactionItem,
+} from "@/shared/explorer-components/tx-transaction-item";
+
+type Props = {
+  txs?: Array<Tx | null | undefined> | null | undefined;
+};
+
+export function TxsList({ txs }: Props): JSX.Element {
+  if (!txs) {
+    return <></>;
+  }
+  return (
+    <>
+      {/*
+      // TODO(dora): pagination
+      <div
+        className="pagination-container position-top "
+        data-pagination-container
+      >
+        <ul className="pagination">
+          <li className="page-item">
+            <a
+              className="page-link"
+              href="#"
+              data-first-page-button
+              style={{ display: "none" }}
+            >
+              First
+            </a>
+          </li>
+          <li className="page-item">
+            <a className="page-link" href="#" data-prev-page-button>
+              <svg xmlns="http://www.w3.org/2000/svg" width={6} height={10}>
+                <path
+                  fillRule="evenodd"
+                  d="M2.358 5l3.357 3.358a.959.959 0 1 1-1.357 1.357L.502 5.859c-.076-.042-.153-.08-.217-.144A.949.949 0 0 1 .011 5a.949.949 0 0 1 .274-.715c.064-.064.142-.102.217-.145L4.358.285a.959.959 0 1 1 1.357 1.357L2.358 5z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li className="page-item">
+            <a className="page-link no-hover" href="#" data-page-number>
+              Page 1
+            </a>
+          </li>
+          <li className="page-item">
+            <a
+              className="page-link"
+              href="/block/26559654/transactions"
+              data-next-page-button
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width={6} height={10}>
+                <path
+                  fillRule="evenodd"
+                  d="M5.715 5.715c-.064.064-.141.102-.217.144L1.642 9.715A.959.959 0 1 1 .285 8.358L3.642 5 .285 1.642A.959.959 0 1 1 1.642.285L5.498 4.14c.075.043.153.081.217.145A.949.949 0 0 1 5.989 5a.949.949 0 0 1-.274.715z"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      */}
+
+      <div data-items="true">
+        {txs.map((tx) => tx && <TxTransactionItem key={tx.hash} tx={tx} />)}
+      </div>
+    </>
+  );
+}
diff --git a/frontend-v2/src/home/components/ad-container.tsx b/frontend-v2/src/home/components/ad-container.tsx
new file mode 100644
index 0000000..3cbced2
--- /dev/null
+++ b/frontend-v2/src/home/components/ad-container.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+export function AdContainer(): JSX.Element {
+  // TODO(dora): ads?
+  // @ts-ignore
+  if (true) {
+    return <></>;
+  }
+
+  // @ts-ignore
+  return (
+    <div className="ad-container mb-2" style={{}}>
+      <div className="coinzilla" data-zone="C-26660bf627543e46851" />
+    </div>
+  );
+}
diff --git a/frontend-v2/src/home/components/blk-tile.tsx b/frontend-v2/src/home/components/blk-tile.tsx
new file mode 100644
index 0000000..04bb38e
--- /dev/null
+++ b/frontend-v2/src/home/components/blk-tile.tsx
@@ -0,0 +1,87 @@
+import * as React from "react";
+import { shortenHash } from "@/shared/common/shorten-hash";
+import { TickingTs } from "@/shared/explorer-components/ticking-ts";
+
+import { assetURL } from "@/shared/common/asset-url";
+import { useTranslation } from "next-i18next";
+import Link from "next/link";
+
+export type Blk = {
+  consensus: boolean | null;
+  difficulty: string | null;
+  gasLimit: string | null;
+  gasUsed: string | null;
+  hash: any | null;
+  miner: any | null;
+  nonce: any | null;
+  number: number | null;
+  parentHash: any | null;
+  size: number | null;
+  timestamp: any | null;
+  numTxs: number | null;
+  totalDifficulty: string | null;
+};
+
+type Props = {
+  blk: Blk | null | undefined;
+};
+
+export function BlkTile({ blk }: Props): JSX.Element {
+  const { t } = useTranslation("common");
+  if (!blk) {
+    return <></>;
+  }
+  return (
+    <div
+      className="col-lg-3 fade-up-blocks-chain"
+      data-selector="chain-block"
+      data-block-number={blk.number}
+    >
+      <div className="tile tile-type-block n-p d-flex flex-column">
+        <Link
+          className="tile-title"
+          data-selector="block-number"
+          href={assetURL(`block/${blk.number}`)}
+        >
+          {blk.number}
+        </Link>
+        <div className="tile-bottom-contents">
+          <div className="tile-transactions">
+            <span className="mr-2">
+              {blk.numTxs} {t("nav.txs")}
+            </span>
+            <TickingTs className="text-nowrap" timestamp={blk.timestamp} />
+          </div>
+          <div className="text-truncate">
+            Validator{" "}
+            <Link
+              data-test="address_hash_link"
+              href={assetURL(`address/${blk.miner}`)}
+            >
+              <span data-address-hash={blk.miner}>
+                <span
+                  data-toggle="tooltip"
+                  data-placement="top"
+                  title={blk.miner}
+                  data-custom-class="miner-address-tooltip"
+                >
+                  {/*
+                        TODO(dora) validator name
+                        */}
+                  <span>{shortenHash(blk.miner)}</span>
+                </span>
+              </span>
+            </Link>
+          </div>
+          {/*
+          TODO(dora) reward
+
+                    <div className="text-truncate">Reward 2 BMO</div>
+
+
+          */}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend-v2/src/home/components/dark-mode-toggle.tsx b/frontend-v2/src/home/components/dark-mode-toggle.tsx
new file mode 100644
index 0000000..b7e30f4
--- /dev/null
+++ b/frontend-v2/src/home/components/dark-mode-toggle.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+export const DarkModeToggle: React.FC = () => {
+  const { themeCode } = useSelector(
+    (state: { base: { themeCode: "dark" | "light" } }) => ({
+      themeCode: state.base.themeCode,
+    }),
+  );
+  const dispatch = useDispatch();
+
+  const onClick = () => {
+    dispatch({
+      type: "SET_THEME",
+      payload: themeCode === "dark" ? "light" : "dark",
+    });
+  };
+
+  return (
+    <button
+      className="dark-mode-changer"
+      id="dark-mode-changer"
+      onClick={onClick}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width={15} height={16}>
+        <path
+          fill="#9B62FF"
+          fillRule="evenodd"
+          d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"
+        />
+      </svg>
+    </button>
+  );
+};
diff --git a/frontend-v2/src/home/components/dashboard-banner.tsx b/frontend-v2/src/home/components/dashboard-banner.tsx
new file mode 100644
index 0000000..b4d3ae4
--- /dev/null
+++ b/frontend-v2/src/home/components/dashboard-banner.tsx
@@ -0,0 +1,159 @@
+import React from "react";
+
+export const DashboardBanner: React.FC = () => {
+  return (
+    <div className="dashboard-banner-container" data-page="chain-details">
+      <div className="container">
+        <div className="dashboard-banner">
+          <div className="dashboard-banner-network-graph">
+            <div className="dashboard-banner-chart">
+              <button
+                data-chart-error-message
+                className="alert alert-danger col-12 text-left mt-5"
+                style={{ display: "none" }}
+              >
+                <span>There was a problem loading the chart.</span>
+              </button>
+              <canvas
+                data-chart="historyChart"
+                data-history_chart_paths='{
+                        "market":"/market-history-chart"
+
+                        ,
+
+
+                        "transaction":"/transaction-history-chart"
+
+}'
+                data-history_chart_config='{"market":["price","market_cap"],"transactions":["transactions_per_day"]}'
+                width={1034}
+                height={296}
+                style={{
+                  display: "block",
+                  boxSizing: "border-box",
+                  height: "148px",
+                  width: "517px",
+                }}
+              ></canvas>
+            </div>
+            <div className="dashboard-banner-chart-legend">
+              <div className="dashboard-banner-chart-legend-item">
+                <span className="dashboard-banner-chart-legend-label">
+                  Gas tracker
+                </span>
+                <div className="dashboard-banner-chart-legend-value-container">
+                  <span className="dashboard-banner-chart-legend-value inline">
+                    <div>
+                      <div
+                        className="d-flex flex-row"
+                        style={{ height: "20px", lineHeight: "20px" }}
+                      >
+                        <div className="flex-column">39.0 Gwei</div>
+                        <span
+                          data-toggle="tooltip"
+                          data-placement="top"
+                          data-html="true"
+                          data-template="<div class='tooltip tooltip-inversed-color tooltip-gas-tracker' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>"
+                          title="
+                        <div class='custom-tooltip header'>Gas tracker</div>
+                        <div>
+                          <div class='custom-tooltip description left d-flex'><span>Slow</span><span class='custom-tooltip description right'>39.0 Gwei</span></div>
+                          <div class='custom-tooltip description left d-flex'><span>Average</span><span class='custom-tooltip description right'>39.0 Gwei</span></div>
+                          <div class='custom-tooltip description left d-flex'><span>Fast</span><span class='custom-tooltip description right'>39.0 Gwei</span></div>
+                        </div>
+                        "
+                        >
+                          <span
+                            style={{
+                              display: "inline-block",
+                              height: "20px",
+                              width: "12px",
+                            }}
+                            className="fontawesome-icon info-circle ml-1"
+                          />
+                        </span>
+                      </div>
+                    </div>
+                  </span>
+                </div>
+              </div>
+              <div className="dashboard-banner-chart-legend-item">
+                <span className="dashboard-banner-chart-legend-label">
+                  Daily Transactions
+                </span>
+                <span
+                  className="dashboard-banner-chart-legend-value"
+                  data-selector="tx_per_day"
+                >
+                  87,580
+                  <span
+                    data-toggle="tooltip"
+                    data-placement="top"
+                    data-html="true"
+                    data-template="<div class='tooltip tooltip-inversed-color tooltip-gas-usage' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>"
+                    title="<div class='custom-tooltip-header'>Gas used</div><div class='custom-tooltip-description'><b>9,693,816,212<b></div>"
+                  >
+                    <i
+                      style={{ color: "#ffffff" }}
+                      className="fa fa-info-circle ml-1"
+                    />
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="dashboard-banner-network-plain-container">
+            <div className="dashboard-banner-network-stats">
+              <div className="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-1">
+                <span className="dashboard-banner-network-stats-label">
+                  Average block time
+                </span>
+                <span
+                  className="dashboard-banner-network-stats-value"
+                  data-selector="average-block-time"
+                >
+                  5 seconds
+                </span>
+              </div>
+              <div className="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-2">
+                <span className="dashboard-banner-network-stats-label">
+                  Total transactions
+                </span>
+                <div className="d-flex">
+                  <span
+                    className="dashboard-banner-network-stats-value"
+                    data-selector="transaction-count"
+                  >
+                    53,185,348
+                  </span>
+                </div>
+              </div>
+              <div className="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-3">
+                <span className="dashboard-banner-network-stats-label">
+                  Total blocks
+                </span>
+                <span
+                  className="dashboard-banner-network-stats-value"
+                  data-selector="block-count"
+                >
+                  26,556,683
+                </span>
+              </div>
+              <div className="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-4">
+                <span className="dashboard-banner-network-stats-label">
+                  Wallet addresses
+                </span>
+                <span
+                  className="dashboard-banner-network-stats-value"
+                  data-selector="address-count"
+                >
+                  19,438,885
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend-v2/src/home/components/multi-chain-dropdown.tsx b/frontend-v2/src/home/components/multi-chain-dropdown.tsx
new file mode 100644
index 0000000..182376b
--- /dev/null
+++ b/frontend-v2/src/home/components/multi-chain-dropdown.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import OutsideClickHandler from "react-outside-click-handler";
+
+type Props = {
+  chainName: string;
+};
+
+export const chainSwitchOpts = {
+  mainnets: [
+    ["/eth/mainnet/", "Ethereum"],
+    ["/ethw/mainnet/", "ETHW-mainnet"],
+  ],
+  testnets: [["/bmo/testnet/", "BoomMo Chain"]],
+};
+
+export function MultiChainDropdown({ chainName }: Props) {
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  return (
+    <li className="nav-item dropdown">
+      <a
+        className="nav-link topnav-nav-link active-icon js-show-network-selector"
+        href="#"
+        id="navbarDropdown"
+        role="button"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+        onClick={() => setShowDropdown(true)}
+      >
+        <span className="nav-link-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={6}
+            height={6}
+            className="active-dot-icon"
+          >
+            <circle cx={3} cy={3} r={3} fill="#80d6a1" />
+          </svg>
+        </span>
+        {chainName}{" "}
+        <svg
+          width={12}
+          fill="#BDC4D2"
+          height={12}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 320 512"
+        >
+          <path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" />
+        </svg>
+      </a>
+
+      <OutsideClickHandler onOutsideClick={() => setShowDropdown(false)}>
+        <div
+          className={`dropdown-menu dropdown-menu-right${
+            showDropdown ? " show" : ""
+          }`}
+          aria-labelledby="navbarDropdown"
+        >
+          <a className="dropdown-item header division">Mainnets</a>
+
+          {chainSwitchOpts.mainnets.map((it) => (
+            <a className="dropdown-item" key={it[0]} href={it[0]}>
+              {it[1]}
+            </a>
+          ))}
+
+          <a className="dropdown-item header division">Testnets</a>
+          {chainSwitchOpts.testnets.map((it) => (
+            <a className="dropdown-item" key={it[0]} href={it[0]}>
+              {it[1]}
+            </a>
+          ))}
+        </div>
+      </OutsideClickHandler>
+    </li>
+  );
+}
diff --git a/frontend-v2/src/home/components/raw-modals.tsx b/frontend-v2/src/home/components/raw-modals.tsx
new file mode 100644
index 0000000..315aa98
--- /dev/null
+++ b/frontend-v2/src/home/components/raw-modals.tsx
@@ -0,0 +1,354 @@
+import * as React from "react";
+
+export function RawModals(): JSX.Element {
+  return (
+    <>
+      <div
+        className="modal fade"
+        id="errorStatusModal"
+        tabIndex={-1}
+        role="dialog"
+        aria-hidden="true"
+      >
+        <div
+          className="modal-dialog modal-dialog-centered modal-status"
+          role="document"
+        >
+          <div className="modal-content">
+            <div className="modal-status-graph modal-status-graph-error">
+              <svg xmlns="http://www.w3.org/2000/svg" width={85} height={86}>
+                <defs>
+                  <filter
+                    id="errora"
+                    width={85}
+                    height={86}
+                    x={0}
+                    y={0}
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feOffset dy={6} in="SourceAlpha" />
+                    <feGaussianBlur result="blurOut" stdDeviation="3.464" />
+                    <feFlood floodColor="#C80A40" result="floodOut" />
+                    <feComposite in="floodOut" in2="blurOut" operator="atop" />
+                    <feComponentTransfer>
+                      <feFuncA slope=".6" type="linear" />
+                    </feComponentTransfer>
+                    <feMerge>
+                      <feMergeNode />
+                      <feMergeNode in="SourceGraphic" />
+                    </feMerge>
+                  </filter>
+                  <filter id="errorb">
+                    <feOffset dy={-4} in="SourceAlpha" />
+                    <feGaussianBlur result="blurOut" stdDeviation="2.828" />
+                    <feFlood floodColor="#FF0D51" result="floodOut" />
+                    <feComposite
+                      in="floodOut"
+                      in2="blurOut"
+                      operator="out"
+                      result="compOut"
+                    />
+                    <feComposite in="compOut" in2="SourceAlpha" operator="in" />
+                    <feComponentTransfer>
+                      <feFuncA slope=".5" type="linear" />
+                    </feComponentTransfer>
+                    <feBlend in2="SourceGraphic" />
+                  </filter>
+                </defs>
+                <path
+                  fill="#FFF"
+                  fillRule="evenodd"
+                  d="M54.738 36.969L70.342 52.58c3.521 3.524 3.521 9.237 0 12.76a9.015 9.015 0 0 1-12.754 0L41.984 49.729 26.381 65.34a9.015 9.015 0 0 1-12.754 0c-3.522-3.523-3.522-9.236 0-12.76l15.604-15.611-15.572-15.58c-3.522-3.524-3.522-9.237 0-12.76a9.013 9.013 0 0 1 12.753 0l15.572 15.58 15.572-15.58a9.015 9.015 0 0 1 12.754 0c3.522 3.523 3.522 9.236 0 12.76l-15.572 15.58z"
+                  filter="url(#errorb)"
+                />
+              </svg>
+            </div>
+            <button
+              type="button"
+              className="close close-modal"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18}>
+                <path
+                  fillRule="evenodd"
+                  d="M10.435 8.983l7.261 7.261a1.027 1.027 0 1 1-1.452 1.452l-7.261-7.261-7.262 7.262a1.025 1.025 0 1 1-1.449-1.45l7.262-7.261L.273 1.725A1.027 1.027 0 1 1 1.725.273l7.261 7.261 7.23-7.231a1.025 1.025 0 1 1 1.449 1.45l-7.23 7.23z"
+                />
+              </svg>
+            </button>
+            <div className="modal-body modal-status-body">
+              <h2 className="modal-status-title" />
+              <p
+                className="modal-status-text"
+                style={{ wordBreak: "break-all" }}
+              />
+              <div className="modal-status-button-wrapper">
+                <button className="btn-line" type="button" data-dismiss="modal">
+                  <span className="btn-line-text">Ok</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="modal fade"
+        id="warningStatusModal"
+        tabIndex={-1}
+        role="dialog"
+        aria-hidden="true"
+      >
+        <div
+          className="modal-dialog modal-dialog-centered modal-status"
+          role="document"
+        >
+          <div className="modal-content">
+            <div className="modal-status-graph modal-status-graph-warning">
+              <svg xmlns="http://www.w3.org/2000/svg" width={43} height={85}>
+                <defs>
+                  <filter
+                    id="warninga"
+                    width={43}
+                    height={85}
+                    x={0}
+                    y={0}
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feOffset dy={6} in="SourceAlpha" />
+                    <feGaussianBlur result="blurOut" stdDeviation="3.464" />
+                    <feFlood floodColor="#C16502" result="floodOut" />
+                    <feComposite in="floodOut" in2="blurOut" operator="atop" />
+                    <feComponentTransfer>
+                      <feFuncA slope=".6" type="linear" />
+                    </feComponentTransfer>
+                    <feMerge>
+                      <feMergeNode />
+                      <feMergeNode in="SourceGraphic" />
+                    </feMerge>
+                  </filter>
+                  <filter id="warningb">
+                    <feOffset dy={-4} in="SourceAlpha" />
+                    <feGaussianBlur result="blurOut" stdDeviation="2.828" />
+                    <feFlood floodColor="#FF8502" result="floodOut" />
+                    <feComposite
+                      in="floodOut"
+                      in2="blurOut"
+                      operator="out"
+                      result="compOut"
+                    />
+                    <feComposite in="compOut" in2="SourceAlpha" operator="in" />
+                    <feComponentTransfer>
+                      <feFuncA slope=".5" type="linear" />
+                    </feComponentTransfer>
+                    <feBlend in2="SourceGraphic" />
+                  </filter>
+                </defs>
+                <path
+                  fill="#FFF"
+                  fillRule="evenodd"
+                  d="M30.23 18.848L26 40h-.1a5.003 5.003 0 0 1-9.8 0H16l-4.23-21.152A9.958 9.958 0 0 1 11 15c0-5.523 4.477-10 10-10s10 4.477 10 10a9.958 9.958 0 0 1-.77 3.848zM21 49a9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9 9 9 0 0 1 9-9z"
+                  filter="url(#warningb)"
+                />
+              </svg>
+            </div>
+            <button
+              type="button"
+              className="close close-modal"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18}>
+                <path
+                  fillRule="evenodd"
+                  d="M10.435 8.983l7.261 7.261a1.027 1.027 0 1 1-1.452 1.452l-7.261-7.261-7.262 7.262a1.025 1.025 0 1 1-1.449-1.45l7.262-7.261L.273 1.725A1.027 1.027 0 1 1 1.725.273l7.261 7.261 7.23-7.231a1.025 1.025 0 1 1 1.449 1.45l-7.23 7.23z"
+                />
+              </svg>
+            </button>
+            <div className="modal-body modal-status-body">
+              <h2 className="modal-status-title" />
+              <p className="modal-status-text" style={{}} />
+              <div className="modal-status-button-wrapper">
+                <button className="btn-line" type="button" data-dismiss="modal">
+                  <span className="btn-line-text">Ok</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="modal fade"
+        id="successStatusModal"
+        tabIndex={-1}
+        role="dialog"
+        aria-hidden="true"
+      >
+        <div
+          className="modal-dialog modal-dialog-centered modal-status"
+          role="document"
+        >
+          <div className="modal-content">
+            <div className="modal-status-graph modal-status-graph-success">
+              <svg xmlns="http://www.w3.org/2000/svg" width={99} height={80}>
+                <defs>
+                  <filter
+                    id="successa"
+                    width={99}
+                    height={80}
+                    x={0}
+                    y={0}
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feOffset dy={6} in="SourceAlpha" />
+                    <feGaussianBlur result="blurOut" stdDeviation="3.464" />
+                    <feFlood floodColor="#0E796B" result="floodOut" />
+                    <feComposite in="floodOut" in2="blurOut" operator="atop" />
+                    <feComponentTransfer>
+                      <feFuncA slope=".6" type="linear" />
+                    </feComponentTransfer>
+                    <feMerge>
+                      <feMergeNode />
+                      <feMergeNode in="SourceGraphic" />
+                    </feMerge>
+                  </filter>
+                  <filter id="successb">
+                    <feOffset dy={-4} in="SourceAlpha" />
+                    <feGaussianBlur result="blurOut" stdDeviation="2.828" />
+                    <feFlood floodColor="#15BBA6" result="floodOut" />
+                    <feComposite
+                      in="floodOut"
+                      in2="blurOut"
+                      operator="out"
+                      result="compOut"
+                    />
+                    <feComposite in="compOut" in2="SourceAlpha" operator="in" />
+                    <feComponentTransfer>
+                      <feFuncA slope=".5" type="linear" />
+                    </feComponentTransfer>
+                    <feBlend in2="SourceGraphic" />
+                  </filter>
+                </defs>
+                <path
+                  fill="#FFF"
+                  fillRule="evenodd"
+                  d="M84.31 21.389L46.381 59.34a8.993 8.993 0 0 1-6.399 2.642 8.998 8.998 0 0 1-6.402-2.642L13.629 39.389a9.022 9.022 0 0 1 0-12.76 9.022 9.022 0 0 1 12.76 0l13.593 13.593L71.557 8.629a9.013 9.013 0 0 1 12.753 0c3.522 3.523 3.522 9.236 0 12.76z"
+                  filter="url(#successb)"
+                />
+              </svg>
+            </div>
+            <button
+              type="button"
+              className="close close-modal"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18}>
+                <path
+                  fillRule="evenodd"
+                  d="M10.435 8.983l7.261 7.261a1.027 1.027 0 1 1-1.452 1.452l-7.261-7.261-7.262 7.262a1.025 1.025 0 1 1-1.449-1.45l7.262-7.261L.273 1.725A1.027 1.027 0 1 1 1.725.273l7.261 7.261 7.23-7.231a1.025 1.025 0 1 1 1.449 1.45l-7.23 7.23z"
+                />
+              </svg>
+            </button>
+            <div className="modal-body modal-status-body">
+              <h2 className="modal-status-title" />
+              <p className="modal-status-text" style={{}} />
+              <div className="modal-status-button-wrapper">
+                <button className="btn-line" type="button" data-dismiss="modal">
+                  <span className="btn-line-text">Ok</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="modal fade"
+        id="questionStatusModal"
+        tabIndex={-1}
+        role="dialog"
+        aria-hidden="true"
+      >
+        <div
+          className="modal-dialog modal-dialog-centered modal-status"
+          role="document"
+        >
+          <div className="modal-content">
+            <div className="modal-status-graph modal-status-graph-question">
+              <svg xmlns="http://www.w3.org/2000/svg" width={62} height={85}>
+                <defs>
+                  <filter
+                    id="questiona"
+                    width={62}
+                    height={85}
+                    x={0}
+                    y={0}
+                    filterUnits="userSpaceOnUse"
+                  >
+                    <feOffset dy={6} in="SourceAlpha" />
+                    <feGaussianBlur result="blurOut" stdDeviation="3.464" />
+                    <feFlood floodColor="#2674AF" result="floodOut" />
+                    <feComposite in="floodOut" in2="blurOut" operator="atop" />
+                    <feComponentTransfer>
+                      <feFuncA slope=".6" type="linear" />
+                    </feComponentTransfer>
+                    <feMerge>
+                      <feMergeNode />
+                      <feMergeNode in="SourceGraphic" />
+                    </feMerge>
+                  </filter>
+                  <filter id="questionb">
+                    <feOffset dy={-4} in="SourceAlpha" />
+                    <feGaussianBlur result="blurOut" stdDeviation="2.828" />
+                    <feFlood floodColor="#329AE9" result="floodOut" />
+                    <feComposite
+                      in="floodOut"
+                      in2="blurOut"
+                      operator="out"
+                      result="compOut"
+                    />
+                    <feComposite in="compOut" in2="SourceAlpha" operator="in" />
+                    <feComponentTransfer>
+                      <feFuncA slope=".5" type="linear" />
+                    </feComponentTransfer>
+                    <feBlend in2="SourceGraphic" />
+                  </filter>
+                </defs>
+                <path
+                  fill="#FFF"
+                  fillRule="evenodd"
+                  d="M30.385 46.419c1.149 0 2.146-.344 2.995-1.033.847-.689 1.381-1.664 1.6-2.928.273-1.205.889-2.368 1.846-3.487.957-1.119 2.339-2.454 4.144-4.004 1.915-1.779 3.474-3.3 4.678-4.563 1.203-1.262 2.228-2.784 3.077-4.564.848-1.779 1.272-3.731 1.272-5.855 0-2.87-.794-5.438-2.38-7.707-1.587-2.267-3.774-4.046-6.565-5.338-2.79-1.292-5.963-1.937-9.518-1.937-3.174 0-6.333.531-9.478 1.593-3.147 1.062-5.95 2.54-8.412 4.434-.931.747-1.6 1.522-2.01 2.325-.41.804-.616 1.808-.616 3.013 0 1.78.479 3.287 1.436 4.521.957 1.235 2.12 1.851 3.488 1.851 1.149 0 2.653-.545 4.513-1.636l1.97-1.033c1.531-.918 2.913-1.621 4.144-2.11a10.075 10.075 0 0 1 3.734-.732c1.53 0 2.734.374 3.61 1.12.875.747 1.313 1.752 1.313 3.014 0 1.263-.315 2.41-.943 3.444-.63 1.033-1.574 2.268-2.832 3.702-1.751 1.895-3.118 3.746-4.103 5.554-.984 1.808-1.477 4.062-1.477 6.759 0 1.78.397 3.158 1.19 4.133.793.977 1.9 1.464 3.324 1.464zm.164 20.579c2.297 0 4.198-.803 5.703-2.411 1.504-1.606 2.257-3.587 2.257-5.941 0-2.353-.753-4.334-2.257-5.941-1.505-1.607-3.406-2.411-5.703-2.411-2.244 0-4.117.804-5.621 2.411-1.506 1.607-2.257 3.588-2.257 5.941 0 2.354.751 4.335 2.257 5.941 1.504 1.608 3.377 2.411 5.621 2.411z"
+                  filter="url(#questionb)"
+                />
+              </svg>
+            </div>
+            <button
+              type="button"
+              className="close close-modal"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18}>
+                <path
+                  fillRule="evenodd"
+                  d="M10.435 8.983l7.261 7.261a1.027 1.027 0 1 1-1.452 1.452l-7.261-7.261-7.262 7.262a1.025 1.025 0 1 1-1.449-1.45l7.262-7.261L.273 1.725A1.027 1.027 0 1 1 1.725.273l7.261 7.261 7.23-7.231a1.025 1.025 0 1 1 1.449 1.45l-7.23 7.23z"
+                />
+              </svg>
+            </button>
+            <div className="modal-body modal-status-body">
+              <h2 className="modal-status-title" />
+              <p className="modal-status-text" style={{}} />
+              <div className="modal-status-button-wrapper">
+                <button className="btn-line except" type="button">
+                  <span className="btn-line-text">No</span>
+                </button>
+                <button className="btn-line accept" type="button">
+                  <span className="btn-line-text">Yes</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend-v2/src/home/components/raw-nav-alert.tsx b/frontend-v2/src/home/components/raw-nav-alert.tsx
new file mode 100644
index 0000000..1576d4b
--- /dev/null
+++ b/frontend-v2/src/home/components/raw-nav-alert.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+export function RawNavAlert(): JSX.Element {
+  return (
+    <div
+      className="alert alert-warning text-center mb-0 p-3"
+      data-selector="indexed-status"
+    >
+      BMO is joining the BMO ecosystem, and token holders can now swap BMO for
+      STAKE on the BMO chain! More info and instructions{" "}
+      <a href="https://www.poa.network">here</a>
+    </div>
+  );
+}
diff --git a/frontend-v2/src/home/components/raw-nav.tsx b/frontend-v2/src/home/components/raw-nav.tsx
new file mode 100644
index 0000000..6d6f81a
--- /dev/null
+++ b/frontend-v2/src/home/components/raw-nav.tsx
@@ -0,0 +1,438 @@
+import React, { FormEventHandler, useEffect, useRef, useState } from "react";
+import { assetURL } from "@/shared/common/asset-url";
+import OutsideClickHandler from "react-outside-click-handler";
+import { useChainConfig } from "@/shared/common/use-chain-config";
+import { CommonMargin } from "@/shared/common/common-margin";
+
+import { MultiChainDropdown } from "@/shared/home/components/multi-chain-dropdown";
+import { useRouter } from "next/router";
+import { DarkModeToggle } from "./dark-mode-toggle";
+import { useTranslation } from "next-i18next";
+import Link from "next/link";
+
+function DesktopSearch({ searchVal }: { searchVal: string }): JSX.Element {
+  const { t } = useTranslation("common");
+  const desktopTextInput = useRef<HTMLInputElement>(null);
+  const [focusedField, setFocusedField] = useState(false);
+  const [dangerField, setDangerField] = useState(false);
+  useEffect(() => {
+    desktopTextInput?.current?.addEventListener("focus", () => {
+      setFocusedField(true);
+      setDangerField(false);
+    });
+    desktopTextInput?.current?.addEventListener("blur", () => {
+      setFocusedField(false);
+      setDangerField(false);
+    });
+    document.addEventListener("keyup", (event) => {
+      if (event.key === "/") {
+        desktopTextInput?.current?.focus();
+      }
+    });
+    if (desktopTextInput.current) {
+      desktopTextInput.current.value = searchVal;
+    }
+  }, [desktopTextInput, searchVal]);
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    setDangerField(false);
+    event.preventDefault();
+    // @ts-ignore
+    const val = String(event?.target[0].value).trim();
+    if (val.length === 66) {
+      window.location.replace(assetURL(`tx/${val}`));
+    } else if (val.length === 42) {
+      window.location.replace(assetURL(`address/${val}`));
+    } else if (parseInt(val, 10) > 0) {
+      window.location.replace(assetURL(`block/${val}`));
+    } else {
+      setDangerField(true);
+    }
+  };
+
+  let fieldLabel = focusedField ? " focused-field" : "";
+  if (dangerField) {
+    fieldLabel = " danger-field";
+  }
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="search-form d-lg-flex d-inline-block mobile-search-hide"
+    >
+      <div
+        className="input-group"
+        style={{ width: "100%" }}
+        title={t("nav.search") as string}
+      >
+        <div
+          className={`form-control search-control me auto mobile-search-hide${fieldLabel}`}
+        >
+          <div
+            className="autoComplete_wrapper"
+            role="combobox"
+            aria-owns="autoComplete_list_1"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >
+            <input
+              ref={desktopTextInput}
+              id="main-search-autocomplete"
+              className="main-search-autocomplete"
+              data-test="search_input"
+              data-chain-id={99}
+              data-display-token-icons
+              type="text"
+              tabIndex={1}
+              aria-controls="autoComplete_list_1"
+              aria-autocomplete="both"
+              placeholder={t("nav.search") as string}
+            />
+            <ul id="autoComplete_list_1" role="listbox" hidden />
+          </div>
+        </div>
+        <div className="input-group-append left">
+          <button className="input-group-text" id="search-icon">
+            <svg
+              viewBox="0 0 16 17"
+              xmlns="http://www.w3.org/2000/svg"
+              width={16}
+              height={17}
+            >
+              <path
+                fill="#7DD79F"
+                fillRule="evenodd"
+                d="M15.713 15.727a.982.982 0 0 1-1.388 0l-2.289-2.29C10.773 14.403 9.213 15 7.5 15A7.5 7.5 0 1 1 15 7.5c0 1.719-.602 3.284-1.575 4.55l2.288 2.288a.983.983 0 0 1 0 1.389zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="input-group-append right desktop-only">
+          <div
+            id="slash-icon"
+            className="input-group-text border"
+            data-placement="bottom"
+            data-toggle="tooltip"
+            data-original-title="Press / and focus will be moved to the search field"
+            data-template="<div class='tooltip tooltip-pale-color' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>"
+            style={focusedField ? { display: "none" } : {}}
+          >
+            /
+          </div>
+        </div>
+      </div>
+      <button
+        className="btn btn-outline-success my-2 my-sm-0 sr-only hidden"
+        type="submit"
+      >
+        Search
+      </button>
+    </form>
+  );
+}
+
+function MobileSearch({ searchVal }: { searchVal: string }): JSX.Element {
+  const { t } = useTranslation();
+  const textInput = useRef<HTMLInputElement>(null);
+  const [focusedField, setFocusedField] = useState(false);
+  const [dangerField, setDangerField] = useState(false);
+  useEffect(() => {
+    textInput?.current?.addEventListener("focus", () => {
+      setFocusedField(true);
+      setDangerField(false);
+    });
+    textInput?.current?.addEventListener("blur", () => {
+      setFocusedField(false);
+      setDangerField(false);
+    });
+    if (textInput.current) {
+      textInput.current.value = searchVal;
+    }
+  }, [textInput, searchVal]);
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    setDangerField(false);
+    event.preventDefault();
+    // @ts-ignore
+    const val = event?.target[0].value;
+    if (val.length === 66) {
+      window.location.replace(assetURL(`tx/${val}`));
+    } else if (val.length === 42) {
+      window.location.replace(assetURL(`address/${val}`));
+    } else if (parseInt(val, 10) > 0) {
+      window.location.replace(assetURL(`block/${val}`));
+    } else {
+      setDangerField(true);
+    }
+  };
+
+  let fieldLabel = focusedField ? " focused-field" : "";
+  if (dangerField) {
+    fieldLabel = " danger-field";
+  }
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="search-form d-lg-flex d-inline-block mobile-search-show"
+    >
+      <div
+        className="input-group"
+        style={{ width: "100%" }}
+        title={t("nav.search") as string}
+      >
+        <div
+          className={`form-control search-control me auto mobile-search-show${fieldLabel}`}
+        >
+          <div
+            className="autoComplete_wrapper"
+            role="combobox"
+            aria-owns="autoComplete_list_2"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >
+            <input
+              ref={textInput}
+              id="main-search-autocomplete-mobile"
+              className="main-search-autocomplete"
+              data-test="search_input"
+              data-chain-id={99}
+              data-display-token-icons
+              type="text"
+              tabIndex={1}
+              aria-controls="autoComplete_list_2"
+              aria-autocomplete="both"
+              placeholder={t("nav.search") as string}
+            />
+            <ul id="autoComplete_list_2" role="listbox" hidden />
+          </div>
+        </div>
+        <div className="input-group-append left">
+          <button className="input-group-text" id="search-icon">
+            <svg
+              viewBox="0 0 16 17"
+              xmlns="http://www.w3.org/2000/svg"
+              width={16}
+              height={17}
+            >
+              <path
+                fill="#7DD79F"
+                fillRule="evenodd"
+                d="M15.713 15.727a.982.982 0 0 1-1.388 0l-2.289-2.29C10.773 14.403 9.213 15 7.5 15A7.5 7.5 0 1 1 15 7.5c0 1.719-.602 3.284-1.575 4.55l2.288 2.288a.983.983 0 0 1 0 1.389zM7.5 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="input-group-append right desktop-only">
+          <div
+            id="slash-icon"
+            className="input-group-text border"
+            data-placement="bottom"
+            data-toggle="tooltip"
+            data-original-title="Press / and focus will be moved to the search field"
+            data-template="<div class='tooltip tooltip-pale-color' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>"
+          >
+            /
+          </div>
+        </div>
+      </div>
+      <button
+        className="btn btn-outline-success my-2 my-sm-0 sr-only hidden"
+        type="submit"
+      >
+        Search
+      </button>
+    </form>
+  );
+}
+
+export const RawNav: React.FC = () => {
+  const { t } = useTranslation();
+  const [barClapsed, setBarClapsed] = useState(true);
+  const chainConfig = useChainConfig();
+  const router = useRouter();
+  const { blockNumber, addressHash, txHash } = router.query;
+  const searchVal = blockNumber ?? addressHash ?? txHash ?? "";
+
+  return (
+    <OutsideClickHandler onOutsideClick={() => setBarClapsed(true)}>
+      <nav
+        className="navbar navbar-expand-lg navbar-primary"
+        data-selector="navbar"
+        id="top-navbar"
+      >
+        <div className="container-fluid navbar-container">
+          <Link
+            className="navbar-brand"
+            data-test="header_logo"
+            href={assetURL("/")}
+          >
+            <img
+              className="navbar-logo"
+              id="navbar-logo"
+              src={assetURL("/favicon.svg")}
+              alt={chainConfig.symbol}
+            />
+            <CommonMargin />
+            {chainConfig.chainName}
+          </Link>
+          <button
+            onClick={() => setBarClapsed(!barClapsed)}
+            className="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span className="navbar-toggler-icon" />
+          </button>
+          <div
+            className={`collapse navbar-collapse${barClapsed ? "" : " show"}`}
+            id="navbarSupportedContent"
+          >
+            <ul className="navbar-nav">
+              <li className="nav-item dropdown">
+                <Link
+                  className="nav-link topnav-nav-link"
+                  href={assetURL("blocks")}
+                  id="navbarBlocksDropdown"
+                  role="button"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <span className="nav-link-icon">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width={14}
+                      height={16}
+                    >
+                      <path
+                        fill="#D2DAE9"
+                        fillRule="evenodd"
+                        d="M7 0L-.007 3.498 7 6.996l7.007-3.498L7 0z"
+                      />
+                      <path
+                        fill="#C1C7D4"
+                        fillRule="evenodd"
+                        d="M0 5.005v7.674L6.004 16V8.326L0 5.005z"
+                      />
+                      <path
+                        fill="#A3A9B5"
+                        fillRule="evenodd"
+                        d="M7.996 8.326V16L14 12.679V5.005L7.996 8.326z"
+                      />
+                    </svg>
+                  </span>
+                  {t("nav.blocks")}
+                </Link>
+              </li>
+              <li className="nav-item dropdown" id="activeTransactions">
+                <Link
+                  href={assetURL("txs")}
+                  role="button"
+                  id="navbarTransactionsDropdown"
+                  className="nav-link topnav-nav-link"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <span className="nav-link-icon">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width={16}
+                      height={14}
+                    >
+                      <path
+                        fill="#BDC4D2"
+                        fillRule="evenodd"
+                        d="M15 5h-4.519l1.224 1.224a1.037 1.037 0 0 1-1.465 1.465L7.311 4.76a1.017 1.017 0 0 1-.24-.409 1.024 1.024 0 0 1-.066-.327C7.005 4.016 7 4.009 7 4c-.012-.28.082-.562.295-.776L10.224.295a1.037 1.037 0 0 1 1.465 1.465L10.448 3H15a1 1 0 0 1 0 2z"
+                      />
+                      <path
+                        fill="#A3A9B5"
+                        fillRule="evenodd"
+                        d="M8.788 10.587c-.038.058-.063.122-.114.173l-2.925 2.929a1.033 1.033 0 0 1-1.462 0 1.037 1.037 0 0 1 0-1.465L5.509 11H1a1 1 0 0 1 0-2h4.541L4.303 7.76a1.037 1.037 0 0 1 0-1.465 1.033 1.033 0 0 1 1.462 0L8.69 9.224c.203.203.303.47.302.736.001.014.008.026.008.04 0 .224-.087.42-.212.587z"
+                      />
+                    </svg>
+                  </span>
+                  {t("nav.txs")}
+                </Link>
+              </li>
+              <li className="nav-item dropdown">
+                <Link
+                  href={assetURL("tokens/")}
+                  role="button"
+                  id="navbarAPIsDropdown"
+                  className="nav-link topnav-nav-link"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <span className="nav-link-icon">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      enableBackground="new 0 0 24 24"
+                      width={16}
+                      height={16}
+                    >
+                      <path
+                        fill="#A3A9B5"
+                        fillRule="evenodd"
+                        d="M 16.5 0 C 12.357864 0 9 1.790861 9 4 C 9 6.209139 12.357864 8 16.5 8 C 20.642136 8 24 6.209139 24 4 C 24 1.790861 20.642136 0 16.5 0 z M 9.0625 5.5 C 9.0235 5.664 9 5.83 9 6 L 9 7 C 9 7.849 9.49775 8.63325 10.34375 9.28125 C 11.80575 9.57825 13.06825 10.10225 14.03125 10.78125 C 14.80225 10.92425 15.638 11 16.5 11 C 20.642 11 24 9.209 24 7 L 24 6 C 24 5.83 23.9765 5.664 23.9375 5.5 C 23.4755 7.473 20.324 9 16.5 9 C 12.676 9 9.5245 7.473 9.0625 5.5 z M 23.9375 8.5 C 23.4755 10.473 20.324 12 16.5 12 C 16.079 12 15.68325 11.9735 15.28125 11.9375 C 15.74625 12.5585 15.997 13.266 16 14 C 16.166 14.005 16.331 14 16.5 14 C 20.642 14 24 12.209 24 10 L 24 9 C 24 8.83 23.9765 8.664 23.9375 8.5 z M 7.5 10 C 3.358 10 0 11.791 0 14 C 0 16.209 3.358 18 7.5 18 C 11.642 18 15 16.209 15 14 C 15 11.791 11.642 10 7.5 10 z M 23.9375 11.5 C 23.4755 13.473 20.324 15 16.5 15 C 16.331 15 16.166 15.005 16 15 L 16 17 C 16.166 17.005 16.331 17 16.5 17 C 20.642 17 24 15.209 24 13 L 24 12 C 24 11.83 23.9765 11.664 23.9375 11.5 z M 23.9375 14.5 C 23.4755 16.473 20.324 18 16.5 18 C 16.331 18 16.166 18.005 16 18 L 16 20 C 16.166 20.005 16.331 20 16.5 20 C 20.642 20 24 18.209 24 16 L 24 15 C 24 14.83 23.9765 14.664 23.9375 14.5 z M 0.0625 15.5 C 0.0235 15.664 0 15.83 0 16 L 0 17 C 0 19.209 3.358 21 7.5 21 C 11.642 21 15 19.209 15 17 L 15 16 C 15 15.83 14.9765 15.664 14.9375 15.5 C 14.4755 17.473 11.324 19 7.5 19 C 3.676 19 0.5245 17.473 0.0625 15.5 z M 0.0625 18.5 C 0.0235 18.664 0 18.83 0 19 L 0 20 C 0 22.209 3.358 24 7.5 24 C 11.642 24 15 22.209 15 20 L 15 19 C 15 18.83 14.9765 18.664 14.9375 18.5 C 14.4755 20.473 11.324 22 7.5 22 C 3.676 22 0.5245 20.473 0.0625 18.5 z"
+                      />
+                    </svg>
+                  </span>
+                  Tokens
+                </Link>
+              </li>
+              <li className="nav-item dropdown">
+                <Link
+                  href={assetURL("api-gateway/")}
+                  role="button"
+                  id="navbarAPIsDropdown"
+                  className="nav-link topnav-nav-link"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <span className="nav-link-icon">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width={16}
+                      height={16}
+                    >
+                      <path
+                        fill="#D2DAE9"
+                        fillRule="evenodd"
+                        d="M15 3H5a1 1 0 0 1-2 0H1a1 1 0 0 1 0-2h2a1 1 0 0 1 2 0h10a1 1 0 0 1 0 2z"
+                      />
+                      <path
+                        fill="#BDC4D2"
+                        fillRule="evenodd"
+                        d="M15 9h-2a1 1 0 0 1-2 0H1a1 1 0 0 1 0-2h10a1 1 0 0 1 2 0h2a1 1 0 0 1 0 2z"
+                      />
+                      <path
+                        fill="#A3A9B5"
+                        fillRule="evenodd"
+                        d="M15 15H5a1 1 0 0 1-2 0H1a1 1 0 0 1 0-2h2a1 1 0 0 1 2 0h10a1 1 0 0 1 0 2z"
+                      />
+                    </svg>
+                  </span>
+                  API
+                </Link>
+              </li>
+
+              <MultiChainDropdown chainName={chainConfig.chainName} />
+            </ul>
+            <DarkModeToggle />
+            <DesktopSearch searchVal={searchVal as string} />
+          </div>
+        </div>
+        <MobileSearch searchVal={searchVal as string} />
+      </nav>
+    </OutsideClickHandler>
+  );
+};
diff --git a/frontend-v2/src/home/home-blocks-container.tsx b/frontend-v2/src/home/home-blocks-container.tsx
new file mode 100644
index 0000000..cd1e6fd
--- /dev/null
+++ b/frontend-v2/src/home/home-blocks-container.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { useQueryBlocks } from "@/shared/blks-table-container/hooks/use-query-blocks";
+import { BlkTile } from "@/shared/home/components/blk-tile";
+import { assetURL } from "@/shared/common/asset-url";
+import { useTranslation } from "next-i18next";
+import Link from "next/link";
+
+export const HomeBlocksContainer: React.FC = () => {
+  const { t } = useTranslation("common");
+  const { data, loading, error, refetch } = useQueryBlocks(
+    { first: 4, after: 0 },
+    { pollInterval: 5000 },
+  );
+
+  if (loading) {
+    // TODO(dora)
+    return <></>;
+  }
+
+  const blks = data?.blocks?.edges?.map((e) => e?.node);
+
+  return (
+    <div className="card card-chain-blocks js-ad-dependant-mb-3 mb-3">
+      <div className="card-body">
+        <Link className="btn-line float-right" href={assetURL("blocks")}>
+          View All Blocks
+        </Link>
+        <h2 className="card-title">{t("nav.blocks")}</h2>
+
+        {error && (
+          <button
+            data-error-message
+            className="alert alert-danger col-12 text-left"
+            onClick={refetch}
+          >
+            <span className="alert-link">{t("info.err")}</span>
+          </button>
+        )}
+
+        <div
+          className="row"
+          data-selector="chain-block-list"
+          data-url="/chain-blocks"
+        >
+          {!!blks?.length &&
+            blks.map((blk) => <BlkTile key={blk?.hash} blk={blk} />)}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend-v2/src/home/home-transactions-container.tsx b/frontend-v2/src/home/home-transactions-container.tsx
new file mode 100644
index 0000000..9b60f3f
--- /dev/null
+++ b/frontend-v2/src/home/home-transactions-container.tsx
@@ -0,0 +1,84 @@
+import * as React from "react";
+import { useGetTxs } from "@/shared/block-details-container/hooks/use-get-txs";
+import { TxTransactionItem } from "@/shared/explorer-components/tx-transaction-item";
+
+import { assetURL } from "@/shared/common/asset-url";
+import { useTranslation } from "next-i18next";
+import Link from "next/link";
+
+//         TODO(dora): more tx coming in
+// @ts-ignore
+function MoreTxComingIn(): JSX.Element {
+  return (
+    <div data-selector="channel-batching-message" style={{}}>
+      <div
+        data-selector="reload-transactions-button"
+        className="alert alert-info"
+      >
+        <a href="#" className="alert-link">
+          <span data-selector="channel-batching-count">516</span> More
+          transactions have come in
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export function HomeTransactionsContainer(): JSX.Element {
+  const { t } = useTranslation("common");
+  const { data, refetch, loading, error } = useGetTxs(
+    { first: 20, after: 0 },
+    { pollInterval: 5000 },
+  );
+
+  if (loading) {
+    // TODO(dora)
+    return <></>;
+  }
+
+  const txs = data?.transactions?.edges?.map((e) => e?.node);
+
+  return (
+    <div className="card card-chain-transactions">
+      <div className="card-body">
+        <Link className="btn-line float-right" href={assetURL("txs")}>
+          View All Transactions
+        </Link>
+        <h2 className="card-title lg-card-title"> {t("nav.txs")}</h2>
+        {/*
+        TODO(dora): more tx coming in
+        <MoreTxComingIn/>
+        */}
+
+        {error && (
+          <button
+            data-error-message
+            className="alert alert-danger col-12 text-left"
+            onClick={refetch}
+          >
+            <span className="alert-link">{t("info.err")}</span>
+          </button>
+        )}
+
+        {!txs?.length && (
+          <div data-empty-response-message>
+            <div
+              className="tile tile-muted text-center"
+              data-selector="empty-transactions-list"
+            >
+              There are no transactions for this chain.
+            </div>
+          </div>
+        )}
+
+        <span
+          data-selector="transactions-list"
+          data-transactions-path="/recent-transactions"
+        >
+          {!!txs?.length &&
+            txs.map((tx) => <TxTransactionItem key={tx?.hash} tx={tx} />)}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend-v2/src/home/home.tsx b/frontend-v2/src/home/home.tsx
new file mode 100644
index 0000000..9faa12d
--- /dev/null
+++ b/frontend-v2/src/home/home.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { connect } from "react-redux";
+import { AdContainer } from "@/shared/home/components/ad-container";
+import { HomeTransactionsContainer } from "@/shared/home/home-transactions-container";
+import { HomeBlocksContainer } from "@/shared/home/home-blocks-container";
+import { RawModals } from "./components/raw-modals";
+
+export const Home = connect(
+  (state: { base: { themeCode: "dark" | "light" } }) => ({
+    themeCode: state.base.themeCode,
+  }),
+)((): JSX.Element => {
+  return (
+    <div>
+      <div className="layout-container">
+        {/*
+                  TODO(dora): skip for now
+        <RawNavAlert />
+        */}
+        <main className="js-ad-dependant-pt pt-5">
+          <p className="alert alert-info" role="alert" />
+          <p className="alert alert-danger" role="alert" />
+          {/*
+          TODO(dora): skip for now
+          <DashboardBanner />
+          */}
+          <section className="container">
+            <HomeBlocksContainer />
+
+            <AdContainer />
+
+            <HomeTransactionsContainer />
+          </section>
+        </main>
+      </div>
+
+      <RawModals />
+
+      <div className="offline-ui offline-ui-up">
+        <div className="offline-ui-content" />
+        <a className="offline-ui-retry" />
+      </div>
+      <div className="offline-ui offline-ui-up">
+        <div className="offline-ui-content" />
+        <a className="offline-ui-retry" />
+      </div>
+    </div>
+  );
+});
diff --git a/frontend-v2/src/home/index.ts b/frontend-v2/src/home/index.ts
new file mode 100644
index 0000000..fce0a93
--- /dev/null
+++ b/frontend-v2/src/home/index.ts
@@ -0,0 +1 @@
+export { Home } from "./home";
diff --git a/frontend-v2/src/stylesheets/_code.scss b/frontend-v2/src/stylesheets/_code.scss
new file mode 100644
index 0000000..4a9b049
--- /dev/null
+++ b/frontend-v2/src/stylesheets/_code.scss
@@ -0,0 +1,46 @@
+@use "sass:math";
+
+pre {
+  white-space: pre-wrap;
+}
+
+.pre-wrap code {
+  white-space: pre-wrap;
+}
+
+.pre-decompiled code {
+  white-space: pre-wrap;
+  counter-increment: line;
+}
+
+.pre-decompiled code::before {
+  content: counter(line);
+  display: inline-block;
+  width: 3em;
+  border-right: 1px solid #ddd;
+  padding: 0 0.5em;
+  margin-right: 0.5em;
+  color: #888;
+  -webkit-user-select: none;
+}
+
+.pre-scrollable-shorty {
+  max-height: math.div($pre-scrollable-max-height, 7);
+}
+
+.tile pre {
+  margin-bottom: 0;
+}
+
+.contract-code-container {
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+  }
+
+  & .buttons {
+    @include media-breakpoint-down(md) {
+      width: 100%;
+      margin-bottom: 10px;
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/_elements.scss b/frontend-v2/src/stylesheets/_elements.scss
new file mode 100644
index 0000000..d755151
--- /dev/null
+++ b/frontend-v2/src/stylesheets/_elements.scss
@@ -0,0 +1,29 @@
+hr {
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  border-top: 1px solid #f5f6fa;
+  margin: 30px 0;
+}
+
+svg {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
+
+dl {
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  dd {
+    margin: 0;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/_helpers.scss b/frontend-v2/src/stylesheets/_helpers.scss
new file mode 100644
index 0000000..55620f0
--- /dev/null
+++ b/frontend-v2/src/stylesheets/_helpers.scss
@@ -0,0 +1,54 @@
+.pr-0-md {
+  padding-right: 0 !important;
+
+  @include media-breakpoint-down(md) {
+    padding-right: 15px !important;
+  }
+}
+
+.pl-0-md {
+  padding-left: 0 !important;
+
+  @include media-breakpoint-down(md) {
+    padding-left: 15px !important;
+  }
+}
+
+.card-mr-50-md {
+  margin-right: $common-container-margin;
+
+  @include media-breakpoint-down(md) {
+    margin-right: 0;
+  }
+}
+
+.clearfix:after {
+  clear: both;
+  content: " "; /* Older browser do not support empty content */
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.word-break-all {
+  word-break: break-all;
+}
+
+.centered-container {
+  display: flex;
+  align-items: center;
+}
+
+.pre-wrap {
+  white-space: pre-wrap;
+}
+
+.mb-2-desktop {
+  @include media-breakpoint-up(sm) {
+    margin-bottom: 0.5rem !important;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/_images-preload.scss b/frontend-v2/src/stylesheets/_images-preload.scss
new file mode 100644
index 0000000..1042741
--- /dev/null
+++ b/frontend-v2/src/stylesheets/_images-preload.scss
@@ -0,0 +1,20 @@
+body:after {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  z-index: -1;
+  content: url(/images/network-selector-icons/callisto-mainnet.svg)
+    url(/images/network-selector-icons/ethereum-mainnet.svg)
+    url(/images/network-selector-icons/ethereum-classic.svg)
+    url(/images/network-selector-icons/goerli-testnet.svg)
+    url(/images/network-selector-icons/kovan-testnet.svg)
+    url(/images/network-selector-icons/poa-core.svg)
+    url(/images/network-selector-icons/poa-sokol.svg)
+    url(/images/network-selector-icons/rinkeby-testnet.svg)
+    url(/images/network-selector-icons/rsk-mainnet.svg)
+    url(/images/network-selector-icons/ropsten-testnet.svg)
+    url(/images/network-selector-icons/xdai-chain.svg)
+    url(/images/network-selector-icons/lukso-l14-testnet.svg)
+    url(/images/network-selector-icons/circle-xusdt.svg);
+}
diff --git a/frontend-v2/src/stylesheets/_layout.scss b/frontend-v2/src/stylesheets/_layout.scss
new file mode 100644
index 0000000..a32b61a
--- /dev/null
+++ b/frontend-v2/src/stylesheets/_layout.scss
@@ -0,0 +1,16 @@
+@import "../../node_modules/@tarekraafat/autocomplete.js/dist/css/autoComplete.01";
+
+.layout-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  main {
+    flex-grow: 1;
+    background-color: #fbfafc;
+  }
+}
+
+.logs-hash {
+  line-height: 24px !important;
+}
diff --git a/frontend-v2/src/stylesheets/_mixins.scss b/frontend-v2/src/stylesheets/_mixins.scss
new file mode 100644
index 0000000..1e61c70
--- /dev/null
+++ b/frontend-v2/src/stylesheets/_mixins.scss
@@ -0,0 +1,253 @@
+@mixin textfield-placeholder($color: #a3a9b5) {
+  &::-webkit-input-placeholder {
+    color: $color;
+  }
+  &::-moz-placeholder {
+    color: $color;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  &:-moz-placeholder {
+    color: $color;
+  }
+}
+
+@mixin gradient-container() {
+  background-color: $primary;
+  background-image: linear-gradient(
+    to right,
+    $dashboard-banner-gradient-start,
+    $dashboard-banner-gradient-end
+  );
+  box-shadow: 0 5px 40px -5px rgba(#000, 0.25);
+  margin-top: -3rem;
+}
+
+@mixin stats-item($border-color: #fff, $text-color: #fff, $value-color: #fff) {
+  &-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: calc(1rem + 4px);
+    padding-right: 1rem;
+    position: relative;
+
+    &::before {
+      background-color: $border-color;
+      border-radius: 2px;
+      content: "";
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 4px;
+    }
+  }
+
+  &-label {
+    color: $text-color;
+    display: block;
+    white-space: nowrap;
+  }
+
+  &-label-item {
+    margin-right: 20px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &-value {
+    color: $value-color;
+    display: block;
+    font-size: 1.5rem;
+    font-weight: 200;
+    white-space: nowrap;
+
+    @media (max-width: $breakpoint-lg) {
+      font-size: 1.25rem;
+    }
+  }
+}
+
+@mixin btn-full($bg-color: $primary, $text-color: #fff) {
+  -webkit-appearance: none !important;
+  align-items: center;
+  background-color: $bg-color;
+  border-radius: 2px;
+  border: 1px solid $bg-color;
+  color: $text-color;
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  font-weight: 600;
+  height: 36px;
+  justify-content: center;
+  outline: none;
+  padding: 0 15px;
+  text-decoration: none;
+  transition: $transition-cont;
+  white-space: nowrap;
+  width: fit-content;
+
+  &:hover {
+    background-color: darken($bg-color, 10%);
+    border-color: darken($bg-color, 10%);
+    color: $text-color;
+    text-decoration: none;
+  }
+
+  svg {
+    margin-right: 12px;
+  }
+
+  path {
+    fill: $text-color;
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+
+  &[disabled] {
+    &,
+    &:hover {
+      background-color: $bg-color;
+      border-color: $bg-color;
+      cursor: default;
+      opacity: 0.5;
+    }
+  }
+
+  &.m-b-0-7 {
+    margin-bottom: 0.7rem;
+  }
+}
+
+@mixin btn-line($bg-color: #fff, $text-color: $secondary, $font-size: 12px) {
+  -webkit-appearance: none !important;
+  align-items: center;
+  background-color: $bg-color;
+  border-radius: 2px;
+  border: 1px solid $text-color;
+  color: $text-color;
+  cursor: pointer;
+  display: flex;
+  font-size: $font-size;
+  font-weight: 600;
+  height: 36px;
+  justify-content: center;
+  outline: none;
+  padding: 0 15px;
+  text-decoration: none;
+  transition: $transition-cont;
+  white-space: nowrap;
+  width: fit-content;
+  font-weight: 400;
+
+  &:hover {
+    background-color: $text-color;
+    color: $bg-color;
+    text-decoration: none;
+
+    path {
+      fill: $bg-color;
+    }
+  }
+
+  svg {
+    margin-right: 12px;
+  }
+
+  path {
+    transition: $transition-cont;
+    fill: $text-color;
+  }
+
+  &.full-width {
+    width: 100%;
+  }
+
+  &[disabled] {
+    &,
+    &:hover {
+      background-color: $bg-color !important;
+      border-color: $primary !important;
+      color: $primary !important;
+      cursor: default;
+      opacity: 0.5;
+    }
+  }
+}
+
+@mixin square-icon-button($color, $dimensions) {
+  align-items: center;
+  border: 1px solid $color;
+  border-radius: 2px;
+  cursor: pointer;
+  display: flex;
+  height: $dimensions;
+  justify-content: center;
+  transition: $transition-cont;
+  width: $dimensions;
+
+  svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  path {
+    fill: $color;
+    transition: $transition-cont;
+  }
+
+  &:hover {
+    background-color: $color;
+
+    path {
+      fill: #fff;
+    }
+  }
+}
+
+@mixin square-icon-button-inline($color, $dimensions) {
+  border: 1px solid $color;
+  border-radius: 2px;
+  cursor: pointer;
+  display: inline;
+  height: $dimensions;
+  transition: $transition-cont;
+  width: $dimensions;
+
+  path {
+    fill: $color;
+    transition: $transition-cont;
+  }
+
+  svg {
+    vertical-align: text-bottom;
+    margin-bottom: -1.1px;
+  }
+
+  &:hover {
+    background-color: $color;
+
+    path {
+      fill: #fff;
+    }
+  }
+}
+
+@mixin image-2x($image, $width: 100%, $height: 100%) {
+  @media (min--moz-device-pixel-ratio: 1.3),
+    (-o-min-device-pixel-ratio: 2.6/2),
+    (-webkit-min-device-pixel-ratio: 1.3),
+    (min-device-pixel-ratio: 1.3),
+    (min-resolution: 1.3dppx) {
+    background-image: url($image);
+    background-size: $width $height;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/_typography.scss b/frontend-v2/src/stylesheets/_typography.scss
new file mode 100644
index 0000000..590c4a2
--- /dev/null
+++ b/frontend-v2/src/stylesheets/_typography.scss
@@ -0,0 +1,130 @@
+$common-link-color: $primary !default;
+$blue: #4b89fb !default;
+$success: #34c0ad !default;
+
+body {
+  font-family: $font-family;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 26px;
+  font-weight: 200;
+}
+
+h2 {
+  font-size: 18px;
+  font-weight: 200;
+}
+
+h3 {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 36px;
+}
+
+h4 {
+  color: $gray-600;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 24px;
+  margin-top: 4px;
+
+  &.underline {
+    text-decoration: underline;
+  }
+}
+
+h5 {
+  font-size: 14px;
+}
+
+p {
+  font-size: 16px;
+
+  @media screen and (max-width: 768px) {
+    font-size: 16px;
+  }
+}
+
+a {
+  color: $common-link-color;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: darken($common-link-color, 20%);
+    text-decoration: underline;
+  }
+
+  .bg-primary &:hover,
+  .bg-primary &:focus {
+    color: $white;
+  }
+}
+
+label,
+textarea.form-control {
+  font-size: 13px;
+}
+
+.monospace {
+  font-family: $font-family-monospace;
+}
+
+.contract-address {
+  display: inline-block;
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  &:hover {
+    text-decoration-style: none;
+  }
+}
+
+.text {
+  &-transaction {
+    color: $blue;
+  }
+
+  &-contract-call {
+    color: $green;
+  }
+
+  &-contract-creation {
+    color: $pink;
+  }
+
+  &-token {
+    color: $orange;
+  }
+
+  &-internal-transaction {
+    color: $teal;
+  }
+
+  &-faded {
+    opacity: 0.7;
+  }
+}
+
+[data-transaction-status="Success"],
+[data-internal-transaction-type="Reward"] {
+  color: $success;
+}
+
+[data-internal-transaction-type="Call"] {
+  color: $blue;
+}
+
+[data-internal-transaction-type="Delegate Call"] {
+  color: $purple;
+}
+
+[data-internal-transaction-type="Create"] {
+  color: $pink;
+}
+
+[data-transaction-status^="Error"],
+[data-internal-transaction-type="Suicide"] {
+  color: $danger;
+}
diff --git a/frontend-v2/src/stylesheets/app.scss b/frontend-v2/src/stylesheets/app.scss
new file mode 100644
index 0000000..8549fea
--- /dev/null
+++ b/frontend-v2/src/stylesheets/app.scss
@@ -0,0 +1,135 @@
+@import "./components/route_prefix";
+@import "./mixins";
+
+/* Phoenix flash messages */
+.alert:empty {
+  display: none;
+}
+
+/* This file is for your main application css. */
+
+// Font Awesome
+$fa-font-path: $route-prefix + "/webfonts";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/regular";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid";
+
+// Bootstrap Core CSS
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "../../node_modules/bootstrap/scss/root";
+@import "../../node_modules/bootstrap/scss/reboot";
+@import "../../node_modules/bootstrap/scss/grid";
+@import "../../node_modules/bootstrap/scss/code";
+@import "../../node_modules/bootstrap/scss/close";
+@import "../../node_modules/bootstrap/scss/buttons";
+@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/input-group";
+@import "../../node_modules/bootstrap/scss/utilities/spacing";
+@import "../../node_modules/bootstrap/scss/utilities/sizing";
+@import "../../node_modules/bootstrap/scss/utilities/display";
+@import "../../node_modules/bootstrap/scss/utilities/flex";
+@import "../../node_modules/bootstrap/scss/utilities/float";
+@import "../../node_modules/bootstrap/scss/utilities/text";
+@import "../../node_modules/bootstrap/scss/utilities/background";
+@import "../../node_modules/bootstrap/scss/utilities/position";
+@import "../../node_modules/bootstrap/scss/utilities/borders";
+@import "../../node_modules/bootstrap/scss/progress";
+
+// Bootstrap Components
+@import "../../node_modules/bootstrap/scss/alert";
+@import "../../node_modules/bootstrap/scss/badge";
+@import "../../node_modules/bootstrap/scss/card";
+@import "../../node_modules/bootstrap/scss/dropdown";
+@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/nav";
+@import "../../node_modules/bootstrap/scss/navbar";
+@import "../../node_modules/bootstrap/scss/pagination";
+@import "../../node_modules/bootstrap/scss/tables";
+@import "../../node_modules/bootstrap/scss/transitions";
+
+// Code highlight
+@import "../../node_modules/highlight.js/styles/default";
+
+//Custom theme
+@import "theme/fonts";
+
+// Custom SCSS
+@import "layout";
+@import "typography";
+@import "code";
+@import "helpers";
+@import "elements";
+//@import "forms";
+@import "components/panels";
+@import "components/nav_tabs";
+@import "components/dot";
+@import "components/pagination_container";
+@import "components/address_link";
+@import "components/footer";
+@import "components/filter";
+@import "components/button";
+@import "components/table";
+@import "components/navbar";
+@import "components/alerts";
+@import "components/animations";
+@import "components/card";
+@import "components/tile";
+@import "components/dashboard-banner";
+@import "components/icon-link";
+@import "components/badge";
+@import "components/description-list";
+@import "components/nounderline-link";
+@import "components/token-balance-dropdown";
+@import "components/address-overview";
+@import "components/token_tile_view_more";
+@import "components/dropdown";
+@import "components/loading-spinner";
+@import "components/transaction-input";
+@import "components/coin-balance-tile";
+@import "components/highlight";
+@import "components/btn_full";
+@import "components/btn_line";
+@import "components/check";
+@import "components/stakes_variables";
+@import "components/stakes_table";
+@import "components/form";
+@import "components/btn_add_to_mm";
+@import "components/btn_copy";
+@import "components/btn_qr";
+@import "components/btn_wallet";
+@import "components/btn_contract";
+@import "components/btn_address_card";
+@import "components/btn_dropdown_line";
+@import "components/transaction";
+@import "components/api";
+@import "components/verify_other_explorers";
+@import "components/errors";
+@import "components/log-search";
+@import "components/radio";
+@import "components/modal_variables";
+@import "components/new_smart_contract";
+@import "components/radio_big";
+@import "components/btn_no_border";
+@import "components/custom_tooltips";
+@import "components/_erc721_token_image_container";
+@import "components/_inventory_token_instance_image_container";
+@import "components/_external_link";
+@import "components/_label";
+@import "components/_token";
+@import "components/_dropzone";
+@import "components/_search";
+@import "components/_ad";
+// Font Awesome
+@import "components/_fontawesome_icon";
+
+@import "theme/dark-theme";
+
+@import "theme/custom_contracts/dark-forest-theme";
+@import "theme/custom_contracts/circles-theme";
+@import "../../node_modules/bootstrap/scss/modal";
diff --git a/frontend-v2/src/stylesheets/components/_ad.scss b/frontend-v2/src/stylesheets/components/_ad.scss
new file mode 100644
index 0000000..a98e712
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_ad.scss
@@ -0,0 +1,9 @@
+.ad-container {
+  display: table;
+  margin: 0 auto;
+  height: 96px;
+}
+
+a.ad-url {
+  color: $tile-body-a-color;
+}
diff --git a/frontend-v2/src/stylesheets/components/_address-overview.scss b/frontend-v2/src/stylesheets/components/_address-overview.scss
new file mode 100644
index 0000000..67854ff
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_address-overview.scss
@@ -0,0 +1,83 @@
+.address-detail-hash-title {
+  color: #333;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.2;
+  text-align: left;
+  word-break: break-all;
+}
+
+.overview-title-buttons {
+  display: flex;
+}
+
+.overview-title-item {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: fit-content;
+  margin-right: 8px;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.address-overview {
+  .card-section {
+    margin-bottom: $common-container-margin;
+
+    &:first-child {
+      .card {
+        margin-right: $common-container-margin;
+
+        @include media-breakpoint-down(md) {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  .card {
+    margin-bottom: 0;
+    height: 100%;
+  }
+}
+
+.balance-card-title {
+  margin-bottom: 0.5rem;
+}
+
+.address-detail-item {
+  margin-right: 1em;
+  padding-bottom: 0.5em;
+}
+
+.address-balance-text {
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1.2;
+  margin: 0 0 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.address-current-balance {
+  line-height: 1.2;
+  margin: 0 0 12px;
+  font-weight: 400;
+
+  small {
+    font-size: 11px;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.logs-decoded {
+  line-height: 25px !important;
+}
diff --git a/frontend-v2/src/stylesheets/components/_address_link.scss b/frontend-v2/src/stylesheets/components/_address_link.scss
new file mode 100644
index 0000000..709c4cc
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_address_link.scss
@@ -0,0 +1,23 @@
+.address-link {
+  &__font {
+    font-family: $font-family-monospace;
+  }
+
+  &__type {
+    padding: 0 3px;
+  }
+
+  &__seperator {
+    margin: 0 2px;
+  }
+
+  &__copy-button {
+    background-color: $gray-100;
+    appearance: none;
+    border-color: transparent transparent transparent $border-color;
+
+    i {
+      color: $gray-500 !important;
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_alerts.scss b/frontend-v2/src/stylesheets/components/_alerts.scss
new file mode 100644
index 0000000..4bbfc09
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_alerts.scss
@@ -0,0 +1,9 @@
+$alert-danger-background-color: #fff3f7 !default;
+$alert-danger-border-color: #fff3f7 !default;
+$alert-danger-color: #ff7986 !default;
+
+.alert-danger {
+  background-color: $alert-danger-background-color;
+  border-color: $alert-danger-border-color;
+  color: $alert-danger-color;
+}
diff --git a/frontend-v2/src/stylesheets/components/_animations.scss b/frontend-v2/src/stylesheets/components/_animations.scss
new file mode 100644
index 0000000..895d030
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_animations.scss
@@ -0,0 +1,94 @@
+@keyframes fade-in {
+  0% {
+    transform: scale(0.97);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes fade-up-blocks-chain {
+  0% {
+    flex-basis: 0%;
+    width: 0%;
+    opacity: 0;
+    overflow-x: hidden;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    flex-basis: 25%;
+    width: 25%;
+    opacity: 1;
+    overflow-x: auto;
+  }
+}
+
+@keyframes fade-up {
+  0% {
+    height: 0;
+    opacity: 0;
+  }
+
+  25% {
+    opacity: 0;
+    transform: translateY(10px) scale(0.97);
+  }
+
+  100% {
+    height: 100%;
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes shrink-out {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.75);
+  }
+}
+
+.fade-in {
+  animation: fade-in 0.6s ease-out 0.4s backwards;
+}
+
+.fade-up-blocks-chain {
+  will-change: transform, opacity, width;
+  white-space: nowrap;
+  animation: fade-up-blocks-chain 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+  @include media-breakpoint-down(md) {
+    animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
+}
+
+.fade-up {
+  will-change: transform, opacity, height;
+  animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+  @media (max-width: $breakpoint-md) {
+    max-height: 300px;
+    animation: fade-up--mobile 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
+}
+
+.shrink-out {
+  transform-origin: bottom center;
+  animation: shrink-out 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
+}
diff --git a/frontend-v2/src/stylesheets/components/_api.scss b/frontend-v2/src/stylesheets/components/_api.scss
new file mode 100644
index 0000000..afdee95
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_api.scss
@@ -0,0 +1,254 @@
+@use "sass:math";
+
+$api-text-monospace-color: $secondary !default;
+$api-text-monospace-background: rgba($api-text-monospace-color, 0.1) !default;
+$api-anchors-list-background-color: #f6f7f9 !default;
+$api-doc-list-item-title-color: #333 !default;
+$api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default;
+
+.api-text-monospace {
+  color: $api-text-monospace-color;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+}
+
+.api-text-monospace-background {
+  background-color: $api-text-monospace-background;
+  border-radius: 2px;
+  font-weight: 300;
+  padding: 5px 6px;
+}
+
+.api-anchors-list {
+  background-color: $api-anchors-list-background-color;
+  column-gap: 40px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  padding: 30px;
+  row-gap: 25px;
+
+  @include media-breakpoint-down(md) {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+  }
+
+  @include media-breakpoint-down(sm) {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+    grid-template-rows: none;
+  }
+}
+
+.api-anchors-list-item {
+  display: grid;
+  grid-template-columns: 0.75fr minmax(0, 1.25fr);
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.api-anchors-list-item-title {
+  align-self: center;
+  color: #333;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.api-anchors-list-item-value {
+  align-self: center;
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.api-text-title {
+  font-size: 12px;
+  line-height: 1.2;
+  margin-left: 20px;
+}
+.api-doc-list-item {
+  border-bottom: 1px solid $base-border-color;
+  padding: $card-vertical-padding $card-horizontal-padding;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.api-doc-list-item-contents {
+  display: flex;
+  justify-content: space-between;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
+}
+
+.api-doc-list-item-title {
+  color: $api-doc-list-item-title-color;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.2;
+  margin: 0 0 15px;
+}
+
+.api-doc-list-item-query {
+  display: inline-block;
+  font-size: 12px;
+  line-height: 1.2;
+  margin-bottom: 20px;
+  word-break: break-all;
+  word-wrap: break-word;
+
+  > strong {
+    font-weight: 700;
+  }
+}
+
+.api-doc-list-item-text {
+  color: #aaa;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.api-doc-list-item-description {
+  width: 100%;
+}
+
+.api-doc-list-item-controls {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin-left: 50px;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-left: 0;
+    padding-top: 25px;
+  }
+}
+
+.api-doc-list-item-controls-badges {
+  display: flex;
+  justify-content: flex-end;
+
+  .api-badge {
+    margin-right: 8px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.api-doc-list-item-controls-view-more {
+  align-self: flex-end;
+  color: $api-doc-list-item-view-more-color;
+  cursor: pointer;
+  font-size: 14px;
+  margin-top: auto;
+  white-space: nowrap;
+
+  .fa {
+    margin-left: 5px;
+  }
+}
+
+[aria-expanded="false"] {
+  .api-doc-list-item-controls-view-more-open {
+    display: block;
+  }
+  .api-doc-list-item-controls-view-more-close {
+    display: none;
+  }
+}
+
+[aria-expanded="true"] {
+  .api-doc-list-item-controls-view-more-open {
+    display: none;
+  }
+  .api-doc-list-item-controls-view-more-close {
+    display: block;
+  }
+}
+
+.api-doc-parameters-container {
+  border-top: 1px solid $base-border-color;
+  margin-top: 20px;
+  padding-top: $card-vertical-padding;
+}
+
+.api-doc-parameters-list {
+  border-bottom: 1px solid $base-border-color;
+  margin-bottom: $card-vertical-padding;
+  padding-bottom: math.div($card-vertical-padding, 2);
+}
+
+.api-doc-parameters-list-title {
+  color: #333;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0 0 15px;
+  white-space: nowrap;
+}
+
+.api-doc-parameters-list-item {
+  margin-bottom: 15px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  @include media-breakpoint-down(sm) {
+    margin-bottom: 30px;
+
+    [class*="col-"] {
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.api-doc-parameters-list-item-title {
+  color: #333;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 0 0 8px;
+}
+
+.api-doc-parameters-list-item-subtitle {
+  color: #aaa;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.api-doc-parameters-list-item-description {
+  color: #333;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2;
+  margin: 0 0 8px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_badge.scss b/frontend-v2/src/stylesheets/components/_badge.scss
new file mode 100644
index 0000000..5d7c9d3
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_badge.scss
@@ -0,0 +1,45 @@
+$badge-success-color: #15bba6 !default;
+$badge-success-background-color: rgba($badge-success-color, 0.1) !default;
+$badge-danger-color: #ed9966 !default;
+$badge-danger-background-color: rgba($badge-danger-color, 0.1) !default;
+$badge-neutral-color: $secondary !default;
+$badge-neutral-background-color: rgba($secondary, 0.1) !default;
+
+.badge {
+  color: $white;
+
+  &.tile-badge {
+    font-size: 10px;
+    font-weight: bold;
+    height: 20px;
+    line-height: 20px;
+    margin: 0;
+    padding: 0 11px;
+    width: auto;
+  }
+
+  &.api-badge {
+    font-size: 12px;
+    font-weight: 700;
+    height: 24px;
+    line-height: 26px;
+    margin: 0;
+    padding: 0 8px;
+    width: auto;
+  }
+
+  &.badge-success {
+    background-color: $badge-success-background-color;
+    color: $badge-success-color;
+  }
+
+  &.badge-danger {
+    background-color: $badge-danger-background-color;
+    color: $badge-danger-color;
+  }
+
+  &.badge-neutral {
+    background-color: $badge-neutral-background-color;
+    color: $badge-neutral-color;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_add_to_mm.scss b/frontend-v2/src/stylesheets/components/_btn_add_to_mm.scss
new file mode 100644
index 0000000..023c58f
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_add_to_mm.scss
@@ -0,0 +1,30 @@
+@import "./route_prefix";
+
+.btn-add-to-mm {
+  background-image: url($route-prefix + "/images/icons/metamask-fox.svg");
+  background-position: center;
+  background-size: 22px 22px;
+  margin-bottom: 1px;
+  width: 22px;
+  height: 22px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.btn-add-chain-to-mm {
+  background-image: url($route-prefix + "/images/icons/metamask-fox.svg");
+  background-position: center;
+  background-size: 20px 20px;
+  background-repeat: no-repeat;
+  background-position-x: 30px;
+  background-position-y: center;
+  padding-left: 40px;
+  outline: none;
+
+  &.in-footer {
+    background-position-x: 0px;
+    padding-left: 25px;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_address_card.scss b/frontend-v2/src/stylesheets/components/_btn_address_card.scss
new file mode 100644
index 0000000..ac9fb0f
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_address_card.scss
@@ -0,0 +1,14 @@
+$btn-address-card-icon-color: $primary !default;
+$btn-address-card-icon-dimensions: 31px !default;
+
+.btn-address-card-icon {
+  @include square-icon-button(
+    $btn-address-card-icon-color,
+    $btn-address-card-icon-dimensions
+  );
+
+  svg {
+    height: 10px;
+    width: 20px;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_contract.scss b/frontend-v2/src/stylesheets/components/_btn_contract.scss
new file mode 100644
index 0000000..fdc3d0d
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_contract.scss
@@ -0,0 +1,19 @@
+$btn-contract-color: $primary !default;
+$btn-contract-dimensions: 31px !default;
+
+.btn-contract-icon {
+  @include square-icon-button($btn-contract-color, $btn-contract-dimensions);
+  display: block;
+
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) {
+      svg {
+        &.safari_only {
+          height: 32px;
+          width: 32px;
+          margin: 6.5px;
+        }
+      }
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_copy.scss b/frontend-v2/src/stylesheets/components/_btn_copy.scss
new file mode 100644
index 0000000..83073b4
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_copy.scss
@@ -0,0 +1,64 @@
+$btn-copy-color: $primary !default;
+$btn-copy-dimensions: 31px !default;
+$btn-copy-small-dimensions: 22px !default;
+
+.btn-copy-icon {
+  @include square-icon-button-inline($btn-copy-color, $btn-copy-dimensions);
+  &.btn-copy-icon-no-borders {
+    &:hover {
+      background-color: transparent;
+      path {
+        fill: $btn-copy-color;
+      }
+    }
+    border: none;
+  }
+  svg {
+    width: $btn-copy-dimensions;
+    height: $btn-copy-dimensions;
+  }
+  &.btn-copy-icon-small {
+    &.btn-copy-icon-custom {
+      position: absolute;
+    }
+    @include square-icon-button-inline(
+      $btn-copy-color,
+      $btn-copy-small-dimensions
+    );
+    &.btn-copy-icon-no-borders {
+      &:hover {
+        background-color: transparent;
+        path {
+          fill: $btn-copy-color;
+        }
+      }
+      border: none;
+    }
+    svg {
+      width: $btn-copy-small-dimensions;
+      height: $btn-copy-small-dimensions;
+    }
+  }
+}
+
+.btn-copy-mobile-container {
+  @include media-breakpoint-up(md) {
+    display: flex;
+  }
+}
+
+.btn-copy-mobile {
+  @include media-breakpoint-up(md) {
+    margin-left: 0.5rem;
+  }
+}
+
+.btn-copy-tx-raw-input-container {
+  position: relative;
+  width: 19px;
+}
+
+.btn-copy-tx-raw-input {
+  position: absolute;
+  bottom: 0;
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_dropdown_line.scss b/frontend-v2/src/stylesheets/components/_btn_dropdown_line.scss
new file mode 100644
index 0000000..bf4851c
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_dropdown_line.scss
@@ -0,0 +1,21 @@
+$btn-dropdown-line-bg: #fff !default;
+$btn-dropdown-line-color: #e2e5ec !default;
+$btn-dropdown-line-color-hover: #f5f6fa !default;
+$btn-dropdown-line-font: #333;
+
+.btn-dropdown-line {
+  @include btn-line($btn-dropdown-line-bg, $btn-dropdown-line-color, 14px);
+  border-color: $btn-dropdown-line-color;
+  color: $btn-dropdown-line-font;
+  outline: none !important;
+  margin-right: 20px;
+  &.no-rm {
+    margin-right: 0;
+  }
+
+  &:hover {
+    background-color: $btn-dropdown-line-color-hover;
+    border-color: $btn-dropdown-line-color;
+    color: $btn-dropdown-line-font;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_full.scss b/frontend-v2/src/stylesheets/components/_btn_full.scss
new file mode 100644
index 0000000..97964ad
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_full.scss
@@ -0,0 +1,6 @@
+$btn-full-primary-bg: $primary !default;
+$btn-full-primary-color: #fff !default;
+
+.btn-full-primary {
+  @include btn-full($btn-full-primary-bg, $btn-full-primary-color);
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_line.scss b/frontend-v2/src/stylesheets/components/_btn_line.scss
new file mode 100644
index 0000000..b62b345
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_line.scss
@@ -0,0 +1,6 @@
+$btn-line-bg: #fff !default;
+$btn-line-color: $secondary !default;
+
+.btn-line {
+  @include btn-line($btn-line-bg, $btn-line-color);
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_no_border.scss b/frontend-v2/src/stylesheets/components/_btn_no_border.scss
new file mode 100644
index 0000000..a74bb45
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_no_border.scss
@@ -0,0 +1,30 @@
+$btn-no-border-bg: #fff !default;
+$btn-no-border-color: $primary !default;
+
+.btn-no-border {
+  @include btn-line($btn-no-border-bg, $btn-no-border-color);
+
+  border-color: $btn-no-border-bg;
+
+  &:hover {
+    border-color: $btn-no-border-color;
+  }
+}
+
+.btn-no-border-link-to-tems {
+  background-color: rgba($primary, 0.1) !important;
+  border-color: #00000000 !important;
+  align-items: center;
+  border-radius: 2px;
+  display: flex;
+  font-size: 12px;
+  position: relative;
+  user-select: none;
+  text-align: center;
+  white-space: nowrap;
+  color: $primary !important;
+
+  &:hover {
+    border-color: #f5f6fa;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_qr.scss b/frontend-v2/src/stylesheets/components/_btn_qr.scss
new file mode 100644
index 0000000..0f8fbc5
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_qr.scss
@@ -0,0 +1,6 @@
+$btn-qr-color: $primary !default;
+$btn-qr-dimensions: 31px !default;
+
+.btn-qr-icon {
+  @include square-icon-button($btn-qr-color, $btn-qr-dimensions);
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_swap.scss b/frontend-v2/src/stylesheets/components/_btn_swap.scss
new file mode 100644
index 0000000..daeb373
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_swap.scss
@@ -0,0 +1,32 @@
+.btn-swap {
+  background-size: 20px 21px;
+  width: 20px;
+  height: 21px;
+  background-repeat: no-repeat;
+  display: inline-block;
+  margin-bottom: 3px;
+  vertical-align: middle;
+  cursor: pointer;
+
+  &.honeypot {
+    background-image: url(/images/icons/swap/honeyswap.png);
+  }
+  &.sushi {
+    background-image: url(/images/icons/swap/sushi.svg);
+  }
+  &.swapr {
+    background-image: url(/images/icons/swap/swapr.svg);
+  }
+  &.curve {
+    background-image: url(/images/icons/swap/curve.svg);
+  }
+  &.component {
+    background-image: url(/images/icons/swap/component.png);
+  }
+  &.cowswap {
+    background-image: url(/images/icons/swap/cowswap.png);
+  }
+  &.oneinch {
+    background-image: url(/images/icons/swap/1inch.svg);
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_btn_wallet.scss b/frontend-v2/src/stylesheets/components/_btn_wallet.scss
new file mode 100644
index 0000000..e0d7c43
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_btn_wallet.scss
@@ -0,0 +1,10 @@
+$btn-wallet-color: $btn-line-color !default;
+$btn-wallet-dimensions: 31px !default;
+
+.btn-wallet-icon {
+  @include square-icon-button($btn-wallet-color, $btn-wallet-dimensions);
+  color: $btn-wallet-color;
+  &:hover {
+    color: #fff;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_button.scss b/frontend-v2/src/stylesheets/components/_button.scss
new file mode 100644
index 0000000..5dd8d5e
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_button.scss
@@ -0,0 +1,105 @@
+$button-primary-color: $primary !default;
+$button-secondary-color: $secondary !default;
+
+.button,
+.btn {
+  border-radius: 2px;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1.2;
+  padding: 10px 16px;
+  text-align: center;
+  text-decoration: none;
+  transition: $transition-cont;
+  white-space: nowrap;
+
+  &-primary {
+    background-color: $button-primary-color;
+    border: 1px solid $button-primary-color;
+    color: #fff;
+
+    &:hover,
+    &:focus {
+      background-color: darken($button-primary-color, 10%);
+      border-color: darken($button-primary-color, 10%);
+      color: #fff;
+      outline: none !important;
+      text-decoration: none;
+    }
+
+    &:disabled {
+      background-color: $gray-300;
+      color: $gray-800;
+      text-decoration: none;
+    }
+  }
+
+  &-secondary {
+    background-color: #fff;
+    border: 1px solid $button-secondary-color;
+    color: $button-secondary-color;
+    font-weight: 400;
+
+    &:hover,
+    &:focus {
+      background-color: darken($button-secondary-color, 10%);
+      border-color: darken($button-secondary-color, 10%);
+      color: #fff;
+      outline: none !important;
+      text-decoration: none;
+    }
+  }
+
+  &-xs {
+    font-size: 11px;
+    padding: 6px 9px 6px !important;
+  }
+
+  &-sm {
+    font-size: 12px;
+    padding: 10px 20px 10px;
+  }
+
+  &-md {
+    font-size: 1.5rem;
+    padding: 15px 30px 15px;
+  }
+
+  &-lg {
+    font-size: 1.5rem;
+    padding: 20px 60px 20px;
+  }
+
+  &-danger {
+    background-color: #dc3545 !important;
+    border: 1px solid #dc3545 !important;
+  }
+
+  // Block button
+  // -------------------------
+
+  &-block {
+    display: block;
+    width: 100%;
+  }
+
+  &-disabled,
+  &:disabled {
+    background-color: $gray-300;
+    color: $gray-500;
+    text-decoration: none;
+  }
+}
+
+// Vertically space out multiple block buttons
+.button-block + .button-block {
+  margin-top: 5px;
+}
+
+.spinner {
+  background-image: url("/images/spinner.svg");
+  background-position: right;
+  background-repeat: no-repeat;
+  background-size: 30px;
+}
diff --git a/frontend-v2/src/stylesheets/components/_card.scss b/frontend-v2/src/stylesheets/components/_card.scss
new file mode 100644
index 0000000..6227cf1
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_card.scss
@@ -0,0 +1,329 @@
+$card-background-color: #fff !default;
+$card-tab-active: $primary !default;
+$card-default-border-radius: 10px !default;
+$card-horizontal-padding: 30px;
+$card-vertical-padding: 30px;
+$card-background-1: $primary !default;
+$card-background-1-text-color: #fff !default;
+$card-tab-icon-color: #20b760 !default;
+$card-tab-icon-color-active: #fff !default;
+
+.card {
+  background-color: $card-background-color;
+  border-radius: $card-default-border-radius;
+  border: none;
+  box-shadow: 0 0 30px 0 rgba(202, 199, 226, 0.5);
+  margin-bottom: $common-container-margin;
+
+  .block-details-row {
+    flex-direction: row;
+    @include media-breakpoint-down(sm) {
+      flex-direction: column;
+    }
+
+    .block-detail-el {
+      & + .block-detail-el {
+        @include media-breakpoint-down(sm) {
+          margin-top: 6px;
+        }
+      }
+    }
+  }
+}
+
+.card-background-1 {
+  background-color: $card-background-1;
+  color: $card-background-1-text-color;
+  a:not(.dropdown-item),
+  a:not(.dropdown-item):hover {
+    color: $card-background-1-text-color;
+  }
+}
+
+.card-header {
+  background: transparent;
+  border-bottom: 1px solid $base-border-color;
+  padding: $card-vertical-padding $card-horizontal-padding;
+
+  &-tabs {
+    margin: (-$card-spacer-y) (-$card-spacer-x);
+  }
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 1.2rem;
+  margin-bottom: 2rem;
+
+  &.lg-card-title {
+    @media (max-width: 374px) {
+      font-size: 13px;
+    }
+  }
+
+  &.margin-bottom-md {
+    margin-bottom: 25px;
+  }
+
+  &.margin-bottom-sm {
+    margin-bottom: 15px;
+  }
+
+  &.margin-bottom-xs {
+    margin-bottom: 10px;
+  }
+
+  &.margin-bottom-0 {
+    margin-bottom: 0;
+  }
+
+  .card-title-container & {
+    line-height: 1.2;
+    margin: 0;
+
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 25px;
+    }
+  }
+}
+
+.card-subtitle {
+  color: #333;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin: 0 0 30px;
+
+  &.margin-bottom-0 {
+    margin-bottom: 0;
+  }
+}
+
+.card-title-container {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 25px $card-horizontal-padding;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
+}
+
+.card-title-paging {
+  padding: 0px $card-horizontal-padding;
+  display: flex;
+  justify-content: flex-end;
+  min-height: 54px;
+}
+
+.card-footer-paging {
+  padding: 0px $card-horizontal-padding;
+  padding-bottom: 25px;
+  display: flex;
+  justify-content: flex-end;
+  min-height: 80px;
+}
+
+.card-title-controls {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
+
+  .card-title-control {
+    margin-right: 20px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 20px;
+      margin-right: 0;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.card-body {
+  padding: $card-horizontal-padding;
+}
+
+.card-body-flex-column-space-between {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.card-server-response-body {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.card-chain-blocks {
+  min-height: 233px;
+  max-height: auto;
+  [class*="col-"]:last-child {
+    .tile {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.card-chain-transactions {
+  min-height: 664px;
+  max-height: auto;
+
+  .tile {
+    margin-bottom: 0;
+  }
+}
+
+.card-tabs {
+  align-items: center;
+  border-top-left-radius: $card-default-border-radius;
+  border-top-right-radius: $card-default-border-radius;
+  border-bottom: 1px solid $base-border-color;
+  display: flex;
+  justify-content: flex-start;
+  overflow: hidden;
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+  }
+}
+
+.card-tab {
+  align-items: center;
+  background-color: $card-background-color;
+  color: #333;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-weight: normal;
+  height: 70px;
+  padding: 0 25px;
+  text-align: center;
+  transition: $transition-cont;
+
+  &:hover {
+    background-color: rgba($card-tab-active, 0.15);
+    color: $card-tab-active;
+    text-decoration: none;
+  }
+
+  @include media-breakpoint-down(md) {
+    display: none;
+    width: 100%;
+  }
+
+  .fa-check-circle {
+    color: $card-tab-icon-color;
+    margin-left: 6px;
+  }
+
+  &.active {
+    background-color: $card-tab-active;
+    color: #fff;
+    cursor: default;
+    text-decoration: none;
+
+    .fa-check-circle {
+      color: $card-tab-icon-color-active;
+    }
+
+    @include media-breakpoint-down(md) {
+      cursor: pointer;
+      display: flex;
+      order: -1;
+
+      &::after {
+        border-bottom: 0;
+        border-left: 0.3em solid transparent;
+        border-right: 0.3em solid transparent;
+        border-top: 0.3em solid;
+        content: "";
+        display: inline-block;
+        height: 0;
+        margin-left: 10px;
+        width: 0;
+      }
+
+      &.noCaret::after {
+        display: none;
+      }
+    }
+  }
+}
+
+.mob-transaction {
+  @include media-breakpoint-down(sm) {
+    margin-left: 15px !important;
+  }
+}
+
+.implementation-container {
+  margin-top: 10px;
+}
+
+.implementation-title {
+  float: left;
+  margin-right: 5px;
+}
+
+.implementation-value {
+  line-height: 30px;
+}
+
+.connect-container {
+  display: flex;
+  line-height: 36px;
+}
+
+.write-contract-btn {
+  padding: 6px 8px !important;
+  height: 31px !important;
+  font-size: 11px;
+}
+
+.contract-plus-btn-container {
+  height: 31px !important;
+  &:hover i {
+    color: #fff !important;
+  }
+}
+
+.contract-plus-btn {
+  color: $primary;
+  font-size: 15px;
+}
+
+.custom-power-input {
+  height: 20px;
+  width: 50px !important;
+  margin-top: -10px !important;
+}
+
+.list-title-description {
+  @media (min-width: 992px) {
+    display: inline-block;
+  }
+}
+
+.list-top-pagination-container-wrapper {
+  @media (min-width: 992px) {
+    float: right;
+  }
+}
+
+.function-output {
+  margin-left: -1rem;
+}
diff --git a/frontend-v2/src/stylesheets/components/_check.scss b/frontend-v2/src/stylesheets/components/_check.scss
new file mode 100644
index 0000000..c7f7b1f
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_check.scss
@@ -0,0 +1,48 @@
+$check-color: $primary !default;
+$check-dimensions: 14px !default;
+
+.check {
+  align-items: center;
+  display: flex;
+  position: relative;
+
+  input[type="checkbox"] {
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 5;
+
+    &:checked + .check-icon::before {
+      background-color: $check-color;
+      content: "";
+      height: 6px;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      width: 6px;
+    }
+  }
+
+  .check-icon {
+    top: -1px;
+    border: 1px solid $base-border-color;
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: $check-dimensions;
+    margin: 0 10px 0 0;
+    position: relative;
+    width: $check-dimensions;
+    z-index: 1;
+  }
+
+  .check-text {
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.2;
+    position: relative;
+    white-space: nowrap;
+    z-index: 1;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_check_tooltip.scss b/frontend-v2/src/stylesheets/components/_check_tooltip.scss
new file mode 100644
index 0000000..64e416d
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_check_tooltip.scss
@@ -0,0 +1,27 @@
+$check-tooltip-background: #f5f6fa !default;
+$check-tooltip-background-active: $primary !default;
+$check-tooltip-check: #a3a9b5 !default;
+$check-tooltip-check-active: #fff !default;
+
+.check-tooltip {
+  display: block;
+  height: 16px;
+  width: 16px;
+  cursor: pointer;
+
+  .check-tooltip-circle {
+    fill: $check-tooltip-background;
+  }
+  .check-tooltip-check {
+    fill: $check-tooltip-check;
+  }
+
+  &:hover {
+    .check-tooltip-circle {
+      fill: $check-tooltip-background-active;
+    }
+    .check-tooltip-check {
+      fill: $check-tooltip-check-active;
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_coin-balance-tile.scss b/frontend-v2/src/stylesheets/components/_coin-balance-tile.scss
new file mode 100644
index 0000000..d8d782b
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_coin-balance-tile.scss
@@ -0,0 +1,9 @@
+.tile.tile-type-coin-balance {
+  [data-balance-change-sign="Positive"] {
+    color: $green;
+  }
+
+  [data-balance-change-sign="Negative"] {
+    color: $red;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_custom_tooltips.scss b/frontend-v2/src/stylesheets/components/_custom_tooltips.scss
new file mode 100644
index 0000000..f50289d
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_custom_tooltips.scss
@@ -0,0 +1,112 @@
+/* Custom Validator Tooltip at Block Details Page */
+$tooltip-background-color: $btn-line-color !default;
+
+.tooltip-validator-details {
+  left: -100px !important;
+}
+
+/* Custom Validator Tooltip at Block Details Page end*/
+
+/* Inversed color Bootstrap Tooltip */
+
+.tooltip-inversed-color {
+  .tooltip-inner {
+    background-color: #fff !important;
+    color: #333 !important;
+  }
+}
+
+.tooltip-inversed-color.bs-tooltip-top .arrow::before,
+.tooltip-inversed-color.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+  border-top-color: #fff !important;
+}
+
+.tooltip-inversed-color.bs-tooltip-right .arrow::before,
+.tooltip-inversed-color.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+  border-right-color: #fff !important;
+}
+
+.tooltip-inversed-color.bs-tooltip-bottom .arrow::before,
+.tooltip-inversed-color.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+  border-bottom-color: #fff !important;
+}
+
+.tooltip-inversed-color.bs-tooltip-left .arrow::before,
+.tooltip-inversed-color.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+  border-left-color: #fff !important;
+}
+
+/* Inversed color Bootstrap Tooltip end*/
+
+/* Pale color Bootstrap Tooltip */
+
+.tooltip-pale-color {
+  .tooltip-inner {
+    background-color: rgba(#fff, 0.5) !important;
+    color: #333 !important;
+  }
+}
+
+.tooltip-pale-color.bs-tooltip-top .arrow::before,
+.tooltip-pale-color.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+  border-top-color: rgba($primary, 0.5) !important;
+}
+
+.tooltip-pale-color.bs-tooltip-right .arrow::before,
+.tooltip-pale-color.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+  border-right-color: rgba($primary, 0.5) !important;
+}
+
+.tooltip-pale-color.bs-tooltip-bottom .arrow::before,
+.tooltip-pale-color.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+  border-bottom-color: rgba($primary, 0.5) !important;
+}
+
+.tooltip-pale-color.bs-tooltip-left .arrow::before,
+.tooltip-pale-color.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+  border-left-color: rgba($primary, 0.5) !important;
+}
+
+/* Pale color Bootstrap Tooltip end*/
+
+.tooltip-market-cap {
+  .tooltip-inner {
+    @media (min-width: 576px) {
+      max-width: 250px !important;
+    }
+    @media (min-width: 768px) {
+      max-width: 350px !important;
+    }
+    width: 350px !important;
+  }
+}
+
+.tooltip-gas-usage {
+  .tooltip-inner {
+    @media (min-width: 576px) {
+      max-width: 150px !important;
+    }
+    @media (min-width: 768px) {
+      max-width: 150px !important;
+    }
+    width: 150px !important;
+  }
+}
+
+.custom-tooltip-header {
+  font-size: 1.2em;
+  margin-bottom: 10px;
+}
+
+.custom-tooltip-total-transactions {
+  margin-top: 6px;
+  @media (min-width: 992px) {
+    margin-top: 9px;
+  }
+}
+
+.custom-tooltip-description {
+  .left {
+    text-align: left;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_dashboard-banner.scss b/frontend-v2/src/stylesheets/components/_dashboard-banner.scss
new file mode 100644
index 0000000..0e8b065
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_dashboard-banner.scss
@@ -0,0 +1,269 @@
+$dashboard-banner-gradient-start: $primary !default;
+$dashboard-banner-gradient-end: lighten(
+  $dashboard-banner-gradient-start,
+  5%
+) !default;
+$dashboard-banner-network-plain-container-background-color: lighten(
+  $dashboard-banner-gradient-end,
+  5%
+) !default;
+$dashboard-line-color-price: lighten(
+  $dashboard-banner-gradient-end,
+  5%
+) !default;
+$dashboard-line-color-market: $secondary !default;
+$dashboard-line-color-transactions: $warning !default;
+$dashboard-stats-item-label-color: #fff !default;
+$dashboard-stats-item-value-color: rgba(#fff, 0.8) !default;
+$dashboard-banner-chart-legend-label-color: #fff !default;
+$dashboard-banner-chart-legend-value-color: $dashboard-stats-item-value-color !default;
+$dashboard-stats-item-border-color: $primary !default;
+$dashboard-banner-network-plain-container-height: 205px;
+$dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !default;
+$dashboard-banner-chart-axis-font-color-alt: #333;
+
+.dashboard-banner-container {
+  @include gradient-container();
+  margin-bottom: 3rem;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  height: 264px;
+  @include media-breakpoint-down(sm) {
+    height: auto;
+  }
+  @include media-breakpoint-down(md) {
+    height: auto;
+  }
+}
+
+.dashboard-banner {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 9;
+
+  @include media-breakpoint-between(lg, xl) {
+    height: 249px;
+  }
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
+}
+
+.dashboard-banner-network-graph {
+  flex-grow: 1;
+  padding: 15px 0 0 0;
+
+  @include media-breakpoint-down(md) {
+    display: flex;
+    flex-direction: column;
+    padding-top: 20px;
+  }
+}
+
+.dashboard-banner-chart {
+  flex-grow: 1;
+  margin: 15px 0 20px 0;
+  max-width: 350px;
+  position: relative;
+  min-height: 100px;
+  height: calc(100% - 86px);
+
+  @include media-breakpoint-down(md) {
+    flex-grow: 0;
+    margin-top: 20px;
+    margin-bottom: auto;
+    max-width: 100%;
+  }
+
+  > canvas {
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+.dashboard-banner-chart-legend {
+  display: grid;
+  grid-template-columns: repeat(var(--numChartData), 0.9fr);
+  padding-bottom: 12px;
+  padding-left: 20px;
+
+  .dashboard-banner-chart-legend-item {
+    padding-bottom: 3px;
+    padding-left: 12px;
+    padding-top: 3px;
+    position: relative;
+    padding-right: 12px;
+
+    @include media-breakpoint-down(md) {
+      display: flex;
+      flex-direction: row;
+    }
+
+    @media (max-width: 599px) {
+      padding-top: 0;
+      padding-bottom: 0;
+      flex-direction: column;
+    }
+
+    &::before {
+      border-radius: 2px;
+      content: "";
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 4px;
+    }
+
+    &:nth-child(1)::before {
+      background-color: $dashboard-line-color-price;
+    }
+
+    &:nth-child(2)::before {
+      background-color: $dashboard-line-color-market;
+    }
+
+    &:nth-child(3)::before {
+      background-color: $dashboard-line-color-transactions;
+    }
+  }
+
+  .dashboard-banner-chart-legend-label {
+    color: $dashboard-banner-chart-legend-label-color;
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.2;
+    margin: 0 0 5px;
+
+    @media (max-width: 374px) {
+      position: relative;
+      top: -2px;
+    }
+
+    @include media-breakpoint-down(md) {
+      margin: 0 5px 0 0;
+    }
+  }
+
+  .dashboard-banner-chart-legend-value {
+    color: $dashboard-banner-chart-legend-value-color;
+    display: block;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.2;
+
+    &.inline {
+      display: inline-block;
+    }
+  }
+
+  .dashboard-banner-chart-legend-value-container {
+    white-space: nowrap;
+  }
+
+  .gas-price-icon {
+    position: relative;
+    top: -2px;
+    path {
+      fill: $dashboard-line-color-price;
+    }
+  }
+}
+
+.dashboard-banner-network-plain-container {
+  align-items: center;
+  align-self: flex-end;
+  background-color: $dashboard-banner-network-plain-container-background-color;
+  border-top-left-radius: 10px;
+  display: flex;
+  height: $dashboard-banner-network-plain-container-height;
+  justify-content: center;
+  margin: 45px 0 -15px 30px;
+  max-width: 100%;
+  padding: 30px 0 30px 60px;
+  width: 750px;
+  position: relative;
+
+  @include media-breakpoint-down(lg) {
+    margin-top: 15px;
+    width: 550px;
+  }
+
+  @include media-breakpoint-down(md) {
+    border-top-right-radius: 10px;
+    height: auto;
+    justify-content: flex-start;
+    margin-left: 0;
+    max-width: 100%;
+    padding: 20px 0 20px 20px;
+    width: 250px;
+    box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
+  }
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+  }
+
+  &::after {
+    background-color: $dashboard-banner-network-plain-container-background-color;
+    bottom: 0;
+    content: "";
+    display: block;
+    height: $dashboard-banner-network-plain-container-height;
+    left: 0;
+    position: absolute;
+    width: 9999px;
+    z-index: -1;
+    box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
+    border-top-left-radius: 10px;
+
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+  }
+}
+
+.dashboard-banner-network-stats {
+  column-gap: 25px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+
+  @include media-breakpoint-down(lg) {
+    grid-template-columns: 1fr 1fr;
+    row-gap: 20px;
+  }
+
+  @include media-breakpoint-down(md) {
+    grid-template-columns: 1fr;
+    row-gap: 20px;
+  }
+
+  @include media-breakpoint-down(sm) {
+    column-gap: 10px;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @include stats-item(
+    $dashboard-stats-item-border-color,
+    $dashboard-stats-item-label-color,
+    $dashboard-stats-item-value-color
+  );
+
+  .dashboard-banner-network-stats-item {
+    @media (max-width: 374px) {
+      padding-left: calc(0.6rem + 4px);
+      padding-right: 0.5rem;
+    }
+  }
+
+  .dashboard-banner-network-stats-value {
+    @media (max-width: 374px) {
+      font-size: 0.9rem;
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_description-list.scss b/frontend-v2/src/stylesheets/components/_description-list.scss
new file mode 100644
index 0000000..1441b37
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_description-list.scss
@@ -0,0 +1,3 @@
+dt {
+  font-weight: normal;
+}
diff --git a/frontend-v2/src/stylesheets/components/_dot.scss b/frontend-v2/src/stylesheets/components/_dot.scss
new file mode 100644
index 0000000..d9fa046
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_dot.scss
@@ -0,0 +1,23 @@
+.transaction {
+  &__dot {
+    display: inline-block;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin-left: 5px;
+    vertical-align: baseline;
+
+    &--pending {
+      background-color: $gray-500;
+    }
+    &--success {
+      background-color: $success;
+    }
+    &--failed {
+      background-color: $danger;
+    }
+    &--out_of_gas {
+      background-color: $warning;
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_dropdown.scss b/frontend-v2/src/stylesheets/components/_dropdown.scss
new file mode 100644
index 0000000..3a789d9
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_dropdown.scss
@@ -0,0 +1,112 @@
+$dropdown-menu-item-color: #333 !default;
+$dropdown-menu-item-hover-color: $secondary !default;
+$dropdown-menu-item-hover-background: rgba($secondary, 0.1) !default;
+
+// These styles extend the default Bootstrap styles
+.dropdown-menu {
+  border-bottom: 1px solid #e2e5ec;
+  border-left: 1px solid #e2e5ec;
+  border-radius: 0 0 2px 2px !important;
+  border-right: 1px solid #e2e5ec;
+  border-top: none;
+  box-shadow: $box-shadow;
+  padding: 0;
+  width: 100%;
+
+  &.right {
+    left: auto;
+    right: 0;
+  }
+
+  .nav-item & {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    top: 45px;
+
+    .dropdown-item:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
+  &.exponention-dropdown {
+    width: 100px;
+    min-width: 100px;
+  }
+}
+
+.dropdown-item {
+  color: $dropdown-menu-item-color;
+  font-size: 12px;
+  padding: 10px 20px;
+  transition: $transition-cont;
+  white-space: initial;
+
+  & {
+    &.active,
+    &:hover,
+    &:focus {
+      background-color: $dropdown-menu-item-hover-background;
+      color: $dropdown-menu-item-hover-color;
+
+      .external-link-icon {
+        path {
+          fill: $header-icon-color-hover;
+        }
+      }
+    }
+  }
+
+  &:first-child {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+
+  &.header {
+    &,
+    &:hover,
+    &:active {
+      padding-left: 10px;
+      background-color: #fff !important;
+      cursor: default;
+      color: #333;
+      font-weight: 700;
+    }
+  }
+
+  &.division {
+    border-top: 1px solid $base-border-color;
+  }
+}
+
+.navbar .dropdown-menu {
+  border: none;
+}
+
+.dropdown-search-icon {
+  color: $gray-300;
+  left: 8px;
+  pointer-events: none;
+  top: 5px;
+}
+
+.dropdown-search-field {
+  padding-left: 2rem;
+}
+
+.dropdown-toggle::after {
+  margin-left: 0.71em;
+  font-size: 12px !important;
+}
+
+.token-balance-dropdown {
+  transform: none !important;
+  top: 20px !important;
+  left: unset !important;
+  width: 300px !important;
+}
diff --git a/frontend-v2/src/stylesheets/components/_dropzone.scss b/frontend-v2/src/stylesheets/components/_dropzone.scss
new file mode 100644
index 0000000..f635c49
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_dropzone.scss
@@ -0,0 +1,541 @@
+/*
+ * The MIT License
+ * Copyright (c) 2012 Matias Meno <m@tias.me>
+ */
+
+@-webkit-keyframes passing-through {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px);
+  }
+  30%,
+  70% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    -moz-transform: translateY(-40px);
+    -ms-transform: translateY(-40px);
+    -o-transform: translateY(-40px);
+    transform: translateY(-40px);
+  }
+}
+
+@-moz-keyframes passing-through {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px);
+  }
+  30%,
+  70% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    -moz-transform: translateY(-40px);
+    -ms-transform: translateY(-40px);
+    -o-transform: translateY(-40px);
+    transform: translateY(-40px);
+  }
+}
+
+@keyframes passing-through {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px);
+  }
+  30%,
+  70% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-40px);
+    -moz-transform: translateY(-40px);
+    -ms-transform: translateY(-40px);
+    -o-transform: translateY(-40px);
+    transform: translateY(-40px);
+  }
+}
+
+@-webkit-keyframes slide-in {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px);
+  }
+  30% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+}
+
+@-moz-keyframes slide-in {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px);
+  }
+  30% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(40px);
+    -moz-transform: translateY(40px);
+    -ms-transform: translateY(40px);
+    -o-transform: translateY(40px);
+    transform: translateY(40px);
+  }
+  30% {
+    opacity: 1;
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+}
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  10% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  20% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@-moz-keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  10% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  20% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+  10% {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    -ms-transform: scale(1.1);
+    -o-transform: scale(1.1);
+    transform: scale(1.1);
+  }
+  20% {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.dropzone-1,
+.dropzone-1 * {
+  box-sizing: border-box;
+}
+
+.dropzone-1 {
+  min-height: 150px;
+  border: 2px solid rgba(0, 0, 0, 0.3);
+  background: white;
+  padding: 20px 20px;
+}
+
+.dropzone-1.dz-clickable {
+  cursor: pointer;
+}
+
+.dropzone-1.dz-clickable * {
+  cursor: default;
+}
+
+.dropzone-1.dz-clickable .dz-message,
+.dropzone-1.dz-clickable .dz-message * {
+  cursor: pointer;
+}
+
+.dropzone-1.dz-started .dz-message {
+  display: none;
+}
+
+.dropzone-1.dz-drag-hover {
+  border-style: solid;
+}
+
+.dropzone-1.dz-drag-hover .dz-message {
+  opacity: 0.5;
+}
+
+.dropzone-1 .dz-message {
+  text-align: center;
+  margin: 2em auto;
+}
+
+.dropzone-1 .dz-message .dz-button {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
+
+.dropzone-1 .dz-preview {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  margin: 16px;
+  min-height: 100px;
+}
+
+.dropzone-1 .dz-preview:hover {
+  z-index: 1000;
+}
+
+.dropzone-1 .dz-preview:hover .dz-details {
+  opacity: 1;
+}
+
+.dropzone-1 .dz-preview.dz-file-preview .dz-image {
+  border-radius: 20px;
+  background: #999;
+  background: linear-gradient(to bottom, #eee, #ddd);
+}
+
+.dropzone-1 .dz-preview.dz-file-preview .dz-details {
+  opacity: 1;
+}
+
+.dropzone-1 .dz-preview.dz-image-preview {
+  background: white;
+}
+
+.dropzone-1 .dz-preview.dz-image-preview .dz-details {
+  -webkit-transition: opacity 0.2s linear;
+  -moz-transition: opacity 0.2s linear;
+  -ms-transition: opacity 0.2s linear;
+  -o-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
+}
+
+.dropzone-1 .dz-preview .dz-remove {
+  font-size: 14px;
+  text-align: center;
+  display: block;
+  cursor: pointer;
+  border: none;
+}
+
+.dropzone-1 .dz-preview .dz-remove:hover {
+  text-decoration: underline;
+}
+
+.dropzone-1 .dz-preview:hover .dz-details {
+  opacity: 1;
+}
+
+.dropzone-1 .dz-preview .dz-details {
+  z-index: 20;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  font-size: 13px;
+  min-width: 100%;
+  max-width: 100%;
+  padding: 2em 1em;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.9);
+  line-height: 150%;
+}
+
+.dropzone-1 .dz-preview .dz-details .dz-size {
+  margin-bottom: 1em;
+  font-size: 16px;
+}
+
+.dropzone-1 .dz-preview .dz-details .dz-filename {
+  white-space: nowrap;
+}
+
+.dropzone-1 .dz-preview .dz-details .dz-filename:hover span {
+  border: 1px solid rgba(200, 200, 200, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.dropzone-1 .dz-preview .dz-details .dz-filename:not(:hover) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dropzone-1 .dz-preview .dz-details .dz-filename:not(:hover) span {
+  border: 1px solid transparent;
+}
+
+.dropzone-1 .dz-preview .dz-details .dz-filename span,
+.dropzone-1 .dz-preview .dz-details .dz-size span {
+  background-color: rgba(255, 255, 255, 0.4);
+  padding: 0 0.4em;
+  border-radius: 3px;
+}
+
+.dropzone-1 .dz-preview:hover .dz-image img {
+  -webkit-transform: scale(1.05, 1.05);
+  -moz-transform: scale(1.05, 1.05);
+  -ms-transform: scale(1.05, 1.05);
+  -o-transform: scale(1.05, 1.05);
+  transform: scale(1.05, 1.05);
+  -webkit-filter: blur(8px);
+  filter: blur(8px);
+}
+
+.dropzone-1 .dz-preview .dz-image {
+  border-radius: 20px;
+  overflow: hidden;
+  width: 120px;
+  height: 120px;
+  position: relative;
+  display: block;
+  z-index: 10;
+}
+
+.dropzone-1 .dz-preview .dz-image img {
+  display: block;
+}
+
+.dropzone-1 .dz-preview.dz-success .dz-success-mark {
+  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.dropzone-1 .dz-preview.dz-error .dz-error-mark {
+  opacity: 1;
+  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.dropzone-1 .dz-preview .dz-success-mark,
+.dropzone-1 .dz-preview .dz-error-mark {
+  pointer-events: none;
+  opacity: 0;
+  z-index: 500;
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -27px;
+  margin-top: -27px;
+}
+
+.dropzone-1 .dz-preview .dz-success-mark svg,
+.dropzone-1 .dz-preview .dz-error-mark svg {
+  display: block;
+  width: 54px;
+  height: 54px;
+}
+
+.dropzone-1 .dz-preview.dz-processing .dz-progress {
+  opacity: 1;
+  -webkit-transition: all 0.2s linear;
+  -moz-transition: all 0.2s linear;
+  -ms-transition: all 0.2s linear;
+  -o-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+}
+
+.dropzone-1 .dz-preview.dz-complete .dz-progress {
+  opacity: 0;
+  -webkit-transition: opacity 0.4s ease-in;
+  -moz-transition: opacity 0.4s ease-in;
+  -ms-transition: opacity 0.4s ease-in;
+  -o-transition: opacity 0.4s ease-in;
+  transition: opacity 0.4s ease-in;
+}
+
+.dropzone-1 .dz-preview:not(.dz-processing) .dz-progress {
+  -webkit-animation: pulse 6s ease infinite;
+  -moz-animation: pulse 6s ease infinite;
+  -ms-animation: pulse 6s ease infinite;
+  -o-animation: pulse 6s ease infinite;
+  animation: pulse 6s ease infinite;
+}
+
+.dropzone-1 .dz-preview .dz-progress {
+  opacity: 1;
+  z-index: 1000;
+  pointer-events: none;
+  position: absolute;
+  height: 16px;
+  left: 50%;
+  top: 50%;
+  margin-top: -8px;
+  width: 80px;
+  margin-left: -40px;
+  background: rgba(255, 255, 255, 0.9);
+  -webkit-transform: scale(1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.dropzone-1 .dz-preview .dz-progress .dz-upload {
+  background: #333;
+  background: linear-gradient(to bottom, #666, #444);
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  -webkit-transition: width 300ms ease-in-out;
+  -moz-transition: width 300ms ease-in-out;
+  -ms-transition: width 300ms ease-in-out;
+  -o-transition: width 300ms ease-in-out;
+  transition: width 300ms ease-in-out;
+}
+
+.dropzone-1 .dz-preview.dz-error .dz-error-message {
+  display: block;
+}
+
+.dropzone-1 .dz-preview.dz-error:hover .dz-error-message {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.dropzone-1 .dz-preview .dz-error-message {
+  pointer-events: none;
+  z-index: 1000;
+  position: absolute;
+  display: block;
+  display: none;
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease;
+  -moz-transition: opacity 0.3s ease;
+  -ms-transition: opacity 0.3s ease;
+  -o-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+  border-radius: 8px;
+  font-size: 13px;
+  top: 130px;
+  left: -10px;
+  width: 140px;
+  background: #be2626;
+  background: linear-gradient(to bottom, #be2626, #a92222);
+  padding: 0.5em 1.2em;
+  color: white;
+}
+
+.dropzone-1 .dz-preview .dz-error-message:after {
+  content: "";
+  position: absolute;
+  top: -6px;
+  left: 64px;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #be2626;
+}
+
+// custom styles
+.dropzone-1 {
+  border-color: $primary !important;
+  border-style: dashed !important;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  background: rgba($primary, 0.1) !important;
+}
diff --git a/frontend-v2/src/stylesheets/components/_erc721_token_image_container.scss b/frontend-v2/src/stylesheets/components/_erc721_token_image_container.scss
new file mode 100644
index 0000000..e57c359
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_erc721_token_image_container.scss
@@ -0,0 +1,11 @@
+/* ERC721 media block */
+.erc721-media {
+  display: flex;
+  justify-content: center;
+  max-height: 200px;
+}
+
+.erc721-media img {
+  height: 150px;
+}
+/* ERC721 media block end */
diff --git a/frontend-v2/src/stylesheets/components/_errors.scss b/frontend-v2/src/stylesheets/components/_errors.scss
new file mode 100644
index 0000000..e7815fe
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_errors.scss
@@ -0,0 +1,137 @@
+$error-tablet-breakpoint: 768px;
+
+// Block Not Found
+
+.block-not-found {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 50px;
+  @media (min-width: $error-tablet-breakpoint) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding-top: 52px;
+  }
+}
+
+.block-not-found-img {
+  margin-bottom: 40px;
+  text-align: center;
+  @media (min-width: $error-tablet-breakpoint) {
+    margin-bottom: 0;
+    text-align: left;
+  }
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.block-not-found-content {
+  text-align: center;
+  @media (min-width: $error-tablet-breakpoint) {
+    text-align: left;
+    padding-left: 52px;
+    max-width: 396px;
+  }
+}
+
+.error-title {
+  margin-bottom: 20px !important;
+}
+
+.error-descr {
+  display: block;
+  font-size: 14px;
+  color: #a3a9b5;
+  line-height: 1.714;
+  margin-bottom: 22px;
+  word-wrap: break-word;
+}
+
+.error-btn {
+  background: transparent;
+  display: inline-flex !important;
+}
+
+// TX Not Found
+.tx-nf {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding-bottom: 50px;
+  @media (min-width: $error-tablet-breakpoint) {
+    flex-direction: row;
+    padding-top: 52px;
+  }
+}
+
+.tx-nf-content {
+  margin-top: 52px;
+  max-width: 700px;
+  @media (min-width: $error-tablet-breakpoint) {
+    margin-left: 90px;
+    margin-top: 0;
+  }
+}
+
+.tx-nf-blocks {
+  margin-bottom: 40px;
+  margin-top: 40px;
+}
+
+.tx-nf-block {
+  background-color: #fff;
+  box-shadow: 0px 0px 30px 0px rgba(202, 199, 226, 0.5);
+  padding: 17px 40px 17px 20px;
+  position: relative;
+  border-radius: 6px;
+  @media (min-width: $error-tablet-breakpoint) {
+    width: calc(50% - 20px);
+  }
+}
+
+.tx-nf-block {
+  .error-descr {
+    margin-bottom: 0;
+  }
+  & + .tx-nf-block {
+    margin-top: 30px;
+    @media (min-width: $error-tablet-breakpoint) {
+      margin-top: 0;
+    }
+  }
+}
+
+.tx-nf-blocks-row {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  @media (min-width: $error-tablet-breakpoint) {
+    flex-direction: row;
+  }
+  & + .tx-nf-blocks-row {
+    margin-top: 30px;
+    @media (min-width: $error-tablet-breakpoint) {
+      margin-top: 40px;
+    }
+  }
+}
+
+.tx-nf-number {
+  display: inline-block;
+  position: absolute;
+  top: -15px;
+  left: -15px;
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  background-color: $secondary;
+  box-shadow: 0px 3px 5px 0px rgba($secondary, 0.25);
+  color: #fff;
+  font-weight: 700;
+  font-size: 14px;
+  text-align: center;
+  line-height: 32px;
+}
diff --git a/frontend-v2/src/stylesheets/components/_external_link.scss b/frontend-v2/src/stylesheets/components/_external_link.scss
new file mode 100644
index 0000000..9a0a4a0
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_external_link.scss
@@ -0,0 +1,20 @@
+.external-link-icon {
+  float: right;
+  margin-top: -1px;
+
+  & {
+    &.active,
+    &:hover,
+    &:focus {
+      path {
+        fill: $header-icon-color-hover;
+      }
+    }
+  }
+}
+
+.external-token-icon {
+  path {
+    fill: $header-icon-color-hover;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_filter.scss b/frontend-v2/src/stylesheets/components/_filter.scss
new file mode 100644
index 0000000..0d99d48
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_filter.scss
@@ -0,0 +1,4 @@
+.filter {
+  min-width: 100%;
+  transform: translate3d(0, 34px, 0px) !important;
+}
diff --git a/frontend-v2/src/stylesheets/components/_fontawesome_icon.scss b/frontend-v2/src/stylesheets/components/_fontawesome_icon.scss
new file mode 100644
index 0000000..2276a6e
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_fontawesome_icon.scss
@@ -0,0 +1,58 @@
+@import "./route_prefix";
+$url-base: $route-prefix + "/images/icons/fontawesome/";
+
+.fontawesome-icon {
+  background-color: $footer-text-color;
+
+  &.github {
+    -webkit-mask: url($url-base + "github.svg") no-repeat center;
+    mask: url($url-base + "github.svg") no-repeat center;
+    height: 22px;
+    width: 22px;
+    mask-size: 22px !important;
+    -webkit-mask-size: 22px !important;
+  }
+  &.twitter {
+    -webkit-mask: url($url-base + "twitter.svg") no-repeat center;
+    mask: url($url-base + "twitter.svg") no-repeat center;
+    height: 22px;
+    width: 22px;
+    mask-size: 22px !important;
+    -webkit-mask-size: 22px !important;
+  }
+  &.telegram {
+    -webkit-mask: url($url-base + "telegram.svg") no-repeat center;
+    mask: url($url-base + "telegram.svg") no-repeat center;
+    height: 22px;
+    width: 22px;
+    mask-size: 22px !important;
+    -webkit-mask-size: 22px !important;
+  }
+  &.bar-chart {
+    -webkit-mask: url($url-base + "bar-chart.svg") no-repeat center;
+    mask: url($url-base + "bar-chart.svg") no-repeat center;
+    height: 22px;
+    width: 22px;
+    mask-size: 22px !important;
+    -webkit-mask-size: 22px !important;
+  }
+  &.info-circle {
+    -webkit-mask: url($url-base + "info-circle.svg") no-repeat center;
+    mask: url($url-base + "info-circle.svg") no-repeat center;
+    height: 12px;
+    width: 12px;
+    mask-size: 12px !important;
+    -webkit-mask-size: 12px !important;
+  }
+  &.tag {
+    -webkit-mask: url($url-base + "tag.svg") no-repeat center;
+    mask: url($url-base + "tag.svg") no-repeat center;
+    height: 12px;
+    width: 12px;
+    mask-size: 12px !important;
+    -webkit-mask-size: 12px !important;
+    display: inline-block;
+    background-color: #212121;
+    margin-bottom: -2px;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_footer.scss b/frontend-v2/src/stylesheets/components/_footer.scss
new file mode 100644
index 0000000..c9250bb
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_footer.scss
@@ -0,0 +1,121 @@
+$footer-background-color: $secondary !default;
+$footer-title-color: #fff !default;
+$footer-text-color: rgba(#fff, 0.7) !default;
+$footer-link-color: $footer-text-color !default;
+$footer-item-disc-color: $primary !default;
+$footer-social-icon-color: $footer-text-color !default;
+$footer-logo-height: 28px !default;
+$footer-logo-width: auto !default;
+
+.footer {
+  background: $footer-background-color;
+  color: $footer-text-color;
+  font-size: 12px;
+  line-height: 1.67;
+  margin: 0;
+  padding: 40px 0;
+  position: relative;
+
+  @media (max-width: $breakpoint-md) {
+    width: 100%;
+  }
+}
+
+.footer-logo-row {
+  margin-bottom: 30px;
+}
+
+.footer-logo {
+  max-height: $footer-logo-height;
+  width: $footer-logo-width;
+}
+
+.footer-info-text {
+  margin: 0 0 25px;
+  padding: 0 20px 0 0;
+}
+
+.footer-social-icons {
+  align-items: center;
+  display: flex;
+  margin: 0 0 25px;
+}
+
+.footer-social-icon {
+  color: $footer-social-icon-color;
+  font-size: 22px;
+  margin-right: 15px;
+  text-decoration: none;
+  transition: $transition-cont;
+
+  &:hover {
+    color: #fff;
+  }
+
+  &:focus {
+    color: darken($footer-text-color, 5);
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.footer-link {
+  color: $footer-link-color;
+
+  &:hover {
+    color: $footer-link-color;
+    text-decoration: underline;
+  }
+}
+
+.footer-list {
+  padding-top: 0;
+
+  h3 {
+    color: $footer-title-color;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 1.4;
+    margin: 0 0 15px;
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0 0 25px;
+    padding: 0;
+
+    li {
+      align-items: center;
+      display: flex;
+      line-height: 2.5;
+      padding: 0;
+
+      a {
+        transition: $transition-cont;
+        &:hover {
+          text-decoration: none;
+          color: #fff;
+        }
+        &:focus {
+          color: darken($footer-text-color, 5);
+        }
+      }
+
+      &::before {
+        background-color: $footer-item-disc-color;
+        border-radius: 50%;
+        content: "";
+        display: block;
+        height: 6px;
+        margin: 0 10px 0 0;
+        width: 6px;
+      }
+    }
+  }
+}
+
+.footer-brand {
+  text-decoration: none !important;
+}
diff --git a/frontend-v2/src/stylesheets/components/_form.scss b/frontend-v2/src/stylesheets/components/_form.scss
new file mode 100644
index 0000000..9bfdee9
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_form.scss
@@ -0,0 +1,152 @@
+$form-control-border-color: #e2e5ec !default;
+$form-control-border-color-active: $primary !default;
+
+.form-control {
+  border-color: $form-control-border-color;
+  border-radius: 0;
+  font-size: 14px;
+
+  &.border-rounded {
+    border-radius: 4px;
+  }
+
+  &:focus {
+    border-color: $form-control-border-color-active;
+    box-shadow: none;
+  }
+
+  &.n-b-r {
+    border-right: none;
+  }
+}
+
+.form-p {
+  color: #a3a9b5;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.8;
+
+  .i-tooltip {
+    display: inline;
+    margin-left: 3px;
+  }
+
+  .link-dotted {
+    border-bottom-width: 1px;
+    border-bottom-style: dotted;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .text-dark {
+    color: #333;
+  }
+
+  &.m-b-0 {
+    margin-bottom: 0;
+  }
+
+  &.m-b-0-7 {
+    margin-bottom: 0.7rem;
+  }
+}
+
+.input-group-prepend.last {
+  .input-group-text {
+    background: none;
+    border-color: $form-control-border-color;
+    border-left: none;
+    color: #a3a9b5;
+    font-size: 14px;
+    transition: $input-transition;
+  }
+}
+
+.form-control:focus ~ .input-group-prepend.last {
+  .input-group-text {
+    border-color: $form-control-border-color-active;
+  }
+}
+
+.input-group.input-status-error {
+  input {
+    border-color: #ff7884 !important;
+    border-radius: 2px 2px 0 0;
+  }
+
+  .input-group-prepend {
+    margin-right: 0;
+  }
+
+  .input-group-prepend.last {
+    .input-group-text {
+      border-color: #ff7884;
+      border-radius: 0 2px 0 0;
+    }
+  }
+
+  .input-group-message {
+    width: 100%;
+    padding: 10px;
+    color: white;
+    background: #ff7884;
+    border-radius: 0 0 2px 2px;
+
+    .link-helptip {
+      border-bottom-width: 1px;
+      border-bottom-style: dotted;
+      color: inherit;
+      cursor: help;
+      text-decoration: none;
+    }
+  }
+}
+
+.form-buttons {
+  [class*="btn-"] {
+    margin-bottom: 20px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.tokens-list-search-input-outer-container {
+  display: flex;
+  @include media-breakpoint-down(md) {
+    display: block;
+  }
+}
+
+.tokens-list-search-input-container {
+  float: right;
+  margin-left: auto;
+  position: relative;
+  @include media-breakpoint-down(md) {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+}
+
+.tokens-list-search-input-container.tokens:before {
+  bottom: 5px;
+}
+
+.search-input {
+  background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2017%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2217%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%237DD79F%22%20fill-rule%3D%22evenodd%22%20d%3D%22M15.713%2015.727a.982.982%200%200%201-1.388%200l-2.289-2.29C10.773%2014.403%209.213%2015%207.5%2015A7.5%207.5%200%201%201%2015%207.5c0%201.719-.602%203.284-1.575%204.55l2.288%202.288a.983.983%200%200%201%200%201.389zM7.5%202a5.5%205.5%200%201%200%200%2011%205.5%205.5%200%201%200%200-11z%22%2F%3E%0A%3C%2Fsvg%3E")
+    no-repeat 20px 20px;
+  background-position: left;
+  background-position-x: 10px;
+  padding-left: 35px;
+}
+
+.tokens-list-search-input {
+  height: 40px;
+  width: 300px;
+  @include media-breakpoint-down(md) {
+    width: 100%;
+  }
+  padding: 10px 10px 10px 35px;
+  outline: none;
+}
diff --git a/frontend-v2/src/stylesheets/components/_highlight.scss b/frontend-v2/src/stylesheets/components/_highlight.scss
new file mode 100644
index 0000000..26caa3f
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_highlight.scss
@@ -0,0 +1,17 @@
+//replace the default background color from highlightjs
+.hljs {
+  background: $gray-100;
+}
+
+.line-numbers {
+  [data-line-number] {
+    &:before {
+      content: attr(data-line-number);
+      display: inline-block;
+      border-right: 1px solid $gray-400;
+      padding: 0 0.5em;
+      margin-right: 0.5em;
+      color: $gray-600;
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_i_tooltip.scss b/frontend-v2/src/stylesheets/components/_i_tooltip.scss
new file mode 100644
index 0000000..285c422
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_i_tooltip.scss
@@ -0,0 +1,27 @@
+$i-tooltip-background: #a3a9b5 !default;
+$i-tooltip-info: #fff !default;
+$i-tooltip-background-active: $primary !default;
+
+.i-tooltip {
+  display: block;
+  height: 16px;
+  width: 16px;
+
+  .i-tooltip-circle {
+    fill: $i-tooltip-background;
+  }
+
+  .i-tooltip-info {
+    fill: $i-tooltip-info;
+  }
+
+  &:hover {
+    .i-tooltip-circle {
+      fill: $i-tooltip-background-active;
+    }
+  }
+
+  &.ds-inline {
+    display: inline;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_i_tooltip_2.scss b/frontend-v2/src/stylesheets/components/_i_tooltip_2.scss
new file mode 100644
index 0000000..c22d7a8
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_i_tooltip_2.scss
@@ -0,0 +1,50 @@
+.i-tooltip-2 {
+  color: $i-tooltip-background;
+
+  &:hover {
+    color: $i-tooltip-background-active;
+  }
+}
+
+.color-inherit {
+  color: inherit;
+}
+
+// make it work with non jQuery based tooltip
+
+.i-tooltip-2 {
+  position: relative;
+  color: $i-tooltip-background;
+}
+
+.i-tooltip-2:hover::after {
+  position: absolute;
+  top: -5px;
+  left: 50%;
+  display: inline-block;
+  min-width: 120px;
+  padding: 5px;
+  margin: 0 auto;
+  color: #fff;
+  text-align: center;
+  content: attr(title);
+  background: #000;
+  border-radius: 3px;
+  transform: translate(-50%, -100%);
+}
+
+.i-tooltip-2:hover::before {
+  position: absolute;
+  top: -5px;
+  left: 50%;
+  width: 0;
+  height: 0;
+  margin-left: -5px;
+  pointer-events: none;
+  content: " ";
+  border: solid transparent;
+  border-color: rgba(0, 0, 0, 0);
+  border-width: 5px;
+  border-top-color: #000;
+  transform: translate(0, 0);
+}
diff --git a/frontend-v2/src/stylesheets/components/_icon-link.scss b/frontend-v2/src/stylesheets/components/_icon-link.scss
new file mode 100644
index 0000000..2666b0d
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_icon-link.scss
@@ -0,0 +1,36 @@
+.icon-links {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.icon-link {
+  align-items: center;
+  background-color: $gray-200;
+  border-radius: 50%;
+  border: none;
+  color: $text-muted;
+  cursor: pointer;
+  display: inline-flex;
+  height: 2rem;
+  justify-content: center;
+  margin: 0 0.25rem;
+  transition: all 0.1s ease;
+  width: 2rem;
+
+  &:hover {
+    background-color: darken($primary, 20%);
+    color: $white;
+    text-decoration: none;
+  }
+
+  &.icon-link-primary {
+    color: $footer-text-color;
+    background-color: rgba($white, 0.25);
+
+    &:hover {
+      background-color: $white;
+      color: $primary;
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_inventory_token_instance_image_container.scss b/frontend-v2/src/stylesheets/components/_inventory_token_instance_image_container.scss
new file mode 100644
index 0000000..d489cc9
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_inventory_token_instance_image_container.scss
@@ -0,0 +1,11 @@
+/* ERC721 media block */
+.inventory-erc721-media {
+  display: flex;
+  justify-content: center;
+  max-height: 50px;
+}
+
+.inventory-erc721-media img {
+  height: 50px;
+}
+/* ERC721 media block end */
diff --git a/frontend-v2/src/stylesheets/components/_label.scss b/frontend-v2/src/stylesheets/components/_label.scss
new file mode 100644
index 0000000..d9acd6f
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_label.scss
@@ -0,0 +1,98 @@
+.bs-label {
+  display: inline-block;
+  padding: 0 5px;
+  background: #f5f6fa;
+  color: #77838f;
+  border-radius: 5px;
+  &.large {
+    font-size: 14px;
+  }
+  font-size: 12px;
+  padding: 5px;
+  line-height: normal;
+
+  &.right {
+    margin-left: auto;
+    float: right;
+  }
+  &.omni {
+    background: #6ca1e2;
+    color: #fff;
+  }
+  &.destination-eth {
+    background: #253358;
+    color: #fff;
+  }
+  &.destination-bsc {
+    background: #e7b941;
+    color: #fff;
+  }
+  &.destination-rinkeby {
+    background: #153550;
+    color: #fff;
+  }
+  &.bridged {
+    background: #70aee3;
+    color: #fff;
+  }
+  &.validator {
+    background: $primary;
+    color: #fff;
+  }
+  &.secondary {
+    background: $secondary;
+    color: #fff;
+  }
+  &.method {
+    color: #1e2022;
+  }
+  &.from-dropdown {
+    margin-top: -3px;
+  }
+  &.success {
+    background: rgba(40, 167, 69, 0.2);
+    color: rgb(40, 167, 69);
+  }
+}
+
+.confirmations-label {
+  position: relative;
+  padding-left: 1.15rem;
+  border-top-right-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-right: 10px;
+}
+
+.confirmations-label:after {
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: "";
+  border-top: 0.9rem solid transparent;
+  border-bottom: 0.9rem solid transparent;
+  border-left: 0.9rem solid #fff;
+}
+
+.index-label {
+  position: relative;
+  padding-right: 0.3rem;
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  background: #f5f6fa;
+  color: #77838f;
+  padding: 0.2rem 0.5rem;
+}
+
+.index-label:after {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  content: "";
+  border-top: 0.8rem solid transparent;
+  border-bottom: 0.8rem solid transparent;
+  border-left: 0.8rem solid rgba(245, 246, 250, 1);
+}
diff --git a/frontend-v2/src/stylesheets/components/_loading-spinner.scss b/frontend-v2/src/stylesheets/components/_loading-spinner.scss
new file mode 100644
index 0000000..b335ac7
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_loading-spinner.scss
@@ -0,0 +1,87 @@
+// ATTRIBUTION
+//
+// Author: Tobias Ahlin (tobiasahlin)
+//
+// SpinKit - Simple loading spinners animated with CSS.
+// https://github.com/tobiasahlin/SpinKit
+
+.loading-spinner {
+  margin: auto 1rem;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.loading-spinner-block-1,
+.loading-spinner-block-2 {
+  background-color: currentColor;
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: $border-radius;
+
+  animation: loading-spinner 1.8s infinite ease-in-out;
+}
+
+.loading-spinner-block-2 {
+  animation-delay: -0.9s;
+}
+
+@keyframes loading-spinner {
+  25% {
+    transform: translateX(22px) rotate(-90deg) scale(0.5);
+  }
+  50% {
+    transform: translateX(22px) translateY(22px) rotate(-179deg);
+  }
+  50.1% {
+    transform: translateX(22px) translateY(22px) rotate(-180deg);
+  }
+  75% {
+    transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+
+.loading-spinner-small {
+  display: inline-block;
+  position: relative;
+  top: -0.125em;
+  margin: auto 0.5em auto 0;
+  width: 1em;
+  height: 1em;
+
+  .loading-spinner-block-1,
+  .loading-spinner-block-2 {
+    width: 0.5em;
+    height: 0.5em;
+
+    animation: loading-spinner-small 1.8s infinite ease-in-out;
+  }
+
+  .loading-spinner-block-2 {
+    animation-delay: -0.9s;
+  }
+}
+
+@keyframes loading-spinner-small {
+  25% {
+    transform: translateX(10px) rotate(-90deg) scale(0.5);
+  }
+  50% {
+    transform: translateX(10px) translateY(10px) rotate(-179deg);
+  }
+  50.1% {
+    transform: translateX(10px) translateY(10px) rotate(-180deg);
+  }
+  75% {
+    transform: translateX(0px) translateY(10px) rotate(-270deg) scale(0.5);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_log-search.scss b/frontend-v2/src/stylesheets/components/_log-search.scss
new file mode 100644
index 0000000..9a74979
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_log-search.scss
@@ -0,0 +1,72 @@
+.logs-topbar {
+  padding-bottom: 30px;
+  @media (min-width: 600px) {
+    display: flex;
+    justify-content: space-between;
+  }
+  .pagination-container.position-top {
+    padding-top: 0 !important;
+  }
+}
+
+.logs-search {
+  display: flex;
+  position: relative;
+  flex: 2;
+  @media (max-width: 599px) {
+    margin-bottom: 30px;
+    width: 100%;
+  }
+}
+
+.logs-search-input,
+.logs-search-btn,
+.logs-search-btn-cancel {
+  height: 24px;
+  background-color: #f5f6fa;
+  border: 1px solid #f5f6fa;
+  color: #333;
+  border-radius: 2px;
+  outline: none;
+  font-family: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 12px;
+  font-weight: 600;
+  -webkit-appearance: none;
+}
+
+.logs-search-input {
+  padding-left: 6px;
+  display: inline-flex;
+  flex-grow: 2;
+  min-width: 160px;
+  font-weight: 300 !important;
+  &::placeholder {
+    color: #a3a9b5;
+    font-weight: 300 !important;
+  }
+}
+
+.logs-search-btn {
+  margin-left: 6px;
+  color: #a3a9b5;
+  transition: 0.1s ease-in;
+  cursor: pointer;
+  &:hover {
+    background-color: $primary;
+    color: #fff;
+    border-color: $primary;
+  }
+}
+
+.logs-search-btn-cancel {
+  color: #a3a9b5;
+  cursor: pointer;
+  transition: 0.1s ease-in;
+  position: absolute;
+  top: 0;
+  right: 56px;
+  &:hover {
+    color: #333;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_me_tooltip.scss b/frontend-v2/src/stylesheets/components/_me_tooltip.scss
new file mode 100644
index 0000000..1b5f4e6
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_me_tooltip.scss
@@ -0,0 +1,25 @@
+$me-tooltip-background: #f5f6fa !default;
+$me-tooltip-background-active: $primary !default;
+$me-tooltip-text: #a3a9b5 !default;
+$me-tooltip-text-active: #fff !default;
+
+.me-tooltip {
+  display: block;
+  height: 16px;
+  width: 24px;
+  border-radius: 8px;
+  background-color: $me-tooltip-background;
+  color: $me-tooltip-text;
+  cursor: pointer;
+  font-size: 10px;
+  line-height: 16px;
+  font-weight: bold;
+  text-align: center;
+  position: relative;
+  top: 2px;
+
+  &:hover {
+    background-color: $me-tooltip-background-active;
+    color: $me-tooltip-text-active;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_modal.scss b/frontend-v2/src/stylesheets/components/_modal.scss
new file mode 100644
index 0000000..2ca7572
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_modal.scss
@@ -0,0 +1,110 @@
+.modal-backdrop {
+  background-color: $modal-overlay-color;
+
+  &.show {
+    opacity: 1;
+  }
+}
+
+.modal-header {
+  border-bottom: none;
+  padding: #{$modal-vertical-padding} #{$modal-horizontal-padding};
+}
+
+.modal-header-group {
+  display: inline-flex;
+  margin: 0 auto;
+}
+
+.close.close-modal {
+  left: auto;
+  opacity: 1;
+  position: absolute;
+  right: -35px;
+  top: -35px;
+  outline: none !important;
+
+  path {
+    fill: #f6f7f9;
+  }
+}
+
+.close {
+  outline: none !important;
+}
+
+.modal-body {
+  padding: 0 #{$modal-horizontal-padding} #{$modal-vertical-padding};
+}
+
+.modal-title {
+  color: #333;
+  font-size: 18px;
+  font-weight: normal;
+  text-align: left;
+  white-space: normal;
+  word-break: break-word;
+
+  .centered {
+    margin: 0 auto;
+  }
+}
+
+.modal-content {
+  border-radius: $modal-border-radius;
+  position: relative;
+  .btn-primary {
+    box-shadow: none !important;
+    background-color: $btn-line-color;
+    border: 1px solid $btn-line-color;
+    &:hover {
+      background-color: $btn-line-color;
+      border-color: $btn-line-color;
+    }
+    &:focus,
+    &:active {
+      background-color: darken($btn-line-color, 10%) !important;
+      border-color: darken($btn-line-color, 10%) !important;
+    }
+  }
+}
+
+.modal-fullwidth-xs {
+  @include media-breakpoint-down(xs) {
+    padding-right: 0 !important;
+
+    .modal-dialog {
+      max-width: initial;
+      min-width: initial;
+      margin: 0.5rem 0;
+    }
+
+    .modal-content {
+      border-radius: 0;
+
+      > div {
+        border-radius: 0;
+      }
+    }
+
+    .close.close-modal {
+      right: 10px;
+      top: 5px;
+
+      path {
+        fill: #a3a9b5;
+      }
+    }
+
+    .modal-bottom-disclaimer {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
+@media (min-width: 576px) {
+  .modal-dialog {
+    max-width: 530px !important;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_modal_status.scss b/frontend-v2/src/stylesheets/components/_modal_status.scss
new file mode 100644
index 0000000..a3c4b46
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_modal_status.scss
@@ -0,0 +1,103 @@
+$modal-status-graph-error: #ff0d51 !default;
+$modal-status-graph-warning: #ff8502 !default;
+$modal-status-graph-success: $primary !default;
+$modal-status-graph-question: #329ae9 !default;
+
+.modal-status {
+  max-width: 100%;
+  width: 300px;
+
+  @include media-breakpoint-down(sm) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.modal-status-graph {
+  align-items: center;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  display: flex;
+  height: 135px;
+  justify-content: center;
+
+  &-error {
+    background-color: $modal-status-graph-error;
+  }
+
+  &-warning {
+    background-color: $modal-status-graph-warning;
+  }
+
+  &-success {
+    background-color: $modal-status-graph-success;
+  }
+
+  &-question {
+    background-color: $modal-status-graph-question;
+  }
+
+  svg {
+    margin-top: 15px;
+  }
+}
+
+.modal-status-body {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: #{$modal-vertical-padding} #{$modal-horizontal-padding};
+}
+
+.modal-status-title {
+  color: #333;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin: 0 0 15px;
+  text-align: center;
+}
+
+.modal-status-text {
+  color: #a3a9b5;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.5;
+  margin: 0 0 25px;
+  text-align: center;
+
+  &.m-b-0 {
+    margin-bottom: 0;
+  }
+
+  .link-helptip {
+    border-bottom-width: 1px;
+    border-bottom-style: dotted;
+    color: inherit;
+    cursor: help;
+    text-decoration: none;
+  }
+}
+
+.modal-status-button-wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  .btn-line {
+    flex-grow: 1;
+    margin-right: 20px;
+    border-color: $primary;
+    color: $primary;
+
+    &:hover {
+      background-color: $primary;
+      color: $additional-font;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_modal_variables.scss b/frontend-v2/src/stylesheets/components/_modal_variables.scss
new file mode 100644
index 0000000..ab5ada5
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_modal_variables.scss
@@ -0,0 +1,5 @@
+$modal-overlay-color: rgba($primary, 0.9) !default;
+$modal-horizontal-padding: 30px !default;
+$modal-vertical-padding: 25px !default;
+$modal-border-radius: 10px !default;
+$modal-gray-background: #f6f7f9 !default;
diff --git a/frontend-v2/src/stylesheets/components/_nav_tabs.scss b/frontend-v2/src/stylesheets/components/_nav_tabs.scss
new file mode 100644
index 0000000..af0071a
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_nav_tabs.scss
@@ -0,0 +1,39 @@
+.nav-tabs {
+  .nav-link {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    color: $text-muted;
+    font-size: 14px;
+    padding: 1.25rem 2.5rem;
+
+    &:hover {
+      color: $primary;
+    }
+
+    &.active {
+      background-color: $primary;
+      border-color: $primary;
+      color: $white;
+    }
+
+    &:hover {
+      border-color: transparent;
+    }
+  }
+}
+
+.nav-tabs .nav-item.show .nav-link {
+  background-color: darken($primary, 10%);
+  border-color: darken($primary, 10%);
+  color: $white;
+}
+
+.api-doc-tab {
+  padding-bottom: 5px;
+  color: $primary !important;
+  background-color: transparent !important;
+}
+
+.api-doc-tab.active {
+  border-bottom: 1px solid $primary;
+}
diff --git a/frontend-v2/src/stylesheets/components/_navbar.scss b/frontend-v2/src/stylesheets/components/_navbar.scss
new file mode 100644
index 0000000..1834559
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_navbar.scss
@@ -0,0 +1,302 @@
+// Default variables
+$header-background-color: #fff !default;
+$header-links-color: #828ba0 !default;
+$header-links-color-active: #333 !default;
+$header-icon-color: $header-links-color !default;
+$header-icon-color-hover: $secondary !default;
+$header-icon-border-color-hover: $secondary !default;
+$header-toggler-icon: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($primary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E" !default;
+$header-textfield-text-color: $header-links-color !default;
+$header-textfield-background-color: #f5f6fa !default;
+$header-textfield-magnifier-color: $header-links-color !default;
+$header-link-horizontal-padding: 0.71rem;
+$navbar-logo-height: 28px !default;
+$navbar-logo-width: auto !default;
+
+.navbar.navbar-primary {
+  background-color: $header-background-color;
+  position: relative;
+  z-index: 100;
+
+  .nav-item {
+    font-size: 14px;
+  }
+
+  .navbar-nav {
+    .nav-link {
+      outline: none;
+      align-items: center;
+      color: $header-links-color;
+      display: flex;
+      font-size: 14px;
+      position: relative;
+      transition: $transition-cont;
+
+      &:before {
+        background-color: $header-icon-border-color-hover;
+        border-radius: 0 0 4px 4px;
+        content: "";
+        display: block;
+        height: 0.25rem;
+        left: 50%;
+        opacity: 0;
+        position: absolute;
+        top: -10px;
+        transform: translateX(-50%);
+        transition: $transition-cont;
+        width: calc(
+          100% - #{$header-link-horizontal-padding} - #{$header-link-horizontal-padding}
+        );
+      }
+
+      &.active,
+      &:hover {
+        @include media-breakpoint-up(lg) {
+          &:before {
+            opacity: 1;
+          }
+        }
+      }
+
+      &.active,
+      &:hover,
+      &.active-icon {
+        color: $header-links-color-active;
+        .nav-link-icon {
+          path {
+            fill: $header-icon-color-hover;
+          }
+        }
+      }
+
+      .nav-link-icon {
+        align-items: center;
+        display: flex;
+        margin-right: 0.71em;
+        position: relative;
+        top: -1px;
+
+        path {
+          fill: $header-icon-color;
+          transition: $transition-cont;
+        }
+      }
+    }
+
+    .nav-item-networks {
+      margin-left: auto;
+      .nav-link:before {
+        display: none;
+      }
+    }
+  }
+
+  .navbar-toggler {
+    outline: none;
+    color: $primary;
+    padding-right: 0px;
+
+    .navbar-toggler-icon {
+      background-image: url($header-toggler-icon);
+    }
+  }
+  .search-form {
+    display: flex;
+
+    @include media-breakpoint-up(xl) {
+      height: 57px;
+      margin-bottom: -8px;
+      margin-top: -8px;
+    }
+  }
+
+  .form-inline {
+    height: 100%;
+  }
+
+  .input-group {
+    height: 100%;
+    position: relative;
+  }
+
+  .form-control {
+    background: $header-textfield-background-color;
+    border-color: $header-textfield-background-color;
+    color: $header-textfield-text-color;
+    font-size: 14px;
+    height: 100%;
+    padding-left: 38px;
+    padding-right: 8px;
+    position: relative;
+    width: 100%;
+    z-index: 1;
+
+    &[placeholder] {
+      text-overflow: ellipsis !important;
+    }
+    &::-webkit-input-placeholder {
+      /* Chrome/Opera/Safari */
+      text-overflow: ellipsis !important;
+    }
+    &::-moz-placeholder {
+      /* Firefox 19+ */
+      text-overflow: ellipsis !important;
+    }
+    &:-ms-input-placeholder {
+      /* IE 10+ */
+      text-overflow: ellipsis !important;
+    }
+    &:-moz-placeholder {
+      /* Firefox 18- */
+      text-overflow: ellipsis !important;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    @include media-breakpoint-up(xl) {
+      width: 290px;
+    }
+    @media (min-width: 1366px) {
+      width: 380px;
+    }
+    @media (min-width: 1540px) {
+      width: 550px;
+    }
+  }
+  .input-group-append {
+    height: 38px;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 38px;
+    z-index: 5;
+
+    &.left {
+      left: 0px;
+    }
+
+    &.right {
+      right: 8px;
+      width: 25px;
+      height: 25px;
+    }
+
+    &.desktop-only {
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+
+    * {
+      fill: $header-textfield-magnifier-color;
+    }
+  }
+  .input-group-text {
+    align-items: center;
+    background: none;
+    border-color: transparent;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    padding: 0;
+    width: 100%;
+
+    &.border {
+      border-color: $secondary !important;
+      border-radius: 5px;
+      color: $secondary;
+      background-color: $header-textfield-background-color;
+    }
+  }
+}
+
+.navbar-collapse.collapsing,
+.navbar-collapse.collapse.show {
+  display: flex;
+  flex-direction: column;
+
+  .search-form {
+    align-items: center;
+    order: -1;
+    width: 100%;
+
+    form {
+      flex-grow: 1;
+    }
+  }
+  .input-group {
+    width: 100%;
+  }
+  .navbar-nav {
+    white-space: nowrap;
+  }
+}
+
+.navbar-brand {
+  margin-left: 0;
+  flex-shrink: 1;
+  display: inline-flex;
+  .navbar-logo {
+    max-width: 100%;
+  }
+}
+
+.navbar-logo {
+  height: $navbar-logo-height;
+  width: $navbar-logo-width;
+}
+
+.logo-text {
+  color: #333;
+  font-size: 1rem;
+  font-weight: 700;
+  margin-left: 5px;
+  line-height: 28px;
+
+  &.in-footer {
+    color: #fff;
+  }
+
+  &.no-logo {
+    margin-left: 0px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-left: $header-link-horizontal-padding;
+    padding-right: $header-link-horizontal-padding;
+  }
+}
+
+.add-border {
+  border: 1px solid transparentize($white, 0.3);
+}
+
+.navbar-collapse {
+  justify-content: flex-end;
+  align-items: flex-start;
+  flex-shrink: 0;
+  @media (min-width: 992px) {
+    align-items: center;
+  }
+}
+
+.navbar-container,
+.navbar-primary {
+  @media (min-width: 992px) {
+    padding-right: 0;
+  }
+}
+
+.nav-item-networks {
+  .topnav-nav-link {
+    transition: none !important;
+  }
+}
+
+.visually-hidden {
+  display: block;
+}
diff --git a/frontend-v2/src/stylesheets/components/_network-selector.scss b/frontend-v2/src/stylesheets/components/_network-selector.scss
new file mode 100644
index 0000000..097a717
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_network-selector.scss
@@ -0,0 +1,375 @@
+$network-selector-overlay-background: $modal-overlay-color !default;
+$network-selector-close-color: $primary !default;
+$network-selector-horizontal-padding: 28px;
+$network-selector-horizontal-mobile-padding: 14px;
+$btn-network-selector-load-more-background: #fff !default;
+$btn-network-selector-load-more-color: $primary !default;
+$network-selector-search-input-color: #a3a9b5 !default;
+$network-selector-tab-active-border-color: $primary !default;
+$network-selector-item-icon-dimensions: 30px !default;
+
+.network-selector-visible {
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.network-selector-overlay {
+  background-color: rgba($network-selector-overlay-background, 0.9);
+  bottom: 0;
+  display: none;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 123;
+}
+
+.network-selector-overlay-close {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.network-selector-wrapper {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.network-selector {
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+  margin-left: auto;
+  max-width: 398px;
+  min-width: 0;
+  padding-top: 28px;
+  position: relative;
+  transition: right 0.25s ease-out;
+  z-index: 2;
+}
+
+.network-selector-close {
+  flex-shrink: 0;
+  padding: 0 $network-selector-horizontal-padding;
+  margin: 0 0 8px;
+
+  svg {
+    cursor: pointer;
+    display: block;
+    margin-left: auto;
+  }
+
+  path {
+    fill: $network-selector-close-color;
+  }
+}
+
+.network-selector-text-container {
+  flex-shrink: 0;
+  margin: 0 0 15px;
+  padding: 0 $network-selector-horizontal-padding;
+}
+
+.network-selector-title {
+  color: #333;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.network-selector-text {
+  color: #a3a9b5;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.67;
+  margin: 0;
+  padding: 0;
+}
+
+.network-selector-search-container {
+  align-items: center;
+  background-color: #f5f6fa;
+  display: flex;
+  flex-shrink: 0;
+  height: 62px;
+  margin: 0;
+  padding: 0 $network-selector-horizontal-padding;
+
+  path {
+    flex-grow: 0;
+    flex-shrink: 0;
+    fill: $network-selector-search-input-color;
+  }
+}
+
+.network-selector-search-input {
+  background-color: transparent;
+  border-color: transparent;
+  color: #333;
+  flex-grow: 1;
+  font-size: 14px;
+  font-weight: 600;
+  height: 100%;
+  outline: none;
+  padding: 0 20px 0 10px;
+
+  &[placeholder] {
+    color: $network-selector-search-input-color !important;
+  }
+  &::-webkit-input-placeholder {
+    /* Chrome/Opera/Safari */
+    color: $network-selector-search-input-color !important;
+  }
+  &::-moz-placeholder {
+    /* Firefox 19+ */
+    color: $network-selector-search-input-color !important;
+  }
+  &:-ms-input-placeholder {
+    /* IE 10+ */
+    color: $network-selector-search-input-color !important;
+  }
+  &:-moz-placeholder {
+    /* Firefox 18- */
+    color: $network-selector-search-input-color !important;
+  }
+}
+
+.network-selector-tabs-container {
+  border-bottom: 1px solid $base-border-color;
+  display: flex;
+  flex-shrink: 0;
+  margin: 0 $network-selector-horizontal-mobile-padding;
+  @media (min-width: 375px) {
+    margin: 0 $network-selector-horizontal-padding;
+  }
+}
+
+.network-selector-tab {
+  color: #a3a9b5;
+  cursor: pointer;
+  flex-shrink: 1;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.2;
+  min-width: 0;
+  padding: 20px 18px 15px;
+  position: relative;
+  text-align: center;
+  user-select: none;
+  white-space: nowrap;
+
+  &:hover {
+    color: #333;
+  }
+
+  &.active {
+    color: #333;
+    cursor: default;
+
+    &::after {
+      background-color: $network-selector-tab-active-border-color;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      bottom: 0;
+      content: "";
+      height: 4px;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+
+.network-selector-tab-content {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+
+.network-selector-item {
+  border-bottom: 1px solid $base-border-color;
+  display: flex;
+  position: relative;
+
+  .radio {
+    cursor: pointer;
+    margin: 0 15px 0 0;
+
+    input[type="radio"] {
+      cursor: pointer;
+    }
+  }
+
+  .radio-icon {
+    margin: 0;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.network-selector-item-url {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-grow: 1;
+  margin: 0;
+  padding: 20px 0;
+
+  &:hover {
+    .network-selector-item-type {
+      color: #333;
+    }
+  }
+}
+
+.network-selector-item-icon {
+  background-color: #dfdfdf;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-radius: 50%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: $network-selector-item-icon-dimensions;
+  margin: 0 15px 0 0;
+  width: $network-selector-item-icon-dimensions;
+
+  &-callisto-mainnet {
+    background-image: url(/images/network-selector-icons/callisto-mainnet.svg);
+  }
+  &-ethereum-mainnet {
+    background-image: url(/images/network-selector-icons/ethereum-mainnet.svg);
+  }
+  &-ethereum-classic {
+    background-image: url(/images/network-selector-icons/ethereum-classic.svg);
+  }
+  &-goerli-testnet {
+    background-image: url(/images/network-selector-icons/goerli-testnet.svg);
+  }
+  &-kovan-testnet {
+    background-image: url(/images/network-selector-icons/kovan-testnet.svg);
+  }
+  &-poa-core {
+    background-image: url(/images/network-selector-icons/poa-core.svg);
+  }
+  &-poa-sokol {
+    background-image: url(/images/network-selector-icons/poa-sokol.svg);
+  }
+  &-rinkeby-testnet {
+    background-image: url(/images/network-selector-icons/rinkeby-testnet.svg);
+  }
+  &-rsk-mainnet {
+    background-image: url(/images/network-selector-icons/rsk-mainnet.svg);
+  }
+  &-ropsten-testnet {
+    background-image: url(/images/network-selector-icons/ropsten-testnet.svg);
+  }
+  &-xdai-chain {
+    background-image: url(/images/network-selector-icons/xdai-chain.svg);
+  }
+  &-lukso-l14-testnet {
+    background-image: url(/images/network-selector-icons/lukso-l14-testnet.svg);
+  }
+  &-xusdt-chain {
+    background-image: url(/images/network-selector-icons/circle-xusdt.svg);
+  }
+}
+
+.network-selector-item-title {
+  color: #333;
+  flex-grow: 1;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.2;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.network-selector-item-type {
+  color: #a3a9b5;
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.2;
+  padding-left: 10px;
+  text-align: right;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.network-selector-item-content {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+}
+
+.network-selector-networks-container {
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-height: 100px;
+  overflow: auto;
+  padding: 0 $network-selector-horizontal-mobile-padding;
+  @media (min-width: 375px) {
+    padding: 0 $network-selector-horizontal-padding;
+  }
+}
+
+.network-selector-item-favorite {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin: 0;
+  max-width: 36px;
+  padding-left: 20px;
+  position: relative;
+
+  input[type="checkbox"] {
+    cursor: pointer;
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 5;
+
+    &:checked + svg {
+      position: relative;
+      z-index: 1;
+
+      path {
+        fill: #ffb20d;
+      }
+    }
+  }
+
+  &:hover {
+    path {
+      fill: rgba(#ffb20d, 0.4);
+    }
+  }
+}
+
+.network-selector-tab-content-empty {
+  font-size: 16px;
+  font-weight: 600;
+  padding: 40px;
+  text-align: center;
+}
diff --git a/frontend-v2/src/stylesheets/components/_new_smart_contract.scss b/frontend-v2/src/stylesheets/components/_new_smart_contract.scss
new file mode 100644
index 0000000..f18901c
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_new_smart_contract.scss
@@ -0,0 +1,213 @@
+$new-smart-contract-container-tooltips-background-color: #fbfafc !default;
+$new-smart-contract-tooltips-width: 300px;
+$smart-contract-form-group-tooltip-color: #adb5bd !default;
+$new-smart-contract-center-column-margin-right: 30px;
+
+.new-smart-contract-container {
+  background-color: #fff;
+  background-image: linear-gradient(
+    to bottom right,
+    #{$new-smart-contract-container-tooltips-background-color} 100%,
+    #{$new-smart-contract-container-tooltips-background-color} 100%
+  );
+  background-position: 100% 0;
+  background-repeat: repeat-y;
+  background-size: #{$new-smart-contract-tooltips-width} 1px;
+  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
+  margin-bottom: 3rem;
+  padding: 50px 0 50px 22px;
+
+  @include media-breakpoint-down(md) {
+    background-image: none;
+    padding-right: 22px;
+  }
+}
+
+.smart-contract-title {
+  color: #333;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin: 0 0 70px 0;
+  padding: 0;
+  text-align: left;
+
+  @include media-breakpoint-down(md) {
+    margin-bottom: 30px;
+  }
+
+  &.margin-bottom-md {
+    margin-bottom: 50px;
+
+    @include media-breakpoint-down(md) {
+      margin-bottom: 15px;
+    }
+  }
+}
+
+.smart-contract-form-group {
+  margin-bottom: 30px;
+
+  @include media-breakpoint-down(md) {
+    margin-bottom: 20px;
+  }
+}
+
+.form-radios-group {
+  display: flex;
+  justify-content: flex-start;
+
+  &.vertical {
+    display: block;
+  }
+
+  .radio-big {
+    margin-right: 20px;
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.smart-contract-form-group-inner-wrapper {
+  display: flex;
+  justify-content: space-between;
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+  }
+
+  > label {
+    color: #333;
+    flex-grow: 0;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.7;
+    margin: 0;
+    padding-right: 15px;
+    text-align: left;
+    width: 200px;
+
+    @include media-breakpoint-down(md) {
+      margin-bottom: 10px;
+      padding-right: 0;
+      width: auto;
+    }
+  }
+
+  .center-column {
+    flex-grow: 1;
+    margin-right: $new-smart-contract-center-column-margin-right;
+
+    @include media-breakpoint-down(md) {
+      margin: 0;
+    }
+  }
+
+  textarea.form-control {
+    min-height: 98px;
+  }
+
+  .form-error {
+    display: block;
+    font-size: 13px;
+    line-height: 1.2;
+    padding-top: 10px;
+  }
+
+  .smart-contract-form-group-tooltip {
+    color: $smart-contract-form-group-tooltip-color;
+    flex-grow: 0;
+    flex-shrink: 0;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.5;
+    padding: 0 30px;
+    text-align: left;
+    width: #{$new-smart-contract-tooltips-width};
+
+    @include media-breakpoint-down(md) {
+      padding: 10px 0 0 0;
+      width: auto;
+    }
+
+    &:empty {
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+
+    a {
+      color: $smart-contract-form-group-tooltip-color;
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.tooltip-quote {
+  background: rgba(0, 0, 0, 0.08);
+  border-radius: 2px;
+  padding: 0 5px;
+}
+
+.add-contract-libraries-wrapper {
+  border-bottom: 1px solid $base-border-color;
+  margin-right: $new-smart-contract-center-column-margin-right +
+    $new-smart-contract-tooltips-width;
+  padding-bottom: 30px;
+
+  @include media-breakpoint-down(md) {
+    margin-right: 0;
+  }
+}
+
+.smart-contract-form-buttons {
+  align-items: center;
+  border-top: 1px solid $base-border-color;
+  display: flex;
+  margin-right: $new-smart-contract-center-column-margin-right +
+    $new-smart-contract-tooltips-width;
+  margin-top: -1px;
+  padding-top: 30px;
+  position: relative;
+
+  @include media-breakpoint-down(md) {
+    margin-right: 0;
+  }
+
+  [class*="btn-"] {
+    position: relative;
+    z-index: 1;
+  }
+
+  .position-absolute {
+    &,
+    &:hover {
+      opacity: 1;
+      z-index: 12;
+    }
+  }
+  .w-118 {
+    width: 117.828px;
+  }
+}
+
+.smart-contract-libraries-wrapper {
+  display: none;
+  padding-bottom: 30px;
+  padding-top: 30px;
+}
+
+.contract-library-form-group {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_nounderline-link.scss b/frontend-v2/src/stylesheets/components/_nounderline-link.scss
new file mode 100644
index 0000000..8f66e99
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_nounderline-link.scss
@@ -0,0 +1,3 @@
+a.nounderline {
+  text-decoration: none;
+}
diff --git a/frontend-v2/src/stylesheets/components/_pagination_container.scss b/frontend-v2/src/stylesheets/components/_pagination_container.scss
new file mode 100644
index 0000000..9f453c8
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_pagination_container.scss
@@ -0,0 +1,214 @@
+$pagination-page-link-background: #f5f6fa !default;
+$pagination-page-link-color: #a3a9b5 !default;
+$pagination-page-link-background-active: $primary !default;
+$pagination-page-link-color-active: #fff !default;
+
+@mixin pagination-container-base($background-color, $text-color) {
+  background-color: $background-color;
+  border: 1px solid $background-color;
+  color: $text-color;
+
+  path {
+    fill: $text-color;
+  }
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: space-between;
+
+  &[disabled] {
+    display: none;
+  }
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+  }
+
+  &.position-bottom {
+    padding-top: 30px;
+  }
+
+  &.position-top {
+    padding-bottom: 30px;
+  }
+
+  .pagination-limit {
+    align-items: center;
+    color: #033333;
+    display: flex;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.2;
+
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 15px;
+    }
+
+    select {
+      margin: 0 10px;
+    }
+  }
+
+  .pagination {
+    margin: 0 0 0 auto;
+    padding: 0;
+
+    @include media-breakpoint-down(sm) {
+      justify-content: space-between;
+      margin: 0;
+    }
+
+    .page-item {
+      margin: 0 5px 0 0;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.active .page-link {
+        @include pagination-container-base(
+          $pagination-page-link-background-active,
+          $pagination-page-link-color-active
+        );
+        cursor: default;
+        pointer-events: none;
+
+        &:hover {
+          @include pagination-container-base(
+            $pagination-page-link-background-active,
+            $pagination-page-link-color-active
+          );
+        }
+      }
+    }
+
+    .page-link {
+      @include pagination-container-base(
+        $pagination-page-link-background,
+        $pagination-page-link-color
+      );
+      align-items: center;
+      border-radius: 2px;
+      display: flex;
+      font-size: 12px;
+      font-weight: 600;
+      height: 24px;
+      margin: 0;
+      padding: 0 8px;
+      position: relative;
+      user-select: none;
+      text-align: center;
+      white-space: nowrap;
+      cursor: pointer;
+
+      &:not(.no-hover):hover {
+        @include pagination-container-base(
+          $pagination-page-link-background-active,
+          $pagination-page-link-color-active
+        );
+      }
+
+      &[href=""] {
+        pointer-events: none;
+      }
+
+      &.no-hover {
+        cursor: default;
+      }
+
+      &[disabled] {
+        @include pagination-container-base(
+          $pagination-page-link-background,
+          $pagination-page-link-color
+        );
+        cursor: not-allowed;
+        opacity: 0.4;
+        outline: none;
+        pointer-events: none;
+      }
+    }
+
+    .page-link-light-hover {
+      &:not(.no-hover):hover {
+        @include pagination-container-base(
+          $pagination-page-link-background-active,
+          $pagination-page-link-color-active
+        );
+        background-color: rgba($pagination-page-link-background-active, 0.5);
+        border-color: rgba($pagination-page-link-background-active, 0.5);
+      }
+    }
+  }
+}
+
+.tb {
+  background-color: #00000000 !important;
+  border: none !important;
+}
+
+.ml10 {
+  margin-left: 10px;
+}
+
+.mlm17 {
+  @include media-breakpoint-down(sm) {
+    margin-left: -17px;
+  }
+}
+
+.mrm18 {
+  @include media-breakpoint-down(sm) {
+    margin-right: -18px;
+  }
+}
+
+.go-to {
+  @include media-breakpoint-down(sm) {
+    margin-top: 10px !important;
+    justify-content: end !important;
+  }
+}
+
+.limit {
+  color: $pagination-page-link-color;
+  font-size: 12px;
+  font-weight: 600;
+  height: 24px;
+  margin-top: -25px;
+  text-align: right;
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
+}
+
+.align-end {
+  align-self: end;
+}
+
+.page-number {
+  background-color: $pagination-page-link-background;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 2px;
+  border-color: $pagination-page-link-color;
+  color: $pagination-page-link-color;
+}
+
+.page-number:focus {
+  border: 1px solid $pagination-page-link-color;
+}
+
+.fml5 {
+  margin-left: 5px !important;
+}
+
+.top-pagination-outer-container {
+  display: flex;
+}
+
+.logs-topbar .pagination-container {
+  @media (min-width: 600px) {
+    margin-left: 80px;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_panels.scss b/frontend-v2/src/stylesheets/components/_panels.scss
new file mode 100644
index 0000000..3d1a76b
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_panels.scss
@@ -0,0 +1,14 @@
+.panels {
+  &__container {
+    padding: 20px;
+  }
+}
+
+.pagination {
+  text-align: right;
+  margin: 10px;
+}
+
+.monospace {
+  font-family: $font-family-monospace;
+}
diff --git a/frontend-v2/src/stylesheets/components/_qr-code.scss b/frontend-v2/src/stylesheets/components/_qr-code.scss
new file mode 100644
index 0000000..5ef2394
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_qr-code.scss
@@ -0,0 +1,6 @@
+.qr-code {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  width: 100%;
+}
diff --git a/frontend-v2/src/stylesheets/components/_radio.scss b/frontend-v2/src/stylesheets/components/_radio.scss
new file mode 100644
index 0000000..ebcc2ac
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_radio.scss
@@ -0,0 +1,49 @@
+$radio-color: $primary !default;
+$radio-dimensions: 20px !default;
+
+.radio {
+  align-items: center;
+  display: flex;
+  position: relative;
+
+  input[type="radio"] {
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 5;
+
+    &:checked + .radio-icon::before {
+      background-color: $radio-color;
+      border-radius: 50%;
+      content: "";
+      height: 12px;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      width: 12px;
+    }
+  }
+
+  .radio-icon {
+    border: 1px solid $base-border-color;
+    border-radius: 50%;
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: $radio-dimensions;
+    margin: 0 10px 0 0;
+    position: relative;
+    width: $radio-dimensions;
+    z-index: 1;
+  }
+
+  .radio-text {
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.2;
+    position: relative;
+    white-space: nowrap;
+    z-index: 1;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_radio_big.scss b/frontend-v2/src/stylesheets/components/_radio_big.scss
new file mode 100644
index 0000000..4460003
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_radio_big.scss
@@ -0,0 +1,55 @@
+$radio-big-color: $primary !default;
+$radio-big-dimensions: 30px !default;
+
+.radio-big {
+  align-items: center;
+  display: flex;
+  position: relative;
+
+  input[type="radio"] {
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 5;
+
+    &:checked + .radio-icon::before {
+      background-color: $radio-big-color;
+      border-radius: 50%;
+      content: "";
+      height: 12px;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      width: 12px;
+    }
+
+    &:checked + .radio-icon {
+      border-color: $radio-big-color;
+    }
+  }
+
+  .radio-icon {
+    border: 1px solid $base-border-color;
+    border-radius: 50%;
+    flex-grow: 0;
+    flex-shrink: 0;
+    height: $radio-big-dimensions;
+    margin: 0 10px 0 0;
+    position: relative;
+    width: $radio-big-dimensions;
+    z-index: 1;
+  }
+
+  .radio-text {
+    color: #333;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.2;
+    margin: 0;
+    position: relative;
+    white-space: nowrap;
+    z-index: 1;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_search.scss b/frontend-v2/src/stylesheets/components/_search.scss
new file mode 100644
index 0000000..dd98bbf
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_search.scss
@@ -0,0 +1,76 @@
+.mobile-search-show {
+  @media screen and (max-width: 992px) {
+    width: 100%;
+  }
+  @media screen and (min-width: 992px) {
+    display: none !important;
+  }
+}
+
+.mobile-search-hide {
+  @media screen and (max-width: 992px) {
+    display: none !important;
+  }
+}
+
+.search-control {
+  @media screen and (min-width: 992px) {
+    height: 57px !important;
+  }
+  @media screen and (max-width: 992px) {
+    height: 33px !important;
+  }
+  &.focused-field {
+    border: 1px solid $secondary !important;
+  }
+  &.danger-field {
+    border: 1px solid $danger !important;
+  }
+}
+
+.autoComplete_wrapper {
+  width: 100% !important;
+}
+
+.main-search-autocomplete {
+  width: 100% !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  background-color: #f5f6fa !important;
+  @media screen and (max-width: 992px) {
+    height: auto !important;
+  }
+}
+
+.main-search-autocomplete,
+.main-search-autocomplete-mobile {
+  font-size: 14px !important;
+  color: #828ba0 !important;
+}
+
+.autocomplete-category {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: 100;
+  text-transform: uppercase;
+  color: rgb(33, 33, 33);
+  margin-left: auto;
+}
+
+.autoComplete_highlight {
+  background-color: #feff54 !important;
+  color: #212121 !important;
+}
+
+ul[id^="autoComplete_list_"] {
+  margin-left: -39px !important;
+  border-radius: 0px !important;
+  padding: 5px !important;
+}
+
+li[id^="autoComplete_result_"] {
+  font-size: 12px !important;
+  border-radius: 0 !important;
+}
diff --git a/frontend-v2/src/stylesheets/components/_stakes_table.scss b/frontend-v2/src/stylesheets/components/_stakes_table.scss
new file mode 100644
index 0000000..77edd57
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_stakes_table.scss
@@ -0,0 +1,222 @@
+$stakes-table-th-background: #f5f6fa !default;
+$stakes-table-cell-separation: 25px !default;
+$stakes-link-color: $primary !default;
+
+.stakes-table-container {
+  max-width: 100%;
+  overflow-x: auto;
+  width: 100%;
+}
+
+.addresses-table-container {
+  margin-left: -30px;
+  margin-right: -30px;
+  .stakes-table-container {
+    table {
+      width: 100%;
+      th:first-child {
+        padding-left: 25px;
+      }
+      td:first-child {
+        padding-left: 25px;
+      }
+    }
+  }
+  .color-lighten {
+    color: #828ba0;
+  }
+}
+
+// Loader
+.table-content-loader {
+  display: inline-block;
+  height: 24px;
+  width: 100%;
+  border-radius: 4px;
+  background-color: #f5f6fa;
+  overflow: hidden;
+  position: relative;
+  &:before {
+    width: inherit;
+    height: inherit;
+    content: "";
+    position: absolute;
+    background: linear-gradient(to right, #f5f6fa 2%, #eee 18%, #f5f6fa 33%);
+    animation-duration: 1.7s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-name: placeholderAnimate;
+    background-size: 1300px;
+  }
+}
+
+@keyframes placeholderAnimate {
+  0% {
+    background-position: -650px 0;
+  }
+  100% {
+    background-position: 650px 0;
+  }
+}
+
+.table-content-pseudo {
+  td {
+    &:last-child {
+      padding-right: 24px !important;
+    }
+  }
+}
+
+.stakes-table {
+  min-width: fit-content;
+  width: 100%;
+}
+
+.stakes-table-head {
+  display: flex;
+  width: 100%;
+  min-width: 930px;
+  padding: 0 15px;
+  background-color: $stakes-table-th-background;
+  color: #a3a9b5;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.2;
+  text-align: left;
+}
+
+.stakes-table-body {
+  padding: 0 15px;
+  min-width: 930px;
+  min-height: 311px;
+
+  .refresh-informer {
+    text-align: right;
+    padding-top: 15px;
+    padding-right: 15px;
+    display: none;
+
+    a {
+      color: $primary;
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.stakes-table-th {
+  background-color: $stakes-table-th-background;
+  color: #a3a9b5;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.2;
+  text-align: left;
+
+  &:first-child {
+    min-width: 15px;
+  }
+}
+
+.stakes-table-th-content {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  padding: 21px $stakes-table-cell-separation 21px 0;
+  position: relative;
+  z-index: 0;
+
+  .i-tooltip {
+    position: relative;
+    top: -2px;
+  }
+}
+
+.stakes-th-text {
+  margin-right: 10px;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.stakes-td {
+  border-bottom: 1px solid #f5f6fa;
+  font-size: 14px;
+  font-weight: normal;
+  height: 60px;
+  line-height: 1.5;
+  padding-right: $stakes-table-cell-separation;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  .stakes-tr-banned & {
+    background-color: $stakes-banned-background;
+    color: $stakes-banned-color;
+  }
+
+  .stakes-td-banned-info {
+    display: block;
+    float: left;
+    padding-right: 30px;
+  }
+}
+
+.stakes-cell {
+  display: flex;
+  align-items: center;
+}
+
+.stakes-td-order {
+  min-width: 50px;
+  padding-left: 30px;
+  text-align: left;
+}
+
+.stakes-td-link-style {
+  color: $stakes-link-color;
+  cursor: pointer;
+
+  .stakes-tr-banned & {
+    color: $stakes-banned-color;
+  }
+}
+
+.stakes-tr-banned td:last-child {
+  text-align: right;
+  padding-right: 30px;
+}
+
+.stakes-table {
+  .check-tooltip {
+    &:hover {
+      .check-tooltip-circle {
+        fill: $secondary;
+      }
+    }
+  }
+  .stakes-tr-banned {
+    .check-tooltip {
+      .check-tooltip-circle {
+        fill: rgba($stakes-banned-color, 0.15);
+      }
+      .check-tooltip-check {
+        fill: $stakes-banned-color;
+      }
+      &:hover {
+        .check-tooltip-circle {
+          fill: $stakes-banned-color;
+        }
+        .check-tooltip-check {
+          fill: #fff;
+        }
+      }
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_stakes_variables.scss b/frontend-v2/src/stylesheets/components/_stakes_variables.scss
new file mode 100644
index 0000000..53d5bdc
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_stakes_variables.scss
@@ -0,0 +1,2 @@
+$stakes-banned-background: #fff3f7 !default;
+$stakes-banned-color: #ff7986 !default;
diff --git a/frontend-v2/src/stylesheets/components/_table.scss b/frontend-v2/src/stylesheets/components/_table.scss
new file mode 100644
index 0000000..7026697
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_table.scss
@@ -0,0 +1,30 @@
+.table-font {
+  thead th,
+  td,
+  th {
+    border-top: none;
+    border-bottom: none;
+  }
+
+  i {
+    color: $gray-500;
+  }
+
+  img {
+    width: 12px;
+  }
+}
+
+.table-horizontal {
+  th {
+    width: 35%;
+  }
+}
+
+.address-cell {
+  width: 150px;
+}
+
+.token-icon {
+  padding-right: 5px;
+}
diff --git a/frontend-v2/src/stylesheets/components/_tile.scss b/frontend-v2/src/stylesheets/components/_tile.scss
new file mode 100644
index 0000000..5e4c34a
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_tile.scss
@@ -0,0 +1,608 @@
+$tile-type-block-color: $primary !default;
+$tile-type-uncle-color: $cyan !default;
+$tile-type-reorg-color: $purple !default;
+$tile-type-emission-reward-color: $lilac !default;
+$tile-type-transaction-color: $blue !default;
+$tile-type-contract-call-color: $green !default;
+$tile-type-contract-creation-color: $dark-purple !default;
+$tile-type-token-transfer-color: $orange !default;
+$tile-type-unique-token-color: $orange !default;
+$tile-type-unique-token-image-color: $orange !default;
+$tile-type-internal-transaction-color: $teal !default;
+$tile-type-api-documentation-color: $primary !default;
+$tile-type-progress-bar-color: $primary !default;
+$tile-status-error-reason: #ff7986 !default;
+$tile-status-awaiting-internal-transactions: $warning !default;
+$tile-padding: 1rem;
+$tile-title-color: #333 !default;
+$tile-body-a-color: #5959d8 !default;
+
+@mixin generate-tile-block($prefix, $color, $label-color: false) {
+  &#{ $prefix } {
+    border-left: 4px solid $color;
+
+    .tile-transaction-type-block {
+      a {
+        @if ($label-color) {
+          color: $label-color;
+        } @else {
+          color: $color;
+        }
+      }
+    }
+
+    .tile-label {
+      @if ($label-color) {
+        color: $label-color;
+      } @else {
+        color: $color;
+      }
+    }
+
+    .tile-status-label {
+      color: inherit;
+    }
+
+    .tile-transaction-type-block {
+      background-color: rgba($color, 0.1);
+      border-bottom: 1px solid $color;
+      border-right: 1px solid $color;
+      border-top: 1px solid $color;
+      color: $color;
+    }
+  }
+}
+
+/*********************************************************************/
+
+.tile-label {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0 0 2px;
+  text-align: center;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.font-weight-400 {
+    font-weight: 400;
+  }
+}
+
+.tile-transaction-type-block {
+  align-items: center;
+  bottom: -17px;
+  justify-content: center;
+  margin-left: -1px;
+  margin-top: -34px;
+  padding: 0 5px;
+  position: relative;
+
+  @include media-breakpoint-down(sm) {
+    align-items: flex-start;
+    background: none !important;
+    border: none !important;
+    bottom: auto;
+    flex-direction: column !important;
+    margin: 0 0 10px;
+    padding-left: 1rem;
+    top: auto;
+
+    .tile-status-label {
+      margin-left: 0 !important;
+    }
+  }
+}
+
+.tile-status-label {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.2;
+  text-align: center;
+  padding: 0 5px;
+}
+
+.tile-transaction-type-block {
+  .tile-status-label {
+    padding: 0;
+  }
+}
+
+.tile-bottom {
+  @media (max-width: 767px) {
+    justify-content: flex-start !important;
+  }
+}
+
+.tile-bottom-contents {
+  background-color: #f6f7f9;
+  font-size: 12px;
+  line-height: 1.2;
+  padding: 0.8rem 1rem;
+}
+
+.tile-transactions {
+  color: #a3a9b5;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.2;
+  margin-bottom: 10px;
+  text-align: left;
+}
+
+.tile-badge {
+  line-height: 1.25rem;
+  margin-bottom: 0.1rem;
+  padding: 0;
+  text-align: center;
+  width: 2.5rem;
+}
+
+.tile-muted {
+  background-color: $gray-100;
+  border-left: 1px solid $border-color;
+  box-shadow: none;
+}
+
+.tile-function-response {
+  span.function-response-item {
+    display: block;
+    margin-left: 1rem;
+
+    &:not(:last-of-type)::after {
+      content: ",";
+    }
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+.tile-image {
+  max-height: 140px;
+  max-width: 140px;
+}
+
+.tile {
+  span[data-address-hash] {
+    color: $tile-body-a-color;
+  }
+
+  a[data-test="token_link"] {
+    color: $tile-body-a-color;
+  }
+
+  .tile-body {
+    a {
+      color: $tile-body-a-color;
+      &:hover {
+        span {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  .tile-title {
+    color: $tile-title-color;
+    font-size: 12px;
+
+    &-hash {
+      font-weight: 300;
+    }
+
+    &-lg {
+      color: $body-color;
+      font-size: 16px;
+    }
+  }
+  border-radius: 4px;
+  border: 1px solid $border-color;
+  color: $text-muted;
+  flex-grow: 1;
+  font-size: 12px;
+  line-height: 1.4rem;
+  padding: $tile-padding;
+
+  @include generate-tile-block(
+    ".tile-type-block",
+    $tile-type-block-color,
+    darken($tile-type-block-color, 20%)
+  );
+  @include generate-tile-block(".tile-type-uncle", $tile-type-uncle-color);
+  @include generate-tile-block(".tile-type-reorg", $tile-type-reorg-color);
+  @include generate-tile-block(
+    ".tile-type-emission-reward",
+    $tile-type-emission-reward-color
+  );
+  @include generate-tile-block(
+    ".tile-type-transaction",
+    $tile-type-transaction-color
+  );
+  @include generate-tile-block(
+    ".tile-type-contract-call",
+    $tile-type-contract-call-color
+  );
+  @include generate-tile-block(
+    ".tile-type-contract-creation",
+    $tile-type-contract-creation-color
+  );
+  @include generate-tile-block(
+    ".tile-type-token-transfer",
+    $tile-type-token-transfer-color
+  );
+  @include generate-tile-block(
+    ".tile-type-unique-token",
+    $tile-type-unique-token-color
+  );
+  @include generate-tile-block(
+    ".tile-type-unique-token-image",
+    $tile-type-unique-token-image-color
+  );
+  @include generate-tile-block(
+    ".tile-type-internal-transaction",
+    $tile-type-internal-transaction-color
+  );
+  @include generate-tile-block(
+    ".tile-type-api-documentation",
+    $tile-type-api-documentation-color
+  );
+  @include generate-tile-block(
+    '[class*="status--error"]',
+    $tile-status-error-reason
+  );
+  @include generate-tile-block(
+    ".tile-status--awaiting-internal-transactions",
+    $tile-status-awaiting-internal-transactions
+  );
+
+  &.n-p {
+    padding: 0;
+  }
+
+  & + & {
+    margin-top: 1rem;
+  }
+
+  @include media-breakpoint-down(md) {
+    margin-bottom: 1rem;
+
+    [data-selector="place-holder"] & {
+      min-height: 105px;
+    }
+  }
+
+  &.tile-type-block {
+    max-width: 100%;
+    .tile-title {
+      font-weight: 700;
+      line-height: 1.2;
+      margin-bottom: 12px;
+      padding: 1rem 1rem 0 1rem;
+    }
+  }
+
+  &.tile-type-contract-creation {
+    .tile-text-highlight {
+      text-decoration: underline;
+      text-decoration-style: dashed;
+    }
+  }
+
+  &.tile-type-token {
+    border: 1px solid $border-color;
+  }
+
+  &.tile-type-token-transfer {
+    &-short-name {
+      max-width: 45%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      vertical-align: middle;
+    }
+  }
+
+  &.tile-type-unique-token-image {
+    padding: 0;
+
+    & .tile-content {
+      padding: 45px 0;
+    }
+  }
+
+  &.tile-type-api-documentation {
+    background-color: transparent;
+    cursor: pointer;
+    padding: 15px;
+    text-align: left;
+    width: 100%;
+  }
+
+  /* Progress bar */
+  .progress {
+    background-color: #f5f6fa;
+    border-radius: 2px;
+    height: 4px;
+    margin-top: 8px;
+    width: 120px;
+
+    .progress-bar {
+      background-color: $tile-type-progress-bar-color;
+      border-radius: 2px;
+    }
+  }
+}
+
+.card-chain-blocks {
+  .card-body {
+    .col-lg-3 {
+      @include media-breakpoint-down(lg) {
+        padding-left: 6px;
+        padding-right: 6px;
+      }
+    }
+    .tile-type-block {
+      overflow: hidden;
+    }
+    .row {
+      @include media-breakpoint-down(lg) {
+        margin-left: -6px;
+        margin-right: -6px;
+      }
+    }
+  }
+}
+
+// Loader
+.tile-type-loading {
+  background-color: #fff;
+  padding-top: 30px;
+  padding-bottom: 28px;
+}
+
+.tile-loader {
+  display: inline-block;
+  height: 20px;
+  width: 100%;
+  border-radius: 4px;
+  background-color: #f5f6fa;
+  overflow: hidden;
+  position: relative;
+  &:before {
+    width: inherit;
+    height: inherit;
+    content: "";
+    position: absolute;
+    background: linear-gradient(to right, #f5f6fa 2%, #eee 18%, #f5f6fa 33%);
+    animation-duration: 1.7s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-name: tilePlaceholderAnimate;
+    background-size: 1300px;
+  }
+}
+
+.tile-label-loader {
+  height: 14px;
+  width: 80px;
+}
+
+.tile-address-loader {
+  & + .tile-address-loader {
+    margin-top: 6px;
+  }
+}
+
+@keyframes tilePlaceholderAnimate {
+  0% {
+    background-position: -650px 0;
+  }
+  100% {
+    background-position: 650px 0;
+  }
+}
+
+// Loading Animation
+
+@keyframes playBlockLoadingAnimation {
+  0%,
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+[data-selector="chain-block-list"] {
+  .col-lg-3:first-child {
+    .tile-type-block-animation {
+      animation: playBlockLoadingAnimation 2.1s linear forwards;
+    }
+  }
+}
+
+.fade-up-blocks-chain {
+  .tile-type-block {
+    position: relative;
+  }
+  .tile-type-block-animation {
+    opacity: 0;
+    position: absolute;
+    top: -1px;
+    left: -4px;
+    width: calc(100% + 5px);
+    height: calc(100% + 2px);
+    background-color: #f6f7f9;
+    border-radius: 4px;
+    overflow: hidden;
+    transition: 0.24s ease-out;
+    border-top: 1px solid #dee2e6;
+    border-right: 1px solid #dee2e6;
+    border-bottom: 1px solid #dee2e6;
+    pointer-events: none;
+    .tile-type-line-up {
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      height: calc(100% + 2px);
+      width: 4px;
+      background-color: $tile-type-block-color;
+      transform: scaleY(0);
+      transform-origin: center bottom;
+      animation: blockLoaderLine 2s linear forwards;
+      z-index: 2;
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 1px;
+      background-color: #dee2e6;
+    }
+  }
+}
+
+.cube-animation-title {
+  font-size: 12px;
+  color: #a3a9b5;
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.fade-up-blocks-chain:first-child {
+  .tile-type-block-animation {
+    opacity: 1;
+  }
+}
+
+@keyframes blockLoaderLine {
+  0% {
+    transform: scaleY(0);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+
+$cube-bezier: cubic-bezier(0.25, 0.8, 0.25, 1);
+$cube-quantity: 5;
+
+.cube-animation-wrapper {
+  width: 560px;
+  height: 290px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.26);
+  svg {
+    width: 50px;
+    margin-top: -29px;
+
+    .side {
+      fill: $tile-type-block-color;
+      opacity: 1;
+
+      &:nth-of-type(2) {
+        fill: lighten($tile-type-block-color, 30);
+        opacity: 0.5;
+      }
+
+      &:nth-of-type(3) {
+        fill: lighten($tile-type-block-color, 80);
+        opacity: 0.5;
+      }
+    }
+  }
+
+  @while $cube-quantity > 0 {
+    .cube-animation-row:nth-of-type(#{$cube-quantity}) {
+      left: 25px * $cube-quantity;
+      top: 15px * $cube-quantity;
+    }
+    .cube-animation-column:nth-of-type(#{$cube-quantity}) {
+      position: relative;
+      top: 14px * $cube-quantity;
+      left: 25px * $cube-quantity;
+    }
+    .cube-animation-column:nth-of-type(#{$cube-quantity}) svg {
+      transform: translate3d(0, 0, 0);
+      animation: shrink-expand 2.8s $cube-bezier forwards;
+      animation-delay: -0.16s * $cube-quantity;
+    }
+
+    $cube-quantity: $cube-quantity - 1;
+  }
+}
+
+.cube-animation-center {
+  position: absolute;
+  top: 6%;
+  left: 20%;
+}
+
+.cube-animation-row {
+  display: flex;
+  flex-direction: row-reverse;
+  position: absolute;
+}
+
+.cube-animation-column {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+@keyframes shrink-expand {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+.dark-block-loader {
+  width: auto;
+  height: 15px;
+  background-color: #e2e5ec;
+  margin-bottom: 5px;
+  border-radius: 4px;
+}
+
+.dark-theme-applied .dark-block-loader {
+  background-color: #313355;
+}
+
+.title-with-label {
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: 3px;
+  @include media-breakpoint-down(sm) {
+    display: inline;
+  }
+}
+
+.view-original-token-container {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 12px;
+}
+
+.token-address-mobile {
+  @include media-breakpoint-down(sm) {
+    display: inline-block;
+    word-break: break-all;
+    line-height: 20px;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_token-balance-dropdown.scss b/frontend-v2/src/stylesheets/components/_token-balance-dropdown.scss
new file mode 100644
index 0000000..b1a5975
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_token-balance-dropdown.scss
@@ -0,0 +1,108 @@
+.token-balance-dropdown {
+  min-width: 10rem;
+  margin-top: 1rem;
+  background-color: #fff;
+
+  &.dropdown-menu {
+    border-radius: 4px !important;
+    box-shadow: 0 0.5rem 1rem rgba(202, 199, 226, 0.3) !important;
+    border: 1px solid #e2e5ec !important;
+  }
+
+  .dropdown-items {
+    overflow-y: auto;
+    max-height: 18.5rem;
+
+    .dropdown-item {
+      &:hover {
+        color: $secondary;
+      }
+      .row:nth-child(2) {
+        p {
+          font-size: 12px;
+          opacity: 0.65;
+        }
+      }
+    }
+  }
+
+  .dropdown-header {
+    padding: 1.1rem 20px 0.9rem 20px;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .dropdown-search-field {
+    height: 50px;
+    border: 1px solid #f5f6fa;
+    background-color: #f5f6fa;
+    outline: none !important;
+    font-size: 14px;
+    color: #828ba0;
+    font-weight: 300;
+    padding-left: 52px;
+    &::placeholder {
+      color: rgba(#828ba0, 0.5);
+    }
+  }
+
+  .dropdown-search-icon {
+    left: 20px;
+    top: 50%;
+    margin-top: -8.5px;
+    path {
+      fill: #828ba0;
+    }
+  }
+
+  &:after {
+    bottom: 100%;
+    right: 14%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+  }
+
+  &:before {
+    display: none;
+  }
+}
+
+.usd-total {
+  flex-grow: 1;
+  flex-basis: 10%;
+  padding-right: 0;
+  padding-left: 5px;
+}
+
+.usd-rate {
+  flex-grow: 1;
+  flex-basis: 10%;
+  padding-right: 0;
+}
+
+.el-1 {
+  flex-grow: 1;
+  flex-basis: 10%;
+}
+
+.wh-sp {
+  white-space: initial;
+}
+
+.token-wallet-icon {
+  margin-right: 5px;
+  margin-top: 0.5px !important;
+  flex-grow: 0;
+}
+
+.ml-5px {
+  margin-left: 5px;
+}
+
+.dropdown-row {
+  padding-left: 5px;
+  padding-right: 5px;
+}
diff --git a/frontend-v2/src/stylesheets/components/_token.scss b/frontend-v2/src/stylesheets/components/_token.scss
new file mode 100644
index 0000000..b55e271
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_token.scss
@@ -0,0 +1,10 @@
+.stakes-td {
+  &.token-total-supply {
+    max-width: 150px;
+    white-space: normal;
+  }
+  &.token-name {
+    max-width: 270px;
+    white-space: normal;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_token_tile_view_more.scss b/frontend-v2/src/stylesheets/components/_token_tile_view_more.scss
new file mode 100644
index 0000000..41cfc89
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_token_tile_view_more.scss
@@ -0,0 +1,47 @@
+.token-tile-view-more {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.2;
+  padding-top: 10px;
+  text-align: center;
+
+  a {
+    text-decoration: none;
+  }
+
+  &:before,
+  &:after {
+    border-bottom: 1px solid $border-color;
+    border-top: 1px solid $border-color;
+    content: "";
+    height: 4px;
+    flex-grow: 1;
+
+    @include media-breakpoint-down(md) {
+    }
+
+    @include media-breakpoint-down(sm) {
+    }
+  }
+
+  &:before {
+    margin-right: 10px;
+
+    @include media-breakpoint-down(md) {
+    }
+
+    @include media-breakpoint-down(sm) {
+    }
+  }
+
+  &:after {
+    margin-left: 10px;
+
+    @include media-breakpoint-down(md) {
+    }
+
+    @include media-breakpoint-down(sm) {
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_tooltip.scss b/frontend-v2/src/stylesheets/components/_tooltip.scss
new file mode 100644
index 0000000..99f5a4f
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_tooltip.scss
@@ -0,0 +1,33 @@
+$tooltip-background-color: $btn-line-color !default;
+$tooltip-color: #fff !default;
+
+.tooltip {
+  max-width: 250px;
+  min-width: 100px;
+
+  .tooltip-inner {
+    background-color: $tooltip-background-color;
+    border-radius: 5px;
+    color: $tooltip-color;
+    padding: 15px;
+    font-size: 12px;
+  }
+
+  .arrow::before {
+    border-top-color: $tooltip-background-color;
+    border-bottom-color: $tooltip-background-color;
+  }
+}
+
+.bs-tooltip-top {
+  top: -10px !important;
+}
+.bs-tooltip-bottom {
+  top: 10px !important;
+}
+.bs-tooltip-left {
+  left: -10px !important;
+}
+.bs-tooltip-right {
+  left: 10px !important;
+}
diff --git a/frontend-v2/src/stylesheets/components/_transaction-input.scss b/frontend-v2/src/stylesheets/components/_transaction-input.scss
new file mode 100644
index 0000000..9f10579
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_transaction-input.scss
@@ -0,0 +1,14 @@
+.transaction-input-text {
+  white-space: pre;
+  color: black;
+
+  pre {
+    code {
+      color: black;
+    }
+  }
+}
+
+.transaction-input-table {
+  overflow-x: scroll;
+}
diff --git a/frontend-v2/src/stylesheets/components/_transaction.scss b/frontend-v2/src/stylesheets/components/_transaction.scss
new file mode 100644
index 0000000..0998db8
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_transaction.scss
@@ -0,0 +1,70 @@
+.transaction-bottom-panel {
+  display: flex;
+  flex-direction: column;
+  @media (min-width: 768px) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+}
+
+.download-all-transactions {
+  text-align: center;
+  color: #a3a9b5;
+  font-size: 13px;
+  margin-top: 10px;
+  @media (min-width: 768px) {
+    margin-top: 30px;
+  }
+  .download-all-transactions-link {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    svg {
+      position: relative;
+      margin-left: 2px;
+      top: -3px;
+      left: 3px;
+      path {
+        fill: $primary;
+      }
+    }
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.block-detail-number {
+  width: 25%;
+  @include media-breakpoint-down(sm) {
+    width: 60%;
+  }
+}
+
+.text-nowrap-small-screen {
+  @include media-breakpoint-up(sm) {
+    white-space: nowrap !important;
+  }
+}
+
+.address-mobile {
+  @include media-breakpoint-down(sm) {
+    width: 80px;
+  }
+}
+
+.transfers-list-mobile-container {
+  @include media-breakpoint-down(sm) {
+    margin-top: 0.5rem;
+  }
+}
+
+.fs-14 {
+  font-size: 14px;
+}
+.transaction-gas-used {
+  @media (min-width: 1200px) {
+    white-space: nowrap;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/_verify_other_explorers.scss b/frontend-v2/src/stylesheets/components/_verify_other_explorers.scss
new file mode 100644
index 0000000..5c26cb2
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/_verify_other_explorers.scss
@@ -0,0 +1,217 @@
+.verify-other-explorers {
+  display: flex;
+  margin-top: 26px;
+  flex-direction: column;
+  flex-wrap: wrap;
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  @media (min-width: 1200px) {
+    flex-wrap: nowrap;
+  }
+  h2 {
+    color: #a3a9b5;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.25;
+    display: inline-flex;
+    margin-bottom: 12px;
+    width: 100%;
+    @media (min-width: 768px) {
+      margin-right: 10px;
+    }
+    @media (min-width: 1200px) {
+      margin-bottom: 0;
+      width: auto;
+    }
+  }
+}
+
+.verify-other-explorers-row {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 2;
+  @media (min-width: 768px) {
+    flex-direction: row;
+    position: relative;
+    padding-right: 44px;
+  }
+}
+
+.verify-other-explorers-elem {
+  display: inline-flex;
+  border: 1px solid #e2e5ec;
+  border-radius: 2px;
+  flex-grow: 2;
+  @media (min-width: 768px) {
+    margin-top: 0;
+    max-width: 188px;
+  }
+  @media (min-width: 1200px) {
+    min-width: 145px;
+  }
+  & + .verify-other-explorers-elem {
+    margin-top: 10px;
+    @media (min-width: 768px) {
+      margin-top: 0;
+      margin-left: 10px;
+    }
+  }
+
+  .exp-logo {
+    min-width: 34px;
+    border-right: 1px solid #e2e5ec;
+    background-repeat: no-repeat;
+    background-position: center;
+    &.etherscan {
+      @include image-2x("/images/icons/etherscan@2x.png", 15px, 16px);
+      background-image: url("/images/icons/etherscan.png");
+      background-size: 15px 16px;
+    }
+    &.blockchair {
+      @include image-2x("/images/icons/blockchair@2x.png", 10px, 16px);
+      background-image: url("/images/icons/blockchair.png");
+      background-size: 10px 16px;
+    }
+    &.etherchain {
+      @include image-2x("/images/icons/etherchain@2x.png", 16px, 16px);
+      background-image: url("/images/icons/etherchain.png");
+      background-size: 16px 16px;
+    }
+  }
+
+  .exp-content {
+    padding: 6px 9px 5px 9px;
+    h3,
+    div {
+      font-size: 10px;
+      line-height: 1;
+    }
+    h3 {
+      color: #333;
+      font-weight: 400;
+      margin-bottom: 0;
+      margin-bottom: 1px;
+    }
+    div {
+      color: #49a2ee;
+      display: block;
+      line-height: 1;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      width: 170px;
+      white-space: nowrap;
+      @media (min-width: 576px) {
+        width: 398px;
+      }
+      @media (min-width: 768px) {
+        width: 130px;
+      }
+      @media (min-width: 992px) {
+        width: 90px;
+      }
+      @media (min-width: 1200px) {
+        width: 93px;
+      }
+    }
+  }
+}
+
+.verify-other-explorers-more {
+  min-width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid $btn-line-color;
+  border-radius: 2px;
+  margin-top: 10px;
+  transition: 0.1s ease-in;
+  position: relative;
+  @media (min-width: 768px) {
+    margin-left: 10px;
+    margin-top: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  svg path {
+    fill: $btn-line-color;
+  }
+  &:hover {
+    background-color: $btn-line-color;
+    svg path {
+      fill: #fff;
+    }
+  }
+  span {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.verify-other-explorers-dialog {
+  max-width: 330px;
+}
+
+.verify-other-explorers-table {
+  display: table;
+}
+
+.verify-other-explorers-modal-row {
+  display: table-row;
+  height: 29px;
+  &:first-child {
+    .verify-other-explorers-cell.left {
+      .exp-logo {
+        @include image-2x("/images/icons/etherscan@2x.png", 15px, 16px);
+        background-image: url("/images/icons/etherscan.png");
+        background-repeat: no-repeat;
+        padding-left: 25px;
+        background-size: 15px 16px;
+      }
+    }
+  }
+  &:nth-child(2) {
+    .verify-other-explorers-cell.left {
+      .exp-logo {
+        @include image-2x("/images/icons/blockchair@2x.png", 10px, 16px);
+        background-image: url("/images/icons/blockchair.png");
+        background-repeat: no-repeat;
+        padding-left: 25px;
+        background-size: 10px 16px;
+        background-position: left 3px center;
+      }
+    }
+  }
+  &:nth-child(3) {
+    .verify-other-explorers-cell.left {
+      .exp-logo {
+        @include image-2x("/images/icons/etherchain@2x.png", 16px, 16px);
+        background-image: url("/images/icons/etherchain.png");
+        background-repeat: no-repeat;
+        padding-left: 25px;
+        background-size: 16px 16px;
+      }
+    }
+  }
+}
+
+.verify-other-explorers-cell {
+  display: table-cell;
+  &.left {
+    min-width: 120px;
+  }
+}
+
+.link {
+  background-image: url("/images/icons/link.svg");
+  background-repeat: no-repeat;
+  padding-left: 15px;
+  background-size: 12px 12px;
+}
diff --git a/frontend-v2/src/stylesheets/components/datepicker.scss b/frontend-v2/src/stylesheets/components/datepicker.scss
new file mode 100644
index 0000000..df7b09e
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/datepicker.scss
@@ -0,0 +1 @@
+@import "../../../../node_modules/pikaday/scss/pikaday";
diff --git a/frontend-v2/src/stylesheets/components/route_prefix.scss b/frontend-v2/src/stylesheets/components/route_prefix.scss
new file mode 100644
index 0000000..b7c88db
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/route_prefix.scss
@@ -0,0 +1,2 @@
+// DO NOT EDIT; use routePrefix in config/
+$route-prefix: "";
diff --git a/frontend-v2/src/stylesheets/components/stakes/_copy_icon.scss b/frontend-v2/src/stylesheets/components/stakes/_copy_icon.scss
new file mode 100644
index 0000000..73a882b
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_copy_icon.scss
@@ -0,0 +1,17 @@
+$copy-icon-color: $primary !default;
+
+.copy-icon {
+  cursor: pointer;
+  height: 18px;
+  width: 18px;
+
+  svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  path {
+    fill: $copy-icon-color;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_modal_become_candidate.scss b/frontend-v2/src/stylesheets/components/stakes/_modal_become_candidate.scss
new file mode 100644
index 0000000..283f9eb
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_modal_become_candidate.scss
@@ -0,0 +1,9 @@
+.modal-become-candidate {
+  max-width: 400px;
+  width: 100%;
+
+  @include media-breakpoint-down(sm) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_modal_bottom_disclaimer.scss b/frontend-v2/src/stylesheets/components/stakes/_modal_bottom_disclaimer.scss
new file mode 100644
index 0000000..c1e7e91
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_modal_bottom_disclaimer.scss
@@ -0,0 +1,33 @@
+.modal-bottom-disclaimer {
+  background-color: $modal-gray-background;
+  border-bottom-left-radius: $modal-border-radius;
+  border-bottom-right-radius: $modal-border-radius;
+  color: #a3a9b5;
+  display: flex;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.67;
+  padding: #{$modal-vertical-padding} #{$modal-horizontal-padding};
+  text-align: left;
+
+  &.b-b-r-0 {
+    border-bottom-right-radius: 0;
+  }
+
+  &.b-b-l-0 {
+    border-bottom-left-radius: 0;
+  }
+
+  .modal-bottom-disclaimer-graphic {
+    flex-shrink: 0;
+    padding-right: 15px;
+
+    svg {
+      fill: #333;
+    }
+  }
+
+  .modal-bottom-disclaimer-text {
+    flex-grow: 1;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_modal_claim_reward.scss b/frontend-v2/src/stylesheets/components/stakes/_modal_claim_reward.scss
new file mode 100644
index 0000000..1da212e
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_modal_claim_reward.scss
@@ -0,0 +1,36 @@
+.modal-claim-reward {
+  max-width: 400px;
+  width: 100%;
+
+  @include media-breakpoint-down(sm) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.modal-claim-reward {
+  label {
+    margin-bottom: 0;
+  }
+
+  p {
+    margin-bottom: 0.3rem;
+    width: 100%;
+
+    &.m-b-0 {
+      margin-bottom: 0;
+    }
+  }
+
+  textarea {
+    background: #fff !important;
+    height: 38px;
+  }
+
+  .amounts {
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr 80px;
+    grid-gap: 2vw;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_modal_delegators_info.scss b/frontend-v2/src/stylesheets/components/stakes/_modal_delegators_info.scss
new file mode 100644
index 0000000..0d6ab69
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_modal_delegators_info.scss
@@ -0,0 +1,9 @@
+.modal-delegators-info {
+  max-width: map-get($container-max-widths, "lg");
+  min-width: map-get($container-max-widths, "lg");
+  width: 100%;
+
+  .modal-body {
+    padding: 0 0 25px;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_modal_stake.scss b/frontend-v2/src/stylesheets/components/stakes/_modal_stake.scss
new file mode 100644
index 0000000..3e4a86b
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_modal_stake.scss
@@ -0,0 +1,140 @@
+.modal-stake {
+  max-width: 100%;
+  width: 560px;
+
+  @include media-breakpoint-down(sm) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @include media-breakpoint-down(xs) {
+    width: 100%;
+  }
+}
+
+.modal-stake-move {
+  max-width: 740px;
+  min-width: 740px;
+  width: 100%;
+
+  @include media-breakpoint-down(sm) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.modal-stake-three-cols {
+  display: grid;
+  grid-template-rows: [row1-start] auto [row2-start] auto [row3-start] auto [row3-end];
+  grid-template-columns: [col1-start] auto [col2-start] auto [col3-start] auto [col3-end];
+
+  > div {
+    grid-column: col2-start;
+  }
+
+  .modal-stake-left {
+    grid-column: col1-start;
+    grid-row: row1-start / row3-end;
+  }
+
+  .modal-stake-right {
+    grid-column: col3-start;
+    grid-row: row1-start / row3-end;
+  }
+
+  @include media-breakpoint-down(xs) {
+    grid-template-columns: [col1-start] auto [col1-end];
+    grid-template-rows: auto;
+
+    > div {
+      grid-column: col1-start;
+    }
+
+    .modal-stake-left {
+      width: 100%;
+      grid-column: col1-start;
+      grid-row: 3;
+    }
+
+    .modal-stake-right {
+      grid-column: col1-start;
+      grid-row: 4;
+    }
+
+    .stakes-progress {
+      width: auto;
+      padding-top: 15px;
+      padding-bottom: 15px;
+
+      .stakes-progress-graph {
+        float: left;
+        width: 130px;
+        margin-right: 15px;
+      }
+
+      .stakes-progress-info-title {
+        float: left;
+        margin-right: 15px;
+      }
+
+      .stakes-progress-info {
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+
+.modal-stake-two-cols {
+  display: grid;
+  grid-template-rows: [row1-start] auto [row2-start] auto [row3-start] auto [row3-end];
+  grid-template-columns: [col1-start] auto [col2-start] 190px [col2-end];
+
+  > div {
+    grid-column: col1-start;
+  }
+
+  .modal-stake-right {
+    grid-column: col2-start;
+    grid-row: row1-start / row3-end;
+  }
+
+  @include media-breakpoint-down(xs) {
+    grid-template-columns: [col1-start] auto [col1-end];
+    grid-template-rows: auto;
+
+    .modal-stake-right {
+      grid-column: col1-start;
+      grid-row: 3;
+    }
+
+    .stakes-progress {
+      width: auto;
+      padding-top: 15px;
+      padding-bottom: 15px;
+
+      .stakes-progress-graph {
+        float: left;
+        width: 130px;
+        margin-right: 15px;
+      }
+
+      .stakes-progress-info-title {
+        float: left;
+        margin-right: 15px;
+      }
+
+      .stakes-progress-info {
+        margin-bottom: 15px;
+      }
+    }
+  }
+}
+
+.modal-stake-left {
+  flex-shrink: 0;
+  height: 100%;
+  padding: $modal-vertical-padding $modal-horizontal-padding;
+  width: 190px;
+  height: 100%;
+  border-right: 1px solid $base-border-color;
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_modal_validator_info.scss b/frontend-v2/src/stylesheets/components/stakes/_modal_validator_info.scss
new file mode 100644
index 0000000..b47381c
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_modal_validator_info.scss
@@ -0,0 +1,72 @@
+.modal-validator-info {
+  max-width: 660px;
+  width: 100%;
+
+  @include media-breakpoint-down(sm) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .modal-title {
+    margin-bottom: 10px;
+  }
+
+  #pool_name {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  #pool_description {
+    width: 100%;
+  }
+}
+
+.modal-validator-info-content {
+  background-color: $modal-gray-background;
+  border-bottom-left-radius: $modal-border-radius;
+  border-bottom-right-radius: $modal-border-radius;
+  color: #a3a9b5;
+  column-gap: 60px;
+  display: grid;
+  font-size: 12px;
+  font-weight: normal;
+  grid-template-columns: 1fr 1fr 1fr;
+  line-height: 1.67;
+  padding: #{$modal-vertical-padding} #{$modal-horizontal-padding};
+  row-gap: 30px;
+
+  @include media-breakpoint-down(sm) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.modal-validator-info-item {
+  &-title {
+    color: #a3a9b5;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.2;
+    margin-bottom: 15px;
+    padding: 0;
+    text-align: left;
+  }
+
+  &-value {
+    color: #333;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.2;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.modal-validator-alert {
+  padding: 10px 30px;
+  background-color: #fff3f7;
+  color: #ff7986;
+  border-top: 1px solid #fee6ef;
+  border-bottom: 1px solid #fee6ef;
+  line-height: 1.5;
+  font-size: 14px;
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_progress_from_to.scss b/frontend-v2/src/stylesheets/components/stakes/_progress_from_to.scss
new file mode 100644
index 0000000..32fdaad
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_progress_from_to.scss
@@ -0,0 +1,53 @@
+$progress-from-to-background: #f5f6fa !default;
+$progress-from-to-progress-background: $primary !default;
+
+.progress-from-to {
+  min-width: 120px;
+  max-width: 100%;
+
+  .stakes-table & {
+    width: 120px;
+  }
+}
+
+.progress-from-to-values {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.progress-from-to-value {
+  color: #333;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.2;
+
+  .stakes-tr-banned & {
+    color: $stakes-banned-color;
+  }
+}
+
+.progress-from-to-background {
+  background-color: $progress-from-to-background;
+  border-radius: 2px;
+  height: 4px;
+  overflow: hidden;
+  position: relative;
+
+  .stakes-tr-banned & {
+    background-color: darken($stakes-banned-background, 5%);
+  }
+}
+
+.progress-from-to-progress {
+  background-color: $progress-from-to-progress-background;
+  height: 100%;
+  left: 0;
+  max-width: 100%;
+  position: absolute;
+  top: 0;
+
+  .stakes-tr-banned & {
+    background-color: $stakes-banned-color;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_stakes-btn-close-alert.scss b/frontend-v2/src/stylesheets/components/stakes/_stakes-btn-close-alert.scss
new file mode 100644
index 0000000..899e6f0
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_stakes-btn-close-alert.scss
@@ -0,0 +1,14 @@
+$stakes-btn-close-alert-color: $primary !default;
+
+.stakes-btn-close-alert {
+  position: absolute;
+  left: 0.5em;
+  top: 1em;
+  border-style: none;
+  background: transparent;
+  outline: none !important;
+
+  path {
+    fill: $stakes-btn-close-alert-color;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_stakes.scss b/frontend-v2/src/stylesheets/components/stakes/_stakes.scss
new file mode 100644
index 0000000..5021caf
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_stakes.scss
@@ -0,0 +1,213 @@
+$stakes-dashboard-copy-icon-color: $copy-icon-color !default;
+$stakes-address-color: $primary !default;
+$stakes-control-color: $primary !default;
+$stakes-stats-item-color: #fff !default;
+$stakes-stats-item-border-color: #fff !default;
+
+.stakes-top {
+  @include gradient-container();
+
+  margin-bottom: 3rem;
+  padding: 50px 0;
+}
+
+.stakes-top-stats {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @include stats-item(
+    $stakes-stats-item-border-color,
+    $stakes-stats-item-color
+  );
+
+  @include media-breakpoint-down(md) {
+    column-gap: 30px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    row-gap: 30px;
+  }
+
+  .stakes-top-stats-item {
+    @include media-breakpoint-down(md) {
+      &:nth-child(1),
+      &:nth-child(2),
+      &:nth-child(3) {
+        grid-column-start: 1;
+      }
+      &:nth-child(4) {
+        grid-column-start: 2;
+        grid-row-start: 1;
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      grid-column-start: auto !important;
+      grid-row-start: auto !important;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .copy-icon {
+    min-width: 18px;
+    margin-left: 20px;
+    path {
+      fill: $stakes-dashboard-copy-icon-color;
+    }
+  }
+}
+
+.stakes-top-stats-value {
+  align-items: center;
+  display: flex;
+
+  div:nth-child(1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+}
+
+.stakes-top-stats-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.stakes-top-stats-login {
+  &,
+  &:hover {
+    color: $secondary;
+    text-decoration: none;
+    cursor: pointer;
+    margin-right: 8px;
+  }
+}
+
+.stakes-address-container {
+  display: flex;
+  justify-content: flex-start;
+
+  .stakes-address {
+    margin-right: 10px;
+
+    .stakes-tr-banned & {
+      color: $stakes-banned-color;
+    }
+
+    a {
+      text-decoration: none;
+      color: $stakes-address-color;
+    }
+  }
+
+  .stakes-address-active {
+    color: $stakes-address-color;
+    cursor: pointer;
+  }
+
+  .check-tooltip {
+    position: relative;
+    top: -1px;
+  }
+}
+
+.stakes-controls {
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 30px;
+  float: left;
+}
+
+.stakes-control {
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-start;
+  color: $stakes-control-color;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin-right: 25px;
+  text-align: left;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.stakes-control-icon {
+  path {
+    fill: $stakes-control-color;
+  }
+}
+
+.stakes-top-stats-item {
+  min-width: 180px;
+
+  &.stakes-top-stats-item-address {
+    min-width: 260px;
+    width: 100%;
+  }
+
+  @include media-breakpoint-down(sm) {
+    min-width: auto;
+    &.stakes-top-stats-item-address {
+      grid-column-end: span 2 !important;
+    }
+  }
+}
+
+.stakes-top-buttons {
+  min-width: 180px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  .btn-add-full {
+    margin-bottom: 10px;
+  }
+
+  .btn-external-link:hover {
+    color: #fff;
+  }
+
+  &.right {
+    @include media-breakpoint-up(sm) {
+      margin-left: 10px;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    grid-column-start: 2;
+    grid-row-start: 2;
+    justify-self: left;
+  }
+
+  @include media-breakpoint-down(sm) {
+    min-width: auto;
+    grid-column-end: span 2;
+    grid-column-start: auto !important;
+    grid-row-start: auto !important;
+    justify-self: center;
+  }
+}
+
+.staking-pg-container {
+  padding: 0 30px 30px;
+  &.at-bottom {
+    padding-top: 30px;
+  }
+}
+
+.stake-stats-container {
+  @include media-breakpoint-up(lg) {
+    margin-bottom: -30px;
+  }
+  margin-top: 10px;
+  font-size: 12px;
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_stakes_btn_remove_pool.scss b/frontend-v2/src/stylesheets/components/stakes/_stakes_btn_remove_pool.scss
new file mode 100644
index 0000000..3f95220
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_stakes_btn_remove_pool.scss
@@ -0,0 +1,21 @@
+$stakes-btn-remove-pool-color: $primary !default;
+
+.stakes-btn-remove-pool {
+  align-items: center;
+  color: $stakes-btn-remove-pool-color;
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  font-weight: 600;
+  height: 36px;
+  justify-content: center;
+  text-align: center;
+
+  svg {
+    margin-right: 10px;
+  }
+
+  path {
+    fill: $stakes-btn-remove-pool-color;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_stakes_empty_content.scss b/frontend-v2/src/stylesheets/components/stakes/_stakes_empty_content.scss
new file mode 100644
index 0000000..981529d
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_stakes_empty_content.scss
@@ -0,0 +1,35 @@
+.stakes-empty-content {
+  display: flex;
+  justify-content: center;
+  padding: 100px 15px 20px;
+}
+
+.stakes-empty-content-pic {
+  flex-shrink: 0;
+  margin: 0 50px 0 0;
+}
+
+.stakes-empty-content-pic-svg-path {
+  fill: $primary;
+}
+
+.stakes-empty-content-info {
+  max-width: 400px;
+}
+
+.stakes-empty-content-title {
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin: 0 0 15px;
+  text-align: left;
+}
+
+.stakes-empty-content-text {
+  color: #a3a9b5;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.71;
+  margin: 0 0 25px;
+  text-align: left;
+}
diff --git a/frontend-v2/src/stylesheets/components/stakes/_stakes_progress.scss b/frontend-v2/src/stylesheets/components/stakes/_stakes_progress.scss
new file mode 100644
index 0000000..9861421
--- /dev/null
+++ b/frontend-v2/src/stylesheets/components/stakes/_stakes_progress.scss
@@ -0,0 +1,85 @@
+$stakes-progress-graph-color: $primary !default;
+
+.stakes-progress {
+  .modal-stake-right & {
+    border-left: 1px solid $base-border-color;
+    flex-shrink: 0;
+    height: 100%;
+    padding: $modal-vertical-padding $modal-horizontal-padding;
+    width: 190px;
+  }
+}
+
+.stakes-progress-info {
+  margin-bottom: 25px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.stakes-progress-info-title {
+  color: #a3a9b5;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin: 0 0 12px;
+  text-align: left;
+}
+
+.stakes-progress-info-value {
+  color: #333;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin: 0;
+  text-align: left;
+
+  &.link-color {
+    color: $primary;
+  }
+}
+
+.stakes-progress-info-link {
+  color: $primary;
+  cursor: pointer;
+}
+
+.stakes-progress-graph {
+  margin: 0 0 20px;
+  position: relative;
+}
+
+.stakes-progress-graph-canvas {
+  position: relative;
+  z-index: 1;
+}
+
+.stakes-progress-graph-thing-for-getting-color {
+  color: $stakes-progress-graph-color;
+}
+
+.stakes-progress-data {
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  z-index: 12;
+}
+
+.stakes-progress-data-total {
+  color: #a3a9b5;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.2;
+  text-align: center;
+}
+
+.stakes-progress-data-progress {
+  color: #333;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1.2;
+  margin: 0 0 8px;
+  text-align: center;
+}
diff --git a/frontend-v2/src/stylesheets/export-csv.scss b/frontend-v2/src/stylesheets/export-csv.scss
new file mode 100644
index 0000000..a8e1993
--- /dev/null
+++ b/frontend-v2/src/stylesheets/export-csv.scss
@@ -0,0 +1,12 @@
+@import "components/datepicker";
+
+.js-datepicker {
+  width: 150px !important;
+  display: inline-block !important;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.dates-container {
+  margin-bottom: 20px;
+}
diff --git a/frontend-v2/src/stylesheets/export-vars-to-js.module.scss b/frontend-v2/src/stylesheets/export-vars-to-js.module.scss
new file mode 100644
index 0000000..01fa524
--- /dev/null
+++ b/frontend-v2/src/stylesheets/export-vars-to-js.module.scss
@@ -0,0 +1,31 @@
+@import "./mixins";
+
+// Bootstrap Core CSS
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "../../node_modules/bootstrap/scss/utilities/background";
+@import "../../node_modules/bootstrap/scss/utilities/position";
+@import "../../node_modules/bootstrap/scss/utilities/borders";
+@import "../../node_modules/bootstrap/scss/progress";
+
+@import "components/navbar";
+@import "components/alerts";
+@import "components/stakes_variables";
+@import "components/stakes_table";
+@import "components/dashboard-banner";
+
+@import "theme/dark-theme";
+
+@import "theme/custom_contracts/dark-forest-theme";
+@import "theme/custom_contracts/circles-theme";
+
+:export {
+  dashboardBannerChartAxisFontColor: $dashboard-banner-chart-axis-font-color;
+  dashboardLineColorMarket: $dashboard-line-color-market;
+  dashboardLineColorPrice: $dashboard-line-color-price;
+  dashboardLineColorTransactions: $dashboard-line-color-transactions;
+}
diff --git a/frontend-v2/src/stylesheets/main-page.scss b/frontend-v2/src/stylesheets/main-page.scss
new file mode 100644
index 0000000..f5180d9
--- /dev/null
+++ b/frontend-v2/src/stylesheets/main-page.scss
@@ -0,0 +1,76 @@
+@import "./mixins";
+
+/* Phoenix flash messages */
+.alert:empty {
+  display: none;
+}
+
+/* This file is for your main application css. */
+
+// Bootstrap Core CSS
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "../../node_modules/bootstrap/scss/root";
+@import "../../node_modules/bootstrap/scss/reboot";
+@import "../../node_modules/bootstrap/scss/grid";
+@import "../../node_modules/bootstrap/scss/buttons";
+@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/input-group";
+@import "../../node_modules/bootstrap/scss/utilities/spacing";
+@import "../../node_modules/bootstrap/scss/utilities/sizing";
+@import "../../node_modules/bootstrap/scss/utilities/display";
+@import "../../node_modules/bootstrap/scss/utilities/flex";
+@import "../../node_modules/bootstrap/scss/utilities/float";
+@import "../../node_modules/bootstrap/scss/utilities/text";
+@import "../../node_modules/bootstrap/scss/utilities/borders";
+
+// Bootstrap Components
+@import "../../node_modules/bootstrap/scss/alert";
+@import "../../node_modules/bootstrap/scss/badge";
+@import "../../node_modules/bootstrap/scss/card";
+@import "../../node_modules/bootstrap/scss/dropdown";
+@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/nav";
+@import "../../node_modules/bootstrap/scss/navbar";
+@import "../../node_modules/bootstrap/scss/transitions";
+
+//Custom theme
+@import "theme/fonts";
+
+// Custom SCSS
+@import "layout";
+@import "typography";
+@import "helpers";
+@import "elements";
+@import "components/nav_tabs";
+@import "components/address_link";
+@import "components/footer";
+@import "components/button";
+@import "components/navbar";
+@import "components/alerts";
+@import "components/animations";
+@import "components/card";
+@import "components/tile";
+@import "components/dashboard-banner";
+@import "components/badge";
+@import "components/nounderline-link";
+@import "components/dropdown";
+@import "components/btn_full";
+@import "components/btn_line";
+@import "components/stakes_variables";
+@import "components/btn_add_to_mm";
+@import "components/errors";
+@import "components/btn_no_border";
+@import "components/custom_tooltips";
+@import "components/label";
+@import "components/ad";
+@import "components/_search";
+@import "components/token_tile_view_more";
+// Font Awesome
+@import "components/_fontawesome_icon";
+
+@import "theme/dark-theme";
diff --git a/frontend-v2/src/stylesheets/non-critical.scss b/frontend-v2/src/stylesheets/non-critical.scss
new file mode 100644
index 0000000..c9a7759
--- /dev/null
+++ b/frontend-v2/src/stylesheets/non-critical.scss
@@ -0,0 +1,20 @@
+// Bootstrap Core CSS
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables-non-critical";
+
+@import "../../node_modules/bootstrap/scss/modal";
+@import "../../node_modules/bootstrap/scss/tooltip";
+
+@import "components/i_tooltip";
+@import "components/i_tooltip_2";
+@import "components/check_tooltip";
+@import "components/me_tooltip";
+@import "components/tooltip";
+
+@import "components/qr-code";
+@import "components/modal_variables";
+@import "components/modal";
+@import "components/modal_status";
diff --git a/frontend-v2/src/stylesheets/stakes.scss b/frontend-v2/src/stylesheets/stakes.scss
new file mode 100644
index 0000000..2ddab06
--- /dev/null
+++ b/frontend-v2/src/stylesheets/stakes.scss
@@ -0,0 +1,23 @@
+@import "./mixins";
+
+// Bootstrap Core CSS
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/mixins";
+
+@import "theme/variables";
+
+@import "components/stakes_variables";
+@import "components/stakes/copy_icon";
+@import "components/stakes/stakes";
+@import "components/stakes/progress_from_to";
+@import "components/stakes/stakes_empty_content";
+@import "components/stakes/stakes_btn_remove_pool";
+@import "components/modal_variables";
+@import "components/stakes/stakes_progress";
+@import "components/stakes/modal_stake";
+@import "components/stakes/modal_become_candidate";
+@import "components/stakes/modal_claim_reward";
+@import "components/stakes/modal_validator_info";
+@import "components/stakes/modal_delegators_info";
+@import "components/stakes/modal_bottom_disclaimer";
+@import "components/stakes/stakes-btn-close-alert";
diff --git a/frontend-v2/src/stylesheets/theme/_base_variables.scss b/frontend-v2/src/stylesheets/theme/_base_variables.scss
new file mode 100644
index 0000000..48de54b
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_base_variables.scss
@@ -0,0 +1,1008 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+@use "sass:math";
+
+$dashboard-line-color-price: #8286a9 !default;
+$base-border-color: #e2e5ec !default;
+$common-container-margin: 50px !default;
+
+// stylelint-disable
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #828ba0 !default;
+$gray-600: #cdcdcc !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$grays: () !default;
+$grays: map-merge(
+  (
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900,
+  ),
+  $grays
+);
+
+$blue: #4786ff !default;
+$indigo: #5b389f !default;
+$purple: #997fdc !default;
+$pink: #e83e8c !default;
+$lilac: #b38dc9 !default;
+$red: #c74d39 !default;
+$orange: #ef9a60 !default;
+$yellow: #ffc107 !default;
+$green: #20b760 !default;
+$teal: #009097 !default;
+$cyan: #90e1d8 !default;
+$dark-purple: #923dc3;
+
+$colors: () !default;
+$colors: map-merge(
+  (
+    "blue": $blue,
+    "indigo": $indigo,
+    "purple": $purple,
+    "pink": $pink,
+    "red": $red,
+    "orange": $orange,
+    "yellow": $yellow,
+    "green": $green,
+    "teal": $teal,
+    "cyan": $cyan,
+    "white": $white,
+    "gray": $gray-600,
+    "gray-dark": $gray-800,
+  ),
+  $colors
+);
+
+$primary: $indigo !default;
+$dark-primary: #9b62ff !default;
+$dark-primary-alternate: #9b62ff !default;
+$secondary: #7dd79f !default;
+$dark-secondary: #87e1a9 !default;
+$tertiary: $purple !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-400 !default;
+$dark: $gray-800 !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge(
+  (
+    "primary": $primary,
+    "secondary": $secondary,
+    "success": $success,
+    "info": $info,
+    "warning": $warning,
+    "danger": $danger,
+    "light": $light,
+    "dark": $dark,
+  ),
+  $theme-colors
+);
+// stylelint-enable
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark: $gray-900 !default;
+$yiq-text-light: $white !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes: true !default;
+$enable-print-styles: true !default;
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+// stylelint-disable
+$spacer: 1rem !default;
+$spacers: () !default;
+$spacers: map-merge(
+  (
+    0: 0,
+    1: (
+      $spacer * 0.25,
+    ),
+    2: (
+      $spacer * 0.5,
+    ),
+    3: $spacer,
+    4: (
+      $spacer * 1.5,
+    ),
+    5: (
+      $spacer * 3,
+    ),
+  ),
+  $spacers
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: () !default;
+$sizes: map-merge(
+  (
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+    auto: auto,
+  ),
+  $sizes
+);
+// stylelint-enable
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color: theme-color("primary") !default;
+$link-decoration: none !default;
+$link-hover-color: darken(map-get($theme-colors, primary), 15%) !default;
+$link-hover-decoration: underline !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints);
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+) !default;
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1300px !important;
+  }
+}
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg: 1.5 !default;
+$line-height-sm: 1.5 !default;
+
+$border-width: 1px !default;
+$border-color: $gray-300 !default;
+
+$border-radius: 0.1rem !default;
+$border-radius-lg: 0.3rem !default;
+$border-radius-sm: 0.2rem !default;
+
+$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
+$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
+
+$component-active-color: $white !default;
+$component-active-bg: theme-color("primary") !default;
+
+$caret-width: 0.3em !default;
+
+$transition-base: all 0.2s ease-in-out !default;
+$transition-fade: opacity 0.15s linear !default;
+$transition-collapse: height 0.35s ease !default;
+$transition-cont: all 0.4s ease-in-out !default;
+
+// Fonts
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family: Nunito, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+  "Liberation Mono", "Courier New", monospace !default;
+$font-family-base: $font-family !default;
+// stylelint-enable value-keyword-case
+
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg: ($font-size-base * 1.25) !default;
+$font-size-sm: ($font-size-base * 0.875) !default;
+
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+
+$font-weight-base: $font-weight-normal !default;
+$line-height-base: 1.5 !default;
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+
+$headings-margin-bottom: math.div($spacer, 2) !default;
+$headings-font-family: inherit !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: inherit !default;
+
+$display1-size: 6rem !default;
+$display2-size: 5.5rem !default;
+$display3-size: 4.5rem !default;
+$display4-size: 3.5rem !default;
+
+$display1-weight: 300 !default;
+$display2-weight: 300 !default;
+$display3-weight: 300 !default;
+$display4-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+
+$lead-font-size: ($font-size-base * 1.25) !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: 80% !default;
+
+$text-muted: $gray-500 !default;
+
+$blockquote-small-color: $gray-600 !default;
+$blockquote-font-size: ($font-size-base * 1.25) !default;
+
+$hr-border-color: rgba($black, 0.1) !default;
+$hr-border-width: $border-width !default;
+
+$mark-padding: 0.2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default;
+$nested-kbd-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: 0.5rem !default;
+
+$mark-bg: #fcf8e3 !default;
+
+$hr-margin-y: $spacer !default;
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding: 0.75rem !default;
+$table-cell-padding-sm: 0.3rem !default;
+
+$table-bg: transparent !default;
+$table-accent-bg: rgba($black, 0.05) !default;
+$table-hover-bg: rgba($black, 0.075) !default;
+$table-active-bg: $table-hover-bg !default;
+
+$table-border-width: $border-width !default;
+$table-border-color: $gray-300 !default;
+
+$table-head-bg: $gray-200 !default;
+$table-head-color: $gray-700 !default;
+
+$table-dark-bg: $gray-900 !default;
+$table-dark-accent-bg: rgba($white, 0.05) !default;
+$table-dark-hover-bg: rgba($white, 0.075) !default;
+$table-dark-border-color: lighten($gray-900, 7.5%) !default;
+$table-dark-color: $body-bg !default;
+
+$table-striped-order: odd !default;
+
+$table-caption-color: $text-muted !default;
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y: 0.375rem !default;
+$input-btn-padding-x: 0.75rem !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: 1px !default;
+$input-btn-focus-color: rgba($component-active-bg, 0.25) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm: 0.25rem !default;
+$input-btn-padding-x-sm: 0.5rem !default;
+$input-btn-line-height-sm: $line-height-sm !default;
+
+$input-btn-padding-y-lg: 0.5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-line-height-lg: $line-height-lg !default;
+
+$input-btn-border-width: $border-width !default;
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-line-height: $input-btn-line-height !default;
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-line-height-sm: $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-line-height-lg: $input-btn-line-height-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow:
+  inset 0 1px 0 rgba($white, 0.15),
+  0 1px 1px rgba($black, 0.075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: 0.65 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
+
+$btn-link-disabled-color: $gray-600 !default;
+
+$btn-block-spacing-y: 0.5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+
+$btn-transition:
+  color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out !default;
+
+// Forms
+
+$label-margin-bottom: 0.5rem !default;
+
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-line-height-sm: $input-btn-line-height-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-line-height-lg: $input-btn-line-height-lg !default;
+
+$input-bg: $white !default;
+$input-disabled-bg: $gray-200 !default;
+
+$input-color: $gray-700 !default;
+$input-border-color: $gray-400 !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-lg: $border-radius-lg !default;
+$input-border-radius-sm: $border-radius-sm !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: lighten($component-active-bg, 25%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: $gray-600 !default;
+$input-plaintext-color: $body-color !default;
+
+$input-height-border: $input-border-width * 2 !default;
+
+$input-height-inner: ($font-size-base * $input-btn-line-height) +
+  ($input-btn-padding-y * 2) !default;
+$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
+
+$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) +
+  ($input-btn-padding-y-sm * 2) !default;
+$input-height-sm: calc(
+  #{$input-height-inner-sm} + #{$input-height-border}
+) !default;
+
+$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) +
+  ($input-btn-padding-y-lg * 2) !default;
+$input-height-lg: calc(
+  #{$input-height-inner-lg} + #{$input-height-border}
+) !default;
+
+$input-transition:
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out !default;
+
+$form-text-margin-top: 0.25rem !default;
+
+$form-check-input-gutter: 1.25rem !default;
+$form-check-input-margin-y: 0.3rem !default;
+$form-check-input-margin-x: 0.25rem !default;
+
+$form-check-inline-margin-x: 0.75rem !default;
+$form-check-inline-input-margin-x: 0.3125rem !default;
+
+$form-group-margin-bottom: 1rem !default;
+
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: $gray-200 !default;
+$input-group-addon-border-color: $input-border-color !default;
+
+$custom-control-gutter: 1.5rem !default;
+$custom-control-spacer-x: 1rem !default;
+
+$custom-control-indicator-size: 1rem !default;
+$custom-control-indicator-bg: $gray-300 !default;
+$custom-control-indicator-bg-size: 50% 50% !default;
+$custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default;
+
+$custom-control-indicator-disabled-bg: $gray-200 !default;
+$custom-control-label-disabled-color: $gray-600 !default;
+
+$custom-control-indicator-checked-color: $component-active-color !default;
+$custom-control-indicator-checked-bg: $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg: rgba(
+  theme-color("primary"),
+  0.5
+) !default;
+$custom-control-indicator-checked-box-shadow: none !default;
+
+$custom-control-indicator-focus-box-shadow:
+  0 0 0 1px $body-bg,
+  $input-btn-focus-box-shadow !default;
+
+$custom-control-indicator-active-color: $component-active-color !default;
+$custom-control-indicator-active-bg: lighten(
+  $component-active-bg,
+  35%
+) !default;
+$custom-control-indicator-active-box-shadow: none !default;
+
+$custom-checkbox-indicator-border-radius: $border-radius !default;
+$custom-checkbox-indicator-icon-checked: str-replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+
+$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
+$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate: str-replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
+
+$custom-radio-indicator-border-radius: 50% !default;
+$custom-radio-indicator-icon-checked: str-replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+
+$custom-select-padding-y: 0.375rem !default;
+$custom-select-padding-x: 0.75rem !default;
+$custom-select-height: $input-height !default;
+$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-line-height: $input-btn-line-height !default;
+$custom-select-color: $input-color !default;
+$custom-select-disabled-color: $gray-600 !default;
+$custom-select-bg: $input-bg !default;
+$custom-select-disabled-bg: $gray-200 !default;
+$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
+$custom-select-indicator-color: $gray-800 !default;
+$custom-select-indicator: str-replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+$custom-select-border-width: $input-btn-border-width !default;
+$custom-select-border-color: $input-border-color !default;
+$custom-select-border-radius: $border-radius !default;
+
+$custom-select-focus-border-color: $input-focus-border-color !default;
+$custom-select-focus-box-shadow:
+  inset 0 1px 2px rgba($black, 0.075),
+  0 0 5px rgba($custom-select-focus-border-color, 0.5) !default;
+
+$custom-select-font-size-sm: 75% !default;
+$custom-select-height-sm: $input-height-sm !default;
+
+$custom-select-font-size-lg: 125% !default;
+$custom-select-height-lg: $input-height-lg !default;
+
+$custom-range-track-width: 100% !default;
+$custom-range-track-height: 0.5rem !default;
+$custom-range-track-cursor: pointer !default;
+$custom-range-track-bg: $gray-300 !default;
+$custom-range-track-border-radius: 1rem !default;
+$custom-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default;
+
+$custom-range-thumb-width: 1rem !default;
+$custom-range-thumb-height: $custom-range-thumb-width !default;
+$custom-range-thumb-bg: $component-active-bg !default;
+$custom-range-thumb-border: 0 !default;
+$custom-range-thumb-border-radius: 1rem !default;
+$custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
+$custom-range-thumb-focus-box-shadow:
+  0 0 0 1px $body-bg,
+  $input-btn-focus-box-shadow !default;
+$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
+
+$custom-file-height: $input-height !default;
+$custom-file-focus-border-color: $input-focus-border-color !default;
+$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$custom-file-padding-y: $input-btn-padding-y !default;
+$custom-file-padding-x: $input-btn-padding-x !default;
+$custom-file-line-height: $input-btn-line-height !default;
+$custom-file-color: $input-color !default;
+$custom-file-bg: $input-bg !default;
+$custom-file-border-width: $input-btn-border-width !default;
+$custom-file-border-color: $input-border-color !default;
+$custom-file-border-radius: $input-border-radius !default;
+$custom-file-box-shadow: $input-box-shadow !default;
+$custom-file-button-color: $custom-file-color !default;
+$custom-file-button-bg: $input-group-addon-bg !default;
+$custom-file-text: (
+  en: "Browse",
+) !default;
+
+// Form validation
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $small-font-size !default;
+$form-feedback-valid-color: theme-color("success") !default;
+$form-feedback-invalid-color: theme-color("danger") !default;
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-y: 0.5rem !default;
+$dropdown-spacer: 0.125rem !default;
+$dropdown-bg: $white !default;
+$dropdown-border-color: rgba($black, 0.15) !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-divider-bg: $gray-200 !default;
+$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default;
+
+$dropdown-link-color: $gray-900 !default;
+$dropdown-link-hover-color: darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg: $primary !default;
+
+$dropdown-link-active-color: $component-active-color !default;
+$dropdown-link-active-bg: $component-active-bg !default;
+
+$dropdown-link-disabled-color: $gray-600 !default;
+
+$dropdown-item-padding-y: 0.25rem !default;
+$dropdown-item-padding-x: 1.5rem !default;
+
+$dropdown-header-color: $gray-600 !default;
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-modal-backdrop: 1040 !default;
+$zindex-modal: 1050 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+
+// Navs
+
+$nav-link-padding-y: 0.5rem !default;
+$nav-link-padding-x: 1rem !default;
+$nav-link-disabled-color: $gray-600 !default;
+
+$nav-tabs-border-color: $gray-300 !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-border-radius: $border-radius !default;
+$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: $gray-700 !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius: $border-radius !default;
+$nav-pills-link-active-color: $component-active-color !default;
+$nav-pills-link-active-bg: $component-active-bg !default;
+
+$nav-divider-color: $gray-200 !default;
+$nav-divider-margin-y: math.div($spacer, 2) !default;
+
+// Navbar
+
+$navbar-padding-y: math.div($spacer, 2) !default;
+$navbar-padding-x: $spacer !default;
+
+$navbar-nav-link-padding-x: 0.5rem !default;
+
+$navbar-brand-font-size: $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: (
+  $font-size-base * $line-height-base + $nav-link-padding-y * 2
+) !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: math.div(
+  $nav-link-height - $navbar-brand-height,
+  2
+) !default;
+
+$navbar-toggler-padding-y: 0.25rem !default;
+$navbar-toggler-padding-x: 0.75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+
+$navbar-dark-color: rgba($white, 0.5) !default;
+$navbar-dark-hover-color: rgba($white, 0.75) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-disabled-color: rgba($white, 0.25) !default;
+$navbar-dark-toggler-icon-bg: str-replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+$navbar-dark-toggler-border-color: rgba($white, 0.1) !default;
+
+$navbar-light-color: $gray-200 !default;
+$navbar-light-hover-color: rgba($black, 0.7) !default;
+$navbar-light-active-color: rgba($black, 0.9) !default;
+$navbar-light-disabled-color: rgba($black, 0.3) !default;
+$navbar-light-toggler-icon-bg: str-replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+$navbar-light-toggler-border-color: rgba($black, 0.1) !default;
+
+// Pagination
+
+$pagination-padding-y: 0.5rem !default;
+$pagination-padding-x: 0.75rem !default;
+$pagination-padding-y-sm: 0.25rem !default;
+$pagination-padding-x-sm: 0.5rem !default;
+$pagination-padding-y-lg: 0.75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+$pagination-line-height: 1.25 !default;
+
+$pagination-color: $link-color !default;
+$pagination-bg: $white !default;
+$pagination-border-width: $border-width !default;
+$pagination-border-color: $gray-300 !default;
+
+$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-200 !default;
+$pagination-hover-border-color: $gray-300 !default;
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $pagination-active-bg !default;
+
+$pagination-disabled-color: $gray-600 !default;
+$pagination-disabled-bg: $white !default;
+$pagination-disabled-border-color: $gray-300 !default;
+
+// Jumbotron
+
+$jumbotron-padding: 2rem !default;
+$jumbotron-bg: $gray-200 !default;
+
+// Cards
+
+$card-spacer-y: 0.75rem !default;
+$card-spacer-x: 1.25rem !default;
+$card-border-width: $border-width !default;
+$card-border-radius: $border-radius !default;
+$card-border-color: rgba($black, 0.125) !default;
+$card-inner-border-radius: calc(
+  #{$card-border-radius} - #{$card-border-width}
+) !default;
+$card-cap-bg: rgba($black, 0.03) !default;
+$card-bg: $white !default;
+
+$card-img-overlay-padding: 1.25rem !default;
+
+$card-group-margin: math.div($grid-gutter-width, 2) !default;
+$card-deck-margin: $card-group-margin !default;
+
+$card-columns-count: 3 !default;
+$card-columns-gap: 1.25rem !default;
+$card-columns-margin: $card-spacer-y !default;
+
+// Tooltips
+
+$tooltip-font-size: ($font-size-sm * 0.875) !default;
+$tooltip-max-width: 70ch !default;
+$tooltip-color: $white !default;
+$tooltip-bg: $secondary !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity: 1 !default;
+$tooltip-padding-y: 0.3rem !default;
+$tooltip-padding-x: 0.6rem !default;
+$tooltip-margin: 0 !default;
+
+$tooltip-arrow-width: 0.8rem !default;
+$tooltip-arrow-height: 0.4rem !default;
+$tooltip-arrow-color: $secondary !default;
+
+// Popovers
+
+$popover-font-size: $font-size-sm !default;
+$popover-bg: $white !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: rgba($black, 0.2) !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default;
+
+$popover-header-bg: darken($popover-bg, 3%) !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: 0.5rem !default;
+$popover-header-padding-x: 0.75rem !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $popover-header-padding-y !default;
+$popover-body-padding-x: $popover-header-padding-x !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: 0.5rem !default;
+$popover-arrow-color: $popover-bg !default;
+
+$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
+
+// Badges
+
+$badge-font-size: 75% !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-padding-y: 0.25em !default;
+$badge-padding-x: 0.4em !default;
+$badge-border-radius: $border-radius !default;
+
+$badge-pill-padding-x: 0.6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius: 10rem !default;
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding: 1rem !default;
+
+$modal-dialog-margin: 0.5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-bg: $white !default;
+$modal-content-border-color: rgba($black, 0.2) !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-border-radius: $border-radius-lg !default;
+$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default;
+$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: 0.5 !default;
+$modal-header-border-color: $gray-200 !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+$modal-header-padding: 1rem !default;
+
+$modal-lg: 800px !default;
+$modal-md: 500px !default;
+$modal-sm: 300px !default;
+
+$modal-transition: transform 0.3s ease-out !default;
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y: 0.75rem !default;
+$alert-padding-x: 1.25rem !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: $border-radius !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: $border-width !default;
+
+$alert-bg-level: -10 !default;
+$alert-border-level: -9 !default;
+$alert-color-level: 6 !default;
+
+// Progress bars
+
+$progress-height: 1rem !default;
+$progress-font-size: ($font-size-base * 0.75) !default;
+$progress-bg: $gray-200 !default;
+$progress-border-radius: $border-radius !default;
+$progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: $primary !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width 0.6s ease !default;
+
+// List group
+
+$list-group-bg: $white !default;
+$list-group-border-color: rgba($black, 0.125) !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-item-padding-y: 0.75rem !default;
+$list-group-item-padding-x: 1.25rem !default;
+
+$list-group-hover-bg: $gray-100 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: $gray-700 !default;
+$list-group-action-hover-color: $list-group-action-color !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: $gray-200 !default;
+
+// Image thumbnails
+
+$thumbnail-padding: 0.25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $gray-300 !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) !default;
+
+// Figures
+
+$figure-caption-font-size: 90% !default;
+$figure-caption-color: $gray-600 !default;
+
+// Breadcrumbs
+
+$breadcrumb-padding-y: 0.75rem !default;
+$breadcrumb-padding-x: 1rem !default;
+$breadcrumb-item-padding: 0.5rem !default;
+
+$breadcrumb-margin-bottom: 1rem !default;
+
+$breadcrumb-bg: $gray-200 !default;
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-active-color: $gray-600 !default;
+$breadcrumb-divider: quote("/") !default;
+
+$breadcrumb-border-radius: $border-radius !default;
+
+// Carousel
+
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: 0.5 !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-active-bg: $white !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+
+$carousel-control-icon-width: 20px !default;
+
+$carousel-control-prev-icon-bg: str-replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+$carousel-control-next-icon-bg: str-replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+
+$carousel-transition: transform 0.6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+
+// Close
+
+$close-font-size: $font-size-base * 1.5 !default;
+$close-font-weight: $font-weight-bold !default;
+$close-color: $black !default;
+$close-text-shadow: 0 1px 0 $white !default;
+
+// Code
+
+$code-font-size: 87.5% !default;
+$code-color: $pink !default;
+
+$kbd-padding-y: 0.2rem !default;
+$kbd-padding-x: 0.4rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: $white !default;
+$kbd-bg: $gray-900 !default;
+
+$pre-color: $gray-900 !default;
+$pre-scrollable-max-height: 340px !default;
+
+// Printing
+$print-page-size: a3 !default;
+$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
diff --git a/frontend-v2/src/stylesheets/theme/_callisto_variables.scss b/frontend-v2/src/stylesheets/theme/_callisto_variables.scss
new file mode 100644
index 0000000..60bfc0a
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_callisto_variables.scss
@@ -0,0 +1,3 @@
+$primary: #34c88a;
+$secondary: #163f59;
+$tertiary: #466d85;
diff --git a/frontend-v2/src/stylesheets/theme/_dai_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_dai_variables-non-critical.scss
new file mode 100644
index 0000000..148abf8
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_dai_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #17314f;
+$secondary: #15bba6;
+$tertiary: #93d7ff;
+$additional-font: #fff;
+
+$btn-line-color: $secondary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_dai_variables.scss b/frontend-v2/src/stylesheets/theme/_dai_variables.scss
new file mode 100644
index 0000000..c7da120
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_dai_variables.scss
@@ -0,0 +1,160 @@
+// general
+$primary: #17314f;
+$secondary: #15bba6;
+$tertiary: #93d7ff;
+$additional-font: #fff;
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: #96bde8;
+$footer-item-disc-color: $secondary;
+.footer-logo {
+  filter: brightness(0) invert(1);
+}
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-line-color-market: $secondary;
+
+$dashboard-banner-chart-legend-label-color: $footer-text-color;
+$dashboard-stats-item-label-color: $footer-text-color;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #20446e; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12);
+} // header shadow
+
+// form
+$form-control-border-color-active: $secondary;
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $secondary; // button border and font color && hover bg color
+$btn-copy-color: $secondary; // btn copy
+$btn-qr-color: $secondary; // btn qr-code
+$btn-address-card-icon-color: $secondary; // btn address color
+$btn-contract-color: $secondary;
+
+//links & tile
+$tile-body-a-color: $secondary;
+$tile-type-block-color: $secondary;
+$tile-type-progress-bar-color: $secondary;
+.tile a:hover,
+a.tile-title {
+  color: $secondary !important;
+}
+.card-body {
+  a:not(.dropdown-item):not(.button):not([data-test="address_hash_link"]):not(
+      .alert-link
+    ):not([data-test="token_link"]):not(#dropdown-tokens):not(.btn-line):not(
+      .page-link
+    ) {
+    color: $secondary;
+
+    &:hover {
+      color: $secondary;
+    }
+  }
+}
+
+// card
+$card-background-1: $secondary;
+$card-tab-active: $secondary;
+
+.layout-container {
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+}
+
+// Badges
+$badge-neutral-color: #20446e;
+$badge-neutral-background-color: rgba(#20446e, 0.1);
+$api-text-monospace-color: #20446e;
+
+// Staking
+$stakes-btn-remove-pool-color: $secondary;
+$stakes-dashboard-copy-icon-color: $secondary;
+$btn-full-primary-bg: $secondary;
+$stakes-address-color: $secondary;
+$stakes-control-color: $secondary;
+$stakes-link-color: $secondary;
+$progress-from-to-progress-background: $secondary;
+$stakes-stats-item-border-color: rgba(#fff, 0.5);
+$check-color: $secondary;
+$modal-status-graph-success: $secondary;
+$stakes-progress-graph-color: $secondary;
+
+// Dark theme
+$dark-primary: #15bba6;
+$dark-secondary: #93d7ff;
+$dark-primary-alternate: #15bba6;
+$dark-tertiary: #5a77ff;
+
+.dark-theme-applied .tile .tile-body a,
+.dark-theme-applied .tile a:hover,
+.dark-theme-applied .tile span[data-address-hash],
+.dark-theme-applied .tile a[data-test="token_link"] {
+  color: $dark-tertiary !important;
+}
+
+.dark-theme-applied .btn-line {
+  background-color: transparent !important;
+  border-color: $dark-tertiary !important;
+  color: $dark-tertiary !important;
+
+  &[disabled] {
+    &,
+    &:hover {
+      background-color: transparent !important;
+      border-color: $dark-tertiary !important;
+      color: $dark-tertiary !important;
+    }
+  }
+}
+
+.dark-theme-applied .btn-line:hover {
+  color: $additional-font !important;
+}
+
+.dark-theme-applied .card-body {
+  a:not(.dropdown-item):not(.button):not([data-test="address_hash_link"]):not(
+      .alert-link
+    ):not([data-test="token_link"]):not(#dropdown-tokens):not(.btn-line):not(
+      .page-link
+    ) {
+    color: $dark-tertiary;
+
+    &:hover {
+      color: $dark-tertiary;
+    }
+  }
+}
+
+.dark-theme-applied .dashboard-banner-chart-legend {
+  .dashboard-banner-chart-legend-item {
+    &:nth-child(1)::before {
+      background-color: $dashboard-line-color-price;
+    }
+
+    &:nth-child(2)::before {
+      background-color: $dashboard-line-color-market;
+    }
+  }
+}
diff --git a/frontend-v2/src/stylesheets/theme/_dark-theme.scss b/frontend-v2/src/stylesheets/theme/_dark-theme.scss
new file mode 100644
index 0000000..13ea1af
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_dark-theme.scss
@@ -0,0 +1,1274 @@
+$body-dark: #111827; // body background
+$dark-bg: rgba(0, 0, 0, 0.3); // hero shade
+
+$dark-light-bg: #1d2942; // pills bg shade, banner
+
+$dark-light: #28395c; // tile light top share
+
+$labels-dark: #fff; // header nav, labels
+$dark-stakes-banned-background: #28395c;
+
+// Switcher
+.dark-mode-changer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  margin-right: 5px;
+  outline: none !important;
+  box-shadow: none !important;
+  transition: 0.2s ease-in;
+  &:hover {
+    opacity: 0.8;
+  }
+  svg path {
+    fill: #828ba0;
+  }
+  &--dark {
+    svg path {
+      fill: $dark-primary;
+    }
+  }
+}
+
+.dark-theme-applied body {
+  color: #fff;
+  background-color: $body-dark;
+
+  // navbar
+  .navbar.navbar-primary {
+    background-color: $dark-light-bg;
+    .input-group-text {
+      &.border {
+        background-color: $dark-light-bg;
+      }
+    }
+  }
+  .navbar.navbar-primary .navbar-nav .nav-link {
+    color: $labels-dark;
+    .nav-link-icon {
+      svg path {
+        fill: $labels-dark;
+      }
+    }
+    &.active,
+    &:hover {
+      .nav-link-icon {
+        svg path {
+          fill: $dark-primary;
+        }
+      }
+      &:before {
+        background-color: $dark-primary;
+      }
+    }
+  }
+  .navbar.navbar-primary .form-control {
+    background-color: $dark-bg;
+    border-color: $dark-bg;
+    color: #fff;
+    &::placeholder {
+      color: $labels-dark;
+    }
+  }
+  .navbar.navbar-primary .navbar-toggler .navbar-toggler-icon {
+    filter: invert(1);
+  }
+
+  // footer
+  .footer {
+    background: $dark-light-bg;
+    color: $labels-dark;
+  }
+  .footer-social-icon,
+  .footer-link {
+    color: $labels-dark;
+  }
+  .footer-social-icon:hover,
+  .footer-link:hover {
+    color: #fff;
+  }
+  .footer-list ul li::before {
+    background-color: $dark-secondary;
+  }
+
+  // hero stats
+
+  .layout-container .dashboard-banner-container {
+    background-image: none;
+    background-color: $dark-bg;
+  }
+  .dashboard-banner-network-plain-container,
+  .dashboard-banner-network-plain-container::after {
+    background-color: $dark-light-bg;
+  }
+  .dashboard-banner-network-stats-label,
+  .dashboard-banner-chart-legend .dashboard-banner-chart-legend-label {
+    color: $labels-dark;
+  }
+  .dashboard-banner-chart-legend
+    .dashboard-banner-chart-legend-item:nth-child(1)::before {
+    background-color: $dark-primary;
+  }
+  .dashboard-banner-network-stats-item::before {
+    background-color: $dark-secondary;
+  }
+  .dashboard-banner-chart-legend
+    .dashboard-banner-chart-legend-item:nth-child(2)::before {
+    background-color: $dark-secondary;
+  }
+
+  // main container, layout, cards
+  .layout-container main {
+    background-color: $body-dark;
+  }
+
+  .card {
+    background-color: $dark-light-bg;
+    box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5);
+  }
+
+  .card-header {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+
+  .address-detail-hash-title {
+    color: #fff;
+  }
+
+  .card-tabs {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+
+  .card-tab {
+    background-color: transparent;
+    &:hover:not(.active) {
+      background-color: rgba($dark-primary, 0.15);
+      color: $dark-primary;
+    }
+    &.active {
+      background-color: $dark-primary-alternate;
+      color: #fff;
+    }
+  }
+
+  .card-background-1 {
+    background-color: $dark-primary-alternate;
+  }
+
+  // Components
+  a {
+    color: $dark-primary;
+  }
+
+  .tile {
+    border-top-color: $dark-light;
+    border-bottom-color: $dark-light;
+    border-right-color: $dark-light;
+    background-color: $dark-light;
+    color: $labels-dark;
+    &:not([class^="tile tile-type"]) {
+      border-left-color: $dark-light;
+    }
+    &.tile-type-coin-balance {
+      border-left-color: $dark-light;
+    }
+    .tile-title {
+      color: #fff;
+    }
+    .tile-transaction-type-block {
+      background-color: transparent;
+    }
+  }
+  .tile-bottom-contents {
+    background-color: $dark-bg;
+  }
+  a.tile-title {
+    color: #fff !important;
+  }
+  .tile.tile-type-block .tile-transaction-type-block a {
+    color: #fff;
+  }
+  .fade-up-blocks-chain .tile-type-block-animation {
+    background-color: $dark-light;
+    border-top-color: $dark-light;
+    border-right-color: $dark-light;
+    border-bottom-color: $dark-light;
+  }
+  .fade-up-blocks-chain .tile-type-block-animation:after {
+    background-color: $dark-light;
+  }
+  .cube-animation-title {
+    color: $labels-dark;
+  }
+  .tile .tile-body a,
+  .tile a:hover,
+  .tile span[data-address-hash],
+  .tile a[data-test="token_link"] {
+    color: $dark-primary;
+  }
+  .fade-up-blocks-chain .tile-type-block-animation .tile-type-line-up {
+    background-color: $dark-primary;
+  }
+  .tile.tile-type-block {
+    border-left-color: $dark-primary;
+  }
+  .tile.tile-type-block .tile-status-label {
+    color: $dark-primary;
+  }
+  .tile.tile-type-block .tile-transaction-type-block {
+    border-right-color: $dark-primary;
+    border-top-color: $dark-primary;
+    border-bottom-color: $dark-primary;
+  }
+  .tile .progress {
+    background-color: rgba(#fff, 0.2);
+  }
+  .tile .progress .progress-bar {
+    background-color: $dark-primary;
+  }
+  .tile .tile-title-lg:not([data-balance-change-sign]) {
+    color: $dark-primary;
+  }
+
+  // btns
+
+  .btn-line {
+    background-color: transparent;
+    border-color: $dark-primary;
+    color: $dark-primary;
+    &:hover {
+      border-color: $dark-primary;
+      background-color: $dark-primary;
+      color: #fff;
+    }
+  }
+
+  .btn-copy-icon,
+  .btn-qr-icon,
+  .btn-address-card-icon .btn-contract-icon {
+    border-color: $dark-primary;
+    path {
+      fill: $dark-primary;
+    }
+    &:hover {
+      background-color: $dark-primary;
+      path {
+        fill: #fff;
+      }
+    }
+  }
+
+  // pagination
+  .pagination-container .pagination .page-link {
+    color: $labels-dark;
+    border-color: $dark-light;
+    background-color: $dark-light;
+    &:not(.no-hover):hover {
+      color: #fff;
+      background-color: $dark-primary;
+      path {
+        fill: #fff;
+      }
+    }
+    &[disabled] {
+      color: $labels-dark;
+      border-color: $dark-light;
+      background-color: $dark-light;
+    }
+  }
+
+  // dropdown
+  .dropdown-menu {
+    background-color: $dark-light;
+    border-left-color: $dark-light;
+    border-right-color: $dark-light;
+    border-bottom-color: $dark-light;
+  }
+
+  .dropdown-item {
+    color: #fff;
+    &:hover {
+      background-color: rgba(#fff, 0.1);
+    }
+  }
+  .dropdown-item.active {
+    background-color: $dark-primary;
+  }
+  .btn-dropdown-line {
+    background-color: $dark-light;
+    border-color: $dark-light;
+    color: $labels-dark;
+  }
+
+  // table
+  .stakes-table-head,
+  .stakes-table-th {
+    background-color: $dark-light;
+    color: $labels-dark;
+  }
+
+  .stakes-table-body {
+    .refresh-informer {
+      a {
+        color: inherit;
+      }
+    }
+  }
+
+  .stakes-td {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+
+  .stakes-tr-banned {
+    .stakes-td {
+      background-color: $dark-stakes-banned-background;
+      border-top: 1px solid $stakes-banned-color;
+      border-bottom-color: $stakes-banned-color;
+
+      .stakes-td-link-style {
+        color: $stakes-banned-color;
+      }
+    }
+  }
+
+  .modal-validator-alert {
+    background-color: $dark-stakes-banned-background;
+    border-top: 1px solid $stakes-banned-color;
+    border-bottom-color: $stakes-banned-color;
+  }
+
+  .table th,
+  .table td {
+    border-top-color: darken($labels-dark, 30);
+  }
+  hr {
+    border-top-color: darken($labels-dark, 30);
+  }
+
+  .i-tooltip {
+    .i-tooltip-circle {
+      fill: $labels-dark;
+    }
+
+    .i-tooltip-info {
+      fill: $dark-light-bg;
+    }
+
+    &:hover {
+      .i-tooltip-circle {
+        fill: $dark-primary;
+      }
+
+      .i-tooltip-info {
+        fill: #fff;
+      }
+    }
+  }
+
+  // api's
+  .api-anchors-list {
+    background-color: $dark-light;
+  }
+  .api-doc-list-item {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+  .card-subtitle,
+  .api-anchors-list-item-title,
+  .api-doc-list-item-title {
+    color: #fff;
+  }
+  .api-text-monospace {
+    color: $dark-primary;
+  }
+  .api-text-monospace-background {
+    background-color: rgba($dark-primary, 0.15);
+  }
+  .badge.badge-neutral {
+    background-color: rgba($dark-primary, 0.15);
+    color: $dark-primary;
+  }
+
+  // download csv button
+  .download-all-transactions .download-all-transactions-link svg path {
+    fill: $dark-primary;
+  }
+
+  //tooltips
+  .tooltip .arrow:before {
+    border-top-color: $dark-primary;
+    border-bottom-color: $dark-primary;
+  }
+  .tooltip > .tooltip-inner {
+    background-color: $dark-primary;
+  }
+
+  .tooltip-pale-color.bs-tooltip-top .arrow::before,
+  .tooltip-pale-color.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+    border-top-color: rgba(#fff, 0.5) !important;
+  }
+
+  .tooltip-pale-color.bs-tooltip-right .arrow::before,
+  .tooltip-pale-color.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+    border-right-color: rgba(#fff, 0.5) !important;
+  }
+
+  .tooltip-pale-color.bs-tooltip-bottom .arrow::before,
+  .tooltip-pale-color.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+    border-bottom-color: rgba(#fff, 0.5) !important;
+  }
+
+  .tooltip-pale-color.bs-tooltip-left .arrow::before,
+  .tooltip-pale-color.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+    border-left-color: rgba(#fff, 0.5) !important;
+  }
+
+  //network select
+  .network-selector-overlay {
+    background-color: rgba($dark-bg, 0.9);
+  }
+  .network-selector {
+    background-color: $dark-light-bg;
+  }
+  .network-selector-title {
+    color: #fff;
+  }
+  .network-selector-text {
+    color: $labels-dark;
+  }
+  .network-selector-close path {
+    fill: #fff;
+  }
+  .network-selector-search-container {
+    background-color: $dark-light;
+  }
+  .network-selector-search-container path {
+    fill: $labels-dark;
+  }
+  .network-selector-search-input {
+    color: #fff !important;
+    &::placeholder {
+      color: $labels-dark;
+    }
+  }
+  .network-selector-tab {
+    color: $labels-dark;
+    &:hover,
+    &.active {
+      color: #fff;
+    }
+    &.active {
+      &:after {
+        background-color: $dark-primary;
+      }
+    }
+  }
+  .network-selector-item,
+  .network-selector-tabs-container {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+  .network-selector-item-title {
+    color: #fff;
+  }
+  .network-selector-item-type {
+    color: $labels-dark;
+  }
+  .radio .radio-icon {
+    border-color: $labels-dark;
+  }
+  .network-selector-item-url:hover .network-selector-item-type {
+    color: #fff;
+  }
+
+  //coin dropdown
+  .token-balance-dropdown.dropdown-menu {
+    border-color: $dark-light !important;
+    box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5) !important;
+  }
+  .token-balance-dropdown .dropdown-search-icon path {
+    fill: $labels-dark;
+  }
+  .token-balance-dropdown .dropdown-search-field {
+    background-color: $dark-light;
+    border-color: $dark-light;
+    color: #fff;
+    &::placeholder {
+      color: $labels-dark;
+    }
+  }
+  .token-balance-dropdown[aria-labelledby="dropdown-tokens"]
+    .dropdown-items
+    .dropdown-item:hover {
+    color: #fff !important;
+  }
+  .dropdown-header {
+    color: $labels-dark;
+  }
+  .border-bottom {
+    border-bottom-color: darken($labels-dark, 30) !important;
+  }
+
+  // coin balance history chart
+  .chartjs-render-monitor[data-chart="coinBalanceHistoryChart"] {
+    filter: brightness(0) invert(1) !important;
+  }
+
+  // logs search
+  .logs-search-input,
+  .logs-search-btn,
+  .logs-search-btn-cancel {
+    background-color: $dark-light;
+    border-color: $dark-light;
+    color: #fff;
+  }
+
+  .logs-search-btn {
+    color: $labels-dark;
+  }
+
+  .logs-search-btn {
+    &:hover {
+      background-color: $dark-primary;
+      color: #fff;
+    }
+  }
+
+  .logs-search-input {
+    &::placeholder {
+      color: $labels-dark;
+    }
+  }
+
+  // code
+  pre {
+    color: #fff;
+  }
+
+  // info allert
+  .alert-info {
+    color: $labels-dark;
+    background-color: $dark-light;
+    border-color: $dark-light;
+  }
+
+  // dark text
+  .text-dark {
+    color: #fff !important;
+  }
+
+  // Contract Verification
+  .new-smart-contract-container {
+    background-color: $dark-light-bg;
+    background-image: linear-gradient(
+      to bottom right,
+      $dark-light 100%,
+      $dark-light 100%
+    );
+    @media (max-width: 991.98px) {
+      background-image: none;
+    }
+  }
+  .smart-contract-form-group-inner-wrapper .smart-contract-form-group-tooltip {
+    color: $labels-dark;
+  }
+  .smart-contract-title {
+    color: #fff;
+  }
+  .smart-contract-form-group-inner-wrapper > label {
+    color: $labels-dark;
+  }
+  .smart-contract-form-buttons {
+    border-top-color: darken($labels-dark, 30);
+    .btn-no-border {
+      background-color: $dark-light;
+      border-color: $dark-light;
+      color: #fff;
+      &:hover {
+        background-color: $dark-primary;
+        color: #fff;
+      }
+    }
+  }
+  .add-contract-libraries-wrapper {
+    border-top-color: darken($labels-dark, 30);
+  }
+
+  .token-tile-view-more:before,
+  .token-tile-view-more:after {
+    border-top-color: darken($labels-dark, 30);
+    border-bottom-color: darken($labels-dark, 30);
+  }
+
+  // Form Controlls
+  .form-control {
+    background-color: $dark-light;
+    border-color: $dark-light;
+    color: #fff;
+    transition: border-color 0.15s ease-in-out;
+
+    &[readonly] {
+      background-color: $dark-light !important;
+    }
+
+    &::placeholder {
+      color: $labels-dark;
+    }
+    &:focus {
+      background-color: $dark-light;
+      border-color: $dark-primary;
+      color: #fff;
+    }
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus {
+      caret-color: #fff;
+      -webkit-text-fill-color: #fff;
+      -webkit-box-shadow: 0 0 0px 1000px $dark-light inset;
+    }
+  }
+
+  .input-group:not(.input-status-error)
+    .form-control:focus
+    ~ .input-group-prepend.last {
+    .input-group-text {
+      border-color: $dark-primary;
+    }
+  }
+
+  .input-group-prepend.last {
+    .input-group-text {
+      background: $dark-light;
+      border-color: $dark-light;
+      color: $labels-dark;
+    }
+  }
+
+  .radio-big .radio-icon {
+    border-color: $labels-dark;
+  }
+  .radio-big input[type="radio"]:checked + .radio-icon {
+    border-color: $dark-primary;
+  }
+  .radio-big input[type="radio"]:checked + .radio-icon::before {
+    background: $dark-primary;
+  }
+  .radio-big .radio-text {
+    color: #fff;
+  }
+
+  .check input[type="checkbox"]:checked + .check-icon::before {
+    background: $dark-primary;
+  }
+
+  // Content loading placeholders
+  .tile-loader,
+  .table-content-loader {
+    background-color: $dark-bg !important;
+    &:before {
+      background: linear-gradient(
+        to right,
+        $dark-bg 2%,
+        lighten($dark-bg, 3) 18%,
+        $dark-bg 33%
+      );
+    }
+  }
+
+  // Verify other explorers
+  .verify-other-explorers-elem {
+    border-color: darken($labels-dark, 30);
+    .exp-logo {
+      border-right-color: darken($labels-dark, 30);
+    }
+    .exp-content {
+      h3 {
+        color: #fff;
+      }
+      div {
+        color: $labels-dark;
+      }
+    }
+  }
+  .verify-other-explorers-more {
+    border-color: $dark-primary;
+    svg path {
+      fill: $dark-primary;
+    }
+    &:hover {
+      background-color: $dark-primary;
+      svg path {
+        fill: #fff;
+      }
+    }
+  }
+  .verify-other-explorers-elem {
+    &:hover {
+      text-decoration: none;
+      color: #fff;
+      .exp-content {
+        h3,
+        div {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  #explorersModal {
+    .modal-title {
+      color: #fff;
+    }
+
+    .text-muted {
+      color: $labels-dark;
+    }
+
+    .modal-footer {
+      border-top-color: darken($labels-dark, 30);
+    }
+
+    .modal-content {
+      background-color: $dark-light-bg;
+
+      .btn-primary {
+        background-color: $dark-primary;
+        border-color: $dark-primary;
+        &:hover {
+          background-color: $dark-primary;
+          border-color: $dark-primary;
+        }
+      }
+    }
+
+    .verify-other-explorers-cell {
+      .exp-logo {
+        color: #fff;
+      }
+    }
+
+    .close {
+      color: #fff;
+    }
+  }
+
+  #qrModal {
+    .close {
+      color: #fff;
+    }
+  }
+
+  // API docs dropdown content
+  .api-doc-parameters-list-item-description,
+  .api-doc-parameters-list-item-title,
+  .api-doc-parameters-list-title,
+  .api-doc-list-item-controls-view-more {
+    color: #fff;
+  }
+
+  .api-doc-parameters-list {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+  .api-doc-parameters-container {
+    border-top-color: darken($labels-dark, 30);
+  }
+  .api-doc-tab {
+    color: $dark-primary !important;
+    &.active {
+      border-bottom-color: $dark-primary;
+    }
+  }
+
+  // Common Buttons
+  .btn-secondary,
+  .button-secondary {
+    background-color: transparent;
+    border-color: $dark-primary;
+    color: $dark-primary;
+    &:hover {
+      background-color: $dark-primary;
+      border-color: $dark-primary;
+      color: #fff;
+    }
+  }
+
+  // Decoded data
+  .table.thead-light.table-bordered {
+    color: #fff !important;
+  }
+  .table-bordered,
+  .table-bordered td,
+  .table-bordered th {
+    border-color: darken($labels-dark, 30);
+  }
+  .dark-theme-applied .table td,
+  .dark-theme-applied .table th,
+  .dark-theme-applied hr {
+    border-top-color: darken($labels-dark, 30);
+  }
+  .btn-copy-ico svg path {
+    fill: #fff;
+  }
+
+  // pre
+  .pre-scrollable.line-numbers,
+  .hljs {
+    background: $dark-light;
+    color: #fff;
+  }
+
+  .hljs-comment {
+    color: $labels-dark;
+  }
+
+  .hljs-title,
+  .hljs-section {
+    color: #ff2294;
+  }
+
+  .hljs-type,
+  .hljs-string,
+  .hljs-number,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-quote,
+  .hljs-template-tag,
+  .hljs-deletion {
+    color: #ff2294;
+  }
+
+  .hljs-literal,
+  .hljs-built_in,
+  .hljs-bullet,
+  .hljs-code,
+  .hljs-addition {
+    color: #20dd94;
+  }
+
+  .line-numbers [data-line-number]:before {
+    color: #3f436b !important;
+    border-right-color: #3f436b !important;
+  }
+
+  // 'text dark' label
+  .text-dark {
+    color: #fff;
+  }
+
+  // validator info
+  #validatorModal {
+    .modal-title {
+      color: #fff;
+    }
+
+    .text-muted {
+      color: $labels-dark;
+    }
+
+    .modal-footer {
+      border-top-color: darken($labels-dark, 30);
+    }
+
+    .modal-content {
+      background-color: $dark-light-bg;
+
+      .btn-primary {
+        background-color: $dark-primary;
+        border-color: $dark-primary;
+        &:hover {
+          background-color: $dark-primary;
+          border-color: $dark-primary;
+        }
+      }
+    }
+
+    .close {
+      color: #fff;
+    }
+  }
+
+  .modal-status {
+    .modal-status-title {
+      color: #fff;
+    }
+
+    .modal-status-button-wrapper .btn-line {
+      border-color: $dark-primary-alternate;
+      color: $dark-primary-alternate;
+
+      &:hover {
+        background-color: $dark-primary-alternate;
+        color: $additional-font;
+      }
+    }
+  }
+
+  .modal-dialog {
+    .modal-title {
+      color: #fff;
+    }
+    .modal-content {
+      background-color: $dark-light-bg;
+    }
+
+    .modal-bottom-disclaimer {
+      background-color: $dark-light;
+
+      color: $labels-dark;
+    }
+
+    .modal-bottom-disclaimer-graphic svg {
+      fill: #fff;
+    }
+
+    .modal-header {
+      .modal-validator-info-item-title {
+        color: $labels-dark;
+      }
+
+      .modal-validator-info-item-value {
+        color: #fff;
+      }
+    }
+
+    .modal-validator-info-content {
+      background-color: $dark-light;
+
+      .modal-validator-info-item-value {
+        color: #fff;
+      }
+    }
+  }
+
+  //stakes
+  .modal-stake-right {
+    .stakes-progress {
+      border-left-color: darken($labels-dark, 30);
+    }
+  }
+
+  .modal-stake-left {
+    border-right-color: darken($labels-dark, 30);
+  }
+
+  .stakes-progress-data-progress,
+  .stakes-progress-info-value {
+    color: #fff;
+  }
+
+  .stakes-empty-content-text {
+    color: $labels-dark;
+  }
+
+  .stakes-empty-content-pic-svg-path {
+    fill: $dark-primary;
+  }
+
+  .stakes-address-container .stakes-address-active {
+    color: $dark-primary;
+  }
+
+  .stakes-td-link-style {
+    color: $dark-primary;
+  }
+
+  .stakes-control-icon path {
+    fill: $dark-primary;
+  }
+
+  .progress-from-to-value {
+    color: #fff;
+  }
+
+  .progress-from-to-background {
+    background-color: $dark-bg;
+  }
+
+  .check-tooltip {
+    .check-tooltip-circle {
+      fill: $labels-dark;
+    }
+
+    .check-tooltip-check {
+      fill: $dark-light-bg;
+    }
+
+    &:hover {
+      .check-tooltip-circle {
+        fill: $dark-primary;
+      }
+    }
+  }
+
+  .me-tooltip {
+    background-color: $labels-dark;
+    color: $dark-light-bg;
+
+    &:hover {
+      background-color: $dark-primary;
+    }
+  }
+
+  // alerts
+  .alert-link {
+    color: $labels-dark;
+  }
+
+  .alert-danger {
+    background-color: $dark-light;
+    border-color: $dark-light;
+    .alert-link {
+      color: $alert-danger-color;
+    }
+  }
+
+  .tile .alert {
+    background: rgba(#000, 0.1);
+  }
+
+  // primary buttons
+  .btn-full-primary,
+  .button-primary {
+    background: $dark-primary;
+    border-color: $dark-primary;
+    color: #fff;
+    &:hover {
+      background: darken($dark-primary, 6);
+      border-color: darken($dark-primary, 6);
+      color: #fff;
+    }
+
+    &[disabled] {
+      &,
+      &:hover {
+        background-color: $dark-primary;
+        border-color: $dark-primary;
+      }
+    }
+  }
+
+  .logo-text {
+    color: #fff;
+  }
+
+  .bs-label.omni {
+    background: #6ca1e2;
+  }
+
+  .bs-label.validator,
+  .bs-label.destination-eth {
+    background-color: $labels-dark;
+  }
+
+  .dropdown-item {
+    .external-link-icon {
+      path {
+        fill: #fff;
+      }
+    }
+
+    & {
+      &.active,
+      &:hover,
+      &:focus {
+        .external-link-icon {
+          path {
+            fill: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  .tooltip-inversed-color {
+    .tooltip-inner {
+      background-color: $btn-line-color !important;
+      color: #fff !important;
+    }
+  }
+
+  .tooltip-inversed-color.bs-tooltip-top .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+    border-top-color: $btn-line-color !important;
+  }
+
+  .tooltip-inversed-color.bs-tooltip-right .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+    border-right-color: $btn-line-color !important;
+  }
+
+  .tooltip-inversed-color.bs-tooltip-bottom .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="bottom"]
+    .arrow::before {
+    border-bottom-color: $btn-line-color !important;
+  }
+
+  .tooltip-inversed-color.bs-tooltip-left .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+    border-left-color: $btn-line-color !important;
+  }
+
+  .stakes-top {
+    background-color: $dark-bg;
+    background-image: none;
+  }
+
+  .contract-plus-btn {
+    color: $dark-primary;
+  }
+  .custom-power-input {
+    border-color: $dark-primary;
+  }
+  .stakes-btn-close-alert {
+    path {
+      fill: #fff;
+    }
+  }
+  .main-search-autocomplete {
+    background-color: $dark-bg !important;
+    color: #fff !important;
+  }
+  .autocomplete-category {
+    color: #fff !important;
+  }
+  ul[id^="autoComplete_list_"] {
+    background-color: $dark-light-bg !important;
+  }
+  li[id^="autoComplete_result_"] {
+    background-color: $dark-light-bg !important;
+    color: #fff !important;
+
+    &:hover {
+      background-color: $dark-primary !important;
+    }
+    &[aria-selected="true"] {
+      background-color: $dark-primary !important;
+    }
+  }
+}
+
+.navbar-dark .navbar-toggler {
+  color: rgba(255, 255, 255, 0.5);
+  border: none;
+}
+
+.dark-theme-applied .dropdown-item {
+  background-color: $dark-light !important;
+  color: #fff !important;
+}
+
+.dark-theme-applied .dropdown-item.active:not(.header),
+.dark-theme-applied .dropdown-item:not(.header):hover,
+.dark-theme-applied .dropdown-item:not(.header):focus {
+  background-image: none;
+  width: 100%;
+  background-color: #3f426c !important;
+}
+
+@media (max-width: 991.98px) {
+  .dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:hover,
+  .dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link.activeLink,
+  .dark-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:focus {
+    background-image: none;
+    width: 100%;
+    background-color: #35335d !important;
+    color: white;
+    border: none;
+  }
+  .dark-theme-applied .dropdown-item:hover:before {
+    content: "|";
+    height: 50px;
+    width: 50%;
+    opacity: 1;
+    background: none;
+    right: 17%;
+    color: $dark-primary;
+    position: relative;
+  }
+  .dark-theme-applied
+    .navbar.navbar-primary
+    .navbar-nav
+    .nav-link:hover:before {
+    content: "|";
+    height: 50px;
+    width: 50%;
+    opacity: 1;
+    background: none;
+    left: 24%;
+    top: 14%;
+    color: $dark-primary;
+  }
+}
+.dark-theme-applied .confirmations-label:after {
+  border-left: 0.9rem solid $dark-light-bg;
+}
+
+.dark-theme-applied .i-tooltip-2:hover {
+  color: $labels-dark;
+}
+
+.dark-theme-applied .btn-no-border-link-to-tems {
+  border-color: $dark-primary !important;
+  color: $dark-primary !important;
+}
+
+.dark-theme-applied .bs-label {
+  display: inline-block;
+  padding: 0 5px;
+  background: #77838f;
+  color: #f5f6fa;
+  border-radius: 5px;
+  &.large {
+    font-size: 14px;
+  }
+  font-size: 12px;
+  padding: 5px;
+  line-height: normal;
+
+  &.right {
+    margin-left: auto;
+    float: right;
+  }
+  &.omni {
+    background: #6ca1e2;
+    color: #fff;
+  }
+  &.destination-eth {
+    background: #253358;
+    color: #fff;
+  }
+  &.destination-bsc {
+    background: #e7b941;
+    color: #fff;
+  }
+  &.destination-rinkeby {
+    background: #153550;
+    color: #fff;
+  }
+  &.bridged {
+    background: #70aee3;
+    color: #fff;
+  }
+  &.validator {
+    background: $primary;
+    color: #fff;
+  }
+  &.secondary {
+    background: $secondary;
+    color: #fff;
+  }
+  &.method {
+    color: #1e2022;
+  }
+  &.from-dropdown {
+    margin-top: -3px;
+  }
+  &.success {
+    background: rgba(40, 167, 69, 0.2);
+    color: rgb(40, 167, 69);
+  }
+}
diff --git a/frontend-v2/src/stylesheets/theme/_ellaism_variables.scss b/frontend-v2/src/stylesheets/theme/_ellaism_variables.scss
new file mode 100644
index 0000000..a9bed3d
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ellaism_variables.scss
@@ -0,0 +1,3 @@
+$primary: #4a4a4a;
+$secondary: #01c85c;
+$tertiary: #466d85;
diff --git a/frontend-v2/src/stylesheets/theme/_ether1_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_ether1_variables-non-critical.scss
new file mode 100644
index 0000000..533d74f
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ether1_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #840032;
+$secondary: #343434;
+$tertiary: #7f7f7f;
+$additional-font: #ff95db;
+
+$btn-line-color: #4b021e; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_ether1_variables.scss b/frontend-v2/src/stylesheets/theme/_ether1_variables.scss
new file mode 100644
index 0000000..a92376b
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ether1_variables.scss
@@ -0,0 +1,55 @@
+// general
+$primary: #840032;
+$secondary: #343434;
+$tertiary: #7f7f7f;
+$additional-font: #ff95db;
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: #fff;
+$footer-item-disc-color: $secondary;
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-banner-chart-legend-value-color: $additional-font; // chart labels
+
+$dashboard-stats-item-value-color: $additional-font; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #4b021e; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(75, 2, 30, 0.12);
+} // header shadow
+$header-icon-border-color-hover: $tertiary; // top border on hover
+$header-icon-color-hover: $tertiary; // nav icon on hover
+.dropdown-item:hover,
+.dropdown-item:focus {
+  background-color: $tertiary !important;
+} // dropdown item on hover
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: #4b021e; // button border and font color && hover bg color
+$btn-copy-color: #4b021e; // btn copy
+$btn-qr-color: #4b021e; // btn qr-code
+$btn-contract-color: #4b021e;
+//links & tile
+.tile a {
+  color: $tertiary !important;
+} // links color for badges
+.tile-type-block {
+  border-left: 4px solid #4b021e;
+} // tab active bg
+
+// card
+$card-background-1: $tertiary;
+$card-tab-active: $tertiary;
diff --git a/frontend-v2/src/stylesheets/theme/_ethercore_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_ethercore_variables-non-critical.scss
new file mode 100644
index 0000000..0584460
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ethercore_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #3a6ea7;
+$secondary: #558ac3;
+$tertiary: #3a6ea7;
+$additional-font: #bdbdff;
+
+$btn-line-color: $tertiary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_ethercore_variables.scss b/frontend-v2/src/stylesheets/theme/_ethercore_variables.scss
new file mode 100644
index 0000000..1c711aa
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ethercore_variables.scss
@@ -0,0 +1,86 @@
+// general
+$primary: #3a6ea7;
+$secondary: #558ac3;
+$tertiary: #3a6ea7;
+$additional-font: #bdbdff;
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: $additional-font;
+$footer-item-disc-color: $tertiary;
+$footer-social-icon-color: #3a6ea7;
+
+// dashboard
+$dashboard-line-color-price: $secondary;
+$dashboard-line-color-market: $tertiary;
+$dashboard-banner-gradient-start: #7ba4d1;
+$dashboard-banner-gradient-end: #3a6ea7;
+
+$dashboard-banner-chart-legend-label-color: $additional-font;
+$dashboard-stats-item-label-color: $additional-font;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+$dashboard-banner-network-plain-container-background-color: #2e5884; // stats bg
+
+// navigation
+$header-icon-border-color-hover: $tertiary; // top border on hover
+$header-icon-color-hover: $tertiary; // nav icon on hover
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $tertiary; // button border and font color && hover bg color
+$btn-copy-color: $tertiary; // btn copy
+$btn-qr-color: $tertiary; // btn qr-code
+$btn-address-card-icon-color: $tertiary; // btn address color
+$btn-contract-color: $tertiary;
+
+//links & tile
+$tile-body-a-color: $tertiary;
+$tile-type-block-color: $tertiary;
+$tile-type-progress-bar-color: $tertiary;
+a.tile-title {
+  color: $tertiary !important;
+}
+
+// card
+$card-background-1: $tertiary;
+$card-tab-active: $tertiary;
+
+// ETC theme's idiosyncrasies
+.layout-container {
+  .navbar {
+    box-shadow: 0 0 30px 0 rgba(21, 53, 80, 0.12);
+  }
+
+  .dropdown-item:hover,
+  .dropdown-item.active,
+  .dropdown-item:focus {
+    background-color: rgba($tertiary, 0.1) !important;
+    color: $tertiary !important;
+  }
+
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+
+  .footer-logo {
+    filter: brightness(0) invert(1);
+  }
+}
+
+// Badges
+$badge-neutral-color: $tertiary;
+$badge-neutral-background-color: rgba($tertiary, 0.1);
+$api-text-monospace-color: $tertiary;
+
+// Dark theme
+$dark-primary: #8588ff;
+$dark-secondary: #4ad7a7;
+$dark-primary-alternate: #5b5ed8;
diff --git a/frontend-v2/src/stylesheets/theme/_ethereum_classic_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_ethereum_classic_variables-non-critical.scss
new file mode 100644
index 0000000..4107ec0
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ethereum_classic_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #1c1c3d;
+$secondary: #4ad7a7;
+$tertiary: #5959d8;
+$additional-font: #bdbdff;
+
+$btn-line-color: $tertiary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_ethereum_classic_variables.scss b/frontend-v2/src/stylesheets/theme/_ethereum_classic_variables.scss
new file mode 100644
index 0000000..6c4d314
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ethereum_classic_variables.scss
@@ -0,0 +1,86 @@
+// general
+$primary: #1c1c3d;
+$secondary: #4ad7a7;
+$tertiary: #5959d8;
+$additional-font: #bdbdff;
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: $additional-font;
+$footer-item-disc-color: $tertiary;
+$footer-social-icon-color: #5959d8;
+
+// dashboard
+$dashboard-line-color-price: $secondary;
+$dashboard-line-color-market: $tertiary;
+$dashboard-banner-gradient-start: #1b1b39;
+$dashboard-banner-gradient-end: #27275f;
+
+$dashboard-banner-chart-legend-label-color: $additional-font;
+$dashboard-stats-item-label-color: $additional-font;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+$dashboard-banner-network-plain-container-background-color: #2d2d69; // stats bg
+
+// navigation
+$header-icon-border-color-hover: $tertiary; // top border on hover
+$header-icon-color-hover: $tertiary; // nav icon on hover
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $tertiary; // button border and font color && hover bg color
+$btn-copy-color: $tertiary; // btn copy
+$btn-qr-color: $tertiary; // btn qr-code
+$btn-address-card-icon-color: $tertiary; // btn address color
+$btn-contract-color: $tertiary;
+
+//links & tile
+$tile-body-a-color: $tertiary;
+$tile-type-block-color: $tertiary;
+$tile-type-progress-bar-color: $tertiary;
+a.tile-title {
+  color: $tertiary !important;
+}
+
+// card
+$card-background-1: $tertiary;
+$card-tab-active: $tertiary;
+
+// ETC theme's idiosyncrasies
+.layout-container {
+  .navbar {
+    box-shadow: 0 0 30px 0 rgba(21, 53, 80, 0.12);
+  }
+
+  .dropdown-item:hover,
+  .dropdown-item.active,
+  .dropdown-item:focus {
+    background-color: rgba($tertiary, 0.1) !important;
+    color: $tertiary !important;
+  }
+
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+
+  .footer-logo {
+    filter: brightness(0) invert(1);
+  }
+}
+
+// Badges
+$badge-neutral-color: $tertiary;
+$badge-neutral-background-color: rgba($tertiary, 0.1);
+$api-text-monospace-color: $tertiary;
+
+// Dark theme
+$dark-primary: #8588ff;
+$dark-secondary: #4ad7a7;
+$dark-primary-alternate: #5b5ed8;
diff --git a/frontend-v2/src/stylesheets/theme/_ethereum_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_ethereum_variables-non-critical.scss
new file mode 100644
index 0000000..8414539
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ethereum_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #153550;
+$secondary: #49a2ee;
+$tertiary: #4ad7a7;
+$additional-font: #89cae6;
+
+$btn-line-color: $secondary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_ethereum_variables.scss b/frontend-v2/src/stylesheets/theme/_ethereum_variables.scss
new file mode 100644
index 0000000..9c8bca7
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ethereum_variables.scss
@@ -0,0 +1,81 @@
+// general
+$primary: #153550;
+$secondary: #49a2ee;
+$tertiary: #4ad7a7;
+$additional-font: #89cae6;
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: #89cae6;
+$footer-item-disc-color: $secondary;
+.footer-social-icons .footer-social-icon {
+  color: $secondary;
+}
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-banner-chart-legend-label-color: #89cae6;
+$dashboard-stats-item-label-color: #89cae6;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #1c476c; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12);
+} // header shadow
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $secondary; // button border and font color && hover bg color
+$btn-copy-color: $secondary; // btn copy
+$btn-qr-color: $secondary; // btn qr-code
+$btn-address-card-icon-color: $secondary; // btn address color
+$btn-contract-color: $secondary;
+
+//links & tile
+$tile-body-a-color: $secondary;
+$tile-type-block-color: $secondary;
+$tile-type-progress-bar-color: $secondary;
+a.tile-title {
+  color: $secondary !important;
+}
+
+// card
+$card-background-1: $secondary;
+$card-tab-active: $secondary;
+
+.layout-container {
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+}
+
+// Dark theme
+$dark-primary: #49a2ee;
+$dark-secondary: #4ad7a7;
+$dark-primary-alternate: #49a2ee;
+
+.dark-theme-applied {
+  .dashboard-banner-chart-legend
+    .dashboard-banner-chart-legend-item:nth-child(1)::before {
+    background-color: $dark-primary !important;
+  }
+  .dashboard-banner-chart-legend
+    .dashboard-banner-chart-legend-item:nth-child(2)::before {
+    background-color: $dark-secondary !important;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/theme/_expanse_variables.scss b/frontend-v2/src/stylesheets/theme/_expanse_variables.scss
new file mode 100644
index 0000000..e1f0a7f
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_expanse_variables.scss
@@ -0,0 +1,3 @@
+$primary: #1f4c55;
+$secondary: #e08e64;
+$tertiary: #333333;
diff --git a/frontend-v2/src/stylesheets/theme/_fonts.scss b/frontend-v2/src/stylesheets/theme/_fonts.scss
new file mode 100644
index 0000000..619472c
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_fonts.scss
@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Roboto");
diff --git a/frontend-v2/src/stylesheets/theme/_gochain_variables.scss b/frontend-v2/src/stylesheets/theme/_gochain_variables.scss
new file mode 100644
index 0000000..ebca5cc
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_gochain_variables.scss
@@ -0,0 +1,3 @@
+$primary: #586a8f;
+$secondary: #00bcd4;
+$tertiary: #6f87b2;
diff --git a/frontend-v2/src/stylesheets/theme/_goerli_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_goerli_variables-non-critical.scss
new file mode 100644
index 0000000..27b8a1a
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_goerli_variables-non-critical.scss
@@ -0,0 +1,8 @@
+// general
+$primary: #2b2b2b;
+$secondary: #eac247;
+$tertiary: #929292;
+$additional-font: #ffffff;
+$sub-accent-color: #a46f30;
+
+$btn-line-color: $sub-accent-color; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_goerli_variables.scss b/frontend-v2/src/stylesheets/theme/_goerli_variables.scss
new file mode 100644
index 0000000..abc588f
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_goerli_variables.scss
@@ -0,0 +1,92 @@
+// general
+$primary: #2b2b2b;
+$secondary: #eac247;
+$tertiary: #929292;
+$additional-font: #ffffff;
+$sub-accent-color: #a46f30;
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: #7e7e7e;
+$footer-item-disc-color: $secondary;
+.footer-logo {
+  filter: brightness(0) invert(1);
+}
+
+// dashboard
+$dashboard-line-color-price: $secondary;
+
+$dashboard-line-color-market: $tertiary;
+
+$dashboard-banner-chart-legend-label-color: $tertiary;
+$dashboard-stats-item-label-color: $tertiary;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #424242; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12);
+} // header shadow
+$dropdown-menu-item-hover-color: $sub-accent-color !default;
+$dropdown-menu-item-hover-background: rgba($sub-accent-color, 0.1) !default;
+$header-icon-color-hover: $sub-accent-color;
+$header-icon-border-color-hover: $sub-accent-color;
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $sub-accent-color; // button border and font color && hover bg color
+$btn-copy-color: $sub-accent-color; // btn copy
+$btn-qr-color: $sub-accent-color; // btn qr-code
+$btn-address-card-icon-color: $sub-accent-color; // btn address color
+$btn-contract-color: $sub-accent-color;
+
+//links & tile
+$tile-body-a-color: $sub-accent-color;
+$tile-type-block-color: $sub-accent-color;
+$tile-type-progress-bar-color: $sub-accent-color;
+a.tile-title {
+  color: $sub-accent-color !important;
+}
+
+// card
+$card-background-1: $sub-accent-color;
+$card-tab-active: $sub-accent-color;
+
+// dropdown
+.dropdown-item {
+  &:hover,
+  &:active,
+  &.active {
+    background-color: rgba($sub-accent-color, 0.1) !important;
+    color: $sub-accent-color !important;
+  }
+}
+
+.layout-container {
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+}
+
+// Badges
+$badge-neutral-color: $sub-accent-color;
+$badge-neutral-background-color: rgba($sub-accent-color, 0.1);
+$api-text-monospace-color: $sub-accent-color;
+
+// Dark theme
+$dark-primary: #e1995a;
+$dark-secondary: #aeaeae;
+$dark-primary-alternate: #e1995a;
diff --git a/frontend-v2/src/stylesheets/theme/_kovan_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_kovan_variables-non-critical.scss
new file mode 100644
index 0000000..e341904
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_kovan_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #101f25;
+$secondary: #35e3d8;
+$tertiary: #1f857f;
+$additional-font: #99fff9;
+
+$btn-line-color: $tertiary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_kovan_variables.scss b/frontend-v2/src/stylesheets/theme/_kovan_variables.scss
new file mode 100644
index 0000000..fb9ef70
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_kovan_variables.scss
@@ -0,0 +1,89 @@
+// general
+$primary: #101f25;
+$secondary: #35e3d8;
+$tertiary: #1f857f;
+$additional-font: #99fff9;
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: $additional-font;
+$footer-item-disc-color: $additional-font;
+.footer-logo {
+  filter: brightness(0) invert(1);
+}
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-banner-chart-legend-label-color: $additional-font;
+$dashboard-stats-item-label-color: $additional-font;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #1a323b; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12);
+} // header shadow
+$header-icon-border-color-hover: $tertiary;
+$header-icon-color-hover: $tertiary;
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $tertiary; // button border and font color && hover bg color
+$btn-copy-color: $tertiary; // btn copy
+$btn-qr-color: $tertiary; // btn qr-code
+$btn-address-card-icon-color: $tertiary; // btn address color
+$btn-contract-color: $tertiary;
+
+//links & tile
+$tile-body-a-color: $tertiary;
+$tile-type-block-color: $tertiary;
+$tile-type-progress-bar-color: $tertiary;
+a.tile-title {
+  color: $tertiary !important;
+}
+
+// card
+$card-background-1: $tertiary;
+$card-tab-active: $tertiary;
+
+// dropdown
+.dropdown-item {
+  &:hover,
+  &:active,
+  &.active {
+    background-color: rgba($tertiary, 0.1) !important;
+    color: $tertiary !important;
+  }
+}
+
+.layout-container {
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+}
+
+// Badges
+$badge-success-color: #15bba6;
+$badge-success-background-color: rgba(#15bba6, 0.1);
+$badge-neutral-color: $tertiary;
+$badge-neutral-background-color: rgba($tertiary, 0.1);
+$api-text-monospace-color: $tertiary;
+
+// Dark theme
+$dark-primary: #42e2d7;
+$dark-secondary: #1f857f;
+$dark-primary-alternate: #1f857f;
diff --git a/frontend-v2/src/stylesheets/theme/_lukso_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_lukso_variables-non-critical.scss
new file mode 100644
index 0000000..7b3b5d5
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_lukso_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #1d3154;
+$secondary: #fdcec4;
+$tertiary: #a96c55;
+$additional-font: #a1ded1;
+
+$btn-line-color: $primary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_lukso_variables.scss b/frontend-v2/src/stylesheets/theme/_lukso_variables.scss
new file mode 100644
index 0000000..3acba7b
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_lukso_variables.scss
@@ -0,0 +1,176 @@
+// general
+$primary: #1d3154;
+$secondary: #fdcec4;
+$tertiary: #a96c55;
+$additional-font: #a1ded1;
+
+$tile-body-a-color: $tertiary;
+$tile-type-block-color: $tertiary;
+$tile-type-progress-bar-color: $tertiary;
+a.tile-title {
+  color: $tertiary !important;
+}
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: $secondary;
+$footer-item-disc-color: $secondary;
+$footer-social-icon-color: $secondary;
+
+.footer-logo {
+  filter: brightness(0) invert(1);
+}
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-banner-chart-legend-label-color: $primary;
+$dashboard-stats-item-label-color: $primary;
+$dashboard-banner-chart-legend-value-color: $primary; // chart labels
+$dashboard-stats-item-value-color: $primary; // stat values
+
+$dashboard-stats-item-border-color: $primary; // stat border
+$dashboard-banner-gradient-start: $secondary; // gradient begin
+$dashboard-banner-gradient-end: $secondary; // gradient end
+$dashboard-banner-network-plain-container-background-color: $secondary; // stats bg
+
+// navigation
+$header-icon-border-color-hover: $primary; // top border on hover
+$header-icon-color-hover: $primary; // nav icon on hover
+$dropdown-menu-item-hover-color: $primary !default;
+$dropdown-menu-item-hover-background: rgba($primary, 0.1) !default;
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $primary; // button border and font color && hover bg color
+$btn-copy-color: $primary; // btn copy
+$btn-qr-color: $primary; // btn qr-code
+$btn-address-card-icon-color: $primary; // btn address color
+
+// card
+$card-background-1: $primary;
+$card-tab-active: $primary;
+
+$dashboard-banner-network-stats-static-image: "/images/lukso_dashboard_image.png";
+
+// Custom home
+$dashboard-banner-network-plain-container-height: 150px;
+
+.layout-container {
+  .dashboard-banner-container {
+    height: auto !important;
+  }
+  .dashboard-banner-container::after {
+    display: none;
+  }
+
+  .dashboard-banner-network-graph {
+    display: none;
+  }
+
+  .dashboard-banner-network-plain-container {
+    background-color: transparent;
+    height: $dashboard-banner-network-plain-container-height;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    box-shadow: none;
+
+    @include media-breakpoint-down(lg) {
+      height: auto;
+      min-height: $dashboard-banner-network-plain-container-height;
+      padding-bottom: 0;
+      padding-top: 25px;
+    }
+
+    .dashboard-banner-network-stats {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      justify-content: flex-start;
+      width: 100%;
+
+      @include media-breakpoint-down(lg) {
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+
+      &::after {
+        background-color: transparent;
+        background-image: url($dashboard-banner-network-stats-static-image);
+        background-position: 50% 50%;
+        background-repeat: no-repeat;
+        background-size: contain;
+        bottom: auto;
+        content: "";
+        display: block;
+        flex-grow: 0;
+        flex-shrink: 0;
+        height: $dashboard-banner-network-plain-container-height;
+        margin: 0 0 0 auto;
+        order: 150;
+        width: 301px;
+        box-shadow: none;
+
+        @include media-breakpoint-down(lg) {
+          display: none;
+        }
+      }
+
+      .dashboard-banner-network-stats-item {
+        margin-right: 60px;
+
+        @include media-breakpoint-down(lg) {
+          flex-grow: 1;
+          flex-shrink: 1;
+          margin-right: 0;
+          margin-bottom: 25px;
+        }
+
+        @include media-breakpoint-down(sm) {
+          min-width: 50%;
+        }
+
+        &.dashboard-banner-network-stats-item-1 {
+          order: 1;
+        }
+        &.dashboard-banner-network-stats-item-2 {
+          order: 2;
+        }
+        &.dashboard-banner-network-stats-item-3 {
+          order: 4;
+          margin-right: 0;
+        }
+        &.dashboard-banner-network-stats-item-4 {
+          order: 3;
+        }
+      }
+    }
+    &:after {
+      box-shadow: none;
+    }
+  }
+}
+
+// Badges
+$badge-neutral-color: $tertiary;
+$badge-neutral-background-color: rgba($tertiary, 0.1);
+$api-text-monospace-color: $tertiary;
+
+// Dark theme
+$dark-primary: #fdcec4;
+$dark-secondary: #a96c55;
+$dark-primary-alternate: #a96c55;
+
+.dark-theme-applied {
+  .dashboard-banner-network-stats-value {
+    color: $dark-primary !important;
+  }
+  .layout-container .dashboard-banner-container {
+    background-color: #282945 !important;
+  }
+  .dashboard-banner-network-plain-container::after {
+    box-shadow: none !important;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/theme/_musicoin_variables.scss b/frontend-v2/src/stylesheets/theme/_musicoin_variables.scss
new file mode 100644
index 0000000..65013a7
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_musicoin_variables.scss
@@ -0,0 +1,3 @@
+$primary: #171717;
+$secondary: #ff9000;
+$tertiary: #727272;
diff --git a/frontend-v2/src/stylesheets/theme/_neutral_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_neutral_variables-non-critical.scss
new file mode 100644
index 0000000..82825da
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_neutral_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #5c34a2;
+$secondary: #87e1a9;
+$tertiary: #bf9cff;
+$additional-font: #fff;
+
+$btn-line-color: $primary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_neutral_variables.scss b/frontend-v2/src/stylesheets/theme/_neutral_variables.scss
new file mode 100644
index 0000000..bc622f2
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_neutral_variables.scss
@@ -0,0 +1,82 @@
+// general
+$primary: #5c34a2;
+$secondary: #87e1a9;
+$tertiary: #bf9cff;
+$additional-font: #fff;
+
+// footer
+$footer-background-color: #3c226a;
+$footer-title-color: #fff;
+$footer-text-color: #bda6e7;
+$footer-item-disc-color: $secondary;
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-banner-chart-legend-label-color: #dcc8ff;
+$dashboard-stats-item-label-color: $dashboard-banner-chart-legend-label-color;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #8258cd; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12);
+} // header shadow
+$dropdown-menu-item-hover-color: $primary !default;
+$dropdown-menu-item-hover-background: rgba($primary, 0.1) !default;
+$header-icon-color-hover: $primary;
+$header-icon-border-color-hover: $primary;
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $primary; // button border and font color && hover bg color
+$btn-copy-color: $primary; // btn copy
+$btn-qr-color: $primary; // btn qr-code
+$btn-address-card-icon-color: $primary; // btn address color
+
+//links & tile
+$tile-body-a-color: $primary;
+$tile-type-block-color: $primary;
+$tile-type-progress-bar-color: $primary;
+a.tile-title {
+  color: $primary !important;
+}
+
+// card
+$card-background-1: $primary;
+$card-tab-active: $primary;
+
+.layout-container {
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+}
+
+// Badges
+$badge-neutral-color: $primary;
+$badge-neutral-background-color: rgba($primary, 0.1);
+$api-text-monospace-color: $primary;
+
+// Tokens dropdown
+.token-balance-dropdown[aria-labelledby="dropdown-tokens"] {
+  .dropdown-items .dropdown-item:hover {
+    color: $primary !important;
+  }
+}
+
+// Dark theme
+$dark-primary: #9b62ff;
+$dark-secondary: #87e1a9;
+$dark-primary-alternate: #7e50d0;
diff --git a/frontend-v2/src/stylesheets/theme/_pirl_variables.scss b/frontend-v2/src/stylesheets/theme/_pirl_variables.scss
new file mode 100644
index 0000000..8f57f79
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_pirl_variables.scss
@@ -0,0 +1,8 @@
+$primary: #343434;
+$secondary: #a2d729;
+$tertiary: #7f7f7f;
+
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: #fff;
+$footer-item-disc-color: $secondary;
diff --git a/frontend-v2/src/stylesheets/theme/_poa_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_poa_variables-non-critical.scss
new file mode 100644
index 0000000..82825da
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_poa_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #5c34a2;
+$secondary: #87e1a9;
+$tertiary: #bf9cff;
+$additional-font: #fff;
+
+$btn-line-color: $primary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_poa_variables.scss b/frontend-v2/src/stylesheets/theme/_poa_variables.scss
new file mode 100644
index 0000000..5c6bd1a
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_poa_variables.scss
@@ -0,0 +1,86 @@
+// general
+$primary: #5c34a2;
+$secondary: #87e1a9;
+$tertiary: #bf9cff;
+$additional-font: #fff;
+
+// footer
+$footer-background-color: #3c226a;
+$footer-title-color: #fff;
+$footer-text-color: #bda6e7;
+$footer-item-disc-color: $secondary;
+.footer-logo {
+  filter: brightness(0) invert(1);
+}
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-banner-chart-legend-label-color: #dcc8ff;
+$dashboard-stats-item-label-color: $dashboard-banner-chart-legend-label-color;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #8258cd; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12);
+} // header shadow
+$dropdown-menu-item-hover-color: $primary !default;
+$dropdown-menu-item-hover-background: rgba($primary, 0.1) !default;
+$header-icon-color-hover: $primary;
+$header-icon-border-color-hover: $primary;
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $primary; // button border and font color && hover bg color
+$btn-copy-color: $primary; // btn copy
+$btn-qr-color: $primary; // btn qr-code
+$btn-address-card-icon-color: $primary; // btn address color
+$btn-contract-color: $primary;
+
+//links & tile
+$tile-body-a-color: $primary;
+$tile-type-block-color: $primary;
+$tile-type-progress-bar-color: $primary;
+a.tile-title {
+  color: $primary !important;
+}
+
+// card
+$card-background-1: $primary;
+$card-tab-active: $primary;
+
+.layout-container {
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+}
+
+// Badges
+$badge-neutral-color: $primary;
+$badge-neutral-background-color: rgba($primary, 0.1);
+$api-text-monospace-color: $primary;
+
+// Tokens dropdown
+.token-balance-dropdown[aria-labelledby="dropdown-tokens"] {
+  .dropdown-items .dropdown-item:hover {
+    color: $primary !important;
+  }
+}
+
+// Dark theme
+$dark-primary: #9b62ff;
+$dark-secondary: #87e1a9;
+$dark-primary-alternate: #7e50d0;
diff --git a/frontend-v2/src/stylesheets/theme/_rinkeby_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_rinkeby_variables-non-critical.scss
new file mode 100644
index 0000000..80a5212
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_rinkeby_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #153550;
+$secondary: #38a9f5;
+$tertiary: #76f1ff;
+$additional-font: #89cae6;
+
+$btn-line-color: $secondary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_rinkeby_variables.scss b/frontend-v2/src/stylesheets/theme/_rinkeby_variables.scss
new file mode 100644
index 0000000..8ffc618
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_rinkeby_variables.scss
@@ -0,0 +1,73 @@
+// general
+$primary: #153550;
+$secondary: #38a9f5;
+$tertiary: #76f1ff;
+$additional-font: #89cae6;
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: #89cae6;
+$footer-item-disc-color: $secondary;
+.footer-logo {
+  filter: brightness(0) invert(1);
+}
+.footer-social-icons .footer-social-icon {
+  color: $secondary;
+}
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-banner-chart-legend-label-color: #89cae6;
+$dashboard-stats-item-label-color: #89cae6;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $tertiary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #1c476c; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12);
+} // header shadow
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $secondary; // button border and font color && hover bg color
+$btn-copy-color: $secondary; // btn copy
+$btn-qr-color: $secondary; // btn qr-code
+$btn-address-card-icon-color: $secondary; // btn address color
+$btn-contract-color: $secondary;
+
+//links & tile
+$tile-body-a-color: $secondary;
+$tile-type-block-color: $secondary;
+$tile-type-progress-bar-color: $secondary;
+a.tile-title {
+  color: $secondary !important;
+}
+
+// card
+$card-background-1: $secondary;
+$card-tab-active: $secondary;
+
+.layout-container {
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+}
+
+// Dark theme
+$dark-primary: #38a9f5;
+$dark-secondary: #76f1ff;
+$dark-primary-alternate: #38a9f5;
diff --git a/frontend-v2/src/stylesheets/theme/_ropsten_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_ropsten_variables-non-critical.scss
new file mode 100644
index 0000000..80a5212
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ropsten_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #153550;
+$secondary: #38a9f5;
+$tertiary: #76f1ff;
+$additional-font: #89cae6;
+
+$btn-line-color: $secondary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_ropsten_variables.scss b/frontend-v2/src/stylesheets/theme/_ropsten_variables.scss
new file mode 100644
index 0000000..8ffc618
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_ropsten_variables.scss
@@ -0,0 +1,73 @@
+// general
+$primary: #153550;
+$secondary: #38a9f5;
+$tertiary: #76f1ff;
+$additional-font: #89cae6;
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: #89cae6;
+$footer-item-disc-color: $secondary;
+.footer-logo {
+  filter: brightness(0) invert(1);
+}
+.footer-social-icons .footer-social-icon {
+  color: $secondary;
+}
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-banner-chart-legend-label-color: #89cae6;
+$dashboard-stats-item-label-color: #89cae6;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $tertiary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #1c476c; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12);
+} // header shadow
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $secondary; // button border and font color && hover bg color
+$btn-copy-color: $secondary; // btn copy
+$btn-qr-color: $secondary; // btn qr-code
+$btn-address-card-icon-color: $secondary; // btn address color
+$btn-contract-color: $secondary;
+
+//links & tile
+$tile-body-a-color: $secondary;
+$tile-type-block-color: $secondary;
+$tile-type-progress-bar-color: $secondary;
+a.tile-title {
+  color: $secondary !important;
+}
+
+// card
+$card-background-1: $secondary;
+$card-tab-active: $secondary;
+
+.layout-container {
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+}
+
+// Dark theme
+$dark-primary: #38a9f5;
+$dark-secondary: #76f1ff;
+$dark-primary-alternate: #38a9f5;
diff --git a/frontend-v2/src/stylesheets/theme/_rsk_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_rsk_variables-non-critical.scss
new file mode 100644
index 0000000..9591135
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_rsk_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #101f25;
+$secondary: #27ac8d;
+$tertiary: #e39a54;
+$additional-font: #a1ded1;
+
+$btn-line-color: $secondary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_rsk_variables.scss b/frontend-v2/src/stylesheets/theme/_rsk_variables.scss
new file mode 100644
index 0000000..4a28378
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_rsk_variables.scss
@@ -0,0 +1,75 @@
+// general
+$primary: #101f25;
+$secondary: #27ac8d;
+$tertiary: #e39a54;
+$additional-font: #a1ded1;
+
+$tile-body-a-color: $secondary;
+$tile-type-block-color: $secondary;
+$tile-type-progress-bar-color: $secondary;
+a.tile-title {
+  color: $secondary !important;
+}
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: $additional-font;
+$footer-item-disc-color: $secondary;
+$footer-social-icon-color: $secondary;
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-banner-chart-legend-label-color: $additional-font;
+$dashboard-stats-item-label-color: $additional-font;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+$dashboard-banner-gradient-start: $primary; // gradient begin
+$dashboard-banner-gradient-end: #193039; // gradient end
+$dashboard-banner-network-plain-container-background-color: #1a323b; // stats bg
+
+// navigation
+$header-icon-border-color-hover: $secondary; // top border on hover
+$header-icon-color-hover: $secondary; // nav icon on hover
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $secondary; // button border and font color && hover bg color
+$btn-copy-color: $secondary; // btn copy
+$btn-qr-color: $secondary; // btn qr-code
+$btn-address-card-icon-color: $secondary; // btn address color
+$btn-contract-color: $secondary;
+// card
+$card-background-1: $secondary;
+$card-tab-active: $secondary;
+
+// ETC theme's idiosyncrasies
+.layout-container {
+  .navbar {
+    box-shadow: 0 0 30px 0 rgba(21, 53, 80, 0.12);
+  }
+
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+
+  .footer-logo {
+    filter: brightness(0) invert(1);
+  }
+}
+
+// Badges
+$badge-neutral-color: #1a323b;
+$badge-neutral-background-color: rgba(#1a323b, 0.1);
+
+// Dark theme
+$dark-primary: #38c5a4;
+$dark-secondary: #e39a54;
+$dark-primary-alternate: #30ab8d;
diff --git a/frontend-v2/src/stylesheets/theme/_social_variables.scss b/frontend-v2/src/stylesheets/theme/_social_variables.scss
new file mode 100644
index 0000000..3d878dc
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_social_variables.scss
@@ -0,0 +1,8 @@
+$primary: #a375ff;
+$secondary: #00f0bd;
+$tertiary: #53a9ff;
+
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: #fff;
+$footer-item-disc-color: $secondary;
diff --git a/frontend-v2/src/stylesheets/theme/_sokol_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_sokol_variables-non-critical.scss
new file mode 100644
index 0000000..0bc421d
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_sokol_variables-non-critical.scss
@@ -0,0 +1,8 @@
+// general
+$primary: #093731;
+$secondary: #40bfb2;
+$tertiary: #25c9ff;
+$additional-font: #93e8dd;
+$sub-accent-color: #1c9f90;
+
+$btn-line-color: $sub-accent-color; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_sokol_variables.scss b/frontend-v2/src/stylesheets/theme/_sokol_variables.scss
new file mode 100644
index 0000000..6c33e8b
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_sokol_variables.scss
@@ -0,0 +1,86 @@
+// general
+$primary: #093731;
+$secondary: #40bfb2;
+$tertiary: #25c9ff;
+$additional-font: #93e8dd;
+$sub-accent-color: #1c9f90;
+
+// footer
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: $additional-font;
+$footer-item-disc-color: $additional-font;
+.footer-logo {
+  filter: brightness(0) invert(1);
+}
+
+// dashboard
+$dashboard-line-color-price: $tertiary; // price left border
+
+$dashboard-line-color-price: $secondary;
+
+$dashboard-line-color-market: $tertiary;
+
+$dashboard-banner-chart-legend-label-color: $additional-font;
+$dashboard-stats-item-label-color: $additional-font;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: lighten($primary, 5); // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #0e534a; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12);
+} // header shadow
+$dropdown-menu-item-hover-color: $sub-accent-color !default;
+$dropdown-menu-item-hover-background: rgba($sub-accent-color, 0.1) !default;
+$header-icon-color-hover: $sub-accent-color;
+$header-icon-border-color-hover: $sub-accent-color;
+
+// Logo Size
+$footer-logo-height: 20px;
+$navbar-logo-height: 20px;
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $sub-accent-color; // button border and font color && hover bg color
+$btn-copy-color: $sub-accent-color; // btn copy
+$btn-qr-color: $sub-accent-color; // btn qr-code
+$btn-address-card-icon-color: $sub-accent-color; // btn address color
+$btn-contract-color: $sub-accent-color;
+//links & tile
+$tile-body-a-color: $sub-accent-color;
+$tile-type-block-color: $sub-accent-color;
+$tile-type-progress-bar-color: $sub-accent-color;
+a.tile-title {
+  color: $sub-accent-color !important;
+}
+
+// card
+$card-background-1: $sub-accent-color;
+$card-tab-active: $sub-accent-color;
+
+.layout-container {
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+}
+
+// Badges
+$badge-neutral-color: $tertiary;
+$badge-neutral-background-color: rgba($tertiary, 0.1);
+
+// Dark theme
+$dark-primary: #40bfb2;
+$dark-secondary: #25c9ff;
+$dark-primary-alternate: #1c9f90;
diff --git a/frontend-v2/src/stylesheets/theme/_tobalaba_variables.scss b/frontend-v2/src/stylesheets/theme/_tobalaba_variables.scss
new file mode 100644
index 0000000..aa7fe70
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_tobalaba_variables.scss
@@ -0,0 +1,8 @@
+$primary: #633d99;
+$secondary: #6cc04a;
+$tertiary: #a566ff;
+
+$footer-background-color: $primary;
+$footer-title-color: #fff;
+$footer-text-color: #fff;
+$footer-item-disc-color: $secondary;
diff --git a/frontend-v2/src/stylesheets/theme/_tomochain_variables.scss b/frontend-v2/src/stylesheets/theme/_tomochain_variables.scss
new file mode 100644
index 0000000..d3c3a16
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_tomochain_variables.scss
@@ -0,0 +1,4 @@
+$primary: #211841;
+$secondary: #f16950;
+$tertiary: #8b84bc;
+$btn-contract-color: $primary;
diff --git a/frontend-v2/src/stylesheets/theme/_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_variables-non-critical.scss
new file mode 100644
index 0000000..8ff5054
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_variables-non-critical.scss
@@ -0,0 +1,23 @@
+@import "base_variables";
+@import "neutral_variables-non-critical";
+// @import "xusdt_variables-non-critical";
+// @import "dai_variables-non-critical";
+// @import "ethereum_classic_variables-non-critical";
+// @import "ethereum_variables-non-critical";
+// @import "ether1_variables-non-critical";
+// @import "expanse_variables-non-critical";
+// @import "gochain_variables-non-critical";
+// @import "goerli_variables-non-critical";
+// @import "kovan_variables-non-critical";
+// @import "lukso_variables-non-critical";
+// @import "musicoin_variables-non-critical";
+// @import "pirl_variables-non-critical";
+// @import "poa_variables-non-critical";
+// @import "rinkeby_variables-non-critical";
+// @import "ropsten_variables-non-critical";
+// @import "social_variables-non-critical";
+// @import "sokol_variables-non-critical";
+// @import "tobalaba_variables-non-critical";
+// @import "tomochain_variables-non-critical";
+// @import "rsk_variables-non-critical";
+// @import "ethercore_variables-non-critical";
diff --git a/frontend-v2/src/stylesheets/theme/_variables.scss b/frontend-v2/src/stylesheets/theme/_variables.scss
new file mode 100644
index 0000000..c42c7a2
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_variables.scss
@@ -0,0 +1,32 @@
+@import "base_variables";
+@import "neutral_variables";
+// @import "xusdt_variables";
+// @import "dai_variables";
+// @import "ethereum_classic_variables";
+@import "ethereum_variables";
+// @import "ether1_variables";
+// @import "expanse_variables";
+// @import "gochain_variables";
+// @import "goerli_variables";
+// @import "kovan_variables";
+// @import "lukso_variables";
+// @import "musicoin_variables";
+// @import "pirl_variables";
+// @import "poa_variables";
+// @import "rinkeby_variables";
+// @import "ropsten_variables";
+// @import "social_variables";
+// @import "sokol_variables";
+// @import "tobalaba_variables";
+// @import "tomochain_variables";
+// @import "rsk_variables";
+// @import "ethercore_variables";
+
+// responsive breakpoints
+$breakpoint-xs: 320px;
+$breakpoint-sm: 480px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 992px;
+$breakpoint-xl: 1024px;
+$breakpoint-xxl: 1280px;
+$breakpoint-xxxl: 1366px;
diff --git a/frontend-v2/src/stylesheets/theme/_wanchain_variables.scss b/frontend-v2/src/stylesheets/theme/_wanchain_variables.scss
new file mode 100644
index 0000000..f46a8da
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_wanchain_variables.scss
@@ -0,0 +1,3 @@
+$primary: #3680f8;
+$secondary: #2ccfc5;
+$tertiary: #7289af;
diff --git a/frontend-v2/src/stylesheets/theme/_xusdt_variables-non-critical.scss b/frontend-v2/src/stylesheets/theme/_xusdt_variables-non-critical.scss
new file mode 100644
index 0000000..c0c9d6e
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_xusdt_variables-non-critical.scss
@@ -0,0 +1,7 @@
+// general
+$primary: #2b9f7a;
+$secondary: #20745a;
+$tertiary: #fff;
+$additional-font: #fff;
+
+$btn-line-color: $secondary; // button border and font color && hover bg color
diff --git a/frontend-v2/src/stylesheets/theme/_xusdt_variables.scss b/frontend-v2/src/stylesheets/theme/_xusdt_variables.scss
new file mode 100644
index 0000000..cd4ffc5
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/_xusdt_variables.scss
@@ -0,0 +1,107 @@
+// general
+$primary: #2b9f7a;
+$secondary: #20745a;
+$tertiary: #fff;
+$additional-font: #fff;
+
+$tile-body-a-color: $primary;
+$tile-type-block-color: $primary;
+$tile-type-progress-bar-color: $primary;
+a.tile-title {
+  color: $primary !important;
+}
+
+// footer
+$footer-background-color: #282d31;
+$footer-title-color: #fff;
+$footer-text-color: $additional-font;
+$footer-item-disc-color: $secondary;
+$footer-social-icon-color: $secondary;
+
+// dashboard
+$dashboard-line-color-price: #fff; // price left border
+
+$dashboard-banner-chart-legend-label-color: #fff;
+$dashboard-stats-item-label-color: $dashboard-banner-chart-legend-label-color;
+$dashboard-banner-chart-legend-value-color: #fff; // chart labels
+$dashboard-stats-item-value-color: #fff; // stat values
+
+$dashboard-stats-item-border-color: $secondary; // stat border
+
+$dashboard-banner-gradient-start: $primary; // gradient begin
+
+$dashboard-banner-gradient-end: #289371; // gradient end
+
+$dashboard-banner-network-plain-container-background-color: #2ea780; // stats bg
+
+// navigation
+.navbar {
+  box-shadow: 0px 0px 30px 0px rgba(21, 53, 80, 0.12);
+} // header shadow
+$dropdown-menu-item-hover-color: $primary !default;
+$dropdown-menu-item-hover-background: rgba($primary, 0.1) !default;
+$header-icon-color-hover: $primary;
+$header-icon-border-color-hover: $primary;
+
+// buttons
+$btn-line-bg: #fff; // button bg
+$btn-line-color: $primary; // button border and font color && hover bg color
+$btn-copy-color: $primary; // btn copy
+$btn-qr-color: $primary; // btn qr-code
+$btn-address-card-icon-color: $primary; // btn address color
+
+//links & tile
+$tile-body-a-color: $primary;
+$tile-type-block-color: $primary;
+$tile-type-progress-bar-color: $primary;
+a.tile-title {
+  color: $primary !important;
+}
+
+// card
+$card-background-1: $primary;
+$card-tab-active: $primary;
+
+.layout-container {
+  .dashboard-banner-container {
+    background-image: linear-gradient(
+      to bottom,
+      $dashboard-banner-gradient-start,
+      $dashboard-banner-gradient-end
+    );
+  }
+}
+
+// Badges
+$badge-neutral-color: $primary;
+$badge-neutral-background-color: rgba($primary, 0.1);
+$api-text-monospace-color: $primary;
+
+// Tokens dropdown
+.token-balance-dropdown[aria-labelledby="dropdown-tokens"] {
+  .dropdown-items .dropdown-item:hover {
+    color: $primary !important;
+  }
+}
+
+// Dark theme
+$dark-primary: #2b9f7a;
+$dark-secondary: #20745a;
+$dark-primary-alternate: #2b9f7a;
+
+.dark-theme-applied
+  .dashboard-banner-chart-legend
+  .dashboard-banner-chart-legend-item:nth-child(1)::before {
+  background-color: white !important;
+}
+
+.dark-theme-applied
+  .dashboard-banner-chart-legend
+  .dashboard-banner-chart-legend-item:nth-child(2)::before {
+  background-color: $primary !important;
+}
+
+.dark-theme-applied .tile .tile-body a,
+.dark-theme-applied .tile span[data-address-hash] {
+  color: #2b9f7a;
+}
diff --git a/frontend-v2/src/stylesheets/theme/custom_contracts/_circles-theme.scss b/frontend-v2/src/stylesheets/theme/custom_contracts/_circles-theme.scss
new file mode 100644
index 0000000..8946a1e
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/custom_contracts/_circles-theme.scss
@@ -0,0 +1,702 @@
+$c-primary: #7d2244;
+$c-secondary: #62004a;
+$c-tertiary: #ff8f4b;
+$c-quarternary: #d79fc9;
+
+$border: #e3e5eb;
+$text: #333;
+$text2: #a4a9b4;
+
+$c-dark-color: #313355;
+$c-dark-color-secondary: #3f426c;
+$c-dark-text-color: #8a8dba;
+
+.circles-theme-applied {
+  .navbar.navbar-primary {
+    .navbar-nav {
+      .nav-link {
+        &:before {
+          background-color: $c-secondary;
+        }
+
+        &.active,
+        &:hover,
+        &.active-icon {
+          color: $header-links-color-active;
+          .nav-link-icon {
+            path {
+              fill: $c-secondary;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // footer
+  .footer {
+    background: $c-secondary;
+    color: $c-quarternary;
+    background-image: url(/images/custom-themes/circles/footer_logo.svg) !important;
+    background-position: bottom 0px right 30px;
+    background-repeat: no-repeat;
+  }
+  .footer-social-icon {
+    color: $c-tertiary !important;
+  }
+  .footer-link {
+    color: $c-quarternary;
+  }
+  .footer-social-icon:hover,
+  .footer-link:hover {
+    color: #fff;
+  }
+  .footer-list ul li::before {
+    background-color: $c-tertiary;
+  }
+
+  // main container, layout, cards
+
+  .card-title {
+    @media screen and (max-width: 768px) {
+      margin-top: 20px;
+    }
+  }
+
+  .card-header {
+    border-bottom-color: darken($text2, 30);
+  }
+
+  .card-tabs {
+    border-bottom-color: #fff;
+  }
+
+  .card-tab {
+    color: $text;
+    background-color: transparent;
+    &:hover:not(.active) {
+      background-color: rgba($c-primary, 0.15);
+      color: $c-primary;
+    }
+    &.active {
+      background-color: $c-primary;
+      color: #fff !important;
+    }
+  }
+
+  .check_dark_forest_icon {
+    margin-left: 10px;
+  }
+
+  .card-tab .check_dark_forest_icon {
+    svg path {
+      fill: $c-primary;
+    }
+  }
+
+  .card-tab.active .check_dark_forest_icon {
+    svg path {
+      fill: $c-secondary;
+    }
+  }
+
+  .card-background-1 {
+    background-color: $c-tertiary;
+    background-image: url(/images/custom-themes/circles/balance.svg);
+    background-repeat: no-repeat;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+  }
+
+  // Components
+  a {
+    color: $c-primary;
+  }
+
+  a.tile-title {
+    color: $c-primary !important;
+  }
+
+  .tile {
+    border-top-color: $border;
+    border-bottom-color: $border;
+    border-right-color: $border;
+    color: $text2;
+    &:not([class^="tile tile-type"]) {
+      border-left-color: $border;
+    }
+    &.tile-type-coin-balance {
+      border-left-color: $border;
+    }
+    .tile-transaction-type-block {
+      background-color: transparent;
+    }
+  }
+  .tile-bottom-contents {
+    background-color: $c-primary;
+  }
+  .fade-up-blocks-chain .tile-type-block-animation {
+    background-color: $c-primary;
+    border-top-color: $c-primary;
+    border-right-color: $c-primary;
+    border-bottom-color: $c-primary;
+  }
+  .fade-up-blocks-chain .tile-type-block-animation:after {
+    background-color: $c-primary;
+  }
+  .cube-animation-title {
+    color: $text2;
+  }
+  .tile .tile-body a,
+  .tile span[data-address-hash] {
+    color: $c-primary;
+  }
+  .fade-up-blocks-chain .tile-type-block-animation .tile-type-line-up {
+    background-color: $c-primary;
+  }
+  .tile.tile-type-block {
+    border-left-color: $c-primary;
+  }
+  .tile.tile-type-block .tile-status-label {
+    color: $c-primary;
+  }
+  .tile.tile-type-block .tile-transaction-type-block {
+    border-right-color: $c-primary;
+    border-top-color: $c-primary;
+    border-bottom-color: $c-primary;
+  }
+  .tile .progress {
+    background-color: rgba(#fff, 0.2);
+  }
+  .tile .progress .progress-bar {
+    background-color: $c-primary;
+  }
+
+  // btns
+
+  .btn-line {
+    background-color: transparent;
+    border-color: $c-primary;
+    color: $c-primary;
+    &:hover {
+      border-color: $c-primary;
+      background-color: $c-primary;
+      color: #fff;
+    }
+  }
+
+  .btn-copy-icon {
+    content: url(/images/custom-themes/circles/copy-circles.svg);
+  }
+
+  .btn-qr-icon {
+    content: url(/images/custom-themes/circles/qr-circles.svg);
+  }
+
+  .btn-copy-icon,
+  .btn-qr-icon,
+  .btn-address-card-icon .btn-contract-icon {
+    border: none;
+    border-color: $c-primary;
+    &:hover {
+      background-color: rgba(125, 34, 68, 0.4);
+    }
+  }
+
+  // pagination
+  .pagination-container .pagination .page-link {
+    padding: 15px;
+    background-color: #fff;
+    &:not(.no-hover):hover {
+      color: #fff;
+      border: 1px solid #fff;
+      background-color: $c-primary;
+      path {
+        fill: #fff;
+      }
+    }
+    &[disabled] {
+      color: $text2;
+      border-color: $border;
+      background-color: #fff;
+    }
+    .no-hover {
+      background-color: #fff;
+      border-color: $border;
+      color: $text2 !important;
+    }
+  }
+
+  // dropdown
+  .dropdown-item.active {
+    background-color: $c-secondary;
+  }
+  .btn-dropdown-line {
+    border-color: $border;
+    border-radius: 2px;
+    height: 32px;
+  }
+
+  // download csv button
+  .download-all-transactions .download-all-transactions-link svg path {
+    fill: $c-primary;
+  }
+
+  //tooltips
+  .tooltip .arrow:before {
+    border-top-color: $c-primary;
+    border-bottom-color: $c-primary;
+  }
+  .tooltip > .tooltip-inner {
+    background-color: $c-primary;
+  }
+
+  //network select
+  .network-selector-overlay {
+    background-color: rgba($c-primary, 0.9);
+  }
+  .network-selector {
+    background-color: $c-primary;
+  }
+  .network-selector-text {
+    color: $text2;
+  }
+  .network-selector-close path {
+    fill: #fff;
+  }
+  .network-selector-search-container {
+    background-color: $c-primary;
+  }
+  .network-selector-search-container path {
+    fill: $text2;
+  }
+  .network-selector-search-input {
+    color: #fff !important;
+    &::placeholder {
+      color: $text2;
+    }
+  }
+  .network-selector-tab {
+    color: $text2;
+    &:hover,
+    &.active {
+      color: #fff;
+    }
+    &.active {
+      &:after {
+        background-color: $c-primary;
+      }
+    }
+  }
+  .network-selector-item,
+  .network-selector-tabs-container {
+    border-bottom-color: darken($text2, 30);
+  }
+  .network-selector-item-title {
+    color: #fff;
+  }
+  .network-selector-item-type {
+    color: $text2;
+  }
+  .radio .radio-icon {
+    border-color: $text2;
+  }
+  .network-selector-item-url:hover .network-selector-item-type {
+    color: #fff;
+  }
+
+  //coin dropdown
+  .token-balance-dropdown[aria-labelledby="dropdown-tokens"]
+    .dropdown-items
+    .dropdown-item:hover {
+    color: #fff !important;
+  }
+
+  // logs search
+  .logs-search-input,
+  .logs-search-btn,
+  .logs-search-btn-cancel {
+    background-color: #fff;
+    border-color: $border;
+    height: 32px;
+  }
+
+  .logs-search-btn {
+    border: none;
+    background-color: $c-primary;
+    color: #fff;
+
+    &:hover {
+      background-color: $c-primary;
+      color: #fff;
+    }
+  }
+
+  .logs-search-input {
+    &::placeholder {
+      color: $text2;
+    }
+  }
+
+  // info allert
+  .alert-info {
+    color: #fff;
+    background-color: $c-primary;
+    border-color: $border;
+  }
+
+  // Content loading placeholders
+  .tile-loader,
+  .table-content-loader {
+    background-color: rgba(125, 34, 68, 0.4) !important;
+    &:before {
+      background: linear-gradient(
+        to right,
+        rgba(125, 34, 68, 0.2) 2%,
+        lighten(rgba(125, 34, 68, 0.4), 3) 18%,
+        rgba(125, 34, 68, 0.6) 33%
+      );
+    }
+  }
+
+  // Common Buttons
+  .btn-secondary,
+  .button-secondary {
+    background-color: transparent;
+    border-color: $c-primary;
+    color: $c-primary;
+    &:hover {
+      background-color: $c-primary;
+      border-color: $c-primary;
+      color: #fff;
+    }
+  }
+
+  .btn-no-border:hover {
+    background-color: $c-primary;
+  }
+
+  .overview-title-buttons {
+    margin-top: -76px;
+    @media (min-width: 768px) {
+      margin-top: -66px;
+    }
+  }
+
+  .overview-title-buttons.token {
+    @media (max-width: 768px) {
+      margin-top: 0px;
+    }
+  }
+
+  #qrModal {
+    .modal-content {
+      .btn-primary {
+        background-color: $c-primary;
+        border-color: $c-primary;
+        &:focus,
+        &:hover {
+          background-color: $c-primary;
+          border-color: $c-primary;
+        }
+      }
+    }
+  }
+
+  // alerts
+  .alert-link {
+    color: $text2;
+  }
+
+  .alert-danger {
+    background-color: $c-primary;
+    border-color: $c-primary;
+    .alert-link {
+      color: #fff;
+    }
+  }
+
+  .tile .alert {
+    background: rgba(#000, 0.1);
+  }
+
+  // primary buttons
+  .btn-full-primary,
+  .button-primary {
+    background: $c-primary;
+    border-color: $c-primary;
+    color: #fff;
+    &:hover {
+      background: darken($c-primary, 6);
+      border-color: darken($c-primary, 6);
+      color: #fff;
+    }
+  }
+
+  .logo-text {
+    color: #fff;
+  }
+
+  .dropdown-item {
+    .external-link-icon {
+      path {
+        fill: #fff;
+      }
+    }
+
+    & {
+      &.active,
+      &:hover,
+      &:focus {
+        .external-link-icon {
+          path {
+            fill: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  .tooltip-inversed-color {
+    .tooltip-inner {
+      background-color: $btn-line-color !important;
+      color: #fff !important;
+    }
+  }
+
+  .tooltip-inversed-color.bs-tooltip-top .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+    border-top-color: $btn-line-color !important;
+  }
+
+  .tooltip-inversed-color.bs-tooltip-right .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+    border-right-color: $btn-line-color !important;
+  }
+
+  .tooltip-inversed-color.bs-tooltip-bottom .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="bottom"]
+    .arrow::before {
+    border-bottom-color: $btn-line-color !important;
+  }
+
+  .tooltip-inversed-color.bs-tooltip-left .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+    border-left-color: $btn-line-color !important;
+  }
+
+  .active-dot-icon {
+    circle {
+      fill: $c-primary;
+    }
+  }
+
+  .tile.tile-type-coin-balance [data-balance-change-sign="Negative"] {
+    color: #e87293;
+  }
+
+  .tile.tile-type-coin-balance [data-balance-change-sign="Positive"] {
+    color: $c-primary;
+  }
+
+  ::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px $c-primary;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: $c-primary;
+  }
+
+  .custom-balance-icon {
+    background-image: url(/images/custom-themes/circles/balance.svg);
+    margin-right: 0px;
+    margin-left: auto;
+    max-width: 100%;
+  }
+
+  .custom-dapp-header-container {
+    display: flex;
+    margin-bottom: 30px;
+    @media screen and (max-width: 768px) {
+      display: inline;
+    }
+  }
+
+  .custom-dapp-header-description-container {
+    display: contents;
+  }
+
+  .custom-address-icon {
+    content: url(/images/custom-themes/circles/logo.svg);
+
+    @media screen and (max-width: 768px) {
+      margin-bottom: 20px;
+    }
+  }
+
+  .custom-address-details {
+    margin-top: 8px;
+    @media (min-width: 576px) {
+      margin-left: 0;
+    }
+    @media (min-width: 768px) {
+      margin-left: 20px;
+    }
+    @media (min-width: 992px) {
+      margin-left: 20px;
+    }
+    @media (min-width: 1200px) {
+      margin-left: 20px;
+    }
+    color: $text2;
+  }
+
+  .application-icon-link {
+    margin-left: auto;
+  }
+
+  .application-icon {
+    content: url(/images/custom-themes/circles/logo.svg);
+    &:hover {
+      background-color: rgba(125, 34, 68, 0.4);
+    }
+    @media screen and (max-width: 768px) {
+      float: right;
+    }
+  }
+
+  .csv-icon {
+    visibility: hidden;
+  }
+
+  .card-body {
+    a:not(.dropdown-item):not(.button):not([data-test="address_hash_link"]):not(
+        .alert-link
+      ):not([data-test="token_link"]):not(#dropdown-tokens):not(.btn-line):not(
+        .page-link
+      ) {
+      color: $c-primary;
+
+      &:hover {
+        color: $c-primary;
+      }
+    }
+  }
+
+  .form-control:focus {
+    border-color: $c-primary;
+  }
+}
+
+.circles-theme-applied .dropdown-item {
+  background-color: #fff !important;
+  color: $c-secondary !important;
+}
+
+.circles-theme-applied .dropdown-item.active:not(.header),
+.circles-theme-applied .dropdown-item:not(.header):hover,
+.circles-theme-applied .dropdown-item:not(.header):focus {
+  background-image: none;
+  width: 100%;
+  background-color: $c-secondary !important;
+  color: #fff !important;
+}
+
+.circles-theme-applied .dropdown-item.active.header,
+.circles-theme-applied .dropdown-item.header:hover,
+.circles-theme-applied .dropdown-item.header:focus {
+  background-color: $c-secondary !important;
+  color: #fff !important;
+}
+
+.circles-theme-applied.modal-open .modal {
+  background-color: rgba(125, 34, 68, 0.4) !important;
+}
+
+.circles-theme-applied.dark-theme-applied {
+  .card-tab {
+    color: #fff;
+  }
+
+  .card-tabs {
+    border-bottom-color: #3f426c;
+  }
+
+  .pagination-container .pagination .page-link {
+    color: $c-dark-text-color !important;
+    background-color: $c-dark-color;
+    &[disabled] {
+      border-color: $c-dark-color;
+    }
+    .no-hover {
+      border-color: $border;
+    }
+  }
+
+  .tile {
+    border-top-color: $c-dark-color;
+    border-bottom-color: $c-dark-color;
+    border-right-color: $c-dark-color;
+    &:not([class^="tile tile-type"]) {
+      border-left-color: $c-dark-color;
+    }
+    &.tile-type-coin-balance {
+      border-left-color: $c-dark-color;
+    }
+  }
+
+  .alert-info {
+    color: $c-dark-text-color;
+    border-color: $c-dark-color;
+  }
+
+  .btn-dropdown-line {
+    border-color: $c-dark-color;
+  }
+
+  .dropdown-item {
+    background-color: $c-dark-color !important;
+    color: #fff !important;
+  }
+
+  .dropdown-item.active:not(.header),
+  .dropdown-item:not(.header):hover,
+  .dropdown-item:not(.header):focus {
+    background-image: none;
+    width: 100%;
+    background-color: $c-dark-color-secondary !important;
+    color: #fff !important;
+  }
+
+  .dropdown-item.active.header,
+  .dropdown-item.header:hover,
+  .dropdown-item.header:focus {
+    background-color: $c-dark-color-secondary !important;
+    color: #fff !important;
+  }
+
+  .navbar.navbar-primary {
+    .navbar-nav {
+      .nav-link {
+        &.active,
+        &:hover,
+        &.active-icon {
+          color: $c-dark-text-color;
+        }
+      }
+    }
+  }
+
+  .logs-search-input,
+  .logs-search-btn,
+  .logs-search-btn-cancel {
+    background-color: $c-dark-color;
+    border-color: $c-dark-color;
+  }
+}
diff --git a/frontend-v2/src/stylesheets/theme/custom_contracts/_dark-forest-theme.scss b/frontend-v2/src/stylesheets/theme/custom_contracts/_dark-forest-theme.scss
new file mode 100644
index 0000000..9b6bb55
--- /dev/null
+++ b/frontend-v2/src/stylesheets/theme/custom_contracts/_dark-forest-theme.scss
@@ -0,0 +1,1094 @@
+$body-dark: #080808; // body background
+$dark-bg: #111111; // hero shade
+$dark-light-bg: $dark-bg; // pills bg shade
+$dark-light: $dark-light-bg; // tile light top share
+$labels-dark: #888888; // header nav, labels
+
+$dark-primary: #75f94d;
+$dark-secondary: $dark-primary;
+$dark-primary-alternate: $dark-primary;
+
+.dark-forest-theme-applied {
+  color: #ffffff;
+  background-color: $body-dark;
+
+  .dark-mode-changer--dark svg path {
+    fill: $dark-primary;
+  }
+
+  // navbar
+  .navbar.navbar-primary {
+    background-color: $dark-light-bg !important;
+  }
+  .navbar-brand .navbar-logo {
+    filter: brightness(0) invert(1);
+  }
+  .navbar.navbar-primary .navbar-nav .nav-link {
+    color: $labels-dark;
+    .nav-link-icon {
+      svg path {
+        fill: $labels-dark;
+      }
+    }
+    &.active,
+    &:hover {
+      .nav-link-icon {
+        svg path {
+          fill: $dark-primary;
+        }
+      }
+      @media (min-width: 992px) {
+        &:before {
+          background-color: $dark-primary;
+        }
+      }
+    }
+  }
+  .navbar.navbar-primary .form-control {
+    background-color: $dark-light-bg !important;
+    border-color: $dark-light-bg !important;
+    color: #fff;
+    &::placeholder {
+      color: $labels-dark;
+    }
+  }
+  .navbar.navbar-primary .navbar-toggler .navbar-toggler-icon {
+    filter: invert(1);
+  }
+
+  // footer
+  .footer {
+    background: $dark-light-bg;
+    color: $labels-dark;
+  }
+  .footer-social-icon {
+    color: $dark-primary !important;
+  }
+  .footer-link {
+    color: $labels-dark;
+  }
+  .footer-social-icon:hover,
+  .footer-link:hover {
+    color: #fff;
+  }
+  .footer-list ul li::before {
+    background-color: $dark-secondary;
+    border-radius: 0px;
+    height: 2px;
+    width: 10px;
+  }
+
+  // hero stats
+
+  .layout-container .dashboard-banner-container {
+    background-image: none;
+    background-color: $dark-bg;
+  }
+  .dashboard-banner-network-plain-container,
+  .dashboard-banner-network-plain-container::after {
+    background-color: $dark-light-bg;
+  }
+  .dashboard-banner-network-stats-label,
+  .dashboard-banner-chart-legend .dashboard-banner-chart-legend-label {
+    color: $labels-dark;
+  }
+  .dashboard-banner-chart-legend
+    .dashboard-banner-chart-legend-item:nth-child(1)::before {
+    background-color: $dark-primary;
+  }
+  .dashboard-banner-network-stats-item::before {
+    background-color: $dark-secondary;
+  }
+  .dashboard-banner-chart-legend
+    .dashboard-banner-chart-legend-item:nth-child(2)::before {
+    background-color: $dark-secondary;
+  }
+
+  // main container, layout, cards
+  .layout-container main {
+    background-color: $body-dark;
+  }
+
+  .card {
+    border-radius: 0px;
+    background-color: $dark-light-bg;
+    box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5);
+  }
+
+  .card-title {
+    @media screen and (max-width: 768px) {
+      margin-top: 20px;
+    }
+  }
+
+  .card-header {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+
+  .address-detail-hash-title {
+    color: #fff;
+  }
+
+  .card-tabs {
+    border-radius: 0px;
+    border-bottom-color: $dark-light-bg;
+  }
+
+  .card-tab {
+    background-color: transparent;
+    color: #fff;
+    border-radius: 0px;
+    &:hover:not(.active) {
+      background-color: rgba($dark-primary, 0.15);
+      color: $dark-primary;
+    }
+    &.active {
+      background-color: $dark-primary-alternate;
+      color: $body-dark;
+    }
+  }
+
+  .check_dark_forest_icon {
+    margin-left: 10px;
+  }
+
+  .card-tab .check_dark_forest_icon {
+    svg path {
+      fill: $dark-primary;
+    }
+  }
+
+  .card-tab.active .check_dark_forest_icon {
+    svg path {
+      fill: $body-dark;
+    }
+  }
+
+  .card-background-1 {
+    background-color: $dark-light-bg;
+  }
+
+  // Components
+  a {
+    color: $dark-primary-alternate;
+  }
+
+  a.tile-title {
+    color: $dark-primary-alternate !important;
+  }
+  .card-body {
+    a:not(.dropdown-item):not(.button):not([data-test="address_hash_link"]):not(
+        .alert-link
+      ):not([data-test="token_link"]):not(#dropdown-tokens) {
+      color: $dark-primary-alternate;
+
+      &:hover {
+        color: $dark-primary-alternate;
+      }
+    }
+  }
+
+  .tile {
+    border-top-color: $labels-dark;
+    border-bottom-color: $labels-dark;
+    border-right-color: $labels-dark;
+    border-radius: 0px;
+    background-color: $dark-light-bg;
+    color: $labels-dark;
+    &:not([class^="tile tile-type"]) {
+      border-left-color: $labels-dark;
+    }
+    &.tile-type-coin-balance {
+      border-left-color: $labels-dark;
+    }
+    .tile-title {
+      color: #fff;
+    }
+    .tile-transaction-type-block {
+      background-color: transparent;
+    }
+  }
+  .tile-bottom-contents {
+    background-color: $dark-bg;
+  }
+  a.tile-title {
+    color: #fff !important;
+  }
+  .tile.tile-type-block .tile-transaction-type-block a {
+    color: #fff;
+  }
+  .fade-up-blocks-chain .tile-type-block-animation {
+    background-color: $dark-light;
+    border-top-color: $dark-light;
+    border-right-color: $dark-light;
+    border-bottom-color: $dark-light;
+  }
+  .fade-up-blocks-chain .tile-type-block-animation:after {
+    background-color: $dark-light;
+  }
+  .cube-animation-title {
+    color: $labels-dark;
+  }
+  .tile .tile-body a,
+  .tile span[data-address-hash] {
+    color: $dark-primary;
+  }
+  .fade-up-blocks-chain .tile-type-block-animation .tile-type-line-up {
+    background-color: $dark-primary;
+  }
+  .tile.tile-type-block {
+    border-left-color: $dark-primary;
+  }
+  .tile.tile-type-block .tile-status-label {
+    color: $dark-primary;
+  }
+  .tile.tile-type-block .tile-transaction-type-block {
+    border-right-color: $dark-primary;
+    border-top-color: $dark-primary;
+    border-bottom-color: $dark-primary;
+  }
+  .tile .progress {
+    background-color: rgba(#fff, 0.2);
+  }
+  .tile .progress .progress-bar {
+    background-color: $dark-primary;
+  }
+  .tile .tile-title-lg:not([data-balance-change-sign]) {
+    color: #fff;
+  }
+
+  // btns
+
+  .btn-line {
+    background-color: transparent;
+    border-color: $dark-primary;
+    color: $dark-primary;
+    &:hover {
+      border-color: $dark-primary;
+      background-color: $dark-primary;
+      color: #fff;
+    }
+  }
+
+  .btn-copy-icon {
+    content: url(/images/custom-themes/dark-forest/copy-df.svg);
+  }
+
+  .btn-qr-icon {
+    content: url(/images/custom-themes/dark-forest/qr-df.svg);
+  }
+
+  .btn-copy-icon,
+  .btn-qr-icon,
+  .btn-address-card-icon {
+    border-radius: 0;
+    border: none;
+    border-color: $dark-primary;
+    &:hover {
+      background-color: rgba(117, 249, 77, 0.4);
+    }
+  }
+
+  .btn-contract-icon {
+    border-radius: 0;
+    border-color: $dark-primary;
+    &:hover {
+      background-color: rgba(117, 249, 77, 0.4);
+    }
+    svg {
+      path {
+        fill: $dark-primary;
+      }
+    }
+  }
+
+  // pagination
+  .pagination-container .pagination .page-link {
+    color: #fff !important;
+    border-color: #fff;
+    background-color: $dark-light-bg;
+    border-radius: 0px;
+    padding: 15px;
+    &:not(.no-hover):hover {
+      color: #fff;
+      border: 1px solid #fff;
+      background-color: $dark-primary;
+      path {
+        fill: #fff;
+      }
+    }
+    &[disabled] {
+      color: $labels-dark;
+      border-color: $labels-dark;
+      background-color: $dark-light-bg;
+    }
+  }
+
+  // dropdown
+  .dropdown-menu {
+    background-color: $dark-light;
+    border-left-color: $dark-light;
+    border-right-color: $dark-light;
+    border-bottom-color: $dark-light;
+  }
+
+  .dropdown-item {
+    color: #fff;
+    &:hover {
+      background-color: rgba(#fff, 0.1);
+    }
+  }
+  .dropdown-item.active {
+    background-color: $dark-primary;
+  }
+  .btn-dropdown-line {
+    background-color: $dark-light;
+    border-color: #fff;
+    color: #fff;
+    height: 32px;
+  }
+
+  // table
+  .stakes-table-th {
+    background-color: $dark-light;
+    color: $labels-dark;
+  }
+  .stakes-td {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+  .main-search-autocomplete {
+    background-color: $dark-light !important;
+    color: #fff !important;
+  }
+  .table th,
+  .table td {
+    border-top-color: darken($labels-dark, 30);
+  }
+  hr {
+    border-top-color: darken($labels-dark, 30);
+  }
+
+  // api's
+  .api-anchors-list {
+    background-color: $dark-light;
+  }
+  .api-doc-list-item {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+  .card-subtitle,
+  .api-anchors-list-item-title,
+  .api-doc-list-item-title {
+    color: #fff;
+  }
+  .api-text-monospace {
+    color: $dark-primary;
+  }
+  .api-text-monospace-background {
+    background-color: rgba($dark-primary, 0.15);
+  }
+  .badge {
+    border-radius: 0px;
+  }
+  .badge.badge-neutral {
+    background-color: rgba($dark-primary, 0.15);
+    color: $dark-primary;
+  }
+  .badge.badge-danger {
+    background-color: #fd906b;
+    color: $body-dark;
+  }
+  .badge.badge-success {
+    background-color: $dark-primary;
+    color: $body-dark;
+  }
+
+  // download csv button
+  .download-all-transactions .download-all-transactions-link svg path {
+    fill: $dark-primary;
+  }
+
+  //tooltips
+  .tooltip .arrow:before {
+    border-top-color: $dark-primary;
+    border-bottom-color: $dark-primary;
+  }
+  .tooltip > .tooltip-inner {
+    border-radius: 0px;
+    background-color: $dark-primary;
+  }
+
+  //network select
+  .network-selector-overlay {
+    background-color: rgba($dark-bg, 0.9);
+  }
+  .network-selector {
+    background-color: $dark-light-bg;
+  }
+  .network-selector-title {
+    color: #fff;
+  }
+  .network-selector-text {
+    color: $labels-dark;
+  }
+  .network-selector-close path {
+    fill: #fff;
+  }
+  .network-selector-search-container {
+    background-color: $dark-light;
+  }
+  .network-selector-search-container path {
+    fill: $labels-dark;
+  }
+  .network-selector-search-input {
+    color: #fff !important;
+    &::placeholder {
+      color: $labels-dark;
+    }
+  }
+  .network-selector-tab {
+    color: $labels-dark;
+    &:hover,
+    &.active {
+      color: #fff;
+    }
+    &.active {
+      &:after {
+        background-color: $dark-primary;
+      }
+    }
+  }
+  .network-selector-item,
+  .network-selector-tabs-container {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+  .network-selector-item-title {
+    color: #fff;
+  }
+  .network-selector-item-type {
+    color: $labels-dark;
+  }
+  .radio .radio-icon {
+    border-color: $labels-dark;
+  }
+  .network-selector-item-url:hover .network-selector-item-type {
+    color: #fff;
+  }
+
+  //coin dropdown
+  .token-balance-dropdown.dropdown-menu {
+    border-color: $dark-light !important;
+    box-shadow: 0 0 30px 0 rgba(23, 24, 41, 0.5) !important;
+  }
+  .token-balance-dropdown .dropdown-search-icon path {
+    fill: $labels-dark;
+  }
+  .token-balance-dropdown .dropdown-search-field {
+    background-color: $dark-light;
+    border-color: $dark-light;
+    color: #fff;
+    &::placeholder {
+      color: $labels-dark;
+    }
+  }
+  .token-balance-dropdown[aria-labelledby="dropdown-tokens"]
+    .dropdown-items
+    .dropdown-item:hover {
+    color: #fff !important;
+  }
+  .dropdown-header {
+    color: $labels-dark;
+  }
+  .border-bottom {
+    border-bottom-color: darken($labels-dark, 30) !important;
+  }
+
+  // coin balance history chart
+  .chartjs-render-monitor[data-chart="coinBalanceHistoryChart"] {
+    filter: brightness(0) invert(1) !important;
+  }
+
+  // logs search
+  .logs-search-input,
+  .logs-search-btn,
+  .logs-search-btn-cancel {
+    background-color: $dark-light;
+    border-color: $dark-light;
+    color: #fff;
+    height: 32px;
+    border-radius: 0px;
+    border-color: #fff;
+  }
+
+  .logs-search-btn {
+    border: none;
+    background-color: $dark-primary;
+    color: $body-dark;
+
+    &:hover {
+      background-color: $dark-primary;
+      color: $body-dark;
+    }
+  }
+
+  .logs-search-input {
+    &::placeholder {
+      color: $labels-dark;
+    }
+  }
+
+  // code
+  pre {
+    color: #fff;
+  }
+
+  // info allert
+  .alert-info {
+    color: $labels-dark;
+    background-color: $dark-light;
+    border-color: $dark-light;
+  }
+
+  // dark text
+  .text-dark {
+    color: #fff !important;
+  }
+
+  // Contract Verification
+  .new-smart-contract-container {
+    background-color: $dark-light-bg;
+    background-image: linear-gradient(
+      to bottom right,
+      $dark-light 100%,
+      $dark-light 100%
+    );
+    @media (max-width: 991.98px) {
+      background-image: none;
+    }
+  }
+  .smart-contract-form-group-inner-wrapper .smart-contract-form-group-tooltip {
+    color: $labels-dark;
+  }
+  .smart-contract-title {
+    color: #fff;
+  }
+  .smart-contract-form-group-inner-wrapper > label {
+    color: $labels-dark;
+  }
+  .smart-contract-form-buttons {
+    border-top-color: darken($labels-dark, 30);
+    .btn-no-border {
+      background-color: $dark-light;
+      border-color: $dark-light;
+      color: #fff;
+      &:hover {
+        background-color: $dark-primary;
+        color: #fff;
+      }
+    }
+  }
+  .add-contract-libraries-wrapper {
+    border-top-color: darken($labels-dark, 30);
+  }
+
+  .token-tile-view-more:before,
+  .token-tile-view-more:after {
+    border-top-color: darken($labels-dark, 30);
+    border-bottom-color: darken($labels-dark, 30);
+  }
+
+  // Form Controlls
+  .form-control {
+    background-color: $dark-light;
+    border-color: #fff;
+    color: #fff;
+    &::placeholder {
+      color: $labels-dark;
+    }
+    &:focus {
+      background-color: $dark-light;
+      border-color: $dark-primary;
+      color: #fff;
+    }
+  }
+  .radio-big .radio-icon {
+    border-color: $labels-dark;
+  }
+  .radio-big input[type="radio"]:checked + .radio-icon {
+    border-color: $dark-primary;
+  }
+  .radio-big input[type="radio"]:checked + .radio-icon::before {
+    background: $dark-primary;
+  }
+  .radio-big .radio-text {
+    color: #fff;
+  }
+
+  // Content loading placeholders
+  .tile-loader,
+  .table-content-loader {
+    background-color: rgba(117, 249, 77, 0.4) !important;
+    &:before {
+      background: linear-gradient(
+        to right,
+        rgba(117, 249, 77, 0.4) 2%,
+        lighten(rgba(117, 249, 77, 0.4), 3) 18%,
+        rgba(117, 249, 77, 0.4) 33%
+      );
+    }
+  }
+
+  // Verify other explorers
+  .verify-other-explorers-elem {
+    border-color: darken($labels-dark, 30);
+    .exp-logo {
+      border-right-color: darken($labels-dark, 30);
+    }
+    .exp-content {
+      h3 {
+        color: #fff;
+      }
+      div {
+        color: $labels-dark;
+      }
+    }
+  }
+  .verify-other-explorers-more {
+    border-color: $dark-primary;
+    svg path {
+      fill: $dark-primary;
+    }
+    &:hover {
+      background-color: $dark-primary;
+      svg path {
+        fill: #fff;
+      }
+    }
+  }
+  .verify-other-explorers-elem {
+    &:hover {
+      text-decoration: none;
+      color: #fff;
+      .exp-content {
+        h3,
+        div {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  #explorersModal {
+    .modal-title {
+      color: #fff;
+    }
+
+    .text-muted {
+      color: $labels-dark;
+    }
+
+    .modal-footer {
+      border-top-color: darken($labels-dark, 30);
+    }
+
+    .modal-content {
+      background-color: $dark-light-bg;
+
+      .btn-primary {
+        background-color: $dark-primary;
+        border-color: $dark-primary;
+        &:hover {
+          background-color: $dark-primary;
+          border-color: $dark-primary;
+        }
+      }
+    }
+
+    .verify-other-explorers-cell {
+      .exp-logo {
+        color: #fff;
+      }
+    }
+
+    .close {
+      color: #fff;
+    }
+  }
+
+  // API docs dropdown content
+  .api-doc-parameters-list-item-description,
+  .api-doc-parameters-list-item-title,
+  .api-doc-parameters-list-title,
+  .api-doc-list-item-controls-view-more {
+    color: #fff;
+  }
+
+  .api-doc-parameters-list {
+    border-bottom-color: darken($labels-dark, 30);
+  }
+  .api-doc-parameters-container {
+    border-top-color: darken($labels-dark, 30);
+  }
+  .api-doc-tab {
+    color: $dark-primary !important;
+    &.active {
+      border-bottom-color: $dark-primary;
+    }
+  }
+
+  // Common Buttons
+  .btn-secondary,
+  .button-secondary {
+    background-color: transparent;
+    border-color: $dark-primary;
+    color: $dark-primary;
+    &:hover {
+      background-color: $dark-primary;
+      border-color: $dark-primary;
+      color: #fff;
+    }
+  }
+
+  // Decoded data
+  .table.thead-light.table-bordered {
+    color: #fff !important;
+  }
+  .table-bordered,
+  .table-bordered td,
+  .table-bordered th {
+    border-color: darken($labels-dark, 30);
+  }
+  .dark-forest-theme-applied .table td,
+  .dark-forest-theme-applied .table th,
+  .dark-forest-theme-applied hr {
+    border-top-color: darken($labels-dark, 30);
+  }
+  .btn-copy-ico svg path {
+    fill: #fff;
+  }
+
+  // pre
+  .pre-scrollable.line-numbers,
+  .hljs {
+    background: $dark-light;
+    color: #fff;
+  }
+
+  .hljs-comment {
+    color: $labels-dark;
+  }
+
+  .hljs-title,
+  .hljs-section {
+    color: #ff2294;
+  }
+
+  .hljs-type,
+  .hljs-string,
+  .hljs-number,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-quote,
+  .hljs-template-tag,
+  .hljs-deletion {
+    color: #ff2294;
+  }
+
+  .hljs-literal,
+  .hljs-built_in,
+  .hljs-bullet,
+  .hljs-code,
+  .hljs-addition {
+    color: #20dd94;
+  }
+
+  .line-numbers [data-line-number]:before {
+    color: #3f436b !important;
+    border-right-color: #3f436b !important;
+  }
+
+  // 'text dark' label
+  .text-dark {
+    color: #fff;
+  }
+
+  // validator info
+  #validatorModal {
+    .modal-title {
+      color: #fff;
+    }
+
+    .text-muted {
+      color: $labels-dark;
+    }
+
+    .modal-footer {
+      border-top-color: darken($labels-dark, 30);
+    }
+
+    .modal-content {
+      background-color: $dark-light-bg;
+
+      .btn-primary {
+        background-color: $dark-primary;
+        border-color: $dark-primary;
+        &:hover {
+          background-color: $dark-primary;
+          border-color: $dark-primary;
+        }
+      }
+    }
+
+    .close {
+      color: #fff;
+    }
+  }
+
+  #qrModal {
+    .modal-content {
+      border-radius: 0px;
+
+      .btn-primary {
+        border-radius: 0px;
+        background-color: $dark-primary;
+        border-color: $dark-primary;
+        &:hover {
+          background-color: $dark-primary;
+          border-color: $dark-primary;
+        }
+      }
+    }
+  }
+
+  // alerts
+  .alert-link {
+    color: $labels-dark;
+  }
+
+  .alert-danger {
+    background-color: $dark-light;
+    border-color: $dark-light;
+    .alert-link {
+      color: $alert-danger-color;
+    }
+  }
+
+  .tile .alert {
+    background: rgba(#000, 0.1);
+  }
+
+  // primary buttons
+  .button {
+    border-radius: 0px;
+  }
+
+  .btn-full-primary,
+  .button-primary {
+    background: $dark-primary;
+    border-color: $dark-primary;
+    color: #fff;
+    &:hover {
+      background: darken($dark-primary, 6);
+      border-color: darken($dark-primary, 6);
+      color: #fff;
+    }
+  }
+
+  .logo-text {
+    color: #fff;
+  }
+
+  .bs-label.omni {
+    background-color: $labels-dark;
+  }
+
+  .dropdown-item {
+    .external-link-icon {
+      path {
+        fill: #fff;
+      }
+    }
+
+    & {
+      &.active,
+      &:hover,
+      &:focus {
+        .external-link-icon {
+          path {
+            fill: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  .tooltip-inversed-color {
+    .tooltip-inner {
+      background-color: $btn-line-color !important;
+      color: #fff !important;
+    }
+  }
+
+  .tooltip-inversed-color.bs-tooltip-top .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="top"] .arrow::before {
+    border-top-color: $btn-line-color !important;
+  }
+
+  .tooltip-inversed-color.bs-tooltip-right .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="right"] .arrow::before {
+    border-right-color: $btn-line-color !important;
+  }
+
+  .tooltip-inversed-color.bs-tooltip-bottom .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="bottom"]
+    .arrow::before {
+    border-bottom-color: $btn-line-color !important;
+  }
+
+  .tooltip-inversed-color.bs-tooltip-left .arrow::before,
+  .tooltip-inversed-color.bs-tooltip-auto[x-placement^="left"] .arrow::before {
+    border-left-color: $btn-line-color !important;
+  }
+
+  .active-dot-icon {
+    circle {
+      fill: $dark-primary;
+    }
+  }
+
+  .tile.tile-type-coin-balance [data-balance-change-sign="Negative"] {
+    color: #e87293;
+  }
+
+  .tile.tile-type-coin-balance [data-balance-change-sign="Positive"] {
+    color: $dark-primary;
+  }
+
+  ::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px $dark-bg;
+    border-radius: 0px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 0px;
+    background: $dark-primary;
+  }
+
+  .custom-balance-icon {
+    content: url(/images/custom-themes/dark-forest/pic_balance.svg);
+    margin-right: 0px;
+    margin-left: auto;
+    max-width: 70%;
+  }
+
+  .custom-dapp-header-container {
+    display: flex;
+    margin-bottom: 30px;
+    @media screen and (max-width: 768px) {
+      display: inline;
+    }
+  }
+
+  .custom-dapp-header-description-container {
+    display: contents;
+  }
+
+  .custom-address-icon {
+    content: url(/images/custom-themes/dark-forest/dark_forest_logo.svg);
+
+    @media screen and (max-width: 768px) {
+      margin-bottom: 20px;
+    }
+  }
+
+  .custom-address-details {
+    margin-top: 8px;
+    @media (min-width: 576px) {
+      margin-left: 0;
+    }
+    @media (min-width: 768px) {
+      margin-left: 20px;
+    }
+    @media (min-width: 992px) {
+      margin-left: 20px;
+    }
+    @media (min-width: 1200px) {
+      margin-left: 20px;
+    }
+    color: $labels-dark;
+  }
+
+  .application-icon-link {
+    margin-left: auto;
+  }
+
+  .application-icon {
+    content: url(/images/custom-themes/dark-forest/planet.svg);
+    &:hover {
+      background-color: rgba(117, 249, 77, 0.4);
+    }
+    @media screen and (max-width: 768px) {
+      float: right;
+    }
+  }
+
+  .csv-icon {
+    visibility: hidden;
+  }
+}
+
+.navbar-dark .navbar-toggler {
+  color: rgba(255, 255, 255, 0.5);
+  border: none;
+}
+
+.dark-forest-theme-applied .dropdown-item {
+  background-color: $dark-light !important;
+  color: #fff !important;
+}
+
+.dark-forest-theme-applied .dropdown-item.active:not(.header),
+.dark-forest-theme-applied .dropdown-item:not(.header):hover,
+.dark-forest-theme-applied .dropdown-item:not(.header):focus {
+  background-image: none;
+  width: 100%;
+  background-color: rgba(117, 249, 77, 0.4) !important;
+}
+
+.dark-forest-theme-applied .dropdown-item.active.header,
+.dark-forest-theme-applied .dropdown-item.header:hover,
+.dark-forest-theme-applied .dropdown-item.header:focus {
+  background-color: $dark-light !important;
+}
+
+.dark-forest-theme-applied.modal-open .modal {
+  background-color: $dark-bg !important;
+}
+
+@media (max-width: 991.98px) {
+  .dark-forest-theme-applied .navbar.navbar-primary .navbar-nav .nav-link:hover,
+  .dark-forest-theme-applied
+    .navbar.navbar-primary
+    .navbar-nav
+    .nav-link.activeLink,
+  .dark-forest-theme-applied
+    .navbar.navbar-primary
+    .navbar-nav
+    .nav-link:focus {
+    background-color: $dark-light-bg !important;
+  }
+  .dark-forest-theme-applied .dropdown-item:hover:before {
+    content: none;
+    color: $dark-primary !important;
+  }
+  .dark-forest-theme-applied
+    .navbar.navbar-primary
+    .navbar-nav
+    .nav-link:hover:before {
+    content: none;
+    color: $dark-primary !important;
+  }
+}
diff --git a/frontend-v2/src/styletron.ts b/frontend-v2/src/styletron.ts
new file mode 100644
index 0000000..2207be0
--- /dev/null
+++ b/frontend-v2/src/styletron.ts
@@ -0,0 +1,12 @@
+import { Client, Server } from "styletron-engine-atomic";
+
+const getHydrateClass = () =>
+  document.getElementsByClassName("_styletron_hydrate_");
+
+export const styletron =
+  typeof window === "undefined"
+    ? new Server()
+    : new Client({
+        // @ts-ignore
+        hydrate: getHydrateClass(),
+      });
diff --git a/frontend-v2/src/token-container/data/query.ts b/frontend-v2/src/token-container/data/query.ts
new file mode 100644
index 0000000..850370a
--- /dev/null
+++ b/frontend-v2/src/token-container/data/query.ts
@@ -0,0 +1,38 @@
+import { gql } from "@apollo/client";
+
+export const queryTokens = gql`
+  query Tokens(
+    $after: String
+    $first: Float
+    $before: String
+    $last: Float
+    $symbol: String
+  ) {
+    tokens(
+      after: $after
+      first: $first
+      before: $before
+      last: $last
+      symbol: $symbol
+    ) {
+      edges {
+        cursor
+        node {
+          name
+          symbol
+          totalSupply
+          decimals
+          type
+          contractAddress
+          skipMetadata
+        }
+      }
+      pageInfo {
+        startCursor
+        endCursor
+        hasNextPage
+        hasPreviousPage
+      }
+    }
+  }
+`;
diff --git a/frontend-v2/src/token-container/hooks/use-query-tokens.ts b/frontend-v2/src/token-container/hooks/use-query-tokens.ts
new file mode 100644
index 0000000..c911f89
--- /dev/null
+++ b/frontend-v2/src/token-container/hooks/use-query-tokens.ts
@@ -0,0 +1,32 @@
+import { useQuery } from "@apollo/client";
+import { queryTokens } from "@/shared/token-container/data/query";
+import { Tokens } from "@/shared/token-container/data/__generated__/Tokens";
+
+const pageSize = 50;
+
+export const useQueryTokens = (querySymbol: string) => {
+  const { data, loading, fetchMore } = useQuery<Tokens>(queryTokens, {
+    ssr: false,
+    variables: {
+      after: "0",
+      first: pageSize,
+      symbol: querySymbol,
+    },
+  });
+  return {
+    tokensFetchMore: async (cursor?: string | null, symbol?: string) => {
+      if (!cursor) {
+        return;
+      }
+      await fetchMore({
+        variables: {
+          after: cursor,
+          first: pageSize,
+          symbol,
+        },
+      });
+    },
+    tokensData: data,
+    tokensLoading: loading,
+  };
+};
diff --git a/frontend-v2/src/token-container/selectors/select-tokens.ts b/frontend-v2/src/token-container/selectors/select-tokens.ts
new file mode 100644
index 0000000..4f18bef
--- /dev/null
+++ b/frontend-v2/src/token-container/selectors/select-tokens.ts
@@ -0,0 +1,9 @@
+import { Tokens } from "@/shared/token-container/data/__generated__/Tokens";
+
+export const selectTokens = (tks?: Tokens) => {
+  return {
+    tokens: tks?.tokens?.edges?.map((ed) => ed?.node),
+    currentCursor: tks?.tokens?.edges?.at(0)?.cursor,
+    hasNextPage: tks?.tokens?.pageInfo?.hasNextPage,
+  };
+};
diff --git a/frontend-v2/src/token-container/tokens-container.tsx b/frontend-v2/src/token-container/tokens-container.tsx
new file mode 100644
index 0000000..479d501
--- /dev/null
+++ b/frontend-v2/src/token-container/tokens-container.tsx
@@ -0,0 +1,279 @@
+import React, { useState } from "react";
+import { useQueryTokens } from "@/shared/token-container/hooks/use-query-tokens";
+import { selectTokens } from "@/shared/token-container/selectors/select-tokens";
+import { shortenHash } from "@/shared/common/shorten-hash";
+import { useRouter } from "next/router";
+import { assetURL } from "@/shared/common/asset-url";
+import Link from "next/link";
+
+export const TokensContainer = () => {
+  const router = useRouter();
+  const searchParams = router.query;
+  const querySymbol = searchParams["symbol"];
+
+  const [symbol, setSymbol] = useState(String(querySymbol ?? "").toUpperCase());
+
+  const updateSymbol = (s: string) => {
+    // Create a new URLSearchParams object
+    const p = new URLSearchParams(location.search);
+    // Set the new query value
+    p.set("symbol", s);
+    // Update the URL with the new query string
+    router.push({ search: p.toString() });
+    setSymbol(s);
+  };
+
+  const { tokensData, tokensFetchMore } = useQueryTokens(symbol);
+  const { tokens, currentCursor, hasNextPage } = selectTokens(tokensData);
+
+  const handleKeyUp = async (event: any) => {
+    if (event.key === "Enter") {
+      const uppercase = String(event.target.value).toUpperCase();
+      updateSymbol(uppercase);
+      await tokensFetchMore("0", uppercase);
+    }
+  };
+
+  return (
+    <main className="pt-4">
+      <p className="alert alert-info" role="alert"></p>
+      <p className="alert alert-danger" role="alert"></p>
+      <section
+        className="container"
+        data-page="tokens"
+        data-chain-id={10}
+        data-display-token-icons="false"
+      >
+        <div className="ad mb-3" style={{ display: "none" }}>
+          <span className="ad-prefix" />:{" "}
+          <img className="ad-img-url" width={20} height={20} />{" "}
+          <b>
+            <span className="ad-name" />
+          </b>{" "}
+          - <span className="ad-short-description" />{" "}
+          <a className="ad-url">
+            <b>
+              <span className="ad-cta-button" />
+            </b>
+          </a>
+        </div>
+        <div className="card">
+          <div
+            className="card-body"
+            data-async-load=""
+            data-async-listing="/optimism/mainnet/tokens"
+            data-no-self-calls=""
+          >
+            <h1 className="card-title list-title-description">Tokens</h1>
+            <div
+              className="list-top-pagination-container-wrapper tokens-list-search-input-outer-container d-flex"
+              style={{ float: "right" }}
+            >
+              <label className="tokens-list-search-input-container tokens mr-3">
+                <input
+                  data-search-field=""
+                  className="form-control tokens-list-search-input search-input"
+                  type="text"
+                  name="filter"
+                  defaultValue={symbol}
+                  placeholder="Token symbol"
+                  id="search-text-input"
+                  onKeyUp={handleKeyUp}
+                />
+              </label>
+              <div
+                className="pagination-container position-top "
+                data-pagination-container=""
+              >
+                <ul className="pagination">
+                  <li className="page-item">
+                    <Link
+                      className="page-link no-hover"
+                      href=""
+                      data-page-number=""
+                    >
+                      Page {currentCursor}
+                    </Link>
+                  </li>
+
+                  {hasNextPage && (
+                    <li className="page-item">
+                      <a
+                        className="page-link"
+                        data-next-page-button=""
+                        onClick={(e) => {
+                          e.preventDefault();
+                          return tokensFetchMore(
+                            tokensData?.tokens?.pageInfo?.endCursor,
+                            symbol,
+                          );
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width={6}
+                          height={10}
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M5.715 5.715c-.064.064-.141.102-.217.144L1.642 9.715A.959.959 0 1 1 .285 8.358L3.642 5 .285 1.642A.959.959 0 1 1 1.642.285L5.498 4.14c.075.043.153.081.217.145A.949.949 0 0 1 5.989 5a.949.949 0 0 1-.274.715z"
+                          />
+                        </svg>
+                      </a>
+                    </li>
+                  )}
+                </ul>
+              </div>
+            </div>
+            <div className="addresses-table-container">
+              <div className="stakes-table-container">
+                <table>
+                  <thead>
+                    <tr>
+                      <th className="stakes-table-th">
+                        <div className="stakes-table-th-content">&nbsp;</div>
+                      </th>
+                      <th className="stakes-table-th">
+                        <div>&nbsp;</div>
+                      </th>
+                      <th className="stakes-table-th">
+                        <div className="stakes-table-th-content">Token</div>
+                      </th>
+                      <th className="stakes-table-th">
+                        <div className="stakes-table-th-content">Address</div>
+                      </th>
+                      {/* <th className="stakes-table-th"> */}
+                      {/*  <div className="stakes-table-th-content"> */}
+                      {/*    Circulating Market Cap */}
+                      {/*  </div> */}
+                      {/* </th> */}
+                      <th className="stakes-table-th">
+                        <div className="stakes-table-th-content">
+                          Total Supply
+                        </div>
+                      </th>
+                      {/* <th className="stakes-table-th"> */}
+                      {/*  <div className="stakes-table-th-content"> */}
+                      {/*    Holders Count */}
+                      {/*  </div> */}
+                      {/* </th> */}
+                    </tr>
+                  </thead>
+                  <tbody data-items="" data-selector="top-tokens-list">
+                    {tokens?.map((t) => (
+                      <tr key={t?.contractAddress}>
+                        <td className="stakes-td">
+                          <span className="color-lighten"></span>
+                        </td>
+
+                        <td className="token-icon"></td>
+
+                        <td className="stakes-td">
+                          <Link
+                            className="text-truncate"
+                            data-test="token_link"
+                            href={assetURL(`address/${t?.contractAddress}`)}
+                          >
+                            {t?.name} ({t?.symbol})
+                          </Link>
+                        </td>
+
+                        <td className="stakes-td">
+                          <Link
+                            data-test="address_hash_link"
+                            href={assetURL(`address/${t?.contractAddress}`)}
+                          >
+                            <span className="contract-address">
+                              <span
+                                data-toggle="tooltip"
+                                data-placement="top"
+                                title=""
+                                data-custom-class=""
+                              >
+                                <span className="d-none d-md-none d-lg-inline d-xl-inline">
+                                  {t?.name}
+                                </span>
+                                <span className="d-inline d-md-inline d-lg-none d-xl-none">
+                                  {t?.name}
+                                </span>
+                                <span>
+                                  {" "}
+                                  ({shortenHash(t?.contractAddress)})
+                                </span>
+                              </span>
+                            </span>
+                          </Link>
+                        </td>
+
+                        {/* <td className="stakes-td"> */}
+                        {/*  <span data-selector="circulating-market-cap-usd"> */}
+                        {/*    N/A */}
+                        {/*  </span> */}
+                        {/* </td> */}
+                        <td className="stakes-td">
+                          <span data-test="token_supply">
+                            {Number(t?.totalSupply).toLocaleString()}
+                          </span>{" "}
+                          {t?.symbol}
+                        </td>
+                        {/* <td className="stakes-td"> */}
+                        {/*  <span className="mr-4"> */}
+                        {/*    <span data-test="transaction_count">??</span> */}
+                        {/*  </span> */}
+                        {/* </td> */}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <div
+              className="pagination-container  position-bottom"
+              data-pagination-container=""
+            >
+              <ul className="pagination">
+                <li className="page-item">
+                  <Link
+                    className="page-link no-hover"
+                    href=""
+                    data-page-number=""
+                  >
+                    Page {currentCursor}
+                  </Link>
+                </li>
+
+                {hasNextPage && (
+                  <li className="page-item">
+                    <Link
+                      className="page-link"
+                      href="#"
+                      onClick={() => {
+                        return tokensFetchMore(
+                          tokensData?.tokens?.pageInfo?.endCursor,
+                          symbol,
+                        );
+                      }}
+                      data-next-page-button=""
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width={6}
+                        height={10}
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M5.715 5.715c-.064.064-.141.102-.217.144L1.642 9.715A.959.959 0 1 1 .285 8.358L3.642 5 .285 1.642A.959.959 0 1 1 1.642.285L5.498 4.14c.075.043.153.081.217.145A.949.949 0 0 1 5.989 5a.949.949 0 0 1-.274.715z"
+                        />
+                      </svg>
+                    </Link>
+                  </li>
+                )}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
diff --git a/frontend-v2/src/tx-details-container/data/query-tx.ts b/frontend-v2/src/tx-details-container/data/query-tx.ts
new file mode 100644
index 0000000..376d4a6
--- /dev/null
+++ b/frontend-v2/src/tx-details-container/data/query-tx.ts
@@ -0,0 +1,30 @@
+import { gql } from "@apollo/client";
+
+export const queryTx = gql`
+  query QueryTx($hash: Buffer!) {
+    transaction(hash: $hash) {
+      id
+      timestamp
+      hash
+      blockNumber
+      value
+      gasUsed
+      cumulativeGasUsed
+      error
+      fromAddressHash
+      toAddressHash
+      status
+      gas
+      gasPrice
+      index
+      input
+      nonce
+      r
+      s
+      v
+      revertReason
+      maxPriorityFeePerGas
+      maxFeePerGas
+    }
+  }
+`;
diff --git a/frontend-v2/src/tx-details-container/hooks/use-query-tx.ts b/frontend-v2/src/tx-details-container/hooks/use-query-tx.ts
new file mode 100644
index 0000000..1ff2130
--- /dev/null
+++ b/frontend-v2/src/tx-details-container/hooks/use-query-tx.ts
@@ -0,0 +1,18 @@
+import { useQuery } from "@apollo/client";
+import { queryTx } from "@/shared/tx-details-container/data/query-tx";
+import { QueryTx } from "../data/__generated__/QueryTx";
+
+export const useQueryTx = ({ hash }: { hash: string }) => {
+  const { data, loading, error, refetch } = useQuery<QueryTx>(queryTx, {
+    ssr: false,
+    variables: {
+      hash,
+    },
+  });
+  return {
+    data,
+    loading,
+    error,
+    refetch,
+  };
+};
diff --git a/frontend-v2/src/tx-details-container/tx-details-container.tsx b/frontend-v2/src/tx-details-container/tx-details-container.tsx
new file mode 100644
index 0000000..09657ee
--- /dev/null
+++ b/frontend-v2/src/tx-details-container/tx-details-container.tsx
@@ -0,0 +1,520 @@
+import * as React from "react";
+import { useQueryTx } from "@/shared/tx-details-container/hooks/use-query-tx";
+import { TxStatus } from "@/shared/explorer-components/tx-status";
+import { normalizeTokenValue } from "@/shared/common/normalize-token-value";
+import { getGasUsedPercent } from "@/shared/common/get-gas-used-percent";
+import { CopyToClipboard } from "@/shared/explorer-components/copy-to-clipboard";
+import { TickingTs } from "@/shared/explorer-components/ticking-ts";
+import format from "date-fns/format";
+import { useChainConfig } from "@/shared/common/use-chain-config";
+
+import { assetURL } from "@/shared/common/asset-url";
+import { DataInput } from "../explorer-components/data-input";
+import { useTranslation } from "next-i18next";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+export function TxDetailsContainer(): JSX.Element {
+  const { t } = useTranslation("common");
+  const router = useRouter();
+  const params = router.query;
+  const chainConfig = useChainConfig();
+  function divDecimals(num?: string | null): string {
+    if (!num) {
+      return "0";
+    }
+    return (Number(num) / 10 ** chainConfig.decimals)
+      .toFixed(20)
+      .replace(/\.?0*$/, "");
+  }
+  const { data, loading, error, refetch } = useQueryTx({
+    hash: params.txHash as string,
+  });
+  if (loading) {
+    // TODO(dora):
+    return <></>;
+  }
+  if (error && error.graphQLErrors[0]?.extensions?.code === "NOT_FOUND") {
+    // TODO(dora):
+    return (
+      <>
+        Transaction not found
+        <button onClick={refetch}>Refetch</button>
+      </>
+    );
+  }
+
+  const tx = data?.transaction;
+  let txFee = "0";
+  try {
+    txFee = (Number(tx?.gasUsed ?? 0) * Number(tx?.gasPrice ?? 0)).toString();
+  } catch (err) {
+    console.error(`failed to calc txFee: ${err}`);
+  }
+
+  return (
+    <main className="pt-4">
+      <p className="alert alert-info" role="alert" />
+      <p className="alert alert-danger" role="alert" />
+      <section className="container">
+        <section
+          className="fs-14"
+          data-page="transaction-details"
+          data-page-transaction-hash={tx?.hash}
+        >
+          <div className="row">
+            <div className="col-md-12">
+              <div className="card mb-3">
+                <div className="card-body">
+                  <h1 className="card-title margin-bottom-1">
+                    <div
+                      style={{
+                        display: "inline-block",
+                        verticalAlign: "bottom",
+                        lineHeight: "25px",
+                      }}
+                    >
+                      {t("tx.tx_details")}
+                    </div>
+                  </h1>
+
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.tx_hash.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.tx_hash")}
+                    </dt>
+                    <dd
+                      className="col-sm-9 col-lg-10"
+                      style={{ wordBreak: "break-all" }}
+                    >
+                      <span
+                        className="transaction-details-address"
+                        data-test="transaction_detail_hash"
+                      >
+                        {tx?.hash}{" "}
+                      </span>
+
+                      <CopyToClipboard
+                        value={tx?.hash}
+                        reason={t("tx.copy_tx_hash")}
+                      />
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.result.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.result")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      <TxStatus status={tx?.status} />
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.status.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.status")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      <span className="mr-4">
+                        <span data-transaction-status="Confirmed">
+                          <div className="bs-label success large">
+                            Confirmed
+                          </div>
+                        </span>
+
+                        {/*
+
+                         //TODO(dora) confirmed by how many blocks?
+                         <span className="bs-label large ml-2 confirmations-label">
+                         Confirmed by{" "}
+                         <span data-selector="block-confirmations">594</span>{" "}
+                         blocks
+                         </span>
+                         */}
+                      </span>
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.block.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.block")}
+                    </dt>
+                    <dd
+                      className="col-sm-9 col-lg-10"
+                      data-selector="block-number"
+                    >
+                      <a
+                        className="transaction__link"
+                        href={assetURL(`block/${tx?.blockNumber}`)}
+                      >
+                        {tx?.blockNumber}
+                      </a>
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.timestamp.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.timestamp")}
+                    </dt>
+                    <dd
+                      className="col-sm-9 col-lg-10"
+                      data-selector="block-timestamp"
+                    >
+                      <i className="fa-regular fa-clock" />{" "}
+                      <span>
+                        <TickingTs timestamp={tx?.timestamp} />
+                        {" | "}
+                        {format(
+                          new Date(tx?.timestamp),
+                          "MMM-d-y hh:mm:ss a x",
+                        )}{" "}
+                        UTC
+                      </span>
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.from.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.from")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      <Link href={assetURL(`address/${tx?.fromAddressHash}`)}>
+                        {tx?.fromAddressHash}
+                      </Link>
+
+                      <CopyToClipboard
+                        reason="Copy From Address"
+                        value={tx?.fromAddressHash}
+                      />
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.to.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.to")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      <Link href={assetURL(`address/${tx?.toAddressHash}`)}>
+                        {tx?.toAddressHash}
+                      </Link>
+
+                      <CopyToClipboard
+                        reason="Copy To Address"
+                        value={tx?.toAddressHash}
+                      />
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.value.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.value")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {" "}
+                      {normalizeTokenValue(tx?.value)} {chainConfig.symbol}
+                      {/*
+                      TODO(dora): coin balance price
+
+                      (
+                      <span
+                        data-wei-value={252981808720000000}
+                        data-usd-exchange-rate={1.0}
+                      >
+                        $0.252982 USD
+                      </span>
+                      )
+                      */}
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.fee.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.fee")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {txFee} Gwei
+                      {/*
+                      TODO(dora):
+                      (
+                      <span
+                        data-wei-value={tx?.gas}
+                        data-usd-exchange-rate={1.0}
+                      >
+                        $0.000042 USD
+                      </span>
+                      )
+
+                      */}
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.gas_price.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.gas_price")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {" "}
+                      {divDecimals(tx?.gasPrice)} {chainConfig.symbol}{" "}
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.tx_type.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.tx_type")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10"> 0 </dd>
+                  </dl>
+                  <hr />
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.gas_limit.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.gas_limit")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {" "}
+                      {Number(tx?.gas).toLocaleString()}{" "}
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.max_fee_per_gas.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle"></i>{" "}
+                      </span>
+                      {t("tx.max_fee_per_gas")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {" "}
+                      {divDecimals(tx?.maxFeePerGas)} {chainConfig.symbol}
+                    </dd>
+                  </dl>
+
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="User defined maximum fee (tip) per unit of gas paid to validator for transaction prioritization."
+                      >
+                        <i className="fa-solid fa-info-circle"></i>{" "}
+                      </span>
+                      Max Priority Fee per Gas
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {" "}
+                      {divDecimals(tx?.maxPriorityFeePerGas)}{" "}
+                      {chainConfig.symbol}
+                    </dd>
+                  </dl>
+
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted transaction-gas-used">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title="tx.gas_used.tip"
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.gas_used")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {" "}
+                      {tx?.gasUsed} | {getGasUsedPercent(tx?.gasUsed, tx?.gas)}%
+                    </dd>
+                  </dl>
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title={t("tx.nonce.tip") as string}
+                      >
+                        <i className="fa-solid fa-info-circle" />{" "}
+                      </span>
+                      {t("tx.nonce")}
+                      <span
+                        className="index-label ml-2"
+                        data-toggle="tooltip"
+                        title="Index position of Transaction in the block."
+                      >
+                        {t("tx.pos")}
+                      </span>
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      {" "}
+                      {tx?.nonce}
+                      <span className="index-label ml-2">{tx?.index}</span>{" "}
+                    </dd>
+                  </dl>
+
+                  <dl className="row">
+                    <dt className="col-sm-3 col-lg-2 text-muted">
+                      <span
+                        className="i-tooltip-2 "
+                        data-boundary="window"
+                        data-container="body"
+                        data-html="true"
+                        data-placement="top"
+                        data-toggle="tooltip"
+                        title=""
+                        data-original-title={t("tx.raw_input.tip")}
+                      >
+                        <i className="fa-solid fa-info-circle"></i>{" "}
+                      </span>
+                      {t("tx.raw_input")}
+                    </dt>
+                    <dd className="col-sm-9 col-lg-10">
+                      <DataInput input={tx?.input} />
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* TODO(dora): more tx info */}
+      </section>
+    </main>
+  );
+}
diff --git a/frontend-v2/src/txs-table-container/txs-table-container.tsx b/frontend-v2/src/txs-table-container/txs-table-container.tsx
new file mode 100644
index 0000000..ae10f3b
--- /dev/null
+++ b/frontend-v2/src/txs-table-container/txs-table-container.tsx
@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import { useGetTxs } from "@/shared/block-details-container/hooks/use-get-txs";
+import { TxsList } from "@/shared/explorer-components/txs-list";
+import { Pagination } from "@/shared/explorer-components/pagination";
+
+import { paginationProcessTotalNumPage } from "@/shared/common/functions/paginations";
+import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
+
+export const TxsTableContainer: React.FC = () => {
+  const { t } = useTranslation("common");
+  return (
+    <main className="js-ad-dependant-pt pt-5">
+      <p className="alert alert-info" role="alert" />
+      <p className="alert alert-danger" role="alert" />
+      <section className="container" data-page="transaction-list">
+        <div className="card">
+          <div className="card-body">
+            <h1 className="card-title list-title-description">
+              Validated Transactions
+            </h1>
+            <div
+              data-selector="channel-batching-message"
+              className="d-none"
+              style={{ display: "none" }}
+            >
+              <div data-selector="reload-button" className="alert alert-info">
+                <a href="#" className="alert-link">
+                  <span data-selector="channel-batching-count" /> More
+                  transactions have come in
+                </a>
+              </div>
+            </div>
+            <div
+              data-selector="channel-disconnected-message"
+              style={{ display: "none" }}
+            >
+              <div
+                data-selector="reload-button"
+                className="alert alert-danger"
+                style={{ padding: "0.75rem 0rem", cursor: "pointer" }}
+              >
+                <span className="alert alert-danger">
+                  Connection Lost, click to load newer transactions
+                </span>
+              </div>
+            </div>
+
+            <TableWithPagination />
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+const TableWithPagination = () => {
+  const router = useRouter();
+  const search = router.query;
+  const initialPage = Number(search.page) || 1;
+  const [curPage, setCurPage] = useState(initialPage);
+  const pageSize = 20;
+
+  const { t } = useTranslation("common");
+
+  const setCurPageWithSideEffect = async (p: number) => {
+    setCurPage(p);
+    await router.push({ search: `?page=${p}` });
+  };
+  const { data, loading, error, refetch } = useGetTxs(
+    { first: pageSize, after: (curPage - 1) * pageSize },
+    {},
+  );
+  if (loading) {
+    // TODO(dora)
+    return <></>;
+  }
+
+  const txs = data?.transactions?.edges?.map((e) => e?.node);
+
+  const numPage = paginationProcessTotalNumPage(data?.transactions);
+
+  return (
+    <>
+      {error && (
+        <button
+          onClick={refetch}
+          data-error-message
+          className="alert alert-danger col-12 text-left"
+        >
+          <span className="alert-link">{t("info.err")}</span>
+        </button>
+      )}
+
+      {!txs?.length && (
+        <div data-empty-response-message style={{ display: "none" }}>
+          <div className="tile tile-muted text-center">
+            <span data-selector="empty-internal-transactions-list">
+              There are no transactions.
+            </span>
+          </div>
+        </div>
+      )}
+
+      {txs && txs?.length > 0 ? (
+        <>
+          <Pagination
+            setCurPage={setCurPageWithSideEffect}
+            curPage={curPage}
+            numPages={numPage}
+            position="top"
+          />
+
+          <div data-selector="transactions-list">
+            <TxsList txs={txs} />
+          </div>
+
+          <Pagination
+            setCurPage={setCurPageWithSideEffect}
+            position="bottom"
+            curPage={curPage}
+            numPages={numPage}
+          />
+        </>
+      ) : (
+        <>
+          <div data-empty-response-message style={{ display: "none" }}>
+            <div className="tile tile-muted text-center">
+              <span data-selector="empty-internal-transactions-list">
+                There are no transactions.
+              </span>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
diff --git a/frontend-v2/styles/Home.module.css b/frontend-v2/styles/Home.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend-v2/styles/globals.css b/frontend-v2/styles/globals.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend-v2/tsconfig.json b/frontend-v2/tsconfig.json
new file mode 100644
index 0000000..2092dff
--- /dev/null
+++ b/frontend-v2/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/shared/*": ["./src/*"],
+    },
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+}
diff --git a/frontend-v2/yarn.lock b/frontend-v2/yarn.lock
new file mode 100644
index 0000000..c71e2ea
--- /dev/null
+++ b/frontend-v2/yarn.lock
@@ -0,0 +1,3353 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@apollo/client@^3.7.1":
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.7.1.tgz#86ce47c18a0714e229231148b0306562550c2248"
+  integrity sha512-xu5M/l7p9gT9Fx7nF3AQivp0XukjB7TM7tOd5wifIpI8RskYveL4I+rpTijzWrnqCPZabkbzJKH7WEAKdctt9w==
+  dependencies:
+    "@graphql-typed-document-node/core" "^3.1.1"
+    "@wry/context" "^0.7.0"
+    "@wry/equality" "^0.5.0"
+    "@wry/trie" "^0.3.0"
+    graphql-tag "^2.12.6"
+    hoist-non-react-statics "^3.3.2"
+    optimism "^0.16.1"
+    prop-types "^15.7.2"
+    response-iterator "^0.2.6"
+    symbol-observable "^4.0.0"
+    ts-invariant "^0.10.3"
+    tslib "^2.3.0"
+    zen-observable-ts "^1.2.5"
+
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.14.5", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.9", "@babel/runtime@^7.9.2":
+  version "7.20.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.1.tgz#1148bb33ab252b165a06698fde7576092a78b4a9"
+  integrity sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==
+  dependencies:
+    regenerator-runtime "^0.13.10"
+
+"@babel/runtime@^7.23.2":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.1.tgz#431f9a794d173b53720e69a6464abc6f0e2a5c57"
+  integrity sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@eslint/eslintrc@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.3.tgz#2b044ab39fdfa75b4688184f9e573ce3c5b0ff95"
+  integrity sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.4.0"
+    globals "^13.15.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@fortawesome/fontawesome-free@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.2.1.tgz#344baf6ff9eaad7a73cff067d8c56bfc11ae5304"
+  integrity sha512-viouXhegu/TjkvYQoiRZK3aax69dGXxgEjpvZW81wIJdxm5Fnvp3VVIP4VHKqX4SvFw6qpmkILkD4RJWAdrt7A==
+
+"@graphql-typed-document-node/core@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.1.tgz#076d78ce99822258cf813ecc1e7fa460fa74d052"
+  integrity sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==
+
+"@humanwhocodes/config-array@^0.11.6":
+  version "0.11.7"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz#38aec044c6c828f6ed51d5d7ae3d9b9faf6dbb0f"
+  integrity sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.1"
+    debug "^4.1.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@next/env@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.1.4.tgz#432e80651733fbd67230bf262aee28be65252674"
+  integrity sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ==
+
+"@next/eslint-plugin-next@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.1.4.tgz#d7372b5ffede0e466af8af2ff534386418827fc8"
+  integrity sha512-n4zYNLSyCo0Ln5b7qxqQeQ34OZKXwgbdcx6kmkQbywr+0k6M3Vinft0T72R6CDAcDrne2IAgSud4uWCzFgc5HA==
+  dependencies:
+    glob "10.3.10"
+
+"@next/swc-darwin-arm64@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.4.tgz#a3bca0dc4393ac4cf3169bbf24df63441de66bb7"
+  integrity sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==
+
+"@next/swc-darwin-x64@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.4.tgz#ba3683d4e2d30099f3f2864dd7349a4d9f440140"
+  integrity sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==
+
+"@next/swc-linux-arm64-gnu@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.4.tgz#3519969293f16379954b7e196deb0c1eecbb2f8b"
+  integrity sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==
+
+"@next/swc-linux-arm64-musl@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.4.tgz#4bb3196bd402b3f84cf5373ff1021f547264d62f"
+  integrity sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==
+
+"@next/swc-linux-x64-gnu@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.4.tgz#1b3372c98c83dcdab946cdb4ee06e068b8139ba3"
+  integrity sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==
+
+"@next/swc-linux-x64-musl@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.4.tgz#8459088bdc872648ff78f121db596f2533df5808"
+  integrity sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==
+
+"@next/swc-win32-arm64-msvc@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.4.tgz#84280a08c00cc3be24ddd3a12f4617b108e6dea6"
+  integrity sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==
+
+"@next/swc-win32-ia32-msvc@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.4.tgz#23ff7f4bd0a27177428669ef6fa5c3923c738031"
+  integrity sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==
+
+"@next/swc-win32-x64-msvc@14.1.4":
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.4.tgz#bccf5beccfde66d6c66fa4e2509118c796385eda"
+  integrity sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@pkgr/utils@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@pkgr/utils/-/utils-2.3.1.tgz#0a9b06ffddee364d6642b3cd562ca76f55b34a03"
+  integrity sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==
+  dependencies:
+    cross-spawn "^7.0.3"
+    is-glob "^4.0.3"
+    open "^8.4.0"
+    picocolors "^1.0.0"
+    tiny-glob "^0.2.9"
+    tslib "^2.4.0"
+
+"@rtsao/csstype@2.6.5-forked.0":
+  version "2.6.5-forked.0"
+  resolved "https://registry.yarnpkg.com/@rtsao/csstype/-/csstype-2.6.5-forked.0.tgz#b5b4e2a07ad83a91874ebf5fabdb73dc8c1632f6"
+  integrity sha512-0HwnY8uPWcCloTgdbbaJG3MbDUfNf6yKWZfCKxFv9yj2Sbp4mSKaIjC7Cr/5L4hMxvrrk85CU3wlAg7EtBBJ1Q==
+
+"@rushstack/eslint-patch@^1.3.3":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.8.0.tgz#c5545e6a5d2bd5c26b4021c357177a28698c950e"
+  integrity sha512-0HejFckBN2W+ucM6cUOlwsByTKt9/+0tWhqUffNIcHqCXkthY/mZ7AuYPK/2IIaGWhdl0h+tICDO0ssLMd6XMQ==
+
+"@swc/helpers@0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.2.tgz#85ea0c76450b61ad7d10a37050289eded783c27d"
+  integrity sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==
+  dependencies:
+    tslib "^2.4.0"
+
+"@tarekraafat/autocomplete.js@^10.2.7":
+  version "10.2.7"
+  resolved "https://registry.yarnpkg.com/@tarekraafat/autocomplete.js/-/autocomplete.js-10.2.7.tgz#dca809890cec322379a2b430632d46a14f9f2f91"
+  integrity sha512-iE+dnXI8/LrTaSORrnNdSyXg/bFCbCpz/R5GUdB3ioW+9PVEhglxNcSDQNeCXtrbRG0kOBFUd4unEiwcmqyn8A==
+
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
+
+"@types/minimatch@^3.0.3":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
+  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
+
+"@types/node@18.11.9":
+  version "18.11.9"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
+  integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==
+
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
+"@types/react-dom@18.0.9":
+  version "18.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.9.tgz#ffee5e4bfc2a2f8774b15496474f8e7fe8d0b504"
+  integrity sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-outside-click-handler@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@types/react-outside-click-handler/-/react-outside-click-handler-1.3.1.tgz#e4772ba550e1a548468203194d2615d8f06acdf9"
+  integrity sha512-0BNan5zIIDyO5k9LFSG+60ZxQ/0wf+LTF9BJx3oOUdOaJlZk6RCe52jRB75mlvLLJx2YLa61+NidOwBfptWMKw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*", "@types/react@18.0.25":
+  version "18.0.25"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.25.tgz#8b1dcd7e56fe7315535a4af25435e0bb55c8ae44"
+  integrity sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@types/styletron-react@^5.0.3":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@types/styletron-react/-/styletron-react-5.0.3.tgz#54d6e9acefb692355b35132b9f5276cc5cac00f6"
+  integrity sha512-mNM8WrFrCYWXNxudjdMMeHZmGdXLfVF/fQmj1Qnz7E99niL2d7IcQubbx731FX3YEVGoF9Au1J6uBkPoEzqypw==
+  dependencies:
+    "@types/react" "*"
+    "@types/styletron-standard" "*"
+
+"@types/styletron-standard@*":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/styletron-standard/-/styletron-standard-2.0.2.tgz#1e4f1977555e0b4612af0f5f420e8c777640b124"
+  integrity sha512-ZpPB8k2Yhskq/oggg2wjWeP/bBxRDfwIzRrHbdksVOQXfHOLf4rRqs2tlWLK/NRJvWU3E3MlXeNcoVSZjuAPiQ==
+  dependencies:
+    csstype "^3.0.2"
+
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
+"@typescript-eslint/parser@^5.4.2 || ^6.0.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.21.0.tgz#af8fcf66feee2edc86bc5d1cf45e33b0630bf35b"
+  integrity sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "6.21.0"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/typescript-estree" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
+  integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+
+"@typescript-eslint/types@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
+  integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
+
+"@typescript-eslint/typescript-estree@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
+  integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "9.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/visitor-keys@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
+  integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    eslint-visitor-keys "^3.4.1"
+
+"@wry/context@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.7.0.tgz#be88e22c0ddf62aeb0ae9f95c3d90932c619a5c8"
+  integrity sha512-LcDAiYWRtwAoSOArfk7cuYvFXytxfVrdX7yxoUmK7pPITLk5jYh2F8knCwS7LjgYL8u1eidPlKKV6Ikqq0ODqQ==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/equality@^0.5.0":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.3.tgz#fafebc69561aa2d40340da89fa7dc4b1f6fb7831"
+  integrity sha512-avR+UXdSrsF2v8vIqIgmeTY0UR91UT+IyablCyKe/uk22uOJ8fusKZnH9JH9e1/EtLeNJBtagNmL3eJdnOV53g==
+  dependencies:
+    tslib "^2.3.0"
+
+"@wry/trie@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.3.2.tgz#a06f235dc184bd26396ba456711f69f8c35097e6"
+  integrity sha512-yRTyhWSls2OY/pYLfwff867r8ekooZ4UI+/gxot5Wj8EFwSf2rG+n+Mo/6LoLQm1TKA4GRj2+LCpbfS937dClQ==
+  dependencies:
+    tslib "^2.3.0"
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^8.8.0:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
+  integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
+
+airbnb-prop-types@^2.15.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz#b96274cefa1abb14f623f804173ee97c13971dc2"
+  integrity sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==
+  dependencies:
+    array.prototype.find "^2.1.1"
+    function.prototype.name "^1.1.2"
+    is-regex "^1.1.0"
+    object-is "^1.1.2"
+    object.assign "^4.1.0"
+    object.entries "^1.1.2"
+    prop-types "^15.7.2"
+    prop-types-exact "^1.2.0"
+    react-is "^16.13.1"
+
+ajv@^6.10.0, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+aria-query@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
+  dependencies:
+    dequal "^2.0.3"
+
+array-buffer-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
+  integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
+  dependencies:
+    call-bind "^1.0.5"
+    is-array-buffer "^3.0.4"
+
+array-differ@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
+  integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==
+
+array-includes@^3.1.5, array-includes@^3.1.6:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
+  integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.3"
+    is-string "^1.0.7"
+
+array-includes@^3.1.7:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    is-string "^1.0.7"
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+array.prototype.find@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.2.1.tgz#769b8182a0b535c3d76ac025abab98ba1e12467b"
+  integrity sha512-I2ri5Z9uMpMvnsNrHre9l3PaX+z9D0/z6F7Yt2u15q7wt0I62g5kX6xUKR1SJiefgG+u2/gJUmM8B47XRvQR6w==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.findlast@^1.2.4:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
+  integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.findlastindex@^1.2.3:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
+  integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.flatmap@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
+  integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.toreversed@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz#b989a6bf35c4c5051e1dc0325151bf8088954eba"
+  integrity sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.tosorted@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz#c8c89348337e51b8a3c48a9227f9ce93ceedcba8"
+  integrity sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==
+  dependencies:
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.1.0"
+    es-shim-unscopables "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6"
+  integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    es-abstract "^1.22.3"
+    es-errors "^1.2.1"
+    get-intrinsic "^1.2.3"
+    is-array-buffer "^3.0.4"
+    is-shared-array-buffer "^1.0.2"
+
+arrify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
+  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
+
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
+
+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"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
+
+axe-core@=4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
+  integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
+
+axobject-query@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
+  integrity sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==
+  dependencies:
+    dequal "^2.0.3"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+binary-extensions@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
+
+bootstrap@^4.6.1:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479"
+  integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.2, braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+busboy@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
+  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
+  dependencies:
+    streamsearch "^1.1.0"
+
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
+  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.1"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+caniuse-lite@^1.0.30001579:
+  version "1.0.30001600"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz#93a3ee17a35aa6a9f0c6ef1b2ab49507d1ab9079"
+  integrity sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==
+
+chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+client-only@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+"consolidated-events@^1.1.1 || ^2.0.0":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/consolidated-events/-/consolidated-events-2.0.2.tgz#da8d8f8c2b232831413d9e190dc11669c79f4a91"
+  integrity sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ==
+
+core-js@^3:
+  version "3.26.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.26.1.tgz#7a9816dabd9ee846c1c0fe0e8fcad68f3709134e"
+  integrity sha512-21491RRQVzUn0GGM9Z1Jrpr6PNPxPi+Za8OM9q4tksTSnlbXXGKK1nXNg/QvwFYettXvSX6zWKCtHHfjN4puyA==
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+css-in-js-utils@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
+  integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==
+  dependencies:
+    hyphenate-style-name "^1.0.2"
+    isobject "^3.0.1"
+
+csstype@^3.0.0, csstype@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+data-view-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
+  integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
+  integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
+  integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+date-fns@^2.29.3:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
+define-properties@^1.1.3, define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+define-properties@^1.2.0, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+document.contains@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/document.contains/-/document.contains-1.0.2.tgz#4260abad67a6ae9e135c1be83d68da0db169d5f0"
+  integrity sha512-YcvYFs15mX8m3AO1QNQy3BlIpSMfNRj3Ujk2BEJxsZG+HZf7/hZ6jr7mDpXrF8q+ff95Vef5yjhiZxm8CGJr6Q==
+  dependencies:
+    define-properties "^1.1.3"
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
+enhanced-resolve@^5.10.0:
+  version "5.12.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
+  integrity sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+es-abstract@^1.19.0, es-abstract@^1.20.4:
+  version "1.20.4"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.4.tgz#1d103f9f8d78d4cf0713edcd6d0ed1a46eed5861"
+  integrity sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.3"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    safe-regex-test "^1.0.0"
+    string.prototype.trimend "^1.0.5"
+    string.prototype.trimstart "^1.0.5"
+    unbox-primitive "^1.0.2"
+
+es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2:
+  version "1.23.2"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.2.tgz#693312f3940f967b8dd3eebacb590b01712622e0"
+  integrity sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    arraybuffer.prototype.slice "^1.0.3"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    data-view-buffer "^1.0.1"
+    data-view-byte-length "^1.0.1"
+    data-view-byte-offset "^1.0.0"
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-set-tostringtag "^2.0.3"
+    es-to-primitive "^1.2.1"
+    function.prototype.name "^1.1.6"
+    get-intrinsic "^1.2.4"
+    get-symbol-description "^1.0.2"
+    globalthis "^1.0.3"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    hasown "^2.0.2"
+    internal-slot "^1.0.7"
+    is-array-buffer "^3.0.4"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.1"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.3"
+    is-string "^1.0.7"
+    is-typed-array "^1.1.13"
+    is-weakref "^1.0.2"
+    object-inspect "^1.13.1"
+    object-keys "^1.1.1"
+    object.assign "^4.1.5"
+    regexp.prototype.flags "^1.5.2"
+    safe-array-concat "^1.1.2"
+    safe-regex-test "^1.0.3"
+    string.prototype.trim "^1.2.9"
+    string.prototype.trimend "^1.0.8"
+    string.prototype.trimstart "^1.0.7"
+    typed-array-buffer "^1.0.2"
+    typed-array-byte-length "^1.0.1"
+    typed-array-byte-offset "^1.0.2"
+    typed-array-length "^1.0.5"
+    unbox-primitive "^1.0.2"
+    which-typed-array "^1.1.15"
+
+es-define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
+  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+
+es-errors@^1.1.0, es-errors@^1.2.1, es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-iterator-helpers@^1.0.15, es-iterator-helpers@^1.0.17:
+  version "1.0.18"
+  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.18.tgz#4d3424f46b24df38d064af6fbbc89274e29ea69d"
+  integrity sha512-scxAJaewsahbqTYrGKJihhViaM6DDZDDoucfvzNbK0pOren1g/daDQ3IAhzn+1G14rBG7w+i5N+qul60++zlKA==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.0"
+    es-errors "^1.3.0"
+    es-set-tostringtag "^2.0.3"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    globalthis "^1.0.3"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.0.3"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.7"
+    iterator.prototype "^1.1.2"
+    safe-array-concat "^1.1.2"
+
+es-object-atoms@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
+  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
+  integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
+  dependencies:
+    get-intrinsic "^1.2.4"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.1"
+
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
+es-shim-unscopables@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
+  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
+  dependencies:
+    hasown "^2.0.0"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+eslint-config-next@^14.1.4:
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.1.4.tgz#22f2ba4c0993e991249d863656a64c204bae542c"
+  integrity sha512-cihIahbhYAWwXJwZkAaRPpUi5t9aOi/HdfWXOjZeUOqNWXHD8X22kd1KG58Dc3MVaRx3HoR/oMGk2ltcrqDn8g==
+  dependencies:
+    "@next/eslint-plugin-next" "14.1.4"
+    "@rushstack/eslint-patch" "^1.3.3"
+    "@typescript-eslint/parser" "^5.4.2 || ^6.0.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.28.1"
+    eslint-plugin-jsx-a11y "^6.7.1"
+    eslint-plugin-react "^7.33.2"
+    eslint-plugin-react-hooks "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+
+eslint-config-prettier@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz#5a81680ec934beca02c7b1a61cf8ca34b66feab1"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
+
+eslint-import-resolver-node@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
+  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+  dependencies:
+    debug "^3.2.7"
+    resolve "^1.20.0"
+
+eslint-import-resolver-node@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+  dependencies:
+    debug "^3.2.7"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
+
+eslint-import-resolver-typescript@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.5.2.tgz#9431acded7d898fd94591a08ea9eec3514c7de91"
+  integrity sha512-zX4ebnnyXiykjhcBvKIf5TNvt8K7yX6bllTRZ14MiurKPjDpCAZujlszTdB8pcNXhZcOf+god4s9SjQa5GnytQ==
+  dependencies:
+    debug "^4.3.4"
+    enhanced-resolve "^5.10.0"
+    get-tsconfig "^4.2.0"
+    globby "^13.1.2"
+    is-core-module "^2.10.0"
+    is-glob "^4.0.3"
+    synckit "^0.8.4"
+
+eslint-module-utils@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz#52f2404300c3bd33deece9d7372fb337cc1d7c34"
+  integrity sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-plugin-import@^2.28.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
+  integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
+  dependencies:
+    array-includes "^3.1.7"
+    array.prototype.findlastindex "^1.2.3"
+    array.prototype.flat "^1.3.2"
+    array.prototype.flatmap "^1.3.2"
+    debug "^3.2.7"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.8.0"
+    hasown "^2.0.0"
+    is-core-module "^2.13.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.7"
+    object.groupby "^1.0.1"
+    object.values "^1.1.7"
+    semver "^6.3.1"
+    tsconfig-paths "^3.15.0"
+
+eslint-plugin-jsx-a11y@^6.7.1:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
+  integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    aria-query "^5.3.0"
+    array-includes "^3.1.7"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "=4.7.0"
+    axobject-query "^3.2.1"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    es-iterator-helpers "^1.0.15"
+    hasown "^2.0.0"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
+    minimatch "^3.1.2"
+    object.entries "^1.1.7"
+    object.fromentries "^2.0.7"
+
+"eslint-plugin-react-hooks@^4.5.0 || 5.0.0-canary-7118f5dd7-20230705":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
+eslint-plugin-react@^7.33.2:
+  version "7.34.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz#6806b70c97796f5bbfb235a5d3379ece5f4da997"
+  integrity sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==
+  dependencies:
+    array-includes "^3.1.7"
+    array.prototype.findlast "^1.2.4"
+    array.prototype.flatmap "^1.3.2"
+    array.prototype.toreversed "^1.1.2"
+    array.prototype.tosorted "^1.1.3"
+    doctrine "^2.1.0"
+    es-iterator-helpers "^1.0.17"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.7"
+    object.fromentries "^2.0.7"
+    object.hasown "^1.1.3"
+    object.values "^1.1.7"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.5"
+    semver "^6.3.1"
+    string.prototype.matchall "^4.0.10"
+
+eslint-scope@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
+  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
+  dependencies:
+    eslint-visitor-keys "^2.0.0"
+
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint-visitor-keys@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+
+eslint-visitor-keys@^3.4.1:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint@8.28.0:
+  version "8.28.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.28.0.tgz#81a680732634677cc890134bcdd9fdfea8e63d6e"
+  integrity sha512-S27Di+EVyMxcHiwDrFzk8dJYAaD+/5SoWKxL1ri/71CRHsnJnRDPNt2Kzj24+MT9FDupf4aqqyqPrvI8MvQ4VQ==
+  dependencies:
+    "@eslint/eslintrc" "^1.3.3"
+    "@humanwhocodes/config-array" "^0.11.6"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.4.0"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.15.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-sdsl "^4.1.4"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+
+espree@^9.4.0:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.1.tgz#51d6092615567a2c2cff7833445e37c28c0065bd"
+  integrity sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg==
+  dependencies:
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.3.0"
+
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+execa@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
+  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.2.11, fast-glob@^3.2.9:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.13.0.tgz#616760f88a7526bdfc596b7cab8c18938c36b98c"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flatted@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
+  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
+foreground-child@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.1.1.tgz#1d173e776d75d2772fed08efe4a0de1ea1b12d0d"
+  integrity sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.2, function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
+
+function.prototype.name@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
+  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    es-abstract "^1.22.1"
+    functions-have-names "^1.2.3"
+
+functions-have-names@^1.2.2, functions-have-names@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.3.tgz#063c84329ad93e83893c7f4f243ef63ffa351385"
+  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.3"
+
+get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
+  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+    hasown "^2.0.0"
+
+get-stream@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+get-symbol-description@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
+  integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
+  dependencies:
+    call-bind "^1.0.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+
+get-tsconfig@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.2.0.tgz#ff368dd7104dab47bf923404eb93838245c66543"
+  integrity sha512-X8u8fREiYOE6S8hLbq99PeykTDoLVnxvF4DjWKJmz9xy2nNRdUcV8ZN9tniJFeKyTU3qnC9lL8n4Chd6LmVKHg==
+
+glob-parent@^5.1.2, glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob@10.3.10:
+  version "10.3.10"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
+  integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^2.3.5"
+    minimatch "^9.0.1"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+    path-scurry "^1.10.1"
+
+glob@^7.1.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^13.15.0:
+  version "13.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.18.0.tgz#fb224daeeb2bb7d254cd2c640f003528b8d0c1dc"
+  integrity sha512-/mR4KI8Ps2spmoc0Ulu9L7agOF0du1CZNQ3dke8yItYlyKNmGrkONemBbd6V8UTc1Wgcqn21t3WYB7dbRmh6/A==
+  dependencies:
+    type-fest "^0.20.2"
+
+globalthis@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
+  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
+  dependencies:
+    define-properties "^1.1.3"
+
+globalyzer@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/globalyzer/-/globalyzer-0.1.0.tgz#cb76da79555669a1519d5a8edf093afaa0bf1465"
+  integrity sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==
+
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+globby@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-13.1.2.tgz#29047105582427ab6eca4f905200667b056da515"
+  integrity sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==
+  dependencies:
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.11"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^4.0.0"
+
+globrex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
+  integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
+
+gopd@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
+  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
+  dependencies:
+    get-intrinsic "^1.1.3"
+
+graceful-fs@^4.2.11:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+graceful-fs@^4.2.4:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
+graphql-tag@^2.12.6:
+  version "2.12.6"
+  resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
+  integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==
+  dependencies:
+    tslib "^2.1.0"
+
+graphql@^16.6.0:
+  version "16.6.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.6.0.tgz#c2dcffa4649db149f6282af726c8c83f1c7c5fdb"
+  integrity sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw==
+
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.0.1, has-proto@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
+  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
+
+has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+highlight.js@^11.7.0:
+  version "11.7.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.7.0.tgz#3ff0165bc843f8c9bce1fd89e2fda9143d24b11e"
+  integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
+
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
+human-signals@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
+  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+
+hyphenate-style-name@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
+i18next-fs-backend@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/i18next-fs-backend/-/i18next-fs-backend-2.0.1.tgz#5e33f28565257617682d622f6ce2c672d3f0ccc5"
+  integrity sha512-fzeiFOXqsMiFAFUnNyC4buERI11vTAuf7JIDWqaiPgBK3R+XJQMSY1LyoXaWspBEFaAkXH/0uMbOv7nttBFztg==
+
+i18next@^22.0.6:
+  version "22.0.6"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-22.0.6.tgz#d7029912f8aa74ff295c0d9afd1b7dea45859b49"
+  integrity sha512-RlreNGoPIdDP4QG+qSA9PxZKGwlzmcozbI9ObI6+OyUa/Rp0EjZZA9ubyBjw887zVNZsC+7FI3sXX8oiTzAfig==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+
+ignore@^5.1.4, ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
+immutable@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
+  integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
+
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+inline-style-prefixer@^5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz#e5a5a3515e25600e016b71e39138971228486c33"
+  integrity sha512-PYUF+94gDfhy+LsQxM0g3d6Hge4l1pAqOSOiZuHWzMvQEGsbRQ/ck2WioLqrY2ZkHyPgVUXxn+hrkF7D6QUGbA==
+  dependencies:
+    css-in-js-utils "^2.0.0"
+
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+  dependencies:
+    get-intrinsic "^1.1.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
+internal-slot@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
+  integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.0"
+    side-channel "^1.0.4"
+
+is-array-buffer@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
+  integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.2.1"
+
+is-async-function@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
+  integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.10.0, is-core-module@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+  dependencies:
+    has "^1.0.3"
+
+is-core-module@^2.13.0, is-core-module@^2.13.1:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
+  integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
+  dependencies:
+    hasown "^2.0.0"
+
+is-data-view@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
+  integrity sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+  dependencies:
+    is-typed-array "^1.1.13"
+
+is-date-object@^1.0.1, is-date-object@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-docker@^2.0.0, is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-finalizationregistry@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz#c8749b65f17c133313e661b1289b95ad3dbd62e6"
+  integrity sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-generator-function@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
+  integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-map@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
+
+is-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
+
+is-number-object@^1.0.4:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-regex@^1.1.0, is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-set@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
+
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-shared-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
+  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
+  dependencies:
+    call-bind "^1.0.7"
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-typed-array@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
+  integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
+  dependencies:
+    which-typed-array "^1.1.14"
+
+is-weakmap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
+  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
+
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-weakset@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.3.tgz#e801519df8c0c43e12ff2834eead84ec9e624007"
+  integrity sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
+
+isomorphic-unfetch@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz#87341d5f4f7b63843d468438128cb087b7c3e98f"
+  integrity sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==
+  dependencies:
+    node-fetch "^2.6.1"
+    unfetch "^4.2.0"
+
+iterator.prototype@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
+  integrity sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==
+  dependencies:
+    define-properties "^1.2.1"
+    get-intrinsic "^1.2.1"
+    has-symbols "^1.0.3"
+    reflect.getprototypeof "^1.0.4"
+    set-function-name "^2.0.1"
+
+jackspeak@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
+  integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+js-sdsl@^4.1.4:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
+  integrity sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==
+
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
+  integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
+  dependencies:
+    array-includes "^3.1.5"
+    object.assign "^4.1.3"
+
+jsx-ast-utils@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    object.assign "^4.1.4"
+    object.values "^1.1.6"
+
+language-subtag-registry@^0.3.20:
+  version "0.3.22"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
+  integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
+
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
+  dependencies:
+    language-subtag-registry "^0.3.20"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+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==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
+  dependencies:
+    yallist "^4.0.0"
+
+"lru-cache@^9.1.1 || ^10.0.0":
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.0.tgz#0bd445ca57363465900f4d1f9bd8db343a4d95c3"
+  integrity sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
+minimatch@9.0.3, minimatch@^9.0.1:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
+  integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
+
+"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==
+
+mri@^1.1.5:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+multimatch@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-4.0.0.tgz#8c3c0f6e3e8449ada0af3dd29efb491a375191b3"
+  integrity sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==
+  dependencies:
+    "@types/minimatch" "^3.0.3"
+    array-differ "^3.0.0"
+    array-union "^2.1.0"
+    arrify "^2.0.1"
+    minimatch "^3.0.4"
+
+nanoid@^3.3.6:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+next-i18next@^13.0.0:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/next-i18next/-/next-i18next-13.0.0.tgz#3a0253d0df27cb305fd5bedab0da46785dd5aa21"
+  integrity sha512-XiODAmMdueAIETQKIRPvYEZ5ghLOlzHb6PI4/WzwYkKdC/5q6UROzwIRw7aj3VWRB3xwnuuzEVI9NAjMfXyrkQ==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    core-js "^3"
+    hoist-non-react-statics "^3.3.2"
+    i18next-fs-backend "^2.0.0"
+
+next@^14.1.4:
+  version "14.1.4"
+  resolved "https://registry.yarnpkg.com/next/-/next-14.1.4.tgz#203310f7310578563fd5c961f0db4729ce7a502d"
+  integrity sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==
+  dependencies:
+    "@next/env" "14.1.4"
+    "@swc/helpers" "0.5.2"
+    busboy "1.6.0"
+    caniuse-lite "^1.0.30001579"
+    graceful-fs "^4.2.11"
+    postcss "8.4.31"
+    styled-jsx "5.1.1"
+  optionalDependencies:
+    "@next/swc-darwin-arm64" "14.1.4"
+    "@next/swc-darwin-x64" "14.1.4"
+    "@next/swc-linux-arm64-gnu" "14.1.4"
+    "@next/swc-linux-arm64-musl" "14.1.4"
+    "@next/swc-linux-x64-gnu" "14.1.4"
+    "@next/swc-linux-x64-musl" "14.1.4"
+    "@next/swc-win32-arm64-msvc" "14.1.4"
+    "@next/swc-win32-ia32-msvc" "14.1.4"
+    "@next/swc-win32-x64-msvc" "14.1.4"
+
+node-fetch@^2.6.1:
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+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"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+npm-run-path@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-inspect@^1.12.2, object-inspect@^1.9.0:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
+
+object-inspect@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.1.tgz#b96c6109324ccfef6b12216a956ca4dc2ff94bc2"
+  integrity sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==
+
+object-is@^1.1.2:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.0, object.assign@^4.1.3, object.assign@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.assign@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
+  dependencies:
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.2:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
+  integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+object.entries@^1.1.7:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+  integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+object.fromentries@^2.0.7:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+
+object.groupby@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+
+object.hasown@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.4.tgz#e270ae377e4c120cdcb7656ce66884a6218283dc"
+  integrity sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==
+  dependencies:
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+
+object.values@^1.1.0, object.values@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
+  integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+object.values@^1.1.7:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
+  integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+once@^1.3.0, once@^1.3.1, 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==
+  dependencies:
+    wrappy "1"
+
+onetime@^5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+open@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8"
+  integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
+optimism@^0.16.1:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.16.2.tgz#519b0c78b3b30954baed0defe5143de7776bf081"
+  integrity sha512-zWNbgWj+3vLEjZNIh/okkY2EUfX+vB9TJopzIZwT1xxaMqC5hRLLraePod4c5n4He08xuXNH+zhKFFCu390wiQ==
+  dependencies:
+    "@wry/context" "^0.7.0"
+    "@wry/trie" "^0.3.0"
+
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+p-try@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-scurry@^1.10.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.10.1.tgz#9ba6bf5aa8500fe9fd67df4f0d9483b2b0bfc698"
+  integrity sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==
+  dependencies:
+    lru-cache "^9.1.1 || ^10.0.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
+postcss@8.4.31:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.0.tgz#c7df58393c9ba77d6fba3921ae01faf994fb9dc9"
+  integrity sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==
+
+pretty-quick@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/pretty-quick/-/pretty-quick-3.1.3.tgz#15281108c0ddf446675157ca40240099157b638e"
+  integrity sha512-kOCi2FJabvuh1as9enxYmrnBC6tVMoVOenMaBqRfsvBHB0cbpYHjdQEpSglpASDFEXVwplpcGR4CLEaisYAFcA==
+  dependencies:
+    chalk "^3.0.0"
+    execa "^4.0.0"
+    find-up "^4.1.0"
+    ignore "^5.1.4"
+    mri "^1.1.5"
+    multimatch "^4.0.0"
+
+prop-types-exact@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prop-types-exact/-/prop-types-exact-1.2.0.tgz#825d6be46094663848237e3925a98c6e944e9869"
+  integrity sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==
+  dependencies:
+    has "^1.0.3"
+    object.assign "^4.1.0"
+    reflect.ownkeys "^0.2.0"
+
+prop-types@^15.6.0, prop-types@^15.7.2, prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
+react-i18next@^12.0.0:
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.0.0.tgz#634015a2c035779c5736ae4c2e5c34c1659753b1"
+  integrity sha512-/O7N6aIEAl1FaWZBNvhdIo9itvF/MO/nRKr9pYqRc9LhuC1u21SlfwpiYQqvaeNSEW3g3qUXLREOWMt+gxrWbg==
+  dependencies:
+    "@babel/runtime" "^7.14.5"
+    html-parse-stringify "^3.0.1"
+
+react-is@^16.13.1, react-is@^16.7.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+react-outside-click-handler@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz#3831d541ac059deecd38ec5423f81e80ad60e115"
+  integrity sha512-Te/7zFU0oHpAnctl//pP3hEAeobfeHMyygHB8MnjP6sX5OR8KHT1G3jmLsV3U9RnIYo+Yn+peJYWu+D5tUS8qQ==
+  dependencies:
+    airbnb-prop-types "^2.15.0"
+    consolidated-events "^1.1.1 || ^2.0.0"
+    document.contains "^1.0.1"
+    object.values "^1.1.0"
+    prop-types "^15.7.2"
+
+react-redux@^8.0.5:
+  version "8.0.5"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
+  integrity sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+redux-thunk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
+  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
+
+redux@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
+reflect.getprototypeof@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz#3ab04c32a8390b770712b7a8633972702d278859"
+  integrity sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.1"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    globalthis "^1.0.3"
+    which-builtin-type "^1.1.3"
+
+reflect.ownkeys@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
+  integrity sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg==
+
+regenerator-runtime@^0.13.10:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regexp.prototype.flags@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    functions-have-names "^1.2.2"
+
+regexp.prototype.flags@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
+  integrity sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==
+  dependencies:
+    call-bind "^1.0.6"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    set-function-name "^2.0.1"
+
+regexpp@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve@^1.20.0:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^1.22.4:
+  version "1.22.8"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.5:
+  version "2.0.0-next.5"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+response-iterator@^0.2.6:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/response-iterator/-/response-iterator-0.2.6.tgz#249005fb14d2e4eeb478a3f735a28fd8b4c9f3da"
+  integrity sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+safe-array-concat@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
+  integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
+safe-regex-test@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
+  integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-regex "^1.1.4"
+
+sass@^1.56.1:
+  version "1.56.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.56.1.tgz#94d3910cd468fd075fa87f5bb17437a0b617d8a7"
+  integrity sha512-VpEyKpyBPCxE7qGDtOcdJ6fFbcpOM+Emu7uZLxVrkX8KVU/Dp5UF7WLvzqRuUhB6mqqQt1xffLoG+AndxTZrCQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  dependencies:
+    loose-envify "^1.1.0"
+
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^7.5.4:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
+  integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
+  dependencies:
+    lru-cache "^6.0.0"
+
+set-function-length@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.1, set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+side-channel@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
+  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+    object-inspect "^1.13.1"
+
+signal-exit@^3.0.2:
+  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==
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
+streamsearch@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
+  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
+
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
+  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@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string.prototype.matchall@^4.0.10:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz#1092a72c59268d2abaad76582dccc687c0297e0a"
+  integrity sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.7"
+    regexp.prototype.flags "^1.5.2"
+    set-function-name "^2.0.2"
+    side-channel "^1.0.6"
+
+string.prototype.trim@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
+  integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.0"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimend@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
+  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+string.prototype.trimend@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
+  integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
+  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+string.prototype.trimstart@^1.0.7:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.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==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+styled-jsx@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
+  integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
+  dependencies:
+    client-only "0.0.1"
+
+styletron-engine-atomic@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/styletron-engine-atomic/-/styletron-engine-atomic-1.5.0.tgz#b2514d78498d0a8256bd170d0bda30fdfe9018f1"
+  integrity sha512-5rR6cbWqeKlrFUtIyw7aBe3Zn5XDCmxLJ6q7MAYwBCk6pbdBfj5MtoedH6KBygwjTNp7uddE536YrLvLP0N8/w==
+  dependencies:
+    inline-style-prefixer "^5.1.0"
+    styletron-standard "^3.1.0"
+
+styletron-react@5.2.7:
+  version "5.2.7"
+  resolved "https://registry.yarnpkg.com/styletron-react/-/styletron-react-5.2.7.tgz#7aa283a0b06787024f96289480c60bafed5048cf"
+  integrity sha512-PUUf7MAv9aaO8oT0B4ryPreeLi3BT1kQ7WIDNhkkpLkvCzk+pOvmtaZJJZRIxWPimj8756rLZqpF7/2ssF9KhQ==
+  dependencies:
+    prop-types "^15.6.0"
+    styletron-standard "^3.0.4"
+
+styletron-standard@^3.0.4, styletron-standard@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/styletron-standard/-/styletron-standard-3.1.0.tgz#d50a923939df79696f329ea8edbda22ca73c28ff"
+  integrity sha512-Cr2q0IFsag6OaIeD/LBNRuCxNTPa/WtTbKP1X3o50mDudN8FGwmD5h1sMJ/Bu5+mO/2NfrNAv9V9zUXn6lXXMA==
+  dependencies:
+    "@rtsao/csstype" "2.6.5-forked.0"
+    csstype "^3.0.0"
+    inline-style-prefixer "^5.1.0"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+symbol-observable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
+  integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
+
+synckit@^0.8.4:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.4.tgz#0e6b392b73fafdafcde56692e3352500261d64ec"
+  integrity sha512-Dn2ZkzMdSX827QbowGbU/4yjWuvNaCoScLLoMo/yKbu+P4GBR6cRGKZH27k6a9bRzdqcyd1DE96pQtQ6uNkmyw==
+  dependencies:
+    "@pkgr/utils" "^2.3.1"
+    tslib "^2.4.0"
+
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+tiny-glob@^0.2.9:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.9.tgz#2212d441ac17928033b110f8b3640683129d31e2"
+  integrity sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==
+  dependencies:
+    globalyzer "0.1.0"
+    globrex "^0.1.2"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
+ts-api-utils@^1.0.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
+  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
+
+ts-invariant@^0.10.3:
+  version "0.10.3"
+  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
+  integrity sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==
+  dependencies:
+    tslib "^2.1.0"
+
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
+  integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+typed-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
+  integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-offset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+  integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-length@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+  integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+
+typescript@4.9.3:
+  version "4.9.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.3.tgz#3aea307c1746b8c384435d8ac36b8a2e580d85db"
+  integrity sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==
+
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
+unfetch@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
+  integrity sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
+void-elements@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-builtin-type@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.1.3.tgz#b1b8443707cc58b6e9bf98d32110ff0c2cbd029b"
+  integrity sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==
+  dependencies:
+    function.prototype.name "^1.1.5"
+    has-tostringtag "^1.0.0"
+    is-async-function "^2.0.0"
+    is-date-object "^1.0.5"
+    is-finalizationregistry "^1.0.2"
+    is-generator-function "^1.0.10"
+    is-regex "^1.1.4"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
+which-collection@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
+  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
+  dependencies:
+    is-map "^2.0.3"
+    is-set "^2.0.3"
+    is-weakmap "^2.0.2"
+    is-weakset "^2.0.3"
+
+which-typed-array@^1.1.14, which-typed-array@^1.1.15, which-typed-array@^1.1.9:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.15.tgz#264859e9b11a649b388bfaaf4f767df1f779b38d"
+  integrity sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-tostringtag "^1.0.2"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+"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==
+  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"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zen-observable-ts@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz#6c6d9ea3d3a842812c6e9519209365a122ba8b58"
+  integrity sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==
+  dependencies:
+    zen-observable "0.8.15"
+
+zen-observable@0.8.15:
+  version "0.8.15"
+  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
+  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
diff --git a/src/shared/token-transfer-container/token-transfer-container.tsx b/src/shared/token-transfer-container/token-transfer-container.tsx
index 7aebcd1..ae5d6da 100644
--- a/src/shared/token-transfer-container/token-transfer-container.tsx
+++ b/src/shared/token-transfer-container/token-transfer-container.tsx
@@ -94,10 +94,7 @@ export const TokenTransferContainer: React.FC<Props> = ({
                     {tf.transactionHash}
                   </a>
                   <span className="text-nowrap">
-                    <a
-                      data-test="address_hash_link"
-                      href={assetURL(`address/${tf.transactionHash}`)}
-                    >
+                    <a href={assetURL(`address/${tf.transactionHash}`)}>
                       <span>
                         <span className="d-none d-md-none d-xl-inline">
                           {tf.fromAddress}
@@ -105,10 +102,7 @@ export const TokenTransferContainer: React.FC<Props> = ({
                       </span>
                     </a>{" "}
                     →{" "}
-                    <a
-                      data-test="address_hash_link"
-                      href={assetURL(`address/${tf.toAddress}`)}
-                    >
+                    <a href={assetURL(`address/${tf.toAddress}`)}>
                       <span>{tf.toAddress}</span>
                     </a>
                   </span>
diff --git a/src/shared/tx-details-container/tx-details-container.tsx b/src/shared/tx-details-container/tx-details-container.tsx
index a3f8ec0..4942819 100644
--- a/src/shared/tx-details-container/tx-details-container.tsx
+++ b/src/shared/tx-details-container/tx-details-container.tsx
@@ -203,7 +203,7 @@ export function TxDetailsContainer(): JSX.Element {
                         {" | "}
                         {format(
                           new Date(tx?.timestamp),
-                          "MMM-d-y hh:mm:ss a x"
+                          "MMM-d-y hh:mm:ss a x",
                         )}{" "}
                         UTC
                       </span>
@@ -251,9 +251,11 @@ export function TxDetailsContainer(): JSX.Element {
                       {t("tx.to")}
                     </dt>
                     <dd className="col-sm-9 col-lg-10">
-                      <a href={assetURL(`address/${tx?.toAddressHash}`)}>
-                        {tx?.toAddressHash}
-                      </a>
+                      <pre>
+                        <a href={assetURL(`address/${tx?.toAddressHash}`)}>
+                          {tx?.toAddressHash}
+                        </a>
+                      </pre>
 
                       <CopyToClipboard
                         reason="Copy To Address"